@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/flow/nodes/GraphNodeCard.test.tsx

@@ -0,0 +1,117 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Quote } from 'lucide-react'
+import { describe, expect, it, vi } from 'vitest'
+import { ActorChip, ProofBadge } from '../../index'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { GraphNodeCard } from './GraphNodeCard'
+
+describe('GraphNodeCard', () => {
+  it('activates once on Enter when interactive', async () => {
+    const onActivate = vi.fn()
+    render(<GraphNodeCard kind="code" kindLabel="Compute" title="Sum" onActivate={onActivate} />)
+    await userEvent.tab()
+    expect(screen.getByRole('button', { name: 'Compute: Sum' })).toHaveFocus()
+    await userEvent.keyboard('{Enter}')
+    expect(onActivate).toHaveBeenCalledTimes(1)
+  })
+
+  it('renames on double-click and Enter', async () => {
+    const onRename = vi.fn()
+    render(<GraphNodeCard kind="code" title="Old" onActivate={() => {}} onRename={onRename} />)
+    await userEvent.dblClick(screen.getByText('Old'))
+    const field = screen.getByRole('textbox')
+    await userEvent.clear(field)
+    await userEvent.type(field, 'New{Enter}')
+    expect(onRename).toHaveBeenCalledWith('New')
+  })
+
+  it('does not rename when the value is cleared or unchanged on blur', async () => {
+    const onRename = vi.fn()
+    render(<GraphNodeCard kind="code" title="Same" onActivate={() => {}} onRename={onRename} />)
+    await userEvent.dblClick(screen.getByText('Same'))
+    await userEvent.tab()
+    await userEvent.dblClick(screen.getByText('Same'))
+    await userEvent.clear(screen.getByRole('textbox'))
+    await userEvent.tab()
+    expect(onRename).not.toHaveBeenCalled()
+  })
+
+  it('keeps keys typed while renaming away from canvas shortcuts', async () => {
+    const shortcut = vi.fn()
+    render(
+      <div onKeyDown={shortcut}>
+        <GraphNodeCard kind="code" title="T" onActivate={() => {}} onRename={() => {}} />
+      </div>,
+    )
+    screen.getByRole('button').focus()
+    await userEvent.keyboard('{F2}')
+    shortcut.mockClear()
+    await userEvent.keyboard('v')
+    expect(shortcut).not.toHaveBeenCalled()
+  })
+
+  it('hides description and meta in compact density', () => {
+    const { rerender } = render(<GraphNodeCard kind="code" title="T" description="desc" meta={<span>meta row</span>} />)
+    expect(screen.getByText('desc')).toBeInTheDocument()
+    expect(screen.getByText('meta row')).toBeInTheDocument()
+    rerender(<GraphNodeCard kind="code" title="T" description="desc" meta={<span>meta row</span>} density="compact" />)
+    expect(screen.queryByText('desc')).toBeNull()
+    expect(screen.queryByText('meta row')).toBeNull()
+  })
+
+  it('explains a problem with an icon and text', () => {
+    const { container } = render(<GraphNodeCard kind="agent" title="Gone" problem="Agent not found" />)
+    expect(screen.getByText('Agent not found')).toBeInTheDocument()
+    expect(container.querySelector('.ty-node-card__problem svg')).not.toBeNull()
+    expect(container.querySelector('.ty-node-card')).toHaveAttribute('data-problem', 'true')
+  })
+
+  it('renders a proof badge in the meta row unchanged (provenance composition)', async () => {
+    const { container } = render(
+      <GraphNodeCard
+        kind="assertion"
+        kindLabel="assertion"
+        title="air.pm25_days_above_limit"
+        description="assertion"
+        icon={Quote}
+        proofState="proved"
+        onActivate={() => {}}
+        meta={
+          <>
+            <ProofBadge state="proved" size="compact" />
+            <ActorChip kind="agent" name="coder" compact />
+          </>
+        }
+      />,
+    )
+    expect(container.querySelector('.ty-node-card__meta .ty-proof-badge')).toHaveAttribute('data-state', 'proved')
+    expect(container.querySelector('.ty-node-card')).toHaveAttribute('data-proof-state', 'proved')
+    await expectNoAxeViolations(container)
+  })
+
+  it('uses a real sibling button for delete, named with the title', async () => {
+    const onDelete = vi.fn()
+    const onActivate = vi.fn()
+    const { container } = render(<GraphNodeCard kind="code" title="Sum" onActivate={onActivate} onDelete={onDelete} />)
+    await userEvent.click(screen.getByRole('button', { name: 'Remove Sum' }))
+    expect(onDelete).toHaveBeenCalled()
+    expect(onActivate).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Remove Sum' }).closest('.ty-node-card__activator')).toBeNull()
+    await expectNoAxeViolations(container)
+  })
+
+  it('exposes state words in the description and is a named group when not interactive', () => {
+    render(<GraphNodeCard kind="code" kindLabel="Compute" title="Sum" selected runState="failed" />)
+    const group = screen.getByRole('group', { name: 'Compute: Sum' })
+    expect(group).toHaveAccessibleDescription('selected, failed')
+  })
+
+  it('stops transitions under reduced motion and keeps state visible in forced colours', () => {
+    const css = cssOf('flow/nodes/GraphNodeCard.css')
+    expect(mediaBlock(css, /\(prefers-reduced-motion: reduce\)/)).toMatch(/transition:\s*none/)
+    expect(mediaBlock(css, /\(forced-colors: active\)/)).toMatch(/Highlight/)
+    expect(mediaBlock(css, /\(prefers-reduced-transparency: reduce\)/)).toMatch(/surface-solid/)
+  })
+})

package/src/flow/nodes/GraphNodeCard.tsx

@@ -0,0 +1,329 @@
+// GraphNodeCard: the shell every node is drawn with (workflow kinds and the
+// provenance graph). One primary control (the title button, stretched over the
+// card) opens or selects the node; delete and other actions are sibling
+// buttons, never nested inside it.
+
+import { isValidElement, useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Button as AriaButton, Input, TextField as AriaTextField, Label } from 'react-aria-components'
+import { TriangleAlert, Trash2 } from 'lucide-react'
+import { Button, type IconComponent } from '../../index'
+import { nodeStateAttributes, type NodeProofState, type NodeRunState } from '../catalog/nodeState'
+import type { ToneName } from '../catalog/palette'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import { useSurface } from '../surface/SurfaceContext'
+
+export type CardWidth = 'narrow' | 'standard' | 'wide'
+export type CardDensity = 'detailed' | 'compact'
+
+/** Card widths in canvas units (multiples of the 4 px scale of §2.1). */
+export const CARD_WIDTHS: Readonly<Record<CardWidth, number>> = Object.freeze({ narrow: 208, standard: 256, wide: 304 })
+
+/** Height a card is laid out with before it is measured. */
+export function estimatedCardHeight(density: CardDensity, hasMeta = true): number {
+  return density === 'compact' ? 60 : hasMeta ? 104 : 76
+}
+
+export interface GraphNodeCardLabels {
+  /** Accessible name pattern of the card's main control. */
+  name: string
+  rename: string
+  renameField: string
+  remove: string
+  problem: string
+  selected: string
+  locked: string
+  dimmed: string
+  running: string
+  suspended: string
+  succeeded: string
+  failed: string
+  skipped: string
+}
+
+export const graphNodeCardLabels = defineLabels<GraphNodeCardLabels>('GraphNodeCard', {
+  en: {
+    name: '{kind}: {title}',
+    rename: 'Rename {title}',
+    renameField: 'Name of {title}',
+    remove: 'Remove {title}',
+    problem: 'Needs attention',
+    selected: 'selected',
+    locked: 'read only',
+    dimmed: 'not run',
+    running: 'running',
+    suspended: 'suspended',
+    succeeded: 'succeeded',
+    failed: 'failed',
+    skipped: 'skipped',
+  },
+  'pt-BR': {
+    name: '{kind}: {title}',
+    rename: 'Renomear {title}',
+    renameField: 'Nome de {title}',
+    remove: 'Remover {title}',
+    problem: 'Precisa de atenção',
+    selected: 'selecionado',
+    locked: 'somente leitura',
+    dimmed: 'não executado',
+    running: 'em execução',
+    suspended: 'aguardando',
+    succeeded: 'concluído',
+    failed: 'falhou',
+    skipped: 'ignorado',
+  },
+  es: {
+    name: '{kind}: {title}',
+    rename: 'Cambiar el nombre de {title}',
+    renameField: 'Nombre de {title}',
+    remove: 'Quitar {title}',
+    problem: 'Requiere atención',
+    selected: 'seleccionado',
+    locked: 'solo lectura',
+    dimmed: 'no ejecutado',
+    running: 'en ejecución',
+    suspended: 'en espera',
+    succeeded: 'completado',
+    failed: 'falló',
+    skipped: 'omitido',
+  },
+})
+
+export const defaultGraphNodeCardLabels: GraphNodeCardLabels = graphNodeCardLabels.bundles.en
+
+export interface GraphNodeCardProps {
+  /** Kind key (tone, test hooks). */
+  kind: string
+  /** Spoken kind name (catalog label or category); defaults to the kind key. */
+  kindLabel?: string
+  title: string
+  description?: string
+  icon?: IconComponent | ReactNode
+  tone?: ToneName
+  width?: CardWidth
+  density?: CardDensity
+  selected?: boolean
+  /** Missing or not configured: dashed border, warning icon and this text (or the default word). */
+  problem?: boolean | string
+  runState?: NodeRunState
+  locked?: boolean
+  dimmed?: boolean
+  /** Provenance proof state: border line style per §2.11. */
+  proofState?: NodeProofState | null
+  /** When set, the card is a button (opens configuration or selects). */
+  onActivate?: () => void
+  /** Enables in-place rename (double-click or F2). */
+  onRename?: (title: string) => void
+  /** Shows the delete action. */
+  onDelete?: () => void
+  /** Content under the header (badges, counts); hidden in compact density. */
+  meta?: ReactNode
+  /** Small items next to the title (kind badge, dialect). */
+  badges?: ReactNode
+  /** Extra header actions (sibling buttons). */
+  headerActions?: ReactNode
+  /** Words added to the accessible description (run state detail, proof word …). */
+  stateWords?: string[]
+  /** Overrides the composed accessible name. */
+  accessibleName?: string
+  /** Ports, run indicator, hover toolbar: drawn inside the card, outside the main control. */
+  children?: ReactNode
+  labels?: Partial<GraphNodeCardLabels>
+  className?: string
+  /** Keys pressed on the main control (the host adds node shortcuts). */
+  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void
+}
+
+function renderIcon(icon: GraphNodeCardProps['icon']) {
+  if (!icon) return null
+  if (isValidElement(icon)) return icon
+  if (typeof icon === 'function' || (typeof icon === 'object' && icon !== null && '$$typeof' in icon)) {
+    const Icon = icon as IconComponent
+    return <Icon aria-hidden="true" focusable="false" />
+  }
+  return icon as ReactNode
+}
+
+export function GraphNodeCard(props: GraphNodeCardProps) {
+  const {
+    kind,
+    kindLabel,
+    title,
+    description,
+    icon,
+    tone = 'neutral',
+    width = 'standard',
+    density = 'detailed',
+    selected = false,
+    problem = false,
+    runState = 'idle',
+    locked = false,
+    dimmed = false,
+    proofState,
+    onActivate,
+    onRename,
+    onDelete,
+    meta,
+    badges,
+    headerActions,
+    stateWords = [],
+    accessibleName,
+    children,
+    className,
+    onKeyDown,
+  } = props
+  const l = useLabels(graphNodeCardLabels, props.labels)
+  const { locale } = useFlowLocale()
+  const surface = useSurface()
+  const stateId = useId()
+  const problemId = useId()
+  const activatorRef = useRef<HTMLButtonElement>(null)
+  const [renaming, setRenaming] = useState(false)
+  const [draft, setDraft] = useState(title)
+  const canRename = !!onRename && !locked
+
+  const name = accessibleName ?? fill(l.name, { kind: kindLabel ?? kind, title }, locale)
+  const words = [
+    ...(selected ? [l.selected] : []),
+    ...(runState !== 'idle' ? [l[runState]] : []),
+    ...(locked ? [l.locked] : []),
+    ...(dimmed ? [l.dimmed] : []),
+    ...stateWords,
+  ]
+
+  const startRename = () => {
+    if (!canRename) return
+    setDraft(title)
+    setRenaming(true)
+  }
+  const finishRename = (commit: boolean) => {
+    const value = draft.trim()
+    setRenaming(false)
+    if (commit && value && value !== title) onRename?.(value)
+    requestAnimationFrame(() => activatorRef.current?.focus())
+  }
+
+  const onActivatorKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'F2' && canRename) {
+      e.preventDefault()
+      startRename()
+      return
+    }
+    onKeyDown?.(e)
+  }
+
+  const titleNode = renaming ? (
+    <AriaTextField className="ty-node-card__rename" value={draft} onChange={setDraft} autoFocus aria-label={fill(l.renameField, { title }, locale)}>
+      <Label className="ty-visually-hidden">{fill(l.renameField, { title }, locale)}</Label>
+      <Input
+        className="ty-node-card__rename-input"
+        data-ty-no-drag=""
+        onBlur={() => finishRename(true)}
+        onKeyDown={(e) => {
+          // Keys typed while renaming never reach canvas shortcuts.
+          e.stopPropagation()
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            finishRename(true)
+          } else if (e.key === 'Escape') {
+            e.preventDefault()
+            finishRename(false)
+          }
+        }}
+      />
+    </AriaTextField>
+  ) : onActivate ? (
+    <AriaButton
+      ref={activatorRef}
+      className="ty-node-card__activator"
+      aria-label={name}
+      aria-describedby={[words.length ? stateId : null, problem ? problemId : null].filter(Boolean).join(' ') || undefined}
+      data-ty-node-focus=""
+      onPress={() => {
+        if (surface.justDragged()) return
+        onActivate()
+      }}
+      onKeyDown={onActivatorKeyDown}
+    >
+      <span className="ty-node-card__title" title={title}>
+        {title}
+      </span>
+    </AriaButton>
+  ) : (
+    <span className="ty-node-card__title" title={title}>
+      {title}
+    </span>
+  )
+
+  const root = {
+    className: ['ty-node-card', className].filter(Boolean).join(' '),
+    'data-kind': kind,
+    'data-tone': tone,
+    'data-width': width,
+    'data-density': density,
+    'data-problem': problem ? 'true' : 'false',
+    'data-interactive': onActivate ? 'true' : 'false',
+    ...nodeStateAttributes({ selected, runState, locked, dimmed, ...(proofState !== undefined ? { proofState } : {}) }),
+    ...(surface.connectTarget && surface.connecting ? { 'data-connect-target': surface.connectTarget.valid ? 'valid' : 'invalid' } : {}),
+  }
+
+  const groupProps = onActivate
+    ? {}
+    : {
+        role: 'group' as const,
+        'aria-label': name,
+        tabIndex: 0,
+        'data-ty-node-focus': '',
+        ...(words.length ? { 'aria-describedby': stateId } : {}),
+        onKeyDown: onActivatorKeyDown,
+      }
+
+  return (
+    <div {...root} {...groupProps}>
+      <div className="ty-node-card__header">
+        <span className="ty-node-card__bubble" data-tone={tone} aria-hidden="true">
+          {renderIcon(icon)}
+        </span>
+        <div className="ty-node-card__titles" onDoubleClick={canRename && !renaming ? startRename : undefined}>
+          {titleNode}
+          {description && density === 'detailed' ? <span className="ty-node-card__description">{description}</span> : null}
+        </div>
+        {badges ? <div className="ty-node-card__badges">{badges}</div> : null}
+        {headerActions || onDelete ? (
+          <div className="ty-node-card__actions">
+            {headerActions}
+            {onDelete && !locked ? (
+              <Button className="ty-node-card__delete" variant="quiet" size="compact" shape="circle" iconOnly accessibleLabel={fill(l.remove, { title }, locale)} leadingIcon={<Trash2 />} onPress={onDelete} />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+      {problem ? (
+        <p className="ty-node-card__problem" id={problemId}>
+          <TriangleAlert aria-hidden="true" focusable="false" />
+          <span>{typeof problem === 'string' ? problem : l.problem}</span>
+        </p>
+      ) : null}
+      {meta && density === 'detailed' ? <div className="ty-node-card__meta">{meta}</div> : null}
+      {words.length ? (
+        <span id={stateId} className="ty-visually-hidden">
+          {words.join(', ')}
+        </span>
+      ) : null}
+      {children}
+    </div>
+  )
+}
+
+/** Small label in the header or meta row: neutral, or in the kind's tone. */
+export function NodeBadge({ tone = 'neutral', icon, children }: { tone?: ToneName | 'neutral'; icon?: ReactNode; children: ReactNode }) {
+  return (
+    <span className="ty-node-badge" data-tone={tone}>
+      {icon ? (
+        <span className="ty-node-badge__icon" aria-hidden="true">
+          {icon}
+        </span>
+      ) : null}
+      {children}
+    </span>
+  )
+}

package/src/flow/nodes/GroupNode.tsx

@@ -0,0 +1,231 @@
+// GroupNode: a frame around several nodes. Expanded, it is a labelled group
+// with a header and a child area (resizable when selected); collapsed, it is a
+// card. Either way it has one input and one output so it wires as a unit.
+
+import { useId, useRef, type KeyboardEvent, type PointerEvent as ReactPointerEvent } from 'react'
+import { ChevronDown, ChevronRight, Focus, Group, Trash2 } from 'lucide-react'
+import { Button as AriaButton } from 'react-aria-components'
+import { Button } from '../../index'
+import { isToneName } from '../catalog/palette'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import type { FlowNode, LayoutDirection, Size } from '../model/types'
+import { useSurface } from '../surface/SurfaceContext'
+import { ConnectionPorts } from './ConnectionPorts'
+import { GraphNodeCard, NodeBadge, type CardDensity } from './GraphNodeCard'
+import { GROUP_MIN_SIZE, GROUP_RESIZE_STEP } from './groupLayout'
+import { useKindPresentation } from './nodeChrome'
+import { NodeRunIndicator, useRunWords } from './NodeRunIndicator'
+
+export interface GroupNodeLabels {
+  defaultName: string
+  defaultDescription: string
+  group: string
+  members: string
+  collapse: string
+  expand: string
+  focus: string
+  remove: string
+  resize: string
+}
+
+export const groupNodeLabels = defineLabels<GroupNodeLabels>('groupNode', {
+  en: {
+    defaultName: 'Group',
+    defaultDescription: 'Several steps kept together',
+    group: 'group',
+    members: '{count, plural, =0 {no steps} one {# step} other {# steps}}',
+    collapse: 'Collapse {name}',
+    expand: 'Expand {name}',
+    focus: 'Open {name} in focused view',
+    remove: 'Delete group {name}',
+    resize: 'Resize {name}',
+  },
+  'pt-BR': {
+    defaultName: 'Grupo',
+    defaultDescription: 'Várias etapas mantidas juntas',
+    group: 'grupo',
+    members: '{count, plural, =0 {nenhuma etapa} one {# etapa} other {# etapas}}',
+    collapse: 'Recolher {name}',
+    expand: 'Expandir {name}',
+    focus: 'Abrir {name} em vista focada',
+    remove: 'Excluir o grupo {name}',
+    resize: 'Redimensionar {name}',
+  },
+  es: {
+    defaultName: 'Grupo',
+    defaultDescription: 'Varios pasos agrupados',
+    group: 'grupo',
+    members: '{count, plural, =0 {ningún paso} one {# paso} other {# pasos}}',
+    collapse: 'Contraer {name}',
+    expand: 'Expandir {name}',
+    focus: 'Abrir {name} en vista enfocada',
+    remove: 'Eliminar el grupo {name}',
+    resize: 'Cambiar el tamaño de {name}',
+  },
+})
+export const defaultGroupNodeLabels = groupNodeLabels.bundles.en
+
+export interface GroupNodeProps {
+  id: string
+  name?: string
+  description?: string
+  tone?: string
+  expanded?: boolean
+  autoFit?: boolean
+  size?: Size
+  memberCount?: number
+  /** Smallest manual size (the members' bounds plus padding). */
+  minSize?: Size
+  onToggleExpanded: (id: string) => void
+  onConfigure?: (id: string) => void
+  onEnterFocus?: (id: string) => void
+  onRemove?: (id: string) => void
+  /** Manual resize finished (the host turns auto-fit off and stores the size). */
+  onResize?: (id: string, size: Size) => void
+  selected?: boolean
+  locked?: boolean
+  preview?: boolean
+  density?: CardDensity
+  direction?: LayoutDirection
+  labels?: Partial<GroupNodeLabels>
+}
+
+export function GroupNode(props: GroupNodeProps) {
+  const { id, tone, expanded = true, size = { width: 400, height: 280 }, memberCount = 0, minSize = GROUP_MIN_SIZE, onToggleExpanded, onConfigure, onEnterFocus, onRemove, onResize, selected = false, locked = false, preview = false, density = 'detailed', direction = 'right' } = props
+  const l = useLabels(groupNodeLabels, props.labels)
+  const { locale } = useFlowLocale()
+  const surface = useSurface()
+  const name = props.name?.trim() || l.defaultName
+  const description = props.description?.trim() || undefined
+  const safeTone = isToneName(tone) ? tone : 'neutral'
+  const node: FlowNode = { id, kind: 'group', position: { x: 0, y: 0 }, data: {} }
+  const k = useKindPresentation(node, direction)
+  const run = useRunWords(id)
+  const countId = useId()
+  const drag = useRef<{ x: number; y: number; size: Size } | null>(null)
+  const frameRef = useRef<HTMLDivElement>(null)
+  const canEdit = !preview && !locked
+  const members = fill(l.members, { count: memberCount }, locale)
+
+  const toggle = (
+    <AriaButton className="ty-group-node__toggle" aria-label={fill(expanded ? l.collapse : l.expand, { name })} aria-expanded={expanded} onPress={() => onToggleExpanded(id)} data-ty-no-drag="">
+      {expanded ? <ChevronDown aria-hidden="true" focusable="false" /> : <ChevronRight className="ty-group-node__chevron" aria-hidden="true" focusable="false" />}
+    </AriaButton>
+  )
+  const controls = (
+    <>
+      {onEnterFocus && !preview ? <Button variant="quiet" size="compact" iconOnly accessibleLabel={fill(l.focus, { name })} leadingIcon={<Focus />} onPress={() => onEnterFocus(id)} /> : null}
+      {onRemove && canEdit ? <Button variant="quiet" size="compact" iconOnly accessibleLabel={fill(l.remove, { name })} leadingIcon={<Trash2 />} onPress={() => onRemove(id)} /> : null}
+    </>
+  )
+
+  if (!expanded) {
+    return (
+      <GraphNodeCard
+        kind="group"
+        kindLabel={l.group}
+        title={name}
+        description={description ?? l.defaultDescription}
+        icon={<Group />}
+        tone={safeTone}
+        density={density}
+        selected={selected}
+        locked={locked}
+        runState={run.runState}
+        stateWords={[members, ...(run.words ? [run.words] : [])]}
+        {...(onConfigure && (canEdit || preview) ? { onActivate: () => onConfigure(id) } : {})}
+        badges={<NodeBadge>{l.group}</NodeBadge>}
+        headerActions={
+          <span className="ty-group-node__controls" data-ty-above="">
+            {toggle}
+            {controls}
+          </span>
+        }
+        className="ty-flow-node ty-group-node__card"
+      >
+        <ConnectionPorts nodeId={id} nodeLabel={name} inputs={k.inputs} outputs={k.outputs} tone={safeTone} preview={preview} />
+        <NodeRunIndicator nodeId={id} kind="group" nodeLabel={name} />
+      </GraphNodeCard>
+    )
+  }
+
+  const scale = surface.zoom || 1
+  const onHandleDown = (e: ReactPointerEvent<HTMLSpanElement>) => {
+    e.stopPropagation()
+    e.preventDefault()
+    drag.current = { x: e.clientX, y: e.clientY, size }
+    const move = (ev: PointerEvent) => {
+      if (!drag.current || !frameRef.current) return
+      const w = Math.max(minSize.width, drag.current.size.width + (ev.clientX - drag.current.x) / scale)
+      const h = Math.max(minSize.height, drag.current.size.height + (ev.clientY - drag.current.y) / scale)
+      frameRef.current.style.inlineSize = `${w}px`
+      frameRef.current.style.blockSize = `${h}px`
+    }
+    const up = (ev: PointerEvent) => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      if (!drag.current) return
+      const w = Math.max(minSize.width, drag.current.size.width + (ev.clientX - drag.current.x) / scale)
+      const h = Math.max(minSize.height, drag.current.size.height + (ev.clientY - drag.current.y) / scale)
+      drag.current = null
+      onResize?.(id, { width: Math.round(w), height: Math.round(h) })
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+  }
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== frameRef.current || !e.shiftKey || !canEdit || !onResize) return
+    const steps: Record<string, [number, number]> = { ArrowRight: [1, 0], ArrowLeft: [-1, 0], ArrowDown: [0, 1], ArrowUp: [0, -1] }
+    const step = steps[e.key]
+    if (!step) return
+    e.preventDefault()
+    e.stopPropagation()
+    // Inline sides mirror in right-to-left canvases.
+    const inline = getComputedStyle(frameRef.current).direction === 'rtl' ? -step[0] : step[0]
+    onResize(id, {
+      width: Math.max(minSize.width, size.width + inline * GROUP_RESIZE_STEP),
+      height: Math.max(minSize.height, size.height + step[1] * GROUP_RESIZE_STEP),
+    })
+  }
+
+  return (
+    <div
+      ref={frameRef}
+      className="ty-group-node"
+      role="group"
+      aria-label={name}
+      aria-describedby={countId}
+      tabIndex={0}
+      data-ty-node-focus=""
+      data-tone={safeTone}
+      data-selected={selected ? 'true' : 'false'}
+      data-locked={locked ? 'true' : 'false'}
+      data-run-state={run.runState}
+      style={{ inlineSize: size.width, blockSize: size.height }}
+      onKeyDown={onKeyDown}
+    >
+      <span id={countId} className="ty-visually-hidden">
+        {[members, run.words].filter(Boolean).join(', ')}
+      </span>
+      <header className="ty-group-node__header" onDoubleClick={onConfigure && canEdit ? () => onConfigure(id) : undefined}>
+        <span className="ty-group-node__icon" aria-hidden="true">
+          <Group focusable="false" />
+        </span>
+        <span className="ty-group-node__titles">
+          <span className="ty-group-node__name" title={name}>
+            {name}
+          </span>
+          {description ? <span className="ty-group-node__description">{description}</span> : null}
+        </span>
+        <span className="ty-group-node__controls">
+          {toggle}
+          {controls}
+        </span>
+      </header>
+      <div className="ty-group-node__members" aria-hidden="true" />
+      <ConnectionPorts nodeId={id} nodeLabel={name} inputs={k.inputs} outputs={k.outputs} tone={safeTone} preview={preview} />
+      <NodeRunIndicator nodeId={id} kind="group" nodeLabel={name} />
+      {selected && canEdit && onResize ? <span className="ty-group-node__resize" data-ty-no-drag="" aria-hidden="true" title={fill(l.resize, { name })} onPointerDown={onHandleDown} /> : null}
+    </div>
+  )
+}