@fictjs/ui-primitives 0.1.0

package/dist/index.js

@@ -0,0 +1,4907 @@
+// src/internal/event.ts
+function composeEventHandlers(original, extra, options = { checkDefaultPrevented: true }) {
+  return (event) => {
+    original?.(event);
+    if (!options.checkDefaultPrevented || !event.defaultPrevented) {
+      extra?.(event);
+    }
+  };
+}
+
+// src/internal/ref.ts
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      assignRef(ref, node);
+    }
+  };
+}
+
+// src/internal/vnode.ts
+function isEventKey(key) {
+  return key.startsWith("on") && key.length > 2;
+}
+function mergeClassName(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  return `${String(a)} ${String(b)}`;
+}
+function mergeStyle(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  if (typeof a === "string" || typeof b === "string") {
+    return `${String(a)}; ${String(b)}`;
+  }
+  if (typeof a === "object" && typeof b === "object") {
+    return { ...a, ...b };
+  }
+  return b;
+}
+function mergePropValue(key, targetValue, sourceValue) {
+  if (key === "class" || key === "className") {
+    return mergeClassName(targetValue, sourceValue);
+  }
+  if (key === "style") {
+    return mergeStyle(targetValue, sourceValue);
+  }
+  if (key === "ref") {
+    return composeRefs(
+      targetValue,
+      sourceValue
+    );
+  }
+  if (isEventKey(key)) {
+    if (typeof targetValue === "function" || typeof sourceValue === "function") {
+      return composeEventHandlers(
+        targetValue,
+        sourceValue
+      );
+    }
+  }
+  return sourceValue;
+}
+function isVNodeLike(value) {
+  return typeof value === "object" && value !== null && "type" in value && "props" in value && !(value instanceof Node);
+}
+function mergeVNodeProps(target, source) {
+  const next = { ...target ?? {} };
+  for (const [key, sourceValue] of Object.entries(source)) {
+    if (key === "children" && sourceValue === void 0) continue;
+    const targetValue = next[key];
+    next[key] = mergePropValue(key, targetValue, sourceValue);
+  }
+  return next;
+}
+function cloneVNodeWithProps(vnode, props, children) {
+  const merged = mergeVNodeProps(vnode.props, props);
+  if (children !== void 0) {
+    merged.children = children;
+  }
+  return {
+    type: vnode.type,
+    props: merged,
+    key: vnode.key
+  };
+}
+
+// src/components/core/slot.ts
+function getFirstChild(children) {
+  if (Array.isArray(children)) {
+    return children.find((child) => child !== null && child !== void 0 && child !== false) ?? null;
+  }
+  return children ?? null;
+}
+function Slot(props) {
+  const { children, ...slotProps } = props;
+  if (children === void 0 || children === null) {
+    return null;
+  }
+  const child = getFirstChild(children);
+  if (!child) {
+    return null;
+  }
+  if (!isVNodeLike(child)) {
+    return child;
+  }
+  return cloneVNodeWithProps(child, slotProps);
+}
+
+// src/components/core/primitive.ts
+function Primitive(props) {
+  const { as = "div", asChild = false, children, ...rest } = props;
+  if (asChild) {
+    return Slot({ ...rest, children });
+  }
+  return {
+    type: as,
+    props: {
+      ...rest,
+      children
+    }
+  };
+}
+function createPrimitive(tag) {
+  return (props) => Primitive({ ...props, as: tag });
+}
+var PrimitiveElements = {
+  div: createPrimitive("div"),
+  span: createPrimitive("span"),
+  button: createPrimitive("button"),
+  input: createPrimitive("input"),
+  label: createPrimitive("label"),
+  form: createPrimitive("form"),
+  ul: createPrimitive("ul"),
+  li: createPrimitive("li"),
+  nav: createPrimitive("nav"),
+  section: createPrimitive("section"),
+  article: createPrimitive("article")
+};
+
+// src/internal/accessor.ts
+function read(value, fallback) {
+  if (typeof value === "function") {
+    return value();
+  }
+  if (value === void 0) {
+    return fallback;
+  }
+  return value;
+}
+
+// src/components/core/presence.ts
+function Presence(props) {
+  return () => {
+    const present = read(props.present, true);
+    const forceMount = read(props.forceMount, false);
+    if (!present && !forceMount) {
+      return null;
+    }
+    if (typeof props.children === "function") {
+      return props.children({ present });
+    }
+    return props.children ?? null;
+  };
+}
+
+// src/components/core/portal.ts
+import {
+  createContext,
+  createPortal,
+  createElement,
+  useContext,
+  createMemo,
+  onMount
+} from "@fictjs/runtime";
+var PortalContainerContext = createContext(
+  () => typeof document !== "undefined" ? document.body : null
+);
+function resolveContainer(container) {
+  if (container === void 0) {
+    return null;
+  }
+  return read(container, null) ?? null;
+}
+function PortalHost(props) {
+  const container = createMemo(() => resolveContainer(props.container));
+  return {
+    type: PortalContainerContext.Provider,
+    props: {
+      value: container,
+      children: props.children
+    }
+  };
+}
+function Portal(props) {
+  if (read(props.disabled, false)) {
+    return props.children ?? null;
+  }
+  const hostContainerAccessor = useContext(PortalContainerContext);
+  onMount(() => {
+    const container = (props.container !== void 0 ? resolveContainer(props.container) : hostContainerAccessor()) ?? (typeof document !== "undefined" ? document.body : null);
+    if (!container) return;
+    createPortal(
+      container,
+      () => typeof props.children === "function" ? props.children() : props.children ?? null,
+      createElement
+    );
+  });
+  return null;
+}
+
+// src/components/core/visually-hidden.ts
+var visuallyHiddenStyle = {
+  position: "absolute",
+  border: "0",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap"
+};
+function VisuallyHidden(props) {
+  const { as = "span", children, style, ...rest } = props;
+  return {
+    type: as,
+    props: {
+      ...rest,
+      style: typeof style === "object" && style !== null ? { ...visuallyHiddenStyle, ...style } : visuallyHiddenStyle,
+      children
+    }
+  };
+}
+
+// src/components/core/separator.ts
+function Separator(props) {
+  const orientation = read(props.orientation, "horizontal");
+  const decorative = read(props.decorative, false);
+  const tag = props.as ?? "div";
+  return {
+    type: tag,
+    props: {
+      ...props,
+      as: void 0,
+      role: decorative ? "presentation" : "separator",
+      "aria-orientation": orientation,
+      "aria-hidden": decorative || void 0,
+      "data-orientation": orientation
+    }
+  };
+}
+
+// src/components/core/accessible-icon.ts
+function AccessibleIcon(props) {
+  const { label, children, ...rest } = props;
+  return {
+    type: "span",
+    props: {
+      ...rest,
+      children: [
+        {
+          type: "span",
+          props: {
+            "aria-hidden": "true",
+            children
+          }
+        },
+        {
+          type: VisuallyHidden,
+          props: {
+            children: label
+          }
+        }
+      ]
+    }
+  };
+}
+
+// src/internal/ids.ts
+import { createContext as createContext2, hasContext, useContext as useContext2 } from "@fictjs/runtime";
+var IdContext = createContext2(null);
+var globalCounters = /* @__PURE__ */ new Map();
+function nextCounter(prefix) {
+  const current = globalCounters.get(prefix) ?? 0;
+  const next = current + 1;
+  globalCounters.set(prefix, next);
+  return next;
+}
+function tryReadIdContext() {
+  try {
+    if (!hasContext(IdContext)) {
+      return null;
+    }
+    return useContext2(IdContext);
+  } catch {
+    return null;
+  }
+}
+function createId(prefix = "fict-ui") {
+  return `${prefix}-${nextCounter(prefix)}`;
+}
+function useId(id, prefix = "fict-ui") {
+  if (id) return id;
+  const context = tryReadIdContext();
+  if (context) {
+    return `${context.prefix}-${context.next()}`;
+  }
+  return createId(prefix);
+}
+function IdProvider(props) {
+  const parent = tryReadIdContext();
+  let localCounter = 0;
+  const prefix = props.prefix ?? parent?.prefix ?? "fict-ui";
+  const context = {
+    prefix,
+    next: () => {
+      localCounter += 1;
+      return localCounter;
+    }
+  };
+  return {
+    type: IdContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+
+// src/components/disclosure/collapsible.ts
+import { createContext as createContext3, useContext as useContext3 } from "@fictjs/runtime";
+
+// src/internal/state.ts
+import { createSignal } from "@fictjs/runtime/advanced";
+function createControllableState(options) {
+  const uncontrolled = createSignal(options.defaultValue);
+  const isControlled = () => options.value !== void 0;
+  const get = () => {
+    if (isControlled()) {
+      return read(options.value, options.defaultValue);
+    }
+    return uncontrolled();
+  };
+  const set = (next) => {
+    const prev = get();
+    const equals = options.equals ?? Object.is;
+    if (equals(prev, next)) return;
+    if (!isControlled()) {
+      uncontrolled(next);
+    }
+    options.onChange?.(next);
+  };
+  return { get, set, isControlled };
+}
+
+// src/components/disclosure/collapsible.ts
+var CollapsibleContext = createContext3(null);
+function useCollapsibleContext(component) {
+  const context = useContext3(CollapsibleContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside CollapsibleRoot`);
+  }
+  return context;
+}
+function CollapsibleRoot(props) {
+  const state = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const context = {
+    open: () => state.get(),
+    setOpen: (open) => state.set(open),
+    disabled: () => props.disabled ?? false
+  };
+  return {
+    type: CollapsibleContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function CollapsibleTrigger(props) {
+  const context = useCollapsibleContext("CollapsibleTrigger");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    disabled: () => context.disabled(),
+    "aria-expanded": () => context.open(),
+    "data-state": () => context.open() ? "open" : "closed",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (context.disabled()) return;
+      context.setOpen(!context.open());
+    },
+    children: props.children
+  });
+}
+function CollapsibleContent(props) {
+  const context = useCollapsibleContext("CollapsibleContent");
+  return {
+    type: "div",
+    props: {
+      "data-collapsible-content-wrapper": "",
+      children: () => context.open() || props.forceMount ? {
+        type: "div",
+        props: {
+          ...props,
+          forceMount: void 0,
+          "data-state": () => context.open() ? "open" : "closed",
+          "data-collapsible-content": "",
+          children: props.children
+        }
+      } : null
+    }
+  };
+}
+
+// src/components/disclosure/accordion.ts
+import { createContext as createContext4, useContext as useContext4 } from "@fictjs/runtime";
+var AccordionContext = createContext4(null);
+var AccordionItemContext = createContext4(null);
+function useAccordionContext(component) {
+  const context = useContext4(AccordionContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside AccordionRoot`);
+  }
+  return context;
+}
+function useAccordionItemContext(component) {
+  const context = useContext4(AccordionItemContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside AccordionItem`);
+  }
+  return context;
+}
+function normalize(value) {
+  if (value === void 0) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function AccordionRoot(props) {
+  const type = props.type ?? "single";
+  const initialValues = normalize(props.defaultValue);
+  const valuesState = createControllableState({
+    value: props.value === void 0 ? void 0 : typeof props.value === "function" ? (() => normalize(props.value())) : normalize(props.value),
+    defaultValue: initialValues,
+    onChange: (next) => {
+      props.onValueChange?.(type === "single" ? next[0] ?? "" : next);
+    }
+  });
+  const context = {
+    type: () => type,
+    values: () => valuesState.get(),
+    toggle: (value) => {
+      const current = valuesState.get();
+      const exists = current.includes(value);
+      if (type === "single") {
+        if (exists) {
+          if (props.collapsible ?? false) {
+            valuesState.set([]);
+          }
+          return;
+        }
+        valuesState.set([value]);
+        return;
+      }
+      if (exists) {
+        valuesState.set(current.filter((item) => item !== value));
+      } else {
+        valuesState.set([...current, value]);
+      }
+    }
+  };
+  return {
+    type: AccordionContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function AccordionItem(props) {
+  const accordion = useAccordionContext("AccordionItem");
+  const tag = props.as ?? "div";
+  const itemContext = {
+    value: props.value,
+    open: () => accordion.values().includes(props.value)
+  };
+  return {
+    type: AccordionItemContext.Provider,
+    props: {
+      value: itemContext,
+      children: {
+        type: CollapsibleRoot,
+        props: {
+          open: () => itemContext.open(),
+          onOpenChange: (open) => {
+            const shouldOpen = open;
+            if (shouldOpen !== itemContext.open()) {
+              accordion.toggle(props.value);
+            }
+          },
+          children: Primitive({
+            ...props,
+            value: void 0,
+            as: tag,
+            "data-accordion-item": props.value,
+            "data-state": () => itemContext.open() ? "open" : "closed",
+            children: props.children
+          })
+        }
+      }
+    }
+  };
+}
+function AccordionTrigger(props) {
+  useAccordionContext("AccordionTrigger");
+  useAccordionItemContext("AccordionTrigger");
+  return {
+    type: CollapsibleTrigger,
+    props
+  };
+}
+function AccordionContent(props) {
+  return {
+    type: CollapsibleContent,
+    props
+  };
+}
+
+// src/components/disclosure/tabs.ts
+import { createContext as createContext6, useContext as useContext6 } from "@fictjs/runtime";
+
+// src/components/interaction/roving-focus.ts
+import { createContext as createContext5, createEffect, onCleanup, useContext as useContext5 } from "@fictjs/runtime";
+import { createSignal as createSignal2 } from "@fictjs/runtime/advanced";
+import { useEventListener } from "@fictjs/hooks";
+var RovingContext = createContext5(null);
+function RovingFocusGroup(props) {
+  const currentIdSignal = createSignal2(null);
+  const items = [];
+  const groupNode = createSignal2(null);
+  const syncDomState = (activeId) => {
+    for (const item of items) {
+      const isActive = item.id === activeId && !item.disabled;
+      item.element.tabIndex = isActive ? 0 : -1;
+      if (isActive) {
+        item.element.setAttribute("data-active", "");
+      } else {
+        item.element.removeAttribute("data-active");
+      }
+    }
+  };
+  const moveFocus = (direction) => {
+    const activeItems = context.getItems().filter((item) => !item.disabled);
+    if (activeItems.length === 0) return;
+    const currentId = context.currentId();
+    const currentIndex = activeItems.findIndex((item) => item.id === currentId);
+    const baseIndex = currentIndex >= 0 ? currentIndex : 0;
+    let nextIndex = baseIndex + direction;
+    if (nextIndex < 0) {
+      nextIndex = context.loop() ? activeItems.length - 1 : 0;
+    } else if (nextIndex >= activeItems.length) {
+      nextIndex = context.loop() ? 0 : activeItems.length - 1;
+    }
+    const nextItem = activeItems[nextIndex];
+    if (!nextItem) return;
+    context.setCurrentId(nextItem.id);
+    nextItem.element.focus();
+  };
+  const focusFirst2 = () => {
+    const first = context.getItems().find((item) => !item.disabled);
+    if (!first) return;
+    context.setCurrentId(first.id);
+    first.element.focus();
+  };
+  const focusLast = () => {
+    const reversed = context.getItems().slice().reverse();
+    const last = reversed.find((item) => !item.disabled);
+    if (!last) return;
+    context.setCurrentId(last.id);
+    last.element.focus();
+  };
+  const context = {
+    orientation: () => read(props.orientation, "horizontal"),
+    loop: () => read(props.loop, true),
+    currentId: () => currentIdSignal(),
+    setCurrentId: (id) => {
+      currentIdSignal(id);
+      syncDomState(id);
+    },
+    register: (item) => {
+      items.push(item);
+      if (!currentIdSignal() && !item.disabled) {
+        context.setCurrentId(item.id);
+      } else {
+        syncDomState(currentIdSignal());
+      }
+      return () => {
+        const index = items.findIndex((entry) => entry.id === item.id);
+        if (index >= 0) {
+          items.splice(index, 1);
+        }
+        if (currentIdSignal() === item.id) {
+          context.setCurrentId(items.find((entry) => !entry.disabled)?.id ?? null);
+        } else {
+          syncDomState(currentIdSignal());
+        }
+      };
+    },
+    getItems: () => items.slice(),
+    moveFocus,
+    focusFirst: focusFirst2,
+    focusLast
+  };
+  const onKeyDown = (event) => {
+    const orientation = context.orientation();
+    const key = event.key;
+    if (orientation === "horizontal") {
+      if (key === "ArrowRight") {
+        event.preventDefault();
+        moveFocus(1);
+      } else if (key === "ArrowLeft") {
+        event.preventDefault();
+        moveFocus(-1);
+      }
+    }
+    if (orientation === "vertical") {
+      if (key === "ArrowDown") {
+        event.preventDefault();
+        moveFocus(1);
+      } else if (key === "ArrowUp") {
+        event.preventDefault();
+        moveFocus(-1);
+      }
+    }
+    if (key === "Home") {
+      event.preventDefault();
+      context.focusFirst();
+    }
+    if (key === "End") {
+      event.preventDefault();
+      context.focusLast();
+    }
+  };
+  const onDocumentKeyDown = (event) => {
+    const target = event.target;
+    const group = groupNode();
+    if (!group || !(target instanceof Node)) return;
+    if (!group.contains(target)) return;
+    onKeyDown(event);
+  };
+  const targetDocument = () => groupNode()?.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+  useEventListener(targetDocument, "keydown", onDocumentKeyDown, { capture: true });
+  return {
+    type: RovingContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: "div",
+        props: {
+          ...props,
+          orientation: void 0,
+          loop: void 0,
+          role: "group",
+          "data-roving-focus-group": "",
+          ref: (node) => {
+            groupNode(node);
+            const refProp = props.ref;
+            if (typeof refProp === "function") {
+              refProp(node);
+            } else if (refProp) {
+              refProp.current = node;
+            }
+          },
+          onKeyDown,
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function RovingFocusItem(props) {
+  const context = useContext5(RovingContext);
+  if (!context) {
+    throw new Error("RovingFocusItem must be used inside RovingFocusGroup");
+  }
+  const id = useId(props.id, "rf-item");
+  const tag = props.as ?? "button";
+  const itemNode = createSignal2(null);
+  let cleanup = null;
+  const onFocus = (event) => {
+    props.onFocus?.(event);
+    context.setCurrentId(id);
+  };
+  const onKeyDown = (event) => {
+    props.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const orientation = context.orientation();
+    if (orientation === "horizontal") {
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        context.moveFocus(1);
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        context.moveFocus(-1);
+      }
+    } else if (orientation === "vertical") {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        context.moveFocus(1);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        context.moveFocus(-1);
+      }
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      context.focusFirst();
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      context.focusLast();
+    }
+  };
+  useEventListener(() => itemNode(), "keydown", onKeyDown);
+  createEffect(() => {
+    const node = itemNode();
+    cleanup?.();
+    cleanup = null;
+    if (!node) return;
+    cleanup = context.register({
+      id,
+      element: node,
+      disabled: read(props.disabled, false)
+    });
+    onCleanup(() => {
+      cleanup?.();
+      cleanup = null;
+    });
+  });
+  const register = (node) => {
+    itemNode(node);
+  };
+  return Primitive({
+    ...props,
+    as: tag,
+    disabled: read(props.disabled, false),
+    ref: composeRefs(props.ref, register),
+    tabIndex: -1,
+    "data-roving-focus-item": "",
+    onFocus,
+    children: props.children
+  });
+}
+
+// src/components/disclosure/tabs.ts
+var TabsContext = createContext6(null);
+function useTabsContext(component) {
+  const context = useContext6(TabsContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside TabsRoot`);
+  }
+  return context;
+}
+function TabsRoot(props) {
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const baseId = useId(props.id, "tabs");
+  const context = {
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value),
+    orientation: () => props.orientation ?? "horizontal",
+    baseId
+  };
+  return {
+    type: TabsContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function TabsList(props) {
+  const context = useTabsContext("TabsList");
+  return {
+    type: "div",
+    props: {
+      ...props,
+      role: "tablist",
+      "aria-orientation": () => context.orientation(),
+      "data-tabs-list": "",
+      children: {
+        type: RovingFocusGroup,
+        props: {
+          orientation: () => context.orientation(),
+          loop: true,
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function TabsTrigger(props) {
+  const context = useTabsContext("TabsTrigger");
+  const tag = props.as ?? "button";
+  const selected = () => context.value() === props.value;
+  return Primitive({
+    ...props,
+    as: tag,
+    value: void 0,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    role: "tab",
+    id: `${context.baseId}-trigger-${props.value}`,
+    "aria-controls": `${context.baseId}-content-${props.value}`,
+    "aria-selected": selected,
+    "data-state": () => selected() ? "active" : "inactive",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (!event.defaultPrevented) {
+        context.setValue(props.value);
+      }
+    },
+    children: props.children
+  });
+}
+function TabsContent(props) {
+  const context = useTabsContext("TabsContent");
+  return {
+    type: "div",
+    props: {
+      "data-tabs-content-wrapper": props.value,
+      children: () => context.value() === props.value || props.forceMount ? {
+        type: "div",
+        props: {
+          ...props,
+          value: void 0,
+          forceMount: void 0,
+          role: "tabpanel",
+          id: `${context.baseId}-content-${props.value}`,
+          "aria-labelledby": `${context.baseId}-trigger-${props.value}`,
+          "data-state": () => context.value() === props.value ? "active" : "inactive",
+          "data-tabs-content": props.value,
+          children: props.children
+        }
+      } : null
+    }
+  };
+}
+
+// src/components/disclosure/navigation-menu.ts
+import { createContext as createContext7, useContext as useContext7 } from "@fictjs/runtime";
+import { createSignal as createSignal3 } from "@fictjs/runtime/advanced";
+var NavigationMenuRootContext = createContext7(null);
+var NavigationMenuItemContext = createContext7(null);
+function useNavigationRootContext(component) {
+  const context = useContext7(NavigationMenuRootContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside NavigationMenuRoot`);
+  }
+  return context;
+}
+function useNavigationItemContext(component) {
+  const context = useContext7(NavigationMenuItemContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside NavigationMenuItem`);
+  }
+  return context;
+}
+function NavigationMenuRoot(props) {
+  const activeItemSignal = createSignal3(null);
+  const context = {
+    activeItem: () => activeItemSignal(),
+    setActiveItem: (value) => activeItemSignal(value)
+  };
+  return {
+    type: NavigationMenuRootContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: "nav",
+        props: {
+          ...props,
+          "data-navigation-menu-root": "",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function NavigationMenuList(props) {
+  return {
+    type: "ul",
+    props: {
+      ...props,
+      "data-navigation-menu-list": "",
+      children: props.children
+    }
+  };
+}
+function NavigationMenuItem(props) {
+  const value = useId(props.value, "navigation-menu-item");
+  const tag = props.as ?? "li";
+  return {
+    type: NavigationMenuItemContext.Provider,
+    props: {
+      value: { value },
+      children: Primitive({
+        ...props,
+        value: void 0,
+        as: tag,
+        "data-navigation-menu-item": value,
+        children: props.children
+      })
+    }
+  };
+}
+function NavigationMenuTrigger(props) {
+  const root = useNavigationRootContext("NavigationMenuTrigger");
+  const item = useNavigationItemContext("NavigationMenuTrigger");
+  const tag = props.as ?? "button";
+  const open = () => root.activeItem() === item.value;
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    "aria-expanded": open,
+    "aria-haspopup": "menu",
+    "data-state": () => open() ? "open" : "closed",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      root.setActiveItem(open() ? null : item.value);
+    },
+    children: props.children
+  });
+}
+function NavigationMenuContent(props) {
+  const root = useNavigationRootContext("NavigationMenuContent");
+  const item = useNavigationItemContext("NavigationMenuContent");
+  const open = () => root.activeItem() === item.value;
+  return {
+    type: "div",
+    props: {
+      "data-navigation-menu-content-wrapper": item.value,
+      children: () => open() || props.forceMount ? {
+        type: "div",
+        props: {
+          ...props,
+          forceMount: void 0,
+          role: "menu",
+          "data-state": () => open() ? "open" : "closed",
+          "data-navigation-menu-content": item.value,
+          children: props.children
+        }
+      } : null
+    }
+  };
+}
+function NavigationMenuLink(props) {
+  const tag = props.as ?? "a";
+  return Primitive({
+    ...props,
+    as: tag,
+    "data-navigation-menu-link": "",
+    children: props.children
+  });
+}
+function NavigationMenuIndicator(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-navigation-menu-indicator": "",
+      children: props.children
+    }
+  };
+}
+function NavigationMenuViewport(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-navigation-menu-viewport": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/form/label.ts
+function Label(props) {
+  return {
+    type: "label",
+    props: {
+      ...props,
+      "data-label": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/form/checkbox.ts
+function Checkbox(props) {
+  const checkedState = createControllableState({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange
+  });
+  return {
+    type: "button",
+    props: {
+      ...props,
+      type: "button",
+      role: "checkbox",
+      disabled: props.disabled,
+      "aria-checked": () => checkedState.get(),
+      "data-state": () => checkedState.get() ? "checked" : "unchecked",
+      "data-checkbox": "",
+      onClick: (event) => {
+        ;
+        props.onClick?.(event);
+        if (event.defaultPrevented || props.disabled) return;
+        checkedState.set(!checkedState.get());
+      },
+      children: [
+        props.children,
+        props.name ? {
+          type: "input",
+          props: {
+            type: "checkbox",
+            hidden: true,
+            tabIndex: -1,
+            name: props.name,
+            value: props.value,
+            checked: () => checkedState.get(),
+            required: props.required,
+            readOnly: true
+          }
+        } : null
+      ]
+    }
+  };
+}
+
+// src/components/form/radio-group.ts
+import { createContext as createContext8, useContext as useContext8 } from "@fictjs/runtime";
+var RadioGroupContext = createContext8(null);
+function useRadioGroupContext(component) {
+  const context = useContext8(RadioGroupContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside RadioGroup`);
+  }
+  return context;
+}
+function RadioGroup(props) {
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const context = {
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value),
+    name: props.name
+  };
+  return {
+    type: RadioGroupContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: "div",
+        props: {
+          ...props,
+          role: "radiogroup",
+          "data-radio-group": "",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function RadioItem(props) {
+  const group = useRadioGroupContext("RadioItem");
+  const checked = () => group.value() === props.value;
+  const tag = props.as ?? "button";
+  const hiddenInput = group.name ? {
+    type: "input",
+    props: {
+      type: "radio",
+      hidden: true,
+      tabIndex: -1,
+      name: group.name,
+      checked,
+      value: props.value,
+      readOnly: true
+    }
+  } : null;
+  if (props.asChild) {
+    return [
+      Primitive({
+        ...props,
+        as: tag,
+        type: props.type,
+        role: "radio",
+        disabled: props.disabled,
+        "aria-checked": checked,
+        "data-state": () => checked() ? "checked" : "unchecked",
+        "data-radio-item": "",
+        onClick: (event) => {
+          ;
+          props.onClick?.(event);
+          if (event.defaultPrevented || props.disabled) return;
+          group.setValue(props.value);
+        },
+        children: props.children
+      }),
+      hiddenInput
+    ];
+  }
+  return Primitive({
+    ...props,
+    as: tag,
+    type: tag === "button" ? "button" : props.type,
+    role: "radio",
+    disabled: props.disabled,
+    "aria-checked": checked,
+    "data-state": () => checked() ? "checked" : "unchecked",
+    "data-radio-item": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented || props.disabled) return;
+      group.setValue(props.value);
+    },
+    children: [props.children, hiddenInput]
+  });
+}
+
+// src/components/form/switch.ts
+function Switch(props) {
+  const checkedState = createControllableState({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange
+  });
+  return {
+    type: "button",
+    props: {
+      ...props,
+      type: "button",
+      role: "switch",
+      disabled: props.disabled,
+      "aria-checked": () => checkedState.get(),
+      "data-state": () => checkedState.get() ? "checked" : "unchecked",
+      "data-switch": "",
+      onClick: (event) => {
+        ;
+        props.onClick?.(event);
+        if (event.defaultPrevented || props.disabled) return;
+        checkedState.set(!checkedState.get());
+      },
+      children: [
+        props.children,
+        props.name ? {
+          type: "input",
+          props: {
+            type: "checkbox",
+            hidden: true,
+            tabIndex: -1,
+            name: props.name,
+            value: props.value,
+            checked: () => checkedState.get(),
+            readOnly: true
+          }
+        } : null
+      ]
+    }
+  };
+}
+function SwitchThumb(props) {
+  return {
+    type: "span",
+    props: {
+      ...props,
+      "data-switch-thumb": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/form/toggle.ts
+import { createContext as createContext9, useContext as useContext9 } from "@fictjs/runtime";
+var ToggleGroupContext = createContext9(null);
+function normalize2(value) {
+  if (value === void 0) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function Toggle(props) {
+  const pressedState = createControllableState({
+    value: props.pressed,
+    defaultValue: props.defaultPressed ?? false,
+    onChange: props.onPressedChange
+  });
+  return {
+    type: "button",
+    props: {
+      ...props,
+      type: "button",
+      disabled: props.disabled,
+      "aria-pressed": () => pressedState.get(),
+      "data-state": () => pressedState.get() ? "on" : "off",
+      "data-toggle": "",
+      onClick: (event) => {
+        ;
+        props.onClick?.(event);
+        if (event.defaultPrevented || props.disabled) return;
+        pressedState.set(!pressedState.get());
+      },
+      children: props.children
+    }
+  };
+}
+function ToggleGroup(props) {
+  const type = props.type ?? "single";
+  const valuesState = createControllableState({
+    value: props.value === void 0 ? void 0 : typeof props.value === "function" ? (() => normalize2(props.value())) : normalize2(props.value),
+    defaultValue: normalize2(props.defaultValue),
+    onChange: (next) => {
+      props.onValueChange?.(type === "single" ? next[0] ?? "" : next);
+    }
+  });
+  const context = {
+    type: () => type,
+    values: () => valuesState.get(),
+    toggle: (value) => {
+      const current = valuesState.get();
+      const exists = current.includes(value);
+      if (type === "single") {
+        valuesState.set(exists ? [] : [value]);
+        return;
+      }
+      if (exists) {
+        valuesState.set(current.filter((item) => item !== value));
+      } else {
+        valuesState.set([...current, value]);
+      }
+    }
+  };
+  return {
+    type: ToggleGroupContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: "div",
+        props: {
+          ...props,
+          role: "group",
+          "data-toggle-group": "",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function ToggleGroupItem(props) {
+  const group = useContext9(ToggleGroupContext);
+  if (!group) {
+    throw new Error("ToggleGroupItem must be used inside ToggleGroup");
+  }
+  const pressed = () => group.values().includes(props.value);
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? "button" : props.type,
+    disabled: props.disabled,
+    "aria-pressed": pressed,
+    "data-state": () => pressed() ? "on" : "off",
+    "data-toggle-group-item": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented || props.disabled) return;
+      group.toggle(props.value);
+    },
+    children: props.children
+  });
+}
+
+// src/components/form/slider.ts
+function Slider(props) {
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? 0,
+    onChange: props.onValueChange
+  });
+  return {
+    type: "input",
+    props: {
+      ...props,
+      type: "range",
+      min: props.min ?? 0,
+      max: props.max ?? 100,
+      step: props.step ?? 1,
+      value: () => valueState.get(),
+      disabled: props.disabled,
+      "data-slider": "",
+      onInput: (event) => {
+        ;
+        props.onInput?.(event);
+        const target = event.target;
+        if (!target) return;
+        valueState.set(Number(target.value));
+      }
+    }
+  };
+}
+function RangeSlider(props) {
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? [0, 100],
+    onChange: props.onValueChange
+  });
+  const min = props.min ?? 0;
+  const max = props.max ?? 100;
+  const step = props.step ?? 1;
+  const setStart = (nextStart) => {
+    const [, end] = valueState.get();
+    valueState.set([Math.min(nextStart, end), end]);
+  };
+  const setEnd = (nextEnd) => {
+    const [start] = valueState.get();
+    valueState.set([start, Math.max(start, nextEnd)]);
+  };
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-range-slider": "",
+      children: [
+        {
+          type: "input",
+          props: {
+            type: "range",
+            min,
+            max,
+            step,
+            value: () => valueState.get()[0],
+            disabled: props.disabled,
+            "data-range-slider-start": "",
+            onInput: (event) => {
+              ;
+              props.onInput?.(event);
+              const target = event.target;
+              if (!target) return;
+              setStart(Number(target.value));
+            }
+          }
+        },
+        {
+          type: "input",
+          props: {
+            type: "range",
+            min,
+            max,
+            step,
+            value: () => valueState.get()[1],
+            disabled: props.disabled,
+            "data-range-slider-end": "",
+            onInput: (event) => {
+              ;
+              props.onInput?.(event);
+              const target = event.target;
+              if (!target) return;
+              setEnd(Number(target.value));
+            }
+          }
+        }
+      ]
+    }
+  };
+}
+
+// src/components/form/calendar.ts
+import { createContext as createContext10, useContext as useContext10 } from "@fictjs/runtime";
+function toDate(value) {
+  if (value === null || value === void 0) return null;
+  const next = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+  return Number.isNaN(next.getTime()) ? null : next;
+}
+function normalizeDate(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function normalizeMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function clampWeekday(value) {
+  if (!Number.isFinite(value)) return 0;
+  const next = Math.floor(value);
+  if (next < 0) return 0;
+  if (next > 6) return 6;
+  return next;
+}
+function isSameDay(a, b) {
+  if (!a || !b) return a === b;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function addMonths(month, offset) {
+  return normalizeMonth(new Date(month.getFullYear(), month.getMonth() + offset, 1));
+}
+function formatDateKey(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function resolveDate(value) {
+  const next = toDate(read(value, void 0));
+  return next ? normalizeDate(next) : null;
+}
+function buildVisibleDays(month, weekStartsOn) {
+  const firstOfMonth = normalizeMonth(month);
+  const firstWeekday = firstOfMonth.getDay();
+  const offset = (firstWeekday - weekStartsOn + 7) % 7;
+  const start = new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth(), 1 - offset);
+  return Array.from({ length: 42 }, (_, index) => normalizeDate(new Date(start.getFullYear(), start.getMonth(), start.getDate() + index)));
+}
+function weekdayLabels(locale, format, weekStartsOn) {
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: format });
+  const start = new Date(2026, 0, 4);
+  return Array.from({ length: 7 }, (_, index) => {
+    const day = new Date(start.getFullYear(), start.getMonth(), start.getDate() + (weekStartsOn + index) % 7);
+    return formatter.format(day);
+  });
+}
+var CalendarContext = createContext10(null);
+function useCalendarContext(component) {
+  const context = useContext10(CalendarContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside CalendarRoot`);
+  }
+  return context;
+}
+function CalendarRoot(props) {
+  const initialValue = toDate(props.defaultValue);
+  const initialMonth = normalizeMonth(toDate(props.defaultMonth) ?? initialValue ?? /* @__PURE__ */ new Date());
+  const baseId = useId(props.id, "calendar");
+  const valueState = createControllableState({
+    value: props.value === void 0 ? void 0 : (() => resolveDate(props.value)),
+    defaultValue: initialValue ? normalizeDate(initialValue) : null,
+    onChange: props.onValueChange,
+    equals: (a, b) => isSameDay(a, b)
+  });
+  const monthState = createControllableState({
+    value: props.month === void 0 ? void 0 : (() => {
+      const next = toDate(read(props.month, void 0));
+      return normalizeMonth(next ?? initialMonth);
+    }),
+    defaultValue: initialMonth,
+    onChange: props.onMonthChange,
+    equals: (a, b) => isSameMonth(a, b)
+  });
+  const context = {
+    baseId,
+    gridId: `${baseId}-grid`,
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value ? normalizeDate(value) : null),
+    month: () => normalizeMonth(monthState.get()),
+    setMonth: (month) => monthState.set(normalizeMonth(month)),
+    locale: () => read(props.locale, "en-US"),
+    weekStartsOn: () => clampWeekday(read(props.weekStartsOn, 0)),
+    weekdayFormat: () => read(props.weekdayFormat, "short"),
+    showOutsideDays: () => read(props.showOutsideDays, true),
+    disabled: (date) => props.disabled?.(normalizeDate(date)) ?? false
+  };
+  const defaultChildren = [
+    {
+      type: CalendarHeader,
+      props: {
+        children: [
+          { type: CalendarPrevButton, props: { "data-calendar-prev-button": "", children: "Prev" } },
+          { type: CalendarTitle, props: {} },
+          { type: CalendarNextButton, props: { "data-calendar-next-button": "", children: "Next" } }
+        ]
+      }
+    },
+    { type: CalendarGrid, props: {} }
+  ];
+  return {
+    type: CalendarContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: "div",
+        props: {
+          ...props,
+          id: baseId,
+          value: void 0,
+          defaultValue: void 0,
+          onValueChange: void 0,
+          month: void 0,
+          defaultMonth: void 0,
+          onMonthChange: void 0,
+          locale: void 0,
+          weekStartsOn: void 0,
+          weekdayFormat: void 0,
+          showOutsideDays: void 0,
+          disabled: void 0,
+          "data-calendar-root": "",
+          children: props.children ?? defaultChildren
+        }
+      }
+    }
+  };
+}
+var Calendar = CalendarRoot;
+function CalendarHeader(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-calendar-header": "",
+      children: props.children
+    }
+  };
+}
+function CalendarTitle(props) {
+  const context = useCalendarContext("CalendarTitle");
+  return {
+    type: "span",
+    props: {
+      ...props,
+      "data-calendar-title": "",
+      children: props.children ?? (() => new Intl.DateTimeFormat(context.locale(), {
+        month: "long",
+        year: "numeric"
+      }).format(context.month()))
+    }
+  };
+}
+function CalendarPrevButton(props) {
+  const context = useCalendarContext("CalendarPrevButton");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    "aria-controls": context.gridId,
+    "data-calendar-prev": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.setMonth(addMonths(context.month(), -1));
+    },
+    children: props.children ?? "Prev"
+  });
+}
+function CalendarNextButton(props) {
+  const context = useCalendarContext("CalendarNextButton");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    "aria-controls": context.gridId,
+    "data-calendar-next": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.setMonth(addMonths(context.month(), 1));
+    },
+    children: props.children ?? "Next"
+  });
+}
+function CalendarGrid(props) {
+  const context = useCalendarContext("CalendarGrid");
+  return {
+    type: "div",
+    props: {
+      ...props,
+      showOutsideDays: void 0,
+      onDaySelect: void 0,
+      id: props.id ?? context.gridId,
+      role: "grid",
+      "data-calendar-grid": "",
+      children: () => {
+        const month = context.month();
+        const weekStartsOn = context.weekStartsOn();
+        const showOutside = read(props.showOutsideDays, context.showOutsideDays());
+        const labels = weekdayLabels(context.locale(), context.weekdayFormat(), weekStartsOn);
+        const days = buildVisibleDays(month, weekStartsOn);
+        const header = {
+          type: "div",
+          props: {
+            role: "row",
+            "data-calendar-weekdays": "",
+            children: labels.map((label, index) => ({
+              type: "span",
+              props: {
+                role: "columnheader",
+                "data-calendar-weekday": index,
+                children: label
+              }
+            }))
+          }
+        };
+        const rows = Array.from({ length: 6 }, (_, weekIndex) => {
+          const start = weekIndex * 7;
+          const weekDays = days.slice(start, start + 7);
+          return {
+            type: "div",
+            props: {
+              role: "row",
+              "data-calendar-week": weekIndex,
+              children: weekDays.map((day) => {
+                const key = formatDateKey(day);
+                const outsideMonth = !isSameMonth(day, month);
+                const selected = isSameDay(context.value(), day);
+                const disabled = context.disabled(day);
+                if (!showOutside && outsideMonth) {
+                  return {
+                    type: "span",
+                    props: {
+                      role: "gridcell",
+                      "data-calendar-day-placeholder": key,
+                      "aria-hidden": "true",
+                      children: ""
+                    }
+                  };
+                }
+                return {
+                  type: "button",
+                  props: {
+                    type: "button",
+                    role: "gridcell",
+                    "aria-selected": selected,
+                    disabled,
+                    "data-calendar-day": key,
+                    "data-state": selected ? "selected" : "idle",
+                    "data-outside-month": outsideMonth ? "true" : void 0,
+                    onClick: (event) => {
+                      ;
+                      props.onDaySelect?.(day, event);
+                      if (event.defaultPrevented || disabled) return;
+                      context.setValue(day);
+                      context.setMonth(day);
+                    },
+                    children: String(day.getDate())
+                  }
+                };
+              })
+            }
+          };
+        });
+        return [header, ...rows];
+      }
+    }
+  };
+}
+
+// src/components/form/date-picker.ts
+import { createContext as createContext13, useContext as useContext13 } from "@fictjs/runtime";
+
+// src/components/overlay/popover.ts
+import { createContext as createContext12, useContext as useContext12 } from "@fictjs/runtime";
+import { createRef } from "@fictjs/runtime";
+
+// src/components/interaction/dismissable-layer.ts
+import { onDestroy, onMount as onMount2 } from "@fictjs/runtime";
+import { createSignal as createSignal4 } from "@fictjs/runtime/advanced";
+import { useEventListener as useEventListener2 } from "@fictjs/hooks";
+var activeLayers = [];
+function isTopLayer(node) {
+  if (!node) return false;
+  return activeLayers[activeLayers.length - 1] === node;
+}
+function DismissableLayer(props) {
+  const node = createSignal4(null);
+  const dismiss = () => {
+    if (read(props.disabled, false)) return;
+    props.onDismiss?.();
+  };
+  const onKeyDown = (event) => {
+    if (!isTopLayer(node())) return;
+    if (event.key !== "Escape") return;
+    props.onEscapeKeyDown?.(event);
+    if (!event.defaultPrevented) {
+      dismiss();
+    }
+  };
+  const onPointerDown = (event) => {
+    const layer = node();
+    if (!layer || !isTopLayer(layer)) return;
+    const target = event.target;
+    const isOutside = !target || !layer.contains(target);
+    if (!isOutside) return;
+    props.onInteractOutside?.(event);
+    props.onPointerDownOutside?.(event);
+    if (!event.defaultPrevented) {
+      dismiss();
+    }
+  };
+  const onFocusIn = (event) => {
+    const layer = node();
+    if (!layer || !isTopLayer(layer)) return;
+    const target = event.target;
+    const isOutside = !target || !layer.contains(target);
+    if (!isOutside) return;
+    props.onInteractOutside?.(event);
+    props.onFocusOutside?.(event);
+    if (!event.defaultPrevented) {
+      dismiss();
+    }
+  };
+  const targetDocument = () => node()?.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+  const keydownListener = useEventListener2(targetDocument, "keydown", onKeyDown, {
+    capture: true,
+    immediate: false
+  });
+  const pointerDownListener = useEventListener2(targetDocument, "pointerdown", onPointerDown, {
+    capture: true,
+    immediate: false
+  });
+  const focusInListener = useEventListener2(targetDocument, "focusin", onFocusIn, {
+    capture: true,
+    immediate: false
+  });
+  onMount2(() => {
+    const layer = node();
+    if (!layer) return;
+    activeLayers.push(layer);
+    keydownListener.start();
+    pointerDownListener.start();
+    focusInListener.start();
+  });
+  onDestroy(() => {
+    keydownListener.stop();
+    pointerDownListener.stop();
+    focusInListener.stop();
+    const layer = node();
+    if (!layer) return;
+    const index = activeLayers.indexOf(layer);
+    if (index >= 0) {
+      activeLayers.splice(index, 1);
+    }
+  });
+  return {
+    type: "div",
+    props: {
+      ...props,
+      disabled: void 0,
+      onDismiss: void 0,
+      onEscapeKeyDown: void 0,
+      onInteractOutside: void 0,
+      onPointerDownOutside: void 0,
+      onFocusOutside: void 0,
+      ref: (el) => {
+        node(el);
+      },
+      "data-dismissable-layer": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/interaction/popper.ts
+import { createContext as createContext11, createEffect as createEffect2, useContext as useContext11 } from "@fictjs/runtime";
+import { createSignal as createSignal5 } from "@fictjs/runtime/advanced";
+import { useEventListener as useEventListener3 } from "@fictjs/hooks";
+var PopperContext = createContext11(null);
+function computePosition(anchorRect, contentRect, side, align, sideOffset, alignOffset) {
+  let x;
+  let y;
+  if (side === "bottom") {
+    y = anchorRect.bottom + sideOffset;
+  } else if (side === "top") {
+    y = anchorRect.top - contentRect.height - sideOffset;
+  } else {
+    y = anchorRect.top;
+  }
+  if (side === "right") {
+    x = anchorRect.right + sideOffset;
+  } else if (side === "left") {
+    x = anchorRect.left - contentRect.width - sideOffset;
+  } else {
+    x = anchorRect.left;
+  }
+  if (side === "top" || side === "bottom") {
+    if (align === "center") {
+      x = anchorRect.left + (anchorRect.width - contentRect.width) / 2;
+    } else if (align === "end") {
+      x = anchorRect.right - contentRect.width;
+    }
+    x += alignOffset;
+  } else {
+    if (align === "center") {
+      y = anchorRect.top + (anchorRect.height - contentRect.height) / 2;
+    } else if (align === "end") {
+      y = anchorRect.bottom - contentRect.height;
+    }
+    y += alignOffset;
+  }
+  const placement = align === "center" ? side : `${side}-${align}`;
+  return { x, y, placement };
+}
+function PopperRoot(props) {
+  const anchorNode = createSignal5(null);
+  const contentNode = createSignal5(null);
+  const currentPlacement = createSignal5("bottom");
+  const context = {
+    anchor: () => anchorNode(),
+    setAnchor: (node) => {
+      anchorNode(node);
+    },
+    content: () => contentNode(),
+    setContent: (node) => {
+      contentNode(node);
+    },
+    placement: () => currentPlacement(),
+    setPlacement: (placement) => {
+      currentPlacement(placement);
+    }
+  };
+  return {
+    type: PopperContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function PopperAnchor(props) {
+  const context = useContext11(PopperContext);
+  if (!context) {
+    throw new Error("PopperAnchor must be used inside PopperRoot");
+  }
+  return {
+    type: "div",
+    props: {
+      ...props,
+      ref: (node) => {
+        context.setAnchor(node);
+        if (typeof props.ref === "function") {
+          props.ref(node);
+        }
+      },
+      "data-popper-anchor": "",
+      children: props.children
+    }
+  };
+}
+function PopperContent(props) {
+  const context = useContext11(PopperContext);
+  if (!context) {
+    throw new Error("PopperContent must be used inside PopperRoot");
+  }
+  const side = props.side ?? "bottom";
+  const align = props.align ?? "center";
+  const sideOffset = props.sideOffset ?? 8;
+  const alignOffset = props.alignOffset ?? 0;
+  const strategy = props.strategy ?? "absolute";
+  const contentId = useId(props.id, "popper-content");
+  const update = () => {
+    const anchor = context.anchor();
+    const content = context.content();
+    if (!anchor || !content) return;
+    const anchorRect = anchor.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const { x, y, placement } = computePosition(
+      anchorRect,
+      contentRect,
+      side,
+      align,
+      sideOffset,
+      alignOffset
+    );
+    content.style.position = strategy;
+    content.style.left = `${Math.round(x)}px`;
+    content.style.top = `${Math.round(y)}px`;
+    content.dataset.placement = placement;
+    context.setPlacement(placement);
+  };
+  createEffect2(() => {
+    context.anchor();
+    context.content();
+    update();
+  });
+  const onWindowUpdate = () => update();
+  const targetDocument = () => context.anchor()?.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+  const targetWindow = () => targetDocument()?.defaultView ?? null;
+  useEventListener3(targetWindow, "resize", onWindowUpdate);
+  useEventListener3(targetDocument, "scroll", onWindowUpdate, { capture: true });
+  return {
+    type: "div",
+    props: {
+      ...props,
+      side: void 0,
+      align: void 0,
+      sideOffset: void 0,
+      alignOffset: void 0,
+      strategy: void 0,
+      id: contentId,
+      ref: (node) => {
+        context.setContent(node);
+        if (typeof props.ref === "function") {
+          props.ref(node);
+        }
+      },
+      role: props.role ?? "dialog",
+      "data-popper-content": "",
+      "data-placement": () => context.placement(),
+      children: props.children
+    }
+  };
+}
+function PopperArrow(props) {
+  const size = props.size ?? 8;
+  return {
+    type: "span",
+    props: {
+      ...props,
+      size: void 0,
+      "data-popper-arrow": "",
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        display: "inline-block",
+        transform: "rotate(45deg)",
+        ...typeof props.style === "object" && props.style !== null ? props.style : {}
+      }
+    }
+  };
+}
+
+// src/components/overlay/popover.ts
+var PopoverContext = createContext12(null);
+function usePopoverContext(component) {
+  const context = useContext12(PopoverContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside PopoverRoot`);
+  }
+  return context;
+}
+function PopoverRoot(props) {
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const baseId = useId(props.id, "popover");
+  const context = {
+    open: () => openState.get(),
+    setOpen: (value) => openState.set(value),
+    contentId: `${baseId}-content`,
+    triggerRef: createRef()
+  };
+  return {
+    type: PopoverContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: PopperRoot,
+        props: {
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function PopoverTrigger(props) {
+  const context = usePopoverContext("PopoverTrigger");
+  const tag = props.as ?? "button";
+  const refProp = props.ref;
+  return {
+    type: PopperAnchor,
+    props: {
+      children: Primitive({
+        ...props,
+        as: tag,
+        type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+        ref: composeRefs(context.triggerRef, refProp),
+        "aria-haspopup": props["aria-haspopup"] ?? "dialog",
+        "aria-expanded": () => context.open(),
+        "aria-controls": context.contentId,
+        "data-state": () => context.open() ? "open" : "closed",
+        onClick: (event) => {
+          props.onClick?.(event);
+          if (event.defaultPrevented) return;
+          context.setOpen(!context.open());
+        },
+        children: props.children
+      })
+    }
+  };
+}
+function buildPopoverContent(context, props) {
+  return {
+    type: DismissableLayer,
+    props: {
+      onEscapeKeyDown: props.onEscapeKeyDown,
+      onInteractOutside: props.onInteractOutside,
+      onPointerDownOutside: props.onPointerDownOutside,
+      onFocusOutside: props.onFocusOutside,
+      onDismiss: () => {
+        props.onDismiss?.();
+        context.setOpen(false);
+      },
+      children: {
+        type: PopperContent,
+        props: {
+          ...props,
+          portal: void 0,
+          forceMount: void 0,
+          onDismiss: void 0,
+          onEscapeKeyDown: void 0,
+          onInteractOutside: void 0,
+          onPointerDownOutside: void 0,
+          onFocusOutside: void 0,
+          id: props.id ?? context.contentId,
+          role: props.role ?? "dialog",
+          "data-popover-content": "",
+          "data-state": () => context.open() ? "open" : "closed",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function PopoverContent(props) {
+  const context = usePopoverContext("PopoverContent");
+  const content = buildPopoverContent(context, props);
+  const child = () => context.open() || props.forceMount ? content : null;
+  if (props.portal ?? true) {
+    return {
+      type: Portal,
+      props: {
+        children: child
+      }
+    };
+  }
+  return {
+    type: "div",
+    props: {
+      "data-popover-inline-container": "",
+      children: child
+    }
+  };
+}
+function PopoverClose(props) {
+  const context = usePopoverContext("PopoverClose");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    onClick: (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.setOpen(false);
+    },
+    children: props.children
+  });
+}
+
+// src/components/form/date-picker.ts
+function toDate2(value) {
+  if (value === null || value === void 0) return null;
+  const next = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+  return Number.isNaN(next.getTime()) ? null : next;
+}
+function sameDay(a, b) {
+  if (!a || !b) return a === b;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+var DatePickerContext = createContext13(null);
+function useDatePickerContext(component) {
+  const context = useContext13(DatePickerContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside DatePickerRoot`);
+  }
+  return context;
+}
+function DatePickerRoot(props) {
+  const baseId = useId(props.id, "date-picker");
+  const valueState = createControllableState({
+    value: props.value === void 0 ? void 0 : (() => {
+      const next = toDate2(read(props.value, void 0));
+      return next ? new Date(next.getFullYear(), next.getMonth(), next.getDate()) : null;
+    }),
+    defaultValue: toDate2(props.defaultValue),
+    onChange: props.onValueChange,
+    equals: (a, b) => sameDay(a, b)
+  });
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const context = {
+    baseId,
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value),
+    open: () => openState.get(),
+    setOpen: (open) => openState.set(open),
+    locale: () => read(props.locale, "en-US")
+  };
+  return {
+    type: DatePickerContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: PopoverRoot,
+        props: {
+          id: baseId,
+          open: () => context.open(),
+          onOpenChange: (open) => context.setOpen(open),
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function DatePickerTrigger(props) {
+  return {
+    type: PopoverTrigger,
+    props: {
+      ...props,
+      "data-date-picker-trigger": "",
+      children: props.children ?? { type: DatePickerValue, props: {} }
+    }
+  };
+}
+function DatePickerValue(props) {
+  const context = useDatePickerContext("DatePickerValue");
+  return {
+    type: "span",
+    props: {
+      ...props,
+      locale: void 0,
+      formatOptions: void 0,
+      placeholder: void 0,
+      "data-date-picker-value": "",
+      children: props.children ?? (() => {
+        const value = context.value();
+        if (!value) {
+          return props.placeholder ?? "";
+        }
+        return new Intl.DateTimeFormat(props.locale ?? context.locale(), props.formatOptions ?? { dateStyle: "medium" }).format(value);
+      })
+    }
+  };
+}
+function DatePickerContent(props) {
+  const context = useDatePickerContext("DatePickerContent");
+  return {
+    type: PopoverContent,
+    props: {
+      ...props,
+      closeOnSelect: void 0,
+      id: props.id ?? `${context.baseId}-content`,
+      role: props.role ?? "dialog",
+      "data-date-picker-content": "",
+      children: props.children ?? {
+        type: DatePickerCalendar,
+        props: {
+          closeOnSelect: props.closeOnSelect
+        }
+      }
+    }
+  };
+}
+function DatePickerCalendar(props) {
+  const context = useDatePickerContext("DatePickerCalendar");
+  return {
+    type: CalendarRoot,
+    props: {
+      ...props,
+      closeOnSelect: void 0,
+      locale: props.locale ?? context.locale,
+      value: () => context.value(),
+      onValueChange: (value) => {
+        props.onValueChange?.(value);
+        context.setValue(value);
+        if ((props.closeOnSelect ?? true) && value) {
+          context.setOpen(false);
+        }
+      },
+      "data-date-picker-calendar": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/form/select.ts
+import { createContext as createContext14, useContext as useContext14 } from "@fictjs/runtime";
+var SelectContext = createContext14(null);
+function useSelectContext(component) {
+  const context = useContext14(SelectContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside SelectRoot`);
+  }
+  return context;
+}
+function SelectRoot(props) {
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const context = {
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value),
+    open: () => openState.get(),
+    setOpen: (open) => openState.set(open),
+    disabled: () => props.disabled ?? false
+  };
+  return {
+    type: SelectContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function SelectTrigger(props) {
+  const context = useSelectContext("SelectTrigger");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    disabled: () => context.disabled(),
+    "aria-haspopup": "listbox",
+    "aria-expanded": () => context.open(),
+    "data-state": () => context.open() ? "open" : "closed",
+    "data-select-trigger": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented || context.disabled()) return;
+      context.setOpen(!context.open());
+    },
+    children: props.children
+  });
+}
+function SelectValue(props) {
+  const context = useSelectContext("SelectValue");
+  return {
+    type: "span",
+    props: {
+      ...props,
+      "data-select-value": "",
+      children: () => context.value() || props.placeholder || ""
+    }
+  };
+}
+function SelectContent(props) {
+  const context = useSelectContext("SelectContent");
+  return {
+    type: "div",
+    props: {
+      "data-select-content-wrapper": "",
+      children: () => context.open() || props.forceMount ? {
+        type: "div",
+        props: {
+          ...props,
+          forceMount: void 0,
+          role: "listbox",
+          "data-select-content": "",
+          children: props.children
+        }
+      } : null
+    }
+  };
+}
+function SelectItem(props) {
+  const context = useSelectContext("SelectItem");
+  const selected = () => context.value() === props.value;
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? "button" : props.type,
+    role: "option",
+    "aria-selected": selected,
+    "data-state": () => selected() ? "checked" : "unchecked",
+    "data-select-item": props.value,
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.setValue(props.value);
+      context.setOpen(false);
+    },
+    children: props.children
+  });
+}
+
+// src/components/form/combobox.ts
+import { createContext as createContext15, useContext as useContext15 } from "@fictjs/runtime";
+import { createSignal as createSignal6 } from "@fictjs/runtime/advanced";
+var ComboboxContext = createContext15(null);
+function useComboboxContext(component) {
+  const context = useContext15(ComboboxContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside ComboboxRoot`);
+  }
+  return context;
+}
+function ComboboxRoot(props) {
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const querySignal = createSignal6("");
+  const context = {
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value),
+    open: () => openState.get(),
+    setOpen: (open) => openState.set(open),
+    query: () => querySignal(),
+    setQuery: (query) => querySignal(query)
+  };
+  return {
+    type: ComboboxContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function ComboboxInput(props) {
+  const context = useComboboxContext("ComboboxInput");
+  return {
+    type: "input",
+    props: {
+      ...props,
+      type: "text",
+      role: "combobox",
+      "aria-expanded": () => context.open(),
+      "aria-autocomplete": "list",
+      value: () => context.query() || context.value(),
+      "data-combobox-input": "",
+      onFocus: (event) => {
+        ;
+        props.onFocus?.(event);
+        context.setOpen(true);
+      },
+      onInput: (event) => {
+        ;
+        props.onInput?.(event);
+        const target = event.target;
+        if (!target) return;
+        context.setQuery(target.value);
+        context.setOpen(true);
+      }
+    }
+  };
+}
+function ComboboxList(props) {
+  const context = useComboboxContext("ComboboxList");
+  return {
+    type: "div",
+    props: {
+      "data-combobox-list-wrapper": "",
+      children: () => context.open() || props.forceMount ? {
+        type: "div",
+        props: {
+          ...props,
+          forceMount: void 0,
+          role: "listbox",
+          "data-combobox-list": "",
+          children: props.children
+        }
+      } : null
+    }
+  };
+}
+function ComboboxItem(props) {
+  const context = useComboboxContext("ComboboxItem");
+  const tag = props.as ?? "button";
+  const matches = () => {
+    const query = context.query().trim().toLowerCase();
+    if (!query) return true;
+    const text = typeof props.children === "string" ? props.children : Array.isArray(props.children) ? props.children.join(" ") : props.value;
+    return String(text).toLowerCase().includes(query);
+  };
+  return {
+    type: "div",
+    props: {
+      "data-combobox-item-wrapper": props.value,
+      children: () => matches() ? Primitive({
+        ...props,
+        as: tag,
+        type: !props.asChild && tag === "button" ? "button" : props.type,
+        role: "option",
+        "data-combobox-item": props.value,
+        onClick: (event) => {
+          ;
+          props.onClick?.(event);
+          if (event.defaultPrevented) return;
+          context.setValue(props.value);
+          context.setQuery(props.value);
+          context.setOpen(false);
+        },
+        children: props.children
+      }) : null
+    }
+  };
+}
+
+// src/components/form/form-field.ts
+import { createContext as createContext16, useContext as useContext16 } from "@fictjs/runtime";
+var FieldContext = createContext16(null);
+function useFieldContext(component) {
+  const context = useContext16(FieldContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside FormField`);
+  }
+  return context;
+}
+function Form(props) {
+  return {
+    type: "form",
+    props: {
+      ...props,
+      "data-form": "",
+      children: props.children
+    }
+  };
+}
+function FormField(props) {
+  const fieldId = useId(props.id ?? (props.name ? `field-${props.name}` : void 0), "field");
+  const context = {
+    controlId: fieldId,
+    descriptionId: `${fieldId}-description`,
+    messageId: `${fieldId}-message`
+  };
+  return {
+    type: FieldContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function FormLabel(props) {
+  const field = useFieldContext("FormLabel");
+  return {
+    type: Label,
+    props: {
+      ...props,
+      htmlFor: props.htmlFor ?? field.controlId,
+      "data-form-label": "",
+      children: props.children
+    }
+  };
+}
+function FormControl(props) {
+  const field = useFieldContext("FormControl");
+  const tag = props.as ?? "input";
+  return {
+    type: tag,
+    props: {
+      ...props,
+      as: void 0,
+      id: props.id ?? field.controlId,
+      "aria-describedby": `${field.descriptionId} ${field.messageId}`,
+      "data-form-control": "",
+      children: props.children
+    }
+  };
+}
+function FormDescription(props) {
+  const field = useFieldContext("FormDescription");
+  return {
+    type: "p",
+    props: {
+      ...props,
+      id: props.id ?? field.descriptionId,
+      "data-form-description": "",
+      children: props.children
+    }
+  };
+}
+function FormMessage(props) {
+  const field = useFieldContext("FormMessage");
+  return {
+    type: "p",
+    props: {
+      ...props,
+      id: props.id ?? field.messageId,
+      role: props.role ?? "alert",
+      "data-form-message": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/interaction/focus-scope.ts
+import { onDestroy as onDestroy2, onMount as onMount3 } from "@fictjs/runtime";
+import { createSignal as createSignal7 } from "@fictjs/runtime/advanced";
+import { useEventListener as useEventListener4 } from "@fictjs/hooks";
+
+// src/internal/dom.ts
+function getFocusableCandidates(container) {
+  const selectors = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]'
+  ];
+  return Array.from(container.querySelectorAll(selectors.join(","))).filter((element) => {
+    if (element.hasAttribute("disabled")) return false;
+    if (element.getAttribute("aria-hidden") === "true") return false;
+    if (element.tabIndex < 0) return false;
+    const style = window.getComputedStyle(element);
+    return style.display !== "none" && style.visibility !== "hidden";
+  });
+}
+function focusFirst(container) {
+  const [first] = getFocusableCandidates(container);
+  first?.focus();
+}
+
+// src/components/interaction/focus-scope.ts
+function FocusScope(props) {
+  const node = createSignal7(null);
+  let previousFocused = null;
+  const onKeyDown = (event) => {
+    if (event.key !== "Tab") return;
+    const scope = node();
+    if (!scope) return;
+    const trapped = read(props.trapped, true);
+    if (!trapped) return;
+    const candidates = getFocusableCandidates(scope);
+    if (candidates.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = candidates[0];
+    const last = candidates[candidates.length - 1];
+    const active = (scope.ownerDocument ?? document).activeElement;
+    if (event.shiftKey) {
+      if (active === first || !scope.contains(active)) {
+        if (read(props.loop, true)) {
+          event.preventDefault();
+          last.focus();
+        }
+      }
+      return;
+    }
+    if (active === last) {
+      if (read(props.loop, true)) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  const targetDocument = () => node()?.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+  useEventListener4(targetDocument, "keydown", onKeyDown, { capture: true });
+  onMount3(() => {
+    const scope = node();
+    if (!scope) return;
+    const doc = targetDocument();
+    if (!doc) return;
+    previousFocused = doc.activeElement;
+    if (read(props.autoFocus, true)) {
+      const mountEvent = new CustomEvent("fict-focus-scope.mount");
+      props.onMountAutoFocus?.(mountEvent);
+      if (!mountEvent.defaultPrevented) {
+        focusFirst(scope);
+      }
+    }
+  });
+  onDestroy2(() => {
+    if (read(props.restoreFocus, true) && previousFocused instanceof HTMLElement) {
+      const unmountEvent = new CustomEvent("fict-focus-scope.unmount");
+      props.onUnmountAutoFocus?.(unmountEvent);
+      if (!unmountEvent.defaultPrevented) {
+        previousFocused.focus();
+      }
+    }
+  });
+  return {
+    type: "div",
+    props: {
+      ...props,
+      trapped: void 0,
+      loop: void 0,
+      autoFocus: void 0,
+      restoreFocus: void 0,
+      onMountAutoFocus: void 0,
+      onUnmountAutoFocus: void 0,
+      ref: (el) => {
+        node(el);
+      },
+      "data-focus-scope": "",
+      children: props.children
+    }
+  };
+}
+function FocusTrap(props) {
+  return {
+    type: FocusScope,
+    props: {
+      ...props,
+      trapped: true
+    }
+  };
+}
+
+// src/components/interaction/scroll-lock.ts
+import { createEffect as createEffect3, onDestroy as onDestroy3 } from "@fictjs/runtime";
+var lockCount = 0;
+var previousOverflow = "";
+var previousPaddingRight = "";
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    const body = document.body;
+    previousOverflow = body.style.overflow;
+    previousPaddingRight = body.style.paddingRight;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+  }
+  lockCount += 1;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) return;
+  lockCount -= 1;
+  if (lockCount === 0) {
+    const body = document.body;
+    body.style.overflow = previousOverflow;
+    body.style.paddingRight = previousPaddingRight;
+  }
+}
+function ScrollLock(props) {
+  let locked = false;
+  createEffect3(() => {
+    const enabled = read(props.enabled, true);
+    if (enabled && !locked) {
+      lockBodyScroll();
+      locked = true;
+      return;
+    }
+    if (!enabled && locked) {
+      unlockBodyScroll();
+      locked = false;
+    }
+  });
+  onDestroy3(() => {
+    if (locked) {
+      unlockBodyScroll();
+      locked = false;
+    }
+  });
+  return null;
+}
+
+// src/components/interaction/live-region.ts
+import { createContext as createContext17, useContext as useContext17 } from "@fictjs/runtime";
+var LiveRegionContext = createContext17(null);
+function LiveRegionProvider(props) {
+  let politeNode = null;
+  let assertiveNode = null;
+  let pendingPolite = null;
+  let pendingAssertive = null;
+  const writeRegion = (node, message) => {
+    if (!node) return;
+    node.textContent = "";
+    queueMicrotask(() => {
+      if (node) {
+        node.textContent = message;
+      }
+    });
+  };
+  const announce = (message, options) => {
+    const politeness = options?.politeness ?? "polite";
+    if (politeness === "assertive") {
+      if (assertiveNode) {
+        writeRegion(assertiveNode, message);
+      } else {
+        pendingAssertive = message;
+      }
+      return;
+    }
+    if (politeNode) {
+      writeRegion(politeNode, message);
+    } else {
+      pendingPolite = message;
+    }
+  };
+  return {
+    type: LiveRegionContext.Provider,
+    props: {
+      value: { announce },
+      children: [
+        props.children,
+        {
+          type: VisuallyHidden,
+          props: {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            "data-live-region": "polite",
+            ref: (node) => {
+              politeNode = node;
+              if (node && pendingPolite) {
+                writeRegion(node, pendingPolite);
+                pendingPolite = null;
+              }
+            },
+            children: ""
+          }
+        },
+        {
+          type: VisuallyHidden,
+          props: {
+            "aria-live": "assertive",
+            "aria-atomic": "true",
+            "data-live-region": "assertive",
+            ref: (node) => {
+              assertiveNode = node;
+              if (node && pendingAssertive) {
+                writeRegion(node, pendingAssertive);
+                pendingAssertive = null;
+              }
+            },
+            children: ""
+          }
+        }
+      ]
+    }
+  };
+}
+function useAnnouncer() {
+  const context = useContext17(LiveRegionContext);
+  if (!context) {
+    throw new Error("useAnnouncer must be used inside LiveRegionProvider");
+  }
+  return context.announce;
+}
+function Announce(props) {
+  const announce = useAnnouncer();
+  if (props.message) {
+    announce(props.message, { politeness: props.politeness });
+  }
+  return null;
+}
+
+// src/components/layout/scroll-area.ts
+import { createContext as createContext18, useContext as useContext18 } from "@fictjs/runtime";
+var ScrollAreaContext = createContext18(null);
+function useScrollAreaContext(component) {
+  const context = useContext18(ScrollAreaContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside ScrollArea`);
+  }
+  return context;
+}
+function ScrollArea(props) {
+  const context = {
+    viewportRef: { current: null }
+  };
+  return {
+    type: ScrollAreaContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: "div",
+        props: {
+          ...props,
+          "data-scroll-area": "",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function ScrollAreaViewport(props) {
+  const context = useScrollAreaContext("ScrollAreaViewport");
+  return {
+    type: "div",
+    props: {
+      ...props,
+      ref: (node) => {
+        context.viewportRef.current = node;
+      },
+      style: {
+        overflow: "auto",
+        ...typeof props.style === "object" && props.style !== null ? props.style : {}
+      },
+      "data-scroll-area-viewport": "",
+      children: props.children
+    }
+  };
+}
+function ScrollAreaScrollbar(props) {
+  const orientation = props.orientation ?? "vertical";
+  return {
+    type: "div",
+    props: {
+      ...props,
+      orientation: void 0,
+      "data-orientation": orientation,
+      "data-scroll-area-scrollbar": "",
+      children: props.children
+    }
+  };
+}
+function ScrollAreaThumb(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-scroll-area-thumb": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/layout/resizable.ts
+import { createSignal as createSignal8 } from "@fictjs/runtime/advanced";
+import { useEventListener as useEventListener5 } from "@fictjs/hooks";
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function ResizablePanelGroup(props) {
+  const direction = props.direction ?? "horizontal";
+  return {
+    type: "div",
+    props: {
+      ...props,
+      direction: void 0,
+      "data-resizable-panel-group": "",
+      "data-direction": direction,
+      style: {
+        display: "flex",
+        flexDirection: direction === "horizontal" ? "row" : "column",
+        ...typeof props.style === "object" && props.style !== null ? props.style : {}
+      },
+      children: props.children
+    }
+  };
+}
+function ResizablePanel(props) {
+  const defaultSize = props.defaultSize ?? 50;
+  return {
+    type: "div",
+    props: {
+      ...props,
+      defaultSize: void 0,
+      minSize: void 0,
+      maxSize: void 0,
+      "data-resizable-panel": "",
+      style: {
+        flexBasis: `${defaultSize}%`,
+        flexGrow: 0,
+        flexShrink: 0,
+        overflow: "auto",
+        ...typeof props.style === "object" && props.style !== null ? props.style : {}
+      },
+      children: props.children
+    }
+  };
+}
+function ResizableHandle(props) {
+  let node = null;
+  const dragState = createSignal8(null);
+  const targetWindow = () => typeof window !== "undefined" ? window : null;
+  const onMove = (moveEvent) => {
+    const state = dragState();
+    if (!state) return;
+    const currentPos = state.direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+    const delta = currentPos - state.startPos;
+    const nextPrevPx = state.prevStart + delta;
+    const nextNextPx = state.nextStart - delta;
+    const nextPrevPercent = clamp(nextPrevPx / state.groupSize * 100, state.minPrev, state.maxPrev);
+    const nextNextPercent = clamp(nextNextPx / state.groupSize * 100, state.minNext, state.maxNext);
+    state.prev.style.flexBasis = `${nextPrevPercent}%`;
+    state.next.style.flexBasis = `${nextNextPercent}%`;
+  };
+  const moveListener = useEventListener5(targetWindow, "pointermove", onMove, {
+    immediate: false
+  });
+  const upListener = useEventListener5(
+    targetWindow,
+    "pointerup",
+    () => {
+      dragState(null);
+      moveListener.stop();
+      upListener.stop();
+    },
+    { immediate: false }
+  );
+  const onPointerDown = (event) => {
+    if (!node) return;
+    const group = node.parentElement;
+    const prev = node.previousElementSibling;
+    const next = node.nextElementSibling;
+    if (!group || !prev || !next) return;
+    const direction = group.getAttribute("data-direction") ?? "horizontal";
+    const groupRect = group.getBoundingClientRect();
+    const prevRect = prev.getBoundingClientRect();
+    const nextRect = next.getBoundingClientRect();
+    const startPos = direction === "horizontal" ? event.clientX : event.clientY;
+    const prevStart = direction === "horizontal" ? prevRect.width : prevRect.height;
+    const nextStart = direction === "horizontal" ? nextRect.width : nextRect.height;
+    const groupSize = direction === "horizontal" ? groupRect.width : groupRect.height;
+    const minPrev = Number(prev.getAttribute("data-min-size") ?? "5");
+    const minNext = Number(next.getAttribute("data-min-size") ?? "5");
+    const maxPrev = Number(prev.getAttribute("data-max-size") ?? "95");
+    const maxNext = Number(next.getAttribute("data-max-size") ?? "95");
+    dragState({
+      direction,
+      startPos,
+      prevStart,
+      nextStart,
+      groupSize,
+      minPrev,
+      minNext,
+      maxPrev,
+      maxNext,
+      prev,
+      next
+    });
+    moveListener.start();
+    upListener.start();
+  };
+  return {
+    type: "div",
+    props: {
+      ...props,
+      withHandle: void 0,
+      ref: (el) => {
+        node = el;
+      },
+      role: "separator",
+      tabIndex: 0,
+      "data-resizable-handle": "",
+      onPointerDown,
+      children: props.withHandle ? {
+        type: "div",
+        props: {
+          "data-resizable-handle-grip": ""
+        }
+      } : null
+    }
+  };
+}
+
+// src/components/layout/aspect-ratio.ts
+function AspectRatio(props) {
+  const ratio = props.ratio ?? 1;
+  const paddingBottom = `${1 / ratio * 100}%`;
+  return {
+    type: "div",
+    props: {
+      ...props,
+      ratio: void 0,
+      "data-aspect-ratio": "",
+      style: {
+        position: "relative",
+        width: "100%",
+        paddingBottom,
+        ...typeof props.style === "object" && props.style !== null ? props.style : {}
+      },
+      children: {
+        type: "div",
+        props: {
+          style: {
+            position: "absolute",
+            inset: 0
+          },
+          "data-aspect-ratio-content": "",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+
+// src/components/layout/progress.ts
+function Progress(props) {
+  const max = props.max ?? 100;
+  const value = Math.min(max, Math.max(0, props.value ?? 0));
+  return {
+    type: "div",
+    props: {
+      ...props,
+      value: void 0,
+      max: void 0,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "data-progress": "",
+      children: {
+        type: "div",
+        props: {
+          "data-progress-indicator": "",
+          style: {
+            width: `${value / max * 100}%`
+          }
+        }
+      }
+    }
+  };
+}
+function Meter(props) {
+  const min = props.min ?? 0;
+  const max = props.max ?? 100;
+  const value = Math.min(max, Math.max(min, props.value ?? 0));
+  return {
+    type: "meter",
+    props: {
+      ...props,
+      min,
+      max,
+      value,
+      low: props.low,
+      high: props.high,
+      optimum: props.optimum,
+      "data-meter": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/layout/skeleton.ts
+function Skeleton(props) {
+  const loading = props.loading ?? true;
+  return {
+    type: "div",
+    props: {
+      ...props,
+      loading: void 0,
+      "aria-busy": loading ? "true" : "false",
+      "data-skeleton": "",
+      children: loading ? {
+        type: "span",
+        props: {
+          "data-skeleton-placeholder": "",
+          children: props.children ?? null
+        }
+      } : props.children
+    }
+  };
+}
+
+// src/components/layout/focus-visible.ts
+import { createContext as createContext19, useContext as useContext19 } from "@fictjs/runtime";
+import { createSignal as createSignal9 } from "@fictjs/runtime/advanced";
+import { useEventListener as useEventListener6 } from "@fictjs/hooks";
+var KeyboardModeContext = createContext19({
+  isKeyboardMode: () => false
+});
+function KeyboardModeProvider(props) {
+  const keyboardModeSignal = createSignal9(false);
+  const targetDocument = () => typeof document !== "undefined" ? document : null;
+  useEventListener6(targetDocument, "keydown", () => keyboardModeSignal(true), { capture: true });
+  useEventListener6(targetDocument, "pointerdown", () => keyboardModeSignal(false), { capture: true });
+  const context = {
+    isKeyboardMode: () => keyboardModeSignal()
+  };
+  return {
+    type: KeyboardModeContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function useKeyboardMode() {
+  const context = useContext19(KeyboardModeContext);
+  return context.isKeyboardMode;
+}
+function FocusVisible(props) {
+  const isKeyboardMode = useKeyboardMode();
+  const tag = props.as ?? "div";
+  return {
+    type: tag,
+    props: {
+      ...props,
+      as: void 0,
+      "data-focus-visible": () => isKeyboardMode() ? "true" : "false",
+      children: props.children
+    }
+  };
+}
+
+// src/components/overlay/dialog.ts
+import { createContext as createContext20, useContext as useContext20 } from "@fictjs/runtime";
+import { createRef as createRef2 } from "@fictjs/runtime";
+var DialogContext = createContext20(null);
+function useDialogContext(component) {
+  const context = useContext20(DialogContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside DialogRoot`);
+  }
+  return context;
+}
+function shouldRender(open, forceMount) {
+  return open || !!forceMount;
+}
+function DialogRoot(props) {
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const baseId = useId(props.id, "dialog");
+  const context = {
+    open: () => openState.get(),
+    setOpen: (value) => openState.set(value),
+    modal: () => props.modal ?? true,
+    contentId: `${baseId}-content`,
+    titleId: `${baseId}-title`,
+    descriptionId: `${baseId}-description`,
+    triggerRef: createRef2(),
+    contentRef: createRef2()
+  };
+  return {
+    type: DialogContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function DialogPortal(props) {
+  const context = useDialogContext("DialogPortal");
+  return {
+    type: Portal,
+    props: {
+      container: props.container,
+      children: () => shouldRender(context.open(), props.forceMount) ? props.children ?? null : null
+    }
+  };
+}
+function DialogTrigger(props) {
+  const context = useDialogContext("DialogTrigger");
+  const tag = props.as ?? "button";
+  const refProp = props.ref;
+  const onClick = (event) => {
+    props.onClick?.(event);
+    if (event.defaultPrevented) return;
+    context.setOpen(!context.open());
+  };
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    ref: composeRefs(context.triggerRef, refProp),
+    "aria-haspopup": "dialog",
+    "aria-expanded": () => context.open(),
+    "aria-controls": context.contentId,
+    "data-state": () => context.open() ? "open" : "closed",
+    onClick,
+    children: props.children
+  });
+}
+function DialogOverlay(props) {
+  const context = useDialogContext("DialogOverlay");
+  const overlayNode = {
+    type: "div",
+    props: {
+      ...props,
+      forceMount: void 0,
+      role: "presentation",
+      "data-state": () => context.open() ? "open" : "closed",
+      "data-dialog-overlay": "",
+      onClick: (event) => {
+        props.onClick?.(event);
+        if (event.defaultPrevented) return;
+        context.setOpen(false);
+      },
+      children: props.children
+    }
+  };
+  return {
+    type: DialogPortal,
+    props: {
+      forceMount: props.forceMount,
+      children: overlayNode
+    }
+  };
+}
+function buildDialogContentNode(context, props) {
+  const refProp = props.ref;
+  return {
+    type: DismissableLayer,
+    props: {
+      onEscapeKeyDown: props.onEscapeKeyDown,
+      onInteractOutside: props.onInteractOutside,
+      onPointerDownOutside: props.onPointerDownOutside,
+      onFocusOutside: props.onFocusOutside,
+      onDismiss: () => {
+        props.onDismiss?.();
+        context.setOpen(false);
+      },
+      children: {
+        type: FocusScope,
+        props: {
+          trapped: () => context.modal(),
+          loop: true,
+          autoFocus: true,
+          restoreFocus: true,
+          children: [
+            context.modal() ? { type: ScrollLock, props: { enabled: true } } : null,
+            {
+              type: "div",
+              props: {
+                ...props,
+                portal: void 0,
+                forceMount: void 0,
+                onDismiss: void 0,
+                onEscapeKeyDown: void 0,
+                onInteractOutside: void 0,
+                onPointerDownOutside: void 0,
+                onFocusOutside: void 0,
+                ref: composeRefs(context.contentRef, refProp),
+                id: props.id ?? context.contentId,
+                role: props.role ?? "dialog",
+                "aria-modal": context.modal() ? "true" : void 0,
+                "aria-labelledby": props["aria-labelledby"] ?? context.titleId,
+                "aria-describedby": props["aria-describedby"] ?? context.descriptionId,
+                "data-state": () => context.open() ? "open" : "closed",
+                "data-dialog-content": "",
+                children: props.children
+              }
+            }
+          ]
+        }
+      }
+    }
+  };
+}
+function DialogContent(props) {
+  const context = useDialogContext("DialogContent");
+  const node = buildDialogContentNode(context, props);
+  if (props.portal ?? true) {
+    return {
+      type: DialogPortal,
+      props: {
+        forceMount: props.forceMount,
+        children: node
+      }
+    };
+  }
+  return {
+    type: "div",
+    props: {
+      "data-dialog-inline-container": "",
+      children: () => shouldRender(context.open(), props.forceMount) ? node : null
+    }
+  };
+}
+function DialogClose(props) {
+  const context = useDialogContext("DialogClose");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    onClick: (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.setOpen(false);
+    },
+    children: props.children
+  });
+}
+function DialogTitle(props) {
+  const context = useDialogContext("DialogTitle");
+  return {
+    type: "h2",
+    props: {
+      ...props,
+      id: props.id ?? context.titleId,
+      "data-dialog-title": "",
+      children: props.children
+    }
+  };
+}
+function DialogDescription(props) {
+  const context = useDialogContext("DialogDescription");
+  return {
+    type: "p",
+    props: {
+      ...props,
+      id: props.id ?? context.descriptionId,
+      "data-dialog-description": "",
+      children: props.children
+    }
+  };
+}
+
+// src/components/overlay/alert-dialog.ts
+function AlertDialogRoot(props) {
+  return {
+    type: DialogRoot,
+    props: {
+      ...props,
+      modal: true
+    }
+  };
+}
+var AlertDialogTrigger = DialogTrigger;
+var AlertDialogPortal = DialogPortal;
+var AlertDialogOverlay = DialogOverlay;
+var AlertDialogTitle = DialogTitle;
+var AlertDialogDescription = DialogDescription;
+function AlertDialogContent(props) {
+  return {
+    type: DialogContent,
+    props: {
+      ...props,
+      role: props.role ?? "alertdialog"
+    }
+  };
+}
+function AlertDialogAction(props) {
+  return {
+    type: DialogClose,
+    props
+  };
+}
+function AlertDialogCancel(props) {
+  return {
+    type: DialogClose,
+    props
+  };
+}
+
+// src/components/overlay/tooltip.ts
+import { createContext as createContext21, useContext as useContext21 } from "@fictjs/runtime";
+import { useDebounceFn } from "@fictjs/hooks";
+var TooltipProviderContext = createContext21({
+  delayDuration: 700
+});
+var TooltipRootContext = createContext21(null);
+function useTooltipRootContext(component) {
+  const context = useContext21(TooltipRootContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside TooltipRoot`);
+  }
+  return context;
+}
+function TooltipProvider(props) {
+  return {
+    type: TooltipProviderContext.Provider,
+    props: {
+      value: {
+        delayDuration: props.delayDuration ?? 700
+      },
+      children: props.children
+    }
+  };
+}
+function TooltipRoot(props) {
+  const provider = useContext21(TooltipProviderContext);
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const baseId = useId(props.id, "tooltip");
+  const openDebounced = useDebounceFn(
+    () => {
+      openState.set(true);
+    },
+    props.delayDuration ?? provider.delayDuration
+  );
+  const clearSchedule = () => openDebounced.cancel();
+  const scheduleOpen = () => openDebounced.run();
+  const context = {
+    open: () => openState.get(),
+    setOpen: (value) => openState.set(value),
+    delayDuration: () => props.delayDuration ?? provider.delayDuration,
+    contentId: `${baseId}-content`,
+    scheduleOpen,
+    clearSchedule
+  };
+  return {
+    type: TooltipRootContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: PopperRoot,
+        props: {
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function TooltipTrigger(props) {
+  const context = useTooltipRootContext("TooltipTrigger");
+  const tag = props.as ?? "button";
+  const refProp = props.ref;
+  let cleanupListeners = null;
+  const open = (event) => {
+    context.scheduleOpen();
+    if (event instanceof PointerEvent) props.onPointerEnter?.(event);
+    if (event instanceof MouseEvent) {
+      props.onMouseEnter?.(event);
+      props.onMouseOver?.(event);
+    }
+  };
+  const close = (event) => {
+    context.clearSchedule();
+    context.setOpen(false);
+    if (event instanceof PointerEvent) props.onPointerLeave?.(event);
+    if (event instanceof MouseEvent) {
+      props.onMouseLeave?.(event);
+      props.onMouseOut?.(event);
+    }
+  };
+  const onFocus = (event) => {
+    props.onFocus?.(event);
+    context.scheduleOpen();
+  };
+  const onBlur = (event) => {
+    props.onBlur?.(event);
+    context.clearSchedule();
+    context.setOpen(false);
+  };
+  const registerRef = (node) => {
+    cleanupListeners?.();
+    cleanupListeners = null;
+    if (typeof refProp === "function") {
+      refProp(node);
+    } else if (refProp) {
+      refProp.current = node;
+    }
+    if (!node) return;
+    node.addEventListener("pointerenter", open);
+    node.addEventListener("pointerleave", close);
+    node.addEventListener("mouseover", open);
+    node.addEventListener("mouseout", close);
+    node.addEventListener("focus", onFocus);
+    node.addEventListener("blur", onBlur);
+    cleanupListeners = () => {
+      node.removeEventListener("pointerenter", open);
+      node.removeEventListener("pointerleave", close);
+      node.removeEventListener("mouseover", open);
+      node.removeEventListener("mouseout", close);
+      node.removeEventListener("focus", onFocus);
+      node.removeEventListener("blur", onBlur);
+    };
+  };
+  return {
+    type: PopperAnchor,
+    props: {
+      children: Primitive({
+        ...props,
+        as: tag,
+        type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+        ref: registerRef,
+        "aria-describedby": () => context.open() ? context.contentId : void 0,
+        "data-state": () => context.open() ? "open" : "closed",
+        children: props.children
+      })
+    }
+  };
+}
+function TooltipContent(props) {
+  const context = useTooltipRootContext("TooltipContent");
+  const contentNode = {
+    type: PopperContent,
+    props: {
+      ...props,
+      forceMount: void 0,
+      portal: void 0,
+      id: props.id ?? context.contentId,
+      role: props.role ?? "tooltip",
+      "data-tooltip-content": "",
+      "data-state": () => context.open() ? "open" : "closed",
+      onPointerEnter: (event) => {
+        props.onPointerEnter?.(event);
+        context.clearSchedule();
+      },
+      onPointerLeave: (event) => {
+        props.onPointerLeave?.(event);
+        context.setOpen(false);
+      },
+      onMouseEnter: (event) => {
+        props.onMouseEnter?.(event);
+        context.clearSchedule();
+      },
+      onMouseLeave: (event) => {
+        props.onMouseLeave?.(event);
+        context.setOpen(false);
+      },
+      onMouseOver: (event) => {
+        props.onMouseOver?.(event);
+        context.clearSchedule();
+      },
+      onMouseOut: (event) => {
+        props.onMouseOut?.(event);
+        context.setOpen(false);
+      },
+      children: props.children
+    }
+  };
+  const child = () => context.open() || props.forceMount ? contentNode : null;
+  if (props.portal ?? true) {
+    return {
+      type: Portal,
+      props: {
+        children: child
+      }
+    };
+  }
+  return {
+    type: "div",
+    props: {
+      "data-tooltip-inline-container": "",
+      children: child
+    }
+  };
+}
+
+// src/components/overlay/hover-card.ts
+import { createContext as createContext22, useContext as useContext22 } from "@fictjs/runtime";
+import { useDebounceFn as useDebounceFn2 } from "@fictjs/hooks";
+var HoverCardContext = createContext22(null);
+function useHoverCardContext(component) {
+  const context = useContext22(HoverCardContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside HoverCardRoot`);
+  }
+  return context;
+}
+function HoverCardRoot(props) {
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const baseId = useId(props.id, "hover-card");
+  const openDebounced = useDebounceFn2(
+    () => {
+      openState.set(true);
+    },
+    props.openDelay ?? 200
+  );
+  const closeDebounced = useDebounceFn2(
+    () => {
+      openState.set(false);
+    },
+    props.closeDelay ?? 200
+  );
+  const clearTimers = () => {
+    openDebounced.cancel();
+    closeDebounced.cancel();
+  };
+  const scheduleOpen = () => {
+    closeDebounced.cancel();
+    openDebounced.run();
+  };
+  const scheduleClose = () => {
+    openDebounced.cancel();
+    closeDebounced.run();
+  };
+  const context = {
+    open: () => openState.get(),
+    setOpen: (value) => openState.set(value),
+    contentId: `${baseId}-content`,
+    scheduleOpen,
+    scheduleClose,
+    clearTimers
+  };
+  return {
+    type: HoverCardContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: PopperRoot,
+        props: {
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function HoverCardTrigger(props) {
+  const context = useHoverCardContext("HoverCardTrigger");
+  const tag = props.as ?? "button";
+  const refProp = props.ref;
+  let cleanupListeners = null;
+  const open = (event) => {
+    context.scheduleOpen();
+    if (event instanceof PointerEvent) props.onPointerEnter?.(event);
+    if (event instanceof MouseEvent) {
+      props.onMouseEnter?.(event);
+      props.onMouseOver?.(event);
+    }
+  };
+  const close = (event) => {
+    context.scheduleClose();
+    if (event instanceof PointerEvent) props.onPointerLeave?.(event);
+    if (event instanceof MouseEvent) {
+      props.onMouseLeave?.(event);
+      props.onMouseOut?.(event);
+    }
+  };
+  const onFocus = (event) => {
+    props.onFocus?.(event);
+    context.scheduleOpen();
+  };
+  const onBlur = (event) => {
+    props.onBlur?.(event);
+    context.scheduleClose();
+  };
+  const registerRef = (node) => {
+    cleanupListeners?.();
+    cleanupListeners = null;
+    if (typeof refProp === "function") {
+      refProp(node);
+    } else if (refProp) {
+      refProp.current = node;
+    }
+    if (!node) return;
+    node.addEventListener("pointerenter", open);
+    node.addEventListener("pointerleave", close);
+    node.addEventListener("mouseover", open);
+    node.addEventListener("mouseout", close);
+    node.addEventListener("focus", onFocus);
+    node.addEventListener("blur", onBlur);
+    cleanupListeners = () => {
+      node.removeEventListener("pointerenter", open);
+      node.removeEventListener("pointerleave", close);
+      node.removeEventListener("mouseover", open);
+      node.removeEventListener("mouseout", close);
+      node.removeEventListener("focus", onFocus);
+      node.removeEventListener("blur", onBlur);
+    };
+  };
+  return {
+    type: PopperAnchor,
+    props: {
+      children: Primitive({
+        ...props,
+        as: tag,
+        type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+        ref: registerRef,
+        "aria-describedby": () => context.open() ? context.contentId : void 0,
+        "data-state": () => context.open() ? "open" : "closed",
+        children: props.children
+      })
+    }
+  };
+}
+function HoverCardContent(props) {
+  const context = useHoverCardContext("HoverCardContent");
+  const contentNode = {
+    type: PopperContent,
+    props: {
+      ...props,
+      forceMount: void 0,
+      portal: void 0,
+      id: props.id ?? context.contentId,
+      role: props.role ?? "dialog",
+      "data-hover-card-content": "",
+      "data-state": () => context.open() ? "open" : "closed",
+      onPointerEnter: (event) => {
+        props.onPointerEnter?.(event);
+        context.clearTimers();
+      },
+      onPointerLeave: (event) => {
+        props.onPointerLeave?.(event);
+        context.scheduleClose();
+      },
+      onMouseEnter: (event) => {
+        props.onMouseEnter?.(event);
+        context.clearTimers();
+      },
+      onMouseLeave: (event) => {
+        props.onMouseLeave?.(event);
+        context.scheduleClose();
+      },
+      onMouseOver: (event) => {
+        props.onMouseOver?.(event);
+        context.clearTimers();
+      },
+      onMouseOut: (event) => {
+        props.onMouseOut?.(event);
+        context.scheduleClose();
+      },
+      children: props.children
+    }
+  };
+  const child = () => context.open() || props.forceMount ? contentNode : null;
+  if (props.portal ?? true) {
+    return {
+      type: Portal,
+      props: {
+        children: child
+      }
+    };
+  }
+  return {
+    type: "div",
+    props: {
+      "data-hover-card-inline-container": "",
+      children: child
+    }
+  };
+}
+
+// src/components/overlay/command-palette.ts
+import { createContext as createContext23, onDestroy as onDestroy4, onMount as onMount4, useContext as useContext23 } from "@fictjs/runtime";
+import { createSignal as createSignal10 } from "@fictjs/runtime/advanced";
+function normalizeText(node) {
+  if (node === null || node === void 0 || node === false) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    return node.map((item) => normalizeText(item)).join(" ").trim();
+  }
+  return "";
+}
+function matchCommand(query, item) {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) return true;
+  const searchable = [item.value, item.text, ...item.keywords].map((value) => value.toLowerCase()).join(" ");
+  return searchable.includes(normalized);
+}
+var CommandPaletteContext = createContext23(null);
+function useCommandPaletteContext(component) {
+  const context = useContext23(CommandPaletteContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside CommandPaletteRoot`);
+  }
+  return context;
+}
+function CommandPaletteRoot(props) {
+  const baseId = useId(props.id, "command-palette");
+  const openState = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const queryState = createControllableState({
+    value: props.query,
+    defaultValue: props.defaultQuery ?? "",
+    onChange: props.onQueryChange
+  });
+  const itemsSignal = createSignal10([]);
+  const context = {
+    listId: `${baseId}-list`,
+    open: () => openState.get(),
+    setOpen: (open) => {
+      openState.set(open);
+      if (!open && (props.resetQueryOnClose ?? true)) {
+        queryState.set("");
+      }
+    },
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value),
+    query: () => queryState.get(),
+    setQuery: (query) => queryState.set(query),
+    registerItem: (item) => {
+      itemsSignal([...itemsSignal(), item]);
+      return () => {
+        itemsSignal(itemsSignal().filter((entry) => entry !== item));
+      };
+    },
+    hasMatches: () => {
+      const items = itemsSignal();
+      if (items.length === 0) return false;
+      return items.some((item) => matchCommand(queryState.get(), item));
+    }
+  };
+  return {
+    type: CommandPaletteContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: DialogRoot,
+        props: {
+          id: baseId,
+          modal: true,
+          open: () => context.open(),
+          onOpenChange: (open) => context.setOpen(open),
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function CommandPaletteTrigger(props) {
+  return {
+    type: DialogTrigger,
+    props: {
+      ...props,
+      "data-command-trigger": "",
+      children: props.children
+    }
+  };
+}
+function CommandPaletteContent(props) {
+  return {
+    type: DialogContent,
+    props: {
+      ...props,
+      role: props.role ?? "dialog",
+      "data-command-content": "",
+      children: props.children
+    }
+  };
+}
+function CommandPaletteInput(props) {
+  const context = useCommandPaletteContext("CommandPaletteInput");
+  return {
+    type: "input",
+    props: {
+      ...props,
+      type: "text",
+      role: "combobox",
+      "aria-expanded": () => context.open(),
+      "aria-controls": context.listId,
+      value: () => context.query(),
+      "data-command-input": "",
+      onFocus: (event) => {
+        ;
+        props.onFocus?.(event);
+        if (!event.defaultPrevented) {
+          context.setOpen(true);
+        }
+      },
+      onInput: (event) => {
+        ;
+        props.onInput?.(event);
+        const target = event.target;
+        if (!target) return;
+        context.setQuery(target.value);
+      },
+      onKeyDown: (event) => {
+        ;
+        props.onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === "ArrowDown") {
+          const list = document.getElementById(context.listId);
+          const firstItem = list?.querySelector("[data-command-item]");
+          firstItem?.focus();
+          event.preventDefault();
+        }
+      }
+    }
+  };
+}
+function CommandPaletteList(props) {
+  const context = useCommandPaletteContext("CommandPaletteList");
+  return {
+    type: "div",
+    props: {
+      ...props,
+      id: props.id ?? context.listId,
+      role: "listbox",
+      "data-command-list": "",
+      children: {
+        type: RovingFocusGroup,
+        props: {
+          orientation: "vertical",
+          loop: true,
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function CommandPaletteItem(props) {
+  const context = useCommandPaletteContext("CommandPaletteItem");
+  const tag = props.as ?? "button";
+  const text = normalizeText(props.children) || props.value;
+  let cleanup = null;
+  onMount4(() => {
+    cleanup = context.registerItem({
+      value: props.value,
+      text,
+      keywords: props.keywords ?? []
+    });
+  });
+  onDestroy4(() => {
+    cleanup?.();
+    cleanup = null;
+  });
+  const matches = () => matchCommand(context.query(), {
+    value: props.value,
+    text,
+    keywords: props.keywords ?? []
+  });
+  return {
+    type: "div",
+    props: {
+      "data-command-item-wrapper": props.value,
+      children: () => matches() ? Primitive({
+        ...props,
+        as: tag,
+        type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+        role: props.role ?? "option",
+        "aria-selected": () => context.value() === props.value,
+        "data-state": () => context.value() === props.value ? "selected" : "idle",
+        "data-command-item": props.value,
+        onClick: (event) => {
+          ;
+          props.onClick?.(event);
+          props.onSelect?.(props.value, event);
+          if (event.defaultPrevented) return;
+          context.setValue(props.value);
+          if (!props.keepOpen) {
+            context.setOpen(false);
+          }
+        },
+        children: props.children
+      }) : null
+    }
+  };
+}
+function CommandPaletteEmpty(props) {
+  const context = useCommandPaletteContext("CommandPaletteEmpty");
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-command-empty": "",
+      children: () => !context.hasMatches() ? props.children ?? "No results found." : null
+    }
+  };
+}
+function CommandPaletteGroup(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      heading: void 0,
+      role: props.role ?? "group",
+      "data-command-group": "",
+      children: [
+        props.heading ? {
+          type: "div",
+          props: {
+            "data-command-group-heading": "",
+            children: props.heading
+          }
+        } : null,
+        props.children
+      ]
+    }
+  };
+}
+var CommandPaletteSeparator = Separator;
+var CommandPaletteClose = DialogClose;
+
+// src/components/menu/dropdown-menu.ts
+import { createContext as createContext24, useContext as useContext24 } from "@fictjs/runtime";
+var DropdownMenuContext = createContext24(null);
+var DropdownRadioContext = createContext24(null);
+function useDropdownMenuContext(component) {
+  const context = useContext24(DropdownMenuContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside DropdownMenuRoot`);
+  }
+  return context;
+}
+function DropdownMenuRoot(props) {
+  const state = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const context = {
+    open: () => state.get(),
+    setOpen: (open) => state.set(open)
+  };
+  return {
+    type: DropdownMenuContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: PopoverRoot,
+        props: {
+          open: () => context.open(),
+          onOpenChange: (open) => context.setOpen(open),
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function DropdownMenuTrigger(props) {
+  return {
+    type: PopoverTrigger,
+    props
+  };
+}
+function DropdownMenuContent(props) {
+  return {
+    type: PopoverContent,
+    props: {
+      ...props,
+      role: "menu",
+      "aria-orientation": "vertical",
+      "data-dropdown-menu-content": "",
+      children: {
+        type: RovingFocusGroup,
+        props: {
+          orientation: "vertical",
+          loop: true,
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function DropdownMenuItem(props) {
+  const context = useDropdownMenuContext("DropdownMenuItem");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    role: props.role ?? "menuitem",
+    "data-dropdown-menu-item": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      props.onSelect?.(event);
+      if (event.defaultPrevented) return;
+      if (!props.keepOpen) {
+        context.setOpen(false);
+      }
+    },
+    children: props.children
+  });
+}
+function DropdownMenuCheckboxItem(props) {
+  const checkedState = createControllableState({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange
+  });
+  return {
+    type: DropdownMenuItem,
+    props: {
+      ...props,
+      keepOpen: props.keepOpen ?? true,
+      role: "menuitemcheckbox",
+      "aria-checked": () => checkedState.get(),
+      "data-checked": () => checkedState.get() ? "true" : "false",
+      onSelect: (event) => {
+        props.onSelect?.(event);
+        if (event.defaultPrevented) return;
+        checkedState.set(!checkedState.get());
+      },
+      children: props.children
+    }
+  };
+}
+function DropdownMenuRadioGroup(props) {
+  const valueState = createControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const context = {
+    value: () => valueState.get(),
+    setValue: (value) => valueState.set(value)
+  };
+  return {
+    type: DropdownRadioContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function DropdownMenuRadioItem(props) {
+  const radio = useContext24(DropdownRadioContext);
+  if (!radio) {
+    throw new Error("DropdownMenuRadioItem must be used inside DropdownMenuRadioGroup");
+  }
+  return {
+    type: DropdownMenuItem,
+    props: {
+      ...props,
+      keepOpen: props.keepOpen ?? true,
+      role: "menuitemradio",
+      "aria-checked": () => radio.value() === props.value,
+      "data-checked": () => radio.value() === props.value ? "true" : "false",
+      onSelect: (event) => {
+        props.onSelect?.(event);
+        if (event.defaultPrevented) return;
+        radio.setValue(props.value);
+      },
+      children: props.children
+    }
+  };
+}
+function DropdownMenuSub(props) {
+  const state = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  return {
+    type: PopoverRoot,
+    props: {
+      open: () => state.get(),
+      onOpenChange: (open) => state.set(open),
+      children: props.children
+    }
+  };
+}
+function DropdownMenuSubTrigger(props) {
+  return {
+    type: PopoverTrigger,
+    props: {
+      asChild: true,
+      "aria-haspopup": "menu",
+      children: {
+        type: DropdownMenuItem,
+        props: {
+          ...props,
+          keepOpen: true,
+          "aria-haspopup": props["aria-haspopup"] ?? "menu",
+          "aria-expanded": props["aria-expanded"],
+          "data-dropdown-menu-sub-trigger": "",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function DropdownMenuSubContent(props) {
+  return {
+    type: PopoverContent,
+    props: {
+      ...props,
+      role: "menu",
+      side: props.side ?? "right",
+      align: props.align ?? "start",
+      "aria-orientation": "vertical",
+      "data-dropdown-menu-sub-content": "",
+      children: {
+        type: RovingFocusGroup,
+        props: {
+          orientation: "vertical",
+          loop: true,
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function DropdownMenuLabel(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      role: props.role ?? "presentation",
+      "data-dropdown-menu-label": "",
+      children: props.children
+    }
+  };
+}
+var DropdownMenuSeparator = Separator;
+
+// src/components/menu/context-menu.ts
+import { createContext as createContext25, useContext as useContext25 } from "@fictjs/runtime";
+import { createSignal as createSignal11 } from "@fictjs/runtime/advanced";
+import { useEventListener as useEventListener7 } from "@fictjs/hooks";
+var ContextMenuContext = createContext25(null);
+function useContextMenuContext(component) {
+  const context = useContext25(ContextMenuContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside ContextMenuRoot`);
+  }
+  return context;
+}
+function ContextMenuRoot(props) {
+  const state = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const position = createSignal11({ x: 0, y: 0 });
+  const context = {
+    open: () => state.get(),
+    setOpen: (open) => state.set(open),
+    x: () => position().x,
+    y: () => position().y,
+    setPosition: (x, y) => position({ x, y })
+  };
+  return {
+    type: ContextMenuContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function ContextMenuTrigger(props) {
+  const context = useContextMenuContext("ContextMenuTrigger");
+  const tag = props.as ?? "div";
+  const refProp = props.ref;
+  const triggerNode = createSignal11(null);
+  const handleContextMenu = (event) => {
+    ;
+    props.onContextMenu?.(event);
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    context.setPosition(event.clientX, event.clientY);
+    context.setOpen(true);
+  };
+  const contextMenuListener = useEventListener7(
+    () => triggerNode(),
+    "contextmenu",
+    handleContextMenu,
+    { immediate: false }
+  );
+  const registerRef = (node) => {
+    contextMenuListener.stop();
+    if (typeof refProp === "function") {
+      refProp(node);
+    } else if (refProp) {
+      refProp.current = node;
+    }
+    triggerNode(node);
+    if (node) {
+      contextMenuListener.start();
+    }
+  };
+  return Primitive({
+    ...props,
+    as: tag,
+    ref: registerRef,
+    onContextMenu: handleContextMenu,
+    children: props.children
+  });
+}
+function ContextMenuContent(props) {
+  const context = useContextMenuContext("ContextMenuContent");
+  const content = {
+    type: DismissableLayer,
+    props: {
+      onEscapeKeyDown: props.onEscapeKeyDown,
+      onInteractOutside: props.onInteractOutside,
+      onPointerDownOutside: props.onPointerDownOutside,
+      onFocusOutside: props.onFocusOutside,
+      onDismiss: () => {
+        props.onDismiss?.();
+        context.setOpen(false);
+      },
+      children: {
+        type: "div",
+        props: {
+          ...props,
+          forceMount: void 0,
+          portal: void 0,
+          onDismiss: void 0,
+          onEscapeKeyDown: void 0,
+          onInteractOutside: void 0,
+          onPointerDownOutside: void 0,
+          onFocusOutside: void 0,
+          role: "menu",
+          "data-context-menu-content": "",
+          style: {
+            position: "fixed",
+            left: `${context.x()}px`,
+            top: `${context.y()}px`
+          },
+          children: {
+            type: RovingFocusGroup,
+            props: {
+              orientation: "vertical",
+              loop: true,
+              children: props.children
+            }
+          }
+        }
+      }
+    }
+  };
+  const child = () => context.open() || props.forceMount ? content : null;
+  if (props.portal ?? true) {
+    return {
+      type: Portal,
+      props: {
+        children: child
+      }
+    };
+  }
+  return {
+    type: "div",
+    props: {
+      "data-context-menu-inline-container": "",
+      children: child
+    }
+  };
+}
+function ContextMenuItem(props) {
+  const context = useContextMenuContext("ContextMenuItem");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    role: props.role ?? "menuitem",
+    "data-context-menu-item": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      props.onSelect?.(event);
+      if (event.defaultPrevented) return;
+      if (!props.keepOpen) {
+        context.setOpen(false);
+      }
+    },
+    children: props.children
+  });
+}
+function ContextMenuSub(props) {
+  const state = createControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  return {
+    type: PopoverRoot,
+    props: {
+      open: () => state.get(),
+      onOpenChange: (open) => state.set(open),
+      children: props.children
+    }
+  };
+}
+function ContextMenuSubTrigger(props) {
+  return {
+    type: PopoverTrigger,
+    props: {
+      asChild: true,
+      "aria-haspopup": "menu",
+      children: {
+        type: ContextMenuItem,
+        props: {
+          ...props,
+          keepOpen: true,
+          "aria-haspopup": props["aria-haspopup"] ?? "menu",
+          "aria-expanded": props["aria-expanded"],
+          "data-context-menu-sub-trigger": "",
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function ContextMenuSubContent(props) {
+  return {
+    type: PopoverContent,
+    props: {
+      ...props,
+      role: "menu",
+      side: props.side ?? "right",
+      align: props.align ?? "start",
+      "aria-orientation": "vertical",
+      "data-context-menu-sub-content": "",
+      children: {
+        type: RovingFocusGroup,
+        props: {
+          orientation: "vertical",
+          loop: true,
+          children: props.children
+        }
+      }
+    }
+  };
+}
+
+// src/components/menu/menubar.ts
+import { createContext as createContext26, useContext as useContext26 } from "@fictjs/runtime";
+import { createSignal as createSignal12 } from "@fictjs/runtime/advanced";
+var MenubarRootContext = createContext26(null);
+var MenubarMenuContext = createContext26(null);
+function useMenubarRootContext(component) {
+  const context = useContext26(MenubarRootContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside MenubarRoot`);
+  }
+  return context;
+}
+function useMenubarMenuContext(component) {
+  const context = useContext26(MenubarMenuContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside MenubarMenu`);
+  }
+  return context;
+}
+function MenubarRoot(props) {
+  const activeMenuSignal = createSignal12(null);
+  const context = {
+    activeMenu: () => activeMenuSignal(),
+    setActiveMenu: (id) => activeMenuSignal(id)
+  };
+  return {
+    type: MenubarRootContext.Provider,
+    props: {
+      value: context,
+      children: {
+        type: "div",
+        props: {
+          ...props,
+          role: "menubar",
+          "data-menubar-root": "",
+          children: {
+            type: RovingFocusGroup,
+            props: {
+              orientation: "horizontal",
+              loop: true,
+              children: props.children
+            }
+          }
+        }
+      }
+    }
+  };
+}
+function MenubarMenu(props) {
+  const id = useId(props.value, "menubar-menu");
+  return {
+    type: MenubarMenuContext.Provider,
+    props: {
+      value: { id },
+      children: {
+        type: "div",
+        props: {
+          "data-menubar-menu": id,
+          children: props.children
+        }
+      }
+    }
+  };
+}
+function MenubarTrigger(props) {
+  const root = useMenubarRootContext("MenubarTrigger");
+  const menu = useMenubarMenuContext("MenubarTrigger");
+  const tag = props.as ?? "button";
+  const open = () => root.activeMenu() === menu.id;
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    role: "menuitem",
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "data-state": () => open() ? "open" : "closed",
+    "data-menubar-trigger": menu.id,
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      root.setActiveMenu(open() ? null : menu.id);
+    },
+    onMouseOver: (event) => {
+      ;
+      props.onMouseOver?.(event);
+      if (event.defaultPrevented) return;
+      root.setActiveMenu(menu.id);
+    },
+    children: props.children
+  });
+}
+function MenubarContent(props) {
+  const root = useMenubarRootContext("MenubarContent");
+  const menu = useMenubarMenuContext("MenubarContent");
+  const open = () => root.activeMenu() === menu.id;
+  return {
+    type: "div",
+    props: {
+      "data-menubar-content-wrapper": menu.id,
+      children: () => open() || props.forceMount ? {
+        type: "div",
+        props: {
+          ...props,
+          forceMount: void 0,
+          role: "menu",
+          "data-menubar-content": menu.id,
+          children: props.children
+        }
+      } : null
+    }
+  };
+}
+function MenubarItem(props) {
+  const root = useMenubarRootContext("MenubarItem");
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? props.type ?? "button" : props.type,
+    role: props.role ?? "menuitem",
+    "data-menubar-item": "",
+    onClick: (event) => {
+      ;
+      props.onClick?.(event);
+      props.onSelect?.(event);
+      if (!event.defaultPrevented) {
+        root.setActiveMenu(null);
+      }
+    },
+    children: props.children
+  });
+}
+
+// src/components/feedback/toast.ts
+import { createContext as createContext27, onDestroy as onDestroy5, useContext as useContext27 } from "@fictjs/runtime";
+import { createSignal as createSignal13 } from "@fictjs/runtime/advanced";
+import { useDebounceFn as useDebounceFn3 } from "@fictjs/hooks";
+var ToastContext = createContext27(null);
+function useToastContext(component) {
+  const context = useContext27(ToastContext);
+  if (!context) {
+    throw new Error(`${component} must be used inside ToastProvider`);
+  }
+  return context;
+}
+function ToastProvider(props) {
+  const toastsSignal = createSignal13([]);
+  const timers = /* @__PURE__ */ new Map();
+  const dismiss = (id) => {
+    toastsSignal(toastsSignal().filter((toast) => toast.id !== id));
+    const timer = timers.get(id);
+    if (timer) {
+      timer.cancel();
+      timers.delete(id);
+    }
+  };
+  const show = (toast) => {
+    const id = toast.id ?? createId("toast");
+    const existingTimer = timers.get(id);
+    existingTimer?.cancel();
+    timers.delete(id);
+    const nextToast = {
+      id,
+      title: toast.title,
+      description: toast.description,
+      duration: toast.duration
+    };
+    toastsSignal([...toastsSignal(), nextToast]);
+    const timer = useDebounceFn3(
+      () => {
+        dismiss(id);
+      },
+      toast.duration ?? props.duration ?? 5e3
+    );
+    timer.run();
+    timers.set(id, timer);
+    return id;
+  };
+  onDestroy5(() => {
+    for (const timer of timers.values()) {
+      timer.cancel();
+    }
+    timers.clear();
+  });
+  const context = {
+    toasts: () => toastsSignal(),
+    show,
+    dismiss,
+    duration: () => props.duration ?? 5e3
+  };
+  return {
+    type: ToastContext.Provider,
+    props: {
+      value: context,
+      children: props.children
+    }
+  };
+}
+function useToast() {
+  const context = useToastContext("useToast");
+  return {
+    show: context.show,
+    dismiss: context.dismiss,
+    toasts: context.toasts
+  };
+}
+function ToastViewport(props) {
+  const context = useToastContext("ToastViewport");
+  return {
+    type: "div",
+    props: {
+      ...props,
+      role: "region",
+      "aria-live": "polite",
+      "aria-relevant": "additions text",
+      "data-toast-viewport": "",
+      children: [
+        props.children,
+        {
+          type: "div",
+          props: {
+            children: () => context.toasts().map((toast) => ({
+              type: ToastRoot,
+              props: {
+                id: toast.id,
+                title: toast.title,
+                description: toast.description,
+                duration: toast.duration ?? context.duration()
+              }
+            }))
+          }
+        }
+      ]
+    }
+  };
+}
+function ToastRoot(props) {
+  const context = useContext27(ToastContext);
+  const close = () => {
+    if (props.id && context) {
+      context.dismiss(props.id);
+    }
+    props.onOpenChange?.(false);
+  };
+  return {
+    type: "div",
+    props: {
+      ...props,
+      role: props.role ?? "status",
+      "data-toast-root": "",
+      children: [
+        props.title ? { type: ToastTitle, props: { children: props.title } } : null,
+        props.description ? { type: ToastDescription, props: { children: props.description } } : null,
+        props.children,
+        {
+          type: ToastClose,
+          props: {
+            onClick: () => close(),
+            children: props["data-close-label"] ?? "Dismiss"
+          }
+        }
+      ]
+    }
+  };
+}
+function ToastTitle(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-toast-title": "",
+      children: props.children
+    }
+  };
+}
+function ToastDescription(props) {
+  return {
+    type: "div",
+    props: {
+      ...props,
+      "data-toast-description": "",
+      children: props.children
+    }
+  };
+}
+function ToastAction(props) {
+  return {
+    type: "button",
+    props: {
+      ...props,
+      type: "button",
+      "data-toast-action": "",
+      "aria-label": props.altText,
+      children: [props.children, { type: VisuallyHidden, props: { children: props.altText } }]
+    }
+  };
+}
+function ToastClose(props) {
+  const tag = props.as ?? "button";
+  return Primitive({
+    ...props,
+    as: tag,
+    type: !props.asChild && tag === "button" ? "button" : props.type,
+    "data-toast-close": "",
+    onClick: (event) => {
+      props.onClick?.(event);
+    },
+    children: props.children ?? "Close"
+  });
+}
+export {
+  AccessibleIcon,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Announce,
+  AspectRatio,
+  Calendar,
+  CalendarGrid,
+  CalendarHeader,
+  CalendarNextButton,
+  CalendarPrevButton,
+  CalendarRoot,
+  CalendarTitle,
+  Checkbox,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxRoot,
+  CommandPaletteClose,
+  CommandPaletteContent,
+  CommandPaletteEmpty,
+  CommandPaletteGroup,
+  CommandPaletteInput,
+  CommandPaletteItem,
+  CommandPaletteList,
+  CommandPaletteRoot,
+  CommandPaletteSeparator,
+  CommandPaletteTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuRoot,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+  DatePickerCalendar,
+  DatePickerContent,
+  DatePickerRoot,
+  DatePickerTrigger,
+  DatePickerValue,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  DismissableLayer,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRoot,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  FocusScope,
+  FocusTrap,
+  FocusVisible,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormLabel,
+  FormMessage,
+  HoverCardContent,
+  HoverCardRoot,
+  HoverCardTrigger,
+  IdProvider,
+  KeyboardModeProvider,
+  Label,
+  LiveRegionProvider,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRoot,
+  MenubarTrigger,
+  Meter,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  PopoverClose,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+  PopperAnchor,
+  PopperArrow,
+  PopperContent,
+  PopperRoot,
+  Portal,
+  PortalHost,
+  Presence,
+  Primitive,
+  PrimitiveElements,
+  Progress,
+  RadioGroup,
+  RadioItem,
+  RangeSlider,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  RovingFocusGroup,
+  RovingFocusItem,
+  ScrollArea,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  ScrollLock,
+  SelectContent,
+  SelectItem,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Skeleton,
+  Slider,
+  Slot,
+  Switch,
+  SwitchThumb,
+  TabsContent,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  VisuallyHidden,
+  useAnnouncer,
+  useId,
+  useKeyboardMode,
+  useToast
+};
+//# sourceMappingURL=index.js.map