@motion-proto/live-tokens 0.96.0 → 0.98.2

package/src/editor/ui/keepInViewport.ts

@@ -1,84 +0,0 @@
-/**
- * Svelte action: keep an absolutely-positioned element inside the viewport.
- *
- * Measures the element after layout, computes how far it overflows any
- * viewport edge, and shifts it back via CSS `translate`. The original
- * positioning (top/left/right/bottom) stays untouched so the *natural*
- * placement is preserved when there's room — the action only nudges when
- * the element would otherwise draw off-screen.
- *
- * Use on popovers and dropdowns whose trigger position is dynamic
- * (cards in a wrapping flex grid, dropdowns near a panel edge, etc.).
- *
- * The CSS `translate` property is used instead of `transform` so it doesn't
- * collide with `transform`-based entrance animations.
- *
- * Recomputes on:
- *  - mount (after first paint)
- *  - element resize (content reflow)
- *  - window resize
- *  - any scroll up the ancestor chain
- *
- * Usage:
- *   <div class="popover" use:keepInViewport>...</div>
- *   <div class="popover" use:keepInViewport={{ margin: 12 }}>...</div>
- */
-
-export type KeepInViewportOptions = {
-  /** Minimum gap (px) between the element and the viewport edges. Default 8. */
-  margin?: number;
-};
-
-export function keepInViewport(
-  node: HTMLElement,
-  options: KeepInViewportOptions = {},
-) {
-  let margin = options.margin ?? 8;
-  let pendingFrame: number | null = null;
-
-  function measure(): void {
-    if (pendingFrame !== null) return;
-    pendingFrame = requestAnimationFrame(() => {
-      pendingFrame = null;
-      // Reset our own translate before measuring so the rect reflects the
-      // element's natural placement, not last frame's correction.
-      node.style.translate = '';
-      const rect = node.getBoundingClientRect();
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      let dx = 0;
-      let dy = 0;
-      if (rect.left < margin) dx = margin - rect.left;
-      else if (rect.right > vw - margin) dx = vw - margin - rect.right;
-      if (rect.top < margin) dy = margin - rect.top;
-      else if (rect.bottom > vh - margin) dy = vh - margin - rect.bottom;
-      if (dx !== 0 || dy !== 0) {
-        node.style.translate = `${dx}px ${dy}px`;
-      }
-    });
-  }
-
-  measure();
-
-  const ro = new ResizeObserver(measure);
-  ro.observe(node);
-  window.addEventListener('resize', measure);
-  // Capture-phase scroll listener: catches scroll on any ancestor, not just
-  // window. The trigger's nearest scrolling parent (a panel, a modal body)
-  // shifts the popover's viewport position when scrolled.
-  window.addEventListener('scroll', measure, true);
-
-  return {
-    update(next: KeepInViewportOptions = {}) {
-      margin = next.margin ?? 8;
-      measure();
-    },
-    destroy() {
-      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
-      ro.disconnect();
-      window.removeEventListener('resize', measure);
-      window.removeEventListener('scroll', measure, true);
-      node.style.translate = '';
-    },
-  };
-}

package/src/testing-js/chunk-3UKGXCDL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../testing/componentContract.ts"],"sourcesContent":["export type ContractRule =\n  | 'contract-listed'\n  | 'contract-render'\n  | 'contract-alias'\n  | 'contract-persist'\n  | 'contract-theme'\n  | 'contract-states'\n  | 'contract-interaction'\n  | 'contract-behavior'\n  | 'contract-sketch'\n  | 'contract-missing';\n\n/**\n * A failed obligation, carrying the rule id the CLI reports it under. A defect\n * fixture names the rule it expects, and `check-component --tests` maps a\n * reporter error onto a finding.\n */\nexport class ContractViolation extends Error {\n  constructor(\n    readonly rule: ContractRule,\n    readonly component: string,\n    message: string,\n  ) {\n    super(`[${rule}] ${component}: ${message}`);\n    this.name = 'ContractViolation';\n  }\n}\n\nexport interface Inapplicable {\n  applicable: false;\n  reason: string;\n}\n\nexport function isInapplicable(value: unknown): value is Inapplicable {\n  return typeof value === 'object' && value !== null && (value as Inapplicable).applicable === false;\n}\n\nexport interface PartLocator {\n  /** Resolved inside the preview stage unless `portal` is set. */\n  selector: string;\n  /** Read computed style from this pseudo-element of the part, e.g.\n   *  `'::after'`. Chromium's `getComputedStyle` only tolerates the bare form\n   *  (`'after'`) for `::before`/`::after`; use the full `::` syntax so a\n   *  future pseudo-element (`::placeholder`, `::marker`, ...) works the same\n   *  way without a silent fallback to the host element's own style. */\n  pseudo?: string;\n  /** Rendered outside the preview stage. Resolved against the document. */\n  portal?: boolean;\n}\n\nexport type PartDeclaration = string | PartLocator;\n\n/**\n * An editor control the preview is gated behind: a canvas-toolbar checkbox, an\n * optional-content switch. `check` sets a checkbox to a state and is safe to\n * repeat; `value` picks a select option; neither clicks once.\n */\nexport interface ControlStep {\n  kind: 'control';\n  /** Selector inside the visible variant group. */\n  selector: string;\n  check?: boolean;\n  value?: string;\n}\n\nexport type SetupStep = InteractionAction | ControlStep;\n\n/** Which VariantGroup, which state tab, and what has to happen first. */\nexport interface View {\n  /** Variant tab label. Omitted when the editor renders one variant. */\n  variant?: string;\n  /** State tab label. Omitted when the editor renders no state strip. */\n  state?: string;\n  /** Run after the tabs are selected. Portaled and toolbar-gated parts exist\n   *  only once these have run. */\n  setup?: SetupStep[];\n}\n\n/** Part key -> CSS property -> the design token that must drive it. */\nexport type PaintMap = Record<string, Record<string, string>>;\n\nexport interface PropertyExpectation extends View {\n  paints: PaintMap;\n}\n\nexport interface StateExpectation extends View {\n  state: string;\n  /** Class the root part carries while the editor previews this state. */\n  forceClass?: string;\n  /** Part key -> attributes it must carry. A null value requires the absence. */\n  attributes?: Record<string, Record<string, string | null>>;\n  /** What the state repaints, as computed-value equality against its token. */\n  paints?: PaintMap;\n}\n\n/**\n * `token` and `opacity` drive the token selector for `variable`. `gradient`\n * drives the gradient editor for `variable`. `literal` drives `control` and\n * reads `variable` back off the root, which is where an intrinsic lands: the\n * editors write those into the alias bucket. `config` drives `control` and\n * reads `configKey` out of the config bucket, which holds editor metadata that\n * never reaches `:root`.\n */\nexport type PersistenceShape = 'token' | 'literal' | 'opacity' | 'gradient' | 'config';\n\nexport interface PersistenceCase extends View {\n  shape: PersistenceShape;\n  /** The alias the value is read back from. Omitted for `config`. */\n  variable?: string;\n  /** Selector inside the visible variant group, for `literal` and `config`. */\n  control?: string;\n  /** The config-bucket key, for `config`. */\n  configKey?: string;\n  /** Where the persisted value must land once the page has reloaded. */\n  observe: { part: string; css: string };\n}\n\nexport interface PersistenceExpectation {\n  cases: PersistenceCase[];\n  /** The alias Reset must return to the value the server holds for it. It has\n   *  to be one a case above moves, so the saved value and the value the\n   *  component booted with are different and Reset can be seen to choose. */\n  resetVariable: string;\n}\n\nexport interface ThemeExpectation extends View {\n  /** Theme slug shown in the Theme Picker, e.g. `ocean`. */\n  theme: string;\n  /** Variables whose root value the theme must move. */\n  changed: string[];\n  /**\n   * Variables the theme must leave exactly as they were. Two theme JSON files\n   * can name the identical design token (e.g. both `--border-neutral`) and\n   * still resolve to different rendered colors, because many color primitives\n   * are computed per theme from a palette/seed even when the alias string is\n   * unchanged — comparing the two files' alias *names* does not establish\n   * invariance. Pick `unchanged` candidates from token families a theme never\n   * recolors: `--shadow-*`, `--icon-size-*`, `--font-size-*`,\n   * `--line-height-*`, `--font-family`/`--font-mono`, and the spacing/radius/\n   * border-width scale steps (`--space-*`, `--radius-*`, `--border-width-*`)\n   * are all fixed constants, not palette-derived — verify a candidate's\n   * *resolved* value is identical between the two theme files before trusting\n   * it, not just that the alias name matches.\n   */\n  unchanged: string[];\n  /** Variables the theme's own component config aliases, and the design token\n   *  each must resolve to under it. */\n  aliasedTo: Record<string, string>;\n  /** Where the theme's value must land in the rendered preview. */\n  observe: { part: string; css: string; variable: string };\n}\n\nexport type InteractionAction =\n  | { kind: 'press'; part: string; key: string }\n  | { kind: 'click'; part: string }\n  | { kind: 'type'; part: string; text: string }\n  | { kind: 'dragTo'; part: string; along: string; fraction: number };\n\nexport type InteractionOutcome =\n  | { kind: 'attribute'; part: string; name: string; value: string }\n  | { kind: 'valueMoves'; part: string; direction: 'up' | 'down' }\n  | { kind: 'valueBecomes'; part: string; value: string }\n  | { kind: 'valueChanges'; part: string }\n  | { kind: 'valueHolds'; part: string }\n  /** Whether the part takes focus. The only outcome a button with no state\n   *  attribute has: a disabled one refuses it and an enabled one takes it. */\n  | { kind: 'focused'; part: string; value: boolean };\n\nexport interface InteractionCase extends View {\n  name: string;\n  action: InteractionAction;\n  expect: InteractionOutcome;\n}\n\nexport interface InteractionExpectation {\n  /** The part carrying the interactive role. */\n  part: string;\n  role: string;\n  cases: InteractionCase[];\n}\n\n/**\n * One mounted case under happy-dom: props in, a DOM event, one assertion. It\n * carries what a browser cannot reach, the callback a controlled component\n * calls instead of moving its own state.\n */\nexport interface BehaviorCase {\n  name: string;\n  /** Props the fixture mounts with. A snippet-valued prop is not\n   *  expressible; a component whose behavior needs one records that case\n   *  as inapplicable with the reason. */\n  props?: Record<string, unknown>;\n  action?: { kind: 'click' | 'keydown' | 'input'; part: string; key?: string; value?: string };\n  expect:\n    | { kind: 'callback'; prop: string; args: unknown[] }\n    | { kind: 'no-callback'; prop: string }\n    | { kind: 'attribute'; part: string; name: string; value: string | null }\n    | { kind: 'text'; part: string; value: string };\n}\n\nexport interface BehaviorExpectation {\n  cases: BehaviorCase[];\n}\n\nexport interface SketchPartExpectation {\n  part: string;\n  /** The design token `--sketch-fill` must resolve to on this part. */\n  fill?: string;\n  /** The design token `--sketch-stroke` must resolve to on this part. */\n  stroke?: string;\n}\n\nexport interface SketchExpectation extends View {\n  /** Sketchstyle id the paint is asserted under. */\n  style: string;\n  parts: SketchPartExpectation[];\n}\n\nexport interface ComponentContract {\n  id: string;\n  origin: 'system' | 'custom';\n  parts: Record<string, PartDeclaration>;\n  /** Part key of the component's own root element in the preview. */\n  root: string;\n  /** The view every obligation opens with. */\n  view?: View;\n  states: StateExpectation[] | Inapplicable;\n  properties: PropertyExpectation[];\n  /**\n   * Aliases no paint map can pin, each with the reason. A token consumed\n   * inside `calc()` or handed to a gradient function never appears verbatim in\n   * a computed style, so the probe cannot read it back — that is the only\n   * class this belongs to. A token a sibling alias merely happens to carry\n   * the same rendered value through (a base padding token behind four\n   * per-side overrides, say) is not in this class: the per-side entries pin\n   * their own aliases, not the base one, and a paint map that drives the base\n   * token directly and observes the per-side CSS property can pin it too. Put\n   * that here and Wave 4's coverage JSON records the base token as covered\n   * when nothing asserts the link between it and what actually painted.\n   */\n  uncovered?: Record<string, string>;\n  persistence: PersistenceExpectation;\n  theme: ThemeExpectation;\n  interaction: InteractionExpectation | Inapplicable;\n  /** What the component does when it is driven, proven under happy-dom. */\n  behavior: BehaviorExpectation | Inapplicable;\n  sketch: SketchExpectation | Inapplicable;\n}\n\n/** Roles whose components must declare interaction cases. */\nconst INTERACTIVE_ROLES = new Set([\n  'button', 'switch', 'checkbox', 'radio', 'slider', 'spinbutton', 'textbox',\n  'combobox', 'listbox', 'menuitem', 'tab', 'link', 'searchbox', 'option',\n]);\n\nexport function requiresInteraction(role: string | null): boolean {\n  return role !== null && INTERACTIVE_ROLES.has(role);\n}\n\nexport function partLocator(contract: ComponentContract, key: string): PartLocator {\n  const declared = contract.parts[key];\n  if (declared === undefined) {\n    throw new ContractViolation('contract-render', contract.id, `no part named \"${key}\" is declared`);\n  }\n  return typeof declared === 'string' ? { selector: declared } : declared;\n}\n"],"mappings":";AAiBO,IAAM,oBAAN,cAAgC,MAAM;AAAA,EAC3C,YACW,MACA,WACT,SACA;AACA,UAAM,IAAI,IAAI,KAAK,SAAS,KAAK,OAAO,EAAE;AAJjC;AACA;AAIT,SAAK,OAAO;AAAA,EACd;AAAA,EANW;AAAA,EACA;AAMb;AAOO,SAAS,eAAe,OAAuC;AACpE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAS,MAAuB,eAAe;AAC/F;AAuNA,IAAM,oBAAoB,oBAAI,IAAI;AAAA,EAChC;AAAA,EAAU;AAAA,EAAU;AAAA,EAAY;AAAA,EAAS;AAAA,EAAU;AAAA,EAAc;AAAA,EACjE;AAAA,EAAY;AAAA,EAAW;AAAA,EAAY;AAAA,EAAO;AAAA,EAAQ;AAAA,EAAa;AACjE,CAAC;AAEM,SAAS,oBAAoB,MAA8B;AAChE,SAAO,SAAS,QAAQ,kBAAkB,IAAI,IAAI;AACpD;AAEO,SAAS,YAAY,UAA6B,KAA0B;AACjF,QAAM,WAAW,SAAS,MAAM,GAAG;AACnC,MAAI,aAAa,QAAW;AAC1B,UAAM,IAAI,kBAAkB,mBAAmB,SAAS,IAAI,kBAAkB,GAAG,eAAe;AAAA,EAClG;AACA,SAAO,OAAO,aAAa,WAAW,EAAE,UAAU,SAAS,IAAI;AACjE;","names":[]}

package/src/testing-js/chunk-NB3NZRBM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../testing/config.ts","../editor/core/routing/ownedRoutes.ts"],"sourcesContent":["import fs from 'node:fs';\nimport path from 'node:path';\nimport { DEFAULT_COMPONENTS_PATH } from '../editor/core/routing/ownedRoutes';\n\n/** The file a project puts its shared test settings in, at the project root. */\nexport const TESTING_CONFIG_FILE = 'live-tokens.testing.ts';\n\n/** The components route the run drives, published from the settings so the\n *  suites need no argument. */\nexport const COMPONENTS_PATH_ENV = 'LIVE_TOKENS_COMPONENTS_PATH';\n\n/** Narrows a run to one component. */\nexport const COMPONENT_ENV = 'LIVE_TOKENS_COMPONENT';\n\n/** The page targets a run opens, as JSON: `[{ source, route }]`. */\nexport const PAGES_ENV = 'LIVE_TOKENS_PAGES';\n\n/** The viewports every page rule runs at, as JSON: `[{ width, height }]`. */\nexport const PAGE_VIEWPORTS_ENV = 'LIVE_TOKENS_PAGE_VIEWPORTS';\n\nexport interface PageViewport {\n  width: number;\n  height: number;\n}\n\n/** The contract project's own desktop size, and the phone the text styles\n *  carry media overrides for. Nothing here is derived from a page. */\nexport const DEFAULT_PAGE_VIEWPORTS: PageViewport[] = [\n  { width: 1280, height: 900 },\n  { width: 390, height: 844 },\n];\n\n/** What `resolveDataDirs` falls back to, restated because that resolver is\n *  plugin-side and the tarball ships the plugin built rather than as source.\n *  `vite-plugin/testingConfig.test.ts` pins the two together. */\nconst DEFAULT_DATA_DIR = 'src/live-tokens/data';\n\nconst DEFAULT_DEV_COMMAND = 'npm run dev -- --host {host} --port {port}';\n\nexport interface LiveTokensTestingConfig {\n  /** Vite config a generated Vitest config merges. Default `vite.config.ts`. */\n  viteConfig?: string;\n  /** Command that starts the dev server. `{host}` and `{port}` are substituted.\n   *  Default `npm run dev -- --host {host} --port {port}`. */\n  devCommand?: string;\n  /** Fixed port for the dev server. Omitted, the run takes a free one. */\n  port?: number;\n  /** The components route, when `editorRoutes` moved it off the owned default. */\n  componentsPath?: string;\n  /** The plugin's data directory. Default: `dataDir` from\n   *  `live-tokens.config.json`, else `src/live-tokens/data`. The run never uses\n   *  it directly; it is the tree the isolated copy is made from. */\n  dataDir?: string;\n  /** Module that registers the project's components without mounting the app.\n   *  The registry contract imports it before it selects entries. */\n  registrySetup?: string;\n  /** Module exporting the `ComponentContract[]` a custom component adds to the\n   *  shipped list (default export or a named `contracts` export). The suite\n   *  files are static Playwright entry points, so an env var naming this path\n   *  plus a dynamic import inside `selectedContracts()` is the only way a\n   *  custom contract reaches them. */\n  contractsModule?: string;\n  /** Page source path to the concrete URL that renders it, for a route the\n   *  `pages` object cannot express: one served by `resolve()`, or one whose\n   *  parameters only the project knows. Page paths are relative to the\n   *  project root. */\n  pageRoutes?: Record<string, string>;\n  /** Replaces the two sizes every page rule runs at. */\n  pageViewports?: PageViewport[];\n}\n\nexport interface ResolvedTestingConfig {\n  root: string;\n  viteConfig: string;\n  devCommand: string;\n  port?: number;\n  componentsPath: string;\n  dataDir: string;\n  registrySetup?: string;\n  contractsModule?: string;\n  pageRoutes: Record<string, string>;\n  pageViewports: PageViewport[];\n}\n\n/** Types the settings file without importing the interface by hand. */\nexport function defineTestingConfig(config: LiveTokensTestingConfig): LiveTokensTestingConfig {\n  return config;\n}\n\n/** `dataDir` as the plugin resolves it, from the same file the plugin reads. */\nfunction configuredDataDir(root: string): string {\n  try {\n    const parsed = JSON.parse(fs.readFileSync(path.join(root, 'live-tokens.config.json'), 'utf-8'));\n    if (parsed && typeof parsed === 'object' && typeof parsed.dataDir === 'string') {\n      return path.resolve(root, parsed.dataDir);\n    }\n  } catch {\n    // Missing or unparseable reads as absent, matching `readLiveTokensConfig`.\n  }\n  return path.resolve(root, DEFAULT_DATA_DIR);\n}\n\nexport function resolveTestingConfig(\n  config: LiveTokensTestingConfig = {},\n  root: string = process.cwd(),\n): ResolvedTestingConfig {\n  const projectRoot = path.resolve(root);\n  return {\n    root: projectRoot,\n    viteConfig: path.resolve(projectRoot, config.viteConfig ?? 'vite.config.ts'),\n    devCommand: config.devCommand ?? DEFAULT_DEV_COMMAND,\n    port: config.port,\n    componentsPath: config.componentsPath ?? DEFAULT_COMPONENTS_PATH,\n    dataDir: config.dataDir ? path.resolve(projectRoot, config.dataDir) : configuredDataDir(projectRoot),\n    registrySetup: config.registrySetup\n      ? path.resolve(projectRoot, config.registrySetup)\n      : undefined,\n    contractsModule: config.contractsModule\n      ? path.resolve(projectRoot, config.contractsModule)\n      : undefined,\n    pageRoutes: config.pageRoutes ?? {},\n    pageViewports: config.pageViewports?.length ? config.pageViewports : DEFAULT_PAGE_VIEWPORTS,\n  };\n}\n\nexport function devServerCommand(command: string, host: string, port: number): string {\n  return command.replaceAll('{host}', host).replaceAll('{port}', String(port));\n}\n","// The package's dev-only editor surfaces live under a reserved `/live-tokens/*`\n// namespace so they can never collide with a consumer's own routes — the\n// consumer owns the rest of the URL space. Keeping the defaults in one place\n// is the guard against the nav rail and the dispatcher drifting onto different\n// paths (the collision/shadow class these constants exist to prevent).\n//\n// A consumer relocates or disables each surface via the `editorRoutes` prop on\n// <LiveTokensRouter>; these are only the defaults.\nexport const DEFAULT_EDITOR_PATH = '/live-tokens/editor';\nexport const DEFAULT_COMPONENTS_PATH = '/live-tokens/components';\nexport const DEFAULT_COLORS_PATH = '/live-tokens/colors';\nexport const DEFAULT_DOCS_PATH = '/live-tokens/docs';\n"],"mappings":";AAAA,OAAO,QAAQ;AACf,OAAO,UAAU;;;ACQV,IAAM,0BAA0B;;;ADJhC,IAAM,sBAAsB;AAI5B,IAAM,sBAAsB;AAG5B,IAAM,gBAAgB;AAGtB,IAAM,YAAY;AAGlB,IAAM,qBAAqB;AAS3B,IAAM,yBAAyC;AAAA,EACpD,EAAE,OAAO,MAAM,QAAQ,IAAI;AAAA,EAC3B,EAAE,OAAO,KAAK,QAAQ,IAAI;AAC5B;AAKA,IAAM,mBAAmB;AAEzB,IAAM,sBAAsB;AAgDrB,SAAS,oBAAoB,QAA0D;AAC5F,SAAO;AACT;AAGA,SAAS,kBAAkB,MAAsB;AAC/C,MAAI;AACF,UAAM,SAAS,KAAK,MAAM,GAAG,aAAa,KAAK,KAAK,MAAM,yBAAyB,GAAG,OAAO,CAAC;AAC9F,QAAI,UAAU,OAAO,WAAW,YAAY,OAAO,OAAO,YAAY,UAAU;AAC9E,aAAO,KAAK,QAAQ,MAAM,OAAO,OAAO;AAAA,IAC1C;AAAA,EACF,QAAQ;AAAA,EAER;AACA,SAAO,KAAK,QAAQ,MAAM,gBAAgB;AAC5C;AAEO,SAAS,qBACd,SAAkC,CAAC,GACnC,OAAe,QAAQ,IAAI,GACJ;AACvB,QAAM,cAAc,KAAK,QAAQ,IAAI;AACrC,SAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY,KAAK,QAAQ,aAAa,OAAO,cAAc,gBAAgB;AAAA,IAC3E,YAAY,OAAO,cAAc;AAAA,IACjC,MAAM,OAAO;AAAA,IACb,gBAAgB,OAAO,kBAAkB;AAAA,IACzC,SAAS,OAAO,UAAU,KAAK,QAAQ,aAAa,OAAO,OAAO,IAAI,kBAAkB,WAAW;AAAA,IACnG,eAAe,OAAO,gBAClB,KAAK,QAAQ,aAAa,OAAO,aAAa,IAC9C;AAAA,IACJ,iBAAiB,OAAO,kBACpB,KAAK,QAAQ,aAAa,OAAO,eAAe,IAChD;AAAA,IACJ,YAAY,OAAO,cAAc,CAAC;AAAA,IAClC,eAAe,OAAO,eAAe,SAAS,OAAO,gBAAgB;AAAA,EACvE;AACF;AAEO,SAAS,iBAAiB,SAAiB,MAAc,MAAsB;AACpF,SAAO,QAAQ,WAAW,UAAU,IAAI,EAAE,WAAW,UAAU,OAAO,IAAI,CAAC;AAC7E;","names":[]}