zidane-ui 9.1.1 → 9.1.3

package/src/settings/sections/extensions/ExtensionsSection.tsx

@@ -1,665 +0,0 @@
-/**
- * Settings › Extensions: the extensions found for a folder with their
- * allowlist toggles (`enabledExtensions`), over the settings host's
- * `extensions` group. The extensions' own options flow in as `children`,
- * under the list, in the same scroll; under them, the extensions'
- * `settings.section` items (from the extensions host when there is one).
- * The extensions' settings pages are entries of their own under this one in
- * the settings nav (`useExtensionSettingsSections`).
- *
- * Install opens the source browser (`browse`, the one Skills uses), on the
- * default source with the native extensions: pick extensions from one or
- * more sources, choose the scope, then `install` each pick (its row's
- * `install`). A host without `browse` gets the form instead (a source, an
- * optional extension name, the scope).
- *
- * Each row shows the extension's mark (`extensionMark`, the one the
- * settings nav draws). One that failed to load stays off, with a red
- * "error" chip whose tooltip (hover and keyboard focus, read through
- * `aria-describedby`) says why. Per row: Edit (the app's `onEdit`, an
- * authoring session on its folder), Update for one installed from a source
- * (`origin`, its `.install.json`: `update`, the installer again; a right
- * click or the arrow beside it opens "Update from <origin>" and "Change
- * origin…", which installs it again from another source through
- * `changeOrigin`), Remove (asks first; `remove`, then it leaves the
- * allowlist) and its folder (`paths.reveal`). The list is read again after
- * each toggle: an extension's state follows the allowlist.
- */
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-
-import {
-  BTN_DANGER,
-  BTN_DANGER_CONFIRM,
-  BTN_LG_PRIMARY,
-  BTN_LG_SECONDARY,
-  BTN_SECONDARY,
-  buttonClass,
-} from '../../../components/button';
-import { ErrorNote, FIELD_LABEL_CLASS, FORM_CARD_CLASS, INPUT_CLASS, MetaChip, OpLine } from '../../../components/Form';
-import { IconButton } from '../../../components/IconButton';
-import { RowActionsMenu, type RowActionItem } from '../../../components/RowActionsMenu';
-import { Tooltip } from '../../../components/Tooltip';
-import { useDisplayPath, type PathDisplay } from '../../../hooks/useDisplayPath';
-import { ExtensionSlot } from '../../../extensions/ExtensionSlot';
-import { ExtensionMark } from '../../../onboarding/marks';
-import { toSettingsError, type SettingsError } from '../../headless/host';
-import type { SettingsExtension, SettingsExtensionInstall } from '../../headless/sections-host';
-import { useSettingsHost } from '../../SettingsProvider';
-import { SettingsPanel, SettingsPanelActions, SettingsPanelBody } from '../../section';
-import { SettingsTutorial } from '../../SettingsTutorial';
-import {
-  EnabledList,
-  RevealPathButton,
-  ScopePicker,
-  useCatalogSharedLabels,
-  useOpLine,
-  useSettingsValues,
-  useWriteSetting,
-} from '../shared/catalog';
-import { useSectionLabels } from '../use-section-labels';
-import { useChangeOriginLayer, type ChangeOrigin } from './ChangeOriginDialog';
-import { ExtensionPicksBar, needsAccessHint, useExtensionPicks, type ExtensionPickScope } from './ExtensionPicksBar';
-import { ExtensionSourceBrowser } from './ExtensionSourceBrowser';
-import { DEFAULT_EXTENSIONS_SECTION_LABELS, type ExtensionsSectionLabels } from './labels';
-
-/** The Extensions section's strings, overridable through `LabelsProvider`. */
-export function useExtensionsSectionLabels(): ExtensionsSectionLabels {
-  return useSectionLabels(DEFAULT_EXTENSIONS_SECTION_LABELS);
-}
-
-const NO_EXTENSIONS: readonly SettingsExtension[] = [];
-const keyOf = (ext: SettingsExtension) => ext.name;
-const nameOf = (ext: SettingsExtension) => ext.displayName ?? ext.name;
-// Errored extensions never contribute: their box stays unchecked whatever the allowlist says.
-const forcedEnabledOf = (ext: SettingsExtension) => (ext.error ? false : undefined);
-
-/** Props for {@link ExtensionsSection}. */
-export interface ExtensionsSectionProps {
-  /** The folder whose project extensions show with the user's (`null`: none picked, nothing listed). */
-  cwd: string | null;
-  /** Opens an authoring session on an extension's folder (the app closes Settings). Absent: no Edit. */
-  onEdit?: (extension: SettingsExtension) => Promise<void>;
-  /** Opens the app's create-extension flow. Absent: no Create button. */
-  onCreateExtension?: () => void;
-  /** Under the list, in the same scroll (the extensions' options). */
-  children?: ReactNode;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the extensions of the nearest `SettingsProvider`'s host for `cwd`.
- *
- * @param props - The folder, the app's `onEdit` and `onCreateExtension`, `children`, `className` and `style`.
- */
-export function ExtensionsSection({
-  cwd,
-  onEdit,
-  onCreateExtension,
-  children,
-  className,
-  style,
-}: ExtensionsSectionProps) {
-  const host = useSettingsHost().extensions;
-  const l = useExtensionsSectionLabels();
-  const shared = useCatalogSharedLabels();
-  const values = useSettingsValues();
-  const write = useWriteSetting();
-  const [catalog, setCatalog] = useState<readonly SettingsExtension[]>(NO_EXTENSIONS);
-  const [loadError, setLoadError] = useState<SettingsError | null>(null);
-  const [actionError, setActionError] = useState<SettingsError | null>(null);
-  const [installOpen, setInstallOpen] = useState(false);
-  // Install / update / remove: busy, outcome, or failure.
-  const [opLine, setOpLine, fail] = useOpLine();
-  // Inline remove confirmation, armed per extension name.
-  const [removeArmed, setRemoveArmed] = useState<string | null>(null);
-  // Rows with an update running: their buttons disable meanwhile.
-  const [busyRows, setBusyRows] = useState<ReadonlySet<string>>(() => new Set());
-  const [refreshNonce, setRefreshNonce] = useState(0);
-  const mounted = useRef(true);
-  useEffect(
-    () => () => {
-      mounted.current = false;
-    },
-    [],
-  );
-
-  // A toggle changes what loads: read the summaries (enabled, error, capabilities) again, not only the boxes.
-  const enabledExtensions = values?.enabledExtensions;
-  const extensionKey = enabledExtensions?.join('\x1f') ?? '*';
-
-  useEffect(() => {
-    if (!cwd || !host) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- no folder: nothing to list
-      setCatalog(NO_EXTENSIONS);
-      setLoadError(null);
-      return undefined;
-    }
-    let cancelled = false;
-    host.list(cwd).then(
-      (list) => {
-        if (cancelled) return;
-        setCatalog(list);
-        setLoadError(null);
-      },
-      (err: unknown) => {
-        if (cancelled) return;
-        setCatalog(NO_EXTENSIONS);
-        setLoadError(toSettingsError(err));
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [cwd, host, extensionKey, refreshNonce]);
-
-  const installed = useMemo(() => catalog.map((ext) => ext.name), [catalog]);
-  const [picks, setPicks, togglePicks] = useExtensionPicks();
-  const [scope, setScope] = useState<ExtensionPickScope>('user');
-  const [installing, setInstalling] = useState(false);
-  // The last install from the browser failed with what reads like an access problem.
-  const [needsAccess, setNeedsAccess] = useState(false);
-
-  const browseHost = host?.browse;
-  const browse = useCallback(
-    async (input: string) => {
-      try {
-        return await browseHost!(input);
-      } catch (err) {
-        throw new Error(shared.catalogError(toSettingsError(err)));
-      }
-    },
-    [browseHost, shared],
-  );
-
-  /** Installs the picks in turn. One that installed leaves the picks, so a failure keeps only the rest. */
-  const runInstallPicks = useCallback(async () => {
-    if (!cwd || !host?.install || picks.length === 0) return;
-    setInstalling(true);
-    setNeedsAccess(false);
-    let allowed = enabledExtensions;
-    try {
-      for (const pick of picks) {
-        setOpLine({ kind: 'busy', text: l.extensionsSectionInstalling(pick.label) });
-        const request: SettingsExtensionInstall = {
-          source: pick.install.source,
-          scope,
-          ...(pick.install.extension ? { extension: pick.install.extension } : {}),
-        };
-        const { name } = await host.install(cwd, request, (line) => {
-          if (mounted.current) setOpLine({ kind: 'busy', text: line });
-        });
-        // On in the allowlist, so the fresh install contributes at once (an unset list has everything on).
-        if (allowed !== undefined && !allowed.includes(name)) {
-          allowed = [...allowed, name] as typeof allowed;
-          write('enabledExtensions', allowed);
-        }
-        setPicks((current) => current.filter((p) => p.key !== pick.key));
-      }
-      setOpLine(null);
-      setInstallOpen(false);
-    } catch (err) {
-      const error = toSettingsError(err);
-      const text = shared.catalogError(error);
-      setNeedsAccess(needsAccessHint(text));
-      fail(error);
-    } finally {
-      setInstalling(false);
-      setRefreshNonce((n) => n + 1);
-    }
-  }, [cwd, host, picks, setPicks, scope, enabledExtensions, write, l, shared, setOpLine, fail]);
-
-  /** "Change origin…" above Settings; the list is read again once it installed. */
-  const hostChangeOrigin = host?.changeOrigin;
-  const changeOrigin = useMemo<ChangeOrigin | undefined>(
-    () =>
-      cwd && hostChangeOrigin ? (ext, source, onProgress) => hostChangeOrigin(cwd, ext, source, onProgress) : undefined,
-    [cwd, hostChangeOrigin],
-  );
-  const originChanged = useCallback(
-    (message: string) => {
-      if (!mounted.current) return;
-      setOpLine({ kind: 'notice', text: message });
-      setRefreshNonce((n) => n + 1);
-    },
-    [setOpLine],
-  );
-  const openChangeOrigin = useChangeOriginLayer(changeOrigin, originChanged);
-
-  /** The form's install. The form stays open, with what was typed, until it succeeds. */
-  const runInstall = useCallback(
-    async (req: SettingsExtensionInstall) => {
-      if (!cwd || !host?.install) return;
-      setOpLine({ kind: 'busy', text: l.extensionsSectionInstalling(req.source) });
-      try {
-        const { name } = await host.install(cwd, req, (line) => {
-          if (mounted.current) setOpLine({ kind: 'busy', text: line });
-        });
-        // On in the allowlist, so the fresh install contributes at once (an unset list has everything on).
-        if (enabledExtensions !== undefined && !enabledExtensions.includes(name)) {
-          write('enabledExtensions', [...enabledExtensions, name] as typeof enabledExtensions);
-        }
-        setOpLine(null);
-        setInstallOpen(false);
-        setRefreshNonce((n) => n + 1);
-      } catch (err) {
-        fail(err);
-      }
-    },
-    [cwd, host, enabledExtensions, write, l, setOpLine, fail],
-  );
-
-  const runUpdate = useCallback(
-    async (ext: SettingsExtension) => {
-      if (!cwd || !ext.dir || !host?.update) return;
-      setBusyRows((prev) => new Set(prev).add(ext.name));
-      setOpLine({ kind: 'busy', text: l.extensionsSectionUpdating(ext.name) });
-      try {
-        const message = await host.update(cwd, ext);
-        setOpLine({ kind: 'notice', text: message });
-        setRefreshNonce((n) => n + 1);
-      } catch (err) {
-        fail(err);
-      } finally {
-        setBusyRows((prev) => {
-          const next = new Set(prev);
-          next.delete(ext.name);
-          return next;
-        });
-      }
-    },
-    [cwd, host, l, setOpLine, fail],
-  );
-
-  /** Deletes the extension's folder, then drops it from the allowlist: a reinstall of the same name starts from defaults. */
-  const runRemove = useCallback(
-    async (ext: SettingsExtension) => {
-      if (!cwd || !ext.dir || !host?.remove) return;
-      setRemoveArmed(null);
-      setOpLine({ kind: 'busy', text: l.extensionsSectionRemoving(ext.name) });
-      try {
-        await host.remove(cwd, ext);
-        if (enabledExtensions?.includes(ext.name)) {
-          write('enabledExtensions', enabledExtensions.filter((n) => n !== ext.name) as typeof enabledExtensions);
-        }
-        setOpLine(null);
-        setRefreshNonce((n) => n + 1);
-      } catch (err) {
-        fail(err);
-      }
-    },
-    [cwd, host, enabledExtensions, write, l, setOpLine, fail],
-  );
-
-  // An errored extension keeps its folder, so it can be edited too.
-  const openEdit = async (ext: SettingsExtension) => {
-    if (!ext.dir || !onEdit) return;
-    setActionError(null);
-    try {
-      await onEdit(ext);
-    } catch (err) {
-      setActionError(toSettingsError(err));
-    }
-  };
-
-  const canInstall = Boolean(cwd && host?.install);
-  return (
-    <SettingsPanel className={className} style={style}>
-      <SettingsPanelActions
-        actions={
-          canInstall || onCreateExtension ? (
-            <>
-              {canInstall && (
-                <button
-                  type="button"
-                  onClick={() => {
-                    setInstallOpen((open) => !open);
-                    setOpLine(null);
-                  }}
-                  className={BTN_LG_SECONDARY}
-                >
-                  {installOpen ? l.extensionsSectionCancel : l.extensionsSectionInstall}
-                </button>
-              )}
-              {onCreateExtension && (
-                <button type="button" onClick={onCreateExtension} className={BTN_LG_PRIMARY}>
-                  {l.extensionsSectionCreate}
-                </button>
-              )}
-            </>
-          ) : undefined
-        }
-      />
-      <SettingsPanelBody>
-        <div className="space-y-3">
-          <SettingsTutorial
-            topic="extensions"
-            className="mb-6"
-            actions={
-              onCreateExtension && (
-                <button
-                  type="button"
-                  onClick={onCreateExtension}
-                  className={buttonClass({ variant: 'secondary', size: 'sm' })}
-                >
-                  {l.extensionsSectionBuild}
-                </button>
-              )
-            }
-          />
-          {installOpen &&
-            (host?.browse ? (
-              <div className="flex flex-col gap-3 mb-3">
-                <ExtensionSourceBrowser browse={browse} picks={picks} onToggle={togglePicks} installed={installed} />
-                <ExtensionPicksBar
-                  count={picks.length}
-                  scope={{ value: scope, onChange: setScope }}
-                  busy={installing}
-                  onClear={() => setPicks([])}
-                  onInstall={() => void runInstallPicks()}
-                />
-              </div>
-            ) : (
-              <ExtensionInstallForm onSubmit={(req) => void runInstall(req)} />
-            ))}
-          {opLine?.kind === 'error' && <OpLine kind="error">{shared.catalogError(opLine.error)}</OpLine>}
-          {opLine?.kind === 'error' && needsAccess && (
-            <p className="m-0 text-zg-label text-[var(--zg-text-muted)] text-pretty">{l.extensionsSectionAccessHint}</p>
-          )}
-          {loadError && <ErrorNote>{shared.catalogError(loadError)}</ErrorNote>}
-          {actionError && <ErrorNote>{shared.catalogError(actionError)}</ErrorNote>}
-          <ExtensionList
-            catalog={catalog}
-            // A disk extension (it has a folder), errored ones included. Inline and built-in ones have none.
-            // Update and its menu: one installed from a source (its `.install.json`), which the installer follows.
-            actionOf={(ext) =>
-              ext.dir ? (
-                <ExtensionActions
-                  extension={ext}
-                  busy={busyRows.has(ext.name)}
-                  armed={removeArmed === ext.name}
-                  onArm={(armed) => setRemoveArmed(armed ? ext.name : null)}
-                  {...(onEdit ? { onEdit: () => void openEdit(ext) } : {})}
-                  {...(host?.update && ext.origin ? { onUpdate: () => void runUpdate(ext) } : {})}
-                  {...(openChangeOrigin && ext.origin ? { onChangeOrigin: () => openChangeOrigin(ext) } : {})}
-                  {...(host?.remove ? { onRemove: () => void runRemove(ext) } : {})}
-                />
-              ) : null
-            }
-            emptyMessage={cwd ? l.extensionsSectionEmpty : l.extensionsSectionNoFolder}
-          />
-          {children}
-          <ExtensionSlot at="settings.section" className="mt-6 flex-wrap" />
-        </div>
-      </SettingsPanelBody>
-    </SettingsPanel>
-  );
-}
-
-/** Props of {@link ExtensionList}. */
-interface ExtensionListProps {
-  /** The extensions. */
-  catalog: readonly SettingsExtension[];
-  /** Controls beside a row's box. */
-  actionOf?: (extension: SettingsExtension) => ReactNode | undefined;
-  /** Above the list. */
-  preamble?: ReactNode;
-  /** Shown when there are none. */
-  emptyMessage: ReactNode;
-}
-
-/**
- * The extensions with their boxes (`enabledExtensions`): a native one's mark, where it comes from, what it
- * adds. One that failed to load stays unchecked. This computer's Extensions and a server's draw it.
- *
- * @param props - The `catalog`, each extension's controls (`actionOf`), the `preamble` and the `emptyMessage`.
- */
-export function ExtensionList({ catalog, actionOf, preamble, emptyMessage }: ExtensionListProps) {
-  const display = useDisplayPath();
-  const detail = useCallback((ext: SettingsExtension) => detailOf(ext, display), [display]);
-  return (
-    <EnabledList
-      catalog={catalog}
-      keyOf={keyOf}
-      labelOf={nameOf}
-      detailOf={detail}
-      leadOf={leadOf}
-      badgeOf={badgeOf}
-      statusOf={statusOf}
-      {...(actionOf ? { actionOf } : {})}
-      forcedEnabledOf={forcedEnabledOf}
-      preamble={preamble}
-      settingKey="enabledExtensions"
-      emptyMessage={emptyMessage}
-    />
-  );
-}
-
-/** Its description, else its folder (home folder as `~`), then what it adds. */
-const detailOf = (ext: SettingsExtension, display: PathDisplay) =>
-  [
-    ext.description ?? (ext.dir ? display.path(ext.dir) : ''),
-    ext.capabilities && ext.capabilities.length > 0 ? ext.capabilities.join(', ') : '',
-  ]
-    .filter(Boolean)
-    .join(', ');
-const leadOf = (ext: SettingsExtension) => (
-  <ExtensionMark
-    entry={{
-      name: ext.name,
-      ...(ext.displayName ? { label: ext.displayName } : {}),
-      ...(ext.icon ? { icon: ext.icon } : {}),
-    }}
-    size="sm"
-  />
-);
-const badgeOf = (ext: SettingsExtension) => (ext.error ? null : <ExtensionBadge extension={ext} />);
-const statusOf = (ext: SettingsExtension) => (ext.error ? <ExtensionErrorChip extension={ext} /> : undefined);
-
-/** Props of {@link ExtensionActions}. */
-interface ExtensionActionsProps {
-  /** The extension. */
-  extension: SettingsExtension;
-  /** An update of it runs: its buttons wait. */
-  busy: boolean;
-  /** Remove was pressed once: Confirm and Keep show. */
-  armed: boolean;
-  /** Arms or disarms Remove. */
-  onArm: (armed: boolean) => void;
-  /** Opens an authoring session on its folder. Absent: no Edit. */
-  onEdit?: () => void;
-  /** Runs its installer again. Absent: no Update. */
-  onUpdate?: () => void;
-  /** Opens "Change origin…". Absent: Update has no menu. */
-  onChangeOrigin?: () => void;
-  /** Deletes it. Absent: no Remove. */
-  onRemove?: () => void;
-}
-
-/**
- * An extension row's controls: Edit, Update, Remove (asks first), then its folder. With
- * `onChangeOrigin`, a right click on Update or the arrow beside it opens "Update from <origin>"
- * and "Change origin…".
- *
- * @param props - The `extension`, its busy and armed states, and the actions it offers.
- */
-export function ExtensionActions({
-  extension: ext,
-  busy,
-  armed,
-  onArm,
-  onEdit,
-  onUpdate,
-  onChangeOrigin,
-  onRemove,
-}: ExtensionActionsProps) {
-  const l = useExtensionsSectionLabels();
-  const arrow = useRef<HTMLButtonElement>(null);
-  // Where the menu opened: at the cursor (a right click), or under the arrow.
-  const [menu, setMenu] = useState<{ x: number; y: number } | 'arrow' | null>(null);
-  const hasMenu = Boolean(onUpdate && onChangeOrigin);
-  const items: RowActionItem[] =
-    hasMenu && onUpdate && onChangeOrigin
-      ? [
-          {
-            id: 'update',
-            label: ext.origin ? l.extensionsSectionUpdateFrom(ext.origin.label) : l.extensionsSectionUpdate,
-            disabled: busy,
-            onSelect: onUpdate,
-          },
-          { id: 'origin', label: l.extensionsSectionChangeOrigin, disabled: busy, onSelect: onChangeOrigin },
-        ]
-      : [];
-  if (armed && onRemove) {
-    return (
-      <span className="flex items-center gap-1">
-        <button type="button" onClick={onRemove} className={BTN_DANGER_CONFIRM}>
-          {l.extensionsSectionConfirmRemove}
-        </button>
-        <button type="button" onClick={() => onArm(false)} className={BTN_SECONDARY}>
-          {l.extensionsSectionKeep}
-        </button>
-      </span>
-    );
-  }
-  return (
-    <span className="flex items-center gap-1">
-      {onEdit && (
-        <button type="button" onClick={onEdit} disabled={busy} className={BTN_SECONDARY}>
-          {l.extensionsSectionEdit}
-        </button>
-      )}
-      {onUpdate && (
-        <span className="inline-flex items-center gap-0.5">
-          <button
-            type="button"
-            onClick={onUpdate}
-            onContextMenu={
-              hasMenu
-                ? (event) => {
-                    event.preventDefault();
-                    setMenu({ x: event.clientX, y: event.clientY });
-                  }
-                : undefined
-            }
-            disabled={busy}
-            title={l.extensionsSectionUpdateTitle}
-            className={BTN_SECONDARY}
-          >
-            {busy ? l.extensionsSectionUpdateBusy : l.extensionsSectionUpdate}
-          </button>
-          {hasMenu && (
-            <IconButton
-              ref={arrow}
-              icon="i-ph-caret-down"
-              label={l.extensionsSectionUpdateMenu(ext.displayName ?? ext.name)}
-              size="sm"
-              disabled={busy}
-              active={menu !== null}
-              aria-haspopup="menu"
-              aria-expanded={menu !== null}
-              onClick={() => setMenu((open) => (open ? null : 'arrow'))}
-            />
-          )}
-          {hasMenu && (
-            <RowActionsMenu
-              open={menu !== null}
-              anchorRef={arrow}
-              position={typeof menu === 'object' ? menu : null}
-              onClose={() => setMenu(null)}
-              items={items}
-            />
-          )}
-        </span>
-      )}
-      {onRemove && (
-        <button
-          type="button"
-          onClick={() => onArm(true)}
-          disabled={busy}
-          title={l.extensionsSectionRemoveTitle(ext.dir ?? ext.name)}
-          className={BTN_DANGER}
-        >
-          {l.extensionsSectionRemove}
-        </button>
-      )}
-      {ext.dir && <RevealPathButton path={ext.dir} name={ext.name} />}
-    </span>
-  );
-}
-
-function ExtensionBadge({ extension }: { extension: SettingsExtension }) {
-  const l = useExtensionsSectionLabels();
-  return <MetaChip>{l.extensionsSectionSource(extension.source, extension.version)}</MetaChip>;
-}
-
-/**
- * The red "error" chip of an extension that failed to load. It is focusable, and its tooltip says
- * why on hover and keyboard focus; the tooltip describes it (`aria-describedby`).
- */
-function ExtensionErrorChip({ extension }: { extension: SettingsExtension }) {
-  const l = useExtensionsSectionLabels();
-  return (
-    <Tooltip label={extension.error} portal maxWidth={360}>
-      <button type="button" className="inline-flex p-0 bg-transparent border-0 rounded-zg-xs cursor-help zg-focus-ring">
-        <MetaChip tone="danger">{l.extensionsSectionErrorBadge}</MetaChip>
-      </button>
-    </Tooltip>
-  );
-}
-
-/** The install form: a source spec (GitHub / npm / local path), an optional extension name, the scope. */
-function ExtensionInstallForm({ onSubmit }: { onSubmit: (req: SettingsExtensionInstall) => void }) {
-  const l = useExtensionsSectionLabels();
-  const [source, setSource] = useState('');
-  const [extension, setExtension] = useState('');
-  const [scope, setScope] = useState<'user' | 'project'>('user');
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        const trimmed = source.trim();
-        if (!trimmed) return;
-        const selector = extension.trim();
-        onSubmit({ source: trimmed, scope, ...(selector ? { extension: selector } : {}) });
-      }}
-      className={FORM_CARD_CLASS}
-    >
-      <label className={FIELD_LABEL_CLASS}>
-        {l.extensionsSectionSourceField}
-        <input
-          type="text"
-          value={source}
-          onChange={(e) => setSource(e.target.value)}
-          placeholder={l.extensionsSectionSourcePlaceholder}
-          autoFocus
-          className={`${INPUT_CLASS} mt-1 font-mono`}
-        />
-      </label>
-      <label className={FIELD_LABEL_CLASS}>
-        {l.extensionsSectionNameField}
-        <input
-          type="text"
-          value={extension}
-          onChange={(e) => setExtension(e.target.value)}
-          placeholder={l.extensionsSectionNamePlaceholder}
-          className={`${INPUT_CLASS} mt-1 font-mono`}
-        />
-      </label>
-      <div className="flex items-center justify-between gap-3">
-        <ScopePicker
-          scope={scope}
-          onChange={setScope}
-          projectHint={l.extensionsSectionProjectHint}
-          userHint={l.extensionsSectionUserHint}
-        />
-        <button type="submit" className={BTN_LG_PRIMARY}>
-          {l.extensionsSectionInstall}
-        </button>
-      </div>
-    </form>
-  );
-}

package/src/settings/sections/extensions/create-labels.ts

@@ -1,31 +0,0 @@
-/**
- * The create-extension dialog's strings. Overridable through `LabelsProvider`.
- */
-
-/** The default English strings of the create-extension dialog. */
-export const DEFAULT_CREATE_EXTENSION_LABELS = {
-  createExtensionTitle: 'Create extension',
-  createExtensionDescription: 'Create a Zidane extension and open a session to write it.',
-  createExtensionCancel: 'Cancel',
-  createExtensionSubmit: 'Create and edit',
-  createExtensionCreating: 'Creating…',
-  createExtensionName: 'Name',
-  createExtensionNamePlaceholder: 'my-extension',
-  createExtensionNameHint: 'Lowercase letters, numbers, and single hyphens.',
-  createExtensionScope: 'Scope',
-  createExtensionScopeUser: 'User',
-  createExtensionScopeProject: 'Project',
-  createExtensionUserPath: '~/.zidane/extensions/<name>',
-  createExtensionProjectPath: '<project>/.zidane/extensions/<name>',
-  createExtensionNoFolder: 'To create a project extension, pick a folder first.',
-  createExtensionTrust:
-    'Project extensions load only in a trusted project. Write it now and turn it on once you trust the project.',
-  createExtensionCreatedTitle: 'Extension created',
-  createExtensionCreated: 'Created',
-  createExtensionClose: 'Close',
-  createExtensionOpen: 'Open editor',
-  createExtensionOpening: 'Opening…',
-};
-
-/** The shape of the create-extension dialog's label dictionary. */
-export type CreateExtensionLabels = typeof DEFAULT_CREATE_EXTENSION_LABELS;