@hanzo/ui 8.0.5 → 8.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.5",
+  "version": "8.0.6",
   "type": "module",
   "description": "Hanzo UI \u2014 the one cross-platform component library on @hanzo/gui. The product/app layer (charts, metrics, page headers, status tags, rich empty states, combobox, slide-over, toasts, drag-reorder, labeled field rows, provider/product marks) + the metadata-driven record layer (@hanzo/data: RecordsView, DataTable, board, typed field editors) + the calm dark-first tokens and motion. Presentational, host-agnostic (data/effects injected), clean-room. Web + native (iOS) + desktop.",
   "exports": {

package/src/product/AppHeader.tsx

@@ -13,22 +13,22 @@
  */
 import { useState, type ReactNode } from 'react'
 import { Button, Popover, Separator, Text, XStack, YStack } from '@hanzo/gui'
-import { CreditCard, Grip, LogOut, Settings2, UserRound } from '@hanzogui/lucide-icons-2'
+import { AppWindow, Bot, CreditCard, Grip, LayoutGrid, LogOut, MessageCircle, Settings2, Sparkles, UserRound, Users } from '@hanzogui/lucide-icons-2'
 
 import { BrandMark } from './BrandMark'
 import { ThemeToggle } from './ThemeToggle'
+import { otherSurfaces, type Surface, type SurfaceId } from './surfaces.data'
 
-/** One Hanzo surface the app switcher offers. */
-export type Surface = { id: string; label: string; href: string; hint?: string }
-
-/** The five Hanzo surfaces (cloud opens the console). */
-export const SURFACES: Surface[] = [
-  { id: 'ai', label: 'Hanzo AI', href: 'https://hanzo.ai', hint: 'hanzo.ai' },
-  { id: 'cloud', label: 'Cloud', href: 'https://console.hanzo.ai', hint: 'console' },
-  { id: 'console', label: 'Console', href: 'https://console.hanzo.ai', hint: 'console.hanzo.ai' },
-  { id: 'app', label: 'App', href: 'https://hanzo.app', hint: 'hanzo.app' },
-  { id: 'team', label: 'Team', href: 'https://hanzo.team', hint: 'hanzo.team' },
-]
+/** The per-surface glyph — keyed by `Surface.id`, so each surface reads distinctly. */
+const SURFACE_ICON = {
+  ai: Sparkles,
+  console: LayoutGrid,
+  app: AppWindow,
+  chat: MessageCircle,
+  bot: Bot,
+  team: Users,
+  billing: CreditCard,
+} as const satisfies Record<SurfaceId, unknown>
 
 const openHref = (href: string) => {
   if (typeof window !== 'undefined') window.open(href, '_blank', 'noopener')
@@ -56,7 +56,9 @@ export type AppHeaderProps = {
   org?: ReactNode
   /** Free slot between the org slot and the right cluster. */
   children?: ReactNode
-  /** App-switcher surfaces; [] hides the switcher. */
+  /** The surface this header renders on — omitted from the switcher (no self-link). */
+  current?: SurfaceId
+  /** App-switcher surfaces; defaults to every surface but `current`. [] hides it. */
   surfaces?: Surface[]
   /** Open a surface — default `window.open` (new tab). */
   open?: (surface: Surface) => void
@@ -78,7 +80,8 @@ export function AppHeader({
   onBrand,
   org,
   children,
-  surfaces = SURFACES,
+  current,
+  surfaces,
   open,
   user,
   menu,
@@ -90,6 +93,7 @@ export function AppHeader({
 }: AppHeaderProps) {
   const [appsOpen, setAppsOpen] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
+  const items = surfaces ?? otherSurfaces(current)
   const launch = (s: Surface) => {
     setAppsOpen(false)
     if (open) open(s)
@@ -112,25 +116,29 @@ export function AppHeader({
         {children}
       </XStack>
 
-      {surfaces.length > 0 ? (
+      {items.length > 0 ? (
         <Popover open={appsOpen} onOpenChange={setAppsOpen} placement="bottom-end">
           <Popover.Trigger asChild>
             <Button size="$2" chromeless icon={<Grip size={16} />} aria-label="Apps" />
           </Popover.Trigger>
           <Popover.Content bordered elevate p="$2" width={230} bg="$color2" borderColor="$borderColor">
             <YStack gap="$1">
-              {surfaces.map((s) => (
-                <XStack key={s.id} onPress={() => launch(s)} cursor="pointer" items="center" gap="$2.5" px="$2" py="$2" rounded="$3" hoverStyle={{ bg: '$color5' }}>
-                  <Text flex={1} fontSize="$2" fontWeight="600" color="$color12">
-                    {s.label}
-                  </Text>
-                  {s.hint ? (
-                    <Text fontSize="$1" color="$color10">
-                      {s.hint}
+              {items.map((s) => {
+                const Icon = SURFACE_ICON[s.id]
+                return (
+                  <XStack key={s.id} onPress={() => launch(s)} cursor="pointer" items="center" gap="$2.5" px="$2" py="$2" rounded="$3" hoverStyle={{ bg: '$color5' }}>
+                    <Icon size={16} />
+                    <Text flex={1} fontSize="$2" fontWeight="600" color="$color12">
+                      {s.label}
                     </Text>
-                  ) : null}
-                </XStack>
-              ))}
+                    {s.hint ? (
+                      <Text fontSize="$1" color="$color10">
+                        {s.hint}
+                      </Text>
+                    ) : null}
+                  </XStack>
+                )
+              })}
             </YStack>
           </Popover.Content>
         </Popover>

package/src/product/index.ts

@@ -40,6 +40,8 @@ export * from './combobox/filter'
 
 // The shared shell — brand mark, org scope + switcher, app header (the
 // console's org-scope contract + switcher hoisted here; hanzoai/ui#36).
+// `surfaces.data` is the ONE canonical cross-surface list every launcher consumes.
+export * from './surfaces.data'
 export * from './AppHeader'
 export * from './BrandMark'
 export * from './OrgSwitcher'

package/src/product/surfaces.data.ts

@@ -0,0 +1,42 @@
+// The ONE canonical list of Hanzo product surfaces the cross-surface app switcher
+// offers — consumed by EVERY surface's launcher so the set never diverges.
+//
+// Framework-agnostic (plain TS, zero imports): React consumers (the @hanzo/ui
+// `AppHeader`, the console `AppLauncher`) import it directly; a surface that
+// cannot resolve THIS package — the Svelte Huly-fork `team` (whose own `@hanzo/ui`
+// is the workbench UI framework, a name clash) and the shadcn-aliased `app` — keeps
+// a byte-identical MIRROR that points back here. Add or reorder a surface HERE and
+// every launcher moves together (mirrors are updated in the same change).
+//
+// `id` is the stable key AND the icon key: each framework maps it to its own glyph
+// (React → lucide, Svelte → SurfaceIcon), so the DATA itself stays glyph-free.
+
+export type SurfaceId = 'ai' | 'console' | 'app' | 'chat' | 'bot' | 'team' | 'billing'
+
+/** One Hanzo surface the app switcher offers. */
+export type Surface = {
+  /** Stable id; also the per-surface icon key. */
+  id: SurfaceId
+  /** Menu label. */
+  label: string
+  /** Absolute product URL (opened in a new tab). */
+  href: string
+  /** The domain, shown as the tile subtitle. */
+  hint: string
+}
+
+/** The seven Hanzo surfaces (`console` opens the cloud AI console). */
+export const SURFACES: Surface[] = [
+  { id: 'ai', label: 'Hanzo AI', href: 'https://hanzo.ai', hint: 'hanzo.ai' },
+  { id: 'console', label: 'Console', href: 'https://console.hanzo.ai', hint: 'console.hanzo.ai' },
+  { id: 'app', label: 'App', href: 'https://hanzo.app', hint: 'hanzo.app' },
+  { id: 'chat', label: 'Chat', href: 'https://hanzo.chat', hint: 'hanzo.chat' },
+  { id: 'bot', label: 'Bot', href: 'https://hanzo.bot', hint: 'hanzo.bot' },
+  { id: 'team', label: 'Team', href: 'https://hanzo.team', hint: 'hanzo.team' },
+  { id: 'billing', label: 'Billing', href: 'https://billing.hanzo.ai', hint: 'billing.hanzo.ai' },
+]
+
+/** Every surface except `current` — a launcher never links to itself. */
+export function otherSurfaces(current?: SurfaceId): Surface[] {
+  return current ? SURFACES.filter((s) => s.id !== current) : SURFACES
+}

package/types/product/AppHeader.d.ts

@@ -10,15 +10,7 @@
  * flex + truncation, the wordmark collapse is the brand motion itself.
  */
 import { type ReactNode } from 'react';
-/** One Hanzo surface the app switcher offers. */
-export type Surface = {
-    id: string;
-    label: string;
-    href: string;
-    hint?: string;
-};
-/** The five Hanzo surfaces (cloud opens the console). */
-export declare const SURFACES: Surface[];
+import { type Surface, type SurfaceId } from './surfaces.data';
 export type AppHeaderProps = {
     /** Brand slot — defaults to the animated `<BrandMark/>`. */
     brand?: ReactNode;
@@ -30,7 +22,9 @@ export type AppHeaderProps = {
     org?: ReactNode;
     /** Free slot between the org slot and the right cluster. */
     children?: ReactNode;
-    /** App-switcher surfaces; [] hides the switcher. */
+    /** The surface this header renders on — omitted from the switcher (no self-link). */
+    current?: SurfaceId;
+    /** App-switcher surfaces; defaults to every surface but `current`. [] hides it. */
     surfaces?: Surface[];
     /** Open a surface — default `window.open` (new tab). */
     open?: (surface: Surface) => void;
@@ -45,5 +39,5 @@ export type AppHeaderProps = {
     onBilling?: () => void;
     onSignOut?: () => void;
 };
-export declare function AppHeader({ brand, wordmark, onBrand, org, children, surfaces, open, user, menu, theme, onProfile, onTeam, onBilling, onSignOut, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppHeader({ brand, wordmark, onBrand, org, children, current, surfaces, open, user, menu, theme, onProfile, onTeam, onBilling, onSignOut, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AppHeader.d.ts.map

package/types/product/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/product/AppHeader.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOhD,iDAAiD;AACjD,MAAM,MAAM,OAAO,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhF,yDAAyD;AACzD,eAAO,MAAM,QAAQ,EAAE,OAAO,EAM7B,CAAA;AAiBD,MAAM,MAAM,cAAc,GAAG;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,wDAAwD;IACxD,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACjC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,QAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,cAAc,2CAqFhB"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/product/AppHeader.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMhD,OAAO,EAAiB,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAA;AA4B7E,MAAM,MAAM,cAAc,GAAG;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,wDAAwD;IACxD,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACjC,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,cAAc,2CA0FhB"}

package/types/product/index.d.ts

@@ -3,6 +3,7 @@ export { SERIES, colorForIndex, utilColor, Sparkline as MetricSparkline, MiniBar
 export { Donut as DonutRing, type DonutSegment } from './Donut';
 export { ComboBox } from './ComboBox';
 export * from './combobox/filter';
+export * from './surfaces.data';
 export * from './AppHeader';
 export * from './BrandMark';
 export * from './OrgSwitcher';

package/types/product/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AAIjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AAKjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/types/product/surfaces.data.d.ts

@@ -0,0 +1,17 @@
+export type SurfaceId = 'ai' | 'console' | 'app' | 'chat' | 'bot' | 'team' | 'billing';
+/** One Hanzo surface the app switcher offers. */
+export type Surface = {
+    /** Stable id; also the per-surface icon key. */
+    id: SurfaceId;
+    /** Menu label. */
+    label: string;
+    /** Absolute product URL (opened in a new tab). */
+    href: string;
+    /** The domain, shown as the tile subtitle. */
+    hint: string;
+};
+/** The seven Hanzo surfaces (`console` opens the cloud AI console). */
+export declare const SURFACES: Surface[];
+/** Every surface except `current` — a launcher never links to itself. */
+export declare function otherSurfaces(current?: SurfaceId): Surface[];
+//# sourceMappingURL=surfaces.data.d.ts.map

package/types/product/surfaces.data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surfaces.data.d.ts","sourceRoot":"","sources":["../../src/product/surfaces.data.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;AAEtF,iDAAiD;AACjD,MAAM,MAAM,OAAO,GAAG;IACpB,gDAAgD;IAChD,EAAE,EAAE,SAAS,CAAA;IACb,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,uEAAuE;AACvE,eAAO,MAAM,QAAQ,EAAE,OAAO,EAQ7B,CAAA;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,EAAE,CAE5D"}