@motion-proto/live-tokens 0.56.1 → 0.57.0

package/src/editor/core/store/editorViewStore.ts

@@ -1,13 +1,13 @@
 import { writable } from 'svelte/store';
 
-export type EditorView = 'tokens' | 'components' | 'colors';
+export type EditorView = 'tokens' | 'components' | 'colors' | 'sketch';
 export type SidebarCondensed = boolean | 'auto';
 
 const VIEW_KEY = 'lt.editorView';
 const CONDENSED_KEY = 'lt.sidebarCondensed';
 
 function isEditorView(v: unknown): v is EditorView {
-  return v === 'tokens' || v === 'components' || v === 'colors';
+  return v === 'tokens' || v === 'components' || v === 'colors' || v === 'sketch';
 }
 
 // Session-scoped, not persistent: opening the editor fresh always starts on

package/src/editor/core/store/gradientSource.ts

@@ -24,13 +24,17 @@ import {
   setGradientStop,
   addGradientStop,
   removeGradientStop,
+  setGradientDirection,
 } from '../themes/slices/gradients';
+import type { LinearDirection } from '../themes/parsers/gradient';
 import { setComponentAlias } from '../themes/slices/components';
 import { mutate } from './editorCore';
 
 export interface GradientSourceSnapshot {
   type: GradientType;
   angle: number;
+  /** `to <side-or-corner>` heading; overrides `angle` when set. */
+  direction?: LinearDirection;
   /** Horizontal center for radial gradients, 0–100. */
   centerX?: number;
   /** Per-axis stretch factors for the radial ellipse (1 = unscaled). */
@@ -48,6 +52,7 @@ export interface GradientSource {
   setAll(next: GradientSourceSnapshot): void;
   setType(type: GradientType): void;
   setAngle(angle: number): void;
+  setDirection(direction: LinearDirection | undefined): void;
   setCenterX(centerX: number): void;
   setAspect(aspect: { x: number; y: number }): void;
   setStop(index: number, partial: Partial<GradientTokenStop>): void;
@@ -63,6 +68,7 @@ export function colorsAndTypeGradientSource(variable: string): GradientSource {
     return {
       type: t.type,
       angle: t.angle,
+      direction: t.direction,
       centerX: t.centerX,
       aspectX: t.aspectX,
       aspectY: t.aspectY,
@@ -78,6 +84,7 @@ export function colorsAndTypeGradientSource(variable: string): GradientSource {
     setCenterX: (x) => setGradientCenterX(variable, x),
     setAspect: (a) => setGradientAspect(variable, a),
     setStop: (i, p) => setGradientStop(variable, i, p),
+    setDirection: (d) => setGradientDirection(variable, d),
     addStop: (s) => addGradientStop(variable, s),
     removeStop: (i) => removeGradientStop(variable, i),
   };
@@ -130,6 +137,7 @@ export function componentGradientSource(component: string, varName: string): Gra
     return {
       type: value.type,
       angle: value.angle,
+      direction: value.direction,
       centerX: value.centerX,
       aspectX: value.aspectX,
       aspectY: value.aspectY,
@@ -151,6 +159,7 @@ export function componentGradientSource(component: string, varName: string): Gra
           ? {
               type: ref.value.type,
               angle: ref.value.angle,
+              ...(ref.value.direction !== undefined ? { direction: ref.value.direction } : {}),
               ...(ref.value.centerX !== undefined ? { centerX: ref.value.centerX } : {}),
               ...(ref.value.aspectX !== undefined ? { aspectX: ref.value.aspectX } : {}),
               ...(ref.value.aspectY !== undefined ? { aspectY: ref.value.aspectY } : {}),
@@ -167,6 +176,7 @@ export function componentGradientSource(component: string, varName: string): Gra
     setAll: (next) => writeComponentGradient(component, varName, {
       type: next.type,
       angle: next.angle,
+      ...(next.direction !== undefined ? { direction: next.direction } : {}),
       ...(next.centerX !== undefined ? { centerX: next.centerX } : {}),
       ...(next.aspectX !== undefined ? { aspectX: next.aspectX } : {}),
       ...(next.aspectY !== undefined ? { aspectY: next.aspectY } : {}),
@@ -181,7 +191,11 @@ export function componentGradientSource(component: string, varName: string): Gra
       }
       g.type = t;
     }),
-    setAngle: (a) => update(`set gradient angle ${varName}`, (g) => { g.angle = a; }),
+    setAngle: (a) => update(`set gradient angle ${varName}`, (g) => {
+      g.angle = a;
+      g.direction = undefined;
+    }),
+    setDirection: (d) => update(`set gradient direction ${varName}`, (g) => { g.direction = d; }),
     setCenterX: (x) => update(`set gradient center ${varName}`, (g) => { g.centerX = x; }),
     setAspect: (a) => update(`set gradient aspect ${varName}`, (g) => {
       // Drop axes that equal 1 so persisted JSON stays minimal and pre-aspect

package/src/editor/core/themes/parsers/gradient.ts

@@ -3,6 +3,7 @@
  * A component alias that owns a gradient serializes to one of two shapes:
  *
  *   linear-gradient(<angle>deg, <stop>, <stop>, …)
+ *   linear-gradient(<to side-or-corner>, <stop>, <stop>, …)
  *   radial-gradient(<shape> at <cx>% 50%, <stop>, <stop>, …)
  *
  * `solid` and `none` are NOT represented here. `solid` renders as its first
@@ -35,6 +36,47 @@
  */
 import { parseColorOpacity, formatColorOpacity } from './colorOpacity';
 
+/** The `to <side-or-corner>` keywords CSS accepts in place of an angle. A
+ *  keyword angles the gradient line off the box's own diagonal, so it tracks
+ *  the element's aspect ratio where a fixed angle cannot: `to bottom right`
+ *  reads as ~95deg across a wide heading and ~111deg once that heading wraps.
+ *  That is the whole reason to carry them — a degree cannot express it. */
+export const LINEAR_DIRECTIONS = [
+  'to top',
+  'to top right',
+  'to right',
+  'to bottom right',
+  'to bottom',
+  'to bottom left',
+  'to left',
+  'to top left',
+] as const;
+
+export type LinearDirection = (typeof LINEAR_DIRECTIONS)[number];
+
+/** The angle each keyword equals on a square box. Sides are exact at any
+ *  aspect (`to right` is 90deg, always); corners hold only at 1:1, which is
+ *  the point of the keyword. Stored alongside a direction so the dial shows
+ *  something honest and clearing the keyword lands on the nearest angle
+ *  rather than snapping to 0deg (bottom-to-top). */
+export const DIRECTION_ANGLES: Record<LinearDirection, number> = {
+  'to top': 0,
+  'to top right': 45,
+  'to right': 90,
+  'to bottom right': 135,
+  'to bottom': 180,
+  'to bottom left': 225,
+  'to left': 270,
+  'to top left': 315,
+};
+
+function parseDirection(raw: string): LinearDirection | null {
+  const norm = raw.trim().toLowerCase().replace(/\s+/g, ' ');
+  return (LINEAR_DIRECTIONS as readonly string[]).includes(norm)
+    ? (norm as LinearDirection)
+    : null;
+}
+
 export interface GradientStop {
   /** 0–100 percentage along the gradient axis. */
   position: number;
@@ -54,6 +96,10 @@ export interface GradientStop {
 export interface GradientValue {
   type: 'linear' | 'radial' | 'solid' | 'none';
   angle: number;
+  /** Emitted in place of `angle` on a `linear` gradient. `angle` is retained
+   *  underneath so clearing the direction restores the user's degrees, the
+   *  same way a radial keeps its angle. */
+  direction?: LinearDirection;
   radius?: number;
   centerX?: number;
   aspectX?: number;
@@ -101,7 +147,8 @@ function formatRadialShape(v: GradientValue): string {
  *  into a CSS background declaration.
  *  - `none`   → `transparent` (no background paint).
  *  - `solid`  → the first stop's colour (no gradient function).
- *  - `linear` → `linear-gradient(<angle>deg, <stops>)`.
+ *  - `linear` → `linear-gradient(<angle>deg, <stops>)`, or
+ *    `linear-gradient(<direction>, <stops>)` when `direction` is set.
  *  - `radial` → `radial-gradient(<shape> at <centerX>% 50%, <stops>)`, where
  *    shape is `circle [radius]` at aspect 1 and `ellipse rx ry` otherwise.
  *    Aspects are independent stretch factors, not an area-preserving ratio:
@@ -113,12 +160,16 @@ export function formatGradientValue(v: GradientValue): string {
     return first ? formatStopColor(first) : 'transparent';
   }
   const stops = formatGradientStops(v.stops);
-  if (v.type === 'linear') return `linear-gradient(${v.angle}deg, ${stops})`;
+  if (v.type === 'linear') {
+    return `linear-gradient(${v.direction ?? `${v.angle}deg`}, ${stops})`;
+  }
   return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
 }
 
 const NUM = String.raw`-?\d+(?:\.\d+)?`;
-const LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, 'i');
+const HEADING = String.raw`${NUM}deg|to\s+\w+(?:\s+\w+)?`;
+const LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${HEADING})\s*,\s*(.+)\)$`, 'i');
+const DEG_RE = new RegExp(String.raw`^(${NUM})deg$`, 'i');
 const RADIAL_RE = new RegExp(
   String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
   'i',
@@ -192,8 +243,15 @@ export function parseGradientValue(value: string): GradientValue | null {
   const css = value.trim();
   const linear = css.match(LINEAR_RE);
   if (linear) {
+    const deg = linear[1].match(DEG_RE);
+    const direction = deg ? null : parseDirection(linear[1]);
+    // A heading that is neither degrees nor a keyword we know is not our form.
+    if (!deg && !direction) return null;
     const stops = parseStops(linear[2]);
-    return stops && { type: 'linear', angle: parseFloat(linear[1]), stops };
+    if (!stops) return null;
+    return deg
+      ? { type: 'linear', angle: parseFloat(deg[1]), stops }
+      : { type: 'linear', angle: 0, direction: direction!, stops };
   }
   const radial = css.match(RADIAL_RE);
   if (!radial) return null;

package/src/editor/core/themes/slices/gradients.ts

@@ -1,5 +1,5 @@
 /**
- * Gradients slice — fixed four-slot scale (--gradient-1 … --gradient-4),
+ * Gradients slice — an open `--gradient-N` library seeded with four slots,
  * each rendering to a single CSS var. Stops carry token-name references
  * (`--color-brand-500`); the renderer wraps them in `var(...)` so palette
  * edits flow through.
@@ -8,15 +8,34 @@ import type { EditorState, GradientToken, GradientTokenStop, GradientType } from
 import type { GradientDiskToken } from '../themeTypes';
 import { mutate } from '../../store/editorCore';
 import { formatGradientValue, formatGradientStops as formatStopList } from '../parsers/gradient';
+import { DIRECTION_ANGLES, type LinearDirection } from '../parsers/gradient';
 
 export { formatGradientValue };
 
+/** A well-formed library slot: `--gradient-` followed by a number. Anything
+ *  else is pre-numbering data the loader and the persistence guard reject. */
+export const GRADIENT_SLOT_RE = /^--gradient-\d+$/;
+
+export function isGradientSlot(variable: string): boolean {
+  return GRADIENT_SLOT_RE.test(variable);
+}
+
+/** The next free slot name, so callers never collide with an existing one. */
+export function nextGradientSlot(tokens: readonly GradientToken[]): string {
+  const used = new Set(tokens.map((t) => t.variable));
+  for (let n = 1; ; n++) {
+    const name = `--gradient-${n}`;
+    if (!used.has(name)) return name;
+  }
+}
+
 export function makeDefaultGradients(): GradientToken[] {
   return [
     {
       variable: '--gradient-1',
       type: 'linear',
-      angle: 90,
+      angle: DIRECTION_ANGLES['to right'],
+      direction: 'to right',
       stops: [
         { position: 0, color: '--color-brand-500' },
         { position: 100, color: '--color-accent-500' },
@@ -34,7 +53,8 @@ export function makeDefaultGradients(): GradientToken[] {
     {
       variable: '--gradient-3',
       type: 'linear',
-      angle: 90,
+      angle: DIRECTION_ANGLES['to right'],
+      direction: 'to right',
       stops: [
         { position: 0, color: '--color-success-500' },
         { position: 100, color: '--color-info-500' },
@@ -57,20 +77,29 @@ export function makeDefaultGradients(): GradientToken[] {
  * field and scrub the rendered `--gradient-N` strings from the vars bag — they
  * are a projection kept for production CSS, never a basis. Files without the
  * field (saved before gradients round-tripped) keep the seeded defaults, which
- * match what those files rendered. A file whose slots don't match the fixed
- * four is stale-shaped and also keeps defaults, mirroring the persistence
- * layer's `migrateGradients` guard.
+ * match what those files rendered.
+ *
+ * The library is open-ended: any number of `--gradient-N` slots loads, so a
+ * project can carry as many as its design needs. What still fails the guard is
+ * a stale *shape* — a token named `--gradient-progress`, from before the slots
+ * were numbered — which keeps defaults, mirroring `migrateGradients`.
  */
 export function loadGradientsFromFile(
   next: EditorState,
   gradients: GradientDiskToken[] | undefined,
   rawVars: Record<string, string>,
 ): void {
-  const expected = makeDefaultGradients().map((g) => g.variable).sort();
-  for (const name of expected) delete rawVars[name];
-  const have = (gradients ?? []).map((g) => g.variable).sort();
-  const matches = have.length === expected.length && expected.every((v, i) => v === have[i]);
-  if (matches) next.gradients.tokens = structuredClone(gradients) as GradientToken[];
+  for (const g of makeDefaultGradients()) {
+    delete rawVars[g.variable];
+    delete rawVars[stopsVariable(g.variable)];
+  }
+  for (const t of gradients ?? []) {
+    delete rawVars[t.variable];
+    delete rawVars[stopsVariable(t.variable)];
+  }
+  if (gradients?.length && gradients.every((g) => isGradientSlot(g.variable))) {
+    next.gradients.tokens = structuredClone(gradients) as GradientToken[];
+  }
 }
 
 /** Stops portion only — used by the palette selector to materialize a
@@ -84,6 +113,7 @@ function formatGradient(t: GradientToken): string {
   return formatGradientValue({
     type: t.type,
     angle: t.angle,
+    direction: t.direction,
     centerX: t.centerX,
     aspectX: t.aspectX,
     aspectY: t.aspectY,
@@ -91,9 +121,22 @@ function formatGradient(t: GradientToken): string {
   });
 }
 
+/** The suffix carrying a token's stop list on its own, so a consumer can keep
+ *  the theme's colours while supplying its own geometry:
+ *  `linear-gradient(to top, var(--gradient-5-stops))`. The same stops then
+ *  serve every direction a design needs without duplicating a token per angle. */
+export const STOPS_VAR_SUFFIX = '-stops';
+
+export function stopsVariable(variable: string): string {
+  return `${variable}${STOPS_VAR_SUFFIX}`;
+}
+
 export function gradientsToVars(g: EditorState['gradients']): Record<string, string> {
   const out: Record<string, string> = {};
-  for (const t of g.tokens) out[t.variable] = formatGradient(t);
+  for (const t of g.tokens) {
+    out[t.variable] = formatGradient(t);
+    out[stopsVariable(t.variable)] = formatStopList(t.stops);
+  }
   return out;
 }
 
@@ -105,13 +148,14 @@ function findGradient(s: EditorState, variable: string): GradientToken | undefin
  *  Used by the editor to restore a pre-edit snapshot on Cancel. */
 export function setGradient(
   variable: string,
-  next: { type: GradientType; angle: number; centerX?: number; aspectX?: number; aspectY?: number; stops: GradientTokenStop[] },
+  next: { type: GradientType; angle: number; direction?: LinearDirection; centerX?: number; aspectX?: number; aspectY?: number; stops: GradientTokenStop[] },
 ): void {
   mutate(`replace gradient ${variable}`, (s) => {
     const t = findGradient(s, variable);
     if (!t) return;
     t.type = next.type;
     t.angle = next.angle;
+    t.direction = next.direction;
     t.centerX = next.centerX;
     t.aspectX = next.aspectX;
     t.aspectY = next.aspectY;
@@ -126,10 +170,27 @@ export function setGradientType(variable: string, type: GradientType): void {
   });
 }
 
+/** Setting degrees clears any direction keyword: the two are alternative
+ *  headings for the same gradient, and the one you just set is the one you
+ *  meant. The angle underneath a direction is preserved until then. */
 export function setGradientAngle(variable: string, angle: number): void {
   mutate(`set gradient angle ${variable}`, (s) => {
     const t = findGradient(s, variable);
-    if (t) t.angle = angle;
+    if (!t) return;
+    t.angle = angle;
+    t.direction = undefined;
+  });
+}
+
+/** `undefined` drops back to the stored `angle`. Setting a keyword also moves
+ *  `angle` to that keyword's square-box equivalent, so the dial reflects the
+ *  gradient and clearing the keyword keeps roughly the same direction. */
+export function setGradientDirection(variable: string, direction: LinearDirection | undefined): void {
+  mutate(`set gradient direction ${variable}`, (s) => {
+    const t = findGradient(s, variable);
+    if (!t) return;
+    t.direction = direction;
+    if (direction) t.angle = DIRECTION_ANGLES[direction];
   });
 }
 

package/src/editor/core/themes/themeTypes.ts

@@ -111,7 +111,12 @@ export interface FontSource {
 
 export type SystemCascadePreset = 'system-ui-sans' | 'system-ui-serif' | 'system-ui-mono';
 export type GenericFamily = 'sans-serif' | 'serif' | 'monospace' | 'cursive' | 'fantasy';
-export type FontStackVariable = '--font-display' | '--font-sans' | '--font-serif' | '--font-mono';
+export type FontStackVariable =
+  | '--font-display'
+  | '--font-sans'
+  | '--font-serif'
+  | '--font-mono'
+  | '--font-editorial';
 
 export type FontStackSlot =
   | { kind: 'project'; familyId: string }

package/src/editor/docs/Docs.svelte

@@ -98,6 +98,7 @@
         { path: '01-overview',         title: 'Overview' },
         { path: 'getting-started',     title: 'Getting started' },
         { path: 'editing-tokens',      title: 'Editing tokens' },
+        { path: 'sketch-mode',         title: 'Sketch mode' },
         { path: 'themes-workflow',     title: 'Themes' },
         { path: 'where-themes-live',   title: 'Where themes live' },
         { path: 'creating-components', title: 'Creating components' },
@@ -254,7 +255,7 @@
     <SideNavigation
       class="docs-sidebar"
       sections={navSections}
-      titleLabel="Live Tokens"
+      titleLabel="LiveTokens"
       titleHref="#01-overview"
       currentPath={parsedHash.chapter}
       open={sidebarOpen}
@@ -283,11 +284,11 @@
     <div class="docs-main" bind:this={scrollPane}>
     <header class="docs-page-header">
       <div class="title-block">
-        <p class="eyebrow">Live Tokens</p>
+        <p class="eyebrow">LiveTokens</p>
         <h1>Documentation</h1>
         <p class="lede">
           Set up a project, edit your tokens live, and ship a theme. A short
-          guide to styling and building with Live Tokens.
+          guide to styling and building with LiveTokens.
         </p>
       </div>
     </header>

package/src/editor/docs/chapters.ts

@@ -13,6 +13,7 @@ export const chapters: Chapter[] = [
   { id: '01-overview',         title: 'Overview' },
   { id: 'getting-started',     title: 'Getting started' },
   { id: 'editing-tokens',      title: 'Editing tokens' },
+  { id: 'sketch-mode',         title: 'Sketch mode' },
   { id: 'themes-workflow',     title: 'Themes' },
   { id: 'where-themes-live',   title: 'Where themes live' },
   { id: 'creating-components', title: 'Creating components' },

package/src/editor/docs/content/01-overview.md

@@ -1,6 +1,6 @@
 # Overview
 
-Live Tokens is a design system for building Svelte microsites quickly. You
+LiveTokens is a design system for building Svelte microsites quickly. You
 style your site by editing tokens and components in a live editor. When it looks right, you save the theme and ship it.
 
 ## How it works
@@ -27,6 +27,7 @@ style your site by editing tokens and components in a live editor. When it looks
 - **[Getting started](getting-started.md)**: scaffold a project and make your
   first edit.
 - **[Editing tokens](editing-tokens.md)**: a tour of the editor.
+- **[Sketch mode](sketch-mode.md)**: redraw the page by hand.
 - **[Themes](themes-workflow.md)**: save, switch, and ship.
 - **[Creating components](creating-components.md)**: make your own components
   editable.

package/src/editor/docs/content/editing-tokens.md

@@ -3,12 +3,16 @@
 A tour of the editor. The page behind it repaints on every change; saving
 writes a theme file you can reload later.
 
-The editor has two views:
+The editor has four views:
 
 - **Tokens**: the design-system primitives (colour, type, spacing, and so on).
   They apply everywhere your site uses them.
+- **Colors**: the harmony wheel, the palette curves, and the story your colours
+  tell across a page.
 - **Components**: per-component editors. Re-Assign what tokens a component uses
   without changing the underlying system.
+- **Sketch**: an effect layer that redraws the page by hand. See
+  [Sketch mode](sketch-mode.md).
 
 This page covers **Tokens**. For components, see
 [Creating components](creating-components.md).

package/src/editor/docs/content/sketch-mode.md

@@ -0,0 +1,89 @@
+# Sketch mode
+
+Sketch mode redraws your whole page as if it had been drawn by hand. Every
+component keeps its own colours, spacing and corners; what changes is the line
+they are drawn with.
+
+It is an effect layer, not a set of token values. It reads nothing from your
+theme and writes nothing back, so it never touches a token, never lands in a
+theme file, and never reaches the CSS you ship. Turn it off and every trace of
+it goes.
+
+Open the **Sketch** view in the editor and switch **Sketch mode** on. The effect
+applies to the page behind the editor as well as to the preview, so what you see
+in context is what it does.
+
+## What it draws
+
+Each component's fill and outline are repainted from the tokens that component
+already owns. The real background and border are hidden behind them, then both
+are pushed around one shared field of noise. Because every component samples the
+same field, the whole page reads as one drawing rather than as a set of
+separately wobbled boxes.
+
+## The presets
+
+Seven looks ship with the package, and each is a complete set of dials rather
+than a style name:
+
+- **Pencil.** Two graphite passes on their own seeds, so the outline disagrees
+  with itself the way a hand coming back round does.
+- **Marker.** A broad translucent nib gone round twice on the same line, so the
+  overlap darkens and the ink pools where it slows.
+- **Whiteboard.** The fattest nib on glass, with a mask that streaks the fill
+  like a half-wiped board.
+- **Hatched.** An etching. The fill is angled shading and the outline a single
+  hard-edged scratch.
+- **Dashed.** A drafting outline: one slow drift along the ruler, broken into
+  strokes. The clean pole.
+- **Napkin.** Ballpoint in a hurry. Everything loose at once.
+- **Dry marker.** Ink that ran out. One scratchy pass over a mostly eaten fill.
+
+Pick one, then move whatever you like. **Save** keeps your dials under a name of
+your own, alongside the shipped seven, as a file under
+`src/live-tokens/data/sketch-presets/`.
+
+## The dials
+
+- **Border.** How far the outline travels and how long its wave is, then its
+  width, ink, pressure and pooling. A second pass either copies the first line a
+  few pixels off or runs it through the pen again on its own seed.
+- **Fill.** Solid or hatched, how far the fill's edge travels, and how far each
+  instance is offset, rotated and scaled from its neighbours. **Ink coverage**
+  thins the fill with a field of blotches: set their size, how many levels of
+  detail, how pale and how dense they go, and how soft their edges are.
+- **Shape.** **Corner spread** rounds each corner by its own share of the dial,
+  so no two match. **Corner travel** leans the drawn box into a quadrilateral
+  with no two sides parallel. This is the dial that stops a component reading as
+  a rectangle.
+- **Icons and SVG.** Glyph travel and wavelength on their own scale. A glyph is
+  all curves already, so it needs more travel than a card's long straight edge
+  before the wobble reads at all.
+- **Noise.** The shared field itself: its wavelength, how many layers of detail
+  sit on it, and the shape of its wave. A square wave sends nearly every edge to
+  full travel, which is what makes the effect stronger rather than bigger.
+
+## Drawing your own elements
+
+The effect displaces boxes, so anything drawn some other way is left alone. A
+rule made from a `border` is not a box; make it an element and tell the layer
+what to draw it with:
+
+```css
+.rule {
+  height: var(--border-width-2);
+  background: var(--border-brand);
+  --sketch-fill: var(--border-brand);
+}
+```
+
+`--sketch-fill`, `--sketch-stroke`, `--sketch-hatch-color` and `--sketch-radius`
+name the fill, the outline, the hatching ink and the corners for one element and
+everything inside it. Since the layer blanks the real background, an element
+whose fill matters under Sketch mode should name it here as well as paint it.
+
+Icons and inline SVG take the wobble directly, since a glyph has no box to
+redraw. Body type is left alone: an icon is a shape and survives a wobble, a
+paragraph is not. To keep the icons in a subtree crisp, set
+`--sketch-icon-off: none` on its root. It inherits, so one declaration covers
+everything under it.

package/src/editor/docs/content.generated.ts

@@ -2,10 +2,11 @@
 // Source of truth: src/editor/docs/content/*.md  ·  regenerate: npm run sync:docs
 
 export const docContent: Record<string, string> = {
-  "01-overview": "# Overview\n\nLive Tokens is a design system for building Svelte microsites quickly. You\nstyle your site by editing tokens and components in a live editor. When it looks right, you save the theme and ship it.\n\n## How it works\n\n- The editor runs in your dev server, on top of your real pages. You style in\n  context, not in a separate sandbox.\n- Every change updates a CSS variable, so the page repaints instantly. No\n  reload, no build step.\n- Saving writes a small JSON file into your project. Shipping bakes your chosen\n  theme into a plain CSS file that the build bundles.\n- The editor is dev-only. Production ships plain CSS variables and the\n  components you used, nothing else.\n\n## What you can edit\n\n- **Tokens**: the design-system primitives, colour palettes, type, spacing,\n  radius, shadow, and gradients, that apply across your whole site.\n- **Components**: the package ships about 25 editable components (Button,\n  IconButton, Card, Dialog, Table, and more). You style components by changing\n  the tokens assigned to each property.\n\n## Where to go next\n\n- **[Getting started](getting-started.md)**: scaffold a project and make your\n  first edit.\n- **[Editing tokens](editing-tokens.md)**: a tour of the editor.\n- **[Themes](themes-workflow.md)**: save, switch, and ship.\n- **[Creating components](creating-components.md)**: make your own components\n  editable.\n",
+  "01-overview": "# Overview\n\nLiveTokens is a design system for building Svelte microsites quickly. You\nstyle your site by editing tokens and components in a live editor. When it looks right, you save the theme and ship it.\n\n## How it works\n\n- The editor runs in your dev server, on top of your real pages. You style in\n  context, not in a separate sandbox.\n- Every change updates a CSS variable, so the page repaints instantly. No\n  reload, no build step.\n- Saving writes a small JSON file into your project. Shipping bakes your chosen\n  theme into a plain CSS file that the build bundles.\n- The editor is dev-only. Production ships plain CSS variables and the\n  components you used, nothing else.\n\n## What you can edit\n\n- **Tokens**: the design-system primitives, colour palettes, type, spacing,\n  radius, shadow, and gradients, that apply across your whole site.\n- **Components**: the package ships about 25 editable components (Button,\n  IconButton, Card, Dialog, Table, and more). You style components by changing\n  the tokens assigned to each property.\n\n## Where to go next\n\n- **[Getting started](getting-started.md)**: scaffold a project and make your\n  first edit.\n- **[Editing tokens](editing-tokens.md)**: a tour of the editor.\n- **[Sketch mode](sketch-mode.md)**: redraw the page by hand.\n- **[Themes](themes-workflow.md)**: save, switch, and ship.\n- **[Creating components](creating-components.md)**: make your own components\n  editable.\n",
   "creating-components": "# Creating components\n\nThe package ships about 25 editable components. When you need one it doesn't\nhave, you can make your own Svelte component editable, so anyone using the\neditor can re-point its colours, type, and spacing without touching code.\n\nThe simplest way is to ask Claude. The package bundles a Claude Code skill that\nknows the conventions, writes the files, and checks the result for you.\n\n## Install the skills\n\n```bash\nnpx @motion-proto/live-tokens setup-claude\n```\n\nThis copies the bundled skills into your project's `.claude/skills/`. Once\nthey're there, Claude Code picks them up automatically.\n\n## Ask for a component\n\nDescribe what you want in plain English. Phrases like these trigger the skill:\n\n- \"Add a Toggle component to live-tokens\"\n- \"Make this Svelte component editable in the live-tokens editor\"\n- \"Create a Stat component with a value and a label\"\n\nClaude asks any clarifying questions it needs (which variants, which states,\nwhich parts), then writes the component, registers it with the editor, and runs\nits verification checklist. When it finishes, open `/live-tokens/components` to see your new\ncomponent in the editor and confirm everything works.\n\n## What you get\n\n- A runtime component whose editable properties default to your theme tokens.\n- An editor entry that appears under **Custom** in the `/live-tokens/components` view.\n- The naming and wiring handled for you, so the component fits the system.\n\nAdvanced authors who want to write a component by hand can read the naming and\nstate-model conventions shipped in the package\n(`src/system/styles/CONVENTIONS.md` and the skill's own `SKILL.md`).\n",
-  "editing-tokens": "# Editing tokens\n\nA tour of the editor. The page behind it repaints on every change; saving\nwrites a theme file you can reload later.\n\nThe editor has two views:\n\n- **Tokens**: the design-system primitives (colour, type, spacing, and so on).\n  They apply everywhere your site uses them.\n- **Components**: per-component editors. Re-Assign what tokens a component uses\n  without changing the underlying system.\n\nThis page covers **Tokens**. For components, see\n[Creating components](creating-components.md).\n\n## Palettes\n\nMost colour work happens here. Each palette (Brand, Accent, Neutral, Canvas,\nSuccess, Warning, Info, Danger, and a few more) has:\n\n- **Base colour.** Pick a hex; the palette derives an 11-step ramp (100 to 950)\n  from it.\n- **Curves.** Three curves shape the ramp, in stack order: Hue, Saturation,\n  Lightness. Drag the handles to bias it warmer or cooler, more or less\n  saturated, darker or lighter. Hue drifts the ramp's temperature without\n  moving contrast, because OKLCH hue rotation is close to lightness-preserving.\n  It holds ±45 degrees; a bigger shift belongs on the base colour or the\n  harmony axis.\n- **Overrides.** Lock a single step to a hand-picked hex when the curve doesn't\n  land where you want.\n\nEditing a palette base ripples through every colour that depends on it, in real\ntime. Colours use OKLCH, so the ramp stays perceptually even across hues\nwithout muddy mid-tones.\n\n## Type\n\n- **Fonts.** Add sources from Google Fonts, Adobe (Typekit), a CSS URL, or an\n  inline `@font-face`. The font loads in the page as soon as you add it.\n- **Stacks.** Named font cascades you reference by token, such as a display\n  stack and a body stack.\n- **Sizes and weights.** A t-shirt scale (xs, sm, md, lg, xl, 2xl…) for size and\n  a numeric scale (100 to 900) for weight.\n\n## Spacing, radius, shadow\n\nNumeric scales with a slider per step.\n\n- **Spacing**: the padding, gap, and margin scale.\n- **Radius**: none through full.\n- **Shadow**: colour, offset, blur, spread, and opacity per step, with stacked\n  shadows supported.\n\nChange a step and every element using it repaints.\n\n## Overlays and gradients\n\n- **Overlays** are translucent tints layered over surfaces, like the subtle\n  tint a card gets on hover. Set a colour and opacity per state.\n- **Gradients** are reusable gradient tokens with a stop list and direction, for\n  hero panels and accent backgrounds.\n\n## Columns\n\nThe page-grid overlay. Set column count, gutter, and outer margin, and toggle\nthe visual guide with `Cmd/Ctrl+G`. Pages built on the column system reflow\nlive.\n\n## Saving\n\nThe editor saves to your browser continuously, so work survives a reload\nmid-edit. Writing a file is a separate step: the **Theme** panel at the foot of\nthe sidebar has **Save**, **Save As**, and **Load**, and each theme is one JSON\nfile under `src/live-tokens/data/themes/`.\n\nThe header gives you undo/redo (`Cmd/Ctrl+Z`, `Cmd/Ctrl+Shift+Z`). You can keep\nmany themes side by side; one is open at a time, and only **Adopt** publishes\none. See [Themes](themes-workflow.md) for the full lifecycle.\n",
+  "editing-tokens": "# Editing tokens\n\nA tour of the editor. The page behind it repaints on every change; saving\nwrites a theme file you can reload later.\n\nThe editor has four views:\n\n- **Tokens**: the design-system primitives (colour, type, spacing, and so on).\n  They apply everywhere your site uses them.\n- **Colors**: the harmony wheel, the palette curves, and the story your colours\n  tell across a page.\n- **Components**: per-component editors. Re-Assign what tokens a component uses\n  without changing the underlying system.\n- **Sketch**: an effect layer that redraws the page by hand. See\n  [Sketch mode](sketch-mode.md).\n\nThis page covers **Tokens**. For components, see\n[Creating components](creating-components.md).\n\n## Palettes\n\nMost colour work happens here. Each palette (Brand, Accent, Neutral, Canvas,\nSuccess, Warning, Info, Danger, and a few more) has:\n\n- **Base colour.** Pick a hex; the palette derives an 11-step ramp (100 to 950)\n  from it.\n- **Curves.** Three curves shape the ramp, in stack order: Hue, Saturation,\n  Lightness. Drag the handles to bias it warmer or cooler, more or less\n  saturated, darker or lighter. Hue drifts the ramp's temperature without\n  moving contrast, because OKLCH hue rotation is close to lightness-preserving.\n  It holds ±45 degrees; a bigger shift belongs on the base colour or the\n  harmony axis.\n- **Overrides.** Lock a single step to a hand-picked hex when the curve doesn't\n  land where you want.\n\nEditing a palette base ripples through every colour that depends on it, in real\ntime. Colours use OKLCH, so the ramp stays perceptually even across hues\nwithout muddy mid-tones.\n\n## Type\n\n- **Fonts.** Add sources from Google Fonts, Adobe (Typekit), a CSS URL, or an\n  inline `@font-face`. The font loads in the page as soon as you add it.\n- **Stacks.** Named font cascades you reference by token, such as a display\n  stack and a body stack.\n- **Sizes and weights.** A t-shirt scale (xs, sm, md, lg, xl, 2xl…) for size and\n  a numeric scale (100 to 900) for weight.\n\n## Spacing, radius, shadow\n\nNumeric scales with a slider per step.\n\n- **Spacing**: the padding, gap, and margin scale.\n- **Radius**: none through full.\n- **Shadow**: colour, offset, blur, spread, and opacity per step, with stacked\n  shadows supported.\n\nChange a step and every element using it repaints.\n\n## Overlays and gradients\n\n- **Overlays** are translucent tints layered over surfaces, like the subtle\n  tint a card gets on hover. Set a colour and opacity per state.\n- **Gradients** are reusable gradient tokens with a stop list and direction, for\n  hero panels and accent backgrounds.\n\n## Columns\n\nThe page-grid overlay. Set column count, gutter, and outer margin, and toggle\nthe visual guide with `Cmd/Ctrl+G`. Pages built on the column system reflow\nlive.\n\n## Saving\n\nThe editor saves to your browser continuously, so work survives a reload\nmid-edit. Writing a file is a separate step: the **Theme** panel at the foot of\nthe sidebar has **Save**, **Save As**, and **Load**, and each theme is one JSON\nfile under `src/live-tokens/data/themes/`.\n\nThe header gives you undo/redo (`Cmd/Ctrl+Z`, `Cmd/Ctrl+Shift+Z`). You can keep\nmany themes side by side; one is open at a time, and only **Adopt** publishes\none. See [Themes](themes-workflow.md) for the full lifecycle.\n",
   "getting-started": "# Getting started\n\nScaffold a live token site in a moments. You need Node 20 or later, a\npackage manager (npm, pnpm, or yarn), and a browser. Open claude code in your repo and start building.\n\n## Scaffold a new app\n\n```bash\nnpm create @motion-proto/live-tokens@latest my-app\ncd my-app\nnpm install\nnpm run dev\n```\n\nOpen the URL Vite prints (usually `http://localhost:5173`). You get a\none-page Svelte + Vite app that depends on the published package, with the\neditor wired up and the full component set ready to import.\n\n`npx @motion-proto/live-tokens create my-app` runs the same scaffold without\nthe initialiser package.\n\n### What the scaffold gives you\n\nEvery editable file lives under `src/` and is committed, so `npm install` and\nversion upgrades never touch your styles. The package code stays in\n`node_modules`.\n\n| Path | What it is |\n|------|------------|\n| `src/pages/Home.svelte` | The starter page. Replace it with your own content. |\n| `src/App.svelte` | Your routes. `<LiveTokensRouter>` adds dev-only routes under a reserved `/live-tokens/*` namespace: `/live-tokens/editor`, `/live-tokens/components`, and `/live-tokens/docs`. |\n| `src/system/styles/tokens.css` | Your base token vocabulary, hand-authored. |\n| `src/styles/site.css` | Themed page typography, yours to edit. |\n\n## Your first edit\n\n1. Run `npm run dev` and open the home page.\n2. Click **Open Token Editor**, or visit `/live-tokens/editor`. The editor opens beside\n   the page.\n3. Open **Palettes**, pick **Brand**, and change the base hex. The page\n   repaints as you type.\n4. In the **Theme** panel at the foot of the sidebar, choose **Save As**. Your\n   theme appears as JSON under `src/live-tokens/data/themes/`.\n5. Reload. The editor reopens on your theme, so the page returns as you left\n   it.\n\n## What you just changed\n\nEvery edit sets a CSS custom property on `:root`. Your components read those\nproperties through `var(--...)`. There is no token build step and no\npreprocessor rewriting your code: the page renders against plain CSS variables\nthe editor swaps live.\n\nTo ship, click **Adopt** in the Theme panel. That saves the open theme and bakes\nit into `src/live-tokens/data/tokens.generated.css`, which your build bundles\nalongside `tokens.css`. Adopt is the only action that changes what your site\nships, so try any look you like first. The editor itself never reaches\nproduction.\n\nAlready have a Svelte 5 + Vite app? The\n[README](https://github.com/motionproto/live-tokens#readme) covers installing\ninto an existing project.\n\n## Where to go next\n\n- **[Editing tokens](editing-tokens.md)**: a tour of the editor.\n- **[Themes](themes-workflow.md)**: save, switch, and ship.\n- **[Creating components](creating-components.md)**: make your own component\n  editable.\n",
+  "sketch-mode": "# Sketch mode\n\nSketch mode redraws your whole page as if it had been drawn by hand. Every\ncomponent keeps its own colours, spacing and corners; what changes is the line\nthey are drawn with.\n\nIt is an effect layer, not a set of token values. It reads nothing from your\ntheme and writes nothing back, so it never touches a token, never lands in a\ntheme file, and never reaches the CSS you ship. Turn it off and every trace of\nit goes.\n\nOpen the **Sketch** view in the editor and switch **Sketch mode** on. The effect\napplies to the page behind the editor as well as to the preview, so what you see\nin context is what it does.\n\n## What it draws\n\nEach component's fill and outline are repainted from the tokens that component\nalready owns. The real background and border are hidden behind them, then both\nare pushed around one shared field of noise. Because every component samples the\nsame field, the whole page reads as one drawing rather than as a set of\nseparately wobbled boxes.\n\n## The presets\n\nSeven looks ship with the package, and each is a complete set of dials rather\nthan a style name:\n\n- **Pencil.** Two graphite passes on their own seeds, so the outline disagrees\n  with itself the way a hand coming back round does.\n- **Marker.** A broad translucent nib gone round twice on the same line, so the\n  overlap darkens and the ink pools where it slows.\n- **Whiteboard.** The fattest nib on glass, with a mask that streaks the fill\n  like a half-wiped board.\n- **Hatched.** An etching. The fill is angled shading and the outline a single\n  hard-edged scratch.\n- **Dashed.** A drafting outline: one slow drift along the ruler, broken into\n  strokes. The clean pole.\n- **Napkin.** Ballpoint in a hurry. Everything loose at once.\n- **Dry marker.** Ink that ran out. One scratchy pass over a mostly eaten fill.\n\nPick one, then move whatever you like. **Save** keeps your dials under a name of\nyour own, alongside the shipped seven, as a file under\n`src/live-tokens/data/sketch-presets/`.\n\n## The dials\n\n- **Border.** How far the outline travels and how long its wave is, then its\n  width, ink, pressure and pooling. A second pass either copies the first line a\n  few pixels off or runs it through the pen again on its own seed.\n- **Fill.** Solid or hatched, how far the fill's edge travels, and how far each\n  instance is offset, rotated and scaled from its neighbours. **Ink coverage**\n  thins the fill with a field of blotches: set their size, how many levels of\n  detail, how pale and how dense they go, and how soft their edges are.\n- **Shape.** **Corner spread** rounds each corner by its own share of the dial,\n  so no two match. **Corner travel** leans the drawn box into a quadrilateral\n  with no two sides parallel. This is the dial that stops a component reading as\n  a rectangle.\n- **Icons and SVG.** Glyph travel and wavelength on their own scale. A glyph is\n  all curves already, so it needs more travel than a card's long straight edge\n  before the wobble reads at all.\n- **Noise.** The shared field itself: its wavelength, how many layers of detail\n  sit on it, and the shape of its wave. A square wave sends nearly every edge to\n  full travel, which is what makes the effect stronger rather than bigger.\n\n## Drawing your own elements\n\nThe effect displaces boxes, so anything drawn some other way is left alone. A\nrule made from a `border` is not a box; make it an element and tell the layer\nwhat to draw it with:\n\n```css\n.rule {\n  height: var(--border-width-2);\n  background: var(--border-brand);\n  --sketch-fill: var(--border-brand);\n}\n```\n\n`--sketch-fill`, `--sketch-stroke`, `--sketch-hatch-color` and `--sketch-radius`\nname the fill, the outline, the hatching ink and the corners for one element and\neverything inside it. Since the layer blanks the real background, an element\nwhose fill matters under Sketch mode should name it here as well as paint it.\n\nIcons and inline SVG take the wobble directly, since a glyph has no box to\nredraw. Body type is left alone: an icon is a shape and survives a wobble, a\nparagraph is not. To keep the icons in a subtree crisp, set\n`--sketch-icon-off: none` on its root. It inherits, so one declaration covers\neverything under it.\n",
   "themes-workflow": "# Themes\n\nSave your work, switch between looks, and ship one to production.\n\n## The Theme panel\n\nThe **Theme** panel at the foot of the editor sidebar holds the whole look:\ncolors, type, and a setting for every component, in one file. It carries the\nname the look ships under, whether production is running it, and **Adopt**.\nTwo parts sit under it, each a read-out rather than a file to manage.\n\n- **Colors & Type** holds the design tokens. Components read those tokens to\n  define their appearance. It names the two faces the page is showing.\n- **Components** counts how many components have an unsaved edit that has not\n  been saved into the theme, and opens the component editors.\n\nA theme holds its own copy of every part, so one theme can never break another.\n\n## How themes work\n\nA theme is a document, and the editor works the way any editor does.\n\n- **A theme** is a named JSON file in `src/live-tokens/data/themes/`. It carries\n  the whole look: the colors and type plus a setting for every component.\n- **The open theme** is the one the editor is working on, named in\n  `themes/_active.json`. One at a time.\n- **Your unsaved edits** are what the page shows right now. The editor keeps\n  them in your browser as you work and writes them to a buffer, `_working.json`,\n  one slot per part of the look. **Save** captures that buffer into the open\n  theme.\n- **The production theme** is the one your site ships, named in\n  `themes/_production.json`. **Adopt** changes it; saving a preset in the Theme\n  Picker performs that Adopt for you.\n\nAbsence is the answer for anything untouched: a buffer exists only where the\nlive look diverges from the active theme, so a newly opened theme has none.\n\n## Fonts\n\nType is part of the look, so it saves, loads and ships with the theme rather\nthan on its own. Four named stacks carry it:\n\n| Stack | Used by |\n|---|---|\n| `--font-display` | headings |\n| `--font-sans` | body text and most UI |\n| `--font-serif` | anywhere you ask for it |\n| `--font-mono` | code |\n\nEach stack is a family followed by its fallbacks, so a page still reads while a\nweb font loads, and still reads if it never does. **Project fonts**, in the\nColors and type editor, is where families come from: type a Google Fonts family\nname and the editor checks it, or paste a fonts URL, an embed tag, or your own\n`@font-face` rules. Removing a family puts the stack back on its fallbacks.\n\nYou can also set both faces at once from the command line:\n\n```bash\nnpx live-tokens set-fonts fonts.json\n```\n\nwith a brief naming the families:\n\n```json\n{ \"display\": \"Fraunces\", \"body\": \"Nunito Sans\" }\n```\n\nIt checks each family against Google Fonts, works out the weights that family\nactually has, and binds it to its stack. Like every other edit, the result lands\nin the buffer, so **Save** keeps it. In Claude Code, asking for a font pairing in\nplain English runs the same command.\n\nA font is only requested by the browser once something on the page uses it, so\ncarrying a family you no longer reference costs nothing at load. Adopting is\nwhat writes the font imports your site ships, into `fonts.css`.\n\n## Saving\n\nIn the Theme panel:\n\n- **Save** captures the look on screen into the open theme. Your colors and type\n  go in as part of it, so there is nothing to save first.\n- **Save As** names a new theme. Use it for your first save and for forking.\n\nComponent editors keep their own unsaved state. If one or more components are\nwaiting when you use **Save**, **Save As**, or **Adopt**, the Theme panel offers\nto save all of them before continuing. You can accept once instead of visiting\neach component, or cancel to review them individually. A component editor's\n**Save As** creates a reusable component preset.\n\nNames are tidied to lowercase with hyphens, so \"My Brand!\" becomes `my-brand`,\nand a leading underscore is dropped: those names are reserved for the buffer.\n**Motion Proto** is the built-in theme and is read-only. You can always return\nto it, and the editor never overwrites it, so start your own with **Save As**.\n\n## Switching\n\n**Load**—or clicking the active theme's name—opens the Theme Picker. Picking a\ntheme shows it on the page as a preview with nothing written to disk, so you can\ntry each look and compare. **Save** in that window opens and adopts the previewed\ntheme in one step: the active pointer changes, the buffers clear, the editor\nworks on it, and production ships it. **Cancel** returns you to where you were.\nPreviewing alone never changes what your site ships.\n\n**Colors and type only. Keep my shapes.** narrows the load to the palette and\nthe fonts: your component settings stay as they are and the theme you have open\nstays open. Saved colors and type files are listed there too, marked *colors &\ntype*, and picking one is always that narrower load.\n\n## Shipping\n\n**Adopt**, in the Theme panel, is the \"ship it\" step, and it ships the whole\nlook. It saves the open theme, then bakes that theme into\n`src/live-tokens/data/tokens.generated.css`, which your build bundles alongside\n`tokens.css`: the colors and type plus every component the theme carries. Fonts\nregenerate to match. The line under the theme name says whether production is\nrunning this theme.\n\nProduction is one saved theme, so nothing else publishes. Trying a look, moving\na token, saving a theme: all of it leaves the generated CSS alone until you\nAdopt. A component editor's Adopt runs the same whole-look step, because a\ncomponent never ships alone. Adopting while Motion Proto is open saves your look\nas a theme of your own first, since the built-in one is read-only.\n\nProduction builds (`npm run build`) ship only that plain CSS and your\ncomponents. No editor, no JSON loading, no runtime indirection.\n\n## Keeping your work safe\n\nEverything under `src/live-tokens/data/` is plain JSON, so commit it. Themes show\nup as readable diffs you can review per branch, and the buffer shows up as the\nwork you have not saved into a theme yet. Nothing is backed up anywhere else:\ngit is your safety net. To experiment freely, **Save As** a new name first, then\nedit.\n\n## Where to go next\n\n- **[Where themes live](where-themes-live.md)**: the files behind all of this,\n  and what writes each one.\n- **[Creating components](creating-components.md)**: make your own components\n  editable in the same editor.\n",
   "where-themes-live": "# Where themes live\n\nEverything the editor writes is plain JSON and CSS inside your project. There\nis no database and no hidden state: the files are the storage, and git is the\nhistory.\n\n## The data tree\n\n```\nsrc/live-tokens/data/\n  themes/\n    _active.json         names the theme the editor has open\n    _production.json     names the theme your site ships\n    default.json         Motion Proto, the built-in look, rewritten at boot\n    my-brand.json        a saved theme: the whole look in one file\n  colors-and-type/\n    _working.json        unsaved colors and type edits\n  component-configs/\n    button/\n      default.json       Button's shipped settings, derived at boot\n      _working.json      unsaved Button edits\n      my-button.json     a preset you saved from the Button editor\n  tokens.generated.css   the baked CSS your production build ships\nsrc/system/styles/\n  tokens.css             your token vocabulary, hand-authored, never written\n  fonts.css              font imports, rewritten when you Adopt\n```\n\nA saved theme carries the whole look by value: the colors and type plus a\nsetting for every component. It depends on no other file, so deleting\nanything else never breaks it.\n\n## What writes when\n\n- **Editing** changes the page through CSS variables. The editor keeps your\n  edits in the browser as you work and writes them to the `_working.json`\n  buffers when you save a component. When the Theme panel finds several dirty\n  components, **Save all** writes those buffers together.\n- **Save** captures the buffers into the open theme's file. That file is the\n  durable copy of your look; matching buffers are then removed.\n- **Load** clears the buffers and points `themes/_active.json` at the theme you\n  picked. Live reads fall through to that file. Nothing else changes, so trying\n  looks is free and ordinary switching changes only the pointer.\n- **Adopt** points `themes/_production.json` at the open theme, bakes it into\n  `tokens.generated.css`, and rewrites `fonts.css` to match. It is the only\n  action that changes what your site ships.\n\nThe `default.json` files are the shipped baseline. The editor derives them at\nboot and refreshes them when the package updates; it never saves your work\nover them.\n\nProjects upgraded from 0.48 may initially contain working files copied from the\nactive theme. On the first dev-server boot, exact copies are removed\nautomatically. Any file that differs is kept as unsaved work, so no migration\ncommand is required.\n\n## What to commit\n\nAll of it. The data tree is designed to live in git: themes diff readably, the\ntwo pointers say what is open and what ships, and a `_working.json` in a diff\nis exactly the work you have not yet saved into a theme. Nothing is backed up\nanywhere else.\n\n## Where to go next\n\n- **[Themes](themes-workflow.md)**: the workflow built on these files: saving,\n  loading, and shipping.\n",
 };

package/src/editor/overlay/LiveEditorOverlay.svelte

@@ -472,6 +472,21 @@
       border-radius var(--bar-open-dur) var(--bar-open-ease) var(--bar-open-delay);
   }
 
+  /* Sketch mode scopes itself to the host document root, and this bar lives
+     there too. The effect is for the page being designed, not for the tool
+     looking at it. */
+  .lt-overlay {
+    --sketch-icon-off: none;
+  }
+
+  /* tokens.css sets the theme font on :where(*), and a matching rule beats
+     inheritance, so the panel's own font-family never reaches its children.
+     Restore inheritance for the chrome, as .editor-page does. The preview
+     lives in an iframe, so no themed surface is caught by this. */
+  .lt-overlay :global(*:not([class*='fa-'])) {
+    font-family: inherit;
+  }
+
   .lt-overlay.docked {
     border-right: none;
     border-radius: 0;