@elytracms/studio 0.0.70 → 0.0.72

package/dist/previews/manifest-format.js

@@ -0,0 +1,59 @@
+/**
+ * The previews-manifest format (EC-440) — the JSON contract between the
+ * `elytra previews` CLI (the writer) and a consumer's `studio.config.tsx`
+ * (the reader, via {@link generatedPreviewsFromManifest}).
+ *
+ * The CLI renders every canvas-eligible component's fixtures headlessly
+ * against the consumer theme, writes the images to the studio app's
+ * `public/elytra-previews/` (served at `/elytra-previews/...`), and writes
+ * this manifest next to `studio.config.tsx` (`studio/elytra-previews.json`)
+ * so it is importable as a plain JSON module. Everything in it is
+ * deterministic — no timestamps — so an unchanged re-run rewrites nothing.
+ */
+/** Format version the CLI writes; bump on incompatible schema/hash changes. */
+export const PREVIEWS_MANIFEST_VERSION = 1;
+/** Tolerant entry guard — a malformed entry is skipped, never a crash. */
+function isManifestEntry(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    const entry = value;
+    return (typeof entry.componentId === 'string' &&
+        typeof entry.fixture === 'string' &&
+        typeof entry.url === 'string');
+}
+/**
+ * Adapt a previews manifest (a plain JSON import) into the EC-439
+ * {@link GeneratedPreviewLookup} seam. The whole consumer wiring is ~2 lines:
+ *
+ * ```tsx
+ * // studio.config.tsx
+ * import previewsManifest from './elytra-previews.json'
+ * export default defineStudio({
+ *   previews: { generated: generatedPreviewsFromManifest(previewsManifest) },
+ * })
+ * ```
+ *
+ * Tolerant by design (the input is a generated file a human may hand-edit or
+ * delete): a malformed document or entry yields lookup misses — the blocks
+ * panel then falls back to the icon+name placeholder — never a crash. A
+ * fixture-less component's single implicit variant is looked up (and written
+ * by the CLI) under the fixture name `'Default'`.
+ */
+export function generatedPreviewsFromManifest(manifest) {
+    const byKey = new Map();
+    if (typeof manifest === 'object' && manifest !== null) {
+        const entries = manifest.entries;
+        if (Array.isArray(entries)) {
+            for (const entry of entries) {
+                if (isManifestEntry(entry))
+                    byKey.set(lookupKey(entry.componentId, entry.fixture), entry.url);
+            }
+        }
+    }
+    return (componentId, fixtureName) => byKey.get(lookupKey(componentId, fixtureName));
+}
+function lookupKey(componentId, fixture) {
+    // NUL (\u0000) can appear in neither a component id nor a fixture name.
+    return `${componentId}\u0000${fixture}`;
+}
+//# sourceMappingURL=manifest-format.js.map

package/dist/previews/manifest-format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest-format.js","sourceRoot":"","sources":["../../src/previews/manifest-format.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,+EAA+E;AAC/E,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAA;AA2B1C,0EAA0E;AAC1E,SAAS,eAAe,CAAC,KAAc;IACrC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAA;IAC7D,MAAM,KAAK,GAAG,KAAgC,CAAA;IAC9C,OAAO,CACL,OAAO,KAAK,CAAC,WAAW,KAAK,QAAQ;QACrC,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ;QACjC,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,CAC9B,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,6BAA6B,CAAC,QAAiB;IAC7D,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkB,CAAA;IACvC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACtD,MAAM,OAAO,GAAI,QAAkC,CAAC,OAAO,CAAA;QAC3D,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YAC3B,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,IAAI,eAAe,CAAC,KAAK,CAAC;oBAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;YAC/F,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAA;AACrF,CAAC;AAED,SAAS,SAAS,CAAC,WAAmB,EAAE,OAAe;IACrD,wEAAwE;IACxE,OAAO,GAAG,WAAW,SAAS,OAAO,EAAE,CAAA;AACzC,CAAC","sourcesContent":["import type { GeneratedPreviewLookup } from '../components/builder/blocks-model'\n\n/**\n * The previews-manifest format (EC-440) — the JSON contract between the\n * `elytra previews` CLI (the writer) and a consumer's `studio.config.tsx`\n * (the reader, via {@link generatedPreviewsFromManifest}).\n *\n * The CLI renders every canvas-eligible component's fixtures headlessly\n * against the consumer theme, writes the images to the studio app's\n * `public/elytra-previews/` (served at `/elytra-previews/...`), and writes\n * this manifest next to `studio.config.tsx` (`studio/elytra-previews.json`)\n * so it is importable as a plain JSON module. Everything in it is\n * deterministic — no timestamps — so an unchanged re-run rewrites nothing.\n */\n\n/** Format version the CLI writes; bump on incompatible schema/hash changes. */\nexport const PREVIEWS_MANIFEST_VERSION = 1\n\n/** One generated preview artifact: a component fixture and its rendered image. */\nexport interface GeneratedPreviewsManifestEntry {\n  componentId: string\n  /** The fixture name, or `'Default'` for a fixture-less component's implicit variant. */\n  fixture: string\n  /** Root-relative image URL (the file lives in the studio app's `public/`). */\n  url: string\n  /**\n   * Input hash (sha-256 hex over the stable-serialized inputs: manifest prop +\n   * slot shape, fixture props/slotChildren, engine version). `elytra previews`\n   * skips entries whose hash is unchanged; `elytra previews --check` flags\n   * entries whose hash drifted as stale. Deliberately NOT part of the lookup —\n   * the studio only reads `componentId`/`fixture`/`url`.\n   */\n  hash: string\n}\n\n/** The manifest document `elytra previews` writes (`studio/elytra-previews.json`). */\nexport interface GeneratedPreviewsManifest {\n  version: number\n  /** The `@elytracms/studio` version the images were rendered with. */\n  engine: string\n  entries: GeneratedPreviewsManifestEntry[]\n}\n\n/** Tolerant entry guard — a malformed entry is skipped, never a crash. */\nfunction isManifestEntry(value: unknown): value is GeneratedPreviewsManifestEntry {\n  if (typeof value !== 'object' || value === null) return false\n  const entry = value as Record<string, unknown>\n  return (\n    typeof entry.componentId === 'string' &&\n    typeof entry.fixture === 'string' &&\n    typeof entry.url === 'string'\n  )\n}\n\n/**\n * Adapt a previews manifest (a plain JSON import) into the EC-439\n * {@link GeneratedPreviewLookup} seam. The whole consumer wiring is ~2 lines:\n *\n * ```tsx\n * // studio.config.tsx\n * import previewsManifest from './elytra-previews.json'\n * export default defineStudio({\n *   previews: { generated: generatedPreviewsFromManifest(previewsManifest) },\n * })\n * ```\n *\n * Tolerant by design (the input is a generated file a human may hand-edit or\n * delete): a malformed document or entry yields lookup misses — the blocks\n * panel then falls back to the icon+name placeholder — never a crash. A\n * fixture-less component's single implicit variant is looked up (and written\n * by the CLI) under the fixture name `'Default'`.\n */\nexport function generatedPreviewsFromManifest(manifest: unknown): GeneratedPreviewLookup {\n  const byKey = new Map<string, string>()\n  if (typeof manifest === 'object' && manifest !== null) {\n    const entries = (manifest as { entries?: unknown }).entries\n    if (Array.isArray(entries)) {\n      for (const entry of entries) {\n        if (isManifestEntry(entry)) byKey.set(lookupKey(entry.componentId, entry.fixture), entry.url)\n      }\n    }\n  }\n  return (componentId, fixtureName) => byKey.get(lookupKey(componentId, fixtureName))\n}\n\nfunction lookupKey(componentId: string, fixture: string): string {\n  // NUL (\\u0000) can appear in neither a component id nor a fixture name.\n  return `${componentId}\\u0000${fixture}`\n}\n"]}

package/dist/ui/field.d.ts

@@ -1,4 +1,25 @@
 import type { LabelHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
+/**
+ * EC-443 — THE nested-field anchor convention (one convention, used by both the
+ * stamping and the lookup — do not invent a second):
+ *
+ *   data-ec-field-path="<field>(/<token>)*"
+ *
+ * Slash-joined tokens from the TOP-LEVEL field name down into the value —
+ * array indices are numeric tokens, object subfields their names — e.g.
+ * `links`, `links/3`, `links/3/badge`, `links/3/badge/text`. This mirrors the
+ * `values/…` reference-index path with the `values`/`localized/<locale>` prefix
+ * stripped: the locale axis is the studio's ambient locale switch, never part
+ * of the DOM anchor.
+ *
+ * Stamped by: the document form's top-level field rows (`detail-editor`'s
+ * `renderFieldRow` via the `fieldPath` prop below) and the object/repeater
+ * controls (`object-array-field`: item cards, table rows/cells, and nested
+ * subfield rows). Read by: `use-field-focus`'s deepest-available-anchor
+ * resolution (jump-to-field / `?field=` deep links) via the pure helpers in
+ * `components/cms/field-anchors.ts`.
+ */
+export declare const FIELD_PATH_ATTR = "data-ec-field-path";
 /** A labelled form field group: label, control, and optional hint/error. */
 export interface FieldProps {
     label: ReactNode;
@@ -8,8 +29,10 @@ export interface FieldProps {
     required?: boolean;
     children: ReactNode;
     className?: string;
+    /** Stamps the {@link FIELD_PATH_ATTR} jump-to-field anchor (EC-443, see above). */
+    fieldPath?: string;
 }
-export declare function Field({ label, htmlFor, hint, error, required, children, className }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, htmlFor, hint, error, required, children, className, fieldPath }: FieldProps): import("react").JSX.Element;
 export declare function FieldLabel({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>): import("react").JSX.Element;
 /** Native select styled to match Input — accessible and SSR-friendly. */
 export declare function Select({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>): import("react").JSX.Element;

package/dist/ui/field.js

@@ -1,8 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from 'lucide-react';
 import { cn } from '../lib/utils.js';
-export function Field({ label, htmlFor, hint, error, required, children, className }) {
-    return (_jsxs("div", { className: cn('flex flex-col gap-1.5', className), children: [_jsxs(FieldLabel, { htmlFor: htmlFor, children: [label, required ? _jsx("span", { className: "text-destructive", children: " *" }) : null] }), children, error ? (_jsx("p", { className: "text-xs font-medium text-destructive", role: "alert", children: error })) : hint ? (_jsx("p", { className: "text-xs text-muted-foreground", children: hint })) : null] }));
+/**
+ * EC-443 — THE nested-field anchor convention (one convention, used by both the
+ * stamping and the lookup — do not invent a second):
+ *
+ *   data-ec-field-path="<field>(/<token>)*"
+ *
+ * Slash-joined tokens from the TOP-LEVEL field name down into the value —
+ * array indices are numeric tokens, object subfields their names — e.g.
+ * `links`, `links/3`, `links/3/badge`, `links/3/badge/text`. This mirrors the
+ * `values/…` reference-index path with the `values`/`localized/<locale>` prefix
+ * stripped: the locale axis is the studio's ambient locale switch, never part
+ * of the DOM anchor.
+ *
+ * Stamped by: the document form's top-level field rows (`detail-editor`'s
+ * `renderFieldRow` via the `fieldPath` prop below) and the object/repeater
+ * controls (`object-array-field`: item cards, table rows/cells, and nested
+ * subfield rows). Read by: `use-field-focus`'s deepest-available-anchor
+ * resolution (jump-to-field / `?field=` deep links) via the pure helpers in
+ * `components/cms/field-anchors.ts`.
+ */
+export const FIELD_PATH_ATTR = 'data-ec-field-path';
+export function Field({ label, htmlFor, hint, error, required, children, className, fieldPath }) {
+    return (_jsxs("div", { className: cn('flex flex-col gap-1.5', className), ...(fieldPath !== undefined ? { [FIELD_PATH_ATTR]: fieldPath } : {}), children: [_jsxs(FieldLabel, { htmlFor: htmlFor, children: [label, required ? _jsx("span", { className: "text-destructive", children: " *" }) : null] }), children, error ? (_jsx("p", { className: "text-xs font-medium text-destructive", role: "alert", children: error })) : hint ? (_jsx("p", { className: "text-xs text-muted-foreground", children: hint })) : null] }));
 }
 export function FieldLabel({ className, ...props }) {
     return (_jsx("label", { className: cn('text-xs font-medium text-foreground/90', className), ...props }));

package/dist/ui/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/ui/field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAajC,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAc;IAC9F,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,aACpD,MAAC,UAAU,IAAC,OAAO,EAAE,OAAO,aACzB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,kBAAkB,mBAAU,CAAC,CAAC,CAAC,IAAI,IACpD,EACZ,QAAQ,EACR,KAAK,CAAC,CAAC,CAAC,CACP,YAAG,SAAS,EAAC,sCAAsC,EAAC,IAAI,EAAC,OAAO,YAC7D,KAAK,GACJ,CACL,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,YAAG,SAAS,EAAC,+BAA+B,YAAE,IAAI,GAAK,CACxD,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyC;IACvF,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,KAC9D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2C;IAC/F,OAAO,CACL,eAAK,SAAS,EAAC,UAAU,aACvB,iBACE,SAAS,EAAE,EAAE,CACX,8IAA8I,EAC9I,wFAAwF,EACxF,iDAAiD,EACjD,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACF,EACT,KAAC,WAAW,IAAC,SAAS,EAAC,gGAAgG,GAAG,IACtH,CACP,CAAA;AACH,CAAC","sourcesContent":["import { ChevronDown } from 'lucide-react'\nimport type { LabelHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react'\nimport { cn } from '../lib/utils'\n\n/** A labelled form field group: label, control, and optional hint/error. */\nexport interface FieldProps {\n  label: ReactNode\n  htmlFor?: string\n  hint?: ReactNode\n  error?: ReactNode\n  required?: boolean\n  children: ReactNode\n  className?: string\n}\n\nexport function Field({ label, htmlFor, hint, error, required, children, className }: FieldProps) {\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      <FieldLabel htmlFor={htmlFor}>\n        {label}\n        {required ? <span className=\"text-destructive\"> *</span> : null}\n      </FieldLabel>\n      {children}\n      {error ? (\n        <p className=\"text-xs font-medium text-destructive\" role=\"alert\">\n          {error}\n        </p>\n      ) : hint ? (\n        <p className=\"text-xs text-muted-foreground\">{hint}</p>\n      ) : null}\n    </div>\n  )\n}\n\nexport function FieldLabel({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {\n  return (\n    <label\n      className={cn('text-xs font-medium text-foreground/90', className)}\n      {...props}\n    />\n  )\n}\n\n/** Native select styled to match Input — accessible and SSR-friendly. */\nexport function Select({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>) {\n  return (\n    <div className=\"relative\">\n      <select\n        className={cn(\n          'flex h-8 w-full appearance-none rounded-md border border-input bg-background pl-2.5 pr-8 text-sm text-foreground shadow-sm transition-colors',\n          'focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </select>\n      <ChevronDown className=\"pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/ui/field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAEjC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,oBAAoB,CAAA;AAenD,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAc;IACzG,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,aAErE,MAAC,UAAU,IAAC,OAAO,EAAE,OAAO,aACzB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,kBAAkB,mBAAU,CAAC,CAAC,CAAC,IAAI,IACpD,EACZ,QAAQ,EACR,KAAK,CAAC,CAAC,CAAC,CACP,YAAG,SAAS,EAAC,sCAAsC,EAAC,IAAI,EAAC,OAAO,YAC7D,KAAK,GACJ,CACL,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,YAAG,SAAS,EAAC,+BAA+B,YAAE,IAAI,GAAK,CACxD,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyC;IACvF,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,KAC9D,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA2C;IAC/F,OAAO,CACL,eAAK,SAAS,EAAC,UAAU,aACvB,iBACE,SAAS,EAAE,EAAE,CACX,8IAA8I,EAC9I,wFAAwF,EACxF,iDAAiD,EACjD,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACF,EACT,KAAC,WAAW,IAAC,SAAS,EAAC,gGAAgG,GAAG,IACtH,CACP,CAAA;AACH,CAAC","sourcesContent":["import { ChevronDown } from 'lucide-react'\nimport type { LabelHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react'\nimport { cn } from '../lib/utils'\n\n/**\n * EC-443 — THE nested-field anchor convention (one convention, used by both the\n * stamping and the lookup — do not invent a second):\n *\n *   data-ec-field-path=\"<field>(/<token>)*\"\n *\n * Slash-joined tokens from the TOP-LEVEL field name down into the value —\n * array indices are numeric tokens, object subfields their names — e.g.\n * `links`, `links/3`, `links/3/badge`, `links/3/badge/text`. This mirrors the\n * `values/…` reference-index path with the `values`/`localized/<locale>` prefix\n * stripped: the locale axis is the studio's ambient locale switch, never part\n * of the DOM anchor.\n *\n * Stamped by: the document form's top-level field rows (`detail-editor`'s\n * `renderFieldRow` via the `fieldPath` prop below) and the object/repeater\n * controls (`object-array-field`: item cards, table rows/cells, and nested\n * subfield rows). Read by: `use-field-focus`'s deepest-available-anchor\n * resolution (jump-to-field / `?field=` deep links) via the pure helpers in\n * `components/cms/field-anchors.ts`.\n */\nexport const FIELD_PATH_ATTR = 'data-ec-field-path'\n\n/** A labelled form field group: label, control, and optional hint/error. */\nexport interface FieldProps {\n  label: ReactNode\n  htmlFor?: string\n  hint?: ReactNode\n  error?: ReactNode\n  required?: boolean\n  children: ReactNode\n  className?: string\n  /** Stamps the {@link FIELD_PATH_ATTR} jump-to-field anchor (EC-443, see above). */\n  fieldPath?: string\n}\n\nexport function Field({ label, htmlFor, hint, error, required, children, className, fieldPath }: FieldProps) {\n  return (\n    <div\n      className={cn('flex flex-col gap-1.5', className)}\n      {...(fieldPath !== undefined ? { [FIELD_PATH_ATTR]: fieldPath } : {})}\n    >\n      <FieldLabel htmlFor={htmlFor}>\n        {label}\n        {required ? <span className=\"text-destructive\"> *</span> : null}\n      </FieldLabel>\n      {children}\n      {error ? (\n        <p className=\"text-xs font-medium text-destructive\" role=\"alert\">\n          {error}\n        </p>\n      ) : hint ? (\n        <p className=\"text-xs text-muted-foreground\">{hint}</p>\n      ) : null}\n    </div>\n  )\n}\n\nexport function FieldLabel({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {\n  return (\n    <label\n      className={cn('text-xs font-medium text-foreground/90', className)}\n      {...props}\n    />\n  )\n}\n\n/** Native select styled to match Input — accessible and SSR-friendly. */\nexport function Select({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>) {\n  return (\n    <div className=\"relative\">\n      <select\n        className={cn(\n          'flex h-8 w-full appearance-none rounded-md border border-input bg-background pl-2.5 pr-8 text-sm text-foreground shadow-sm transition-colors',\n          'focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </select>\n      <ChevronDown className=\"pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n    </div>\n  )\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/studio",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "private": false,
   "description": "The Elytra studio engine (UI + lib + routes + data-only Convex schema) as an importable package. Extraction staged in EXTRACTION.md (EC-223); Stages 1-2 = UI primitives + router-free lib leaves.",
   "license": "MIT",
@@ -32,10 +32,6 @@
       "types": "./dist/components/builder/canvas-stylesheet.d.ts",
       "default": "./dist/components/builder/canvas-stylesheet.js"
     },
-    "./components/sections": {
-      "types": "./dist/components/sections.d.ts",
-      "default": "./dist/components/sections.js"
-    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "default": "./dist/components/*.js"
@@ -108,6 +104,14 @@
       "types": "./dist/lib/*.d.ts",
       "default": "./dist/lib/*.js"
     },
+    "./previews/enumerate": {
+      "types": "./dist/previews/enumerate.d.ts",
+      "default": "./dist/previews/enumerate.js"
+    },
+    "./previews/harness": {
+      "types": "./dist/previews/harness.d.ts",
+      "default": "./dist/previews/harness.js"
+    },
     "./convex/*": "./convex/*.ts"
   },
   "files": [
@@ -146,7 +150,7 @@
     "lucide-react": "^1.23.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3",
-    "@elytracms/core": "^0.0.70"
+    "@elytracms/core": "^0.0.72"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",