@tensor_1/react 2.31.0 → 2.32.0

package/dist/components/Spinner.d.ts

@@ -2,7 +2,8 @@ import * as react from 'react';
 import { HTMLAttributes } from 'react';
 
 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-    size?: 'md' | 'lg';
+    /** `sm` 16 px (inline, beside text or inside a 24 px control), `md` 20 px (default), `lg` 32 px. */
+    size?: 'sm' | 'md' | 'lg';
     accent?: boolean;
     /** Announced loading text (default "Loading…"). */
     label?: string;

package/dist/components/Spinner.js

@@ -4,7 +4,7 @@ function Spinner({ size = "md", accent, label, className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
+      className: cx("uix-spinner", accent && "uix-spinner--accent", size === "sm" && "uix-spinner--sm", size === "lg" && "uix-spinner--lg", className),
       role: "status",
       ...props,
       children: /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: label ?? "Loading\u2026" })

package/dist/components/StatusPill.d.ts

@@ -3,13 +3,19 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 type PillTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'critical' | 'muted' | 'attention' | 'overdue' | 'sla-ok' | 'sla-at-risk' | 'sla-breached' | 'p1' | 'p2' | 'p3' | 'p4' | 'p5';
 type PillTreatment = 'filled' | 'outline';
+type PillSize = 'sm' | 'md' | 'lg';
 interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: PillTone;
     /** 'filled' (default) = tinted wash; 'outline' = transparent fill + tone-tinted border. */
     treatment?: PillTreatment;
+    /**
+     * `sm` for a dense table cell or beside small text, `lg` for a page header (the public status
+     * page). Default `md`, the size every pill had before (HAR-1614).
+     */
+    size?: PillSize;
     dot?: boolean;
     children?: ReactNode;
 }
-declare function StatusPill({ tone, treatment, dot, children, className, ...props }: StatusPillProps): react.JSX.Element;
+declare function StatusPill({ tone, treatment, size, dot, children, className, ...props }: StatusPillProps): react.JSX.Element;
 
-export { type PillTone, type PillTreatment, StatusPill, type StatusPillProps };
+export { type PillSize, type PillTone, type PillTreatment, StatusPill, type StatusPillProps };

package/dist/components/StatusPill.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function StatusPill({ tone = "neutral", treatment = "filled", dot, children, className, ...props }) {
+function StatusPill({ tone = "neutral", treatment = "filled", size = "md", dot, children, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", className),
+      className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", size === "sm" && "uix-pill--sm", size === "lg" && "uix-pill--lg", className),
       ...props,
       children: [
         dot && /* @__PURE__ */ jsx("span", { className: "uix-pill__dot", "aria-hidden": "true" }),

package/dist/components/Steps.d.ts

@@ -15,9 +15,20 @@ declare const DEFAULT_STEP_STATE_LABELS: StepStateLabels;
 interface StepsProps extends HTMLAttributes<HTMLOListElement> {
     /**
      * `horizontal` (default) lays the steps in a row and stacks them below 40rem;
-     * `vertical` always stacks, with descriptions under each title.
+     * `vertical` always stacks, with descriptions under each title. Steps that hold
+     * content (`progress={false}`) are always vertical.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * `true` (default): a progress indicator. Every step has a state, which is read after its
+     * title, and the current one carries `aria-current="step"`.
+     * `false`: a numbered list of sections that are all on screen at once (an intake form in
+     * four parts). No state is drawn or announced, and each `Step`'s children are its content,
+     * in a group named by the step's title (HAR-1628).
+     */
+    progress?: boolean;
+    /** Render each step's title as a heading of this level (for `progress={false}` sections). */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     /** Names the list, e.g. "Intake progress". */
     label?: string;
     stateLabels?: Partial<StepStateLabels>;
@@ -34,15 +45,28 @@ interface StepProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'title'> {
     href?: string;
     renderLink?: UixRenderLink;
     onSelect?: () => void;
+    /**
+     * The step's content: fields, text, a table. Rendered under the title in a group named by
+     * it. Meant for `<Steps progress={false}>`; in a progress indicator keep steps to a title
+     * and a description.
+     */
+    children?: ReactNode;
     /** Set by `Steps`. */
     index?: number;
     /** Set by `Steps`. */
     last?: boolean;
     /** Set by `Steps`. */
     stateLabels?: StepStateLabels;
+    /** Set by `Steps`. */
+    progress?: boolean;
+    /** Set by `Steps`. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
-/** Numbered progress through a multi-step flow (HAR-1362; TENSOR C13, MOTUS C-9). */
-declare function Steps({ orientation, label, stateLabels, className, children, ...props }: StepsProps): react.JSX.Element;
-declare function Step({ title, description, state, marker, href, renderLink, onSelect, index, last, stateLabels, className, ...props }: StepProps): react.JSX.Element;
+/**
+ * Numbered progress through a multi-step flow (HAR-1362; TENSOR C13, MOTUS C-9), or with
+ * `progress={false}` a numbered list of sections that each hold content (HAR-1628).
+ */
+declare function Steps({ orientation, progress, headingLevel, label, stateLabels, className, children, ...props }: StepsProps): react.JSX.Element;
+declare function Step({ title, description, state, marker, href, renderLink, onSelect, children, index, last, stateLabels, progress, headingLevel, className, ...props }: StepProps): react.JSX.Element;
 
 export { DEFAULT_STEP_STATE_LABELS, Step, type StepProps, type StepState, type StepStateLabels, Steps, type StepsProps };

package/dist/components/Steps.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement } from "react";
+import { Children, cloneElement, isValidElement, useId } from "react";
 import { cx } from "../cx.js";
 import { renderUixLink } from "../link.js";
 const DEFAULT_STEP_STATE_LABELS = {
@@ -11,29 +11,59 @@ const DEFAULT_STEP_STATE_LABELS = {
 };
 const CSS_STATE = { complete: "done", current: "active", upcoming: void 0, waiting: "waiting", error: "error" };
 const Check = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-7" }) });
-function Steps({ orientation = "horizontal", label, stateLabels, className, children, ...props }) {
+function Steps({ orientation = "horizontal", progress = true, headingLevel, label, stateLabels, className, children, ...props }) {
   const labels = { ...DEFAULT_STEP_STATE_LABELS, ...stateLabels };
   const steps = Children.toArray(children).filter(isValidElement);
-  return /* @__PURE__ */ jsx("ol", { "aria-label": label, className: cx("uix-steps", "uix-steps--list", `uix-steps--${orientation}`, className), ...props, children: steps.map((step, index) => cloneElement(step, { index, last: index === steps.length - 1, stateLabels: labels })) });
+  const direction = progress ? orientation : "vertical";
+  return /* @__PURE__ */ jsx("ol", { "aria-label": label, className: cx("uix-steps", "uix-steps--list", `uix-steps--${direction}`, !progress && "uix-steps--sections", className), ...props, children: steps.map((step, index) => cloneElement(step, { index, last: index === steps.length - 1, stateLabels: labels, progress, headingLevel })) });
 }
-function Step({ title, description, state = "upcoming", marker, href, renderLink, onSelect, index = 0, last = false, stateLabels = DEFAULT_STEP_STATE_LABELS, className, ...props }) {
-  const glyph = marker ?? (state === "complete" ? /* @__PURE__ */ jsx(Check, {}) : state === "error" ? "!" : index + 1);
+function Step({
+  title,
+  description,
+  state = "upcoming",
+  marker,
+  href,
+  renderLink,
+  onSelect,
+  children,
+  index = 0,
+  last = false,
+  stateLabels = DEFAULT_STEP_STATE_LABELS,
+  progress = true,
+  headingLevel,
+  className,
+  ...props
+}) {
+  const titleId = useId();
+  const glyph = marker ?? (!progress ? index + 1 : state === "complete" ? /* @__PURE__ */ jsx(Check, {}) : state === "error" ? "!" : index + 1);
+  const Title = headingLevel ? `h${headingLevel}` : "span";
   const name = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "uix-step__title", children: title }),
-    /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+    /* @__PURE__ */ jsx(Title, { id: children != null ? titleId : void 0, className: "uix-step__title", children: title }),
+    progress && /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
       ", ",
       stateLabels[state]
     ] })
   ] });
-  const titled = href != null ? renderUixLink(renderLink, { href, className: "uix-step__action", children: name }) : onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-step__action", onClick: onSelect, children: name }) : /* @__PURE__ */ jsx("span", { className: "uix-step__action", children: name });
-  return /* @__PURE__ */ jsxs("li", { className: cx("uix-step", className), "data-state": CSS_STATE[state], "aria-current": state === "current" ? "step" : void 0, ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: "uix-step__marker", "aria-hidden": "true", children: glyph }),
-    /* @__PURE__ */ jsxs("span", { className: "uix-step__text", children: [
-      titled,
-      description != null && /* @__PURE__ */ jsx("span", { className: "uix-step__desc", children: description })
-    ] }),
-    !last && /* @__PURE__ */ jsx("span", { className: "uix-step__connector", "aria-hidden": "true", "data-done": state === "complete" || void 0 })
-  ] });
+  const titled = headingLevel ? name : href != null ? renderUixLink(renderLink, { href, className: "uix-step__action", children: name }) : onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-step__action", onClick: onSelect, children: name }) : /* @__PURE__ */ jsx("span", { className: "uix-step__action", children: name });
+  const Text = headingLevel || children != null ? "div" : "span";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cx("uix-step", className),
+      "data-state": progress ? CSS_STATE[state] : void 0,
+      "aria-current": progress && state === "current" ? "step" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-step__marker", "aria-hidden": "true", children: glyph }),
+        /* @__PURE__ */ jsxs(Text, { className: "uix-step__text", children: [
+          titled,
+          description != null && /* @__PURE__ */ jsx("span", { className: "uix-step__desc", children: description }),
+          children != null && /* @__PURE__ */ jsx("div", { className: "uix-step__content", role: "group", "aria-labelledby": titleId, children })
+        ] }),
+        !last && /* @__PURE__ */ jsx("span", { className: "uix-step__connector", "aria-hidden": "true", "data-done": progress && state === "complete" || void 0 })
+      ]
+    }
+  );
 }
 export {
   DEFAULT_STEP_STATE_LABELS,

package/dist/components/TableControls.js

@@ -284,10 +284,11 @@ function ViewMenu({
   ] });
 }
 function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
+  const controlId = useId();
   return /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover", children: [
-    /* @__PURE__ */ jsxs("label", { className: "uix-label", children: [
-      /* @__PURE__ */ jsx("span", { children: label }),
-      type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ jsx("select", { className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ jsx(Input, { type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
+    /* @__PURE__ */ jsxs("div", { className: "uix-field", children: [
+      /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: controlId, children: label }),
+      type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ jsx("select", { id: controlId, className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ jsx(Input, { id: controlId, type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover__actions", children: [
       /* @__PURE__ */ jsx(Button, { type: "button", onClick: onClear, children: clearLabel }),

package/dist/components/Tabs.d.ts

@@ -1,7 +1,12 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-interface TabsProps {
+/**
+ * Besides its own props, `Tabs` takes the HTML attributes of the `role="tablist"` element and
+ * renders them there, in both overflow modes: `aria-label` / `aria-labelledby` to name the
+ * tablist (HAR-1600), `id`, `data-*`. `role` stays `tablist`.
+ */
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'role'> {
     variant?: 'line' | 'enclosed' | 'pill';
     value?: string;
     onChange?: (value: string) => void;
@@ -21,7 +26,7 @@ interface TabsProps {
      */
     activation?: 'automatic' | 'manual';
 }
-declare function Tabs({ variant, value, onChange, children, className, overflow, activation }: TabsProps): react.JSX.Element;
+declare function Tabs({ variant, value, onChange, children, className, overflow, activation, onKeyDown: onKeyDownProp, ...listProps }: TabsProps): react.JSX.Element;
 interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     value: string;
     children?: ReactNode;

package/dist/components/Tabs.js

@@ -5,7 +5,17 @@ import { cx } from "../cx.js";
 const TabsCtx = createContext({});
 const Chevron = ({ d }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d }) });
 const inlineOffset = (el, rtl) => rtl ? -el.scrollLeft : el.scrollLeft;
-function Tabs({ variant = "line", value, onChange, children, className, overflow = "wrap", activation = "automatic" }) {
+function Tabs({
+  variant = "line",
+  value,
+  onChange,
+  children,
+  className,
+  overflow = "wrap",
+  activation = "automatic",
+  onKeyDown: onKeyDownProp,
+  ...listProps
+}) {
   const baseId = useId();
   const listRef = useRef(null);
   const contextValue = useMemo(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
@@ -60,6 +70,8 @@ function Tabs({ variant = "line", value, onChange, children, className, overflow
     list2.scrollBy({ left: direction * (rtl ? -1 : 1) * list2.clientWidth * 0.8 });
   };
   const onKeyDown = (e) => {
+    onKeyDownProp?.(e);
+    if (e.defaultPrevented) return;
     const items = Array.from(
       listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []
     );
@@ -92,6 +104,7 @@ function Tabs({ variant = "line", value, onChange, children, className, overflow
   const list = /* @__PURE__ */ jsx(
     "div",
     {
+      ...listProps,
       ref: listRef,
       role: "tablist",
       className: cx("uix-tabs", `uix-tabs--${variant}`, scroll && "uix-tabs--scroll", className),

package/dist/components/TextDiff.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { TextDiffGranularity } from '../text-diff-model.js';
+
+interface TextDiffLabels {
+    before: string;
+    after: string;
+    /** `{added}`, `{removed}`: lines or words, by granularity. */
+    summary: string;
+    noChanges: string;
+    /** Read before removed text. */
+    removed: string;
+    /** Read before added text. */
+    added: string;
+    /** Fold button. `{count}`. */
+    showUnchanged: string;
+    tooLarge: string;
+}
+declare const DEFAULT_TEXT_DIFF_LABELS: TextDiffLabels;
+interface TextDiffProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    before: string;
+    after: string;
+    /** Column heading for `before`, e.g. "Version 3". Defaults to `labels.before`. */
+    beforeLabel?: ReactNode;
+    afterLabel?: ReactNode;
+    /** `line` (default) pairs changed lines and marks the words inside; `word` diffs prose as one flow. */
+    granularity?: TextDiffGranularity;
+    /** `split` (default) puts the versions side by side, stacking on narrow containers; `unified` interleaves them. */
+    view?: 'split' | 'unified';
+    /** Line diffs: unchanged lines kept around each change; longer runs fold behind a button. Default: show all. */
+    context?: number;
+    /** Names the diff for assistive technology, e.g. "Changes to the article body". */
+    label?: string;
+    /** Hide the added/removed summary. */
+    hideSummary?: boolean;
+    /** Passed to the model (`maxTokens`, `maxEdits`); see `diffText`. */
+    maxTokens?: number;
+    maxEdits?: number;
+    labels?: Partial<TextDiffLabels>;
+}
+/**
+ * A two-way diff of two texts (HAR-1368; TENSOR C11 knowledge version diff): by line with word
+ * marks inside changed lines, or by word for prose; side by side or unified. Changes are `<del>` /
+ * `<ins>` with a −/+ sign and a spoken "Removed"/"Added", never colour alone. `DiffViewer` stays
+ * the three-way JSON configuration diff.
+ */
+declare function TextDiff({ before, after, beforeLabel, afterLabel, granularity, view, context, label, hideSummary, maxTokens, maxEdits, labels: labelOverrides, className, ...props }: TextDiffProps): react.JSX.Element;
+
+export { DEFAULT_TEXT_DIFF_LABELS, TextDiff, type TextDiffLabels, type TextDiffProps };

package/dist/components/TextDiff.js

@@ -0,0 +1,124 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { diffText, textDiffRows } from "../text-diff-model.js";
+const DEFAULT_TEXT_DIFF_LABELS = {
+  before: "Before",
+  after: "After",
+  summary: "{added} added, {removed} removed",
+  noChanges: "No changes",
+  removed: "Removed",
+  added: "Added",
+  showUnchanged: "Show {count} unchanged lines",
+  tooLarge: "These versions are too large to compare here."
+};
+function Marked({ segments, side, labels, whole }) {
+  const Tag = side === "before" ? "del" : "ins";
+  return /* @__PURE__ */ jsx(Fragment, { children: segments.map((segment, i) => segment.changed ? /* @__PURE__ */ jsxs(Tag, { "data-whole": whole || void 0, children: [
+    /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+      side === "before" ? labels.removed : labels.added,
+      ": "
+    ] }),
+    segment.text
+  ] }, i) : /* @__PURE__ */ jsx(Fragment2, { children: segment.text }, i)) });
+}
+function Cell({ line, side, kind, labels }) {
+  if (!line) return /* @__PURE__ */ jsx("div", { className: "uix-text-diff__cell", "data-side": side, "data-empty": "", "aria-hidden": "true" });
+  const changed = kind !== "equal";
+  return /* @__PURE__ */ jsxs("div", { className: "uix-text-diff__cell", "data-side": side, "data-kind": changed ? side === "before" ? "delete" : "insert" : "equal", children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-text-diff__num", "aria-hidden": "true", children: line.number }),
+    /* @__PURE__ */ jsx("span", { className: "uix-text-diff__sign", "aria-hidden": "true", children: changed ? side === "before" ? "\u2212" : "+" : "" }),
+    /* @__PURE__ */ jsx("span", { className: "uix-text-diff__text", children: line.segments.length === 1 && line.segments[0].text === "" ? "\u200B" : /* @__PURE__ */ jsx(Marked, { segments: line.segments, side, labels, whole: line.segments.length === 1 }) })
+  ] });
+}
+function Rows({ rows, view, labels, focusFirst }) {
+  const [open, setOpen] = useState(() => /* @__PURE__ */ new Set());
+  const first = useRef(null);
+  useEffect(() => {
+    if (focusFirst) first.current?.focus();
+  }, [focusFirst]);
+  const firstProps = (index) => focusFirst && index === 0 ? { ref: first, tabIndex: -1 } : {};
+  return /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, index) => {
+    if (row.kind === "fold") {
+      if (open.has(index)) return /* @__PURE__ */ jsx(Rows, { rows: row.rows, view, labels, focusFirst: true }, index);
+      return /* @__PURE__ */ jsx("div", { className: "uix-text-diff__row", "data-kind": "fold", children: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-text-diff__fold", onClick: () => setOpen((s) => new Set(s).add(index)), children: fillLabel(labels.showUnchanged, { count: row.count }) }) }, index);
+    }
+    const before = row.kind === "insert" ? void 0 : row.before;
+    const after = row.kind === "delete" ? void 0 : row.after;
+    if (view === "unified") {
+      if (row.kind === "equal") return /* @__PURE__ */ jsx("div", { className: "uix-text-diff__row", "data-kind": "equal", ...firstProps(index), children: /* @__PURE__ */ jsx(Cell, { line: after, side: "after", kind: "equal", labels }) }, index);
+      return /* @__PURE__ */ jsxs(Fragment2, { children: [
+        before && /* @__PURE__ */ jsx("div", { className: "uix-text-diff__row", "data-kind": "delete", children: /* @__PURE__ */ jsx(Cell, { line: before, side: "before", kind: row.kind, labels }) }),
+        after && /* @__PURE__ */ jsx("div", { className: "uix-text-diff__row", "data-kind": "insert", children: /* @__PURE__ */ jsx(Cell, { line: after, side: "after", kind: row.kind, labels }) })
+      ] }, index);
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "uix-text-diff__row", "data-kind": row.kind, ...firstProps(index), children: [
+      /* @__PURE__ */ jsx(Cell, { line: before, side: "before", kind: row.kind, labels }),
+      /* @__PURE__ */ jsx(Cell, { line: after, side: "after", kind: row.kind, labels })
+    ] }, index);
+  }) });
+}
+function TextDiff({
+  before,
+  after,
+  beforeLabel,
+  afterLabel,
+  granularity = "line",
+  view = "split",
+  context,
+  label,
+  hideSummary,
+  maxTokens,
+  maxEdits,
+  labels: labelOverrides,
+  className,
+  ...props
+}) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_TEXT_DIFF_LABELS, ...uixLabels.textDiff, ...labelOverrides };
+  const result = useMemo(() => diffText(before, after, { granularity, maxTokens, maxEdits }), [before, after, granularity, maxTokens, maxEdits]);
+  const rows = useMemo(() => granularity === "line" && result.status === "ok" ? textDiffRows(result, { context }) : [], [result, granularity, context]);
+  const heads = /* @__PURE__ */ jsxs("div", { className: "uix-text-diff__heads", "aria-hidden": view === "unified" || void 0, children: [
+    /* @__PURE__ */ jsxs("span", { className: "uix-text-diff__head", "data-side": "before", children: [
+      view === "unified" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2212 " }),
+      beforeLabel ?? labels.before
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-text-diff__head", "data-side": "after", children: [
+      view === "unified" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+ " }),
+      afterLabel ?? labels.after
+    ] })
+  ] });
+  const unchanged = result.status === "ok" && result.added === 0 && result.removed === 0 && result.ops.every((op) => op.type === "equal");
+  let body;
+  if (result.status === "too-large") body = /* @__PURE__ */ jsx("div", { className: "uix-text-diff__note", children: labels.tooLarge });
+  else if (granularity === "line") body = /* @__PURE__ */ jsx("div", { className: "uix-text-diff__body", children: /* @__PURE__ */ jsx(Rows, { rows, view, labels }) });
+  else {
+    const prose = (side2) => /* @__PURE__ */ jsx("div", { className: "uix-text-diff__prose", "data-side": side2, children: result.ops.map((op, i) => {
+      const text = op.tokens.join("");
+      if (op.type === "equal") return /* @__PURE__ */ jsx(Fragment2, { children: text }, i);
+      if (op.type === "delete" && side2 === "after") return null;
+      if (op.type === "insert" && side2 === "before") return null;
+      return /* @__PURE__ */ jsx(Marked, { segments: [{ text, changed: true }], side: op.type === "delete" ? "before" : "after", labels }, i);
+    }) });
+    const side = (which) => /* @__PURE__ */ jsxs("div", { className: "uix-text-diff__side", children: [
+      /* @__PURE__ */ jsx("div", { className: "uix-text-diff__head", children: which === "before" ? beforeLabel ?? labels.before : afterLabel ?? labels.after }),
+      prose(which)
+    ] });
+    body = /* @__PURE__ */ jsx("div", { className: "uix-text-diff__body", children: view === "unified" ? prose("both") : /* @__PURE__ */ jsxs("div", { className: "uix-text-diff__row", "data-kind": "prose", children: [
+      side("before"),
+      side("after")
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": label, className: cx("uix-text-diff", className), "data-view": view, "data-granularity": granularity, ...props, children: [
+    !hideSummary && result.status === "ok" && /* @__PURE__ */ jsx("div", { className: "uix-text-diff__summary", children: unchanged ? labels.noChanges : fillLabel(labels.summary, { added: result.added, removed: result.removed }) }),
+    !(granularity === "word" && view === "split" && result.status === "ok") && heads,
+    body
+  ] });
+}
+export {
+  DEFAULT_TEXT_DIFF_LABELS,
+  TextDiff
+};

package/dist/{emoji-image-6mPZ15Zy.d.cts → emoji-image-DjCKpdwE.d.cts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactElement } from 'react';
-import { P as Placement } from './overlay-position-Cjv5E7mn.cjs';
+import { P as Placement } from './overlay-position-2Afke51l.cjs';
 
 type EmojiLocale = 'en' | 'de';
 interface EmojiEntry {