@glw907/cairn-cms 0.10.0 → 0.14.0

package/dist/render/component-grammar.js

@@ -64,12 +64,16 @@ function childrenToText(children) {
     const 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, def) {
+// Parse the markdown and find the component's opening container directive. The single seam both
+// parseComponent and parseRawAttributeKeys (and the combined validator helper) build on, so one
+// parse derives both the form values and the raw attribute keys.
+function findComponentRoot(markdown, def) {
     const tree = unified().use(remarkParse).use(remarkDirective).parse(markdown);
-    const root = tree.children.find((c) => isContainer(c) && c.name === def.name);
+    return tree.children.find((c) => isContainer(c) && c.name === def.name);
+}
+// Build guided-form values from an already-found component root. Returns the empty base when the
+// root is absent.
+function valuesFromRoot(root, def) {
     const values = emptyComponentValues(def);
     if (!root)
         return values;
@@ -101,12 +105,27 @@ export async function parseComponent(markdown, def) {
     }
     return values;
 }
+// The raw attribute keys on an already-found component root.
+function rawKeysFromRoot(root) {
+    return Object.keys(root?.attributes ?? {});
+}
+/** 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, def) {
+    return valuesFromRoot(findComponentRoot(markdown, def), def);
+}
 /** 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, def) {
-    const tree = unified().use(remarkParse).use(remarkDirective).parse(markdown);
-    const root = tree.children.find((c) => isContainer(c) && c.name === def.name);
-    return Object.keys(root?.attributes ?? {});
+    return rawKeysFromRoot(findComponentRoot(markdown, def));
+}
+/** Parse the component once and derive both the guided-form values and the raw attribute keys.
+ *  Validation needs both, so this seam spares it the double parse that calling
+ *  {@link parseComponent} and {@link parseRawAttributeKeys} separately would cost. */
+export async function parseComponentWithRawKeys(markdown, def) {
+    const root = findComponentRoot(markdown, def);
+    return { values: valuesFromRoot(root, def), rawKeys: rawKeysFromRoot(root) };
 }
 // 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

package/dist/render/component-validate.js

@@ -1,6 +1,6 @@
-import { parseComponent, parseRawAttributeKeys } from './component-grammar.js';
+import { parseComponentWithRawKeys } from './component-grammar.js';
 export async function validateComponent(markdown, def) {
-    const values = await parseComponent(markdown, def);
+    const { values, rawKeys } = await parseComponentWithRawKeys(markdown, def);
     const errors = {};
     const declared = new Set((def.attributes ?? []).map((f) => f.key));
     for (const field of def.attributes ?? []) {
@@ -14,7 +14,7 @@ export async function validateComponent(markdown, def) {
             errors[field.key] = `${field.label} must be one of: ${(field.options ?? []).join(', ')}.`;
         }
     }
-    for (const key of parseRawAttributeKeys(markdown, def)) {
+    for (const key of rawKeys) {
         if (!declared.has(key))
             errors[key] = `Unknown attribute "${key}".`;
     }

package/dist/render/glyph.d.ts

@@ -1,6 +1,9 @@
 import type { Element } from 'hast';
 /** A glyph name to SVG path-data map (the site owns the icon set). */
 export type IconSet = Record<string, string>;
-/** Inline SVG glyph as a real hast node: class ec-glyph, 256 viewBox, currentColor fill. */
+/** Inline SVG glyph as a real hast node: class ec-glyph, 256 viewBox, currentColor fill.
+ *  An unknown icon name yields the bare svg shell with no path child, so it never serializes
+ *  a stray empty (or undefined) path. Callers always wrap the returned element, so the shell
+ *  keeps them safe. */
 export declare function glyph(name: string, icons: IconSet): Element;
 //# sourceMappingURL=glyph.d.ts.map

package/dist/render/glyph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["../../src/lib/render/glyph.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,sEAAsE;AACtE,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE7C,4FAA4F;AAC5F,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAM3D"}
+{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["../../src/lib/render/glyph.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,sEAAsE;AACtE,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE7C;;;uBAGuB;AACvB,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAO3D"}

package/dist/render/glyph.js

@@ -1,5 +1,9 @@
 import { s } from 'hastscript';
-/** Inline SVG glyph as a real hast node: class ec-glyph, 256 viewBox, currentColor fill. */
+/** Inline SVG glyph as a real hast node: class ec-glyph, 256 viewBox, currentColor fill.
+ *  An unknown icon name yields the bare svg shell with no path child, so it never serializes
+ *  a stray empty (or undefined) path. Callers always wrap the returned element, so the shell
+ *  keeps them safe. */
 export function glyph(name, icons) {
-    return s('svg', { className: ['ec-glyph'], viewBox: '0 0 256 256', fill: 'currentColor', ariaHidden: 'true' }, [s('path', { d: icons[name] })]);
+    const d = icons[name];
+    return s('svg', { className: ['ec-glyph'], viewBox: '0 0 256 256', fill: 'currentColor', ariaHidden: 'true' }, d == null ? [] : [s('path', { d })]);
 }

package/dist/render/registry.d.ts

@@ -1,4 +1,4 @@
-import type { Element } from 'hast';
+import type { Element, ElementContent } 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. */
@@ -28,6 +28,20 @@ export interface SlotDef {
     /** For `kind: 'repeatable'`: the fields composing each list item (v1 uses the first field). */
     itemFields?: AttributeField[];
 }
+/** The structured input a component's `build` receives. The engine stamps the component's
+ *  attributes and partitions its slots from the rendered hast, so `build` arranges hast and
+ *  never walks the tree. `slot(name)` returns a slot's rendered children (title, body, or any
+ *  named slot); `items(name)` returns a repeatable slot's items, one child list per item. */
+export interface ComponentContext {
+    /** Declared attribute values, keyed by attribute key. Booleans are real booleans. */
+    attributes: Record<string, string | boolean>;
+    /** A named slot's rendered children. Returns `[]` for an absent or empty slot. */
+    slot(name: string): ElementContent[];
+    /** A repeatable slot's items, each item its own list of rendered children. `[]` when absent. */
+    items(name: string): ElementContent[][];
+    /** The stamped component element, for an escape hatch. Most builds never need it. */
+    node: Element;
+}
 /** A site component: how it inserts (editor) and how it renders (rehype). */
 export interface ComponentDef {
     /** Directive name, e.g. 'card' (matches `:::card`). */
@@ -38,10 +52,10 @@ export interface ComponentDef {
     description: string;
     /** Markdown scaffold inserted at the cursor by the editor palette. */
     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;
+    /** Build the final hast element from the component context (attributes plus partitioned
+     *  slots). 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: (ctx: ComponentContext) => 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. */
@@ -57,6 +71,10 @@ export interface ComponentRegistry {
     get(name: string): ComponentDef | undefined;
     defaultIcon(name: string, role?: string): string | undefined;
 }
+/** The hast property name carrying one declared attribute from stamp to dispatch, e.g. `tone`
+ *  becomes `dataAttrTone`. The directive stamp writes it and the rehype dispatch reads it, so both
+ *  sides derive the name from this one helper rather than spelling the capitalize twice. */
+export declare function dataAttrProp(key: string): string;
 /**
  * Build a registry from a site's component definitions. The single source the render
  * pipeline (directive stamp plus rehype dispatch) and the editor palette both read.

package/dist/render/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/lib/render/registry.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,+EAA+E;AAC/E,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/D,iGAAiG;AACjG,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE5D;4GAC4G;AAC5G,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;qDAEiD;IACjD,KAAK,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAClC,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3C,6FAA6F;IAC7F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;IAC5C,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC9D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,YAAY,EAAE,CAAA;CAAE,GAAG,iBAAiB,CAQhG;AAED;uEACuE;AACvE,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;CAC1C;AAED;+DAC+D;AAC/D,wBAAgB,WAAW,CAAC,GAAG,EAAE,YAAY,GAAG,eAAe,CAU9D"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/lib/render/registry.ts"],"names":[],"mappings":"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"}

package/dist/render/registry.js

@@ -1,3 +1,9 @@
+/** The hast property name carrying one declared attribute from stamp to dispatch, e.g. `tone`
+ *  becomes `dataAttrTone`. The directive stamp writes it and the rehype dispatch reads it, so both
+ *  sides derive the name from this one helper rather than spelling the capitalize twice. */
+export function dataAttrProp(key) {
+    return `dataAttr${key.charAt(0).toUpperCase()}${key.slice(1)}`;
+}
 /**
  * Build a registry from a site's component definitions. The single source the render
  * pipeline (directive stamp plus rehype dispatch) and the editor palette both read.

package/dist/render/rehype-dispatch.d.ts

@@ -1,15 +1,11 @@
 import type { Root, Element, ElementContent } from 'hast';
-import type { ComponentRegistry } from './registry.js';
+import { type ComponentRegistry } from './registry.js';
 export declare function isElement(node: ElementContent | undefined): node is Element;
 export declare function strProp(node: Element, name: string): string | undefined;
 /** Wrap a pre-built glyph in an ec-icon span; secondary role adds the modifier. */
 export declare function iconSpan(glyphEl: Element, role?: string): Element;
 /** A site's icon factory: turn a stamped icon name + role into a hast element. */
 export type MakeIcon = (name: string, role?: string) => Element;
-export declare function splitHead(node: Element, makeIcon?: MakeIcon): {
-    head: Element;
-    rest: ElementContent[];
-};
 /** Section wrapper: `<section class=…><div class="card-body">…</div></section>`. */
 export declare function cardShell(classes: string[], body: ElementContent[]): Element;
 /** Tag the first <ul> among children with `ec-grid` and strip its whitespace-only

package/dist/render/rehype-dispatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rehype-dispatch.d.ts","sourceRoot":"","sources":["../../src/lib/render/rehype-dispatch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,wBAAgB,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG,IAAI,IAAI,OAAO,CAE3E;AAKD,wBAAgB,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAGvE;AAED,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAGjE;AAED,kFAAkF;AAClF,MAAM,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;AAMhE,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,cAAc,EAAE,CAAA;CAAE,CAYvG;AAED,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,OAAO,CAE5E;AAED;kFACkF;AAClF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,OAAO,GAAG,SAAS,CAS7E;AAoBD;;;;;mFAKmF;AACnF,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,IACnE,MAAM,IAAI,UAYnB"}
+{"version":3,"file":"rehype-dispatch.d.ts","sourceRoot":"","sources":["../../src/lib/render/rehype-dispatch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,EAA0D,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE/G,wBAAgB,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,GAAG,IAAI,IAAI,OAAO,CAE3E;AAKD,wBAAgB,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAGvE;AAED,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAGjE;AAED,kFAAkF;AAClF,MAAM,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;AAEhE,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,OAAO,CAE5E;AAED;kFACkF;AAClF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,OAAO,GAAG,SAAS,CAS7E;AAqFD;;;;;mFAKmF;AACnF,wBAAgB,cAAc,CAAC,QAAQ,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,OAAO,IACnE,MAAM,IAAI,UAYnB"}

package/dist/render/rehype-dispatch.js

@@ -1,4 +1,5 @@
 import { h } from 'hastscript';
+import { dataAttrProp } from './registry.js';
 export function isElement(node) {
     return !!node && node.type === 'element';
 }
@@ -14,24 +15,6 @@ export function iconSpan(glyphEl, role) {
     const className = role === 'secondary' ? ['ec-icon', 'ec-icon-secondary'] : ['ec-icon'];
     return h('span', { className }, [glyphEl]);
 }
-// Pull the section's <h2> out, retag it .card-title, and build the .ec-head row
-// (optional icon + heading). Returns the head plus the remaining body children.
-// `makeIcon` (site-supplied) turns the stamped data-icon into an element; omit it
-// for a head with no icon.
-export function splitHead(node, makeIcon) {
-    const children = node.children;
-    const i = children.findIndex((c) => isElement(c) && c.tagName === 'h2');
-    const h2 = children[i];
-    h2.properties = { ...h2.properties, className: ['card-title'] };
-    const rest = children.filter((_, j) => j !== i);
-    const icon = strProp(node, 'dataIcon');
-    const role = strProp(node, 'dataRole');
-    const headKids = [];
-    if (makeIcon && icon)
-        headKids.push(makeIcon(icon, role));
-    headKids.push(h2);
-    return { head: h('div', { className: ['ec-head'] }, headKids), rest };
-}
 /** Section wrapper: `<section class=…><div class="card-body">…</div></section>`. */
 export function cardShell(classes, body) {
     return h('section', { className: classes }, [h('div', { className: ['card-body'] }, body)]);
@@ -58,11 +41,80 @@ function transformChildren(children, registry) {
         return c;
     });
 }
+// Read a stamped attribute back into its typed value. Booleans arrive as the strings
+// 'true'/'false'; everything else is the literal string the author wrote.
+function readAttributes(node, def) {
+    const out = {};
+    for (const field of def.attributes ?? []) {
+        const value = strProp(node, dataAttrProp(field.key));
+        if (value == null)
+            continue;
+        out[field.key] = field.type === 'boolean' ? value === 'true' : value;
+    }
+    return out;
+}
+// The title label paragraph carries data-slot="title"; build() wants its inline children, not
+// the marked paragraph. Return the paragraph's children.
+function stripSlotMarker(child) {
+    return isElement(child) ? child.children : [child];
+}
+// Split a component's stamped children into named slots and the default body. A child marked
+// data-slot="title"/<name> routes to that slot; an unmarked child is body. A repeatable slot
+// wraps a <ul>, so its items are that list's <li> children, one child-list per item.
+function partitionSlots(node) {
+    const named = new Map();
+    const body = [];
+    for (const child of node.children) {
+        const slotName = isElement(child) ? strProp(child, 'dataSlot') : undefined;
+        if (slotName === 'title')
+            named.set('title', stripSlotMarker(child));
+        else if (slotName)
+            named.set(slotName, [child]);
+        else
+            body.push(child);
+    }
+    return {
+        slot(name) {
+            if (name === 'body')
+                return body;
+            const wrap = named.get(name);
+            if (!wrap)
+                return [];
+            // For title we stored the label's own children, so return them as-is. For a markdown or
+            // inline named slot the wrapper <div> holds the rendered children; unwrap it.
+            if (name === 'title')
+                return wrap;
+            const div = wrap[0];
+            return isElement(div) ? div.children : wrap;
+        },
+        items(name) {
+            const wrap = named.get(name);
+            const div = wrap?.[0];
+            if (!div || !isElement(div))
+                return [];
+            const ul = div.children.find((c) => isElement(c) && c.tagName === 'ul');
+            if (!ul || !isElement(ul))
+                return [];
+            return ul.children
+                .filter((li) => isElement(li) && li.tagName === 'li')
+                .map((li) => li.children);
+        },
+    };
+}
 function transformNode(node, registry) {
     node.children = transformChildren(node.children, registry);
     const name = strProp(node, 'dataPrimitive');
     const def = name ? registry.get(name) : undefined;
-    return def ? def.build(node) : node;
+    if (!def)
+        return node;
+    const parts = partitionSlots(node);
+    const ctx = {
+        attributes: readAttributes(node, def),
+        slot: parts.slot,
+        items: parts.items,
+        node,
+    };
+    return def.build(ctx);
 }
 /** Rehype transformer: dispatch each stamped element through its registry `build`
  *  fn. When `stagger` is on, each top-level primitive gets a `data-rise` attribute

package/dist/render/remark-directives.d.ts

@@ -1,4 +1,4 @@
 import type { Root } from 'mdast';
-import type { ComponentRegistry } from './registry.js';
+import { type ComponentRegistry } from './registry.js';
 export declare function remarkDirectiveStamp(registry: ComponentRegistry): (tree: Root) => void;
 //# sourceMappingURL=remark-directives.d.ts.map

package/dist/render/remark-directives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remark-directives.d.ts","sourceRoot":"","sources":["../../src/lib/render/remark-directives.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA8B,IAAI,EAAQ,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAmCvD,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,IAEtD,MAAM,IAAI,UA8BnB"}
+{"version":3,"file":"remark-directives.d.ts","sourceRoot":"","sources":["../../src/lib/render/remark-directives.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA8B,IAAI,EAAQ,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAkDrE,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,IAEtD,MAAM,IAAI,UAqDnB"}

package/dist/render/remark-directives.js

@@ -1,4 +1,19 @@
 import { visit } from 'unist-util-visit';
+import { dataAttrProp } from './registry.js';
+// mdast-util-directive carries the `[label]` as a paragraph whose `data.directiveLabel` is set.
+function isDirectiveLabel(node) {
+    return Boolean(node.data?.directiveLabel);
+}
+// Stamp data-slot on a child so the rehype dispatch partitioner can route it. For a nested
+// container directive we also set hName so it renders as a <div> wrapper rather than being
+// dropped as an unknown directive.
+function markSlot(node, name) {
+    const n = node;
+    const data = n.data ?? (n.data = {});
+    if (n.type === 'containerDirective')
+        data.hName = 'div';
+    data.hProperties = { ...(data.hProperties ?? {}), dataSlot: name };
+}
 // Reconstruct a directive's authored attribute block (`{#id .class key="value"}`).
 // Accidental prose directives carry none, so this is almost always empty.
 function serializeAttributes(attributes) {
@@ -42,6 +57,7 @@ export function remarkDirectiveStamp(registry) {
         visit(tree, 'containerDirective', (node) => {
             if (!known.has(node.name))
                 return;
+            const def = registry.get(node.name);
             const attrs = node.attributes ?? {};
             const role = attrs.role || undefined;
             let icon = attrs.icon || undefined;
@@ -52,9 +68,30 @@ export function remarkDirectiveStamp(registry) {
                 properties.dataIcon = icon;
             if (role)
                 properties.dataRole = role;
+            // Carry every declared attribute to hast so the dispatch partitioner can build the
+            // component context. data-attr-<key> survives to the element; build() consumes it and
+            // returns a fresh element, so the marker never reaches the published DOM.
+            for (const field of def?.attributes ?? []) {
+                const raw = attrs[field.key];
+                if (raw != null)
+                    properties[dataAttrProp(field.key)] = raw;
+            }
             const data = node.data ?? (node.data = {});
             data.hName = 'div';
             data.hProperties = properties;
+            // Mark the title label paragraph and the nested slot directives so they survive to hast
+            // and the partitioner can find them. A slot named in the component schema (other than the
+            // default body) is a nested container directive; the title is the directive [label].
+            const slotNames = new Set((def?.slots ?? []).map((s) => s.name));
+            for (const child of node.children) {
+                if (isDirectiveLabel(child) && slotNames.has('title')) {
+                    markSlot(child, 'title');
+                }
+                else if (child.type === 'containerDirective' &&
+                    slotNames.has(child.name)) {
+                    markSlot(child, child.name);
+                }
+            }
         });
         visit(tree, ['textDirective', 'leafDirective'], (node, index, parent) => {
             if (!parent || index == null)

package/dist/sveltekit/public-routes.d.ts

@@ -1,5 +1,6 @@
 import type { ContentSummary, ContentEntry } from '../delivery/content-index.js';
 import type { SiteIndex } from '../delivery/site-index.js';
+import type { SeoMeta } from '../delivery/seo.js';
 /** Injected dependencies for the public loaders. */
 export interface PublicRoutesDeps {
     site: SiteIndex;
@@ -7,6 +8,18 @@ export interface PublicRoutesDeps {
         stagger?: boolean;
     }) => string | Promise<string>;
     origin: string;
+    /** Site name for og:site_name and the SEO head. */
+    siteName: string;
+    /** Default description used when an entry has none. */
+    description: string;
+    /** Absolute feed URLs for the head's autodiscovery links. */
+    feeds?: {
+        rss?: string;
+        json?: string;
+    };
+    /** A site-wide default OG image, used when an entry declares none. Resolved to absolute like the
+     *  canonical URL, so a relative path such as "/og/default.png" works. */
+    defaultImage?: string;
 }
 /** The archive and tag list data: summaries the template renders. */
 export interface ListData {
@@ -28,6 +41,7 @@ export interface EntryData {
     entry: ContentEntry;
     html: string;
     canonicalUrl: string;
+    seo: SeoMeta;
     newer?: ContentSummary;
     older?: ContentSummary;
 }

package/dist/sveltekit/public-routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-routes.d.ts","sourceRoot":"","sources":["../../src/lib/sveltekit/public-routes.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/E,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,OAAQ,SAAQ,QAAQ;IACvC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oDAAoD;AACpD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,oFAAoF;AACpF,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,gBAAgB;uBAWvB;QAAE,GAAG,EAAE,GAAG,CAAA;KAAE,KAAG,OAAO,CAAC,SAAS,CAAC;6BAQjC,MAAM,KAAG,QAAQ;8BAKhB,MAAM,KAAG,YAAY;yBAK1B,MAAM,SAAS;QAAE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAG,OAAO;mBAO5D;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE;EAKvC"}
+{"version":3,"file":"public-routes.d.ts","sourceRoot":"","sources":["../../src/lib/sveltekit/public-routes.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAGlD,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC;6EACyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,OAAQ,SAAQ,QAAQ;IACvC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oDAAoD;AACpD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,oFAAoF;AACpF,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,gBAAgB;uBAWvB;QAAE,GAAG,EAAE,GAAG,CAAA;KAAE,KAAG,OAAO,CAAC,SAAS,CAAC;6BA0BjC,MAAM,KAAG,QAAQ;8BAKhB,MAAM,KAAG,YAAY;yBAK1B,MAAM,SAAS;QAAE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAG,OAAO;mBAO5D;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE;EAKvC"}

package/dist/sveltekit/public-routes.js

@@ -4,9 +4,11 @@
 // and tag-index loaders stay concept-scoped, keyed by concept id. The index is built in site code
 // from globs, so it stays in the prerender graph and out of the runtime Worker.
 import { error } from '@sveltejs/kit';
+import { buildSeoMeta } from '../delivery/seo.js';
+import { readSeoFields, resolveImageUrl } from '../delivery/seo-fields.js';
 /** Build the public loaders for a site's unified index. */
 export function createPublicRoutes(deps) {
-    const { site, render, origin } = deps;
+    const { site, render, origin, siteName, description, feeds, defaultImage } = deps;
     /** Resolve one concept's index by id, or a 404 (the route names an unconfigured concept). */
     function indexOf(conceptId) {
         const index = site.concept(conceptId);
@@ -20,7 +22,25 @@ export function createPublicRoutes(deps) {
         if (!entry)
             throw error(404, `Not found: ${event.url.pathname}`);
         const { newer, older } = site.adjacent(entry);
-        return { entry, html: await render(entry.body, { stagger: true }), canonicalUrl: origin + entry.permalink, newer, older };
+        const canonicalUrl = origin + entry.permalink;
+        const fields = readSeoFields(entry.frontmatter);
+        const rawImage = fields.image ?? defaultImage;
+        const image = rawImage ? resolveImageUrl(rawImage, origin) : undefined;
+        // A dated entry is an article; an undated one (a page) is a website.
+        const seo = buildSeoMeta({
+            title: entry.title,
+            description: fields.description || entry.excerpt || description,
+            canonicalUrl,
+            siteName,
+            type: entry.date ? 'article' : 'website',
+            ...(entry.date ? { published: entry.date } : {}),
+            ...(entry.updated ? { modified: entry.updated } : {}),
+            ...(image ? { image } : {}),
+            ...(fields.robots ? { robots: fields.robots } : {}),
+            ...(fields.author ? { author: fields.author } : {}),
+            feeds,
+        });
+        return { entry, html: await render(entry.body, { stagger: true }), canonicalUrl, seo, newer, older };
     }
     /** The chronological archive for one concept: every non-draft summary, newest-first. */
     function archiveLoad(conceptId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.10.0",
+  "version": "0.14.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -48,6 +48,11 @@
       "svelte": "./dist/components/index.js",
       "default": "./dist/components/index.js"
     },
+    "./delivery": {
+      "types": "./dist/delivery/index.d.ts",
+      "svelte": "./dist/delivery/index.js",
+      "default": "./dist/delivery/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [

package/src/lib/components/ComponentForm.svelte

@@ -38,6 +38,32 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
     return Array.isArray(v) ? v : [];
   }
 
+  // Stable per-item ids run parallel to each repeatable slot's value array, so the {#each} keys by
+  // identity instead of index. A mid-list removal then drops the right DOM node and the focused
+  // item follows the data. Ids come from a monotonic module-local counter, never Math.random or
+  // Date.now. The value arrays in values.slots stay the canonical string lists serializeComponent
+  // reads, so the emitted markdown is unchanged. emptyValues seeds every repeatable slot to [], so
+  // the id lists start empty and stay in lockstep with the values through addItem/removeItem.
+  let nextId = 0;
+  const itemIds = $state<Record<string, number[]>>(
+    untrack(() => Object.fromEntries((def.slots ?? []).filter((s) => s.kind === 'repeatable').map((s) => [s.name, []]))),
+  );
+
+  // emptyValues and the itemIds seed both cover every repeatable slot, so this read always hits.
+  function slotIds(name: string): number[] {
+    return itemIds[name] ?? [];
+  }
+
+  function addItem(name: string): void {
+    slotItems(name).push('');
+    slotIds(name).push(nextId++);
+  }
+
+  function removeItem(name: string, index: number): void {
+    slotItems(name).splice(index, 1);
+    slotIds(name).splice(index, 1);
+  }
+
   // Typed accessors over the unions so explicit value targets stay sound.
   function asString(key: string): string {
     const v = values.attributes[key];
@@ -79,7 +105,6 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
         <input
           class="checkbox checkbox-sm"
           type="checkbox"
-          aria-label={field.label}
           aria-invalid={Boolean(errors[field.key])}
           aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
           checked={asBool(field.key)}
@@ -92,7 +117,6 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
         <span class="text-sm font-medium">{field.label}</span>
         <select
           class="select"
-          aria-label={field.label}
           aria-invalid={Boolean(errors[field.key])}
           aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
           value={asString(field.key)}
@@ -107,6 +131,7 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
         <span class="text-sm font-medium">{field.label}</span>
         <IconPicker
           {icons}
+          label={field.label}
           value={asString(field.key)}
           required={field.required ?? false}
           onChange={(name) => (values.attributes[field.key] = name)}
@@ -117,7 +142,6 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
         <span class="text-sm font-medium">{field.label}</span>
         <input
           class="input"
-          aria-label={field.label}
           aria-invalid={Boolean(errors[field.key])}
           aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
           value={asString(field.key)}
@@ -134,7 +158,6 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
         <span class="text-sm font-medium">{slot.label}</span>
         <textarea
           class="textarea"
-          aria-label={slot.label}
           aria-invalid={Boolean(errors[slot.name])}
           aria-describedby={errors[slot.name] ? `err-${slot.name}` : undefined}
           rows={3}
@@ -147,7 +170,6 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
         <span class="text-sm font-medium">{slot.label}</span>
         <input
           class="input"
-          aria-label={slot.label}
           aria-invalid={Boolean(errors[slot.name])}
           aria-describedby={errors[slot.name] ? `err-${slot.name}` : undefined}
           value={slotString(slot.name)}
@@ -160,16 +182,17 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
 
   {#each repeatableSlots as slot (slot.name)}
     {@const items = slotItems(slot.name)}
+    {@const ids = slotIds(slot.name)}
     <fieldset class="rounded-box border border-base-300 flex flex-col gap-2 p-2">
       <legend class="text-sm font-medium">{slot.label}</legend>
-      <!-- Index key is deliberate: items are bare strings with no stable id, so the value bindings and splice/push are index-based by design. -->
-      {#each items as _, i (i)}
+      <!-- Keyed by the parallel stable id so a mid-list removal drops the right node and focus follows the data; the value still binds to the canonical items[i] string the serializer reads. -->
+      {#each ids as id, i (id)}
         <div class="flex items-center gap-2">
-          <input class="input input-sm flex-1" aria-label={`${slot.label} item`} bind:value={items[i]} />
-          <button type="button" class="btn btn-ghost btn-sm" aria-label={`Remove item ${i + 1}`} onclick={() => items.splice(i, 1)}>✕</button>
+          <input class="input input-sm flex-1" aria-label={`${slot.label} ${i + 1}`} bind:value={items[i]} />
+          <button type="button" class="btn btn-ghost btn-sm" aria-label={`Remove item ${i + 1}`} onclick={() => removeItem(slot.name, i)}>✕</button>
         </div>
       {/each}
-      <button type="button" class="btn btn-sm self-start" onclick={() => items.push('')}>Add item</button>
+      <button type="button" class="btn btn-sm self-start" onclick={() => addItem(slot.name)}>Add item</button>
       {#if errors[slot.name]}<span id={`err-${slot.name}`} role="alert" class="text-error text-xs">{errors[slot.name]}</span>{/if}
     </fieldset>
   {/each}