@luxfi/ui 7.4.0 → 7.4.3

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>
+  );
+};

package/src/drawer.tsx

@@ -1,10 +1,19 @@
+import { Sheet as GuiSheet } from '@hanzo/gui';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React from 'react';
 
+import { useIsNarrow } from './use-narrow';
 import { cn } from './utils';
 
 import { CloseButton } from './close-button';
 
+// A drawer is a side panel on a wide screen and a bottom sheet on a phone. Below
+// `NARROW_PX` the content is presented by gui's Sheet — draggable, with
+// snap-to-dismiss and momentum — which is what a native app does and what a
+// `position: fixed` panel with a slide-in keyframe cannot fake. Same components,
+// same props, at every call site. The breakpoint itself lives in ./use-narrow,
+// so "is this phone-sized?" has one answer across the package.
+
 // ─── DrawerRoot ─────────────────────────────────────────────────
 
 export interface DrawerRootProps {
@@ -23,6 +32,18 @@ export interface DrawerRootProps {
 const DrawerPlacementContext = React.createContext<string>('right');
 const DrawerSizeContext = React.createContext<string>('md');
 
+interface DrawerStateValue {
+  readonly open: boolean;
+  readonly setOpen: (next: boolean) => void;
+  readonly modal: boolean;
+}
+
+const DrawerStateContext = React.createContext<DrawerStateValue>({
+  open: false,
+  setOpen: () => { /* noop */ },
+  modal: true,
+});
+
 export const DrawerRoot = (props: DrawerRootProps) => {
   const {
     children,
@@ -34,21 +55,35 @@ export const DrawerRoot = (props: DrawerRootProps) => {
     size = 'md',
   } = props;
 
-  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+  // The root owns the open state (controllable) rather than leaving it inside
+  // Radix, because the phone presentation is a gui Sheet that lives outside the
+  // dialog tree and needs the same state.
+  const [ uncontrolled, setUncontrolled ] = React.useState(defaultOpen ?? false);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : uncontrolled;
+
+  const setOpen = React.useCallback((nextOpen: boolean) => {
+    if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
-  }, [ onOpenChange ]);
+  }, [ isControlled, onOpenChange ]);
+
+  const state = React.useMemo(
+    () => ({ open: isOpen, setOpen, modal }),
+    [ isOpen, setOpen, modal ],
+  );
 
   return (
     <DrawerPlacementContext.Provider value={ placement }>
       <DrawerSizeContext.Provider value={ size }>
-        <RadixDialog.Root
-          open={ open }
-          defaultOpen={ defaultOpen }
-          onOpenChange={ handleOpenChange }
-          modal={ modal }
-        >
-          { children }
-        </RadixDialog.Root>
+        <DrawerStateContext.Provider value={ state }>
+          <RadixDialog.Root
+            open={ isOpen }
+            onOpenChange={ setOpen }
+            modal={ modal }
+          >
+            { children }
+          </RadixDialog.Root>
+        </DrawerStateContext.Provider>
       </DrawerSizeContext.Provider>
     </DrawerPlacementContext.Provider>
   );
@@ -98,6 +133,44 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
     const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
     const placement = React.useContext(DrawerPlacementContext);
     const size = React.useContext(DrawerSizeContext);
+    const { open, setOpen, modal } = React.useContext(DrawerStateContext);
+    const isNarrow = useIsNarrow();
+
+    if (isNarrow) {
+      return (
+        <GuiSheet
+          open={ open }
+          onOpenChange={ setOpen }
+          modal={ modal }
+          dismissOnSnapToBottom
+          snapPointsMode="percent"
+          snapPoints={ [ 88 ] }
+          transition="medium"
+        >
+          { backdrop && (
+            <GuiSheet.Overlay
+              transition="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+              className="bg-black/50"
+            />
+          ) }
+          <GuiSheet.Handle/>
+          { /* Sheet.Frame is a gui component, not a DOM node — the DOM ref the
+               Chakra contract hands us has nothing to attach to here. */ }
+          <GuiSheet.Frame
+            unstyled
+            className={ cn(
+              'flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]',
+              className,
+            ) }
+            { ...(rest as object) }
+          >
+            { children }
+          </GuiSheet.Frame>
+        </GuiSheet>
+      );
+    }
 
     const content = (
       <>