@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-I4YPBAQ5.js

@@ -0,0 +1,163 @@
+import { Icon } from './chunk-LQMOYVQF.js';
+import { withComponentTheme, withInternalComponentThemePart } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './AppShell-OWJRJ4ZD.css';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var WindowControlsBase = React.forwardRef(({
+  platform = "mac",
+  onMinimize,
+  onMaximize,
+  onClose,
+  maximized = false,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const noDragStyle = { WebkitAppRegion: "no-drag" };
+  if (platform === "windows") {
+    return /* @__PURE__ */ jsxs("div", { ref, className: `win-controls windows ${className}`, ...rest, style: { ...noDragStyle, ...style }, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn minimize", onClick: onMinimize, disabled: !onMinimize, "aria-label": "\u6700\u5C0F\u5316", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M1 5h8", stroke: "currentColor", strokeWidth: "1" }) }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "win-btn maximize",
+          onClick: onMaximize,
+          disabled: !onMaximize,
+          "aria-label": maximized ? "\u8FD8\u539F\u7A97\u53E3" : "\u6700\u5927\u5316",
+          children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: maximized ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("rect", { x: "1", y: "3", width: "6", height: "6", stroke: "currentColor", strokeWidth: "1" }),
+            /* @__PURE__ */ jsx("path", { d: "M3 3V1h6v6H7", stroke: "currentColor", strokeWidth: "1" })
+          ] }) : /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "8", height: "8", stroke: "currentColor", strokeWidth: "1" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn close", onClick: onClose, disabled: !onClose, "aria-label": "\u5173\u95ED\u7A97\u53E3", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1" }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: `win-controls mac ${className}`, ...rest, style: { ...noDragStyle, ...style }, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn close", onClick: onClose, disabled: !onClose, "aria-label": "\u5173\u95ED\u7A97\u53E3" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn minimize", onClick: onMinimize, disabled: !onMinimize, "aria-label": "\u6700\u5C0F\u5316" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn maximize", onClick: onMaximize, disabled: !onMaximize, "aria-label": maximized ? "\u8FD8\u539F\u7A97\u53E3" : "\u6700\u5927\u5316" })
+  ] });
+});
+WindowControlsBase.displayName = "WindowControls";
+var WindowControls = withComponentTheme(
+  WindowControlsBase,
+  "WindowControls",
+  "app-shell"
+);
+var InternalWindowControls = withInternalComponentThemePart(
+  WindowControls,
+  "WindowControls"
+);
+var TitleBarBase = React.forwardRef(({
+  title,
+  platform = "mac",
+  onMinimize,
+  onMaximize,
+  onClose,
+  maximized = false,
+  center,
+  actions,
+  draggable = true,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const dragStyle = {
+    WebkitAppRegion: draggable ? "drag" : "no-drag",
+    ...style
+  };
+  const noDragStyle = { WebkitAppRegion: "no-drag" };
+  return /* @__PURE__ */ jsxs("div", { ref, className: `titlebar ${platform} ${draggable ? "draggable" : "no-drag"} ${className}`, ...rest, style: dragStyle, children: [
+    platform === "mac" && /* @__PURE__ */ jsx(InternalWindowControls, { platform: "mac", onMinimize, onMaximize, onClose, maximized }),
+    /* @__PURE__ */ jsx("div", { className: "titlebar-title", children: title }),
+    center && /* @__PURE__ */ jsx("div", { className: "titlebar-center", style: noDragStyle, children: center }),
+    actions && /* @__PURE__ */ jsx("div", { className: "titlebar-actions", style: noDragStyle, children: actions }),
+    platform === "windows" && /* @__PURE__ */ jsx(InternalWindowControls, { platform: "windows", onMinimize, onMaximize, onClose, maximized })
+  ] });
+});
+TitleBarBase.displayName = "TitleBar";
+var TitleBar = withComponentTheme(TitleBarBase, "TitleBar", "app-shell");
+var collectExpandableSidebarKeys = (items) => items.flatMap((item) => [
+  ...item.children?.length ? [item.key] : [],
+  ...item.children ? collectExpandableSidebarKeys(item.children) : []
+]);
+var SidebarBase = React.forwardRef(({
+  items,
+  activeKey,
+  onSelect,
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedKeysChange,
+  collapsed,
+  header,
+  footer,
+  navigationLabel = "\u4E3B\u5BFC\u822A",
+  className = "",
+  ...rest
+}, ref) => {
+  const [innerExpandedKeys, setInnerExpandedKeys] = React.useState(
+    () => defaultExpandedKeys ?? collectExpandableSidebarKeys(items)
+  );
+  const expandedControlled = expandedKeys !== void 0;
+  const currentExpandedKeys = expandedControlled ? expandedKeys : innerExpandedKeys;
+  const toggleExpanded = (key) => {
+    const next = currentExpandedKeys.includes(key) ? currentExpandedKeys.filter((itemKey) => itemKey !== key) : [...currentExpandedKeys, key];
+    if (!expandedControlled) setInnerExpandedKeys(next);
+    onExpandedKeysChange?.(next);
+  };
+  const renderItems = (entries, level = 1) => entries.map((item) => {
+    const active = activeKey === item.key;
+    const hasChildren = !!item.children?.length;
+    const expanded = hasChildren && currentExpandedKeys.includes(item.key);
+    const showChildren = !collapsed && expanded;
+    const textLabel = item.ariaLabel ?? (typeof item.label === "string" ? item.label : void 0);
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `sidebar-item ${active ? "active" : ""}`,
+          style: { ["--sidebar-indent"]: `${(level - 1) * 16}px` },
+          "aria-current": active ? "page" : void 0,
+          "aria-label": collapsed ? textLabel : void 0,
+          title: collapsed ? textLabel : void 0,
+          "aria-expanded": hasChildren ? showChildren : void 0,
+          onClick: () => {
+            onSelect?.(item.key);
+            if (hasChildren) toggleExpanded(item.key);
+          },
+          children: [
+            item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar-icon", "aria-hidden": collapsed && !!textLabel, children: item.icon }),
+            !collapsed && /* @__PURE__ */ jsx("span", { className: "sidebar-label", children: item.label }),
+            !collapsed && item.badge != null && /* @__PURE__ */ jsx("span", { className: "sidebar-badge", children: item.badge }),
+            !collapsed && hasChildren && /* @__PURE__ */ jsx("span", { className: `sidebar-expand ${expanded ? "open" : ""}`, "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 13 }) })
+          ]
+        }
+      ),
+      showChildren && /* @__PURE__ */ jsx("div", { className: "sidebar-children", role: "group", "aria-label": textLabel, children: renderItems(item.children, level + 1) })
+    ] }, item.key);
+  });
+  return /* @__PURE__ */ jsxs("aside", { ref, className: `sidebar ${collapsed ? "collapsed" : ""} ${className}`, ...rest, children: [
+    header != null && /* @__PURE__ */ jsx("div", { className: "sidebar-header", children: header }),
+    /* @__PURE__ */ jsx("nav", { className: "sidebar-nav", "aria-label": navigationLabel, children: renderItems(items) }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "sidebar-footer", children: footer })
+  ] });
+});
+SidebarBase.displayName = "Sidebar";
+var Sidebar = withComponentTheme(SidebarBase, "Sidebar", "app-shell");
+var AppShellBase = React.forwardRef(({ sidebar, titleBar, children, className = "", ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: `app-shell ${className}`, ...rest, children: [
+  titleBar,
+  /* @__PURE__ */ jsxs("div", { className: "app-shell-body", children: [
+    sidebar,
+    /* @__PURE__ */ jsx("main", { className: "app-shell-main", children })
+  ] })
+] }));
+AppShellBase.displayName = "AppShell";
+var AppShell = withComponentTheme(AppShellBase, "AppShell", "app-shell");
+
+export { AppShell, Sidebar, TitleBar, WindowControls };

package/dist/chunk-IJDM2U3B.js

@@ -0,0 +1,100 @@
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Tabs-FB2AMBWL.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var getFirstEnabledKey = (items) => items.find((item) => !item.disabled)?.key;
+var TabsBase = React.forwardRef(({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  variant = "line",
+  centered,
+  tabBarClassName = "",
+  contentClassName = "",
+  fill = false,
+  className = "",
+  ...rest
+}, ref) => {
+  const baseId = React.useId();
+  const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+  const [inner, setInner] = React.useState(defaultActiveKey ?? getFirstEnabledKey(items));
+  const isControlled = activeKey !== void 0;
+  const requested = isControlled ? activeKey : inner;
+  const current = items.some((item) => item.key === requested && !item.disabled) ? requested : getFirstEnabledKey(items);
+  const select = (k) => {
+    if (items.find((item) => item.key === k)?.disabled) return;
+    if (!isControlled) setInner(k);
+    onChange?.(k);
+  };
+  const handleTabKeyDown = (event) => {
+    const enabled = items.filter((item) => !item.disabled);
+    const index = enabled.findIndex((item) => item.key === current);
+    let target;
+    if (event.key === "ArrowRight") target = enabled[(index + 1) % enabled.length];
+    if (event.key === "ArrowLeft") target = enabled[(index - 1 + enabled.length) % enabled.length];
+    if (event.key === "Home") target = enabled[0];
+    if (event.key === "End") target = enabled[enabled.length - 1];
+    if (!target) return;
+    event.preventDefault();
+    tabRefs.current.get(target.key)?.focus();
+    select(target.key);
+  };
+  const active = items.find((i) => i.key === current);
+  const activeIndex = items.findIndex((item) => item.key === current);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: [
+        "tabs",
+        variant,
+        centered ? "centered" : "",
+        fill ? "fill" : "",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: ["tabs-nav", tabBarClassName].filter(Boolean).join(" "), role: "tablist", children: items.map((it, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (node) => {
+              if (node) tabRefs.current.set(it.key, node);
+              else tabRefs.current.delete(it.key);
+            },
+            type: "button",
+            role: "tab",
+            id: `${baseId}-tab-${index}`,
+            "aria-selected": current === it.key,
+            "aria-controls": it.content !== void 0 ? `${baseId}-panel-${index}` : void 0,
+            tabIndex: current === it.key ? 0 : -1,
+            disabled: it.disabled,
+            className: `tab ${current === it.key ? "active" : ""}`,
+            onClick: () => select(it.key),
+            onKeyDown: handleTabKeyDown,
+            children: it.label
+          },
+          it.key
+        )) }),
+        active?.content !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${baseId}-panel-${activeIndex}`,
+            className: ["tabs-content", contentClassName].filter(Boolean).join(" "),
+            role: "tabpanel",
+            "aria-labelledby": `${baseId}-tab-${activeIndex}`,
+            tabIndex: 0,
+            children: active.content
+          }
+        )
+      ]
+    }
+  );
+});
+TabsBase.displayName = "Tabs";
+var Tabs = withComponentTheme(TabsBase, "Tabs", "tabs");
+
+export { Tabs };

package/dist/chunk-J5UEQ3ZQ.js

@@ -0,0 +1,226 @@
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Splitter-IQ3PFIKK.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function clampSplitterSize(value, minimum, maximum) {
+  const normalized = Number.isFinite(value) ? value : minimum;
+  return Math.max(minimum, Math.min(maximum, normalized));
+}
+function readStoredSplitterSize(storageKey) {
+  if (!storageKey || typeof window === "undefined") return void 0;
+  try {
+    const storedValue = window.localStorage.getItem(`lumina:splitter:v1:${storageKey}`);
+    if (storedValue == null) return void 0;
+    const value = Number(storedValue);
+    return Number.isFinite(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var SplitterBase = React.forwardRef(({
+  direction = "horizontal",
+  defaultSize = 240,
+  size,
+  onResize,
+  onResizeEnd,
+  min = 80,
+  max = Infinity,
+  step = 16,
+  children,
+  className = "",
+  handleClassName = "",
+  handleProps,
+  firstPaneClassName = "",
+  firstPaneStyle,
+  secondPaneClassName = "",
+  secondPaneStyle,
+  handle,
+  secondMin = 24,
+  storageKey,
+  ...rest
+}, ref) => {
+  const isControlled = size !== void 0;
+  const containerRef = React.useRef(null);
+  const cleanupDragRef = React.useRef(null);
+  const [inner, setInner] = React.useState(
+    () => clampSplitterSize(readStoredSplitterSize(storageKey) ?? defaultSize, min, max)
+  );
+  const [containerSize, setContainerSize] = React.useState(Infinity);
+  const [dragging, setDragging] = React.useState(false);
+  const clamp = React.useCallback(
+    (value) => {
+      const availableMaximum = Number.isFinite(containerSize) && containerSize > 0 ? Math.max(0, containerSize - Math.max(0, secondMin) - 6) : Infinity;
+      const effectiveMaximum = Math.max(min, Math.min(max, availableMaximum));
+      return clampSplitterSize(value, min, effectiveMaximum);
+    },
+    [containerSize, max, min, secondMin]
+  );
+  const rawCurrent = isControlled ? size : inner;
+  const current = clamp(rawCurrent);
+  const persistSize = React.useCallback((value) => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(`lumina:splitter:v1:${storageKey}`, String(value));
+    } catch {
+    }
+  }, [storageKey]);
+  const commit = React.useCallback(
+    (value) => {
+      const clamped = clamp(value);
+      if (!isControlled) setInner(clamped);
+      onResize?.(clamped);
+      return clamped;
+    },
+    [clamp, isControlled, onResize]
+  );
+  React.useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const updateContainerSize = () => {
+      setContainerSize(direction === "horizontal" ? element.clientWidth : element.clientHeight);
+    };
+    updateContainerSize();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(updateContainerSize);
+      observer.observe(element);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, [direction]);
+  React.useEffect(() => () => cleanupDragRef.current?.(), []);
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setDragging(true);
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    let latest = current;
+    const move = (ev) => {
+      const next = direction === "horizontal" ? ev.clientX - rect.left : ev.clientY - rect.top;
+      latest = commit(next);
+    };
+    const finish = () => {
+      setDragging(false);
+      onResizeEnd?.(latest);
+      persistSize(latest);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", finish);
+      window.removeEventListener("pointercancel", finish);
+      window.removeEventListener("blur", finish);
+      cleanupDragRef.current = null;
+    };
+    cleanupDragRef.current?.();
+    cleanupDragRef.current = finish;
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", finish);
+    window.addEventListener("pointercancel", finish);
+    window.addEventListener("blur", finish);
+  };
+  const onKeyDown = (e) => {
+    const increment = (delta) => {
+      const next = commit(current + delta);
+      onResizeEnd?.(next);
+      persistSize(next);
+    };
+    if (direction === "horizontal") {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        increment(-step);
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        increment(step);
+      }
+    } else {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        increment(-step);
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        increment(step);
+      }
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      const next = commit(min);
+      onResizeEnd?.(next);
+      persistSize(next);
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      const next = commit(Number.MAX_SAFE_INTEGER);
+      onResizeEnd?.(next);
+      persistSize(next);
+    }
+  };
+  const firstStyle = direction === "horizontal" ? { width: current } : { height: current };
+  const {
+    className: nativeHandleClassName = "",
+    style: nativeHandleStyle,
+    children: nativeHandleChildren,
+    ...nativeHandleProps
+  } = handleProps ?? {};
+  const handleContent = handle !== void 0 ? handle : nativeHandleChildren !== void 0 ? nativeHandleChildren : /* @__PURE__ */ jsx("span", { className: "splitter-handle-grip", "aria-hidden": true });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: `splitter ${direction} ${dragging ? "dragging" : ""} ${className}`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ["splitter-panel", "first", firstPaneClassName].filter(Boolean).join(" "),
+            style: { ...firstStyle, ...firstPaneStyle },
+            children: children[0]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...nativeHandleProps,
+            role: "separator",
+            tabIndex: 0,
+            "aria-label": handleProps?.["aria-label"] ?? "\u8C03\u6574\u5206\u680F\u5C3A\u5BF8",
+            "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+            "aria-valuenow": current,
+            "aria-valuemin": min,
+            "aria-valuemax": Number.isFinite(max) ? clamp(max) : void 0,
+            className: ["splitter-handle", handleClassName, nativeHandleClassName].filter(Boolean).join(" "),
+            style: nativeHandleStyle,
+            onPointerDown,
+            onKeyDown: (event) => {
+              handleProps?.onKeyDown?.(event);
+              if (!event.defaultPrevented) onKeyDown(event);
+            },
+            children: handleContent
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ["splitter-panel", "second", secondPaneClassName].filter(Boolean).join(" "),
+            style: secondPaneStyle,
+            children: children[1]
+          }
+        )
+      ]
+    }
+  );
+});
+SplitterBase.displayName = "Splitter";
+var Splitter = withComponentTheme(SplitterBase, "Splitter", "splitter");
+
+export { Splitter };