uidex 0.2.4 → 0.3.0

package/dist/headless/index.js

@@ -0,0 +1,3562 @@
+// src/entities/types.ts
+var ENTITY_KINDS = [
+  "route",
+  "page",
+  "feature",
+  "widget",
+  "region",
+  "element",
+  "primitive",
+  "flow"
+];
+function isMetaKind(kind) {
+  return kind !== "route" && kind !== "flow";
+}
+function isMetaEntity(entity) {
+  return isMetaKind(entity.kind);
+}
+function entityKey(entity) {
+  return entity.kind === "route" ? entity.path : entity.id;
+}
+function sameRef(a, b) {
+  if (a === b) return true;
+  if (a === null || b === null) return false;
+  return a.kind === b.kind && a.id === b.id;
+}
+var UnknownEntityKindError = class extends Error {
+  kind;
+  constructor(kind) {
+    super(`Unknown entity kind: ${kind}`);
+    this.name = "UnknownEntityKindError";
+    this.kind = kind;
+  }
+};
+var KIND_SET = new Set(ENTITY_KINDS);
+function assertEntityKind(kind) {
+  if (!KIND_SET.has(kind)) throw new UnknownEntityKindError(kind);
+}
+
+// src/entities/registry.ts
+function emptyStore() {
+  return {
+    route: /* @__PURE__ */ new Map(),
+    page: /* @__PURE__ */ new Map(),
+    feature: /* @__PURE__ */ new Map(),
+    widget: /* @__PURE__ */ new Map(),
+    region: /* @__PURE__ */ new Map(),
+    element: /* @__PURE__ */ new Map(),
+    primitive: /* @__PURE__ */ new Map(),
+    flow: /* @__PURE__ */ new Map()
+  };
+}
+function computeFlowIds(flows, targetId) {
+  const ids = [];
+  for (const flow of flows) {
+    if (flow.touches.includes(targetId)) ids.push(flow.id);
+  }
+  return ids;
+}
+function freezeEntity(entity, flows) {
+  if (!isMetaKind(entity.kind)) return entity;
+  const withMeta = entity;
+  if (withMeta.meta === void 0) return entity;
+  const computedFlows = Object.freeze(computeFlowIds(flows, withMeta.id));
+  const mergedMeta = { ...withMeta.meta, flows: computedFlows };
+  return { ...entity, meta: Object.freeze(mergedMeta) };
+}
+function createRegistry() {
+  const store = emptyStore();
+  let flowsCache = null;
+  const getFlows = () => {
+    if (flowsCache === null) flowsCache = Array.from(store.flow.values());
+    return flowsCache;
+  };
+  const add = (entity) => {
+    assertEntityKind(entity.kind);
+    const key = entityKey(entity);
+    store[entity.kind].set(key, entity);
+    flowsCache = null;
+  };
+  const get = (kind, id) => {
+    assertEntityKind(kind);
+    const raw = store[kind].get(id);
+    if (raw === void 0) return void 0;
+    return freezeEntity(raw, getFlows());
+  };
+  const list = (kind) => {
+    assertEntityKind(kind);
+    const flows = getFlows();
+    return Array.from(
+      store[kind].values(),
+      (e) => freezeEntity(e, flows)
+    );
+  };
+  const allEntities = function* () {
+    for (const kind of Object.keys(store)) {
+      for (const entity of store[kind].values()) {
+        yield entity;
+      }
+    }
+  };
+  const query = (predicate) => {
+    const flows = getFlows();
+    const result = [];
+    for (const entity of allEntities()) {
+      if (predicate(entity)) result.push(freezeEntity(entity, flows));
+    }
+    return result;
+  };
+  const byScope = (scope) => query(
+    (entity) => "scopes" in entity && Array.isArray(entity.scopes) && entity.scopes.includes(scope)
+  );
+  const touchedBy = (flowId) => {
+    const flow = store.flow.get(flowId);
+    if (flow === void 0) return [];
+    const ids = new Set(flow.touches);
+    return query((entity) => {
+      if (!isMetaEntity(entity)) return false;
+      return ids.has(entity.id);
+    });
+  };
+  return { add, get, list, query, byScope, touchedBy };
+}
+
+// src/entities/style.ts
+import {
+  Circle,
+  FileText,
+  LayoutGrid,
+  LayoutPanelTop,
+  MousePointerClick,
+  Route as RouteIcon,
+  Sparkles,
+  Workflow
+} from "lucide";
+var KIND_STYLE = {
+  route: {
+    icon: RouteIcon,
+    tone: "text-blue-700 dark:text-blue-300",
+    chip: "bg-blue-400/20 text-blue-700 group-data-hover:bg-blue-400/30 dark:bg-blue-400/10 dark:text-blue-300 dark:group-data-hover:bg-blue-400/15",
+    color: "#60a5fa",
+    label: "Route"
+  },
+  page: {
+    icon: FileText,
+    tone: "text-emerald-700 dark:text-emerald-300",
+    chip: "bg-emerald-400/20 text-emerald-700 group-data-hover:bg-emerald-400/30 dark:bg-emerald-400/10 dark:text-emerald-300 dark:group-data-hover:bg-emerald-400/15",
+    color: "#34d399",
+    label: "Page"
+  },
+  feature: {
+    icon: Sparkles,
+    tone: "text-amber-700 dark:text-amber-300",
+    chip: "bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-300 dark:group-data-hover:bg-amber-400/15",
+    color: "#fbbf24",
+    label: "Feature"
+  },
+  widget: {
+    icon: LayoutGrid,
+    tone: "text-violet-700 dark:text-violet-300",
+    chip: "bg-violet-400/20 text-violet-700 group-data-hover:bg-violet-400/30 dark:bg-violet-400/10 dark:text-violet-300 dark:group-data-hover:bg-violet-400/15",
+    color: "#a78bfa",
+    label: "Widget"
+  },
+  region: {
+    icon: LayoutPanelTop,
+    tone: "text-cyan-700 dark:text-cyan-300",
+    chip: "bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15",
+    color: "#22d3ee",
+    label: "Region"
+  },
+  element: {
+    icon: MousePointerClick,
+    tone: "text-rose-700 dark:text-rose-300",
+    chip: "bg-rose-400/20 text-rose-700 group-data-hover:bg-rose-400/30 dark:bg-rose-400/10 dark:text-rose-300 dark:group-data-hover:bg-rose-400/15",
+    color: "#fb7185",
+    label: "Element"
+  },
+  primitive: {
+    icon: Circle,
+    tone: "text-slate-700 dark:text-slate-300",
+    chip: "bg-slate-400/20 text-slate-700 group-data-hover:bg-slate-400/30 dark:bg-slate-400/10 dark:text-slate-300 dark:group-data-hover:bg-slate-400/15",
+    color: "#94a3b8",
+    label: "Primitive"
+  },
+  flow: {
+    icon: Workflow,
+    tone: "text-fuchsia-700 dark:text-fuchsia-300",
+    chip: "bg-fuchsia-400/20 text-fuchsia-700 group-data-hover:bg-fuchsia-400/30 dark:bg-fuchsia-400/10 dark:text-fuchsia-300 dark:group-data-hover:bg-fuchsia-400/15",
+    color: "#e879f9",
+    label: "Flow"
+  }
+};
+
+// src/entities/display-name.ts
+function prettify(id) {
+  const parts = id.split(/[-_]+/).filter(Boolean);
+  const words = parts.flatMap((part) => part.split(/(?=[A-Z])/).filter(Boolean));
+  if (words.length === 0) return "";
+  return words.map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(" ");
+}
+function displayName(entity, node) {
+  if (entity.kind === "route") return prettify(entity.page);
+  if (entity.kind !== "flow") {
+    const authored = entity.meta?.name;
+    if (authored) return authored;
+  }
+  const aria = node?.getAttribute("aria-label")?.trim();
+  if (aria) return aria;
+  return prettify(entity.id);
+}
+
+// src/internal/cleanup.ts
+function createCleanupStack() {
+  const stack = [];
+  return {
+    add(cleanup) {
+      if (!cleanup) return;
+      if (typeof cleanup === "function") stack.push(cleanup);
+      else stack.push(() => cleanup.destroy());
+    },
+    drain() {
+      for (let i = stack.length - 1; i >= 0; i--) {
+        try {
+          stack[i]();
+        } catch (err) {
+          console.error("[uidex] cleanup threw", err);
+        }
+      }
+      stack.length = 0;
+    }
+  };
+}
+
+// src/session/store.ts
+import { createActor } from "xstate";
+import { createStore } from "zustand/vanilla";
+
+// src/flows/highlight.ts
+import { assign, setup } from "xstate";
+var initialContext = {
+  ref: null,
+  element: null,
+  pinnedRef: null,
+  color: null
+};
+var highlightMachine = setup({
+  types: {},
+  actions: {
+    showOverlay: () => {
+    },
+    hideOverlay: () => {
+    },
+    updateOverlay: () => {
+    }
+  }
+}).createMachine({
+  id: "highlight",
+  initial: "none",
+  context: initialContext,
+  states: {
+    none: {
+      entry: [
+        assign({
+          ref: null,
+          element: null,
+          pinnedRef: null,
+          color: null
+        }),
+        { type: "hideOverlay" }
+      ],
+      on: {
+        HOVER: {
+          target: "transient",
+          actions: assign(({ event }) => ({
+            ref: event.ref,
+            element: event.element,
+            color: event.color ?? null
+          }))
+        },
+        PIN: {
+          target: "pinned",
+          actions: assign(({ context, event }) => ({
+            ref: event.ref ?? context.ref,
+            pinnedRef: event.ref ?? context.ref
+          }))
+        }
+      }
+    },
+    transient: {
+      entry: { type: "showOverlay" },
+      on: {
+        HOVER: {
+          actions: [
+            assign(({ event }) => ({
+              ref: event.ref,
+              element: event.element,
+              color: event.color ?? null
+            })),
+            { type: "updateOverlay" }
+          ]
+        },
+        UNHOVER: { target: "none" },
+        PIN: {
+          target: "pinned",
+          actions: assign(({ context, event }) => ({
+            pinnedRef: event.ref ?? context.ref
+          }))
+        }
+      }
+    },
+    pinned: {
+      entry: { type: "showOverlay" },
+      on: {
+        UNPIN: { target: "none" }
+      }
+    }
+  }
+});
+
+// src/flows/surface.ts
+import { assign as assign2, forwardTo, sendTo, setup as setup2 } from "xstate";
+var initialContext2 = {
+  stack: [],
+  hover: null,
+  selection: null,
+  pinnedHighlight: null,
+  theme: "auto",
+  resolvedTheme: "light",
+  ingestActive: false
+};
+var surfaceMachine = setup2({
+  types: {},
+  actors: {
+    highlight: highlightMachine
+  },
+  actions: {
+    mountInspector: () => {
+    },
+    destroyInspector: () => {
+    },
+    openActionsPopup: () => {
+    },
+    closePopup: () => {
+    }
+  },
+  guards: {
+    hasPinnedHighlight: ({ context }) => context.pinnedHighlight !== null,
+    hasActions: () => false,
+    popupOpen: () => false,
+    stackDeeperThanTwo: ({ context }) => context.stack.length > 2,
+    stackEqualsTwo: ({ context }) => context.stack.length === 2,
+    stackEqualsOne: ({ context }) => context.stack.length === 1,
+    paletteAtBottomDepthTwo: ({ context }) => context.stack.length === 2 && context.stack[0]?.id === "command-palette"
+  }
+}).createMachine({
+  id: "surface",
+  initial: "idle",
+  context: ({ input }) => ({
+    ...initialContext2,
+    ...input ?? {}
+  }),
+  invoke: {
+    id: "highlight",
+    src: "highlight"
+  },
+  on: {
+    HOVER: {
+      actions: [
+        assign2(({ event }) => ({ hover: event.ref })),
+        forwardTo("highlight")
+      ]
+    },
+    UNHOVER: {
+      actions: [assign2({ hover: null }), forwardTo("highlight")]
+    },
+    PIN: {
+      actions: [
+        assign2(({ context, event }) => ({
+          pinnedHighlight: event.ref ?? context.hover
+        })),
+        forwardTo("highlight")
+      ]
+    },
+    UNPIN: {
+      actions: [assign2({ pinnedHighlight: null }), forwardTo("highlight")]
+    },
+    SET_SELECTION: {
+      actions: assign2(({ event }) => ({ selection: event.ref }))
+    },
+    SET_THEME: {
+      actions: assign2(({ event }) => ({
+        theme: event.theme,
+        resolvedTheme: event.resolvedTheme
+      }))
+    },
+    SET_INGEST: {
+      actions: assign2(({ event }) => ({ ingestActive: event.active }))
+    }
+  },
+  states: {
+    idle: {
+      entry: assign2({ stack: [] }),
+      on: {
+        TOGGLE_INSPECTOR: { target: "inspecting" },
+        OPEN_PALETTE: { target: "palette" },
+        PUSH_VIEW: {
+          target: "viewing",
+          actions: assign2(({ event }) => ({ stack: [event.entry] }))
+        },
+        ESC: {
+          guard: "hasPinnedHighlight",
+          actions: [
+            assign2({ pinnedHighlight: null }),
+            sendTo("highlight", { type: "UNPIN" })
+          ]
+        }
+      }
+    },
+    inspecting: {
+      entry: { type: "mountInspector" },
+      exit: { type: "destroyInspector" },
+      on: {
+        SELECT: {
+          target: "viewing",
+          actions: assign2(({ context, event }) => ({
+            selection: event.ref,
+            stack: [...context.stack, event.entry]
+          }))
+        },
+        PUSH_VIEW: {
+          target: "viewing",
+          actions: assign2(({ event }) => ({ stack: [event.entry] }))
+        },
+        TOGGLE_INSPECTOR: { target: "idle" },
+        OPEN_PALETTE: { target: "palette" },
+        ESC: { target: "idle" }
+      }
+    },
+    palette: {
+      entry: assign2({ stack: [{ id: "command-palette", ref: null }] }),
+      on: {
+        PUSH_VIEW: {
+          target: "viewing",
+          actions: assign2(({ context, event }) => ({
+            stack: [...context.stack, event.entry]
+          }))
+        },
+        CLOSE: { target: "idle" },
+        ESC: { target: "idle" },
+        CMD_K: [
+          {
+            guard: "hasActions",
+            actions: { type: "openActionsPopup" }
+          },
+          { target: "idle" }
+        ]
+      }
+    },
+    viewing: {
+      on: {
+        PUSH_VIEW: {
+          actions: assign2(({ context, event }) => ({
+            stack: [...context.stack, event.entry]
+          }))
+        },
+        POP_VIEW: [
+          {
+            guard: "stackDeeperThanTwo",
+            actions: assign2(({ context }) => ({
+              stack: context.stack.slice(0, -1)
+            }))
+          },
+          {
+            guard: "paletteAtBottomDepthTwo",
+            target: "palette"
+          },
+          {
+            guard: "stackEqualsTwo",
+            actions: assign2(({ context }) => ({
+              stack: context.stack.slice(0, -1)
+            }))
+          },
+          {
+            guard: "stackEqualsOne",
+            target: "idle"
+          }
+        ],
+        CLOSE: { target: "idle" },
+        ESC: [
+          {
+            guard: "popupOpen",
+            actions: { type: "closePopup" }
+          },
+          {
+            guard: "stackDeeperThanTwo",
+            actions: assign2(({ context }) => ({
+              stack: context.stack.slice(0, -1)
+            }))
+          },
+          {
+            guard: "paletteAtBottomDepthTwo",
+            target: "palette"
+          },
+          {
+            guard: "stackEqualsTwo",
+            actions: assign2(({ context }) => ({
+              stack: context.stack.slice(0, -1)
+            }))
+          },
+          {
+            guard: "stackEqualsOne",
+            target: "idle"
+          }
+        ]
+      }
+    }
+  }
+});
+
+// src/session/store.ts
+var defaultSnapshot = {
+  hover: null,
+  selection: null,
+  stack: [],
+  pinnedHighlight: null,
+  inspectorActive: false,
+  theme: "auto",
+  resolvedTheme: "light",
+  ingestActive: false
+};
+function resolveTheme(preference, detect) {
+  if (preference !== "auto") return preference;
+  if (detect) return detect();
+  if (typeof globalThis !== "undefined" && typeof globalThis.matchMedia === "function") {
+    const mql = globalThis.matchMedia("(prefers-color-scheme: dark)");
+    return mql.matches ? "dark" : "light";
+  }
+  return "light";
+}
+function projectFromActor(actor) {
+  const sn = actor.getSnapshot();
+  const child = sn.children.highlight;
+  const childSnapshot = child?.getSnapshot();
+  const pinned = childSnapshot && childSnapshot.value === "pinned" ? childSnapshot.context.pinnedRef : null;
+  return {
+    hover: sn.context.hover,
+    selection: sn.context.selection,
+    stack: sn.context.stack,
+    pinnedHighlight: pinned,
+    inspectorActive: sn.matches("inspecting"),
+    theme: sn.context.theme,
+    resolvedTheme: sn.context.resolvedTheme,
+    ingestActive: sn.context.ingestActive
+  };
+}
+function createSession(options = {}) {
+  const { detectTheme, bindings, ...overrides } = options;
+  const initialPref = overrides.theme ?? defaultSnapshot.theme;
+  const initialResolved = overrides.resolvedTheme ?? resolveTheme(initialPref, detectTheme);
+  const initialStack = overrides.stack ?? [];
+  const input = {
+    hover: overrides.hover ?? null,
+    selection: overrides.selection ?? null,
+    pinnedHighlight: null,
+    theme: initialPref,
+    resolvedTheme: initialResolved,
+    ingestActive: overrides.ingestActive ?? false
+  };
+  const providedHighlight = highlightMachine.provide({
+    actions: {
+      showOverlay: ({ context }) => bindings?.highlight?.showOverlay?.(context),
+      hideOverlay: () => bindings?.highlight?.hideOverlay?.(),
+      updateOverlay: ({ context }) => bindings?.highlight?.updateOverlay?.(context)
+    }
+  });
+  const providedSurface = surfaceMachine.provide({
+    actions: {
+      mountInspector: () => bindings?.surface?.mountInspector?.(),
+      destroyInspector: () => bindings?.surface?.destroyInspector?.(),
+      openActionsPopup: () => bindings?.surface?.openActionsPopup?.(),
+      closePopup: () => bindings?.surface?.closePopup?.()
+    },
+    actors: {
+      highlight: providedHighlight
+    }
+  });
+  const actor = createActor(providedSurface, { input });
+  actor.start();
+  if (initialStack.length > 0) {
+    actor.send({ type: "OPEN_PALETTE" });
+    for (let i = 1; i < initialStack.length; i++) {
+      actor.send({ type: "PUSH_VIEW", entry: initialStack[i] });
+    }
+  } else if (overrides.inspectorActive) {
+    actor.send({ type: "TOGGLE_INSPECTOR" });
+  }
+  if (overrides.pinnedHighlight) {
+    actor.send({ type: "PIN", ref: overrides.pinnedHighlight });
+  }
+  const store = createStore((_set, get) => ({
+    ...projectFromActor(actor),
+    actions: {
+      hover(ref) {
+        if (sameRef(get().hover, ref)) return;
+        if (ref === null) {
+          actor.send({ type: "UNHOVER" });
+        } else {
+          actor.send({ type: "HOVER", ref, element: null });
+        }
+      },
+      select(ref) {
+        if (sameRef(get().selection, ref)) return;
+        actor.send({ type: "SET_SELECTION", ref });
+      },
+      pushStack(entry) {
+        if (entry.id === "command-palette" && get().stack.length === 0) {
+          actor.send({ type: "OPEN_PALETTE" });
+        } else {
+          actor.send({ type: "PUSH_VIEW", entry });
+        }
+      },
+      popStack() {
+        const sn = actor.getSnapshot();
+        if (sn.matches("palette")) {
+          actor.send({ type: "ESC" });
+        } else if (sn.matches("viewing")) {
+          actor.send({ type: "POP_VIEW" });
+        }
+      },
+      clearStack() {
+        if (get().stack.length === 0) return;
+        actor.send({ type: "CLOSE" });
+      },
+      openView(id, ref) {
+        const resolvedRef = ref === void 0 ? get().selection : ref;
+        get().actions.pushStack({ id, ref: resolvedRef });
+      },
+      closeView() {
+        get().actions.clearStack();
+      },
+      setInspectorActive(active) {
+        if (get().inspectorActive === active) return;
+        actor.send({ type: "TOGGLE_INSPECTOR" });
+      },
+      toggleInspector() {
+        actor.send({ type: "TOGGLE_INSPECTOR" });
+      },
+      pinHighlight(ref) {
+        if (sameRef(get().pinnedHighlight, ref)) return;
+        actor.send({ type: "PIN", ref });
+      },
+      clearPinnedHighlight() {
+        if (get().pinnedHighlight === null) return;
+        actor.send({ type: "UNPIN" });
+      },
+      setTheme(theme, resolved) {
+        const state = get();
+        const nextResolved = resolved ?? resolveTheme(theme, detectTheme);
+        if (state.theme === theme && state.resolvedTheme === nextResolved)
+          return;
+        actor.send({ type: "SET_THEME", theme, resolvedTheme: nextResolved });
+      },
+      setIngest(active) {
+        if (get().ingestActive === active) return;
+        actor.send({ type: "SET_INGEST", active });
+      }
+    }
+  }));
+  const projectAndSet = () => {
+    const next = projectFromActor(actor);
+    const prev = store.getState();
+    const updates = {};
+    if (!sameRef(prev.hover, next.hover)) updates.hover = next.hover;
+    if (!sameRef(prev.selection, next.selection))
+      updates.selection = next.selection;
+    if (prev.stack !== next.stack) updates.stack = next.stack;
+    if (!sameRef(prev.pinnedHighlight, next.pinnedHighlight))
+      updates.pinnedHighlight = next.pinnedHighlight;
+    if (prev.inspectorActive !== next.inspectorActive)
+      updates.inspectorActive = next.inspectorActive;
+    if (prev.theme !== next.theme) updates.theme = next.theme;
+    if (prev.resolvedTheme !== next.resolvedTheme)
+      updates.resolvedTheme = next.resolvedTheme;
+    if (prev.ingestActive !== next.ingestActive)
+      updates.ingestActive = next.ingestActive;
+    if (Object.keys(updates).length === 0) return;
+    store.setState(updates);
+  };
+  actor.subscribe(projectAndSet);
+  const session = store;
+  session.send = (event) => actor.send(event);
+  return session;
+}
+
+// src/styles/tailwind.built.css
+var tailwind_built_default = `/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-amber-300: oklch(87.9% 0.169 91.605);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-amber-700: oklch(55.5% 0.163 48.998);
+    --color-emerald-300: oklch(84.5% 0.143 164.978);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-500: oklch(69.6% 0.17 162.48);
+    --color-emerald-700: oklch(50.8% 0.118 165.612);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
+    --color-cyan-400: oklch(78.9% 0.154 211.53);
+    --color-cyan-700: oklch(52% 0.105 223.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-violet-300: oklch(81.1% 0.111 293.571);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
+    --color-violet-700: oklch(49.1% 0.27 292.581);
+    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+    --color-fuchsia-400: oklch(74% 0.238 322.16);
+    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+    --color-rose-300: oklch(81% 0.117 11.638);
+    --color-rose-400: oklch(71.2% 0.194 13.428);
+    --color-rose-700: oklch(51.4% 0.222 16.935);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
+    --color-slate-400: oklch(70.4% 0.04 256.788);
+    --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-neutral-50: oklch(98.5% 0 0);
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-950: oklch(14.5% 0 0);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-xl: 36rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --tracking-widest: 0.1em;
+    --leading-relaxed: 1.625;
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --blur-sm: 8px;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+    --default-mono-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    --color-border: var(--border);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .start {
+    inset-inline-start: var(--spacing);
+  }
+  .end {
+    inset-inline-end: var(--spacing);
+  }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+  .bottom-12 {
+    bottom: calc(var(--spacing) * 12);
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .-mx-px {
+    margin-inline: -1px;
+  }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
+  .size-3\\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+  .h-3\\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-4\\.5 {
+    height: calc(var(--spacing) * 4.5);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-5\\.5 {
+    height: calc(var(--spacing) * 5.5);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-\\[26rem\\] {
+    height: 26rem;
+  }
+  .h-auto {
+    height: auto;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .h-px {
+    height: 1px;
+  }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
+  .min-h-7 {
+    min-height: calc(var(--spacing) * 7);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
+  }
+  .w-3\\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
+  .w-auto {
+    width: auto;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .w-px {
+    width: 1px;
+  }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .min-w-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
+  .min-w-4\\.5 {
+    min-width: calc(var(--spacing) * 4.5);
+  }
+  .min-w-5 {
+    min-width: calc(var(--spacing) * 5);
+  }
+  .min-w-5\\.5 {
+    min-width: calc(var(--spacing) * 5.5);
+  }
+  .min-w-32 {
+    min-width: calc(var(--spacing) * 32);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .resize {
+    resize: both;
+  }
+  .scroll-py-2 {
+    scroll-padding-block: calc(var(--spacing) * 2);
+  }
+  .list-none {
+    list-style-type: none;
+  }
+  .appearance-none {
+    appearance: none;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-1\\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .self-start {
+    align-self: flex-start;
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-2xl {
+    border-radius: calc(var(--radius) * 1.8);
+  }
+  .rounded-\\[0\\.25rem\\] {
+    border-radius: 0.25rem;
+  }
+  .rounded-lg {
+    border-radius: var(--radius);
+  }
+  .rounded-md {
+    border-radius: calc(var(--radius) * 0.8);
+  }
+  .rounded-sm {
+    border-radius: calc(var(--radius) * 0.6);
+  }
+  .rounded-t-xl {
+    border-top-left-radius: calc(var(--radius) * 1.4);
+    border-top-right-radius: calc(var(--radius) * 1.4);
+  }
+  .rounded-b-\\[calc\\(var\\(--radius-2xl\\)-1px\\)\\] {
+    border-bottom-right-radius: calc(var(--radius-2xl) - 1px);
+    border-bottom-left-radius: calc(var(--radius-2xl) - 1px);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
+  .border-border {
+    border-color: var(--border);
+  }
+  .border-destructive {
+    border-color: var(--destructive);
+  }
+  .border-input {
+    border-color: var(--input);
+  }
+  .border-primary {
+    border-color: var(--primary);
+  }
+  .border-transparent {
+    border-color: transparent;
+  }
+  .bg-amber-400\\/20 {
+    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
+    }
+  }
+  .bg-background {
+    background-color: var(--background);
+  }
+  .bg-black\\/32 {
+    background-color: color-mix(in srgb, #000 32%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 32%, transparent);
+    }
+  }
+  .bg-blue-400\\/20 {
+    background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-400) 20%, transparent);
+    }
+  }
+  .bg-border {
+    background-color: var(--border);
+  }
+  .bg-cyan-400\\/20 {
+    background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-cyan-400) 20%, transparent);
+    }
+  }
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+  .bg-destructive\\/10 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+  .bg-emerald-400\\/20 {
+    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
+    }
+  }
+  .bg-fuchsia-400\\/20 {
+    background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fuchsia-400) 20%, transparent);
+    }
+  }
+  .bg-info\\/10 {
+    background-color: var(--info);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--info) 10%, transparent);
+    }
+  }
+  .bg-muted {
+    background-color: var(--muted);
+  }
+  .bg-popover {
+    background-color: var(--popover);
+  }
+  .bg-primary {
+    background-color: var(--primary);
+  }
+  .bg-rose-400\\/20 {
+    background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
+    }
+  }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
+  .bg-slate-400\\/20 {
+    background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-400) 20%, transparent);
+    }
+  }
+  .bg-success\\/10 {
+    background-color: var(--success);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--success) 10%, transparent);
+    }
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .bg-violet-400\\/20 {
+    background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-violet-400) 20%, transparent);
+    }
+  }
+  .bg-warning\\/10 {
+    background-color: var(--warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--warning) 10%, transparent);
+    }
+  }
+  .bg-clip-padding {
+    background-clip: padding-box;
+  }
+  .bg-\\[right_0\\.5rem_center\\] {
+    background-position: right 0.5rem center;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-1\\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-2\\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-3\\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-1\\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .py-\\[max\\(1rem\\,4vh\\)\\] {
+    padding-block: max(1rem, 4vh);
+  }
+  .ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+  .pe-3 {
+    padding-inline-end: calc(var(--spacing) * 3);
+  }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-mono {
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  }
+  .font-sans {
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-base\\/4\\.5 {
+    font-size: var(--text-base);
+    line-height: calc(var(--spacing) * 4.5);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\\[0\\.625rem\\] {
+    font-size: 0.625rem;
+  }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
+  }
+  .break-words {
+    overflow-wrap: break-word;
+  }
+  .whitespace-normal {
+    white-space: normal;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-amber-700 {
+    color: var(--color-amber-700);
+  }
+  .text-blue-700 {
+    color: var(--color-blue-700);
+  }
+  .text-cyan-700 {
+    color: var(--color-cyan-700);
+  }
+  .text-destructive-foreground {
+    color: var(--destructive-foreground);
+  }
+  .text-emerald-700 {
+    color: var(--color-emerald-700);
+  }
+  .text-foreground {
+    color: var(--foreground);
+  }
+  .text-fuchsia-700 {
+    color: var(--color-fuchsia-700);
+  }
+  .text-info-foreground {
+    color: var(--info-foreground);
+  }
+  .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+  .text-muted-foreground\\/70 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
+    }
+  }
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
+  .text-rose-700 {
+    color: var(--color-rose-700);
+  }
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
+  .text-slate-700 {
+    color: var(--color-slate-700);
+  }
+  .text-success-foreground {
+    color: var(--success-foreground);
+  }
+  .text-violet-700 {
+    color: var(--color-violet-700);
+  }
+  .text-warning-foreground {
+    color: var(--warning-foreground);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .line-through {
+    text-decoration-line: line-through;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+  .accent-accent {
+    accent-color: var(--accent);
+  }
+  .accent-primary {
+    accent-color: var(--primary);
+  }
+  .opacity-80 {
+    opacity: 80%;
+  }
+  .shadow-lg\\/5 {
+    --tw-shadow-alpha: 5%;
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 5%)), 0 4px 6px -4px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 5%));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xs\\/5 {
+    --tw-shadow-alpha: 5%;
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 5%));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .\\[clip-path\\:inset\\(0_1px\\)\\] {
+    clip-path: inset(0 1px);
+  }
+  .not-dark\\:bg-clip-padding {
+    &:not(*:is(.dark *)) {
+      background-clip: padding-box;
+    }
+  }
+  .group-data-hover\\:bg-amber-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
+      }
+    }
+  }
+  .group-data-hover\\:bg-blue-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent);
+      }
+    }
+  }
+  .group-data-hover\\:bg-cyan-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-cyan-400) 30%, transparent);
+      }
+    }
+  }
+  .group-data-hover\\:bg-emerald-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
+      }
+    }
+  }
+  .group-data-hover\\:bg-fuchsia-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-fuchsia-400) 30%, transparent);
+      }
+    }
+  }
+  .group-data-hover\\:bg-rose-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
+      }
+    }
+  }
+  .group-data-hover\\:bg-slate-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent);
+      }
+    }
+  }
+  .group-data-hover\\:bg-violet-400\\/30 {
+    &:is(:where(.group)[data-hover] *) {
+      background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-violet-400) 30%, transparent);
+      }
+    }
+  }
+  .placeholder\\:text-muted-foreground {
+    &::placeholder {
+      color: var(--muted-foreground);
+    }
+  }
+  .before\\:pointer-events-none {
+    &::before {
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+  }
+  .before\\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .before\\:inset-0 {
+    &::before {
+      content: var(--tw-content);
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .before\\:rounded-\\[calc\\(var\\(--radius-2xl\\)-1px\\)\\] {
+    &::before {
+      content: var(--tw-content);
+      border-radius: calc(var(--radius-2xl) - 1px);
+    }
+  }
+  .before\\:rounded-t-\\[calc\\(var\\(--radius-xl\\)-1px\\)\\] {
+    &::before {
+      content: var(--tw-content);
+      border-top-left-radius: calc(var(--radius-xl) - 1px);
+      border-top-right-radius: calc(var(--radius-xl) - 1px);
+    }
+  }
+  .before\\:bg-muted\\/72 {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--muted) 72%, transparent);
+      }
+    }
+  }
+  .before\\:shadow-\\[0_1px_--theme\\(--color-black\\/4\\%\\)\\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-shadow: 0 1px var(--tw-shadow-color, color-mix(in srgb, #000 4%, transparent));
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-shadow: 0 1px var(--tw-shadow-color, color-mix(in oklab, var(--color-black) 4%, transparent));
+      }
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-within\\:border-ring {
+    &:focus-within {
+      border-color: var(--ring);
+    }
+  }
+  .focus-within\\:bg-accent {
+    &:focus-within {
+      background-color: var(--accent);
+    }
+  }
+  .focus-within\\:text-accent-foreground {
+    &:focus-within {
+      color: var(--accent-foreground);
+    }
+  }
+  .focus-within\\:ring-\\[3px\\] {
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-within\\:ring-ring\\/30 {
+    &:focus-within {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
+      }
+    }
+  }
+  .hover\\:border-destructive\\/30 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+      }
+    }
+  }
+  .hover\\:bg-destructive\\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
+        }
+      }
+    }
+  }
+  .hover\\:bg-destructive\\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\\:bg-primary\\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\\:bg-secondary\\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--secondary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
+    }
+  }
+  .hover\\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .focus\\:bg-accent {
+    &:focus {
+      background-color: var(--accent);
+    }
+  }
+  .focus\\:text-accent-foreground {
+    &:focus {
+      color: var(--accent-foreground);
+    }
+  }
+  .focus\\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .focus-visible\\:border-ring {
+    &:focus-visible {
+      border-color: var(--ring);
+    }
+  }
+  .focus-visible\\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-visible\\:ring-\\[3px\\] {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-visible\\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+  }
+  .focus-visible\\:ring-ring\\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
+      }
+    }
+  }
+  .focus-visible\\:ring-offset-1 {
+    &:focus-visible {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus-visible\\:ring-offset-background {
+    &:focus-visible {
+      --tw-ring-offset-color: var(--background);
+    }
+  }
+  .disabled\\:pointer-events-none {
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+  .disabled\\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\\:opacity-60 {
+    &:disabled {
+      opacity: 60%;
+    }
+  }
+  .has-disabled\\:opacity-60 {
+    &:has(*:disabled) {
+      opacity: 60%;
+    }
+  }
+  .aria-invalid\\:border-destructive\\/40 {
+    &[aria-invalid="true"] {
+      border-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+      }
+    }
+  }
+  .aria-invalid\\:focus-visible\\:ring-destructive\\/20 {
+    &[aria-invalid="true"] {
+      &:focus-visible {
+        --tw-ring-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        }
+      }
+    }
+  }
+  .data-\\[disabled\\]\\:pointer-events-none {
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+  .data-\\[disabled\\]\\:opacity-60 {
+    &[data-disabled] {
+      opacity: 60%;
+    }
+  }
+  .data-\\[disabled\\]\\:opacity-64 {
+    &[data-disabled] {
+      opacity: 64%;
+    }
+  }
+  .data-\\[highlighted\\]\\:bg-accent {
+    &[data-highlighted] {
+      background-color: var(--accent);
+    }
+  }
+  .data-\\[highlighted\\]\\:text-accent-foreground {
+    &[data-highlighted] {
+      color: var(--accent-foreground);
+    }
+  }
+  .sm\\:min-h-7 {
+    @media (width >= 40rem) {
+      min-height: calc(var(--spacing) * 7);
+    }
+  }
+  .sm\\:py-\\[10vh\\] {
+    @media (width >= 40rem) {
+      padding-block: 10vh;
+    }
+  }
+  .sm\\:text-sm {
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .sm\\:text-sm\\/4 {
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: calc(var(--spacing) * 4);
+    }
+  }
+  .dark\\:bg-amber-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-blue-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-cyan-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-cyan-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-destructive\\/20 {
+    &:is(.dark *) {
+      background-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-emerald-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-fuchsia-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-fuchsia-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-info\\/20 {
+    &:is(.dark *) {
+      background-color: var(--info);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--info) 20%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-input\\/30 {
+    &:is(.dark *) {
+      background-color: var(--input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-rose-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-rose-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-slate-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-slate-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-success\\/20 {
+    &:is(.dark *) {
+      background-color: var(--success);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--success) 20%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-violet-400\\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-violet-400) 10%, transparent);
+      }
+    }
+  }
+  .dark\\:bg-warning\\/20 {
+    &:is(.dark *) {
+      background-color: var(--warning);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--warning) 20%, transparent);
+      }
+    }
+  }
+  .dark\\:text-amber-300 {
+    &:is(.dark *) {
+      color: var(--color-amber-300);
+    }
+  }
+  .dark\\:text-blue-300 {
+    &:is(.dark *) {
+      color: var(--color-blue-300);
+    }
+  }
+  .dark\\:text-cyan-300 {
+    &:is(.dark *) {
+      color: var(--color-cyan-300);
+    }
+  }
+  .dark\\:text-emerald-300 {
+    &:is(.dark *) {
+      color: var(--color-emerald-300);
+    }
+  }
+  .dark\\:text-fuchsia-300 {
+    &:is(.dark *) {
+      color: var(--color-fuchsia-300);
+    }
+  }
+  .dark\\:text-rose-300 {
+    &:is(.dark *) {
+      color: var(--color-rose-300);
+    }
+  }
+  .dark\\:text-slate-300 {
+    &:is(.dark *) {
+      color: var(--color-slate-300);
+    }
+  }
+  .dark\\:text-violet-300 {
+    &:is(.dark *) {
+      color: var(--color-violet-300);
+    }
+  }
+  .dark\\:group-data-hover\\:bg-amber-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:group-data-hover\\:bg-blue-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-blue-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:group-data-hover\\:bg-cyan-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-cyan-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:group-data-hover\\:bg-emerald-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:group-data-hover\\:bg-fuchsia-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(74% 0.238 322.16) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-fuchsia-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:group-data-hover\\:bg-rose-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:group-data-hover\\:bg-slate-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-slate-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:group-data-hover\\:bg-violet-400\\/15 {
+    &:is(.dark *) {
+      &:is(:where(.group)[data-hover] *) {
+        background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-violet-400) 15%, transparent);
+        }
+      }
+    }
+  }
+  .dark\\:before\\:shadow-\\[0_-1px_--theme\\(--color-white\\/6\\%\\)\\] {
+    &:is(.dark *) {
+      &::before {
+        content: var(--tw-content);
+        --tw-shadow: 0 -1px var(--tw-shadow-color, color-mix(in srgb, #fff 6%, transparent));
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-shadow: 0 -1px var(--tw-shadow-color, color-mix(in oklab, var(--color-white) 6%, transparent));
+        }
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .\\[\\&_svg\\]\\:pointer-events-none {
+    & svg {
+      pointer-events: none;
+    }
+  }
+  .\\[\\&_svg\\]\\:shrink-0 {
+    & svg {
+      flex-shrink: 0;
+    }
+  }
+  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'opacity-\\'\\]\\)\\]\\:opacity-80 {
+    & svg:not([class*='opacity-']) {
+      opacity: 80%;
+    }
+  }
+  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3 {
+    & svg:not([class*='size-']) {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+    }
+  }
+  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {
+    & svg:not([class*='size-']) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
+}
+@layer base {
+  *, ::after, ::before {
+    border-color: var(--color-border, currentColor);
+  }
+}
+@layer components {
+  .uidex-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted-foreground) transparent;
+    @supports (color: color-mix(in lab, red, red)) {
+      scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent;
+    }
+  }
+  .uidex-scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  .uidex-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .uidex-scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--muted-foreground) 35%, transparent );
+    }
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  .uidex-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix( in srgb, var(--muted-foreground) 60%, transparent );
+    }
+  }
+  .uidex-scrollbar::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+:where(:host, :root) {
+  --background: color-mix(
+    in srgb,
+    oklch(14.5% 0 0) 95%,
+    #fff
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --background: color-mix(
+    in srgb,
+    var(--color-neutral-950) 95%,
+    var(--color-white)
+  );
+  }
+  --foreground: var(--color-neutral-100);
+  --card: var(--background);
+  @supports (color: color-mix(in lab, red, red)) {
+    --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
+  }
+  --card-foreground: var(--color-neutral-100);
+  --popover: var(--background);
+  @supports (color: color-mix(in lab, red, red)) {
+    --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
+  }
+  --popover-foreground: var(--color-neutral-100);
+  --primary: var(--color-neutral-100);
+  --primary-foreground: var(--color-neutral-800);
+  --secondary: color-mix(in srgb, #fff 4%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --secondary: color-mix(in srgb, var(--color-white) 4%, transparent);
+  }
+  --secondary-foreground: var(--color-neutral-100);
+  --muted: color-mix(in srgb, #fff 4%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --muted: color-mix(in srgb, var(--color-white) 4%, transparent);
+  }
+  --muted-foreground: color-mix(
+    in srgb,
+    oklch(55.6% 0 0) 90%,
+    #fff
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --muted-foreground: color-mix(
+    in srgb,
+    var(--color-neutral-500) 90%,
+    var(--color-white)
+  );
+  }
+  --accent: color-mix(in srgb, #fff 4%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --accent: color-mix(in srgb, var(--color-white) 4%, transparent);
+  }
+  --accent-foreground: var(--color-neutral-100);
+  --destructive: color-mix(
+    in srgb,
+    oklch(63.7% 0.237 25.331) 90%,
+    #fff
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --destructive: color-mix(
+    in srgb,
+    var(--color-red-500) 90%,
+    var(--color-white)
+  );
+  }
+  --destructive-foreground: var(--color-red-400);
+  --border: color-mix(in srgb, #fff 6%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --border: color-mix(in srgb, var(--color-white) 6%, transparent);
+  }
+  --input: color-mix(in srgb, #fff 8%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --input: color-mix(in srgb, var(--color-white) 8%, transparent);
+  }
+  --ring: var(--color-neutral-500);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-400);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-400);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-400);
+  --radius: 0.625rem;
+}
+:host(.light) {
+  --background: var(--color-white);
+  --foreground: var(--color-neutral-800);
+  --card: var(--color-white);
+  --card-foreground: var(--color-neutral-800);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-neutral-800);
+  --primary: var(--color-neutral-800);
+  --primary-foreground: var(--color-neutral-50);
+  --secondary: color-mix(in srgb, #000 4%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --secondary: color-mix(in srgb, var(--color-black) 4%, transparent);
+  }
+  --secondary-foreground: var(--color-neutral-800);
+  --muted: color-mix(in srgb, #000 4%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --muted: color-mix(in srgb, var(--color-black) 4%, transparent);
+  }
+  --muted-foreground: color-mix(
+    in srgb,
+    oklch(55.6% 0 0) 90%,
+    #000
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --muted-foreground: color-mix(
+    in srgb,
+    var(--color-neutral-500) 90%,
+    var(--color-black)
+  );
+  }
+  --accent: color-mix(in srgb, #000 4%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --accent: color-mix(in srgb, var(--color-black) 4%, transparent);
+  }
+  --accent-foreground: var(--color-neutral-800);
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-red-700);
+  --border: color-mix(in srgb, #000 8%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --border: color-mix(in srgb, var(--color-black) 8%, transparent);
+  }
+  --input: color-mix(in srgb, #000 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --input: color-mix(in srgb, var(--color-black) 10%, transparent);
+  }
+  --ring: var(--color-neutral-400);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-700);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-700);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-700);
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+    }
+  }
+}
+`;
+
+// src/surface/constants.ts
+var SURFACE_HOST_CLASS = "uidex-surface-host";
+var SURFACE_CONTAINER_CLASS = "uidex-container";
+var Z_BASE = 2147483644;
+var Z_OVERLAY = 2147483645;
+var Z_CHROME = 2147483646;
+var SURFACE_IGNORE_SELECTOR = `.${SURFACE_HOST_CLASS},.${SURFACE_CONTAINER_CLASS}`;
+var UIDEX_ATTR_TO_KIND = [
+  ["data-uidex", "element"],
+  ["data-uidex-region", "region"],
+  ["data-uidex-widget", "widget"],
+  ["data-uidex-primitive", "primitive"]
+];
+
+// src/surface/host.ts
+function createSurfaceHost(options) {
+  const { mount, stylesheets = [], initialTheme = "light" } = options;
+  const hostEl = document.createElement("div");
+  hostEl.classList.add(SURFACE_HOST_CLASS);
+  hostEl.style.position = "fixed";
+  hostEl.style.inset = "0";
+  hostEl.style.pointerEvents = "none";
+  hostEl.style.zIndex = String(Z_BASE);
+  hostEl.classList.add(initialTheme);
+  const shadow = hostEl.attachShadow({ mode: "open" });
+  applyStylesheets(shadow, [tailwind_built_default, ...stylesheets]);
+  const chromeEl = document.createElement("div");
+  chromeEl.classList.add("uidex-chrome");
+  chromeEl.style.pointerEvents = "auto";
+  shadow.appendChild(chromeEl);
+  mount.appendChild(hostEl);
+  return {
+    hostEl,
+    shadowRoot: shadow,
+    chromeEl,
+    applyTheme(theme) {
+      hostEl.classList.remove("light", "dark");
+      hostEl.classList.add(theme);
+    },
+    destroy() {
+      hostEl.remove();
+    }
+  };
+}
+function applyStylesheets(shadow, stylesheets) {
+  if (stylesheets.length === 0) return;
+  const adoptable = supportsConstructableStylesheets(shadow);
+  if (adoptable) {
+    const sheets = [];
+    for (const css of stylesheets) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(css);
+      sheets.push(sheet);
+    }
+    shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, ...sheets];
+    return;
+  }
+  for (const css of stylesheets) {
+    const style = document.createElement("style");
+    style.textContent = css;
+    shadow.appendChild(style);
+  }
+}
+function supportsConstructableStylesheets(shadow) {
+  if (typeof CSSStyleSheet === "undefined") return false;
+  if (!("adoptedStyleSheets" in shadow)) return false;
+  try {
+    const probe = new CSSStyleSheet();
+    probe.replaceSync("");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/surface/cursor-tooltip.ts
+import { createElement as createLucideElement } from "lucide";
+var DEFAULT_TOOLTIP_COLOR = "#34d399";
+var TOOLTIP_OFFSET = 16;
+var ARROW_SIZE = 5;
+function createCursorTooltip(deps) {
+  const { container } = deps;
+  const el = document.createElement("div");
+  el.setAttribute("data-uidex-cursor-tooltip", "");
+  el.style.position = "fixed";
+  el.style.pointerEvents = "none";
+  el.style.zIndex = String(Z_CHROME);
+  el.style.padding = "4px 8px";
+  el.style.fontSize = "12px";
+  el.style.fontFamily = "ui-sans-serif, system-ui, sans-serif";
+  el.style.borderRadius = "6px";
+  el.style.background = DEFAULT_TOOLTIP_COLOR;
+  el.style.color = "#0a0a0a";
+  el.style.display = "none";
+  el.style.whiteSpace = "nowrap";
+  el.style.transform = "translate(-50%, 0)";
+  el.style.alignItems = "center";
+  el.style.gap = "6px";
+  const arrow = document.createElement("div");
+  arrow.setAttribute("data-uidex-cursor-tooltip-arrow", "");
+  arrow.style.position = "absolute";
+  arrow.style.left = "50%";
+  arrow.style.bottom = "100%";
+  arrow.style.width = "0";
+  arrow.style.height = "0";
+  arrow.style.transform = "translate(-50%, 0)";
+  arrow.style.borderLeft = `${ARROW_SIZE}px solid transparent`;
+  arrow.style.borderRight = `${ARROW_SIZE}px solid transparent`;
+  arrow.style.borderBottom = `${ARROW_SIZE}px solid ${DEFAULT_TOOLTIP_COLOR}`;
+  el.appendChild(arrow);
+  const body = document.createElement("span");
+  body.setAttribute("data-uidex-cursor-tooltip-body", "");
+  body.style.display = "inline-flex";
+  body.style.alignItems = "center";
+  body.style.gap = "6px";
+  el.appendChild(body);
+  container.appendChild(el);
+  let currentContent = null;
+  let currentCursor = null;
+  const applyColor = (color) => {
+    el.style.background = color;
+    arrow.style.borderBottom = `${ARROW_SIZE}px solid ${color}`;
+  };
+  const renderBody = () => {
+    body.replaceChildren();
+    if (typeof currentContent === "string") {
+      applyColor(DEFAULT_TOOLTIP_COLOR);
+      body.append(document.createTextNode(currentContent));
+      return;
+    }
+    if (!currentContent) return;
+    const { entity, node } = currentContent;
+    const style = KIND_STYLE[entity.kind];
+    applyColor(style?.color ?? DEFAULT_TOOLTIP_COLOR);
+    if (style) {
+      const svg = createLucideElement(style.icon);
+      svg.setAttribute("aria-hidden", "true");
+      svg.setAttribute("width", "14");
+      svg.setAttribute("height", "14");
+      svg.style.display = "block";
+      body.append(svg);
+    }
+    const label = displayName(entity, node);
+    body.append(document.createTextNode(label));
+    const rawId = entity.kind === "route" ? entity.path : entity.id;
+    if (rawId && rawId !== label) {
+      const subordinate = document.createElement("span");
+      subordinate.setAttribute("data-uidex-cursor-tooltip-id", "");
+      subordinate.style.opacity = "0.65";
+      subordinate.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, monospace";
+      subordinate.style.fontSize = "11px";
+      subordinate.textContent = rawId;
+      body.append(subordinate);
+    }
+  };
+  const render = () => {
+    if (!currentContent || !currentCursor) {
+      el.style.display = "none";
+      return;
+    }
+    renderBody();
+    el.style.display = "inline-flex";
+    el.style.left = `${currentCursor.x}px`;
+    el.style.top = `${currentCursor.y + TOOLTIP_OFFSET}px`;
+  };
+  return {
+    update(content, cursor) {
+      currentContent = content;
+      currentCursor = cursor;
+      render();
+    },
+    destroy() {
+      el.remove();
+      currentContent = null;
+      currentCursor = null;
+    }
+  };
+}
+
+// src/surface/inspector.ts
+function entityForRef(ref, registry) {
+  if (registry) {
+    const found = registry.get(ref.kind, ref.id);
+    if (found) return found;
+  }
+  if (ref.kind === "route") return { kind: "route", path: ref.id, page: ref.id };
+  if (ref.kind === "flow") {
+    return { kind: "flow", id: ref.id, loc: { file: "" }, touches: [] };
+  }
+  return { kind: ref.kind, id: ref.id };
+}
+function defaultResolveMatch(target, registry) {
+  if (target.closest(SURFACE_IGNORE_SELECTOR)) return null;
+  let node = target;
+  while (node) {
+    if (node instanceof HTMLElement) {
+      for (const [attr, kind] of UIDEX_ATTR_TO_KIND) {
+        const id = node.getAttribute(attr);
+        if (id) {
+          const ref = { kind, id };
+          const entity = entityForRef(ref, registry);
+          return {
+            element: node,
+            ref,
+            entity,
+            label: displayName(entity, node)
+          };
+        }
+      }
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function createInspector(options) {
+  const {
+    session,
+    registry,
+    resolve = (target) => defaultResolveMatch(target, registry),
+    onHover,
+    onSelect
+  } = options;
+  let mounted = false;
+  let currentEl = null;
+  let cursorStyleEl = null;
+  const onMouseMove = (e) => {
+    if (!(e.target instanceof Element)) return;
+    const match = resolve(e.target);
+    const cursor = { x: e.clientX, y: e.clientY };
+    if (match) {
+      if (match.element !== currentEl) {
+        currentEl = match.element;
+        session.getState().actions.hover(match.ref);
+      }
+      onHover?.(match, cursor);
+    } else if (currentEl) {
+      currentEl = null;
+      session.getState().actions.hover(null);
+      onHover?.(null, cursor);
+    }
+  };
+  const onClick = (e) => {
+    if (!(e.target instanceof Element)) return;
+    if (e.target.closest(SURFACE_IGNORE_SELECTOR)) return;
+    const match = resolve(e.target);
+    if (!match) return;
+    e.preventDefault();
+    e.stopPropagation();
+    session.getState().actions.select(match.ref);
+    onSelect?.(match, { x: e.clientX, y: e.clientY });
+  };
+  return {
+    mount() {
+      if (mounted) return;
+      mounted = true;
+      if (typeof document !== "undefined") {
+        cursorStyleEl = document.createElement("style");
+        cursorStyleEl.setAttribute("data-uidex-inspector-cursor", "");
+        cursorStyleEl.textContent = "html, body, body * { cursor: crosshair !important; }";
+        document.head.appendChild(cursorStyleEl);
+      }
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("click", onClick, true);
+    },
+    destroy() {
+      if (!mounted) return;
+      mounted = false;
+      currentEl = null;
+      if (cursorStyleEl) {
+        cursorStyleEl.remove();
+        cursorStyleEl = null;
+      }
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("click", onClick, true);
+      session.getState().actions.hover(null);
+      onHover?.(null, null);
+    }
+  };
+}
+
+// src/surface/menu-bar.ts
+function createMenuBar(options) {
+  const {
+    container,
+    session,
+    initialCorner = "bottom-right",
+    appTitle
+  } = options;
+  const root = document.createElement("div");
+  root.setAttribute("data-uidex-menubar", "");
+  root.setAttribute("role", "toolbar");
+  Object.assign(root.style, {
+    position: "fixed",
+    zIndex: String(Z_CHROME),
+    pointerEvents: "auto",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px",
+    borderRadius: "8px",
+    background: "rgba(20, 20, 20, 0.92)",
+    color: "#f5f5f5",
+    fontFamily: "ui-sans-serif, system-ui, sans-serif",
+    fontSize: "12px",
+    userSelect: "none",
+    cursor: "grab"
+  });
+  const buttonStyle = {
+    background: "rgba(255,255,255,0.08)",
+    color: "inherit",
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: "6px",
+    padding: "4px 8px",
+    font: "inherit",
+    cursor: "pointer"
+  };
+  const buttonActiveStyle = {
+    background: "rgba(120, 180, 255, 0.28)",
+    borderColor: "rgba(120, 180, 255, 0.55)"
+  };
+  if (appTitle) {
+    const titleEl = document.createElement("span");
+    titleEl.setAttribute("data-uidex-menubar-title", "");
+    titleEl.textContent = appTitle;
+    Object.assign(titleEl.style, {
+      padding: "0 6px 0 4px",
+      fontWeight: "600",
+      letterSpacing: "0.01em",
+      whiteSpace: "nowrap"
+    });
+    root.appendChild(titleEl);
+  }
+  const highlightDot = document.createElement("span");
+  highlightDot.setAttribute("data-uidex-menubar-highlight-indicator", "");
+  highlightDot.setAttribute("aria-label", "Element highlighted (press Esc)");
+  highlightDot.setAttribute("role", "status");
+  Object.assign(highlightDot.style, {
+    display: "none",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    margin: "0 2px 0 4px",
+    background: "rgba(120, 180, 255, 0.85)",
+    boxShadow: "0 0 6px rgba(120, 180, 255, 0.75)",
+    flex: "0 0 auto"
+  });
+  root.appendChild(highlightDot);
+  const inspectBtn = document.createElement("button");
+  inspectBtn.type = "button";
+  inspectBtn.setAttribute("data-uidex-menubar-inspect", "");
+  inspectBtn.textContent = "Inspect";
+  Object.assign(inspectBtn.style, buttonStyle);
+  inspectBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    session.send({ type: "TOGGLE_INSPECTOR" });
+  });
+  root.appendChild(inspectBtn);
+  const paletteBtn = document.createElement("button");
+  paletteBtn.type = "button";
+  paletteBtn.setAttribute("data-uidex-menubar-palette", "");
+  paletteBtn.textContent = "\u2318K";
+  Object.assign(paletteBtn.style, buttonStyle);
+  paletteBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (session.getState().stack.length > 0) {
+      session.send({ type: "CLOSE" });
+    } else {
+      session.send({ type: "OPEN_PALETTE" });
+    }
+  });
+  root.appendChild(paletteBtn);
+  container.appendChild(root);
+  const syncButtonStates = () => {
+    const state = session.getState();
+    inspectBtn.setAttribute(
+      "data-uidex-menubar-inspect-active",
+      state.inspectorActive ? "true" : "false"
+    );
+    Object.assign(
+      inspectBtn.style,
+      state.inspectorActive ? buttonActiveStyle : buttonStyle
+    );
+    const top = state.stack[state.stack.length - 1] ?? null;
+    const paletteOpen = top?.id === "command-palette";
+    paletteBtn.setAttribute(
+      "data-uidex-menubar-palette-active",
+      paletteOpen ? "true" : "false"
+    );
+    Object.assign(
+      paletteBtn.style,
+      paletteOpen ? buttonActiveStyle : buttonStyle
+    );
+    const highlightActive = state.pinnedHighlight !== null;
+    highlightDot.setAttribute(
+      "data-uidex-menubar-highlight-active",
+      highlightActive ? "true" : "false"
+    );
+    highlightDot.style.display = highlightActive ? "inline-block" : "none";
+  };
+  syncButtonStates();
+  const unsubscribeSession = session.subscribe(syncButtonStates);
+  let corner = initialCorner;
+  const applyCorner = () => {
+    const offset = "16px";
+    root.style.top = corner.startsWith("top") ? offset : "";
+    root.style.bottom = corner.startsWith("bottom") ? offset : "";
+    root.style.left = corner.endsWith("left") ? offset : "";
+    root.style.right = corner.endsWith("right") ? offset : "";
+    root.setAttribute("data-uidex-menubar-corner", corner);
+  };
+  applyCorner();
+  let dragging = false;
+  let startX = 0;
+  let startY = 0;
+  let originLeft = 0;
+  let originTop = 0;
+  const onMouseMove = (e) => {
+    if (!dragging) return;
+    root.style.left = `${originLeft + e.clientX - startX}px`;
+    root.style.top = `${originTop + e.clientY - startY}px`;
+  };
+  const onMouseUp = (e) => {
+    if (!dragging) return;
+    dragging = false;
+    root.style.cursor = "grab";
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    snapToNearest(e.clientX, e.clientY);
+  };
+  const onMouseDown = (e) => {
+    if (e.target instanceof HTMLElement && e.target.closest("button")) return;
+    const rect = root.getBoundingClientRect();
+    dragging = true;
+    originLeft = rect.left;
+    originTop = rect.top;
+    startX = e.clientX;
+    startY = e.clientY;
+    root.style.cursor = "grabbing";
+    Object.assign(root.style, {
+      top: `${originTop}px`,
+      left: `${originLeft}px`,
+      bottom: "",
+      right: ""
+    });
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    e.preventDefault();
+  };
+  root.addEventListener("mousedown", onMouseDown);
+  function snapTo(next) {
+    corner = next;
+    applyCorner();
+  }
+  function snapToNearest(x, y) {
+    const horizontal = x / (window.innerWidth || 1) < 0.5 ? "left" : "right";
+    const vertical = y / (window.innerHeight || 1) < 0.5 ? "top" : "bottom";
+    snapTo(`${vertical}-${horizontal}`);
+  }
+  return {
+    destroy() {
+      unsubscribeSession();
+      root.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      root.remove();
+    },
+    snapTo,
+    snapToNearest,
+    get corner() {
+      return corner;
+    },
+    get root() {
+      return root;
+    }
+  };
+}
+
+// src/surface/overlay.ts
+var DEFAULT_COLOR = "#34d399";
+var DEFAULT_BORDER_WIDTH = 2;
+var DEFAULT_FILL_OPACITY = 0.08;
+function createOverlay(deps) {
+  const { container } = deps;
+  const box = document.createElement("div");
+  box.setAttribute("data-uidex-overlay", "");
+  box.style.position = "fixed";
+  box.style.pointerEvents = "none";
+  box.style.zIndex = String(Z_OVERLAY);
+  box.style.boxSizing = "border-box";
+  box.style.display = "none";
+  const label = document.createElement("div");
+  label.setAttribute("data-uidex-overlay-label", "");
+  label.style.position = "absolute";
+  label.style.left = "0";
+  label.style.bottom = "100%";
+  label.style.padding = "2px 6px";
+  label.style.fontSize = "11px";
+  label.style.fontFamily = "ui-sans-serif, system-ui, sans-serif";
+  label.style.lineHeight = "1";
+  label.style.whiteSpace = "nowrap";
+  label.style.color = "#0a0a0a";
+  label.style.display = "none";
+  box.appendChild(label);
+  container.appendChild(box);
+  let target = null;
+  let opts = {
+    label: "",
+    color: DEFAULT_COLOR,
+    padding: 0,
+    borderStyle: "solid",
+    borderWidth: DEFAULT_BORDER_WIDTH,
+    fillOpacity: DEFAULT_FILL_OPACITY
+  };
+  let rafId = null;
+  let attached = false;
+  const schedule = () => {
+    if (rafId !== null) return;
+    rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
+      rafId = null;
+      updatePosition();
+    }) : setTimeout(() => {
+      rafId = null;
+      updatePosition();
+    }, 0);
+  };
+  const cancelSchedule = () => {
+    if (rafId === null) return;
+    if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(rafId);
+    else clearTimeout(rafId);
+    rafId = null;
+  };
+  const onScroll = () => schedule();
+  const onResize = () => schedule();
+  const attach = () => {
+    if (attached) return;
+    attached = true;
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+  };
+  const detach = () => {
+    if (!attached) return;
+    attached = false;
+    window.removeEventListener("resize", onResize);
+    window.removeEventListener("scroll", onScroll, {
+      capture: true
+    });
+    cancelSchedule();
+  };
+  function updatePosition() {
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    const pad = opts.padding;
+    box.style.top = `${rect.top - pad}px`;
+    box.style.left = `${rect.left - pad}px`;
+    box.style.width = `${rect.width + pad * 2}px`;
+    box.style.height = `${rect.height + pad * 2}px`;
+  }
+  function applyStyles() {
+    box.style.borderColor = opts.color;
+    box.style.borderStyle = opts.borderStyle;
+    box.style.borderWidth = `${opts.borderWidth}px`;
+    box.style.backgroundColor = rgbaFromColor(opts.color, opts.fillOpacity);
+    if (opts.label) {
+      label.textContent = opts.label;
+      label.style.backgroundColor = opts.color;
+      label.style.display = "";
+    } else {
+      label.textContent = "";
+      label.style.display = "none";
+    }
+  }
+  return {
+    show(nextTarget, showOpts) {
+      target = nextTarget;
+      opts = {
+        label: showOpts?.label ?? "",
+        color: showOpts?.color ?? DEFAULT_COLOR,
+        padding: showOpts?.padding ?? 0,
+        borderStyle: showOpts?.borderStyle ?? "solid",
+        borderWidth: showOpts?.borderWidth ?? DEFAULT_BORDER_WIDTH,
+        fillOpacity: showOpts?.fillOpacity ?? DEFAULT_FILL_OPACITY
+      };
+      applyStyles();
+      updatePosition();
+      box.style.display = "";
+      attach();
+    },
+    hide() {
+      target = null;
+      box.style.display = "none";
+      detach();
+    },
+    destroy() {
+      detach();
+      box.remove();
+      target = null;
+    },
+    get isVisible() {
+      return target !== null;
+    }
+  };
+}
+function rgbaFromColor(color, alpha) {
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const bigint = parseInt(
+      hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex,
+      16
+    );
+    const r = bigint >> 16 & 255;
+    const g = bigint >> 8 & 255;
+    const b = bigint & 255;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return color;
+}
+
+// src/surface/theme.ts
+function createThemeDetector(deps) {
+  const { session, onResolve } = deps;
+  let resolved = session.getState().resolvedTheme;
+  const detect = (preference) => {
+    if (preference !== "auto") return preference;
+    const htmlToken = readHtmlClassToken();
+    if (htmlToken) return htmlToken;
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+  };
+  const push = () => {
+    const preference = session.getState().theme;
+    const next = detect(preference);
+    if (next === resolved) return;
+    resolved = next;
+    session.getState().actions.setTheme(preference, next);
+    onResolve?.(next);
+  };
+  push();
+  let mql = null;
+  const mqlListener = () => push();
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    mql = window.matchMedia("(prefers-color-scheme: dark)");
+    if (typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", mqlListener);
+    } else if (typeof mql.addListener === "function") {
+      mql.addListener(mqlListener);
+    }
+  }
+  let observer = null;
+  if (typeof MutationObserver !== "undefined" && typeof document !== "undefined") {
+    observer = new MutationObserver(() => push());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+  }
+  const unsubscribe = session.subscribe((state, prev) => {
+    if (state.theme !== prev.theme) push();
+  });
+  return {
+    destroy() {
+      unsubscribe();
+      if (mql) {
+        if (typeof mql.removeEventListener === "function") {
+          mql.removeEventListener("change", mqlListener);
+        } else if (typeof mql.removeListener === "function") {
+          mql.removeListener(mqlListener);
+        }
+      }
+      observer?.disconnect();
+    },
+    get resolved() {
+      return resolved;
+    }
+  };
+}
+function readHtmlClassToken() {
+  if (typeof document === "undefined") return null;
+  const root = document.documentElement;
+  if (!root) return null;
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+  return null;
+}
+
+// src/surface/shell.ts
+function createSurfaceShell(options) {
+  const cleanup = createCleanupStack();
+  const host = createSurfaceHost({
+    mount: options.mount,
+    stylesheets: options.stylesheets,
+    initialTheme: options.session.getState().resolvedTheme
+  });
+  cleanup.add(host);
+  const themeDetector = createThemeDetector({
+    session: options.session,
+    onResolve: (theme) => host.applyTheme(theme)
+  });
+  cleanup.add(themeDetector);
+  const overlay = createOverlay({ container: host.chromeEl });
+  cleanup.add(overlay);
+  const tooltip = createCursorTooltip({
+    container: host.chromeEl,
+    session: options.session
+  });
+  cleanup.add(tooltip);
+  const afterHover = options.inspector?.onAfterHover;
+  const inspector = createInspector({
+    session: options.session,
+    registry: options.registry,
+    onSelect: options.inspector?.onSelect,
+    onHover: (match, cursor) => {
+      if (!match) {
+        overlay.hide();
+        tooltip.update(null, cursor);
+      } else {
+        overlay.show(match.element, {
+          color: KIND_STYLE[match.ref.kind].color
+        });
+        tooltip.update({ entity: match.entity, node: match.element }, cursor);
+      }
+      afterHover?.(match, cursor);
+    }
+  });
+  cleanup.add(inspector);
+  const menuBar = createMenuBar({
+    container: host.chromeEl,
+    session: options.session,
+    initialCorner: options.initialCorner,
+    appTitle: options.appTitle
+  });
+  cleanup.add(menuBar);
+  return {
+    host,
+    overlay,
+    tooltip,
+    inspector,
+    menuBar,
+    themeDetector,
+    cleanup,
+    destroy: cleanup.drain
+  };
+}
+
+// src/headless/index.ts
+function createHeadless(options = {}) {
+  const registry = createRegistry();
+  const session = createSession({
+    theme: options.theme,
+    resolvedTheme: options.resolvedTheme
+  });
+  const mountCleanup = createCleanupStack();
+  let shadowRoot = null;
+  let shell = null;
+  let mounted = false;
+  const overlayApi = {
+    show(target, opts) {
+      shell?.overlay.show(target, opts);
+    },
+    hide() {
+      shell?.overlay.hide();
+    },
+    get isVisible() {
+      return shell?.overlay.isVisible ?? false;
+    }
+  };
+  const inspectorApi = {
+    start() {
+    },
+    stop() {
+    },
+    get isActive() {
+      return shell !== null;
+    }
+  };
+  function mount(target) {
+    if (mounted) return;
+    const mountTarget = target ?? (typeof document !== "undefined" ? document.body : null);
+    if (!mountTarget) {
+      throw new Error("createHeadless: no mount target available");
+    }
+    shell = createSurfaceShell({
+      mount: mountTarget,
+      registry,
+      session,
+      stylesheets: options.stylesheets,
+      initialCorner: options.initialCorner,
+      appTitle: options.appTitle
+    });
+    shadowRoot = shell.host.shadowRoot;
+    shell.inspector.mount();
+    mountCleanup.add(shell);
+    mounted = true;
+  }
+  function unmount() {
+    if (!mounted) return;
+    mountCleanup.drain();
+    shell = null;
+    shadowRoot = null;
+    mounted = false;
+  }
+  return {
+    mount,
+    unmount,
+    registry,
+    session,
+    overlay: overlayApi,
+    inspector: inspectorApi,
+    get shadowRoot() {
+      return shadowRoot;
+    }
+  };
+}
+export {
+  createHeadless
+};
+//# sourceMappingURL=index.js.map