zidane-ui 9.0.4 → 9.1.3

package/src/workspace/frame-motion.ts

@@ -1,160 +0,0 @@
-/**
- * Group frames that move without reflowing. When the tree reshapes, every
- * frame takes its final box at once, so its content lays out once, at its
- * final size; only paint and composite properties then carry it from where
- * it was: a frame that grew is unclipped from its old box, a new one
- * unfolds from the line it split off at, one that only moved slides. A frame that
- * shrank snaps (its neighbour's reveal covers the room it gave up). No
- * React state, no layout per frame.
- *
- * The dev browser's page is a native view drawn over its slot: it can't be
- * clipped or slid, so the frame showing it snaps, and followers re-measure
- * once (`pulseLayout`: a frame that moved without resizing fires no
- * ResizeObserver).
- */
-import { useCallback, useLayoutEffect, useRef, type RefObject } from 'react';
-
-import { pulseLayout } from '../motion/layout-animating';
-import { readPanelMs } from '../motion/presence';
-import type { Box } from './headless/tree';
-
-export type FrameMotion =
-  | { kind: 'none' }
-  /** `from`: the `clip-path` it starts at. */
-  | { kind: 'reveal'; from: string }
-  /** `from`: the `transform` it starts at. */
-  | { kind: 'translate'; from: string };
-
-const NONE: FrameMotion = { kind: 'none' };
-const EPS = 1e-4;
-const near = (a: number, b: number) => Math.abs(a - b) < EPS;
-const pct = (n: number) => `${Math.round(n * 1e5) / 1e3}%`;
-const sameBox = (a: Box, b: Box) => near(a.x, b.x) && near(a.y, b.y) && near(a.w, b.w) && near(a.h, b.h);
-const contains = (outer: Box, inner: Box) =>
-  inner.x > outer.x - EPS &&
-  inner.y > outer.y - EPS &&
-  inner.x + inner.w < outer.x + outer.w + EPS &&
-  inner.y + inner.h < outer.y + outer.h + EPS;
-/** `clip-path` showing only `part` of `box` (both in the same unit square; insets are fractions of `box`). */
-const insetOf = (box: Box, part: Box) =>
-  `inset(${pct((part.y - box.y) / box.h)} ${pct((box.x + box.w - part.x - part.w) / box.w)} ${pct(
-    (box.y + box.h - part.y - part.h) / box.h,
-  )} ${pct((part.x - box.x) / box.w)})`;
-
-/**
- * The zero-wide (or -high) strip of `next` on the line it split off from
- * `source` at: it opens from there, as a collapse closes back onto it.
- */
-function splitEdge(next: Box, source: Box): Box | null {
-  if (next.x > source.x + EPS && near(next.x + next.w, source.x + source.w)) return { ...next, w: 0 };
-  if (next.w < source.w - EPS && near(next.x, source.x)) return { ...next, x: next.x + next.w, w: 0 };
-  if (next.y > source.y + EPS && near(next.y + next.h, source.y + source.h)) return { ...next, h: 0 };
-  if (next.h < source.h - EPS && near(next.y, source.y)) return { ...next, y: next.y + next.h, h: 0 };
-  return null;
-}
-
-/**
- * How a frame gets from `prev` to `next` (unit-square boxes). A new frame
- * (no `prev`) unfolds from the line it split off `source` at, the box of
- * the group it was split from as it was before.
- */
-export function frameMotion(prev: Box | undefined, next: Box, source?: Box): FrameMotion {
-  if (!prev) {
-    const edge = source && splitEdge(next, source);
-    return edge ? { kind: 'reveal', from: insetOf(next, edge) } : NONE;
-  }
-  if (sameBox(prev, next)) return NONE;
-  if (near(prev.w, next.w) && near(prev.h, next.h)) {
-    return {
-      kind: 'translate',
-      from: `translate(${pct((prev.x - next.x) / next.w)}, ${pct((prev.y - next.y) / next.h)})`,
-    };
-  }
-  return contains(next, prev) ? { kind: 'reveal', from: insetOf(next, prev) } : NONE;
-}
-
-const motionOn = () => {
-  const v = document.documentElement.dataset.motion;
-  return v !== 'off' && v !== 'reduced';
-};
-
-/**
- * Animates the frames under `areaRef` (`[data-panel-group]`) whenever
- * `boxes` changes within one `scope` (another conversation's groups just
- * appear). `snap` lists the frames that must not animate. Returns `sync`:
- * a divider drag paints boxes itself and reports each one, so its commit
- * is not animated again.
- */
-export function useFrameMotion(
-  areaRef: RefObject<HTMLElement | null>,
-  boxes: ReadonlyMap<string, Box>,
-  scope: string,
-  snap: ReadonlySet<string>,
-): (painted: ReadonlyMap<string, Box>) => void {
-  const last = useRef<{ scope: string; boxes: ReadonlyMap<string, Box> } | null>(null);
-  const running = useRef(new Map<string, Animation>());
-  const stop = useCallback(() => {
-    for (const a of running.current.values()) a.cancel();
-    running.current.clear();
-  }, []);
-
-  useLayoutEffect(() => {
-    const prev = last.current;
-    last.current = { scope, boxes };
-    const area = areaRef.current;
-    if (!prev || !area) return;
-    if (prev.scope !== scope) {
-      stop();
-      return;
-    }
-    const moved = [...boxes].some(([id, box]) => {
-      const was = prev.boxes.get(id);
-      return !was || !sameBox(was, box);
-    });
-    if (!moved) return;
-    pulseLayout();
-    const ms = readPanelMs();
-    if (!motionOn() || ms <= 0) return;
-    const easing = getComputedStyle(document.documentElement).getPropertyValue('--zg-panel-ease').trim() || 'ease-out';
-    const sources = [...prev.boxes.values()];
-    const frames = new Map(
-      [...area.querySelectorAll<HTMLElement>(':scope > [data-panel-group]')].map((el) => [el.dataset.panelGroup, el]),
-    );
-    for (const [id, box] of boxes) {
-      const was = prev.boxes.get(id);
-      // Unmoved: one still on its way keeps going.
-      if (was && sameBox(was, box)) continue;
-      running.current.get(id)?.cancel();
-      running.current.delete(id);
-      if (snap.has(id)) continue;
-      const motion = frameMotion(was, box, was ? undefined : sources.find((s) => contains(s, box)));
-      if (motion.kind === 'none') continue;
-      const el = frames.get(id);
-      if (!el) continue;
-      const prop = motion.kind === 'reveal' ? 'clipPath' : 'transform';
-      const end = motion.kind === 'reveal' ? 'inset(0)' : 'none';
-      // Above its neighbours while it moves (a slide crosses them); dropped with the animation.
-      const animation = el.animate(
-        [
-          { [prop]: motion.from, zIndex: 1 },
-          { [prop]: end, zIndex: 1 },
-        ],
-        { duration: ms, easing },
-      );
-      running.current.set(id, animation);
-      animation.addEventListener('finish', () => {
-        if (running.current.get(id) === animation) running.current.delete(id);
-      });
-    }
-  }, [areaRef, boxes, scope, snap, stop]);
-
-  useLayoutEffect(() => stop, [stop]);
-
-  return useCallback(
-    (painted) => {
-      stop();
-      if (last.current) last.current = { ...last.current, boxes: painted };
-    },
-    [stop],
-  );
-}

package/src/workspace/headless/contents.ts

@@ -1,125 +0,0 @@
-/**
- * Extension panel content, cached per BINDING (a folder plus the session or
- * none, `bindingKey`): a load always lands in the binding it was made for,
- * whichever is shown when it resolves, and switching back to a conversation
- * shows its panels (and their badges) at once while the visible one reloads.
- * The latest load per (binding, panel) wins: an older one resolving late is
- * dropped. React-free; `WorkspaceProvider` drives it.
- */
-import type { PanelContent } from 'zidane/chat/pure';
-
-import type { PanelContentEntry } from './view';
-
-/** Every binding's entries, by panel id. Replaced (never mutated) on each change. */
-export type PanelContentCache = Readonly<Record<string, Readonly<Record<string, PanelContentEntry>>>>;
-
-/** A panel with nothing loaded. */
-export const EMPTY_CONTENT_ENTRY: PanelContentEntry = { content: null, loading: false, pending: false, error: null };
-const NO_ENTRIES: Readonly<Record<string, PanelContentEntry>> = {};
-
-/**
- * The binding a panel's content belongs to: the folder it loads against, and the session (or none).
- *
- * @param cwd - The folder.
- * @param sessionId - The session, or null.
- */
-export function bindingKey(cwd: string, sessionId: string | null): string {
-  return `${cwd}\u0000${sessionId ?? ''}`;
-}
-
-/**
- * Whether `binding` is one of `cwd`'s.
- *
- * @param binding - A {@link bindingKey}.
- * @param cwd - The folder.
- */
-export function bindingInFolder(binding: string, cwd: string): boolean {
-  return binding.startsWith(`${cwd}\u0000`);
-}
-
-/** The content cache's store. */
-export interface PanelContents {
-  /** The cache now. */
-  get(): PanelContentCache;
-  /** Called after each change. Returns the unsubscribe. */
-  subscribe(onChange: () => void): () => void;
-  /** Starts a load of `id` in `binding`: flags it loading. Returns the load's token for {@link PanelContents.settle}. */
-  begin(binding: string, id: string): number;
-  /** Lands a load's result, unless a newer load of the same panel in the same binding started since. */
-  settle(binding: string, id: string, token: number, result: { content: PanelContent } | { error: string }): void;
-  /** Sets or clears an entry's error. */
-  setError(binding: string, id: string, error: string | null): void;
-  /** Flags an entry pending (it reloads when shown). */
-  markPending(binding: string, id: string): void;
-  /**
-   * `panelId` changed in `cwd`: every binding of that folder that loaded it
-   * flags it pending, except `skip` (the binding that reloads it now).
-   */
-  markChanged(cwd: string, panelId: string, skip?: string | null): void;
-  /** Keeps only `bindings` (the most recently shown); the others reload when shown again. */
-  keep(bindings: readonly string[]): void;
-}
-
-/** Creates an empty {@link PanelContents}. */
-export function createPanelContents(): PanelContents {
-  let cache: PanelContentCache = {};
-  const generation = new Map<string, number>();
-  const listeners = new Set<() => void>();
-  const set = (next: PanelContentCache) => {
-    if (next === cache) return;
-    cache = next;
-    for (const listener of [...listeners]) listener();
-  };
-  const patch = (at: string, id: string, update: (entry: PanelContentEntry) => PanelContentEntry) => {
-    const entries = cache[at] ?? NO_ENTRIES;
-    set({ ...cache, [at]: { ...entries, [id]: update(entries[id] ?? EMPTY_CONTENT_ENTRY) } });
-  };
-  const slot = (at: string, id: string) => `${at}\u0001${id}`;
-  return {
-    get: () => cache,
-    subscribe(onChange) {
-      listeners.add(onChange);
-      return () => listeners.delete(onChange);
-    },
-    begin(at, id) {
-      const token = (generation.get(slot(at, id)) ?? 0) + 1;
-      generation.set(slot(at, id), token);
-      patch(at, id, (entry) => ({ ...entry, loading: true, pending: false }));
-      return token;
-    },
-    settle(at, id, token, result) {
-      if (generation.get(slot(at, id)) !== token) return;
-      if ('content' in result)
-        patch(at, id, () => ({ content: result.content, loading: false, pending: false, error: null }));
-      else patch(at, id, (entry) => ({ ...entry, loading: false, error: result.error }));
-    },
-    setError(at, id, error) {
-      patch(at, id, (entry) => ({ ...entry, error }));
-    },
-    markPending(at, id) {
-      patch(at, id, (entry) => ({ ...entry, pending: true }));
-    },
-    markChanged(cwd, panelId, skip) {
-      let next: Record<string, Readonly<Record<string, PanelContentEntry>>> | null = null;
-      for (const [at, entries] of Object.entries(cache)) {
-        if (!bindingInFolder(at, cwd) || at === skip) continue;
-        const entry = entries[panelId];
-        // Not loaded yet in that binding: it loads fresh when needed anyway.
-        if (!entry || entry.pending) continue;
-        next ??= { ...cache };
-        next[at] = { ...entries, [panelId]: { ...entry, pending: true } };
-      }
-      if (next) set(next);
-    },
-    keep(bindings) {
-      const stale = Object.keys(cache).filter((b) => !bindings.includes(b));
-      if (stale.length === 0) return;
-      const next = { ...cache };
-      for (const b of stale) {
-        delete next[b];
-        for (const key of generation.keys()) if (key.startsWith(`${b}\u0001`)) generation.delete(key);
-      }
-      set(next);
-    },
-  };
-}

package/src/workspace/headless/host.ts

@@ -1,118 +0,0 @@
-/**
- * The workspace's host: where the side panel's layout document is kept, and
- * the extension panels an app offers. An app implements it once (over IPC,
- * over browser storage, in memory) and hands it to `WorkspaceProvider` (or
- * `AppHost.workspace`).
- *
- * Every member is optional: without `layouts` the layout lasts as long as the
- * page (`createMemoryLayouts`); without `panels` the strip shows only the
- * app's own tabs.
- *
- * The desktop app implements it over IPC (`gui/…/hosts/electron-workspace-host.ts`),
- * `zidane-ui/adapters` in browser storage (`createBrowserWorkspaceHost`), and
- * `zidane-ui/workspace/testing` in memory. All three run
- * `zidane-ui/workspace/testing/contract`.
- */
-import type { ExtensionPanelScope, PanelContent, PanelIcon, PanelLoadContextInput } from 'zidane/chat/pure';
-
-import type { PanelTree } from './panel-tree';
-
-export type { PanelContent, PanelLoadContextInput };
-
-/**
- * What a layout belongs to: a session, a folder, a draft. The kit only reads
- * `key`; an app adds what its host needs to find the record (the desktop
- * app's scope carries the folder whose template a new session copies).
- */
-export interface WorkspaceScope {
-  /** Identifies the layout: two scopes with the same key share one. */
-  readonly key: string;
-}
-
-/** One scope's side panel, as stored. */
-export interface WorkspaceLayout {
-  /** The panel is open. */
-  open: boolean;
-  /** The tab groups, the focused one and the ids still to hand out. */
-  tree: PanelTree;
-  /** The width the user dragged the panel to (px); `null` until dragged. */
-  width: number | null;
-  /** Dragged past the chat's usual floor: the panel's share of the room beside the sidebar (`resolveLayout`). */
-  share: number | null;
-}
-
-/** The layouts of every scope, read synchronously so a scope switch shows its layout in the same render. */
-export interface WorkspaceLayouts<S extends WorkspaceScope = WorkspaceScope> {
-  /** The scope's layout as stored now. The same object while it is unchanged. */
-  get(scope: S): WorkspaceLayout;
-  /**
-   * Applies `change` to the layout stored now (read-modify-write, so a stale
-   * copy is never written back over another window's change). A change that
-   * changes nothing writes nothing.
-   */
-  update(scope: S, change: (stored: WorkspaceLayout) => Partial<WorkspaceLayout>): void;
-  /** Called after any layout changed, here or in another window. Returns the unsubscribe. */
-  subscribe(onChange: () => void): () => void;
-}
-
-/** One extension panel an app offers in a folder. */
-export interface WorkspacePanelSummary {
-  /** The panel's id: its tab id in the strip. */
-  id: string;
-  /** The tab label. */
-  label: string;
-  /** The extension that registered it. */
-  owner: string;
-  /** The tab icon. */
-  icon?: PanelIcon;
-  /** Where it shows: with a session, on a folder alone, or both. */
-  scope: ExtensionPanelScope;
-}
-
-/** Why an extension panel call failed, for the panel to word through its labels. */
-export type WorkspaceHostError =
-  /** The host cannot do it (no longer available, not offered on this connection). */
-  | { code: 'unavailable' }
-  /** It ran and failed; `message` is the extension's own words. */
-  | { code: 'failed'; message: string };
-
-/** What running a panel action answered. */
-export type WorkspacePanelActionResult = { ok: true } | { ok: false; error: WorkspaceHostError };
-
-/** A panel's content changed in a folder. */
-export interface WorkspacePanelChange {
-  /** The folder it changed in. */
-  cwd: string;
-  /** The panel. */
-  panelId: string;
-}
-
-/** Extension-contributed panels: their catalog per folder, their content and their actions. */
-export interface WorkspacePanels {
-  /** The extension panels offered in `cwd`. */
-  list(cwd: string): Promise<readonly WorkspacePanelSummary[]>;
-  /** One panel's content for `ctx` (the session it shows beside, what it was opened on). Rejects when it fails. */
-  load(cwd: string, panelId: string, ctx: PanelLoadContextInput): Promise<PanelContent>;
-  /** Runs a panel's action. */
-  action(
-    cwd: string,
-    panelId: string,
-    actionId: string,
-    payload: unknown,
-    ctx: PanelLoadContextInput,
-  ): Promise<WorkspacePanelActionResult>;
-  /** Keeps the panel's own live updates on while it is shown. Returns the stop. */
-  watch?(cwd: string, panelId: string): () => void;
-  /** Called when a panel's content changed. Returns the unsubscribe. */
-  subscribe?(onChange: (change: WorkspacePanelChange) => void): () => void;
-  /** Called when the catalog may have changed (an extension loaded or left). Returns the unsubscribe. */
-  subscribeCatalog?(onChange: () => void): () => void;
-}
-
-/** Where the workspace keeps its layouts and finds extension panels. Leave a member out and what needs it falls back. */
-export interface WorkspaceHost<S extends WorkspaceScope = WorkspaceScope> {
-  /** Persistent layouts. Absent: layouts last as long as the page. */
-  layouts?: WorkspaceLayouts<S>;
-  /** Extension panels. Absent: only the app's own tabs. */
-  panels?: WorkspacePanels;
-}

package/src/workspace/headless/index.ts

@@ -1,33 +0,0 @@
-/**
- * `zidane-ui/workspace/headless`: the side panel's React-free half. The
- * `WorkspaceHost` an app implements, the layout document (`PanelTree`: tab
- * groups, the focused one, the id counter) and its operations, the group
- * tree's readers, the view as shown, the panel actions over a layout store,
- * the layout stores (memory, browser storage), the per-scope layout memory
- * (`createLayoutMemory`: panel, Files tab, terminal drawer), the extension content cache,
- * the horizontal budget (`resolveLayout`) and the labels.
- */
-export * from './host';
-export * from './panel-tree';
-export {
-  findGroup,
-  groupsOf,
-  parseTree,
-  treeTabs,
-  type DropZone,
-  type PanelGroup,
-  type PanelNode,
-  type PanelSplit,
-  type SplitDir,
-  type SplitSide,
-} from './tree';
-export * from './view';
-export * from './ops';
-export * from './layouts';
-export * from './layout-memory';
-export * from './contents';
-export * from './resolve';
-export * from './labels';
-export * from './open-target';
-export * from './reveal-at';
-export * from './panel-focus';

package/src/workspace/headless/labels.ts

@@ -1,34 +0,0 @@
-/**
- * The workspace's strings (the desktop app's wording). One flat dictionary
- * an app overrides with `<LabelsProvider>` or the `labels` prop of
- * `WorkspaceProvider`. Keys you leave out keep the default English label.
- */
-
-/** The default English strings of the side panel. Override any of them through `WorkspaceProvider`. */
-export const DEFAULT_WORKSPACE_LABELS = {
-  // The panel
-  panelRegion: 'Side panel',
-  panelShow: 'Show panel',
-  panelShowWaiting: (count: number) => `Show panel (${count} waiting)`,
-  panelClose: 'Close panel',
-  panelPopOut: 'Side panels in new window',
-  // The strips
-  panelTabs: 'Panels',
-  panelGroupTabs: (index: number) => `Panels, group ${index}`,
-  panelAdd: 'Add panel',
-  panelCloseTab: (label: string) => `Close ${label} tab`,
-  panelTabInUse: 'in use by the agent',
-  panelTabUpdated: 'updated',
-  // The dividers
-  panelResizeGroups: 'Resize panel groups',
-  // Extension panels
-  panelUnavailable: 'This panel is not available here.',
-  panelContentNone: 'Nothing to show',
-  panelContentEmpty: 'Nothing yet',
-  panelRowExpand: 'Expand',
-  panelRowCollapse: 'Collapse',
-  panelRowShowMore: 'Show more',
-};
-
-/** The shape of the workspace label dictionary. Some values are functions that build a string. */
-export type WorkspaceLabels = typeof DEFAULT_WORKSPACE_LABELS;