@elabs-ai/components-editor 4.0.0

package/src/calc-block/calc-editor.test.ts

@@ -0,0 +1,228 @@
+/**
+ * Unit tests for the engine-neutral calc authoring helpers (#220).
+ *
+ * These are the load-bearing pure functions both editor surfaces share — fence
+ * detection, the column/position math, and hook resolution. Monaco + Milkdown can't
+ * render in jsdom, so the live decoration passes are covered by `test-storybook`;
+ * here we lock the math + the degrade-gracefully behavior.
+ */
+import { describe, expect, it } from "vitest";
+
+import {
+  calcDecorationSpecs,
+  calcInlaySpecs,
+  calcLineLayout,
+  calcTokenClassName,
+  findCalcFences,
+  identifierPrefix,
+  resolveHighlight,
+  resolveInlays,
+  resolveResults,
+} from "./calc-editor";
+import type { CalcEditorHooks, CalcSheet, CalcToken } from "./types";
+
+const doc = [
+  "# Notes", // 1
+  "", // 2
+  "```calc", // 3
+  "items = 3", // 4
+  "price = 4.50", // 5
+  "total = items * price", // 6
+  "```", // 7
+  "", // 8
+  "prose", // 9
+].join("\n");
+
+describe("findCalcFences", () => {
+  it("locates a ```calc fence with 1-based body line numbers", () => {
+    const fences = findCalcFences(doc);
+    expect(fences).toHaveLength(1);
+    expect(fences[0]).toMatchObject({
+      openLine: 3,
+      closeLine: 7,
+      bodyStartLine: 4,
+      bodyEndLine: 6,
+    });
+    expect(fences[0]?.source).toBe("items = 3\nprice = 4.50\ntotal = items * price");
+  });
+
+  it("ignores non-calc fences", () => {
+    expect(findCalcFences("```ts\nconst a = 1;\n```")).toHaveLength(0);
+    expect(findCalcFences("```\nplain\n```")).toHaveLength(0);
+  });
+
+  it("treats an unterminated trailing fence as running to EOF (mid-typing)", () => {
+    const fences = findCalcFences("```calc\na = 1\nb = 2");
+    expect(fences).toHaveLength(1);
+    expect(fences[0]?.bodyStartLine).toBe(2);
+    expect(fences[0]?.bodyEndLine).toBe(3);
+    expect(fences[0]?.source).toBe("a = 1\nb = 2");
+  });
+
+  it("tolerates ~~~ fences and trailing whitespace on the info line", () => {
+    const fences = findCalcFences("~~~calc \nx = 1\n~~~");
+    expect(fences).toHaveLength(1);
+    expect(fences[0]?.source).toBe("x = 1");
+  });
+
+  it("finds multiple fences", () => {
+    expect(findCalcFences("```calc\na=1\n```\ntext\n```calc\nb=2\n```")).toHaveLength(2);
+  });
+});
+
+describe("calcLineLayout", () => {
+  it("returns per-line text + char offset (newlines counted)", () => {
+    expect(calcLineLayout("ab\nc\n")).toEqual([
+      { text: "ab", offset: 0 },
+      { text: "c", offset: 3 },
+      { text: "", offset: 5 },
+    ]);
+  });
+});
+
+const tok = (start: number, end: number, kind: CalcToken["kind"], resolved = true): CalcToken => ({
+  start,
+  end,
+  kind,
+  resolved,
+});
+
+describe("resolveHighlight", () => {
+  it("prefers the per-line tokenize hook", () => {
+    const hooks: CalcEditorHooks = {
+      tokenize: (line) => (line ? [tok(0, line.length, "number")] : []),
+    };
+    const result = resolveHighlight(hooks, "12\n");
+    expect(result[0]).toEqual([tok(0, 2, "number")]);
+    expect(result[1]).toEqual([]);
+  });
+
+  it("falls back to evaluate's per-line tokens when tokenize is absent", () => {
+    const sheet: CalcSheet = {
+      results: [
+        { line: 1, tokens: [tok(0, 1, "var-def")] },
+        { line: 2, tokens: [tok(0, 2, "number")] },
+      ],
+    };
+    const result = resolveHighlight({ evaluate: () => sheet }, "a\n12");
+    expect(result[0]).toEqual([tok(0, 1, "var-def")]);
+    expect(result[1]).toEqual([tok(0, 2, "number")]);
+  });
+
+  it("returns empty arrays when neither hook is supplied", () => {
+    expect(resolveHighlight({}, "a\nb")).toEqual([[], []]);
+  });
+
+  it("degrades to [] when a hook throws (never blanks the editor)", () => {
+    const hooks: CalcEditorHooks = {
+      tokenize: () => {
+        throw new Error("boom");
+      },
+    };
+    expect(resolveHighlight(hooks, "x")).toEqual([[]]);
+  });
+});
+
+describe("resolveResults / resolveInlays", () => {
+  const hooks: CalcEditorHooks = {
+    evaluate: () => ({
+      results: [
+        { line: 1, tokens: [], value: { kind: "number", raw: 3, display: "3" } },
+        { line: 2, tokens: [], error: { message: "bad" } },
+        { line: 3, tokens: [] }, // no value/error → no inlay
+      ],
+    }),
+  };
+
+  it("maps results by 1-based line", () => {
+    const map = resolveResults(hooks, "a\nb\nc");
+    expect(map.get(1)?.value?.display).toBe("3");
+    expect(map.get(2)?.error?.message).toBe("bad");
+  });
+
+  it("builds inlays for value + error lines only, sorted by line", () => {
+    expect(resolveInlays(hooks, "a\nb\nc")).toEqual([
+      { lineNumber: 1, text: "= 3", isError: false },
+      { lineNumber: 2, text: "error: bad", isError: true },
+    ]);
+  });
+
+  it("returns no results when evaluate throws", () => {
+    expect(
+      resolveResults(
+        {
+          evaluate: () => {
+            throw new Error("x");
+          },
+        },
+        "a",
+      ).size,
+    ).toBe(0);
+  });
+});
+
+describe("calcTokenClassName", () => {
+  it("emits the compound base + kind class, adding unresolved for warnings", () => {
+    expect(calcTokenClassName("number", true)).toBe("brand-calc-tok brand-calc-tok--number");
+    expect(calcTokenClassName("var-def", false)).toBe(
+      "brand-calc-tok brand-calc-tok--var-def brand-calc-tok--unresolved",
+    );
+  });
+});
+
+describe("identifierPrefix", () => {
+  it("returns the identifier immediately before the column", () => {
+    expect(identifierPrefix("total = ite", 11)).toBe("ite");
+    expect(identifierPrefix("3 + ", 4)).toBe("");
+    expect(identifierPrefix("foo.bar", 7)).toBe("bar");
+  });
+});
+
+describe("calcDecorationSpecs (Monaco column math)", () => {
+  const hooks: CalcEditorHooks = {
+    tokenize: (line) => (line.startsWith("total") ? [tok(0, 5, "var-def")] : [tok(0, 2, "number")]),
+  };
+
+  it("maps 0-based token columns to 1-based Monaco columns at the right model line", () => {
+    const specs = calcDecorationSpecs(hooks, 4, ["12", "total = 1"]);
+    expect(specs).toEqual([
+      {
+        lineNumber: 4,
+        startColumn: 1,
+        endColumn: 3,
+        className: "brand-calc-tok brand-calc-tok--number",
+      },
+      {
+        lineNumber: 5,
+        startColumn: 1,
+        endColumn: 6,
+        className: "brand-calc-tok brand-calc-tok--var-def",
+      },
+    ]);
+  });
+
+  it("clamps token columns to the line length and drops empty spans", () => {
+    const over: CalcEditorHooks = { tokenize: () => [tok(0, 99, "number"), tok(2, 2, "operator")] };
+    const specs = calcDecorationSpecs(over, 1, ["abc"]);
+    expect(specs).toEqual([
+      {
+        lineNumber: 1,
+        startColumn: 1,
+        endColumn: 4,
+        className: "brand-calc-tok brand-calc-tok--number",
+      },
+    ]);
+  });
+});
+
+describe("calcInlaySpecs (Monaco inlay placement)", () => {
+  it("positions each inlay at the end-of-line column of its model line", () => {
+    const hooks: CalcEditorHooks = {
+      evaluate: () => ({
+        results: [{ line: 2, tokens: [], value: { kind: "number", raw: 7, display: "7" } }],
+      }),
+    };
+    const specs = calcInlaySpecs(hooks, 4, ["a = 1", "b = 2 + 5"]);
+    expect(specs).toEqual([{ lineNumber: 5, column: 10, text: "= 7", isError: false }]);
+  });
+});

package/src/calc-block/calc-editor.ts

@@ -0,0 +1,270 @@
+/**
+ * Shared, engine-agnostic helpers for the calc AUTHORING surfaces (#220).
+ *
+ * Both editor surfaces — the Monaco source editor and the Milkdown WYSIWYG
+ * editor — need the same things: find the ```calc fences, ask the consumer's
+ * hooks for highlight tokens + results, and turn those into decorations. The
+ * decoration *application* differs per engine (Monaco `inlineClassName` vs a
+ * ProseMirror `DecorationSet`), but the *logic* here is pure and shared, so it is
+ * unit-testable without rendering either engine (Monaco can't render in jsdom).
+ *
+ * Governing rule (D5): the library decorates, the consumer computes. Nothing here
+ * does any math — it only calls the consumer-supplied {@link CalcEditorHooks} and
+ * shapes the results. A throwing hook degrades to "no decorations" rather than
+ * blanking the editor (mirrors how `CalcBlock` never throws on a bad block).
+ */
+import type {
+  CalcContext,
+  CalcEditorHooks,
+  CalcLineResult,
+  CalcSheet,
+  CalcToken,
+  CalcTokenKind,
+} from "./types";
+
+/** The fenced-code-block info string this feature decorates. */
+export const CALC_FENCE_LANG = "calc";
+
+/** A located ```calc fence within a markdown document. Lines are 1-based. */
+export interface CalcFence {
+  /** 1-based line of the opening fence (` ```calc `). */
+  openLine: number;
+  /** 1-based line of the closing fence, or `lines + 1` when unterminated. */
+  closeLine: number;
+  /** 1-based line of the first body line (`openLine + 1`). */
+  bodyStartLine: number;
+  /** 1-based line of the last body line (`closeLine - 1`); `< bodyStartLine` if empty. */
+  bodyEndLine: number;
+  /** The fence body (body lines joined by `"\n"`). */
+  source: string;
+}
+
+const OPEN_FENCE = /^(\s*)(`{3,}|~{3,})[ \t]*calc\b[ \t]*$/i;
+
+/**
+ * Scan a markdown string for ```calc fences. Tolerant of leading indentation,
+ * `~~~` fences, and an unterminated trailing fence (treated as running to EOF) —
+ * which is the normal state while the author is still typing the block.
+ */
+export function findCalcFences(text: string): CalcFence[] {
+  const lines = text.split("\n");
+  const fences: CalcFence[] = [];
+  let i = 0;
+  while (i < lines.length) {
+    const open = OPEN_FENCE.exec(lines[i] ?? "");
+    if (!open) {
+      i++;
+      continue;
+    }
+    const run = open[2] ?? "```";
+    const marker = run[0] ?? "`";
+    const closeRe = new RegExp(`^\\s*\\${marker}{${run.length},}\\s*$`);
+    let j = i + 1;
+    while (j < lines.length && !closeRe.test(lines[j] ?? "")) j++;
+    const openLine = i + 1;
+    const closeLine = j < lines.length ? j + 1 : lines.length + 1;
+    fences.push({
+      openLine,
+      closeLine,
+      bodyStartLine: openLine + 1,
+      bodyEndLine: closeLine - 1,
+      source: lines.slice(i + 1, j).join("\n"),
+    });
+    i = j + 1;
+  }
+  return fences;
+}
+
+/** One body line's text plus its character offset from the fence-body start. */
+export interface CalcLineSpan {
+  text: string;
+  /** Character offset of this line's first char within `source` (newlines counted). */
+  offset: number;
+}
+
+/** Lay out a fence body into per-line `{ text, offset }` — used to map columns to positions. */
+export function calcLineLayout(source: string): CalcLineSpan[] {
+  const spans: CalcLineSpan[] = [];
+  let offset = 0;
+  for (const text of source.split("\n")) {
+    spans.push({ text, offset });
+    offset += text.length + 1; // + the newline
+  }
+  return spans;
+}
+
+/** Evaluate `source` to a per-line result map (1-based line → result). Never throws. */
+export function resolveResults(
+  hooks: CalcEditorHooks,
+  source: string,
+  ctx?: CalcContext,
+): Map<number, CalcLineResult> {
+  const map = new Map<number, CalcLineResult>();
+  if (!hooks.evaluate) return map;
+  let sheet: CalcSheet;
+  try {
+    sheet = hooks.evaluate(source, ctx);
+  } catch {
+    return map;
+  }
+  for (const r of sheet.results ?? []) map.set(r.line, r);
+  return map;
+}
+
+/**
+ * Resolve highlight tokens for every body line. Prefers the per-line `tokenize`
+ * hook (cheap, works mid-typing on a line that doesn't yet evaluate); falls back
+ * to `evaluate`'s per-line `tokens` so a consumer who only wrote `evaluate` still
+ * gets highlighting. Returns one `CalcToken[]` per line. Never throws.
+ */
+export function resolveHighlight(
+  hooks: CalcEditorHooks,
+  source: string,
+  ctx?: CalcContext,
+): CalcToken[][] {
+  const lines = source.split("\n");
+  if (hooks.tokenize) {
+    const { tokenize } = hooks;
+    return lines.map((line) => {
+      try {
+        return tokenize(line, ctx) ?? [];
+      } catch {
+        return [];
+      }
+    });
+  }
+  if (hooks.evaluate) {
+    const byLine = resolveResults(hooks, source, ctx);
+    return lines.map((_line, i) => byLine.get(i + 1)?.tokens ?? []);
+  }
+  return lines.map(() => []);
+}
+
+/** A resolved result inlay for one body line (the computed answer shown after it). */
+export interface CalcInlay {
+  /** 1-based line within the fence body. */
+  lineNumber: number;
+  /** The inlay text — `"= <display>"` for a value, `"error: …"` for a per-line error. */
+  text: string;
+  /** True when the line evaluated to an error rather than a value. */
+  isError: boolean;
+}
+
+/** The inlay text for one result line, or `null` when there's nothing to show. */
+export function inlayTextForResult(result: CalcLineResult | undefined): {
+  text: string;
+  isError: boolean;
+} | null {
+  if (!result) return null;
+  if (result.error) return { text: `error: ${result.error.message}`, isError: true };
+  if (result.value) return { text: `= ${result.value.display}`, isError: false };
+  return null;
+}
+
+/** Resolve every body line's result inlay (skips lines with no value/error). */
+export function resolveInlays(
+  hooks: CalcEditorHooks,
+  source: string,
+  ctx?: CalcContext,
+): CalcInlay[] {
+  const byLine = resolveResults(hooks, source, ctx);
+  const out: CalcInlay[] = [];
+  for (const [lineNumber, result] of byLine) {
+    const inlay = inlayTextForResult(result);
+    if (inlay) out.push({ lineNumber, text: inlay.text, isError: inlay.isError });
+  }
+  out.sort((a, b) => a.lineNumber - b.lineNumber);
+  return out;
+}
+
+/**
+ * Class string for a highlight token. Hue comes from the `--calc-*` tokens (via
+ * `calc-editor.css`), but — exactly like `CalcBlock.tokenClass` — hue is never
+ * the SOLE cue: a `var-def` carries weight and an unresolved token a dotted
+ * underline, so roles stay distinct in the high-contrast theme (where the calc
+ * colors collapse toward the foreground).
+ */
+export function calcTokenClassName(kind: CalcTokenKind, resolved: boolean): string {
+  const base = `brand-calc-tok brand-calc-tok--${kind}`;
+  return resolved ? base : `${base} brand-calc-tok--unresolved`;
+}
+
+/** The identifier prefix immediately before `column` in `line` (the word being typed). */
+export function identifierPrefix(line: string, column: number): string {
+  const upto = line.slice(0, Math.max(0, column));
+  const m = /[A-Za-z_][A-Za-z0-9_]*$/.exec(upto);
+  return m ? m[0] : "";
+}
+
+const clamp = (n: number, lo: number, hi: number): number => Math.min(hi, Math.max(lo, n));
+
+/**
+ * An engine-neutral highlight span: a 1-based model line + 1-based start/end
+ * columns (Monaco-style; `end` exclusive) + the CSS class. The Monaco layer maps
+ * these to `monaco.Range` decorations; kept pure here so the column math is
+ * unit-testable without rendering Monaco.
+ */
+export interface CalcDecorationSpec {
+  lineNumber: number;
+  startColumn: number;
+  endColumn: number;
+  className: string;
+}
+
+/**
+ * Build highlight specs for one fence body. `bodyStartLine` is the 1-based model
+ * line of the first body line; `bodyLineTexts` are the EOL-free line strings
+ * (read from the model, so columns stay accurate regardless of CRLF/LF).
+ */
+export function calcDecorationSpecs(
+  hooks: CalcEditorHooks,
+  bodyStartLine: number,
+  bodyLineTexts: string[],
+  ctx?: CalcContext,
+): CalcDecorationSpec[] {
+  const tokensByLine = resolveHighlight(hooks, bodyLineTexts.join("\n"), ctx);
+  const specs: CalcDecorationSpec[] = [];
+  for (let i = 0; i < bodyLineTexts.length; i++) {
+    const lineText = bodyLineTexts[i] ?? "";
+    for (const t of tokensByLine[i] ?? []) {
+      const start = clamp(t.start, 0, lineText.length);
+      const end = clamp(t.end, start, lineText.length);
+      if (end <= start) continue;
+      specs.push({
+        lineNumber: bodyStartLine + i,
+        startColumn: start + 1,
+        endColumn: end + 1,
+        className: calcTokenClassName(t.kind, t.resolved),
+      });
+    }
+  }
+  return specs;
+}
+
+/** An engine-neutral inlay placement: a 1-based model line + end-of-line column. */
+export interface CalcInlaySpec {
+  lineNumber: number;
+  /** 1-based column at the end of the line (where the inlay sits). */
+  column: number;
+  text: string;
+  isError: boolean;
+}
+
+/** Build result-inlay specs for one fence body (positioned at each line's end). */
+export function calcInlaySpecs(
+  hooks: CalcEditorHooks,
+  bodyStartLine: number,
+  bodyLineTexts: string[],
+  ctx?: CalcContext,
+): CalcInlaySpec[] {
+  return resolveInlays(hooks, bodyLineTexts.join("\n"), ctx).map((inlay) => {
+    const i = inlay.lineNumber - 1;
+    const lineText = bodyLineTexts[i] ?? "";
+    return {
+      lineNumber: bodyStartLine + i,
+      column: lineText.length + 1,
+      text: inlay.text,
+      isError: inlay.isError,
+    };
+  });
+}

package/src/calc-block/calc-inline.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CalcInline } from "./calc-inline";
+import type { CalcSheet, EvaluateCalc } from "./types";
+
+const meta = {
+  title: "Editor/CalcInline",
+  component: CalcInline,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof CalcInline>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Stand-in evaluator (the math engine is app/domain logic, outside the system).
+const sheet = (display: string): CalcSheet => ({
+  results: [{ line: 1, tokens: [], value: { kind: "currency", raw: 0, display } }],
+});
+const evaluate: EvaluateCalc = (src) => {
+  if (src.includes("*")) return sheet("2,720 USD");
+  if (src.includes("/")) return sheet("31.3%");
+  return { results: [{ line: 1, tokens: [], error: { message: `Cannot evaluate "${src}"` } }] };
+};
+
+export const Default: Story = {
+  args: { source: "85 USD * 32", evaluate },
+};
+
+/** In prose: the chip sits inline, the result reads in `text-calc-result`. */
+export const InProse: Story = {
+  render: () => (
+    <p className="max-w-prose text-body text-foreground">
+      The campaign spent <CalcInline source="85 USD * 32" evaluate={evaluate} /> last month, a{" "}
+      <CalcInline source="980 / 3130" evaluate={evaluate} /> conversion rate — both computed by the
+      consumer&rsquo;s engine.
+    </p>
+  ),
+};
+
+/** A bad expression renders a calm inline warning (icon + dotted underline), never throwing. */
+export const ErrorState: Story = {
+  args: { source: "foo + bar", evaluate },
+};

package/src/calc-block/calc-inline.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { CalcInline } from "./calc-inline";
+import type { CalcSheet, EvaluateCalc } from "./types";
+
+const OK: CalcSheet = {
+  results: [{ line: 1, tokens: [], value: { kind: "currency", raw: 2720, display: "2,720 USD" } }],
+};
+
+// CalcInline is self-contained (native `title`, no Radix TooltipProvider needed).
+function renderInline(source: string, evaluate: EvaluateCalc) {
+  return render(<CalcInline source={source} evaluate={evaluate} />);
+}
+
+describe("CalcInline", () => {
+  it("renders the evaluated result as the chip, with the expression in the accessible name", () => {
+    renderInline("85 USD * 32", () => OK);
+    const chip = screen.getByTestId("calc-inline");
+    expect(chip).toHaveTextContent("2,720 USD");
+    expect(chip).toHaveAttribute("aria-label", "85 USD * 32 = 2,720 USD");
+  });
+
+  it("passes the verbatim expression to the evaluate hook (no bundled engine)", () => {
+    let seen = "";
+    renderInline("85 USD * 32", (src) => {
+      seen = src;
+      return OK;
+    });
+    expect(seen).toBe("85 USD * 32");
+  });
+
+  it("renders a calm warning (never throws) for a bad expression", () => {
+    renderInline("oops", () => ({ results: [{ line: 1, tokens: [], error: { message: "bad" } }] }));
+    const chip = screen.getByTestId("calc-inline");
+    expect(chip).toHaveAttribute("data-calc-error");
+    expect(chip).toHaveAttribute("aria-label", "oops: bad");
+  });
+
+  it("treats a missing result as a calm 'No result' warning", () => {
+    renderInline("", () => ({ results: [] }));
+    expect(screen.getByTestId("calc-inline")).toHaveAttribute("data-calc-error");
+  });
+});

package/src/calc-block/calc-inline.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * CalcInline — an inline `:calc[expr]` directive rendered as a result chip (#L).
+ *
+ * The inline sibling of {@link CalcBlock}, same contract: the library RENDERS, the
+ * consumer EVALUATES. `evaluate(expr)` returns a `CalcSheet`; the chip shows the
+ * first line's value (the expression's result) with the verbatim source as a
+ * native hover `title` and in the accessible name (`"85 USD * 32 = 2,720 USD"`). A
+ * bad expression renders a calm inline warning — it never throws or blanks the
+ * sentence. A native `title` (not a Radix Tooltip) keeps the chip self-contained,
+ * so it drops into rendered prose with no `TooltipProvider` ancestor.
+ *
+ * Color comes from the shared `--calc-*` tokens (#221): the result reads in
+ * `text-calc-result`; the warning cue is the icon + dotted underline, never hue
+ * alone (so it survives the high-contrast theme).
+ */
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { TriangleAlert } from "lucide-react";
+import { forwardRef, useMemo, type HTMLAttributes } from "react";
+
+import type { EvaluateCalc } from "./types";
+
+export interface CalcInlineProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** The inline expression, e.g. `85 USD * 32`. */
+  source: string;
+  /** Consumer-supplied evaluator (sync). The library bundles no math engine. */
+  evaluate: EvaluateCalc;
+}
+
+export const CalcInline = forwardRef<HTMLSpanElement, CalcInlineProps>(function CalcInline(
+  { source, evaluate, className, ...props },
+  ref,
+) {
+  const sheet = useMemo(() => evaluate(source), [evaluate, source]);
+  const first = sheet.results[0];
+  const display = first?.value?.display;
+  const error = first?.error ?? (display == null ? { message: "No result" } : undefined);
+
+  if (error) {
+    return (
+      <span
+        ref={ref}
+        data-testid="calc-inline"
+        data-calc-error=""
+        title={error.message}
+        aria-label={`${source}: ${error.message}`}
+        className={cn(
+          "inline-flex items-center gap-0.5 align-baseline font-mono text-calc-warning underline decoration-dotted decoration-1 underline-offset-2",
+          className,
+        )}
+        {...props}
+      >
+        <TriangleAlert className="size-3" aria-hidden="true" />
+        <span>{source}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      ref={ref}
+      data-testid="calc-inline"
+      title={source}
+      aria-label={`${source} = ${display}`}
+      className={cn(
+        "inline-flex items-center rounded-sm bg-calc-result/10 px-1 align-baseline font-mono tabular-nums text-calc-result",
+        className,
+      )}
+      {...props}
+    >
+      {display}
+    </span>
+  );
+});

package/src/calc-block/index.ts

@@ -0,0 +1,20 @@
+export { CalcBlock, type CalcBlockProps } from "./calc-block";
+export { CalcInline, type CalcInlineProps } from "./calc-inline";
+export type {
+  CalcComplete,
+  CalcCompletion,
+  CalcCompletionContext,
+  CalcCompletionKind,
+  CalcContext,
+  CalcEditorHooks,
+  CalcLineResult,
+  CalcRule,
+  CalcSheet,
+  CalcTint,
+  CalcToken,
+  CalcTokenize,
+  CalcTokenKind,
+  CalcValue,
+  CalcValueKind,
+  EvaluateCalc,
+} from "./types";