@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { InitiativeBrief, splitBriefSections } from './InitiativeBrief'
+import { INITIATIVE_BRIEF_FIXTURE } from './initiative-fixture'
+
+describe('splitBriefSections', () => {
+  it('drops the leading # title and splits on ## headings', () => {
+    const sections = splitBriefSections('# Title\n\n## One\na\n\n## Two\nb')
+    expect(sections).toEqual([
+      { heading: 'One', body: 'a' },
+      { heading: 'Two', body: 'b' },
+    ])
+  })
+
+  it('keeps prose before the first ## as a lead section with no heading', () => {
+    const sections = splitBriefSections('# Title\nintro line\n\n## One\na')
+    expect(sections[0]).toEqual({ heading: '', body: 'intro line' })
+    expect(sections[1]!.heading).toBe('One')
+  })
+})
+
+describe('InitiativeBrief', () => {
+  it('opens only the first section, showing its body and the others as headings', () => {
+    render(<InitiativeBrief brief={INITIATIVE_BRIEF_FIXTURE} />)
+    expect(screen.getByText('Why this exists')).toBeInTheDocument()
+    expect(screen.getByText(/Engineering work spans days/)).toBeInTheDocument()
+    expect(screen.getByText('Stakeholders')).toBeInTheDocument()
+    expect(screen.queryByText(/@hjewkes/)).not.toBeInTheDocument()
+  })
+
+  it('opens a section on its heading and closes the previously open one', () => {
+    render(<InitiativeBrief brief={INITIATIVE_BRIEF_FIXTURE} />)
+    fireEvent.click(screen.getByText('Stakeholders'))
+    expect(screen.getByText(/@hjewkes/)).toBeInTheDocument()
+    expect(screen.queryByText(/Engineering work spans days/)).not.toBeInTheDocument()
+  })
+
+  it('steps through the sections with the prev/next controls', () => {
+    render(<InitiativeBrief brief={INITIATIVE_BRIEF_FIXTURE} />)
+    expect(screen.getByText(/1 \//)).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Next section' }))
+    // The second section is now open; the first's body is gone.
+    expect(screen.queryByText(/Engineering work spans days/)).not.toBeInTheDocument()
+    expect(screen.getByText(/2 \//)).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Previous section' }))
+    expect(screen.getByText(/Engineering work spans days/)).toBeInTheDocument()
+  })
+
+  it('disables prev on the first section', () => {
+    render(<InitiativeBrief brief={INITIATIVE_BRIEF_FIXTURE} />)
+    expect(screen.getByRole('button', { name: 'Previous section' })).toHaveAttribute(
+      'aria-disabled',
+      'true'
+    )
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<InitiativeBrief brief={INITIATIVE_BRIEF_FIXTURE} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -0,0 +1,182 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, useState } from 'react'
+import { Pressable, View } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { Typography } from '../Typography'
+import { MarkdownProse, type ProseLinker } from '../Prose'
+import { Eyebrow } from './Eyebrow'
+
+/** An initiative's durable brief, as the reader consumes it. */
+export interface InitiativeBriefData {
+  slug: string
+  title: string
+  state: string
+  rank?: number | null
+  shipTarget?: string | null
+  updated: string
+  /** The brief's markdown body. */
+  body: string
+}
+
+/** A brief section: an `##` heading and the prose beneath it, up to the next `##`. */
+export interface BriefSection {
+  heading: string
+  body: string
+}
+
+export interface InitiativeBriefProps {
+  brief: InitiativeBriefData
+  /** Reference patterns to auto-link in the prose. */
+  linkers?: ProseLinker[]
+  className?: string
+}
+
+/**
+ * Splits a brief into its `##` sections, dropping the leading `#` title (the
+ * header already shows it). Anything before the first `##` becomes a leading
+ * section with an empty heading, so a brief with no sections still renders.
+ */
+export function splitBriefSections(body: string): BriefSection[] {
+  const withoutTitle = body.replace(/^\s*#\s+.*(?:\n|$)/, '')
+  const sections: BriefSection[] = []
+  let current: BriefSection | null = null
+  for (const line of withoutTitle.split('\n')) {
+    const heading = line.match(/^##\s+(.*)/)
+    if (heading) {
+      if (current) sections.push(current)
+      current = { heading: heading[1]!.trim(), body: '' }
+    } else if (current) {
+      current.body += `${line}\n`
+    } else if (line.trim()) {
+      current = { heading: '', body: `${line}\n` }
+    }
+  }
+  if (current) sections.push(current)
+  return sections.map((s) => ({ ...s, body: s.body.trim() }))
+}
+
+/** A prev/next step control: a glyph in a small pressable, muted when it cannot move. */
+function StepButton({
+  glyph,
+  label,
+  disabled,
+  onPress,
+}: {
+  glyph: string
+  label: string
+  disabled: boolean
+  onPress: () => void
+}) {
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      className={cn(
+        'h-6 w-6 items-center justify-center rounded-md',
+        disabled ? '' : 'web:hover:bg-interactive-hover active:bg-interactive-active'
+      )}
+    >
+      {/* Was a tertiary text token under an opacity modifier, which emitted no rule (VW-308). */}
+      <Typography
+        variant="body2"
+        className={cn('leading-none', disabled ? 'text-text-disabled' : 'text-text-secondary')}
+      >
+        {glyph}
+      </Typography>
+    </Pressable>
+  )
+}
+
+function SectionHeading({
+  heading,
+  open,
+  onPress,
+}: {
+  heading: string
+  open: boolean
+  onPress: () => void
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: open }}
+      testID="brief-section-heading"
+      className="flex-row items-center justify-between py-1.5"
+    >
+      <Typography
+        variant="subtitle2"
+        className={cn('font-bold', open ? 'text-text-primary' : 'text-text-secondary')}
+      >
+        {heading}
+      </Typography>
+      <Typography variant="caption" className="leading-none text-text-tertiary">
+        {open ? '▲' : '▼'}
+      </Typography>
+    </Pressable>
+  )
+}
+
+/**
+ * InitiativeBrief — an initiative's brief prose as a single-open accordion of
+ * its `##` sections: click any heading to open it, or step through them with
+ * the prev/next controls in the header, which close the current section and
+ * open the next. Prose before the first `##` always shows. References
+ * auto-link from `linkers`.
+ *
+ * Composes {@link Eyebrow}, {@link MarkdownProse} and {@link Typography}. Used
+ * by the initiative reader.
+ */
+export function InitiativeBrief({ brief, linkers = [], className }: InitiativeBriefProps) {
+  const sections = useMemo(() => splitBriefSections(brief.body), [brief.body])
+  const lead = sections.filter((s) => !s.heading)
+  const steps = sections.filter((s) => s.heading)
+  const [open, setOpen] = useState(0)
+  const clamped = Math.min(open, steps.length - 1)
+  return (
+    <View className={cn('gap-1', className)} testID="initiative-brief">
+      <View className="flex-row items-center justify-between">
+        <Eyebrow>Brief</Eyebrow>
+        {steps.length > 1 ? (
+          <View className="flex-row items-center gap-1">
+            <Typography variant="caption" className="leading-none text-text-tertiary">
+              {`${clamped + 1} / ${steps.length}`}
+            </Typography>
+            <StepButton
+              glyph="‹"
+              label="Previous section"
+              disabled={clamped <= 0}
+              onPress={() => setOpen(clamped - 1)}
+            />
+            <StepButton
+              glyph="›"
+              label="Next section"
+              disabled={clamped >= steps.length - 1}
+              onPress={() => setOpen(clamped + 1)}
+            />
+          </View>
+        ) : null}
+      </View>
+      {lead.map((section, i) => (
+        <MarkdownProse key={`lead-${i}`} body={section.body} linkers={linkers} />
+      ))}
+      {steps.map((section, i) => (
+        <View key={section.heading}>
+          <SectionHeading
+            heading={section.heading}
+            open={i === clamped}
+            onPress={() => setOpen(i)}
+          />
+          {i === clamped ? (
+            <View className="pb-1">
+              <MarkdownProse body={section.body} linkers={linkers} />
+            </View>
+          ) : null}
+        </View>
+      ))}
+    </View>
+  )
+}

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

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Surface } from '../../ui/surface'
+import { InitiativeCard } from './InitiativeCard'
+
+const meta: Meta<typeof InitiativeCard> = {
+  title: 'Custom/ActiveWork/InitiativeCard',
+  component: InitiativeCard,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    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' },
+  },
+  argTypes: {
+    state: { control: 'select', options: ['focused', 'backburner', 'paused', 'done'] },
+    rank: { control: 'number' },
+    shipTarget: { control: 'text' },
+    openCount: { control: 'number' },
+    severityCounts: { control: 'object' },
+    topTask: { control: 'object' },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Card.** An at-a-glance summary of one initiative: state, rank, open-task ' +
+          'count, a severity-mix bar, and its top-priority open task. Composes ' +
+          '[Card](?path=/docs/components-molecules-card--docs), ' +
+          '[Pill](?path=/docs/components-atoms-pill--docs), StatusDot, and SegmentedBar ' +
+          '(from the Workout family). Used by ' +
+          '[PortfolioOverview](?path=/docs/custom-activework-portfoliooverview--docs).',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof InitiativeCard>
+
+export const Default: Story = {}
+
+export const NoOpenTasks: Story = {
+  args: {
+    state: 'done',
+    rank: undefined,
+    openCount: 0,
+    severityCounts: { critical: 0, high: 0, medium: 0, low: 0 },
+    topTask: undefined,
+  },
+}
+
+export const Backburner: Story = {
+  args: {
+    state: 'backburner',
+    rank: undefined,
+    shipTarget: undefined,
+    openCount: 2,
+    severityCounts: { critical: 0, high: 0, medium: 0, low: 2 },
+    topTask: { id: 'CO-1', title: 'Review ~/Documents/projects/agents-skills — archived' },
+  },
+}

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

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { InitiativeCard, type InitiativeState } from './InitiativeCard'
+
+const base = {
+  title: 'active-work — durable workspace state',
+  slug: 'active-work',
+  openCount: 4,
+  severityCounts: { critical: 0, high: 1, medium: 2, low: 1 },
+}
+
+describe('InitiativeCard', () => {
+  it('renders title, slug, and open count', () => {
+    render(<InitiativeCard {...base} state="focused" />)
+    expect(screen.getByText(base.title)).toBeInTheDocument()
+    expect(screen.getByText(base.slug)).toBeInTheDocument()
+    expect(screen.getByText('4 open')).toBeInTheDocument()
+  })
+
+  it('renders a rank pill only when rank is given', () => {
+    const { rerender } = render(<InitiativeCard {...base} state="focused" rank={1} />)
+    expect(screen.getByText('#1')).toBeInTheDocument()
+    rerender(<InitiativeCard {...base} state="focused" />)
+    expect(screen.queryByText('#1')).not.toBeInTheDocument()
+  })
+
+  it('renders the top task when given', () => {
+    render(
+      <InitiativeCard
+        {...base}
+        state="focused"
+        topTask={{ id: 'AW-6', title: 'Discovery sources' }}
+      />
+    )
+    expect(screen.getByText('AW-6')).toBeInTheDocument()
+    expect(screen.getByText('Discovery sources')).toBeInTheDocument()
+  })
+
+  it('renders a fallback when there is no top task', () => {
+    render(<InitiativeCard {...base} state="focused" topTask={undefined} />)
+    expect(screen.getByText('no open tasks')).toBeInTheDocument()
+  })
+
+  it('labels every lifecycle state', () => {
+    const states: InitiativeState[] = ['focused', 'backburner', 'paused', 'done']
+    for (const state of states) {
+      const { unmount } = render(<InitiativeCard {...base} state={state} />)
+      unmount()
+    }
+  })
+
+  it('omits the severity bar when all counts are zero', () => {
+    render(
+      <InitiativeCard
+        {...base}
+        state="done"
+        severityCounts={{ critical: 0, high: 0, medium: 0, low: 0 }}
+      />
+    )
+    expect(screen.queryByTestId('segmented-bar-segment')).not.toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<InitiativeCard {...base} state="focused" rank={1} />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -0,0 +1,136 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, type ViewProps } from 'react-native'
+import { Card } from '../../ui/card'
+import { Pill } from '../../ui/pill'
+import { StatusDot, type StatusDotVariant } from '../Workout/StatusDot'
+import { SegmentedBar, type SegmentedBarSegment } from '../Workout/SegmentedBar'
+import { Typography } from '../Typography'
+import { SEVERITY_BAR_COLOR, SEVERITY_ORDER, type TaskSeverity } from './SeverityLabel'
+
+export type InitiativeState = 'focused' | 'backburner' | 'paused' | 'done'
+
+/** Initiative state → label + {@link StatusDot} variant. One owner; the initiative header reads it too. */
+export const INITIATIVE_STATE_META: Record<
+  InitiativeState,
+  { label: string; dot: StatusDotVariant }
+> = {
+  focused: { label: 'Focused', dot: 'on-track' },
+  backburner: { label: 'Backburner', dot: 'future' },
+  paused: { label: 'Paused', dot: 'deviation' },
+  done: { label: 'Done', dot: 'success' },
+}
+
+const STATE_META = INITIATIVE_STATE_META
+
+export interface InitiativeCardTopTask {
+  id: string
+  title: string
+}
+
+export interface InitiativeCardProps extends ViewProps {
+  /** Initiative title, e.g. "active-work — durable workspace state". */
+  title: string
+  /** Short slug shown under the title, e.g. "active-work". */
+  slug: string
+  /** Lifecycle state — drives the status dot and card accent. */
+  state: InitiativeState
+  /** Focused rank (1-based). Omit for non-ranked states. */
+  rank?: number
+  /** Ship-target label, e.g. "2026-Q3". */
+  shipTarget?: string
+  /** Count of open tasks for this initiative. */
+  openCount: number
+  /** Open-task counts by severity, driving the segmented mix bar. Bar is omitted when all-zero. */
+  severityCounts: Record<TaskSeverity, number>
+  /** The highest-priority open task, if any. Renders "no open tasks" when omitted. */
+  topTask?: InitiativeCardTopTask
+  className?: string
+}
+
+/**
+ * InitiativeCard — an at-a-glance summary of one active-work initiative: state,
+ * rank, open-task count, a severity-mix bar, and its top-priority open task.
+ * Composes Card / Pill / StatusDot / SegmentedBar / Typography — never
+ * hand-rolled. Used by {@link PortfolioOverview}.
+ *
+ * Sits on the card plane above the page like every other content card; the
+ * `accent` stripe is reserved for the focused state, where it carries meaning.
+ */
+export function InitiativeCard({
+  title,
+  slug,
+  state,
+  rank,
+  shipTarget,
+  openCount,
+  severityCounts,
+  topTask,
+  className,
+  ...props
+}: InitiativeCardProps) {
+  const meta = STATE_META[state]
+  const segments: SegmentedBarSegment[] = SEVERITY_ORDER.filter((k) => severityCounts[k] > 0).map(
+    (k) => ({ weight: severityCounts[k], color: SEVERITY_BAR_COLOR[k] })
+  )
+
+  return (
+    <Card
+      variant={state === 'focused' ? 'accent' : 'elevated'}
+      accentColor={state === 'focused' ? 'var(--color-brand-primary)' : undefined}
+      className={`w-[326px] gap-2.5 p-4 ${className ?? ''}`}
+      testID="initiative-card"
+      {...props}
+    >
+      <View className="flex-row items-start justify-between gap-2">
+        <View className="flex-1">
+          <Typography variant="subtitle2" className="text-sm font-bold text-text-primary">
+            {title}
+          </Typography>
+          <Typography variant="caption" className="text-xs text-text-tertiary">
+            {slug}
+          </Typography>
+        </View>
+        {rank ? (
+          <Pill variant="subtle" color="primary" size="xs">
+            {`#${rank}`}
+          </Pill>
+        ) : null}
+      </View>
+
+      <View className="flex-row items-center gap-3">
+        <StatusDot variant={meta.dot} size="sm" label={meta.label} />
+        <Typography variant="mono" className="text-xs text-text-secondary">
+          {openCount} open
+        </Typography>
+        {shipTarget ? (
+          <Typography variant="caption" className="text-xs text-text-tertiary">
+            {`ship ${shipTarget}`}
+          </Typography>
+        ) : null}
+      </View>
+
+      {segments.length > 0 ? (
+        <SegmentedBar segments={segments} height={5} gap={0} radius={9999} />
+      ) : null}
+
+      {topTask ? (
+        <View className="flex-row items-center gap-2">
+          <Typography variant="mono" className="text-xs text-brand-primary">
+            {topTask.id}
+          </Typography>
+          <Typography
+            variant="body2"
+            numberOfLines={1}
+            className="flex-1 text-xs text-text-secondary"
+          >
+            {topTask.title}
+          </Typography>
+        </View>
+      ) : (
+        <Typography variant="caption" className="text-xs text-text-tertiary">
+          no open tasks
+        </Typography>
+      )}
+    </Card>
+  )
+}

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Surface } from '../../ui/surface'
+import { InitiativeHeader } from './InitiativeHeader'
+
+/**
+ * **InitiativeHeader** — an initiative's identity line: title, slug, state,
+ * rank, ship target and last-touched date.
+ *
+ * Composes `StatusDot` · `Pill` · `DateTime` · `Typography`. Shares the state
+ * vocabulary with `InitiativeCard`.
+ */
+const meta: Meta<typeof InitiativeHeader> = {
+  title: 'Custom/ActiveWork/InitiativeHeader',
+  component: InitiativeHeader,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: {
+    title: 'active-work — durable workspace state',
+    slug: 'active-work',
+    state: 'focused',
+    rank: 1,
+    shipTarget: '2026-Q3',
+    updated: '2026-07-12',
+  },
+  argTypes: {
+    state: { control: 'inline-radio', options: ['focused', 'backburner', 'paused', 'done'] },
+  },
+  decorators: [
+    (Story) => (
+      <Surface level="base" className="min-h-screen w-full max-w-[760px] p-6" testID="page-surface">
+        <Story />
+      </Surface>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **StatusDot** · **Pill** · **DateTime** · **Typography**. Used-by ↑ the Initiative Reader composition.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof InitiativeHeader>
+
+/** A ranked, focused initiative. */
+export const Default: Story = {}
+
+/** A backburner initiative: no rank, no ship target. */
+export const Backburner: Story = {
+  args: { state: 'backburner', rank: undefined, shipTarget: undefined },
+}
+
+/** A finished initiative. */
+export const Done: Story = {
+  args: { state: 'done', rank: undefined },
+}

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

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { InitiativeHeader } from './InitiativeHeader'
+
+describe('InitiativeHeader', () => {
+  it('renders the title, slug, state, rank, ship target and updated date', () => {
+    render(
+      <InitiativeHeader
+        title="active-work — durable workspace state"
+        slug="active-work"
+        state="focused"
+        rank={1}
+        shipTarget="2026-Q3"
+        updated="2026-07-12"
+      />
+    )
+    expect(screen.getByText('active-work — durable workspace state')).toBeInTheDocument()
+    expect(screen.getByText('active-work')).toBeInTheDocument()
+    expect(screen.getByText('Focused')).toBeInTheDocument()
+    expect(screen.getByText('#1')).toBeInTheDocument()
+    expect(screen.getByText('ship 2026-Q3')).toBeInTheDocument()
+    expect(screen.getByText('Jul 12, 2026')).toBeInTheDocument()
+  })
+
+  it('drops rank, ship target and updated when absent', () => {
+    render(<InitiativeHeader title="Quiet" slug="quiet" state="backburner" />)
+    expect(screen.getByText('Backburner')).toBeInTheDocument()
+    expect(screen.queryByText(/^#/)).not.toBeInTheDocument()
+    expect(screen.queryByText(/^ship/)).not.toBeInTheDocument()
+    expect(screen.queryByText('updated')).not.toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(
+      <InitiativeHeader title="active-work" slug="active-work" state="focused" rank={1} />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})