@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/components/settings-view.tsx

@@ -0,0 +1,573 @@
+import type { TaPackageInfo, TaSettingsScope } from '@celljs/ta-protocol';
+import {
+    Blocks,
+    FolderOpen,
+    Globe,
+    Info,
+    Keyboard,
+    KeyRound,
+    Languages,
+    Layers,
+    Link2,
+    LogOut,
+    type LucideIcon,
+    Menu,
+    MessagesSquare,
+    Monitor,
+    Moon,
+    Palette,
+    Puzzle,
+    RefreshCw,
+    Search,
+    Smartphone,
+    Sparkles,
+    Sun,
+    Trash2,
+    Volume2,
+    Wrench,
+    X,
+} from 'lucide-react';
+import * as React from 'react';
+import { useNotices, useSettings, useWebExtensions, useWorkbench } from '../hooks';
+import type { MessageId } from '../i18n/messages';
+import { useT } from '../i18n/use-t';
+import { AGENT_SETTINGS_GROUPS, AgentSettingsUtil } from '../settings/agent-settings';
+import type { LanguageSetting, ThemeSetting } from '../settings/settings-protocol';
+import { AgentControl, ScopeBar, useAgentSettings } from './agent-settings-view';
+import { AuthDialog } from './auth-view';
+import { Icon, IconButton } from './icon';
+import { RelayDialog } from './relay-view';
+import { type Choice, Keys, Row, type RowEntry, row, Segmented, Switch } from './settings-controls';
+import { TrustedDomains } from './trusted-domains';
+import { WorkingDirectoryPicker } from './working-directory';
+
+/** A section of the settings view: `appearance`, `model`, `packages`, ... */
+export type SettingsSection = string;
+
+interface SectionEntry {
+    id: string;
+    title: string;
+    icon: LucideIcon;
+    rows: RowEntry[];
+    /** Drawn above the rows, whatever the search: the scope of the settings of ta. */
+    lead?: React.ReactNode;
+}
+
+interface Part {
+    id: string;
+    title: string;
+    sections: SectionEntry[];
+}
+
+const THEMES: Choice<ThemeSetting>[] = [
+    { value: 'system', icon: Monitor, label: 'ta.settings.theme.system' },
+    { value: 'light', icon: Sun, label: 'ta.settings.theme.light' },
+    { value: 'dark', icon: Moon, label: 'ta.settings.theme.dark' },
+];
+
+const LANGUAGES: Choice<LanguageSetting>[] = [
+    { value: 'system', icon: Globe, label: 'ta.settings.language.system' },
+    { value: 'zh-CN', label: '简体中文' },
+    { value: 'en-US', label: 'English' },
+];
+
+const GROUP_ICONS: Record<string, LucideIcon> = { model: Sparkles, conversation: MessagesSquare, context: Layers, tools: Wrench };
+
+/** The keys of the page and of the message box; `Mod` is ⌘ on a Mac, Ctrl elsewhere. */
+export const SHORTCUTS: { keys: string; label: MessageId }[] = [
+    { keys: 'Mod+,', label: 'ta.shortcut.settings' },
+    { keys: 'Mod+B', label: 'ta.shortcut.sidebar' },
+    { keys: 'Enter', label: 'ta.shortcut.send' },
+    { keys: 'Shift+Enter', label: 'ta.shortcut.newline' },
+    { keys: 'Alt+Enter', label: 'ta.shortcut.followUp' },
+    { keys: 'Esc', label: 'ta.shortcut.stop' },
+    { keys: '/', label: 'ta.shortcut.commands' },
+    { keys: '@', label: 'ta.shortcut.files' },
+    { keys: 'Mod+S', label: 'ta.shortcut.save' },
+];
+
+/**
+ * The packages pi loads, as the server lists them, those turned off too: the built-in ones turn off and
+ * stay; the others turn off and on, and go.
+ */
+function usePackages() {
+    const [workbench, bench] = useWorkbench();
+    const [, host] = useWebExtensions();
+    const [packages, setPackages] = React.useState<TaPackageInfo[]>([]);
+    const read = React.useCallback(() => bench.packages.listPackages().then(setPackages), [bench]);
+    React.useEffect(() => {
+        if (workbench.status === 'online') {
+            read().catch(() => undefined);
+        }
+    }, [workbench.status, read]);
+    const changed = async () => {
+        await host.refresh();
+        await read();
+    };
+    /** By the name of a built-in package, by the id of another. */
+    const toggle = async (pkg: TaPackageInfo, on: boolean) => {
+        setPackages(current => current.map(other => (other.id === pkg.id ? { ...other, enabled: on } : other)));
+        await bench.packages.setPackageEnabled(pkg.origin === 'builtin' ? pkg.name : pkg.id, on);
+        await changed();
+    };
+    const remove = async (pkg: TaPackageInfo) => {
+        await bench.packages.removePackage(pkg.id);
+        await changed();
+    };
+    return { packages, toggle, remove, read };
+}
+
+/** What a row of the settings opens over them. */
+type SettingsDialog = 'accounts' | 'directory' | 'relay';
+
+/** The sections of the page and of ta, by part, with their rows. */
+function useParts(scope: TaSettingsScope, onScope: (scope: TaSettingsScope) => void, onClose: () => void, onDialog: (dialog: SettingsDialog) => void): Part[] {
+    const t = useT();
+    const [{ settings }, store] = useSettings();
+    const [workbench, bench] = useWorkbench();
+    const [{ extensions, cwd }, host] = useWebExtensions();
+    const packageList = usePackages();
+    const builtinPackages = packageList.packages.filter(pkg => pkg.origin === 'builtin');
+    const agent = useAgentSettings(cwd ?? workbench.server?.cwd);
+    const [, notices] = useNotices();
+    const [busy, setBusy] = React.useState(false);
+    const run = (action: () => Promise<unknown>, done?: string) => {
+        setBusy(true);
+        action()
+            .then(() => done && notices.notify(done, { level: 'success' }))
+            .catch(error => notices.error(error))
+            .finally(() => setBusy(false));
+    };
+    const remove = async (pkg: TaPackageInfo) => {
+        const confirmed = await notices.confirm({
+            title: t('ta.packages.removeConfirm', { name: pkg.name }),
+            message: t('ta.packages.removeDetail'),
+            confirmLabel: t('ta.packages.remove'),
+            danger: true,
+        });
+        if (confirmed) {
+            run(() => packageList.remove(pkg), t('ta.packages.removed', { name: pkg.name }));
+        }
+    };
+    const toggleBuiltin = (name: string, on: boolean) => {
+        store.update({ builtinsOff: on ? settings.builtinsOff.filter(other => other !== name) : [...settings.builtinsOff, name] });
+        run(() => host.refresh());
+    };
+
+    const web: SectionEntry[] = [
+        {
+            id: 'appearance',
+            title: t('ta.settings.appearance'),
+            icon: Palette,
+            rows: [
+                row(
+                    'theme',
+                    [t('ta.settings.theme'), 'theme'],
+                    <Row label={t('ta.settings.theme')} stacked>
+                        <Segmented label={t('ta.settings.theme')} value={settings.theme} choices={THEMES} onChange={theme => store.update({ theme })} />
+                    </Row>,
+                ),
+                row(
+                    'motion',
+                    [t('ta.settings.motion'), t('ta.settings.motionHint')],
+                    <Row label={t('ta.settings.motion')} description={t('ta.settings.motionHint')}>
+                        <Switch label={t('ta.settings.motion')} checked={settings.reduceMotion} onChange={reduceMotion => store.update({ reduceMotion })} />
+                    </Row>,
+                ),
+            ],
+        },
+        {
+            id: 'language',
+            title: t('ta.settings.language'),
+            icon: Languages,
+            rows: [
+                row(
+                    'language',
+                    [t('ta.settings.displayLanguage'), 'language'],
+                    <Row label={t('ta.settings.displayLanguage')} stacked>
+                        <Segmented
+                            label={t('ta.settings.displayLanguage')}
+                            value={settings.language}
+                            choices={LANGUAGES}
+                            onChange={language => store.update({ language })}
+                        />
+                    </Row>,
+                ),
+            ],
+        },
+        {
+            id: 'links',
+            title: t('ta.settings.links'),
+            icon: Link2,
+            rows: [
+                row('trusted-domains', [t('ta.settings.trustedDomains'), t('ta.settings.trustedDomainsHint'), ...settings.trustedDomains], <TrustedDomains />),
+            ],
+        },
+        {
+            id: 'voice',
+            title: t('ta.settings.voice'),
+            icon: Volume2,
+            rows: [
+                row(
+                    'speak',
+                    [t('ta.settings.speak'), t('ta.settings.speakHint')],
+                    <Row label={t('ta.settings.speak')} description={t('ta.settings.speakHint')}>
+                        <Switch label={t('ta.settings.speak')} checked={settings.speak} onChange={speak => store.update({ speak })} />
+                    </Row>,
+                ),
+            ],
+        },
+    ];
+
+    const { snapshot } = agent;
+    const locked = !!snapshot && scope === 'project' && !snapshot.projectTrusted;
+    const lead = (
+        <>
+            <ScopeBar scope={scope} onScope={onScope} snapshot={snapshot} />
+            {!agent.online && <div className="ta-settings-note">{t('ta.settings.offline')}</div>}
+            {agent.online && !snapshot && !agent.error && <div className="ta-settings-note">{t('ta.settings.loading')}</div>}
+            {locked && <div className="ta-settings-note">{t('ta.settings.untrusted')}</div>}
+            {agent.error && <div className="ta-banner ta-banner-error">{t('ta.settings.failed', { error: agent.error })}</div>}
+        </>
+    );
+    const ta: SectionEntry[] = AGENT_SETTINGS_GROUPS.map((group, index) => ({
+        id: group.id,
+        title: t(group.title),
+        icon: GROUP_ICONS[group.id] ?? Wrench,
+        lead: index === 0 ? lead : undefined,
+        rows: snapshot
+            ? group.keys.flatMap(key => {
+                  const spec = AgentSettingsUtil.spec(key);
+                  if (!spec) {
+                      return [];
+                  }
+                  const label = t(AgentSettingsUtil.label(key));
+                  const hint = AgentSettingsUtil.hint(key);
+                  return [
+                      row(
+                          key,
+                          [label, hint && t(hint), key],
+                          <Row label={label} description={hint && t(hint)} modified={snapshot[scope][key] !== undefined}>
+                              <AgentControl
+                                  spec={spec}
+                                  scope={scope}
+                                  snapshot={snapshot}
+                                  disabled={locked}
+                                  onChange={changes => agent.update(scope, changes)}
+                              />
+                          </Row>,
+                      ),
+                  ];
+              })
+            : [],
+    }));
+
+    const packages = packageList.packages.filter(pkg => pkg.origin !== 'builtin');
+    /** Why the web extension of a package did not load, if it did not. */
+    const failure = (pkg: TaPackageInfo) => extensions.find(extension => extension.info?.source === pkg.source && extension.error)?.error;
+    const reload = async () => {
+        await host.refresh();
+        await packageList.read();
+    };
+    const more: SectionEntry[] = [
+        {
+            id: 'packages',
+            title: t('ta.packages'),
+            icon: Puzzle,
+            rows: [
+                row(
+                    'packages',
+                    [t('ta.packages'), t('ta.packages.hint')],
+                    <Row label={t('ta.packages.installed')} description={t('ta.packages.hint')}>
+                        <button type="button" className="ta-button" disabled={busy} onClick={() => run(reload, t('ta.packages.reloaded'))}>
+                            <Icon icon={RefreshCw} size={14} /> {t('ta.packages.reload')}
+                        </button>
+                    </Row>,
+                ),
+                ...packages.map(pkg => {
+                    const error = failure(pkg);
+                    return row(
+                        `package:${pkg.id}`,
+                        [pkg.name, pkg.description, t('ta.packages')],
+                        <Row
+                            label={pkg.name}
+                            description={
+                                error
+                                    ? t('ta.packages.failed', { error })
+                                    : [pkg.description, t(pkg.scope === 'project' ? 'ta.packages.scope.project' : 'ta.packages.scope.user')]
+                                          .filter(Boolean)
+                                          .join(' · ')
+                            }
+                        >
+                            <IconButton icon={Trash2} label={t('ta.packages.remove')} disabled={busy} onClick={() => void remove(pkg)} />
+                            <Switch label={pkg.name} checked={pkg.enabled} disabled={busy} onChange={on => run(() => packageList.toggle(pkg, on))} />
+                        </Row>,
+                    );
+                }),
+                ...(packages.length === 0 ? [row('packages:none', [t('ta.packages.none')], <Row label={t('ta.packages.none')} />)] : []),
+            ],
+        },
+        {
+            id: 'builtin',
+            title: t('ta.packages.builtinTitle'),
+            icon: Blocks,
+            rows: [
+                ...builtinPackages.map(info =>
+                    row(
+                        `builtin:${info.name}`,
+                        [info.name, t('ta.packages.builtinTitle')],
+                        <Row label={info.name} description={t(info.enabled ? 'ta.packages.builtinOn' : 'ta.packages.builtinOff')}>
+                            <Switch label={info.name} checked={info.enabled} onChange={on => run(() => packageList.toggle(info, on))} />
+                        </Row>,
+                    ),
+                ),
+                ...host.builtins.map(builtin =>
+                    row(
+                        `web:${builtin.name}`,
+                        [t(builtin.title), t(builtin.description), t('ta.packages.builtinTitle')],
+                        <Row label={t(builtin.title)} description={t(builtin.description)}>
+                            <Switch
+                                label={t(builtin.title)}
+                                checked={!settings.builtinsOff.includes(builtin.name)}
+                                onChange={on => toggleBuiltin(builtin.name, on)}
+                            />
+                        </Row>,
+                    ),
+                ),
+            ],
+        },
+        {
+            id: 'shortcuts',
+            title: t('ta.settings.shortcuts'),
+            icon: Keyboard,
+            rows: SHORTCUTS.map(shortcut =>
+                row(
+                    `key:${shortcut.keys}`,
+                    [t(shortcut.label), shortcut.keys, t('ta.settings.shortcuts')],
+                    <Row label={t(shortcut.label)}>
+                        <Keys keys={shortcut.keys} />
+                    </Row>,
+                ),
+            ),
+        },
+        {
+            id: 'about',
+            title: t('ta.settings.about'),
+            icon: Info,
+            rows: workbench.server
+                ? [
+                      row(
+                          'version',
+                          [t('ta.settings.version'), 'version'],
+                          <Row label={t('ta.settings.version')}>
+                              <span className="ta-path">v{workbench.server.version}</span>
+                          </Row>,
+                      ),
+                      row(
+                          'cwd',
+                          [t('ta.settings.cwd'), workbench.server.cwd],
+                          <Row label={t('ta.settings.cwd')} description={t('ta.settings.cwdDescription', { path: workbench.server.cwd })}>
+                              <button type="button" className="ta-button" onClick={() => onDialog('directory')}>
+                                  <Icon icon={FolderOpen} size={15} /> {t('ta.settings.cwdChange')}
+                              </button>
+                          </Row>,
+                      ),
+                      row(
+                          'accounts',
+                          [t('ta.settings.accounts'), t('ta.settings.accountsDescription')],
+                          <Row label={t('ta.settings.accounts')} description={t('ta.settings.accountsDescription')}>
+                              <button type="button" className="ta-button" onClick={() => onDialog('accounts')}>
+                                  <Icon icon={KeyRound} size={15} /> {t('ta.settings.manageAccounts')}
+                              </button>
+                          </Row>,
+                      ),
+                      row(
+                          'relay',
+                          [t('ta.settings.relay'), t('ta.settings.relayDescription')],
+                          <Row label={t('ta.settings.relay')} description={t('ta.settings.relayDescription')}>
+                              <button type="button" className="ta-button" onClick={() => onDialog('relay')}>
+                                  <Icon icon={Smartphone} size={15} /> {t('ta.settings.manageAccounts')}
+                              </button>
+                          </Row>,
+                      ),
+                      row(
+                          'signOut',
+                          [t('ta.settings.signOut')],
+                          <Row label={t('ta.settings.signOut')}>
+                              <button
+                                  type="button"
+                                  className="ta-button ta-danger"
+                                  onClick={() => {
+                                      onClose();
+                                      bench.signOut();
+                                  }}
+                              >
+                                  <Icon icon={LogOut} size={15} /> {t('ta.settings.signOut')}
+                              </button>
+                          </Row>,
+                      ),
+                  ]
+                : [],
+        },
+    ];
+    return [
+        { id: 'web', title: t('ta.settings.web'), sections: web },
+        { id: 'agent', title: t('ta.settings.agent'), sections: ta },
+        { id: 'more', title: t('ta.settings.more'), sections: more },
+    ];
+}
+
+const sectionId = (id: string) => `ta-settings-${id}`;
+
+export interface SettingsViewProps {
+    /** The section to show first. */
+    section?: SettingsSection;
+    onClose(): void;
+    /** The menu of a narrow screen. */
+    onMenu(): void;
+}
+
+/**
+ * The settings, as a page of the main area: those of this page (kept in the browser) and those of ta
+ * (pi's settings files, of the user or of the project), with a search and a table of contents in two
+ * levels on the left.
+ */
+export function SettingsView({ section, onClose, onMenu }: SettingsViewProps) {
+    const t = useT();
+    const [query, setQuery] = React.useState('');
+    const [scope, setScope] = React.useState<TaSettingsScope>('user');
+    const [active, setActive] = React.useState(section ?? 'appearance');
+    const scroller = React.useRef<HTMLDivElement>(null);
+    const [dialog, setDialog] = React.useState<SettingsDialog>();
+    const closeDialog = React.useCallback(() => setDialog(undefined), []);
+    const parts = useParts(scope, setScope, onClose, setDialog);
+    const searching = query.trim().length > 0;
+    const shown = parts
+        .map(part => ({
+            ...part,
+            sections: part.sections
+                .map(entry => {
+                    if (!searching) {
+                        return entry;
+                    }
+                    // The rows that match; all of a section whose title matches when none does.
+                    const rows = entry.rows.filter(candidate => AgentSettingsUtil.matches(query, candidate.search));
+                    return { ...entry, rows: rows.length > 0 || !AgentSettingsUtil.matches(query, entry.title) ? rows : entry.rows };
+                })
+                .filter(entry => !searching || entry.rows.length > 0),
+        }))
+        .filter(part => part.sections.length > 0);
+
+    const go = React.useCallback((id: string) => {
+        setActive(id);
+        document.getElementById(sectionId(id))?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }, []);
+    React.useEffect(() => {
+        if (section) {
+            setActive(section);
+            document.getElementById(sectionId(section))?.scrollIntoView({ block: 'start' });
+        }
+    }, [section]);
+    React.useEffect(() => {
+        const onKey = (event: KeyboardEvent) => event.key === 'Escape' && !(event.target as Element)?.closest?.('input, select, textarea') && onClose();
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [onClose]);
+    // The section at the top of the view is the one marked on the left.
+    const onScroll = () => {
+        const root = scroller.current;
+        if (!root) {
+            return;
+        }
+        const top = root.getBoundingClientRect().top + 32;
+        let current: string | undefined;
+        for (const element of root.querySelectorAll<HTMLElement>('[data-section]')) {
+            if (element.getBoundingClientRect().top <= top) {
+                current = element.dataset.section;
+            }
+        }
+        if (current && current !== active) {
+            setActive(current);
+        }
+    };
+
+    return (
+        <section className="ta-settings-page" aria-label={t('ta.settings')}>
+            <header className="ta-main-head ta-settings-head">
+                <IconButton icon={Menu} label={t('ta.menu')} className="ta-narrow-only" onClick={onMenu} />
+                <div className="ta-settings-title">{t('ta.settings')}</div>
+                <label className="ta-field ta-settings-search">
+                    <Icon icon={Search} size={14} />
+                    <input
+                        value={query}
+                        placeholder={t('ta.settings.search')}
+                        aria-label={t('ta.settings.search')}
+                        onChange={event => setQuery(event.target.value)}
+                    />
+                    {query && <IconButton icon={X} label={t('ta.close')} onClick={() => setQuery('')} />}
+                </label>
+                <IconButton icon={X} label={t('ta.close')} onClick={onClose} />
+            </header>
+            <div className="ta-settings-body">
+                <nav className="ta-settings-toc" aria-label={t('ta.settings')}>
+                    {shown.map(part => (
+                        <div key={part.id} className="ta-settings-toc-part">
+                            <button type="button" className="ta-settings-toc-group" onClick={() => go(part.sections[0].id)}>
+                                {part.title}
+                            </button>
+                            {part.sections.map(entry => (
+                                <button
+                                    key={entry.id}
+                                    type="button"
+                                    className={`ta-settings-toc-item${active === entry.id ? ' ta-active' : ''}`}
+                                    aria-current={active === entry.id || undefined}
+                                    onClick={() => go(entry.id)}
+                                >
+                                    <Icon icon={entry.icon} size={14} />
+                                    <span className="ta-ellipsis">{entry.title}</span>
+                                </button>
+                            ))}
+                        </div>
+                    ))}
+                </nav>
+                <div className="ta-settings-scroll" ref={scroller} onScroll={onScroll}>
+                    <div className="ta-settings-content">
+                        {shown.length === 0 && <div className="ta-empty">{t('ta.settings.noMatch', { query: query.trim() })}</div>}
+                        {shown.map(part => (
+                            <div key={part.id} className="ta-settings-part">
+                                <h1 className="ta-settings-part-title">
+                                    {part.title}
+                                    {part.id === 'web' && <span className="ta-settings-part-hint">{t('ta.settings.webHint')}</span>}
+                                </h1>
+                                {part.sections.map(entry => (
+                                    <section
+                                        key={entry.id}
+                                        id={sectionId(entry.id)}
+                                        data-section={entry.id}
+                                        className="ta-setting-section"
+                                        aria-label={entry.title}
+                                    >
+                                        <h2 className="ta-hud">
+                                            <Icon icon={entry.icon} size={13} /> {entry.title}
+                                        </h2>
+                                        {entry.lead}
+                                        {entry.rows.length > 0 && (
+                                            <div className="ta-setting-card">
+                                                {entry.rows.map(candidate => (
+                                                    <React.Fragment key={candidate.key}>{candidate.node}</React.Fragment>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </section>
+                                ))}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+            {dialog === 'accounts' && <AuthDialog onClose={closeDialog} />}
+            {dialog === 'directory' && <WorkingDirectoryPicker onClose={closeDialog} />}
+            {dialog === 'relay' && <RelayDialog onClose={closeDialog} />}
+        </section>
+    );
+}

package/src/browser/components/split-pane.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { usePersisted } from '../hooks';
+import { useT } from '../i18n/use-t';
+import { LayoutUtil, type PaneSide, type PaneSpec, type PaneState } from '../util/layout';
+
+export interface Pane extends PaneState {
+    spec: PaneSpec;
+    resize(state: PaneState): void;
+    toggle(): void;
+    /** Opens it if collapsed. */
+    reveal(): void;
+}
+
+/** The width of a column and whether it is collapsed, kept in this browser. */
+export function usePane(spec: PaneSpec): Pane {
+    const kept = React.useMemo(() => LayoutUtil.state(spec), [spec]);
+    const [state, change] = usePersisted(kept);
+    // Stable callbacks, so that effects may depend on them.
+    const resize = React.useCallback((next: PaneState) => change(() => next), [change]);
+    const toggle = React.useCallback(() => change(previous => ({ ...previous, collapsed: !previous.collapsed })), [change]);
+    const reveal = React.useCallback(() => change(previous => (previous.collapsed ? { ...previous, collapsed: false } : previous)), [change]);
+    return { ...state, spec, resize, toggle, reveal };
+}
+
+/** The style that gives a pane its width; CSS of narrow screens may override it. */
+export function paneStyle(pane: Pane): React.CSSProperties {
+    return { '--ta-pane': `${pane.size}px` } as React.CSSProperties;
+}
+
+export interface SashProps {
+    pane: Pane;
+    /** Where the pane is: `start` before the sash, `end` after it. */
+    side: PaneSide;
+    label: string;
+}
+
+/**
+ * The bar between two columns: drag it to resize the pane, far enough to collapse it; double-click it
+ * for the initial width; arrows, Home and End move it from the keyboard.
+ */
+export function Sash({ pane, side, label }: SashProps) {
+    const t = useT();
+    const [dragging, setDragging] = React.useState(false);
+    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        const target = event.currentTarget;
+        const startX = event.clientX;
+        const startSize = pane.size;
+        let frame = 0;
+        let last: PaneState | undefined;
+        target.setPointerCapture(event.pointerId);
+        document.documentElement.classList.add('ta-resizing');
+        setDragging(true);
+        const move = (moved: PointerEvent) => {
+            last = LayoutUtil.drag(startSize, moved.clientX - startX, side, pane.spec);
+            // One layout per frame, however fast the pointer moves.
+            if (!frame) {
+                frame = requestAnimationFrame(() => {
+                    frame = 0;
+                    if (last) {
+                        pane.resize(last);
+                    }
+                });
+            }
+        };
+        const end = () => {
+            cancelAnimationFrame(frame);
+            if (last) {
+                pane.resize(last);
+            }
+            document.documentElement.classList.remove('ta-resizing');
+            setDragging(false);
+            target.removeEventListener('pointermove', move);
+            target.removeEventListener('pointerup', end);
+            target.removeEventListener('pointercancel', end);
+        };
+        target.addEventListener('pointermove', move);
+        target.addEventListener('pointerup', end);
+        target.addEventListener('pointercancel', end);
+    };
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        const size = LayoutUtil.key(pane.size, event.key, event.shiftKey, side, pane.spec);
+        if (size !== undefined) {
+            event.preventDefault();
+            pane.resize({ size, collapsed: false });
+        }
+    };
+    return (
+        // biome-ignore lint/a11y/useSemanticElements: an <hr> cannot be focused and dragged
+        <div
+            role="separator"
+            tabIndex={0}
+            aria-orientation="vertical"
+            aria-label={label}
+            aria-valuemin={pane.spec.min}
+            aria-valuemax={pane.spec.max}
+            aria-valuenow={pane.size}
+            title={t('ta.layout.resize')}
+            className={`ta-sash ta-sash-${side} ${dragging ? 'ta-dragging' : ''}`}
+            onPointerDown={onPointerDown}
+            onKeyDown={onKeyDown}
+            onDoubleClick={() => pane.resize({ size: pane.spec.initial, collapsed: false })}
+        />
+    );
+}