@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.32

package/dist/test/render.d.ts

@@ -7,5 +7,22 @@ import { RenderOptions } from "@testing-library/react";
  * top-level component sits on in a real app.
  */
 export declare function renderWithProviders(ui: React.ReactElement, options?: Omit<RenderOptions, "wrapper">): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+/**
+ * `waitFor` budget for a canvas that appears behind a lazy `import()` of the
+ * three.js / @react-three/fiber stack.
+ *
+ * 🔴 Not a magic number and not a papered-over failure: testing-library's
+ * default is 1000ms, which is sized for a React state flush, not for resolving
+ * and evaluating a 3D renderer chunk. `AIOrb.Liquid` mounts its canvas in
+ * ~590ms when its file runs alone and blew straight past 1000ms under
+ * full-suite load — a ~1-in-3 red gate whose only symptom was
+ * `expected null to be truthy`. The assertion is unchanged (no canvas ever =
+ * still a failure); this only stops the clock from being the thing under test.
+ * A passing run does not get slower — `waitFor` resolves the moment the
+ * condition holds.
+ */
+export declare const R3F_MOUNT_TIMEOUT: {
+    readonly timeout: 5000;
+};
 export { screen, within, waitFor, act, fireEvent } from "@testing-library/react";
 export { default as userEvent } from "@testing-library/user-event";

package/dist/themes/precision.css

@@ -0,0 +1,232 @@
+/* ============================================================
+   @flikk/ui — Precision theme
+   Cobalt primary × IBM Plex × compact geometry × cool graphite surfaces.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/precision.css";
+
+   This preset intentionally changes tokens only. It is designed to make the
+   existing component set feel denser, quieter, and more instrument-like
+   without introducing component-specific selectors or changing markup.
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` gets an explicit `.dark` value below.
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base variable in styles.css.
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — precise cobalt blue. Saturated enough for small status and
+       focus details, but darker than a neon accent on large filled controls. */
+    --color-primary-50: oklch(97% 0.014 254.604);
+    --color-primary-100: oklch(93.2% 0.032 255.585);
+    --color-primary-200: oklch(88.2% 0.059 254.128);
+    --color-primary-300: oklch(80.9% 0.105 251.813);
+    --color-primary-400: oklch(70.7% 0.165 254.624);
+    --color-primary-500: oklch(62.3% 0.214 259.815);
+    --color-primary-600: oklch(54.6% 0.245 262.881);
+    --color-primary-700: oklch(48.8% 0.243 264.376);
+    --color-primary-800: oklch(42.4% 0.199 265.638);
+    --color-primary-900: oklch(37.9% 0.146 265.522);
+    --color-primary-950: oklch(28.2% 0.091 267.935);
+    --color-primary: var(--color-primary-600);
+
+    /* Cool graphite neutral ramp. The chroma is deliberately low: enough to
+       make the interface feel technical without turning every surface navy. */
+    --color-mono-50: oklch(98.4% 0.003 255);
+    --color-mono-100: oklch(96.8% 0.005 255);
+    --color-mono-200: oklch(92.4% 0.008 255);
+    --color-mono-300: oklch(86.8% 0.011 255);
+    --color-mono-400: oklch(70.6% 0.016 255);
+    --color-mono-500: oklch(55.4% 0.019 255);
+    --color-mono-600: oklch(44.5% 0.021 255);
+    --color-mono-700: oklch(36.8% 0.021 255);
+    --color-mono-800: oklch(26.6% 0.02 255);
+    --color-mono-900: oklch(19.8% 0.018 255);
+    --color-mono-950: oklch(12.4% 0.016 255);
+
+    /* Cooler canvas with crisp white working surfaces. The smaller tonal gap
+       keeps the page calm; elevation rings provide the panel definition. */
+    --surface-1: #f4f6f9;
+    --surface-2: #f8f9fb;
+    --surface-3: #ffffff;
+    --surface-4: #ffffff;
+    --surface-5: #ffffff;
+    --surface-6: #ffffff;
+    --surface-7: #ffffff;
+    --surface-8: #ffffff;
+    --color-surface-sunken: #edf0f4;
+    --color-surface-hover: oklch(25% 0.018 255 / 0.055);
+
+    /* Fine blue-graphite edges read more like instrument separators than
+       generic gray card outlines. */
+    --color-border: oklch(91.5% 0.01 255);
+    --color-border-secondary: oklch(84.5% 0.016 255);
+    --color-border-hover: oklch(72% 0.03 255);
+
+    /* Restrained categorical palette: cobalt leads, supporting series stay
+       cool or muted so semantic status colours retain their meaning. */
+    --color-chart-track: oklch(25% 0.018 255 / 0.07);
+    --color-chart-1: #3f6ff5;
+    --color-chart-2: #1da99a;
+    --color-chart-3: #8067d9;
+    --color-chart-4: #c98a2e;
+    --color-chart-5: #c95783;
+
+    /* IBM Plex supplies the engineered character without resorting to mono
+       everywhere. Existing font-mono utilities pick up Plex Mono. */
+    --font-family-base: "IBM Plex Sans", var(--font-sans);
+    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-scale: 0.9375;
+
+    /* The @import above ships Plex Sans at 400/500/600/700 only. The base
+       preset points --font-weight-light at 300 and --font-weight-extrabold at
+       800, neither of which this theme loads — the browser would synthesise
+       them, and synthetic weights in Plex read mushy at the small sizes this
+       theme leans on. Remap both onto real loaded weights. This is why the
+       weight tokens are themeable at all: the same numeral means a different
+       thing in every family. */
+    --font-weight-light: 400;
+    --font-weight-extrabold: 700;
+
+    /* Plex Sans is already a narrow, engineered face, so Tailwind's default
+       -0.025em over-tightens it at display sizes; back it off slightly. */
+    --tracking-tight: -0.015em;
+
+    /* Denser leading for display roles. Large numerals in a dashboard are read
+       as values, not prose — the extra leading the base preset gives them just
+       pushes surrounding chrome apart. */
+    --page-heading-title-line-height: 1.25;
+    --section-title-line-height: 1.35;
+    --metric-value-line-height-sm: 1.25;
+    --metric-value-line-height-md: 1.1;
+    --metric-value-line-height-lg: 1.1;
+    --kpi-value-line-height-sm: 1.25;
+    --kpi-value-line-height-md: 1.15;
+    --kpi-value-line-height-lg: 1.1;
+
+    /* Compact, controlled geometry. Surface-specific overrides keep content
+       panels slightly softer than controls while avoiding pill-like cards. */
+    --radius-base: 6px;
+    --card-radius: 10px;
+    --modal-radius: 12px;
+    --drawer-radius: 12px;
+    --metric-radius: 8px;
+    --dropdown-radius: 8px;
+    --popover-radius: 8px;
+    --codeblock-radius: 8px;
+    --alert-radius: 8px;
+    --toast-radius: 8px;
+
+    /* Denser control rhythm for dashboard and professional-tool layouts. */
+    --form-min-h-sm: 30px;
+    --form-min-h-md: 34px;
+    --form-min-h-lg: 38px;
+    --form-px-sm: 10px;
+    --form-px-md: 12px;
+    --form-px-lg: 14px;
+    --button-px-sm: 10px;
+    --button-px-md: 12px;
+    --button-px-lg: 14px;
+    --button-icon-p-sm: 6px;
+    --button-icon-p-md: 7px;
+    --button-icon-p-lg: 8px;
+
+    /* Tighten composed surfaces without making dense data illegible. */
+    --card-px: 20px;
+    --card-py: 20px;
+    --metric-content-p-sm: 10px;
+    --metric-content-p-md: 14px;
+    --metric-content-p-lg: 16px;
+
+    /* Slightly stronger display roles maintain hierarchy after reducing the
+       global type scale. */
+    --card-title-size: var(--text-base);
+    --page-heading-title-size: var(--text-2xl);
+    --metric-value-size-sm: var(--text-xl);
+    --metric-value-size-md: var(--text-3xl);
+    --metric-value-size-lg: var(--text-4xl);
+    --kpi-value-size-sm: var(--text-xl);
+    --kpi-value-size-md: var(--text-3xl);
+    --kpi-value-size-lg: var(--text-4xl);
+
+    /* Crisper elevation: a cool edge with less diffuse shadow than the base
+       preset. The existing elevation ladder continues to provide the shape. */
+    --elevation-shadow-color: rgb(15 23 42 / 0.075);
+    --overlay-bg: rgb(7 10 16 / 0.72);
+    --overlay-blur: 10px;
+    --shimmer-surface-highlight: color-mix(in srgb, #fff 48%, transparent);
+  }
+
+  .dark {
+    /* Blue-400 stays vivid on graphite while remaining controlled on large
+       filled surfaces. Auto contrast resolves the foreground. */
+    --color-primary: var(--color-primary-400);
+
+    /* Keep the graphite cast in dark mode instead of falling back to the
+       neutral base ramp. */
+    --color-mono-50: oklch(98.4% 0.003 255);
+    --color-mono-100: oklch(96.8% 0.005 255);
+    --color-mono-200: oklch(92.4% 0.008 255);
+    --color-mono-300: oklch(86.8% 0.011 255);
+    --color-mono-400: oklch(70.6% 0.016 255);
+    --color-mono-500: oklch(55.4% 0.019 255);
+    --color-mono-600: oklch(44.5% 0.021 255);
+    --color-mono-700: oklch(36.8% 0.021 255);
+    --color-mono-800: oklch(26.6% 0.02 255);
+    --color-mono-900: oklch(19.8% 0.018 255);
+    --color-mono-950: oklch(12.4% 0.016 255);
+
+    /* Graphite elevation ladder. Each rung remains visibly distinct without
+       the broad gray jumps of a conventional dark theme. */
+    --surface-1: #0c0f14;
+    --surface-2: #11151c;
+    --surface-3: #161b23;
+    --surface-4: #1b212b;
+    --surface-5: #202833;
+    --surface-6: #26303c;
+    --surface-7: #2c3745;
+    --surface-8: #333f4f;
+    --color-surface-sunken: #10141a;
+    --color-surface-hover: oklch(85% 0.03 255 / 0.08);
+
+    --color-text-primary: oklch(96.5% 0.006 255);
+    --color-text-secondary: oklch(77% 0.014 255);
+    --color-text-placeholder: color-mix(
+      in oklab,
+      var(--color-text-primary) 38%,
+      transparent
+    );
+    --color-text-muted: color-mix(
+      in oklab,
+      var(--color-text-primary) 52%,
+      transparent
+    );
+    --color-text-disabled: var(--color-mono-600);
+
+    --color-border: oklch(92% 0.02 255 / 0.07);
+    --color-border-secondary: oklch(92% 0.02 255 / 0.13);
+    --color-border-hover: oklch(92% 0.035 255 / 0.24);
+    --color-chart-track: oklch(92% 0.02 255 / 0.08);
+
+    /* Tune the base engine's dark elevation variables rather than replacing
+       its carefully layered shadows. */
+    --dm-hi-base: rgba(196, 218, 255, 0.015);
+    --dm-hi-mid: rgba(196, 218, 255, 0.025);
+    --dm-hi-high: rgba(196, 218, 255, 0.04);
+    --dm-hi-peak: rgba(196, 218, 255, 0.055);
+    --dm-ring-base: rgba(196, 218, 255, 0.025);
+    --dm-ring-mid: rgba(196, 218, 255, 0.045);
+    --dm-ring-high: rgba(196, 218, 255, 0.07);
+    --dm-drop: rgba(0, 0, 0, 0.24);
+    --overlay-bg: rgb(3 5 9 / 0.8);
+    --shimmer-surface-highlight: color-mix(in srgb, #bcd2ff 7%, transparent);
+  }
+}