zidane-ui 9.0.4 → 9.1.3

package/src/theme/without-transitions.ts

@@ -1,18 +0,0 @@
-/**
- * Run a theme swap with every transition off for one frame
- * (`.zg-no-transitions`), so surfaces snap to the new palette together
- * instead of cross-fading at their own speeds.
- *
- * @param apply - Makes the change, such as setting the new theme's variables.
- * @param root - The element that gets the `zg-no-transitions` class. Defaults to
- * `document.documentElement`.
- */
-export function withoutTransitions(apply: () => void, root: HTMLElement = document.documentElement): void {
-  root.classList.add('zg-no-transitions');
-  apply();
-  // Force style resolution with the new values before re-enabling
-  // transitions; otherwise the class removal and the writes coalesce into
-  // one frame and the transitions fire anyway.
-  void root.offsetWidth;
-  requestAnimationFrame(() => root.classList.remove('zg-no-transitions'));
-}

package/src/uno.ts

@@ -1,167 +0,0 @@
-/*
- * The token palette as a UnoCSS preset: `bg-zg-raised`, `text-zg-muted`,
- * `bg-zg-danger/10`… resolve to the `--zg-*` tokens (styles/tokens.css).
- * Type-only import: the consumer's own unocss runs it.
- *
- *   presets: [presetIcons(…), presetUno({ dark: { dark: '.dark' } }), presetZidane()]
- *
- * Icons stay in each app's config (the Phosphor JSON resolves from there).
- */
-import type { Preset, Rule } from 'unocss';
-
-/** Uno color name → CSS var, for names whose var isn't `--zg-<name>`. */
-const ZG_TOKEN_VARS: Record<string, string> = {
-  muted: 'var(--zg-text-muted)',
-  subtle: 'var(--zg-text-subtle)',
-  selected: 'var(--zg-bg-selected)',
-  'code-bg': 'var(--zg-code-bg)',
-  'code-fg': 'var(--zg-code-fg)',
-};
-
-const zgRules: Rule[] = [
-  ['opacity-zg-disabled', { opacity: 'var(--zg-disabled-opacity)' }],
-  [/^z-zg-(overlay|float|tooltip)$/, ([, layer]) => ({ 'z-index': `var(--zg-z-${layer})` })],
-  /*
-   * `bg-zg-danger/10` → `color-mix(in srgb, var(--zg-danger) 10%, transparent)`.
-   * Uno's own `/opacity` modifier needs a parsable color and silently drops
-   * it on `var()` values; this rule covers the token palette. Supported
-   * properties: bg, text, border, outline.
-   */
-  [
-    /^(bg|text|border|outline)-zg-([a-z0-9-]+)\/(\d{1,3})$/,
-    ([, prop, name, alpha]) => {
-      const value = `color-mix(in srgb, ${ZG_TOKEN_VARS[name] ?? `var(--zg-${name})`} ${alpha}%, transparent)`;
-      switch (prop) {
-        case 'bg':
-          return { 'background-color': value };
-        case 'text':
-          return { color: value };
-        case 'border':
-          return { 'border-color': value };
-        default:
-          return { 'outline-color': value };
-      }
-    },
-  ],
-];
-
-/** Motion names the Uno theme maps to their CSS vars (motion/springs.ts). */
-const ZG_MOTIONS = ['snap', 'pop', 'panel', 'slide', 'settle', 'exit', 'fade', 'fade-out', 'hover'] as const;
-const motionTheme = (part: 'duration' | 'ease') =>
-  Object.fromEntries(ZG_MOTIONS.map((name) => [name, `var(--zg-motion-${name}-${part})`]));
-
-const zgTheme = {
-  /*
-   * Motion: `transition-colors` / `transition` default to the shared hover
-   * tween (`--zg-motion-hover-*`), so no markup carries its own
-   * `duration-150`. Movement names the vocabulary: `duration-pop ease-pop`.
-   * Opacity on a moving element wants its own curve (`fade`): use a CSS
-   * class with per-property transitions for that.
-   */
-  duration: { DEFAULT: 'var(--zg-motion-hover-duration)', ...motionTheme('duration') },
-  easing: { DEFAULT: 'var(--zg-motion-hover-ease)', ...motionTheme('ease') },
-  /*
-   * The interface type scale (styles/tokens.css): `text-zg-meta`. The empty
-   * object keeps Uno from writing `line-height: 1` with the size.
-   */
-  fontSize: Object.fromEntries(
-    (['badge', 'meta', 'label', 'ui', 'body', 'title'] as const).map((step) => [
-      `zg-${step}`,
-      [`var(--zg-font-size-${step})`, {}] as [string, Record<string, string>],
-    ]),
-  ),
-  /* The radius scale: `rounded-zg-md`. */
-  borderRadius: Object.fromEntries(
-    (['xs', 'sm', 'md', 'lg', 'xl'] as const).map((step) => [`zg-${step}`, `var(--zg-radius-${step})`]),
-  ),
-  /*
-   * Fonts resolve through the `--zg-font-*` tokens (styles/tokens.css :root) so the
-   * user's Appearance choices apply to every `font-sans` / `font-mono` site.
-   */
-  fontFamily: {
-    sans: 'var(--zg-font-ui)',
-    chat: 'var(--zg-font-chat)',
-    prompt: 'var(--zg-font-prompt)',
-    mono: 'var(--zg-font-mono)',
-  },
-  /*
-   * Token colors as Uno color names: `bg-zg-tray`, `text-zg-muted`,
-   * `border-zg-border`, `bg-zg-danger-soft` … Values are `var()` references,
-   * so Uno cannot apply `/NN` opacity itself; the `bg-zg-danger/10` rule above
-   * handles that with `color-mix`. Prefer these over `bg-[var(--zg-…)]`.
-   */
-  colors: {
-    zg: {
-      bg: 'var(--zg-bg)',
-      // The surface ladder (ui/AGENTS.md "Surfaces"). Prefer the primitives
-      // (.zg-tray, .zg-raised, .zg-float…); these are for one-off tints.
-      tray: 'var(--zg-tray)',
-      raised: 'var(--zg-raised)',
-      track: 'var(--zg-track)',
-      overlay: 'var(--zg-overlay)',
-      hairline: 'var(--zg-hairline)',
-      // Legacy ramp: no new consumers.
-      surface: { 1: 'var(--zg-surface-1)', 2: 'var(--zg-surface-2)', 3: 'var(--zg-surface-3)' },
-      selected: 'var(--zg-bg-selected)',
-      border: { DEFAULT: 'var(--zg-border)', strong: 'var(--zg-border-strong)' },
-      ring: 'var(--zg-ring)',
-      text: 'var(--zg-text)',
-      muted: 'var(--zg-text-muted)',
-      subtle: 'var(--zg-text-subtle)',
-      accent: {
-        DEFAULT: 'var(--zg-accent)',
-        hover: 'var(--zg-accent-hover)',
-        soft: 'var(--zg-accent-soft)',
-        fg: 'var(--zg-accent-fg)',
-        fill: {
-          DEFAULT: 'var(--zg-accent-fill)',
-          hover: 'var(--zg-accent-fill-hover)',
-          fg: 'var(--zg-accent-fill-fg)',
-        },
-        alt: { DEFAULT: 'var(--zg-accent-alt)', dot: 'var(--zg-accent-alt-dot)' },
-        dot: 'var(--zg-accent-dot)',
-      },
-      model: 'var(--zg-model)',
-      // `-dot`: the decorative fill (dots, pips, window lights), never text.
-      success: { DEFAULT: 'var(--zg-success)', soft: 'var(--zg-success-soft)', dot: 'var(--zg-success-dot)' },
-      warn: { DEFAULT: 'var(--zg-warn)', soft: 'var(--zg-warn-soft)', dot: 'var(--zg-warn-dot)' },
-      danger: { DEFAULT: 'var(--zg-danger)', soft: 'var(--zg-danger-soft)', dot: 'var(--zg-danger-dot)' },
-      info: { DEFAULT: 'var(--zg-info)', soft: 'var(--zg-info-soft)', dot: 'var(--zg-info-dot)' },
-      code: { bg: 'var(--zg-code-bg)', fg: 'var(--zg-code-fg)' },
-    },
-  },
-};
-
-/**
- * Phosphor, drawn to stay crisp at interface sizes. Its regular icons are
- * filled outlines on a 256 grid with a 16-unit stroke: at the 10 to 14px the
- * kit uses, that is 0.6 to 0.9px, which lands between device pixels and
- * antialiases unevenly (stair-stepped curves, half-faded lines). Each regular
- * icon is drawn with its bold outline instead (the same shape, a 24-unit
- * stroke, 1.3px at 14px), still named `i-ph-<name>`; `-fill`, `-duotone`
- * and the other weights stay as they are. Wrap the loaded collection
- * (`@iconify-json/ph`) in it, in `presetIcons`' `collections.ph` loader.
- *
- * @param set - The loaded Phosphor collection, such as the `@iconify-json/ph` JSON.
- * @returns The same collection with each regular icon drawn as its bold outline.
- */
-export function crispPhosphor<T extends { icons: Record<string, { body: string }> }>(set: T): T {
-  const icons: Record<string, { body: string }> = {};
-  for (const [name, icon] of Object.entries(set.icons)) {
-    const bold = set.icons[`${name}-bold`];
-    icons[name] = bold ? { ...icon, body: bold.body } : icon;
-  }
-  return { ...set, icons };
-}
-
-/**
- * Returns the UnoCSS preset of the kit. It maps classes such as `bg-zg-raised`, `text-zg-muted`
- * and `bg-zg-danger/10` to the `--zg-*` tokens, and adds the motion durations and easings, the
- * layer `z-index` values and the disabled opacity. Add it after `presetUno` in the `presets`
- * list.
- *
- * @returns The preset.
- */
-export function presetZidane(): Preset {
-  return { name: 'zidane-ui', theme: zgTheme, rules: zgRules };
-}

package/src/workspace/LayoutBudget.tsx

@@ -1,143 +0,0 @@
-/**
- * The window's horizontal budget, live: applies `resolveLayout` to the
- * viewport (rAF-throttled), the sidebar and the side panel's wanted widths,
- * and hands the effective widths and modes to the columns. It keeps the chat
- * at its floor by shrinking the panel, then the sidebar, then floating the
- * panel over the chat (`overlay`), then collapsing the sidebar.
- *
- * Owns the floating panel's "slid away" flag: a pointer-down in the chat
- * hides it (`hidePanel`) until it is opened again, the window grows enough
- * to dock it, or the scope changes (`resetKey`).
- *
- * Never read `window.innerWidth` in a column: read `useLayoutBudget()`.
- */
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-
-import {
-  chatFloor,
-  maxColumnWidth,
-  OVERLAY_CHAT_PEEK,
-  resolveLayout,
-  splitPanelWidth,
-  type LayoutResolved,
-} from './headless/resolve';
-import { useViewportWidth } from './useViewport';
-
-/** The resolved widths and modes, the slid-away flag and the drag caps. */
-export interface LayoutBudget extends LayoutResolved {
-  /** Overlay panel hidden by a click in the chat; `revealPanel` brings it back. */
-  panelHidden: boolean;
-  /** Slide the floating panel away (a pointer-down in the chat). */
-  hidePanel: () => void;
-  /** Bring the slid-away panel back. */
-  revealPanel: () => void;
-  /**
-   * Drag caps that keep the chat at its floor, read at drag time. A getter,
-   * not a value: they change on every resized pixel and must not re-render
-   * every consumer of this context while the window is being resized.
-   */
-  getCaps: () => { sidebarMax: number; panelMax: number };
-}
-
-/** A column's wanted width and its bounds. */
-export interface BudgetColumn {
-  /** It is shown. */
-  open: boolean;
-  /** Its wanted width (px). */
-  width: number;
-  /** The narrowest it gets (px). */
-  min: number;
-  /** The widest a drag makes it (px). */
-  max: number;
-}
-
-/** Props for {@link LayoutBudgetProvider}. */
-export interface LayoutBudgetProviderProps {
-  /** The sidebar. */
-  sidebar: BudgetColumn;
-  /** The side panel. `width: null`: never dragged, the 50/50 split beside the chat. `share`: a width kept as a share of the room. */
-  panel: Omit<BudgetColumn, 'width'> & { width: number | null; share: number | null };
-  /** What the panel belongs to (the scope's key): a change brings a slid-away panel back. */
-  resetKey?: string | null;
-  /** The columns. */
-  children: ReactNode;
-}
-
-const BudgetContext = createContext<LayoutBudget | null>(null);
-
-/**
- * Provides the resolved horizontal budget to the columns below.
- *
- * @param props - The sidebar's and the panel's wanted widths and bounds.
- */
-export function LayoutBudgetProvider({ sidebar, panel, resetKey = null, children }: LayoutBudgetProviderProps) {
-  const viewportWidth = useViewportWidth();
-  const panelOpen = panel.open;
-  // A width dragged for this scope, else the 50/50 split beside the chat.
-  const panelWidth = panel.width ?? splitPanelWidth(viewportWidth, sidebar.open ? sidebar.width : 0, panel.min);
-
-  const computed = resolveLayout({
-    windowWidth: viewportWidth,
-    sidebar: { open: sidebar.open, width: sidebar.width, min: sidebar.min },
-    panel: { open: panelOpen, width: panelWidth, min: panel.min, share: panel.share },
-  });
-  // Keep the previous object while nothing resolved changed: in a roomy
-  // window a resize must not re-render the chat, sidebar or panel at all.
-  // The drag caps below are read during the columns' render in this same pass
-  // (a panel's drag cap): both refs are written during render on purpose.
-  /* eslint-disable react-hooks/refs */
-  const lastResolved = useRef(computed);
-  const resolved = sameResolved(lastResolved.current, computed) ? lastResolved.current : computed;
-  lastResolved.current = resolved;
-
-  const [panelHidden, setPanelHidden] = useState(false);
-  // Docking again, closing, or switching scope clears the slid-away state.
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- reset on these inputs only, never while they hold
-    if (resolved.panelMode === 'docked' || !panelOpen) setPanelHidden(false);
-  }, [resolved.panelMode, panelOpen, resetKey]);
-  const hidePanel = useCallback(() => setPanelHidden(true), []);
-  const revealPanel = useCallback(() => setPanelHidden(false), []);
-
-  const caps = useRef({ viewportWidth, resolved, sidebarMax: sidebar.max, panelMin: panel.min, panelMax: panel.max });
-  caps.current = { viewportWidth, resolved, sidebarMax: sidebar.max, panelMin: panel.min, panelMax: panel.max };
-  const getCaps = useCallback(() => {
-    const { viewportWidth: vw, resolved: r, sidebarMax, panelMin, panelMax } = caps.current;
-    return {
-      sidebarMax: maxColumnWidth(vw, r.panelMode === 'docked' ? r.panelWidth : 0, sidebarMax, r.chatMin),
-      // A docked panel may be dragged until the chat is at its wide floor (10% of the window).
-      panelMax:
-        r.panelMode === 'docked'
-          ? maxColumnWidth(vw, r.sidebarWidth, Infinity, chatFloor(vw, true))
-          : Math.max(panelMin, Math.min(panelMax, vw - r.sidebarWidth - OVERLAY_CHAT_PEEK)),
-    };
-  }, []);
-  const value = useMemo<LayoutBudget>(
-    () => ({ ...resolved, panelHidden, hidePanel, revealPanel, getCaps }),
-    [resolved, panelHidden, hidePanel, revealPanel, getCaps],
-  );
-  return <BudgetContext.Provider value={value}>{children}</BudgetContext.Provider>;
-}
-/* eslint-enable react-hooks/refs */
-
-/** The budget from the nearest {@link LayoutBudgetProvider}, or `null` (chrome that may render outside one). */
-export function useLayoutBudgetOptional(): LayoutBudget | null {
-  return useContext(BudgetContext);
-}
-
-/** The budget from the nearest {@link LayoutBudgetProvider}. Throws outside one. */
-export function useLayoutBudget(): LayoutBudget {
-  const v = useContext(BudgetContext);
-  if (!v) throw new Error('zidane-ui/workspace: useLayoutBudget must be used within <LayoutBudgetProvider>');
-  return v;
-}
-
-function sameResolved(a: LayoutResolved, b: LayoutResolved): boolean {
-  return (
-    a.sidebarWidth === b.sidebarWidth &&
-    a.sidebarForcedCollapsed === b.sidebarForcedCollapsed &&
-    a.panelWidth === b.panelWidth &&
-    a.panelMode === b.panelMode &&
-    a.chatMin === b.chatMin
-  );
-}

package/src/workspace/PanelContentView.tsx

@@ -1,335 +0,0 @@
-/**
- * Declarative renderer for extension panel content (`PanelContent` from
- * `zidane/chat/pure`). The extension ships data; this paints it with the
- * same vocabulary the Artifacts tab uses (row = glyph + title + subtitle +
- * status + badges) so extension tabs feel native. `custom` items show their
- * markdown fallback here: the kit has no extension renderers by design.
- *
- *   <PanelContentView content={entry.content} loading={entry.loading} error={entry.error}
- *     onAction={onAction} onOpenPath={openTarget.file} />
- */
-import type { PanelContent, PanelItem, PanelRowItem, PanelSection } from 'zidane/chat/pure';
-import { memo, useState, type CSSProperties } from 'react';
-
-import { PanelEmpty, PanelLoading } from '../components/PanelEmpty';
-import { PANEL_ROW, PANEL_ROW_HOVER, RowBadge } from '../components/PanelRows';
-import { ProseMarkdown as Markdown } from '../chat/transcript/ProseMarkdown';
-import { ArtifactRowChips, badgeColorStyle, badgeToneClass } from '../session/ArtifactRowChips';
-import { useWorkspaceLabels } from './useWorkspaceLabels';
-
-/** A click's modifiers, as `onOpenPath` receives them. */
-export interface PanelOpenEvent {
-  /** ⌘ was held. */
-  metaKey?: boolean;
-  /** Ctrl was held. */
-  ctrlKey?: boolean;
-}
-
-/** Props for {@link PanelContentView}. */
-export interface PanelContentViewProps {
-  /** The panel's content, or `null` before the first load. */
-  content: PanelContent | null;
-  /** A load is in flight. */
-  loading: boolean;
-  /** Why the last load failed, or `null`. */
-  error: string | null;
-  /** Runs one of the panel's actions (a row's `actionId`, a footer action). Keep it stable: the view is memoised. */
-  onAction: (actionId: string, payload?: unknown) => void;
-  /** Opens a row's `href` that is a path (not a web link). Absent: such rows are not clickable. */
-  onOpenPath?: (path: string, event?: PanelOpenEvent) => void;
-  /** Extra class names for the root. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-type ActionFn = PanelContentViewProps['onAction'];
-type OpenFn = PanelContentViewProps['onOpenPath'];
-
-/**
- * Paints an extension panel's declarative content: sections of rows, prose and key / value facts, and the footer actions.
- * Memoised: its host re-renders on every panel content or badge change, for any tab.
- *
- * @param props - The {@link PanelContentViewProps}.
- */
-export const PanelContentView = memo(function PanelContentView({
-  content,
-  loading,
-  error,
-  onAction,
-  onOpenPath,
-  className,
-  style,
-}: PanelContentViewProps) {
-  const labels = useWorkspaceLabels();
-  if (!content && loading) {
-    return <PanelLoading className={className} style={style} />;
-  }
-  if (!content) {
-    return (
-      <PanelEmpty
-        icon="i-ph-squares-four"
-        title={error ?? labels.panelContentNone}
-        warn={Boolean(error)}
-        className={className}
-        style={style}
-      />
-    );
-  }
-  const isEmpty = content.sections.every((s) => s.items.length === 0);
-  return (
-    <div className={`flex-1 min-h-0 flex flex-col${className ? ` ${className}` : ''}`} style={style}>
-      <div className="flex-1 min-h-0 flex flex-col overflow-y-auto px-3 pt-3 pb-3" aria-busy={loading}>
-        {error && (
-          <div className="text-xs text-[var(--zg-warn)] mb-2" role="alert">
-            {error}
-          </div>
-        )}
-        {isEmpty ? (
-          <PanelEmpty icon="i-ph-squares-four" title={content.empty ?? labels.panelContentEmpty} />
-        ) : (
-          <div className="flex flex-col gap-4">
-            {content.sections.map((section) => (
-              <Section key={section.id} section={section} onAction={onAction} onOpenPath={onOpenPath} />
-            ))}
-          </div>
-        )}
-      </div>
-      {content.actions && content.actions.length > 0 && (
-        <div className="shrink-0 flex flex-wrap gap-1.5 px-3 pt-1 pb-3">
-          {content.actions.map((a) => (
-            <button
-              key={a.id}
-              type="button"
-              onClick={() => onAction(a.id)}
-              className={`zg-press-subtle h-6 px-2 rounded-zg-sm border text-zg-meta cursor-pointer ${
-                a.tone === 'danger'
-                  ? 'border-zg-danger/30 before:bg-zg-danger/10 text-zg-danger hover:before:bg-zg-danger hover:text-white transition-colors'
-                  : 'zg-raised text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)]'
-              }`}
-            >
-              {a.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-});
-
-function Section({ section, onAction, onOpenPath }: { section: PanelSection; onAction: ActionFn; onOpenPath: OpenFn }) {
-  const [collapsed, setCollapsed] = useState(section.collapsed === true);
-  return (
-    <section className="flex flex-col">
-      {section.title && (
-        <button
-          type="button"
-          onClick={() => setCollapsed((c) => !c)}
-          aria-expanded={!collapsed}
-          className="zg-section-label m-0 mb-1 flex items-center gap-1 text-left bg-transparent border-0 p-0 cursor-pointer select-none hover:text-[var(--zg-text)]"
-        >
-          <span
-            className={`i-ph-caret-right text-zg-badge transition-transform duration-snap ease-snap ${collapsed ? '' : 'rotate-90'}`}
-          />
-          {section.title}
-        </button>
-      )}
-      {!collapsed && (
-        <div className="flex flex-col gap-1">
-          {section.items.map((item, i) => (
-            <Item key={itemKey(item, i)} item={item} onAction={onAction} onOpenPath={onOpenPath} />
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}
-
-function itemKey(item: PanelItem, i: number): string {
-  return item.kind === 'row' ? `row:${item.id ?? item.title}:${i}` : `${item.kind}:${i}`;
-}
-
-function Item({ item, onAction, onOpenPath }: { item: PanelItem; onAction: ActionFn; onOpenPath: OpenFn }) {
-  switch (item.kind) {
-    case 'row':
-      return <Row item={item} onAction={onAction} onOpenPath={onOpenPath} />;
-    case 'markdown':
-      return <Markdown className="text-xs">{item.text}</Markdown>;
-    case 'custom':
-      return <Markdown className="text-xs">{item.fallback}</Markdown>;
-    case 'kv': {
-      const mono = item.mono !== false;
-      return (
-        <dl className={`m-0 grid grid-cols-[auto_1fr] gap-x-4 text-xs ${mono ? 'gap-y-0.5' : 'gap-y-1.5'}`}>
-          {item.rows.map((r, i) => (
-            <div key={`${r.label}:${i}`} className="contents">
-              <dt className="text-[var(--zg-text-muted)] truncate">{r.label}</dt>
-              <dd
-                className={`m-0 min-w-0 flex items-center gap-1.5 text-[var(--zg-text)] ${mono ? 'font-mono text-zg-meta' : ''}`}
-                title={r.value}
-              >
-                {r.icon?.gui && (
-                  <span
-                    aria-hidden
-                    className={`${r.icon.gui} shrink-0 text-zg-ui ${badgeToneClass(r.tone)}`}
-                    style={badgeColorStyle(r.color)}
-                  />
-                )}
-                <span className="truncate">{r.value}</span>
-              </dd>
-            </div>
-          ))}
-        </dl>
-      );
-    }
-  }
-}
-
-/**
- * The first prose detail, flattened to plain text for the collapsed preview.
- *
- * @param details - A row's details.
- */
-export function detailsPreview(details: readonly PanelItem[] | undefined): string | undefined {
-  const md = details?.find((d) => d.kind === 'markdown');
-  if (!md || md.kind !== 'markdown') return undefined;
-  const text = md.text
-    .replace(/```[\s\S]*?```/g, ' ')
-    .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
-    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
-    .replace(/^\s{0,3}(?:#{1,6}|>|[-*+]|\d+\.)\s+/gm, '')
-    .replace(/[*_`~]+/g, '')
-    .replace(/\s+/g, ' ')
-    .trim();
-  return text || undefined;
-}
-
-function Row({ item, onAction, onOpenPath }: { item: PanelRowItem; onAction: ActionFn; onOpenPath: OpenFn }) {
-  const labels = useWorkspaceLabels();
-  const isUrl = item.href !== undefined && /^https?:\/\//.test(item.href);
-  // A path the app cannot open is shown, not linked.
-  const href = isUrl || onOpenPath ? item.href : undefined;
-  const interactive = Boolean(item.actionId || href);
-  const collapsible = Boolean(item.details && item.details.length > 0);
-  const [open, setOpen] = useState(item.expanded === true);
-  const preview = collapsible && !open ? detailsPreview(item.details) : undefined;
-  const activate = (event?: { metaKey?: boolean; ctrlKey?: boolean }) => {
-    if (item.actionId) {
-      onAction(item.actionId, item.payload);
-    } else if (href && !isUrl) {
-      onOpenPath?.(href, event);
-    }
-  };
-  const title = (
-    <span
-      className={
-        item.wrap
-          ? 'text-zg-body leading-[20px] font-medium text-[var(--zg-text)] text-left'
-          : 'truncate text-zg-ui text-[var(--zg-text)]'
-      }
-      title={item.wrap ? undefined : (item.subtitle ?? item.href)}
-    >
-      {item.title}
-    </span>
-  );
-  const linked = item.actionId ? (
-    <button
-      type="button"
-      onClick={(e) => activate(e)}
-      className="text-left bg-transparent border-0 p-0 cursor-pointer hover:underline min-w-0 flex"
-    >
-      {title}
-    </button>
-  ) : isUrl ? (
-    <a href={href} target="_blank" rel="noreferrer" className="no-underline hover:underline min-w-0 flex">
-      {title}
-    </a>
-  ) : href ? (
-    <button
-      type="button"
-      onClick={(e) => activate(e)}
-      className="text-left bg-transparent border-0 p-0 cursor-pointer hover:underline min-w-0 flex"
-    >
-      {title}
-    </button>
-  ) : (
-    title
-  );
-  return (
-    <div className={`${PANEL_ROW} ${interactive || collapsible ? PANEL_ROW_HOVER : ''}`} data-testid="panel-row">
-      {collapsible && (
-        <button
-          type="button"
-          aria-label={open ? labels.panelRowCollapse : labels.panelRowExpand}
-          aria-expanded={open}
-          onClick={() => setOpen((v) => !v)}
-          className="shrink-0 mt-[3px] -ml-1 h-[14px] w-[14px] inline-flex items-center justify-center bg-transparent border-0 p-0 cursor-pointer text-[var(--zg-text-muted)] hover:text-[var(--zg-text)]"
-        >
-          <span
-            aria-hidden
-            className={`i-ph-caret-right text-zg-meta transition-transform ${open ? 'rotate-90' : ''}`}
-          />
-        </button>
-      )}
-      {item.icon?.gui ? (
-        <span
-          aria-hidden
-          className={`${item.icon.gui} shrink-0 text-zg-body ${item.wrap ? 'mt-[3px]' : 'mt-[2px]'} ${badgeToneClass(item.tone)}`}
-          style={badgeColorStyle(item.color)}
-        />
-      ) : (
-        item.status && (
-          <span className="zg-track-chip shrink-0 mt-[3px] inline-flex h-[14px] min-w-[14px] items-center justify-center px-1 font-mono text-[9px] uppercase text-[var(--zg-text-muted)]">
-            {item.status}
-          </span>
-        )
-      )}
-      <div className="flex-1 min-w-0 flex flex-col">
-        <div className="flex items-start gap-2 min-w-0">
-          <div className="flex-1 min-w-0 flex">{linked}</div>
-          {item.icon?.gui && item.status && (
-            <span
-              className={`shrink-0 mt-[2px] text-zg-meta leading-4 whitespace-nowrap ${badgeToneClass(item.tone)}`}
-              style={badgeColorStyle(item.color)}
-            >
-              {item.status}
-            </span>
-          )}
-        </div>
-        {item.subtitle && item.subtitle !== item.title && (
-          <span className="truncate text-zg-meta text-[var(--zg-text-muted)]">{item.subtitle}</span>
-        )}
-        <ArtifactRowChips
-          {...(item.lead ? { lead: item.lead } : {})}
-          {...(item.diff ? { diff: item.diff } : {})}
-          {...(item.facts ? { facts: item.facts } : {})}
-        />
-        {item.badges && item.badges.length > 0 && (
-          <span className="mt-0.5 flex flex-wrap gap-1">
-            {item.badges.map((b, i) => (
-              <RowBadge key={`${b.text}:${i}`} text={b.text} tone={b.tone} title={b.title} />
-            ))}
-          </span>
-        )}
-        {preview && (
-          <button
-            type="button"
-            onClick={() => setOpen(true)}
-            title={labels.panelRowShowMore}
-            data-testid="panel-row-preview"
-            className="mt-1 text-left bg-transparent border-0 p-0 cursor-pointer text-zg-label leading-[18px] text-[var(--zg-text-muted)] line-clamp-2 hover:text-[var(--zg-text)]"
-          >
-            {preview}
-          </button>
-        )}
-        {collapsible && open && (
-          <div className="mt-2 flex flex-col gap-2" data-testid="panel-row-details">
-            {item.details!.map((d, i) => (
-              <Item key={itemKey(d, i)} item={d} onAction={onAction} onOpenPath={onOpenPath} />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}