@hxdhxd/harmony-flow-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,3200 @@
+// src/theme/tokens.ts
+var defaultTheme = {
+  colorPrimary: "#0a7cff",
+  colorPrimaryHover: "#006fe8",
+  colorBackground: "#f5faff",
+  colorSurface: "#ffffff",
+  colorText: "#142033",
+  colorTextMuted: "#66758c",
+  colorBorder: "#dce9f7",
+  radiusMd: "14px",
+  radiusLg: "24px",
+  shadowElevated: "0 18px 48px rgba(41, 106, 168, 0.16)",
+  motionDuration: "180ms"
+};
+var darkTheme = { ...defaultTheme, colorPrimary: "#58a9ff", colorPrimaryHover: "#7cbbff", colorBackground: "#0d1724", colorSurface: "#152337", colorText: "#f4f8fc", colorTextMuted: "#a9bad0", colorBorder: "#30445b", shadowElevated: "0 20px 54px rgba(0,0,0,.46)" };
+var highContrastTheme = { ...defaultTheme, colorPrimary: "#005fcc", colorPrimaryHover: "#004a9f", colorBackground: "#ffffff", colorSurface: "#ffffff", colorText: "#000000", colorTextMuted: "#303030", colorBorder: "#000000", shadowElevated: "0 0 0 2px #000000", motionDuration: "0ms" };
+var tokenVariables = {
+  colorPrimary: "--hf-color-primary",
+  colorPrimaryHover: "--hf-color-primary-hover",
+  colorBackground: "--hf-color-background",
+  colorSurface: "--hf-color-surface",
+  colorText: "--hf-color-text",
+  colorTextMuted: "--hf-color-text-muted",
+  colorBorder: "--hf-color-border",
+  radiusMd: "--hf-radius-md",
+  radiusLg: "--hf-radius-lg",
+  shadowElevated: "--hf-shadow-elevated",
+  motionDuration: "--hf-motion-duration"
+};
+function tokensToStyle(tokens) {
+  return Object.fromEntries(
+    Object.entries(tokens).map(([key, value]) => [tokenVariables[key], value])
+  );
+}
+
+// src/theme/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function ThemeProvider({ children, tokens, mode = "light", className = "", style, ...props }) {
+  const mergedTokens = { ...mode === "dark" ? darkTheme : mode === "high-contrast" ? highContrastTheme : defaultTheme, ...tokens };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `hf-theme hf-theme--${mode} ${className}`.trim(),
+      style: { ...tokensToStyle(mergedTokens), ...style },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({ children, className = "", variant = "primary", size = "md", shape = "pill", fullWidth = false, loading = false, leadingIcon, trailingIcon, iconOnly = false, disabled, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      className: `hf-button hf-button--${variant} hf-button--${size} hf-button--${shape} ${fullWidth ? "hf-button--full" : ""} ${iconOnly ? "hf-button--icon" : ""} ${className}`.trim(),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx2("span", { className: "hf-spinner", "aria-hidden": "true" }) : leadingIcon,
+        !iconOnly && /* @__PURE__ */ jsx2("span", { children: loading ? "\u5904\u7406\u4E2D" : children }),
+        !loading && trailingIcon
+      ]
+    }
+  );
+});
+
+// src/components/SplitButton.tsx
+import { useState } from "react";
+
+// src/foundations/Icon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var paths = {
+  check: "M5 12.5 9.2 17 19 7",
+  close: "m7 7 10 10M17 7 7 17",
+  info: "M12 11v6M12 7.5h.01",
+  warning: "M12 4 3.5 19h17L12 4Zm0 5v4.5m0 2.5h.01",
+  error: "M8 8l8 8m0-8-8 8",
+  search: "m20 20-4.5-4.5m2.5-4A7 7 0 1 1 4 11a7 7 0 0 1 14 0Z",
+  "chevron-down": "m7 10 5 5 5-5",
+  "arrow-right": "M5 12h14m-5-5 5 5-5 5",
+  user: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7 8a7 7 0 0 0-14 0",
+  inbox: "M4 5h16v13H4V5Zm0 9h4l2 2h4l2-2h4"
+};
+function Icon({ name, size = 20, label, className = "", ...props }) {
+  return /* @__PURE__ */ jsx3("svg", { className: `hf-icon ${className}`, width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : true, ...props, children: /* @__PURE__ */ jsx3("path", { d: paths[name] }) });
+}
+
+// src/overlays/useOverlay.ts
+import { useEffect, useRef } from "react";
+var focusableSelector = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+var layerStack = [];
+var scrollLockCount = 0;
+var previousBodyOverflow = "";
+function isTopLayer(id) {
+  return layerStack.at(-1)?.id === id;
+}
+function addLayer(id) {
+  layerStack.push({ id });
+}
+function removeLayer(id) {
+  const index = layerStack.findIndex((layer) => layer.id === id);
+  if (index >= 0) layerStack.splice(index, 1);
+}
+function lockBodyScroll() {
+  if (scrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  scrollLockCount += 1;
+}
+function unlockBodyScroll() {
+  scrollLockCount = Math.max(0, scrollLockCount - 1);
+  if (scrollLockCount === 0) document.body.style.overflow = previousBodyOverflow;
+}
+function focusInitialElement(root) {
+  const target = root.querySelector("[data-autofocus], [autofocus]") ?? root.querySelector(focusableSelector) ?? root;
+  target.focus();
+}
+function trapTabKey(event, root) {
+  const nodes = [...root.querySelectorAll(focusableSelector)].filter((node) => !node.hasAttribute("disabled") && node.getAttribute("aria-hidden") !== "true");
+  if (!nodes.length) {
+    event.preventDefault();
+    root.focus();
+    return;
+  }
+  const first = nodes[0];
+  const last = nodes[nodes.length - 1];
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+function useDismissibleLayer(open, onClose, modalOrOptions = false) {
+  const ref = useRef(null);
+  const idRef = useRef(/* @__PURE__ */ Symbol("dismissible-layer"));
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  const options = typeof modalOrOptions === "boolean" ? { modal: modalOrOptions } : modalOrOptions;
+  const modal = options.modal ?? false;
+  const closeOnOutside = options.closeOnOutside ?? !modal;
+  const trapFocus = options.trapFocus ?? modal;
+  const lockScroll = options.lockScroll ?? modal;
+  const autoFocus = options.autoFocus ?? true;
+  const restoreFocus = options.restoreFocus ?? true;
+  useEffect(() => {
+    if (!open) return void 0;
+    const id = idRef.current;
+    const previousFocus = document.activeElement;
+    addLayer(id);
+    if (lockScroll) lockBodyScroll();
+    const handlePointerDown = (event) => {
+      if (!isTopLayer(id) || !closeOnOutside) return;
+      if (!ref.current?.contains(event.target)) closeRef.current();
+    };
+    const handleKeyDown = (event) => {
+      if (!isTopLayer(id)) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        closeRef.current();
+      } else if (event.key === "Tab" && trapFocus && ref.current) {
+        trapTabKey(event, ref.current);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown, true);
+    const animationFrame = autoFocus ? requestAnimationFrame(() => ref.current && focusInitialElement(ref.current)) : void 0;
+    return () => {
+      if (animationFrame !== void 0) cancelAnimationFrame(animationFrame);
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown, true);
+      removeLayer(id);
+      if (lockScroll) unlockBodyScroll();
+      if (restoreFocus && previousFocus?.isConnected) previousFocus.focus();
+    };
+  }, [autoFocus, closeOnOutside, lockScroll, modal, open, restoreFocus, trapFocus]);
+  return ref;
+}
+
+// src/components/SplitButton.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function SplitButton({ label, options, onPrimaryAction, onOptionSelect, variant = "primary", size = "md", disabled }) {
+  const [open, setOpen] = useState(false);
+  const ref = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  return /* @__PURE__ */ jsxs2("div", { className: "hf-split-button", ref, children: [
+    /* @__PURE__ */ jsx4(Button, { variant, size, shape: "rounded", disabled, onClick: onPrimaryAction, children: label }),
+    /* @__PURE__ */ jsx4(Button, { variant, size, shape: "rounded", disabled, iconOnly: true, leadingIcon: /* @__PURE__ */ jsx4(Icon, { name: "chevron-down", size: 16 }), "aria-label": "\u66F4\u591A\u64CD\u4F5C", "aria-expanded": open, onClick: () => setOpen(!open) }),
+    open && /* @__PURE__ */ jsx4("div", { className: "hf-split-button__menu", role: "menu", children: options.map((option) => /* @__PURE__ */ jsx4("button", { role: "menuitem", type: "button", disabled: option.disabled, className: option.danger ? "is-danger" : "", onClick: () => {
+      onOptionSelect(option.key);
+      setOpen(false);
+    }, children: option.label }, option.key)) })
+  ] });
+}
+
+// src/components/Input.tsx
+import { forwardRef as forwardRef2, useId } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Input = forwardRef2(function Input2({ className = "", id, label, hint, error, prefix, disabled, ...props }, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const descriptionId = `${inputId}-description`;
+  return /* @__PURE__ */ jsxs3("label", { className: `hf-field ${className}`.trim(), htmlFor: inputId, children: [
+    label && /* @__PURE__ */ jsx5("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsxs3("span", { className: `hf-input-shell ${error ? "hf-input-shell--error" : ""}`, children: [
+      prefix && /* @__PURE__ */ jsx5("span", { className: "hf-input-shell__prefix", "aria-hidden": "true", children: prefix }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref,
+          id: inputId,
+          className: "hf-input",
+          disabled,
+          "aria-invalid": Boolean(error),
+          "aria-describedby": hint || error ? descriptionId : void 0,
+          ...props
+        }
+      )
+    ] }),
+    (error || hint) && /* @__PURE__ */ jsx5("span", { id: descriptionId, className: `hf-field__hint ${error ? "hf-field__hint--error" : ""}`, children: error ?? hint })
+  ] });
+});
+
+// src/components/Switch.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var Switch = forwardRef3(function Switch2({ label, className = "", ...props }, ref) {
+  return /* @__PURE__ */ jsxs4("label", { className: `hf-switch ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx6("input", { ref, className: "hf-switch__input", type: "checkbox", role: "switch", ...props }),
+    /* @__PURE__ */ jsx6("span", { className: "hf-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("span", { className: "hf-switch__thumb" }) }),
+    /* @__PURE__ */ jsx6("span", { className: "hf-switch__label", children: label })
+  ] });
+});
+
+// src/components/SegmentedControl.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function SegmentedControl({ label, options, value, onChange, className = "" }) {
+  const name = useId2();
+  return /* @__PURE__ */ jsxs5("fieldset", { className: `hf-segmented ${className}`.trim(), "aria-label": label, children: [
+    /* @__PURE__ */ jsx7("legend", { className: "hf-sr-only", children: label }),
+    options.map((option) => /* @__PURE__ */ jsxs5("label", { className: "hf-segmented__option", children: [
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: option.value,
+          checked: value === option.value,
+          onChange: () => onChange(option.value)
+        }
+      ),
+      /* @__PURE__ */ jsx7("span", { children: option.label })
+    ] }, option.value))
+  ] });
+}
+
+// src/components/Card.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function Card({ children, title, eyebrow, action, interactive = false, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs6("article", { className: `hf-card ${interactive ? "hf-card--interactive" : ""} ${className}`.trim(), ...props, children: [
+    (eyebrow || title || action) && /* @__PURE__ */ jsxs6("header", { className: "hf-card__header", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        eyebrow && /* @__PURE__ */ jsx8("p", { className: "hf-card__eyebrow", children: eyebrow }),
+        title && /* @__PURE__ */ jsx8("h3", { className: "hf-card__title", children: title })
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "hf-card__body", children })
+  ] });
+}
+
+// src/components/Modal.tsx
+import { useId as useId3 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function Modal({ open, title, children, onClose, footer }) {
+  const titleId = useId3();
+  const dialogRef = useDismissibleLayer(open, onClose, true);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx9("div", { className: "hf-modal-backdrop", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs7("div", { ref: dialogRef, className: "hf-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [
+      /* @__PURE__ */ jsxs7("header", { className: "hf-modal__header", children: [
+        /* @__PURE__ */ jsx9("h2", { id: titleId, children: title }),
+        /* @__PURE__ */ jsx9(Button, { variant: "quiet", size: "sm", onClick: onClose, "aria-label": "\u5173\u95ED\u5F39\u7A97", children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "hf-modal__body", children }),
+      footer && /* @__PURE__ */ jsx9("footer", { className: "hf-modal__footer", children: footer })
+    ] }) }),
+    document.body
+  );
+}
+
+// src/components/Toast.tsx
+import { useEffect as useEffect2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function Toast({ open, message, tone = "info", duration = 2600, onClose }) {
+  useEffect2(() => {
+    if (!open || duration <= 0) return;
+    const timer = window.setTimeout(onClose, duration);
+    return () => window.clearTimeout(timer);
+  }, [duration, onClose, open]);
+  if (!open) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsxs8("div", { className: `hf-toast hf-toast--${tone}`, role: tone === "error" ? "alert" : "status", children: [
+      /* @__PURE__ */ jsx10("span", { className: "hf-toast__mark", "aria-hidden": "true" }),
+      message
+    ] }),
+    document.body
+  );
+}
+
+// src/components/Content.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function Divider({ orientation = "horizontal", label, className = "" }) {
+  return /* @__PURE__ */ jsx11("div", { className: `hf-divider hf-divider--${orientation}${label ? " hf-divider--labelled" : ""} ${className}`, role: "separator", "aria-orientation": orientation, children: label && /* @__PURE__ */ jsx11("span", { children: label }) });
+}
+function Link({ external, className = "", children, ...props }) {
+  return /* @__PURE__ */ jsxs9("a", { className: `hf-link ${className}`, target: external ? "_blank" : props.target, rel: external ? "noreferrer" : props.rel, ...props, children: [
+    children,
+    external && /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\u2197" })
+  ] });
+}
+function Badge({ tone = "neutral", dot, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs9("span", { className: `hf-badge hf-tone--${tone} ${className}`, ...props, children: [
+    dot && /* @__PURE__ */ jsx11("i", { "aria-hidden": "true" }),
+    props.children
+  ] });
+}
+function Tag({ tone = "neutral", onRemove, removeLabel = "\u79FB\u9664\u6807\u7B7E", className = "", children, ...props }) {
+  return /* @__PURE__ */ jsxs9("span", { className: `hf-tag hf-tone--${tone} ${className}`, ...props, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ jsx11(Icon, { name: "close", size: 14 }) })
+  ] });
+}
+function Avatar({ src, name, alt = "", size = "md", status, className = "" }) {
+  const initials = name.trim().split(/\s+/).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
+  return /* @__PURE__ */ jsxs9("span", { className: `hf-avatar hf-avatar--${size} ${className}`, title: name, children: [
+    src ? /* @__PURE__ */ jsx11("img", { src, alt: alt || name }) : /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: initials }),
+    status && /* @__PURE__ */ jsx11("i", { className: `hf-avatar__status hf-avatar__status--${status}`, "aria-label": { online: "\u5728\u7EBF", busy: "\u5FD9\u788C", away: "\u79BB\u5F00" }[status] })
+  ] });
+}
+
+// src/components/Accordion.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function Accordion({ items, value, defaultValue = [], onChange, multiple = false }) {
+  const [inner, setInner] = useState2([...defaultValue]);
+  const active = value ? [...value] : inner;
+  const toggle = (key) => {
+    const next = active.includes(key) ? active.filter((item) => item !== key) : multiple ? [...active, key] : [key];
+    if (!value) setInner(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsx12("div", { className: "hf-accordion", children: items.map((item) => {
+    const open = active.includes(item.key);
+    return /* @__PURE__ */ jsxs10("section", { className: open ? "is-open" : "", children: [
+      /* @__PURE__ */ jsx12("h3", { children: /* @__PURE__ */ jsxs10("button", { type: "button", "aria-expanded": open, disabled: item.disabled, onClick: () => toggle(item.key), children: [
+        /* @__PURE__ */ jsx12("span", { children: item.title }),
+        /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: "\u2304" })
+      ] }) }),
+      open && /* @__PURE__ */ jsx12("div", { className: "hf-accordion__panel", children: item.content })
+    ] }, item.key);
+  }) });
+}
+
+// src/components/Dropdown.tsx
+import { cloneElement, useState as useState3 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Dropdown({ trigger, items, onSelect, placement = "left", label = "\u64CD\u4F5C\u83DC\u5355" }) {
+  const [open, setOpen] = useState3(false);
+  const root = useDismissibleLayer(open, () => setOpen(false));
+  return /* @__PURE__ */ jsxs11("span", { className: "hf-dropdown", ref: root, children: [
+    cloneElement(trigger, { onClick: () => setOpen((value) => !value), "aria-expanded": open, "aria-haspopup": "menu" }),
+    open && /* @__PURE__ */ jsx13("div", { className: `hf-dropdown__menu hf-dropdown__menu--${placement}`, role: "menu", "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsxs11("button", { type: "button", role: "menuitem", className: `${item.danger ? "is-danger" : ""}${item.separatorBefore ? " has-separator" : ""}`, disabled: item.disabled, onClick: () => {
+      onSelect(item.key);
+      setOpen(false);
+    }, children: [
+      item.icon,
+      /* @__PURE__ */ jsxs11("span", { children: [
+        /* @__PURE__ */ jsx13("strong", { children: item.label }),
+        item.description && /* @__PURE__ */ jsx13("small", { children: item.description })
+      ] })
+    ] }, item.key)) })
+  ] });
+}
+
+// src/components/IconButton.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var IconButton = forwardRef4(function IconButton2({ label, icon, variant = "quiet", size = "md", className = "", ...props }, ref) {
+  return /* @__PURE__ */ jsx14("button", { ref, className: `hf-button hf-button--${variant} hf-button--${size} hf-button--square hf-button--icon ${className}`.trim(), "aria-label": label, title: label, ...props, children: icon });
+});
+
+// src/components/AdvancedUtility.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function ButtonGroup({ children, orientation = "horizontal", attached = true, className = "", ...props }) {
+  return /* @__PURE__ */ jsx15("div", { role: "group", className: `hf-button-group hf-button-group--${orientation}${attached ? " is-attached" : ""} ${className}`.trim(), ...props, children });
+}
+function ColorPicker({ value, onChange, label, presets = ["#0a7cff", "#19a989", "#7657e6", "#f0a11a", "#e5484d"], disabled }) {
+  const [open, setOpen] = useState4(false);
+  const root = useDismissibleLayer(open, () => setOpen(false));
+  return /* @__PURE__ */ jsxs12("div", { className: "hf-field hf-color-picker", ref: root, children: [
+    label && /* @__PURE__ */ jsx15("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsxs12("button", { type: "button", className: "hf-color-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx15("span", { style: { background: value } }),
+      /* @__PURE__ */ jsx15("code", { children: value.toUpperCase() }),
+      /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsxs12("div", { className: "hf-color-picker__panel", children: [
+      /* @__PURE__ */ jsx15("input", { type: "color", "aria-label": "\u9009\u62E9\u989C\u8272", value, onChange: (event) => onChange(event.target.value) }),
+      /* @__PURE__ */ jsx15("div", { children: presets.map((color) => /* @__PURE__ */ jsx15("button", { type: "button", "aria-label": `\u9009\u62E9\u989C\u8272 ${color}`, "aria-pressed": value.toLowerCase() === color.toLowerCase(), style: { background: color }, onClick: () => onChange(color) }, color)) }),
+      /* @__PURE__ */ jsx15("input", { "aria-label": "\u989C\u8272\u503C", value, onChange: (event) => /^#[0-9a-f]{0,6}$/i.test(event.target.value) && onChange(event.target.value) })
+    ] })
+  ] });
+}
+function ContextMenu({ items, onSelect, label = "\u4E0A\u4E0B\u6587\u83DC\u5355", children }) {
+  const [position, setPosition] = useState4();
+  const root = useDismissibleLayer(Boolean(position), () => setPosition(void 0));
+  const open = (event) => {
+    event.preventDefault();
+    setPosition({ x: event.clientX, y: event.clientY });
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: "hf-context-target", onContextMenu: open, children: [
+    children,
+    position && /* @__PURE__ */ jsx15("div", { ref: root, className: "hf-context-menu", role: "menu", "aria-label": label, style: { left: position.x, top: position.y }, children: items.map((item) => /* @__PURE__ */ jsxs12("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger ? "is-danger" : "", onClick: () => {
+      onSelect(item.key);
+      setPosition(void 0);
+    }, children: [
+      item.icon,
+      /* @__PURE__ */ jsx15("span", { children: item.label })
+    ] }, item.key)) })
+  ] });
+}
+
+// src/components/Editors.tsx
+import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState5 } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function RichTextEditor({ value, onChange, label, placeholder = "\u8F93\u5165\u5185\u5BB9\u2026", disabled }) {
+  const editor = useRef2(null);
+  useEffect3(() => {
+    if (editor.current && editor.current.innerHTML !== value) editor.current.innerHTML = value;
+  }, [value]);
+  const format = (command) => {
+    editor.current?.focus();
+    document.execCommand(command);
+    onChange(editor.current?.innerHTML ?? "");
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "hf-rich-editor", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "hf-rich-editor__header", children: [
+      label && /* @__PURE__ */ jsx16("strong", { children: label }),
+      /* @__PURE__ */ jsxs13("div", { role: "toolbar", "aria-label": "\u6587\u672C\u683C\u5F0F", children: [
+        /* @__PURE__ */ jsx16("button", { type: "button", "aria-label": "\u7C97\u4F53", disabled, onClick: () => format("bold"), children: /* @__PURE__ */ jsx16("b", { children: "B" }) }),
+        /* @__PURE__ */ jsx16("button", { type: "button", "aria-label": "\u659C\u4F53", disabled, onClick: () => format("italic"), children: /* @__PURE__ */ jsx16("i", { children: "I" }) }),
+        /* @__PURE__ */ jsx16("button", { type: "button", "aria-label": "\u65E0\u5E8F\u5217\u8868", disabled, onClick: () => format("insertUnorderedList"), children: "\u2022 \u5217\u8868" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx16("div", { ref: editor, className: "hf-rich-editor__content", contentEditable: !disabled, role: "textbox", "aria-multiline": "true", "aria-label": label ?? "\u5BCC\u6587\u672C\u7F16\u8F91\u5668", "data-placeholder": placeholder, onInput: (event) => onChange(event.currentTarget.innerHTML) })
+  ] });
+}
+function MentionInput({ value, onChange, options, label, placeholder = "\u8F93\u5165 @ \u63D0\u53CA\u6210\u5458", disabled }) {
+  const [active, setActive] = useState5(0);
+  const match = value.match(/(?:^|\s)@([^\s@]*)$/);
+  const query = match?.[1]?.toLowerCase();
+  const results = useMemo(() => query === void 0 ? [] : options.filter((item) => `${item.label} ${item.value}`.toLowerCase().includes(query)).slice(0, 6), [options, query]);
+  useEffect3(() => setActive(0), [query]);
+  const choose = (item) => {
+    if (!match) return;
+    onChange(`${value.slice(0, match.index)}${match[0].startsWith(" ") ? " " : ""}@${item.label} `);
+  };
+  const keyDown = (event) => {
+    if (!results.length) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive((index) => (index + (event.key === "ArrowDown" ? 1 : -1) + results.length) % results.length);
+    } else if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault();
+      choose(results[active]);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      onChange(`${value} `);
+    }
+  };
+  return /* @__PURE__ */ jsxs13("label", { className: "hf-field hf-mention-input", children: [
+    label && /* @__PURE__ */ jsx16("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsx16("textarea", { value, placeholder, disabled, "aria-autocomplete": "list", "aria-expanded": Boolean(results.length), onChange: (event) => onChange(event.target.value), onKeyDown: keyDown }),
+    results.length > 0 && /* @__PURE__ */ jsx16("div", { className: "hf-mention-input__menu", role: "listbox", children: results.map((item, index) => /* @__PURE__ */ jsxs13("button", { type: "button", role: "option", "aria-selected": index === active, onMouseDown: (event) => event.preventDefault(), onClick: () => choose(item), children: [
+      /* @__PURE__ */ jsxs13("span", { children: [
+        "@",
+        item.label
+      ] }),
+      item.description && /* @__PURE__ */ jsx16("small", { children: item.description })
+    ] }, item.value)) })
+  ] });
+}
+function CodeEditor({ value, onChange, language = "text", label = "\u4EE3\u7801\u7F16\u8F91\u5668", readOnly, height = 260 }) {
+  const lines = value.split("\n").length;
+  return /* @__PURE__ */ jsxs13("div", { className: "hf-code-editor", children: [
+    /* @__PURE__ */ jsxs13("header", { children: [
+      /* @__PURE__ */ jsx16("strong", { children: label }),
+      /* @__PURE__ */ jsx16("span", { children: language })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { style: { height }, children: [
+      /* @__PURE__ */ jsx16("pre", { "aria-hidden": "true", children: Array.from({ length: lines }, (_, index) => `${index + 1}
+`) }),
+      /* @__PURE__ */ jsx16("textarea", { spellCheck: false, readOnly, "aria-label": label, value, onChange: (event) => onChange(event.target.value), onKeyDown: (event) => {
+        if (event.key === "Tab" && !readOnly) {
+          event.preventDefault();
+          const input = event.currentTarget;
+          const next = `${value.slice(0, input.selectionStart)}  ${value.slice(input.selectionEnd)}`;
+          onChange(next);
+          requestAnimationFrame(() => input.setSelectionRange(input.selectionStart + 2, input.selectionStart + 2));
+        }
+      } })
+    ] })
+  ] });
+}
+
+// src/components/AIInteraction.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+function ChatMessage({ role, children, avatar, name, timestamp, actions, streaming, error }) {
+  return /* @__PURE__ */ jsxs14("article", { className: `hf-chat-message hf-chat-message--${role}`, "aria-live": streaming ? "polite" : void 0, children: [
+    /* @__PURE__ */ jsx17("div", { className: "hf-chat-message__avatar", "aria-hidden": "true", children: avatar ?? (role === "assistant" ? "AI" : role === "system" ? "S" : "U") }),
+    /* @__PURE__ */ jsxs14("div", { className: "hf-chat-message__body", children: [
+      /* @__PURE__ */ jsxs14("header", { children: [
+        name && /* @__PURE__ */ jsx17("strong", { children: name }),
+        timestamp && /* @__PURE__ */ jsx17("time", { children: timestamp })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "hf-chat-message__content", children: [
+        children,
+        streaming && /* @__PURE__ */ jsx17("span", { className: "hf-chat-message__cursor", "aria-label": "\u6B63\u5728\u751F\u6210" })
+      ] }),
+      error && /* @__PURE__ */ jsx17("div", { className: "hf-chat-message__error", role: "alert", children: error }),
+      actions && /* @__PURE__ */ jsx17("footer", { children: actions })
+    ] })
+  ] });
+}
+function ChatComposer({ value, onChange, onSend, attachments = [], onRemoveAttachment, onAttach, placeholder = "\u8F93\u5165\u6D88\u606F\uFF0CEnter \u53D1\u9001\uFF0CShift + Enter \u6362\u884C", disabled, sending, footer, maxLength }) {
+  const send = () => {
+    const content = value.trim();
+    if (content && !disabled && !sending) onSend(content);
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    send();
+  };
+  const keyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      send();
+    }
+  };
+  return /* @__PURE__ */ jsxs14("form", { className: "hf-chat-composer", onSubmit: submit, children: [
+    attachments.length > 0 && /* @__PURE__ */ jsx17("div", { className: "hf-chat-composer__attachments", children: attachments.map((item) => /* @__PURE__ */ jsxs14("span", { children: [
+      item.icon,
+      /* @__PURE__ */ jsx17("strong", { children: item.name }),
+      item.size && /* @__PURE__ */ jsx17("small", { children: item.size }),
+      onRemoveAttachment && /* @__PURE__ */ jsx17("button", { type: "button", "aria-label": `\u79FB\u9664\u9644\u4EF6 ${item.name}`, onClick: () => onRemoveAttachment(item.id), children: "\xD7" })
+    ] }, item.id)) }),
+    /* @__PURE__ */ jsx17("textarea", { "aria-label": "\u6D88\u606F\u5185\u5BB9", value, maxLength, disabled, placeholder, onChange: (event) => onChange(event.target.value), onKeyDown: keyDown }),
+    /* @__PURE__ */ jsxs14("footer", { children: [
+      /* @__PURE__ */ jsxs14("div", { children: [
+        onAttach && /* @__PURE__ */ jsx17("button", { type: "button", className: "hf-chat-composer__attach", "aria-label": "\u6DFB\u52A0\u9644\u4EF6", disabled, onClick: onAttach, children: "\uFF0B" }),
+        footer
+      ] }),
+      maxLength && /* @__PURE__ */ jsxs14("small", { children: [
+        value.length,
+        "/",
+        maxLength
+      ] }),
+      /* @__PURE__ */ jsxs14("button", { type: "submit", className: "hf-chat-composer__send", disabled: disabled || sending || !value.trim(), children: [
+        sending ? /* @__PURE__ */ jsx17("span", { className: "hf-spinner" }) : "\u2191",
+        /* @__PURE__ */ jsx17("span", { className: "hf-sr-only", children: "\u53D1\u9001\u6D88\u606F" })
+      ] })
+    ] })
+  ] });
+}
+function PromptSuggestions({ items, onSelect, title, columns = 2 }) {
+  return /* @__PURE__ */ jsxs14("section", { className: `hf-prompt-suggestions hf-prompt-suggestions--${columns}`, children: [
+    title && /* @__PURE__ */ jsx17("header", { children: title }),
+    /* @__PURE__ */ jsx17("div", { children: items.map((item) => /* @__PURE__ */ jsxs14("button", { type: "button", onClick: () => onSelect(item), children: [
+      item.icon && /* @__PURE__ */ jsx17("span", { children: item.icon }),
+      /* @__PURE__ */ jsx17("strong", { children: item.title }),
+      item.description && /* @__PURE__ */ jsx17("small", { children: item.description }),
+      /* @__PURE__ */ jsx17("i", { "aria-hidden": "true", children: "\u2192" })
+    ] }, item.id)) })
+  ] });
+}
+var toolStatusLabel = { queued: "\u7B49\u5F85\u4E2D", running: "\u6267\u884C\u4E2D", success: "\u5DF2\u5B8C\u6210", error: "\u6267\u884C\u5931\u8D25", cancelled: "\u5DF2\u53D6\u6D88" };
+function ToolCallCard({ name, status, description, input, output, duration, icon, defaultExpanded = false, onRetry, onCancel }) {
+  const [open, setOpen] = useState6(defaultExpanded);
+  return /* @__PURE__ */ jsxs14("section", { className: `hf-tool-call is-${status}`, children: [
+    /* @__PURE__ */ jsxs14("button", { type: "button", className: "hf-tool-call__summary", "aria-expanded": open, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx17("span", { className: "hf-tool-call__icon", children: status === "running" ? /* @__PURE__ */ jsx17("span", { className: "hf-spinner" }) : icon ?? "\u25C7" }),
+      /* @__PURE__ */ jsxs14("span", { children: [
+        /* @__PURE__ */ jsx17("strong", { children: name }),
+        description && /* @__PURE__ */ jsx17("small", { children: description })
+      ] }),
+      /* @__PURE__ */ jsx17("i", { children: toolStatusLabel[status] }),
+      duration && /* @__PURE__ */ jsx17("time", { children: duration }),
+      /* @__PURE__ */ jsx17("b", { "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsxs14("div", { className: "hf-tool-call__detail", children: [
+      input && /* @__PURE__ */ jsxs14("section", { children: [
+        /* @__PURE__ */ jsx17("strong", { children: "\u8F93\u5165" }),
+        /* @__PURE__ */ jsx17("div", { children: input })
+      ] }),
+      output && /* @__PURE__ */ jsxs14("section", { children: [
+        /* @__PURE__ */ jsx17("strong", { children: "\u8F93\u51FA" }),
+        /* @__PURE__ */ jsx17("div", { children: output })
+      ] }),
+      status === "error" && onRetry || status === "running" && onCancel ? /* @__PURE__ */ jsxs14("footer", { children: [
+        status === "error" && onRetry && /* @__PURE__ */ jsx17("button", { type: "button", onClick: onRetry, children: "\u91CD\u65B0\u6267\u884C" }),
+        status === "running" && onCancel && /* @__PURE__ */ jsx17("button", { type: "button", onClick: onCancel, children: "\u505C\u6B62\u6267\u884C" })
+      ] }) : null
+    ] })
+  ] });
+}
+function CitationList({ items, title = "\u53C2\u8003\u6765\u6E90", onSelect }) {
+  return /* @__PURE__ */ jsxs14("section", { className: "hf-citation-list", children: [
+    /* @__PURE__ */ jsxs14("header", { children: [
+      /* @__PURE__ */ jsx17("strong", { children: title }),
+      /* @__PURE__ */ jsx17("span", { children: items.length })
+    ] }),
+    /* @__PURE__ */ jsx17("ol", { children: items.map((item, index) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsxs14("a", { href: item.url, target: item.url ? "_blank" : void 0, rel: item.url ? "noreferrer" : void 0, onClick: (event) => {
+      if (!item.url) event.preventDefault();
+      onSelect?.(item);
+    }, children: [
+      /* @__PURE__ */ jsx17("span", { children: item.favicon ?? index + 1 }),
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx17("strong", { children: item.title }),
+        item.source && /* @__PURE__ */ jsx17("small", { children: item.source }),
+        item.excerpt && /* @__PURE__ */ jsx17("p", { children: item.excerpt })
+      ] }),
+      /* @__PURE__ */ jsx17("i", { "aria-hidden": "true", children: "\u2197" })
+    ] }) }, item.id)) })
+  ] });
+}
+function AgentRunTimeline({ steps, activeId, onSelect, label = "Agent \u6267\u884C\u8FC7\u7A0B" }) {
+  return /* @__PURE__ */ jsx17("ol", { className: "hf-agent-run", "aria-label": label, children: steps.map((step) => /* @__PURE__ */ jsx17("li", { className: `is-${step.status}${activeId === step.id ? " is-active" : ""}`, children: /* @__PURE__ */ jsxs14("button", { type: "button", "aria-pressed": activeId === step.id, onClick: () => onSelect?.(step.id), children: [
+    /* @__PURE__ */ jsx17("span", { children: step.status === "success" ? "\u2713" : step.status === "error" ? "!" : step.status === "running" ? /* @__PURE__ */ jsx17("i", { className: "hf-spinner" }) : "\xB7" }),
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsxs14("header", { children: [
+        /* @__PURE__ */ jsx17("strong", { children: step.title }),
+        step.timestamp && /* @__PURE__ */ jsx17("time", { children: step.timestamp })
+      ] }),
+      step.description && /* @__PURE__ */ jsx17("p", { children: step.description }),
+      step.detail && /* @__PURE__ */ jsx17("div", { children: step.detail })
+    ] })
+  ] }) }, step.id)) });
+}
+
+// src/components/AIAdvanced.tsx
+import { Fragment, useMemo as useMemo2, useState as useState7 } from "react";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function inlineMarkdown(text) {
+  const pattern = /(\*\*[^*]+\*\*|`[^`]+`|\[[^\]]+\]\(https?:\/\/[^\s)]+\))/g;
+  return text.split(pattern).filter(Boolean).map((part, index) => {
+    if (part.startsWith("**") && part.endsWith("**")) return /* @__PURE__ */ jsx18("strong", { children: part.slice(2, -2) }, index);
+    if (part.startsWith("`") && part.endsWith("`")) return /* @__PURE__ */ jsx18("code", { children: part.slice(1, -1) }, index);
+    const link = part.match(/^\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)$/);
+    return link ? /* @__PURE__ */ jsx18("a", { href: link[2], target: "_blank", rel: "noreferrer", children: link[1] }, index) : /* @__PURE__ */ jsx18(Fragment, { children: part }, index);
+  });
+}
+function MarkdownContent({ content, className = "" }) {
+  const blocks = useMemo2(() => {
+    const lines = content.split("\n");
+    const result = [];
+    let code, language = "";
+    let list = [];
+    const flushList = () => {
+      if (list.length) result.push(/* @__PURE__ */ jsx18("ul", { children: list.map((item, index) => /* @__PURE__ */ jsx18("li", { children: inlineMarkdown(item) }, index)) }, `list-${result.length}`));
+      list = [];
+    };
+    lines.forEach((line) => {
+      if (line.startsWith("```")) {
+        if (code) {
+          result.push(/* @__PURE__ */ jsx18(CodeBlock, { code: code.join("\n"), language }, `code-${result.length}`));
+          code = void 0;
+          language = "";
+        } else {
+          flushList();
+          code = [];
+          language = line.slice(3).trim();
+        }
+        return;
+      }
+      if (code) {
+        code.push(line);
+        return;
+      }
+      if (line.startsWith("- ")) {
+        list.push(line.slice(2));
+        return;
+      }
+      flushList();
+      if (!line.trim()) return;
+      const heading = line.match(/^(#{1,3})\s+(.+)$/);
+      if (heading) {
+        const Tag2 = `h${heading[1].length}`;
+        result.push(/* @__PURE__ */ jsx18(Tag2, { children: inlineMarkdown(heading[2]) }, result.length));
+      } else if (line.startsWith("> ")) result.push(/* @__PURE__ */ jsx18("blockquote", { children: inlineMarkdown(line.slice(2)) }, result.length));
+      else result.push(/* @__PURE__ */ jsx18("p", { children: inlineMarkdown(line) }, result.length));
+    });
+    flushList();
+    if (code) result.push(/* @__PURE__ */ jsx18(CodeBlock, { code: code.join("\n"), language }, "code-last"));
+    return result;
+  }, [content]);
+  return /* @__PURE__ */ jsx18("div", { className: `hf-markdown ${className}`.trim(), children: blocks });
+}
+function CodeBlock({ code, language = "text", filename, wrap, showLineNumbers = true, onCopy }) {
+  const [copied, setCopied] = useState7(false);
+  const lines = code.split("\n");
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch {
+    }
+    onCopy?.(code);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+  return /* @__PURE__ */ jsxs15("section", { className: `hf-code-block${wrap ? " is-wrapped" : ""}`, children: [
+    /* @__PURE__ */ jsxs15("header", { children: [
+      /* @__PURE__ */ jsx18("span", { children: filename ?? language }),
+      /* @__PURE__ */ jsx18("button", { type: "button", onClick: copy, children: copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u4EE3\u7801" })
+    ] }),
+    /* @__PURE__ */ jsxs15("div", { children: [
+      showLineNumbers && /* @__PURE__ */ jsx18("pre", { "aria-hidden": "true", children: lines.map((_, index) => `${index + 1}
+`) }),
+      /* @__PURE__ */ jsx18("pre", { children: /* @__PURE__ */ jsx18("code", { children: code }) })
+    ] })
+  ] });
+}
+function VoiceInput({ state = "idle", duration = "00:00", level = 0.45, disabled, onStart, onStop, onCancel, error }) {
+  const active = state === "listening";
+  return /* @__PURE__ */ jsxs15("div", { className: `hf-voice-input is-${state}`, role: "status", "aria-label": active ? "\u6B63\u5728\u5F55\u97F3" : state === "processing" ? "\u6B63\u5728\u8BC6\u522B\u8BED\u97F3" : "\u8BED\u97F3\u8F93\u5165", children: [
+    /* @__PURE__ */ jsx18("button", { type: "button", className: "hf-voice-input__main", disabled: disabled || state === "processing", onClick: active ? onStop : onStart, children: state === "processing" ? /* @__PURE__ */ jsx18("span", { className: "hf-spinner" }) : active ? "\u25A0" : "\u25CF" }),
+    /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsx18("div", { className: "hf-voice-input__wave", "aria-hidden": "true", children: Array.from({ length: 18 }, (_, index) => /* @__PURE__ */ jsx18("i", { style: { height: `${Math.max(12, index * 17 % 75 * level + 12)}%` } }, index)) }),
+      /* @__PURE__ */ jsx18("span", { children: active ? duration : state === "processing" ? "\u6B63\u5728\u8F6C\u6362\u6587\u5B57\u2026" : error ?? "\u70B9\u51FB\u5F00\u59CB\u8BED\u97F3\u8F93\u5165" })
+    ] }),
+    (active || state === "error") && onCancel && /* @__PURE__ */ jsx18("button", { type: "button", className: "hf-voice-input__cancel", onClick: onCancel, children: "\u53D6\u6D88" })
+  ] });
+}
+function ModelSelector({ models, value, onChange, label = "\u9009\u62E9\u6A21\u578B", disabled }) {
+  const [open, setOpen] = useState7(false);
+  const root = useDismissibleLayer(open, () => setOpen(false));
+  const selected = models.find((item) => item.id === value);
+  return /* @__PURE__ */ jsxs15("div", { className: "hf-model-selector", ref: root, children: [
+    /* @__PURE__ */ jsxs15("button", { type: "button", className: "hf-model-selector__trigger", disabled, "aria-expanded": open, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx18("span", { children: selected?.icon ?? "\u2726" }),
+      /* @__PURE__ */ jsxs15("span", { children: [
+        /* @__PURE__ */ jsx18("strong", { children: selected?.name ?? label }),
+        selected?.description && /* @__PURE__ */ jsx18("small", { children: selected.description })
+      ] }),
+      /* @__PURE__ */ jsx18("i", { "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsx18("div", { className: "hf-model-selector__menu", role: "listbox", "aria-label": label, children: models.map((model) => /* @__PURE__ */ jsxs15("button", { type: "button", role: "option", "aria-selected": model.id === value, disabled: model.disabled, onClick: () => {
+      onChange(model.id);
+      setOpen(false);
+    }, children: [
+      /* @__PURE__ */ jsx18("span", { children: model.icon ?? "\u2726" }),
+      /* @__PURE__ */ jsxs15("span", { children: [
+        /* @__PURE__ */ jsx18("strong", { children: model.name }),
+        model.description && /* @__PURE__ */ jsx18("small", { children: model.description }),
+        model.tags?.length ? /* @__PURE__ */ jsx18("i", { children: model.tags.map((tag) => /* @__PURE__ */ jsx18("b", { children: tag }, tag)) }) : null
+      ] }),
+      model.id === value && /* @__PURE__ */ jsx18("em", { children: "\u2713" })
+    ] }, model.id)) })
+  ] });
+}
+function ConversationBranch({ current, total, onChange, label = "\u56DE\u7B54\u5206\u652F" }) {
+  const safeTotal = Math.max(1, total), safeCurrent = Math.min(safeTotal - 1, Math.max(0, current));
+  return /* @__PURE__ */ jsxs15("nav", { className: "hf-conversation-branch", "aria-label": String(label), children: [
+    /* @__PURE__ */ jsx18("button", { type: "button", "aria-label": "\u4E0A\u4E00\u4E2A\u5206\u652F", disabled: safeCurrent === 0, onClick: () => onChange(safeCurrent - 1), children: "\u2039" }),
+    /* @__PURE__ */ jsxs15("span", { children: [
+      safeCurrent + 1,
+      " / ",
+      safeTotal
+    ] }),
+    /* @__PURE__ */ jsx18("button", { type: "button", "aria-label": "\u4E0B\u4E00\u4E2A\u5206\u652F", disabled: safeCurrent >= safeTotal - 1, onClick: () => onChange(safeCurrent + 1), children: "\u203A" })
+  ] });
+}
+function TokenUsage({ used, limit, input, output, cached, label = "\u4E0A\u4E0B\u6587\u7528\u91CF", compact }) {
+  const percent = Math.max(0, Math.min(100, limit ? used / limit * 100 : 0));
+  return /* @__PURE__ */ jsxs15("section", { className: `hf-token-usage${compact ? " is-compact" : ""}`, children: [
+    /* @__PURE__ */ jsx18("div", { className: "hf-token-usage__ring", role: "progressbar", "aria-label": String(label), "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": used, style: { "--hf-token-percent": `${percent * 3.6}deg` }, children: /* @__PURE__ */ jsxs15("span", { children: [
+      Math.round(percent),
+      "%"
+    ] }) }),
+    /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsxs15("header", { children: [
+        /* @__PURE__ */ jsx18("strong", { children: label }),
+        /* @__PURE__ */ jsxs15("span", { children: [
+          used.toLocaleString(),
+          " / ",
+          limit.toLocaleString()
+        ] })
+      ] }),
+      !compact && /* @__PURE__ */ jsxs15("div", { className: "hf-token-usage__details", children: [
+        input !== void 0 && /* @__PURE__ */ jsxs15("span", { children: [
+          /* @__PURE__ */ jsx18("i", {}),
+          "\u8F93\u5165 ",
+          input.toLocaleString()
+        ] }),
+        output !== void 0 && /* @__PURE__ */ jsxs15("span", { children: [
+          /* @__PURE__ */ jsx18("i", {}),
+          "\u8F93\u51FA ",
+          output.toLocaleString()
+        ] }),
+        cached !== void 0 && /* @__PURE__ */ jsxs15("span", { children: [
+          /* @__PURE__ */ jsx18("i", {}),
+          "\u7F13\u5B58 ",
+          cached.toLocaleString()
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Collaboration.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+var presenceLabel = { online: "\u5728\u7EBF", away: "\u79BB\u5F00", busy: "\u5FD9\u788C", offline: "\u79BB\u7EBF" };
+function Presence({ status, label, showLabel = true, pulse = true }) {
+  return /* @__PURE__ */ jsxs16("span", { className: `hf-presence is-${status}${pulse && status === "online" ? " is-pulsing" : ""}`, role: "status", children: [
+    /* @__PURE__ */ jsx19("i", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx19("span", { children: label ?? (showLabel ? presenceLabel[status] : /* @__PURE__ */ jsx19("span", { className: "hf-sr-only", children: presenceLabel[status] })) })
+  ] });
+}
+function AvatarGroup({ items, max = 4, size = "md", onMore, label = "\u534F\u4F5C\u6210\u5458" }) {
+  const shown = items.slice(0, max), remaining = Math.max(0, items.length - shown.length);
+  return /* @__PURE__ */ jsxs16("div", { className: `hf-avatar-group hf-avatar-group--${size}`, "aria-label": label, children: [
+    shown.map((item) => /* @__PURE__ */ jsx19(Avatar, { src: item.src, name: item.name, size, status: item.status }, item.id)),
+    remaining > 0 && /* @__PURE__ */ jsxs16("button", { type: "button", "aria-label": `\u67E5\u770B\u5176\u4F59 ${remaining} \u4F4D\u6210\u5458`, onClick: onMore, children: [
+      "+",
+      remaining
+    ] })
+  ] });
+}
+function Comment({ item, onReply, onReact, onDelete, depth = 0 }) {
+  const [replying, setReplying] = useState8(false), [value, setValue] = useState8("");
+  return /* @__PURE__ */ jsxs16("article", { className: "hf-comment", style: { "--hf-comment-depth": Math.min(depth, 3) }, children: [
+    /* @__PURE__ */ jsx19(Avatar, { src: item.author.avatar, name: item.author.name, size: "sm" }),
+    /* @__PURE__ */ jsxs16("div", { children: [
+      /* @__PURE__ */ jsxs16("header", { children: [
+        /* @__PURE__ */ jsx19("strong", { children: item.author.name }),
+        item.timestamp && /* @__PURE__ */ jsx19("time", { children: item.timestamp }),
+        item.edited && /* @__PURE__ */ jsx19("small", { children: "\u5DF2\u7F16\u8F91" })
+      ] }),
+      /* @__PURE__ */ jsx19("div", { className: "hf-comment__content", children: item.content }),
+      /* @__PURE__ */ jsxs16("footer", { children: [
+        item.reactions?.map((reaction) => /* @__PURE__ */ jsxs16("button", { type: "button", className: reaction.active ? "is-active" : "", "aria-pressed": reaction.active, onClick: () => onReact?.(item.id, reaction.emoji), children: [
+          reaction.emoji,
+          " ",
+          reaction.count
+        ] }, reaction.emoji)),
+        onReply && /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => setReplying(!replying), children: "\u56DE\u590D" }),
+        onDelete && /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => onDelete(item.id), children: "\u5220\u9664" })
+      ] }),
+      replying && /* @__PURE__ */ jsxs16("form", { className: "hf-comment__reply", onSubmit: (event) => {
+        event.preventDefault();
+        if (value.trim()) {
+          onReply?.(item.id, value.trim());
+          setValue("");
+          setReplying(false);
+        }
+      }, children: [
+        /* @__PURE__ */ jsx19("textarea", { autoFocus: true, "aria-label": `\u56DE\u590D ${item.author.name}`, value, onChange: (event) => setValue(event.target.value) }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => setReplying(false), children: "\u53D6\u6D88" }),
+          /* @__PURE__ */ jsx19("button", { type: "submit", disabled: !value.trim(), children: "\u53D1\u9001\u56DE\u590D" })
+        ] })
+      ] }),
+      item.replies?.map((reply) => /* @__PURE__ */ jsx19(Comment, { item: reply, onReply, onReact, onDelete, depth: depth + 1 }, reply.id))
+    ] })
+  ] });
+}
+function CommentThread({ comments, onReply, onReact, onDelete, empty = "\u6682\u65E0\u8BC4\u8BBA\uFF0C\u5F00\u59CB\u8BA8\u8BBA\u5427" }) {
+  return /* @__PURE__ */ jsx19("section", { className: "hf-comment-thread", "aria-label": "\u8BC4\u8BBA\u8BA8\u8BBA", children: comments.length ? comments.map((item) => /* @__PURE__ */ jsx19(Comment, { item, onReply, onReact, onDelete }, item.id)) : /* @__PURE__ */ jsx19("div", { className: "hf-comment-thread__empty", children: empty }) });
+}
+function ActivityFeed({ items, grouped, empty = "\u6682\u65E0\u52A8\u6001" }) {
+  if (!items.length) return /* @__PURE__ */ jsx19("div", { className: "hf-activity-feed__empty", children: empty });
+  return /* @__PURE__ */ jsx19("ol", { className: `hf-activity-feed${grouped ? " is-grouped" : ""}`, children: items.map((item) => /* @__PURE__ */ jsxs16("li", { children: [
+    /* @__PURE__ */ jsx19("span", { className: "hf-activity-feed__marker", children: item.avatar ?? item.icon ?? "\u2022" }),
+    /* @__PURE__ */ jsxs16("div", { children: [
+      /* @__PURE__ */ jsxs16("p", { children: [
+        /* @__PURE__ */ jsx19("strong", { children: item.actor }),
+        " ",
+        item.action,
+        " ",
+        item.target && /* @__PURE__ */ jsx19("b", { children: item.target })
+      ] }),
+      item.timestamp && /* @__PURE__ */ jsx19("time", { children: item.timestamp }),
+      item.detail && /* @__PURE__ */ jsx19("div", { children: item.detail })
+    ] })
+  ] }, item.id)) });
+}
+function ApprovalFlow({ steps, currentId, onApprove, onReject, orientation = "vertical" }) {
+  return /* @__PURE__ */ jsx19("ol", { className: `hf-approval-flow hf-approval-flow--${orientation}`, children: steps.map((step, index) => /* @__PURE__ */ jsxs16("li", { className: `is-${step.status}${currentId === step.id ? " is-current" : ""}`, children: [
+    /* @__PURE__ */ jsx19("span", { children: step.status === "approved" ? "\u2713" : step.status === "rejected" ? "\xD7" : index + 1 }),
+    /* @__PURE__ */ jsxs16("div", { children: [
+      /* @__PURE__ */ jsxs16("header", { children: [
+        /* @__PURE__ */ jsx19("strong", { children: step.title }),
+        /* @__PURE__ */ jsx19("i", { children: { pending: "\u5F85\u5BA1\u6279", approved: "\u5DF2\u901A\u8FC7", rejected: "\u5DF2\u62D2\u7EDD", skipped: "\u5DF2\u8DF3\u8FC7" }[step.status] })
+      ] }),
+      step.approver && /* @__PURE__ */ jsx19("p", { children: step.approver }),
+      step.comment && /* @__PURE__ */ jsx19("blockquote", { children: step.comment }),
+      step.timestamp && /* @__PURE__ */ jsx19("time", { children: step.timestamp }),
+      step.status === "pending" && currentId === step.id && (onApprove || onReject) && /* @__PURE__ */ jsxs16("footer", { children: [
+        onReject && /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => onReject(step.id), children: "\u62D2\u7EDD" }),
+        onApprove && /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => onApprove(step.id), children: "\u901A\u8FC7" })
+      ] })
+    ] })
+  ] }, step.id)) });
+}
+function AuditLog({ events, onSelect, empty = "\u6682\u65E0\u5BA1\u8BA1\u8BB0\u5F55", caption = "\u5BA1\u8BA1\u65E5\u5FD7" }) {
+  return /* @__PURE__ */ jsx19("div", { className: "hf-audit-log", children: /* @__PURE__ */ jsxs16("table", { children: [
+    /* @__PURE__ */ jsx19("caption", { children: caption }),
+    /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs16("tr", { children: [
+      /* @__PURE__ */ jsx19("th", { children: "\u65F6\u95F4" }),
+      /* @__PURE__ */ jsx19("th", { children: "\u64CD\u4F5C\u8005" }),
+      /* @__PURE__ */ jsx19("th", { children: "\u64CD\u4F5C" }),
+      /* @__PURE__ */ jsx19("th", { children: "\u8D44\u6E90" }),
+      /* @__PURE__ */ jsx19("th", { children: "\u7ED3\u679C" }),
+      /* @__PURE__ */ jsx19("th", { children: "IP" })
+    ] }) }),
+    /* @__PURE__ */ jsxs16("tbody", { children: [
+      events.map((event) => /* @__PURE__ */ jsxs16("tr", { tabIndex: onSelect ? 0 : void 0, onClick: () => onSelect?.(event.id), onKeyDown: (key) => {
+        if (onSelect && (key.key === "Enter" || key.key === " ")) {
+          key.preventDefault();
+          onSelect(event.id);
+        }
+      }, children: [
+        /* @__PURE__ */ jsx19("td", { children: event.timestamp }),
+        /* @__PURE__ */ jsx19("td", { children: event.actor }),
+        /* @__PURE__ */ jsxs16("td", { children: [
+          /* @__PURE__ */ jsx19("strong", { children: event.action }),
+          event.detail && /* @__PURE__ */ jsx19("small", { children: event.detail })
+        ] }),
+        /* @__PURE__ */ jsx19("td", { children: event.resource ?? "\u2014" }),
+        /* @__PURE__ */ jsx19("td", { children: /* @__PURE__ */ jsx19("span", { className: `is-${event.result ?? "success"}`, children: event.result === "failure" ? "\u5931\u8D25" : event.result === "warning" ? "\u8B66\u544A" : "\u6210\u529F" }) }),
+        /* @__PURE__ */ jsx19("td", { children: /* @__PURE__ */ jsx19("code", { children: event.ip ?? "\u2014" }) })
+      ] }, event.id)),
+      !events.length && /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: 6, className: "hf-audit-log__empty", children: empty }) })
+    ] })
+  ] }) });
+}
+
+// src/components/Assets.tsx
+import { useMemo as useMemo3, useRef as useRef3, useState as useState9 } from "react";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function FileExplorer({ items, selectedId, onSelect, empty = "\u6682\u65E0\u6587\u4EF6" }) {
+  const [open, setOpen] = useState9([]);
+  const itemRefs = useRef3(/* @__PURE__ */ new Map());
+  const visible = useMemo3(() => {
+    const result = [];
+    const visit = (nodes, level, parentId) => nodes.forEach((item) => {
+      result.push({ item, level, parentId });
+      if (item.children?.length && open.includes(item.id)) visit(item.children, level + 1, item.id);
+    });
+    visit(items, 1);
+    return result;
+  }, [items, open]);
+  const toggle = (id) => setOpen((value) => value.includes(id) ? value.filter((key) => key !== id) : [...value, id]);
+  const focusAt = (index) => itemRefs.current.get(visible[Math.max(0, Math.min(visible.length - 1, index))]?.item.id ?? "")?.focus();
+  const onKeyDown = (event, entry, index) => {
+    const expandable = Boolean(entry.item.children?.length);
+    if (event.key === "ArrowDown") focusAt(index + 1);
+    else if (event.key === "ArrowUp") focusAt(index - 1);
+    else if (event.key === "Home") focusAt(0);
+    else if (event.key === "End") focusAt(visible.length - 1);
+    else if (event.key === "ArrowRight" && expandable) open.includes(entry.item.id) ? focusAt(index + 1) : toggle(entry.item.id);
+    else if (event.key === "ArrowLeft") {
+      if (expandable && open.includes(entry.item.id)) toggle(entry.item.id);
+      else if (entry.parentId) itemRefs.current.get(entry.parentId)?.focus();
+      else return;
+    } else return;
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsx20("div", { className: "hf-file-explorer", role: "tree", "aria-label": "\u6587\u4EF6\u76EE\u5F55", children: items.length ? /* @__PURE__ */ jsx20("ul", { role: "none", children: visible.map((entry, index) => {
+    const { item, level } = entry;
+    const expandable = Boolean(item.children?.length);
+    const expanded = expandable && open.includes(item.id);
+    return /* @__PURE__ */ jsx20("li", { role: "none", children: /* @__PURE__ */ jsxs17("div", { className: selectedId === item.id ? "is-selected" : "", style: { paddingLeft: (level - 1) * 18 + 7 }, children: [
+      /* @__PURE__ */ jsx20("span", { className: "hf-file-explorer__toggle", "aria-hidden": "true", children: expandable ? expanded ? "\u2304" : "\u203A" : "" }),
+      /* @__PURE__ */ jsxs17("button", { type: "button", role: "treeitem", "aria-level": level, "aria-selected": selectedId === item.id, "aria-expanded": expandable ? expanded : void 0, ref: (node) => {
+        if (node) itemRefs.current.set(item.id, node);
+        else itemRefs.current.delete(item.id);
+      }, onClick: () => {
+        if (expandable) toggle(item.id);
+        onSelect?.(item.id);
+      }, onKeyDown: (event) => onKeyDown(event, entry, index), children: [
+        item.icon ?? (item.type === "folder" ? "\u25B0" : "\u25A4"),
+        /* @__PURE__ */ jsxs17("span", { children: [
+          /* @__PURE__ */ jsx20("strong", { children: item.name }),
+          item.modified && /* @__PURE__ */ jsx20("small", { children: item.modified })
+        ] }),
+        item.size && /* @__PURE__ */ jsx20("i", { children: item.size })
+      ] })
+    ] }) }, item.id);
+  }) }) : /* @__PURE__ */ jsx20("div", { children: empty }) });
+}
+function FilePreview({ name, type, children, size, modified, actions, empty = "\u9009\u62E9\u6587\u4EF6\u540E\u5728\u6B64\u9884\u89C8" }) {
+  return /* @__PURE__ */ jsx20("section", { className: "hf-file-preview", children: name ? /* @__PURE__ */ jsxs17(Fragment2, { children: [
+    /* @__PURE__ */ jsxs17("header", { children: [
+      /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx20("strong", { children: name }),
+        /* @__PURE__ */ jsx20("span", { children: [type, size, modified].filter(Boolean).join(" \xB7 ") })
+      ] }),
+      actions
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "hf-file-preview__body", children })
+  ] }) : /* @__PURE__ */ jsxs17("div", { className: "hf-file-preview__empty", children: [
+    "\u25A4",
+    /* @__PURE__ */ jsx20("span", { children: empty })
+  ] }) });
+}
+function VersionHistory({ versions, selectedId, onSelect, onRestore }) {
+  return /* @__PURE__ */ jsx20("ol", { className: "hf-version-history", children: versions.map((item) => /* @__PURE__ */ jsxs17("li", { className: `${item.current ? "is-current" : ""}${selectedId === item.id ? " is-selected" : ""}`, children: [
+    /* @__PURE__ */ jsxs17("button", { type: "button", onClick: () => onSelect?.(item.id), children: [
+      /* @__PURE__ */ jsx20("span", {}),
+      /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsxs17("header", { children: [
+          /* @__PURE__ */ jsx20("strong", { children: item.version }),
+          item.current && /* @__PURE__ */ jsx20("i", { children: "\u5F53\u524D\u7248\u672C" }),
+          /* @__PURE__ */ jsx20("time", { children: item.timestamp })
+        ] }),
+        /* @__PURE__ */ jsxs17("p", { children: [
+          /* @__PURE__ */ jsx20(Avatar, { name: item.author.name, src: item.author.avatar, size: "sm" }),
+          item.author.name
+        ] }),
+        item.description && /* @__PURE__ */ jsx20("div", { children: item.description }),
+        item.tags?.map((tag) => /* @__PURE__ */ jsx20("small", { children: tag }, tag))
+      ] })
+    ] }),
+    onRestore && !item.current && /* @__PURE__ */ jsx20("button", { type: "button", onClick: () => onRestore(item.id), children: "\u6062\u590D" })
+  ] }, item.id)) });
+}
+function PermissionMatrix({ subjects, resources, value, onChange, disabled }) {
+  return /* @__PURE__ */ jsx20("div", { className: "hf-permission-matrix", children: /* @__PURE__ */ jsxs17("table", { children: [
+    /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs17("tr", { children: [
+      /* @__PURE__ */ jsx20("th", { children: "\u6210\u5458\u6216\u89D2\u8272" }),
+      resources.map((item) => /* @__PURE__ */ jsx20("th", { children: item.name }, item.id))
+    ] }) }),
+    /* @__PURE__ */ jsx20("tbody", { children: subjects.map((subject) => /* @__PURE__ */ jsxs17("tr", { children: [
+      /* @__PURE__ */ jsxs17("th", { children: [
+        /* @__PURE__ */ jsx20("span", { children: subject.avatar }),
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx20("strong", { children: subject.name }),
+          subject.description && /* @__PURE__ */ jsx20("small", { children: subject.description })
+        ] })
+      ] }),
+      resources.map((resource) => /* @__PURE__ */ jsx20("td", { children: /* @__PURE__ */ jsxs17("select", { "aria-label": `${String(subject.name)} \u5BF9 ${String(resource.name)} \u7684\u6743\u9650`, disabled, value: value[subject.id]?.[resource.id] ?? "none", onChange: (event) => onChange(subject.id, resource.id, event.target.value), children: [
+        /* @__PURE__ */ jsx20("option", { value: "none", children: "\u65E0\u6743\u9650" }),
+        /* @__PURE__ */ jsx20("option", { value: "view", children: "\u67E5\u770B" }),
+        /* @__PURE__ */ jsx20("option", { value: "comment", children: "\u8BC4\u8BBA" }),
+        /* @__PURE__ */ jsx20("option", { value: "edit", children: "\u7F16\u8F91" }),
+        /* @__PURE__ */ jsx20("option", { value: "admin", children: "\u7BA1\u7406" })
+      ] }) }, resource.id))
+    ] }, subject.id)) })
+  ] }) });
+}
+function MemberPicker({ members, value, onChange, label = "\u6DFB\u52A0\u6210\u5458", disabled }) {
+  const [query, setQuery] = useState9("");
+  const results = useMemo3(() => members.filter((item) => !value.includes(item.id) && `${item.name} ${String(item.description ?? "")}`.toLowerCase().includes(query.toLowerCase())), [members, query, value]);
+  return /* @__PURE__ */ jsxs17("div", { className: "hf-member-picker", children: [
+    /* @__PURE__ */ jsx20("div", { children: value.map((id) => {
+      const item = members.find((member) => member.id === id);
+      return item && /* @__PURE__ */ jsxs17("span", { children: [
+        /* @__PURE__ */ jsx20(Avatar, { name: item.name, src: item.avatar, size: "sm" }),
+        item.name,
+        /* @__PURE__ */ jsx20("button", { type: "button", disabled, "aria-label": `\u79FB\u9664 ${item.name}`, onClick: () => onChange(value.filter((key) => key !== id)), children: "\xD7" })
+      ] }, id);
+    }) }),
+    /* @__PURE__ */ jsx20("input", { "aria-label": label, value: query, disabled, placeholder: label, onChange: (event) => setQuery(event.target.value) }),
+    query && /* @__PURE__ */ jsxs17("div", { className: "hf-member-picker__menu", children: [
+      results.map((item) => /* @__PURE__ */ jsxs17("button", { type: "button", onClick: () => {
+        onChange([...value, item.id]);
+        setQuery("");
+      }, children: [
+        /* @__PURE__ */ jsx20(Avatar, { name: item.name, src: item.avatar, size: "sm" }),
+        /* @__PURE__ */ jsxs17("span", { children: [
+          /* @__PURE__ */ jsx20("strong", { children: item.name }),
+          item.description && /* @__PURE__ */ jsx20("small", { children: item.description })
+        ] })
+      ] }, item.id)),
+      !results.length && /* @__PURE__ */ jsx20("p", { children: "\u6CA1\u6709\u5339\u914D\u6210\u5458" })
+    ] })
+  ] });
+}
+function SharePanel({ scope, onScopeChange, members, onCopyLink, linkCopied, footer }) {
+  return /* @__PURE__ */ jsxs17("section", { className: "hf-share-panel", children: [
+    /* @__PURE__ */ jsxs17("header", { children: [
+      /* @__PURE__ */ jsx20("strong", { children: "\u5171\u4EAB\u8BBE\u7F6E" }),
+      /* @__PURE__ */ jsx20("span", { children: "\u63A7\u5236\u8C01\u53EF\u4EE5\u8BBF\u95EE\u6B64\u5185\u5BB9" })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "hf-share-panel__scope", children: ["restricted", "organization", "public"].map((item) => /* @__PURE__ */ jsxs17("label", { children: [
+      /* @__PURE__ */ jsx20("input", { type: "radio", name: "hf-share-scope", checked: scope === item, onChange: () => onScopeChange(item) }),
+      /* @__PURE__ */ jsxs17("span", { children: [
+        /* @__PURE__ */ jsx20("strong", { children: { restricted: "\u4EC5\u53D7\u9080\u6210\u5458", organization: "\u7EC4\u7EC7\u5185\u6210\u5458", public: "\u62E5\u6709\u94FE\u63A5\u7684\u4EFB\u4F55\u4EBA" }[item] }),
+        /* @__PURE__ */ jsx20("small", { children: { restricted: "\u53EA\u6709\u5217\u8868\u4E2D\u7684\u6210\u5458\u53EF\u4EE5\u8BBF\u95EE", organization: "\u540C\u4E00\u7EC4\u7EC7\u6210\u5458\u5747\u53EF\u8BBF\u95EE", public: "\u65E0\u9700\u767B\u5F55\u5373\u53EF\u8BBF\u95EE" }[item] })
+      ] })
+    ] }, item)) }),
+    members && /* @__PURE__ */ jsx20("div", { className: "hf-share-panel__members", children: members }),
+    /* @__PURE__ */ jsxs17("footer", { children: [
+      /* @__PURE__ */ jsx20("button", { type: "button", onClick: onCopyLink, children: linkCopied ? "\u94FE\u63A5\u5DF2\u590D\u5236" : "\u590D\u5236\u94FE\u63A5" }),
+      footer
+    ] })
+  ] });
+}
+
+// src/components/Scheduling.tsx
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function EventCard({
+  event,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs18(
+    "button",
+    {
+      type: "button",
+      className: "hf-event-card",
+      onClick: () => onClick?.(event.id),
+      children: [
+        /* @__PURE__ */ jsx21("strong", { children: event.title }),
+        /* @__PURE__ */ jsxs18("time", { children: [
+          event.start,
+          "\u2013",
+          event.end
+        ] })
+      ]
+    }
+  );
+}
+function Scheduler({
+  days,
+  events,
+  onEventClick
+}) {
+  return /* @__PURE__ */ jsx21("div", { className: "hf-scheduler", children: days.map((day2) => /* @__PURE__ */ jsxs18("section", { children: [
+    /* @__PURE__ */ jsx21("strong", { children: day2 }),
+    events.filter((e) => e.start.startsWith(day2)).map((e) => /* @__PURE__ */ jsx21(EventCard, { event: e, onClick: onEventClick }, e.id))
+  ] }, day2)) });
+}
+function ResourceCalendar({
+  resources,
+  events
+}) {
+  return /* @__PURE__ */ jsx21("div", { className: "hf-resource-calendar", children: resources.map((r) => /* @__PURE__ */ jsxs18("section", { children: [
+    /* @__PURE__ */ jsx21("strong", { children: r.name }),
+    events.filter((e) => e.resourceId === r.id).map((e) => /* @__PURE__ */ jsx21(EventCard, { event: e }, e.id))
+  ] }, r.id)) });
+}
+function RecurrenceEditor({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs18("div", { className: "hf-recurrence", children: [
+    /* @__PURE__ */ jsxs18(
+      "select",
+      {
+        "aria-label": "\u91CD\u590D\u9891\u7387",
+        value: value.frequency,
+        onChange: (e) => onChange({
+          ...value,
+          frequency: e.target.value
+        }),
+        children: [
+          /* @__PURE__ */ jsx21("option", { value: "none", children: "\u4E0D\u91CD\u590D" }),
+          /* @__PURE__ */ jsx21("option", { value: "daily", children: "\u6BCF\u5929" }),
+          /* @__PURE__ */ jsx21("option", { value: "weekly", children: "\u6BCF\u5468" }),
+          /* @__PURE__ */ jsx21("option", { value: "monthly", children: "\u6BCF\u6708" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx21(
+      "input",
+      {
+        "aria-label": "\u91CD\u590D\u95F4\u9694",
+        type: "number",
+        min: 1,
+        value: value.interval,
+        onChange: (e) => onChange({ ...value, interval: +e.target.value })
+      }
+    )
+  ] });
+}
+function TimezoneSelect({
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx21(
+    "select",
+    {
+      "aria-label": "\u65F6\u533A",
+      className: "hf-timezone",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      children: options.map((o) => /* @__PURE__ */ jsxs18("option", { value: o.value, children: [
+        o.label,
+        " (",
+        o.offset,
+        ")"
+      ] }, o.value))
+    }
+  );
+}
+function AvailabilityGrid({
+  people,
+  slots,
+  value
+}) {
+  return /* @__PURE__ */ jsx21("div", { className: "hf-availability", children: /* @__PURE__ */ jsxs18("table", { children: [
+    /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsxs18("tr", { children: [
+      /* @__PURE__ */ jsx21("th", { children: "\u6210\u5458" }),
+      slots.map((s) => /* @__PURE__ */ jsx21("th", { children: s }, s))
+    ] }) }),
+    /* @__PURE__ */ jsx21("tbody", { children: people.map((p) => /* @__PURE__ */ jsxs18("tr", { children: [
+      /* @__PURE__ */ jsx21("th", { children: p.name }),
+      slots.map((s) => /* @__PURE__ */ jsx21("td", { children: /* @__PURE__ */ jsx21("i", { className: `is-${value[p.id]?.[s] ?? "unavailable"}` }) }, s))
+    ] }, p.id)) })
+  ] }) });
+}
+
+// src/foundations/Typography.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Typography({ as, variant = "body", muted, truncate, className = "", ...props }) {
+  const defaults = { display: "h1", h1: "h1", h2: "h2", h3: "h3", code: "code" };
+  const Tag2 = as ?? defaults[variant] ?? "p";
+  return /* @__PURE__ */ jsx22(Tag2, { className: `hf-typography hf-typography--${variant}${muted ? " is-muted" : ""}${truncate ? " is-truncated" : ""} ${className}`, ...props });
+}
+
+// src/navigation/types.ts
+function activateNavigationItem(item, onItemSelect) {
+  onItemSelect?.(item);
+}
+
+// src/navigation/FloatingNav.tsx
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+function FloatingNav({ brand, items, action, activeKey, onItemSelect, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs19("nav", { className: `hf-floating-nav ${className}`.trim(), "aria-label": "\u4E3B\u5BFC\u822A", ...props, children: [
+    /* @__PURE__ */ jsx23("div", { className: "hf-floating-nav__brand", children: brand }),
+    /* @__PURE__ */ jsx23("div", { className: "hf-floating-nav__items", children: items.map((item) => /* @__PURE__ */ jsx23("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => activateNavigationItem(item, onItemSelect), children: item.label }, item.key)) }),
+    action && /* @__PURE__ */ jsx23("div", { className: "hf-floating-nav__action", children: action })
+  ] });
+}
+
+// src/navigation/Sidebar.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+function Sidebar({ brand, items, activeKey, collapsed, defaultCollapsed = false, onCollapsedChange, onItemSelect, appearance = "flush", className = "", ...props }) {
+  const [internalCollapsed, setInternalCollapsed] = useState10(defaultCollapsed);
+  const isCollapsed = collapsed ?? internalCollapsed;
+  const toggle = () => {
+    const next = !isCollapsed;
+    if (collapsed === void 0) setInternalCollapsed(next);
+    onCollapsedChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs20("aside", { className: `hf-sidebar hf-sidebar--${appearance} ${isCollapsed ? "hf-sidebar--collapsed" : ""} ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs20("div", { className: "hf-sidebar__top", children: [
+      brand && /* @__PURE__ */ jsx24("div", { className: "hf-sidebar__brand", children: brand }),
+      /* @__PURE__ */ jsx24("button", { type: "button", onClick: toggle, "aria-label": isCollapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6536\u8D77\u4FA7\u8FB9\u680F", "aria-expanded": !isCollapsed, children: "\u2039" })
+    ] }),
+    /* @__PURE__ */ jsx24("nav", { "aria-label": "\u4FA7\u8FB9\u5BFC\u822A", children: items.map((item) => /* @__PURE__ */ jsxs20("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, title: isCollapsed ? item.label : void 0, onClick: () => activateNavigationItem(item, onItemSelect), children: [
+      /* @__PURE__ */ jsx24("span", { className: "hf-sidebar__icon", children: item.icon ?? item.label.slice(0, 1) }),
+      /* @__PURE__ */ jsx24("span", { className: "hf-sidebar__label", children: item.label })
+    ] }, item.key)) })
+  ] });
+}
+
+// src/navigation/Breadcrumb.tsx
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+function Breadcrumb({ items, separator = "/", onItemSelect, className = "", ...props }) {
+  return /* @__PURE__ */ jsx25("nav", { className: `hf-breadcrumb ${className}`.trim(), "aria-label": "\u9762\u5305\u5C51", ...props, children: /* @__PURE__ */ jsx25("ol", { children: items.map((item, index) => {
+    const current = index === items.length - 1;
+    return /* @__PURE__ */ jsxs21("li", { children: [
+      current ? /* @__PURE__ */ jsx25("span", { "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx25("a", { href: item.href ?? "#", onClick: () => activateNavigationItem(item, onItemSelect), children: item.label }),
+      !current && /* @__PURE__ */ jsx25("i", { "aria-hidden": "true", children: separator })
+    ] }, item.key);
+  }) }) });
+}
+
+// src/navigation/Menu.tsx
+import { useState as useState11 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+function DropdownMenu({ label, items, activeKey, onItemSelect, className = "", ...props }) {
+  const [open, setOpen] = useState11(false);
+  const ref = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  return /* @__PURE__ */ jsxs22("div", { ref, className: `hf-menu ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs22("button", { type: "button", "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen((value) => !value), children: [
+      label,
+      /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsx26("div", { className: "hf-menu__panel", role: "menu", children: items.map((item) => /* @__PURE__ */ jsx26("a", { role: "menuitem", href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => {
+      activateNavigationItem(item, onItemSelect);
+      setOpen(false);
+    }, children: item.label }, item.key)) })
+  ] });
+}
+function MegaMenu({ label, items, onItemSelect, className = "", ...props }) {
+  const [open, setOpen] = useState11(false);
+  const ref = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  return /* @__PURE__ */ jsxs22("div", { ref, className: `hf-menu hf-mega-menu ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs22("button", { type: "button", "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen((value) => !value), children: [
+      label,
+      /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsx26("div", { className: "hf-mega-menu__panel", role: "menu", children: items.map((group) => /* @__PURE__ */ jsxs22("section", { children: [
+      /* @__PURE__ */ jsx26("h3", { children: group.label }),
+      group.children?.map((item) => /* @__PURE__ */ jsxs22("a", { role: "menuitem", href: item.href ?? "#", onClick: () => {
+        activateNavigationItem(item, onItemSelect);
+        setOpen(false);
+      }, children: [
+        /* @__PURE__ */ jsx26("span", { children: item.icon }),
+        /* @__PURE__ */ jsxs22("span", { children: [
+          /* @__PURE__ */ jsx26("strong", { children: item.label }),
+          item.description && /* @__PURE__ */ jsx26("small", { children: item.description })
+        ] })
+      ] }, item.key))
+    ] }, group.key)) })
+  ] });
+}
+
+// src/navigation/MobileNavigation.tsx
+import { useId as useId4, useState as useState12 } from "react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+function MobileNavigation({ brand, items, mode = "drawer", activeKey, open, onOpenChange, onItemSelect, className = "", ...props }) {
+  const [internalOpen, setInternalOpen] = useState12(false);
+  const isOpen = open ?? internalOpen;
+  const panelId = useId4();
+  const setOpen = (next) => {
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const panelRef = useDismissibleLayer(isOpen, () => setOpen(false), true);
+  return /* @__PURE__ */ jsxs23("div", { className: `hf-mobile-nav ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs23("div", { className: "hf-mobile-nav__bar", children: [
+      /* @__PURE__ */ jsx27("div", { children: brand }),
+      /* @__PURE__ */ jsxs23("button", { type: "button", "aria-label": "\u6253\u5F00\u5BFC\u822A", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => setOpen(true), children: [
+        /* @__PURE__ */ jsx27("i", {}),
+        /* @__PURE__ */ jsx27("i", {}),
+        /* @__PURE__ */ jsx27("i", {})
+      ] })
+    ] }),
+    isOpen && /* @__PURE__ */ jsx27("div", { className: `hf-mobile-nav__backdrop hf-mobile-nav__backdrop--${mode}`, onMouseDown: (event) => event.target === event.currentTarget && setOpen(false), children: /* @__PURE__ */ jsxs23("nav", { ref: panelRef, id: panelId, className: "hf-mobile-nav__panel", "aria-label": "\u79FB\u52A8\u5BFC\u822A", tabIndex: -1, children: [
+      /* @__PURE__ */ jsxs23("header", { children: [
+        /* @__PURE__ */ jsx27("div", { children: brand }),
+        /* @__PURE__ */ jsx27("button", { type: "button", "aria-label": "\u5173\u95ED\u5BFC\u822A", onClick: () => setOpen(false), children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsx27("div", { className: "hf-mobile-nav__links", children: items.map((item, index) => /* @__PURE__ */ jsxs23("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, style: { "--hf-nav-index": index }, onClick: () => {
+        activateNavigationItem(item, onItemSelect);
+        setOpen(false);
+      }, children: [
+        /* @__PURE__ */ jsx27("span", { children: item.label }),
+        item.description && /* @__PURE__ */ jsx27("small", { children: item.description })
+      ] }, item.key)) })
+    ] }) })
+  ] });
+}
+
+// src/navigation/Scrollspy.tsx
+import { useEffect as useEffect4, useState as useState13 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function Scrollspy({ items, activeKey, onItemSelect, rootMargin = "-20% 0px -65%", className = "", ...props }) {
+  const [observedKey, setObservedKey] = useState13(items[0]?.key);
+  const currentKey = activeKey ?? observedKey;
+  useEffect4(() => {
+    if (activeKey || !("IntersectionObserver" in window)) return;
+    const observer = new IntersectionObserver((entries) => {
+      const visible = entries.find((entry) => entry.isIntersecting);
+      if (visible?.target.id) setObservedKey(visible.target.id);
+    }, { rootMargin });
+    items.forEach((item) => {
+      const section = document.getElementById(item.key);
+      if (section) observer.observe(section);
+    });
+    return () => observer.disconnect();
+  }, [activeKey, items, rootMargin]);
+  return /* @__PURE__ */ jsx28("nav", { className: `hf-scrollspy ${className}`.trim(), "aria-label": "\u9875\u5185\u5BFC\u822A", ...props, children: items.map((item) => /* @__PURE__ */ jsx28("a", { href: item.href ?? `#${item.key}`, "aria-current": currentKey === item.key ? "location" : void 0, onClick: () => onItemSelect?.(item), children: item.label }, item.key)) });
+}
+
+// src/navigation/ShrinkNav.tsx
+import { useEffect as useEffect5, useState as useState14 } from "react";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+function ShrinkNav({ brand, items, threshold = 48, action, activeKey, onItemSelect, className = "", ...props }) {
+  const [compact, setCompact] = useState14(false);
+  useEffect5(() => {
+    let frame = 0;
+    const update = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setCompact(window.scrollY > threshold));
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", update);
+    };
+  }, [threshold]);
+  return /* @__PURE__ */ jsxs24("nav", { className: `hf-shrink-nav ${compact ? "hf-shrink-nav--compact" : ""} ${className}`.trim(), "aria-label": "\u6EDA\u52A8\u5BFC\u822A", ...props, children: [
+    /* @__PURE__ */ jsx29("div", { className: "hf-shrink-nav__brand", children: brand }),
+    /* @__PURE__ */ jsx29("div", { className: "hf-shrink-nav__items", children: items.map((item) => /* @__PURE__ */ jsx29("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => onItemSelect?.(item), children: item.label }, item.key)) }),
+    action
+  ] });
+}
+
+// src/navigation/Tabs.tsx
+import { useId as useId5 } from "react";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+function Tabs({ items, value, onChange, variant = "line", label = "\u5185\u5BB9\u6807\u7B7E" }) {
+  const id = useId5();
+  const active = items.find((item) => item.key === value) ?? items[0];
+  const onKeyDown = (event) => {
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault();
+    const enabled = items.filter((item) => !item.disabled);
+    const current = enabled.findIndex((item) => item.key === value);
+    const offset = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+    const next = enabled[(current + offset + enabled.length) % enabled.length];
+    if (next) onChange(next.key);
+  };
+  return /* @__PURE__ */ jsxs25("div", { className: `hf-tabs hf-tabs--${variant}`, children: [
+    /* @__PURE__ */ jsx30("div", { role: "tablist", "aria-label": label, onKeyDown, children: items.map((item) => /* @__PURE__ */ jsxs25("button", { type: "button", role: "tab", id: `${id}-${item.key}`, "aria-controls": `${id}-${item.key}-panel`, "aria-selected": item.key === value, tabIndex: item.key === value ? 0 : -1, disabled: item.disabled, onClick: () => onChange(item.key), children: [
+      item.icon,
+      /* @__PURE__ */ jsx30("span", { children: item.label }),
+      item.badge && /* @__PURE__ */ jsx30("small", { children: item.badge })
+    ] }, item.key)) }),
+    active && /* @__PURE__ */ jsx30("div", { role: "tabpanel", id: `${id}-${active.key}-panel`, "aria-labelledby": `${id}-${active.key}`, tabIndex: 0, children: active.content })
+  ] });
+}
+
+// src/navigation/Steps.tsx
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+function Steps({ items, current, onChange, orientation = "horizontal" }) {
+  const currentIndex = Math.max(0, items.findIndex((item) => item.key === current));
+  return /* @__PURE__ */ jsx31("ol", { className: `hf-steps hf-steps--${orientation}`, children: items.map((item, index) => {
+    const state = index < currentIndex ? "complete" : index === currentIndex ? "current" : "upcoming";
+    return /* @__PURE__ */ jsx31("li", { className: `is-${state}`, "aria-current": state === "current" ? "step" : void 0, children: /* @__PURE__ */ jsxs26("button", { type: "button", disabled: item.disabled || !onChange, onClick: () => onChange?.(item.key), children: [
+      /* @__PURE__ */ jsx31("span", { children: state === "complete" ? "\u2713" : index + 1 }),
+      /* @__PURE__ */ jsxs26("span", { children: [
+        /* @__PURE__ */ jsx31("strong", { children: item.title }),
+        item.optional && /* @__PURE__ */ jsx31("small", { children: "\u53EF\u9009" }),
+        item.description && /* @__PURE__ */ jsx31("small", { children: item.description })
+      ] })
+    ] }) }, item.key);
+  }) });
+}
+
+// src/navigation/CommandPalette.tsx
+import { useEffect as useEffect6, useMemo as useMemo4, useState as useState15 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "\u8F93\u5165\u547D\u4EE4\u6216\u641C\u7D22\u2026" }) {
+  const [query, setQuery] = useState15("");
+  const [active, setActive] = useState15(0);
+  const enabled = useMemo4(() => items.filter((item) => !item.disabled && `${item.label} ${item.description ?? ""} ${item.group ?? ""}`.toLowerCase().includes(query.toLowerCase())), [items, query]);
+  const dialogRef = useDismissibleLayer(open, () => onOpenChange(false), true);
+  useEffect6(() => {
+    if (!open) {
+      setQuery("");
+      setActive(0);
+    }
+  }, [open]);
+  const keydown = (event) => {
+    if (!enabled.length) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive((current) => (current + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length);
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      setActive(event.key === "Home" ? 0 : enabled.length - 1);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const item = enabled[active];
+      if (item) {
+        onSelect(item.key);
+        onOpenChange(false);
+      }
+    }
+  };
+  if (!open) return null;
+  return createPortal3(/* @__PURE__ */ jsx32("div", { className: "hf-command-backdrop", onMouseDown: (event) => event.target === event.currentTarget && onOpenChange(false), children: /* @__PURE__ */ jsxs27("div", { ref: dialogRef, tabIndex: -1, className: "hf-command", role: "dialog", "aria-modal": "true", "aria-label": "\u547D\u4EE4\u9762\u677F", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "hf-command__search", children: [
+      /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: "\u2315" }),
+      /* @__PURE__ */ jsx32("input", { autoFocus: true, role: "combobox", "aria-expanded": "true", "aria-controls": "hf-command-list", value: query, placeholder, onChange: (event) => {
+        setQuery(event.target.value);
+        setActive(0);
+      }, onKeyDown: keydown }),
+      /* @__PURE__ */ jsx32("kbd", { children: "Esc" })
+    ] }),
+    /* @__PURE__ */ jsxs27("div", { id: "hf-command-list", className: "hf-command__list", role: "listbox", children: [
+      enabled.map((item, index) => /* @__PURE__ */ jsxs27("button", { type: "button", role: "option", "aria-selected": index === active, onPointerMove: () => setActive(index), onClick: () => {
+        onSelect(item.key);
+        onOpenChange(false);
+      }, children: [
+        item.icon,
+        /* @__PURE__ */ jsxs27("span", { children: [
+          /* @__PURE__ */ jsx32("strong", { children: item.label }),
+          item.description && /* @__PURE__ */ jsx32("small", { children: item.description })
+        ] }),
+        item.shortcut && /* @__PURE__ */ jsx32("kbd", { children: item.shortcut })
+      ] }, item.key)),
+      !enabled.length && /* @__PURE__ */ jsx32("div", { className: "hf-command__empty", children: "\u6CA1\u6709\u5339\u914D\u547D\u4EE4" })
+    ] })
+  ] }) }), document.body);
+}
+
+// src/layout/Layout.tsx
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+function Container({ size = "lg", padding = 24, className = "", style, ...props }) {
+  return /* @__PURE__ */ jsx33("div", { className: `hf-container hf-container--${size} ${className}`.trim(), style: { "--hf-container-padding": `${padding}px`, ...style }, ...props });
+}
+function Stack({ direction = "column", gap = 12, align, justify, wrap = false, className = "", style, ...props }) {
+  return /* @__PURE__ */ jsx33("div", { className: `hf-stack hf-stack--${direction} ${className}`.trim(), style: { "--hf-stack-gap": `${gap}px`, alignItems: align, justifyContent: justify, flexWrap: wrap ? "wrap" : void 0, ...style }, ...props });
+}
+function Grid({ columns = "auto", minItemWidth = 240, gap = 16, className = "", style, ...props }) {
+  const gridStyle = {
+    "--hf-grid-columns": columns === "auto" ? `repeat(auto-fit, minmax(min(100%, ${minItemWidth}px), 1fr))` : `repeat(${columns}, minmax(0, 1fr))`,
+    "--hf-grid-gap": `${gap}px`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx33("div", { className: `hf-grid ${className}`.trim(), style: gridStyle, ...props });
+}
+function Masonry({ columns, minColumnWidth = 260, gap = 16, className = "", style, children, ...props }) {
+  const masonryStyle = {
+    "--hf-masonry-columns": columns ?? "auto",
+    "--hf-masonry-width": `${minColumnWidth}px`,
+    "--hf-masonry-gap": `${gap}px`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx33("div", { className: `hf-masonry ${className}`.trim(), style: masonryStyle, ...props, children });
+}
+function PageLayout({ variant = "single", sidebar, header, sidebarWidth = 280, className = "", style, children, ...props }) {
+  const layoutStyle = { "--hf-layout-sidebar": `${sidebarWidth}px`, ...style };
+  return /* @__PURE__ */ jsxs28("div", { className: `hf-page-layout hf-page-layout--${variant} ${className}`.trim(), style: layoutStyle, ...props, children: [
+    header && /* @__PURE__ */ jsx33("header", { className: "hf-page-layout__header", children: header }),
+    sidebar && /* @__PURE__ */ jsx33("aside", { className: "hf-page-layout__sidebar", children: sidebar }),
+    /* @__PURE__ */ jsx33("main", { className: "hf-page-layout__main", children })
+  ] });
+}
+
+// src/layout/Skeleton.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+function Skeleton({ width = "100%", height = 16, radius, circle, animated = true, className = "", style, ...props }) {
+  const value = (input) => typeof input === "number" ? `${input}px` : input;
+  return /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: `hf-skeleton ${animated ? "is-animated" : ""} ${circle ? "is-circle" : ""} ${className}`.trim(), style: { width: value(width), height: value(height), borderRadius: radius ? value(radius) : void 0, ...style }, ...props });
+}
+
+// src/feedback/Loading.tsx
+import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
+function Spinner({ label = "\u6B63\u5728\u52A0\u8F7D", size = 20, className = "" }) {
+  return /* @__PURE__ */ jsx35("span", { className: `hf-loading-spinner ${className}`.trim(), role: "status", "aria-label": label, style: { "--hf-loading-size": `${size}px` } });
+}
+function LoadingDots({ label = "\u6B63\u5728\u52A0\u8F7D" }) {
+  return /* @__PURE__ */ jsxs29("span", { className: "hf-loading-dots", role: "status", "aria-label": label, children: [
+    /* @__PURE__ */ jsx35("i", {}),
+    /* @__PURE__ */ jsx35("i", {}),
+    /* @__PURE__ */ jsx35("i", {})
+  ] });
+}
+function ProgressBar({ value, label, indeterminate = false, className = "" }) {
+  const percent = Math.min(100, Math.max(0, value ?? 0));
+  return /* @__PURE__ */ jsxs29("div", { className: `hf-progress ${indeterminate ? "is-indeterminate" : ""} ${className}`.trim(), children: [
+    label && /* @__PURE__ */ jsxs29("div", { className: "hf-progress__label", children: [
+      /* @__PURE__ */ jsx35("span", { children: label }),
+      !indeterminate && /* @__PURE__ */ jsxs29("strong", { children: [
+        percent,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx35("div", { className: "hf-progress__track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? void 0 : percent, children: /* @__PURE__ */ jsx35("i", { style: { "--hf-progress": `${percent}%` } }) })
+  ] });
+}
+function ProgressRing({ value, size = 72, label }) {
+  const percent = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsx35("span", { className: "hf-progress-ring", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, style: { "--hf-ring-value": `${percent * 3.6}deg`, "--hf-ring-size": `${size}px` }, children: /* @__PURE__ */ jsxs29("strong", { children: [
+    percent,
+    "%"
+  ] }) });
+}
+function LoadingOverlay({ active = true, label = "\u6B63\u5728\u51C6\u5907\u5185\u5BB9", className = "", children, ...props }) {
+  return /* @__PURE__ */ jsxs29("div", { className: `hf-loading-overlay ${className}`.trim(), "aria-busy": active, ...props, children: [
+    children,
+    active && /* @__PURE__ */ jsxs29("div", { className: "hf-loading-overlay__veil", role: "status", children: [
+      /* @__PURE__ */ jsx35(Spinner, { label, size: 28 }),
+      /* @__PURE__ */ jsx35("span", { children: label })
+    ] })
+  ] });
+}
+
+// src/forms/Select.tsx
+import { forwardRef as forwardRef5, useEffect as useEffect7, useId as useId6, useRef as useRef4, useState as useState16 } from "react";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
+var Select = forwardRef5(function Select2({ id, label, hint, error, options, placeholder, className = "", value, defaultValue, onChange, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, forwardedRef) {
+  const generatedId = useId6();
+  const inputId = id ?? generatedId;
+  const triggerId = `${inputId}-trigger`;
+  const listboxId = `${inputId}-listbox`;
+  const descriptionId = `${inputId}-description`;
+  const [open, setOpen] = useState16(false);
+  const rootRef = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  const nativeRef = useRef4(null);
+  const [innerValue, setInnerValue] = useState16(() => String(defaultValue ?? (placeholder ? "" : options.find((option) => !option.disabled)?.value ?? "")));
+  const selectedValue = value === void 0 ? innerValue : String(value);
+  const selectedOption = options.find((option) => option.value === selectedValue);
+  const enabledIndices = options.map((option, index) => option.disabled ? -1 : index).filter((index) => index >= 0);
+  const selectedIndex = options.findIndex((option) => option.value === selectedValue);
+  const [activeIndex, setActiveIndex] = useState16(selectedIndex >= 0 ? selectedIndex : enabledIndices[0] ?? -1);
+  const assignRef = (node) => {
+    nativeRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const handleNativeChange = (event) => {
+    if (value === void 0) setInnerValue(event.currentTarget.value);
+    onChange?.(event);
+  };
+  const choose = (nextValue) => {
+    const native = nativeRef.current;
+    if (!native) return;
+    Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set?.call(native, nextValue);
+    native.dispatchEvent(new Event("change", { bubbles: true }));
+    if (value === void 0) setInnerValue(nextValue);
+    setOpen(false);
+    window.requestAnimationFrame(() => document.getElementById(triggerId)?.focus());
+  };
+  useEffect7(() => {
+    if (selectedIndex >= 0) setActiveIndex(selectedIndex);
+  }, [selectedIndex]);
+  const move = (direction) => {
+    if (!enabledIndices.length) return;
+    const current = enabledIndices.indexOf(activeIndex);
+    const next = current < 0 ? 0 : (current + direction + enabledIndices.length) % enabledIndices.length;
+    setActiveIndex(enabledIndices[next]);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      move(event.key === "ArrowDown" ? 1 : -1);
+    } else if ((event.key === "Enter" || event.key === " ") && open) {
+      event.preventDefault();
+      const option = options[activeIndex];
+      if (option && !option.disabled) choose(option.value);
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === "Home" && open && enabledIndices.length) {
+      event.preventDefault();
+      setActiveIndex(enabledIndices[0]);
+    } else if (event.key === "End" && open && enabledIndices.length) {
+      event.preventDefault();
+      setActiveIndex(enabledIndices[enabledIndices.length - 1]);
+    } else if (event.key === "Tab") setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: `hf-field ${className}`.trim(), ref: rootRef, children: [
+    label && /* @__PURE__ */ jsx36("label", { className: "hf-field__label", htmlFor: triggerId, children: label }),
+    /* @__PURE__ */ jsxs30("div", { className: `hf-select-shell ${open ? "hf-select-shell--open" : ""} ${error ? "hf-select-shell--error" : ""}`, children: [
+      /* @__PURE__ */ jsxs30("select", { ref: assignRef, id: inputId, className: "hf-select-native", tabIndex: -1, "aria-hidden": "true", value: selectedValue, disabled, onChange: handleNativeChange, ...props, children: [
+        placeholder && /* @__PURE__ */ jsx36("option", { value: "", disabled: true, children: placeholder }),
+        options.map((option) => /* @__PURE__ */ jsx36("option", { value: option.value, disabled: option.disabled, children: typeof option.label === "string" ? option.label : option.value }, option.value))
+      ] }),
+      /* @__PURE__ */ jsxs30("button", { id: triggerId, type: "button", className: "hf-select", disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : void 0, "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0, "aria-invalid": Boolean(error), "aria-describedby": hint || error ? descriptionId : void 0, onClick: () => {
+        setActiveIndex(selectedIndex >= 0 ? selectedIndex : enabledIndices[0] ?? -1);
+        setOpen((current) => !current);
+      }, onKeyDown: handleKeyDown, children: [
+        /* @__PURE__ */ jsx36("span", { className: !selectedOption ? "hf-select__placeholder" : "", children: selectedOption?.label ?? placeholder ?? "\u8BF7\u9009\u62E9" }),
+        /* @__PURE__ */ jsx36("svg", { className: "hf-select__chevron", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx36("path", { d: open ? "m4.5 9.75 3.5-3.5 3.5 3.5" : "m4.5 6.25 3.5 3.5 3.5-3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ] }),
+      open && /* @__PURE__ */ jsx36("div", { id: listboxId, className: "hf-select-menu", role: "listbox", "aria-labelledby": triggerId, children: options.map((option, index) => /* @__PURE__ */ jsxs30("button", { id: `${listboxId}-option-${index}`, type: "button", role: "option", "aria-selected": option.value === selectedValue, disabled: option.disabled, className: index === activeIndex ? "is-active" : "", onPointerMove: () => !option.disabled && setActiveIndex(index), onClick: () => choose(option.value), children: [
+        /* @__PURE__ */ jsx36("span", { children: option.label }),
+        option.value === selectedValue && /* @__PURE__ */ jsx36("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx36("path", { d: "m3.5 8 3 3 6-6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ] }, option.value)) })
+    ] }),
+    (error || hint) && /* @__PURE__ */ jsx36("span", { id: descriptionId, className: `hf-field__hint ${error ? "hf-field__hint--error" : ""}`, children: error ?? hint })
+  ] });
+});
+
+// src/forms/MultiSelect.tsx
+import { useId as useId7, useState as useState17 } from "react";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
+function MultiSelect({ label, options, value, onChange, placeholder = "\u8BF7\u9009\u62E9", max, hint, disabled }) {
+  const [open, setOpen] = useState17(false);
+  const rootRef = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  const listId = useId7();
+  const toggle = (next) => {
+    const selected = value.includes(next);
+    if (!selected && max && value.length >= max) return;
+    onChange(selected ? value.filter((item) => item !== next) : [...value, next]);
+  };
+  return /* @__PURE__ */ jsxs31("div", { className: "hf-field hf-multiselect", ref: rootRef, children: [
+    label && /* @__PURE__ */ jsx37("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsxs31("div", { className: "hf-multiselect__trigger", role: "combobox", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-expanded": open, "aria-controls": listId, onClick: () => !disabled && setOpen(!open), onKeyDown: (event) => {
+      if (!disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setOpen(!open);
+      }
+    }, children: [
+      /* @__PURE__ */ jsx37("span", { children: value.length ? value.map((item) => {
+        const option = options.find((candidate) => candidate.value === item);
+        return /* @__PURE__ */ jsxs31("i", { children: [
+          option?.label,
+          /* @__PURE__ */ jsx37("button", { type: "button", "aria-label": `\u79FB\u9664 ${String(option?.label)}`, onClick: (event) => {
+            event.stopPropagation();
+            toggle(item);
+          }, children: "\xD7" })
+        ] }, item);
+      }) : /* @__PURE__ */ jsx37("em", { children: placeholder }) }),
+      /* @__PURE__ */ jsx37(Icon, { name: "chevron-down", size: 16, className: "hf-multiselect__chevron" })
+    ] }),
+    open && /* @__PURE__ */ jsx37("div", { id: listId, className: "hf-multiselect__menu", role: "listbox", "aria-multiselectable": "true", children: options.map((option) => /* @__PURE__ */ jsxs31("button", { type: "button", role: "option", "aria-selected": value.includes(option.value), disabled: option.disabled, onClick: () => toggle(option.value), children: [
+      /* @__PURE__ */ jsx37("span", { children: option.label }),
+      /* @__PURE__ */ jsx37("i", { children: value.includes(option.value) ? "\u2713" : "" })
+    ] }, option.value)) }),
+    hint && /* @__PURE__ */ jsx37("span", { className: "hf-field__hint", children: hint })
+  ] });
+}
+
+// src/forms/ChoiceGroup.tsx
+import { useId as useId8 } from "react";
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+function ChoiceGroup({ label, options, value, defaultValue, onChange, type = "radio", direction = "column", disabled, name }) {
+  const id = useId8();
+  const groupName = name ?? id;
+  const values = Array.isArray(value) ? value : value ? [value] : void 0;
+  const defaults = Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : [];
+  return /* @__PURE__ */ jsxs32("fieldset", { className: `hf-choice-group hf-choice-group--${direction}`, disabled, children: [
+    label && /* @__PURE__ */ jsx38("legend", { children: label }),
+    options.map((option) => {
+      const checked = values?.includes(option.value);
+      return /* @__PURE__ */ jsxs32("label", { className: "hf-choice", children: [
+        /* @__PURE__ */ jsx38("input", { type, name: type === "radio" ? groupName : `${groupName}-${option.value}`, value: option.value, checked, defaultChecked: values ? void 0 : defaults.includes(option.value), disabled: option.disabled, onChange: (event) => {
+          if (type === "radio") onChange?.(option.value);
+          else {
+            const next = new Set(values ?? defaults);
+            event.currentTarget.checked ? next.add(option.value) : next.delete(option.value);
+            onChange?.([...next]);
+          }
+        } }),
+        /* @__PURE__ */ jsx38("span", { className: "hf-choice__control", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs32("span", { className: "hf-choice__copy", children: [
+          /* @__PURE__ */ jsx38("strong", { children: option.label }),
+          option.description && /* @__PURE__ */ jsx38("small", { children: option.description })
+        ] })
+      ] }, option.value);
+    })
+  ] });
+}
+function RadioGroup(props) {
+  return /* @__PURE__ */ jsx38(ChoiceGroup, { ...props, type: "radio", onChange: (next) => props.onChange?.(next) });
+}
+function CheckboxGroup(props) {
+  return /* @__PURE__ */ jsx38(ChoiceGroup, { ...props, type: "checkbox", onChange: (next) => props.onChange?.(next) });
+}
+
+// src/forms/ValidatedInput.tsx
+import { useState as useState18 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+function validateValue(value, rules) {
+  return rules.find((rule) => !rule.validate(value))?.message;
+}
+function ValidatedInput({ value, rules, validateOn = "blur", onChange, onValidityChange, ...props }) {
+  const [touched, setTouched] = useState18(false);
+  const error = touched ? validateValue(value, rules) : void 0;
+  const update = (next) => {
+    onChange(next);
+    if (validateOn === "change") setTouched(true);
+    onValidityChange?.(!validateValue(next, rules));
+  };
+  return /* @__PURE__ */ jsx39(Input, { ...props, value, error, onChange: (event) => update(event.target.value), onBlur: () => setTouched(true) });
+}
+function validateForm(event) {
+  if (!event.currentTarget.checkValidity()) {
+    event.preventDefault();
+    event.currentTarget.reportValidity();
+    return false;
+  }
+  return true;
+}
+
+// src/forms/Textarea.tsx
+import { forwardRef as forwardRef6, useId as useId9 } from "react";
+import { jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
+var Textarea = forwardRef6(function Textarea2({ label, hint, error, resize = "vertical", id, className = "", ...props }, ref) {
+  const generated = useId9();
+  const fieldId = id ?? generated;
+  const message = error ?? hint;
+  const messageId = message ? `${fieldId}-message` : void 0;
+  return /* @__PURE__ */ jsxs33("label", { className: "hf-field", htmlFor: fieldId, children: [
+    label && /* @__PURE__ */ jsx40("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsx40("textarea", { ref, id: fieldId, className: `hf-textarea hf-textarea--${resize}${error ? " hf-textarea--error" : ""} ${className}`, "aria-invalid": error ? true : void 0, "aria-describedby": messageId, ...props }),
+    message && /* @__PURE__ */ jsx40("span", { id: messageId, className: `hf-field__hint${error ? " hf-field__hint--error" : ""}`, children: message })
+  ] });
+});
+
+// src/forms/Choice.tsx
+import { forwardRef as forwardRef7, useEffect as useEffect8, useRef as useRef5 } from "react";
+import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+var Checkbox = forwardRef7(function Checkbox2({ label, description, indeterminate, className = "", ...props }, forwardedRef) {
+  const local = useRef5(null);
+  useEffect8(() => {
+    if (local.current) local.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const setRef = (node) => {
+    local.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  return /* @__PURE__ */ jsxs34("label", { className: `hf-choice-control ${className}`, children: [
+    /* @__PURE__ */ jsx41("input", { ref: setRef, type: "checkbox", ...props }),
+    /* @__PURE__ */ jsx41("span", { className: "hf-choice-control__mark", children: /* @__PURE__ */ jsx41(IconCheck, {}) }),
+    /* @__PURE__ */ jsxs34("span", { children: [
+      /* @__PURE__ */ jsx41("strong", { children: label }),
+      description && /* @__PURE__ */ jsx41("small", { children: description })
+    ] })
+  ] });
+});
+var Radio = forwardRef7(function Radio2({ label, description, className = "", ...props }, ref) {
+  return /* @__PURE__ */ jsxs34("label", { className: `hf-choice-control hf-choice-control--radio ${className}`, children: [
+    /* @__PURE__ */ jsx41("input", { ref, type: "radio", ...props }),
+    /* @__PURE__ */ jsx41("span", { className: "hf-choice-control__mark", children: /* @__PURE__ */ jsx41("i", {}) }),
+    /* @__PURE__ */ jsxs34("span", { children: [
+      /* @__PURE__ */ jsx41("strong", { children: label }),
+      description && /* @__PURE__ */ jsx41("small", { children: description })
+    ] })
+  ] });
+});
+function IconCheck() {
+  return /* @__PURE__ */ jsx41("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx41("path", { d: "m3.5 8 3 3 6-6" }) });
+}
+
+// src/forms/Advanced.tsx
+import {
+  useState as useState19
+} from "react";
+import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+var iso = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+function Calendar({ value, onChange, min, max, className = "" }) {
+  const initial = value ? /* @__PURE__ */ new Date(`${value}T00:00:00`) : /* @__PURE__ */ new Date();
+  const [view, setView] = useState19(new Date(initial.getFullYear(), initial.getMonth(), 1));
+  const first = view.getDay();
+  const days = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
+  const cells = Array.from(
+    { length: Math.ceil((first + days) / 7) * 7 },
+    (_, index) => index - first + 1
+  );
+  return /* @__PURE__ */ jsxs35("div", { className: `hf-calendar ${className}`, children: [
+    /* @__PURE__ */ jsxs35("header", { children: [
+      /* @__PURE__ */ jsx42(
+        "button",
+        {
+          type: "button",
+          "aria-label": "\u4E0A\u4E2A\u6708",
+          onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)),
+          children: /* @__PURE__ */ jsx42(Icon, { name: "chevron-down", className: "hf-calendar__prev" })
+        }
+      ),
+      /* @__PURE__ */ jsxs35("strong", { children: [
+        view.getFullYear(),
+        " \u5E74 ",
+        view.getMonth() + 1,
+        " \u6708"
+      ] }),
+      /* @__PURE__ */ jsx42(
+        "button",
+        {
+          type: "button",
+          "aria-label": "\u4E0B\u4E2A\u6708",
+          onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)),
+          children: /* @__PURE__ */ jsx42(Icon, { name: "chevron-down", className: "hf-calendar__next" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx42("div", { className: "hf-calendar__week", children: "\u65E5\u4E00\u4E8C\u4E09\u56DB\u4E94\u516D".split("").map((day2) => /* @__PURE__ */ jsx42("span", { children: day2 }, day2)) }),
+    /* @__PURE__ */ jsx42("div", { className: "hf-calendar__days", children: cells.map((day2, index) => {
+      if (day2 < 1 || day2 > days) return /* @__PURE__ */ jsx42("span", {}, index);
+      const date = iso(new Date(view.getFullYear(), view.getMonth(), day2));
+      const disabled = Boolean(min && date < min || max && date > max);
+      const stateClass = date === value ? "is-selected" : date === iso(/* @__PURE__ */ new Date()) ? "is-today" : "";
+      return /* @__PURE__ */ jsx42(
+        "button",
+        {
+          type: "button",
+          disabled,
+          className: stateClass,
+          "aria-pressed": date === value,
+          onClick: () => onChange?.(date),
+          children: day2
+        },
+        date
+      );
+    }) })
+  ] });
+}
+function DatePicker({
+  label,
+  value,
+  onChange,
+  placeholder = "\u9009\u62E9\u65E5\u671F",
+  min,
+  max,
+  error
+}) {
+  const [open, setOpen] = useState19(false);
+  const rootRef = useDismissibleLayer(open, () => setOpen(false), {
+    autoFocus: false
+  });
+  return /* @__PURE__ */ jsxs35("div", { ref: rootRef, className: "hf-field hf-date-picker", children: [
+    label && /* @__PURE__ */ jsx42("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsxs35(
+      "button",
+      {
+        type: "button",
+        className: `hf-picker-trigger${error ? " is-error" : ""}`,
+        "aria-expanded": open,
+        onClick: () => setOpen(!open),
+        children: [
+          /* @__PURE__ */ jsx42("span", { className: value ? "" : "is-placeholder", children: value || placeholder }),
+          /* @__PURE__ */ jsx42(Icon, { name: "chevron-down", size: 16 })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx42("div", { className: "hf-date-picker__panel", children: /* @__PURE__ */ jsx42(
+      Calendar,
+      {
+        value,
+        min,
+        max,
+        onChange: (next) => {
+          onChange(next);
+          setOpen(false);
+        }
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx42("span", { className: "hf-field__hint hf-field__hint--error", children: error })
+  ] });
+}
+function TimePicker({ label, value, onChange, step = 30 }) {
+  const [open, setOpen] = useState19(false);
+  const rootRef = useDismissibleLayer(open, () => setOpen(false), {
+    autoFocus: false
+  });
+  const times = Array.from({ length: Math.ceil(1440 / step) }, (_, index) => {
+    const minutes = index * step;
+    return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+  });
+  return /* @__PURE__ */ jsxs35("div", { ref: rootRef, className: "hf-field hf-time-picker", children: [
+    label && /* @__PURE__ */ jsx42("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsxs35(
+      "button",
+      {
+        type: "button",
+        className: "hf-picker-trigger",
+        "aria-expanded": open,
+        onClick: () => setOpen(!open),
+        children: [
+          /* @__PURE__ */ jsx42("span", { className: value ? "" : "is-placeholder", children: value || "\u9009\u62E9\u65F6\u95F4" }),
+          /* @__PURE__ */ jsx42(Icon, { name: "chevron-down", size: 16 })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx42("div", { className: "hf-time-picker__panel", role: "listbox", children: times.map((time) => /* @__PURE__ */ jsx42(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": time === value,
+        onClick: () => {
+          onChange(time);
+          setOpen(false);
+        },
+        children: time
+      },
+      time
+    )) })
+  ] });
+}
+function Slider({
+  label,
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  showValue = true,
+  ...props
+}) {
+  const percent = (value - Number(min)) / (Number(max) - Number(min)) * 100;
+  return /* @__PURE__ */ jsxs35("label", { className: "hf-slider", children: [
+    /* @__PURE__ */ jsxs35("span", { children: [
+      label,
+      showValue && /* @__PURE__ */ jsx42("strong", { children: value })
+    ] }),
+    /* @__PURE__ */ jsx42(
+      "input",
+      {
+        type: "range",
+        value,
+        min,
+        max,
+        step,
+        style: { "--hf-slider-value": `${percent}%` },
+        onChange: (event) => onChange(Number(event.target.value)),
+        ...props
+      }
+    )
+  ] });
+}
+
+// src/forms/Form.tsx
+import {
+  createContext,
+  useContext
+} from "react";
+import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
+var FormContext = createContext({});
+function Form({
+  layout = "vertical",
+  disabled,
+  className = "",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx43(FormContext.Provider, { value: { disabled }, children: /* @__PURE__ */ jsx43(
+    "form",
+    {
+      className: `hf-form hf-form--${layout} ${className}`.trim(),
+      "aria-disabled": disabled || void 0,
+      ...props,
+      children: /* @__PURE__ */ jsx43("fieldset", { className: "hf-form__fieldset", disabled, children })
+    }
+  ) });
+}
+function FormItem({
+  label,
+  required,
+  hint,
+  error,
+  children,
+  className = "",
+  ...props
+}) {
+  const { disabled } = useContext(FormContext);
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    {
+      className: `hf-form-item${error ? " is-error" : ""} ${className}`.trim(),
+      "aria-disabled": disabled || void 0,
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsxs36("div", { className: "hf-form-item__label", children: [
+          label,
+          required && /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs36("div", { children: [
+          children,
+          (error || hint) && /* @__PURE__ */ jsx43("small", { className: error ? "is-error" : "", children: error || hint })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/forms/Upload.tsx
+import {
+  useId as useId10,
+  useRef as useRef6,
+  useState as useState20
+} from "react";
+import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
+function formatFileSize(bytes) {
+  if (bytes >= 1024 * 1024) {
+    const megabytes = bytes / (1024 * 1024);
+    return `${Number.isInteger(megabytes) ? megabytes : megabytes.toFixed(1)} MB`;
+  }
+  if (bytes >= 1024) return `${Math.ceil(bytes / 1024)} KB`;
+  return `${bytes} B`;
+}
+function acceptsFile(file, accept) {
+  if (!accept?.trim()) return true;
+  const fileName = file.name.toLowerCase();
+  const mimeType = file.type.toLowerCase();
+  return accept.split(",").map((value) => value.trim().toLowerCase()).filter(Boolean).some((rule) => {
+    if (rule.startsWith(".")) return fileName.endsWith(rule);
+    if (rule.endsWith("/*")) return mimeType.startsWith(rule.slice(0, -1));
+    return mimeType === rule;
+  });
+}
+function validateUploadFiles(files, options = {}) {
+  const accepted = [];
+  const rejected = [];
+  const limit = options.maxFiles ?? Number.POSITIVE_INFINITY;
+  files.forEach((file) => {
+    if (!acceptsFile(file, options.accept)) {
+      rejected.push({ file, reason: "file-type-not-accepted", message: "\u4E0D\u652F\u6301\u8BE5\u6587\u4EF6\u7C7B\u578B" });
+      return;
+    }
+    if (options.maxSize !== void 0 && file.size > options.maxSize) {
+      rejected.push({
+        file,
+        reason: "file-too-large",
+        message: `\u6587\u4EF6\u4E0D\u80FD\u8D85\u8FC7 ${formatFileSize(options.maxSize)}`
+      });
+      return;
+    }
+    if (accepted.length >= limit) {
+      rejected.push({
+        file,
+        reason: "too-many-files",
+        message: `\u6700\u591A\u53EA\u80FD\u9009\u62E9 ${limit} \u4E2A\u6587\u4EF6`
+      });
+      return;
+    }
+    accepted.push(file);
+  });
+  return { accepted, rejected };
+}
+function Upload({
+  label = "\u4E0A\u4F20\u6587\u4EF6",
+  accept,
+  multiple,
+  maxFiles,
+  maxSize,
+  onFiles,
+  onReject,
+  hint,
+  disabled
+}) {
+  const id = useId10();
+  const ref = useRef6(null);
+  const [dragging, setDragging] = useState20(false);
+  const [rejections, setRejections] = useState20([]);
+  const takeFiles = (list) => {
+    const result = validateUploadFiles(Array.from(list ?? []), {
+      accept,
+      maxFiles,
+      maxSize
+    });
+    setRejections(result.rejected);
+    onFiles(result.accepted);
+    if (result.rejected.length) onReject?.(result.rejected);
+  };
+  return /* @__PURE__ */ jsxs37("div", { className: "hf-upload", children: [
+    /* @__PURE__ */ jsx44(
+      "input",
+      {
+        ref,
+        id,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        onChange: (event) => takeFiles(event.target.files)
+      }
+    ),
+    /* @__PURE__ */ jsxs37(
+      "button",
+      {
+        type: "button",
+        disabled,
+        className: dragging ? "is-dragging" : "",
+        onClick: () => ref.current?.click(),
+        onDragOver: (event) => {
+          event.preventDefault();
+          if (!disabled) setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (event) => {
+          event.preventDefault();
+          setDragging(false);
+          if (!disabled) takeFiles(event.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ jsx44(Icon, { name: "inbox", size: 24 }),
+          /* @__PURE__ */ jsx44("strong", { children: label }),
+          /* @__PURE__ */ jsx44("span", { children: "\u62D6\u653E\u5230\u8FD9\u91CC\uFF0C\u6216\u70B9\u51FB\u9009\u62E9" })
+        ]
+      }
+    ),
+    rejections.length > 0 && /* @__PURE__ */ jsx44("div", { className: "hf-upload__errors", role: "alert", children: rejections.map(({ file, reason, message }, index) => /* @__PURE__ */ jsxs37("span", { children: [
+      file.name,
+      "\uFF1A",
+      message
+    ] }, `${file.name}-${reason}-${index}`)) }),
+    hint && /* @__PURE__ */ jsx44("small", { children: hint })
+  ] });
+}
+
+// src/forms/Combobox.tsx
+import { useId as useId11, useMemo as useMemo5, useState as useState21 } from "react";
+import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
+function Combobox({ label, options, value = "", onChange, placeholder = "\u641C\u7D22\u6216\u9009\u62E9", hint, error, disabled, emptyText = "\u6CA1\u6709\u5339\u914D\u9879" }) {
+  const id = useId11();
+  const [open, setOpen] = useState21(false);
+  const root = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  const [query, setQuery] = useState21("");
+  const [active, setActive] = useState21(0);
+  const selected = options.find((item) => item.value === value);
+  const filtered = useMemo5(() => options.filter((item) => `${typeof item.label === "string" ? item.label : item.value} ${item.keywords ?? ""}`.toLowerCase().includes(query.toLowerCase())), [options, query]);
+  const choose = (next) => {
+    onChange(next);
+    setQuery("");
+    setOpen(false);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setOpen(true);
+      setActive((current) => Math.max(0, Math.min(filtered.length - 1, current + (event.key === "ArrowDown" ? 1 : -1))));
+    } else if (event.key === "Enter" && open) {
+      event.preventDefault();
+      const option = filtered[active];
+      if (option && !option.disabled) choose(option.value);
+    } else if (event.key === "Escape") setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs38("div", { className: "hf-field hf-combobox", ref: root, children: [
+    label && /* @__PURE__ */ jsx45("label", { className: "hf-field__label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs38("div", { className: `hf-combobox__control${open ? " is-open" : ""}${error ? " is-error" : ""}`, children: [
+      /* @__PURE__ */ jsx45("input", { id, role: "combobox", "aria-expanded": open, "aria-controls": `${id}-listbox`, "aria-autocomplete": "list", "aria-invalid": Boolean(error), disabled, placeholder: selected && !open ? String(selected.label) : placeholder, value: open ? query : selected ? String(selected.label) : "", onFocus: () => setOpen(true), onChange: (event) => {
+        setQuery(event.target.value);
+        setActive(0);
+        setOpen(true);
+      }, onKeyDown }),
+      /* @__PURE__ */ jsx45("button", { type: "button", "aria-label": open ? "\u5173\u95ED\u9009\u9879" : "\u6253\u5F00\u9009\u9879", disabled, onClick: () => setOpen((current) => !current), children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsx45("div", { id: `${id}-listbox`, className: "hf-combobox__menu", role: "listbox", children: filtered.length ? filtered.map((option, index) => /* @__PURE__ */ jsxs38("button", { type: "button", role: "option", "aria-selected": option.value === value, disabled: option.disabled, className: index === active ? "is-active" : "", onPointerMove: () => setActive(index), onClick: () => choose(option.value), children: [
+      /* @__PURE__ */ jsx45("span", { children: option.label }),
+      option.value === value && /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", children: "\u2713" })
+    ] }, option.value)) : /* @__PURE__ */ jsx45("div", { className: "hf-combobox__empty", children: emptyText }) }),
+    (error || hint) && /* @__PURE__ */ jsx45("span", { className: `hf-field__hint${error ? " hf-field__hint--error" : ""}`, children: error ?? hint })
+  ] });
+}
+
+// src/forms/NumberInput.tsx
+import { useId as useId12 } from "react";
+import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
+function NumberInput({ label, value, onChange, min, max, step = 1, prefix, suffix, hint, error, disabled }) {
+  const id = useId12();
+  const clamp = (next) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, next));
+  return /* @__PURE__ */ jsxs39("div", { className: "hf-field hf-number-input", children: [
+    label && /* @__PURE__ */ jsx46("label", { className: "hf-field__label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs39("div", { className: `hf-number-input__control${error ? " is-error" : ""}`, children: [
+      prefix && /* @__PURE__ */ jsx46("span", { children: prefix }),
+      /* @__PURE__ */ jsx46("input", { id, type: "number", value, min, max, step, disabled, "aria-invalid": Boolean(error), onChange: (event) => {
+        const next = event.currentTarget.valueAsNumber;
+        if (!Number.isNaN(next)) onChange(clamp(next));
+      } }),
+      /* @__PURE__ */ jsxs39("div", { children: [
+        /* @__PURE__ */ jsx46("button", { type: "button", disabled: disabled || max !== void 0 && value >= max, "aria-label": "\u589E\u52A0", onClick: () => onChange(clamp(value + step)), children: "\uFF0B" }),
+        /* @__PURE__ */ jsx46("button", { type: "button", disabled: disabled || min !== void 0 && value <= min, "aria-label": "\u51CF\u5C11", onClick: () => onChange(clamp(value - step)), children: "\u2212" })
+      ] }),
+      suffix && /* @__PURE__ */ jsx46("span", { children: suffix })
+    ] }),
+    (error || hint) && /* @__PURE__ */ jsx46("span", { className: `hf-field__hint${error ? " hf-field__hint--error" : ""}`, children: error ?? hint })
+  ] });
+}
+
+// src/forms/NextBatch.tsx
+import { useState as useState22 } from "react";
+import { jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
+function Cascader({ options, value = [], onChange, label }) {
+  const levels = [options];
+  let current = options;
+  for (const key of value) {
+    const next = current.find((item) => item.value === key)?.children;
+    if (!next) break;
+    levels.push(next);
+    current = next;
+  }
+  return /* @__PURE__ */ jsxs40("div", { className: "hf-field hf-cascader", children: [
+    label && /* @__PURE__ */ jsx47("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsx47("div", { children: levels.map((items, level) => /* @__PURE__ */ jsxs40("select", { "aria-label": `\u7B2C ${level + 1} \u7EA7`, value: value[level] ?? "", onChange: (event) => onChange([...value.slice(0, level), event.target.value]), children: [
+      /* @__PURE__ */ jsx47("option", { value: "", children: "\u8BF7\u9009\u62E9" }),
+      items.map((item) => /* @__PURE__ */ jsx47("option", { disabled: item.disabled, value: item.value, children: item.label }, item.value))
+    ] }, level)) })
+  ] });
+}
+function TreeSelect({ options, value, onChange, label, placeholder = "\u9009\u62E9\u8282\u70B9" }) {
+  const [open, setOpen] = useState22(false);
+  const flatten = (nodes, depth = 0) => nodes.flatMap((node) => [{ node, depth }, ...flatten(node.children ?? [], depth + 1)]);
+  const all = flatten(options);
+  return /* @__PURE__ */ jsxs40("div", { className: "hf-field hf-tree-select", children: [
+    label && /* @__PURE__ */ jsx47("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsxs40("button", { type: "button", className: "hf-picker-trigger", "aria-expanded": open, onClick: () => setOpen(!open), children: [
+      all.find((item) => item.node.key === value)?.node.label ?? placeholder,
+      /* @__PURE__ */ jsx47("span", { children: "\u2304" })
+    ] }),
+    open && /* @__PURE__ */ jsx47("div", { role: "listbox", children: all.map(({ node, depth }) => /* @__PURE__ */ jsx47("button", { type: "button", role: "option", "aria-selected": node.key === value, disabled: node.disabled, style: { paddingLeft: 12 + depth * 18 }, onClick: () => {
+      onChange(node.key);
+      setOpen(false);
+    }, children: node.label }, node.key)) })
+  ] });
+}
+function Transfer({ items, value, onChange, titles = ["\u53EF\u9009\u9879", "\u5DF2\u9009\u62E9"] }) {
+  const [marked, setMarked] = useState22([]);
+  const pane = (selected) => /* @__PURE__ */ jsxs40("section", { children: [
+    /* @__PURE__ */ jsx47("strong", { children: titles[selected ? 1 : 0] }),
+    items.filter((item) => value.includes(item.key) === selected).map((item) => /* @__PURE__ */ jsxs40("label", { children: [
+      /* @__PURE__ */ jsx47("input", { type: "checkbox", disabled: item.disabled, checked: marked.includes(item.key), onChange: () => setMarked((keys) => keys.includes(item.key) ? keys.filter((key) => key !== item.key) : [...keys, item.key]) }),
+      item.label
+    ] }, item.key))
+  ] });
+  return /* @__PURE__ */ jsxs40("div", { className: "hf-transfer", children: [
+    pane(false),
+    /* @__PURE__ */ jsxs40("div", { children: [
+      /* @__PURE__ */ jsx47("button", { type: "button", "aria-label": "\u79FB\u81F3\u5DF2\u9009\u62E9", onClick: () => {
+        onChange([.../* @__PURE__ */ new Set([...value, ...marked])]);
+        setMarked([]);
+      }, children: "\u2192" }),
+      /* @__PURE__ */ jsx47("button", { type: "button", "aria-label": "\u79FB\u56DE\u53EF\u9009\u9879", onClick: () => {
+        onChange(value.filter((key) => !marked.includes(key)));
+        setMarked([]);
+      }, children: "\u2190" })
+    ] }),
+    pane(true)
+  ] });
+}
+function DateRangePicker({ label, value, onChange, min, max }) {
+  return /* @__PURE__ */ jsxs40("div", { className: "hf-field hf-date-range", children: [
+    label && /* @__PURE__ */ jsx47("span", { className: "hf-field__label", children: label }),
+    /* @__PURE__ */ jsxs40("div", { children: [
+      /* @__PURE__ */ jsx47("input", { "aria-label": "\u5F00\u59CB\u65E5\u671F", type: "date", value: value[0], min, max: value[1] || max, onChange: (event) => onChange([event.target.value, value[1]]) }),
+      /* @__PURE__ */ jsx47("span", { children: "\u81F3" }),
+      /* @__PURE__ */ jsx47("input", { "aria-label": "\u7ED3\u675F\u65E5\u671F", type: "date", value: value[1], min: value[0] || min, max, onChange: (event) => onChange([value[0], event.target.value]) })
+    ] })
+  ] });
+}
+function SearchInput({ onSearch, loading, clearable = true, ...props }) {
+  const [value, setValue] = useState22(String(props.defaultValue ?? props.value ?? ""));
+  return /* @__PURE__ */ jsxs40("form", { className: "hf-search-input", role: "search", onSubmit: (event) => {
+    event.preventDefault();
+    onSearch(value);
+  }, children: [
+    /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", children: "\u2315" }),
+    /* @__PURE__ */ jsx47("input", { ...props, value, onChange: (event) => {
+      setValue(event.target.value);
+      props.onChange?.(event);
+    } }),
+    clearable && value && /* @__PURE__ */ jsx47("button", { type: "button", "aria-label": "\u6E05\u9664\u641C\u7D22", onClick: () => setValue(""), children: "\xD7" }),
+    /* @__PURE__ */ jsx47("button", { type: "submit", disabled: loading, children: loading ? "\u641C\u7D22\u4E2D" : "\u641C\u7D22" })
+  ] });
+}
+
+// src/feedback/Drawer.tsx
+import { useId as useId13 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
+function Drawer({ open, title, children, onClose, footer, side = "right", size = "md" }) {
+  const titleId = useId13();
+  const drawerRef = useDismissibleLayer(open, onClose, true);
+  if (!open) return null;
+  return createPortal4(/* @__PURE__ */ jsx48("div", { className: "hf-drawer-backdrop", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs41("div", { ref: drawerRef, className: `hf-drawer hf-drawer--${side} hf-drawer--${size}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxs41("header", { children: [
+      /* @__PURE__ */ jsx48("h2", { id: titleId, children: title }),
+      /* @__PURE__ */ jsx48(Button, { variant: "quiet", size: "sm", onClick: onClose, "aria-label": "\u5173\u95ED\u62BD\u5C49", children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsx48("div", { className: "hf-drawer__body", children }),
+    footer && /* @__PURE__ */ jsx48("footer", { children: footer })
+  ] }) }), document.body);
+}
+
+// src/feedback/Popover.tsx
+import { cloneElement as cloneElement2, isValidElement, useId as useId14, useState as useState23 } from "react";
+import { jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
+function Popover({ trigger, children, open, defaultOpen = false, onOpenChange, placement = "bottom", label = "\u66F4\u591A\u5185\u5BB9" }) {
+  const [innerOpen, setInnerOpen] = useState23(defaultOpen);
+  const controlled = open !== void 0;
+  const visible = controlled ? open : innerOpen;
+  const contentId = useId14();
+  const update = (next) => {
+    if (!controlled) setInnerOpen(next);
+    onOpenChange?.(next);
+  };
+  const rootRef = useDismissibleLayer(visible, () => update(false));
+  const triggerProps = { "aria-expanded": visible, "aria-controls": visible ? contentId : void 0, "aria-haspopup": "dialog", onClick: () => update(!visible) };
+  return /* @__PURE__ */ jsxs42("span", { className: "hf-popover", ref: rootRef, children: [
+    isValidElement(trigger) && cloneElement2(trigger, triggerProps),
+    visible && /* @__PURE__ */ jsx49("span", { id: contentId, role: "dialog", "aria-label": label, className: `hf-popover__content hf-popover__content--${placement}`, children })
+  ] });
+}
+
+// src/feedback/Status.tsx
+import { cloneElement as cloneElement3, useId as useId15, useState as useState24 } from "react";
+import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
+function Tooltip({ content, children, placement = "top" }) {
+  const [open, setOpen] = useState24(false);
+  const id = useId15();
+  const trigger = cloneElement3(children, { "aria-describedby": open ? id : void 0 });
+  return /* @__PURE__ */ jsxs43("span", { className: "hf-tooltip", onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), onFocus: () => setOpen(true), onBlur: () => setOpen(false), children: [
+    trigger,
+    open && /* @__PURE__ */ jsx50("span", { id, role: "tooltip", className: `hf-tooltip__bubble hf-tooltip__bubble--${placement}`, children: content })
+  ] });
+}
+function Alert({ tone = "info", title, children, onClose, action }) {
+  const icon = { info: "info", success: "check", warning: "warning", danger: "error" };
+  return /* @__PURE__ */ jsxs43("div", { className: `hf-alert hf-alert--${tone}`, role: tone === "danger" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx50(Icon, { name: icon[tone] }),
+    /* @__PURE__ */ jsxs43("div", { children: [
+      /* @__PURE__ */ jsx50("strong", { children: title }),
+      children && /* @__PURE__ */ jsx50("div", { children }),
+      action && /* @__PURE__ */ jsx50("div", { className: "hf-alert__action", children: action })
+    ] }),
+    onClose && /* @__PURE__ */ jsx50("button", { type: "button", onClick: onClose, "aria-label": "\u5173\u95ED\u63D0\u793A", children: /* @__PURE__ */ jsx50(Icon, { name: "close", size: 16 }) })
+  ] });
+}
+
+// src/feedback/Essentials.tsx
+import { cloneElement as cloneElement4, isValidElement as isValidElement2, useState as useState25 } from "react";
+import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
+function Popconfirm({ trigger, title, description, confirmText = "\u786E\u8BA4", cancelText = "\u53D6\u6D88", tone = "primary", onConfirm }) {
+  const [open, setOpen] = useState25(false);
+  const root = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  return /* @__PURE__ */ jsxs44("span", { className: "hf-popconfirm", ref: root, children: [
+    isValidElement2(trigger) && cloneElement4(trigger, { onClick: () => setOpen(true), "aria-expanded": open }),
+    open && /* @__PURE__ */ jsxs44("div", { role: "alertdialog", "aria-modal": "false", className: "hf-popconfirm__panel", children: [
+      /* @__PURE__ */ jsx51("strong", { children: title }),
+      description && /* @__PURE__ */ jsx51("p", { children: description }),
+      /* @__PURE__ */ jsxs44("div", { children: [
+        /* @__PURE__ */ jsx51(Button, { size: "sm", variant: "quiet", onClick: () => setOpen(false), children: cancelText }),
+        /* @__PURE__ */ jsx51(Button, { size: "sm", variant: tone === "danger" ? "danger" : "primary", onClick: () => {
+          onConfirm();
+          setOpen(false);
+        }, children: confirmText })
+      ] })
+    ] })
+  ] });
+}
+function Notification({ title, children, tone = "info", time, unread, action, onClose }) {
+  const icons = { info: "info", success: "check", warning: "warning", danger: "error" };
+  return /* @__PURE__ */ jsxs44("article", { className: `hf-notification hf-notification--${tone}${unread ? " is-unread" : ""}`, children: [
+    /* @__PURE__ */ jsx51("span", { className: "hf-notification__icon", children: /* @__PURE__ */ jsx51(Icon, { name: icons[tone], size: 18 }) }),
+    /* @__PURE__ */ jsxs44("div", { children: [
+      /* @__PURE__ */ jsxs44("header", { children: [
+        /* @__PURE__ */ jsx51("strong", { children: title }),
+        time && /* @__PURE__ */ jsx51("time", { children: time })
+      ] }),
+      children && /* @__PURE__ */ jsx51("p", { children }),
+      action && /* @__PURE__ */ jsx51("div", { className: "hf-notification__action", children: action })
+    ] }),
+    onClose && /* @__PURE__ */ jsx51("button", { type: "button", "aria-label": "\u5173\u95ED\u901A\u77E5", onClick: onClose, children: "\xD7" })
+  ] });
+}
+function Result({ status = "info", title, description, actions, extra }) {
+  const icon = status === "success" ? "\u2713" : status === "error" ? "\xD7" : status === "warning" ? "!" : status === "info" ? "i" : status;
+  return /* @__PURE__ */ jsxs44("section", { className: `hf-result hf-result--${status}`, children: [
+    /* @__PURE__ */ jsx51("span", { className: "hf-result__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx51("h2", { children: title }),
+    description && /* @__PURE__ */ jsx51("p", { children: description }),
+    actions && /* @__PURE__ */ jsx51("div", { className: "hf-result__actions", children: actions }),
+    extra && /* @__PURE__ */ jsx51("div", { className: "hf-result__extra", children: extra })
+  ] });
+}
+
+// src/data-display/DataDisplay.tsx
+import { Fragment as Fragment3, jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
+function StatisticCard({ label, value, trend, icon, tone = "blue", className = "", ...props }) {
+  return /* @__PURE__ */ jsxs45("article", { className: `hf-stat hf-stat--${tone} ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs45("div", { className: "hf-stat__top", children: [
+      /* @__PURE__ */ jsx52("span", { children: label }),
+      icon && /* @__PURE__ */ jsx52("i", { children: icon })
+    ] }),
+    /* @__PURE__ */ jsx52("strong", { children: value }),
+    trend && /* @__PURE__ */ jsx52("small", { children: trend }),
+    /* @__PURE__ */ jsx52("span", { className: "hf-stat__glow", "aria-hidden": "true" })
+  ] });
+}
+var Stat = StatisticCard;
+function Progress({ value, max = 100, label, showValue = true, size = "md", tone = "primary", className = "", ...props }) {
+  const percent = Math.min(100, Math.max(0, max ? value / max * 100 : 0));
+  return /* @__PURE__ */ jsxs45("div", { className: `hf-progress hf-progress--${size} hf-progress--${tone} ${className}`.trim(), ...props, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs45("div", { className: "hf-progress__meta", children: [
+      /* @__PURE__ */ jsx52("span", { children: label }),
+      showValue && /* @__PURE__ */ jsxs45("strong", { children: [
+        Math.round(percent),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx52("div", { className: "hf-progress__track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, children: /* @__PURE__ */ jsx52("span", { style: { "--hf-progress": `${percent}%` } }) })
+  ] });
+}
+function CircularProgress({ value, max = 100, label, size = 92, thickness = 8, className = "", ...props }) {
+  const percent = Math.min(100, Math.max(0, max ? value / max * 100 : 0));
+  return /* @__PURE__ */ jsx52("div", { className: `hf-circular-progress ${className}`.trim(), style: { "--hf-circle": `${percent * 3.6}deg`, "--hf-circle-size": `${size}px`, "--hf-circle-thickness": `${thickness}px` }, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, ...props, children: /* @__PURE__ */ jsxs45("span", { children: [
+    /* @__PURE__ */ jsxs45("strong", { children: [
+      Math.round(percent),
+      "%"
+    ] }),
+    label && /* @__PURE__ */ jsx52("small", { children: label })
+  ] }) });
+}
+function StepProgress({ steps, current, className = "", ...props }) {
+  return /* @__PURE__ */ jsx52("ol", { className: `hf-step-progress ${className}`.trim(), ...props, children: steps.map((step, index) => /* @__PURE__ */ jsxs45("li", { className: index < current ? "is-complete" : index === current ? "is-current" : "", children: [
+    /* @__PURE__ */ jsx52("span", { children: index < current ? "\u2713" : index + 1 }),
+    /* @__PURE__ */ jsx52("small", { children: step })
+  ] }, index)) });
+}
+function ActivityIndicator({ variant = "spinner", label = "\u6B63\u5728\u52A0\u8F7D", size = "md", className = "", ...props }) {
+  return /* @__PURE__ */ jsxs45("span", { className: `hf-activity hf-activity--${variant} hf-activity--${size} ${className}`.trim(), role: "status", "aria-label": label, ...props, children: [
+    variant === "dots" && /* @__PURE__ */ jsxs45(Fragment3, { children: [
+      /* @__PURE__ */ jsx52("i", {}),
+      /* @__PURE__ */ jsx52("i", {}),
+      /* @__PURE__ */ jsx52("i", {})
+    ] }),
+    variant === "wave" && Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx52("i", {}, index)),
+    variant === "radar" && /* @__PURE__ */ jsx52("i", {})
+  ] });
+}
+function Sparkline({ data, width = 160, height = 48, label = "\u8D8B\u52BF\u56FE", filled = true, ...props }) {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const points = data.map((value, index) => `${data.length === 1 ? width / 2 : index / (data.length - 1) * width},${height - ((value - min) / range * (height - 8) + 4)}`).join(" ");
+  const area = `0,${height} ${points} ${width},${height}`;
+  return /* @__PURE__ */ jsxs45("svg", { className: "hf-sparkline", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, ...props, children: [
+    filled && /* @__PURE__ */ jsx52("polygon", { points: area, className: "hf-sparkline__area" }),
+    /* @__PURE__ */ jsx52("polyline", { points, className: "hf-sparkline__line" })
+  ] });
+}
+
+// src/data-display/Collections.tsx
+import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
+function Table({ columns, data, rowKey, caption, empty = "\u6682\u65E0\u6570\u636E", striped, onRowClick, className = "", ...props }) {
+  const keyOf = (item, index) => typeof rowKey === "function" ? rowKey(item, index) : String(item[rowKey]);
+  return /* @__PURE__ */ jsx53("div", { className: `hf-table-wrap ${className}`, ...props, children: /* @__PURE__ */ jsxs46("table", { className: `hf-table${striped ? " hf-table--striped" : ""}`, children: [
+    caption && /* @__PURE__ */ jsx53("caption", { children: caption }),
+    /* @__PURE__ */ jsx53("thead", { children: /* @__PURE__ */ jsx53("tr", { children: columns.map((column) => /* @__PURE__ */ jsx53("th", { style: { textAlign: column.align, width: column.width }, children: column.header }, column.key)) }) }),
+    /* @__PURE__ */ jsxs46("tbody", { children: [
+      data.map((item, index) => /* @__PURE__ */ jsx53("tr", { className: onRowClick ? "is-clickable" : "", onClick: () => onRowClick?.(item, index), tabIndex: onRowClick ? 0 : void 0, onKeyDown: (event) => {
+        if (onRowClick && (event.key === "Enter" || event.key === " ")) {
+          event.preventDefault();
+          onRowClick(item, index);
+        }
+      }, children: columns.map((column) => /* @__PURE__ */ jsx53("td", { style: { textAlign: column.align }, children: column.render ? column.render(item, index) : String(item[column.key] ?? "") }, column.key)) }, keyOf(item, index))),
+      !data.length && /* @__PURE__ */ jsx53("tr", { children: /* @__PURE__ */ jsx53("td", { className: "hf-table__empty", colSpan: columns.length, children: empty }) })
+    ] })
+  ] }) });
+}
+function Pagination({ page, total, pageSize = 10, siblingCount = 1, onChange, className = "", ...props }) {
+  const count = Math.max(1, Math.ceil(total / pageSize));
+  const current = Math.min(count, Math.max(1, page));
+  const visible = Array.from({ length: count }, (_, i) => i + 1).filter((value) => value === 1 || value === count || Math.abs(value - current) <= siblingCount);
+  const parts = [];
+  visible.forEach((value, index) => {
+    if (index && value - visible[index - 1] > 1) parts.push("ellipsis");
+    parts.push(value);
+  });
+  return /* @__PURE__ */ jsxs46("nav", { className: `hf-pagination ${className}`, "aria-label": "\u5206\u9875", ...props, children: [
+    /* @__PURE__ */ jsx53("button", { disabled: current === 1, onClick: () => onChange(current - 1), "aria-label": "\u4E0A\u4E00\u9875", children: /* @__PURE__ */ jsx53(Icon, { name: "chevron-down", size: 16, className: "hf-pagination__prev" }) }),
+    parts.map((part, index) => part === "ellipsis" ? /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", children: "\u2026" }, `e-${index}`) : /* @__PURE__ */ jsx53("button", { className: part === current ? "is-active" : "", "aria-current": part === current ? "page" : void 0, onClick: () => onChange(part), children: part }, part)),
+    /* @__PURE__ */ jsx53("button", { disabled: current === count, onClick: () => onChange(current + 1), "aria-label": "\u4E0B\u4E00\u9875", children: /* @__PURE__ */ jsx53(Icon, { name: "chevron-down", size: 16, className: "hf-pagination__next" }) })
+  ] });
+}
+function List({ items, divided = true, className = "", ...props }) {
+  return /* @__PURE__ */ jsx53("ul", { className: `hf-list${divided ? " hf-list--divided" : ""} ${className}`, ...props, children: items.map((item) => /* @__PURE__ */ jsxs46("li", { children: [
+    item.leading && /* @__PURE__ */ jsx53("span", { className: "hf-list__leading", children: item.leading }),
+    /* @__PURE__ */ jsxs46("div", { children: [
+      /* @__PURE__ */ jsx53("strong", { children: item.title }),
+      item.description && /* @__PURE__ */ jsx53("small", { children: item.description })
+    ] }),
+    item.trailing && /* @__PURE__ */ jsx53("span", { className: "hf-list__trailing", children: item.trailing })
+  ] }, item.key)) });
+}
+function Descriptions({ items, columns = 2, bordered, className = "", ...props }) {
+  return /* @__PURE__ */ jsx53("dl", { className: `hf-descriptions hf-descriptions--${columns}${bordered ? " hf-descriptions--bordered" : ""} ${className}`, ...props, children: items.map((item) => /* @__PURE__ */ jsxs46("div", { style: { gridColumn: `span ${Math.min(item.span ?? 1, columns)}` }, children: [
+    /* @__PURE__ */ jsx53("dt", { children: item.label }),
+    /* @__PURE__ */ jsx53("dd", { children: item.value })
+  ] }, item.key)) });
+}
+
+// src/data-display/Insight.tsx
+import { jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
+function Timeline({ items, label = "\u65F6\u95F4\u8F74" }) {
+  return /* @__PURE__ */ jsx54("ol", { className: "hf-timeline", "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsxs47("li", { className: `hf-timeline--${item.status ?? "upcoming"}`, children: [
+    /* @__PURE__ */ jsx54("i", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs47("div", { children: [
+      /* @__PURE__ */ jsx54("strong", { children: item.title }),
+      item.description && /* @__PURE__ */ jsx54("p", { children: item.description })
+    ] }),
+    item.time && /* @__PURE__ */ jsx54("time", { children: item.time })
+  ] }, item.key)) });
+}
+function InsightBoard({ summary, trend, detail, heading, filters }) {
+  return /* @__PURE__ */ jsxs47("section", { className: "hf-insight-board", children: [
+    (heading || filters) && /* @__PURE__ */ jsxs47("header", { children: [
+      /* @__PURE__ */ jsx54("div", { children: heading }),
+      filters
+    ] }),
+    /* @__PURE__ */ jsx54("div", { className: "hf-insight-board__summary", "aria-label": "\u6838\u5FC3\u7ED3\u679C", children: summary }),
+    /* @__PURE__ */ jsx54("div", { className: "hf-insight-board__trend", "aria-label": "\u53D8\u5316\u8D8B\u52BF", children: trend }),
+    /* @__PURE__ */ jsx54("div", { className: "hf-insight-board__detail", "aria-label": "\u660E\u7EC6\u4E0E\u539F\u56E0", children: detail })
+  ] });
+}
+
+// src/data-display/EmptyState.tsx
+import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
+function EmptyState({ icon = "inbox", title, description, action, size = "md" }) {
+  return /* @__PURE__ */ jsxs48("div", { className: `hf-empty hf-empty--${size}`, children: [
+    /* @__PURE__ */ jsx55("span", { className: "hf-empty__icon", children: /* @__PURE__ */ jsx55(Icon, { name: icon, size: size === "sm" ? 22 : 28 }) }),
+    /* @__PURE__ */ jsx55("strong", { children: title }),
+    description && /* @__PURE__ */ jsx55("p", { children: description }),
+    action && /* @__PURE__ */ jsx55("div", { children: action })
+  ] });
+}
+
+// src/data-display/DataGrid.tsx
+import { useMemo as useMemo6, useState as useState26 } from "react";
+import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
+function DataGrid({ columns, data, rowKey, selectedKeys = [], onSelectionChange, empty = "\u6682\u65E0\u6570\u636E", caption }) {
+  const [sort, setSort] = useState26();
+  const keyOf = (item) => typeof rowKey === "function" ? rowKey(item) : String(item[rowKey]);
+  const rows = useMemo6(() => {
+    if (!sort) return [...data];
+    const column = columns.find((item) => item.key === sort.key);
+    if (!column) return [...data];
+    return [...data].sort((a, b) => {
+      const av = column.value?.(a) ?? String(a[column.key] ?? "");
+      const bv = column.value?.(b) ?? String(b[column.key] ?? "");
+      const compared = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv), "zh-CN");
+      return sort.direction === "asc" ? compared : -compared;
+    });
+  }, [columns, data, sort]);
+  const all = data.length > 0 && data.every((item) => selectedKeys.includes(keyOf(item)));
+  const changeAll = () => onSelectionChange?.(all ? [] : data.map(keyOf));
+  return /* @__PURE__ */ jsx56("div", { className: "hf-data-grid", onKeyDown: (event) => {
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    const controls = [...event.currentTarget.querySelectorAll("button,input")];
+    const current = controls.indexOf(event.target);
+    if (current < 0) return;
+    event.preventDefault();
+    const direction = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+    controls[(current + direction + controls.length) % controls.length]?.focus();
+  }, children: /* @__PURE__ */ jsxs49("table", { children: [
+    caption && /* @__PURE__ */ jsx56("caption", { children: caption }),
+    /* @__PURE__ */ jsx56("thead", { children: /* @__PURE__ */ jsxs49("tr", { children: [
+      onSelectionChange && /* @__PURE__ */ jsx56("th", { className: "hf-data-grid__check", children: /* @__PURE__ */ jsx56("input", { type: "checkbox", "aria-label": "\u9009\u62E9\u5168\u90E8", checked: all, onChange: changeAll }) }),
+      columns.map((column) => /* @__PURE__ */ jsx56("th", { style: { width: column.width }, children: column.sortable ? /* @__PURE__ */ jsxs49("button", { type: "button", onClick: () => setSort((current) => ({ key: column.key, direction: current?.key === column.key && current.direction === "asc" ? "desc" : "asc" })), children: [
+        column.header,
+        /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", children: sort?.key === column.key ? sort.direction === "asc" ? "\u2191" : "\u2193" : "\u2195" })
+      ] }) : column.header }, column.key))
+    ] }) }),
+    /* @__PURE__ */ jsxs49("tbody", { children: [
+      rows.map((item) => {
+        const key = keyOf(item);
+        return /* @__PURE__ */ jsxs49("tr", { className: selectedKeys.includes(key) ? "is-selected" : "", children: [
+          onSelectionChange && /* @__PURE__ */ jsx56("td", { children: /* @__PURE__ */ jsx56("input", { type: "checkbox", "aria-label": `\u9009\u62E9\u884C ${key}`, checked: selectedKeys.includes(key), onChange: () => onSelectionChange(selectedKeys.includes(key) ? selectedKeys.filter((item2) => item2 !== key) : [...selectedKeys, key]) }) }),
+          columns.map((column) => /* @__PURE__ */ jsx56("td", { children: column.render ? column.render(item) : String(item[column.key] ?? "") }, column.key))
+        ] }, key);
+      }),
+      !rows.length && /* @__PURE__ */ jsx56("tr", { children: /* @__PURE__ */ jsx56("td", { className: "hf-data-grid__empty", colSpan: columns.length + (onSelectionChange ? 1 : 0), children: empty }) })
+    ] })
+  ] }) });
+}
+
+// src/data-display/Tree.tsx
+import { useState as useState27 } from "react";
+import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
+function Tree({ nodes, selectedKey, onSelect, defaultExpandedKeys = [], label = "\u6811\u5F62\u5217\u8868" }) {
+  const [expanded, setExpanded] = useState27([...defaultExpandedKeys]);
+  const render = (items, level) => /* @__PURE__ */ jsx57("ul", { role: level ? "group" : "tree", "aria-label": level ? void 0 : label, children: items.map((node) => {
+    const open = expanded.includes(node.key);
+    const branch = Boolean(node.children?.length);
+    return /* @__PURE__ */ jsxs50("li", { role: "treeitem", "aria-level": level + 1, "aria-expanded": branch ? open : void 0, "aria-selected": node.key === selectedKey, children: [
+      /* @__PURE__ */ jsxs50("div", { className: node.key === selectedKey ? "is-selected" : "", style: { paddingLeft: level * 18 + 8 }, children: [
+        branch ? /* @__PURE__ */ jsx57("button", { type: "button", "aria-label": open ? "\u6536\u8D77" : "\u5C55\u5F00", onClick: () => setExpanded((keys) => open ? keys.filter((key) => key !== node.key) : [...keys, node.key]), children: open ? "\u2304" : "\u203A" }) : /* @__PURE__ */ jsx57("span", {}),
+        node.icon,
+        /* @__PURE__ */ jsx57("button", { type: "button", disabled: node.disabled, onClick: () => onSelect?.(node.key), children: node.label })
+      ] }),
+      branch && open && render(node.children, level + 1)
+    ] }, node.key);
+  }) });
+  return /* @__PURE__ */ jsx57("div", { className: "hf-tree", onKeyDown: (event) => {
+    const labels = [...event.currentTarget.querySelectorAll("li[role=treeitem]>div>button:last-child:not(:disabled)")];
+    const current = labels.indexOf(event.target);
+    if (current < 0) return;
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      const next = event.key === "Home" ? 0 : event.key === "End" ? labels.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + labels.length) % labels.length;
+      labels[next]?.focus();
+    }
+  }, children: render(nodes, 0) });
+}
+
+// src/layout/AuthLayout.tsx
+import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
+function AuthLayout({ children, brand, aside, footer, variant = "card", backgroundImage, currentStep = 1, steps = 1 }) {
+  const style = backgroundImage ? { "--hf-auth-image": `url("${backgroundImage}")` } : void 0;
+  return /* @__PURE__ */ jsxs51("section", { className: `hf-auth hf-auth--${variant}`, style, children: [
+    brand && /* @__PURE__ */ jsx58("header", { className: "hf-auth__brand", children: brand }),
+    aside && /* @__PURE__ */ jsx58("aside", { className: "hf-auth__aside", children: aside }),
+    /* @__PURE__ */ jsxs51("main", { className: "hf-auth__main", children: [
+      variant === "step" && /* @__PURE__ */ jsx58("div", { className: "hf-auth__steps", "aria-label": `\u7B2C ${currentStep} \u6B65\uFF0C\u5171 ${steps} \u6B65`, children: Array.from({ length: steps }, (_, index) => /* @__PURE__ */ jsx58("span", { className: index < currentStep ? "is-active" : "" }, index)) }),
+      /* @__PURE__ */ jsx58("div", { className: "hf-auth__card", children }),
+      footer && /* @__PURE__ */ jsx58("footer", { children: footer })
+    ] })
+  ] });
+}
+
+// src/layout/Hero.tsx
+import { jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
+function Hero({ eyebrow, title, description, primaryAction, secondaryAction, visual, proof, align = "left", kind = "product" }) {
+  return /* @__PURE__ */ jsxs52("section", { className: `hf-hero hf-hero--${align} hf-hero--${kind}`, children: [
+    /* @__PURE__ */ jsxs52("div", { className: "hf-hero__content", children: [
+      eyebrow && /* @__PURE__ */ jsx59("div", { className: "hf-hero__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ jsx59("h1", { children: title }),
+      description && /* @__PURE__ */ jsx59("p", { children: description }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs52("div", { className: "hf-hero__actions", children: [
+        primaryAction,
+        secondaryAction
+      ] }),
+      proof && /* @__PURE__ */ jsx59("div", { className: "hf-hero__proof", children: proof })
+    ] }),
+    visual && /* @__PURE__ */ jsx59("div", { className: "hf-hero__visual", children: visual })
+  ] });
+}
+
+// src/layout/ResizablePanel.tsx
+import { useState as useState28 } from "react";
+import { jsx as jsx60, jsxs as jsxs53 } from "react/jsx-runtime";
+function ResizablePanel({ primary, secondary, defaultSize = 50, minSize = 20, maxSize = 80, direction = "horizontal", onResize }) {
+  const [size, setSize] = useState28(defaultSize);
+  const start = (event) => {
+    const root = event.currentTarget.parentElement;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const move = (next) => {
+      const rect = root.getBoundingClientRect();
+      const raw = direction === "horizontal" ? (next.clientX - rect.left) / rect.width * 100 : (next.clientY - rect.top) / rect.height * 100;
+      const value = Math.min(maxSize, Math.max(minSize, raw));
+      setSize(value);
+      onResize?.(value);
+    };
+    const end = () => {
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("pointerup", end);
+    };
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", end);
+  };
+  return /* @__PURE__ */ jsxs53("div", { className: `hf-resizable hf-resizable--${direction}`, children: [
+    /* @__PURE__ */ jsx60("div", { style: { flexBasis: `${size}%` }, children: primary }),
+    /* @__PURE__ */ jsx60("div", { className: "hf-resizable__handle", role: "separator", "aria-orientation": direction, "aria-valuemin": minSize, "aria-valuemax": maxSize, "aria-valuenow": Math.round(size), tabIndex: 0, onPointerDown: start, onKeyDown: (event) => {
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+      event.preventDefault();
+      const grow = event.key === "ArrowRight" || event.key === "ArrowDown";
+      const value = Math.min(maxSize, Math.max(minSize, size + (grow ? 2 : -2)));
+      setSize(value);
+      onResize?.(value);
+    } }),
+    /* @__PURE__ */ jsx60("div", { children: secondary })
+  ] });
+}
+
+// src/feedback/NotificationCenter.tsx
+import { jsx as jsx61, jsxs as jsxs54 } from "react/jsx-runtime";
+function NotificationCenter({ items, onRead, onDismiss, onReadAll, empty = "\u6682\u65E0\u901A\u77E5", title = "\u901A\u77E5\u4E2D\u5FC3" }) {
+  const unread = items.filter((item) => item.unread).length;
+  return /* @__PURE__ */ jsxs54("section", { className: "hf-notification-center", children: [
+    /* @__PURE__ */ jsxs54("header", { children: [
+      /* @__PURE__ */ jsxs54("div", { children: [
+        /* @__PURE__ */ jsx61("strong", { children: title }),
+        unread > 0 && /* @__PURE__ */ jsx61("span", { children: unread })
+      ] }),
+      unread > 0 && onReadAll && /* @__PURE__ */ jsx61("button", { type: "button", onClick: onReadAll, children: "\u5168\u90E8\u5DF2\u8BFB" })
+    ] }),
+    /* @__PURE__ */ jsx61("div", { children: items.length ? items.map(({ key, content, ...item }) => /* @__PURE__ */ jsx61("div", { onClick: () => item.unread && onRead?.(key), children: /* @__PURE__ */ jsx61(Notification, { ...item, onClose: onDismiss ? () => onDismiss(key) : void 0, children: content }) }, key)) : /* @__PURE__ */ jsx61("p", { className: "hf-notification-center__empty", children: empty }) })
+  ] });
+}
+
+// src/data-display/VirtualList.tsx
+import { useState as useState29 } from "react";
+import { jsx as jsx62 } from "react/jsx-runtime";
+function VirtualList({ items, itemHeight, height, renderItem, itemKey, overscan = 3, label = "\u865A\u62DF\u5217\u8868" }) {
+  const [scrollTop, setScrollTop] = useState29(0);
+  const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const end = Math.min(items.length, Math.ceil((scrollTop + height) / itemHeight) + overscan);
+  return /* @__PURE__ */ jsx62("div", { className: "hf-virtual-list", role: "list", "aria-label": label, style: { height }, onScroll: (event) => setScrollTop(event.currentTarget.scrollTop), children: /* @__PURE__ */ jsx62("div", { style: { height: items.length * itemHeight, position: "relative" }, children: items.slice(start, end).map((item, offset) => {
+    const index = start + offset;
+    return /* @__PURE__ */ jsx62("div", { role: "listitem", style: { height: itemHeight, left: 0, position: "absolute", right: 0, top: index * itemHeight }, children: renderItem(item, index) }, itemKey(item, index));
+  }) }) });
+}
+
+// src/data-display/DeveloperView.tsx
+import { useState as useState30 } from "react";
+import { jsx as jsx63, jsxs as jsxs55 } from "react/jsx-runtime";
+function JsonNode({ name, value, depth, defaultExpanded, maxDepth }) {
+  const complex = value !== null && typeof value === "object";
+  const [open, setOpen] = useState30(defaultExpanded && depth < maxDepth);
+  if (!complex) return /* @__PURE__ */ jsxs55("div", { className: "hf-json-viewer__row", children: [
+    /* @__PURE__ */ jsx63("span", { children: name !== void 0 && `${name}: ` }),
+    /* @__PURE__ */ jsx63("code", { className: `is-${value === null ? "null" : typeof value}`, children: value === null ? "null" : JSON.stringify(value) })
+  ] });
+  const entries = Object.entries(value);
+  return /* @__PURE__ */ jsxs55("div", { className: "hf-json-viewer__node", children: [
+    /* @__PURE__ */ jsxs55("button", { type: "button", "aria-expanded": open, onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx63("span", { children: open ? "\u2304" : "\u203A" }),
+      /* @__PURE__ */ jsx63("strong", { children: name ?? (Array.isArray(value) ? "Array" : "Object") }),
+      /* @__PURE__ */ jsx63("small", { children: Array.isArray(value) ? `[${entries.length}]` : `{${entries.length}}` })
+    ] }),
+    open && /* @__PURE__ */ jsx63("div", { children: entries.map(([key, item]) => /* @__PURE__ */ jsx63(JsonNode, { name: key, value: item, depth: depth + 1, defaultExpanded, maxDepth }, key)) })
+  ] });
+}
+function JsonViewer({ data, name, defaultExpanded = true, maxDepth = 2 }) {
+  return /* @__PURE__ */ jsx63("div", { className: "hf-json-viewer", role: "tree", "aria-label": name ?? "JSON \u67E5\u770B\u5668", children: /* @__PURE__ */ jsx63(JsonNode, { name, value: data, depth: 0, defaultExpanded, maxDepth }) });
+}
+function compareLines(before, after) {
+  const a = before.split("\n"), b = after.split("\n"), matrix = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
+  for (let i2 = a.length - 1; i2 >= 0; i2--) for (let j2 = b.length - 1; j2 >= 0; j2--) matrix[i2][j2] = a[i2] === b[j2] ? matrix[i2 + 1][j2 + 1] + 1 : Math.max(matrix[i2 + 1][j2], matrix[i2][j2 + 1]);
+  const rows = [];
+  let i = 0, j = 0, leftNo = 1, rightNo = 1;
+  while (i < a.length || j < b.length) {
+    if (i < a.length && j < b.length && a[i] === b[j]) {
+      rows.push({ kind: "same", left: a[i++], right: b[j++], leftNo: leftNo++, rightNo: rightNo++ });
+    } else if (j < b.length && (i === a.length || matrix[i][j + 1] >= matrix[i + 1][j])) {
+      rows.push({ kind: "add", right: b[j++], rightNo: rightNo++ });
+    } else {
+      rows.push({ kind: "remove", left: a[i++], leftNo: leftNo++ });
+    }
+  }
+  return rows;
+}
+function DiffCell({ number, marker, children }) {
+  return /* @__PURE__ */ jsxs55("div", { className: "hf-diff-viewer__cell", children: [
+    /* @__PURE__ */ jsx63("span", { children: number ?? "" }),
+    /* @__PURE__ */ jsx63("i", { children: marker }),
+    /* @__PURE__ */ jsx63("code", { children: children ?? "" })
+  ] });
+}
+function DiffViewer({ before, after, beforeLabel = "\u4FEE\u6539\u524D", afterLabel = "\u4FEE\u6539\u540E", mode = "split" }) {
+  const rows = compareLines(before, after);
+  return /* @__PURE__ */ jsxs55("div", { className: `hf-diff-viewer hf-diff-viewer--${mode}`, children: [
+    /* @__PURE__ */ jsxs55("header", { children: [
+      /* @__PURE__ */ jsx63("strong", { children: beforeLabel }),
+      mode === "split" && /* @__PURE__ */ jsx63("strong", { children: afterLabel })
+    ] }),
+    /* @__PURE__ */ jsx63("div", { children: rows.map((row, index) => mode === "split" ? /* @__PURE__ */ jsxs55("div", { className: `is-${row.kind}`, children: [
+      /* @__PURE__ */ jsx63(DiffCell, { number: row.leftNo, marker: row.kind === "remove" ? "\u2212" : " ", children: row.left }),
+      /* @__PURE__ */ jsx63(DiffCell, { number: row.rightNo, marker: row.kind === "add" ? "+" : " ", children: row.right })
+    ] }, index) : /* @__PURE__ */ jsx63("div", { className: `is-${row.kind}`, children: /* @__PURE__ */ jsx63(DiffCell, { number: row.leftNo ?? row.rightNo, marker: row.kind === "add" ? "+" : row.kind === "remove" ? "\u2212" : " ", children: row.kind === "add" ? row.right : row.left }) }, index)) })
+  ] });
+}
+
+// src/forms/QueryBuilder.tsx
+import { jsx as jsx64, jsxs as jsxs56 } from "react/jsx-runtime";
+var defaultOperators = [{ value: "equals", label: "\u7B49\u4E8E" }, { value: "notEquals", label: "\u4E0D\u7B49\u4E8E" }, { value: "contains", label: "\u5305\u542B" }];
+function QueryBuilder({ fields, rules, onChange, conjunction = "and", onConjunctionChange, disabled }) {
+  const update = (id, patch) => onChange(rules.map((rule) => rule.id === id ? { ...rule, ...patch } : rule));
+  const add = () => {
+    const field = fields[0];
+    if (!field) return;
+    const operator = (field.operators ?? defaultOperators)[0]?.value ?? "equals";
+    onChange([...rules, { id: `rule-${Date.now()}`, field: field.key, operator, value: "" }]);
+  };
+  return /* @__PURE__ */ jsxs56("div", { className: "hf-query-builder", children: [
+    /* @__PURE__ */ jsxs56("header", { children: [
+      /* @__PURE__ */ jsx64("strong", { children: "\u6EE1\u8DB3" }),
+      /* @__PURE__ */ jsxs56("select", { "aria-label": "\u6761\u4EF6\u5173\u7CFB", value: conjunction, disabled, onChange: (event) => onConjunctionChange?.(event.target.value), children: [
+        /* @__PURE__ */ jsx64("option", { value: "and", children: "\u5168\u90E8\u6761\u4EF6" }),
+        /* @__PURE__ */ jsx64("option", { value: "or", children: "\u4EFB\u4E00\u6761\u4EF6" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx64("div", { children: rules.map((rule, index) => {
+      const field = fields.find((item) => item.key === rule.field) ?? fields[0];
+      const operators = field?.operators ?? defaultOperators;
+      return /* @__PURE__ */ jsxs56("div", { className: "hf-query-builder__rule", children: [
+        /* @__PURE__ */ jsx64("span", { children: index + 1 }),
+        /* @__PURE__ */ jsx64("select", { "aria-label": `\u6761\u4EF6 ${index + 1} \u5B57\u6BB5`, value: rule.field, disabled, onChange: (event) => {
+          const next = fields.find((item) => item.key === event.target.value);
+          update(rule.id, { field: next.key, operator: (next.operators ?? defaultOperators)[0]?.value ?? "equals", value: "" });
+        }, children: fields.map((item) => /* @__PURE__ */ jsx64("option", { value: item.key, children: item.label }, item.key)) }),
+        /* @__PURE__ */ jsx64("select", { "aria-label": `\u6761\u4EF6 ${index + 1} \u8FD0\u7B97\u7B26`, value: rule.operator, disabled, onChange: (event) => update(rule.id, { operator: event.target.value }), children: operators.map((item) => /* @__PURE__ */ jsx64("option", { value: item.value, children: item.label }, item.value)) }),
+        /* @__PURE__ */ jsx64("input", { "aria-label": `\u6761\u4EF6 ${index + 1} \u503C`, type: field?.type ?? "text", value: rule.value, disabled, onChange: (event) => update(rule.id, { value: event.target.value }) }),
+        /* @__PURE__ */ jsx64("button", { type: "button", "aria-label": `\u5220\u9664\u6761\u4EF6 ${index + 1}`, disabled, onClick: () => onChange(rules.filter((item) => item.id !== rule.id)), children: "\xD7" })
+      ] }, rule.id);
+    }) }),
+    /* @__PURE__ */ jsx64("button", { type: "button", className: "hf-query-builder__add", disabled: disabled || !fields.length, onClick: add, children: "\uFF0B \u6DFB\u52A0\u6761\u4EF6" })
+  ] });
+}
+
+// src/data-display/WorkflowViews.tsx
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
+function FlowCanvas({ nodes, edges, width = 900, height = 420, selectedId, onSelect, empty = "\u6682\u65E0\u6D41\u7A0B\u8282\u70B9" }) {
+  const map = new Map(nodes.map((node) => [node.id, node]));
+  if (!nodes.length) return /* @__PURE__ */ jsx65("div", { className: "hf-flow-canvas hf-flow-canvas__empty", children: empty });
+  return /* @__PURE__ */ jsx65("div", { className: "hf-flow-canvas", role: "group", "aria-label": "\u6D41\u7A0B\u753B\u5E03", children: /* @__PURE__ */ jsxs57("div", { style: { width, height }, children: [
+    /* @__PURE__ */ jsx65("svg", { viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true", children: edges.map((edge, index) => {
+      const from = map.get(edge.from), to = map.get(edge.to);
+      if (!from || !to) return null;
+      const x1 = from.x + 82, y1 = from.y + 28, x2 = to.x, y2 = to.y + 28, bend = Math.max(30, Math.abs(x2 - x1) / 2);
+      return /* @__PURE__ */ jsxs57("g", { children: [
+        /* @__PURE__ */ jsx65("path", { d: `M${x1} ${y1} C${x1 + bend} ${y1},${x2 - bend} ${y2},${x2} ${y2}` }),
+        /* @__PURE__ */ jsx65("circle", { cx: x2, cy: y2, r: "3" }),
+        edge.label && /* @__PURE__ */ jsx65("text", { x: (x1 + x2) / 2, y: (y1 + y2) / 2 - 8, children: edge.label })
+      ] }, edge.id ?? index);
+    }) }),
+    nodes.map((node) => /* @__PURE__ */ jsxs57("button", { type: "button", className: `hf-flow-canvas__node is-${node.status ?? "default"}${selectedId === node.id ? " is-selected" : ""}`, style: { left: node.x, top: node.y }, "aria-pressed": selectedId === node.id, onClick: () => onSelect?.(node.id), children: [
+      /* @__PURE__ */ jsx65("strong", { children: node.label }),
+      node.description && /* @__PURE__ */ jsx65("small", { children: node.description })
+    ] }, node.id))
+  ] }) });
+}
+function KanbanBoard({ columns, onMove, onCardClick, empty = "\u6682\u65E0\u770B\u677F\u5217" }) {
+  const drop = (event, target) => {
+    event.preventDefault();
+    const card = event.dataTransfer.getData("application/x-hf-card"), from = event.dataTransfer.getData("application/x-hf-column");
+    if (card && from && from !== target) onMove?.(card, from, target);
+  };
+  if (!columns.length) return /* @__PURE__ */ jsx65("div", { className: "hf-kanban-board__empty", children: empty });
+  return /* @__PURE__ */ jsx65("div", { className: "hf-kanban-board", "aria-label": "\u770B\u677F", children: columns.map((column) => /* @__PURE__ */ jsxs57("section", { style: { "--hf-kanban-accent": column.accent }, onDragOver: (event) => event.preventDefault(), onDrop: (event) => drop(event, column.id), children: [
+    /* @__PURE__ */ jsxs57("header", { children: [
+      /* @__PURE__ */ jsx65("strong", { children: column.title }),
+      /* @__PURE__ */ jsxs57("span", { children: [
+        column.cards.length,
+        column.limit ? ` / ${column.limit}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx65("div", { children: column.cards.map((card) => /* @__PURE__ */ jsxs57("button", { type: "button", draggable: Boolean(onMove), className: "hf-kanban-card", onDragStart: (event) => {
+      event.dataTransfer.setData("application/x-hf-card", card.id);
+      event.dataTransfer.setData("application/x-hf-column", column.id);
+    }, onClick: () => onCardClick?.(card.id, column.id), children: [
+      /* @__PURE__ */ jsx65("strong", { children: card.title }),
+      card.description && /* @__PURE__ */ jsx65("p", { children: card.description }),
+      card.tags?.length ? /* @__PURE__ */ jsx65("span", { children: card.tags.map((tag) => /* @__PURE__ */ jsx65("i", { children: tag }, tag)) }) : null,
+      card.meta && /* @__PURE__ */ jsx65("small", { children: card.meta })
+    ] }, card.id)) })
+  ] }, column.id)) });
+}
+var day = 864e5;
+var toTime = (value) => new Date(value).setHours(0, 0, 0, 0);
+function GanttChart({ tasks, start, end, onTaskClick, empty = "\u6682\u65E0\u6392\u671F\u4EFB\u52A1" }) {
+  const range = useMemo7(() => {
+    const starts = tasks.map((task) => toTime(task.start)), ends = tasks.map((task) => toTime(task.end));
+    const from = start ? toTime(start) : Math.min(...starts), to = end ? toTime(end) : Math.max(...ends);
+    return { from, days: Math.max(1, Math.round((to - from) / day) + 1) };
+  }, [tasks, start, end]);
+  if (!tasks.length) return /* @__PURE__ */ jsx65("div", { className: "hf-gantt-chart__empty", children: empty });
+  return /* @__PURE__ */ jsxs57("div", { className: "hf-gantt-chart", children: [
+    /* @__PURE__ */ jsxs57("header", { children: [
+      /* @__PURE__ */ jsx65("strong", { children: "\u4EFB\u52A1" }),
+      /* @__PURE__ */ jsx65("div", { children: Array.from({ length: Math.min(range.days, 31) }, (_, index) => /* @__PURE__ */ jsx65("span", { children: new Date(range.from + index * day).getDate() }, index)) })
+    ] }),
+    tasks.map((task) => {
+      const offset = Math.max(0, (toTime(task.start) - range.from) / day), length = Math.max(1, (toTime(task.end) - toTime(task.start)) / day + 1);
+      return /* @__PURE__ */ jsxs57("div", { className: "hf-gantt-chart__row", children: [
+        /* @__PURE__ */ jsxs57("span", { children: [
+          /* @__PURE__ */ jsx65("strong", { children: task.label }),
+          task.group && /* @__PURE__ */ jsx65("small", { children: task.group })
+        ] }),
+        /* @__PURE__ */ jsx65("div", { children: /* @__PURE__ */ jsxs57("button", { type: "button", style: { left: `${offset / range.days * 100}%`, width: `${length / range.days * 100}%`, "--hf-gantt-color": task.color }, onClick: () => onTaskClick?.(task.id), children: [
+          /* @__PURE__ */ jsx65("i", { style: { width: `${Math.max(0, Math.min(100, task.progress ?? 0))}%` } }),
+          /* @__PURE__ */ jsxs57("span", { children: [
+            task.progress ?? 0,
+            "%"
+          ] })
+        ] }) })
+      ] }, task.id);
+    })
+  ] });
+}
+function ChartContainer({ title, description, actions, legend, children, height = 320, loading, empty, emptyContent = "\u6682\u65E0\u56FE\u8868\u6570\u636E" }) {
+  return /* @__PURE__ */ jsxs57("section", { className: "hf-chart-container", children: [
+    /* @__PURE__ */ jsxs57("header", { children: [
+      /* @__PURE__ */ jsxs57("div", { children: [
+        title && /* @__PURE__ */ jsx65("strong", { children: title }),
+        description && /* @__PURE__ */ jsx65("p", { children: description })
+      ] }),
+      actions
+    ] }),
+    legend?.length ? /* @__PURE__ */ jsx65("div", { className: "hf-chart-container__legend", children: legend.map((item, index) => /* @__PURE__ */ jsxs57("span", { children: [
+      /* @__PURE__ */ jsx65("i", { style: { background: item.color } }),
+      item.label,
+      item.value && /* @__PURE__ */ jsx65("strong", { children: item.value })
+    ] }, index)) }) : null,
+    /* @__PURE__ */ jsx65("div", { className: "hf-chart-container__body", style: { height }, children: loading ? /* @__PURE__ */ jsxs57("div", { className: "hf-chart-container__state", children: [
+      /* @__PURE__ */ jsx65("span", { className: "hf-spinner" }),
+      "\u6B63\u5728\u52A0\u8F7D\u56FE\u8868"
+    ] }) : empty ? /* @__PURE__ */ jsx65("div", { className: "hf-chart-container__state", children: emptyContent }) : children })
+  ] });
+}
+function PivotTable({ data, row, column, values, rowLabel = "\u9879\u76EE", showTotals = true, empty = "\u6682\u65E0\u900F\u89C6\u6570\u636E" }) {
+  const rows = [...new Set(data.map(row))], columns = [...new Set(data.map(column))];
+  const calculate = (items, metric) => {
+    if (metric.aggregate === "count") return items.length;
+    const sum = items.reduce((total, item) => total + metric.value(item), 0);
+    return metric.aggregate === "average" ? items.length ? sum / items.length : 0 : sum;
+  };
+  if (!data.length || !values.length) return /* @__PURE__ */ jsx65("div", { className: "hf-pivot-table__empty", children: empty });
+  return /* @__PURE__ */ jsx65("div", { className: "hf-pivot-table", children: /* @__PURE__ */ jsxs57("table", { children: [
+    /* @__PURE__ */ jsxs57("thead", { children: [
+      /* @__PURE__ */ jsxs57("tr", { children: [
+        /* @__PURE__ */ jsx65("th", { rowSpan: 2, children: rowLabel }),
+        columns.map((item) => /* @__PURE__ */ jsx65("th", { colSpan: values.length, children: item }, item)),
+        showTotals && /* @__PURE__ */ jsx65("th", { colSpan: values.length, children: "\u5408\u8BA1" })
+      ] }),
+      /* @__PURE__ */ jsx65("tr", { children: [...columns, ...showTotals ? ["__total"] : []].flatMap((col) => values.map((metric) => /* @__PURE__ */ jsx65("th", { children: metric.label }, `${col}-${metric.key}`))) })
+    ] }),
+    /* @__PURE__ */ jsx65("tbody", { children: rows.map((rowName) => /* @__PURE__ */ jsxs57("tr", { children: [
+      /* @__PURE__ */ jsx65("th", { children: rowName }),
+      [...columns, ...showTotals ? ["__total"] : []].flatMap((columnName) => values.map((metric) => {
+        const items = data.filter((item) => row(item) === rowName && (columnName === "__total" || column(item) === columnName));
+        const result = calculate(items, metric);
+        return /* @__PURE__ */ jsx65("td", { children: metric.format?.(result) ?? result }, `${columnName}-${metric.key}`);
+      }))
+    ] }, rowName)) })
+  ] }) });
+}
+
+// src/forms/FilterBuilder.tsx
+import { jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
+function FilterBuilder({ fields, value, onChange, disabled, addLabel = "\u6DFB\u52A0\u7B5B\u9009" }) {
+  const add = () => {
+    const field = fields.find((item) => !value.some((filter) => filter.field === item.key)) ?? fields[0];
+    if (field) onChange([...value, { id: `filter-${Date.now()}`, field: field.key, value: "" }]);
+  };
+  const update = (id, patch) => onChange(value.map((item) => item.id === id ? { ...item, ...patch } : item));
+  return /* @__PURE__ */ jsxs58("div", { className: "hf-filter-builder", role: "group", "aria-label": "\u7B5B\u9009\u6761\u4EF6", children: [
+    /* @__PURE__ */ jsx66("div", { children: value.map((filter, index) => {
+      const field = fields.find((item) => item.key === filter.field) ?? fields[0];
+      return /* @__PURE__ */ jsxs58("div", { className: "hf-filter-builder__item", children: [
+        /* @__PURE__ */ jsx66("select", { "aria-label": `\u7B5B\u9009 ${index + 1} \u5B57\u6BB5`, value: filter.field, disabled, onChange: (event) => update(filter.id, { field: event.target.value, value: "" }), children: fields.map((item) => /* @__PURE__ */ jsx66("option", { value: item.key, children: item.label }, item.key)) }),
+        field?.options ? /* @__PURE__ */ jsxs58("select", { "aria-label": `\u7B5B\u9009 ${index + 1} \u503C`, value: filter.value, disabled, onChange: (event) => update(filter.id, { value: event.target.value }), children: [
+          /* @__PURE__ */ jsx66("option", { value: "", children: "\u8BF7\u9009\u62E9" }),
+          field.options.map((item) => /* @__PURE__ */ jsx66("option", { value: item.value, children: item.label }, item.value))
+        ] }) : /* @__PURE__ */ jsx66("input", { "aria-label": `\u7B5B\u9009 ${index + 1} \u503C`, type: field?.type ?? "text", value: filter.value, disabled, onChange: (event) => update(filter.id, { value: event.target.value }) }),
+        /* @__PURE__ */ jsx66("button", { type: "button", "aria-label": `\u5220\u9664\u7B5B\u9009 ${index + 1}`, disabled, onClick: () => onChange(value.filter((item) => item.id !== filter.id)), children: "\xD7" })
+      ] }, filter.id);
+    }) }),
+    /* @__PURE__ */ jsxs58("button", { type: "button", className: "hf-filter-builder__add", disabled: disabled || !fields.length, onClick: add, children: [
+      "\uFF0B ",
+      addLabel
+    ] }),
+    value.length > 0 && /* @__PURE__ */ jsx66("button", { type: "button", className: "hf-filter-builder__clear", disabled, onClick: () => onChange([]), children: "\u6E05\u7A7A" })
+  ] });
+}
+export {
+  Accordion,
+  ActivityFeed,
+  ActivityIndicator,
+  AgentRunTimeline,
+  Alert,
+  ApprovalFlow,
+  AuditLog,
+  AuthLayout,
+  AvailabilityGrid,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Card,
+  Cascader,
+  ChartContainer,
+  ChatComposer,
+  ChatMessage,
+  Checkbox,
+  CheckboxGroup,
+  ChoiceGroup,
+  CircularProgress,
+  CitationList,
+  CodeBlock,
+  CodeEditor,
+  ColorPicker,
+  Combobox,
+  CommandPalette,
+  CommentThread,
+  Container,
+  ContextMenu,
+  ConversationBranch,
+  DataGrid,
+  DatePicker,
+  DateRangePicker,
+  Descriptions,
+  DiffViewer,
+  Divider,
+  Drawer,
+  Dropdown,
+  DropdownMenu,
+  EmptyState,
+  EventCard,
+  FileExplorer,
+  FilePreview,
+  FilterBuilder,
+  FloatingNav,
+  FlowCanvas,
+  Form,
+  FormItem,
+  GanttChart,
+  Grid,
+  Hero,
+  Icon,
+  IconButton,
+  Input,
+  InsightBoard,
+  JsonViewer,
+  KanbanBoard,
+  Link,
+  List,
+  LoadingDots,
+  LoadingOverlay,
+  MarkdownContent,
+  Masonry,
+  MegaMenu,
+  MemberPicker,
+  MentionInput,
+  MobileNavigation,
+  Modal,
+  ModelSelector,
+  MultiSelect,
+  Notification,
+  NotificationCenter,
+  NumberInput,
+  PageLayout,
+  Pagination,
+  PermissionMatrix,
+  PivotTable,
+  Popconfirm,
+  Popover,
+  Presence,
+  Progress,
+  ProgressBar,
+  ProgressRing,
+  PromptSuggestions,
+  QueryBuilder,
+  Radio,
+  RadioGroup,
+  RecurrenceEditor,
+  ResizablePanel,
+  ResourceCalendar,
+  Result,
+  RichTextEditor,
+  Scheduler,
+  Scrollspy,
+  SearchInput,
+  SegmentedControl,
+  Select,
+  SharePanel,
+  ShrinkNav,
+  Sidebar,
+  Skeleton,
+  Slider,
+  Sparkline,
+  Spinner,
+  SplitButton,
+  Stack,
+  Stat,
+  StatisticCard,
+  StepProgress,
+  Steps,
+  Switch,
+  Table,
+  Tabs,
+  Tag,
+  Textarea,
+  ThemeProvider,
+  TimePicker,
+  Timeline,
+  TimezoneSelect,
+  Toast,
+  TokenUsage,
+  ToolCallCard,
+  Tooltip,
+  Transfer,
+  Tree,
+  TreeSelect,
+  Typography,
+  Upload,
+  ValidatedInput,
+  VersionHistory,
+  VirtualList,
+  VoiceInput,
+  activateNavigationItem,
+  darkTheme,
+  defaultTheme,
+  highContrastTheme,
+  tokensToStyle,
+  validateForm,
+  validateValue
+};
+//# sourceMappingURL=index.js.map