zidane-ui 9.0.4 → 9.1.3

package/src/onboarding/demos/index.ts

@@ -1,11 +0,0 @@
-/**
- * The mini demos of the setup wizard: small decorative scenes of what a
- * feature, an extension or an approval mode does, and the scenes of the
- * tutorials, one per topic, each taking the step on show.
- */
-export { ApprovalDemo, SandboxDemo } from './autonomy';
-export { ExtensionDemo } from './extensions';
-export { FeatureDemo, hasFeatureDemo } from './features';
-export { TUTORIAL_SCENES } from './how-it-works';
-export { DemoStage, type DemoProps } from './parts';
-export type { SceneProps } from './tour';

package/src/onboarding/demos/parts.tsx

@@ -1,133 +0,0 @@
-/**
- * The pieces the mini demos share: the stage, a small window, a placeholder
- * line and the pointer. A demo is a picture. It holds nothing to click,
- * assistive tech skips it, and its loops still under reduced or off motion
- * (`.zg-loop`). A demo whose switch is off dims and stills.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-/** What every demo takes: whether the switch it shows is on. */
-export interface DemoProps {
-  /** The switch is on: the demo plays. Off: it dims and stands still. */
-  on: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/** Props of {@link DemoStage}. */
-export interface DemoStageProps extends DemoProps {
-  /** The step on show, for a tutorial scene (`TourStage`). */
-  step?: number;
-  /** Extra classes on the stage. */
-  className?: string;
-  /** The scene. */
-  children: ReactNode;
-}
-
-/**
- * Renders the stage of a demo: a canvas-toned panel with a faint dot grid.
- *
- * @param props - Component props.
- */
-export function DemoStage({ on, step, className = '', style, children }: DemoStageProps) {
-  return (
-    <span aria-hidden data-demo="" data-on={on} data-step={step} className={`zg-demo ${className}`} style={style}>
-      <span className="zg-demo-scene">{children}</span>
-    </span>
-  );
-}
-
-/** Props of {@link MiniWindow}. */
-export interface MiniWindowProps {
-  /** Shown in the title bar after the lights, such as an address. */
-  bar?: ReactNode;
-  /** Show the title bar. */
-  chrome?: boolean;
-  /** Extra classes on the window. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-  /** Extra classes on the body. */
-  bodyClassName?: string;
-  /** The window's content. */
-  children?: ReactNode;
-}
-
-/**
- * Renders a small raised window, with the three lights of its title bar and an optional bar content.
- *
- * @param props - Component props.
- */
-export function MiniWindow({
-  bar,
-  chrome = true,
-  className = '',
-  style,
-  bodyClassName = '',
-  children,
-}: MiniWindowProps) {
-  return (
-    <span className={`zg-raised border rounded-zg-md flex flex-col min-w-0 overflow-hidden ${className}`} style={style}>
-      {chrome && (
-        <span className="flex items-center gap-1 h-5 px-2 shrink-0">
-          <span className="zg-demo-light-dot" />
-          <span className="zg-demo-light-dot" />
-          <span className="zg-demo-light-dot" />
-          {bar && <span className="flex-1 min-w-0 flex justify-center">{bar}</span>}
-        </span>
-      )}
-      <span className={`flex flex-col min-w-0 ${bodyClassName}`}>{children}</span>
-    </span>
-  );
-}
-
-/** Props of {@link Line}. */
-export interface LineProps {
-  /** The width, as a CSS length. */
-  width: string;
-  /** Extra classes on the line. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a placeholder for a line of text.
- *
- * @param props - Component props.
- */
-export function Line({ width, className = '', style }: LineProps) {
-  return <span className={`zg-demo-line ${className}`} style={{ width, ...style }} />;
-}
-
-/** Props of {@link Pointer}. */
-export interface PointerProps {
-  /** Where to place it, as position classes (`absolute right-4 bottom-3`). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** Where it starts, in pixels from its rest spot. */
-  from?: readonly [number, number];
-}
-
-/**
- * Renders the pointer: it moves in from an offset, then rests where it is placed.
- *
- * @param props - Component props.
- */
-export function Pointer({ className = '', style, from = [48, 28] }: PointerProps) {
-  const own = { '--zg-demo-dx': `${from[0]}px`, '--zg-demo-dy': `${from[1]}px` } as CSSProperties;
-  return (
-    <span
-      className={`zg-loop zg-demo-point i-ph-cursor-fill text-zg-body text-[var(--zg-text)] ${className}`}
-      style={{ ...own, ...style }}
-    />
-  );
-}
-
-/** A delay for a loop, so a step of a scene comes in its turn. */
-export function delay(ms: number): CSSProperties {
-  return { animationDelay: `${ms}ms` };
-}

package/src/onboarding/demos/tour.tsx

@@ -1,217 +0,0 @@
-/**
- * The pieces of the tutorial scenes (how-it-works.tsx). A scene plays the
- * three steps of its tutorial: its stage holds the step on show, and each
- * part says in which steps it shows. The styles are in onboarding.css
- * ("Tutorial scenes"). Like every demo, a scene is a picture with nothing to
- * click, and reduced or off motion shows the end state of each step.
- */
-import { createContext, useContext, type CSSProperties, type ReactNode } from 'react';
-
-import { delay, DemoStage } from './parts';
-
-/** What every tutorial scene takes. */
-export interface SceneProps {
-  /** The step on show, from 0. */
-  step: number;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-const StepContext = createContext(0);
-
-/** Whether the step on show is one of `steps`, or any step from `from` on. */
-function useShown(at: readonly number[] | undefined, from: number): boolean {
-  const step = useContext(StepContext);
-  return at ? at.includes(step) : step >= from;
-}
-
-/** The props that light a part while the step on show is one of `steps` (`.zg-tour-lit`). */
-export function useLit(steps: readonly number[] = []): { 'data-lit'?: '' } {
-  return useShown(steps, Infinity) ? { 'data-lit': '' } : {};
-}
-
-/** An offset for something that plays once in a step, after its part comes (`--zg-tour-at`). */
-export function after(ms: number): CSSProperties {
-  return { '--zg-tour-at': `${ms}ms` } as CSSProperties;
-}
-
-/** Props of {@link TourStage}. */
-export interface TourStageProps extends SceneProps {
-  /** Extra classes on the stage. */
-  className?: string;
-  /** The scene. */
-  children: ReactNode;
-}
-
-/**
- * Renders the stage of a tutorial scene, holding the step on show.
- *
- * @param props - Component props.
- */
-export function TourStage({ step, className = '', style, children }: TourStageProps) {
-  return (
-    <StepContext.Provider value={step}>
-      <DemoStage on step={step} className={`zg-tour ${className}`} style={style}>
-        {children}
-      </DemoStage>
-    </StepContext.Provider>
-  );
-}
-
-/** Props of {@link Part}. */
-export interface PartProps {
-  /** The steps it shows in. */
-  at?: readonly number[];
-  /** Without `at`: it shows from this step to the last. */
-  from?: number;
-  /** How long it waits after its step comes, in ms. */
-  delay?: number;
-  /** Extra classes, often its layout. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** What it shows. */
-  children?: ReactNode;
-}
-
-/**
- * Renders a part of a scene that shows in some steps: `at` lists them, or `from` gives the first
- * of the steps it shows in until the end. A part that shows from the first step on replays its
- * entrance there.
- *
- * @param props - Component props.
- */
-export function Part({ at, from = 0, delay: wait = 0, className = '', style, children }: PartProps) {
-  const shown = useShown(at, from);
-  const enter = !at && from === 0 ? ' zg-loop zg-tour-enter' : '';
-  const own = wait ? ({ '--zg-tour-delay': `${wait}ms` } as CSSProperties) : undefined;
-  return (
-    <span
-      data-active={shown ? '' : undefined}
-      className={`zg-tour-part${enter} ${className}`}
-      style={own || style ? { ...own, ...style } : undefined}
-    >
-      {children}
-    </span>
-  );
-}
-
-/** Props of {@link Node}. */
-export interface NodeProps {
-  /** The name under the tile. */
-  label: string;
-  /** The steps in which it lights up. */
-  lit?: readonly number[];
-  /** A badge on the tile's corner, often a `Part`. */
-  badge?: ReactNode;
-  /** Room for a longer name, such as a file name. */
-  wide?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-  /** The tile's glyph or logo. */
-  children: ReactNode;
-}
-
-/**
- * Renders a node: a tile with its name under it.
- *
- * @param props - Component props.
- */
-export function Node({ label, lit, badge, wide = false, className, style, children }: NodeProps) {
-  return (
-    <span
-      className={[`flex flex-col items-center gap-1.5 shrink-0 ${wide ? 'w-24' : 'w-14'}`, className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <span
-        {...useLit(lit)}
-        className="zg-tour-lit zg-raised border rounded-zg-md relative grid place-items-center w-9 h-9"
-      >
-        {children}
-        {badge && <span className="absolute -top-1.5 -right-1.5 flex">{badge}</span>}
-      </span>
-      <span className="text-zg-badge text-[var(--zg-text-muted)] truncate max-w-full">{label}</span>
-    </span>
-  );
-}
-
-/** How far the dot of a link travels each way. */
-const SPAN = { '--zg-demo-span': '14px' } as CSSProperties;
-
-/** Props of {@link Link}. */
-export interface LinkProps {
-  /** The steps in which it is solid. */
-  lit?: readonly number[];
-  /** The steps in which a dot travels along it. */
-  dots?: readonly number[];
-  /** The dot's head start, in ms, so two links do not move as one. */
-  start?: number;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-  /** A badge on its middle. */
-  children?: ReactNode;
-}
-
-/**
- * Renders a link between two nodes, solid in the steps it carries something, with a dot that travels
- * along it in some steps and a badge on its middle.
- *
- * @param props - Component props.
- */
-export function Link({ lit, dots, start = 0, className, style, children }: LinkProps) {
-  return (
-    <span
-      className={['relative flex-1 min-w-4 h-9 flex items-center', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <span {...useLit(lit)} className="zg-tour-wire absolute inset-x-0 top-1/2" />
-      {dots && (
-        <Part at={dots} className="absolute inset-0">
-          <span className="absolute left-1/2 top-1/2 -mt-[3px] -ml-[3px] w-1.5 h-1.5" style={SPAN}>
-            <span
-              className="zg-loop zg-demo-travel absolute inset-0 rounded-full bg-[var(--zg-accent-dot)]"
-              style={delay(start)}
-            />
-          </span>
-        </Part>
-      )}
-      {children && <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">{children}</span>}
-    </span>
-  );
-}
-
-/** Props of {@link TourPointer}. */
-export interface TourPointerProps {
-  /** Where to place it, as position classes (`absolute right-4 bottom-3`). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** Where it starts, in pixels from its rest spot. */
-  from?: readonly [number, number];
-  /** Its offset in the step, in ms. */
-  at?: number;
-}
-
-/**
- * Renders the pointer of a step: it moves in from an offset when its part comes, then rests where it
- * is placed.
- *
- * @param props - Component props.
- */
-export function TourPointer({ className = '', style, from = [40, 24], at = 0 }: TourPointerProps) {
-  const own = { '--zg-demo-dx': `${from[0]}px`, '--zg-demo-dy': `${from[1]}px`, ...after(at) } as CSSProperties;
-  return (
-    <span
-      className={`zg-loop zg-tour-point i-ph-cursor-fill text-zg-body text-[var(--zg-text)] ${className}`}
-      style={{ ...own, ...style }}
-    />
-  );
-}

package/src/onboarding/headless/controller.ts

@@ -1,110 +0,0 @@
-/**
- * A run of the setup wizard outside React, over an {@link OnboardingHost}. The
- * run itself lives in core (`createOnboardingRun` in `zidane/chat/pure`), so
- * the TUI and every host walk the steps and start the same work. This file
- * connects a host to it: the steps whose member is missing are left out, and
- * the import loads only when Claude Code's setup was found.
- */
-import {
-  createOnboardingRun,
-  type OnboardingPlanContext,
-  type OnboardingRun,
-  type OnboardingRunHost,
-  type OnboardingRunOptions,
-  type OnboardingStepId,
-} from 'zidane/chat/pure';
-
-import type { OnboardingHost, OnboardingSetup } from './host';
-
-export {
-  connectorsFromImport,
-  type OnboardingImportPreviewState,
-  type OnboardingPhase,
-  type OnboardingRunOptions as OnboardingControllerOptions,
-} from 'zidane/chat/pure';
-
-/** A run and the work it starts. Its stores are {@link Readable}s, so `useReadable` reads them. */
-export type OnboardingController = OnboardingRun;
-
-/**
- * What decides the steps of a run on this host: the setup's mode and surface,
- * and the steps whose host member is missing left out.
- *
- * @param host - The host.
- * @param setup - What the run starts from.
- */
-export function onboardingPlanContext(host: OnboardingHost, setup: OnboardingSetup): OnboardingPlanContext {
-  const exclude: OnboardingStepId[] = [];
-  if (!host.connectors) exclude.push('connectors');
-  if (!host.skills) exclude.push('skills');
-  if (!host.extensions) exclude.push('extensions');
-  if (!host.themes) exclude.push('look');
-  return {
-    mode: setup.mode,
-    surface: setup.surface,
-    importAvailable: setup.detection.agents.length > 0,
-    installsAvailable: Boolean(host.connectors || host.skills || host.extensions),
-    ...(exclude.length ? { exclude } : {}),
-  };
-}
-
-function runHost(host: OnboardingHost, setup: OnboardingSetup): OnboardingRunHost {
-  const { imports, connectors, skills, extensions, themes } = host;
-  return {
-    ...(imports && setup.detection.agents.includes('claude-code')
-      ? { imports: { preview: () => imports.preview(), run: (selection) => imports.run(selection) } }
-      : {}),
-    ...(connectors
-      ? {
-          connectors: {
-            installed: () => connectors.installed.get(),
-            add: (id, input) => connectors.add(id, input),
-            signInLater: Boolean(connectors.signIn),
-          },
-        }
-      : {}),
-    ...(skills
-      ? {
-          skills: {
-            installed: () => skills.installed.get(),
-            install: (source, rels, onProgress) => skills.install(source, rels, onProgress),
-          },
-        }
-      : {}),
-    ...(extensions
-      ? {
-          extensions: {
-            installed: () => extensions.installed.get(),
-            install: (name, onProgress) => extensions.install(name, onProgress),
-          },
-        }
-      : {}),
-    ...(themes ? { previewLook: (appearance) => themes.preview(appearance) } : {}),
-    commit: (result) => host.commit(result),
-  };
-}
-
-/**
- * Starts a run over a host.
- *
- * @param host - The app's host.
- * @param setup - What the run starts from: `host.context`'s value once detection finished.
- * @param options - The step to open at, and the clock.
- * @returns The controller. Call `dispose` when the wizard closes.
- */
-export function createOnboardingController(
-  host: OnboardingHost,
-  setup: OnboardingSetup,
-  options: OnboardingRunOptions = {},
-): OnboardingController {
-  return createOnboardingRun(
-    runHost(host, setup),
-    {
-      context: onboardingPlanContext(host, setup),
-      settings: setup.settings,
-      ...(setup.appearance ? { appearance: setup.appearance } : {}),
-      ...(setup.provider ? { provider: setup.provider } : {}),
-    },
-    options,
-  );
-}