@rebasepro/ui 0.17.3 → 0.18.0

package/src/scripts/saveIconFiles.ts

@@ -1,89 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-
-export function saveIconFiles(iconKeys: string[]) {
-    const __dirname = path.dirname(fileURLToPath(import.meta.url));
-    const componentsDir = path.join(__dirname, "../icons/components");
-
-    // Clean out old generated components to remove stale files (e.g. Lucide-prefixed duplicates)
-    if (fs.existsSync(componentsDir)) {
-        fs.rmSync(componentsDir, { recursive: true });
-    }
-    fs.mkdirSync(componentsDir, { recursive: true });
-
-    // Initialise index with manual exports
-    fs.writeFileSync(path.join(__dirname, "../icons/index.ts"), 'export * from "./icon_keys";\nexport * from "./cool_icon_keys";\nexport * from "./Icon";\nexport * from "./GitHubIcon";\nexport * from "./HandleIcon";\n');
-
-    const generatedComponents = new Set<string>();
-
-    iconKeys.forEach((key: string) => {
-        if (!key) return;
-
-        // Ensure key works as component name
-        let componentName = `${key}Icon`;
-
-        // Handle names that might start with numbers like "10k" -> "_10k"
-        if (/^[0-9]/.test(componentName)) {
-            componentName = `_${componentName}`;
-        }
-
-        if (componentName === "Icon") {
-            return;
-        }
-
-        if (generatedComponents.has(componentName.toLowerCase())) {
-            return;
-        }
-        generatedComponents.add(componentName.toLowerCase());
-
-        const iconComponent = `import React from "react";
-import { IconProps } from "../Icon";
-import { ${key} as LucideIcon } from "lucide-react";
-import { cls } from "../../util";
-
-/**
- * @group Icons
- */
-export const ${componentName} = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
-    let sizeInPx: number;
-    switch (props.size) {
-        case "smallest": sizeInPx = 16; break;
-        case "small": sizeInPx = 20; break;
-        case "medium": sizeInPx = 24; break;
-        case "large": sizeInPx = 28; break;
-        default: sizeInPx = typeof props.size === "number" ? props.size : 24;
-    }
-
-    const colorClassesMapping: Record<string, string> = {
-        inherit: "",
-        primary: "text-primary",
-        success: "text-green-500",
-        warning: "text-yellow-500",
-        secondary: "text-secondary",
-        disabled: "text-text-disabled dark:text-text-disabled-dark",
-        error: "text-red-500"
-    };
-
-    return <LucideIcon
-        ref={ref}
-        size={sizeInPx}
-        className={cls(
-            props.color ? colorClassesMapping[props.color] : "",
-            "select-none shrink-0",
-            props.className
-        )}
-        style={props.style}
-        onClick={props.onClick}
-    />;
-});
-
-${componentName}.displayName = "${componentName}";
-`;
-
-        const filePath = path.join(componentsDir, `${componentName}.tsx`);
-        fs.writeFileSync(filePath, iconComponent);
-
-        fs.appendFileSync(path.join(__dirname, "../icons/index.ts"), `export * from "./components/${componentName}";\n`, { flag: "a" });
-    });
-}

package/src/styles.ts

@@ -1,141 +0,0 @@
-// ---------------------------------------------------------------------------
-// Control size scale — the single source of truth for how tall an inline
-// control is.
-//
-// Every control that sits on a line with another control (buttons, text
-// fields, selects, search bars, date fields, icon buttons, checkboxes) resolves
-// its height from this map, so a Button and a TextField at the same `size` are
-// pixel-identical and share a baseline. Before this existed each component
-// carried its own map and `size="large"` meant 42px on a Button and 64px on a
-// TextField.
-//
-// The scale is 28/32/40/48 — the rhythm IconButton and Checkbox already used.
-// `xl`/`2xl` continue above it and are button-only.
-// ---------------------------------------------------------------------------
-
-export type ControlSize = "smallest" | "small" | "medium" | "large";
-export type ButtonSize = ControlSize | "xl" | "2xl";
-
-export const CONTROL_HEIGHT = {
-    smallest: 28,
-    small: 32,
-    medium: 40,
-    large: 48,
-    xl: 56,
-    "2xl": 64
-} as const satisfies Record<ButtonSize, number>;
-
-/** Tailwind min-height class per control size. Keep in sync with CONTROL_HEIGHT. */
-export const controlHeightMixin = {
-    smallest: "min-h-[28px]",
-    small: "min-h-[32px]",
-    medium: "min-h-[40px]",
-    large: "min-h-[48px]",
-    xl: "min-h-[56px]",
-    "2xl": "min-h-[64px]"
-} as const satisfies Record<ButtonSize, string>;
-
-/** Horizontal padding paired with each size, so gutters scale with height. */
-export const controlPaddingMixin = {
-    smallest: "px-2",
-    small: "px-2",
-    medium: "px-3",
-    large: "px-4",
-    xl: "px-6",
-    "2xl": "px-10"
-} as const satisfies Record<ButtonSize, string>;
-
-export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
-
-/**
- * The focus ring — the single most-seen interaction state in the product, and
- * until now the least tended.
- *
- * Three dead declarations were removed rather than reshuffled:
- *   `outline-hidden` + `outline-none`  — the same instruction twice.
- *   `ring-primary` + `ring-primary/50` — the first could never win.
- *   `ring-opacity-50`                  — Tailwind v3 syntax. v4 expresses
- *                                        opacity with the `/50` slash form, so
- *                                        this generated nothing at all.
- *
- * What is left is the ring that was actually rendering, at 60% rather than 50%:
- * on `surface-900` the old value sat close enough to the field's own border to
- * be missed at a glance, which is the one thing a focus ring may not be.
- * `ring-offset-0` + a transparent offset stay — without them the ring draws a
- * white halo on dark surfaces.
- */
-export const focusedClasses = "z-30 outline-none ring-2 ring-primary/60 ring-offset-0 ring-offset-transparent";
-
-/**
- * Field surfaces.
- *
- * The inset top hairline is the whole difference between a field that reads as
- * a filled rectangle and one that reads as recessed into the surface. It is a
- * 1px inset highlight, not a gradient — the same device `.frame` already uses
- * on the marketing site, and the flat-surface rule stands.
- *
- * Light mode gets none: on a white page the highlight has nothing to catch.
- */
-export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055] dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.045)]";
-export const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
-export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
-
-/**
- * `transition-colors` here, because every other interactive surface in the kit
- * has it and fields did not — `cardClickableMixin` eases, a TextField snapped.
- * On a form of eight fields that difference is the whole feel of the screen.
- */
-export const fieldBackgroundHoverMixin = "transition-colors duration-150 hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
-
-export const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60";
-
-// ---------------------------------------------------------------------------
-// Surfaces: two kinds, and the difference is what the border is for.
-//
-// A **floating** surface — a menu, a dialog, a popover — sits OVER the page. It
-// has to be legible against whatever happens to be underneath it, so its edge
-// is definite: solid `surface-700`. That is `paperMixin`.
-//
-// A **page** surface — a card in the document flow — sits ON the page, and the
-// page is already `surface-950`/`surface-900`. A solid edge there reads as a
-// box drawn around content rather than as the content having a surface, which
-// is why every serious caller was overriding it: 53 `<Card>` sites in the SaaS
-// console alone re-declared this border at `/60`, the same value
-// `defaultBorderMixin` above has always used. The component was wrong and the
-// callers were right, so the component now says what they meant.
-// ---------------------------------------------------------------------------
-export const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
-export const cardMixin = "bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-700/60";
-
-/**
- * An inset well: code, a query, a log tail, a connection string.
- *
- * It must read as *recessed into* the surface holding it, which means darker
- * than that surface in dark mode — `surface-950` under a `surface-900` card.
- * The obvious-looking `surface-800` is a trap: `#111111` is LIGHTER than the
- * `#0a0a0a` card around it, so the well appears to float above the thing it is
- * set into. Pair with `font-mono`; this mixin carries the surface only.
- */
-export const codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 rounded-md";
-
-/**
- * The accent, used as TEXT.
- *
- * `--color-primary` (#0070F4) is tuned to be a fill — white text on it, it on
- * white. Read as text on our dark surfaces it lands at **4.36:1 on a
- * `surface-900` card** (measured), which is below AA for body-sized text, and
- * every accent link in the product sits on exactly that surface. On the page's
- * `surface-950` it only reaches 4.62:1, so the margin was never real.
- *
- * `--color-primary-light` is the same hue lifted 0.15 in OKLCH lightness and
- * measures **7.34:1** on the same card. It is indistinguishable as "the blue"
- * and comfortably legible, so dark mode swaps to it for text.
- *
- * Use this for links, accent labels and any accent-coloured type. It is NOT for
- * fills — a filled button keeps `bg-primary`, where the contrast question runs
- * the other way and #0070F4 is already correct.
- */
-export const accentTextMixin = "text-primary dark:text-primary-light";
-export const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
-export const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";

package/src/theme.css

@@ -1,168 +0,0 @@
-/* ---------------------------------------------------------------------------
- * Design tokens — the single source for fonts, type scale and colour.
- *
- * This lives in its own file for one reason: Tailwind only picks up `@theme`
- * from an UNLAYERED import. Consumers that pull the component styles in with
- * `@import "@rebasepro/ui/index.css" layer(base)` — which the marketing site
- * and the docs both do, to keep component CSS below their own utilities — get
- * the layer wrapped around everything transitively, and the theme silently
- * does not register. That is why the font stacks used to be copy-pasted into
- * every consumer's own `@theme`.
- *
- * Import this file unlayered, alongside the layered index.css:
- *
- *     @import "@rebasepro/ui/theme.css";
- *     @import "@rebasepro/ui/index.css" layer(base);
- * ------------------------------------------------------------------------- */
-
-@theme {
-    /* Font Families — Instrument Sans for headings, Inter for UI and body copy. */
-    --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, 'Helvetica', 'Arial', sans-serif;
-    --font-headers: 'Instrument Sans Variable', 'Instrument Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
-    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
-
-    /* Type scale — three tiers keyed to RENDERED SIZE, not tag depth.
-       Tailwind turns each into a `tracking-*` utility, so the admin panel, the
-       console and the marketing site all spell the same intent the same way
-       instead of each hardcoding its own em value. Pair display/title with
-       font-semibold and heading with font-medium. */
-    /* -0.025em, revised 2026-08-24 from -0.022em. The website's dev-only
-       TypeDevPanel has shipped `td: -25` as its "SHIPPED" default all along, so
-       every local preview and every design decision taken in front of one was
-       made at -0.025em while the built site served -0.022em. Of the panel's
-       eleven defaults these two — tracking and display weight — were the only
-       ones that did not match the tokens. Both are now true. */
-    --tracking-display: -0.025em; /* >= 30px — the headline tier; matches the marketing site */
-    --tracking-title: -0.018em;   /* 20-24px — section titles */
-    --tracking-heading: -0.01em;  /* <= 18px — labels; still a heading, not a headline */
-
-    /* Sub-`xs` type. These exist because the marketing site had ~450
-       hand-written `text-[10px]` / `text-[11px]` classes: the tier was real, it
-       just wasn't in the system, so every page improvised it.
-
-       In product UI there is exactly ONE sanctioned use — `typography-micro`,
-       the uppercase field label above a value — and it earns the exception by
-       never carrying a sentence. Everything a person actually *reads* stays at
-       `text-xs` (12px) or above. `--text-3xs` remains marketing-only. */
-    --text-2xs: 11px;
-    --text-2xs--line-height: 1.45;
-    --text-3xs: 10px;
-    --text-3xs--line-height: 1.4;
-
-    /* Display tier — above `text-4xl`, where the scale stops being a heading
-       and starts being a statement. Added 2026-08-24.
-
-       Fluid rather than fixed because the same token has to survive four
-       locales: German and French run 15-25% longer than English, and a fixed
-       112px headline that fits "The Postgres you already have" does not fit
-       "Das Postgres, das Sie bereits haben". The `vw` middle term shrinks
-       before it can overflow; the `rem` floor protects small screens, where
-       the type is already proportionally large.
-
-       Both carry their own line-height and tracking: at this size 1.1 reads as
-       a gap and -0.025em reads as loose. Weight stays on the 600 ceiling —
-       this tier separates itself by SIZE, which is the whole point of adding
-       it rather than reaching for 700. */
-    --text-display-2: clamp(2.25rem, 4.4vw, 4rem);      /* 36 -> 64px */
-    --text-display-2--line-height: 1.0;
-    --text-display-2--letter-spacing: -0.028em;
-    /* 7.2vw capped at 7rem was too much: on a wide window the headline filled
-       the viewport on its own and pushed the install terminal below the fold,
-       which breaks the rule the hero exists to satisfy (SITE-STORY §5 — the
-       hero carries a product artifact). Still ~1.7x the 48px it replaced. */
-    --text-display-1: clamp(2.5rem, 5.2vw, 4.75rem);    /* 40 -> 76px */
-    --text-display-1--line-height: 0.94;
-    --text-display-1--letter-spacing: -0.032em;
-
-    /* Control heights — the one scale every inline control resolves to, so a
-       Button, TextField and Select at the same size share a baseline. Mirrors
-       CONTROL_HEIGHT in styles.ts; that is the source for React components,
-       these are for everyone else.
-
-       Marketing pages and docs are plain markup and cannot import a JS mixin,
-       so without these they hand-roll their own paddings and drift: the site's
-       two hero CTAs sat at 52px and 54px, on no scale and not even matching
-       each other. Reach for `min-h-(--control-xl)` instead of a magic number. */
-    --control-smallest: 28px;
-    --control-small: 32px;
-    --control-medium: 40px;
-    --control-large: 48px;
-    --control-xl: 56px;   /* buttons only */
-    --control-2xl: 64px;  /* buttons only */
-
-    /* Colors */
-    --color-primary: #0070F4;
-    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
-    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
-    /* rose-600. #FF5B79 was only 2.99:1 against white, so white text on it
-       and it as text both failed WCAG AA. Same hue family, 4.70:1. */
-    --color-secondary: #E11D48;
-    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
-    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
-
-    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
-    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
-
-    /* Field Colors */
-    --color-field-disabled: rgb(224 224 226);
-    --color-field-disabled-dark: rgb(35 35 37);
-
-    /* Text Colors — using opaque values so icon strokes render solidly */
-    --color-text-primary: #212121;
-    /* #737373, not #757575. Two units, and they are the two that matter.
-       The app's light page ground is #fafafa, not #ffffff, and #757575 lands at
-       4.41:1 there — under AA for the 14px type this token carries. It clears
-       4.5 only against pure white, which is not a surface the product actually
-       uses. Every field label in light mode was failing by a whisker.
-       #737373 measures 4.54:1 on #fafafa and 4.74:1 on #ffffff, so it passes on
-       both grounds instead of the theoretical one. Same fix, and the same
-       reasoning, as the `--color-surface-500` move recorded below. */
-    --color-text-secondary: #737373;
-    /* #8b8b8b, not #9e9e9e. Measured against the field fill a disabled label
-       actually sits on (`surface-accent-200/50` over #fafafa ≈ #eef1f5),
-       #9e9e9e reached 2.36:1 — present, but not readable.
-       Full AA is not achievable here and should not be chased: 4.5:1 on that
-       fill needs #6e6e6e, which is DARKER than the #737373 an ENABLED label
-       uses, so the disabled state would read as the emphasised one. WCAG 1.4.3
-       exempts inactive controls for exactly this reason.
-       #8b8b8b lands at ~3:1 — legible at a glance, still unmistakably muted
-       against its enabled neighbour. */
-    --color-text-disabled: #8b8b8b;
-    --color-text-primary-dark: #ffffff;
-    --color-text-secondary-dark: #a0a0a9;
-    --color-text-disabled-dark: #757580;
-
-    /* Surface Colors */
-    --color-surface-50: #fafafa;
-    --color-surface-100: #f5f5f5;
-    --color-surface-200: #e5e5e5;
-    --color-surface-300: #d4d4d4;
-    --color-surface-400: #a3a3a3;
-    /* Muted text: captions, nav descriptions, table headers, eyebrows.
-       #737373 was tuned for light and measured 4.74:1 on white but only
-       4.43:1 on #000 and 4.18:1 on #0a0a0a, so every dark surface — the
-       marketing site, the console, the admin panel in dark mode — carried a
-       muted tier below AA. #797979 is the balance point: it is the single
-       value where the white and #111111 curves cross, at 4.35:1 on each,
-       and it clears 4.5:1 outright on the two backgrounds that carry most of
-       this token (4.82:1 on #000, 4.55:1 on #0a0a0a). */
-    --color-surface-500: #797979;
-    --color-surface-600: #404040;
-    --color-surface-700: #262626;
-    --color-surface-800: #111111;
-    --color-surface-900: #0a0a0a;
-    --color-surface-950: #000000;
-
-    /* Surface Accent Colors */
-    --color-surface-accent-50: #f8fafc;
-    --color-surface-accent-100: #f1f5f9;
-    --color-surface-accent-200: #e2e8f0;
-    --color-surface-accent-300: #cbd5e1;
-    --color-surface-accent-400: #94a3b8;
-    --color-surface-accent-500: #64748b;
-    --color-surface-accent-600: #475569;
-    --color-surface-accent-700: #334155;
-    --color-surface-accent-800: #1e293b;
-    --color-surface-accent-900: #172033;
-    --color-surface-accent-950: #0f172a;
-}

package/src/util/chip_colors.ts

@@ -1,242 +0,0 @@
-import { hashString } from "./hash";
-
-export type ChipColorScheme = {
-    color: string;
-    text: string;
-    /** Background color override for dark mode */
-    darkColor?: string;
-    /** Text color override for dark mode */
-    darkText?: string;
-    /**
-     * Ink for the `outlined` variant, which has no fill of its own.
-     *
-     * `text`/`darkText` are the ink ON the chip's own background. An outlined
-     * chip drops that background and sits on the PAGE, so the same value is
-     * being asked to be legible against two different surfaces at once — and
-     * for most hues it cannot be. Splitting the roles is what lets the filled
-     * ink follow its fill (often dark ink on a bright chip) without dragging
-     * the outlined variant down with it.
-     */
-    outlineText?: string;
-    /** Outlined-variant ink in dark mode. */
-    darkOutlineText?: string;
-}
-
-/* ────────────────────────────────────────────────────────────────────────────
-   Contrast
-   ────────────────────────────────────────────────────────────────────────────
-
-   Chip ink is DERIVED, not hand-picked. It used to be written down per tone —
-   `"#fff"` on every `solid` background, the hue's `pale` on every `deep` one —
-   and an audit of all 120 hue/tone/mode pairs found **63 of them below WCAG AA**.
-   The worst was white on `teal.solid` at **1.76:1**, which is not a near miss;
-   it is unreadable. The palette is an Airtable-style one whose mid stops are
-   bright enough to need dark ink, and hardcoding light ink ignored that.
-
-   So the ink is measured against the background it will actually sit on, and
-   pushed toward black or white only as far as it must go to clear the floor.
-   Starting from the hue's own dark/light tints rather than from flat `#000`
-   and `#fff` keeps the family looking like a family: `blue.solid` gets a very
-   dark navy, not black.
-
-   Deriving it also means a new hue cannot be added below AA — there is no
-   per-tone ink to forget to check. */
-
-/** WCAG floor, plus a little margin so rounding cannot drop a pair below 4.5. */
-const CONTRAST_TARGET = 4.6;
-
-/** Page backgrounds the outlined variant sits on: `bg-white` and `surface-950`. */
-const PAGE_LIGHT = "#ffffff";
-const PAGE_DARK = "#0a0a0a";
-
-function toRgb(hex: string): [number, number, number] {
-    let h = hex.replace("#", "");
-    if (h.length === 3) h = h.split("").map(c => c + c).join("");
-    return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16)) as [number, number, number];
-}
-
-function toHex(rgb: number[]): string {
-    return "#" + rgb.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
-}
-
-function relativeLuminance(hex: string): number {
-    const [r, g, b] = toRgb(hex).map(v => {
-        const c = v / 255;
-        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    });
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-
-export function contrastRatio(a: string, b: string): number {
-    const x = relativeLuminance(a);
-    const y = relativeLuminance(b);
-    const [hi, lo] = x > y ? [x, y] : [y, x];
-    return (hi + 0.05) / (lo + 0.05);
-}
-
-function mixHex(from: string, to: string, t: number): string {
-    const A = toRgb(from);
-    const B = toRgb(to);
-    return toHex([0, 1, 2].map(i => A[i] + (B[i] - A[i]) * t));
-}
-
-/**
- * Walk a tinted ink toward black or white until it clears the floor on `bg`.
- *
- * Stops at the first passing step rather than going all the way, so the ink
- * keeps as much of its hue as legibility allows.
- */
-function push(base: string, toward: string, bg: string): string {
-    for (let t = 0; t <= 1.0001; t += 0.02) {
-        const candidate = mixHex(base, toward, t);
-        if (contrastRatio(candidate, bg) >= CONTRAST_TARGET) return candidate;
-    }
-    return toward;
-}
-
-/** The ink for a chip filled with `bg`: whichever direction has more headroom. */
-function inkOn(stops: HueStops, bg: string): string {
-    const dark = push(stops.text, "#000000", bg);
-    const light = push(stops.onDeep ?? stops.pale, "#ffffff", bg);
-    return contrastRatio(dark, bg) >= contrastRatio(light, bg) ? dark : light;
-}
-
-/**
- * The hues a chip can take, and the four stops each one is built from.
- *
- * `pale` and `mid` are backgrounds for dark text; `solid` and `deep` are
- * backgrounds for light text. `text` is the dark ink used on the two pale
- * stops, and `onDeep` the light ink on `deep` — it defaults to `pale`, and is
- * only set where a hue needs a tint of its own to stay legible.
- */
-type HueStops = {
-    pale: string;
-    mid: string;
-    solid: string;
-    deep: string;
-    text: string;
-    onDeep?: string;
-}
-
-export const CHIP_HUES = [
-    "blue", "cyan", "teal", "green", "yellow", "orange", "red", "pink", "purple", "gray",
-    "indigo", "violet", "fuchsia", "rose", "emerald"
-] as const;
-
-export type ChipHue = typeof CHIP_HUES[number];
-
-/**
- * How light or saturated a chip of a given hue is.
- *
- * A hue on its own (`"blue"`) means `Lighter` — the tone the picker offers and
- * the one seeded chips used to be limited to.
- */
-export type ChipTone = "Lighter" | "Light" | "Dark" | "Darker";
-
-export type ChipColorKey = ChipHue | `${ChipHue}${ChipTone}`;
-
-const HUE_STOPS: Record<ChipHue, HueStops> = {
-    blue: { pale: "#cfdfff", mid: "#9cc7ff", solid: "#2d7ff9", deep: "#2750ae", text: "#102046" },
-    cyan: { pale: "#d0f0fd", mid: "#77d1f3", solid: "#18bfff", deep: "#0b76b7", text: "#04283f" },
-    teal: { pale: "#c2f5e9", mid: "#72ddc3", solid: "#20d9d2", deep: "#06a09b", text: "#012524", onDeep: "#daf3e9" },
-    green: { pale: "#d1f7c4", mid: "#93e088", solid: "#20c933", deep: "#338a17", text: "#0b1d05" },
-    yellow: { pale: "#ffeab6", mid: "#ffd66e", solid: "#fcb400", deep: "#b87503", text: "#3b2501" },
-    orange: { pale: "#fee2d5", mid: "#ffa981", solid: "#ff6f2c", deep: "#d74d26", text: "#6b2613" },
-    red: { pale: "#ffdce5", mid: "#ff9eb7", solid: "#f82b60", deep: "#ba1e45", text: "#4c0c1c" },
-    pink: { pale: "#ffdaf6", mid: "#f99de2", solid: "#ff08c2", deep: "#b2158b", text: "#400832" },
-    purple: { pale: "#ede2fe", mid: "#cdb0ff", solid: "#8b46ff", deep: "#6b1cb0", text: "#280b42" },
-    gray: { pale: "#eeeeee", mid: "#cccccc", solid: "#666666", deep: "#444444", text: "#040404" },
-    indigo: { pale: "#e0e7ff", mid: "#a5b4fc", solid: "#6366f1", deep: "#4f46e5", text: "#312e81" },
-    violet: { pale: "#ede9fe", mid: "#c4b5fd", solid: "#8b5cf6", deep: "#7c3aed", text: "#4c1d95" },
-    fuchsia: { pale: "#fae8ff", mid: "#f0abfc", solid: "#d946ef", deep: "#c026d3", text: "#701a75" },
-    rose: { pale: "#ffe4e6", mid: "#fda4af", solid: "#f43f5e", deep: "#e11d48", text: "#881337" },
-    emerald: { pale: "#d1fae5", mid: "#6ee7b7", solid: "#10b981", deep: "#059669", text: "#064e3b" }
-};
-
-/**
- * One tone of one hue.
- *
- * Backgrounds are the palette's, unchanged — the stops were not the problem and
- * moving them would have restyled every chip in the product. Only the ink moved,
- * and it moved to wherever the measurement says it has to be.
- */
-function tone(stops: HueStops, chipTone: ChipTone): ChipColorScheme {
-    // The outlined variant is a property of the HUE, not of the tone: it has no
-    // fill, so every tone of a hue sits on the same page background and wants
-    // the same ink.
-    const outline = {
-        outlineText: push(stops.text, "#000000", PAGE_LIGHT),
-        darkOutlineText: push(stops.onDeep ?? stops.pale, "#ffffff", PAGE_DARK)
-    };
-
-    const filled = (light: string, dark: string): ChipColorScheme => ({
-        color: light,
-        text: inkOn(stops, light),
-        darkColor: dark,
-        darkText: inkOn(stops, dark),
-        ...outline
-    });
-
-    switch (chipTone) {
-        case "Light":
-            return filled(stops.mid, stops.solid);
-        case "Dark":
-            return filled(stops.solid, stops.solid);
-        case "Darker":
-            return filled(stops.deep, stops.deep);
-        case "Lighter":
-        default:
-            return filled(stops.pale, stops.deep);
-    }
-}
-
-const CHIP_TONES: ChipTone[] = ["Lighter", "Light", "Dark", "Darker"];
-
-function buildChipColors(): Record<ChipColorKey, ChipColorScheme> {
-    const colors = {} as Record<ChipColorKey, ChipColorScheme>;
-    for (const hue of CHIP_HUES) {
-        const stops = HUE_STOPS[hue];
-        for (const chipTone of CHIP_TONES) {
-            colors[`${hue}${chipTone}` as ChipColorKey] = tone(stops, chipTone);
-        }
-        // The bare hue is the lightest tone, which is what every existing
-        // `color: "blue"` in a collection config already means.
-        colors[hue] = tone(stops, "Lighter");
-    }
-    return colors;
-}
-
-/**
- * Every chip scheme, keyed by hue and tone.
- *
- * This table used to hold four tones per hue and was flattened to one, which
- * left `blueDark`, `redDarker` and friends resolving to `undefined` — a chip
- * with a colour in its config rendering with no colour at all — and left seeded
- * chips picking from ten schemes, so a five-value enum routinely drew the same
- * background three times. The tones are generated from {@link HUE_STOPS} now,
- * so a new hue brings its whole family with it.
- */
-export const CHIP_COLORS: Record<ChipColorKey, ChipColorScheme> = buildChipColors();
-
-/**
- * The keys a seeded chip may be assigned, in a stable order.
- *
- * The bare-hue aliases are excluded: they are the same scheme as `<hue>Lighter`
- * and would make the palest tone twice as likely as any other.
- */
-export const CHIP_SEED_KEYS: ChipColorKey[] = CHIP_HUES.flatMap(
-    hue => CHIP_TONES.map(chipTone => `${hue}${chipTone}` as ChipColorKey));
-
-// `string & {}` keeps the known keys in autocomplete while still accepting the
-// arbitrary column colours a board hands over.
-export function getColorSchemeForKey(key: ChipColorKey | (string & {})): ChipColorScheme {
-    // An unknown key is a config that names a colour this build does not have —
-    // a renamed hue, or a value typed by hand. Seeding from the key keeps it
-    // coloured and keeps it stable, rather than dropping it to no colour.
-    return CHIP_COLORS[key as ChipColorKey] ?? getColorSchemeForSeed(String(key));
-}
-
-export function getColorSchemeForSeed(seed: string): ChipColorScheme {
-    const hash: number = hashString(seed);
-    return CHIP_COLORS[CHIP_SEED_KEYS[hash % CHIP_SEED_KEYS.length]];
-}

package/src/util/cls.ts

@@ -1,8 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cls(...classes: ClassValue[]) {
-    return twMerge(clsx(classes));
-}
-
-

package/src/util/debounce.ts

@@ -1,28 +0,0 @@
-/**
- * @ignore
- */
-
-export function debounce<T extends (...args: any[]) => unknown>(func: T, wait = 166) {
-    let timeout: ReturnType<typeof setTimeout>;
-
-    function debounced(this: unknown, ...args: Parameters<T>) {
-        const later = () => {
-            func.apply(this, args);
-        };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-    }
-
-    debounced.clear = () => {
-        clearTimeout(timeout);
-    };
-
-    return debounced as T & Cancelable;
-}
-
-/**
- * @ignore
- */
-export interface Cancelable {
-    clear(): void;
-}