@kelpie/ui 0.1.0

package/src/components/Shell.tsx

@@ -0,0 +1,300 @@
+import { useEffect, useRef, useState } from 'react'
+import { NavLink, Outlet, useLocation, useNavigate } from 'react-router'
+
+import { useAccount, useTheme } from '../api/resources/account.ts'
+import { useModuleSettings } from '../api/resources/moduleSettings.ts'
+import { useLogOut } from '../api/resources/session.ts'
+import { initialsOf } from '../lib/names.ts'
+import type { ThemePreference } from '../lib/theme.ts'
+import { useNavItems } from '../registry/context.ts'
+import type { NavItem } from '../registry/contributions.ts'
+import { inSlotOrder } from '../registry/registry.ts'
+import { ErrorBoundary } from './ErrorBoundary.tsx'
+
+/**
+ * Sidebar, header, and the outlet every page renders into.
+ *
+ * Core numbers its nav items in hundreds so a module can land between two of
+ * them without core renumbering, which is the contract `contributions.ts`
+ * documents; a core entry added later slots at an intermediate value for the
+ * same reason. The list is short because it holds what is ported: the mockup's
+ * other entries arrive with the features behind them.
+ */
+const CORE_ADMIN_NAV: readonly NavItem[] = [
+  { id: 'workspace', label: 'Workspace', to: '/admin/workspace', order: 100 },
+  { id: 'team', label: 'Team', to: '/admin/team', order: 200 },
+  { id: 'data', label: 'Data', to: '/admin/data', order: 300 },
+  { id: 'webhooks', label: 'Webhooks', to: '/admin/webhooks', order: 400 },
+  { id: 'mcp', label: 'MCP', to: '/admin/mcp', order: 500 },
+  { id: 'modules', label: 'Modules', to: '/admin/modules', order: 600 },
+]
+
+const CORE_NAV: readonly NavItem[] = [
+  { id: 'dashboard', label: 'Dashboard', to: '/dashboard', order: 50 },
+  { id: 'people', label: 'People', to: '/people', order: 100 },
+  { id: 'hiring', label: 'Hiring', to: '/hiring', order: 150 },
+  { id: 'companies', label: 'Companies', to: '/companies', order: 200 },
+  { id: 'deals', label: 'Deals', to: '/deals', order: 300 },
+  { id: 'opportunities', label: 'Opportunities', to: '/opportunities', order: 350 },
+  { id: 'fundraising', label: 'Fundraising', to: '/fundraising', order: 360 },
+  { id: 'partnerships', label: 'Partnerships', to: '/partnerships', order: 375 },
+  { id: 'forms', label: 'Forms', to: '/forms', order: 380 },
+  { id: 'handbook', label: 'Handbook', to: '/handbook', order: 390 },
+  { id: 'planning', label: 'Planning', to: '/planning', order: 400 },
+  { id: 'decisions', label: 'Decisions', to: '/decisions', order: 500 },
+]
+
+/**
+ * `nav.primary` is one flat slot (`modules.md`); the mockup renders it as two
+ * visual groups, an unheaded top section and a headed "CRM" section. This is
+ * presentation only, so it stays here rather than becoming a second slot.
+ */
+const TOP_LEVEL_NAV_IDS: ReadonlySet<string> = new Set(['dashboard', 'handbook', 'planning', 'decisions'])
+
+/**
+ * A nav item whose id does not match its module id. Everything else looks
+ * itself up directly, which is what keeps a toggleable module's own nav entry
+ * working with no change here when one is added later.
+ */
+const NAV_ID_TO_MODULE_ID: Readonly<Record<string, string>> = {
+  fundraising: 'raises',
+  data: 'import-export',
+}
+
+function linkClass({ isActive }: { isActive: boolean }): string {
+  return [
+    'block rounded-md px-2 py-1 text-[13px] transition-colors duration-100',
+    isActive
+      ? 'bg-sidebar-active font-medium text-sidebar-ink'
+      : 'text-sidebar-muted hover:bg-sidebar-hover hover:text-sidebar-ink',
+  ].join(' ')
+}
+
+const THEME_CYCLE: Readonly<Record<ThemePreference, ThemePreference>> = {
+  system: 'light',
+  light: 'dark',
+  dark: 'system',
+}
+
+const THEME_LABELS: Readonly<Record<ThemePreference, string>> = {
+  system: 'System',
+  light: 'Light',
+  dark: 'Dark',
+}
+
+export function Shell(): React.JSX.Element {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { account } = useAccount()
+  const logOut = useLogOut()
+  const moduleNav = useNavItems('primary')
+  const moduleAdminNav = useNavItems('admin')
+  const { settings } = useModuleSettings()
+  const disabledModuleIds = new Set(
+    settings.filter((setting) => !setting.enabled).map((setting) => setting.moduleId),
+  )
+  const isModuleHidden = (navId: string): boolean =>
+    disabledModuleIds.has(NAV_ID_TO_MODULE_ID[navId] ?? navId)
+  const [menuOpen, setMenuOpen] = useState(false)
+  // The same preference the account page writes, so this button and that page
+  // cannot disagree about which theme the account is on.
+  const { theme, setTheme } = useTheme()
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [query, setQuery] = useState('')
+
+  useEffect(() => {
+    if (!menuOpen) {
+      return
+    }
+
+    function onPointerDown(event: MouseEvent): void {
+      if (menuRef.current?.contains(event.target as Node) !== true) {
+        setMenuOpen(false)
+      }
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+      if (event.key === 'Escape') {
+        setMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [menuOpen])
+
+  const navItems = inSlotOrder([...CORE_NAV, ...moduleNav]).filter((item) => !isModuleHidden(item.id))
+  const topLevelItems = navItems.filter((item) => TOP_LEVEL_NAV_IDS.has(item.id))
+  const crmItems = navItems.filter((item) => !TOP_LEVEL_NAV_IDS.has(item.id))
+  const adminItems = inSlotOrder([...CORE_ADMIN_NAV, ...moduleAdminNav]).filter(
+    (item) => !isModuleHidden(item.id),
+  )
+
+  return (
+    <div className="flex min-h-screen bg-surface">
+      <aside className="flex w-[200px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar">
+        <div className="px-3 py-4">
+          <NavLink to="/dashboard" className="group block px-2">
+            <div className="text-[15px] font-semibold tracking-tight text-sidebar-ink transition-opacity group-hover:opacity-80">
+              Kelpie
+            </div>
+          </NavLink>
+        </div>
+
+        <nav className="flex flex-1 flex-col gap-5 overflow-y-auto px-2 pb-4">
+          <div className="flex flex-col gap-0.5">
+            {topLevelItems.map((item) => (
+              <NavLink key={item.id} to={item.to} className={linkClass}>
+                {item.label}
+              </NavLink>
+            ))}
+          </div>
+
+          <div>
+            <div className="mb-1 px-2 text-[11px] text-sidebar-muted">CRM</div>
+            <div className="flex flex-col gap-0.5">
+              {crmItems.map((item) => (
+                <NavLink key={item.id} to={item.to} className={linkClass}>
+                  {item.label}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+
+          {/*
+            Shown to every member. Both pages read for anyone in the workspace
+            and only their controls are admin-gated, so hiding the section would
+            keep a member from seeing who else is on their team.
+          */}
+          <div>
+            <div className="mb-1 px-2 text-[11px] text-sidebar-muted">Admin</div>
+            <div className="flex flex-col gap-0.5">
+              {adminItems.map((item) => (
+                <NavLink key={item.id} to={item.to} className={linkClass}>
+                  {item.label}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+        </nav>
+      </aside>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="flex h-11 items-center gap-3 border-b border-border px-5">
+          <form
+            className="flex-1"
+            onSubmit={(event) => {
+              event.preventDefault()
+              const term = query.trim()
+
+              if (term.length === 0) {
+                return
+              }
+
+              void navigate(`/search?q=${encodeURIComponent(term)}`)
+            }}
+          >
+            <input
+              value={query}
+              onChange={(event) => {
+                setQuery(event.target.value)
+              }}
+              aria-label="Search"
+              placeholder="Search…"
+              className="w-full max-w-sm rounded-md border border-transparent bg-surface-sunken px-2.5 py-1 text-[13px] text-ink outline-none transition placeholder:text-ink-faint focus:border-border focus:bg-surface-raised"
+            />
+          </form>
+          <button
+            type="button"
+            onClick={() => {
+              setTheme(THEME_CYCLE[theme])
+            }}
+            title={`Theme: ${THEME_LABELS[theme]}`}
+            className="rounded-md px-2 py-1 text-[12px] text-ink-muted transition hover:bg-surface-sunken hover:text-ink"
+          >
+            {THEME_LABELS[theme]}
+          </button>
+          <div className="relative" ref={menuRef}>
+            <button
+              type="button"
+              onClick={() => {
+                setMenuOpen((current) => !current)
+              }}
+              aria-expanded={menuOpen}
+              aria-haspopup="menu"
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-accent text-[10px] font-semibold text-accent-fg transition hover:bg-accent-hover"
+              title={account?.name ?? 'Account'}
+            >
+              {account === undefined ? '?' : initialsOf(account.name)}
+            </button>
+            {menuOpen && (
+              <div
+                role="menu"
+                className="absolute right-0 z-20 mt-1.5 w-56 overflow-hidden rounded-md border border-border bg-surface-raised py-1"
+              >
+                <div className="border-b border-border px-3 py-2">
+                  <div className="truncate text-[13px] font-medium text-ink">
+                    {account?.name ?? 'Loading…'}
+                  </div>
+                  <div className="truncate font-mono text-[11px] text-ink-faint">
+                    {account?.email ?? ''}
+                  </div>
+                </div>
+                <NavLink
+                  to="/account/profile"
+                  role="menuitem"
+                  onClick={() => {
+                    setMenuOpen(false)
+                  }}
+                  className="block px-3 py-1.5 text-left text-[13px] text-ink hover:bg-surface-sunken"
+                >
+                  Account settings
+                </NavLink>
+                <NavLink
+                  to="/account/preferences"
+                  role="menuitem"
+                  onClick={() => {
+                    setMenuOpen(false)
+                  }}
+                  className="block border-b border-border px-3 py-1.5 text-left text-[13px] text-ink hover:bg-surface-sunken"
+                >
+                  Preferences
+                </NavLink>
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={logOut.isPending}
+                  onClick={() => {
+                    setMenuOpen(false)
+                    logOut
+                      .runAsync()
+                      .catch(() => undefined)
+                      .finally(() => {
+                        void navigate('/login', { replace: true })
+                      })
+                  }}
+                  className="block w-full px-3 py-1.5 text-left text-[13px] text-ink hover:bg-surface-sunken"
+                >
+                  Sign out
+                </button>
+              </div>
+            )}
+          </div>
+        </header>
+
+        <main className="min-w-0 flex-1 overflow-auto px-5 py-5">
+          {/* Keyed on the path so navigating away from a crashed page remounts
+              the boundary instead of leaving it stuck showing the old error. */}
+          <ErrorBoundary key={location.pathname}>
+            <Outlet />
+          </ErrorBoundary>
+        </main>
+      </div>
+    </div>
+  )
+}

package/src/components/SidebarField.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react'
+
+export interface SidebarFieldProps {
+  readonly label: string
+  readonly children: ReactNode
+}
+
+/** One labelled row in a record's sidebar. Ported from `RelatedList.tsx` in the mockups. */
+export function SidebarField({ label, children }: SidebarFieldProps): React.JSX.Element {
+  return (
+    <div className="border-t border-border py-2 first:border-t-0 first:pt-0">
+      <div className="mb-0.5 text-[10px] font-semibold tracking-wide text-ink-faint uppercase">
+        {label}
+      </div>
+      <div className="min-w-0 text-[12px] leading-snug text-ink">{children}</div>
+    </div>
+  )
+}

package/src/components/SocialProfilesField.tsx

@@ -0,0 +1,356 @@
+import { SOCIAL_NETWORK_IDS, SOCIAL_NETWORK_LABELS } from '@kelpie/schemas'
+import type { SocialNetworkId, SocialProfile } from '@kelpie/schemas'
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+
+export interface SocialProfilesFieldProps {
+  readonly value: readonly SocialProfile[]
+  readonly onChange: (profiles: readonly SocialProfile[]) => void
+}
+
+function hrefFor(url: string): string {
+  return /^https?:\/\//iu.test(url) ? url : `https://${url}`
+}
+
+/** The path or handle, so a list of profiles does not repeat the same domain nine times. */
+function profileHandle(url: string): string {
+  const bare = url.replace(/^https?:\/\/(www\.)?/iu, '').replace(/\/+$/u, '')
+  const slash = bare.indexOf('/')
+
+  if (slash === -1) {
+    return bare
+  }
+
+  const path = bare.slice(slash + 1)
+
+  return path.length > 0 ? path : bare
+}
+
+/** One profile per network, so the network list doubles as the set of things left to add. */
+export function SocialProfilesField({
+  value,
+  onChange,
+}: SocialProfilesFieldProps): React.JSX.Element {
+  const listId = useId()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const urlInputRef = useRef<HTMLInputElement>(null)
+  const editInputRef = useRef<HTMLInputElement>(null)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [highlight, setHighlight] = useState(0)
+  const [pendingNetwork, setPendingNetwork] = useState<SocialNetworkId | null>(null)
+  const [pendingUrl, setPendingUrl] = useState('')
+  const [editingNetwork, setEditingNetwork] = useState<SocialNetworkId | null>(null)
+  const [editUrl, setEditUrl] = useState('')
+
+  const available = useMemo(() => {
+    const used = new Set(value.map((profile) => profile.network))
+
+    return SOCIAL_NETWORK_IDS.filter((network) => !used.has(network))
+  }, [value])
+
+  const filtered = useMemo(() => {
+    const term = query.trim().toLowerCase()
+
+    return term.length === 0
+      ? available
+      : available.filter((network) => SOCIAL_NETWORK_LABELS[network].toLowerCase().includes(term))
+  }, [available, query])
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function onPointerDown(event: MouseEvent): void {
+      if (rootRef.current?.contains(event.target as Node) !== true) {
+        setOpen(false)
+        setQuery('')
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+    }
+  }, [open])
+
+  useEffect(() => {
+    setHighlight(0)
+  }, [query, open])
+
+  useEffect(() => {
+    if (pendingNetwork !== null) {
+      urlInputRef.current?.focus()
+    }
+  }, [pendingNetwork])
+
+  useEffect(() => {
+    if (editingNetwork !== null) {
+      editInputRef.current?.focus()
+      editInputRef.current?.select()
+    }
+  }, [editingNetwork])
+
+  function pickNetwork(network: SocialNetworkId): void {
+    setEditingNetwork(null)
+    setPendingNetwork(network)
+    setPendingUrl('')
+    setOpen(false)
+    setQuery('')
+  }
+
+  function cancelPending(): void {
+    setPendingNetwork(null)
+    setPendingUrl('')
+  }
+
+  function commitPending(): void {
+    const url = pendingUrl.trim()
+
+    if (pendingNetwork === null || url.length === 0) {
+      return
+    }
+
+    onChange([
+      ...value.filter((profile) => profile.network !== pendingNetwork),
+      { network: pendingNetwork, url },
+    ])
+    cancelPending()
+  }
+
+  function cancelEdit(): void {
+    setEditingNetwork(null)
+    setEditUrl('')
+  }
+
+  function commitEdit(): void {
+    if (editingNetwork === null) {
+      return
+    }
+
+    const url = editUrl.trim()
+
+    onChange(
+      url.length === 0
+        ? value.filter((profile) => profile.network !== editingNetwork)
+        : value.map((profile) =>
+            profile.network === editingNetwork ? { ...profile, url } : profile,
+          ),
+    )
+    cancelEdit()
+  }
+
+  return (
+    <div className="space-y-0.5">
+      <ul>
+        {value.map((profile) => {
+          const label = SOCIAL_NETWORK_LABELS[profile.network]
+
+          if (editingNetwork === profile.network) {
+            return (
+              <li key={profile.network} className="py-1">
+                <div className="mb-1 text-[11px] font-medium text-ink-muted">{label}</div>
+                <input
+                  ref={editInputRef}
+                  type="url"
+                  value={editUrl}
+                  onChange={(event) => {
+                    setEditUrl(event.target.value)
+                  }}
+                  onBlur={commitEdit}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault()
+                      commitEdit()
+                    }
+
+                    if (event.key === 'Escape') {
+                      event.preventDefault()
+                      cancelEdit()
+                    }
+                  }}
+                  className="w-full rounded-md border border-accent bg-surface-raised px-2 py-1 text-[12px] outline-none ring-2 ring-accent/20"
+                />
+              </li>
+            )
+          }
+
+          return (
+            <li
+              key={profile.network}
+              className="-mx-1 flex items-center gap-1 rounded-md px-1 py-1 hover:bg-surface"
+            >
+              <a
+                href={hrefFor(profile.url)}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={profile.url}
+                className="min-w-0 flex-1 truncate text-[12px] leading-snug text-ink hover:text-accent"
+              >
+                <span className="font-medium">{label}</span>
+                <span className="text-ink-faint"> · </span>
+                <span className="text-ink-muted">{profileHandle(profile.url)}</span>
+              </a>
+              <div className="flex shrink-0 items-center">
+                <button
+                  type="button"
+                  onClick={() => {
+                    cancelPending()
+                    setEditingNetwork(profile.network)
+                    setEditUrl(profile.url)
+                  }}
+                  className="rounded px-1.5 py-0.5 text-[11px] font-medium text-ink-faint hover:bg-surface-raised hover:text-ink"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (editingNetwork === profile.network) {
+                      cancelEdit()
+                    }
+
+                    onChange(value.filter((other) => other.network !== profile.network))
+                  }}
+                  className="rounded px-1 py-0.5 text-[13px] leading-none text-ink-faint hover:bg-danger-soft hover:text-danger"
+                  aria-label={`Remove ${label}`}
+                >
+                  ×
+                </button>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+
+      {value.length === 0 && pendingNetwork === null && (
+        <p className="py-0.5 text-[12px] text-ink-faint">None yet</p>
+      )}
+
+      {pendingNetwork !== null ? (
+        <div className="mt-1 space-y-1.5 rounded-md border border-border bg-surface px-2 py-2">
+          <div className="text-[11px] font-medium text-ink">
+            {SOCIAL_NETWORK_LABELS[pendingNetwork]}
+          </div>
+          <input
+            ref={urlInputRef}
+            type="url"
+            value={pendingUrl}
+            onChange={(event) => {
+              setPendingUrl(event.target.value)
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault()
+                commitPending()
+              }
+
+              if (event.key === 'Escape') {
+                event.preventDefault()
+                cancelPending()
+              }
+            }}
+            placeholder="Profile URL"
+            className="w-full rounded-md border border-border bg-surface-raised px-2 py-1 text-[12px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+          <div className="flex justify-end gap-1.5">
+            <button
+              type="button"
+              onClick={cancelPending}
+              className="rounded-md px-2 py-1 text-[11px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={commitPending}
+              disabled={pendingUrl.trim().length === 0}
+              className="rounded-md bg-accent px-2.5 py-1 text-[11px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-40"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      ) : (
+        available.length > 0 && (
+          <div ref={rootRef} className="relative">
+            <button
+              type="button"
+              onClick={() => {
+                setOpen((current) => !current)
+                setQuery('')
+              }}
+              className="mt-0.5 -mx-1 rounded-md px-1 py-1 text-[12px] font-medium text-ink-muted transition hover:bg-surface hover:text-accent"
+            >
+              + Add
+            </button>
+
+            {open && (
+              <div className="absolute z-20 mt-0.5 w-full overflow-hidden rounded-md border border-border bg-surface-raised">
+                <input
+                  value={query}
+                  onChange={(event) => {
+                    setQuery(event.target.value)
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'ArrowDown') {
+                      event.preventDefault()
+                      setHighlight((current) =>
+                        Math.min(current + 1, Math.max(filtered.length - 1, 0)),
+                      )
+                    } else if (event.key === 'ArrowUp') {
+                      event.preventDefault()
+                      setHighlight((current) => Math.max(current - 1, 0))
+                    } else if (event.key === 'Enter') {
+                      event.preventDefault()
+                      const hit = filtered[highlight]
+
+                      if (hit !== undefined) {
+                        pickNetwork(hit)
+                      }
+                    } else if (event.key === 'Escape') {
+                      setOpen(false)
+                      setQuery('')
+                    }
+                  }}
+                  placeholder="Search networks…"
+                  role="combobox"
+                  aria-expanded={open}
+                  aria-controls={listId}
+                  aria-autocomplete="list"
+                  className="w-full border-b border-border px-2.5 py-1.5 text-[12px] outline-none focus:bg-accent-soft/30"
+                />
+                <ul id={listId} role="listbox" className="max-h-48 overflow-auto py-1">
+                  {filtered.length === 0 ? (
+                    <li className="px-3 py-2 text-[12px] text-ink-faint">No networks match</li>
+                  ) : (
+                    filtered.map((network, index) => (
+                      <li key={network} role="option" aria-selected={index === highlight}>
+                        <button
+                          type="button"
+                          onMouseEnter={() => {
+                            setHighlight(index)
+                          }}
+                          onClick={() => {
+                            pickNetwork(network)
+                          }}
+                          className={[
+                            'flex w-full px-3 py-1.5 text-left text-[12px] text-ink',
+                            index === highlight ? 'bg-accent-soft' : 'hover:bg-surface',
+                          ].join(' ')}
+                        >
+                          {SOCIAL_NETWORK_LABELS[network]}
+                        </button>
+                      </li>
+                    ))
+                  )}
+                </ul>
+              </div>
+            )}
+          </div>
+        )
+      )}
+    </div>
+  )
+}