@alfadocs/ui-kit-debug 0.71.0 → 0.72.0

package/dist/_chunks/product-hub-panel-CaZqttvm.js

@@ -0,0 +1,678 @@
+import { jsx as e, jsxs as r, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as F, useRef as T, useMemo as G, useImperativeHandle as X } from "react";
+import { c as x } from "./index-D2ZczOXr.js";
+import { useTranslation as L } from "react-i18next";
+import { E as ae } from "./empty-state-BLy7tigq.js";
+import { L as A } from "./link-CPb_pZPr.js";
+import { S as _ } from "./separator-CYU_bGFn.js";
+import { i as W } from "./is-safe-url-DkETxeHz.js";
+import { u as J } from "./registry-DvAUVLHh.js";
+import * as j from "@radix-ui/react-popover";
+import { u as te } from "./use-controllable-state-BiY4xTzM.js";
+import { I as Q } from "./icon-button-LqoiKcUN.js";
+import { S as re } from "./scroll-area-BZOvUhwQ.js";
+import { S as R } from "./skeleton-CZbwyJAA.js";
+import { T as de } from "./timestamp-BV2lC-wV.js";
+import { s as ne } from "./safe-image-src-DstKgCo7.js";
+import { c as oe } from "./createLucideIcon-DhHxpK9K.js";
+import { X as ie } from "./x-B5YnXwCz.js";
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ce = [
+  ["path", { d: "M12 7v14", key: "1akyts" }],
+  ["path", { d: "M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8", key: "1sqzm4" }],
+  [
+    "path",
+    { d: "M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5", key: "kc0143" }
+  ],
+  ["rect", { x: "3", y: "7", width: "18", height: "4", rx: "1", key: "1hberx" }]
+], O = oe("gift", ce), le = {
+  id: "product-hub-tray",
+  capabilities: ["open", "close"],
+  state: {
+    unseenCount: {
+      type: "number",
+      descriptionKey: "ui.agent.productHubTray.state.unseenCount",
+      description: "Number of unseen product releases — the trigger badge count.",
+      read: (s) => s.getUnseenCount()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.productHubTray.actions.open",
+      description: "Open the product-updates panel.",
+      invoke: (s) => {
+        s.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.productHubTray.actions.close",
+      description: "Close the product-updates panel.",
+      invoke: (s) => {
+        s.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "product-hub-tray",
+      description: "Marks the ProductHubTray wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific tray from the agent."
+    },
+    item: {
+      attr: "data-update-id",
+      description: "Stable release id emitted on each rendered release row inside the tray."
+    }
+  }
+}, pe = x(
+  "ds:relative ds:inline-flex ds:items-center",
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), ue = x(
+  [
+    "ds:flex ds:flex-col",
+    "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
+    "ds:border ds:border-[color:var(--card-border)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:z-[var(--z-popover)]",
+    // Fluid below the design cap so narrow viewports keep a gutter on
+    // both sides of the panel (shadow included).
+    "ds:w-[min(24rem,calc(100vw-2*var(--spacing-md)))]",
+    // Near-full-screen sheet below `sm`; auto above, where the list's
+    // own `--product-hub-tray-max-block-size` cap governs the height.
+    "ds:h-[calc(100dvh-6rem)] ds:sm:h-auto",
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
+    "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
+    "ds:motion-reduce:transition-none ds:motion-reduce:animate-none",
+    "ds:focus-visible:outline-none",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:p-[var(--spacing-xs)]",
+        md: "ds:p-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), me = x(
+  [
+    // Anchored to the top-end corner of the trigger, nudged outward so
+    // the gift glyph isn't covered.
+    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
+    "ds:inline-flex ds:items-center ds:justify-center",
+    // Circle at 1-2 digits; widens into a pill only for "99+".
+    "ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]",
+    "ds:rounded-[var(--radius-full)]",
+    // One red unseen-count chip across every header tray — matches the
+    // platform header and the NotificationTray badge convention.
+    "ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]",
+    "ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none",
+    "ds:pointer-events-none ds:select-none",
+    "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
+  ].join(" ")
+), fe = x(
+  [
+    // `group` so the hover/focus-revealed close button can react to the whole
+    // row, not just itself.
+    "ds:group ds:relative ds:flex ds:items-start",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:text-start",
+    "ds:transition-colors ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        tray: "ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
+        panel: "ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]"
+      },
+      // Unseen no longer tints the background — the read/new state is carried
+      // by the leading-corner Gift indicator instead, matching the
+      // notification / message cards.
+      unseen: {
+        true: "ds:hover:bg-[color:var(--muted)]/40",
+        false: "ds:hover:bg-[color:var(--muted)]/40"
+      },
+      // Row chrome: flat (inside a bordered tray/panel) vs elevated (own card
+      // on a rail). Mirrors AppointmentCard / NotificationCard so the Inbox
+      // feed reads consistently with the other rail panels.
+      surface: {
+        flat: "",
+        elevated: "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]"
+      }
+    },
+    defaultVariants: {
+      density: "tray",
+      unseen: !1,
+      surface: "flat"
+    }
+  }
+), $ = x(
+  [
+    "ds:shrink-0 ds:rounded-[var(--radius-sm)] ds:object-cover",
+    // Tile backdrop so transparent / still-loading thumbnails keep a
+    // visible square instead of collapsing into whitespace.
+    "ds:bg-[color:var(--muted)]",
+    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        tray: "ds:size-10",
+        panel: "ds:size-12"
+      }
+    },
+    defaultVariants: {
+      density: "tray"
+    }
+  }
+), ve = [
+  "ds:focus-visible:outline-none",
+  "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]",
+  "ds:after:pointer-events-auto",
+  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
+  "ds:focus-visible:after:outline-solid",
+  "ds:focus-visible:after:outline-[color:var(--ring)]",
+  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
+].join(" ");
+function Y({
+  item: s,
+  density: a = "tray",
+  surface: i = "flat",
+  locale: m,
+  onActivate: o,
+  onDismiss: c,
+  className: f,
+  ...v
+}) {
+  const { t: u } = L(), n = ne(s.imageUrl), w = !!s.url && W(s.url), l = !!s.unseen, N = a === "panel" ? "ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]" : "ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]", g = l ? /* @__PURE__ */ e("span", { className: "ds:sr-only", children: u("productHubTray.unseenLabel", ", new") }) : null;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: "listitem",
+      "data-component": "product-hub-update",
+      "data-update-id": s.id,
+      "data-unseen": l ? "true" : "false",
+      className: fe({ density: a, unseen: l, surface: i, className: f }),
+      ...v,
+      children: [
+        /* @__PURE__ */ r("span", { className: "ds:relative ds:shrink-0", children: [
+          n ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: n,
+              alt: "",
+              "aria-hidden": "true",
+              referrerPolicy: "no-referrer",
+              loading: "lazy",
+              className: $({ density: a })
+            }
+          ) : /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${$({ density: a })} ds:inline-flex ds:items-center ds:justify-center ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5`,
+              children: /* @__PURE__ */ e(O, {})
+            }
+          ),
+          l ? /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": "product-hub-unseen-dot",
+              className: "ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1] ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]"
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ r("div", { className: "ds:min-w-0 ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ e("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] type-title-item ds:text-[color:var(--foreground)]", children: w ? (
+            // A real (non-display:contents) anchor so the row is reliably
+            // keyboard-focusable; the ::after stretch keeps the whole row
+            // clickable and carries the focus ring.
+            /* @__PURE__ */ r(
+              "a",
+              {
+                href: s.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: `${ve} ds:min-w-0 ds:flex-1 ds:no-underline ds:text-[color:var(--foreground)]`,
+                onClick: () => o == null ? void 0 : o(s),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "ds:block ds:truncate ds:font-semibold", children: s.title }),
+                  g,
+                  /* @__PURE__ */ e("span", { className: "ds:sr-only", children: u("productHubTray.opensInNewTab", "(opens in a new tab)") })
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ r(V, { children: [
+            /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:font-semibold", children: s.title }),
+            g
+          ] }) }),
+          s.summary ? /* @__PURE__ */ e("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words", children: s.summary }) : null,
+          s.dateIso ? /* @__PURE__ */ e(
+            de,
+            {
+              value: s.dateIso,
+              format: "absolute",
+              locale: m,
+              className: "ds:italic ds:text-[color:var(--muted-foreground)]"
+            }
+          ) : null
+        ] }),
+        c ? /* @__PURE__ */ e(
+          "span",
+          {
+            className: "ds:absolute ds:z-[2] ds:opacity-0 ds:pointer-events-none ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-hover:pointer-events-auto ds:group-focus-within:opacity-100 ds:group-focus-within:pointer-events-auto " + N,
+            children: /* @__PURE__ */ e(
+              Q,
+              {
+                icon: /* @__PURE__ */ e(ie, {}),
+                intent: "ghost",
+                size: "sm",
+                "aria-label": u("productHubTray.dismiss", "Dismiss update"),
+                onClick: () => c(s)
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function I({
+  density: s = "tray"
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: s === "panel" ? "ds:flex ds:items-start ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]" : "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
+      children: [
+        /* @__PURE__ */ e(
+          R,
+          {
+            variant: "rounded",
+            width: s === "panel" ? "3rem" : "2.5rem",
+            height: s === "panel" ? "3rem" : "2.5rem"
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ e(R, { variant: "text", size: "md", width: "60%" }),
+          /* @__PURE__ */ e(R, { variant: "text", size: "sm", width: "90%" }),
+          /* @__PURE__ */ e(R, { variant: "text", size: "sm", width: "30%" })
+        ] })
+      ]
+    }
+  );
+}
+function Z({ children: s }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center type-body-sm ds:text-[color:var(--muted-foreground)]",
+      children: s
+    }
+  );
+}
+function ge(s, a) {
+  return s > 99 ? a : String(s);
+}
+function he() {
+  const { t: s } = L();
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center",
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
+            children: /* @__PURE__ */ e(O, {})
+          }
+        ),
+        /* @__PURE__ */ e("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: s("productHubTray.emptyTitle", "No product updates yet") }),
+        /* @__PURE__ */ e("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: s(
+          "productHubTray.emptyDescription",
+          "New releases and improvements will appear here."
+        ) })
+      ]
+    }
+  );
+}
+const be = F(
+  ({
+    id: s,
+    items: a,
+    hubUrl: i,
+    loading: m = !1,
+    error: o,
+    unseenCount: c,
+    onOpenChange: f,
+    onItemActivate: v,
+    triggerLabel: u,
+    maxVisible: n = 10,
+    emptyState: w,
+    defaultOpen: l = !1,
+    locale: N,
+    align: g = "end",
+    side: M = "bottom",
+    size: p = "md",
+    className: k,
+    ...P
+  }, z) => {
+    const { t: d } = L(), [h, b] = te({
+      defaultValue: l,
+      onChange: f
+    }), C = h ?? !1, t = c ?? a.filter((y) => y.unseen).length, S = u ?? (t > 0 ? d("productHubTray.triggerLabel", {
+      count: t,
+      defaultValue: "What's new, {{count}} unseen updates"
+    }) : d("productHubTray.triggerLabelNone", "What's new")), U = ge(
+      t,
+      d("productHubTray.badgeCountOverflow", "99+")
+    ), K = a.slice(0, Math.max(0, n)), ee = !o && !m && K.length > 0, q = i && W(i) ? i : void 0, E = T(a);
+    E.current = a;
+    const B = T(c);
+    B.current = c;
+    const se = G(
+      () => ({
+        open: () => b(!0),
+        close: () => b(!1),
+        getUnseenCount: () => B.current ?? E.current.filter((y) => y.unseen).length
+      }),
+      [b]
+    ), D = T(null);
+    X(z, () => D.current, []), J(le, se, s);
+    let H;
+    return o ? H = /* @__PURE__ */ e(Z, { children: o }) : m ? H = /* @__PURE__ */ r(V, { children: [
+      /* @__PURE__ */ e(I, {}),
+      /* @__PURE__ */ e(I, {}),
+      /* @__PURE__ */ e(I, {})
+    ] }) : K.length === 0 ? H = w ?? /* @__PURE__ */ e(he, {}) : H = K.map((y) => /* @__PURE__ */ e(
+      Y,
+      {
+        item: y,
+        density: "tray",
+        locale: N,
+        onActivate: v
+      },
+      y.id
+    )), /* @__PURE__ */ e(
+      "div",
+      {
+        ref: D,
+        "data-component": "product-hub-tray",
+        "data-component-id": s,
+        className: [pe({ size: p }), k].filter(Boolean).join(" "),
+        ...P,
+        children: /* @__PURE__ */ r(j.Root, { open: C, onOpenChange: b, children: [
+          /* @__PURE__ */ e(j.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
+            Q,
+            {
+              icon: /* @__PURE__ */ e(O, {}),
+              intent: "outline",
+              size: p === "sm" ? "sm" : "md",
+              "aria-label": S,
+              "aria-haspopup": "dialog"
+            }
+          ) }),
+          t > 0 ? /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": "product-hub-tray-badge",
+              className: me(),
+              children: U
+            }
+          ) : null,
+          /* @__PURE__ */ e(j.Portal, { children: /* @__PURE__ */ r(
+            j.Content,
+            {
+              role: "dialog",
+              "aria-label": d("productHubTray.panelTitle", "What's new"),
+              side: M,
+              align: g,
+              sideOffset: 8,
+              collisionPadding: 16,
+              className: ue({ size: p }),
+              children: [
+                /* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: /* @__PURE__ */ e("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: d("productHubTray.panelTitle", "What's new") }) }),
+                /* @__PURE__ */ e(_, {}),
+                /* @__PURE__ */ e(
+                  re,
+                  {
+                    orientation: "vertical",
+                    className: "ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--product-hub-tray-max-block-size,24rem)]",
+                    children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        role: ee ? "list" : void 0,
+                        "data-max-visible": n,
+                        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:pt-[var(--spacing-xs)]",
+                        children: H
+                      }
+                    )
+                  }
+                ),
+                q ? /* @__PURE__ */ r(V, { children: [
+                  /* @__PURE__ */ e(_, {}),
+                  /* @__PURE__ */ e("div", { className: "ds:flex ds:justify-center ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: /* @__PURE__ */ e(A, { href: q, external: !0, children: d("productHubTray.openHub", "Open in Product Hub") }) })
+                ] }) : null
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+be.displayName = "ProductHubTray";
+const ye = {
+  id: "product-hub-panel",
+  // selectItem activates one release row (fires the host hook) without
+  // persisting a stored selection → `pick`, not `select_single`.
+  capabilities: ["pick"],
+  state: {
+    items: {
+      type: "Array<{ id: string; unseen: boolean }>",
+      descriptionKey: "ui.agent.productHubPanel.state.items",
+      description: "Currently-displayed releases. Ids + unseen flag only — no content.",
+      read: (s) => s.getItems()
+    },
+    unseenCount: {
+      type: "number",
+      descriptionKey: "ui.agent.productHubPanel.state.unseenCount",
+      description: "Number of displayed releases still marked unseen.",
+      read: (s) => s.getUnseenCount()
+    }
+  },
+  actions: {
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Stable release id (the data-update-id of the row)."
+          }
+        },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.productHubPanel.actions.selectItem",
+      description: "Activate the release with the given id (fires the host analytics hook).",
+      examples: [
+        { args: { id: "rel-0680" }, note: "Activate a specific release row." }
+      ],
+      invoke: (s, a) => {
+        s.selectItem(a.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "product-hub-panel",
+      description: "Marks the ProductHubPanel section."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific panel from the agent."
+    },
+    item: {
+      attr: "data-update-id",
+      description: "Stable release id emitted on each rendered release row inside the panel."
+    }
+  }
+}, xe = x(
+  [
+    "ds:flex ds:flex-col",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
+    "ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]",
+    "ds:overflow-hidden",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      surface: {
+        flat: "",
+        elevated: "ds:shadow-[var(--shadow-card)]"
+      }
+    },
+    defaultVariants: {
+      surface: "elevated"
+    }
+  }
+), we = F(
+  ({
+    id: s,
+    items: a,
+    hubUrl: i,
+    loading: m = !1,
+    error: o,
+    title: c,
+    description: f,
+    maxVisible: v = 5,
+    emptyState: u,
+    onItemActivate: n,
+    locale: w,
+    surface: l = "elevated",
+    className: N,
+    ...g
+  }, M) => {
+    const { t: p } = L(), k = c ?? p("productHubPanel.title", "What's new"), P = a.slice(0, Math.max(0, v)), z = i && W(i) ? i : void 0;
+    let d;
+    o ? d = /* @__PURE__ */ e(Z, { children: o }) : m ? d = /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-sm)] ds:pt-0", children: [0, 1, 2].map((t) => /* @__PURE__ */ e(I, { density: "panel" }, t)) }) : P.length === 0 ? d = u ?? /* @__PURE__ */ e("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ e(
+      ae,
+      {
+        variant: "first-use",
+        size: "sm",
+        title: p("productHubPanel.emptyTitle", "No product updates yet"),
+        description: p(
+          "productHubPanel.emptyDescription",
+          "New releases and improvements will appear here."
+        )
+      }
+    ) }) : d = /* @__PURE__ */ e(
+      "div",
+      {
+        role: "list",
+        "data-max-visible": v,
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-sm)] ds:pt-0",
+        children: P.map((t) => /* @__PURE__ */ e(
+          Y,
+          {
+            item: t,
+            density: "panel",
+            locale: w,
+            onActivate: n
+          },
+          t.id
+        ))
+      }
+    );
+    const h = T(a);
+    h.current = a;
+    const b = G(
+      () => ({
+        getItems: () => h.current.map((t) => ({ id: t.id, unseen: !!t.unseen })),
+        getUnseenCount: () => h.current.filter((t) => t.unseen).length,
+        selectItem: (t) => {
+          const S = h.current.find((U) => U.id === t);
+          S && (n == null || n(S));
+        }
+      }),
+      [n]
+    ), C = T(null);
+    return X(M, () => C.current, []), J(ye, b, s), /* @__PURE__ */ r(
+      "section",
+      {
+        ref: C,
+        "aria-label": k,
+        "data-component": "product-hub-panel",
+        "data-component-id": s,
+        className: xe({ surface: l, className: N }),
+        ...g,
+        children: [
+          /* @__PURE__ */ r("header", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)] ds:p-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ r("h2", { className: "ds:m-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-start type-title-section ds:text-[color:var(--foreground)]", children: [
+              /* @__PURE__ */ e(O, { "aria-hidden": "true", className: "ds:size-5 ds:shrink-0" }),
+              k
+            ] }),
+            f ? /* @__PURE__ */ e("p", { className: "ds:m-0 ds:text-start type-body-sm ds:text-[color:var(--muted-foreground)]", children: f }) : null
+          ] }),
+          d,
+          z ? /* @__PURE__ */ r(V, { children: [
+            /* @__PURE__ */ e(_, {}),
+            /* @__PURE__ */ e("div", { className: "ds:flex ds:justify-center ds:p-[var(--spacing-sm)]", children: /* @__PURE__ */ e(A, { href: z, external: !0, children: p("productHubPanel.openHub", "Open in Product Hub") }) })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+we.displayName = "ProductHubPanel";
+export {
+  we as P,
+  be as a,
+  le as b,
+  ye as p
+};
+//# sourceMappingURL=product-hub-panel-CaZqttvm.js.map