klun-ui 0.4.1 → 0.5.0

package/dist/{chunk-MBL2CDDG.js → chunk-WONPY7ZX.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-T225J6LV.js';
-import { createContext, forwardRef, useState, useRef, useEffect, Children, useCallback, useMemo, useLayoutEffect, Fragment as Fragment$1, createElement, useContext, isValidElement, cloneElement, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect, useMemo, Children, useCallback, useLayoutEffect, Fragment as Fragment$1, createElement, useContext, isValidElement, cloneElement, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, useDroppable, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
@@ -230,6 +230,8 @@ var enUS = {
   carousel: { previous: "Previous", next: "Next", goToSlide: "Go to slide {n}" },
   input: { clear: "Clear" },
   notification: { close: "Close" },
+  select: { placeholder: "Select" },
+  counterInput: { decrease: "Decrease", increase: "Increase" },
   form: {
     required: "This field is required",
     empty: "Cannot be empty",
@@ -260,7 +262,9 @@ var enUS = {
     previous: "Previous",
     next: "Next",
     pageRange: "{from}\u2013{to} of {total}",
-    perPage: "{size} / page"
+    perPage: "{size} / page",
+    selectRow: "Select row",
+    selectAll: "Select all rows"
   }
 };
 var zhCN = {
@@ -324,6 +328,8 @@ var zhCN = {
   carousel: { previous: "\u4E0A\u4E00\u9875", next: "\u4E0B\u4E00\u9875", goToSlide: "\u8DF3\u8F6C\u5230\u7B2C {n} \u5F20" },
   input: { clear: "\u6E05\u9664" },
   notification: { close: "\u5173\u95ED" },
+  select: { placeholder: "\u8BF7\u9009\u62E9" },
+  counterInput: { decrease: "\u51CF\u5C11", increase: "\u589E\u52A0" },
   form: {
     required: "\u6B64\u5B57\u6BB5\u4E3A\u5FC5\u586B\u9879",
     empty: "\u4E0D\u80FD\u4E3A\u7A7A",
@@ -354,7 +360,9 @@ var zhCN = {
     previous: "\u4E0A\u4E00\u9875",
     next: "\u4E0B\u4E00\u9875",
     pageRange: "{from}\u2013{to} \u5171 {total}",
-    perPage: "{size} / \u9875"
+    perPage: "{size} / \u9875",
+    selectRow: "\u9009\u62E9\u672C\u884C",
+    selectAll: "\u5168\u9009"
   }
 };
 var zhTW = {
@@ -418,6 +426,8 @@ var zhTW = {
   carousel: { previous: "\u4E0A\u4E00\u9801", next: "\u4E0B\u4E00\u9801", goToSlide: "\u8DF3\u81F3\u7B2C {n} \u5F35" },
   input: { clear: "\u6E05\u9664" },
   notification: { close: "\u95DC\u9589" },
+  select: { placeholder: "\u8ACB\u9078\u64C7" },
+  counterInput: { decrease: "\u6E1B\u5C11", increase: "\u589E\u52A0" },
   form: {
     required: "\u6B64\u6B04\u4F4D\u70BA\u5FC5\u586B",
     empty: "\u4E0D\u80FD\u70BA\u7A7A",
@@ -448,7 +458,9 @@ var zhTW = {
     previous: "\u4E0A\u4E00\u9801",
     next: "\u4E0B\u4E00\u9801",
     pageRange: "{from}\u2013{to} \u5171 {total}",
-    perPage: "{size} / \u9801"
+    perPage: "{size} / \u9801",
+    selectRow: "\u9078\u64C7\u672C\u884C",
+    selectAll: "\u5168\u9078"
   }
 };
 var jaJP = {
@@ -2231,6 +2243,275 @@ var CopyButton = forwardRef(
   }
 );
 CopyButton.displayName = "CopyButton";
+var Toggle = forwardRef(function Toggle2({
+  variant = "default",
+  size = "medium",
+  pressed,
+  defaultPressed = false,
+  onPressedChange,
+  className,
+  onClick,
+  disabled,
+  ...props
+}, ref) {
+  const [internal, setInternal] = useState(defaultPressed);
+  const controlled = pressed !== void 0;
+  const isPressed = controlled ? pressed : internal;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cx(
+        "klun-toggle",
+        `klun-toggle--${variant}`,
+        `klun-toggle--${size}`,
+        className
+      ),
+      "aria-pressed": isPressed,
+      disabled,
+      onClick: (event) => {
+        if (!controlled) setInternal(!isPressed);
+        onPressedChange?.(!isPressed);
+        onClick?.(event);
+      },
+      ...props
+    }
+  );
+});
+Toggle.displayName = "Toggle";
+function localTodayIso() {
+  const now = /* @__PURE__ */ new Date();
+  return [now.getFullYear(), now.getMonth() + 1, now.getDate()].map((part, i) => String(part).padStart(i === 0 ? 4 : 2, "0")).join("-");
+}
+function addDaysIso(iso, days) {
+  const [y, m, d] = iso.split("-").map(Number);
+  const dt = new Date(Date.UTC(y ?? 1970, (m ?? 1) - 1, (d ?? 1) + days));
+  return [dt.getUTCFullYear(), dt.getUTCMonth() + 1, dt.getUTCDate()].map((part, i) => String(part).padStart(i === 0 ? 4 : 2, "0")).join("-");
+}
+function weekStartIso(iso) {
+  const [y, m, d] = iso.split("-").map(Number);
+  const dt = new Date(Date.UTC(y ?? 1970, (m ?? 1) - 1, d ?? 1));
+  const mondayOffset = (dt.getUTCDay() + 6) % 7;
+  return addDaysIso(iso, -mondayOffset);
+}
+var WEEKDAY_ANCHOR = Date.UTC(2026, 0, 5);
+var LABELED_WEEKDAY_INDICES = /* @__PURE__ */ new Set([0, 2, 4]);
+function buildHeatmapGrid(data, options = {}) {
+  const { weeks = 26, today = localTodayIso(), locale = "en-US" } = options;
+  const lastWeekStart = weekStartIso(today);
+  const startDate = addDaysIso(lastWeekStart, -((weeks - 1) * 7));
+  const todayIndex = (weeks - 1) * 7 + (() => {
+    const [y, m, d] = today.split("-").map(Number);
+    const dt = new Date(Date.UTC(y ?? 1970, (m ?? 1) - 1, d ?? 1));
+    return (dt.getUTCDay() + 6) % 7;
+  })();
+  const all = [];
+  for (let i = 0; i <= todayIndex; i++) {
+    const date = addDaysIso(startDate, i);
+    all.push({
+      date,
+      dayOfWeek: i % 7,
+      week: Math.floor(i / 7),
+      value: data?.[date] ?? 0,
+      level: 0
+    });
+  }
+  const nonZero = all.filter((c) => c.value > 0).map((c) => c.value).sort((a, b) => a - b);
+  for (const cell of all) {
+    if (cell.value <= 0) continue;
+    if (nonZero.length <= 1) {
+      cell.level = 4;
+      continue;
+    }
+    const p = nonZero.indexOf(cell.value) / (nonZero.length - 1);
+    cell.level = p <= 0.25 ? 1 : p <= 0.5 ? 2 : p <= 0.75 ? 3 : 4;
+  }
+  const months = [];
+  let lastMonth = -1;
+  for (const c of all) {
+    const [y, m] = c.date.split("-").map(Number);
+    const dt = new Date(Date.UTC(y ?? 1970, (m ?? 1) - 1, 1));
+    const month = dt.getUTCMonth();
+    if (month !== lastMonth && c.dayOfWeek === 0) {
+      months.push({
+        label: dt.toLocaleString(locale, { month: "short", timeZone: "UTC" }),
+        week: c.week
+      });
+      lastMonth = month;
+    }
+  }
+  const weekdayFmt = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+  const weekdayLabels = Array.from(
+    { length: 7 },
+    (_, i) => weekdayFmt.format(new Date(WEEKDAY_ANCHOR + i * 864e5))
+  );
+  return { cells: all, months, weekdayLabels, windowDays: all.length };
+}
+function summarizeHeatmap(data, options = {}) {
+  const { cells } = buildHeatmapGrid(data, options);
+  let total = 0;
+  let busiest = null;
+  const sums = [0, 0, 0, 0, 0, 0, 0];
+  const counts = [0, 0, 0, 0, 0, 0, 0];
+  for (const c of cells) {
+    total += c.value;
+    sums[c.dayOfWeek] = (sums[c.dayOfWeek] ?? 0) + c.value;
+    counts[c.dayOfWeek] = (counts[c.dayOfWeek] ?? 0) + 1;
+    if (c.value > 0 && (!busiest || c.value > busiest.value)) {
+      busiest = { date: c.date, value: c.value };
+    }
+  }
+  if (total === 0) busiest = null;
+  return {
+    total,
+    busiest,
+    dailyAverage: cells.length > 0 ? total / cells.length : 0,
+    weekdayAverages: sums.map((s, i) => (counts[i] ?? 0) > 0 ? s / (counts[i] ?? 1) : 0)
+  };
+}
+var CELL_GAP = 3;
+var LABEL_WIDTH = 28;
+var HEADER_HEIGHT = 14;
+function levelFill(color, level) {
+  if (level === 0) return "var(--klun-bg-soft-200)";
+  const mix = ["25%", "50%", "75%", "100%"][level - 1] ?? "100%";
+  return `color-mix(in oklab, ${color} ${mix}, transparent)`;
+}
+var ActivityHeatmap = forwardRef(
+  function ActivityHeatmap2({
+    data,
+    weeks = 26,
+    today,
+    cellSize = 16,
+    color = "var(--klun-primary-base)",
+    formatValue = String,
+    locale = "en-US",
+    legendLabels = ["Less", "More"],
+    className,
+    style
+  }, ref) {
+    const { cells, months, weekdayLabels, windowDays } = useMemo(
+      () => buildHeatmapGrid(data, { weeks, today, locale }),
+      [data, weeks, today, locale]
+    );
+    const step = cellSize + CELL_GAP;
+    const svgWidth = LABEL_WIDTH + weeks * step;
+    const svgHeight = HEADER_HEIGHT + 7 * step;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-activity-heatmap", className), style, children: [
+      /* @__PURE__ */ jsx("div", { className: "klun-activity-heatmap__scroll", children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "klun-activity-heatmap__svg",
+          width: svgWidth,
+          height: svgHeight,
+          role: "img",
+          "aria-label": `Activity heatmap over ${windowDays} days`,
+          children: [
+            months.map((month) => /* @__PURE__ */ jsx(
+              "text",
+              {
+                className: "klun-activity-heatmap__label",
+                x: LABEL_WIDTH + month.week * step,
+                y: 10,
+                fontSize: 9,
+                children: month.label
+              },
+              `${month.label}-${month.week}`
+            )),
+            weekdayLabels.map(
+              (label, i) => LABELED_WEEKDAY_INDICES.has(i) ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: "klun-activity-heatmap__label",
+                  x: 0,
+                  y: HEADER_HEIGHT + i * step + cellSize - 1,
+                  fontSize: 9,
+                  children: label
+                },
+                i
+              ) : null
+            ),
+            cells.map((cell) => /* @__PURE__ */ jsx(
+              "rect",
+              {
+                className: "klun-activity-heatmap__cell",
+                x: LABEL_WIDTH + cell.week * step,
+                y: HEADER_HEIGHT + cell.dayOfWeek * step,
+                width: cellSize,
+                height: cellSize,
+                rx: 3,
+                fill: levelFill(color, cell.level),
+                "data-level": cell.level,
+                children: /* @__PURE__ */ jsxs("title", { children: [
+                  cell.date,
+                  ": ",
+                  cell.value > 0 ? formatValue(cell.value) : "No activity"
+                ] })
+              },
+              cell.date
+            ))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "klun-activity-heatmap__legend", children: [
+        /* @__PURE__ */ jsx("span", { children: legendLabels[0] }),
+        [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "klun-activity-heatmap__swatch",
+            style: { background: levelFill(color, level) }
+          },
+          level
+        )),
+        /* @__PURE__ */ jsx("span", { children: legendLabels[1] })
+      ] })
+    ] });
+  }
+);
+var EMOJI_PREFIX = "emoji:";
+function parseAvatarEmoji(value) {
+  if (!value?.startsWith(EMOJI_PREFIX)) return null;
+  const emoji = value.slice(EMOJI_PREFIX.length).trim();
+  return emoji || null;
+}
+function formatAvatarEmoji(emoji) {
+  return EMOJI_PREFIX + emoji.trim();
+}
+var KIND_ICON = {
+  agent: "ri-robot-2-line",
+  squad: "ri-group-line",
+  system: "ri-cpu-line"
+};
+var ActorAvatar = forwardRef(
+  function ActorAvatar2({ name, initials, src, emoji, kind = "member", size = "24", className, ...props }, ref) {
+    const [imgError, setImgError] = useState(false);
+    useEffect(() => {
+      setImgError(false);
+    }, [src]);
+    const resolvedEmoji = emoji ?? parseAvatarEmoji(src);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": name,
+        className: cx("klun-actor-avatar", `klun-actor-avatar--${size}`, className),
+        ...props,
+        children: resolvedEmoji ? /* @__PURE__ */ jsx("span", { className: "klun-actor-avatar__emoji", children: resolvedEmoji }) : src && !imgError ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "klun-actor-avatar__img",
+            src,
+            alt: "",
+            onError: () => setImgError(true)
+          }
+        ) : kind !== "member" ? /* @__PURE__ */ jsx("i", { className: cx("klun-actor-avatar__icon", KIND_ICON[kind]), "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { className: "klun-actor-avatar__initials", children: initials })
+      }
+    );
+  }
+);
+ActorAvatar.displayName = "ActorAvatar";
 var Avatar = forwardRef(function Avatar2({ size = "40", src, alt = "", initials, color = "gray", status, icon, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "span",
@@ -2900,7 +3181,7 @@ var Skeleton = forwardRef(function Skeleton2({ width = "100%", height = 16, circ
   );
 });
 Skeleton.displayName = "Skeleton";
-var KIND_ICON = {
+var KIND_ICON2 = {
   artifact: "ri-price-tag-3-line",
   pr: "ri-git-pull-request-line",
   commit: "ri-git-commit-line",
@@ -2955,7 +3236,7 @@ var CrossRefBadge = forwardRef(
       document.addEventListener("keydown", onKey);
       return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    const iconCls = KIND_ICON[kind];
+    const iconCls = KIND_ICON2[kind];
     const chipColor = color ?? KIND_COLOR[kind];
     const inner = /* @__PURE__ */ jsxs(Chip, { color: chipColor, className: "klun-xref__chip", children: [
       /* @__PURE__ */ jsx("i", { className: cx("klun-xref__icon", iconCls), "aria-hidden": true }),
@@ -3345,6 +3626,98 @@ var DiffViewer = forwardRef(function DiffViewer2({
   );
 });
 DiffViewer.displayName = "DiffViewer";
+var ItemGroup = forwardRef(
+  function ItemGroup2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "list",
+        className: cx("klun-item-group", className),
+        ...props
+      }
+    );
+  }
+);
+ItemGroup.displayName = "ItemGroup";
+var Item = forwardRef(function Item2({ variant = "default", size = "default", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      "data-size": size,
+      className: cx("klun-item", `klun-item--${variant}`, `klun-item--${size}`, className),
+      ...props
+    }
+  );
+});
+Item.displayName = "Item";
+var ItemSeparator = forwardRef(
+  function ItemSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: cx("klun-item-separator", className),
+        ...props
+      }
+    );
+  }
+);
+ItemSeparator.displayName = "ItemSeparator";
+var ItemMedia = forwardRef(
+  function ItemMedia2({ variant = "default", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-variant": variant,
+        className: cx("klun-item__media", className),
+        ...props
+      }
+    );
+  }
+);
+ItemMedia.displayName = "ItemMedia";
+var ItemContent = forwardRef(
+  function ItemContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-item__content", className), ...props });
+  }
+);
+ItemContent.displayName = "ItemContent";
+var ItemTitle = forwardRef(
+  function ItemTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-item__title", className), ...props });
+  }
+);
+ItemTitle.displayName = "ItemTitle";
+var ItemDescription = forwardRef(
+  function ItemDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-item__description", className), ...props });
+  }
+);
+ItemDescription.displayName = "ItemDescription";
+var ItemActions = forwardRef(
+  function ItemActions2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-item__actions", className), ...props });
+  }
+);
+ItemActions.displayName = "ItemActions";
+var ItemHeader = forwardRef(
+  function ItemHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-item__header", className), ...props });
+  }
+);
+ItemHeader.displayName = "ItemHeader";
+var ItemFooter = forwardRef(
+  function ItemFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-item__footer", className), ...props });
+  }
+);
+ItemFooter.displayName = "ItemFooter";
 function draggedCenterY(active, delta) {
   const translated = active.rect.current.translated;
   if (translated) return translated.top + translated.height / 2;
@@ -3529,72 +3902,6 @@ function KanbanCardView({
     }
   );
 }
-function VirtualTable({
-  rows = [],
-  columns = [],
-  rowHeight = 40,
-  height = 420,
-  getRowId,
-  onRowClick,
-  overscan = 8,
-  zebra = true,
-  empty,
-  className,
-  style,
-  ...props
-}) {
-  const [scrollTop, setScrollTop] = useState(0);
-  const total = rows.length;
-  const template = useMemo(
-    () => columns.map((c) => c.width ? `${c.width}px` : "minmax(0, 1fr)").join(" "),
-    [columns]
-  );
-  const bodyHeight = Math.max(0, height - 36);
-  const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
-  const end = Math.min(total, Math.ceil((scrollTop + bodyHeight) / rowHeight) + overscan);
-  const slice = rows.slice(start, end);
-  return /* @__PURE__ */ jsxs("div", { ref: void 0, className: cx("klun-vtable", className), style: { ...style, height }, ...props, children: [
-    /* @__PURE__ */ jsx("div", { className: "klun-vtable__head", style: { gridTemplateColumns: template }, children: columns.map((c) => /* @__PURE__ */ jsx("div", { className: cx("klun-vtable__th", c.align && `klun-vtable__th--${c.align}`), children: c.header }, c.key)) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "klun-vtable__body",
-        onScroll: (e) => setScrollTop(e.target.scrollTop),
-        style: { maxHeight: bodyHeight },
-        children: total === 0 ? /* @__PURE__ */ jsx("div", { className: "klun-vtable__empty", children: empty ?? "No rows" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { style: { height: start * rowHeight } }),
-          slice.map((row, i) => {
-            const index = start + i;
-            const id = getRowId?.(row, index) ?? index;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                role: onRowClick ? "button" : void 0,
-                tabIndex: onRowClick ? 0 : void 0,
-                onClick: () => onRowClick?.(row, index),
-                className: cx(
-                  "klun-vtable__row",
-                  zebra && index % 2 === 1 && "klun-vtable__row--zebra",
-                  onRowClick && "klun-vtable__row--clickable"
-                ),
-                style: { gridTemplateColumns: template, height: rowHeight },
-                children: columns.map((c) => /* @__PURE__ */ jsx("div", { className: cx("klun-vtable__td", c.align && `klun-vtable__td--${c.align}`), children: c.render ? c.render(row, index) : String(row[c.key] ?? "") }, c.key))
-              },
-              id
-            );
-          }),
-          /* @__PURE__ */ jsx("div", { style: { height: Math.max(0, (total - end) * rowHeight) } })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "klun-vtable__foot", children: [
-      total.toLocaleString("en-US"),
-      " rows \xB7 rendering ",
-      slice.length
-    ] })
-  ] });
-}
-VirtualTable.displayName = "VirtualTable";
 var Kbd = forwardRef(function Kbd2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx("kbd", { ref, className: cx("klun-kbd", className), ...props, children });
 });
@@ -3755,8 +4062,91 @@ var ListItem = forwardRef(
   }
 );
 ListItem.displayName = "ListItem";
+var ListGrid = forwardRef(function ListGrid2({ columns, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "table",
+      className: cx("klun-list-grid", className),
+      style: { gridTemplateColumns: columns, ...style },
+      ...props
+    }
+  );
+});
+ListGrid.displayName = "ListGrid";
+var ListGridHeader = forwardRef(
+  function ListGridHeader2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, role: "row", className: cx("klun-list-grid__header", className), ...props, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+      children,
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+    ] });
+  }
+);
+ListGridHeader.displayName = "ListGridHeader";
+var ListGridBody = forwardRef(
+  function ListGridBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, role: "rowgroup", className: cx("klun-list-grid__body", className), ...props });
+  }
+);
+ListGridBody.displayName = "ListGridBody";
+var ListGridHeaderCell = forwardRef(
+  function ListGridHeaderCell2({ sorted = false, onSort, align = "left", className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "columnheader",
+        "data-sorted": sorted ? "" : void 0,
+        "data-align": align === "right" ? "right" : void 0,
+        "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+        className: cx("klun-list-grid__header-cell", className),
+        ...props,
+        children: onSort ? /* @__PURE__ */ jsxs("button", { type: "button", className: "klun-list-grid__sort", onClick: onSort, children: [
+          children,
+          /* @__PURE__ */ jsx(
+            "i",
+            {
+              "aria-hidden": "true",
+              className: cx(
+                "klun-list-grid__sort-icon",
+                sorted === "asc" ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line"
+              )
+            }
+          )
+        ] }) : children
+      }
+    );
+  }
+);
+ListGridHeaderCell.displayName = "ListGridHeaderCell";
+var ListGridRow = forwardRef(
+  function ListGridRow2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, role: "row", className: cx("klun-list-grid__row", className), ...props, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+      children,
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+    ] });
+  }
+);
+ListGridRow.displayName = "ListGridRow";
+var ListGridCell = forwardRef(
+  function ListGridCell2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, role: "cell", className: cx("klun-list-grid__cell", className), ...props });
+  }
+);
+ListGridCell.displayName = "ListGridCell";
+var LIST_GRID_BOTTOM_CLEARANCE = 64;
 var k = 0;
 var wikiResolve;
+function safeUrl(value, image = false) {
+  const normalized = value.replace(/[\u0000-\u0020]/g, "");
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(normalized)?.[1].toLowerCase();
+  if (!scheme || ["http", "https", ...image ? ["blob"] : ["mailto", "tel"]].includes(scheme)) return value;
+  if (image && /^data:image\/(png|jpeg|gif|webp|svg\+xml)[;,]/i.test(normalized)) return value;
+  return void 0;
+}
 function inline(text) {
   const patterns = [
     // [[wiki link]] / [[target|label]] — resolved via the wikiLink prop; falls
@@ -3768,20 +4158,20 @@ function inline(text) {
         const r = wikiResolve?.(target);
         const resolved = typeof r === "string" ? { href: r, label: void 0 } : r || null;
         const label = m[2]?.trim() || resolved?.label || target;
-        return resolved ? /* @__PURE__ */ jsx("a", { className: "klun-md-wikilink", href: resolved.href, children: label }, k++) : /* @__PURE__ */ jsx("span", { className: "klun-md-wikilink klun-md-wikilink--broken", children: label }, k++);
+        return resolved && safeUrl(resolved.href) ? /* @__PURE__ */ jsx("a", { className: "klun-md-wikilink", href: safeUrl(resolved.href), children: label }, k++) : /* @__PURE__ */ jsx("span", { className: "klun-md-wikilink klun-md-wikilink--broken", children: label }, k++);
       }
     },
     { re: /`([^`]+)`/, node: (m) => /* @__PURE__ */ jsx("code", { className: "klun-md-code", children: m[1] }, k++) },
     // image before link (`![alt](url)` starts with `!` + link syntax). url allows
     // http(s) and data: URIs (base64 has no `)`), so pasted screenshots embed inline.
-    { re: /!\[([^\]]*)\]\(([^)]+)\)/, node: (m) => /* @__PURE__ */ jsx("img", { className: "klun-md-img", src: m[2], alt: m[1] }, k++) },
+    { re: /!\[([^\]]*)\]\(([^)]+)\)/, node: (m) => /* @__PURE__ */ jsx("img", { className: "klun-md-img", src: safeUrl(m[2], true), alt: m[1] }, k++) },
     { re: /\*\*([^*]+)\*\*/, node: (m) => /* @__PURE__ */ jsx("strong", { children: inline(m[1]) }, k++) },
     { re: /~~([^~]+)~~/, node: (m) => /* @__PURE__ */ jsx("del", { children: inline(m[1]) }, k++) },
     { re: /\*([^*]+)\*/, node: (m) => /* @__PURE__ */ jsx("em", { children: inline(m[1]) }, k++) },
     { re: /<u>([\s\S]*?)<\/u>/, node: (m) => /* @__PURE__ */ jsx("u", { children: inline(m[1]) }, k++) },
     {
       re: /\[([^\]]+)\]\(([^)]+)\)/,
-      node: (m) => /* @__PURE__ */ jsx("a", { href: m[2], target: "_blank", rel: "noreferrer", children: m[1] }, k++)
+      node: (m) => /* @__PURE__ */ jsx("a", { href: safeUrl(m[2]), target: "_blank", rel: "noreferrer", children: m[1] }, k++)
     },
     // bare autolink: a plain http(s) URL becomes a link. Runs after the
     // [text](url)/image patterns — those start at an earlier index (the `[`/`!`)
@@ -3982,36 +4372,888 @@ var Money = forwardRef(function Money2({
   );
 });
 Money.displayName = "Money";
-var Rating = forwardRef(function Rating2({ value = 0, max = 5, onChange, readOnly = false, size = 20, className, ...props }, ref) {
-  const { rating } = useLocale();
-  const [hover, setHover] = useState(0);
-  const active = hover || value;
-  return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-rating", className), ...props, children: Array.from({ length: max }, (_, i) => i + 1).map((i) => /* @__PURE__ */ jsx(
-    "button",
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+function Digit({ value }) {
+  return /* @__PURE__ */ jsx("span", { className: "klun-number-flow__digit", children: /* @__PURE__ */ jsx(
+    "span",
     {
-      type: "button",
-      className: "klun-rating__star",
-      disabled: readOnly,
-      "data-active": i <= active ? "" : void 0,
-      onMouseEnter: () => !readOnly && setHover(i),
-      onMouseLeave: () => !readOnly && setHover(0),
-      onClick: () => !readOnly && onChange?.(i),
-      "aria-label": fmt(rating.star, { count: i }),
-      children: /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.8 5.9 20.8l1.2-6.6L2.3 9l6.6-.9L12 2z" }) })
-    },
-    i
-  )) });
-});
-Rating.displayName = "Rating";
-var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "up", icon, tint = "feature", className, ...props }, ref) {
-  const up = trend === "up";
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-stat-card", `klun-stat-card--${tint}`, className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "klun-stat-card__head", children: [
-      /* @__PURE__ */ jsx("span", { className: "klun-stat-card__icon", children: icon }),
-      delta != null ? /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cx(
+      className: "klun-number-flow__track",
+      style: { transform: `translateY(${-value}em)` },
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "klun-number-flow__num", children: d }, d))
+    }
+  ) });
+}
+var NumberFlow = forwardRef(
+  function NumberFlow2({ value, locales: locales2, format, prefix, suffix, label, className, ...props }, ref) {
+    const text = new Intl.NumberFormat(locales2, {
+      minimumFractionDigits: format?.minimumFractionDigits,
+      maximumFractionDigits: format?.maximumFractionDigits,
+      useGrouping: format?.useGrouping
+    }).format(value);
+    const chars = [...text];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cx("klun-number-flow", className),
+        "aria-label": label ?? text,
+        ...props,
+        children: [
+          prefix != null && /* @__PURE__ */ jsx("span", { className: "klun-number-flow__affix", children: prefix }),
+          /* @__PURE__ */ jsx("span", { className: "klun-number-flow__visual", "aria-hidden": "true", children: chars.map(
+            (ch, i) => ch >= "0" && ch <= "9" ? /* @__PURE__ */ jsx(Digit, { value: Number(ch) }, chars.length - i) : /* @__PURE__ */ jsx("span", { className: "klun-number-flow__char", children: ch }, chars.length - i)
+          ) }),
+          suffix != null && /* @__PURE__ */ jsx("span", { className: "klun-number-flow__affix", children: suffix })
+        ]
+      }
+    );
+  }
+);
+NumberFlow.displayName = "NumberFlow";
+var CurrencyNumberFlow = forwardRef(
+  function CurrencyNumberFlow2({ value, prefix = "$", fractionThreshold = 100, locales: locales2, label, ...props }, ref) {
+    const fractionDigits = Math.abs(value) >= fractionThreshold ? 0 : 2;
+    const format = {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+      useGrouping: false
+    };
+    const formatted = new Intl.NumberFormat(locales2, format).format(value);
+    return /* @__PURE__ */ jsx(
+      NumberFlow,
+      {
+        ref,
+        value,
+        locales: locales2,
+        prefix,
+        format,
+        label: label ?? `${prefix}${formatted}`,
+        ...props
+      }
+    );
+  }
+);
+CurrencyNumberFlow.displayName = "CurrencyNumberFlow";
+var COMPACT_UNITS = [
+  { divisor: 1, upperSuffix: void 0, lowerSuffix: void 0 },
+  { divisor: 1e3, upperSuffix: "K", lowerSuffix: "k" },
+  { divisor: 1e6, upperSuffix: "M", lowerSuffix: "m" },
+  { divisor: 1e9, upperSuffix: "B", lowerSuffix: "b" },
+  { divisor: 1e12, upperSuffix: "T", lowerSuffix: "t" }
+];
+var CompactNumberFlow = forwardRef(
+  function CompactNumberFlow2({ value, suffixCase = "upper", locales: locales2, label, ...props }, ref) {
+    const magnitude = Math.abs(value);
+    let unitIndex = 0;
+    for (let i = COMPACT_UNITS.length - 1; i >= 0; i--) {
+      if (magnitude >= COMPACT_UNITS[i].divisor) {
+        unitIndex = i;
+        break;
+      }
+    }
+    let unit = COMPACT_UNITS[unitIndex];
+    let scaledValue = value / unit.divisor;
+    if (Math.abs(Number(scaledValue.toFixed(1))) >= 1e3 && unitIndex < COMPACT_UNITS.length - 1) {
+      unit = COMPACT_UNITS[unitIndex + 1];
+      scaledValue = value / unit.divisor;
+    }
+    const roundedValue = Number(scaledValue.toFixed(1));
+    const fractionDigits = unit.divisor > 1 && !Number.isInteger(roundedValue) ? 1 : 0;
+    const suffix = suffixCase === "upper" ? unit.upperSuffix : unit.lowerSuffix;
+    const format = {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+      useGrouping: unit.divisor === 1
+    };
+    const formatted = new Intl.NumberFormat(locales2, format).format(scaledValue);
+    return /* @__PURE__ */ jsx(
+      NumberFlow,
+      {
+        ref,
+        value: scaledValue,
+        locales: locales2,
+        suffix,
+        format,
+        label: label ?? `${formatted}${suffix ?? ""}`,
+        ...props
+      }
+    );
+  }
+);
+CompactNumberFlow.displayName = "CompactNumberFlow";
+var CappedNumberFlow = forwardRef(
+  function CappedNumberFlow2({ value, max = 99, label, ...props }, ref) {
+    const cappedValue = Math.min(Math.max(value, 0), max);
+    return /* @__PURE__ */ jsx(
+      NumberFlow,
+      {
+        ref,
+        value: cappedValue,
+        suffix: value > max ? "+" : void 0,
+        format: { maximumFractionDigits: 0, useGrouping: false },
+        label: label ?? String(value),
+        ...props
+      }
+    );
+  }
+);
+CappedNumberFlow.displayName = "CappedNumberFlow";
+var Rating = forwardRef(function Rating2({ value = 0, max = 5, onChange, readOnly = false, size = 20, className, ...props }, ref) {
+  const { rating } = useLocale();
+  const [hover, setHover] = useState(0);
+  const active = hover || value;
+  return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-rating", className), ...props, children: Array.from({ length: max }, (_, i) => i + 1).map((i) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "klun-rating__star",
+      disabled: readOnly,
+      "data-active": i <= active ? "" : void 0,
+      onMouseEnter: () => !readOnly && setHover(i),
+      onMouseLeave: () => !readOnly && setHover(0),
+      onClick: () => !readOnly && onChange?.(i),
+      "aria-label": fmt(rating.star, { count: i }),
+      children: /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.8 5.9 20.8l1.2-6.6L2.3 9l6.6-.9L12 2z" }) })
+    },
+    i
+  )) });
+});
+Rating.displayName = "Rating";
+var Popover = forwardRef(function Popover2({ trigger, children, align = "left", width = 280, className, ...props }, ref) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const panelRef = useRef(null);
+  const portal = typeof document !== "undefined";
+  const [pos, setPos] = useState(null);
+  useEffect(() => {
+    if (!open) return;
+    const h = (e) => {
+      const t = e.target;
+      if (wrapRef.current?.contains(t)) return;
+      if (panelRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!open || !portal) return;
+    const anchor = wrapRef.current;
+    const panel2 = panelRef.current;
+    if (!anchor || !panel2) return;
+    const place2 = () => {
+      const a = anchor.getBoundingClientRect();
+      const gap = 8;
+      const margin = 8;
+      const pw = panel2.offsetWidth || width;
+      const ph = panel2.offsetHeight;
+      const below = window.innerHeight - a.bottom;
+      const openUp = below < ph + gap && a.top > below;
+      const top = openUp ? Math.max(margin, a.top - gap - ph) : Math.min(a.bottom + gap, window.innerHeight - margin - ph);
+      let left = align === "right" ? a.right - pw : a.left;
+      if (left + pw > window.innerWidth - margin) left = window.innerWidth - margin - pw;
+      if (left < margin) left = margin;
+      setPos({ left, top });
+    };
+    place2();
+    window.addEventListener("scroll", place2, true);
+    window.addEventListener("resize", place2);
+    return () => {
+      window.removeEventListener("scroll", place2, true);
+      window.removeEventListener("resize", place2);
+    };
+  }, [open, portal, align, width]);
+  useEffect(() => {
+    if (!open) setPos(null);
+  }, [open]);
+  const setRefs = (node) => {
+    wrapRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const content = typeof children === "function" ? children(() => setOpen(false)) : children;
+  const portalStyle = {
+    position: "fixed",
+    left: pos?.left ?? 0,
+    top: pos?.top ?? 0,
+    width,
+    zIndex: 1150,
+    // keep hidden until measured to avoid a flash at the top-left corner
+    visibility: pos ? "visible" : "hidden"
+  };
+  const panel = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: panelRef,
+      role: "dialog",
+      className: cx(
+        "klun-popover__panel",
+        // in-flow fallback keeps the legacy left/right anchoring classes
+        !portal && `klun-popover__panel--${align}`
+      ),
+      style: portal ? portalStyle : { width },
+      children: content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("span", { ref: setRefs, className: cx("klun-popover", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "klun-popover__trigger", onClick: () => setOpen((o) => !o), children: trigger }),
+    portal ? panel && createPortal(panel, document.body) : panel
+  ] });
+});
+Popover.displayName = "Popover";
+
+// src/components/forms/emoji-data.ts
+var EMOJI_GROUPS = [
+  {
+    id: "people",
+    label: "Smileys & people",
+    emojis: [
+      { emoji: "\u{1F600}", name: "Grinning Face", keywords: ["smile", "happy", "joy", ":D"] },
+      { emoji: "\u{1F603}", name: "Grinning Face with Big Eyes", keywords: ["smiley", "happy", "joy", "haha"] },
+      { emoji: "\u{1F604}", name: "Grinning Face with Smiling Eyes", keywords: ["smile", "happy", "joy", "funny"] },
+      { emoji: "\u{1F601}", name: "Beaming Face with Smiling Eyes", keywords: ["grin", "happy", "smile", "joy"] },
+      { emoji: "\u{1F606}", name: "Grinning Squinting Face", keywords: ["laughing", "satisfied", "happy", "joy"] },
+      { emoji: "\u{1F605}", name: "Grinning Face with Sweat", keywords: ["smile", "hot", "happy", "laugh"] },
+      { emoji: "\u{1F923}", name: "Rolling on the Floor Laughing", keywords: ["face", "lol", "haha", "rofl"] },
+      { emoji: "\u{1F602}", name: "Face with Tears of Joy", keywords: ["cry", "weep", "happy", "happytears"] },
+      { emoji: "\u{1F642}", name: "Slightly Smiling Face", keywords: ["smile"] },
+      { emoji: "\u{1F643}", name: "Upside-Down Face", keywords: ["upside", "down", "flipped", "silly"] },
+      { emoji: "\u{1FAE0}", name: "Melting Face", keywords: ["hot", "heat"] },
+      { emoji: "\u{1F609}", name: "Winking Face", keywords: ["wink", "happy", "mischievous", "secret"] },
+      { emoji: "\u{1F60A}", name: "Smiling Face with Smiling Eyes", keywords: ["blush", "smile", "happy", "flushed"] },
+      { emoji: "\u{1F607}", name: "Smiling Face with Halo", keywords: ["innocent", "angel", "heaven"] },
+      { emoji: "\u{1F970}", name: "Smiling Face with Hearts", keywords: ["3", "love", "like", "affection"] },
+      { emoji: "\u{1F60D}", name: "Smiling Face with Heart-Eyes", keywords: ["heart", "eyes", "love", "like"] },
+      { emoji: "\u{1F929}", name: "Star-Struck", keywords: ["star", "struck", "grinning", "face"] },
+      { emoji: "\u{1F618}", name: "Face Blowing a Kiss", keywords: ["kissing", "heart", "love", "like"] },
+      { emoji: "\u{1F617}", name: "Kissing Face", keywords: ["love", "like", "3", "valentines"] },
+      { emoji: "\u263A\uFE0F", name: "Smiling Face", keywords: ["relaxed", "blush", "massage", "happiness"] },
+      { emoji: "\u{1F61A}", name: "Kissing Face with Closed Eyes", keywords: ["love", "like", "affection", "valentines"] },
+      { emoji: "\u{1F619}", name: "Kissing Face with Smiling Eyes", keywords: ["affection", "valentines", "infatuation", "kiss"] },
+      { emoji: "\u{1F972}", name: "Smiling Face with Tear", keywords: ["sad", "cry", "pretend"] },
+      { emoji: "\u{1F60B}", name: "Face Savoring Food", keywords: ["yum", "happy", "joy", "tongue"] },
+      { emoji: "\u{1F61B}", name: "Face with Tongue", keywords: ["stuck", "out", "prank", "childish"] },
+      { emoji: "\u{1F61C}", name: "Winking Face with Tongue", keywords: ["stuck", "out", "eye", "prank"] },
+      { emoji: "\u{1F92A}", name: "Zany Face", keywords: ["grinning", "with", "one", "large"] },
+      { emoji: "\u{1F61D}", name: "Squinting Face with Tongue", keywords: ["stuck", "out", "closed", "eyes"] },
+      { emoji: "\u{1F911}", name: "Money-Mouth Face", keywords: ["money", "mouth", "rich", "dollar"] },
+      { emoji: "\u{1F917}", name: "Hugging Face", keywords: ["smile", "hug"] },
+      { emoji: "\u{1F92D}", name: "Face with Hand over Mouth", keywords: ["smiling", "eyes", "and", "covering"] },
+      { emoji: "\u{1FAE2}", name: "Face with Open Eyes and Hand over Mouth", keywords: ["silence", "secret", "shock", "surprise"] },
+      { emoji: "\u{1FAE3}", name: "Face with Peeking Eye", keywords: ["scared", "frightening", "embarrassing", "shy"] },
+      { emoji: "\u{1F92B}", name: "Shushing Face", keywords: ["with", "finger", "covering", "closed"] },
+      { emoji: "\u{1F914}", name: "Thinking Face", keywords: ["hmmm", "think", "consider"] },
+      { emoji: "\u{1FAE1}", name: "Saluting Face", keywords: ["respect", "salute"] },
+      { emoji: "\u{1F910}", name: "Zipper-Mouth Face", keywords: ["zipper", "mouth", "sealed", "secret"] },
+      { emoji: "\u{1F928}", name: "Face with Raised Eyebrow", keywords: ["one", "distrust", "scepticism", "disapproval"] },
+      { emoji: "\u{1F610}", name: "Neutral Face", keywords: ["indifference", "meh", ":", ""] },
+      { emoji: "\u{1F611}", name: "Expressionless Face", keywords: ["indifferent", "-", "", "meh"] },
+      { emoji: "\u{1F636}", name: "Face Without Mouth", keywords: ["no", "hellokitty"] },
+      { emoji: "\u{1FAE5}", name: "Dotted Line Face", keywords: ["invisible", "lonely", "isolation", "depression"] },
+      { emoji: "\u{1F636}\u200D\u{1F32B}\uFE0F", name: "Face in Clouds", keywords: ["shower", "steam", "dream"] },
+      { emoji: "\u{1F60F}", name: "Smirking Face", keywords: ["smirk", "smile", "mean", "prank"] },
+      { emoji: "\u{1F612}", name: "Unamused Face", keywords: ["indifference", "bored", "straight", "serious"] },
+      { emoji: "\u{1F644}", name: "Face with Rolling Eyes", keywords: ["eyeroll", "frustrated"] },
+      { emoji: "\u{1F62C}", name: "Grimacing Face", keywords: ["grimace", "teeth"] },
+      { emoji: "\u{1F62E}\u200D\u{1F4A8}", name: "Face Exhaling", keywords: ["relieve", "relief", "tired", "sigh"] },
+      { emoji: "\u{1F925}", name: "Lying Face", keywords: ["lie", "pinocchio"] },
+      { emoji: "\u{1FAE8}", name: "Shaking Face", keywords: ["dizzy", "shock", "blurry", "earthquake"] },
+      { emoji: "\u{1F60C}", name: "Relieved Face", keywords: ["relaxed", "phew", "massage", "happiness"] },
+      { emoji: "\u{1F614}", name: "Pensive Face", keywords: ["sad", "depressed", "upset"] },
+      { emoji: "\u{1F62A}", name: "Sleepy Face", keywords: ["tired", "rest", "nap"] },
+      { emoji: "\u{1F924}", name: "Drooling Face", keywords: [] },
+      { emoji: "\u{1F634}", name: "Sleeping Face", keywords: ["tired", "sleepy", "night", "zzz"] },
+      { emoji: "\u{1F637}", name: "Face with Medical Mask", keywords: ["sick", "ill", "disease", "covid"] },
+      { emoji: "\u{1F912}", name: "Face with Thermometer", keywords: ["sick", "temperature", "cold", "fever"] },
+      { emoji: "\u{1F915}", name: "Face with Head-Bandage", keywords: ["head", "bandage", "injured", "clumsy"] },
+      { emoji: "\u{1F922}", name: "Nauseated Face", keywords: ["vomit", "gross", "green", "sick"] },
+      { emoji: "\u{1F92E}", name: "Face Vomiting", keywords: ["with", "open", "mouth", "sick"] },
+      { emoji: "\u{1F927}", name: "Sneezing Face", keywords: ["gesundheit", "sneeze", "sick", "allergy"] },
+      { emoji: "\u{1F975}", name: "Hot Face", keywords: ["feverish", "heat", "red", "sweating"] },
+      { emoji: "\u{1F976}", name: "Cold Face", keywords: ["blue", "freezing", "frozen", "frostbite"] },
+      { emoji: "\u{1F974}", name: "Woozy Face", keywords: ["dizzy", "intoxicated", "tipsy", "wavy"] }
+    ]
+  },
+  {
+    id: "nature",
+    label: "Animals & nature",
+    emojis: [
+      { emoji: "\u{1F435}", name: "Monkey Face", keywords: ["animal", "nature", "circus"] },
+      { emoji: "\u{1F412}", name: "Monkey", keywords: ["animal", "nature", "banana", "circus"] },
+      { emoji: "\u{1F98D}", name: "Gorilla", keywords: ["animal", "nature", "circus"] },
+      { emoji: "\u{1F9A7}", name: "Orangutan", keywords: ["animal"] },
+      { emoji: "\u{1F436}", name: "Dog Face", keywords: ["animal", "friend", "nature", "woof"] },
+      { emoji: "\u{1F415}", name: "Dog", keywords: ["dog2", "animal", "nature", "friend"] },
+      { emoji: "\u{1F9AE}", name: "Guide Dog", keywords: ["animal", "blind"] },
+      { emoji: "\u{1F415}\u200D\u{1F9BA}", name: "Service Dog", keywords: ["blind", "animal"] },
+      { emoji: "\u{1F429}", name: "Poodle", keywords: ["dog", "animal", "101", "nature"] },
+      { emoji: "\u{1F43A}", name: "Wolf", keywords: ["animal", "nature", "wild"] },
+      { emoji: "\u{1F98A}", name: "Fox", keywords: ["face", "animal", "nature"] },
+      { emoji: "\u{1F99D}", name: "Raccoon", keywords: ["animal", "nature"] },
+      { emoji: "\u{1F431}", name: "Cat Face", keywords: ["animal", "meow", "nature", "pet"] },
+      { emoji: "\u{1F408}", name: "Cat", keywords: ["cat2", "animal", "meow", "pet"] },
+      { emoji: "\u{1F408}\u200D\u2B1B", name: "Black Cat", keywords: ["superstition", "luck"] },
+      { emoji: "\u{1F981}", name: "Lion", keywords: ["face", "animal", "nature"] },
+      { emoji: "\u{1F42F}", name: "Tiger Face", keywords: ["animal", "cat", "danger", "wild"] },
+      { emoji: "\u{1F405}", name: "Tiger", keywords: ["tiger2", "animal", "nature", "roar"] },
+      { emoji: "\u{1F406}", name: "Leopard", keywords: ["animal", "nature"] },
+      { emoji: "\u{1F434}", name: "Horse Face", keywords: ["animal", "brown", "nature"] },
+      { emoji: "\u{1FACE}", name: "Moose", keywords: ["shrek", "canada", "sweden", "sven"] },
+      { emoji: "\u{1FACF}", name: "Donkey", keywords: ["eeyore", "mule"] },
+      { emoji: "\u{1F40E}", name: "Horse", keywords: ["racehorse", "animal", "gamble", "luck"] },
+      { emoji: "\u{1F984}", name: "Unicorn", keywords: ["face", "animal", "nature", "mystical"] },
+      { emoji: "\u{1F993}", name: "Zebra", keywords: ["face", "animal", "nature", "stripes"] },
+      { emoji: "\u{1F98C}", name: "Deer", keywords: ["animal", "nature", "horns", "venison"] },
+      { emoji: "\u{1F9AC}", name: "Bison", keywords: ["ox"] },
+      { emoji: "\u{1F42E}", name: "Cow Face", keywords: ["beef", "ox", "animal", "nature"] },
+      { emoji: "\u{1F402}", name: "Ox", keywords: ["animal", "cow", "beef"] },
+      { emoji: "\u{1F403}", name: "Water Buffalo", keywords: ["animal", "nature", "ox", "cow"] },
+      { emoji: "\u{1F404}", name: "Cow", keywords: ["cow2", "beef", "ox", "animal"] },
+      { emoji: "\u{1F437}", name: "Pig Face", keywords: ["animal", "oink", "nature"] },
+      { emoji: "\u{1F416}", name: "Pig", keywords: ["pig2", "animal", "nature"] },
+      { emoji: "\u{1F417}", name: "Boar", keywords: ["animal", "nature"] },
+      { emoji: "\u{1F43D}", name: "Pig Nose", keywords: ["animal", "oink"] },
+      { emoji: "\u{1F40F}", name: "Ram", keywords: ["animal", "sheep", "nature"] },
+      { emoji: "\u{1F411}", name: "Ewe", keywords: ["sheep", "animal", "nature", "wool"] },
+      { emoji: "\u{1F410}", name: "Goat", keywords: ["animal", "nature"] },
+      { emoji: "\u{1F42A}", name: "Camel", keywords: ["dromedary", "animal", "hot", "desert"] },
+      { emoji: "\u{1F42B}", name: "Bactrian Camel", keywords: ["two", "hump", "animal", "nature"] }
+    ]
+  },
+  {
+    id: "foods",
+    label: "Food & drink",
+    emojis: [
+      { emoji: "\u{1F347}", name: "Grapes", keywords: ["fruit", "food", "wine"] },
+      { emoji: "\u{1F348}", name: "Melon", keywords: ["fruit", "nature", "food"] },
+      { emoji: "\u{1F349}", name: "Watermelon", keywords: ["fruit", "food", "picnic", "summer"] },
+      { emoji: "\u{1F34A}", name: "Tangerine", keywords: ["food", "fruit", "nature", "orange"] },
+      { emoji: "\u{1F34B}", name: "Lemon", keywords: ["fruit", "nature"] },
+      { emoji: "\u{1F34C}", name: "Banana", keywords: ["fruit", "food", "monkey"] },
+      { emoji: "\u{1F34D}", name: "Pineapple", keywords: ["fruit", "nature", "food"] },
+      { emoji: "\u{1F96D}", name: "Mango", keywords: ["fruit", "food", "tropical"] },
+      { emoji: "\u{1F34E}", name: "Red Apple", keywords: ["fruit", "mac", "school"] },
+      { emoji: "\u{1F34F}", name: "Green Apple", keywords: ["fruit", "nature"] },
+      { emoji: "\u{1F350}", name: "Pear", keywords: ["fruit", "nature", "food"] },
+      { emoji: "\u{1F351}", name: "Peach", keywords: ["fruit", "nature", "food"] },
+      { emoji: "\u{1F352}", name: "Cherries", keywords: ["food", "fruit"] },
+      { emoji: "\u{1F353}", name: "Strawberry", keywords: ["fruit", "food", "nature"] },
+      { emoji: "\u{1FAD0}", name: "Blueberries", keywords: ["fruit"] },
+      { emoji: "\u{1F95D}", name: "Kiwifruit", keywords: ["kiwi", "fruit", "food"] },
+      { emoji: "\u{1F345}", name: "Tomato", keywords: ["fruit", "vegetable", "nature", "food"] },
+      { emoji: "\u{1FAD2}", name: "Olive", keywords: ["fruit"] },
+      { emoji: "\u{1F965}", name: "Coconut", keywords: ["fruit", "nature", "food", "palm"] },
+      { emoji: "\u{1F951}", name: "Avocado", keywords: ["fruit", "food"] },
+      { emoji: "\u{1F346}", name: "Eggplant", keywords: ["vegetable", "nature", "food", "aubergine"] },
+      { emoji: "\u{1F954}", name: "Potato", keywords: ["food", "tuber", "vegatable", "starch"] },
+      { emoji: "\u{1F955}", name: "Carrot", keywords: ["vegetable", "food", "orange"] },
+      { emoji: "\u{1F33D}", name: "Ear of Corn", keywords: ["food", "vegetable", "plant"] },
+      { emoji: "\u{1F336}\uFE0F", name: "Hot Pepper", keywords: ["food", "spicy", "chilli", "chili"] },
+      { emoji: "\u{1FAD1}", name: "Bell Pepper", keywords: ["fruit", "plant"] },
+      { emoji: "\u{1F952}", name: "Cucumber", keywords: ["fruit", "food", "pickle"] },
+      { emoji: "\u{1F96C}", name: "Leafy Green", keywords: ["food", "vegetable", "plant", "bok"] },
+      { emoji: "\u{1F966}", name: "Broccoli", keywords: ["fruit", "food", "vegetable"] },
+      { emoji: "\u{1F9C4}", name: "Garlic", keywords: ["food", "spice", "cook"] },
+      { emoji: "\u{1F9C5}", name: "Onion", keywords: ["cook", "food", "spice"] },
+      { emoji: "\u{1F95C}", name: "Peanuts", keywords: ["food", "nut"] },
+      { emoji: "\u{1FAD8}", name: "Beans", keywords: ["food"] },
+      { emoji: "\u{1F330}", name: "Chestnut", keywords: ["food", "squirrel"] },
+      { emoji: "\u{1FADA}", name: "Ginger Root", keywords: ["spice", "yellow", "cooking", "gingerbread"] },
+      { emoji: "\u{1FADB}", name: "Pea Pod", keywords: ["cozy", "green"] },
+      { emoji: "\u{1F35E}", name: "Bread", keywords: ["food", "wheat", "breakfast", "toast"] },
+      { emoji: "\u{1F950}", name: "Croissant", keywords: ["food", "bread", "french"] },
+      { emoji: "\u{1F956}", name: "Baguette Bread", keywords: ["food", "french", "france", "bakery"] },
+      { emoji: "\u{1FAD3}", name: "Flatbread", keywords: ["flour", "food", "bakery"] }
+    ]
+  },
+  {
+    id: "activity",
+    label: "Activity",
+    emojis: [
+      { emoji: "\u{1F383}", name: "Jack-O-Lantern", keywords: ["jack", "o", "lantern", "halloween"] },
+      { emoji: "\u{1F384}", name: "Christmas Tree", keywords: ["festival", "vacation", "december", "xmas"] },
+      { emoji: "\u{1F386}", name: "Fireworks", keywords: ["photo", "festival", "carnival", "congratulations"] },
+      { emoji: "\u{1F387}", name: "Sparkler", keywords: ["stars", "night", "shine"] },
+      { emoji: "\u{1F9E8}", name: "Firecracker", keywords: ["dynamite", "boom", "explode", "explosion"] },
+      { emoji: "\u2728", name: "Sparkles", keywords: ["stars", "shine", "shiny", "cool"] },
+      { emoji: "\u{1F388}", name: "Balloon", keywords: ["party", "celebration", "birthday", "circus"] },
+      { emoji: "\u{1F389}", name: "Party Popper", keywords: ["tada", "congratulations", "birthday", "magic"] },
+      { emoji: "\u{1F38A}", name: "Confetti Ball", keywords: ["festival", "party", "birthday", "circus"] },
+      { emoji: "\u{1F38B}", name: "Tanabata Tree", keywords: ["plant", "nature", "branch", "summer"] },
+      { emoji: "\u{1F38D}", name: "Pine Decoration", keywords: ["bamboo", "japanese", "plant", "nature"] },
+      { emoji: "\u{1F38E}", name: "Japanese Dolls", keywords: ["toy", "kimono"] },
+      { emoji: "\u{1F38F}", name: "Carp Streamer", keywords: ["flags", "fish", "japanese", "koinobori"] },
+      { emoji: "\u{1F390}", name: "Wind Chime", keywords: ["nature", "ding", "spring", "bell"] },
+      { emoji: "\u{1F391}", name: "Moon Viewing Ceremony", keywords: ["rice", "scene", "photo", "japan"] },
+      { emoji: "\u{1F9E7}", name: "Red Envelope", keywords: ["gift"] },
+      { emoji: "\u{1F380}", name: "Ribbon", keywords: ["decoration", "pink", "girl", "bowtie"] },
+      { emoji: "\u{1F381}", name: "Wrapped Gift", keywords: ["present", "birthday", "christmas", "xmas"] },
+      { emoji: "\u{1F397}\uFE0F", name: "Reminder Ribbon", keywords: ["sports", "cause", "support", "awareness"] },
+      { emoji: "\u{1F39F}\uFE0F", name: "Admission Tickets", keywords: ["sports", "concert", "entrance"] },
+      { emoji: "\u{1F3AB}", name: "Ticket", keywords: ["event", "concert", "pass"] },
+      { emoji: "\u{1F396}\uFE0F", name: "Military Medal", keywords: ["award", "winning", "army"] },
+      { emoji: "\u{1F3C6}", name: "Trophy", keywords: ["win", "award", "contest", "place"] },
+      { emoji: "\u{1F3C5}", name: "Sports Medal", keywords: ["award", "winning"] },
+      { emoji: "\u{1F947}", name: "1st Place Medal", keywords: ["first", "award", "winning"] },
+      { emoji: "\u{1F948}", name: "2nd Place Medal", keywords: ["second", "award"] },
+      { emoji: "\u{1F949}", name: "3rd Place Medal", keywords: ["third", "award"] },
+      { emoji: "\u26BD", name: "Soccer Ball", keywords: ["sports", "football"] },
+      { emoji: "\u26BE", name: "Baseball", keywords: ["sports", "balls"] },
+      { emoji: "\u{1F94E}", name: "Softball", keywords: ["sports", "balls"] },
+      { emoji: "\u{1F3C0}", name: "Basketball", keywords: ["sports", "balls", "NBA"] },
+      { emoji: "\u{1F3D0}", name: "Volleyball", keywords: ["sports", "balls"] }
+    ]
+  },
+  {
+    id: "places",
+    label: "Travel & places",
+    emojis: [
+      { emoji: "\u{1F30D}", name: "Earth Globe Europe-Africa", keywords: ["africa", "showing", "europe", "world"] },
+      { emoji: "\u{1F30E}", name: "Earth Globe Americas", keywords: ["showing", "world", "USA", "international"] },
+      { emoji: "\u{1F30F}", name: "Earth Globe Asia-Australia", keywords: ["asia", "showing", "australia", "world"] },
+      { emoji: "\u{1F310}", name: "Globe with Meridians", keywords: ["earth", "international", "world", "internet"] },
+      { emoji: "\u{1F5FA}\uFE0F", name: "World Map", keywords: ["location", "direction"] },
+      { emoji: "\u{1F5FE}", name: "Map of Japan", keywords: ["nation", "country", "japanese", "asia"] },
+      { emoji: "\u{1F9ED}", name: "Compass", keywords: ["magnetic", "navigation", "orienteering"] },
+      { emoji: "\u{1F3D4}\uFE0F", name: "Snow-Capped Mountain", keywords: ["snow", "capped", "photo", "nature"] },
+      { emoji: "\u26F0\uFE0F", name: "Mountain", keywords: ["photo", "nature", "environment"] },
+      { emoji: "\u{1F30B}", name: "Volcano", keywords: ["photo", "nature", "disaster"] },
+      { emoji: "\u{1F5FB}", name: "Mount Fuji", keywords: ["photo", "mountain", "nature", "japanese"] },
+      { emoji: "\u{1F3D5}\uFE0F", name: "Camping", keywords: ["photo", "outdoors", "tent"] },
+      { emoji: "\u{1F3D6}\uFE0F", name: "Beach with Umbrella", keywords: ["weather", "summer", "sunny", "sand"] },
+      { emoji: "\u{1F3DC}\uFE0F", name: "Desert", keywords: ["photo", "warm", "saharah"] },
+      { emoji: "\u{1F3DD}\uFE0F", name: "Desert Island", keywords: ["photo", "tropical", "mojito"] },
+      { emoji: "\u{1F3DE}\uFE0F", name: "National Park", keywords: ["photo", "environment", "nature"] },
+      { emoji: "\u{1F3DF}\uFE0F", name: "Stadium", keywords: ["photo", "place", "sports", "concert"] },
+      { emoji: "\u{1F3DB}\uFE0F", name: "Classical Building", keywords: ["art", "culture", "history"] },
+      { emoji: "\u{1F3D7}\uFE0F", name: "Building Construction", keywords: ["wip", "working", "progress"] },
+      { emoji: "\u{1F9F1}", name: "Brick", keywords: ["bricks"] },
+      { emoji: "\u{1FAA8}", name: "Rock", keywords: ["stone"] },
+      { emoji: "\u{1FAB5}", name: "Wood", keywords: ["nature", "timber", "trunk"] },
+      { emoji: "\u{1F6D6}", name: "Hut", keywords: ["house", "structure"] },
+      { emoji: "\u{1F3D8}\uFE0F", name: "Houses", keywords: ["house", "buildings", "photo"] },
+      { emoji: "\u{1F3DA}\uFE0F", name: "Derelict House", keywords: ["building", "abandon", "evict", "broken"] },
+      { emoji: "\u{1F3E0}", name: "House", keywords: ["building", "home"] },
+      { emoji: "\u{1F3E1}", name: "House with Garden", keywords: ["home", "plant", "nature"] },
+      { emoji: "\u{1F3E2}", name: "Office Building", keywords: ["bureau", "work"] },
+      { emoji: "\u{1F3E3}", name: "Japanese Post Office", keywords: ["building", "envelope", "communication"] },
+      { emoji: "\u{1F3E4}", name: "Post Office", keywords: ["european", "building", "email"] },
+      { emoji: "\u{1F3E5}", name: "Hospital", keywords: ["building", "health", "surgery", "doctor"] },
+      { emoji: "\u{1F3E6}", name: "Bank", keywords: ["building", "money", "sales", "cash"] }
+    ]
+  },
+  {
+    id: "objects",
+    label: "Objects",
+    emojis: [
+      { emoji: "\u{1F453}", name: "Glasses", keywords: ["eyeglasses", "fashion", "accessories", "eyesight"] },
+      { emoji: "\u{1F576}\uFE0F", name: "Sunglasses", keywords: ["dark", "face", "cool", "accessories"] },
+      { emoji: "\u{1F97D}", name: "Goggles", keywords: ["eyes", "protection", "safety"] },
+      { emoji: "\u{1F97C}", name: "Lab Coat", keywords: ["doctor", "experiment", "scientist", "chemist"] },
+      { emoji: "\u{1F9BA}", name: "Safety Vest", keywords: ["protection"] },
+      { emoji: "\u{1F454}", name: "Necktie", keywords: ["shirt", "suitup", "formal", "fashion"] },
+      { emoji: "\u{1F455}", name: "T-Shirt", keywords: ["shirt", "tshirt", "t", "fashion"] },
+      { emoji: "\u{1F456}", name: "Jeans", keywords: ["fashion", "shopping"] },
+      { emoji: "\u{1F9E3}", name: "Scarf", keywords: ["neck", "winter", "clothes"] },
+      { emoji: "\u{1F9E4}", name: "Gloves", keywords: ["hands", "winter", "clothes"] },
+      { emoji: "\u{1F9E5}", name: "Coat", keywords: ["jacket"] },
+      { emoji: "\u{1F9E6}", name: "Socks", keywords: ["stockings", "clothes"] },
+      { emoji: "\u{1F457}", name: "Dress", keywords: ["clothes", "fashion", "shopping"] },
+      { emoji: "\u{1F458}", name: "Kimono", keywords: ["dress", "fashion", "women", "female"] },
+      { emoji: "\u{1F97B}", name: "Sari", keywords: ["dress"] },
+      { emoji: "\u{1FA71}", name: "One-Piece Swimsuit", keywords: ["one", "piece", "fashion"] },
+      { emoji: "\u{1FA72}", name: "Briefs", keywords: ["clothing"] },
+      { emoji: "\u{1FA73}", name: "Shorts", keywords: ["clothing"] },
+      { emoji: "\u{1F459}", name: "Bikini", keywords: ["swimming", "female", "woman", "girl"] },
+      { emoji: "\u{1F45A}", name: "Womans Clothes", keywords: ["woman", "s", "fashion", "shopping"] },
+      { emoji: "\u{1FAAD}", name: "Folding Hand Fan", keywords: ["flamenco", "hot"] },
+      { emoji: "\u{1F45B}", name: "Purse", keywords: ["fashion", "accessories", "money", "sales"] },
+      { emoji: "\u{1F45C}", name: "Handbag", keywords: ["fashion", "accessory", "accessories", "shopping"] },
+      { emoji: "\u{1F45D}", name: "Pouch", keywords: ["clutch", "bag", "accessories", "shopping"] },
+      { emoji: "\u{1F6CD}\uFE0F", name: "Shopping Bags", keywords: ["mall", "buy", "purchase"] },
+      { emoji: "\u{1F392}", name: "Backpack", keywords: ["school", "satchel", "student", "education"] },
+      { emoji: "\u{1FA74}", name: "Thong Sandal", keywords: ["footwear", "summer"] },
+      { emoji: "\u{1F45E}", name: "Mans Shoe", keywords: ["man", "s", "fashion", "male"] },
+      { emoji: "\u{1F45F}", name: "Running Shoe", keywords: ["athletic", "shoes", "sports", "sneakers"] },
+      { emoji: "\u{1F97E}", name: "Hiking Boot", keywords: ["backpacking", "camping"] },
+      { emoji: "\u{1F97F}", name: "Flat Shoe", keywords: ["womans", "ballet", "slip", "on"] },
+      { emoji: "\u{1F460}", name: "High-Heeled Shoe", keywords: ["high", "heel", "heeled", "fashion"] },
+      { emoji: "\u{1F461}", name: "Womans Sandal", keywords: ["woman", "s", "shoes", "fashion"] },
+      { emoji: "\u{1FA70}", name: "Ballet Shoes", keywords: ["dance"] },
+      { emoji: "\u{1F462}", name: "Womans Boots", keywords: ["boot", "woman", "s", "shoes"] },
+      { emoji: "\u{1FAAE}", name: "Hair Pick", keywords: ["afro", "comb"] },
+      { emoji: "\u{1F451}", name: "Crown", keywords: ["king", "kod", "leader", "royalty"] },
+      { emoji: "\u{1F452}", name: "Womans Hat", keywords: ["woman", "s", "fashion", "accessories"] },
+      { emoji: "\u{1F3A9}", name: "Top Hat", keywords: ["tophat", "magic", "gentleman", "classy"] },
+      { emoji: "\u{1F393}", name: "Graduation Cap", keywords: ["mortar", "board", "school", "college"] },
+      { emoji: "\u{1F9E2}", name: "Billed Cap", keywords: ["baseball"] },
+      { emoji: "\u{1FA96}", name: "Military Helmet", keywords: ["army", "protection"] },
+      { emoji: "\u26D1\uFE0F", name: "Rescue Worker\u2019s Helmet", keywords: ["with", "white", "cross", "worker"] },
+      { emoji: "\u{1F4FF}", name: "Prayer Beads", keywords: ["dhikr", "religious"] }
+    ]
+  },
+  {
+    id: "symbols",
+    label: "Symbols",
+    emojis: [
+      { emoji: "\u{1F3E7}", name: "Atm Sign", keywords: ["money", "sales", "cash", "blue"] },
+      { emoji: "\u{1F6AE}", name: "Litter in Bin Sign", keywords: ["put", "its", "place", "blue"] },
+      { emoji: "\u{1F6B0}", name: "Potable Water", keywords: ["blue", "square", "liquid", "restroom"] },
+      { emoji: "\u267F", name: "Wheelchair Symbol", keywords: ["blue", "square", "disabled", "accessibility"] },
+      { emoji: "\u{1F6B9}", name: "Men\u2019s Room", keywords: ["mens", "men", "s", "toilet"] },
+      { emoji: "\u{1F6BA}", name: "Women\u2019s Room", keywords: ["womens", "women", "s", "purple"] },
+      { emoji: "\u{1F6BB}", name: "Restroom", keywords: ["blue", "square", "toilet", "refresh"] },
+      { emoji: "\u{1F6BC}", name: "Baby Symbol", keywords: ["orange", "square", "child"] },
+      { emoji: "\u{1F6BE}", name: "Water Closet", keywords: ["wc", "toilet", "restroom", "blue"] },
+      { emoji: "\u{1F6C2}", name: "Passport Control", keywords: ["custom", "blue", "square"] },
+      { emoji: "\u{1F6C3}", name: "Customs", keywords: ["passport", "border", "blue", "square"] },
+      { emoji: "\u{1F6C4}", name: "Baggage Claim", keywords: ["blue", "square", "airport", "transport"] },
+      { emoji: "\u{1F6C5}", name: "Left Luggage", keywords: ["blue", "square", "travel"] },
+      { emoji: "\u26A0\uFE0F", name: "Warning", keywords: ["exclamation", "wip", "alert", "error"] },
+      { emoji: "\u{1F6B8}", name: "Children Crossing", keywords: ["school", "warning", "danger", "sign"] },
+      { emoji: "\u26D4", name: "No Entry", keywords: ["limit", "security", "privacy", "bad"] },
+      { emoji: "\u{1F6AB}", name: "Prohibited", keywords: ["no", "entry", "sign", "forbid"] },
+      { emoji: "\u{1F6B3}", name: "No Bicycles", keywords: ["cyclist", "prohibited", "circle"] },
+      { emoji: "\u{1F6AD}", name: "No Smoking", keywords: ["cigarette", "blue", "square", "smell"] },
+      { emoji: "\u{1F6AF}", name: "No Littering", keywords: ["do", "not", "litter", "trash"] },
+      { emoji: "\u{1F6B1}", name: "Non-Potable Water", keywords: ["non", "potable", "drink", "faucet"] },
+      { emoji: "\u{1F6B7}", name: "No Pedestrians", keywords: ["rules", "crossing", "walking", "circle"] },
+      { emoji: "\u{1F4F5}", name: "No Mobile Phones", keywords: ["iphone", "mute", "circle"] },
+      { emoji: "\u{1F51E}", name: "No One Under Eighteen", keywords: ["underage", "18", "drink", "pub"] },
+      { emoji: "\u2622\uFE0F", name: "Radioactive", keywords: ["sign", "nuclear", "danger"] },
+      { emoji: "\u2623\uFE0F", name: "Biohazard", keywords: ["sign", "danger"] },
+      { emoji: "\u2B06\uFE0F", name: "Up Arrow", keywords: ["blue", "square", "continue", "top"] },
+      { emoji: "\u2197\uFE0F", name: "Up-Right Arrow", keywords: ["upper", "right", "up", "blue"] },
+      { emoji: "\u27A1\uFE0F", name: "Right Arrow", keywords: ["blue", "square", "next"] },
+      { emoji: "\u2198\uFE0F", name: "South East Arrow", keywords: ["lower", "right", "down", "blue"] },
+      { emoji: "\u2B07\uFE0F", name: "Down Arrow", keywords: ["blue", "square", "direction", "bottom"] },
+      { emoji: "\u2199\uFE0F", name: "Down-Left Arrow", keywords: ["lower", "left", "down", "blue"] }
+    ]
+  },
+  {
+    id: "flags",
+    label: "Flags",
+    emojis: [
+      { emoji: "\u{1F3C1}", name: "Chequered Flag", keywords: ["checkered", "contest", "finishline", "race"] },
+      { emoji: "\u{1F1E8}\u{1F1F3}", name: "China Flag", keywords: ["cn", "chinese", "prc", "country"] },
+      { emoji: "\u{1F38C}", name: "Crossed Flags", keywords: ["japanese", "nation", "country", "border"] },
+      { emoji: "\u{1F1E9}\u{1F1EA}", name: "Germany Flag", keywords: ["de", "german", "nation", "country"] },
+      { emoji: "\u{1F1EA}\u{1F1F8}", name: "Spain Flag", keywords: ["es", "nation", "country", "banner"] },
+      { emoji: "\u{1F1E6}\u{1F1E8}", name: "Ascension Island Flag", keywords: ["ac"] },
+      { emoji: "\u{1F1E6}\u{1F1E9}", name: "Andorra Flag", keywords: ["ad", "nation", "country", "banner"] },
+      { emoji: "\u{1F1E6}\u{1F1EA}", name: "United Arab Emirates Flag", keywords: ["ae", "nation", "country", "banner"] },
+      { emoji: "\u{1F1E6}\u{1F1EB}", name: "Afghanistan Flag", keywords: ["af", "nation", "country", "banner"] },
+      { emoji: "\u{1F1E6}\u{1F1EC}", name: "Antigua & Barbuda Flag", keywords: ["ag", "nation", "country", "banner"] },
+      { emoji: "\u{1F1E6}\u{1F1EE}", name: "Anguilla Flag", keywords: ["ai", "nation", "country", "banner"] },
+      { emoji: "\u{1F1E6}\u{1F1F1}", name: "Albania Flag", keywords: ["al", "nation", "country", "banner"] }
+    ]
+  }
+];
+function matches(def, query) {
+  if (def.name.toLowerCase().includes(query)) return true;
+  return def.keywords.some((k2) => k2.toLowerCase().includes(query));
+}
+var EmojiPicker = forwardRef(
+  function EmojiPicker2({
+    onSelect,
+    groups = EMOJI_GROUPS,
+    columns = 8,
+    searchable = true,
+    searchPlaceholder = "Search emoji",
+    emptyText = "No emoji found",
+    className,
+    ...props
+  }, ref) {
+    const [query, setQuery] = useState("");
+    const q = query.trim().toLowerCase();
+    const results = useMemo(() => {
+      if (!q) return null;
+      return groups.flatMap((g) => g.emojis).filter((d) => matches(d, q));
+    }, [groups, q]);
+    const gridStyle = {
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+    };
+    const cell = (def) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "klun-emoji-picker__cell",
+        title: def.name,
+        "aria-label": def.name,
+        onClick: () => onSelect(def.emoji, def),
+        children: def.emoji
+      },
+      def.emoji
+    );
+    return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-emoji-picker", className), ...props, children: [
+      searchable && /* @__PURE__ */ jsxs("label", { className: "klun-emoji-picker__search", children: [
+        /* @__PURE__ */ jsx("i", { className: "ri-search-line", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: query,
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            onChange: (e) => setQuery(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "klun-emoji-picker__body", children: results ? results.length ? /* @__PURE__ */ jsx("div", { className: "klun-emoji-picker__grid", style: gridStyle, children: results.map(cell) }) : /* @__PURE__ */ jsx("div", { className: "klun-emoji-picker__empty", children: emptyText }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "klun-emoji-picker__group", children: [
+        /* @__PURE__ */ jsx("div", { className: "klun-emoji-picker__group-title", children: group.label }),
+        /* @__PURE__ */ jsx("div", { className: "klun-emoji-picker__grid", style: gridStyle, children: group.emojis.map(cell) })
+      ] }, group.id)) })
+    ] });
+  }
+);
+EmojiPicker.displayName = "EmojiPicker";
+var QUICK_EMOJIS = ["\u{1F44D}", "\u{1F44C}", "\u2764\uFE0F", "\u2705", "\u{1F389}", "\u{1F615}", "\u{1F680}", "\u{1F440}"];
+var QuickEmojiPicker = forwardRef(
+  function QuickEmojiPicker2({ onSelect, emojis = QUICK_EMOJIS, align = "left", label = "Add reaction", className }, ref) {
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        align,
+        width: 304,
+        trigger: /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref,
+            type: "button",
+            className: cx("klun-quick-emoji-picker", className),
+            "aria-label": label,
+            title: label,
+            children: /* @__PURE__ */ jsx("i", { className: "ri-emotion-add-line", "aria-hidden": "true" })
+          }
+        ),
+        children: (close) => (
+          // Mounted per open, so the quick/full state resets like the original.
+          /* @__PURE__ */ jsx(
+            QuickPanel,
+            {
+              emojis,
+              onSelect: (emoji) => {
+                onSelect(emoji);
+                close();
+              }
+            }
+          )
+        )
+      }
+    );
+  }
+);
+QuickEmojiPicker.displayName = "QuickEmojiPicker";
+function QuickPanel({
+  emojis,
+  onSelect
+}) {
+  const [expanded, setExpanded] = useState(false);
+  if (expanded) {
+    return /* @__PURE__ */ jsx(EmojiPicker, { onSelect: (emoji) => onSelect(emoji) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "klun-quick-emoji-picker__panel", children: [
+    /* @__PURE__ */ jsx("div", { className: "klun-quick-emoji-picker__row", children: emojis.map((emoji) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "klun-quick-emoji-picker__cell",
+        onClick: () => onSelect(emoji),
+        children: emoji
+      },
+      emoji
+    )) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "klun-quick-emoji-picker__more",
+        onClick: () => setExpanded(true),
+        children: "More emojis\u2026"
+      }
+    )
+  ] });
+}
+var GAP = 6;
+var MARGIN = 8;
+var Tooltip = forwardRef(function Tooltip2({ content, side = "top", delay = 200, disabled = false, children, style, className }, ref) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  const timer = useRef(null);
+  const innerRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const show = () => {
+    if (disabled || !content) return;
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(true), delay);
+  };
+  const hide = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setOpen(false);
+  };
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const place2 = () => {
+      const trigger = innerRef.current;
+      const bubble = bubbleRef.current;
+      if (!trigger || !bubble) return;
+      const tr = trigger.getBoundingClientRect();
+      const bw = bubble.offsetWidth;
+      const bh = bubble.offsetHeight;
+      const vw = document.documentElement.clientWidth;
+      const vh = document.documentElement.clientHeight;
+      let top;
+      let left;
+      switch (side) {
+        case "bottom":
+          top = tr.bottom + GAP;
+          left = tr.left + tr.width / 2 - bw / 2;
+          break;
+        case "left":
+          left = tr.left - bw - GAP;
+          top = tr.top + tr.height / 2 - bh / 2;
+          break;
+        case "right":
+          left = tr.right + GAP;
+          top = tr.top + tr.height / 2 - bh / 2;
+          break;
+        default:
+          top = tr.top - bh - GAP;
+          left = tr.left + tr.width / 2 - bw / 2;
+      }
+      left = Math.max(MARGIN, Math.min(left, vw - bw - MARGIN));
+      top = Math.max(MARGIN, Math.min(top, vh - bh - MARGIN));
+      setPos({ top, left });
+    };
+    place2();
+    window.addEventListener("scroll", place2, true);
+    window.addEventListener("resize", place2);
+    return () => {
+      window.removeEventListener("scroll", place2, true);
+      window.removeEventListener("resize", place2);
+    };
+  }, [open, side, content]);
+  const setRefs = (node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const bubbleStyle = {
+    ...style,
+    position: "fixed",
+    top: pos ? pos.top : 0,
+    left: pos ? pos.left : 0,
+    right: "auto",
+    bottom: "auto",
+    transform: "none",
+    visibility: pos ? "visible" : "hidden"
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: setRefs,
+      className: cx("klun-tooltip", className),
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        children,
+        open && content && typeof document !== "undefined" ? createPortal(
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: bubbleRef,
+              role: "tooltip",
+              className: cx("klun-tooltip__bubble", `klun-tooltip__bubble--${side}`),
+              style: bubbleStyle,
+              children: content
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+});
+Tooltip.displayName = "Tooltip";
+function groupReactions(items2, currentActorId) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items2) {
+    let group = map.get(item.emoji);
+    if (!group) {
+      group = { emoji: item.emoji, count: 0, reacted: false, actors: [] };
+      map.set(item.emoji, group);
+    }
+    group.count += 1;
+    group.actors.push(item.actorName ?? item.actorId);
+    if (item.actorId === currentActorId) group.reacted = true;
+  }
+  return Array.from(map.values());
+}
+var ReactionBar = forwardRef(
+  function ReactionBar2({ reactions, onToggle, showPicker = true, pickerEmojis, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-reaction-bar", className), ...props, children: [
+      reactions.map((reaction) => /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          side: "top",
+          disabled: reaction.actors.length === 0,
+          content: reaction.actors.join(", "),
+          children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "klun-reaction",
+              "data-reacted": reaction.reacted ? "" : void 0,
+              "aria-pressed": reaction.reacted,
+              "aria-label": `${reaction.emoji} ${reaction.count}`,
+              onClick: () => onToggle?.(reaction.emoji),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "klun-reaction__emoji", children: reaction.emoji }),
+                /* @__PURE__ */ jsx("span", { className: "klun-reaction__count", children: reaction.count })
+              ]
+            }
+          )
+        },
+        reaction.emoji
+      )),
+      showPicker && /* @__PURE__ */ jsx(QuickEmojiPicker, { emojis: pickerEmojis, onSelect: (emoji) => onToggle?.(emoji) })
+    ] });
+  }
+);
+ReactionBar.displayName = "ReactionBar";
+var ShimmerText = forwardRef(
+  function ShimmerText2({ children, active = true, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cx("klun-shimmer-text", !active && "klun-shimmer-text--static", className),
+        ...props,
+        children: [
+          children,
+          active && /* @__PURE__ */ jsx("span", { className: "klun-shimmer-text__window", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "klun-shimmer-text__copy", children }) })
+        ]
+      }
+    );
+  }
+);
+ShimmerText.displayName = "ShimmerText";
+var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "up", icon, tint = "feature", className, ...props }, ref) {
+  const up = trend === "up";
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-stat-card", `klun-stat-card--${tint}`, className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "klun-stat-card__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "klun-stat-card__icon", children: icon }),
+      delta != null ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cx(
             "klun-stat-card__delta",
             up ? "klun-stat-card__delta--up" : "klun-stat-card__delta--down"
           ),
@@ -4451,7 +5693,8 @@ function SortIcon({ dir }) {
 function Check({
   checked,
   indeterminate,
-  onChange
+  onChange,
+  label
 }) {
   const active = checked || indeterminate;
   return /* @__PURE__ */ jsx(
@@ -4459,6 +5702,7 @@ function Check({
     {
       type: "button",
       role: "checkbox",
+      "aria-label": label,
       "aria-checked": indeterminate ? "mixed" : checked,
       onClick: (e) => {
         e.stopPropagation();
@@ -4631,7 +5875,15 @@ function TableHead({
           leftFixed.length && "klun-table__cell--fixed klun-table__cell--fixed-head"
         ),
         style: leftFixed.length ? { left: expandCol ? 44 : 0 } : void 0,
-        children: selectionType === "radio" ? null : /* @__PURE__ */ jsx(Check, { checked: allOn, indeterminate: someOn, onChange: toggleAll })
+        children: selectionType === "radio" ? null : /* @__PURE__ */ jsx(
+          Check,
+          {
+            checked: allOn,
+            indeterminate: someOn,
+            onChange: toggleAll,
+            label: table.selectAll ?? "Select all rows"
+          }
+        )
       }
     ) : null,
     visibleColumns.map((c, ci) => {
@@ -4877,6 +6129,7 @@ function RowBase({
                 {
                   type: "button",
                   role: "radio",
+                  "aria-label": table.selectRow ?? "Select row",
                   "aria-checked": on,
                   onClick: (e) => {
                     e.stopPropagation();
@@ -4885,7 +6138,14 @@ function RowBase({
                   className: cx("klun-table__radio", on && "klun-table__radio--on"),
                   children: on ? /* @__PURE__ */ jsx("span", { className: "klun-table__radio-dot" }) : null
                 }
-              ) : /* @__PURE__ */ jsx(Check, { checked: on, onChange: () => onSelectRow?.(id) })
+              ) : /* @__PURE__ */ jsx(
+                Check,
+                {
+                  checked: on,
+                  onChange: () => onSelectRow?.(id),
+                  label: table.selectRow ?? "Select row"
+                }
+              )
             }
           ) : null,
           visibleColumns.map((c, ci) => {
@@ -5728,115 +6988,6 @@ var Timeline = forwardRef(function Timeline2({ items: items2 = [], mode = "left"
   }) });
 });
 Timeline.displayName = "Timeline";
-var GAP = 6;
-var MARGIN = 8;
-var Tooltip = forwardRef(function Tooltip2({ content, side = "top", delay = 200, disabled = false, children, style, className }, ref) {
-  const [open, setOpen] = useState(false);
-  const [pos, setPos] = useState(null);
-  const timer = useRef(null);
-  const innerRef = useRef(null);
-  const bubbleRef = useRef(null);
-  const show = () => {
-    if (disabled || !content) return;
-    if (timer.current) clearTimeout(timer.current);
-    timer.current = setTimeout(() => setOpen(true), delay);
-  };
-  const hide = () => {
-    if (timer.current) clearTimeout(timer.current);
-    setOpen(false);
-  };
-  useEffect(() => () => {
-    if (timer.current) clearTimeout(timer.current);
-  }, []);
-  useLayoutEffect(() => {
-    if (!open) {
-      setPos(null);
-      return;
-    }
-    const place2 = () => {
-      const trigger = innerRef.current;
-      const bubble = bubbleRef.current;
-      if (!trigger || !bubble) return;
-      const tr = trigger.getBoundingClientRect();
-      const bw = bubble.offsetWidth;
-      const bh = bubble.offsetHeight;
-      const vw = document.documentElement.clientWidth;
-      const vh = document.documentElement.clientHeight;
-      let top;
-      let left;
-      switch (side) {
-        case "bottom":
-          top = tr.bottom + GAP;
-          left = tr.left + tr.width / 2 - bw / 2;
-          break;
-        case "left":
-          left = tr.left - bw - GAP;
-          top = tr.top + tr.height / 2 - bh / 2;
-          break;
-        case "right":
-          left = tr.right + GAP;
-          top = tr.top + tr.height / 2 - bh / 2;
-          break;
-        default:
-          top = tr.top - bh - GAP;
-          left = tr.left + tr.width / 2 - bw / 2;
-      }
-      left = Math.max(MARGIN, Math.min(left, vw - bw - MARGIN));
-      top = Math.max(MARGIN, Math.min(top, vh - bh - MARGIN));
-      setPos({ top, left });
-    };
-    place2();
-    window.addEventListener("scroll", place2, true);
-    window.addEventListener("resize", place2);
-    return () => {
-      window.removeEventListener("scroll", place2, true);
-      window.removeEventListener("resize", place2);
-    };
-  }, [open, side, content]);
-  const setRefs = (node) => {
-    innerRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  };
-  const bubbleStyle = {
-    ...style,
-    position: "fixed",
-    top: pos ? pos.top : 0,
-    left: pos ? pos.left : 0,
-    right: "auto",
-    bottom: "auto",
-    transform: "none",
-    visibility: pos ? "visible" : "hidden"
-  };
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref: setRefs,
-      className: cx("klun-tooltip", className),
-      onMouseEnter: show,
-      onMouseLeave: hide,
-      onFocus: show,
-      onBlur: hide,
-      children: [
-        children,
-        open && content && typeof document !== "undefined" ? createPortal(
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              ref: bubbleRef,
-              role: "tooltip",
-              className: cx("klun-tooltip__bubble", `klun-tooltip__bubble--${side}`),
-              style: bubbleStyle,
-              children: content
-            }
-          ),
-          document.body
-        ) : null
-      ]
-    }
-  );
-});
-Tooltip.displayName = "Tooltip";
 function flatten(nodes, level, parentExpanded, expanded, out) {
   for (const n of nodes) {
     const isExpanded = expanded.includes(n.key);
@@ -5967,6 +7118,72 @@ var Tree = forwardRef(function Tree2({
   );
 });
 Tree.displayName = "Tree";
+function VirtualTable({
+  rows = [],
+  columns = [],
+  rowHeight = 40,
+  height = 420,
+  getRowId,
+  onRowClick,
+  overscan = 8,
+  zebra = true,
+  empty,
+  className,
+  style,
+  ...props
+}) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const total = rows.length;
+  const template = useMemo(
+    () => columns.map((c) => c.width ? `${c.width}px` : "minmax(0, 1fr)").join(" "),
+    [columns]
+  );
+  const bodyHeight = Math.max(0, height - 36);
+  const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const end = Math.min(total, Math.ceil((scrollTop + bodyHeight) / rowHeight) + overscan);
+  const slice = rows.slice(start, end);
+  return /* @__PURE__ */ jsxs("div", { ref: void 0, className: cx("klun-vtable", className), style: { ...style, height }, ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "klun-vtable__head", style: { gridTemplateColumns: template }, children: columns.map((c) => /* @__PURE__ */ jsx("div", { className: cx("klun-vtable__th", c.align && `klun-vtable__th--${c.align}`), children: c.header }, c.key)) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "klun-vtable__body",
+        onScroll: (e) => setScrollTop(e.target.scrollTop),
+        style: { maxHeight: bodyHeight },
+        children: total === 0 ? /* @__PURE__ */ jsx("div", { className: "klun-vtable__empty", children: empty ?? "No rows" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { style: { height: start * rowHeight } }),
+          slice.map((row, i) => {
+            const index = start + i;
+            const id = getRowId?.(row, index) ?? index;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: onRowClick ? "button" : void 0,
+                tabIndex: onRowClick ? 0 : void 0,
+                onClick: () => onRowClick?.(row, index),
+                className: cx(
+                  "klun-vtable__row",
+                  zebra && index % 2 === 1 && "klun-vtable__row--zebra",
+                  onRowClick && "klun-vtable__row--clickable"
+                ),
+                style: { gridTemplateColumns: template, height: rowHeight },
+                children: columns.map((c) => /* @__PURE__ */ jsx("div", { className: cx("klun-vtable__td", c.align && `klun-vtable__td--${c.align}`), children: c.render ? c.render(row, index) : String(row[c.key] ?? "") }, c.key))
+              },
+              id
+            );
+          }),
+          /* @__PURE__ */ jsx("div", { style: { height: Math.max(0, (total - end) * rowHeight) } })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "klun-vtable__foot", children: [
+      total.toLocaleString("en-US"),
+      " rows \xB7 rendering ",
+      slice.length
+    ] })
+  ] });
+}
+VirtualTable.displayName = "VirtualTable";
 var Accordion = forwardRef(function Accordion2({ items: items2 = [], defaultOpen, multiple = false, className, ...props }, ref) {
   const [open, setOpen] = useState(() => defaultOpen != null ? [defaultOpen] : []);
   const toggle = (id) => setOpen((cur) => {
@@ -6095,6 +7312,74 @@ var Banner = forwardRef(function Banner2({ status = "information", variant = "fi
   );
 });
 Banner.displayName = "Banner";
+var BorderBeam = forwardRef(
+  function BorderBeam2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cx("klun-border-beam", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "klun-border-beam__light" })
+      }
+    );
+  }
+);
+BorderBeam.displayName = "BorderBeam";
+var RESOURCE_NOUN = {
+  agent: "agent",
+  skill: "skill",
+  comment: "comment",
+  runtime: "runtime",
+  workspace: "workspace"
+};
+function getCopy(reason, noun, ownerName) {
+  switch (reason) {
+    case "not_authenticated":
+      return `Sign in to edit this ${noun}.`;
+    case "not_member":
+      return `Join this workspace to edit this ${noun}.`;
+    case "not_owner_role":
+      return `View only \u2014 only the workspace owner can manage this ${noun}.`;
+    case "not_admin_role":
+      return `View only \u2014 only workspace owners and admins can manage this ${noun}.`;
+    case "not_resource_owner":
+      if (ownerName) {
+        return `View only \u2014 only ${ownerName} and workspace admins can edit this ${noun}.`;
+      }
+      return `View only \u2014 only the ${noun} owner and workspace admins can edit this ${noun}.`;
+    case "last_owner":
+      return `A workspace must keep at least one owner \u2014 promote another member first.`;
+    case "private_visibility":
+      if (ownerName) {
+        return `Personal ${noun} \u2014 only ${ownerName} and workspace admins can use this.`;
+      }
+      return `Personal ${noun} \u2014 only the owner and workspace admins can use this.`;
+    case "allowed":
+    case "unknown":
+      return "";
+  }
+}
+var CapabilityBanner = forwardRef(
+  function CapabilityBanner2({ reason, resource, ownerName, message, className, ...props }, ref) {
+    if (reason === "allowed" || reason === "unknown") return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: cx("klun-capability-banner", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("i", { className: "ri-lock-line klun-capability-banner__icon", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: message ?? getCopy(reason, RESOURCE_NOUN[resource], ownerName) })
+        ]
+      }
+    );
+  }
+);
+CapabilityBanner.displayName = "CapabilityBanner";
 var CircularProgress = forwardRef(
   function CircularProgress2({
     value = 0,
@@ -6152,14 +7437,250 @@ var CircularProgress = forwardRef(
                 )
               ]
             }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "klun-circular-progress__label", children: label != null ? label : `${Math.round(pct2)}%` })
-        ]
+          ),
+          /* @__PURE__ */ jsx("div", { className: "klun-circular-progress__label", children: label != null ? label : `${Math.round(pct2)}%` })
+        ]
+      }
+    );
+  }
+);
+CircularProgress.displayName = "CircularProgress";
+var SPHERE_PATHS = [
+  { from: { x: -0.28, y: 0.18 }, to: { x: 1.28, y: 0.78 } },
+  { from: { x: 1.28, y: 0.82 }, to: { x: -0.28, y: 0.22 } },
+  { from: { x: 0.18, y: 1.24 }, to: { x: 0.82, y: -0.24 } }
+];
+var WAVE_SPHERE_ANCHORS = [
+  { x: 0.28, y: 0.08 },
+  { x: 0.76, y: 0.28 },
+  { x: 0.38, y: 0.5 },
+  { x: 0.78, y: 0.72 },
+  { x: 0.34, y: 0.93 }
+];
+var SPHERE_PROFILES = [
+  { phase: 0, radius: 1, dot: 1, speed: 1 },
+  { phase: 0.2, radius: 0.94, dot: 0.96, speed: 1 },
+  { phase: 0.4, radius: 1, dot: 1, speed: 1 },
+  { phase: 0.6, radius: 0.94, dot: 0.96, speed: 1 },
+  { phase: 0.8, radius: 0.9, dot: 0.94, speed: 1 }
+];
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function lerp(start, end, amount) {
+  return start + (end - start) * amount;
+}
+function easeInOutSine(value) {
+  return 0.5 - Math.cos(value * Math.PI) * 0.5;
+}
+function smoothstep(edge0, edge1, value) {
+  const t = clamp((value - edge0) / (edge1 - edge0), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+function getTravelOpacity(progress) {
+  const fadeIn = smoothstep(0.03, 0.24, progress);
+  const fadeOut = 1 - smoothstep(0.76, 0.97, progress);
+  return Math.min(fadeIn, fadeOut);
+}
+function getWaveOpacity(progress) {
+  const pulse = (1 - Math.cos(progress * Math.PI * 2)) * 0.5;
+  return 0.16 + Math.pow(pulse, 1.28) * 0.84;
+}
+function resolveSphereRadius(radius, windowSize) {
+  if (typeof radius === "number") return radius;
+  const percent = Number.parseFloat(radius);
+  if (Number.isNaN(percent)) return Math.max(windowSize.w, windowSize.h);
+  return Math.max(windowSize.w, windowSize.h) * (percent / 100);
+}
+function resolveColor(host, value) {
+  if (value === "currentColor") return getComputedStyle(host).color;
+  return value;
+}
+var DotSphere = forwardRef(
+  function DotSphere2({
+    className,
+    dotGap = 20,
+    motion = "travel",
+    sphereCount = 3,
+    sphereRadius = 200,
+    dotRadiusMax = 3,
+    speed = 0.18,
+    bgColor = "transparent",
+    dotColor = "currentColor",
+    followMouse = false,
+    ...props
+  }, ref) {
+    const innerRef = useRef(null);
+    useEffect(() => {
+      const canvas = innerRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const canvasElement = canvas;
+      const context = ctx;
+      const resolvedBg = bgColor === "transparent" ? null : bgColor;
+      const resolvedDot = resolveColor(canvasElement, dotColor);
+      const prefersReducedMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+      const state = {
+        windowSize: { w: 0, h: 0 },
+        circleNumber: { x: 0, y: 0 },
+        posStart: { x: 0, y: 0 },
+        spheres: []
+      };
+      state.spheres = Array.from({ length: Math.max(1, sphereCount) }, (_, index) => {
+        const path = SPHERE_PATHS[index % SPHERE_PATHS.length] ?? SPHERE_PATHS[0];
+        const anchor = WAVE_SPHERE_ANCHORS[index % WAVE_SPHERE_ANCHORS.length] ?? WAVE_SPHERE_ANCHORS[0];
+        const profile = SPHERE_PROFILES[index % SPHERE_PROFILES.length] ?? SPHERE_PROFILES[0];
+        return {
+          center: { x: 0, y: 0 },
+          anchor,
+          from: path.from,
+          to: path.to,
+          progress: profile.phase,
+          radius: 0,
+          radiusScale: profile.radius,
+          dotRadiusMax: 0,
+          dotScale: profile.dot,
+          speed: speed * profile.speed,
+          color: resolvedDot,
+          opacity: 0
+        };
+      });
+      function setDotParams() {
+        state.circleNumber = {
+          x: Math.floor(state.windowSize.w / dotGap) + 2,
+          y: Math.floor(state.windowSize.h / dotGap) + 1
+        };
+        state.posStart = {
+          x: Math.round(
+            (state.windowSize.w - (state.circleNumber.x - 1) * dotGap) / 2
+          ),
+          y: Math.round(
+            (state.windowSize.h - (state.circleNumber.y - 1) * dotGap) / 2
+          )
+        };
+      }
+      function updateSpherePosition(sphere) {
+        if (motion === "wave") {
+          sphere.center.x = sphere.anchor.x * state.windowSize.w;
+          sphere.center.y = sphere.anchor.y * state.windowSize.h;
+          sphere.opacity = getWaveOpacity(sphere.progress);
+          return;
+        }
+        const easedProgress = easeInOutSine(sphere.progress);
+        sphere.center.x = lerp(sphere.from.x, sphere.to.x, easedProgress) * state.windowSize.w;
+        sphere.center.y = lerp(sphere.from.y, sphere.to.y, easedProgress) * state.windowSize.h;
+        sphere.opacity = getTravelOpacity(sphere.progress);
+      }
+      function handleResize() {
+        const bounds = canvasElement.getBoundingClientRect();
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        const width = Math.max(1, Math.floor(bounds.width));
+        const height = Math.max(1, Math.floor(bounds.height));
+        state.windowSize = { w: width, h: height };
+        canvasElement.width = Math.floor(width * dpr);
+        canvasElement.height = Math.floor(height * dpr);
+        context.setTransform(dpr, 0, 0, dpr, 0, 0);
+        setDotParams();
+        state.spheres.forEach((sphere) => {
+          sphere.radius = resolveSphereRadius(sphereRadius, state.windowSize) * sphere.radiusScale;
+          sphere.dotRadiusMax = dotRadiusMax * sphere.dotScale;
+          updateSpherePosition(sphere);
+        });
+      }
+      function drawDots() {
+        const { w, h } = state.windowSize;
+        if (resolvedBg) {
+          context.beginPath();
+          context.fillStyle = resolvedBg;
+          context.rect(0, 0, w, h);
+          context.fill();
+          context.closePath();
+        } else {
+          context.clearRect(0, 0, w, h);
+        }
+        context.globalCompositeOperation = "lighter";
+        state.spheres.forEach((sphere) => {
+          if (sphere.opacity <= 0.01) return;
+          for (let i = 0; i < state.circleNumber.x; i++) {
+            for (let j = 0; j < state.circleNumber.y; j++) {
+              const gapX = j % 2 === 0 ? -dotGap / 2 : 0;
+              const x = state.posStart.x + gapX + i * dotGap;
+              const y = state.posStart.y + j * dotGap;
+              const dx = x - sphere.center.x;
+              const dy = y - sphere.center.y;
+              const distance = Math.sqrt(dx * dx + dy * dy);
+              if (distance >= sphere.radius) continue;
+              const alpha = 1 - distance / sphere.radius;
+              const radius = sphere.dotRadiusMax * alpha;
+              context.save();
+              context.globalAlpha = alpha * sphere.opacity;
+              context.beginPath();
+              context.fillStyle = sphere.color;
+              context.arc(x, y, radius, 0, 2 * Math.PI, false);
+              context.fill();
+              context.closePath();
+              context.restore();
+            }
+          }
+        });
+        context.globalCompositeOperation = "source-over";
+      }
+      function moveSpheres(event) {
+        const bounds = event ? canvasElement.getBoundingClientRect() : null;
+        state.spheres.forEach((sphere, index) => {
+          if (event && followMouse && index === 0 && bounds) {
+            sphere.center.x = event.clientX - bounds.left;
+            sphere.center.y = event.clientY - bounds.top;
+            sphere.opacity = 1;
+            return;
+          }
+          if (followMouse && index === 0) return;
+          sphere.progress = (sphere.progress + sphere.speed * (motion === "wave" ? 21e-4 : 35e-4)) % 1;
+          updateSpherePosition(sphere);
+        });
+      }
+      function render() {
+        if (!prefersReducedMotion) moveSpheres(null);
+        drawDots();
+      }
+      let animationId = 0;
+      function draw() {
+        animationId = window.requestAnimationFrame(draw);
+        render();
+      }
+      function handleMouseMove(event) {
+        if (followMouse) moveSpheres(event);
+      }
+      const resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(canvasElement);
+      handleResize();
+      render();
+      if (!prefersReducedMotion) draw();
+      if (followMouse) window.addEventListener("mousemove", handleMouseMove);
+      return () => {
+        resizeObserver.disconnect();
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.cancelAnimationFrame(animationId);
+      };
+    }, [dotGap, motion, sphereCount, sphereRadius, dotRadiusMax, speed, bgColor, dotColor, followMouse]);
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: (node) => {
+          innerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cx("klun-dot-sphere", className),
+        ...props
       }
     );
   }
 );
-CircularProgress.displayName = "CircularProgress";
+DotSphere.displayName = "DotSphere";
 var EmptyState = forwardRef(function EmptyState2({ icon, title, description, action, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-empty-state", className), ...props, children: [
     icon ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__icon", children: icon }) : null,
@@ -6282,6 +7803,33 @@ function useMessage(defaults = {}) {
   return [api, holder];
 }
 Message.useMessage = useMessage;
+function NavigationProgress({
+  active,
+  position = "fixed",
+  top = 0,
+  className,
+  style
+}) {
+  const [renderSweep, setRenderSweep] = useState(false);
+  useEffect(() => {
+    if (active) setRenderSweep(true);
+  }, [active]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      role: "presentation",
+      "data-active": active ? "true" : "false",
+      "data-position": position,
+      className: cx("klun-navigation-progress", className),
+      style: { top, ...style },
+      onTransitionEnd: (event) => {
+        if (!active) setRenderSweep(false);
+      },
+      children: renderSweep && /* @__PURE__ */ jsx("div", { className: "klun-navigation-progress__sweep" })
+    }
+  );
+}
 var STATUS2 = {
   default: { icon: "ri-notification-3-line", c: null },
   information: { icon: "ri-information-fill", c: "information" },
@@ -6724,6 +8272,54 @@ function ToastRow({
     }
   );
 }
+
+// src/components/feedback/unicode-spinner-data.ts
+var UNICODE_ANIMATIONS = {
+  "braille": { interval: 80, frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"] },
+  "braillewave": { interval: 100, frames: ["\u2801\u2802\u2804\u2840", "\u2802\u2804\u2840\u2880", "\u2804\u2840\u2880\u2820", "\u2840\u2880\u2820\u2810", "\u2880\u2820\u2810\u2808", "\u2820\u2810\u2808\u2801", "\u2810\u2808\u2801\u2802", "\u2808\u2801\u2802\u2804"] },
+  "dna": { interval: 80, frames: ["\u280B\u2809\u2819\u281A", "\u2809\u2819\u281A\u2812", "\u2819\u281A\u2812\u2802", "\u281A\u2812\u2802\u2802", "\u2812\u2802\u2802\u2812", "\u2802\u2802\u2812\u2832", "\u2802\u2812\u2832\u2834", "\u2812\u2832\u2834\u2824", "\u2832\u2834\u2824\u2804", "\u2834\u2824\u2804\u280B", "\u2824\u2804\u280B\u2809", "\u2804\u280B\u2809\u2819"] },
+  "scan": { interval: 70, frames: ["\u2800\u2800\u2800\u2800", "\u2847\u2800\u2800\u2800", "\u28FF\u2800\u2800\u2800", "\u28B8\u2847\u2800\u2800", "\u2800\u28FF\u2800\u2800", "\u2800\u28B8\u2847\u2800", "\u2800\u2800\u28FF\u2800", "\u2800\u2800\u28B8\u2847", "\u2800\u2800\u2800\u28FF", "\u2800\u2800\u2800\u28B8"] },
+  "rain": { interval: 100, frames: ["\u2881\u2802\u2814\u2808", "\u2802\u280C\u2860\u2810", "\u2804\u2850\u2880\u2821", "\u2848\u2820\u2800\u2882", "\u2810\u2880\u2801\u2804", "\u2820\u2801\u280A\u2840", "\u2881\u2802\u2814\u2808", "\u2802\u280C\u2860\u2810", "\u2804\u2850\u2880\u2821", "\u2848\u2820\u2800\u2882", "\u2810\u2880\u2801\u2804", "\u2820\u2801\u280A\u2840"] },
+  "scanline": { interval: 120, frames: ["\u2809\u2809\u2809", "\u2813\u2813\u2813", "\u2826\u2826\u2826", "\u28C4\u28C4\u28C4", "\u2826\u2826\u2826", "\u2813\u2813\u2813"] },
+  "pulse": { interval: 180, frames: ["\u2800\u2836\u2800", "\u2830\u28FF\u2806", "\u28BE\u28C9\u2877", "\u28CF\u2800\u28F9", "\u2841\u2800\u2888"] },
+  "snake": { interval: 80, frames: ["\u28C1\u2840", "\u28C9\u2800", "\u2849\u2801", "\u2809\u2809", "\u2808\u2819", "\u2800\u281B", "\u2810\u281A", "\u2812\u2812", "\u2816\u2802", "\u2836\u2800", "\u2826\u2804", "\u2824\u2824", "\u2820\u28A4", "\u2800\u28E4", "\u2880\u28E0", "\u28C0\u28C0"] },
+  "sparkle": { interval: 150, frames: ["\u2861\u280A\u2894\u2821", "\u280A\u2870\u2861\u2858", "\u2894\u2885\u2808\u28A2", "\u2841\u2882\u2806\u284D", "\u2894\u2828\u2891\u2890", "\u2828\u2851\u2860\u280A"] },
+  "cascade": { interval: 60, frames: ["\u2800\u2800\u2800\u2800", "\u2800\u2800\u2800\u2800", "\u2801\u2800\u2800\u2800", "\u280B\u2800\u2800\u2800", "\u281E\u2801\u2800\u2800", "\u2874\u280B\u2800\u2800", "\u28E0\u281E\u2801\u2800", "\u2880\u2874\u280B\u2800", "\u2800\u28E0\u281E\u2801", "\u2800\u2880\u2874\u280B", "\u2800\u2800\u28E0\u281E", "\u2800\u2800\u2880\u2874", "\u2800\u2800\u2800\u28E0", "\u2800\u2800\u2800\u2880"] },
+  "columns": { interval: 60, frames: ["\u2840\u2800\u2800", "\u2844\u2800\u2800", "\u2846\u2800\u2800", "\u2847\u2800\u2800", "\u28C7\u2800\u2800", "\u28E7\u2800\u2800", "\u28F7\u2800\u2800", "\u28FF\u2800\u2800", "\u28FF\u2840\u2800", "\u28FF\u2844\u2800", "\u28FF\u2846\u2800", "\u28FF\u2847\u2800", "\u28FF\u28C7\u2800", "\u28FF\u28E7\u2800", "\u28FF\u28F7\u2800", "\u28FF\u28FF\u2800", "\u28FF\u28FF\u2840", "\u28FF\u28FF\u2844", "\u28FF\u28FF\u2846", "\u28FF\u28FF\u2847", "\u28FF\u28FF\u28C7", "\u28FF\u28FF\u28E7", "\u28FF\u28FF\u28F7", "\u28FF\u28FF\u28FF", "\u28FF\u28FF\u28FF", "\u2800\u2800\u2800"] },
+  "orbit": { interval: 100, frames: ["\u2803", "\u2809", "\u2818", "\u2830", "\u28A0", "\u28C0", "\u2844", "\u2806"] },
+  "breathe": { interval: 100, frames: ["\u2800", "\u2802", "\u280C", "\u2851", "\u2895", "\u289D", "\u28EB", "\u28DF", "\u28FF", "\u28DF", "\u28EB", "\u289D", "\u2895", "\u2851", "\u280C", "\u2802", "\u2800"] },
+  "waverows": { interval: 90, frames: ["\u2816\u2809\u2809\u2811", "\u2860\u2816\u2809\u2809", "\u28E0\u2860\u2816\u2809", "\u28C4\u28E0\u2860\u2816", "\u2822\u28C4\u28E0\u2860", "\u2819\u2822\u28C4\u28E0", "\u2809\u2819\u2822\u28C4", "\u280A\u2809\u2819\u2822", "\u281C\u280A\u2809\u2819", "\u2864\u281C\u280A\u2809", "\u28C0\u2864\u281C\u280A", "\u28A4\u28C0\u2864\u281C", "\u2823\u28A4\u28C0\u2864", "\u2811\u2823\u28A4\u28C0", "\u2809\u2811\u2823\u28A4", "\u280B\u2809\u2811\u2823"] },
+  "checkerboard": { interval: 250, frames: ["\u2895\u2895\u2895", "\u286A\u286A\u286A", "\u288A\u2814\u2861", "\u2861\u288A\u2814"] },
+  "helix": { interval: 80, frames: ["\u288C\u28C9\u288E\u28C9", "\u28C9\u2871\u28C9\u2871", "\u28C9\u288E\u28C9\u288E", "\u2871\u28C9\u2871\u28C9", "\u288E\u28C9\u288E\u28C9", "\u28C9\u2871\u28C9\u2871", "\u28C9\u288E\u28C9\u288E", "\u2871\u28C9\u2871\u28C9", "\u288E\u28C9\u288E\u28C9", "\u28C9\u2871\u28C9\u2871", "\u28C9\u288E\u28C9\u288E", "\u2871\u28C9\u2871\u28C9", "\u288E\u28C9\u288E\u28C9", "\u28C9\u2871\u28C9\u2871", "\u28C9\u288E\u28C9\u288E", "\u2871\u28C9\u2871\u28C9"] },
+  "fillsweep": { interval: 100, frames: ["\u28C0\u28C0", "\u28E4\u28E4", "\u28F6\u28F6", "\u28FF\u28FF", "\u28FF\u28FF", "\u28FF\u28FF", "\u28F6\u28F6", "\u28E4\u28E4", "\u28C0\u28C0", "\u2800\u2800", "\u2800\u2800"] },
+  "diagswipe": { interval: 60, frames: ["\u2801\u2800", "\u280B\u2800", "\u281F\u2801", "\u287F\u280B", "\u28FF\u281F", "\u28FF\u287F", "\u28FF\u28FF", "\u28FF\u28FF", "\u28FE\u28FF", "\u28F4\u28FF", "\u28E0\u28FE", "\u2880\u28F4", "\u2800\u28E0", "\u2800\u2880", "\u2800\u2800", "\u2800\u2800"] }
+};
+var UnicodeSpinner = forwardRef(
+  function UnicodeSpinner2({ name = "braille", paused = false, className, ...props }, ref) {
+    const spec = UNICODE_ANIMATIONS[name];
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+      if (paused) return;
+      setFrame(0);
+      const timer = setInterval(
+        () => setFrame((f) => (f + 1) % spec.frames.length),
+        spec.interval
+      );
+      return () => clearInterval(timer);
+    }, [name, paused, spec]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cx("klun-unicode-spinner", className),
+        "aria-hidden": "true",
+        ...props,
+        children: spec.frames[frame]
+      }
+    );
+  }
+);
+UnicodeSpinner.displayName = "UnicodeSpinner";
 var AutoComplete = forwardRef(
   function AutoComplete2({
     options = [],
@@ -7810,6 +9406,69 @@ var CompactSelectForInput = forwardRef(function CompactSelectForInput2({
   );
 });
 CompactSelectForInput.displayName = "CompactSelectForInput";
+var CounterInput = forwardRef(function CounterInput2({
+  value = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  size: sizeProp,
+  onChange,
+  disabled = false,
+  suffix,
+  className,
+  ...props
+}, ref) {
+  const size = useSize(sizeProp);
+  const { counterInput } = useLocale();
+  const decreaseLabel = counterInput?.decrease ?? "Decrease";
+  const increaseLabel = counterInput?.increase ?? "Increase";
+  const set = (next) => {
+    const v = Math.max(min, Math.min(max, next));
+    if (v !== value) onChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(
+        "klun-counter-input",
+        `klun-counter-input--${size}`,
+        disabled && "klun-counter-input--disabled",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "klun-counter-input__step",
+            "aria-label": decreaseLabel,
+            disabled: disabled || value <= min,
+            onClick: () => set(value - step),
+            children: /* @__PURE__ */ jsx("i", { className: "ri-subtract-line" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "klun-counter-input__value", children: [
+          value,
+          suffix ? /* @__PURE__ */ jsx("span", { className: "klun-counter-input__suffix", children: suffix }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "klun-counter-input__step",
+            "aria-label": increaseLabel,
+            disabled: disabled || value >= max,
+            onClick: () => set(value + step),
+            children: /* @__PURE__ */ jsx("i", { className: "ri-add-line" })
+          }
+        )
+      ]
+    }
+  );
+});
+CounterInput.displayName = "CounterInput";
 var CRON_PRESETS = [
   { label: "Every 5 minutes", value: "*/5 * * * *" },
   { label: "Every 15 minutes", value: "*/15 * * * *" },
@@ -7953,64 +9612,6 @@ var CronEditor = forwardRef(function CronEditor2({
   );
 });
 CronEditor.displayName = "CronEditor";
-var CounterInput = forwardRef(function CounterInput2({
-  value = 0,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  size: sizeProp,
-  onChange,
-  disabled = false,
-  suffix,
-  className,
-  ...props
-}, ref) {
-  const size = useSize(sizeProp);
-  const set = (next) => {
-    const v = Math.max(min, Math.min(max, next));
-    if (v !== value) onChange?.(v);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx(
-        "klun-counter-input",
-        `klun-counter-input--${size}`,
-        disabled && "klun-counter-input--disabled",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "klun-counter-input__step",
-            disabled: disabled || value <= min,
-            onClick: () => set(value - step),
-            children: /* @__PURE__ */ jsx("i", { className: "ri-subtract-line" })
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "klun-counter-input__value", children: [
-          value,
-          suffix ? /* @__PURE__ */ jsx("span", { className: "klun-counter-input__suffix", children: suffix }) : null
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "klun-counter-input__step",
-            disabled: disabled || value >= max,
-            onClick: () => set(value + step),
-            children: /* @__PURE__ */ jsx("i", { className: "ri-add-line" })
-          }
-        )
-      ]
-    }
-  );
-});
-CounterInput.displayName = "CounterInput";
 var Input = forwardRef(function Input2({
   size: sizeProp,
   leadingIcon,
@@ -8086,107 +9687,25 @@ var Input = forwardRef(function Input2({
           }
         ),
         showClear ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "klun-input__clear",
-            onClick: clear,
-            "aria-label": input.clear,
-            children: /* @__PURE__ */ jsx("i", { className: "ri-close-circle-fill" })
-          }
-        ) : null,
-        trailingNode,
-        loading ? /* @__PURE__ */ jsx("span", { className: "klun-input__spinner", "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { className: "klun-input__spinner-svg", width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", children: [
-          /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2.5" }),
-          /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: "44", strokeDashoffset: "31" })
-        ] }) }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "klun-input__icon", children: trailingIcon }) : null
-      ]
-    }
-  );
-});
-Input.displayName = "Input";
-var Popover = forwardRef(function Popover2({ trigger, children, align = "left", width = 280, className, ...props }, ref) {
-  const [open, setOpen] = useState(false);
-  const wrapRef = useRef(null);
-  const panelRef = useRef(null);
-  const portal = typeof document !== "undefined";
-  const [pos, setPos] = useState(null);
-  useEffect(() => {
-    if (!open) return;
-    const h = (e) => {
-      const t = e.target;
-      if (wrapRef.current?.contains(t)) return;
-      if (panelRef.current?.contains(t)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", h);
-    return () => document.removeEventListener("mousedown", h);
-  }, [open]);
-  useLayoutEffect(() => {
-    if (!open || !portal) return;
-    const anchor = wrapRef.current;
-    const panel2 = panelRef.current;
-    if (!anchor || !panel2) return;
-    const place2 = () => {
-      const a = anchor.getBoundingClientRect();
-      const gap = 8;
-      const margin = 8;
-      const pw = panel2.offsetWidth || width;
-      const ph = panel2.offsetHeight;
-      const below = window.innerHeight - a.bottom;
-      const openUp = below < ph + gap && a.top > below;
-      const top = openUp ? Math.max(margin, a.top - gap - ph) : Math.min(a.bottom + gap, window.innerHeight - margin - ph);
-      let left = align === "right" ? a.right - pw : a.left;
-      if (left + pw > window.innerWidth - margin) left = window.innerWidth - margin - pw;
-      if (left < margin) left = margin;
-      setPos({ left, top });
-    };
-    place2();
-    window.addEventListener("scroll", place2, true);
-    window.addEventListener("resize", place2);
-    return () => {
-      window.removeEventListener("scroll", place2, true);
-      window.removeEventListener("resize", place2);
-    };
-  }, [open, portal, align, width]);
-  useEffect(() => {
-    if (!open) setPos(null);
-  }, [open]);
-  const setRefs = (node) => {
-    wrapRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  };
-  const content = typeof children === "function" ? children(() => setOpen(false)) : children;
-  const portalStyle = {
-    position: "fixed",
-    left: pos?.left ?? 0,
-    top: pos?.top ?? 0,
-    width,
-    zIndex: 1150,
-    // keep hidden until measured to avoid a flash at the top-left corner
-    visibility: pos ? "visible" : "hidden"
-  };
-  const panel = open ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: panelRef,
-      role: "dialog",
-      className: cx(
-        "klun-popover__panel",
-        // in-flow fallback keeps the legacy left/right anchoring classes
-        !portal && `klun-popover__panel--${align}`
-      ),
-      style: portal ? portalStyle : { width },
-      children: content
+          "button",
+          {
+            type: "button",
+            className: "klun-input__clear",
+            onClick: clear,
+            "aria-label": input.clear,
+            children: /* @__PURE__ */ jsx("i", { className: "ri-close-circle-fill" })
+          }
+        ) : null,
+        trailingNode,
+        loading ? /* @__PURE__ */ jsx("span", { className: "klun-input__spinner", "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { className: "klun-input__spinner-svg", width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2.5" }),
+          /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: "44", strokeDashoffset: "31" })
+        ] }) }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "klun-input__icon", children: trailingIcon }) : null
+      ]
     }
-  ) : null;
-  return /* @__PURE__ */ jsxs("span", { ref: setRefs, className: cx("klun-popover", className), ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: "klun-popover__trigger", onClick: () => setOpen((o) => !o), children: trigger }),
-    portal ? panel && createPortal(panel, document.body) : panel
-  ] });
+  );
 });
-Popover.displayName = "Popover";
+Input.displayName = "Input";
 var same = (a, b) => !!a && !!b && a.toDateString() === b.toDateString();
 var DEFAULT_FORMAT = {
   year: "numeric",
@@ -8687,6 +10206,56 @@ var DigitInput = forwardRef(function DigitInput2({ length = 4, value = "", onCha
   );
 });
 DigitInput.displayName = "DigitInput";
+var FieldGroup = forwardRef(
+  function FieldGroup2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-field-group", className), ...props });
+  }
+);
+FieldGroup.displayName = "FieldGroup";
+var Field = forwardRef(function Field2({ orientation = "vertical", invalid = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "data-orientation": orientation,
+      "data-invalid": invalid ? "" : void 0,
+      className: cx("klun-field", `klun-field--${orientation}`, className),
+      ...props
+    }
+  );
+});
+Field.displayName = "Field";
+var FieldContent = forwardRef(
+  function FieldContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-field__content", className), ...props });
+  }
+);
+FieldContent.displayName = "FieldContent";
+var FieldLabel = forwardRef(
+  function FieldLabel2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("label", { ref, className: cx("klun-field__label", className), ...props });
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+var FieldTitle = forwardRef(
+  function FieldTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-field__title", className), ...props });
+  }
+);
+FieldTitle.displayName = "FieldTitle";
+var FieldDescription = forwardRef(
+  function FieldDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-field__description", className), ...props });
+  }
+);
+FieldDescription.displayName = "FieldDescription";
+var FieldError = forwardRef(
+  function FieldError2({ className, role = "alert", ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, role, className: cx("klun-field__error", className), ...props });
+  }
+);
+FieldError.displayName = "FieldError";
 var FileUpload = forwardRef(function FileUpload2({ onFiles, hint = "SVG, PNG, JPG or GIF (max. 8MB)", className, ...props }, ref) {
   const { fileUpload } = useLocale();
   const [over, setOver] = useState(false);
@@ -9099,6 +10668,388 @@ var Hint = forwardRef(function Hint2({ children, error = false, icon, className,
   );
 });
 Hint.displayName = "Hint";
+var Modal = forwardRef(function Modal2({
+  open,
+  onClose,
+  onOk,
+  onCancel,
+  title,
+  description,
+  icon,
+  footer,
+  okText,
+  cancelText,
+  confirmLoading = false,
+  okType = "primary",
+  okButtonProps,
+  cancelButtonProps,
+  width = 520,
+  centered = false,
+  closable = true,
+  maskClosable,
+  closeOnBackdrop,
+  keyboard = true,
+  mask = true,
+  draggable = false,
+  maximizable = false,
+  defaultMaximized = false,
+  zIndex,
+  afterClose,
+  afterOpenChange,
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { modal } = useLocale();
+  const cancel = onCancel ?? onClose;
+  const backdropClosable = maskClosable ?? closeOnBackdrop ?? true;
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [maximized, setMaximized] = useState(defaultMaximized);
+  const drag = useRef(null);
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape" && keyboard && closable) cancel?.();
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, keyboard, closable, cancel]);
+  useEffect(() => {
+    if (open) {
+      setPos({ x: 0, y: 0 });
+      setMaximized(defaultMaximized);
+    }
+    if (prevOpen.current !== open) {
+      afterOpenChange?.(open);
+      if (!open) afterClose?.();
+      prevOpen.current = open;
+    }
+  }, [open]);
+  if (!open) return null;
+  const startDrag = (e) => {
+    if (!draggable || maximized) return;
+    if (e.target.closest(".klun-modal__actions")) return;
+    drag.current = { sx: e.clientX, sy: e.clientY, ox: pos.x, oy: pos.y };
+    const move = (ev) => {
+      if (!drag.current) return;
+      setPos({
+        x: drag.current.ox + (ev.clientX - drag.current.sx),
+        y: drag.current.oy + (ev.clientY - drag.current.sy)
+      });
+    };
+    const up = () => {
+      drag.current = null;
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+  const defaultFooter = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", disabled: confirmLoading, onClick: cancel, ...cancelButtonProps, children: cancelText ?? "Cancel" }),
+    /* @__PURE__ */ jsx(Button, { variant: okType === "danger" ? "error" : "primary", loading: confirmLoading, onClick: onOk, ...okButtonProps, children: okText ?? "OK" })
+  ] });
+  const resolvedFooter = footer === null ? null : footer !== void 0 ? footer : defaultFooter;
+  const dialogStyle = maximized ? { ...style } : {
+    width,
+    ...pos.x || pos.y ? { transform: `translate(${pos.x}px, ${pos.y}px)` } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("klun-modal", centered && "klun-modal--centered", !mask && "klun-modal--no-mask"),
+      style: zIndex != null ? { zIndex } : void 0,
+      onClick: backdropClosable && closable ? cancel : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          className: cx("klun-modal__dialog", maximized && "klun-modal__dialog--maximized", className),
+          style: dialogStyle,
+          ...props,
+          children: [
+            title || icon ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cx("klun-modal__header", draggable && !maximized && "klun-modal__header--draggable"),
+                onMouseDown: startDrag,
+                children: [
+                  icon ? /* @__PURE__ */ jsx("div", { className: "klun-modal__icon", children: icon }) : null,
+                  /* @__PURE__ */ jsxs("div", { className: "klun-modal__heading", children: [
+                    title ? /* @__PURE__ */ jsx("div", { className: "klun-modal__title", children: title }) : null,
+                    description ? /* @__PURE__ */ jsx("div", { className: "klun-modal__description", children: description }) : null
+                  ] }),
+                  maximizable || closable ? /* @__PURE__ */ jsxs("div", { className: "klun-modal__actions", children: [
+                    maximizable ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setMaximized((m) => !m),
+                        "aria-label": maximized ? modal.restore ?? "Restore" : modal.maximize ?? "Maximize",
+                        className: "klun-modal__action",
+                        children: maximized ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M8 4v4H4M12 16v-4h4M12 4v4h4M8 16v-4H4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 8V4h4M16 12v4h-4M16 8V4h-4M4 12v4h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      }
+                    ) : null,
+                    closable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__action klun-modal__close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                  ] }) : null
+                ]
+              }
+            ) : null,
+            children ? /* @__PURE__ */ jsx("div", { className: "klun-modal__body", children }) : null,
+            resolvedFooter ? /* @__PURE__ */ jsx("div", { className: cx("klun-modal__footer", !children && "klun-modal__footer--flush"), children: resolvedFooter }) : null
+          ]
+        }
+      )
+    }
+  );
+});
+Modal.displayName = "Modal";
+var ICON_GROUPS = [
+  {
+    label: "\u5E38\u7528",
+    icons: [
+      "ri-home-4-line",
+      "ri-dashboard-3-line",
+      "ri-settings-3-line",
+      "ri-user-line",
+      "ri-team-line",
+      "ri-file-list-3-line",
+      "ri-calendar-line",
+      "ri-notification-3-line",
+      "ri-search-line",
+      "ri-star-line",
+      "ri-heart-line",
+      "ri-bookmark-line",
+      "ri-link",
+      "ri-share-line",
+      "ri-download-line",
+      "ri-upload-line",
+      "ri-eye-line",
+      "ri-lock-line",
+      "ri-mail-line",
+      "ri-message-2-line"
+    ]
+  },
+  {
+    label: "\u65B9\u5411",
+    icons: [
+      "ri-arrow-up-line",
+      "ri-arrow-down-line",
+      "ri-arrow-left-line",
+      "ri-arrow-right-line",
+      "ri-arrow-up-s-line",
+      "ri-arrow-down-s-line",
+      "ri-arrow-left-s-line",
+      "ri-arrow-right-s-line",
+      "ri-arrow-up-circle-line",
+      "ri-arrow-down-circle-line",
+      "ri-arrow-left-circle-line",
+      "ri-arrow-right-circle-line",
+      "ri-corner-down-right-line",
+      "ri-refresh-line",
+      "ri-loop-left-line",
+      "ri-loop-right-line",
+      "ri-login-circle-line",
+      "ri-logout-circle-line",
+      "ri-menu-line",
+      "ri-more-2-line"
+    ]
+  },
+  {
+    label: "\u7F16\u8F91",
+    icons: [
+      "ri-add-line",
+      "ri-subtract-line",
+      "ri-close-line",
+      "ri-check-line",
+      "ri-edit-line",
+      "ri-delete-bin-line",
+      "ri-file-copy-line",
+      "ri-clipboard-line",
+      "ri-save-line",
+      "ri-magic-line",
+      "ri-filter-line",
+      "ri-drag-move-2-line",
+      "ri-eye-off-line",
+      "ri-eye-2-line",
+      "ri-text",
+      "ri-font-size",
+      "ri-bold",
+      "ri-italic",
+      "ri-underline",
+      "ri-strikethrough"
+    ]
+  },
+  {
+    label: "\u6570\u636E",
+    icons: [
+      "ri-bar-chart-2-line",
+      "ri-line-chart-line",
+      "ri-pie-chart-2-line",
+      "ri-stock-line",
+      "ri-funds-line",
+      "ri-table-line",
+      "ri-list-check",
+      "ri-node-tree",
+      "ri-flow-chart",
+      "ri-percent-line",
+      "ri-calculator-line",
+      "ri-database-2-line",
+      "ri-server-line",
+      "ri-hard-drive-2-line",
+      "ri-cloud-line",
+      "ri-cpu-line",
+      "ri-code-s-slash-line",
+      "ri-terminal-box-line",
+      "ri-history-line",
+      "ri-fingerprint-line"
+    ]
+  },
+  {
+    label: "\u6587\u4EF6",
+    icons: [
+      "ri-file-line",
+      "ri-file-text-line",
+      "ri-folder-line",
+      "ri-folder-open-line",
+      "ri-archive-line",
+      "ri-inbox-line",
+      "ri-image-line",
+      "ri-gallery-line",
+      "ri-video-line",
+      "ri-music-2-line",
+      "ri-movie-line",
+      "ri-camera-line",
+      "ri-file-pdf-line",
+      "ri-file-word-line",
+      "ri-file-excel-line",
+      "ri-file-ppt-line",
+      "ri-printer-line",
+      "ri-attachment-2",
+      "ri-archive-drawer-line",
+      "ri-book-open-line"
+    ]
+  }
+];
+var IconPicker = forwardRef(function IconPicker2({
+  value,
+  onChange,
+  groups = ICON_GROUPS,
+  dialogTitle = "\u9009\u62E9\u56FE\u6807",
+  placeholder = "\u641C\u7D22\u56FE\u6807\u540D\u79F0",
+  renderIcon,
+  renderEmpty,
+  width = 520,
+  emptyText = "\u672A\u9009\u62E9\u56FE\u6807",
+  disabled,
+  className,
+  ...props
+}, ref) {
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState(groups[0]?.label ?? "");
+  const [keyword, setKeyword] = useState("");
+  const icon = renderIcon ?? ((name) => /* @__PURE__ */ jsx("i", { className: name }));
+  const empty = renderEmpty ?? (() => /* @__PURE__ */ jsx("i", { className: "ri-add-line" }));
+  const activeTab = groups.some((g) => g.label === tab) ? tab : groups[0]?.label ?? "";
+  const list = useMemo(() => {
+    const q = keyword.trim().toLowerCase();
+    if (q) return groups.flatMap((g) => g.icons).filter((name) => name.toLowerCase().includes(q));
+    return groups.find((g) => g.label === activeTab)?.icons ?? [];
+  }, [groups, keyword, activeTab]);
+  const commit = (next) => {
+    onChange?.(next);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-icon-picker", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "klun-icon-picker__trigger",
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-label": "\u9009\u62E9\u56FE\u6807",
+        title: value,
+        onClick: () => {
+          setKeyword("");
+          setOpen(true);
+        },
+        children: value ? icon(value) : empty()
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: dialogTitle,
+        width,
+        footer: null,
+        className: "klun-icon-picker__dialog",
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "klun-icon-picker__search", children: [
+            /* @__PURE__ */ jsx("i", { className: "ri-search-line" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: keyword,
+                placeholder,
+                "aria-label": placeholder,
+                onChange: (e) => setKeyword(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "klun-icon-picker__tabs", role: "tablist", children: groups.map((group) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": !keyword && activeTab === group.label,
+              className: cx("klun-icon-picker__tab", !keyword && activeTab === group.label && "is-active"),
+              onClick: () => {
+                setTab(group.label);
+                setKeyword("");
+              },
+              children: group.label
+            },
+            group.label
+          )) }),
+          list.length ? /* @__PURE__ */ jsx("div", { className: "klun-icon-picker__grid", children: list.map((name) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx("klun-icon-picker__cell", value === name && "is-selected"),
+              "aria-pressed": value === name,
+              title: name,
+              "aria-label": name,
+              onClick: () => commit(name),
+              children: icon(name)
+            },
+            name
+          )) }) : /* @__PURE__ */ jsx("div", { className: "klun-icon-picker__empty", children: "\u6CA1\u6709\u5339\u914D\u7684\u56FE\u6807" }),
+          /* @__PURE__ */ jsxs("div", { className: "klun-icon-picker__foot", children: [
+            /* @__PURE__ */ jsxs("span", { className: "klun-icon-picker__current", children: [
+              value ? icon(value) : empty(),
+              /* @__PURE__ */ jsx("span", { className: "klun-icon-picker__name", children: value || emptyText })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "klun-icon-picker__actions", children: value ? /* @__PURE__ */ jsx("button", { type: "button", className: "klun-icon-picker__btn", onClick: () => commit(""), children: "\u6E05\u9664" }) : null })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
 var ImageUpload = forwardRef(function ImageUpload2({
   src,
   shape = "circle",
@@ -9306,7 +11257,77 @@ var InlineSelect = forwardRef(
     );
   }
 );
-InlineSelect.displayName = "InlineSelect";
+InlineSelect.displayName = "InlineSelect";
+var InputGroup = forwardRef(
+  function InputGroup2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cx("klun-input-group", className),
+        ...props
+      }
+    );
+  }
+);
+InputGroup.displayName = "InputGroup";
+var InputGroupInput = forwardRef(
+  function InputGroupInput2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("input", { ref, className: cx("klun-input-group__input", className), ...props });
+  }
+);
+InputGroupInput.displayName = "InputGroupInput";
+var InputGroupAddon = forwardRef(
+  function InputGroupAddon2({ align = "inline-start", className, onMouseDown, onClick, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-align": align,
+        className: cx("klun-input-group__addon", className),
+        onMouseDown: (event) => {
+          if (!event.target.closest("button")) event.preventDefault();
+          onMouseDown?.(event);
+        },
+        onClick: (event) => {
+          if (!event.target.closest("button")) {
+            event.currentTarget.parentElement?.querySelector("input")?.focus();
+          }
+          onClick?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+InputGroupAddon.displayName = "InputGroupAddon";
+var InputGroupText = forwardRef(
+  function InputGroupText2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("span", { ref, className: cx("klun-input-group__text", className), ...props });
+  }
+);
+InputGroupText.displayName = "InputGroupText";
+var InputGroupButton = forwardRef(
+  function InputGroupButton2({ size = "xsmall", variant = "ghost", type = "button", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: cx(
+          "klun-input-group__button",
+          `klun-input-group__button--${size}`,
+          `klun-input-group__button--${variant}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputGroupButton.displayName = "InputGroupButton";
 var Label = forwardRef(function Label2({ children, required = false, sublabel, disabled = false, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "label",
@@ -9773,11 +11794,15 @@ var Select = forwardRef(function Select2({
   value,
   defaultValue,
   onChange,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }, ref) {
   const size = useSize(sizeProp);
   const rootRef = useRef(null);
   const s = useSelect({ children, value, defaultValue, disabled: disabled || loading, rootRef });
+  const { select: selectLocale } = useLocale();
+  const fallbackLabel = !ariaLabel && !ariaLabelledBy && !s.selected && !placeholder ? selectLocale?.placeholder ?? "Select" : void 0;
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cx("klun-select", `klun-select--${size}`, className), style, children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -9789,6 +11814,8 @@ var Select = forwardRef(function Select2({
         onKeyDown: s.triggerKeyDown,
         "aria-haspopup": "listbox",
         "aria-expanded": s.open,
+        "aria-label": ariaLabel ?? fallbackLabel,
+        "aria-labelledby": ariaLabelledBy,
         "data-open": s.open || void 0,
         className: cx(
           "klun-select__trigger",
@@ -11120,40 +13147,537 @@ var SegmentedControl = forwardRef(
     }) });
   }
 );
-SegmentedControl.displayName = "SegmentedControl";
-var StepIndicator = forwardRef(function StepIndicator2({ steps = [], current = 0, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-step-indicator", className), ...props, children: steps.map((s, i) => {
-    const done = i < current;
-    const active = i === current;
-    const state = done ? "complete" : active ? "active" : "upcoming";
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "klun-step-indicator__step", "data-state": state, children: [
-        /* @__PURE__ */ jsx("div", { className: "klun-step-indicator__marker", children: done ? /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M3.5 8.5l3 3 6-6.5",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ) }) : i + 1 }),
-        /* @__PURE__ */ jsxs("div", { className: "klun-step-indicator__text", children: [
-          /* @__PURE__ */ jsx("div", { className: "klun-step-indicator__label", children: s.label }),
-          s.description ? /* @__PURE__ */ jsx("div", { className: "klun-step-indicator__description", children: s.description }) : null
-        ] })
-      ] }),
-      i < steps.length - 1 ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "klun-step-indicator__connector",
-          "data-state": i < current ? "complete" : "upcoming"
-        }
-      ) : null
-    ] }, i);
-  }) });
-});
-StepIndicator.displayName = "StepIndicator";
+SegmentedControl.displayName = "SegmentedControl";
+function RailButton({
+  item,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "klun-sidebar__nav-button",
+      "data-active": active ? "" : void 0,
+      disabled: item.disabled,
+      "aria-current": active ? "page" : void 0,
+      "aria-label": item.label,
+      title: item.label,
+      onClick,
+      children: item.icon
+    }
+  );
+}
+function MenuItemRow({
+  item,
+  expanded,
+  collapsed,
+  active,
+  onToggle,
+  onSelect
+}) {
+  const isExpander = Array.isArray(item.children) && item.children.length > 0;
+  const title = collapsed && typeof item.label === "string" ? item.label : void 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "klun-sidebar__item",
+      "data-active": active ? "" : void 0,
+      disabled: item.disabled,
+      "aria-expanded": isExpander ? expanded : void 0,
+      "aria-current": !isExpander && active ? "page" : void 0,
+      title,
+      onClick: () => {
+        if (isExpander) onToggle();
+        else onSelect?.(item.key, item);
+      },
+      children: [
+        item.icon != null && /* @__PURE__ */ jsx("span", { className: "klun-sidebar__item-icon", children: item.icon }),
+        /* @__PURE__ */ jsx("span", { className: "klun-sidebar__item-label", children: item.label }),
+        isExpander && /* @__PURE__ */ jsx("span", { className: "klun-sidebar__item-caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line" }) })
+      ]
+    }
+  );
+}
+function SubMenuItemRow({
+  item,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "klun-sidebar__sub-item", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "klun-sidebar__sub-button",
+      disabled: item.disabled,
+      onClick: () => onSelect?.(item.key, item),
+      children: item.label
+    }
+  ) });
+}
+var Sidebar = forwardRef(function Sidebar2({
+  brand,
+  navItems = [],
+  footNavItems = [],
+  avatar,
+  navKey,
+  defaultNavKey,
+  onNavChange,
+  title,
+  sections = [],
+  selectedKey,
+  onSelect,
+  defaultExpandedKeys = [],
+  searchable = false,
+  searchPlaceholder = "Search",
+  onSearch,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapse,
+  className,
+  ...props
+}, ref) {
+  const [internalNav, setInternalNav] = useState(defaultNavKey);
+  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+  const [expandedKeys, setExpandedKeys] = useState(
+    () => new Set(defaultExpandedKeys)
+  );
+  const [query, setQuery] = useState("");
+  const navControlled = navKey !== void 0;
+  const activeNav = navControlled ? navKey : internalNav;
+  const collapseControlled = collapsedProp !== void 0;
+  const collapsed = collapseControlled ? collapsedProp : internalCollapsed;
+  const selectNav = (key) => {
+    if (!navControlled) setInternalNav(key);
+    onNavChange?.(key);
+  };
+  const toggleCollapse = () => {
+    const next = !collapsed;
+    if (!collapseControlled) setInternalCollapsed(next);
+    onCollapse?.(next);
+  };
+  const toggleExpanded = (key) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx("klun-sidebar", collapsed && "klun-sidebar--collapsed", className),
+      "data-collapsed": collapsed ? "" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("nav", { className: "klun-sidebar__rail", "aria-label": "Primary", children: [
+          brand != null && /* @__PURE__ */ jsx("div", { className: "klun-sidebar__brand", children: brand }),
+          /* @__PURE__ */ jsx("div", { className: "klun-sidebar__nav", children: navItems.map((item) => /* @__PURE__ */ jsx(
+            RailButton,
+            {
+              item,
+              active: item.key === activeNav,
+              onClick: () => selectNav(item.key)
+            },
+            item.key
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "klun-sidebar__rail-foot", children: [
+            footNavItems.map((item) => /* @__PURE__ */ jsx(
+              RailButton,
+              {
+                item,
+                active: item.key === activeNav,
+                onClick: () => selectNav(item.key)
+              },
+              item.key
+            )),
+            avatar != null && /* @__PURE__ */ jsx("div", { className: "klun-sidebar__avatar", children: avatar })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "klun-sidebar__panel", children: [
+          /* @__PURE__ */ jsxs("div", { className: "klun-sidebar__panel-head", children: [
+            !collapsed && /* @__PURE__ */ jsx("div", { className: "klun-sidebar__panel-title", children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "klun-sidebar__collapse",
+                "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                "aria-expanded": !collapsed,
+                onClick: toggleCollapse,
+                children: /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-s-line", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          searchable && /* @__PURE__ */ jsxs("div", { className: "klun-sidebar__search", children: [
+            /* @__PURE__ */ jsx("span", { className: "klun-sidebar__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", { className: "ri-search-line" }) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: "klun-sidebar__search-input",
+                placeholder: searchPlaceholder,
+                value: query,
+                tabIndex: collapsed ? -1 : 0,
+                onChange: (e) => {
+                  setQuery(e.target.value);
+                  onSearch?.(e.target.value);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "klun-sidebar__scroll", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { className: "klun-sidebar__section", children: [
+            section.title != null && /* @__PURE__ */ jsx("div", { className: "klun-sidebar__section-title", children: section.title }),
+            section.items.map((item) => {
+              const isExpander = Array.isArray(item.children) && item.children.length > 0;
+              const expanded = expandedKeys.has(item.key);
+              return /* @__PURE__ */ jsxs("div", { className: "klun-sidebar__group", children: [
+                /* @__PURE__ */ jsx(
+                  MenuItemRow,
+                  {
+                    item,
+                    expanded,
+                    collapsed,
+                    active: item.key === selectedKey,
+                    onToggle: () => toggleExpanded(item.key),
+                    onSelect
+                  }
+                ),
+                isExpander && expanded && !collapsed && /* @__PURE__ */ jsx("div", { className: "klun-sidebar__sub", children: item.children.map((child) => /* @__PURE__ */ jsx(SubMenuItemRow, { item: child, onSelect }, child.key)) })
+              ] }, item.key);
+            })
+          ] }, sectionIndex)) })
+        ] })
+      ]
+    }
+  );
+});
+Sidebar.displayName = "Sidebar";
+var StepIndicator = forwardRef(function StepIndicator2({ steps = [], current = 0, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-step-indicator", className), ...props, children: steps.map((s, i) => {
+    const done = i < current;
+    const active = i === current;
+    const state = done ? "complete" : active ? "active" : "upcoming";
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "klun-step-indicator__step", "data-state": state, children: [
+        /* @__PURE__ */ jsx("div", { className: "klun-step-indicator__marker", children: done ? /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3.5 8.5l3 3 6-6.5",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) : i + 1 }),
+        /* @__PURE__ */ jsxs("div", { className: "klun-step-indicator__text", children: [
+          /* @__PURE__ */ jsx("div", { className: "klun-step-indicator__label", children: s.label }),
+          s.description ? /* @__PURE__ */ jsx("div", { className: "klun-step-indicator__description", children: s.description }) : null
+        ] })
+      ] }),
+      i < steps.length - 1 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "klun-step-indicator__connector",
+          "data-state": i < current ? "complete" : "upcoming"
+        }
+      ) : null
+    ] }, i);
+  }) });
+});
+StepIndicator.displayName = "StepIndicator";
+var StepperContext = createContext(void 0);
+var StepItemContext = createContext(void 0);
+function useStepper() {
+  const ctx = useContext(StepperContext);
+  if (!ctx) throw new Error("useStepper must be used within a <Stepper>");
+  return ctx;
+}
+function useStepItem() {
+  const ctx = useContext(StepItemContext);
+  if (!ctx) throw new Error("useStepItem must be used within a <StepperItem>");
+  return ctx;
+}
+var Stepper = forwardRef(function Stepper2({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  className,
+  children,
+  indicators = {},
+  ...props
+}, ref) {
+  const [internalStep, setInternalStep] = useState(defaultValue);
+  const [triggerNodes, setTriggerNodes] = useState([]);
+  const registerTrigger = useCallback((node) => {
+    setTriggerNodes((prev) => prev.includes(node) ? prev : [...prev, node]);
+  }, []);
+  const unregisterTrigger = useCallback((node) => {
+    setTriggerNodes((prev) => prev.filter((n) => n !== node));
+  }, []);
+  const activeStep = value ?? internalStep;
+  const setActiveStep = useCallback(
+    (step) => {
+      if (value === void 0) setInternalStep(step);
+      onValueChange?.(step);
+    },
+    [value, onValueChange]
+  );
+  const focusTrigger = (index) => {
+    triggerNodes[index]?.focus();
+  };
+  const focusNext = (currentIndex) => focusTrigger((currentIndex + 1) % triggerNodes.length);
+  const focusPrev = (currentIndex) => focusTrigger((currentIndex - 1 + triggerNodes.length) % triggerNodes.length);
+  const contextValue = useMemo(
+    () => ({
+      activeStep,
+      setActiveStep,
+      orientation,
+      registerTrigger,
+      unregisterTrigger,
+      triggerNodes,
+      focusNext,
+      focusPrev,
+      focusFirst: () => focusTrigger(0),
+      focusLast: () => focusTrigger(triggerNodes.length - 1),
+      indicators
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeStep, setActiveStep, orientation, registerTrigger, unregisterTrigger, triggerNodes, indicators]
+  );
+  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      "aria-orientation": orientation,
+      "data-orientation": orientation,
+      className: cx("klun-stepper", className),
+      ...props,
+      children
+    }
+  ) });
+});
+Stepper.displayName = "Stepper";
+var StepperNav = forwardRef(
+  function StepperNav2({ className, ...props }, ref) {
+    const { orientation, activeStep } = useStepper();
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "data-orientation": orientation,
+        "data-state": activeStep,
+        className: cx("klun-stepper__nav", className),
+        ...props
+      }
+    );
+  }
+);
+StepperNav.displayName = "StepperNav";
+var StepperItem = forwardRef(
+  function StepperItem2({ step, completed = false, disabled = false, loading = false, className, children, ...props }, ref) {
+    const { activeStep } = useStepper();
+    const state = completed || step < activeStep ? "completed" : activeStep === step ? "active" : "inactive";
+    const isLoading = loading && step === activeStep;
+    return /* @__PURE__ */ jsx(StepItemContext.Provider, { value: { step, state, isDisabled: disabled, isLoading }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-state": state,
+        "data-loading": isLoading ? "" : void 0,
+        className: cx("klun-stepper__item", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+StepperItem.displayName = "StepperItem";
+var StepperTrigger = forwardRef(
+  function StepperTrigger2({ className, children, tabIndex, onKeyDown, ...props }, ref) {
+    const { step, state, isDisabled, isLoading } = useStepItem();
+    const {
+      activeStep,
+      setActiveStep,
+      registerTrigger,
+      unregisterTrigger,
+      triggerNodes,
+      focusNext,
+      focusPrev,
+      focusFirst,
+      focusLast
+    } = useStepper();
+    const buttonRef = useRef(null);
+    useEffect(() => {
+      const node = buttonRef.current;
+      if (!node) return;
+      registerTrigger(node);
+      return () => unregisterTrigger(node);
+    }, [registerTrigger, unregisterTrigger]);
+    const isSelected = activeStep === step;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (node) => {
+          buttonRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        type: "button",
+        role: "tab",
+        id: `stepper-tab-${step}`,
+        "aria-selected": isSelected,
+        "aria-controls": `stepper-panel-${step}`,
+        tabIndex: typeof tabIndex === "number" ? tabIndex : isSelected ? 0 : -1,
+        "data-state": state,
+        "data-loading": isLoading ? "" : void 0,
+        disabled: isDisabled,
+        className: cx("klun-stepper__trigger", className),
+        onClick: () => setActiveStep(step),
+        onKeyDown: (event) => {
+          switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown": {
+              event.preventDefault();
+              const index = triggerNodes.findIndex((n) => n === buttonRef.current);
+              if (index !== -1) focusNext(index);
+              break;
+            }
+            case "ArrowLeft":
+            case "ArrowUp": {
+              event.preventDefault();
+              const index = triggerNodes.findIndex((n) => n === buttonRef.current);
+              if (index !== -1) focusPrev(index);
+              break;
+            }
+            case "Home":
+              event.preventDefault();
+              focusFirst();
+              break;
+            case "End":
+              event.preventDefault();
+              focusLast();
+              break;
+            case "Enter":
+            case " ":
+              event.preventDefault();
+              setActiveStep(step);
+              break;
+          }
+          onKeyDown?.(event);
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+StepperTrigger.displayName = "StepperTrigger";
+var StepperIndicator = forwardRef(
+  function StepperIndicator2({ className, children, ...props }, ref) {
+    const { state, isLoading } = useStepItem();
+    const { indicators } = useStepper();
+    const custom = isLoading && indicators.loading || state === "completed" && indicators.completed || state === "active" && indicators.active || state === "inactive" && indicators.inactive;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-state": state,
+        "data-loading": isLoading ? "" : void 0,
+        className: cx("klun-stepper__indicator", className),
+        ...props,
+        children: custom ?? children
+      }
+    );
+  }
+);
+StepperIndicator.displayName = "StepperIndicator";
+var StepperSeparator = forwardRef(
+  function StepperSeparator2({ className, ...props }, ref) {
+    const { state } = useStepItem();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        "data-state": state,
+        className: cx("klun-stepper__separator", className),
+        ...props
+      }
+    );
+  }
+);
+StepperSeparator.displayName = "StepperSeparator";
+var StepperTitle = forwardRef(
+  function StepperTitle2({ className, ...props }, ref) {
+    const { state } = useStepItem();
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ref,
+        "data-state": state,
+        className: cx("klun-stepper__title", className),
+        ...props
+      }
+    );
+  }
+);
+StepperTitle.displayName = "StepperTitle";
+var StepperDescription = forwardRef(
+  function StepperDescription2({ className, ...props }, ref) {
+    const { state } = useStepItem();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-state": state,
+        className: cx("klun-stepper__description", className),
+        ...props
+      }
+    );
+  }
+);
+StepperDescription.displayName = "StepperDescription";
+var StepperPanel = forwardRef(
+  function StepperPanel2({ className, ...props }, ref) {
+    const { activeStep } = useStepper();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-state": activeStep,
+        className: cx("klun-stepper__panel", className),
+        ...props
+      }
+    );
+  }
+);
+StepperPanel.displayName = "StepperPanel";
+var StepperContent = forwardRef(
+  function StepperContent2({ value, forceMount = false, className, children, ...props }, ref) {
+    const { activeStep } = useStepper();
+    const isActive = value === activeStep;
+    if (!forceMount && !isActive) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: `stepper-panel-${value}`,
+        role: "tabpanel",
+        "aria-labelledby": `stepper-tab-${value}`,
+        hidden: forceMount && !isActive,
+        className: cx("klun-stepper__content", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+StepperContent.displayName = "StepperContent";
 var Wizard = forwardRef(function Wizard2({
   steps = [],
   current,
@@ -11779,6 +14303,208 @@ var Dropdown = forwardRef(function Dropdown2({ trigger, items: items2 = [], alig
   ] });
 });
 Dropdown.displayName = "Dropdown";
+var GAP4 = 6;
+var MARGIN2 = 8;
+var HoverCardContext = createContext(null);
+function useHoverCard() {
+  const ctx = useContext(HoverCardContext);
+  if (!ctx) throw new Error("HoverCard parts must be used inside <HoverCard>");
+  return ctx;
+}
+function HoverCard({
+  children,
+  openDelay = 300,
+  closeDelay = 150,
+  open: openProp,
+  onOpenChange
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const controlled = openProp !== void 0;
+  const open = controlled ? openProp : internalOpen;
+  const triggerRef = useRef(null);
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const clearTimers = () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  };
+  const setOpen = (next) => {
+    if (!controlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const show = () => {
+    clearTimers();
+    if (open) return;
+    openTimer.current = setTimeout(() => setOpen(true), openDelay);
+  };
+  const hide = () => {
+    clearTimers();
+    closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
+  };
+  const cancelHide = () => {
+    clearTimers();
+  };
+  useEffect(() => clearTimers, []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    HoverCardContext.Provider,
+    {
+      value: {
+        open,
+        show,
+        hide,
+        cancelHide,
+        triggerRef,
+        registerTrigger: (el) => {
+          triggerRef.current = el;
+        }
+      },
+      children
+    }
+  );
+}
+var HoverCardTrigger = forwardRef(
+  function HoverCardTrigger2({ className, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref) {
+    const ctx = useHoverCard();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: (node) => {
+          ctx.registerTrigger(node);
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cx("klun-hover-card__trigger", className),
+        onMouseEnter: (event) => {
+          ctx.show();
+          onMouseEnter?.(event);
+        },
+        onMouseLeave: (event) => {
+          ctx.hide();
+          onMouseLeave?.(event);
+        },
+        onFocus: (event) => {
+          ctx.show();
+          onFocus?.(event);
+        },
+        onBlur: (event) => {
+          ctx.hide();
+          onBlur?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+HoverCardTrigger.displayName = "HoverCardTrigger";
+function alignAxis(start, size, panelSize, align) {
+  if (align === "start") return start;
+  if (align === "end") return start + size - panelSize;
+  return start + size / 2 - panelSize / 2;
+}
+var HoverCardContent = forwardRef(
+  function HoverCardContent2({
+    side = "bottom",
+    align = "center",
+    className,
+    onClick,
+    onContextMenu,
+    onAuxClick,
+    onDoubleClick,
+    ...props
+  }, ref) {
+    const ctx = useHoverCard();
+    const panelRef = useRef(null);
+    const [pos, setPos] = useState(null);
+    useLayoutEffect(() => {
+      if (!ctx.open) {
+        setPos(null);
+        return;
+      }
+      const place2 = () => {
+        const trigger = ctx.triggerRef.current;
+        const panel = panelRef.current;
+        if (!trigger || !panel) return;
+        const tr = trigger.getBoundingClientRect();
+        const pw = panel.offsetWidth;
+        const ph = panel.offsetHeight;
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        let top;
+        let left;
+        switch (side) {
+          case "top":
+            top = tr.top - ph - GAP4;
+            left = alignAxis(tr.left, tr.width, pw, align);
+            break;
+          case "left":
+            left = tr.left - pw - GAP4;
+            top = alignAxis(tr.top, tr.height, ph, align);
+            break;
+          case "right":
+            left = tr.right + GAP4;
+            top = alignAxis(tr.top, tr.height, ph, align);
+            break;
+          default:
+            top = tr.bottom + GAP4;
+            left = alignAxis(tr.left, tr.width, pw, align);
+        }
+        left = Math.max(MARGIN2, Math.min(left, vw - pw - MARGIN2));
+        top = Math.max(MARGIN2, Math.min(top, vh - ph - MARGIN2));
+        setPos({ top, left });
+      };
+      place2();
+      window.addEventListener("scroll", place2, true);
+      window.addEventListener("resize", place2);
+      return () => {
+        window.removeEventListener("scroll", place2, true);
+        window.removeEventListener("resize", place2);
+      };
+    }, [ctx.open, side, align, ctx.triggerRef]);
+    if (!ctx.open || typeof document === "undefined") return null;
+    const stop = (forwarded) => (event) => {
+      event.stopPropagation();
+      forwarded?.(event);
+    };
+    const style = {
+      position: "fixed",
+      top: pos?.top ?? 0,
+      left: pos?.left ?? 0,
+      visibility: pos ? "visible" : "hidden"
+    };
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (node) => {
+            panelRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          className: cx("klun-hover-card__panel", className),
+          "data-side": side,
+          style,
+          onMouseEnter: ctx.cancelHide,
+          onMouseLeave: ctx.hide,
+          onClick: stop(onClick),
+          onContextMenu: stop(onContextMenu),
+          onAuxClick: stop(onAuxClick),
+          onDoubleClick: stop(onDoubleClick),
+          ...props
+        }
+      ),
+      document.body
+    );
+  }
+);
+HoverCardContent.displayName = "HoverCardContent";
 var MIN = 0.25;
 var MAX = 6;
 var clampScale = (s) => Math.min(MAX, Math.max(MIN, +s.toFixed(2)));
@@ -11919,155 +14645,8 @@ function ImageViewer({
   );
 }
 ImageViewer.displayName = "ImageViewer";
-var Modal = forwardRef(function Modal2({
-  open,
-  onClose,
-  onOk,
-  onCancel,
-  title,
-  description,
-  icon,
-  footer,
-  okText,
-  cancelText,
-  confirmLoading = false,
-  okType = "primary",
-  okButtonProps,
-  cancelButtonProps,
-  width = 520,
-  centered = false,
-  closable = true,
-  maskClosable,
-  closeOnBackdrop,
-  keyboard = true,
-  mask = true,
-  draggable = false,
-  maximizable = false,
-  defaultMaximized = false,
-  zIndex,
-  afterClose,
-  afterOpenChange,
-  children,
-  className,
-  style,
-  ...props
-}, ref) {
-  const { modal } = useLocale();
-  const cancel = onCancel ?? onClose;
-  const backdropClosable = maskClosable ?? closeOnBackdrop ?? true;
-  const [pos, setPos] = useState({ x: 0, y: 0 });
-  const [maximized, setMaximized] = useState(defaultMaximized);
-  const drag = useRef(null);
-  const prevOpen = useRef(open);
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape" && keyboard && closable) cancel?.();
-    };
-    document.addEventListener("keydown", onKey);
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prevOverflow;
-    };
-  }, [open, keyboard, closable, cancel]);
-  useEffect(() => {
-    if (open) {
-      setPos({ x: 0, y: 0 });
-      setMaximized(defaultMaximized);
-    }
-    if (prevOpen.current !== open) {
-      afterOpenChange?.(open);
-      if (!open) afterClose?.();
-      prevOpen.current = open;
-    }
-  }, [open]);
-  if (!open) return null;
-  const startDrag = (e) => {
-    if (!draggable || maximized) return;
-    if (e.target.closest(".klun-modal__actions")) return;
-    drag.current = { sx: e.clientX, sy: e.clientY, ox: pos.x, oy: pos.y };
-    const move = (ev) => {
-      if (!drag.current) return;
-      setPos({
-        x: drag.current.ox + (ev.clientX - drag.current.sx),
-        y: drag.current.oy + (ev.clientY - drag.current.sy)
-      });
-    };
-    const up = () => {
-      drag.current = null;
-      document.removeEventListener("mousemove", move);
-      document.removeEventListener("mouseup", up);
-    };
-    document.addEventListener("mousemove", move);
-    document.addEventListener("mouseup", up);
-  };
-  const defaultFooter = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", disabled: confirmLoading, onClick: cancel, ...cancelButtonProps, children: cancelText ?? "Cancel" }),
-    /* @__PURE__ */ jsx(Button, { variant: okType === "danger" ? "error" : "primary", loading: confirmLoading, onClick: onOk, ...okButtonProps, children: okText ?? "OK" })
-  ] });
-  const resolvedFooter = footer === null ? null : footer !== void 0 ? footer : defaultFooter;
-  const dialogStyle = maximized ? { ...style } : {
-    width,
-    ...pos.x || pos.y ? { transform: `translate(${pos.x}px, ${pos.y}px)` } : null,
-    ...style
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx("klun-modal", centered && "klun-modal--centered", !mask && "klun-modal--no-mask"),
-      style: zIndex != null ? { zIndex } : void 0,
-      onClick: backdropClosable && closable ? cancel : void 0,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          role: "dialog",
-          "aria-modal": "true",
-          onClick: (e) => e.stopPropagation(),
-          className: cx("klun-modal__dialog", maximized && "klun-modal__dialog--maximized", className),
-          style: dialogStyle,
-          ...props,
-          children: [
-            title || icon ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cx("klun-modal__header", draggable && !maximized && "klun-modal__header--draggable"),
-                onMouseDown: startDrag,
-                children: [
-                  icon ? /* @__PURE__ */ jsx("div", { className: "klun-modal__icon", children: icon }) : null,
-                  /* @__PURE__ */ jsxs("div", { className: "klun-modal__heading", children: [
-                    title ? /* @__PURE__ */ jsx("div", { className: "klun-modal__title", children: title }) : null,
-                    description ? /* @__PURE__ */ jsx("div", { className: "klun-modal__description", children: description }) : null
-                  ] }),
-                  maximizable || closable ? /* @__PURE__ */ jsxs("div", { className: "klun-modal__actions", children: [
-                    maximizable ? /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setMaximized((m) => !m),
-                        "aria-label": maximized ? modal.restore ?? "Restore" : modal.maximize ?? "Maximize",
-                        className: "klun-modal__action",
-                        children: maximized ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M8 4v4H4M12 16v-4h4M12 4v4h4M8 16v-4H4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 8V4h4M16 12v4h-4M16 8V4h-4M4 12v4h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                      }
-                    ) : null,
-                    closable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__action klun-modal__close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
-                  ] }) : null
-                ]
-              }
-            ) : null,
-            children ? /* @__PURE__ */ jsx("div", { className: "klun-modal__body", children }) : null,
-            resolvedFooter ? /* @__PURE__ */ jsx("div", { className: cx("klun-modal__footer", !children && "klun-modal__footer--flush"), children: resolvedFooter }) : null
-          ]
-        }
-      )
-    }
-  );
-});
-Modal.displayName = "Modal";
-var GAP4 = 8;
-var MARGIN2 = 8;
+var GAP5 = 8;
+var MARGIN3 = 8;
 var Popconfirm = forwardRef(function Popconfirm2({
   title: titleProp,
   description,
@@ -12128,23 +14707,23 @@ var Popconfirm = forwardRef(function Popconfirm2({
       let left;
       switch (placement) {
         case "bottom":
-          top = tr.bottom + GAP4;
+          top = tr.bottom + GAP5;
           left = tr.left + tr.width / 2 - bw / 2;
           break;
         case "left":
-          left = tr.left - bw - GAP4;
+          left = tr.left - bw - GAP5;
           top = tr.top + tr.height / 2 - bh / 2;
           break;
         case "right":
-          left = tr.right + GAP4;
+          left = tr.right + GAP5;
           top = tr.top + tr.height / 2 - bh / 2;
           break;
         default:
-          top = tr.top - bh - GAP4;
+          top = tr.top - bh - GAP5;
           left = tr.left + tr.width / 2 - bw / 2;
       }
-      left = Math.max(MARGIN2, Math.min(left, vw - bw - MARGIN2));
-      top = Math.max(MARGIN2, Math.min(top, vh - bh - MARGIN2));
+      left = Math.max(MARGIN3, Math.min(left, vw - bw - MARGIN3));
+      top = Math.max(MARGIN3, Math.min(top, vh - bh - MARGIN3));
       setPos({ top, left });
     };
     place2();
@@ -12240,6 +14819,6 @@ var Popconfirm = forwardRef(function Popconfirm2({
 });
 Popconfirm.displayName = "Popconfirm";
 
-export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kanban, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, VirtualTable, Wizard, arSA, deDE, describeCron, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-MBL2CDDG.js.map
-//# sourceMappingURL=chunk-MBL2CDDG.js.map
+export { Accordion, ActivityHeatmap, ActorAvatar, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, BorderBeam, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, CapabilityBanner, CappedNumberFlow, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactNumberFlow, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, CurrencyNumberFlow, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, DotSphere, Drawer, Dropdown, EmojiPicker, EmptyState, ExpiryCountdown, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldTitle, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, HoverCard, HoverCardContent, HoverCardTrigger, ICON_GROUPS, IconPicker, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kanban, Kbd, KeyIcon, LIST_GRID_BOTTOM_CLEARANCE, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListGrid, ListGridBody, ListGridCell, ListGridHeader, ListGridHeaderCell, ListGridRow, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, NavigationProgress, Notification, NumberFlow, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, QUICK_EMOJIS, QuickEmojiPicker, Radio, RadioCard, RangeSlider, Rating, ReactionBar, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, ShimmerText, Sidebar, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Toggle, Tooltip, Tree, UnicodeSpinner, VirtualTable, Wizard, arSA, buildHeatmapGrid, deDE, describeCron, enUS, esES, fmt, formatAvatarEmoji, frFR, groupReactions, idID, itIT, jaJP, koKR, localTodayIso, locales, nlNL, parseAvatarEmoji, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, reorderRows, resolveMove, ruRU, summarizeHeatmap, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, useStepItem, useStepper, viVN, zhCN, zhTW };
+//# sourceMappingURL=chunk-WONPY7ZX.js.map
+//# sourceMappingURL=chunk-WONPY7ZX.js.map