pandorga 1.2.1

data/studio-app/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "website-studio",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@clerk/clerk-js": "^6.36.0",
+    "@tiptap/core": "^3.31.4",
+    "@tiptap/extension-color": "^3.31.4",
+    "@tiptap/extension-link": "^3.31.4",
+    "@tiptap/extension-placeholder": "^3.31.4",
+    "@tiptap/extension-text-style": "^3.31.4",
+    "@tiptap/pm": "^3.31.4",
+    "@tiptap/starter-kit": "^3.31.4",
+    "js-yaml": "^4.1.0",
+    "marked": "^15.0.7"
+  },
+  "devDependencies": {
+    "vite": "^6.2.0"
+  }
+}

data/studio-app/skills-lock.json

@@ -0,0 +1,47 @@
+{
+  "version": 1,
+  "skills": {
+    "clerk-backend-api": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "skillPath": "skills/core/clerk-backend-api/SKILL.md",
+      "computedHash": "723ee35b2727923bbc9050c103369985d3d2ced00c9d25d79ff6383a23d8fea9"
+    },
+    "clerk-cli": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "skillPath": "skills/core/clerk-cli/SKILL.md",
+      "computedHash": "5a29712cce41e427fce609e0717a7d1868baf276014711f58a3f8e0fddde9006"
+    },
+    "clerk-custom-ui": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "skillPath": "skills/core/clerk-custom-ui/SKILL.md",
+      "computedHash": "91291f48e2f1734d5395a2038385ad8ee39db2a66b29081d8b2f2b72d454e3f9"
+    },
+    "clerk-orgs": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "skillPath": "skills/features/clerk-orgs/SKILL.md",
+      "computedHash": "82f66ef3c66f85c5241842fb2ab98c8970e1c812ede562576c922d5bbf5c3045"
+    },
+    "clerk-setup": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "skillPath": "skills/core/clerk-setup/SKILL.md",
+      "computedHash": "72c5baafa847dd0e8ccb7310ca769825114c14abe0214a1dca6ba0bfbb3ca2a8"
+    },
+    "clerk-testing": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "skillPath": "skills/features/clerk-testing/SKILL.md",
+      "computedHash": "2e2172e0ef81c58cec2bdb7ff5edefbd1ba424e9fca931e0cb80a1bd8bfd4e80"
+    },
+    "clerk-webhooks": {
+      "source": "clerk/skills",
+      "sourceType": "github",
+      "skillPath": "skills/features/clerk-webhooks/SKILL.md",
+      "computedHash": "e3c348bdc6dee1f28bc56577cd4aac605d3dfc3c63fcb10fc51e6c04c1fe3fb0"
+    }
+  }
+}

data/studio-app/src/api/client.js

@@ -0,0 +1,71 @@
+let getToken = async () => null;
+
+export function setTokenGetter(fn) {
+  getToken = fn;
+}
+
+async function api(path, init = {}) {
+  const token = await getToken();
+  const headers = {
+    Accept: "application/json",
+    ...(init.headers || {}),
+  };
+  if (token) headers.Authorization = `Bearer ${token}`;
+  if (init.body && !headers["Content-Type"]) {
+    headers["Content-Type"] = "application/json";
+  }
+  const res = await fetch(`/api/studio/${path.replace(/^\//, "")}`, {
+    ...init,
+    headers,
+  });
+  const text = await res.text();
+  let data = null;
+  try {
+    data = text ? JSON.parse(text) : null;
+  } catch {
+    data = { raw: text };
+  }
+  if (!res.ok) {
+    // Prefer the sentence. Joining the code in front (`server_error: …`) is
+    // what a narrow toolbar ellipsizes down to the code alone.
+    const message = String(data?.message || data?.error || `HTTP ${res.status}`);
+    const err = new Error(message);
+    err.status = res.status;
+    err.code = data?.error || "";
+    err.data = data;
+    throw err;
+  }
+  return data;
+}
+
+export const studioApi = {
+  session: () => api("session"),
+  tree: (collectionPath) =>
+    api(`tree?path=${encodeURIComponent(collectionPath)}`),
+  getFile: (path) => api(`file?path=${encodeURIComponent(path)}`),
+  putFile: ({ path, content, message, sha }) =>
+    api("file", {
+      method: "PUT",
+      body: JSON.stringify({ path, content, message, sha }),
+    }),
+  listMedia: (dirPath) =>
+    api(`media?path=${encodeURIComponent(dirPath || "content/media")}`),
+  uploadMedia: ({ path, content_base64, message }) =>
+    api("media", {
+      method: "POST",
+      body: JSON.stringify({ path, content_base64, message }),
+    }),
+  createMediaFolder: ({ path, message }) =>
+    api("media/folder", {
+      method: "POST",
+      body: JSON.stringify({ path, message }),
+    }),
+  searchXcite: (q) => api(`search/xcite?q=${encodeURIComponent(q || "")}`),
+  searchCite: (q) => api(`search/cite?q=${encodeURIComponent(q || "")}`),
+  /** Correct / Refine — docs/features/studio-proof.md (AC-PRF-01). */
+  rewrite: (payload) =>
+    api("rewrite", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    }),
+};

data/studio-app/src/editor/body-editor.js

@@ -0,0 +1,70 @@
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import {
+  INCLUDE_DEFS,
+  LiquidIncludeNode,
+  markdownToEditorContent,
+  serializeDocToMarkdown,
+} from "./liquid.js";
+
+export function createBodyEditor(element, { content = "", onUpdate } = {}) {
+  const liquidNodes = INCLUDE_DEFS.map(LiquidIncludeNode);
+
+  const editor = new Editor({
+    element,
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3, 4] },
+      }),
+      TextStyle,
+      Color,
+      Link.configure({
+        autolink: false,
+        linkOnPaste: false,
+        openOnClick: false,
+      }),
+      Placeholder.configure({ placeholder: "Write… Use Insert for Liquid blocks." }),
+      ...liquidNodes,
+    ],
+    content: markdownToEditorContent(content),
+    onUpdate: ({ editor: ed }) => {
+      if (onUpdate) onUpdate(serializeDocToMarkdown(ed));
+    },
+  });
+
+  return {
+    editor,
+    getMarkdown: () => serializeDocToMarkdown(editor),
+    setMarkdown: (md) => {
+      editor.commands.setContent(markdownToEditorContent(md));
+    },
+    destroy: () => editor.destroy(),
+    insertInclude: (defName, attrs = {}) => {
+      const def = INCLUDE_DEFS.find((d) => d.name === defName);
+      if (!def) return;
+      editor.commands.insertContent({ type: def.name, attrs });
+    },
+    transformSelectionCase: (mode) => {
+      const { from, to, empty } = editor.state.selection;
+      if (empty) return;
+      const text = editor.state.doc.textBetween(from, to, "");
+      let next = text;
+      if (mode === "lower") next = text.toLocaleLowerCase();
+      else if (mode === "upper") next = text.toLocaleUpperCase();
+      else if (mode === "title") {
+        next = text.replace(/\S+/g, (word) => {
+          const first = [...word][0] || "";
+          const rest = [...word].slice(1).join("");
+          return first.toLocaleUpperCase() + rest.toLocaleLowerCase();
+        });
+      } else return;
+      editor.chain().focus().insertContentAt({ from, to }, next).run();
+    },
+  };
+}
+
+export { INCLUDE_DEFS };

data/studio-app/src/editor/liquid-core.js

@@ -0,0 +1,382 @@
+/**
+ * Pure Liquid include serialize/parse helpers (no TipTap).
+ * Used by the editor and by scripts/test/test-studio-liquid-roundtrip.mjs.
+ */
+
+export const INCLUDE_DEFS = [
+  {
+    name: "figure",
+    include: "figure.html",
+    label: "Figure",
+    fields: ["src", "alt", "caption", "source", "width"],
+  },
+  {
+    name: "cutIn",
+    include: "cut-in.html",
+    label: "Cut-in",
+    fields: ["src", "alt", "side"],
+  },
+  {
+    name: "youtube",
+    include: "youtube.html",
+    label: "YouTube",
+    fields: ["id", "caption", "width"],
+  },
+  {
+    name: "youtubeShort",
+    include: "youtube-short.html",
+    label: "YouTube Short",
+    fields: ["src", "src2"],
+  },
+  {
+    name: "video",
+    include: "video.html",
+    label: "Video",
+    fields: ["src", "caption", "width"],
+  },
+  {
+    name: "plotly",
+    include: "plotly.html",
+    label: "Plotly",
+    fields: ["src", "caption", "width", "height", "source", "alt"],
+  },
+  {
+    name: "xcite",
+    include: "xcite.html",
+    label: "Xcite",
+    fields: ["key"],
+    inline: true,
+  },
+  {
+    name: "cite",
+    include: "cite.html",
+    label: "Cite",
+    fields: ["key"],
+    inline: true,
+  },
+  {
+    name: "articleNote",
+    include: "article-note",
+    label: "Article note",
+    fields: ["body"],
+    blockBody: true,
+  },
+  {
+    name: "poem",
+    include: "poem",
+    label: "Poem",
+    fields: ["body"],
+    blockBody: true,
+  },
+];
+
+export function attrsToInclude(def, attrs) {
+  if (def.blockBody) {
+    const body = attrs.body || "";
+    return `{% include ${def.include} markdown="1" %}\n${body}\n{% endinclude %}`;
+  }
+  const parts = def.fields
+    .filter((f) => attrs[f] != null && String(attrs[f]).length)
+    .map((f) => `${f}="${String(attrs[f]).replace(/"/g, """)}"`);
+  if (!parts.length) return `{% include ${def.include} %}`;
+  return `{% include ${def.include} ${parts.join(" ")} %}`;
+}
+
+export function parseIncludes(markdown) {
+  const text = String(markdown || "");
+  const segments = [];
+  // Stop at `%}` only — attrs often contain `%` (width="80%", percent-encoded URLs).
+  const selfRe = /\{%-?\s*include\s+([\w.-]+)\s*((?:(?!%\})[\s\S])*?)\s*-?%\}/g;
+  let last = 0;
+  let m;
+  while ((m = selfRe.exec(text))) {
+    const includeName = m[1];
+    const def = INCLUDE_DEFS.find((d) => d.include === includeName);
+    if (!def || def.blockBody) continue;
+    if (m.index > last) {
+      segments.push({ type: "text", text: text.slice(last, m.index) });
+    }
+    const attrs = parseAttrString(m[2]);
+    segments.push({ type: "include", def, attrs, raw: m[0] });
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) {
+    segments.push({ type: "text", text: text.slice(last) });
+  }
+  return segments;
+}
+
+function parseAttrString(raw) {
+  const attrs = {};
+  String(raw || "").replace(
+    /([\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g,
+    (_, key, d, s) => {
+      attrs[key] = d != null ? d : s;
+      return "";
+    }
+  );
+  return attrs;
+}
+
+const INCLUDE_RE =
+  /\{%-?\s*include\s+([\w.-]+)\s*((?:(?!%\})[\s\S])*?)\s*-?%\}/g;
+
+function defForInclude(includeName) {
+  return INCLUDE_DEFS.find((d) => d.include === includeName);
+}
+
+/** A chunk that is one include and nothing else, newlines inside the tag allowed. */
+function matchSoloInclude(chunk) {
+  const t = String(chunk || "").trim();
+  if (!t.startsWith("{%")) return null;
+  const block = t.match(
+    /^\{%-?\s*include\s+([\w.-]+)\b[^%]*?-?%\}\s*([\s\S]*?)\s*\{%-?\s*endinclude\s*-?%\}$/
+  );
+  if (block) {
+    const def = defForInclude(block[1]);
+    if (!def?.blockBody) return null;
+    return {
+      type: def.name,
+      attrs: { body: block[2].replace(/^\n|\n$/g, ""), raw: t },
+    };
+  }
+  const self = t.match(
+    /^\{%-?\s*include\s+([\w.-]+)\s*((?:(?!%\})[\s\S])*?)\s*-?%\}$/
+  );
+  if (!self) return null;
+  const def = defForInclude(self[1]);
+  if (!def || def.inline || def.blockBody) return null;
+  return includeNode(def, self[2], self[0]);
+}
+
+function includeNode(def, attrSource, raw) {
+  return {
+    type: def.name,
+    attrs: { ...parseAttrString(attrSource), raw },
+  };
+}
+
+function rawStillMatches(def, attrs) {
+  const raw = attrs?.raw;
+  if (typeof raw !== "string" || !raw) return false;
+  if (def.blockBody) {
+    const current = attrs.body == null ? "" : String(attrs.body);
+    return raw.includes(current);
+  }
+  const fromRaw = parseAttrString(raw);
+  for (const field of def.fields) {
+    const current = attrs[field] == null ? "" : String(attrs[field]);
+    const original = fromRaw[field] == null ? "" : String(fromRaw[field]);
+    if (current !== original) return false;
+  }
+  return true;
+}
+
+function includeMarkdown(def, attrs) {
+  if (rawStillMatches(def, attrs)) return attrs.raw;
+  return attrsToInclude(def, attrs);
+}
+
+function paragraphNodes(text) {
+  const src = String(text || "");
+  const nodes = [];
+  const re = new RegExp(INCLUDE_RE.source, "g");
+  let last = 0;
+  let m;
+  while ((m = re.exec(src))) {
+    if (m.index > last) {
+      nodes.push({ type: "text", text: src.slice(last, m.index) });
+    }
+    const def = defForInclude(m[1]);
+    if (def?.inline) {
+      nodes.push(includeNode(def, m[2], m[0]));
+    } else {
+      nodes.push({ type: "text", text: m[0] });
+    }
+    last = m.index + m[0].length;
+  }
+  if (last < src.length) {
+    nodes.push({ type: "text", text: src.slice(last) });
+  }
+  return nodes.filter((n) => n.type !== "text" || n.text !== "");
+}
+
+function stripOuterBlankLines(chunk) {
+  return String(chunk || "").replace(/^\n+|\n+$/g, "");
+}
+
+function pushPlainChunk(content, text) {
+  const line = stripOuterBlankLines(text);
+  if (!line) return;
+  const heading = line.match(/^(#{1,6})\s+([\s\S]*)$/);
+  if (heading && !line.includes("\n") && line.trim() === line) {
+    content.push({
+      type: "heading",
+      attrs: { level: heading[1].length },
+      content: paragraphNodes(heading[2]),
+    });
+    return;
+  }
+  content.push({ type: "paragraph", content: paragraphNodes(line) });
+}
+
+function pushRichChunk(content, chunk) {
+  const trimmed = stripOuterBlankLines(chunk);
+  if (!trimmed) return;
+  const solo = matchSoloInclude(trimmed);
+  if (solo) {
+    content.push(solo);
+    return;
+  }
+
+  const re = new RegExp(INCLUDE_RE.source, "g");
+  const parts = [];
+  let last = 0;
+  let m;
+  let sawBlock = false;
+  while ((m = re.exec(trimmed))) {
+    const def = defForInclude(m[1]);
+    if (def && !def.inline && !def.blockBody) {
+      sawBlock = true;
+      parts.push({ kind: "text", text: trimmed.slice(last, m.index) });
+      parts.push({
+        kind: "block",
+        node: includeNode(def, m[2], m[0]),
+      });
+      last = m.index + m[0].length;
+    }
+  }
+  if (!sawBlock) {
+    pushPlainChunk(content, trimmed);
+    return;
+  }
+  parts.push({ kind: "text", text: trimmed.slice(last) });
+  for (const part of parts) {
+    if (part.kind === "block") content.push(part.node);
+    else if (part.text.trim()) pushPlainChunk(content, part.text);
+  }
+}
+
+function pushMarkdownChunks(content, text) {
+  const fenceRe = /```([^\n`]*)\n([\s\S]*?)```/g;
+  let last = 0;
+  let m;
+  const src = String(text || "");
+  while ((m = fenceRe.exec(src))) {
+    if (m.index > last) pushProseChunks(content, src.slice(last, m.index));
+    const lang = String(m[1] || "").trim();
+    const code = String(m[2] || "").replace(/\n$/, "");
+    content.push({
+      type: "codeBlock",
+      attrs: { language: lang || null },
+      content: code ? [{ type: "text", text: code }] : [],
+    });
+    last = m.index + m[0].length;
+  }
+  if (last < src.length) pushProseChunks(content, src.slice(last));
+}
+
+function pushProseChunks(content, text) {
+  const chunks = String(text || "").split(/\n{2,}/);
+  for (const chunk of chunks) pushRichChunk(content, chunk);
+}
+
+export function markdownToEditorContent(markdown) {
+  const content = [];
+  pushMarkdownChunks(content, markdown);
+  if (!content.length) content.push({ type: "paragraph" });
+  return { type: "doc", content };
+}
+
+function inlineToMd(nodes) {
+  return (nodes || [])
+    .map((n) => {
+      if (n.type === "text") {
+        let t = n.text || "";
+        const marks = n.marks || [];
+        for (const mark of marks) {
+          if (mark.type === "bold") t = `**${t}**`;
+          if (mark.type === "italic") t = `*${t}*`;
+          if (mark.type === "strike") t = `~~${t}~~`;
+          if (mark.type === "code") t = `\`${t}\``;
+          if (mark.type === "link") t = `[${t}](${mark.attrs?.href || ""})`;
+          if (mark.type === "textStyle" && mark.attrs?.color) {
+            t = `<span style="color:${mark.attrs.color}">${t}</span>`;
+          }
+        }
+        return t;
+      }
+      if (n.type === "hardBreak") return "  \n";
+      const def = INCLUDE_DEFS.find((d) => d.name === n.type);
+      if (def) return includeMarkdown(def, n.attrs || {});
+      return "";
+    })
+    .join("");
+}
+
+function nodesToMarkdown(nodes) {
+  return (nodes || [])
+    .map((node) => {
+      const def = INCLUDE_DEFS.find((d) => d.name === node.type);
+      if (def) {
+        const block = includeMarkdown(def, node.attrs || {});
+        return block.endsWith("\n") ? `${block}\n` : `${block}\n\n`;
+      }
+      switch (node.type) {
+        case "paragraph":
+          return `${inlineToMd(node.content || [])}\n\n`;
+        case "heading": {
+          const level = node.attrs?.level || 1;
+          return `${"#".repeat(level)} ${inlineToMd(node.content || [])}\n\n`;
+        }
+        case "blockquote":
+          return (
+            nodesToMarkdown(node.content || [])
+              .split("\n")
+              .map((l) => (l ? `> ${l}` : ">"))
+              .join("\n") + "\n\n"
+          );
+        case "bulletList":
+          return (
+            (node.content || [])
+              .map((li) => `- ${nodesToMarkdown(li.content || []).trim()}`)
+              .join("\n") + "\n\n"
+          );
+        case "orderedList":
+          return (
+            (node.content || [])
+              .map(
+                (li, i) =>
+                  `${i + 1}. ${nodesToMarkdown(li.content || []).trim()}`
+              )
+              .join("\n") + "\n\n"
+          );
+        case "codeBlock": {
+          const lang = node.attrs?.language || "";
+          return (
+            "```" +
+            lang +
+            "\n" +
+            (node.content || []).map((c) => c.text || "").join("") +
+            "\n```\n\n"
+          );
+        }
+        case "horizontalRule":
+          return "---\n\n";
+        default:
+          if (node.content) return nodesToMarkdown(node.content);
+          return "";
+      }
+    })
+    .join("");
+}
+
+export function serializeContent(nodes) {
+  return nodesToMarkdown(nodes).trim() + "\n";
+}
+
+/** Parse then serialize. Includes stay inline or one line, with the spaces around them. */
+export function roundTripMarkdown(markdown) {
+  const doc = markdownToEditorContent(markdown);
+  return serializeContent(doc.content || []);
+}

data/studio-app/src/editor/liquid.js

@@ -0,0 +1,77 @@
+/**
+ * Atomic Liquid include blocks for TipTap.
+ * Spec: docs/features/studio.md §6 — AC-STU-03, AC-STU-04.
+ */
+
+import { Node, mergeAttributes } from "@tiptap/core";
+import {
+  INCLUDE_DEFS,
+  attrsToInclude,
+  parseIncludes,
+  markdownToEditorContent,
+  serializeContent,
+} from "./liquid-core.js";
+
+export {
+  INCLUDE_DEFS,
+  attrsToInclude,
+  parseIncludes,
+  markdownToEditorContent,
+  serializeContent,
+};
+
+export function LiquidIncludeNode(def) {
+  return Node.create({
+    name: def.name,
+    group: def.inline ? "inline" : "block",
+    inline: !!def.inline,
+    atom: true,
+    selectable: true,
+    draggable: true,
+    addAttributes() {
+      const attrs = {};
+      for (const f of def.fields) {
+        attrs[f] = { default: "" };
+      }
+      attrs.raw = { default: "" };
+      return attrs;
+    },
+    parseHTML() {
+      return [{ tag: `div[data-liquid="${def.name}"]` }];
+    },
+    renderHTML({ HTMLAttributes }) {
+      const summary = def.fields
+        .map((f) => HTMLAttributes[f])
+        .filter(Boolean)
+        .slice(0, 2)
+        .join(" | ");
+      const tag = def.inline ? "span" : "div";
+      return [
+        tag,
+        mergeAttributes(HTMLAttributes, {
+          "data-liquid": def.name,
+          class: def.inline ? "liquid-block liquid-block--inline" : "liquid-block",
+          "data-include": def.include,
+        }),
+        ["strong", {}, def.label],
+        [tag === "span" ? "span" : "div", {}, summary || "(empty)"],
+      ];
+    },
+    addCommands() {
+      return {
+        [`insert${def.name.charAt(0).toUpperCase()}${def.name.slice(1)}`]:
+          (attrs = {}) =>
+          ({ commands }) =>
+            commands.insertContent({
+              type: def.name,
+              attrs,
+            }),
+      };
+    },
+  });
+}
+
+export function serializeDocToMarkdown(editor) {
+  const json = editor.getJSON();
+  return serializeContent(json.content || []);
+}