zidane-ui 9.0.4 → 9.1.3

package/src/onboarding/skills/parts.tsx

@@ -1,440 +0,0 @@
-/**
- * The pieces of the skill source browser: a source's avatar and preview
- * image, the recommended sources (rows with their preview, or chips once a
- * source is open), the header of an open source, a skill's row and the
- * skeleton rows of a loading source. Pictures load into fixed boxes, so
- * nothing moves when they arrive, and fade in. There are a few per view, so
- * they load at once rather than lazily.
- */
-import { useCallback, useEffect, useId, useRef, useState, type CSSProperties } from 'react';
-import {
-  skillCategory,
-  type RecommendedSkillSource,
-  type SkillSourceListing,
-  type SkillSourceSkill,
-} from 'zidane/chat/pure';
-
-import { BrandMark } from '../../components/BrandMark';
-import { buttonClass } from '../../components/button';
-import { Checkbox, MetaChip } from '../../components/Form';
-import type { SkillSourceImages } from '../headless/host';
-import { useOnboardingLabels } from '../OnboardingProvider';
-
-/** Props of {@link SourceAvatar}. */
-export interface SourceAvatarProps {
-  owner: string;
-  src?: string;
-  size?: 'sm' | 'md';
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/**
- * Renders an owner's avatar, or the owner's letter when there is none or it fails to load.
- *
- * @param props - Component props.
- */
-export function SourceAvatar({ owner, src, size = 'md', className }: SourceAvatarProps) {
-  const [failed, setFailed] = useState(false);
-  if (!src || failed) return <BrandMark label={owner} size={size} className={className} />;
-  return (
-    <img
-      src={src}
-      alt=""
-      width={size === 'sm' ? 18 : 28}
-      height={size === 'sm' ? 18 : 28}
-      decoding="async"
-      onError={() => setFailed(true)}
-      className={[
-        `zg-source-avatar shrink-0 object-cover bg-[var(--zg-track)] ${size === 'sm' ? 'rounded-zg-xs' : 'rounded-zg-md'}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    />
-  );
-}
-
-/** Props of {@link SourcePreview}. */
-export interface SourcePreviewProps {
-  src?: string;
-  owner: string;
-  avatar?: string;
-  size?: 'md' | 'lg';
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a repository's preview image in a fixed 2:1 box. It fades in once
- * loaded. Without one, or when GitHub refuses it (it limits bursts), the box
- * shows the owner's avatar on its tint.
- *
- * @param props - Component props.
- */
-export function SourcePreview({ src, owner, avatar, size = 'md', className, style }: SourcePreviewProps) {
-  const [state, setState] = useState<'loading' | 'loaded' | 'failed'>('loading');
-  // An image that finished before React listened (a cached copy, a hydrated page) fires no load event.
-  const settled = useCallback((img: HTMLImageElement | null) => {
-    if (img?.complete) setState(img.naturalWidth > 0 ? 'loaded' : 'failed');
-  }, []);
-  return (
-    <span
-      aria-hidden
-      className={['zg-source-preview', className].filter(Boolean).join(' ')}
-      data-size={size}
-      style={style}
-    >
-      {(!src || state === 'failed') && (
-        <span className="absolute inset-0 grid place-items-center">
-          <SourceAvatar owner={owner} src={avatar} />
-        </span>
-      )}
-      {src && state !== 'failed' && (
-        <img
-          ref={settled}
-          src={src}
-          alt=""
-          width={1200}
-          height={600}
-          decoding="async"
-          data-loaded={state === 'loaded' ? '' : undefined}
-          onLoad={() => setState('loaded')}
-          onError={() => setState('failed')}
-        />
-      )}
-    </span>
-  );
-}
-
-/** Props of {@link SourceRows}. */
-export interface SourceRowsProps {
-  sources: readonly RecommendedSkillSource[];
-  images: SkillSourceImages;
-  picked: (source: RecommendedSkillSource) => number;
-  onOpen: (source: RecommendedSkillSource) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the recommended sources as rows, each with its preview, avatar, name, repository and description.
- *
- * @param props - Component props.
- */
-export function SourceRows({ sources, images, picked, onOpen, className, style }: SourceRowsProps) {
-  const labels = useOnboardingLabels();
-  const id = useId();
-  const repoOf = (source: RecommendedSkillSource) =>
-    source.path ? `${source.owner}/${source.repo}/${source.path}` : `${source.owner}/${source.repo}`;
-  return (
-    <ul className={['m-0 p-0 list-none flex flex-col', className].filter(Boolean).join(' ')} style={style}>
-      {sources.map((source) => (
-        <li key={source.id} className="zg-source-row">
-          <button
-            type="button"
-            aria-label={labels.sourceName(source.label, repoOf(source))}
-            aria-describedby={`${id}-${source.id}`}
-            onClick={() => onOpen(source)}
-            className="zg-press-subtle flex items-center gap-4 w-full min-w-0 p-2 text-left rounded-zg-lg bg-transparent border-0 cursor-pointer text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] zg-focus-ring"
-          >
-            <SourcePreview
-              src={images.preview(source.owner, source.repo)}
-              owner={source.owner}
-              avatar={images.avatar(source.owner)}
-            />
-            <span className="flex flex-col gap-1 flex-1 min-w-0">
-              <span className="flex items-center gap-2 min-w-0">
-                <SourceAvatar owner={source.owner} src={images.avatar(source.owner)} size="sm" />
-                <span className="text-zg-ui font-medium truncate">{source.label}</span>
-                <span className="zg-meta font-mono truncate">{repoOf(source)}</span>
-                {picked(source) > 0 && <MetaChip tone="accent">{labels.skillsPicked(picked(source))}</MetaChip>}
-              </span>
-              <span
-                id={`${id}-${source.id}`}
-                className="text-zg-label text-[var(--zg-text-muted)] text-pretty line-clamp-2"
-              >
-                {source.description}
-              </span>
-            </span>
-            <span
-              aria-hidden
-              className="zg-source-chevron i-ph-caret-right text-zg-label text-[var(--zg-text-muted)] shrink-0"
-            />
-          </button>
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-/** Props of {@link SourceChips}. */
-export interface SourceChipsProps {
-  sources: readonly RecommendedSkillSource[];
-  images: SkillSourceImages;
-  current: string | undefined;
-  picked: (source: RecommendedSkillSource) => number;
-  onOpen: (source: RecommendedSkillSource) => void;
-  /** Closes the open source. Absent: no way back, because no source is open. */
-  onClose?: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the recommended sources as chips, the open one pressed, so the user can switch sources.
- *
- * @param props - Component props.
- */
-export function SourceChips({ sources, images, current, picked, onOpen, onClose, className, style }: SourceChipsProps) {
-  const labels = useOnboardingLabels();
-  const track = useRef<HTMLDivElement>(null);
-  // The open source's chip in view: it may sit past the right edge.
-  useEffect(() => {
-    const chip = track.current?.querySelector<HTMLElement>('[aria-pressed="true"]');
-    const box = track.current;
-    if (!chip || !box) return;
-    const left = chip.offsetLeft - box.offsetLeft;
-    if (left < box.scrollLeft || left + chip.offsetWidth > box.scrollLeft + box.clientWidth)
-      box.scrollTo({ left: left - box.clientWidth / 2 + chip.offsetWidth / 2 });
-  }, [current]);
-  return (
-    <div className={['flex items-center gap-1.5 min-w-0', className].filter(Boolean).join(' ')} style={style}>
-      {onClose && (
-        <button
-          type="button"
-          onClick={onClose}
-          className={`${buttonClass({ variant: 'ghost', size: 'xs', flush: 'start' })} shrink-0`}
-        >
-          <span aria-hidden className="i-ph-caret-left" />
-          {labels.allSources}
-        </button>
-      )}
-      {/* One row that scrolls; its edges fade only where there is more to see. The
-          vertical padding keeps the chips' hover and focus rings out of the clip. */}
-      <div
-        ref={track}
-        className="zg-no-scrollbar zg-scroll-fade-x flex-1 min-w-0 flex items-center gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain py-1 -my-1"
-      >
-        {sources.map((source) => {
-          const on = current === source.spec;
-          const count = picked(source);
-          return (
-            <button
-              key={source.id}
-              type="button"
-              aria-pressed={on}
-              aria-label={labels.sourceChipName(source.label, count)}
-              title={source.description}
-              onClick={() => onOpen(source)}
-              className={`zg-source-chip zg-press-subtle shrink-0 whitespace-nowrap inline-flex items-center gap-1.5 h-7 pl-1 pr-2.5 rounded-full border cursor-pointer text-zg-label zg-focus-ring ${
-                on
-                  ? 'zg-raised text-[var(--zg-text)]'
-                  : 'border-transparent bg-transparent text-[var(--zg-text-muted)] hover:before:bg-[var(--zg-row-hover)]'
-              }`}
-            >
-              <SourceAvatar owner={source.owner} src={images.avatar(source.owner)} size="sm" />
-              {source.label}
-              {count > 0 && <span className="zg-source-count">{count}</span>}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-/** Props of {@link SourceHeader}. */
-export interface SourceHeaderProps {
-  listing: SkillSourceListing;
-  images: SkillSourceImages;
-  picked: number;
-  allPicked: boolean;
-  onSelectAll: (on: boolean) => void;
-  /** Show the repository's preview image. */
-  preview?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the header of an open source: its preview, avatar, name, stars, link, description and counts.
- *
- * @param props - Component props.
- */
-export function SourceHeader({
-  listing,
-  images,
-  picked,
-  allPicked,
-  onSelectAll,
-  preview = true,
-  className,
-  style,
-}: SourceHeaderProps) {
-  const labels = useOnboardingLabels();
-  const { source, skills } = listing;
-  const owner = source.owner;
-  const avatar = owner ? (images.avatar(owner) ?? source.avatarUrl) : undefined;
-  const image = owner && source.repo ? (images.preview(owner, source.repo) ?? source.imageUrl) : undefined;
-  const selectable = skills.length > 0;
-  return (
-    <div className={['flex items-start gap-4 p-2 pb-3 min-w-0', className].filter(Boolean).join(' ')} style={style}>
-      {owner && preview && <SourcePreview src={image} owner={owner} avatar={avatar} size="lg" />}
-      <div className="flex flex-col gap-1.5 flex-1 min-w-0 pt-0.5">
-        <div className="flex items-center gap-2 min-w-0">
-          <SourceAvatar owner={owner ?? source.label} src={avatar} size="sm" />
-          <span className="text-zg-ui font-medium truncate">{source.label}</span>
-          {source.collection && <MetaChip tone="accent">{labels.pack}</MetaChip>}
-          {source.stars !== undefined && (
-            <span className="zg-meta inline-flex items-center gap-1 shrink-0">
-              <span aria-hidden className="i-ph-star-fill" />
-              {labels.stars(source.stars)}
-            </span>
-          )}
-          <a
-            href={source.url}
-            target="_blank"
-            rel="noreferrer"
-            className={`${buttonClass({ variant: 'ghost', size: 'xs', flush: 'end' })} ml-auto shrink-0`}
-          >
-            {source.kind === 'npm' ? labels.viewOnNpm : labels.viewOnGithub}
-            <span aria-hidden className="i-ph-arrow-up-right" />
-          </a>
-        </div>
-        {source.description && (
-          <p className="m-0 text-zg-label text-[var(--zg-text-muted)] text-pretty line-clamp-2">{source.description}</p>
-        )}
-        {source.collection && (
-          <p className="m-0 text-zg-label text-[var(--zg-text-muted)] text-pretty">{labels.packHint}</p>
-        )}
-        <div className="flex items-center gap-2 min-w-0 pt-0.5">
-          <span className="zg-meta">{labels.skillCount(skills.length)}</span>
-          {picked > 0 && <MetaChip tone="accent">{labels.skillsPicked(picked)}</MetaChip>}
-          {selectable && (
-            <button
-              type="button"
-              onClick={() => onSelectAll(!allPicked)}
-              className={`${buttonClass({ variant: 'ghost', size: 'xs', flush: 'end' })} ml-auto`}
-            >
-              {allPicked ? labels.clearPicks : labels.selectAll}
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/** Props of {@link SkillRow}. */
-export interface SkillRowProps {
-  skill: SkillSourceSkill;
-  picked: boolean;
-  installed: boolean;
-  onToggle: (on: boolean) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders one skill as a checkbox row: name, folder or repository, description, and Installed.
- *
- * @param props - Component props.
- */
-export function SkillRow({ skill, picked, installed, onToggle, className, style }: SkillRowProps) {
-  const labels = useOnboardingLabels();
-  const folder = skillCategory(skill);
-  return (
-    <button
-      type="button"
-      role="checkbox"
-      aria-checked={installed || picked}
-      disabled={installed}
-      onClick={() => onToggle(!picked)}
-      data-picked={picked ? '' : undefined}
-      className={[
-        'zg-skill-row zg-press-subtle flex items-start gap-3 w-full min-w-0 px-3 py-2.5 text-left rounded-zg-lg bg-transparent border-0 cursor-pointer text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] disabled:cursor-default disabled:hover:before:bg-transparent zg-focus-ring',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <Checkbox checked={installed || picked} />
-      <span className="flex flex-col gap-0.5 flex-1 min-w-0">
-        <span className="flex items-center gap-2 min-w-0">
-          <span className="text-zg-ui font-medium truncate">{skill.name}</span>
-          {skill.from ? (
-            <span className="zg-meta font-mono truncate">{labels.fromRepo(skill.from)}</span>
-          ) : (
-            folder && <span className="zg-meta font-mono truncate">{folder}</span>
-          )}
-          {installed && (
-            <MetaChip tone="success" className="ml-auto">
-              {labels.installed}
-            </MetaChip>
-          )}
-        </span>
-        {skill.description && (
-          <span className="text-zg-label text-[var(--zg-text-muted)] text-pretty line-clamp-2">
-            {skill.description}
-          </span>
-        )}
-      </span>
-    </button>
-  );
-}
-
-/** Props of {@link SkeletonListing}. */
-export interface SkeletonListingProps {
-  label: string;
-  preview?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the skeleton of a loading source: a header and a few rows, at their loaded size.
- *
- * @param props - Component props.
- */
-export function SkeletonListing({ label, preview = true, className, style }: SkeletonListingProps) {
-  return (
-    <div
-      role="status"
-      aria-label={label}
-      className={['flex flex-col', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <div className="flex items-start gap-4 p-2 pb-3">
-        {preview && <span aria-hidden className="zg-source-preview" data-size="lg" />}
-        <span aria-hidden className="flex flex-col gap-2.5 flex-1 pt-1.5">
-          <span className="zg-loop zg-skeleton h-3 w-40" />
-          <span className="zg-loop zg-skeleton h-2.5 w-4/5" />
-          <span className="zg-loop zg-skeleton h-2.5 w-24" />
-        </span>
-      </div>
-      {[62, 48, 70, 54].map((width, i) => (
-        <span key={i} aria-hidden className="flex items-start gap-3 px-3 py-3">
-          <span className="zg-loop zg-skeleton w-4 h-4 rounded-zg-sm" />
-          <span className="flex flex-col gap-2 flex-1">
-            <span className="zg-loop zg-skeleton h-2.5 w-28" />
-            <span className="zg-loop zg-skeleton h-2 rounded-full" style={{ width: `${width}%` }} />
-          </span>
-        </span>
-      ))}
-    </div>
-  );
-}

package/src/onboarding/steps/AutonomyStep.tsx

@@ -1,128 +0,0 @@
-/**
- * Autonomy: who approves tool calls (you, the decision model, nobody), the
- * sandbox and its network, and a spend cap when the provider bills per
- * token. Each mode card shows a small scene of an approval in that mode, and
- * each choice says what it unlocks and what it prevents.
- */
-import {
-  APPROVAL_MODE_OPTIONS,
-  APPROVAL_MODE_TRADEOFFS,
-  onboardingFeatureCopy,
-  SETTING_TRADEOFFS,
-  SETTINGS_CHOICES,
-  type OnboardingProvider,
-} from 'zidane/chat/pure';
-import type { ApprovalMode, Settings } from 'zidane/chat';
-
-import { useReadable } from '../../chat/headless/store';
-import { ChoiceCards } from '../../components/ChoiceCards';
-import { MetaChip, SegmentedRow } from '../../components/Form';
-import { ToggleCard } from '../../components/ToggleCard';
-import { ApprovalDemo, SandboxDemo } from '../demos/autonomy';
-import { useOnboarding, useOnboardingLabels } from '../OnboardingProvider';
-import { OnboardingStepFrame } from '../OnboardingStepFrame';
-import { Tradeoff } from './Tradeoff';
-
-const ICONS: Record<ApprovalMode, string> = { ask: 'i-ph-hand', decide: 'i-ph-scales', off: 'i-ph-lightning' };
-
-/** Whether a provider bills per token: an API key, not a plan or a local server. */
-function billsPerToken(provider: OnboardingProvider | undefined): boolean {
-  return provider?.source === 'apikey' || provider?.source === 'env';
-}
-
-/** Props of {@link AutonomyStep}. */
-export interface AutonomyStepProps {
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/**
- * The Autonomy step.
- *
- * @param props - The {@link AutonomyStepProps}.
- */
-export function AutonomyStep({ className }: AutonomyStepProps) {
-  const { host, state, dispatch } = useOnboarding();
-  const labels = useOnboardingLabels();
-  const providers = useReadable(host.providers.list);
-  const settings = state.draft.settings;
-  const mode = settings.approvalMode ?? 'ask';
-  const set = (patch: Partial<Settings>) => dispatch({ type: 'set-settings', settings: patch });
-  const sandbox = onboardingFeatureCopy('sandbox');
-  const network = SETTINGS_CHOICES.find((choice) => choice.key === 'sandboxNetwork');
-  const cap = SETTINGS_CHOICES.find((choice) => choice.key === 'maxCostUsd');
-  const capped = billsPerToken(providers.find((provider) => provider.key === state.draft.provider?.key));
-  const tradeoff = (key: keyof Settings) => {
-    const t = SETTING_TRADEOFFS[key];
-    return t ? <Tradeoff unlocks={t.unlocks} prevents={t.prevents} /> : null;
-  };
-
-  return (
-    <OnboardingStepFrame className={className}>
-      <div className="flex flex-col gap-10">
-        <ChoiceCards<ApprovalMode>
-          ariaLabel={labels.stepLabel('autonomy')}
-          numbered
-          columns={3}
-          value={mode}
-          onChange={(approvalMode) => set({ approvalMode })}
-          options={APPROVAL_MODE_OPTIONS.map((option) => ({
-            value: option.value,
-            title: option.label,
-            icon: ICONS[option.value],
-            preview: <ApprovalDemo mode={option.value} on={option.value === mode} />,
-            description: (
-              <>
-                {option.description}
-                <Tradeoff
-                  unlocks={APPROVAL_MODE_TRADEOFFS[option.value].unlocks}
-                  prevents={APPROVAL_MODE_TRADEOFFS[option.value].prevents}
-                />
-              </>
-            ),
-            badge: option.value === 'decide' ? <MetaChip>{labels.usesTokens}</MetaChip> : undefined,
-          }))}
-        />
-        <div className="zg-tray rounded-zg-xl p-2 flex flex-col gap-1">
-          <ToggleCard
-            media={<SandboxDemo on={settings.sandbox === true} />}
-            icon="i-ph-shield-check"
-            title={sandbox.label}
-            description={
-              <>
-                {sandbox.description}
-                {tradeoff('sandbox')}
-              </>
-            }
-            checked={settings.sandbox === true}
-            onChange={(on) => set({ sandbox: on })}
-          />
-          {settings.sandbox === true && network && (
-            <div className="flex flex-col px-1.5 pb-3">
-              <SegmentedRow
-                label={network.label}
-                description={network.description}
-                value={String(settings.sandboxNetwork)}
-                onChange={(value) => set({ sandboxNetwork: value as Settings['sandboxNetwork'] })}
-                options={network.options.map((option) => ({ value: String(option.value), label: option.label }))}
-              />
-              <div className="px-3">{tradeoff('sandboxNetwork')}</div>
-            </div>
-          )}
-          {capped && cap && (
-            <div className="flex flex-col px-1.5 pb-3">
-              <SegmentedRow
-                label={labels.spendCap}
-                description={labels.spendCapDetail}
-                value={String(settings.maxCostUsd ?? 0)}
-                onChange={(value) => set({ maxCostUsd: Number(value) })}
-                options={cap.options.map((option) => ({ value: String(option.value), label: option.label }))}
-              />
-              <div className="px-3">{tradeoff('maxCostUsd')}</div>
-            </div>
-          )}
-        </div>
-      </div>
-    </OnboardingStepFrame>
-  );
-}

package/src/onboarding/steps/ConnectStep.tsx

@@ -1,104 +0,0 @@
-/**
- * Connect: the featured providers as cards, the rest under More providers,
- * and the setup of the picked one under them. Continue waits for a provider
- * that is ready. The desktop app can skip this step and connect later.
- */
-import { useEffect, useState } from 'react';
-import type { OnboardingProvider } from 'zidane/chat/pure';
-
-import { useReadable } from '../../chat/headless/store';
-import { buttonClass } from '../../components/button';
-import { ChoiceCards, type ChoiceCardOption } from '../../components/ChoiceCards';
-import { ProviderMark } from '../marks';
-import { MetaChip } from '../../components/Form';
-import { useOnboarding, useOnboardingLabels } from '../OnboardingProvider';
-import { OnboardingStepFrame } from '../OnboardingStepFrame';
-import { ProviderPanel } from './connect/ProviderPanel';
-
-/** Props of {@link ConnectStep}. */
-export interface ConnectStepProps {
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/**
- * The Connect step.
- *
- * @param props - The {@link ConnectStepProps}.
- */
-export function ConnectStep({ className }: ConnectStepProps) {
-  const { host, setup, state, dispatch } = useOnboarding();
-  const labels = useOnboardingLabels();
-  const listed = useReadable(host.providers.list);
-  const providers = host.extensions ? listed : listed.filter((provider) => !provider.viaExtension);
-  const picked = providers.find((provider) => provider.key === state.draft.provider?.key);
-  const [more, setMore] = useState(() => Boolean(picked && !picked.featured));
-
-  // A provider already set up is the natural pick.
-  const firstReady = (providers.find((p) => p.ready && p.featured) ?? providers.find((p) => p.ready))?.key;
-  const hasPick = Boolean(state.draft.provider);
-  useEffect(() => {
-    if (!hasPick && firstReady) dispatch({ type: 'set-provider', provider: { key: firstReady } });
-  }, [hasPick, firstReady, dispatch]);
-
-  const local = setup.detection.localServers[0];
-  const option = (provider: OnboardingProvider): ChoiceCardOption<string> => ({
-    value: provider.key,
-    title: provider.label,
-    visual: <ProviderMark provider={provider} />,
-    description: provider.description,
-    badge: provider.ready ? (
-      <MetaChip tone="success">{labels.connected}</MetaChip>
-    ) : provider.viaExtension ? (
-      <MetaChip>{labels.viaExtension}</MetaChip>
-    ) : provider.key === 'local' && local ? (
-      <MetaChip tone="info">{labels.localFound(local)}</MetaChip>
-    ) : undefined,
-  });
-  const pick = (key: string) => dispatch({ type: 'set-provider', provider: { key } });
-  const featured = providers.filter((provider) => provider.featured);
-  const rest = providers.filter((provider) => !provider.featured);
-
-  return (
-    <OnboardingStepFrame
-      className={className}
-      continueDisabled={!picked?.ready}
-      note={picked?.ready ? undefined : labels.connectFirst}
-    >
-      <div className="flex flex-col gap-6">
-        <ChoiceCards
-          ariaLabel={labels.stepLabel('connect')}
-          numbered
-          value={picked?.featured ? picked.key : undefined}
-          onChange={pick}
-          options={featured.map(option)}
-        />
-        {rest.length > 0 && (
-          <div className="flex flex-col gap-2">
-            <button
-              type="button"
-              aria-expanded={more}
-              onClick={() => setMore((open) => !open)}
-              className={`${buttonClass({ variant: 'ghost', size: 'sm', flush: 'start' })} self-start`}
-            >
-              <span
-                aria-hidden
-                className={`i-ph-caret-right text-zg-meta transition-transform ${more ? 'rotate-90' : ''}`}
-              />
-              {labels.moreProviders}
-            </button>
-            {more && (
-              <ChoiceCards
-                ariaLabel={labels.moreProviders}
-                value={picked && !picked.featured ? picked.key : undefined}
-                onChange={pick}
-                options={rest.map(option)}
-              />
-            )}
-          </div>
-        )}
-        {picked && <ProviderPanel key={picked.key} provider={picked} />}
-      </div>
-    </OnboardingStepFrame>
-  );
-}