@sero-ai/ui 0.3.2 → 0.4.1

package/src/styles/glass-board.css

@@ -0,0 +1,43 @@
+/**
+ * Shared glass board — the frosted-board look, framework-agnostic.
+ *
+ * `.glass-canvas` paints the ambient accent-glow backdrop; `.glass-tile`
+ * is a translucent, backdrop-blurred surface with a luminous hairline rim.
+ * The desktop dashboard and the styleguide preview both consume this file
+ * so widgets render on an identical board.
+ *
+ * Depends on the canonical `--glass-*` tokens in globals.css. Dark is the
+ * primary target; light mirrors the same relationships (frosted white
+ * glass over a soft tinted canvas).
+ */
+
+/* ── Canvas ──────────────────────────────────────────────────────
+   Ambient accent glow the glass tiles pick up. */
+.glass-canvas {
+  --glass-canvas-base: #e9eaef;
+  --glass-glow-a: color-mix(in srgb, var(--accent-primary) 16%, transparent);
+  --glass-glow-b: color-mix(in srgb, var(--brand-primary) 12%, transparent);
+  background:
+    radial-gradient(90% 70% at 85% -10%, var(--glass-glow-a), transparent 60%),
+    radial-gradient(80% 60% at -10% 110%, var(--glass-glow-b), transparent 60%),
+    var(--glass-canvas-base);
+}
+
+.dark .glass-canvas {
+  --glass-canvas-base: #060608;
+  --glass-glow-a: color-mix(in srgb, var(--accent-primary) 48%, transparent);
+  --glass-glow-b: color-mix(in srgb, var(--brand-primary) 30%, transparent);
+}
+
+/* ── Glass tile surface ──────────────────────────────────────────
+   Translucent, blurred surface floating over the canvas. The surface is
+   static on hover — the tile is content, not a button, so pointing at it
+   must not change it. (`--glass-hover` is still used for row hover *inside*
+   widgets.) The transition covers the drag/resize state changes only. */
+.glass-tile {
+  background: var(--glass-tile);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(24px) saturate(140%);
+  box-shadow: inset 0 1px 0 var(--glass-rim);
+  transition: background-color 150ms ease, border-color 150ms ease;
+}

package/src/styles/globals.css

@@ -179,6 +179,27 @@
   --sidebar-accent-foreground: var(--text-primary);
   --sidebar-border: var(--border-subtle);
   --sidebar-ring: var(--border-focus);
+
+  /* ── Glass (dashboard) ────────────────────────────────────
+     Canonical translucent surface language for the glass
+     dashboard. The host `dashboard.css` derives its `--dash-*`
+     tokens from these, and the `.glass` scope below remaps the
+     component-facing `--surface-*` tokens to them. Light =
+     frosted white; dark values live in the `.dark` block. */
+  --glass-tile: rgba(255, 255, 255, 0.52); /* base tile (host) */
+  --glass-surface: rgba(255, 255, 255, 0.62); /* raised card */
+  --glass-surface-flat: rgba(255, 255, 255, 0.40); /* flat row */
+  --glass-border: rgba(15, 17, 23, 0.10);
+  --glass-rim: rgba(255, 255, 255, 0.60);
+  --glass-hover: rgba(255, 255, 255, 0.72);
+
+  /* Component-facing surface tokens. Default to the solid design
+     tokens so components look unchanged outside the `.glass`
+     scope; the scope flips them to the glass values above. */
+  --surface-raised: var(--bg-surface);
+  --surface-flat: var(--bg-elevated);
+  --surface-line: var(--border-subtle);
+  --surface-rim: transparent;
 }
 
 /* ── Scrollbars ─────────────────────────────────────────────── */
@@ -421,6 +442,44 @@
   --sidebar-accent-foreground: var(--text-primary);
   --sidebar-border: var(--border-subtle);
   --sidebar-ring: var(--border-focus);
+
+  /* ── Glass (dashboard) — dark: low-opacity white over the dark
+       canvas glow. `--surface-*` defaults stay solid; the `.glass`
+       scope flips them (values shared across themes via the vars). */
+  --glass-tile: rgba(255, 255, 255, 0.06);
+  --glass-surface: rgba(255, 255, 255, 0.09);
+  --glass-surface-flat: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.12);
+  --glass-rim: rgba(255, 255, 255, 0.08);
+  --glass-hover: rgba(255, 255, 255, 0.13);
+}
+
+/* ── Glass scope ─────────────────────────────────────────────────
+   Subtree-local class applied by `WidgetContent` (default on). It
+   remaps the component-facing surface tokens and the container/border
+   shadcn bridge tokens to the translucent glass values, so dashboard
+   components read as part of the frosted tile. Interactive controls
+   (`--input`) and portalled surfaces (`--popover`, rendered at
+   document.body outside this scope) stay solid for legibility. No
+   `backdrop-filter` here — the host tile provides the single blur. */
+.glass {
+  /* component surface tokens */
+  --surface-raised: var(--glass-surface);
+  --surface-flat: var(--glass-surface-flat);
+  --surface-line: var(--glass-border);
+  --surface-rim: var(--glass-rim);
+
+  /* containers + borders for primitives used inside widgets */
+  --card: var(--glass-surface);
+  --secondary: var(--glass-surface-flat);
+  --muted: var(--glass-surface-flat);
+  --accent: var(--glass-surface-flat);
+  --border: var(--glass-border);
+
+  /* keep interactive controls + portalled surfaces solid */
+  --input: var(--border-subtle);
+  --popover: var(--bg-elevated);
+  --ring: var(--border-focus);
 }
 
 html {

package/tsup.config.ts

@@ -1,18 +1,32 @@
 import { defineConfig } from "tsup";
 import { cpSync } from "node:fs";
 
+// Mirror the source tree 1:1 (bundle: false) so deep imports keep working.
+// The reference entry is bundled separately in tsup.reference.config.ts, which
+// the build script runs *after* this pass (this one cleans; that one does not).
 export default defineConfig({
-  // Tells tsup to grab everything in your src directory
-  entry: ["src/**/*.{ts,tsx}"],
+  entry: [
+    "src/**/*.{ts,tsx}",
+    "!src/**/*.test.{ts,tsx}",
+    "!src/**/__tests__/**",
+    "!src/reference.ts",
+    "!src/components/reference/**",
+  ],
   format: ["esm", "cjs"],
   dts: true,
   clean: true,
   splitting: true,
-  
-  // This is the golden key: it stops esbuild from merging everything 
+
+  // This is the golden key: it stops esbuild from merging everything
   // into index.js and forces it to mirror your exact folder structure.
   bundle: false,
   onSuccess: () => {
     cpSync("src/styles", "dist/styles", { recursive: true });
+    // The catalogue is plain data served as @sero-ai/ui/dashboard-catalog.json;
+    // the mirror pass only emits .ts/.tsx, so copy the JSON across by hand.
+    cpSync(
+      "src/components/dashboard/catalog.json",
+      "dist/components/dashboard/catalog.json",
+    );
   },
 });

package/tsup.reference.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "tsup";
+
+// Reference examples are a public entrypoint, so bundle them into a single
+// self-contained file that resolves under Node ESM (the rest of the package is
+// bundler-resolved). Runtime deps stay external; only local component code is
+// inlined. Runs after the mirror pass (tsup.config.ts) with `clean: false`, so
+// it adds dist/reference.* without wiping the mirrored output.
+export default defineConfig({
+  entry: ["src/reference.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: false,
+  splitting: false,
+  bundle: true,
+});

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
+    environment: "jsdom",
+  },
+});