zidane-ui 9.0.4 → 9.1.3

package/src/onboarding/demos/features.tsx

@@ -1,447 +0,0 @@
-/**
- * The mini demos of the Features step, one per feature. What a feature
- * includes plays in its scene: the agent in the browser tab and in the
- * terminal, the sound of a notification.
- */
-import type { ReactNode } from 'react';
-import type { BooleanSettingKey } from 'zidane/chat/pure';
-
-import { StatusDot } from '../../chat/StatusDot';
-import { buttonClass } from '../../components/button';
-import { BrandMark } from '../../components/BrandMark';
-import { MetaChip } from '../../components/Form';
-import { Keycap } from '../../components/Keycap';
-import { useOnboardingLabels } from '../OnboardingProvider';
-import { delay, DemoStage, Line, MiniWindow, Pointer, type DemoProps } from './parts';
-
-/** Props of {@link CodemodeDemo}. */
-export type CodemodeDemoProps = DemoProps;
-
-/** Codemode: a short script, and 12 tool calls that fold into 1 step. */
-export function CodemodeDemo({ on, className, style }: CodemodeDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow className="flex-1 max-w-[230px]" bodyClassName="px-2.5 pb-2 gap-1">
-        {labels.demoScript.map((line, i) => (
-          <span
-            key={line}
-            className={`font-mono text-zg-badge truncate ${i === 0 ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'}`}
-          >
-            {line}
-          </span>
-        ))}
-      </MiniWindow>
-      <span aria-hidden className="i-ph-arrow-right text-zg-label text-[var(--zg-text-muted)] shrink-0" />
-      <span className="zg-demo-stack shrink-0 w-[72px] justify-items-center">
-        <span className="zg-loop zg-demo-before flex flex-col items-center gap-1.5">
-          <span className="grid grid-cols-6 gap-1">
-            {Array.from({ length: 12 }, (_, i) => (
-              <span key={i} className="w-1.5 h-1.5 rounded-full bg-[var(--zg-text-muted)]" />
-            ))}
-          </span>
-          <span className="zg-meta">{labels.demoCalls}</span>
-        </span>
-        <span className="zg-loop zg-demo-after flex flex-col items-center gap-1.5">
-          <span className="block w-14 h-1.5 rounded-full bg-[var(--zg-accent-dot)]" />
-          <span className="zg-meta !text-[var(--zg-text)]">{labels.demoStep}</span>
-        </span>
-      </span>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link WebSearchDemo}. */
-export type WebSearchDemoProps = DemoProps;
-
-/** Web search: a query, and the results that come back one after the other. */
-export function WebSearchDemo({ on, className, style }: WebSearchDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow
-        className="w-full max-w-[300px]"
-        bar={
-          <span className="zg-tray flex items-center gap-1 h-3.5 px-2 rounded-full max-w-[180px] w-full min-w-0">
-            <span aria-hidden className="i-ph-magnifying-glass text-zg-badge text-[var(--zg-text-muted)] shrink-0" />
-            <span className="truncate text-zg-badge">{labels.demoSearchQuery}</span>
-          </span>
-        }
-        bodyClassName="px-3 pt-1 pb-2.5 gap-1.5"
-      >
-        {labels.demoSearchResults.map((url, i) => (
-          <span key={url} className="zg-loop zg-demo-arrive flex flex-col gap-1 min-w-0" style={delay(i * 300)}>
-            <span className="truncate text-zg-badge text-[var(--zg-accent)]">{url}</span>
-            <Line width={`${72 - i * 12}%`} />
-          </span>
-        ))}
-      </MiniWindow>
-    </DemoStage>
-  );
-}
-
-/** A composer line, as the prompt box draws it. */
-function Composer({ children }: { children: ReactNode }) {
-  return (
-    <span className="zg-raised border rounded-full flex items-center gap-1.5 h-8 pl-3 pr-1.5 w-full max-w-[320px] min-w-0">
-      {children}
-    </span>
-  );
-}
-
-/** The caret of a field. */
-function Caret() {
-  return <span className="zg-loop zg-demo-pulse w-px h-3.5 shrink-0 bg-[var(--zg-accent)]" />;
-}
-
-/** Props of {@link AutocompleteDemo}. */
-export type AutocompleteDemoProps = DemoProps;
-
-/** Inline autocomplete: gray ghost text after the typed path, and Tab to take it. */
-export function AutocompleteDemo({ on, className, style }: AutocompleteDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <Composer>
-        <span className="flex items-center min-w-0 flex-1 text-zg-label whitespace-nowrap overflow-hidden">
-          <span className="zg-loop zg-demo-type-early shrink-0">{labels.demoTyped}</span>
-          <Caret />
-          <span className="zg-loop zg-demo-after truncate text-[var(--zg-text-muted)] opacity-70">
-            {labels.demoGhost}
-          </span>
-        </span>
-        <Keycap className="zg-loop zg-demo-press shrink-0">{labels.demoTab}</Keycap>
-      </Composer>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link AutoTitleDemo}. */
-export type AutoTitleDemoProps = DemoProps;
-
-/** Session titles: a session row whose title goes from the generic one to what the session is about. */
-export function AutoTitleDemo({ on, className, style }: AutoTitleDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow className="w-full max-w-[280px]" bodyClassName="px-1.5 pb-1.5 gap-0.5">
-        <span className="flex items-center gap-2 h-6 px-2 rounded-zg-sm bg-[var(--zg-row-hover)] min-w-0">
-          <StatusDot state="running" />
-          <span className="zg-demo-stack flex-1 text-zg-label">
-            <span className="zg-loop zg-demo-before truncate text-[var(--zg-text-muted)]">
-              {labels.demoGenericTitle}
-            </span>
-            <span className="zg-loop zg-demo-type truncate">{labels.demoTitle}</span>
-          </span>
-        </span>
-        <span className="flex items-center gap-2 h-6 px-2">
-          <StatusDot state="idle" />
-          <Line width="46%" />
-        </span>
-        <span className="flex items-center gap-2 h-6 px-2">
-          <StatusDot state="idle" />
-          <Line width="62%" />
-        </span>
-      </MiniWindow>
-    </DemoStage>
-  );
-}
-
-function SessionRows({ titles }: { titles: readonly string[] }) {
-  return (
-    <span className="flex flex-col gap-0.5 min-w-0">
-      {titles.map((title) => (
-        <span key={title} className="flex items-center gap-2 h-6 px-2 min-w-0">
-          <StatusDot state="idle" />
-          <span className="truncate text-zg-label">{title}</span>
-        </span>
-      ))}
-    </span>
-  );
-}
-
-/** Props of {@link SpacesDemo}. */
-export type SpacesDemoProps = DemoProps;
-
-/** Spaces: the Personal and Work tabs, each with its own short session list. */
-export function SpacesDemo({ on, className, style }: SpacesDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow className="w-full max-w-[280px]" bodyClassName="px-1.5 pb-1.5 gap-1">
-        <span className="zg-segment relative !grid grid-cols-2 mx-1">
-          <span className="zg-loop zg-demo-toggle zg-raised absolute top-0.5 bottom-0.5 left-0.5 w-[calc(50%-2px)] rounded-full" />
-          <span className="relative text-center text-zg-meta leading-5 text-[var(--zg-text-muted)]">
-            {labels.demoSpacePersonal}
-          </span>
-          <span className="relative text-center text-zg-meta leading-5">{labels.demoSpaceWork}</span>
-        </span>
-        <span className="zg-demo-stack">
-          <span className="zg-loop zg-demo-before">
-            <SessionRows titles={labels.demoPersonalSessions} />
-          </span>
-          <span className="zg-loop zg-demo-after">
-            <SessionRows titles={labels.demoWorkSessions} />
-          </span>
-        </span>
-      </MiniWindow>
-    </DemoStage>
-  );
-}
-
-/** A window with lines of content and the app's footer under them. */
-function FooterWindow({ children }: { children: ReactNode }) {
-  return (
-    <MiniWindow className="w-full max-w-[300px]" bodyClassName="gap-1.5">
-      <span className="flex flex-col gap-1.5 px-3 pt-1">
-        <Line width="70%" />
-        <Line width="52%" />
-      </span>
-      <span className="zg-tray flex items-center gap-2 h-7 px-2.5 mt-1 min-w-0">{children}</span>
-    </MiniWindow>
-  );
-}
-
-/** Props of {@link UpdatesDemo}. */
-export type UpdatesDemoProps = DemoProps;
-
-/** Updates: the footer says an update is ready. */
-export function UpdatesDemo({ on, className, style }: UpdatesDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <FooterWindow>
-        <span className="zg-meta">{labels.demoVersion}</span>
-        <span className="zg-loop zg-demo-after ml-auto">
-          <MetaChip tone="accent">
-            <span aria-hidden className="i-ph-arrow-circle-up-fill" />
-            {labels.demoUpdateReady}
-          </MetaChip>
-        </span>
-      </FooterWindow>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link UsageDemo}. */
-export type UsageDemoProps = DemoProps;
-
-/** Plan usage: the footer shows the share of the weekly limit. */
-export function UsageDemo({ on, className, style }: UsageDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <FooterWindow>
-        <span className="zg-meta truncate">{labels.demoUsageLabel}</span>
-        <span className="relative flex-1 max-w-28 h-1.5 rounded-full overflow-hidden zg-demo-track">
-          <span className="zg-loop zg-demo-grow absolute inset-y-0 left-0 w-[43%] rounded-full bg-[var(--zg-accent-dot)]" />
-        </span>
-        <span className="zg-meta !text-[var(--zg-text)]">{labels.demoUsagePercent}</span>
-      </FooterWindow>
-    </DemoStage>
-  );
-}
-
-function DaemonWindow() {
-  const labels = useOnboardingLabels();
-  return (
-    <MiniWindow className="relative w-[42%] max-w-[150px]" bodyClassName="px-1.5 pb-2 gap-1">
-      <span className="flex items-center gap-1.5 h-5 px-1.5 rounded-zg-sm bg-[var(--zg-row-hover)] min-w-0">
-        <StatusDot state="running" />
-        <span className="truncate text-zg-meta">{labels.demoTitle}</span>
-      </span>
-      <span className="flex flex-col gap-1.5 px-1.5 pt-0.5">
-        <Line width="80%" />
-        <Line width="56%" />
-      </span>
-    </MiniWindow>
-  );
-}
-
-/** Props of {@link DaemonDemo}. */
-export type DaemonDemoProps = DemoProps;
-
-/** Background service: two windows share one running session through the link between them. */
-export function DaemonDemo({ on, className, style }: DaemonDemoProps) {
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="relative flex items-center justify-between w-full max-w-[340px]">
-        <span className="absolute left-[30%] right-[30%] top-1/2 border-t border-dashed border-[var(--zg-text-muted)] opacity-50" />
-        <span className="absolute left-1/2 top-1/2 -mt-[3px] -ml-[3px] w-1.5 h-1.5">
-          <span className="zg-loop zg-demo-travel absolute inset-0 rounded-full bg-[var(--zg-accent-dot)]" />
-        </span>
-        <DaemonWindow />
-        <DaemonWindow />
-      </span>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link BrowserDemo}. */
-export type BrowserDemoProps = DemoProps;
-
-/** Browser tab: a page at localhost:5173, and the agent's pointer that clicks its button. */
-export function BrowserDemo({ on, className, style }: BrowserDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow
-        className="relative w-full max-w-[320px]"
-        bar={
-          <span className="zg-tray flex items-center gap-1 h-3.5 px-2 rounded-full max-w-[160px] w-full min-w-0">
-            <span aria-hidden className="i-ph-globe-simple text-zg-badge text-[var(--zg-text-muted)] shrink-0" />
-            <span className="truncate text-zg-badge text-[var(--zg-text-muted)]">{labels.demoAddress}</span>
-          </span>
-        }
-        bodyClassName="px-3 pt-1.5 pb-3 gap-1.5"
-      >
-        <Line width="44%" className="!h-2" />
-        <Line width="68%" />
-        <span className="flex items-center gap-2 pt-1">
-          <span className={`${buttonClass({ variant: 'solid', size: 'xs' })} zg-loop zg-demo-press`}>
-            {labels.demoPageButton}
-          </span>
-          <Line width="22%" />
-        </span>
-        <Pointer className="absolute left-14 bottom-1" from={[96, -34]} />
-      </MiniWindow>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link TerminalDemo}. */
-export type TerminalDemoProps = DemoProps;
-
-/** Terminal: a dev server log, and the agent that reads its error line. */
-export function TerminalDemo({ on, className, style }: TerminalDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow className="w-full max-w-[320px]" bodyClassName="px-2.5 pb-2 gap-0.5 font-mono text-zg-badge">
-        {labels.demoTerminalLines.map((line, i) => (
-          <span
-            key={line}
-            className={`zg-loop zg-demo-arrive truncate ${i === 0 ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'}`}
-            style={delay(i * 300)}
-          >
-            {line}
-          </span>
-        ))}
-        <span className="zg-loop zg-demo-arrive relative flex items-center gap-1.5 min-w-0" style={delay(900)}>
-          <span className="zg-loop zg-demo-pulse zg-demo-read absolute -inset-x-1 -inset-y-px" />
-          <span className="relative truncate text-zg-danger">{labels.demoTerminalError}</span>
-          <span aria-hidden className="relative ml-auto i-ph-eye text-zg-label text-[var(--zg-accent)] shrink-0" />
-        </span>
-      </MiniWindow>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link NotificationsDemo}. */
-export type NotificationsDemoProps = DemoProps;
-
-/** Notifications: a system banner, and the wave of its sound beside it. */
-export function NotificationsDemo({ on, className, style }: NotificationsDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="zg-loop zg-demo-drop zg-float flex items-center gap-2.5 p-2.5 w-full max-w-[300px] min-w-0">
-        <BrandMark label={labels.demoNotifyApp} icon="i-ph-chat-circle-dots-fill" />
-        <span className="flex flex-col gap-0.5 flex-1 min-w-0">
-          <span className="text-zg-label font-medium truncate">{labels.demoNotifyApp}</span>
-          <span className="text-zg-meta text-[var(--zg-text-muted)] truncate">{labels.demoNotifyBody}</span>
-        </span>
-        <span className="flex items-center gap-[3px] h-4 shrink-0 pr-0.5">
-          <span aria-hidden className="i-ph-speaker-high text-zg-label text-[var(--zg-text-muted)] mr-0.5" />
-          {[0, 180, 360, 120].map((ms, i) => (
-            <span
-              key={i}
-              className="zg-loop zg-demo-wave w-0.5 h-3.5 rounded-full bg-[var(--zg-accent-dot)]"
-              style={delay(ms)}
-            />
-          ))}
-        </span>
-      </span>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link ProjectExtensionsDemo}. */
-export type ProjectExtensionsDemoProps = DemoProps;
-
-/** Project extensions: the .zidane/extensions folder of a project, behind a trust lock. */
-export function ProjectExtensionsDemo({ on, className, style }: ProjectExtensionsDemoProps) {
-  const labels = useOnboardingLabels();
-  const [root, dot, extensions, file] = labels.demoFolders;
-  const row = 'flex items-center gap-1.5 h-5 min-w-0 text-zg-meta';
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow className="w-full max-w-[260px]" bodyClassName="px-2.5 pb-2">
-        <span className={row}>
-          <span aria-hidden className="i-ph-folder-simple text-[var(--zg-text-muted)] shrink-0" />
-          <span className="truncate">{root}</span>
-        </span>
-        <span className={`${row} pl-3`}>
-          <span aria-hidden className="i-ph-folder-simple text-[var(--zg-text-muted)] shrink-0" />
-          <span className="truncate">{dot}</span>
-        </span>
-        <span className={`${row} pl-6`}>
-          <span aria-hidden className="i-ph-folder-open text-[var(--zg-text-muted)] shrink-0" />
-          <span className="truncate">{extensions}</span>
-          <span className="zg-demo-stack ml-auto">
-            <span aria-hidden className="zg-loop zg-demo-before i-ph-lock-simple text-zg-label text-zg-warn" />
-            <span aria-hidden className="zg-loop zg-demo-after i-ph-lock-simple-open text-zg-label text-zg-success" />
-          </span>
-        </span>
-        <span className={`${row} pl-9`}>
-          <span aria-hidden className="i-ph-file-ts text-[var(--zg-text-muted)] shrink-0" />
-          <span className="truncate">{file}</span>
-          <span
-            aria-hidden
-            className="zg-loop zg-demo-after ml-auto i-ph-check-circle-fill text-zg-label text-zg-success"
-          />
-        </span>
-      </MiniWindow>
-    </DemoStage>
-  );
-}
-
-const DEMOS: Partial<Record<BooleanSettingKey, (props: DemoProps) => ReactNode>> = {
-  codemode: CodemodeDemo,
-  webSearch: WebSearchDemo,
-  inlineAutocomplete: AutocompleteDemo,
-  autoTitle: AutoTitleDemo,
-  spaces: SpacesDemo,
-  checkForUpdates: UpdatesDemo,
-  subscriptionUsage: UsageDemo,
-  useDaemon: DaemonDemo,
-  browser: BrowserDemo,
-  terminal: TerminalDemo,
-  notifications: NotificationsDemo,
-  loadProjectExtensions: ProjectExtensionsDemo,
-};
-
-/**
- * Whether a feature has a demo.
- *
- * @param key - The feature's setting.
- */
-export function hasFeatureDemo(key: BooleanSettingKey): boolean {
-  return key in DEMOS;
-}
-
-/** Props of {@link FeatureDemo}. */
-export interface FeatureDemoProps extends DemoProps {
-  /** The feature's setting. */
-  feature: BooleanSettingKey;
-}
-
-/**
- * Renders the demo of a feature, or nothing for a feature without one.
- *
- * @param props - Component props.
- */
-export function FeatureDemo({ feature, on, className, style }: FeatureDemoProps) {
-  const Demo = DEMOS[feature];
-  return Demo ? <Demo on={on} className={className} style={style} /> : null;
-}