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

package/design/token-sheet.ts

@@ -0,0 +1,87 @@
+import { Drawing, html } from './define-call';
+
+export type TokenSheetOptions = {
+  title: string;
+  note?: string;
+  scope?: string;
+  css: string;
+  sample: string;
+  sampleOf: (name: string) => string;
+  sampleClass?: string;
+  only?: (name: string) => boolean;
+  pixels?: boolean;
+  styles?: string;
+  setup?: (root: HTMLElement) => void;
+};
+
+const SHEET_STYLES = `
+  .ts-root { position: relative; display: flex; flex-direction: column; gap: var(--space-4, 1.6rem); width: 960px; padding: var(--space-6, 2.4rem); box-sizing: border-box; background: var(--surface, oklch(0.17 0 0)); color: var(--text, oklch(0.94 0 0)); font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: var(--text-md, 1.3rem); line-height: var(--text-md-line, 1.8rem); }
+  .ts-title { margin: 0; font-size: var(--text-xl, 1.7rem); line-height: var(--text-xl-line, 2.2rem); font-weight: var(--weight-strong, 600); }
+  .ts-note { margin: 0; max-width: 64rem; color: var(--text-muted, oklch(0.72 0 0)); }
+  .ts-panel { margin: 0; padding: var(--space-4, 1.6rem); background: var(--surface, oklch(0.17 0 0)); border: 1px solid var(--surface-border, oklch(0.34 0 0)); border-radius: var(--radius-control-lg, 1rem); }
+  .ts-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1, 0.4rem); }
+  .ts-row { display: grid; grid-template-columns: 200px 240px 1fr; align-items: center; gap: var(--space-3, 1.2rem); min-height: var(--row, 2.4rem); }
+  .ts-name { font-family: var(--font-code, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: var(--text-sm, 1.15rem); line-height: var(--text-sm-line, 1.6rem); color: var(--text-muted, oklch(0.72 0 0)); }
+  .ts-value { font-family: var(--font-code, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: var(--text-sm, 1.15rem); line-height: var(--text-sm-line, 1.6rem); overflow-wrap: anywhere; }
+  .ts-sample { display: flex; align-items: center; min-width: 0; }
+  .ts-probe { position: absolute; left: 0; top: 0; height: 0; visibility: hidden; }
+`;
+
+const tokenNamesOf = (css: string, only: (name: string) => boolean) => [
+  ...new Set([...css.matchAll(/^\s*--([\w-]+):/gmu)].map(([, name]) => name ?? '').filter(only)),
+];
+
+const fillTokenValues = (root: HTMLElement, pixels: boolean) => {
+  const sheet = root.querySelector<HTMLElement>('.ts-root') ?? root;
+  const style = getComputedStyle(sheet);
+  const probe = sheet.querySelector<HTMLElement>('.ts-probe');
+
+  for (const cell of sheet.querySelectorAll<HTMLElement>('[data-token]')) {
+    const value = style.getPropertyValue(`--${cell.dataset['token']}`).trim();
+    let suffix = '';
+    if (pixels && probe && /^[\d.]+rem$/u.test(value)) {
+      probe.style.width = value;
+      suffix = ` · ${Math.round(probe.getBoundingClientRect().width * 10) / 10}px`;
+    }
+    cell.textContent = value + suffix;
+  }
+};
+
+/**
+ * Draws a foundation sheet: a sample panel, then one row per custom property declared in `css` (narrowed by `only`)
+ * with its value as the drawing resolves it, in px too for rem values when `pixels` is set.
+ * `scope` adds classes to the sheet root, so tokens scoped to a theme class resolve; `note` is markup under the title.
+ */
+export const tokenSheet = ({
+  title,
+  note,
+  scope,
+  css,
+  sample,
+  sampleOf,
+  sampleClass = '',
+  only = () => true,
+  pixels = false,
+  styles = '',
+  setup,
+}: TokenSheetOptions): Drawing => ({
+  body: html`<div class="ts-root${scope ? ` ${scope}` : ''}">
+    <h2 class="ts-title">${title}</h2>
+    ${note && html`<p class="ts-note">${note}</p>`}
+    <section class="ts-panel ${sampleClass}">${sample}</section>
+    <ul class="ts-panel ts-list">
+      ${tokenNamesOf(css, only)
+        .map(
+          (name) =>
+            html`<li class="ts-row">
+              <span class="ts-name">--${name}</span><span class="ts-value" data-token="${name}"></span
+              ><span class="ts-sample">${sampleOf(name)}</span>
+            </li>`,
+        )
+        .join('')}
+    </ul>
+    <span class="ts-probe"></span>
+  </div>`,
+  styles: `${SHEET_STYLES}${styles}`,
+  setup: [(root: HTMLElement) => fillTokenValues(root, pixels), ...(setup ? [setup] : [])],
+});

package/design/web/env.d.ts

@@ -9,8 +9,12 @@ declare module 'virtual:design-explore/env' {
   export const loadEnv: (project: string) => Promise<unknown>;
   /** The theme names the config declares for the project. The first of each list is the default. */
   export const themesOf: (project: string) => { surface: string[]; color: string[] };
-  /** Loads the stylesheet a product draws under, which its base parts draw under too. */
-  export const loadProductEnv: (product: string) => Promise<unknown>;
+  /** Loads the stylesheet a product, or one variant of one of its sketches, draws under, which its base parts draw under too. */
+  export const loadProductEnv: (options: {
+    product: string;
+    sketch: string | null;
+    variant: string;
+  }) => Promise<unknown>;
 }
 
 declare module 'virtual:design-explore/system' {

package/design/web/frame.ts

@@ -1,5 +1,7 @@
-import { CallVariant, Drawing, mountDrawing, placeOverlays } from '../define-call';
-import { fitEmbed } from '../embed-page';
+import { CallVariant, Drawing, fitOutOfFlow, mountDrawing, placeOverlays } from '../define-call';
+import { Part } from '../define-part';
+import { applyEmbed, fitEmbed } from '../embed-page';
+import { runRules, stepMotion, SteppedMotion } from '../motion-runtime';
 import { calls } from 'virtual:design-explore';
 import { loadEnv, loadProductEnv } from 'virtual:design-explore/env';
 import { parts, sketchParts, sketchTokens, tokens } from 'virtual:design-explore/system';
@@ -15,6 +17,8 @@ const fit = product !== null && params.has('fit');
 const interaction = product ? params.get('interaction') : null;
 const propsSketch = product ? params.get('props') : null;
 const propsVariant = params.get('props-variant') ?? '';
+const motionName = product ? params.get('motion') : null;
+const flowTo = product ? params.get('flow-to') : null;
 
 // Listens before the drawing loads, so an error it throws while loading counts; `report` exists only once `reporting` is set.
 let errored = false;
@@ -77,6 +81,19 @@ const showSetupError = (message: string) => {
 
 const messageOf = (error: unknown) => (error instanceof Error ? error.message : String(error));
 
+const RETRY_DELAYS = [300, 1500];
+
+// A part file that changes while frames load can fail its import once; Chromium fetches a failed module again.
+const retried = <T>(load: () => Promise<T>, attempt = 0): Promise<T> =>
+  load().catch((error: unknown) => {
+    const delay = RETRY_DELAYS[attempt];
+    if (delay === undefined) throw error;
+
+    return new Promise<void>((resolve) => setTimeout(resolve, delay)).then(() => retried(load, attempt + 1));
+  });
+
+let drawnPart: { part: Part<unknown>; states: Record<string, unknown> } | null = null;
+
 const drawCall = async (): Promise<Drawing | null> => {
   const call = calls[slug];
   if (!call) return fail(`design-explore: no call "${slug}"`);
@@ -106,10 +123,12 @@ const drawPart = async (name: string): Promise<Drawing | null> => {
     );
 
   try {
-    const [{ default: part }, { default: holder }] = await Promise.all([load(), loadProps()]);
+    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}"`);
 
+    drawnPart = { part: part as Part<unknown>, states: holder.states };
+
     return await part.render(holder.states[key]);
   } catch (error) {
     return fail(`design-explore: state "${key}" of "${partKey}" failed\n${messageOf(error)}`);
@@ -135,7 +154,7 @@ const force = (element: Element, name: string) => {
 };
 
 const forced = async (css: string) => {
-  if (!/:(?:hover|focus-visible|active)/iu.test(css)) return css;
+  if (!/:(?:hover|focus-visible|active|focus-within)/iu.test(css)) return css;
 
   const response = await fetch('/__design/force', { method: 'POST', body: css }).catch(() => null);
 
@@ -162,10 +181,136 @@ const report = () => {
   );
 };
 
+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) =>
+      sheets.has(drawn.styles)
+        ? drawn.body
+        : forced(drawn.styles).then((css) => {
+            const style = document.createElement('style');
+
+            sheets.add(drawn.styles);
+            style.textContent = css;
+            document.head.append(style);
+
+            return drawn.body;
+          }),
+    );
+};
+
+const exposeStepped = (options: { start: () => Promise<SteppedMotion>; interrupt: number | null }) => {
+  let stepped: SteppedMotion | null = null;
+  const steppedOf = () => {
+    if (!stepped) throw new Error('design-explore: start the motion first');
+
+    return stepped;
+  };
+
+  Object.assign(window, {
+    etMotion: {
+      start: () =>
+        options.start().then((started) => {
+          stepped = started;
+
+          return true;
+        }),
+      seek: (ms: number) => steppedOf().seek(ms),
+      bounds: () => steppedOf().bounds(),
+      timeline: () => ({ end: steppedOf().end(), tracks: steppedOf().tracks(), interrupt: options.interrupt }),
+    },
+  });
+};
+
+const exposeMotion = (options: { drawn: NonNullable<typeof drawnPart>; name: string; styles: string }) => {
+  const { drawn, name, styles } = options;
+  const motion = drawn.part.motions?.[name];
+
+  if (!motion) {
+    const known = Object.keys(drawn.part.motions ?? {});
+
+    showSetupError(`design-explore: part "${partKey}" has no motion "${name}" - it has: ${known.join(', ') || 'none'}`);
+
+    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,
+                    ),
+                  },
+                }),
+          }),
+      ),
+  });
+};
+
+const exposeFlowLine = (options: { product: string; to: string; styles: string }) => {
+  const [toPart = '', toState = ''] = options.to.split('#');
+  const load = parts[options.product]?.[toPart];
+
+  if (!load) {
+    showSetupError(`design-explore: product "${options.product}" has no part "${toPart}"`);
+
+    return;
+  }
+
+  exposeStepped({
+    interrupt: null,
+    start: () =>
+      retried(load).then(({ default: part }) => {
+        const states = (part as Part<unknown>).states;
+
+        if (!(toState in states)) throw new Error(`design-explore: part "${toPart}" has no state "${toState}"`);
+
+        // 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]))
+          .then((drawn) =>
+            drawn.styles === options.styles
+              ? drawn.body
+              : forced(drawn.styles).then((css) => `<style>${css}</style>${drawn.body}`),
+          )
+          .then((markup) => stepMotion({ root, markup, motion: { from: key, to: toState, viewTransition: true } }));
+      }),
+  });
+};
+
+const runPartRules = (drawn: NonNullable<typeof drawnPart>, styles: string) => {
+  runRules(root, {
+    state: key,
+    rules: drawn.part.rules ?? [],
+    motions: drawn.part.motions,
+    render: stateMarkupOf(drawn, styles),
+    switched: () => {
+      const partRoot = partRootOf(root);
+
+      if (interaction && partRoot) force(partRoot, interaction);
+    },
+    failed: (error) => showSetupError(`design-explore: switch of part "${partKey}" failed\n${messageOf(error)}`),
+  });
+};
+
 // macOS WebKit can loop in module evaluation when a frame with top-level await is removed.
 const drawFrame = async () => {
   parent.postMessage({ type: 'design-explore:loading' }, '*');
-  await (product ? loadProductEnv(product) : loadEnv(slug.split('/')[0] ?? ''));
+  await (product ? loadProductEnv({ product, sketch, variant: sketchVariant }) : loadEnv(slug.split('/')[0] ?? ''));
   const tokenStyles = product ? await tokensOf(product) : null;
   const loaded = await (product ? drawPart(product) : drawCall());
 
@@ -188,9 +333,17 @@ const drawFrame = async () => {
 
     if (error)
       showSetupError(`design-explore: setup of ${product ? 'state' : 'variant'} "${key}" failed\n${messageOf(error)}`);
+
+    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 ?? '');
   }
 
-  const place = () => placeOverlays(root);
+  const place = () => {
+    applyEmbed(frameElement, root);
+    placeOverlays(root);
+    fitOutOfFlow(root, { sideways: fit });
+  };
 
   new MutationObserver(place).observe(root, { childList: true, subtree: true });
   new ResizeObserver(place).observe(root);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/cli",
-  "version": "3.0.0-next.23",
+  "version": "3.0.0-next.25",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",
@@ -14,6 +14,7 @@
     "et": "./src/index.js"
   },
   "dependencies": {
+    "@tailwindcss/node": "4.3.3",
     "@tailwindcss/postcss": "4.3.3",
     "postcss": "8.5.32",
     "postcss-selector-parser": "7.1.7",

package/src/lib/design/calls-tsconfig.js

@@ -24,12 +24,11 @@ exports.DRAWING_COMPILER_OPTIONS = {
  * tsconfig an editor finds for a call file.
  */
 const writeCallsTsconfig = (target) => {
-    var _a, _b, _c;
     const work = (0, paths_1.workRootOf)(target);
     const path = (0, path_1.resolve)(work, 'tsconfig.json');
     const defineCall = (0, path_1.resolve)((0, paths_1.installedAssetRoot)(), 'define-call.ts');
     const inlineCss = (0, path_1.resolve)((0, paths_1.installedAssetRoot)(), 'css-inline.d.ts');
-    const typePaths = (0, render_packages_1.typePathsOf)({ packages: (_c = (_b = (_a = (0, paths_1.readConfig)(target)) === null || _a === void 0 ? void 0 : _a.render) === null || _b === void 0 ? void 0 : _b.packages) !== null && _c !== void 0 ? _c : {}, target });
+    const typePaths = (0, render_packages_1.typePathsOf)({ packages: (0, render_packages_1.renderPackagesOf)({ target, config: (0, paths_1.readConfig)(target) }), target });
     const config = {
         compilerOptions: Object.assign(Object.assign({}, exports.DRAWING_COMPILER_OPTIONS), { paths: Object.assign(Object.assign({}, typePaths), { '@design-explore': [defineCall] }) }),
         include: [`${(0, paths_1.callsRootOf)(target)}/**/*.ts`, defineCall, inlineCss],

package/src/lib/design/calls-tsconfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"calls-tsconfig.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/calls-tsconfig.ts"],"names":[],"mappings":";;;AAAA,2BAA8C;AAC9C,+BAAwC;AACxC,mCAA8F;AAC9F,uDAAgD;AAEnC,QAAA,wBAAwB,GAAG;IACtC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACtB,MAAM,EAAE,IAAI;IACZ,wBAAwB,EAAE,IAAI;IAC9B,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF;;;;;GAKG;AACI,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;;IACnD,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,MAAM,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,gBAAgB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,iBAAiB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,6BAAW,EAAC,EAAE,QAAQ,EAAE,MAAA,MAAA,MAAA,IAAA,kBAAU,EAAC,MAAM,CAAC,0CAAE,MAAM,0CAAE,QAAQ,mCAAI,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAEhG,MAAM,MAAM,GAAG;QACb,eAAe,kCACV,gCAAwB,KAC3B,KAAK,kCAAO,SAAS,KAAE,iBAAiB,EAAE,CAAC,UAAU,CAAC,MACvD;QACD,OAAO,EAAE,CAAC,GAAG,IAAA,mBAAW,EAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;KACnE,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC;IACpD,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,kBAAU,EAAE,eAAe,CAAC,CAAC;IAEhE,IAAA,cAAS,EAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,IAAA,kBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC1B,IAAA,cAAS,EAAC,IAAA,cAAO,EAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAA,kBAAa,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAEhC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B"}
+{"version":3,"file":"calls-tsconfig.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/calls-tsconfig.ts"],"names":[],"mappings":";;;AAAA,2BAA8C;AAC9C,+BAAwC;AACxC,mCAA8F;AAC9F,uDAAkE;AAErD,QAAA,wBAAwB,GAAG;IACtC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,UAAU;IAClB,gBAAgB,EAAE,SAAS;IAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACtB,MAAM,EAAE,IAAI;IACZ,wBAAwB,EAAE,IAAI;IAC9B,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF;;;;;GAKG;AACI,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,MAAM,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,IAAA,cAAO,EAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,gBAAgB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,cAAO,EAAC,IAAA,0BAAkB,GAAE,EAAE,iBAAiB,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,IAAA,6BAAW,EAAC,EAAE,QAAQ,EAAE,IAAA,kCAAgB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAA,kBAAU,EAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE9G,MAAM,MAAM,GAAG;QACb,eAAe,kCACV,gCAAwB,KAC3B,KAAK,kCAAO,SAAS,KAAE,iBAAiB,EAAE,CAAC,UAAU,CAAC,MACvD;QACD,OAAO,EAAE,CAAC,GAAG,IAAA,mBAAW,EAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC;KACnE,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC;IACpD,MAAM,UAAU,GAAG,IAAA,cAAO,EAAC,MAAM,EAAE,kBAAU,EAAE,eAAe,CAAC,CAAC;IAEhE,IAAA,cAAS,EAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,IAAA,kBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC1B,IAAA,cAAS,EAAC,IAAA,cAAO,EAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAA,kBAAa,EAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAEhC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAxBW,QAAA,kBAAkB,sBAwB7B"}

package/src/lib/design/changed-parts.d.ts

@@ -34,10 +34,10 @@ export declare const changedPartsOf: (options: {
     dependents: string[];
 }) => PartsChange;
 /**
- * The frames a file that came or went redraws: every part of the product whose part folder holds it,
- * since an `@system/...` import anywhere in the product may now resolve to another file, or the parts
- * of the variant whose folder holds it. A file in no part folder redraws no part, only the frames
- * that show an error.
+ * The frames a file that came or went redraws: every part of the product whose part folder or `shared/`
+ * holds it, since an `@system/...` or `@shared/...` import anywhere in the product may now resolve to
+ * another file, or the parts of the variant whose folder holds it. A file in no part folder redraws no
+ * part, only the frames that show an error.
  */
 export declare const addedPartsOf: (options: {
     designRoot: string;

package/src/lib/design/changed-parts.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addedPartsOf = exports.changedPartsOf = exports.redraws = exports.ALL_PARTS = void 0;
 const path_1 = require("path");
+const imports_1 = require("./system/imports");
 const layers_1 = require("./system/layers");
 const resolve_product_1 = require("./system/resolve-product");
 const system_modules_1 = require("./system/system-modules");
@@ -68,10 +69,10 @@ const partFolderOf = (segments) => {
     return layer && name && inside !== undefined && (0, layers_1.isLayer)(layer) ? `${layer}/${name}` : null;
 };
 /**
- * The frames a file that came or went redraws: every part of the product whose part folder holds it,
- * since an `@system/...` import anywhere in the product may now resolve to another file, or the parts
- * of the variant whose folder holds it. A file in no part folder redraws no part, only the frames
- * that show an error.
+ * The frames a file that came or went redraws: every part of the product whose part folder or `shared/`
+ * holds it, since an `@system/...` or `@shared/...` import anywhere in the product may now resolve to
+ * another file, or the parts of the variant whose folder holds it. A file in no part folder redraws no
+ * part, only the frames that show an error.
  */
 const addedPartsOf = (options) => {
     var _a;
@@ -89,10 +90,13 @@ const addedPartsOf = (options) => {
             const parts = everyPartOf(system, product).filter((drawn) => { var _a; return ((_a = drawn.sketch) === null || _a === void 0 ? void 0 : _a.target) === target && drawn.sketch.variant === variant; });
             return parts.length > 0 ? { all: false, parts } : none;
         }
-        return partFolderOf(rest) ? { all: false, parts: everyPartOf(system, product) } : none;
+        return partFolderOf(rest) || rest[0] === imports_1.SHARED_FOLDER
+            ? { all: false, parts: everyPartOf(system, product) }
+            : none;
     }
     const baseDir = baseDirs.find((dir) => file.startsWith(`${dir}${path_1.sep}`));
-    if (!baseDir || !partFolderOf((0, path_1.relative)(baseDir, file).split(path_1.sep)))
+    const inBase = baseDir ? (0, path_1.relative)(baseDir, file).split(path_1.sep) : [];
+    if (!baseDir || (!partFolderOf(inBase) && inBase[0] !== imports_1.SHARED_FOLDER))
         return none;
     return {
         all: false,

package/src/lib/design/changed-parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"changed-parts.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/changed-parts.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"changed-parts.js","sourceRoot":"","sources":["../../../../../libs/cli/src/lib/design/changed-parts.ts"],"names":[],"mappings":"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"}

package/src/lib/design/contact-sheet.d.ts

@@ -25,7 +25,7 @@ type Pixels = {
     height: number;
     data: Uint8ClampedArray;
 };
-/** The smallest rectangle around every changed pixel, in pixels from the top left of the picture. */
+/** A rectangle of changed pixels, in pixels from the top left of the picture. */
 export type ChangedBox = {
     x: number;
     y: number;
@@ -34,45 +34,58 @@ export type ChangedBox = {
 };
 /**
  * `after` faded to grey with each pixel that differs from `before` in red, over the larger of both sizes, with the
- * count of changed pixels and the `box` around them (`null` without one); a pixel only one of them covers counts as
- * changed. Runs in a browser page through its source, so it may use nothing outside its own body.
+ * count of changed pixels and one box per group of them (16 pixel tiles that touch); a pixel only one of them covers
+ * counts as changed. Runs in a browser page through its source, so it may use nothing outside its own body.
  */
 export declare function diffPixelsOf(before: Pixels, after: Pixels): {
     width: number;
     height: number;
     data: Uint8ClampedArray<ArrayBuffer>;
     changed: number;
-    box: {
+    boxes: {
         x: number;
         y: number;
         width: number;
         height: number;
-    } | null;
+    }[];
 };
+/** The smallest box around every one of `boxes`, or `null` for none. */
+export declare const boundsOf: (boxes: ChangedBox[]) => ChangedBox | null;
+/**
+ * `boxes` with every two at most `gap` apart merged into one, top to bottom, then left to right. While more than
+ * `max` remain, the gap doubles.
+ */
+export declare const clusteredBoxesOf: (boxes: ChangedBox[], options: {
+    gap: number;
+    max?: number;
+}) => ChangedBox[];
 /** The width and height a PNG declares in its header. */
 export declare const pngSizeOf: (png: Buffer) => {
     width: number;
     height: number;
 };
 /**
- * One crop in CSS pixels around every changed box (in picture pixels, `scale` per CSS pixel), widened by `margin`
- * CSS pixels on each side and kept inside the `frame` picture; `null` when no box has a change.
+ * One crop in CSS pixels per cluster of changed `boxes` (in picture pixels, `scale` per CSS pixel), each widened by
+ * `margin` CSS pixels on each side and kept inside the `frame` picture; crops that touch merge. Empty without a box.
  */
-export declare const changedCropOf: (options: {
-    boxes: (ChangedBox | null)[];
+export declare const changedCropsOf: (options: {
+    boxes: ChangedBox[];
     frame: {
         width: number;
         height: number;
     };
     scale?: number;
     margin?: number;
-}) => ChangedBox | null;
-/** The box around the pixels `after` changes from `before`, or `null` when both draw the same pixels. */
-export declare const changedBoxOf: (options: {
+}) => ChangedBox[];
+/**
+ * One box per cluster of the pixels `after` changes from `before`: groups closer than 16 pixels merge, and at most
+ * eight remain. Empty when both draw the same pixels.
+ */
+export declare const changedBoxesOf: (options: {
     browser: Browser;
     before: Buffer;
     after: Buffer;
-}) => Promise<ChangedBox | null>;
+}) => Promise<ChangedBox[]>;
 /** The page that lays each row of cells side by side, a label above every cell, the rows stacked. */
 export declare const contactSheetHtml: (rows: SheetCell[][]) => string;
 /** Draws the cells into one PNG in the given browser, and returns one line per diff cell with its pixel result. */