@titan-design/react-ui 0.12.0 → 0.13.0

package/src/components/custom/Prose/README.md

@@ -0,0 +1,58 @@
+# `custom/Prose` — long-form text rendering
+
+One component. It exists because the ActiveWork readers display markdown written
+by humans and agents — briefs, session notes, open loops — and a `<Text>` per
+paragraph loses headings, bullets, emphasis and, critically, the domain
+references (`AW-124`, `#172`, a file path) that make that prose navigable.
+
+This README is the **index**: **composes ↓** and **used-by ↑**, so the tree
+navigates both ways. Counts come from
+[`src/arch/arch-graph.json`](../../../arch/arch-graph.json).
+
+## Dependency map
+
+| Member                          | Kind     | Composes ↓         | Used-by ↑                                                  |
+| ------------------------------- | -------- | ------------------ | ---------------------------------------------------------- |
+| `MarkdownProse`                 | molecule | `Typography`, `cn` | InitiativeBrief, OpenLoops, SessionDetail (all ActiveWork) |
+| `parseProseBlocks`              | pure fn  | —                  | `MarkdownProse`, and its own tests                         |
+| `ProseLinker` / `ProseLinkTone` | types    | —                  | every consumer that supplies reference patterns            |
+
+Four in-repo consumers, zero external — `keep-internal` in the arch graph. The
+parser is exported separately on purpose: block-splitting is the part worth
+testing directly, and it is testable without rendering.
+
+## The two halves
+
+**`parseProseBlocks(body)`** splits markdown into the five block kinds this
+renderer understands (`h1` `h2` `h3` `li` `p`). Consecutive text lines join into
+one paragraph and a blank line ends it; an indented line straight after a bullet
+continues that bullet; deeper headings flatten to `h3`, because session prose
+never needs more than three levels. It is pure, so it is unit-tested on its own.
+
+**`MarkdownProse`** renders those blocks and inline-links references. `linkers`
+is an ordered list of `{ id, pattern, tone, label, onPress }`; the renderer
+combines the patterns into one tokenizer, which is why **a `ProseLinker.pattern`
+must carry neither the `g` flag nor capture groups**. `tone` chooses how a
+reference reads: `brand` for the domain's own ids, `link` for cross-references,
+`muted` for asides. A linker with `onPress` becomes pressable and takes a link
+role; without one it is styled text, not an interactive element.
+
+## Reuse audit
+
+| Leaf                   | Should compose     | Status                                                                                                                                                                                    |
+| ---------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Headings and body copy | `Typography`       | **Closed.** `h1`/`h2` → `h5`/`h6`, `h3` → `subtitle2`, paragraphs and bullets → `body2`.                                                                                                  |
+| Bold and code spans    | `Typography`       | **Open, deliberately.** Inline spans are raw `<Text>` with `font-semibold` / `font-mono`, because they nest inside a parent `<Text>` run where a `Typography` block would break the flow. |
+| Bullet glyph           | a shared list mark | **Open.** The `•` is drawn inline. One consumer family, so no primitive is justified yet — revisit at the second.                                                                         |
+| Colour                 | semantic tokens    | **Closed.** `text-text-primary` / `text-brand-primary` throughout; the family is in the token-pure eslint error block.                                                                    |
+| Class merging          | `cn()`             | **Closed.**                                                                                                                                                                               |
+
+## Watch list
+
+- **The tokenizer contract is unenforced.** A `linkers` entry with a `g` flag or a
+  capture group breaks reference splitting at runtime with no type error. If a
+  third consumer arrives, validate in `MarkdownProse` rather than in each caller.
+- **Markdown coverage is intentionally partial** — no tables, links, images,
+  blockquotes or nested lists. Widen it only against a real document that needs
+  it; the parser's value is that it is small enough to read.
+- **Zero external consumers.** Prop changes are cheap while that holds.

package/src/components/custom/Prose/index.ts

@@ -0,0 +1 @@
+export * from './MarkdownProse'

package/src/components/custom/Scatter/Scatter.stories.tsx

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Scatter, type ScatterDatum } from './Scatter'
 
 const meta: Meta<typeof Scatter> = {
-  title: 'Components/DataViz/Scatter',
+  title: 'Custom/Charts/Scatter',
   component: Scatter,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     width: { control: { type: 'range', min: 240, max: 800, step: 20 } },
     height: { control: { type: 'range', min: 180, max: 600, step: 20 } },
@@ -30,7 +30,14 @@ export const Default: Story = {
     width: 480,
     height: 340,
     diagonal: true,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -39,7 +46,14 @@ export const NoDiagonal: Story = {
     data: mainSequence,
     width: 480,
     height: 340,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -50,7 +64,14 @@ export const Selected: Story = {
     height: 340,
     diagonal: true,
     selectedId: 'utils',
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -67,11 +88,21 @@ export const SinglePoint: Story = {
 /** An outlier far outside the main cluster, kept legible by an explicit domain. */
 export const Outlier: Story = {
   args: {
-    data: [...mainSequence, { id: 'legacy', x: 0.98, y: 0.98, r: 16, color: '#F83030', label: 'legacy.ts' }],
+    data: [
+      ...mainSequence,
+      { id: 'legacy', x: 0.98, y: 0.98, r: 16, color: '#F83030', label: 'legacy.ts' },
+    ],
     width: 480,
     height: 340,
     diagonal: true,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -80,6 +111,13 @@ export const Empty: Story = {
     data: [],
     width: 400,
     height: 300,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }

package/src/components/custom/Scatter/Scatter.test.tsx

@@ -68,7 +68,7 @@ describe('Scatter', () => {
         width={200}
         height={200}
         axis={{ xMin: 0, xMax: 1000, yMin: 0, yMax: 1000 }}
-      />,
+      />
     )
     expect(screen.getByTestId('scatter-point-big')).toBeInTheDocument()
   })
@@ -83,7 +83,7 @@ describe('Scatter', () => {
 
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <Scatter {...base} diagonal axis={{ xLabel: 'I', yLabel: 'A' }} selectedId="b" />,
+        <Scatter {...base} diagonal axis={{ xLabel: 'I', yLabel: 'A' }} selectedId="b" />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

package/src/components/custom/Scatter/Scatter.tsx

@@ -86,8 +86,20 @@ function formatTick(v: number): string {
 
 /** A single straight segment drawn as one rotated View (SVG-free). */
 function LineSegment({
-  x1, y1, x2, y2, color, testID,
-}: { x1: number; y1: number; x2: number; y2: number; color: string; testID: string }) {
+  x1,
+  y1,
+  x2,
+  y2,
+  color,
+  testID,
+}: {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+  color: string
+  testID: string
+}) {
   const dx = x2 - x1
   const dy = y2 - y1
   const length = Math.sqrt(dx * dx + dy * dy)
@@ -132,8 +144,16 @@ export function Scatter({
 }: ScatterProps) {
   const innerW = Math.max(1, width - PLOT_LEFT - PLOT_RIGHT)
   const innerH = Math.max(1, height - PLOT_TOP - PLOT_BOTTOM)
-  const xd = domainOf(data.map((d) => d.x), axis.xMin, axis.xMax)
-  const yd = domainOf(data.map((d) => d.y), axis.yMin, axis.yMax)
+  const xd = domainOf(
+    data.map((d) => d.x),
+    axis.xMin,
+    axis.xMax
+  )
+  const yd = domainOf(
+    data.map((d) => d.y),
+    axis.yMin,
+    axis.yMax
+  )
 
   const toX = (x: number) => PLOT_LEFT + ((x - xd.min) / (xd.max - xd.min)) * innerW
   const toY = (y: number) => PLOT_TOP + (1 - (y - yd.min) / (yd.max - yd.min)) * innerH
@@ -164,9 +184,25 @@ export function Scatter({
               key={`y-${i}`}
               accessibilityElementsHidden
               testID="scatter-gridline-y"
-              style={{ position: 'absolute', left: PLOT_LEFT, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE }}
+              style={{
+                position: 'absolute',
+                left: PLOT_LEFT,
+                width: innerW,
+                top: y,
+                height: 1,
+                backgroundColor: GRID_LINE,
+              }}
             >
-              <Text className="text-[9px] text-text-tertiary" style={{ position: 'absolute', left: -PLOT_LEFT, top: -6, width: PLOT_LEFT - 6, textAlign: 'right' }}>
+              <Text
+                className="text-[9px] text-text-tertiary"
+                style={{
+                  position: 'absolute',
+                  left: -PLOT_LEFT,
+                  top: -6,
+                  width: PLOT_LEFT - 6,
+                  textAlign: 'right',
+                }}
+              >
                 {formatTick(t)}
               </Text>
             </View>
@@ -179,9 +215,25 @@ export function Scatter({
               key={`x-${i}`}
               accessibilityElementsHidden
               testID="scatter-gridline-x"
-              style={{ position: 'absolute', top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE }}
+              style={{
+                position: 'absolute',
+                top: PLOT_TOP,
+                height: innerH,
+                left: x,
+                width: 1,
+                backgroundColor: GRID_LINE,
+              }}
             >
-              <Text className="text-[9px] text-text-tertiary" style={{ position: 'absolute', top: innerH + 4, left: -16, width: 32, textAlign: 'center' }}>
+              <Text
+                className="text-[9px] text-text-tertiary"
+                style={{
+                  position: 'absolute',
+                  top: innerH + 4,
+                  left: -16,
+                  width: 32,
+                  textAlign: 'center',
+                }}
+              >
                 {formatTick(t)}
               </Text>
             </View>
@@ -189,8 +241,28 @@ export function Scatter({
         })}
 
         {/* Axis frame (left + bottom). */}
-        <View accessibilityElementsHidden style={{ position: 'absolute', left: PLOT_LEFT, top: PLOT_TOP, width: 1, height: innerH, backgroundColor: AXIS_LINE }} />
-        <View accessibilityElementsHidden style={{ position: 'absolute', left: PLOT_LEFT, top: PLOT_TOP + innerH, width: innerW, height: 1, backgroundColor: AXIS_LINE }} />
+        <View
+          accessibilityElementsHidden
+          style={{
+            position: 'absolute',
+            left: PLOT_LEFT,
+            top: PLOT_TOP,
+            width: 1,
+            height: innerH,
+            backgroundColor: AXIS_LINE,
+          }}
+        />
+        <View
+          accessibilityElementsHidden
+          style={{
+            position: 'absolute',
+            left: PLOT_LEFT,
+            top: PLOT_TOP + innerH,
+            width: innerW,
+            height: 1,
+            backgroundColor: AXIS_LINE,
+          }}
+        />
 
         {diagonal && (
           <LineSegment
@@ -204,19 +276,44 @@ export function Scatter({
         )}
 
         {axis.xLabel && (
-          <Text testID="scatter-x-label" className="text-[10px] font-semibold text-text-secondary" style={{ position: 'absolute', left: PLOT_LEFT, width: innerW, bottom: 2, textAlign: 'center' }}>
+          <Text
+            testID="scatter-x-label"
+            className="text-[10px] font-semibold text-text-secondary"
+            style={{
+              position: 'absolute',
+              left: PLOT_LEFT,
+              width: innerW,
+              bottom: 2,
+              textAlign: 'center',
+            }}
+          >
             {axis.xLabel}
           </Text>
         )}
         {axis.yLabel && (
-          <Text testID="scatter-y-label" className="text-[10px] font-semibold text-text-secondary" style={{ position: 'absolute', left: -innerH / 2 + 6, top: PLOT_TOP + innerH / 2, width: innerH, textAlign: 'center', transformOrigin: '50% 50%', transform: [{ rotate: '-90deg' }] }}>
+          <Text
+            testID="scatter-y-label"
+            className="text-[10px] font-semibold text-text-secondary"
+            style={{
+              position: 'absolute',
+              left: -innerH / 2 + 6,
+              top: PLOT_TOP + innerH / 2,
+              width: innerH,
+              textAlign: 'center',
+              transformOrigin: '50% 50%',
+              transform: [{ rotate: '-90deg' }],
+            }}
+          >
             {axis.yLabel}
           </Text>
         )}
       </View>
 
       {/* Interactive point overlay (kept out of the image-role canvas). */}
-      <View style={{ position: 'absolute', top: 0, left: 0, width, height }} testID="scatter-points">
+      <View
+        style={{ position: 'absolute', top: 0, left: 0, width, height }}
+        testID="scatter-points"
+      >
         {points.map((p) => {
           const selected = p.datum.id === selectedId
           const showLabel = p.datum.label && (selected || p.radius >= 10)
@@ -244,7 +341,12 @@ export function Scatter({
                 <Text
                   numberOfLines={1}
                   className="text-[9px] font-semibold text-text-primary"
-                  style={{ position: 'absolute', left: p.radius * 2 + 3, top: p.radius - 6, width: 80 }}
+                  style={{
+                    position: 'absolute',
+                    left: p.radius * 2 + 3,
+                    top: p.radius - 6,
+                    width: 80,
+                  }}
                 >
                   {p.datum.label}
                 </Text>

package/src/components/custom/Sidebar/Sidebar.stories.tsx

@@ -13,7 +13,16 @@ import {
 const meta: Meta<typeof Sidebar> = {
   title: 'Components/Organisms/Sidebar',
   component: Sidebar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Composes RN primitives only (View / Pressable / ScrollView) plus caller-supplied ' +
+          'icon components. The seven parts share collapsed and active state through a context.',
+      },
+    },
+  },
   argTypes: {
     isCollapsed: {
       control: 'boolean',
@@ -46,27 +55,51 @@ type Story = StoryObj<typeof Sidebar>
 
 // Simple icon components for demos
 function HomeIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#8962;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#8962;
+    </Text>
+  )
 }
 
 function ChartIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9632;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9632;
+    </Text>
+  )
 }
 
 function UserIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9786;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9786;
+    </Text>
+  )
 }
 
 function GearIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9881;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9881;
+    </Text>
+  )
 }
 
 function MailIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#9993;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#9993;
+    </Text>
+  )
 }
 
 function FileIcon({ size = 20, className }: { size?: number; className?: string }) {
-  return <Text style={{ fontSize: size }} className={className}>&#128196;</Text>
+  return (
+    <Text style={{ fontSize: size }} className={className}>
+      &#128196;
+    </Text>
+  )
 }
 
 export const Default: Story = {

package/src/components/custom/Sidebar/Sidebar.test.tsx

@@ -12,7 +12,11 @@ import {
 } from './Sidebar'
 
 function MockIcon({ size, className }: { size?: number; className?: string }) {
-  return <span data-testid="mock-icon" data-size={size} className={className}>I</span>
+  return (
+    <span data-testid="mock-icon" data-size={size} className={className}>
+      I
+    </span>
+  )
 }
 
 function renderSidebar(props: Partial<React.ComponentProps<typeof Sidebar>> = {}) {

package/src/components/custom/Sidebar/Sidebar.tsx

@@ -1,5 +1,12 @@
 import React, { createContext, useContext } from 'react'
-import { View, Text, Pressable, ScrollView, type ViewProps, type PressableProps } from 'react-native'
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  type ViewProps,
+  type PressableProps,
+} from 'react-native'
 import { cn } from '../../../utils/cn'
 
 interface SidebarContextType {
@@ -85,9 +92,7 @@ export interface SidebarHeaderProps {
  */
 export function SidebarHeader({ children, className }: SidebarHeaderProps) {
   return (
-    <View className={cn('px-4 py-4 border-b border-hairline-subtle', className)}>
-      {children}
-    </View>
+    <View className={cn('px-4 py-4 border-b border-hairline-subtle', className)}>{children}</View>
   )
 }
 
@@ -101,10 +106,7 @@ export interface SidebarContentProps {
  */
 export function SidebarContent({ children, className }: SidebarContentProps) {
   return (
-    <ScrollView
-      className={cn('flex-1', className)}
-      showsVerticalScrollIndicator={false}
-    >
+    <ScrollView className={cn('flex-1', className)} showsVerticalScrollIndicator={false}>
       {children}
     </ScrollView>
   )
@@ -120,9 +122,7 @@ export interface SidebarFooterProps {
  */
 export function SidebarFooter({ children, className }: SidebarFooterProps) {
   return (
-    <View className={cn('px-2 py-4 border-t border-hairline-subtle', className)}>
-      {children}
-    </View>
+    <View className={cn('px-2 py-4 border-t border-hairline-subtle', className)}>{children}</View>
   )
 }
 
@@ -146,9 +146,7 @@ export function SidebarSection({ title, children, className }: SidebarSectionPro
           {title}
         </Text>
       )}
-      <View className="gap-0.5">
-        {children}
-      </View>
+      <View className="gap-0.5">{children}</View>
     </View>
   )
 }
@@ -209,12 +207,7 @@ export function SidebarItem({
       {...props}
     >
       {Icon && (
-        <Icon
-          size={20}
-          className={cn(
-            isActive ? 'text-brand-primary' : 'text-text-secondary'
-          )}
-        />
+        <Icon size={20} className={cn(isActive ? 'text-brand-primary' : 'text-text-secondary')} />
       )}
       {!isCollapsed && (
         <>
@@ -227,16 +220,8 @@ export function SidebarItem({
           >
             {label}
           </Text>
-          {badge && (
-            <View className="ml-auto">
-              {badge}
-            </View>
-          )}
-          {hasChildren && (
-            <Text className="text-text-tertiary ml-1">
-              {isExpanded ? '▼' : '▶'}
-            </Text>
-          )}
+          {badge && <View className="ml-auto">{badge}</View>}
+          {hasChildren && <Text className="text-text-tertiary ml-1">{isExpanded ? '▼' : '▶'}</Text>}
         </>
       )}
     </Pressable>
@@ -251,7 +236,5 @@ export interface SidebarDividerProps {
  * Divider between sidebar sections.
  */
 export function SidebarDivider({ className }: SidebarDividerProps) {
-  return (
-    <View className={cn('h-px mx-4 my-2 bg-hairline-subtle', className)} />
-  )
+  return <View className={cn('h-px mx-4 my-2 bg-hairline-subtle', className)} />
 }