@glw907/cairn-cms 0.8.0 → 0.10.0

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/src/lib/render/sanitize.ts

@@ -1,5 +1,5 @@
-// The live preview's sanitize floor. Carta runs with `sanitizer: false` behind the MarkdownEditor
-// seam, so the admin preview pane is the one barrier between editor-authored markdown and the DOM.
+// The live preview's sanitize floor. The MarkdownEditor edits raw markdown and never sanitizes,
+// so the admin preview pane is the one barrier between editor-authored markdown and the DOM.
 // DOMPurify needs a DOM, and the preview renders only in the browser after mount, so DOMPurify
 // loads through a dynamic import: the module never evaluates a DOM library on the Worker, and a
 // server import of this file pulls in nothing.

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}