domma-cms 0.2.1 → 0.5.0

package/admin/js/views/page-editor.js

@@ -1,661 +1,72 @@
-/**
- * Page Editor View
- * Handles both create (new) and edit (existing) modes.
- * Provides a split-pane Markdown editor with live preview, toolbar, and media picker.
- */
-import {api} from '../api.js';
-import {createToolbar, insertAtCursor, wrapSelection} from '../lib/markdown-toolbar.js';
-
-/**
- * Builds and opens the editor help slideover with a cheat-sheet reference.
- */
-function openEditorHelp() {
-  const so = E.slideover({ title: 'Editor Reference', size: 'md', position: 'right' });
-
-  const codeStyle = 'background:var(--dm-surface-subtle,#1a1a2e);padding:.2rem .4rem;border-radius:3px;font-size:.85em;font-family:monospace;';
-  const h3Style = 'margin:1rem 0 .5rem;font-size:1rem;';
-
-  function makeCode(text) {
-    const el = document.createElement('code');
-    el.style.cssText = codeStyle;
-    el.textContent = text;
-    return el;
-  }
-
-  function makeH3(text) {
-    const el = document.createElement('h3');
-    el.style.cssText = h3Style;
-    el.textContent = text;
-    return el;
-  }
-
-  const wrap = document.createElement('div');
-  wrap.style.cssText = 'padding:1rem;display:flex;flex-direction:column;gap:1rem;';
-
-  // --- Section 1: Markdown Basics ---
-  const section1 = document.createElement('div');
-  section1.appendChild(makeH3('Markdown Basics'));
-
-  const table = document.createElement('table');
-  table.style.cssText = 'width:100%;border-collapse:collapse;font-size:.9em;';
-
-  const thead = document.createElement('thead');
-  const headerRow = document.createElement('tr');
-  ['Syntax', 'Result'].forEach(text => {
-    const th = document.createElement('th');
-    th.style.cssText = 'text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--dm-border,#333);';
-    th.textContent = text;
-    headerRow.appendChild(th);
-  });
-  thead.appendChild(headerRow);
-  table.appendChild(thead);
-
-  const tbody = document.createElement('tbody');
-  const rows = [
-    ['**bold**', 'bold (rendered bold)'],
-    ['_italic_', 'italic (rendered italic)'],
-    ['## Heading', 'Heading (h2)'],
-    ['[text](url)', 'Link'],
-    ['![alt](url)', 'Image'],
-    ['- item', 'Bullet list'],
-    ['`code`', 'Inline code'],
-    ['---', 'Divider'],
-  ];
-  rows.forEach(([syntax, result]) => {
-    const tr = document.createElement('tr');
-    const tdSyntax = document.createElement('td');
-    tdSyntax.style.cssText = 'padding:.35rem .5rem;vertical-align:top;';
-    tdSyntax.appendChild(makeCode(syntax));
-    const tdResult = document.createElement('td');
-    tdResult.style.cssText = 'padding:.35rem .5rem;vertical-align:top;color:var(--dm-text-muted,#aaa);font-size:.85em;';
-    tdResult.textContent = result;
-    tr.appendChild(tdSyntax);
-    tr.appendChild(tdResult);
-    tbody.appendChild(tr);
-  });
-  table.appendChild(tbody);
-  section1.appendChild(table);
-  wrap.appendChild(section1);
-
-  // --- Section 2: Grid shortcodes ---
-  const section2 = document.createElement('div');
-  section2.appendChild(makeH3('Grid & Columns'));
-
-  function makeNote(text) {
-    const el = document.createElement('p');
-    el.style.cssText = 'margin:.3rem 0 .6rem;font-size:.82em;color:var(--dm-text-muted,#aaa);';
-    el.textContent = text;
-    return el;
-  }
-
-  function makeSnippet(label, code, note) {
-    const lbl = document.createElement('p');
-    lbl.style.cssText = 'margin:.75rem 0 .25rem;font-size:.85em;font-weight:600;';
-    lbl.textContent = label;
-    const pre = document.createElement('pre');
-    pre.style.cssText = codeStyle + 'display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;margin:0;';
-    pre.textContent = code;
-    const frag = document.createDocumentFragment();
-    frag.appendChild(lbl);
-    frag.appendChild(pre);
-    if (note) frag.appendChild(makeNote(note));
-    return frag;
-  }
-
-  const gridAttrTable = document.createElement('table');
-  gridAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
-  [
-    ['cols="N"', '[grid] only', 'Number of columns (1–12)'],
-    ['gap="N"', '[grid], [row]', 'Gap between columns/rows (1–6)'],
-    ['span="N"', '[col] only', 'How many columns this cell spans'],
-    ['class="x"', 'all', 'Add extra CSS classes'],
-  ].forEach(([attr, where, desc]) => {
-    const tr = document.createElement('tr');
-    [attr, where, desc].forEach((txt, i) => {
-      const td = document.createElement('td');
-      td.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
-      if (i === 0) {
-        td.appendChild(makeCode(attr));
-      } else {
-        td.style.color = 'var(--dm-text-muted,#aaa)';
-        td.textContent = txt;
-      }
-      tr.appendChild(td);
-    });
-    gridAttrTable.appendChild(tr);
-  });
-  section2.appendChild(gridAttrTable);
-
-  section2.appendChild(makeSnippet(
-    'Equal columns',
-    '[grid cols="3" gap="4"]\n[col]One[/col]\n[col]Two[/col]\n[col]Three[/col]\n[/grid]',
-    'cols sets the track count; each [col] fills one track.'
-  ));
-
-  section2.appendChild(makeSnippet(
-    'Column spanning (12-col base)',
-    '[grid cols="12" gap="3"]\n[col span="8"]Main content[/col]\n[col span="4"]Sidebar[/col]\n[/grid]',
-    'span values must add up to cols. Common splits: 8/4, 6/6, 9/3.'
-  ));
-
-  section2.appendChild(makeSnippet(
-    'Row (flexbox, equal-width)',
-    '[row gap="4"]\n[col]Left[/col]\n[col]Right[/col]\n[/row]',
-    'Use [row] when you want equal-width columns without specifying a count.'
-  ));
-
-  section2.appendChild(makeSnippet(
-    'Card in a grid',
-    '[grid cols="3" gap="4"]\n[col]\n[card title="One"]Content[/card]\n[/col]\n[col]\n[card title="Two"]Content[/card]\n[/col]\n[col]\n[card title="Three"]Content[/card]\n[/col]\n[/grid]',
-    null
-  ));
-
-  wrap.appendChild(section2);
-
-  // --- Section 3: Card shortcode ---
-  const section3 = document.createElement('div');
-  section3.appendChild(makeH3('Cards'));
-
-  section3.appendChild(makeSnippet(
-    'Basic card',
-    '[card title="Optional Title"]\nMarkdown **works** here.\n[/card]',
-    'Omit title for a card with no header.'
-  ));
-
-  section3.appendChild(makeSnippet(
-    'Collapsible card',
-    '[card title="Click to expand" collapsible="true"]\nHidden by default.\n[/card]',
-    null
-  ));
-
-  wrap.appendChild(section3);
-
-  // --- Section 3c: Hero shortcode ---
-  const section3c = document.createElement('div');
-  section3c.appendChild(makeH3('Hero'));
-  section3c.appendChild(makeNote('Full-width hero sections — no plugin required. Uses Domma\'s built-in Hero CSS component.'));
-
-  const heroAttrTable = document.createElement('table');
-  heroAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
-  [
-    ['title="..."', 'Heading text'],
-    ['tagline="..."', 'Subtitle text'],
-    ['size="sm|lg|full"', 'Height variant (default: normal)'],
-    ['variant="dark|primary|gradient-blue|gradient-purple|gradient-sunset|gradient-ocean"', 'Colour / gradient preset'],
-    ['image="url"', 'Background image URL (adds cover mode)'],
-    ['overlay="light|dark|darker|gradient|gradient-reverse"', 'Image overlay style'],
-    ['align="center|left"', 'Content alignment (default: center)'],
-    ['fullwidth="true"', 'Break out of the page container to span full viewport width'],
-    ['class="..."', 'Extra CSS classes'],
-    ['id="..."', 'Element id'],
-  ].forEach(([attr, desc]) => {
-    const tr = document.createElement('tr');
-    const tdCode = document.createElement('td');
-    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
-    tdCode.appendChild(makeCode(attr));
-    const tdDesc = document.createElement('td');
-    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
-    tdDesc.textContent = desc;
-    tr.appendChild(tdCode);
-    tr.appendChild(tdDesc);
-    heroAttrTable.appendChild(tr);
-  });
-  section3c.appendChild(heroAttrTable);
-
-  section3c.appendChild(makeSnippet(
-    'Basic hero',
-    '[hero title="Welcome" tagline="Build something great"][/hero]',
-    null
-  ));
-
-  section3c.appendChild(makeSnippet(
-    'Gradient with body content',
-    '[hero title="Get Started" tagline="Everything you need." size="lg" variant="gradient-blue" align="center"]\nSome introductory **Markdown** content here.\n[/hero]',
-    null
-  ));
-
-  section3c.appendChild(makeSnippet(
-    'Background image with overlay',
-    '[hero title="Our Story" image="/media/hero.jpg" overlay="dark" size="full"][/hero]',
-    'Combine image + overlay for text legibility over photos.'
-  ));
-
-  wrap.appendChild(section3c);
-
-  // --- Section 3b: Interactive Components ---
-  const section3b = document.createElement('div');
-  section3b.appendChild(makeH3('Interactive Components'));
-  section3b.appendChild(makeNote('Tabs, accordion, carousel, and countdown — no plugin required.'));
-
-  section3b.appendChild(makeSnippet(
-    'Tabs',
-    '[tabs]\n[tab title="First"]Content **A**[/tab]\n[tab title="Second"]Content **B**[/tab]\n[/tabs]',
-    'Add style="pills" for pill-style navigation.'
-  ));
-
-  section3b.appendChild(makeSnippet(
-    'Accordion',
-    '[accordion]\n[item title="Question 1"]Answer here.[/item]\n[item title="Question 2"]Answer here.[/item]\n[/accordion]',
-    'Add multiple="true" to allow several panels open at once.'
-  ));
-
-  section3b.appendChild(makeSnippet(
-    'Carousel',
-    '[carousel autoplay="true" interval="5000"]\n[slide title="Slide 1"]Description[/slide]\n[slide image="/media/photo.jpg" title="Slide 2"]Caption[/slide]\n[/carousel]',
-    'Omit autoplay for a manual carousel. loop="false" disables wrapping.'
-  ));
-
-  section3b.appendChild(makeSnippet(
-    'Countdown (to date)',
-    '[countdown to="2026-12-31" format="DD:HH:mm:ss" /]',
-    null
-  ));
-
-  section3b.appendChild(makeSnippet(
-    'Countdown (duration)',
-    '[countdown duration="300" format="mm:ss" /]',
-    'duration is in seconds. format options: mm:ss · HH:mm:ss · DD:HH:mm:ss'
-  ));
-
-  wrap.appendChild(section3b);
-
-  // --- Section 4: Embedding a Form ---
-  const section4 = document.createElement('div');
-  section4.appendChild(makeH3('Embedding a Form'));
-
-  const formPre = document.createElement('pre');
-  formPre.style.cssText = codeStyle + 'display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;';
-  formPre.textContent = '<div data-form="contact"></div>';
-  section4.appendChild(formPre);
-  section4.appendChild(makeNote('Replace "contact" with the form slug. Forms are managed under Forms in the sidebar.'));
-
-  wrap.appendChild(section4);
-
-  // --- Section 5: Effects shortcodes ---
-  const section5 = document.createElement('div');
-  section5.appendChild(makeH3('Effects'));
-  section5.appendChild(makeNote('Shortcodes for scroll-triggered animations, counters, typewriter text, and more. Requires the Domma Effects plugin.'));
-
-  const effectsRows = [
-    ['[reveal animation="fade"]...[/reveal]', 'Fade/slide/zoom on scroll'],
-    ['[breathe]...[/breathe]', 'Continuous gentle scale loop'],
-    ['[pulse]...[/pulse]', 'Repeating scale pulse'],
-    ['[shake]...[/shake]', 'One-shot shake'],
-    ['[scribe speed="50"]...[/scribe]', 'Typewriter — simple mode (text typed letter by letter)'],
-    ['[scribe loop="true"][render]Text[/render][wait]1500[/wait][undo /][/scribe]', 'Typewriter — script mode (sequenced render/wait/undo actions)'],
-    ['[scramble]...[/scramble]', 'Character-scramble reveal'],
-    ['[counter to="100" /]', 'Animated number counter (self-closing)'],
-    ['[ripple]...[/ripple]', 'Click-triggered ripple'],
-    ['[twinkle count="50"]...[/twinkle]', 'Particle/star overlay'],
-    ['[animate type="fade-in-up"]...[/animate]', 'CSS-only animation (no plugin needed)'],
-    ['[ambient type="aurora"]...[/ambient]', 'CSS-only animated background'],
-    ['[firework type="burst" colour="rainbow" /]', 'CSS firework (self-closing)'],
-    ['[fireworks]...[/fireworks]', 'Fireworks display container'],
-    ['[celebrate theme="auto" /]', 'Seasonal canvas celebration'],
-  ];
-
-  const effectsTable = document.createElement('table');
-  effectsTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
-  effectsRows.forEach(([syntax, desc]) => {
-    const tr = document.createElement('tr');
-    const tdCode = document.createElement('td');
-    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
-    tdCode.appendChild(makeCode(syntax));
-    const tdDesc = document.createElement('td');
-    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
-    tdDesc.textContent = desc;
-    tr.appendChild(tdCode);
-    tr.appendChild(tdDesc);
-    effectsTable.appendChild(tr);
-  });
-  section5.appendChild(effectsTable);
-
-  section5.appendChild(makeSnippet(
-    'Scribe script — looping multi-phrase typewriter',
-    '[scribe loop="true" loop-delay="2000" delete-speed="20"]\n[render]We build things that matter.[/render]\n[wait]1200[/wait]\n[undo all="true" /]\n[render]We design for humans.[/render]\n[wait]1200[/wait]\n[undo all="true" /]\n[/scribe]',
-    'Use [render]...[/render] to type text, [wait]Ms[/wait] to pause, and [undo /] to delete. loop="true" replays the sequence. Only [render], [wait], and [undo] shortcodes are parsed — plain text between actions is ignored.'
-  ));
-
-  section5.appendChild(makeNote('Enable the Domma Effects plugin to activate these shortcodes on your site.'));
-
-  wrap.appendChild(section5);
-
-  // --- Section 6: Tables shortcode ---
-  const section6t = document.createElement('div');
-  section6t.appendChild(makeH3('Tables'));
-  section6t.appendChild(makeNote('Wrap a standard Markdown (GFM) table with Domma CSS classes and responsive horizontal scrolling.'));
-
-  const tableAttrTable = document.createElement('table');
-  tableAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
-  [
-    ['striped="true"', 'Alternate row background (.table-striped)'],
-    ['bordered="true"', 'Borders on all cells (.table-bordered)'],
-    ['compact="true"', 'Reduced cell padding (.table-compact)'],
-    ['caption="..."', 'Caption text above the table'],
-    ['class="..."', 'Extra CSS classes appended to .table'],
-    ['id="..."', 'id attribute on the <table> element'],
-  ].forEach(([attr, desc]) => {
-    const tr = document.createElement('tr');
-    const tdCode = document.createElement('td');
-    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
-    tdCode.appendChild(makeCode(attr));
-    const tdDesc = document.createElement('td');
-    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
-    tdDesc.textContent = desc;
-    tr.appendChild(tdCode);
-    tr.appendChild(tdDesc);
-    tableAttrTable.appendChild(tr);
-  });
-  section6t.appendChild(tableAttrTable);
-
-  section6t.appendChild(makeSnippet(
-    'Striped + bordered table',
-    '[table striped="true" bordered="true" caption="Product Pricing"]\n| Product | Price |\n| ------- | ----: |\n| Widget  | $9.99 |\n| Gadget  | $14.99 |\n[/table]',
-    'The inner content must be a valid GFM Markdown table. The shortcode adds Domma CSS classes and wraps in a responsive scroll container.'
-  ));
-
-  wrap.appendChild(section6t);
-
-  // --- Section 7: Slideover shortcode ---
-  const section6 = document.createElement('div');
-  section6.appendChild(makeH3('Slideover'));
-  section6.appendChild(makeNote('A trigger button that opens a slide-in panel with Markdown content. No plugin required.'));
-
-  const soAttrTable = document.createElement('table');
-  soAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
-  [
-    ['title="..."', 'Panel header text'],
-    ['trigger="..."', 'Button label (default: "Open")'],
-    ['size="sm|md|lg"', 'Panel width (default: md)'],
-    ['position="right|left"', 'Slide direction (default: right)'],
-  ].forEach(([attr, desc]) => {
-    const tr = document.createElement('tr');
-    const tdCode = document.createElement('td');
-    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
-    tdCode.appendChild(makeCode(attr));
-    const tdDesc = document.createElement('td');
-    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
-    tdDesc.textContent = desc;
-    tr.appendChild(tdCode);
-    tr.appendChild(tdDesc);
-    soAttrTable.appendChild(tr);
-  });
-  section6.appendChild(soAttrTable);
-
-  section6.appendChild(makeSnippet(
-    'Example',
-    '[slideover title="More Info" trigger="Read more" size="md"]\n## Details\nMarkdown content here.\n[/slideover]',
-    'Nested [card] and [grid] shortcodes work inside the slideover body.'
-  ));
-
-  wrap.appendChild(section6);
-
-  // --- Section 7: DConfig ---
-  const section7 = document.createElement('div');
-  section7.appendChild(makeH3('DConfig — Declarative Behaviour'));
-  section7.appendChild(makeNote('Define click handlers and class toggles without writing JavaScript. Use the DConfig section above or embed inline with [dconfig]...[/dconfig] in the content body. Inline shortcodes win on selector conflict.'));
-
-  section7.appendChild(makeSnippet(
-    'Toggle a class on click',
-    '{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }',
-    'Selector keys use standard CSS selectors. "target" is optional — defaults to the element itself.'
-  ));
-
-  section7.appendChild(makeSnippet(
-    'Inline shortcode syntax',
-    '[dconfig]\n{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }\n[/dconfig]',
-    null
-  ));
-
-  wrap.appendChild(section7);
-
-  so.setContent(wrap);
-  so.open();
-}
-
-// Module-level state for unsaved-changes guard
-let _dirty = false;
-let _beforeUnload = null;
-let _guardRegistered = false;
-
-export const pageEditorView = {
-    templateUrl: '/admin/js/templates/page-editor.html',
-
-    async onMount($container) {
-        const hash = window.location.hash;
-        const editMatch = hash.match(/#\/pages\/edit(\/.*)/);  // .* allows home page path "/"
-        const urlPath = editMatch ? editMatch[1] : null;
-        const isEdit = !!urlPath;
-
-        const fetches = [api.layouts.get().catch(() => ({}))];
-        if (isEdit) fetches.push(api.pages.get(urlPath).catch(() => null));
-
-        const [layouts, page] = await Promise.all(fetches);
-
-        if (isEdit && !page) {
-            E.toast('Page not found.', { type: 'error' });
-            R.navigate('/pages');
-            return;
-        }
-
-        // Title
-        $container.find('#editor-title').text(isEdit ? 'Edit Page' : 'New Page');
-
-        // URL path field
-        if (isEdit) {
-            $container.find('#page-url-path').val(urlPath);
-        }
-
-        // Populate form fields
-        if (page) {
-            $container.find('#field-title').val(page.title || '');
-            $container.find('#field-description').val(page.description || '');
-            $container.find('#field-status').val(page.status || 'draft');
-            $container.find('#field-sort-order').val(page.sortOrder ?? 99);
-            $container.find('#field-show-in-nav').prop('checked', !!page.showInNav);
-            $container.find('#field-sidebar').prop('checked', !!page.sidebar);
-          $container.find('#field-category').val(page.category || '');
-          $container.find('#field-visibility').val(page.visibility || 'public');
-            $container.find('#field-seo-title').val(page.seo?.title || '');
-            $container.find('#field-seo-desc').val(page.seo?.description || '');
-          if (page.dconfig) {
-            $container.find('#field-dconfig').val(JSON.stringify(page.dconfig, null, 2));
-          }
-        }
-
-        // Layouts dropdown
-        const $layoutSelect = $container.find('#field-layout').empty();
-        Object.entries(layouts).forEach(([key, preset]) => {
-            const selected = (page?.layout || 'default') === key ? 'selected' : '';
-            $layoutSelect.append(`<option value="${key}" ${selected}>${preset.label || key}</option>`);
-        });
-
-      // Initialise meta tabs
-      E.tabs($container.find('#editor-meta-tabs').get(0));
-
-        // Markdown editor + live preview
-        const $editor = $container.find('#markdown-editor');
-        const $preview = $container.find('#markdown-preview');
-        if (page) $editor.val(page.content || '');
-
-      let _previewTimer = null;
-        const updatePreview = () => {
-          clearTimeout(_previewTimer);
-          _previewTimer = setTimeout(async () => {
-            try {
-              const {html} = await api.pages.preview($editor.val());
-              $preview.html(html);
-              Domma.icons.scan();
-            } catch {
-              if (window.marked) $preview.html(marked.parse($editor.val()));
-            }
-          }, 400);
-        };
-
-      // Create toolbar
-      const toolbar = createToolbar($editor, $container.find('#editor-toolbar'));
-
-      // Link callback: prompt for URL
-      toolbar.onLink((ta) => {
-        const url = prompt('Enter URL:');
-        if (url) wrapSelection(ta, '[', `](${url})`);
-      });
-
-      // Image callback: open media picker modal
-      toolbar.onImage(async (ta) => {
-        const files = await api.media.list().catch(() => []);
-        const images = files.filter(f => /\.(png|jpe?g|gif|webp|svg)$/i.test(f.name));
-
-        const grid = document.createElement('div');
-        grid.className = 'media-picker-grid';
-
-        if (images.length) {
-          images.forEach(img => {
-            const item = document.createElement('div');
-            item.className = 'media-picker-item';
-            item.dataset.url = img.url;
-
-            const image = document.createElement('img');
-            image.src = img.url;
-            image.alt = img.name;
-
-            const label = document.createElement('span');
-            label.textContent = img.name;
-
-            item.appendChild(image);
-            item.appendChild(label);
-            grid.appendChild(item);
-          });
-        } else {
-          const empty = document.createElement('p');
-          empty.className = 'text-muted p-3';
-          empty.textContent = 'No images uploaded yet.';
-          grid.appendChild(empty);
-        }
-
-        const modal = E.modal({title: 'Insert Image', size: 'lg'});
-        modal.element.appendChild(grid);
-
-        $(modal.element).on('click', '.media-picker-item', function () {
-          const url = $(this).data('url');
-          const alt = $(this).find('span').text();
-          insertAtCursor(ta, `![${alt}](${url})`);
-          modal.close();
-          $editor.get(0).dispatchEvent(new Event('input', {bubbles: true}));
-        });
-
-        modal.open();
-      });
-
-      // Help callback: open editor reference slideover
-      toolbar.onHelp(() => {
-        openEditorHelp();
-      });
-
-      // View mode switching
-      $container.find('.editor-view-btn').on('click', function () {
-        const mode = $(this).data('mode');
-        $container.find('.editor-view-btn').removeClass('active');
-        $(this).addClass('active');
-        $container.find('#editor-body')
-          .removeClass('editor-mode-split editor-mode-write editor-mode-preview')
-          .addClass(`editor-mode-${mode}`);
-      });
-
-      // Fullscreen toggle
-      $container.find('#fullscreen-btn').on('click', function () {
-        $container.find('.editor-card').toggleClass('editor-fullscreen');
-      });
-
-      // Dirty tracking + unsaved-changes guard
-      _dirty = false;
-      if (_beforeUnload) window.removeEventListener('beforeunload', _beforeUnload);
-      _beforeUnload = (e) => {
-        if (_dirty) e.preventDefault();
-      };
-      window.addEventListener('beforeunload', _beforeUnload);
-
-      // SPA navigation guard — registered once at module level
-      if (!_guardRegistered) {
-        _guardRegistered = true;
-        R.use((to, from, next) => {
-          const onEditor = window.location.hash.startsWith('#/pages/edit') ||
-            window.location.hash === '#/pages/new';
-          if (!_dirty || !onEditor) return next();
-          E.confirm('You have unsaved changes. Leave this page?').then(ok => {
-            if (ok) {
-              _dirty = false;
-              next();
-            }
-          });
-        });
-      }
-
-      $editor.on('input', () => {
-        _dirty = true;
-        updatePreview();
-      });
-        updatePreview();
-
-        // Save
-        $container.find('#save-btn').on('click', async () => {
-            const enteredPath = $container.find('#page-url-path').val().trim();
-            if (!enteredPath) { E.toast('URL path is required.', { type: 'warning' }); return; }
-
-          // Validate DConfig JSON before save attempt
-          const dconfigRaw = $container.find('#field-dconfig').val().trim();
-          let dconfig = null;
-          if (dconfigRaw) {
-            try {
-              dconfig = JSON.parse(dconfigRaw);
-            } catch {
-              E.toast('DConfig JSON is invalid. Please check the format before saving.', {type: 'warning'});
-              return;
-            }
-          }
-
-            const frontmatter = {
-                title: $container.find('#field-title').val().trim() || 'Untitled',
-                description: $container.find('#field-description').val().trim(),
-                layout: $container.find('#field-layout').val(),
-                status: $container.find('#field-status').val(),
-                sortOrder: parseInt($container.find('#field-sort-order').val(), 10) || 99,
-                showInNav: $container.find('#field-show-in-nav').is(':checked'),
-                sidebar: $container.find('#field-sidebar').is(':checked'),
-              category: $container.find('#field-category').val().trim() || null,
-              visibility: $container.find('#field-visibility').val() || 'public',
-                seo: {
-                    title: $container.find('#field-seo-title').val().trim(),
-                    description: $container.find('#field-seo-desc').val().trim()
-                },
-              dconfig
-            };
-
-            try {
-                $container.find('#save-btn').prop('disabled', true).text('Saving…');
-                if (isEdit) {
-                    const payload = { frontmatter, body: $editor.val() };
-                    if (enteredPath !== urlPath) payload.newUrlPath = enteredPath;
-                    await api.pages.update(urlPath, payload);
-                    E.toast('Page saved successfully.', { type: 'success' });
-                  _dirty = false;
-                    if (enteredPath !== urlPath) R.navigate(`/pages/edit${enteredPath}`);
-                } else {
-                    await api.pages.create({ urlPath: enteredPath, frontmatter, body: $editor.val() });
-                    E.toast('Page saved successfully.', { type: 'success' });
-                  _dirty = false;
-                    R.navigate('/pages');
-                }
-            } catch (err) {
-                E.toast(`Save failed: ${err.message || 'Unknown error'}`, { type: 'error' });
-            } finally {
-                $container.find('#save-btn').prop('disabled', false).text('Save');
-            }
-        });
-
-        // Cancel
-        $container.find('#cancel-btn').on('click', () => R.navigate('/pages'));
-
-        Domma.icons.scan();
-    }
-};
+import{api as U}from"../api.js";import{createToolbar as ye,insertAtCursor as he}from"../lib/markdown-toolbar.js";function xe(){const o=E.slideover({title:"Editor Reference",size:"md",position:"right"}),be="background:var(--dm-surface-subtle,#1a1a2e);padding:.2rem .4rem;border-radius:3px;font-size:.85em;font-family:monospace;",ge="margin:1rem 0 .5rem;font-size:1rem;";function T(i){const d=document.createElement("code");return d.style.cssText=be,d.textContent=i,d}function C(i){const d=document.createElement("h3");return d.style.cssText=ge,d.textContent=i,d}const se=document.createElement("div");se.style.cssText="padding:1rem;";const Z=document.createElement("div");Z.className="tabs";const ce=document.createElement("div");ce.className="tab-list",["Basics","Layout","Components","Data","Advanced"].forEach((i,d)=>{const t=document.createElement("button");t.className="tab-item"+(d===0?" active":""),t.textContent=i,ce.appendChild(t)});const J=document.createElement("div");J.className="tab-content";const v="display:flex;flex-direction:column;gap:1rem;",ne=document.createElement("div");ne.className="tab-panel active",ne.style.cssText=v;const Q=document.createElement("div");Q.className="tab-panel",Q.style.cssText=v;const O=document.createElement("div");O.className="tab-panel",O.style.cssText=v;const G=document.createElement("div");G.className="tab-panel",G.style.cssText=v;const ae=document.createElement("div");ae.className="tab-panel",ae.style.cssText=v,J.appendChild(ne),J.appendChild(Q),J.appendChild(O),J.appendChild(G),J.appendChild(ae),Z.appendChild(ce),Z.appendChild(J),se.appendChild(Z);const q=document.createElement("div");q.appendChild(C("Markdown Basics"));const ee=document.createElement("table");ee.style.cssText="width:100%;border-collapse:collapse;font-size:.9em;";const j=document.createElement("thead"),te=document.createElement("tr");["Syntax","Result"].forEach(i=>{const d=document.createElement("th");d.style.cssText="text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--dm-border,#333);",d.textContent=i,te.appendChild(d)}),j.appendChild(te),ee.appendChild(j);const pe=document.createElement("tbody");[["**bold**","bold (rendered bold)"],["_italic_","italic (rendered italic)"],["## Heading","Heading (h2)"],["[text](url)","Link"],["![alt](url)","Image"],["- item","Bullet list"],["`code`","Inline code"],["---","Divider"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.35rem .5rem;vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.35rem .5rem;vertical-align:top;color:var(--dm-text-muted,#aaa);font-size:.85em;",a.textContent=d,t.appendChild(n),t.appendChild(a),pe.appendChild(t)}),ee.appendChild(pe),q.appendChild(ee),ne.appendChild(q);const _=document.createElement("div");_.appendChild(C("Grid & Columns"));function k(i){const d=document.createElement("p");return d.style.cssText="margin:.3rem 0 .6rem;font-size:.82em;color:var(--dm-text-muted,#aaa);",d.textContent=i,d}function e(i,d,t){const n=document.createElement("p");n.style.cssText="margin:.75rem 0 .25rem;font-size:.85em;font-weight:600;",n.textContent=i;const a=document.createElement("pre");a.style.cssText=be+"display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;margin:0;",a.textContent=d;const re=document.createDocumentFragment();return re.appendChild(n),re.appendChild(a),t&&re.appendChild(k(t)),re}const f=document.createElement("table");f.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['cols="N"',"[grid] only","Number of columns (1\u201312)"],['gap="N"',"[grid], [row]","Gap between columns/rows (1\u20136)"],['span="N"',"[col] only","How many columns this cell spans"],['fullwidth="true"',"[grid] only","Break out of page container to span full viewport"],['class="x"',"all","Add extra CSS classes"]].forEach(([i,d,t])=>{const n=document.createElement("tr");[i,d,t].forEach((a,re)=>{const ue=document.createElement("td");ue.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",re===0?ue.appendChild(T(i)):(ue.style.color="var(--dm-text-muted,#aaa)",ue.textContent=a),n.appendChild(ue)}),f.appendChild(n)}),_.appendChild(f),_.appendChild(e("Equal columns",`[grid cols="3" gap="4"]
+[col]One[/col]
+[col]Two[/col]
+[col]Three[/col]
+[/grid]`,"cols sets the track count; each [col] fills one track.")),_.appendChild(e("Column spanning (12-col base)",`[grid cols="12" gap="3"]
+[col span="8"]Main content[/col]
+[col span="4"]Sidebar[/col]
+[/grid]`,"span values must add up to cols. Common splits: 8/4, 6/6, 9/3.")),_.appendChild(e("Row (flexbox, equal-width)",`[row gap="4"]
+[col]Left[/col]
+[col]Right[/col]
+[/row]`,"Use [row] when you want equal-width columns without specifying a count.")),_.appendChild(e("Card in a grid",`[grid cols="3" gap="4"]
+[col]
+[card title="One"]Content[/card]
+[/col]
+[col]
+[card title="Two"]Content[/card]
+[/col]
+[col]
+[card title="Three"]Content[/card]
+[/col]
+[/grid]`,null)),Q.appendChild(_);const l=document.createElement("div");l.appendChild(C("Cards")),l.appendChild(e("Basic card",`[card title="Optional Title"]
+Markdown **works** here.
+[/card]`,"Omit title for a card with no header.")),l.appendChild(e("Icon \u2014 inline (default)",`[card title="Feature" icon="star"]
+Icon sits left of the title in a flex row.
+[/card]`,"icon accepts any Domma icon name. Default layout when icon is set.")),l.appendChild(e("Icon \u2014 stacked (centred)",`[card title="Feature" icon="star" icon-layout="stacked" hover]
+Icon is centred above the title. Great for feature tiles.
+[/card]`,'icon-layout="stacked" centres the icon above the title. Combine with hover for a lift effect.')),l.appendChild(e("Icon with subtitle",`[card title="Feature" subtitle="Tagline here" icon="star" icon-layout="stacked"]
+Body content.
+[/card]`,"subtitle adds a secondary line beneath the title in both layouts.")),l.appendChild(e("Collapsible card",`[card title="Click to expand" collapsible="true"]
+Hidden by default.
+[/card]`,null)),l.appendChild(e("Full attribute reference",`[card title="Title" subtitle="Sub" icon="star" icon-layout="stacked"
+  variant="primary" hover footer="Footer text"
+  collapsible="true" class="extra" id="my-card"]
+Body content.
+[/card]`,'All attributes are optional. variant accepts "primary". icon-layout accepts "inline" (default) or "stacked".')),O.appendChild(l);const c=document.createElement("div");c.appendChild(C("Badge")),c.appendChild(k("Inline badge/label elements. Self-closing renders an empty coloured dot."));const h=document.createElement("table");h.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['variant="..."',"primary (default), secondary, success, danger, warning, info, light, dark"],["pill","Flag: rounded pill shape (.badge-pill)"],["outline","Flag: outlined style (.badge-outline)"],['size="small|large"',"Reduced or enlarged badge"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),h.appendChild(t)}),c.appendChild(h),c.appendChild(e("Basic badge",'[badge variant="success"]New[/badge]',null)),c.appendChild(e("Pill outline badge",'[badge variant="danger" outline pill]Deprecated[/badge]',null)),O.appendChild(c);const r=document.createElement("div");r.appendChild(C("Spacer")),r.appendChild(k("Self-closing shortcode that inserts a fixed-height blank gap."));const b=document.createElement("table");b.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['size="N"',"Height in px (default: 8)"],['class="..."',"Extra CSS class on the spacer div"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),b.appendChild(t)}),r.appendChild(b),r.appendChild(e("32px gap",'[spacer size="32" /]',null)),Q.appendChild(r);const p=document.createElement("div");p.appendChild(C("Icon")),p.appendChild(k("Self-closing shortcode that renders any Domma icon inline."));const m=document.createElement("table");m.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['name="..."',"Domma icon name (required). Also accepted as src=."],['size="N"',"Width and height in px"],['color="..."',"CSS colour applied via style"],['class="..."',"Extra CSS classes"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),m.appendChild(t)}),p.appendChild(m),p.appendChild(e("Coloured icon",'[icon name="star" size="24" color="#f5a623" /]',null)),O.appendChild(p);const y=document.createElement("div");y.appendChild(C("Center")),y.appendChild(k("Wraps content in a centred div. Works with any content including cards, grids, and text.")),y.appendChild(e("Example","[center]Centred content here[/center]",'Accepts an optional class="..." attribute for extra styling.')),Q.appendChild(y);const s=document.createElement("div");s.appendChild(C("Hero")),s.appendChild(k("Full-width hero sections \u2014 no plugin required. Uses Domma's built-in Hero CSS component."));const g=document.createElement("table");g.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['title="..."',"Heading text"],['tagline="..."',"Subtitle text"],['size="sm|lg|full"',"Height variant (default: normal)"],['variant="dark|primary|gradient-blue|gradient-purple|gradient-sunset|gradient-ocean"',"Colour / gradient preset"],['image="url"',"Background image URL (adds cover mode)"],['overlay="light|dark|darker|gradient|gradient-reverse"',"Image overlay style"],['align="center|left"',"Content alignment (default: center)"],['fullwidth="true"',"Break out of the page container to span full viewport width"],['bg="..."',"Background colour CSS value"],["twinkle","Flag: adds particle overlay (requires Effects plugin)"],['twinkle-count="N"',"Number of particles"],['twinkle-colour="..."',"Particle colour CSS value"],["blobs","Flag: adds ambient blob background"],['blobs-type="..."',"Blob animation type (default: float-blobs)"],['class="..."',"Extra CSS classes"],['id="..."',"Element id"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),g.appendChild(t)}),s.appendChild(g),s.appendChild(e("Basic hero",'[hero title="Welcome" tagline="Build something great"][/hero]',null)),s.appendChild(e("Gradient with body content",`[hero title="Get Started" tagline="Everything you need." size="lg" variant="gradient-blue" align="center"]
+Some introductory **Markdown** content here.
+[/hero]`,null)),s.appendChild(e("Background image with overlay",'[hero title="Our Story" image="/media/hero.jpg" overlay="dark" size="full"][/hero]',"Combine image + overlay for text legibility over photos.")),Q.appendChild(s);const S=document.createElement("div");S.appendChild(C("Interactive Components")),S.appendChild(k("Tabs, accordion, carousel, and countdown \u2014 no plugin required.")),S.appendChild(e("Tabs",`[tabs]
+[tab title="First"]Content **A**[/tab]
+[tab title="Second"]Content **B**[/tab]
+[/tabs]`,'Add style="pills" for pill-style navigation.')),S.appendChild(e("Accordion",`[accordion]
+[item title="Question 1"]Answer here.[/item]
+[item title="Question 2"]Answer here.[/item]
+[/accordion]`,'Add multiple="true" to allow several panels open at once.')),S.appendChild(e("Carousel",`[carousel autoplay="true" interval="5000"]
+[slide title="Slide 1"]Description[/slide]
+[slide image="/media/photo.jpg" title="Slide 2"]Caption[/slide]
+[/carousel]`,'Omit autoplay for a manual carousel. loop="false" disables wrapping.')),S.appendChild(e("Countdown (to date)",'[countdown to="2026-12-31" format="DD:HH:mm:ss" /]',null)),S.appendChild(e("Countdown (duration)",'[countdown duration="300" format="mm:ss" /]',"duration is in seconds. format options: mm:ss \xB7 HH:mm:ss \xB7 DD:HH:mm:ss")),O.appendChild(S);const u=document.createElement("div");u.appendChild(C("Timeline")),u.appendChild(k("Renders a Domma Progression component with event items."));const w=document.createElement("table");w.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['layout="vertical|centred|horizontal"',"[timeline] \u2014 layout orientation (default: vertical)"],['theme="minimal|corporate|modern"',"[timeline] \u2014 visual theme (default: minimal)"],['mode="timeline|roadmap"',"[timeline] \u2014 display mode (default: timeline)"],['class="..."',"[timeline] \u2014 extra CSS classes"],['id="..."',"[timeline] \u2014 element id"],['title="..."',"[event] \u2014 event heading"],['date="..."',"[event] \u2014 display date string"],['status="planned|in-progress|completed|blocked"',"[event] \u2014 progress status"],['icon="..."',"[event] \u2014 Domma icon name"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),w.appendChild(t)}),u.appendChild(w),u.appendChild(e("Vertical timeline",`[timeline layout="vertical" theme="modern"]
+[event title="Kickoff" date="Jan 2025" status="completed" icon="flag"]
+Project launched.
+[/event]
+[event title="Beta" date="Jun 2025" status="in-progress" icon="rocket"]
+In active development.
+[/event]
+[/timeline]`,null)),O.appendChild(u);const B=document.createElement("div");B.appendChild(C("Embedding a Form"));const x=document.createElement("table");x.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['name="..."',"Form slug (required). Also accepted as slug=."],['class="..."',"Extra CSS classes on the wrapper div"],['id="..."',"id attribute on the wrapper div"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),x.appendChild(t)}),B.appendChild(x),B.appendChild(e("Basic",'[form name="contact" /]',"Forms are managed under Forms in the sidebar.")),B.appendChild(e("With wrapper styling",'[form name="newsletter" class="mt-4" id="newsletter-form" /]',null)),G.appendChild(B);const z=document.createElement("div");z.appendChild(C("Displaying a Collection"));const L=document.createElement("pre");L.style.cssText=be+"display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;",L.textContent='[collection slug="enquiries" display="table" /]',z.appendChild(L);const A=[["slug","Required. The collection slug."],["display","table (default), cards, or list."],["fields","Comma-separated field keys to show. Defaults to all."],["limit","Maximum number of entries to display."],["sort","Field key to sort by."],["order","asc or desc (default asc)."],["title-field","Field used as the card/list title (cards + list)."],["columns","Grid columns for cards display (2\u20134, default 3)."],["search","true/false \u2014 enable search in table mode (default true)."],["sortable","true/false \u2014 enable column sorting in table mode (default true)."],["exportable","true/false \u2014 show CSV export button in table mode (default false)."],["page-size","Rows per page in table mode (default 25)."],["empty","Text shown when there are no entries."],["cta","Action slug: enables per-entry CTA buttons."],["cta-label",'CTA button label (default: "Run").'],["cta-icon","CTA button icon name."],["cta-style","CTA button variant (default: primary)."],["cta-confirm","CTA confirmation prompt text."]],H=document.createElement("table");H.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",A.forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;width:35%;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),H.appendChild(t)}),z.appendChild(H),z.appendChild(k("Table display uses Domma Table \u2014 search, sort, pagination, column selector, and CSV export are all built in. Cards and lists are static.")),G.appendChild(z);const M=document.createElement("div");M.appendChild(C("View \u2014 Pro")),M.appendChild(k("Renders a Collection with full filtering, pagination, and display options. Requires a Pro MongoDB collection."));const V=document.createElement("table");V.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[["slug","Required. The collection slug."],["display","table (default), cards, or list."],["limit","Maximum number of entries to display."],["fields","Comma-separated field keys to show."],["title-field","Field used as the card/list title."],["columns","Grid columns for cards display (2\u20134, default 3)."],["empty","Text shown when there are no entries."]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;width:35%;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),V.appendChild(t)}),M.appendChild(V),M.appendChild(e("Table display",'[view slug="products" display="table" limit="50" /]',null)),M.appendChild(e("Cards display",'[view slug="team" display="cards" columns="3" title-field="name" /]',null)),G.appendChild(M);const P=document.createElement("div");P.appendChild(C("CTA \u2014 Pro")),P.appendChild(k("Renders an action button that triggers a Pro Action against an entry. Requires the Pro Actions feature."));const K=document.createElement("table");K.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[["action","Required. The action slug."],["entry","Required. The entry id to act on."],["style","Button variant (default: primary)."],["icon","Domma icon name for the button."],["size","Button size (sm, lg)."],["confirm","Confirmation prompt text before running."],["label","Self-closing only: button label text."]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;width:35%;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),K.appendChild(t)}),P.appendChild(K),P.appendChild(e("Wrapping form",'[cta action="approve" entry="abc123" style="success" confirm="Approve this entry?"]Approve[/cta]',null)),P.appendChild(e("Self-closing",'[cta action="archive" entry="abc123" icon="archive" label="Archive" /]',null)),G.appendChild(P);const F=document.createElement("div");F.appendChild(C("Effects")),F.appendChild(k("Shortcodes for scroll-triggered animations, counters, typewriter text, and more. Requires the Domma Effects plugin."));const me=[['[reveal animation="fade"]...[/reveal]',"Fade/slide/zoom on scroll"],["[breathe]...[/breathe]","Continuous gentle scale loop"],["[pulse]...[/pulse]","Repeating scale pulse"],["[shake]...[/shake]","One-shot shake"],['[scribe speed="50"]...[/scribe]',"Typewriter \u2014 simple mode (text typed letter by letter)"],['[scribe loop="true"][render]Text[/render][wait]1500[/wait][undo /][/scribe]',"Typewriter \u2014 script mode (sequenced render/wait/undo actions)"],["[scramble]...[/scramble]","Character-scramble reveal"],['[counter to="100" /]',"Animated number counter (self-closing)"],["[ripple]...[/ripple]","Click-triggered ripple"],['[twinkle count="50"]...[/twinkle]',"Particle/star overlay"],['[animate type="fade-in-up"]...[/animate]',"CSS-only animation (no plugin needed)"],['[ambient type="aurora"]...[/ambient]',"CSS-only animated background"],['[firework type="burst" colour="rainbow" /]',"CSS firework (self-closing)"],["[fireworks]...[/fireworks]","Fireworks display container"],['[celebrate theme="auto" /]',"Seasonal canvas celebration"]],le=document.createElement("table");le.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",me.forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),le.appendChild(t)}),F.appendChild(le),F.appendChild(e("Scribe script \u2014 looping multi-phrase typewriter",`[scribe loop="true" loop-delay="2000" delete-speed="20"]
+[render]We build things that matter.[/render]
+[wait]1200[/wait]
+[undo all="true" /]
+[render]We design for humans.[/render]
+[wait]1200[/wait]
+[undo all="true" /]
+[/scribe]`,'Use [render]...[/render] to type text, [wait]Ms[/wait] to pause, and [undo /] to delete. loop="true" replays the sequence. Only [render], [wait], and [undo] shortcodes are parsed \u2014 plain text between actions is ignored.')),F.appendChild(k("Enable the Domma Effects plugin to activate these shortcodes on your site.")),ae.appendChild(F);const W=document.createElement("div");W.appendChild(C("Tables")),W.appendChild(k("Wrap a standard Markdown (GFM) table with Domma CSS classes and responsive horizontal scrolling."));const Y=document.createElement("table");Y.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['striped="true"',"Alternate row background (.table-striped)"],['bordered="true"',"Borders on all cells (.table-bordered)"],['compact="true"',"Reduced cell padding (.table-compact)"],['caption="..."',"Caption text above the table"],['class="..."',"Extra CSS classes appended to .table"],['id="..."',"id attribute on the <table> element"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),Y.appendChild(t)}),W.appendChild(Y),W.appendChild(e("Striped + bordered table",`[table striped="true" bordered="true" caption="Product Pricing"]
+| Product | Price |
+| ------- | ----: |
+| Widget  | $9.99 |
+| Gadget  | $14.99 |
+[/table]`,"The inner content must be a valid GFM Markdown table. The shortcode adds Domma CSS classes and wraps in a responsive scroll container.")),O.appendChild(W);const oe=document.createElement("div");oe.appendChild(C("Slideover")),oe.appendChild(k("A trigger button that opens a slide-in panel with Markdown content. No plugin required."));const ie=document.createElement("table");ie.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['title="..."',"Panel header text"],['trigger="..."','Button label (default: "Open")'],['size="sm|md|lg"',"Panel width (default: md)"],['position="right|left"',"Slide direction (default: right)"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),ie.appendChild(t)}),oe.appendChild(ie),oe.appendChild(e("Example",`[slideover title="More Info" trigger="Read more" size="md"]
+## Details
+Markdown content here.
+[/slideover]`,"Nested [card] and [grid] shortcodes work inside the slideover body.")),O.appendChild(oe);const X=document.createElement("div");X.appendChild(C("DConfig \u2014 Declarative Behaviour")),X.appendChild(k("Define click handlers and class toggles without writing JavaScript. Use the DConfig section above or embed inline with [dconfig]...[/dconfig] in the content body. Inline shortcodes win on selector conflict.")),X.appendChild(e("Toggle a class on click",'{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }','Selector keys use standard CSS selectors. "target" is optional \u2014 defaults to the element itself.')),X.appendChild(e("Inline shortcode syntax",`[dconfig]
+{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }
+[/dconfig]`,null)),ae.appendChild(X);const D=document.createElement("div");D.appendChild(C("Tips"));const N=document.createElement("table");N.style.cssText="width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;",[['class="text-center"',"Centre text and inline elements on any shortcode"],['class="mx-auto"',"Centre a block element horizontally"],["[center]...[/center]","Shorthand wrapper for centred content"]].forEach(([i,d])=>{const t=document.createElement("tr"),n=document.createElement("td");n.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;",n.appendChild(T(i));const a=document.createElement("td");a.style.cssText="padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);",a.textContent=d,t.appendChild(n),t.appendChild(a),N.appendChild(t)}),D.appendChild(N),D.appendChild(k("Most shortcodes accept a class attribute for custom styling.")),ne.appendChild(D),o.setContent(se),o.open(),E.tabs(Z)}let de=!1,fe=null,ve=!1;export const pageEditorView={templateUrl:"/admin/js/templates/page-editor.html",async onMount(o){const ge=window.location.hash.match(/#\/pages\/edit(\/.*)/),T=ge?ge[1]:null,C=!!T,se=E.loader(o.get(0),{type:"dots"}),Z=[U.layouts.get().catch(()=>({})),U.settings.get().catch(()=>({}))];C&&Z.push(U.pages.get(T).catch(()=>null));const[ce,J,v]=await Promise.all(Z);se.destroy();const ne=J?.layoutOptions?.spacerSize??40;if(C&&!v){E.toast("Page not found.",{type:"error"}),R.navigate("/pages");return}o.find("#editor-title").text(C?`Edit Page \u2014 ${v.title||T}`:"New Page"),C&&o.find("#page-url-path").val(T),v&&(o.find("#field-title").val(v.title||""),o.find("#field-description").val(v.description||""),o.find("#field-status").val(v.status||"draft"),o.find("#field-sort-order").val(v.sortOrder??99),o.find("#field-show-in-nav").prop("checked",!!v.showInNav),o.find("#field-sidebar").prop("checked",!!v.sidebar),o.find("#field-show-breadcrumbs").prop("checked",v.breadcrumbs!==!1),o.find("#field-category").val(v.category||""),o.find("#field-visibility").val(v.visibility||"public"),o.find("#field-theme").val(v.theme||""),o.find("#field-seo-title").val(v.seo?.title||""),o.find("#field-seo-desc").val(v.seo?.description||""),v.dconfig&&o.find("#field-dconfig").val(JSON.stringify(v.dconfig,null,2)));const Q=await U.pages.tags().catch(()=>[]),O=o.find("#field-tags").get(0),G=O?E.pillbox(O,{data:Q,value:v?.tags||[],creatable:!0,searchable:!0,placeholder:"Add tag\u2026"}):null,ae=o.find("#field-layout").empty();if(Object.entries(ce).forEach(([e,f])=>{const l=(v?.layout||"default")===e?"selected":"";ae.append(`<option value="${e}" ${l}>${f.label||e}</option>`)}),C){const e=o.find("#view-page-btn").get(0);e.href=T,e.style.display="";const f=o.find("#live-preview-tab").get(0);f.style.display=""}if(E.tabs(o.find("#editor-meta-tabs").get(0)),C){const e=o.find("#live-preview-tab").get(0),f=o.find("#live-preview-frame").get(0);let l=!1;e.addEventListener("click",function(){l||(f.src=T,l=!0)})}const q=o.find("#markdown-editor"),ee=o.find("#markdown-preview");v&&q.val(v.content||"");const j=q.get(0),te=document.createElement("div");te.className="editor-line-numbers",j.parentElement.insertBefore(te,j);const pe=()=>{const e=j.value.split(`
+`).length;te.textContent=Array.from({length:e},(f,l)=>l+1).join(`
+`),te.scrollTop=j.scrollTop};pe(),j.addEventListener("input",pe),j.addEventListener("scroll",()=>{te.scrollTop=j.scrollTop});let Ce=null;const _=()=>{clearTimeout(Ce),Ce=setTimeout(async()=>{try{const{html:e}=await U.pages.preview(q.val());ee.html(e,{safe:!1}),I.scan(ee.get(0))}catch{window.marked&&ee.html(marked.parse(q.val()))}},400)},k=ye(q,o.find("#editor-toolbar"),{spacerDefault:ne});k.onLink(async e=>{const l=(await U.pages.list().catch(()=>[])).map(g=>({label:g.title||g.urlPath,value:g.urlPath})),c=document.createElement("div");c.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const h=document.createElement("label");h.className="form-label",h.textContent="URL";const r=document.createElement("input");r.type="text",r.className="form-input",r.placeholder="/about or https://example.com";const b=e.value.substring(e.selectionStart,e.selectionEnd);b&&b.startsWith("/")&&(r.value=b),c.appendChild(h),c.appendChild(r);const p=document.createElement("label");p.className="form-label",p.textContent="Link text";const m=document.createElement("input");m.type="text",m.className="form-input",m.placeholder="Display text",b&&!b.startsWith("/")&&(m.value=b),c.appendChild(p),c.appendChild(m);const y=document.createElement("button");y.type="button",y.className="btn btn-primary",y.textContent="Insert Link",c.appendChild(y);const s=E.modal({title:"Insert Link",size:"sm"});s.element.appendChild(c),s.open(),requestAnimationFrame(()=>{E.autocomplete(r,{data:l,minChars:1,onSelect:g=>{r.value=g.value,m.value||(m.value=g.label)}}),r.focus()}),y.addEventListener("click",()=>{const g=r.value.trim(),S=m.value.trim();if(!g)return;s.close();const u=`[${S||g}](${g})`,w=e.selectionStart,B=e.selectionEnd;e.value=e.value.substring(0,w)+u+e.value.substring(B),e.selectionStart=e.selectionEnd=w+u.length,e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),k.onImage(async e=>{const l=(await U.media.list().catch(()=>[])).filter(r=>/\.(png|jpe?g|gif|webp|svg)$/i.test(r.name)),c=document.createElement("div");if(c.className="media-picker-grid",l.length)l.forEach(r=>{const b=document.createElement("div");b.className="media-picker-item",b.dataset.url=r.url;const p=document.createElement("img");p.src=r.url,p.alt=r.name;const m=document.createElement("span");m.textContent=r.name,b.appendChild(p),b.appendChild(m),c.appendChild(b)});else{const r=document.createElement("p");r.className="text-muted p-3",r.textContent="No images uploaded yet.",c.appendChild(r)}const h=E.modal({title:"Insert Image",size:"lg"});h.element.appendChild(c),$(h.element).on("click",".media-picker-item",function(){const r=$(this).data("url"),b=$(this).find("span").text();he(e,`![${b}](${r})`),h.close(),q.get(0).dispatchEvent(new Event("input",{bubbles:!0}))}),h.open()}),k.onCollection(async e=>{const f=await U.collections.list().catch(()=>[]),l=document.createElement("div");l.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const c="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",h="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",r=document.createElement("div"),b=document.createElement("label");b.style.cssText=c,b.textContent="Collection";const p=document.createElement("select");if(p.style.cssText=h,f.length)f.forEach(D=>{const N=document.createElement("option");N.value=D.slug,N.textContent=D.title||D.slug,p.appendChild(N)});else{const D=document.createElement("option");D.value="",D.textContent="No collections found",p.appendChild(D)}r.appendChild(b),r.appendChild(p),l.appendChild(r);const m=document.createElement("div"),y=document.createElement("label");y.style.cssText=c,y.textContent="Display";const s=document.createElement("select");s.style.cssText=h,["table","cards","list"].forEach(D=>{const N=document.createElement("option");N.value=D,N.textContent=D.charAt(0).toUpperCase()+D.slice(1),s.appendChild(N)}),m.appendChild(y),m.appendChild(s),l.appendChild(m);const g=document.createElement("div");g.style.display="none";const S=document.createElement("label");S.style.cssText=c,S.textContent="Columns (2\u20134)";const u=document.createElement("input");u.type="number",u.min="2",u.max="4",u.value="3",u.style.cssText=h,g.appendChild(S),g.appendChild(u),l.appendChild(g);const w=document.createElement("div"),B=document.createElement("label");B.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const x=document.createElement("input");x.type="checkbox",x.checked=!0,B.appendChild(x),B.appendChild(document.createTextNode("Enable search")),w.appendChild(B),l.appendChild(w);const z=document.createElement("div"),L=document.createElement("label");L.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const A=document.createElement("input");A.type="checkbox",A.checked=!0,L.appendChild(A),L.appendChild(document.createTextNode("Sortable columns")),z.appendChild(L),l.appendChild(z);const H=document.createElement("div"),M=document.createElement("label");M.style.cssText="display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;";const V=document.createElement("input");V.type="checkbox",V.checked=!1,M.appendChild(V),M.appendChild(document.createTextNode("CSV export")),H.appendChild(M),l.appendChild(H);const P=document.createElement("div"),K=document.createElement("label");K.style.cssText=c,K.textContent="Rows per page";const F=document.createElement("input");F.type="number",F.min="5",F.max="100",F.value="25",F.style.cssText=h,P.appendChild(K),P.appendChild(F),l.appendChild(P);const me=document.createElement("div"),le=document.createElement("label");le.style.cssText=c,le.textContent="Limit (optional)";const W=document.createElement("input");W.type="number",W.placeholder="All",W.style.cssText=h,me.appendChild(le),me.appendChild(W),l.appendChild(me);const Y=document.createElement("button");Y.type="button",Y.className="btn btn-primary",Y.textContent="Insert",l.appendChild(Y);const oe=[w,z,H,P],ie=()=>{const D=s.value==="table";oe.forEach(N=>{N.style.display=D?"":"none"}),g.style.display=s.value==="cards"?"":"none"};s.addEventListener("change",ie),ie();const X=E.modal({title:"Insert Collection",size:"sm"});X.element.appendChild(l),X.open(),Y.addEventListener("click",()=>{const D=p.value;if(!D)return;const N=s.value;let i=`[collection slug="${D}" display="${N}"`;N==="cards"&&(i+=` columns="${u.value}"`),N==="table"&&!x.checked&&(i+=' search="false"'),N==="table"&&!A.checked&&(i+=' sortable="false"'),N==="table"&&V.checked&&(i+=' exportable="true"'),N==="table"&&F.value!=="25"&&(i+=` page-size="${F.value}"`);const d=W.value.trim();d&&(i+=` limit="${d}"`),i+=" /]",X.close(),he(e,i),e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),k.onForm(async e=>{const f=await U.forms.list().catch(()=>[]),l=document.createElement("div");l.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const c="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",h="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",r=document.createElement("div"),b=document.createElement("label");b.style.cssText=c,b.textContent="Form";const p=document.createElement("select");if(p.style.cssText=h,f.length)f.forEach(s=>{const g=document.createElement("option");g.value=s.slug,g.textContent=s.title||s.slug,p.appendChild(g)});else{const s=document.createElement("option");s.value="",s.textContent="No forms found",p.appendChild(s)}r.appendChild(b),r.appendChild(p),l.appendChild(r);const m=document.createElement("button");m.className="btn btn-primary btn-sm",m.style.cssText="align-self:flex-end;margin-top:.5rem;",m.textContent="Insert Form",l.appendChild(m);const y=E.modal({title:"Insert Form",size:"sm"});y.element.appendChild(l),y.open(),m.addEventListener("click",()=>{const s=p.value;s&&(he(e,`[form slug="${s}" /]`),y.close(),q.get(0).dispatchEvent(new Event("input",{bubbles:!0})))})}),k.onView(async e=>{const f=await U.views.list().catch(()=>[]),l=document.createElement("div");l.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const c="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",h="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;",r=document.createElement("div"),b=document.createElement("label");b.style.cssText=c,b.textContent="View";const p=document.createElement("select");if(p.style.cssText=h,f.length)f.forEach(u=>{const w=document.createElement("option");w.value=u.slug,w.textContent=u.title||u.slug,p.appendChild(w)});else{const u=document.createElement("option");u.value="",u.textContent="No Views configured yet \u2014 create one under Data \u2192 Views",p.appendChild(u)}r.appendChild(b),r.appendChild(p),l.appendChild(r);const m=document.createElement("div"),y=document.createElement("label");y.style.cssText=c,y.textContent="Display";const s=document.createElement("select");s.style.cssText=h,["table","cards","list"].forEach(u=>{const w=document.createElement("option");w.value=u,w.textContent=u.charAt(0).toUpperCase()+u.slice(1),s.appendChild(w)}),m.appendChild(y),m.appendChild(s),l.appendChild(m);const g=document.createElement("button");g.type="button",g.className="btn btn-primary",g.textContent="Insert",l.appendChild(g);const S=E.modal({title:"Insert View",size:"sm"});S.element.appendChild(l),S.open(),g.addEventListener("click",()=>{const u=p.value;if(!u)return;const w=`[view slug="${u}" display="${s.value}" /]`;S.close(),he(e,w),e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),k.onCta(async e=>{const f=await U.actions.list().catch(()=>[]),l=document.createElement("div");l.style.cssText="padding:1rem;display:flex;flex-direction:column;gap:.75rem;";const c="display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",h="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;";function r(x,z){const L=document.createElement("div"),A=document.createElement("label");return A.style.cssText=c,A.textContent=x,L.appendChild(A),L.appendChild(z),L}function b(x){const z=document.createElement("select");return z.style.cssText=h,x.forEach(([L,A])=>{const H=document.createElement("option");H.value=L,H.textContent=A,z.appendChild(H)}),z}function p(x,z,L){const A=document.createElement("input");return A.type=x,A.placeholder=z||"",A.value=L||"",A.style.cssText=h,A}const m=b(f.length?f.map(x=>[x.slug,x.title||x.slug]):[["","No Actions configured yet \u2014 create one under Data \u2192 Actions"]]);l.appendChild(r("Action",m));const y=p("text","Button label","Run");if(l.appendChild(r("Label",y)),m.addEventListener("change",()=>{const x=f.find(z=>z.slug===m.value);x?.trigger?.label&&(y.value=x.trigger.label)}),f.length){const x=f[0];x?.trigger?.label&&(y.value=x.trigger.label)}const s=p("text","Paste entry UUID\u2026","");l.appendChild(r("Entry ID",s));const g=b([["primary","Primary"],["secondary","Secondary"],["ghost","Ghost"],["danger","Danger"]]);l.appendChild(r("Style",g));const S=p("text","e.g. check, zap, send (optional)","");l.appendChild(r("Icon",S));const u=p("text","Confirmation message (optional)","");l.appendChild(r("Confirm prompt",u));const w=document.createElement("button");w.type="button",w.className="btn btn-primary",w.textContent="Insert",l.appendChild(w);const B=E.modal({title:"Insert CTA Button",size:"sm"});B.element.appendChild(l),B.open(),w.addEventListener("click",()=>{const x=m.value;if(!x)return;const z=s.value.trim(),L=(y.value.trim()||"Run").replace(/\[\/cta\]/gi,""),A=g.value,H=S.value.trim().replace(/"/g,""),M=u.value.trim().replace(/"/g,""),V=z.replace(/"/g,"");let P=`action="${x}" style="${A}"`;V&&(P+=` entry="${V}"`),H&&(P+=` icon="${H}"`),M&&(P+=` confirm="${M}"`);const K=`[cta ${P}]${L}[/cta]`;B.close(),he(e,K),e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()})}),k.onHelp(()=>{xe()}),o.find(".editor-view-btn").on("click",function(){const e=$(this).data("mode");o.find(".editor-view-btn").removeClass("active"),$(this).addClass("active"),o.find("#editor-body").removeClass("editor-mode-split editor-mode-write editor-mode-preview").addClass(`editor-mode-${e}`)}),o.find("#fullscreen-btn").on("click",function(){o.find(".editor-card").toggleClass("editor-fullscreen")}),de=!1,fe&&window.removeEventListener("beforeunload",fe),fe=e=>{de&&e.preventDefault()},window.addEventListener("beforeunload",fe),ve||(ve=!0,R.use((e,f,l)=>{const c=window.location.hash.startsWith("#/pages/edit")||window.location.hash==="#/pages/new";if(!de||!c)return l();E.confirm("You have unsaved changes. Leave this page?").then(h=>{h&&(de=!1,l())})})),q.on("input",()=>{de=!0,_()}),_(),o.find("#save-btn").on("click",async()=>{const e=o.find("#page-url-path").val().trim();if(!e){E.toast("URL path is required.",{type:"warning"});return}const f=o.find("#field-dconfig").val().trim();let l=null;if(f)try{l=JSON.parse(f)}catch{E.toast("DConfig JSON is invalid. Please check the format before saving.",{type:"warning"});return}const c={title:o.find("#field-title").val().trim()||"Untitled",description:o.find("#field-description").val().trim(),layout:o.find("#field-layout").val(),status:o.find("#field-status").val(),sortOrder:parseInt(o.find("#field-sort-order").val(),10)||99,showInNav:o.find("#field-show-in-nav").is(":checked"),sidebar:o.find("#field-sidebar").is(":checked"),...o.find("#field-show-breadcrumbs").is(":checked")?{}:{breadcrumbs:!1},tags:G?G.getValue():[],category:o.find("#field-category").val().trim()||null,visibility:o.find("#field-visibility").val()||"public",seo:{title:o.find("#field-seo-title").val().trim(),description:o.find("#field-seo-desc").val().trim()},dconfig:l,...o.find("#field-theme").val()?{theme:o.find("#field-theme").val()}:{}};try{if(o.find("#save-btn").prop("disabled",!0).text("Saving\u2026"),C){const h={frontmatter:c,body:q.val()};e!==T&&(h.newUrlPath=e),await U.pages.update(T,h),E.toast("Page saved successfully.",{type:"success"}),de=!1,e!==T&&R.navigate(`/pages/edit${e}`)}else await U.pages.create({urlPath:e,frontmatter:c,body:q.val()}),E.toast("Page saved successfully.",{type:"success"}),de=!1,R.navigate("/pages")}catch(h){E.toast(`Save failed: ${h.message||"Unknown error"}`,{type:"error"})}finally{o.find("#save-btn").prop("disabled",!1).text("Save")}}),o.find("#cancel-btn").on("click",()=>R.navigate("/pages")),Domma.icons.scan()}};