@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/flow/internal/Announcer.tsx

@@ -0,0 +1,63 @@
+// A canvas speaks through two shared live regions (polite and assertive)
+// instead of one region per node. `useAnnounce()` returns the speaker; with
+// no AnnouncerProvider above it, speaking does nothing.
+
+import { createContext, useContext, useReducer, type ReactNode } from 'react'
+
+type Urgency = 'polite' | 'assertive'
+type Speaker = (message: string, urgency?: Urgency) => void
+
+interface Lines {
+  polite: string
+  assertive: string
+  /** Odd/even counter: an invisible suffix changes so repeating a sentence still reads. */
+  beat: number
+}
+
+type Utterance = { text: string; urgency: Urgency }
+
+function speak(prev: Lines, next: Utterance): Lines {
+  const beat = prev.beat + 1
+  const text = beat % 2 ? next.text : `${next.text} `
+  return { ...prev, beat, [next.urgency]: text }
+}
+
+const SpeakerContext = createContext<Speaker | null>(null)
+
+const REGIONS: ReadonlyArray<{ urgency: Urgency; role: 'status' | 'alert' }> = [
+  { urgency: 'polite', role: 'status' },
+  { urgency: 'assertive', role: 'alert' },
+]
+
+export function AnnouncerProvider({ children }: { children: ReactNode }) {
+  const [lines, dispatch] = useReducer(speak, { polite: '', assertive: '', beat: 0 })
+  // `dispatch` is stable, so the speaker needs no memoisation.
+  const speaker: Speaker = (text, urgency = 'polite') => dispatch({ text, urgency })
+  return (
+    <SpeakerContext.Provider value={useStableSpeaker(speaker)}>
+      {children}
+      {REGIONS.map((r) => (
+        <div key={r.urgency} className="ty-visually-hidden" role={r.role} aria-live={r.urgency} data-ty-announcer={r.urgency}>
+          {lines[r.urgency]}
+        </div>
+      ))}
+    </SpeakerContext.Provider>
+  )
+}
+
+/** Keeps the first speaker function (it only closes over the stable dispatch). */
+function useStableSpeaker(candidate: Speaker): Speaker {
+  const [kept] = useReducer((s: Speaker) => s, candidate)
+  return kept
+}
+
+const silent: Speaker = () => undefined
+
+export function useAnnounce(): Speaker {
+  return useContext(SpeakerContext) ?? silent
+}
+
+/** Whether a provider is above (components then skip a region of their own). */
+export function useHasAnnouncer(): boolean {
+  return useContext(SpeakerContext) !== null
+}

package/src/flow/internal/DockedPanel.tsx

@@ -0,0 +1,95 @@
+// Non-modal panel docked beside or over a canvas: a labelled `region` or
+// `complementary` landmark with a heading, a close control and Escape to close.
+// The canvas stays usable (no focus trap). Placement follows design direction
+// §2.8: pushes at ≥1280, overlays 1024–1279, full-width sheet below 1024; the
+// host layout decides pushing vs overlaying through `data-placement`.
+
+import { useEffect, useId, useRef, type KeyboardEvent, type ReactNode } from 'react'
+import { X } from 'lucide-react'
+import { Button, useMediaQuery, useMessages } from '../../index'
+
+export interface DockedPanelProps {
+  title: ReactNode
+  /** Accessible name when the title is not plain text. */
+  label?: string
+  landmark?: 'region' | 'complementary'
+  /** Where it docks on wide screens. */
+  edge?: 'end' | 'bottom' | 'float'
+  onClose?: () => void
+  closeLabel?: string
+  /** Controls placed before the close button (switch view, run, stop …). */
+  actions?: ReactNode
+  /** Leading icon of the header. */
+  icon?: ReactNode
+  /** Element to return focus to when the panel closes. */
+  returnFocusTo?: HTMLElement | null
+  /** Moves focus to the heading on mount. */
+  focusOnOpen?: boolean
+  busy?: boolean
+  className?: string
+  children?: ReactNode
+  /** Extra attributes on the root (data-* only). */
+  data?: Record<`data-${string}`, string | undefined>
+}
+
+export function DockedPanel(props: DockedPanelProps) {
+  const { title, label, landmark = 'region', edge = 'end', onClose, closeLabel, actions, icon, returnFocusTo, focusOnOpen = false, busy, className, children, data } = props
+  const messages = useMessages()
+  const headingId = useId()
+  const headingRef = useRef<HTMLHeadingElement>(null)
+  const phone = !useMediaQuery('(min-width: 1024px)', true)
+  const opener = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    opener.current = returnFocusTo ?? (document.activeElement as HTMLElement | null)
+    if (focusOnOpen) headingRef.current?.focus()
+    return () => {
+      const back = opener.current
+      if (back && back.isConnected && typeof back.focus === 'function') {
+        // After unmount, return focus only if it was inside the panel (now gone).
+        if (!document.activeElement || document.activeElement === document.body) back.focus()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Escape' && onClose && !e.defaultPrevented) {
+      e.preventDefault()
+      e.stopPropagation()
+      onClose()
+    }
+  }
+
+  const Tag = landmark === 'complementary' ? 'aside' : 'section'
+  return (
+    <Tag
+      className={['ty-docked-panel', className].filter(Boolean).join(' ')}
+      aria-labelledby={label ? undefined : headingId}
+      aria-label={label}
+      aria-busy={busy || undefined}
+      data-edge={phone ? 'sheet' : edge}
+      onKeyDown={onKeyDown}
+      {...(landmark === 'region' ? { role: 'region' } : {})}
+      {...data}
+    >
+      <header className="ty-docked-panel__header">
+        {icon ? (
+          <span className="ty-docked-panel__icon" aria-hidden="true">
+            {icon}
+          </span>
+        ) : null}
+        <h2 id={headingId} ref={headingRef} tabIndex={-1} className="ty-docked-panel__title">
+          {title}
+        </h2>
+        <div className="ty-docked-panel__actions">
+          {actions}
+          {onClose ? (
+            <Button variant="quiet" size="compact" shape="circle" iconOnly accessibleLabel={closeLabel ?? messages.close} leadingIcon={<X />} onPress={onClose} />
+          ) : null}
+        </div>
+      </header>
+      <div className="ty-docked-panel__body">{children}</div>
+    </Tag>
+  )
+}

package/src/flow/internal/SectionedModal.tsx

@@ -0,0 +1,117 @@
+// Stand-in for the wave-2 SectionedModal (not yet in @datatechsolutions/tympan):
+// ModalDialog with an eyebrow, a kind icon, an optional section rail and
+// Ctrl/Cmd+Enter to submit. Replace with the @datatechsolutions/tympan component when it
+// lands; the props mirror its spec.
+
+import { useMemo, type KeyboardEvent, type ReactNode } from 'react'
+import { ModalDialog, Tabs, TabPanel, useMediaQuery, type ModalDialogWidth } from '../../index'
+
+export interface ModalSection {
+  id: string
+  label: string
+  content: ReactNode
+}
+
+export interface SectionedModalProps {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  title: ReactNode
+  /** Accessible description (for example the node label). */
+  subtitle?: ReactNode
+  eyebrow?: string
+  icon?: ReactNode
+  /** Kind tone for the icon tile (a tone name, never a colour). */
+  tone?: string
+  width?: ModalDialogWidth
+  footer?: ReactNode
+  /** Ctrl/Cmd+Enter anywhere inside the body. */
+  onSubmitShortcut?: () => void
+  /** Section rail (vertical tabs from the medium breakpoint, a top strip below). */
+  sections?: ModalSection[]
+  railLabel?: string
+  activeSection?: string
+  onActiveSectionChange?: (id: string) => void
+  /** Pane shown above the section content (identity card, status). */
+  railHeader?: ReactNode
+  railFooter?: ReactNode
+  busy?: boolean
+  role?: 'dialog' | 'alertdialog'
+  className?: string
+  children?: ReactNode
+}
+
+export function SectionedModal(props: SectionedModalProps) {
+  const { isOpen, onOpenChange, title, subtitle, eyebrow, icon, tone, width = 'wide', footer, onSubmitShortcut, sections, railLabel, activeSection, onActiveSectionChange, railHeader, railFooter, busy, role, className, children } = props
+  const wide = useMediaQuery('(min-width: 768px)', true)
+  const phone = !useMediaQuery('(min-width: 640px)', true)
+
+  const heading = useMemo(
+    () => (
+      <span className="ty-flow-sectioned-modal__heading">
+        {icon ? (
+          <span className="ty-flow-sectioned-modal__icon" data-tone={tone ?? 'neutral'} aria-hidden="true">
+            {icon}
+          </span>
+        ) : null}
+        <span className="ty-flow-sectioned-modal__titles">
+          {eyebrow ? (
+            <span className="ty-flow-sectioned-modal__eyebrow" aria-hidden="true">
+              {eyebrow}
+            </span>
+          ) : null}
+          <span className="ty-flow-sectioned-modal__title">{title}</span>
+        </span>
+      </span>
+    ),
+    [eyebrow, icon, title, tone],
+  )
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (onSubmitShortcut && e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      onSubmitShortcut()
+    }
+  }
+
+  const body = sections?.length ? (
+    <div className="ty-flow-sectioned-modal__rail-layout" data-rail={wide ? 'side' : 'top'}>
+      {railHeader ? <div className="ty-flow-sectioned-modal__rail-header">{railHeader}</div> : null}
+      <Tabs
+        label={railLabel ?? 'Sections'}
+        tabs={sections.map((s) => ({ id: s.id, label: s.label }))}
+        orientation={wide ? 'vertical' : 'horizontal'}
+        activation="manual"
+        {...(activeSection !== undefined ? { selectedKey: activeSection } : {})}
+        {...(onActiveSectionChange ? { onSelectionChange: onActiveSectionChange } : {})}
+      >
+        {sections.map((s) => (
+          <TabPanel key={s.id} id={s.id}>
+            {s.content}
+          </TabPanel>
+        ))}
+      </Tabs>
+      {railFooter ? <div className="ty-flow-sectioned-modal__rail-footer">{railFooter}</div> : null}
+      {children}
+    </div>
+  ) : (
+    children
+  )
+
+  return (
+    <ModalDialog
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      width={phone ? 'xwide' : width}
+      title={heading}
+      description={subtitle}
+      actions={footer}
+      {...(busy !== undefined ? { busy } : {})}
+      {...(role ? { role } : {})}
+      className={['ty-flow-sectioned-modal', className].filter(Boolean).join(' ')}
+    >
+      <div className="ty-flow-sectioned-modal__body" data-phone={phone || undefined} onKeyDown={onKeyDown}>
+        {body}
+      </div>
+    </ModalDialog>
+  )
+}

package/src/flow/internal/builtInLabels.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { BUILT_IN_LOCALES, builtInLabels } from '../index'
+
+describe('builtInLabels', () => {
+  it('lists every shipped label definition once, each with a complete English bundle', () => {
+    const all = builtInLabels()
+    const keys = all.map((d) => d.key)
+    expect(keys.length).toBeGreaterThan(50)
+    expect(new Set(keys).size).toBe(keys.length)
+    expect(keys).toContain('provenance')
+    for (const d of all) {
+      expect(Object.keys(d.bundles.en).length).toBeGreaterThan(0)
+      for (const locale of Object.keys(d.bundles)) expect(BUILT_IN_LOCALES as readonly string[]).toContain(locale)
+    }
+  })
+})

package/src/flow/internal/confirm.tsx

@@ -0,0 +1,73 @@
+// Asking a person to confirm, until the design system's wave-2 confirm
+// service exists. `useConfirm()` gives an async question function; hosts can
+// plug in their own through <ConfirmProvider confirm={...}>.
+
+import { createContext, useContext, useState, type ReactNode } from 'react'
+import { Button, ModalDialog } from '../../index'
+
+export interface ConfirmOptions {
+  title: string
+  message?: string
+  confirmLabel: string
+  cancelLabel: string
+  tone?: 'neutral' | 'danger'
+}
+
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>
+
+/** An open question: what is asked and how to answer it. */
+interface Question {
+  ask: ConfirmOptions
+  answer: (yes: boolean) => void
+}
+
+const AskContext = createContext<ConfirmFn | null>(null)
+
+function QuestionDialog({ question, done }: { question: Question; done: () => void }) {
+  const reply = (yes: boolean) => {
+    question.answer(yes)
+    done()
+  }
+  const { ask } = question
+  return (
+    <ModalDialog
+      isOpen
+      role="alertdialog"
+      width="narrow"
+      onOpenChange={(open) => (open ? undefined : reply(false))}
+      title={ask.title}
+      description={ask.message}
+      actions={
+        <>
+          <Button variant="secondary" autoFocus onPress={() => reply(false)}>
+            {ask.cancelLabel}
+          </Button>
+          <Button variant={ask.tone === 'danger' ? 'danger' : 'primary'} onPress={() => reply(true)}>
+            {ask.confirmLabel}
+          </Button>
+        </>
+      }
+    />
+  )
+}
+
+export function ConfirmProvider({ confirm, children }: { confirm?: ConfirmFn; children: ReactNode }) {
+  const [open, setOpen] = useState<Question | null>(null)
+  const [builtIn] = useState<ConfirmFn>(() => (ask: ConfirmOptions) => new Promise<boolean>((answer) => setOpen({ ask, answer })))
+  return (
+    <AskContext.Provider value={confirm ?? builtIn}>
+      {children}
+      {open ? <QuestionDialog question={open} done={() => setOpen(null)} /> : null}
+    </AskContext.Provider>
+  )
+}
+
+/** Without a provider the browser's own confirm box answers (true where there is none). */
+const browserAsk: ConfirmFn = async ({ title, message }) => {
+  if (typeof window === 'undefined' || typeof window.confirm !== 'function') return true
+  return window.confirm(message ? `${title}\n${message}` : title)
+}
+
+export function useConfirm(): ConfirmFn {
+  return useContext(AskContext) ?? browserAsk
+}

package/src/flow/internal/format.ts

@@ -0,0 +1,47 @@
+// Locale-aware formatting helpers (Intl only; no hand-built English strings).
+
+/** Under one second: whole milliseconds ("340 ms"); otherwise seconds with one decimal ("2.5 s"). */
+export function formatDuration(ms: number, locale?: string): string {
+  if (!Number.isFinite(ms) || ms < 0) return ''
+  if (ms < 1000) {
+    return new Intl.NumberFormat(locale, { style: 'unit', unit: 'millisecond', unitDisplay: 'short', maximumFractionDigits: 0 }).format(Math.round(ms))
+  }
+  return new Intl.NumberFormat(locale, { style: 'unit', unit: 'second', unitDisplay: 'short', minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(ms / 1000)
+}
+
+const RELATIVE_STEPS: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+  ['second', 60],
+  ['minute', 60],
+  ['hour', 24],
+  ['day', 7],
+  ['week', 4.35],
+  ['month', 12],
+  ['year', Infinity],
+]
+
+/** "10 minutes ago" / "há 10 minutos", through Intl.RelativeTimeFormat. */
+export function formatRelative(date: Date | string | number, locale?: string, now: Date = new Date()): string {
+  const then = new Date(date)
+  if (Number.isNaN(then.getTime())) return ''
+  let value = (then.getTime() - now.getTime()) / 1000
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+  for (const [unit, size] of RELATIVE_STEPS) {
+    if (Math.abs(value) < size) return rtf.format(Math.round(value), unit)
+    value /= size
+  }
+  return rtf.format(Math.round(value), 'year')
+}
+
+export function formatDateTime(date: Date | string | number, locale?: string, options: Intl.DateTimeFormatOptions = { dateStyle: 'medium', timeStyle: 'short' }): string {
+  const d = new Date(date)
+  return Number.isNaN(d.getTime()) ? '' : new Intl.DateTimeFormat(locale, options).format(d)
+}
+
+export function formatNumber(n: number, locale?: string, options?: Intl.NumberFormatOptions): string {
+  return new Intl.NumberFormat(locale, options).format(n)
+}
+
+/** Current document language, used as the default locale. */
+export function documentLocale(): string | undefined {
+  return typeof document !== 'undefined' ? document.documentElement.lang || undefined : undefined
+}

package/src/flow/internal/i18n.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { TympanProvider } from '../../index'
+import { autoLayout, rankDirectionOf } from '../layout/autoLayout'
+import { CanvasSurface, physicalSide } from '../surface/CanvasSurface'
+import { canvasToolItems } from '../toolbar/canvasTools'
+import { defineLabels, FlowMessagesProvider, useFlowLocale, useLabels } from './labels'
+import { formatMessage } from './messageFormat'
+
+const probeLabels = defineLabels('Probe', {
+  en: { hello: 'Hello {name}', count: '{n, plural, =0 {no nodes} one {# node} other {# nodes}}' },
+  'pt-BR': { hello: 'Olá {name}', count: '{n, plural, =0 {nenhum nó} one {# nó} other {# nós}}' },
+  es: { hello: 'Hola {name}' },
+})
+
+function Probe({ override }: { override?: string }) {
+  const l = useLabels(probeLabels, override ? { hello: override } : undefined)
+  const { locale, direction } = useFlowLocale()
+  return (
+    <p data-dir={direction}>
+      {formatMessage(l.hello, { name: 'Ana' }, locale)} / {formatMessage(l.count, { n: 1200 }, locale)}
+    </p>
+  )
+}
+
+describe('i18n foundations', () => {
+  it('formats the ICU subset: arguments, numbers, plurals with exact matches and select', () => {
+    expect(formatMessage('{n, plural, =0 {none} one {# item} other {# items}}', { n: 0 }, 'en')).toBe('none')
+    expect(formatMessage('{n, plural, one {# item} other {# items}}', { n: 1 }, 'en')).toBe('1 item')
+    expect(formatMessage('{n, plural, one {# item} other {# items}}', { n: 2500 }, 'pt-BR')).toBe('2.500 items')
+    expect(formatMessage('{k, select, agent {an agent} other {a step}}', { k: 'agent' })).toBe('an agent')
+    expect(formatMessage('{a} of {b, number}', { a: 'x', b: 1234 }, 'en')).toBe('x of 1,234')
+  })
+
+  it('picks the built-in bundle of the provider locale, by exact tag then language', () => {
+    const { rerender } = render(
+      <TympanProvider locale="pt-BR">
+        <Probe />
+      </TympanProvider>,
+    )
+    expect(screen.getByText(/Olá Ana/)).toHaveTextContent('Olá Ana / 1.200 nós')
+    rerender(
+      <TympanProvider locale="es-MX">
+        <Probe />
+      </TympanProvider>,
+    )
+    // Spanish greeting, English plural fallback (es bundle is partial), Mexican number grouping.
+    expect(screen.getByText(/Hola Ana/)).toHaveTextContent('Hola Ana / 1,200 nodes')
+  })
+
+  it('lets the host catalogue and then the prop override the bundle', () => {
+    render(
+      <TympanProvider locale="pt-BR">
+        <FlowMessagesProvider messages={{ Probe: { hello: 'Oi {name}' } }}>
+          <Probe />
+          <Probe override="Salve {name}" />
+        </FlowMessagesProvider>
+      </TympanProvider>,
+    )
+    expect(screen.getByText(/Oi Ana/)).toBeInTheDocument()
+    expect(screen.getByText(/Salve Ana/)).toBeInTheDocument()
+  })
+
+  it('reports right-to-left for Arabic', () => {
+    const { container } = render(
+      <TympanProvider locale="ar">
+        <Probe />
+      </TympanProvider>,
+    )
+    expect(container.querySelector('[data-dir]')).toHaveAttribute('data-dir', 'rtl')
+  })
+
+  it('mirrors logical port sides and horizontal layouts in RTL, with an opt-out', () => {
+    expect(physicalSide('start', true)).toBe('end')
+    expect(physicalSide('top', true)).toBe('top')
+    expect(rankDirectionOf('right', true)).toBe('right-left')
+    expect(rankDirectionOf('right', true, true)).toBe('left-right')
+    const out = autoLayout(
+      [
+        { id: 'A', kind: 'code', position: { x: 0, y: 0 } },
+        { id: 'B', kind: 'code', position: { x: 0, y: 0 } },
+      ],
+      [{ source: 'A', target: 'B' }],
+      'right-left',
+    )
+    expect(out[0]!.position.x).toBeGreaterThan(out[1]!.position.x)
+  })
+
+  it('attaches connectors to the mirrored side inside an Arabic canvas', () => {
+    const nodes = [
+      { id: 'a', rect: { x: 400, y: 0, width: 200, height: 80 } },
+      { id: 'b', rect: { x: 0, y: 0, width: 200, height: 80 } },
+    ]
+    const { container } = render(
+      <TympanProvider locale="ar">
+        <CanvasSurface label="مسار" nodes={nodes} fit="none" connectors={[{ id: 'c', source: 'a', target: 'b' }]} renderNode={(n) => <span>{n.id}</span>} />
+      </TympanProvider>,
+    )
+    // Source leaves a's physical left edge (x = 400) toward b's right edge (x = 200).
+    expect(container.querySelector('.ty-flow-surface__connector')!.getAttribute('d')!.startsWith('M400,40 ')).toBe(true)
+    expect(container.querySelector('.ty-flow-surface')).toHaveAttribute('data-direction', 'rtl')
+  })
+
+  it('names canvas tools in the requested locale', () => {
+    const items = canvasToolItems({ zoom: 1, mode: 'select', onModeChange() {}, onZoomIn() {}, onZoomOut() {}, onZoomReset() {}, onFit() {}, locale: 'pt-BR' })
+    expect(items[0]!.label).toBe('Selecionar')
+    expect(items.find((i) => i.id === 'zoom-level')!.text).toBe('100%')
+  })
+})

package/src/flow/internal/ids.ts

@@ -0,0 +1,9 @@
+let counter = 0
+
+/** A new unique id with a readable prefix (`node-3f9c…`). */
+export function createId(prefix = 'id'): string {
+  const c = globalThis.crypto
+  const random = c && typeof c.randomUUID === 'function' ? c.randomUUID().slice(0, 8) : Math.random().toString(36).slice(2, 10)
+  counter = (counter + 1) % 1_000_000
+  return `${prefix}-${random}${counter.toString(36)}`
+}

package/src/flow/internal/internal.css

@@ -0,0 +1,152 @@
+/* Shared pieces: SectionedModal stand-in and DockedPanel. */
+@layer tympan.components {
+  .ty-flow-sectioned-modal__heading {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-3);
+  }
+  .ty-flow-sectioned-modal__icon {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 36px;
+    block-size: 36px;
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-flow-tone, var(--ty-flow-tone-neutral));
+    color: var(--ty-flow-tone-ink, var(--ty-surface-solid));
+  }
+  .ty-flow-sectioned-modal__icon svg {
+    inline-size: 18px;
+    block-size: 18px;
+  }
+  .ty-flow-sectioned-modal__titles {
+    display: flex;
+    flex-direction: column;
+  }
+  .ty-flow-sectioned-modal__eyebrow {
+    color: var(--ty-ink-3);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-eyebrow);
+    line-height: var(--ty-font-line-height-eyebrow);
+    font-weight: var(--ty-font-weight-semibold);
+    letter-spacing: var(--ty-font-tracking-eyebrow);
+    text-transform: uppercase;
+  }
+  .ty-flow-sectioned-modal__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-5);
+  }
+  .ty-flow-sectioned-modal__rail-layout[data-rail='side'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ty-space-4);
+  }
+
+  .ty-docked-panel {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-block-size: 0;
+    max-block-size: 100%;
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-card);
+    background: var(--ty-surface-raised);
+    box-shadow: var(--ty-shadow-floating);
+    backdrop-filter: blur(var(--ty-glass-blur-floating, 24px));
+    color: var(--ty-ink-2);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+  }
+  .ty-docked-panel[data-edge='end'] {
+    inline-size: min(420px, 100%);
+    block-size: 100%;
+  }
+  .ty-docked-panel[data-edge='float'] {
+    inline-size: min(380px, 100%);
+    max-block-size: min(70vh, 640px);
+  }
+  .ty-docked-panel[data-edge='bottom'] {
+    inline-size: 100%;
+    max-block-size: 45vh;
+  }
+  .ty-docked-panel[data-edge='sheet'] {
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: 0;
+    z-index: var(--ty-z-modal, 50);
+    inline-size: 100%;
+    max-block-size: 85vh;
+    border-radius: var(--ty-radius-sheet) var(--ty-radius-sheet) 0 0;
+    padding-block-end: env(safe-area-inset-bottom, 0);
+    animation: ty-panel-rise var(--ty-dur-base) var(--ty-ease);
+  }
+  .ty-docked-panel__header {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    padding: var(--ty-space-3) var(--ty-space-3) var(--ty-space-3) var(--ty-space-4);
+    border-block-end: 1px solid var(--ty-line);
+  }
+  .ty-docked-panel__icon svg {
+    inline-size: 18px;
+    block-size: 18px;
+    color: var(--ty-ink-3);
+  }
+  .ty-docked-panel__title {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    margin: 0;
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h3);
+    line-height: var(--ty-font-line-height-h3);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-docked-panel__title:focus-visible {
+    outline: 2px solid var(--ty-accent);
+    outline-offset: 2px;
+  }
+  .ty-docked-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+  }
+  .ty-docked-panel__body {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+    padding: var(--ty-space-4);
+  }
+
+  @keyframes ty-panel-rise {
+    from {
+      transform: translateY(24px);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-docked-panel[data-edge='sheet'] {
+      animation: none;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-docked-panel {
+      background: var(--ty-surface-raised-solid);
+      backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .ty-docked-panel {
+      border-color: CanvasText;
+      background: Canvas;
+    }
+    .ty-flow-sectioned-modal__icon {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+}