@braedonsaunders/appkit-forms 0.2.2

package/README.md

@@ -0,0 +1,74 @@
+# @braedonsaunders/appkit-forms
+
+Production form design and filling for AppKit applications.
+The package is optional and uses `@braedonsaunders/appkit-forms-core` as its portable schema and
+validation contract.
+
+## Production runtime
+
+`ProductionFormRenderer` is the source-parity fill surface. It includes:
+
+- revision- and sequence-safe draft autosave, lazy draft creation, unload
+  beacons, inline field saves, resume state, and conflict handling;
+- guided workflow steps, client and server validation, formulas, defaults,
+  conditional logic, read-only records, and submission handling;
+- responsive grid, columns, and free-positioned canvas layouts;
+- repeating sections and line tables, matrices, ratings, risk controls,
+  attestations, signatures, sketches, rich text, address and hierarchy fields;
+- tenant data queries and aggregates, entity-attribute refresh, file/photo
+  upload, photo annotation, optional analysis, QR scanning, and camera input.
+
+The runtime never reaches into an application's database, authorization layer,
+storage, AI provider, or router. Supply those capabilities through
+`ProductionFormRuntimeAdapter` and render through
+`ProductionFormRuntimeProvider`. A database-free memory adapter is a valid
+deployment; a production application can bind the same contract to RLS-scoped
+services without changing the form component.
+
+```tsx
+import { ProductionFormRenderer } from '@braedonsaunders/appkit-forms'
+import '@braedonsaunders/appkit-forms/styles.css'
+
+<ProductionFormRenderer adapter={adapter} {...input} />
+```
+
+`input` carries the source-shaped template, sites, people, entity data, current
+user, optional resumed response, and application-owned record/review links.
+The built-in English copy catalogue is complete; pass `translateGenerated` to
+the renderer to bind generated copy IDs to another catalogue.
+
+## Production designer
+
+`ProductionFormDesigner` is the complete source authoring workspace. It ships
+the production 1/3–2/3 editor composition with overview, field palette,
+stacked and free-canvas layouts, tabs, sign-off steps, record behaviour,
+configurable record lists, manual record actions, assignments, access control,
+preview, immutable publishing, localized content, and the full properties
+inspector. `formFlowProfile` and `lintFormFlowGraph` bind the same form schema
+to `@braedonsaunders/appkit-workflows/react` without duplicating automation rules.
+
+Application-owned persistence, routing, authorization, workflow storage, data
+sources, and optional AI assistance enter through typed adapters and render
+seams. The database-free playground uses browser-local adapters; a production
+application can bind the same component to tenant-scoped services.
+
+```tsx
+import { ProductionFormDesigner } from '@braedonsaunders/appkit-forms'
+
+<ProductionFormDesigner
+  adapter={designerAdapter}
+  recordActionAdapter={recordActionAdapter}
+  renderFlows={(input) => <FlowsCanvas {...toWorkflowProps(input)} />}
+  {...template}
+/>
+```
+
+## Controlled surfaces
+
+`FormRenderer` is a smaller controlled renderer for applications that want to
+own every value and field callback. It is not the production-parity renderer.
+
+`FormDesigner`, `LogicBuilder`, inspectors, canvas controls, and record/workflow
+configuration remain available as smaller controlled compositions when an
+application does not need the production shell. Do not substitute the smaller
+`FormDesigner` for `ProductionFormDesigner` in a parity cutover.

package/canvas-editor.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from 'react';
+import { type CanvasItem, type FieldType, type FormSection } from '@braedonsaunders/appkit-forms-core';
+import type { AppLocale } from '@braedonsaunders/appkit-i18n';
+export declare function defaultBox(type: FieldType): {
+    w: number;
+    h: number;
+};
+export declare function CanvasEditor({ section, locale, defaultLocale, selectedFieldId, dragTypeRef, onLayout, onAddWidget, onSelect, onDelete, }: {
+    section: FormSection;
+    locale: AppLocale;
+    defaultLocale: AppLocale;
+    selectedFieldId: string | null;
+    dragTypeRef: RefObject<FieldType | null>;
+    onLayout: (items: CanvasItem[]) => void;
+    onAddWidget: (type: FieldType, box: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }) => void;
+    onSelect: (fieldId: string) => void;
+    onDelete: (fieldId: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=canvas-editor.d.ts.map

package/canvas-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-editor.d.ts","sourceRoot":"","sources":["../src/canvas-editor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBvD,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,oCAAoC,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAsB7D,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAGpE;AAoBD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,aAAa,EACb,eAAe,EACf,WAAW,EACX,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,WAAW,CAAA;IACpB,MAAM,EAAE,SAAS,CAAA;IACjB,aAAa,EAAE,SAAS,CAAA;IACxB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAE9B,WAAW,EAAE,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAA;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3F,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC,+BAkIA"}

package/canvas-editor.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GeneratedText, useGeneratedTranslations, GeneratedValue, useGeneratedValueTranslations, } from './generated-copy.js';
+// The Appsmith / WordPress-style visual canvas for ONE section. Drag widgets
+// from the palette onto a grid, move + resize them, click to select (the normal
+// Field properties drawer opens), delete. Desktop-only authoring — the END
+// PRODUCT renders mobile-first (see _lib/canvas.ts). Uses react-grid-layout v2,
+// which needs an explicit width, so we self-measure with a ResizeObserver.
+import { useMemo, useRef } from 'react';
+// react-grid-layout v2 (current API): config-object props + the
+// useContainerWidth hook (the modern WidthProvider replacement).
+import { GridLayout, noCompactor, useContainerWidth, } from 'react-grid-layout';
+// Free-form placement: no auto-compaction (elements stay exactly where you drop
+// them), but collisions are BLOCKED rather than pushing neighbours away or
+// allowing overlap. `noCompactor` alone leaves `preventCollision` off, so RGL
+// shoves items far on collision (and can leave overlaps) — preventCollision
+// turns "push neighbour away" into "snap back", fixing both.
+const FREE_COMPACTOR = { ...noCompactor, preventCollision: true };
+import { GripVertical, Trash2 } from 'lucide-react';
+import { FIELD_TYPES, } from '@braedonsaunders/appkit-forms-core';
+import { ElementPreview } from './element-preview.js';
+// Curated widget palette with sensible default boxes (in grid units, 12 cols).
+const PALETTE = [
+    { type: 'heading', w: 12, h: 1 },
+    { type: 'paragraph', w: 12, h: 2 },
+    { type: 'divider', w: 12, h: 1 },
+    { type: 'text', w: 4, h: 2 },
+    { type: 'long_text', w: 6, h: 3 },
+    { type: 'number', w: 3, h: 2 },
+    { type: 'date', w: 3, h: 2 },
+    { type: 'select', w: 4, h: 2 },
+    { type: 'radio', w: 4, h: 3 },
+    { type: 'checkbox_group', w: 4, h: 3 },
+    { type: 'yes_no_comment', w: 6, h: 3 },
+    { type: 'rating', w: 3, h: 2 },
+    { type: 'photo', w: 4, h: 4 },
+    { type: 'signature', w: 6, h: 3 },
+    { type: 'table', w: 12, h: 5 },
+];
+export function defaultBox(type) {
+    const p = PALETTE.find((x) => x.type === type);
+    return { w: p?.w ?? 4, h: p?.h ?? 3 };
+}
+function toLayout(items) {
+    return items.map((it) => ({ i: it.i, x: it.x, y: it.y, w: it.w, h: it.h }));
+}
+function fromLayout(layout) {
+    return layout
+        .filter((l) => l.i !== '__dropping__')
+        .map((l) => ({ i: l.i, x: l.x, y: l.y, w: l.w, h: l.h }));
+}
+function sameItems(a, b) {
+    if (a.length !== b.length)
+        return false;
+    const m = new Map(a.map((it) => [it.i, it]));
+    for (const it of b) {
+        const o = m.get(it.i);
+        if (!o || o.x !== it.x || o.y !== it.y || o.w !== it.w || o.h !== it.h)
+            return false;
+    }
+    return true;
+}
+export function CanvasEditor({ section, locale, defaultLocale, selectedFieldId, dragTypeRef, onLayout, onAddWidget, onSelect, onDelete, }) {
+    const tGeneratedValue = useGeneratedValueTranslations();
+    const tGenerated = useGeneratedTranslations();
+    const canvas = section.canvas;
+    const { width, mounted, containerRef } = useContainerWidth({ measureBeforeMount: true });
+    // Tells a real "select" click apart from the click event that fires at the END
+    // of a drag/resize: a drag's release click lands far from where the press
+    // began, so only a near-stationary click selects. A pure distance check can
+    // never block a genuine (stationary) click, so selection always works.
+    const pressRef = useRef(null);
+    const fieldById = useMemo(() => new Map(section.fields.map((f) => [f.id, f])), [section.fields]);
+    // Only render items whose field still exists.
+    const items = useMemo(() => canvas.items.filter((it) => fieldById.has(it.i)), [canvas.items, fieldById]);
+    const layout = useMemo(() => toLayout(items), [items]);
+    return (_jsxs("div", { ref: containerRef, className: "relative min-h-[240px] rounded-md border border-border", style: {
+            backgroundImage: 'linear-gradient(to right, rgb(var(--ch-border-subtle)) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--ch-border-subtle)) 1px, transparent 1px)',
+            backgroundSize: `${width > 0 ? width / canvas.cols : 40}px ${canvas.rowHeight}px`,
+        }, children: [_jsx(GeneratedValue, { value: items.length === 0 ? (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "rounded-md bg-white/80 px-3 py-1.5 text-xs text-fg-subtle", children: _jsx(GeneratedText, { id: "m_16c009976e0b86" }) }) })) : null }), _jsx(GeneratedValue, { value: mounted && width > 0 ? (_jsx(GridLayout, { width: width, layout: layout, gridConfig: { cols: canvas.cols, rowHeight: canvas.rowHeight, margin: [8, 8] }, dragConfig: { handle: '.cv-drag' }, dropConfig: {
+                        enabled: true,
+                        defaultItem: { w: 4, h: 3 },
+                        onDragOver: () => ({ w: 4, h: 3 }),
+                    }, compactor: FREE_COMPACTOR, droppingItem: { i: '__dropping__', x: 0, y: 0, w: 4, h: 3 }, onDrop: (_l, item) => {
+                        const t = dragTypeRef.current;
+                        if (t && item)
+                            onAddWidget(t, { x: item.x, y: item.y, ...defaultBox(t) });
+                        dragTypeRef.current = null;
+                    }, onLayoutChange: (l) => {
+                        const next = fromLayout(l);
+                        if (!sameItems(items, next))
+                            onLayout(next);
+                    }, children: _jsx(GeneratedValue, { value: items.map((it) => {
+                            const f = fieldById.get(it.i);
+                            const sel = f.id === selectedFieldId;
+                            return (_jsxs("div", { onPointerDown: (e) => {
+                                    pressRef.current = { x: e.clientX, y: e.clientY };
+                                }, onClick: (e) => {
+                                    const d = pressRef.current;
+                                    pressRef.current = null;
+                                    // The click that ends a drag/resize lands far from the press —
+                                    // only a near-stationary click selects, so moving an element no
+                                    // longer opens the properties panel.
+                                    if (d && Math.hypot(e.clientX - d.x, e.clientY - d.y) > 5)
+                                        return;
+                                    onSelect(f.id);
+                                }, title: tGeneratedValue(FIELD_TYPES[f.type]?.label ?? f.type), className: `group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg border bg-white shadow-sm transition ${sel
+                                    ? 'border-primary ring-1 ring-ring'
+                                    : 'border-border hover:border-border-strong hover:shadow'}`, children: [_jsxs("div", { className: "absolute top-1 right-1 z-10 flex items-center gap-0.5 opacity-0 transition group-hover:opacity-100", children: [_jsx("span", { className: "cv-drag flex h-5 w-5 cursor-grab items-center justify-center rounded bg-white/90 text-fg-subtle shadow-sm ring-1 ring-ring hover:text-fg-muted active:cursor-grabbing", title: tGenerated('m_17cb3d26a75938'), children: _jsx(GripVertical, { size: 11 }) }), _jsx("button", { type: "button", title: tGenerated('m_0e6eb1d4f48e48'), onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    onDelete(f.id);
+                                                }, className: "flex h-5 w-5 items-center justify-center rounded bg-white/90 text-fg-subtle shadow-sm ring-1 ring-ring hover:text-danger", children: _jsx(Trash2, { size: 11 }) })] }), _jsx("div", { className: "app-scroll min-h-0 flex-1 overflow-auto p-2.5", children: _jsx(ElementPreview, { field: f, locale: locale, defaultLocale: defaultLocale, compact: true }) })] }, it.i));
+                        }) }) })) : null })] }));
+}
+//# sourceMappingURL=canvas-editor.js.map

package/canvas-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-editor.js","sourceRoot":"","sources":["../src/canvas-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport {\n  GeneratedText,\n  useGeneratedTranslations,\n  GeneratedValue,\n  useGeneratedValueTranslations,\n} from './generated-copy'\n\n// The Appsmith / WordPress-style visual canvas for ONE section. Drag widgets\n// from the palette onto a grid, move + resize them, click to select (the normal\n// Field properties drawer opens), delete. Desktop-only authoring — the END\n// PRODUCT renders mobile-first (see _lib/canvas.ts). Uses react-grid-layout v2,\n// which needs an explicit width, so we self-measure with a ResizeObserver.\n\nimport { useMemo, useRef, type RefObject } from 'react'\n// react-grid-layout v2 (current API): config-object props + the\n// useContainerWidth hook (the modern WidthProvider replacement).\nimport {\n  GridLayout,\n  noCompactor,\n  useContainerWidth,\n  type Layout,\n  type LayoutItem,\n} from 'react-grid-layout'\n// Free-form placement: no auto-compaction (elements stay exactly where you drop\n// them), but collisions are BLOCKED rather than pushing neighbours away or\n// allowing overlap. `noCompactor` alone leaves `preventCollision` off, so RGL\n// shoves items far on collision (and can leave overlaps) — preventCollision\n// turns \"push neighbour away\" into \"snap back\", fixing both.\nconst FREE_COMPACTOR = { ...noCompactor, preventCollision: true }\nimport { GripVertical, Trash2 } from 'lucide-react'\nimport {\n  FIELD_TYPES,\n  type CanvasItem,\n  type FieldType,\n  type FormSection,\n} from '@braedonsaunders/appkit-forms-core'\nimport type { AppLocale } from '@braedonsaunders/appkit-i18n'\nimport { ElementPreview } from './element-preview'\n\n// Curated widget palette with sensible default boxes (in grid units, 12 cols).\nconst PALETTE: { type: FieldType; w: number; h: number }[] = [\n  { type: 'heading', w: 12, h: 1 },\n  { type: 'paragraph', w: 12, h: 2 },\n  { type: 'divider', w: 12, h: 1 },\n  { type: 'text', w: 4, h: 2 },\n  { type: 'long_text', w: 6, h: 3 },\n  { type: 'number', w: 3, h: 2 },\n  { type: 'date', w: 3, h: 2 },\n  { type: 'select', w: 4, h: 2 },\n  { type: 'radio', w: 4, h: 3 },\n  { type: 'checkbox_group', w: 4, h: 3 },\n  { type: 'yes_no_comment', w: 6, h: 3 },\n  { type: 'rating', w: 3, h: 2 },\n  { type: 'photo', w: 4, h: 4 },\n  { type: 'signature', w: 6, h: 3 },\n  { type: 'table', w: 12, h: 5 },\n]\n\nexport function defaultBox(type: FieldType): { w: number; h: number } {\n  const p = PALETTE.find((x) => x.type === type)\n  return { w: p?.w ?? 4, h: p?.h ?? 3 }\n}\n\nfunction toLayout(items: CanvasItem[]): LayoutItem[] {\n  return items.map((it) => ({ i: it.i, x: it.x, y: it.y, w: it.w, h: it.h }))\n}\nfunction fromLayout(layout: Layout): CanvasItem[] {\n  return layout\n    .filter((l) => l.i !== '__dropping__')\n    .map((l) => ({ i: l.i, x: l.x, y: l.y, w: l.w, h: l.h }))\n}\nfunction sameItems(a: CanvasItem[], b: CanvasItem[]): boolean {\n  if (a.length !== b.length) return false\n  const m = new Map(a.map((it) => [it.i, it]))\n  for (const it of b) {\n    const o = m.get(it.i)\n    if (!o || o.x !== it.x || o.y !== it.y || o.w !== it.w || o.h !== it.h) return false\n  }\n  return true\n}\n\nexport function CanvasEditor({\n  section,\n  locale,\n  defaultLocale,\n  selectedFieldId,\n  dragTypeRef,\n  onLayout,\n  onAddWidget,\n  onSelect,\n  onDelete,\n}: {\n  section: FormSection\n  locale: AppLocale\n  defaultLocale: AppLocale\n  selectedFieldId: string | null\n  // The element type currently being dragged from the left palette.\n  dragTypeRef: RefObject<FieldType | null>\n  onLayout: (items: CanvasItem[]) => void\n  onAddWidget: (type: FieldType, box: { x: number; y: number; w: number; h: number }) => void\n  onSelect: (fieldId: string) => void\n  onDelete: (fieldId: string) => void\n}) {\n  const tGeneratedValue = useGeneratedValueTranslations()\n  const tGenerated = useGeneratedTranslations()\n  const canvas = section.canvas!\n  const { width, mounted, containerRef } = useContainerWidth({ measureBeforeMount: true })\n  // Tells a real \"select\" click apart from the click event that fires at the END\n  // of a drag/resize: a drag's release click lands far from where the press\n  // began, so only a near-stationary click selects. A pure distance check can\n  // never block a genuine (stationary) click, so selection always works.\n  const pressRef = useRef<{ x: number; y: number } | null>(null)\n\n  const fieldById = useMemo(() => new Map(section.fields.map((f) => [f.id, f])), [section.fields])\n  // Only render items whose field still exists.\n  const items = useMemo(\n    () => canvas.items.filter((it) => fieldById.has(it.i)),\n    [canvas.items, fieldById],\n  )\n  const layout = useMemo(() => toLayout(items), [items])\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"relative min-h-[240px] rounded-md border border-border\"\n      style={{\n        backgroundImage:\n          'linear-gradient(to right, rgb(var(--ch-border-subtle)) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--ch-border-subtle)) 1px, transparent 1px)',\n        backgroundSize: `${width > 0 ? width / canvas.cols : 40}px ${canvas.rowHeight}px`,\n      }}\n    >\n      <GeneratedValue\n        value={\n          items.length === 0 ? (\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n              <span className=\"rounded-md bg-white/80 px-3 py-1.5 text-xs text-fg-subtle\">\n                <GeneratedText id=\"m_16c009976e0b86\" />\n              </span>\n            </div>\n          ) : null\n        }\n      />\n      <GeneratedValue\n        value={\n          mounted && width > 0 ? (\n            <GridLayout\n              width={width}\n              layout={layout}\n              gridConfig={{ cols: canvas.cols, rowHeight: canvas.rowHeight, margin: [8, 8] }}\n              dragConfig={{ handle: '.cv-drag' }}\n              dropConfig={{\n                enabled: true,\n                defaultItem: { w: 4, h: 3 },\n                onDragOver: () => ({ w: 4, h: 3 }),\n              }}\n              compactor={FREE_COMPACTOR}\n              droppingItem={{ i: '__dropping__', x: 0, y: 0, w: 4, h: 3 }}\n              onDrop={(_l, item) => {\n                const t = dragTypeRef.current\n                if (t && item) onAddWidget(t, { x: item.x, y: item.y, ...defaultBox(t) })\n                dragTypeRef.current = null\n              }}\n              onLayoutChange={(l) => {\n                const next = fromLayout(l)\n                if (!sameItems(items, next)) onLayout(next)\n              }}\n            >\n              <GeneratedValue\n                value={items.map((it) => {\n                  const f = fieldById.get(it.i)!\n                  const sel = f.id === selectedFieldId\n                  return (\n                    <div\n                      key={it.i}\n                      onPointerDown={(e) => {\n                        pressRef.current = { x: e.clientX, y: e.clientY }\n                      }}\n                      onClick={(e) => {\n                        const d = pressRef.current\n                        pressRef.current = null\n                        // The click that ends a drag/resize lands far from the press —\n                        // only a near-stationary click selects, so moving an element no\n                        // longer opens the properties panel.\n                        if (d && Math.hypot(e.clientX - d.x, e.clientY - d.y) > 5) return\n                        onSelect(f.id)\n                      }}\n                      title={tGeneratedValue(FIELD_TYPES[f.type]?.label ?? f.type)}\n                      className={`group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg border bg-white shadow-sm transition ${\n                        sel\n                          ? 'border-primary ring-1 ring-ring'\n                          : 'border-border hover:border-border-strong hover:shadow'\n                      }`}\n                    >\n                      {/* Hover toolbar: drag handle + remove. The card body is a live\n                      preview of the element as it ships. */}\n                      <div className=\"absolute top-1 right-1 z-10 flex items-center gap-0.5 opacity-0 transition group-hover:opacity-100\">\n                        <span\n                          className=\"cv-drag flex h-5 w-5 cursor-grab items-center justify-center rounded bg-white/90 text-fg-subtle shadow-sm ring-1 ring-ring hover:text-fg-muted active:cursor-grabbing\"\n                          title={tGenerated('m_17cb3d26a75938')}\n                        >\n                          <GripVertical size={11} />\n                        </span>\n                        <button\n                          type=\"button\"\n                          title={tGenerated('m_0e6eb1d4f48e48')}\n                          onClick={(e) => {\n                            e.stopPropagation()\n                            onDelete(f.id)\n                          }}\n                          className=\"flex h-5 w-5 items-center justify-center rounded bg-white/90 text-fg-subtle shadow-sm ring-1 ring-ring hover:text-danger\"\n                        >\n                          <Trash2 size={11} />\n                        </button>\n                      </div>\n                      <div className=\"app-scroll min-h-0 flex-1 overflow-auto p-2.5\">\n                        <ElementPreview\n                          field={f}\n                          locale={locale}\n                          defaultLocale={defaultLocale}\n                          compact\n                        />\n                      </div>\n                    </div>\n                  )\n                })}\n              />\n            </GridLayout>\n          ) : null\n        }\n      />\n    </div>\n  )\n}\n"]}

package/canvas-runtime.d.ts

@@ -0,0 +1,12 @@
+import type { CanvasItem } from '@braedonsaunders/appkit-forms-core';
+export declare function gridClass(sectionId: string): string;
+export declare function resolveCanvas(fieldIds: string[], items: CanvasItem[], cols: number): {
+    order: string[];
+    byId: Map<string, CanvasItem>;
+};
+export declare function columnsCss(cls: string, cols: number, spans: {
+    id: string;
+    span: number;
+}[]): string;
+export declare function canvasCss(cls: string, cols: number, rowHeight: number, byId: Map<string, CanvasItem>): string;
+//# sourceMappingURL=canvas-runtime.d.ts.map

package/canvas-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-runtime.d.ts","sourceRoot":"","sources":["../src/canvas-runtime.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAA;AAIpE,wBAAgB,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAEnD;AAKD,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAAE,EAClB,KAAK,EAAE,UAAU,EAAE,EACnB,IAAI,EAAE,MAAM,GACX;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;CAAE,CAgBpD;AAKD,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,GACpC,MAAM,CAQR;AAGD,wBAAgB,SAAS,CACvB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,GAC5B,MAAM,CAaR"}

package/canvas-runtime.js

@@ -0,0 +1,54 @@
+// Shared helpers for rendering a section's free-form canvas layout in the END
+// PRODUCT (filler + viewer + PDF). MOBILE-FIRST: the default (no media query) is
+// a single stacked column in (y,x) reading order; a scoped @media(min-width:640px)
+// block applies the authored positioned grid. This keeps phones usable while
+// desktops get the exact Appsmith/WordPress-style layout.
+// Deterministic, collision-safe class derived from the section id (no useId, so
+// it works identically in server + client render).
+export function gridClass(sectionId) {
+    return 'cv_' + sectionId.replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+// Resolve every field to a grid box, auto-placing any field that lacks one
+// (appended below, sensible default size). Returns the mobile reading order +
+// the box lookup used to emit desktop placements.
+export function resolveCanvas(fieldIds, items, cols) {
+    const byId = new Map();
+    for (const it of items)
+        if (fieldIds.includes(it.i))
+            byId.set(it.i, it);
+    let nextY = items.reduce((m, it) => Math.max(m, it.y + it.h), 0);
+    for (const id of fieldIds) {
+        if (!byId.has(id)) {
+            byId.set(id, { i: id, x: 0, y: nextY, w: Math.min(cols, 6) || 6, h: 2 });
+            nextY += 2;
+        }
+    }
+    const order = [...fieldIds].sort((a, b) => {
+        const A = byId.get(a);
+        const B = byId.get(b);
+        return A.y - B.y || A.x - B.x;
+    });
+    return { order, byId };
+}
+// Scoped CSS for the simpler `section.layout.columns` grid: mobile single
+// column; desktop N columns with per-field colSpan. Keeps the columns feature
+// mobile-friendly too.
+export function columnsCss(cls, cols, spans) {
+    const spanCss = spans
+        .map((s) => `.${cls}>[data-cs="${s.id}"]{grid-column:span ${Math.min(s.span, cols)}}`)
+        .join('');
+    return (`.${cls}{display:grid;grid-template-columns:1fr;gap:16px}` +
+        `@media(min-width:640px){.${cls}{grid-template-columns:repeat(${cols},minmax(0,1fr))}${spanCss}}`);
+}
+// Scoped CSS: mobile single column; desktop positioned grid.
+export function canvasCss(cls, cols, rowHeight, byId) {
+    const placements = [];
+    for (const it of byId.values()) {
+        placements.push(`.${cls}>[data-ci="${it.i}"]{grid-column:${it.x + 1}/span ${it.w};grid-row:${it.y + 1}/span ${it.h};min-width:0}`);
+    }
+    // grid-auto-rows uses minmax(rowHeight, auto) so cells GROW to fit content
+    // (tall inputs never clip) while still honoring the authored row positions.
+    return (`.${cls}{display:grid;grid-template-columns:1fr;gap:12px}` +
+        `@media(min-width:640px){.${cls}{grid-template-columns:repeat(${cols},minmax(0,1fr));grid-auto-rows:minmax(${rowHeight}px,auto);align-items:start}${placements.join('')}}`);
+}
+//# sourceMappingURL=canvas-runtime.js.map

package/canvas-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-runtime.js","sourceRoot":"","sources":["../src/canvas-runtime.ts"],"names":[],"mappings":"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","sourcesContent":["// Shared helpers for rendering a section's free-form canvas layout in the END\n// PRODUCT (filler + viewer + PDF). MOBILE-FIRST: the default (no media query) is\n// a single stacked column in (y,x) reading order; a scoped @media(min-width:640px)\n// block applies the authored positioned grid. This keeps phones usable while\n// desktops get the exact Appsmith/WordPress-style layout.\n\nimport type { CanvasItem } from '@braedonsaunders/appkit-forms-core'\n\n// Deterministic, collision-safe class derived from the section id (no useId, so\n// it works identically in server + client render).\nexport function gridClass(sectionId: string): string {\n  return 'cv_' + sectionId.replace(/[^a-zA-Z0-9_-]/g, '_')\n}\n\n// Resolve every field to a grid box, auto-placing any field that lacks one\n// (appended below, sensible default size). Returns the mobile reading order +\n// the box lookup used to emit desktop placements.\nexport function resolveCanvas(\n  fieldIds: string[],\n  items: CanvasItem[],\n  cols: number,\n): { order: string[]; byId: Map<string, CanvasItem> } {\n  const byId = new Map<string, CanvasItem>()\n  for (const it of items) if (fieldIds.includes(it.i)) byId.set(it.i, it)\n  let nextY = items.reduce((m, it) => Math.max(m, it.y + it.h), 0)\n  for (const id of fieldIds) {\n    if (!byId.has(id)) {\n      byId.set(id, { i: id, x: 0, y: nextY, w: Math.min(cols, 6) || 6, h: 2 })\n      nextY += 2\n    }\n  }\n  const order = [...fieldIds].sort((a, b) => {\n    const A = byId.get(a)!\n    const B = byId.get(b)!\n    return A.y - B.y || A.x - B.x\n  })\n  return { order, byId }\n}\n\n// Scoped CSS for the simpler `section.layout.columns` grid: mobile single\n// column; desktop N columns with per-field colSpan. Keeps the columns feature\n// mobile-friendly too.\nexport function columnsCss(\n  cls: string,\n  cols: number,\n  spans: { id: string; span: number }[],\n): string {\n  const spanCss = spans\n    .map((s) => `.${cls}>[data-cs=\"${s.id}\"]{grid-column:span ${Math.min(s.span, cols)}}`)\n    .join('')\n  return (\n    `.${cls}{display:grid;grid-template-columns:1fr;gap:16px}` +\n    `@media(min-width:640px){.${cls}{grid-template-columns:repeat(${cols},minmax(0,1fr))}${spanCss}}`\n  )\n}\n\n// Scoped CSS: mobile single column; desktop positioned grid.\nexport function canvasCss(\n  cls: string,\n  cols: number,\n  rowHeight: number,\n  byId: Map<string, CanvasItem>,\n): string {\n  const placements: string[] = []\n  for (const it of byId.values()) {\n    placements.push(\n      `.${cls}>[data-ci=\"${it.i}\"]{grid-column:${it.x + 1}/span ${it.w};grid-row:${it.y + 1}/span ${it.h};min-width:0}`,\n    )\n  }\n  // grid-auto-rows uses minmax(rowHeight, auto) so cells GROW to fit content\n  // (tall inputs never clip) while still honoring the authored row positions.\n  return (\n    `.${cls}{display:grid;grid-template-columns:1fr;gap:12px}` +\n    `@media(min-width:640px){.${cls}{grid-template-columns:repeat(${cols},minmax(0,1fr));grid-auto-rows:minmax(${rowHeight}px,auto);align-items:start}${placements.join('')}}`\n  )\n}\n"]}

package/element-preview.d.ts

@@ -0,0 +1,9 @@
+import type { FormField } from '@braedonsaunders/appkit-forms-core';
+import { type AppLocale } from '@braedonsaunders/appkit-i18n';
+export declare function ElementPreview({ field, locale, defaultLocale, compact, }: {
+    field: FormField;
+    locale: AppLocale;
+    defaultLocale: AppLocale;
+    compact?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=element-preview.d.ts.map

package/element-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-preview.d.ts","sourceRoot":"","sources":["../src/element-preview.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAA;AACnE,OAAO,EAAgB,KAAK,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAgB3E,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,MAAM,EAAE,SAAS,CAAA;IACjB,aAAa,EAAE,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,+BAqCA"}

package/element-preview.js

@@ -0,0 +1,167 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GeneratedText, useGeneratedTranslations, GeneratedValue } from './generated-copy.js';
+// A representative, read-only preview of ONE element — how it looks in the
+// shipped product. Used by the canvas blocks (WYSIWYG building) and the Preview
+// drawer. Uses the element's real label / options / config, not placeholders.
+import { AlertTriangle, BarChart3, MapPin, ScanLine, Sparkles, Star } from 'lucide-react';
+import { Input, Select, Textarea } from '@braedonsaunders/appkit-ui';
+import { localizeText } from '@braedonsaunders/appkit-i18n';
+function cfg(field) {
+    return field.config ?? {};
+}
+function optionLabels(field, locale, defaultLocale) {
+    const opts = field.validation?.options ??
+        cfg(field).options ??
+        [];
+    return opts.map((o) => localizeText(o.label, locale, o.value, defaultLocale));
+}
+export function ElementPreview({ field, locale, defaultLocale, compact = false, }) {
+    const label = localizeText(field.label, locale, field.id, defaultLocale);
+    const helpText = localizeText(field.helpText, locale, '', defaultLocale);
+    const t = field.type;
+    // Content elements ARE their content — no separate field label.
+    if (t === 'heading')
+        return (_jsx("h3", { className: "text-base font-semibold text-fg", children: _jsx(GeneratedValue, { value: label }) }));
+    if (t === 'paragraph')
+        return (_jsx("p", { className: "text-sm leading-snug text-fg-muted", children: _jsx(GeneratedValue, { value: label }) }));
+    if (t === 'divider')
+        return _jsx("hr", { className: "my-1 border-border" });
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "text-xs font-medium text-fg-muted", children: [_jsx(GeneratedValue, { value: label }), _jsx(GeneratedValue, { value: field.required ? _jsx("span", { className: "text-danger", children: " *" }) : null })] }), _jsx(ElementInput, { field: field, locale: locale, defaultLocale: defaultLocale, compact: compact }), _jsx(GeneratedValue, { value: helpText ? (_jsx("p", { className: "text-[10px] text-fg-subtle", children: _jsx(GeneratedValue, { value: helpText }) })) : null })] }));
+}
+function ElementInput({ field, locale, defaultLocale, compact, }) {
+    const tGenerated = useGeneratedTranslations();
+    const t = field.type;
+    const labels = optionLabels(field, locale, defaultLocale);
+    const choices = labels.length ? labels : ['Option A', 'Option B'];
+    switch (t) {
+        case 'long_text':
+            return _jsx(Textarea, { rows: compact ? 2 : 3, disabled: true, placeholder: "", className: "bg-white" });
+        case 'number':
+            return _jsx(Input, { type: "number", disabled: true, placeholder: "0", className: "bg-white" });
+        case 'date':
+            return _jsx(Input, { type: "date", disabled: true, className: "bg-white" });
+        case 'datetime':
+            return _jsx(Input, { type: "datetime-local", disabled: true, className: "bg-white" });
+        case 'time':
+            return _jsx(Input, { type: "time", disabled: true, className: "bg-white" });
+        case 'email':
+            return (_jsx(Input, { type: "email", disabled: true, placeholder: tGenerated('m_1b781270c0d2f5'), className: "bg-white" }));
+        case 'phone':
+            return _jsx(Input, { disabled: true, placeholder: "(555) 555-5555", className: "bg-white" });
+        case 'url':
+            return _jsx(Input, { disabled: true, placeholder: "https://", className: "bg-white" });
+        case 'select':
+        case 'customer_picker':
+        case 'site_picker':
+        case 'project_picker':
+        case 'area_picker':
+        case 'person_picker':
+        case 'multi_person_picker':
+            return (_jsx(Select, { disabled: true, className: "bg-white", children: _jsx("option", { children: labels[0] ?? 'Select…' }) }));
+        case 'radio':
+            return (_jsx("div", { className: "space-y-1", children: _jsx(GeneratedValue, { value: choices.slice(0, 4).map((l, i) => (_jsxs("label", { className: "flex items-center gap-2 text-xs text-fg-muted", children: [_jsx("input", { type: "radio", disabled: true }), " ", _jsx(GeneratedValue, { value: l })] }, i))) }) }));
+        case 'checkbox_group':
+        case 'multi_select':
+            return (_jsx("div", { className: "space-y-1", children: _jsx(GeneratedValue, { value: choices.slice(0, 4).map((l, i) => (_jsxs("label", { className: "flex items-center gap-2 text-xs text-fg-muted", children: [_jsx("input", { type: "checkbox", disabled: true }), " ", _jsx(GeneratedValue, { value: l })] }, i))) }) }));
+        case 'yes_no_comment':
+            return (_jsx("div", { className: "flex gap-2", children: _jsx(GeneratedValue, { value: ['Yes', 'No'].map((v) => (_jsx("span", { className: "rounded-md border border-border px-3 py-1 text-xs text-fg-muted", children: _jsx(GeneratedValue, { value: v }) }, v))) }) }));
+        case 'pass_fail_na':
+            return (_jsx("div", { className: "flex gap-1", children: _jsx(GeneratedValue, { value: ['PASS', 'FAIL', 'N/A'].map((v) => (_jsx("span", { className: "rounded border border-border px-2 py-1 text-[10px] text-fg-muted", children: _jsx(GeneratedValue, { value: v }) }, v))) }) }));
+        case 'traffic_light':
+            return (_jsx("div", { className: "flex gap-1.5", children: _jsx(GeneratedValue, { value: ['bg-success', 'bg-warning', 'bg-danger'].map((tone) => (_jsx("span", { className: `h-5 w-5 rounded-full ${tone}` }, tone))) }) }));
+        case 'rating':
+            return (_jsx("div", { className: "flex gap-0.5 text-warning", children: _jsx(GeneratedValue, { value: [1, 2, 3, 4, 5].map((i) => (_jsx(Star, { size: 16, fill: "currentColor", strokeWidth: 0 }, i))) }) }));
+        case 'signature':
+            return (_jsx("div", { className: "flex h-16 items-center justify-center rounded border border-dashed border-border-strong bg-bg-subtle text-xs text-fg-subtle italic", children: _jsx(GeneratedText, { id: "m_05a0e2d38bded7" }) }));
+        case 'photo':
+        case 'photo_upload':
+        case 'file':
+        case 'video':
+        case 'audio':
+            return (_jsx("div", { className: "flex h-16 items-center justify-center rounded border border-dashed border-border-strong bg-bg-subtle text-xs text-fg-subtle", children: _jsx(GeneratedText, { id: "m_10e50435ff2693" }) }));
+        case 'sketch':
+            return (_jsx("div", { className: "flex h-20 items-center justify-center rounded border border-dashed border-border-strong bg-[repeating-linear-gradient(45deg,transparent,transparent_9px,rgba(148,163,184,0.12)_9px,rgba(148,163,184,0.12)_10px)] text-xs text-fg-subtle italic", children: _jsx(GeneratedText, { id: "m_1abf555859c0a8" }) }));
+        case 'photo_ai':
+            return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "flex h-14 items-center justify-center rounded border border-dashed border-border-strong bg-bg-subtle text-xs text-fg-subtle", children: _jsx(GeneratedText, { id: "m_18010438ac7907" }) }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-info bg-info-subtle px-2 py-1 text-[11px] text-info", children: [_jsx(Sparkles, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_0fec93e95858fc" })] }), _jsxs("div", { className: "flex items-center gap-1 text-[10px] text-fg-subtle", children: [_jsx(AlertTriangle, { size: 11, className: "text-warning" }), ' ', _jsx(GeneratedText, { id: "m_0289ca8aa7b891" })] })] }));
+        case 'typed_attestation':
+            return _jsx(Input, { disabled: true, placeholder: tGenerated('m_0d0facbd71aa6a'), className: "bg-white" });
+        case 'formula':
+            return _jsx(Input, { disabled: true, value: "= computed", className: "bg-bg-subtle italic" });
+        case 'slider': {
+            const c = cfg(field);
+            const min = c.min ?? 0;
+            const max = c.max ?? 10;
+            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "range", min: min, max: max, defaultValue: (min + max) / 2, disabled: true, className: "h-2 flex-1 rounded-full bg-border accent-primary" }), _jsx("span", { className: "text-xs text-fg-subtle", children: _jsx(GeneratedValue, { value: Math.round((min + max) / 2) }) })] }));
+        }
+        case 'gps':
+            return (_jsxs("div", { className: "flex items-center gap-1.5 rounded border border-border bg-white px-2 py-1.5 text-xs text-fg-muted", children: [_jsx(MapPin, { size: 13 }), " ", _jsx(GeneratedText, { id: "m_07cd022cc38d60" })] }));
+        case 'matrix': {
+            const c = cfg(field);
+            const rows = c.rows ?? [
+                { key: 'r1', label: 'Item 1' },
+                { key: 'r2', label: 'Item 2' },
+            ];
+            const scale = c.scale ?? [
+                { value: '1', label: '1' },
+                { value: '2', label: '2' },
+                { value: '3', label: '3' },
+            ];
+            return (_jsxs("table", { className: "w-full text-[10px]", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx(GeneratedValue, { value: scale.map((s) => (_jsx("th", { className: "px-1 text-center font-normal text-fg-subtle", children: _jsx(GeneratedValue, { value: s.label }) }, s.value))) })] }) }), _jsx("tbody", { children: _jsx(GeneratedValue, { value: rows.slice(0, 3).map((r) => (_jsxs("tr", { children: [_jsx("td", { className: "pr-1 text-fg-muted", children: _jsx(GeneratedValue, { value: r.label }) }), _jsx(GeneratedValue, { value: scale.map((s) => (_jsx("td", { className: "text-center", children: _jsx("input", { type: "radio", disabled: true }) }, s.value))) })] }, r.key))) }) })] }));
+        }
+        case 'risk_matrix':
+            return (_jsx("div", { className: "grid w-fit grid-cols-5 gap-0.5", children: _jsx(GeneratedValue, { value: Array.from({ length: 25 }).map((_, i) => {
+                        const sev = (i % 5) + Math.floor(i / 5);
+                        const tone = sev >= 6
+                            ? 'bg-danger'
+                            : sev >= 4
+                                ? 'bg-warning'
+                                : sev >= 2
+                                    ? 'bg-warning-subtle'
+                                    : 'bg-success-subtle';
+                        return _jsx("span", { className: `h-3.5 w-3.5 rounded-sm ${tone}` }, i);
+                    }) }) }));
+        case 'photo_annotated':
+            return (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "relative flex h-24 items-center justify-center rounded border border-dashed border-border-strong bg-bg-subtle text-xs text-fg-subtle", children: [_jsx(GeneratedText, { id: "m_18010438ac7907" }), _jsx("span", { className: "absolute top-1/3 left-1/3 flex h-5 w-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-danger text-[10px] font-bold text-danger-fg ring-2 ring-surface", children: "1" }), _jsx("span", { className: "absolute top-1/2 left-2/3 flex h-5 w-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-danger text-[10px] font-bold text-white ring-2 ring-white", children: "2" })] }), _jsx("div", { className: "text-[10px] text-fg-subtle", children: _jsx(GeneratedText, { id: "m_18c006b02858b9" }) })] }));
+        case 'qr_scanner':
+            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { disabled: true, placeholder: tGenerated('m_0a43fb83c91fdf'), className: "flex-1 bg-white" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-border px-1.5 py-1 text-[11px] text-fg-muted", children: [_jsx(ScanLine, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_198b8dba5a829c" })] })] }));
+        case 'ranking': {
+            const ls = optionLabels(field, locale, defaultLocale);
+            const itemsR = ls.length ? ls : ['Option A', 'Option B', 'Option C'];
+            return (_jsx("ol", { className: "space-y-1", children: _jsx(GeneratedValue, { value: itemsR.slice(0, 4).map((l, i) => (_jsxs("li", { className: "flex items-center gap-2 rounded border border-border bg-white px-2 py-1 text-xs", children: [_jsx("span", { className: "w-4 text-center font-semibold text-fg-subtle", children: _jsx(GeneratedValue, { value: i + 1 }) }), _jsx("span", { className: "flex-1 truncate text-fg-muted", children: _jsx(GeneratedValue, { value: l }) }), _jsx("span", { className: "text-fg-subtle", children: "\u21C5" })] }, i))) }) }));
+        }
+        case 'rich_text':
+            return (_jsxs("div", { className: "rounded border border-border", children: [_jsxs("div", { className: "flex gap-2 border-b border-border bg-bg-subtle px-1.5 py-1 text-[11px] text-fg-subtle", children: [_jsx("span", { className: "font-bold", children: _jsx(GeneratedText, { id: "m_03d716fddcdd92" }) }), _jsx("span", { className: "italic", children: _jsx(GeneratedText, { id: "m_01f47383f19f8c" }) }), _jsx("span", { children: _jsx(GeneratedText, { id: "m_1287c1049195af" }) })] }), _jsxs("div", { className: "space-y-1 p-2", children: [_jsx("div", { className: "h-1.5 w-3/4 rounded bg-surface-hover" }), _jsx("div", { className: "h-1.5 w-1/2 rounded bg-surface-hover" })] })] }));
+        case 'address':
+            return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1 rounded border border-border bg-white px-2 py-1.5 text-xs text-fg-subtle", children: [_jsx(MapPin, { size: 12 }), " ", _jsx(GeneratedText, { id: "m_178de0c94da150" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [_jsx("div", { className: "col-span-2 h-7 rounded border border-border bg-white" }), _jsx("div", { className: "h-7 rounded border border-border bg-white" }), _jsx("div", { className: "h-7 rounded border border-border bg-white" })] })] }));
+        case 'table':
+            return _jsx(MiniTable, { field: field });
+        case 'lookup':
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx(Select, { disabled: true, className: "bg-white", children: _jsx("option", { children: 'Select…' }) }), _jsx(GeneratedValue, { value: field.binding?.autofill?.length ? (_jsxs("p", { className: "text-[10px] text-info", children: [_jsx(GeneratedText, { id: "m_011434db59926f" }), ' ', _jsx(GeneratedValue, { value: field.binding.autofill.length }), ' ', _jsx(GeneratedText, { id: "m_1d6aa8702d3fac" }), _jsx(GeneratedValue, { value: field.binding.autofill.length === 1 ? ('') : (_jsx(GeneratedText, { id: "m_00ded356f0f424" })) })] })) : null })] }));
+        case 'data_table': {
+            const keys = field.binding?.columns ?? [];
+            const headers = keys.length ? keys : ['Column A', 'Column B', 'Column C'];
+            const sel = field.binding?.selectable;
+            return (_jsxs("div", { className: "overflow-hidden rounded border border-border text-[10px]", children: [_jsx("div", { className: "flex bg-bg-subtle", children: _jsx(GeneratedValue, { value: headers.slice(0, 5).map((h, i) => (_jsx("div", { className: "flex-1 truncate border-r border-border px-1.5 py-1 font-medium text-fg-muted last:border-0", children: _jsx(GeneratedValue, { value: h }) }, i))) }) }), _jsx(GeneratedValue, { value: [0, 1, 2].map((r) => (_jsx("div", { className: "flex border-t border-border-subtle", children: _jsx(GeneratedValue, { value: headers.slice(0, 5).map((_, i) => (_jsx("div", { className: "flex-1 border-r border-border-subtle px-1.5 py-1 text-fg-subtle last:border-0", children: "\u2014" }, i))) }) }, r))) }), _jsx(GeneratedValue, { value: sel && sel !== 'none' ? (_jsx("div", { className: "bg-bg-subtle px-1.5 py-0.5 text-[9px] text-fg-subtle", children: _jsx(GeneratedValue, { value: sel === 'single' ? (_jsx(GeneratedText, { id: "m_1d33f094c621dc" })) : (_jsx(GeneratedText, { id: "m_1a1dcc7d0b9e8a" })) }) })) : null })] }));
+        }
+        case 'metric': {
+            const agg = field.binding?.aggregate;
+            const grouped = !!agg?.groupBy || (!!field.binding?.display && field.binding.display !== 'number');
+            if (grouped) {
+                return (_jsx("div", { className: "flex h-14 items-end gap-1", children: _jsx(GeneratedValue, { value: [8, 14, 10, 16, 6].map((h, i) => (_jsx("span", { className: "w-3 rounded-t bg-primary", style: { height: h * 3 } }, i))) }) }));
+            }
+            return (_jsxs("div", { className: "inline-flex items-center gap-2 rounded-lg border border-border bg-white px-3 py-2", children: [_jsx(BarChart3, { size: 18, className: "text-primary" }), _jsxs("div", { children: [_jsx("div", { className: "text-2xl leading-none font-semibold text-fg", children: "\u2014" }), _jsxs("div", { className: "mt-0.5 text-[10px] tracking-wide text-fg-subtle uppercase", children: [_jsx(GeneratedValue, { value: agg?.fn ?? _jsx(GeneratedText, { id: "m_15f748343d3956" }) }), _jsx(GeneratedValue, { value: agg?.column ? ` · ${agg.column}` : '' })] })] })] }));
+        }
+        default:
+            return _jsx(Input, { disabled: true, placeholder: "", className: "bg-white" });
+    }
+}
+function MiniTable({ field }) {
+    const cols = cfg(field).columns ?? [];
+    if (cols.length === 0) {
+        return (_jsx("div", { className: "rounded border border-dashed border-border-strong p-2 text-center text-[11px] text-fg-subtle", children: _jsx(GeneratedText, { id: "m_0d90d1eceb566b" }) }));
+    }
+    const shown = cols.slice(0, 5);
+    return (_jsxs("div", { className: "overflow-hidden rounded border border-border text-[10px]", children: [_jsx("div", { className: "flex bg-bg-subtle", children: _jsx(GeneratedValue, { value: shown.map((c) => (_jsx("div", { className: "flex-1 truncate border-r border-border px-1.5 py-1 font-medium text-fg-muted last:border-0", children: _jsx(GeneratedValue, { value: c.label || c.key }) }, c.key))) }) }), _jsx(GeneratedValue, { value: [0, 1].map((r) => (_jsx("div", { className: "flex border-t border-border-subtle", children: _jsx(GeneratedValue, { value: shown.map((c) => (_jsx("div", { className: "flex-1 border-r border-border-subtle px-1.5 py-1 text-fg-subtle last:border-0", children: "\u2014" }, c.key))) }) }, r))) })] }));
+}
+//# sourceMappingURL=element-preview.js.map