@glw907/cairn-cms 0.9.0 → 0.10.0

package/src/lib/components/EditPage.svelte

@@ -7,8 +7,9 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 <script lang="ts">
   import { untrack } from 'svelte';
   import MarkdownEditor from './MarkdownEditor.svelte';
-  import ComponentPalette from './ComponentPalette.svelte';
+  import ComponentInsertDialog from './ComponentInsertDialog.svelte';
   import type { ComponentRegistry } from '../render/registry.js';
+  import type { IconSet } from '../render/glyph.js';
   import type { EditData } from '../sveltekit/content-routes.js';
   import type { TextareaField, TagsField, FreeTagsField } from '../content/types.js';
   import { sanitizePreviewHtml } from '../render/sanitize.js';
@@ -20,9 +21,11 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
     registry?: ComponentRegistry;
     /** The site's design-accurate render pipeline; the preview pane sanitizes its output. */
     render?: (md: string, opts?: { stagger?: boolean }) => string | Promise<string>;
+    /** The site's icon set, for the guided form's icon fields. */
+    icons?: IconSet;
   }
 
-  let { data, registry, render }: Props = $props();
+  let { data, registry, render, icons }: Props = $props();
 
   // `body` is local editor state seeded once from the prop; it diverges as the user types.
   // untrack() captures the initial value without subscribing to future prop changes.
@@ -76,7 +79,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
     <p class="text-xs text-[var(--color-muted)]">{data.label}: {data.id}</p>
   </div>
   <div class="flex items-center gap-2">
-    <ComponentPalette {registry} {insert} />
+    <ComponentInsertDialog {registry} {insert} {icons} />
     <button
       type="button"
       class="btn btn-sm btn-ghost"

package/src/lib/components/IconPicker.svelte

@@ -0,0 +1,51 @@
+<!--
+@component
+A visual icon choice over the site's IconSet. Each glyph is a toggle button; the selected one carries
+aria-pressed. When the field is optional, a None button clears the value. The glyph renders inline from
+the IconSet path data, matching the renderer's 256-unit viewBox.
+-->
+<script lang="ts">
+  import type { IconSet } from '../render/glyph.js';
+
+  interface Props {
+    /** The site's glyph name to SVG path-data map. */
+    icons: IconSet;
+    /** The currently selected glyph name, or '' for none. */
+    value: string;
+    /** When false, a None choice is offered. */
+    required: boolean;
+    /** Called with the new glyph name (or '' for none). */
+    onChange: (name: string) => void;
+  }
+
+  let { icons, value, required, onChange }: Props = $props();
+
+  const names = $derived(Object.keys(icons));
+</script>
+
+<div class="flex flex-wrap gap-2" role="group" aria-label="Icon">
+  {#if !required}
+    <button
+      type="button"
+      class="btn btn-sm"
+      class:btn-primary={value === ''}
+      aria-pressed={value === ''}
+      onclick={() => onChange('')}
+    >None</button>
+  {/if}
+  {#each names as name (name)}
+    <button
+      type="button"
+      class="btn btn-sm gap-1"
+      class:btn-primary={value === name}
+      aria-pressed={value === name}
+      aria-label={name}
+      onclick={() => onChange(name)}
+    >
+      <svg class="ec-glyph" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" width="16" height="16">
+        <path d={icons[name]} />
+      </svg>
+      <span class="text-xs">{name}</span>
+    </button>
+  {/each}
+</div>

package/src/lib/components/index.ts

@@ -7,5 +7,7 @@ export { default as ConceptList } from './ConceptList.svelte';
 export { default as EditPage } from './EditPage.svelte';
 export { default as ManageEditors } from './ManageEditors.svelte';
 export { default as MarkdownEditor } from './MarkdownEditor.svelte';
-export { default as ComponentPalette } from './ComponentPalette.svelte';
+export { default as ComponentInsertDialog } from './ComponentInsertDialog.svelte';
+export { default as ComponentForm } from './ComponentForm.svelte';
+export { default as IconPicker } from './IconPicker.svelte';
 export { default as NavTree } from './NavTree.svelte';

package/src/lib/content/compose.ts

@@ -32,6 +32,7 @@ export function composeRuntime(
     sender: adapter.sender,
     render: adapter.render,
     registry: adapter.registry,
+    icons: adapter.icons,
     navMenu: adapter.navMenu,
     assets: adapter.assets,
     adminPanels,

package/src/lib/content/types.ts

@@ -8,6 +8,7 @@
 // descriptors are plain data so a `load` function can hand them across the server-to-client
 // boundary to the editor form.
 import type { ComponentRegistry } from '../render/registry.js';
+import type { IconSet } from '../render/glyph.js';
 import type { DatePrefix } from './ids.js';
 
 /** Common to every frontmatter field: the frontmatter key, the form label, and whether it is required. */
@@ -151,6 +152,8 @@ export interface CairnAdapter {
   render(md: string, opts?: { stagger?: boolean }): string | Promise<string>;
   /** Directive component registry; the renderer and the future palette derive from it (seam 3). */
   registry?: ComponentRegistry;
+  /** The site's glyph name to SVG path-data map, for the admin icon picker and the renderer. */
+  icons?: IconSet;
   navMenu?: NavMenuConfig;
   assets?: AssetConfig;
 }
@@ -243,6 +246,8 @@ export interface CairnRuntime {
   /** The site's one renderer: the editor preview and every public page call it (design decision 4). */
   render(md: string, opts?: { stagger?: boolean }): string | Promise<string>;
   registry?: ComponentRegistry;
+  /** The site's glyph name to SVG path-data map, for the admin icon picker and the renderer. */
+  icons?: IconSet;
   navMenu?: NavMenuConfig;
   assets?: AssetConfig;
   /** Admin panels contributed by extensions (Mode 2). Empty until Plan 09 wires the dispatch route. */

package/src/lib/index.ts

@@ -48,8 +48,22 @@ export {
 } from './content/ids.js';
 export type { DatePrefix } from './content/ids.js';
 // Render engine (Plan 04): generic directive pipeline; sites own the component registry.
-export { defineRegistry } from './render/registry.js';
-export type { ComponentDef, ComponentRegistry } from './render/registry.js';
+export { defineRegistry, emptyValues } from './render/registry.js';
+export type {
+  ComponentDef,
+  ComponentRegistry,
+  FieldType,
+  AttributeField,
+  SlotKind,
+  SlotDef,
+  ComponentValues,
+} from './render/registry.js';
+export { serializeComponent, parseComponent } from './render/component-grammar.js';
+export { validateComponent } from './render/component-validate.js';
+export type { ComponentValidation } from './render/component-validate.js';
+export { buildComponentInsert, type ComponentInsert } from './render/component-insert.js';
+export { generateComponentReference } from './render/component-reference.js';
+export type { ReferenceOptions } from './render/component-reference.js';
 export { glyph } from './render/glyph.js';
 export type { IconSet } from './render/glyph.js';
 export { remarkDirectiveStamp } from './render/remark-directives.js';

package/src/lib/render/component-grammar.ts

@@ -0,0 +1,167 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkDirective from 'remark-directive';
+import remarkStringify from 'remark-stringify';
+import type { Root, RootContent } from 'mdast';
+import type { ComponentDef, ComponentValues, SlotDef } from './registry.js';
+
+const COLON = ':';
+
+function attrBlock(def: ComponentDef, values: ComponentValues): string {
+  const parts: string[] = [];
+  for (const field of def.attributes ?? []) {
+    const v = values.attributes[field.key];
+    if (field.type === 'boolean') {
+      if (v === true) parts.push(`${field.key}="true"`);
+    } else if (typeof v === 'string' && v !== '') {
+      // The directive attribute grammar (mdast-util-directive) treats a literal `"` as the value
+      // terminator and decodes HTML entities, so a backslash escape does not survive a round-trip.
+      // Encode `&` first (so existing entities are not double-decoded) then `"`; the parser decodes
+      // both back. A backslash is literal in this grammar and needs no escaping.
+      const escaped = v.replace(/&/g, '&').replace(/"/g, '"');
+      parts.push(`${field.key}="${escaped}"`);
+    }
+  }
+  return parts.length ? `{${parts.join(' ')}}` : '';
+}
+
+function slotByName(def: ComponentDef, name: string): SlotDef | undefined {
+  return (def.slots ?? []).find((s) => s.name === name);
+}
+
+function nestedSlots(def: ComponentDef): SlotDef[] {
+  return (def.slots ?? []).filter((s) => s.name !== 'title' && s.name !== 'body');
+}
+
+export function serializeComponent(def: ComponentDef, values: ComponentValues): string {
+  const fence = COLON.repeat(nestedSlots(def).length > 0 ? 4 : 3);
+
+  const title = slotByName(def, 'title') ? (values.slots.title as string) ?? '' : '';
+  // Escape brackets in the label so a `[` or `]` in the title does not break the directive label
+  // grammar; remark un-escapes them back to literal text on parse, so readLabel recovers them.
+  const label = title ? `[${title.replace(/\[/g, '\\[').replace(/\]/g, '\\]')}]` : '';
+
+  const open = `${fence}${def.name}${label}${attrBlock(def, values)}`;
+
+  const lines: string[] = [open];
+  const body = slotByName(def, 'body') ? (values.slots.body as string) ?? '' : '';
+  if (body) lines.push(body);
+
+  for (const slot of nestedSlots(def)) {
+    const raw = values.slots[slot.name];
+    const content =
+      slot.kind === 'repeatable'
+        ? (Array.isArray(raw) ? raw : []).filter((i) => i !== '').map((i) => `- ${i}`).join('\n')
+        : ((raw as string | undefined) ?? '');
+    if (!content) continue;
+    if (lines.length > 1) lines.push(''); // blank line before this block
+    lines.push(`${COLON.repeat(3)}${slot.name}`, content, COLON.repeat(3));
+  }
+
+  lines.push(fence);
+  return lines.join('\n');
+}
+
+// A minimal structural view of a mdast containerDirective node (mdast-util-directive shape).
+interface DirectiveNode {
+  type: 'containerDirective' | 'leafDirective' | 'textDirective';
+  name: string;
+  attributes?: Record<string, string | null> | null;
+  children: RootContent[];
+}
+
+function isContainer(node: RootContent): node is RootContent & DirectiveNode {
+  return (node as DirectiveNode).type === 'containerDirective';
+}
+
+// Pin the bullet to `-` so a markdown body or slot that uses dash bullets round-trips unchanged
+// rather than drifting to remark-stringify's default `*`, which would silently mutate author content.
+const toMd = unified().use(remarkStringify, { bullet: '-' });
+
+/** Render mdast children back to trimmed markdown text. */
+function childrenToText(children: RootContent[]): string {
+  const root: Root = { type: 'root', children };
+  return String(toMd.stringify(root)).trim();
+}
+
+/** Parse a serialized component directive back into guided-form values, the inverse of
+ *  {@link serializeComponent}. The grammar is reversible, so the editor can round-trip a
+ *  saved directive through the form. */
+export async function parseComponent(markdown: string, def: ComponentDef): Promise<ComponentValues> {
+  const tree = unified().use(remarkParse).use(remarkDirective).parse(markdown) as Root;
+  const root = tree.children.find(
+    (c): c is RootContent & DirectiveNode => isContainer(c) && (c as DirectiveNode).name === def.name,
+  );
+  const values = emptyComponentValues(def);
+  if (!root) return values;
+
+  for (const field of def.attributes ?? []) {
+    const raw = root.attributes?.[field.key];
+    if (field.type === 'boolean') values.attributes[field.key] = raw === 'true';
+    else if (typeof raw === 'string') values.attributes[field.key] = raw;
+  }
+
+  const titleSlot = slotByName(def, 'title');
+  const bodySlot = slotByName(def, 'body');
+  const nested = nestedSlots(def);
+  const nestedNames = new Set(nested.map((s) => s.name));
+
+  const directChildren = root.children.filter(
+    (c) => !(isContainer(c) && nestedNames.has((c as DirectiveNode).name)) && !isDirectiveLabel(c),
+  );
+  const nestedChildren = root.children.filter(
+    (c): c is RootContent & DirectiveNode => isContainer(c) && nestedNames.has((c as DirectiveNode).name),
+  );
+
+  if (titleSlot) values.slots.title = readLabel(root) ?? '';
+  if (bodySlot) values.slots.body = childrenToText(directChildren);
+
+  for (const slot of nested) {
+    const node = nestedChildren.find((c) => c.name === slot.name);
+    if (!node) continue;
+    if (slot.kind === 'repeatable') values.slots[slot.name] = readListItems(node.children);
+    else values.slots[slot.name] = childrenToText(node.children);
+  }
+
+  return values;
+}
+
+/** The raw attribute keys present on the component's opening directive, read from the parsed tree
+ *  (quote-aware, unlike a regex over the source). Used by validation to flag unknown keys. */
+export function parseRawAttributeKeys(markdown: string, def: ComponentDef): string[] {
+  const tree = unified().use(remarkParse).use(remarkDirective).parse(markdown) as Root;
+  const root = tree.children.find(
+    (c): c is RootContent & DirectiveNode => isContainer(c) && (c as DirectiveNode).name === def.name,
+  );
+  return Object.keys(root?.attributes ?? {});
+}
+
+// A bare parse base: empty strings, false, and empty lists, with no attribute defaults applied. The
+// `emptyValues` helper in registry.ts seeds form defaults instead, so it is deliberately not reused
+// here; the parse must overwrite only the fields actually present in the markdown.
+function emptyComponentValues(def: ComponentDef): ComponentValues {
+  const attributes: Record<string, string | boolean> = {};
+  for (const f of def.attributes ?? []) attributes[f.key] = f.type === 'boolean' ? false : '';
+  const slots: Record<string, string | string[]> = {};
+  for (const s of def.slots ?? []) slots[s.name] = s.kind === 'repeatable' ? [] : '';
+  return { attributes, slots };
+}
+
+// mdast-util-directive carries the `[label]` as a paragraph whose `data.directiveLabel` is set.
+function isDirectiveLabel(node: RootContent): boolean {
+  return Boolean((node as { data?: { directiveLabel?: boolean } }).data?.directiveLabel);
+}
+
+function readLabel(root: DirectiveNode): string | undefined {
+  for (const child of root.children) {
+    const p = child as { type: string; data?: { directiveLabel?: boolean }; children?: { value?: string }[] };
+    if (p.type === 'paragraph' && p.data?.directiveLabel) return (p.children ?? []).map((c) => c.value ?? '').join('');
+  }
+  return undefined;
+}
+
+function readListItems(children: RootContent[]): string[] {
+  const list = children.find((c) => (c as { type: string }).type === 'list') as { children?: RootContent[] } | undefined;
+  if (!list?.children) return [];
+  return list.children.map((li) => childrenToText((li as { children?: RootContent[] }).children ?? []));
+}

package/src/lib/render/component-insert.ts

@@ -0,0 +1,15 @@
+import { serializeComponent } from './component-grammar.js';
+import { validateComponent } from './component-validate.js';
+import type { ComponentDef, ComponentValues } from './registry.js';
+
+/** The outcome of preparing a guided-form component for insertion: the markdown to insert, or the
+ *  field-keyed errors to show on the form. */
+export type ComponentInsert = { ok: true; markdown: string } | { ok: false; errors: Record<string, string> };
+
+/** Serialize a component's form values, then validate the result against its schema. Returns the
+ *  markdown to insert at the cursor, or the field errors keyed by attribute key or slot name. */
+export async function buildComponentInsert(def: ComponentDef, values: ComponentValues): Promise<ComponentInsert> {
+  const markdown = serializeComponent(def, values);
+  const verdict = await validateComponent(markdown, def);
+  return verdict.ok ? { ok: true, markdown } : { ok: false, errors: verdict.errors };
+}

package/src/lib/render/component-reference.ts

@@ -0,0 +1,38 @@
+import { serializeComponent } from './component-grammar.js';
+import { emptyValues, type ComponentDef, type ComponentRegistry, type ComponentValues } from './registry.js';
+
+export interface ReferenceOptions {
+  /** The H1 title of the reference document. */
+  title: string;
+  /** The one-line blockquote summary under the title. */
+  summary: string;
+}
+
+/** Build a self-contained markdown reference (the llms-full.txt shape) for a component registry, for
+ *  authors and for pointing an LLM at one curated file. */
+export function generateComponentReference(registry: ComponentRegistry, opts: ReferenceOptions): string {
+  const sections = registry.defs.map((def) => componentSection(def));
+  return `# ${opts.title}\n\n> ${opts.summary}\n\n${sections.join('\n\n')}\n`;
+}
+
+function componentSection(def: ComponentDef): string {
+  const lines = [`## ${def.label} (\`:::${def.name}\`)`, '', def.description ?? ''];
+  if (def.use) lines.push('', `**When to use:** ${def.use}`);
+  lines.push('', '```', serializeComponent(def, exampleValues(def)), '```');
+  return lines.join('\n');
+}
+
+/** Seed example values that show every declared field: an ellipsis for strings, one sample list item. */
+function exampleValues(def: ComponentDef): ComponentValues {
+  const values = emptyValues(def);
+  for (const field of def.attributes ?? []) {
+    if (field.type === 'boolean') values.attributes[field.key] = false;
+    else values.attributes[field.key] = field.options?.[0] ?? '…';
+  }
+  for (const slot of def.slots ?? []) {
+    if (slot.kind === 'repeatable') values.slots[slot.name] = ['…'];
+    else if (slot.name === 'title') values.slots[slot.name] = 'Title';
+    else values.slots[slot.name] = '…';
+  }
+  return values;
+}

package/src/lib/render/component-validate.ts

@@ -0,0 +1,36 @@
+import { parseComponent, parseRawAttributeKeys } from './component-grammar.js';
+import type { ComponentDef } from './registry.js';
+
+/** A validation verdict: ok, or field-keyed error messages. */
+export type ComponentValidation = { ok: true } | { ok: false; errors: Record<string, string> };
+
+export async function validateComponent(markdown: string, def: ComponentDef): Promise<ComponentValidation> {
+  const values = await parseComponent(markdown, def);
+  const errors: Record<string, string> = {};
+  const declared = new Set((def.attributes ?? []).map((f) => f.key));
+
+  for (const field of def.attributes ?? []) {
+    const v = values.attributes[field.key];
+    const filled = field.type === 'boolean' ? true : typeof v === 'string' && v !== '';
+    if (field.required && !filled) {
+      errors[field.key] = `${field.label} is required.`;
+      continue;
+    }
+    if (field.type === 'select' && typeof v === 'string' && v !== '' && !(field.options ?? []).includes(v)) {
+      errors[field.key] = `${field.label} must be one of: ${(field.options ?? []).join(', ')}.`;
+    }
+  }
+
+  for (const key of parseRawAttributeKeys(markdown, def)) {
+    if (!declared.has(key)) errors[key] = `Unknown attribute "${key}".`;
+  }
+
+  for (const slot of def.slots ?? []) {
+    if (!slot.required) continue;
+    const v = values.slots[slot.name];
+    const filled = Array.isArray(v) ? v.length > 0 : typeof v === 'string' && v !== '';
+    if (!filled) errors[slot.name] = `${slot.label} is required.`;
+  }
+
+  return Object.keys(errors).length ? { ok: false, errors } : { ok: true };
+}

package/src/lib/render/registry.ts

@@ -5,6 +5,39 @@
 // `ComponentRegistry` from here.
 import type { Element } from 'hast';
 
+/** The input types a component attribute or repeatable item field can take. */
+export type FieldType = 'text' | 'select' | 'icon' | 'boolean';
+
+/** One `{key="value"}` attribute on a component directive, or one field of a repeatable item. */
+export interface AttributeField {
+  /** The attribute name as it appears in the directive, e.g. `icon`. */
+  key: string;
+  /** The form label. */
+  label: string;
+  type: FieldType;
+  required?: boolean;
+  /** Initial value; a string for text/select/icon, a boolean for boolean. */
+  default?: string | boolean;
+  /** Allowed values for `type: 'select'`. */
+  options?: string[];
+  /** Helper text shown under the field. */
+  help?: string;
+}
+
+export type SlotKind = 'markdown' | 'inline' | 'repeatable';
+
+/** One named content region of a component. The slots named `title` and `body` are special: `title`
+ *  serializes to the directive `[label]` and `body` to the unmarked content (see the canonical grammar). */
+export interface SlotDef {
+  name: string;
+  label: string;
+  kind: SlotKind;
+  required?: boolean;
+  help?: string;
+  /** For `kind: 'repeatable'`: the fields composing each list item (v1 uses the first field). */
+  itemFields?: AttributeField[];
+}
+
 /** A site component: how it inserts (editor) and how it renders (rehype). */
 export interface ComponentDef {
   /** Directive name, e.g. 'card' (matches `:::card`). */
@@ -14,13 +47,19 @@ export interface ComponentDef {
   /** Palette description. */
   description: string;
   /** Markdown scaffold inserted at the cursor by the editor palette. */
-  insertTemplate: string;
+  insertTemplate?: string;
   /** Build the final hast element from the stamped directive element. The engine
    *  stamps the entrance-stagger ordinal (`data-rise`) on the top-level result, so a
    *  build fn stays free of any motion concern. */
   build: (node: Element) => Element;
   /** Optional role-to-default-icon, e.g. `{ caution: 'warning' }`. */
   defaultIconByRole?: Record<string, string>;
+  /** One line on when to reach for this component; feeds the picker and the reference file. */
+  use?: string;
+  /** The `{key="value"}` attributes this component accepts. */
+  attributes?: AttributeField[];
+  /** The named content regions this component accepts. */
+  slots?: SlotDef[];
 }
 
 export interface ComponentRegistry {
@@ -43,3 +82,24 @@ export function defineRegistry({ components }: { components: ComponentDef[] }):
     defaultIcon: (name, role) => (role ? byName.get(name)?.defaultIconByRole?.[role] : undefined),
   };
 }
+
+/** Guided-form values for one component: attribute values keyed by attribute key, slot values keyed
+ *  by slot name (a string, or a string list for a repeatable slot). */
+export interface ComponentValues {
+  attributes: Record<string, string | boolean>;
+  slots: Record<string, string | string[]>;
+}
+
+/** Seed an empty {@link ComponentValues} from a component's schema: attribute defaults (or '' / false)
+ *  and empty slot values ([] for repeatable, '' otherwise). */
+export function emptyValues(def: ComponentDef): ComponentValues {
+  const attributes: Record<string, string | boolean> = {};
+  for (const field of def.attributes ?? []) {
+    attributes[field.key] = field.default ?? (field.type === 'boolean' ? false : '');
+  }
+  const slots: Record<string, string | string[]> = {};
+  for (const slot of def.slots ?? []) {
+    slots[slot.name] = slot.kind === 'repeatable' ? [] : '';
+  }
+  return { attributes, slots };
+}

package/dist/components/ComponentPalette.svelte

@@ -1,50 +0,0 @@
-<!--
-@component
-The insert-component palette: a dropdown listing the site's registered directive components
-(seam 3). Picking one inserts its template at the cursor through the editor's insert callback.
-Renders nothing when the site configures no registry.
--->
-<script lang="ts">
-  import type { ComponentRegistry } from '../render/registry.js';
-
-  interface Props {
-    /** The site's component registry; the palette derives its catalog from it. */
-    registry?: ComponentRegistry;
-    /** Insert a template at the editor's cursor. */
-    insert: (template: string) => void;
-  }
-
-  let { registry, insert }: Props = $props();
-
-  const defs = $derived(registry?.defs ?? []);
-  let open = $state(false);
-</script>
-
-{#if defs.length > 0}
-  <div
-    class="dropdown"
-    class:dropdown-open={open}
-    role="presentation"
-    onkeydown={(e) => { if (e.key === 'Escape') open = false; }}
-  >
-    <button
-      type="button"
-      class="btn btn-sm btn-ghost"
-      aria-haspopup="listbox"
-      aria-expanded={open}
-      onclick={() => (open = !open)}
-    >Insert</button>
-    <ul class="dropdown-content menu rounded-box border border-base-300 bg-base-100 z-10 w-56 shadow" role="listbox">
-      {#each defs as def (def.name)}
-        <li role="option" aria-selected={false}>
-          <button type="button" onclick={() => { insert(def.insertTemplate); open = false; }}>
-            <span class="flex flex-col items-start">
-              <span class="font-medium">{def.label}</span>
-              <span class="text-xs text-[var(--color-muted)]">{def.description}</span>
-            </span>
-          </button>
-        </li>
-      {/each}
-    </ul>
-  </div>
-{/if}

package/dist/components/ComponentPalette.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { ComponentRegistry } from '../render/registry.js';
-interface Props {
-    /** The site's component registry; the palette derives its catalog from it. */
-    registry?: ComponentRegistry;
-    /** Insert a template at the editor's cursor. */
-    insert: (template: string) => void;
-}
-/**
- * The insert-component palette: a dropdown listing the site's registered directive components
- * (seam 3). Picking one inserts its template at the cursor through the editor's insert callback.
- * Renders nothing when the site configures no registry.
- */
-declare const ComponentPalette: import("svelte").Component<Props, {}, "">;
-type ComponentPalette = ReturnType<typeof ComponentPalette>;
-export default ComponentPalette;
-//# sourceMappingURL=ComponentPalette.svelte.d.ts.map

package/dist/components/ComponentPalette.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentPalette.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ComponentPalette.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG7D,UAAU,KAAK;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,gDAAgD;IAChD,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgCH;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/src/lib/components/ComponentPalette.svelte

@@ -1,50 +0,0 @@
-<!--
-@component
-The insert-component palette: a dropdown listing the site's registered directive components
-(seam 3). Picking one inserts its template at the cursor through the editor's insert callback.
-Renders nothing when the site configures no registry.
--->
-<script lang="ts">
-  import type { ComponentRegistry } from '../render/registry.js';
-
-  interface Props {
-    /** The site's component registry; the palette derives its catalog from it. */
-    registry?: ComponentRegistry;
-    /** Insert a template at the editor's cursor. */
-    insert: (template: string) => void;
-  }
-
-  let { registry, insert }: Props = $props();
-
-  const defs = $derived(registry?.defs ?? []);
-  let open = $state(false);
-</script>
-
-{#if defs.length > 0}
-  <div
-    class="dropdown"
-    class:dropdown-open={open}
-    role="presentation"
-    onkeydown={(e) => { if (e.key === 'Escape') open = false; }}
-  >
-    <button
-      type="button"
-      class="btn btn-sm btn-ghost"
-      aria-haspopup="listbox"
-      aria-expanded={open}
-      onclick={() => (open = !open)}
-    >Insert</button>
-    <ul class="dropdown-content menu rounded-box border border-base-300 bg-base-100 z-10 w-56 shadow" role="listbox">
-      {#each defs as def (def.name)}
-        <li role="option" aria-selected={false}>
-          <button type="button" onclick={() => { insert(def.insertTemplate); open = false; }}>
-            <span class="flex flex-col items-start">
-              <span class="font-medium">{def.label}</span>
-              <span class="text-xs text-[var(--color-muted)]">{def.description}</span>
-            </span>
-          </button>
-        </li>
-      {/each}
-    </ul>
-  </div>
-{/if}