@eifi1/ui-kit 0.17.0 → 0.19.0

package/dist/components/button-group.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-C4uB_zmg.js';
+import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -51,6 +51,18 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —

package/dist/components/calculator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { C as CalculatorLabels } from '../kit-labels-C4uB_zmg.js';
+import { C as CalculatorLabels } from '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -50,6 +50,18 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not

package/dist/components/chip.d.ts

@@ -74,6 +74,13 @@ interface ChipLinkProps {
     [key: `aria-${string}`]: string | boolean | number | undefined;
     [key: `data-${string}`]: unknown;
 }
+/**
+ * Re-snap every chip rendered with `snapEdges`, now. The kit already re-snaps when a
+ * chip renders, resizes, or the window or the ratio changes; call this after moving
+ * chips some other way (a side panel sliding in beside a table of status chips),
+ * since a move is not something an observer can see.
+ */
+declare function refreshChipEdges(): void;
 interface ChipBaseProps {
     children: ReactNode;
     tone?: ChipTone;
@@ -156,6 +163,23 @@ interface ChipBaseProps {
     id?: string;
     /** A native tooltip. For anything a user must read, prefer the kit's `Tooltip`. */
     title?: string;
+    /**
+     * Even hairlines on fractional-ratio displays (0.18.0). At a device-pixel ratio of
+     * 1.25 — a 125 % Windows display, or 125 % zoom — Chrome draws a chip's two 1px
+     * side borders on different sub-pixel phases, one crisp and one a half-strength
+     * smear that reads as a thinner line (worst on the 60 %-alpha `danger` border).
+     * `snapEdges` widens the chip by under 4px, from where it sits, so the two edges
+     * rasterise as mirror images, and centres its content in the extra.
+     *
+     * Off by default: it reads the chip's position (batched for every snapped chip into
+     * one pass a frame, through one shared observer), and the fix is only as fresh as the
+     * last pass — it re-snaps on render, resize, zoom and ratio change, but not when
+     * something else moves the chip; call {@link refreshChipEdges} then. At an integer
+     * ratio, and at 1.5, it writes nothing. Turn it on for status chips that sit in a
+     * column and are compared side by side; a chip with no visible border (`dot`) has
+     * nothing to snap.
+     */
+    snapEdges?: boolean;
 }
 /**
  * A chip is a link OR a button, never both — so the types say so. Before 0.7.0 both were
@@ -280,4 +304,4 @@ interface ChipInputProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange
  */
 declare function ChipInput({ value, onChange, placeholder, label, ariaLabel, validate, separators, allowDuplicates, max, tone, size, disabled, invalid, error, labels, className, "aria-label": ariaLabelAttr, ...rest }: ChipInputProps): react.JSX.Element;
 
-export { Chip, type ChipHue, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipLinkProps, type ChipProps, type ChipShape, type ChipSize, type ChipTone, type ChipVariant, DEFAULT_CHIP_INPUT_LABELS, resolveChipInputLabels };
+export { Chip, type ChipHue, ChipInput, type ChipInputLabels, type ChipInputProps, type ChipLinkProps, type ChipProps, type ChipShape, type ChipSize, type ChipTone, type ChipVariant, DEFAULT_CHIP_INPUT_LABELS, refreshChipEdges, resolveChipInputLabels };

package/dist/components/chip.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement, useId, useRef, useState } from "react";
+import { forwardRef, isValidElement, useCallback, useId, useLayoutEffect, useRef, useState } from "react";
 import { Check, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
@@ -160,6 +160,130 @@ const SIZE = {
     remove: "size-4"
   }
 };
+function chipEdgeGrid(dpr) {
+  for (let n = 1; n <= 4; n++) if (Math.abs(n * dpr - Math.round(n * dpr)) < 1e-3) return n;
+  return 0;
+}
+function snappedChipEdgeWidth(natural, left, dpr) {
+  const n = chipEdgeGrid(dpr);
+  if (n <= 2) return natural;
+  const l = Math.round(left);
+  let w = Math.ceil(natural - 0.01);
+  while (((2 * l + w) % n + n) % n !== 0) w++;
+  return w;
+}
+const snapped = /* @__PURE__ */ new Set();
+const written = /* @__PURE__ */ new WeakMap();
+let snapFrame = 0;
+let snapObserver = null;
+let ratioQuery = null;
+function clearOwn(el) {
+  const own = written.get(el);
+  if (own !== void 0 && el.style.minWidth === own) el.style.minWidth = "";
+  written.delete(el);
+}
+function refreshChipEdges() {
+  if (snapFrame) {
+    cancelAnimationFrame(snapFrame);
+    snapFrame = 0;
+  }
+  if (typeof window === "undefined" || !snapped.size) return;
+  const dpr = window.devicePixelRatio || 1;
+  const els = [...snapped];
+  for (const el of els) clearOwn(el);
+  const n = chipEdgeGrid(dpr);
+  if (n <= 2) return;
+  let pending = els;
+  for (let pass = 0; pass <= n && pending.length; pass++) {
+    const reads = pending.map((el) => {
+      const r = el.getBoundingClientRect();
+      const label = el.querySelector(".truncate");
+      if (!r.width || label && label.scrollWidth > label.clientWidth) return null;
+      const width = Math.round(r.width * 64) / 64;
+      const target = snappedChipEdgeWidth(width, r.left + window.scrollX, dpr);
+      return target === width ? null : target;
+    });
+    const next = [];
+    pending.forEach((el, i) => {
+      const target = reads[i];
+      if (target == null) return;
+      if (pass === n) {
+        clearOwn(el);
+        return;
+      }
+      const own = written.get(el);
+      const value = `${pass > 0 && own !== void 0 ? parseFloat(own) + 1 : target}px`;
+      el.style.minWidth = value;
+      written.set(el, value);
+      next.push(el);
+    });
+    pending = next;
+  }
+}
+function scheduleChipEdges() {
+  if (snapFrame || typeof requestAnimationFrame === "undefined") return;
+  snapFrame = requestAnimationFrame(() => {
+    snapFrame = 0;
+    refreshChipEdges();
+  });
+}
+function watchRatio() {
+  ratioQuery?.removeEventListener("change", onRatioChange);
+  ratioQuery = typeof window.matchMedia === "function" ? window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`) : null;
+  ratioQuery?.addEventListener("change", onRatioChange);
+}
+function onRatioChange() {
+  watchRatio();
+  scheduleChipEdges();
+}
+function registerSnap(el) {
+  if (snapped.has(el)) return;
+  if (!snapped.size) {
+    if (typeof ResizeObserver !== "undefined") snapObserver = new ResizeObserver(scheduleChipEdges);
+    window.addEventListener("resize", scheduleChipEdges);
+    watchRatio();
+  }
+  snapped.add(el);
+  snapObserver?.observe(el);
+  scheduleChipEdges();
+}
+function unregisterSnap(el) {
+  if (!snapped.delete(el)) return;
+  snapObserver?.unobserve(el);
+  clearOwn(el);
+  if (snapped.size) return;
+  snapObserver?.disconnect();
+  snapObserver = null;
+  window.removeEventListener("resize", scheduleChipEdges);
+  ratioQuery?.removeEventListener("change", onRatioChange);
+  ratioQuery = null;
+}
+function useSnapEdges(on) {
+  const node = useRef(null);
+  const ref = useCallback(
+    (el) => {
+      if (el === node.current) return;
+      const prev = node.current;
+      node.current = el;
+      if (prev) queueMicrotask(() => node.current !== prev && unregisterSnap(prev));
+      if (el && on) registerSnap(el);
+    },
+    [on]
+  );
+  useLayoutEffect(() => {
+    const el = node.current;
+    if (!el) return;
+    if (on) {
+      registerSnap(el);
+      scheduleChipEdges();
+    } else unregisterSnap(el);
+  });
+  return ref;
+}
+function assignRef(target, value) {
+  if (typeof target === "function") target(value);
+  else if (target) target.current = value;
+}
 const CHIP_PILL = "inline-flex max-w-full items-center rounded-full border transition-colors";
 const CHIP_RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
 const CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;
@@ -185,6 +309,7 @@ const Chip = forwardRef(function Chip2({
   role,
   onKeyDown,
   onFocus,
+  snapEdges = false,
   ...rest
 }, ref) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
@@ -198,6 +323,15 @@ const Chip = forwardRef(function Chip2({
     surfaceOf(tone, variant, selected),
     disabled && "cursor-default opacity-50"
   );
+  const snap = snapEdges && !dot;
+  const snapRef = useSnapEdges(snap);
+  const ownRef = useCallback(
+    (el) => {
+      snapRef(el);
+      assignRef(ref, el);
+    },
+    [snapRef, ref]
+  );
   const look = cn(
     CHIP_BASE,
     s.body,
@@ -207,6 +341,8 @@ const Chip = forwardRef(function Chip2({
     interactive && !disabled && "cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110",
     // An inert dot chip is text in a column: no inset, so it aligns with the header.
     dot && !interactive && "px-0",
+    // The under-4px a snap adds is split between the two sides, not stacked at the end.
+    snap && "justify-center",
     className
   );
   const isCheckbox = checkbox && !!onClick && !href;
@@ -261,7 +397,7 @@ const Chip = forwardRef(function Chip2({
       children: /* @__PURE__ */ jsx(X, { className: s.remove, "aria-hidden": true })
     }
   ) : null;
-  const pill = (inner2) => /* @__PURE__ */ jsxs("span", { className: cn(CHIP_PILL, s.tail, radius, surface, className), children: [
+  const pill = (inner2) => /* @__PURE__ */ jsxs("span", { ref: snap ? snapRef : void 0, className: cn(CHIP_PILL, s.tail, radius, surface, snap && "justify-center", className), children: [
     inner2,
     remove
   ] });
@@ -278,7 +414,7 @@ const Chip = forwardRef(function Chip2({
     const onLinkClick = onClick;
     const linkProps = {
       ...rest,
-      ref,
+      ref: remove ? ref : ownRef,
       href,
       onClick: onLinkClick,
       "aria-current": selected ? "true" : void 0,
@@ -293,7 +429,7 @@ const Chip = forwardRef(function Chip2({
     ) : /* @__PURE__ */ jsx(
       "a",
       {
-        ref,
+        ref: remove ? ref : ownRef,
         href,
         "aria-current": selected ? "true" : void 0,
         onClick: onLinkClick,
@@ -309,7 +445,7 @@ const Chip = forwardRef(function Chip2({
     const button = /* @__PURE__ */ jsx(
       "button",
       {
-        ref,
+        ref: remove ? ref : ownRef,
         type: "button",
         onClick: onButtonClick,
         disabled,
@@ -330,7 +466,7 @@ const Chip = forwardRef(function Chip2({
     /* @__PURE__ */ jsxs(
       "span",
       {
-        ref,
+        ref: ownRef,
         className: look,
         tabIndex,
         role,
@@ -566,6 +702,7 @@ export {
   Chip,
   ChipInput,
   DEFAULT_CHIP_INPUT_LABELS,
+  refreshChipEdges,
   resolveChipInputLabels
 };
 //# sourceMappingURL=chip.js.map