designlang 10.4.0 → 10.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [10.5.0] — 2026-04-22
+
+**The states LLMs always botch.**
+
+### Added
+
+- **`src/extractors/form-states.js`** — surfaces forms (input count + style families), modal/dialog/sheet containers, skeleton and spinner loading indicators, empty-state and error-state placeholders, and detects which toast library is on the page (Sonner, react-hot-toast, react-toastify, Radix Toast, Chakra Toast, Notistack).
+- New output: `*-form-states.json`.
+
+Closes the v10.x minor-release series started in v10.1. Everything the
+v10 spec deferred for v11 is now shipped as minor releases — with no
+breaking changes along the way.
+
 ## [10.4.0] — 2026-04-22
 
 **Identification trio: icon system, background patterns, stack intel.**

package/bin/design-extract.js

@@ -376,6 +376,9 @@ program
       if (design.stackIntel) {
         files.push({ name: `${prefix}-stack-intel.json`, content: JSON.stringify(design.stackIntel, null, 2), label: 'Stack Intel (CMS/analytics/experimentation)' });
       }
+      if (design.formStates) {
+        files.push({ name: `${prefix}-form-states.json`, content: JSON.stringify(design.formStates, null, 2), label: 'Forms + States' });
+      }
       if (merged.prompts !== false) {
         const pack = buildPromptPack(design);
         const promptsDir = join(outDir, `${prefix}-prompts`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, motion, component anatomy, brand voice, page intent, section roles, material language, component library, imagery style, and logo. Outputs AI-optimized markdown, W3C design tokens, motion tokens, typed component stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/extractors/form-states.js

@@ -0,0 +1,109 @@
+// v10.5 — Form & State Capture
+//
+// The states LLM agents always botch when rebuilding: form fields (styling
+// per type), validation hints, modal containers (backdrop + panel geometry),
+// empty / loading / error placeholders, skeleton shapes, and which toast
+// library (if any) is on the page. Pure function — reads the crawler's
+// existing computedStyles + sections + componentCandidates.
+
+const TOAST_LIBS = [
+  { id: 'sonner', re: /\bsonner\b|sonner-toast/i },
+  { id: 'react-hot-toast', re: /react-hot-toast/i },
+  { id: 'react-toastify', re: /react-toastify/i },
+  { id: 'radix-toast', re: /radix-toast|data-radix-toast/i },
+  { id: 'chakra-toast', re: /chakra-toast/i },
+  { id: 'notistack', re: /notistack/i },
+];
+
+const SKELETON_CLASS_RE = /\b(skeleton|placeholder-loading|shimmer|pulse-loading|animate-pulse)\b/i;
+const SPINNER_CLASS_RE = /\b(spinner|loading-indicator|loader)\b/i;
+const EMPTY_STATE_RE = /\b(empty-state|no-results|no-data|nothing-here)\b/i;
+const ERROR_STATE_RE = /\b(error-state|error-message|alert-error|form-error|invalid)\b/i;
+
+function summarizeInputs(styles = []) {
+  const types = {};
+  for (const s of styles) {
+    if (!s.tag || !/^(input|textarea|select)$/i.test(s.tag)) continue;
+    const t = (s.type || s.inputType || s.tag).toLowerCase();
+    types[t] = (types[t] || 0) + 1;
+  }
+  return types;
+}
+
+function detectToastLib(stack = {}) {
+  const haystack = [
+    ...(stack.scripts || []),
+    ...(stack.classNameSample || []),
+  ].join(' ');
+  return TOAST_LIBS.filter(t => t.re.test(haystack)).map(t => t.id);
+}
+
+function detectModals(sections = []) {
+  return sections.filter(s => {
+    const blob = `${s.className || ''} ${s.role || ''}`.toLowerCase();
+    return /\bmodal\b|dialog|overlay|drawer|sheet/.test(blob) || s.role === 'dialog';
+  }).map(s => ({
+    role: s.role || null,
+    className: (s.className || '').slice(0, 80),
+    bounds: s.bounds || null,
+  }));
+}
+
+function classBasedScan(classSample = []) {
+  let skeleton = 0, spinner = 0, emptyState = 0, errorState = 0;
+  for (const c of classSample) {
+    if (SKELETON_CLASS_RE.test(c)) skeleton++;
+    if (SPINNER_CLASS_RE.test(c)) spinner++;
+    if (EMPTY_STATE_RE.test(c)) emptyState++;
+    if (ERROR_STATE_RE.test(c)) errorState++;
+  }
+  return { skeleton, spinner, emptyState, errorState };
+}
+
+function summarizeFormFields(candidates = []) {
+  const inputs = candidates.filter(c => c.kind === 'input');
+  if (!inputs.length) return { count: 0, families: {} };
+  const families = {};
+  for (const inp of inputs) {
+    const key = [
+      inp.css?.borderRadius || '',
+      inp.css?.padding || '',
+      inp.css?.border || '',
+    ].join('|');
+    families[key] = (families[key] || 0) + 1;
+  }
+  return { count: inputs.length, families: Object.values(families).slice(0, 6) };
+}
+
+export function extractFormStates(rawData = {}, design = {}) {
+  const light = rawData.light || {};
+  const stack = light.stack || {};
+  const sections = light.sections || [];
+  const candidates = light.componentCandidates || [];
+
+  const toastLibs = detectToastLib(stack);
+  const modals = detectModals(sections);
+  const classScan = classBasedScan(stack.classNameSample || []);
+  const form = summarizeFormFields(candidates);
+  const inputTypes = summarizeInputs(light.computedStyles || []);
+
+  const flags = [];
+  if (classScan.skeleton) flags.push('skeleton-loading');
+  if (classScan.spinner) flags.push('spinner-loading');
+  if (classScan.emptyState) flags.push('empty-state');
+  if (classScan.errorState) flags.push('error-state');
+  if (modals.length) flags.push('modal');
+  if (toastLibs.length) flags.push('toast-library');
+  if (form.count) flags.push('forms');
+
+  return {
+    flags,
+    forms: form,
+    inputTypesSeen: inputTypes,
+    modals,
+    toastLibraries: toastLibs,
+    loading: { skeleton: classScan.skeleton, spinner: classScan.spinner },
+    empty: { count: classScan.emptyState },
+    error: { count: classScan.errorState },
+  };
+}

package/src/index.js

@@ -37,6 +37,7 @@ import { extractSeo } from './extractors/seo.js';
 import { extractIconSystem } from './extractors/icon-system.js';
 import { extractBackgroundPatterns } from './extractors/background-patterns.js';
 import { extractStackIntel } from './extractors/stack-intel.js';
+import { extractFormStates } from './extractors/form-states.js';
 import { formatDtcgTokens } from './formatters/dtcg-tokens.js';
 import { formatMotionTokens } from './formatters/motion-tokens.js';
 
@@ -145,6 +146,7 @@ export async function extractDesignLanguage(url, options = {}) {
   design.iconSystem = safeExtract(extractIconSystem, rawData.light?.icons || []) || { library: 'unknown', confidence: 0, stats: {}, signals: [], icons: [] };
   design.backgroundPatterns = safeExtract(extractBackgroundPatterns, rawData) || { labels: ['plain'], counts: {}, gradientTotals: {}, samples: [] };
   design.stackIntel = safeExtract(extractStackIntel, rawData.light?.stack || {}) || { cms: [], analytics: [], experimentation: [] };
+  design.formStates = safeExtract(extractFormStates, rawData, design) || { flags: [], forms: { count: 0, families: [] }, modals: [], toastLibraries: [] };
   // Stash raw crawler output so downstream orchestration (multipage, smart)
   // can rebuild the digest without re-crawling.
   design._raw = rawData;
@@ -218,6 +220,7 @@ export { extractSeo } from './extractors/seo.js';
 export { extractIconSystem } from './extractors/icon-system.js';
 export { extractBackgroundPatterns } from './extractors/background-patterns.js';
 export { extractStackIntel } from './extractors/stack-intel.js';
+export { extractFormStates } from './extractors/form-states.js';
 export { refineWithSmart } from './classifiers/smart.js';
 export { crawlCanonicalPages, computeCrossPageConsistency, discoverCanonicalPages } from './multipage.js';
 export { buildPromptPack, formatV0Prompt, formatLovablePrompt, formatCursorPrompt, formatClaudeArtifactPrompt } from './formatters/prompt-pack.js';