@motion-proto/live-tokens 0.80.0 → 0.82.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 0.82.0 — The demo ships from the package
+
+### Added
+
+- **The demo page and Testing Loops ship as exports.** Mount
+  `@motion-proto/live-tokens/demo` and `@motion-proto/live-tokens/demo/testing-loops`
+  as `lazy` routes. The demo takes `onThemePick(fileName)` and
+  `onSketchPick(id | null)`, called after the Theme or Sketch select applies a
+  pick. Testing Loops takes `homeHref` for its back link, which defaults to
+  `/demo`.
+- **The Theme select keeps the sketchstyle on screen.** Picking a theme no
+  longer replaces a sketchstyle the visitor picked. The carry runs in every
+  document that calls `installSketchCarry()` from
+  `@motion-proto/live-tokens/demo/sketch-carry`, and the editor frame needs it
+  too, so call it from the app entry.
+
+### Changed
+
+- **The demo's Theme and Sketch selects sit in a bar at the top of the page.**
+  The bar stays fixed while the page scrolls, and it shows only where the
+  editor runs. They left the "Swap tokens with a click" section. On a phone
+  they sit above the hero and scroll with the page.
+- **The Sketch select reads Custom for adjusted dials.** Dials moved off every
+  named sketchstyle show the Custom placeholder.
+
+## 0.81.0 — Skill Atlas links name a block
+
+### Added
+
+- **A Skill Atlas link opens one block.** Clicking a card or badge writes its
+  link to the address bar, named after the card title and the badge label:
+  `#set-type/write-the-font-pairing/voice`. Opening the link selects that
+  block and scrolls both panes to it. `#set-type` still opens the skill, and
+  a link to a block that no longer exists opens its skill.
+
 ## 0.80.0 — The build runs the design checks
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.80.0",
+  "version": "0.82.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -23,6 +23,8 @@
     "src/editor",
     "src/system",
     "src/app/site.css",
+    "src/demo",
+    "!src/demo/FloatingTagsPlayground.svelte",
     "src/live-tokens/data/tokens.generated.css",
     "src/live-tokens/data/colors-and-type/default.json",
     "src/live-tokens/data/colors-and-type/autumn.json",
@@ -108,6 +110,20 @@
       "svelte": "./src/editor/skill-atlas/SkillAtlas.svelte",
       "default": "./src/editor/skill-atlas/SkillAtlas.svelte"
     },
+    "./demo": {
+      "types": "./src/demo/Demo.svelte.d.ts",
+      "svelte": "./src/demo/Demo.svelte",
+      "default": "./src/demo/Demo.svelte"
+    },
+    "./demo/testing-loops": {
+      "types": "./src/demo/TestingLoops.svelte.d.ts",
+      "svelte": "./src/demo/TestingLoops.svelte",
+      "default": "./src/demo/TestingLoops.svelte"
+    },
+    "./demo/sketch-carry": {
+      "types": "./src/demo/sketchCarry.ts",
+      "default": "./src/demo/sketchCarry.ts"
+    },
     "./backdrop": {
       "svelte": "./src/system/backdrop/index.ts",
       "types": "./src/system/backdrop/index.ts",

package/src/demo/Demo.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import '../app/site.css';
+  import SectionHero from './sections/SectionHero.svelte';
+  import SectionKit from './sections/SectionKit.svelte';
+  import SectionLayers from './sections/SectionLayers.svelte';
+  import SectionGetStarted from './sections/SectionGetStarted.svelte';
+  import SectionClaude from './sections/SectionClaude.svelte';
+  import SectionOffering from './sections/SectionOffering.svelte';
+  import SectionFooter from './sections/SectionFooter.svelte';
+  import DemoBar from './DemoBar.svelte';
+
+  let {
+    onThemePick,
+    onSketchPick,
+  }: {
+    onThemePick?: (fileName: string) => void;
+    onSketchPick?: (id: string | null) => void;
+  } = $props();
+
+  // The pickers drive the editor's API, which the package only serves in dev.
+  const isDev = import.meta.env.DEV;
+</script>
+
+{#if isDev}
+  <DemoBar {onThemePick} {onSketchPick} />
+{/if}
+
+<div class="kit" class:has-bar={isDev}>
+  <SectionHero />
+  <SectionKit />
+  <SectionLayers />
+  <SectionOffering />
+  <SectionGetStarted />
+  <SectionClaude />
+  <SectionFooter />
+</div>
+
+<style>
+  .kit {
+    display: grid;
+    grid-template-columns: repeat(var(--columns-count), 1fr);
+    column-gap: var(--columns-gutter);
+    row-gap: var(--space-64);
+    max-width: var(--columns-max-width);
+    margin: 0 auto;
+    padding: var(--space-48) var(--space-32);
+    min-height: 100vh;
+  }
+
+  /* Clears the fixed DemoBar: its padding plus one control's height. */
+  .kit.has-bar {
+    padding-top: calc(var(--space-48) + var(--space-64));
+  }
+
+  /* Per-section gap overrides (added on top of .kit row-gap). */
+  .kit > :global(.hero) {
+    margin-bottom: 0;
+  }
+
+  /* Equal lead-in above these three sections: row-gap (64) + 48 = 112px. */
+  .kit > :global(.kit-section),
+  .kit > :global(.layers),
+  .kit > :global(.claude) {
+    margin-top: var(--space-32);
+  }
+
+  /* Overlap the offering image up into Layers (top) and butt Get Started
+     against its bottom. -space-64 cancels the grid row-gap; the extra
+     -space-64 on top is the actual overlap — tune that second term to taste. */
+  .kit > :global(.offering) {
+    margin-top: calc(var(--space-64) * -2 + var(--space-8));
+    margin-bottom: calc(var(--space-64) * -1);
+  }
+
+  /* Inline code styling cascades into every section via :global descendants. */
+  .kit :global(p > code),
+  .kit :global(.callout code) {
+    background: var(--tint-low);
+    padding: var(--space-2) var(--space-6);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: 0.88em;
+    color: var(--text-primary);
+  }
+
+  @media (max-width: 600px) {
+    .kit,
+    .kit.has-bar {
+      padding: var(--space-32) var(--space-16);
+      row-gap: var(--space-48);
+    }
+    .kit > :global(.offering) {
+      margin-top: calc(var(--space-48) * -2);
+      margin-bottom: calc(var(--space-48) * -1);
+    }
+  }
+</style>

package/src/demo/Demo.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+
+declare const Demo: Component<{
+  onThemePick?: (fileName: string) => void;
+  onSketchPick?: (id: string | null) => void;
+}>;
+export default Demo;

package/src/demo/DemoBar.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import ThemeSelect from './ThemeSelect.svelte';
+  import SketchSelect from './SketchSelect.svelte';
+
+  let {
+    onThemePick,
+    onSketchPick,
+  }: {
+    onThemePick?: (fileName: string) => void;
+    onSketchPick?: (id: string | null) => void;
+  } = $props();
+</script>
+
+<div class="demo-bar">
+  <div class="bar">
+    <div class="pickers">
+      <ThemeSelect inline size="small" onpick={onThemePick} />
+      <SketchSelect inline size="small" onpick={onSketchPick} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .demo-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--z-sticky);
+    background: var(--scrim-high);
+    backdrop-filter: blur(var(--blur-md));
+    border-bottom: var(--border-width-1) solid var(--tint-high);
+  }
+
+  /* The bar repeats the demo's .kit grid, so its content lines up with the
+     sections beneath it. The right side stays empty for the editor's collapsed
+     toggle, which pins top-right. */
+  .bar {
+    max-width: var(--columns-max-width);
+    margin-inline: auto;
+    padding: var(--space-12) var(--space-32);
+    display: grid;
+    grid-template-columns: repeat(var(--columns-count), 1fr);
+    column-gap: var(--columns-gutter);
+  }
+
+  .pickers {
+    grid-column: 2 / -2;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--space-24);
+    row-gap: var(--space-8);
+  }
+
+  @media (max-width: 960px) {
+    .pickers {
+      grid-column: 1 / -1;
+    }
+  }
+
+  /* No room beside the editor's toggle on a phone, so the pickers sit in the
+     page below it and scroll away. */
+  @media (max-width: 600px) {
+    .demo-bar {
+      position: static;
+      background: none;
+      backdrop-filter: none;
+      border-bottom: none;
+    }
+    .bar {
+      padding: var(--space-64) var(--space-16) 0;
+    }
+  }
+</style>

package/src/demo/FloatingTokenTags.css

@@ -0,0 +1,284 @@
+/*
+ * Decoupled from the design system: pills, knots, strings, balls, and
+ * animations are hardcoded so token edits don't repaint our chrome. The
+ * exceptions are intentional and ARE the demo: the central box's
+ * surface/radius/border (set inline), the dropdown (rendered through
+ * <MenuSelect>), elevation, which reads from the --shadow-* scale, and the
+ * zap colour, which tracks --text-accent so the beam stays on-theme.
+ * File is global; keep selectors `ftt-` prefixed.
+ */
+
+.ftt-stage {
+  --ftt-contrast-color: var(--color-white);
+  --ftt-zap-color: var(--text-accent);
+  --ftt-string-opacity: 0.5;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /* No overflow clipping: the bottom tag's dropdown must extend past the
+     stage edge. */
+}
+
+/* --- Central box ---------------------------------------------------------- */
+.ftt-box {
+  --ftt-box-contrast-color: var(--color-white);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  box-sizing: border-box;
+  padding: 0.75rem 1.5rem;
+  display: inline-flex;
+  width: 12rem;
+  align-items: center;
+  justify-content: center;
+  /* Defaults; overridden inline from the active token bindings. */
+  background: color-mix(in srgb, #264542 50%, transparent);
+  border-style: solid;
+  border-color: #52726e;
+  border-width: 2px;
+  border-radius: 0.25rem;
+  box-shadow: var(--shadow-md);
+  transition:
+    background    300ms ease,
+    border-color  300ms ease,
+    border-width  300ms ease,
+    border-radius 300ms ease;
+  z-index: 1;
+}
+
+.ftt-box-label {
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--ftt-box-contrast-color);
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+}
+
+.ftt-box.ftt-bloop {
+  animation: ftt-bloop 480ms ease-out;
+}
+
+@keyframes ftt-bloop {
+  0%   { scale: 1;    filter: brightness(1); }
+  30%  { scale: 1.08; filter: brightness(1.8) saturate(1.4); }
+  100% { scale: 1;    filter: brightness(1); }
+}
+
+/* --- Kite strings --------------------------------------------------------- */
+.ftt-strings {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.ftt-string {
+  stroke: var(--ftt-contrast-color);
+  stroke-width: 2;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+  opacity: var(--ftt-string-opacity);
+  transition: opacity 150ms ease, stroke 150ms ease;
+}
+
+.ftt-string.ftt-live {
+  stroke: var(--ftt-zap-color);
+  opacity: 1;
+}
+
+/* --- Anchor knots --------------------------------------------------------- */
+.ftt-knot {
+  position: absolute;
+  width: 0.625rem;
+  height: 0.625rem;
+  translate: -50% -50%;
+  border-radius: 9999px;
+  background: #c4bcb6;
+  border: 1px solid #f0eae4;
+  pointer-events: none;
+  z-index: 3;
+}
+
+/* --- Energy ball ---------------------------------------------------------- */
+/* Shares --ftt-zap-color with `.ftt-string.ftt-live` so the beam reads as a
+   continuous trail, not a colour-shifting projectile. */
+.ftt-energy-ball {
+  position: absolute;
+  width: 0.875rem;
+  height: 0.875rem;
+  translate: -50% -50%;
+  border-radius: 9999px;
+  background: var(--ftt-zap-color);
+  box-shadow:
+    0 0 8px  2px var(--ftt-zap-color),
+    0 0 18px 4px var(--ftt-zap-color);
+  pointer-events: none;
+  opacity: 0;
+  z-index: 6;
+}
+
+/* --- Floating tag wrapper ------------------------------------------------- */
+.ftt-float {
+  position: absolute;
+  translate: -50% -50%;
+  rotate: var(--ftt-rot, 0deg);
+  animation: ftt-bob var(--ftt-bob-duration, 7s) ease-in-out infinite;
+  z-index: 4;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  width: 14rem;
+}
+
+/* Lift open tag so its dropdown paints over sibling tags. */
+.ftt-float.ftt-open {
+  z-index: 20;
+}
+
+/* Bottom-placement chips mirror the top arc: chip first, eyebrow on the
+   outer (lower) side. Dropdown opens upward toward the box so the menu
+   doesn't fall off the stage. */
+.ftt-float[data-placement="bottom"] {
+  flex-direction: column-reverse;
+}
+
+/* Pivot the tilt around the chip's right semicircular cap. The chip is
+   ~1.84rem tall so the cap center sits ~0.9rem from the chip's right edge
+   and ~0.9rem above its bottom — which (since the chip is the widest, last
+   in-flow element of the wrapper) coincides with `calc(100% - 0.9rem)` on
+   both axes of the wrapper. */
+.ftt-float[data-pivot="right-cap"] {
+  transform-origin: calc(100% - 0.9rem) calc(100% - 0.9rem);
+}
+
+@keyframes ftt-bob {
+  0%, 100% { translate: -50% -50%; }
+  50%      { translate: -50% calc(-50% + var(--ftt-bob-distance, -8px)); }
+}
+
+/* --- Property label paired with each tag ---------------------------------- */
+/* Sits on the outer side of the chip: above for top-placement chips, below
+   for bottom-placement chips (see `.ftt-float[data-placement="bottom"]`). */
+.ftt-float-property {
+  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+/* --- Tag pill ------------------------------------------------------------- */
+/* Hardcoded (not the Badge component) so badge-* token edits don't repaint. */
+.ftt-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.75rem;
+  /* Polished chrome, not brushed steel: the bands keep their spacing but sit
+     high in the scale, so the pill stays bright against a cream page. Keep
+     the darkest stop ≥ #8f9090 or the black label loses AA. */
+  background: linear-gradient(
+    135deg,
+    #fbfbfb 0%,
+    #c9cbcb 38%,
+    #eff0f0 62%,
+    #b6b8b8 100%
+  );
+  color: #000;
+  border: 1px solid rgba(86, 96, 104, 0.45);
+  border-radius: 9999px;
+  box-shadow: var(--shadow-md);
+  font-family: Manrope, system-ui, -apple-system, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.1;
+  white-space: nowrap;
+}
+
+.ftt-tag-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.875em;
+}
+
+.ftt-tag-label {
+  display: inline-block;
+}
+
+/* --- Tag trigger (draggable button wrapping the pill) --------------------- */
+.ftt-tag-trigger {
+  pointer-events: auto;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: grab;
+  touch-action: none;
+  transition: filter 150ms ease, scale 150ms ease;
+}
+.ftt-tag-trigger:hover {
+  filter: brightness(1.2);
+  scale: 1.04;
+}
+.ftt-float.ftt-dragging .ftt-tag-trigger {
+  cursor: grabbing;
+}
+.ftt-float.ftt-dragging {
+  animation: none; /* pause bob while dragging */
+  z-index: 30;
+}
+.ftt-tag-trigger:focus-visible {
+  outline: 2px solid var(--ftt-zap-color);
+  outline-offset: 3px;
+  border-radius: 9999px;
+}
+
+.ftt-float.ftt-flash .ftt-tag-trigger {
+  animation: ftt-tag-flash 500ms ease-out;
+}
+
+@keyframes ftt-tag-flash {
+  0%   { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
+  25%  { scale: 1.14; filter: brightness(1.8) drop-shadow(0 0 14px #fff5f0); }
+  100% { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
+}
+
+/* --- Chip host ------------------------------------------------------------ */
+/* Wraps the chip-trigger and (when open) the dropdown so the dropdown can
+   anchor directly to the chip's edges, not the float wrapper's. Without
+   this, `top: 100%` lands at the wrapper bottom — which is the eyebrow for
+   `data-placement="bottom"` — and the menu drifts off the chip. */
+.ftt-chip-host {
+  position: relative;
+  display: inline-flex;
+}
+
+/* --- Dropdown menu -------------------------------------------------------- */
+/* The wrap handles position/stacking only; the surface lives on
+   <MenuSelect> so menuselect-* token edits reshape the in-flight UI. */
+.ftt-dropdown-wrap {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 50%;
+  translate: -50% 0;
+  pointer-events: auto;
+  z-index: 10;
+}
+
+/* --- Reduced motion ------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ftt-float {
+    animation: none;
+  }
+  .ftt-box.ftt-bloop,
+  .ftt-float.ftt-flash .ftt-tag-trigger {
+    animation: none;
+  }
+}