zidane-ui 9.0.4 → 9.1.3

package/src/settings/sections/providers/ServerSignIn.tsx

@@ -1,136 +0,0 @@
-/**
- * A browser sign-in whose tokens stay on a server (a provider on its
- * Accounts, an MCP server of its catalog): one status line, the page's
- * address (and a device code), a field for a pasted code or address when the
- * browser can't come back here, and Cancel (Close once it ended). It starts
- * the flow `begin` returns when it mounts and cancels it if it unmounts
- * before the flow ends.
- *
- *   {signingIn && (
- *     <ServerSignIn begin={() => host.providers.signIn(key)} hostName="box" label="Anthropic" onClose={close} />
- *   )}
- */
-import { useEffect, useState, type CSSProperties } from 'react';
-
-import { BTN_PRIMARY, BTN_SECONDARY } from '../../../components/button';
-import { INPUT_CLASS, OpLine } from '../../../components/Form';
-import type { SignInFlow } from '../../../onboarding/headless/host';
-import { useSignIn } from '../../../onboarding/useSignIn';
-import { useAccountsSectionLabels } from './ProvidersSection';
-
-/** Props for {@link ServerSignIn}. */
-export interface ServerSignInProps {
-  /** Starts the sign-in; called once, on mount. */
-  begin: () => SignInFlow;
-  /** The server's name, for the lines. */
-  hostName: string;
-  /** What is being signed in to, for the lines. */
-  label: string;
-  /** Closes the strip (Cancel or Close). */
-  onClose: () => void;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a server sign-in from start to end.
- *
- * @param props - `begin`, the `hostName` and `label` the lines name, `onClose`, `className` and `style`.
- */
-export function ServerSignIn({ begin, hostName, label, onClose, className, style }: ServerSignInProps) {
-  const l = useAccountsSectionLabels();
-  const signIn = useSignIn();
-  const [pasted, setPasted] = useState('');
-  const [sending, setSending] = useState(false);
-  const { start } = signIn;
-  // One flow per mount: `begin` names the host and the target, which don't change under it.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => start(begin), []);
-
-  const state = signIn.state ?? { kind: 'starting' as const };
-  const done = state.kind === 'done' || state.kind === 'error';
-  const page = state.kind === 'url' || state.kind === 'device' ? state : null;
-  const line =
-    state.kind === 'done'
-      ? { kind: 'notice' as const, text: l.accountsSignInDone(hostName) }
-      : state.kind === 'error'
-        ? { kind: 'error' as const, text: state.message }
-        : sending
-          ? { kind: 'busy' as const, text: l.accountsSignInSending(hostName) }
-          : state.kind === 'device'
-            ? { kind: 'busy' as const, text: l.accountsSignInDevice }
-            : state.kind === 'url'
-              ? { kind: 'busy' as const, text: l.accountsSignInBrowser(label) }
-              : state.kind === 'prompt' || state.kind === 'progress'
-                ? { kind: 'busy' as const, text: state.message }
-                : { kind: 'busy' as const, text: l.accountsSignInStarting(hostName) };
-  // A `url` state may carry what to tell the user while they sign in (a busy loopback port), as `BrowserSignIn`'s does.
-  const instructions =
-    page?.kind === 'url' && 'instructions' in page && typeof page.instructions === 'string' ? page.instructions : null;
-  const takesInput = signIn.submit !== undefined && (state.kind === 'url' || state.kind === 'prompt');
-
-  return (
-    <div
-      className={['space-y-2 px-3 pb-2.5', className].filter(Boolean).join(' ')}
-      style={style}
-      data-testid="server-oauth"
-    >
-      <OpLine kind={line.kind}>{line.text}</OpLine>
-      {!done && (
-        <>
-          {page?.kind === 'device' && (
-            <p className="m-0 text-xs">
-              {l.accountsSignInCode} <code data-testid="server-oauth-code">{page.userCode}</code>
-            </p>
-          )}
-          {page && (
-            <p className="m-0 text-xs text-[var(--zg-text-muted)] break-all">
-              <a href={page.url} target="_blank" rel="noreferrer">
-                {page.url}
-              </a>
-            </p>
-          )}
-          {instructions && <p className="m-0 text-xs text-[var(--zg-text-muted)]">{instructions}</p>}
-          {takesInput && (
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape closes the strip, not a modal around it
-            <form
-              className="flex items-center gap-2"
-              onKeyDown={(event) => {
-                if (event.key !== 'Escape') return;
-                event.stopPropagation();
-                onClose();
-              }}
-              onSubmit={(event) => {
-                event.preventDefault();
-                if (!pasted.trim()) return;
-                signIn.submit?.(pasted);
-                setPasted('');
-                if (state.kind === 'url') setSending(true);
-              }}
-            >
-              <input
-                type="text"
-                autoComplete="off"
-                aria-label={l.accountsSignInPasteField}
-                placeholder={
-                  state.kind === 'prompt' && state.placeholder ? state.placeholder : l.accountsSignInPastePlaceholder
-                }
-                className={INPUT_CLASS}
-                value={pasted}
-                onChange={(event) => setPasted(event.target.value)}
-              />
-              <button type="submit" className={BTN_PRIMARY} disabled={!pasted.trim()}>
-                {l.accountsSignInSend}
-              </button>
-            </form>
-          )}
-        </>
-      )}
-      <button type="button" className={BTN_SECONDARY} onClick={onClose}>
-        {done ? l.accountsSignInClose : l.accountsSignInCancel}
-      </button>
-    </div>
-  );
-}

package/src/settings/sections/providers/labels.ts

@@ -1,160 +0,0 @@
-/**
- * The strings of Settings › Accounts: the providers list
- * (`ProvidersSection`), a provider's credential sources, a server's
- * providers (`ServerProvidersSection`) and its sign-in strip
- * (`ServerSignIn`). One flat dictionary an app overrides with
- * `<LabelsProvider>`; keys you leave out keep the default English label.
- */
-import { DEFAULT_OAUTH_ACCOUNT_LABEL } from 'zidane/chat/pure';
-
-import type { SettingsError } from '../../headless/host';
-
-/** The default English strings of the Accounts sections. */
-export const DEFAULT_ACCOUNTS_SECTION_LABELS = {
-  /** A failed read or action, worded from the host's error. */
-  accountsError: (error: SettingsError) =>
-    error.detail ??
-    (error.kind === 'unreachable'
-      ? "Couldn't reach the host."
-      : error.kind === 'refused'
-        ? 'Not allowed: this connection may not do that.'
-        : 'Something went wrong.'),
-
-  /** The status dot of a provider with a credential. */
-  accountsAuthenticated: 'Authenticated',
-  /** The status dot of a provider without one. */
-  accountsNotAuthenticated: 'Not authenticated',
-  /** The chip of a provider whose configuration fields are stored. */
-  accountsConfigured: 'Configured',
-  /** The chip of a provider with a stored API key. */
-  accountsApiKeyChip: 'API key',
-  /** The chip of a provider with a stored OAuth account. */
-  accountsOAuthChip: 'OAuth',
-  /** The description of a provider an extension of the folder added. */
-  accountsFromExtension: 'Added by an extension in this folder.',
-  /** Starts a second OAuth account. */
-  accountsAddAccount: 'Add account',
-  /** Starts the first browser sign-in. */
-  accountsSignInWith: (account: string) => `Sign in with ${account}`,
-  /** Opens the configuration form of a configured provider. */
-  accountsEditConfig: 'Edit config',
-  /** Opens the configuration form. */
-  accountsConfigure: 'Configure',
-  /** Opens the key form of a provider with a key. */
-  accountsReplaceKey: 'Replace key',
-  /** Opens the key form. */
-  accountsSetKey: 'Set key',
-  /** Removes every stored credential. */
-  accountsClear: 'Clear',
-  /** While that runs. */
-  accountsClearing: 'Clearing…',
-  /** The confirm before Clear. */
-  accountsClearConfirm: (provider: string) => `Clear ${provider} credentials?`,
-  /** The new account's name field. */
-  accountsAccountName: 'Account name',
-  /** Its placeholder. */
-  accountsAccountNamePlaceholder: 'Account name, for example work or personal',
-  /** Starts the named sign-in. */
-  accountsSignIn: 'Sign in',
-  /** Closes a form. */
-  accountsCancel: 'Cancel',
-  /** A secret field of a configured provider. */
-  accountsKeepSecret: 'Leave blank to keep the current value',
-  /** After a required field's caption. */
-  accountsRequired: ' *',
-  /** Saves the configuration. */
-  accountsSaveConfig: 'Save config',
-  /** Saves the key. */
-  accountsSave: 'Save',
-  /** While a save runs. */
-  accountsSaving: 'Saving…',
-  /** The key field's placeholder when the provider names none. */
-  accountsKeyPlaceholder: 'API key…',
-  /** The key field's name. */
-  accountsKeyField: (provider: string) => `${provider} API key`,
-
-  /** The credential sources list's name. */
-  accountsSources: (provider: string) => `${provider} credential sources`,
-  /** After the credential in use. */
-  accountsInUse: '(in use)',
-  /** The rename field's name. */
-  accountsRenameField: (name: string) => `New name for ${name}`,
-  /** The rename field's placeholder. */
-  accountsRenamePlaceholder: DEFAULT_OAUTH_ACCOUNT_LABEL,
-  /** Saves a name. */
-  accountsRenameSave: 'Save',
-  /** Its tooltip. */
-  accountsRenameSaveTitle: 'Save name',
-  /** Drops a rename. */
-  accountsRenameCancel: 'Cancel',
-  /** Its tooltip. */
-  accountsRenameCancelTitle: 'Cancel rename',
-  /** Makes a credential the one in use. */
-  accountsUse: 'Use',
-  /** While that runs. */
-  accountsSwitching: 'Switching…',
-  /** Its tooltip. */
-  accountsUseTitle: (source: string, provider: string) => `Use this ${source} credential for ${provider}`,
-  /** Renames an OAuth account. */
-  accountsRename: 'Rename',
-  /** While that runs. */
-  accountsRenaming: 'Renaming…',
-  /** Its tooltip. */
-  accountsRenameTitle: (name: string) => `Rename ${name}`,
-  /** Signs an OAuth account in again. */
-  accountsReauth: 'Re-auth',
-  /** Its tooltip. */
-  accountsReauthTitle: (name: string) => `Sign in again for ${name}`,
-  /** Removes one stored credential. */
-  accountsRemove: 'Remove',
-  /** While that runs. */
-  accountsRemoving: 'Removing…',
-  /** Its tooltip. */
-  accountsRemoveTitle: (name: string, provider: string) => `Remove ${name} from ${provider}`,
-  /** The confirm before Remove. */
-  accountsRemoveConfirm: (provider: string, name: string, active: boolean) =>
-    `Remove ${provider} ${name}${active ? ' (in use)' : ''}?`,
-
-  /** Its list could not be read. */
-  accountsServerReadFailed: (host: string, reason: string) => `Couldn't read ${host}'s providers: ${reason}`,
-  /** While it is read. */
-  accountsServerReading: (host: string) => `Reading ${host}'s providers…`,
-  /** The chip of a provider with a credential there. */
-  accountsServerConfigured: 'configured',
-  /** The chip of a provider without one. */
-  accountsServerNotConfigured: 'not configured',
-  /** Opens the key form. */
-  accountsServerSetKey: 'Set API key',
-  /** A stored OAuth account. */
-  accountsServerOAuth: (account: string | undefined) => (account ? `OAuth ${account}` : 'OAuth'),
-  /** A stored API key. */
-  accountsServerApiKey: 'API key',
-  /** The chip of the credential in use. */
-  accountsServerActive: 'active',
-
-  /** A server sign-in starting. */
-  accountsSignInStarting: (host: string) => `Starting the sign-in on ${host}…`,
-  /** A device code to enter. */
-  accountsSignInDevice: 'Enter the code in your browser, then wait.',
-  /** The browser page is open. */
-  accountsSignInBrowser: (service: string) => `Finish signing in to ${service} in your browser.`,
-  /** Signed in. */
-  accountsSignInDone: (host: string) => `Signed in. The tokens stay on ${host}.`,
-  /** Before the device code. */
-  accountsSignInCode: 'Code:',
-  /** The paste field's name. */
-  accountsSignInPasteField: 'Code or the address the browser landed on',
-  /** Its placeholder. */
-  accountsSignInPastePlaceholder: 'Paste the code, or the address the browser landed on',
-  /** Sends what was pasted. */
-  accountsSignInSend: 'Send',
-  /** While it is sent. */
-  accountsSignInSending: (host: string) => `Sending the code to ${host}…`,
-  /** Closes a finished sign-in. */
-  accountsSignInClose: 'Close',
-  /** Stops a sign-in. */
-  accountsSignInCancel: 'Cancel',
-};
-
-/** The shape of the Accounts sections' label dictionary. */
-export type AccountsSectionLabels = typeof DEFAULT_ACCOUNTS_SECTION_LABELS;

package/src/settings/sections/shared/catalog.tsx

@@ -1,246 +0,0 @@
-/**
- * The pieces the catalog sections share: the enabled-allowlist hook over the
- * settings host, a resource hook, the toggle list, the scope picker, the
- * path buttons and the op line state. Internal to the sections.
- */
-import { useCallback, useMemo, useState, useSyncExternalStore, type CSSProperties, type ReactNode } from 'react';
-import type { Settings } from 'zidane/chat';
-
-import { EmptyState } from '../../../components/Surface';
-import { Checkbox } from '../../../components/Form';
-import { IconButton } from '../../../components/IconButton';
-import { Segmented } from '../../../components/Segmented';
-import { enabledNames, toggleEnabled, type SettingsEnabledListKey } from '../../headless/enabled';
-import { toSettingsError, type SettingsError } from '../../headless/host';
-import type { SettingsLoad, SettingsResource } from '../../headless/sections-host';
-import { useSettingsDocument, useSettingsHost, useSettingsWritable } from '../../SettingsProvider';
-import { useSectionLabels } from '../use-section-labels';
-import { DEFAULT_CATALOG_SHARED_LABELS, type CatalogSharedLabels } from './labels';
-
-/** The shared catalog strings, overridable through `LabelsProvider`. */
-export function useCatalogSharedLabels(): CatalogSharedLabels {
-  return useSectionLabels(DEFAULT_CATALOG_SHARED_LABELS);
-}
-
-const IDLE: SettingsLoad<never> = { data: undefined, error: null, loading: false };
-const noop = () => () => undefined;
-const idle = () => IDLE;
-
-/** A resource's value, re-rendering when it changes (`null`: nothing to read). */
-export function useSettingsResource<T>(resource: SettingsResource<T> | null): SettingsLoad<T> {
-  return useSyncExternalStore(
-    resource ? resource.subscribe : noop,
-    resource ? resource.get : idle,
-    resource ? resource.get : idle,
-  ) as SettingsLoad<T>;
-}
-
-/** The settings values now (`undefined` until read). */
-export function useSettingsValues(): Settings | undefined {
-  const doc = useSettingsDocument();
-  return doc.status === 'ready' ? doc.values : undefined;
-}
-
-/** Writes one setting through the host (a no-op without `update`); a refused write stays as the host holds it. */
-export function useWriteSetting(): <K extends keyof Settings>(key: K, value: Settings[K]) => void {
-  const host = useSettingsHost();
-  return useCallback(
-    <K extends keyof Settings>(key: K, value: Settings[K]) => {
-      void host.update?.({ [key]: value } as Partial<Settings>).catch(() => undefined);
-    },
-    [host],
-  );
-}
-
-/** An enabled allowlist bound to a catalog: which names are on, a toggle that writes the list, and whether it may (`writable`). */
-export function useEnabledList<T>(
-  catalog: readonly T[],
-  keyOf: (entry: T) => string,
-  settingKey: SettingsEnabledListKey,
-): { enabledSet: ReadonlySet<string>; toggle: (name: string) => void; writable: boolean } {
-  const values = useSettingsValues();
-  const writable = useSettingsWritable();
-  const write = useWriteSetting();
-  const persisted = values?.[settingKey] as readonly string[] | undefined;
-  const names = useMemo(() => catalog.map(keyOf), [catalog, keyOf]);
-  const enabledSet = useMemo(() => enabledNames(persisted, names), [persisted, names]);
-  const toggle = useCallback(
-    (name: string) => write(settingKey, toggleEnabled(persisted, names, name) as Settings[typeof settingKey]),
-    [persisted, names, settingKey, write],
-  );
-  return { enabledSet, toggle, writable };
-}
-
-/** A section's status line: busy, a notice, or an error. */
-export type OpLineState = { kind: 'busy' | 'notice'; text: string } | { kind: 'error'; error: SettingsError } | null;
-
-/** The op line state, and a setter for an error caught from a host call. */
-export function useOpLine(): [OpLineState, (next: OpLineState) => void, (error: unknown) => void] {
-  const [line, setLine] = useState<OpLineState>(null);
-  const fail = useCallback((error: unknown) => setLine({ kind: 'error', error: toSettingsError(error) }), []);
-  return [line, setLine, fail];
-}
-
-/** Props for {@link ScopePicker}. */
-export interface ScopePickerProps {
-  scope: 'user' | 'project';
-  onChange: (scope: 'user' | 'project') => void;
-  projectHint: string;
-  userHint: string;
-  projectDisabled?: boolean;
-}
-
-/** Project / user scope for the add and install forms. */
-export function ScopePicker({ scope, onChange, projectHint, userHint, projectDisabled = false }: ScopePickerProps) {
-  const l = useCatalogSharedLabels();
-  return (
-    <div className="flex items-center gap-2">
-      <span className="text-xs text-[var(--zg-text-muted)]">{l.catalogScope}</span>
-      <Segmented
-        size="sm"
-        ariaLabel={l.catalogScope}
-        value={scope}
-        onChange={onChange}
-        options={[
-          { value: 'project', label: l.catalogScopeProject, title: projectHint, disabled: projectDisabled },
-          { value: 'user', label: l.catalogScopeUser, title: userHint },
-        ]}
-      />
-    </div>
-  );
-}
-
-/** Shows `path` in the file manager, when the host can. */
-export function RevealPathButton({ path, name }: { path: string; name: string }) {
-  const reveal = useSettingsHost().paths?.reveal;
-  const l = useCatalogSharedLabels();
-  if (!reveal) return null;
-  return (
-    <IconButton
-      icon="i-ph-folder-open"
-      label={l.catalogReveal(name)}
-      title={path}
-      size="sm"
-      onClick={() => void reveal(path).catch(() => undefined)}
-    />
-  );
-}
-
-/** Opens `path` in the editor (`onOpen` instead, when given), when the host can. */
-export function OpenFileButton({ path, name, onOpen }: { path: string; name: string; onOpen?: () => void }) {
-  const open = useSettingsHost().paths?.open;
-  const l = useCatalogSharedLabels();
-  if (!onOpen && !open) return null;
-  return (
-    <IconButton
-      icon="i-ph-arrow-square-out"
-      label={l.catalogOpen(name)}
-      title={path}
-      size="sm"
-      onClick={onOpen ?? (() => void open?.(path).catch(() => undefined))}
-    />
-  );
-}
-
-/** Props for {@link EnabledList}. */
-export interface EnabledListProps<T> {
-  /** The discovered catalog. Empty: the empty state. */
-  catalog: readonly T[];
-  /** Stable identity per entry, also the allowlist key. */
-  keyOf: (entry: T) => string;
-  /** The row's label. */
-  labelOf: (entry: T) => string;
-  /** A second line. */
-  detailOf?: (entry: T) => string;
-  /** Before the label, such as a logo. */
-  leadOf?: (entry: T) => ReactNode | undefined;
-  /** After the label (chips). */
-  badgeOf?: (entry: T) => ReactNode | undefined;
-  /** Controls beside the toggle (siblings: nested buttons are invalid HTML). */
-  actionOf?: (entry: T) => ReactNode | undefined;
-  /** A forced state for entries that can't be toggled here. */
-  forcedEnabledOf?: (entry: T) => boolean | undefined;
-  /** The entries the allowlist governs. Default: every entry. */
-  toggleableOf?: (entry: T) => boolean;
-  /** Above the list. */
-  preamble?: ReactNode;
-  /** Which setting holds the allowlist. */
-  settingKey: SettingsEnabledListKey;
-  /** Shown when the catalog is empty. */
-  emptyMessage: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-/** A checkbox list over an enabled allowlist. */
-export function EnabledList<T>({
-  catalog,
-  keyOf,
-  labelOf,
-  detailOf,
-  leadOf,
-  badgeOf,
-  actionOf,
-  forcedEnabledOf,
-  toggleableOf,
-  preamble,
-  settingKey,
-  emptyMessage,
-  className,
-  style,
-}: EnabledListProps<T>) {
-  // Names off the toggleable set stay in (or out of) the list untouched.
-  const toggleable = useMemo(() => (toggleableOf ? catalog.filter(toggleableOf) : catalog), [catalog, toggleableOf]);
-  const { enabledSet, toggle, writable } = useEnabledList(toggleable, keyOf, settingKey);
-
-  return (
-    <div className={className} style={style}>
-      {preamble}
-      {catalog.length === 0 ? (
-        <EmptyState title={emptyMessage} />
-      ) : (
-        <ul className="zg-tray rounded-zg-lg flex flex-col list-none m-0 p-1">
-          {catalog.map((entry) => {
-            const key = keyOf(entry);
-            const forcedEnabled = forcedEnabledOf?.(entry);
-            const enabled = forcedEnabled ?? enabledSet.has(key);
-            const canToggle = forcedEnabled === undefined && writable;
-            const action = actionOf?.(entry);
-
-            return (
-              <li
-                key={key}
-                // The hover tint spans the action buttons too; they keep their own hover on top.
-                className="flex items-stretch gap-1 rounded-zg-md hover:bg-[var(--zg-row-hover)] transition-colors"
-              >
-                <button
-                  type="button"
-                  aria-pressed={enabled}
-                  onClick={() => {
-                    if (canToggle) toggle(key);
-                  }}
-                  disabled={!canToggle}
-                  className="zg-press-subtle flex items-start gap-3 flex-1 min-w-0 text-left px-3 py-2.5 rounded-zg-md cursor-pointer bg-transparent border-0 text-[var(--zg-text)] disabled:cursor-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]"
-                >
-                  <Checkbox checked={enabled} />
-                  <div className="flex-1 min-w-0">
-                    <div className="text-sm flex items-center gap-2">
-                      {leadOf?.(entry)}
-                      <span className="text-zg-ui font-medium">{labelOf(entry)}</span>
-                      {badgeOf?.(entry)}
-                    </div>
-                    {detailOf && (
-                      <div className="text-xs text-[var(--zg-text-muted)] truncate mt-0.5">{detailOf(entry)}</div>
-                    )}
-                  </div>
-                </button>
-                {/* `items-start` + pt-1.5 centers the h-7 buttons on the row's first line, level with the checkbox. */}
-                {action ? <div className="flex items-start pt-1.5 shrink-0 pr-1">{action}</div> : null}
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </div>
-  );
-}

package/src/settings/sections/shared/labels.ts

@@ -1,31 +0,0 @@
-/**
- * Strings the catalog sections share (Skills, Extensions, Plugins, a host's
- * catalog, Instructions): the scope picker, the path buttons and the error
- * wording. Overridable through `LabelsProvider`.
- */
-import type { SettingsError } from '../../headless/host';
-
-/** The default English strings shared by the catalog sections. */
-export const DEFAULT_CATALOG_SHARED_LABELS = {
-  /** The scope picker's caption and name. */
-  catalogScope: 'Scope',
-  /** The project scope option. */
-  catalogScopeProject: 'project',
-  /** The user scope option. */
-  catalogScopeUser: 'user',
-  /** A row's reveal button. */
-  catalogReveal: (name: string) => `Show ${name} in Finder`,
-  /** A row's open-in-editor button. */
-  catalogOpen: (name: string) => `Open ${name}`,
-  /** An action or read that failed. */
-  catalogError: (error: SettingsError) =>
-    error.detail ??
-    (error.kind === 'unreachable'
-      ? "Couldn't reach the host."
-      : error.kind === 'refused'
-        ? 'Not allowed: this connection may not do that.'
-        : 'Something went wrong.'),
-};
-
-/** The shape of the shared catalog label dictionary. */
-export type CatalogSharedLabels = typeof DEFAULT_CATALOG_SHARED_LABELS;