@ethlete/cli 3.0.0-next.25 → 3.0.0-next.27

package/design/web/frame-surfaces.ts

@@ -0,0 +1,294 @@
+export type FrameSurfaceTheme = {
+  name: string;
+  type: string;
+  elevation: number;
+  isDefault: boolean;
+  colorThemeVariants: Partial<Record<string, string>>;
+};
+export type FrameColorTheme = { name: string; type: string | null; isDefault: boolean };
+export type FrameThemes = { surfaces: FrameSurfaceTheme[]; colors: FrameColorTheme[] };
+
+export const AUTO_SURFACE_ATTRIBUTE = 'data-et-auto-surface';
+export const SURFACE_INTERACTIVE_ATTRIBUTE = 'data-et-surface-interactive';
+export const SEMANTIC_COLOR_ATTRIBUTE = 'data-et-semantic-color';
+
+const SURFACE_CLASS_PREFIX = 'et-surface--';
+const COLOR_CLASS_PREFIX = 'et-color--';
+const SURFACE_INTERACTIVE_CLASS = 'et-surface-interactive';
+const SURFACE_CLASS_SELECTOR = /^\.et-surface--([\w-]+)$/u;
+const COLOR_CLASS_SELECTOR = /^\.et-color--([\w-]+)$/u;
+const RESERVED_COLORS = new Set(['default', 'surface']);
+
+const surfaceVarsOf = (style: CSSStyleDeclaration) => {
+  const type = style.getPropertyValue('--et-surface-type').trim();
+  const elevation = Number.parseInt(style.getPropertyValue('--et-surface-elevation'), 10);
+
+  return type && Number.isFinite(elevation) ? { type, elevation } : null;
+};
+
+const colorThemeVariantsOf = (style: CSSStyleDeclaration) =>
+  Object.fromEntries(
+    style
+      .getPropertyValue('--et-surface-color-theme-variants')
+      .split(',')
+      .map((entry) => entry.trim().split(/\s+/u))
+      .filter((pair): pair is [string, string] => pair.length === 2),
+  );
+
+const scopeNamesOf = (rule: CSSStyleRule, selector: RegExp) =>
+  rule.selectorText
+    .split(',')
+    .map((part) => selector.exec(part.trim())?.[1])
+    .filter((name): name is string => name !== undefined);
+
+const themesOfRules = (rules: CSSRuleList, themes: FrameThemes) => {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSStyleRule) {
+      const surface = surfaceVarsOf(rule.style);
+
+      if (surface) {
+        const names = scopeNamesOf(rule, SURFACE_CLASS_SELECTOR);
+        const isDefault = names.includes(`default-${surface.type}`);
+        const registered = names.length > 1 ? names.filter((name) => name !== `default-${surface.type}`) : names;
+        const colorThemeVariants = colorThemeVariantsOf(rule.style);
+
+        registered.forEach((name) => themes.surfaces.push({ name, ...surface, isDefault, colorThemeVariants }));
+      }
+
+      if (rule.style.getPropertyValue('--et-color-primary')) {
+        const names = scopeNamesOf(rule, COLOR_CLASS_SELECTOR);
+        const type = rule.style.getPropertyValue('--et-color-theme-type').trim() || null;
+        const isDefault = names.includes('default');
+
+        names
+          .filter((name) => !RESERVED_COLORS.has(name))
+          .forEach((name) => themes.colors.push({ name, type, isDefault }));
+      }
+    }
+
+    if ('cssRules' in rule) themesOfRules((rule as CSSGroupingRule).cssRules, themes);
+  }
+
+  return themes;
+};
+
+const sheetThemes = new WeakMap<CSSStyleSheet, FrameThemes>();
+
+/**
+ * The surface and colour themes the frame's stylesheets register, as the SDK's generated theme CSS writes them: every
+ * `.et-surface--<name>` rule that sets `--et-surface-type` and `--et-surface-elevation` (with its
+ * `--et-surface-color-theme-variants`), and every `.et-color--<name>` rule that sets `--et-color-primary` (with its
+ * `--et-color-theme-type`).
+ */
+export const registeredThemesOf = (document: Document): FrameThemes => {
+  const all: FrameThemes = { surfaces: [], colors: [] };
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    let themes = sheetThemes.get(sheet);
+
+    if (!themes) {
+      try {
+        themes = themesOfRules(sheet.cssRules, { surfaces: [], colors: [] });
+      } catch {
+        // A cross-origin sheet hides its rules.
+        continue;
+      }
+
+      sheetThemes.set(sheet, themes);
+    }
+
+    all.surfaces.push(...themes.surfaces);
+    all.colors.push(...themes.colors);
+  }
+
+  return all;
+};
+
+const surfaceThemeOf = (element: Element, themes: FrameSurfaceTheme[]): FrameSurfaceTheme | null => {
+  for (let current: Element | null = element; current; current = current.parentElement) {
+    for (const className of Array.from(current.classList)) {
+      if (!className.startsWith(SURFACE_CLASS_PREFIX)) continue;
+
+      const name = className.slice(SURFACE_CLASS_PREFIX.length);
+      const theme = themes.find((candidate) =>
+        name.startsWith('default-')
+          ? candidate.isDefault && `default-${candidate.type}` === name
+          : candidate.name === name,
+      );
+
+      if (theme) return theme;
+    }
+  }
+
+  const vars = surfaceVarsOf(getComputedStyle(element));
+  const matches = vars ? themes.filter((theme) => theme.type === vars.type && theme.elevation === vars.elevation) : [];
+
+  return matches.find((theme) => theme.isDefault) ?? matches[0] ?? null;
+};
+
+const colorVariantOf = (
+  surface: FrameSurfaceTheme | null,
+  { chosen, colors }: { chosen: string; colors: FrameColorTheme[] },
+) => {
+  const variant = surface?.colorThemeVariants[chosen];
+
+  return variant && colors.some((theme) => theme.name === variant) ? variant : chosen;
+};
+
+const appliedSurface = new WeakMap<Element, string>();
+const appliedColor = new WeakMap<Element, { chosen: string; variant: string }>();
+
+const defaultColorOf = (colors: FrameColorTheme[]) => colors.find((theme) => theme.isDefault)?.name ?? null;
+
+const chosenColorOf = (element: Element | null, colors: FrameColorTheme[]) => {
+  for (let current = element; current; current = current.parentElement) {
+    const applied = appliedColor.get(current);
+
+    if (applied) return applied.chosen;
+
+    for (const className of Array.from(current.classList)) {
+      if (!className.startsWith(COLOR_CLASS_PREFIX)) continue;
+
+      const name = className.slice(COLOR_CLASS_PREFIX.length);
+
+      if (name === 'default') return defaultColorOf(colors);
+      if (colors.some((theme) => theme.name === name)) return name;
+    }
+  }
+
+  return defaultColorOf(colors);
+};
+
+const applyColor = (element: Element, color: { chosen: string; variant: string } | null) => {
+  const previous = appliedColor.get(element);
+
+  if (previous && previous.variant !== color?.variant)
+    element.classList.remove(`${COLOR_CLASS_PREFIX}${previous.variant}`);
+
+  if (!color) {
+    appliedColor.delete(element);
+
+    return;
+  }
+
+  appliedColor.set(element, color);
+  if (!element.classList.contains(`${COLOR_CLASS_PREFIX}${color.variant}`))
+    element.classList.add(`${COLOR_CLASS_PREFIX}${color.variant}`);
+};
+
+const resolveAutoSurface = (element: Element, themes: FrameSurfaceTheme[]) => {
+  const parent = element.parentElement ? surfaceVarsOf(getComputedStyle(element.parentElement)) : null;
+  const name = parent
+    ? (themes.find((theme) => theme.type === parent.type && theme.elevation === parent.elevation + 1)?.name ?? null)
+    : null;
+  const previous = appliedSurface.get(element);
+
+  if (previous !== undefined && previous !== name) element.classList.remove(`${SURFACE_CLASS_PREFIX}${previous}`);
+
+  if (name === null) {
+    appliedSurface.delete(element);
+
+    return;
+  }
+
+  appliedSurface.set(element, name);
+  if (!element.classList.contains(`${SURFACE_CLASS_PREFIX}${name}`))
+    element.classList.add(`${SURFACE_CLASS_PREFIX}${name}`);
+};
+
+const resolveColor = (element: Element, themes: FrameThemes) => {
+  const type = element.getAttribute(SEMANTIC_COLOR_ATTRIBUTE);
+
+  if (type) {
+    const chosen = themes.colors.find((theme) => theme.type === type)?.name;
+
+    applyColor(
+      element,
+      chosen
+        ? {
+            chosen,
+            variant: colorVariantOf(surfaceThemeOf(element, themes.surfaces), { chosen, colors: themes.colors }),
+          }
+        : null,
+    );
+
+    return;
+  }
+
+  const chosen = element.hasAttribute(AUTO_SURFACE_ATTRIBUTE)
+    ? chosenColorOf(element.parentElement, themes.colors)
+    : null;
+
+  if (!chosen || !element.parentElement) {
+    applyColor(element, null);
+
+    return;
+  }
+
+  const variant = colorVariantOf(surfaceThemeOf(element, themes.surfaces), { chosen, colors: themes.colors });
+  const inherited = colorVariantOf(surfaceThemeOf(element.parentElement, themes.surfaces), {
+    chosen,
+    colors: themes.colors,
+  });
+
+  applyColor(element, variant === inherited ? null : { chosen, variant });
+};
+
+/**
+ * Resolves the theming attributes under `root` in document order, outer first: `[data-et-auto-surface]` gets the
+ * `et-surface--<name>` class of the theme one elevation above the surface it sits on, with the same type, like
+ * `etAutoSurface` (without such a theme it keeps the parent surface), plus the class of that surface's
+ * `colorThemeVariants` swap of the inherited accent, like `etProvideSurface`. `[data-et-semantic-color="<type>"]`
+ * gets the `et-color--<name>` class of the first colour theme of that type, swapped for its surface, like
+ * `injectSemanticColorTheme`; without a theme of that type it gets none.
+ */
+export const resolveTheming = (root: ParentNode, themes: FrameThemes) => {
+  for (const element of Array.from(
+    root.querySelectorAll(`[${AUTO_SURFACE_ATTRIBUTE}], [${SEMANTIC_COLOR_ATTRIBUTE}]`),
+  )) {
+    if (element.hasAttribute(AUTO_SURFACE_ATTRIBUTE)) resolveAutoSurface(element, themes.surfaces);
+
+    resolveColor(element, themes);
+  }
+};
+
+/**
+ * Resolves the theming attributes under `root` now and again after every change of its markup or of the page's
+ * stylesheets: auto surfaces and semantic colours as `resolveTheming`, and `[data-et-surface-interactive]` as `etSurfaceInteractive`, whose CSS
+ * (`interactiveCss`) goes into the page once. Returns the resolve function.
+ */
+export const watchSurfaces = (root: HTMLElement, interactiveCss: string) => {
+  const document = root.ownerDocument;
+  let styled = false;
+
+  const resolve = () => {
+    const interactive = Array.from(root.querySelectorAll(`[${SURFACE_INTERACTIVE_ATTRIBUTE}]`));
+
+    interactive.forEach((element) => {
+      if (!element.classList.contains(SURFACE_INTERACTIVE_CLASS)) element.classList.add(SURFACE_INTERACTIVE_CLASS);
+    });
+
+    if (interactive.length > 0 && !styled) {
+      const style = document.createElement('style');
+
+      styled = true;
+      style.textContent = interactiveCss;
+      document.head.append(style);
+    }
+
+    if (root.querySelector(`[${AUTO_SURFACE_ATTRIBUTE}], [${SEMANTIC_COLOR_ATTRIBUTE}]`))
+      resolveTheming(root, registeredThemesOf(document));
+  };
+
+  resolve();
+
+  new MutationObserver(resolve).observe(root, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class', AUTO_SURFACE_ATTRIBUTE, SURFACE_INTERACTIVE_ATTRIBUTE, SEMANTIC_COLOR_ATTRIBUTE],
+  });
+  new MutationObserver(resolve).observe(document.head, { childList: true, subtree: true, characterData: true });
+
+  return resolve;
+};

package/design/web/frame.ts

@@ -1,7 +1,14 @@
-import { CallVariant, Drawing, fitOutOfFlow, mountDrawing, placeOverlays } from '../define-call';
-import { Part } from '../define-part';
+import { CallVariant, Drawing, fitOutOfFlow, mountDrawing, placeOverlays, withNgStyles } from '../define-call';
+import { drawState, Motion, Part } from '../define-part';
 import { applyEmbed, fitEmbed } from '../embed-page';
+import { paintFill } from './frame-fill';
+import { fitRoot } from './frame-fit';
+import { pinScheme } from './frame-scheme';
+import { watchSurfaces } from './frame-surfaces';
+import surfaceInteractiveCss from './surface-interactive.css?inline';
+import { createMotionDriver, emulateReducedMotion, motionDriveMessageOf } from '../motion-drive';
 import { runRules, stepMotion, SteppedMotion } from '../motion-runtime';
+import { rootTokensOf, withTokenNames } from '../motion-tokens';
 import { calls } from 'virtual:design-explore';
 import { loadEnv, loadProductEnv } from 'virtual:design-explore/env';
 import { parts, sketchParts, sketchTokens, tokens } from 'virtual:design-explore/system';
@@ -40,12 +47,12 @@ const fill = params.get('fill');
 // On <html> a theme class ties with the `:root` defaults of the theme CSS, which come later and win.
 if (surface) root.classList.add(`et-surface--${surface}`);
 if (color) root.classList.add(`et-color--${color}`);
-if (fill) document.body.style.background = `var(--${fill})`;
-if (fit) {
-  document.documentElement.style.overflow = 'hidden';
-  root.style.width = 'max-content';
-  root.style.padding = '16px';
-}
+if (fill) paintFill(document.body, fill);
+
+const scheme = params.get('scheme');
+
+if (scheme === 'light' || scheme === 'dark') pinScheme(document, scheme);
+if (fit) fitRoot(root, { padded: !params.has('bare') });
 
 const markFailed = (message: string) => {
   errored = true;
@@ -66,6 +73,12 @@ const fail = (message: string) => {
   return null;
 };
 
+const failMissing = (message: string) => {
+  document.documentElement.setAttribute('data-et-missing', '');
+
+  return fail(message);
+};
+
 const showSetupError = (message: string) => {
   markFailed(message);
 
@@ -96,21 +109,44 @@ let drawnPart: { part: Part<unknown>; states: Record<string, unknown> } | null =
 
 const drawCall = async (): Promise<Drawing | null> => {
   const call = calls[slug];
-  if (!call) return fail(`design-explore: no call "${slug}"`);
+  if (!call) return failMissing(`design-explore: no call "${slug}"`);
 
   const variant: CallVariant | undefined = (await call()).default.variants.find((o) => o.key === key);
-  if (!variant) return fail(`design-explore: call "${slug}" has no variant "${key}"`);
+  if (!variant) return failMissing(`design-explore: call "${slug}" has no variant "${key}"`);
+
+  return variant
+    .load()
+    .then((module) => module.default)
+    .then(
+      (drawn) => withNgStyles(drawn),
+      (error: unknown) => fail(`design-explore: variant "${key}" failed\n${messageOf(error)}`),
+    );
+};
+
+const composeParam = product ? params.get('compose') : null;
+
+/** Makes each part named in the `compose` param draw with its props merged over the props its user passes. */
+const composed = async (name: string) => {
+  const overrides = composeParam ? (JSON.parse(composeParam) as Record<string, Record<string, unknown>>) : {};
 
-  return variant.load().then(
-    (module) => module.default,
-    (error: unknown) => fail(`design-explore: variant "${key}" failed\n${messageOf(error)}`),
+  await Promise.all(
+    Object.entries(overrides).map(async ([used, props]) => {
+      const load = parts[name]?.[used];
+
+      if (!load) throw new Error(`design-explore: product "${name}" has no part "${used}" to compose`);
+
+      const { default: part } = await retried(load);
+      const render = part.render.bind(part);
+
+      part.render = (given: unknown) => render({ ...(given as Record<string, unknown>), ...props });
+    }),
   );
 };
 
 const drawPart = async (name: string): Promise<Drawing | null> => {
   const load = sketch ? sketchParts[name]?.[sketch]?.[sketchVariant]?.[partKey] : parts[name]?.[partKey];
   if (!load)
-    return fail(
+    return failMissing(
       sketch
         ? `design-explore: variant "${sketchVariant}" of the sketch on ${sketch} in product "${name}" has no part "${partKey}"`
         : `design-explore: product "${name}" has no part "${partKey}"`,
@@ -118,18 +154,20 @@ const drawPart = async (name: string): Promise<Drawing | null> => {
 
   const loadProps = propsSketch ? sketchParts[name]?.[propsSketch]?.[propsVariant]?.[partKey] : load;
   if (!loadProps)
-    return fail(
+    return failMissing(
       `design-explore: variant "${propsVariant}" of the sketch on ${propsSketch} in product "${name}" has no part "${partKey}"`,
     );
 
   try {
+    await composed(name);
+
     const [{ default: part }, { default: holder }] = await Promise.all([retried(load), retried(loadProps)]);
 
-    if (!(key in holder.states)) return fail(`design-explore: part "${partKey}" has no state "${key}"`);
+    if (!(key in holder.states)) return failMissing(`design-explore: part "${partKey}" has no state "${key}"`);
 
     drawnPart = { part: part as Part<unknown>, states: holder.states };
 
-    return await part.render(holder.states[key]);
+    return await drawState(part as Part<unknown>, holder.states[key]);
   } catch (error) {
     return fail(`design-explore: state "${key}" of "${partKey}" failed\n${messageOf(error)}`);
   }
@@ -148,7 +186,7 @@ const force = (element: Element, name: string) => {
   if (name === 'disabled') {
     element.setAttribute('disabled', '');
     element.setAttribute('aria-disabled', 'true');
-  } else {
+  } else if (!element.hasAttribute('disabled') && element.getAttribute('aria-disabled') !== 'true') {
     element.setAttribute('data-et-force', name);
   }
 };
@@ -181,11 +219,16 @@ const report = () => {
   );
 };
 
+const reportPainted = () =>
+  requestAnimationFrame(() =>
+    requestAnimationFrame(() => parent.postMessage({ type: 'design-explore:painted', variant: key }, '*')),
+  );
+
 const stateMarkupOf = ({ part, states }: NonNullable<typeof drawnPart>, styles: string) => {
   const sheets = new Set([styles]);
 
   return (state: string) =>
-    Promise.resolve(part.render(states[state])).then((drawn) =>
+    drawState(part, states[state]).then((drawn) =>
       sheets.has(drawn.styles)
         ? drawn.body
         : forced(drawn.styles).then((css) => {
@@ -218,11 +261,53 @@ const exposeStepped = (options: { start: () => Promise<SteppedMotion>; interrupt
         }),
       seek: (ms: number) => steppedOf().seek(ms),
       bounds: () => steppedOf().bounds(),
-      timeline: () => ({ end: steppedOf().end(), tracks: steppedOf().tracks(), interrupt: options.interrupt }),
+      timeline: () => {
+        const tokens = rootTokensOf(document);
+
+        return {
+          end: steppedOf().end(),
+          tracks: steppedOf()
+            .tracks()
+            .map((track) => withTokenNames(track, tokens)),
+          interrupt: options.interrupt,
+        };
+      },
     },
   });
 };
 
+const motionStartOf = (options: {
+  drawn: NonNullable<typeof drawnPart>;
+  motion: Motion;
+  markupOf: (state: string) => Promise<string>;
+  switching?: () => void;
+}) => {
+  const { drawn, motion, markupOf } = options;
+
+  return () =>
+    Promise.all([markupOf(motion.to), motion.interrupt === undefined ? null : markupOf(motion.from)]).then(
+      ([markup, back]) => {
+        options.switching?.();
+
+        return stepMotion({
+          root,
+          markup,
+          motion,
+          ...(back === null
+            ? {}
+            : {
+                reverse: {
+                  markup: back,
+                  motion: Object.values(drawn.part.motions ?? {}).find(
+                    (other) => other.from === motion.to && other.to === motion.from,
+                  ),
+                },
+              }),
+        });
+      },
+    );
+};
+
 const exposeMotion = (options: { drawn: NonNullable<typeof drawnPart>; name: string; styles: string }) => {
   const { drawn, name, styles } = options;
   const motion = drawn.part.motions?.[name];
@@ -235,29 +320,57 @@ const exposeMotion = (options: { drawn: NonNullable<typeof drawnPart>; name: str
     return;
   }
 
-  const markupOf = stateMarkupOf(drawn, styles);
-
   exposeStepped({
     interrupt: motion.interrupt ?? null,
-    start: () =>
-      Promise.all([markupOf(motion.to), motion.interrupt === undefined ? null : markupOf(motion.from)]).then(
-        ([markup, back]) =>
-          stepMotion({
-            root,
-            markup,
-            motion,
-            ...(back === null
-              ? {}
-              : {
-                  reverse: {
-                    markup: back,
-                    motion: Object.values(drawn.part.motions ?? {}).find(
-                      (other) => other.from === motion.to && other.to === motion.from,
-                    ),
-                  },
-                }),
-          }),
-      ),
+    start: motionStartOf({ drawn, motion, markupOf: stateMarkupOf(drawn, styles) }),
+  });
+};
+
+const settleAnimations = () => {
+  for (const animation of document.getAnimations()) {
+    if (Number.isFinite(animation.effect?.getComputedTiming().endTime)) animation.finish();
+    else animation.cancel();
+  }
+};
+
+const listenForDrive = (drawn: NonNullable<typeof drawnPart>, styles: string) => {
+  const markupOf = stateMarkupOf(drawn, styles);
+  const drawnMarkup = root.innerHTML;
+  let restore: () => void = () => undefined;
+
+  const driver = createMotionDriver({
+    document,
+    reply: (answer) => parent.postMessage({ ...answer, variant: key }, '*'),
+    released: () => {
+      restore();
+      restore = () => undefined;
+    },
+    start: (name, reduced) => {
+      const motion = drawn.part.motions?.[name];
+
+      if (!motion) return Promise.reject(new Error(`design-explore: part "${partKey}" has no motion "${name}"`));
+      if (motion.from !== key)
+        return Promise.reject(new Error(`design-explore: motion "${name}" starts at "${motion.from}", not "${key}"`));
+
+      settleAnimations();
+      restore();
+      root.innerHTML = drawnMarkup;
+
+      return motionStartOf({
+        drawn,
+        motion,
+        markupOf,
+        switching: () => {
+          restore = emulateReducedMotion(document, reduced);
+        },
+      })();
+    },
+  });
+
+  addEventListener('message', (event) => {
+    const message = event.source === parent ? motionDriveMessageOf(event.data) : null;
+
+    if (message) void driver.handle(message);
   });
 };
 
@@ -281,7 +394,7 @@ const exposeFlowLine = (options: { product: string; to: string; styles: string }
 
         // The styles of the to page ride in the markup: in <head> they would restyle the from page before the View Transition captures it.
 
-        return Promise.resolve((part as Part<unknown>).render(states[toState]))
+        return drawState(part as Part<unknown>, states[toState])
           .then((drawn) =>
             drawn.styles === options.styles
               ? drawn.body
@@ -327,6 +440,8 @@ const drawFrame = async () => {
     style.textContent = await forced(loaded.styles ?? '');
     document.head.append(style);
     const error = mountDrawing(root, loaded);
+
+    watchSurfaces(root, surfaceInteractiveCss);
     const partRoot = partRootOf(root);
 
     if (interaction && partRoot) force(partRoot, interaction);
@@ -337,6 +452,8 @@ const drawFrame = async () => {
     if (flowTo && product) exposeFlowLine({ product, to: flowTo, styles: loaded.styles ?? '' });
     else if (motionName && drawnPart) exposeMotion({ drawn: drawnPart, name: motionName, styles: loaded.styles ?? '' });
     else if (drawnPart?.part.rules?.length) runPartRules(drawnPart, loaded.styles ?? '');
+
+    if (!flowTo && !motionName && drawnPart) listenForDrive(drawnPart, loaded.styles ?? '');
   }
 
   const place = () => {
@@ -346,7 +463,7 @@ const drawFrame = async () => {
   };
 
   new MutationObserver(place).observe(root, { childList: true, subtree: true });
-  new ResizeObserver(place).observe(root);
+  new ResizeObserver(() => requestAnimationFrame(place)).observe(root);
   place();
 
   const reported = new ResizeObserver(report);
@@ -355,6 +472,7 @@ const drawFrame = async () => {
   if (fit) reported.observe(root);
   reporting = true;
   report();
+  reportPainted();
 
   addEventListener('keydown', (event) => {
     if (event.key === 'Escape') parent.postMessage({ type: 'design-explore:escape', variant: key }, '*');
@@ -371,4 +489,5 @@ void drawFrame().catch((error: unknown) => {
   fail(`design-explore: frame failed\n${messageOf(error)}`);
   reporting = true;
   report();
+  reportPainted();
 });

package/design/web/surface-interactive.css

@@ -0,0 +1,42 @@
+@layer components {
+  :where(.et-surface-interactive) {
+    --et-surface-interaction-rgb: var(--et-surface-interaction);
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+
+  /* hover-capable pointers only — on touch, :hover sticks after a tap */
+  @media (hover: hover) {
+    :where(.et-surface-interactive:hover) {
+      --et-surface-interaction-rgb: var(--et-surface-interaction-hover, var(--et-surface-interaction));
+      --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+    }
+  }
+
+  :where(.et-surface-interactive:focus-visible) {
+    --et-surface-interaction-rgb: var(
+      --et-surface-interaction-focus,
+      var(--et-surface-interaction-hover, var(--et-surface-interaction))
+    );
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+
+  :where(.et-surface-interactive:active) {
+    --et-surface-interaction-rgb: var(
+      --et-surface-interaction-active,
+      var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction)))
+    );
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+
+  :where(.et-surface-interactive[disabled]),
+  :where(.et-surface-interactive[aria-disabled='true']) {
+    --et-surface-interaction-rgb: var(
+      --et-surface-interaction-disabled,
+      var(
+        --et-surface-interaction-active,
+        var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction)))
+      )
+    );
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+}