@lapismd/design-core 0.1.0

package/src/shared/ai/tool-calls/ToolCalls.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import CircleAlertIcon from "@lucide/svelte/icons/circle-alert";
+  import WrenchIcon from "@lucide/svelte/icons/wrench";
+  import * as Collapsible from "@lapismd/design-core/shadcn/collapsible";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import { Spinner } from "@lapismd/design-core/shadcn/spinner";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { ToolCallItem, ToolCallStatus } from "../types.js";
+  import "../chat.css";
+
+  let {
+    ref = $bindable(null),
+    calls,
+    label = "Tool calls",
+    defaultExpanded = false,
+    expanded = $bindable(defaultExpanded),
+    onExpandedChange = () => {},
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    calls: ToolCallItem[];
+    label?: string;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+  } = $props();
+
+  let detailOpen = $state<Record<string, boolean>>({});
+  const hasMultipleCalls = $derived(calls.length > 1);
+  const latestCall = $derived(calls.at(-1));
+  const resolvedLabel = $derived(
+    label === "Tool calls" ? `${calls.length} tool calls` : label,
+  );
+
+  function callId(call: ToolCallItem, index: number): string {
+    return call.id ?? `${call.name}-${index}`;
+  }
+
+  function statusLabel(status: ToolCallStatus = "pending"): string {
+    return status === "pending"
+      ? "Pending"
+      : status === "running"
+        ? "Running"
+        : status === "complete"
+          ? "Complete"
+          : "Error";
+  }
+
+  function setExpanded(open: boolean): void {
+    expanded = open;
+    onExpandedChange(open);
+  }
+</script>
+
+{#snippet callStatus(status: ToolCallStatus)}
+  <span data-ui-part="call-status" data-status={status}>
+    {#if status === "running" || status === "pending"}
+      <Spinner />
+    {:else if status === "complete"}
+      <span data-ui-part="status-circle" aria-hidden="true"></span>
+      <CheckIcon aria-hidden="true" />
+    {:else}
+      <span data-ui-part="status-circle" aria-hidden="true"></span>
+      <CircleAlertIcon aria-hidden="true" />
+    {/if}
+    <span class="sr-only">{statusLabel(status)}</span>
+  </span>
+{/snippet}
+
+{#snippet callRow(call: ToolCallItem, index: number)}
+  {@const id = callId(call, index)}
+  {@const status = call.status ?? "pending"}
+  <li data-ui-part="call" data-status={status}>
+    <Collapsible.Root
+      open={detailOpen[id] ?? false}
+      onOpenChange={(open) => {
+        detailOpen[id] = open;
+      }}
+    >
+      <Collapsible.Trigger
+        data-ai-chat-part="call-trigger"
+        disabled={!call.detail}
+        aria-label={call.detail
+          ? `${detailOpen[id] ? "Hide" : "Show"} details for ${call.name}`
+          : undefined}
+      >
+        {@render callStatus(status)}
+        <span data-ui-part="call-name">{call.name}</span>
+        {#if call.node}
+          <Badge variant="outline">{call.node}</Badge>
+        {/if}
+        {#if call.target}
+          <span data-ui-part="call-target">{call.target}</span>
+        {/if}
+        {#if call.additions != null || call.deletions != null}
+          <span data-ui-part="diff-stats">
+            {#if call.additions != null}
+              <span data-kind="addition">+{call.additions}</span>
+            {/if}
+            {#if call.deletions != null}
+              <span data-kind="deletion">−{call.deletions}</span>
+            {/if}
+          </span>
+        {/if}
+        {#if call.stats}
+          <span data-ui-part="call-stats">{@render call.stats(call)}</span>
+        {/if}
+        {#if call.duration && status === "complete"}
+          <span data-ui-part="duration">{call.duration}</span>
+        {/if}
+        {#if call.detail}
+          <ChevronRightIcon
+            data-ui-part="detail-chevron"
+            data-direction={detailOpen[id] ? "down" : "right"}
+            style={`rotate: ${detailOpen[id] ? "90deg" : "0deg"}`}
+            aria-hidden="true"
+          />
+        {/if}
+      </Collapsible.Trigger>
+      {#if call.errorMessage}
+        <p data-ui-part="error" role="alert">{call.errorMessage}</p>
+      {/if}
+      {#if call.detail}
+        <Collapsible.Content data-ai-chat-part="call-detail">
+          {@render call.detail(call)}
+        </Collapsible.Content>
+      {/if}
+    </Collapsible.Root>
+  </li>
+{/snippet}
+
+{#if calls.length > 0}
+  <div
+    bind:this={ref}
+    {...restProps}
+    data-ui-component="ai-chat-tool-calls"
+    data-ui-part="root"
+    data-expanded={expanded}
+  >
+    {#if !hasMultipleCalls}
+      <ul data-ui-part="call-list" data-single-call>
+        {@render callRow(calls[0], 0)}
+      </ul>
+    {:else}
+      <Collapsible.Root open={expanded} onOpenChange={setExpanded}>
+        <Collapsible.Trigger
+          data-ai-chat-part="group-trigger"
+          aria-label={`${expanded ? "Collapse" : "Expand"} ${resolvedLabel}`}
+        >
+          {#if expanded}
+            <span data-ui-part="group-icon">
+              <WrenchIcon aria-hidden="true" />
+            </span>
+            <span data-ui-part="group-label">{resolvedLabel}</span>
+          {:else if latestCall}
+            {@render callStatus(latestCall.status ?? "pending")}
+            <span data-ui-part="call-name">{latestCall.name}</span>
+            {#if latestCall.target}
+              <span data-ui-part="call-target">{latestCall.target}</span>
+            {/if}
+            <span data-ui-part="call-count">
+              <WrenchIcon aria-hidden="true" />
+              {calls.length}
+            </span>
+          {/if}
+          <ChevronRightIcon
+            data-ui-part="chevron"
+            data-direction={expanded ? "down" : "right"}
+            style={`rotate: ${expanded ? "90deg" : "0deg"}`}
+            aria-hidden="true"
+          />
+        </Collapsible.Trigger>
+        <Collapsible.Content data-ai-chat-part="group-content">
+          <ul data-ui-part="call-list">
+            {#each calls as call, index (callId(call, index))}
+              {@render callRow(call, index)}
+            {/each}
+          </ul>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    {/if}
+  </div>
+{/if}

package/src/shared/ai/tool-calls/index.ts

@@ -0,0 +1 @@
+export { default as ToolCalls } from "./ToolCalls.svelte";

package/src/shared/ai/trigger-menu.ts

@@ -0,0 +1,154 @@
+import type { ComposerTrigger, ComposerTriggerItem } from "./types.js";
+
+export type TriggerSearchState = {
+  query: string;
+  items: ComposerTriggerItem[];
+  loading: boolean;
+  error: Error | null;
+};
+
+export type TriggerSearchController = {
+  search: (
+    trigger: ComposerTrigger,
+    query: string,
+    onState: (state: TriggerSearchState) => void,
+  ) => void;
+  cancel: () => void;
+};
+
+export type ComposerTriggerMenuPlacement = "above" | "below";
+
+export type ComposerTriggerMenuBox = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+function isUsableBox(
+  box: ComposerTriggerMenuBox | null | undefined,
+): box is ComposerTriggerMenuBox {
+  return Boolean(box && (box.left || box.top || box.right || box.bottom));
+}
+
+const CLIPPING_OVERFLOW = new Set(["hidden", "auto", "scroll", "clip"]);
+
+export function nearestClipBottom(
+  element: HTMLElement | null | undefined,
+  viewportHeight: number,
+): number {
+  let bottom = viewportHeight;
+  let current = element?.parentElement ?? null;
+  while (current) {
+    const overflowY = current.ownerDocument.defaultView
+      ?.getComputedStyle(current)
+      .overflowY;
+    if (overflowY && CLIPPING_OVERFLOW.has(overflowY)) {
+      bottom = Math.min(bottom, current.getBoundingClientRect().bottom);
+    }
+    current = current.parentElement;
+  }
+  return bottom;
+}
+
+export function positionComposerTriggerMenu(input: {
+  caret: ComposerTriggerMenuBox | null | undefined;
+  editable: ComposerTriggerMenuBox;
+  root: ComposerTriggerMenuBox;
+  viewportHeight: number;
+  clipBottom?: number;
+  gap?: number;
+  estimatedMenuHeight?: number;
+}): {
+  left: number;
+  top: number;
+  placement: ComposerTriggerMenuPlacement;
+} {
+  const gap = input.gap ?? 6;
+  const estimatedMenuHeight = input.estimatedMenuHeight ?? 288;
+  const caret = isUsableBox(input.caret) ? input.caret : input.editable;
+  const availableBottom = Math.min(
+    input.viewportHeight,
+    input.clipBottom ?? input.viewportHeight,
+  );
+  const spaceBelow = availableBottom - caret.bottom;
+  const spaceAbove = caret.top;
+  const placement: ComposerTriggerMenuPlacement =
+    spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow
+      ? "above"
+      : "below";
+  return {
+    left: caret.left - input.root.left,
+    top:
+      placement === "above"
+        ? caret.top - input.root.top
+        : caret.bottom - input.root.top + gap,
+    placement,
+  };
+}
+
+export function findActiveComposerTrigger(
+  textBeforeCaret: string,
+  triggers: ComposerTrigger[],
+): { trigger: ComposerTrigger; query: string; start: number } | undefined {
+  for (let index = textBeforeCaret.length - 1; index >= 0; index -= 1) {
+    const character = textBeforeCaret[index];
+    if (character === " " || character === "\n") return;
+    const trigger = triggers.find((item) => item.character === character);
+    if (!trigger) continue;
+    const previous = textBeforeCaret[index - 1];
+    if (index === 0 || previous === " " || previous === "\n") {
+      return {
+        trigger,
+        query: textBeforeCaret.slice(index + 1),
+        start: index,
+      };
+    }
+  }
+}
+
+export function createTriggerSearch(debounceMs = 150): TriggerSearchController {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  let abortController: AbortController | undefined;
+  let revision = 0;
+
+  function cancel(): void {
+    if (timeout) clearTimeout(timeout);
+    timeout = undefined;
+    abortController?.abort();
+    abortController = undefined;
+    revision += 1;
+  }
+
+  return {
+    search(trigger, query, onState) {
+      cancel();
+      const currentRevision = revision;
+      onState({ query, items: [], loading: true, error: null });
+      timeout = setTimeout(async () => {
+        abortController = new AbortController();
+        try {
+          const items = await trigger.searchSource(
+            query,
+            abortController.signal,
+          );
+          if (abortController.signal.aborted || currentRevision !== revision) {
+            return;
+          }
+          onState({ query, items, loading: false, error: null });
+        } catch (error) {
+          if (abortController.signal.aborted || currentRevision !== revision) {
+            return;
+          }
+          onState({
+            query,
+            items: [],
+            loading: false,
+            error: error instanceof Error ? error : new Error(String(error)),
+          });
+        }
+      }, debounceMs);
+    },
+    cancel,
+  };
+}

package/src/shared/ai/types.ts

@@ -0,0 +1,144 @@
+import type { Snippet } from "svelte";
+
+export type Density = "compact" | "balanced" | "spacious";
+export type MessageSender = "user" | "assistant" | "system";
+export type MessageBubbleVariant = "filled" | "ghost";
+export type MessageBubbleGroup = "first" | "middle" | "last";
+export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "error";
+
+export type ComposerStatus = {
+  type: "error" | "warning";
+  message?: string;
+};
+
+export type ComposerTokenBadge = {
+  value: string;
+  label: string;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+};
+
+export type ComposerTokenCustom = {
+  value: string;
+  label?: string;
+  render: Snippet<[ComposerTokenCustom]>;
+};
+
+export type ComposerToken = ComposerTokenBadge | ComposerTokenCustom;
+
+export type ComposerTriggerItem = {
+  id: string;
+  label: string;
+  value?: string;
+  description?: string;
+  keywords?: string[];
+  submitOnSelect?: boolean;
+};
+
+export type ComposerSearchSource = (
+  query: string,
+  signal: AbortSignal,
+) => ComposerTriggerItem[] | Promise<ComposerTriggerItem[]>;
+
+export type ComposerTrigger = {
+  character: string;
+  searchSource: ComposerSearchSource;
+  onSelect: (item: ComposerTriggerItem) => string | ComposerToken;
+  deserialize?: (value: string) => ComposerToken | null;
+  emptySearchResultsText?: string;
+  menuLabel?: string;
+};
+
+export type ComposerInputHandle = {
+  focus: () => void;
+  getValue: () => string;
+  insertText: (text: string) => void;
+  insertToken: (token: ComposerToken) => string | undefined;
+  expandToken: (id: string) => void;
+};
+
+export type ToolCallStatus = "pending" | "running" | "complete" | "error";
+
+export type ToolCallItem = {
+  id?: string;
+  name: string;
+  status?: ToolCallStatus;
+  target?: string;
+  duration?: string;
+  node?: string;
+  additions?: number;
+  deletions?: number;
+  stats?: Snippet<[ToolCallItem]>;
+  errorMessage?: string;
+  data?: unknown;
+  detail?: Snippet<[ToolCallItem]>;
+};
+
+export type SpeechRecognitionError = {
+  error: string;
+  message?: string;
+};
+
+export type SpeechRecognitionResultEvent = {
+  resultIndex: number;
+  results: ArrayLike<{
+    isFinal: boolean;
+    0: { transcript: string };
+  }>;
+};
+
+export type SpeechRecognitionInstance = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start: () => void;
+  stop: () => void;
+  abort: () => void;
+  onstart: (() => void) | null;
+  onend: (() => void) | null;
+  onresult: ((event: SpeechRecognitionResultEvent) => void) | null;
+  onspeechstart: (() => void) | null;
+  onspeechend: (() => void) | null;
+  onerror: ((event: SpeechRecognitionError) => void) | null;
+  onnomatch: (() => void) | null;
+};
+
+export type SpeechRecognitionConstructor = new () => SpeechRecognitionInstance;
+
+export type SpeechRecognitionOptions = {
+  lang?: string;
+  continuous?: boolean;
+  interimResults?: boolean;
+  transformTranscript?: (text: string) => string;
+  onTranscript?: (transcript: string, isFinal: boolean) => void;
+  onResult?: (transcript: string) => void;
+  onError?: (error: SpeechRecognitionError) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+  recognitionConstructor?: SpeechRecognitionConstructor | null;
+  getUserMedia?:
+    | ((constraints: MediaStreamConstraints) => Promise<MediaStream>)
+    | null;
+  createAudioContext?: (() => AudioContext) | null;
+  requestAnimationFrame?: typeof globalThis.requestAnimationFrame;
+  cancelAnimationFrame?: typeof globalThis.cancelAnimationFrame;
+};
+
+export type SpeechRecognitionController = {
+  readonly isSupported: boolean;
+  readonly isListening: boolean;
+  readonly isSpeaking: boolean;
+  readonly volume: number;
+  readonly bands: readonly number[];
+  readonly rawBands: readonly number[];
+  readonly interimTranscript: string;
+  start: () => Promise<void>;
+  stop: () => void;
+  abort: () => void;
+  toggle: () => Promise<void>;
+  cleanup: () => void;
+};
+
+export type DictationOptions = SpeechRecognitionOptions & {
+  input?: ComposerInputHandle | null;
+  transformFinalTranscript?: (transcript: string) => string;
+};

package/src/shared/diff/core/file-tree.ts

@@ -0,0 +1,83 @@
+export interface FileTreeNode {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  children: FileTreeNode[];
+}
+
+export function getFilePathName(path: string): string {
+  return path.split("/").filter(Boolean).at(-1) ?? path;
+}
+
+export function getFileDirectory(path: string): string {
+  return path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
+}
+
+export function buildFileTree(paths: string[]): FileTreeNode[] {
+  const root: FileTreeNode[] = [];
+
+  for (const rawPath of paths) {
+    const parts = rawPath.split("/").filter(Boolean);
+    let currentLevel = root;
+    let currentPath = "";
+
+    for (const [index, part] of parts.entries()) {
+      currentPath = currentPath ? `${currentPath}/${part}` : part;
+      const isLeaf = index === parts.length - 1;
+
+      let node = currentLevel.find((candidate) => candidate.name === part);
+      if (!node) {
+        node = {
+          name: part,
+          path: currentPath,
+          type: isLeaf ? "file" : "directory",
+          children: [],
+        };
+        currentLevel.push(node);
+      }
+
+      if (!isLeaf) {
+        currentLevel = node.children;
+      }
+    }
+  }
+
+  function sortNodes(nodes: FileTreeNode[]): FileTreeNode[] {
+    return nodes
+      .map((node) => ({ ...node, children: sortNodes(node.children) }))
+      .sort((left, right) => {
+        if (left.type === right.type) {
+          return left.name.localeCompare(right.name);
+        }
+        return left.type === "directory" ? -1 : 1;
+      });
+  }
+
+  return sortNodes(root);
+}
+
+export function buildPackageFileTree(paths: string[]): FileTreeNode[] {
+  function compactNode(node: FileTreeNode): FileTreeNode {
+    let current: FileTreeNode = {
+      ...node,
+      children: node.children.map(compactNode),
+    };
+
+    while (
+      current.type === "directory" &&
+      current.children.length === 1 &&
+      current.children[0]?.type === "directory"
+    ) {
+      const child = current.children[0];
+      current = {
+        ...child,
+        name: `${current.name}/${child.name}`,
+        path: child.path,
+      };
+    }
+
+    return current;
+  }
+
+  return buildFileTree(paths).map(compactNode);
+}

package/src/shared/diff/core/index.ts

@@ -0,0 +1,58 @@
+export {
+  buildFileTree,
+  buildPackageFileTree,
+  getFileDirectory,
+  getFilePathName,
+  type FileTreeNode,
+} from "./file-tree.js";
+export {
+  CONTEXT_RADIUS,
+  INCREMENTAL_EXPAND_STEP,
+  INCREMENTAL_EXPAND_THRESHOLD,
+  MIN_COLLAPSE_LINES,
+  buildDisplayItems,
+  buildUnifiedDiffRows,
+  isBinaryFilePath,
+  lineNumberForSplitSide,
+  pairRowsForSplit,
+  parsePatchToRows,
+  truncatePathMiddle,
+  type CollapsedContextBlock,
+  type DiffDisplayItem,
+  type ExpandedBlockState,
+  type InlineDiffSegment,
+  type SplitDiffRowPair,
+  type UnifiedDiffRow,
+} from "./unified-diff.js";
+export {
+  DEFAULT_OPTIONS,
+  applyMergeAction,
+  assembleOneWayMerge,
+  assembleThreeWayMerge,
+  createMergeRenderModel,
+  deleteMergedRenderComponentFromCenter,
+  diffSequences,
+  mergeRenderComponentIntoCenter,
+  navigationIndexForLine,
+  pendingMergeNavigationTargets,
+  serializeMergeCenter,
+  splitLines,
+  type DiffOp,
+  type LineDiffAlgorithm,
+  type MergeAction,
+  type MergeBlock,
+  type MergeBlockKind,
+  type MergeLine,
+  type MergeLinePart,
+  type MergeMode,
+  type MergeModel,
+  type MergeNavigationTarget,
+  type MergeOptions,
+  type MergeRenderModel,
+  type MergeSide,
+  type RenderAction,
+  type RenderActionKind,
+  type RenderComponent,
+  type RenderConnection,
+  type RenderVisualKind,
+} from "./merge/index.js";

package/src/shared/diff/core/merge/ATTRIBUTION.mergeweave.md

@@ -0,0 +1,12 @@
+# MergeWeave Attribution
+
+This package ports and adapts merge editor concepts from MergeWeave / `mismerge`.
+
+The upstream project is licensed under the MIT License.
+
+Copyright (c) Davide Basso
+
+The code in Design Core `src/shared/diff/core/merge` is a framework-free
+TypeScript port of `@changeyard/merge`, itself adapted from MergeWeave / `mismerge`.
+Svelte components, custom elements, DOM query coupling, and upstream styles are
+not included.