@wtfalch/design 0.13.0 → 0.14.0

package/README.md

@@ -70,20 +70,20 @@ 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 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 otf. `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
+palette written for two products would have shown otf'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.
+paint). otf's default is `system`, a `prefers-color-scheme` rule rather than a
+palette, so otf 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,
@@ -178,7 +178,7 @@ Your server stays the source of truth. `localStorage` only beats the paint.
 
 ## Marks
 
-Every product's mark, by name, in `brandMarks.ts`. tf's is one stroke. valet's
+Every product's mark, by name, in `brandMarks.ts`. otf'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.
@@ -230,7 +230,7 @@ is the difference from `Markdown`, which parses and must sanitise.
 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;
-valet is the second. A product is a layer: tf and valet each ship as one
+valet is the second. A product is a layer: otf and valet each ship as one
 stylesheet and one entry, with their identity under their themes and their
 mark in the table.
 

package/dist/components/Brand.d.ts

@@ -4,21 +4,21 @@ import { type BrandName } from './brandMarks.js';
  *
  * 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.
+ * `otf` 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
+ * Still, on purpose. Until 0.2.0 this component also morphed otf'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
+ * animation. That morph is otf'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.
  *
- * Stroked or filled, whichever the mark is. tf's is one line at a weight;
+ * Stroked or filled, whichever the mark is. otf'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

package/dist/components/Brand.js

@@ -5,21 +5,21 @@ import { BRAND_MARKS, BRAND_NAMES } from './brandMarks.js';
  *
  * 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.
+ * `otf` 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
+ * Still, on purpose. Until 0.2.0 this component also morphed otf'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
+ * animation. That morph is otf'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.
  *
- * Stroked or filled, whichever the mark is. tf's is one line at a weight;
+ * Stroked or filled, whichever the mark is. otf'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

package/dist/components/Input.d.ts

@@ -27,7 +27,7 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
      *  `Field`'s `<label for>` already names it. Taking it out of the props is
      *  what keeps it off the DOM node: React passes through anything it does
      *  not recognise, and the browser got `labelid="…"` with a console warning
-     *  on every field in valet and tf. */
+     *  on every field in valet and otf. */
     labelId?: string;
 }
 declare const Input: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Rows.d.ts

@@ -96,7 +96,7 @@ export declare function Row({ name, pills, hint, trail, actions, below, onClick,
     /** This one cannot be chosen, and nothing on the page will change that: the
      *  build lacks something, or a setting elsewhere rules it out. Say why in
      *  `hint`. Drawn as `waiting` is -- dimmed, its hit area a disabled button,
-     *  `picked` still showing through -- but a separate word, because tf's
+     *  `picked` still showing through -- but a separate word, because otf's
      *  About pane borrowed `waiting` for "this build cannot apply updates", and
      *  a row that says it is waiting is a row somebody waits on. */
     disabled?: boolean;

package/dist/components/Slider.d.ts

@@ -2,7 +2,7 @@
  * A number chosen from a range, by dragging.
  *
  * For a setting whose answer is "about this much" rather than one of a list:
- * how much memory tf may take, say. A `Select` with eight sizes on it makes
+ * how much memory otf may take, say. A `Select` with eight sizes on it makes
  * the person pick the nearest wrong one; a box you type a number into asks
  * them to know the ceiling. A slider shows the ceiling, the floor, and where
  * between them they are.

package/dist/components/Slider.js

@@ -11,7 +11,7 @@ import { useEffect, useId, useRef, useState } from 'react';
  * A number chosen from a range, by dragging.
  *
  * For a setting whose answer is "about this much" rather than one of a list:
- * how much memory tf may take, say. A `Select` with eight sizes on it makes
+ * how much memory otf may take, say. A `Select` with eight sizes on it makes
  * the person pick the nearest wrong one; a box you type a number into asks
  * them to know the ceiling. A slider shows the ceiling, the floor, and where
  * between them they are.

package/dist/components/Textarea.d.ts

@@ -12,7 +12,7 @@ export interface Props extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEle
      *  `Field`'s `<label for>` already names it. Taking it out of the props is
      *  what keeps it off the DOM node: React passes through anything it does
      *  not recognise, and the browser got `labelid="…"` with a console warning
-     *  on every field in valet and tf. */
+     *  on every field in valet and otf. */
     labelId?: string;
 }
 declare const Textarea: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/brandMarks.d.ts

@@ -9,11 +9,11 @@
  * 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
+ * A product that animates its mark does that in its own code: otf's
+ * lowercase otf 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
+ * rendered from -- otf'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
@@ -22,7 +22,7 @@
 /**
  * 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
+ * otf'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
@@ -43,13 +43,16 @@ export interface FillMark {
     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.
-     *  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";
+    /** A lowercase tf merged into an O, in one unbroken stroke. Both ends of
+     *  the tf start on the O -- the crossbar runs left and folds down onto it,
+     *  the stem runs up and turns right onto it -- and the 95 degrees of ring
+     *  between those two points is left out, so the O reads as open across the
+     *  top left rather than closed. One stroke, no loose ends. 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 otf: {
+        readonly view: "69.3 -12.2 958.4 958.4";
+        readonly d: "M470.2 43.0A120 120 0 0 0 372 161.0V620A100 100 0 0 0 572 620V330A92 92 0 0 1 756 330A100 100 0 0 1 656 430H248.6A120 120 0 0 0 132.9 582.0A431.2 431.2 0 1 0 470.2 43.0";
         readonly stroke: 96;
     };
     /** valet's badge. The rounded square is the jacket, the shirt is cut out of

package/dist/components/brandMarks.js

@@ -1,11 +1,14 @@
 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',
+    /** A lowercase tf merged into an O, in one unbroken stroke. Both ends of
+     *  the tf start on the O -- the crossbar runs left and folds down onto it,
+     *  the stem runs up and turns right onto it -- and the 95 degrees of ring
+     *  between those two points is left out, so the O reads as open across the
+     *  top left rather than closed. One stroke, no loose ends. 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. */
+    otf: {
+        view: '69.3 -12.2 958.4 958.4',
+        d: 'M470.2 43.0A120 120 0 0 0 372 161.0V620A100 100 0 0 0 572 620V330A92 92 0 0 1 756 330A100 100 0 0 1 656 430H248.6A120 120 0 0 0 132.9 582.0A431.2 431.2 0 1 0 470.2 43.0',
         stroke: 96,
     },
     /** valet's badge. The rounded square is the jacket, the shirt is cut out of

package/dist/components/tourMarker.d.ts

@@ -19,8 +19,8 @@
  *  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. */
+ *  so two products on one origin do not share a memory. otf passes
+ *  `otf-tour-seen`, the key its users already hold. */
 export declare const DEFAULT_TOUR_KEY = "design-tour-seen";
 export declare function tourSeen(key?: string): boolean;
 /**

package/dist/components/tourMarker.js

@@ -19,8 +19,8 @@
  *  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. */
+ *  so two products on one origin do not share a memory. otf passes
+ *  `otf-tour-seen`, the key its users already hold. */
 export const DEFAULT_TOUR_KEY = 'design-tour-seen';
 export function tourSeen(key = DEFAULT_TOUR_KEY) {
     try {

package/dist/{tf.css → otf.css}

@@ -1279,7 +1279,7 @@ select:focus { outline: none; border-color: var(--accent); }
 
 /* The checkbox, drawn rather than inherited.
    The native one is the platform's, which means it is a different shape, a
-   different blue and a different size on every machine tf runs on -- the one
+   different blue and a different size on every machine otf runs on -- the one
    control in the app that refused to join the design system. It is also the
    only form control that can be replaced in pure CSS: unlike a select, whose
    dropdown belongs to the OS, a checkbox is a box and a tick.
@@ -1503,7 +1503,7 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
    whatever next needs to know. */
 /* The wordmark, and the same mark the app icon carries: `Brand.tsx` draws the
    path `desktop/build/icon.html` draws, and `test/brandMark.test.ts` holds
-   them to one string. It was "TF" set in the system font at -0.14em, matching
+   them to one string. It was "otf" set in the system font at -0.14em, matching
    an icon that did the same; both are now one drawn line, and the tracking
    arithmetic that used to live here went with the letters.
    The height comes off the type scale rather than being a pixel: 1.5 times
@@ -1521,7 +1521,7 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   width: auto;
   color: var(--good);
   /* A product that animates its mark turns it about its own centre, which is
-     the ink box's; tf's cog does. */
+     the ink box's; otf's cog does. */
   transform-origin: center;
 }
 
@@ -1820,7 +1820,7 @@ input:active, textarea:active, select:active { transform: none; }
   .spin { animation: none; opacity: 0.6; }
 }
 
-@keyframes tf-bounce {
+@keyframes otf-bounce {
   0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
   40% { opacity: 1; transform: translateY(-3px); }
 }
@@ -3337,7 +3337,7 @@ input[type='radio']:active:not(:disabled) {
    as part of the heading rather than as the first line of content. */
 .modal-body { padding: var(--space-2) var(--space-4) var(--space-3); overflow-y: auto; }
 
-/* The close cross. Its rule stayed behind in tf's stylesheet when the split
+/* The close cross. Its rule stayed behind in otf's stylesheet when the split
    ran -- a one-letter class name, and the scan that finds classes in source
    dropped it -- so in the package the cross had only `.icon-btn`, which is the
    picker's 34px square tile with a panel behind it. The head is laid out for
@@ -3414,7 +3414,7 @@ input[type='radio']:active:not(:disabled) {
 /* The tone is on the box, not only on the button. A destructive question that
    looks like every other question is one the reader skims.
    `Dialog` writes this as `dialog-${tone}`, which a literal scan of the source
-   never sees -- so the rule was left behind in tf's stylesheet by the split and
+   never sees -- so the rule was left behind in otf's stylesheet by the split and
    the package shipped a `tone="bad"` prop that changed nothing. */
 .dialog-bad { border-color: color-mix(in oklab, var(--bad) 45%, var(--border)); }
 
@@ -5081,6 +5081,6 @@ body.splitting * { cursor: inherit !important; }
   pointer-events: none;
 }
 }
-/* ---- tf: the themes ---- */
+/* ---- otf: the themes ---- */
 :root[data-theme='night']{--bg:#0f1115;--panel:#161a21;--panel-2:#1c222b;--border:#262d38;--text:#e6e9ef;--muted:#8b94a4;--accent:#5b9dff;--accent-dim:#2a4877;--app-bg:#0f1115;color-scheme:dark}
 :root[data-theme='paper']{--bg:#f6f7f9;--panel:#ffffff;--panel-2:#f0f2f5;--border:#e4e8ec;--border-strong:#8792a1;--text:#191d23;--muted:#5d6773;--accent:#0e7872;--accent-dim:#7fbdb8;--on-accent:#ffffff;--good:#1c7a4a;--warn:#8a6216;--bad:#b3312c;--info:#216bc9;--shadow-1:0 4px 14px rgba(16, 24, 40, 0.08);--shadow-2:0 8px 24px rgba(16, 24, 40, 0.10);--shadow-3:0 12px 32px rgba(16, 24, 40, 0.12);--scrim:rgba(16, 24, 40, 0.32);color-scheme:light}

package/dist/{tf.d.ts → otf.d.ts}

@@ -1,10 +1,10 @@
 /**
- * tf's entry: the package, as tf.
+ * otf's entry: the package, as otf.
  *
  * Everything the main entry exports, and on top of it `Brand`, `THEMES`,
- * `DEFAULT_THEME` and `applyTheme` bound to tf -- a local export shadows
+ * `DEFAULT_THEME` and `applyTheme` bound to otf -- a local export shadows
  * the same name from `export *`. A site is one product, so it imports this
- * and `@wtfalch/design/tf.css` and nothing of anyone else's.
+ * and `@wtfalch/design/otf.css` and nothing of anyone else's.
  */
 export * from './index.js';
 export declare const product: import("./products/index.js").Product;

package/dist/{tf.js → otf.js}

@@ -1,15 +1,15 @@
 /**
- * tf's entry: the package, as tf.
+ * otf's entry: the package, as otf.
  *
  * Everything the main entry exports, and on top of it `Brand`, `THEMES`,
- * `DEFAULT_THEME` and `applyTheme` bound to tf -- a local export shadows
+ * `DEFAULT_THEME` and `applyTheme` bound to otf -- a local export shadows
  * the same name from `export *`. A site is one product, so it imports this
- * and `@wtfalch/design/tf.css` and nothing of anyone else's.
+ * and `@wtfalch/design/otf.css` and nothing of anyone else's.
  */
 export * from './index.js';
 import { bindProduct } from './products/index.js';
-import { tf } from './products/tf.js';
-const bound = bindProduct(tf);
+import { otf } from './products/otf.js';
+const bound = bindProduct(otf);
 export const product = bound.product;
 export const Brand = bound.Brand;
 export const THEMES = bound.THEMES;

package/dist/products/index.d.ts

@@ -14,7 +14,7 @@ import { type Theme, type ThemeTokens } from '../themes/index.js';
  *
  * The middle layer is what lets a theme be shared between products. A theme
  * is a sparse map, and what it is sparse *over* decides what a silent token
- * shows: over the base it shows tf, over the product it shows the product.
+ * shows: over the base it shows otf, over the product it shows the product.
  * Before this layer valet's two palettes each restated valet's font and
  * corners, because there was nowhere else to put them.
  *
@@ -36,7 +36,7 @@ export interface Product {
 }
 /** Every product, by the name of its mark. */
 export declare const PRODUCTS: {
-    readonly tf: Product;
+    readonly otf: Product;
     readonly valet: Product;
 };
 /** Declare a product, so a default that is not a theme or a key `applyTheme`
@@ -47,7 +47,7 @@ export declare function defineProduct(product: Product): Product;
  *
  * An id the product does not offer resolves to the product's default rather
  * than the package's, so a valet setting that remembers a theme valet has
- * since dropped comes up as valet, not as tf.
+ * since dropped comes up as valet, not as otf.
  */
 export declare function productTheme(product: Product, theme?: string | Theme): Theme;
 type BrandProps = ComponentProps<typeof BrandDefault>;

package/dist/products/index.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import BrandDefault from '../components/Brand.js';
 import { applyTheme } from '../themes/index.js';
 import { themeId } from '../themes/css.js';
-import { tf } from './tf.js';
+import { otf } from './otf.js';
 import { valet } from './valet.js';
 /** Every product, by the name of its mark. */
-export const PRODUCTS = { tf, valet };
+export const PRODUCTS = { otf, valet };
 /** Declare a product, so a default that is not a theme or a key `applyTheme`
  *  would not use is an error where it is written. */
 export function defineProduct(product) {
@@ -24,7 +24,7 @@ export function defineProduct(product) {
  *
  * An id the product does not offer resolves to the product's default rather
  * than the package's, so a valet setting that remembers a theme valet has
- * since dropped comes up as valet, not as tf.
+ * since dropped comes up as valet, not as otf.
  */
 export function productTheme(product, theme = product.defaultTheme) {
     const resolved = typeof theme === 'string'

package/dist/products/{tf.d.ts → otf.d.ts}

@@ -1,7 +1,7 @@
 import type { Theme } from '../themes/index.js';
 import type { Product } from './index.js';
 /**
- * tf's themes: the three the package shipped with, and the ones the gallery
+ * otf's themes: the three the package shipped with, and the ones the gallery
  * was photographed in first.
  *
  * `system` is a theme, not a mode. A `prefers-color-scheme` block that
@@ -14,19 +14,19 @@ export declare const system: Theme;
 export declare const night: Theme;
 export declare const paper: Theme;
 /** Keyed by the name `applyTheme` takes, which is `name` lowercased. */
-export declare const TF_THEMES: {
+export declare const OTF_THEMES: {
     readonly system: Theme;
     readonly night: Theme;
     readonly paper: Theme;
 };
 /**
- * tf, the product.
+ * otf, the product.
  *
- * Its identity is empty on purpose: `tokens.css` carries tf's font, shape and
+ * Its identity is empty on purpose: `tokens.css` carries otf's font, shape and
  * density as the base values, so there is nothing to lay over them. `system`
  * is the default because following the OS is the choice a tool open all day
  * should make for you -- and because it is a `prefers-color-scheme` rule
- * rather than a palette, tf's stylesheet writes no default on `:root`; tf sets
- * `data-theme` before the bundle loads, as it always has.
+ * rather than a palette, otf's stylesheet writes no default on `:root`; otf
+ * sets `data-theme` before the bundle loads, as it always has.
  */
-export declare const tf: Product;
+export declare const otf: Product;

package/dist/products/{tf.js → otf.js}

@@ -1,5 +1,5 @@
 /**
- * tf's themes: the three the package shipped with, and the ones the gallery
+ * otf's themes: the three the package shipped with, and the ones the gallery
  * was photographed in first.
  *
  * `system` is a theme, not a mode. A `prefers-color-scheme` block that
@@ -85,20 +85,20 @@ export const paper = {
     },
 };
 /** Keyed by the name `applyTheme` takes, which is `name` lowercased. */
-export const TF_THEMES = { system, night, paper };
+export const OTF_THEMES = { system, night, paper };
 /**
- * tf, the product.
+ * otf, the product.
  *
- * Its identity is empty on purpose: `tokens.css` carries tf's font, shape and
+ * Its identity is empty on purpose: `tokens.css` carries otf's font, shape and
  * density as the base values, so there is nothing to lay over them. `system`
  * is the default because following the OS is the choice a tool open all day
  * should make for you -- and because it is a `prefers-color-scheme` rule
- * rather than a palette, tf's stylesheet writes no default on `:root`; tf sets
- * `data-theme` before the bundle loads, as it always has.
+ * rather than a palette, otf's stylesheet writes no default on `:root`; otf
+ * sets `data-theme` before the bundle loads, as it always has.
  */
-export const tf = {
-    name: 'tf',
+export const otf = {
+    name: 'otf',
     identity: {},
-    themes: TF_THEMES,
+    themes: OTF_THEMES,
     defaultTheme: 'system',
 };

package/dist/products/valet.js

@@ -8,14 +8,14 @@
  * tones are what the system says. They never share a colour.
  *
  * Every colour is measured, not judged: `contrast.test.ts` holds both palettes
- * to the same pairs as tf's.
+ * to the same pairs as otf's.
  *
  * The palettes name colours and nothing else. What makes valet valet under
  * either of them -- the type and the corners -- is the identity below, on
  * `:root` in valet's stylesheet and under every palette `applyTheme` lays on.
  * Both palettes used to restate it, which is the shape that breaks the moment
  * a theme is shared between products: silent on the font, it would have fallen
- * back to tf's.
+ * back to otf's.
  */
 const FONT = 'var(--font-sans, "IBM Plex Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
 const FONT_MONO = 'var(--font-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, monospace';

package/dist/styles/index.css

@@ -1009,7 +1009,7 @@ select:focus { outline: none; border-color: var(--accent); }
 
 /* The checkbox, drawn rather than inherited.
    The native one is the platform's, which means it is a different shape, a
-   different blue and a different size on every machine tf runs on -- the one
+   different blue and a different size on every machine otf runs on -- the one
    control in the app that refused to join the design system. It is also the
    only form control that can be replaced in pure CSS: unlike a select, whose
    dropdown belongs to the OS, a checkbox is a box and a tick.
@@ -1233,7 +1233,7 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
    whatever next needs to know. */
 /* The wordmark, and the same mark the app icon carries: `Brand.tsx` draws the
    path `desktop/build/icon.html` draws, and `test/brandMark.test.ts` holds
-   them to one string. It was "TF" set in the system font at -0.14em, matching
+   them to one string. It was "otf" set in the system font at -0.14em, matching
    an icon that did the same; both are now one drawn line, and the tracking
    arithmetic that used to live here went with the letters.
    The height comes off the type scale rather than being a pixel: 1.5 times
@@ -1251,7 +1251,7 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   width: auto;
   color: var(--good);
   /* A product that animates its mark turns it about its own centre, which is
-     the ink box's; tf's cog does. */
+     the ink box's; otf's cog does. */
   transform-origin: center;
 }
 
@@ -1550,7 +1550,7 @@ input:active, textarea:active, select:active { transform: none; }
   .spin { animation: none; opacity: 0.6; }
 }
 
-@keyframes tf-bounce {
+@keyframes otf-bounce {
   0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
   40% { opacity: 1; transform: translateY(-3px); }
 }
@@ -3067,7 +3067,7 @@ input[type='radio']:active:not(:disabled) {
    as part of the heading rather than as the first line of content. */
 .modal-body { padding: var(--space-2) var(--space-4) var(--space-3); overflow-y: auto; }
 
-/* The close cross. Its rule stayed behind in tf's stylesheet when the split
+/* The close cross. Its rule stayed behind in otf's stylesheet when the split
    ran -- a one-letter class name, and the scan that finds classes in source
    dropped it -- so in the package the cross had only `.icon-btn`, which is the
    picker's 34px square tile with a panel behind it. The head is laid out for
@@ -3144,7 +3144,7 @@ input[type='radio']:active:not(:disabled) {
 /* The tone is on the box, not only on the button. A destructive question that
    looks like every other question is one the reader skims.
    `Dialog` writes this as `dialog-${tone}`, which a literal scan of the source
-   never sees -- so the rule was left behind in tf's stylesheet by the split and
+   never sees -- so the rule was left behind in otf's stylesheet by the split and
    the package shipped a `tone="bad"` prop that changed nothing. */
 .dialog-bad { border-color: color-mix(in oklab, var(--bad) 45%, var(--border)); }
 

package/dist/themes/choice.d.ts

@@ -50,7 +50,7 @@ export declare function themeChoices(product: BrandName | Product, only?: readon
 /**
  * The blocking script, as a string to put in a `<script>` in `<head>`.
  *
- * `dangerouslySetInnerHTML={{ __html: themeChoiceScript('tf') }}` in a Next
+ * `dangerouslySetInnerHTML={{ __html: themeChoiceScript('otf') }}` in a Next
  * root layout, above everything. It reads the stored id, checks it against
  * what this app offers, and writes `data-theme` on `<html>`.
  *

package/dist/themes/choice.js

@@ -49,7 +49,7 @@ export function themeChoices(product, only) {
 /**
  * The blocking script, as a string to put in a `<script>` in `<head>`.
  *
- * `dangerouslySetInnerHTML={{ __html: themeChoiceScript('tf') }}` in a Next
+ * `dangerouslySetInnerHTML={{ __html: themeChoiceScript('otf') }}` in a Next
  * root layout, above everything. It reads the stored id, checks it against
  * what this app offers, and writes `data-theme` on `<html>`.
  *

package/dist/themes/css.d.ts

@@ -31,7 +31,7 @@ export declare function productCss(themes: Record<string, Theme>): string;
  * wins over the base values by coming later at the same specificity; the
  * default theme on `:root:not([data-theme])`, so the first paint is right with
  * no attribute at all; the components; and one rule per theme. A default with
- * no tokens -- tf's `system`, which is a media query rather than a palette --
+ * no tokens -- otf's `system`, which is a media query rather than a palette --
  * writes no default rule, and neither does an empty identity.
  *
  * Structural, not typed to `Product`: that type lives beside the React

package/dist/themes/css.js

@@ -53,7 +53,7 @@ export function productCss(themes) {
  * wins over the base values by coming later at the same specificity; the
  * default theme on `:root:not([data-theme])`, so the first paint is right with
  * no attribute at all; the components; and one rule per theme. A default with
- * no tokens -- tf's `system`, which is a media query rather than a palette --
+ * no tokens -- otf's `system`, which is a media query rather than a palette --
  * writes no default rule, and neither does an empty identity.
  *
  * Structural, not typed to `Product`: that type lives beside the React

package/dist/themes/index.d.ts

@@ -9,7 +9,7 @@
  * than a property that silently does nothing — which is exactly the failure a
  * string-keyed map would produce, at run time, invisibly. That property is the
  * reason this file is exported from the package at all: a consumer writing a
- * theme gets the same compile error tf gets, and a theme that ships as JSON or
+ * theme gets the same compile error otf gets, and a theme that ships as JSON or
  * as a hand-written CSS file does not.
  *
  * ---
@@ -173,7 +173,7 @@ export declare function defineTheme(theme: Theme): Theme;
  * mark is, and 0.2.0 already made `Brand` the home of every product's mark by
  * name; keeping each product's palette in its own repo meant each repo
  * re-deriving first paint, the contrast measurement and a page to look at it
- * on. So `products/tf.ts` holds tf's three and `products/valet.ts` valet's two,
+ * on. So `products/otf.ts` holds otf's three and `products/valet.ts` valet's two,
  * this is the union, and the contrast test and the gallery read the union.
  *
  * A consumer that wants only its own imports the product module, or the CSS
@@ -186,7 +186,7 @@ export declare function isTheme(name: unknown): name is string;
  * Put a theme on an element.
  *
  * **The element is an argument, and that is the whole difference between this
- * and the version that lived in the app.** tf owns its document, so writing to
+ * and the version that lived in the app.** otf owns its document, so writing to
  * `documentElement` was free. A package does not: mounted inside a page it did
  * not build, it has to be able to theme a subtree and leave the rest alone.
  * Defaulting to `documentElement` keeps the app case a no-op.

package/dist/themes/index.js

@@ -9,7 +9,7 @@
  * than a property that silently does nothing — which is exactly the failure a
  * string-keyed map would produce, at run time, invisibly. That property is the
  * reason this file is exported from the package at all: a consumer writing a
- * theme gets the same compile error tf gets, and a theme that ships as JSON or
+ * theme gets the same compile error otf gets, and a theme that ships as JSON or
  * as a hand-written CSS file does not.
  *
  * ---
@@ -37,7 +37,7 @@
  * token added to the stylesheet and to no list fails the suite rather than
  * becoming a fourth, undocumented category.
  */
-import { TF_THEMES } from '../products/tf.js';
+import { OTF_THEMES } from '../products/otf.js';
 import { VALET_THEMES } from '../products/valet.js';
 /**
  * Computed from a themeable token, and not settable.
@@ -164,13 +164,13 @@ export function defineTheme(theme) {
  * mark is, and 0.2.0 already made `Brand` the home of every product's mark by
  * name; keeping each product's palette in its own repo meant each repo
  * re-deriving first paint, the contrast measurement and a page to look at it
- * on. So `products/tf.ts` holds tf's three and `products/valet.ts` valet's two,
+ * on. So `products/otf.ts` holds otf's three and `products/valet.ts` valet's two,
  * this is the union, and the contrast test and the gallery read the union.
  *
  * A consumer that wants only its own imports the product module, or the CSS
  * `build-products.mjs` generates from it, and bundles nobody else's.
  */
-export const THEMES = { ...TF_THEMES, ...VALET_THEMES };
+export const THEMES = { ...OTF_THEMES, ...VALET_THEMES };
 export const DEFAULT_THEME = 'system';
 export function isTheme(name) {
     return typeof name === 'string' && name in THEMES;
@@ -179,7 +179,7 @@ export function isTheme(name) {
  * Put a theme on an element.
  *
  * **The element is an argument, and that is the whole difference between this
- * and the version that lived in the app.** tf owns its document, so writing to
+ * and the version that lived in the app.** otf owns its document, so writing to
  * `documentElement` was free. A package does not: mounted inside a page it did
  * not build, it has to be able to theme a subtree and leave the rest alone.
  * Defaulting to `documentElement` keeps the app case a no-op.
@@ -191,7 +191,7 @@ export function isTheme(name) {
  */
 export function applyTheme(theme, el = document.documentElement) {
     /* A registered name, or a `Theme` object straight from `defineTheme`.
-       The second is how an app that is not tf applies its own palette without
+       The second is how an app that is not otf applies its own palette without
        first pushing it into a registry it does not own -- `THEMES` is the
        built-ins, and a consumer's theme is theirs. */
     const resolved = typeof theme === 'string' ? (THEMES[theme] ?? THEMES[DEFAULT_THEME]) : theme;

package/dist/valet.css

@@ -1283,7 +1283,7 @@ select:focus { outline: none; border-color: var(--accent); }
 
 /* The checkbox, drawn rather than inherited.
    The native one is the platform's, which means it is a different shape, a
-   different blue and a different size on every machine tf runs on -- the one
+   different blue and a different size on every machine otf runs on -- the one
    control in the app that refused to join the design system. It is also the
    only form control that can be replaced in pure CSS: unlike a select, whose
    dropdown belongs to the OS, a checkbox is a box and a tick.
@@ -1507,7 +1507,7 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
    whatever next needs to know. */
 /* The wordmark, and the same mark the app icon carries: `Brand.tsx` draws the
    path `desktop/build/icon.html` draws, and `test/brandMark.test.ts` holds
-   them to one string. It was "TF" set in the system font at -0.14em, matching
+   them to one string. It was "otf" set in the system font at -0.14em, matching
    an icon that did the same; both are now one drawn line, and the tracking
    arithmetic that used to live here went with the letters.
    The height comes off the type scale rather than being a pixel: 1.5 times
@@ -1525,7 +1525,7 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   width: auto;
   color: var(--good);
   /* A product that animates its mark turns it about its own centre, which is
-     the ink box's; tf's cog does. */
+     the ink box's; otf's cog does. */
   transform-origin: center;
 }
 
@@ -1824,7 +1824,7 @@ input:active, textarea:active, select:active { transform: none; }
   .spin { animation: none; opacity: 0.6; }
 }
 
-@keyframes tf-bounce {
+@keyframes otf-bounce {
   0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
   40% { opacity: 1; transform: translateY(-3px); }
 }
@@ -3341,7 +3341,7 @@ input[type='radio']:active:not(:disabled) {
    as part of the heading rather than as the first line of content. */
 .modal-body { padding: var(--space-2) var(--space-4) var(--space-3); overflow-y: auto; }
 
-/* The close cross. Its rule stayed behind in tf's stylesheet when the split
+/* The close cross. Its rule stayed behind in otf's stylesheet when the split
    ran -- a one-letter class name, and the scan that finds classes in source
    dropped it -- so in the package the cross had only `.icon-btn`, which is the
    picker's 34px square tile with a panel behind it. The head is laid out for
@@ -3418,7 +3418,7 @@ input[type='radio']:active:not(:disabled) {
 /* The tone is on the box, not only on the button. A destructive question that
    looks like every other question is one the reader skims.
    `Dialog` writes this as `dialog-${tone}`, which a literal scan of the source
-   never sees -- so the rule was left behind in tf's stylesheet by the split and
+   never sees -- so the rule was left behind in otf's stylesheet by the split and
    the package shipped a `tone="bad"` prop that changed nothing. */
 .dialog-bad { border-color: color-mix(in oklab, var(--bad) 45%, var(--border)); }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",
@@ -24,7 +24,9 @@
   },
   "license": "MIT",
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +35,15 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./tf": {
-      "types": "./dist/tf.d.ts",
-      "default": "./dist/tf.js"
+    "./otf": {
+      "types": "./dist/otf.d.ts",
+      "default": "./dist/otf.js"
     },
     "./valet": {
       "types": "./dist/valet.d.ts",
       "default": "./dist/valet.js"
     },
-    "./tf.css": "./dist/tf.css",
+    "./otf.css": "./dist/otf.css",
     "./valet.css": "./dist/valet.css",
     "./themes": {
       "types": "./dist/themes/index.d.ts",
@@ -58,16 +60,12 @@
       "default": "./dist/rich-text.js"
     }
   },
-  "sideEffects": ["*.css"],
+  "sideEffects": [
+    "*.css"
+  ],
   "engines": {
     "node": ">=22.0.0"
   },
-  "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/copy-css.mjs && node scripts/build-products.mjs",
-    "prepack": "pnpm build",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
-  },
   "peerDependencies": {
     "@tiptap/extension-link": "^3.31.0",
     "@tiptap/extensions": "^3.31.0",
@@ -120,5 +118,10 @@
     "zod": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/copy-css.mjs && node scripts/build-products.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
-}
+}