@threadlabs/looma-docs 0.0.0-stage → 0.52.0

package/docs/customizer-render.mjs

@@ -0,0 +1,157 @@
+import { googleFonts, systemFont } from './fonts.mjs';
+import { escapeHtml as escape } from './catalog.mjs';
+import { componentPath, previewMarkup, exampleKey, exampleResources, cardDescription } from './render.mjs';
+import { valueEditor } from './value-editors.mjs';
+import { defaultRecipe, themeFields, startingPoints, startingPointLabels, startingPointFor, deriveTheme, applyRefinement, themeCSS, validateRecipe, themePalettes, materialPresets, statusPresets, refinementState } from './theme.mjs';
+
+export function customizerResource(site, input = defaultRecipe()) {
+  const recipe = validateRecipe(input);
+  const cardFields = ['id', 'title', 'description', 'exampleTitle', 'resizable', 'category', 'tag', 'nativeRoot', 'href', 'packageName'];
+  const examples = site.catalog.components.flatMap(component => component.examples.map(example => ({ id: example.id, title: component.title, description: cardDescription(component.summary ?? component.description), exampleTitle: example.title, resizable: Boolean(example.resizable), category: component.group, tag: component.tag, packageName: component.package, nativeRoot: component.root ? `<${component.root}>` : '', href: site.base + componentPath(component).slice(1) })));
+  const toCard = example => Object.fromEntries(cardFields.map(key => [key, example[key]]));
+  const initial = ['ui-button', 'ui-input', 'ui-color-picker', 'ui-checkbox', 'ui-card', 'ui-switch', 'ui-text', 'ui-dialog', 'ui-popover'].map(tag => examples.find(example => example.tag === tag && (tag !== 'ui-button' || example.id.endsWith('/02-variant')) && (tag !== 'ui-text' || example.id.endsWith('/02-variants')) && (tag !== 'ui-card' || example.id.endsWith('/04-expressive-surface'))) ?? examples.find(example => example.tag === tag)).filter(Boolean).map(toCard);
+  if (!initial.length && examples.length) initial.push(toCard(examples[0]));
+  let specimen = 0;
+  const documentationCard = (tag, suffix, previewOnly = false) => {
+    const example = examples.find(item => item.tag === tag && (!suffix || item.id.endsWith(suffix))) ?? examples.find(item => item.tag === tag);
+    return example ? `<looma-example-card ${previewOnly ? 'preview-only' : ''} ${cardFields.filter(key => key !== 'id').map(key => `${key.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase())}="${escape(String(example[key]))}"`).join(' ')} identity="${escape(example.id)}">${previewMarkup(site.catalog.components.flatMap(component => component.examples).find(item => item.id === example.id), `customizer-${specimen++}-${exampleKey(example.id)}`, site.base, example.category === 'layout')}</looma-example-card>` : '';
+  };
+  const help = (id, label, description, inline = false) => `<span${inline ? ' class="inline-help"' : ' slot="labelAction"'}><ui-icon-button id="help-${id}" size="sm" label="About ${escape(label)}"><ui-icon name="help"></ui-icon></ui-icon-button><ui-tooltip for="help-${id}" trigger="click">${escape(description)}</ui-tooltip></span>`;
+  const shortLabels = { 'body-font':'Font', 'display-font':'Heading font', 'label-size':'Field labels', 'secondary-action':'Secondary', 'tertiary-action':'Tertiary', 'selection-accent':'Selection', 'focus-accent':'Focus', 'link-accent':'Links', 'neutral-source':'Source', 'neutral-strength':'Strength', 'neutral-border-contrast':'Border contrast', 'success-source':'Success', 'danger-source':'Error', 'warning-source':'Warning', 'info-source':'Info', 'status-chroma':'Status chroma', 'control-roominess':'Roominess', 'surface-separation':'Rim width', 'corner-roundness':'Roundness' };
+  const setting = (field, control, id = `theme-${field.id}`) => `<div class="setting${field.type.includes('colour') ? ' color-setting' : field.type === 'easing' ? ' curve-setting' : ''}"><ui-form-field><label slot="label" for="${id}">${escape(shortLabels[field.id] ?? field.label)}</label>${['action','canvas','surface','text','secondary-action','tertiary-action'].includes(field.id) ? '' : help(field.id, field.label, field.description)}${control}</ui-form-field></div>`;
+  const renderField = field => {
+    const value = recipe.values[field.id];
+    if (field.id === 'label-size') {
+      const inherited = value === 'inherit', size = inherited ? recipe.values['text-size'] : value;
+      return setting(field, `<ui-stack gap="xs"><ui-select id="theme-label-source" size="sm" data-label-size-source value="${inherited ? 'inherit' : 'custom'}"><option value="inherit">Follow body</option><option value="custom">Set a separate size</option></ui-select><ui-number-input compact id="theme-label-size" size="sm" data-label-size-value label="Independent field label size" value="${escape(size)}" unit="${size.match(/[a-z]+$/i)?.[0] ?? 'px'}" min="0.1" step="1"${inherited ? ' hidden' : ''}></ui-number-input></ui-stack>`, 'theme-label-source');
+    }
+    if (field.type === 'optional-colour') {
+      return setting(field, `<ui-color-picker id="theme-${field.id}" size="sm" clearable data-token="${field.id}" data-optional-color="${field.id}" value="${escape(value === field.defaultValue ? '' : value)}" label="${escape(field.label)} colour picker"></ui-color-picker>`);
+    }
+    const editor = valueEditor(field, value, { remPixels: parseFloat(recipe.values['text-size']) });
+    const common = `size="sm" aria-label="${escape(field.label)}" data-token="${field.id}" label="${escape(field.label)}"`;
+    let control;
+    if (field.type === 'font') {
+      const selected = field.id === 'display-font' && value === recipe.values['body-font'] ? 'inherit' : recipe.fonts?.[field.id] ?? (value === systemFont ? 'system' : 'custom');
+      control = `<ui-combobox id="theme-${field.id}" size="sm" data-font-picker="${field.id}" label-visibility="sr-only" label="${escape(field.label)}" value="${escape(selected)}" placeholder="Search Google Fonts…" disclosure><template slot="option"><span class="font-option" from:data-font-preview="$option.value">{$option.label}</span></template>${field.id === 'display-font' ? '<option value="inherit">Follow body</option>' : ''}<option value="system">System font</option><option value="custom" disabled>${escape(value.split(',')[0].replaceAll('"', '').trim())}</option>${Object.values(googleFonts).map(font => `<option value="${escape(font.family)}">${escape(font.family)}</option>`).join('')}</ui-combobox><ui-text variant="caption" data-font-status="${field.id}" role="status" hidden></ui-text>`;
+    } else if (field.type === 'choice') {
+      control = `<ui-select id="theme-${field.id}" ${common} value="${escape(value)}">${Object.entries(field.choices).map(([id,label]) => `<option value="${id}">${escape(label)}</option>`).join('')}</ui-select>`;
+    } else if (field.type === 'easing') {
+      control = `<ui-input id="theme-${field.id}" size="sm" data-token="${field.id}" aria-label="${escape(field.label)}" value="${escape(value)}"></ui-input><div data-curve-for="${field.id}"${editor.kind === 'text' ? ' hidden' : ''}><ui-curve-editor ${common} data-editor-kind="curve" value="${escape(value)}"></ui-curve-editor></div>`;
+    } else if (editor.kind === 'number' || editor.kind === 'slider') {
+      const tag = editor.kind === 'slider' ? 'ui-slider' : 'ui-number-input';
+      const numeric = `<${tag} compact id="theme-${field.id}" ${common} data-editor-kind="${editor.kind}" value="${escape(editor.value)}" unit="${editor.unit}" min="${editor.min}" max="${editor.max}" step="${editor.step}"></${tag}>`;
+      control = editor.units ? `<ui-cluster wrap="nowrap" gap="xs">${numeric}<ui-select size="sm" style="--ui-select-inline-size: auto" data-unit-for="${field.id}" aria-label="${escape(field.label)} unit" value="${editor.unit}">${[...new Set([...editor.units, editor.unit])].map(unit => `<option value="${unit}">${unit}</option>`).join('')}</ui-select></ui-cluster>` : numeric;
+    } else {
+      control = field.type === 'colour' ? `<ui-color-picker id="theme-${field.id}" data-token="${field.id}" value="${escape(value)}" size="sm" label="${escape(field.label)} colour picker"></ui-color-picker>` : `<ui-input id="theme-${field.id}" ${common} value="${escape(value)}"></ui-input>`;
+    }
+    return setting(field, control);
+  };
+  const swatches = tokens => `<span class="palette-swatches" aria-hidden="true">${['--ui-accent','--ui-neutral-surface','--ui-surface','--ui-text'].map(token => `<span style="background:${escape(tokens ? tokens[token] : `var(${token})`)}"></span>`).join('')}</span>`;
+  const choice = (attributes, label, value, options, content = '') => `<ui-combobox ${attributes} size="sm" data-choice label="${escape(label)}" value="${escape(value)}" disclosure open-on-focus>${options}${content}</ui-combobox>`;
+  const renderPreset = (family, location) => {
+    const presets = { material: materialPresets, palette: themePalettes, status: statusPresets }[family];
+    const state = refinementState(recipe, family), label = { material: 'Material preset', palette: 'Palette preset', status: 'Status color relationship' }[family];
+    const origin = startingPoints[recipe.origin ?? startingPointFor(recipe)];
+    const muted = origin && Object.keys(Object.values(presets)[0].values).every(key => origin.values[key] === recipe.values[key]);
+    const options = `<option value="custom" disabled>Your ${family}</option>${Object.entries(presets).map(([id, preset]) => `<option value="${id}">${escape(preset.label)}${state.id === id && state.customized ? ' · customized' : ''}</option>`).join('')}`;
+    const preview = family === 'palette' ? `<span slot="start" data-selected-palette>${swatches()}</span><template slot="option"><span class="palette-option">${Object.keys(presets).map(id => `<template $if="$option.value = '${id}'">${swatches(deriveTheme(applyRefinement(recipe, 'palette', id), { mode: 'light' }).tokens)}</template>`).join('')}<span>{$option.label}</span></span></template>` : '';
+    if (family === 'status') return `<ui-form-field><label slot="label" for="${location}-status">${label}</label><ui-select id="${location}-status" size="sm" data-refinement-preset="status" value="${state.id}"${muted ? ' muted' : ''}>${options}</ui-select></ui-form-field>`;
+    return choice(`id="${location}-${family}" data-refinement-preset="${family}"${muted ? ' muted' : ''}`, label, state.id, options, preview);
+  };
+  const paletteDetails = `<ui-grid columns="2" min="md" gap="s">${['light', 'dark'].map(mode => `<ui-card data-theme="${mode}" padding="sm"><ui-stack gap="s"><ui-text variant="eyebrow">${mode === 'light' ? 'Light' : 'Dark'}</ui-text><div class="palette-range" role="img" aria-label="${mode} canvas, content and action range"><span class="palette-canvas"></span><span class="palette-content"></span><span class="palette-action"></span></div><ui-text variant="heading" as="h3">Fellowship</ui-text><ui-text>There and back.</ui-text><ui-text variant="caption">Second breakfast at nine.</ui-text><ui-input size="sm" aria-label="${mode} neutral field" value="Shared neutral boundary"></ui-input><ui-action-bar><ui-button slot="tertiary" size="sm" variant="outline" tone="accent">Outline</ui-button><ui-button slot="secondary" size="sm" preset="standard">Neutral</ui-button><ui-button slot="primary" size="sm" preset="primary">Accent</ui-button></ui-action-bar><ui-cluster><ui-button size="sm" variant="outline" tone="neutral">Neutral outline</ui-button><ui-badge tone="accent-secondary" data-extra-accent="secondary-action">Secondary accent</ui-badge><ui-badge tone="accent-tertiary" data-extra-accent="tertiary-action">Tertiary accent</ui-badge></ui-cluster><ui-card tone="accent-secondary" data-extra-accent="secondary-action"><ui-stack gap="s"><ui-text weight="medium">A supporting highlight</ui-text><ui-text variant="caption">A category or feature can carry another accent while the main action stays primary.</ui-text></ui-stack></ui-card><ui-cluster>${[['success','Success','circle-check'],['danger','Error','circle-x'],['warning','Warning','triangle-alert'],['info','Info','info']].map(([tone,label,icon]) => `<ui-badge tone="${tone}"><ui-icon name="${icon}" slot="icon"></ui-icon>${label}</ui-badge>`).join('')}</ui-cluster><ui-callout tone="tip">Tips share the informational color family.</ui-callout><ui-callout tone="info">A status surface shares the Info badge’s colors.</ui-callout><ui-list><ui-list-item current><a href="#palette">Selected collection</a></ui-list-item></ui-list><ui-text><a href="#palette">Read the guide</a></ui-text><ui-text variant="caption" data-palette-roles="${mode}"></ui-text></ui-stack></ui-card>`).join('')}</ui-grid><ui-text variant="caption" data-palette-adjustments role="status" aria-live="polite"></ui-text><ui-disclosure summary="Resolved palette values"><ui-text variant="caption" data-palette-adjustment-details></ui-text></ui-disclosure>`;
+  const paletteRelationships = `<ui-stack gap="s"><ui-text variant="heading" as="h3">How should the colors work together?</ui-text>${[
+    ['preserve', 'Keep my colors', 'Keep the base colors as chosen. Warmth and intensity still refine the result.'],
+    ['neighboring', 'Related colors', 'Tint neutral surfaces with a neighboring hue for a closely coordinated palette.'],
+    ['complementary', 'Contrasting colors', 'Tint neutral surfaces toward the opposite hue for warm–cool contrast.'],
+  ].map(([id,label,description]) => `<ui-button variant="card" tone="neutral" data-action="palette-relationship" data-relationship="${id}" aria-pressed="${recipe.values['palette-relationship'] === id}"><ui-stack gap="xs"><ui-text variant="label">${label}</ui-text><span class="palette-range" data-relationship-preview="${id}" aria-hidden="true"><span class="palette-canvas"></span><span class="palette-content"></span><span class="palette-action"></span></span><ui-text variant="caption">${description}</ui-text></ui-stack><span slot="action" data-relationship-selected="${id}"${recipe.values['palette-relationship'] === id ? '' : ' hidden'}><ui-icon name="check"></ui-icon></span></ui-button>`).join('')}</ui-stack>`;
+  const sizePreview = `<ui-stack gap="l"><ui-text size="md">Compare the same actions and fields at each size. Rhythm separates these groups and opens the lines of text; spacing adjusts the room between controls.</ui-text><ui-stack gap="xl" data-size-groups>${['sm','md','lg'].map((size,index) => `<ui-stack gap="s" data-size-sample="${size}"><ui-text weight="medium" size="md">${['Small','Medium','Large'][index]}<span data-size-readout></span></ui-text><ui-cluster data-size-actions><ui-button size="${size}" variant="solid" tone="accent">Create</ui-button><ui-button size="${size}" variant="outline" tone="accent">Save</ui-button><ui-button size="${size}" variant="outline" tone="neutral">Archive</ui-button></ui-cluster><ui-cluster><ui-input size="${size}" style="--ui-input-inline-size: 10ch" aria-label="${size} size sample" value="Frodo"></ui-input><ui-color-picker size="${size}" label="${size} swatch sample"></ui-color-picker></ui-cluster></ui-stack>`).join('')}</ui-stack><ui-card><ui-stack gap="s"><ui-text weight="medium" size="md">Grouped content</ui-text><ui-text size="md">Frodo plans the journey. Sam brings lunch. A longer paragraph makes the line rhythm visible alongside the space between groups.</ui-text></ui-stack></ui-card><div class="spacing-samples" data-spacing-samples role="img" aria-label="Spacing progression"><span></span><span></span><span></span><span></span></div></ui-stack>`;
+  const fieldsFor = ids => ids.map(id => renderField(themeFields.find(field => field.id === id))).join('');
+  const viewTitles = { material: 'Material & light', palette: 'Palette', typography: 'Typography', layout: 'Size & spacing', motion: 'Motion', export: 'Export & save', components: 'Component library' };
+  const refinement = (family, content) => `<section id="${family}" data-refinement-view="${family}" hidden tabindex="-1" aria-label="${viewTitles[family]} editor"><ui-stack gap="l"><ui-text variant="heading" as="h2">${viewTitles[family]}</ui-text>${content}</ui-stack></section>`;
+  const editor = (family, preview, controls) => refinement(family, `<div class="refinement-layout"><div class="controls-panel"><ui-card padding="sm"><div class="settings-grid">${controls}</div></ui-card></div><div class="editor-preview" data-editor-preview="${family}">${preview}</div></div>`);
+  const customFontStacks = `<div class="settings-section"><ui-disclosure summary="Custom font stacks"><div class="settings-grid">${['body-font','display-font'].map(id=>`<ui-form-field><label slot="label" for="theme-${id}-custom">${id === 'body-font' ? 'Font' : 'Heading font'} stack</label><ui-input id="theme-${id}-custom" size="sm" data-token="${id}" value="${escape(recipe.values[id])}" aria-label="${id === 'body-font' ? 'Font' : 'Heading font'} stack"></ui-input></ui-form-field>`).join('')}</div></ui-disclosure></div>`;
+  const typographyView = editor('typography', `<ui-card><ui-stack><ui-text variant="heading" as="h2">There and back again.</ui-text><ui-text>Frodo plans the journey. Sam brings lunch. Clear notes keep the Fellowship moving.</ui-text><ui-form-field><label slot="label" for="type-sample-name">Memo title</label><ui-input id="type-sample-name" value="There and back again"></ui-input><span slot="help">Shown above your notes.</span></ui-form-field><ui-text variant="caption">Notes by Sméagol · Updated today</ui-text></ui-stack></ui-card>`, `<div class="settings-section"><div class="settings-grid">${fieldsFor(['body-font','display-font'])}</div></div>${fieldsFor(['text-size','label-size','text-weight'])}${customFontStacks}`);
+  const layoutView = editor('layout', `<ui-stack>${sizePreview}</ui-stack>`, `${fieldsFor(['control-roominess','rhythm','spacing','corner-roundness'])}${fieldsFor(['scale-contrast','space-curve','line-weight'])}`);
+  const motionView = editor('motion', `<ui-stack><ui-card><ui-stack><ui-text variant="eyebrow">Motion study</ui-text><div class="motion-track"><span data-motion-object aria-hidden="true"></span></div><ui-cluster><ui-button data-action="replay-motion"><ui-icon name="play"></ui-icon>Replay motion</ui-button><ui-text variant="caption" data-motion-readout></ui-text></ui-cluster><ui-text variant="caption" data-motion-preference></ui-text></ui-stack></ui-card></ui-stack>`, `${fieldsFor(['response-time'])}<div class="settings-section"><ui-disclosure summary="Shape the curve"><ui-stack>${fieldsFor(['response-curve'])}</ui-stack></ui-disclosure></div><div class="settings-section"><ui-cluster gap="xs"><ui-text weight="medium">Motion preview</ui-text>${help('motion-preview','motion preview','Replay shows the shared curve. The popover demonstrates it in a real component. System reduced-motion preferences are respected.',true)}</ui-cluster></div><div class="settings-section"><ui-disclosure summary="Try a popover">${documentationCard('ui-popover', null, true)}</ui-disclosure></div>`);
+  const materialSurfaces = `<ui-grid columns="2" min="sm"><ui-card variant="elevated" data-material-standard><ui-stack gap="s"><ui-text weight="medium" size="md">Everyday surface</ui-text><ui-text variant="caption">A restrained lift for ordinary content.</ui-text><ui-button variant="outline" tone="neutral">Read memo</ui-button></ui-stack></ui-card><ui-card variant="elevated" treatment="expressive" data-material-expressive><ui-stack gap="s"><ui-text weight="medium" size="md">Expressive surface</ui-text><ui-text variant="caption">Finish, edge light, glow and the decorative rim.</ui-text><ui-button variant="solid" tone="accent">Join briefing</ui-button></ui-stack></ui-card></ui-grid><ui-cluster><ui-button id="material-popover-trigger" variant="outline" tone="accent">Open popover</ui-button><ui-popover for="material-popover-trigger"><ui-stack gap="s"><ui-text size="md">Floating material</ui-text><ui-text variant="caption">Adjust glass, separation and translucency with this open.</ui-text></ui-stack></ui-popover><ui-button id="material-dialog-trigger" variant="outline" tone="neutral">Open dialog</ui-button><ui-dialog id="material-preview-dialog" for="material-dialog-trigger" label="Surface and light"><ui-text size="md">Compare the backdrop, content plane and frame as the material changes.</ui-text><ui-button slot="actions" variant="solid" commandfor="material-preview-dialog" command="close">Done</ui-button></ui-dialog></ui-cluster>`;
+  const materialSample = `<ui-card treatment="expressive"><ui-stack gap="m"><ui-text variant="heading" as="h3">Fellowship briefing</ui-text><ui-text>Content stays readable while the rim reveals the scene.</ui-text><ui-input label="Office search" placeholder="Search the Fellowship office"></ui-input><ui-action-bar><ui-button slot="secondary" preset="standard">Keep draft</ui-button><ui-button slot="primary" preset="primary">Send briefing</ui-button></ui-action-bar></ui-stack></ui-card>`;
+  const lightEditor = `<ui-light-editor data-light-editor x="${recipe.values['light-x']}" y="${recipe.values['light-y']}" label="Theme light position"><ui-stack gap="s"><ui-text variant="heading">Move the light</ui-text><ui-button preset="primary">Material response</ui-button></ui-stack></ui-light-editor>`;
+  const materialView = editor('material', `<ui-stack>${materialSample}${materialSurfaces}</ui-stack>`, `<div class="settings-section">${renderPreset('material', 'refinement')}</div>${fieldsFor(['finish','translucency','glassiness'])}<div class="settings-section"><ui-cluster gap="xs"><ui-text weight="medium">Lighting</ui-text><ui-icon-button id="help-lighting" size="sm" label="About lighting"><ui-icon name="help"></ui-icon></ui-icon-button><ui-tooltip for="help-lighting" trigger="click"><span data-material-dependencies></span></ui-tooltip></ui-cluster></div><ui-stack gap="s" data-glass-hint hidden><ui-text variant="caption">No transmission to blur.</ui-text><ui-button size="sm" data-action="use-glass">Use frosted glass</ui-button></ui-stack><div class="settings-section">${lightEditor}<div class="settings-grid">${fieldsFor(['light-color','light-spread','light-strength','edge-light','glow','outer-depth','inner-depth','surface-separation'])}</div></div><div class="settings-section"><ui-disclosure summary="Try floating surfaces"><ui-stack>${documentationCard('ui-card','/04-expressive-surface')}${documentationCard('ui-tooltip')}${documentationCard('ui-popover')}${documentationCard('ui-dialog')}</ui-stack></ui-disclosure></div>`);
+  const statusControls = ['success','danger','warning','info'].map(role => fieldsFor([role + '-source'])).join('');
+  const paletteView = refinement('palette', `<div class="refinement-layout"><div class="controls-panel"><ui-card padding="sm"><ui-stack gap="s">${renderPreset('palette', 'refinement')}<ui-cluster gap="xs"><ui-text weight="medium">Base colors</ui-text>${help('base-colors','base colors',['action','canvas','surface','text'].map(id => { const f=themeFields.find(field=>field.id===id); return f.label+': '+f.description; }).join(' '),true)}</ui-cluster><div class="color-row" data-base-colors>${fieldsFor(['action','canvas','surface','text'])}</div><ui-cluster gap="xs"><ui-text weight="medium">Supporting accents</ui-text>${help('supporting-colors','supporting accents','Optional second and third accents. Choose None inside a picker to leave it unset. Components use these only when that accent is chosen.',true)}</ui-cluster><div class="color-row" data-supporting-colors>${fieldsFor(['secondary-action','tertiary-action'])}</div><ui-text weight="medium">Use colors for</ui-text><div class="settings-grid">${fieldsFor(['selection-accent','focus-accent','link-accent'])}</div><ui-text weight="medium">Neutrals & borders</ui-text><div class="settings-grid">${fieldsFor(['neutral-source','neutral-strength','neutral-border-contrast'])}</div><ui-text weight="medium">Status colors</ui-text>${renderPreset('status', 'refinement')}<div class="settings-grid">${statusControls}${fieldsFor(['status-chroma'])}</div><ui-disclosure summary="Color character"><div class="settings-grid">${fieldsFor(['warmth','color-intensity'])}</div>${paletteRelationships}</ui-disclosure></ui-stack></ui-card></div><div class="palette-preview"><ui-stack>${paletteDetails}</ui-stack></div></div>`);
+  const options = site.catalog.groups.map(group => `<optgroup label="${escape(group.label)}">${examples.filter(example => example.category === group.id).map(example => `<option value="${escape(example.id)}" data-description="${escape(example.category + ' · ' + example.tag)}" data-example="${escape(JSON.stringify(example))}" data-search="${escape(`${example.title} ${example.tag} ${example.description} ${example.exampleTitle}`.toLocaleLowerCase())}">${escape(example.title)} · ${escape(example.exampleTitle)}</option>`).join('')}</optgroup>`).join('');
+  const links = ['ui-menu','ui-menu-item','ui-tooltip','ui-icon-button','ui-action-bar','ui-stack','ui-grid','ui-cluster','ui-form-field','ui-input','ui-select','ui-color-picker','ui-button','ui-disclosure','ui-textarea','ui-number-input','ui-slider','ui-curve-editor','ui-card','ui-text','ui-light-editor','ui-combobox','ui-checkbox','ui-badge','ui-icon','ui-callout','ui-popover','ui-dialog','ui-list','ui-list-item'].map(tag => `<link rel="component" href="@threadlabs/looma/components/${tag}/${tag}.html">`).join('\n');
+  return `${links}\n${exampleResources(site.catalog.components.flatMap(component => component.examples), site.catalog)}\n<link rel="component" href="./card.html">\n<link rel="component" href="./preview-choice.html">\n<template component="looma-customizer" module="./customizer.js"><defs>
+  <state name="previews" type="list" value="${escape(JSON.stringify(initial))}"><prop type="object">${cardFields.map(name => `<prop name="${name}" required type="${name === 'resizable' ? 'boolean' : 'string'}"></prop>`).join('')}</prop></state>
+  <state name="cards" type="list" value="${escape(JSON.stringify(initial))}"><prop type="object">${cardFields.map(name => `<prop name="${name}" required type="${name === 'resizable' ? 'boolean' : 'string'}"></prop>`).join('')}</prop></state>
+  </defs>
+  <div data-looma-customizer data-recipe="${escape(JSON.stringify(recipe))}" data-base="${escape(site.base)}" data-mode="${site.config.local ? 'local' : 'public'}" data-revision="${escape(site.config.revision ?? '')}">
+  <ui-stack gap="l">
+  <div class="summary-panel" data-customizer-summary><ui-card padding="sm"><div class="summary-toolbar"><div class="summary-theme">${choice('id="theme-start" data-preset label-visibility="sr-only"', 'Starting point', startingPointFor(recipe), `<option value="custom" disabled>Your theme</option>${Object.entries(startingPointLabels).map(([id,label]) => `<option value="${id}">${label}</option>`).join('')}`)}</div><nav aria-label="Theme controls" class="summary-sections">${[['palette','Palette'],['material','Material'],['typography','Type'],['layout','Size'],['motion','Motion']].map(([id,label]) => `<div class="summary-choice"><ui-button variant="ghost" tone="neutral" size="sm" data-action="refine-${id}" aria-label="${label}"><ui-stack gap="xs"><span class="summary-heading">${id === 'palette' ? swatches() : ''}<span>${label}</span></span><span data-summary="${id}" class="summary-value"></span></ui-stack></ui-button></div>`).join('')}</nav><div class="summary-actions"><ui-cluster gap="xs" wrap="nowrap"><ui-icon-button id="theme-undo" size="sm" data-action="undo" label="Undo" disabled><ui-icon name="undo"></ui-icon></ui-icon-button><ui-tooltip for="theme-undo">Undo</ui-tooltip><ui-icon-button id="theme-redo" size="sm" data-action="redo" label="Redo" disabled><ui-icon name="redo"></ui-icon></ui-icon-button><ui-tooltip for="theme-redo">Redo</ui-tooltip><ui-button size="sm" data-action="reset">Reset</ui-button><ui-icon-button id="theme-tools" size="sm" label="Theme tools"><ui-icon name="ellipsis"></ui-icon></ui-icon-button><ui-menu for="theme-tools" label="Theme tools"><ui-menu-item data-action="back">Overview</ui-menu-item><ui-menu-item data-action="refine-components">Components</ui-menu-item><ui-menu-item data-action="refine-export">Export & save</ui-menu-item></ui-menu></ui-cluster></div><span class="summary-active-value" data-active-summary></span><span class="summary-status" role="status" aria-live="polite" data-message></span></div></ui-card></div>
+  ${materialView}${paletteView}${typographyView}${layoutView}${motionView}
+  ${refinement('export', `<ui-stack><ui-cluster><ui-button data-action="css" variant="solid">Download CSS</ui-button><ui-button data-action="recipe">Download recipe</ui-button><ui-button data-action="import">Import recipe</ui-button></ui-cluster>
+  <input type="file" accept="application/json,.json" hidden data-recipe-file>
+  <ui-button data-action="save" variant="solid" hidden>Save to repository</ui-button>
+  <ui-disclosure summary="Use your theme"><ui-text>Every export includes light and dark. Leave data-theme off the page to follow system preference, or set it to light or dark on the page or a section. <a href="${escape(site.base)}design-system/">Installation and mode guidance</a></ui-text></ui-disclosure>
+  <ui-disclosure summary="Theme CSS"><ui-textarea data-css readonly rows="12" aria-label="Generated theme CSS" value="${escape(themeCSS(recipe))}"></ui-textarea></ui-disclosure></ui-stack>`)}
+  <div class="customizer-layout" data-customizer-overview>
+  <section data-theme-sampler><ui-stack gap="xs"><ui-text variant="heading" as="h2">Theme sampler</ui-text>${documentationCard('ui-cluster', '/99-theme-sampler', true)}</ui-stack></section>
+  <noscript>Enable JavaScript to edit the theme. The component reference and example previews remain available.</noscript>
+  </div>${refinement('components', `  <section class="examples"><ui-stack><ui-form-field><label slot="label" for="example-query">Search components</label><ui-input id="example-query" type="search" data-example-query placeholder="Name, tag or purpose"></ui-input></ui-form-field><ui-text variant="caption" role="status" aria-live="polite" data-example-count></ui-text><ui-disclosure summary="Add an example"><ui-stack><ui-combobox id="example-choice" data-add-example label="Choose a component example" placeholder="Search buttons, fields, dialogs…" disclosure clearable>${options}</ui-combobox><ui-button data-action="add" disabled>Add to preview</ui-button></ui-stack></ui-disclosure>
+  <ui-grid columns="2" min="sm"><section $each="card of $previews" $key="$card.id"><looma-example-card ${cardFields.filter(name => name !== 'id').map(name => `from:${name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase())}="$card.${name}"`).join(' ')} from:identity="$card.id" removable><looma-preview-choice slot="preview" from:identity="$card.id" from:namespace="concat('selected-', $card.id)"></looma-preview-choice></looma-example-card></section></ui-grid>
+  <ui-button data-action="more-examples">Show more components</ui-button></ui-stack></section>
+`)}</ui-stack></div>
+  <style>
+    :host { background-color: var(--ui-surface); }
+    .summary-panel { container-type: inline-size; position: sticky; inset-block-start: var(--_editor-chrome-height, 4.25rem); z-index: 3; }
+    .font-option { font-family: var(--_font-preview-family, inherit); font-weight: 400; }
+    .summary-theme { inline-size: 8rem; max-inline-size: 100%; min-inline-size: 0; }
+    .summary-toolbar { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center !important; gap: var(--ui-space-2) !important; }
+    .summary-sections { display: flex !important; flex-wrap: wrap !important; gap: var(--ui-space-1) !important; }
+    .summary-heading { display: flex !important; align-items: center !important; gap: var(--ui-space-2) !important; }
+    .summary-active-value { display: none; grid-column: 1 / -1; color: var(--ui-text-secondary); font-size: var(--ui-font-size-sm); }
+    .curve-setting { grid-column: 1 / -1; }
+    .summary-status { grid-column: 1 / -1; font-size: var(--ui-font-size-md); color: var(--ui-text-secondary); }
+    .summary-status:empty { display: none; }
+    .summary-choice { flex: 0 1 auto; min-inline-size: 0; }
+    .summary-value { display: block; max-inline-size: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); }
+    .controls-panel { grid-column: 2; grid-row: 1; min-inline-size: 0; }
+    .refinement-layout > .editor-preview, .refinement-layout > .palette-preview { grid-column: 1; grid-row: 1; }
+    @container (max-width: 16rem) { .summary-toolbar { grid-template-columns: minmax(0, 1fr); } .summary-actions { grid-column: 1 !important; grid-row: 2 !important; } .summary-sections { grid-row: 3 !important; } }
+    .settings-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--ui-space-3) !important; align-items: start !important; }
+    .settings-section { grid-column: 1 / -1; }
+    .setting { min-inline-size: 0; }
+    [data-base-colors] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.25rem), max-content)); }
+    [data-base-colors] .color-setting { inline-size: auto; }
+    .color-row { display: flex !important; flex-wrap: wrap !important; gap: var(--ui-space-4) !important; }
+    .color-setting { inline-size: 5.25rem; }
+    [data-editor-preview="material"] { padding: var(--ui-space-4) !important; background-color: var(--ui-surface); background-image: repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb, var(--ui-text) 24%, transparent) 14px 16px), repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--ui-text) 24%, transparent) 14px 16px); }
+    @media (max-width: 40rem) { .summary-toolbar { grid-template-columns: minmax(0, 1fr) auto; } .summary-sections { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap !important; } .summary-actions { grid-column: 2; grid-row: 1; } .summary-value, .summary-heading .palette-swatches { display: none; } .summary-choice { flex: 0 1 auto; } .summary-active-value { display: block; } .summary-status { font-size: var(--ui-font-size-sm); } }
+
+    [data-customizer-overview][hidden], [data-refinement-view][hidden] { display: none !important; }
+    .customizer-layout { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-6) !important; align-items: start !important; }
+    aside { grid-row: 1 / span 2; position: sticky; inset-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--_customizer-summary-height, 8rem) + var(--ui-space-2)); max-block-size: calc(100dvh - var(--_editor-chrome-height, 4.25rem) - var(--ui-space-4)); overflow: auto; padding: max(var(--ui-space-2), calc(var(--ui-focus-width) * 2)) !important; scroll-padding: max(var(--ui-space-2), calc(var(--ui-focus-width) * 2)); }
+    .examples { min-inline-size: 0; }
+    .refinement-layout { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr); gap: var(--ui-space-6) !important; align-items: start !important; }
+    [data-refinement-view] { scroll-margin-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--_customizer-summary-height, 8rem) + var(--ui-space-2)); }
+    .palette-preview, .editor-preview { position: sticky; inset-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--_customizer-summary-height, 8rem) + var(--ui-space-2)); max-block-size: calc(100dvh - var(--_editor-chrome-height, 4.25rem) - var(--ui-space-4)); overflow: auto; }
+    .spacing-samples { display: flex !important; align-items: center !important; gap: 0 !important; padding-block: var(--ui-space-3) !important; }
+    .spacing-samples > span { display: block !important; block-size: var(--ui-space-1); inline-size: var(--ui-space-1); border-radius: 50%; background: var(--ui-accent); }
+    .spacing-samples > span:nth-child(2) { margin-inline-start: var(--ui-space-2) !important; }
+    .spacing-samples > span:nth-child(3) { margin-inline-start: var(--ui-space-3) !important; }
+    .spacing-samples > span:nth-child(4) { margin-inline-start: var(--ui-space-4) !important; }
+    .palette-option { display: flex; align-items: center; gap: var(--ui-space-2); }
+    .palette-swatches { display: flex; gap: 0.125rem; flex: none; }
+    .palette-swatches > span { display: block; inline-size: 0.65rem; block-size: 0.65rem; border-radius: var(--ui-radius-xs); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-text) 12%, transparent); }
+    .palette-range { display: flex !important; min-block-size: var(--ui-control-size-sm); border: var(--ui-border-width) solid var(--ui-control-border); border-radius: var(--ui-radius-sm); overflow: hidden; }
+    .palette-range > span { flex: 1; min-inline-size: var(--ui-space-5); }
+    .palette-canvas { background: var(--_palette-canvas, var(--ui-surface)); }
+    .palette-content { background: var(--_palette-content, var(--ui-surface-raised)); }
+    .palette-action { background: var(--_palette-action, var(--ui-accent)); }
+    .motion-track { overflow: clip; display: flex; align-items: center; block-size: 5rem; padding: var(--ui-space-3); border-radius: var(--ui-radius-md); background: var(--ui-surface-muted); }
+    [data-motion-object] { display: block; inline-size: 2rem; block-size: 2rem; border-radius: var(--ui-radius-sm); background: var(--ui-accent-solid); box-shadow: var(--ui-action-shadow); }
+    @media (max-width: 64rem) { .controls-panel, .refinement-layout > .editor-preview, .refinement-layout > .palette-preview { grid-column: 1; grid-row: auto; } [data-base-colors] { gap: var(--ui-space-2) !important; } [data-base-colors] .color-setting { inline-size: auto; } .customizer-layout, .refinement-layout { grid-template-columns: minmax(0, 1fr); } aside { grid-row: auto; order: 1; position: static; max-block-size: none; } .palette-preview, .editor-preview { position: sticky; inset-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--_customizer-summary-height, 8rem) + var(--ui-space-2)); z-index: 1; background: var(--ui-surface); max-block-size: none; overflow: visible; padding: 0 !important; } .editor-preview { position: static; } [data-theme-sampler] { order: 2; } .examples { order: 3; } }
+    @media (max-width: 64rem) { .palette-preview[data-page-flow], .editor-preview[data-page-flow] { position: static; } }
+  </style></template>`;
+}