@holaboss/ui 0.1.0

package/dist/tokens.css

@@ -0,0 +1,446 @@
+/* Design tokens — single source of truth for color, type, radius, motion,
+   shadow, z-index. Theme files (./themes/*.css) override --background,
+   --foreground, --primary etc. by [data-theme="*"] attribute. */
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: "Inter Variable", sans-serif;
+  --font-mono:
+    "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    "Liberation Mono", monospace;
+
+  /* Foreground-mix utilities — opaque tint of foreground into bg.
+     Use bg-fg-3 etc. (Distinct from bg-foreground/N alpha.) */
+  --color-fg-2: var(--fg-2);
+  --color-fg-4: var(--fg-4);
+  --color-fg-6: var(--fg-6);
+  --color-fg-8: var(--fg-8);
+  --color-fg-12: var(--fg-12);
+  --color-fg-16: var(--fg-16);
+  --color-fg-24: var(--fg-24);
+  --color-fg-32: var(--fg-32);
+  --color-fg-48: var(--fg-48);
+  --color-fg-64: var(--fg-64);
+  --color-fg-80: var(--fg-80);
+  --color-fg-92: var(--fg-92);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-scrim: var(--scrim);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  /* Radius scale — integer px steps off base 8px. */
+  --radius-sm: calc(var(--radius) * 0.5); /* 4px */
+  --radius-md: calc(var(--radius) * 0.75); /* 6px — button/menu-item */
+  --radius-lg: var(--radius); /* 8px — card/input */
+  --radius-xl: calc(var(--radius) * 1.25); /* 10px — popover/dropdown */
+  --radius-2xl: calc(var(--radius) * 1.5); /* 12px — panel inner */
+  --radius-3xl: calc(var(--radius) * 2); /* 16px */
+  --radius-4xl: calc(var(--radius) * 2.5); /* 20px */
+
+  /* Font weights — each step ~50 lighter than Tailwind default. */
+  --font-weight-thin: 300;
+  --font-weight-extralight: 325;
+  --font-weight-light: 350;
+  --font-weight-normal: 350;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 450;
+  --font-weight-bold: 500;
+  --font-weight-extrabold: 550;
+  --font-weight-black: 600;
+
+  /* Tight type scale — ~10-20% denser than Tailwind default. */
+  --text-xs: 0.725rem;
+  --text-xs--line-height: 1.2rem;
+  --text-xs--letter-spacing: 0.01em;
+  --text-sm: 0.775rem;
+  --text-sm--line-height: 1.3rem;
+  --text-sm--letter-spacing: 0.008em;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 0.975rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.175rem;
+  --text-xl--line-height: 1.95rem;
+  --text-2xl: 1.275rem;
+  --text-2xl--line-height: 2.25rem;
+  --text-3xl: 1.375rem;
+  --text-3xl--line-height: 2.5rem;
+  --text-4xl: 1.475rem;
+  --text-4xl--line-height: 2.75rem;
+  --text-5xl: 3.052rem;
+
+  /* Entrance animations */
+  --animate-reveal-pop: reveal-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-fade-in-once: fade-in-once 0.6s ease-out forwards;
+
+  /* Brand alias — tracks whichever theme is active.
+     Use bg-brand / text-brand in new code. */
+  --color-brand: var(--primary);
+  --color-brand-foreground: var(--primary-foreground);
+
+  /* Layered shadow scale. 2xs/xs are hairline-ring + tiny drops for
+     surfaces that should read as "barely lifted" (cards, sticky toolbars).
+     sm steps up to a Linear/Stripe-style 8-layer stack for buttons +
+     popovers. md/lg/xl/2xl keep the hairline + blur scale. Dark mode
+     re-derives from --hairline-alpha / --shadow-alpha. */
+  --shadow-2xs:
+    rgba(0, 0, 0, 0.025) 0 1px 1px -0.5px, rgba(0, 0, 0, 0.05) 0 2px 2px -1px,
+    rgba(0, 0, 0, 0.05) 0 0 0 1px;
+  --shadow-xs:
+    rgba(0, 0, 0, 0.02) 0 1px 1px -0.5px, rgba(0, 0, 0, 0.04) 0 1px 1px -0.5px,
+    rgba(0, 0, 0, 0.04) 0 2px 2px -1px, rgba(0, 0, 0, 0.03) 0 0 0 0.5px;
+  --shadow-sm:
+    0 1px 1px 0.5px rgba(51, 51, 51, 0.03),
+    0 3px 3px -1.5px rgba(51, 51, 51, 0.015),
+    0 6px 6px -3px rgba(51, 51, 51, 0.03),
+    0 12px 12px -6px rgba(51, 51, 51, 0.03),
+    0 24px 24px -12px rgba(51, 51, 51, 0.03),
+    0 48px 48px -24px rgba(51, 51, 51, 0.03),
+    0 0 0 1px rgba(51, 51, 51, 0.08),
+    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.05);
+  --shadow-md:
+    0 0 0 1px oklch(from var(--foreground) l c h / var(--hairline-alpha)),
+    0 1px 2px -1px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 3px 5px -1px rgba(0, 0, 0, var(--shadow-alpha));
+  --shadow-lg:
+    0 0 0 1px oklch(from var(--foreground) l c h / var(--hairline-alpha)),
+    0 1px 2px -1px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 3px 5px -1px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 6px 10px -2px rgba(0, 0, 0, var(--shadow-alpha));
+  --shadow-xl:
+    0 0 0 1px oklch(from var(--foreground) l c h / var(--hairline-alpha)),
+    0 1px 2px -1px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 3px 5px -1px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 6px 10px -2px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 14px 22px -6px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.7));
+  --shadow-2xl:
+    0 0 0 1px oklch(from var(--foreground) l c h / var(--hairline-alpha)),
+    0 1px 2px -1px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 3px 5px -1px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 6px 10px -2px rgba(0, 0, 0, var(--shadow-alpha)),
+    0 14px 22px -6px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.7)),
+    0 24px 36px -8px rgba(0, 0, 0, calc(var(--shadow-alpha) * 0.5));
+
+  /* Z-index — semantic app-chrome layers (Tailwind z-0..z-50 still
+     used for in-component layering). 100-step rhythm. */
+  --z-index-sticky: 100;
+  --z-index-chrome: 200;
+  --z-index-panel: 300;
+  --z-index-popover: 500;
+  --z-index-tooltip: 600;
+  --z-index-modal: 700;
+  --z-index-overlay: 800;
+  --z-index-toast: 900;
+  --z-index-splash: 1000;
+
+  /* Motion — 180ms default + custom curve. */
+  --default-transition-duration: 180ms;
+  --default-transition-timing-function: cubic-bezier(0.32, 0.08, 0.24, 1);
+  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+  /* Linear-style emphasized curve — used for modals, collapses,
+     expansions, anything where the user needs to feel a deliberate
+     enter/exit. */
+  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  /* Smooth ease-out for slide-ins where the element should decelerate
+     into rest. */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration-fast: 120ms;
+  --duration-snappy: 180ms;
+  --duration-base: 220ms;
+  --duration-stride: 240ms;
+  --duration-slow: 360ms;
+}
+
+@keyframes reveal-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.96) translateY(10px);
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1.01) translateY(-2px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes fade-in-once {
+  0% {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes holaboss-splash-halo {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.08);
+  }
+}
+
+@keyframes holaboss-splash-dot {
+  0%,
+  100% {
+    opacity: 0.2;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-1.5px);
+  }
+}
+
+/* @property — register theme colors as animatable so theme switches
+   interpolate smoothly. */
+@property --background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.985 0.002 60);
+}
+@property --foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.18 0.015 55);
+}
+@property --primary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.68 0.21 37);
+}
+@property --info {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.62 0.17 240);
+}
+@property --success {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.58 0.16 148);
+}
+@property --destructive {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.55 0.24 18);
+}
+/* Surface palette — registered so theme switches interpolate the
+   whole canvas instead of hard-cutting on most surfaces. Initial
+   values mirror the holaos-light defaults. */
+@property --card {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.985 0.002 250);
+}
+@property --popover {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(1 0 0);
+}
+@property --muted {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.97 0.002 250);
+}
+@property --muted-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.56 0.005 250);
+}
+@property --accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.95 0.002 250);
+}
+@property --secondary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.97 0.002 250);
+}
+@property --border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.92 0.003 250);
+}
+@property --ring {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.624 0.229 32);
+}
+@property --sidebar {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.97 0.002 250);
+}
+
+/* Token fallbacks — tweakcn themes override these. Anything declared here
+   keeps the app renderable during the brief frame before [data-theme] is
+   set on <html>, and during theme switches. Themes shadow these. */
+:root {
+  --radius: 0.5rem;
+
+  /* Surface + content. Quiet near-neutral grays with a subtle cool
+     undertone; mirrors holaos-light. */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.18 0.003 250);
+  --card: oklch(0.985 0.002 250);
+  --card-foreground: oklch(0.18 0.003 250);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.003 250);
+  --primary: oklch(0.624 0.229 32);
+  --primary-foreground: oklch(0.98 0.01 32);
+  --secondary: oklch(0.97 0.002 250);
+  --secondary-foreground: oklch(0.21 0.003 250);
+  --muted: oklch(0.97 0.002 250);
+  --muted-foreground: oklch(0.56 0.005 250);
+  --accent: oklch(0.95 0.002 250);
+  --accent-foreground: oklch(0.18 0.003 250);
+  --border: oklch(0.92 0.003 250);
+  --input: oklch(0.92 0.003 250);
+  --ring: oklch(0.624 0.229 32);
+  --sidebar: oklch(0.945 0.002 250);
+  --sidebar-foreground: oklch(0.18 0.003 250);
+  --sidebar-primary: oklch(0.624 0.229 32);
+  --sidebar-primary-foreground: oklch(0.98 0.01 32);
+  --sidebar-accent: oklch(0.92 0.002 250);
+  --sidebar-accent-foreground: oklch(0.21 0.003 250);
+  --sidebar-border: oklch(0.9 0.003 250);
+  --sidebar-ring: oklch(0.624 0.229 32);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --success: oklch(0.58 0.16 148);
+  --warning: oklch(0.82 0.17 83);
+  --info: oklch(0.62 0.17 240);
+  --scrim: oklch(0.15 0.01 240 / 0.46);
+  --destructive: oklch(0.55 0.24 18);
+
+  /* Foreground colours for tonal CTAs (text/icon on a solid tone-bg
+     button or chip). Default to `var(--background)` so contrast
+     auto-adapts to theme mode: light themes (bg ≈ white) end up
+     with white text — which reads against the typically-darker
+     light-mode tones; dark themes (bg ≈ near-black) get dark text,
+     which reads against the typically-lighter dark-mode pastels
+     most themes ship (catppuccin / nord / one-dark-pro et al.).
+     Warning stays anchored dark because amber/yellow is usually
+     light in both modes and never plays well with white text.
+     Themes that have unusual tones can still override per-tone. */
+  --destructive-foreground: var(--background);
+  --success-foreground: var(--background);
+  --warning-foreground: oklch(0.18 0 0);
+  --info-foreground: var(--background);
+
+  --hairline-alpha: 0.05;
+  --shadow-alpha: 0.07;
+
+  /* Elevated bg for unfocused panels. */
+  --background-elevated: color-mix(
+    in srgb,
+    var(--foreground) 2%,
+    var(--background)
+  );
+
+  /* Foreground-on-background opaque blends. Use --fg-N for tinted
+     surfaces; Tailwind's bg-foreground/N for transparent overlays. */
+  --fg-2: color-mix(in srgb, var(--foreground) 2%, var(--background));
+  --fg-4: color-mix(in srgb, var(--foreground) 4%, var(--background));
+  --fg-6: color-mix(in srgb, var(--foreground) 6%, var(--background));
+  --fg-8: color-mix(in srgb, var(--foreground) 8%, var(--background));
+  --fg-12: color-mix(in srgb, var(--foreground) 12%, var(--background));
+  --fg-16: color-mix(in srgb, var(--foreground) 16%, var(--background));
+  --fg-24: color-mix(in srgb, var(--foreground) 24%, var(--background));
+  --fg-32: color-mix(in srgb, var(--foreground) 32%, var(--background));
+  --fg-48: color-mix(in srgb, var(--foreground) 48%, var(--background));
+  --fg-64: color-mix(in srgb, var(--foreground) 64%, var(--background));
+  --fg-80: color-mix(in srgb, var(--foreground) 80%, var(--background));
+  --fg-92: color-mix(in srgb, var(--foreground) 92%, var(--background));
+
+  /* Status text — tinted toward foreground for labels on neutral bg. */
+  --success-text: color-mix(in oklab, var(--success) 45%, var(--foreground));
+  --destructive-text: color-mix(
+    in oklab,
+    var(--destructive) 45%,
+    var(--foreground)
+  );
+  --info-text: color-mix(in oklab, var(--info) 45%, var(--foreground));
+
+  /* Workspace identity tint — neutral gray composed with --background /
+     --foreground via color-mix, so dark mode adapts automatically without
+     a separate theme override. */
+  --workspace-color-gray: oklch(0.55 0.005 270);
+
+  --workspace-color-gray-bg: color-mix(
+    in srgb,
+    var(--workspace-color-gray) 14%,
+    var(--background)
+  );
+  --workspace-color-gray-fg: color-mix(
+    in oklab,
+    var(--workspace-color-gray) 65%,
+    var(--foreground)
+  );
+}
+
+.dark {
+  --hairline-alpha: 0.14;
+  --shadow-alpha: 0.13;
+
+  /* Black drops + white hairline ring + white top inset
+     (lit-from-above). Mirrors light stack with inverted polarity. */
+  --shadow-sm:
+    0 1px 1px 0.5px rgba(0, 0, 0, 0.32),
+    0 3px 3px -1.5px rgba(0, 0, 0, 0.16),
+    0 6px 6px -3px rgba(0, 0, 0, 0.32),
+    0 12px 12px -6px rgba(0, 0, 0, 0.32),
+    0 24px 24px -12px rgba(0, 0, 0, 0.32),
+    0 48px 48px -24px rgba(0, 0, 0, 0.32),
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@holaboss/ui",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "description": "Shared UI library for holaOS — primitives, layouts, and tokens used by app-builder-sdk dashboards.",
+  "keywords": [
+    "holaboss",
+    "ui",
+    "design-system",
+    "react",
+    "shadcn",
+    "tailwind",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/holaboss-ai/holaOS.git",
+    "directory": "sdk/ui"
+  },
+  "homepage": "https://github.com/holaboss-ai/holaOS/tree/main/sdk/ui",
+  "bugs": "https://github.com/holaboss-ai/holaOS/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./themes/holaos.css": "./dist/themes/holaos.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "clean": "node ../../scripts/remove-paths.mjs dist",
+    "typecheck": "tsc --noEmit",
+    "test": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.542.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "tsdown": "^0.21.4",
+    "typescript": "^5.9.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,108 @@
+// =====================================================================
+// Primitives — holaOS-locked shadcn-style components. Drop these in
+// instead of redefining your own; they are guaranteed to match the
+// workspace canvas (tokens, density, hover affordances).
+// =====================================================================
+
+export { Alert, AlertTitle, AlertDescription, AlertAction } from "./primitives/alert.js";
+export { Badge, badgeVariants } from "./primitives/badge.js";
+export { Button, buttonVariants } from "./primitives/button.js";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+} from "./primitives/card.js";
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from "./primitives/dropdown-menu.js";
+export { EmptyState } from "./primitives/empty-state.js";
+export type { EmptyStateProps } from "./primitives/empty-state.js";
+export { Input } from "./primitives/input.js";
+export { Kbd } from "./primitives/kbd.js";
+export { Label } from "./primitives/label.js";
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "./primitives/popover.js";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./primitives/select.js";
+export { StatusDot } from "./primitives/status-dot.js";
+export { Switch } from "./primitives/switch.js";
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  tabsListVariants,
+} from "./primitives/tabs.js";
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "./primitives/tooltip.js";
+
+// =====================================================================
+// Layouts — composition primitives. Use these for page chrome,
+// loading / empty / error states, and dashboard structure. The
+// majority of visual drift between agent-built apps happens at this
+// layer, so reach for these before hand-rolling a similar layout.
+// =====================================================================
+
+export { DashboardShell } from "./layouts/dashboard-shell.js";
+export type { DashboardShellProps } from "./layouts/dashboard-shell.js";
+export { DataTable } from "./layouts/data-table.js";
+export type {
+  DataTableColumn,
+  DataTableProps,
+} from "./layouts/data-table.js";
+export { ErrorState } from "./layouts/error-state.js";
+export type { ErrorStateProps } from "./layouts/error-state.js";
+export { FilterBar } from "./layouts/filter-bar.js";
+export type { FilterBarProps } from "./layouts/filter-bar.js";
+export { LoadingState } from "./layouts/loading-state.js";
+export type { LoadingStateProps } from "./layouts/loading-state.js";
+export { PageHeader } from "./layouts/page-header.js";
+export type { PageHeaderProps } from "./layouts/page-header.js";
+export { Section } from "./layouts/section.js";
+export type { SectionProps } from "./layouts/section.js";
+export { StatPill } from "./layouts/stat-pill.js";
+export type { StatPillProps } from "./layouts/stat-pill.js";
+
+// =====================================================================
+// Utilities
+// =====================================================================
+
+export { cn } from "./lib/utils.js";

package/src/layouts/dashboard-shell.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/utils.js";
+
+/**
+ * Canonical chrome for a workspace-pane dashboard. Two slots: a top bar
+ * (header, actions) and a scrollable content region underneath. Apps
+ * should wrap their dashboard root with this so density, padding, and
+ * scroll behavior stay consistent across the workspace.
+ *
+ * The shell does not manage its own width; it fills its parent (the
+ * pane). Vertical scroll lives on `content` so the header stays pinned.
+ */
+export interface DashboardShellProps {
+  /** Sticky top region. Typically a `<PageHeader>`. */
+  header?: ReactNode;
+  /** Main scrollable content. */
+  children: ReactNode;
+  /** Extra class on the outer flex container. */
+  className?: string;
+  /** Extra class on the scrollable content region. */
+  contentClassName?: string;
+}
+
+export function DashboardShell({
+  header,
+  children,
+  className,
+  contentClassName,
+}: DashboardShellProps) {
+  return (
+    <div className={cn("flex h-full min-h-0 flex-col bg-background", className)}>
+      {header ? (
+        <div className="shrink-0 border-b border-border bg-background">
+          {header}
+        </div>
+      ) : null}
+      <div className={cn("min-h-0 flex-1 overflow-y-auto", contentClassName)}>
+        {children}
+      </div>
+    </div>
+  );
+}