feat(ui): an org wears its OWN mark — one treatment, and a switcher that is the account control's peer

A customer's console must show the CUSTOMER's identity. `OrgMark` is now the one
organization treatment: the org's own logo when IAM carries one, else its
MONOGRAM on a neutral tile — the same rule @hanzo/iam's account widget applies to
a person, so a workspace and a user read as one system. It is never a house
glyph. The switcher's private copy of that avatar is gone (it split words on
whitespace alone, so `acme-labs` read "A" instead of "AL").

The switcher trigger is sized as the PEER of the account control — 44px tall, a
30px mark, the same type and the same hit area — because "which workspace" and
"who I am" are two halves of one identity, not a caption over a control.

New optional `current` prop: a host that has already resolved the org (display
name + logo) injects it, so the switcher and the chrome's org mark can never
disagree — and a user with no cross-tenant list still gets their own logo.

Co-authored-by: Hanzo Dev <dev@hanzo.ai>

Author: zeekay

pkg/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.10",
+  "version": "8.0.11",
   "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": {

pkg/ui/src/product/OrgMark.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import { monogram } from './OrgMark'
+
+describe('monogram', () => {
+  it('takes the first letter of the first two words', () => {
+    expect(monogram('Acme Robotics')).toBe('AR')
+    expect(monogram('North Star Labs Incorporated')).toBe('NS')
+  })
+
+  it('breaks on the separators an org id carries, not whitespace alone', () => {
+    // The old switcher split on \s+ only, so every one of these collapsed to the
+    // first two LETTERS of one word — `acme-labs` read "AC", not "AL".
+    expect(monogram('acme-labs')).toBe('AL')
+    expect(monogram('acme_labs')).toBe('AL')
+    expect(monogram('acme.labs')).toBe('AL')
+    expect(monogram('acme/labs')).toBe('AL')
+  })
+
+  it('gives a single word its one initial — the account widget’s own rule', () => {
+    expect(monogram('hanzo')).toBe('H')
+    expect(monogram('maxpower')).toBe('M')
+  })
+
+  it('is stable on degenerate names', () => {
+    expect(monogram('')).toBe('')
+    expect(monogram('   ')).toBe('')
+    expect(monogram('x')).toBe('X')
+    expect(monogram('  spaced  out  ')).toBe('SO')
+    expect(monogram('---')).toBe('--')
+  })
+})

pkg/ui/src/product/OrgMark.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+/**
+ * OrgMark — the ONE organization identity treatment.
+ *
+ * An org shows its OWN logo when IAM carries one; when it does not, it shows its
+ * MONOGRAM on a neutral tile — the same treatment the account widget gives a
+ * person, so a workspace and a user read as peers. It is never a house mark: a
+ * customer's console must show the customer's identity, not ours.
+ *
+ * Monochrome by construction (`$color4` tile, `$color12` glyph) so it belongs to
+ * the chrome; colour stays with content.
+ */
+import { Text, YStack } from '@hanzo/gui'
+
+import type { Org } from './scope'
+
+/**
+ * The monogram for a name: the first letter of each of the first two words,
+ * uppercased — the SAME rule @hanzo/iam's account widget applies to a person, so
+ * a workspace and a user wear one treatment. Words break on whitespace and on the
+ * separators an org id carries (`.`, `_`, `-`, `/`), so `acme-labs` reads AL
+ * while a single word reads its one initial.
+ */
+export function monogram(name: string): string {
+  const words = name.trim().split(/[\s._/-]+/).filter(Boolean)
+  const letters = words
+    .slice(0, 2)
+    .map((w) => w[0] ?? '')
+    .join('')
+  return (letters || name.trim().slice(0, 2)).toUpperCase()
+}
+
+export type OrgMarkProps = {
+  /** The org to mark — its `logo` wins, else the monogram of its display name. */
+  org: Org
+  /** Edge of the square tile / height of the logo. Default 22. */
+  size?: number
+  /**
+   * Widest a LOGO may run, for a wordmark that is not square. Omit to keep the
+   * logo square like the monogram (a switcher row, an avatar slot).
+   */
+  maxW?: number
+}
+
+export function OrgMark({ org, size = 22, maxW }: OrgMarkProps) {
+  if (org.logo) {
+    // An arbitrary tenant-supplied URL — a raw <img>, since next/image would need
+    // a remote allow-list per customer domain.
+    // eslint-disable-next-line @next/next/no-img-element
+    return (
+      <img
+        src={org.logo}
+        alt=""
+        style={{
+          height: size,
+          width: maxW ? 'auto' : size,
+          maxWidth: maxW ?? size,
+          objectFit: 'contain',
+          display: 'block',
+          borderRadius: 6,
+          flexShrink: 0,
+        }}
+      />
+    )
+  }
+  return (
+    <YStack
+      width={size}
+      height={size}
+      rounded="$3"
+      bg="$color4"
+      items="center"
+      justify="center"
+      style={{ flexShrink: 0 }}
+    >
+      <Text fontSize={Math.round(size * 0.4)} fontWeight="800" color="$color12">
+        {monogram(org.displayName || org.name)}
+      </Text>
+    </YStack>
+  )
+}

pkg/ui/src/product/OrgSwitcher.tsx

@@ -18,31 +18,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Input, Popover, Spinner, Text, XStack, YStack } from '@hanzo/gui'
 import { Check, ChevronsUpDown, LayoutGrid, Plus, Search } from '@hanzogui/lucide-icons-2'
 
+import { OrgMark } from './OrgMark'
 import { filterOrgs, type Org, type OrgScope } from './scope'
 
 const titleCase = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : s)
-const initialsOf = (o: Org) =>
-  (o.displayName || o.name)
-    .split(/\s+/)
-    .map((w) => w[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase()
-
-/** An org's avatar — its logo when set, else a monogram tile. */
-function OrgAvatar({ org, size = 22 }: { org: Org; size?: number }) {
-  if (org.logo) {
-    // eslint-disable-next-line @next/next/no-img-element
-    return <img src={org.logo} alt="" style={{ height: size, width: size, objectFit: 'contain', display: 'block', borderRadius: 6 }} />
-  }
-  return (
-    <YStack width={size} height={size} rounded="$3" bg="$color4" items="center" justify="center">
-      <Text fontSize="$1" fontWeight="800" color="$color12">
-        {initialsOf(org)}
-      </Text>
-    </YStack>
-  )
-}
 
 export type OrgSwitcherProps = {
   /** The active-org contract (see `orgScope`). */
@@ -55,13 +34,20 @@ export type OrgSwitcherProps = {
   orgs?: (page: number, query: string) => Promise<Org[]>
   /** Rows per page the loader returns. Default 20. */
   pageSize?: number
+  /**
+   * The org the surface is scoped to, already resolved (display name + logo).
+   * Omit and the trigger synthesizes it from the scope id alone — enough to name
+   * the org, but it cannot know a logo. Pass it wherever the host already
+   * resolves the org, so the switcher and the chrome's org mark agree.
+   */
+  current?: Org
   /** Create-org hook → the created org's id; omit to hide the affordance. */
   create?: (name: string) => Promise<string>
   /** Show the "All organizations" de-scope row (`scope.leaveOrg`). */
   picker?: boolean
 }
 
-export function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }: OrgSwitcherProps) {
+export function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picker = false }: OrgSwitcherProps) {
   const currentId = scope.currentOrg()
 
   const [open, setOpen] = useState(false)
@@ -133,10 +119,13 @@ export function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false
     return [{ name: currentId, displayName: titleCase(currentId) }]
   }, [orgs, rows, query, currentId])
 
-  const current: Org = useMemo(
-    () => rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) },
-    [rows, currentId],
-  )
+  // The host's resolved org wins (it alone can carry the logo), then the loaded
+  // row, then a name synthesized from the scope id — never nothing.
+  const current: Org = useMemo(() => {
+    if (given && given.name === currentId) return given
+    return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) }
+  }, [given, rows, currentId])
+  const currentLabel = current.displayName || titleCase(current.name)
 
   const select = useCallback(
     (org: string) => {
@@ -163,8 +152,17 @@ export function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false
   return (
     <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
       <Popover.Trigger asChild>
-        <Button size="$2" chromeless icon={<OrgAvatar org={current} size={18} />} iconAfter={<ChevronsUpDown size={13} />}>
-          {current.displayName || titleCase(current.name)}
+        {/* Sized as the PEER of the account control — same height, same mark,
+            same type, same hit area — so "which workspace" and "who I am" read
+            as the two halves of one identity, not a caption over a control. */}
+        <Button chromeless height={44} px="$2" justify="flex-start" aria-label={`${currentLabel} · switch organization`}>
+          <XStack items="center" gap="$2.5" flex={1} minW={0}>
+            <OrgMark org={current} size={30} />
+            <Text flex={1} minW={0} fontSize="$4" fontWeight="800" color="$color12" numberOfLines={1}>
+              {currentLabel}
+            </Text>
+            <ChevronsUpDown size={15} color="$color9" />
+          </XStack>
         </Button>
       </Popover.Trigger>
       <Popover.Content bordered elevate p="$2" width={300} bg="$color2" borderColor="$borderColor">
@@ -251,7 +249,7 @@ export function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false
                     bg={org.name === currentId ? '$color4' : 'transparent'}
                     hoverStyle={{ bg: '$color5' }}
                   >
-                    <OrgAvatar org={org} />
+                    <OrgMark org={org} />
                     <Text flex={1} fontSize="$2" color="$color12" numberOfLines={1}>
                       {org.displayName || org.name}
                     </Text>

pkg/ui/src/product/index.ts

@@ -44,6 +44,7 @@ export * from './combobox/filter'
 export * from './surfaces.data'
 export * from './AppHeader'
 export * from './BrandMark'
+export * from './OrgMark'
 export * from './OrgSwitcher'
 export * from './scope'