@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/components/authed-image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/authed-image.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ImgHTMLAttributes, ReactNode } from \"react\";\nimport { ImageOff } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { SKELETON_CLASS } from \"./skeleton\";\nimport { useAuthedSrc } from \"../hooks/use-authed-src\";\nimport type { AuthedFetcher, UseAuthedSrcResult } from \"../hooks/use-authed-src\";\n\n/** The two states an image can be in besides \"there\". */\nexport interface AuthedImageLabels {\n  /** Read out while the bytes are on their way (the skeleton itself is silent). */\n  loading: string;\n  /** Shown, small, in place of an image that could not be fetched or decoded. */\n  loadError: string;\n  /** The failed tile's accessible name, given the image's alt. */\n  failedImage: (alt: string) => string;\n}\n\nexport const DEFAULT_AUTHED_IMAGE_LABELS: AuthedImageLabels = {\n  loading: \"Loading image…\",\n  loadError: \"Image couldn’t be loaded\",\n  failedImage: (alt) => `${alt}: image couldn’t be loaded`,\n};\n\nexport interface AuthedImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\" | \"children\"> {\n  /** The image's URL — an API path when a {@link fetcher} is given. */\n  src: string | null | undefined;\n  /** Required: an image without a text alternative is a gap a reader falls into.\n   *  `\"\"` for a purely decorative one. */\n  alt: string;\n  /** The app's authenticated GET (see {@link useAuthedSrc}). Left out, `src` is loaded\n   *  by the browser as usual and this is an `<img>` with loading and error states. */\n  fetcher?: AuthedFetcher | null;\n  /** Classes for the box around the image (the placeholders fill it). */\n  wrapperClassName?: string;\n  /**\n   * Wrap the image in a link to itself, opening in a new tab — kastlan's\n   * `AuthedImage` did, because an object URL is the only address of a protected image\n   * a browser tab can open. The link's href is the `blob:` URL, never the API path.\n   */\n  link?: boolean;\n  /** Replaces the default skeleton while loading. */\n  loadingFallback?: ReactNode;\n  /** Replaces the default \"couldn't load\" tile. */\n  errorFallback?: ReactNode;\n  labels?: Partial<AuthedImageLabels>;\n}\n\n/**\n * An image with a loading state, an error state and — given a `fetcher` — the app's\n * authentication. Replaces kastlan's `shared/components/authed-image.tsx`, which\n * rendered NOTHING until the blob arrived and nothing at all if it never did: a card\n * with a photo slot either had the photo or was silently shorter.\n *\n * Two failures are one state here: the fetch failing (401, 404, offline) and the\n * browser failing to decode what arrived (`onError` on the `<img>`, e.g. a PDF served\n * where an image was expected).\n */\nexport function AuthedImage({\n  src,\n  alt,\n  fetcher,\n  wrapperClassName,\n  className,\n  link,\n  loadingFallback,\n  errorFallback,\n  labels: labelsProp,\n  onLoad,\n  onError,\n  ...rest\n}: AuthedImageProps) {\n  const labels = useKitLabels(\"authedImage\", DEFAULT_AUTHED_IMAGE_LABELS, labelsProp);\n  const fetched = useAuthedSrc(src, { fetcher });\n  return (\n    <ImageStates\n      fetched={fetched}\n      alt={alt}\n      labels={labels}\n      className={className}\n      wrapperClassName={wrapperClassName}\n      link={link}\n      loadingFallback={loadingFallback}\n      errorFallback={errorFallback}\n      imgProps={rest}\n      onLoad={onLoad}\n      onError={onError}\n    />\n  );\n}\n\n/**\n * The rendering half of {@link AuthedImage}, for a caller that already holds a\n * {@link useAuthedSrc} result (the lightbox needs the object URL for its download link\n * as well). Internal to the package.\n */\nexport function ImageStates({\n  fetched,\n  alt,\n  labels,\n  className,\n  wrapperClassName,\n  link,\n  loadingFallback,\n  errorFallback,\n  imgProps,\n  onLoad,\n  onError,\n}: {\n  fetched: UseAuthedSrcResult;\n  alt: string;\n  labels: AuthedImageLabels;\n  className?: string;\n  wrapperClassName?: string;\n  link?: boolean;\n  loadingFallback?: ReactNode;\n  errorFallback?: ReactNode;\n  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\" | \"children\" | \"onLoad\" | \"onError\">;\n  onLoad?: ImgHTMLAttributes<HTMLImageElement>[\"onLoad\"];\n  onError?: ImgHTMLAttributes<HTMLImageElement>[\"onError\"];\n}) {\n  // Decode state, per src: keyed so a new picture starts over rather than inheriting\n  // the previous one's \"loaded\" or \"broken\".\n  const [decode, setDecode] = useState<{ src: string | null; state: \"loaded\" | \"error\" } | null>(null);\n  const decoded = decode && decode.src === fetched.src ? decode.state : \"pending\";\n  const failed = fetched.status === \"error\" || decoded === \"error\";\n  const waiting = !failed && (fetched.status === \"loading\" || (fetched.src !== null && decoded === \"pending\"));\n\n  const img = fetched.src !== null && !failed && (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions\n    <img\n      {...imgProps}\n      src={fetched.src}\n      alt={alt}\n      onLoad={(e) => {\n        setDecode({ src: fetched.src, state: \"loaded\" });\n        onLoad?.(e);\n      }}\n      onError={(e) => {\n        setDecode({ src: fetched.src, state: \"error\" });\n        onError?.(e);\n      }}\n      className={cn(\n        // Kept in the tree while it decodes (the browser needs it there to load at\n        // all), but invisible, so the skeleton is what shows.\n        decoded === \"pending\" && \"opacity-0\",\n        className,\n      )}\n    />\n  );\n\n  return (\n    <span\n      data-image-state={failed ? \"error\" : waiting ? \"loading\" : fetched.status === \"idle\" ? \"idle\" : \"ready\"}\n      className={cn(\"relative block overflow-hidden\", wrapperClassName)}\n      aria-busy={waiting || undefined}\n    >\n      {link && img && fetched.src ? (\n        <a href={fetched.src} target=\"_blank\" rel=\"noreferrer noopener\" className=\"block h-full w-full\">\n          {img}\n        </a>\n      ) : (\n        img\n      )}\n      {waiting &&\n        (loadingFallback ?? (\n          <span className={cn(SKELETON_CLASS, \"absolute inset-0 block rounded-none\")}>\n            <span className=\"sr-only\">{labels.loading}</span>\n          </span>\n        ))}\n      {failed &&\n        (errorFallback ?? (\n          <span\n            // `role=\"img\"` with the alt as its name: the picture that failed still\n            // occupies its place in the reading order, and \"couldn't be loaded\" is\n            // the one fact a reader needs about it.\n            role=\"img\"\n            aria-label={alt ? labels.failedImage(alt) : labels.loadError}\n            className=\"flex h-full min-h-16 w-full flex-col items-center justify-center gap-1 bg-[var(--bg-hover)] p-2 text-center text-xs text-[var(--text-muted)]\"\n          >\n            <ImageOff aria-hidden className=\"size-5 shrink-0\" />\n            <span aria-hidden className=\"line-clamp-2\">{labels.loadError}</span>\n          </span>\n        ))}\n    </span>\n  );\n}\n"],"mappings":";AA8EI,cAiGM,YAjGN;AA9EJ,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAatB,MAAM,8BAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa,CAAC,QAAQ,GAAG,GAAG;AAC9B;AAqCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,UAAU,aAAa,KAAK,EAAE,QAAQ,CAAC;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AAGD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmE,IAAI;AACnG,QAAM,UAAU,UAAU,OAAO,QAAQ,QAAQ,MAAM,OAAO,QAAQ;AACtE,QAAM,SAAS,QAAQ,WAAW,WAAW,YAAY;AACzD,QAAM,UAAU,CAAC,WAAW,QAAQ,WAAW,aAAc,QAAQ,QAAQ,QAAQ,YAAY;AAEjG,QAAM,MAAM,QAAQ,QAAQ,QAAQ,CAAC;AAAA,EAEnC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK,QAAQ;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,MAAM;AACb,kBAAU,EAAE,KAAK,QAAQ,KAAK,OAAO,SAAS,CAAC;AAC/C,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,SAAS,CAAC,MAAM;AACd,kBAAU,EAAE,KAAK,QAAQ,KAAK,OAAO,QAAQ,CAAC;AAC9C,kBAAU,CAAC;AAAA,MACb;AAAA,MACA,WAAW;AAAA;AAAA;AAAA,QAGT,YAAY,aAAa;AAAA,QACzB;AAAA,MACF;AAAA;AAAA,EACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,SAAS,UAAU,UAAU,YAAY,QAAQ,WAAW,SAAS,SAAS;AAAA,MAChG,WAAW,GAAG,kCAAkC,gBAAgB;AAAA,MAChE,aAAW,WAAW;AAAA,MAErB;AAAA,gBAAQ,OAAO,QAAQ,MACtB,oBAAC,OAAE,MAAM,QAAQ,KAAK,QAAO,UAAS,KAAI,uBAAsB,WAAU,uBACvE,eACH,IAEA;AAAA,QAED,YACE,mBACC,oBAAC,UAAK,WAAW,GAAG,gBAAgB,qCAAqC,GACvE,8BAAC,UAAK,WAAU,WAAW,iBAAO,SAAQ,GAC5C;AAAA,QAEH,WACE,iBACC;AAAA,UAAC;AAAA;AAAA,YAIC,MAAK;AAAA,YACL,cAAY,MAAM,OAAO,YAAY,GAAG,IAAI,OAAO;AAAA,YACnD,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAS,eAAW,MAAC,WAAU,mBAAkB;AAAA,cAClD,oBAAC,UAAK,eAAW,MAAC,WAAU,gBAAgB,iBAAO,WAAU;AAAA;AAAA;AAAA,QAC/D;AAAA;AAAA;AAAA,EAEN;AAEJ;","names":[]}

package/dist/components/breadcrumbs.d.ts

@@ -25,7 +25,8 @@ interface BreadcrumbLinkProps {
 }
 interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
     items: BreadcrumbItem[];
-    /** Your router's link. Default `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */
+    /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app
+     *  `href`), then `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */
     renderLink?: (props: BreadcrumbLinkProps) => ReactElement;
     /**
      * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing

package/dist/components/breadcrumbs.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { useKitLabels } from "../i18n/kit-labels.js";
+import { useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
 const DEFAULT_BREADCRUMBS_LABELS = {
   label: "Breadcrumb",
   showAll: "Show full path"
@@ -20,6 +21,7 @@ function Breadcrumbs({
   ...rest
 }) {
   const labels = useKitLabels("breadcrumbs", DEFAULT_BREADCRUMBS_LABELS, labelsProp);
+  const kitLink = useKitLink();
   const [expanded, setExpanded] = useState(false);
   const revealedRef = useRef(null);
   const focusRevealed = useRef(false);
@@ -44,7 +46,8 @@ function Breadcrumbs({
       content = /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "block max-w-[16rem] truncate font-medium text-[var(--text-primary)]", children: item.label });
     } else if (item.href !== void 0) {
       const props = { href: item.href, className: linkClass, children: item.label };
-      content = renderLink ? renderLink(props) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, children: props.children });
+      const kit = pickLinkRenderer(void 0, kitLink, item.href);
+      content = renderLink ? renderLink(props) : kit ? /* @__PURE__ */ jsx(RenderedKitLink, { render: kit, props }) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, children: props.children });
     } else {
       content = /* @__PURE__ */ jsx("span", { className: "block max-w-[14rem] truncate", children: item.label });
     }

package/dist/components/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface BreadcrumbsLabels {\n  /** The `nav` landmark's name — what a screen reader lists it as. */\n  label: string;\n  /** The \"…\" button that reveals the levels collapsed away on a phone. */\n  showAll: string;\n}\n\nexport const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels = {\n  label: \"Breadcrumb\",\n  showAll: \"Show full path\",\n};\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Where the crumb leads. A crumb without one is text (a level with no page of its\n   *  own). The LAST crumb is the current page and is text whether or not it has one. */\n  href?: string;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\n/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's\n *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface BreadcrumbLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n}\n\nexport interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: BreadcrumbItem[];\n  /** Your router's link. Default `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */\n  renderLink?: (props: BreadcrumbLinkProps) => ReactElement;\n  /**\n   * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing\n   * right in a right-to-left trail points back toward where you came from. Supply your\n   * own and it is drawn as given (a \"/\" needs no mirroring).\n   */\n  separator?: ReactNode;\n  /**\n   * Collapse the middle on phones (below the `md` breakpoint) into a \"…\" button, keeping\n   * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail\n   * scrolled sideways on a phone instead, which hides the current page — the one crumb\n   * that must never be off-screen.\n   */\n  collapse?: boolean;\n  /** How many crumbs at the end stay visible when collapsed — the current page and its\n   *  parent by default (2), because \"up one level\" is what a phone user reaches for. */\n  keepEnd?: number;\n  /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */\n  labels?: Partial<BreadcrumbsLabels>;\n}\n\n/**\n * The trail from the app's root to this page.\n *\n * `nav` + `ol` + `aria-current=\"page\"` on the last crumb: the WAI breadcrumb pattern,\n * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of\n * `span`s, so a screen reader heard no list, no count, and nothing marking where you\n * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and\n * the server's first paint is already right.\n */\nexport function Breadcrumbs({\n  items,\n  renderLink,\n  separator,\n  collapse = true,\n  keepEnd = 2,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: BreadcrumbsProps) {\n  const labels = useKitLabels(\"breadcrumbs\", DEFAULT_BREADCRUMBS_LABELS, labelsProp);\n  const [expanded, setExpanded] = useState(false);\n  // The \"…\" button vanishes when pressed; focus goes to the first crumb it revealed,\n  // not back to the top of the document.\n  const revealedRef = useRef<HTMLLIElement>(null);\n  const focusRevealed = useRef(false);\n  useEffect(() => {\n    if (!expanded || !focusRevealed.current) return;\n    focusRevealed.current = false;\n    const li = revealedRef.current;\n    (li?.querySelector<HTMLElement>(\"a[href]\") ?? li)?.focus();\n  }, [expanded]);\n  if (items.length === 0) return null;\n\n  const end = Math.max(1, keepEnd);\n  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a\n  // \"…\" saves nothing, so it takes two.\n  const firstKept = Math.max(1, items.length - end);\n  const collapsible = collapse && !expanded && firstKept - 1 >= 2;\n  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;\n\n  const sep = (\n    <span aria-hidden className=\"flex shrink-0 items-center text-[var(--text-placeholder)]\">\n      {separator ?? <ChevronRight className=\"size-3.5 rtl:-scale-x-100\" />}\n    </span>\n  );\n  const linkClass =\n    \"block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\";\n\n  return (\n    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn(\"min-w-0 text-sm\", className)}>\n      <ol className=\"m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          const key = item.key ?? (typeof item.label === \"string\" ? `${i}-${item.label}` : String(i));\n          let content: ReactNode;\n          if (last) {\n            content = (\n              <span aria-current=\"page\" className=\"block max-w-[16rem] truncate font-medium text-[var(--text-primary)]\">\n                {item.label}\n              </span>\n            );\n          } else if (item.href !== undefined) {\n            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };\n            content = renderLink ? (\n              renderLink(props)\n            ) : (\n              <a href={props.href} className={props.className}>\n                {props.children}\n              </a>\n            );\n          } else {\n            content = <span className=\"block max-w-[14rem] truncate\">{item.label}</span>;\n          }\n          return (\n            <Fragment key={key}>\n              {collapsible && i === 1 && (\n                <li className=\"flex items-center gap-1.5 md:hidden\">\n                  {sep}\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      focusRevealed.current = true;\n                      setExpanded(true);\n                    }}\n                    aria-label={labels.showAll}\n                    aria-expanded={false}\n                    className=\"flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n                  >\n                    <MoreHorizontal className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n              <li\n                ref={i === 1 ? revealedRef : undefined}\n                // Focusable only as the landing place for a revealed crumb with no link.\n                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}\n                className={cn(\"flex min-w-0 items-center gap-1.5 outline-none\", isHidden(i) && \"hidden md:flex\")}\n              >\n                {i > 0 && sep}\n                {content}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface BreadcrumbsLabels {\n  /** The `nav` landmark's name — what a screen reader lists it as. */\n  label: string;\n  /** The \"…\" button that reveals the levels collapsed away on a phone. */\n  showAll: string;\n}\n\nexport const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels = {\n  label: \"Breadcrumb\",\n  showAll: \"Show full path\",\n};\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Where the crumb leads. A crumb without one is text (a level with no page of its\n   *  own). The LAST crumb is the current page and is text whether or not it has one. */\n  href?: string;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\n/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's\n *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface BreadcrumbLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n}\n\nexport interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: BreadcrumbItem[];\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */\n  renderLink?: (props: BreadcrumbLinkProps) => ReactElement;\n  /**\n   * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing\n   * right in a right-to-left trail points back toward where you came from. Supply your\n   * own and it is drawn as given (a \"/\" needs no mirroring).\n   */\n  separator?: ReactNode;\n  /**\n   * Collapse the middle on phones (below the `md` breakpoint) into a \"…\" button, keeping\n   * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail\n   * scrolled sideways on a phone instead, which hides the current page — the one crumb\n   * that must never be off-screen.\n   */\n  collapse?: boolean;\n  /** How many crumbs at the end stay visible when collapsed — the current page and its\n   *  parent by default (2), because \"up one level\" is what a phone user reaches for. */\n  keepEnd?: number;\n  /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */\n  labels?: Partial<BreadcrumbsLabels>;\n}\n\n/**\n * The trail from the app's root to this page.\n *\n * `nav` + `ol` + `aria-current=\"page\"` on the last crumb: the WAI breadcrumb pattern,\n * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of\n * `span`s, so a screen reader heard no list, no count, and nothing marking where you\n * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and\n * the server's first paint is already right.\n */\nexport function Breadcrumbs({\n  items,\n  renderLink,\n  separator,\n  collapse = true,\n  keepEnd = 2,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: BreadcrumbsProps) {\n  const labels = useKitLabels(\"breadcrumbs\", DEFAULT_BREADCRUMBS_LABELS, labelsProp);\n  const kitLink = useKitLink();\n  const [expanded, setExpanded] = useState(false);\n  // The \"…\" button vanishes when pressed; focus goes to the first crumb it revealed,\n  // not back to the top of the document.\n  const revealedRef = useRef<HTMLLIElement>(null);\n  const focusRevealed = useRef(false);\n  useEffect(() => {\n    if (!expanded || !focusRevealed.current) return;\n    focusRevealed.current = false;\n    const li = revealedRef.current;\n    (li?.querySelector<HTMLElement>(\"a[href]\") ?? li)?.focus();\n  }, [expanded]);\n  if (items.length === 0) return null;\n\n  const end = Math.max(1, keepEnd);\n  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a\n  // \"…\" saves nothing, so it takes two.\n  const firstKept = Math.max(1, items.length - end);\n  const collapsible = collapse && !expanded && firstKept - 1 >= 2;\n  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;\n\n  const sep = (\n    <span aria-hidden className=\"flex shrink-0 items-center text-[var(--text-placeholder)]\">\n      {separator ?? <ChevronRight className=\"size-3.5 rtl:-scale-x-100\" />}\n    </span>\n  );\n  const linkClass =\n    \"block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\";\n\n  return (\n    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn(\"min-w-0 text-sm\", className)}>\n      <ol className=\"m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          const key = item.key ?? (typeof item.label === \"string\" ? `${i}-${item.label}` : String(i));\n          let content: ReactNode;\n          if (last) {\n            content = (\n              <span aria-current=\"page\" className=\"block max-w-[16rem] truncate font-medium text-[var(--text-primary)]\">\n                {item.label}\n              </span>\n            );\n          } else if (item.href !== undefined) {\n            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };\n            const kit = pickLinkRenderer<BreadcrumbLinkProps>(undefined, kitLink, item.href);\n            content = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a href={props.href} className={props.className}>\n                {props.children}\n              </a>\n            );\n          } else {\n            content = <span className=\"block max-w-[14rem] truncate\">{item.label}</span>;\n          }\n          return (\n            <Fragment key={key}>\n              {collapsible && i === 1 && (\n                <li className=\"flex items-center gap-1.5 md:hidden\">\n                  {sep}\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      focusRevealed.current = true;\n                      setExpanded(true);\n                    }}\n                    aria-label={labels.showAll}\n                    aria-expanded={false}\n                    className=\"flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n                  >\n                    <MoreHorizontal className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n              <li\n                ref={i === 1 ? revealedRef : undefined}\n                // Focusable only as the landing place for a revealed crumb with no link.\n                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}\n                className={cn(\"flex min-w-0 items-center gap-1.5 outline-none\", isHidden(i) && \"hidden md:flex\")}\n              >\n                {i > 0 && sep}\n                {content}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,9 +1,57 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { ButtonVariant, ButtonSize } from './ui.js';
+import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-v3biUF1L.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
 
 interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —
@@ -62,7 +110,8 @@ interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "href
     /** The member for the page you are on: `aria-current="page"` and the "on" look of a
      *  pressed member, so a link row reads as a segmented switch between pages. */
     current?: boolean;
-    /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}. */
+    /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.
+     *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */
     renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;
     className?: string;
     children: ReactNode;

package/dist/components/button-group.js

@@ -2,6 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { buttonClasses } from "./ui.js";
+import { useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer } from "./text-link.js";
 const JOINED_COMMON = cn(
   "inline-flex rounded-md border border-[var(--border)]",
   // The group draws the frame; each member gives up its own border, radius and shadow.
@@ -76,6 +78,7 @@ function ButtonGroupLink({
   children,
   ...rest
 }) {
+  const kitLink = useKitLink();
   const props = {
     ...rest,
     href,
@@ -83,7 +86,8 @@ function ButtonGroupLink({
     className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),
     children
   };
-  if (renderLink) return /* @__PURE__ */ jsx(RenderedGroupLink, { render: renderLink, ...props });
+  const render = pickLinkRenderer(renderLink, kitLink, href);
+  if (render) return /* @__PURE__ */ jsx(RenderedGroupLink, { render, ...props });
   const { children: content, ...anchor } = props;
   return /* @__PURE__ */ jsx("a", { ...anchor, children: content });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonClasses, type ButtonSize, type ButtonVariant } from \"./ui\";\n\n// Every class below is spelled out in full rather than assembled from parts: the\n// consumer's Tailwind build finds classes by scanning this package's source as text,\n// and a class that exists only after a template literal runs is never generated.\n//\n// Each rule is written twice, once for a direct child and once for a `<button>` one\n// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −\n// both carry a tooltip — where the direct child is the tooltip's wrapper span and the\n// button that draws the border and the corners sits inside it. The same again for an\n// `<a>` one level down: a router link member (see {@link ButtonGroupLink}) under a\n// tooltip. A bare link is a direct child and needs nothing extra.\nconst JOINED_COMMON = cn(\n  \"inline-flex rounded-md border border-[var(--border)]\",\n  // The group draws the frame; each member gives up its own border, radius and shadow.\n  \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none\",\n  \"[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none\",\n  \"[&>*>a]:rounded-none [&>*>a]:border-0 [&>*>a]:shadow-none\",\n  \"[&>*]:border-[var(--border)]\",\n  // A focused member rises above its neighbours so its ring is not painted over by\n  // the next one's background.\n  \"[&>*]:relative [&>*:focus-within]:z-10\",\n);\n\nconst JOINED: Record<\"horizontal\" | \"vertical\", string> = {\n  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the\n  // first member sits on the right with the right-hand corners rounded — the physical\n  // pair would round the outside of the last button and square off the first.\n  horizontal: cn(\n    JOINED_COMMON,\n    \"flex-row items-stretch\",\n    \"[&>*:not(:first-child)]:border-s\",\n    \"[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md\",\n    \"[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md\",\n    \"[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md\",\n  ),\n  // The block axis is top-to-bottom in both reading directions, so top/bottom are\n  // already the logical edges here.\n  vertical: cn(\n    JOINED_COMMON,\n    \"flex-col items-stretch\",\n    \"[&>*:not(:first-child)]:border-t\",\n    \"[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md\",\n    \"[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md\",\n    \"[&>:first-child>a]:rounded-t-md [&>:last-child>a]:rounded-b-md\",\n  ),\n};\n\n// `gapped`: the members keep their own shape — round overlay discs, each its own\n// border and radius — and sit apart. Nothing is stripped, so there is nothing to\n// restore per edge, and the gap is logical by nature.\nconst GAPPED: Record<\"horizontal\" | \"vertical\", string> = {\n  horizontal: \"inline-flex flex-row items-center gap-1\",\n  vertical: \"inline-flex flex-col items-center gap-1\",\n};\n\n// `elevated`, joined: the frame itself floats — a filled surface under the members (a\n// ghost member would otherwise show the content through it) and the shadow of a\n// control lifted over the page.\nconst ELEVATED_JOINED = \"bg-[var(--bg-surface)] shadow-lg\";\n// `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the\n// control, not the tooltip's square wrapper span, whose shadow would be a box round a\n// round disc.\nconst ELEVATED_GAPPED =\n  \"[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md\";\n\nexport interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —\n   *  the map's zoom + over −. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `joined` (default): one frame, hairline dividers, outer corners rounded. `gapped`:\n   * separate controls with a small gap, each keeping its own shape — the overlay\n   * discs of keksdose's receipt preview zoom (scan-file-preview.tsx:362, the − and +\n   * `IconButton variant=\"overlay\"` in a hand-made `flex gap-1`), where a joined frame\n   * would be a box drawn over the photo.\n   */\n  variant?: \"joined\" | \"gapped\";\n  /**\n   * Float it: a surface with a shadow, for a toolbar that sits OVER content (a map's\n   * zoom, a photo's controls) rather than in the page's flow — keksdose adds\n   * `shadow-sm` to each disc on the receipt preview by hand. On a joined group the\n   * frame is filled and shadowed; on a gapped one, each member.\n   */\n  elevated?: boolean;\n}\n\n/**\n * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,\n * hairline dividers between the members, rounded only at the outer corners.\n *\n * keksdose asked for it twice — \"collapse all / expand all\" above its category\n * tree, and the + and − of its map zoom — both hand-built with negative margins and\n * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir=\"rtl\"`.\n *\n * `role=\"group\"` with a name: a reader then introduces the pair as \"Zoom, group\"\n * before reading \"Zoom in\", which is what tells a listener that the next button\n * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no\n * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key\n * roving, and every member keeps its own tab stop, as plain adjacent buttons do.\n * For one-of-many selection use `ToggleGroup`, which has the radio semantics.\n */\nexport function ButtonGroup({\n  orientation = \"horizontal\",\n  variant = \"joined\",\n  elevated = false,\n  className,\n  ...rest\n}: ButtonGroupProps) {\n  const joined = variant === \"joined\";\n  return (\n    <div\n      {...rest}\n      role=\"group\"\n      data-orientation={orientation}\n      data-variant={variant}\n      className={cn(\n        joined ? JOINED[orientation] : GAPPED[orientation],\n        elevated && (joined ? ELEVATED_JOINED : ELEVATED_GAPPED),\n        className,\n      )}\n    />\n  );\n}\n\n/** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ButtonGroupLinkRenderProps {\n  href: string;\n  /** The button look — keep it, or the member is a bare link in the frame. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"page\";\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"className\" | \"children\"> {\n  href: string;\n  /** The {@link Button} variant it looks like. Default `secondary`, the usual member. */\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** The member for the page you are on: `aria-current=\"page\"` and the \"on\" look of a\n   *  pressed member, so a link row reads as a segmented switch between pages. */\n  current?: boolean;\n  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}. */\n  renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst LINK_CURRENT = \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\";\n\n/**\n * A {@link ButtonGroup} member that navigates: a link drawn as a {@link Button}, so it\n * joins the frame like one. A group mixing actions and pages — \"Export\" beside \"Open\n * report\" — had to either make the page a button with an `onClick` navigate (no\n * middle-click, no \"open in new tab\", no link semantics) or style an `<a>` whose\n * corners the group did not know about. Plain `<a>` by default; `renderLink` for the\n * router's `Link`, the kit's usual shape (`Chip`, `MenuItem`, `StatTile`).\n */\nexport function ButtonGroupLink({\n  href,\n  variant = \"secondary\",\n  size,\n  current = false,\n  renderLink,\n  className,\n  children,\n  ...rest\n}: ButtonGroupLinkProps) {\n  const props: ButtonGroupLinkRenderProps = {\n    ...rest,\n    href,\n    \"aria-current\": current ? \"page\" : undefined,\n    className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),\n    children,\n  };\n  if (renderLink) return <RenderedGroupLink render={renderLink} {...props} />;\n  const { children: content, ...anchor } = props;\n  return <a {...anchor}>{content}</a>;\n}\n\n/** Calls `renderLink` as a component, so the router link's hooks are its own. */\nfunction RenderedGroupLink({\n  render,\n  ...props\n}: ButtonGroupLinkRenderProps & { render: (props: ButtonGroupLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAiHI;AAhHJ,SAAS,UAAU;AACnB,SAAS,qBAA0D;AAYnE,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AACF;AAEA,MAAM,SAAoD;AAAA;AAAA;AAAA;AAAA,EAIxD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,UAAU;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAKA,MAAM,SAAoD;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AACZ;AAKA,MAAM,kBAAkB;AAIxB,MAAM,kBACJ;AAsCK,SAAS,YAAY;AAAA,EAC1B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,SAAS,OAAO,WAAW,IAAI,OAAO,WAAW;AAAA,QACjD,aAAa,SAAS,kBAAkB;AAAA,QACxC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AA+BA,MAAM,eAAe;AAUd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,QAAoC;AAAA,IACxC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,UAAU,SAAS;AAAA,IACnC,WAAW,cAAc,SAAS,EAAE,MAAM,WAAW,GAAG,WAAW,cAAc,SAAS,EAAE,CAAC;AAAA,IAC7F;AAAA,EACF;AACA,MAAI,WAAY,QAAO,oBAAC,qBAAkB,QAAQ,YAAa,GAAG,OAAO;AACzE,QAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,SAAO,oBAAC,OAAG,GAAG,QAAS,mBAAQ;AACjC;AAGA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAiG;AAC/F,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/button-group.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonClasses, type ButtonSize, type ButtonVariant } from \"./ui\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n// Every class below is spelled out in full rather than assembled from parts: the\n// consumer's Tailwind build finds classes by scanning this package's source as text,\n// and a class that exists only after a template literal runs is never generated.\n//\n// Each rule is written twice, once for a direct child and once for a `<button>` one\n// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −\n// both carry a tooltip — where the direct child is the tooltip's wrapper span and the\n// button that draws the border and the corners sits inside it. The same again for an\n// `<a>` one level down: a router link member (see {@link ButtonGroupLink}) under a\n// tooltip. A bare link is a direct child and needs nothing extra.\nconst JOINED_COMMON = cn(\n  \"inline-flex rounded-md border border-[var(--border)]\",\n  // The group draws the frame; each member gives up its own border, radius and shadow.\n  \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none\",\n  \"[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none\",\n  \"[&>*>a]:rounded-none [&>*>a]:border-0 [&>*>a]:shadow-none\",\n  \"[&>*]:border-[var(--border)]\",\n  // A focused member rises above its neighbours so its ring is not painted over by\n  // the next one's background.\n  \"[&>*]:relative [&>*:focus-within]:z-10\",\n);\n\nconst JOINED: Record<\"horizontal\" | \"vertical\", string> = {\n  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the\n  // first member sits on the right with the right-hand corners rounded — the physical\n  // pair would round the outside of the last button and square off the first.\n  horizontal: cn(\n    JOINED_COMMON,\n    \"flex-row items-stretch\",\n    \"[&>*:not(:first-child)]:border-s\",\n    \"[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md\",\n    \"[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md\",\n    \"[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md\",\n  ),\n  // The block axis is top-to-bottom in both reading directions, so top/bottom are\n  // already the logical edges here.\n  vertical: cn(\n    JOINED_COMMON,\n    \"flex-col items-stretch\",\n    \"[&>*:not(:first-child)]:border-t\",\n    \"[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md\",\n    \"[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md\",\n    \"[&>:first-child>a]:rounded-t-md [&>:last-child>a]:rounded-b-md\",\n  ),\n};\n\n// `gapped`: the members keep their own shape — round overlay discs, each its own\n// border and radius — and sit apart. Nothing is stripped, so there is nothing to\n// restore per edge, and the gap is logical by nature.\nconst GAPPED: Record<\"horizontal\" | \"vertical\", string> = {\n  horizontal: \"inline-flex flex-row items-center gap-1\",\n  vertical: \"inline-flex flex-col items-center gap-1\",\n};\n\n// `elevated`, joined: the frame itself floats — a filled surface under the members (a\n// ghost member would otherwise show the content through it) and the shadow of a\n// control lifted over the page.\nconst ELEVATED_JOINED = \"bg-[var(--bg-surface)] shadow-lg\";\n// `elevated`, gapped: there is no frame, so each disc carries the shadow. Aimed at the\n// control, not the tooltip's square wrapper span, whose shadow would be a box round a\n// round disc.\nconst ELEVATED_GAPPED =\n  \"[&>button]:shadow-md [&>a]:shadow-md [&>*>button]:shadow-md [&>*>a]:shadow-md\";\n\nexport interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —\n   *  the map's zoom + over −. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * `joined` (default): one frame, hairline dividers, outer corners rounded. `gapped`:\n   * separate controls with a small gap, each keeping its own shape — the overlay\n   * discs of keksdose's receipt preview zoom (scan-file-preview.tsx:362, the − and +\n   * `IconButton variant=\"overlay\"` in a hand-made `flex gap-1`), where a joined frame\n   * would be a box drawn over the photo.\n   */\n  variant?: \"joined\" | \"gapped\";\n  /**\n   * Float it: a surface with a shadow, for a toolbar that sits OVER content (a map's\n   * zoom, a photo's controls) rather than in the page's flow — keksdose adds\n   * `shadow-sm` to each disc on the receipt preview by hand. On a joined group the\n   * frame is filled and shadowed; on a gapped one, each member.\n   */\n  elevated?: boolean;\n}\n\n/**\n * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,\n * hairline dividers between the members, rounded only at the outer corners.\n *\n * keksdose asked for it twice — \"collapse all / expand all\" above its category\n * tree, and the + and − of its map zoom — both hand-built with negative margins and\n * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir=\"rtl\"`.\n *\n * `role=\"group\"` with a name: a reader then introduces the pair as \"Zoom, group\"\n * before reading \"Zoom in\", which is what tells a listener that the next button\n * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no\n * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key\n * roving, and every member keeps its own tab stop, as plain adjacent buttons do.\n * For one-of-many selection use `ToggleGroup`, which has the radio semantics.\n */\nexport function ButtonGroup({\n  orientation = \"horizontal\",\n  variant = \"joined\",\n  elevated = false,\n  className,\n  ...rest\n}: ButtonGroupProps) {\n  const joined = variant === \"joined\";\n  return (\n    <div\n      {...rest}\n      role=\"group\"\n      data-orientation={orientation}\n      data-variant={variant}\n      className={cn(\n        joined ? JOINED[orientation] : GAPPED[orientation],\n        elevated && (joined ? ELEVATED_JOINED : ELEVATED_GAPPED),\n        className,\n      )}\n    />\n  );\n}\n\n/** What {@link ButtonGroupLinkProps.renderLink} is handed. Spread it onto your router's\n *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface ButtonGroupLinkRenderProps {\n  href: string;\n  /** The button look — keep it, or the member is a bare link in the frame. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  \"aria-current\"?: \"page\";\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface ButtonGroupLinkProps extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"className\" | \"children\"> {\n  href: string;\n  /** The {@link Button} variant it looks like. Default `secondary`, the usual member. */\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** The member for the page you are on: `aria-current=\"page\"` and the \"on\" look of a\n   *  pressed member, so a link row reads as a segmented switch between pages. */\n  current?: boolean;\n  /** Render through your router's `Link` — see {@link ButtonGroupLinkRenderProps}.\n   *  Default: the `<UiKitProvider linkComponent>`, then `<a>`. */\n  renderLink?: (props: ButtonGroupLinkRenderProps) => ReactElement;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst LINK_CURRENT = \"bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]\";\n\n/**\n * A {@link ButtonGroup} member that navigates: a link drawn as a {@link Button}, so it\n * joins the frame like one. A group mixing actions and pages — \"Export\" beside \"Open\n * report\" — had to either make the page a button with an `onClick` navigate (no\n * middle-click, no \"open in new tab\", no link semantics) or style an `<a>` whose\n * corners the group did not know about. Plain `<a>` by default; `renderLink` for the\n * router's `Link`, the kit's usual shape (`Chip`, `MenuItem`, `StatTile`).\n */\nexport function ButtonGroupLink({\n  href,\n  variant = \"secondary\",\n  size,\n  current = false,\n  renderLink,\n  className,\n  children,\n  ...rest\n}: ButtonGroupLinkProps) {\n  const kitLink = useKitLink();\n  const props: ButtonGroupLinkRenderProps = {\n    ...rest,\n    href,\n    \"aria-current\": current ? \"page\" : undefined,\n    className: buttonClasses(variant, { size, className: cn(current && LINK_CURRENT, className) }),\n    children,\n  };\n  const render = pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedGroupLink render={render} {...props} />;\n  const { children: content, ...anchor } = props;\n  return <a {...anchor}>{content}</a>;\n}\n\n/** Calls `renderLink` as a component, so the router link's hooks are its own. */\nfunction RenderedGroupLink({\n  render,\n  ...props\n}: ButtonGroupLinkRenderProps & { render: (props: ButtonGroupLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":";AAmHI;AAlHJ,SAAS,UAAU;AACnB,SAAS,qBAA0D;AACnE,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAYjC,MAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AACF;AAEA,MAAM,SAAoD;AAAA;AAAA;AAAA;AAAA,EAIxD,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA,EAGA,UAAU;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAKA,MAAM,SAAoD;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AACZ;AAKA,MAAM,kBAAkB;AAIxB,MAAM,kBACJ;AAsCK,SAAS,YAAY;AAAA,EAC1B,cAAc;AAAA,EACd,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,YAAY;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,SAAS,OAAO,WAAW,IAAI,OAAO,WAAW;AAAA,QACjD,aAAa,SAAS,kBAAkB;AAAA,QACxC;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAgCA,MAAM,eAAe;AAUd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,WAAW;AAC3B,QAAM,QAAoC;AAAA,IACxC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,UAAU,SAAS;AAAA,IACnC,WAAW,cAAc,SAAS,EAAE,MAAM,WAAW,GAAG,WAAW,cAAc,SAAS,EAAE,CAAC;AAAA,IAC7F;AAAA,EACF;AACA,QAAM,SAAS,iBAAiB,YAAY,SAAS,IAAI;AACzD,MAAI,OAAQ,QAAO,oBAAC,qBAAkB,QAAiB,GAAG,OAAO;AACjE,QAAM,EAAE,UAAU,SAAS,GAAG,OAAO,IAAI;AACzC,SAAO,oBAAC,OAAG,GAAG,QAAS,mBAAQ;AACjC;AAGA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAiG;AAC/F,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/components/calculator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CalculatorLabels } from '../i18n/kit-labels.js';
+import { C as CalculatorLabels } from '../kit-labels-v3biUF1L.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -7,7 +7,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -19,6 +18,7 @@ import '../search/search-index.js';
 import './month-picker.js';
 import './page-contents.js';
 import './series-chart-labels.js';
+import './pie-chart-labels.js';
 import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
@@ -29,17 +29,28 @@ import './tile-radio.js';
 import './icon-picker.js';
 import './dialog-frame.js';
 import './modal.js';
-import './file-button.js';
+import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import '../feedback/feedback-attachment.js';
 import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
 import './confirm-dialog.js';
 import './floating-panel.js';
-import './copy-button.js';
 import './bulk-action-bar.js';
 import './list.js';
 import './breadcrumbs.js';
 import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.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/calendar-heatmap.d.ts

@@ -87,6 +87,39 @@ interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<"div">, "on
     /** The scale's colour, as any CSS colour. Default `var(--brand)`; each step is this
      *  mixed into `--bg-surface`, so the ramp follows the theme. */
     color?: string;
+    /**
+     * A CONTINUOUS scale from `colorFrom` (the smallest value) to `colorTo` (the busiest
+     * day), instead of `levels` steps of `color` — keksdose's palette-store ramp,
+     * `seqLow` → `seqHigh`. Both are needed; `color` is then unused. Two `#rrggbb`
+     * colours are interpolated in JS, so the fill is a concrete hex and the day number's
+     * ink (in `"month"`) is MEASURED against it; anything else (a `var()`) is mixed with
+     * `color-mix()`. `levels` still sets `data-level` and the legend's swatch count.
+     */
+    colorFrom?: string;
+    colorTo?: string;
+    /**
+     * A fill of the caller's own for a day with a value: handed the value and the
+     * scale's `max`, returns any CSS colour. Wins over `color` and `colorFrom`/`colorTo`.
+     * Also paints the legend, at `max × level / levels`.
+     */
+    fill?: (value: number, max: number) => string;
+    /** The fill of a day with no value (or a value of 0). Default: a wash of the text
+     *  colour over the surface, which reads as a cell on both themes. */
+    emptyColor?: string;
+    /**
+     * Where the window ENDS — the day `maxDays` counts back from, and the last one drawn:
+     *
+     * - `"to"` (default): on `to`.
+     * - `"today"`: on today.
+     * - `"latest"`: on the last day that can carry a figure — today, or a later day that
+     *   actually has a value. A window running into the future (a report's "all" preset
+     *   ends a year ahead) then spends its cells on the days a person is looking for,
+     *   not on a year of empty ones.
+     * - a `"YYYY-MM-DD"`: on that day.
+     *
+     * Always kept inside `from`…`to`.
+     */
+    anchor?: "to" | "today" | "latest" | (string & {});
     /**
      * The most days to draw. A longer window keeps its LATEST `maxDays` and says how many
      * it left out (`labels.truncated`) rather than silently ending. Default: no cap.
@@ -101,6 +134,9 @@ interface CalendarHeatmapProps extends Omit<ComponentPropsWithoutRef<"div">, "on
     labels?: Partial<CalendarHeatmapLabels>;
     className?: string;
 }
+/** Where the window ends for an {@link CalendarHeatmapProps.anchor}, kept in `[from, to]`.
+ *  `latestData` is the latest ISO date carrying a value, or `""`. */
+declare function heatmapWindowEnd(from: string, to: string, anchor: string, latestData: string, today?: string): string;
 /** The step a value falls on: 0 for nothing, else 1…levels by its share of `max`. */
 declare function heatmapLevel(value: number, max: number, levels: number): number;
 /**
@@ -113,12 +149,14 @@ declare function heatmapLevel(value: number, max: number, levels: number): numbe
  * the other way round, mirrored in RTL — PageUp/PageDown move a month and Home/End go
  * to the window's first/last day. Each cell is named with its whole date AND its value,
  * because the colour is not something a screen reader can say, and carries
- * `data-day="YYYY-MM-DD"` as its identity for tests and for the host.
+ * `data-day="YYYY-MM-DD"` as its identity for tests and for the host. Note that in
+ * `"weeks"` the cells are in DOM order by WEEKDAY ROW (all Mondays, then all
+ * Tuesdays…), not by date — query by `data-day`, not by position.
  *
  * The tooltip is portalled (a year of squares always sits in a sideways scroller) and
  * `data-private` unless `sensitive={false}`. Cell size in `"weeks"` is the CSS variable
  * `--heatmap-cell` (default `0.75rem`): `style={{ "--heatmap-cell": "1rem" }}`.
  */
-declare function CalendarHeatmap({ data, from, to, layout, selected, onSelect, formatValue: formatValueProp, tooltip, sensitive, max: maxProp, levels, color, maxDays, legend, locale: localeProp, weekStartsOn, labels: labelsProp, className, "aria-label": ariaLabel, ...rest }: CalendarHeatmapProps): react.JSX.Element;
+declare function CalendarHeatmap({ data, from, to, layout, selected, onSelect, formatValue: formatValueProp, tooltip, sensitive, max: maxProp, levels, color, colorFrom, colorTo, fill: fillProp, emptyColor, anchor, maxDays, legend, locale: localeProp, weekStartsOn, labels: labelsProp, className, "aria-label": ariaLabel, ...rest }: CalendarHeatmapProps): react.JSX.Element;
 
-export { CalendarHeatmap, type CalendarHeatmapDatum, type CalendarHeatmapDay, type CalendarHeatmapLabels, type CalendarHeatmapProps, DEFAULT_CALENDAR_HEATMAP_LABELS, heatmapLevel };
+export { CalendarHeatmap, type CalendarHeatmapDatum, type CalendarHeatmapDay, type CalendarHeatmapLabels, type CalendarHeatmapProps, DEFAULT_CALENDAR_HEATMAP_LABELS, heatmapLevel, heatmapWindowEnd };

package/dist/components/calendar-heatmap.js

@@ -5,6 +5,8 @@ import { cn } from "../lib/cn.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
 import { addMonthsClamped, localeWeekStart, parseIsoDate, toLocalIso } from "../lib/dates.js";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels.js";
+import { lerpHex, textOn } from "../theme/chart-palette.js";
+import { parseHex } from "../theme/color.js";
 import { Tooltip } from "./tooltip.js";
 const DEFAULT_CALENDAR_HEATMAP_LABELS = {
   grid: "Daily values",
@@ -21,6 +23,16 @@ const DAY_NAME_FORMAT = {
 };
 const EMPTY_FILL = "color-mix(in oklab, var(--text-primary) 8%, var(--bg-surface))";
 const weekdayIndex = (d, weekStart) => (d.getDay() - weekStart + 7) % 7;
+function heatmapWindowEnd(from, to, anchor, latestData, today = toLocalIso(/* @__PURE__ */ new Date())) {
+  let end;
+  if (anchor === "today") end = today;
+  else if (anchor === "latest") end = latestData > today ? latestData : today;
+  else if (anchor === "to" || !parseIsoDate(anchor)) end = to;
+  else end = anchor;
+  if (end > to) end = to;
+  if (end < from) end = from;
+  return end;
+}
 function heatmapLevel(value, max, levels) {
   if (!(value > 0) || !(max > 0) || levels < 1) return 0;
   return Math.min(levels, Math.max(1, Math.ceil(value / max * levels)));
@@ -46,6 +58,11 @@ function CalendarHeatmap({
   max: maxProp,
   levels = 4,
   color = "var(--brand)",
+  colorFrom,
+  colorTo,
+  fill: fillProp,
+  emptyColor,
+  anchor = "to",
   maxDays,
   legend = true,
   locale: localeProp,
@@ -66,9 +83,15 @@ function CalendarHeatmap({
     for (const p of data) m.set(p.date, (m.get(p.date) ?? 0) + p.value);
     return m;
   }, [data]);
+  const latestData = useMemo(() => {
+    let latest = "";
+    for (const [iso, v] of values) if (v !== 0 && iso > latest) latest = iso;
+    return latest;
+  }, [values]);
+  const windowEnd = heatmapWindowEnd(from, to, anchor, latestData);
   const { days, dropped } = useMemo(() => {
     const start = parseIsoDate(from);
-    const end = parseIsoDate(to);
+    const end = parseIsoDate(windowEnd);
     const list = [];
     if (!start || !end || end < start) return { days: list, dropped: 0 };
     const cursor = new Date(end);
@@ -80,7 +103,7 @@ function CalendarHeatmap({
     const first = list[0];
     const trimmed = first ? Math.round((first.getTime() - start.getTime()) / 864e5) : 0;
     return { days: list, dropped: Math.max(0, trimmed) };
-  }, [from, to, maxDays]);
+  }, [from, windowEnd, maxDays]);
   const firstIso = days.length ? toLocalIso(days[0]) : "";
   const lastIso = days.length ? toLocalIso(days[days.length - 1]) : "";
   const max = useMemo(() => {
@@ -182,18 +205,35 @@ function CalendarHeatmap({
     setActiveIso(iso);
   };
   const legendLevels = Array.from({ length: levels + 1 }, (_, l) => l);
+  const empty = emptyColor ?? EMPTY_FILL;
+  const continuous = colorFrom !== void 0 && colorTo !== void 0;
+  const hexRamp = continuous && parseHex(colorFrom) != null && parseHex(colorTo) != null;
+  const paint = (value, level) => {
+    if (level === 0) return { fill: empty, ink: "var(--text-primary)" };
+    if (fillProp || continuous) {
+      const t = max > 0 ? Math.min(1, Math.max(0, value / max)) : 1;
+      const fill = fillProp ? fillProp(value, max) : hexRamp ? lerpHex(colorFrom, colorTo, t) : `color-mix(in oklab, ${colorTo} ${Math.round(t * 100)}%, ${colorFrom})`;
+      const measured = textOn(fill);
+      return { fill, ink: measured === "currentColor" ? "var(--text-primary)" : measured };
+    }
+    const strong = levelPercent(level, levels) >= 45;
+    return {
+      fill: levelFill(level, levels, color),
+      ink: strong ? "var(--bg-surface)" : "var(--text-primary)"
+    };
+  };
+  const legendFill = (l) => paint((max > 0 ? max : 1) * l / levels, l).fill;
   const cell = (d, wrapClass, cellClass, withNumber) => {
     const iso = toLocalIso(d);
     const raw = values.get(iso);
     const value = raw ?? 0;
     const level = heatmapLevel(value, max, levels);
-    const fill = levelFill(level, levels, color);
+    const { fill, ink } = paint(value, level);
     const formattedDate = formatDay(d);
     const formattedValue = formatValue(value);
     const name = labels.day(formattedDate, formattedValue);
     const label = tooltip ? tooltip({ iso, date: d, value, hasData: raw !== void 0, level, formattedDate, formattedValue }) : name;
     const isSelected = selected === iso;
-    const strong = level > 0 && levelPercent(level, levels) >= 45;
     const shared = {
       role: "gridcell",
       "data-day": iso,
@@ -205,7 +245,7 @@ function CalendarHeatmap({
       onFocus: () => {
         if (iso !== activeIso) setActiveIso(iso);
       },
-      style: { background: fill, color: strong ? "var(--bg-surface)" : "var(--text-primary)" },
+      style: { background: fill, color: ink },
       className: cn(
         cellClass,
         isSelected && "ring-2 ring-[var(--text-primary)]",
@@ -279,7 +319,7 @@ function CalendarHeatmap({
         {
           "data-legend-level": l,
           className: "size-2.5 rounded-sm",
-          style: { background: levelFill(l, levels, color) }
+          style: { background: legendFill(l) }
         },
         l
       )),
@@ -290,6 +330,7 @@ function CalendarHeatmap({
 export {
   CalendarHeatmap,
   DEFAULT_CALENDAR_HEATMAP_LABELS,
-  heatmapLevel
+  heatmapLevel,
+  heatmapWindowEnd
 };
 //# sourceMappingURL=calendar-heatmap.js.map