@fayz-ai/ui 0.5.0 → 0.6.6

package/dist/layout/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkGE6XUREM_cjs = require('../chunk-GE6XUREM.cjs');
+var chunkDJHS2XRW_cjs = require('../chunk-DJHS2XRW.cjs');
 var chunkW4XXXJRW_cjs = require('../chunk-W4XXXJRW.cjs');
 require('../chunk-VVVZO2LE.cjs');
 
@@ -8,67 +8,67 @@ require('../chunk-VVVZO2LE.cjs');
 
 Object.defineProperty(exports, "AppShell", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.AppShell; }
+  get: function () { return chunkDJHS2XRW_cjs.AppShell; }
 });
 Object.defineProperty(exports, "BackStyleProvider", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.BackStyleProvider; }
+  get: function () { return chunkDJHS2XRW_cjs.BackStyleProvider; }
 });
 Object.defineProperty(exports, "ICON_MAP", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.ICON_MAP; }
+  get: function () { return chunkDJHS2XRW_cjs.ICON_MAP; }
 });
 Object.defineProperty(exports, "ModuleLayoutProvider", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.ModuleLayoutProvider; }
+  get: function () { return chunkDJHS2XRW_cjs.ModuleLayoutProvider; }
 });
 Object.defineProperty(exports, "ModulePage", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.ModulePage; }
+  get: function () { return chunkDJHS2XRW_cjs.ModulePage; }
 });
 Object.defineProperty(exports, "NavTransitionProvider", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.NavTransitionProvider; }
+  get: function () { return chunkDJHS2XRW_cjs.NavTransitionProvider; }
 });
 Object.defineProperty(exports, "PageHeaderActions", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.PageHeaderActions; }
+  get: function () { return chunkDJHS2XRW_cjs.PageHeaderActions; }
 });
 Object.defineProperty(exports, "PageTransition", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.PageTransition; }
+  get: function () { return chunkDJHS2XRW_cjs.PageTransition; }
 });
 Object.defineProperty(exports, "Sidebar", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.Sidebar; }
+  get: function () { return chunkDJHS2XRW_cjs.Sidebar; }
 });
 Object.defineProperty(exports, "SubpageHeader", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.SubpageHeader; }
+  get: function () { return chunkDJHS2XRW_cjs.SubpageHeader; }
 });
 Object.defineProperty(exports, "Topbar", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.Topbar; }
+  get: function () { return chunkDJHS2XRW_cjs.Topbar; }
 });
 Object.defineProperty(exports, "useBackStyle", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.useBackStyle; }
+  get: function () { return chunkDJHS2XRW_cjs.useBackStyle; }
 });
 Object.defineProperty(exports, "useModuleHeaderActionsSlot", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.useModuleHeaderActionsSlot; }
+  get: function () { return chunkDJHS2XRW_cjs.useModuleHeaderActionsSlot; }
 });
 Object.defineProperty(exports, "useModuleHeaderSlot", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.useModuleHeaderSlot; }
+  get: function () { return chunkDJHS2XRW_cjs.useModuleHeaderSlot; }
 });
 Object.defineProperty(exports, "useModuleLayout", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.useModuleLayout; }
+  get: function () { return chunkDJHS2XRW_cjs.useModuleLayout; }
 });
 Object.defineProperty(exports, "useNavTransition", {
   enumerable: true,
-  get: function () { return chunkGE6XUREM_cjs.useNavTransition; }
+  get: function () { return chunkDJHS2XRW_cjs.useNavTransition; }
 });
 Object.defineProperty(exports, "SaveBar", {
   enumerable: true,

package/dist/layout/index.d.ts

@@ -1,4 +1,4 @@
-export { AppShell, type AppShellProps, type AppShellUser } from './AppShell';
+export { AppShell, type AppShellProps, type AppShellUser, type BottomNavItem, type BottomNavRouteItem, type BottomNavActionItem, type MobileHeaderVariant, } from './AppShell';
 export { Sidebar, type SidebarProps, type SidebarUser, type NavigationItem, ICON_MAP } from './Sidebar';
 export { Topbar, type TopbarProps } from './Topbar';
 export { ModulePage, SubpageHeader, ModuleLayoutProvider, useModuleLayout, PageHeaderActions, BackStyleProvider, useBackStyle, type ModulePageProps, type ModuleNavItem, type ModuleNavVariant, type SubpageHeaderProps, type BackButtonStyle, } from './ModulePage';

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACvG,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EACL,UAAU,EACV,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC1G,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,aAAa,GACnB,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACvG,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EACL,UAAU,EACV,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC1G,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,aAAa,GACnB,MAAM,kBAAkB,CAAA"}

package/dist/layout/index.js

@@ -1,4 +1,4 @@
-export { AppShell, BackStyleProvider, ICON_MAP, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTransition, Sidebar, SubpageHeader, Topbar, useBackStyle, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition } from '../chunk-CZ6X6PZT.js';
+export { AppShell, BackStyleProvider, ICON_MAP, ModuleLayoutProvider, ModulePage, NavTransitionProvider, PageHeaderActions, PageTransition, Sidebar, SubpageHeader, Topbar, useBackStyle, useModuleHeaderActionsSlot, useModuleHeaderSlot, useModuleLayout, useNavTransition } from '../chunk-LO5QZO7F.js';
 export { SaveBar, SaveBarProvider, useBackHandler, useSaveBar } from '../chunk-E526FHZ4.js';
 import '../chunk-DNYVEOAX.js';
 //# sourceMappingURL=index.js.map

package/dist/tailwind.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var chunk2P7T6QQK_cjs = require('./chunk-2P7T6QQK.cjs');
+
+// src/tailwind.ts
+var SDK_PACKAGES = ["ui", "saas", "storefront", "portal"];
+var GLOB = "/src/**/*.{ts,tsx}";
+function fayzTailwind(opts = {}) {
+  const sdk = opts.sdkDir ?? "../../fayz-sdk";
+  return {
+    presets: [chunk2P7T6QQK_cjs.fayzUiPreset],
+    darkMode: "class",
+    content: [
+      "./index.html",
+      "./src/**/*.{ts,tsx}",
+      // Published / sandbox: SDK installed in node_modules (packages ship src/).
+      ...SDK_PACKAGES.map((p) => `./node_modules/@fayz-ai/${p}${GLOB}`),
+      "./node_modules/@fayz-ai/plugin-*/src/**/*.{ts,tsx}",
+      // Local dev: SDK as a sibling checkout (matches nothing in production).
+      ...SDK_PACKAGES.map((p) => `${sdk}/packages/${p}${GLOB}`),
+      `${sdk}/plugins/*/src/**/*.{ts,tsx}`,
+      ...opts.content ?? []
+    ],
+    plugins: []
+  };
+}
+
+exports.fayzTailwind = fayzTailwind;
+//# sourceMappingURL=tailwind.cjs.map
+//# sourceMappingURL=tailwind.cjs.map

package/dist/tailwind.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tailwind.ts"],"names":["fayzUiPreset"],"mappings":";;;;;AAWA,IAAM,YAAA,GAAe,CAAC,IAAA,EAAM,MAAA,EAAQ,cAAc,QAAQ,CAAA;AAC1D,IAAM,IAAA,GAAO,oBAAA;AAYN,SAAS,YAAA,CAAa,IAAA,GAA4B,EAAC,EAAW;AACnE,EAAA,MAAM,GAAA,GAAM,KAAK,MAAA,IAAU,gBAAA;AAC3B,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,CAACA,8BAAsB,CAAA;AAAA,IAChC,QAAA,EAAU,OAAA;AAAA,IACV,OAAA,EAAS;AAAA,MACP,cAAA;AAAA,MACA,qBAAA;AAAA;AAAA,MAEA,GAAG,aAAa,GAAA,CAAI,CAAC,MAAM,CAAA,wBAAA,EAA2B,CAAC,CAAA,EAAG,IAAI,CAAA,CAAE,CAAA;AAAA,MAChE,oDAAA;AAAA;AAAA,MAEA,GAAG,YAAA,CAAa,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,EAAG,GAAG,CAAA,UAAA,EAAa,CAAC,CAAA,EAAG,IAAI,CAAA,CAAE,CAAA;AAAA,MACxD,GAAG,GAAG,CAAA,4BAAA,CAAA;AAAA,MACN,GAAI,IAAA,CAAK,OAAA,IAAW;AAAC,KACvB;AAAA,IACA,SAAS;AAAC,GACZ;AACF","file":"tailwind.cjs","sourcesContent":["import type { Config } from 'tailwindcss'\nimport { fayzUiPreset } from './theme/preset'\n\nexport interface FayzTailwindOptions {\n  /** Extra app-specific content globs, appended after the SDK globs. */\n  content?: string[]\n  /** SDK source location relative to the app root (default ../../fayz-sdk). */\n  sdkDir?: string\n}\n\n// SDK packages whose source ships Tailwind class names the app renders.\nconst SDK_PACKAGES = ['ui', 'saas', 'storefront', 'portal'] as const\nconst GLOB = '/src/**/*.{ts,tsx}'\n\n/**\n * Shared Tailwind config for Fayz dogfood apps. Applies the Fayz UI preset and\n * scans the SDK shell/UI/plugin source for class names — from node_modules (the\n * Fayz editor sandbox / published) and a sibling `../../fayz-sdk` checkout (local\n * dev). Whichever exists is scanned; missing globs are ignored. Apps no longer\n * hand-maintain content globs or the relative-vs-npm preset import.\n *\n *     import { fayzTailwind } from '@fayz-ai/ui/tailwind'\n *     export default fayzTailwind()\n */\nexport function fayzTailwind(opts: FayzTailwindOptions = {}): Config {\n  const sdk = opts.sdkDir ?? '../../fayz-sdk'\n  return {\n    presets: [fayzUiPreset as Config],\n    darkMode: 'class',\n    content: [\n      './index.html',\n      './src/**/*.{ts,tsx}',\n      // Published / sandbox: SDK installed in node_modules (packages ship src/).\n      ...SDK_PACKAGES.map((p) => `./node_modules/@fayz-ai/${p}${GLOB}`),\n      './node_modules/@fayz-ai/plugin-*/src/**/*.{ts,tsx}',\n      // Local dev: SDK as a sibling checkout (matches nothing in production).\n      ...SDK_PACKAGES.map((p) => `${sdk}/packages/${p}${GLOB}`),\n      `${sdk}/plugins/*/src/**/*.{ts,tsx}`,\n      ...(opts.content ?? []),\n    ],\n    plugins: [],\n  }\n}\n"]}

package/dist/tailwind.d.ts

@@ -0,0 +1,19 @@
+import type { Config } from 'tailwindcss';
+export interface FayzTailwindOptions {
+    /** Extra app-specific content globs, appended after the SDK globs. */
+    content?: string[];
+    /** SDK source location relative to the app root (default ../../fayz-sdk). */
+    sdkDir?: string;
+}
+/**
+ * Shared Tailwind config for Fayz dogfood apps. Applies the Fayz UI preset and
+ * scans the SDK shell/UI/plugin source for class names — from node_modules (the
+ * Fayz editor sandbox / published) and a sibling `../../fayz-sdk` checkout (local
+ * dev). Whichever exists is scanned; missing globs are ignored. Apps no longer
+ * hand-maintain content globs or the relative-vs-npm preset import.
+ *
+ *     import { fayzTailwind } from '@fayz-ai/ui/tailwind'
+ *     export default fayzTailwind()
+ */
+export declare function fayzTailwind(opts?: FayzTailwindOptions): Config;
+//# sourceMappingURL=tailwind.d.ts.map

package/dist/tailwind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.d.ts","sourceRoot":"","sources":["../src/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,MAAM,WAAW,mBAAmB;IAClC,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAMD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,IAAI,GAAE,mBAAwB,GAAG,MAAM,CAkBnE"}

package/dist/tailwind.js

@@ -0,0 +1,28 @@
+import { fayzUiPreset } from './chunk-IWBXYV4U.js';
+
+// src/tailwind.ts
+var SDK_PACKAGES = ["ui", "saas", "storefront", "portal"];
+var GLOB = "/src/**/*.{ts,tsx}";
+function fayzTailwind(opts = {}) {
+  const sdk = opts.sdkDir ?? "../../fayz-sdk";
+  return {
+    presets: [fayzUiPreset],
+    darkMode: "class",
+    content: [
+      "./index.html",
+      "./src/**/*.{ts,tsx}",
+      // Published / sandbox: SDK installed in node_modules (packages ship src/).
+      ...SDK_PACKAGES.map((p) => `./node_modules/@fayz-ai/${p}${GLOB}`),
+      "./node_modules/@fayz-ai/plugin-*/src/**/*.{ts,tsx}",
+      // Local dev: SDK as a sibling checkout (matches nothing in production).
+      ...SDK_PACKAGES.map((p) => `${sdk}/packages/${p}${GLOB}`),
+      `${sdk}/plugins/*/src/**/*.{ts,tsx}`,
+      ...opts.content ?? []
+    ],
+    plugins: []
+  };
+}
+
+export { fayzTailwind };
+//# sourceMappingURL=tailwind.js.map
+//# sourceMappingURL=tailwind.js.map

package/dist/tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tailwind.ts"],"names":[],"mappings":";;;AAWA,IAAM,YAAA,GAAe,CAAC,IAAA,EAAM,MAAA,EAAQ,cAAc,QAAQ,CAAA;AAC1D,IAAM,IAAA,GAAO,oBAAA;AAYN,SAAS,YAAA,CAAa,IAAA,GAA4B,EAAC,EAAW;AACnE,EAAA,MAAM,GAAA,GAAM,KAAK,MAAA,IAAU,gBAAA;AAC3B,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,CAAC,YAAsB,CAAA;AAAA,IAChC,QAAA,EAAU,OAAA;AAAA,IACV,OAAA,EAAS;AAAA,MACP,cAAA;AAAA,MACA,qBAAA;AAAA;AAAA,MAEA,GAAG,aAAa,GAAA,CAAI,CAAC,MAAM,CAAA,wBAAA,EAA2B,CAAC,CAAA,EAAG,IAAI,CAAA,CAAE,CAAA;AAAA,MAChE,oDAAA;AAAA;AAAA,MAEA,GAAG,YAAA,CAAa,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,EAAG,GAAG,CAAA,UAAA,EAAa,CAAC,CAAA,EAAG,IAAI,CAAA,CAAE,CAAA;AAAA,MACxD,GAAG,GAAG,CAAA,4BAAA,CAAA;AAAA,MACN,GAAI,IAAA,CAAK,OAAA,IAAW;AAAC,KACvB;AAAA,IACA,SAAS;AAAC,GACZ;AACF","file":"tailwind.js","sourcesContent":["import type { Config } from 'tailwindcss'\nimport { fayzUiPreset } from './theme/preset'\n\nexport interface FayzTailwindOptions {\n  /** Extra app-specific content globs, appended after the SDK globs. */\n  content?: string[]\n  /** SDK source location relative to the app root (default ../../fayz-sdk). */\n  sdkDir?: string\n}\n\n// SDK packages whose source ships Tailwind class names the app renders.\nconst SDK_PACKAGES = ['ui', 'saas', 'storefront', 'portal'] as const\nconst GLOB = '/src/**/*.{ts,tsx}'\n\n/**\n * Shared Tailwind config for Fayz dogfood apps. Applies the Fayz UI preset and\n * scans the SDK shell/UI/plugin source for class names — from node_modules (the\n * Fayz editor sandbox / published) and a sibling `../../fayz-sdk` checkout (local\n * dev). Whichever exists is scanned; missing globs are ignored. Apps no longer\n * hand-maintain content globs or the relative-vs-npm preset import.\n *\n *     import { fayzTailwind } from '@fayz-ai/ui/tailwind'\n *     export default fayzTailwind()\n */\nexport function fayzTailwind(opts: FayzTailwindOptions = {}): Config {\n  const sdk = opts.sdkDir ?? '../../fayz-sdk'\n  return {\n    presets: [fayzUiPreset as Config],\n    darkMode: 'class',\n    content: [\n      './index.html',\n      './src/**/*.{ts,tsx}',\n      // Published / sandbox: SDK installed in node_modules (packages ship src/).\n      ...SDK_PACKAGES.map((p) => `./node_modules/@fayz-ai/${p}${GLOB}`),\n      './node_modules/@fayz-ai/plugin-*/src/**/*.{ts,tsx}',\n      // Local dev: SDK as a sibling checkout (matches nothing in production).\n      ...SDK_PACKAGES.map((p) => `${sdk}/packages/${p}${GLOB}`),\n      `${sdk}/plugins/*/src/**/*.{ts,tsx}`,\n      ...(opts.content ?? []),\n    ],\n    plugins: [],\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fayz-ai/ui",
-  "version": "0.5.0",
+  "version": "0.6.6",
   "description": "Fayz SDK UI — Radix + Tailwind component library with CRUD engine and layout shells",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,6 +43,12 @@
       "types": "./dist/preset.d.ts",
       "import": "./dist/preset.js",
       "require": "./dist/preset.cjs"
+    },
+    "./tailwind": {
+      "source": "./src/tailwind.ts",
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.js",
+      "require": "./dist/tailwind.cjs"
     }
   },
   "files": [
@@ -75,8 +81,8 @@
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.4.0",
     "zustand": "^4.5.0",
-    "@fayz-ai/core": "^0.5.0",
-    "@fayz-ai/auth": "^0.5.0"
+    "@fayz-ai/core": "^0.6.6",
+    "@fayz-ai/auth": "^0.6.6"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
@@ -90,9 +96,6 @@
     "typescript": "^5.5.0"
   },
   "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "build": "tsup && tsc --emitDeclarationOnly --declaration --declarationMap --noEmit false",
     "dev": "tsup --watch",

package/src/dashboard/DashboardCanvas.tsx

@@ -90,6 +90,10 @@ export interface DashboardCanvasProps {
   showHeader?: boolean
   /** App-level curation of which widgets show, their order and span. */
   appLayout?: DashboardLayoutConfig
+  /** App-level widgets injected into this surface's grid without a plugin — e.g.
+   *  an "Ask the assistant" CTA. Merged with the registry widgets, then laid out
+   *  (respects each widget's span/defaultOrder). Filtered to this surface. */
+  extraWidgets?: DashboardWidgetDef[]
   /** Show a shared time-range control (sticky, top-right). Widgets read it via
    *  useDashboardRange(). Pass `true` for defaults or an options object. */
   range?: boolean | DashboardRangeOptions
@@ -115,11 +119,18 @@ export interface DashboardRangeOptions {
 }
 
 export function DashboardCanvas({
-  surface, domain, title, subtitle, showHeader = true, appLayout, range,
+  surface, domain, title, subtitle, showHeader = true, appLayout, extraWidgets, range,
   customizable = true, customizeLabel, initialVisibility, onNavigate, className,
 }: DashboardCanvasProps) {
   const runtime = usePluginRuntime()
-  const widgets = getDashboardWidgets(runtime, { surface, domain })
+  const registryWidgets = getDashboardWidgets(runtime, { surface, domain })
+  const widgets = React.useMemo<DashboardWidgetDef[]>(() => {
+    const extra = (extraWidgets ?? []).filter((w) => {
+      if (!(w.surfaces ?? ['home', 'plugin-home']).includes(surface)) return false
+      return !domain || w.domain === domain
+    })
+    return extra.length ? [...registryWidgets, ...extra] : registryWidgets
+  }, [registryWidgets, extraWidgets, surface, domain])
   const rangeOpts: DashboardRangeOptions | null = range ? (range === true ? {} : range) : null
 
   const forceAll = (initialVisibility ?? (surface === 'plugin-home' ? 'all' : 'default')) === 'all'

package/src/dashboard/GoldCard.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { cn } from '../utils/cn'
+
+export interface GoldCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Brand-colored hero variant — `bg-primary text-primary-foreground` with a
+   * soft branded shadow. Use for the headline card (e.g. a balance hero). When
+   * false (default) it's a plain surface card (`bg-card` + border).
+   */
+  branded?: boolean
+}
+
+/**
+ * GoldCard — a generic, reusable rounded card wrapper for dashboard surfaces.
+ *
+ * The `branded` variant paints the card in the app's primary color so a single
+ * hero (balance, headline KPI, CTA) pops against the neutral grid. Both variants
+ * are internally full-width so they reflow cleanly inside the responsive
+ * DashboardGrid (full-width on mobile, cell-width on desktop).
+ */
+export const GoldCard = React.forwardRef<HTMLDivElement, GoldCardProps>(
+  ({ branded = false, className, children, ...rest }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'h-full rounded-3xl p-5',
+        branded
+          ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/20'
+          : 'border border-border bg-card text-card-foreground shadow-sm',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  ),
+)
+GoldCard.displayName = 'GoldCard'

package/src/dashboard/KpiCard.tsx

@@ -222,8 +222,10 @@ export function KpiCard(props: KpiCardProps) {
   }
 
   return (
-    <Card>
-      <CardContent className="p-4">
+    // h-full so cards fill the (stretch) grid cell and every card in a row matches
+    // the tallest — labels/subtitles of different lengths no longer misalign them.
+    <Card className="h-full">
+      <CardContent className="flex h-full flex-col p-4">
         <div className="mb-2 flex items-center justify-between gap-2">
           <span className="text-sm text-muted-foreground">{label}</span>
           <span className="text-muted-foreground">{renderIcon(icon)}</span>

package/src/dashboard/index.ts

@@ -10,6 +10,7 @@ export { resolveDashboardLayout, type LaidOutWidget } from './layout'
 export { useDashboardPreferences, type DashboardPreferencesState } from './preferences'
 export { DashboardCustomizeMenu, type DashboardCustomizeMenuProps } from './DashboardCustomizeMenu'
 export { DashboardGrid, type DashboardGridItem, type DashboardGridProps } from './DashboardGrid'
+export { GoldCard, type GoldCardProps } from './GoldCard'
 export {
   DashboardRangeProvider,
   DashboardRangeControl,

package/src/index.ts

@@ -105,6 +105,10 @@ export {
   AppShell,
   type AppShellProps,
   type AppShellUser,
+  type BottomNavItem,
+  type BottomNavRouteItem,
+  type BottomNavActionItem,
+  type MobileHeaderVariant,
   Sidebar,
   type SidebarProps,
   type SidebarUser,
@@ -179,6 +183,8 @@ export {
   DashboardGrid,
   type DashboardGridItem,
   type DashboardGridProps,
+  GoldCard,
+  type GoldCardProps,
   DashboardRangeProvider,
   DashboardRangeControl,
   useDashboardRange,