@ethlete/components 1.0.0-next.77 → 1.0.0-next.79

package/design/sdk/foundations/colors/colors.ts

@@ -0,0 +1,188 @@
+import { definePart, html, tokenSheet, type Drawing } from '@design-system';
+import { contrastSheet, contrastStyles } from './shared/contrast';
+import css from './colors.css?inline';
+
+type Surface = 'light' | 'dark';
+
+type Theme = 'brand' | 'danger' | 'warning';
+
+type Props = { group: 'surface' | 'contrast' | Theme; surface: Surface };
+
+const STATE_ENDS = ['', '-hover', '-focus', '-active', '-disabled'];
+
+const labelOf = (end: string) => (end ? end.slice(1) : 'rest');
+
+const SURFACE_TOKEN =
+  /^et-(surface-(background|color(-muted|-subtle)?|border|interaction(-hover|-focus|-active|-disabled)?)|shadow-color-rgb)$/u;
+
+const COLOR_TOKEN = /^et-color-(on-)?primary(-ink)?(-hover|-focus|-active|-disabled)?$/u;
+
+const TEXT_TOKEN = /^et-surface-(background|color(-muted|-subtle)?)$/u;
+
+const themeClassOf = (theme: Theme, surface: Surface) => `et-color--${theme}${surface === 'light' ? '-on-light' : ''}`;
+
+const demoNote = (theme: Theme, surface: Surface) =>
+  `${theme} is a demo theme of the SDK Storybook (apps/storybook/src/themes.ts); the SDK ships no theme names, each app registers its own.${surface === 'light' ? ` On a light surface the sheet reads .${themeClassOf(theme, surface)}.` : ''}`;
+
+const swatch = (token: string) => html`<span class="sdk-swatch" style="background: rgb(var(--${token}))"></span>`;
+
+const disabledOf = (name: string) => (name.endsWith('-disabled') ? 'aria-disabled="true"' : '');
+
+const ink = (token: string, label = 'Aa') =>
+  html`<span class="sdk-ink" ${disabledOf(token)} style="color: rgb(var(--${token}))">${label}</span>`;
+
+const surfaceSample = (name: string) => {
+  if (name === 'et-shadow-color-rgb') return html`<span class="sdk-swatch sdk-shadow"></span>`;
+  if (/^et-surface-color/u.test(name)) return ink(name);
+
+  return swatch(name);
+};
+
+const colorSample = (name: string) => {
+  const onFill = /^et-color-on-primary(.*)$/u.exec(name);
+  if (onFill)
+    return html`<span
+      class="sdk-fill"
+      ${disabledOf(name)}
+      style="background: rgb(var(--et-color-primary${onFill[1]})); color: rgb(var(--${name}))"
+      >Aa</span
+    >`;
+  if (name.startsWith('et-color-primary-ink')) return ink(name, 'Ink');
+
+  return swatch(name);
+};
+
+const surfacePanel = html`<div class="sdk-card">
+    <span>Text</span>
+    <span class="sdk-muted">Muted text</span>
+    <span class="sdk-subtle">Subtle text</span>
+  </div>
+  <div class="sdk-states">
+    ${STATE_ENDS.map(
+      (end) =>
+        html`<span class="sdk-state"
+          ><span class="sdk-swatch" style="background: rgb(var(--et-surface-interaction${end}))"></span
+          >${labelOf(end)}</span
+        >`,
+    ).join('')}
+  </div>
+  <div class="sdk-elevations">
+    <span class="sdk-elevation sdk-shadow-resting">Resting</span>
+    <span class="sdk-elevation sdk-shadow-raised">Raised</span>
+  </div>`;
+
+const themePanel = html`<div class="sdk-states">
+    ${STATE_ENDS.map(
+      (end) =>
+        html`<span
+          class="sdk-fill sdk-fill--wide"
+          ${disabledOf(end)}
+          style="background: rgb(var(--et-color-primary${end})); color: rgb(var(--et-color-on-primary${end}))"
+          >${labelOf(end)}</span
+        >`,
+    ).join('')}
+  </div>
+  <div class="sdk-states">
+    ${STATE_ENDS.map(
+      (end) =>
+        html`<span class="sdk-link" ${disabledOf(end)} style="color: rgb(var(--et-color-primary-ink${end}))"
+          >Ink ${labelOf(end)}</span
+        >`,
+    ).join('')}
+  </div>`;
+
+const scopeOf = ({ group, surface }: Props) =>
+  group === 'surface' || group === 'contrast'
+    ? `sdk-colors et-surface--${surface}`
+    : `sdk-colors et-surface--${surface} ${themeClassOf(group, surface)}`;
+
+const titleOf = ({ group, surface }: Props) =>
+  group === 'surface'
+    ? `Surface, ${surface}`
+    : group === 'contrast'
+      ? `Contrast, ${surface}`
+      : `${group} (demo theme) on ${surface}`;
+
+const sheetOf = (props: Props) => {
+  const { group, surface } = props;
+
+  if (group === 'surface')
+    return tokenSheet({
+      title: titleOf(props),
+      scope: scopeOf(props),
+      css,
+      sample: surfacePanel,
+      sampleOf: surfaceSample,
+      only: (name) => SURFACE_TOKEN.test(name),
+    });
+  if (group === 'contrast')
+    return tokenSheet({
+      title: titleOf(props),
+      scope: scopeOf(props),
+      css,
+      sample: contrastSheet(css, surface),
+      sampleClass: 'sdk-contrast',
+      sampleOf: surfaceSample,
+      only: (name) => TEXT_TOKEN.test(name),
+    });
+
+  return tokenSheet({
+    title: titleOf(props),
+    scope: scopeOf(props),
+    note: demoNote(group, surface),
+    css,
+    sample: themePanel,
+    sampleOf: colorSample,
+    only: (name) => COLOR_TOKEN.test(name),
+  });
+};
+
+const STYLES = `
+  ${contrastStyles}
+  .sdk-colors { --surface: var(--et-surface-background-solid); --text: var(--et-surface-color-solid); --text-muted: var(--et-surface-color-muted-solid); --surface-border: var(--et-surface-border-solid); --font-ui: var(--et-font-family); --font-code: var(--et-font-family-mono); width: max-content; }
+  .sdk-colors .ts-row { grid-template-columns: 300px 160px 1fr; }
+  section.ts-panel { display: flex; flex-direction: column; gap: 1.2rem; }
+  section.ts-panel.sdk-contrast { flex-direction: row; flex-wrap: wrap; gap: 2.4rem; }
+  .sdk-table { display: flex; flex-direction: column; gap: 0.8rem; }
+  .sdk-title { margin: 0; font-size: 1.4rem; font-weight: 600; }
+  .sdk-value { font-family: var(--et-font-family-mono); font-size: 1.2rem; color: var(--et-surface-color-muted-solid); white-space: nowrap; }
+  .sdk-card { display: flex; gap: 2.4rem; padding: 1.2rem 1.6rem; border: 0.1rem solid var(--et-surface-border-solid); border-radius: 0.6rem; }
+  .sdk-muted { color: var(--et-surface-color-muted-solid); }
+  .sdk-subtle { color: var(--et-surface-color-subtle-solid); }
+  .sdk-states { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
+  .sdk-state { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; }
+  .sdk-swatch { display: block; width: 4rem; height: 2.4rem; border-radius: 0.4rem; border: 0.1rem solid var(--et-surface-border-solid); }
+  .sdk-shadow { background: var(--et-surface-background-solid); box-shadow: 0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb) / 0.22), 0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb) / 0.14); }
+  .sdk-ink { font-size: 1.6rem; font-weight: 600; }
+  .sdk-fill { display: inline-grid; place-items: center; min-width: 4rem; height: 2.4rem; padding: 0 0.8rem; box-sizing: border-box; border-radius: 0.4rem; font-size: 1.2rem; font-weight: 600; }
+  .sdk-fill--wide { min-width: 8rem; height: 3.2rem; }
+  .sdk-link { min-width: 8rem; font-size: 1.3rem; font-weight: 600; text-decoration: underline; }
+  .sdk-elevations { display: flex; gap: 2.4rem; padding: 0.8rem 0; }
+  .sdk-elevation { display: grid; place-items: center; width: 12rem; height: 4.8rem; border-radius: 0.6rem; background: var(--et-surface-background-solid); font-size: 1.2rem; }
+  .sdk-shadow-resting { box-shadow: 0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb) / 0.2), 0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb) / 0.12); }
+  .sdk-shadow-raised { box-shadow: 0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb) / 0.22), 0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb) / 0.14); }
+`;
+
+const render = (props: Props): Drawing => {
+  const sheet = sheetOf(props);
+
+  return { ...sheet, styles: `${sheet.styles ?? ''}${STYLES}` };
+};
+
+export default definePart<Props>({
+  note: 'The SDK colour tokens: a light and a dark surface, the demo colour themes brand, danger and warning with their on-light variants, and the AA contrast of text and fills. Every frame loads it before the part styles. Generated by tools/scripts/generate-sdk-tokens.mjs from the Storybook themes; never edit the CSS by hand.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    'surface-light': { group: 'surface', surface: 'light' },
+    'surface-dark': { group: 'surface', surface: 'dark' },
+    'brand-light': { group: 'brand', surface: 'light' },
+    'brand-dark': { group: 'brand', surface: 'dark' },
+    'danger-light': { group: 'danger', surface: 'light' },
+    'danger-dark': { group: 'danger', surface: 'dark' },
+    'warning-light': { group: 'warning', surface: 'light' },
+    'warning-dark': { group: 'warning', surface: 'dark' },
+    'contrast-light': { group: 'contrast', surface: 'light' },
+    'contrast-dark': { group: 'contrast', surface: 'dark' },
+  },
+  render,
+});

package/design/sdk/foundations/colors/overrides.json

@@ -0,0 +1,19 @@
+{
+  "extraColorThemes": ["brand-on-light", "danger-on-light", "warning-on-light"],
+  "values": {
+    "danger": {
+      "primary.color.hover": "185 28 28",
+      "primary.color.focus": "185 28 28",
+      "primary.color.active": "153 27 27"
+    },
+    "danger-on-light": {
+      "primary.color.hover": "185 28 28",
+      "primary.color.focus": "185 28 28",
+      "primary.color.active": "153 27 27"
+    },
+    "warning": { "primary.color.active": "251 191 36" },
+    "warning-on-light": { "primary.color.active": "251 191 36" },
+    "light": { "colorSubtle": "112 112 112" },
+    "dark": { "colorSubtle": "135 135 135" }
+  }
+}

package/design/sdk/foundations/colors/shared/contrast.ts

@@ -0,0 +1,120 @@
+import { html } from '@design-system';
+
+type Surface = 'light' | 'dark';
+
+const tokenValues = (css: string, selector: string) => {
+  const start = css.indexOf(`${selector} {`);
+
+  if (start === -1) throw new Error(`colors.css has no ${selector} block`);
+
+  const block = css.slice(start, css.indexOf('}', start));
+
+  return Object.fromEntries(
+    [...block.matchAll(/(--[\w-]+): (\d+ \d+ \d+);/g)].map(([, name, value]) => [name, value as string]),
+  ) as Record<string, string>;
+};
+
+const channel = (value: number) => {
+  const c = value / 255;
+
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+
+const luminance = (rgb: string) => {
+  const [r = 0, g = 0, b = 0] = rgb.split(' ').map(Number);
+
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+};
+
+const contrastRatio = (a: string, b: string) => {
+  const [high, low] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];
+
+  return (high + 0.05) / (low + 0.05);
+};
+
+const AA = 4.5;
+
+const pair = (label: string, fill: string, ink: string, fixed: boolean) => {
+  const ratio = contrastRatio(fill, ink);
+
+  return html`<span class="sdk-pair" style="background: rgb(${fill}); color: rgb(${ink})">Aa</span>
+    <span class="sdk-pair-label${fixed ? ' sdk-fixed' : ''}">${label}</span>
+    <code class="sdk-value">${fill} / ${ink}</code>
+    <strong class="sdk-ratio" data-pass="${ratio >= AA}"
+      >${ratio.toFixed(2)}:1 ${ratio >= AA ? 'AA' : 'below AA'}</strong
+    >`;
+};
+
+const STATE_SUFFIX = { rest: '', hover: '-hover', focus: '-focus', active: '-active' } as const;
+
+const FIXED: Record<string, (keyof typeof STATE_SUFFIX)[]> = { danger: ['hover', 'focus'], warning: ['active'] };
+
+const pairTable = (title: string, rows: string) =>
+  html`<section class="sdk-table">
+    <h2 class="sdk-title">${title}</h2>
+    <div class="sdk-pairs">${rows}</div>
+  </section>`;
+
+export const contrastSheet = (css: string, surface: Surface) => {
+  const level = tokenValues(css, `.et-surface--${surface}`);
+  const background = level['--et-surface-background'] ?? '';
+  const suffix = surface === 'light' ? '-on-light' : '';
+
+  const text = pairTable(
+    `Text on the ${surface} background`,
+    (
+      [
+        ['text', '--et-surface-color'],
+        ['muted', '--et-surface-color-muted'],
+        ['subtle', '--et-surface-color-subtle'],
+      ] as const
+    )
+      .map(([role, token]) => pair(role, background, level[token] ?? '', role === 'subtle'))
+      .join(''),
+  );
+
+  const fills = (['danger', 'warning'] as const)
+    .map((theme) => {
+      const values = tokenValues(css, `.et-color--${theme}${suffix}`);
+
+      return pairTable(
+        `.et-color--${theme}${suffix} (demo theme): on-primary on the fill`,
+        Object.entries(STATE_SUFFIX)
+          .map(([state, end]) =>
+            pair(
+              state,
+              values[`--et-color-primary${end}`] ?? '',
+              values[`--et-color-on-primary${end}`] ?? '',
+              FIXED[theme]?.includes(state as keyof typeof STATE_SUFFIX) ?? false,
+            ),
+          )
+          .join(''),
+      );
+    })
+    .join('');
+
+  const ink = pairTable(
+    `Ink on the ${surface} background`,
+    (['brand', 'danger', 'warning'] as const)
+      .map((theme) =>
+        pair(
+          `${theme}${suffix}`,
+          background,
+          tokenValues(css, `.et-color--${theme}${suffix}`)['--et-color-primary-ink'] ?? '',
+          false,
+        ),
+      )
+      .join(''),
+  );
+
+  return text + fills + ink;
+};
+
+export const contrastStyles = `
+  .sdk-pairs { display: grid; grid-template-columns: 4rem auto auto auto; gap: 0.6rem 1.2rem; align-items: center; margin-top: 0.4rem; }
+  .sdk-pair { display: grid; place-items: center; width: 4rem; height: 2.8rem; border-radius: 0.4rem; border: 0.1rem solid var(--et-surface-border-solid); font-size: 1.4rem; font-weight: 600; }
+  .sdk-pair-label { font-size: 1.2rem; white-space: nowrap; }
+  .sdk-fixed { font-weight: 600; }
+  .sdk-ratio { font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .sdk-ratio[data-pass='false'] { color: var(--et-surface-color-muted-solid); text-decoration: line-through; }
+`;

package/design/sdk/foundations/elevation/elevation.css

@@ -0,0 +1,6 @@
+@media (prefers-color-scheme: dark) {
+  .sdk-ring {
+    --et-surface-ring-solid: color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid));
+    --sdk-elevation-edge: var(--et-surface-ring-solid);
+  }
+}

package/design/sdk/foundations/elevation/elevation.ts

@@ -0,0 +1,11 @@
+import { definePart } from '@design-system';
+import { ELEVATION_STATES, elevationScene, type ElevationProps } from './shared/elevation/scene';
+import edge from './elevation.css?inline';
+
+export default definePart<ElevationProps>({
+  note: 'How the SDK lifts things off the base surface: a card, an elevated panel and an overlay pane (the select panel mock), side by side and as a pane over a panel. Fills come from the elevated surface tokens; no background colour differs from the product. In the dark scheme a 1 px ring in --et-surface-ring-solid (24 % --et-surface-color-solid over the fill) replaces the border colour. The token is defined here; the generator does not emit it yet.',
+  madeBy: ['claude-opus-5-5'],
+  states: ELEVATION_STATES,
+  render: (props: ElevationProps) =>
+    elevationScene(props, { card: 'sdk-ring', panel: 'sdk-ring', pane: 'sdk-ring' }, edge),
+});

package/design/sdk/foundations/elevation/shared/elevation/scene.css

@@ -0,0 +1,101 @@
+.sdk-elevation {
+  box-sizing: border-box;
+  width: max-content;
+  padding: 4rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.sdk-elevation-row {
+  display: flex;
+  gap: 4rem;
+  align-items: flex-start;
+}
+
+.sdk-elevation-card,
+.sdk-elevation-panel,
+.sdk-elevation-pane-panel {
+  --sdk-elevation-edge: var(--et-surface-border-solid);
+  --sdk-elevation-highlight: 0 0 0 0 transparent;
+
+  box-sizing: border-box;
+  border: 0.1rem solid var(--sdk-elevation-edge);
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  box-shadow: var(--sdk-elevation-highlight), var(--sdk-elevation-shadow);
+}
+
+.sdk-elevation-card {
+  --sdk-elevation-shadow:
+    0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb) / 0.2), 0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb) / 0.12);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 20rem;
+  padding: 1.6rem;
+  border-radius: 1.2rem;
+}
+
+.sdk-elevation-panel {
+  --sdk-elevation-shadow:
+    0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb) / 0.22), 0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb) / 0.14);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  width: 28rem;
+  padding: 2rem;
+  border-radius: 1.6rem;
+}
+
+.sdk-elevation-pane-panel {
+  --sdk-elevation-shadow: var(--et-anchored-panel-shadow, 0 1rem 2.4rem rgb(var(--et-shadow-color-rgb) / 0.16));
+
+  width: 22rem;
+}
+
+.sdk-elevation-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.sdk-elevation-label {
+  color: var(--et-surface-color-muted-solid);
+  font-size: 1.2rem;
+}
+
+.sdk-elevation-muted {
+  color: var(--et-surface-color-muted-solid);
+}
+
+.sdk-elevation-line {
+  height: 3.2rem;
+  margin-top: 0.8rem;
+  border-radius: 0.6rem;
+  background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
+}
+
+.sdk-elevation-line--short {
+  width: 60%;
+  margin-top: 0;
+}
+
+.sdk-elevation-stack {
+  position: relative;
+  width: 40rem;
+  height: 30rem;
+}
+
+.sdk-elevation-stack .sdk-elevation-panel {
+  width: 32rem;
+  height: 22rem;
+}
+
+.sdk-elevation-pane--over {
+  position: absolute;
+  top: 12rem;
+  left: 16rem;
+}

package/design/sdk/foundations/elevation/shared/elevation/scene.ts

@@ -0,0 +1,74 @@
+import { selectOption, selectPanel, selectStyles } from '@ethlete/components/design/select';
+import { drawing, html } from '@design-system';
+import sceneStyles from './scene.css?inline';
+
+export type ElevationProps = { scene: 'overview' | 'stacked' };
+
+/** The variant's class for each elevated thing. */
+type ElevationEdges = { card: string; panel: string; pane: string };
+
+const OPTIONS = [
+  { value: 'drafts', label: 'Drafts' },
+  { value: 'review', label: 'In review' },
+  { value: 'merged', label: 'Merged' },
+  { value: 'archived', label: 'Archived' },
+];
+
+const pane = (id: string, edge: string) =>
+  selectPanel({
+    id,
+    color: 'brand',
+    content: OPTIONS.map((option) =>
+      selectOption(option, {
+        id: `${id}-${option.value}`,
+        selected: option.value === 'review',
+        active: option.value === 'merged' ? 'keyboard' : undefined,
+      }),
+    ).join(''),
+  }).replace(
+    '<et-select-panel class="',
+    `<et-select-panel data-et-surface-fill class="sdk-elevation-pane-panel ${edge} `,
+  );
+
+const card = (edge: string) =>
+  html`<article class="sdk-elevation-card ${edge} et-surface--inherited" data-et-surface-fill>
+    <span class="sdk-elevation-label">Card</span>
+    <strong>Season 2026</strong>
+    <span class="sdk-elevation-muted">12 matches, 3 open</span>
+  </article>`;
+
+const panel = (edge: string) =>
+  html`<section class="sdk-elevation-panel ${edge} et-surface--inherited" data-et-surface-fill>
+    <span class="sdk-elevation-label">Panel</span>
+    <strong>Edit match</strong>
+    <span class="sdk-elevation-muted">Kick-off, venue and referee</span>
+    <div class="sdk-elevation-line"></div>
+    <div class="sdk-elevation-line sdk-elevation-line--short"></div>
+  </section>`;
+
+const overview = (edges: ElevationEdges) =>
+  html`<div class="sdk-elevation-row">
+    ${card(edges.card)} ${panel(edges.panel)}
+    <div class="sdk-elevation-pane">
+      <span class="sdk-elevation-label">Overlay pane</span>
+      ${pane('overview', edges.pane)}
+    </div>
+  </div>`;
+
+const stacked = (edges: ElevationEdges) =>
+  html`<div class="sdk-elevation-stack">
+    ${panel(edges.panel)}
+    <div class="sdk-elevation-pane sdk-elevation-pane--over">${pane('stacked', edges.pane)}</div>
+  </div>`;
+
+/** Draws the elevated things of one scene on the base surface, each with its class from `edges`. */
+export const elevationScene = ({ scene }: ElevationProps, edges: ElevationEdges, styles: string) =>
+  drawing({
+    body: html`<div class="sdk-elevation">${scene === 'overview' ? overview(edges) : stacked(edges)}</div>`,
+    styles: [selectStyles, sceneStyles, styles].join('\n'),
+  });
+
+export const ELEVATION_STATES = {
+  overview: { scene: 'overview' },
+  stacked: { scene: 'stacked' },
+} satisfies Record<string, ElevationProps>;

package/design/sdk/foundations/icons/icons.ts

@@ -0,0 +1,119 @@
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { definePart, iconSheet } from '@design-system';
+
+const GRID = 16;
+
+const PADDING = 1;
+
+const svg = (body: string) =>
+  `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+
+const FILL = 'fill="currentColor" stroke="none"';
+
+const REDRAWN: Record<string, string> = {
+  'et-arrow-out-up-right': svg(
+    '<path d="M5.5 5.5H4A1.5 1.5 0 0 0 2.5 7v5A1.5 1.5 0 0 0 4 13.5h5a1.5 1.5 0 0 0 1.5-1.5v-1.5"/><path d="M9.5 2.5h4v4M13.5 2.5l-6 6"/>',
+  ),
+  'et-arrow-right': svg('<path d="M2.5 8.5h11M9 4l4.5 4.5L9 13"/>'),
+  'et-arrow-up': svg('<path d="M8.5 13.5v-11M4 7l4.5-4.5L13 7"/>'),
+  'et-arrows-left-right': svg('<path d="M2 8.5h12M5.5 5 2 8.5 5.5 12M10.5 5 14 8.5 10.5 12"/>'),
+  'et-calendar': svg('<rect x="2.5" y="3.5" width="11" height="10" rx="1.5"/><path d="M5.5 2v3M10.5 2v3M2.5 6.5h11"/>'),
+  'et-check': svg('<path d="M2.5 8.5 6 12l7.5-7.5"/>'),
+  'et-chevron': svg('<path d="M3 10.5 8 5.5l5 5"/>'),
+  'et-circle-check': svg('<circle cx="8" cy="8" r="6.25"/><path d="M5.25 8.25 7.2 10.2 10.75 6.5"/>'),
+  'et-circle-info': svg(
+    `<circle cx="8" cy="8" r="6.25"/><path d="M8 7.25V11"/><circle cx="8" cy="4.75" r=".85" ${FILL}/>`,
+  ),
+  'et-clipboard-check': svg(
+    '<path d="M5.5 3.5H4A1.5 1.5 0 0 0 2.5 5v7A1.5 1.5 0 0 0 4 13.5h8a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5h-1.5"/><rect x="5.5" y="2" width="5" height="2.5" rx=".75"/><path d="M5.5 9 7.25 10.75 10.5 7.5"/>',
+  ),
+  'et-clock': svg('<circle cx="8" cy="8" r="6.25"/><path d="M8 4.5V8l2.5 1.5"/>'),
+  'et-ellipsis': svg(
+    `<circle cx="3" cy="8" r="1.25" ${FILL}/><circle cx="8" cy="8" r="1.25" ${FILL}/><circle cx="13" cy="8" r="1.25" ${FILL}/>`,
+  ),
+  'et-ellipsis-vertical': svg(
+    `<circle cx="8" cy="3" r="1.25" ${FILL}/><circle cx="8" cy="8" r="1.25" ${FILL}/><circle cx="8" cy="13" r="1.25" ${FILL}/>`,
+  ),
+  'et-eye': svg(
+    '<path d="M1.75 8C3 5.5 5.25 3.5 8 3.5s5 2 6.25 4.5C13 10.5 10.75 12.5 8 12.5S3 10.5 1.75 8Z"/><circle cx="8" cy="8" r="2"/>',
+  ),
+  'et-eye-slash': svg(
+    '<mask id="et-eye-slash-cut"><rect width="16" height="16" fill="#fff"/><path d="M2.5 2.5l11 11" stroke="#000" stroke-width="4.2"/></mask><g mask="url(#et-eye-slash-cut)"><path d="M1.75 8C3 5.5 5.25 3.5 8 3.5s5 2 6.25 4.5C13 10.5 10.75 12.5 8 12.5S3 10.5 1.75 8Z"/><circle cx="8" cy="8" r="2"/></g><path d="M2.5 2.5l11 11"/>',
+  ),
+  'et-eyedropper': svg(
+    '<path d="M2 14l.67-.67h2l5.67-5.67"/><path d="M2.67 13.33v-2l5.67-5.67"/><path d="M10 4l1.93-1.93a1.37 1.37 0 0 1 1.93 1.93L11.93 5.93l.27.27a1.37 1.37 0 0 1-1.93 1.93l-2.4-2.4a1.37 1.37 0 0 1 1.93-1.93l.2.2Z"/>',
+  ),
+  'et-file': svg(
+    '<path d="M9 2H5a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V5.5M9 2l3.5 3.5M9 2v3.5h3.5"/>',
+  ),
+  'et-floppy-disk': svg(
+    '<path d="M2.5 2.5H11l2.5 2.5v7a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 12Z"/><path d="M5.5 2.5v3h4v-3M5.5 10.5h5"/>',
+  ),
+  'et-focus-frame': svg(
+    `<rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><rect x="5.5" y="5.5" width="5" height="5" rx=".75" ${FILL}/>`,
+  ),
+  'et-grid-2x2': svg('<rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><path d="M8 2.5v11M2.5 8h11"/>'),
+  'et-image': svg(
+    `<rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle cx="5.25" cy="5.75" r="1.1" ${FILL}/><path d="M3.75 11 6.5 8l1.6 1.75L10 6.5l2.25 4.5Z" ${FILL}/>`,
+  ),
+  'et-location': svg(
+    '<path d="M8 14.25s-4.75-4.2-4.75-7.75a4.75 4.75 0 0 1 9.5 0c0 3.55-4.75 7.75-4.75 7.75Z"/><circle cx="8" cy="6.5" r="1.75"/>',
+  ),
+  'et-lock': svg(
+    `<path d="M5.5 7.5V4.75a2.5 2.5 0 0 1 5 0V7.5"/><rect x="2.5" y="7.5" width="11" height="6" rx="1.5"/><circle cx="8" cy="10.5" r="1" ${FILL}/>`,
+  ),
+  'et-minus': svg('<path d="M3.5 8.5h10"/>'),
+  'et-pause': svg(
+    `<rect x="4" y="3" width="3" height="10" rx=".75" ${FILL}/><rect x="9" y="3" width="3" height="10" rx=".75" ${FILL}/>`,
+  ),
+  'et-pencil': svg(
+    '<path d="M2.5 13.5l.75-3.1L9.6 4.05a1.3 1.3 0 0 1 1.85 0l.5.5a1.3 1.3 0 0 1 0 1.85L5.6 12.75Z"/><path d="M8.5 5.25l2.25 2.25"/>',
+  ),
+  'et-play': svg('<path d="M5 3.5v9l7.5-4.5Z" fill="currentColor"/>'),
+  'et-plus': svg('<path d="M8.5 3.5v10M3.5 8.5h10"/>'),
+  'et-quote': svg(
+    `<path d="M6.5 4.5C4.5 5.17 3.5 6.83 3.5 8.83V11.5H7V8H5.17c0-1.33.47-2.2 1.33-2.67Z" ${FILL}/><path d="M12.5 4.5c-2 .67-3 2.33-3 4.33v2.67H13V8h-1.83c0-1.33.47-2.2 1.33-2.67Z" ${FILL}/>`,
+  ),
+  'et-redo': svg('<path d="M10 10l3.5-3.5L10 3M13.5 6.5h-7a3.5 3.5 0 0 0 0 7h2"/>'),
+  'et-rotate-right': svg(
+    '<path d="M2.75 6A5.5 5.5 0 0 1 12.25 4M13.5 2v4h-4M13.25 10A5.5 5.5 0 0 1 3.75 12M2.5 14v-4h4"/>',
+  ),
+  'et-star': svg(
+    '<path d="M8 2.5l1.62 3.88 4.18.33-3.18 2.74.97 4.09L8 11.35l-3.59 2.19.97-4.09L2.2 6.71l4.18-.33Z" fill="currentColor"/>',
+  ),
+  'et-thumbtack': svg('<path d="M6 2.5h4M6.75 2.5v3.75L4.5 9.5h7L9.25 6.25V2.5M8 9.5v4"/>'),
+  'et-times': svg('<path d="M4 4l8 8M12 4l-8 8"/>'),
+  'et-trash': svg(
+    '<path d="M2.5 4h11M6 4V2.75A.75.75 0 0 1 6.75 2h2.5a.75.75 0 0 1 .75.75V4M3.75 4l.7 8.75A1.25 1.25 0 0 0 5.7 14h4.6a1.25 1.25 0 0 0 1.25-1.25l.7-8.75M6.5 7v4M9.5 7v4"/>',
+  ),
+  'et-triangle-exclamation': svg(
+    `<path d="M8 1.75 14.25 13.75H1.75Z"/><path d="M8 6.25v3"/><circle cx="8" cy="11.4" r=".85" ${FILL}/>`,
+  ),
+  'et-trophy': svg(
+    '<path d="M4.5 2.5h7V6a3.5 3.5 0 0 1-7 0Z"/><path d="M4.5 3.5h-2v1a2.5 2.5 0 0 0 2.2 2.48M11.5 3.5h2v1a2.5 2.5 0 0 1-2.2 2.48M8 9.5v2M5 13.5h6l-.5-2h-5Z"/>',
+  ),
+  'et-undo': svg('<path d="M6 10 2.5 6.5 6 3M2.5 6.5h7a3.5 3.5 0 0 1 0 7h-2"/>'),
+  'et-upload': svg(
+    '<path d="M8 10V2.5M4.5 6 8 2.5 11.5 6M2.5 10.5V12A1.5 1.5 0 0 0 4 13.5h8a1.5 1.5 0 0 0 1.5-1.5v-1.5"/>',
+  ),
+};
+
+const icons = SDK_ICONS.map((icon) => {
+  const name = icon.variant ? `${icon.name}--${icon.variant}` : icon.name;
+
+  return { name, svg: REDRAWN[name] ?? icon.data, grid: GRID, padding: PADDING };
+});
+
+const titles = {
+  catalogue: `Icons: the ${SDK_ICONS.length} icons the SDK ships, at each size a component draws`,
+  construction: `Every icon on the ${GRID} px candidate grid: pixel lines, centre lines, and the ${PADDING} px padding`,
+};
+
+type View = 'catalogue' | 'construction';
+
+export default definePart<{ view: View }>({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: { catalogue: { view: 'catalogue' }, construction: { view: 'construction' } },
+  render: ({ view }) => iconSheet({ view, title: titles[view], icons, sizes: [16, 20, 24] }),
+});