@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/report-view/ReportView.tsx

@@ -0,0 +1,201 @@
+import { ArrowDownRight, ArrowRight, ArrowUpRight, Lightbulb } from 'lucide-react'
+import { useId, useMemo, type ReactNode } from 'react'
+import { useLocale } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { useMessages } from '../../internal/provider'
+import { Chart } from '../chart/Chart'
+import { DataTable } from '../data-table/DataTable'
+import { EmptyState } from '../empty-state/EmptyState'
+import { rendererFor, type SectionContext } from './sections'
+import type { Report, ReportKpi, ReportSection, ReportTable } from './types'
+import { validateReport } from './validateReport'
+
+export type { Report, ReportColumnType, ReportIssue, ReportKpi, ReportSection, ReportTable, ReportTone } from './types'
+export { validateReport } from './validateReport'
+
+export interface ReportViewProps {
+  report: Report
+  /** Replaces the read-only summary of an `inputRequest` section (e.g. with SchemaRequestForm). */
+  renderInputRequest?: (data: ReportSection) => ReactNode
+  /** Replaces the default KPI tile (e.g. with MetricTile). */
+  renderKpi?: (kpi: ReportKpi, index: number) => ReactNode
+  /** Renders `markdown` sections (e.g. with MarkdownView); plain paragraphs otherwise. */
+  renderMarkdown?: (source: string) => ReactNode
+  /** Renders `regionMap` sections (e.g. with RegionMap); a list of codes otherwise. */
+  renderRegionMap?: (data: ReportSection) => ReactNode
+  /** Formatting locale; defaults to the provider locale. */
+  locale?: string
+  /** ISO 4217 code for currency columns and receipts without their own currency. */
+  currency?: string
+  className?: string
+}
+
+type Formatters = { number: (v: number) => string; money: (v: number, currency?: string) => string; percent: (v: number) => string }
+
+function useFormatters(locale: string, currency?: string): Formatters {
+  return useMemo(() => {
+    const plain = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 })
+    const pct = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 })
+    const moneyCache = new Map<string, Intl.NumberFormat>()
+    return {
+      number: (v) => plain.format(v),
+      percent: (v) => pct.format(v / 100),
+      money: (v, code = currency) => {
+        if (!code) return plain.format(v)
+        let f = moneyCache.get(code)
+        if (!f) {
+          f = new Intl.NumberFormat(locale, { style: 'currency', currency: code })
+          moneyCache.set(code, f)
+        }
+        return f.format(v)
+      },
+    }
+  }, [locale, currency])
+}
+
+function DefaultKpi({ kpi, fmt }: { kpi: ReportKpi; fmt: Formatters }) {
+  const value = typeof kpi.value === 'number' ? fmt.number(kpi.value) : kpi.value
+  const d = kpi.delta
+  const Trend = d === undefined || d === 0 ? ArrowRight : d > 0 ? ArrowUpRight : ArrowDownRight
+  // Sideways parts of the trend arrow follow the reading direction (up stays up).
+  return (
+    <div className="ty-report__kpi" data-tone={kpi.tone ?? 'neutral'}>
+      <span className="ty-report__kpi-label">{kpi.label}</span>
+      <span className="ty-report__kpi-value">
+        {value}
+        {kpi.unit ? <span className="ty-report__kpi-unit"> {kpi.unit}</span> : null}
+      </span>
+      {d !== undefined ? (
+        <span className="ty-report__kpi-delta">
+          <Trend className="ty-icon ty-mirror-rtl" aria-hidden="true" focusable="false" />
+          {`${d > 0 ? '+' : ''}${fmt.number(d)}${kpi.deltaUnit ?? ''}`}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+function TableBlock({ table, fmt, noValue, fallbackCaption }: { table: ReportTable; fmt: Formatters; noValue: string; fallbackCaption: string }) {
+  const cell = (raw: unknown, type: string | undefined): ReactNode => {
+    if (raw === null || raw === undefined || raw === '') {
+      return (
+        // §2.13: no dash as decoration; the empty-value word is shown in the muted tone.
+        <span className="ty-report__no-value">{noValue}</span>
+      )
+    }
+    if (typeof raw !== 'number') return String(raw)
+    if (type === 'currency') return fmt.money(raw)
+    if (type === 'percent') return fmt.percent(raw)
+    return type === 'number' ? fmt.number(raw) : String(raw)
+  }
+  return (
+    <DataTable
+      caption={table.title ?? fallbackCaption}
+      captionVisible={!!table.title}
+      columns={table.columns.map((c) => {
+        const numeric = c.type === 'number' || c.type === 'currency' || c.type === 'percent'
+        return { id: c.key, header: c.label, numeric, align: c.align ?? (numeric ? 'end' : 'start') }
+      })}
+      rows={table.rows.map((row, i) => ({
+        id: String(i),
+        cells: Object.fromEntries(table.columns.map((c) => [c.key, cell(row[c.key], c.type)])),
+      }))}
+    />
+  )
+}
+
+function metaPairs(meta: Report['meta']): Array<{ label: string; value: string }> {
+  if (!meta) return []
+  return Array.isArray(meta) ? meta : Object.entries(meta).map(([label, value]) => ({ label, value }))
+}
+
+/** Read-only renderer of a structured run report (spec: wave-2/report-view.md). */
+export function ReportView(props: ReportViewProps) {
+  const { report } = props
+  const copy = useMessages().report
+  const provided = useLocale().locale
+  const fmt = useFormatters(props.locale ?? provided, props.currency)
+  const titleId = useId()
+  const isEmpty = validateReport(report).some((i) => i.code === 'empty')
+
+  const ctx: SectionContext = {
+    copy,
+    number: fmt.number,
+    money: fmt.money,
+    renderMarkdown: props.renderMarkdown,
+    renderInputRequest: props.renderInputRequest,
+    renderRegionMap: props.renderRegionMap,
+  }
+  const kpis = report.kpis ?? []
+  const charts = report.charts ?? []
+  const sections = report.sections ?? []
+  const footer = metaPairs(report.meta)
+
+  return (
+    <section className={cx('ty-report', props.className)} aria-labelledby={titleId} data-layout={report.layout ?? 'grid'}>
+      <header className="ty-report__header">
+        <h2 id={titleId} className="ty-report__title">
+          {report.title}
+        </h2>
+        {report.subtitle ? <p className="ty-report__subtitle">{report.subtitle}</p> : null}
+      </header>
+
+      {isEmpty ? <EmptyState reason="custom" framing="section" title={copy.empty} description={copy.emptyHint} headingLevel={3} /> : null}
+
+      {kpis.length ? (
+        <div className="ty-report__kpis">
+          {kpis.map((k, i) => (
+            <div key={`${k.label}-${i}`} className="ty-report__kpi-cell">
+              {props.renderKpi ? props.renderKpi(k, i) : <DefaultKpi kpi={k} fmt={fmt} />}
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {charts.length ? (
+        <div className="ty-report__charts">
+          {charts.map((c, i) =>
+            Array.isArray(c.layers) && c.layers.length ? <Chart key={`${c.heading}-${i}`} figure={c} /> : null,
+          )}
+        </div>
+      ) : null}
+
+      {report.table && report.table.rows.length ? (
+        <TableBlock table={report.table} fmt={fmt} noValue={copy.noValue} fallbackCaption={report.title} />
+      ) : null}
+
+      {report.recommendation && report.recommendation.trim() ? (
+        <div className="ty-report__recommendation" role="note" aria-label={copy.recommendation}>
+          <Lightbulb className="ty-icon" aria-hidden="true" focusable="false" />
+          <div>
+            <p className="ty-report__recommendation-label">{copy.recommendation}</p>
+            <p className="ty-report__prose">{report.recommendation}</p>
+          </div>
+        </div>
+      ) : null}
+
+      {sections.map((s, i) => {
+        const render = rendererFor(s?.kind)
+        return (
+          <article key={s.id ?? i} className="ty-report__section" data-kind={String(s?.kind)}>
+            {s.title ? <h3 className="ty-report__section-title">{s.title}</h3> : null}
+            {render(s, ctx)}
+          </article>
+        )
+      })}
+
+      {footer.length ? (
+        <footer className="ty-report__footer">
+          <dl className="ty-report__pairs">
+            {footer.map((p) => (
+              <div key={p.label} className="ty-report__pair">
+                <dt>{p.label}</dt>
+                <dd>{p.value}</dd>
+              </div>
+            ))}
+          </dl>
+        </footer>
+      ) : null}
+    </section>
+  )
+}

package/src/components/report-view/sections.tsx

@@ -0,0 +1,281 @@
+// Renderers of the typed report sections, looked up by `kind`.
+import type { ReactNode } from 'react'
+import type { ChartsGeoMessages } from '../../internal/messages/charts-geo'
+import { ActorChip, type ActorKind } from '../actor-chip/ActorChip'
+import { InlineNotice } from '../inline-notice/InlineNotice'
+import { StatusPill } from '../status-pill/StatusPill'
+import type { ReportSection } from './types'
+
+export interface SectionContext {
+  copy: ChartsGeoMessages['report']
+  number: (v: number) => string
+  money: (v: number, currency?: string) => string
+  renderMarkdown?: (source: string) => ReactNode
+  renderInputRequest?: (data: ReportSection) => ReactNode
+  renderRegionMap?: (data: ReportSection) => ReactNode
+}
+
+type Renderer = (data: ReportSection, ctx: SectionContext) => ReactNode
+
+const text = (v: unknown): string => (v === null || v === undefined ? '' : String(v))
+const rows = (v: unknown): Array<Record<string, unknown>> => (Array.isArray(v) ? v.filter((x): x is Record<string, unknown> => !!x && typeof x === 'object') : [])
+const num = (v: unknown): number | null => (typeof v === 'number' && Number.isFinite(v) ? v : null)
+
+/** Key/value list shared by several kinds. */
+function Pairs({ pairs }: { pairs: Array<[string, ReactNode]> }) {
+  const shown = pairs.filter(([, v]) => v !== '' && v !== null && v !== undefined)
+  if (!shown.length) return null
+  return (
+    <dl className="ty-report__pairs">
+      {shown.map(([k, v]) => (
+        <div key={k} className="ty-report__pair">
+          <dt>{k}</dt>
+          <dd>{v}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+function fieldPairs(fields: unknown): Array<[string, ReactNode]> {
+  if (Array.isArray(fields)) return rows(fields).map((f) => [text(f.label), text(f.value)])
+  if (fields && typeof fields === 'object') return Object.entries(fields as Record<string, unknown>).map(([k, v]) => [k, text(v)])
+  return []
+}
+
+const entity: Renderer = (d) => (
+  <>
+    {d.status ? <StatusPill status={text(d.status)} label={text(d.statusLabel ?? d.status)} tone="neutral" size="small" /> : null}
+    {d.subtitle ? <p className="ty-report__muted">{text(d.subtitle)}</p> : null}
+    <Pairs pairs={fieldPairs(d.fields)} />
+  </>
+)
+
+const narrative: Renderer = (d, ctx) => {
+  const actor = d.actor && typeof d.actor === 'object' ? (d.actor as { kind?: ActorKind; name?: string }) : null
+  const seconds = num(d.durationSeconds)
+  return (
+    <>
+      {actor?.name || seconds !== null ? (
+        <div className="ty-report__byline">
+          {actor?.name ? <ActorChip kind={actor.kind ?? 'agent'} name={actor.name} compact /> : null}
+          {seconds !== null ? <span className="ty-report__muted">{ctx.copy.duration(seconds)}</span> : null}
+        </div>
+      ) : null}
+      {text(d.text ?? d.body)
+        .split(/\n{2,}/)
+        .filter(Boolean)
+        .map((para, i) => (
+          <p key={i} className="ty-report__prose">
+            {para}
+          </p>
+        ))}
+    </>
+  )
+}
+
+const lifecycle: Renderer = (d, ctx) => (
+  <ol className="ty-report__steps">
+    {rows(d.steps).map((step, i) => {
+      const state = (['complete', 'current', 'upcoming'] as const).find((s) => s === step.state) ?? 'upcoming'
+      return (
+        <li key={i} className="ty-report__step" data-state={state} aria-current={state === 'current' ? 'step' : undefined}>
+          <span className="ty-report__step-label">{text(step.label)}</span>
+          <span className="ty-report__step-state">{ctx.copy.lifecycle[state]}</span>
+        </li>
+      )
+    })}
+  </ol>
+)
+
+const receipt: Renderer = (d, ctx) => {
+  const c = ctx.copy.receipt
+  const cur = typeof d.currency === 'string' ? d.currency : undefined
+  const money = (v: unknown) => (num(v) === null ? '' : ctx.money(num(v)!, cur))
+  const lines = rows(d.items)
+  return (
+    <>
+      <table className="ty-report__receipt">
+        <thead>
+          <tr>
+            <th scope="col">{c.description}</th>
+            <th scope="col" data-numeric="">{c.quantity}</th>
+            <th scope="col" data-numeric="">{c.unitPrice}</th>
+            <th scope="col" data-numeric="">{c.total}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {lines.map((l, i) => {
+            const q = num(l.quantity)
+            const unit = num(l.unitPrice)
+            const total = num(l.total) ?? (q !== null && unit !== null ? q * unit : null)
+            return (
+              <tr key={i}>
+                <td>{text(l.description)}</td>
+                <td data-numeric="">{q === null ? '' : ctx.number(q)}</td>
+                <td data-numeric="">{money(unit)}</td>
+                <td data-numeric="">{money(total)}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      <Pairs
+        pairs={[
+          [c.subtotal, money(d.subtotal)],
+          [c.tax, money(d.tax)],
+          [c.grandTotal, money(d.total)],
+        ]}
+      />
+    </>
+  )
+}
+
+const approval: Renderer = (d, ctx) => {
+  const a = ctx.copy.approval
+  const decision = (['approved', 'rejected', 'pending'] as const).find((x) => x === d.decision) ?? 'pending'
+  const tone = decision === 'approved' ? 'success' : decision === 'rejected' ? 'danger' : 'warning'
+  return (
+    <>
+      <div className="ty-report__byline">
+        <StatusPill status={decision} tone={tone} label={a[decision]} />
+        {d.by ? <span className="ty-report__muted">{a.by(text(d.by))}</span> : null}
+        {d.at ? <span className="ty-report__muted ty-report__mono">{text(d.at)}</span> : null}
+      </div>
+      <Pairs
+        pairs={[
+          [a.reason, text(d.reason)],
+          [a.prompt, text(d.prompt)],
+        ]}
+      />
+    </>
+  )
+}
+
+const documentKind: Renderer = (d, ctx) => {
+  const c = ctx.copy.document
+  const mono = (v: unknown) => (v ? <span className="ty-report__mono">{text(v)}</span> : '')
+  return (
+    <>
+      <Pairs
+        pairs={[
+          [c.identifier, mono(d.identifier)],
+          [c.accessKey, mono(d.accessKey)],
+          [c.number, mono(d.number)],
+          [c.series, mono(d.series)],
+          [c.environment, text(d.environment)],
+        ]}
+      />
+      {typeof d.href === 'string' ? (
+        <a className="ty-report__link" href={d.href}>
+          {c.open}
+        </a>
+      ) : null}
+    </>
+  )
+}
+
+const feed: Renderer = (d) => (
+  <ul className="ty-report__feed">
+    {rows(d.entries).map((e, i) => (
+      <li key={i} className="ty-report__feed-entry" data-tone={text(e.tone) || 'default'}>
+        <span className="ty-report__mono ty-report__muted">{text(e.at)}</span>
+        <span>{text(e.text)}</span>
+      </li>
+    ))}
+  </ul>
+)
+
+const score: Renderer = (d, ctx) => {
+  const value = Math.max(0, Math.min(100, num(d.score) ?? 0))
+  const label = text(d.label)
+  return (
+    <>
+      <div className="ty-report__score">
+        <span className="ty-report__score-value">{ctx.copy.score.outOf(value)}</span>
+        {d.bucket ? <span className="ty-report__muted">{text(d.bucket)}</span> : null}
+      </div>
+      <meter className="ty-report__meter" min={0} max={100} value={value} aria-label={label || ctx.copy.score.outOf(value)} />
+      {d.reasoning ? <Pairs pairs={[[ctx.copy.score.reasoning, text(d.reasoning)]]} /> : null}
+    </>
+  )
+}
+
+const note: Renderer = (d) => {
+  const tone = text(d.tone)
+  const body = text(d.text ?? d.body)
+  if (tone === 'danger' || tone === 'warning' || tone === 'info' || tone === 'success') return <InlineNotice tone={tone}>{body}</InlineNotice>
+  return <p className="ty-report__note">{body}</p>
+}
+
+const markdown: Renderer = (d, ctx) => {
+  const source = text(d.markdown ?? d.text)
+  return ctx.renderMarkdown ? ctx.renderMarkdown(source) : narrative({ kind: 'narrative', text: source }, ctx)
+}
+
+const regionMap: Renderer = (d, ctx) => {
+  if (ctx.renderRegionMap) return ctx.renderRegionMap(d)
+  return (
+    <ul className="ty-report__feed">
+      {rows(d.items).map((item, i) => (
+        <li key={i} className="ty-report__feed-entry">
+          <span className="ty-report__mono">{text(item.code)}</span>
+          <span>{text(item.label ?? item.name)}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+const inputRequest: Renderer = (d, ctx) => {
+  if (ctx.renderInputRequest) return ctx.renderInputRequest(d)
+  const fields = rows(d.fields)
+  return (
+    <div className="ty-report__request" data-readonly="">
+      <p className="ty-report__muted">{ctx.copy.inputRequestPending}</p>
+      <p className="ty-report__prose">{text(d.prompt)}</p>
+      {fields.length ? (
+        <ul className="ty-report__field-list">
+          {fields.map((f, i) => (
+            <li key={i}>{text(f.label ?? f.name)}</li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+const unknown: Renderer = (d, ctx) => {
+  let raw = ''
+  try {
+    raw = JSON.stringify(d, null, 2)
+  } catch {
+    raw = String(d.kind)
+  }
+  return (
+    <div className="ty-report__note" data-unknown="">
+      <p>{ctx.copy.unknownSection(text(d.kind))}</p>
+      <pre className="ty-report__raw">{raw}</pre>
+    </div>
+  )
+}
+
+const RENDERERS: Record<string, Renderer> = {
+  entity,
+  narrative,
+  lifecycle,
+  receipt,
+  approval,
+  document: documentKind,
+  feed,
+  score,
+  note,
+  markdown,
+  regionMap,
+  inputRequest,
+}
+
+/** The renderer for a section kind; unknown kinds get the neutral note. */
+export function rendererFor(kind: unknown): Renderer {
+  return (typeof kind === 'string' && Object.hasOwn(RENDERERS, kind) ? RENDERERS[kind] : undefined) ?? unknown
+}

package/src/components/report-view/types.ts

@@ -0,0 +1,72 @@
+// The report document ReportView renders (spec: wave-2/report-view.md).
+// Top-level keys are the host contract named by the spec; every block is
+// declared on its own and the document is their composition.
+import type { ChartFigure } from '../chart/types'
+
+/* ---------------------------------------------------------- vocabularies -- */
+
+const COLUMN_FORMATS = ['text', 'number', 'currency', 'percent'] as const
+/** How a table column's values are formatted. */
+export type ReportColumnType = (typeof COLUMN_FORMATS)[number]
+
+/** Emphasis a block may carry (never colour alone). */
+export type ReportTone = 'default' | 'info' | 'success' | 'warning' | 'danger'
+
+/** Direction of a figure's change, as the author judges it. */
+type Leaning = 'positive' | 'negative' | 'neutral'
+
+/* ---------------------------------------------------------------- blocks -- */
+
+/** The figure itself: a label and a value with an optional unit. */
+type FigureCore = { label: string; value: number | string; unit?: string }
+
+/** Optional change attached to a figure (a signed number, shown with its sign). */
+type FigureChange = { delta?: number; deltaUnit?: string; tone?: Leaning }
+
+export type ReportKpi = FigureCore & FigureChange
+
+/** One declared column of the table block. */
+type ReportColumn = { key: string; label: string; type?: ReportColumnType; align?: 'start' | 'end' }
+
+export type ReportTable = {
+  title?: string
+  columns: ReportColumn[]
+  rows: Array<Record<string, unknown>>
+}
+
+/** A typed block: `kind` picks the renderer; unknown kinds render as a neutral note. */
+export type ReportSection = { kind: string; id?: string; title?: string } & Record<string, unknown>
+
+/** Footer facts: a record, or ordered label/value pairs. */
+type FooterFacts = Record<string, string> | Array<{ label: string; value: string }>
+
+/* -------------------------------------------------------------- document -- */
+
+type Heading = { title: string; subtitle?: string }
+
+type Blocks = {
+  kpis?: ReportKpi[]
+  charts?: ChartFigure[]
+  table?: ReportTable
+  recommendation?: string
+  sections?: ReportSection[]
+}
+
+type Presentation = {
+  layout?: 'grid' | 'stacked'
+  /** Footer metadata (generated at, source). */
+  meta?: FooterFacts
+}
+
+export type Report = Heading & Blocks & Presentation
+
+/* ----------------------------------------------------------- validation -- */
+
+/** Extra facts per issue code; `validateReport` returns one entry per problem. */
+type IssueFacts = {
+  empty: object
+  chartLayersMissing: { index: number }
+  tableColumnMissing: { key: string }
+}
+
+export type ReportIssue = { [Code in keyof IssueFacts]: { code: Code } & IssueFacts[Code] }[keyof IssueFacts]

package/src/components/report-view/validateReport.ts

@@ -0,0 +1,51 @@
+// Pure validation of a report pasted by hand or produced by an agent.
+// Accepts anything and never throws.
+import type { ReportIssue } from './types'
+
+type Loose = Record<string, unknown>
+const isObject = (v: unknown): v is Loose => typeof v === 'object' && v !== null && !Array.isArray(v)
+const listOf = (v: unknown): unknown[] => (Array.isArray(v) ? v : [])
+
+function hasContent(r: Loose): boolean {
+  const table = isObject(r.table) ? r.table : null
+  const checks = [
+    listOf(r.kpis).length > 0,
+    listOf(r.charts).length > 0,
+    !!table && listOf(table.rows).length > 0,
+    typeof r.recommendation === 'string' && r.recommendation.trim() !== '',
+    listOf(r.sections).length > 0,
+  ]
+  return checks.some(Boolean)
+}
+
+function chartIssues(charts: unknown[]): ReportIssue[] {
+  const out: ReportIssue[] = []
+  charts.forEach((chart, index) => {
+    const layers = isObject(chart) ? chart.layers : undefined
+    if (!Array.isArray(layers) || layers.length === 0) out.push({ code: 'chartLayersMissing', index })
+  })
+  return out
+}
+
+function tableIssues(table: Loose): ReportIssue[] {
+  const declared = new Set(listOf(table.columns).flatMap((c) => (isObject(c) && typeof c.key === 'string' ? [c.key] : [])))
+  const reported = new Set<string>()
+  for (const row of listOf(table.rows)) {
+    if (!isObject(row)) continue
+    for (const key of Object.keys(row)) if (!declared.has(key)) reported.add(key)
+  }
+  return [...reported].map((key) => ({ code: 'tableColumnMissing' as const, key }))
+}
+
+/** Issues of a report; empty when it is valid. */
+export function validateReport(input: unknown): ReportIssue[] {
+  try {
+    if (!isObject(input)) return [{ code: 'empty' }]
+    const issues: ReportIssue[] = hasContent(input) ? [] : [{ code: 'empty' }]
+    issues.push(...chartIssues(listOf(input.charts)))
+    if (isObject(input.table)) issues.push(...tableIssues(input.table))
+    return issues
+  } catch {
+    return [{ code: 'empty' }]
+  }
+}

package/src/components/resizable-split/ResizableSplit.css

@@ -0,0 +1,56 @@
+/* ResizableSplit (spec: wave-4/resizable-split.md; APG Window Splitter; design direction §2.6). */
+@layer tympan.components {
+  .ty-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto var(--ty-split-size);
+    min-block-size: 0;
+  }
+  .ty-split[data-side='start'] {
+    grid-template-columns: var(--ty-split-size) auto minmax(0, 1fr);
+  }
+  .ty-split[data-stacked] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ty-space-5);
+  }
+  .ty-split__pane {
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  /* A 1 px line with a 44 px invisible hit area. */
+  .ty-split__handle {
+    position: relative;
+    inline-size: 1px;
+    margin-inline: var(--ty-space-3);
+    background: var(--ty-line);
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+  .ty-split__handle::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    inline-size: var(--ty-control-target);
+    translate: calc(-50% * var(--ty-inline-sign)) 0;
+  }
+  .ty-split__handle:hover {
+    background: var(--ty-line-strong);
+  }
+  .ty-split__handle:focus-visible {
+    background: var(--ty-accent);
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  @media (forced-colors: active) {
+    .ty-split__handle {
+      background: CanvasText;
+    }
+    .ty-split__handle:focus-visible {
+      background: Highlight;
+      outline-color: Highlight;
+    }
+  }
+}