@wtfalch/design 0.2.0 → 0.3.0

package/README.md

@@ -27,38 +27,70 @@ Where a theme genuinely needs a layer that values cannot reach — a paper grain
 a vignette — the base CSS pre-declares the slot and the theme fills it. The rule
 is always ours.
 
-## Writing a theme
+## Products
+
+A site is one product, so it imports its product and everything it touches is
+its own:
 
 ```ts
-import { applyTheme, defineTheme } from '@wtfalch/design'
-
-export const brand = defineTheme({
-  name: 'Brand',
-  note: 'Warm, roomy, and slower than the default',
-  scheme: 'light',
-  tokens: {
-    '--bg': '#faf7f2',
-    '--panel': '#ffffff',
-    '--accent': '#7c3aed',
-    '--on-accent': '#ffffff',
-    '--density': '1.15',      // every --space-* step follows
-    '--font-size': '15px',    // every --text-* step follows
-    '--dur-md': '320ms',
-  },
-})
-
-applyTheme(brand)                      // the object, straight from defineTheme
-applyTheme(brand, myEl)                // or on a subtree
-applyTheme('paper')                    // or a built-in, by name
+import '@wtfalch/design/valet.css'   // the vocabulary, valet's identity, the components, valet's themes
+import { Brand, Button, applyTheme } from '@wtfalch/design/valet'
+// the same components; Brand is valet's badge, applyTheme knows valet's themes
 ```
 
-Name the tokens you change; the rest inherit from `tokens.css`. A theme naming
-three tokens is valid.
+Three layers, each falling back to the one under it:
+
+| | |
+|---|---|
+| **the system** | The components, the base values in `tokens.css`, the shared icons and illustrations. |
+| **the product** | Its mark, and its identity: the tokens that make it itself under every theme — font, shape, density. On `:root` in the product's stylesheet, so a theme that is silent on them gets the product, not tf. `src/products/<name>.ts`. |
+| **the theme** | A palette and a colour scheme, plus anything it deliberately changes. One `:root[data-theme='<id>']` rule each, generated from the object. |
+
+The middle layer is what lets a theme be shared between products: it names its
+colours and inherits the identity of whichever product wears it. Before it
+existed, valet's two palettes each restated valet's font and corners, and a
+palette written for two products would have shown tf's font on valet wherever
+it kept quiet.
+
+The product's default theme is also written on `:root` when no `data-theme` is
+set, so the first paint is right with no attribute at all; set the attribute
+before the bundle loads only to restore a theme somebody picked (see First
+paint). tf's default is `system`, a `prefers-color-scheme` rule rather than a
+palette, so tf still sets the attribute.
+
+The main entry is the neutral view of all of it: `PRODUCTS` by name, `THEMES`
+as the union every product's picker and the contrast test read,
+`productTheme(product, id)` for a theme as a product wears it, `bindProduct`
+for a product defined outside this package, and `productStylesheet` for its
+CSS.
+
+```ts
+import { PRODUCTS, applyTheme, productTheme } from '@wtfalch/design'
+
+applyTheme(productTheme(PRODUCTS.valet, 'valet-night'))   // valet night, on valet's identity
+applyTheme('valet-night')                                  // the palette alone, over the base
+applyTheme(productTheme(PRODUCTS.valet), myEl)             // valet's default, on a subtree
+```
+
+### Writing a theme
+
+A theme is a `Partial<ThemeTokens>` with a name, a note and a scheme: name the
+tokens you change, the rest inherit from the product's identity and then from
+`tokens.css`. A theme naming three tokens is valid. A product's themes go in
+`src/products/<name>.ts` beside its identity, keyed by the id `applyTheme`
+derives from the name (lowercased, spaces to hyphens); `products.test.ts`
+refuses a key that disagrees, a palette that restates its product's identity,
+and a default that is not one of the product's themes. `build-products.mjs`
+writes `dist/<name>.css` from the objects at build time.
 
 **A typo is a compile error.** `tokens` is a `Partial<ThemeTokens>`, so
 `'--densty'` fails to build rather than silently doing nothing — which is the
-failure a string-keyed map produces at run time, invisibly. This is the main
-reason the type is exported at all.
+failure a string-keyed map produces at run time, invisibly.
+
+**A product names its font and does not ship it.** valet's identity sets
+`--font` to read a `--font-sans` variable the app defines with whatever loads
+its fonts, and falls back to the family by name. The gallery vendors the two
+families valet names so the specimens are photographed in them.
 
 ## The three kinds of token
 
@@ -101,9 +133,10 @@ share a value.
 
 ## First paint
 
-React mounts after the stylesheet, so a theme applied in an effect flashes the
-default. Cache the name and apply it from a blocking script before the bundle
-loads:
+Your product's stylesheet paints its default theme with no attribute set, so
+this is for restoring a choice. React mounts after the stylesheet, so a theme
+applied in an effect flashes the default. Cache the name and apply it from a
+blocking script before the bundle loads:
 
 ```html
 <script>
@@ -116,20 +149,33 @@ loads:
 
 Your server stays the source of truth. `localStorage` only beats the paint.
 
-## Built-ins
+## Marks
+
+Every product's mark, by name, in `brandMarks.ts`. tf's is one stroke. valet's
+is a filled badge: the jacket with the shirt cut out of it and a bow tie in the
+cut, one path under `evenodd` so the surface shows through the shirt. Both are
+`currentColor`, so the stylesheet decides the colour and a theme can move it.
+
+```tsx
+import { BRAND_MARKS, Brand } from '@wtfalch/design'
+
+<Brand name="valet" />   // anywhere; a product entry's Brand defaults to its own
+BRAND_MARKS.valet.d      // the path, for a favicon or an app icon cut from the same drawing
+```
 
-`system`, `night` and `paper` ship as **examples, not as the menu** — an app
-that installs this is expected to bring its own. `system` is a theme rather than
-a mode: it is the only one scoped to `prefers-color-scheme`, so choosing a dark
-theme on a light-mode laptop is not silently repainted.
+Icons and illustrations are the system's, shared by every product the way
+`Button` is. A product wanting its own inside the package's components is a
+case nobody has had; when it comes, the product entry is where to bind it.
 
 ## Status
 
-`0.2.0`. Twenty-eight components, every one of the 70 gallery specimens
+`0.3.0`. Twenty-eight components, every one of the 70 gallery specimens
 photographed in four themes, the open windows photographed too, and the
 contrast, reduced-motion and keyboard rules are tests rather than sentences.
 It came out of [tf](https://github.com/wtfalch/tf), which is its first consumer;
-`Brand` holds every product's mark by name, tf's first.
+valet is the second. A product is a layer: tf and valet each ship as one
+stylesheet and one entry, with their identity under their themes and their
+mark in the table.
 
 Requires React 19. Behaviour comes from
 [React Aria Components](https://react-spectrum.adobe.com/react-aria/); every

package/dist/components/Brand.d.ts

@@ -17,6 +17,17 @@ import { type BrandName } from './brandMarks';
  * product that wants its mark to move does the same in its own code, and the
  * package stays the source of the still shape every product's icon is drawn
  * from.
+ *
+ * Stroked or filled, whichever the mark is. tf's is one line at a weight;
+ * valet's is a filled badge with the shirt cut out of it and the bow inside
+ * the cut, one path under `evenodd` so the surface shows through the shirt.
+ * Both are `currentColor`, so `.brand` still decides the colour and a theme
+ * can still move it -- a second colour would be the one thing a theme could
+ * not reach.
+ *
+ * A product's entry, `@wtfalch/design/<product>`, exports this with the
+ * product's name as the default, so a header there writes `<Brand />` and
+ * gets its own mark. Here the default is the first row.
  */
 export default function Brand({ name, title, className, }: {
     /** Which product's mark. */

package/dist/components/Brand.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BRAND_MARKS } from './brandMarks';
+import { BRAND_MARKS, BRAND_NAMES } from './brandMarks';
 /**
  * A product's mark, at header size.
  *
@@ -18,8 +18,20 @@ import { BRAND_MARKS } from './brandMarks';
  * product that wants its mark to move does the same in its own code, and the
  * package stays the source of the still shape every product's icon is drawn
  * from.
+ *
+ * Stroked or filled, whichever the mark is. tf's is one line at a weight;
+ * valet's is a filled badge with the shirt cut out of it and the bow inside
+ * the cut, one path under `evenodd` so the surface shows through the shirt.
+ * Both are `currentColor`, so `.brand` still decides the colour and a theme
+ * can still move it -- a second colour would be the one thing a theme could
+ * not reach.
+ *
+ * A product's entry, `@wtfalch/design/<product>`, exports this with the
+ * product's name as the default, so a header there writes `<Brand />` and
+ * gets its own mark. Here the default is the first row.
  */
-export default function Brand({ name = 'tf', title = name, className, }) {
+export default function Brand({ name = BRAND_NAMES[0], title, className, }) {
     const mark = BRAND_MARKS[name];
-    return (_jsxs("svg", { className: `brand${className ? ` ${className}` : ''}`, viewBox: mark.view, fill: "none", role: "img", "aria-label": title, children: [_jsx("title", { children: title }), _jsx("path", { d: mark.d, stroke: "currentColor", strokeWidth: mark.stroke, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    const said = title ?? name;
+    return (_jsxs("svg", { className: `brand${className ? ` ${className}` : ''}`, viewBox: mark.view, fill: "none", role: "img", "aria-label": said, children: [_jsx("title", { children: said }), 'fill' in mark ? (_jsx("path", { d: mark.d, fill: "currentColor", fillRule: mark.fill })) : (_jsx("path", { d: mark.d, stroke: "currentColor", strokeWidth: mark.stroke, strokeLinecap: "round", strokeLinejoin: "round" }))] }));
 }

package/dist/components/Icon.d.ts

@@ -61,4 +61,4 @@ export default function Icon({ name, size, className, title, }: {
     /** Given only when the icon is the whole message. An icon beside a label it
      *  repeats is decoration, and decoration announced twice is noise. */
     title?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/components/Icon.js

@@ -1,233 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GLYPHS = {
-    chat: {
-        view: '-0.9 -0.9 21.79 21.79',
-        d: [
-            'M1.5 12.102a2.5 2.5 0 0 0 2.5 2.5h.249c.307 1.238.741 1.898 1.455 1.898c.603 0 1.519-.62 2.94-1.898H16a2.5 2.5 0 0 0 2.5-2.5V6A2.5 2.5 0 0 0 16 3.5H4A2.5 2.5 0 0 0 1.5 6zm1 0V6A1.5 1.5 0 0 1 4 4.5h12A1.5 1.5 0 0 1 17.5 6v6.102a1.5 1.5 0 0 1-1.5 1.5H8.257l-.143.13C6.834 14.898 5.96 15.5 5.704 15.5c-.092 0-.35-.463-.567-1.5l-.083-.398H4a1.5 1.5 0 0 1-1.5-1.5',
-        ],
-        dots: [
-            [7, 9, 1],
-            [10, 9, 1],
-            [13, 9, 1],
-        ],
-    },
-    settings: {
-        view: '0.06 0.06 19.87 19.87',
-        d: [
-            'M8.232 11.768A2.5 2.5 0 0 0 10 12.5c.672 0 1.302-.267 1.768-.732A2.5 2.5 0 0 0 12.5 10c0-.672-.267-1.302-.732-1.768A2.5 2.5 0 0 0 10 7.5c-.672 0-1.302.267-1.768.732A2.5 2.5 0 0 0 7.5 10c0 .672.267 1.302.732 1.768m2.829-.707c-.28.28-.657.439-1.061.439s-.78-.16-1.06-.44s-.44-.656-.44-1.06s.16-.78.44-1.06s.656-.44 1.06-.44s.78.16 1.06.44s.44.656.44 1.06s-.16.78-.44 1.06',
-            'm14.216 3.773l-1.27.714a6.2 6.2 0 0 0-1.166-.48l-.47-1.414a.5.5 0 0 0-.474-.343H9.06a.5.5 0 0 0-.481.365l-.392 1.403a6.2 6.2 0 0 0-1.164.486L5.69 3.835a.5.5 0 0 0-.578.094L3.855 5.185a.5.5 0 0 0-.082.599l.714 1.27q-.3.556-.48 1.166l-1.414.47a.5.5 0 0 0-.343.474v1.777a.5.5 0 0 0 .365.481l1.403.392q.184.608.486 1.164l-.669 1.333a.5.5 0 0 0 .094.578l1.256 1.256a.5.5 0 0 0 .599.082l1.27-.714q.556.3 1.166.48l.47 1.414a.5.5 0 0 0 .474.343h1.777a.5.5 0 0 0 .481-.365l.392-1.403a6.2 6.2 0 0 0 1.164-.486l1.333.669a.5.5 0 0 0 .578-.093l1.256-1.257a.5.5 0 0 0 .082-.599l-.714-1.27q.3-.556.48-1.166l1.414-.47a.5.5 0 0 0 .343-.474V9.06a.5.5 0 0 0-.365-.481l-1.403-.392a6.2 6.2 0 0 0-.486-1.164l.669-1.333a.5.5 0 0 0-.093-.578l-1.257-1.256a.5.5 0 0 0-.599-.082m-1.024 1.724l1.184-.667l.733.733l-.627 1.25a.5.5 0 0 0 .019.482c.265.44.464.918.59 1.418a.5.5 0 0 0 .35.36l1.309.366v1.037l-1.327.44a.5.5 0 0 0-.328.354a5.2 5.2 0 0 1-.585 1.42a.5.5 0 0 0-.007.502l.667 1.184l-.733.733l-1.25-.627a.5.5 0 0 0-.482.019c-.44.265-.918.464-1.418.59a.5.5 0 0 0-.36.35l-.366 1.309H9.525l-.44-1.327a.5.5 0 0 0-.355-.328a5.2 5.2 0 0 1-1.42-.585a.5.5 0 0 0-.502-.007l-1.184.667l-.733-.733l.627-1.25a.5.5 0 0 0-.019-.482a5.2 5.2 0 0 1-.59-1.418a.5.5 0 0 0-.35-.36l-1.309-.366V9.525l1.327-.44a.5.5 0 0 0 .327-.355c.125-.5.323-.979.586-1.42a.5.5 0 0 0 .007-.502L4.83 5.624l.733-.733l1.25.627a.5.5 0 0 0 .482-.019c.44-.265.918-.464 1.418-.59a.5.5 0 0 0 .36-.35l.366-1.309h1.037l.44 1.327a.5.5 0 0 0 .354.327c.5.125.979.323 1.42.586a.5.5 0 0 0 .502.007',
-        ],
-    },
-    refresh: {
-        view: '-1.16 -1.07 21.93 21.93',
-        d: [
-            'M5.254 14.596a.5.5 0 0 1 .707-.707A5.5 5.5 0 0 0 15.35 10a.5.5 0 0 1 .999.001a6.5 6.5 0 0 1-11.096 4.596',
-            'M13.131 12.416a.5.5 0 0 1-.555-.832l3-2a.5.5 0 1 1 .555.832z',
-            'M18.266 12.723a.5.5 0 1 1-.832.554l-2-3a.5.5 0 0 1 .832-.554zm-3.912-7.518a.5.5 0 0 1-.708.707a5.5 5.5 0 0 0-9.389 3.89a.5.5 0 0 1-1-.001a6.5 6.5 0 0 1 11.097-4.596',
-            'M6.476 7.385a.5.5 0 0 1 .555.832l-3 2a.5.5 0 1 1-.555-.832z',
-            'M1.341 7.078a.5.5 0 1 1 .832-.554l2 3a.5.5 0 0 1-.832.554z',
-        ],
-    },
-    minimize: { view: '0 0 20 20', d: ['M5 10.5a.5.5 0 0 1 0-1h10a.5.5 0 0 1 0 1z'] },
-    code: {
-        view: '-0.47 -0.48 20.94 20.94',
-        d: [
-            'M1.962 9.666a.5.5 0 0 1 .706-.038l3.333 3a.5.5 0 1 1-.669.744l-3.333-3a.5.5 0 0 1-.037-.706',
-            'M6.038 6.666a.5.5 0 0 1-.037.706l-3.333 3a.5.5 0 0 1-.67-.744l3.334-3a.5.5 0 0 1 .706.038m12 3a.5.5 0 0 1-.037.706l-3.333 3a.5.5 0 0 1-.67-.744l3.334-3a.5.5 0 0 1 .706.038',
-            'M13.962 6.666a.5.5 0 0 1 .706-.038l3.333 3a.5.5 0 0 1-.669.744l-3.333-3a.5.5 0 0 1-.037-.706m-2.33-2.648a.5.5 0 0 1 .35.614l-3 11a.5.5 0 0 1-.964-.264l3-11a.5.5 0 0 1 .614-.35',
-        ],
-    },
-    wifi: {
-        view: '-0.26 -0.06 20.51 20.51',
-        d: [
-            'M13.348 11.641a.5.5 0 0 1-.696.718a2 2 0 0 0-.136-.12a3 3 0 0 0-.753-.424A4.8 4.8 0 0 0 10 11.5c-1.022 0-1.951.285-2.516.739q-.073.06-.136.12a.5.5 0 0 1-.696-.718q.097-.094.206-.182c.754-.606 1.905-.959 3.142-.959c.765 0 1.5.134 2.132.385c.385.153.726.346 1.01.574q.109.089.206.182m2.508-2.601a.5.5 0 1 1-.712.7a5 5 0 0 0-.35-.32a5 5 0 0 0-.399-.298a6.6 6.6 0 0 0-1.449-.731a8 8 0 0 0-1.126-.319a9 9 0 0 0-1.205-.162a9.3 9.3 0 0 0-1.839.061a9 9 0 0 0-1.172.242a8 8 0 0 0-1.071.39a6.6 6.6 0 0 0-.928.519q-.21.143-.399.298q-.186.155-.35.32a.5.5 0 0 1-.712-.7q.198-.202.424-.39q.225-.186.474-.355a7 7 0 0 1 1.076-.602a8 8 0 0 1 1.215-.443a9 9 0 0 1 1.31-.27A10 10 0 0 1 10 6.89a10 10 0 0 1 1.357.09a10 10 0 0 1 1.31.27a9 9 0 0 1 1.215.443a7.6 7.6 0 0 1 1.076.602q.249.17.474.355q.226.188.424.39',
-            'M17.873 6.555a.5.5 0 1 1-.746.667a7 7 0 0 0-.492-.496a8 8 0 0 0-.557-.46a9 9 0 0 0-1.29-.794a9.5 9.5 0 0 0-1.484-.594a10.6 10.6 0 0 0-1.617-.366A11.4 11.4 0 0 0 10 4.389a12 12 0 0 0-1.687.123a11 11 0 0 0-1.617.366a10 10 0 0 0-1.483.595a9 9 0 0 0-.673.374a8 8 0 0 0-.618.42q-.294.22-.557.46q-.263.239-.492.495a.5.5 0 1 1-.746-.667q.264-.294.564-.568t.632-.521q.332-.249.694-.471a10 10 0 0 1 1.545-.775a11 11 0 0 1 1.709-.53a12 12 0 0 1 1.808-.268a12.7 12.7 0 0 1 2.754.1a12 12 0 0 1 1.767.401a11 11 0 0 1 1.635.656q.387.194.749.416q.36.222.693.47q.333.249.632.522q.3.274.564.568M11.75 15.25a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0',
-        ],
-    },
-    'wifi-off': {
-        view: '-1.54 -1.54 23.08 23.08',
-        d: [
-            'M13.348 11.641a.5.5 0 0 1-.696.718a2 2 0 0 0-.136-.12a3 3 0 0 0-.753-.424A4.8 4.8 0 0 0 10 11.5c-1.022 0-1.951.285-2.516.739q-.073.06-.136.12a.5.5 0 0 1-.696-.718q.097-.094.206-.182c.754-.606 1.905-.959 3.142-.959c.765 0 1.5.134 2.132.385c.385.153.726.346 1.01.574q.109.089.206.182m2.508-2.601a.5.5 0 1 1-.712.7a5 5 0 0 0-.35-.32a5 5 0 0 0-.399-.298a6.6 6.6 0 0 0-1.449-.731a8 8 0 0 0-1.126-.319a9 9 0 0 0-1.205-.162a9.3 9.3 0 0 0-1.839.061a9 9 0 0 0-1.172.242a8 8 0 0 0-1.071.39a6.6 6.6 0 0 0-.928.519q-.21.143-.399.298q-.186.155-.35.32a.5.5 0 0 1-.712-.7q.198-.202.424-.39q.225-.186.474-.355a7 7 0 0 1 1.076-.602a8 8 0 0 1 1.215-.443a9 9 0 0 1 1.31-.27A10 10 0 0 1 10 6.89a10 10 0 0 1 1.357.09a10 10 0 0 1 1.31.27a9 9 0 0 1 1.215.443a7.6 7.6 0 0 1 1.076.602q.249.17.474.355q.226.188.424.39',
-            'M17.873 6.555a.5.5 0 1 1-.746.667a7 7 0 0 0-.492-.496a8 8 0 0 0-.557-.46a9 9 0 0 0-1.29-.794a9.5 9.5 0 0 0-1.484-.594a10.6 10.6 0 0 0-1.617-.366A11.4 11.4 0 0 0 10 4.389a12 12 0 0 0-1.687.123a11 11 0 0 0-1.617.366a10 10 0 0 0-1.483.595a9 9 0 0 0-.673.374a8 8 0 0 0-.618.42q-.294.22-.557.46q-.263.239-.492.495a.5.5 0 1 1-.746-.667q.264-.294.564-.568t.632-.521q.332-.249.694-.471a10 10 0 0 1 1.545-.775a11 11 0 0 1 1.709-.53a12 12 0 0 1 1.808-.268a12.7 12.7 0 0 1 2.754.1a12 12 0 0 1 1.767.401a11 11 0 0 1 1.635.656q.387.194.749.416q.36.222.693.47q.333.249.632.522q.3.274.564.568M11.75 15.25a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0',
-            'M1.15 1.878a.514.514 0 0 1 .728-.727l16.971 16.971a.514.514 0 0 1-.727.727z',
-        ],
-    },
-    check: {
-        view: '2.44 2.94 14.12 14.12',
-        d: [
-            'm14.937 5.743l-5 9c-.324.583-1.198.097-.874-.486l5-9c.324-.583 1.198-.097.874.486',
-            'm4.812 10.11l5 4c.52.416-.104 1.197-.624.78l-5-4c-.52-.416.104-1.197.624-.78',
-        ],
-    },
-    close: {
-        view: '3.1 3.1 13.79 13.79',
-        d: [
-            'M6.854 13.854a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708.708z',
-            'M6.146 6.854a.5.5 0 1 1 .708-.708l7 7a.5.5 0 0 1-.708.708z',
-        ],
-    },
-    info: {
-        view: '-2.29 -2.29 30.59 30.59',
-        d: [
-            'M13.25 10.75a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75',
-            'M14.5 7.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0',
-            'M13 24.5c6.351 0 11.5-5.149 11.5-11.5S19.351 1.5 13 1.5S1.5 6.649 1.5 13S6.649 24.5 13 24.5m0 1c6.904 0 12.5-5.596 12.5-12.5S19.904.5 13 .5S.5 6.096.5 13S6.096 25.5 13 25.5',
-        ],
-    },
-    warning: {
-        view: '-2.29 -2.29 30.59 30.59',
-        d: [
-            'M13.25 5.25A.75.75 0 0 1 14 6v9a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75',
-            'M14.5 19.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0',
-            'M13 24.5c6.351 0 11.5-5.149 11.5-11.5S19.351 1.5 13 1.5S1.5 6.649 1.5 13S6.649 24.5 13 24.5m0 1c6.904 0 12.5-5.596 12.5-12.5S19.904.5 13 .5S.5 6.096.5 13S6.096 25.5 13 25.5',
-        ],
-    },
-    error: {
-        view: '0.38 0.38 19.23 19.23',
-        d: [
-            'M10 3.5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13M2.5 10a7.5 7.5 0 1 1 15 0a7.5 7.5 0 0 1-15 0',
-            'M15.304 4.697a.5.5 0 0 1 0 .707l-9.9 9.9a.5.5 0 1 1-.707-.707l9.9-9.9a.5.5 0 0 1 .707 0',
-        ],
-    },
-    expand: {
-        view: '2.95 2.95 14.1 14.1',
-        d: [
-            'M11.354 9.354a.5.5 0 0 1-.708-.708l4-4a.5.5 0 0 1 .708.708zm-6 6a.5.5 0 0 1-.708-.708l4-4a.5.5 0 0 1 .708.708z',
-            'M5 15.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z',
-            'M5.5 15a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 1 0zm10-6a.5.5 0 0 1-1 0V5a.5.5 0 0 1 1 0z',
-            'M11 5.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z',
-        ],
-    },
-    download: {
-        view: '-0.26 0.25 20.52 20.52',
-        d: [
-            'M11 3h-1a4 4 0 0 0-3.874 3H6a4 4 0 1 0 0 8h8a4 4 0 0 0 .899-7.899A4 4 0 0 0 11 3M6.901 7l.193-.75A3 3 0 0 1 10 4h1c1.405 0 2.614.975 2.924 2.325l.14.61l.61.141A3.001 3.001 0 0 1 14 13H6a3 3 0 1 1 0-6z',
-            'M10 10a.5.5 0 0 1 1 0v7.5a.5.5 0 0 1-1 0z',
-            'M12.688 15.11a.5.5 0 0 1 .624.78l-2.5 2a.5.5 0 1 1-.624-.78z',
-            'M7.688 15.89a.5.5 0 0 1 .624-.78l2.5 2a.5.5 0 1 1-.624.78z',
-        ],
-    },
-    image: {
-        view: '-0.9 -0.9 21.79 21.79',
-        d: [
-            'M8 8a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 1a2 2 0 1 0 0-4a2 2 0 0 0 0 4',
-            'M7.5 10.678L5.59 13.25H7.5l1.91 1H5.59a1 1 0 0 1-.802-1.596l1.909-2.572a1 1 0 0 1 1.606 0l.955 1.286l-.803.596z',
-            'M14.257 13.25L11.25 9.778L8.243 13.25zm-2.251-4.127a1 1 0 0 0-1.512 0l-3.007 3.472a1 1 0 0 0 .756 1.655h6.014a1 1 0 0 0 .756-1.655z',
-            'M17 2.5H3a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5m-14-1A1.5 1.5 0 0 0 1.5 3v14A1.5 1.5 0 0 0 3 18.5h14a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 17 1.5z',
-        ],
-    },
-    bolt: {
-        view: '-0.26 0.24 20.52 20.52',
-        d: [
-            'M15 8.5h-3.813l2.273-5.303A.5.5 0 0 0 13 2.5H8a.5.5 0 0 0-.46.303l-3 7A.5.5 0 0 0 5 10.5h2.474l-2.938 7.314c-.2.497.417.918.807.55l5.024-4.743l4.958-4.241A.5.5 0 0 0 15 8.5m-4.571 1h3.217l-3.948 3.378l-3.385 3.195l2.365-5.887a.5.5 0 0 0-.464-.686H5.758l2.572-6h3.912L9.969 8.803a.5.5 0 0 0 .46.697',
-        ],
-    },
-    speaker: {
-        view: '-0.76 -1.26 20.51 20.51',
-        d: [
-            'M9.672 2.123L5.399 5.84H2a.5.5 0 0 0-.5.5v5.2a.5.5 0 0 0 .5.5h3.295l4.375 3.835a.5.5 0 0 0 .83-.376v-13a.5.5 0 0 0-.828-.377M5.884 6.745L9.5 3.598v10.799L6.014 11.34a.5.5 0 0 0-.458-.3H2.5v-4.2h2.894a.49.49 0 0 0 .49-.096',
-            'M13.326 11.88a.5.5 0 0 1-.652-.76q.06-.05.117-.11c.157-.162.295-.366.407-.602c.195-.409.302-.896.302-1.408c0-.817-.273-1.558-.709-2.01a2 2 0 0 0-.117-.11a.5.5 0 0 1 .652-.76q.096.083.185.176c.624.647.989 1.639.989 2.704c0 .66-.14 1.293-.399 1.838c-.157.33-.356.624-.59.866q-.09.093-.185.175',
-            'M14.274 14.918a.5.5 0 0 1-.548-.836a6.3 6.3 0 0 0 1.359-1.208a6.1 6.1 0 0 0 .942-1.537A5.9 5.9 0 0 0 16.5 9a6 6 0 0 0-.267-1.773a6 6 0 0 0-.783-1.62a6.1 6.1 0 0 0-1.232-1.33a6 6 0 0 0-.492-.359a.5.5 0 0 1 .548-.836a7.3 7.3 0 0 1 2.002 1.961a7.1 7.1 0 0 1 .913 1.889A7 7 0 0 1 17.5 9a7 7 0 0 1-.311 2.068a7 7 0 0 1-1.338 2.45a7.2 7.2 0 0 1-1.577 1.4',
-        ],
-    },
-    mic: {
-        view: '0.39 -0.12 19.23 19.23',
-        d: [
-            'M7.75 4.25a2.25 2.25 0 0 1 4.5 0v3.5a2.25 2.25 0 0 1-4.5 0z',
-            'M10 17c-2.48 0-4-.217-4-1s1.52-1 4-1s4 .217 4 1s-1.52 1-4 1',
-            'M9.5 12.5h1V16h-1z',
-            'M14 7.5a.5.5 0 0 1 1 0v1.65c0 2.421-2.254 4.35-5 4.35s-5-1.929-5-4.35V7.5a.5.5 0 0 1 1 0v1.65c0 1.831 1.775 3.35 4 3.35s4-1.519 4-3.35z',
-        ],
-    },
-    back: {
-        view: '2.96 2.95 14.09 14.09',
-        d: [
-            'M8.653 14.384a.5.5 0 0 1-.704-.064l-3.333-4a.5.5 0 0 1 .768-.64l3.333 4a.5.5 0 0 1-.064.704',
-            'M8.653 5.616a.5.5 0 0 1 .064.704l-3.333 4a.5.5 0 0 1-.768-.64l3.333-4a.5.5 0 0 1 .704-.064',
-            'M5 10a.5.5 0 0 1 .5-.5H15a.5.5 0 0 1 0 1H5.5A.5.5 0 0 1 5 10',
-        ],
-    },
-    spinner: {
-        view: '2.03 1.03 17.93 17.93',
-        d: [
-            'M13.375 5.038a.5.5 0 0 1-.564.827A5 5 0 1 0 15 10a.5.5 0 0 1 1 0a6 6 0 1 1-2.626-4.962',
-            'M12.769 11.585a.5.5 0 1 1-.539-.842l3.482-2.227a.5.5 0 1 1 .539.842z',
-            'M17.947 12.114a.5.5 0 0 1-.913.407l-1.509-3.38a.5.5 0 1 1 .914-.408z',
-        ],
-    },
-    folder: {
-        view: '-0.26 -0.01 20.51 20.51',
-        d: [
-            'M15.5 5.5h-5.281L9.51 4.26A2.5 2.5 0 0 0 7.34 3H4.5A2.5 2.5 0 0 0 2 5.5V15a2.5 2.5 0 0 0 2.5 2.5h11A2.5 2.5 0 0 0 18 15V8a2.5 2.5 0 0 0-2.5-2.5m-11 11A1.5 1.5 0 0 1 3 15V5.5A1.5 1.5 0 0 1 4.5 4h2.84a1.5 1.5 0 0 1 1.302.756l.852 1.492a.5.5 0 0 0 .435.252H15.5A1.5 1.5 0 0 1 17 8v7a1.5 1.5 0 0 1-1.5 1.5z',
-        ],
-    },
-    book: {
-        view: '-1.76 -1.76 23.53 23.53',
-        d: [
-            'M10.08 4.304L2.244 3.019A1.5 1.5 0 0 0 .5 4.5v9.738a1.5 1.5 0 0 0 1.268 1.482l8.155 1.275a.5.5 0 0 0 .577-.494V4.797a.5.5 0 0 0-.42-.493m-8-.298L9.5 5.222v10.694L1.923 14.73a.5.5 0 0 1-.423-.493V4.5a.5.5 0 0 1 .58-.494',
-            'M18 3a1.5 1.5 0 0 0-.243.02L9.92 4.303a.5.5 0 0 0-.419.493V16.5a.5.5 0 0 0 .577.494l8.155-1.275a1.5 1.5 0 0 0 1.268-1.482V4.5A1.5 1.5 0 0 0 18 3m.077 11.73L10.5 15.917V5.222l7.42-1.216a.5.5 0 0 1 .58.494v9.737a.5.5 0 0 1-.423.493',
-        ],
-    },
-    eye: {
-        view: '-0.9 -1.4 21.8 21.8',
-        d: [
-            'M10 16c4.658 0 8.5-2.161 8.5-5S14.658 6 10 6s-8.5 2.161-8.5 5s3.842 5 8.5 5m0-9c4.179 0 7.5 1.868 7.5 4s-3.321 4-7.5 4s-7.5-1.868-7.5-4S5.821 7 10 7',
-            'M9.5 3.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0zm4.01.402a.5.5 0 0 1 .98.196l-.5 2.5a.5.5 0 0 1-.98-.196zm-7.02 0a.5.5 0 0 0-.98.196l.5 2.5a.5.5 0 0 0 .98-.196zM2.429 5.243a.5.5 0 0 0-.858.514l1.5 2.5a.5.5 0 0 0 .858-.514zm15.142 0a.5.5 0 1 1 .858.514l-1.5 2.5a.5.5 0 1 1-.858-.514zM13 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0',
-        ],
-    },
-    /* The same eye with a line through it. Pepicons' `eye-off`, but drawn from
-       THIS file's `eye` plus the slash rather than copied whole: the set has
-       redrawn its lashes since the open eye was taken, and a pair that toggles
-       in one button must differ by the slash alone or the eye appears to jump.
-       For the same reason it shares `eye`'s `view` instead of a measured one --
-       the slash sits inside that box (0.8..18.5 on both axes), so nothing is
-       clipped, and the body of the eye does not move when the state does. */
-    'eye-off': {
-        view: '-0.9 -1.4 21.8 21.8',
-        d: [
-            'M10 16c4.658 0 8.5-2.161 8.5-5S14.658 6 10 6s-8.5 2.161-8.5 5s3.842 5 8.5 5m0-9c4.179 0 7.5 1.868 7.5 4s-3.321 4-7.5 4s-7.5-1.868-7.5-4S5.821 7 10 7',
-            'M9.5 3.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0zm4.01.402a.5.5 0 0 1 .98.196l-.5 2.5a.5.5 0 0 1-.98-.196zm-7.02 0a.5.5 0 0 0-.98.196l.5 2.5a.5.5 0 0 0 .98-.196zM2.429 5.243a.5.5 0 0 0-.858.514l1.5 2.5a.5.5 0 0 0 .858-.514zm15.142 0a.5.5 0 1 1 .858.514l-1.5 2.5a.5.5 0 1 1-.858-.514zM13 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0',
-            'M1.15 1.878a.514.514 0 0 1 .728-.727l16.971 16.971a.514.514 0 0 1-.727.727z',
-        ],
-    },
-    palette: {
-        view: '-2.13 -2.1 23.53 23.53',
-        d: [
-            'M14.725 13.334c.97-3.623-1.336-7.377-5.135-8.395C5.323 3.795-.725 6.762.544 10.35c.383 1.084 1.134 1.341 2.682 1.363l.108.002c1.1.013 1.471.1 1.678.436c.214.348.216.756.054 1.788c-.067.422-.088.569-.113.794c-.145 1.3.067 2.274.89 3.16c2.584 2.784 7.788-.48 8.882-4.56M1.486 10.017c-.908-2.57 4.217-5.084 7.845-4.112c3.277.878 5.252 4.093 4.428 7.17c-.924 3.446-5.287 6.182-7.183 4.14c-.594-.64-.745-1.333-.63-2.37c.024-.205.044-.344.108-.75c.2-1.275.197-1.836-.19-2.467c-.465-.756-1.059-.894-2.517-.912l-.107-.002c-1.159-.016-1.562-.154-1.754-.697',
-            'M4.75 9.5a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m4 0a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m2.5 3a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5M9.75 16a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m3.62-12.395a1 1 0 0 1 1.371.443l4.093 8.4a.652.652 0 0 1-1.149.611l-4.708-8.07a1 1 0 0 1 .394-1.384',
-            'M11.538 3.484c.486.915 1.305 1.171 2.097.75c.791-.42 1.038-1.243.551-2.158C13.63 1.028 12.438.078 11.648.497s-.668 1.939-.11 2.987m.882-.47a3.2 3.2 0 0 1-.32-1.137a2 2 0 0 1 .018-.496l.018.009c.05.024.205.096.403.254c.302.241.602.596.764.901c.229.43.164.646-.138.807c-.3.16-.516.092-.745-.337',
-        ],
-    },
-    stars: {
-        view: '-1.95 -1.76 23.53 23.53',
-        d: [
-            'M9 .5a.5.5 0 0 1 .479.354l1.928 6.333l5.765 2.107a.5.5 0 0 1 .013.934l-5.727 2.275l-1.979 6.64a.5.5 0 0 1-.958 0l-1.979-6.64l-5.727-2.275a.5.5 0 0 1 .013-.934l5.765-2.107L8.522.854A.5.5 0 0 1 9 .5m0 2.216l-1.523 5a.5.5 0 0 1-.307.324L2.403 9.784l4.734 1.88a.5.5 0 0 1 .294.322l1.57 5.264l1.568-5.264a.5.5 0 0 1 .294-.322l4.734-1.88l-4.767-1.742a.5.5 0 0 1-.307-.324z',
-            'M16.75 19.12c-.1 0-.19-.08-.2-.18c-.18-1.82-.32-2.4-1.99-2.56c-.1-.01-.18-.1-.18-.2s.08-.19.18-.2c1.71-.16 1.81-.6 1.99-2.42c0-.1.1-.18.2-.18s.19.08.2.18c.18 1.82.29 2.26 1.99 2.42c.1.01.18.1.18.2s-.08.19-.18.2c-1.68.16-1.81.74-1.99 2.57c0 .1-.09.18-.2.18z',
-        ],
-    },
-    wrench: {
-        view: '-0.17 -0.74 21.07 21.07',
-        d: [
-            'M11.876 7.574a3 3 0 0 0-.384-.382c.295-1.338-.066-2.802-1.014-3.93c-1.182-1.41-3.03-2-4.668-1.523a.5.5 0 0 0-.243.801l1.741 2.076a.5.5 0 0 1-.061.704l-.581.488a.5.5 0 0 1-.705-.062L4.22 3.671a.5.5 0 0 0-.832.1c-.755 1.531-.494 3.453.689 4.862c.935 1.114 2.29 1.724 3.645 1.683q.138.251.324.471l5.302 6.32a2.5 2.5 0 1 0 3.83-3.214zm-7.033.416c-.735-.875-1.016-1.99-.82-2.997l1.172 1.396a1.5 1.5 0 0 0 2.113.185l.582-.488a1.5 1.5 0 0 0 .184-2.113L6.903 2.577c1.025-.02 2.075.452 2.81 1.327c.813.97 1.077 2.24.732 3.34a.5.5 0 0 0 .208.571a2 2 0 0 1 .457.401l5.303 6.32a1.5 1.5 0 1 1-2.299 1.928l-5.302-6.32a2 2 0 0 1-.323-.538a.5.5 0 0 0-.522-.31c-1.133.133-2.32-.348-3.124-1.306',
-        ],
-    },
-    file: {
-        view: '-1.54 -1.54 23.08 23.08',
-        d: [
-            'M6.5 12a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zm0 3a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1z',
-            'M11.185 1H4.5A1.5 1.5 0 0 0 3 2.5v15A1.5 1.5 0 0 0 4.5 19h11a1.5 1.5 0 0 0 1.5-1.5V7.202a1.5 1.5 0 0 0-.395-1.014l-4.314-4.702A1.5 1.5 0 0 0 11.185 1M4 2.5a.5.5 0 0 1 .5-.5h6.685a.5.5 0 0 1 .369.162l4.314 4.702a.5.5 0 0 1 .132.338V17.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5z',
-            'M11 7h5.5a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 1 0z',
-        ],
-    },
-    cloud: {
-        view: '-0.26 -1.76 20.52 20.52',
-        d: [
-            'M11 3h-1a4 4 0 0 0-3.874 3H6a4 4 0 1 0 0 8h8a4 4 0 0 0 .899-7.899A4 4 0 0 0 11 3M6.901 7l.193-.75A3 3 0 0 1 10 4h1c1.405 0 2.614.975 2.924 2.325l.14.61l.61.141A3.001 3.001 0 0 1 14 13H6a3 3 0 1 1 0-6z',
-        ],
-    },
-};
+import { ICONS } from './icons';
 export default function Icon({ name, size = 18, className, title, }) {
-    const g = GLYPHS[name];
+    /* The table with its measured views is `icons.ts`, beside this file. */
+    const g = ICONS[name];
+    if (!g)
+        return null;
     return (_jsxs("svg", { className: className, width: size, height: size, viewBox: g.view, fill: "currentColor", 
         /* Pepicons paths are self-intersecting outlines; without evenodd the
            counters fill in and a gear becomes a blob. */

package/dist/components/Illustration.js

@@ -34,9 +34,8 @@ import { ILLUSTRATION_SVG } from '../illustrations';
    not exist. `scripts/build-illustrations.mjs` generates a plain module
    instead, which removes the dependency on a bundler rather than documenting
    it. */
-const BY_NAME = ILLUSTRATION_SVG;
 export default function Illustration({ name, size = 160, alt, className, }) {
-    const svg = BY_NAME[name];
+    const svg = ILLUSTRATION_SVG[name];
     if (!svg)
         return null;
     return (_jsx("span", { className: `illo${className ? ` ${className}` : ''}`, style: { height: size }, role: alt ? 'img' : undefined, "aria-label": alt, "aria-hidden": alt ? undefined : true, 

package/dist/components/brandMarks.d.ts

@@ -5,7 +5,9 @@
  * product's logo -- it is the place every product's mark lives, and adding a
  * brand to the system is adding a row here. A mark is a path in its own ink
  * box, drawn with `currentColor` at the stroke weight it was designed at, so
- * the stylesheet decides the colour and a theme can move it.
+ * the stylesheet decides the colour and a theme can move it. Or filled: a
+ * mark that is a figure rather than a line carries a fill rule instead of a
+ * weight, and `Brand` draws whichever it is handed.
  *
  * A product that animates its mark does that in its own code: tf's lowercase
  * tf becomes a cog under the pointer, and that morph is
@@ -17,6 +19,29 @@
  * A sibling module rather than part of `Brand.tsx`, so that file keeps its
  * Fast Refresh boundary (`fastRefresh.test.ts`).
  */
+/**
+ * A mark: one path in its own ink box, stroked or filled.
+ *
+ * tf's is a stroke, one line at the weight it was drawn at. valet's is a
+ * figure: a filled badge with the shirt cut out of it and the bow drawn back
+ * inside the cut, which is one path under `evenodd` -- the jacket, the shirt
+ * and the bow are subpaths, and the rule makes the shirt a hole the surface
+ * shows through. Two shapes of the same thing, so `Brand` draws either in
+ * `currentColor` and a product supplies the one its mark is.
+ */
+export type Mark = StrokeMark | FillMark;
+/** One line, at the weight it was drawn at. */
+export interface StrokeMark {
+    view: string;
+    d: string;
+    stroke: number;
+}
+/** One filled path; `fill` is the rule that decides which subpaths are holes. */
+export interface FillMark {
+    view: string;
+    d: string;
+    fill: 'evenodd' | 'nonzero';
+}
 export declare const BRAND_MARKS: {
     /** A lowercase tf in one unbroken stroke -- down the t, round the foot, up
      *  the f, over its head, and back along the crossbar through both stems.
@@ -27,6 +52,20 @@ export declare const BRAND_MARKS: {
         readonly d: "M372 262V620A100 100 0 0 0 572 620V330A92 92 0 0 1 756 330A100 100 0 0 1 656 430H296";
         readonly stroke: 96;
     };
+    /** valet's badge. The rounded square is the jacket, the shirt is cut out of
+     *  it in an open collar that runs to the top edge, and the bow tie floats in
+     *  the shirt just below the collar. One path under `evenodd` with five
+     *  subpaths -- the jacket, the shirt, two wings and the knot -- so the shirt
+     *  is a hole the surface shows through and the bow is drawn back inside it.
+     *  Drawn 24-first, which is the header size: the 60 units of jacket over the
+     *  bow are the pixel that keeps it a bow rather than a notch in the edge, and
+     *  the collar rolls outward at the top so the shirt reads as lapels rather
+     *  than a V. The view is the canvas, because the jacket fills it. */
+    readonly valet: {
+        readonly view: "0 0 1024 1024";
+        readonly d: "M236 0 H788 A236 236 0 0 1 1024 236 V788 A236 236 0 0 1 788 1024 H236 A236 236 0 0 1 0 788 V236 A236 236 0 0 1 236 0 Z M234.2 0 L789.8 0 A16 16 0 0 1 805 21.1 C843.3 285.6 625.5 464.7 578.4 700.8 A70 70 0 0 1 445.6 700.8 C398.5 464.7 180.7 285.6 219 21.1 A16 16 0 0 1 234.2 0 Z M444 164.5 C376 162.7 327.4 127.5 322 127.5 A40 40 0 0 0 282 167.5 L282 272.5 A40 40 0 0 0 322 312.5 C327.4 312.5 376 277.4 444 275.5 Z M580 164.5 C648 162.7 696.6 127.5 702 127.5 A40 40 0 0 1 742 167.5 L742 272.5 A40 40 0 0 1 702 312.5 C696.6 312.5 648 277.4 580 275.5 Z M512 60 A68 68 0 0 1 580 128 V232 A68 68 0 0 1 512 300 A68 68 0 0 1 444 232 V128 A68 68 0 0 1 512 60 Z";
+        readonly fill: "evenodd";
+    };
 };
 export type BrandName = keyof typeof BRAND_MARKS;
 export declare const BRAND_NAMES: BrandName[];

package/dist/components/brandMarks.js

@@ -1,22 +1,3 @@
-/**
- * The marks, one per wtfalch product.
- *
- * `@wtfalch/design` serves more than one product, so `Brand` cannot be one
- * product's logo -- it is the place every product's mark lives, and adding a
- * brand to the system is adding a row here. A mark is a path in its own ink
- * box, drawn with `currentColor` at the stroke weight it was designed at, so
- * the stylesheet decides the colour and a theme can move it.
- *
- * A product that animates its mark does that in its own code: tf's lowercase
- * tf becomes a cog under the pointer, and that morph is
- * `tf/dashboard/src/components/Brand.tsx`, not this package's business. What
- * ships here is the still mark, which is also what the product's app icon is
- * rendered from -- tf's `brandMark.test.ts` holds the icon, this row and its
- * own animated copy to one path.
- *
- * A sibling module rather than part of `Brand.tsx`, so that file keeps its
- * Fast Refresh boundary (`fastRefresh.test.ts`).
- */
 export const BRAND_MARKS = {
     /** A lowercase tf in one unbroken stroke -- down the t, round the foot, up
      *  the f, over its head, and back along the crossbar through both stems.
@@ -27,5 +8,19 @@ export const BRAND_MARKS = {
         d: 'M372 262V620A100 100 0 0 0 572 620V330A92 92 0 0 1 756 330A100 100 0 0 1 656 430H296',
         stroke: 96,
     },
+    /** valet's badge. The rounded square is the jacket, the shirt is cut out of
+     *  it in an open collar that runs to the top edge, and the bow tie floats in
+     *  the shirt just below the collar. One path under `evenodd` with five
+     *  subpaths -- the jacket, the shirt, two wings and the knot -- so the shirt
+     *  is a hole the surface shows through and the bow is drawn back inside it.
+     *  Drawn 24-first, which is the header size: the 60 units of jacket over the
+     *  bow are the pixel that keeps it a bow rather than a notch in the edge, and
+     *  the collar rolls outward at the top so the shirt reads as lapels rather
+     *  than a V. The view is the canvas, because the jacket fills it. */
+    valet: {
+        view: '0 0 1024 1024',
+        d: 'M236 0 H788 A236 236 0 0 1 1024 236 V788 A236 236 0 0 1 788 1024 H236 A236 236 0 0 1 0 788 V236 A236 236 0 0 1 236 0 Z M234.2 0 L789.8 0 A16 16 0 0 1 805 21.1 C843.3 285.6 625.5 464.7 578.4 700.8 A70 70 0 0 1 445.6 700.8 C398.5 464.7 180.7 285.6 219 21.1 A16 16 0 0 1 234.2 0 Z M444 164.5 C376 162.7 327.4 127.5 322 127.5 A40 40 0 0 0 282 167.5 L282 272.5 A40 40 0 0 0 322 312.5 C327.4 312.5 376 277.4 444 275.5 Z M580 164.5 C648 162.7 696.6 127.5 702 127.5 A40 40 0 0 1 742 167.5 L742 272.5 A40 40 0 0 1 702 312.5 C696.6 312.5 648 277.4 580 275.5 Z M512 60 A68 68 0 0 1 580 128 V232 A68 68 0 0 1 512 300 A68 68 0 0 1 444 232 V128 A68 68 0 0 1 512 60 Z',
+        fill: 'evenodd',
+    },
 };
 export const BRAND_NAMES = Object.keys(BRAND_MARKS);

package/dist/components/icons.d.ts

@@ -0,0 +1,37 @@
+import type { IconName } from './iconNames';
+/** A glyph, with the viewBox it is drawn *at* rather than the one it shipped in. */
+export interface Glyph {
+    /** `x y w h`, measured. Not the source viewBox. */
+    view: string;
+    /** Filled outline paths. */
+    d: string[];
+    /** Dots drawn as circles, for a glyph that has them. */
+    dots?: [number, number, number][];
+}
+/**
+ * The icon set, as data. The system's, shared by every product the way
+ * Button is; `Icon.tsx` keeps the reasons for the set and its weight.
+ *
+ * A glyph, with the viewBox it is drawn *at* rather than the one it shipped in.
+ *
+ * **This is the whole reason there is a `view` per icon.** Pepicons does not
+ * draw to a consistent optical size: measured against its own grid, `times`
+ * fills 40% of its box while `wifi-off` fills 90% and the circled alert glyphs
+ * fill 96%. Rendered at one `size` that is a 2.4x spread -- a close button half
+ * the size of the gear beside it, which reads as broken rather than as
+ * hand-drawn.
+ *
+ * So each `view` is the glyph's measured bounding box, re-centred and grown
+ * until the drawing fills 78% of it. Two deliberate exceptions:
+ *
+ * - `minimize` targets 55%. It is a bar, not a shape, and a bar stretched to
+ *   78% of the box stops reading as "minimise" and starts reading as a divider.
+ * - The scale is clamped to 0.85x-1.45x. Unclamped, `close` came out at 2x and
+ *   its strokes went visibly heavier than every neighbour -- trading one
+ *   inconsistency for another. Clamped, the set sits together at 14px.
+ *
+ * Numbers came from `getBBox()` on each glyph, not from eyeballing. If you add
+ * an icon, measure it the same way; a viewBox copied from the source file will
+ * be the wrong size and only slightly, which is the hardest kind to notice.
+ */
+export declare const ICONS: Record<IconName, Glyph>;