@eifi1/ui-kit 0.4.0

package/dist/components/search-field.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { Search, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { FIELD_BASE } from "./ui.js";
+const SearchField = forwardRef(function SearchField2({ value, onChange, label, clearLabel, className, placeholder, ...rest }, ref) {
+  const innerRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Search,
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (node) => {
+          innerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        type: "search",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        "aria-label": label,
+        placeholder: placeholder ?? label,
+        name: "search",
+        autoComplete: "off",
+        autoCapitalize: "none",
+        autoCorrect: "off",
+        spellCheck: false,
+        ...rest,
+        className: cn(
+          FIELD_BASE,
+          "pl-9",
+          // Room for our own "×" only when there is one; a field that can't be
+          // cleared has no reason to reserve the space.
+          clearLabel === void 0 ? "pr-3" : "pr-9",
+          "[&::-webkit-search-cancel-button]:appearance-none"
+        )
+      }
+    ),
+    clearLabel !== void 0 && value !== "" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onChange("");
+          innerRef.current?.focus();
+        },
+        "aria-label": clearLabel,
+        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300",
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+      }
+    )
+  ] });
+});
+SearchField.displayName = "SearchField";
+export {
+  SearchField
+};
+//# sourceMappingURL=search-field.js.map

package/dist/components/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\" | \"type\"> {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /** The field's accessible name. Required, and deliberately not defaulted to the\n   *  placeholder: a placeholder disappears the moment someone types, so a field\n   *  named only by one is unnamed exactly when a screen-reader user is working in\n   *  it. Two of the boxes this replaced had no name but the placeholder. */\n  label: string;\n  /** Names the clear button. Omit it and no clear button is rendered — which is a\n   *  decision, not a default: a filter you can type into and not untype is the\n   *  complaint that produced the button on three of these four screens. */\n  clearLabel?: string;\n  className?: string;\n}\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  { value, onChange, label, clearLabel, className, placeholder, ...rest },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400\"\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={label}\n        placeholder={placeholder ?? label}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          FIELD_BASE,\n          \"pl-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? \"pr-3\" : \"pr-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":"AA4DI,SACE,KADF;AA5DJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAkDpB,MAAM,cAAc,WAA+C,SAASA,aACjF,EAAE,OAAO,UAAU,OAAO,YAAY,WAAW,aAAa,GAAG,KAAK,GACtE,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAC9C,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,eAAe,SAAY,SAAS;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}

package/dist/components/settings-fields.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ThemePreference } from '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
+
+/**
+ * App-agnostic settings-field components (feedback #333): the language + theme
+ * controls that every app's settings page needs, so they live in @hb/ui and the
+ * app just supplies the current value, a change handler and translated labels.
+ * The app owns WHERE these render (its own settings page) and any app-specific
+ * fields around them.
+ */
+interface ThemeSettingProps {
+    value: ThemePreference;
+    onChange: (value: ThemePreference) => void;
+    label: ReactNode;
+    /** Translated option labels. */
+    optionLabels: {
+        system: string;
+        light: string;
+        dark: string;
+    };
+    id?: string;
+}
+declare function ThemeSetting({ value, onChange, label, optionLabels, id }: ThemeSettingProps): react.JSX.Element;
+interface LanguageSettingProps {
+    value: string;
+    onChange: (code: string) => void;
+    label: ReactNode;
+    options: {
+        code: string;
+        label: string;
+    }[];
+    id?: string;
+}
+declare function LanguageSetting({ value, onChange, label, options, id }: LanguageSettingProps): react.JSX.Element;
+
+export { LanguageSetting, type LanguageSettingProps, ThemeSetting, type ThemeSettingProps };

package/dist/components/settings-fields.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "./ui.js";
+function ThemeSetting({ value, onChange, label, optionLabels, id }) {
+  return /* @__PURE__ */ jsxs(Select, { id, label, value, onChange: (e) => onChange(e.target.value), children: [
+    /* @__PURE__ */ jsx("option", { value: "system", children: optionLabels.system }),
+    /* @__PURE__ */ jsx("option", { value: "light", children: optionLabels.light }),
+    /* @__PURE__ */ jsx("option", { value: "dark", children: optionLabels.dark })
+  ] });
+}
+function LanguageSetting({ value, onChange, label, options, id }) {
+  return /* @__PURE__ */ jsx(Select, { id, label, value, onChange: (e) => onChange(e.target.value), children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o.code, children: o.label }, o.code)) });
+}
+export {
+  LanguageSetting,
+  ThemeSetting
+};
+//# sourceMappingURL=settings-fields.js.map

package/dist/components/settings-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/settings-fields.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./ui\";\nimport type { ThemePreference } from \"../theme/theme-store\";\n\n/**\n * App-agnostic settings-field components (feedback #333): the language + theme\n * controls that every app's settings page needs, so they live in @hb/ui and the\n * app just supplies the current value, a change handler and translated labels.\n * The app owns WHERE these render (its own settings page) and any app-specific\n * fields around them.\n */\n\nexport interface ThemeSettingProps {\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  label: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\nexport function ThemeSetting({ value, onChange, label, optionLabels, id }: ThemeSettingProps) {\n  return (\n    <Select id={id} label={label} value={value} onChange={(e) => onChange(e.target.value as ThemePreference)}>\n      <option value=\"system\">{optionLabels.system}</option>\n      <option value=\"light\">{optionLabels.light}</option>\n      <option value=\"dark\">{optionLabels.dark}</option>\n    </Select>\n  );\n}\n\nexport interface LanguageSettingProps {\n  value: string;\n  onChange: (code: string) => void;\n  label: ReactNode;\n  options: { code: string; label: string }[];\n  id?: string;\n}\n\nexport function LanguageSetting({ value, onChange, label, options, id }: LanguageSettingProps) {\n  return (\n    <Select id={id} label={label} value={value} onChange={(e) => onChange(e.target.value)}>\n      {options.map((o) => (\n        <option key={o.code} value={o.code}>\n          {o.label}\n        </option>\n      ))}\n    </Select>\n  );\n}\n"],"mappings":"AAuBI,SACE,KADF;AAtBJ,SAAS,cAAc;AAoBhB,SAAS,aAAa,EAAE,OAAO,UAAU,OAAO,cAAc,GAAG,GAAsB;AAC5F,SACE,qBAAC,UAAO,IAAQ,OAAc,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB,GACrG;AAAA,wBAAC,YAAO,OAAM,UAAU,uBAAa,QAAO;AAAA,IAC5C,oBAAC,YAAO,OAAM,SAAS,uBAAa,OAAM;AAAA,IAC1C,oBAAC,YAAO,OAAM,QAAQ,uBAAa,MAAK;AAAA,KAC1C;AAEJ;AAUO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,SAAS,GAAG,GAAyB;AAC7F,SACE,oBAAC,UAAO,IAAQ,OAAc,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GACjF,kBAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,EAAE,MAC3B,YAAE,SADQ,EAAE,IAEf,CACD,GACH;AAEJ;","names":[]}

package/dist/components/swipeable-row.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * One armed swipe action: what it does, and how the reveal panel presents it.
+ *
+ * The two background classes are the idle and armed states. Before the first
+ * threshold is crossed the panel previews the nearest action in its IDLE colour, so
+ * the user can see what a little more drag will do; crossing the threshold flips it to
+ * `armedClassName`. Passing the same value for both simply removes that feedback.
+ */
+interface SwipeAction {
+    onCommit: () => void;
+    label: string;
+    /** Rendered inside the panel. Icons stay the consumer's choice — this package
+     *  ships no opinion about which icon set an app uses. */
+    icon?: ReactNode;
+    /** Background utility class while the action is previewed but not yet armed. */
+    className: string;
+    /** Background utility class once the drag has passed this action's threshold. */
+    armedClassName: string;
+}
+interface SwipeableRowProps {
+    /** Actions committed by dragging RIGHT, nearest threshold first. */
+    right?: SwipeAction[];
+    /** Actions committed by dragging LEFT, nearest threshold first. */
+    left?: SwipeAction[];
+    /** Turn the gesture off — an open editor, a pending mutation, a locked row. */
+    enabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A row whose horizontal drag reveals actions underneath it.
+ *
+ * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be
+ * two half-width blocks side by side, which capped the drag at half the row so the
+ * opposite panel could never be exposed — and on a row bound to three actions that
+ * left ~55px between stages on a phone, close enough that the wrong one committed.
+ * Only the side being dragged toward is painted now, so full width costs nothing:
+ * at rest the content covers both anyway, and a drag only ever reveals one side.
+ *
+ * Thresholds are still not fixed pixel values — they are spread evenly across the
+ * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed
+ * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every
+ * action reachable and roughly doubles the room between them.
+ *
+ * **Whether the action will fire is stated three ways, not one** (feedback #174): the
+ * panel goes from dimmed to solid, the icon grows and gains a filled disc, and the
+ * label turns bold — plus the existing haptic tick per newly armed stage. A colour
+ * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot
+ * distinguish the two tones.
+ *
+ * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe
+ * would also fire whatever click handler the row content carries (expanding it, opening
+ * a dialog) on top of the action it just committed.
+ */
+declare function SwipeableRow({ right, left, enabled, className, children, }: SwipeableRowProps): react.JSX.Element;
+
+export { type SwipeAction, SwipeableRow, type SwipeableRowProps };

package/dist/components/swipeable-row.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { useRowSwipe } from "../hooks/use-row-swipe.js";
+const PEEK_PX = 40;
+function SwipeableRow({
+  right,
+  left,
+  enabled = true,
+  className,
+  children
+}) {
+  const rowRef = useRef(null);
+  const [rowWidth, setRowWidth] = useState(0);
+  useEffect(() => {
+    const el = rowRef.current;
+    if (!el) return;
+    setRowWidth(el.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      for (const e of entries) setRowWidth(e.contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const rightActions = right ?? [];
+  const leftActions = left ?? [];
+  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);
+  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;
+  const spread = (actions) => actions.map((a, i) => ({
+    threshold: Math.round(maxDrag * (i + 1) / (actions.length + 1)),
+    onCommit: a.onCommit
+  }));
+  const swipe = useRowSwipe({
+    enabled: active,
+    rightStages: spread(rightActions),
+    leftStages: spread(leftActions),
+    maxDrag
+  });
+  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;
+  const prevArmed = useRef(-1);
+  useEffect(() => {
+    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);
+    prevArmed.current = armedNow;
+  }, [armedNow]);
+  const dx = swipe.dx;
+  const lastSide = useRef("right");
+  if (dx !== 0) lastSide.current = dx < 0 ? "left" : "right";
+  const draggingLeft = dx !== 0 ? dx < 0 : lastSide.current === "left";
+  const shown = draggingLeft ? leftActions[Math.max(0, swipe.armedLeftIndex)] : rightActions[Math.max(0, swipe.armedRightIndex)];
+  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;
+  return /* @__PURE__ */ jsxs("div", { ref: rowRef, className: cn("relative overflow-hidden", className), children: [
+    active && shown && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
+          "text-xs font-medium text-white transition-all",
+          // Dimmed until the drag has actually passed a threshold: "nothing will
+          // happen yet" has to look different from "let go and this fires", and on
+          // a moving row a one-step colour change was too quiet to notice.
+          armed ? "opacity-100" : "opacity-60",
+          armed ? shown.armedClassName : shown.className,
+          // The panel is anchored to the edge the row is uncovering, so the label
+          // sits where the eye already is rather than across the screen.
+          draggingLeft && "flex-row-reverse"
+        ),
+        children: [
+          shown.icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex shrink-0 items-center justify-center rounded-full transition-all",
+                // Armed, the icon gets a disc of its own and grows — a second,
+                // non-colour signal, and the one that stays readable at a glance.
+                armed ? "size-8 scale-110 bg-white/25" : "size-7 bg-white/10"
+              ),
+              children: shown.icon
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn("truncate transition-all", armed && "text-sm font-semibold"), children: shown.label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClickCapture: (e) => {
+          if (!swipe.consumeClick()) return;
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        className: cn(
+          "relative bg-[var(--bg-surface)]",
+          // A mouse drag is a supported way to swipe (use-row-swipe gates only on
+          // the button, not the pointer type), and a horizontal mouse drag over
+          // text also SELECTS that text — so committing an action left the row
+          // highlighted blue. Suppressed only while dragging, so text in a row at
+          // rest stays selectable.
+          swipe.dragging ? "select-none" : "transition-transform duration-150"
+        ),
+        style: {
+          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : void 0,
+          touchAction: active ? "pan-y" : void 0
+        },
+        ...active ? swipe.handlers : {},
+        children
+      }
+    )
+  ] });
+}
+export {
+  SwipeableRow
+};
+//# sourceMappingURL=swipeable-row.js.map

package/dist/components/swipeable-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The two background classes are the idle and armed states. Before the first\n * threshold is crossed the panel previews the nearest action in its IDLE colour, so\n * the user can see what a little more drag will do; crossing the threshold flips it to\n * `armedClassName`. Passing the same value for both simply removes that feedback.\n */\nexport interface SwipeAction {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n  /** Background utility class while the action is previewed but not yet armed. */\n  className: string;\n  /** Background utility class once the drag has passed this action's threshold. */\n  armedClassName: string;\n}\n\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. */\n  enabled?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from dimmed to solid, the icon grows and gains a filled disc, and the\n * label turns bold — plus the existing haptic tick per newly armed stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Written during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms) and `setState` in an effect body is an eslint error in\n  // the consuming app. The value is derived from this render's own dx, so a\n  // concurrent re-render recomputes it identically.\n  const lastSide = useRef<\"left\" | \"right\">(\"right\");\n  if (dx !== 0) lastSide.current = dx < 0 ? \"left\" : \"right\";\n  const draggingLeft = dx !== 0 ? dx < 0 : lastSide.current === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {active && shown && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium text-white transition-all\",\n            // Dimmed until the drag has actually passed a threshold: \"nothing will\n            // happen yet\" has to look different from \"let go and this fires\", and on\n            // a moving row a one-step colour change was too quiet to notice.\n            armed ? \"opacity-100\" : \"opacity-60\",\n            armed ? shown.armedClassName : shown.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen.\n            draggingLeft && \"flex-row-reverse\",\n          )}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance.\n                armed ? \"size-8 scale-110 bg-white/25\" : \"size-7 bg-white/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-[var(--bg-surface)]\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,34 @@
+import * as react from 'react';
+
+interface ToggleOption<T extends string> {
+    value: T;
+    label: string;
+    className?: string;
+}
+interface ToggleGroupProps<T extends string> {
+    value: T;
+    onChange: (value: T) => void;
+    options: ToggleOption<T>[];
+    className?: string;
+    /** Applied to every option button (e.g. to tune height/rounding to match
+     *  adjacent fields). Per-option `className` still wins over this. */
+    optionClassName?: string;
+    ariaLabel?: string;
+    /**
+     * Show, refuse the change (Keksdose live #288: a payment dated in the future has no
+     * state to set).
+     *
+     * Whatever `value` says stays pressed and keeps its own fill rather than going grey
+     * with the rest — a reader who cannot see WHICH option is chosen has been told less
+     * than before it was disabled. A caller with nothing to show passes no value, and
+     * the group renders dimmed with nothing pressed, which is the shape Keksdose's
+     * status picker uses for a row whose status does not exist yet.
+     *
+     * On the whole GROUP, not per option: a segmented control where some segments are
+     * live and others are not is a menu with holes in it, and no caller here wants one.
+     */
+    disabled?: boolean;
+}
+declare function ToggleGroup<T extends string>({ value, onChange, options, className, optionClassName, ariaLabel, disabled, }: ToggleGroupProps<T>): react.JSX.Element;
+
+export { ToggleGroup };

package/dist/components/toggle-group.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+function ToggleGroup({
+  value,
+  onChange,
+  options,
+  className,
+  optionClassName,
+  ariaLabel,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled || void 0,
+      className: cn(
+        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment
+        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were
+        // Keksdose live #268's rework: the pressed segment wears a saturated fill and
+        // an unpressed neighbour wears a pale hover fill, and with a shared edge the
+        // two rectangles read as one smeared shape — *"the boundary of the selected
+        // option and hovering next to it overlays the boundary of the selected
+        // button"*. A gap is what makes each segment its own chip; it cannot be
+        // undone by a caller's per-option colour, which a hover-only fix could.
+        //
+        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every
+        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a
+        // phone does see is the focus ring — see the segment's own note below.)
+        "inline-flex w-full gap-0.5 rounded-md border border-slate-300 bg-white p-0.5 shadow-sm dark:border-slate-700 dark:bg-slate-900",
+        // The whole group fades, the way every other disabled control in this
+        // package does; `cursor-not-allowed` is on the buttons, which is what a
+        // pointer is actually over.
+        disabled && "opacity-60",
+        className
+      ),
+      children: options.map((opt) => {
+        const active = opt.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": active,
+            disabled,
+            onClick: () => onChange(opt.value),
+            className: cn(
+              // `truncate` (which carries whitespace-nowrap) rather than letting a
+              // label wrap: a segmented control sizes its whole row to the tallest
+              // option, so one two-word option — Keksdose feedback #147's "Where I
+              // am" — silently doubles the height of every segment beside it.
+              //
+              // `basis-auto` is what keeps that ellipsis a LAST resort rather than
+              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a
+              // shrink-to-fit group (`w-auto`) still resolves to the sum of the
+              // labels' widths — and then splits it EQUALLY, so the short option
+              // got 66px it did not need and "Where I am" got 66 of the 81 it did:
+              // truncated at 1778px of free screen. Basing each segment on its own
+              // content and sharing only the LEFTOVER space keeps a full-width
+              // group's segments near-equal and an auto-width group's exact.
+              //
+              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring
+              // is a box-shadow that spreads OUTWARD, so on a flush group it painted
+              // 2px of slate over both neighbours and over the container's own border
+              // — and on a phone it appeared on every TAP, because a tap focuses the
+              // button. That is the other half of what live #268's rework saw
+              // overlaying the selected segment's boundary. Inset keeps the ring
+              // inside the segment it belongs to; focus-visible keeps it for the
+              // keyboard, which is the only input that needs it.
+              "min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-400",
+              active ? "bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900" : "text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800",
+              // No hover fill on a group that cannot be changed — a segment that
+              // lights up under the pointer is an offer, and there is none here.
+              disabled && "cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent",
+              optionClassName,
+              opt.className
+            ),
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+export {
+  ToggleGroup
+};
+//# sourceMappingURL=toggle-group.js.map

package/dist/components/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\ninterface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\ninterface ToggleGroupProps<T extends string> {\n  value: T;\n  onChange: (value: T) => void;\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n}\n\nexport function ToggleGroup<T extends string>({\n  value,\n  onChange,\n  options,\n  className,\n  optionClassName,\n  ariaLabel,\n  disabled = false,\n}: ToggleGroupProps<T>) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-slate-300 bg-white p-0.5 shadow-sm dark:border-slate-700 dark:bg-slate-900\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      {options.map((opt) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            disabled={disabled}\n            onClick={() => onChange(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of slate over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              \"min-w-0 flex-1 basis-auto truncate rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-slate-400\",\n              active\n                ? \"bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900\"\n                : \"text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"AA0EU;AA1EV,SAAS,UAAU;AAiCZ,SAAS,YAA8B;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MAIZ,iBAAe,YAAY;AAAA,MAC3B,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT;AAAA;AAAA;AAAA;AAAA,QAIA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEC,kBAAQ,IAAI,CAAC,QAAQ;AACpB,cAAM,SAAS,IAAI,UAAU;AAC7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd;AAAA,YACA,SAAS,MAAM,SAAS,IAAI,KAAK;AAAA,YACjC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAuBT;AAAA,cACA,SACI,kEACA;AAAA;AAAA;AAAA,cAGJ,YAAY;AAAA,cACZ;AAAA,cACA,IAAI;AAAA,YACN;AAAA,YAEC,cAAI;AAAA;AAAA,UAxCA,IAAI;AAAA,QAyCX;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,86 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AnchorRect } from '../hooks/use-anchored-rect.js';
+
+type TooltipSide = "top" | "bottom" | "left" | "right";
+/**
+ * Hover/focus label for a control.
+ *
+ * Two implementations, and the choice matters more than it looks. The default is
+ * CSS-only: the bubble is always mounted next to the trigger and fades in on
+ * `:hover`, which costs no state and works in a plain render test. The `portal`
+ * variant mounts the bubble in `document.body` only while hovered, positioned by
+ * measurement.
+ *
+ * ⚠️ **A bubble that repeats a value has to be redactable.** The consuming app blurs
+ * `[data-private]` under a `demo-mode` class on `<html>` — and the portalled bubble is
+ * mounted on `document.body`, which is INSIDE that class, so the rule reaches it as
+ * long as the bubble is tagged. It is not tagged by default, because most labels are
+ * UI strings; pass `redact` on the ones that repeat the user's own data (a truncated
+ * payee, an account name, a memo). Getting this wrong is silent: the trigger blurs,
+ * the bubble spells the value out on hover.
+ *
+ * ⚠️ **An empty label renders nothing at all.** `title={payee ?? ""}` is an ordinary
+ * shape at a call site that reveals truncated text, and the native attribute answers
+ * it by showing no tooltip. A component that faithfully rendered an empty bubble
+ * would be a worse `title`, so the emptiness check is here rather than at every call
+ * site that could forget it.
+ *
+ * ⚠️ **Inside a scroll container, use `portal`.** An always-mounted bubble is
+ * absolutely positioned, but an absolutely positioned descendant still counts
+ * towards its scroll-container ancestor's scrollable overflow — so an invisible
+ * bubble on a control near the right edge makes the container scroll sideways
+ * with nothing to reveal. That is what Keksdose feedback dev#488 reported on the
+ * admin roster: 66px of horizontal scroll on a table that fit, 44px of it owed to
+ * tooltips nobody could see. The portalled bubble is `position: fixed` and absent
+ * until hovered, so it adds no width — and, being outside the container, it also
+ * cannot be clipped by it.
+ */
+declare function Tooltip({ label, side, className, portal, redact, children, }: {
+    label: ReactNode;
+    side?: TooltipSide;
+    className?: string;
+    portal?: boolean;
+    /** Tag the bubble `data-private`, for a label that repeats the user's own data. */
+    redact?: boolean;
+    children: ReactNode;
+}): react.JSX.Element;
+interface TooltipSize {
+    width: number;
+    height: number;
+}
+interface TooltipViewport {
+    width: number;
+    height: number;
+}
+interface TooltipPlacement {
+    left: number;
+    top: number;
+    /** Which side it ended up on, which need not be the one that was asked for. */
+    side: TooltipSide;
+}
+/**
+ * Where the bubble actually goes, given how big it turned out to be.
+ *
+ * Two rules, and they are separate because they fix separate failures.
+ *
+ * **Turn round when the preferred side has no room.** `side` says which side of
+ * the trigger the label reads best on, and on a form near the left edge of the
+ * window that side is off the screen — the capped bubble can only wrap, not
+ * move, so what the reader gets is a sentence with its first half outside the
+ * glass. Flipped only when the *other* side is genuinely better: a trigger in a
+ * viewport too narrow for the bubble either way keeps the side it asked for, and
+ * the clamp below does what it can.
+ *
+ * **Then clamp both axes.** The cross axis is the one that needs it — a `top`
+ * bubble is centred on the trigger, so a trigger near the left edge pushes half
+ * the label off even though the side it is on is right — and clamping the main
+ * axis too costs nothing and covers the flip having nowhere to land.
+ *
+ * Pure, and measured in viewport pixels throughout, so it can be tested without
+ * a layout: the caller supplies the trigger's rect, the bubble's own size and
+ * the window.
+ */
+declare function placeTooltip(r: AnchorRect, side: TooltipSide, size: TooltipSize, viewport: TooltipViewport): TooltipPlacement;
+
+export { Tooltip, type TooltipPlacement, type TooltipSize, type TooltipViewport, placeTooltip };