npm - @motion-proto/live-tokens - Versions diffs - 0.1.1 → 0.3.2 - Mend

@motion-proto/live-tokens 0.1.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

package/README.md +168 -21
package/dist-plugin/index.cjs +823 -336
package/dist-plugin/index.d.cts +9 -7
package/dist-plugin/index.d.ts +9 -7
package/dist-plugin/index.js +822 -335
package/package.json +46 -20
package/src/assets/newspaper.webp +0 -0
package/src/assets/offering.webp +0 -0
package/src/component-editor/BadgeEditor.svelte +170 -0
package/src/component-editor/CalloutEditor.svelte +103 -0
package/src/component-editor/CardEditor.svelte +184 -0
package/src/component-editor/CollapsibleSectionEditor.svelte +167 -0
package/src/component-editor/CornerBadgeEditor.svelte +207 -0
package/src/component-editor/DialogEditor.svelte +172 -0
package/src/component-editor/ImageEditor.svelte +72 -0
package/src/component-editor/InlineEditActionsEditor.svelte +83 -0
package/src/component-editor/NotificationEditor.svelte +160 -0
package/src/component-editor/ProgressBarEditor.svelte +124 -0
package/src/component-editor/RadioButtonEditor.svelte +140 -0
package/src/component-editor/SectionDividerEditor.svelte +263 -0
package/src/component-editor/SegmentedControlEditor.svelte +154 -0
package/src/component-editor/StandardButtonsEditor.svelte +178 -0
package/src/component-editor/TabBarEditor.svelte +137 -0
package/src/component-editor/TableEditor.svelte +128 -0
package/src/component-editor/TooltipEditor.svelte +122 -0
package/src/component-editor/editorTokens.test.ts +93 -0
package/src/component-editor/groupKeySlots.test.ts +67 -0
package/src/component-editor/groupKeySnapshot.test.ts +52 -0
package/src/component-editor/index.ts +5 -0
package/src/component-editor/registry.ts +246 -0
package/src/component-editor/scaffolding/AngleDial.svelte +185 -0
package/src/component-editor/scaffolding/ComponentEditorBase.svelte +96 -0
package/src/component-editor/scaffolding/ComponentFileManager.svelte +682 -0
package/src/component-editor/scaffolding/ComponentFileMenu.svelte +312 -0
package/src/component-editor/scaffolding/ComponentsTab.svelte +69 -0
package/src/component-editor/scaffolding/CopyFromMenu.svelte +246 -0
package/src/component-editor/scaffolding/DemoHeader.svelte +21 -0
package/src/component-editor/scaffolding/DividerEditor.svelte +81 -0
package/src/component-editor/scaffolding/FieldsetWrapper.svelte +46 -0
package/src/component-editor/scaffolding/GradientCard.svelte +291 -0
package/src/component-editor/scaffolding/LinkageChart.svelte +297 -0
package/src/component-editor/scaffolding/LinkedBlock.svelte +418 -0
package/src/component-editor/scaffolding/NonStylableConfig.svelte +57 -0
package/src/component-editor/scaffolding/SaveAsDialog.svelte +177 -0
package/src/component-editor/scaffolding/ShadowBackdrop.svelte +25 -0
package/src/component-editor/scaffolding/ShadowBackdropControls.svelte +56 -0
package/src/component-editor/scaffolding/StateBlock.svelte +115 -0
package/src/component-editor/scaffolding/TokenLayout.svelte +511 -0
package/src/component-editor/scaffolding/TypeEditor.svelte +82 -0
package/src/component-editor/scaffolding/VariantGroup.svelte +277 -0
package/src/component-editor/scaffolding/buildTypeGroupTokens.ts +97 -0
package/src/component-editor/scaffolding/componentSectionType.ts +8 -0
package/src/component-editor/scaffolding/componentSources.ts +9 -0
package/src/component-editor/scaffolding/defaultSections.ts +16 -0
package/src/component-editor/scaffolding/editorContext.ts +44 -0
package/src/component-editor/scaffolding/linkedBlock.ts +226 -0
package/src/component-editor/scaffolding/siblings.ts +33 -0
package/src/component-editor/scaffolding/types.ts +39 -0
package/src/components/Badge.svelte +231 -42
package/src/components/Button.svelte +324 -124
package/src/components/Callout.svelte +145 -0
package/src/components/Card.svelte +123 -25
package/src/components/CollapsibleSection.svelte +213 -35
package/src/components/CornerBadge.svelte +224 -0
package/src/components/Dialog.svelte +137 -114
package/src/components/Image.svelte +43 -0
package/src/components/InlineEditActions.svelte +74 -14
package/src/components/Notification.svelte +184 -163
package/src/components/ProgressBar.svelte +216 -22
package/src/components/RadioButton.svelte +110 -40
package/src/components/SectionDivider.svelte +428 -74
package/src/components/SegmentedControl.svelte +203 -0
package/src/components/TabBar.svelte +146 -21
package/src/components/Table.svelte +102 -0
package/src/components/Tooltip.svelte +45 -19
package/src/components/types.ts +51 -0
package/src/data/google-fonts.json +75 -0
package/src/lib/ColumnsOverlay.svelte +20 -7
package/src/lib/LiveEditorOverlay.svelte +257 -78
package/src/lib/columnsOverlay.ts +21 -17
package/src/lib/componentConfig.test.ts +204 -0
package/src/lib/componentConfigKeys.ts +19 -0
package/src/lib/componentConfigService.ts +88 -0
package/src/lib/copyPopover.ts +30 -0
package/src/lib/cssVarSync.ts +59 -7
package/src/lib/editorConfigStore.ts +0 -10
package/src/lib/editorCore.ts +402 -0
package/src/lib/editorKeybindings.ts +52 -0
package/src/lib/editorPersistence.ts +106 -0
package/src/lib/editorRenderer.ts +74 -0
package/src/lib/editorStore.test.ts +328 -0
package/src/lib/editorStore.ts +412 -0
package/src/lib/editorTypes.ts +100 -0
package/src/lib/editorViewStore.ts +55 -0
package/src/lib/files/versionedFileResource.ts +140 -0
package/src/lib/fontLoader.ts +130 -0
package/src/lib/fontMigration.ts +140 -0
package/src/lib/fontParse.ts +168 -0
package/src/lib/index.ts +48 -30
package/src/lib/lazyConfig.test.ts +54 -0
package/src/lib/migrations/2026-04-24-component-prefix-and-suffix-renames.ts +64 -0
package/src/lib/migrations/2026-04-24-legacy-keys-and-bg-to-canvas.ts +71 -0
package/src/lib/migrations/2026-04-27-segmentedcontrol-disabled-flatten.ts +43 -0
package/src/lib/migrations/2026-05-08-collapsiblesection-frame-and-cleanup.ts +68 -0
package/src/lib/migrations/2026-05-08-collapsiblesection-variant-namespace.ts +35 -0
package/src/lib/migrations/2026-05-10-sectiondivider-gradient-stops.ts +50 -0
package/src/lib/migrations/2026-05-13-primary-to-brand.ts +90 -0
package/src/lib/migrations/index.ts +93 -0
package/src/lib/migrations/migrations.test.ts +341 -0
package/src/lib/navLinkTypes.ts +1 -0
package/src/lib/overlayState.ts +3 -0
package/src/lib/paletteDerivation.ts +300 -0
package/src/lib/parentRouteStore.ts +42 -0
package/src/lib/parsers/globalRootBlock.ts +32 -0
package/src/lib/presetService.ts +94 -0
package/src/lib/router.ts +42 -10
package/src/lib/scrollSection.ts +45 -0
package/src/lib/slices/columns.ts +59 -0
package/src/lib/slices/components.ts +362 -0
package/src/lib/slices/domainVars.ts +15 -0
package/src/lib/slices/fonts.ts +30 -0
package/src/lib/slices/gradients.ts +153 -0
package/src/lib/slices/overlays.ts +132 -0
package/src/lib/slices/palettes.ts +26 -0
package/src/lib/slices/shadows.ts +123 -0
package/src/lib/storage.ts +88 -0
package/src/lib/themeInit.ts +74 -0
package/src/lib/themeService.ts +101 -0
package/src/lib/themeTypes.ts +146 -0
package/src/lib/tokenRegistry.ts +148 -0
package/src/pages/ComponentEditorPage.svelte +384 -0
package/src/pages/ComponentEditorPage.svelte.d.ts +2 -0
package/src/pages/Editor.svelte +98 -0
package/src/pages/Editor.svelte.d.ts +2 -0
package/src/pages/EditorShell.svelte +348 -0
package/src/styles/_padding.scss +34 -0
package/src/styles/fonts/Fraunces/Fraunces-italic-latin-ext.woff2 +0 -0
package/src/styles/fonts/Fraunces/Fraunces-italic-latin.woff2 +0 -0
package/src/styles/fonts/Fraunces/Fraunces-roman-latin-ext.woff2 +0 -0
package/src/styles/fonts/Fraunces/Fraunces-roman-latin.woff2 +0 -0
package/src/styles/fonts/Manrope/Manrope-latin-ext.woff2 +0 -0
package/src/styles/fonts/Manrope/Manrope-latin.woff2 +0 -0
package/src/styles/fonts.css +22 -10
package/src/styles/form-controls.css +14 -16
package/src/styles/tokens.css +1322 -0
package/src/styles/ui-editor.css +126 -0
package/src/{showcase → ui}/BezierCurveEditor.svelte +14 -14
package/src/{showcase → ui}/ColorEditPanel.svelte +42 -36
package/src/ui/EditorViewSwitcher.svelte +180 -0
package/src/ui/FontStackEditor.svelte +360 -0
package/src/ui/GradientEditor.svelte +461 -0
package/src/ui/GradientStopPicker.svelte +74 -0
package/src/ui/PaletteEditor.svelte +1590 -0
package/src/ui/PaletteEditor.test.ts +108 -0
package/src/ui/PresetFileManager.svelte +567 -0
package/src/ui/ProjectFontsSection.svelte +645 -0
package/src/{showcase → ui}/SurfacesTab.svelte +39 -39
package/src/{showcase → ui}/TextTab.svelte +27 -27
package/src/{showcase/TokenFileManager.svelte → ui/ThemeFileManager.svelte} +196 -112
package/src/ui/Toggle.svelte +108 -0
package/src/ui/UICopyPopover.svelte +78 -0
package/src/{showcase/EditorDialog.svelte → ui/UIDialog.svelte} +66 -25
package/src/ui/UIFontFamilySelector.svelte +309 -0
package/src/ui/UIFontSizeSelector.svelte +165 -0
package/src/ui/UIFontWeightSelector.svelte +52 -0
package/src/ui/UILineHeightSelector.svelte +47 -0
package/src/ui/UILinkToggle.svelte +60 -0
package/src/ui/UIOptionItem.svelte +74 -0
package/src/ui/UIOptionList.svelte +27 -0
package/src/ui/UIPaddingSelector.svelte +661 -0
package/src/ui/UIPaletteSelector.svelte +1084 -0
package/src/ui/UIRadio.svelte +72 -0
package/src/ui/UIRadioGroup.svelte +59 -0
package/src/ui/UIRelinkConfirmPopover.svelte +235 -0
package/src/ui/UITokenSelector.svelte +509 -0
package/src/ui/UIVariantSelector.svelte +145 -0
package/src/ui/VariablesTab.svelte +252 -0
package/src/ui/index.ts +31 -0
package/src/ui/keepInViewport.ts +84 -0
package/src/ui/palette/GradientStopEditor.svelte +482 -0
package/src/ui/palette/OverridesPanel.svelte +526 -0
package/src/ui/palette/PaletteBase.svelte +165 -0
package/src/ui/palette/ScaleCurveEditor.svelte +38 -0
package/src/ui/palette/paletteEditorState.ts +89 -0
package/src/ui/sections/ColumnsSection.svelte +273 -0
package/src/ui/sections/GradientsSection.svelte +147 -0
package/src/ui/sections/OverlaysSection.svelte +670 -0
package/src/ui/sections/ShadowsSection.svelte +1250 -0
package/src/ui/sections/TokenScaleTable.svelte +332 -0
package/src/ui/sections/tokenScales.ts +81 -0
package/src/ui/variantScales.ts +108 -0
package/src/components/DetailNav.svelte +0 -78
package/src/components/Toggle.svelte +0 -86
package/src/lib/tokenInit.ts +0 -29
package/src/lib/tokenService.ts +0 -144
package/src/lib/tokenTypes.ts +0 -45
package/src/pages/Admin.svelte +0 -100
package/src/pages/ShowcasePage.svelte +0 -144
package/src/showcase/BackupBrowser.svelte +0 -617
package/src/showcase/ComponentsTab.svelte +0 -105
package/src/showcase/PaletteEditor.svelte +0 -2579
package/src/showcase/PaletteSelector.svelte +0 -627
package/src/showcase/TokenMap.svelte +0 -54
package/src/showcase/VariablesTab.svelte +0 -2655
package/src/showcase/VisualsTab.svelte +0 -231
package/src/showcase/demos/BadgeDemo.svelte +0 -56
package/src/showcase/demos/CardDemo.svelte +0 -50
package/src/showcase/demos/ChoiceButtonsDemo.svelte +0 -192
package/src/showcase/demos/CollapsibleSectionDemo.svelte +0 -54
package/src/showcase/demos/DialogDemo.svelte +0 -42
package/src/showcase/demos/InlineEditActionsDemo.svelte +0 -25
package/src/showcase/demos/NotificationDemo.svelte +0 -147
package/src/showcase/demos/ProgressBarDemo.svelte +0 -54
package/src/showcase/demos/RadioButtonDemo.svelte +0 -56
package/src/showcase/demos/SectionDividerDemo.svelte +0 -77
package/src/showcase/demos/StandardButtonsDemo.svelte +0 -455
package/src/showcase/demos/TabBarDemo.svelte +0 -58
package/src/showcase/demos/TooltipDemo.svelte +0 -52
package/src/showcase/editor.css +0 -93
package/src/showcase/index.ts +0 -17
package/src/styles/fonts/Domine/Domine-VariableFont_wght.ttf +0 -0
package/src/styles/fonts/Domine/OFL.txt +0 -97
package/src/styles/fonts/Domine/README.txt +0 -66
/package/src/{showcase → ui}/curveEngine.ts +0 -0

package/src/lib/fontLoader.ts ADDED Viewed

@@ -0,0 +1,130 @@
+import type {
+  FontFamily,
+  FontSource,
+  FontStack,
+  FontStackSlot,
+  FontStackVariable,
+  SystemCascadePreset,
+} from './themeTypes';
+import { setCssVar, getSyncedDocuments } from './cssVarSync';
+export const SYSTEM_CASCADES: Record<SystemCascadePreset, string> = {
+  'system-ui-sans':
+    'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  'system-ui-serif': 'Georgia, "Times New Roman", serif',
+  'system-ui-mono': 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+};
+const LINK_ATTR = 'data-font-source-id';
+const STYLE_ATTR = 'data-font-source-id';
+function syncedHeads(): HTMLHeadElement[] {
+  return getSyncedDocuments().map((d) => d.head);
+}
+function findExistingNode(head: HTMLHeadElement, sourceId: string): Element | null {
+  return head.querySelector(`[${LINK_ATTR}="${CSS.escape(sourceId)}"]`);
+}
+function buildNodeFor(source: FontSource, doc: Document): Element | null {
+  if (source.kind === 'font-face') {
+    if (!source.cssText) return null;
+    const style = doc.createElement('style');
+    style.setAttribute(STYLE_ATTR, source.id);
+    style.textContent = source.cssText;
+    return style;
+  }
+  if (!source.url) return null;
+  const link = doc.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = source.url;
+  link.setAttribute(LINK_ATTR, source.id);
+  return link;
+}
+/**
+ * Inject/update <link>/<style> elements in <head> (and parent <head> when in
+ * an iframe) to match the given sources. Existing nodes are diffed by id so
+ * repeated calls don't thrash the DOM. Sources present in the DOM but absent
+ * from the list are removed.
+ */
+export function applyFontSources(sources: FontSource[]): void {
+  const wanted = new Map(sources.map((s) => [s.id, s]));
+  for (const head of syncedHeads()) {
+    const existing = head.querySelectorAll(`[${LINK_ATTR}]`);
+    const seen = new Set<string>();
+    existing.forEach((node) => {
+      const id = node.getAttribute(LINK_ATTR);
+      if (!id) return;
+      const next = wanted.get(id);
+      if (!next) {
+        node.remove();
+        return;
+      }
+      seen.add(id);
+      if (next.kind === 'font-face') {
+        if (node.tagName !== 'STYLE' || node.textContent !== (next.cssText ?? '')) {
+          node.remove();
+          const replacement = buildNodeFor(next, head.ownerDocument!);
+          if (replacement) head.appendChild(replacement);
+        }
+      } else {
+        if (node.tagName !== 'LINK' || (node as HTMLLinkElement).href !== (next.url ?? '')) {
+          node.remove();
+          const replacement = buildNodeFor(next, head.ownerDocument!);
+          if (replacement) head.appendChild(replacement);
+        }
+      }
+    });
+    for (const [id, source] of wanted) {
+      if (seen.has(id)) continue;
+      const node = buildNodeFor(source, head.ownerDocument!);
+      if (node) head.appendChild(node);
+    }
+  }
+}
+function resolveSlot(slot: FontStackSlot, familyById: Map<string, FontFamily>): string | null {
+  if (slot.kind === 'project') {
+    const fam = familyById.get(slot.familyId);
+    return fam ? fam.cssName : null;
+  }
+  if (slot.kind === 'system') return SYSTEM_CASCADES[slot.preset];
+  return slot.value;
+}
+/**
+ * Resolve a fontStacks list to a flat var-name → css-value map. Exported so
+ * callers (e.g. the stack editor) can preview composed values without writing.
+ */
+export function resolveFontStackValues(
+  stacks: FontStack[],
+  sources: FontSource[],
+): Record<FontStackVariable, string> {
+  const familyById = new Map<string, FontFamily>();
+  for (const src of sources) {
+    for (const f of src.families) familyById.set(f.id, f);
+  }
+  const out: Partial<Record<FontStackVariable, string>> = {};
+  for (const stack of stacks) {
+    const parts: string[] = [];
+    for (const slot of stack.slots) {
+      const v = resolveSlot(slot, familyById);
+      if (v) parts.push(v);
+    }
+    if (parts.length > 0) out[stack.variable] = parts.join(', ');
+  }
+  return out as Record<FontStackVariable, string>;
+}
+/**
+ * Compose each stack into its resolved "family1, family2, ..." string and
+ * write it to the matching --font-* variable on :root (and parent :root when
+ * in an iframe) via the same pipeline used for color variables.
+ */
+export function applyFontStacks(stacks: FontStack[], sources: FontSource[]): void {
+  const resolved = resolveFontStackValues(stacks, sources);
+  for (const [name, value] of Object.entries(resolved)) {
+    setCssVar(name, value);
+  }
+}

package/src/lib/fontMigration.ts ADDED Viewed

@@ -0,0 +1,140 @@
+import type { FontFamily, FontSource, FontStack, Theme } from './themeTypes';
+import frauncesRomanLatin from '../styles/fonts/Fraunces/Fraunces-roman-latin.woff2?url';
+import frauncesItalicLatin from '../styles/fonts/Fraunces/Fraunces-italic-latin.woff2?url';
+import manropeLatin from '../styles/fonts/Manrope/Manrope-latin.woff2?url';
+function makeId(prefix: string): string {
+  return `${prefix}_${Math.random().toString(36).slice(2, 10)}`;
+}
+function familyId(sourceId: string, name: string): string {
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  return `${sourceId}:${slug}`;
+}
+function fam(sourceId: string, name: string, cssName?: string, weights?: number[]): FontFamily {
+  return {
+    id: familyId(sourceId, name),
+    name,
+    cssName: cssName ?? `"${name}"`,
+    ...(weights ? { weights } : {}),
+  };
+}
+/**
+ * Build the default fontSources that match the hand-written src/styles/fonts.css.
+ * Used when a theme has no fontSources yet.
+ */
+export function defaultFontSources(): FontSource[] {
+  const typekitId = 'src_typekit_jes8oow';
+  const frauncesId = 'src_fraunces_local';
+  const manropeId = 'src_manrope_local';
+  return [
+    {
+      id: typekitId,
+      kind: 'typekit',
+      url: 'https://use.typekit.net/jes8oow.css',
+      label: 'Adobe Typekit',
+      families: [
+        fam(typekitId, 'fira-code', '"fira-code"'),
+      ],
+    },
+    {
+      id: frauncesId,
+      kind: 'font-face',
+      cssText: `@font-face {\n  font-family: "Fraunces";\n  src: url('${frauncesRomanLatin}') format('woff2');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: "Fraunces";\n  src: url('${frauncesItalicLatin}') format('woff2');\n  font-weight: 100 900;\n  font-style: italic;\n  font-display: swap;\n}`,
+      label: 'Local',
+      families: [
+        fam(frauncesId, 'Fraunces', '"Fraunces"', [100, 200, 300, 400, 500, 600, 700, 800, 900]),
+      ],
+    },
+    {
+      id: manropeId,
+      kind: 'font-face',
+      cssText: `@font-face {\n  font-family: "Manrope";\n  src: url('${manropeLatin}') format('woff2');\n  font-weight: 200 800;\n  font-style: normal;\n  font-display: swap;\n}`,
+      label: 'Local',
+      families: [
+        fam(manropeId, 'Manrope', '"Manrope"', [200, 300, 400, 500, 600, 700, 800]),
+      ],
+    },
+  ];
+}
+/**
+ * Build the default fontStacks matching the previous hard-coded display in
+ * VariablesTab.svelte plus tokens.css. Each stack references families from
+ * defaultFontSources() by id.
+ */
+export function defaultFontStacks(sources: FontSource[]): FontStack[] {
+  const byName = new Map<string, string>();
+  for (const src of sources) {
+    for (const f of src.families) byName.set(f.name.toLowerCase(), f.id);
+  }
+  const p = (name: string): { kind: 'project'; familyId: string } | null => {
+    const id = byName.get(name.toLowerCase());
+    return id ? { kind: 'project', familyId: id } : null;
+  };
+  const pick = (...names: string[]) => names.map(p).filter((x): x is { kind: 'project'; familyId: string } => !!x);
+  return [
+    {
+      variable: '--font-display',
+      slots: [
+        ...pick('Fraunces'),
+        { kind: 'generic', value: 'serif' },
+      ],
+    },
+    {
+      variable: '--font-sans',
+      slots: [
+        ...pick('Manrope'),
+        { kind: 'system', preset: 'system-ui-sans' },
+        { kind: 'generic', value: 'sans-serif' },
+      ],
+    },
+    {
+      variable: '--font-serif',
+      slots: [
+        ...pick('Fraunces'),
+        { kind: 'generic', value: 'serif' },
+      ],
+    },
+    {
+      variable: '--font-mono',
+      slots: [
+        ...pick('fira-code'),
+        { kind: 'system', preset: 'system-ui-mono' },
+        { kind: 'generic', value: 'monospace' },
+      ],
+    },
+  ];
+}
+/**
+ * Ensure the loaded Theme has fontSources and fontStacks. Mutates in place
+ * only when missing; safe to call on already-migrated themes. Also strips any
+ * stale --font-* entries from cssVariables since those are now derived.
+ */
+export function migrateThemeFonts(theme: Theme): { migrated: boolean } {
+  let migrated = false;
+  if (!theme.fontSources || theme.fontSources.length === 0) {
+    theme.fontSources = defaultFontSources();
+    migrated = true;
+  }
+  if (!theme.fontStacks || theme.fontStacks.length === 0) {
+    theme.fontStacks = defaultFontStacks(theme.fontSources);
+    migrated = true;
+  }
+  if (theme.cssVariables) {
+    for (const key of ['--font-display', '--font-sans', '--font-serif', '--font-mono']) {
+      if (key in theme.cssVariables) {
+        delete theme.cssVariables[key];
+        migrated = true;
+      }
+    }
+  }
+  return { migrated };
+}
+export { makeId };

package/src/lib/fontParse.ts ADDED Viewed

@@ -0,0 +1,168 @@
+import type { FontFamily, FontSource, FontSourceKind } from './themeTypes';
+export interface ParsedFamily {
+  name: string;
+  weights?: number[];
+  italics?: boolean;
+}
+export interface ParsedSource {
+  kind: FontSourceKind;
+  families: ParsedFamily[];
+}
+/**
+ * Parse a Google Fonts CSS2 URL (`?family=Inter:wght@400;700&family=Roboto`)
+ * into the families and weights it declares. Pure; no network.
+ */
+export function parseGoogleFontsUrl(url: string): ParsedFamily[] | null {
+  let u: URL;
+  try { u = new URL(url); } catch { return null; }
+  if (!u.hostname.includes('fonts.googleapis.com')) return null;
+  const familyParams = u.searchParams.getAll('family');
+  if (familyParams.length === 0) return null;
+  return familyParams.map((raw) => {
+    const [rawName, spec] = raw.split(':');
+    const name = decodeURIComponent(rawName).replace(/\+/g, ' ');
+    const parsed: ParsedFamily = { name };
+    if (spec) {
+      const axisMatch = spec.match(/(?:ital,)?wght@([^&]+)/);
+      const italics = spec.startsWith('ital,');
+      if (italics) parsed.italics = true;
+      if (axisMatch) {
+        const tokens = axisMatch[1].split(';');
+        const weights = new Set<number>();
+        for (const tok of tokens) {
+          const parts = tok.split(',');
+          const wghtStr = parts.length === 2 ? parts[1] : parts[0];
+          if (wghtStr.includes('..')) {
+            const [lo, hi] = wghtStr.split('..').map((n) => parseInt(n, 10));
+            if (!isNaN(lo) && !isNaN(hi)) {
+              for (let w = lo; w <= hi; w += 100) weights.add(w);
+            }
+          } else {
+            const w = parseInt(wghtStr, 10);
+            if (!isNaN(w)) weights.add(w);
+          }
+        }
+        if (weights.size > 0) parsed.weights = [...weights].sort((a, b) => a - b);
+      }
+    }
+    return parsed;
+  });
+}
+/**
+ * Regex-extract family name + weight from arbitrary CSS text containing
+ * @font-face rules. Used for pasted raw @font-face blocks and for
+ * fetch-and-parse of opaque URLs (Typekit, generic).
+ */
+export function parseFontFaceText(css: string): ParsedFamily[] {
+  const rules = [...css.matchAll(/@font-face\s*\{([^}]*)\}/g)];
+  const byName = new Map<string, { weights: Set<number>; italics: boolean }>();
+  for (const [, body] of rules) {
+    const nameMatch = body.match(/font-family\s*:\s*([^;]+);/i);
+    if (!nameMatch) continue;
+    const name = nameMatch[1].trim().replace(/^['"]|['"]$/g, '');
+    const weightMatch = body.match(/font-weight\s*:\s*([^;]+);/i);
+    const styleMatch = body.match(/font-style\s*:\s*([^;]+);/i);
+    const entry = byName.get(name) ?? { weights: new Set<number>(), italics: false };
+    if (weightMatch) {
+      const val = weightMatch[1].trim();
+      const rangeParts = val.split(/\s+/).map((s) => parseInt(s, 10)).filter((n) => !isNaN(n));
+      if (rangeParts.length === 2) {
+        const [lo, hi] = rangeParts;
+        for (let w = lo; w <= hi; w += 100) entry.weights.add(w);
+      } else if (rangeParts.length === 1) {
+        entry.weights.add(rangeParts[0]);
+      }
+    }
+    if (styleMatch && /italic|oblique/i.test(styleMatch[1])) entry.italics = true;
+    byName.set(name, entry);
+  }
+  return [...byName.entries()].map(([name, e]) => ({
+    name,
+    ...(e.weights.size > 0 ? { weights: [...e.weights].sort((a, b) => a - b) } : {}),
+    ...(e.italics ? { italics: true } : {}),
+  }));
+}
+/**
+ * Fetch a CSS URL and extract its @font-face families. Used for Typekit kits
+ * and generic CSS URLs whose families aren't encoded in the URL itself.
+ * Returns null if the fetch fails (CORS or network).
+ */
+export async function fetchAndParseCss(url: string): Promise<ParsedFamily[] | null> {
+  try {
+    const res = await fetch(url, { method: 'GET' });
+    if (!res.ok) return null;
+    const text = await res.text();
+    const families = parseFontFaceText(text);
+    return families.length > 0 ? families : null;
+  } catch {
+    return null;
+  }
+}
+export function guessKindFromUrl(url: string): FontSourceKind | null {
+  try {
+    const host = new URL(url).hostname;
+    if (host.includes('fonts.googleapis.com')) return 'google';
+    if (host.includes('use.typekit.net') || host.includes('typekit.com')) return 'typekit';
+    return 'css-url';
+  } catch {
+    return null;
+  }
+}
+export function familiesToFontFamilies(sourceId: string, parsed: ParsedFamily[]): FontFamily[] {
+  return parsed.map((p) => ({
+    id: `${sourceId}:${p.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`,
+    name: p.name,
+    cssName: `"${p.name}"`,
+    ...(p.weights ? { weights: p.weights } : {}),
+    ...(p.italics ? { italics: p.italics } : {}),
+  }));
+}
+/**
+ * Given a URL, return a best-effort parsed set of families. For Google URLs,
+ * families are derivable from the querystring directly. For other URLs we
+ * attempt to fetch-and-parse the CSS. `null` means "unknown — ask the user
+ * to name the families manually."
+ */
+export async function discoverFamiliesFromUrl(url: string): Promise<ParsedFamily[] | null> {
+  const kind = guessKindFromUrl(url);
+  if (!kind) return null;
+  if (kind === 'google') {
+    const direct = parseGoogleFontsUrl(url);
+    if (direct && direct.length > 0) return direct;
+  }
+  return fetchAndParseCss(url);
+}
+export function buildSourceFromUrl(url: string, pickedFamilies: ParsedFamily[]): FontSource {
+  const kind = guessKindFromUrl(url) ?? 'css-url';
+  const id = `src_${kind}_${Math.random().toString(36).slice(2, 10)}`;
+  return {
+    id,
+    kind,
+    url,
+    label: kind === 'google' ? 'Google Fonts' : kind === 'typekit' ? 'Adobe Typekit' : 'CSS URL',
+    families: familiesToFontFamilies(id, pickedFamilies),
+  };
+}
+export function buildSourceFromFontFaceText(css: string, pickedFamilies: ParsedFamily[]): FontSource {
+  const id = `src_fontface_${Math.random().toString(36).slice(2, 10)}`;
+  return {
+    id,
+    kind: 'font-face',
+    cssText: css,
+    label: 'Local @font-face',
+    families: familiesToFontFamilies(id, pickedFamilies),
+  };
+}

package/src/lib/index.ts CHANGED Viewed

@@ -1,50 +1,68 @@
 export { default as LiveEditorOverlay } from './LiveEditorOverlay.svelte';
-export type { NavLink } from './LiveEditorOverlay.svelte';
+export type { NavLink } from './navLinkTypes';
 export { default as ColumnsOverlay } from './ColumnsOverlay.svelte';
-export { columnsVisible, toggleColumns } from './columnsOverlay';
+export { columnsVisible, toggleColumns, init as initColumnsOverlay } from './columnsOverlay';
 export { configureEditor, storageKey } from './editorConfig';
-export {
-  editorConfigs,
-  loadedConfigs,
-  configsLoadedFromFile,
-  activeFileName,
-} from './editorConfigStore';
+export { activeFileName } from './editorConfigStore';
+export { init as initRouter, route, navigate } from './router';
+export { init as initCssVarSync } from './cssVarSync';
+export { init as initEditorStore } from './editorStore';
-export {
-  setCssVar,
-  removeCssVar,
-  applyCssVariables,
-  clearAllCssVarOverrides,
-  scrapeCssVariables,
-} from './cssVarSync';
+export { setCssVar, removeCssVar } from './cssVarSync';
 export {
-  listTokenFiles,
-  loadTokenFile,
-  saveTokenFile,
-  deleteTokenFile,
-  getActiveTokens,
+  listThemes,
+  loadTheme,
+  saveTheme,
+  deleteTheme,
+  getActiveTheme,
   setActiveFile,
   getProductionInfo,
   setProductionFile,
-  listBackups,
-  getBackupContent,
-  restoreBackup,
-  getCurrentCss,
   sanitizeFileName,
-} from './tokenService';
-export type { ProductionInfo, BackupEntry } from './tokenService';
+} from './themeService';
+export type { ProductionInfo } from './themeService';
 export type {
   PaletteConfig,
-  TokenFile,
-  TokenFileMeta,
+  Theme,
+  ThemeMeta,
   GradientStyle,
   GradientStop,
-} from './tokenTypes';
+  FontSource,
+  FontSourceKind,
+  FontFamily,
+  FontStack,
+  FontStackSlot,
+  FontStackVariable,
+  SystemCascadePreset,
+  GenericFamily,
+  Preset,
+  PresetMeta,
+} from './themeTypes';
+export {
+  listPresets,
+  loadPreset,
+  savePreset,
+  deletePreset,
+  getActivePreset,
+  setActivePreset,
+  applyPreset,
+  captureCurrentAsPreset,
+} from './presetService';
+export type { ApplyPresetResult } from './presetService';
+export {
+  applyFontSources,
+  applyFontStacks,
+  resolveFontStackValues,
+  SYSTEM_CASCADES,
+} from './fontLoader';
+export { migrateThemeFonts, defaultFontSources, defaultFontStacks } from './fontMigration';
 export { hexToOklch, oklchToHex, gamutClamp } from './oklch';
 export type { Oklch } from './oklch';
-export { initializeTokens } from './tokenInit';
+export { initializeTheme } from './themeInit';

package/src/lib/lazyConfig.test.ts ADDED Viewed

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { get } from 'svelte/store';
+import { configureEditor, storageKey } from './editorConfig';
+import { route, navigate, init as initRouter } from './router';
+describe('M8 — lazy storage prefix resolution', () => {
+  it('storageKey() reflects the prefix at call time, not at module-load time', () => {
+    // The default prefix is `lt-`. configureEditor mutates it; subsequent
+    // storageKey() calls must observe the new prefix.
+    expect(storageKey('editor-state')).toBe('lt-editor-state');
+    configureEditor({ storagePrefix: 'test-' });
+    expect(storageKey('editor-state')).toBe('test-editor-state');
+    // Reset for any later tests in the file.
+    configureEditor({ storagePrefix: 'lt-' });
+    expect(storageKey('editor-state')).toBe('lt-editor-state');
+  });
+  it('editorStore persistNow uses the configured prefix at write time', async () => {
+    // Reconfigure BEFORE importing editorStore — but since these tests share
+    // module state with other suites, we can only verify that getPersistKey
+    // behaviour is lazy via the storageKey contract above. The functional
+    // round-trip is covered by manual library-import tests.
+    configureEditor({ storagePrefix: 'lazy-' });
+    expect(storageKey('editor-state')).toBe('lazy-editor-state');
+    configureEditor({ storagePrefix: 'lt-' });
+  });
+});
+describe('m9 — navigate() emits exactly one route store update', () => {
+  beforeEach(() => {
+    // Pin a stable starting route. Router.init() is idempotent; calling it
+    // here is safe even if some earlier test already initialised it.
+    initRouter();
+    // Reset history pushState side effects to a clean state by overwriting
+    // the current route to '/'.
+    history.replaceState(null, '', '/');
+    route.set('/');
+  });
+  it('produces a single store write per navigate() call', () => {
+    const sub = vi.fn();
+    const unsub = route.subscribe(sub);
+    sub.mockClear(); // drop the immediate-emit on subscribe
+    navigate('/foo');
+    expect(sub).toHaveBeenCalledTimes(1);
+    expect(get(route)).toBe('/foo');
+    unsub();
+  });
+});

package/src/lib/migrations/2026-04-24-component-prefix-and-suffix-renames.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import type { Migration } from './index';
+/**
+ * Component-config migration (2026-04-24): unabbreviate component prefixes
+ * and apply the per-component suffix rewrites that landed alongside the
+ * prefix rename.
+ *
+ * Prefix layer: `--segment-*` → `--segmentedcontrol-*`, etc. — undoes the
+ * abbreviated namespaces that were used briefly before we standardised on
+ * full component names.
+ *
+ * Suffix layer: progressbar's `-track-bg` → `-track-surface`, and
+ * inlineeditactions' `-bg-hover` / `-bg` → `-hover-surface` / `-surface`.
+ *
+ * Whole-key rename: detailnav's only abbreviated token (`--detail-nav-bg`
+ * → `--detailnav-surface`) is handled inline.
+ */
+const COMPONENT_PREFIX_RENAMES: Record<string, string> = {
+  '--segment-': '--segmentedcontrol-',
+  '--collapsible-': '--collapsiblesection-',
+  '--progress-': '--progressbar-',
+  '--section-divider-': '--sectiondivider-',
+  '--radio-': '--radiobutton-',
+  '--inline-edit-': '--inlineeditactions-',
+};
+const COMPONENT_SUFFIX_RENAMES: Record<string, Array<[string, string]>> = {
+  progressbar: [['-track-bg', '-track-surface']],
+  inlineeditactions: [
+    ['-bg-hover', '-hover-surface'],
+    ['-bg', '-surface'],
+  ],
+};
+export const componentMigration_2026_04_24_prefixAndSuffixRenames: Migration = {
+  id: '2026-04-24-component-prefix-and-suffix-renames',
+  fromVersion: 0,
+  toVersion: 1,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const component = meta.component ?? '';
+    const out: Record<string, string> = {};
+    const suffixRules = COMPONENT_SUFFIX_RENAMES[component] ?? [];
+    for (const [oldKey, value] of Object.entries(rawVars)) {
+      let key = oldKey;
+      // One-off whole-key rename (detailnav's only abbreviated token).
+      if (key === '--detail-nav-bg') key = '--detailnav-surface';
+      for (const [oldPrefix, newPrefix] of Object.entries(COMPONENT_PREFIX_RENAMES)) {
+        if (key.startsWith(oldPrefix)) {
+          key = newPrefix + key.slice(oldPrefix.length);
+          break;
+        }
+      }
+      for (const [oldSuffix, newSuffix] of suffixRules) {
+        if (key.endsWith(oldSuffix)) {
+          key = key.slice(0, -oldSuffix.length) + newSuffix;
+          break;
+        }
+      }
+      if (!(key in out)) out[key] = value;
+    }
+    return out;
+  },
+};