@wtfalch/design 0.1.0 → 0.2.0

package/README.md

@@ -1,7 +1,7 @@
 # @wtfalch/design
 
-Components on a fixed token vocabulary, so an app can look like itself without
-forking the stylesheet.
+wtfalch's design system: components on a fixed token vocabulary, so every
+product can look like itself without forking the stylesheet.
 
 ```bash
 pnpm add @wtfalch/design
@@ -125,10 +125,11 @@ theme on a light-mode laptop is not silently repainted.
 
 ## Status
 
-`0.1.0`. Twenty-eight components, every one of the 70 gallery specimens
+`0.2.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.
-The first consumer is [tf](https://github.com/wtfalch/tf), the app it came from.
+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.
 
 Requires React 19. Behaviour comes from
 [React Aria Components](https://react-spectrum.adobe.com/react-aria/); every

package/dist/components/Brand.d.ts

@@ -1,10 +1,28 @@
-export default function Brand({ className, title, cog, }: {
-    className?: string;
+import { type BrandName } from './brandMarks';
+/**
+ * A product's mark, at header size.
+ *
+ * One component for every wtfalch product: `name` picks the mark out of
+ * `brandMarks.ts`, and adding a product is adding a row there. The default is
+ * `tf` because it is the first, not because it is special.
+ *
+ * `currentColor`, so the stylesheet decides the colour and a theme can move
+ * it; the mark itself knows nothing about green. No `width` or `height`
+ * attributes either: the viewBox is the ink box, measured, and `.brand` sets
+ * a height off the type scale so the width follows the aspect.
+ *
+ * Still, on purpose. Until 0.2.0 this component also morphed tf's mark into a
+ * cog under the pointer, which made a shared package carry one product's
+ * animation. That morph is tf's own `Brand` now, layered over this path; a
+ * 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.
+ */
+export default function Brand({ name, title, className, }: {
+    /** Which product's mark. */
+    name?: BrandName;
     /** The product's name, which is what a screen reader should say the header
      *  starts with. There is no text beside this to repeat it. */
     title?: string;
-    /** Show the cog. Given, the caller decides -- the settings button wraps
-     *  the mark and hovers as a whole; left out, the mark watches its own
-     *  pointer. */
-    cog?: boolean;
+    className?: string;
 }): import("react").JSX.Element;

package/dist/components/Brand.js

@@ -1,212 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { BRAND_MARKS } from './brandMarks';
 /**
- * The wordmark: the app icon's mark, without the tile.
+ * A product's mark, at header size.
  *
- * 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. The path
- * is the one `desktop/build/icon.html` draws, and `test/brandMark.test.ts`
- * fails the moment the two differ. The header used to typeset "TF" to match
- * an icon that did the same, and the pair only stayed in step because a
- * comment in the icon asked the header to follow it.
+ * One component for every wtfalch product: `name` picks the mark out of
+ * `brandMarks.ts`, and adding a product is adding a row there. The default is
+ * `tf` because it is the first, not because it is special.
  *
  * `currentColor`, so the stylesheet decides the colour and a theme can move
  * it; the mark itself knows nothing about green. No `width` or `height`
  * attributes either: the viewBox is the ink box, measured, and `.brand` sets
  * a height off the type scale so the width follows the aspect.
  *
- * **Under the pointer it becomes a cog and turns.** The mark is one stroke
- * and a cog's outline is one stroke, so the two are sampled at the same
- * number of points along their length and the points are slid from one
- * shape to the other, frame by frame -- CSS cannot morph them, because a
- * path animation needs the same commands in the same order and a `V A V A A
- * H` has nothing in common with a hundred `L`s round a gear. Honoured by
- * `prefers-reduced-motion`: the mark stays the mark.
+ * Still, on purpose. Until 0.2.0 this component also morphed tf's mark into a
+ * cog under the pointer, which made a shared package carry one product's
+ * animation. That morph is tf's own `Brand` now, layered over this path; a
+ * 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.
  */
-const D = 'M372 262V620A100 100 0 0 0 572 620V330A92 92 0 0 1 756 330A100 100 0 0 1 656 430H296';
-/* The stroke's outer bounds, not the canvas: x 248..804, y 190..768. The
-   stroke is 96 wide, so 48 of cap and arc on every side is already in these. */
-const VIEW = '248 190 556 578';
-/* The cog, in the mark's own coordinates: centred on the ink box, teeth to
-   the box's edge. Six teeth, each a flat tip on two flanks over a root, as
-   one closed outline of `N` points -- the same `N` the mark is sampled at,
-   which is the whole trick. The stroke ends where it starts, and a round cap
-   on each end makes the seam invisible.
-
-   Eight teeth at two-thirds of the mark's weight -- the first version, and
-   the one kept. Six at full weight (#172) and seven at nearly full were
-   tried on William's "fatter, fewer teeth"; both lost the wheel: a thick
-   stroke fills the ring and the teeth become petals. "Can you not make it
-   look like the wheel we had?" This is that wheel.
-
-   Solid, since 2026-09-03. A stroked outline of a cog is a drawing of a
-   cog, and at header size it read as one -- "the uncanny valley where it
-   looks like a settings icon but isn't one". The morph is still stroke to
-   stroke, because that is the only way the points can slide; what changed
-   is the end of it: over the last quarter a fill comes up inside the
-   outline, with a round hole growing at the centre, and the stroke thins
-   to an edge. The result is the plain cog everyone recognises -- body,
-   hole, square teeth -- and the flanks are steeper than before so the
-   teeth are teeth and not petals once they are filled. Eight teeth again since
-   2026-09-03 -- nine and ten were tried once the cog was solid and both taken
-   back; 144 samples divide by eight. */
-const N = 144;
-const TEETH = 8;
-/* Every radius and stroke below is 0.9 of what it was on 2026-09-03: the
-   cog at the mark's full height read large beside the mark, 0.8 read
-   small, so a tenth off, proportions kept. */
-const CENTRE = { x: 526, y: 479 };
-const R_ROOT = 158;
-const R_TIP = 236;
-/* The hole, as a share of the tip radius: the reference cog's is about 0.42. */
-const R_HOLE = 104;
-/* The outline stroke rounds every corner of the filled polygon by half its
-   width -- a round join at each vertex. 40 left the teeth square; 64 was the
-   reference's rounding and a touch heavy. 48 now, sized with the teeth so
-   that a tooth is as wide as the mark's stroke: the tip arc at the outline's
-   outer edge is 0.22 of 2*pi*(262+24)/8 = 49, plus the outline's 48, is 97
-   against the mark's 96. The ring, root to hole, is 176+24-116 = 84. */
-const COG_STROKE = 43;
-/* A thin ring inside the hole, concentric, with clear ground between it and
-   the body -- the hub a cog wheel has and a plain disc with a hole does not.
-   Radius to the ring's centreline, and its stroke. */
-const R_HUB = 56;
-const HUB_STROKE = 20;
-const MARK_STROKE = 96;
-/* Where along the morph the fill starts coming up. Earlier and the fill
-   shows under a shape that is still mostly the mark, which is a blot. */
-const FILL_FROM = 0.72;
-function cogPoints() {
-    const out = [];
-    for (let i = 0; i < N; i++) {
-        const u = i / N;
-        const a = u * Math.PI * 2 - Math.PI / 2;
-        // Where in its tooth this point is: root, up the flank, along the tip,
-        // down the flank. The flanks are ramps rather than steps so the sampled
-        // outline has no corners the interpolation would cut.
-        const t = (u * TEETH) % 1;
-        let r;
-        // A tooth as wide as the mark's stroke -- see COG_STROKE.
-        // The base of a tooth spans 0.40 of its period and the tip 0.22, so each
-        // tooth narrows towards its tip -- the flanks lean in.
-        if (t < 0.3)
-            r = R_ROOT;
-        else if (t < 0.39)
-            r = R_ROOT + ((t - 0.3) / 0.09) * (R_TIP - R_ROOT);
-        else if (t < 0.61)
-            r = R_TIP;
-        else if (t < 0.7)
-            r = R_TIP - ((t - 0.61) / 0.09) * (R_TIP - R_ROOT);
-        else
-            r = R_ROOT;
-        out.push([CENTRE.x + r * Math.cos(a), CENTRE.y + r * Math.sin(a)]);
-    }
-    return out;
-}
-const COG = cogPoints();
-/* The cog's outline, started at the tooth and run in the direction that
-   keeps the points' journeys shortest. Point `i` of the mark slides to point
-   `i` of the cog, so where the cog's `i = 0` falls -- and which way round it
-   goes -- decides whether the mark unwinds into the ring or crumples through
-   it on the way. Every start and both directions are tried once, against
-   the mark as measured, and the one with the least total travel wins. */
-function aligned(mark) {
-    let best = COG;
-    let least = Number.POSITIVE_INFINITY;
-    for (const dir of [1, -1]) {
-        for (let start = 0; start < N; start++) {
-            let travel = 0;
-            for (let i = 0; i < N; i++) {
-                const c = COG[(((start + dir * i) % N) + N) % N];
-                const dx = c[0] - mark[i][0];
-                const dy = c[1] - mark[i][1];
-                travel += dx * dx + dy * dy;
-            }
-            if (travel < least) {
-                least = travel;
-                best = mark.map((_, i) => COG[(((start + dir * i) % N) + N) % N]);
-            }
-        }
-    }
-    return best;
-}
-function toPath(points, close) {
-    const body = points.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`).join('');
-    return close ? `${body}Z` : body;
-}
-const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
-/* 180 ms, from 520: William asked for much faster. It is the time the eye
-   needs to see it happen, not a beat to admire. */
-const MORPH_MS = 180;
-export default function Brand({ className, title = 'tf', cog, }) {
-    const still = useRef(null);
-    /* The mark sampled along its own length, once, off the real path -- the
-       browser does the arc arithmetic -- and the cog aligned to it. Null
-       until it has. */
-    const mark = useRef(null);
-    const ring = useRef(COG);
-    /* 0 is the mark, 1 is the cog; what is drawn is the point between. */
-    const [t, setT] = useState(0);
-    const [hovered, setHovered] = useState(false);
-    const hover = cog ?? hovered;
-    const frame = useRef(0);
-    useEffect(() => {
-        const el = still.current;
-        if (!el || mark.current)
-            return;
-        const len = el.getTotalLength();
-        const pts = [];
-        for (let i = 0; i < N; i++) {
-            const p = el.getPointAtLength((len * i) / (N - 1));
-            pts.push([p.x, p.y]);
-        }
-        mark.current = pts;
-        ring.current = aligned(pts);
-    }, []);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: `t` is the starting point of a run, read once when `hover` flips -- listing it would restart the morph on every frame it sets.
-    useEffect(() => {
-        if (typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches)
-            return;
-        const from = t;
-        const to = hover ? 1 : 0;
-        if (from === to)
-            return;
-        const started = performance.now();
-        const step = (now) => {
-            const k = Math.min(1, (now - started) / (MORPH_MS * Math.abs(to - from)));
-            setT(from + (to - from) * ease(k));
-            if (k < 1)
-                frame.current = requestAnimationFrame(step);
-        };
-        frame.current = requestAnimationFrame(step);
-        return () => cancelAnimationFrame(frame.current);
-    }, [hover]);
-    /* Bound once, narrowed once. `mark.current` is set by the layout effect
-       above and `t > 0` only after that, so inside the morph it is never
-       undefined -- but TypeScript cannot carry that across a `&&`, and a `!` is
-       the thing the linter rightly refuses. A named binding says the same
-       thing without asserting it. */
-    const points = t > 0 ? mark.current : null;
-    const morphing = points !== null;
-    const d = points
-        ? toPath(points.map(([x, y], i) => [
-            x + (ring.current[i][0] - x) * t,
-            y + (ring.current[i][1] - y) * t,
-        ]), t >= 1)
-        : D;
-    const width = MARK_STROKE + (COG_STROKE - MARK_STROKE) * t;
-    /* The body: 0 until FILL_FROM, 1 at the cog. The hole grows with it, so
-       the fill arrives as a disc that opens rather than a ring that appears. */
-    const body = Math.max(0, Math.min(1, (t - FILL_FROM) / (1 - FILL_FROM)));
-    const hole = R_HOLE * body;
-    const holePath = body > 0
-        ? ` M${CENTRE.x + hole} ${CENTRE.y} A${hole} ${hole} 0 1 0 ${CENTRE.x - hole} ${CENTRE.y}` +
-            ` A${hole} ${hole} 0 1 0 ${CENTRE.x + hole} ${CENTRE.y} Z`
-        : '';
-    return (_jsxs("svg", { 
-        /* `brand-turning` -- the slow spin once the cog is complete -- is not
-           applied since 2026-09-03: William asked to try it without. The rule
-           is still in the stylesheet; putting the class back is the whole
-           change. */
-        className: className, viewBox: VIEW, fill: "none", role: "img", "aria-label": title, onPointerEnter: cog === undefined ? () => setHovered(true) : undefined, onPointerLeave: cog === undefined ? () => setHovered(false) : undefined, children: [_jsx("title", { children: title }), _jsx("path", { ref: still, d: D, stroke: "currentColor", strokeWidth: "96", strokeLinecap: "round", strokeLinejoin: "round", style: morphing ? { opacity: 0 } : undefined }), morphing && body > 0 && (_jsx("path", { d: d + holePath, fill: "currentColor", fillRule: "evenodd", fillOpacity: body })), morphing && body > 0 && (_jsx("circle", { cx: CENTRE.x, cy: CENTRE.y, r: R_HUB * body, stroke: "currentColor", strokeWidth: HUB_STROKE, strokeOpacity: body })), morphing && (_jsx("path", { d: d, stroke: "currentColor", strokeWidth: width, strokeLinecap: "round", strokeLinejoin: "round" }))] }));
+export default function Brand({ name = 'tf', title = name, 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" })] }));
 }

package/dist/components/Tour.d.ts

@@ -27,7 +27,9 @@ export interface TourStop {
     title: string;
     body: React.ReactNode;
 }
-export default function Tour({ stops, onDone }: {
+export default function Tour({ stops, onDone, storageKey, }: {
     stops: TourStop[];
     onDone: () => void;
+    /** Where this product records that the tour was seen. See `tourMarker.ts`. */
+    storageKey?: string;
 }): import("react").ReactPortal | null;

package/dist/components/Tour.js

@@ -26,7 +26,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { createPortal } from 'react-dom';
 import Button from './Button';
 import { markTourSeen } from './tourMarker';
-export default function Tour({ stops, onDone }) {
+export default function Tour({ stops, onDone, storageKey, }) {
     const [at, setAt] = useState(0);
     const [box, setBox] = useState(null);
     const card = useRef(null);
@@ -47,9 +47,9 @@ export default function Tour({ stops, onDone }) {
        "no stop", which ends the tour. Only reachable in development. */
     const stop = live[Math.min(at, Math.max(0, live.length - 1))];
     const finish = useCallback(() => {
-        markTourSeen();
+        markTourSeen(storageKey);
         onDone();
-    }, [onDone]);
+    }, [onDone, storageKey]);
     useLayoutEffect(() => {
         if (!stop)
             return finish();

package/dist/components/brandMarks.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 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.
+     *  The view is the stroke's outer bounds, not the canvas: the stroke is 96
+     *  wide, so 48 of cap and arc on every side is already in these. */
+    readonly tf: {
+        readonly view: "248 190 556 578";
+        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;
+    };
+};
+export type BrandName = keyof typeof BRAND_MARKS;
+export declare const BRAND_NAMES: BrandName[];

package/dist/components/brandMarks.js

@@ -0,0 +1,31 @@
+/**
+ * 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.
+     *  The view is the stroke's outer bounds, not the canvas: the stroke is 96
+     *  wide, so 48 of cap and arc on every side is already in these. */
+    tf: {
+        view: '248 190 556 578',
+        d: 'M372 262V620A100 100 0 0 0 572 620V330A92 92 0 0 1 756 330A100 100 0 0 1 656 430H296',
+        stroke: 96,
+    },
+};
+export const BRAND_NAMES = Object.keys(BRAND_MARKS);

package/dist/components/tourMarker.d.ts

@@ -11,7 +11,18 @@
  * These are also not React at all: three reads and writes of one string. They
  * were only in the component file because that is where the tour was written.
  */
-export declare function tourSeen(): boolean;
+/** Remembered per browser: a reload in the middle should not start it again,
+ *  and neither should opening the app tomorrow.
+ *
+ *  Re-running onboarding clears it -- see `forgetTour`. There is still no way
+ *  to replay the tour on its own without doing that, which is worth a row in
+ *  Settings and is said here rather than left implied. */
+/** Where a product records that the tour was seen. Every product that installs
+ *  the package gets its own key by passing one; the default is the package's,
+ *  so two products on one origin do not share a memory. tf passes
+ *  `tf-tour-seen`, the key its users already hold. */
+export declare const DEFAULT_TOUR_KEY = "design-tour-seen";
+export declare function tourSeen(key?: string): boolean;
 /**
  * Forget it, so the next completed onboarding shows it again.
  *
@@ -25,5 +36,5 @@ export declare function tourSeen(): boolean;
  * this a fact about one browser, which is what it is. If you are being asked
  * these questions again, you have not seen the walk that comes after them.
  */
-export declare function forgetTour(): void;
-export declare function markTourSeen(): void;
+export declare function forgetTour(key?: string): void;
+export declare function markTourSeen(key?: string): void;

package/dist/components/tourMarker.js

@@ -17,10 +17,14 @@
  *  Re-running onboarding clears it -- see `forgetTour`. There is still no way
  *  to replay the tour on its own without doing that, which is worth a row in
  *  Settings and is said here rather than left implied. */
-const SEEN = 'tf-tour-seen';
-export function tourSeen() {
+/** Where a product records that the tour was seen. Every product that installs
+ *  the package gets its own key by passing one; the default is the package's,
+ *  so two products on one origin do not share a memory. tf passes
+ *  `tf-tour-seen`, the key its users already hold. */
+export const DEFAULT_TOUR_KEY = 'design-tour-seen';
+export function tourSeen(key = DEFAULT_TOUR_KEY) {
     try {
-        return localStorage.getItem(SEEN) === '1';
+        return localStorage.getItem(key) === '1';
     }
     catch {
         // A browser refusing storage is not a reason to refuse the tour.
@@ -40,17 +44,17 @@ export function tourSeen() {
  * this a fact about one browser, which is what it is. If you are being asked
  * these questions again, you have not seen the walk that comes after them.
  */
-export function forgetTour() {
+export function forgetTour(key = DEFAULT_TOUR_KEY) {
     try {
-        localStorage.removeItem(SEEN);
+        localStorage.removeItem(key);
     }
     catch {
         /* nothing to do about it, and nothing that needs doing */
     }
 }
-export function markTourSeen() {
+export function markTourSeen(key = DEFAULT_TOUR_KEY) {
     try {
-        localStorage.setItem(SEEN, '1');
+        localStorage.setItem(key, '1');
     }
     catch {
         /* nothing to do about it, and nothing that needs doing */

package/dist/index.d.ts

@@ -17,6 +17,8 @@
  * 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';
@@ -56,7 +58,7 @@ export type { TourStop } from './components/Tour';
 /** 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 { forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
 /** 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. */

package/dist/index.js

@@ -17,6 +17,7 @@
  * 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';
@@ -51,7 +52,7 @@ export { default as Tour } from './components/Tour';
 /** 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 { forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
 /** 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. */

package/dist/styles/index.css

@@ -329,10 +329,10 @@ button[aria-busy='true']::after {
   width: 40%;
   background: currentColor;
   opacity: 0.55;
-  animation: tf-busy 1.1s var(--ease) infinite;
+  animation: ds-busy 1.1s var(--ease) infinite;
 }
 
-@keyframes tf-busy {
+@keyframes ds-busy {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(350%); }
 }
@@ -423,13 +423,12 @@ button.ghost:hover:not(:disabled) {
   height: calc(var(--text-md) * 1.5);
   width: auto;
   color: var(--good);
-  /* The cog turns about its own centre, which is the ink box's. */
+  /* A product that animates its mark turns it about its own centre, which is
+     the ink box's; tf's cog does. */
   transform-origin: center;
 }
 
-@keyframes brand-turn { to { transform: rotate(360deg); } }
-
-@keyframes tf-callout-clock {
+@keyframes ds-callout-clock {
   from { transform: scaleX(1); }
   to { transform: scaleX(0); }
 }
@@ -515,16 +514,16 @@ button.ghost:hover:not(:disabled) {
 
 .icon-btn:hover { opacity: 1; color: var(--text); }
 
-@keyframes tf-bar {
+@keyframes ds-bar {
   0% { transform: translateX(-110%); }
   100% { transform: translateX(320%); }
 }
 
-@keyframes tf-toast-in {
+@keyframes ds-toast-in {
   from { opacity: 0; transform: translateY(8px); }
 }
 
-@keyframes tf-toast-out {
+@keyframes ds-toast-out {
   to { opacity: 0; transform: translateY(4px); }
 }
 
@@ -545,7 +544,7 @@ button.ghost:hover:not(:disabled) {
 .icon-btn:hover:not(:disabled) { color: var(--text); }
 
 /* skeleton pulse ------------------------------------------------------ */
-@keyframes tf-pulse {
+@keyframes ds-pulse {
   0%, 100% { opacity: 0.25; }
   50% { opacity: 0.65; }
 }
@@ -684,7 +683,7 @@ input:active, textarea:active, select:active { transform: none; }
   line-height: 1.5;
 }
 
-@keyframes tf-throb {
+@keyframes ds-throb {
   0%, 100% { opacity: 0.55; }
   50% { opacity: 1; }
 }
@@ -720,7 +719,7 @@ input:active, textarea:active, select:active { transform: none; }
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
-@keyframes tf-spin { to { transform: rotate(360deg); } }
+@keyframes ds-spin { to { transform: rotate(360deg); } }
 
 @keyframes dock-working {
   0%, 100% { opacity: .15; transform: scale(1); }
@@ -737,10 +736,10 @@ input:active, textarea:active, select:active { transform: none; }
    The animation is not made more robust; the shape is made indifferent to it. */
 .spin {
   display: inline-block;
-  animation: tf-spin 900ms linear infinite;
+  animation: ds-spin 900ms linear infinite;
 }
 
-@keyframes tf-spin { to { transform: rotate(360deg); } }
+@keyframes ds-spin { to { transform: rotate(360deg); } }
 
 @media (prefers-reduced-motion: reduce) {
   /* Still says "working" -- it just says it without moving. */
@@ -781,7 +780,7 @@ input:active, textarea:active, select:active { transform: none; }
   border: 0;
 }
 
-@keyframes tf-skel {
+@keyframes ds-skel {
   from { opacity: 0.55; }
   to { opacity: 1; }
 }
@@ -1139,7 +1138,7 @@ button.danger:active:not(:disabled) {
   transform-origin: left;
   background: currentColor;
   opacity: 0.5;
-  animation: tf-callout-clock linear forwards;
+  animation: ds-callout-clock linear forwards;
 }
 
 /* Held while the pointer is on it. A message that expires while you are reading
@@ -1561,10 +1560,10 @@ input[type='radio']:active:not(:disabled) {
   width: 220%; height: 220%;
   translate: -50% -50%;
   background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, color-mix(in oklab, var(--accent) 70%, transparent) 180deg, transparent 300deg, transparent 360deg);
-  animation: tf-spin 1s linear infinite;
+  animation: ds-spin 1s linear infinite;
 }
 
-@keyframes tf-spin { to { rotate: 1turn; } }
+@keyframes ds-spin { to { rotate: 1turn; } }
 
 @media (prefers-reduced-motion: reduce) {
   .toggle-sweep::before { animation: none; background: color-mix(in oklab, var(--accent) 45%, transparent); }
@@ -1578,7 +1577,7 @@ input[type='radio']:active:not(:disabled) {
   height: 8px;
   border-radius: var(--radius-sm);
   background: var(--muted);
-  animation: tf-pulse 1.4s ease-in-out infinite;
+  animation: ds-pulse 1.4s ease-in-out infinite;
   vertical-align: middle;
 }
 
@@ -1619,7 +1618,7 @@ input[type='radio']:active:not(:disabled) {
 
 /* Breathing rather than sliding. A sweep travelling across a skeleton implies
    progress from left to right, and nothing here knows how far along it is. */
-.skel-pulse { animation: tf-skel calc(var(--dur-slow) * 3) var(--ease) infinite alternate; }
+.skel-pulse { animation: ds-skel calc(var(--dur-slow) * 3) var(--ease) infinite alternate; }
 
 @media (prefers-reduced-motion: reduce) {
   /* Still distinguishable from a real block of colour, and still still. */
@@ -1761,7 +1760,7 @@ input[type='radio']:active:not(:disabled) {
    something happening now. */
 .rows-pick > .rows-row.is-loading {
   border-color: var(--accent);
-  animation: tf-pulse 1.4s ease-in-out infinite;
+  animation: ds-pulse 1.4s ease-in-out infinite;
 }
 
 /* And nothing else can be chosen while it happens: picking a second model
@@ -1973,7 +1972,7 @@ input[type='radio']:active:not(:disabled) {
    happening" without claiming to know how much of it is left. */
 .bar-indeterminate > i {
   width: 35%;
-  animation: tf-bar 1.2s var(--ease) infinite;
+  animation: ds-bar 1.2s var(--ease) infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2103,7 +2102,7 @@ input[type='radio']:active:not(:disabled) {
   background: var(--panel);
   box-shadow: var(--shadow-2);
   font-size: var(--text-sm);
-  animation: tf-toast-in var(--dur-md) var(--ease);
+  animation: ds-toast-in var(--dur-md) var(--ease);
 }
 
 /* The tone is the edge and the mark, in the tone's own colour. It used to be the
@@ -2133,7 +2132,7 @@ input[type='radio']:active:not(:disabled) {
 /* `data-exiting` is React Aria's: it keeps a toast in the DOM for the length
    of this animation after it is closed, then removes it, which is what the
    `.leaving` class and a second timer used to do by hand. */
-.toast[data-exiting] { animation: tf-toast-out var(--dur-fast) var(--ease) forwards; }
+.toast[data-exiting] { animation: ds-toast-out var(--dur-fast) var(--ease) forwards; }
 
 @media (prefers-reduced-motion: reduce) {
   .toast, /* `data-exiting` is React Aria's: it keeps a toast in the DOM for the length
@@ -2779,39 +2778,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 .table thead th[style*='right'] { text-align: right; }
 
-/* ---- ./brand.css ---- */
-/* Once the morph has finished (`Brand.tsx` adds the class at t = 1), the cog
-   turns -- a revolution in 5 s, a tooth every 0.8 s: the pace of a
-   mechanism, not a spinner. It was 2.4 s, which was too quick to William's
-   eye once the teeth were six and fat. Off under reduced motion, where the
-   mark never becomes a cog in the first place.
-
-   Not applied since 2026-09-03 -- William asked to try it without, and
-   `Brand.tsx` says so where the class would go. The rule stays so that putting
-   the class back is the whole change; it stays HERE, rather than in the app
-   that first held it, because the component that would add the class is this
-   package's. The keyframes are in `base.css` beside `.brand`. */
-.brand-turning { animation: brand-turn 5s linear infinite; }
-
-@media (prefers-reduced-motion: reduce) {
-  .brand-turning { animation: none; }
-}
-
-.tf-dots { display: inline-flex; gap: var(--space-1); }
-
-.tf-dots i {
-  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
-  animation: tf-bounce 1.1s ease-in-out infinite;
-}
-
-.tf-dots i:nth-child(2) { animation-delay: 0.15s; }
-
-.tf-dots i:nth-child(3) { animation-delay: 0.3s; }
-
-@media (prefers-reduced-motion: reduce) {
-  .tf-dots i { animation: none; opacity: 0.6; }
-}
-
 /* ---- ./sizegrid.css ---- */
 /* Tile size, picked as a rectangle rather than read as a notation. */
 .size-grid-wrap { display: flex; align-items: center; gap: var(--space-2); }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.1.0",
-  "description": "The tf design system: themeable components on a fixed token vocabulary.",
+  "version": "0.2.0",
+  "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",
     "react",