@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/components/dataDisplay/dagView/panZoom.d.ts

@@ -0,0 +1,75 @@
+/** What the world is moved and scaled by: `translate(x, y) scale(zoom)`, origin top left. */
+export interface Viewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Bounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** The viewport scaled by `factor` (clamped to min…max), keeping the world point under `point` in place. */
+export declare function zoomAt(viewport: Viewport, point: Point, factor: number, min: number, max: number): Viewport;
+/** The viewport that shows `bounds` (world units) whole and centred in a box of `size`, `padding` from its edges. */
+export declare function fitBounds(bounds: Bounds, size: {
+    width: number;
+    height: number;
+}, padding: number, min: number, max: number): Viewport;
+/** The viewport, at its zoom, that puts the world point `point` in the middle of a box of `size`. */
+export declare function centerOn(viewport: Viewport, point: Point, size: {
+    width: number;
+    height: number;
+}): Viewport;
+/** Whether the world rectangle lies inside the box of `size` at `viewport`, `margin` from its edges. */
+export declare function isVisible(viewport: Viewport, rect: Bounds, size: {
+    width: number;
+    height: number;
+}, margin?: number): boolean;
+/** The zoom factor for a wheel turn: lines and pages count as many pixels, a pinch (ctrl) zooms faster. */
+export declare function wheelZoomFactor(deltaY: number, deltaMode: number, pinch: boolean): number;
+/** Rounded translation, so text is not blurred at rest by subpixel offsets. */
+export declare const viewportTransform: (viewport: Viewport) => string;
+export declare const sameViewport: (a: Viewport, b: Viewport) => boolean;
+/**
+ * Coalesces writes to one per animation frame: `schedule` keeps the latest
+ * value, and `write` gets it on the next frame. `pending()` is that latest value
+ * until it is written, so a gesture builds on what it asked for, not on what was
+ * drawn last.
+ */
+export declare function createFrameWriter<T>(write: (value: T) => void, frame?: {
+    request: (callback: () => void) => number;
+    cancel: (id: number) => void;
+}): {
+    schedule(value: T): void;
+    pending(): T | undefined;
+    flush(): void;
+    cancel(): void;
+};
+export type WheelMode = "zoom" | "pan" | "none";
+export interface PanZoomOptions {
+    /** The viewport as drawn now. */
+    viewport: () => Viewport;
+    /** Gets the new viewport, at most once per frame. */
+    write: (viewport: Viewport) => void;
+    minZoom: () => number;
+    maxZoom: () => number;
+    /** Plain wheel: zoom (default), pan, or leave it to the page. Ctrl+wheel (a trackpad pinch) always zooms. */
+    wheel: () => WheelMode;
+    /** True while a drag or pinch is under way. */
+    onInteracting?: (interacting: boolean) => void;
+    /** Pixels a press moves before it pans rather than clicks; 3 by default. */
+    threshold?: number;
+}
+/**
+ * Pan and zoom on `el`: drag with a mouse or one finger, pinch with two, wheel,
+ * and a Safari trackpad pinch. A drag that moved past the threshold swallows
+ * the click that follows it. Returns the function that removes it all.
+ */
+export declare function createPanZoom(el: HTMLElement, options: PanZoomOptions): () => void;

package/dist/components/dataDisplay/dagView/panZoom.js

@@ -0,0 +1,161 @@
+const I = (e, n, o) => Math.min(o, Math.max(n, e));
+function M(e, n, o, r, c) {
+  const a = I(e.zoom * o, r, c), l = a / e.zoom;
+  return { x: n.x - (n.x - e.x) * l, y: n.y - (n.y - e.y) * l, zoom: a };
+}
+function $(e, n, o, r, c) {
+  const a = { width: Math.max(1, n.width - o * 2), height: Math.max(1, n.height - o * 2) }, l = Math.min(a.width / Math.max(1, e.width), a.height / Math.max(1, e.height)), s = I(l, r, c);
+  return {
+    x: (n.width - e.width * s) / 2 - e.x * s,
+    y: (n.height - e.height * s) / 2 - e.y * s,
+    zoom: s
+  };
+}
+function S(e, n, o) {
+  return {
+    x: o.width / 2 - n.x * e.zoom,
+    y: o.height / 2 - n.y * e.zoom,
+    zoom: e.zoom
+  };
+}
+function W(e, n, o, r = 0) {
+  const c = e.x + n.x * e.zoom, a = e.y + n.y * e.zoom;
+  return c >= r && a >= r && c + n.width * e.zoom <= o.width - r && a + n.height * e.zoom <= o.height - r;
+}
+function K(e, n, o) {
+  const r = n === 1 ? e * 16 : n === 2 ? e * 400 : e, c = I(r, -100, 100) * (o ? 0.01 : 2e-3);
+  return Math.exp(-c);
+}
+const N = (e) => `translate(${Math.round(e.x)}px, ${Math.round(e.y)}px) scale(${Math.round(e.zoom * 1e4) / 1e4})`, B = (e, n) => e.x === n.x && e.y === n.y && e.zoom === n.zoom;
+function R(e, n = {
+  request: (o) => typeof requestAnimationFrame == "function" ? requestAnimationFrame(o) : window.setTimeout(o, 16),
+  cancel: (o) => typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(o) : window.clearTimeout(o)
+}) {
+  let o, r;
+  const c = () => {
+    r !== void 0 && n.cancel(r), r = void 0;
+    const a = o;
+    o = void 0, a && e(a.current);
+  };
+  return {
+    schedule(a) {
+      o = { current: a }, r === void 0 && (r = n.request(() => {
+        r = void 0, c();
+      }));
+    },
+    pending: () => o?.current,
+    flush: c,
+    cancel() {
+      r !== void 0 && n.cancel(r), r = void 0, o = void 0;
+    }
+  };
+}
+const V = "a[href], button, input, select, textarea, label, summary, [contenteditable], [data-dag-no-pan]";
+function O(e, n) {
+  const o = n.threshold ?? 3, r = R(n.write), c = () => r.pending() ?? n.viewport(), a = (t) => {
+    B(t, c()) || r.schedule(t);
+  }, l = (t, i) => {
+    const d = e.getBoundingClientRect();
+    return { x: t - d.left, y: i - d.top };
+  }, s = /* @__PURE__ */ new Map(), f = e.ownerDocument;
+  let X = !1;
+  const v = (t) => {
+    t !== X && (X = t, t ? (f.addEventListener("pointermove", A, !0), f.addEventListener("pointerup", E, !0), f.addEventListener("pointercancel", E, !0)) : (f.removeEventListener("pointermove", A, !0), f.removeEventListener("pointerup", E, !0), f.removeEventListener("pointercancel", E, !0)));
+  };
+  let u, m, p = !1, z = !1, Z = !1;
+  const L = (t) => {
+    t !== Z && (Z = t, n.onInteracting?.(t));
+  }, C = () => {
+    const [t, i] = [...s.values()];
+    return { distance: Math.hypot(t.x - i.x, t.y - i.y), mid: { x: (t.x + i.x) / 2, y: (t.y + i.y) / 2 } };
+  }, D = (t) => {
+    if (!(t.button !== 0 && t.pointerType === "mouse" || t.target?.closest?.(V))) {
+      if (s.set(t.pointerId, l(t.clientX, t.clientY)), v(!0), s.size === 1)
+        u = { point: s.get(t.pointerId), viewport: c(), id: t.pointerId }, p = !1;
+      else if (s.size === 2) {
+        const { distance: d, mid: x } = C();
+        m = { distance: d, mid: x, viewport: c() }, u = void 0;
+        for (const h of s.keys()) T(h);
+        L(!0);
+      }
+    }
+  }, T = (t) => {
+    try {
+      e.setPointerCapture?.(t);
+    } catch {
+    }
+  }, A = (t) => {
+    if (!s.has(t.pointerId)) return;
+    const i = l(t.clientX, t.clientY);
+    if (s.set(t.pointerId, i), m && s.size >= 2) {
+      const { distance: h, mid: g } = C(), w = M(
+        m.viewport,
+        m.mid,
+        h / Math.max(1, m.distance),
+        n.minZoom(),
+        n.maxZoom()
+      );
+      a({ ...w, x: w.x + g.x - m.mid.x, y: w.y + g.y - m.mid.y });
+      return;
+    }
+    if (!u || u.id !== t.pointerId) return;
+    const d = i.x - u.point.x, x = i.y - u.point.y;
+    if (!p) {
+      if (Math.hypot(d, x) < o) return;
+      p = !0, T(t.pointerId), L(!0);
+    }
+    a({ x: u.viewport.x + d, y: u.viewport.y + x, zoom: u.viewport.zoom });
+  }, E = (t) => {
+    if (s.delete(t.pointerId)) {
+      if ((p || m) && (z = !0), s.size < 2 && (m = void 0), s.size === 0)
+        v(!1), u = void 0, p = !1, L(!1), r.flush(), setTimeout(() => z = !1, 0);
+      else if (s.size === 1) {
+        const [[i, d]] = [...s.entries()];
+        u = { point: d, viewport: c(), id: i }, p = !0;
+      }
+    }
+  }, F = (t) => {
+    z && (z = !1, t.stopPropagation(), t.preventDefault());
+  }, P = (t) => {
+    const i = t.ctrlKey || t.metaKey, d = n.wheel();
+    if (!i && d === "none") return;
+    if (t.preventDefault(), !i && d === "pan") {
+      const h = c(), g = t.deltaMode === 1 ? 16 : t.deltaMode === 2 ? 400 : 1, w = t.shiftKey && !t.deltaX ? t.deltaY : t.deltaX, G = t.shiftKey && !t.deltaX ? 0 : t.deltaY;
+      a({ x: h.x - w * g, y: h.y - G * g, zoom: h.zoom });
+      return;
+    }
+    const x = K(t.deltaY, t.deltaMode, i);
+    a(M(c(), l(t.clientX, t.clientY), x, n.minZoom(), n.maxZoom()));
+  };
+  let y;
+  const k = (t) => {
+    t.preventDefault();
+    const i = t, d = e.getBoundingClientRect();
+    y = {
+      viewport: c(),
+      point: i.clientX === void 0 ? { x: d.width / 2, y: d.height / 2 } : l(i.clientX, i.clientY ?? 0)
+    };
+  }, Y = (t) => {
+    t.preventDefault();
+    const i = t.scale;
+    !y || typeof i != "number" || a(M(y.viewport, y.point, i, n.minZoom(), n.maxZoom()));
+  }, q = (t) => {
+    t.preventDefault(), y = void 0;
+  };
+  return e.addEventListener("pointerdown", D), e.addEventListener("click", F, !0), e.addEventListener("wheel", P, { passive: !1 }), e.addEventListener("gesturestart", k), e.addEventListener("gesturechange", Y), e.addEventListener("gestureend", q), () => {
+    r.cancel(), v(!1), e.removeEventListener("pointerdown", D), e.removeEventListener("click", F, !0), e.removeEventListener("wheel", P), e.removeEventListener("gesturestart", k), e.removeEventListener("gesturechange", Y), e.removeEventListener("gestureend", q);
+  };
+}
+export {
+  S as centerOn,
+  I as clamp,
+  R as createFrameWriter,
+  O as createPanZoom,
+  $ as fitBounds,
+  W as isVisible,
+  B as sameViewport,
+  N as viewportTransform,
+  K as wheelZoomFactor,
+  M as zoomAt
+};
+//# sourceMappingURL=panZoom.js.map

package/dist/components/dataDisplay/dagView/panZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panZoom.js","sources":["../../../../src/components/dataDisplay/dagView/panZoom.ts"],"sourcesContent":["// Pan and zoom for a transformed \"world\" inside a viewport element: pure math\n// (unit-tested) and plain DOM glue, with no Solid imports, so a React port can\n// copy the file. The glue reads gestures and hands at most one new viewport per\n// animation frame to `write`.\n\n/** What the world is moved and scaled by: `translate(x, y) scale(zoom)`, origin top left. */\nexport interface Viewport {\n  x: number;\n  y: number;\n  zoom: number;\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface Bounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport const clamp = (value: number, min: number, max: number): number => Math.min(max, Math.max(min, value));\n\n/** The viewport scaled by `factor` (clamped to min…max), keeping the world point under `point` in place. */\nexport function zoomAt(viewport: Viewport, point: Point, factor: number, min: number, max: number): Viewport {\n  const zoom = clamp(viewport.zoom * factor, min, max);\n  const k = zoom / viewport.zoom;\n  return { x: point.x - (point.x - viewport.x) * k, y: point.y - (point.y - viewport.y) * k, zoom };\n}\n\n/** The viewport that shows `bounds` (world units) whole and centred in a box of `size`, `padding` from its edges. */\nexport function fitBounds(\n  bounds: Bounds,\n  size: { width: number; height: number },\n  padding: number,\n  min: number,\n  max: number\n): Viewport {\n  const room = { width: Math.max(1, size.width - padding * 2), height: Math.max(1, size.height - padding * 2) };\n  const fit = Math.min(room.width / Math.max(1, bounds.width), room.height / Math.max(1, bounds.height));\n  const zoom = clamp(fit, min, max);\n  return {\n    x: (size.width - bounds.width * zoom) / 2 - bounds.x * zoom,\n    y: (size.height - bounds.height * zoom) / 2 - bounds.y * zoom,\n    zoom,\n  };\n}\n\n/** The viewport, at its zoom, that puts the world point `point` in the middle of a box of `size`. */\nexport function centerOn(viewport: Viewport, point: Point, size: { width: number; height: number }): Viewport {\n  return {\n    x: size.width / 2 - point.x * viewport.zoom,\n    y: size.height / 2 - point.y * viewport.zoom,\n    zoom: viewport.zoom,\n  };\n}\n\n/** Whether the world rectangle lies inside the box of `size` at `viewport`, `margin` from its edges. */\nexport function isVisible(\n  viewport: Viewport,\n  rect: Bounds,\n  size: { width: number; height: number },\n  margin = 0\n): boolean {\n  const left = viewport.x + rect.x * viewport.zoom;\n  const top = viewport.y + rect.y * viewport.zoom;\n  return (\n    left >= margin &&\n    top >= margin &&\n    left + rect.width * viewport.zoom <= size.width - margin &&\n    top + rect.height * viewport.zoom <= size.height - margin\n  );\n}\n\n/** The zoom factor for a wheel turn: lines and pages count as many pixels, a pinch (ctrl) zooms faster. */\nexport function wheelZoomFactor(deltaY: number, deltaMode: number, pinch: boolean): number {\n  const pixels = deltaMode === 1 ? deltaY * 16 : deltaMode === 2 ? deltaY * 400 : deltaY;\n  const step = clamp(pixels, -100, 100) * (pinch ? 0.01 : 0.002);\n  return Math.exp(-step);\n}\n\n/** Rounded translation, so text is not blurred at rest by subpixel offsets. */\nexport const viewportTransform = (viewport: Viewport): string =>\n  `translate(${Math.round(viewport.x)}px, ${Math.round(viewport.y)}px) scale(${Math.round(viewport.zoom * 10000) / 10000})`;\n\nexport const sameViewport = (a: Viewport, b: Viewport): boolean => a.x === b.x && a.y === b.y && a.zoom === b.zoom;\n\n/**\n * Coalesces writes to one per animation frame: `schedule` keeps the latest\n * value, and `write` gets it on the next frame. `pending()` is that latest value\n * until it is written, so a gesture builds on what it asked for, not on what was\n * drawn last.\n */\nexport function createFrameWriter<T>(\n  write: (value: T) => void,\n  frame: { request: (callback: () => void) => number; cancel: (id: number) => void } = {\n    request: (callback) =>\n      typeof requestAnimationFrame === \"function\" ? requestAnimationFrame(callback) : window.setTimeout(callback, 16),\n    cancel: (id) => (typeof cancelAnimationFrame === \"function\" ? cancelAnimationFrame(id) : window.clearTimeout(id)),\n  }\n): { schedule(value: T): void; pending(): T | undefined; flush(): void; cancel(): void } {\n  let value: { current: T } | undefined;\n  let id: number | undefined;\n  const flush = (): void => {\n    if (id !== undefined) frame.cancel(id);\n    id = undefined;\n    const next = value;\n    value = undefined;\n    if (next) write(next.current);\n  };\n  return {\n    schedule(next) {\n      value = { current: next };\n      if (id === undefined)\n        id = frame.request(() => {\n          id = undefined;\n          flush();\n        });\n    },\n    pending: () => value?.current,\n    flush,\n    cancel() {\n      if (id !== undefined) frame.cancel(id);\n      id = undefined;\n      value = undefined;\n    },\n  };\n}\n\nexport type WheelMode = \"zoom\" | \"pan\" | \"none\";\n\nexport interface PanZoomOptions {\n  /** The viewport as drawn now. */\n  viewport: () => Viewport;\n  /** Gets the new viewport, at most once per frame. */\n  write: (viewport: Viewport) => void;\n  minZoom: () => number;\n  maxZoom: () => number;\n  /** Plain wheel: zoom (default), pan, or leave it to the page. Ctrl+wheel (a trackpad pinch) always zooms. */\n  wheel: () => WheelMode;\n  /** True while a drag or pinch is under way. */\n  onInteracting?: (interacting: boolean) => void;\n  /** Pixels a press moves before it pans rather than clicks; 3 by default. */\n  threshold?: number;\n}\n\n/** Targets where a press keeps its own meaning and does not pan: controls, links, fields. */\nconst INTERACTIVE = \"a[href], button, input, select, textarea, label, summary, [contenteditable], [data-dag-no-pan]\";\n\n/**\n * Pan and zoom on `el`: drag with a mouse or one finger, pinch with two, wheel,\n * and a Safari trackpad pinch. A drag that moved past the threshold swallows\n * the click that follows it. Returns the function that removes it all.\n */\nexport function createPanZoom(el: HTMLElement, options: PanZoomOptions): () => void {\n  const threshold = options.threshold ?? 3;\n  const writer = createFrameWriter<Viewport>(options.write);\n  const current = (): Viewport => writer.pending() ?? options.viewport();\n  const set = (next: Viewport): void => {\n    if (!sameViewport(next, current())) writer.schedule(next);\n  };\n  const local = (clientX: number, clientY: number): Point => {\n    const rect = el.getBoundingClientRect();\n    return { x: clientX - rect.left, y: clientY - rect.top };\n  };\n\n  const pointers = new Map<number, Point>();\n  // While a press is held, its moves and release are read on the document: a\n  // quick drag can leave the box before the threshold, when the pointer is\n  // captured, and the box would see nothing more of it. A captured pointer's\n  // events still reach the document, through the box.\n  const doc = el.ownerDocument;\n  let following = false;\n  const follow = (on: boolean): void => {\n    if (on === following) return;\n    following = on;\n    if (on) {\n      doc.addEventListener(\"pointermove\", onPointerMove, true);\n      doc.addEventListener(\"pointerup\", onPointerUp, true);\n      doc.addEventListener(\"pointercancel\", onPointerUp, true);\n    } else {\n      doc.removeEventListener(\"pointermove\", onPointerMove, true);\n      doc.removeEventListener(\"pointerup\", onPointerUp, true);\n      doc.removeEventListener(\"pointercancel\", onPointerUp, true);\n    }\n  };\n  let start: { point: Point; viewport: Viewport; id: number } | undefined;\n  let pinch: { distance: number; mid: Point; viewport: Viewport } | undefined;\n  let panning = false;\n  let swallowClick = false;\n  let interacting = false;\n  const setInteracting = (value: boolean): void => {\n    if (value === interacting) return;\n    interacting = value;\n    options.onInteracting?.(value);\n  };\n\n  const pinchState = (): { distance: number; mid: Point } => {\n    const [a, b] = [...pointers.values()] as [Point, Point];\n    return { distance: Math.hypot(a.x - b.x, a.y - b.y), mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } };\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (event.button !== 0 && event.pointerType === \"mouse\") return;\n    const target = event.target as Element | null;\n    if (target?.closest?.(INTERACTIVE)) return;\n    pointers.set(event.pointerId, local(event.clientX, event.clientY));\n    follow(true);\n    if (pointers.size === 1) {\n      start = { point: pointers.get(event.pointerId)!, viewport: current(), id: event.pointerId };\n      panning = false;\n    } else if (pointers.size === 2) {\n      const { distance, mid } = pinchState();\n      pinch = { distance, mid, viewport: current() };\n      start = undefined;\n      // A second finger makes it a gesture: take both pointers.\n      for (const id of pointers.keys()) capture(id);\n      setInteracting(true);\n    }\n  };\n\n  const capture = (id: number): void => {\n    try {\n      el.setPointerCapture?.(id);\n    } catch {\n      // The pointer is gone already.\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent): void => {\n    if (!pointers.has(event.pointerId)) return;\n    const point = local(event.clientX, event.clientY);\n    pointers.set(event.pointerId, point);\n    if (pinch && pointers.size >= 2) {\n      const { distance, mid } = pinchState();\n      const scaled = zoomAt(\n        pinch.viewport,\n        pinch.mid,\n        distance / Math.max(1, pinch.distance),\n        options.minZoom(),\n        options.maxZoom()\n      );\n      set({ ...scaled, x: scaled.x + mid.x - pinch.mid.x, y: scaled.y + mid.y - pinch.mid.y });\n      return;\n    }\n    if (!start || start.id !== event.pointerId) return;\n    const dx = point.x - start.point.x;\n    const dy = point.y - start.point.y;\n    if (!panning) {\n      if (Math.hypot(dx, dy) < threshold) return;\n      // Captured only now: a capture from the press would take the click from the node under it.\n      panning = true;\n      capture(event.pointerId);\n      setInteracting(true);\n    }\n    set({ x: start.viewport.x + dx, y: start.viewport.y + dy, zoom: start.viewport.zoom });\n  };\n\n  const onPointerUp = (event: PointerEvent): void => {\n    if (!pointers.delete(event.pointerId)) return;\n    if (panning || pinch) swallowClick = true;\n    if (pointers.size < 2) pinch = undefined;\n    if (pointers.size === 0) {\n      follow(false);\n      start = undefined;\n      panning = false;\n      setInteracting(false);\n      writer.flush();\n      // A click comes right after the release, or not at all.\n      setTimeout(() => (swallowClick = false), 0);\n    } else if (pointers.size === 1) {\n      // One finger left after a pinch: it pans from here.\n      const [[id, point]] = [...pointers.entries()] as [[number, Point]];\n      start = { point, viewport: current(), id };\n      panning = true;\n    }\n  };\n\n  const onClick = (event: MouseEvent): void => {\n    if (!swallowClick) return;\n    swallowClick = false;\n    event.stopPropagation();\n    event.preventDefault();\n  };\n\n  const onWheel = (event: WheelEvent): void => {\n    const pinchGesture = event.ctrlKey || event.metaKey;\n    const mode = options.wheel();\n    if (!pinchGesture && mode === \"none\") return;\n    event.preventDefault();\n    if (!pinchGesture && mode === \"pan\") {\n      const v = current();\n      const scale = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;\n      const dx = event.shiftKey && !event.deltaX ? event.deltaY : event.deltaX;\n      const dy = event.shiftKey && !event.deltaX ? 0 : event.deltaY;\n      set({ x: v.x - dx * scale, y: v.y - dy * scale, zoom: v.zoom });\n      return;\n    }\n    const factor = wheelZoomFactor(event.deltaY, event.deltaMode, pinchGesture);\n    set(zoomAt(current(), local(event.clientX, event.clientY), factor, options.minZoom(), options.maxZoom()));\n  };\n\n  // Safari reports a trackpad pinch as gesture events, with the scale since the gesture began.\n  let gesture: { viewport: Viewport; point: Point } | undefined;\n  const onGestureStart = (event: Event): void => {\n    event.preventDefault();\n    const e = event as Event & { clientX?: number; clientY?: number };\n    const rect = el.getBoundingClientRect();\n    gesture = {\n      viewport: current(),\n      point: e.clientX === undefined ? { x: rect.width / 2, y: rect.height / 2 } : local(e.clientX, e.clientY ?? 0),\n    };\n  };\n  const onGestureChange = (event: Event): void => {\n    event.preventDefault();\n    const scale = (event as Event & { scale?: number }).scale;\n    if (!gesture || typeof scale !== \"number\") return;\n    set(zoomAt(gesture.viewport, gesture.point, scale, options.minZoom(), options.maxZoom()));\n  };\n  const onGestureEnd = (event: Event): void => {\n    event.preventDefault();\n    gesture = undefined;\n  };\n\n  el.addEventListener(\"pointerdown\", onPointerDown);\n  el.addEventListener(\"click\", onClick, true);\n  el.addEventListener(\"wheel\", onWheel, { passive: false });\n  el.addEventListener(\"gesturestart\", onGestureStart);\n  el.addEventListener(\"gesturechange\", onGestureChange);\n  el.addEventListener(\"gestureend\", onGestureEnd);\n\n  return () => {\n    writer.cancel();\n    follow(false);\n    el.removeEventListener(\"pointerdown\", onPointerDown);\n    el.removeEventListener(\"click\", onClick, true);\n    el.removeEventListener(\"wheel\", onWheel);\n    el.removeEventListener(\"gesturestart\", onGestureStart);\n    el.removeEventListener(\"gesturechange\", onGestureChange);\n    el.removeEventListener(\"gestureend\", onGestureEnd);\n  };\n}\n"],"names":["clamp","value","min","max","zoomAt","viewport","point","factor","zoom","k","fitBounds","bounds","size","padding","room","fit","centerOn","isVisible","rect","margin","left","top","wheelZoomFactor","deltaY","deltaMode","pinch","pixels","step","viewportTransform","sameViewport","a","b","createFrameWriter","write","frame","callback","id","flush","next","INTERACTIVE","createPanZoom","el","options","threshold","writer","current","set","local","clientX","clientY","pointers","doc","following","follow","on","onPointerMove","onPointerUp","start","panning","swallowClick","interacting","setInteracting","pinchState","onPointerDown","event","distance","mid","capture","scaled","dx","dy","onClick","onWheel","pinchGesture","mode","v","scale","gesture","onGestureStart","e","onGestureChange","onGestureEnd"],"mappings":"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"}

package/dist/components/dataDisplay/descriptionList/descriptionList.d.ts

@@ -5,14 +5,22 @@ export interface DescriptionListEntry {
     description: JSX.Element;
 }
 /**
- * `auto`: the term beside its description while the list's container is at
- * least 420px wide, above it when narrower (a container query). `row` and
- * `stacked` fix one layout.
+ * `auto`: the term beside its description while the list is at least 420px
+ * wide, above it when narrower (a container query on the list itself). `row`
+ * and `stacked` fix one layout.
  */
 export type DescriptionListLayout = "auto" | "row" | "stacked";
 export interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {
     /** The pairs as data; `DescriptionItem` children work too, and come after them. */
     items?: DescriptionListEntry[];
+    /**
+     * "auto" (default): each term beside its value while the list is at least
+     * 420px wide, above it when narrower — the list's own width decides. So its
+     * content does not widen it: where the parent takes its width from its
+     * content (a flex item that does not grow, a popover, a table cell) the list
+     * has no width; give it one there, or use "row" / "stacked", which fix one
+     * layout and take their width from their content.
+     */
     layout?: DescriptionListLayout;
     /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */
     termWidth?: number | string;

package/dist/components/dataDisplay/descriptionList/descriptionList.js

@@ -1,48 +1,44 @@
-import { use as p, spread as a, mergeProps as u, insert as n, createComponent as d, template as f } from "solid-js/web";
+import { use as d, spread as a, mergeProps as u, insert as n, createComponent as p, template as f } from "solid-js/web";
 import '../../../assets/styles/less/components/descriptionList/descriptionList.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                         */
-import { splitProps as _, mergeProps as g, createMemo as $, For as b } from "solid-js";
-import h from "clsx";
-import { mergeRefs as y } from "../../../primitives/mergeRefs.js";
-var w = /* @__PURE__ */ f("<div><dt class=smwb-description-list__term></dt><dd class=smwb-description-list__details>"), v = /* @__PURE__ */ f("<dl>");
+import { splitProps as _, mergeProps as y, createMemo as $, For as b } from "solid-js";
+import g from "clsx";
+import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as w } from "../../../primitives/mergeStyle.js";
+var v = /* @__PURE__ */ f("<div><dt class=smwb-description-list__term></dt><dd class=smwb-description-list__details>"), P = /* @__PURE__ */ f("<dl>");
 function W(l) {
   const [r, e] = _(l, ["class", "term", "children", "ref"]);
   return (() => {
-    var s = w(), i = s.firstChild, o = i.nextSibling, t = y(r.ref);
-    return typeof t == "function" && p(t, s), a(s, u(e, {
+    var s = v(), i = s.firstChild, o = i.nextSibling, t = h(r.ref);
+    return typeof t == "function" && d(t, s), a(s, u(e, {
       get class() {
-        return h("smwb-description-list__item", r.class);
+        return g("smwb-description-list__item", r.class);
       }
     }), !1, !0), n(i, () => r.term), n(o, () => r.children), s;
   })();
 }
-function L(l) {
-  const r = g({
+function M(l) {
+  const r = y({
     layout: "auto"
-  }, l), [e, s] = _(r, ["class", "style", "items", "layout", "termWidth", "dense", "children", "ref"]), i = $(() => e.items ?? []), o = () => {
-    if (e.termWidth === void 0) return e.style;
-    const t = typeof e.termWidth == "number" ? `${e.termWidth}px` : e.termWidth;
-    return typeof e.style == "string" ? `${e.style};--smwb-description-term:${t}` : {
-      ...e.style,
-      "--smwb-description-term": t
-    };
-  };
+  }, l), [e, s] = _(r, ["class", "style", "items", "layout", "termWidth", "dense", "children", "ref"]), i = $(() => e.items ?? []), o = () => w(e.style, {
+    "--smwb-description-term": typeof e.termWidth == "number" ? `${e.termWidth}px` : e.termWidth
+  });
   return (() => {
-    var t = v(), m = y(e.ref);
-    return typeof m == "function" && p(m, t), a(t, u(s, {
+    var t = P(), m = h(e.ref);
+    return typeof m == "function" && d(m, t), a(t, u(s, {
       get class() {
-        return h("smwb-description-list", `smwb-description-list_${e.layout}`, {
+        return g("smwb-description-list", `smwb-description-list_${e.layout}`, {
           "smwb-description-list_dense": e.dense
         }, e.class);
       },
       get style() {
         return o();
       }
-    }), !1, !0), n(t, d(b, {
+    }), !1, !0), n(t, p(b, {
       get each() {
         return i();
       },
-      children: (c) => d(W, {
+      children: (c) => p(W, {
         get term() {
           return c.term;
         },
@@ -55,6 +51,6 @@ function L(l) {
 }
 export {
   W as DescriptionItem,
-  L as DescriptionList
+  M as DescriptionList
 };
 //# sourceMappingURL=descriptionList.js.map

package/dist/components/dataDisplay/descriptionList/descriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DescriptionListEntry {\n  term: JSX.Element;\n  description: JSX.Element;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nexport interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The field's name. */\n  term: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** One pair: the term and, as children, its description. */\nexport function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"term\", \"children\", \"ref\"]);\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-description-list__item\", local.class)}>\n      <dt class=\"smwb-description-list__term\">{local.term}</dt>\n      <dd class=\"smwb-description-list__details\">{local.children}</dd>\n    </div>\n  );\n}\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element {\n  const merged = mergeProps({ layout: \"auto\" as DescriptionListLayout }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"items\", \"layout\", \"termWidth\", \"dense\", \"children\", \"ref\"]);\n\n  // Read the items once: an inline array is re-evaluated on every read, creating\n  // the markup in it again, and during hydration the extra copies have no server\n  // DOM nodes to adopt.\n  const items = createMemo(() => local.items ?? []);\n\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.termWidth === undefined) return local.style;\n    const width = typeof local.termWidth === \"number\" ? `${local.termWidth}px` : local.termWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-description-term:${width}`;\n    return { ...local.style, \"--smwb-description-term\": width };\n  };\n\n  return (\n    <dl\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-description-list\",\n        `smwb-description-list_${local.layout}`,\n        { \"smwb-description-list_dense\": local.dense },\n        local.class\n      )}\n      style={style()}\n    >\n      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>\n      {local.children}\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","props","local","rest","splitProps","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","term","children","DescriptionList","merged","mergeProps","layout","items","createMemo","style","termWidth","undefined","width","_el$4","_tmpl$2","_ref$2","dense","_$createComponent","For","each","item","description"],"mappings":";;;;;;;AAoCO,SAASA,EAAgBC,GAAuD;AACrF,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,QAAQ,YAAY,KAAK,CAAC;AAC5E,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IACsBC,EAAUV,EAAMW,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAN,CAAA,GAAAU,EAAAV,GAAAW,EAA/Bb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCc,EAAG,+BAA+Bf,EAAMgB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAA,MACpDL,EAAMkB,IAAI,GAAAD,EAAAV,GAAA,MACPP,EAAMmB,QAAQ,GAAAhB;AAAAA,EAAA,GAAA;AAGhE;AAGO,SAASiB,EAAgBrB,GAAuD;AACrF,QAAMsB,IAASC,EAAW;AAAA,IAAEC,QAAQ;AAAA,EAAA,GAAmCxB,CAAK,GACtE,CAACC,GAAOC,CAAI,IAAIC,EAAWmB,GAAQ,CAAC,SAAS,SAAS,SAAS,UAAU,aAAa,SAAS,YAAY,KAAK,CAAC,GAKjHG,IAAQC,EAAW,MAAMzB,EAAMwB,SAAS,CAAA,CAAE,GAE1CE,IAAQA,MAA8C;AAC1D,QAAI1B,EAAM2B,cAAcC,OAAW,QAAO5B,EAAM0B;AAChD,UAAMG,IAAQ,OAAO7B,EAAM2B,aAAc,WAAW,GAAG3B,EAAM2B,SAAS,OAAO3B,EAAM2B;AACnF,WAAI,OAAO3B,EAAM0B,SAAU,WAAiB,GAAG1B,EAAM0B,KAAK,4BAA4BG,CAAK,KACpF;AAAA,MAAE,GAAG7B,EAAM0B;AAAAA,MAAO,2BAA2BG;AAAAA,IAAAA;AAAAA,EACtD;AAEA,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGStB,EAAUV,EAAMW,GAAG;AAAC,kBAAAqB,KAAA,cAAApB,EAAAoB,GAAAF,CAAA,GAAAjB,EAAAiB,GAAAhB,EADrBb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDc,EACL,yBACA,yBAAyBf,EAAMuB,MAAM,IACrC;AAAA,UAAE,+BAA+BvB,EAAMiC;AAAAA,QAAAA,GACvCjC,EAAMgB,KACR;AAAA,MAAC;AAAA,MAAA,IACDU,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT,EAAAa,GAAAI,EAEbC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEZ,EAAAA;AAAAA,MAAO;AAAA,MAAAL,UAAIkB,CAAAA,MAAIH,EAAMpC,GAAe;AAAA,QAAA,IAACoB,OAAI;AAAA,iBAAEmB,EAAKnB;AAAAA,QAAI;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAGkB,EAAKC;AAAAA,QAAW;AAAA,MAAA,CAAA;AAAA,IAAA,CAAmB,GAAA,IAAA,GAAArB,EAAAa,GAAA,MACpG9B,EAAMmB,UAAQ,IAAA,GAAAW;AAAAA,EAAA,GAAA;AAGrB;"}
+{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface DescriptionListEntry {\n  term: JSX.Element;\n  description: JSX.Element;\n}\n\n/**\n * `auto`: the term beside its description while the list is at least 420px\n * wide, above it when narrower (a container query on the list itself). `row`\n * and `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends JSX.HTMLAttributes<HTMLDListElement> {\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  /**\n   * \"auto\" (default): each term beside its value while the list is at least\n   * 420px wide, above it when narrower — the list's own width decides. So its\n   * content does not widen it: where the parent takes its width from its\n   * content (a flex item that does not grow, a popover, a table cell) the list\n   * has no width; give it one there, or use \"row\" / \"stacked\", which fix one\n   * layout and take their width from their content.\n   */\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nexport interface DescriptionItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** The field's name. */\n  term: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** One pair: the term and, as children, its description. */\nexport function DescriptionItem(props: ParentProps<DescriptionItemProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"term\", \"children\", \"ref\"]);\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-description-list__item\", local.class)}>\n      <dt class=\"smwb-description-list__term\">{local.term}</dt>\n      <dd class=\"smwb-description-list__details\">{local.children}</dd>\n    </div>\n  );\n}\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport function DescriptionList(props: ParentProps<DescriptionListProps>): JSX.Element {\n  const merged = mergeProps({ layout: \"auto\" as DescriptionListLayout }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"items\", \"layout\", \"termWidth\", \"dense\", \"children\", \"ref\"]);\n\n  // Read the items once: an inline array is re-evaluated on every read, creating\n  // the markup in it again, and during hydration the extra copies have no server\n  // DOM nodes to adopt.\n  const items = createMemo(() => local.items ?? []);\n\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      \"--smwb-description-term\": typeof local.termWidth === \"number\" ? `${local.termWidth}px` : local.termWidth,\n    });\n\n  return (\n    <dl\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-description-list\",\n        `smwb-description-list_${local.layout}`,\n        { \"smwb-description-list_dense\": local.dense },\n        local.class\n      )}\n      style={style()}\n    >\n      <For each={items()}>{(item) => <DescriptionItem term={item.term}>{item.description}</DescriptionItem>}</For>\n      {local.children}\n    </dl>\n  );\n}\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","props","local","rest","splitProps","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","term","children","DescriptionList","merged","mergeProps","layout","items","createMemo","style","mergeStyle","termWidth","_el$4","_tmpl$2","_ref$2","dense","_$createComponent","For","each","item","description"],"mappings":";;;;;;;;AA6CO,SAASA,EAAgBC,GAAuD;AACrF,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,QAAQ,YAAY,KAAK,CAAC;AAC5E,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IACsBC,EAAUV,EAAMW,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAN,CAAA,GAAAU,EAAAV,GAAAW,EAA/Bb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAAoCc,EAAG,+BAA+Bf,EAAMgB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAA,MACpDL,EAAMkB,IAAI,GAAAD,EAAAV,GAAA,MACPP,EAAMmB,QAAQ,GAAAhB;AAAAA,EAAA,GAAA;AAGhE;AAGO,SAASiB,EAAgBrB,GAAuD;AACrF,QAAMsB,IAASC,EAAW;AAAA,IAAEC,QAAQ;AAAA,EAAA,GAAmCxB,CAAK,GACtE,CAACC,GAAOC,CAAI,IAAIC,EAAWmB,GAAQ,CAAC,SAAS,SAAS,SAAS,UAAU,aAAa,SAAS,YAAY,KAAK,CAAC,GAKjHG,IAAQC,EAAW,MAAMzB,EAAMwB,SAAS,CAAA,CAAE,GAE1CE,IAAQA,MACZC,EAAW3B,EAAM0B,OAAO;AAAA,IACtB,2BAA2B,OAAO1B,EAAM4B,aAAc,WAAW,GAAG5B,EAAM4B,SAAS,OAAO5B,EAAM4B;AAAAA,EAAAA,CACjG;AAEH,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAGSrB,EAAUV,EAAMW,GAAG;AAAC,kBAAAoB,KAAA,cAAAnB,EAAAmB,GAAAF,CAAA,GAAAhB,EAAAgB,GAAAf,EADrBb,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDc,EACL,yBACA,yBAAyBf,EAAMuB,MAAM,IACrC;AAAA,UAAE,+BAA+BvB,EAAMgC;AAAAA,QAAAA,GACvChC,EAAMgB,KACR;AAAA,MAAC;AAAA,MAAA,IACDU,QAAK;AAAA,eAAEA,EAAAA;AAAAA,MAAO;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAT,EAAAY,GAAAI,EAEbC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEX,EAAAA;AAAAA,MAAO;AAAA,MAAAL,UAAIiB,CAAAA,MAAIH,EAAMnC,GAAe;AAAA,QAAA,IAACoB,OAAI;AAAA,iBAAEkB,EAAKlB;AAAAA,QAAI;AAAA,QAAA,IAAAC,WAAA;AAAA,iBAAGiB,EAAKC;AAAAA,QAAW;AAAA,MAAA,CAAA;AAAA,IAAA,CAAmB,GAAA,IAAA,GAAApB,EAAAY,GAAA,MACpG7B,EAAMmB,UAAQ,IAAA,GAAAU;AAAAA,EAAA,GAAA;AAGrB;"}

package/dist/components/dataDisplay/diffStat/diffStat.d.ts

@@ -0,0 +1,55 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+/** How many cells the bar has. */
+export declare const DIFF_STAT_CELLS = 5;
+/** One cell of the bar: whose it is, or nobody's. */
+export type DiffStatCell = "added" | "removed" | "neutral";
+/** The accessible name, built from the two counts as numbers (already normalised by `diffStatCount`). */
+export type DiffStatFormat = (added: number, removed: number) => string;
+/** "added 12345, removed 3" — the default accessible name; plain digits, so a speech engine reads one number. */
+export declare const DEFAULT_DIFF_STAT_FORMAT: DiffStatFormat;
+/**
+ * A count as the component takes it: a whole number, never below 0. Fractions are cut off,
+ * negative counts are 0, and so are NaN, `undefined` and ±Infinity (data that has not
+ * arrived yet, or arrived broken). The figures, the accessible name and the bar all use this
+ * one value, so they cannot disagree.
+ */
+export declare function diffStatCount(value: number): number;
+/**
+ * A count (as `diffStatCount` takes it) as digits, grouped by three with U+202F NARROW NO-BREAK SPACE ("1\u202f234"), the
+ * fraction dropped. The separator is fixed rather than taken from a locale on purpose: the
+ * server and the browser would group the same figure differently and break hydration. Pass
+ * `group` to an app that knows its reader's locale.
+ */
+export declare function groupDiffStatCount(value: number): string;
+/**
+ * Which cell belongs to which side (counts as `diffStatCount` takes them): each takes `floor(DIFF_STAT_CELLS * its share)`, so the
+ * cells the two sides leave over are neutral and 0 of 0 leaves all of them neutral. A side
+ * under a fifth of the change reaches no cell and shows in its figure only.
+ */
+export declare function diffStatCells(added: number, removed: number): DiffStatCell[];
+export interface DiffStatProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "role"> {
+    /** Lines added; the figure behind "+N". NaN, `undefined`, Infinity and negatives count as 0. */
+    added: number;
+    /** Lines removed; the figure behind "−M". NaN, `undefined`, Infinity and negatives count as 0. */
+    removed: number;
+    /** The five cells beside the figures. Shown by default, hidden in `compact`; set it either way. */
+    bar?: boolean | undefined;
+    /** The tab variant: smaller figures, and no bar unless `bar` asks for one. */
+    compact?: boolean | undefined;
+    /** How the accessible name is made from the two counts, as numbers: `DEFAULT_DIFF_STAT_FORMAT` unless given. */
+    format?: DiffStatFormat | undefined;
+    /** How each figure is written (it gets the count as `diffStatCount` takes it): `groupDiffStatCount` — three digits per group — unless given. */
+    group?: ((value: number) => string) | undefined;
+    /** Test id of the root `<span>`; `diff-stat` unless given. */
+    "data-testid"?: string | undefined;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * How big a change is: "+N −M" with the two figures' counts, and a five-cell bar of the
+ * same proportions. One accessible name for the whole ("added N, removed M"), so the
+ * digits are not read twice; the bar is the theme's success and error, shaded toward the
+ * surface ink to stay readable as text.
+ */
+export declare function DiffStat(props: DiffStatProps): JSX.Element;
+export default DiffStat;

package/dist/components/dataDisplay/diffStat/diffStat.js

@@ -0,0 +1,70 @@
+import { use as S, spread as v, mergeProps as A, insert as i, createComponent as $, effect as F, className as T, template as p } from "solid-js/web";
+import '../../../assets/styles/less/components/diffStat/diffStat.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
+import { mergeProps as P, splitProps as x, Show as D, Index as M } from "solid-js";
+import h from "clsx";
+import { mergeRefs as R } from "../../../primitives/mergeRefs.js";
+var O = /* @__PURE__ */ p("<span class=smwb-diff-stat__bar aria-hidden=true>"), E = /* @__PURE__ */ p("<span><span class=smwb-diff-stat__text aria-hidden=true><span class=smwb-diff-stat__added></span><span class=smwb-diff-stat__removed>"), I = /* @__PURE__ */ p("<span>");
+const c = 5, L = " ", y = (e, n) => `added ${e}, removed ${n}`;
+function o(e) {
+  return Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : 0;
+}
+function B(e) {
+  return String(o(e)).replace(/\B(?=(\d{3})+(?!\d))/g, L);
+}
+function N(e, n) {
+  const t = o(e), l = o(n), a = t + l, r = (s, m) => Array.from({
+    length: s
+  }, () => m);
+  if (a === 0) return r(c, "neutral");
+  const d = Math.floor(c * t / a), f = Math.floor(c * l / a);
+  return [...r(d, "added"), ...r(f, "removed"), ...r(c - d - f, "neutral")];
+}
+function H(e) {
+  const n = P({
+    format: y,
+    group: B
+  }, e), [t, l] = x(n, ["class", "added", "removed", "bar", "compact", "format", "group", "aria-label", "ref", "data-testid"]), a = () => o(t.added), r = () => o(t.removed), d = () => t.bar ?? !t.compact, f = () => t["aria-label"] ?? t.format(a(), r());
+  return (() => {
+    var s = E(), m = s.firstChild, u = m.firstChild, w = u.nextSibling, _ = R(t.ref);
+    return typeof _ == "function" && S(_, s), v(s, A(l, {
+      role: "img",
+      get "aria-label"() {
+        return f();
+      },
+      get "data-testid"() {
+        return t["data-testid"] ?? "diff-stat";
+      },
+      get class() {
+        return h("smwb-diff-stat", {
+          "smwb-diff-stat_compact": t.compact
+        }, t.class);
+      }
+    }), !1, !0), i(u, () => `+${t.group(a())}`), i(w, () => `−${t.group(r())}`), i(s, $(D, {
+      get when() {
+        return d();
+      },
+      get children() {
+        var g = O();
+        return i(g, $(M, {
+          get each() {
+            return N(a(), r());
+          },
+          children: (C) => (() => {
+            var b = I();
+            return F(() => T(b, h("smwb-diff-stat__cell", `smwb-diff-stat__cell_${C()}`))), b;
+          })()
+        })), g;
+      }
+    }), null), s;
+  })();
+}
+export {
+  y as DEFAULT_DIFF_STAT_FORMAT,
+  c as DIFF_STAT_CELLS,
+  H as DiffStat,
+  N as diffStatCells,
+  o as diffStatCount,
+  B as groupDiffStatCount
+};
+//# sourceMappingURL=diffStat.js.map

package/dist/components/dataDisplay/diffStat/diffStat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diffStat.js","sources":["../../../../src/components/dataDisplay/diffStat/diffStat.tsx"],"sourcesContent":["import { type JSX, Index, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/** How many cells the bar has. */\nexport const DIFF_STAT_CELLS = 5;\n\n/** One cell of the bar: whose it is, or nobody's. */\nexport type DiffStatCell = \"added\" | \"removed\" | \"neutral\";\n\n/** The accessible name, built from the two counts as numbers (already normalised by `diffStatCount`). */\nexport type DiffStatFormat = (added: number, removed: number) => string;\n\n// A narrow no-break space: the grouping separator, so a figure cannot break across lines.\nconst GROUP_SEPARATOR = \"\\u202f\";\n\n/** \"added 12345, removed 3\" — the default accessible name; plain digits, so a speech engine reads one number. */\nexport const DEFAULT_DIFF_STAT_FORMAT: DiffStatFormat = (added, removed) => `added ${added}, removed ${removed}`;\n\n/**\n * A count as the component takes it: a whole number, never below 0. Fractions are cut off,\n * negative counts are 0, and so are NaN, `undefined` and ±Infinity (data that has not\n * arrived yet, or arrived broken). The figures, the accessible name and the bar all use this\n * one value, so they cannot disagree.\n */\nexport function diffStatCount(value: number): number {\n  return Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;\n}\n\n/**\n * A count (as `diffStatCount` takes it) as digits, grouped by three with U+202F NARROW NO-BREAK SPACE (\"1\\u202f234\"), the\n * fraction dropped. The separator is fixed rather than taken from a locale on purpose: the\n * server and the browser would group the same figure differently and break hydration. Pass\n * `group` to an app that knows its reader's locale.\n */\nexport function groupDiffStatCount(value: number): string {\n  return String(diffStatCount(value)).replace(/\\B(?=(\\d{3})+(?!\\d))/g, GROUP_SEPARATOR);\n}\n\n/**\n * Which cell belongs to which side (counts as `diffStatCount` takes them): each takes `floor(DIFF_STAT_CELLS * its share)`, so the\n * cells the two sides leave over are neutral and 0 of 0 leaves all of them neutral. A side\n * under a fifth of the change reaches no cell and shows in its figure only.\n */\nexport function diffStatCells(added: number, removed: number): DiffStatCell[] {\n  const up = diffStatCount(added);\n  const down = diffStatCount(removed);\n  const all = up + down;\n  const cellsOf = (count: number, cell: DiffStatCell): DiffStatCell[] => Array.from({ length: count }, () => cell);\n  if (all === 0) return cellsOf(DIFF_STAT_CELLS, \"neutral\");\n\n  const upCells = Math.floor((DIFF_STAT_CELLS * up) / all);\n  const downCells = Math.floor((DIFF_STAT_CELLS * down) / all);\n  return [\n    ...cellsOf(upCells, \"added\"),\n    ...cellsOf(downCells, \"removed\"),\n    ...cellsOf(DIFF_STAT_CELLS - upCells - downCells, \"neutral\"),\n  ];\n}\n\nexport interface DiffStatProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"role\"> {\n  /** Lines added; the figure behind \"+N\". NaN, `undefined`, Infinity and negatives count as 0. */\n  added: number;\n  /** Lines removed; the figure behind \"−M\". NaN, `undefined`, Infinity and negatives count as 0. */\n  removed: number;\n  /** The five cells beside the figures. Shown by default, hidden in `compact`; set it either way. */\n  bar?: boolean | undefined;\n  /** The tab variant: smaller figures, and no bar unless `bar` asks for one. */\n  compact?: boolean | undefined;\n  /** How the accessible name is made from the two counts, as numbers: `DEFAULT_DIFF_STAT_FORMAT` unless given. */\n  format?: DiffStatFormat | undefined;\n  /** How each figure is written (it gets the count as `diffStatCount` takes it): `groupDiffStatCount` — three digits per group — unless given. */\n  group?: ((value: number) => string) | undefined;\n  /** Test id of the root `<span>`; `diff-stat` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * How big a change is: \"+N −M\" with the two figures' counts, and a five-cell bar of the\n * same proportions. One accessible name for the whole (\"added N, removed M\"), so the\n * digits are not read twice; the bar is the theme's success and error, shaded toward the\n * surface ink to stay readable as text.\n */\nexport function DiffStat(props: DiffStatProps): JSX.Element {\n  const merged = mergeProps({ format: DEFAULT_DIFF_STAT_FORMAT, group: groupDiffStatCount }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"added\",\n    \"removed\",\n    \"bar\",\n    \"compact\",\n    \"format\",\n    \"group\",\n    \"aria-label\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const upCount = (): number => diffStatCount(local.added);\n  const downCount = (): number => diffStatCount(local.removed);\n  const showBar = (): boolean => local.bar ?? !local.compact;\n  // An aria-label the caller gives wins over the one built from the figures.\n  const label = (): string => local[\"aria-label\"] ?? local.format(upCount(), downCount());\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"img\"\n      aria-label={label()}\n      data-testid={local[\"data-testid\"] ?? \"diff-stat\"}\n      class={cn(\"smwb-diff-stat\", { \"smwb-diff-stat_compact\": local.compact }, local.class)}\n    >\n      <span class=\"smwb-diff-stat__text\" aria-hidden=\"true\">\n        <span class=\"smwb-diff-stat__added\">{`+${local.group(upCount())}`}</span>\n        <span class=\"smwb-diff-stat__removed\">{`\\u2212${local.group(downCount())}`}</span>\n      </span>\n      <Show when={showBar()}>\n        <span class=\"smwb-diff-stat__bar\" aria-hidden=\"true\">\n          <Index each={diffStatCells(upCount(), downCount())}>\n            {(cell) => <span class={cn(\"smwb-diff-stat__cell\", `smwb-diff-stat__cell_${cell()}`)} />}\n          </Index>\n        </span>\n      </Show>\n    </span>\n  );\n}\n\nexport default DiffStat;\n"],"names":["DIFF_STAT_CELLS","GROUP_SEPARATOR","DEFAULT_DIFF_STAT_FORMAT","added","removed","diffStatCount","value","Number","isFinite","Math","max","trunc","groupDiffStatCount","String","replace","diffStatCells","up","down","all","cellsOf","count","cell","Array","from","length","upCells","floor","downCells","DiffStat","props","merged","mergeProps","format","group","local","rest","splitProps","upCount","downCount","showBar","bar","compact","label","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","children","_el$5","_tmpl$","Index","each","_el$6","_tmpl$3","_$effect","_$className"],"mappings":"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"}

package/dist/components/dataDisplay/diffStat/index.d.ts

@@ -0,0 +1,2 @@
+export { DiffStat, diffStatCells, diffStatCount, groupDiffStatCount, DEFAULT_DIFF_STAT_FORMAT, DIFF_STAT_CELLS, default, } from "./diffStat";
+export type { DiffStatProps, DiffStatCell, DiffStatFormat } from "./diffStat";