@2lab.ai/ui 0.0.0-stage → 0.2.0

package/dist/html-elD6Bb_u.js

@@ -0,0 +1,175 @@
+const light = { "bg": "#f7f7f7", "surface": "#ffffff", "surface-raised": "#f1f1f1", "border": "#e4e4e4", "border-focus": "#4d9de0", "text": "#18181a", "text-secondary": "#57575d", "text-tertiary": "#68686f", "accent": "#1f6dc2", "accent-hover": "#1a5ca6", "green": "#14783b", "yellow": "#a16207", "red": "#b91c1c", "purple": "#7c3aed", "orange": "#c2410c", "ib-col": "#efefef", "ib-card": "#ffffff", "ib-card-dim": "#f8f8f8", "ib-card-border": "#e3e3e3", "ib-pill": "#e2e2e2", "ib-text": "#161616", "ib-text-2": "#555558", "ib-muted": "#65656b", "ib-seg": "#ebebeb", "ib-seg-on": "#ffffff", "ib-spark": "#5b7fe0", "ib-shadow": "0 1px 2px rgba(0,0,0,0.06)", "ib-shadow-raised": "0 14px 30px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.08)", "st-wait": "#c2780a", "st-run": "#2f63e0", "st-done": "#137a3e", "st-fail": "#d43a3a", "st-fail-text": "#c02f2f" };
+const dark = { "bg": "#1c1c1f", "surface": "#232327", "surface-raised": "#2a2a2f", "border": "#34343a", "border-focus": "#4d9de0", "text": "#ededf0", "text-secondary": "#a8a8b0", "text-tertiary": "#93939b", "accent": "#4d9de0", "accent-hover": "#3b82c4", "green": "#3ecf8e", "yellow": "#f6c90e", "red": "#f26b6b", "purple": "#a78bfa", "orange": "#f97316", "ib-col": "#18181b", "ib-card": "#242428", "ib-card-dim": "#1f1f23", "ib-card-border": "#34343a", "ib-pill": "#2f2f35", "ib-text": "#f2f2f3", "ib-text-2": "#b4b4bb", "ib-muted": "#93939b", "ib-seg": "#161619", "ib-seg-on": "#2e2e33", "ib-spark": "#7b9cf0", "ib-shadow": "0 1px 2px rgba(0,0,0,0.35)", "ib-shadow-raised": "0 14px 32px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.35)", "st-wait": "#f5a524", "st-run": "#6b93f2", "st-done": "#3fb968", "st-fail": "#f26b6b", "st-fail-text": "#f26b6b" };
+const shared = { "ease": "cubic-bezier(0.2,0.8,0.2,1)", "ease-out": "cubic-bezier(0.23, 1, 0.32, 1)", "ease-in-out": "cubic-bezier(0.77, 0, 0.175, 1)", "dur-press": "160ms", "dur-expand": "240ms", "dur-move": "320ms", "dur-fade": "180ms", "radius": "10px", "font": 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", Pretendard, sans-serif', "mono": "'SF Mono', 'Fira Code', ui-monospace, Menlo, monospace" };
+const tokens = {
+  light,
+  dark,
+  shared
+};
+const LIGHT = tokens.light;
+const DARK = tokens.dark;
+const SHARED = tokens.shared;
+function hostVars(set) {
+  return Object.entries(set).map(([k, v]) => `--${k}: var(--ui-${k}, ${v});`).join(" ");
+}
+function pageVars(set) {
+  return Object.entries(set).map(([k, v]) => `--ui-${k}: ${v};`).join(" ");
+}
+const baseCss = `
+:host { ${hostVars(SHARED)} ${hostVars(LIGHT)}
+  display: block; box-sizing: border-box; color: var(--text); font-family: var(--font);
+  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; color-scheme: light; }
+:host([theme="dark"]) { ${hostVars(DARK)} color-scheme: dark; }
+@media (prefers-color-scheme: dark) { :host(:not([theme="light"])) { ${hostVars(DARK)} color-scheme: dark; } }
+:host([hidden]) { display: none; }
+*, *::before, *::after { box-sizing: border-box; }
+button, input, textarea, select { font: inherit; color: inherit; }
+button { cursor: pointer; }
+:focus { outline: none; }
+:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
+.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.mono { font-family: var(--mono); }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
+}
+`;
+const tokensCss = `/* @2lab.ai/ui design tokens */
+:root, [data-theme="light"] { ${pageVars(SHARED)} ${pageVars(LIGHT)} color-scheme: light; }
+[data-theme="dark"] { ${pageVars(DARK)} color-scheme: dark; }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ${pageVars(DARK)} color-scheme: dark; } }
+`;
+class UiElement extends HTMLElement {
+  static styles = [];
+  root;
+  content;
+  #data;
+  #queued = false;
+  #gen = 0;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+    const ctor = this.constructor;
+    const style = document.createElement("style");
+    style.textContent = [baseCss, ...ctor.styles].join("\n");
+    this.content = document.createElement("div");
+    this.content.setAttribute("part", "root");
+    this.content.className = "ui-root";
+    this.root.append(style, this.content);
+  }
+  get data() {
+    return this.#data;
+  }
+  set data(value) {
+    this.#data = value;
+    this.requestRender();
+  }
+  connectedCallback() {
+    if (Object.hasOwn(this, "data")) {
+      const early = this.data;
+      delete this.data;
+      this.data = early;
+    }
+    this.requestRender();
+  }
+  disconnectedCallback() {
+  }
+  /** Batch renders into one microtask. */
+  requestRender() {
+    if (this.#queued) return;
+    this.#queued = true;
+    const gen = this.#gen;
+    queueMicrotask(() => {
+      if (!this.#queued || gen !== this.#gen) return;
+      this.#queued = false;
+      if (this.isConnected) this.update();
+    });
+  }
+  /** Render synchronously (tests, or right before measuring). Cancels a queued render. */
+  renderNow() {
+    this.#queued = false;
+    this.#gen++;
+    this.update();
+  }
+  update() {
+    const focus = this.#focusState();
+    this.content.innerHTML = this.render();
+    this.updated();
+    if (!focus) return;
+    const next = focus.key === void 0 ? void 0 : Array.from(this.content.querySelectorAll("[data-key]")).find(
+      (el) => el.dataset.key === focus.key
+    );
+    (next ?? this.focusFallback())?.focus({ preventScroll: true });
+  }
+  /** Where focus goes when the focused element is gone after a render (its key no longer rendered). Default: nowhere. */
+  focusFallback() {
+    return null;
+  }
+  #focusState() {
+    try {
+      const active = this.root.activeElement;
+      return active && this.content.contains(active) ? { key: active.dataset?.key } : void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  /** Hook after each render (wire listeners on fresh nodes, start timers). */
+  updated() {
+  }
+  /** Dispatch a bubbling, composed, cancelable event. Returns false when a listener called preventDefault(). */
+  emit(name, detail) {
+    return this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true }));
+  }
+  /** Query inside the shadow root. */
+  $(selector) {
+    return this.root.querySelector(selector);
+  }
+  $$(selector) {
+    return Array.from(this.root.querySelectorAll(selector));
+  }
+}
+function define(tag, ctor) {
+  if (typeof customElements !== "undefined" && !customElements.get(tag)) customElements.define(tag, ctor);
+}
+function prefersReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function esc(value) {
+  return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escAttr(value) {
+  return esc(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+const SAFE_SCHEMES = /^(https?:|mailto:)/i;
+function safeHref(url) {
+  const s = String(url ?? "").trim();
+  return SAFE_SCHEMES.test(s) ? escAttr(s) : "#";
+}
+function cls(...names) {
+  return names.filter(Boolean).join(" ");
+}
+function attrs(map) {
+  let out = "";
+  for (const [k, v] of Object.entries(map)) {
+    if (v === false || v === null || v === void 0) continue;
+    out += v === true ? ` ${k}` : ` ${k}="${escAttr(v)}"`;
+  }
+  return out;
+}
+export {
+  DARK as D,
+  LIGHT as L,
+  SHARED as S,
+  UiElement as U,
+  attrs as a,
+  baseCss as b,
+  cls as c,
+  define as d,
+  esc as e,
+  escAttr as f,
+  prefersReducedMotion as p,
+  safeHref as s,
+  tokensCss as t
+};
+//# sourceMappingURL=html-elD6Bb_u.js.map

package/dist/html-elD6Bb_u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-elD6Bb_u.js","sources":["../src/core/tokens.ts","../src/core/element.ts","../src/core/html.ts"],"sourcesContent":["import tokens from './tokens.json';\n\n/**\n * Design tokens. Inside every component's shadow root the dashboard names (`--text`, `--surface`, `--st-run` …)\n * are defined on `:host` and read the public `--ui-*` property first, so a page themes every component by\n * setting `--ui-text` etc. (or loading `@2lab.ai/ui/tokens.css`). Without any page tokens a component follows\n * `prefers-color-scheme`, and the `theme=\"light|dark\"` attribute pins it.\n */\nexport type TokenSet = Record<string, string>;\nexport const LIGHT: TokenSet = tokens.light;\nexport const DARK: TokenSet = tokens.dark;\nexport const SHARED: TokenSet = tokens.shared;\n\nfunction hostVars(set: TokenSet): string {\n  return Object.entries(set)\n    .map(([k, v]) => `--${k}: var(--ui-${k}, ${v});`)\n    .join(' ');\n}\n\nfunction pageVars(set: TokenSet): string {\n  return Object.entries(set)\n    .map(([k, v]) => `--ui-${k}: ${v};`)\n    .join(' ');\n}\n\n/** Shared stylesheet prepended to every component's shadow root. */\nexport const baseCss = `\n:host { ${hostVars(SHARED)} ${hostVars(LIGHT)}\n  display: block; box-sizing: border-box; color: var(--text); font-family: var(--font);\n  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; color-scheme: light; }\n:host([theme=\"dark\"]) { ${hostVars(DARK)} color-scheme: dark; }\n@media (prefers-color-scheme: dark) { :host(:not([theme=\"light\"])) { ${hostVars(DARK)} color-scheme: dark; } }\n:host([hidden]) { display: none; }\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, textarea, select { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\n:focus { outline: none; }\n:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }\n.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;\n  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\n.mono { font-family: var(--mono); }\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }\n}\n`;\n\n/** Optional page-level tokens (`@2lab.ai/ui/tokens.css`): `data-theme=\"dark|light\"` on any ancestor switches. */\nexport const tokensCss = `/* @2lab.ai/ui design tokens */\n:root, [data-theme=\"light\"] { ${pageVars(SHARED)} ${pageVars(LIGHT)} color-scheme: light; }\n[data-theme=\"dark\"] { ${pageVars(DARK)} color-scheme: dark; }\n@media (prefers-color-scheme: dark) { :root:not([data-theme=\"light\"]) { ${pageVars(DARK)} color-scheme: dark; } }\n`;\n","import { baseCss } from './tokens';\n\n/**\n * Base class for every @2lab.ai/ui component.\n *\n * - Open shadow root with `baseCss` + the subclass's `static styles`.\n * - Data in, events out: set `el.data = {...}` (or the component's own properties) → one batched render;\n *   user intent leaves as a bubbling, composed `CustomEvent` (`ui-*`) that the host app handles.\n * - `render()` returns an HTML string; every dynamic value must go through `esc` / `escAttr` / `safeHref`.\n * - Focus survives a re-render when the focused element carries `data-key` (restored to the same key).\n * - Subclasses that tick (timers) should update text nodes in place instead of re-rendering.\n */\nexport abstract class UiElement<D = unknown> extends HTMLElement {\n  static styles: string[] = [];\n\n  protected readonly root: ShadowRoot;\n  protected readonly content: HTMLElement;\n  #data: D | undefined;\n  #queued = false;\n  #gen = 0;\n\n  constructor() {\n    super();\n    this.root = this.attachShadow({ mode: 'open' });\n    const ctor = this.constructor as typeof UiElement;\n    const style = document.createElement('style');\n    style.textContent = [baseCss, ...ctor.styles].join('\\n');\n    this.content = document.createElement('div');\n    this.content.setAttribute('part', 'root');\n    this.content.className = 'ui-root';\n    this.root.append(style, this.content);\n  }\n\n  get data(): D | undefined {\n    return this.#data;\n  }\n\n  set data(value: D | undefined) {\n    this.#data = value;\n    this.requestRender();\n  }\n\n  connectedCallback(): void {\n    // `data` set before this element was defined (its module loaded after the host's script ran) is an own\n    // property that shadows the accessor: move it through the setter. Here, not in the constructor — a subclass\n    // setter may use private fields that only exist once construction is done.\n    if (Object.hasOwn(this, 'data')) {\n      const early = (this as { data?: D }).data;\n      delete (this as { data?: D }).data;\n      this.data = early;\n    }\n    this.requestRender();\n  }\n\n  disconnectedCallback(): void {}\n\n  /** Batch renders into one microtask. */\n  requestRender(): void {\n    if (this.#queued) return;\n    this.#queued = true;\n    const gen = this.#gen;\n    queueMicrotask(() => {\n      if (!this.#queued || gen !== this.#gen) return;\n      this.#queued = false;\n      if (this.isConnected) this.update();\n    });\n  }\n\n  /** Render synchronously (tests, or right before measuring). Cancels a queued render. */\n  renderNow(): void {\n    this.#queued = false;\n    this.#gen++;\n    this.update();\n  }\n\n  protected update(): void {\n    const focus = this.#focusState();\n    this.content.innerHTML = this.render();\n    // After updated(): a subclass may unhide or move what was focused there (a display:none element takes no focus).\n    this.updated();\n    if (!focus) return;\n    // Compare dataset values instead of building a selector: keys may hold any characters.\n    const next =\n      focus.key === undefined\n        ? undefined\n        : Array.from(this.content.querySelectorAll<HTMLElement>('[data-key]')).find(\n            (el) => el.dataset.key === focus.key,\n          );\n    (next ?? this.focusFallback())?.focus({ preventScroll: true });\n  }\n\n  /** Where focus goes when the focused element is gone after a render (its key no longer rendered). Default: nowhere. */\n  protected focusFallback(): HTMLElement | null {\n    return null;\n  }\n\n  #focusState(): { key: string | undefined } | undefined {\n    try {\n      const active = this.root.activeElement as HTMLElement | null;\n      return active && this.content.contains(active) ? { key: active.dataset?.key } : undefined;\n    } catch {\n      return undefined;\n    }\n  }\n\n  /** The component's markup. */\n  protected abstract render(): string;\n\n  /** Hook after each render (wire listeners on fresh nodes, start timers). */\n  protected updated(): void {}\n\n  /** Dispatch a bubbling, composed, cancelable event. Returns false when a listener called preventDefault(). */\n  protected emit<T>(name: string, detail: T): boolean {\n    return this.dispatchEvent(new CustomEvent<T>(name, { detail, bubbles: true, composed: true, cancelable: true }));\n  }\n\n  /** Query inside the shadow root. */\n  protected $<E extends Element = HTMLElement>(selector: string): E | null {\n    return this.root.querySelector<E>(selector);\n  }\n\n  protected $$<E extends Element = HTMLElement>(selector: string): E[] {\n    return Array.from(this.root.querySelectorAll<E>(selector));\n  }\n}\n\n/** Register a custom element once (safe to import twice). */\nexport function define(tag: string, ctor: CustomElementConstructor): void {\n  if (typeof customElements !== 'undefined' && !customElements.get(tag)) customElements.define(tag, ctor);\n}\n\n/** True when the user asked for less motion. */\nexport function prefersReducedMotion(): boolean {\n  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/** HTML-escape text for element content. Every model-, user- or tool-written string goes through this. */\nexport function esc(value: unknown): string {\n  return String(value ?? '')\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;');\n}\n\n/** Escape for a double-quoted attribute value. */\nexport function escAttr(value: unknown): string {\n  return esc(value).replace(/\"/g, '&quot;').replace(/'/g, '&#39;');\n}\n\nconst SAFE_SCHEMES = /^(https?:|mailto:)/i;\n\n/** A link target that cannot run script: http(s)/mailto only, otherwise `#`. */\nexport function safeHref(url: unknown): string {\n  const s = String(url ?? '').trim();\n  return SAFE_SCHEMES.test(s) ? escAttr(s) : '#';\n}\n\n/** Join class names, skipping falsy entries. */\nexport function cls(...names: Array<string | false | null | undefined>): string {\n  return names.filter(Boolean).join(' ');\n}\n\n/** `key=\"value\"` pairs for truthy values, escaped. `true` renders a bare boolean attribute. */\nexport function attrs(map: Record<string, string | number | boolean | null | undefined>): string {\n  let out = '';\n  for (const [k, v] of Object.entries(map)) {\n    if (v === false || v === null || v === undefined) continue;\n    out += v === true ? ` ${k}` : ` ${k}=\"${escAttr(v)}\"`;\n  }\n  return out;\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @2lab.ai/ui — agent UI Web Components. Importing this module registers every element.
+ * Import a single component with `@2lab.ai/ui/<slug>` to register only that one.
+ */
+export * from './components/agent-inbox/index.js';
+export * from './components/agent-queue/index.js';
+export * from './components/agent-run/index.js';
+export * from './components/ai-answer/index.js';
+export * from './components/context-window/index.js';
+export * from './components/memory-panel/index.js';
+export * from './components/model-picker/index.js';
+export * from './components/tool-call-card/index.js';
+export { define, prefersReducedMotion, UiElement } from './core/element.js';
+export { clamp, fmtAgo, fmtClock, fmtDuration, fmtInt, fmtTokens, fmtUsd } from './core/format.js';
+export { attrs, cls, esc, escAttr, safeHref } from './core/html.js';
+export { baseCss, DARK, LIGHT, SHARED, tokensCss } from './core/tokens.js';

package/dist/index.js

@@ -0,0 +1,129 @@
+import { ANNOUNCE_MS, BOARD_HOLD_MS, UiAgentInbox, agentDots, artifactKind, boardCounts, columnsByStatus, holdLanes, placeHolds, statusOf, statusTone } from "./agent-inbox.js";
+import { LOW_PCT, UiAgentQueue, accountState, advanceProvider, axisPos, capacityNews, dayRuns, emptyReturnAt, firstReturn, fmtCount, fmtPct, laneNews, nextRefill, niceMax, normalize, orderJobs, plain, poolState, runBins, runKind, scheduleLabel, timeText, timelineMarks, toMs, upNext } from "./agent-queue.js";
+import { UiAgentRun, runApprovalFields, runChoiceOrder, runDomKey, runFieldText, runFoldedSteps, runNeedsCount, runPlanPhase, runQuestionKey, runTimeOfDay } from "./agent-run.js";
+import { UiAiAnswer, answerCopyText, answerLinkInfo, answerLinkKey, answerLinkify, answerMarkdown, answerTookLabel, renderAnswer } from "./ai-answer.js";
+import { CELLS, UiContextWindow, cellMap, contextLevel, contextParts, markIndex } from "./context-window.js";
+import { FOLD_MS, UNDO_MS, UiMemoryPanel, entryKeys, entryMatches, highlight, isSameEdit, shortText, storeUsed, usageAfterAdd, usageLevel } from "./memory-panel.js";
+import { MODEL_EFFORT_LEVELS, UiModelPicker, anchorMoved, anchorSpot, fmtModelPrice, fmtModelTokens, meterSegments, modelEffortLabel, modelEffortLevels, modelGlyph, modelMeters, placeModelMenu, validModelPrice } from "./model-picker.js";
+import { TOOL_ICONS, UiToolCallCard, UiToolCallGroup, callKeys, formatToolClock, formatToolMs, groupStats, highlightJson, normStatus, toCodeText, toolCallStrings, toolIcon } from "./tool-call-card.js";
+import { D, L, S, U, a, b, c, d, e, f, p, s, t } from "./html-elD6Bb_u.js";
+import { c as c2, f as f2, a as a2, b as b2, d as d2, e as e2, g } from "./format-BBGWXPzk.js";
+export {
+  ANNOUNCE_MS,
+  BOARD_HOLD_MS,
+  CELLS,
+  D as DARK,
+  FOLD_MS,
+  L as LIGHT,
+  LOW_PCT,
+  MODEL_EFFORT_LEVELS,
+  S as SHARED,
+  TOOL_ICONS,
+  UNDO_MS,
+  UiAgentInbox,
+  UiAgentQueue,
+  UiAgentRun,
+  UiAiAnswer,
+  UiContextWindow,
+  U as UiElement,
+  UiMemoryPanel,
+  UiModelPicker,
+  UiToolCallCard,
+  UiToolCallGroup,
+  accountState,
+  advanceProvider,
+  agentDots,
+  anchorMoved,
+  anchorSpot,
+  answerCopyText,
+  answerLinkInfo,
+  answerLinkKey,
+  answerLinkify,
+  answerMarkdown,
+  answerTookLabel,
+  artifactKind,
+  a as attrs,
+  axisPos,
+  b as baseCss,
+  boardCounts,
+  callKeys,
+  capacityNews,
+  cellMap,
+  c2 as clamp,
+  c as cls,
+  columnsByStatus,
+  contextLevel,
+  contextParts,
+  dayRuns,
+  d as define,
+  emptyReturnAt,
+  entryKeys,
+  entryMatches,
+  e as esc,
+  f as escAttr,
+  firstReturn,
+  f2 as fmtAgo,
+  a2 as fmtClock,
+  fmtCount,
+  b2 as fmtDuration,
+  d2 as fmtInt,
+  fmtModelPrice,
+  fmtModelTokens,
+  fmtPct,
+  e2 as fmtTokens,
+  g as fmtUsd,
+  formatToolClock,
+  formatToolMs,
+  groupStats,
+  highlight,
+  highlightJson,
+  holdLanes,
+  isSameEdit,
+  laneNews,
+  markIndex,
+  meterSegments,
+  modelEffortLabel,
+  modelEffortLevels,
+  modelGlyph,
+  modelMeters,
+  nextRefill,
+  niceMax,
+  normStatus,
+  normalize,
+  orderJobs,
+  placeHolds,
+  placeModelMenu,
+  plain,
+  poolState,
+  p as prefersReducedMotion,
+  renderAnswer,
+  runApprovalFields,
+  runBins,
+  runChoiceOrder,
+  runDomKey,
+  runFieldText,
+  runFoldedSteps,
+  runKind,
+  runNeedsCount,
+  runPlanPhase,
+  runQuestionKey,
+  runTimeOfDay,
+  s as safeHref,
+  scheduleLabel,
+  shortText,
+  statusOf,
+  statusTone,
+  storeUsed,
+  timeText,
+  timelineMarks,
+  toCodeText,
+  toMs,
+  t as tokensCss,
+  toolCallStrings,
+  toolIcon,
+  upNext,
+  usageAfterAdd,
+  usageLevel,
+  validModelPrice
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}