@crewlethq/ui 0.18.0 → 0.20.0

package/dist/chunk-6MIXD6IW.js

@@ -0,0 +1,49 @@
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PinTile-IIA25MNZ.css';
+import { forwardRef } from 'react';
+import { GripVerticalGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PinTile = forwardRef(function PinTile2({ title, href, kind, meta, leading, status, figure, onUnpin, handle, className, ...rest }, ref) {
+  const { "aria-label": handleName, ...handleRest } = handle ?? { "aria-label": "" };
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("crewlet-pin-tile", className), ...rest, children: [
+    handle ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        variant: "ghost",
+        className: "crewlet-pin-tile__handle",
+        label: handleName,
+        icon: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }),
+        ...handleRest
+      }
+    ) : null,
+    leading ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__leading", "aria-hidden": "true", children: leading }) : null,
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-pin-tile__body", children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-pin-tile__head", children: [
+        /* @__PURE__ */ jsx("a", { className: "crewlet-pin-tile__link", href, children: title }),
+        status ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__status", children: status }) : null
+      ] }),
+      kind || meta ? /* @__PURE__ */ jsxs("span", { className: "crewlet-pin-tile__meta", children: [
+        kind ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__kind", children: kind }) : null,
+        kind && meta ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
+        meta
+      ] }) : null
+    ] }),
+    figure !== void 0 && figure !== null ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__figure", children: figure }) : null,
+    onUnpin ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        variant: "ghost",
+        className: "crewlet-pin-tile__unpin",
+        label: `Unpin ${title}`,
+        icon: /* @__PURE__ */ jsx(PinGlyph, { size: "sm" }),
+        onClick: onUnpin
+      }
+    ) : null
+  ] });
+});
+
+export { PinTile };

package/dist/chunk-73QBUUYX.js

@@ -0,0 +1,102 @@
+import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
+import { SegmentedControl } from './chunk-26PEPONN.js';
+import { EmptyState } from './chunk-RA2ULG6H.js';
+import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './VersionCompare-UUZOPTQO.css';
+import { useId, useMemo } from 'react';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var VERSION_COMPARE_LENSES = ["changes", "versions"];
+var VERSION_COMPARE_LABELS = {
+  title: (from, to) => `${from} and ${to}`,
+  lens: "Compare by",
+  changes: "Changes",
+  versions: "Side by side",
+  region: (from, to) => `Changes from ${from} to ${to}`,
+  identicalTitle: "Nothing changed",
+  identicalDescription: "The two versions hold the same text."
+};
+function VersionCompare({
+  fromLabel,
+  toLabel,
+  title,
+  description,
+  lens,
+  onLensChange,
+  before,
+  after,
+  changes,
+  context = 3,
+  from,
+  to,
+  note,
+  actions,
+  labels: overrides,
+  className
+}) {
+  const labels = overrides ? { ...VERSION_COMPARE_LABELS, ...overrides } : VERSION_COMPARE_LABELS;
+  const headingID = useId();
+  const level = useHeadingLevel();
+  const Heading = headingTag(level);
+  const inner = nextHeadingLevel(level);
+  const PaneHeading = headingTag(inner);
+  const hostChanges = changes !== void 0 && changes !== null;
+  const canChanges = hostChanges || before !== void 0 && after !== void 0;
+  const canVersions = from !== void 0 && from !== null || to !== void 0 && to !== null;
+  const shown = lens === "versions" ? canVersions ? "versions" : "changes" : canChanges ? "changes" : "versions";
+  const diff = useMemo(() => {
+    if (hostChanges || shown !== "changes" || before === void 0 || after === void 0) return null;
+    const lines = diffLines(before, after);
+    return { sections: collapseDiff(lines, context), stat: diffStat(lines) };
+  }, [hostChanges, shown, before, after, context]);
+  const panes = [
+    { key: "from", label: fromLabel, node: from },
+    { key: "to", label: toLabel, node: to }
+  ].filter((pane) => pane.node !== void 0 && pane.node !== null);
+  return /* @__PURE__ */ jsxs("section", { className: cx("crewlet-version-compare", className), "aria-labelledby": headingID, children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__head", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__titles", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "crewlet-version-compare__title", id: headingID, children: title ?? labels.title(fromLabel, toLabel) }),
+        description !== void 0 && description !== null && /* @__PURE__ */ jsx("p", { className: "crewlet-version-compare__description", children: description })
+      ] }),
+      onLensChange && canChanges && canVersions && /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          semantics: "radio",
+          activate: "manual",
+          size: "sm",
+          label: labels.lens,
+          value: shown,
+          onValueChange: onLensChange,
+          options: [
+            { value: "changes", label: labels.changes },
+            { value: "versions", label: labels.versions }
+          ]
+        }
+      ),
+      actions
+    ] }),
+    /* @__PURE__ */ jsx(HeadingLevelProvider, { level: inner, children: shown === "changes" ? diff ? diff.stat.identical ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        size: "compact",
+        icon: /* @__PURE__ */ jsx(CheckGlyph, { size: "xl" }),
+        title: labels.identicalTitle,
+        description: labels.identicalDescription
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__changes", children: [
+      /* @__PURE__ */ jsx(DiffSummary, { added: diff.stat.added, removed: diff.stat.removed, against: fromLabel }),
+      /* @__PURE__ */ jsx(DiffView, { sections: diff.sections, "aria-label": labels.region(fromLabel, toLabel) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "crewlet-version-compare__changes", children: changes }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__versions", children: [
+      note !== void 0 && note !== null && /* @__PURE__ */ jsx("p", { className: "crewlet-version-compare__note", children: note }),
+      /* @__PURE__ */ jsx("div", { className: "crewlet-version-compare__panes", children: panes.map((pane) => /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__pane", children: [
+        /* @__PURE__ */ jsx(PaneHeading, { className: "crewlet-version-compare__pane-title", children: pane.label }),
+        /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(inner), children: pane.node })
+      ] }, pane.key)) })
+    ] }) })
+  ] });
+}
+
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare };

package/dist/{chunk-NZY77ZDU.js → chunk-7FQEUNHX.js}

@@ -1,12 +1,12 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-2TZATTIU.js';
+import { Modal } from './chunk-7IJARUIF.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
-import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
-import { Input } from './chunk-4GB57WIT.js';
+import { Input } from './chunk-Q55TXPA3.js';
 import { Popover } from './chunk-BWRGFKJP.js';
-import { announce } from './chunk-RSAQOKH3.js';
+import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { useMediaMatch } from './chunk-IG75YMUN.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Switcher-B44Q4WF4.css';

package/dist/{chunk-2TZATTIU.js → chunk-7IJARUIF.js}

@@ -1,13 +1,13 @@
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useLayerContainer } from './chunk-HMPFGIWM.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
-import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-RQAYGG4L.css';
+import './Modal-XOSV6FAH.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { XGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronLeftGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function Modal({ open, ...rest }) {
@@ -35,6 +35,8 @@ function ModalFrame({
   footer,
   footerStart,
   headerActions,
+  onBack,
+  backLabel = "Back",
   children,
   size = "sm",
   variant = "dialog",
@@ -43,6 +45,7 @@ function ModalFrame({
   role = "dialog",
   dismissable = true,
   closeOnBackdrop = true,
+  backdrop = "veil",
   showCloseButton = true,
   stackBody = false,
   flush = false,
@@ -101,7 +104,16 @@ function ModalFrame({
   };
   const closes = banded && showCloseButton;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    banded && (given(title) || given(subtitle) || given(headerActions) || closes) ? /* @__PURE__ */ jsxs("div", { className: cx("crewlet-modal__header", sheet ? "crewlet-modal__header--sheet" : void 0), children: [
+    banded && (given(title) || given(subtitle) || given(headerActions) || closes || onBack) ? /* @__PURE__ */ jsxs("div", { className: cx("crewlet-modal__header", sheet ? "crewlet-modal__header--sheet" : void 0), children: [
+      onBack ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: "crewlet-modal__back",
+          label: backLabel,
+          icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "md" }),
+          onClick: onBack
+        }
+      ) : null,
       given(icon) ? /* @__PURE__ */ jsx("span", { className: "crewlet-modal__icon", "aria-hidden": "true", children: icon }) : null,
       /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__heading", children: [
         given(title) ? /* @__PURE__ */ jsx(
@@ -163,6 +175,7 @@ function ModalFrame({
           "crewlet-modal-overlay",
           `crewlet-modal-overlay--${variant}`,
           `crewlet-modal-overlay--${place}`,
+          backdrop === "clear" && "crewlet-modal-overlay--clear",
           // Fixed against the window, absolute inside a LayerHost: a fullscreen
           // container paints only its own subtree, so a surface drawn there
           // covers the container rather than a viewport it cannot reach.

package/dist/{chunk-A7EBCHEG.js → chunk-A4VMJMXJ.js}

@@ -1,5 +1,5 @@
-import { ConfirmModal } from './chunk-2TZATTIU.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
+import { ConfirmModal } from './chunk-7IJARUIF.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/chunk-AIVZVKYZ.js

@@ -0,0 +1,126 @@
+import { Switch } from './chunk-A722MUNR.js';
+import { useReorder } from './chunk-XJ2QEBMM.js';
+import { Checkbox } from './chunk-I6NZKJGK.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeList-NNRTDFI5.css';
+import { GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_ARRANGE_LABELS = {
+  handle: (name) => `Move ${name}`,
+  hint: "Drag to move, or press the up or down arrow key.",
+  moved: (name, position, total) => `${name} moved to position ${position} of ${total}.`,
+  moveUp: (name) => `Move ${name} up`,
+  moveDown: (name) => `Move ${name} down`,
+  atTop: (name) => `${name} is first.`,
+  atBottom: (name) => `${name} is last.`
+};
+function ArrangeList({
+  label,
+  items,
+  onReorder,
+  onShownChange,
+  toggle = "switch",
+  moveButtons = true,
+  labels: overrides,
+  className
+}) {
+  const labels = { ...DEFAULT_ARRANGE_LABELS, ...overrides };
+  const byKey = new Map(items.map((item) => [item.key, item]));
+  const nameOf = (key) => byKey.get(key)?.label ?? key;
+  const reorder = useReorder({
+    keys: items.map((item) => item.key),
+    onReorder,
+    nameOf,
+    labels
+  });
+  const last = reorder.order.length - 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: reorder.hintId, children: reorder.hint }),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cx("crewlet-arrange-list", className),
+        "aria-label": label,
+        ...reorder.containerProps,
+        children: reorder.order.map((key, index) => {
+          const item = byKey.get(key);
+          if (!item) return null;
+          const { "aria-label": handleName, ...handle } = reorder.handleProps(key);
+          const fixed = item.fixed !== void 0 && item.shown ? item.fixed : void 0;
+          const Toggle = toggle === "switch" ? Switch : Checkbox;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: cx("crewlet-arrange-list__item", !item.shown && "is-off"),
+              ...reorder.itemProps(key),
+              children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    className: "crewlet-arrange-list__handle",
+                    label: handleName,
+                    icon: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "md" }),
+                    ...handle
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Toggle,
+                  {
+                    className: "crewlet-arrange-list__toggle",
+                    label: item.icon ? /* @__PURE__ */ jsxs("span", { className: "crewlet-arrange-list__label", children: [
+                      /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-list__icon", "aria-hidden": "true", children: item.icon }),
+                      item.label
+                    ] }) : item.label,
+                    description: fixed ?? item.description,
+                    checked: item.shown,
+                    ...fixed ? { "aria-disabled": true } : {},
+                    onChange: (event) => {
+                      if (fixed) {
+                        event.preventDefault();
+                        return;
+                      }
+                      onShownChange(key, event.target.checked);
+                    }
+                  }
+                ),
+                item.trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-list__trailing", children: item.trailing }) : null,
+                moveButtons ? /* @__PURE__ */ jsxs("span", { className: "crewlet-arrange-list__moves", children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "sm",
+                      variant: "ghost",
+                      label: labels.moveUp(item.label),
+                      icon: /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "sm" }),
+                      ...index === 0 ? { disabledReason: labels.atTop(item.label) } : {},
+                      onClick: () => reorder.move(key, -1)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "sm",
+                      variant: "ghost",
+                      label: labels.moveDown(item.label),
+                      icon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }),
+                      ...index === last ? { disabledReason: labels.atBottom(item.label) } : {},
+                      onClick: () => reorder.move(key, 1)
+                    }
+                  )
+                ] }) : null
+              ]
+            },
+            key
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export { ArrangeList, DEFAULT_ARRANGE_LABELS };

package/dist/{chunk-76FXDZAZ.js → chunk-AJESMWJS.js}

@@ -1,11 +1,11 @@
-import { Menu } from './chunk-NS7BVLL3.js';
-import { Modal } from './chunk-2TZATTIU.js';
-import { Checkbox } from './chunk-75CLJNDQ.js';
+import { Menu } from './chunk-JULMZNGT.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
+import { Modal } from './chunk-7IJARUIF.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Checkbox } from './chunk-I6NZKJGK.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataTable-WZK3V62B.css';

package/dist/chunk-BVWSLXTY.js

@@ -0,0 +1,187 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DiffView-RVLIHTKG.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DIFF_VIEW_LABELS = {
+  skipped: (count) => count === 1 ? "1 unchanged line" : `${count.toLocaleString()} unchanged lines`,
+  added: "Added",
+  removed: "Removed",
+  region: "Line changes"
+};
+function DiffView({ sections, labels: overrides, className, "aria-label": ariaLabel, ...rest }) {
+  const labels = overrides ? { ...DIFF_VIEW_LABELS, ...overrides } : DIFF_VIEW_LABELS;
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "group", "aria-label": ariaLabel ?? labels.region, className: cx("crewlet-diff-view", className), children: sections.map((section, s) => (
+    // A section has no identity of its own: a diff is computed whole, so
+    // its position is what tells two sections apart.
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-diff-view__section", children: [
+      section.skipped > 0 && /* @__PURE__ */ jsx("div", { className: "crewlet-diff-view__skip", children: labels.skipped(section.skipped) }),
+      section.lines.map((line, i) => (
+        // THE CLASS NAMES ARE LITERALS, never assembled from the value: a
+        // stylesheet gate that cannot see a class cannot tell a rule this
+        // file relies on from one nothing uses.
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "crewlet-diff-view__line",
+              line.kind === "add" && "crewlet-diff-view__line--add",
+              line.kind === "remove" && "crewlet-diff-view__line--remove"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-view__number", "aria-hidden": "true", children: line.before ?? "" }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-view__number", "aria-hidden": "true", children: line.after ?? "" }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-diff-view__mark", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: line.kind === "add" ? "+" : line.kind === "remove" ? "\u2212" : " " }),
+                line.kind === "add" && /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.added }),
+                line.kind === "remove" && /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.removed })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-view__text", children: line.text || " " })
+            ]
+          },
+          i
+        )
+      ))
+    ] }, s)
+  )) });
+}
+var DIFF_SUMMARY_LABELS = {
+  spoken: (added, removed) => `${added === 1 ? "1 line" : `${added.toLocaleString()} lines`} added, ${removed.toLocaleString()} removed`,
+  against: (what) => `against ${what}`
+};
+function DiffSummary({ added, removed, against, labels: overrides, className, ...rest }) {
+  const labels = overrides ? { ...DIFF_SUMMARY_LABELS, ...overrides } : DIFF_SUMMARY_LABELS;
+  return /* @__PURE__ */ jsxs("p", { ...rest, className: cx("crewlet-diff-summary", className), children: [
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-diff-summary__added", children: [
+        "+",
+        added.toLocaleString()
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-diff-summary__removed", children: `\u2212${removed.toLocaleString()}` })
+    ] }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.spoken(added, removed) }),
+    against !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      labels.against(against)
+    ] })
+  ] });
+}
+
+// src/DiffView/diff.ts
+var MAX_DIFF_LINES = 2e3;
+function splitLines(text) {
+  const normalised = (text ?? "").replace(/\r\n?/g, "\n");
+  if (normalised === "") return [];
+  return normalised.replace(/\n$/, "").split("\n");
+}
+function diffLines(before, after) {
+  const a = splitLines(before);
+  const b = splitLines(after);
+  if (a.length > MAX_DIFF_LINES || b.length > MAX_DIFF_LINES) {
+    return [
+      ...a.map((text, i) => ({ kind: "remove", text, before: i + 1, after: null })),
+      ...b.map((text, i) => ({ kind: "add", text, before: null, after: i + 1 }))
+    ];
+  }
+  return walk(a, b, common(a, b));
+}
+function diffStat(diff) {
+  let added = 0;
+  let removed = 0;
+  for (const line of diff) {
+    if (line.kind === "add") added++;
+    if (line.kind === "remove") removed++;
+  }
+  return { added, removed, identical: added === 0 && removed === 0 };
+}
+function collapseDiff(diff, context = 3) {
+  const keep = new Array(diff.length).fill(false);
+  diff.forEach((line, i) => {
+    if (line.kind === "same") return;
+    for (let k = Math.max(0, i - context); k <= Math.min(diff.length - 1, i + context); k++) {
+      keep[k] = true;
+    }
+  });
+  const out = [];
+  let skipped = 0;
+  let current = null;
+  diff.forEach((line, i) => {
+    if (keep[i]) {
+      if (!current) {
+        current = [];
+        out.push({ lines: current, skipped });
+        skipped = 0;
+      }
+      current.push(line);
+      return;
+    }
+    skipped++;
+    current = null;
+  });
+  return out;
+}
+function firstChangedLines(sections, max) {
+  const out = [];
+  let shown = 0;
+  let more = 0;
+  for (const section of sections) {
+    const kept = [];
+    for (const line of section.lines) {
+      const changed = line.kind !== "same";
+      if (shown >= max) {
+        if (changed) more++;
+        continue;
+      }
+      if (changed) shown++;
+      kept.push(line);
+    }
+    if (kept.length > 0) out.push({ lines: kept, skipped: section.skipped });
+  }
+  return { sections: out, more };
+}
+function common(a, b) {
+  const table = [];
+  for (let i = 0; i <= a.length; i++) table.push(new Uint32Array(b.length + 1));
+  for (let i = a.length - 1; i >= 0; i--) {
+    const row = table[i];
+    const next = table[i + 1];
+    for (let j = b.length - 1; j >= 0; j--) {
+      row[j] = a[i] === b[j] ? next[j + 1] + 1 : Math.max(next[j], row[j + 1]);
+    }
+  }
+  return table;
+}
+function walk(a, b, table) {
+  const out = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length && j < b.length) {
+    if (a[i] === b[j]) {
+      out.push({ kind: "same", text: a[i], before: i + 1, after: j + 1 });
+      i++;
+      j++;
+      continue;
+    }
+    const down = table[i + 1][j];
+    const right = table[i][j + 1];
+    if (down >= right) {
+      out.push({ kind: "remove", text: a[i], before: i + 1, after: null });
+      i++;
+    } else {
+      out.push({ kind: "add", text: b[j], before: null, after: j + 1 });
+      j++;
+    }
+  }
+  while (i < a.length) {
+    out.push({ kind: "remove", text: a[i], before: i + 1, after: null });
+    i++;
+  }
+  while (j < b.length) {
+    out.push({ kind: "add", text: b[j], before: null, after: j + 1 });
+    j++;
+  }
+  return out;
+}
+
+export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines };