@sero-ai/ui 0.3.2 → 0.4.1

package/dist/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/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,6 +11,12 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./dashboard-catalog.json": "./dist/components/dashboard/catalog.json",
+    "./reference": {
+      "types": "./dist/reference.d.ts",
+      "import": "./dist/reference.js",
+      "require": "./dist/reference.cjs"
+    },
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.js",
@@ -79,15 +85,21 @@
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "shadcn": "^3.8.5",
     "tailwindcss": "4.1.18",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.7"
   },
   "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit"
+    "build": "tsup && tsup --config tsup.reference.config.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "smoke": "node scripts/smoke-dist.mjs"
   },
   "module": "./dist/index.js"
 }

package/scripts/ensure-pnpm-publish.mjs

@@ -0,0 +1,23 @@
+// Publish guard — this package MUST be published with `pnpm publish`.
+//
+// The `publishConfig` block swaps main/types/exports over to the built `dist/`
+// at publish time. That override is a pnpm (and yarn) feature; plain npm
+// IGNORES it and publishes the top-level fields, which point at `src/`. So
+// `npm publish` here silently ships raw TypeScript source instead of the
+// compiled package — exactly how 0.4.0 went out wrong.
+//
+// This runs from `prepublishOnly`, so it fires on every publish. It aborts
+// unless the invoking package manager is pnpm.
+
+const ua = process.env.npm_config_user_agent ?? "";
+
+if (!ua.startsWith("pnpm")) {
+  const tool = ua.split("/")[0] || "an unknown tool";
+  console.error(
+    `\n✖ @sero-ai/ui must be published with pnpm, but this ran under ${tool}.\n\n` +
+      "  Plain npm ignores the publishConfig dist overrides and would ship raw\n" +
+      "  TypeScript source instead of the built dist/. Use:\n\n" +
+      "      pnpm publish   (from packages/ui)\n",
+  );
+  process.exit(1);
+}

package/scripts/smoke-dist.mjs

@@ -0,0 +1,68 @@
+// Smoke test for the published artifact.
+//
+// The package is bundle:false and bundler-resolved, so its public entrypoints
+// are easy to break under raw Node ESM (extensionless / directory imports).
+// This runs the built dist the way a published consumer would: it imports the
+// reference entry (ESM + CJS) and reads the catalogue JSON, failing loudly if
+// any entrypoint no longer resolves. Run after `pnpm build`.
+
+import { createRequire } from "node:module";
+import { existsSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const require = createRequire(import.meta.url);
+const here = dirname(fileURLToPath(import.meta.url));
+const dist = resolve(here, "..", "dist");
+
+const fail = (msg) => {
+  console.error(`✗ ${msg}`);
+  process.exitCode = 1;
+};
+
+if (!existsSync(dist)) {
+  fail("dist/ is missing — run `pnpm build` first");
+  process.exit(1);
+}
+
+// 1. Reference entrypoint resolves as ESM and exposes the example widgets.
+const EXPECTED = [
+  "StarterExample",
+  "SchedulerExample",
+  "ResourceExample",
+  "ActivityExample",
+];
+
+const esm = await import(resolve(dist, "reference.js"));
+for (const name of EXPECTED) {
+  if (typeof esm[name] !== "function") fail(`reference.js missing export ${name}`);
+}
+
+// 2. Reference entrypoint resolves as CJS too.
+const cjs = require(resolve(dist, "reference.cjs"));
+for (const name of EXPECTED) {
+  if (typeof cjs[name] !== "function") fail(`reference.cjs missing export ${name}`);
+}
+
+// The publishConfig `types` map points at these; a clean-race once dropped them.
+for (const f of ["reference.d.ts", "reference.d.cts"]) {
+  if (!existsSync(resolve(dist, f))) fail(`${f} not emitted to dist`);
+}
+
+// 3. Catalogue ships as plain JSON with the expected shape.
+const catalogPath = resolve(dist, "components", "dashboard", "catalog.json");
+if (!existsSync(catalogPath)) fail("dashboard-catalog.json not emitted to dist");
+else {
+  const catalog = JSON.parse(readFileSync(catalogPath, "utf8"));
+  if (!Array.isArray(catalog) || catalog.length === 0) {
+    fail("dashboard-catalog.json is not a non-empty array");
+  } else if (!catalog.every((e) => e.name && e.category && e.kind)) {
+    fail("dashboard-catalog.json has malformed entries");
+  }
+}
+
+if (process.exitCode) {
+  console.error("Smoke test failed.");
+} else {
+  console.log("✓ dist entrypoints resolve (reference esm+cjs, catalog json)");
+}

package/src/components/context-editor/CapabilitySection.tsx

@@ -0,0 +1,85 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ContextSkillInfo, ContextToolInfo } from '@sero-ai/common';
+import { Switch } from '../ui/switch';
+import { ContextSection, ToggleRow } from './parts';
+
+interface CapabilitySectionProps<TItem extends ContextToolInfo | ContextSkillInfo> {
+  icon: LucideIcon;
+  title: string;
+  tint: 'amber' | 'violet';
+  includeAllLabel: string;
+  emptyLabel: string;
+  items: TItem[];
+  allDisabled: boolean;
+  enabledCount: number;
+  isEnabled: (name: string) => boolean;
+  onToggle: (name: string) => void;
+  onToggleAll: (disabled: boolean) => void;
+}
+
+export function CapabilitySection<TItem extends ContextToolInfo | ContextSkillInfo>({
+  icon,
+  title,
+  tint,
+  includeAllLabel,
+  emptyLabel,
+  items,
+  allDisabled,
+  enabledCount,
+  isEnabled,
+  onToggle,
+  onToggleAll,
+}: CapabilitySectionProps<TItem>) {
+  const badgeVariant = allDisabled
+    ? 'disabled' as const
+    : enabledCount < items.length
+      ? 'partial' as const
+      : 'default' as const;
+
+  return (
+    <ContextSection
+      icon={icon}
+      title={title}
+      tint={tint}
+      count={items.length}
+      badge={
+        items.length > 0 && enabledCount < items.length
+          ? `${enabledCount}/${items.length} included`
+          : undefined
+      }
+      badgeVariant={badgeVariant}
+      defaultOpen={false}
+    >
+      <div className="space-y-1">
+        {items.length > 0 && (
+          <div className="mb-1 flex items-center justify-between rounded-md border-b border-border/20 px-2 pb-2">
+            <span className="text-[11px] font-medium text-[var(--text-secondary)]">
+              {includeAllLabel}
+            </span>
+            <Switch
+              size="sm"
+              checked={!allDisabled}
+              onCheckedChange={(checked) => onToggleAll(!checked)}
+            />
+          </div>
+        )}
+
+        {items.map((item) => (
+          <ToggleRow
+            key={item.name}
+            name={item.name}
+            description={item.description}
+            enabled={isEnabled(item.name)}
+            onToggle={() => onToggle(item.name)}
+          />
+        ))}
+
+        {items.length === 0 && (
+          <span className="text-[11px] italic text-[var(--text-muted)]">
+            {emptyLabel}
+          </span>
+        )}
+      </div>
+    </ContextSection>
+  );
+}

package/src/components/context-editor/ContextEditor.tsx

@@ -0,0 +1,138 @@
+/**
+ * ContextEditor — shared, controlled context editor dialog.
+ *
+ * Edits a system prompt plus tool/skill enablement and saved presets, against
+ * an `available` context. Host-agnostic: the consumer supplies the available
+ * context, the current overrides, the preset list, and the persistence
+ * callbacks. Used by the desktop chat session editor and by app modules (e.g.
+ * the Orchestrator loop context override).
+ */
+
+import { useState } from 'react';
+import { AlertCircle, Loader2, Settings2 } from 'lucide-react';
+import type { AvailableContext, ContextOverrides, ContextPreset } from '@sero-ai/common';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { ScrollArea } from '../ui/scroll-area';
+import { PresetBar } from './PresetBar';
+import { SkillsSection } from './SkillsSection';
+import { SystemPromptSection, type SystemPromptCopy } from './SystemPromptSection';
+import { ToolsSection } from './ToolsSection';
+import { useContextEditorModel, type ContextPresetBody } from './use-context-editor-model';
+
+export interface ContextEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  available: AvailableContext | null;
+  initialOverrides: ContextOverrides | null;
+  presets: ContextPreset[];
+  /** Persist the chosen overrides. Return false to keep the dialog open (error). */
+  onApply: (overrides: ContextOverrides | null) => Promise<boolean> | boolean;
+  onSavePreset: (name: string, preset: ContextPresetBody) => void;
+  onDeletePreset: (id: string) => void;
+  applyError?: string | null;
+  title?: string;
+  description?: string;
+  systemPromptCopy?: SystemPromptCopy;
+  applyLabel?: string;
+  /** Hide the Tools section (e.g. the Orchestrator picks tools per step, not per loop). */
+  hideTools?: boolean;
+}
+
+export function ContextEditor({
+  open,
+  onOpenChange,
+  available,
+  initialOverrides,
+  presets,
+  onApply,
+  onSavePreset,
+  onDeletePreset,
+  applyError,
+  title = 'Context Editor',
+  description = 'Configure what is included in the LLM context.',
+  systemPromptCopy,
+  applyLabel = 'Apply',
+  hideTools = false,
+}: ContextEditorProps) {
+  const model = useContextEditorModel({ open, available, initialOverrides, presets, onSavePreset, onDeletePreset });
+  const [applying, setApplying] = useState(false);
+
+  const handleApply = async () => {
+    setApplying(true);
+    try {
+      const ok = await onApply(model.buildOverrides());
+      if (ok !== false) onOpenChange(false);
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-h-[85vh] overflow-hidden bg-[var(--bg-surface)] sm:max-w-[58rem]"
+        showCloseButton
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <Settings2 className="size-4 text-[var(--text-muted)]" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="text-xs">{description}</DialogDescription>
+        </DialogHeader>
+
+        <PresetBar {...model.preset} />
+
+        {!available ? (
+          <div className="flex items-center justify-center gap-2 py-8">
+            <Loader2 className="size-4 animate-spin text-[var(--text-muted)]" />
+            <span className="text-xs text-[var(--text-muted)]">Loading context…</span>
+          </div>
+        ) : (
+          <ScrollArea className="max-h-[65vh] overflow-hidden">
+            <div className="min-w-0 space-y-2 pr-2">
+              <SystemPromptSection
+                displayedPrompt={model.displayedPrompt}
+                systemPrompt={model.systemPrompt}
+                onSystemPromptChange={model.setSystemPrompt}
+                copy={systemPromptCopy}
+              />
+              {!hideTools && <ToolsSection {...model.tools} />}
+              <SkillsSection {...model.skills} />
+            </div>
+          </ScrollArea>
+        )}
+
+        {applyError && (
+          <div className="flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-muted px-3 py-2">
+            <AlertCircle className="mt-0.5 size-3.5 shrink-0 text-status-error" />
+            <span className="text-[11px] text-status-error">{applyError}</span>
+          </div>
+        )}
+
+        <DialogFooter>
+          <button type="button"
+            onClick={() => onOpenChange(false)}
+            className="rounded-md border border-border/50 px-3 py-1.5 text-xs text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-elevated)]"
+          >
+            Cancel
+          </button>
+          <button type="button"
+            onClick={() => { void handleApply(); }}
+            disabled={!available || applying}
+            className="rounded-md bg-[var(--accent-primary)] px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-50"
+          >
+            {applyLabel}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/context-editor/PresetBar.tsx

@@ -0,0 +1,94 @@
+import { RotateCcw, Save, Trash2 } from 'lucide-react';
+import type { ContextPreset } from '@sero-ai/common';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { SavePresetInput } from './parts';
+
+interface PresetBarProps {
+  allPresets: ContextPreset[];
+  activePresetId: string | null;
+  activeUserPreset: ContextPreset | null;
+  hasOverrides: boolean;
+  showSaveInput: boolean;
+  onPresetChange: (id: string) => void;
+  onDelete: (id: string) => void;
+  onReset: () => void;
+  onShowSave: () => void;
+  onSave: (name: string) => void;
+  onCancelSave: () => void;
+}
+
+export function PresetBar({
+  allPresets,
+  activePresetId,
+  activeUserPreset,
+  hasOverrides,
+  showSaveInput,
+  onPresetChange,
+  onDelete,
+  onReset,
+  onShowSave,
+  onSave,
+  onCancelSave,
+}: PresetBarProps) {
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <span className="text-[11px] font-medium text-[var(--text-muted)]">
+          Preset:
+        </span>
+        <Select value={activePresetId ?? ''} onValueChange={onPresetChange}>
+          <SelectTrigger size="sm" className="h-7 w-40 text-xs">
+            <SelectValue placeholder="Custom" />
+          </SelectTrigger>
+          <SelectContent>
+            {allPresets.map((preset) => (
+              <SelectItem key={preset.id} value={preset.id}>
+                {preset.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {activeUserPreset && (
+          <button type="button"
+            onClick={() => onDelete(activeUserPreset.id)}
+            className="flex items-center gap-1 rounded-md px-1.5 py-1 text-[var(--text-muted)] transition-colors hover:bg-status-error-muted hover:text-status-error"
+            title={`Delete "${activeUserPreset.name}"`}
+          >
+            <Trash2 className="size-3" />
+          </button>
+        )}
+
+        {!showSaveInput && (
+          <button type="button"
+            onClick={onShowSave}
+            className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+          >
+            <Save className="size-3" />
+            Save as
+          </button>
+        )}
+
+        {hasOverrides && (
+          <button type="button"
+            onClick={onReset}
+            className="ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+          >
+            <RotateCcw className="size-3" />
+            Reset
+          </button>
+        )}
+      </div>
+
+      {showSaveInput && (
+        <SavePresetInput onSave={onSave} onCancel={onCancelSave} />
+      )}
+    </>
+  );
+}

package/src/components/context-editor/SkillsSection.tsx

@@ -0,0 +1,37 @@
+import { Sparkles } from 'lucide-react';
+import type { ContextSkillInfo } from '@sero-ai/common';
+import { CapabilitySection } from './CapabilitySection';
+
+interface SkillsSectionProps {
+  items: ContextSkillInfo[];
+  allDisabled: boolean;
+  enabledCount: number;
+  isEnabled: (name: string) => boolean;
+  onToggle: (name: string) => void;
+  onToggleAll: (disabled: boolean) => void;
+}
+
+export function SkillsSection({
+  items,
+  allDisabled,
+  enabledCount,
+  isEnabled,
+  onToggle,
+  onToggleAll,
+}: SkillsSectionProps) {
+  return (
+    <CapabilitySection
+      icon={Sparkles}
+      title="Skills"
+      tint="violet"
+      includeAllLabel="Include all skills"
+      emptyLabel="No skills available"
+      items={items}
+      allDisabled={allDisabled}
+      enabledCount={enabledCount}
+      isEnabled={isEnabled}
+      onToggle={onToggle}
+      onToggleAll={onToggleAll}
+    />
+  );
+}