zidane-ui 9.0.4 → 9.1.3

package/src/settings/SettingsProvider.tsx

@@ -1,127 +0,0 @@
-/**
- * Puts a `SettingsHost` (and optional label overrides) in context for the
- * settings components.
- *
- *   <SettingsProvider host={host}>
- *     <SettingsShell sections={sections} onClose={close} />
- *   </SettingsProvider>
- *
- * Outside a provider the components read an empty host: the settings stay
- * `loading` and nothing can be written.
- *
- * An app that reads settings everywhere puts its host at the root: the
- * provider subscribes to the document once and `useSettings()` reads it
- * through context, so every reader re-renders with one subscription.
- */
-import { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react';
-import type { Settings } from 'zidane/chat';
-
-import { constant, useReadable } from '../chat/headless/store';
-import { LabelsProvider, useLabels } from '../labels';
-import { DEFAULT_SETTINGS, type BooleanSettingKey } from './headless/catalog';
-import type { SettingsDocument, SettingsHost } from './headless/host';
-import { DEFAULT_SETTINGS_LABELS, type SettingsLabels } from './headless/labels';
-
-const LOADING_DOC: SettingsDocument = { status: 'loading' };
-const LOADING = constant<SettingsDocument>(LOADING_DOC);
-const EMPTY_HOST: SettingsHost = { document: LOADING, refresh: async () => {} };
-const SettingsHostContext = createContext<SettingsHost>(EMPTY_HOST);
-const SettingsDocumentContext = createContext<SettingsDocument>(LOADING_DOC);
-const SettingsHostNameContext = createContext<string | undefined>(undefined);
-
-/** Props for {@link SettingsProvider}. */
-export interface SettingsProviderProps {
-  /** The host the settings components read from and write through. */
-  host: SettingsHost;
-  /** Overrides for the settings components' strings. Keys you leave out keep the default English label. */
-  labels?: Partial<SettingsLabels>;
-  /**
-   * The server whose settings `host` holds, by name: the descriptions and tutorials that would name this
-   * computer name it instead. Absent: this computer's settings.
-   */
-  hostName?: string;
-  /** The components that read from `host`. */
-  children: ReactNode;
-}
-
-/**
- * Provides a {@link SettingsHost} and optional label overrides to the settings components below it.
- *
- * @param props - Provider props: the `host`, optional `labels`, the server's `hostName` and the `children` to render.
- */
-export function SettingsProvider({ host, labels, hostName, children }: SettingsProviderProps) {
-  const doc = useReadable(host.document);
-  return (
-    <SettingsHostContext.Provider value={host}>
-      <SettingsDocumentContext.Provider value={doc}>
-        <SettingsHostNameContext.Provider value={hostName}>
-          <LabelsProvider<SettingsLabels> labels={labels}>{children}</LabelsProvider>
-        </SettingsHostNameContext.Provider>
-      </SettingsDocumentContext.Provider>
-    </SettingsHostContext.Provider>
-  );
-}
-
-/** The server whose settings the nearest provider holds, by name (`undefined`: this computer's). */
-export function useSettingsHostName(): string | undefined {
-  return useContext(SettingsHostNameContext);
-}
-
-/** The settings as `useSettings` hands them, with their writers. */
-export interface SettingsValues {
-  /** Every setting: the host's document, or the defaults until it is read. */
-  settings: Settings;
-  /** Writes one setting through the host (nothing without `update`; a refused write is dropped). */
-  setSetting: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
-  /** Flips a boolean setting. */
-  toggle: (key: BooleanSettingKey) => void;
-}
-
-/**
- * The nearest provider's settings and their writers, re-rendering when the
- * document changes. Reads the provider's one subscription.
- */
-export function useSettings(): SettingsValues {
-  const host = useContext(SettingsHostContext);
-  const doc = useContext(SettingsDocumentContext);
-  const settings = doc.status === 'ready' ? doc.values : DEFAULT_SETTINGS;
-  const setSetting = useCallback(
-    <K extends keyof Settings>(key: K, value: Settings[K]) => {
-      void host.update?.({ [key]: value } as Partial<Settings>).catch(() => undefined);
-    },
-    [host],
-  );
-  const toggle = useCallback(
-    (key: BooleanSettingKey) => {
-      const now = host.document.get();
-      setSetting(key, !(now.status === 'ready' ? now.values : DEFAULT_SETTINGS)[key]);
-    },
-    [host, setSetting],
-  );
-  return useMemo(() => ({ settings, setSetting, toggle }), [settings, setSetting, toggle]);
-}
-
-/** The provided {@link SettingsHost} (an empty one outside a provider). */
-export function useSettingsHost(): SettingsHost {
-  return useContext(SettingsHostContext);
-}
-
-/** The settings document, re-rendering when it changes. */
-export function useSettingsDocument(): SettingsDocument {
-  return useReadable(useSettingsHost().document);
-}
-
-const ALWAYS = constant(true);
-
-/** Whether the settings can be written here: the host offers `update` and this connection may write. */
-export function useSettingsWritable(): boolean {
-  const host = useSettingsHost();
-  const writable = useReadable(host.writable ?? ALWAYS);
-  return host.update !== undefined && writable;
-}
-
-/** Returns the settings components' strings: the defaults merged with any overrides. */
-export function useSettingsLabels(): SettingsLabels {
-  const overrides = useLabels() as Partial<SettingsLabels>;
-  return useMemo(() => ({ ...DEFAULT_SETTINGS_LABELS, ...overrides }), [overrides]);
-}

package/src/settings/SettingsRowsPage.tsx

@@ -1,217 +0,0 @@
-/**
- * A page of rows from zidane's settings layout (General, Agent, Interface,
- * Advanced in `SETTINGS_PAGES`), read from and written through the settings
- * host: each catalog key a toggle or a choice row, honouring `requires`, kill
- * switches, settings that hold a toggle on and toggles that do nothing under
- * the others (`toggleApplies`: left out).
- *
- * What the kit can't draw on its own the app supplies: a custom row
- * (`customRows`: the model pickers, the agent defaults…), its own row for a
- * catalog key (`renderRow`), something after each row (`rowExtra`), the
- * Spaces section, a section's note and its actions (`actions`). A custom
- * row, panel or action the app leaves out is skipped, and a section left
- * with no rows is not drawn.
- */
-import { Fragment, type CSSProperties, type ReactNode } from 'react';
-import type { Settings } from 'zidane/chat';
-import { requirementMet, toggleApplies, toggleHeldOn } from 'zidane/chat/pure';
-
-import { FormSection, NavRow } from '../components/Form';
-import { LoadError } from '../components/LoadError';
-import { nextOption } from './headless/catalog';
-import {
-  describedOn,
-  shown,
-  type SettingsAction,
-  type SettingsCustomRowId,
-  type SettingsSectionsPage,
-} from './headless/layout';
-import { SETTINGS_CHOICE_BY_KEY, SETTINGS_TOGGLE_BY_KEY } from './headless/search';
-import { ChoiceRow, ToggleRow } from './rows';
-import { SettingFocus, SettingsPanel, SettingsPanelBody } from './section';
-import {
-  useSettingsDocument,
-  useSettingsHost,
-  useSettingsHostName,
-  useSettingsLabels,
-  useSettingsWritable,
-} from './SettingsProvider';
-
-/** Props for {@link SettingsRowsPage}. */
-export interface SettingsRowsPageProps {
-  /** The layout page to draw. */
-  page: SettingsSectionsPage;
-  /** Editing a server's settings: the page's `localOnly` parts (this computer's) are left out. @default false */
-  server?: boolean;
-  /** The app's spaces live in the server's settings (the web app's do): Spaces stays while `server`. @default false */
-  spacesOnServer?: boolean;
-  /** Kill-switch env vars engaged where the agent runs: a toggle gated by one is inert. */
-  killSwitches?: readonly string[];
-  /** The host's session store has no durability (memory, file map): Crash recovery shows as unavailable and is inert. @default false */
-  durabilityUnavailable?: boolean;
-  /** The app's actions (`{ action }` rows): a row opening a flow of the app's own. */
-  actions?: readonly SettingsAction[];
-  /** The app's custom rows, called on every render; `null` hides the row. */
-  customRows?: Readonly<Partial<Record<SettingsCustomRowId, () => ReactNode>>>;
-  /** The app's own row for a catalog key; `undefined` keeps the kit's toggle or choice row. */
-  renderRow?: (key: keyof Settings, values: Settings) => ReactNode | undefined;
-  /** Drawn after each catalog row, inside its focus target (where the value came from…). */
-  rowExtra?: (key: string) => ReactNode;
-  /** The Spaces section (`{ panel: 'spaces' }`). */
-  spaces?: () => ReactNode;
-  /** A note under a section (`note`), by its id. */
-  notes?: Readonly<Partial<Record<'terminalDaemon', () => ReactNode>>>;
-  /** Classes merged on the page's column. */
-  className?: string;
-  /** Inline styles on the page's column. */
-  style?: CSSProperties;
-}
-
-const NONE: readonly never[] = [];
-
-/**
- * A layout page of settings rows over the settings host.
- *
- * @param props - The page, what the app adds to it, and whether a server's settings are edited.
- */
-export function SettingsRowsPage({
-  page,
-  server = false,
-  spacesOnServer = false,
-  killSwitches = NONE,
-  durabilityUnavailable = false,
-  actions = NONE,
-  customRows,
-  renderRow,
-  rowExtra,
-  spaces,
-  notes,
-  className,
-  style,
-}: SettingsRowsPageProps) {
-  const labels = useSettingsLabels();
-  const host = useSettingsHost();
-  const doc = useSettingsDocument();
-  const writable = useSettingsWritable();
-  // A row that would name this computer names the server instead.
-  const hostName = useSettingsHostName();
-  const serverName = server ? hostName : undefined;
-
-  if (doc.status !== 'ready') {
-    return (
-      <SettingsPanel className={className} style={style}>
-        <SettingsPanelBody>
-          {doc.status === 'loading' ? (
-            <p className="text-xs text-[var(--zg-text-muted)] px-1 m-0">{labels.settingsLoading}</p>
-          ) : (
-            <LoadError className="px-1" onRetry={() => void host.refresh()}>
-              {labels.settingsError(doc.error)}
-            </LoadError>
-          )}
-        </SettingsPanelBody>
-      </SettingsPanel>
-    );
-  }
-  const values = doc.values;
-  const write = (patch: Partial<Settings>) => {
-    // A refused write puts the document back on its own; the rows follow it.
-    void host.update?.(patch).catch(() => undefined);
-  };
-
-  const focusRow = (key: string, row: ReactNode) => (
-    <SettingFocus key={key} id={key}>
-      {row}
-      {rowExtra?.(key)}
-    </SettingFocus>
-  );
-
-  const catalogRow = (key: keyof Settings) => {
-    const own = renderRow?.(key, values);
-    if (own !== undefined) return focusRow(key, own);
-    const toggle = SETTINGS_TOGGLE_BY_KEY.get(key);
-    if (toggle) {
-      if (!toggleApplies(toggle.key, values)) return null;
-      const requirement = toggle.requires ? SETTINGS_TOGGLE_BY_KEY.get(toggle.requires) : undefined;
-      const blockedBy = requirement && !requirementMet(values, requirement.key) ? requirement.label : undefined;
-      const killedBy =
-        toggle.killSwitchEnv !== undefined && killSwitches.includes(toggle.killSwitchEnv)
-          ? toggle.killSwitchEnv
-          : undefined;
-      return focusRow(
-        key,
-        <ToggleRow
-          row={
-            serverName !== undefined && toggle.serverDescription
-              ? { ...toggle, description: describedOn(toggle, serverName) }
-              : toggle
-          }
-          value={values[toggle.key]}
-          onToggle={() => write({ [toggle.key]: !values[toggle.key] })}
-          heldOn={toggleHeldOn(toggle.key, values)}
-          blockedBy={blockedBy}
-          killedBy={killedBy}
-          disabled={!writable}
-        />,
-      );
-    }
-    const choice = SETTINGS_CHOICE_BY_KEY.get(key);
-    return choice
-      ? focusRow(
-          key,
-          <ChoiceRow
-            row={choice}
-            value={values[choice.key]}
-            onCycle={() => write({ [choice.key]: nextOption(choice, values[choice.key]) })}
-            disabled={!writable}
-            unavailable={
-              choice.key === 'durability' && durabilityUnavailable ? labels.settingsDurabilityUnavailable : undefined
-            }
-          />,
-        )
-      : null;
-  };
-
-  return (
-    <SettingsPanel className={className} style={style}>
-      <SettingsPanelBody scrollLabel={writable ? undefined : labels.settingsReadOnly}>
-        {!writable && <p className="zg-meta px-1 mt-0 mb-3">{labels.settingsReadOnly}</p>}
-        <div className="space-y-5">
-          {page.sections.map((section) => {
-            if (!shown(section, server, spacesOnServer)) return null;
-            if ('panel' in section) {
-              const node = spaces?.();
-              return node ? (
-                <SettingFocus key={section.title} id="spaces">
-                  {node}
-                </SettingFocus>
-              ) : null;
-            }
-            const rows = section.rows.map((row) => {
-              if ('key' in row) return catalogRow(row.key);
-              if ('custom' in row) {
-                const node = shown(row, server) ? customRows?.[row.custom]?.() : null;
-                return node ? (
-                  <SettingFocus key={row.custom} id={row.custom}>
-                    {node}
-                  </SettingFocus>
-                ) : null;
-              }
-              const action = actions.find((a) => a.id === row.action);
-              return action ? (
-                <SettingFocus key={action.id} id={action.id}>
-                  <NavRow action={action} />
-                </SettingFocus>
-              ) : null;
-            });
-            return rows.some(Boolean) ? (
-              <Fragment key={section.title}>
-                <FormSection title={section.title}>{rows}</FormSection>
-                {section.note && notes?.[section.note]?.()}
-              </Fragment>
-            ) : null;
-          })}
-        </div>
-      </SettingsPanelBody>
-    </SettingsPanel>
-  );
-}

package/src/settings/SettingsShell.tsx

@@ -1,336 +0,0 @@
-/**
- * The settings screen: a nav of the sections an app hands it (`SettingsNav`),
- * a search over them, and the open section's body. A section is any
- * `SettingsSection` (the kit's rows pages, the per-device preference
- * sections, an app's own), so an app adds its sections by listing them.
- *
- * Opening on a section (and a row inside it) is `initialSection` /
- * `initialFocus`; a body opens another with `useSettingsSection().select`.
- * A `keepMounted` section stays mounted (hidden) after its first visit, so its
- * async state survives switching away, and gets a header slot its actions
- * portal into (`SettingsPanelActions`).
- *
- * The frame around it (the columns, the header, a back button) is
- * `SettingsFrame` unless the app draws its own with `renderFrame`.
- */
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-
-import { IconButton } from '../components/IconButton';
-import { MetaChip, ROW_BUTTON_CLASS, RowText } from '../components/Form';
-import { Tray } from '../components/Surface';
-import type { SettingsSection } from './headless/registry';
-import { searchSettings, sectionSearchHits, type SettingsSearchHit } from './headless/search';
-import { SettingFocusContext, SettingsActionsSlotContext, SettingsSectionContext } from './section';
-import { SettingsNav } from './SettingsNav';
-import { useSettingsLabels } from './SettingsProvider';
-
-/** What the frame around the settings draws. */
-export interface SettingsFrameProps {
-  /** The open section's title (empty with no sections). */
-  title: string;
-  /** The open section's description. */
-  description?: string;
-  /** The search field. */
-  search: ReactNode;
-  /** The section nav. */
-  nav: ReactNode;
-  /** What the app pinned under the nav. */
-  footer?: ReactNode;
-  /** The open section's header actions (and the app's). */
-  headerActions: ReactNode;
-  /** The open section's body (or the search results). */
-  children: ReactNode;
-  /** Leaves the settings, when the app can. */
-  onClose?: () => void;
-}
-
-/** Props for {@link SettingsShell}. */
-export interface SettingsShellProps {
-  /** The sections, in nav order (a grouped one after its entry). */
-  sections: readonly SettingsSection[];
-  /** The section to open on. Default: the first. An id the shell doesn't hold opens the first. */
-  initialSection?: string;
-  /** The row to land on and highlight (its `data-setting-focus` id). */
-  initialFocus?: string;
-  /** Tells the app which section is open (after a nav pick, a search pick or `select`). */
-  onSelect?: (id: string) => void;
-  /** How many settings (or listed things) each section holds, drawn in the nav. */
-  counts?: Readonly<Partial<Record<string, number>>>;
-  /** More search entries (things inside a section the section's own `search` can't list up front). */
-  extraSearch?: readonly SettingsSearchHit[];
-  /** The app's own header controls, beside the open section's. */
-  headerActions?: (state: { active: string; searching: boolean }) => ReactNode;
-  /** Pinned under the nav (the app version, a setup link). */
-  footer?: ReactNode;
-  /** Leaves the settings: the default frame's back button and Esc. */
-  onClose?: () => void;
-  /** Draws the frame. Default: {@link SettingsFrame}. */
-  renderFrame?: (frame: SettingsFrameProps) => ReactNode;
-  /** On the default frame's root. */
-  className?: string;
-  /** On the default frame's root. */
-  style?: CSSProperties;
-}
-
-const NO_HITS: readonly SettingsSearchHit[] = [];
-
-/**
- * The settings screen: nav, search and the open section.
- *
- * @param props - The sections, where to open, the counts, extra search entries, the footer, header actions and frame.
- */
-export function SettingsShell({
-  sections,
-  initialSection,
-  initialFocus,
-  onSelect,
-  counts,
-  extraSearch = NO_HITS,
-  headerActions,
-  footer,
-  onClose,
-  renderFrame,
-  className,
-  style,
-}: SettingsShellProps) {
-  const labels = useSettingsLabels();
-  const firstId = initialSection ?? sections[0]?.id ?? '';
-  // Component state only: a fresh mount starts on `initialSection`.
-  const [activeId, setActiveId] = useState(firstId);
-  const active: SettingsSection | undefined = sections.find((s) => s.id === activeId) ?? sections[0];
-  const [visited, setVisited] = useState<ReadonlySet<string>>(() => new Set([firstId]));
-  const [query, setQuery] = useState('');
-  // Row picked from search or opened on: scrolled into view and highlighted until the user presses inside it.
-  const [focusKey, setFocusKey] = useState<string | null>(initialFocus ?? null);
-  const clearFocus = useCallback(() => setFocusKey(null), []);
-  const focusValue = useMemo(() => ({ focusKey, clear: clearFocus }), [focusKey, clearFocus]);
-
-  const onSelectRef = useRef(onSelect);
-  useLayoutEffect(() => {
-    onSelectRef.current = onSelect;
-  });
-  const select = useCallback((id: string, focus: string | null = null) => {
-    setFocusKey(focus);
-    setActiveId(id);
-    setVisited((prev) => (prev.has(id) ? prev : new Set(prev).add(id)));
-    setQuery('');
-    onSelectRef.current?.(id);
-  }, []);
-  const selectSection = useCallback((id: string) => select(id), [select]);
-
-  // Header slots of the kept-mounted sections. One stable ref callback per id: an inline
-  // `ref={(el) => setState…}` would loop (a new ref per render detaches and reattaches).
-  const kept = useMemo(() => sections.filter((s) => s.keepMounted), [sections]);
-  const [slots, setSlots] = useState<Readonly<Record<string, HTMLElement | null>>>({});
-  const [slotRefs] = useState(() => new Map<string, (el: HTMLElement | null) => void>());
-  const slotRef = (id: string) => {
-    let ref = slotRefs.get(id);
-    if (!ref) {
-      ref = (el) => setSlots((prev) => (prev[id] === el ? prev : { ...prev, [id]: el }));
-      slotRefs.set(id, ref);
-    }
-    return ref;
-  };
-
-  const searchIndex = useMemo(() => sectionSearchHits(sections, extraSearch), [sections, extraSearch]);
-  const trimmedQuery = query.trim();
-  const searching = trimmedQuery.length > 0;
-  const results = useMemo(() => searchSettings(searchIndex, trimmedQuery), [searchIndex, trimmedQuery]);
-
-  // After the section's rows rendered (selecting a section clears the query in the same commit).
-  useEffect(() => {
-    if (!focusKey) return;
-    const row = document.querySelector(`[data-setting-focus="${CSS.escape(focusKey)}"]`);
-    const motion = document.documentElement.dataset.motion;
-    row?.scrollIntoView({ block: 'center', behavior: motion !== 'off' && motion !== 'reduced' ? 'smooth' : 'auto' });
-  }, [focusKey, activeId]);
-
-  const search = (
-    <div className="relative shrink-0">
-      <span className="i-ph-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-[var(--zg-text-muted)] pointer-events-none" />
-      <input
-        type="text"
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-        onKeyDown={(e) => {
-          // Escape clears an active filter instead of leaving the settings.
-          if (e.key === 'Escape' && query) {
-            e.stopPropagation();
-            setQuery('');
-          }
-        }}
-        placeholder={labels.settingsSearchPlaceholder}
-        aria-label={labels.settingsSearchLabel}
-        className="zg-well w-full h-8 text-zg-ui pl-7.5 pr-2 placeholder:text-[var(--zg-text-subtle)]"
-      />
-    </div>
-  );
-
-  const nav = <SettingsNav sections={sections} active={active?.id ?? ''} counts={counts} onSelect={selectSection} />;
-
-  const actions = (
-    <>
-      {/* One slot per kept-mounted section; only the open one's shows (none while searching). */}
-      {kept.map((section) => (
-        <span
-          key={section.id}
-          ref={slotRef(section.id)}
-          className={!searching && active?.id === section.id ? 'flex items-center gap-2' : 'hidden'}
-        />
-      ))}
-      {active && headerActions?.({ active: active.id, searching })}
-    </>
-  );
-
-  const body = active ? (
-    <SettingFocusContext.Provider value={focusValue}>
-      <div role="tabpanel" aria-label={active.title} className="flex-1 min-w-0 min-h-0 flex flex-col w-full">
-        {searching && (
-          <div className="zg-scroll-fade flex-1 min-h-0 overflow-y-auto">
-            <div className="zg-screen-column px-6 pt-4 pb-6">
-              {results.length === 0 ? (
-                <p className="text-xs text-[var(--zg-text-muted)] px-1 m-0">{labels.settingsNoResults(trimmedQuery)}</p>
-              ) : (
-                <Tray radius="lg" className="p-1 flex flex-col">
-                  {results.map((hit, i) => (
-                    <button
-                      key={`${hit.section}:${hit.label}:${i}`}
-                      type="button"
-                      onClick={() => select(hit.section, hit.key ?? null)}
-                      className={ROW_BUTTON_CLASS}
-                    >
-                      <RowText label={hit.label} description={hit.description} />
-                      <MetaChip>{sections.find((s) => s.id === hit.section)?.title}</MetaChip>
-                    </button>
-                  ))}
-                </Tray>
-              )}
-            </div>
-          </div>
-        )}
-        {kept
-          .filter((section) => visited.has(section.id))
-          .map((section) => (
-            <SectionScope
-              key={section.id}
-              id={section.id}
-              visible={active.id === section.id}
-              select={select}
-              slot={slots[section.id] ?? null}
-            >
-              <div className={!searching && active.id === section.id ? 'flex-1 min-h-0 flex flex-col' : 'hidden'}>
-                {section.render() as ReactNode}
-              </div>
-            </SectionScope>
-          ))}
-        {!searching && !active.keepMounted && (
-          <SectionScope id={active.id} visible select={select} slot={null}>
-            {active.render() as ReactNode}
-          </SectionScope>
-        )}
-      </div>
-    </SettingFocusContext.Provider>
-  ) : null;
-
-  const frame: SettingsFrameProps = {
-    title: active?.title ?? '',
-    ...(active?.description !== undefined ? { description: active.description } : {}),
-    search,
-    nav,
-    footer,
-    headerActions: actions,
-    children: body,
-    ...(onClose ? { onClose } : {}),
-  };
-  return renderFrame ? <>{renderFrame(frame)}</> : <SettingsFrame {...frame} className={className} style={style} />;
-}
-
-function SectionScope({
-  id,
-  visible,
-  select,
-  slot,
-  children,
-}: {
-  id: string;
-  visible: boolean;
-  select: (id: string, focus?: string | null) => void;
-  slot: HTMLElement | null;
-  children: ReactNode;
-}) {
-  const value = useMemo(() => ({ id, visible, select }), [id, visible, select]);
-  return (
-    <SettingsSectionContext.Provider value={value}>
-      <SettingsActionsSlotContext.Provider value={slot}>{children}</SettingsActionsSlotContext.Provider>
-    </SettingsSectionContext.Provider>
-  );
-}
-
-/**
- * The default frame: the nav column (a back button when the settings can be
- * left, the search, the nav, the footer) beside the open section under its
- * title. Below 640px the columns stack.
- *
- * @param props - What the shell hands its frame, plus the root's `className` and `style`.
- */
-export function SettingsFrame({
-  title,
-  description,
-  search,
-  nav,
-  footer,
-  headerActions,
-  children,
-  onClose,
-  className,
-  style,
-}: SettingsFrameProps & {
-  /** Classes merged on the frame's root. */
-  className?: string;
-  /** Inline styles on the frame's root. */
-  style?: CSSProperties;
-}) {
-  const labels = useSettingsLabels();
-  useEffect(() => {
-    if (!onClose) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !e.defaultPrevented) onClose();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-  return (
-    <div className={['zg-settings', className].filter(Boolean).join(' ')} style={style}>
-      <div className="zg-settings-aside">
-        <div className="shrink-0 flex items-center gap-1 px-3 pt-3 min-h-10">
-          {onClose && <IconButton icon="i-ph-caret-left" label={labels.settingsClose} onClick={onClose} />}
-          <span className="text-sm font-semibold text-[var(--zg-text)] truncate">{labels.settingsTitle}</span>
-        </div>
-        <div className="shrink-0 px-3 py-3">{search}</div>
-        <div className="flex-1 min-h-0 flex flex-col px-2">{nav}</div>
-        {footer && <div className="shrink-0 px-2 pb-2">{footer}</div>}
-      </div>
-      <div className="flex-1 min-w-0 min-h-0 flex flex-col">
-        <div className="shrink-0 flex items-end gap-3 px-6 pt-4 pb-3 border-b border-[var(--zg-hairline)]">
-          <div className="flex-1 min-w-0">
-            <h2 className="text-sm font-semibold leading-tight text-[var(--zg-text)] m-0 zg-balance">{title}</h2>
-            {description && (
-              <p className="text-xs leading-tight text-[var(--zg-text-muted)] mt-0.5 m-0 truncate">{description}</p>
-            )}
-          </div>
-          <div className="flex items-center gap-2 shrink-0 pb-0.5">{headerActions}</div>
-        </div>
-        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">{children}</div>
-      </div>
-    </div>
-  );
-}