@motion-proto/live-tokens 0.95.0 → 0.97.0

package/src/editor/ui/sections/CustomColorsSection.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { get } from 'svelte/store';
+  import {
+    editorState,
+    beginScope,
+    commitScope,
+    cancelScope,
+    beginSliderGesture,
+    setCustomColor,
+    removeCustomColor,
+    replaceAndRemoveCustomColor,
+    type Scope,
+  } from '../../core/store/editorStore';
+  import type { Oklch } from '../../core/palettes/oklch';
+  import ColorEditPanel from '../ColorEditPanel.svelte';
+  import CustomColorReplaceStep from '../CustomColorReplaceStep.svelte';
+
+  interface Props {
+    copiedVar?: string | null;
+    oncopy?: (variable: string) => void;
+  }
+
+  let { copiedVar = null, oncopy }: Props = $props();
+
+  const PREFIX = '--color-custom-';
+  const customNumber = (v: string) => v.slice(PREFIX.length);
+
+  let tokens = $derived(
+    [...$editorState.customColors.tokens]
+      .sort((a, b) => Number(customNumber(a.variable)) - Number(customNumber(b.variable))),
+  );
+
+  /** An open edit of one custom colour, or the replace step of its remove. */
+  interface Session {
+    mode: 'edit' | 'replace';
+    variable: string;
+    draft: Oklch;
+  }
+  let session = $state<Session | null>(null);
+  // Held outside $state: the store matches an open scope by identity, and a
+  // proxied handle would never match.
+  let sessionScope: Scope | null = null;
+
+  function tokenColor(variable: string): Oklch | undefined {
+    return get(editorState).customColors.tokens.find((t) => t.variable === variable)?.color;
+  }
+
+  function openEdit(variable: string) {
+    const color = tokenColor(variable);
+    if (!color) return;
+    sessionScope = beginScope({ label: `edit custom colour ${variable}`, collapseToOne: true, clipUndoFloor: true });
+    session = { mode: 'edit', variable, draft: { ...color } };
+  }
+
+  function editDraft(h: number, c: number, lPct: number) {
+    if (!session) return;
+    session.draft = { l: lPct / 100, c, h };
+    setCustomColor(session.variable, session.draft);
+  }
+
+  function closeEdit(commit: boolean) {
+    if (sessionScope) {
+      if (commit) commitScope(sessionScope);
+      else cancelScope(sessionScope);
+    }
+    sessionScope = null;
+    session = null;
+  }
+
+  function requestRemove(variable: string) {
+    if (removeCustomColor(variable)) return;
+    const color = tokenColor(variable);
+    if (color) session = { mode: 'replace', variable, draft: { ...color } };
+  }
+
+  function confirmReplace(replacement: string) {
+    if (!session) return;
+    const { variable } = session;
+    session = null;
+    replaceAndRemoveCustomColor(variable, replacement);
+  }
+
+  onDestroy(() => {
+    if (sessionScope) cancelScope(sessionScope);
+  });
+</script>
+
+<section class="section" id="custom-colors">
+  <h2 class="section-title">Custom Colours</h2>
+  <p class="editor-intro">A custom colour holds its own OKLCH value, and every slot that names it follows its edits. Add one from the Custom row of any colour picker. Removing a colour in use first asks which token takes its place.</p>
+  {#if tokens.length === 0}
+    <p class="custom-empty">This theme has no custom colours.</p>
+  {:else}
+    <div class="custom-grid">
+      {#each tokens as token (token.variable)}
+        {@const active = session?.variable === token.variable}
+        <div class={['custom-item', { active }]}>
+          <div class="custom-box" style="background: var({token.variable});"></div>
+          <div class="token-info">
+            <button class={['token-variable copyable', { copied: copiedVar === token.variable }]} onclick={() => oncopy?.(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+            {#if !active}
+              <div class="custom-actions">
+                <button
+                  class="custom-btn"
+                  aria-label="Edit {token.variable}"
+                  disabled={session !== null}
+                  onclick={() => openEdit(token.variable)}
+                >Edit</button>
+                <button
+                  class="custom-btn"
+                  aria-label="Remove {token.variable}"
+                  disabled={session !== null}
+                  onclick={() => requestRemove(token.variable)}
+                >Remove</button>
+              </div>
+            {/if}
+          </div>
+          {#if active && session}
+            <div class="custom-editor-host">
+              {#if session.mode === 'edit'}
+                <ColorEditPanel
+                  title="Custom › {customNumber(session.variable)}"
+                  hue={session.draft.h}
+                  chroma={session.draft.c}
+                  lightness={session.draft.l * 100}
+                  onHueChromaChange={editDraft}
+                  onSliderStart={() => beginSliderGesture(`edit ${session?.variable ?? 'custom colour'}`)}
+                  onConfirm={() => closeEdit(true)}
+                  onCancel={() => closeEdit(false)}
+                />
+              {:else}
+                <CustomColorReplaceStep
+                  variable={session.variable}
+                  color={session.draft}
+                  onconfirm={confirmReplace}
+                  oncancel={() => (session = null)}
+                />
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-24);
+  }
+
+  .section-title {
+    font-size: var(--ui-font-size-2xl);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+    margin: 0;
+    padding-bottom: var(--ui-space-8);
+    border-bottom: 2px solid var(--ui-border-high);
+  }
+
+  .editor-intro,
+  .custom-empty {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    margin: 0;
+  }
+
+  .token-variable.copyable {
+    all: unset;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    cursor: pointer;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .token-variable.copyable:hover {
+    color: var(--ui-text-accent);
+  }
+
+  .token-variable.copyable.copied {
+    color: var(--ui-text-success);
+  }
+
+  .custom-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+    gap: var(--ui-space-16);
+  }
+
+  .custom-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-12);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-lowest);
+    min-width: 0;
+  }
+
+  .custom-item.active {
+    grid-column: 1 / -1;
+    border-color: var(--ui-text-primary);
+  }
+
+  .custom-box {
+    height: 3rem;
+    border-radius: var(--ui-radius-md);
+  }
+
+  .token-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
+  }
+
+  .custom-actions {
+    display: flex;
+    gap: var(--ui-space-4);
+  }
+
+  .custom-btn {
+    padding: var(--ui-space-2) var(--ui-space-10);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xs);
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  .custom-btn:hover:not(:disabled) {
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border);
+  }
+
+  .custom-btn:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .custom-editor-host {
+    max-width: 28rem;
+    margin-top: var(--ui-space-8);
+    padding-top: var(--ui-space-12);
+    border-top: 1px dashed var(--ui-border-low);
+  }
+</style>

package/src/system/components/ImageLightbox.svelte

@@ -12,6 +12,8 @@
     props: {
       thumbAspect:
         'the ratio the thumbnail box holds, when it should not be the image\'s own. The image still opens whole, at its own ratio.',
+      thumbSrc:
+        'a smaller file for the closed thumbnail, when the full image is far larger than the tile. The lightbox still opens `src`.',
     },
   } satisfies CatalogueEntry;
 </script>
@@ -39,6 +41,8 @@
     maxWidth?: number | string | undefined;
     /** The thumbnail box's ratio, when it differs from the image's own. */
     thumbAspect?: number | undefined;
+    /** A smaller file for the closed thumbnail; the modal still opens `src`. */
+    thumbSrc?: string | undefined;
     /** Closed-thumbnail object-fit. `cover` crops the thumbnail to fill its box;
         the expanded modal always uses `contain` so the whole image stays visible.
         `cover` only crops when the thumbnail box differs from the image's shape
@@ -70,7 +74,7 @@
         The modal portals to <body>, out of reach of a wrapper around the tile,
         so a page that wants its own scrim has to say so here. */
     scrim?: string | undefined;
-    /** When true, shows a bottom toolbar (zoom in/out + percent) and enables wheel/drag zoom inside the open modal. Either way, a click on the unzoomed image closes. */
+    /** When true, shows a bottom toolbar (zoom in/out + percent) and enables wheel/drag zoom inside the open modal. Either way, a click on the unzoomed image closes. The percent measures the image against its natural resolution: 100% shows one source pixel per CSS pixel, so a large image opens fitted below 100%. Until the natural size is known it measures against the fitted view. */
     extended?: boolean;
     /** Maximum zoom, as a multiple of the image's natural resolution: `1` = 100%
         of the source's real pixels (1 source px = 1 screen px), `2` = 200%. The
@@ -106,6 +110,7 @@
     images = undefined,
     maxWidth = undefined,
     thumbAspect = undefined,
+    thumbSrc = undefined,
     fit = 'contain',
     shadow = 'box',
     surface = undefined,
@@ -664,7 +669,14 @@
     };
   });
 
-  let percentLabel = $derived(`${Math.round(scale * 100)}%`);
+  // `scale` is relative to the fitted stage; the readout reports the share of
+  // the source's real pixels, the unit `maxZoom` takes.
+  let percentLabel = $derived.by(() => {
+    const nw = naturalWidthOf(current);
+    const fitW = viewportTarget().width;
+    const ratio = nw && fitW ? (scale * fitW) / nw : scale;
+    return `${Math.round(ratio * 100)}%`;
+  });
 </script>
 
 <div
@@ -687,7 +699,9 @@
     aria-expanded={open}
     onclick={openLightbox}
   >
-    <img src={cover?.src} alt={cover?.alt} draggable="false" onload={onCoverLoad} />
+    <!-- A thumbnail's pixels understate the full image, so it never feeds the
+         measured size behind the tile aspect and the zoom caps. -->
+    <img src={thumbSrc ?? cover?.src} alt={cover?.alt} draggable="false" onload={thumbSrc ? undefined : onCoverLoad} />
   </button>
   {#if overlay}
     <!-- Beside the thumb, not in it: the thumb clips its corners. Hidden while

package/src/testing-js/page-compliance.contract.js

@@ -311,6 +311,23 @@ function variantPattern(label) {
   const keys = [.../* @__PURE__ */ new Set([words.join("-"), ...words])].map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
   return `(?:^|-)(?:${keys.join("|")})$`;
 }
+function stateMarkers(contract) {
+  if (isInapplicable(contract.states)) return [];
+  const markers = [];
+  for (const state of contract.states) {
+    if (restingState(state.state)) continue;
+    const attributes = [];
+    for (const [part, attrs] of Object.entries(state.attributes ?? {})) {
+      const declared = contract.parts[part];
+      if (declared === void 0 || typeof declared !== "string" && declared.portal) continue;
+      const selector = part === contract.root ? null : typeof declared === "string" ? declared : declared.selector;
+      for (const [name, value] of Object.entries(attrs)) attributes.push({ selector, name, value });
+    }
+    if (!state.forceClass && !attributes.some((a) => a.value !== null)) continue;
+    markers.push({ forceClass: state.forceClass ?? null, attributes });
+  }
+  return markers;
+}
 function paintChecks(contract, map) {
   const checks = [];
   for (const [part, properties] of Object.entries(map)) {
@@ -354,7 +371,7 @@ function restingPaintSpec(contract) {
     }
   }
   if (entries.length === 0) return null;
-  return { id: contract.id, root: rootSelector, entries };
+  return { id: contract.id, root: rootSelector, entries, away: stateMarkers(contract) };
 }
 var TEXT_AXES = ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing"];
 var BLOCK_DISPLAYS = ["block", "flow-root", "list-item", "flex", "grid", "table-cell", "table-caption"];
@@ -523,24 +540,33 @@ var PageHarness = class _PageHarness {
       let asserted = 0;
       const root = document.querySelector(container);
       if (!root) return { instances, asserted, failures, uncovered };
-      const normalize = (node, css, raw) => {
+      const normalize = (node, css, raw, rendered = false) => {
         const probe = document.createElement("div");
-        probe.style.display = "none";
+        if (rendered) {
+          probe.style.visibility = "hidden";
+          probe.style.position = getComputedStyle(node).position;
+        } else probe.style.display = "none";
         probe.style.borderStyle = "solid";
         probe.style.outlineStyle = "solid";
         probe.style.fontSize = getComputedStyle(node).fontSize;
         (node.parentElement ?? document.body).appendChild(probe);
         probe.style.setProperty(css.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`), raw);
-        const computed = getComputedStyle(probe)[css];
+        const computed = (getComputedStyle(probe)[css] ?? "").trim();
         probe.remove();
-        return (computed ?? "").trim();
+        return !rendered && computed.endsWith("%") ? normalize(node, css, raw, true) : computed;
       };
+      const atRest = (element, markers) => !markers.some((marker) => (marker.forceClass === null || element.classList.contains(marker.forceClass)) && marker.attributes.every(({ selector, name, value }) => {
+        const part = selector === null ? element : element.querySelector(selector);
+        if (!part) return false;
+        return value === null ? !part.hasAttribute(name) : part.getAttribute(name) === value;
+      }));
       for (const spec of list) {
         const patterns = spec.entries.map((entry) => entry.pattern === null ? null : new RegExp(entry.pattern));
         const variants = [...new Set(spec.entries.map((entry) => entry.variant).filter((v) => v !== null))];
         for (const element of root.querySelectorAll(spec.root)) {
           if (element.closest(chrome)) continue;
           instances++;
+          if (!atRest(element, spec.away)) continue;
           const classes = [...element.classList];
           const line = window.__liveTokensPageLine(element, source);
           let covered = false;