@startsimpli/ui 0.4.84 → 0.4.86

package/src/components/navigation/entity-switcher.tsx

@@ -0,0 +1,293 @@
+'use client'
+
+/**
+ * EntitySwitcher — a searchable "which record am I scoped to?" control
+ * (startsim-768w.21.1).
+ *
+ * Deliberately entity-agnostic: it takes `{ id, label, sublabel?, badge? }`
+ * items and hands back an id. It knows nothing about companies, foundries,
+ * projects or workspaces, so the same control serves all of them — the caller
+ * maps its domain objects into `EntitySwitcherItem[]`.
+ *
+ * Built on the existing Radix popover + Input primitives; no new dependency.
+ *
+ * Its first consumer is the dark `bg-gray-900` sidebar rail, so the defaults
+ * are translucent-over-dark and inherit the surrounding text colour rather
+ * than hard-coding a light-only look. Anything that doesn't suit a given
+ * surface is overridable via `triggerClassName` / `contentClassName`.
+ *
+ * a11y follows the WAI-ARIA combobox + listbox pattern:
+ *   - trigger is `role="combobox"` with `aria-expanded` / `aria-controls`
+ *   - the list is `role="listbox"`, rows are `role="option"`
+ *   - `aria-selected` marks the *current* entity (what the app is scoped to)
+ *   - `aria-activedescendant` (+ `data-highlighted`) tracks the *keyboard*
+ *     highlight, which moves with ArrowUp/ArrowDown independently of selection
+ */
+
+import * as React from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Input } from '../ui/input'
+
+export interface EntitySwitcherItem {
+  /** Stable identifier handed back to `onSelect`. */
+  id: string
+  /** Primary display text — also the first thing the filter matches on. */
+  label: string
+  /** Secondary line (slug, org, subtitle). Filtered on as well. */
+  sublabel?: string
+  /** Optional trailing adornment (status pill, count, icon). */
+  badge?: React.ReactNode
+}
+
+export interface EntitySwitcherProps {
+  /** Everything the user can switch to. */
+  items: EntitySwitcherItem[]
+  /** The id currently in scope; drives the trigger label + `aria-selected`. */
+  currentId?: string | null
+  /** Fired with the chosen item's id. Fires even when it re-picks `currentId`. */
+  onSelect: (id: string) => void
+  /** Filter input placeholder. */
+  placeholder?: string
+  /** Accessible name for the filter input. */
+  searchLabel?: string
+  /** Shown instead of the list when the filter matches nothing. */
+  emptyLabel?: string
+  /** Trigger text when `currentId` matches no item (or there is none yet). */
+  triggerPlaceholder?: string
+  /** Set false to drop the filter input (short lists). */
+  searchable?: boolean
+  /** Override the trigger chrome — e.g. to sit on a light surface. */
+  triggerClassName?: string
+  /** Override the popover panel chrome (width, padding, colours). */
+  contentClassName?: string
+  /** Disable the whole control. */
+  disabled?: boolean
+}
+
+function optionDomId(baseId: string, itemId: string) {
+  return `${baseId}-opt-${String(itemId).replace(/[^A-Za-z0-9_-]/g, '_')}`
+}
+
+export function EntitySwitcher({
+  items,
+  currentId,
+  onSelect,
+  placeholder = 'Search…',
+  searchLabel = 'Search',
+  emptyLabel = 'No matches',
+  triggerPlaceholder = 'Select…',
+  searchable = true,
+  triggerClassName,
+  contentClassName,
+  disabled,
+}: EntitySwitcherProps) {
+  const baseId = React.useId()
+  const listboxId = `${baseId}-listbox`
+  const inputId = `${baseId}-filter`
+
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const [highlight, setHighlight] = React.useState(0)
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const listRef = React.useRef<HTMLUListElement>(null)
+
+  const current = items.find((i) => i.id === currentId)
+
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return items
+    return items.filter(
+      (i) =>
+        i.label.toLowerCase().includes(q) ||
+        (i.sublabel ? i.sublabel.toLowerCase().includes(q) : false)
+    )
+  }, [items, query])
+
+  // Keep the highlight inside the (possibly just-filtered) list.
+  React.useEffect(() => {
+    setHighlight((h) => (filtered.length === 0 ? 0 : Math.min(h, filtered.length - 1)))
+  }, [filtered.length])
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (next) {
+      setQuery('')
+      // Open on whatever is currently in scope, so Enter is a no-op re-pick
+      // rather than a surprise jump to the first row.
+      const idx = items.findIndex((i) => i.id === currentId)
+      setHighlight(idx >= 0 ? idx : 0)
+    }
+  }
+
+  const choose = (id: string) => {
+    onSelect(id)
+    setOpen(false)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      if (filtered.length === 0) return
+      setHighlight((h) => (h + 1) % filtered.length)
+      return
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (filtered.length === 0) return
+      setHighlight((h) => (h - 1 + filtered.length) % filtered.length)
+      return
+    }
+    if (event.key === 'Home') {
+      event.preventDefault()
+      setHighlight(0)
+      return
+    }
+    if (event.key === 'End') {
+      event.preventDefault()
+      setHighlight(Math.max(filtered.length - 1, 0))
+      return
+    }
+    if (event.key === 'Enter') {
+      const item = filtered[highlight]
+      if (!item) return
+      event.preventDefault()
+      choose(item.id)
+    }
+    // Escape is left to the popover's dismiss layer, which also restores
+    // focus to the trigger.
+  }
+
+  const activeItem = filtered[highlight]
+  const activeDescendant = activeItem ? optionDomId(baseId, activeItem.id) : undefined
+
+  // Keep the highlighted row in view on long lists.
+  React.useEffect(() => {
+    if (!open || !activeDescendant) return
+    const el = listRef.current?.querySelector<HTMLElement>(`#${CSS.escape(activeDescendant)}`)
+    el?.scrollIntoView?.({ block: 'nearest' })
+  }, [open, activeDescendant])
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listboxId}
+          aria-haspopup="listbox"
+          disabled={disabled}
+          className={cn(
+            'flex w-full items-center justify-between gap-2 rounded-md border border-white/15 bg-white/5 px-3 py-2',
+            'text-left text-sm font-medium text-inherit transition-colors',
+            'hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            triggerClassName
+          )}
+        >
+          <span className="min-w-0 flex-1 truncate">{current ? current.label : triggerPlaceholder}</span>
+          <ChevronsUpDown className="h-4 w-4 flex-shrink-0 opacity-60" aria-hidden="true" />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="start"
+        className={cn('w-64 p-0', contentClassName)}
+        onOpenAutoFocus={(event) => {
+          // Focus the filter (or the list) rather than the panel itself, so the
+          // very first ArrowDown moves the highlight.
+          event.preventDefault()
+          if (searchable) inputRef.current?.focus()
+          else listRef.current?.focus()
+        }}
+        onKeyDown={handleKeyDown}
+      >
+        {searchable && (
+          <div className="border-b p-2">
+            <label className="sr-only" htmlFor={inputId}>
+              {searchLabel}
+            </label>
+            <Input
+              id={inputId}
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={placeholder}
+              autoComplete="off"
+              aria-autocomplete="list"
+              aria-controls={listboxId}
+              aria-activedescendant={activeDescendant}
+              className="h-8"
+            />
+          </div>
+        )}
+
+        <ul
+          ref={listRef}
+          id={listboxId}
+          role="listbox"
+          tabIndex={searchable ? -1 : 0}
+          aria-label={searchLabel}
+          aria-activedescendant={searchable ? undefined : activeDescendant}
+          className="max-h-64 overflow-y-auto p-1 outline-none"
+        >
+          {filtered.map((item, index) => {
+            const isCurrent = item.id === currentId
+            const isHighlighted = index === highlight
+            return (
+              <li
+                key={item.id}
+                id={optionDomId(baseId, item.id)}
+                role="option"
+                aria-selected={isCurrent}
+                data-highlighted={isHighlighted}
+                onClick={() => choose(item.id)}
+                onMouseEnter={() => setHighlight(index)}
+                className={cn(
+                  'flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm',
+                  isHighlighted && 'bg-accent text-accent-foreground'
+                )}
+              >
+                <Check
+                  className={cn('h-4 w-4 flex-shrink-0', isCurrent ? 'opacity-100' : 'opacity-0')}
+                  aria-hidden="true"
+                />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{item.label}</span>
+                  {item.sublabel && (
+                    <span
+                      className={cn(
+                        'block truncate text-xs',
+                        // The sublabel has to follow the row's foreground, not
+                        // the panel's. `text-muted-foreground` is picked to sit
+                        // on `bg-popover`; left alone it stays that grey when
+                        // the row flips to `bg-accent`, and on a saturated
+                        // accent that lands at ~1.1:1 — browser-verified as
+                        // washed out to the point of unreadable
+                        // (startsim-768w.21.1.3). Dimming the accent foreground
+                        // instead keeps the primary/secondary hierarchy while
+                        // staying legible on whatever accent the theme sets.
+                        isHighlighted ? 'text-accent-foreground/80' : 'text-muted-foreground'
+                      )}
+                    >
+                      {item.sublabel}
+                    </span>
+                  )}
+                </span>
+                {item.badge ? <span className="flex-shrink-0">{item.badge}</span> : null}
+              </li>
+            )
+          })}
+        </ul>
+
+        {filtered.length === 0 && (
+          <div className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyLabel}</div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/navigation/index.ts

@@ -0,0 +1,6 @@
+// Navigation chrome: the app rail, the shell that assembles it, grouped nav
+// sections and the generic entity switcher that scopes the rail.
+export * from './sidebar'
+export * from './app-shell'
+export * from './grouped-nav'
+export * from './entity-switcher'

package/src/components/navigation/sidebar.tsx

@@ -27,6 +27,13 @@ export interface SidebarProps {
    * Navigation sections
    */
   sections: SidebarSection[];
+  /**
+   * Contextual switcher rendered directly under the logo, above the nav —
+   * "which record is this rail scoped to?" (e.g. an <EntitySwitcher> over the
+   * user's foundries). Hidden while collapsed: a 5rem rail can only show a
+   * truncated combobox, which is noise rather than navigation.
+   */
+  switcher?: ReactNode;
   /**
    * User dropdown content (rendered at bottom of sidebar)
    */
@@ -56,6 +63,7 @@ export interface SidebarProps {
 export function Sidebar({
   appName,
   sections,
+  switcher,
   userDropdown,
   className,
   collapsible = true,
@@ -63,7 +71,10 @@ export function Sidebar({
   collapsed: controlledCollapsed,
   onCollapsedChange,
 }: SidebarProps) {
-  const pathname = usePathname();
+  // usePathname() is null outside an app-router provider (harnesses, tests,
+  // a pages-router host). Shared chrome renders there too, so treat it as
+  // "no current page" rather than throwing on `null.startsWith`.
+  const pathname = usePathname() ?? '';
   const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const setCollapsed = (next: boolean) => {
@@ -71,12 +82,19 @@ export function Sidebar({
     onCollapsedChange?.(next);
   };
 
-  const isActivePath = (href: string) => {
-    if (href === '/') {
-      return pathname === '/';
-    }
-    return pathname.startsWith(href);
-  };
+  /**
+   * "You are here", by path SEGMENT rather than by string prefix.
+   *
+   * A prefix test lights up peers that merely share a stem —
+   * `/foundry/x/builds`.startsWith(`/foundry/x/build`) — and once a control
+   * plane puts its whole section list in the rail (startsim-768w.21.3) that
+   * pair is real: Build with AI and Builds sat next to each other, both lit.
+   * Requiring the next character to be a boundary keeps parent links current on
+   * their own sub-pages (`/leads` on `/leads/42`) without the collision. `/` is
+   * exact by the same rule, since nothing else starts with `//`.
+   */
+  const isActivePath = (href: string) =>
+    pathname === href || pathname.startsWith(`${href}/`);
 
   return (
     <div
@@ -99,12 +117,26 @@ export function Sidebar({
         </Link>
       </div>
 
+      {/* Contextual switcher (scope of this rail) */}
+      {switcher && !collapsed && (
+        <div className="px-4 pt-4">{switcher}</div>
+      )}
+
       {/* Navigation */}
       <nav className="flex-1 overflow-y-auto p-4 space-y-6">
         {sections.map((section, idx) => (
-          <div key={idx}>
+          // A named group, not an anonymous div: a titled section is a distinct
+          // scope ("the sections of THIS foundry"), and the name has to survive
+          // the collapsed rail hiding the heading — hence aria-label rather than
+          // aria-labelledby (startsim-768w.21.3).
+          <div key={idx} role="group" aria-label={section.title}>
             {section.title && !collapsed && (
-              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-3">
+              // A group title can be a user-supplied record name (a foundry's
+              // branding), so it truncates instead of wrapping the rail open.
+              <h3
+                className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-3 truncate"
+                title={section.title}
+              >
                 {section.title}
               </h3>
             )}
@@ -115,6 +147,9 @@ export function Sidebar({
                   <Link
                     key={link.href}
                     href={link.href}
+                    // Colour is not an accessible name — say "you are here".
+                    aria-current={isActive ? 'page' : undefined}
+                    title={collapsed ? link.label : undefined}
                     className={cn(
                       'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                       isActive
@@ -128,7 +163,7 @@ export function Sidebar({
                         {link.icon}
                       </span>
                     ) : null}
-                    {!collapsed && <span>{link.label}</span>}
+                    {!collapsed && <span className="min-w-0 truncate">{link.label}</span>}
                   </Link>
                 );
               })}

package/src/components/team/MembersSection.tsx

@@ -18,7 +18,7 @@
 import * as React from 'react'
 import { MembersTable } from './MembersTable'
 import { InviteMemberDialog } from './InviteMemberDialog'
-import type { InvitationLite, MemberRow, TeamRole } from './types'
+import type { InvitationLite, MemberRow, MemberSource, TeamRole } from './types'
 import {
   MEMBERS_SECTION_DEFAULTS,
   type MembersSectionClassNames,
@@ -62,9 +62,43 @@ export interface MembersSectionProps {
   inviteSuccessMessage?: (email: string) => string
   emptyState?: React.ReactNode
   helpText?: React.ReactNode
+  /**
+   * Narrow the list to ONE population (startsim-768w.20.4): the people who were
+   * invited, the people who signed themselves up, or the rows the platform
+   * seeded.
+   *
+   * A CONTROLLED prop, not internal state, and the composer never filters
+   * `members` itself. That is deliberate: the list is paginated server-side
+   * (repo rule 8), so a browser dropping rows from the page it happens to hold
+   * would shrink pages and lose people off the end. The host answers the change
+   * by re-querying.
+   */
+  sourceFilter?: MemberSourceFilter
   classNames?: MembersSectionClassNames
 }
 
+/** `all` is the absence of a filter, not a fourth population. */
+export type MemberSourceFilterValue = MemberSource | 'all'
+
+export interface MemberSourceFilter {
+  value: MemberSourceFilterValue
+  onChange: (value: MemberSourceFilterValue) => void
+  /** Override the offered options (default: everyone + the three origins). */
+  options?: MemberSourceFilterValue[]
+  label?: string
+}
+
+const SOURCE_FILTER_OPTIONS: MemberSourceFilterValue[] = [
+  'all', 'invited', 'self_signup', 'seed',
+]
+
+const SOURCE_FILTER_LABEL: Record<MemberSourceFilterValue, string> = {
+  all: 'Everyone',
+  invited: 'Invited',
+  self_signup: 'Signed up',
+  seed: 'Provisioned',
+}
+
 const defaultDescription = (count: number) =>
   `${count} ${count === 1 ? 'person has' : 'people have'} access.`
 
@@ -94,9 +128,11 @@ export function MembersSection({
   inviteSuccessMessage = (email) => `Invite sent to ${email} — they'll set a password and join`,
   emptyState,
   helpText,
+  sourceFilter,
   classNames,
 }: MembersSectionProps) {
   const cls = { ...MEMBERS_SECTION_DEFAULTS, ...(classNames ?? {}) }
+  const sourceOptions = sourceFilter?.options ?? SOURCE_FILTER_OPTIONS
 
   return (
     <div className={cls.root}>
@@ -125,6 +161,25 @@ export function MembersSection({
         </div>
       )}
       <div className={cls.body}>
+        {sourceFilter && (
+          <div className={cls.filterBar}>
+            <label htmlFor="members-source-filter" className={cls.filterLabel}>
+              {sourceFilter.label ?? 'How they joined'}
+            </label>
+            <select
+              id="members-source-filter"
+              className={cls.filterSelect}
+              value={sourceFilter.value}
+              onChange={(e) =>
+                sourceFilter.onChange(e.target.value as MemberSourceFilterValue)
+              }
+            >
+              {sourceOptions.map((o) => (
+                <option key={o} value={o}>{SOURCE_FILTER_LABEL[o]}</option>
+              ))}
+            </select>
+          </div>
+        )}
         <MembersTable
           members={members}
           canManage={canManage}

package/src/components/team/MembersTable.tsx

@@ -25,6 +25,7 @@ import {
   userDisplayName,
   userInitials,
   type MemberRow,
+  type MemberSource,
   type TeamRole,
 } from './types'
 import {
@@ -68,6 +69,12 @@ export interface MembersTableProps {
    */
   showStatus?: boolean
   showLastActive?: boolean
+  /**
+   * Force the "how they joined" column on/off (startsim-768w.20.4). Default:
+   * shown when any row carries `source`, so a backend that doesn't record
+   * provenance renders exactly as before.
+   */
+  showSource?: boolean
   classNames?: MembersTableClassNames
   /** Restrict role-selector options (e.g. hide 'owner' when caller isn't owner). */
   availableRoles?: TeamRole[]
@@ -102,6 +109,22 @@ function rowStatus(m: MemberRow): RowStatus | null {
   return m.inviteStatus ?? null
 }
 
+/**
+ * How they got here, in words a person reads (startsim-768w.20.4). "self_signup"
+ * is a wire value; "Signed up" is what the column says.
+ */
+const SOURCE_LABEL: Record<MemberSource, string> = {
+  invited: 'Invited',
+  self_signup: 'Signed up',
+  seed: 'Provisioned',
+}
+
+const SOURCE_TITLE: Record<MemberSource, string> = {
+  invited: 'Someone on this team added them by email',
+  self_signup: 'They created their own account through the app',
+  seed: 'Created by the platform when this workspace was set up',
+}
+
 /** Short absolute date. Absolute, not "3 days ago": an owner deciding whether to
  *  resend an invite wants the actual day. */
 function formatDate(iso: string): string {
@@ -132,6 +155,7 @@ export function MembersTable({
   emptyState,
   showStatus,
   showLastActive,
+  showSource,
   classNames,
   availableRoles,
   currentUserId,
@@ -139,13 +163,21 @@ export function MembersTable({
   const cls = { ...MEMBERS_TABLE_DEFAULTS, ...(classNames ?? {}) }
   const withStatus = showStatus ?? members.some((m) => rowStatus(m) !== null)
   const withLastActive = showLastActive ?? members.some((m) => m.lastLoginAt !== undefined)
+  const withSource = showSource ?? members.some((m) => m.source !== undefined)
   const statusClass: Record<RowStatus, string> = {
     active: cls.statusActive,
     pending: cls.statusPending,
     expired: cls.statusExpired,
     deactivated: cls.statusDeactivated,
   }
-  const columnCount = 2 + (withStatus ? 1 : 0) + (withLastActive ? 1 : 0) + (canManage ? 1 : 0)
+  const sourceClass: Record<MemberSource, string> = {
+    invited: cls.sourceInvited,
+    self_signup: cls.sourceSelfSignup,
+    seed: cls.sourceSeed,
+  }
+  const columnCount =
+    2 + (withStatus ? 1 : 0) + (withLastActive ? 1 : 0) + (withSource ? 1 : 0)
+    + (canManage ? 1 : 0)
   // Role + actions hug their content so the Member column takes the slack —
   // one shared cell class used to split the table down the middle and leave
   // the controls floating in a gap.
@@ -160,6 +192,9 @@ export function MembersTable({
             {withStatus && (
               <th className={tight(cls.th, cls.tightColumn)} scope="col">Status</th>
             )}
+            {withSource && (
+              <th className={tight(cls.th, cls.tightColumn)} scope="col">How they joined</th>
+            )}
             {withLastActive && (
               <th className={tight(cls.th, cls.tightColumn)} scope="col">Last active</th>
             )}
@@ -246,6 +281,19 @@ export function MembersTable({
                   )}
                 </td>
               )}
+              {withSource && (
+                <td className={tight(cls.cell, cls.tightColumn)}>
+                  {m.source && (
+                    <span
+                      className={tight(cls.sourceBadge, sourceClass[m.source])}
+                      data-member-source={m.source}
+                      title={SOURCE_TITLE[m.source]}
+                    >
+                      {SOURCE_LABEL[m.source]}
+                    </span>
+                  )}
+                </td>
+              )}
               {withLastActive && (
                 <td className={tight(cls.cell, cls.tightColumn)}>
                   {m.lastLoginAt ? (