@wtfalch/design 0.2.0 → 0.3.1

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.js';
+/** 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>;

package/dist/components/icons.js

@@ -0,0 +1,253 @@
+/**
+ * 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 const ICONS = {
+    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',
+        ],
+    },
+};

package/dist/index.d.ts

@@ -16,59 +16,69 @@
  * exists to prevent, and several of them are the only written record of a bug
  * that shipped. They are worth more than the code around them.
  */
-export { default as Brand } from './components/Brand';
-export { BRAND_NAMES } from './components/brandMarks';
-export type { BrandName } from './components/brandMarks';
-export { default as Button } from './components/Button';
-export type { Props as ButtonProps } from './components/Button';
-export { default as Callout } from './components/Callout';
-export { default as Card } from './components/Card';
-export { default as Checkbox } from './components/Checkbox';
-export { DangerAction, default as DangerZone } from './components/DangerZone';
-export { default as Dialog } from './components/Dialog';
-export { default as Empty } from './components/Empty';
-export { default as Field } from './components/Field';
-export type { FieldWiring } from './components/Field';
-export { default as Icon } from './components/Icon';
-export { ICON_NAMES } from './components/iconNames';
-export type { IconName } from './components/iconNames';
-export { default as Illustration } from './components/Illustration';
-export { default as Input } from './components/Input';
-export type { Props as InputProps } from './components/Input';
-export { default as Markdown } from './components/Markdown';
-export { default as Modal } from './components/Modal';
-export { default as Pill } from './components/Pill';
-export { default as Progress } from './components/Progress';
-export { Row, Rows } from './components/Rows';
-export { default as Select } from './components/Select';
-export { default as SizeGrid } from './components/SizeGrid';
-export { default as Skeleton } from './components/Skeleton';
-export { default as Slider } from './components/Slider';
-export { default as Table } from './components/Table';
-export type { Column } from './components/Table';
-export { default as Tabs } from './components/Tabs';
-export type { Tab, TabGroup } from './components/Tabs';
-export { default as Textarea } from './components/Textarea';
-export type { Props as TextareaProps } from './components/Textarea';
-export { Toast, ToastHost, useToast } from './components/Toast';
-export { default as Toggle } from './components/Toggle';
-export { default as Tooltip } from './components/Tooltip';
-export { default as Tour } from './components/Tour';
-export type { TourStop } from './components/Tour';
+export { default as Brand } from './components/Brand.js';
+/** Every product's mark by name, and the path itself for an icon cut from
+ *  the same drawing. */
+export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks.js';
+export type { BrandName, FillMark, Mark, StrokeMark } from './components/brandMarks.js';
+export { default as Button } from './components/Button.js';
+export type { Props as ButtonProps } from './components/Button.js';
+export { default as Callout } from './components/Callout.js';
+export { default as Card } from './components/Card.js';
+export { default as Checkbox } from './components/Checkbox.js';
+export { DangerAction, default as DangerZone } from './components/DangerZone.js';
+export { default as Dialog } from './components/Dialog.js';
+export { default as Empty } from './components/Empty.js';
+export { default as Field } from './components/Field.js';
+export type { FieldWiring } from './components/Field.js';
+export { default as Icon } from './components/Icon.js';
+export { ICON_NAMES } from './components/iconNames.js';
+export type { IconName } from './components/iconNames.js';
+export { default as Illustration } from './components/Illustration.js';
+export { default as Input } from './components/Input.js';
+export type { Props as InputProps } from './components/Input.js';
+export { default as Markdown } from './components/Markdown.js';
+export { default as Modal } from './components/Modal.js';
+export { default as Pill } from './components/Pill.js';
+export { default as Progress } from './components/Progress.js';
+export { Row, Rows } from './components/Rows.js';
+export { default as Select } from './components/Select.js';
+export { default as SizeGrid } from './components/SizeGrid.js';
+export { default as Skeleton } from './components/Skeleton.js';
+export { default as Slider } from './components/Slider.js';
+export { default as Table } from './components/Table.js';
+export type { Column } from './components/Table.js';
+export { default as Tabs } from './components/Tabs.js';
+export type { Tab, TabGroup } from './components/Tabs.js';
+export { default as Textarea } from './components/Textarea.js';
+export type { Props as TextareaProps } from './components/Textarea.js';
+export { Toast, ToastHost, useToast } from './components/Toast.js';
+export { default as Toggle } from './components/Toggle.js';
+export { default as Tooltip } from './components/Tooltip.js';
+export { default as Tour } from './components/Tour.js';
+export type { TourStop } from './components/Tour.js';
 /** The tour's memory. `forgetTour` is what onboarding calls so a config reset
  *  replays the tour rather than leaving it suppressed by a browser that has
  *  seen it. */
-export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker.js';
 /** The art. Its own module because it is ~200 KB of inlined SVG — referenced
  *  only by `Illustration`, so a bundler that drops the component drops the art
  *  with it. */
-export { ILLUSTRATIONS } from './illustrations';
-export type { IllustrationName } from './illustrations';
+export { ILLUSTRATIONS } from './illustrations.js';
+export type { IllustrationName } from './illustrations.js';
 /** The focus trap, for a window that genuinely is not `Modal`'s shape. Use
  *  `Modal` first: every one of the app's eight hand-built modals shipped
  *  without a trap, which is what this exists to stop happening again. */
-export { useTrapFocus } from './hooks/useTrapFocus';
-export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
-export type { Theme, ThemeTokens } from './themes';
+export { useTrapFocus } from './hooks/useTrapFocus.js';
+export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes/index.js';
+export type { Theme, ThemeTokens } from './themes/index.js';
+/** A theme as the rule a consumer ships for first paint, generated so it
+ *  cannot drift from the object; and a product's whole stylesheet the same way. */
+export { productCss, productStylesheet, themeCss, themeId } from './themes/css.js';
 /** The measurement behind the contrast rule, for a theme that is yours. */
-export { luminance, ratio } from './contrast';
+export { luminance, ratio } from './contrast.js';
+/** The products: the layer between the system and a theme. Each also ships
+ *  as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
+ *  `THEMES` and `applyTheme` are that product's. */
+export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products/index.js';
+export type { Product } from './products/index.js';

package/dist/index.js

@@ -16,51 +16,60 @@
  * exists to prevent, and several of them are the only written record of a bug
  * that shipped. They are worth more than the code around them.
  */
-export { default as Brand } from './components/Brand';
-export { BRAND_NAMES } from './components/brandMarks';
-export { default as Button } from './components/Button';
-export { default as Callout } from './components/Callout';
-export { default as Card } from './components/Card';
-export { default as Checkbox } from './components/Checkbox';
+export { default as Brand } from './components/Brand.js';
+/** Every product's mark by name, and the path itself for an icon cut from
+ *  the same drawing. */
+export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks.js';
+export { default as Button } from './components/Button.js';
+export { default as Callout } from './components/Callout.js';
+export { default as Card } from './components/Card.js';
+export { default as Checkbox } from './components/Checkbox.js';
 /* `DangerAction` is a component -- a row inside the zone -- and was exported as
    a type until the first consumer wrote `<DangerAction>` and TypeScript refused
    it (TS1362). Nothing in this repo renders one, which is how it went unseen. */
-export { DangerAction, default as DangerZone } from './components/DangerZone';
-export { default as Dialog } from './components/Dialog';
-export { default as Empty } from './components/Empty';
-export { default as Field } from './components/Field';
-export { default as Icon } from './components/Icon';
-export { ICON_NAMES } from './components/iconNames';
-export { default as Illustration } from './components/Illustration';
-export { default as Input } from './components/Input';
-export { default as Markdown } from './components/Markdown';
-export { default as Modal } from './components/Modal';
-export { default as Pill } from './components/Pill';
-export { default as Progress } from './components/Progress';
-export { Row, Rows } from './components/Rows';
-export { default as Select } from './components/Select';
-export { default as SizeGrid } from './components/SizeGrid';
-export { default as Skeleton } from './components/Skeleton';
-export { default as Slider } from './components/Slider';
-export { default as Table } from './components/Table';
-export { default as Tabs } from './components/Tabs';
-export { default as Textarea } from './components/Textarea';
-export { ToastHost, useToast } from './components/Toast';
-export { default as Toggle } from './components/Toggle';
-export { default as Tooltip } from './components/Tooltip';
-export { default as Tour } from './components/Tour';
+export { DangerAction, default as DangerZone } from './components/DangerZone.js';
+export { default as Dialog } from './components/Dialog.js';
+export { default as Empty } from './components/Empty.js';
+export { default as Field } from './components/Field.js';
+export { default as Icon } from './components/Icon.js';
+export { ICON_NAMES } from './components/iconNames.js';
+export { default as Illustration } from './components/Illustration.js';
+export { default as Input } from './components/Input.js';
+export { default as Markdown } from './components/Markdown.js';
+export { default as Modal } from './components/Modal.js';
+export { default as Pill } from './components/Pill.js';
+export { default as Progress } from './components/Progress.js';
+export { Row, Rows } from './components/Rows.js';
+export { default as Select } from './components/Select.js';
+export { default as SizeGrid } from './components/SizeGrid.js';
+export { default as Skeleton } from './components/Skeleton.js';
+export { default as Slider } from './components/Slider.js';
+export { default as Table } from './components/Table.js';
+export { default as Tabs } from './components/Tabs.js';
+export { default as Textarea } from './components/Textarea.js';
+export { ToastHost, useToast } from './components/Toast.js';
+export { default as Toggle } from './components/Toggle.js';
+export { default as Tooltip } from './components/Tooltip.js';
+export { default as Tour } from './components/Tour.js';
 /** The tour's memory. `forgetTour` is what onboarding calls so a config reset
  *  replays the tour rather than leaving it suppressed by a browser that has
  *  seen it. */
-export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker.js';
 /** The art. Its own module because it is ~200 KB of inlined SVG — referenced
  *  only by `Illustration`, so a bundler that drops the component drops the art
  *  with it. */
-export { ILLUSTRATIONS } from './illustrations';
+export { ILLUSTRATIONS } from './illustrations.js';
 /** The focus trap, for a window that genuinely is not `Modal`'s shape. Use
  *  `Modal` first: every one of the app's eight hand-built modals shipped
  *  without a trap, which is what this exists to stop happening again. */
-export { useTrapFocus } from './hooks/useTrapFocus';
-export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
+export { useTrapFocus } from './hooks/useTrapFocus.js';
+export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes/index.js';
+/** A theme as the rule a consumer ships for first paint, generated so it
+ *  cannot drift from the object; and a product's whole stylesheet the same way. */
+export { productCss, productStylesheet, themeCss, themeId } from './themes/css.js';
 /** The measurement behind the contrast rule, for a theme that is yours. */
-export { luminance, ratio } from './contrast';
+export { luminance, ratio } from './contrast.js';
+/** The products: the layer between the system and a theme. Each also ships
+ *  as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
+ *  `THEMES` and `applyTheme` are that product's. */
+export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products/index.js';