@motion-proto/live-tokens 0.88.0 → 0.89.2

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 0.89.2 — Faster component tests
+
+### Changed
+
+- **`check-component --tests` runs faster.** The declared-paint check probes
+  each view's properties in one browser call, and the token-selector check
+  clicks through one selector per component and opens every other property's
+  dropdown in one call per view. Across the 29 shipped components the two
+  checks drop from 321s to 191s. They still fail on the same defects: a
+  wrong or missing part, a pseudo-element, an SVG paint, and a dropdown with
+  nothing to pick.
+- **The npm publish waits for Verify.** A release push no longer runs the
+  unit tests and the live-editing suite twice. The publish workflow gates on
+  the Verify run for the tagged commit and runs only the packaging checks.
+
+## 0.89.1 — Publish gate stops its dev server
+
+### Fixed
+
+- **The component gate stops the dev server it starts.** It launched
+  `npx vite`, and stopping npx left vite running, still writing into the
+  gate's temp folder while cleanup removed it. Cleanup failed with ENOTEMPTY,
+  and 0.89.0 never reached npm. The gate now runs vite directly and waits for
+  it to exit.
+
+## 0.89.0 — Bare images
+
+### Added
+
+- **`Image` takes `variant="bare"`.** A bare image shows the picture with no
+  border and no shadow, for art that carries its own edge: cut-out art,
+  screenshots with their own frame, photos that bleed into a section. It has
+  its own `--image-bare-*` tokens (radius, border, border width, shadow),
+  editable under the Bare tab in the editor. They default to no radius, a
+  transparent zero-width border, and no shadow. The shipped themes carry them.
+
+### Changed (breaking)
+
+- **`Image`'s height prop is `size`.** `variant` now picks the frame style
+  (`default` or `bare`), and `size` takes the heights `variant` used to:
+  `default`, `banner`, `medium`, `compact`. Rewrite `<Image variant="banner">`
+  as `<Image size="banner">`. `check-page` reports each old use as an
+  `unknown-prop-value` finding.
+
 ## 0.88.0 — Eval results on the testing page
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.88.0",
+  "version": "0.89.2",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/component-editor/ImageEditor.svelte

@@ -3,18 +3,25 @@
 
   export const component = 'image';
 
-  // Single object: image frame.
-  const states: Record<string, Token[]> = {
-    image: [
-      { label: 'border color', groupKey: 'border', variable: '--image-default-border' },
-      { label: 'border width', groupKey: 'width', variable: '--image-default-border-width' },
-      { label: 'corner radius', groupKey: 'radius', variable: '--image-default-radius' },
-      { label: 'image shadow', groupKey: 'shadow', variable: '--image-default-shadow' },
-      { label: 'zoom amount', groupKey: 'scale', variable: '--image-zoom-scale' },
-    ],
-  };
+  const variants = ['default', 'bare'] as const;
+  type Variant = typeof variants[number];
 
-  export const allTokens: Token[] = Object.values(states).flat();
+  function frameTokens(v: Variant): Token[] {
+    return [
+      { label: 'border color', groupKey: 'border', variable: `--image-${v}-border` },
+      { label: 'border width', groupKey: 'width', variable: `--image-${v}-border-width` },
+      { label: 'corner radius', groupKey: 'radius', variable: `--image-${v}-radius` },
+      { label: 'image shadow', groupKey: 'shadow', variable: `--image-${v}-shadow` },
+    ];
+  }
+  const zoomScale: Token = { label: 'zoom amount', groupKey: 'scale', variable: '--image-zoom-scale' };
+  function variantStates(v: Variant): Record<string, Token[]> {
+    return { [v]: v === 'default' ? [...frameTokens(v), zoomScale] : frameTokens(v) };
+  }
+
+  export const allTokens: Token[] = variants.flatMap((v) => Object.values(variantStates(v)).flat());
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
 
   // Global zoom defaults. `none` = off; `scale(...)` = on. `--image-zoom-enabled` scales the
   // content within the masked frame (overflow scaling); `--image-grow-enabled` scales the whole
@@ -42,6 +49,7 @@
   import Image from '../../system/components/Image.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { buildSiblings } from './scaffolding/siblings';
   import demoImageUrl from '../../system/assets/offering.webp';
   import { editorState, setComponentAlias } from '../core/store/editorStore';
 
@@ -66,8 +74,8 @@
   const setOverflowScaling = (checked: boolean) => applyZoom(useZoom, checked);
 </script>
 
-<ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow." tokens={allTokens}>
-  <VariantGroup name="image" title="Image" {states} {component}>
+<ComponentEditorBase {component} title="Image" description="Picture in the page flow. Default frames it with rounded corners, a border, and a shadow. Bare shows the picture alone." tokens={allTokens} variants={variantOptions}>
+  <VariantGroup name="default" title="Default" states={variantStates('default')} {component} siblings={buildSiblings(variants, 'default', variantStates)}>
     {#snippet stateActions()}
       <label class="zoom-enable">
         <input type="checkbox" checked={useZoom} onchange={(e) => setUseZoom(e.currentTarget.checked)} />
@@ -78,7 +86,7 @@
         <span>Overflow scaling (mask zoom to frame)</span>
       </label>
     {/snippet}
-    <Image src={demoImageUrl} alt="Demo" variant="banner" zoom={useZoom ? undefined : false} {overflowScaling} forceHover={useZoom} />
+    <Image src={demoImageUrl} alt="Demo" size="banner" zoom={useZoom ? undefined : false} {overflowScaling} forceHover={useZoom} />
     <p class="zoom-help">
       Use zoom on hover: every image scales on hover (a page can still force it per image with the
       <code>zoom</code> prop). Overflow scaling on (default): the content zooms inside the fixed frame,
@@ -86,6 +94,9 @@
       <code>overflowScaling</code>.
     </p>
   </VariantGroup>
+  <VariantGroup name="bare" title="Bare" states={variantStates('bare')} {component} siblings={buildSiblings(variants, 'bare', variantStates)}>
+    <Image src={demoImageUrl} alt="Demo" variant="bare" size="banner" />
+  </VariantGroup>
 </ComponentEditorBase>
 
 <style>

package/src/live-tokens/data/themes/autumn.json

@@ -3128,6 +3128,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-1",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/live-tokens/data/themes/halloween.json

@@ -3167,6 +3167,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-3",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/live-tokens/data/themes/midnight-study.json

@@ -3185,6 +3185,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-1",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/live-tokens/data/themes/ocean.json

@@ -3127,6 +3127,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-1",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/live-tokens/data/themes/royal-velvet.json

@@ -3158,6 +3158,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-2",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/live-tokens/data/themes/sketchy.json

@@ -3141,6 +3141,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-1",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/live-tokens/data/themes/spring-meadow.json

@@ -3114,6 +3114,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-1",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/live-tokens/data/themes/sunset.json

@@ -3166,6 +3166,10 @@
         "--image-default-border": "--border-neutral",
         "--image-default-border-width": "--border-width-1",
         "--image-default-shadow": "--shadow-md",
+        "--image-bare-radius": "--radius-none",
+        "--image-bare-border": "--color-transparent",
+        "--image-bare-border-width": "--border-width-0",
+        "--image-bare-shadow": "--shadow-none",
         "--image-zoom-scale": "--scale-sm"
       }
     },

package/src/system/components/Image.svelte

@@ -10,7 +10,8 @@
     constraints: ['Page CSS paints decoration.'],
     props: {
       variant:
-        "`default` keeps the picture's own proportions, `banner` gives it a tall frame, `medium` and `compact` shorter ones.",
+        '`default` frames the picture with a border and shadow. `bare` drops the frame for pictures that carry their own edge, such as cut-out art or screenshots.',
+      size: "`default` keeps the picture's own proportions, `banner` gives it a tall frame, `medium` and `compact` shorter ones.",
     },
   } satisfies CatalogueEntry;
 </script>
@@ -19,7 +20,8 @@
   interface Props {
     src: string;
     alt: string;
-    variant?: 'default' | 'banner' | 'medium' | 'compact';
+    variant?: 'default' | 'bare';
+    size?: 'default' | 'banner' | 'medium' | 'compact';
     height?: string | undefined;
     /** Zoom the contents on hover (frame stays fixed). `undefined` inherits the editor's
         global "Use zoom" default; `true`/`false` force this instance on/off. */
@@ -42,6 +44,7 @@
     src,
     alt,
     variant = 'default',
+    size = 'default',
     height = undefined,
     zoom = undefined,
     overflowScaling = undefined,
@@ -52,14 +55,14 @@
     forceHover = false,
   }: Props = $props();
 
-  const variantHeights: Record<string, string | undefined> = {
+  const sizeHeights: Record<string, string | undefined> = {
     default: undefined,
     banner: '360px',
     medium: '240px',
     compact: '180px',
   };
 
-  let resolvedHeight = $derived(height ?? variantHeights[variant]);
+  let resolvedHeight = $derived(height ?? sizeHeights[size]);
 
   // Per-instance override of the global zoom intrinsics. `undefined` for a variable leaves
   // :root in charge. Exactly one of the two transforms is ever the scale (the other `none`),
@@ -80,6 +83,7 @@
 
 <div
   class="image"
+  class:bare={variant === 'bare'}
   class:force-hover={forceHover}
   style:height={resolvedHeight}
   style:--image-zoom-enabled={contentHover}
@@ -94,6 +98,10 @@
     --image-default-border: var(--border-neutral);
     --image-default-border-width: var(--border-width-1);
     --image-default-shadow: var(--shadow-md);
+    --image-bare-radius: var(--radius-none);
+    --image-bare-border: var(--color-transparent);
+    --image-bare-border-width: var(--border-width-0);
+    --image-bare-shadow: var(--shadow-none);
     --image-zoom-scale: var(--scale-sm);
     /* Hover-scale targets. Contained mode (`overflowScaling`) scales the content within the
        masked frame; grow mode scales the whole frame so it grows past its box. Each is `none`
@@ -111,6 +119,12 @@
     transition: transform var(--duration-300) var(--ease-out-cubic);
   }
 
+  .image.bare {
+    border-radius: var(--image-bare-radius);
+    border: var(--image-bare-border-width) solid var(--image-bare-border);
+    box-shadow: var(--image-bare-shadow);
+  }
+
   img {
     width: 100%;
     height: 100%;

package/src/testing-js/{chunk-NXRFTTVL.js → chunk-GKO27NGN.js}

@@ -1,6 +1,6 @@
 import {
   CONTRACTS_MODULE_ENV
-} from "./chunk-FTLASW2R.js";
+} from "./chunk-SHBYZUPD.js";
 
 // src/testing/vitest.ts
 import path from "path";
@@ -54,4 +54,4 @@ function createVitestConfig(viteConfig, options = {}) {
 export {
   createVitestConfig
 };
-//# sourceMappingURL=chunk-NXRFTTVL.js.map
+//# sourceMappingURL=chunk-GKO27NGN.js.map

package/src/testing-js/{chunk-FTLASW2R.js → chunk-SHBYZUPD.js}

@@ -1022,29 +1022,32 @@ var iconButtonContract = {
 };
 
 // src/testing/contracts/image.ts
+function framePaints(v) {
+  return {
+    root: {
+      borderTopColor: `--image-${v}-border`,
+      borderTopWidth: `--image-${v}-border-width`,
+      borderRadius: `--image-${v}-radius`,
+      boxShadow: `--image-${v}-shadow`
+    }
+  };
+}
 var imageContract = {
   id: "image",
   origin: "system",
+  view: { variant: "Default" },
   root: "root",
   parts: {
     root: ".image",
     img: ".image img"
   },
   properties: [
-    {
-      paints: {
-        root: {
-          borderTopColor: "--image-default-border",
-          borderTopWidth: "--image-default-border-width",
-          borderRadius: "--image-default-radius",
-          boxShadow: "--image-default-shadow"
-        }
-      }
-    }
+    { variant: "Default", paints: framePaints("default") },
+    { variant: "Bare", paints: framePaints("bare") }
   ],
   states: {
     applicable: false,
-    reason: "the editor renders one token group (image) with no state strip"
+    reason: "each variant is one frame preset with one state, so the editor renders no state strip"
   },
   uncovered: {
     "--image-zoom-scale": "consumed inside transform: scale(), never appears verbatim in a computed style"
@@ -1392,7 +1395,7 @@ var inputContract = {
         placeholder: { color: "--input-default-placeholder" }
       }
     },
-    // `assertPaintsFromToken` (here) drives a controlled pixel probe, so a
+    // `assertProperties` (here) drives a controlled pixel probe, so a
     // unitless line-height round-trips fine. `assertPaintMap` (states, below)
     // reads the real, already-resolved value through `normalize()`, which
     // cannot recompute a unitless multiplier outside the field's own
@@ -3732,4 +3735,4 @@ export {
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-FTLASW2R.js.map
+//# sourceMappingURL=chunk-SHBYZUPD.js.map