klun-ui 0.1.16 → 0.1.19

package/dist/{chunk-VATUPFE3.js → chunk-NYIPE2T7.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-T225J6LV.js';
-import { createContext, forwardRef, useState, useRef, useEffect, Children, useCallback, Fragment as Fragment$1, useContext, isValidElement, createElement, useMemo, useLayoutEffect, cloneElement, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect, Children, useCallback, useMemo, useLayoutEffect, Fragment as Fragment$1, useContext, isValidElement, createElement, cloneElement, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -2533,6 +2533,353 @@ var Chip = forwardRef(function Chip2({ children, color = "gray", selected = fals
   );
 });
 Chip.displayName = "Chip";
+var TONE_COLOR = {
+  ok: "green",
+  warn: "orange",
+  err: "red",
+  info: "blue",
+  neutral: "gray",
+  busy: "blue",
+  // ALM / workflow tones.
+  feature: "purple",
+  verified: "sky",
+  stable: "teal",
+  away: "yellow",
+  highlighted: "pink"
+};
+var STATUS_TONE = {
+  // success / live
+  running: "ok",
+  active: "ok",
+  online: "ok",
+  ready: "ok",
+  healthy: "ok",
+  completed: "ok",
+  succeeded: "ok",
+  success: "ok",
+  paid: "ok",
+  connected: "ok",
+  enabled: "ok",
+  // neutral / idle
+  stopped: "neutral",
+  inactive: "neutral",
+  offline: "neutral",
+  disabled: "neutral",
+  draft: "neutral",
+  archived: "neutral",
+  unknown: "neutral",
+  default: "neutral",
+  closed: "neutral",
+  // busy / in-progress (information)
+  pending: "busy",
+  creating: "busy",
+  provisioning: "busy",
+  starting: "busy",
+  stopping: "busy",
+  rebooting: "busy",
+  deploying: "busy",
+  processing: "busy",
+  queued: "busy",
+  migrating: "busy",
+  // warning
+  suspended: "warn",
+  paused: "warn",
+  degraded: "warn",
+  expiring: "warn",
+  warning: "warn",
+  "action-required": "warn",
+  overdue: "warn",
+  locked: "warn",
+  // error
+  failed: "err",
+  error: "err",
+  expired: "err",
+  terminated: "err",
+  destroyed: "err",
+  rejected: "err",
+  cancelled: "err",
+  canceled: "err",
+  offline_error: "err",
+  unpaid: "err",
+  // ALM / issue-tracker workflow vocabulary (koda ALM). Colors via the tones above.
+  new: "info",
+  open: "info",
+  triage: "info",
+  reopened: "info",
+  "in-progress": "away",
+  doing: "away",
+  started: "away",
+  wip: "away",
+  "in-review": "feature",
+  reviewing: "feature",
+  "code-review": "feature",
+  "needs-review": "feature",
+  verified: "verified",
+  qa: "verified",
+  tested: "verified",
+  released: "stable",
+  deployed: "stable",
+  live: "stable",
+  merged: "stable",
+  blocked: "warn",
+  "on-hold": "warn",
+  flagged: "highlighted",
+  starred: "highlighted"
+};
+function keyOf(s) {
+  return String(s == null ? "" : s).trim().toLowerCase().replace(/\s+/g, "-").replace(/_/g, "_");
+}
+function StatusBadge({
+  status,
+  label,
+  tone,
+  map,
+  dot = true,
+  variant = "light",
+  size = "medium",
+  pulse = false,
+  className,
+  ...props
+}) {
+  const k2 = keyOf(status);
+  const resolvedTone = tone || map && map[k2] || STATUS_TONE[k2] || "neutral";
+  const color = TONE_COLOR[resolvedTone] || "gray";
+  const text = label != null ? label : String(status == null ? "" : status).replace(/[-_]/g, " ");
+  const display = typeof text === "string" ? text.charAt(0).toUpperCase() + text.slice(1) : text;
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      color,
+      variant,
+      size,
+      dot: dot && !pulse,
+      className: cx("klun-status-badge", className),
+      ...props,
+      children: [
+        pulse ? /* @__PURE__ */ jsxs("span", { className: "klun-status-badge__ping", children: [
+          /* @__PURE__ */ jsx("span", { className: "klun-status-badge__ping-wave" }),
+          /* @__PURE__ */ jsx("span", { className: "klun-status-badge__ping-core" })
+        ] }) : null,
+        display
+      ]
+    }
+  );
+}
+StatusBadge.displayName = "StatusBadge";
+StatusBadge.STATUS_TONE = STATUS_TONE;
+StatusBadge.TONE_COLOR = TONE_COLOR;
+function useTick(ms) {
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (!ms) return;
+    const id = setInterval(() => force((n) => n + 1), ms);
+    return () => clearInterval(id);
+  }, [ms]);
+}
+var RelativeTime = forwardRef(function RelativeTime2({ date, locale, live = true, every = 6e4, absolute, className, ...props }, ref) {
+  useTick(live ? every : 0);
+  const rel = Format.relTime(date, { locale });
+  const title = Format.absTime(date, { locale });
+  return /* @__PURE__ */ jsx(
+    "time",
+    {
+      ref,
+      title: absolute ? rel : title,
+      className: cx("klun-relative-time", className),
+      ...props,
+      children: absolute ? title : rel
+    }
+  );
+});
+RelativeTime.displayName = "RelativeTime";
+function defaultFormat(cd) {
+  if (cd.expired) {
+    const d = Math.abs(cd.days);
+    return d >= 1 ? `Expired ${d}d ago` : "Expired";
+  }
+  if (cd.days >= 1) return `${cd.days}d ${cd.hours}h`;
+  if (cd.hours >= 1) return `${cd.hours}h ${cd.minutes}m`;
+  return `${cd.minutes}m`;
+}
+var ExpiryCountdown = forwardRef(
+  function ExpiryCountdown2({ date, warnDays = 7, every = 6e4, format, showIcon = true, className, ...props }, ref) {
+    useTick(every);
+    const c = Format.countdown(date);
+    const tone = c.expired ? "err" : c.days < warnDays ? "warn" : "ok";
+    const text = (format || defaultFormat)(c);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cx("klun-relative-time", `klun-relative-time--${tone}`, className),
+        ...props,
+        children: [
+          showIcon ? /* @__PURE__ */ jsx(
+            "i",
+            {
+              className: cx(
+                "klun-relative-time__icon",
+                c.expired ? "ri-time-line" : "ri-timer-line"
+              ),
+              "aria-hidden": true
+            }
+          ) : null,
+          text
+        ]
+      }
+    );
+  }
+);
+ExpiryCountdown.displayName = "ExpiryCountdown";
+var Skeleton = forwardRef(function Skeleton2({ width = "100%", height = 16, circle = false, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": true,
+      className: cx("klun-skeleton", circle && "klun-skeleton--circle", className),
+      style: {
+        ["--klun-skeleton-width"]: typeof width === "number" ? `${width}px` : width,
+        ["--klun-skeleton-height"]: typeof height === "number" ? `${height}px` : height,
+        ...style
+      },
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+var KIND_ICON = {
+  artifact: "ri-price-tag-3-line",
+  pr: "ri-git-pull-request-line",
+  commit: "ri-git-commit-line",
+  doc: "ri-file-text-line",
+  wiki: "ri-book-2-line"
+};
+var KIND_COLOR = {
+  artifact: "gray",
+  pr: "purple",
+  commit: "gray",
+  doc: "blue",
+  wiki: "sky"
+};
+var OPEN_DELAY = 300;
+function isStructured(p) {
+  return !!p && typeof p === "object" && !isValidElement(p) && "title" in p;
+}
+var CrossRefBadge = forwardRef(
+  function CrossRefBadge2({ label, kind = "artifact", href, onClick, status, color, preview, resolved = false, disabled = false, className }, ref) {
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [loaded, setLoaded] = useState(null);
+    const timer = useRef(null);
+    const loadedOnce = useRef(false);
+    const hasCard = preview != null;
+    const load = useCallback(() => {
+      if (loadedOnce.current || typeof preview !== "function") return;
+      loadedOnce.current = true;
+      setLoading(true);
+      Promise.resolve(preview()).then((data) => setLoaded(data)).finally(() => setLoading(false));
+    }, [preview]);
+    const scheduleOpen = useCallback(() => {
+      if (disabled || !hasCard) return;
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        setOpen(true);
+        load();
+      }, OPEN_DELAY);
+    }, [disabled, hasCard, load]);
+    const close = useCallback(() => {
+      if (timer.current) clearTimeout(timer.current);
+      setOpen(false);
+    }, []);
+    useEffect(() => () => {
+      if (timer.current) clearTimeout(timer.current);
+    }, []);
+    useEffect(() => {
+      if (!open) return;
+      const onKey = (e) => {
+        if (e.key === "Escape") close();
+      };
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
+    const iconCls = KIND_ICON[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 }),
+      /* @__PURE__ */ jsx("span", { className: "klun-xref__label", children: label })
+    ] });
+    let card = null;
+    if (open) {
+      if (loading) {
+        card = /* @__PURE__ */ jsxs("div", { className: "klun-xref__card klun-xref__card--loading", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: "70%", height: 14 }),
+          /* @__PURE__ */ jsx(Skeleton, { width: "45%", height: 12 })
+        ] });
+      } else {
+        const data = loaded ?? (isStructured(preview) ? preview : null);
+        if (data) {
+          card = /* @__PURE__ */ jsxs("div", { className: "klun-xref__card", role: "dialog", children: [
+            /* @__PURE__ */ jsx("div", { className: "klun-xref__card-title", children: data.title }),
+            (data.status || data.assignee) && /* @__PURE__ */ jsxs("div", { className: "klun-xref__card-meta", children: [
+              data.status ? /* @__PURE__ */ jsx(StatusBadge, { status: data.status, size: "small" }) : null,
+              data.assignee ? /* @__PURE__ */ jsx("span", { className: "klun-xref__assignee", children: data.assignee }) : null
+            ] }),
+            data.updatedAt != null ? /* @__PURE__ */ jsx(RelativeTime, { className: "klun-xref__time", date: data.updatedAt }) : null,
+            data.meta ? /* @__PURE__ */ jsx("div", { className: "klun-xref__card-extra", children: data.meta }) : null
+          ] });
+        } else if (!isStructured(preview) && typeof preview !== "function") {
+          card = /* @__PURE__ */ jsx("div", { className: "klun-xref__card", role: "dialog", children: preview });
+        }
+      }
+    }
+    const commonProps = {
+      className: "klun-xref__trigger",
+      onMouseEnter: scheduleOpen,
+      onMouseLeave: close,
+      onFocus: () => {
+        if (!disabled && hasCard) {
+          setOpen(true);
+          load();
+        }
+      },
+      onBlur: close
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cx(
+          "klun-xref",
+          resolved && "klun-xref--resolved",
+          disabled && "klun-xref--disabled",
+          className
+        ),
+        children: [
+          href && !disabled ? /* @__PURE__ */ jsx("a", { href, ...commonProps, children: inner }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...commonProps,
+              role: "button",
+              tabIndex: disabled ? void 0 : 0,
+              "aria-disabled": disabled || void 0,
+              onClick: disabled ? void 0 : onClick,
+              onKeyDown: (e) => {
+                if (!disabled && onClick && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onClick();
+                }
+              },
+              children: inner
+            }
+          ),
+          card
+        ]
+      }
+    );
+  }
+);
+CrossRefBadge.displayName = "CrossRefBadge";
 var CodeViewer = forwardRef(function CodeViewer2({
   code = "",
   title,
@@ -2772,6 +3119,225 @@ var Descriptions = forwardRef(
   }
 );
 Descriptions.displayName = "Descriptions";
+var HUNK_RE = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@(.*)$/;
+function parsePatch(patch) {
+  const hunks = [];
+  let cur = null;
+  let oldNo = 0;
+  let newNo = 0;
+  for (const raw of String(patch).replace(/\n$/, "").split("\n")) {
+    const m = HUNK_RE.exec(raw);
+    if (m) {
+      oldNo = parseInt(m[1], 10);
+      newNo = parseInt(m[2], 10);
+      cur = { header: m[3].trim() || void 0, lines: [{ type: "hunk", oldNo: null, newNo: null, text: raw }] };
+      hunks.push(cur);
+      continue;
+    }
+    if (!cur) {
+      cur = { lines: [] };
+      hunks.push(cur);
+    }
+    const c = raw[0];
+    if (c === "+") cur.lines.push({ type: "add", oldNo: null, newNo: newNo++, text: raw.slice(1) });
+    else if (c === "-") cur.lines.push({ type: "del", oldNo: oldNo++, newNo: null, text: raw.slice(1) });
+    else if (c === "\\") cur.lines.push({ type: "context", oldNo: null, newNo: null, text: raw });
+    else cur.lines.push({ type: "context", oldNo: oldNo++, newNo: newNo++, text: c === " " ? raw.slice(1) : raw });
+  }
+  return hunks;
+}
+function toSplitRows(lines) {
+  const rows = [];
+  let dels = [];
+  let adds = [];
+  const flush = () => {
+    const n = Math.max(dels.length, adds.length);
+    for (let i = 0; i < n; i++) rows.push({ kind: "pair", left: dels[i], right: adds[i] });
+    dels = [];
+    adds = [];
+  };
+  for (const ln of lines) {
+    if (ln.type === "hunk") {
+      flush();
+      rows.push({ kind: "hunk", text: ln.text });
+    } else if (ln.type === "del") dels.push(ln);
+    else if (ln.type === "add") adds.push(ln);
+    else {
+      flush();
+      rows.push({ kind: "pair", left: ln, right: ln });
+    }
+  }
+  flush();
+  return rows;
+}
+var DiffViewer = forwardRef(function DiffViewer2({
+  hunks,
+  patch,
+  filename,
+  additions,
+  deletions,
+  mode = "split",
+  language,
+  wrap = false,
+  collapsible = false,
+  defaultCollapsed = false,
+  comments,
+  onAddComment,
+  toolbar,
+  dark = false,
+  maxHeight = 480,
+  className,
+  style,
+  ...props
+}, ref) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const data = useMemo(
+    () => hunks ?? (patch != null ? parsePatch(patch) : []),
+    [hunks, patch]
+  );
+  const allLines = useMemo(() => data.flatMap((h) => h.lines), [data]);
+  const gutter = (side, no) => {
+    if (no == null) return /* @__PURE__ */ jsx("span", { className: "klun-diff__num" });
+    const addable = !!onAddComment;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cx("klun-diff__num", addable && "klun-diff__num--addable"),
+        onClick: addable ? () => onAddComment({ side, lineNo: no }) : void 0,
+        role: addable ? "button" : void 0,
+        "aria-label": addable ? `Comment on ${side} line ${no}` : void 0,
+        children: [
+          addable ? /* @__PURE__ */ jsx("span", { className: "klun-diff__add-icon", "aria-hidden": true, children: "+" }) : null,
+          /* @__PURE__ */ jsx("span", { className: "klun-diff__num-val", children: no })
+        ]
+      }
+    );
+  };
+  const commentFor = (side, no) => {
+    if (no == null || !comments) return null;
+    return comments[`${side}:${no}`] ?? null;
+  };
+  const wrapCls = wrap && "klun-diff__code--wrap";
+  const renderUnified = () => /* @__PURE__ */ jsx("table", { className: "klun-diff__table klun-diff__table--unified", children: /* @__PURE__ */ jsx("tbody", { children: allLines.map((ln, i) => {
+    if (ln.type === "hunk") {
+      return /* @__PURE__ */ jsxs("tr", { className: "klun-diff__row klun-diff__row--hunk", children: [
+        /* @__PURE__ */ jsx("td", { className: "klun-diff__gutter", colSpan: 2 }),
+        /* @__PURE__ */ jsx("td", { className: "klun-diff__code", children: ln.text })
+      ] }, i);
+    }
+    const side = ln.type === "del" ? "old" : "new";
+    const no = ln.type === "del" ? ln.oldNo : ln.newNo;
+    const comment = commentFor(side, no);
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsxs("tr", { className: cx("klun-diff__row", `klun-diff__row--${ln.type}`), children: [
+        /* @__PURE__ */ jsx("td", { className: "klun-diff__gutter", children: gutter("old", ln.oldNo) }),
+        /* @__PURE__ */ jsx("td", { className: "klun-diff__gutter", children: gutter("new", ln.newNo) }),
+        /* @__PURE__ */ jsxs("td", { className: cx("klun-diff__code", wrapCls), children: [
+          /* @__PURE__ */ jsx("span", { className: "klun-diff__sign", "aria-hidden": true, children: ln.type === "add" ? "+" : ln.type === "del" ? "-" : " " }),
+          ln.text
+        ] })
+      ] }),
+      comment ? /* @__PURE__ */ jsxs("tr", { className: "klun-diff__row klun-diff__row--comment", children: [
+        /* @__PURE__ */ jsx("td", { className: "klun-diff__gutter", colSpan: 2 }),
+        /* @__PURE__ */ jsx("td", { className: "klun-diff__comment", children: comment })
+      ] }) : null
+    ] }, i);
+  }) }) });
+  const renderSplit = () => {
+    const rows = toSplitRows(allLines);
+    return /* @__PURE__ */ jsx("table", { className: "klun-diff__table klun-diff__table--split", children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
+      if (row.kind === "hunk") {
+        return /* @__PURE__ */ jsx("tr", { className: "klun-diff__row klun-diff__row--hunk", children: /* @__PURE__ */ jsx("td", { className: "klun-diff__code", colSpan: 4, children: row.text }) }, i);
+      }
+      const { left, right } = row;
+      const cL = commentFor("old", left?.oldNo);
+      const cR = commentFor("new", right?.newNo);
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsxs("tr", { className: "klun-diff__row", children: [
+          /* @__PURE__ */ jsx("td", { className: "klun-diff__gutter", children: gutter("old", left?.oldNo) }),
+          /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cx(
+                "klun-diff__code",
+                wrapCls,
+                left && `klun-diff__code--${left.type}`,
+                !left && "klun-diff__code--empty"
+              ),
+              children: left?.text
+            }
+          ),
+          /* @__PURE__ */ jsx("td", { className: "klun-diff__gutter", children: gutter("new", right?.newNo) }),
+          /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cx(
+                "klun-diff__code",
+                wrapCls,
+                right && `klun-diff__code--${right.type}`,
+                !right && "klun-diff__code--empty"
+              ),
+              children: right?.text
+            }
+          )
+        ] }),
+        cL || cR ? /* @__PURE__ */ jsx("tr", { className: "klun-diff__row klun-diff__row--comment", children: /* @__PURE__ */ jsxs("td", { className: "klun-diff__comment", colSpan: 4, children: [
+          cL,
+          cR
+        ] }) }) : null
+      ] }, i);
+    }) }) });
+  };
+  const hasHeader = filename != null || additions != null || deletions != null || toolbar != null || collapsible;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(
+        "klun-diff",
+        `klun-diff--${mode}`,
+        dark && "klun-diff--dark",
+        className
+      ),
+      "data-language": language || void 0,
+      style,
+      ...props,
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs("div", { className: "klun-diff__header", children: [
+          collapsible ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "klun-diff__toggle",
+              "aria-expanded": !collapsed,
+              onClick: () => setCollapsed((c) => !c),
+              children: /* @__PURE__ */ jsx("i", { className: cx("ri-arrow-right-s-line", !collapsed && "klun-diff__toggle-icon--open"), "aria-hidden": true })
+            }
+          ) : null,
+          filename != null ? /* @__PURE__ */ jsx("span", { className: "klun-diff__filename", children: filename }) : null,
+          additions != null ? /* @__PURE__ */ jsxs("span", { className: "klun-diff__stat klun-diff__stat--add", children: [
+            "+",
+            additions
+          ] }) : null,
+          deletions != null ? /* @__PURE__ */ jsxs("span", { className: "klun-diff__stat klun-diff__stat--del", children: [
+            "\u2212",
+            deletions
+          ] }) : null,
+          toolbar != null ? /* @__PURE__ */ jsx("span", { className: "klun-diff__toolbar", children: toolbar }) : null
+        ] }) : null,
+        !collapsed ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "klun-diff__scroll",
+            style: { ["--klun-diff-max-height"]: `${maxHeight}px` },
+            children: mode === "unified" ? renderUnified() : renderSplit()
+          }
+        ) : null
+      ]
+    }
+  );
+});
+DiffViewer.displayName = "DiffViewer";
 var Kbd = forwardRef(function Kbd2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx("kbd", { ref, className: cx("klun-kbd", className), ...props, children });
 });
@@ -3107,202 +3673,33 @@ var Rating = forwardRef(function Rating2({ value = 0, max = 5, onChange, readOnl
   )) });
 });
 Rating.displayName = "Rating";
-function useTick(ms) {
-  const [, force] = useState(0);
-  useEffect(() => {
-    if (!ms) return;
-    const id = setInterval(() => force((n) => n + 1), ms);
-    return () => clearInterval(id);
-  }, [ms]);
-}
-var RelativeTime = forwardRef(function RelativeTime2({ date, locale, live = true, every = 6e4, absolute, className, ...props }, ref) {
-  useTick(live ? every : 0);
-  const rel = Format.relTime(date, { locale });
-  const title = Format.absTime(date, { locale });
-  return /* @__PURE__ */ jsx(
-    "time",
-    {
-      ref,
-      title: absolute ? rel : title,
-      className: cx("klun-relative-time", className),
-      ...props,
-      children: absolute ? title : rel
-    }
-  );
-});
-RelativeTime.displayName = "RelativeTime";
-function defaultFormat(cd) {
-  if (cd.expired) {
-    const d = Math.abs(cd.days);
-    return d >= 1 ? `Expired ${d}d ago` : "Expired";
-  }
-  if (cd.days >= 1) return `${cd.days}d ${cd.hours}h`;
-  if (cd.hours >= 1) return `${cd.hours}h ${cd.minutes}m`;
-  return `${cd.minutes}m`;
-}
-var ExpiryCountdown = forwardRef(
-  function ExpiryCountdown2({ date, warnDays = 7, every = 6e4, format, showIcon = true, className, ...props }, ref) {
-    useTick(every);
-    const c = Format.countdown(date);
-    const tone = c.expired ? "err" : c.days < warnDays ? "warn" : "ok";
-    const text = (format || defaultFormat)(c);
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        ref,
-        className: cx("klun-relative-time", `klun-relative-time--${tone}`, className),
-        ...props,
-        children: [
-          showIcon ? /* @__PURE__ */ jsx(
-            "i",
-            {
-              className: cx(
-                "klun-relative-time__icon",
-                c.expired ? "ri-time-line" : "ri-timer-line"
-              ),
-              "aria-hidden": true
-            }
-          ) : null,
-          text
-        ]
-      }
-    );
-  }
-);
-ExpiryCountdown.displayName = "ExpiryCountdown";
 var TREND_ICONS = {
   up: "ri-arrow-up-line",
   down: "ri-arrow-down-line",
-  flat: "ri-subtract-line"
-};
-var Statistic = forwardRef(function Statistic2({ label, value, prefix, suffix, precision, trend, trendValue, icon, size: sizeProp, className, ...props }, ref) {
-  const size = useSize(sizeProp);
-  const formatted = precision != null && typeof value === "number" ? value.toFixed(precision) : value;
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-statistic", `klun-statistic--${size}`, className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "klun-statistic__head", children: [
-      icon ? /* @__PURE__ */ jsx("span", { className: "klun-statistic__icon", children: icon }) : null,
-      /* @__PURE__ */ jsx("span", { className: "klun-statistic__label", children: label })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "klun-statistic__body", children: [
-      /* @__PURE__ */ jsxs("span", { className: "klun-statistic__value", children: [
-        prefix ? /* @__PURE__ */ jsx("span", { className: "klun-statistic__prefix", children: prefix }) : null,
-        formatted,
-        suffix ? /* @__PURE__ */ jsx("span", { className: "klun-statistic__suffix", children: suffix }) : null
-      ] }),
-      trend ? /* @__PURE__ */ jsxs("span", { className: cx("klun-statistic__trend", `klun-statistic__trend--${trend}`), children: [
-        /* @__PURE__ */ jsx("i", { className: TREND_ICONS[trend] }),
-        trendValue
-      ] }) : null
-    ] })
-  ] });
-});
-Statistic.displayName = "Statistic";
-var TONE_COLOR = {
-  ok: "green",
-  warn: "orange",
-  err: "red",
-  info: "blue",
-  neutral: "gray",
-  busy: "blue"
-};
-var STATUS_TONE = {
-  // success / live
-  running: "ok",
-  active: "ok",
-  online: "ok",
-  ready: "ok",
-  healthy: "ok",
-  completed: "ok",
-  succeeded: "ok",
-  success: "ok",
-  verified: "ok",
-  paid: "ok",
-  connected: "ok",
-  enabled: "ok",
-  // neutral / idle
-  stopped: "neutral",
-  inactive: "neutral",
-  offline: "neutral",
-  disabled: "neutral",
-  draft: "neutral",
-  archived: "neutral",
-  unknown: "neutral",
-  default: "neutral",
-  closed: "neutral",
-  // busy / in-progress (information)
-  pending: "busy",
-  creating: "busy",
-  provisioning: "busy",
-  starting: "busy",
-  stopping: "busy",
-  rebooting: "busy",
-  deploying: "busy",
-  processing: "busy",
-  queued: "busy",
-  migrating: "busy",
-  // warning
-  suspended: "warn",
-  paused: "warn",
-  degraded: "warn",
-  expiring: "warn",
-  warning: "warn",
-  "action-required": "warn",
-  overdue: "warn",
-  locked: "warn",
-  // error
-  failed: "err",
-  error: "err",
-  expired: "err",
-  terminated: "err",
-  destroyed: "err",
-  rejected: "err",
-  cancelled: "err",
-  canceled: "err",
-  offline_error: "err",
-  unpaid: "err"
-};
-function keyOf(s) {
-  return String(s == null ? "" : s).trim().toLowerCase().replace(/\s+/g, "-").replace(/_/g, "_");
-}
-function StatusBadge({
-  status,
-  label,
-  tone,
-  map,
-  dot = true,
-  variant = "light",
-  size = "medium",
-  pulse = false,
-  className,
-  ...props
-}) {
-  const k2 = keyOf(status);
-  const resolvedTone = tone || map && map[k2] || STATUS_TONE[k2] || "neutral";
-  const color = TONE_COLOR[resolvedTone] || "gray";
-  const text = label != null ? label : String(status == null ? "" : status).replace(/[-_]/g, " ");
-  const display = typeof text === "string" ? text.charAt(0).toUpperCase() + text.slice(1) : text;
-  return /* @__PURE__ */ jsxs(
-    Badge,
-    {
-      color,
-      variant,
-      size,
-      dot: dot && !pulse,
-      className: cx("klun-status-badge", className),
-      ...props,
-      children: [
-        pulse ? /* @__PURE__ */ jsxs("span", { className: "klun-status-badge__ping", children: [
-          /* @__PURE__ */ jsx("span", { className: "klun-status-badge__ping-wave" }),
-          /* @__PURE__ */ jsx("span", { className: "klun-status-badge__ping-core" })
-        ] }) : null,
-        display
-      ]
-    }
-  );
-}
-StatusBadge.displayName = "StatusBadge";
-StatusBadge.STATUS_TONE = STATUS_TONE;
-StatusBadge.TONE_COLOR = TONE_COLOR;
+  flat: "ri-subtract-line"
+};
+var Statistic = forwardRef(function Statistic2({ label, value, prefix, suffix, precision, trend, trendValue, icon, size: sizeProp, className, ...props }, ref) {
+  const size = useSize(sizeProp);
+  const formatted = precision != null && typeof value === "number" ? value.toFixed(precision) : value;
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-statistic", `klun-statistic--${size}`, className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "klun-statistic__head", children: [
+      icon ? /* @__PURE__ */ jsx("span", { className: "klun-statistic__icon", children: icon }) : null,
+      /* @__PURE__ */ jsx("span", { className: "klun-statistic__label", children: label })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "klun-statistic__body", children: [
+      /* @__PURE__ */ jsxs("span", { className: "klun-statistic__value", children: [
+        prefix ? /* @__PURE__ */ jsx("span", { className: "klun-statistic__prefix", children: prefix }) : null,
+        formatted,
+        suffix ? /* @__PURE__ */ jsx("span", { className: "klun-statistic__suffix", children: suffix }) : null
+      ] }),
+      trend ? /* @__PURE__ */ jsxs("span", { className: cx("klun-statistic__trend", `klun-statistic__trend--${trend}`), children: [
+        /* @__PURE__ */ jsx("i", { className: TREND_ICONS[trend] }),
+        trendValue
+      ] }) : null
+    ] })
+  ] });
+});
+Statistic.displayName = "Statistic";
 var SIZES2 = { xs: 6, sm: 8, md: 10, lg: 12 };
 var StatusDot = forwardRef(function StatusDot2({ tone = "neutral", size = "sm", pulse = false, label, className, style, ...props }, ref) {
   const sizeStyle = { ["--klun-status-dot-size"]: `${SIZES2[size] ?? SIZES2.sm}px` };
@@ -4917,9 +5314,14 @@ 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);
@@ -4932,10 +5334,70 @@ var Tooltip = forwardRef(function Tooltip2({ content, side = "top", delay = 200,
   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,
+      ref: setRefs,
       className: cx("klun-tooltip", className),
       onMouseEnter: show,
       onMouseLeave: hide,
@@ -4943,7 +5405,19 @@ var Tooltip = forwardRef(function Tooltip2({ content, side = "top", delay = 200,
       onBlur: hide,
       children: [
         children,
-        open ? /* @__PURE__ */ jsx("span", { role: "tooltip", className: cx("klun-tooltip__bubble", `klun-tooltip__bubble--${side}`), style, children: content }) : null
+        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
       ]
     }
   );
@@ -5561,23 +6035,6 @@ var SegmentedProgress = forwardRef(
   }
 );
 SegmentedProgress.displayName = "SegmentedProgress";
-var Skeleton = forwardRef(function Skeleton2({ width = "100%", height = 16, circle = false, className, style, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      "aria-hidden": true,
-      className: cx("klun-skeleton", circle && "klun-skeleton--circle", className),
-      style: {
-        ["--klun-skeleton-width"]: typeof width === "number" ? `${width}px` : width,
-        ["--klun-skeleton-height"]: typeof height === "number" ? `${height}px` : height,
-        ...style
-      },
-      ...props
-    }
-  );
-});
-Skeleton.displayName = "Skeleton";
 var Toast = forwardRef(function Toast2({ status = "success", icon, title, action, onClose, rich = false, className, children, ...props }, ref) {
   const { toast: toast2 } = useLocale();
   return /* @__PURE__ */ jsxs(
@@ -6465,7 +6922,10 @@ function useSelect({ children, value, defaultValue, disabled, rootRef }) {
   useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
-      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+      const t = e.target;
+      if (rootRef.current && rootRef.current.contains(t)) return;
+      if (t instanceof Element && t.closest(".klun-select-listbox")) return;
+      setOpen(false);
     };
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
@@ -6577,13 +7037,58 @@ function SelectListbox({
   active,
   onActivate,
   onPick,
-  className
+  className,
+  anchorRef
 }) {
-  return /* @__PURE__ */ jsx(
+  const portal = !!anchorRef && typeof document !== "undefined";
+  const panelRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    if (!portal) return;
+    const anchor = anchorRef.current;
+    const panel = panelRef.current;
+    if (!anchor || !panel) return;
+    const place2 = () => {
+      const a = anchor.getBoundingClientRect();
+      const gap = 6;
+      const margin = 8;
+      const ph = panel.offsetHeight;
+      const pw = panel.offsetWidth;
+      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 = a.left;
+      if (left + pw > window.innerWidth - margin) {
+        left = Math.max(margin, window.innerWidth - margin - pw);
+      }
+      if (left < margin) left = margin;
+      setPos({ left, top, minWidth: a.width });
+    };
+    place2();
+    window.addEventListener("scroll", place2, true);
+    window.addEventListener("resize", place2);
+    return () => {
+      window.removeEventListener("scroll", place2, true);
+      window.removeEventListener("resize", place2);
+    };
+  }, [portal, anchorRef, options.length]);
+  const initMinWidth = portal ? anchorRef.current?.offsetWidth : void 0;
+  const portalStyle = portal ? {
+    position: "fixed",
+    left: pos?.left ?? 0,
+    top: pos?.top ?? 0,
+    minWidth: pos?.minWidth ?? initMinWidth,
+    zIndex: 1150,
+    // keep hidden until measured to avoid a flash at the corner
+    visibility: pos ? "visible" : "hidden"
+  } : void 0;
+  const node = /* @__PURE__ */ jsx(
     "div",
     {
+      ref: panelRef,
       role: "listbox",
       className: className ? `klun-select-listbox ${className}` : "klun-select-listbox",
+      style: portalStyle,
       children: options.map((o, i) => /* @__PURE__ */ jsxs(
         "button",
         {
@@ -6624,6 +7129,7 @@ function SelectListbox({
       ))
     }
   );
+  return portal ? createPortal(node, document.body) : node;
 }
 var CompactSelect = forwardRef(
   function CompactSelect2({
@@ -6716,12 +7222,12 @@ var CompactSelect = forwardRef(
           s.open ? /* @__PURE__ */ jsx(
             SelectListbox,
             {
+              anchorRef: s.triggerRef,
               options: s.options,
               current: s.current,
               active: s.active,
               onActivate: s.setActive,
-              onPick: s.pick,
-              className: s.placement === "up" ? "klun-select-listbox--up" : void 0
+              onPick: s.pick
             }
           ) : null
         ]
@@ -6813,12 +7319,12 @@ var CompactSelectForInput = forwardRef(function CompactSelectForInput2({
         s.open ? /* @__PURE__ */ jsx(
           SelectListbox,
           {
+            anchorRef: s.triggerRef,
             options: s.options,
             current: s.current,
             active: s.active,
             onActivate: s.setActive,
-            onPick: s.pick,
-            className: s.placement === "up" ? "klun-select-listbox--up" : void 0
+            onPick: s.pick
           }
         ) : null
       ]
@@ -6980,31 +7486,83 @@ var Input = forwardRef(function Input2({
 Input.displayName = "Input";
 var Popover = forwardRef(function Popover2({ trigger, children, align = "left", width = 280, className, ...props }, ref) {
   const [open, setOpen] = useState(false);
-  const innerRef = useRef(null);
+  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) => {
-      if (innerRef.current && !innerRef.current.contains(e.target)) setOpen(false);
+      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) => {
-    innerRef.current = 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 }),
-    open ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "dialog",
-        className: cx("klun-popover__panel", `klun-popover__panel--${align}`),
-        style: { width },
-        children: typeof children === "function" ? children(() => setOpen(false)) : children
-      }
-    ) : null
+    portal ? panel && createPortal(panel, document.body) : panel
   ] });
 });
 Popover.displayName = "Popover";
@@ -8114,12 +8672,12 @@ var InlineSelect = forwardRef(
           s.open ? /* @__PURE__ */ jsx(
             SelectListbox,
             {
+              anchorRef: s.triggerRef,
               options: s.options,
               current: s.current,
               active: s.active,
               onActivate: s.setActive,
-              onPick: s.pick,
-              className: s.placement === "up" ? "klun-select-listbox--up" : void 0
+              onPick: s.pick
             }
           ) : null
         ]
@@ -8461,12 +9019,12 @@ var Select = forwardRef(function Select2({
     s.open ? /* @__PURE__ */ jsx(
       SelectListbox,
       {
+        anchorRef: s.triggerRef,
         options: s.options,
         current: s.current,
         active: s.active,
         onActivate: s.setActive,
-        onPick: s.pick,
-        className: s.placement === "up" ? "klun-select-listbox--up" : void 0
+        onPick: s.pick
       }
     ) : null
   ] });
@@ -9106,9 +9664,9 @@ function Masonry({
   );
 }
 Masonry.displayName = "Masonry";
-var GAP = { none: 0, xs: 4, sm: 8, md: 12, lg: 16, xl: 24, "2xl": 32 };
+var GAP2 = { none: 0, xs: 4, sm: 8, md: 12, lg: 16, xl: 24, "2xl": 32 };
 function resolveGap(g) {
-  return typeof g === "number" ? g : GAP[g] ?? GAP.md;
+  return typeof g === "number" ? g : GAP2[g] ?? GAP2.md;
 }
 var Space = forwardRef(function Space2({ direction = "row", size = "md", align, justify, wrap = true, split, children, className, style, ...props }, ref) {
   const gap = resolveGap(size);
@@ -9475,6 +10033,108 @@ var Breadcrumb = forwardRef(function Breadcrumb2({ items: items2 = [], className
   }) });
 });
 Breadcrumb.displayName = "Breadcrumb";
+var Tabs = forwardRef(function Tabs2({ items: items2 = [], value, onChange, variant = "underline", className, ...props }, ref) {
+  const active = value ?? items2[0]?.value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      className: cx("klun-tabs", `klun-tabs--${variant}`, className),
+      ...props,
+      children: items2.map((it) => {
+        const on = it.value === active;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": on,
+            "data-active": on ? "true" : void 0,
+            onClick: () => onChange?.(it.value),
+            className: "klun-tabs__tab",
+            children: [
+              it.icon ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__icon", children: it.icon }) : null,
+              it.label,
+              it.badge != null ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__badge", children: it.badge }) : null
+            ]
+          },
+          it.value
+        );
+      })
+    }
+  );
+});
+Tabs.displayName = "Tabs";
+var PageHeader = forwardRef(function PageHeader2({
+  title,
+  avatar,
+  tags,
+  subtitle,
+  breadcrumb,
+  onBack,
+  extra,
+  tabs,
+  activeTab,
+  onTabChange,
+  sticky = false,
+  bordered = true,
+  className,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cx(
+        "klun-page-header",
+        sticky && "klun-page-header--sticky",
+        bordered && "klun-page-header--bordered",
+        className
+      ),
+      ...props,
+      children: [
+        breadcrumb ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__breadcrumb", children: breadcrumb }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "klun-page-header__bar", children: [
+          onBack ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              appearance: "ghost",
+              variant: "neutral",
+              size: "small",
+              "aria-label": "Back",
+              className: "klun-page-header__back",
+              icon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-line", "aria-hidden": true }),
+              onClick: onBack
+            }
+          ) : null,
+          avatar ? /* @__PURE__ */ jsx("span", { className: "klun-page-header__avatar", children: avatar }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "klun-page-header__heading", children: [
+            /* @__PURE__ */ jsxs("div", { className: "klun-page-header__title-row", children: [
+              /* @__PURE__ */ jsx("h1", { className: "klun-page-header__title", children: title }),
+              tags ? /* @__PURE__ */ jsx("span", { className: "klun-page-header__tags", children: tags }) : null
+            ] }),
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__subtitle", children: subtitle }) : null
+          ] }),
+          extra ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__extra", children: extra }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__content", children }) : null,
+        tabs && tabs.length ? /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            className: "klun-page-header__tabs",
+            items: tabs.map((t) => ({ value: t.key, label: t.label })),
+            value: activeTab,
+            onChange: onTabChange
+          }
+        ) : null
+      ]
+    }
+  );
+});
+PageHeader.displayName = "PageHeader";
 var Divider = forwardRef(function Divider2({ variant = "line", className, children, ...props }, ref) {
   if (variant !== "line" && children != null) {
     return /* @__PURE__ */ jsxs(
@@ -9716,39 +10376,6 @@ var StepIndicator = forwardRef(function StepIndicator2({ steps = [], current = 0
   }) });
 });
 StepIndicator.displayName = "StepIndicator";
-var Tabs = forwardRef(function Tabs2({ items: items2 = [], value, onChange, variant = "underline", className, ...props }, ref) {
-  const active = value ?? items2[0]?.value;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      role: "tablist",
-      className: cx("klun-tabs", `klun-tabs--${variant}`, className),
-      ...props,
-      children: items2.map((it) => {
-        const on = it.value === active;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": on,
-            "data-active": on ? "true" : void 0,
-            onClick: () => onChange?.(it.value),
-            className: "klun-tabs__tab",
-            children: [
-              it.icon ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__icon", children: it.icon }) : null,
-              it.label,
-              it.badge != null ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__badge", children: it.badge }) : null
-            ]
-          },
-          it.value
-        );
-      })
-    }
-  );
-});
-Tabs.displayName = "Tabs";
 var Wizard = forwardRef(function Wizard2({
   steps = [],
   current,
@@ -10045,7 +10672,7 @@ function Confirm(opts = {}) {
 }
 var isSelectable = (it) => !it.divider && !it.disabled;
 var hasChildren = (it) => !!it.children && it.children.length > 0;
-var GAP2 = 8;
+var GAP3 = 8;
 function place(w, h, opts) {
   const vw = window.innerWidth;
   const vh = window.innerHeight;
@@ -10053,15 +10680,15 @@ function place(w, h, opts) {
   let top;
   if (opts.rect) {
     const r = opts.rect;
-    left = r.right - 4 + w > vw - GAP2 ? r.left - w + 4 : r.right - 4;
+    left = r.right - 4 + w > vw - GAP3 ? r.left - w + 4 : r.right - 4;
     top = r.top - 4;
   } else {
     const p = opts.point ?? { x: 0, y: 0 };
-    left = p.x + w > vw - GAP2 ? p.x - w : p.x;
-    top = p.y + h > vh - GAP2 ? p.y - h : p.y;
+    left = p.x + w > vw - GAP3 ? p.x - w : p.x;
+    top = p.y + h > vh - GAP3 ? p.y - h : p.y;
   }
-  left = Math.min(Math.max(GAP2, left), vw - w - GAP2);
-  top = Math.min(Math.max(GAP2, top), vh - h - GAP2);
+  left = Math.min(Math.max(GAP3, left), vw - w - GAP3);
+  top = Math.min(Math.max(GAP3, top), vh - h - GAP3);
   return { left, top };
 }
 function MenuPanel({ items: items2, width, className, point, anchorEl, autoActive, depth, onCloseAll, onCloseSelf }) {
@@ -10661,8 +11288,8 @@ var Modal = forwardRef(function Modal2({
   );
 });
 Modal.displayName = "Modal";
-var GAP3 = 8;
-var MARGIN = 8;
+var GAP4 = 8;
+var MARGIN2 = 8;
 var Popconfirm = forwardRef(function Popconfirm2({
   title: titleProp,
   description,
@@ -10723,23 +11350,23 @@ var Popconfirm = forwardRef(function Popconfirm2({
       let left;
       switch (placement) {
         case "bottom":
-          top = tr.bottom + GAP3;
+          top = tr.bottom + GAP4;
           left = tr.left + tr.width / 2 - bw / 2;
           break;
         case "left":
-          left = tr.left - bw - GAP3;
+          left = tr.left - bw - GAP4;
           top = tr.top + tr.height / 2 - bh / 2;
           break;
         case "right":
-          left = tr.right + GAP3;
+          left = tr.right + GAP4;
           top = tr.top + tr.height / 2 - bh / 2;
           break;
         default:
-          top = tr.top - bh - GAP3;
+          top = tr.top - bh - GAP4;
           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));
+      left = Math.max(MARGIN2, Math.min(left, vw - bw - MARGIN2));
+      top = Math.max(MARGIN2, Math.min(top, vh - bh - MARGIN2));
       setPos({ top, left });
     };
     place2();
@@ -10835,6 +11462,6 @@ var Popconfirm = forwardRef(function Popconfirm2({
 });
 Popconfirm.displayName = "Popconfirm";
 
-export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, 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, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-VATUPFE3.js.map
-//# sourceMappingURL=chunk-VATUPFE3.js.map
+export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, 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, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, 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, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, 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-NYIPE2T7.js.map
+//# sourceMappingURL=chunk-NYIPE2T7.js.map