feat: add custom CSS save system with dual-editor interface

Implement complete custom CSS management system:
- Separate base CSS (readonly) and custom CSS (editable)
- Save custom CSS to Kirby backend per narrative
- Visual save button with state indicators (dirty/saving/success/error)
- CSRF-protected API endpoint for CSS operations
- Dual-editor StylesheetViewer (base + custom with edit mode toggle)
- Auto-format custom CSS with Prettier on edit mode exit

Backend changes:
- Add web2print Kirby plugin with POST/GET routes
- Add customCss field to narrative blueprint
- Add CSRF token meta tag in header
- Include customCss and modified timestamps in JSON template
- Install code-editor plugin for Kirby panel

Frontend changes:
- Refactor stylesheet store with baseCss/customCss refs
- Make content a computed property (baseCss + customCss)
- Add helper methods: replaceBlock, replaceInCustomCss, setCustomCss
- Update all components to use new store API
- Create SaveButton component with FAB design
- Redesign StylesheetViewer with collapsable sections
- Initialize store from narrative data on app mount

File changes:
- Rename stylesheet.css → stylesheet.print.css
- Update all references to new filename

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

public/site/plugins/code-editor/src/components/field/CodeEditor.vue

@@ -0,0 +1,97 @@
+<template>
+  <k-field :input="uid" v-bind="$props" class="k-code-editor-field">
+    <prism-editor
+      v-model="code"
+      class="k-code-editor-input"
+      :highlight="highlighter"
+      :line-numbers="lineNumbers"
+      :tab-size="tabSize"
+      :insert-spaces="insertSpaces"
+      :ignore-tab-key="ignoreTabKey"
+      :data-size="size"
+      @input="onCodeInput"
+    />
+  </k-field>
+</template>
+
+<script>
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css";
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-less";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-scss";
+import "prismjs/components/prism-yaml";
+import "prismjs/themes/prism-tomorrow.css";
+
+export default {
+  components: { PrismEditor },
+
+  extends: "k-textarea-field",
+
+  props: {
+    size: String,
+    language: String,
+    lineNumbers: Boolean,
+    tabSize: Number,
+    insertSpaces: Boolean,
+    ignoreTabKey: Boolean,
+  },
+
+  data() {
+    return {
+      code: "",
+    };
+  },
+
+  mounted() {
+    this.code = this.value;
+  },
+
+  methods: {
+    highlighter() {
+      return highlight(this.code, languages[this.language]);
+    },
+
+    onCodeInput() {
+      this.$emit("input", this.code);
+    },
+  },
+};
+</script>
+
+<style>
+.k-code-editor-input {
+  background: light-dark(var(--color-gray-950), var(--input-color-back));
+  color: var(--color-gray-200);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  padding: var(--spacing-2);
+  border-radius: var(--rounded);
+}
+
+.k-code-editor-input[data-size="small"] {
+  min-height: 7.5rem;
+}
+.k-code-editor-input[data-size="medium"] {
+  min-height: 15rem;
+}
+.k-code-editor-input[data-size="large"] {
+  min-height: 30rem;
+}
+.k-code-editor-input[data-size="huge"] {
+  min-height: 45rem;
+}
+
+.prism-editor__textarea:focus {
+  outline: none;
+}
+</style>

public/site/plugins/code-editor/src/index.js

@@ -0,0 +1,7 @@
+import CodeEditor from "./components/field/CodeEditor.vue";
+
+window.panel.plugin("sylvainjule/code-editor", {
+  fields: {
+    "code-editor": CodeEditor,
+  },
+});

public/site/plugins/code-editor/src/node/patchVuePrismEditor.mjs

@@ -0,0 +1,38 @@
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import chalk from "chalk";
+import consola from "consola";
+
+const srcPath = "node_modules/vue-prism-editor/dist/prismeditor.esm.js";
+
+async function main() {
+  consola.start("Vue Prism Editor patcher");
+
+  if (!existsSync(srcPath)) {
+    consola.error(
+      `couldn't find ${chalk.cyan(srcPath)}, did you run ${chalk.green(
+        "npm install"
+      )}?`
+    );
+    return;
+  }
+
+  const source = readFileSync(srcPath, "utf8");
+
+  if (!source.includes("Vue.extend")) {
+    consola.success("already patched");
+    return;
+  }
+
+  consola.info("patching the source component...");
+
+  let output = source
+    .replace(/^import Vue from 'vue';/, "")
+    .replace("/*#__PURE__*/Vue.extend(", "")
+    .replace(/\}\)(;\s+export)/, "}$1");
+
+  writeFileSync(srcPath, output, "utf8");
+
+  consola.success("successfully patched");
+}
+
+main().catch((err) => consola.error(err));