@kelpie/ui 0.1.0

package/src/components/StageSettings.tsx

@@ -0,0 +1,319 @@
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core'
+import type { DragEndEvent } from '@dnd-kit/core'
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import type { PipelineStage } from '@kelpie/schemas'
+import { useEffect, useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link } from 'react-router'
+
+import { SegmentedControl } from './SegmentedControl.tsx'
+
+/**
+ * Stage configuration for one pipeline: rename, reorder, open or closed, add,
+ * remove. Ported from the mockup with one narrowing: no endpoint answers "how
+ * many records sit in this stage", so removing always asks where records should
+ * go instead of counting first. Moving zero records is a no-op server-side.
+ */
+
+type OpenFlag = 'open' | 'closed'
+
+export interface StageSettingsProps {
+  readonly title: string
+  readonly backTo: string
+  readonly backLabel: string
+  /** What one record in this pipeline is called: `deal`, `opportunity`. */
+  readonly recordNoun: string
+  readonly stages: readonly PipelineStage[]
+  readonly onRename: (id: string, label: string) => void
+  readonly onReorder: (activeId: string, overId: string) => void
+  readonly onToggleOpen: (id: string, open: boolean) => void
+  readonly onAdd: (label: string) => void
+  readonly onRemove: (id: string, moveToId: string) => void
+}
+
+export function StageSettings({
+  title,
+  backTo,
+  backLabel,
+  recordNoun,
+  stages,
+  onRename,
+  onReorder,
+  onToggleOpen,
+  onAdd,
+  onRemove,
+}: StageSettingsProps): React.JSX.Element {
+  const [newLabel, setNewLabel] = useState('')
+  const [pendingRemoveId, setPendingRemoveId] = useState<string | null>(null)
+  const [moveToId, setMoveToId] = useState('')
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }))
+
+  function handleDragEnd(event: DragEndEvent): void {
+    const { active, over } = event
+
+    if (over === null) {
+      return
+    }
+
+    const activeId = String(active.id)
+    const overId = String(over.id)
+
+    if (activeId !== overId) {
+      onReorder(activeId, overId)
+    }
+  }
+
+  function requestRemove(id: string): void {
+    if (stages.length <= 1) {
+      return
+    }
+
+    setMoveToId(stages.find((stage) => stage.id !== id)?.id ?? '')
+    setPendingRemoveId(id)
+  }
+
+  function confirmRemove(): void {
+    if (pendingRemoveId === null || moveToId.length === 0) {
+      return
+    }
+
+    onRemove(pendingRemoveId, moveToId)
+    setPendingRemoveId(null)
+    setMoveToId('')
+  }
+
+  function handleAdd(event: FormEvent): void {
+    event.preventDefault()
+
+    const trimmed = newLabel.trim()
+
+    if (trimmed.length === 0) {
+      return
+    }
+
+    onAdd(trimmed)
+    setNewLabel('')
+  }
+
+  const pendingStage = stages.find((stage) => stage.id === pendingRemoveId)
+  const moveTargets = stages.filter((stage) => stage.id !== pendingRemoveId)
+
+  return (
+    <div className="animate-fade-in mx-auto max-w-xl">
+      <Link
+        to={backTo}
+        className="mb-4 inline-flex text-[12px] font-medium text-ink-muted hover:text-ink"
+      >
+        ← {backLabel}
+      </Link>
+      <h1 className="text-[22px] font-semibold tracking-tight text-ink">{title}</h1>
+      <p className="mt-1 text-[13px] text-ink-muted">
+        Add, rename, reorder, or remove stages. Renaming only changes the label. Closed stages are
+        hidden when the board is set to Open.
+      </p>
+
+      <div className="mt-6 rounded-md border border-border">
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext
+            items={stages.map((stage) => stage.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <ul className="divide-y divide-border">
+              {stages.map((stage) => (
+                <SortableStageRow
+                  key={stage.id}
+                  stage={stage}
+                  canRemove={stages.length > 1}
+                  onRename={(label) => {
+                    onRename(stage.id, label)
+                  }}
+                  onToggleOpen={(open) => {
+                    onToggleOpen(stage.id, open)
+                  }}
+                  onRemove={() => {
+                    requestRemove(stage.id)
+                  }}
+                />
+              ))}
+            </ul>
+          </SortableContext>
+        </DndContext>
+      </div>
+
+      <form onSubmit={handleAdd} className="mt-4 flex gap-2">
+        <input
+          value={newLabel}
+          onChange={(event) => {
+            setNewLabel(event.target.value)
+          }}
+          placeholder="New stage name"
+          className="min-w-0 flex-1 rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+        />
+        <button
+          type="submit"
+          disabled={newLabel.trim().length === 0}
+          className="rounded-md bg-accent px-3.5 py-2 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-40"
+        >
+          Add stage
+        </button>
+      </form>
+
+      {pendingStage !== undefined && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4">
+          <div className="animate-slide-in w-full max-w-md rounded-md border border-border bg-surface-raised p-5">
+            <h2 className="text-[15px] font-semibold text-ink">
+              Remove “{pendingStage.label}”?
+            </h2>
+            <p className="mt-1 text-[12px] text-ink-muted">
+              Any {recordNoun}s still in this stage will move to the stage you pick.
+            </p>
+            <label className="mt-4 block">
+              <span className="mb-1.5 block text-[12px] font-medium">Move to</span>
+              <select
+                value={moveToId}
+                onChange={(event) => {
+                  setMoveToId(event.target.value)
+                }}
+                className="w-full rounded-md border border-border bg-surface px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+              >
+                {moveTargets.map((stage) => (
+                  <option key={stage.id} value={stage.id}>
+                    {stage.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <div className="mt-4 flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => {
+                  setPendingRemoveId(null)
+                  setMoveToId('')
+                }}
+                className="rounded-md px-3 py-2 text-[12px] font-medium text-ink-muted hover:text-ink"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={confirmRemove}
+                disabled={moveToId.length === 0}
+                className="rounded-md bg-danger px-3.5 py-2 text-[12px] font-medium text-danger-fg hover:opacity-90 disabled:opacity-40"
+              >
+                Move and remove
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SortableStageRow({
+  stage,
+  canRemove,
+  onRename,
+  onToggleOpen,
+  onRemove,
+}: {
+  readonly stage: PipelineStage
+  readonly canRemove: boolean
+  readonly onRename: (label: string) => void
+  readonly onToggleOpen: (open: boolean) => void
+  readonly onRemove: () => void
+}): React.JSX.Element {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: stage.id,
+  })
+
+  const [draft, setDraft] = useState(stage.label)
+
+  useEffect(() => {
+    setDraft(stage.label)
+  }, [stage.label])
+
+  function commitRename(): void {
+    const trimmed = draft.trim()
+
+    if (trimmed.length === 0) {
+      setDraft(stage.label)
+
+      return
+    }
+
+    if (trimmed !== stage.label) {
+      onRename(trimmed)
+    }
+
+    setDraft(trimmed)
+  }
+
+  const openValue: OpenFlag = stage.open ? 'open' : 'closed'
+
+  return (
+    <li
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+      }}
+      className="flex flex-wrap items-center gap-3 px-3 py-3"
+    >
+      <button
+        type="button"
+        className="cursor-grab touch-none px-1 py-1 text-[11px] text-ink-faint active:cursor-grabbing"
+        aria-label={`Drag to reorder ${stage.label}`}
+        {...attributes}
+        {...listeners}
+      >
+        ⋮⋮
+      </button>
+      <div className="min-w-0 flex-1">
+        <input
+          value={draft}
+          onChange={(event) => {
+            setDraft(event.target.value)
+          }}
+          onBlur={commitRename}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              ;(event.target as HTMLInputElement).blur()
+            }
+
+            if (event.key === 'Escape') {
+              setDraft(stage.label)
+              ;(event.target as HTMLInputElement).blur()
+            }
+          }}
+          className="w-full rounded-md border border-transparent bg-transparent px-2 py-1 text-[13px] font-medium text-ink outline-none hover:border-border focus:border-accent focus:ring-2 focus:ring-accent/20"
+          aria-label={`Stage name for ${stage.label}`}
+        />
+        <div className="mt-0.5 px-2 font-mono text-[11px] text-ink-faint">{stage.slug}</div>
+      </div>
+      <SegmentedControl
+        ariaLabel={`Open or closed for ${stage.label}`}
+        value={openValue}
+        onChange={(value) => {
+          onToggleOpen(value === 'open')
+        }}
+        options={[
+          { id: 'open', label: 'Open' },
+          { id: 'closed', label: 'Closed' },
+        ]}
+      />
+      <button
+        type="button"
+        onClick={onRemove}
+        disabled={!canRemove}
+        className="rounded-md px-2.5 py-1.5 text-[12px] font-medium text-danger hover:bg-danger-soft disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Remove
+      </button>
+    </li>
+  )
+}

package/src/components/SummaryBlock.tsx

@@ -0,0 +1,27 @@
+import { InlineEdit } from './InlineEdit.tsx'
+
+export interface SummaryBlockProps {
+  readonly value: string
+  readonly onChange: (value: string) => void
+}
+
+/**
+ * The agent-facing summary, at the top of a record's overview.
+ *
+ * It sits above everything else because it is the field an agent reads first;
+ * `brief.md` makes it a record field rather than something buried in notes.
+ */
+export function SummaryBlock({ value, onChange }: SummaryBlockProps): React.JSX.Element {
+  return (
+    <div className="mb-5 border-b border-border pb-4">
+      <div className="mb-1 text-[11px] font-medium text-ink-faint">Summary</div>
+      <InlineEdit
+        value={value}
+        onChange={onChange}
+        multiline
+        displayClassName="text-[13px] leading-relaxed text-ink not-italic"
+        emptyLabel="Add a summary…"
+      />
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,190 @@
+export { KelpieApp } from './app/KelpieApp.tsx'
+export type { KelpieAppProps } from './app/KelpieApp.tsx'
+
+export { ServiceStatus } from './ServiceStatus.tsx'
+export type { ServiceStatusProps } from './ServiceStatus.tsx'
+
+export { ApiError, createApiClient } from './api/client.ts'
+export type { ApiClient, ApiClientOptions, Decoder, ErrorDetail, Page, QueryParameters } from './api/client.ts'
+
+export { ApiProvider } from './api/ApiProvider.tsx'
+export type { ApiProviderProps } from './api/ApiProvider.tsx'
+
+export { useApiClient } from './api/context.ts'
+export { toError } from './api/errors.ts'
+export { createQueryClient } from './api/queryClient.ts'
+export { createResourceHooks } from './api/resource.ts'
+export type {
+  ListOptions,
+  MutationResult,
+  RecordListResult,
+  RecordResult,
+  ResourceDefinition,
+  ResourceHooks,
+  UpdateArguments,
+} from './api/resource.ts'
+
+export {
+  useCompanies,
+  useCompany,
+  useCreateCompany,
+  useDeleteCompany,
+  useUpdateCompany,
+} from './api/resources/companies.ts'
+export type { CompanyFilters, CreateCompanyInput } from './api/resources/companies.ts'
+
+export {
+  useCreatePerson,
+  useDeletePerson,
+  usePeople,
+  usePerson,
+  useUpdatePerson,
+} from './api/resources/people.ts'
+export type { CreatePersonInput, PeopleFilters } from './api/resources/people.ts'
+
+export {
+  useCreatePosition,
+  useDeletePosition,
+  usePositions,
+  useUpdatePositionTitle,
+} from './api/resources/positions.ts'
+export type { PositionFilters, PositionTitleUpdate } from './api/resources/positions.ts'
+
+export {
+  MAX_PAGE_SIZE,
+  useCreatePlanItem,
+  useDeletePlanItem,
+  usePlanItems,
+  usePlanItemsForRecords,
+  useRecordPlanItems,
+  useUpdatePlanItem,
+} from './api/resources/planItems.ts'
+export type { PlanItemFilters } from './api/resources/planItems.ts'
+
+export {
+  useCreateDecision,
+  useDecisions,
+  useDeleteDecision,
+  useUpdateDecision,
+} from './api/resources/decisions.ts'
+export type { DecisionFilters } from './api/resources/decisions.ts'
+
+export {
+  resetUrlTemplate,
+  useAcceptInvite,
+  useConfirmPasswordReset,
+  useCreateWorkspace,
+  useLogIn,
+  useLogOut,
+  useRequestPasswordReset,
+  useSession,
+  useSignUp,
+} from './api/resources/session.ts'
+export type { SessionState } from './api/resources/session.ts'
+
+export { fetchServiceHealth } from './api/health.ts'
+export type { HealthRequestOptions, ServiceHealth } from './api/health.ts'
+
+export { AgentTasks } from './components/AgentTasks.tsx'
+export type { AgentTasksProps } from './components/AgentTasks.tsx'
+export { Chip } from './components/Chip.tsx'
+export type { ChipProps, ChipTone } from './components/Chip.tsx'
+export { DataTable } from './components/DataTable.tsx'
+export type { Column, DataTableGroup, DataTableProps } from './components/DataTable.tsx'
+export { DecisionsPanel } from './components/DecisionsPanel.tsx'
+export type { DecisionsPanelProps } from './components/DecisionsPanel.tsx'
+export { DeleteRecord } from './components/DeleteRecord.tsx'
+export type { DeleteRecordProps } from './components/DeleteRecord.tsx'
+export { EntitySearch } from './components/EntitySearch.tsx'
+export type { EntitySearchProps, SearchOption } from './components/EntitySearch.tsx'
+export { InlineEdit } from './components/InlineEdit.tsx'
+export type { InlineEditProps } from './components/InlineEdit.tsx'
+export { FilterBar, PageHeader } from './components/PageHeader.tsx'
+export type { FilterBarProps, PageHeaderProps } from './components/PageHeader.tsx'
+export { PhonesField } from './components/PhonesField.tsx'
+export type { PhonesFieldProps } from './components/PhonesField.tsx'
+export { PlanAttention, RelatedPlanAttention } from './components/PlanAttention.tsx'
+export type { PlanAttentionProps } from './components/PlanAttention.tsx'
+export { PlanPanel } from './components/PlanPanel.tsx'
+export type { PlanPanelProps } from './components/PlanPanel.tsx'
+export { ErrorPanel, LoadingPanel, NotFoundPanel } from './components/QueryState.tsx'
+export type { ErrorPanelProps } from './components/QueryState.tsx'
+export { RecordTabs } from './components/RecordTabs.tsx'
+export type { RecordTabDescriptor, RecordTabsProps } from './components/RecordTabs.tsx'
+export { AddButton, SectionHeader } from './components/SectionHeader.tsx'
+export type { AddButtonProps, SectionHeaderProps } from './components/SectionHeader.tsx'
+export { Shell } from './components/Shell.tsx'
+export { SidebarField } from './components/SidebarField.tsx'
+export type { SidebarFieldProps } from './components/SidebarField.tsx'
+export { SocialProfilesField } from './components/SocialProfilesField.tsx'
+export type { SocialProfilesFieldProps } from './components/SocialProfilesField.tsx'
+export { SummaryBlock } from './components/SummaryBlock.tsx'
+export type { SummaryBlockProps } from './components/SummaryBlock.tsx'
+
+export { CompaniesPage } from './pages/CompaniesPage.tsx'
+export { CompanyDetail } from './pages/CompanyDetail.tsx'
+export { DecisionsPage } from './pages/DecisionsPage.tsx'
+export { PeoplePage } from './pages/PeoplePage.tsx'
+export { PersonDetail } from './pages/PersonDetail.tsx'
+export { PlanningPage } from './pages/PlanningPage.tsx'
+export { ForgotPasswordPage } from './pages/auth/ForgotPasswordPage.tsx'
+export { JoinPage } from './pages/auth/JoinPage.tsx'
+export { ResetPasswordPage } from './pages/auth/ResetPasswordPage.tsx'
+export { SignInPage } from './pages/auth/SignInPage.tsx'
+export { SignUpPage } from './pages/auth/SignUpPage.tsx'
+export { HandbookStepPage } from './pages/onboarding/HandbookStepPage.tsx'
+export { InvitesStepPage } from './pages/onboarding/InvitesStepPage.tsx'
+export { WorkspaceStepPage } from './pages/onboarding/WorkspaceStepPage.tsx'
+
+export {
+  DUE_BUCKETS,
+  addDays,
+  byDateThenTitle,
+  dueBucketFor,
+  isOpen,
+  monthBounds,
+  nextOpenByTarget,
+  nextOpenPlanItem,
+  planAttention,
+  planStatusTone,
+  toIsoDay,
+  todayIso,
+} from './lib/plan.ts'
+export type { DueBucketId, PlanAttention as PlanAttentionSummary } from './lib/plan.ts'
+
+export { applyTheme, getStoredTheme, resolveTheme, setStoredTheme, watchSystemTheme } from './lib/theme.ts'
+export type { ThemePreference } from './lib/theme.ts'
+
+export { EXTENSIBLE_RECORD_TYPES, INTEGRATION_CATEGORIES, NAV_SLOTS } from './registry/contributions.ts'
+export type {
+  DashboardCard,
+  ExtensibleRecordType,
+  IntegrationCategory,
+  IntegrationProvider,
+  NavItem,
+  NavSlot,
+  RecordContext,
+  RecordSidebarCard,
+  RecordTab,
+  RouteContribution,
+} from './registry/contributions.ts'
+
+export { defineOverridable } from './registry/overridable.ts'
+export type { Overridable } from './registry/overridable.ts'
+
+export { NO_UI_MODULES, UiModuleError, inSlotOrder, registerUiModules } from './registry/registry.ts'
+export type { UiExtensions, UiModule, UiModuleContext } from './registry/registry.ts'
+
+export {
+  useDashboardCards,
+  useIntegrationProviders,
+  useModuleRoutes,
+  useNavItems,
+  useOverridable,
+  useRecordSidebarCards,
+  useRecordTabs,
+  useUiExtensions,
+} from './registry/context.ts'
+
+export { UiExtensionProvider } from './registry/UiExtensionProvider.tsx'
+export type { UiExtensionProviderProps } from './registry/UiExtensionProvider.tsx'

package/src/lib/dates.ts

@@ -0,0 +1,90 @@
+/**
+ * How the app writes a moment. Ported from the mockup's own formatters so a
+ * timeline reads the same as the one it was designed against.
+ *
+ * `now` is a parameter rather than a call to `new Date()` inside, because a
+ * function that reads the clock cannot be tested against a fixed expectation.
+ */
+
+const DATE_TIME = new Intl.DateTimeFormat('en-AU', {
+  day: 'numeric',
+  month: 'short',
+  hour: 'numeric',
+  minute: '2-digit',
+})
+
+export function formatDateTime(value: Date): string {
+  return DATE_TIME.format(value)
+}
+
+function plural(count: number, unit: string): string {
+  return `${String(count)} ${unit}${count === 1 ? '' : 's'} ago`
+}
+
+/**
+ * `3 days ago`.
+ *
+ * A future timestamp falls back to the absolute form. "in 3 days" on a history
+ * panel means the clocks disagree, and phrasing it as elapsed time would hide
+ * that.
+ */
+export function formatRelativeTime(value: Date, now: Date = new Date()): string {
+  const elapsedMs = now.getTime() - value.getTime()
+
+  if (elapsedMs < 0) {
+    return formatDateTime(value)
+  }
+
+  const seconds = Math.round(elapsedMs / 1000)
+
+  if (seconds < 60) {
+    return 'just now'
+  }
+
+  const minutes = Math.round(seconds / 60)
+
+  if (minutes < 60) {
+    return plural(minutes, 'minute')
+  }
+
+  const hours = Math.round(minutes / 60)
+
+  if (hours < 24) {
+    return plural(hours, 'hour')
+  }
+
+  const days = Math.round(hours / 24)
+
+  if (days < 30) {
+    return plural(days, 'day')
+  }
+
+  const months = Math.round(days / 30)
+
+  return months < 12 ? plural(months, 'month') : plural(Math.round(months / 12), 'year')
+}
+
+const DAY = new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' })
+
+/**
+ * A date-only field (`YYYY-MM-DD`), as the mockup writes one. Parsed at midday
+ * so no timezone west or east of UTC shifts it onto a neighbouring day.
+ */
+export function formatDay(iso: string): string {
+  return DAY.format(new Date(`${iso}T12:00:00`))
+}
+
+/** A moment whose time of day does not matter to the reader, e.g. when a decision was made. */
+export function formatDate(value: Date): string {
+  return DAY.format(value)
+}
+
+const MONTH = new Intl.DateTimeFormat('en-AU', { month: 'long' })
+const MONTH_AND_YEAR = new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' })
+
+/** The heading a timeline groups under. The year is dropped for the current one. */
+export function monthLabel(value: Date, now: Date = new Date()): string {
+  return value.getFullYear() === now.getFullYear()
+    ? MONTH.format(value)
+    : MONTH_AND_YEAR.format(value)
+}

package/src/lib/money.ts

@@ -0,0 +1,12 @@
+/**
+ * How the app writes a deal's value. `api.md` stores money as integer cents plus
+ * an ISO 4217 code; the board and the sidebar both render whole units, as the
+ * mockup did.
+ */
+export function formatMoney(valueCents: number, currency: string | null): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency ?? 'USD',
+    maximumFractionDigits: 0,
+  }).format(valueCents / 100)
+}

package/src/lib/names.ts

@@ -0,0 +1,13 @@
+/**
+ * What an avatar shows when there is no picture.
+ *
+ * One implementation because the team list, the account menu, and the profile
+ * page all draw the same circle for the same person, and three copies would
+ * eventually disagree about it.
+ */
+export function initialsOf(name: string): string {
+  const parts = name.trim().split(/\s+/u).slice(0, 2)
+  const letters = parts.map((part) => part.slice(0, 1)).join('')
+
+  return letters.length > 0 ? letters.toUpperCase() : '?'
+}