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

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @ethlete/cli
 
+## 3.0.0-next.25
+
+### Minor Changes
+
+- `et design mcp` serves the design tools to an MCP client over stdio: parts, check, shot, motion_shots, the sketch commands and the inbox. `shot` and `motion_shots` return the sheet image; `motion_shots` also returns its JSON.
+- The design server answers `GET /__design/motion` with the keyframes and tracks of one motion mode, and each keyframe as a PNG with `frame=<ms>`. The draw is kept until the part changes.
+- `embedPage` takes `mark` and `css`, both applied inside the embedded page: every element matching `mark` gets an accent outline, and `css` is added as a stylesheet there.
+- `et design check` warns with `EMBED-SCALE` when an element around an `embedPage` frame with a `scale` scales it again, so the page shrinks twice.
+- `et design complete` accepts a `field` control kind for text fields: it needs a drawn hover and focus-visible, but no active.
+- The shot sheet draws an empty "not drawn" cell for each state combo a grid row leaves out, and `sketch check` lists those cells on the grid line.
+- `et design motion flow <flow> <line>` draws a flow line with `"transition": "view"` as a stepped View Transition from the `from` page to the `to` page, shot in the preset viewport. Lines are named by `id` or `from→to`.
+- `et design motion shots` clips each shot to the part and every animated element over all keyframes, so an overshoot is not cut off, and names a track's element by `data-et-key` where it has one.
+- Add `et design motion shots <part> <motion>`: it draws a motion at its keyframes in full and reduced motion into one sheet and writes its tracks as JSON.
+- `spring({ damping, frequency })` from `@design-system` returns a `linear()` easing and its duration for a motion token. A motion's `interrupt` now switches back to its `from` state at that time in `motion shots`.
+- `design sketch` merges a sketch of a base part into the base. `sketch new --override` opens a product override; `--into-base` moves an existing override into the base. `sketch ready` refuses a variant that does not load.
+- Add `design sketch hold <sketch> --until <text>` and `design sketch release <sketch>`: a held sketch goes back to in progress, leaves the merge queue, and `sketch ready` refuses with the `--until` text until it is released.
+- A sketch may carry an edit to a host of its target in a higher layer when the edit only changes the host's imports, so a rename across layers merges in one sketch.
+- `sketch ready` refuses a live variant whose files, or the `shared/` files they import, keep an unused import, parameter or CSS class.
+- Add `tokenSheet` to `@design-system`: it draws a foundations part as a sheet of its CSS custom properties, labelled with the values the drawing resolves, so every product draws its foundations the same way.
+- `design complete` checks the `button`, `select`, `menu`, `row` and `tooltip` control kinds and a declared `disabled` look, and reads a base part's review from its base's `merged.json`.
+- `design complete` fails a page as `INVENTORY-UNAPPROVED` until its control inventory is approved; the design server answers `/__design/inventory` and `/__design/inventory-approve`, which writes `inventory.json` and refuses pages with undeclared or unclassified controls.
+- `design complete` gives each control inside an embedded part's `data-et-part` root to that part, fails the host while that part is incomplete, and fails a host CSS rule restyling it as `CONTROL-OVERRIDDEN`.
+- `et design mcp` gains the tools `sketch_variant`, `sketch_round`, `sketch_list`, `sketch_check`, `sketch_preview`, `sketch_rebase` and `comment_reply`.
+
+### Patch Changes
+
+- `design complete` accepts an option named by `aria-activedescendant` as focus-visible evidence when it looks different from a plain option in its surface, and its gap says which evidence is missing.
+- `design complete --request <part>.<control>.<requirement> --reason` writes a pending exception that still fails. Studio's approve endpoint records by, at and the part hash; then the gap passes until the part changes.
+- `design complete <layer>/<name> --variant <key>` checks a variant of the part's open sketch, so a sketch proves it closes its gaps before it is merged.
+- `design complete`: a `data-et-control-part` descendant of a `data-et-control` takes the forced interactions of its control, and its `disabled` or `aria-disabled="true"` counts as the control's disabled mark.
+- `et design complete <part> --handoff` gives a design complete part the `handoff` status; `et design complete --handoff` re-checks every `handoff` part and exits 1 when one regressed, for CI.
+- `design` renders no longer fail with "exports is not defined": the CLI build again ships the frame runtime as source only, with no CommonJS copies next to it.
+- `STALE-REPLACE` no longer warns on a `.replace` of markup a package draws, such as `button(options)` from `@ethlete/components`, which the rule cannot read.
+- `tokenSheet` styles now carry static fallbacks for every custom property, so design products without the Studio tokens draw a sane sheet.
+- `tokenSheet` takes `scope`, classes on the sheet root where values are read, so theme-scoped tokens resolve, and `note`, markup drawn under the title.
+- A design frame retries a failed part import twice after a short back-off, so a part file that changes while its grid loads no longer leaves "Failed to fetch dynamically imported module" in the frame.
+
 ## 3.0.0-next.24
 
 ### Minor Changes

package/design/define-call.ts

@@ -245,6 +245,49 @@ export const placeOverlays = (root: HTMLElement) => {
   }
 };
 
+/**
+ * Grows `root` to cover every absolutely or fixed positioned element inside it, such as an open
+ * overlay pane, so a frame measured or shot from `root` shows them. Skips a fixed element on all four
+ * edges of the viewport, such as a backdrop. Grows sideways too with `sideways`. Safe to run again.
+ */
+export const fitOutOfFlow = (root: HTMLElement, options: { sideways: boolean }) => {
+  const view = root.ownerDocument.defaultView;
+
+  if (!view) return;
+
+  const box = root.getBoundingClientRect();
+  const style = view.getComputedStyle(root);
+  const fillsViewport = (style: CSSStyleDeclaration) =>
+    style.position === 'fixed' &&
+    [style.top, style.right, style.bottom, style.left].every((edge) => parseFloat(edge) === 0);
+  const outOfFlow = [...root.querySelectorAll('*')]
+    .map((element) => ({ element, style: view.getComputedStyle(element) }))
+    .filter(({ style }) => ['absolute', 'fixed'].includes(style.position) && !fillsViewport(style))
+    .map(({ element }) => element)
+    .map((element) => element.getBoundingClientRect())
+    .filter((rect) => rect.width > 0 && rect.height > 0);
+  const extentOf = ({ side, start, paddings }: { side: 'bottom' | 'right'; start: number; paddings: string[] }) => {
+    const extent = Math.max(0, ...outOfFlow.map((rect) => Math.ceil(rect[side] - start)));
+    const [before, after] = paddings.map((padding) => parseFloat(padding) || 0) as [number, number];
+
+    if (extent === 0) return '';
+
+    return `${style.boxSizing === 'border-box' ? extent + after : extent - before}px`;
+  };
+
+  root.style.minHeight = extentOf({
+    side: 'bottom',
+    start: box.top,
+    paddings: [style.paddingTop, style.paddingBottom],
+  });
+  if (options.sideways)
+    root.style.minWidth = extentOf({
+      side: 'right',
+      start: box.left,
+      paddings: [style.paddingLeft, style.paddingRight],
+    });
+};
+
 /** Types a drawing where it is written, so a mistake reads in its own file and not in `call.ts`. */
 export const drawing = (drawn: Drawing): Drawing => drawn;
 

package/design/define-part.ts

@@ -6,10 +6,16 @@ export { css, drawing, html, ng } from './define-call';
 export type { Drawing } from './define-call';
 export { embedPage } from './embed-page';
 export type { EmbedPageOptions } from './embed-page';
+export { iconSheet } from './icon-sheet';
+export type { IconSheetIcon, IconSheetOptions } from './icon-sheet';
 export { interactionRows } from './interaction-rows';
 export type { InteractionRowsOptions } from './interaction-rows';
+export { spring } from './spring';
+export type { Spring } from './spring';
 export { svgAsset } from './svg-asset';
 export type { SvgAssetOptions } from './svg-asset';
+export { tokenSheet } from './token-sheet';
+export type { TokenSheetOptions } from './token-sheet';
 
 /** An interaction Studio can force on a part's root element. Rest is always drawn and never listed. */
 export type Interaction = 'hover' | 'focus-visible' | 'active' | 'disabled';
@@ -83,21 +89,35 @@ export type StateGrid<TState extends string = string, TColumn extends string = s
   rows: Record<string, Partial<Record<TColumn, TState>>>;
 };
 
-/** How a control is operated: `pointer` requires a drawn hover, `keyboard` a drawn focus-visible. */
+/** How a control is operated: `pointer` requires a drawn hover and active (a `field` needs no active), `keyboard` a drawn focus-visible. */
 export type ControlInput = 'pointer' | 'keyboard';
 
 /** A component or element part that draws a control and its interactions. */
 export type ControlPart = `components/${string}` | `elements/${string}`;
 
 /**
- * A control `design complete` checks. A `disclosure` needs a state that draws it collapsed and the state its
- * `surfaces.body` names, which draws the element marked `data-et-surface="<id>.body"` visible and filled.
- * With `part`, the interactions come from that part, which must be design complete itself; a page control needs it.
- * With `input`, a state of this part draws each required interaction, e.g. with `forceInteraction`.
+ * What a control of each `kind` needs besides the interactions of its `input`. A surface is the element marked
+ * `data-et-surface="<id>.<surface>"`, drawn visible and filled in the state its `surfaces` entry names.
+ * - `disclosure`: a state that draws it collapsed, and `surfaces.body`.
+ * - `button`: `active`.
+ * - `field`: a text field (`<input>` or `<textarea>`); nothing beyond its inputs.
+ * - `select`, `menu`: `surfaces.open`, and options in it (`role="option"`, `role="menuitem"` or `data-et-option`)
+ *   drawn hovered, focus-visible, and selected with a look of their own.
+ * - `row`: drawn selected (`aria-selected`, `aria-checked`, `aria-pressed` or `aria-current`) with a look of its own,
+ *   and hovered while selected.
+ * - `tooltip`: `surfaces.tooltip`, the visible tooltip next to the control in this part.
+ *
+ * `disabled: true` also requires a state that draws it disabled with a look of its own. With `part`, the
+ * interactions, selected and disabled looks and option states come from that part, which must be design complete
+ * itself; the surfaces stay with this part. A page control needs `part`. With `input`, a state of this part draws
+ * each requirement, e.g. with `forceInteraction`.
  */
-export type Control<TState extends string = string> = { kind: 'disclosure'; surfaces: { body: TState } } & (
-  { part: ControlPart; input?: never } | { input: ControlInput[]; part?: never }
-);
+export type Control<TState extends string = string> = (
+  | { kind: 'disclosure'; surfaces: { body: TState } }
+  | { kind: 'button' | 'row' | 'field'; surfaces?: never }
+  | { kind: 'select' | 'menu'; surfaces: { open: TState } }
+  | { kind: 'tooltip'; surfaces: { tooltip: TState } }
+) & { disabled?: boolean } & ({ part: ControlPart; input?: never } | { input: ControlInput[]; part?: never });
 
 /** A rule of the render check: content larger than its frame, cut off, wrapped onto a second line, or drawn at zero size. */
 export type RenderCheck = 'OVERFLOW' | 'CLIPPED' | 'WRAP' | 'ZERO-SIZE';

package/design/embed-page.ts

@@ -2,9 +2,20 @@ import { Drawing } from './define-call';
 
 /**
  * How a page embeds another: the `state` to draw, the viewport `width` and `height` it is drawn at (`'auto'` grows
- * the frame to the page's content), and the `scale` the frame is shown at.
+ * the frame to the page's content), and the `scale` the frame is shown at. Inside the embedded page, `mark` rings
+ * every element matching its selector (each gets `data-et-embed-marked`), and `css` is added as a stylesheet.
  */
-export type EmbedPageOptions = { state?: string; width?: number; height?: number | 'auto'; scale?: number };
+export type EmbedPageOptions = {
+  state?: string;
+  width?: number;
+  height?: number | 'auto';
+  scale?: number;
+  mark?: string;
+  css?: string;
+};
+
+const MARK_CSS =
+  '[data-et-embed-marked] { outline: 0.2rem solid var(--et-theme-color-primary-solid, Highlight); outline-offset: 0.2rem; }';
 
 const KEPT = ['product', 'sketch', 'variant', 'surface', 'color'];
 
@@ -33,11 +44,12 @@ const attribute = (text: string) => text.replace(/&/g, '&').replace(/"/g, '&
  * Put the answer's `body` into the page's markup; it needs no styles or setup.
  */
 export const embedPage = (page: `pages/${string}`, options: EmbedPageOptions = {}): Drawing => {
-  const { state = 'default', width = 1280, height = 800, scale = 1 } = options;
+  const { state = 'default', width = 1280, height = 800, scale = 1, mark, css } = options;
   const search = embedSearchOf({ page, state, current: globalThis.location?.search ?? '' });
   const auto = height === 'auto';
   const frameHeight = auto ? 0 : height;
-  const frame = `<iframe data-et-embed="${attribute(page)}" data-et-embed-scale="${scale}"${auto ? ' data-et-embed-height="auto"' : ''} title="${attribute(page)}" src="/frame.html?${attribute(search)}" style="display:block;border:0;width:${width}px;height:${frameHeight}px;transform:scale(${scale});transform-origin:0 0"></iframe>`;
+  const inside = `${mark ? ` data-et-embed-mark="${attribute(mark)}"` : ''}${css ? ` data-et-embed-css="${attribute(css)}"` : ''}`;
+  const frame = `<iframe data-et-embed="${attribute(page)}" data-et-embed-scale="${scale}"${auto ? ' data-et-embed-height="auto"' : ''}${inside} title="${attribute(page)}" src="/frame.html?${attribute(search)}" style="display:block;border:0;width:${width}px;height:${frameHeight}px;transform:scale(${scale});transform-origin:0 0"></iframe>`;
 
   return {
     body:
@@ -68,3 +80,24 @@ export const fitEmbed = (embed: Element | null, height: number) => {
 
   frame.dataset['etEmbedDrawn'] = '';
 };
+
+/**
+ * Called by an embedded frame after it draws and on each change of its content: adds the `css` of its `embedPage`
+ * once and marks every element in `root` that matches its `mark`. Does nothing in a frame no page embeds.
+ */
+export const applyEmbed = (embed: Element | null, root: HTMLElement) => {
+  if (!(embed as HTMLElement | null)?.hasAttribute('data-et-embed')) return;
+
+  const { etEmbedMark: mark, etEmbedCss: css } = (embed as HTMLElement).dataset;
+  const document = root.ownerDocument;
+
+  if ((mark || css) && !document.querySelector('style[data-et-embed-css]')) {
+    const style = document.createElement('style');
+
+    style.dataset['etEmbedCss'] = '';
+    style.textContent = `${mark ? MARK_CSS : ''}\n${css ?? ''}`;
+    document.head.append(style);
+  }
+
+  if (mark) for (const element of root.querySelectorAll(mark)) element.setAttribute('data-et-embed-marked', '');
+};

package/design/icon-sheet.ts

@@ -0,0 +1,151 @@
+import { Drawing, html } from './define-call';
+import { svgAsset } from './svg-asset';
+
+export type IconSheetIcon = {
+  name: string;
+  svg: string;
+  grid?: number;
+  padding?: number;
+};
+
+export type IconSheetOptions = {
+  view: 'catalogue' | 'construction';
+  title: string;
+  note?: string;
+  icons: IconSheetIcon[];
+  sizes?: number[];
+  size?: number;
+  columns?: number;
+};
+
+const SHEET_STYLES = `
+  .ics-root { display: flex; flex-direction: column; gap: var(--space-4, 1.6rem); padding: var(--space-6, 2.4rem); 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); }
+  .ics-root svg { display: block; }
+  .ics-title { margin: 0; font-size: var(--text-xl, 1.7rem); line-height: var(--text-xl-line, 2.2rem); font-weight: var(--weight-strong, 600); }
+  .ics-note { margin: 0; max-width: 64rem; color: var(--text-muted, oklch(0.72 0 0)); }
+  .ics-group { margin: 0; font-size: var(--text-lg, 1.5rem); line-height: var(--text-lg-line, 2rem); font-weight: var(--weight-strong, 600); }
+  .ics-muted { color: var(--text-muted, oklch(0.72 0 0)); }
+  .ics-name { justify-self: start; font-family: var(--font-code, ui-monospace, "SF Mono", Menlo, Consolas, monospace); color: var(--text-muted, oklch(0.72 0 0)); }
+  .ics-catalogue { display: grid; align-items: center; justify-items: center; column-gap: var(--space-4, 1.6rem); row-gap: var(--space-2, 0.8rem); }
+  .ics-size { font-size: var(--text-sm, 1.15rem); }
+  .ics-cell { display: flex; }
+  .ics-construction { display: grid; gap: var(--space-5, 2rem); }
+  .ics-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2, 0.8rem); }
+  .ics-frame { position: relative; display: flex; border: 1px solid var(--surface-border, oklch(0.34 0 0)); background: var(--surface, oklch(0.17 0 0)); }
+  .ics-icon { position: relative; }
+  .ics-guides { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent, oklch(0.7 0.15 250)); pointer-events: none; }
+  .ics-guides path, .ics-guides rect { vector-effect: non-scaling-stroke; stroke-width: 1px; }
+  .ics-pixels { opacity: 0.18; }
+  .ics-key { opacity: 0.7; stroke-dasharray: 4 3; }
+`;
+
+const VIEW_BOX = /\bviewBox\s*=\s*["']\s*[-\d.]+[\s,]+[-\d.]+[\s,]+([\d.]+)[\s,]+([\d.]+)/u;
+
+const gridOf = (icon: IconSheetIcon) => {
+  if (icon.grid) return icon.grid;
+  const [, width, height] = VIEW_BOX.exec(icon.svg) ?? [];
+  if (!width || !height) throw new Error(`iconSheet: "${icon.name}" has no viewBox, so it needs a grid`);
+
+  return Math.max(Number(width), Number(height));
+};
+
+const groupsOf = (icons: IconSheetIcon[]) => {
+  const groups = new Map<number, IconSheetIcon[]>();
+  for (const icon of icons) groups.set(gridOf(icon), [...(groups.get(gridOf(icon)) ?? []), icon]);
+
+  return [...groups];
+};
+
+const gridLabel = (grid: number) => (grid <= 48 ? `${grid} px grid` : `${grid}-unit grid`);
+
+const guides = (grid: number, { cls, paths }: { cls: string; paths: string }) =>
+  `<svg class="ics-guides ${cls}" viewBox="0 0 ${grid} ${grid}" fill="none" stroke="currentColor" aria-hidden="true" data-grid="${grid}">${paths}</svg>`;
+
+const pixelLines = (grid: number) => {
+  const step = grid > 48 ? grid / 16 : 1;
+  const lines = Array.from({ length: Math.round(grid / step) - 1 }, (_, index) => (index + 1) * step);
+
+  return guides(grid, {
+    cls: 'ics-pixels',
+    paths: lines.map((at) => `<path d="M${at} 0V${grid}M0 ${at}H${grid}"/>`).join(''),
+  });
+};
+
+const keyLines = (grid: number, padding: number) =>
+  guides(grid, {
+    cls: 'ics-key',
+    paths: `<path d="M${grid / 2} 0V${grid}M0 ${grid / 2}H${grid}"/><rect x="${padding}" y="${padding}" width="${grid - 2 * padding}" height="${grid - 2 * padding}"/>`,
+  });
+
+const drawIcon = (icon: IconSheetIcon, { size, cls }: { size: number; cls?: string }) =>
+  svgAsset(icon.svg, { size, class: cls, attrs: { 'aria-hidden': 'true' } });
+
+const catalogue = (icons: IconSheetIcon[], sizes: number[]) =>
+  html`<div
+    class="ics-catalogue"
+    style="grid-template-columns: max-content repeat(${sizes.length}, minmax(var(--space-7, 3.2rem), max-content))"
+  >
+    <span></span>
+    ${sizes.map((size) => html`<span class="ics-size ics-muted">${size} px</span>`).join('')}
+    ${icons
+      .map(
+        (icon) =>
+          html`<span class="ics-name">${icon.name}</span>${sizes
+              .map((size) => html`<span class="ics-cell">${drawIcon(icon, { size })}</span>`)
+              .join('')}`,
+      )
+      .join('')}
+  </div>`;
+
+const construction = (
+  icons: IconSheetIcon[],
+  { grid, size, columns }: { grid: number; size: number; columns: number },
+) =>
+  html`<div class="ics-construction" style="grid-template-columns: repeat(${columns}, max-content)">
+    ${icons
+      .map(
+        (icon) =>
+          html`<div class="ics-item">
+            <span class="ics-frame"
+              >${pixelLines(grid)}${drawIcon(icon, { size, cls: 'ics-icon' })}${keyLines(grid, icon.padding ?? grid / 8)}</span
+            >
+            <span class="ics-name">${icon.name}</span>
+          </div>`,
+      )
+      .join('')}
+  </div>`;
+
+/**
+ * Draws a foundation sheet of icons. `catalogue` shows every icon at each of `sizes` with its name; `construction` shows
+ * each icon `size` px large on its grid, with the grid lines, the centre lines and the padding box. An icon's grid is its
+ * `grid`, else the larger side of its viewBox; its padding is `padding` grid units, `grid / 8` by default.
+ * Icons on different grids are drawn in one group per grid.
+ */
+export const iconSheet = ({
+  view,
+  title,
+  note,
+  icons,
+  sizes = [16, 24, 32],
+  size = 96,
+  columns = 5,
+}: IconSheetOptions): Drawing => {
+  const groups = groupsOf(icons);
+  const labelled = groups.length > 1;
+
+  return {
+    body: html`<div class="ics-root">
+      <h2 class="ics-title">${title}</h2>
+      ${note && html`<p class="ics-note">${note}</p>`}
+      ${groups
+        .map(
+          ([grid, members]) =>
+            html`${labelled && html`<h3 class="ics-group">${gridLabel(grid)}</h3>`}${
+              view === 'catalogue' ? catalogue(members, sizes) : construction(members, { grid, size, columns })
+            }`,
+        )
+        .join('')}
+    </div>`,
+    styles: SHEET_STYLES,
+  };
+};

package/design/mark-part.ts

@@ -5,6 +5,11 @@ const SKIPPED = /^(?:\s+|<!--[\s\S]*?-->|<(style|script)\b[\s\S]*?<\/\1\s*>|<lin
 const TAG = /^<[a-zA-Z][\w:-]*/;
 const ATTRIBUTES = /^(?:\s+[^\s"'>/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+))?)*/;
 const MARK = /(\sdata-et-part=")([^"]*)"/;
+const SLOT = /(\sdata-et-slot=")([^"]*)"/;
+const TAG_AT = /<[a-zA-Z][\w:-]*/y;
+const ATTRIBUTES_AT = new RegExp(ATTRIBUTES.source.slice(1), 'y');
+const RAW_TEXT = new Set(['script', 'style', 'textarea', 'title']);
+const MAX_PROP_DEPTH = 4;
 
 const attributesAtOf = (body: string) => {
   let at = 0;
@@ -43,10 +48,82 @@ export const forceBody = (body: string, interaction: Interaction) => {
   return `${body.slice(0, attributesAt)}${forced}${body.slice(attributesAt)}`;
 };
 
+/** Adds `key` to `data-et-slot` on every element of `markup`: the markup a host passes into the part `key` through its props. */
+export const markSlot = (markup: string, key: string) => {
+  let marked = '';
+  let at = 0;
+
+  for (let open = markup.indexOf('<'); open >= 0; open = markup.indexOf('<', at)) {
+    if (markup.startsWith('<!--', open)) {
+      const close = markup.indexOf('-->', open + 4);
+      const end = close < 0 ? markup.length : close + 3;
+
+      marked += markup.slice(at, end);
+      at = end;
+      continue;
+    }
+
+    TAG_AT.lastIndex = open;
+    const tag = TAG_AT.exec(markup);
+
+    if (!tag) {
+      marked += markup.slice(at, open + 1);
+      at = open + 1;
+      continue;
+    }
+
+    const attributesAt = open + tag[0].length;
+
+    ATTRIBUTES_AT.lastIndex = attributesAt;
+    const attributes = ATTRIBUTES_AT.exec(markup)?.[0] ?? '';
+    const slot = SLOT.exec(attributes);
+
+    if (slot) {
+      const valueEnd = attributesAt + slot.index + (slot[1]?.length ?? 0) + (slot[2]?.length ?? 0);
+
+      marked += `${markup.slice(at, valueEnd)} ${key}`;
+      at = valueEnd;
+    } else {
+      marked += `${markup.slice(at, attributesAt)} data-et-slot="${key}"`;
+      at = attributesAt;
+    }
+
+    const name = tag[0].slice(1).toLowerCase();
+
+    if (RAW_TEXT.has(name)) {
+      const close = markup.toLowerCase().indexOf(`</${name}`, attributesAt);
+      const end = close < 0 ? markup.length : close;
+
+      marked += markup.slice(at, end);
+      at = end;
+    }
+  }
+
+  return marked + markup.slice(at);
+};
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  !!value && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype;
+
+const slotProps = (value: unknown, { key, depth = 0 }: { key: string; depth?: number }): unknown => {
+  const inner = { key, depth: depth + 1 };
+
+  if (typeof value === 'string') return /<[a-zA-Z]/.test(value) ? markSlot(value, key) : value;
+  if (depth >= MAX_PROP_DEPTH) return value;
+  if (Array.isArray(value)) return value.map((item) => slotProps(item, inner));
+  if (isPlainObject(value))
+    return Object.fromEntries(Object.entries(value).map(([name, item]) => [name, slotProps(item, inner)]));
+
+  return value;
+};
+
 const markDrawing = <TDrawing extends Drawing>(drawn: TDrawing, key: string): TDrawing =>
   typeof drawn?.body === 'string' ? { ...drawn, body: markBody(drawn.body, key) } : drawn;
 
-/** The part with a `render` that marks the first element of each drawing as the root of the part `key`. */
+/**
+ * The part with a `render` that marks the first element of each drawing as the root of the part `key`, and every
+ * element of the markup its props pass in as slotted into `key`.
+ */
 export const markPart = <TProps, TState extends string>(
   part: Part<TProps, TState>,
   key: string,
@@ -58,7 +135,7 @@ export const markPart = <TProps, TState extends string>(
   return {
     ...part,
     render: (props: TProps, options?: RenderOptions) => {
-      const drawn = render.call(part, props, options);
+      const drawn = render.call(part, slotProps(props, { key }) as TProps, options);
 
       return drawn instanceof Promise ? drawn.then((done) => markDrawing(done, key)) : markDrawing(drawn, key);
     },