@refraction-ui/react 0.22.0 → 0.23.1

package/dist/index.cjs

@@ -767,7 +767,7 @@ var init_dist = __esm({
   }
 });
 
-// ../logger/dist/chunk-57LG5ZUS.js
+// ../logger/dist/chunk-OEINJBSK.js
 async function createFaroSink(opts) {
   const transport = opts.transport ?? await loadFaroTransport(opts);
   if (!transport) return null;
@@ -788,10 +788,12 @@ async function loadFaroTransport(opts) {
     const sdkName = "@grafana/faro-web-sdk";
     const tracingName = "@grafana/faro-web-tracing";
     const sdk = await import(
+      /* webpackIgnore: true */
       /* @vite-ignore */
       sdkName
     );
     const tracing = await import(
+      /* webpackIgnore: true */
       /* @vite-ignore */
       tracingName
     );
@@ -833,8 +835,8 @@ function flatten(ctx) {
   return out;
 }
 var FARO_LEVEL;
-var init_chunk_57LG5ZUS = __esm({
-  "../logger/dist/chunk-57LG5ZUS.js"() {
+var init_chunk_OEINJBSK = __esm({
+  "../logger/dist/chunk-OEINJBSK.js"() {
     FARO_LEVEL = {
       debug: "debug",
       info: "info",
@@ -845,14 +847,14 @@ var init_chunk_57LG5ZUS = __esm({
   }
 });
 
-// ../logger/dist/faro-engine-47HGRAQH.js
-var faro_engine_47HGRAQH_exports = {};
-__export(faro_engine_47HGRAQH_exports, {
+// ../logger/dist/faro-engine-VIUXJAPH.js
+var faro_engine_VIUXJAPH_exports = {};
+__export(faro_engine_VIUXJAPH_exports, {
   createFaroSink: () => createFaroSink
 });
-var init_faro_engine_47HGRAQH = __esm({
-  "../logger/dist/faro-engine-47HGRAQH.js"() {
-    init_chunk_57LG5ZUS();
+var init_faro_engine_VIUXJAPH = __esm({
+  "../logger/dist/faro-engine-VIUXJAPH.js"() {
+    init_chunk_OEINJBSK();
   }
 });
 
@@ -2419,7 +2421,9 @@ var Button = React52__namespace.forwardRef(
       return React52__namespace.cloneElement(children, {
         ref: mergedRef,
         className: cn(classes, children.props.className, "relative"),
-        type: getButtonType({ type: props.type }),
+        // `type` is only meaningful on a <button>; forcing type="button" onto
+        // an <a> changes its semantics (it becomes a MIME-type hint).
+        ...children.type === "button" || props.type ? { type: getButtonType({ type: props.type }) } : {},
         ...api.ariaProps,
         ...api.dataAttributes,
         ...props,
@@ -4307,26 +4311,49 @@ function useCommandContext() {
   }
   return ctx;
 }
+function itemValueOf(value, children) {
+  if (value !== void 0) return value;
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  return "";
+}
+function collectItems(node, into) {
+  React52__namespace.Children.forEach(node, (child) => {
+    if (!React52__namespace.isValidElement(child)) return;
+    if (child.type === CommandItem) {
+      const value = itemValueOf(child.props.value, child.props.children);
+      into.push({ id: value, value, label: value, disabled: child.props.disabled });
+      return;
+    }
+    collectItems(child.props.children, into);
+  });
+  return into;
+}
+var defaultFilter3 = (value, search) => value.toLowerCase().includes(search.toLowerCase());
 function Command({
   open,
   onOpenChange,
-  filter,
+  filter = defaultFilter3,
   className,
   children
 }) {
-  const [items, setItems] = React52__namespace.useState([]);
+  const [registered, setRegistered] = React52__namespace.useState(() => /* @__PURE__ */ new Map());
   const [search, setSearch] = React52__namespace.useState("");
   const [selectedIndex, setSelectedIndex] = React52__namespace.useState(0);
-  const apiRef = React52__namespace.useRef(null);
-  const api = React52__namespace.useMemo(() => {
-    const instance = createCommand({ open, onOpenChange, filter }, items);
-    if (search) {
-      instance.search(search);
-    }
-    apiRef.current = instance;
-    return instance;
-  }, [open, onOpenChange, filter, items, search]);
-  const filteredItems = api.state.filteredItems;
+  const uid = React52__namespace.useId().replace(/:/g, "");
+  const listId = `rfr-cmd-list-${uid}`;
+  const inputId = `rfr-cmd-input-${uid}`;
+  const api = React52__namespace.useMemo(() => createCommand({ open, onOpenChange, filter }), [open, onOpenChange, filter]);
+  const items = React52__namespace.useMemo(() => {
+    const all = collectItems(children, []);
+    const known = new Set(all.map((i) => i.value));
+    for (const [value, item] of registered) {
+      if (!known.has(value)) all.push({ id: value, value, label: value, disabled: item.disabled });
+    }
+    return all;
+  }, [children, registered]);
+  const matches = React52__namespace.useCallback((value) => !search || filter(value, search), [filter, search]);
+  const filteredItems = React52__namespace.useMemo(() => items.filter((i) => matches(i.value)), [items, matches]);
+  const highlighted = filteredItems[selectedIndex];
   const handleSearch = React52__namespace.useCallback((query) => {
     setSearch(query);
     setSelectedIndex(0);
@@ -4334,57 +4361,59 @@ function Command({
   const handleSelect = React52__namespace.useCallback((index2) => {
     setSelectedIndex(index2);
   }, []);
-  const registerItem = React52__namespace.useCallback((item) => {
-    setItems((prev) => {
-      if (prev.some((i) => i.id === item.id)) return prev;
-      return [...prev, item];
+  const registerItem = React52__namespace.useCallback((value, item) => {
+    setRegistered((prev) => {
+      const current = prev.get(value);
+      if (current && current.domId === item.domId && current.disabled === item.disabled) return prev;
+      const next = new Map(prev);
+      next.set(value, item);
+      return next;
     });
   }, []);
-  const unregisterItem = React52__namespace.useCallback((id) => {
-    setItems((prev) => prev.filter((i) => i.id !== id));
+  const unregisterItem = React52__namespace.useCallback((value) => {
+    setRegistered((prev) => {
+      if (!prev.has(value)) return prev;
+      const next = new Map(prev);
+      next.delete(value);
+      return next;
+    });
   }, []);
-  const handleKeyDown = React52__namespace.useCallback(
-    (e) => {
-      const handler = createKeyboardHandler({
-        [Keys.ArrowDown]: (ev) => {
-          ev.preventDefault();
-          if (filteredItems.length > 0) {
-            setSelectedIndex((prev) => (prev + 1) % filteredItems.length);
-          }
-        },
-        [Keys.ArrowUp]: (ev) => {
-          ev.preventDefault();
-          if (filteredItems.length > 0) {
-            setSelectedIndex((prev) => (prev - 1 + filteredItems.length) % filteredItems.length);
-          }
-        },
-        [Keys.Enter]: (ev) => {
-          ev.preventDefault();
-        },
-        [Keys.Escape]: (ev) => {
-          ev.preventDefault();
-          onOpenChange?.(false);
-        }
-      });
-      handler(e.nativeEvent);
-    },
-    [filteredItems.length, onOpenChange]
-  );
-  const ctx = React52__namespace.useMemo(
-    () => ({
-      search,
-      onSearch: handleSearch,
-      selectedIndex,
-      onSelect: handleSelect,
-      items,
-      filteredItems,
-      registerItem,
-      unregisterItem,
-      listId: api.ids.list,
-      inputId: api.ids.input
-    }),
-    [search, handleSearch, selectedIndex, handleSelect, items, filteredItems, registerItem, unregisterItem, api.ids.list, api.ids.input]
-  );
+  const handleKeyDown = (e) => {
+    const count = filteredItems.length;
+    const handler = createKeyboardHandler({
+      [Keys.ArrowDown]: (ev) => {
+        ev.preventDefault();
+        if (count > 0) setSelectedIndex((prev) => (prev + 1) % count);
+      },
+      [Keys.ArrowUp]: (ev) => {
+        ev.preventDefault();
+        if (count > 0) setSelectedIndex((prev) => (prev - 1 + count) % count);
+      },
+      [Keys.Enter]: (ev) => {
+        ev.preventDefault();
+        if (highlighted && !highlighted.disabled) registered.get(highlighted.value)?.select();
+      },
+      [Keys.Escape]: (ev) => {
+        ev.preventDefault();
+        onOpenChange?.(false);
+      }
+    });
+    handler(e.nativeEvent);
+  };
+  const ctx = {
+    search,
+    onSearch: handleSearch,
+    selectedIndex,
+    onSelect: handleSelect,
+    items,
+    filteredItems,
+    matches,
+    registerItem,
+    unregisterItem,
+    activeDescendant: highlighted ? registered.get(highlighted.value)?.domId : void 0,
+    listId,
+    inputId
+  };
   return React52__namespace.createElement(
     CommandContext.Provider,
     { value: ctx },
@@ -4393,6 +4422,8 @@ function Command({
       {
         className: cn(commandVariants(), className),
         ...api.ariaProps,
+        "aria-owns": listId,
+        id: `rfr-cmd-${uid}`,
         onKeyDown: handleKeyDown
       },
       children
@@ -4401,7 +4432,7 @@ function Command({
 }
 var CommandInput = React52__namespace.forwardRef(
   function CommandInput2({ className, onChange, ...props }, ref) {
-    const { search, onSearch, inputId, listId } = useCommandContext();
+    const { search, onSearch, inputId, listId, activeDescendant } = useCommandContext();
     const handleChange = (e) => {
       onSearch(e.target.value);
       onChange?.(e);
@@ -4413,6 +4444,7 @@ var CommandInput = React52__namespace.forwardRef(
       role: "searchbox",
       "aria-autocomplete": "list",
       "aria-controls": listId,
+      "aria-activedescendant": activeDescendant,
       value: search,
       onChange: handleChange,
       className: cn(commandInputVariants(), className),
@@ -4474,21 +4506,38 @@ var CommandGroup = React52__namespace.forwardRef(
   }
 );
 var CommandItem = React52__namespace.forwardRef(
-  function CommandItem2({ className, value, disabled, onSelect: onItemSelect, children, ...props }, ref) {
-    const state = disabled ? "disabled" : "default";
+  function CommandItem2({ className, value, disabled = false, onSelect: onItemSelect, onClick, onMouseMove, children, ...props }, ref) {
+    const { matches, filteredItems, selectedIndex, onSelect, registerItem, unregisterItem } = useCommandContext();
+    const itemValue = itemValueOf(value, children);
+    const domId = `rfr-cmd-item-${React52__namespace.useId().replace(/:/g, "")}`;
+    const onSelectRef = React52__namespace.useRef(onItemSelect);
+    onSelectRef.current = onItemSelect;
+    React52__namespace.useEffect(() => {
+      registerItem(itemValue, { domId, disabled, select: () => onSelectRef.current?.() });
+    }, [registerItem, itemValue, domId, disabled]);
+    React52__namespace.useEffect(() => () => unregisterItem(itemValue), [unregisterItem, itemValue]);
+    if (!matches(itemValue)) return null;
+    const index2 = filteredItems.findIndex((i) => i.value === itemValue);
+    const isSelected = index2 !== -1 && index2 === selectedIndex;
+    const state = disabled ? "disabled" : isSelected ? "selected" : "default";
     return React52__namespace.createElement(
       "div",
       {
         ref,
+        id: domId,
         role: "option",
-        "aria-selected": false,
-        "aria-disabled": disabled ?? false,
-        "data-value": value,
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        "data-value": itemValue,
+        "data-selected": isSelected ? "" : void 0,
         className: cn(commandItemVariants({ state }), className),
-        onClick: () => {
-          if (!disabled) {
-            onItemSelect?.();
-          }
+        onClick: (e) => {
+          onClick?.(e);
+          if (!disabled && !e.defaultPrevented) onItemSelect?.();
+        },
+        onMouseMove: (e) => {
+          onMouseMove?.(e);
+          if (index2 !== -1 && index2 !== selectedIndex) onSelect(index2);
         },
         ...props
       },
@@ -10205,11 +10254,11 @@ function MessageBody({ message }) {
     message.status === "error" ? h2("div", { className: "mt-1 text-xs text-destructive", role: "alert" }, message.error ?? "Failed to send.") : null
   );
 }
-function Reactions({ message, onReact, align }) {
+function Reactions({ message, onReact, align: align2 }) {
   if (!message.reactions || message.reactions.length === 0) return null;
   return h2(
     "div",
-    { className: cn("mt-1 flex flex-wrap gap-1", align === "end" && "justify-end") },
+    { className: cn("mt-1 flex flex-wrap gap-1", align2 === "end" && "justify-end") },
     ...message.reactions.map(
       (r) => h2(
         "button",
@@ -10246,7 +10295,7 @@ function HoverActions({
   isOwn,
   onEdit,
   onToggleEmojis,
-  align
+  align: align2
 }) {
   const { replyTo, deleteMessage } = conversation;
   return h2(
@@ -10254,7 +10303,7 @@ function HoverActions({
     {
       className: cn(
         "mt-1 flex items-center gap-3 text-xs text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
-        align === "end" && "justify-end"
+        align2 === "end" && "justify-end"
       )
     },
     // Reply targets this specific message but groups under the originating root.
@@ -10264,10 +10313,10 @@ function HoverActions({
     isOwn ? h2("button", { type: "button", className: "hover:text-destructive", onClick: () => deleteMessage(message.id) }, "Delete") : null
   );
 }
-function EmojiRow({ onPick, align }) {
+function EmojiRow({ onPick, align: align2 }) {
   return h2(
     "div",
-    { className: cn("mt-1 flex gap-1", align === "end" && "justify-end") },
+    { className: cn("mt-1 flex gap-1", align2 === "end" && "justify-end") },
     ...QUICK_EMOJIS.map(
       (emoji) => h2("button", { key: emoji, type: "button", className: "rounded px-1 text-base hover:bg-accent", onClick: () => onPick(emoji) }, emoji)
     )
@@ -10316,25 +10365,25 @@ function MessageRow({
   const [editing, setEditing] = React52__namespace.useState(false);
   const isUser = currentUserId ? message.author.id === currentUserId : message.role === "user";
   const replyCount = getReplyCount(state.messages, message.id);
-  const align = isUser ? "end" : "start";
+  const align2 = isUser ? "end" : "start";
   const inner = h2(
     React52__namespace.Fragment,
     null,
     quotedParent ? h2(QuotedParent, { parent: quotedParent, onClick: () => openThread(rootIdOf(state.messages, quotedParent.id)) }) : null,
     editing ? h2(EditField, { message, conversation, onDone: () => setEditing(false) }) : isUser ? h2("div", { className: "inline-block rounded-2xl rounded-br-sm bg-primary/10 px-3 py-2 text-left" }, h2(MessageBody, { message })) : h2(MessageBody, { message }),
-    h2(Reactions, { message, onReact: (e) => react(message.id, e), align }),
+    h2(Reactions, { message, onReact: (e) => react(message.id, e), align: align2 }),
     showThreadAffordance && replyCount > 0 ? h2(
       "button",
-      { type: "button", className: cn("mt-1 text-xs font-medium text-primary hover:underline", align === "end" && "self-end"), onClick: () => openThread(message.id) },
+      { type: "button", className: cn("mt-1 text-xs font-medium text-primary hover:underline", align2 === "end" && "self-end"), onClick: () => openThread(message.id) },
       `\u{1F4AC} ${replyCount} ${replyCount === 1 ? "reply" : "replies"}`
     ) : null,
-    h2(HoverActions, { message, conversation, isOwn: isUser, onEdit: () => setEditing(true), onToggleEmojis: () => setShowEmojis((v2) => !v2), align }),
+    h2(HoverActions, { message, conversation, isOwn: isUser, onEdit: () => setEditing(true), onToggleEmojis: () => setShowEmojis((v2) => !v2), align: align2 }),
     showEmojis ? h2(EmojiRow, {
       onPick: (e) => {
         react(message.id, e);
         setShowEmojis(false);
       },
-      align
+      align: align2
     }) : null
   );
   if (!isUser) {
@@ -10927,6 +10976,15 @@ var CookieConsent = React52__namespace.forwardRef(
 );
 
 // ../data-table/dist/index.js
+function resolveColumnAlign(col) {
+  return col.align ?? (col.numeric ? "end" : "start");
+}
+function getColumnValue(col, row) {
+  return col.accessor ? col.accessor(row) : void 0;
+}
+function resolveRowKey(row, index2, getRowKey) {
+  return getRowKey ? getRowKey(row, index2) : index2;
+}
 function createDataTable(props) {
   const {
     columns,
@@ -10944,10 +11002,10 @@ function createDataTable(props) {
     for (const [columnId, filterValue] of Object.entries(filters)) {
       if (!filterValue) continue;
       const col = columns.find((c) => c.id === columnId);
-      if (!col) continue;
+      if (!col?.accessor) continue;
       const lowerFilter = filterValue.toLowerCase();
       result = result.filter((row) => {
-        const cellValue = col.accessor(row);
+        const cellValue = getColumnValue(col, row);
         return String(cellValue ?? "").toLowerCase().includes(lowerFilter);
       });
     }
@@ -10957,10 +11015,10 @@ function createDataTable(props) {
     const filtered = getFilteredData();
     if (!sortBy) return filtered;
     const col = columns.find((c) => c.id === sortBy);
-    if (!col) return filtered;
+    if (!col?.accessor) return filtered;
     return [...filtered].sort((a, b) => {
-      const aVal = col.accessor(a);
-      const bVal = col.accessor(b);
+      const aVal = getColumnValue(col, a);
+      const bVal = getColumnValue(col, b);
       const aStr = String(aVal ?? "");
       const bStr = String(bVal ?? "");
       const cmp = aStr.localeCompare(bStr, void 0, { numeric: true });
@@ -11080,8 +11138,18 @@ var rowVariants = cva({
     selected: "false"
   }
 });
-
-// ../react-data-table/dist/index.js
+var dataTableAlignClass = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+var dataTableNumericClass = "tabular-nums whitespace-nowrap";
+var dataTableSortButtonClass = "inline-flex items-center gap-1 rounded-sm font-inherit text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var dataTableActionRowClass = "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+var ACTIVATION_KEYS = /* @__PURE__ */ new Set(["Enter", " "]);
+function filterLabel(header, id) {
+  return typeof header === "string" || typeof header === "number" ? String(header) : id;
+}
 function DataTable({
   columns,
   data,
@@ -11090,13 +11158,21 @@ function DataTable({
   onSort,
   filters: controlledFilters,
   className,
-  emptyMessage = "No data available"
+  emptyMessage = "No data available",
+  getRowKey,
+  getRowProps,
+  onRowClick,
+  caption,
+  wrapperClassName,
+  ...tableProps
 }) {
   const [sortBy, setSortBy] = React52__namespace.useState(controlledSortBy ?? null);
   const [sortDir, setSortDir] = React52__namespace.useState(controlledSortDir);
   const [filters, setFilters] = React52__namespace.useState(controlledFilters ?? {});
   const api = React52__namespace.useMemo(
     () => createDataTable({
+      // The core only reads id/accessor/sortable/filterable; header and cell
+      // are rendered here.
       columns,
       data,
       sortBy: sortBy ?? void 0,
@@ -11106,119 +11182,100 @@ function DataTable({
     }),
     [columns, data, sortBy, sortDir, onSort, filters]
   );
-  const handleSort = React52__namespace.useCallback(
-    (columnId) => {
-      const col = columns.find((c) => c.id === columnId);
-      if (!col?.sortable) return;
-      let newDir = "asc";
-      if (sortBy === columnId) {
-        newDir = sortDir === "asc" ? "desc" : "asc";
-      }
-      setSortBy(columnId);
-      setSortDir(newDir);
-      onSort?.(columnId, newDir);
-    },
-    [columns, sortBy, sortDir, onSort]
-  );
-  const handleFilter = React52__namespace.useCallback(
-    (columnId, value) => {
-      setFilters((prev) => ({ ...prev, [columnId]: value }));
-    },
-    []
-  );
-  const sortedData = api.state.sortedData;
+  const handleSort = (columnId) => {
+    const col = columns.find((c) => c.id === columnId);
+    if (!col?.sortable) return;
+    const newDir = sortBy === columnId && sortDir === "asc" ? "desc" : "asc";
+    setSortBy(columnId);
+    setSortDir(newDir);
+    onSort?.(columnId, newDir);
+  };
+  const handleFilter = (columnId, value) => {
+    setFilters((prev) => ({ ...prev, [columnId]: value }));
+  };
+  const rows = api.state.sortedData;
   const hasFilterable = columns.some((c) => c.filterable);
-  return React52__namespace.createElement(
-    "div",
-    { className: "relative w-full overflow-auto" },
-    React52__namespace.createElement(
-      "table",
-      {
-        className: cn(tableVariants(), className),
-        role: "table"
+  const rowElementProps = (row, index2) => {
+    const extra = getRowProps?.(row, index2) ?? {};
+    if (!onRowClick) return extra;
+    return {
+      tabIndex: 0,
+      ...extra,
+      className: cn(dataTableActionRowClass, extra.className),
+      onClick: (e) => {
+        extra.onClick?.(e);
+        if (!e.defaultPrevented) onRowClick(row, index2);
       },
-      // thead
-      React52__namespace.createElement(
-        "thead",
-        null,
-        // Header row
-        React52__namespace.createElement(
-          "tr",
-          { role: "row" },
-          ...columns.map((col) => {
-            const headerProps = api.getHeaderProps(col);
-            return React52__namespace.createElement(
-              "th",
-              {
-                key: col.id,
-                ...headerProps,
-                className: headerVariants({ sortable: col.sortable ? "true" : "false" }),
-                onClick: col.sortable ? () => handleSort(col.id) : void 0
-              },
+      onKeyDown: (e) => {
+        extra.onKeyDown?.(e);
+        if (e.defaultPrevented || e.target !== e.currentTarget || !ACTIVATION_KEYS.has(e.key)) return;
+        e.preventDefault();
+        onRowClick(row, index2);
+      }
+    };
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: cn(tableVariants(), className), role: "table", ...tableProps, children: [
+    caption != null && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "mt-2 caption-bottom text-xs text-muted-foreground", children: caption }),
+    /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", children: columns.map((col) => {
+        const headerProps = api.getHeaderProps(col);
+        const align2 = resolveColumnAlign(col);
+        const indicator = col.sortable && sortBy === col.id ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: sortDir === "asc" ? "\u2191" : "\u2193" }) : null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            ...headerProps,
+            className: cn(
+              headerVariants({ sortable: col.sortable ? "true" : "false" }),
+              dataTableAlignClass[align2],
+              col.headerClassName
+            ),
+            children: col.sortable ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: dataTableSortButtonClass, onClick: () => handleSort(col.id), children: [
               col.header,
-              col.sortable && sortBy === col.id ? React52__namespace.createElement("span", { "aria-hidden": true }, sortDir === "asc" ? " \u2191" : " \u2193") : null
-            );
-          })
-        ),
-        // Filter row
-        hasFilterable ? React52__namespace.createElement(
-          "tr",
-          { role: "row", "data-filter-row": "true" },
-          ...columns.map(
-            (col) => React52__namespace.createElement(
-              "th",
-              { key: `filter-${col.id}` },
-              col.filterable ? React52__namespace.createElement("input", {
-                type: "text",
-                "aria-label": `Filter ${col.header}`,
-                value: filters[col.id] ?? "",
-                onChange: (e) => handleFilter(col.id, e.target.value),
-                placeholder: `Filter...`
-              }) : null
-            )
-          )
-        ) : null
-      ),
-      // tbody
-      React52__namespace.createElement(
-        "tbody",
-        null,
-        sortedData.length === 0 ? React52__namespace.createElement(
-          "tr",
-          { role: "row" },
-          React52__namespace.createElement(
+              indicator
+            ] }) : col.header
+          },
+          col.id
+        );
+      }) }),
+      hasFilterable && /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", "data-filter-row": "true", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { children: col.filterable ? /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          "aria-label": `Filter ${filterLabel(col.header, col.id)}`,
+          value: filters[col.id] ?? "",
+          onChange: (e) => handleFilter(col.id, e.target.value),
+          placeholder: "Filter..."
+        }
+      ) : null }, `filter-${col.id}`)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "text-center p-4 text-muted-foreground", role: "cell", children: emptyMessage }) }) : rows.map((row, rowIndex) => {
+      const rowProps = rowElementProps(row, rowIndex);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "tr",
+        {
+          ...api.getRowProps(row, rowIndex),
+          ...rowProps,
+          className: cn(rowVariants(), rowProps.className),
+          children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
-              colSpan: columns.length,
-              className: "text-center p-4 text-muted-foreground",
-              role: "cell"
-            },
-            emptyMessage
-          )
-        ) : sortedData.map(
-          (row, rowIndex) => React52__namespace.createElement(
-            "tr",
-            {
-              key: rowIndex,
-              ...api.getRowProps(row, rowIndex),
-              className: rowVariants()
+              ...api.getCellProps(col, row),
+              className: cn(
+                cellVariants(),
+                dataTableAlignClass[resolveColumnAlign(col)],
+                col.numeric && dataTableNumericClass,
+                col.className
+              ),
+              children: col.cell ? col.cell(row, rowIndex) : String(getColumnValue(col, row) ?? "")
             },
-            ...columns.map(
-              (col) => React52__namespace.createElement(
-                "td",
-                {
-                  key: col.id,
-                  ...api.getCellProps(col, row),
-                  className: cellVariants()
-                },
-                String(col.accessor(row) ?? "")
-              )
-            )
-          )
-        )
-      )
-    )
-  );
+            col.id
+          ))
+        },
+        resolveRowKey(row, rowIndex, getRowKey)
+      );
+    }) })
+  ] }) });
 }
 
 // ../device-frame/dist/index.js
@@ -11462,6 +11519,8 @@ function Dialog({
     apiRef.current = createDialog({ open, modal });
   }
   const api = apiRef.current;
+  const [hasTitle, setHasTitle] = React52__namespace.useState(false);
+  const [hasDescription, setHasDescription] = React52__namespace.useState(false);
   const ctx = React52__namespace.useMemo(
     () => ({
       open,
@@ -11469,9 +11528,13 @@ function Dialog({
       modal,
       contentId: api.ids.content,
       titleId: api.ids.title,
-      descriptionId: api.ids.description
+      descriptionId: api.ids.description,
+      hasTitle,
+      hasDescription,
+      setHasTitle,
+      setHasDescription
     }),
-    [open, handleOpenChange, modal, api.ids.content, api.ids.title, api.ids.description]
+    [open, handleOpenChange, modal, api.ids.content, api.ids.title, api.ids.description, hasTitle, hasDescription]
   );
   return React52__namespace.createElement(DialogContext.Provider, { value: ctx }, children);
 }
@@ -11516,9 +11579,17 @@ var DialogOverlay = React52__namespace.forwardRef(
     });
   }
 );
+function containsElement(node, type) {
+  let found = false;
+  React52__namespace.Children.forEach(node, (child) => {
+    if (found || !React52__namespace.isValidElement(child)) return;
+    found = child.type === type || containsElement(child.props.children, type);
+  });
+  return found;
+}
 var DialogContent = React52__namespace.forwardRef(
   function DialogContent2({ className, children, onKeyDown, ...props }, ref) {
-    const { open, onOpenChange, modal, contentId, titleId, descriptionId } = useDialogContext();
+    const { open, onOpenChange, modal, contentId, titleId, descriptionId, hasTitle, hasDescription } = useDialogContext();
     React52__namespace.useMemo(
       () => createDialog({ open, modal }),
       [open, modal]
@@ -11540,8 +11611,10 @@ var DialogContent = React52__namespace.forwardRef(
         ref,
         role: "dialog",
         "aria-modal": modal,
-        "aria-labelledby": titleId,
-        "aria-describedby": descriptionId,
+        // Reference only parts that exist: an id pointing at nothing leaves the
+        // dialog unnamed while looking labelled.
+        "aria-labelledby": hasTitle || containsElement(children, DialogTitle) ? titleId : void 0,
+        "aria-describedby": hasDescription || containsElement(children, DialogDescription) ? descriptionId : void 0,
         id: contentId,
         className: cn(dialogContentVariants(), className),
         onKeyDown: handleKeyDown,
@@ -11579,7 +11652,11 @@ var DialogFooter = React52__namespace.forwardRef(
 );
 var DialogTitle = React52__namespace.forwardRef(
   function DialogTitle2({ className, ...props }, ref) {
-    const { titleId } = useDialogContext();
+    const { titleId, setHasTitle } = useDialogContext();
+    React52__namespace.useEffect(() => {
+      setHasTitle(true);
+      return () => setHasTitle(false);
+    }, [setHasTitle]);
     return React52__namespace.createElement("h2", {
       ref,
       id: titleId,
@@ -11589,7 +11666,11 @@ var DialogTitle = React52__namespace.forwardRef(
   }
 );
 var DialogDescription = React52__namespace.forwardRef(function DialogDescription2({ className, ...props }, ref) {
-  const { descriptionId } = useDialogContext();
+  const { descriptionId, setHasDescription } = useDialogContext();
+  React52__namespace.useEffect(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
   return React52__namespace.createElement("p", {
     ref,
     id: descriptionId,
@@ -11743,11 +11824,13 @@ function DropdownMenu({
     apiRef.current = createDropdownMenu({ open });
   }
   const api = apiRef.current;
+  const triggerRef = React52__namespace.useRef(null);
   const ctx = React52__namespace.useMemo(
     () => ({
       open,
       onOpenChange: handleOpenChange,
-      contentId: api.ids.content
+      contentId: api.ids.content,
+      triggerRef
     }),
     [open, handleOpenChange, api.ids.content]
   );
@@ -11755,7 +11838,12 @@ function DropdownMenu({
 }
 var DropdownMenuTrigger = React52__namespace.forwardRef(
   function DropdownMenuTrigger2({ asChild = false, onClick, children, ...props }, ref) {
-    const { open, onOpenChange, contentId } = useDropdownMenuContext();
+    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext();
+    const setRefs = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
     const handleClick = (e) => {
       onOpenChange(!open);
       onClick?.(e);
@@ -11786,20 +11874,63 @@ var DropdownMenuTrigger = React52__namespace.forwardRef(
           if (!e.defaultPrevented) handleClick(e);
         },
         ref: (node) => {
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
+          setRefs(node);
           if (typeof childRef === "function") childRef(node);
           else if (childRef) childRef.current = node;
         }
       };
       return React52__namespace.cloneElement(child, mergedProps);
     }
-    return React52__namespace.createElement("button", { ref, ...triggerProps }, children);
+    return React52__namespace.createElement("button", { ref: setRefs, ...triggerProps }, children);
   }
 );
+var DEFAULT_SIDE_OFFSET = 4;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React52__namespace.useLayoutEffect : React52__namespace.useEffect;
+function computeMenuPosition(trigger, contentWidth, align2, sideOffset) {
+  const left = align2 === "end" ? trigger.right - contentWidth : align2 === "center" ? trigger.left + trigger.width / 2 - contentWidth / 2 : trigger.left;
+  return { position: "fixed", top: trigger.bottom + sideOffset, left: Math.max(0, left), minWidth: trigger.width };
+}
 var DropdownMenuContent = React52__namespace.forwardRef(
-  function DropdownMenuContent2({ className, children, onKeyDown, ...props }, ref) {
-    const { open, onOpenChange, contentId } = useDropdownMenuContext();
+  function DropdownMenuContent2({ className, children, onKeyDown, align: align2 = "start", sideOffset = DEFAULT_SIDE_OFFSET, style, ...props }, forwardedRef) {
+    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext();
+    const contentRef = React52__namespace.useRef(null);
+    const ref = React52__namespace.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    const [position, setPosition] = React52__namespace.useState(null);
+    useIsomorphicLayoutEffect(() => {
+      if (!open) return;
+      const update = () => {
+        const trigger = triggerRef.current;
+        const content2 = contentRef.current;
+        if (!trigger) return;
+        setPosition(
+          computeMenuPosition(trigger.getBoundingClientRect(), content2?.offsetWidth ?? 0, align2, sideOffset)
+        );
+      };
+      update();
+      window.addEventListener("resize", update);
+      window.addEventListener("scroll", update, true);
+      return () => {
+        window.removeEventListener("resize", update);
+        window.removeEventListener("scroll", update, true);
+      };
+    }, [open, align2, sideOffset, triggerRef]);
+    React52__namespace.useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (event) => {
+        const target = event.target;
+        if (contentRef.current?.contains(target) || triggerRef.current?.contains(target)) return;
+        onOpenChange(false);
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open, onOpenChange, triggerRef]);
     const handleKeyDown = (e) => {
       const handler = createKeyboardHandler({
         Escape: (ev) => {
@@ -11819,6 +11950,8 @@ var DropdownMenuContent = React52__namespace.forwardRef(
         id: contentId,
         "data-state": open ? "open" : "closed",
         className: cn(menuContentVariants(), className),
+        style: position ? { ...position, ...style } : style,
+        "data-align": align2,
         onKeyDown: handleKeyDown,
         tabIndex: -1,
         ...props
@@ -14652,14 +14785,31 @@ var Tabs = React52__namespace.forwardRef(
       apiRef.current = createTabs({ value, orientation });
     }
     const api = apiRef.current;
+    const [panels, setPanels] = React52__namespace.useState(() => /* @__PURE__ */ new Set());
+    const registerPanel = React52__namespace.useCallback((panelValue) => {
+      setPanels((prev) => prev.has(panelValue) ? prev : new Set(prev).add(panelValue));
+      return () => setPanels((prev) => {
+        if (!prev.has(panelValue)) return prev;
+        const next = new Set(prev);
+        next.delete(panelValue);
+        return next;
+      });
+    }, []);
+    const allPanels = React52__namespace.useMemo(() => {
+      const found = new Set(panels);
+      collectPanelValues(children, found);
+      return found;
+    }, [children, panels]);
     const ctx = React52__namespace.useMemo(
       () => ({
         value,
         onValueChange: handleValueChange,
         orientation,
-        idPrefix: api.idPrefix
+        idPrefix: api.idPrefix,
+        panels: allPanels,
+        registerPanel
       }),
-      [value, handleValueChange, orientation, api.idPrefix]
+      [value, handleValueChange, orientation, api.idPrefix, allPanels, registerPanel]
     );
     return React52__namespace.createElement(
       "div",
@@ -14668,6 +14818,16 @@ var Tabs = React52__namespace.forwardRef(
     );
   }
 );
+function collectPanelValues(node, into) {
+  React52__namespace.Children.forEach(node, (child) => {
+    if (!React52__namespace.isValidElement(child)) return;
+    if (child.type === TabsContent && typeof child.props.value === "string") {
+      into.add(child.props.value);
+      return;
+    }
+    collectPanelValues(child.props.children, into);
+  });
+}
 var TabsList = React52__namespace.forwardRef(
   function TabsList2({ className, onKeyDown, ...props }, forwardedRef) {
     const { orientation } = useTabsContext();
@@ -14713,7 +14873,7 @@ function enabledTabs(list) {
 }
 var TabsTrigger = React52__namespace.forwardRef(
   function TabsTrigger2({ value, className, onClick, onKeyDown, children, ...props }, ref) {
-    const { value: activeValue, onValueChange, orientation, idPrefix } = useTabsContext();
+    const { value: activeValue, onValueChange, idPrefix, panels } = useTabsContext();
     const isSelected = activeValue === value;
     const tabId = `${idPrefix}-tab-${value}`;
     const panelId = `${idPrefix}-panel-${value}`;
@@ -14731,7 +14891,8 @@ var TabsTrigger = React52__namespace.forwardRef(
         type: "button",
         role: "tab",
         "aria-selected": isSelected,
-        "aria-controls": panelId,
+        // Only the selected panel is rendered; never reference a missing element.
+        "aria-controls": isSelected && panels.has(value) ? panelId : void 0,
         tabIndex: isSelected ? 0 : -1,
         id: tabId,
         "data-state": isSelected ? "active" : "inactive",
@@ -14746,7 +14907,8 @@ var TabsTrigger = React52__namespace.forwardRef(
 );
 var TabsContent = React52__namespace.forwardRef(
   function TabsContent2({ value, className, children, ...props }, ref) {
-    const { value: activeValue, idPrefix } = useTabsContext();
+    const { value: activeValue, idPrefix, registerPanel } = useTabsContext();
+    React52__namespace.useEffect(() => registerPanel(value), [registerPanel, value]);
     const isSelected = activeValue === value;
     const tabId = `${idPrefix}-tab-${value}`;
     const panelId = `${idPrefix}-panel-${value}`;
@@ -18568,10 +18730,9 @@ function getInitials(name) {
 }
 function createAvatar(props = {}) {
   const { src, alt = "", fallback = "", size = "md" } = props;
-  const ariaProps = {
-    role: "img"
-  };
+  const ariaProps = {};
   if (alt) {
+    ariaProps.role = "img";
     ariaProps["aria-label"] = alt;
   }
   const fallbackText = fallback ? getInitials(fallback) : alt ? getInitials(alt) : "";
@@ -18601,8 +18762,12 @@ var avatarTokens = {
   }
 };
 var avatarVariants = cva({
-  base: "relative flex shrink-0 overflow-hidden rounded-full",
+  base: "relative flex shrink-0 overflow-hidden",
   variants: {
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
+    },
     size: {
       xs: "h-6 w-6",
       sm: "h-8 w-8",
@@ -18612,6 +18777,7 @@ var avatarVariants = cva({
     }
   },
   defaultVariants: {
+    shape: "circle",
     size: "md"
   }
 });
@@ -18619,7 +18785,7 @@ var avatarImageVariants = cva({
   base: "aspect-square h-full w-full object-cover"
 });
 var avatarFallbackVariants = cva({
-  base: "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground",
+  base: "flex h-full w-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground",
   variants: {
     size: {
       xs: "text-xs",
@@ -18643,15 +18809,15 @@ var AvatarContext = React52__namespace.createContext({
   }
 });
 var Avatar2 = React52__namespace.forwardRef(
-  function Avatar22({ size = "md", className, children, ...props }, ref) {
+  function Avatar22({ size = "md", shape = "circle", className, children, ...props }, ref) {
     const [imageLoaded, setImageLoaded] = React52__namespace.useState(false);
     const [imageError, setImageError] = React52__namespace.useState(false);
-    const api = createAvatar({ size });
+    const api = createAvatar({ size, alt: props["aria-label"] });
     return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { size, imageLoaded, imageError, setImageLoaded, setImageError }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         ref,
-        className: cn(avatarVariants({ size }), className),
+        className: cn(avatarVariants({ size, shape }), className),
         ...api.ariaProps,
         ...api.dataAttributes,
         ...props,
@@ -22588,7 +22754,7 @@ React52__namespace.forwardRef(
 );
 
 // ../logger/dist/index.js
-init_chunk_57LG5ZUS();
+init_chunk_OEINJBSK();
 var LEVEL_ORDER = {
   debug: 10,
   info: 20,
@@ -22739,7 +22905,7 @@ function createTelemetry(config3) {
   addSinkInternal(createConsoleSink({ pretty: preset.pretty }));
   if (config3.endpoint) {
     const endpoint = config3.endpoint;
-    void Promise.resolve().then(() => (init_faro_engine_47HGRAQH(), faro_engine_47HGRAQH_exports)).then(({ createFaroSink: createFaroSink2 }) => createFaroSink2({ app: config3.app, endpoint })).then((faro) => {
+    void Promise.resolve().then(() => (init_faro_engine_VIUXJAPH(), faro_engine_VIUXJAPH_exports)).then(({ createFaroSink: createFaroSink2 }) => createFaroSink2({ app: config3.app, endpoint })).then((faro) => {
       if (faro) addSinkInternal(faro);
     }).catch(() => {
     });
@@ -24122,7 +24288,11 @@ function createClientSdkSink(opts) {
         });
         return instance;
       }
-      const mod = await import(appInsightsWebSpecifier);
+      const mod = await import(
+        /* webpackIgnore: true */
+        /* @vite-ignore */
+        appInsightsWebSpecifier
+      );
       const ai = new mod.ApplicationInsights({
         config: {
           connectionString: opts.connectionString,
@@ -24473,7 +24643,11 @@ function createPostHogHttpSink(options) {
 }
 var posthogJsSpecifier = "posthog-js";
 async function defaultLoad() {
-  const mod = await import(posthogJsSpecifier);
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    posthogJsSpecifier
+  );
   return "default" in mod ? mod.default : mod;
 }
 function createPostHogClientSdkSink(options) {
@@ -24565,7 +24739,11 @@ function createPostHogSink(options) {
 // ../analytics-sink-posthog/dist/replay.js
 var posthogJsSpecifier2 = "posthog-js";
 async function defaultLoad2() {
-  const mod = await import(posthogJsSpecifier2);
+  const mod = await import(
+    /* webpackIgnore: true */
+    /* @vite-ignore */
+    posthogJsSpecifier2
+  );
   return "default" in mod ? mod.default : mod;
 }
 async function startSessionReplay(options) {
@@ -28651,9 +28829,9 @@ var MiniMap = React52__namespace.forwardRef(
 
 // ../section-head/dist/index.js
 function createSectionHead(props = {}) {
-  const { align = "center" } = props;
+  const { align: align2 = "center" } = props;
   const dataAttributes = {
-    "data-align": align
+    "data-align": align2
   };
   return { dataAttributes };
 }
@@ -28677,17 +28855,17 @@ var SectionHead = React52__namespace.forwardRef(
     kicker,
     title,
     lede,
-    align = "center",
+    align: align2 = "center",
     as: Tag = "h2",
     className,
     ...props
   }, ref) {
-    const { dataAttributes } = createSectionHead({ align });
+    const { dataAttributes } = createSectionHead({ align: align2 });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        className: cn(sectionHeadVariants({ align }), className),
+        className: cn(sectionHeadVariants({ align: align2 }), className),
         ...dataAttributes,
         ...props,
         children: [
@@ -28702,10 +28880,13 @@ var SectionHead = React52__namespace.forwardRef(
 
 // ../stat-grid/dist/index.js
 function statColumns(count, max = 3) {
-  if (count <= 0) return 1;
-  if (count === 1) return 1;
+  if (count <= 1) return 1;
   if (count === 2) return 2;
-  return Math.min(count, max);
+  return Math.min(count, max, 4);
+}
+function statColumnsKey(columns) {
+  if (columns === "auto") return "auto";
+  return String(Math.min(Math.max(Math.round(columns), 1), 4));
 }
 function createStatGrid() {
   return {
@@ -28714,41 +28895,107 @@ function createStatGrid() {
   };
 }
 var statGridVariants = cva({
-  base: "grid gap-8",
+  base: "grid",
   variants: {
     columns: {
       "1": "grid-cols-1",
-      "2": "grid-cols-2",
-      "3": "grid-cols-3"
+      "2": "grid-cols-1 sm:grid-cols-2",
+      "3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      "4": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+      auto: "grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]"
+    },
+    variant: {
+      plain: "gap-8",
+      card: "gap-3"
     }
   },
   defaultVariants: {
-    columns: "3"
+    columns: "3",
+    variant: "plain"
+  }
+});
+var statItemVariants = cva({
+  base: "flex min-w-0 flex-col",
+  variants: {
+    variant: {
+      plain: "",
+      card: "gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "plain"
+  }
+});
+var statValueVariants = cva({
+  base: "font-bold tabular-nums",
+  variants: {
+    variant: {
+      plain: "text-xl sm:text-2xl",
+      card: "text-2xl leading-tight"
+    },
+    tone: {
+      default: "",
+      positive: "text-success",
+      negative: "text-destructive",
+      caution: "text-warning"
+    }
+  },
+  compoundVariants: [
+    { variant: "plain", tone: "default", class: "text-primary" },
+    { variant: "card", tone: "default", class: "text-foreground" }
+  ],
+  defaultVariants: {
+    variant: "plain",
+    tone: "default"
   }
 });
-var statItemClass = "flex flex-col";
-var statValueClass = "text-xl sm:text-2xl font-bold text-primary";
-var statLabelClass = "mt-1 text-sm text-muted-foreground leading-snug";
+var statLabelVariants = cva({
+  base: "text-muted-foreground",
+  variants: {
+    layout: {
+      "value-first": "mt-1 text-sm leading-snug",
+      "label-first": "text-xs uppercase tracking-wide"
+    }
+  },
+  defaultVariants: {
+    layout: "value-first"
+  }
+});
+var statDescriptionClass = "text-xs leading-snug text-muted-foreground";
 var StatGrid = React52__namespace.forwardRef(
-  function StatGrid2({ items, columns, className, ...props }, ref) {
-    const cols = columns ?? statColumns(items.length);
+  function StatGrid2({ items, columns, variant = "plain", layout = "value-first", className, ...props }, ref) {
+    const cols = statColumnsKey(columns ?? statColumns(items.length));
     const { ariaProps, dataAttributes } = createStatGrid();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: cn(
-          statGridVariants({ columns: String(cols) }),
-          className
-        ),
-        style: { gridTemplateColumns: `repeat(${cols}, 1fr)` },
+        className: cn(statGridVariants({ columns: cols, variant }), className),
+        "data-variant": variant,
+        "data-layout": layout,
         ...ariaProps,
         ...dataAttributes,
         ...props,
-        children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listitem", className: statItemClass, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: statValueClass, children: item.value }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: statLabelClass, children: item.label })
-        ] }, index2))
+        children: items.map((item, index2) => {
+          const { className: itemClassName, ...itemProps } = item.props ?? {};
+          const label = /* @__PURE__ */ jsxRuntime.jsx("span", { className: statLabelVariants({ layout }), children: item.label });
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "listitem",
+              className: cn(statItemVariants({ variant }), itemClassName),
+              "data-tone": item.tone ?? "default",
+              ...itemProps,
+              children: [
+                layout === "label-first" && label,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: statValueVariants({ variant, tone: item.tone ?? "default" }), children: item.value }),
+                layout === "value-first" && label,
+                item.description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: statDescriptionClass, children: item.description })
+              ]
+            },
+            item.id ?? index2
+          );
+        })
       }
     );
   }
@@ -29962,11 +30209,24 @@ var DEFAULT_LINE_CHART_WIDTH = 760;
 var DEFAULT_LINE_CHART_HEIGHT = 230;
 var DEFAULT_TICK_COUNT = 4;
 var DEFAULT_HEADROOM = 1.08;
-var DEFAULT_LABEL_EVERY = 2;
+var MIN_LABEL_SPACING = 48;
 var CHART_TOKEN_COUNT = 5;
 function lineChartColor(index2) {
   return `hsl(var(--chart-${index2 % CHART_TOKEN_COUNT + 1}))`;
 }
+var NICE_STEPS = [1, 2, 5, 10];
+function niceScale(rawMax, tickCount) {
+  const intervals = Math.max(1, Math.floor(tickCount));
+  if (!(rawMax > 0)) return { max: 1, step: 1 / intervals, ticks: Array.from({ length: intervals + 1 }, (_2, i) => i / intervals) };
+  const target = rawMax / intervals;
+  const magnitude = 10 ** Math.floor(Math.log10(target));
+  const step = NICE_STEPS.map((m) => m * magnitude).find((candidate) => candidate >= target) ?? 10 * magnitude;
+  const count = Math.ceil(rawMax / step - 1e-9);
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  const clean = (value) => Number(value.toFixed(decimals));
+  const ticks = Array.from({ length: count + 1 }, (_2, i) => clean(i * step));
+  return { max: ticks[ticks.length - 1], step: clean(step), ticks };
+}
 function pathFrom(points) {
   return points.map(([px, py], i) => (i ? "L" : "M") + px.toFixed(1) + " " + py.toFixed(1)).join(" ");
 }
@@ -29977,24 +30237,22 @@ function computeLineChart(options) {
     width,
     height,
     tickCount = DEFAULT_TICK_COUNT,
-    headroom = DEFAULT_HEADROOM,
-    labelEvery = DEFAULT_LABEL_EVERY
+    headroom = DEFAULT_HEADROOM
   } = options;
   const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding };
   const n = labels.length;
   const values = series.flatMap((s) => s.data);
   const peak = values.length ? Math.max(...values) : 0;
-  const max = peak > 0 ? peak * headroom : 1;
+  const scale = niceScale(peak > 0 ? peak * headroom : 0, tickCount);
+  const max = scale.max;
   const plotW = width - padding.left - padding.right;
   const plotTop = padding.top;
   const plotBottom = height - padding.bottom;
   const plotH = plotBottom - plotTop;
+  const labelEvery = options.labelEvery ?? Math.max(1, Math.ceil(n / Math.max(1, Math.floor(plotW / MIN_LABEL_SPACING))));
   const x = (index2) => padding.left + (n > 1 ? index2 / (n - 1) * plotW : plotW / 2);
   const y = (value) => plotTop + (1 - value / max) * plotH;
-  const ticks = Array.from({ length: tickCount + 1 }, (_2, t) => {
-    const value = max / tickCount * t;
-    return { value, y: y(value) };
-  });
+  const ticks = scale.ticks.map((value) => ({ value, y: y(value) }));
   const xLabels = labels.map((label, index2) => ({ index: index2, label, x: x(index2) })).filter(({ index: index2 }) => index2 % labelEvery === 0 || index2 === n - 1);
   const paths = series.map((s, si) => {
     const points = s.data.map((v2, i) => [x(i), y(v2)]);
@@ -30050,19 +30308,46 @@ var defaultFormat = (value) => String(Math.round(value));
 var MARKER_RADIUS = 3.5;
 var STROKE_WIDTH = 2.2;
 var TOOLTIP_TOP_PX = 8;
+var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React52__namespace.useLayoutEffect : React52__namespace.useEffect;
+function useMeasuredWidth(ref) {
+  const [measured, setMeasured] = React52__namespace.useState(null);
+  useIsomorphicLayoutEffect2(() => {
+    const node = ref.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const apply = (w) => {
+      const rounded = Math.round(w);
+      if (rounded > 0) setMeasured((prev) => prev === rounded ? prev : rounded);
+    };
+    apply(node.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => apply(entries[0]?.contentRect.width ?? 0));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return measured;
+}
 var LineChart = React52__namespace.forwardRef(function LineChart2({
   series,
   labels,
   ariaLabel,
   height = DEFAULT_LINE_CHART_HEIGHT,
-  width = DEFAULT_LINE_CHART_WIDTH,
+  width: fallbackWidth = DEFAULT_LINE_CHART_WIDTH,
   formatValue = defaultFormat,
   formatTick: formatTick2,
   area,
   showLegend = true,
   className,
   ...rest
-}, ref) {
+}, forwardedRef) {
+  const rootRef = React52__namespace.useRef(null);
+  const ref = React52__namespace.useCallback(
+    (node) => {
+      rootRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  const width = useMeasuredWidth(rootRef) ?? fallbackWidth;
   const [active, setActive] = React52__namespace.useState(null);
   const gradientBase = React52__namespace.useId().replace(/:/g, "");
   const geo = React52__namespace.useMemo(
@@ -30207,6 +30492,172 @@ var PageHeader = React52__namespace.forwardRef(function PageHeader2({ kicker, ti
   ] });
 });
 
+// ../table/dist/index.js
+function createTable(props = {}) {
+  return {
+    dataAttributes: {
+      "data-slot": "table",
+      "data-density": props.density ?? "default",
+      "data-head-tone": props.headTone ?? "default"
+    }
+  };
+}
+var tableContainerClass = "relative w-full overflow-x-auto";
+var tableRootVariants = cva({
+  base: "w-full caption-bottom border-collapse text-sm",
+  variants: {
+    fixed: {
+      true: "table-fixed",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    fixed: "false"
+  }
+});
+var tableCaptionClass = "mt-2 text-xs text-muted-foreground";
+var tableRowClass = "border-b border-border-subtle last:border-b-0";
+var align = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+var tableHeadVariants = cva({
+  base: "border-b border-border-subtle bg-surface-subtle align-middle",
+  variants: {
+    align,
+    tone: {
+      default: "text-xs font-medium text-muted-foreground",
+      eyebrow: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
+    },
+    density: {
+      compact: "h-8 px-2",
+      default: "h-9 px-3"
+    }
+  },
+  defaultVariants: {
+    align: "start",
+    tone: "default",
+    density: "default"
+  }
+});
+var tableCellVariants = cva({
+  base: "align-middle",
+  variants: {
+    align,
+    density: {
+      compact: "px-2 py-1.5",
+      default: "px-3 py-2.5"
+    },
+    numeric: {
+      true: "tabular-nums whitespace-nowrap",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    align: "start",
+    density: "default",
+    numeric: "false"
+  }
+});
+var TableContext = React52__namespace.createContext({ density: "default", headTone: "default" });
+var Table = React52__namespace.forwardRef(function Table2({ density = "default", headTone = "default", fixed = false, containerClassName, className, ...props }, ref) {
+  const ctx = React52__namespace.useMemo(() => ({ density, headTone }), [density, headTone]);
+  const { dataAttributes } = createTable({ density, headTone });
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(tableContainerClass, containerClassName), "data-slot": "table-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      ref,
+      className: cn(tableRootVariants({ fixed: fixed ? "true" : "false" }), className),
+      ...dataAttributes,
+      ...props
+    }
+  ) }) });
+});
+var TableHeader = React52__namespace.forwardRef(
+  function TableHeader2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, "data-slot": "table-header", ...props });
+  }
+);
+var TableBody = React52__namespace.forwardRef(
+  function TableBody2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, "data-slot": "table-body", ...props });
+  }
+);
+var TableRow = React52__namespace.forwardRef(
+  function TableRow2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn(tableRowClass, className), "data-slot": "table-row", ...props });
+  }
+);
+var TableHead = React52__namespace.forwardRef(function TableHead2({ align: align2, scope = "col", className, ...props }, ref) {
+  const { density, headTone } = React52__namespace.useContext(TableContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      scope,
+      className: cn(tableHeadVariants({ align: align2, density, tone: headTone }), className),
+      "data-slot": "table-head",
+      ...props
+    }
+  );
+});
+var TableCell = React52__namespace.forwardRef(function TableCell2({ align: align2, numeric = false, className, ...props }, ref) {
+  const { density } = React52__namespace.useContext(TableContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: cn(tableCellVariants({ align: align2, density, numeric: numeric ? "true" : "false" }), className),
+      "data-slot": "table-cell",
+      ...props
+    }
+  );
+});
+var TableCaption = React52__namespace.forwardRef(
+  function TableCaption2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: cn(tableCaptionClass, className), "data-slot": "table-caption", ...props });
+  }
+);
+
+// ../native-select/dist/index.js
+var nativeSelectChevronPath = "m6 9 6 6 6-6";
+var nativeSelectWrapperClass = "relative inline-flex min-w-0 items-center";
+var nativeSelectVariants = cva({
+  base: "w-full cursor-pointer appearance-none rounded-md border border-input bg-background text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      sm: "h-8 pl-2.5 pr-8 text-xs",
+      default: "h-9 pl-3 pr-9 text-sm",
+      lg: "h-10 pl-3 pr-10 text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var nativeSelectIconClass = "pointer-events-none absolute right-2.5 h-4 w-4 shrink-0 text-muted-foreground";
+var NativeSelect = React52__namespace.forwardRef(function NativeSelect2({ size = "default", className, containerClassName, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(nativeSelectWrapperClass, containerClassName), "data-slot": "native-select", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("select", { ref, className: cn(nativeSelectVariants({ size }), className), ...props, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: nativeSelectIconClass,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: nativeSelectChevronPath })
+      }
+    )
+  ] });
+});
+
 exports.AIProvider = AIProvider;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -30365,6 +30816,7 @@ exports.MobileNav = MobileNav;
 exports.MobileNavContent = MobileNavContent;
 exports.MobileNavLink = MobileNavLink;
 exports.MobileNavTrigger = MobileNavTrigger;
+exports.NativeSelect = NativeSelect;
 exports.Navbar = Navbar;
 exports.NumberedSteps = NumberedSteps;
 exports.OtpInput = OtpInput;
@@ -30451,7 +30903,14 @@ exports.Steps = Steps;
 exports.StickyNote = StickyNote;
 exports.Switch = Switch;
 exports.TTSProvider = TTSProvider;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
 exports.TableOfContents = TableOfContents;
+exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
@@ -30513,6 +30972,7 @@ exports.checkIconPath = checkIconPath;
 exports.checkboxTokens = checkboxTokens;
 exports.checkboxVariants = checkboxVariants;
 exports.clampVoicePillIntensity = clampVoicePillIntensity;
+exports.cn = cn;
 exports.codeEditorTokens = codeEditorTokens;
 exports.codeEditorVariants = codeEditorVariants;
 exports.collapsibleContentVariants = collapsibleContentVariants;
@@ -30537,6 +30997,7 @@ exports.composerPrimaryActionVariants = composerPrimaryActionVariants;
 exports.composerSurfaceVariants = composerSurfaceVariants;
 exports.composerTokenPillClass = composerTokenPillClass;
 exports.composerTrayClass = composerTrayClass;
+exports.computeMenuPosition = computeMenuPosition;
 exports.contentProtectionVariants = contentProtectionVariants;
 exports.controlsVariants = controlsVariants;
 exports.createAnalytics = createAnalytics;
@@ -30562,6 +31023,7 @@ exports.createTelemetry = createTelemetry;
 exports.createTwemojiRenderer = createTwemojiRenderer;
 exports.createVoicePill = createVoicePill;
 exports.createWaveform = createWaveform;
+exports.cva = cva;
 exports.dayVariants = dayVariants;
 exports.defaultStickerRenderer = defaultStickerRenderer;
 exports.deviceFrameVariants = deviceFrameVariants;