@almadar/ui 5.128.0 → 5.129.0

package/dist/runtime/index.js

@@ -26804,12 +26804,12 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect59, useRef: useRef59, useCallback: useCallback87, useState: useState89 } = React82__default;
+      const { useEffect: useEffect59, useRef: useRef60, useCallback: useCallback87, useState: useState89 } = React82__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef59({ centerLat, centerLng, zoom });
+        const prevRef = useRef60({ centerLat, centerLng, zoom });
         useEffect59(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
@@ -35861,6 +35861,290 @@ var init_GraphCanvas = __esm({
     GraphCanvas.displayName = "GraphCanvas";
   }
 });
+var ImportSourcePicker;
+var init_ImportSourcePicker = __esm({
+  "components/core/molecules/import/ImportSourcePicker.tsx"() {
+    "use client";
+    init_Box();
+    init_Icon();
+    init_Typography();
+    init_cn();
+    ImportSourcePicker = ({
+      sources,
+      onSelect,
+      onFilesSelected,
+      title,
+      moreSources,
+      className
+    }) => {
+      const fileInputRef = useRef(null);
+      const handlePick = (source) => {
+        if (source.disabled) return;
+        if (source.kind === "file") {
+          const input = fileInputRef.current;
+          if (!input) return;
+          input.accept = source.accept ?? "";
+          input.multiple = source.multiple ?? false;
+          input.click();
+          return;
+        }
+        onSelect?.(source.id);
+      };
+      const handleFiles = (event) => {
+        const files = event.target.files ? Array.from(event.target.files) : [];
+        event.target.value = "";
+        if (files.length > 0) onFilesSelected?.(files);
+      };
+      return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col gap-2", className), children: [
+        title ? /* @__PURE__ */ jsx(Typography, { variant: "h4", children: title }) : null,
+        sources.map((source) => /* @__PURE__ */ jsxs(
+          Box,
+          {
+            role: "button",
+            tabIndex: source.disabled ? -1 : 0,
+            "aria-disabled": source.disabled,
+            onClick: () => handlePick(source),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handlePick(source);
+              }
+            },
+            className: cn(
+              "flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3 text-left",
+              source.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-accent hover:text-accent-foreground"
+            ),
+            children: [
+              source.icon ? /* @__PURE__ */ jsx(Icon, { icon: source.icon, size: "md" }) : null,
+              /* @__PURE__ */ jsxs(Box, { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "label", children: source.label }),
+                source.description ? /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: source.description }) : null
+              ] })
+            ]
+          },
+          source.id
+        )),
+        moreSources,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            className: "hidden",
+            onChange: handleFiles,
+            "data-testid": "import-source-file-input"
+          }
+        )
+      ] });
+    };
+  }
+});
+function formatFieldValue(value) {
+  if (value === null) return "\u2014";
+  if (value instanceof Date) return value.toISOString();
+  if (Array.isArray(value)) return value.map(formatFieldValue).join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function unitTitle(unit) {
+  for (const key of TITLE_KEYS) {
+    const value = unit.fields[key];
+    if (typeof value === "string" && value.length > 0) return value;
+  }
+  return unit.ref;
+}
+function fieldSummary(unit) {
+  return Object.entries(unit.fields).filter(([key]) => !TITLE_KEYS.includes(key)).map(([key, value]) => `${key}: ${formatFieldValue(value)}`).join(" \xB7 ");
+}
+var TITLE_KEYS, ImportPreviewTree;
+var init_ImportPreviewTree = __esm({
+  "components/core/molecules/import/ImportPreviewTree.tsx"() {
+    "use client";
+    init_Box();
+    init_Badge();
+    init_Button();
+    init_Icon();
+    init_Typography();
+    init_cn();
+    TITLE_KEYS = ["title", "name", "label"];
+    ImportPreviewTree = ({
+      units,
+      skipped = [],
+      entityDisplay,
+      onConfirm,
+      onCancel,
+      confirmLabel = "Confirm import",
+      cancelLabel = "Cancel",
+      indent = 16,
+      className
+    }) => {
+      const groups = /* @__PURE__ */ new Map();
+      for (const unit of units) {
+        const group = groups.get(unit.targetEntity);
+        if (group) group.push(unit);
+        else groups.set(unit.targetEntity, [unit]);
+      }
+      const renderUnit = (unit, childrenByParent, depth) => {
+        const summary = fieldSummary(unit);
+        const children = childrenByParent.get(unit.ref) ?? [];
+        return /* @__PURE__ */ jsxs(React82__default.Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: "flex flex-col py-1",
+              style: { paddingLeft: depth * indent },
+              "data-testid": `import-preview-unit-${unit.ref}`,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: "file-text", size: "xs", className: "text-muted-foreground" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", children: unitTitle(unit) })
+                ] }),
+                summary ? /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: summary }) : null
+              ]
+            }
+          ),
+          children.map((child) => renderUnit(child, childrenByParent, depth + 1))
+        ] }, unit.ref);
+      };
+      return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col gap-4", className), children: [
+        units.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: "No units staged." }) : null,
+        Array.from(groups.entries()).map(([entity, groupUnits]) => {
+          const refs = new Set(groupUnits.map((unit) => unit.ref));
+          const childrenByParent = /* @__PURE__ */ new Map();
+          const roots = [];
+          for (const unit of groupUnits) {
+            if (unit.parentRef && refs.has(unit.parentRef)) {
+              const siblings = childrenByParent.get(unit.parentRef);
+              if (siblings) siblings.push(unit);
+              else childrenByParent.set(unit.parentRef, [unit]);
+            } else {
+              roots.push(unit);
+            }
+          }
+          const label = entityDisplay[entity]?.plural ?? entity;
+          return /* @__PURE__ */ jsxs(Box, { border: true, className: "rounded-md border-border bg-card p-3", children: [
+            /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 pb-2", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "label", children: label }),
+              /* @__PURE__ */ jsx(Badge, { amount: groupUnits.length })
+            ] }),
+            roots.map((unit) => renderUnit(unit, childrenByParent, 0))
+          ] }, entity);
+        }),
+        skipped.length > 0 ? /* @__PURE__ */ jsxs(Box, { border: true, className: "rounded-md border-border bg-card p-3", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 pb-2", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "label", children: "Skipped" }),
+            /* @__PURE__ */ jsx(Badge, { amount: skipped.length })
+          ] }),
+          skipped.map((element) => /* @__PURE__ */ jsxs(Box, { className: "flex items-baseline gap-2 py-1", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", children: element.ref }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: element.reason })
+          ] }, element.ref))
+        ] }) : null,
+        onConfirm || onCancel ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-end gap-2", children: [
+          onCancel ? /* @__PURE__ */ jsx(Button, { variant: "default", label: cancelLabel, onClick: onCancel }) : null,
+          onConfirm ? /* @__PURE__ */ jsx(Button, { variant: "primary", label: confirmLabel, onClick: onConfirm }) : null
+        ] }) : null
+      ] });
+    };
+  }
+});
+var PIPELINE, DEFAULT_LABELS, ImportProgress;
+var init_ImportProgress = __esm({
+  "components/core/molecules/import/ImportProgress.tsx"() {
+    "use client";
+    init_Box();
+    init_Badge();
+    init_Icon();
+    init_Typography();
+    init_cn();
+    PIPELINE = [
+      "fetching",
+      "mapping",
+      "reviewing",
+      "committing"
+    ];
+    DEFAULT_LABELS = {
+      fetching: "Fetching",
+      mapping: "Mapping",
+      reviewing: "Reviewing",
+      committing: "Committing",
+      done: "Done",
+      failed: "Failed"
+    };
+    ImportProgress = ({
+      step,
+      counts,
+      labels,
+      className
+    }) => {
+      const label = (key) => labels?.[key] ?? DEFAULT_LABELS[key];
+      const currentIndex = step === "done" || step === "failed" ? PIPELINE.length : PIPELINE.indexOf(step);
+      return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col gap-3", className), children: [
+        /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+          PIPELINE.map((key, index) => {
+            const isComplete = index < currentIndex;
+            const isActive = index === currentIndex;
+            return /* @__PURE__ */ jsxs(React82__default.Fragment, { children: [
+              index > 0 ? /* @__PURE__ */ jsx(Box, { className: "h-px w-4 bg-border" }) : null,
+              /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-1", "data-testid": `import-progress-step-${key}`, children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: isComplete ? "check" : isActive ? "loader" : "circle",
+                    size: "sm",
+                    className: cn(
+                      isComplete ? "text-success" : isActive ? "text-primary" : "text-muted-foreground"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    className: cn(isActive ? "text-foreground" : "text-muted-foreground"),
+                    children: label(key)
+                  }
+                )
+              ] })
+            ] }, key);
+          }),
+          step === "done" || step === "failed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { className: "h-px w-4 bg-border" }),
+            /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-1", "data-testid": `import-progress-step-${step}`, children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: step === "done" ? "check" : "x",
+                  size: "sm",
+                  className: step === "done" ? "text-success" : "text-error"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  className: step === "done" ? "text-success" : "text-error",
+                  children: label(step)
+                }
+              )
+            ] })
+          ] }) : null
+        ] }),
+        counts ? /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+          counts.staged !== void 0 ? /* @__PURE__ */ jsx(Badge, { label: `Staged ${counts.staged}` }) : null,
+          counts.committed !== void 0 ? /* @__PURE__ */ jsx(Badge, { variant: "success", label: `Committed ${counts.committed}` }) : null,
+          counts.failed !== void 0 ? /* @__PURE__ */ jsx(Badge, { variant: "danger", label: `Failed ${counts.failed}` }) : null
+        ] }) : null
+      ] });
+    };
+  }
+});
+
+// components/core/molecules/import/index.ts
+var init_import = __esm({
+  "components/core/molecules/import/index.ts"() {
+  }
+});
 var ReflectionBlock;
 var init_ReflectionBlock = __esm({
   "components/core/molecules/ReflectionBlock.tsx"() {
@@ -35935,6 +36219,7 @@ var init_molecules2 = __esm({
     init_EmptyState();
     init_Pagination();
     init_molecules();
+    init_import();
   }
 });
 
@@ -36415,7 +36700,7 @@ function getBadgeVariant(fieldName, value) {
 function formatFieldLabel(fieldName) {
   return fieldName.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
 }
-function formatFieldValue(value, fieldName) {
+function formatFieldValue2(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -36510,7 +36795,7 @@ function renderRichFieldValue(value, fieldName, fieldType) {
       return str;
     }
     default:
-      return formatFieldValue(value, fieldName);
+      return formatFieldValue2(value, fieldName);
   }
 }
 function normalizeFieldDefs(fields) {
@@ -36621,7 +36906,7 @@ var init_DetailPanel = __esm({
               const value = getNestedValue(normalizedData, field);
               return {
                 label: labelFor(field),
-                value: formatFieldValue(value, field),
+                value: formatFieldValue2(value, field),
                 icon: getFieldIcon(field)
               };
             }
@@ -42652,6 +42937,9 @@ var init_component_registry_generated = __esm({
     init_HeroOrganism();
     init_HeroSection();
     init_Icon();
+    init_ImportPreviewTree();
+    init_ImportProgress();
+    init_ImportSourcePicker();
     init_InfiniteScrollSentinel();
     init_Input();
     init_InputGroup();
@@ -42915,6 +43203,9 @@ var init_component_registry_generated = __esm({
       "HeroOrganism": HeroOrganism,
       "HeroSection": HeroSection,
       "Icon": Icon,
+      "ImportPreviewTree": ImportPreviewTree,
+      "ImportProgress": ImportProgress,
+      "ImportSourcePicker": ImportSourcePicker,
       "InfiniteScrollSentinel": InfiniteScrollSentinel,
       "Input": Input,
       "InputGroup": InputGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.128.0",
+  "version": "5.129.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -110,6 +110,7 @@
     "index.css",
     "themes",
     "locales",
+    "scripts",
     "tailwind-preset.cjs"
   ],
   "publishConfig": {
@@ -117,12 +118,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.36.0",
+    "@almadar/core": "^10.38.0",
     "@almadar/evaluator": "^2.37.0",
     "@almadar/logger": "^1.10.0",
-    "@almadar/runtime": "^6.39.0",
-    "@almadar/std": "^16.146.0",
-    "@almadar/syntax": "^1.12.0",
+    "@almadar/runtime": "^6.41.0",
+    "@almadar/std": "^16.147.0",
+    "@almadar/syntax": "^1.13.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

package/scripts/audit-tailwind-safelist.ts

@@ -0,0 +1,237 @@
+#!/usr/bin/env npx tsx
+/**
+ * Tailwind Safelist Audit
+ *
+ * Scans all @almadar/ui source files for Tailwind classes that need
+ * to be in the safelist (because consuming apps can't extract them
+ * from compiled dist/ files). Compares against the current safelist
+ * in tailwind-preset.cjs and reports missing entries.
+ *
+ * Classes that need safelisting:
+ * 1. Arbitrary value classes: bg-[var(--color-X)], min-h-[200px], etc.
+ * 2. Opacity modifiers on semantic colors: bg-primary/10, text-foreground/60
+ * 3. Responsive prefixes on dynamic values: sm:grid-cols-2
+ * 4. State prefixes on CSS vars: hover:bg-[var(--color-X)]
+ *
+ * Standard utility classes (flex, p-4, rounded-lg) are fine because
+ * the shell template's tailwind.config.js includes the dist/ path in
+ * content scanning. But CSS-variable-based arbitrary classes use bracket
+ * notation that Tailwind can't extract from minified JS.
+ *
+ * Usage:
+ *   npx tsx scripts/audit-tailwind-safelist.ts
+ *   npx tsx scripts/audit-tailwind-safelist.ts --fix  (appends missing to preset)
+ *
+ * @packageDocumentation
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, relative } from 'path';
+
+const ROOT = join(import.meta.dirname, '..');
+const PRESET_PATH = join(ROOT, 'tailwind-preset.cjs');
+const SCAN_DIRS = ['components', 'runtime', 'renderer', 'context', 'providers', 'hooks'];
+
+// ---------------------------------------------------------------------------
+// Regex patterns for classes that need safelisting
+// ---------------------------------------------------------------------------
+
+// Matches arbitrary value classes: bg-[var(...)], min-h-[200px], w-[300px], etc.
+// Requires a hyphen before the bracket to avoid matching JS array access like arr[0]
+const ARBITRARY_RE = /(?:^|\s|["'`])([a-z][a-z0-9]*(?::[a-z][a-z0-9-]*)+-\[[^\]]+\]|[a-z][a-z0-9]*-[a-z0-9-]*-\[[^\]]+\]|[a-z][a-z0-9]*-\[[^\]]+\])/g;
+
+// Matches opacity modifiers on semantic colors: bg-primary/10, text-foreground/60
+const OPACITY_RE = /(?:^|\s|["'`])((?:bg|text|border|ring|from|to|via|hover:bg|hover:text|hover:border|dark:bg|dark:hover:bg|group-hover:bg|group-hover:text|peer-focus:ring|focus:ring)-(?:primary|secondary|muted|accent|foreground|card|surface|background|border|error|success|warning|info|ring|input|muted-foreground|card-foreground|primary-foreground|secondary-foreground|error-foreground|success-foreground|warning-foreground|info-foreground)\/\d+)/g;
+
+// Matches classes with [var(--...)] or [length:var(--...)]
+const CSS_VAR_RE = /(?:^|\s|["'`])([a-z][a-z0-9-]*(?::[a-z][a-z0-9-]*)*-\[(?:length:|color:)?var\(--[a-z0-9-]+\)[^\]]*\])/g;
+
+// ---------------------------------------------------------------------------
+// File scanner
+// ---------------------------------------------------------------------------
+
+function getAllFiles(dir: string, ext = '.tsx'): string[] {
+  const results: string[] = [];
+  try {
+    for (const entry of readdirSync(dir)) {
+      const full = join(dir, entry);
+      const stat = statSync(full);
+      if (stat.isDirectory() && entry !== 'node_modules' && entry !== 'dist' && entry !== '.storybook') {
+        results.push(...getAllFiles(full, ext));
+      } else if (entry.endsWith(ext) || entry.endsWith('.ts')) {
+        results.push(full);
+      }
+    }
+  } catch {
+    // directory doesn't exist
+  }
+  return results;
+}
+
+function extractSafelistCandidates(content: string): Set<string> {
+  const candidates = new Set<string>();
+
+  // Find arbitrary value classes
+  for (const match of content.matchAll(ARBITRARY_RE)) {
+    const cls = match[1];
+    if (cls && !cls.startsWith('//') && !cls.startsWith('*')) {
+      candidates.add(cls);
+    }
+  }
+
+  // Find opacity modifier classes
+  for (const match of content.matchAll(OPACITY_RE)) {
+    if (match[1]) candidates.add(match[1]);
+  }
+
+  // Find CSS variable classes
+  for (const match of content.matchAll(CSS_VAR_RE)) {
+    if (match[1]) candidates.add(match[1]);
+  }
+
+  return candidates;
+}
+
+// ---------------------------------------------------------------------------
+// Safelist parser
+// ---------------------------------------------------------------------------
+
+function getCurrentSafelist(): Set<string> {
+  const content = readFileSync(PRESET_PATH, 'utf-8');
+  const safelist = new Set<string>();
+
+  // Find the safelist array - match from 'safelist: [' to the matching ']'
+  const startIdx = content.indexOf('safelist:');
+  if (startIdx === -1) return safelist;
+
+  const bracketStart = content.indexOf('[', startIdx);
+  if (bracketStart === -1) return safelist;
+
+  // Find the matching closing bracket (handle nested brackets)
+  let depth = 0;
+  let bracketEnd = -1;
+  for (let i = bracketStart; i < content.length; i++) {
+    if (content[i] === '[') depth++;
+    if (content[i] === ']') {
+      depth--;
+      if (depth === 0) { bracketEnd = i; break; }
+    }
+  }
+  if (bracketEnd === -1) return safelist;
+
+  const safelistContent = content.slice(bracketStart + 1, bracketEnd);
+  const entries = safelistContent.matchAll(/['"]([^'"]+)['"]/g);
+  for (const m of entries) {
+    if (m[1]) safelist.add(m[1]);
+  }
+
+  return safelist;
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+const fix = process.argv.includes('--fix');
+
+console.log('Tailwind Safelist Audit');
+console.log('='.repeat(60));
+console.log(`Scanning: ${SCAN_DIRS.join(', ')}`);
+console.log(`Preset: ${relative(ROOT, PRESET_PATH)}`);
+console.log();
+
+// Scan all source files
+const allCandidates = new Map<string, Set<string>>(); // class -> set of files
+let fileCount = 0;
+
+for (const dir of SCAN_DIRS) {
+  const files = getAllFiles(join(ROOT, dir));
+  for (const file of files) {
+    if (file.includes('.stories.') || file.includes('.test.') || file.includes('.spec.')) continue;
+    fileCount++;
+    const content = readFileSync(file, 'utf-8');
+    const candidates = extractSafelistCandidates(content);
+    for (const cls of candidates) {
+      if (!allCandidates.has(cls)) allCandidates.set(cls, new Set());
+      allCandidates.get(cls)!.add(relative(ROOT, file));
+    }
+  }
+}
+
+console.log(`Scanned ${fileCount} files, found ${allCandidates.size} safelist candidates`);
+console.log();
+
+// Compare against current safelist
+const currentSafelist = getCurrentSafelist();
+const missing: Array<{ cls: string; files: string[] }> = [];
+const alreadySafe: string[] = [];
+
+for (const [cls, files] of allCandidates) {
+  if (currentSafelist.has(cls)) {
+    alreadySafe.push(cls);
+  } else {
+    missing.push({ cls, files: Array.from(files) });
+  }
+}
+
+// Also exclude standard utility classes that Tailwind extracts from dist/ scanning.
+// Only arbitrary values ([...]), opacity modifiers (/N), and CSS var classes need safelisting.
+const needsSafelist = (cls: string) =>
+  cls.includes('[') || cls.includes('/') || cls.includes('var(');
+
+const filtered = missing.filter(m => needsSafelist(m.cls));
+const skipped = missing.filter(m => !needsSafelist(m.cls));
+missing.length = 0;
+missing.push(...filtered);
+
+// Report
+console.log(`Current safelist: ${currentSafelist.size} entries`);
+console.log(`Already safelisted: ${alreadySafe.length}`);
+console.log(`Standard utilities (no safelist needed): ${skipped.length}`);
+console.log(`Missing from safelist: ${missing.length}`);
+console.log();
+
+if (missing.length === 0) {
+  console.log('All safelist candidates are covered. No changes needed.');
+  process.exit(0);
+}
+
+// Sort missing by class name
+missing.sort((a, b) => a.cls.localeCompare(b.cls));
+
+console.log('Missing classes:');
+for (const { cls, files } of missing) {
+  console.log(`  ${cls}`);
+  for (const f of files.slice(0, 3)) {
+    console.log(`    <- ${f}`);
+  }
+  if (files.length > 3) {
+    console.log(`    ... and ${files.length - 3} more files`);
+  }
+}
+
+if (fix) {
+  console.log();
+  console.log('Appending missing classes to safelist...');
+
+  const presetContent = readFileSync(PRESET_PATH, 'utf-8');
+
+  // Find the end of the safelist array and insert before the closing ]
+  const safelistEndIdx = presetContent.indexOf('],', presetContent.indexOf('safelist:'));
+  if (safelistEndIdx === -1) {
+    console.error('Could not find safelist closing bracket in preset file');
+    process.exit(1);
+  }
+
+  const newEntries = missing.map(m => `  '${m.cls}',`).join('\n');
+  const comment = `  // Auto-added by audit-tailwind-safelist.ts (${new Date().toISOString().split('T')[0]})`;
+  const updated = presetContent.slice(0, safelistEndIdx) +
+    '\n' + comment + '\n' + newEntries + '\n' +
+    presetContent.slice(safelistEndIdx);
+
+  writeFileSync(PRESET_PATH, updated, 'utf-8');
+  console.log(`Added ${missing.length} classes to safelist.`);
+} else {
+  console.log();
+  console.log('Run with --fix to add missing classes to the preset.');
+}

package/scripts/export-static.js

@@ -0,0 +1,61 @@
+/**
+ * Export Static Design System
+ *
+ * After Storybook build, this script packages the design system
+ * into a client-ready deliverable (PDF or HTML bundle).
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const STORYBOOK_DIR = path.join(__dirname, '..', 'storybook-static');
+const OUTPUT_DIR = path.join(__dirname, '..', 'exports');
+
+async function exportDesignSystem() {
+  console.log('📦 Exporting design system...');
+
+  // Ensure output directory exists
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+
+  // Check if storybook build exists
+  if (!fs.existsSync(STORYBOOK_DIR)) {
+    console.error('❌ Storybook build not found. Run `npm run build-storybook` first.');
+    process.exit(1);
+  }
+
+  // Copy storybook-static to exports with timestamp
+  const timestamp = new Date().toISOString().split('T')[0];
+  const exportName = `design-system-${timestamp}`;
+  const exportPath = path.join(OUTPUT_DIR, exportName);
+
+  // Copy directory
+  fs.cpSync(STORYBOOK_DIR, exportPath, { recursive: true });
+
+  console.log(`✅ Design system exported to: ${exportPath}`);
+  console.log(`   Open ${exportPath}/index.html in a browser to view.`);
+
+  // Create a manifest
+  const manifest = {
+    name: '@orbital/design-system',
+    version: '1.0.0',
+    exportedAt: new Date().toISOString(),
+    themes: ['wireframe', 'minimalist', 'almadar', 'winning-11'],
+    components: {
+      atoms: ['Avatar', 'Badge', 'Button', 'Card', 'Checkbox', 'Divider', 'Input', 'Radio', 'Select', 'Spinner', 'Typography'],
+      molecules: ['Accordion', 'Alert', 'Modal', 'Tabs', 'Toast'],
+      organisms: ['ConfirmDialog', 'DataTable', 'Header', 'Sidebar', 'StatCard', 'WizardContainer'],
+      templates: ['AuthLayout', 'CounterTemplate', 'DashboardLayout', 'GameTemplate', 'GenericAppTemplate'],
+    },
+  };
+
+  fs.writeFileSync(
+    path.join(exportPath, 'manifest.json'),
+    JSON.stringify(manifest, null, 2)
+  );
+
+  console.log(`   Manifest created at: ${exportPath}/manifest.json`);
+}
+
+exportDesignSystem().catch(console.error);