@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/custom/ActiveWork/InitiativeHeader.tsx

@@ -0,0 +1,73 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { Pill } from '../../ui/pill'
+import { StatusDot } from '../Workout/StatusDot'
+import { DateTime } from '../DateTime'
+import { Typography } from '../Typography'
+import { INITIATIVE_STATE_META, type InitiativeState } from './InitiativeCard'
+
+export interface InitiativeHeaderProps {
+  title: string
+  /** Short slug shown under the title, e.g. `active-work`. */
+  slug: string
+  state: InitiativeState
+  /** Focused rank (1-based). Shown as `#N` for a ranked state. */
+  rank?: number
+  /** Ship-target label, e.g. `2026-Q3`. */
+  shipTarget?: string
+  /** ISO date the brief last changed. */
+  updated?: string
+  className?: string
+}
+
+/**
+ * InitiativeHeader — an initiative's identity line: title, slug, state, rank,
+ * ship target and when it was last touched.
+ *
+ * Shares the state vocabulary with {@link InitiativeCard} through
+ * `INITIATIVE_STATE_META`. Composes {@link StatusDot}, {@link Pill},
+ * {@link DateTime} and {@link Typography}. Used by the initiative reader.
+ */
+export function InitiativeHeader({
+  title,
+  slug,
+  state,
+  rank,
+  shipTarget,
+  updated,
+  className,
+}: InitiativeHeaderProps) {
+  const meta = INITIATIVE_STATE_META[state]
+  return (
+    <View className={cn('gap-1', className)}>
+      <Typography variant="h5" className="text-text-primary">
+        {title}
+      </Typography>
+      <View className="flex-row flex-wrap items-center gap-2.5">
+        <Typography variant="mono" className="text-text-tertiary">
+          {slug}
+        </Typography>
+        <StatusDot variant={meta.dot} size="sm" label={meta.label} />
+        {rank ? (
+          <Pill variant="subtle" color="primary" size="xs">
+            {`#${rank}`}
+          </Pill>
+        ) : null}
+        {shipTarget ? (
+          <Typography variant="caption" className="text-text-tertiary">
+            {`ship ${shipTarget}`}
+          </Typography>
+        ) : null}
+        {updated ? (
+          <View className="flex-row items-center gap-1">
+            <Typography variant="caption" className="text-text-tertiary">
+              updated
+            </Typography>
+            <DateTime value={updated} format="medium" isUTC variant="caption" color="tertiary" />
+          </View>
+        ) : null}
+      </View>
+    </View>
+  )
+}

package/src/components/custom/ActiveWork/InitiativeReader.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Card } from '../../ui/card'
+import { Surface } from '../../ui/surface'
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from '../../ui/tabs'
+import { InitiativeHeader } from './InitiativeHeader'
+import { InitiativeBrief, type InitiativeBriefData } from './InitiativeBrief'
+import { OpenLoops, type OpenLoop } from './OpenLoops'
+import { SessionList } from './SessionList'
+import { TaskTable } from './TaskTable'
+import type { TaskListItem } from './TaskRow'
+import { sessionLinkers } from './session-linkers'
+import { SESSION_FIXTURE, SESSION_NOW } from './session-fixture'
+import {
+  INITIATIVE_BRIEF_FIXTURE,
+  INITIATIVE_LOOPS_FIXTURE,
+  INITIATIVE_NOW,
+  INITIATIVE_TASKS_FIXTURE,
+} from './initiative-fixture'
+
+interface ReaderArgs {
+  brief: InitiativeBriefData
+  loops: OpenLoop[]
+  tasks: TaskListItem[]
+  now: number
+  onPressTask: (id: string) => void
+  onPressLink: (name: string) => void
+  onPressPr: (number: number) => void
+}
+
+/**
+ * The pieces composed the way a host would: identity header, then the open
+ * loops (the durable current state), then the brief beside the tasks and
+ * recent sessions. There is deliberately no `InitiativeReader` organism; this
+ * story is the reference composition.
+ */
+function InitiativeReader({
+  brief,
+  loops,
+  tasks,
+  now,
+  onPressTask,
+  onPressLink,
+  onPressPr,
+}: ReaderArgs) {
+  const linkers = sessionLinkers({ onPressTask, onPressLink, onPressPr })
+  // A default Card already resolves the card plane from the page it is on and wears the lift.
+  // A `bg-*` className here would be silently discarded — Card writes its plane into `style`.
+  const cardClass = 'gap-1 p-4'
+  // A tab strip is the card's header: its own py-2 is the whole gap above the labels, so the card gives none.
+  const tabCardClass = `min-w-[360px] flex-1 ${cardClass} pt-2`
+  return (
+    <View className="gap-4">
+      <InitiativeHeader
+        title={brief.title}
+        slug={brief.slug}
+        state={brief.state as never}
+        rank={brief.rank ?? undefined}
+        shipTarget={brief.shipTarget ?? undefined}
+        updated={brief.updated}
+      />
+      <Card className={cardClass} testID="reader-card">
+        <OpenLoops loops={loops} now={now} linkers={linkers} />
+      </Card>
+      <View className="flex-row flex-wrap items-start gap-4">
+        <Card className={`min-w-[360px] flex-1 ${cardClass}`} testID="reader-card">
+          <InitiativeBrief brief={brief} linkers={linkers} />
+        </Card>
+        <Card className={tabCardClass} testID="reader-card">
+          <Tabs defaultIndex={0}>
+            <TabList>
+              <Tab>{`Tasks (${tasks.length})`}</Tab>
+              <Tab>{`Sessions (${SESSION_FIXTURE.length})`}</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                <TaskTable tasks={tasks} now={now} hideLegend hideColumns={['slug']} label=" " />
+              </TabPanel>
+              <TabPanel>
+                <SessionList sessions={SESSION_FIXTURE} now={SESSION_NOW} label=" " />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </Card>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * **M2 · Initiative reader** — one initiative's durable state: the identity
+ * header, the open loops from the session ledger, the brief in collapsible
+ * sections, and its open tasks and recent sessions.
+ *
+ * Composes `InitiativeHeader` · `OpenLoops` · `InitiativeBrief` · `TaskTable`
+ * · `SessionList`, all over `MarkdownProse` and the session linkers.
+ */
+const meta: Meta<ReaderArgs> = {
+  title: 'Custom/ActiveWork/InitiativeReader',
+  component: InitiativeReader,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    brief: INITIATIVE_BRIEF_FIXTURE,
+    loops: INITIATIVE_LOOPS_FIXTURE,
+    tasks: INITIATIVE_TASKS_FIXTURE,
+    now: INITIATIVE_NOW,
+  },
+  argTypes: {
+    brief: { table: { disable: true } },
+    loops: { table: { disable: true } },
+    tasks: { table: { disable: true } },
+    now: { table: { disable: true } },
+    onPressTask: { action: 'onPressTask' },
+    onPressLink: { action: 'onPressLink' },
+    onPressPr: { action: 'onPressPr' },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    // Fullscreen: the page Surface is the host plane every card lifts off, so it owns the frame.
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **InitiativeHeader** · **OpenLoops** · **InitiativeBrief** · **TaskTable** · **SessionList**, over **MarkdownProse** and the session linkers. The host owns layout.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<ReaderArgs>
+
+/** The active-work initiative: five open loops, four open tasks, its v0.1 brief. */
+export const Default: Story = {}
+
+/** A quiet initiative: no open loops, so the section reads its empty state. */
+export const NoOpenLoops: Story = {
+  args: { loops: [] },
+}

package/src/components/custom/ActiveWork/OpenLoops.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Card } from '../../ui/card'
+import { Surface } from '../../ui/surface'
+import { OpenLoops } from './OpenLoops'
+import { sessionLinkers } from './session-linkers'
+import { INITIATIVE_LOOPS_FIXTURE, INITIATIVE_NOW } from './initiative-fixture'
+
+/**
+ * **OpenLoops** — the initiative's hanging threads from the session ledger,
+ * each with its kind, age and auto-linked text. The durable current state a
+ * session picks up.
+ *
+ * Composes `Eyebrow` · `Pill` · `Divider` · `MarkdownProse`.
+ */
+const meta: Meta<typeof OpenLoops> = {
+  title: 'Custom/ActiveWork/OpenLoops',
+  component: OpenLoops,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    loops: INITIATIVE_LOOPS_FIXTURE,
+    now: INITIATIVE_NOW,
+    linkers: sessionLinkers(),
+  },
+  argTypes: {
+    loops: { table: { disable: true } },
+    now: { table: { disable: true } },
+    linkers: { table: { disable: true } },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen w-full max-w-[620px] p-6" testID="page-surface">
+        <Card className="gap-1 p-4">
+          <Story />
+        </Card>
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **Eyebrow** · **Pill** · **Divider** · **MarkdownProse**. Used-by ↑ the Initiative Reader composition.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof OpenLoops>
+
+/** Five loops of mixed kind. */
+export const Default: Story = {}
+
+/** No open loops: the empty state. */
+export const Empty: Story = {
+  args: { loops: [] },
+}

package/src/components/custom/ActiveWork/OpenLoops.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { OpenLoops } from './OpenLoops'
+import { sessionLinkers } from './session-linkers'
+import { INITIATIVE_LOOPS_FIXTURE, INITIATIVE_NOW } from './initiative-fixture'
+
+describe('OpenLoops', () => {
+  it('lists a row per loop under a count heading, inside a list', () => {
+    render(<OpenLoops loops={INITIATIVE_LOOPS_FIXTURE} now={INITIATIVE_NOW} />)
+    expect(screen.getByText('5 open loops')).toBeInTheDocument()
+    expect(screen.getByRole('list', { name: '5 open loops' })).toBeInTheDocument()
+    expect(screen.getAllByTestId('open-loop')).toHaveLength(INITIATIVE_LOOPS_FIXTURE.length)
+  })
+
+  it('labels a task loop with its target ref and a PR loop with its kind', () => {
+    render(<OpenLoops loops={INITIATIVE_LOOPS_FIXTURE} now={INITIATIVE_NOW} />)
+    const rows = screen.getAllByTestId('open-loop')
+    // n4 tracks AW-116; the PR-sweep loop (n3) carries the PR kind.
+    expect(within(rows[2]!).getByText('AW-116')).toBeInTheDocument()
+    expect(within(rows[1]!).getByText('PR')).toBeInTheDocument()
+  })
+
+  it('auto-links references in the loop text when linkers are supplied', () => {
+    const onPressTask = vi.fn()
+    render(
+      <OpenLoops
+        loops={INITIATIVE_LOOPS_FIXTURE}
+        now={INITIATIVE_NOW}
+        linkers={sessionLinkers({ onPressTask })}
+      />
+    )
+    // Row 3's text opens with an AW-22 ref; click the in-prose link, not the kind pill.
+    const proseRef = within(screen.getAllByTestId('open-loop')[3]!).getAllByTestId(
+      'prose-ref-task'
+    )[0]!
+    fireEvent.click(proseRef)
+    expect(onPressTask).toHaveBeenCalledWith('AW-22')
+  })
+
+  it('singularises the heading and shows the empty state for no loops', () => {
+    const { rerender } = render(
+      <OpenLoops loops={INITIATIVE_LOOPS_FIXTURE.slice(0, 1)} now={INITIATIVE_NOW} />
+    )
+    expect(screen.getByText('1 open loop')).toBeInTheDocument()
+    rerender(<OpenLoops loops={[]} now={INITIATIVE_NOW} />)
+    expect(screen.getByText('No open loops')).toBeInTheDocument()
+    expect(screen.queryByTestId('open-loop')).not.toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(
+      <OpenLoops
+        loops={INITIATIVE_LOOPS_FIXTURE}
+        now={INITIATIVE_NOW}
+        linkers={sessionLinkers({ onPressTask: () => {} })}
+      />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/custom/ActiveWork/OpenLoops.tsx

@@ -0,0 +1,107 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { Divider } from '../../ui/divider'
+import { Pill, type PillColor } from '../../ui/pill'
+import { Typography } from '../Typography'
+import { MarkdownProse, type ProseLinker } from '../Prose'
+import { Eyebrow } from './Eyebrow'
+import { formatTaskAge } from './format-time'
+
+// RN's Role union omits 'list'/'listitem'; RNW passes them through to the DOM.
+const LIST_ROLE = 'list' as ViewProps['role']
+const LISTITEM_ROLE = 'listitem' as ViewProps['role']
+
+/** What a loop is about, so the reader can colour and label its kind. */
+export type OpenLoopKind = 'task' | 'pr' | 'prose'
+
+/** One hanging thread from the session ledger, as the reader consumes it. */
+export interface OpenLoop {
+  /** Stable `<session-file-stem>#<id>` reference. */
+  ref: string
+  kind: OpenLoopKind
+  /** The loop text, auto-linked like any prose. */
+  text: string
+  /** The task this loop tracks, when kind is `task`. */
+  targetRef?: string
+  /** ISO time the loop was opened; drives the age label. */
+  openedAt?: string
+  /** The session file that opened it. */
+  sessionFile?: string
+}
+
+const KIND_META: Record<OpenLoopKind, { label: string; color: PillColor }> = {
+  task: { label: 'task', color: 'primary' },
+  pr: { label: 'PR', color: 'info' },
+  prose: { label: 'note', color: 'default' },
+}
+
+export interface OpenLoopsProps {
+  loops: OpenLoop[]
+  /** Reference instant for the age labels, injected so renders are deterministic. */
+  now: number
+  /** Reference patterns to auto-link in each loop's text. */
+  linkers?: ProseLinker[]
+  /** Heading over the list. Defaults to the loop count. */
+  label?: string
+  /** Rendered when there are no open loops. */
+  emptyLabel?: string
+  className?: string
+}
+
+function LoopRow({ loop, now, linkers }: { loop: OpenLoop; now: number; linkers: ProseLinker[] }) {
+  const meta = KIND_META[loop.kind]
+  return (
+    <View className="gap-1 py-2" role={LISTITEM_ROLE} testID="open-loop">
+      <View className="flex-row items-center gap-2">
+        <Pill variant="subtle" color={meta.color} size="xs">
+          {loop.targetRef ?? meta.label}
+        </Pill>
+        {loop.openedAt ? (
+          <Typography variant="caption" className="leading-none text-text-tertiary">
+            {formatTaskAge(loop.openedAt, now)}
+          </Typography>
+        ) : null}
+      </View>
+      <MarkdownProse body={loop.text} linkers={linkers} />
+    </View>
+  )
+}
+
+/**
+ * OpenLoops — the initiative's hanging threads from the session ledger: each
+ * loop's kind, age and auto-linked text. This is the durable "current state"
+ * a session picks up, in place of a hand-maintained handoff document.
+ *
+ * Composes {@link Eyebrow}, {@link Pill}, {@link Divider} and
+ * {@link MarkdownProse}. Used by the initiative reader.
+ */
+export function OpenLoops({
+  loops,
+  now,
+  linkers = [],
+  label,
+  emptyLabel = 'No open loops',
+  className,
+}: OpenLoopsProps) {
+  const heading = label ?? `${loops.length} open ${loops.length === 1 ? 'loop' : 'loops'}`
+  return (
+    <View className={cn('gap-1', className)}>
+      <Eyebrow>{heading}</Eyebrow>
+      {loops.length === 0 ? (
+        <Typography variant="body2" className="py-2 text-text-tertiary">
+          {emptyLabel}
+        </Typography>
+      ) : (
+        <View role={LIST_ROLE} aria-label={heading}>
+          {loops.map((loop, i) => (
+            <View key={loop.ref}>
+              {i > 0 ? <Divider /> : null}
+              <LoopRow loop={loop} now={now} linkers={linkers} />
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}

package/src/components/custom/ActiveWork/PortfolioOverview.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Surface } from '../../ui/surface'
+import { PortfolioOverview } from './PortfolioOverview'
+
+const meta: Meta<typeof PortfolioOverview> = {
+  title: 'Custom/ActiveWork/PortfolioOverview',
+  component: PortfolioOverview,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Organism.** At-a-glance status across every tracked initiative: a KPI row ' +
+          'followed by initiative groups. Composes ' +
+          '[Card](?path=/docs/components-molecules-card--docs), ' +
+          '[Metric](?path=/docs/custom-metric--docs), ' +
+          '[Eyebrow](?path=/docs/components-molecules-eyebrow--docs), and ' +
+          '[InitiativeCard](?path=/docs/custom-activework-initiativecard--docs). ' +
+          'Presentational only — the caller supplies `stats` and `sections`.',
+      },
+    },
+  },
+  args: {
+    title: 'Portfolio',
+    subtitle: '2 initiatives · 6 open tasks',
+    stats: [
+      { value: '1', label: 'Focused' },
+      { value: '6', label: 'Open tasks' },
+      { value: '2', label: 'Initiatives' },
+      { value: '2', label: 'With open work' },
+    ],
+    sections: [
+      {
+        heading: 'Focused · by rank',
+        items: [
+          {
+            title: 'active-work — durable workspace state',
+            slug: 'active-work',
+            state: 'focused',
+            rank: 1,
+            shipTarget: '2026-Q3',
+            openCount: 4,
+            severityCounts: { critical: 0, high: 1, medium: 2, low: 1 },
+            topTask: { id: 'AW-6', title: 'Linear / Jira / Slack discovery sources' },
+          },
+        ],
+      },
+      {
+        heading: 'Backburner',
+        items: [
+          {
+            title: 'Computer organization — review legacy project dirs',
+            slug: 'computer-organization',
+            state: 'backburner',
+            openCount: 2,
+            severityCounts: { critical: 0, high: 0, medium: 0, low: 2 },
+            topTask: { id: 'CO-1', title: 'Review ~/Documents/projects/agents-skills' },
+          },
+        ],
+      },
+    ],
+  },
+}
+export default meta
+type Story = StoryObj<typeof PortfolioOverview>
+
+export const Default: Story = {}
+
+export const NoOpenWork: Story = {
+  args: {
+    subtitle: '2 initiatives · 0 open tasks',
+    stats: [
+      { value: '0', label: 'Focused' },
+      { value: '0', label: 'Open tasks' },
+      { value: '2', label: 'Initiatives' },
+      { value: '0', label: 'With open work' },
+    ],
+    sections: [
+      {
+        heading: 'Backburner',
+        items: [
+          {
+            title: 'Audiobook app',
+            slug: 'audiobook',
+            state: 'backburner',
+            openCount: 0,
+            severityCounts: { critical: 0, high: 0, medium: 0, low: 0 },
+          },
+        ],
+      },
+    ],
+  },
+}

package/src/components/custom/ActiveWork/PortfolioOverview.test.tsx

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { PortfolioOverview } from './PortfolioOverview'
+
+const stats = [
+  { value: '1', label: 'Focused' },
+  { value: '4', label: 'Open tasks' },
+]
+
+const sections = [
+  {
+    heading: 'Focused · by rank',
+    items: [
+      {
+        title: 'active-work — durable workspace state',
+        slug: 'active-work',
+        state: 'focused' as const,
+        rank: 1,
+        openCount: 4,
+        severityCounts: { critical: 0, high: 1, medium: 2, low: 1 },
+        topTask: { id: 'AW-6', title: 'Discovery sources' },
+      },
+    ],
+  },
+  {
+    heading: 'Backburner',
+    items: [
+      {
+        title: 'Denver Rezzy',
+        slug: 'denver-rezzy',
+        state: 'backburner' as const,
+        openCount: 0,
+        severityCounts: { critical: 0, high: 0, medium: 0, low: 0 },
+      },
+    ],
+  },
+]
+
+describe('PortfolioOverview', () => {
+  it('renders the title, subtitle, and KPI stats', () => {
+    render(
+      <PortfolioOverview
+        title="Portfolio"
+        subtitle="1 initiative · 4 open tasks"
+        stats={stats}
+        sections={[]}
+      />
+    )
+    expect(screen.getByText('Portfolio')).toBeInTheDocument()
+    expect(screen.getByText('1 initiative · 4 open tasks')).toBeInTheDocument()
+    expect(screen.getByText('Focused')).toBeInTheDocument()
+    expect(screen.getByText('Open tasks')).toBeInTheDocument()
+  })
+
+  it('renders every section heading and its initiative cards', () => {
+    render(<PortfolioOverview title="Portfolio" stats={stats} sections={sections} />)
+    expect(screen.getByText('Focused · by rank')).toBeInTheDocument()
+    // "Backburner" appears twice: the section eyebrow and the card's StatusDot label.
+    expect(screen.getAllByText('Backburner').length).toBeGreaterThanOrEqual(2)
+    expect(screen.getByText('active-work — durable workspace state')).toBeInTheDocument()
+    expect(screen.getByText('Denver Rezzy')).toBeInTheDocument()
+  })
+
+  it('renders with no sections at all', () => {
+    render(<PortfolioOverview title="Portfolio" stats={stats} sections={[]} />)
+    expect(screen.getByText('Portfolio')).toBeInTheDocument()
+  })
+
+  it('omits the subtitle when none is given', () => {
+    render(<PortfolioOverview title="Portfolio" stats={stats} sections={[]} />)
+    expect(screen.queryByText(/open tasks$/)).not.toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <PortfolioOverview title="Portfolio" subtitle="Overview" stats={stats} sections={sections} />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})