@forgeax/view 0.2.1-beta-20260924075842

package/dist/modules/chunks/chunk-NJH2OJFC.mjs

@@ -0,0 +1,2113 @@
+// packages/view-components/src/components.tsx
+import {
+  AlertCircle,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  CircleAlert,
+  CircleCheck,
+  Info,
+  LoaderCircle,
+  Search,
+  X
+} from "lucide-react";
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+
+// packages/view-components/src/menuPlacement.ts
+var DEFAULT_PREFERENCE = ["right", "left", "bottom", "top"];
+function viewportSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}
+function candidatePosition(placement, anchor, menuWidth, menuHeight, gap) {
+  switch (placement) {
+    case "right":
+      return { x: anchor.right + gap, y: anchor.top };
+    case "left":
+      return { x: anchor.left - gap - menuWidth, y: anchor.top };
+    case "bottom":
+      return { x: anchor.left + anchor.width / 2 - menuWidth / 2, y: anchor.bottom + gap };
+    case "top":
+      return { x: anchor.left + anchor.width / 2 - menuWidth / 2, y: anchor.top - gap - menuHeight };
+  }
+}
+function fitsHorizontally(x, menuWidth, padding) {
+  const { width } = viewportSize();
+  return x >= padding && x + menuWidth <= width - padding;
+}
+function fitsVertically(y, menuHeight, padding) {
+  const { height } = viewportSize();
+  return y >= padding && y + menuHeight <= height - padding;
+}
+function fitsViewport(x, y, menuWidth, menuHeight, padding) {
+  return fitsHorizontally(x, menuWidth, padding) && fitsVertically(y, menuHeight, padding);
+}
+function visibleArea(x, y, menuWidth, menuHeight, padding) {
+  const { width, height } = viewportSize();
+  const left = Math.max(x, padding);
+  const top = Math.max(y, padding);
+  const right = Math.min(x + menuWidth, width - padding);
+  const bottom = Math.min(y + menuHeight, height - padding);
+  return Math.max(0, right - left) * Math.max(0, bottom - top);
+}
+function clampForPlacement(placement, x, y, menuWidth, menuHeight, padding) {
+  const { width, height } = viewportSize();
+  if (placement === "right" || placement === "left") {
+    return {
+      x: Math.max(padding, Math.min(x, width - padding - menuWidth)),
+      y: Math.max(padding, Math.min(y, height - padding - menuHeight))
+    };
+  }
+  return {
+    x: Math.max(padding, Math.min(x, width - padding - menuWidth)),
+    y: Math.max(padding, Math.min(y, height - padding - menuHeight))
+  };
+}
+function resolveFloatingMenuPosition(anchor, menuWidth, menuHeight, options = {}) {
+  const gap = options.gap ?? 8;
+  const padding = options.padding ?? 8;
+  const preference = options.preference ?? DEFAULT_PREFERENCE;
+  let best = preference[0];
+  let bestPoint = candidatePosition(best, anchor, menuWidth, menuHeight, gap);
+  let bestScore = -1;
+  for (const placement of preference) {
+    const point = candidatePosition(placement, anchor, menuWidth, menuHeight, gap);
+    const horizontal = placement === "right" || placement === "left";
+    const vertical = placement === "top" || placement === "bottom";
+    if (horizontal && fitsHorizontally(point.x, menuWidth, padding)) {
+      return { ...clampForPlacement(placement, point.x, point.y, menuWidth, menuHeight, padding), placement };
+    }
+    if (vertical && fitsVertically(point.y, menuHeight, padding)) {
+      return { ...clampForPlacement(placement, point.x, point.y, menuWidth, menuHeight, padding), placement };
+    }
+    if (fitsViewport(point.x, point.y, menuWidth, menuHeight, padding)) {
+      return { ...point, placement };
+    }
+    const score = visibleArea(point.x, point.y, menuWidth, menuHeight, padding);
+    if (score > bestScore) {
+      bestScore = score;
+      best = placement;
+      bestPoint = point;
+    }
+  }
+  const clamped = clampForPlacement(best, bestPoint.x, bestPoint.y, menuWidth, menuHeight, padding);
+  return { ...clamped, placement: best };
+}
+function anchorRectFromPoint(x, y) {
+  return { top: y, right: x, bottom: y, left: x, width: 0, height: 0 };
+}
+function resolveMenuDropdownPosition(anchor, menuWidth, menuHeight, align, options = {}) {
+  const gap = options.gap ?? 4;
+  const padding = options.padding ?? 8;
+  const { width: viewportWidth, height: viewportHeight } = viewportSize();
+  let x = align === "end" ? anchor.right - menuWidth : anchor.left;
+  let y = anchor.bottom + gap;
+  const spaceBelow = viewportHeight - padding - anchor.bottom - gap;
+  const spaceAbove = anchor.top - gap - padding;
+  if (menuHeight > spaceBelow && spaceAbove > spaceBelow) {
+    y = anchor.top - gap - menuHeight;
+  }
+  x = Math.max(padding, Math.min(x, viewportWidth - padding - menuWidth));
+  y = Math.max(padding, Math.min(y, viewportHeight - padding - menuHeight));
+  return { x, y };
+}
+
+// packages/view-components/src/components.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+var OverlayRootContext = createContext(null);
+function OverlayRootProvider({ root, children }) {
+  return /* @__PURE__ */ jsx(OverlayRootContext.Provider, { value: root, children });
+}
+function useOverlayRoot() {
+  return useContext(OverlayRootContext);
+}
+function classes(...names) {
+  return names.filter(Boolean).join(" ");
+}
+function Text({
+  as: Component = "p",
+  variant = "ui",
+  tone = "primary",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      className: classes(
+        "fx-text",
+        `fx-text--${variant}`,
+        tone !== "primary" && `fx-text--${tone}`,
+        className
+      )
+    }
+  );
+}
+var Surface = forwardRef(function Surface2({ tone = "canvas", card = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: classes("fx-surface", `fx-surface--${tone}`, card && "fx-surface--card", className)
+    }
+  );
+});
+var Link = forwardRef(function Link2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("a", { ...props, ref, className: classes("fx-link", className) });
+});
+var Button = forwardRef(function Button2({
+  variant = "secondary",
+  size = "default",
+  loading = false,
+  leadingIcon,
+  trailingIcon,
+  disabled,
+  className,
+  children,
+  type = "button",
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: classes(
+        "fx-button",
+        `fx-button--${variant}`,
+        size !== "default" && `fx-button--${size}`,
+        className
+      ),
+      children: [
+        loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "fx-icon fx-button__spinner", "aria-hidden": true }) : leadingIcon,
+        children,
+        !loading && trailingIcon
+      ]
+    }
+  );
+});
+var IconButton = forwardRef(function IconButton2({ label, icon, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      ref,
+      "aria-label": label,
+      title: props.title ?? label,
+      className: classes("fx-button--icon", className),
+      children: icon
+    }
+  );
+});
+function Field({ label, htmlFor, note, error, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { ...props, className: classes("fx-field", className), children: [
+    /* @__PURE__ */ jsx("label", { className: "fx-field__label", htmlFor, children: label }),
+    children,
+    (error || note) && /* @__PURE__ */ jsx("p", { className: classes("fx-field__note", Boolean(error) && "fx-field__error"), role: error ? "alert" : void 0, children: error ?? note })
+  ] });
+}
+var TextInput = forwardRef(
+  function TextInput2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("input", { ...props, ref, className: classes("fx-input", className) });
+  }
+);
+var Select = forwardRef(
+  function Select2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx("select", { ...props, ref, className: classes("fx-input", className), children });
+  }
+);
+var TextArea = forwardRef(
+  function TextArea2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("textarea", { ...props, ref, className: classes("fx-input", className) });
+  }
+);
+function ChoiceText({ label, description, hideLabel }) {
+  return /* @__PURE__ */ jsxs("span", { className: "fx-choice__text", children: [
+    /* @__PURE__ */ jsx("span", { className: classes("fx-choice__label", hideLabel && "fx-visually-hidden"), children: label }),
+    description ? /* @__PURE__ */ jsx("span", { className: classes("fx-choice__description", hideLabel && "fx-visually-hidden"), children: description }) : null
+  ] });
+}
+var Checkbox = forwardRef(function Checkbox2({ label, description, hideLabel, className, indeterminate, ...props }, ref) {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("label", { className: classes("fx-choice", "fx-choice--checkbox", className), children: [
+    /* @__PURE__ */ jsx("input", { ...props, ref: inputRef, type: "checkbox" }),
+    /* @__PURE__ */ jsx(ChoiceText, { label, description, hideLabel })
+  ] });
+});
+var Radio = forwardRef(function Radio2({ label, description, hideLabel, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("label", { className: classes("fx-choice", "fx-choice--radio", className), children: [
+    /* @__PURE__ */ jsx("input", { ...props, ref, type: "radio" }),
+    /* @__PURE__ */ jsx(ChoiceText, { label, description, hideLabel })
+  ] });
+});
+var RangeInput = forwardRef(
+  function RangeInput2({ className, type, ...props }, ref) {
+    return /* @__PURE__ */ jsx("input", { ...props, ref, type: type ?? "range", className: classes("fx-range", className) });
+  }
+);
+var Switch = forwardRef(function Switch2({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  label,
+  hideLabel,
+  layout = "inline",
+  className,
+  disabled,
+  onClick,
+  ...props
+}, ref) {
+  const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
+  const isChecked = checked ?? internalChecked;
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || disabled) return;
+    const next = !isChecked;
+    if (checked === void 0) setInternalChecked(next);
+    onCheckedChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": isChecked,
+      disabled,
+      className: classes("fx-switch", layout === "row" && "fx-switch--row", className),
+      onClick: handleClick,
+      children: [
+        label ? /* @__PURE__ */ jsx("span", { className: classes("fx-switch__label", hideLabel && "fx-visually-hidden"), children: label }) : null,
+        /* @__PURE__ */ jsx("span", { className: "fx-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "fx-switch__thumb" }) })
+      ]
+    }
+  );
+});
+function Spinner({ label = "\u6B63\u5728\u52A0\u8F7D", className }) {
+  return /* @__PURE__ */ jsx("span", { className: classes("fx-spinner", className), role: "status", "aria-label": label });
+}
+var statusIcons = {
+  success: CircleCheck,
+  warning: CircleAlert,
+  error: AlertCircle,
+  info: Info
+};
+function Status({
+  tone,
+  pill = false,
+  icon,
+  showIcon = true,
+  children,
+  className,
+  ...props
+}) {
+  const Icon = statusIcons[tone];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      className: classes("fx-status", `fx-status--${tone}`, pill && "fx-status--pill", className),
+      children: [
+        showIcon ? icon ?? /* @__PURE__ */ jsx(Icon, { className: "fx-icon", "aria-hidden": true }) : null,
+        children
+      ]
+    }
+  );
+}
+function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { ...props, className: classes("fx-empty", className), children: [
+    icon,
+    /* @__PURE__ */ jsx(Text, { as: "strong", variant: "heading", children: title }),
+    /* @__PURE__ */ jsx("p", { children: description }),
+    action
+  ] });
+}
+function LoadingState({
+  title = "\u6B63\u5728\u52A0\u8F7D",
+  description
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "fx-empty", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx(Spinner, { label: typeof title === "string" ? title : "\u6B63\u5728\u52A0\u8F7D" }),
+    /* @__PURE__ */ jsx(Text, { as: "strong", variant: "heading", children: title }),
+    description && /* @__PURE__ */ jsx("p", { children: description })
+  ] });
+}
+function PanelHeader({ start, center, end, className, ...props }) {
+  return /* @__PURE__ */ jsxs("header", { ...props, className: classes("fx-panel-header", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "fx-panel-header__slot", children: start }),
+    /* @__PURE__ */ jsx("div", { className: "fx-panel-header__slot", children: center }),
+    /* @__PURE__ */ jsx("div", { className: "fx-panel-header__slot", children: end })
+  ] });
+}
+function Toolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, role: props.role ?? "toolbar", className: classes("fx-toolbar", className) });
+}
+var SearchField = forwardRef(function SearchField2({ label = "\u641C\u7D22", onClear, value, className, ...props }, ref) {
+  const hasValue = value != null && String(value).length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: classes("fx-search", className), children: [
+    /* @__PURE__ */ jsx(Search, { className: "fx-icon fx-search__leading", "aria-hidden": true }),
+    /* @__PURE__ */ jsx(TextInput, { ...props, ref, type: "search", value, "aria-label": label }),
+    hasValue && onClear && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "fx-search__clear",
+        label: "\u6E05\u9664\u641C\u7D22",
+        icon: /* @__PURE__ */ jsx(X, { className: "fx-icon" }),
+        variant: "quiet",
+        size: "compact",
+        onClick: onClear
+      }
+    )
+  ] });
+});
+function Menu({
+  items,
+  label = "\u83DC\u5355",
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: classes("fx-menu", className), role: "menu", "aria-label": label, children: items.map((item, index) => {
+    if (item.type === "separator") {
+      return /* @__PURE__ */ jsx("div", { className: "fx-menu__separator", role: "separator" }, `separator-${index}`);
+    }
+    if (item.type === "title") {
+      return /* @__PURE__ */ jsx("div", { className: "fx-menu__title", children: item.label }, `title-${index}`);
+    }
+    const { className: itemClassName, ...buttonProps } = item.buttonProps ?? {};
+    return /* @__PURE__ */ createElement(
+      "button",
+      {
+        ...buttonProps,
+        type: "button",
+        role: "menuitem",
+        key: item.id,
+        disabled: item.disabled,
+        "aria-selected": item.selected || void 0,
+        className: classes(
+          "fx-menu__item",
+          item.selected && "fx-menu__item--selected",
+          item.danger && "fx-menu__item--danger",
+          itemClassName
+        ),
+        onClick: item.onSelect
+      },
+      /* @__PURE__ */ jsx("span", { className: "fx-menu__leading", "aria-hidden": true, children: item.selected ? /* @__PURE__ */ jsx(Check, { className: "fx-icon" }) : item.icon }),
+      /* @__PURE__ */ jsx("span", { className: "fx-menu__label", children: item.label }),
+      item.shortcut && /* @__PURE__ */ jsx("kbd", { className: "fx-menu__shortcut", children: item.shortcut })
+    );
+  }) });
+}
+function FloatingMenu({
+  open,
+  anchorRect,
+  onClose,
+  gap = 8,
+  className,
+  ignorePointerWithin,
+  containerProps,
+  children
+}) {
+  const overlayRoot = useOverlayRoot();
+  const menuRef = useRef(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [visible, setVisible] = useState(false);
+  const updatePosition = useCallback(() => {
+    if (!open || !anchorRect || !menuRef.current) return;
+    const { width, height } = menuRef.current.getBoundingClientRect();
+    const resolved = resolveFloatingMenuPosition(anchorRect, width, height, { gap });
+    setPosition({ x: resolved.x, y: resolved.y });
+    setVisible(true);
+  }, [anchorRect, gap, open]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setVisible(false);
+      return;
+    }
+    setVisible(false);
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, updatePosition, children]);
+  useEffect(() => {
+    if (!open || !onClose) return;
+    const close = (event) => {
+      const target = event.target;
+      if (menuRef.current?.contains(target)) return;
+      if (ignorePointerWithin?.some((ref) => ref.current?.contains(target))) return;
+      onClose();
+    };
+    const escape = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("keydown", escape);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", escape);
+    };
+  }, [ignorePointerWithin, onClose, open]);
+  if (!open || !anchorRect || typeof document === "undefined") return null;
+  const {
+    className: containerClassName,
+    style: containerStyle,
+    onPointerDown,
+    ...restContainerProps
+  } = containerProps ?? {};
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...restContainerProps,
+        ref: menuRef,
+        className: classes("fx-menu-position", "fx-ui", className, containerClassName),
+        style: {
+          ...containerStyle,
+          left: position.x,
+          top: position.y,
+          visibility: visible ? "visible" : "hidden"
+        },
+        onPointerDown: (event) => {
+          event.stopPropagation();
+          onPointerDown?.(event);
+        },
+        children
+      }
+    ),
+    overlayRoot ?? document.body
+  );
+}
+function MenuDropdown({ label = "\u83DC\u5355", items, align = "end", className, trigger }) {
+  const overlayRoot = useOverlayRoot();
+  const anchorRef = useRef(null);
+  const menuRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [visible, setVisible] = useState(false);
+  const menuItems = useMemo(
+    () => items.map(
+      (item) => item.type === void 0 || item.type === "item" ? {
+        ...item,
+        onSelect: () => {
+          item.onSelect?.();
+          setOpen(false);
+        }
+      } : item
+    ),
+    [items]
+  );
+  const repositionMenu = useCallback(() => {
+    if (!open || !anchorRef.current || !menuRef.current) return;
+    const anchor = anchorRef.current.getBoundingClientRect();
+    const { width, height } = menuRef.current.getBoundingClientRect();
+    if (width <= 0 || height <= 0) return;
+    const resolved = resolveMenuDropdownPosition(anchor, width, height, align, { gap: 4 });
+    setPosition(resolved);
+    setVisible(true);
+  }, [align, open]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setVisible(false);
+      return;
+    }
+    setVisible(false);
+    repositionMenu();
+    const menuEl = menuRef.current;
+    const observer = menuEl ? new ResizeObserver(() => repositionMenu()) : null;
+    if (menuEl && observer) observer.observe(menuEl);
+    const onLayout = () => repositionMenu();
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, repositionMenu, menuItems]);
+  useEffect(() => {
+    if (!open) return;
+    const close = (event) => {
+      const target = event.target;
+      if (anchorRef.current?.contains(target)) return;
+      if (menuRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const triggerElement = cloneElement(trigger, {
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    onClick: (event) => {
+      trigger.props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      setOpen((current) => !current);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "fx-menu-dropdown__anchor", ref: anchorRef, children: triggerElement }),
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          className: classes("fx-menu-position", "fx-ui", className),
+          style: {
+            left: position.x,
+            top: position.y,
+            visibility: visible ? "visible" : "hidden"
+          },
+          onPointerDown: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsx(Menu, { label, items: menuItems })
+        }
+      ),
+      overlayRoot ?? document.body
+    )
+  ] });
+}
+function ContextMenu({
+  open,
+  x = 0,
+  y = 0,
+  anchorRect = null,
+  gap = 8,
+  items,
+  onClose,
+  label,
+  containerProps
+}) {
+  const overlayRoot = useOverlayRoot();
+  useEffect(() => {
+    if (!open || anchorRect) return;
+    const close = () => onClose();
+    const escape = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("keydown", escape);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", escape);
+    };
+  }, [anchorRect, onClose, open]);
+  if (anchorRect) {
+    return /* @__PURE__ */ jsx(
+      FloatingMenu,
+      {
+        open,
+        anchorRect,
+        onClose,
+        gap,
+        containerProps,
+        children: /* @__PURE__ */ jsx(
+          Menu,
+          {
+            label,
+            items: items.map(
+              (item) => item.type === void 0 || item.type === "item" ? { ...item, onSelect: () => {
+                item.onSelect?.();
+                onClose();
+              } } : item
+            )
+          }
+        )
+      }
+    );
+  }
+  if (!open || typeof document === "undefined") return null;
+  const {
+    className: containerClassName,
+    style: containerStyle,
+    onPointerDown,
+    ...positionProps
+  } = containerProps ?? {};
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...positionProps,
+        className: classes("fx-menu-position", "fx-ui", containerClassName),
+        style: { ...containerStyle, left: x, top: y },
+        onPointerDown: (event) => {
+          event.stopPropagation();
+          onPointerDown?.(event);
+        },
+        children: /* @__PURE__ */ jsx(
+          Menu,
+          {
+            items: items.map(
+              (item) => item.type === void 0 || item.type === "item" ? { ...item, onSelect: () => {
+                item.onSelect?.();
+                onClose();
+              } } : item
+            ),
+            label
+          }
+        )
+      }
+    ),
+    overlayRoot ?? document.body
+  );
+}
+function Dialog({
+  open,
+  title,
+  children,
+  footer,
+  className,
+  dismissible = true,
+  onClose,
+  initialFocusRef,
+  closeLabel = "\u5173\u95ED\u5F39\u7A97"
+}) {
+  const ref = useRef(null);
+  const returnFocusRef = useRef(null);
+  const titleId = useId();
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      dialog.showModal();
+      requestAnimationFrame(() => initialFocusRef?.current?.focus());
+    }
+    if (!open && dialog.open) {
+      dialog.close();
+      returnFocusRef.current?.focus();
+    }
+  }, [initialFocusRef, open]);
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref,
+      className: classes("fx-dialog", "fx-ui", className),
+      "aria-labelledby": titleId,
+      "data-dismissible": dismissible ? "true" : "false",
+      closedby: dismissible ? "closerequest" : "none",
+      onCancel: (event) => {
+        event.preventDefault();
+        if (dismissible) onClose?.();
+      },
+      onClose: () => {
+        if (dismissible) {
+          onClose?.();
+          return;
+        }
+        requestAnimationFrame(() => {
+          const dialog = ref.current;
+          if (open && dialog && !dialog.open) {
+            dialog.showModal();
+            initialFocusRef?.current?.focus();
+          }
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "fx-dialog__header", children: [
+          /* @__PURE__ */ jsx(Text, { as: "h2", id: titleId, variant: "heading", children: title }),
+          dismissible ? /* @__PURE__ */ jsx(IconButton, { label: closeLabel, icon: /* @__PURE__ */ jsx(X, { className: "fx-icon" }), variant: "quiet", onClick: onClose }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "fx-dialog__body", children }),
+        footer && /* @__PURE__ */ jsx("div", { className: "fx-dialog__footer", children: footer })
+      ]
+    }
+  );
+}
+function TooltipBody({ title, description, content }) {
+  if (title != null || description != null) {
+    return /* @__PURE__ */ jsxs("div", { className: "fx-tooltip__content", children: [
+      title != null && /* @__PURE__ */ jsx("div", { className: "fx-tooltip__title", children: title }),
+      description != null && /* @__PURE__ */ jsx("div", { className: "fx-tooltip__description", children: description })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "fx-tooltip__content", children: content });
+}
+var TOOLTIP_VIEWPORT_MARGIN = 12;
+var TOOLTIP_ANCHOR_GAP = 10;
+function clampTooltipPosition(anchor, tip, placement) {
+  let x = anchor.left + anchor.width / 2;
+  const half = tip.width / 2;
+  const minX = TOOLTIP_VIEWPORT_MARGIN + half;
+  const maxX = window.innerWidth - TOOLTIP_VIEWPORT_MARGIN - half;
+  x = Math.min(Math.max(x, minX), maxX);
+  let resolved = placement;
+  let y = placement === "top" ? anchor.top - TOOLTIP_ANCHOR_GAP : anchor.bottom + TOOLTIP_ANCHOR_GAP;
+  if (placement === "bottom") {
+    if (y + tip.height > window.innerHeight - TOOLTIP_VIEWPORT_MARGIN) {
+      resolved = "top";
+      y = anchor.top - TOOLTIP_ANCHOR_GAP;
+    }
+  } else if (y - tip.height < TOOLTIP_VIEWPORT_MARGIN) {
+    resolved = "bottom";
+    y = anchor.bottom + TOOLTIP_ANCHOR_GAP;
+  }
+  return { x, y, placement: resolved };
+}
+function Tooltip({
+  content,
+  title,
+  description,
+  children,
+  placement = "top",
+  portaled = false,
+  open = false
+}) {
+  const overlayRoot = useOverlayRoot();
+  const anchorRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const [hoverVisible, setHoverVisible] = useState(false);
+  const visible = open || hoverVisible;
+  const [coords, setCoords] = useState({ x: 0, y: 0 });
+  const [resolvedPlacement, setResolvedPlacement] = useState(placement);
+  const timer = useRef(null);
+  const updateCoords = useCallback(() => {
+    const anchor = anchorRef.current?.getBoundingClientRect();
+    if (!anchor) return;
+    const tip = tooltipRef.current?.getBoundingClientRect();
+    if (tip && tip.width > 0) {
+      const next = clampTooltipPosition(anchor, tip, placement);
+      setCoords({ x: next.x, y: next.y });
+      setResolvedPlacement(next.placement);
+      return;
+    }
+    setCoords({
+      x: anchor.left + anchor.width / 2,
+      y: placement === "top" ? anchor.top - TOOLTIP_ANCHOR_GAP : anchor.bottom + TOOLTIP_ANCHOR_GAP
+    });
+    setResolvedPlacement(placement);
+  }, [placement]);
+  useLayoutEffect(() => {
+    if (!visible) return;
+    updateCoords();
+    if (!portaled) return;
+    const onLayout = () => updateCoords();
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [portaled, updateCoords, visible]);
+  const show = () => {
+    if (open) return;
+    timer.current = setTimeout(() => {
+      setHoverVisible(true);
+    }, 400);
+  };
+  const hide = () => {
+    if (open) return;
+    if (timer.current) clearTimeout(timer.current);
+    setHoverVisible(false);
+    setResolvedPlacement(placement);
+  };
+  const effectivePlacement = portaled ? resolvedPlacement : placement;
+  const tooltipStyle = portaled ? {
+    left: coords.x,
+    top: coords.y,
+    transform: effectivePlacement === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)"
+  } : void 0;
+  const tooltip = visible ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: tooltipRef,
+      className: classes(
+        "fx-tooltip",
+        effectivePlacement === "bottom" ? "fx-tooltip--bottom" : "fx-tooltip--top",
+        portaled && "fx-tooltip--fixed",
+        open && "fx-tooltip--interactive"
+      ),
+      style: tooltipStyle,
+      role: "tooltip",
+      children: /* @__PURE__ */ jsx(TooltipBody, { title, description, content })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: anchorRef,
+      className: "fx-tooltip-anchor",
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        children,
+        portaled && typeof document !== "undefined" ? tooltip && createPortal(tooltip, overlayRoot ?? document.body) : tooltip
+      ]
+    }
+  );
+}
+var ToastContext = createContext(null);
+function PropertyRow({
+  label,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: classes("fx-property-row", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "fx-property-row__label", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "fx-property-row__control", children })
+  ] });
+}
+function CollapsibleSection({
+  title,
+  children,
+  defaultOpen = true,
+  open,
+  onOpenChange,
+  trailing,
+  className,
+  triggerProps,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const expanded = open ?? internalOpen;
+  const contentId = useId();
+  const toggle = () => {
+    const next = !expanded;
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const {
+    className: triggerClassName,
+    onClick: onTriggerClick,
+    ...buttonProps
+  } = triggerProps ?? {};
+  return /* @__PURE__ */ jsxs("section", { ...props, className: classes("fx-collapsible", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "fx-collapsible__heading", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ...buttonProps,
+          type: "button",
+          className: classes("fx-collapsible__trigger", triggerClassName),
+          "aria-expanded": expanded,
+          "aria-controls": contentId,
+          onClick: (event) => {
+            onTriggerClick?.(event);
+            if (!event.defaultPrevented) toggle();
+          },
+          children: [
+            expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "fx-icon" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "fx-icon" }),
+            /* @__PURE__ */ jsx("span", { className: "fx-collapsible__title", children: title })
+          ]
+        }
+      ),
+      trailing && /* @__PURE__ */ jsx("div", { className: "fx-collapsible__actions", children: trailing })
+    ] }),
+    expanded && /* @__PURE__ */ jsx("div", { className: "fx-collapsible__content", id: contentId, children })
+  ] });
+}
+
+// packages/view-components/src/theme.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
+
+// packages/view-components/src/tokens.ts
+var themeNames = ["light", "dark"];
+var colorTokens = {
+  surface: {
+    canvas: "--fx-color-surface-canvas",
+    sidebar: "--fx-color-surface-sidebar",
+    raised: "--fx-color-surface-raised",
+    inset: "--fx-color-surface-inset",
+    hover: "--fx-color-surface-hover",
+    selected: "--fx-color-surface-selected"
+  },
+  text: {
+    primary: "--fx-color-text-primary",
+    secondary: "--fx-color-text-secondary",
+    muted: "--fx-color-text-muted",
+    disabled: "--fx-color-text-disabled",
+    inverse: "--fx-color-text-inverse",
+    link: "--fx-color-text-link"
+  },
+  border: {
+    subtle: "--fx-color-border-subtle",
+    default: "--fx-color-border-default",
+    control: "--fx-color-border-control",
+    strong: "--fx-color-border-strong",
+    focus: "--fx-color-border-focus",
+    essential: "--fx-color-border-essential"
+  },
+  action: {
+    primaryBackground: "--fx-color-action-primary-bg",
+    primaryForeground: "--fx-color-action-primary-fg",
+    primaryHover: "--fx-color-action-primary-hover",
+    primaryPressed: "--fx-color-action-primary-pressed",
+    secondaryBackground: "--fx-color-action-secondary-bg",
+    secondaryForeground: "--fx-color-action-secondary-fg",
+    secondaryHover: "--fx-color-action-secondary-hover",
+    disabledBackground: "--fx-color-action-disabled-bg",
+    disabledForeground: "--fx-color-action-disabled-fg",
+    dangerBackground: "--fx-color-action-danger-bg",
+    dangerForeground: "--fx-color-action-danger-fg"
+  },
+  selection: {
+    background: "--fx-color-selection-bg",
+    foreground: "--fx-color-selection-fg",
+    indicator: "--fx-color-selection-indicator"
+  },
+  brand: {
+    accent: "--fx-color-brand-accent",
+    text: "--fx-color-brand-text",
+    soft: "--fx-color-brand-soft",
+    onAccent: "--fx-color-brand-on-accent"
+  },
+  status: {
+    successForeground: "--fx-color-status-success-fg",
+    successBackground: "--fx-color-status-success-bg",
+    warningForeground: "--fx-color-status-warning-fg",
+    warningBackground: "--fx-color-status-warning-bg",
+    errorForeground: "--fx-color-status-error-fg",
+    errorBackground: "--fx-color-status-error-bg",
+    infoForeground: "--fx-color-status-info-fg",
+    infoBackground: "--fx-color-status-info-bg"
+  },
+  scrim: "--fx-color-scrim",
+  choiceIndicator: "--fx-color-choice-indicator"
+};
+var surfaceTokens = colorTokens.surface;
+
+// packages/view-components/src/theme.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var THEME_STORAGE_KEY = "forgeax-view-theme";
+var ThemeContext = createContext2(null);
+function isThemeName(value) {
+  return typeof value === "string" && themeNames.includes(value);
+}
+function getStoredTheme(fallback = "light") {
+  if (typeof window === "undefined") return fallback;
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+  return isThemeName(stored) ? stored : fallback;
+}
+function applyTheme(theme, target) {
+  const element = target ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (element) element.dataset.theme = theme;
+}
+function initializeTheme(fallback = "light") {
+  const theme = getStoredTheme(fallback);
+  applyTheme(theme);
+  return theme;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  theme: controlledTheme,
+  onThemeChange,
+  persist = false,
+  applyToDocument = true,
+  unstyled = false,
+  className,
+  ...props
+}) {
+  const [internalTheme, setInternalTheme] = useState2(
+    () => persist ? getStoredTheme(defaultTheme) : defaultTheme
+  );
+  const theme = controlledTheme ?? internalTheme;
+  const setTheme = useCallback2(
+    (nextTheme) => {
+      if (!controlledTheme) setInternalTheme(nextTheme);
+      if (persist && typeof window !== "undefined") {
+        window.localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
+      }
+      onThemeChange?.(nextTheme);
+    },
+    [controlledTheme, onThemeChange, persist]
+  );
+  useEffect2(() => {
+    if (applyToDocument) applyTheme(theme);
+  }, [applyToDocument, theme]);
+  const value = useMemo2(
+    () => ({
+      theme,
+      setTheme,
+      toggleTheme: () => setTheme(theme === "light" ? "dark" : "light")
+    }),
+    [setTheme, theme]
+  );
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value, children: unstyled ? children : /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: ["fx-ui", className].filter(Boolean).join(" "),
+      "data-theme": applyToDocument ? void 0 : theme,
+      children
+    }
+  ) });
+}
+function useTheme() {
+  const context = useContext2(ThemeContext);
+  if (!context) throw new Error("useTheme must be used inside ThemeProvider");
+  return context;
+}
+
+// packages/view-components/src/useWorkspaceClientConnected.ts
+import { useSyncExternalStore } from "react";
+function readConnected(client) {
+  const transport = client?.transport;
+  return Boolean(transport && typeof transport.request === "function" && transport.connected !== false);
+}
+function useWorkspaceClientConnected(client) {
+  return useSyncExternalStore(
+    (onChange) => client?.onDisconnect?.(onChange) ?? (() => {
+    }),
+    () => readConnected(client),
+    () => readConnected(client)
+  );
+}
+
+// packages/view-components/src/inspector-form-model.mjs
+function formatInspectorFieldLabel(key) {
+  if (key == null) return "";
+  const text = String(key);
+  if (!text) return "";
+  return text.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function numericComponents(value) {
+  if (!Array.isArray(value)) return null;
+  if (value.length === 0) return null;
+  if (!value.every((entry) => typeof entry === "number" && Number.isFinite(entry))) return null;
+  return value;
+}
+function schemaTypeName(schema) {
+  if (typeof schema === "string") return schema.toLowerCase();
+  if (schema && typeof schema === "object" && typeof schema.type === "string") return schema.type.toLowerCase();
+  return "";
+}
+var HEX_COLOR = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+function isAssetRefRecord(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const record = (
+    /** @type {Record<string, unknown>} */
+    value
+  );
+  const identity = record.guid ?? record.id;
+  if (typeof identity !== "string" || identity.trim() === "") return false;
+  return Object.values(record).every((entry) => entry == null || typeof entry !== "object");
+}
+function resolveInspectorFieldKind(schema, value) {
+  const type = schemaTypeName(schema);
+  if (typeof value === "boolean" || type.includes("bool")) return "bool";
+  if (typeof value === "number" || type === "f32" || type === "f64" || type === "i32" || type === "u32" || type === "number") {
+    return "number";
+  }
+  const array = numericComponents(value);
+  if (array?.length === 3) return "vector3";
+  if (array?.length === 4) return "vector4";
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const record = (
+      /** @type {Record<string, unknown>} */
+      value
+    );
+    if (typeof record.x === "number" && typeof record.y === "number" && typeof record.z === "number") {
+      return typeof record.w === "number" ? "vector4" : "vector3";
+    }
+  }
+  if (type.includes("enum") || schema && typeof schema === "object" && Array.isArray(
+    /** @type {Record<string, unknown>} */
+    schema.enum
+  )) {
+    return "enum";
+  }
+  if (type.includes("color") || typeof value === "string" && HEX_COLOR.test(value)) return "color";
+  if (type.includes("asset") || type.includes("guid") || type.includes("ref") || isAssetRefRecord(value)) return "asset";
+  if (Array.isArray(value) || value && typeof value === "object") return "text";
+  return "text";
+}
+function normalizeInspectorFieldValue(value, kind) {
+  if (value === void 0) return "Unavailable";
+  if (kind === "vector3") {
+    const array = numericComponents(value);
+    if (array?.length === 3) return { x: array[0], y: array[1], z: array[2] };
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      const record = (
+        /** @type {Record<string, number>} */
+        value
+      );
+      return { x: record.x ?? 0, y: record.y ?? 0, z: record.z ?? 0 };
+    }
+    return { x: 0, y: 0, z: 0 };
+  }
+  if (kind === "vector4") {
+    const array = numericComponents(value);
+    if (array?.length === 4) return { x: array[0], y: array[1], z: array[2], w: array[3] };
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      const record = (
+        /** @type {Record<string, number>} */
+        value
+      );
+      return { x: record.x ?? 0, y: record.y ?? 0, z: record.z ?? 0, w: record.w ?? 0 };
+    }
+    return { x: 0, y: 0, z: 0, w: 0 };
+  }
+  if (kind === "asset" && value && typeof value === "object" && !Array.isArray(value)) {
+    const record = (
+      /** @type {Record<string, unknown>} */
+      value
+    );
+    return String(record.name ?? record.guid ?? record.id ?? "");
+  }
+  if (kind === "bool" || kind === "number") return value;
+  if (typeof value === "object") return JSON.stringify(value);
+  return value;
+}
+function freezeField(key, label, kind, value, options) {
+  return Object.freeze({
+    key,
+    label,
+    kind,
+    value: normalizeInspectorFieldValue(value, kind),
+    ...options === void 0 ? {} : { options: Object.freeze([...options]) }
+  });
+}
+function freezeGroup(group) {
+  return Object.freeze({
+    key: group.key,
+    name: group.name,
+    category: group.category,
+    fields: Object.freeze(group.fields),
+    groups: Object.freeze(group.groups)
+  });
+}
+function objectListItems(value) {
+  if (!Array.isArray(value) || value.length === 0) return null;
+  if (!value.every((entry) => entry && typeof entry === "object" && !Array.isArray(entry))) return null;
+  return value;
+}
+function partitionRecord(record, keyPrefix) {
+  const fields = [];
+  const groups = [];
+  for (const [key, value] of Object.entries(record)) {
+    if (value === void 0 || value === null) continue;
+    if (typeof value === "string" && value.trim() === "") continue;
+    const path = keyPrefix ? `${keyPrefix}.${key}` : key;
+    const name = formatInspectorFieldLabel(key);
+    const listed = objectListItems(value);
+    if (listed) {
+      const child = arrayToGroup(listed, path, name);
+      if (child) groups.push(child);
+      continue;
+    }
+    const kind = resolveInspectorFieldKind(void 0, value);
+    const nestedObject = value && typeof value === "object" && !Array.isArray(value) && kind !== "vector3" && kind !== "vector4" && kind !== "asset";
+    if (nestedObject) {
+      const child = recordToGroup(
+        /** @type {Record<string, unknown>} */
+        value,
+        path,
+        name,
+        "all"
+      );
+      if (child) groups.push(child);
+      continue;
+    }
+    fields.push(freezeField(key, name, kind, value));
+  }
+  return { fields, groups };
+}
+function recordToGroup(record, key, name, category) {
+  const partitioned = partitionRecord(record, key);
+  if (partitioned.fields.length === 0 && partitioned.groups.length === 0) return null;
+  return freezeGroup({
+    key,
+    name,
+    category,
+    fields: partitioned.fields,
+    groups: partitioned.groups
+  });
+}
+function arrayToGroup(items, path, name) {
+  const groups = [];
+  for (const [index, item] of items.entries()) {
+    const label = item.name ?? item.id ?? item.slotName ?? item.guid ?? String(index);
+    const child = recordToGroup(item, `${path}.${index}`, formatInspectorFieldLabel(String(label)), "type");
+    if (child) groups.push(child);
+  }
+  if (groups.length === 0) return null;
+  return freezeGroup({
+    key: path,
+    name,
+    category: "capability",
+    fields: [],
+    groups
+  });
+}
+function identityFactFields(inspection) {
+  const asset = inspection.asset && typeof inspection.asset === "object" ? inspection.asset : {};
+  const facts = [
+    ["guid", "GUID", inspection.guid ?? asset.guid],
+    ["kind", "Kind", asset.kind],
+    ["name", "Name", asset.name],
+    ["path", "Path", asset.path],
+    ["source", "Source", inspection.source?.path ?? asset.sourcePath],
+    ["revision", "Revision", inspection.revision ?? asset.revision ?? inspection.source?.revision],
+    ["package", "Package", asset.packageId ?? asset.packageUrl],
+    ["ddc", "DDC", inspection.ddc?.state]
+  ];
+  const fields = [];
+  for (const [key, label, value] of facts) {
+    if (value === void 0 || value === null) continue;
+    if (typeof value === "string" && value.trim() === "") continue;
+    fields.push(freezeField(key, label, resolveInspectorFieldKind(void 0, value), value));
+  }
+  return fields;
+}
+function inspectorFormGroupsFromInspection(inspection, options = {}) {
+  if (!inspection || typeof inspection !== "object" || Array.isArray(inspection)) {
+    return Object.freeze([]);
+  }
+  const identityTitle = options.identityTitle ?? "Asset";
+  const identityFields = identityFactFields(inspection);
+  const meta = inspection.meta;
+  let metaFields = [];
+  let nested = [];
+  if (meta && typeof meta === "object" && !Array.isArray(meta)) {
+    const partitioned = partitionRecord(
+      /** @type {Record<string, unknown>} */
+      meta,
+      "meta"
+    );
+    metaFields = partitioned.fields;
+    nested = partitioned.groups;
+  }
+  const groups = [];
+  const fields = [...identityFields, ...metaFields];
+  if (fields.length) {
+    groups.push(freezeGroup({
+      key: "identity",
+      name: identityTitle,
+      category: "type",
+      fields,
+      groups: []
+    }));
+  }
+  groups.push(...nested);
+  return Object.freeze(groups);
+}
+
+// packages/view-components/src/InspectorForm.tsx
+import { Box } from "lucide-react";
+import { useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var READ_ONLY = { readOnly: true, tabIndex: -1 };
+function VectorField({
+  axes,
+  vector
+}) {
+  return /* @__PURE__ */ jsx3("span", { className: `fx-inspector-form__vec${axes.length > 3 ? " fx-inspector-form__vec--4" : ""}`, children: axes.map((axis) => /* @__PURE__ */ jsxs2("span", { className: `fx-inspector-form__vcell fx-inspector-form__vcell--${axis}`, children: [
+    /* @__PURE__ */ jsx3("span", { className: "fx-inspector-form__axis", children: axis.toUpperCase() }),
+    /* @__PURE__ */ jsx3("span", { className: "fx-inspector-form__numfield", children: /* @__PURE__ */ jsx3(
+      TextInput,
+      {
+        className: "fx-inspector-form__input fx-inspector-form__input--number",
+        type: "number",
+        value: vector[axis],
+        ...READ_ONLY
+      }
+    ) })
+  ] }, axis)) });
+}
+function InspectorFieldControl({ field }) {
+  if (field.kind === "vector3" && typeof field.value === "object" && field.value !== null) {
+    const vector = field.value;
+    return /* @__PURE__ */ jsx3(VectorField, { axes: ["x", "y", "z"], vector: { ...vector, w: 0 } });
+  }
+  if (field.kind === "vector4" && typeof field.value === "object" && field.value !== null) {
+    const vector = field.value;
+    return /* @__PURE__ */ jsx3(VectorField, { axes: ["x", "y", "z", "w"], vector });
+  }
+  if (field.kind === "bool") {
+    return /* @__PURE__ */ jsx3(
+      Checkbox,
+      {
+        className: "fx-inspector-form__checkbox",
+        checked: field.value === true,
+        disabled: true,
+        hideLabel: true,
+        label: field.label
+      }
+    );
+  }
+  if (field.kind === "enum") {
+    return /* @__PURE__ */ jsx3("span", { className: "fx-inspector-form__select", children: /* @__PURE__ */ jsx3(Select, { className: "fx-inspector-form__input", value: String(field.value), disabled: true, children: (field.options ?? [String(field.value)]).map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: option }, option)) }) });
+  }
+  if (field.kind === "color") {
+    return /* @__PURE__ */ jsxs2("span", { className: "fx-inspector-form__color", children: [
+      /* @__PURE__ */ jsx3("span", { className: "fx-inspector-form__swatch", "aria-hidden": true, style: { background: String(field.value) } }),
+      /* @__PURE__ */ jsx3(TextInput, { className: "fx-inspector-form__input fx-inspector-form__input--hex", value: String(field.value), ...READ_ONLY })
+    ] });
+  }
+  if (field.kind === "asset") {
+    const empty = !String(field.value);
+    return /* @__PURE__ */ jsxs2("span", { className: "fx-inspector-form__asset", children: [
+      /* @__PURE__ */ jsx3("span", { className: `fx-inspector-form__asset-thumb${empty ? " is-empty" : ""}`, children: empty ? null : /* @__PURE__ */ jsx3(Box, { size: 16 }) }),
+      /* @__PURE__ */ jsx3("span", { className: "fx-inspector-form__asset-body", children: /* @__PURE__ */ jsx3("span", { className: "fx-inspector-form__asset-combo", children: /* @__PURE__ */ jsx3("span", { className: `fx-inspector-form__asset-label${empty ? " is-empty" : ""}`, children: empty ? "None" : String(field.value) }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3("span", { className: field.kind === "number" ? "fx-inspector-form__numfield fx-inspector-form__numfield--solo" : void 0, children: /* @__PURE__ */ jsx3(
+    TextInput,
+    {
+      className: `fx-inspector-form__input ${field.kind === "number" ? "fx-inspector-form__input--number" : "fx-inspector-form__input--text"}`,
+      type: field.kind === "number" ? "number" : "text",
+      value: String(field.value),
+      ...READ_ONLY
+    }
+  ) });
+}
+function FormGroup({
+  group,
+  nested = false
+}) {
+  const [open, setOpen] = useState3(true);
+  const category = group.category === "all" ? "all" : group.category === "capability" ? "cap" : "type";
+  return /* @__PURE__ */ jsx3("div", { className: `fx-inspector-form__group fx-inspector-form__group--${category}${nested ? " is-nested" : ""}`, children: /* @__PURE__ */ jsx3(
+    CollapsibleSection,
+    {
+      open,
+      onOpenChange: setOpen,
+      title: /* @__PURE__ */ jsxs2("span", { className: "fx-inspector-form__title", children: [
+        /* @__PURE__ */ jsx3("span", { className: "fx-inspector-form__icon", children: /* @__PURE__ */ jsx3(Box, { size: 13, strokeWidth: 1.7 }) }),
+        /* @__PURE__ */ jsx3("span", { children: group.name })
+      ] }),
+      children: /* @__PURE__ */ jsxs2("div", { className: "fx-inspector-form__fields", children: [
+        group.fields.map((field) => /* @__PURE__ */ jsx3("div", { className: "fx-inspector-form__row", "data-testid": `inspector-form-field-${group.key}-${field.key}`, children: /* @__PURE__ */ jsx3(PropertyRow, { className: "fx-inspector-form__property", label: /* @__PURE__ */ jsx3("span", { title: field.key, children: field.label }), children: /* @__PURE__ */ jsx3(InspectorFieldControl, { field }) }) }, field.key)),
+        (group.groups ?? []).map((child) => /* @__PURE__ */ jsx3(FormGroup, { group: child, nested: true }, child.key))
+      ] })
+    }
+  ) });
+}
+function InspectorForm({
+  groups,
+  inspection,
+  identityTitle,
+  className,
+  empty
+}) {
+  const resolved = groups ?? inspectorFormGroupsFromInspection(inspection, { identityTitle });
+  if (resolved.length === 0) return empty ?? null;
+  return /* @__PURE__ */ jsx3("div", { className: ["fx-inspector-form", className].filter(Boolean).join(" "), "data-view-readonly": "true", children: resolved.map((group) => /* @__PURE__ */ jsx3(FormGroup, { group }, group.key)) });
+}
+
+// packages/view-components/src/ErrorNotice.tsx
+import { AlertCircle as AlertCircle2, Check as Check2, Copy, X as X2 } from "lucide-react";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo3,
+  useRef as useRef2,
+  useState as useState4,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var nextId = 0;
+var notices = [];
+var listeners = /* @__PURE__ */ new Set();
+var timers = /* @__PURE__ */ new Map();
+function emit() {
+  for (const listener of listeners) listener();
+}
+function subscribeErrorNotices(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getErrorNotices() {
+  return notices;
+}
+function showErrorNotice(input) {
+  const id = ++nextId;
+  const persistent = input.persistent !== false;
+  notices = [...notices, { ...input, id, persistent }];
+  emit();
+  if (!persistent) {
+    const duration = input.duration ?? 8e3;
+    if (duration > 0) {
+      timers.set(
+        id,
+        setTimeout(() => {
+          timers.delete(id);
+          dismissErrorNotice(id);
+        }, duration)
+      );
+    }
+  }
+  return id;
+}
+function dismissErrorNotice(id) {
+  const timer = timers.get(id);
+  if (timer !== void 0) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  const current = notices.find((notice) => notice.id === id);
+  if (!current) return;
+  notices = notices.filter((notice) => notice.id !== id);
+  emit();
+  current.onDismiss?.();
+}
+function resolveCopyText(copyText, details) {
+  if (typeof copyText === "string" && copyText.trim() !== "") return copyText;
+  if (typeof details === "string" && details.trim() !== "") return details;
+  return void 0;
+}
+function ErrorNotice({
+  title,
+  description,
+  hint,
+  code,
+  details,
+  detailsLabel = "\u8BE6\u7EC6\u4FE1\u606F",
+  copyText,
+  copyLabel = "\u590D\u5236\u8BE6\u7EC6\u4FE1\u606F",
+  copiedLabel = "\u5DF2\u590D\u5236",
+  closeLabel = "\u5173\u95ED\u9519\u8BEF\u63D0\u793A",
+  onClose
+}) {
+  const [copied, setCopied] = useState4(false);
+  const clipboardText = resolveCopyText(copyText, details);
+  useEffect3(() => {
+    if (!copied) return void 0;
+    const timer = setTimeout(() => setCopied(false), 2e3);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  async function handleCopyDetails() {
+    if (!clipboardText) return;
+    try {
+      await navigator.clipboard.writeText(clipboardText);
+      setCopied(true);
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "fx-error-notice fx-status--error", role: "alert", children: [
+    /* @__PURE__ */ jsx4(AlertCircle2, { className: "fx-icon fx-error-notice__icon", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs3("div", { className: "fx-error-notice__body", children: [
+      /* @__PURE__ */ jsx4("strong", { className: "fx-error-notice__title", children: title }),
+      code ? /* @__PURE__ */ jsx4(Text, { as: "code", variant: "code", className: "fx-error-notice__code", children: code }) : null,
+      description ? /* @__PURE__ */ jsx4(Text, { variant: "body", className: "fx-error-notice__description", children: description }) : null,
+      hint ? /* @__PURE__ */ jsx4(Text, { variant: "caption", className: "fx-error-notice__hint", children: hint }) : null,
+      details ? /* @__PURE__ */ jsxs3("details", { className: "fx-error-notice__details", open: true, children: [
+        /* @__PURE__ */ jsxs3("summary", { className: "fx-error-notice__details-summary", children: [
+          /* @__PURE__ */ jsx4("span", { children: detailsLabel }),
+          clipboardText ? /* @__PURE__ */ jsx4(
+            Button,
+            {
+              type: "button",
+              variant: "quiet",
+              size: "compact",
+              className: "fx-error-notice__copy",
+              leadingIcon: copied ? /* @__PURE__ */ jsx4(Check2, { className: "fx-icon", "aria-hidden": true }) : /* @__PURE__ */ jsx4(Copy, { className: "fx-icon", "aria-hidden": true }),
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                void handleCopyDetails();
+              },
+              children: copied ? copiedLabel : copyLabel
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx4("pre", { className: "fx-error-notice__details-body", children: details })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        label: closeLabel,
+        icon: /* @__PURE__ */ jsx4(X2, { className: "fx-icon" }),
+        variant: "quiet",
+        size: "compact",
+        onClick: onClose
+      }
+    )
+  ] });
+}
+var STACK_PEEK = 8;
+var STACK_GAP = 8;
+var STACK_MAX_BEHIND = 2;
+function stackMetrics(items, heights, expanded) {
+  const heightOf = (id) => heights[id] ?? 0;
+  const frontHeight = items[0] ? heightOf(items[0].id) : 0;
+  let y = 0;
+  const slots = items.map((item, index) => {
+    const height = heightOf(item.id);
+    const peekIndex = Math.min(index, STACK_MAX_BEHIND);
+    const slotY = expanded ? y : Math.max(0, frontHeight - height + peekIndex * STACK_PEEK);
+    if (expanded) y += height + STACK_GAP;
+    return {
+      id: item.id,
+      y: slotY,
+      z: items.length - index,
+      interactive: expanded || index === 0
+    };
+  });
+  const stackHeight = expanded ? items.reduce((sum, item, index) => sum + heightOf(item.id) + (index > 0 ? STACK_GAP : 0), 0) : frontHeight + Math.min(Math.max(items.length - 1, 0), STACK_MAX_BEHIND) * STACK_PEEK;
+  return { slots, stackHeight };
+}
+function ErrorNoticeStack({
+  items,
+  inline = false,
+  onClose
+}) {
+  const [expanded, setExpanded] = useState4(false);
+  const [heights, setHeights] = useState4({});
+  const slotNodes = useRef2(/* @__PURE__ */ new Map());
+  const stacked = items.length > 1;
+  const open = stacked && expanded;
+  const measure = useCallback3(() => {
+    setHeights((current) => {
+      let changed = Object.keys(current).length !== items.length;
+      const next = {};
+      for (const item of items) {
+        const height = slotNodes.current.get(item.id)?.offsetHeight ?? 0;
+        next[item.id] = height;
+        if (current[item.id] !== height) changed = true;
+      }
+      return changed ? next : current;
+    });
+  }, [items]);
+  useLayoutEffect2(() => {
+    measure();
+    const observer = new ResizeObserver(measure);
+    for (const item of items) {
+      const node = slotNodes.current.get(item.id);
+      if (node) observer.observe(node);
+    }
+    return () => observer.disconnect();
+  }, [items, measure]);
+  const { slots, stackHeight } = useMemo3(
+    () => stackMetrics(items, heights, open),
+    [items, heights, open]
+  );
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: ["fx-error-notice-region", "fx-ui", inline && "fx-error-notice-region--inline"].filter(Boolean).join(" "),
+      "aria-live": "assertive",
+      "data-count": items.length,
+      "data-expanded": open ? "" : void 0,
+      "data-ready": items.every((item) => (heights[item.id] ?? 0) > 0) ? "" : void 0,
+      onMouseEnter: stacked ? () => setExpanded(true) : void 0,
+      onMouseLeave: stacked ? () => setExpanded(false) : void 0,
+      onFocus: stacked ? () => setExpanded(true) : void 0,
+      onBlur: stacked ? (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setExpanded(false);
+        }
+      } : void 0,
+      style: {
+        "--fx-error-notice-stack-height": `${stackHeight}px`
+      },
+      children: items.map((notice) => {
+        const slot = slots.find((entry) => entry.id === notice.id);
+        return /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "fx-error-notice-slot",
+            ref: (node) => {
+              if (node) slotNodes.current.set(notice.id, node);
+              else slotNodes.current.delete(notice.id);
+            },
+            "data-inert": slot.interactive ? void 0 : "",
+            style: {
+              "--fx-error-notice-y": `${slot.y}px`,
+              "--fx-error-notice-z": slot.z
+            },
+            children: /* @__PURE__ */ jsx4(
+              ErrorNotice,
+              {
+                ...notice,
+                closeLabel: notice.closeLabel,
+                onClose: () => onClose(notice.id)
+              }
+            )
+          },
+          notice.id
+        );
+      })
+    }
+  );
+}
+function ErrorNoticeHost() {
+  const items = useSyncExternalStore2(subscribeErrorNotices, getErrorNotices, getErrorNotices);
+  const ordered = useMemo3(() => [...items].reverse(), [items]);
+  if (typeof document === "undefined" || ordered.length === 0) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsx4(ErrorNoticeStack, { items: ordered, onClose: dismissErrorNotice }),
+    document.body
+  );
+}
+
+// packages/view-components/src/PageTabStrip.tsx
+import {
+  ChevronsRight,
+  Minus,
+  Pin,
+  Plus,
+  X as X3
+} from "lucide-react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useId as useId2,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
+
+// packages/view-components/src/page-tab-icons.ts
+import {
+  Box as Box2,
+  Clapperboard,
+  File,
+  FileCode2,
+  FileText,
+  Image,
+  Music,
+  Package,
+  Puzzle,
+  Settings2,
+  Type
+} from "lucide-react";
+var ICON_BY_KIND = {
+  scene: Clapperboard,
+  model: Box2,
+  image: Image,
+  audio: Music,
+  font: Type,
+  pack: Package,
+  code: FileCode2,
+  doc: FileText,
+  config: Settings2,
+  plugin: Puzzle
+};
+var EXT_KIND = [
+  [["ts", "tsx", "js", "jsx", "mjs", "cjs", "py"], "code"],
+  [["md", "markdown", "txt"], "doc"],
+  [["png", "jpg", "jpeg", "webp", "gif", "svg", "ico", "hdr"], "image"],
+  [["mp3", "wav", "ogg", "flac", "aac", "m4a", "opus"], "audio"],
+  [["glb", "gltf", "fbx"], "model"],
+  [["ttf", "otf", "woff2"], "font"]
+];
+function pageKindOf(input) {
+  const path = (input.resourcePath ?? "").toLowerCase();
+  if (path) {
+    if (path.endsWith(".scene.json")) return "scene";
+    if (path.endsWith(".pack.json")) return path.includes("scene") ? "scene" : "pack";
+    const ext = path.split(/[?#]/u, 1)[0]?.split(".").pop() ?? "";
+    for (const [exts, kind] of EXT_KIND) if (exts.includes(ext)) return kind;
+    if (path.endsWith("forge.json") || path.endsWith("package.json")) return "config";
+  }
+  const id = input.typeId.toLowerCase();
+  for (const kind of Object.keys(ICON_BY_KIND)) {
+    if (id.includes(kind)) return kind;
+  }
+  if (id.includes("scene") || id.includes("level")) return "scene";
+  if (id.includes("workbench") || id.includes("wb-") || id.includes("plugin")) return "plugin";
+  return "config";
+}
+function iconForPage(input) {
+  const path = (input.resourcePath ?? "").toLowerCase();
+  const kind = pageKindOf(input);
+  if (!path && kind === "config" && !input.typeId.toLowerCase().includes("config")) return File;
+  return ICON_BY_KIND[kind];
+}
+
+// packages/view-components/src/PageTabStrip.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  tabList: "\u5DF2\u6253\u5F00\u7684\u9875\u9762",
+  newPage: "\u65B0\u5EFA\u9875\u9762",
+  allPages: "\u5168\u90E8\u9875\u9762",
+  noOpenableTypes: "\u6CA1\u6709\u53EF\u65B0\u5EFA\u7684\u7C7B\u578B",
+  closeTab: "\u5173\u95ED\u6807\u7B7E\u9875",
+  contextClose: "\u5173\u95ED",
+  contextCloseOthers: "\u5173\u95ED\u5176\u4ED6",
+  contextCloseToRight: "\u5173\u95ED\u53F3\u4FA7"
+};
+function classes2(...names) {
+  return names.filter(Boolean).join(" ");
+}
+function useAnchoredMenu(anchorRef) {
+  const [open, setOpen] = useState5(false);
+  const [position, setPosition] = useState5({ x: 0, y: 0 });
+  const openAtAnchor = useCallback4(
+    (align = "start") => {
+      const el = anchorRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setPosition({
+        x: align === "end" ? rect.right : rect.left,
+        y: rect.bottom + 4
+      });
+      setOpen(true);
+    },
+    [anchorRef]
+  );
+  return { open, setOpen, position, openAtAnchor };
+}
+function PageTabStrip({
+  pages,
+  activePageId,
+  onSelect,
+  onClose,
+  onCloseOthers,
+  onCloseToRight,
+  onReorder,
+  newPageTypes = [],
+  onNewPage,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const listRef = useRef3(null);
+  const newButtonRef = useRef3(null);
+  const overflowButtonRef = useRef3(null);
+  const dragKeyRef = useRef3(null);
+  const [draggingKey, setDraggingKey] = useState5(null);
+  const [overflowing, setOverflowing] = useState5(false);
+  const [contextMenu, setContextMenu] = useState5(
+    null
+  );
+  const newMenu = useAnchoredMenu(newButtonRef);
+  const overflowMenu = useAnchoredMenu(overflowButtonRef);
+  const menuId = useId2();
+  useEffect4(() => {
+    if (!activePageId) return;
+    listRef.current?.querySelector(`[data-page-id="${CSS.escape(activePageId)}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [activePageId]);
+  useEffect4(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const measure = () => setOverflowing(el.scrollWidth - el.clientWidth > 1);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [pages.length]);
+  useEffect4(() => {
+    const end = () => {
+      dragKeyRef.current = null;
+      setDraggingKey(null);
+    };
+    window.addEventListener("pointerup", end);
+    return () => window.removeEventListener("pointerup", end);
+  }, []);
+  const handleTabClick = useCallback4(
+    (pageId) => {
+      if (pageId === activePageId) return;
+      onSelect(pageId);
+    },
+    [activePageId, onSelect]
+  );
+  const handlePointerDown = useCallback4((event, pageId) => {
+    if (event.button !== 0) return;
+    if (event.target.closest("[data-page-close]")) return;
+    dragKeyRef.current = pageId;
+  }, []);
+  const handlePointerMove = useCallback4(
+    (event) => {
+      const dragKey = dragKeyRef.current;
+      if (!dragKey || event.buttons !== 1 || !onReorder) return;
+      const overId = event.target.closest("[data-page-id]")?.getAttribute("data-page-id");
+      if (!overId || overId === dragKey) return;
+      const toIndex = pages.findIndex((page) => page.id === overId);
+      if (toIndex < 0) return;
+      setDraggingKey(dragKey);
+      onReorder(dragKey, toIndex);
+    },
+    [onReorder, pages]
+  );
+  const closePage = useCallback4(
+    (pageId) => {
+      onClose?.(pageId);
+    },
+    [onClose]
+  );
+  if (pages.length === 0) return null;
+  const contextPage = contextMenu ? pages.find((page) => page.id === contextMenu.pageId) : void 0;
+  const contextItems = contextMenu && contextPage ? [
+    {
+      id: "close",
+      label: labels.contextClose,
+      icon: /* @__PURE__ */ jsx5(X3, { className: "fx-icon", "aria-hidden": true }),
+      disabled: !contextPage.closable,
+      onSelect: () => closePage(contextMenu.pageId)
+    },
+    {
+      id: "close-others",
+      label: labels.contextCloseOthers,
+      icon: /* @__PURE__ */ jsx5(Minus, { className: "fx-icon", "aria-hidden": true }),
+      onSelect: () => {
+        onCloseOthers?.(contextMenu.pageId);
+        onSelect(contextMenu.pageId);
+      }
+    },
+    {
+      id: "close-right",
+      label: labels.contextCloseToRight,
+      icon: /* @__PURE__ */ jsx5(ChevronsRight, { className: "fx-icon", "aria-hidden": true }),
+      onSelect: () => onCloseToRight?.(contextMenu.pageId)
+    }
+  ] : [];
+  const newPageMenuItems = newPageTypes.length === 0 ? [{ id: "empty", label: labels.noOpenableTypes, disabled: true }] : newPageTypes.map((type) => {
+    const Icon = iconForPage({ typeId: type.typeId });
+    return {
+      id: type.typeId,
+      label: type.title,
+      icon: /* @__PURE__ */ jsx5(Icon, { className: "fx-icon", "aria-hidden": true }),
+      onSelect: () => onNewPage?.(type.typeId)
+    };
+  });
+  const overflowMenuItems = pages.map((page) => {
+    const Icon = page.icon ?? iconForPage({ typeId: page.typeId, resourcePath: page.resourcePath });
+    const mark = activePageId === page.id ? "\u25CF" : "\u25CB";
+    const label = page.dirty ? `${page.title} *` : page.title;
+    return {
+      id: page.id,
+      label: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx5("span", { className: "fx-page-tab-menu__mark", children: mark }),
+        /* @__PURE__ */ jsx5("span", { className: "fx-page-tab-menu__label", children: label })
+      ] }),
+      icon: /* @__PURE__ */ jsx5(Icon, { className: "fx-icon", "aria-hidden": true }),
+      selected: activePageId === page.id,
+      onSelect: () => onSelect(page.id)
+    };
+  });
+  return /* @__PURE__ */ jsxs4("div", { className: classes2("fx-page-tab-strip", "fx-ui", className), "data-fx-slot": "PageTabs", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "fx-page-tab-strip__scope", children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          ref: listRef,
+          className: "fx-page-tab-strip__list",
+          role: "tablist",
+          "aria-label": labels.tabList,
+          onPointerMove: handlePointerMove,
+          children: pages.map((page) => {
+            const active = activePageId === page.id;
+            const Icon = page.icon ?? iconForPage({ typeId: page.typeId, resourcePath: page.resourcePath });
+            const closable = page.closable !== false;
+            const tabClass = classes2(
+              "fx-page-tab",
+              active && "is-active",
+              !closable && "is-pinned",
+              page.dirty && "is-dirty",
+              draggingKey === page.id && "is-drag"
+            );
+            return /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                className: tabClass,
+                role: "tab",
+                "aria-selected": active,
+                "data-page-id": page.id,
+                "data-dirty": page.dirty ? "1" : void 0,
+                title: page.tooltip ?? page.resourcePath ?? page.title,
+                onClick: () => handleTabClick(page.id),
+                onAuxClick: (event) => {
+                  if (event.button === 1 && closable) {
+                    event.preventDefault();
+                    closePage(page.id);
+                  }
+                },
+                onContextMenu: (event) => {
+                  event.preventDefault();
+                  setContextMenu({ x: event.clientX, y: event.clientY, pageId: page.id });
+                },
+                onPointerDown: (event) => handlePointerDown(event, page.id),
+                children: [
+                  /* @__PURE__ */ jsx5(Icon, { className: "fx-page-tab__icon", "aria-hidden": true }),
+                  /* @__PURE__ */ jsx5("span", { className: "fx-page-tab__label", children: page.title }),
+                  page.dirty ? /* @__PURE__ */ jsx5("span", { className: "fx-page-tab__dirty", "aria-hidden": true, children: "*" }) : null,
+                  closable ? /* @__PURE__ */ jsx5(
+                    "span",
+                    {
+                      className: "fx-page-tab__close",
+                      role: "button",
+                      "aria-label": labels.closeTab,
+                      "data-page-close": page.id,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        closePage(page.id);
+                      },
+                      children: /* @__PURE__ */ jsx5(X3, { className: "fx-page-tab__close-icon", "aria-hidden": true })
+                    }
+                  ) : /* @__PURE__ */ jsx5(Pin, { className: "fx-page-tab__pin", "aria-hidden": true })
+                ]
+              },
+              page.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          ref: newButtonRef,
+          type: "button",
+          className: "fx-page-tab-btn fx-page-tab-btn--new",
+          title: labels.newPage,
+          "aria-label": labels.newPage,
+          "aria-haspopup": "menu",
+          "aria-expanded": newMenu.open,
+          "aria-controls": `${menuId}-new`,
+          onClick: () => {
+            if (newMenu.open) newMenu.setOpen(false);
+            else newMenu.openAtAnchor("start");
+          },
+          children: /* @__PURE__ */ jsx5(Plus, { className: "fx-page-tab-btn__icon", "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsx5("div", { className: "fx-page-tab-strip__actions", children: overflowing ? /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          ref: overflowButtonRef,
+          type: "button",
+          className: "fx-page-tab-btn",
+          title: labels.allPages,
+          "aria-haspopup": "menu",
+          "aria-expanded": overflowMenu.open,
+          "aria-controls": `${menuId}-overflow`,
+          onClick: () => {
+            if (overflowMenu.open) overflowMenu.setOpen(false);
+            else overflowMenu.openAtAnchor("end");
+          },
+          children: [
+            /* @__PURE__ */ jsx5(ChevronsRight, { className: "fx-page-tab-btn__icon", "aria-hidden": true }),
+            /* @__PURE__ */ jsx5("span", { children: pages.length })
+          ]
+        }
+      ) : null })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      ContextMenu,
+      {
+        open: contextMenu !== null,
+        x: contextMenu?.x ?? 0,
+        y: contextMenu?.y ?? 0,
+        items: contextItems,
+        onClose: () => setContextMenu(null),
+        label: contextPage?.title ?? labels.tabList
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      ContextMenu,
+      {
+        open: newMenu.open,
+        x: newMenu.position.x,
+        y: newMenu.position.y,
+        items: newPageMenuItems,
+        onClose: () => newMenu.setOpen(false),
+        label: labels.newPage,
+        containerProps: { id: `${menuId}-new` }
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      ContextMenu,
+      {
+        open: overflowMenu.open,
+        x: overflowMenu.position.x,
+        y: overflowMenu.position.y,
+        items: overflowMenuItems,
+        onClose: () => overflowMenu.setOpen(false),
+        label: labels.allPages,
+        containerProps: { id: `${menuId}-overflow` }
+      }
+    )
+  ] });
+}
+
+export {
+  useWorkspaceClientConnected,
+  anchorRectFromPoint,
+  OverlayRootProvider,
+  useOverlayRoot,
+  Text,
+  Surface,
+  Button,
+  IconButton,
+  Field,
+  TextInput,
+  Checkbox,
+  RangeInput,
+  Switch,
+  Spinner,
+  Status,
+  EmptyState,
+  LoadingState,
+  PanelHeader,
+  Toolbar,
+  SearchField,
+  Menu,
+  FloatingMenu,
+  MenuDropdown,
+  ContextMenu,
+  Dialog,
+  Tooltip,
+  PropertyRow,
+  CollapsibleSection,
+  formatInspectorFieldLabel,
+  resolveInspectorFieldKind,
+  normalizeInspectorFieldValue,
+  InspectorFieldControl,
+  InspectorForm,
+  showErrorNotice,
+  ErrorNoticeHost,
+  PageTabStrip,
+  themeNames,
+  initializeTheme,
+  ThemeProvider,
+  useTheme
+};
+//# sourceMappingURL=chunk-NJH2OJFC.mjs.map