@alfadocs/ui-kit-debug 1.3.13 → 1.4.1

package/dist/_chunks/{tab-bar-Axhk6xzx.js → tab-bar-BYESZINM.js}

@@ -1,30 +1,30 @@
-import { jsx as a, jsxs as g, Fragment as _ } from "react/jsx-runtime";
-import { useRef as S, useState as V, useCallback as F, forwardRef as O, Fragment as D } from "react";
+import { jsx as a, jsxs as v, Fragment as S } from "react/jsx-runtime";
+import { useRef as V, useState as F, useCallback as O, forwardRef as D, Fragment as M } from "react";
 import { c as C } from "./index-D2ZczOXr.js";
-import { useTranslation as M } from "react-i18next";
-import { B as L } from "./badge-DCOqV9mI.js";
+import { useTranslation as L } from "react-i18next";
+import { B as W } from "./badge-DCOqV9mI.js";
 import { D as b } from "./dropdown-menu-DU-Hrf33.js";
-import { u as W } from "./use-media-query-CcAx5SMM.js";
-import { u as P } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { u as I } from "./use-overflow-collapse-BIOzKbni.js";
-import { C as Q } from "./chevron-down-DWE7GSq9.js";
-import { C as q } from "./check-DrFSN__t.js";
-import { C as G } from "./chevron-left-B8cOyH-V.js";
-import { C as H } from "./chevron-right-I9AeSxH2.js";
-function J(t = !0) {
-  const c = S(null), [d, p] = V({ start: !1, end: !1 });
-  P(() => {
+import { u as P } from "./use-media-query-CcAx5SMM.js";
+import { u as I } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as Q } from "./use-overflow-collapse-BIOzKbni.js";
+import { C as q } from "./chevron-down-DWE7GSq9.js";
+import { C as G } from "./check-DrFSN__t.js";
+import { C as H } from "./chevron-left-B8cOyH-V.js";
+import { C as J } from "./chevron-right-I9AeSxH2.js";
+function K(d = !0) {
+  const c = V(null), [u, o] = F({ start: !1, end: !1 });
+  I(() => {
     const r = c.current;
-    if (!r || !t) {
-      p(
-        (o) => o.start || o.end ? { start: !1, end: !1 } : o
+    if (!r || !d) {
+      o(
+        (t) => t.start || t.end ? { start: !1, end: !1 } : t
       );
       return;
     }
     const e = () => {
-      const o = Math.abs(r.scrollLeft), f = r.scrollWidth - r.clientWidth, i = o > 1, m = f - o > 1;
-      p(
-        (v) => v.start === i && v.end === m ? v : { start: i, end: m }
+      const t = Math.abs(r.scrollLeft), f = r.scrollWidth - r.clientWidth, i = t > 1, m = f - t > 1;
+      o(
+        (p) => p.start === i && p.end === m ? p : { start: i, end: m }
       );
     };
     e(), r.addEventListener("scroll", e, { passive: !0 });
@@ -32,28 +32,28 @@ function J(t = !0) {
     return typeof ResizeObserver < "u" && (n = new ResizeObserver(e), n.observe(r), r.firstElementChild && n.observe(r.firstElementChild)), () => {
       r.removeEventListener("scroll", e), n == null || n.disconnect();
     };
-  }, [t]);
-  const u = F((r) => {
+  }, [d]);
+  const g = O((r) => {
     var i;
     const e = c.current;
     if (!e || typeof window > "u") return;
-    const n = window.getComputedStyle(e).direction === "rtl", o = (i = window.matchMedia) == null ? void 0 : i.call(
+    const n = window.getComputedStyle(e).direction === "rtl", t = (i = window.matchMedia) == null ? void 0 : i.call(
       window,
       "(prefers-reduced-motion: reduce)"
     ).matches, f = e.clientWidth * 0.85 * r * (n ? -1 : 1);
-    e.scrollBy({ left: f, behavior: o ? "auto" : "smooth" });
+    e.scrollBy({ left: f, behavior: t ? "auto" : "smooth" });
   }, []);
   return {
     ref: c,
-    canScrollStart: d.start,
-    canScrollEnd: d.end,
-    scrollByPage: u
+    canScrollStart: u.start,
+    canScrollEnd: u.end,
+    scrollByPage: g
   };
 }
-function K(t) {
-  return t > 99 ? "99+" : String(t);
+function U(d) {
+  return d > 99 ? "99+" : String(d);
 }
-const U = C("ds:shrink-0", {
+const X = C("ds:shrink-0", {
   variants: {
     position: {
       top: "ds:pt-[var(--spacing-md)]",
@@ -65,7 +65,7 @@ const U = C("ds:shrink-0", {
     }
   },
   defaultVariants: { position: "top", fill: !1 }
-}), X = "ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)]/80 ds:backdrop-blur-md ds:shadow-[var(--shadow-md)]", Y = [
+}), Y = "ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)]/80 ds:backdrop-blur-md ds:shadow-[var(--shadow-md)]", Z = [
   "ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto ds:py-[var(--spacing-xs)]",
   "ds:[--tabbar-mask-start:black] ds:[--tabbar-mask-end:black]",
   "ds:ltr:data-[fade-start=true]:[--tabbar-mask-start:transparent]",
@@ -76,7 +76,7 @@ const U = C("ds:shrink-0", {
   "ds:motion-reduce:[mask-image:none]",
   "ds:[.theme-accessible_&]:[mask-image:none]",
   "ds:forced-colors:[mask-image:none]"
-].join(" "), Z = C(
+].join(" "), ss = C(
   "ds:flex ds:items-stretch ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
   {
     variants: {
@@ -99,36 +99,38 @@ const U = C("ds:shrink-0", {
     },
     defaultVariants: { fill: !1 }
   }
-), E = "ds:inline-flex ds:items-center ds:text-[color:var(--accent)] ds:[&>svg]:size-4", ss = "ds:group-aria-[current=page]:underline ds:group-aria-[current=page]:decoration-2 ds:group-aria-[current=page]:decoration-[color:var(--accent)] ds:group-aria-[current=page]:underline-offset-[var(--spacing-xs)]", as = "ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", T = "ds:absolute ds:top-px ds:bottom-px ds:z-10 ds:flex ds:min-w-[var(--min-target-size)] ds:items-center ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", rs = "ds:start-px ds:justify-start ds:ps-[var(--spacing-xs)]", es = "ds:end-px ds:justify-end ds:pe-[var(--spacing-xs)]", $ = "ds:size-4 ds:shrink-0 ds:text-[color:var(--accent)] ds:rtl:-scale-x-100", ns = O(
+), E = "ds:inline-flex ds:items-center ds:text-[color:var(--accent)] ds:[&>svg]:size-4", as = "ds:group-aria-[current=page]:underline ds:group-aria-[current=page]:decoration-2 ds:group-aria-[current=page]:decoration-[color:var(--accent)] ds:group-aria-[current=page]:underline-offset-[var(--spacing-xs)]", rs = "ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", T = "ds:absolute ds:top-px ds:bottom-px ds:z-10 ds:flex ds:min-w-[var(--min-target-size)] ds:items-center ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", es = "ds:start-px ds:justify-start ds:ps-[var(--spacing-xs)]", ns = "ds:end-px ds:justify-end ds:pe-[var(--spacing-xs)]", $ = "ds:size-4 ds:shrink-0 ds:text-[color:var(--accent)] ds:rtl:-scale-x-100", ts = D(
   ({
-    items: t,
-    ariaLabel: c,
-    onSelect: d,
-    renderLink: p,
-    fill: u = !1,
-    position: r = "top",
-    collapseToMenu: e = !1,
-    className: n
-  }, o) => {
-    const { t: f } = M(), i = W("(max-width: 640px)"), { containerRef: m, contentRef: v, isOverflowing: j } = I(e), w = e && (i || j), {
-      ref: A,
+    items: d,
+    id: c,
+    ariaLabel: u,
+    onSelect: o,
+    renderLink: g,
+    fill: r = !1,
+    position: e = "top",
+    collapseToMenu: n = !1,
+    className: t
+  }, f) => {
+    const { t: i } = L(), m = P("(max-width: 640px)"), { containerRef: p, contentRef: j, isOverflowing: A } = Q(n), w = n && (m || A), {
+      ref: _,
       canScrollStart: k,
       canScrollEnd: N,
       scrollByPage: y
-    } = J(!w), l = t.find((s) => s.isActive) ?? t[0];
+    } = K(!w), l = d.find((s) => s.isActive) ?? d[0];
     return /* @__PURE__ */ a(
       "div",
       {
-        ref: o,
+        ref: f,
         "data-component": "tab-bar",
-        className: `${U({ position: r, fill: u })}${n ? ` ${n}` : ""}`,
-        children: /* @__PURE__ */ g("div", { className: "ds:relative", children: [
-          /* @__PURE__ */ a("div", { ref: m, className: X, children: w ? /* @__PURE__ */ a("nav", { "aria-label": c, className: "ds:w-full", children: /* @__PURE__ */ g(b.Root, { children: [
-            /* @__PURE__ */ g(b.Trigger, { className: as, children: [
+        "data-component-id": c,
+        className: `${X({ position: e, fill: r })}${t ? ` ${t}` : ""}`,
+        children: /* @__PURE__ */ v("div", { className: "ds:relative", children: [
+          /* @__PURE__ */ a("div", { ref: p, className: Y, children: w ? /* @__PURE__ */ a("nav", { "aria-label": u, className: "ds:w-full", children: /* @__PURE__ */ v(b.Root, { children: [
+            /* @__PURE__ */ v(b.Trigger, { className: rs, children: [
               l != null && l.icon ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: E, children: l.icon }) : null,
               /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:truncate ds:text-start", children: l == null ? void 0 : l.label }),
               /* @__PURE__ */ a(
-                Q,
+                q,
                 {
                   "aria-hidden": "true",
                   className: "ds:size-4 ds:shrink-0 ds:text-[color:var(--muted-foreground)]"
@@ -140,12 +142,13 @@ const U = C("ds:shrink-0", {
               {
                 align: "start",
                 className: "ds:min-w-[12rem]",
-                children: t.map((s) => /* @__PURE__ */ a(
+                children: d.map((s) => /* @__PURE__ */ a(
                   b.Item,
                   {
+                    "data-tab-id": s.id,
                     startIcon: s.icon,
                     endIcon: s.isActive ? /* @__PURE__ */ a(
-                      q,
+                      G,
                       {
                         "aria-hidden": "true",
                         className: "ds:text-[color:var(--accent)]"
@@ -153,7 +156,7 @@ const U = C("ds:shrink-0", {
                     ) : void 0,
                     "aria-current": s.isActive ? "page" : void 0,
                     onSelect: () => {
-                      s.href ? window.location.assign(s.href) : d == null || d(s.id);
+                      s.href ? window.location.assign(s.href) : o == null || o(s.id);
                     },
                     children: s.label
                   },
@@ -164,36 +167,38 @@ const U = C("ds:shrink-0", {
           ] }) }) : /* @__PURE__ */ a(
             "div",
             {
-              ref: A,
+              ref: _,
               "data-fade-start": k ? "true" : void 0,
               "data-fade-end": N ? "true" : void 0,
-              className: Y,
+              className: Z,
               children: /* @__PURE__ */ a(
                 "nav",
                 {
-                  ref: v,
-                  "aria-label": c,
-                  className: Z({ fill: u }),
-                  children: t.map((s) => {
-                    const z = typeof s.badgeCount == "number" && s.badgeCount > 0 ? s.badgeCount : void 0, h = s.isActive ? "page" : void 0, x = /* @__PURE__ */ g(_, { children: [
+                  ref: j,
+                  "aria-label": u,
+                  className: ss({ fill: r }),
+                  children: d.map((s) => {
+                    const z = typeof s.badgeCount == "number" && s.badgeCount > 0 ? s.badgeCount : void 0, h = s.isActive ? "page" : void 0, x = /* @__PURE__ */ v(S, { children: [
                       s.icon ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: E, children: s.icon }) : null,
-                      /* @__PURE__ */ g("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
-                        /* @__PURE__ */ a("span", { className: ss, children: s.label }),
-                        z !== void 0 ? /* @__PURE__ */ a(L, { variant: "neutral", children: K(z) }) : null
+                      /* @__PURE__ */ v("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                        /* @__PURE__ */ a("span", { className: as, children: s.label }),
+                        z !== void 0 ? /* @__PURE__ */ a(W, { variant: "neutral", children: U(z) }) : null
                       ] })
                     ] });
                     if (s.href !== void 0) {
-                      const B = R({ fill: u });
-                      return p ? /* @__PURE__ */ a(D, { children: p({
+                      const B = R({ fill: r });
+                      return g ? /* @__PURE__ */ a(M, { children: g({
                         href: s.href,
                         className: B,
                         children: x,
                         "aria-current": h,
+                        "data-tab-id": s.id,
                         onClick: s.onClick
                       }) }, s.id) : /* @__PURE__ */ a(
                         "a",
                         {
                           href: s.href,
+                          "data-tab-id": s.id,
                           "aria-current": h,
                           className: B,
                           ...s.onClick ? { onClick: s.onClick } : {},
@@ -206,9 +211,10 @@ const U = C("ds:shrink-0", {
                       "button",
                       {
                         type: "button",
+                        "data-tab-id": s.id,
                         "aria-current": h,
-                        className: R({ fill: u }),
-                        onClick: () => d == null ? void 0 : d(s.id),
+                        className: R({ fill: r }),
+                        onClick: () => o == null ? void 0 : o(s.id),
                         children: x
                       },
                       s.id
@@ -222,11 +228,11 @@ const U = C("ds:shrink-0", {
             "button",
             {
               type: "button",
-              "aria-label": f("navigation.tabBar.scrollBack"),
+              "aria-label": i("navigation.tabBar.scrollBack"),
               onClick: () => y(-1),
-              className: `${T} ${rs}`,
+              className: `${T} ${es}`,
               children: /* @__PURE__ */ a(
-                G,
+                H,
                 {
                   "aria-hidden": "true",
                   className: $
@@ -238,11 +244,11 @@ const U = C("ds:shrink-0", {
             "button",
             {
               type: "button",
-              "aria-label": f("navigation.tabBar.scrollForward"),
+              "aria-label": i("navigation.tabBar.scrollForward"),
               onClick: () => y(1),
-              className: `${T} ${es}`,
+              className: `${T} ${ns}`,
               children: /* @__PURE__ */ a(
-                H,
+                J,
                 {
                   "aria-hidden": "true",
                   className: $
@@ -255,8 +261,8 @@ const U = C("ds:shrink-0", {
     );
   }
 );
-ns.displayName = "TabBar";
+ts.displayName = "TabBar";
 export {
-  ns as T
+  ts as T
 };
-//# sourceMappingURL=tab-bar-Axhk6xzx.js.map
+//# sourceMappingURL=tab-bar-BYESZINM.js.map

package/dist/_chunks/tab-bar-BYESZINM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar-BYESZINM.js","sources":["../../src/hooks/use-scroll-overflow.ts","../../src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type RefObject } from 'react';\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';\n\nexport interface UseScrollOverflowReturn<T extends HTMLElement> {\n  /** Attach to the horizontally-scrollable element (the `overflow-x-auto` box). */\n  ref: RefObject<T | null>;\n  /** Content is hidden past the inline-START edge (scrolled away from the start). */\n  canScrollStart: boolean;\n  /** Content is hidden past the inline-END edge (more to reveal toward the end). */\n  canScrollEnd: boolean;\n  /**\n   * Scroll by ~one viewport toward the inline start (`-1`) or end (`+1`),\n   * smoothly unless the user prefers reduced motion. Direction-agnostic: works\n   * in both LTR and RTL.\n   */\n  scrollByPage: (direction: -1 | 1) => void;\n}\n\n/**\n * Reports whether a horizontally-scrollable element has hidden content at its\n * inline-start / inline-end edges, and exposes a paged scroll action — the\n * plumbing behind a scroll strip's edge affordances (fade + chevron buttons).\n *\n * Direction-agnostic: distance-from-start is read as `Math.abs(scrollLeft)`,\n * which is correct in both LTR (`0…max`) and modern RTL (`0…-max`), so the two\n * edges are reported on the right logical side without branching. `scrollByPage`\n * flips its physical sign from the element's computed `direction`.\n *\n * Re-measures on element resize AND on content-size change (a tab added past the\n * fold widens the content without changing the container) by observing both the\n * scroll box and its first child. `enabled` switches measurement off — e.g. when\n * the host collapses the strip into a menu and there is nothing to scroll.\n *\n * Because the scrolled content stays in the DOM and is reachable by keyboard\n * (focus scrolls it into view), the affordance this drives is a sighted-pointer\n * convenience; assistive tech is unaffected.\n */\nexport function useScrollOverflow<T extends HTMLElement>(\n  enabled = true,\n): UseScrollOverflowReturn<T> {\n  const ref = useRef<T>(null);\n  const [edges, setEdges] = useState({ start: false, end: false });\n\n  useIsomorphicLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || !enabled) {\n      setEdges((prev) =>\n        prev.start || prev.end ? { start: false, end: false } : prev,\n      );\n      return;\n    }\n    const measure = () => {\n      // Math.abs() makes this direction-agnostic: modern RTL reports scrollLeft\n      // as 0 at the start and negative toward the end, so |scrollLeft| is the\n      // distance scrolled from the start in both writing directions.\n      const distanceFromStart = Math.abs(el.scrollLeft);\n      const maxScroll = el.scrollWidth - el.clientWidth;\n      // +1 tolerates sub-pixel rounding between scroll/client widths.\n      const start = distanceFromStart > 1;\n      const end = maxScroll - distanceFromStart > 1;\n      // Bail to the same reference when nothing changed, so neither the initial\n      // no-overflow measure nor an idle scroll event triggers a re-render.\n      setEdges((prev) =>\n        prev.start === start && prev.end === end ? prev : { start, end },\n      );\n    };\n    measure();\n    el.addEventListener('scroll', measure, { passive: true });\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      observer = new ResizeObserver(measure);\n      // The container catches viewport-width changes; its first child (the\n      // content row) catches a tab added/removed past the fold, which grows the\n      // scroll width without resizing the container.\n      observer.observe(el);\n      if (el.firstElementChild) observer.observe(el.firstElementChild);\n    }\n    return () => {\n      el.removeEventListener('scroll', measure);\n      observer?.disconnect();\n    };\n  }, [enabled]);\n\n  const scrollByPage = useCallback((direction: -1 | 1) => {\n    const el = ref.current;\n    if (!el || typeof window === 'undefined') return;\n    const isRtl = window.getComputedStyle(el).direction === 'rtl';\n    const reduceMotion = window.matchMedia?.(\n      '(prefers-reduced-motion: reduce)',\n    ).matches;\n    // ~85% of the viewport so a sliver of context carries across pages. The\n    // physical sign flips in RTL (scrollLeft runs toward negative).\n    const amount = el.clientWidth * 0.85 * direction * (isRtl ? -1 : 1);\n    el.scrollBy({ left: amount, behavior: reduceMotion ? 'auto' : 'smooth' });\n  }, []);\n\n  return {\n    ref,\n    canScrollStart: edges.start,\n    canScrollEnd: edges.end,\n    scrollByPage,\n  };\n}\n","/**\n * TabBar — a floating-pill bar of page-level navigation tabs.\n *\n * Each tab is an icon + label (+ optional count badge); the active tab is\n * marked with `aria-current=\"page\"` and an `--accent` underline. The bar is a\n * glassy `--card` pill that floats on whatever canvas the consumer provides\n * (the strip area itself is transparent, so it blends with the surrounding\n * surface).\n *\n * Two layouts:\n * - default (`fill` off): content-width tabs that **centre** when they fit and\n *   scroll from the inline-start (`safe center`) when they overflow, with a\n *   gutter preserved at both ends. The label stacks under the icon below `sm`.\n *   Use this when the tab set is open-ended (e.g. a marketplace app's routes).\n * - `fill`: equal-width tabs that fill the bar and always stack the label under\n *   the icon — a fixed, always-visible set that fits any column width without\n *   scrolling (e.g. a patient portal's handful of sections).\n *\n * Tabs render as links when given an `href` (real navigation) or as buttons\n * otherwise (in-app view switching via `onSelect`). Use it as a header (top,\n * default) for section navigation; `position=\"bottom\"` floats it from the\n * bottom edge for a footer.\n *\n * With `collapseToMenu`, the strip folds into a single DropdownMenu whenever the\n * tabs don't fit — below the `sm` breakpoint OR when they overflow their\n * container at any width (a narrow column on a wide screen, e.g. a page squeezed\n * between two sidebars, clips the tabs just the same as a small viewport).\n *\n * SPA / consumer-router links: pass `renderLink` and TabBar hands each `href`\n * tab off to your router's `<Link>` instead of rendering its own `<a>` — the\n * embedded MarketplaceAppShell strip uses this so a tab click is a client-side\n * route change, not a full page navigation. The kit forwards the same\n * `className` + `aria-current` so the accent-underline active styling and the\n * `aria-current=\"page\"` marker survive in both modes. With `renderLink`\n * omitted the output is the plain `<a href>` exactly as before.\n */\nimport { forwardRef, Fragment, type MouseEvent, type ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { Check, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Badge } from '../badge';\nimport { DropdownMenu } from '../dropdown-menu';\nimport { useMediaQuery } from '../../hooks/use-media-query';\nimport { useScrollOverflow } from '../../hooks/use-scroll-overflow';\nimport { useOverflowCollapse } from '../../hooks/use-overflow-collapse';\n\nexport interface TabBarItem {\n  /** Stable id; also the value handed to `onSelect` for button tabs. */\n  id: string;\n  /** Pre-translated label — consumers localise their own nav copy. */\n  label: string;\n  /** Optional leading icon (a lucide-react element or equivalent), tinted with `--accent`. */\n  icon?: ReactNode;\n  /** Optional unseen-item count rendered as a pill badge. */\n  badgeCount?: number;\n  /** Mark the tab as the current page (`aria-current='page'` + accent underline). */\n  isActive?: boolean;\n  /** When set, the tab renders as a link to this href; otherwise it's a button. */\n  href?: string;\n  /**\n   * Optional click handler threaded onto the link tab's `<a>` (or, when\n   * `renderLink` is supplied, available to the consumer's router element). Use\n   * it to intercept a same-origin click and route client-side without a full\n   * navigation. Only applies to `href` (link) tabs — button tabs use `onSelect`.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/**\n * Props the kit hands to `renderLink` for each `href` tab. The consumer returns\n * their router's `<Link to={href}>` carrying the same `className` (the active\n * accent-underline styling) and `aria-current` (`'page'` on the active tab).\n */\nexport interface TabBarRenderLinkProps {\n  /** The tab's destination — feed it to your router's `to` / `href`. */\n  href: string;\n  /** The kit's tab classes (CVA output) — apply verbatim to the link element. */\n  className: string;\n  /** Icon + label + badge — render as the link's children. */\n  children: ReactNode;\n  /** `'page'` on the active tab, otherwise omitted — forward to the link. */\n  'aria-current'?: 'page';\n  /**\n   * The tab's stable `TabBarItem.id`, as the agent / automation DOM hook.\n   * Spread it onto your router link (`{...rest}`) so the tab stays addressable\n   * by `[data-tab-id]` the same way the kit's own `<a>` / `<button>` tabs are —\n   * see PRS §26 §6.\n   */\n  'data-tab-id'?: string;\n  /** Optional per-item click handler (the item's `onClick`), if supplied. */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport interface TabBarProps {\n  /** The tabs, in order. */\n  items: TabBarItem[];\n  /**\n   * Opaque instance id, emitted on the strip as `data-component-id`. Pass it\n   * when more than one TabBar can be on screen so an agent / automation tool\n   * can scope its `[data-tab-id]` lookup to one bar (PRS §26 §6).\n   */\n  id?: string;\n  /** Accessible name for the `<nav>` landmark. */\n  ariaLabel: string;\n  /** Fires with the tab `id` when a button tab (one without `href`) is chosen. */\n  onSelect?: (id: string) => void;\n  /**\n   * Render an `href` tab via the consumer's router instead of the kit's own\n   * `<a>`. TabBar calls it for each link tab and renders the returned node; the\n   * consumer returns their `<Link to={href}>` carrying the supplied `className`\n   * + `aria-current` so the active accent underline and the `aria-current=\"page\"`\n   * marker are preserved. Use it for SPA navigation (e.g. the MarketplaceAppShell\n   * strip) so a tab click is a client-side route change, not a full page load.\n   * Omit it to render the plain `<a href>` exactly as before. Button tabs (no\n   * `href`) ignore `renderLink` and continue to use `onSelect`.\n   */\n  renderLink?: (props: TabBarRenderLinkProps) => ReactNode;\n  /**\n   * Equal-width tabs that fill the bar and always stack the label under the\n   * icon (for a fixed, always-visible set). Off (default) = content-width tabs\n   * that centre when they fit and scroll when they overflow.\n   */\n  fill?: boolean;\n  /**\n   * Float side. `'top'` (default) gutters from the top edge for a header;\n   * `'bottom'` gutters from the bottom edge for a footer.\n   */\n  position?: 'top' | 'bottom';\n  /**\n   * Collapse the tab strip into a single DropdownMenu whenever the tabs don't\n   * fit — below the `sm` breakpoint (≤640px) OR when they overflow their\n   * container at any viewport width (a narrow column between two sidebars clips\n   * the tabs the same as a small screen). The trigger shows the active tab; the\n   * menu lists them all. Off (default) keeps the content-width / scroll\n   * behaviour at every width, so existing consumers are unaffected. Designed for\n   * button (`onSelect`) tabs; in the collapsed menu an `href` tab navigates with\n   * a full page load, so `renderLink` (SPA routing) and a per-item `onClick`\n   * apply only to the expanded strip.\n   */\n  collapseToMenu?: boolean;\n  /** Extra classes merged onto the outer strip (e.g. sticky/fixed positioning). */\n  className?: string;\n}\n\nfunction formatBadgeCount(count: number): string {\n  return count > 99 ? '99+' : String(count);\n}\n\n/* Transparent strip area — provides the floating gutter on the active side. The\n   default layout also insets the pill horizontally so it reads as a floating\n   strip; `fill` drops that inset so the pill spans the full width and aligns\n   with the consumer's content (e.g. a portal's cards). */\nconst stripVariants = cva('ds:shrink-0', {\n  variants: {\n    position: {\n      top: 'ds:pt-[var(--spacing-md)]',\n      bottom: 'ds:pb-[var(--spacing-md)]',\n    },\n    fill: {\n      false: 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n      true: '',\n    },\n  },\n  defaultVariants: { position: 'top', fill: false },\n});\n\n/* The pill is the glass chrome — the bordered, blurred, rounded surface. The\n   scrollable tab row is a separate inner element (`pillScrollClasses`) so the\n   edge-fade mask touches only the tabs, never the pill's border. It is also the\n   overflow-collapse MEASUREMENT container: it stays mounted in both the scroll\n   and the dropdown render, and (carrying no padding) its `clientWidth` is\n   exactly the width the tab row has to fit. */\nconst pillClasses =\n  'ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)]/80 ds:backdrop-blur-md ds:shadow-[var(--shadow-md)]';\n\n/* The inner scroll container. `safe center` centres the tabs when they fit but\n   falls back to start-alignment the moment they overflow, so the row stays fully\n   scrollable end to end. Inline-edge MASK: the leading / trailing edge fades only\n   when tabs are hidden past it (`data-fade-start` / `data-fade-end`), so a clipped\n   tab dissolves into the glass under the accent chevron — alpha-based, so no seam\n   with the translucent pill. Logical via `--tabbar-mask-*` (RTL-mapped); `black`\n   is the mask-opaque sentinel, not a colour. Disabled under reduced motion, the\n   accessible theme, and forced-colors so content is never hidden from those\n   users. `--tabbar-fade-distance` (default `--spacing-lg`) is per-instance. */\nconst pillScrollClasses = [\n  'ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto ds:py-[var(--spacing-xs)]',\n  'ds:[--tabbar-mask-start:black] ds:[--tabbar-mask-end:black]',\n  'ds:ltr:data-[fade-start=true]:[--tabbar-mask-start:transparent]',\n  'ds:ltr:data-[fade-end=true]:[--tabbar-mask-end:transparent]',\n  'ds:rtl:data-[fade-start=true]:[--tabbar-mask-end:transparent]',\n  'ds:rtl:data-[fade-end=true]:[--tabbar-mask-start:transparent]',\n  'ds:[mask-image:linear-gradient(to_right,var(--tabbar-mask-start)_0,black_var(--tabbar-fade-distance,var(--spacing-lg)),black_calc(100%-var(--tabbar-fade-distance,var(--spacing-lg))),var(--tabbar-mask-end)_100%)]',\n  'ds:motion-reduce:[mask-image:none]',\n  'ds:[.theme-accessible_&]:[mask-image:none]',\n  'ds:forced-colors:[mask-image:none]',\n].join(' ');\n\n/* The nav's inline padding is the start/end gutter — it scrolls WITH the tabs,\n   so the gutter survives a full scroll. Content width (`shrink-0`) by default so\n   it overflows and scrolls; `w-full` in fill mode so the tabs spread to fit. */\nconst navVariants = cva(\n  'ds:flex ds:items-stretch ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n  {\n    variants: {\n      fill: { false: 'ds:shrink-0', true: 'ds:w-full' },\n    },\n    defaultVariants: { fill: false },\n  },\n);\n\n/* Each tab is a centred flex box so the icon + label sit centred on both axes.\n   Regular weight; the active state is carried by the accent underline + accent\n   icon, not a heavier weight. */\nconst tabVariants = cva(\n  'ds:group ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:whitespace-nowrap ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:no-underline ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]',\n  {\n    variants: {\n      fill: {\n        // Responsive: label under the icon below `sm`, beside it at `sm`+.\n        false: 'ds:flex-col ds:sm:flex-row ds:sm:gap-[var(--spacing-sm)]',\n        // Fill the bar, always icon-over-label. No `min-w-0`, so a tab never\n        // shrinks below its label (labels never overlap); if the full set can't\n        // fit, the pill scrolls instead.\n        true: 'ds:flex-1 ds:basis-0 ds:flex-col',\n      },\n    },\n    defaultVariants: { fill: false },\n  },\n);\n\nconst iconClasses =\n  'ds:inline-flex ds:items-center ds:text-[color:var(--accent)] ds:[&>svg]:size-4';\n\n/* The accent underline rides the label text itself (not the whole tab), so it\n   never reaches the icon or badge and never has to propagate through flex. */\nconst labelClasses =\n  'ds:group-aria-[current=page]:underline ds:group-aria-[current=page]:decoration-2 ds:group-aria-[current=page]:decoration-[color:var(--accent)] ds:group-aria-[current=page]:underline-offset-[var(--spacing-xs)]';\n\n/* The mobile collapse trigger — a full-width button styled like a tab, showing\n   the active tab's icon + label with a trailing chevron. */\nconst menuTriggerClasses =\n  'ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]';\n\n/* Scroll affordance — an accent chevron pinned to a scrollable edge of the pill,\n   shown only when there are tabs hidden past that edge. No button chrome: the\n   edge tab fades into the glass via the inner scroll's mask (above); the chevron\n   just points the way and pages the strip on click. A `--min-target-size` hit\n   area keeps it tappable. Block axis spans the pill (`top`/`bottom` px-inset past\n   the border); the inline edge (`start`/`end`) and the chevron flip mirror RTL. */\nconst scrollAffordanceClasses =\n  'ds:absolute ds:top-px ds:bottom-px ds:z-10 ds:flex ds:min-w-[var(--min-target-size)] ds:items-center ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]';\n\n/* Pin the chevron to its inline edge, over the faded tab. */\nconst scrollAffordanceStartClasses =\n  'ds:start-px ds:justify-start ds:ps-[var(--spacing-xs)]';\n\nconst scrollAffordanceEndClasses =\n  'ds:end-px ds:justify-end ds:pe-[var(--spacing-xs)]';\n\n/* The chevron is the only visible mark — accent-tinted (matching the tab icons),\n   mirrored under RTL. Decorative (`aria-hidden`); the button carries the label. */\nconst scrollChevronClasses =\n  'ds:size-4 ds:shrink-0 ds:text-[color:var(--accent)] ds:rtl:-scale-x-100';\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  (\n    {\n      items,\n      id,\n      ariaLabel,\n      onSelect,\n      renderLink,\n      fill = false,\n      position = 'top',\n      collapseToMenu = false,\n      className,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    // Collapse is twofold, OR'd: the documented mobile floor (≤sm) AND actual\n    // container overflow (a narrow column on a wide screen clips the tabs just\n    // the same). Both hooks run every render (hook order); only consulted when\n    // collapseToMenu is on. The pill (containerRef) stays mounted across the\n    // collapse so the overflow hook can still tell when the column has grown\n    // back; the tab row (contentRef) carries the natural width.\n    const isNarrow = useMediaQuery('(max-width: 640px)');\n    const { containerRef, contentRef, isOverflowing } = useOverflowCollapse<\n      HTMLDivElement,\n      HTMLElement\n    >(collapseToMenu);\n    const isDropdown = collapseToMenu && (isNarrow || isOverflowing);\n\n    // Edge scroll affordances for the scroll layout. Disabled in dropdown mode\n    // (no scroll box), so the observer tears down / re-attaches across the flip.\n    const {\n      ref: pillRef,\n      canScrollStart,\n      canScrollEnd,\n      scrollByPage,\n    } = useScrollOverflow<HTMLDivElement>(!isDropdown);\n\n    const activeItem = items.find((item) => item.isActive) ?? items[0];\n\n    return (\n      <div\n        ref={ref}\n        data-component=\"tab-bar\"\n        data-component-id={id}\n        className={`${stripVariants({ position, fill })}${className ? ` ${className}` : ''}`}\n      >\n        {/* Relative wrapper: the scroll affordances are absolutely positioned\n            against it, NOT inside the scroll box (absolute children of a scroller\n            scroll away with the content). */}\n        <div className=\"ds:relative\">\n          {/* The pill doubles as the overflow-collapse measurement container —\n              rendered in BOTH branches (same element, same width) so the hook\n              can keep measuring after the tab row is swapped for the menu. */}\n          <div ref={containerRef} className={pillClasses}>\n            {isDropdown ? (\n              <nav aria-label={ariaLabel} className=\"ds:w-full\">\n                <DropdownMenu.Root>\n                  <DropdownMenu.Trigger className={menuTriggerClasses}>\n                    {activeItem?.icon ? (\n                      <span aria-hidden=\"true\" className={iconClasses}>\n                        {activeItem.icon}\n                      </span>\n                    ) : null}\n                    <span className=\"ds:flex-1 ds:truncate ds:text-start\">\n                      {activeItem?.label}\n                    </span>\n                    <ChevronDown\n                      aria-hidden=\"true\"\n                      className=\"ds:size-4 ds:shrink-0 ds:text-[color:var(--muted-foreground)]\"\n                    />\n                  </DropdownMenu.Trigger>\n                  <DropdownMenu.Content\n                    align=\"start\"\n                    className=\"ds:min-w-[12rem]\"\n                  >\n                    {items.map((item) => (\n                      <DropdownMenu.Item\n                        key={item.id}\n                        data-tab-id={item.id}\n                        startIcon={item.icon}\n                        endIcon={\n                          item.isActive ? (\n                            <Check\n                              aria-hidden=\"true\"\n                              className=\"ds:text-[color:var(--accent)]\"\n                            />\n                          ) : undefined\n                        }\n                        aria-current={item.isActive ? 'page' : undefined}\n                        onSelect={() => {\n                          if (item.href) {\n                            window.location.assign(item.href);\n                          } else {\n                            onSelect?.(item.id);\n                          }\n                        }}\n                      >\n                        {item.label}\n                      </DropdownMenu.Item>\n                    ))}\n                  </DropdownMenu.Content>\n                </DropdownMenu.Root>\n              </nav>\n            ) : (\n              <div\n                ref={pillRef}\n                data-fade-start={canScrollStart ? 'true' : undefined}\n                data-fade-end={canScrollEnd ? 'true' : undefined}\n                className={pillScrollClasses}\n              >\n                <nav\n                  ref={contentRef}\n                  aria-label={ariaLabel}\n                  className={navVariants({ fill })}\n                >\n                  {items.map((item) => {\n                    const badge =\n                      typeof item.badgeCount === 'number' && item.badgeCount > 0\n                        ? item.badgeCount\n                        : undefined;\n                    const ariaCurrent = item.isActive ? 'page' : undefined;\n                    const inner = (\n                      <>\n                        {item.icon ? (\n                          <span aria-hidden=\"true\" className={iconClasses}>\n                            {item.icon}\n                          </span>\n                        ) : null}\n                        {/* Label + badge stay paired; they sit under the icon when\n                          the tab stacks to a column. */}\n                        <span className=\"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n                          <span className={labelClasses}>{item.label}</span>\n                          {badge !== undefined ? (\n                            <Badge variant=\"neutral\">\n                              {formatBadgeCount(badge)}\n                            </Badge>\n                          ) : null}\n                        </span>\n                      </>\n                    );\n                    if (item.href !== undefined) {\n                      const tabClassName = tabVariants({ fill });\n                      // Consumer-router mode: hand the tab to the consumer's <Link>,\n                      // forwarding the same className + aria-current (+ the item's\n                      // onClick) so the active styling and `aria-current=\"page\"`\n                      // marker carry over and clicking routes client-side.\n                      if (renderLink) {\n                        return (\n                          <Fragment key={item.id}>\n                            {renderLink({\n                              href: item.href,\n                              className: tabClassName,\n                              children: inner,\n                              'aria-current': ariaCurrent,\n                              'data-tab-id': item.id,\n                              onClick: item.onClick,\n                            })}\n                          </Fragment>\n                        );\n                      }\n                      // Default: plain anchor — byte-identical to before when no\n                      // per-item onClick is supplied (onClick is omitted entirely,\n                      // not passed as undefined, so the rendered <a> is unchanged).\n                      return (\n                        <a\n                          key={item.id}\n                          href={item.href}\n                          data-tab-id={item.id}\n                          aria-current={ariaCurrent}\n                          className={tabClassName}\n                          {...(item.onClick ? { onClick: item.onClick } : {})}\n                        >\n                          {inner}\n                        </a>\n                      );\n                    }\n                    return (\n                      <button\n                        key={item.id}\n                        type=\"button\"\n                        data-tab-id={item.id}\n                        aria-current={ariaCurrent}\n                        className={tabVariants({ fill })}\n                        onClick={() => onSelect?.(item.id)}\n                      >\n                        {inner}\n                      </button>\n                    );\n                  })}\n                </nav>\n              </div>\n            )}\n          </div>\n          {canScrollStart ? (\n            <button\n              type=\"button\"\n              aria-label={t('navigation.tabBar.scrollBack')}\n              onClick={() => scrollByPage(-1)}\n              className={`${scrollAffordanceClasses} ${scrollAffordanceStartClasses}`}\n            >\n              <ChevronLeft\n                aria-hidden=\"true\"\n                className={scrollChevronClasses}\n              />\n            </button>\n          ) : null}\n          {canScrollEnd ? (\n            <button\n              type=\"button\"\n              aria-label={t('navigation.tabBar.scrollForward')}\n              onClick={() => scrollByPage(1)}\n              className={`${scrollAffordanceClasses} ${scrollAffordanceEndClasses}`}\n            >\n              <ChevronRight\n                aria-hidden=\"true\"\n                className={scrollChevronClasses}\n              />\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nTabBar.displayName = 'TabBar';\n"],"names":["useScrollOverflow","enabled","ref","useRef","edges","setEdges","useState","useIsomorphicLayoutEffect","el","prev","measure","distanceFromStart","maxScroll","start","end","observer","scrollByPage","useCallback","direction","isRtl","reduceMotion","_a","amount","formatBadgeCount","count","stripVariants","cva","pillClasses","pillScrollClasses","navVariants","tabVariants","iconClasses","labelClasses","menuTriggerClasses","scrollAffordanceClasses","scrollAffordanceStartClasses","scrollAffordanceEndClasses","scrollChevronClasses","TabBar","forwardRef","items","id","ariaLabel","onSelect","renderLink","fill","position","collapseToMenu","className","t","useTranslation","isNarrow","useMediaQuery","containerRef","contentRef","isOverflowing","useOverflowCollapse","isDropdown","pillRef","canScrollStart","canScrollEnd","activeItem","item","jsx","jsxs","DropdownMenu","ChevronDown","Check","badge","ariaCurrent","inner","Fragment","Badge","tabClassName","ChevronLeft","ChevronRight"],"mappings":"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"}

package/dist/_chunks/task-card.agent-CF2N_uu4.js

@@ -0,0 +1,29 @@
+const t = {
+  id: "task-card",
+  // Both capabilities are HOST-DELEGATED — the card exposes no imperative
+  // handle, so the hosting TaskTray performs them, addressing this card by its
+  // data-component-id:
+  //   pick    → task-tray.select_item (the card's own activation link/button,
+  //             identical to AgendaCard / AppointmentCard, which declare `pick`
+  //             for the same affordance)
+  //   dismiss → task-tray.dismiss (removal from the queue)
+  capabilities: ["pick", "dismiss"],
+  state: {},
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "task-card",
+      description: "Marks the element as a kit TaskCard. The card root also emits data-component-id sourced from item.id and data-status with the current lifecycle."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "item.id",
+      description: "Sourced from item.id — the stable task identifier."
+    }
+  }
+};
+export {
+  t
+};
+//# sourceMappingURL=task-card.agent-CF2N_uu4.js.map

package/dist/_chunks/task-card.agent-CF2N_uu4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-card.agent-CF2N_uu4.js","sources":["../../src/components/task-card/task-card.agent.ts"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — TaskCard.                                              */\n/*                                                                        */\n/* Single-task surface. Lifecycle (dismiss, toggle-done) is owned by     */\n/* the consumer / host tray; the card emits a DOM hook so a future MCP   */\n/* UI bridge can address one rendered card by its task id.               */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\n\nexport const taskCardAgent: AgentAdapter = {\n  id: 'task-card',\n  // Both capabilities are HOST-DELEGATED — the card exposes no imperative\n  // handle, so the hosting TaskTray performs them, addressing this card by its\n  // data-component-id:\n  //   pick    → task-tray.select_item (the card's own activation link/button,\n  //             identical to AgendaCard / AppointmentCard, which declare `pick`\n  //             for the same affordance)\n  //   dismiss → task-tray.dismiss (removal from the queue)\n  capabilities: ['pick', 'dismiss'],\n  state: {},\n  actions: {},\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'task-card',\n      description:\n        'Marks the element as a kit TaskCard. The card root also emits data-component-id sourced from item.id and data-status with the current lifecycle.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'item.id',\n      description: 'Sourced from item.id — the stable task identifier.',\n    },\n  },\n};\n"],"names":["taskCardAgent"],"mappings":"AAUO,MAAMA,IAA8B;AAAA,EACzC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQJ,cAAc,CAAC,QAAQ,SAAS;AAAA,EAChC,OAAO,CAAA;AAAA,EACP,SAAS,CAAA;AAAA,EACT,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aACE;AAAA,IAAA;AAAA,IAEJ,YAAY;AAAA,MACV,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;"}

package/dist/_chunks/{tr-CTpgUtw6.js → tr-DXG2QN1K.js}

@@ -1,4 +1,4 @@
-import { A as o, B as n, E as i, F as m } from "./date-picker-variants-eL6HjWvw.js";
+import { g as o, h as n, j as i, k as m } from "./format-4HNwNGrN.js";
 const d = {
   lessThanXSeconds: {
     one: "bir saniyeden az",
@@ -100,7 +100,7 @@ const d = {
   tomorrow: "'yarın saat' p",
   nextWeek: "eeee 'saat' p",
   other: "P"
-}, f = (a, r, e, t) => k[a], g = {
+}, g = (a, r, e, t) => k[a], f = {
   narrow: ["MÖ", "MS"],
   abbreviated: ["MÖ", "MS"],
   wide: ["Milattan Önce", "Milattan Sonra"]
@@ -216,7 +216,7 @@ const d = {
 }, z = (a, r) => Number(a) + ".", v = {
   ordinalNumber: z,
   era: n({
-    values: g,
+    values: f,
     defaultWidth: "wide"
   }),
   quarter: n({
@@ -238,13 +238,13 @@ const d = {
     formattingValues: w,
     defaultFormattingWidth: "wide"
   })
-}, W = /^(\d+)(\.)?/i, S = /\d+/i, E = {
+}, W = /^(\d+)(\.)?/i, S = /\d+/i, H = {
   narrow: /^(mö|ms)/i,
   abbreviated: /^(mö|ms)/i,
   wide: /^(milattan önce|milattan sonra)/i
-}, H = {
-  any: [/(^mö|^milattan önce)/i, /(^ms|^milattan sonra)/i]
 }, C = {
+  any: [/(^mö|^milattan önce)/i, /(^ms|^milattan sonra)/i]
+}, E = {
   narrow: /^[1234]/i,
   abbreviated: /^[1234]ç/i,
   wide: /^((i|İ)lk|(i|İ)kinci|üçüncü|son) çeyrek/i
@@ -295,7 +295,7 @@ const d = {
   short: /^(pz|pt|sa|ça|pe|cu|ct)/i,
   abbreviated: /^(paz|pzt|sal|çar|per|cum|cts)/i,
   wide: /^(pazar(?!tesi)|pazartesi|salı|çarşamba|perşembe|cuma(?!rtesi)|cumartesi)/i
-}, A = {
+}, V = {
   narrow: [/^p/i, /^p/i, /^s/i, /^ç/i, /^p/i, /^c/i, /^c/i],
   any: [/^pz/i, /^pt/i, /^sa/i, /^ça/i, /^pe/i, /^cu/i, /^ct/i],
   wide: [
@@ -307,10 +307,10 @@ const d = {
     /^cuma(?!rtesi)/i,
     /^cumartesi/i
   ]
-}, V = {
+}, X = {
   narrow: /^(öö|ös|gy|ö|sa|ös|ak|ge)/i,
   any: /^(ö\.?\s?[ös]\.?|öğleden sonra|gece yarısı|öğle|(sabah|öğ|akşam|gece)(leyin))/i
-}, X = {
+}, A = {
   any: {
     am: /^ö\.?ö\.?/i,
     pm: /^ö\.?s\.?/i,
@@ -330,13 +330,13 @@ const d = {
     }
   }),
   era: i({
-    matchPatterns: E,
+    matchPatterns: H,
     defaultMatchWidth: "wide",
-    parsePatterns: H,
+    parsePatterns: C,
     defaultParseWidth: "any"
   }),
   quarter: i({
-    matchPatterns: C,
+    matchPatterns: E,
     defaultMatchWidth: "wide",
     parsePatterns: D,
     defaultParseWidth: "any",
@@ -351,20 +351,20 @@ const d = {
   day: i({
     matchPatterns: N,
     defaultMatchWidth: "wide",
-    parsePatterns: A,
+    parsePatterns: V,
     defaultParseWidth: "any"
   }),
   dayPeriod: i({
-    matchPatterns: V,
+    matchPatterns: X,
     defaultMatchWidth: "any",
-    parsePatterns: X,
+    parsePatterns: A,
     defaultParseWidth: "any"
   })
 }, O = {
   code: "tr",
   formatDistance: l,
   formatLong: y,
-  formatRelative: f,
+  formatRelative: g,
   localize: v,
   match: T,
   options: {
@@ -375,4 +375,4 @@ const d = {
 export {
   O as tr
 };
-//# sourceMappingURL=tr-CTpgUtw6.js.map
+//# sourceMappingURL=tr-DXG2QN1K.js.map