@logicplanes/kaeso-ui 0.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,79 @@
+export * from "./utils/index.js";
+export * from "./i18n/index.js";
+export * from "./theme/index.js";
+export * from "./components/icon/index.js";
+export * from "./components/kbd/index.js";
+export * from "./components/tooltip/index.js";
+export * from "./components/text/index.js";
+export * from "./components/heading/index.js";
+export * from "./components/label/index.js";
+export * from "./components/link/index.js";
+export * from "./components/code/index.js";
+export * from "./components/logo/index.js";
+export * from "./components/separator/index.js";
+export * from "./components/visually-hidden/index.js";
+export * from "./components/portal/index.js";
+export * from "./components/scroll-area/index.js";
+export * from "./components/layout/index.js";
+export * from "./components/surface/index.js";
+export * from "./components/loader/index.js";
+export * from "./components/button/index.js";
+export * from "./components/icon-button/index.js";
+export * from "./components/button-group/index.js";
+export * from "./components/copy-button/index.js";
+export { useCopy } from "./hooks/use-copy.js";
+export { useTruncated } from "./hooks/use-truncated.js";
+export * from "./components/field/index.js";
+export * from "./components/input/index.js";
+export * from "./components/tag/index.js";
+export * from "./components/slider/index.js";
+export * from "./components/checkbox/index.js";
+export * from "./components/radio/index.js";
+export * from "./components/switch/index.js";
+export * from "./components/segmented/index.js";
+export * from "./components/tabs/index.js";
+export * from "./components/menu/index.js";
+export * from "./components/select/index.js";
+export * from "./components/swap-text/index.js";
+export * from "./components/popover/index.js";
+export * from "./components/combobox/index.js";
+export * from "./components/skeleton/index.js";
+export * from "./components/sidebar/index.js";
+export * from "./components/app-frame/index.js";
+export * from "./components/theme-menu/index.js";
+export * from "./components/calendar/index.js";
+export * from "./components/date-picker/index.js";
+export * from "./components/filter-chip/index.js";
+export * from "./components/display-options/index.js";
+export * from "./components/dialog/index.js";
+export * from "./components/sheet/index.js";
+export * from "./components/command-palette/index.js";
+export * from "./components/toast/index.js";
+export * from "./components/pagination/index.js";
+export * from "./components/toc/index.js";
+export * from "./components/toolbar/index.js";
+export * from "./components/filter-row/index.js";
+export * from "./components/page-header/index.js";
+export * from "./components/banner/index.js";
+export * from "./components/empty/index.js";
+export * from "./components/meter/index.js";
+export * from "./components/status-dot/index.js";
+export * from "./components/code-block/index.js";
+export * from "./components/badge/index.js";
+export * from "./components/avatar/index.js";
+export * from "./components/stat/index.js";
+export * from "./components/key-value/index.js";
+export * from "./components/qr-code/index.js";
+export * from "./components/collapsible/index.js";
+export * from "./components/timeline/index.js";
+export * from "./components/flow/index.js";
+export * from "./components/list/index.js";
+export * from "./components/data-table/index.js";
+export * from "./components/table/index.js";
+export * from "./components/settings/index.js";
+export * from "./components/section/index.js";
+export * from "./components/charts/index.js";
+export * from "./components/kaeso/index.js";
+export * from "./blocks/pages/index.js";
+export * from "./blocks/delete-resource/index.js";
+export * from "./blocks/resource-list/index.js";

package/dist/types/theme/index.d.ts

@@ -0,0 +1 @@
+export * from "./theme-provider.js";

package/dist/types/theme/theme-provider.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export type ThemePreference = "system" | "light" | "dark";
+export type ResolvedTheme = "light" | "dark";
+export declare const THEME_STORAGE_KEY = "kaeso:theme";
+export declare function installFocusModality(): void;
+export declare const themeScript = "(function(){var d=document.documentElement;try{var t=localStorage.getItem(\"kaeso:theme\");if(t===\"light\"||t===\"dark\"){d.setAttribute(\"data-theme\",t)}}catch(e){}if(!window.__kModality){window.__kModality=1;document.addEventListener(\"pointerdown\",function(){d.setAttribute(\"data-k-pointer\",\"\")},true);document.addEventListener(\"keydown\",function(e){if(!e.metaKey&&!e.ctrlKey&&!e.altKey){d.removeAttribute(\"data-k-pointer\")}},true)}})();";
+interface ThemeContextValue {
+    theme: ThemePreference;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: ThemePreference) => void;
+}
+export interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: ThemePreference | undefined;
+    target?: (() => HTMLElement) | undefined;
+}
+export declare function ThemeProvider({ children, defaultTheme, target }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ThemeProvider {
+    var displayName: string;
+}
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/types/utils/arrow-focus.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardEvent } from "react";
+export declare function arrowFocus(e: KeyboardEvent<HTMLElement>): void;

package/dist/types/utils/cn.d.ts

@@ -0,0 +1,370 @@
+import { type ClassValue } from "clsx";
+export declare function kaesoMergeConfig(): {
+    cacheSize: number;
+    theme: {};
+    classGroups: {
+        aspect: {
+            aspect: (string | ((value: string) => boolean))[];
+        }[];
+        container: string[];
+        "container-type": {
+            "@container": (string | ((value: string) => boolean))[];
+        }[];
+        "box-decoration": {
+            "box-decoration": string[];
+        }[];
+        box: {
+            box: string[];
+        }[];
+        display: string[];
+        sr: string[];
+        isolation: string[];
+        "object-fit": {
+            object: string[];
+        }[];
+        overflow: {
+            overflow: string[];
+        }[];
+        "overflow-x": {
+            "overflow-x": string[];
+        }[];
+        "overflow-y": {
+            "overflow-y": string[];
+        }[];
+        overscroll: {
+            overscroll: string[];
+        }[];
+        position: string[];
+        inset: {
+            inset: (string | ((value: string) => boolean))[];
+        }[];
+        "inset-x": {
+            "inset-x": (string | ((value: string) => boolean))[];
+        }[];
+        "inset-y": {
+            "inset-y": (string | ((value: string) => boolean))[];
+        }[];
+        top: {
+            top: (string | ((value: string) => boolean))[];
+        }[];
+        right: {
+            right: (string | ((value: string) => boolean))[];
+        }[];
+        bottom: {
+            bottom: (string | ((value: string) => boolean))[];
+        }[];
+        left: {
+            left: (string | ((value: string) => boolean))[];
+        }[];
+        visibility: string[];
+        z: {
+            z: (string | ((value: string) => boolean))[];
+        }[];
+        basis: {
+            basis: (string | ((value: string) => boolean))[];
+        }[];
+        "flex-direction": {
+            flex: string[];
+        }[];
+        "flex-wrap": {
+            flex: string[];
+        }[];
+        flex: {
+            flex: (string | ((value: string) => boolean))[];
+        }[];
+        grow: {
+            grow: (string | ((value: string) => boolean))[];
+        }[];
+        shrink: {
+            shrink: (string | ((value: string) => boolean))[];
+        }[];
+        order: {
+            order: (string | ((value: string) => boolean))[];
+        }[];
+        "grid-cols": {
+            "grid-cols": (string | ((value: string) => boolean))[];
+        }[];
+        "col-start-end": {
+            col: (string | ((value: string) => boolean) | {
+                span: (string | ((value: string) => boolean))[];
+            })[];
+        }[];
+        "col-start": {
+            "col-start": (string | ((value: string) => boolean))[];
+        }[];
+        "grid-rows": {
+            "grid-rows": (string | ((value: string) => boolean))[];
+        }[];
+        "row-start-end": {
+            row: (string | ((value: string) => boolean) | {
+                span: (string | ((value: string) => boolean))[];
+            })[];
+        }[];
+        "row-start": {
+            "row-start": (string | ((value: string) => boolean))[];
+        }[];
+        gap: {
+            gap: ((value: string) => boolean)[];
+        }[];
+        "gap-x": {
+            "gap-x": ((value: string) => boolean)[];
+        }[];
+        "gap-y": {
+            "gap-y": ((value: string) => boolean)[];
+        }[];
+        "justify-content": {
+            justify: string[];
+        }[];
+        "justify-items": {
+            "justify-items": string[];
+        }[];
+        "align-content": {
+            content: string[];
+        }[];
+        "align-items": {
+            items: (string | {
+                baseline: string[];
+            })[];
+        }[];
+        "align-self": {
+            self: (string | {
+                baseline: string[];
+            })[];
+        }[];
+        p: {
+            p: ((value: string) => boolean)[];
+        }[];
+        px: {
+            px: ((value: string) => boolean)[];
+        }[];
+        py: {
+            py: ((value: string) => boolean)[];
+        }[];
+        pt: {
+            pt: ((value: string) => boolean)[];
+        }[];
+        pr: {
+            pr: ((value: string) => boolean)[];
+        }[];
+        pb: {
+            pb: ((value: string) => boolean)[];
+        }[];
+        pl: {
+            pl: ((value: string) => boolean)[];
+        }[];
+        m: {
+            m: (string | ((value: string) => boolean))[];
+        }[];
+        mx: {
+            mx: (string | ((value: string) => boolean))[];
+        }[];
+        my: {
+            my: (string | ((value: string) => boolean))[];
+        }[];
+        ms: {
+            ms: (string | ((value: string) => boolean))[];
+        }[];
+        mt: {
+            mt: (string | ((value: string) => boolean))[];
+        }[];
+        mr: {
+            mr: (string | ((value: string) => boolean))[];
+        }[];
+        mb: {
+            mb: (string | ((value: string) => boolean))[];
+        }[];
+        ml: {
+            ml: (string | ((value: string) => boolean))[];
+        }[];
+        size: {
+            size: (string | ((value: string) => boolean))[];
+        }[];
+        w: {
+            w: (string | ((value: string) => boolean))[];
+        }[];
+        "min-w": {
+            "min-w": (string | ((value: string) => boolean))[];
+        }[];
+        "max-w": {
+            "max-w": (string | ((value: string) => boolean))[];
+        }[];
+        h: {
+            h: (string | ((value: string) => boolean))[];
+        }[];
+        "min-h": {
+            "min-h": (string | ((value: string) => boolean))[];
+        }[];
+        "max-h": {
+            "max-h": (string | ((value: string) => boolean))[];
+        }[];
+        "font-size": {
+            text: (string | ((value: string) => boolean))[];
+        }[];
+        "font-style": string[];
+        "font-weight": {
+            font: (string | ((value: string) => boolean))[];
+        }[];
+        "font-family": {
+            font: ((value: string) => boolean)[];
+        }[];
+        "fvn-spacing": string[];
+        "line-clamp": {
+            "line-clamp": (string | ((value: string) => boolean))[];
+        }[];
+        leading: {
+            leading: (string | ((value: string) => boolean))[];
+        }[];
+        "text-alignment": {
+            text: string[];
+        }[];
+        "text-color": {
+            text: (() => boolean)[];
+        }[];
+        "text-decoration": string[];
+        "text-decoration-thickness": {
+            decoration: (string | ((value: string) => boolean))[];
+        }[];
+        "text-decoration-color": {
+            decoration: (() => boolean)[];
+        }[];
+        "underline-offset": {
+            "underline-offset": (string | ((value: string) => boolean))[];
+        }[];
+        "text-overflow": string[];
+        "text-wrap": {
+            text: string[];
+        }[];
+        "vertical-align": {
+            align: (string | ((value: string) => boolean))[];
+        }[];
+        whitespace: {
+            whitespace: string[];
+        }[];
+        break: {
+            break: string[];
+        }[];
+        wrap: {
+            wrap: string[];
+        }[];
+        "bg-color": {
+            bg: (() => boolean)[];
+        }[];
+        rounded: {
+            rounded: (string | ((value: string) => boolean))[];
+        }[];
+        "rounded-r": {
+            "rounded-r": (string | ((value: string) => boolean))[];
+        }[];
+        "rounded-l": {
+            "rounded-l": (string | ((value: string) => boolean))[];
+        }[];
+        "outline-style": {
+            outline: string[];
+        }[];
+        "outline-offset": {
+            "outline-offset": ((value: string) => boolean)[];
+        }[];
+        "outline-w": {
+            outline: (string | ((value: string) => boolean))[];
+        }[];
+        "outline-color": {
+            outline: (() => boolean)[];
+        }[];
+        shadow: {
+            shadow: (string | ((value: string) => boolean))[];
+        }[];
+        "ring-w": {
+            ring: (string | ((value: string) => boolean))[];
+        }[];
+        "ring-color": {
+            ring: (() => boolean)[];
+        }[];
+        opacity: {
+            opacity: ((value: string) => boolean)[];
+        }[];
+        filter: {
+            filter: (string | ((value: string) => boolean))[];
+        }[];
+        "border-collapse": {
+            border: string[];
+        }[];
+        "table-layout": {
+            table: string[];
+        }[];
+        transition: {
+            transition: (string | ((value: string) => boolean))[];
+        }[];
+        duration: {
+            duration: (string | ((value: string) => boolean))[];
+        }[];
+        ease: {
+            ease: (string | ((value: string) => boolean))[];
+        }[];
+        animate: {
+            animate: (string | ((value: string) => boolean))[];
+        }[];
+        rotate: {
+            rotate: (string | ((value: string) => boolean))[];
+        }[];
+        "translate-x": {
+            "translate-x": (string | ((value: string) => boolean))[];
+        }[];
+        "caret-color": {
+            caret: (() => boolean)[];
+        }[];
+        cursor: {
+            cursor: (string | ((value: string) => boolean))[];
+        }[];
+        "pointer-events": {
+            "pointer-events": string[];
+        }[];
+        resize: {
+            resize: string[];
+        }[];
+        "scrollbar-w": {
+            scrollbar: string[];
+        }[];
+        "scroll-mt": {
+            "scroll-mt": ((value: string) => boolean)[];
+        }[];
+        "snap-align": {
+            snap: string[];
+        }[];
+        "snap-stop": {
+            snap: string[];
+        }[];
+        touch: {
+            touch: string[];
+        }[];
+        select: {
+            select: string[];
+        }[];
+        material: string[];
+        focus: string[];
+        motion: string[];
+    };
+    conflictingClassGroups: {
+        overflow: string[];
+        inset: string[];
+        "inset-x": string[];
+        "inset-y": string[];
+        flex: string[];
+        gap: string[];
+        p: string[];
+        px: string[];
+        py: string[];
+        m: string[];
+        mx: string[];
+        my: string[];
+        size: string[];
+        "font-size": string[];
+        "line-clamp": string[];
+        rounded: string[];
+    };
+    conflictingClassGroupModifiers: {
+        "font-size": string[];
+    };
+    postfixLookupClassGroups: string[];
+    orderSensitiveModifiers: string[];
+};
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/utils/dev.d.ts

@@ -0,0 +1,4 @@
+export declare function devWarn(message: string): void;
+export declare function warnStylingClassName(component: string, className: string | undefined): void;
+export declare function warnMissingName(component: string, hasName: boolean): void;
+export declare function warnControlled(component: string, prop: string, value: unknown, handler: unknown): void;

package/dist/types/utils/field-press.d.ts

@@ -0,0 +1,2 @@
+import type { MouseEvent } from "react";
+export declare function focusInputOnPress(e: MouseEvent<HTMLElement>): void;

package/dist/types/utils/index.d.ts

@@ -0,0 +1,8 @@
+export { cn } from "./cn.js";
+export { resolveVariant, type VariantAxis } from "./variants.js";
+export { devWarn, warnStylingClassName, warnMissingName, warnControlled } from "./dev.js";
+export { LinkProvider, useLinkComponent, isExternalHref, type LinkComponent, type LinkComponentProps } from "./link-provider.js";
+export { useControllable } from "./use-controllable.js";
+export { PortalContainer, usePortalContainer, pageBoundary } from "./portal-context.js";
+export { InsetContent, useInset } from "./inset.js";
+export type { StatusTone } from "./tone.js";

package/dist/types/utils/inset.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export declare function InsetContent({ children, inset }: {
+    children: ReactNode;
+    inset?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useInset(): boolean;

package/dist/types/utils/lazy-module.d.ts

@@ -0,0 +1,8 @@
+export interface LazyModule<T> {
+    current: () => T | undefined;
+    load: () => Promise<T>;
+}
+export declare function lazyModulesSettled(): Promise<void>;
+export declare function lazyModule<T>(load: () => Promise<T>): LazyModule<T>;
+export declare function preload<T>(m: LazyModule<T>): void;
+export declare function useLazyModule<T>(m: LazyModule<T>, wanted: boolean): T | undefined;

package/dist/types/utils/link-provider.d.ts

@@ -0,0 +1,15 @@
+import { type AnchorHTMLAttributes, type ComponentType, type ReactNode, type Ref } from "react";
+export type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    ref?: Ref<HTMLAnchorElement>;
+};
+export type LinkComponent = ComponentType<LinkComponentProps>;
+export declare function LinkProvider({ component, children }: {
+    component: LinkComponent;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace LinkProvider {
+    var displayName: string;
+}
+export declare function useLinkComponent(): LinkComponent;
+export declare function isExternalHref(href: string): boolean;

package/dist/types/utils/portal-context.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export declare function PortalContainer({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace PortalContainer {
+    var displayName: string;
+}
+export declare function usePortalContainer(): HTMLElement | undefined;
+export declare function pageBoundary(): Element | "clipping-ancestors";

package/dist/types/utils/restore-focus.d.ts

@@ -0,0 +1,4 @@
+export declare function useRestoreFocus(open: boolean | undefined, first?: () => HTMLElement | boolean): {
+    initialFocus: () => boolean | HTMLElement;
+    finalFocus: () => true | HTMLElement;
+};

package/dist/types/utils/safe-href.d.ts

@@ -0,0 +1 @@
+export declare function safeHref(href: string): string | null;

package/dist/types/utils/tone.d.ts

@@ -0,0 +1,2 @@
+export type StatusTone = "success" | "warning" | "danger" | "info";
+export declare const STATUS_TONE_TEXT: Record<StatusTone, string>;

package/dist/types/utils/use-controllable.d.ts

@@ -0,0 +1 @@
+export declare function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T) => void];

package/dist/types/utils/variants.d.ts

@@ -0,0 +1,5 @@
+export type VariantAxis = Record<string, {
+    readonly classes: string;
+    readonly description: string;
+}>;
+export declare function resolveVariant<A extends VariantAxis>(axis: A, value: keyof A | undefined, fallback: keyof A): string;

package/dist/types/utils/when-idle.d.ts

@@ -0,0 +1 @@
+export declare function whenIdle(run: () => void): () => void;

package/dist/utils.js

@@ -0,0 +1,9 @@
+"use client";
+import { t as e } from "./chunks/cn-CidVUKMm.js";
+import { t } from "./chunks/utils-CdH72WEp.js";
+import { i as n, n as r, r as i, t as a } from "./chunks/dev-CR1p7gCm.js";
+import { n as o, r as s, t as c } from "./chunks/link-provider---9JdxTg.js";
+import { t as l } from "./chunks/use-controllable-B5Fd12Bx.js";
+import { n as u, r as d, t as f } from "./chunks/portal-context-BBbzDKmY.js";
+import { n as p, t as m } from "./chunks/inset-BLMdxX4I.js";
+export { m as InsetContent, c as LinkProvider, f as PortalContainer, e as cn, a as devWarn, o as isExternalHref, u as pageBoundary, t as resolveVariant, l as useControllable, p as useInset, s as useLinkComponent, d as usePortalContainer, r as warnControlled, i as warnMissingName, n as warnStylingClassName };

package/foundations/accessibility.md

@@ -0,0 +1,41 @@
+# Accessibility
+
+Every component works with a keyboard, a screen reader, a coarse pointer and the system's contrast and motion settings. Keep it that way when you compose them.
+
+## Foundations
+
+- Behavior comes from Base UI: roles, states, focus management and keyboard interaction follow the WAI-ARIA practices.
+- **Targets**: nothing interactive is smaller than 32px; with a coarse pointer, rows and menu items grow to 44px.
+- **Text**: 14px base, 12px minimum. Every text and background pair is measured against WCAG 2.2 (4.5:1 for text, 3:1 for large text and essential graphics).
+- **Color is never alone**: every status carries a word or an icon.
+
+## Focus
+
+Focus rings are 2px, follow the control's shape, and appear for keyboard focus only, so a clicked control never looks stuck. Focus never changes a control's size. Dialogs and sheets trap focus and return it to their trigger when they close. A dialog opens on its first field; without one, on its primary action, or on the safe action (Cancel, Back) when the primary one destroys; never on the dialog box. A collection is one tab stop: arrows move inside it, and Tab leaves it. Every app frame starts with a skip link to its content.
+
+## Keyboard
+
+Each component's keys are in the registry and on its page. Across the library:
+
+| Key            | Action                                                                    |
+| -------------- | ------------------------------------------------------------------------- |
+| Tab, Shift Tab | Move between controls                                                     |
+| Arrow keys     | Move within a group: menu items, tabs, segments, list rows, toolbar items |
+| Enter, Space   | Activate                                                                  |
+| Escape         | Close the overlay, clear the selection                                    |
+| ⌘K             | Command palette                                                           |
+| [              | Collapse or expand the sidebar                                            |
+
+## Screen readers
+
+Icon-only buttons require an accessible name; their tooltip repeats it. A control without a visible label takes `aria-label`. Toasts are status messages, errors are alerts. Loading regions are marked busy. Charts have a text summary and a table view.
+
+## Preferences
+
+- `prefers-reduced-motion`: transforms are removed; only opacity changes.
+- `prefers-contrast: more`: rings use the strong line and secondary text becomes primary.
+- `prefers-color-scheme`: the system theme is the default.
+
+## Testing
+
+axe runs on every showcase page and open overlay with zero violations allowed, and keyboard walks assert that focus moves and returns correctly (`pnpm audit:all`).

package/foundations/color.md

@@ -0,0 +1,40 @@
+# Color
+
+A monochrome interface on pure white and pure black. Color appears only in data and in small status marks next to a word. Values: `../ai/tokens.md`.
+
+## Neutrals
+
+Two tint-free ramps. Components use the role names, never a step, so both themes are designed rather than inverted.
+
+| Role             | Use                                                                |
+| ---------------- | ------------------------------------------------------------------ |
+| `bg-panel`       | The brightest surface: pure white, pure black. Content lives here. |
+| `bg-chrome`      | The window behind the panel. The sidebar sits on it.               |
+| `bg-raised`      | Controls, menus, popovers: a surface above the panel.              |
+| `fill-1`         | Quiet fills: inputs at rest, code wells, group headers.            |
+| `fill-2`         | Hover on ghost controls and rows.                                  |
+| `fill-3`         | Pressed and current: the active sidebar pill.                      |
+| `line-subtle`    | Separators inside groups.                                          |
+| `line`           | Rings around controls and groups.                                  |
+| `line-strong`    | Hovered rings, table header rules.                                 |
+| `text`           | Titles, labels, values.                                            |
+| `text-secondary` | Descriptions, metadata, icons at rest.                             |
+| `text-tertiary`  | Placeholders, counts, axis labels.                                 |
+| `text-disabled`  | Disabled labels.                                                   |
+| `ink`            | The primary button and selected marks.                             |
+| `focus`          | Keyboard focus rings.                                              |
+
+## Status
+
+Success, warning, danger and info are marks, never surfaces: a colored word, an icon, the tint behind a banner, the destructive button. Each has a solid, a `-text` and a `-tint` variable. A status is always readable without its color. The danger fill is `#dc2626` in both themes, so white text on it passes AA.
+
+## Data
+
+Eight series in a fixed order, balanced in lightness so none shouts. Token kinds always take the same series: input blue, output emerald, cache read teal, cache write amber, reasoning violet. Marks thinner than 2px use a darker shade in light mode to keep 3:1.
+
+## Rules
+
+- The interface is monochrome. A color that is not data or status is a bug.
+- A status mark sits next to a word or an icon; color alone never carries meaning.
+- Dark mode is designed on its own: the panel is the darkest surface, controls are lifted with a ring and a faint top light, and weights render twenty units lighter.
+- Lines are rings drawn with box-shadow, one device pixel, and rarer than space or tone.