@luxfi/ui 7.4.0 → 7.4.2

package/src/avatar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as RadixAvatar from '@radix-ui/react-avatar';
+import { Avatar as GuiAvatar } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -80,9 +80,12 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
 
+    // gui's Avatar — the same load/fallback state machine, but as a gui
+    // primitive, so it themes and lays out identically on native.
     return (
-      <RadixAvatar.Root
-        ref={ ref }
+      <GuiAvatar
+        ref={ ref as never }
+        unstyled
         className={ cn(
           'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle',
           SIZE_CLASSES[size],
@@ -90,20 +93,22 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
           !isBorderless && 'ring-2 ring-white dark:ring-gray-900',
           className,
         ) }
-        { ...rest }
+        { ...(rest as object) }
       >
         <AvatarFallback name={ name } icon={ icon }>
           { fallback }
         </AvatarFallback>
-        <RadixAvatar.Image
-          className="h-full w-full rounded-[inherit] object-cover"
-          src={ src }
-          srcSet={ srcSet }
-          loading={ loading }
-          alt={ name ?? '' }
-        />
+        { src != null && (
+          <GuiAvatar.Image
+            className="h-full w-full rounded-[inherit] object-cover"
+            src={ src }
+            srcSet={ srcSet }
+            loading={ loading }
+            alt={ name ?? '' }
+          />
+        ) }
         { children }
-      </RadixAvatar.Root>
+      </GuiAvatar>
     );
   },
 );
@@ -119,18 +124,19 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackInternalP
   function AvatarFallback(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return (
-      <RadixAvatar.Fallback
-        ref={ ref }
+      <GuiAvatar.Fallback
+        ref={ ref as never }
+        unstyled
         className={ cn(
           'flex h-full w-full items-center justify-center font-medium',
           className,
         ) }
-        { ...rest }
+        { ...(rest as object) }
       >
         { children }
         { name != null && children == null && <>{ getInitials(name) }</> }
         { name == null && children == null && icon }
-      </RadixAvatar.Fallback>
+      </GuiAvatar.Fallback>
     );
   },
 );

package/src/checkbox.tsx

@@ -1,9 +1,11 @@
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-// chakra() HOC removed — pure Radix + Tailwind
+import { Checkbox as GuiCheckbox } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
 
+/** Tri-state, as the Chakra/Radix contract consumers already code against. */
+type CheckedState = boolean | 'indeterminate';
+
 const NOOP = () => { /* noop */ };
 
 // ─── CheckboxGroup context ───────────────────────────────────────────
@@ -98,7 +100,7 @@ export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<'labe
   rootRef?: React.Ref<HTMLLabelElement>;
   checked?: boolean | 'indeterminate';
   defaultChecked?: boolean;
-  onCheckedChange?: (checked: RadixCheckbox.CheckedState) => void;
+  onCheckedChange?: (checked: CheckedState) => void;
   onChange?: React.FormEventHandler<HTMLLabelElement>;
   disabled?: boolean;
   readOnly?: boolean;
@@ -189,12 +191,12 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const isInGroup = group !== null && value !== undefined;
     const groupChecked = isInGroup ? group.value.includes(value) : undefined;
 
-    const [ internalChecked, setInternalChecked ] = React.useState<RadixCheckbox.CheckedState>(
+    const [ internalChecked, setInternalChecked ] = React.useState<CheckedState>(
       defaultChecked ?? false,
     );
 
     const isControlled = checkedProp !== undefined || isInGroup;
-    let checkedState: RadixCheckbox.CheckedState;
+    let checkedState: CheckedState;
     if (checkedProp !== undefined) {
       checkedState = checkedProp;
     } else if (isInGroup) {
@@ -204,7 +206,7 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
     }
 
     const handleCheckedChange = React.useCallback(
-      (nextChecked: RadixCheckbox.CheckedState) => {
+      (nextChecked: CheckedState) => {
         if (readOnly) return;
 
         if (!isControlled) {
@@ -252,7 +254,10 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
         data-readonly={ readOnly || undefined }
         { ...rest }
       >
-        <RadixCheckbox.Root
+        { /* gui's Checkbox — role=checkbox + aria-checked from its headless core,
+             a real Pressable on native. Paint stays in the Lux classes. */ }
+        <GuiCheckbox
+          unstyled
           checked={ checkedState }
           onCheckedChange={ handleCheckedChange }
           disabled={ disabled || readOnly }
@@ -272,15 +277,15 @@ const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxProps>(
           ) }
         >
           { icon ?? (
-            <RadixCheckbox.Indicator className={ cn('flex items-center justify-center', sizeClasses.icon) }>
+            <GuiCheckbox.Indicator className={ cn('flex items-center justify-center', sizeClasses.icon) }>
               { checkedState === 'indeterminate' ? (
                 <IndeterminateIcon className={ sizeClasses.icon }/>
               ) : (
                 <CheckIcon className={ sizeClasses.icon }/>
               ) }
-            </RadixCheckbox.Indicator>
+            </GuiCheckbox.Indicator>
           ) }
-        </RadixCheckbox.Root>
+        </GuiCheckbox>
         { /* Hidden native input for form compatibility and ref forwarding */ }
         <input
           ref={ setHiddenInputRef }

package/src/chrome.tsx

@@ -0,0 +1,459 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Building2,
+  Check,
+  ChevronsUpDown,
+  Folder,
+  LogOut,
+  Menu,
+  Settings,
+  User,
+} from 'lucide-react';
+
+import { DrawerRoot, DrawerContent, DrawerHeader, DrawerBody, DrawerTitle } from './drawer';
+import { useIdentity, type IdentityStatus } from './identity';
+import { MenuRoot, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from './menu';
+import { useIsNarrow } from './use-narrow';
+import { cn } from './utils';
+
+// The application chrome: ONE user switcher, ONE org switcher, ONE project
+// switcher, ONE settings menu, ONE nav — for every Lux surface.
+//
+// Every one of them is the SAME mechanism (`Switcher`) given different values.
+// A switcher is a labelled trigger plus a list of rows; org / project / user /
+// settings differ only in where the rows come from. Four components that each
+// re-derived popover state, click-away, keyboard nav and a mobile presentation
+// is four chances to get it wrong, and the fleet took all four.
+//
+// Presentation is a phone sheet below 640px and an anchored menu above it —
+// both from the primitives this package already ships (`./drawer` is a gui
+// Sheet on a phone, `./menu` is an anchored dropdown), so there is no
+// hand-rolled drawer and the phone case drags and dismisses like a native one.
+//
+// Identity comes from `useIdentity()` (IAM), brand from the host. Nothing here
+// reads a per-app org table or a per-app branding map.
+
+/** One row in a switcher. */
+export interface ChromeItem {
+  readonly id: string;
+  readonly label: string;
+  /** Secondary text, right-aligned — a plan, a count, a shortcut. */
+  readonly hint?: string;
+  readonly icon?: React.ReactNode;
+  readonly selected?: boolean;
+  readonly danger?: boolean;
+  readonly href?: string;
+  readonly onSelect?: () => void;
+}
+
+/** 1–2 letter monogram — the honest fallback when there is no logo. */
+export function initials(label: string): string {
+  return label
+    .split(/[\s._-]+/)
+    .filter(Boolean)
+    .map((w) => w[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+const Monogram = ({ label, logo }: { label: string; logo?: string }) => (
+  logo ?
+    <img src={ logo } alt="" className="h-5 w-5 shrink-0 rounded object-contain"/> :
+    <span
+      aria-hidden="true"
+      className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-[rgba(127,127,127,0.22)] text-[10px] font-bold"
+    >
+      { initials(label) }
+    </span>
+);
+
+export interface SwitcherProps {
+  /** Panel heading, drawer title and the trigger's accessible name. */
+  readonly title: string;
+  /** Trigger label. */
+  readonly label: string;
+  /** Trigger icon — usually a logo or monogram. */
+  readonly icon?: React.ReactNode;
+  readonly items: ReadonlyArray<ChromeItem>;
+  /** Rows below a separator — create, settings, sign out. */
+  readonly footer?: ReadonlyArray<ChromeItem>;
+  /** Drives the honest empty states. Defaults to 'ready'. */
+  readonly status?: IdentityStatus;
+  /** Shown when signed in and the list really is empty. */
+  readonly empty?: string;
+  /** Shown, as a sign-in action, when nobody is signed in. */
+  readonly onSignIn?: () => void;
+  readonly signInLabel?: string;
+  readonly error?: string | null;
+  readonly align?: 'start' | 'end';
+  readonly testId?: string;
+}
+
+/**
+ * One row, in either presentation.
+ *
+ * `menu` is the only difference: inside an anchored menu the row must be a
+ * Radix `MenuItem` (that is what gives the panel roving focus and type-ahead),
+ * while inside the phone sheet there is no menu to belong to — putting one
+ * there throws "`MenuItem` must be used within `MenuContent`" and takes the
+ * whole page down. Same markup, same handlers, one parameter.
+ */
+const Row = ({ item, onDone, menu }: { item: ChromeItem; onDone: () => void; menu: boolean }) => {
+  const body = (
+    <>
+      { item.icon }
+      <span className="flex-1 truncate">{ item.label }</span>
+      { item.hint ? <span className="text-xs opacity-60">{ item.hint }</span> : null }
+      { item.selected ? <Check aria-hidden="true" className="h-4 w-4 shrink-0"/> : null }
+    </>
+  );
+  const className = cn(
+    'flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm',
+    'hover:bg-[rgba(127,127,127,0.14)]',
+    item.danger && 'text-[var(--color-text-error,#e5484d)]',
+  );
+  const activate = () => {
+    onDone();
+    item.onSelect?.();
+  };
+  const shared = {
+    'data-testid': `chrome-item-${ item.id }`,
+    'aria-current': item.selected ? ('true' as const) : undefined,
+    className,
+  };
+  const control = item.href ?
+    <a href={ item.href } { ...shared } onClick={ onDone }>{ body }</a> :
+    <button type="button" { ...shared } onClick={ activate }>{ body }</button>;
+
+  return menu ? <MenuItem value={ item.id } asChild>{ control }</MenuItem> : control;
+};
+
+/**
+ * The ONE switcher. A trigger plus rows, presented as a phone sheet or an
+ * anchored menu depending on the viewport — never both, never hand-rolled.
+ */
+export const Switcher = ({
+  title,
+  label,
+  icon,
+  items,
+  footer = [],
+  status = 'ready',
+  empty = 'Nothing here yet.',
+  onSignIn,
+  signInLabel = 'Sign in',
+  error,
+  align = 'start',
+  testId,
+}: SwitcherProps): React.ReactElement => {
+  const [ open, setOpen ] = React.useState(false);
+  const narrow = useIsNarrow();
+  const close = React.useCallback(() => setOpen(false), []);
+
+  // The four states a switcher can be in, said out loud. An anonymous visitor
+  // gets a sign-in row, NOT an empty list that reads as "an account with no
+  // organizations"; an IAM failure says so instead of claiming emptiness.
+  const message =
+    status === 'loading' ? 'Loading…' :
+      status === 'error' ? (error ?? 'Could not reach IAM.') :
+        status === 'anonymous' ? null :
+          items.length === 0 ? empty : null;
+
+  const rows: ReadonlyArray<ChromeItem> =
+    status === 'anonymous' && onSignIn ?
+      [ { id: 'sign-in', label: signInLabel, icon: <User aria-hidden="true" className="h-4 w-4"/>, onSelect: onSignIn } ] :
+      status === 'ready' ? items : [];
+
+  // ONE panel body, rendered by both presentations.
+  const panel = (menu: boolean) => (
+    <>
+      <div className="px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55">{ title }</div>
+      { message ?
+        <div data-testid="chrome-message" className="px-2 py-2 text-sm opacity-70">{ message }</div> :
+        null }
+      { rows.map((item) => <Row key={ item.id } item={ item } onDone={ close } menu={ menu }/>) }
+      { footer.length > 0 ?
+        <>
+          { menu ?
+            <MenuSeparator className="my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]"/> :
+            <div className="my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]"/> }
+          { footer.map((item) => <Row key={ item.id } item={ item } onDone={ close } menu={ menu }/>) }
+        </> :
+        null }
+    </>
+  );
+
+  const trigger = (
+    <button
+      type="button"
+      data-testid={ testId }
+      aria-label={ title }
+      aria-haspopup="menu"
+      aria-expanded={ open }
+      className={ cn(
+        'flex max-w-[14rem] items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium',
+        'hover:bg-[rgba(127,127,127,0.14)]',
+      ) }
+    >
+      { icon }
+      <span className="truncate">{ label }</span>
+      <ChevronsUpDown aria-hidden="true" className="h-3.5 w-3.5 shrink-0 opacity-60"/>
+    </button>
+  );
+
+  // Phone: the same rows in a gui Sheet — drag, momentum, snap-to-dismiss.
+  if (narrow) {
+    return (
+      <DrawerRoot open={ open } onOpenChange={ (d) => setOpen(d.open) } placement="bottom" size="md">
+        { React.cloneElement(trigger, { onClick: () => setOpen(true) }) }
+        <DrawerContent data-testid={ testId ? `${ testId }-panel` : undefined }>
+          <DrawerHeader><DrawerTitle>{ title }</DrawerTitle></DrawerHeader>
+          <DrawerBody>{ panel(false) }</DrawerBody>
+        </DrawerContent>
+      </DrawerRoot>
+    );
+  }
+
+  return (
+    <MenuRoot
+      open={ open }
+      onOpenChange={ (d) => setOpen(d.open) }
+      positioning={{ placement: align === 'end' ? 'bottom-end' : 'bottom-start' }}
+    >
+      <MenuTrigger asChild>{ trigger }</MenuTrigger>
+      <MenuContent minW="16rem" data-testid={ testId ? `${ testId }-panel` : undefined }>
+        { panel(true) }
+      </MenuContent>
+    </MenuRoot>
+  );
+};
+
+// --- The four switchers ----------------------------------------------------
+// Each is the mechanism above plus the values it switches over. That is the
+// whole implementation; there is nothing else to keep in sync.
+
+/** Which organization is this surface acting as. */
+export const OrgSwitcher = (): React.ReactElement => {
+  const id = useIdentity();
+  return (
+    <Switcher
+      testId="org-switcher"
+      title="Organization"
+      label={ id.org?.displayName || id.org?.name || id.whiteLabel.name }
+      icon={ <Monogram label={ id.org?.displayName || id.org?.name || id.whiteLabel.name } logo={ id.org?.logo }/> }
+      status={ id.status }
+      error={ id.error }
+      empty="No organizations for this account."
+      onSignIn={ id.signIn }
+      signInLabel={ `Sign in with ${ id.whiteLabel.iamDomain }` }
+      items={ id.orgs.map((o) => ({
+        id: o.name,
+        label: o.displayName || o.name,
+        icon: <Monogram label={ o.displayName || o.name } logo={ o.logo }/>,
+        selected: o.name === id.org?.name,
+        onSelect: () => id.setOrg(o.name),
+      })) }
+    />
+  );
+};
+
+/** Which project inside that organization. */
+export const ProjectSwitcher = (): React.ReactElement | null => {
+  const id = useIdentity();
+  // A surface whose org has no projects should not grow a dead control.
+  if (id.status === 'ready' && id.projects.length === 0) return null;
+  return (
+    <Switcher
+      testId="project-switcher"
+      title="Project"
+      label={ id.project?.displayName || id.project?.name || 'Project' }
+      icon={ <Folder aria-hidden="true" className="h-4 w-4 opacity-70"/> }
+      status={ id.status }
+      error={ id.error }
+      empty="No projects in this organization."
+      onSignIn={ id.signIn }
+      items={ id.projects.map((p) => ({
+        id: p.name,
+        label: p.displayName || p.name,
+        icon: <Folder aria-hidden="true" className="h-4 w-4 opacity-70"/>,
+        selected: p.name === id.project?.name,
+        onSelect: () => id.setProject(p.name),
+      })) }
+    />
+  );
+};
+
+export interface UserMenuProps {
+  /** Extra rows above Sign out — Profile, API keys, whatever the surface has. */
+  readonly items?: ReadonlyArray<ChromeItem>;
+}
+
+/** Who is signed in, and how to stop being signed in. */
+export const UserMenu = ({ items = [] }: UserMenuProps): React.ReactElement => {
+  const id = useIdentity();
+  const who = id.account?.displayName || id.account?.email || id.account?.name || 'Account';
+  return (
+    <Switcher
+      testId="user-menu"
+      align="end"
+      title={ id.status === 'ready' ? who : 'Account' }
+      label={ id.status === 'ready' ? who : 'Sign in' }
+      icon={ id.status === 'ready' ?
+        <Monogram label={ who } logo={ id.account?.avatar }/> :
+        <User aria-hidden="true" className="h-4 w-4 opacity-70"/> }
+      status={ id.status }
+      error={ id.error }
+      onSignIn={ id.signIn }
+      signInLabel={ `Sign in with ${ id.whiteLabel.iamDomain }` }
+      items={ [
+        { id: 'account', label: id.account?.email || who, icon: <User aria-hidden="true" className="h-4 w-4 opacity-70"/> },
+        ...items,
+      ] }
+      footer={ id.status === 'ready' ?
+        [ { id: 'sign-out', label: 'Sign out', danger: true, icon: <LogOut aria-hidden="true" className="h-4 w-4"/>, onSelect: id.signOut } ] :
+        [] }
+    />
+  );
+};
+
+export interface SettingsMenuProps {
+  /** The surface's own settings rows. */
+  readonly items?: ReadonlyArray<ChromeItem>;
+  /** Where "All settings" goes. */
+  readonly href?: string;
+}
+
+/** The surface's settings, in the one place a user looks for them. */
+export const SettingsMenu = ({ items = [], href = '/settings' }: SettingsMenuProps): React.ReactElement => (
+  <Switcher
+    testId="settings-menu"
+    align="end"
+    title="Settings"
+    label="Settings"
+    icon={ <Settings aria-hidden="true" className="h-4 w-4 opacity-70"/> }
+    items={ items }
+    empty="No settings on this surface."
+    footer={ [ { id: 'all-settings', label: 'All settings', href, icon: <Settings aria-hidden="true" className="h-4 w-4 opacity-70"/> } ] }
+  />
+);
+
+// --- The one nav -----------------------------------------------------------
+
+export interface NavLink {
+  readonly href: string;
+  readonly label: string;
+  readonly active?: boolean;
+}
+
+export interface AppNavProps {
+  /** Brand slot — defaults to the host-resolved org name. */
+  readonly brand?: React.ReactNode;
+  /** Where the brand links to. */
+  readonly home?: string;
+  readonly links?: ReadonlyArray<NavLink>;
+  /** Show the org switcher. Default true. */
+  readonly org?: boolean;
+  /** Show the project switcher. Default false — most surfaces have no projects. */
+  readonly project?: boolean;
+  /** Rows for the settings menu; omit the prop to hide the menu. */
+  readonly settings?: ReadonlyArray<ChromeItem>;
+  /** Extra rows in the user menu. */
+  readonly userItems?: ReadonlyArray<ChromeItem>;
+  /** Free slot between the links and the right-hand cluster. */
+  readonly children?: React.ReactNode;
+}
+
+/**
+ * The ONE nav. Brand, org, project, links, settings, user — in that order, at
+ * every surface. On a phone the links collapse into the same sheet the
+ * switchers use, so there is no second mobile menu to maintain.
+ */
+export const AppNav = ({
+  brand,
+  home = '/',
+  links = [],
+  org = true,
+  project = false,
+  settings,
+  userItems,
+  children,
+}: AppNavProps): React.ReactElement => {
+  const id = useIdentity();
+  const narrow = useIsNarrow();
+  const [ menu, setMenu ] = React.useState(false);
+
+  return (
+    <header
+      data-testid="app-nav"
+      className="sticky top-0 z-50 border-b border-[var(--color-border-divider,rgba(127,127,127,0.25))] bg-[var(--color-bg-body,inherit)]"
+    >
+      <div className="mx-auto flex h-14 max-w-7xl items-center gap-2 px-4">
+        { narrow && links.length > 0 ? (
+          <DrawerRoot open={ menu } onOpenChange={ (d) => setMenu(d.open) } placement="bottom" size="md">
+            <button
+              type="button"
+              aria-label="Menu"
+              data-testid="nav-menu"
+              className="rounded-md p-2 hover:bg-[rgba(127,127,127,0.14)]"
+              onClick={ () => setMenu(true) }
+            >
+              <Menu aria-hidden="true" className="h-5 w-5"/>
+            </button>
+            <DrawerContent data-testid="nav-menu-panel">
+              <DrawerHeader><DrawerTitle>Menu</DrawerTitle></DrawerHeader>
+              <DrawerBody>
+                { links.map((l) => (
+                  <a
+                    key={ l.href }
+                    href={ l.href }
+                    onClick={ () => setMenu(false) }
+                    aria-current={ l.active ? 'page' : undefined }
+                    className="block rounded-md px-2 py-2.5 text-sm hover:bg-[rgba(127,127,127,0.14)]"
+                  >
+                    { l.label }
+                  </a>
+                )) }
+              </DrawerBody>
+            </DrawerContent>
+          </DrawerRoot>
+        ) : null }
+
+        <a href={ home } className="flex items-center gap-2 font-semibold tracking-tight">
+          { brand ?? <><Building2 aria-hidden="true" className="h-4 w-4 opacity-70"/>{ id.whiteLabel.name }</> }
+        </a>
+
+        { org ? <OrgSwitcher/> : null }
+        { project ? <ProjectSwitcher/> : null }
+
+        { !narrow && links.length > 0 ? (
+          <nav className="flex items-center gap-1">
+            { links.map((l) => (
+              <a
+                key={ l.href }
+                href={ l.href }
+                aria-current={ l.active ? 'page' : undefined }
+                className={ cn(
+                  'rounded-md px-3 py-1.5 text-sm font-medium',
+                  l.active ?
+                    'bg-[rgba(127,127,127,0.14)]' :
+                    'opacity-75 hover:opacity-100',
+                ) }
+              >
+                { l.label }
+              </a>
+            )) }
+          </nav>
+        ) : null }
+
+        <div className="flex flex-1 items-center justify-end gap-1">
+          { children }
+          { settings ? <SettingsMenu items={ settings }/> : null }
+          <UserMenu items={ userItems }/>
+        </div>
+      </div>
+    </header>
+  );
+};