zidane-ui 9.1.1 → 9.1.3

package/src/code/mermaid-lexer.ts

@@ -1,331 +0,0 @@
-/**
- * Mermaid highlighting. @pierre/highlights has no Mermaid grammar, so this
- * small line lexer gives Mermaid blocks (a diagram's source, a `.mmd` file)
- * their colors. It writes the same `<pre class="highlights">` markup as the
- * highlighter, in the colors of the code theme's own syntax scopes (keyword,
- * string, operator…), so a Mermaid block reads like every other block. It runs
- * where the highlighter runs (`highlights.ts`): in its worker, behind its cache.
- *
- * It colors what helps reading: the diagram type and statements, links and
- * arrows, node text, edge labels, messages, strings, numbers, classes and
- * comments. Anything it does not know stays plain, so a partial source (a
- * streaming reply) is never an error.
- */
-import type { Theme, ThemeSyntaxSettings } from '@pierre/highlights';
-
-/** What a span of Mermaid source is. Each names the theme syntax scope it is drawn with. */
-export type MermaidTokenKind =
-  'plain' | 'comment' | 'keyword' | 'operator' | 'string' | 'number' | 'variable' | 'type' | 'bracket' | 'delimiter';
-
-/** A span of Mermaid source and its kind. */
-export interface MermaidToken {
-  text: string;
-  kind: MermaidTokenKind;
-}
-
-const KEYWORDS = new Set([
-  // Diagram types.
-  'graph',
-  'flowchart',
-  'flowchart-elk',
-  'sequenceDiagram',
-  'classDiagram',
-  'classDiagram-v2',
-  'stateDiagram',
-  'stateDiagram-v2',
-  'erDiagram',
-  'journey',
-  'gantt',
-  'pie',
-  'quadrantChart',
-  'requirementDiagram',
-  'gitGraph',
-  'mindmap',
-  'timeline',
-  'sankey-beta',
-  'xychart-beta',
-  'block-beta',
-  'packet-beta',
-  'kanban',
-  'architecture-beta',
-  'radar-beta',
-  'treemap-beta',
-  'C4Context',
-  'C4Container',
-  'C4Component',
-  'C4Dynamic',
-  'C4Deployment',
-  // Directions.
-  'TB',
-  'TD',
-  'BT',
-  'RL',
-  'LR',
-  // Statements.
-  'subgraph',
-  'end',
-  'direction',
-  'participant',
-  'actor',
-  'as',
-  'Note',
-  'note',
-  'over',
-  'left',
-  'right',
-  'of',
-  'loop',
-  'alt',
-  'else',
-  'opt',
-  'par',
-  'and',
-  'critical',
-  'break',
-  'rect',
-  'box',
-  'autonumber',
-  'activate',
-  'deactivate',
-  'create',
-  'destroy',
-  'title',
-  'section',
-  'dateFormat',
-  'axisFormat',
-  'tickInterval',
-  'excludes',
-  'includes',
-  'todayMarker',
-  'weekday',
-  'state',
-  'class',
-  'classDef',
-  'style',
-  'linkStyle',
-  'click',
-  'call',
-  'href',
-  'callback',
-  'namespace',
-  'accTitle',
-  'accDescr',
-  'showData',
-  'commit',
-  'branch',
-  'checkout',
-  'merge',
-  'cherry-pick',
-  'x-axis',
-  'y-axis',
-  'line',
-  'bar',
-  'quadrant-1',
-  'quadrant-2',
-  'quadrant-3',
-  'quadrant-4',
-]);
-
-// Links and arrows: flowchart (-->, -.->, ==>, ~~~, --o, --x), sequence (->>, -->>, -x, -)),
-// class (<|--, *--, o--, ..>), ER (||--o{, }|..|{). An optional head on each side.
-const ARROW =
-  /(?:<<|<\||\|\||\}\||\|o|\}o|[<*|}])?(?:-{2,}|={2,}|-\.+-?|~{3,}|\.{2,}|-(?=>|x(?![\w])|\)))(?:>>|\|>|o\{|\|\{|o\||\|\||[>*)]|[ox](?![\w])|[|{])?/y;
-// An id or a word: interior dashes stay in it (x-axis, my-node) unless they start a link (A-->B, C->>S).
-const WORD = /[A-Za-z_][\w]*(?:-(?![-.>=x)])[\w]+)*/y;
-const NUMBER = /\d+(?:\.\d+)?%?/y;
-const SPACE = /\s+/y;
-const CLASS_REF = /:::[\w-]+/y;
-
-const CLOSER: Record<string, string> = { '[': ']', '(': ')', '{': '}', '/': '/', '\\': '\\', '>': ']' };
-
-function at(re: RegExp, line: string, i: number): string | null {
-  re.lastIndex = i;
-  const m = re.exec(line);
-  return m && m[0] ? m[0] : null;
-}
-
-/** The tokens of one line, appended to `out`. */
-function lexLine(line: string, out: MermaidToken[]) {
-  const push = (text: string, kind: MermaidTokenKind) => {
-    if (text) out.push({ text, kind });
-  };
-  let i = 0;
-  while (i < line.length) {
-    const ch = line[i]!;
-    if (line.startsWith('%%', i)) {
-      push(line.slice(i), 'comment');
-      return;
-    }
-    const space = at(SPACE, line, i);
-    if (space) {
-      push(space, 'plain');
-      i += space.length;
-      continue;
-    }
-    if (ch === '"') {
-      const end = line.indexOf('"', i + 1);
-      const stop = end < 0 ? line.length : end + 1;
-      push(line.slice(i, stop), 'string');
-      i = stop;
-      continue;
-    }
-    const classRef = at(CLASS_REF, line, i);
-    if (classRef) {
-      push(classRef, 'type');
-      i += classRef.length;
-      continue;
-    }
-    const arrow = at(ARROW, line, i);
-    if (arrow) {
-      push(arrow, 'operator');
-      i += arrow.length;
-      continue;
-    }
-    // Node text: [x], (x), {x}, ((x)), [(x)], [/x/], {{x}}… up to the mirrored closer.
-    if (ch === '[' || ch === '(' || ch === '{') {
-      let open = ch;
-      while (i + open.length < line.length && '[({/\\'.includes(line[i + open.length]!) && open.length < 3) {
-        open += line[i + open.length];
-      }
-      const close = [...open]
-        .reverse()
-        .map((c) => CLOSER[c])
-        .join('');
-      const end = line.indexOf(close, i + open.length);
-      push(open, 'bracket');
-      if (end < 0) {
-        push(line.slice(i + open.length), 'string');
-        return;
-      }
-      push(line.slice(i + open.length, end), 'string');
-      push(close, 'bracket');
-      i = end + close.length;
-      continue;
-    }
-    // Edge label: |text|.
-    if (ch === '|') {
-      const end = line.indexOf('|', i + 1);
-      push('|', 'bracket');
-      if (end < 0) {
-        push(line.slice(i + 1), 'string');
-        return;
-      }
-      push(line.slice(i + 1, end), 'string');
-      push('|', 'bracket');
-      i = end + 1;
-      continue;
-    }
-    // A message, a description, a value: what follows `:` is text (or a number).
-    if (ch === ':') {
-      push(':', 'delimiter');
-      const rest = line.slice(i + 1);
-      push(rest, /^\s*-?\d+(?:\.\d+)?%?\s*$/.test(rest) ? 'number' : 'string');
-      return;
-    }
-    const number = at(NUMBER, line, i);
-    if (number) {
-      push(number, 'number');
-      i += number.length;
-      continue;
-    }
-    const word = at(WORD, line, i);
-    if (word) {
-      push(word, KEYWORDS.has(word) ? 'keyword' : 'variable');
-      i += word.length;
-      continue;
-    }
-    push(ch, ch === ';' || ch === ',' || ch === '&' ? 'delimiter' : 'plain');
-    i += 1;
-  }
-}
-
-/**
- * Splits Mermaid source into tokens. Adjacent tokens of one kind are merged; the texts joined give the source back.
- *
- * @param code - The Mermaid source.
- * @returns The tokens, line breaks included as plain text.
- */
-export function tokenizeMermaid(code: string): MermaidToken[] {
-  const raw: MermaidToken[] = [];
-  const lines = code.split('\n');
-  lines.forEach((line, n) => {
-    lexLine(line, raw);
-    if (n < lines.length - 1) raw.push({ text: '\n', kind: 'plain' });
-  });
-  const merged: MermaidToken[] = [];
-  for (const token of raw) {
-    const last = merged[merged.length - 1];
-    if (last && last.kind === token.kind) last.text += token.text;
-    else merged.push({ ...token });
-  }
-  return merged;
-}
-
-// The theme scope each kind is drawn with, most specific first.
-const SCOPES: Record<Exclude<MermaidTokenKind, 'plain'>, readonly string[]> = {
-  comment: ['comment'],
-  keyword: ['keyword'],
-  operator: ['operator', 'keyword.operator', 'keyword'],
-  string: ['string'],
-  number: ['number', 'constant'],
-  variable: ['variable'],
-  type: ['type', 'title'],
-  bracket: ['punctuation.bracket', 'punctuation', 'operator'],
-  delimiter: ['punctuation.delimiter', 'punctuation', 'operator'],
-};
-
-const COLOR = /^#[0-9a-f]{3,8}$/i;
-
-/** A scope's style, inherited from its parent scopes (`keyword.operator` → `keyword`). */
-function scopeStyle(
-  syntax: Record<string, string | ThemeSyntaxSettings>,
-  name: string,
-): ThemeSyntaxSettings | undefined {
-  for (let scope = name; scope; scope = scope.includes('.') ? scope.slice(0, scope.lastIndexOf('.')) : '') {
-    const value = syntax[scope];
-    if (value) return typeof value === 'string' ? { color: value } : value;
-  }
-  return undefined;
-}
-
-function css(settings: ThemeSyntaxSettings | undefined): string {
-  if (!settings) return '';
-  const parts: string[] = [];
-  if (settings.color && COLOR.test(settings.color)) parts.push(`color:${settings.color}`);
-  if (settings.font_style === 'italic') parts.push('font-style:italic');
-  if (typeof settings.font_weight === 'number') parts.push(`font-weight:${settings.font_weight}`);
-  return parts.join(';');
-}
-
-const escape = (text: string) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-
-/**
- * Mermaid source as the highlighter's `<pre class="highlights">` markup, in a code theme's colors.
- *
- * @param code - The Mermaid source.
- * @param theme - The code theme.
- * @returns The HTML.
- */
-export function mermaidToHtml(code: string, theme: Theme): string {
-  const style = theme.style as { syntax?: Record<string, string | ThemeSyntaxSettings>; [key: string]: unknown };
-  const syntax = style.syntax ?? {};
-  const styles = new Map<MermaidTokenKind, string>();
-  const styleOf = (kind: MermaidTokenKind) => {
-    let value = styles.get(kind);
-    if (value === undefined) {
-      value = kind === 'plain' ? '' : css(SCOPES[kind].map((s) => scopeStyle(syntax, s)).find(Boolean));
-      styles.set(kind, value);
-    }
-    return value;
-  };
-  const fg = [style['editor.foreground'], style.text, style.foreground].find(
-    (c): c is string => typeof c === 'string' && COLOR.test(c),
-  );
-  const body = tokenizeMermaid(code)
-    .map(({ text, kind }) => {
-      const s = styleOf(kind);
-      return s ? `<span style="${s}">${escape(text)}</span>` : escape(text);
-    })
-    .join('');
-  return `<pre class="highlights"${fg ? ` style="color:${fg}"` : ''}><code>${body}</code></pre>`;
-}

package/src/code/shiki-theme.ts

@@ -1,46 +0,0 @@
-/**
- * Theme id → bundled code theme. Syntax colors are NOT derived from the
- * palette (a highlighter theme is a designed artifact, not six hues); we
- * pick the closest bundled theme by id, else a neutral GitHub theme that
- * matches the appearance. The code block chrome (`--zg-code-bg`) always
- * comes from the palette so the block sits on our surface, not the theme's.
- */
-import type { Appearance } from '../theme/derive';
-import type { CodeThemeId } from './code-themes';
-
-const BY_THEME_ID: Readonly<Record<string, CodeThemeId>> = {
-  'catppuccin-mocha': 'catppuccin-mocha',
-  'catppuccin-macchiato': 'catppuccin-macchiato',
-  'catppuccin-frappe': 'catppuccin-frappe',
-  'catppuccin-latte': 'catppuccin-latte',
-  'gruvbox-dark': 'gruvbox-dark-medium',
-  'gruvbox-light': 'gruvbox-light-medium',
-  vaporwave: 'synthwave-84',
-};
-
-const FALLBACK: Readonly<Record<Appearance, CodeThemeId>> = {
-  dark: 'github-dark-default',
-  light: 'github-light-default',
-};
-
-/**
- * The neutral code theme for an appearance: what a theme without a designed counterpart uses.
- *
- * @param appearance - `'dark'` or `'light'`.
- * @returns `github-dark-default` or `github-light-default`.
- */
-export function defaultShikiTheme(appearance: Appearance): CodeThemeId {
-  return FALLBACK[appearance];
-}
-
-/**
- * The bundled code theme for a kit theme: its designed counterpart (Catppuccin, Gruvbox…), else
- * the neutral theme of its appearance.
- *
- * @param themeId - The kit theme's id (`BUILTIN_THEMES` key or an extension theme's id).
- * @param appearance - The theme's appearance, for the fallback.
- * @returns A code theme id.
- */
-export function shikiThemeFor(themeId: string, appearance: Appearance): CodeThemeId {
-  return BY_THEME_ID[themeId] ?? defaultShikiTheme(appearance);
-}

package/src/components/BrandMark.tsx

@@ -1,118 +0,0 @@
-/**
- * The logo of a service (a model provider, a connector, a tool) on a small
- * tile tinted with its brand color. The logos come from Simple Icons and
- * LobeHub Icons (`brands/marks.ts`). A brand color too dark or too light for the theme
- * gives way to a readable one, so a black logo never disappears on a dark
- * theme. A service without a logo shows its icon or its first letter, on a
- * calm tint of its own.
- */
-import type { CSSProperties } from 'react';
-
-import { BRAND_MARKS } from '../brands/marks';
-
-/** The sizes of a mark: 18, 28 or 40 pixels, or `xs`, one em square (an icon's box, as the settings nav draws it). */
-export type BrandMarkSize = 'xs' | 'sm' | 'md' | 'lg';
-
-/**
- * Whether the kit has a logo for a Simple Icons slug.
- *
- * @param brand - The slug, such as `linear`.
- */
-export function hasBrandMark(brand: string | undefined): boolean {
-  return brand !== undefined && brand in BRAND_MARKS;
-}
-
-/** Relative luminance of a `rrggbb` color, from 0 (black) to 1 (white). */
-function luminance(hex: string): number {
-  const [r, g, b] = [0, 2, 4].map((at) => {
-    const c = Number.parseInt(hex.slice(at, at + 2), 16) / 255;
-    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-  });
-  return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!;
-}
-
-/** The brand color, readable on both appearances: a near-black logo takes the text color on dark themes, a pale one darkens on light themes. */
-function brandColor(hex: string): string {
-  const level = luminance(hex);
-  if (level < 0.06) return `light-dark(#${hex}, var(--zg-text))`;
-  if (level > 0.6) return `light-dark(color-mix(in oklab, #${hex} 60%, black), #${hex})`;
-  return `#${hex}`;
-}
-
-/** A calm hue from a name, so a service without a logo keeps the same color everywhere. */
-function letterColor(label: string): string {
-  let hash = 0;
-  for (const char of label) hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
-  const hue = hash % 360;
-  return `light-dark(oklch(0.52 0.12 ${hue}), oklch(0.78 0.11 ${hue}))`;
-}
-
-/** Props for {@link BrandMark}. */
-export interface BrandMarkProps {
-  /** The slug of the service's logo (`linear`), as `hasBrandMark` knows it. Absent or unknown: the icon or the letter. */
-  brand?: string;
-  /** The service's name: the letter when there is no logo, and the image's name when the mark is not decorative. */
-  label: string;
-  /** An icon class (`i-ph-*`) to show when there is no logo, in place of the letter. */
-  icon?: string;
-  /** The letter to show when there is neither a logo nor an icon. Absent: the label's first letter. */
-  letter?: string;
-  /** 18, 28 or 40 pixels, or one em (`xs`). */
-  size?: BrandMarkSize;
-  /** The name is written next to the mark, so assistive tech skips it. Set false for a mark that stands alone. */
-  decorative?: boolean;
-  /** Extra classes on the tile. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a service's logo on a tinted tile, or its icon or first letter when the kit has no logo for it.
- *
- * @param props - Component props.
- */
-export function BrandMark({
-  brand,
-  label,
-  icon,
-  letter,
-  size = 'md',
-  decorative = true,
-  className = '',
-  style,
-}: BrandMarkProps) {
-  const mark = brand ? BRAND_MARKS[brand] : undefined;
-  const ownStyle = { '--zg-brand': mark ? brandColor(mark.hex) : letterColor(label) } as CSSProperties;
-  const a11y = decorative ? { 'aria-hidden': true } : { role: 'img', 'aria-label': label };
-  const shown = mark ? undefined : icon ? undefined : (letter ?? label.trim().charAt(0)).toUpperCase();
-  return (
-    <span
-      className={`zg-brand-mark ${className}`}
-      data-size={size}
-      data-brand={mark ? brand : undefined}
-      style={{ ...ownStyle, ...style }}
-      {...a11y}
-    >
-      {mark ? (
-        <svg viewBox="0 0 24 24" aria-hidden focusable="false">
-          {mark.paths.map((path, i) => (
-            <path
-              key={i}
-              d={path.d}
-              fill="currentColor"
-              {...(path.evenOdd ? { fillRule: 'evenodd' as const, clipRule: 'evenodd' as const } : {})}
-            />
-          ))}
-        </svg>
-      ) : icon ? (
-        <span aria-hidden className={icon} />
-      ) : (
-        // One em (`xs`) sits inside a labelled row (a nav tab): drawn, not text, so the row's text stays its own.
-        <span aria-hidden className="zg-brand-letter" data-letter={shown}>
-          {size === 'xs' ? null : shown}
-        </span>
-      )}
-    </span>
-  );
-}

package/src/components/Breadcrumb.tsx

@@ -1,105 +0,0 @@
-/**
- * `gui › src › FilesTab.tsx`: folders are clickable (reveal in tree), the
- * file name is emphasised. A long path truncates from the left so the name
- * stays, under a fade that says there is more.
- */
-import { useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
-
-import { useLabels } from '../labels';
-
-const CRUMB =
-  'h-5 px-1 -mx-1 rounded-zg-xs bg-transparent border-0 cursor-pointer font-sans hover:bg-[var(--zg-row-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]';
-
-// Fades the clipped left edge. Inline because it only applies while the path
-// overflows, which only layout knows.
-const FADE = 'linear-gradient(to right, transparent, black 24px)';
-
-/** Props for {@link Breadcrumb}. */
-export interface BreadcrumbProps {
-  /** Slash-separated file path, for example `src/FilesTab.tsx`. */
-  path: string;
-  /** Called with the folder path up to the clicked crumb (`src`, `src/sub`). */
-  onFolder: (dir: string) => void;
-  /** Called when the file name crumb is clicked. */
-  onFile: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a file path as a row of crumbs. Each folder is a button that calls `onFolder`;
- * the last segment is the file name, emphasised, and calls `onFile`. A long path clips
- * from the left under a fade so the name stays visible. The full path is the tooltip.
- *
- * @param props - Component props.
- */
-export function Breadcrumb({ path, onFolder, onFile, className, style }: BreadcrumbProps) {
-  const labels = useLabels();
-  const parts = path.split('/');
-  const name = parts.pop() ?? path;
-  const clipRef = useRef<HTMLDivElement>(null);
-  const rowRef = useRef<HTMLDivElement>(null);
-  const [overflowing, setOverflowing] = useState(false);
-
-  // The row overflows to the left (`justify-end`), which never counts towards
-  // the clip's scrollWidth, so compare the row's own width to the clip's.
-  useLayoutEffect(() => {
-    const clip = clipRef.current;
-    const row = rowRef.current;
-    if (!clip || !row) return;
-    const measure = () => setOverflowing(row.offsetWidth > clip.clientWidth);
-    measure();
-    if (typeof ResizeObserver === 'undefined') return;
-    const ro = new ResizeObserver(measure);
-    ro.observe(clip);
-    ro.observe(row);
-    return () => ro.disconnect();
-  }, []);
-
-  return (
-    <nav
-      aria-label={labels.filePath(path)}
-      className={[
-        'min-w-0 flex-1 flex items-center text-zg-meta text-[var(--zg-text-muted)] overflow-hidden',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-      title={path}
-    >
-      {/* Shrinks to the nav when the path is long; the row inside keeps its
-          natural width and, end-aligned, spills out of the left edge. */}
-      <div
-        ref={clipRef}
-        className="min-w-0 flex justify-end overflow-hidden"
-        data-overflowing={overflowing ? '' : undefined}
-        style={overflowing ? { maskImage: FADE, WebkitMaskImage: FADE } : undefined}
-      >
-        {/* px-1 gives the crumbs' -mx-1 hover chips room inside the clip. */}
-        <div ref={rowRef} className="shrink-0 flex items-center gap-0.5 px-1">
-          {parts.map((seg, i) => {
-            const dir = parts.slice(0, i + 1).join('/');
-            return (
-              <span key={dir} className="flex items-center gap-0.5 shrink-0">
-                <button
-                  type="button"
-                  onClick={() => onFolder(dir)}
-                  className={`${CRUMB} text-inherit hover:text-[var(--zg-text)]`}
-                >
-                  {seg}
-                </button>
-                <span className="i-ph-caret-right text-zg-badge opacity-60" aria-hidden />
-              </span>
-            );
-          })}
-          <button type="button" onClick={onFile} className={`${CRUMB} text-[var(--zg-text)] shrink-0`}>
-            {name}
-          </button>
-        </div>
-      </div>
-    </nav>
-  );
-}