@autumnsgrove/groveengine 0.3.3 → 0.4.0

package/dist/components/admin/composables/useEditorTheme.svelte.d.ts

@@ -0,0 +1,195 @@
+/**
+ * Creates an editor theme manager with Svelte 5 runes
+ * @returns {object} Theme state and controls
+ */
+export function useEditorTheme(): object;
+export namespace themes {
+    namespace grove {
+        let name: string;
+        let label: string;
+        let desc: string;
+        let accent: string;
+        let accentDim: string;
+        let accentBright: string;
+        let accentGlow: string;
+        let bg: string;
+        let bgSecondary: string;
+        let bgTertiary: string;
+        let border: string;
+        let borderAccent: string;
+        let text: string;
+        let textDim: string;
+        let statusBg: string;
+        let statusBorder: string;
+    }
+    namespace amber {
+        let name_1: string;
+        export { name_1 as name };
+        let label_1: string;
+        export { label_1 as label };
+        let desc_1: string;
+        export { desc_1 as desc };
+        let accent_1: string;
+        export { accent_1 as accent };
+        let accentDim_1: string;
+        export { accentDim_1 as accentDim };
+        let accentBright_1: string;
+        export { accentBright_1 as accentBright };
+        let accentGlow_1: string;
+        export { accentGlow_1 as accentGlow };
+        let bg_1: string;
+        export { bg_1 as bg };
+        let bgSecondary_1: string;
+        export { bgSecondary_1 as bgSecondary };
+        let bgTertiary_1: string;
+        export { bgTertiary_1 as bgTertiary };
+        let border_1: string;
+        export { border_1 as border };
+        let borderAccent_1: string;
+        export { borderAccent_1 as borderAccent };
+        let text_1: string;
+        export { text_1 as text };
+        let textDim_1: string;
+        export { textDim_1 as textDim };
+        let statusBg_1: string;
+        export { statusBg_1 as statusBg };
+        let statusBorder_1: string;
+        export { statusBorder_1 as statusBorder };
+    }
+    namespace matrix {
+        let name_2: string;
+        export { name_2 as name };
+        let label_2: string;
+        export { label_2 as label };
+        let desc_2: string;
+        export { desc_2 as desc };
+        let accent_2: string;
+        export { accent_2 as accent };
+        let accentDim_2: string;
+        export { accentDim_2 as accentDim };
+        let accentBright_2: string;
+        export { accentBright_2 as accentBright };
+        let accentGlow_2: string;
+        export { accentGlow_2 as accentGlow };
+        let bg_2: string;
+        export { bg_2 as bg };
+        let bgSecondary_2: string;
+        export { bgSecondary_2 as bgSecondary };
+        let bgTertiary_2: string;
+        export { bgTertiary_2 as bgTertiary };
+        let border_2: string;
+        export { border_2 as border };
+        let borderAccent_2: string;
+        export { borderAccent_2 as borderAccent };
+        let text_2: string;
+        export { text_2 as text };
+        let textDim_2: string;
+        export { textDim_2 as textDim };
+        let statusBg_2: string;
+        export { statusBg_2 as statusBg };
+        let statusBorder_2: string;
+        export { statusBorder_2 as statusBorder };
+    }
+    namespace dracula {
+        let name_3: string;
+        export { name_3 as name };
+        let label_3: string;
+        export { label_3 as label };
+        let desc_3: string;
+        export { desc_3 as desc };
+        let accent_3: string;
+        export { accent_3 as accent };
+        let accentDim_3: string;
+        export { accentDim_3 as accentDim };
+        let accentBright_3: string;
+        export { accentBright_3 as accentBright };
+        let accentGlow_3: string;
+        export { accentGlow_3 as accentGlow };
+        let bg_3: string;
+        export { bg_3 as bg };
+        let bgSecondary_3: string;
+        export { bgSecondary_3 as bgSecondary };
+        let bgTertiary_3: string;
+        export { bgTertiary_3 as bgTertiary };
+        let border_3: string;
+        export { border_3 as border };
+        let borderAccent_3: string;
+        export { borderAccent_3 as borderAccent };
+        let text_3: string;
+        export { text_3 as text };
+        let textDim_3: string;
+        export { textDim_3 as textDim };
+        let statusBg_3: string;
+        export { statusBg_3 as statusBg };
+        let statusBorder_3: string;
+        export { statusBorder_3 as statusBorder };
+    }
+    namespace nord {
+        let name_4: string;
+        export { name_4 as name };
+        let label_4: string;
+        export { label_4 as label };
+        let desc_4: string;
+        export { desc_4 as desc };
+        let accent_4: string;
+        export { accent_4 as accent };
+        let accentDim_4: string;
+        export { accentDim_4 as accentDim };
+        let accentBright_4: string;
+        export { accentBright_4 as accentBright };
+        let accentGlow_4: string;
+        export { accentGlow_4 as accentGlow };
+        let bg_4: string;
+        export { bg_4 as bg };
+        let bgSecondary_4: string;
+        export { bgSecondary_4 as bgSecondary };
+        let bgTertiary_4: string;
+        export { bgTertiary_4 as bgTertiary };
+        let border_4: string;
+        export { border_4 as border };
+        let borderAccent_4: string;
+        export { borderAccent_4 as borderAccent };
+        let text_4: string;
+        export { text_4 as text };
+        let textDim_4: string;
+        export { textDim_4 as textDim };
+        let statusBg_4: string;
+        export { statusBg_4 as statusBg };
+        let statusBorder_4: string;
+        export { statusBorder_4 as statusBorder };
+    }
+    namespace rose {
+        let name_5: string;
+        export { name_5 as name };
+        let label_5: string;
+        export { label_5 as label };
+        let desc_5: string;
+        export { desc_5 as desc };
+        let accent_5: string;
+        export { accent_5 as accent };
+        let accentDim_5: string;
+        export { accentDim_5 as accentDim };
+        let accentBright_5: string;
+        export { accentBright_5 as accentBright };
+        let accentGlow_5: string;
+        export { accentGlow_5 as accentGlow };
+        let bg_5: string;
+        export { bg_5 as bg };
+        let bgSecondary_5: string;
+        export { bgSecondary_5 as bgSecondary };
+        let bgTertiary_5: string;
+        export { bgTertiary_5 as bgTertiary };
+        let border_5: string;
+        export { border_5 as border };
+        let borderAccent_5: string;
+        export { borderAccent_5 as borderAccent };
+        let text_5: string;
+        export { text_5 as text };
+        let textDim_5: string;
+        export { textDim_5 as textDim };
+        let statusBg_5: string;
+        export { statusBg_5 as statusBg };
+        let statusBorder_5: string;
+        export { statusBorder_5 as statusBorder };
+    }
+}

package/dist/components/admin/composables/useEditorTheme.svelte.js

@@ -0,0 +1,182 @@
+/**
+ * Editor Theme Composable
+ * Manages theme selection and CSS variable application
+ */
+
+const THEME_STORAGE_KEY = "grove-editor-theme";
+
+// Theme definitions
+export const themes = {
+  grove: {
+    name: "grove",
+    label: "Grove",
+    desc: "forest green",
+    accent: "#8bc48b",
+    accentDim: "#7a9a7a",
+    accentBright: "#a8dca8",
+    accentGlow: "#c8f0c8",
+    bg: "#1e1e1e",
+    bgSecondary: "#252526",
+    bgTertiary: "#1a1a1a",
+    border: "#3a3a3a",
+    borderAccent: "#4a7c4a",
+    text: "#d4d4d4",
+    textDim: "#9d9d9d",
+    statusBg: "#2d4a2d",
+    statusBorder: "#3d5a3d",
+  },
+  amber: {
+    name: "amber",
+    label: "Amber",
+    desc: "classic terminal",
+    accent: "#ffb000",
+    accentDim: "#c98b00",
+    accentBright: "#ffc940",
+    accentGlow: "#ffe080",
+    bg: "#1a1400",
+    bgSecondary: "#241c00",
+    bgTertiary: "#140e00",
+    border: "#3a3000",
+    borderAccent: "#5a4800",
+    text: "#ffcc66",
+    textDim: "#aa8844",
+    statusBg: "#2a2000",
+    statusBorder: "#3a3000",
+  },
+  matrix: {
+    name: "matrix",
+    label: "Matrix",
+    desc: "digital rain",
+    accent: "#00ff00",
+    accentDim: "#00aa00",
+    accentBright: "#44ff44",
+    accentGlow: "#88ff88",
+    bg: "#0a0a0a",
+    bgSecondary: "#111111",
+    bgTertiary: "#050505",
+    border: "#1a3a1a",
+    borderAccent: "#00aa00",
+    text: "#00dd00",
+    textDim: "#008800",
+    statusBg: "#0a1a0a",
+    statusBorder: "#1a3a1a",
+  },
+  dracula: {
+    name: "dracula",
+    label: "Dracula",
+    desc: "purple night",
+    accent: "#bd93f9",
+    accentDim: "#9580c9",
+    accentBright: "#d4b0ff",
+    accentGlow: "#e8d0ff",
+    bg: "#282a36",
+    bgSecondary: "#343746",
+    bgTertiary: "#21222c",
+    border: "#44475a",
+    borderAccent: "#6272a4",
+    text: "#f8f8f2",
+    textDim: "#a0a0a0",
+    statusBg: "#3a3c4e",
+    statusBorder: "#44475a",
+  },
+  nord: {
+    name: "nord",
+    label: "Nord",
+    desc: "arctic frost",
+    accent: "#88c0d0",
+    accentDim: "#6a9aa8",
+    accentBright: "#a3d4e2",
+    accentGlow: "#c0e8f0",
+    bg: "#2e3440",
+    bgSecondary: "#3b4252",
+    bgTertiary: "#272c36",
+    border: "#434c5e",
+    borderAccent: "#5e81ac",
+    text: "#eceff4",
+    textDim: "#a0a8b0",
+    statusBg: "#3b4252",
+    statusBorder: "#434c5e",
+  },
+  rose: {
+    name: "rose",
+    label: "Rose",
+    desc: "soft pink",
+    accent: "#f5a9b8",
+    accentDim: "#c98a96",
+    accentBright: "#ffccd5",
+    accentGlow: "#ffe0e6",
+    bg: "#1f1a1b",
+    bgSecondary: "#2a2224",
+    bgTertiary: "#171314",
+    border: "#3a3234",
+    borderAccent: "#5a4a4e",
+    text: "#e8d8dc",
+    textDim: "#a09498",
+    statusBg: "#2a2224",
+    statusBorder: "#3a3234",
+  },
+};
+
+/**
+ * Creates an editor theme manager with Svelte 5 runes
+ * @returns {object} Theme state and controls
+ */
+export function useEditorTheme() {
+  let currentTheme = $state("grove");
+
+  function applyTheme(themeName) {
+    const theme = themes[themeName];
+    if (!theme) return;
+
+    const root = document.documentElement;
+    root.style.setProperty("--editor-accent", theme.accent);
+    root.style.setProperty("--editor-accent-dim", theme.accentDim);
+    root.style.setProperty("--editor-accent-bright", theme.accentBright);
+    root.style.setProperty("--editor-accent-glow", theme.accentGlow);
+    root.style.setProperty("--editor-bg", theme.bg);
+    root.style.setProperty("--editor-bg-secondary", theme.bgSecondary);
+    root.style.setProperty("--editor-bg-tertiary", theme.bgTertiary);
+    root.style.setProperty("--editor-border", theme.border);
+    root.style.setProperty("--editor-border-accent", theme.borderAccent);
+    root.style.setProperty("--editor-text", theme.text);
+    root.style.setProperty("--editor-text-dim", theme.textDim);
+    root.style.setProperty("--editor-status-bg", theme.statusBg);
+    root.style.setProperty("--editor-status-border", theme.statusBorder);
+  }
+
+  function loadTheme() {
+    try {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY);
+      if (stored && themes[stored]) {
+        currentTheme = stored;
+        applyTheme(stored);
+      }
+    } catch (e) {
+      console.warn("Failed to load theme:", e);
+    }
+  }
+
+  function saveTheme(themeName) {
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, themeName);
+    } catch (e) {
+      console.warn("Failed to save theme:", e);
+    }
+  }
+
+  function setTheme(themeName) {
+    if (!themes[themeName]) return;
+    currentTheme = themeName;
+    applyTheme(themeName);
+    saveTheme(themeName);
+  }
+
+  return {
+    get currentTheme() {
+      return currentTheme;
+    },
+    themes,
+    loadTheme,
+    setTheme,
+  };
+}

package/dist/components/admin/composables/useSlashCommands.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Creates a slash commands manager with Svelte 5 runes
+ * @param {object} options - Configuration options
+ * @param {Function} options.getTextareaRef - Function to get textarea reference
+ * @param {Function} options.getContent - Function to get content
+ * @param {Function} options.setContent - Function to set content
+ * @param {Function} options.getSnippets - Function to get user snippets
+ * @param {Function} options.onOpenSnippetsModal - Callback to open snippets modal
+ * @returns {object} Slash commands state and controls
+ */
+export function useSlashCommands(options?: {
+    getTextareaRef: Function;
+    getContent: Function;
+    setContent: Function;
+    getSnippets: Function;
+    onOpenSnippetsModal: Function;
+}): object;
+/**
+ * Slash Commands Composable
+ * Manages the slash command menu and execution
+ */
+export const baseSlashCommands: ({
+    id: string;
+    label: string;
+    insert: string;
+    cursorOffset?: undefined;
+} | {
+    id: string;
+    label: string;
+    insert: string;
+    cursorOffset: number;
+})[];

package/dist/components/admin/composables/useSlashCommands.svelte.js

@@ -0,0 +1,166 @@
+/**
+ * Slash Commands Composable
+ * Manages the slash command menu and execution
+ */
+
+// Base slash commands definition
+export const baseSlashCommands = [
+  { id: "heading1", label: "Heading 1", insert: "# " },
+  { id: "heading2", label: "Heading 2", insert: "## " },
+  { id: "heading3", label: "Heading 3", insert: "### " },
+  { id: "code", label: "Code Block", insert: "```\n\n```", cursorOffset: 4 },
+  { id: "quote", label: "Quote", insert: "> " },
+  { id: "list", label: "Bullet List", insert: "- " },
+  { id: "numbered", label: "Numbered List", insert: "1. " },
+  { id: "link", label: "Link", insert: "[](url)", cursorOffset: 1 },
+  { id: "image", label: "Image", insert: "![alt](url)", cursorOffset: 2 },
+  { id: "divider", label: "Divider", insert: "\n---\n" },
+  {
+    id: "anchor",
+    label: "Custom Anchor",
+    insert: "<!-- anchor:name -->\n",
+    cursorOffset: 14,
+  },
+];
+
+/**
+ * Creates a slash commands manager with Svelte 5 runes
+ * @param {object} options - Configuration options
+ * @param {Function} options.getTextareaRef - Function to get textarea reference
+ * @param {Function} options.getContent - Function to get content
+ * @param {Function} options.setContent - Function to set content
+ * @param {Function} options.getSnippets - Function to get user snippets
+ * @param {Function} options.onOpenSnippetsModal - Callback to open snippets modal
+ * @returns {object} Slash commands state and controls
+ */
+export function useSlashCommands(options = {}) {
+  const {
+    getTextareaRef,
+    getContent,
+    setContent,
+    getSnippets,
+    onOpenSnippetsModal,
+  } = options;
+
+  let menu = $state({
+    open: false,
+    query: "",
+    position: { x: 0, y: 0 },
+    selectedIndex: 0,
+  });
+
+  // Build full command list including snippets
+  function getAllCommands() {
+    const snippets = getSnippets ? getSnippets() : [];
+    const snippetCommands = snippets.map((s) => ({
+      id: s.id,
+      label: `> ${s.name}`,
+      insert: s.content,
+      isSnippet: true,
+    }));
+
+    const newSnippetCommand = {
+      id: "newSnippet",
+      label: "Create New Snippet...",
+      insert: "",
+      isAction: true,
+      action: onOpenSnippetsModal,
+    };
+
+    return [...baseSlashCommands, newSnippetCommand, ...snippetCommands];
+  }
+
+  // Get filtered commands based on query
+  function getFilteredCommands() {
+    const allCommands = getAllCommands();
+    return allCommands.filter((cmd) =>
+      cmd.label.toLowerCase().includes(menu.query.toLowerCase())
+    );
+  }
+
+  function open() {
+    menu.open = true;
+    menu.query = "";
+    menu.selectedIndex = 0;
+  }
+
+  function close() {
+    menu.open = false;
+  }
+
+  function navigate(direction) {
+    const filtered = getFilteredCommands();
+    const count = filtered.length;
+    if (count === 0) return;
+
+    if (direction === "down") {
+      menu.selectedIndex = (menu.selectedIndex + 1) % count;
+    } else if (direction === "up") {
+      menu.selectedIndex = (menu.selectedIndex - 1 + count) % count;
+    }
+  }
+
+  function execute(index) {
+    const filtered = getFilteredCommands();
+    const cmd = filtered[index];
+    if (!cmd) return;
+
+    const textareaRef = getTextareaRef();
+    const content = getContent();
+
+    // Handle action commands (like "Create New Snippet...")
+    if (cmd.isAction && cmd.action) {
+      // Remove the slash that triggered the menu
+      const pos = textareaRef.selectionStart;
+      const textBefore = content.substring(0, pos);
+      const lastSlashIndex = textBefore.lastIndexOf("/");
+      if (lastSlashIndex >= 0) {
+        setContent(content.substring(0, lastSlashIndex) + content.substring(pos));
+      }
+      menu.open = false;
+      cmd.action();
+      return;
+    }
+
+    // Remove the slash that triggered the menu and insert command
+    const pos = textareaRef.selectionStart;
+    const textBefore = content.substring(0, pos);
+    const lastSlashIndex = textBefore.lastIndexOf("/");
+
+    if (lastSlashIndex >= 0) {
+      setContent(
+        content.substring(0, lastSlashIndex) + cmd.insert + content.substring(pos)
+      );
+
+      setTimeout(() => {
+        const newPos = lastSlashIndex + (cmd.cursorOffset || cmd.insert.length);
+        textareaRef.selectionStart = textareaRef.selectionEnd = newPos;
+        textareaRef.focus();
+      }, 0);
+    }
+
+    menu.open = false;
+  }
+
+  function shouldTrigger(key, cursorPos, content) {
+    if (key !== "/" || menu.open) return false;
+    // Only trigger at start of line or after whitespace
+    return cursorPos === 0 || /\s$/.test(content.substring(0, cursorPos));
+  }
+
+  return {
+    get menu() {
+      return menu;
+    },
+    get isOpen() {
+      return menu.open;
+    },
+    getAllCommands,
+    getFilteredCommands,
+    open,
+    close,
+    navigate,
+    execute,
+    shouldTrigger,
+  };
+}

package/dist/components/admin/composables/useSnippets.svelte.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates a snippets manager with Svelte 5 runes
+ * @returns {object} Snippets state and controls
+ */
+export function useSnippets(): object;

package/dist/components/admin/composables/useSnippets.svelte.js

@@ -0,0 +1,122 @@
+/**
+ * Snippets Composable
+ * Manages user-created markdown snippets stored in localStorage
+ */
+
+const SNIPPETS_STORAGE_KEY = "grove-editor-snippets";
+
+/**
+ * Creates a snippets manager with Svelte 5 runes
+ * @returns {object} Snippets state and controls
+ */
+export function useSnippets() {
+  let snippets = $state([]);
+
+  let modal = $state({
+    open: false,
+    editingId: null,
+    name: "",
+    content: "",
+    trigger: "",
+  });
+
+  function load() {
+    try {
+      const stored = localStorage.getItem(SNIPPETS_STORAGE_KEY);
+      if (stored) {
+        snippets = JSON.parse(stored);
+      }
+    } catch (e) {
+      console.warn("Failed to load snippets:", e);
+    }
+  }
+
+  function save() {
+    try {
+      localStorage.setItem(SNIPPETS_STORAGE_KEY, JSON.stringify(snippets));
+    } catch (e) {
+      console.warn("Failed to save snippets:", e);
+    }
+  }
+
+  function openModal(editId = null) {
+    if (editId) {
+      const snippet = snippets.find((s) => s.id === editId);
+      if (snippet) {
+        modal.editingId = editId;
+        modal.name = snippet.name;
+        modal.content = snippet.content;
+        modal.trigger = snippet.trigger || "";
+      }
+    } else {
+      modal.editingId = null;
+      modal.name = "";
+      modal.content = "";
+      modal.trigger = "";
+    }
+    modal.open = true;
+  }
+
+  function closeModal() {
+    modal.open = false;
+    modal.editingId = null;
+    modal.name = "";
+    modal.content = "";
+    modal.trigger = "";
+  }
+
+  function saveSnippet() {
+    if (!modal.name.trim() || !modal.content.trim()) return;
+
+    if (modal.editingId) {
+      // Update existing snippet
+      snippets = snippets.map((s) =>
+        s.id === modal.editingId
+          ? {
+              ...s,
+              name: modal.name.trim(),
+              content: modal.content,
+              trigger: modal.trigger.trim() || null,
+            }
+          : s
+      );
+    } else {
+      // Create new snippet
+      const newSnippet = {
+        id: `snippet-${Date.now()}`,
+        name: modal.name.trim(),
+        content: modal.content,
+        trigger: modal.trigger.trim() || null,
+        createdAt: new Date().toISOString(),
+      };
+      snippets = [...snippets, newSnippet];
+    }
+
+    save();
+    closeModal();
+  }
+
+  function deleteSnippet(id) {
+    if (confirm("Delete this snippet?")) {
+      snippets = snippets.filter((s) => s.id !== id);
+      save();
+      if (modal.editingId === id) {
+        closeModal();
+      }
+    }
+  }
+
+  return {
+    get snippets() {
+      return snippets;
+    },
+    get modal() {
+      return modal;
+    },
+    load,
+    openModal,
+    closeModal,
+    saveSnippet,
+    deleteSnippet,
+  };
+}