@k2b/ui 0.40.0 → 0.41.0

package/dist/ssr/layout/SettingsModal.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/SettingsModal.tsx"],"sourcesContent":["import { children, createEffect, createMemo, createSignal, createUniqueId, For, type JSX, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"./scroll-fade\";\nimport { useSettingsMessages } from \"./settings-messages\";\nimport { assertUniqueStableUiIds } from \"./stable-id\";\n\nconst SETTINGS_MODAL_TAB = Symbol(\"SettingsModal.Tab\");\nconst SETTINGS_MODAL_GROUP = Symbol(\"SettingsModal.Group\");\nconst SETTINGS_MODAL_FOOTER = Symbol(\"SettingsModal.Footer\");\n\nexport type SettingsModalTabTone = \"default\" | \"danger\";\n\nexport type SettingsModalTabProps = {\n  id: string;\n  title: string;\n  description?: string;\n  icon?: string;\n  tone?: SettingsModalTabTone;\n  children: JSX.Element;\n};\n\nexport type SettingsModalGroupProps = {\n  title: string;\n  children: JSX.Element;\n};\n\nexport type SettingsModalFooterProps = {\n  children: JSX.Element;\n};\n\ntype SettingsModalTabDefinition = {\n  readonly kind: typeof SETTINGS_MODAL_TAB;\n  readonly props: SettingsModalTabProps;\n};\n\ntype SettingsModalGroupDefinition = {\n  readonly kind: typeof SETTINGS_MODAL_GROUP;\n  readonly props: SettingsModalGroupProps;\n};\n\ntype SettingsModalFooterDefinition = {\n  readonly kind: typeof SETTINGS_MODAL_FOOTER;\n  readonly props: SettingsModalFooterProps;\n};\n\nexport type SettingsModalProps = {\n  /** Accessible name for the settings surface. */\n  title: string;\n  /** @deprecated Retained for source compatibility; tab descriptions carry the visible context. */\n  subtitle?: string;\n  /** @deprecated Retained for source compatibility; tab icons identify the rail entries. */\n  icon?: string;\n  defaultTab?: string;\n  activeTab?: string;\n  onTabChange?: (id: string) => void;\n  onClose?: () => void;\n  closeLabel?: string;\n  class?: string;\n  children: JSX.Element;\n};\n\ntype SettingsModalComponent = ((props: SettingsModalProps) => JSX.Element) & {\n  Tab: (props: SettingsModalTabProps) => JSX.Element;\n  Group: (props: SettingsModalGroupProps) => JSX.Element;\n  Footer: (props: SettingsModalFooterProps) => JSX.Element;\n};\n\nconst isTabDefinition = (value: unknown): value is SettingsModalTabDefinition =>\n  !!value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_MODAL_TAB;\n\nconst isGroupDefinition = (value: unknown): value is SettingsModalGroupDefinition =>\n  !!value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_MODAL_GROUP;\n\nconst isFooterDefinition = (value: unknown): value is SettingsModalFooterDefinition =>\n  !!value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_MODAL_FOOTER;\n\nconst collectTabs = (value: unknown): SettingsModalTabDefinition[] => {\n  if (Array.isArray(value)) return value.flatMap(collectTabs);\n  if (isGroupDefinition(value)) return collectTabs(value.props.children);\n  return isTabDefinition(value) ? [value] : [];\n};\n\nconst collectRailEntries = (value: unknown): (SettingsModalGroupDefinition | SettingsModalTabDefinition)[] => {\n  if (Array.isArray(value)) return value.flatMap(collectRailEntries);\n  if (isGroupDefinition(value) || isTabDefinition(value)) return [value];\n  return [];\n};\n\nconst splitPanelChildren = (value: unknown): { content: JSX.Element[]; footer?: SettingsModalFooterDefinition } => {\n  if (Array.isArray(value)) {\n    return value.reduce<{ content: JSX.Element[]; footer?: SettingsModalFooterDefinition }>(\n      (result, entry) => {\n        const next = splitPanelChildren(entry);\n        result.content.push(...next.content);\n        if (next.footer) result.footer = next.footer;\n        return result;\n      },\n      { content: [] },\n    );\n  }\n  return isFooterDefinition(value) ? { content: [], footer: value } : { content: [value as JSX.Element] };\n};\n\nfunction SettingsModalTab(props: SettingsModalTabProps): JSX.Element {\n  return { kind: SETTINGS_MODAL_TAB, props } satisfies SettingsModalTabDefinition as unknown as JSX.Element;\n}\n\nfunction SettingsModalGroup(props: SettingsModalGroupProps): JSX.Element {\n  return { kind: SETTINGS_MODAL_GROUP, props } satisfies SettingsModalGroupDefinition as unknown as JSX.Element;\n}\n\nfunction SettingsModalFooter(props: SettingsModalFooterProps): JSX.Element {\n  return { kind: SETTINGS_MODAL_FOOTER, props } satisfies SettingsModalFooterDefinition as unknown as JSX.Element;\n}\n\nconst SettingsModal = ((props: SettingsModalProps): JSX.Element => {\n  const messages = useUiMessages();\n  const settingsMessages = useSettingsMessages();\n  const resolved = children(() => props.children);\n  const railEntries = createMemo(() => collectRailEntries(resolved()));\n  const tabs = createMemo(() => {\n    const collected = collectTabs(resolved());\n    assertUniqueStableUiIds(\n      collected.map((tab) => tab.props.id),\n      \"SettingsModal.Tab id\",\n    );\n    return collected;\n  });\n  const instanceId = `k2b-settings-${createUniqueId()}`;\n  const tabRefs = new Map<string, HTMLButtonElement>();\n  let tabList: HTMLElement | undefined;\n  // Narrow surfaces show the categories as one scrolling row; the fade tells that more follow.\n  createScrollFade(\n    () => tabList,\n    () => true,\n  );\n  const firstTabId = () => tabs()[0]?.props.id ?? \"\";\n  const [localActiveTab, setLocalActiveTab] = createSignal(props.defaultTab ?? firstTabId());\n  const requestedActiveTabId = () => props.activeTab ?? (localActiveTab() || firstTabId());\n  const resolvedActiveTabId = createMemo(() =>\n    tabs().some((tab) => tab.props.id === requestedActiveTabId()) ? requestedActiveTabId() : firstTabId(),\n  );\n  // `defaultTab`, `activeTab` and clicks can select a category past the edge of the scrolling row or rail.\n  createEffect(() => {\n    const id = resolvedActiveTabId();\n    queueMicrotask(() => tabRefs.get(id)?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" }));\n  });\n  const activeTab = () => tabs().find((tab) => tab.props.id === resolvedActiveTabId()) ?? null;\n  const resolvedPanelChildren = children(() => activeTab()?.props.children);\n  const panelChildren = createMemo(() => splitPanelChildren(resolvedPanelChildren()));\n\n  const selectTab = (id: string) => {\n    if (props.activeTab === undefined) setLocalActiveTab(id);\n    props.onTabChange?.(id);\n  };\n\n  const moveTabFocus = (event: KeyboardEvent, currentId: string) => {\n    const currentIndex = tabs().findIndex((tab) => tab.props.id === currentId);\n    if (currentIndex < 0 || tabs().length === 0) return;\n    let nextIndex: number | null = null;\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") nextIndex = (currentIndex + 1) % tabs().length;\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") nextIndex = (currentIndex - 1 + tabs().length) % tabs().length;\n    if (event.key === \"Home\") nextIndex = 0;\n    if (event.key === \"End\") nextIndex = tabs().length - 1;\n    if (nextIndex === null) return;\n    event.preventDefault();\n    const nextTab = tabs()[nextIndex];\n    if (!nextTab) return;\n    selectTab(nextTab.props.id);\n    tabRefs.get(nextTab.props.id)?.focus();\n  };\n\n  const tabId = (id: string) => `${instanceId}-tab-${id}`;\n  const panelId = (id: string) => `${instanceId}-panel-${id}`;\n\n  const TabButton = (tab: SettingsModalTabDefinition): JSX.Element => {\n    const active = () => resolvedActiveTabId() === tab.props.id;\n    return (\n      <button\n        ref={(element) => tabRefs.set(tab.props.id, element)}\n        id={tabId(tab.props.id)}\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={active()}\n        aria-controls={active() ? panelId(tab.props.id) : undefined}\n        tabIndex={active() ? 0 : -1}\n        data-state={active() ? \"active\" : \"idle\"}\n        data-active={active() ? \"true\" : undefined}\n        data-tone={tab.props.tone ?? \"default\"}\n        onClick={() => selectTab(tab.props.id)}\n        onKeyDown={(event) => moveTabFocus(event, tab.props.id)}\n      >\n        <Show when={tab.props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n        <span class=\"k2b-truncate-fade\">{tab.props.title}</span>\n      </button>\n    );\n  };\n\n  return (\n    <div class={`k2b-settings ${props.class ?? \"\"}`} role=\"region\" aria-label={props.title}>\n      <Show when={props.onClose}>\n        <IconButton class=\"k2b-settings__close\" label={props.closeLabel ?? messages().close} onClick={props.onClose}>\n          <i class=\"ti ti-x\" aria-hidden=\"true\" />\n        </IconButton>\n      </Show>\n      <aside class=\"k2b-settings__rail\">\n        <nav\n          ref={tabList}\n          class=\"k2b-settings__tabs\"\n          aria-label={settingsMessages().sectionsLabel({ title: props.title })}\n          role=\"tablist\"\n          data-scroll-fade-mode=\"both\"\n          data-scroll-fade-axis=\"horizontal\"\n        >\n          <For each={railEntries()}>\n            {(entry) =>\n              isGroupDefinition(entry) ? (\n                <div class=\"k2b-settings__tab-group\" role=\"presentation\">\n                  <span class=\"k2b-settings__tab-group-label k2b-truncate-fade\" aria-hidden=\"true\">\n                    {entry.props.title}\n                  </span>\n                  <For each={collectTabs(entry.props.children)}>{(tab) => TabButton(tab)}</For>\n                </div>\n              ) : (\n                TabButton(entry)\n              )\n            }\n          </For>\n        </nav>\n      </aside>\n      <div class=\"k2b-settings__content\">\n        <Show when={activeTab()}>\n          {(tab) => (\n            <section\n              id={panelId(tab().props.id)}\n              class=\"k2b-settings__body\"\n              role=\"tabpanel\"\n              aria-labelledby={tabId(tab().props.id)}\n              tabIndex={0}\n              data-tone={tab().props.tone ?? \"default\"}\n            >\n              <div class=\"k2b-settings__section\">\n                <div class=\"k2b-settings__section-heading\">\n                  <h2>{tab().props.title}</h2>\n                  <Show when={tab().props.description}>{(description) => <p>{description()}</p>}</Show>\n                </div>\n                {panelChildren().content}\n              </div>\n            </section>\n          )}\n        </Show>\n        <Show when={panelChildren().footer}>{(footer) => <footer class=\"k2b-settings__footer\">{footer().props.children}</footer>}</Show>\n      </div>\n    </div>\n  );\n}) as SettingsModalComponent;\n\nSettingsModal.Tab = SettingsModalTab;\nSettingsModal.Group = SettingsModalGroup;\nSettingsModal.Footer = SettingsModalFooter;\n\nexport default SettingsModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/SettingsModal.tsx"],"sourcesContent":["import { type Accessor, children, createEffect, createMemo, createSignal, createUniqueId, For, type JSX, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"./scroll-fade\";\nimport { useSettingsMessages } from \"./settings-messages\";\nimport { assertUniqueStableUiIds } from \"./stable-id\";\n\nconst SETTINGS_MODAL_TAB = Symbol(\"SettingsModal.Tab\");\nconst SETTINGS_MODAL_GROUP = Symbol(\"SettingsModal.Group\");\nconst SETTINGS_MODAL_FOOTER = Symbol(\"SettingsModal.Footer\");\n\nexport type SettingsModalTabTone = \"default\" | \"danger\";\n\nexport type SettingsModalTabProps = {\n  id: string;\n  title: string;\n  description?: string;\n  icon?: string;\n  tone?: SettingsModalTabTone;\n  children: JSX.Element;\n};\n\nexport type SettingsModalGroupProps = {\n  title: string;\n  children: JSX.Element;\n};\n\nexport type SettingsModalFooterProps = {\n  children: JSX.Element;\n};\n\ntype SettingsModalTabDefinition = {\n  readonly kind: typeof SETTINGS_MODAL_TAB;\n  readonly props: SettingsModalTabProps;\n};\n\ntype SettingsModalGroupDefinition = {\n  readonly kind: typeof SETTINGS_MODAL_GROUP;\n  readonly props: SettingsModalGroupProps;\n  /** The group's children, created once and resolved like `children()`, so a `<Show>` tab follows its condition. */\n  readonly resolved: Accessor<unknown>;\n};\n\ntype SettingsModalFooterDefinition = {\n  readonly kind: typeof SETTINGS_MODAL_FOOTER;\n  readonly props: SettingsModalFooterProps;\n};\n\nexport type SettingsModalProps = {\n  /** Accessible name for the settings surface. */\n  title: string;\n  /** @deprecated Retained for source compatibility; tab descriptions carry the visible context. */\n  subtitle?: string;\n  /** @deprecated Retained for source compatibility; tab icons identify the rail entries. */\n  icon?: string;\n  defaultTab?: string;\n  activeTab?: string;\n  onTabChange?: (id: string) => void;\n  onClose?: () => void;\n  closeLabel?: string;\n  class?: string;\n  children: JSX.Element;\n};\n\ntype SettingsModalComponent = ((props: SettingsModalProps) => JSX.Element) & {\n  Tab: (props: SettingsModalTabProps) => JSX.Element;\n  Group: (props: SettingsModalGroupProps) => JSX.Element;\n  Footer: (props: SettingsModalFooterProps) => JSX.Element;\n};\n\nconst isTabDefinition = (value: unknown): value is SettingsModalTabDefinition =>\n  !!value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_MODAL_TAB;\n\nconst isGroupDefinition = (value: unknown): value is SettingsModalGroupDefinition =>\n  !!value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_MODAL_GROUP;\n\nconst isFooterDefinition = (value: unknown): value is SettingsModalFooterDefinition =>\n  !!value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_MODAL_FOOTER;\n\nconst collectTabs = (value: unknown): SettingsModalTabDefinition[] => {\n  if (Array.isArray(value)) return value.flatMap(collectTabs);\n  if (isGroupDefinition(value)) return collectTabs(value.resolved());\n  return isTabDefinition(value) ? [value] : [];\n};\n\nconst collectRailEntries = (value: unknown): (SettingsModalGroupDefinition | SettingsModalTabDefinition)[] => {\n  if (Array.isArray(value)) return value.flatMap(collectRailEntries);\n  if (isGroupDefinition(value) || isTabDefinition(value)) return [value];\n  return [];\n};\n\nconst splitPanelChildren = (value: unknown): { content: JSX.Element[]; footer?: SettingsModalFooterDefinition } => {\n  if (Array.isArray(value)) {\n    return value.reduce<{ content: JSX.Element[]; footer?: SettingsModalFooterDefinition }>(\n      (result, entry) => {\n        const next = splitPanelChildren(entry);\n        result.content.push(...next.content);\n        if (next.footer) result.footer = next.footer;\n        return result;\n      },\n      { content: [] },\n    );\n  }\n  return isFooterDefinition(value) ? { content: [], footer: value } : { content: [value as JSX.Element] };\n};\n\nfunction SettingsModalTab(props: SettingsModalTabProps): JSX.Element {\n  return { kind: SETTINGS_MODAL_TAB, props } satisfies SettingsModalTabDefinition as unknown as JSX.Element;\n}\n\nfunction SettingsModalGroup(props: SettingsModalGroupProps): JSX.Element {\n  // The modal's own `children()` does not reach into a group. Resolving here keeps the other tabs of a group the same\n  // objects when a conditional tab comes or goes, so the open panel and its unsaved input stay in place.\n  const resolved = children(() => props.children);\n  return { kind: SETTINGS_MODAL_GROUP, props, resolved } satisfies SettingsModalGroupDefinition as unknown as JSX.Element;\n}\n\nfunction SettingsModalFooter(props: SettingsModalFooterProps): JSX.Element {\n  return { kind: SETTINGS_MODAL_FOOTER, props } satisfies SettingsModalFooterDefinition as unknown as JSX.Element;\n}\n\nconst SettingsModal = ((props: SettingsModalProps): JSX.Element => {\n  const messages = useUiMessages();\n  const settingsMessages = useSettingsMessages();\n  const resolved = children(() => props.children);\n  const railEntries = createMemo(() => collectRailEntries(resolved()));\n  const tabs = createMemo(() => {\n    const collected = collectTabs(resolved());\n    assertUniqueStableUiIds(\n      collected.map((tab) => tab.props.id),\n      \"SettingsModal.Tab id\",\n    );\n    return collected;\n  });\n  const instanceId = `k2b-settings-${createUniqueId()}`;\n  const tabRefs = new Map<string, HTMLButtonElement>();\n  let tabList: HTMLElement | undefined;\n  // Narrow surfaces show the categories as one scrolling row; the fade tells that more follow.\n  createScrollFade(\n    () => tabList,\n    () => true,\n  );\n  const firstTabId = () => tabs()[0]?.props.id ?? \"\";\n  const [localActiveTab, setLocalActiveTab] = createSignal(props.defaultTab ?? firstTabId());\n  const requestedActiveTabId = () => props.activeTab ?? (localActiveTab() || firstTabId());\n  const resolvedActiveTabId = createMemo(() =>\n    tabs().some((tab) => tab.props.id === requestedActiveTabId()) ? requestedActiveTabId() : firstTabId(),\n  );\n  // `defaultTab`, `activeTab` and clicks can select a category past the edge of the scrolling row or rail.\n  createEffect(() => {\n    const id = resolvedActiveTabId();\n    queueMicrotask(() => tabRefs.get(id)?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" }));\n  });\n  // A memo, so a change elsewhere in the tab list does not create the open panel again.\n  const activeTab = createMemo(() => tabs().find((tab) => tab.props.id === resolvedActiveTabId()) ?? null);\n  const resolvedPanelChildren = children(() => activeTab()?.props.children);\n  const panelChildren = createMemo(() => splitPanelChildren(resolvedPanelChildren()));\n\n  const selectTab = (id: string) => {\n    if (props.activeTab === undefined) setLocalActiveTab(id);\n    props.onTabChange?.(id);\n  };\n\n  const moveTabFocus = (event: KeyboardEvent, currentId: string) => {\n    const currentIndex = tabs().findIndex((tab) => tab.props.id === currentId);\n    if (currentIndex < 0 || tabs().length === 0) return;\n    let nextIndex: number | null = null;\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") nextIndex = (currentIndex + 1) % tabs().length;\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") nextIndex = (currentIndex - 1 + tabs().length) % tabs().length;\n    if (event.key === \"Home\") nextIndex = 0;\n    if (event.key === \"End\") nextIndex = tabs().length - 1;\n    if (nextIndex === null) return;\n    event.preventDefault();\n    const nextTab = tabs()[nextIndex];\n    if (!nextTab) return;\n    selectTab(nextTab.props.id);\n    tabRefs.get(nextTab.props.id)?.focus();\n  };\n\n  const tabId = (id: string) => `${instanceId}-tab-${id}`;\n  const panelId = (id: string) => `${instanceId}-panel-${id}`;\n\n  const TabButton = (tab: SettingsModalTabDefinition): JSX.Element => {\n    const active = () => resolvedActiveTabId() === tab.props.id;\n    return (\n      <button\n        ref={(element) => tabRefs.set(tab.props.id, element)}\n        id={tabId(tab.props.id)}\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={active()}\n        aria-controls={active() ? panelId(tab.props.id) : undefined}\n        tabIndex={active() ? 0 : -1}\n        data-state={active() ? \"active\" : \"idle\"}\n        data-active={active() ? \"true\" : undefined}\n        data-tone={tab.props.tone ?? \"default\"}\n        onClick={() => selectTab(tab.props.id)}\n        onKeyDown={(event) => moveTabFocus(event, tab.props.id)}\n      >\n        <Show when={tab.props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n        <span class=\"k2b-truncate-fade-lines\">{tab.props.title}</span>\n      </button>\n    );\n  };\n\n  return (\n    <div class={`k2b-settings ${props.class ?? \"\"}`} role=\"region\" aria-label={props.title}>\n      <Show when={props.onClose}>\n        <IconButton class=\"k2b-settings__close\" label={props.closeLabel ?? messages().close} onClick={props.onClose}>\n          <i class=\"ti ti-x\" aria-hidden=\"true\" />\n        </IconButton>\n      </Show>\n      <aside class=\"k2b-settings__rail\">\n        <nav\n          ref={tabList}\n          class=\"k2b-settings__tabs\"\n          aria-label={settingsMessages().sectionsLabel({ title: props.title })}\n          role=\"tablist\"\n          data-scroll-fade-mode=\"both\"\n          data-scroll-fade-axis=\"horizontal\"\n        >\n          <For each={railEntries()}>\n            {(entry) =>\n              isGroupDefinition(entry) ? (\n                <div class=\"k2b-settings__tab-group\" role=\"presentation\">\n                  <span class=\"k2b-settings__tab-group-label k2b-truncate-fade\" aria-hidden=\"true\">\n                    {entry.props.title}\n                  </span>\n                  <For each={collectTabs(entry.resolved())}>{(tab) => TabButton(tab)}</For>\n                </div>\n              ) : (\n                TabButton(entry)\n              )\n            }\n          </For>\n        </nav>\n      </aside>\n      <div class=\"k2b-settings__content\">\n        <Show when={activeTab()}>\n          {(tab) => (\n            <section\n              id={panelId(tab().props.id)}\n              class=\"k2b-settings__body\"\n              role=\"tabpanel\"\n              aria-labelledby={tabId(tab().props.id)}\n              tabIndex={0}\n              data-tone={tab().props.tone ?? \"default\"}\n            >\n              <div class=\"k2b-settings__section\">\n                <div class=\"k2b-settings__section-heading\">\n                  <h2>{tab().props.title}</h2>\n                  <Show when={tab().props.description}>{(description) => <p>{description()}</p>}</Show>\n                </div>\n                {panelChildren().content}\n              </div>\n            </section>\n          )}\n        </Show>\n        <Show when={panelChildren().footer}>{(footer) => <footer class=\"k2b-settings__footer\">{footer().props.children}</footer>}</Show>\n      </div>\n    </div>\n  );\n}) as SettingsModalComponent;\n\nSettingsModal.Tab = SettingsModalTab;\nSettingsModal.Group = SettingsModalGroup;\nSettingsModal.Footer = SettingsModalFooter;\n\nexport default SettingsModal;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/text-editor/TextEditor.js

@@ -27,17 +27,20 @@ var _tmpl$ = ["<div class=\"k2b-ste-size-picker\">", "", "</div>"],
 import { history, historyKeymap, redo, undo } from "@codemirror/commands";
 import { EditorView, keymap } from "@codemirror/view";
 import { clipboard } from "@k2b/stdlib/solid";
-import { createEffect, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { children, createEffect, createMemo, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Button, IconButton } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
 import { SegmentedControl } from "../actions/SegmentedControl";
 import { Toolbar } from "../actions/Toolbar";
 import { Kbd } from "../content/Kbd";
 import { dialogCore } from "../feedback/dialog-core";
+import { createDictation } from "../inputs/dictation/create-dictation";
+import { DictationBar, DictationButton, dictationBarShown } from "../inputs/dictation/Dictation";
 import { NumberInput } from "../inputs/NumberInput";
 import { LocaleProvider, useLocale } from "../intl/locale";
 import { formatShortcut, keyboardPlatform } from "../intl/shortcut";
 import BottomSheet, { bottomSheetAdaptiveOptions } from "../layout/BottomSheet";
+import { codeMirrorDictationTarget, dictationExtension } from "./dictation";
 import { createTextEditor } from "./engine";
 import { commands, formatLabels } from "./format";
 import { findTables, inspectTableStructure } from "./markdown-table";
@@ -266,6 +269,7 @@ export function TextEditor(props) {
   const locale = useLocale();
   const t = () => textEditorMessages.resolve([locale()]).t;
   const [mode, setMode] = createSignal(props.mode ?? "formatted");
+  const status = children(() => props.status);
   const [ready, setReady] = createSignal(false);
   const [recovery, setRecovery] = createSignal();
   const [notice, setNotice] = createSignal();
@@ -372,6 +376,26 @@ export function TextEditor(props) {
   let root;
   let mount;
   let editor;
+  // The view is read-only while it loads or recovers, too; dictation only runs where words can land.
+  const dictationWritable = () => !props.readOnly && !props.loading && ready() && recovery() === undefined && mode() !== "plain";
+  const dictation = createDictation({
+    source: {
+      start: options => props.dictation.source.start(options),
+      devices: () => props.dictation?.source.devices() ?? Promise.resolve([])
+    },
+    get alternative() {
+      return props.dictation?.alternative;
+    },
+    target: codeMirrorDictationTarget(() => editor?.view),
+    disabled: () => !props.dictation || !dictationWritable()
+  });
+  // A field that turns read-only or plain hides the toolbar; dictation then ends and the words so far stay.
+  // A memo compares the value, so ordinary edits never end it.
+  const dictationScope = createMemo(() => `${Boolean(props.dictation)}:${dictationWritable()}`);
+  createEffect(on(dictationScope, () => dictation.end(), {
+    defer: true
+  }));
+  const dictating = () => Boolean(props.dictation) && dictationBarShown(dictation);
   const menuBlocked = () => !!props.loading || !ready() || recovery() !== undefined;
   const blocked = () => !!props.readOnly || menuBlocked();
   const updateCheck = () => {
@@ -847,7 +871,8 @@ export function TextEditor(props) {
     }
   });
   const selectMode = next => {
-    const restoreEditorFocus = !!editor?.view.contentDOM.contains(document.activeElement);
+    // Returning from the source view removes its switch; keyboard focus then moves into the text.
+    const restoreEditorFocus = !!editor?.view.contentDOM.contains(document.activeElement) || !!root.querySelector(".k2b-ste-views")?.contains(document.activeElement);
     menuOpen = false;
     setCell(undefined);
     setMode(next);
@@ -879,7 +904,7 @@ export function TextEditor(props) {
       }), EditorView.updateListener.of(update => {
         schedulePosition();
         if (update.docChanged) queueMicrotask(() => setDocumentRevision(revision => revision + 1));
-      }), props.extensions ?? []],
+      }), props.extensions ?? [], props.dictation ? dictationExtension() : []],
       host: {
         ...props.host,
         undo: props.host?.undo ?? (() => editor && undo(editor.view)),
@@ -1083,10 +1108,10 @@ export function TextEditor(props) {
   });
   return _$ssr(_tmpl$15, `k2b-text-editor ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mode", _$escape(mode(), true), false) + _$ssrAttribute("data-readonly", props.readOnly ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", _$escape(props.loading || !ready(), true), false), _$escape(announcement()), _$escape(_$createComponent(Show, {
     get when() {
-      return !props.presentation || "status" in props || check();
+      return _$memo(() => !!(status() !== undefined && status() !== null))() && status() !== false || check();
     },
     get children() {
-      return _$ssr(_tmpl$10, _$escape(props.status), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$10, _$escape(status()), _$escape(_$createComponent(Show, {
         get when() {
           return check();
         },
@@ -1132,9 +1157,18 @@ export function TextEditor(props) {
           return t().formatting;
         },
         get children() {
-          return [_$createComponent(For, {
+          return [_$createComponent(Show, {
+            get when() {
+              return dictating();
+            },
+            get children() {
+              return _$createComponent(DictationBar, {
+                dictation: dictation
+              });
+            }
+          }), _$createComponent(For, {
             get each() {
-              return [toolbar.slice(0, 3), toolbar.slice(3, 6), toolbar.slice(6)];
+              return _$memo(() => !!dictating())() ? [] : [toolbar.slice(0, 3), toolbar.slice(3, 6), toolbar.slice(6)];
             },
             children: group => _$createComponent(Toolbar.Group, {
               "class": "k2b-ste-tool-group",
@@ -1176,27 +1210,42 @@ export function TextEditor(props) {
                 });
               }
             })
-          }), _$createComponent(SegmentedControl, {
-            "class": "k2b-ste-views",
-            size: "sm",
-            get ariaLabel() {
-              return t().view;
-            },
-            get value() {
-              return mode() === "source" ? "source" : "formatted";
+          }), _$createComponent(Show, {
+            get when() {
+              return _$memo(() => mode() === "source")() && !dictating();
             },
-            get options() {
-              return [{
-                value: "formatted",
-                label: t().formatted,
-                icon: "ti ti-typography"
-              }, {
+            get children() {
+              return _$createComponent(SegmentedControl, {
+                "class": "k2b-ste-views",
+                size: "sm",
+                get ariaLabel() {
+                  return t().view;
+                },
                 value: "source",
-                label: t().source,
-                icon: "ti ti-markdown"
-              }];
+                get options() {
+                  return [{
+                    value: "formatted",
+                    label: t().formatted,
+                    icon: "ti ti-typography"
+                  }, {
+                    value: "source",
+                    label: t().source,
+                    icon: "ti ti-markdown"
+                  }];
+                },
+                onValueChange: selectMode
+              });
+            }
+          }), _$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!props.dictation)() && !dictating();
             },
-            onValueChange: selectMode
+            get children() {
+              return _$createComponent(DictationButton, {
+                dictation: dictation,
+                "class": "k2b-ste-tool k2b-ste-dictate"
+              });
+            }
           })];
         }
       })));