@ekanos/ui 0.1.0 → 0.1.2

package/dist/tokens.css

@@ -0,0 +1,414 @@
+/*
+ * @ekanos/ui — Fusion design tokens (values only)
+ * ------------------------------------------------------------------
+ * Plain CSS custom properties. No Tailwind required to consume this file.
+ *
+ * ── Scope: the full Fusion SEMANTIC surface, on purpose ──
+ * This ships every semantic token a Fusion-styled component can reference —
+ * NOT just the subset `@ekanos/ui`'s own ~20 primitives happen to touch. That
+ * is deliberate, and it is the one place this file's scope differs from the
+ * compiled `dist/styles.css`:
+ *
+ *   • `dist/styles.css` is a CLOSED artifact — it can only ever style the
+ *     components this package ships, so `scripts/build-css.mjs` compiles it
+ *     against the components' class strings and Tailwind prunes every token no
+ *     component uses. It stays minimal automatically.
+ *
+ *   • `tokens.css` + `theme.css` are the OPEN preset — their consumer is a
+ *     PARTNER authoring their OWN Fusion-styled widgets against `@ekanos/ui`
+ *     (this is exactly what `ekanos dev` scaffolds). A partner writing an
+ *     ordinary `bg-chart-1`, `text-info`, `bg-sidebar` or `shadow-widget` has
+ *     no `packages/ui` and no `apps/web/styles` to fall back on — this preset
+ *     is their ONLY channel to Fusion's tokens. Scoping it to what THIS
+ *     package's components use would leave those utilities resolving to
+ *     nothing in a partner project, with no error. So the preset carries the
+ *     whole semantic set: surfaces, brand, status, chart, sidebar, assistant,
+ *     info, the full elevation scale, radius and fonts.
+ *
+ * The drift gate in `scripts/build-css.mjs` enforces a FLOOR, not a ceiling:
+ * its COVERAGE check fails the build if a component uses a Fusion token this
+ * file does NOT define; it never objects to this file defining MORE. So a
+ * superset is safe, and the compiled `styles.css` above still prunes back to
+ * exactly what the components use.
+ *
+ * Values are a verbatim copy of Fusion's canonical `apps/web/styles/
+ * shadcn-ui.css`. This file (a published npm subpath) plus `packages/ui` are
+ * the two supported ways to consume those tokens; `apps/harness` imports THIS
+ * one via `@ekanos/ui/theme.css` rather than forking the values again.
+ *
+ * Still NOT shipped, because they are not part of the semantic utility
+ * surface: `--assistant*` beyond the two aliases below stays out, and no icon
+ * font data ships (Fusion uses Font Awesome Pro — see base.css / README).
+ *
+ * ── Theme switching ──
+ * Three states, in cascade order:
+ *   1. `:root`                              → light (the default)
+ *   2. `@media (prefers-color-scheme: dark)` → dark, unless the page has
+ *      explicitly opted into light
+ *   3. `.dark` / `[data-theme='dark']`       → dark, explicitly, beating the
+ *      media query in both directions
+ *
+ * The dark declarations are written out twice on purpose: CSS has no way to
+ * share one declaration block between a media query and a plain selector.
+ * `scripts/build-css.mjs` asserts the two dark blocks declare the same
+ * tokens with the same values.
+ */
+
+:root {
+  /* Typography. Fusion loads Figtree + Bricolage Grotesque through
+     `next/font`; a partner who has not loaded them falls through to the
+     system UI stack. See the README for the exact <link> tags. */
+  --font-sans:
+    'Figtree', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', system-ui, sans-serif;
+  --font-heading: 'Bricolage Grotesque', var(--font-sans);
+
+  /* Surfaces */
+  --background: oklch(0.97 0.005 30);
+  --foreground: oklch(0.15 0.012 30);
+  --card: oklch(0.995 0.0015 30);
+  --card-foreground: oklch(0.15 0.012 30);
+  --popover: oklch(0.995 0.0015 30);
+  --popover-foreground: oklch(0.15 0.012 30);
+
+  /* Brand accent — coral-orange, OKLCH hue ~30 */
+  --primary: oklch(0.62 0.19 30);
+  --primary-foreground: oklch(0.99 0 0);
+  --primary-strong: oklch(0.51 0.17 30);
+
+  --secondary: oklch(0.94 0.008 30);
+  --secondary-foreground: oklch(0.24 0.015 30);
+
+  --muted: oklch(0.945 0.005 30);
+  --muted-foreground: oklch(0.48 0.015 30);
+
+  --accent: oklch(0.95 0.012 30);
+  --accent-foreground: oklch(0.24 0.015 30);
+
+  /* Status */
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --destructive-strong: oklch(0.55 0.2 25);
+
+  --warning: oklch(0.52 0.13 70);
+  --warning-foreground: oklch(0.99 0 0);
+
+  --success: oklch(0.55 0.13 150);
+  --success-foreground: oklch(0.99 0 0);
+  --success-strong: oklch(0.51 0.13 150);
+
+  --info: oklch(0.55 0.15 245);
+  --info-foreground: oklch(0.99 0 0);
+
+  /* Lines and focus */
+  --border: oklch(0.91 0.006 30);
+  --input: oklch(0.9 0.005 30);
+  --ring: oklch(0.62 0.19 30);
+
+  --radius: 0.5rem;
+
+  /* Data visualization */
+  --chart-1: oklch(0.62 0.19 30);
+  --chart-2: oklch(0.61 0.12 205);
+  --chart-3: oklch(0.72 0.17 148);
+  --chart-4: oklch(0.6 0.18 260);
+  --chart-5: oklch(0.7 0.12 80);
+
+  /* Sidebar */
+  --sidebar-background: oklch(0.97 0.005 30);
+  --sidebar-foreground: oklch(0.15 0.012 30);
+  --sidebar-primary: oklch(0.62 0.19 30);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.955 0.006 30);
+  --sidebar-accent-foreground: oklch(0.35 0.015 30);
+  --sidebar-border: oklch(0.92 0.006 30);
+  --sidebar-ring: oklch(0.62 0.19 30);
+
+  /* Assistant — aliases onto the sidebar accent */
+  --assistant: var(--sidebar-primary);
+  --assistant-foreground: var(--sidebar-primary-foreground);
+
+  /* ── Elevation shadow system ── Stacked diffusion (light mode)
+   * Ambient ring + layers using 1→3→6→12→24→48 doubling.
+   * Spread = -(blur / 2) keeps each layer tight. */
+  --shadow-color: rgba(0, 0, 0, 0.04);
+
+  --el-flat: 0px 0px 0px 1px var(--shadow-color);
+
+  --el-sunken: 0px 0px 0px 1px var(--shadow-color);
+
+  --el-inset:
+    0px 0px 0px 1px var(--shadow-color), 0px 1px 1px -0.5px var(--shadow-color);
+
+  --el-card:
+    0px 0px 0px 1px var(--shadow-color), 0px 1px 1px -0.5px var(--shadow-color),
+    0px 3px 3px -1.5px var(--shadow-color);
+
+  --shadow-widget-color: rgba(0, 0, 0, 0.07);
+  --el-widget:
+    0px 0px 0px 1px var(--shadow-widget-color),
+    0px 1px 1px -0.5px var(--shadow-widget-color),
+    0px 3px 3px -1.5px var(--shadow-widget-color),
+    0px 6px 6px -3px var(--shadow-widget-color);
+
+  /* Left-facing variant of the widget shadow — same color, redirected along
+   * -X so a full-height rail/dock casts its shadow onto the content beside it
+   * and reads as floating above the app. No hard edge ring: a soft, widening
+   * falloff only, so the seam stays gentle rather than a crisp line. */
+  --el-rail:
+    -1px 0px 2px -0.5px var(--shadow-widget-color),
+    -4px 0px 6px -2px var(--shadow-widget-color),
+    -10px 0px 14px -6px var(--shadow-widget-color);
+
+  --el-popover:
+    0px 0px 0px 1px var(--shadow-color), 0px 1px 1px -0.5px var(--shadow-color),
+    0px 3px 3px -1.5px var(--shadow-color), 0px 6px 6px -3px var(--shadow-color);
+
+  --el-sticky:
+    0px 0px 0px 1px var(--shadow-color), 0px 1px 1px -0.5px var(--shadow-color),
+    0px 3px 3px -1.5px var(--shadow-color),
+    0px 6px 6px -3px var(--shadow-color), 0px 12px 12px -6px var(--shadow-color);
+
+  --el-modal:
+    0px 0px 0px 1px var(--shadow-color), 0px 1px 1px -0.5px var(--shadow-color),
+    0px 3px 3px -1.5px var(--shadow-color),
+    0px 6px 6px -3px var(--shadow-color),
+    0px 12px 12px -6px var(--shadow-color),
+    0px 24px 24px -12px var(--shadow-color);
+
+  --el-overlay:
+    0px 0px 0px 1px var(--shadow-color), 0px 1px 1px -0.5px var(--shadow-color),
+    0px 3px 3px -1.5px var(--shadow-color),
+    0px 6px 6px -3px var(--shadow-color),
+    0px 12px 12px -6px var(--shadow-color),
+    0px 24px 24px -12px var(--shadow-color),
+    0px 48px 48px -24px var(--shadow-color);
+}
+
+/* ── State 2: system dark, unless the page opted into light ── */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme='light']) {
+    --background: oklch(0.155 0.002 30);
+    --foreground: oklch(0.94 0.004 30);
+    --card: oklch(0.21 0.003 30);
+    --card-foreground: oklch(0.94 0.004 30);
+    --popover: oklch(0.21 0.003 30);
+    --popover-foreground: oklch(0.94 0.004 30);
+
+    --primary: oklch(0.72 0.17 30);
+    --primary-foreground: oklch(0.14 0.01 30);
+    --primary-strong: oklch(0.72 0.17 30);
+
+    --secondary: oklch(0.22 0.003 30);
+    --secondary-foreground: oklch(0.94 0.004 30);
+
+    --muted: oklch(0.22 0.003 30);
+    --muted-foreground: oklch(0.62 0.006 30);
+
+    --accent: oklch(0.25 0.004 30);
+    --accent-foreground: oklch(0.94 0.004 30);
+
+    --destructive: oklch(0.5 0.2 25);
+    --destructive-foreground: oklch(0.94 0.005 30);
+    --destructive-strong: oklch(0.66 0.2 18);
+
+    --warning: oklch(0.78 0.14 75);
+    --warning-foreground: oklch(0.2 0.03 70);
+
+    --success: oklch(0.72 0.15 150);
+    --success-foreground: oklch(0.18 0.03 150);
+    --success-strong: oklch(0.72 0.15 150);
+
+    --info: oklch(0.7 0.13 245);
+    --info-foreground: oklch(0.18 0.03 245);
+
+    --border: oklch(0.25 0.003 30);
+    --input: oklch(0.3 0.003 30);
+    --ring: oklch(0.72 0.17 30);
+
+    --chart-1: oklch(0.72 0.17 30);
+    --chart-2: oklch(0.7 0.1 205);
+    --chart-3: oklch(0.75 0.17 148);
+    --chart-4: oklch(0.65 0.18 260);
+    --chart-5: oklch(0.75 0.12 80);
+
+    --sidebar-background: oklch(0.155 0.002 30);
+    --sidebar-foreground: oklch(0.94 0.004 30);
+    --sidebar-primary: oklch(0.72 0.17 30);
+    --sidebar-primary-foreground: oklch(0.14 0.01 30);
+    --sidebar-accent: oklch(0.2 0.003 30);
+    --sidebar-accent-foreground: oklch(0.94 0.004 30);
+    --sidebar-border: oklch(0.27 0.004 30);
+    --sidebar-ring: oklch(0.72 0.17 30);
+
+    --assistant: var(--sidebar-primary);
+    --assistant-foreground: var(--sidebar-primary-foreground);
+
+    --el-flat: none;
+
+    --el-sunken: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+
+    --el-inset:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.02),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+      0 1px 1px -0.5px rgba(0, 0, 0, 0.18);
+
+    --el-card:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.12),
+      0 1px 1px -0.5px rgba(0, 0, 0, 0.18), 0 3px 3px -1.5px rgba(0, 0, 0, 0.18);
+
+    --el-widget:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.14),
+      0 1px 1px -0.5px rgba(0, 0, 0, 0.22),
+      0 3px 3px -1.5px rgba(0, 0, 0, 0.22), 0 6px 6px -3px rgba(0, 0, 0, 0.22);
+
+    --el-rail:
+      inset 1px 0 0 0 rgba(255, 255, 255, 0.05),
+      -1px 0 2px -0.5px rgba(0, 0, 0, 0.22),
+      -4px 0 6px -2px rgba(0, 0, 0, 0.22), -10px 0 14px -6px rgba(0, 0, 0, 0.22);
+
+    --el-popover:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.14),
+      0 1px 1px -0.5px rgba(0, 0, 0, 0.18),
+      0 3px 3px -1.5px rgba(0, 0, 0, 0.18), 0 6px 6px -3px rgba(0, 0, 0, 0.18);
+
+    --el-sticky:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.16),
+      0 1px 1px -0.5px rgba(0, 0, 0, 0.18),
+      0 3px 3px -1.5px rgba(0, 0, 0, 0.18), 0 6px 6px -3px rgba(0, 0, 0, 0.18),
+      0 12px 12px -6px rgba(0, 0, 0, 0.18);
+
+    --el-modal:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.18),
+      0 1px 1px -0.5px rgba(0, 0, 0, 0.18),
+      0 3px 3px -1.5px rgba(0, 0, 0, 0.18), 0 6px 6px -3px rgba(0, 0, 0, 0.18),
+      0 12px 12px -6px rgba(0, 0, 0, 0.18),
+      0 24px 24px -12px rgba(0, 0, 0, 0.18);
+
+    --el-overlay:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.11),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.2),
+      0 1px 1px -0.5px rgba(0, 0, 0, 0.18),
+      0 3px 3px -1.5px rgba(0, 0, 0, 0.18), 0 6px 6px -3px rgba(0, 0, 0, 0.18),
+      0 12px 12px -6px rgba(0, 0, 0, 0.18),
+      0 24px 24px -12px rgba(0, 0, 0, 0.18),
+      0 48px 48px -24px rgba(0, 0, 0, 0.18);
+  }
+}
+
+/* ── State 3: explicit dark. Same declarations as the media block above —
+      kept in lockstep by scripts/build-css.mjs. ── */
+.dark,
+[data-theme='dark'] {
+  --background: oklch(0.155 0.002 30);
+  --foreground: oklch(0.94 0.004 30);
+  --card: oklch(0.21 0.003 30);
+  --card-foreground: oklch(0.94 0.004 30);
+  --popover: oklch(0.21 0.003 30);
+  --popover-foreground: oklch(0.94 0.004 30);
+
+  --primary: oklch(0.72 0.17 30);
+  --primary-foreground: oklch(0.14 0.01 30);
+  --primary-strong: oklch(0.72 0.17 30);
+
+  --secondary: oklch(0.22 0.003 30);
+  --secondary-foreground: oklch(0.94 0.004 30);
+
+  --muted: oklch(0.22 0.003 30);
+  --muted-foreground: oklch(0.62 0.006 30);
+
+  --accent: oklch(0.25 0.004 30);
+  --accent-foreground: oklch(0.94 0.004 30);
+
+  --destructive: oklch(0.5 0.2 25);
+  --destructive-foreground: oklch(0.94 0.005 30);
+  --destructive-strong: oklch(0.66 0.2 18);
+
+  --warning: oklch(0.78 0.14 75);
+  --warning-foreground: oklch(0.2 0.03 70);
+
+  --success: oklch(0.72 0.15 150);
+  --success-foreground: oklch(0.18 0.03 150);
+  --success-strong: oklch(0.72 0.15 150);
+
+  --info: oklch(0.7 0.13 245);
+  --info-foreground: oklch(0.18 0.03 245);
+
+  --border: oklch(0.25 0.003 30);
+  --input: oklch(0.3 0.003 30);
+  --ring: oklch(0.72 0.17 30);
+
+  --chart-1: oklch(0.72 0.17 30);
+  --chart-2: oklch(0.7 0.1 205);
+  --chart-3: oklch(0.75 0.17 148);
+  --chart-4: oklch(0.65 0.18 260);
+  --chart-5: oklch(0.75 0.12 80);
+
+  --sidebar-background: oklch(0.155 0.002 30);
+  --sidebar-foreground: oklch(0.94 0.004 30);
+  --sidebar-primary: oklch(0.72 0.17 30);
+  --sidebar-primary-foreground: oklch(0.14 0.01 30);
+  --sidebar-accent: oklch(0.2 0.003 30);
+  --sidebar-accent-foreground: oklch(0.94 0.004 30);
+  --sidebar-border: oklch(0.27 0.004 30);
+  --sidebar-ring: oklch(0.72 0.17 30);
+
+  --assistant: var(--sidebar-primary);
+  --assistant-foreground: var(--sidebar-primary-foreground);
+
+  --el-flat: none;
+
+  --el-sunken: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+
+  --el-inset:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.02),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.18);
+
+  --el-card:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.12),
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.18), 0 3px 3px -1.5px rgba(0, 0, 0, 0.18);
+
+  --el-widget:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.14),
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.22), 0 3px 3px -1.5px rgba(0, 0, 0, 0.22),
+    0 6px 6px -3px rgba(0, 0, 0, 0.22);
+
+  --el-rail:
+    inset 1px 0 0 0 rgba(255, 255, 255, 0.05),
+    -1px 0 2px -0.5px rgba(0, 0, 0, 0.22), -4px 0 6px -2px rgba(0, 0, 0, 0.22),
+    -10px 0 14px -6px rgba(0, 0, 0, 0.22);
+
+  --el-popover:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.14),
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.18), 0 3px 3px -1.5px rgba(0, 0, 0, 0.18),
+    0 6px 6px -3px rgba(0, 0, 0, 0.18);
+
+  --el-sticky:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.16),
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.18), 0 3px 3px -1.5px rgba(0, 0, 0, 0.18),
+    0 6px 6px -3px rgba(0, 0, 0, 0.18), 0 12px 12px -6px rgba(0, 0, 0, 0.18);
+
+  --el-modal:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.18),
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.18), 0 3px 3px -1.5px rgba(0, 0, 0, 0.18),
+    0 6px 6px -3px rgba(0, 0, 0, 0.18), 0 12px 12px -6px rgba(0, 0, 0, 0.18),
+    0 24px 24px -12px rgba(0, 0, 0, 0.18);
+
+  --el-overlay:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.11),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.2),
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.18), 0 3px 3px -1.5px rgba(0, 0, 0, 0.18),
+    0 6px 6px -3px rgba(0, 0, 0, 0.18), 0 12px 12px -6px rgba(0, 0, 0, 0.18),
+    0 24px 24px -12px rgba(0, 0, 0, 0.18), 0 48px 48px -24px rgba(0, 0, 0, 0.18);
+}

package/dist/trans.d.ts

@@ -25,14 +25,52 @@ type TransProps = ComponentProps<typeof Trans$1>;
  *
  * Verified against react-i18next 16.5.4: when no instance is passed via the
  * `i18n` prop and none has been registered globally, the component logs a
- * one-time `NO_I18NEXT_INSTANCE` console warning and returns its children
- * unmodified. It does not throw.
- *
- * Note the sharp edge this implies: the fallback is **children**, not
- * `defaults`. `<Trans i18nKey="a.b" defaults="Continue" />` has no children, so
- * with no instance available it renders nothing at all. Supply children when a
- * string must survive an unconfigured host:
- * `<Trans i18nKey="a.b" defaults="Continue">Continue</Trans>`.
+ * one-time `NO_I18NEXT_INSTANCE` console warning and returns its **children**
+ * unmodified — not `defaults`. Every SDK call site passes `i18nKey` +
+ * `defaults` and no children, so unpatched that renders nothing at all in any
+ * host without i18next (a partner's Storybook, a bare unit test). Inside Fusion
+ * and the harness it never shows, which is how it reached 0.1.0.
+ *
+ * We therefore detect that fall-through and render `defaults` ourselves.
+ *
+ * ### How the no-instance case is detected
+ *
+ * Not by asking `getI18n()`, because from here we cannot. It is not exported
+ * from `react-i18next/TransWithoutContext`, and react-i18next's `exports` map
+ * lists only `.`, `./TransWithoutContext`, `./initReactI18next`, `./icu.macro`
+ * and `./package.json`, so a deep import is refused. Reaching it through the
+ * main entry would drag in `context.js`, which calls `createContext()` at
+ * module scope — and under the `react-server` condition React 19 exports
+ * `createContext: undefined`, which would cost this module the
+ * RSC-renderability that is its whole reason for using this entry point.
+ *
+ * What is available is the library's own signal: with no instance it returns
+ * the `children` prop BY REFERENCE, and with an instance it returns
+ * `renderNodes(...)`, which never is that reference. Reusing react-i18next's
+ * own guard rather than reimplementing its condition means the two cannot
+ * drift apart across upgrades, and its module-level warn-once still owns the
+ * warning, so nothing warns twice.
+ *
+ * ### Why not simply pass `defaults` as children
+ *
+ * Because it has a measurable regression in the no-instance branch: children
+ * are exactly what react-i18next returns there, so injected `defaults` would
+ * override children a caller actually supplied. There is a test for that.
+ *
+ * The reason usually given for avoiding it — that children flip
+ * `interpolationOverride` (react-i18next rewrites the interpolation delimiters
+ * to `#$?…?$#` when `values` and `count` are absent but children are present)
+ * and also feed `getValuesFromChildren` — is real in the source but, measured,
+ * is NOT observable: `renderNodes` re-interpolates afterwards, and injecting
+ * `defaults` as children produced byte-identical output across `values`,
+ * `tOptions`, `components`, plural-via-`count`, and
+ * missing-key-falls-back-to-`defaults`. That argument should not be repeated
+ * as fact.
+ *
+ * The approach below sidesteps the question entirely: it forwards the caller's
+ * props untouched and injects nothing, so the with-instance path is identical
+ * by construction rather than identical across whichever cases someone
+ * happened to try.
  */
 declare function Trans(props: TransProps): React.JSX.Element;
 

package/dist/trans.js

@@ -1,8 +1,14 @@
 // src/_impl/trans.tsx
 import { Trans as I18nTrans } from "react-i18next/TransWithoutContext";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
+var renderI18nTrans = I18nTrans;
 function Trans(props) {
-  return /* @__PURE__ */ jsx(I18nTrans, { ...props });
+  const rendered = renderI18nTrans(props);
+  const fellThroughToChildren = rendered === props.children && props.children == null;
+  if (fellThroughToChildren && typeof props.defaults === "string") {
+    return /* @__PURE__ */ jsx(Fragment, { children: props.defaults });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: rendered });
 }
 export {
   Trans

package/package.json

@@ -1,17 +1,11 @@
 {
   "name": "@ekanos/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Fusion-styled UI primitives for building Ekanos integrations outside the monorepo. A curated, published slice of the internal @kit/ui library.",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/companydotcom/fusion.git",
-    "directory": "packages/ekanos-ui"
-  },
-  "homepage": "https://github.com/companydotcom/fusion/tree/dev/packages/ekanos-ui#readme",
   "bugs": {
-    "url": "https://github.com/companydotcom/fusion/issues"
+    "email": "npm@govastly.com"
   },
   "sideEffects": false,
   "files": [
@@ -20,6 +14,10 @@
     "LICENSE"
   ],
   "exports": {
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./dist/theme.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./base.css": "./dist/base.css",
     "./alert": {
       "types": "./dist/alert.d.ts",
       "default": "./dist/alert.js"
@@ -60,6 +58,14 @@
       "types": "./dist/input.d.ts",
       "default": "./dist/input.js"
     },
+    "./textarea": {
+      "types": "./dist/textarea.d.ts",
+      "default": "./dist/textarea.js"
+    },
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "default": "./dist/switch.js"
+    },
     "./dropdown-menu": {
       "types": "./dist/dropdown-menu.d.ts",
       "default": "./dist/dropdown-menu.js"
@@ -102,6 +108,7 @@
   },
   "dependencies": {
     "@base-ui/react": "1.6.0",
+    "@types/json-schema": "^7.0.15",
     "ai": "^6.0.197",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -124,12 +131,14 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-hook-form": "^7.68.0",
+    "tailwindcss": "4.3.3",
     "tsup": "8.5.1",
     "typescript": "^5.9.3",
+    "vitest": "4.1.10",
     "@kit/eslint-config": "0.2.0",
-    "@kit/ui": "0.1.0",
+    "@kit/tsconfig": "0.1.0",
     "@kit/prettier-config": "0.1.0",
-    "@kit/tsconfig": "0.1.0"
+    "@kit/ui": "0.1.0"
   },
   "prettier": "@kit/prettier-config",
   "typesVersions": {
@@ -140,11 +149,12 @@
     }
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/build-css.mjs",
     "clean": "git clean -xdf .turbo node_modules dist",
     "format": "prettier --check \"**/*.{ts,tsx,mjs}\"",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run --config vitest.config.ts",
     "pack:test": "node scripts/pack-test.mjs"
   }
 }