@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/flow/dialogs/DefinitionImportDialog.tsx

@@ -0,0 +1,303 @@
+// DefinitionImportDialog: takes a flow definition file by drop or by the
+// file picker, validates its structure, lists every problem and imports the
+// normalised graph. The zone only receives drops; the picker button is the
+// interactive element.
+
+import { useEffect, useRef, useState } from 'react'
+import { DropZone, FileTrigger, type DropZoneProps } from 'react-aria-components'
+import { FileUp } from 'lucide-react'
+import { Button, InlineNotice, useMediaQuery } from '../../index'
+import { SectionedModal } from '../internal/SectionedModal'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import type { FlowConnector, FlowGraph, FlowNode } from '../model/types'
+
+export interface DefinitionImportDialogLabels {
+  title: string
+  description: string
+  dropHere: string
+  dropActive: string
+  chooseFile: string
+  fileHint: string
+  chooseAnother: string
+  reading: string
+  valid: string
+  invalidTitle: string
+  invalidFormat: string
+  notObject: string
+  missingNodes: string
+  missingConnectors: string
+  missingViewport: string
+  nodeField: string
+  connectorField: string
+  cancel: string
+  import: string
+}
+
+export const definitionImportDialogLabels = defineLabels<DefinitionImportDialogLabels>('DefinitionImportDialog', {
+  en: {
+    title: 'Import definition',
+    description: 'Replace this flow with an exported flow definition.',
+    dropHere: 'Drop a definition file here',
+    dropActive: 'Release to read the file',
+    chooseFile: 'Choose file',
+    fileHint: 'A .json file exported from a flow.',
+    chooseAnother: 'Choose another file',
+    reading: 'Reading the file',
+    valid: '{nodes, plural, one {# step} other {# steps}} and {connectors, plural, one {# connection} other {# connections}} ready to import.',
+    invalidTitle: 'This file cannot be imported',
+    invalidFormat: 'Invalid format: the file is not readable structured data.',
+    notObject: 'The definition must be an object.',
+    missingNodes: 'The list of steps (nodes) is missing.',
+    missingConnectors: 'The list of connections (connectors) is missing.',
+    missingViewport: 'The viewport object is missing.',
+    nodeField: 'Step {index}: missing {field}.',
+    connectorField: 'Connection {index}: missing {field}.',
+    cancel: 'Cancel',
+    import: 'Import',
+  },
+  'pt-BR': {
+    title: 'Importar definição',
+    description: 'Substitui este fluxo por uma definição de fluxo exportada.',
+    dropHere: 'Solte aqui um arquivo de definição',
+    dropActive: 'Solte para ler o arquivo',
+    chooseFile: 'Escolher arquivo',
+    fileHint: 'Um arquivo .json exportado de um fluxo.',
+    chooseAnother: 'Escolher outro arquivo',
+    reading: 'Lendo o arquivo',
+    valid: '{nodes, plural, one {# passo} other {# passos}} e {connectors, plural, one {# conexão} other {# conexões}} prontos para importar.',
+    invalidTitle: 'Este arquivo não pode ser importado',
+    invalidFormat: 'Formato inválido: o arquivo não é um dado estruturado legível.',
+    notObject: 'A definição precisa ser um objeto.',
+    missingNodes: 'Falta a lista de passos (nodes).',
+    missingConnectors: 'Falta a lista de conexões (connectors).',
+    missingViewport: 'Falta o objeto de enquadramento (viewport).',
+    nodeField: 'Passo {index}: falta {field}.',
+    connectorField: 'Conexão {index}: falta {field}.',
+    cancel: 'Cancelar',
+    import: 'Importar',
+  },
+  es: {
+    title: 'Importar definición',
+    description: 'Reemplaza este flujo por una definición de flujo exportada.',
+    dropHere: 'Suelta aquí un archivo de definición',
+    dropActive: 'Suelta para leer el archivo',
+    chooseFile: 'Elegir archivo',
+    fileHint: 'Un archivo .json exportado de un flujo.',
+    chooseAnother: 'Elegir otro archivo',
+    reading: 'Leyendo el archivo',
+    valid: '{nodes, plural, one {# paso} other {# pasos}} y {connectors, plural, one {# conexión} other {# conexiones}} listos para importar.',
+    invalidTitle: 'Este archivo no se puede importar',
+    invalidFormat: 'Formato no válido: el archivo no es un dato estructurado legible.',
+    notObject: 'La definición debe ser un objeto.',
+    missingNodes: 'Falta la lista de pasos (nodes).',
+    missingConnectors: 'Falta la lista de conexiones (connectors).',
+    missingViewport: 'Falta el objeto de encuadre (viewport).',
+    nodeField: 'Paso {index}: falta {field}.',
+    connectorField: 'Conexión {index}: falta {field}.',
+    cancel: 'Cancelar',
+    import: 'Importar',
+  },
+})
+export const defaultDefinitionImportDialogLabels = definitionImportDialogLabels.bundles.en
+
+type DropEvent = Parameters<NonNullable<DropZoneProps['onDrop']>>[0]
+type DropItem = DropEvent['items'][number]
+
+export type DefinitionCheck = { ok: true; graph: FlowGraph } | { ok: false; errors: string[] }
+
+const isObject = (v: unknown): v is Record<string, unknown> => !!v && typeof v === 'object' && !Array.isArray(v)
+const num = (v: unknown, fallback: number) => (typeof v === 'number' && Number.isFinite(v) ? v : fallback)
+
+/** Parses and validates a definition; every problem is listed with its item index. */
+export function checkFlowDefinition(text: string, labels: DefinitionImportDialogLabels = defaultDefinitionImportDialogLabels, locale?: string): DefinitionCheck {
+  let root: unknown
+  try {
+    root = JSON.parse(text)
+  } catch {
+    return { ok: false, errors: [labels.invalidFormat] }
+  }
+  if (!isObject(root)) return { ok: false, errors: [labels.notObject] }
+  const g = isObject(root.graph) ? root.graph : root
+  const errors: string[] = []
+  const nodes = g.nodes
+  const connectors = g.connectors
+  if (!Array.isArray(nodes)) errors.push(labels.missingNodes)
+  if (!Array.isArray(connectors)) errors.push(labels.missingConnectors)
+  if (!isObject(g.viewport)) errors.push(labels.missingViewport)
+  if (Array.isArray(nodes)) {
+    nodes.forEach((n, index) => {
+      const item = isObject(n) ? n : {}
+      for (const field of ['id', 'kind', 'position'] as const) {
+        const ok = field === 'position' ? isObject(item.position) : typeof item[field] === 'string' && item[field] !== ''
+        if (!ok) errors.push(fill(labels.nodeField, { index, field }, locale))
+      }
+    })
+  }
+  if (Array.isArray(connectors)) {
+    connectors.forEach((c, index) => {
+      const item = isObject(c) ? c : {}
+      for (const field of ['id', 'source', 'target'] as const) {
+        if (typeof item[field] !== 'string' || item[field] === '') errors.push(fill(labels.connectorField, { index, field }, locale))
+      }
+    })
+  }
+  if (errors.length) return { ok: false, errors }
+  const vp = g.viewport as Record<string, unknown>
+  const graph: FlowGraph = {
+    nodes: (nodes as Array<Record<string, unknown>>).map((n) => {
+      const p = n.position as Record<string, unknown>
+      return {
+        ...(n as unknown as FlowNode),
+        position: { x: num(p.x, 0), y: num(p.y, 0) },
+        data: isObject(n.data) ? n.data : { label: '' },
+      }
+    }),
+    connectors: (connectors as Array<Record<string, unknown>>).map((c) => ({
+      ...(c as unknown as FlowConnector),
+      sourcePort: typeof c.sourcePort === 'string' && c.sourcePort ? c.sourcePort : 'out',
+      targetPort: typeof c.targetPort === 'string' && c.targetPort ? c.targetPort : 'in',
+    })),
+    viewport: { x: num(vp.x, 0), y: num(vp.y, 0), zoom: num(vp.zoom, 1) },
+  }
+  return { ok: true, graph }
+}
+
+function readFile(file: File): Promise<string> {
+  if (typeof file.text === 'function') return file.text()
+  return new Promise((resolve, reject) => {
+    const r = new FileReader()
+    r.onload = () => resolve(String(r.result ?? ''))
+    r.onerror = () => reject(r.error)
+    r.readAsText(file)
+  })
+}
+
+export interface DefinitionImportDialogProps {
+  open: boolean
+  onClose: () => void
+  onImport: (graph: FlowGraph) => void
+  labels?: Partial<DefinitionImportDialogLabels>
+}
+
+type Picked = { name: string; status: 'reading' } | { name: string; status: 'done'; check: DefinitionCheck }
+
+export function DefinitionImportDialog({ open, onClose, onImport, labels }: DefinitionImportDialogProps) {
+  const l = useLabels(definitionImportDialogLabels, labels)
+  const { locale, direction } = useFlowLocale()
+  const coarse = useMediaQuery('(pointer: coarse)')
+  const [picked, setPicked] = useState<Picked | null>(null)
+  const pickerRef = useRef<HTMLButtonElement>(null)
+  const refocusPicker = useRef(false)
+
+  useEffect(() => {
+    if (!open) setPicked(null)
+  }, [open])
+  useEffect(() => {
+    if (!picked && refocusPicker.current) {
+      refocusPicker.current = false
+      requestAnimationFrame(() => pickerRef.current?.focus())
+    }
+  }, [picked])
+
+  const accept = async (file: File | undefined | null) => {
+    if (!file) return
+    setPicked({ name: file.name, status: 'reading' })
+    try {
+      const text = await readFile(file)
+      setPicked({ name: file.name, status: 'done', check: checkFlowDefinition(text, l, locale) })
+    } catch {
+      setPicked({ name: file.name, status: 'done', check: { ok: false, errors: [l.invalidFormat] } })
+    }
+  }
+
+  const onDrop = async (e: DropEvent) => {
+    const item = e.items.find((i: DropItem) => i.kind === 'file')
+    if (item && item.kind === 'file') await accept(await item.getFile())
+  }
+
+  const check = picked?.status === 'done' ? picked.check : null
+
+  return (
+    <SectionedModal
+      isOpen={open}
+      onOpenChange={(o) => {
+        if (!o) onClose()
+      }}
+      title={l.title}
+      subtitle={l.description}
+      width="regular"
+      className="ty-definition-import"
+      footer={
+        <>
+          <Button variant="secondary" onPress={onClose}>
+            {l.cancel}
+          </Button>
+          <Button
+            variant="primary"
+            disabled={!check?.ok}
+            onPress={() => {
+              if (check?.ok) {
+                onImport(check.graph)
+                onClose()
+              }
+            }}
+          >
+            {l.import}
+          </Button>
+        </>
+      }
+    >
+      {picked ? (
+        <div className="ty-definition-import__result" dir={direction}>
+          <div className="ty-definition-import__file">
+            <span className="ty-definition-import__file-name">{picked.name}</span>
+            <Button
+              variant="quiet"
+              size="compact"
+              onPress={() => {
+                refocusPicker.current = true
+                setPicked(null)
+              }}
+            >
+              {l.chooseAnother}
+            </Button>
+          </div>
+          <div role="status" aria-live="polite" className="ty-definition-import__status">
+            {picked.status === 'reading' ? <p className="ty-definition-import__reading">{l.reading}</p> : null}
+            {check?.ok ? (
+              <InlineNotice tone="success" urgency="none">
+                {fill(l.valid, { nodes: check.graph.nodes.length, connectors: check.graph.connectors.length }, locale)}
+              </InlineNotice>
+            ) : null}
+            {check && !check.ok ? (
+              <InlineNotice tone="danger" urgency="none" title={l.invalidTitle}>
+                <ul className="ty-definition-import__errors">
+                  {check.errors.map((e, i) => (
+                    <li key={i}>{e}</li>
+                  ))}
+                </ul>
+              </InlineNotice>
+            ) : null}
+          </div>
+        </div>
+      ) : (
+        <DropZone className="ty-definition-import__zone" dir={direction} aria-label={l.dropHere} onDrop={(e) => void onDrop(e)}>
+          {({ isDropTarget }) => (
+            <>
+              <FileUp className="ty-definition-import__icon" aria-hidden="true" focusable="false" />
+              <p className="ty-definition-import__instruction" data-drop-target={isDropTarget || undefined}>
+                {coarse ? l.chooseFile : isDropTarget ? l.dropActive : l.dropHere}
+              </p>
+              <p className="ty-definition-import__hint">{l.fileHint}</p>
+              <FileTrigger acceptedFileTypes={['application/json', '.json']} onSelect={(files) => void accept(files?.[0])}>
+                <Button ref={pickerRef} variant="secondary">
+                  {l.chooseFile}
+                </Button>
+              </FileTrigger>
+            </>
+          )}
+        </DropZone>
+      )}
+    </SectionedModal>
+  )
+}

package/src/flow/dialogs/FlowSettingsDialog.test.tsx

@@ -0,0 +1,95 @@
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { TympanProvider } from '../../index'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { createDialogStack, DialogStackProvider, type FlowSettingsPayload } from '../state/dialogStack'
+import { FlowSettingsDialog, flowSettingsPatch } from './FlowSettingsDialog'
+
+function setup(payload: FlowSettingsPayload, onSave = vi.fn(() => Promise.resolve()), locale?: string) {
+  const stack = createDialogStack()
+  const view = render(
+    <TympanProvider {...(locale ? { locale } : {})}>
+      <DialogStackProvider stack={stack}>
+        <FlowSettingsDialog onSave={onSave} />
+      </DialogStackProvider>
+    </TympanProvider>,
+  )
+  act(() => stack.open('flow-settings', payload))
+  return { ...view, stack, onSave }
+}
+
+describe('FlowSettingsDialog', () => {
+  it('shows no slug or lifecycle controls when only name and description were supplied', async () => {
+    const { baseElement } = setup({ name: 'Pricing', description: 'd' })
+    expect(screen.getByRole('textbox', { name: /Name/ })).toHaveValue('Pricing')
+    expect(screen.queryByText('Address name')).toBeNull()
+    expect(screen.queryByRole('switch')).toBeNull()
+    await expectNoAxeViolations(baseElement)
+  })
+
+  it('sends a cleared slug as null', async () => {
+    const { onSave } = setup({ name: 'Pricing', description: '', slug: 'pricing' })
+    await userEvent.clear(screen.getByRole('textbox', { name: /Address name/ }))
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(onSave).toHaveBeenCalledWith({ name: 'Pricing', description: '', slug: null })
+  })
+
+  it('sends isDraft false when draft is switched off and nothing about active', async () => {
+    const { onSave } = setup({ name: 'Pricing', description: '', isDraft: true, isActive: true })
+    await userEvent.click(screen.getByRole('switch', { name: /Draft/ }))
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(onSave).toHaveBeenCalledWith({ name: 'Pricing', description: '', isDraft: false })
+  })
+
+  it('does not save a blank name and shows a field error', async () => {
+    const { onSave } = setup({ name: 'Pricing', description: '' })
+    await userEvent.clear(screen.getByRole('textbox', { name: /Name/ }))
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(onSave).not.toHaveBeenCalled()
+    expect(screen.getByText('Give the flow a name.')).toBeInTheDocument()
+  })
+
+  it('stays open with values intact when onSave rejects', async () => {
+    const onSave = vi.fn(() => Promise.reject(new Error('conflict')))
+    const { stack } = setup({ name: 'Pricing', description: 'd' }, onSave)
+    await userEvent.type(screen.getByRole('textbox', { name: /Name/ }), ' v2')
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(stack.getState().active?.kind).toBe('flow-settings')
+    expect(screen.getByRole('textbox', { name: /Name/ })).toHaveValue('Pricing v2')
+  })
+
+  it('saves on Enter in the name field but not in the description', async () => {
+    const { onSave } = setup({ name: 'Pricing', description: '' })
+    await userEvent.type(screen.getByRole('textbox', { name: /Description/ }), 'line{Enter}')
+    expect(onSave).not.toHaveBeenCalled()
+    await userEvent.type(screen.getByRole('textbox', { name: /Name/ }), '{Enter}')
+    expect(onSave).toHaveBeenCalledTimes(1)
+  })
+
+  it('links each switch to its changing sentence', () => {
+    setup({ name: 'P', description: '', isDraft: false, isActive: true })
+    expect(screen.getByRole('switch', { name: /Draft/ })).toHaveAccessibleDescription('Published: edits need a new version.')
+  })
+
+  it('builds patches only from changes', () => {
+    expect(flowSettingsPatch({ name: 'a', description: 'b', slug: null, isDraft: false }, { name: ' a ', description: 'b', slug: '', isDraft: false })).toEqual({ name: 'a', description: 'b' })
+  })
+
+  it('uses built-in es strings and lays out right to left in Arabic', () => {
+    setup({ name: 'P', description: '' }, undefined, 'es')
+    expect(screen.getByText('Ajustes del flujo')).toBeInTheDocument()
+  })
+
+  it('lays out right to left in Arabic', () => {
+    setup({ name: 'P', description: '' }, undefined, 'ar')
+    expect(screen.getByRole('textbox', { name: /Name/ }).closest('[dir]')).toHaveAttribute('dir', 'rtl')
+  })
+
+  it('fills the screen on phones and shows switches with system colours', () => {
+    const css = cssOf('flow/dialogs/dialogs.css')
+    expect(mediaBlock(css, /\(max-width: 639px\)/)).toMatch(/ty-flow-settings[\s\S]*100vw/)
+    expect(css).toMatch(/min-block-size: var\(--ty-control-target, 44px\)/)
+  })
+})

package/src/flow/dialogs/FlowSettingsDialog.tsx

@@ -0,0 +1,242 @@
+// FlowSettingsDialog: edits a flow's name, description and (when the opener
+// knows them) its slug and lifecycle switches. Save sends name and description
+// always, and every other field only when it changed.
+
+import { useEffect, useId, useState, type KeyboardEvent } from 'react'
+import { Button, Fieldset, Switch, TextArea, TextField } from '../../index'
+import { SectionedModal } from '../internal/SectionedModal'
+import { defineLabels, useFlowLocale, useLabels } from '../internal/labels'
+import { useActiveDialog, useDialogStack, type FlowSettingsPayload } from '../state/dialogStack'
+
+export interface FlowSettingsPatch {
+  name: string
+  description: string
+  slug?: string | null
+  isDraft?: boolean
+  isActive?: boolean
+}
+
+export interface FlowSettingsDialogLabels {
+  eyebrow: string
+  title: string
+  subtitle: string
+  name: string
+  nameRequired: string
+  description: string
+  slug: string
+  slugHint: string
+  lifecycle: string
+  draft: string
+  draftOn: string
+  draftOff: string
+  active: string
+  activeOn: string
+  activeOff: string
+  cancel: string
+  save: string
+  saving: string
+}
+
+export const flowSettingsDialogLabels = defineLabels<FlowSettingsDialogLabels>('FlowSettingsDialog', {
+  en: {
+    eyebrow: 'Flow',
+    title: 'Flow settings',
+    subtitle: 'Name, description and lifecycle of this flow.',
+    name: 'Name',
+    nameRequired: 'Give the flow a name.',
+    description: 'Description',
+    slug: 'Address name',
+    slugHint: 'Leave blank to use the generated one.',
+    lifecycle: 'Lifecycle',
+    draft: 'Draft',
+    draftOn: 'Editable; runs are not affected.',
+    draftOff: 'Published: edits need a new version.',
+    active: 'Active',
+    activeOn: 'Listed and runnable.',
+    activeOff: 'Archived: hidden from default listings.',
+    cancel: 'Cancel',
+    save: 'Save',
+    saving: 'Saving',
+  },
+  'pt-BR': {
+    eyebrow: 'Fluxo',
+    title: 'Configurações do fluxo',
+    subtitle: 'Nome, descrição e ciclo de vida deste fluxo.',
+    name: 'Nome',
+    nameRequired: 'Dê um nome ao fluxo.',
+    description: 'Descrição',
+    slug: 'Nome no endereço',
+    slugHint: 'Deixe em branco para usar o gerado.',
+    lifecycle: 'Ciclo de vida',
+    draft: 'Rascunho',
+    draftOn: 'Editável; execuções não são afetadas.',
+    draftOff: 'Publicado: edições exigem nova versão.',
+    active: 'Ativo',
+    activeOn: 'Listado e executável.',
+    activeOff: 'Arquivado: fora das listagens padrão.',
+    cancel: 'Cancelar',
+    save: 'Salvar',
+    saving: 'Salvando',
+  },
+  es: {
+    eyebrow: 'Flujo',
+    title: 'Ajustes del flujo',
+    subtitle: 'Nombre, descripción y ciclo de vida de este flujo.',
+    name: 'Nombre',
+    nameRequired: 'Dale un nombre al flujo.',
+    description: 'Descripción',
+    slug: 'Nombre en la dirección',
+    slugHint: 'Déjalo en blanco para usar el generado.',
+    lifecycle: 'Ciclo de vida',
+    draft: 'Borrador',
+    draftOn: 'Editable; las ejecuciones no se ven afectadas.',
+    draftOff: 'Publicado: los cambios requieren una nueva versión.',
+    active: 'Activo',
+    activeOn: 'Listado y ejecutable.',
+    activeOff: 'Archivado: oculto en los listados predeterminados.',
+    cancel: 'Cancelar',
+    save: 'Guardar',
+    saving: 'Guardando',
+  },
+})
+export const defaultFlowSettingsDialogLabels = flowSettingsDialogLabels.bundles.en
+
+export interface FlowSettingsDialogProps {
+  onSave: (patch: FlowSettingsPatch) => Promise<void>
+  labels?: Partial<FlowSettingsDialogLabels>
+}
+
+/** What the person is editing; `undefined` switches are not offered. */
+interface Sheet {
+  name: string
+  description: string
+  slug: string
+  isDraft?: boolean
+  isActive?: boolean
+}
+
+const sheetFrom = (p: FlowSettingsPayload): Sheet => ({
+  name: p.name,
+  description: p.description,
+  slug: p.slug ?? '',
+  ...(p.isDraft !== undefined ? { isDraft: p.isDraft } : {}),
+  ...(p.isActive !== undefined ? { isActive: p.isActive } : {}),
+})
+
+/** The patch for the edited values against the opening data. */
+export function flowSettingsPatch(original: FlowSettingsPayload, edited: Sheet): FlowSettingsPatch {
+  const patch: FlowSettingsPatch = { name: edited.name.trim(), description: edited.description.trim() }
+  const newSlug = edited.slug.trim()
+  if (original.slug !== undefined && newSlug !== (original.slug ?? '')) patch.slug = newSlug || null
+  const flips = (['isDraft', 'isActive'] as const).filter((k) => original[k] !== undefined && edited[k] !== undefined && edited[k] !== original[k])
+  for (const k of flips) patch[k] = edited[k]!
+  return patch
+}
+
+/** Enter saves from single-line text inputs only (the description keeps its line breaks). */
+const savesOnEnter = (e: KeyboardEvent<HTMLElement>) => e.key === 'Enter' && !e.shiftKey && e.target instanceof HTMLInputElement && (e.target.type === 'text' || e.target.type === '')
+
+export function FlowSettingsDialog({ onSave, labels }: FlowSettingsDialogProps) {
+  const l = useLabels(flowSettingsDialogLabels, labels)
+  const { direction } = useFlowLocale()
+  const opened = useActiveDialog<FlowSettingsPayload>('flow-settings')
+  const stack = useDialogStack()
+  const original = opened?.payload ?? null
+  const [sheet, setSheet] = useState<Sheet>({ name: '', description: '', slug: '' })
+  const [blankName, setBlankName] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const draftNote = useId()
+  const activeNote = useId()
+
+  useEffect(() => {
+    if (!original) return
+    setSheet(sheetFrom(original))
+    setBlankName(false)
+    setSaving(false)
+  }, [original])
+
+  if (!original) return null
+  const put = (change: Partial<Sheet>) => setSheet((s) => ({ ...s, ...change }))
+
+  const commit = async () => {
+    if (saving) return
+    if (!sheet.name.trim()) return setBlankName(true)
+    setSaving(true)
+    try {
+      await onSave(flowSettingsPatch(original, sheet))
+      stack.close()
+    } catch {
+      // The host reports the error; the values stay for another try.
+      setSaving(false)
+    }
+  }
+
+  const switches = [
+    { key: 'isDraft' as const, label: l.draft, on: l.draftOn, off: l.draftOff, noteId: draftNote },
+    { key: 'isActive' as const, label: l.active, on: l.activeOn, off: l.activeOff, noteId: activeNote },
+  ].filter((s) => sheet[s.key] !== undefined)
+
+  return (
+    <SectionedModal
+      isOpen
+      onOpenChange={(stillOpen) => {
+        if (!stillOpen && !saving) stack.close()
+      }}
+      eyebrow={l.eyebrow}
+      title={l.title}
+      subtitle={l.subtitle}
+      width="regular"
+      busy={saving}
+      className="ty-flow-settings"
+      footer={
+        <>
+          <Button variant="secondary" onPress={() => stack.close()} disabled={saving}>
+            {l.cancel}
+          </Button>
+          <Button variant="primary" busy={saving} busyLabel={l.saving} onPress={() => void commit()}>
+            {l.save}
+          </Button>
+        </>
+      }
+    >
+      <div
+        className="ty-flow-settings__fields"
+        dir={direction}
+        onKeyDown={(e) => {
+          if (!savesOnEnter(e)) return
+          e.preventDefault()
+          void commit()
+        }}
+      >
+        <TextField
+          label={l.name}
+          value={sheet.name}
+          required
+          readOnly={saving}
+          onChange={(name) => {
+            put({ name })
+            if (name.trim()) setBlankName(false)
+          }}
+          {...(blankName ? { errorMessage: l.nameRequired } : {})}
+        />
+        <TextArea label={l.description} value={sheet.description} onChange={(description) => put({ description })} readOnly={saving} rows={3} />
+        {original.slug !== undefined && <TextField label={l.slug} hint={l.slugHint} value={sheet.slug} onChange={(slug) => put({ slug })} readOnly={saving} />}
+        {switches.length > 0 && (
+          <Fieldset legend={l.lifecycle}>
+            {switches.map((s) => (
+              <div key={s.key} className="ty-flow-settings__switch">
+                <Switch
+                  label={s.label}
+                  isSelected={sheet[s.key]!}
+                  onChange={(v) => put({ [s.key]: v })}
+                  readOnly={saving}
+                  description={<span id={s.noteId}>{sheet[s.key] ? s.on : s.off}</span>}
+                />
+              </div>
+            ))}
+          </Fieldset>
+        )}
+      </div>
+    </SectionedModal>
+  )
+}