decantr 0.9.0

package/src/explorer/icons.js

@@ -0,0 +1,178 @@
+import { css } from 'decantr/css';
+import { tags } from 'decantr/tags';
+import { icon, Separator, Slider, Switch } from 'decantr/components';
+import { createSignal, createEffect } from 'decantr/state';
+import { getIconPath } from 'decantr/icons';
+import { injectExplorerCSS } from './styles.js';
+injectExplorerCSS();
+
+const { div, h2, h3, p, span, section, pre, label } = tags;
+
+// ─── Icon Groups (loaded from registry) ──────────────────────────
+let ICON_GROUPS = [];
+const GROUP_MAP = {};
+
+async function ensureGroups() {
+  if (ICON_GROUPS.length) return;
+  try {
+    const resp = await fetch('/__decantr/registry/icons.json');
+    const reg = await resp.json();
+    const groups = reg.groups || {};
+    ICON_GROUPS = Object.entries(groups).map(([id, g]) => ({
+      id, label: g.label, desc: g.description, icons: g.icons,
+    }));
+  } catch {
+    ICON_GROUPS = [];
+  }
+  for (const g of ICON_GROUPS) for (const name of g.icons) GROUP_MAP[name] = g.id;
+}
+
+// Structural icons used internally by framework components
+const STRUCTURAL = new Set([
+  'chevron-down', 'chevron-up', 'chevron-left', 'chevron-right',
+  'check', 'x', 'calendar', 'clock', 'search', 'arrow-up',
+  'grip-vertical', 'info', 'check-circle', 'alert-triangle', 'x-circle',
+]);
+
+// ─── Weight/Fill Control Bar ────────────────────────────────────
+function iconControlBar(weightSignal, filledSignal) {
+  const [weight, setWeight] = weightSignal;
+  const [filled, setFilled] = filledSignal;
+  return div({ class: css('_flex _aic _gap4 _p3 _r2 _mb2') },
+    div({ class: css('_flex _aic _gap2 _flex1 _maxw[400px]') },
+      label({ class: css('_caption _fgmutedfg') }, 'Weight'),
+      Slider({ min: 0.5, max: 4, step: 0.5, value: weight, showValue: true, onchange: setWeight })
+    ),
+    div({ class: css('_flex _aic _gap2') },
+      Switch({ label: 'Filled', checked: filled, onchange: setFilled })
+    )
+  );
+}
+
+// ─── Icon Cell ──────────────────────────────────────────────────
+function iconCell(name, navigateTo, weight, filled) {
+  const groupId = GROUP_MAP[name] || ICON_GROUPS[0].id;
+  return div({
+    class: 'de-icon-cell' + (STRUCTURAL.has(name) ? ' de-structural' : ''),
+    onclick: () => navigateTo(`/icons/${groupId}/${name}`),
+    title: name,
+  },
+    icon(name, { size: '1.25rem', weight, filled }),
+    span({ class: 'de-icon-cell-name' }, name)
+  );
+}
+
+// ─── Icon Group View ────────────────────────────────────────────
+export function IconGroupView(groupId, navigateTo) {
+  const group = ICON_GROUPS.find(g => g.id === groupId);
+  if (!group) return div({}, p({ class: css('_fgmutedfg') }, 'Group not found.'));
+
+  const weightSignal = createSignal(2);
+  const filledSignal = createSignal(false);
+  const [weight] = weightSignal;
+  const [filled] = filledSignal;
+
+  const gridContainer = div({ class: 'de-icon-grid' });
+
+  function rebuildGrid() {
+    gridContainer.innerHTML = '';
+    const w = weight();
+    const f = filled();
+    for (const name of group.icons) {
+      gridContainer.appendChild(iconCell(name, navigateTo, w, f));
+    }
+  }
+
+  rebuildGrid();
+  createEffect(() => { weight(); filled(); rebuildGrid(); });
+
+  return section({ class: css('_flex _col _gap4') },
+    h2({ class: css('_heading4') }, `Icons \u2014 ${group.label}`),
+    p({ class: css('_body _fgmutedfg') }, `${group.icons.length} icons. ${group.desc}`),
+    iconControlBar(weightSignal, filledSignal),
+    gridContainer
+  );
+}
+
+// ─── Icon Detail View ───────────────────────────────────────────
+export function IconDetail(iconName) {
+  const svgPath = getIconPath(iconName);
+  if (!svgPath) return div({}, p({ class: css('_fgmutedfg') }, `Unknown icon: ${iconName}`));
+
+  const isStructural = STRUCTURAL.has(iconName);
+  const weightSignal = createSignal(2);
+  const filledSignal = createSignal(false);
+  const [weight] = weightSignal;
+  const [filled] = filledSignal;
+
+  // Reactive preview + sizes
+  const previewBox = div({ class: 'de-demo-box' });
+  const sizesRow = div({ class: 'de-icon-preview-sizes' });
+  const usageBlock = pre({ class: 'de-icon-code' });
+
+  function rebuildPreview() {
+    const w = weight();
+    const f = filled();
+    previewBox.innerHTML = '';
+    previewBox.appendChild(icon(iconName, { size: '3rem', weight: w, filled: f }));
+    sizesRow.innerHTML = '';
+    for (const size of ['1rem', '1.25rem', '1.5rem', '2rem', '3rem']) {
+      const cell = div({ class: 'de-icon-preview-size' },
+        icon(iconName, { size, weight: w, filled: f }),
+        span({ class: 'de-icon-preview-label' }, size)
+      );
+      sizesRow.appendChild(cell);
+    }
+    // Update usage snippets
+    const wOpt = w !== 2 ? `, weight: ${w}` : '';
+    const fOpt = f ? `, filled: true` : '';
+    const optsStr = (wOpt || fOpt) ? `, {${wOpt}${fOpt} }` : '';
+    usageBlock.textContent =
+      `import { icon } from 'decantr/components';\n\n` +
+      `// Default size (1.25em)\nicon('${iconName}'${optsStr})\n\n` +
+      `// Custom size\nicon('${iconName}', { size: '2rem'${wOpt}${fOpt} })\n\n` +
+      `// In a button\nButton({ 'aria-label': '${iconName}' }, icon('${iconName}'${optsStr}))`;
+  }
+
+  rebuildPreview();
+  createEffect(() => { weight(); filled(); rebuildPreview(); });
+
+  // SVG source
+  const svgSource = div({ class: css('_flex _col _gap3') },
+    h3({ class: css('_heading6') }, 'SVG Source'),
+    pre({ class: 'de-icon-code' }, svgPath)
+  );
+
+  return div({ class: css('_flex _col _gap6') },
+    div({ class: css('_flex _aic _gap4 _mb2') },
+      previewBox,
+      div({ class: css('_flex _col _gap1') },
+        h2({ class: css('_heading4') }, iconName),
+        isStructural
+          ? span({ class: css('_caption _fgprimary') }, 'Structural \u2014 used by framework components')
+          : null
+      )
+    ),
+    iconControlBar(weightSignal, filledSignal),
+    div({ class: css('_flex _col _gap3') },
+      h3({ class: css('_heading6') }, 'Sizes'),
+      sizesRow
+    ),
+    Separator({}),
+    div({ class: css('_flex _col _gap3') },
+      h3({ class: css('_heading6') }, 'Usage'),
+      usageBlock
+    ),
+    Separator({}),
+    svgSource
+  );
+}
+
+// ─── Sidebar Data Loader ────────────────────────────────────────
+export async function loadIconItems() {
+  await ensureGroups();
+  return ICON_GROUPS.map(g => ({
+    id: g.id,
+    label: g.label,
+  }));
+}

package/src/explorer/patterns.js

@@ -0,0 +1,247 @@
+import { css } from 'decantr/css';
+import { tags } from 'decantr/tags';
+import { Chip, Separator, Tabs, CodeBlock } from 'decantr/components';
+import { renderPatternExample, hasPatternExample } from './shared/pattern-examples.js';
+import { injectExplorerCSS } from './styles.js';
+injectExplorerCSS();
+
+const { div, h2, h3, h4, p, span, section, code, strong } = tags;
+
+let patternsData = {};
+let patternsLoaded = false;
+
+async function loadPatterns() {
+  if (patternsLoaded) return patternsData;
+  try {
+    const indexResp = await fetch('/__decantr/registry/patterns/index.json');
+    const index = await indexResp.json();
+    const entries = Object.entries(index.patterns || {});
+    for (const [id, meta] of entries) {
+      try {
+        const resp = await fetch(`/__decantr/registry/patterns/${meta.file || id + '.json'}`);
+        patternsData[id] = await resp.json();
+      } catch { patternsData[id] = { id, name: id, components: [], default_blend: {} }; }
+    }
+    patternsLoaded = true;
+  } catch {
+    patternsLoaded = true;
+  }
+  return patternsData;
+}
+
+export function PatternDetail(patternId, navigateTo) {
+  // Normalize title-cased URL slugs back to kebab-case keys (e.g. "Card Grid" → "card-grid", "Hero" → "hero")
+  const normalizedId = decodeURIComponent(patternId).toLowerCase().replace(/\s+/g, '-');
+
+  const container = div({ class: css('_flex _col _gap4') },
+    p({ class: css('_body _fgmutedfg') }, 'Loading pattern...')
+  );
+
+  loadPatterns().then(patterns => {
+    const pattern = patterns[normalizedId] || patterns[patternId];
+    container.innerHTML = '';
+
+    if (!pattern) {
+      container.appendChild(p({ class: css('_fgmutedfg _body') }, `Pattern "${patternId}" not found.`));
+      return;
+    }
+
+    const tabs = Tabs({
+      tabs: [
+        {
+          id: 'features',
+          label: 'Features',
+          content: () => featuresTab(pattern)
+        },
+        {
+          id: 'api',
+          label: 'API',
+          content: () => apiTab(pattern, patternId, navigateTo)
+        }
+      ]
+    });
+
+    container.appendChild(
+      div({ class: css('_flex _col _gap1 _mb3') },
+        h2({ class: css('_heading4') }, pattern.name || patternId),
+        p({ class: css('_body _fgmutedfg') }, pattern.description || 'Composable UI building block.')
+      )
+    );
+    container.appendChild(tabs);
+  });
+
+  return container;
+}
+
+function featuresTab(pattern) {
+  const sections = [];
+
+  // Presets section (v2 patterns)
+  if (pattern.presets && Object.keys(pattern.presets).length > 0) {
+    const presetEntries = Object.entries(pattern.presets);
+    sections.push(
+      div({ class: css('_flex _col _gap4') },
+        h4({ class: css('_heading5 _mb2') }, 'Presets'),
+        p({ class: css('_caption _fgmutedfg _mb3') }, `${presetEntries.length} variants. Default: ${pattern.default_preset || 'default'}`),
+        ...presetEntries.map(([presetId, preset]) =>
+          div({ class: css('_flex _col _gap2 _p3 _b1 _r4 _mb2') },
+            div({ class: css('_flex _aic _gap2') },
+              strong({ class: css('_heading6') }, presetId),
+              presetId === pattern.default_preset ? Chip({ label: 'default', variant: 'primary', size: 'sm' }) : null
+            ),
+            p({ class: css('_caption _fgmutedfg') }, preset.description || ''),
+            preset.components ? div({ class: css('_flex _gap1 _wrap _mt1') },
+              ...(preset.components || []).map(c => Chip({ label: c, variant: 'outline', size: 'sm' }))
+            ) : null,
+            preset.blend?.atoms ? code({ class: css('_caption _fgmutedfg _mt1') }, `Atoms: ${preset.blend.atoms}`) : null
+          )
+        )
+      )
+    );
+    sections.push(Separator({}));
+  }
+
+  // Live preview
+  if (hasPatternExample(pattern.id)) {
+    sections.push(
+      div({ class: css('_flex _col _gap4') },
+        h4({ class: css('_heading5 _mb3') }, 'Live Preview'),
+        div({ class: css('_border _bcborder _radius _p4 _overflow[auto]') },
+          renderPatternExample(pattern.id)
+        )
+      )
+    );
+  }
+
+  // Source code
+  if (pattern.code?.example) {
+    sections.push(Separator({}));
+    sections.push(
+      div({ class: css('_flex _col _gap4') },
+        h4({ class: css('_heading5 _mb3') }, 'Source Code'),
+        CodeBlock({ language: 'javascript' }, pattern.code.example)
+      )
+    );
+  }
+
+  return div({ class: css('_flex _col _gap8') }, ...sections);
+}
+
+function apiTab(pattern, patternId, navigateTo) {
+  const sections = [];
+
+  // Components list
+  sections.push(
+    div({ class: css('_flex _col _gap2') },
+      h4({ class: css('_heading6') }, 'Components'),
+      (pattern.components || []).length > 0
+        ? div({ class: css('_flex _gap2 _wrap') },
+            ...(pattern.components || []).map(c => Chip({ label: c, variant: 'outline', size: 'sm' }))
+          )
+        : span({ class: css('_fgmutedfg _caption') }, 'No components listed.')
+    )
+  );
+
+  // Default blend spec
+  if (pattern.default_blend) {
+    sections.push(
+      div({ class: css('_flex _col _gap2') },
+        h4({ class: css('_heading6') }, 'Default Blend'),
+        div({ class: css('_flex _col _gap1') },
+          code({ class: css('_caption _fgmutedfg') }, `Layout: ${pattern.default_blend.layout || 'stack'}`),
+          code({ class: css('_caption _fgmutedfg') }, `Atoms: ${pattern.default_blend.atoms || '(none)'}`)
+        ),
+        pattern.default_blend.slots ? div({ class: css('_flex _col _gap1 _mt2') },
+          h4({ class: css('_heading6') }, 'Slots'),
+          ...Object.entries(pattern.default_blend.slots).map(([name, desc]) =>
+            div({ class: css('_flex _gap2') },
+              strong({ class: css('_caption') }, name + ':'),
+              span({ class: css('_caption _fgmutedfg') }, desc)
+            )
+          )
+        ) : null
+      )
+    );
+  }
+
+  return div({ class: css('_flex _col _gap6') }, ...sections);
+}
+
+export function PatternListView(navigateTo) {
+  const container = div({ class: css('_flex _col _gap4') },
+    h2({ class: css('_heading4') }, 'Patterns'),
+    p({ class: css('_body _fgmutedfg') }, 'Loading patterns...')
+  );
+
+  loadPatterns().then(patterns => {
+    container.innerHTML = '';
+    container.appendChild(h2({ class: css('_heading4 _mb2') }, 'Patterns'));
+    container.appendChild(p({ class: css('_body _fgmutedfg _mb3') }, `${Object.keys(patterns).length} composable UI building blocks.`));
+
+    const grid = div({ class: 'de-card-grid' });
+    for (const [id, pat] of Object.entries(patterns)) {
+      const cat = patternToCategory[id];
+      const href = cat ? `/patterns/${cat}/${titleCase(id)}` : `/patterns/${id}`;
+      grid.appendChild(div({
+        class: 'de-card-item',
+        onclick: () => navigateTo(href)
+      },
+        div({ class: css('_flex _col _gap2') },
+          h3({ class: css('_heading6') }, pat.name || id),
+          p({ class: css('_caption _fgmutedfg') }, pat.description || ''),
+          div({ class: css('_flex _gap1 _wrap') },
+            ...(pat.components || []).slice(0, 4).map(c => Chip({ label: c, variant: 'outline', size: 'sm' }))
+          )
+        )
+      ));
+    }
+    container.appendChild(grid);
+  });
+
+  return container;
+}
+
+// Reverse map: pattern id → category id
+const patternToCategory = {};
+
+const PATTERN_CATEGORIES = [
+  { id: 'layout',     label: 'Layout',        ids: ['hero', 'cta-section', 'detail-header', 'detail-panel'] },
+  { id: 'data',       label: 'Data Display',   ids: ['kpi-grid', 'data-table', 'chart-grid', 'scorecard', 'comparison-panel', 'stat-card', 'stats-bar'] },
+  { id: 'content',    label: 'Content',         ids: ['article-content', 'post-list', 'testimonials', 'author-card', 'media-gallery', 'checklist-card', 'steps-card'] },
+  { id: 'navigation', label: 'Navigation',      ids: ['category-nav', 'table-of-contents', 'pagination', 'search-bar', 'filter-bar', 'filter-sidebar'] },
+  { id: 'forms',      label: 'Forms',            ids: ['auth-form', 'contact-form', 'form-sections', 'wizard'] },
+  { id: 'commerce',   label: 'Commerce',         ids: ['card-grid', 'pricing-table', 'order-history'] },
+  { id: 'activity',   label: 'Activity',         ids: ['activity-feed', 'timeline', 'goal-tracker', 'pipeline-tracker'] },
+  { id: 'social',     label: 'Social',            ids: ['chat-interface', 'photo-to-recipe'] },
+  { id: 'meta',       label: 'Meta / Docs',      ids: ['component-showcase', 'specimen-grid', 'token-inspector', 'explorer-shell'] },
+];
+
+for (const cat of PATTERN_CATEGORIES) {
+  for (const id of cat.ids) patternToCategory[id] = cat.id;
+}
+
+function titleCase(id) {
+  return id.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join(' ');
+}
+
+export async function loadPatternItems() {
+  try {
+    const resp = await fetch('/__decantr/registry/patterns/index.json');
+    const data = await resp.json();
+    const available = new Set(Object.keys(data.patterns || {}));
+
+    return PATTERN_CATEGORIES
+      .map(cat => {
+        const children = cat.ids.filter(id => available.has(id));
+        if (children.length === 0) return null;
+        return {
+          id: cat.id,
+          label: cat.label,
+          children: children.map(id => titleCase(id))
+        };
+      })
+      .filter(Boolean);
+  } catch {
+    return [];
+  }
+}

package/src/explorer/recipes.js

@@ -0,0 +1,194 @@
+import { css } from 'decantr/css';
+import { tags } from 'decantr/tags';
+import { Separator, Tabs } from 'decantr/components';
+import { injectExplorerCSS } from './styles.js';
+injectExplorerCSS();
+
+const { div, h2, h3, h4, p, span, section, code, strong } = tags;
+
+let recipesData = {};
+let recipesLoaded = false;
+
+async function loadRecipes() {
+  if (recipesLoaded) return recipesData;
+  try {
+    const indexResp = await fetch('/__decantr/registry/index.json');
+    const index = await indexResp.json();
+    const recipeEntries = index.recipes?.entries || {};
+    for (const [id, meta] of Object.entries(recipeEntries)) {
+      try {
+        const resp = await fetch(`/__decantr/registry/${meta.file}`);
+        recipesData[id] = await resp.json();
+      } catch { recipesData[id] = { id, name: id, decorators: {}, compositions: {} }; }
+    }
+    recipesLoaded = true;
+  } catch {
+    recipesLoaded = true;
+  }
+  return recipesData;
+}
+
+export function RecipeDetail(recipeId, navigateTo) {
+  const container = div({ class: css('_flex _col _gap4') },
+    p({ class: css('_body _fgmutedfg') }, 'Loading recipe...')
+  );
+
+  loadRecipes().then(recipes => {
+    const recipe = recipes[recipeId];
+    container.innerHTML = '';
+
+    if (!recipe) {
+      container.appendChild(p({ class: css('_fgmutedfg _body') }, `Recipe "${recipeId}" not found.`));
+      return;
+    }
+
+    const tabs = Tabs({
+      tabs: [
+        {
+          id: 'features',
+          label: 'Features',
+          content: () => featuresTab(recipe)
+        },
+        {
+          id: 'api',
+          label: 'API',
+          content: () => apiTab(recipe)
+        }
+      ]
+    });
+
+    container.appendChild(
+      div({ class: css('_flex _col _gap1 _mb3') },
+        h2({ class: css('_heading4') }, recipe.name || recipeId),
+        p({ class: css('_body _fgmutedfg') }, recipe.description || 'Visual identity overlay.')
+      )
+    );
+    container.appendChild(tabs);
+  });
+
+  return container;
+}
+
+function featuresTab(recipe) {
+  const sections = [];
+  const decorators = recipe.decorators || {};
+  const compositions = recipe.compositions || {};
+
+  // Decorators
+  if (Object.keys(decorators).length > 0) {
+    sections.push(
+      div({ class: css('_flex _col _gap4') },
+        h4({ class: css('_heading5 _mb3') }, `${Object.keys(decorators).length} Decorators`),
+        ...Object.entries(decorators).map(([name, desc]) =>
+          div({ class: css('_flex _gap4 _aic _py2 _bb[var(--d-border-width)_solid_var(--d-border)]') },
+            div({ class: 'de-decorator-preview' },
+              div({ class: css(name + ' _p3') },
+                code({ class: css('_caption') }, `.${name}`)
+              )
+            ),
+            span({ class: css('_body _fgmutedfg _flex1') }, typeof desc === 'string' ? desc : (desc.description || ''))
+          )
+        )
+      )
+    );
+  }
+
+  // Compositions
+  if (Object.keys(compositions).length > 0) {
+    if (sections.length > 0) sections.push(Separator({}));
+    sections.push(
+      div({ class: css('_flex _col _gap4') },
+        h4({ class: css('_heading5 _mb3') }, 'Compositions'),
+        ...Object.entries(compositions).map(([name, comp]) =>
+          div({ class: css('_flex _col _gap2 _p3 _border _bcborder _radius') },
+            strong({ class: css('_heading6') }, name),
+            p({ class: css('_caption _fgmutedfg') }, comp.description || ''),
+            comp.code ? div({ class: css('_bgmuted/10 _p3 _radius') },
+              code({ class: css('_caption _wsprewrap _fontmono') }, comp.code)
+            ) : null
+          )
+        )
+      )
+    );
+  }
+
+  if (sections.length === 0) {
+    return div({ class: css('_fgmutedfg _body') }, 'No decorators or compositions defined.');
+  }
+
+  return div({ class: css('_flex _col _gap8') }, ...sections);
+}
+
+function apiTab(recipe) {
+  const sections = [];
+
+  // Setup code
+  sections.push(
+    div({ class: css('_flex _col _gap2') },
+      h4({ class: css('_heading6') }, 'Setup'),
+      div({ class: css('_bgmuted/10 _p4 _radius') },
+        code({ class: css('_body _wspre _fontmono') },
+          recipe.setup || `import { setStyle, setMode } from 'decantr/css';\nsetStyle('${recipe.style || recipe.id}');\nsetMode('${recipe.mode || 'dark'}');`
+        )
+      )
+    )
+  );
+
+  // Style/mode metadata
+  if (recipe.style || recipe.mode) {
+    sections.push(
+      div({ class: css('_flex _col _gap1') },
+        recipe.style ? div({}, strong({ class: css('_caption') }, 'Style: '), span({ class: css('_caption _fgmutedfg') }, recipe.style)) : null,
+        recipe.mode ? div({}, strong({ class: css('_caption') }, 'Mode: '), span({ class: css('_caption _fgmutedfg') }, recipe.mode)) : null
+      )
+    );
+  }
+
+  return div({ class: css('_flex _col _gap6') }, ...sections);
+}
+
+export function RecipeListView(navigateTo) {
+  const container = div({ class: css('_flex _col _gap4') },
+    h2({ class: css('_heading4') }, 'Recipes'),
+    p({ class: css('_body _fgmutedfg') }, 'Loading recipes...')
+  );
+
+  loadRecipes().then(recipes => {
+    container.innerHTML = '';
+    container.appendChild(h2({ class: css('_heading4 _mb2') }, 'Recipes'));
+    container.appendChild(p({ class: css('_body _fgmutedfg _mb3') }, 'Visual identity overlays — composition rules for drastic visual transformations.'));
+
+    const grid = div({ class: 'de-card-grid' });
+    for (const [id, recipe] of Object.entries(recipes)) {
+      grid.appendChild(div({
+        class: 'de-card-item',
+        onclick: () => navigateTo(`/recipes/${id}`)
+      },
+        div({ class: css('_flex _col _gap2') },
+          h3({ class: css('_heading6') }, recipe.name || id),
+          p({ class: css('_caption _fgmutedfg') }, recipe.description || ''),
+          div({ class: css('_flex _gap2') },
+            span({ class: css('_caption _fgmutedfg') }, `${Object.keys(recipe.decorators || {}).length} decorators`),
+            span({ class: css('_caption _fgmutedfg') }, `${Object.keys(recipe.compositions || {}).length} compositions`)
+          )
+        )
+      ));
+    }
+    container.appendChild(grid);
+  });
+
+  return container;
+}
+
+export async function loadRecipeItems() {
+  try {
+    const resp = await fetch('/__decantr/registry/index.json');
+    const data = await resp.json();
+    const entries = data.recipes?.entries || {};
+    return Object.entries(entries).map(([id, meta]) => ({
+      id, label: meta.description?.split(' — ')[0] || id.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join(' ')
+    }));
+  } catch {
+    return [];
+  }
+}