@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/_bundled/tokens/palette.gen.js

@@ -0,0 +1,206 @@
+export const palette = {
+  light: {
+    gray: [
+      "#fdfcf9",
+      "#f9f8f5",
+      "#f4f2ee",
+      "#eeece8",
+      "#e9e6e1",
+      "#e1ded9",
+      "#d5d3cd",
+      "#c2bfb9",
+      "#82807b",
+      "#676460",
+      "#514e4a",
+      "#1b1a17"
+    ],
+    blue: [
+      "#fafcff",
+      "#f4f8ff",
+      "#ebf3ff",
+      "#e2edff",
+      "#d9e8ff",
+      "#cde0ff",
+      "#bad4ff",
+      "#9bc0ff",
+      "#0169ff",
+      "#005de5",
+      "#125bd1",
+      "#001643"
+    ],
+    green: [
+      "#f9fefa",
+      "#f1fbf3",
+      "#e6f8e9",
+      "#daf5e0",
+      "#cef1d6",
+      "#c1ebca",
+      "#ade2ba",
+      "#8cd39f",
+      "#008743",
+      "#00773b",
+      "#097038",
+      "#00210c"
+    ],
+    amber: [
+      "#fffbf7",
+      "#fff7ed",
+      "#fef0de",
+      "#fee9d0",
+      "#fde2c1",
+      "#fad8b0",
+      "#f4cb98",
+      "#eab470",
+      "#f3a52b",
+      "#e29721",
+      "#905c00",
+      "#271600"
+    ],
+    red: [
+      "#fffbfb",
+      "#fff6f5",
+      "#ffeeec",
+      "#ffe6e3",
+      "#ffdeda",
+      "#ffd2ce",
+      "#ffc1bb",
+      "#ffa39b",
+      "#d2393a",
+      "#bf2d30",
+      "#ac3434",
+      "#370406"
+    ],
+    violet: [
+      "#fcfbff",
+      "#f8f7ff",
+      "#f3f0ff",
+      "#ede9ff",
+      "#e8e2ff",
+      "#e1d8ff",
+      "#d6caff",
+      "#c4b2fb",
+      "#8264c8",
+      "#7558b7",
+      "#6952a1",
+      "#1d1234"
+    ]
+  },
+  dark: {
+    gray: [
+      "#191917",
+      "#1f1e1c",
+      "#252422",
+      "#2c2b28",
+      "#32312e",
+      "#3b3936",
+      "#484643",
+      "#5e5c58",
+      "#767470",
+      "#a19f9a",
+      "#bfbdb9",
+      "#f1f0ed"
+    ],
+    blue: [
+      "#16191d",
+      "#191e27",
+      "#1b2535",
+      "#1d2b43",
+      "#1e3151",
+      "#213961",
+      "#27457a",
+      "#2f59a2",
+      "#4c8eff",
+      "#669eff",
+      "#8eb8ff",
+      "#e8f1ff"
+    ],
+    green: [
+      "#171a17",
+      "#1a201b",
+      "#1d281f",
+      "#1f2f23",
+      "#213727",
+      "#25412d",
+      "#2c5036",
+      "#366945",
+      "#36ac62",
+      "#4db972",
+      "#7dd596",
+      "#d2fddc"
+    ],
+    amber: [
+      "#1b1816",
+      "#221d18",
+      "#2b2319",
+      "#352819",
+      "#3e2e19",
+      "#4a351a",
+      "#5b411d",
+      "#785421",
+      "#faab35",
+      "#ffbe6a",
+      "#febc67",
+      "#ffedd8"
+    ],
+    red: [
+      "#1c1717",
+      "#251b1b",
+      "#301f1e",
+      "#3c2321",
+      "#482724",
+      "#552c29",
+      "#6a3531",
+      "#8c433e",
+      "#e9504d",
+      "#f6625e",
+      "#ff958d",
+      "#ffebe9"
+    ],
+    violet: [
+      "#19181b",
+      "#1e1d23",
+      "#25232e",
+      "#2c2839",
+      "#332d44",
+      "#3b3450",
+      "#494064",
+      "#5f5284",
+      "#9477dd",
+      "#a186e9",
+      "#c3afff",
+      "#f1edff"
+    ]
+  }
+};
+export const syntax = {
+  light: {
+    fg: "#1b1a17",
+    muted: "#514e4a",
+    comment: "#56534f",
+    keyword: "#5e4694",
+    string: "#00622f",
+    number: "#764a00",
+    fn: "#004cbd",
+    type: "#005c78",
+    tag: "#933333",
+    attribute: "#764a00",
+    regex: "#9e2629",
+    inserted: "#00622f",
+    deleted: "#9e2629"
+  },
+  dark: {
+    fg: "#e6e5e2",
+    muted: "#bfbdb9",
+    comment: "#bcbab4",
+    keyword: "#c2b2f2",
+    string: "#89d19c",
+    number: "#f3bc76",
+    fn: "#99bbf4",
+    type: "#90c5c8",
+    tag: "#faa29b",
+    attribute: "#f3bc76",
+    regex: "#faa29b",
+    inserted: "#89d19c",
+    deleted: "#faa29b"
+  }
+};

package/dist/_bundled/tokens/spec.d.ts

@@ -0,0 +1,291 @@
+/**
+ * The kit's design-token specification — the single source of truth.
+ *
+ * Colors are authored in OKLCH so lightness steps are perceptually even. The kit's
+ * `packages/ui/scripts/gen-tokens.ts` turns this spec into its `src/styles/tokens.gen.css` (CSS custom
+ * properties using `light-dark()`) and into `palette.gen.ts` here (sRGB hex, for the CLI/TUI, Tauri,
+ * OG images, emails).
+ *
+ * Ramp semantics (12 steps, Radix-style):
+ *  1 app background · 2 subtle background · 3 element · 4 element hover · 5 element active
+ *  6 subtle border · 7 border · 8 strong border / focus · 9 solid · 10 solid hover
+ *  11 low-contrast text · 12 high-contrast text
+ */
+export type Oklch = readonly [l: number, c: number, h: number];
+type RampStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type Ramp = readonly [
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch,
+    Oklch
+];
+/** The brand blue. Exact value, never tinted for the logo. */
+export declare const BRAND_HEX = "#0169ff";
+/**
+ * Focus ring strength: percent of blue-9 per theme. Solid in light (62 % blended to 2.1:1 on bg);
+ * 72 % in dark. Both clear WCAG 2.2 non-text contrast (3:1) on bg, bg-subtle, bg-muted and surface.
+ */
+export declare const FOCUS_MIX: {
+    readonly light: 100;
+    readonly dark: 72;
+};
+/** Light `surface` (cards): a touch brighter than bg. Dark surface is gray-2. */
+export declare const SURFACE_LIGHT: Oklch;
+export declare const HUES: {
+    /**
+     * Brand blue — `BRAND_HEX` sits at step 9 in light mode. Text steps are tuned so each hue's step 11
+     * reads at 4.5:1 on its own tints (`*-subtle`, `*-subtle-hover`) over bg, bg-subtle and bg-muted.
+     */
+    readonly blue: {
+        readonly h: 260.44;
+        readonly c: 0.2373;
+        readonly solid: readonly [0.5692, 0.66];
+        readonly text: readonly [0.505, 0.78];
+    };
+    readonly green: {
+        readonly h: 152;
+        readonly c: 0.15;
+        readonly solid: readonly [0.545, 0.66];
+        readonly text: readonly [0.48, 0.8];
+        readonly onWhite: 0.545;
+    };
+    readonly amber: {
+        readonly h: 72;
+        readonly c: 0.155;
+        readonly solid: readonly [0.78, 0.8];
+        readonly text: readonly [0.52, 0.84];
+    };
+    readonly red: {
+        readonly h: 25;
+        readonly c: 0.19;
+        readonly solid: readonly [0.575, 0.64];
+        readonly text: readonly [0.505, 0.78];
+        readonly onWhite: 0.575;
+    };
+    readonly violet: {
+        readonly h: 295;
+        readonly c: 0.15;
+        readonly solid: readonly [0.58, 0.64];
+        readonly text: readonly [0.5, 0.8];
+    };
+};
+export declare const RAMPS: {
+    readonly light: {
+        readonly gray: Ramp;
+        readonly blue: Ramp;
+        readonly green: Ramp;
+        readonly amber: Ramp;
+        readonly red: Ramp;
+        readonly violet: Ramp;
+    };
+    readonly dark: {
+        readonly gray: Ramp;
+        readonly blue: Ramp;
+        readonly green: Ramp;
+        readonly amber: Ramp;
+        readonly red: Ramp;
+        readonly violet: Ramp;
+    };
+};
+export type RampName = keyof (typeof RAMPS)["light"];
+/** A syntax colour: a ramp step, or a mix of two (`t` toward the second, in sRGB). */
+export type SyntaxColor = readonly [ramp: RampName, step: RampStep] | {
+    readonly mix: readonly [SyntaxColor, SyntaxColor, number];
+};
+export type SyntaxRole = "fg" | "muted" | "comment" | "keyword" | "string" | "number" | "fn" | "type" | "tag" | "attribute" | "regex" | "inserted" | "deleted";
+/**
+ * The syntax themes (Shiki `nib-light` / `nib-dark`): calm and low-saturation. Keywords lean
+ * violet, strings green, numbers amber, functions blue, comments gray italic. The kit's gen-tokens.ts
+ * then holds every role to 4.5:1 on each background code sits on (the code well, a highlighted line,
+ * a diff's word change), moving only its lightness.
+ */
+export declare const SYNTAX: Record<"light" | "dark", Record<SyntaxRole, SyntaxColor>>;
+/**
+ * Avatar tints — muted, earthy, distinguishable at avatar size. Each tint gets a background
+ * (light/dark) and an ink color. Kept deliberately desaturated so a dashboard full of
+ * avatars still reads as calm.
+ */
+export declare const PERSONA_HUES: {
+    readonly clay: 42;
+    readonly ochre: 78;
+    readonly sage: 140;
+    readonly teal: 192;
+    readonly slate: 245;
+    readonly iris: 278;
+    readonly plum: 330;
+    readonly rose: 12;
+};
+export type PersonaTint = keyof typeof PERSONA_HUES;
+export declare const RADII: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.375rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.625rem";
+    readonly xl: "0.75rem";
+    readonly "2xl": "1rem";
+    readonly "3xl": "1.375rem";
+    readonly "4xl": "1.75rem";
+};
+/**
+ * Content widths (docs/design/system.md §1.3). Emitted as Tailwind containers, so `max-w-reading`,
+ * `max-w-form`, `max-w-page` and `max-w-wide` exist next to Tailwind's own `max-w-md`…`max-w-7xl`.
+ */
+export declare const CONTAINERS: {
+    /** Conversations, documents, long text: ~70 characters per line at 14 px. */
+    readonly reading: "46rem";
+    /** Settings, forms, single-column flows. */
+    readonly form: "42rem";
+    /** Lists and dashboards. */
+    readonly page: "64rem";
+    /** Galleries and boards. */
+    readonly wide: "76rem";
+    /** One centred card: sign-in, the first run's steps, onboarding. */
+    readonly card: "25rem";
+    /** A card that holds a choice of several things side by side. */
+    readonly "card-wide": "44rem";
+    /** A bar floating over a page or a stage: a sentence and its action. */
+    readonly bar: "40rem";
+};
+/**
+ * The page's own width steps (docs/design/system.md §1.4): breakpoints for container queries on the
+ * `page` region, emitted as Tailwind containers so `@page-md/page:` and `@max-page-md/page:` exist.
+ * From `page-md` the gutter is 24 px and a screen may show its roomy layout (a full toolbar); from
+ * `page-lg` it is 32 px.
+ */
+export declare const PAGE_STEPS: {
+    readonly "page-md": "40rem";
+    readonly "page-lg": "64rem";
+};
+/**
+ * Stacking layers, low to high, as `--z-*` custom properties: every fixed or floating surface takes
+ * one by name (`z-(--z-overlay)`); a local `z-10` stays inside an `isolate` root.
+ */
+export declare const LAYERS: {
+    /** Headers that stick inside a scrolling region. */
+    readonly sticky: 10;
+    /** Lists anchored to a field in the page (completion, go to file). */
+    readonly dropdown: 20;
+    /** Fixed notices over the page (the account bar). */
+    readonly banner: 30;
+    /** The narrow window's side panels and their scrim. */
+    readonly drawer: 40;
+    /** The pane tour: over the page, under anything modal. */
+    readonly tour: 45;
+    /** Toasts: over the page and the tour, under a modal's backdrop (their close stays reachable). */
+    readonly toast: 50;
+    /** Dialogs, sheets, popovers, menus, selects and the sign-in gate; later ones stack by DOM order. */
+    readonly overlay: 60;
+    /** Tooltips, over everything they label. */
+    readonly tooltip: 70;
+};
+/** Window regions (docs/design/system.md §1.2), as `--layout-*` custom properties. */
+export declare const LAYOUT: {
+    readonly sidebar: "16.5rem";
+    readonly header: "3.25rem";
+    readonly "bottom-bar": "2.75rem";
+    readonly "pane-min": "18.75rem";
+};
+/**
+ * Type scale: [font-size, line-height, letter-spacing]. Tuned for Inter 4 with optical sizing.
+ *
+ * An app uses six of these, one per role (docs/design/system.md §3.1): `xs` caption, `sm` UI,
+ * `base` body, `md` reading, `xl` title, `3xl` display. The rest are a marketing site's scale.
+ */
+export declare const TYPE_SCALE: {
+    /** Site only. */
+    readonly "2xs": readonly ["0.6875rem", "1rem", "0.01em"];
+    /** App: captions, metadata, badges, keycaps, code inside UI text (Geist Mono). */
+    readonly xs: readonly ["0.75rem", "1.125rem", "0.005em"];
+    /** App: dense UI: sidebar, menus, rows, tool rows, descriptions, field labels. */
+    readonly sm: readonly ["0.8125rem", "1.25rem", "0em"];
+    /** App: default UI and body copy. */
+    readonly base: readonly ["0.875rem", "1.375rem", "-0.003em"];
+    /** App: reading text (a conversation, a message) and card, dialog and section titles. */
+    readonly md: readonly ["0.9375rem", "1.5rem", "-0.006em"];
+    /** Site only. */
+    readonly lg: readonly ["1.0625rem", "1.625rem", "-0.011em"];
+    /** App: page titles. */
+    readonly xl: readonly ["1.25rem", "1.75rem", "-0.015em"];
+    /** Site only. */
+    readonly "2xl": readonly ["1.5rem", "2rem", "-0.019em"];
+    /** App: display: the home greeting, welcome, first run, onboarding, a big code to type. */
+    readonly "3xl": readonly ["1.875rem", "2.375rem", "-0.022em"];
+    /** Site only. */
+    readonly "4xl": readonly ["2.375rem", "2.75rem", "-0.025em"];
+    readonly "5xl": readonly ["3rem", "3.375rem", "-0.028em"];
+    readonly "6xl": readonly ["3.75rem", "4rem", "-0.03em"];
+};
+/** Durations in milliseconds. */
+export declare const DURATIONS: {
+    readonly instant: 80;
+    readonly fast: 120;
+    readonly base: 180;
+    readonly moderate: 240;
+    readonly slow: 320;
+    readonly slower: 480;
+    readonly glacial: 800;
+    /** Don't show a loader before this — fast results never flash a spinner. */
+    readonly loaderDelay: 200;
+    /** Once shown, keep a loader visible at least this long so it never flickers. */
+    readonly loaderMin: 400;
+};
+/** Cubic-bezier easings. */
+export declare const EASINGS: {
+    readonly standard: readonly [0.2, 0, 0, 1];
+    readonly out: readonly [0.16, 1, 0.3, 1];
+    readonly in: readonly [0.5, 0, 0.75, 0];
+    readonly inOut: readonly [0.65, 0, 0.35, 1];
+    readonly emphasized: readonly [0.3, 0, 0, 1.15];
+    /** iOS-like sheet curve for drawers (Ionic / Vaul). */
+    readonly sheet: readonly [0.32, 0.72, 0, 1];
+};
+/**
+ * Springs, expressed the Motion way (perceived duration + bounce). The generator also bakes each
+ * into a CSS `linear()` easing so pure-CSS transitions feel identical to JS-driven ones; the baked
+ * `--duration-spring-*` ends once the spring stays within 1 % of its target (see
+ * `SPRING_CSS_REST`), so functional UI stays inside the motion budget: snappy ≈ 183 ms and smooth
+ * ≈ 225 ms in CSS. Longer springs are for deliberate moments only, never for everyday controls.
+ */
+export declare const SPRINGS: {
+    /** Hover/press feedback, toggles, chevrons. Panes, rails and expanders open instantly. */
+    readonly snappy: {
+        readonly visualDuration: 0.14;
+        readonly bounce: 0;
+    };
+    /** Meter fills (`scaleX`), JS enter/exit fades. Popups use the `popup-motion` tween. */
+    readonly smooth: {
+        readonly visualDuration: 0.17;
+        readonly bounce: 0;
+    };
+    /** Deliberate, larger transform moments. Never size or position in layout, never controls. */
+    readonly gentle: {
+        readonly visualDuration: 0.42;
+        readonly bounce: 0;
+    };
+    /** Micro-moments of delight: success ticks, mascot hops. Use sparingly. */
+    readonly bouncy: {
+        readonly visualDuration: 0.38;
+        readonly bounce: 0.28;
+    };
+    /** The convergence moment only (race adopt): the nib meets, flashes blue once. Never elsewhere. */
+    readonly signature: {
+        readonly visualDuration: 0.5;
+        readonly bounce: 0.2;
+    };
+};
+/**
+ * Where a CSS-baked spring is "at rest": the residual (fraction of the full change) it never
+ * leaves again. 1 % is under a pixel for UI-sized moves and invisible on opacity and colour; a
+ * tighter rest (0.15 %) adds about 170 ms of invisible tail to every spring.
+ */
+export declare const SPRING_CSS_REST = 0.01;
+export type SpringName = keyof typeof SPRINGS;
+export {};