@ggui-ai/dev-stack 0.7.0 → 0.9.0

package/dist/hub-preview/client.js

@@ -63,26 +63,26 @@ var require_react_production = __commonJS({
     };
     var assign = Object.assign;
     var emptyObject = {};
-    function Component2(props, context, updater) {
+    function Component(props, context, updater) {
       this.props = props;
       this.context = context;
       this.refs = emptyObject;
       this.updater = updater || ReactNoopUpdateQueue;
     }
-    Component2.prototype.isReactComponent = {};
-    Component2.prototype.setState = function(partialState, callback) {
+    Component.prototype.isReactComponent = {};
+    Component.prototype.setState = function(partialState, callback) {
       if ("object" !== typeof partialState && "function" !== typeof partialState && null != partialState)
         throw Error(
           "takes an object of state variables to update or a function which returns an object of state variables."
         );
       this.updater.enqueueSetState(this, partialState, callback, "setState");
     };
-    Component2.prototype.forceUpdate = function(callback) {
+    Component.prototype.forceUpdate = function(callback) {
       this.updater.enqueueForceUpdate(this, callback, "forceUpdate");
     };
     function ComponentDummy() {
     }
-    ComponentDummy.prototype = Component2.prototype;
+    ComponentDummy.prototype = Component.prototype;
     function PureComponent(props, context, updater) {
       this.props = props;
       this.context = context;
@@ -91,7 +91,7 @@ var require_react_production = __commonJS({
     }
     var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();
     pureComponentPrototype.constructor = PureComponent;
-    assign(pureComponentPrototype, Component2.prototype);
+    assign(pureComponentPrototype, Component.prototype);
     pureComponentPrototype.isPureReactComponent = true;
     var isArrayImpl = Array.isArray;
     function noop() {
@@ -296,7 +296,7 @@ var require_react_production = __commonJS({
     };
     exports.Activity = REACT_ACTIVITY_TYPE;
     exports.Children = Children;
-    exports.Component = Component2;
+    exports.Component = Component;
     exports.Fragment = REACT_FRAGMENT_TYPE;
     exports.Profiler = REACT_PROFILER_TYPE;
     exports.PureComponent = PureComponent;
@@ -2785,9 +2785,9 @@ var require_react_dom_client_production = __commonJS({
     function createFiberImplClass(tag, pendingProps, key, mode) {
       return new FiberNode(tag, pendingProps, key, mode);
     }
-    function shouldConstruct(Component2) {
-      Component2 = Component2.prototype;
-      return !(!Component2 || !Component2.isReactComponent);
+    function shouldConstruct(Component) {
+      Component = Component.prototype;
+      return !(!Component || !Component.isReactComponent);
     }
     function createWorkInProgress(current, pendingProps) {
       var workInProgress2 = current.alternate;
@@ -4157,7 +4157,7 @@ var require_react_dom_client_production = __commonJS({
         if (!objectIs(nextDeps[i], prevDeps[i])) return false;
       return true;
     }
-    function renderWithHooks(current, workInProgress2, Component2, props, secondArg, nextRenderLanes) {
+    function renderWithHooks(current, workInProgress2, Component, props, secondArg, nextRenderLanes) {
       renderLanes = nextRenderLanes;
       currentlyRenderingFiber = workInProgress2;
       workInProgress2.memoizedState = null;
@@ -4165,11 +4165,11 @@ var require_react_dom_client_production = __commonJS({
       workInProgress2.lanes = 0;
       ReactSharedInternals.H = null === current || null === current.memoizedState ? HooksDispatcherOnMount : HooksDispatcherOnUpdate;
       shouldDoubleInvokeUserFnsInHooksDEV = false;
-      nextRenderLanes = Component2(props, secondArg);
+      nextRenderLanes = Component(props, secondArg);
       shouldDoubleInvokeUserFnsInHooksDEV = false;
       didScheduleRenderPhaseUpdateDuringThisPass && (nextRenderLanes = renderWithHooksAgain(
         workInProgress2,
-        Component2,
+        Component,
         props,
         secondArg
       ));
@@ -4187,7 +4187,7 @@ var require_react_dom_client_production = __commonJS({
       if (didRenderTooFewHooks) throw Error(formatProdErrorMessage(300));
       null === current || didReceiveUpdate || (current = current.dependencies, null !== current && checkIfContextChanged(current) && (didReceiveUpdate = true));
     }
-    function renderWithHooksAgain(workInProgress2, Component2, props, secondArg) {
+    function renderWithHooksAgain(workInProgress2, Component, props, secondArg) {
       currentlyRenderingFiber = workInProgress2;
       var numberOfReRenders = 0;
       do {
@@ -4205,7 +4205,7 @@ var require_react_dom_client_production = __commonJS({
           null != children.memoCache && (children.memoCache.index = 0);
         }
         ReactSharedInternals.H = HooksDispatcherOnRerender;
-        children = Component2(props, secondArg);
+        children = Component(props, secondArg);
       } while (didScheduleRenderPhaseUpdateDuringThisPass);
       return children;
     }
@@ -5406,17 +5406,17 @@ var require_react_dom_client_production = __commonJS({
       "function" === typeof instance.UNSAFE_componentWillReceiveProps && instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);
       instance.state !== workInProgress2 && classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
     }
-    function resolveClassComponentProps(Component2, baseProps) {
+    function resolveClassComponentProps(Component, baseProps) {
       var newProps = baseProps;
       if ("ref" in baseProps) {
         newProps = {};
         for (var propName in baseProps)
           "ref" !== propName && (newProps[propName] = baseProps[propName]);
       }
-      if (Component2 = Component2.defaultProps) {
+      if (Component = Component.defaultProps) {
         newProps === baseProps && (newProps = assign({}, newProps));
-        for (var propName$73 in Component2)
-          void 0 === newProps[propName$73] && (newProps[propName$73] = Component2[propName$73]);
+        for (var propName$73 in Component)
+          void 0 === newProps[propName$73] && (newProps[propName$73] = Component[propName$73]);
       }
       return newProps;
     }
@@ -5560,8 +5560,8 @@ var require_react_dom_client_production = __commonJS({
         renderLanes2
       );
     }
-    function updateForwardRef(current, workInProgress2, Component2, nextProps, renderLanes2) {
-      Component2 = Component2.render;
+    function updateForwardRef(current, workInProgress2, Component, nextProps, renderLanes2) {
+      Component = Component.render;
       var ref = workInProgress2.ref;
       if ("ref" in nextProps) {
         var propsWithoutRef = {};
@@ -5572,7 +5572,7 @@ var require_react_dom_client_production = __commonJS({
       nextProps = renderWithHooks(
         current,
         workInProgress2,
-        Component2,
+        Component,
         propsWithoutRef,
         ref,
         renderLanes2
@@ -5585,10 +5585,10 @@ var require_react_dom_client_production = __commonJS({
       reconcileChildren(current, workInProgress2, nextProps, renderLanes2);
       return workInProgress2.child;
     }
-    function updateMemoComponent(current, workInProgress2, Component2, nextProps, renderLanes2) {
+    function updateMemoComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
       if (null === current) {
-        var type = Component2.type;
-        if ("function" === typeof type && !shouldConstruct(type) && void 0 === type.defaultProps && null === Component2.compare)
+        var type = Component.type;
+        if ("function" === typeof type && !shouldConstruct(type) && void 0 === type.defaultProps && null === Component.compare)
           return workInProgress2.tag = 15, workInProgress2.type = type, updateSimpleMemoComponent(
             current,
             workInProgress2,
@@ -5597,7 +5597,7 @@ var require_react_dom_client_production = __commonJS({
             renderLanes2
           );
         current = createFiberFromTypeAndProps(
-          Component2.type,
+          Component.type,
           null,
           nextProps,
           workInProgress2,
@@ -5611,9 +5611,9 @@ var require_react_dom_client_production = __commonJS({
       type = current.child;
       if (!checkScheduledUpdateOrContext(current, renderLanes2)) {
         var prevProps = type.memoizedProps;
-        Component2 = Component2.compare;
-        Component2 = null !== Component2 ? Component2 : shallowEqual;
-        if (Component2(prevProps, nextProps) && current.ref === workInProgress2.ref)
+        Component = Component.compare;
+        Component = null !== Component ? Component : shallowEqual;
+        if (Component(prevProps, nextProps) && current.ref === workInProgress2.ref)
           return bailoutOnAlreadyFinishedWork(current, workInProgress2, renderLanes2);
       }
       workInProgress2.flags |= 1;
@@ -5622,7 +5622,7 @@ var require_react_dom_client_production = __commonJS({
       current.return = workInProgress2;
       return workInProgress2.child = current;
     }
-    function updateSimpleMemoComponent(current, workInProgress2, Component2, nextProps, renderLanes2) {
+    function updateSimpleMemoComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
       if (null !== current) {
         var prevProps = current.memoizedProps;
         if (shallowEqual(prevProps, nextProps) && current.ref === workInProgress2.ref)
@@ -5634,7 +5634,7 @@ var require_react_dom_client_production = __commonJS({
       return updateFunctionComponent(
         current,
         workInProgress2,
-        Component2,
+        Component,
         nextProps,
         renderLanes2
       );
@@ -5794,12 +5794,12 @@ var require_react_dom_client_production = __commonJS({
           workInProgress2.flags |= 4194816;
       }
     }
-    function updateFunctionComponent(current, workInProgress2, Component2, nextProps, renderLanes2) {
+    function updateFunctionComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
       prepareToReadContext(workInProgress2);
-      Component2 = renderWithHooks(
+      Component = renderWithHooks(
         current,
         workInProgress2,
-        Component2,
+        Component,
         nextProps,
         void 0,
         renderLanes2
@@ -5809,33 +5809,33 @@ var require_react_dom_client_production = __commonJS({
         return bailoutHooks(current, workInProgress2, renderLanes2), bailoutOnAlreadyFinishedWork(current, workInProgress2, renderLanes2);
       isHydrating && nextProps && pushMaterializedTreeId(workInProgress2);
       workInProgress2.flags |= 1;
-      reconcileChildren(current, workInProgress2, Component2, renderLanes2);
+      reconcileChildren(current, workInProgress2, Component, renderLanes2);
       return workInProgress2.child;
     }
-    function replayFunctionComponent(current, workInProgress2, nextProps, Component2, secondArg, renderLanes2) {
+    function replayFunctionComponent(current, workInProgress2, nextProps, Component, secondArg, renderLanes2) {
       prepareToReadContext(workInProgress2);
       workInProgress2.updateQueue = null;
       nextProps = renderWithHooksAgain(
         workInProgress2,
-        Component2,
+        Component,
         nextProps,
         secondArg
       );
       finishRenderingHooks(current);
-      Component2 = checkDidRenderIdHook();
+      Component = checkDidRenderIdHook();
       if (null !== current && !didReceiveUpdate)
         return bailoutHooks(current, workInProgress2, renderLanes2), bailoutOnAlreadyFinishedWork(current, workInProgress2, renderLanes2);
-      isHydrating && Component2 && pushMaterializedTreeId(workInProgress2);
+      isHydrating && Component && pushMaterializedTreeId(workInProgress2);
       workInProgress2.flags |= 1;
       reconcileChildren(current, workInProgress2, nextProps, renderLanes2);
       return workInProgress2.child;
     }
-    function updateClassComponent(current, workInProgress2, Component2, nextProps, renderLanes2) {
+    function updateClassComponent(current, workInProgress2, Component, nextProps, renderLanes2) {
       prepareToReadContext(workInProgress2);
       if (null === workInProgress2.stateNode) {
-        var context = emptyContextObject, contextType = Component2.contextType;
+        var context = emptyContextObject, contextType = Component.contextType;
         "object" === typeof contextType && null !== contextType && (context = readContext(contextType));
-        context = new Component2(nextProps, context);
+        context = new Component(nextProps, context);
         workInProgress2.memoizedState = null !== context.state && void 0 !== context.state ? context.state : null;
         context.updater = classComponentUpdater;
         workInProgress2.stateNode = context;
@@ -5845,27 +5845,27 @@ var require_react_dom_client_production = __commonJS({
         context.state = workInProgress2.memoizedState;
         context.refs = {};
         initializeUpdateQueue(workInProgress2);
-        contextType = Component2.contextType;
+        contextType = Component.contextType;
         context.context = "object" === typeof contextType && null !== contextType ? readContext(contextType) : emptyContextObject;
         context.state = workInProgress2.memoizedState;
-        contextType = Component2.getDerivedStateFromProps;
+        contextType = Component.getDerivedStateFromProps;
         "function" === typeof contextType && (applyDerivedStateFromProps(
           workInProgress2,
-          Component2,
+          Component,
           contextType,
           nextProps
         ), context.state = workInProgress2.memoizedState);
-        "function" === typeof Component2.getDerivedStateFromProps || "function" === typeof context.getSnapshotBeforeUpdate || "function" !== typeof context.UNSAFE_componentWillMount && "function" !== typeof context.componentWillMount || (contextType = context.state, "function" === typeof context.componentWillMount && context.componentWillMount(), "function" === typeof context.UNSAFE_componentWillMount && context.UNSAFE_componentWillMount(), contextType !== context.state && classComponentUpdater.enqueueReplaceState(context, context.state, null), processUpdateQueue(workInProgress2, nextProps, context, renderLanes2), suspendIfUpdateReadFromEntangledAsyncAction(), context.state = workInProgress2.memoizedState);
+        "function" === typeof Component.getDerivedStateFromProps || "function" === typeof context.getSnapshotBeforeUpdate || "function" !== typeof context.UNSAFE_componentWillMount && "function" !== typeof context.componentWillMount || (contextType = context.state, "function" === typeof context.componentWillMount && context.componentWillMount(), "function" === typeof context.UNSAFE_componentWillMount && context.UNSAFE_componentWillMount(), contextType !== context.state && classComponentUpdater.enqueueReplaceState(context, context.state, null), processUpdateQueue(workInProgress2, nextProps, context, renderLanes2), suspendIfUpdateReadFromEntangledAsyncAction(), context.state = workInProgress2.memoizedState);
         "function" === typeof context.componentDidMount && (workInProgress2.flags |= 4194308);
         nextProps = true;
       } else if (null === current) {
         context = workInProgress2.stateNode;
-        var unresolvedOldProps = workInProgress2.memoizedProps, oldProps = resolveClassComponentProps(Component2, unresolvedOldProps);
+        var unresolvedOldProps = workInProgress2.memoizedProps, oldProps = resolveClassComponentProps(Component, unresolvedOldProps);
         context.props = oldProps;
-        var oldContext = context.context, contextType$jscomp$0 = Component2.contextType;
+        var oldContext = context.context, contextType$jscomp$0 = Component.contextType;
         contextType = emptyContextObject;
         "object" === typeof contextType$jscomp$0 && null !== contextType$jscomp$0 && (contextType = readContext(contextType$jscomp$0));
-        var getDerivedStateFromProps = Component2.getDerivedStateFromProps;
+        var getDerivedStateFromProps = Component.getDerivedStateFromProps;
         contextType$jscomp$0 = "function" === typeof getDerivedStateFromProps || "function" === typeof context.getSnapshotBeforeUpdate;
         unresolvedOldProps = workInProgress2.pendingProps !== unresolvedOldProps;
         contextType$jscomp$0 || "function" !== typeof context.UNSAFE_componentWillReceiveProps && "function" !== typeof context.componentWillReceiveProps || (unresolvedOldProps || oldContext !== contextType) && callComponentWillReceiveProps(
@@ -5882,12 +5882,12 @@ var require_react_dom_client_production = __commonJS({
         oldContext = workInProgress2.memoizedState;
         unresolvedOldProps || oldState !== oldContext || hasForceUpdate ? ("function" === typeof getDerivedStateFromProps && (applyDerivedStateFromProps(
           workInProgress2,
-          Component2,
+          Component,
           getDerivedStateFromProps,
           nextProps
         ), oldContext = workInProgress2.memoizedState), (oldProps = hasForceUpdate || checkShouldComponentUpdate(
           workInProgress2,
-          Component2,
+          Component,
           oldProps,
           nextProps,
           oldState,
@@ -5898,14 +5898,14 @@ var require_react_dom_client_production = __commonJS({
         context = workInProgress2.stateNode;
         cloneUpdateQueue(current, workInProgress2);
         contextType = workInProgress2.memoizedProps;
-        contextType$jscomp$0 = resolveClassComponentProps(Component2, contextType);
+        contextType$jscomp$0 = resolveClassComponentProps(Component, contextType);
         context.props = contextType$jscomp$0;
         getDerivedStateFromProps = workInProgress2.pendingProps;
         oldState = context.context;
-        oldContext = Component2.contextType;
+        oldContext = Component.contextType;
         oldProps = emptyContextObject;
         "object" === typeof oldContext && null !== oldContext && (oldProps = readContext(oldContext));
-        unresolvedOldProps = Component2.getDerivedStateFromProps;
+        unresolvedOldProps = Component.getDerivedStateFromProps;
         (oldContext = "function" === typeof unresolvedOldProps || "function" === typeof context.getSnapshotBeforeUpdate) || "function" !== typeof context.UNSAFE_componentWillReceiveProps && "function" !== typeof context.componentWillReceiveProps || (contextType !== getDerivedStateFromProps || oldState !== oldProps) && callComponentWillReceiveProps(
           workInProgress2,
           context,
@@ -5920,12 +5920,12 @@ var require_react_dom_client_production = __commonJS({
         var newState = workInProgress2.memoizedState;
         contextType !== getDerivedStateFromProps || oldState !== newState || hasForceUpdate || null !== current && null !== current.dependencies && checkIfContextChanged(current.dependencies) ? ("function" === typeof unresolvedOldProps && (applyDerivedStateFromProps(
           workInProgress2,
-          Component2,
+          Component,
           unresolvedOldProps,
           nextProps
         ), newState = workInProgress2.memoizedState), (contextType$jscomp$0 = hasForceUpdate || checkShouldComponentUpdate(
           workInProgress2,
-          Component2,
+          Component,
           contextType$jscomp$0,
           nextProps,
           oldState,
@@ -5940,7 +5940,7 @@ var require_react_dom_client_production = __commonJS({
       context = nextProps;
       markRef(current, workInProgress2);
       nextProps = 0 !== (workInProgress2.flags & 128);
-      context || nextProps ? (context = workInProgress2.stateNode, Component2 = nextProps && "function" !== typeof Component2.getDerivedStateFromError ? null : context.render(), workInProgress2.flags |= 1, null !== current && nextProps ? (workInProgress2.child = reconcileChildFibers(
+      context || nextProps ? (context = workInProgress2.stateNode, Component = nextProps && "function" !== typeof Component.getDerivedStateFromError ? null : context.render(), workInProgress2.flags |= 1, null !== current && nextProps ? (workInProgress2.child = reconcileChildFibers(
         workInProgress2,
         current.child,
         null,
@@ -5948,9 +5948,9 @@ var require_react_dom_client_production = __commonJS({
       ), workInProgress2.child = reconcileChildFibers(
         workInProgress2,
         null,
-        Component2,
+        Component,
         renderLanes2
-      )) : reconcileChildren(current, workInProgress2, Component2, renderLanes2), workInProgress2.memoizedState = context.state, current = workInProgress2.child) : current = bailoutOnAlreadyFinishedWork(
+      )) : reconcileChildren(current, workInProgress2, Component, renderLanes2), workInProgress2.memoizedState = context.state, current = workInProgress2.child) : current = bailoutOnAlreadyFinishedWork(
         current,
         workInProgress2,
         renderLanes2
@@ -19674,12 +19674,15 @@ var require_jsx_runtime = __commonJS({
 });
 
 // hub-preview-client/main.tsx
-var import_react53 = __toESM(require_react(), 1);
+var import_react43 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
-// ../ggui-react/dist/chunk-KUWOYNZT.mjs
-var import_react = __toESM(require_react(), 1);
-var import_react2 = __toESM(require_react(), 1);
+// ../mcp-apps-react/dist/chunk-7P6ASYW6.mjs
+var __defProp2 = Object.defineProperty;
+var __export2 = (target, all) => {
+  for (var name in all)
+    __defProp2(target, name, { get: all[name], enumerable: true });
+};
 
 // ../protocol/dist/version.js
 var PROTOCOL_VERSION = "draft-2026-06-12";
@@ -34209,7 +34212,7 @@ config(en_default());
 
 // ../protocol/dist/gadgets/stdlib-gadgets.js
 var STDLIB_GADGETS_PACKAGE = "@ggui-ai/gadgets";
-var STDLIB_GADGETS_VERSION = "0.7.0";
+var STDLIB_GADGETS_VERSION = "0.9.0";
 var STDLIB_GADGETS = [
   {
     package: STDLIB_GADGETS_PACKAGE,
@@ -34696,7 +34699,13 @@ var listFeaturedBlueprintsInputShape = {};
 var listFeaturedBlueprintsInputSchema = external_exports.object(listFeaturedBlueprintsInputShape);
 var searchBlueprintsInputShape = {
   query: external_exports.string().min(1).describe("Natural-language description of the UI you're looking for"),
-  limit: external_exports.number().int().min(1).max(100).optional()
+  limit: external_exports.number().int().min(1).max(100).optional(),
+  // Charset mirrors `MCP_TOOL_BINDING_NAME_RE` in
+  // `@ggui-ai/artifact-manifest` (src/mcp-tool-bindings.ts). Inlined:
+  // protocol cannot import artifact-manifest — the dependency points
+  // the other way.
+  tool: external_exports.string().regex(/^[A-Za-z0-9_.-]{1,128}$/).optional().describe("Filter registry-sourced candidates to artifacts declaring a binding for this exact MCP tool name (case-sensitive). Local results are unaffected."),
+  server: external_exports.string().regex(/^[A-Za-z0-9_.-]{1,128}$/).optional().describe("Filter registry-sourced candidates to artifacts declaring a binding for this exact MCP server name (case-sensitive). Combine with `tool` to require the exact (server, tool) pair.")
 };
 var searchBlueprintsInputSchema = external_exports.object(searchBlueprintsInputShape);
 var renderBlueprintInputShape = {
@@ -34820,10 +34829,11 @@ var renderErrorCodeSchema = external_exports.enum([
   "PRODUCTION_FAILED",
   "VALIDATION_ERROR",
   "NO_PLATFORM_KEY",
-  "NO_CREDENTIALS"
+  "NO_CREDENTIALS",
+  "GENERATION_QUEUE_OVERLOADED"
 ]);
 var renderErrorSchema = external_exports.object({
-  code: renderErrorCodeSchema.describe("Canonical failure class. PRODUCTION_FAILED: generation did not produce a component. VALIDATION_ERROR: a server-side precondition rejected the render before generation. NO_PLATFORM_KEY: the server's managed provider-key configuration has no key for the resolved route. NO_CREDENTIALS: no generation credentials are configured on the server."),
+  code: renderErrorCodeSchema.describe("Canonical failure class. PRODUCTION_FAILED: generation did not produce a component. VALIDATION_ERROR: a server-side precondition rejected the render before generation. NO_PLATFORM_KEY: the server's managed provider-key configuration has no key for the resolved route. NO_CREDENTIALS: no generation credentials are configured on the server. GENERATION_QUEUE_OVERLOADED: the deployment's admission gate rejected the request before generation started (queue full or wait timed out) \u2014 not a failed attempt; safe to retry immediately."),
   message: external_exports.string().describe("Human-readable failure detail \u2014 fold into the next attempt or surface to the operator.")
 });
 var resourceReadErrorCodeSchema = external_exports.enum([
@@ -34881,33 +34891,78 @@ var renderOutputSchema = external_exports.object({
     description: external_exports.string(),
     example: external_exports.string(),
     args: external_exports.object({
-      sessionId: external_exports.string()
+      sessionId: external_exports.string(),
+      // The per-call long-poll window in seconds. Carried on the hint
+      // because consume's own default is 0 (single non-blocking
+      // drain): an agent copying a timeout-less hint gets an instant
+      // empty result and stops looping.
+      timeout: external_exports.number()
     })
-  }).optional().describe("Recovery hint \u2014 when the rendered contract has actions, points the agent at ggui_consume({sessionId}) for the inbound action loop. Absent for pure-display renders.")
+  }).optional().describe("Required-next-call hint \u2014 when the rendered contract has actions, points the agent at ggui_consume({sessionId, timeout}) for the inbound action loop. Absent for pure-display renders.")
 });
 var updateInputSchema = external_exports.discriminatedUnion("kind", [
   external_exports.object({
     sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
     kind: external_exports.literal("replace"),
-    props: external_exports.record(external_exports.string(), external_exports.unknown()).describe("Full replacement props map. New map IS the new state.")
+    props: external_exports.record(external_exports.string(), external_exports.unknown()).describe("Full replacement props map. New map IS the new state, rendered as a NEW card (a new history entry). For an in-place repaint of the mounted card use ggui_amend.")
+  }).strict(),
+  external_exports.object({
+    sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
+    kind: external_exports.literal("merge"),
+    patch: external_exports.record(external_exports.string(), external_exports.unknown()).describe("RFC 7396 JSON Merge Patch \u2014 null deletes a key; arrays fully replace. The merged state renders as a NEW card (a new history entry). For an in-place repaint of the mounted card use ggui_amend.")
+  }).strict()
+]);
+var amendInputSchema = external_exports.discriminatedUnion("kind", [
+  external_exports.object({
+    sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
+    kind: external_exports.literal("replace"),
+    props: external_exports.record(external_exports.string(), external_exports.unknown()).describe("Full replacement props map, applied to the currently mounted card in place.")
   }).strict(),
   external_exports.object({
     sessionId: external_exports.string().describe("GguiSession opaque id (UUID) \u2014 returned by ggui_render."),
     kind: external_exports.literal("merge"),
-    patch: external_exports.record(external_exports.string(), external_exports.unknown()).describe("RFC 7396 JSON Merge Patch \u2014 null deletes a key; arrays fully replace.")
+    patch: external_exports.record(external_exports.string(), external_exports.unknown()).describe("RFC 7396 JSON Merge Patch \u2014 null deletes a key; arrays fully replace. Applied to the currently mounted card in place.")
   }).strict()
 ]);
 var updateOutputSchema = external_exports.object({
   sessionId: external_exports.string(),
   updated: external_exports.boolean(),
   /**
-   * Unchanged from the initial render — the same `ui://ggui/render/{id}`
-   * URI the mount stamped. Mirrored on the LLM-visible structuredContent
-   * so SDKs that strip `_meta` from tool_results can still reach the
+   * The epoch-pinned URI of the NEW history record this update minted
+   * (`ui://ggui/render/{id}[/{key}]#{epoch}` — see epoch-uri.ts). On a
+   * no-op (`updated: false`) no record is minted and this is the bare
+   * live-head URI. Mirrored on the LLM-visible structuredContent so
+   * SDKs that strip `_meta` from tool_results can still reach the
    * mount URI. Kept in sync with the update handler's wire shape —
    * this export and the handler's inline schema must not drift.
    */
-  resourceUri: external_exports.string()
+  resourceUri: external_exports.string(),
+  /**
+   * The session's head epoch after this call: advanced by one on a
+   * real update (`updated: true`), unchanged on a no-op. `ggui_render`
+   * mints epoch 0. The session ROW is the authority
+   * (`GguiSessionBase.epoch`, absent ⇒ 0); the ledger's `ui.reminted`
+   * events are the wire signal only — the ledger is horizon-bounded
+   * and must never be counted as the source of truth.
+   */
+  epoch: external_exports.number().int().min(0),
+  /**
+   * Present ONLY on a no-op (`updated: false`): the patch conformed to
+   * the contract but left the final props semantically identical to
+   * the current state, so nothing was written, nothing changes on
+   * screen, and NO new history record was minted. Model-visible by
+   * design — the common producer of a no-op is an agent echoing
+   * existing props back believing it changed the UI, and this field is
+   * its feedback channel.
+   */
+  warning: external_exports.string().optional()
+});
+var amendOutputSchema = external_exports.object({
+  sessionId: external_exports.string(),
+  updated: external_exports.boolean(),
+  resourceUri: external_exports.string(),
+  /** Same no-op feedback channel as ggui_update's `warning`. */
+  warning: external_exports.string().optional()
 });
 var declareToolCatalogInputSchema = external_exports.object({
   toolCatalog: external_exports.record(external_exports.string(), external_exports.object({ name: external_exports.string(), version: external_exports.string().optional() }).strict()).describe("Per-app canonical tool identities: bare tool name -> its server's initialize-declared serverInfo. Host/library-supplied; not an agent action.")
@@ -34916,6 +34971,45 @@ var declareToolCatalogOutputSchema = external_exports.object({
   saved: external_exports.boolean(),
   appId: external_exports.string()
 }).strict();
+var RUNTIME_PULL_MAX_LIMIT = 100;
+var RUNTIME_PULL_MAX_WAIT_SECONDS = 20;
+var gguiSessionEventSchema = external_exports.object({
+  seq: external_exports.number().int().min(1).describe('Monotonic, gap-free per render; starts at 1 (0 is the "no events yet" cursor sentinel, never an event).'),
+  type: external_exports.string().min(1).describe("Wire-frame type \u2014 see the canonical GguiSessionEventType taxonomy; plain string so servers can mint new types without a protocol bump."),
+  timestamp: external_exports.string().describe("ISO 8601 UTC timestamp the server stamped on emission."),
+  data: external_exports.unknown().describe("Type-specific payload \u2014 structurally identical to the matching live-channel frame payload.")
+});
+var runtimePullInputShape = {
+  sessionId: external_exports.string().min(1).describe('Active render id \u2014 sourced from `_meta["ai.ggui/render"].sessionId` on the iframe boot envelope. Unknown and cross-tenant ids surface uniformly as session_not_found.'),
+  sinceSequence: external_exports.number().int().min(0).optional().describe("Replay cursor \u2014 only events with seq > sinceSequence return. Omit (= 0) on first pull; advance to the last event's seq (or lastSequence on an empty page) on every subsequent pull."),
+  limit: external_exports.number().int().min(1).optional().describe(`Max events per page. Values above ${RUNTIME_PULL_MAX_LIMIT} are clamped to ${RUNTIME_PULL_MAX_LIMIT}; omit for the default ${RUNTIME_PULL_MAX_LIMIT}. When hasMore is true, immediately re-pull with the advanced cursor.`),
+  wait: external_exports.number().min(0).optional().describe(`Subscription-mode hold, in seconds. When set and the cursor page is empty, the server holds this call until an event lands or the hold elapses (values above ${RUNTIME_PULL_MAX_WAIT_SECONDS} are clamped to ${RUNTIME_PULL_MAX_WAIT_SECONDS}). An empty page after a full hold is a NORMAL result \u2014 immediately re-pull to stay subscribed, or back off to sparse un-held pulls after a few consecutive empties. Omit (= 0) for an immediate return.`)
+};
+var runtimePullInputSchema = external_exports.object(runtimePullInputShape);
+var runtimePullEventsPageSchema = external_exports.object({
+  events: external_exports.array(gguiSessionEventSchema),
+  lastSequence: external_exports.number().int().min(0),
+  hasMore: external_exports.boolean()
+});
+var runtimePullHorizonSchema = external_exports.object({
+  reason: external_exports.literal("REPLAY_HORIZON_PASSED"),
+  currentSequence: external_exports.number().int().min(0)
+});
+var runtimePullOutputSchema = external_exports.union([
+  runtimePullEventsPageSchema,
+  runtimePullHorizonSchema
+]);
+var RUNTIME_TELEMETRY_MAX_EVENTS = 40;
+var runtimeTelemetryInputShape = {
+  sessionId: external_exports.string().min(1).describe("Render id the report concerns \u2014 sourced from the boot envelope. Client-claimed: used as a log tag only."),
+  events: external_exports.array(external_exports.object({
+    at: external_exports.number().min(0).describe("Milliseconds since iframe boot (monotonic, client clock)."),
+    kind: external_exports.string().min(1).max(64).describe("Event name \u2014 e.g. 'boot.path', 'status.connected', 'channel_failover_swap', 'doorbell.ring'."),
+    detail: external_exports.string().max(512).optional().describe("Optional compact context (JSON fragment or message).")
+  })).min(1).max(RUNTIME_TELEMETRY_MAX_EVENTS).describe("Batched ladder/doorbell events, oldest first.")
+};
+var runtimeTelemetryInputSchema = external_exports.object(runtimeTelemetryInputShape);
+var runtimeTelemetryOutputSchema = external_exports.object({ ok: external_exports.literal(true) });
 
 // ../protocol/dist/schemas/invoke.js
 var textBlockSchema = external_exports.object({
@@ -35553,24 +35647,10 @@ function validateActionEnvelope(envelope, spec, precompiledActions) {
   return validateActionData(envelope.payload, spec, precompiledActions);
 }
 
-// ../ggui-react/dist/chunk-KUWOYNZT.mjs
-var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
-var import_react3 = __toESM(require_react(), 1);
-var GguiContext = (0, import_react.createContext)(null);
-var KNOWN_PERMISSION_NAMES_SET2 = new Set(KNOWN_PERMISSION_NAMES);
-var DECODER = new TextDecoder();
-
-// ../ggui-react/dist/chunk-7P6ASYW6.mjs
-var __defProp2 = Object.defineProperty;
-var __export2 = (target, all) => {
-  for (var name in all)
-    __defProp2(target, name, { get: all[name], enumerable: true });
-};
-
-// ../ggui-react/dist/index.mjs
-var import_react8 = __toESM(require_react(), 1);
-var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
-var import_react9 = __toESM(require_react(), 1);
+// ../mcp-apps-react/dist/index.mjs
+var import_react5 = __toESM(require_react(), 1);
+var import_react6 = __toESM(require_react(), 1);
+var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 
 // ../wire/dist/index.js
 var dist_exports = {};
@@ -35596,13 +35676,13 @@ __export(dist_exports, {
 });
 
 // ../wire/dist/WireProvider.js
-var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
 
 // ../wire/dist/context.js
-var import_react4 = __toESM(require_react(), 1);
-var WireContext = (0, import_react4.createContext)(null);
+var import_react = __toESM(require_react(), 1);
+var WireContext = (0, import_react.createContext)(null);
 function useWireContext() {
-  const ctx = (0, import_react4.useContext)(WireContext);
+  const ctx = (0, import_react.useContext)(WireContext);
   if (!ctx) {
     throw new Error("useWireContext must be used within a WireProvider. Ensure the component is rendered inside a GguiWireProvider.");
   }
@@ -35611,11 +35691,11 @@ function useWireContext() {
 
 // ../wire/dist/WireProvider.js
 function GguiWireProvider({ config: config2, children }) {
-  return (0, import_jsx_runtime2.jsx)(WireContext.Provider, { value: config2, children });
+  return (0, import_jsx_runtime.jsx)(WireContext.Provider, { value: config2, children });
 }
 
 // ../wire/dist/useAction.js
-var import_react5 = __toESM(require_react(), 1);
+var import_react2 = __toESM(require_react(), 1);
 
 // ../wire/dist/dispatch-dedup.js
 var pendingDispatches = /* @__PURE__ */ new Set();
@@ -35649,7 +35729,7 @@ function tryAcceptDispatch(actionName, data) {
 // ../wire/dist/useAction.js
 function useAction(actionName) {
   const { dispatch, onDispatchSuppressed } = useWireContext();
-  return (0, import_react5.useCallback)((data) => {
+  return (0, import_react2.useCallback)((data) => {
     const decision = tryAcceptDispatch(actionName, data);
     if (decision.suppressed) {
       console.warn(`[ggui] useAction('${actionName}') suppressed a duplicate dispatch (same name + payload, same event-loop task). This usually means two interactive elements nest and both wire to the same action (e.g. a Checkbox onChange inside a Card as={Clickable} onClick); the inner gesture bubbles to the outer handler so one user click would fire the action twice. Wire each useAction callback to exactly ONE interactive surface. Tier-0 'double-wired-action' warns on this at gen time; this runtime defense ensures the user-visible behavior stays correct regardless of code shape.`);
@@ -35672,7 +35752,7 @@ function useAction(actionName) {
 }
 
 // ../wire/dist/useGguiContext.js
-var import_react6 = __toESM(require_react(), 1);
+var import_react3 = __toESM(require_react(), 1);
 function useGguiContext(slotName) {
   const contextName = slotName.length === 0 ? "Context" : slotName.charAt(0).toUpperCase() + slotName.slice(1) + "Context";
   const registry2 = globalThis.__ggui__?.contexts;
@@ -35680,19 +35760,19 @@ function useGguiContext(slotName) {
   if (!ctx) {
     throw new Error(`[ggui] useGguiContext('${slotName}'): no Context registered. The contract must declare 'contextSpec.${slotName}' AND the runtime must have synthesized the per-slot React Context at boot. If you see this in production code generated by the LLM, the boilerplate's destructure line drifted from the contract.`);
   }
-  return (0, import_react6.useContext)(ctx);
+  return (0, import_react3.useContext)(ctx);
 }
 
 // ../wire/dist/useStream.js
-var import_react7 = __toESM(require_react(), 1);
+var import_react4 = __toESM(require_react(), 1);
 function useStream(channelName) {
   const { subscribe } = useWireContext();
-  const [latest, setLatest] = (0, import_react7.useState)(null);
-  const [all, setAll] = (0, import_react7.useState)([]);
-  const [isComplete, setIsComplete] = (0, import_react7.useState)(false);
-  const allRef = (0, import_react7.useRef)(all);
+  const [latest, setLatest] = (0, import_react4.useState)(null);
+  const [all, setAll] = (0, import_react4.useState)([]);
+  const [isComplete, setIsComplete] = (0, import_react4.useState)(false);
+  const allRef = (0, import_react4.useRef)(all);
   allRef.current = all;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return subscribe(channelName, (delivery) => {
       const typed = delivery.payload;
       setLatest(typed);
@@ -35865,243 +35945,104 @@ function buildWireConfig(opts) {
   };
 }
 
-// ../ggui-react/dist/index.mjs
-var import_react10 = __toESM(require_react(), 1);
-
-// ../preview-a2ui/dist/components.js
-var ComponentBase = external_exports.object({
-  id: external_exports.string().min(1)
-});
-var ComponentRef = external_exports.string().min(1);
-var Align = external_exports.enum(["start", "center", "end", "stretch"]);
-var Justify = external_exports.enum([
-  "start",
-  "center",
-  "end",
-  "between",
-  "around",
-  "evenly"
-]);
-var RowComponent = ComponentBase.extend({
-  component: external_exports.literal("Row"),
-  children: external_exports.array(ComponentRef).optional(),
-  gap: external_exports.string().optional(),
-  align: Align.optional(),
-  justify: Justify.optional()
-});
-var ColumnComponent = ComponentBase.extend({
-  component: external_exports.literal("Column"),
-  children: external_exports.array(ComponentRef).optional(),
-  gap: external_exports.string().optional(),
-  align: Align.optional(),
-  justify: Justify.optional()
-});
-var CardComponent = ComponentBase.extend({
-  component: external_exports.literal("Card"),
-  child: ComponentRef.optional()
-});
-var ListComponent = ComponentBase.extend({
-  component: external_exports.literal("List"),
-  children: external_exports.array(ComponentRef).optional()
-});
-var DividerComponent = ComponentBase.extend({
-  component: external_exports.literal("Divider"),
-  orientation: external_exports.enum(["horizontal", "vertical"]).optional()
-});
-var TextComponent = ComponentBase.extend({
-  component: external_exports.literal("Text"),
-  text: external_exports.string(),
-  variant: external_exports.string().optional()
-});
-var ImageComponent = ComponentBase.extend({
-  component: external_exports.literal("Image"),
-  src: external_exports.string().min(1),
-  alt: external_exports.string().optional()
-});
-var IconComponent = ComponentBase.extend({
-  component: external_exports.literal("Icon"),
-  name: external_exports.string().min(1)
-});
-var ButtonComponent = ComponentBase.extend({
-  component: external_exports.literal("Button"),
-  label: external_exports.string()
-});
-var TextFieldComponent = ComponentBase.extend({
-  component: external_exports.literal("TextField"),
-  label: external_exports.string().optional(),
-  placeholder: external_exports.string().optional(),
-  value: external_exports.string().optional()
-});
-var CheckBoxComponent = ComponentBase.extend({
-  component: external_exports.literal("CheckBox"),
-  label: external_exports.string().optional(),
-  checked: external_exports.boolean().optional()
-});
-var ChoicePickerOption = external_exports.object({
-  label: external_exports.string(),
-  value: external_exports.string()
-});
-var ChoicePickerComponent = ComponentBase.extend({
-  component: external_exports.literal("ChoicePicker"),
-  label: external_exports.string().optional(),
-  options: external_exports.array(ChoicePickerOption).optional(),
-  value: external_exports.string().optional()
-});
-var ComponentSchema = external_exports.discriminatedUnion("component", [
-  RowComponent,
-  ColumnComponent,
-  CardComponent,
-  ListComponent,
-  DividerComponent,
-  TextComponent,
-  ImageComponent,
-  IconComponent,
-  ButtonComponent,
-  TextFieldComponent,
-  CheckBoxComponent,
-  ChoicePickerComponent
-]);
-
-// ../preview-a2ui/dist/messages.js
-var A2UI_MESSAGE_VERSION = "v0.9";
-var VersionLiteral = external_exports.literal(A2UI_MESSAGE_VERSION);
-var SurfaceId = external_exports.string().min(1);
-var CreateSurfaceMessageSchema = external_exports.object({
-  version: VersionLiteral,
-  createSurface: external_exports.object({
-    surfaceId: SurfaceId,
-    catalogId: external_exports.string().min(1)
-  })
-});
-var UpdateComponentsMessageSchema = external_exports.object({
-  version: VersionLiteral,
-  updateComponents: external_exports.object({
-    surfaceId: SurfaceId,
-    components: external_exports.array(ComponentSchema)
-  })
-});
-var DeleteSurfaceMessageSchema = external_exports.object({
-  version: VersionLiteral,
-  deleteSurface: external_exports.object({
-    surfaceId: SurfaceId
-  })
-});
-var ServerMessageSchema = external_exports.union([
-  CreateSurfaceMessageSchema,
-  UpdateComponentsMessageSchema,
-  DeleteSurfaceMessageSchema
-]);
-
-// ../ggui-react/dist/index.mjs
-var import_react11 = __toESM(require_react(), 1);
+// ../mcp-apps-react/dist/index.mjs
+var import_react7 = __toESM(require_react(), 1);
+var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+var import_react8 = __toESM(require_react(), 1);
+var import_react9 = __toESM(require_react(), 1);
 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
-var import_react12 = __toESM(require_react(), 1);
 var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
-var import_react13 = __toESM(require_react(), 1);
-var import_react14 = __toESM(require_react(), 1);
 var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+var import_react10 = __toESM(require_react(), 1);
+var import_react11 = __toESM(require_react(), 1);
 var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
-var import_react15 = __toESM(require_react(), 1);
-var import_react16 = __toESM(require_react(), 1);
 var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+var import_react12 = __toESM(require_react(), 1);
 var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+var import_react13 = __toESM(require_react(), 1);
 var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
-var import_react17 = __toESM(require_react(), 1);
+var import_react14 = __toESM(require_react(), 1);
 var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
-var import_react18 = __toESM(require_react(), 1);
 var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
-var import_react19 = __toESM(require_react(), 1);
+var import_react15 = __toESM(require_react(), 1);
 var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+var import_react16 = __toESM(require_react(), 1);
 var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
-var import_react20 = __toESM(require_react(), 1);
+var import_react17 = __toESM(require_react(), 1);
 var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
-var import_react21 = __toESM(require_react(), 1);
 var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
-var import_react22 = __toESM(require_react(), 1);
 var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+var import_react18 = __toESM(require_react(), 1);
 var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
-var import_react23 = __toESM(require_react(), 1);
 var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
+var import_react19 = __toESM(require_react(), 1);
 var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
+var import_react20 = __toESM(require_react(), 1);
 var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
-var import_react24 = __toESM(require_react(), 1);
 var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
-var import_react25 = __toESM(require_react(), 1);
+var import_react21 = __toESM(require_react(), 1);
 var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
+var import_react22 = __toESM(require_react(), 1);
 var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
-var import_react26 = __toESM(require_react(), 1);
+var import_react23 = __toESM(require_react(), 1);
 var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
-var import_react27 = __toESM(require_react(), 1);
+var import_react24 = __toESM(require_react(), 1);
 var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-var import_react28 = __toESM(require_react(), 1);
+var import_react25 = __toESM(require_react(), 1);
+var import_react26 = __toESM(require_react(), 1);
 var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
-var import_react29 = __toESM(require_react(), 1);
+var import_react27 = __toESM(require_react(), 1);
 var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
-var import_react30 = __toESM(require_react(), 1);
-var import_react31 = __toESM(require_react(), 1);
 var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
-var import_react32 = __toESM(require_react(), 1);
 var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
+var import_react28 = __toESM(require_react(), 1);
 var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
+var import_react29 = __toESM(require_react(), 1);
 var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
-var import_react33 = __toESM(require_react(), 1);
+var import_react30 = __toESM(require_react(), 1);
 var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
-var import_react34 = __toESM(require_react(), 1);
 var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
-var import_react35 = __toESM(require_react(), 1);
 var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
+var import_react31 = __toESM(require_react(), 1);
 var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
-var import_react36 = __toESM(require_react(), 1);
+var import_react32 = __toESM(require_react(), 1);
 var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
-var import_react37 = __toESM(require_react(), 1);
+var import_react33 = __toESM(require_react(), 1);
 var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
-var import_react38 = __toESM(require_react(), 1);
+var import_react34 = __toESM(require_react(), 1);
 var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
-var import_react39 = __toESM(require_react(), 1);
+var import_react35 = __toESM(require_react(), 1);
 var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
+var import_react36 = __toESM(require_react(), 1);
 var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
-var import_react40 = __toESM(require_react(), 1);
 var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
-var import_react41 = __toESM(require_react(), 1);
 var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
+var import_react37 = __toESM(require_react(), 1);
 var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
+var import_react38 = __toESM(require_react(), 1);
 var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
-var import_react42 = __toESM(require_react(), 1);
+var import_react39 = __toESM(require_react(), 1);
 var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
-var import_react43 = __toESM(require_react(), 1);
+var import_react40 = __toESM(require_react(), 1);
 var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
-var import_react44 = __toESM(require_react(), 1);
 var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
-var import_react45 = __toESM(require_react(), 1);
+var import_react41 = __toESM(require_react(), 1);
 var import_jsx_runtime60 = __toESM(require_jsx_runtime(), 1);
-var import_react46 = __toESM(require_react(), 1);
 var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
-var import_react47 = __toESM(require_react(), 1);
-var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1);
-var import_jsx_runtime63 = __toESM(require_jsx_runtime(), 1);
-var import_jsx_runtime64 = __toESM(require_jsx_runtime(), 1);
-var import_react48 = __toESM(require_react(), 1);
-var import_react49 = __toESM(require_react(), 1);
-var import_jsx_runtime65 = __toESM(require_jsx_runtime(), 1);
-var import_react50 = __toESM(require_react(), 1);
-var import_jsx_runtime66 = __toESM(require_jsx_runtime(), 1);
-var import_jsx_runtime67 = __toESM(require_jsx_runtime(), 1);
-var import_react51 = __toESM(require_react(), 1);
-var import_jsx_runtime68 = __toESM(require_jsx_runtime(), 1);
-var import_react52 = __toESM(require_react(), 1);
-var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
-var StreamBusContext = (0, import_react11.createContext)(null);
+var import_react42 = __toESM(require_react(), 1);
+var GguiContext = (0, import_react6.createContext)(null);
+var KNOWN_PERMISSION_NAMES_SET2 = new Set(KNOWN_PERMISSION_NAMES);
 var primitives_exports = {};
 __export2(primitives_exports, {
   Accordion: () => Accordion,
@@ -36214,7 +36155,7 @@ var maxWidthMap = {
 function Container({ children, maxWidth: maxWidth2 = "lg", center = true, padding, style, className }) {
   const resolvedMaxWidth = maxWidthMap[maxWidth2] || maxWidth2;
   const resolvedPadding = resolveSpacing(padding);
-  return (0, import_jsx_runtime5.jsx)("div", { className, style: {
+  return (0, import_jsx_runtime3.jsx)("div", { className, style: {
     maxWidth: resolvedMaxWidth,
     margin: center ? "0 auto" : void 0,
     padding: resolvedPadding,
@@ -36224,9 +36165,9 @@ function Container({ children, maxWidth: maxWidth2 = "lg", center = true, paddin
 }
 function renderWithTrait(trait, traitProps, root, children) {
   if (trait === void 0) {
-    return (0, import_react13.createElement)("div", { className: root.className, style: root.style }, children);
+    return (0, import_react8.createElement)("div", { className: root.className, style: root.style }, children);
   }
-  return (0, import_react13.createElement)(trait, { ...traitProps, className: root.className, style: root.style }, children);
+  return (0, import_react8.createElement)(trait, { ...traitProps, className: root.className, style: root.style }, children);
 }
 function resolveToneCss(tone) {
   switch (tone) {
@@ -36351,7 +36292,7 @@ function Stack(props) {
   return renderWithTrait(Trait, traitProps, { className, style: composedStyle }, children);
 }
 function Row(props) {
-  return (0, import_react14.createElement)(Stack, { ...props, direction: "horizontal" });
+  return (0, import_react9.createElement)(Stack, { ...props, direction: "horizontal" });
 }
 var BREAKPOINTS = [
   ["sm", 640],
@@ -36395,7 +36336,7 @@ function Grid(props) {
       gap: resolveSpacing(gap),
       ...style
     };
-    return renderWithTrait(Trait, traitProps, { className: className ? `${className} ${cls}` : cls, style: composedStyle2 }, (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [(0, import_jsx_runtime6.jsx)("style", { children: rules.join("") }), children] }));
+    return renderWithTrait(Trait, traitProps, { className: className ? `${className} ${cls}` : cls, style: composedStyle2 }, (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [(0, import_jsx_runtime4.jsx)("style", { children: rules.join("") }), children] }));
   }
   const composedStyle = {
     display: "grid",
@@ -36430,7 +36371,7 @@ function Divider({ orientation = "horizontal", margin = "var(--ggui-spacing-md,
   const resolvedMargin = typeof margin === "number" ? `${margin}px` : margin;
   const dividerColor = tone ? resolveToneCss(tone) : "var(--ggui-color-outlineVariant, #e4e4e7)";
   if (orientation === "vertical") {
-    return (0, import_jsx_runtime7.jsx)("div", { role: "separator", "aria-orientation": "vertical", className, style: {
+    return (0, import_jsx_runtime5.jsx)("div", { role: "separator", "aria-orientation": "vertical", className, style: {
       width: "1px",
       backgroundColor: dividerColor,
       margin: `0 ${resolvedMargin}`,
@@ -36438,7 +36379,7 @@ function Divider({ orientation = "horizontal", margin = "var(--ggui-spacing-md,
       ...style
     } });
   }
-  return (0, import_jsx_runtime7.jsx)("hr", { role: "separator", "aria-orientation": "horizontal", className, style: {
+  return (0, import_jsx_runtime5.jsx)("hr", { role: "separator", "aria-orientation": "horizontal", className, style: {
     border: "none",
     height: "1px",
     backgroundColor: dividerColor,
@@ -36448,12 +36389,12 @@ function Divider({ orientation = "horizontal", margin = "var(--ggui-spacing-md,
 }
 function Spacer({ size = 16, style, className }) {
   if (size === "flex") {
-    return (0, import_jsx_runtime8.jsx)("div", { className, style: {
+    return (0, import_jsx_runtime6.jsx)("div", { className, style: {
       flex: 1,
       ...style
     } });
   }
-  return (0, import_jsx_runtime8.jsx)("div", { className, style: {
+  return (0, import_jsx_runtime6.jsx)("div", { className, style: {
     width: `${size}px`,
     height: `${size}px`,
     flexShrink: 0,
@@ -36507,7 +36448,7 @@ function Text({ children, size = "base", weight = "normal", caps = false, tone,
     ...style
   };
   const elementProps = { id, htmlFor, className, style: textStyle };
-  return (0, import_react15.createElement)(is, elementProps, children);
+  return (0, import_react10.createElement)(is, elementProps, children);
 }
 var fontSize = {
   xs: "12px",
@@ -36590,7 +36531,7 @@ function Heading({ children, level = 2, tone, align, style, className }) {
   const tag = `h${level}`;
   const headingStyle = headingStyles[tag] || headingStyles.h2;
   const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onSurface, #18181b)";
-  return (0, import_react16.createElement)(tag, {
+  return (0, import_react11.createElement)(tag, {
     className,
     style: {
       ...headingStyle,
@@ -36603,10 +36544,10 @@ function Heading({ children, level = 2, tone, align, style, className }) {
 }
 function Spinner({ size = 24, tone, style, className }) {
   const spinnerColor = tone === "inherit" ? "currentColor" : tone ? resolveToneCss(tone) : "var(--ggui-color-primary-600, #0284c7)";
-  return (0, import_jsx_runtime10.jsxs)("svg", { className, width: size, height: size, viewBox: "0 0 24 24", fill: "none", role: "status", "aria-label": "Loading", style: {
+  return (0, import_jsx_runtime8.jsxs)("svg", { className, width: size, height: size, viewBox: "0 0 24 24", fill: "none", role: "status", "aria-label": "Loading", style: {
     animation: "ggui-spin 1s linear infinite",
     ...style
-  }, children: [(0, import_jsx_runtime10.jsx)("style", { children: `@keyframes ggui-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }), (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "var(--ggui-color-outlineVariant, #e4e4e7)", strokeWidth: "3", fill: "none" }), (0, import_jsx_runtime10.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: spinnerColor, strokeWidth: "3", strokeLinecap: "round", fill: "none" })] });
+  }, children: [(0, import_jsx_runtime8.jsx)("style", { children: `@keyframes ggui-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }), (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "var(--ggui-color-outlineVariant, #e4e4e7)", strokeWidth: "3", fill: "none" }), (0, import_jsx_runtime8.jsx)("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: spinnerColor, strokeWidth: "3", strokeLinecap: "round", fill: "none" })] });
 }
 var duration3 = {
   instant: "0ms",
@@ -36683,7 +36624,7 @@ var variantStyles = {
 function Button({ children, variant = "primary", size = "md", fullWidth, loading, disabled, leftIcon, rightIcon, type = "button", onClick, onPress, style, className, ...rest }) {
   const isDisabled = disabled || loading;
   const handleClick = onClick ?? onPress;
-  return (0, import_jsx_runtime9.jsx)("button", { type, onClick: isDisabled ? void 0 : handleClick, disabled: isDisabled, className, style: {
+  return (0, import_jsx_runtime7.jsx)("button", { type, onClick: isDisabled ? void 0 : handleClick, disabled: isDisabled, className, style: {
     ...sizeStyles[size],
     ...variantStyles[variant],
     display: "inline-flex",
@@ -36698,7 +36639,7 @@ function Button({ children, variant = "primary", size = "md", fullWidth, loading
     transition: `background-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}, opacity ${duration3.normal} ${easing.easeInOut}`,
     boxShadow: "var(--ggui-shape-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))",
     ...style
-  }, ...rest, children: loading ? (0, import_jsx_runtime9.jsx)(Spinner, { size: 16, tone: "inherit" }) : (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [leftIcon, children, rightIcon] }) });
+  }, ...rest, children: loading ? (0, import_jsx_runtime7.jsx)(Spinner, { size: 16, tone: "inherit" }) : (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [leftIcon, children, rightIcon] }) });
 }
 var sizeStyles2 = {
   sm: {
@@ -36715,21 +36656,21 @@ var sizeStyles2 = {
   }
 };
 function Input({ label, placeholder, value, onChange, type = "text", error: error210, helperText, required: required2, disabled, size = "md", style, className, ...rest }) {
-  const uniqueId = (0, import_react17.useId)();
+  const uniqueId = (0, import_react12.useId)();
   const inputId = `${uniqueId}-input`;
   const messageId = `${uniqueId}-message`;
   const hasError = Boolean(error210);
   const hasMessage = Boolean(error210 || helperText);
-  return (0, import_jsx_runtime11.jsxs)("div", { className, style: {
+  return (0, import_jsx_runtime9.jsxs)("div", { className, style: {
     display: "flex",
     flexDirection: "column",
     gap: "var(--ggui-spacing-1, 4px)",
     ...style
-  }, children: [label && (0, import_jsx_runtime11.jsxs)("label", { htmlFor: inputId, style: {
+  }, children: [label && (0, import_jsx_runtime9.jsxs)("label", { htmlFor: inputId, style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: [label, required2 && (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime11.jsx)("input", { id: inputId, type, placeholder, value, onChange: (e) => onChange?.(e.target.value), disabled, required: required2, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
+  }, children: [label, required2 && (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime9.jsx)("input", { id: inputId, type, placeholder, value, onChange: (e) => onChange?.(e.target.value), disabled, required: required2, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
     ...sizeStyles2[size],
     width: "100%",
     borderRadius: "var(--ggui-shape-radius-md, 8px)",
@@ -36738,28 +36679,28 @@ function Input({ label, placeholder, value, onChange, type = "text", error: erro
     color: "var(--ggui-color-onSurface, #18181b)",
     transition: `border-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}`,
     boxSizing: "border-box"
-  }, ...rest }), hasMessage && (0, import_jsx_runtime11.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
+  }, ...rest }), hasMessage && (0, import_jsx_runtime9.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
   }, children: error210 || helperText })] });
 }
 function TextArea({ label, placeholder, value, onChange, rows = 4, error: error210, helperText, required: required2, disabled, maxLength, showCount, autoResize, style, className, ...rest }) {
-  const uniqueId = (0, import_react18.useId)();
+  const uniqueId = (0, import_react13.useId)();
   const textareaId = `${uniqueId}-textarea`;
   const messageId = `${uniqueId}-message`;
   const hasError = Boolean(error210);
   const hasMessage = Boolean(error210 || helperText);
   const charCount = value?.length || 0;
-  return (0, import_jsx_runtime12.jsxs)("div", { className, style: {
+  return (0, import_jsx_runtime10.jsxs)("div", { className, style: {
     display: "flex",
     flexDirection: "column",
     gap: "var(--ggui-spacing-1, 4px)",
     ...style
-  }, children: [label && (0, import_jsx_runtime12.jsxs)("label", { htmlFor: textareaId, style: {
+  }, children: [label && (0, import_jsx_runtime10.jsxs)("label", { htmlFor: textareaId, style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: [label, required2 && (0, import_jsx_runtime12.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime12.jsx)("textarea", { id: textareaId, placeholder, value, onChange: (e) => onChange?.(e.target.value), rows, disabled, required: required2, maxLength, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
+  }, children: [label, required2 && (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime10.jsx)("textarea", { id: textareaId, placeholder, value, onChange: (e) => onChange?.(e.target.value), rows, disabled, required: required2, maxLength, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
     padding: "10px 12px",
     width: "100%",
     borderRadius: "var(--ggui-shape-radius-md, 8px)",
@@ -36771,10 +36712,10 @@ function TextArea({ label, placeholder, value, onChange, rows = 4, error: error2
     transition: `border-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}`,
     boxSizing: "border-box",
     resize: autoResize ? "none" : "vertical"
-  }, ...rest }), (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [hasMessage && (0, import_jsx_runtime12.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
+  }, ...rest }), (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [hasMessage && (0, import_jsx_runtime10.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: error210 || helperText }), showCount && maxLength && (0, import_jsx_runtime12.jsxs)("span", { style: {
+  }, children: error210 || helperText }), showCount && maxLength && (0, import_jsx_runtime10.jsxs)("span", { style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)",
     marginLeft: "auto"
@@ -36786,16 +36727,16 @@ var sizeStyles3 = {
   lg: { padding: "12px 14px", fontSize: "var(--ggui-font-size-base, 16px)" }
 };
 function Select({ label, value, onChange, options, placeholder, error: error210, helperText, required: required2, disabled, size = "md", style, className, ...rest }) {
-  const uniqueId = (0, import_react19.useId)();
+  const uniqueId = (0, import_react14.useId)();
   const selectId = `${uniqueId}-select`;
   const messageId = `${uniqueId}-message`;
   const hasError = Boolean(error210);
   const hasMessage = Boolean(error210 || helperText);
-  return (0, import_jsx_runtime13.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [label && (0, import_jsx_runtime13.jsxs)("label", { htmlFor: selectId, style: {
+  return (0, import_jsx_runtime11.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [label && (0, import_jsx_runtime11.jsxs)("label", { htmlFor: selectId, style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: [label, required2 && (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime13.jsxs)("select", { id: selectId, value, onChange: (e) => onChange?.(e.target.value), disabled, required: required2, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
+  }, children: [label, required2 && (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), (0, import_jsx_runtime11.jsxs)("select", { id: selectId, value, onChange: (e) => onChange?.(e.target.value), disabled, required: required2, "aria-invalid": hasError || void 0, "aria-describedby": hasMessage ? messageId : void 0, style: {
     ...sizeStyles3[size],
     width: "100%",
     borderRadius: "var(--ggui-shape-radius-md, 8px)",
@@ -36810,26 +36751,26 @@ function Select({ label, value, onChange, options, placeholder, error: error210,
     paddingRight: "36px",
     boxSizing: "border-box",
     transition: `border-color ${duration3.normal} ${easing.easeInOut}, box-shadow ${duration3.normal} ${easing.easeInOut}`
-  }, ...rest, children: [placeholder && (0, import_jsx_runtime13.jsx)("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (0, import_jsx_runtime13.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))] }), hasMessage && (0, import_jsx_runtime13.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
+  }, ...rest, children: [placeholder && (0, import_jsx_runtime11.jsx)("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (0, import_jsx_runtime11.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))] }), hasMessage && (0, import_jsx_runtime11.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSurfaceVariant, #52525b)"
   }, children: error210 || helperText })] });
 }
 function Checkbox({ label, checked, onChange, disabled, description, indeterminate, style, className }) {
-  return (0, import_jsx_runtime14.jsxs)("label", { className, style: {
+  return (0, import_jsx_runtime12.jsxs)("label", { className, style: {
     display: "flex",
     alignItems: "flex-start",
     gap: "var(--ggui-spacing-2, 8px)",
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.5 : 1,
     ...style
-  }, children: [(0, import_jsx_runtime14.jsxs)("div", { style: {
+  }, children: [(0, import_jsx_runtime12.jsxs)("div", { style: {
     position: "relative",
     width: "18px",
     height: "18px",
     flexShrink: 0,
     marginTop: "2px"
-  }, children: [(0, import_jsx_runtime14.jsx)("input", { type: "checkbox", checked, onChange: (e) => onChange?.(e.target.checked), disabled, ref: (el) => {
+  }, children: [(0, import_jsx_runtime12.jsx)("input", { type: "checkbox", checked, onChange: (e) => onChange?.(e.target.checked), disabled, ref: (el) => {
     if (el)
       el.indeterminate = indeterminate || false;
   }, style: {
@@ -36839,7 +36780,7 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
     margin: 0,
     opacity: 0,
     cursor: disabled ? "not-allowed" : "pointer"
-  } }), (0, import_jsx_runtime14.jsx)("div", { style: {
+  } }), (0, import_jsx_runtime12.jsx)("div", { style: {
     width: "18px",
     height: "18px",
     borderRadius: "var(--ggui-shape-radius-sm, 4px)",
@@ -36849,11 +36790,11 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
     alignItems: "center",
     justifyContent: "center",
     transition: "all 0.2s"
-  }, children: (checked || indeterminate) && (0, import_jsx_runtime14.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { color: "#ffffff" }, children: indeterminate ? (0, import_jsx_runtime14.jsx)("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) : (0, import_jsx_runtime14.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), (label || description) && (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [label && (0, import_jsx_runtime14.jsx)("span", { style: {
+  }, children: (checked || indeterminate) && (0, import_jsx_runtime12.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { color: "#ffffff" }, children: indeterminate ? (0, import_jsx_runtime12.jsx)("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) : (0, import_jsx_runtime12.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), (label || description) && (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [label && (0, import_jsx_runtime12.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: label }), description && (0, import_jsx_runtime14.jsx)("span", { style: {
+  }, children: label }), description && (0, import_jsx_runtime12.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
   }, children: description })] })] });
@@ -36865,15 +36806,15 @@ var sizeConfig = {
 };
 function Toggle({ label, checked, onChange, disabled, size = "md", style, className }) {
   const config2 = sizeConfig[size];
-  const [focused, setFocused] = (0, import_react20.useState)(false);
-  return (0, import_jsx_runtime15.jsxs)("label", { className, style: {
+  const [focused, setFocused] = (0, import_react15.useState)(false);
+  return (0, import_jsx_runtime13.jsxs)("label", { className, style: {
     display: "flex",
     alignItems: "center",
     gap: "var(--ggui-spacing-2, 8px)",
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.5 : 1,
     ...style
-  }, children: [(0, import_jsx_runtime15.jsx)("div", { role: "switch", "aria-checked": checked, "aria-label": label, tabIndex: disabled ? -1 : 0, onClick: () => !disabled && onChange?.(!checked), onKeyDown: (e) => {
+  }, children: [(0, import_jsx_runtime13.jsx)("div", { role: "switch", "aria-checked": checked, "aria-label": label, tabIndex: disabled ? -1 : 0, onClick: () => !disabled && onChange?.(!checked), onKeyDown: (e) => {
     if (disabled)
       return;
     if (e.key === " " || e.key === "Enter") {
@@ -36890,7 +36831,7 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
     flexShrink: 0,
     outline: "none",
     boxShadow: focused ? "0 0 0 3px var(--ggui-color-primary-200, #bae6fd)" : void 0
-  }, children: (0, import_jsx_runtime15.jsx)("div", { style: {
+  }, children: (0, import_jsx_runtime13.jsx)("div", { style: {
     width: config2.knob,
     height: config2.knob,
     borderRadius: "50%",
@@ -36900,23 +36841,23 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
     left: checked ? config2.width - config2.knob - (config2.height - config2.knob) / 2 : (config2.height - config2.knob) / 2,
     transition: `left ${duration3.normal} ${easing.easeInOut}`,
     boxShadow: "var(--ggui-shape-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))"
-  } }) }), label && (0, import_jsx_runtime15.jsx)("span", { style: {
+  } }) }), label && (0, import_jsx_runtime13.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
   }, children: label })] });
 }
 function RadioGroup({ label, value, onChange, options, direction = "vertical", disabled, error: error210, style, className }) {
-  const uniqueId = (0, import_react21.useId)();
+  const uniqueId = (0, import_react16.useId)();
   const labelId = `${uniqueId}-label`;
   const errorId = `${uniqueId}-error`;
   const groupName = `${uniqueId}-radio`;
   const hasError = Boolean(error210);
-  return (0, import_jsx_runtime16.jsxs)("div", { role: "radiogroup", "aria-labelledby": label ? labelId : void 0, "aria-describedby": hasError ? errorId : void 0, className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [label && (0, import_jsx_runtime16.jsx)("span", { id: labelId, style: {
+  return (0, import_jsx_runtime14.jsxs)("div", { role: "radiogroup", "aria-labelledby": label ? labelId : void 0, "aria-describedby": hasError ? errorId : void 0, className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [label && (0, import_jsx_runtime14.jsx)("span", { id: labelId, style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: label }), (0, import_jsx_runtime16.jsx)("div", { style: {
+  }, children: label }), (0, import_jsx_runtime14.jsx)("div", { style: {
     display: "flex",
     flexDirection: direction === "vertical" ? "column" : "row",
     gap: direction === "vertical" ? "var(--ggui-spacing-2, 8px)" : "var(--ggui-spacing-4, 16px)",
@@ -36924,26 +36865,26 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
   }, children: options.map((option) => {
     const isSelected = value === option.value;
     const isDisabled = disabled || option.disabled;
-    return (0, import_jsx_runtime16.jsxs)("label", { style: {
+    return (0, import_jsx_runtime14.jsxs)("label", { style: {
       display: "flex",
       alignItems: "flex-start",
       gap: "var(--ggui-spacing-2, 8px)",
       cursor: isDisabled ? "not-allowed" : "pointer",
       opacity: isDisabled ? 0.5 : 1
-    }, children: [(0, import_jsx_runtime16.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime14.jsxs)("div", { style: {
       position: "relative",
       width: "18px",
       height: "18px",
       flexShrink: 0,
       marginTop: "2px"
-    }, children: [(0, import_jsx_runtime16.jsx)("input", { type: "radio", name: groupName, value: option.value, checked: isSelected, onChange: () => onChange?.(option.value), disabled: isDisabled, style: {
+    }, children: [(0, import_jsx_runtime14.jsx)("input", { type: "radio", name: groupName, value: option.value, checked: isSelected, onChange: () => onChange?.(option.value), disabled: isDisabled, style: {
       position: "absolute",
       width: "18px",
       height: "18px",
       margin: 0,
       opacity: 0,
       cursor: isDisabled ? "not-allowed" : "pointer"
-    } }), (0, import_jsx_runtime16.jsx)("div", { style: {
+    } }), (0, import_jsx_runtime14.jsx)("div", { style: {
       width: "18px",
       height: "18px",
       borderRadius: "var(--ggui-shape-radius-full, 9999px)",
@@ -36953,51 +36894,51 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
       alignItems: "center",
       justifyContent: "center",
       transition: "all 0.2s"
-    }, children: isSelected && (0, import_jsx_runtime16.jsx)("div", { style: {
+    }, children: isSelected && (0, import_jsx_runtime14.jsx)("div", { style: {
       width: "8px",
       height: "8px",
       borderRadius: "var(--ggui-shape-radius-full, 9999px)",
       backgroundColor: "var(--ggui-color-primary-600, #0284c7)"
-    } }) })] }), (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [(0, import_jsx_runtime16.jsx)("span", { style: {
+    } }) })] }), (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [(0, import_jsx_runtime14.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-sm, 14px)",
       fontWeight: "var(--ggui-font-weight-medium, 500)",
       color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-    }, children: option.label }), option.description && (0, import_jsx_runtime16.jsx)("span", { style: {
+    }, children: option.label }), option.description && (0, import_jsx_runtime14.jsx)("span", { style: {
       fontSize: "var(--ggui-font-size-xs, 12px)",
       color: "var(--ggui-color-onSurfaceVariant, #52525b)"
     }, children: option.description })] })] }, option.value);
-  }) }), error210 && (0, import_jsx_runtime16.jsx)("span", { id: errorId, role: "alert", style: {
+  }) }), error210 && (0, import_jsx_runtime14.jsx)("span", { id: errorId, role: "alert", style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: "var(--ggui-color-error-500, #ef4444)"
   }, children: error210 })] });
 }
 function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disabled, showValue, style, className }) {
-  const uniqueId = (0, import_react22.useId)();
+  const uniqueId = (0, import_react17.useId)();
   const sliderId = `${uniqueId}-slider`;
   const labelId = `${uniqueId}-label`;
   const percentage = (value - min) / (max - min) * 100;
-  return (0, import_jsx_runtime17.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [(label || showValue) && (0, import_jsx_runtime17.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [label && (0, import_jsx_runtime17.jsx)("span", { id: labelId, style: {
+  return (0, import_jsx_runtime15.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-2, 8px)", ...style }, children: [(label || showValue) && (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [label && (0, import_jsx_runtime15.jsx)("span", { id: labelId, style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: label }), showValue && (0, import_jsx_runtime17.jsx)("span", { style: {
+  }, children: label }), showValue && (0, import_jsx_runtime15.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-primary-600, #0284c7)"
-  }, children: value })] }), (0, import_jsx_runtime17.jsxs)("div", { style: { position: "relative", height: "20px", display: "flex", alignItems: "center" }, children: [(0, import_jsx_runtime17.jsx)("div", { style: {
+  }, children: value })] }), (0, import_jsx_runtime15.jsxs)("div", { style: { position: "relative", height: "20px", display: "flex", alignItems: "center" }, children: [(0, import_jsx_runtime15.jsx)("div", { style: {
     position: "absolute",
     width: "100%",
     height: "6px",
     borderRadius: "3px",
     backgroundColor: "var(--ggui-color-outlineVariant, #e4e4e7)"
-  } }), (0, import_jsx_runtime17.jsx)("div", { style: {
+  } }), (0, import_jsx_runtime15.jsx)("div", { style: {
     position: "absolute",
     width: `${percentage}%`,
     height: "6px",
     borderRadius: "3px",
     backgroundColor: disabled ? "var(--ggui-color-outline, #d4d4d8)" : "var(--ggui-color-primary-600, #0284c7)",
     transition: "width 0.1s"
-  } }), (0, import_jsx_runtime17.jsx)("input", { id: sliderId, type: "range", min, max, step, value, onChange: (e) => onChange?.(Number(e.target.value)), disabled, "aria-labelledby": label ? labelId : void 0, "aria-label": label ? void 0 : "Slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, style: {
+  } }), (0, import_jsx_runtime15.jsx)("input", { id: sliderId, type: "range", min, max, step, value, onChange: (e) => onChange?.(Number(e.target.value)), disabled, "aria-labelledby": label ? labelId : void 0, "aria-label": label ? void 0 : "Slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, style: {
     position: "absolute",
     width: "100%",
     height: "20px",
@@ -37005,7 +36946,7 @@ function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disa
     opacity: 0,
     cursor: disabled ? "not-allowed" : "pointer",
     zIndex: 1
-  } }), (0, import_jsx_runtime17.jsx)("div", { style: {
+  } }), (0, import_jsx_runtime15.jsx)("div", { style: {
     position: "absolute",
     left: `calc(${percentage}% - 10px)`,
     width: "20px",
@@ -37054,7 +36995,7 @@ var sizeStyles4 = {
   lg: { padding: "4px 10px", fontSize: "var(--ggui-font-size-sm, 14px)" }
 };
 function Badge({ children, variant = "default", size = "md", pill = true, style, className }) {
-  return (0, import_jsx_runtime18.jsx)("span", { className, style: {
+  return (0, import_jsx_runtime16.jsx)("span", { className, style: {
     ...variantStyles2[variant],
     ...sizeStyles4[size],
     display: "inline-flex",
@@ -37081,7 +37022,7 @@ function Skeleton({ variant = "rect", width, height, radius: radius2 = "sm", sty
     animation: "ggui-skeleton-pulse 1.5s ease-in-out infinite",
     ...style
   };
-  return (0, import_jsx_runtime19.jsx)("div", { className, style: composedStyle, "aria-hidden": "true", children: (0, import_jsx_runtime19.jsx)("style", { children: `@keyframes ggui-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }` }) });
+  return (0, import_jsx_runtime17.jsx)("div", { className, style: composedStyle, "aria-hidden": "true", children: (0, import_jsx_runtime17.jsx)("style", { children: `@keyframes ggui-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }` }) });
 }
 var sizeMap2 = {
   xs: 24,
@@ -37098,7 +37039,7 @@ var avatarColors = [
   "var(--ggui-color-info-500, #06b6d4)"
 ];
 function Avatar({ src, name, size = "md", shape = "circle", style, className }) {
-  const [imageError, setImageError] = (0, import_react23.useState)(false);
+  const [imageError, setImageError] = (0, import_react18.useState)(false);
   const resolvedSize = typeof size === "number" ? size : sizeMap2[size] || 40;
   const initials = name ? name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
   const getColorFromName = (name2) => {
@@ -37108,7 +37049,7 @@ function Avatar({ src, name, size = "md", shape = "circle", style, className })
     return avatarColors[hash2 % avatarColors.length];
   };
   const showInitials = !src || imageError;
-  return (0, import_jsx_runtime20.jsx)("div", { role: "img", "aria-label": name || "Avatar", className, style: {
+  return (0, import_jsx_runtime18.jsx)("div", { role: "img", "aria-label": name || "Avatar", className, style: {
     width: resolvedSize,
     height: resolvedSize,
     borderRadius: shape === "circle" ? "50%" : "var(--ggui-shape-radius-md, 8px)",
@@ -37122,7 +37063,7 @@ function Avatar({ src, name, size = "md", shape = "circle", style, className })
     overflow: "hidden",
     flexShrink: 0,
     ...style
-  }, children: showInitials ? initials : (0, import_jsx_runtime20.jsx)("img", { src, alt: name || "Avatar", onError: () => setImageError(true), style: {
+  }, children: showInitials ? initials : (0, import_jsx_runtime18.jsx)("img", { src, alt: name || "Avatar", onError: () => setImageError(true), style: {
     width: "100%",
     height: "100%",
     objectFit: "cover"
@@ -37155,14 +37096,14 @@ var variantStyles3 = {
   }
 };
 var defaultIcons = {
-  info: (0, import_jsx_runtime21.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime21.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
-  success: (0, import_jsx_runtime21.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime21.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
-  warning: (0, import_jsx_runtime21.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime21.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
-  error: (0, import_jsx_runtime21.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime21.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+  info: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  success: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+  warning: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+  error: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
 };
 function Alert({ children, variant = "info", title, closable, onClose, icon, style, className }) {
   const variantStyle = variantStyles3[variant];
-  return (0, import_jsx_runtime21.jsxs)("div", { role: "alert", className, style: {
+  return (0, import_jsx_runtime19.jsxs)("div", { role: "alert", className, style: {
     display: "flex",
     gap: "12px",
     padding: "12px 16px",
@@ -37171,10 +37112,10 @@ function Alert({ children, variant = "info", title, closable, onClose, icon, sty
     border: `1px solid ${variantStyle.border}`,
     color: variantStyle.text,
     ...style
-  }, children: [(0, import_jsx_runtime21.jsx)("div", { style: { color: variantStyle.icon, flexShrink: 0 }, children: icon || defaultIcons[variant] }), (0, import_jsx_runtime21.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)" }, children: [title && (0, import_jsx_runtime21.jsx)("div", { style: {
+  }, children: [(0, import_jsx_runtime19.jsx)("div", { style: { color: variantStyle.icon, flexShrink: 0 }, children: icon || defaultIcons[variant] }), (0, import_jsx_runtime19.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)" }, children: [title && (0, import_jsx_runtime19.jsx)("div", { style: {
     fontWeight: "var(--ggui-font-weight-semibold, 600)",
     fontSize: "var(--ggui-font-size-sm, 14px)"
-  }, children: title }), (0, import_jsx_runtime21.jsx)("div", { style: { fontSize: "var(--ggui-font-size-sm, 14px)" }, children })] }), closable && (0, import_jsx_runtime21.jsx)("button", { onClick: onClose, "aria-label": "Close", style: {
+  }, children: title }), (0, import_jsx_runtime19.jsx)("div", { style: { fontSize: "var(--ggui-font-size-sm, 14px)" }, children })] }), closable && (0, import_jsx_runtime19.jsx)("button", { onClick: onClose, "aria-label": "Close", style: {
     background: "none",
     border: "none",
     padding: "4px",
@@ -37189,7 +37130,7 @@ function Alert({ children, variant = "info", title, closable, onClose, icon, sty
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "var(--ggui-shape-radius-sm, 4px)"
-  }, children: (0, import_jsx_runtime21.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime21.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
+  }, children: (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime19.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
 }
 var variantColors = {
   default: "var(--ggui-color-primary-600, #0284c7)",
@@ -37207,17 +37148,17 @@ function Progress({ value, max = 100, variant = "default", size = "md", label, s
   const height = sizeHeights[size];
   const barColor = variantColors[variant];
   const accessibleName = label ?? "Progress";
-  return (0, import_jsx_runtime22.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [showLabel && (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [(0, import_jsx_runtime22.jsx)("span", { style: { fontSize: "var(--ggui-font-size-sm, 14px)", color: "var(--ggui-color-onSurfaceVariant, #52525b)" }, children: accessibleName }), (0, import_jsx_runtime22.jsxs)("span", { style: {
+  return (0, import_jsx_runtime20.jsxs)("div", { className, style: { display: "flex", flexDirection: "column", gap: "var(--ggui-spacing-1, 4px)", ...style }, children: [showLabel && (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [(0, import_jsx_runtime20.jsx)("span", { style: { fontSize: "var(--ggui-font-size-sm, 14px)", color: "var(--ggui-color-onSurfaceVariant, #52525b)" }, children: accessibleName }), (0, import_jsx_runtime20.jsxs)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
     color: "var(--ggui-color-onSurface, #18181b)"
-  }, children: [Math.round(percentage), "%"] })] }), (0, import_jsx_runtime22.jsxs)("div", { role: "progressbar", "aria-valuenow": indeterminate ? void 0 : value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": accessibleName, style: {
+  }, children: [Math.round(percentage), "%"] })] }), (0, import_jsx_runtime20.jsxs)("div", { role: "progressbar", "aria-valuenow": indeterminate ? void 0 : value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": accessibleName, style: {
     width: "100%",
     height,
     borderRadius: height / 2,
     backgroundColor: "var(--ggui-color-outlineVariant, #e4e4e7)",
     overflow: "hidden"
-  }, children: [(0, import_jsx_runtime22.jsx)("div", { style: {
+  }, children: [(0, import_jsx_runtime20.jsx)("div", { style: {
     height: "100%",
     borderRadius: height / 2,
     backgroundColor: barColor,
@@ -37228,23 +37169,23 @@ function Progress({ value, max = 100, variant = "default", size = "md", label, s
     } : {
       width: `${percentage}%`
     }
-  } }), indeterminate && (0, import_jsx_runtime22.jsx)("style", { children: `@keyframes ggui-progress-indeterminate {
+  } }), indeterminate && (0, import_jsx_runtime20.jsx)("style", { children: `@keyframes ggui-progress-indeterminate {
               0% { transform: translateX(-100%); }
               100% { transform: translateX(400%); }
             }` })] })] });
 }
 function Image({ src, alt, width, height, objectFit = "cover", radius: radius2, fallback, style, className }) {
-  const [error210, setError] = (0, import_react24.useState)(false);
+  const [error210, setError] = (0, import_react19.useState)(false);
   const resolveSize2 = (value) => {
     if (value === void 0)
       return void 0;
     return typeof value === "number" ? `${value}px` : value;
   };
   if (error210 && fallback) {
-    return (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: fallback });
+    return (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: fallback });
   }
   if (error210) {
-    return (0, import_jsx_runtime23.jsx)("div", { role: "img", "aria-label": `${alt} (failed to load)`, className, style: {
+    return (0, import_jsx_runtime21.jsx)("div", { role: "img", "aria-label": `${alt} (failed to load)`, className, style: {
       width: resolveSize2(width) || "100%",
       height: resolveSize2(height) || "auto",
       borderRadius: resolveRadius(radius2),
@@ -37254,9 +37195,9 @@ function Image({ src, alt, width, height, objectFit = "cover", radius: radius2,
       justifyContent: "center",
       color: "var(--ggui-color-outline, #d4d4d8)",
       ...style
-    }, children: (0, import_jsx_runtime23.jsx)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "currentColor", children: (0, import_jsx_runtime23.jsx)("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }) });
+    }, children: (0, import_jsx_runtime21.jsx)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "currentColor", children: (0, import_jsx_runtime21.jsx)("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }) });
   }
-  return (0, import_jsx_runtime23.jsx)("img", { src, alt, onError: () => setError(true), className, style: {
+  return (0, import_jsx_runtime21.jsx)("img", { src, alt, onError: () => setError(true), className, style: {
     width: resolveSize2(width) || "100%",
     height: resolveSize2(height) || "auto",
     objectFit,
@@ -41247,7 +41188,7 @@ function resolveLucideName(name) {
   return LUCIDE_LOOKUP.get(normalized);
 }
 function renderLucideIcon(data, size, color) {
-  return (0, import_jsx_runtime24.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: data.map(([tag, attrs], i) => import_react25.default.createElement(tag, { key: i, ...attrs })) });
+  return (0, import_jsx_runtime22.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: data.map(([tag, attrs], i) => import_react20.default.createElement(tag, { key: i, ...attrs })) });
 }
 function Icon({ name, size = 24, tone, children, style, className, "aria-label": ariaLabel }) {
   const iconColor = tone ? resolveToneCss(tone) : "currentColor";
@@ -41262,22 +41203,22 @@ function Icon({ name, size = 24, tone, children, style, className, "aria-label":
     ...style
   };
   if (children) {
-    return (0, import_jsx_runtime24.jsx)("span", { className, style: wrapStyle, ...a11yProps, children });
+    return (0, import_jsx_runtime22.jsx)("span", { className, style: wrapStyle, ...a11yProps, children });
   }
   if (name) {
     const lucideKey = resolveLucideName(name);
     if (lucideKey) {
-      return (0, import_jsx_runtime24.jsx)("span", { className, style: wrapStyle, ...a11yProps, children: renderLucideIcon(LUCIDE_ICONS[lucideKey], size, iconColor) });
+      return (0, import_jsx_runtime22.jsx)("span", { className, style: wrapStyle, ...a11yProps, children: renderLucideIcon(LUCIDE_ICONS[lucideKey], size, iconColor) });
     }
   }
   if (name && /[^\x00-\x7F]/.test(name)) {
-    return (0, import_jsx_runtime24.jsx)("span", { className, ...a11yProps, style: {
+    return (0, import_jsx_runtime22.jsx)("span", { className, ...a11yProps, style: {
       ...wrapStyle,
       fontSize: size * 0.75,
       lineHeight: 1
     }, children: name });
   }
-  return (0, import_jsx_runtime24.jsx)("span", { className, ...a11yProps, style: {
+  return (0, import_jsx_runtime22.jsx)("span", { className, ...a11yProps, style: {
     ...wrapStyle,
     backgroundColor: "var(--ggui-color-outlineVariant, #e4e4e7)",
     borderRadius: "var(--ggui-shape-radius-sm, 4px)",
@@ -41292,7 +41233,7 @@ function Link({ children, href, external, tone, underline = "hover", style, clas
     hover: "none",
     none: "none"
   }[underline];
-  return (0, import_jsx_runtime25.jsxs)("a", { href, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, className, style: {
+  return (0, import_jsx_runtime23.jsxs)("a", { href, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, className, style: {
     color: linkColor,
     textDecoration: underlineStyle,
     cursor: "pointer",
@@ -41306,13 +41247,13 @@ function Link({ children, href, external, tone, underline = "hover", style, clas
     if (underline === "hover") {
       e.target.style.textDecoration = "none";
     }
-  }, ...rest, children: [children, external && (0, import_jsx_runtime25.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { marginLeft: "4px", verticalAlign: "middle" }, children: [(0, import_jsx_runtime25.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), (0, import_jsx_runtime25.jsx)("polyline", { points: "15 3 21 3 21 9" }), (0, import_jsx_runtime25.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] })] });
+  }, ...rest, children: [children, external && (0, import_jsx_runtime23.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { marginLeft: "4px", verticalAlign: "middle" }, children: [(0, import_jsx_runtime23.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), (0, import_jsx_runtime23.jsx)("polyline", { points: "15 3 21 3 21 9" }), (0, import_jsx_runtime23.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] })] });
 }
 function Tooltip({ children, content, position = "top", delay = 200, style, className }) {
-  const [visible, setVisible] = (0, import_react26.useState)(false);
-  const [coords, setCoords] = (0, import_react26.useState)({ top: 0, left: 0 });
-  const triggerRef = (0, import_react26.useRef)(null);
-  const timeoutRef = (0, import_react26.useRef)(null);
+  const [visible, setVisible] = (0, import_react21.useState)(false);
+  const [coords, setCoords] = (0, import_react21.useState)({ top: 0, left: 0 });
+  const triggerRef = (0, import_react21.useRef)(null);
+  const timeoutRef = (0, import_react21.useRef)(null);
   const showTooltip = () => {
     timeoutRef.current = setTimeout(() => {
       setVisible(true);
@@ -41324,7 +41265,7 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
     }
     setVisible(false);
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (visible && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       const offset = 8;
@@ -41351,7 +41292,7 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
       setCoords({ top, left });
     }
   }, [visible, position]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -41370,10 +41311,10 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
         return "translateY(-50%)";
     }
   };
-  return (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)("div", { ref: triggerRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, className, style: {
+  return (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [(0, import_jsx_runtime24.jsx)("div", { ref: triggerRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, className, style: {
     display: "inline-block",
     ...style
-  }, children }), visible && (0, import_jsx_runtime26.jsx)("div", { role: "tooltip", style: {
+  }, children }), visible && (0, import_jsx_runtime24.jsx)("div", { role: "tooltip", style: {
     position: "fixed",
     top: coords.top,
     left: coords.left,
@@ -41389,16 +41330,16 @@ function Tooltip({ children, content, position = "top", delay = 200, style, clas
     whiteSpace: "nowrap"
   }, children: content })] });
 }
-var sortIndicator = (active, direction) => (0, import_jsx_runtime27.jsxs)("span", { "aria-hidden": "true", style: {
+var sortIndicator = (active, direction) => (0, import_jsx_runtime25.jsxs)("span", { "aria-hidden": "true", style: {
   display: "inline-flex",
   flexDirection: "column",
   marginLeft: "4px",
   fontSize: "10px",
   lineHeight: 1,
   opacity: active ? 1 : 0.3
-}, children: [(0, import_jsx_runtime27.jsx)("span", { style: { opacity: active && direction === "asc" ? 1 : 0.4 }, children: "\u25B2" }), (0, import_jsx_runtime27.jsx)("span", { style: { opacity: active && direction === "desc" ? 1 : 0.4 }, children: "\u25BC" })] });
+}, children: [(0, import_jsx_runtime25.jsx)("span", { style: { opacity: active && direction === "asc" ? 1 : 0.4 }, children: "\u25B2" }), (0, import_jsx_runtime25.jsx)("span", { style: { opacity: active && direction === "desc" ? 1 : 0.4 }, children: "\u25BC" })] });
 function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped = false, hoverable = true, compact = false, bordered = false, caption, style, className }) {
-  const [hoveredRow, setHoveredRow] = (0, import_react27.useState)(null);
+  const [hoveredRow, setHoveredRow] = (0, import_react22.useState)(null);
   const cellPadding = compact ? "var(--ggui-spacing-1, 4px) var(--ggui-spacing-2, 8px)" : "var(--ggui-spacing-2, 8px) var(--ggui-spacing-4, 16px)";
   const handleSort = (key) => {
     if (!onSort)
@@ -41406,7 +41347,7 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
     const newDirection = sortKey === key && sortDirection === "asc" ? "desc" : "asc";
     onSort(key, newDirection);
   };
-  const headerStyle2 = {
+  const headerStyle = {
     padding: cellPadding,
     textAlign: "left",
     fontWeight: "var(--ggui-font-weight-semibold, 600)",
@@ -41418,36 +41359,36 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
     whiteSpace: "nowrap",
     userSelect: "none"
   };
-  return (0, import_jsx_runtime27.jsx)("div", { className, style: {
+  return (0, import_jsx_runtime25.jsx)("div", { className, style: {
     overflowX: "auto",
     borderRadius: "var(--ggui-shape-radius-lg, 8px)",
     border: bordered ? "1px solid var(--ggui-color-outlineVariant, #e4e4e7)" : void 0,
     ...style
-  }, children: (0, import_jsx_runtime27.jsxs)("table", { role: "table", style: {
+  }, children: (0, import_jsx_runtime25.jsxs)("table", { role: "table", style: {
     width: "100%",
     borderCollapse: "collapse",
     fontSize: "var(--ggui-font-size-sm, 14px)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: [caption && (0, import_jsx_runtime27.jsx)("caption", { style: {
+  }, children: [caption && (0, import_jsx_runtime25.jsx)("caption", { style: {
     padding: cellPadding,
     fontSize: "var(--ggui-font-size-sm, 14px)",
     color: "var(--ggui-color-onSurfaceVariant, #52525b)",
     textAlign: "left",
     captionSide: "top"
-  }, children: caption }), (0, import_jsx_runtime27.jsx)("thead", { children: (0, import_jsx_runtime27.jsx)("tr", { children: columns.map((col) => (0, import_jsx_runtime27.jsx)("th", { scope: "col", "aria-sort": sortKey === col.key ? sortDirection === "asc" ? "ascending" : "descending" : void 0, onClick: col.sortable ? () => handleSort(col.key) : void 0, onKeyDown: col.sortable ? (e) => {
+  }, children: caption }), (0, import_jsx_runtime25.jsx)("thead", { children: (0, import_jsx_runtime25.jsx)("tr", { children: columns.map((col) => (0, import_jsx_runtime25.jsx)("th", { scope: "col", "aria-sort": sortKey === col.key ? sortDirection === "asc" ? "ascending" : "descending" : void 0, onClick: col.sortable ? () => handleSort(col.key) : void 0, onKeyDown: col.sortable ? (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       handleSort(col.key);
     }
   } : void 0, tabIndex: col.sortable ? 0 : void 0, style: {
-    ...headerStyle2,
+    ...headerStyle,
     textAlign: col.align || "left",
     width: col.width,
     cursor: col.sortable ? "pointer" : "default"
-  }, children: (0, import_jsx_runtime27.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [col.header, col.sortable && sortIndicator(sortKey === col.key, sortDirection)] }) }, col.key)) }) }), (0, import_jsx_runtime27.jsx)("tbody", { children: data.map((row, rowIndex) => (0, import_jsx_runtime27.jsx)("tr", { onMouseEnter: hoverable ? () => setHoveredRow(rowIndex) : void 0, onMouseLeave: hoverable ? () => setHoveredRow(null) : void 0, style: {
+  }, children: (0, import_jsx_runtime25.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [col.header, col.sortable && sortIndicator(sortKey === col.key, sortDirection)] }) }, col.key)) }) }), (0, import_jsx_runtime25.jsx)("tbody", { children: data.map((row, rowIndex) => (0, import_jsx_runtime25.jsx)("tr", { onMouseEnter: hoverable ? () => setHoveredRow(rowIndex) : void 0, onMouseLeave: hoverable ? () => setHoveredRow(null) : void 0, style: {
     backgroundColor: hoverable && hoveredRow === rowIndex ? "var(--ggui-color-surface, #fafafa)" : striped && rowIndex % 2 === 1 ? "var(--ggui-color-surface, #fafafa)" : "transparent",
     transition: "background-color 0.15s ease"
-  }, children: columns.map((col) => (0, import_jsx_runtime27.jsx)("td", { style: {
+  }, children: columns.map((col) => (0, import_jsx_runtime25.jsx)("td", { style: {
     padding: cellPadding,
     textAlign: col.align || "left",
     borderBottom: "1px solid var(--ggui-color-surfaceVariant, #f4f4f5)",
@@ -41469,10 +41410,10 @@ var sizeStyles5 = {
   }
 };
 function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullWidth = false, style, className }) {
-  const uniqueId = (0, import_react28.useId)();
-  const [internalKey, setInternalKey] = (0, import_react28.useState)(items[0]?.key);
+  const uniqueId = (0, import_react23.useId)();
+  const [internalKey, setInternalKey] = (0, import_react23.useState)(items[0]?.key);
   const currentKey = activeKey ?? internalKey;
-  const handleChange = (0, import_react28.useCallback)((key) => {
+  const handleChange = (0, import_react23.useCallback)((key) => {
     if (onChange) {
       onChange(key);
     } else {
@@ -41480,8 +41421,8 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
     }
   }, [onChange]);
   const activeItem = items.find((item) => item.key === currentKey);
-  const tabListRef = (0, import_react28.useRef)(null);
-  const handleTabKeyDown = (0, import_react28.useCallback)((e) => {
+  const tabListRef = (0, import_react23.useRef)(null);
+  const handleTabKeyDown = (0, import_react23.useCallback)((e) => {
     const enabledItems = items.filter((item) => !item.disabled);
     const currentIndex = enabledItems.findIndex((item) => item.key === currentKey);
     let nextIndex;
@@ -41555,11 +41496,11 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
     borderRadius: variant === "pills" ? "var(--ggui-shape-radius-lg, 8px)" : void 0,
     padding: variant === "pills" ? "var(--ggui-spacing-1, 4px)" : void 0
   };
-  return (0, import_jsx_runtime28.jsxs)("div", { className, style, children: [(0, import_jsx_runtime28.jsx)("div", { ref: tabListRef, role: "tablist", "aria-orientation": "horizontal", style: tabListStyle, children: items.map((item) => {
+  return (0, import_jsx_runtime26.jsxs)("div", { className, style, children: [(0, import_jsx_runtime26.jsx)("div", { ref: tabListRef, role: "tablist", "aria-orientation": "horizontal", style: tabListStyle, children: items.map((item) => {
     const isActive = item.key === currentKey;
     const isDisabled = !!item.disabled;
-    return (0, import_jsx_runtime28.jsxs)("button", { role: "tab", id: `${uniqueId}-tab-${item.key}`, "aria-selected": isActive, "aria-controls": `${uniqueId}-panel-${item.key}`, "aria-disabled": isDisabled, tabIndex: isActive ? 0 : -1, onClick: isDisabled ? void 0 : () => handleChange(item.key), onKeyDown: isDisabled ? void 0 : handleTabKeyDown, style: getTabStyle(isActive, isDisabled), children: [item.icon, item.label] }, item.key);
-  }) }), activeItem && (0, import_jsx_runtime28.jsx)("div", { role: "tabpanel", id: `${uniqueId}-panel-${activeItem.key}`, "aria-labelledby": `${uniqueId}-tab-${activeItem.key}`, tabIndex: 0, style: {
+    return (0, import_jsx_runtime26.jsxs)("button", { role: "tab", id: `${uniqueId}-tab-${item.key}`, "aria-selected": isActive, "aria-controls": `${uniqueId}-panel-${item.key}`, "aria-disabled": isDisabled, tabIndex: isActive ? 0 : -1, onClick: isDisabled ? void 0 : () => handleChange(item.key), onKeyDown: isDisabled ? void 0 : handleTabKeyDown, style: getTabStyle(isActive, isDisabled), children: [item.icon, item.label] }, item.key);
+  }) }), activeItem && (0, import_jsx_runtime26.jsx)("div", { role: "tabpanel", id: `${uniqueId}-panel-${activeItem.key}`, "aria-labelledby": `${uniqueId}-tab-${activeItem.key}`, tabIndex: 0, style: {
     padding: "var(--ggui-spacing-4, 16px) 0"
   }, children: activeItem.content })] });
 }
@@ -41739,20 +41680,20 @@ var variantStyles4 = {
   }
 };
 var defaultIcons2 = {
-  info: (0, import_jsx_runtime29.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime29.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
-  success: (0, import_jsx_runtime29.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime29.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
-  warning: (0, import_jsx_runtime29.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime29.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
-  error: (0, import_jsx_runtime29.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime29.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+  info: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  success: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+  warning: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+  error: (0, import_jsx_runtime27.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
 };
 function Toast({ message, variant = "info", title, duration: duration22 = 5e3, onClose, visible = true, style, className }) {
-  (0, import_react29.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!visible || duration22 === 0 || !onClose)
       return;
     const timer = setTimeout(onClose, duration22);
     return () => clearTimeout(timer);
   }, [visible, duration22, onClose]);
   if (!visible) {
-    return (0, import_jsx_runtime29.jsx)("div", { role: "alert", "aria-live": "assertive", className, style: {
+    return (0, import_jsx_runtime27.jsx)("div", { role: "alert", "aria-live": "assertive", className, style: {
       position: "absolute",
       width: "1px",
       height: "1px",
@@ -41777,10 +41718,10 @@ function Toast({ message, variant = "info", title, duration: duration22 = 5e3, o
     animation: animation.slideInUp,
     ...style
   };
-  return (0, import_jsx_runtime29.jsxs)("div", { role: "alert", "aria-live": "assertive", className, style: toastStyle, children: [(0, import_jsx_runtime29.jsx)("div", { style: { color: vs.icon, flexShrink: 0, marginTop: "2px" }, children: defaultIcons2[variant] }), (0, import_jsx_runtime29.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "2px" }, children: [title && (0, import_jsx_runtime29.jsx)("div", { style: {
+  return (0, import_jsx_runtime27.jsxs)("div", { role: "alert", "aria-live": "assertive", className, style: toastStyle, children: [(0, import_jsx_runtime27.jsx)("div", { style: { color: vs.icon, flexShrink: 0, marginTop: "2px" }, children: defaultIcons2[variant] }), (0, import_jsx_runtime27.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "2px" }, children: [title && (0, import_jsx_runtime27.jsx)("div", { style: {
     fontWeight: "var(--ggui-font-weight-semibold, 600)",
     fontSize: "var(--ggui-font-size-sm, 14px)"
-  }, children: title }), (0, import_jsx_runtime29.jsx)("div", { style: { fontSize: "var(--ggui-font-size-sm, 14px)" }, children: message })] }), onClose && (0, import_jsx_runtime29.jsx)("button", { onClick: onClose, "aria-label": "Dismiss notification", style: {
+  }, children: title }), (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: "var(--ggui-font-size-sm, 14px)" }, children: message })] }), onClose && (0, import_jsx_runtime27.jsx)("button", { onClick: onClose, "aria-label": "Dismiss notification", style: {
     background: "none",
     border: "none",
     padding: "4px",
@@ -41795,16 +41736,16 @@ function Toast({ message, variant = "info", title, duration: duration22 = 5e3, o
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "var(--ggui-shape-radius-sm, 4px)"
-  }, children: (0, import_jsx_runtime29.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime29.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
+  }, children: (0, import_jsx_runtime27.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime27.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
 }
-var chevron = (expanded) => (0, import_jsx_runtime30.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style: {
+var chevron = (expanded) => (0, import_jsx_runtime28.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style: {
   transition: `transform ${duration3.normal} ${easing.easeInOut}`,
   transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
   flexShrink: 0
-}, children: (0, import_jsx_runtime30.jsx)("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) });
+}, children: (0, import_jsx_runtime28.jsx)("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) });
 function Accordion({ items, expandedKeys, onChange, multiple = false, variant = "default", style, className }) {
-  const uniqueId = (0, import_react30.useId)();
-  const [internalExpanded, setInternalExpanded] = (0, import_react30.useState)([]);
+  const uniqueId = (0, import_react25.useId)();
+  const [internalExpanded, setInternalExpanded] = (0, import_react25.useState)([]);
   const currentExpanded = expandedKeys ?? internalExpanded;
   const handleToggle = (key) => {
     let newExpanded;
@@ -41852,12 +41793,12 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
       borderTop: isFirst ? "1px solid var(--ggui-color-outlineVariant, #e4e4e7)" : void 0
     };
   };
-  return (0, import_jsx_runtime30.jsx)("div", { className, style: containerStyle, children: items.map((item, index) => {
+  return (0, import_jsx_runtime28.jsx)("div", { className, style: containerStyle, children: items.map((item, index) => {
     const isExpanded = currentExpanded.includes(item.key);
     const isDisabled = !!item.disabled;
     const isFirst = index === 0;
     const isLast = index === items.length - 1;
-    return (0, import_jsx_runtime30.jsxs)("div", { style: getItemStyle(isFirst, isLast), children: [(0, import_jsx_runtime30.jsx)("h3", { style: { margin: 0 }, children: (0, import_jsx_runtime30.jsxs)("button", { id: `${uniqueId}-header-${item.key}`, "aria-expanded": isExpanded, "aria-controls": `${uniqueId}-panel-${item.key}`, "aria-disabled": isDisabled, onClick: isDisabled ? void 0 : () => handleToggle(item.key), style: {
+    return (0, import_jsx_runtime28.jsxs)("div", { style: getItemStyle(isFirst, isLast), children: [(0, import_jsx_runtime28.jsx)("h3", { style: { margin: 0 }, children: (0, import_jsx_runtime28.jsxs)("button", { id: `${uniqueId}-header-${item.key}`, "aria-expanded": isExpanded, "aria-controls": `${uniqueId}-panel-${item.key}`, "aria-disabled": isDisabled, onClick: isDisabled ? void 0 : () => handleToggle(item.key), style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -41872,9 +41813,9 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
       color: "var(--ggui-color-onSurface, #18181b)",
       textAlign: "left",
       transition: `background-color ${duration3.fast} ${easing.easeInOut}`
-    }, children: [(0, import_jsx_runtime30.jsx)("span", { children: item.title }), chevron(isExpanded)] }) }), (0, import_jsx_runtime30.jsx)("div", { id: `${uniqueId}-panel-${item.key}`, role: "region", "aria-labelledby": `${uniqueId}-header-${item.key}`, hidden: !isExpanded, style: {
+    }, children: [(0, import_jsx_runtime28.jsx)("span", { children: item.title }), chevron(isExpanded)] }) }), (0, import_jsx_runtime28.jsx)("div", { id: `${uniqueId}-panel-${item.key}`, role: "region", "aria-labelledby": `${uniqueId}-header-${item.key}`, hidden: !isExpanded, style: {
       overflow: "hidden"
-    }, children: isExpanded && (0, import_jsx_runtime30.jsx)("div", { style: {
+    }, children: isExpanded && (0, import_jsx_runtime28.jsx)("div", { style: {
       padding: "0 var(--ggui-spacing-4, 16px) var(--ggui-spacing-4, 16px)",
       fontSize: "var(--ggui-font-size-sm, 14px)",
       color: "var(--ggui-color-onSurfaceVariant, #52525b)",
@@ -41884,7 +41825,7 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
 }
 var STYLE_ID = "ggui-motion-keyframes";
 function MotionKeyframes() {
-  (0, import_react31.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (document.getElementById(STYLE_ID))
       return;
     const styleEl = document.createElement("style");
@@ -41901,12 +41842,12 @@ function MotionKeyframes() {
   return null;
 }
 function useMotion() {
-  const [motionEnabled, setMotionEnabled] = (0, import_react31.useState)(() => {
+  const [motionEnabled, setMotionEnabled] = (0, import_react26.useState)(() => {
     if (typeof window === "undefined")
       return true;
     return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   });
-  (0, import_react31.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     const handler = (e) => setMotionEnabled(!e.matches);
     mq.addEventListener("change", handler);
@@ -41915,9 +41856,9 @@ function useMotion() {
   return { motionEnabled };
 }
 function useAnimationKey(dep) {
-  const [key, setKey] = (0, import_react31.useState)(0);
-  const isFirst = (0, import_react31.useRef)(true);
-  (0, import_react31.useEffect)(() => {
+  const [key, setKey] = (0, import_react26.useState)(0);
+  const isFirst = (0, import_react26.useRef)(true);
+  (0, import_react26.useEffect)(() => {
     if (isFirst.current) {
       isFirst.current = false;
       return;
@@ -42055,7 +41996,7 @@ var colors = {
   transparent: "transparent"
 };
 function SearchField({ value: controlledValue, onChange, onSearch, placeholder = "Search...", showButton = false, buttonText = "Search", loading, disabled, size = "md", style, className }) {
-  const [internalValue, setInternalValue] = (0, import_react32.useState)("");
+  const [internalValue, setInternalValue] = (0, import_react27.useState)("");
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const handleChange = (newValue) => {
     if (controlledValue === void 0) {
@@ -42076,12 +42017,12 @@ function SearchField({ value: controlledValue, onChange, onSearch, placeholder =
     md: "md",
     lg: "md"
   };
-  return (0, import_jsx_runtime31.jsxs)("div", { className, style: {
+  return (0, import_jsx_runtime29.jsxs)("div", { className, style: {
     display: "flex",
     gap: "8px",
     alignItems: "flex-end",
     ...style
-  }, children: [(0, import_jsx_runtime31.jsxs)("div", { style: { position: "relative", flex: 1 }, children: [(0, import_jsx_runtime31.jsx)("div", { style: {
+  }, children: [(0, import_jsx_runtime29.jsxs)("div", { style: { position: "relative", flex: 1 }, children: [(0, import_jsx_runtime29.jsx)("div", { style: {
     position: "absolute",
     left: "12px",
     top: "50%",
@@ -42090,7 +42031,7 @@ function SearchField({ value: controlledValue, onChange, onSearch, placeholder =
     pointerEvents: "none",
     display: "flex",
     alignItems: "center"
-  }, children: loading ? (0, import_jsx_runtime31.jsx)(Spinner, { size: 16 }) : (0, import_jsx_runtime31.jsx)(Icon, { name: "search", size: 16 }) }), (0, import_jsx_runtime31.jsx)("input", { type: "search", value, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, placeholder, disabled: disabled || loading, style: {
+  }, children: loading ? (0, import_jsx_runtime29.jsx)(Spinner, { size: 16 }) : (0, import_jsx_runtime29.jsx)(Icon, { name: "search", size: 16 }) }), (0, import_jsx_runtime29.jsx)("input", { type: "search", value, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, placeholder, disabled: disabled || loading, style: {
     width: "100%",
     padding: size === "sm" ? "6px 10px 6px 36px" : size === "lg" ? "12px 14px 12px 40px" : "10px 12px 10px 38px",
     paddingLeft: "36px",
@@ -42101,24 +42042,24 @@ function SearchField({ value: controlledValue, onChange, onSearch, placeholder =
     color: colors.gray[900],
     outline: "none",
     boxSizing: "border-box"
-  } })] }), showButton && (0, import_jsx_runtime31.jsx)(Button, { onClick: handleSubmit, disabled: disabled || loading, size: buttonSizes[size], loading, children: buttonText })] });
+  } })] }), showButton && (0, import_jsx_runtime29.jsx)(Button, { onClick: handleSubmit, disabled: disabled || loading, size: buttonSizes[size], loading, children: buttonText })] });
 }
 function FormField({ label, children, error: error210, helperText, required: required2, description, style, className }) {
   const hasError = Boolean(error210);
-  return (0, import_jsx_runtime32.jsxs)("div", { className, style: {
+  return (0, import_jsx_runtime30.jsxs)("div", { className, style: {
     display: "flex",
     flexDirection: "column",
     gap: "4px",
     ...style
-  }, children: [(0, import_jsx_runtime32.jsxs)("label", { style: {
+  }, children: [(0, import_jsx_runtime30.jsxs)("label", { style: {
     fontSize: fontSize.sm,
     fontWeight: fontWeight.medium,
     color: colors.gray[700]
-  }, children: [label, required2 && (0, import_jsx_runtime32.jsx)("span", { style: { color: colors.error[500], marginLeft: "2px" }, children: "*" })] }), description && (0, import_jsx_runtime32.jsx)("span", { style: {
+  }, children: [label, required2 && (0, import_jsx_runtime30.jsx)("span", { style: { color: colors.error[500], marginLeft: "2px" }, children: "*" })] }), description && (0, import_jsx_runtime30.jsx)("span", { style: {
     fontSize: fontSize.xs,
     color: colors.gray[500],
     marginBottom: "4px"
-  }, children: description }), children, (error210 || helperText) && (0, import_jsx_runtime32.jsx)("span", { style: {
+  }, children: description }), children, (error210 || helperText) && (0, import_jsx_runtime30.jsx)("span", { style: {
     fontSize: fontSize.xs,
     color: hasError ? colors.error[500] : colors.gray[500]
   }, children: error210 || helperText })] });
@@ -42127,7 +42068,7 @@ function MenuItem({ label, icon, rightElement, onClick, disabled, active, danger
   const baseColor = danger ? colors.error[600] : colors.gray[700];
   const hoverBg = danger ? colors.error[50] : colors.gray[100];
   const activeBg = danger ? colors.error[100] : colors.primary[50];
-  return (0, import_jsx_runtime33.jsxs)("button", { onClick: disabled ? void 0 : onClick, disabled, className, style: {
+  return (0, import_jsx_runtime31.jsxs)("button", { onClick: disabled ? void 0 : onClick, disabled, className, style: {
     display: "flex",
     alignItems: "center",
     gap: "8px",
@@ -42151,7 +42092,7 @@ function MenuItem({ label, icon, rightElement, onClick, disabled, active, danger
     if (!disabled && !active) {
       e.target.style.backgroundColor = "transparent";
     }
-  }, children: [icon && (0, import_jsx_runtime33.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: icon }), (0, import_jsx_runtime33.jsx)("span", { style: { flex: 1 }, children: label }), rightElement && (0, import_jsx_runtime33.jsx)("span", { style: { display: "flex", flexShrink: 0, color: colors.gray[400] }, children: rightElement })] });
+  }, children: [icon && (0, import_jsx_runtime31.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: icon }), (0, import_jsx_runtime31.jsx)("span", { style: { flex: 1 }, children: label }), rightElement && (0, import_jsx_runtime31.jsx)("span", { style: { display: "flex", flexShrink: 0, color: colors.gray[400] }, children: rightElement })] });
 }
 var variantStyles5 = {
   default: {
@@ -42192,7 +42133,7 @@ var sizeStyles6 = {
 };
 function Tag({ children, variant = "default", size = "md", closable, onClose, icon, style, className }) {
   const sizeStyle = sizeStyles6[size];
-  return (0, import_jsx_runtime34.jsxs)("span", { className, style: {
+  return (0, import_jsx_runtime32.jsxs)("span", { className, style: {
     display: "inline-flex",
     alignItems: "center",
     gap: sizeStyle.gap,
@@ -42202,7 +42143,7 @@ function Tag({ children, variant = "default", size = "md", closable, onClose, ic
     borderRadius: "6px",
     ...variantStyles5[variant],
     ...style
-  }, children: [icon && (0, import_jsx_runtime34.jsx)("span", { style: { display: "flex" }, children: icon }), children, closable && (0, import_jsx_runtime34.jsx)("button", { onClick: onClose, style: {
+  }, children: [icon && (0, import_jsx_runtime32.jsx)("span", { style: { display: "flex" }, children: icon }), children, closable && (0, import_jsx_runtime32.jsx)("button", { onClick: onClose, style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -42213,12 +42154,12 @@ function Tag({ children, variant = "default", size = "md", closable, onClose, ic
     cursor: "pointer",
     opacity: 0.7,
     marginLeft: "2px"
-  }, "aria-label": "Remove", children: (0, import_jsx_runtime34.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: (0, import_jsx_runtime34.jsx)("path", { d: "M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6 9.5 3.205z" }) }) })] });
+  }, "aria-label": "Remove", children: (0, import_jsx_runtime32.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: (0, import_jsx_runtime32.jsx)("path", { d: "M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6 9.5 3.205z" }) }) })] });
 }
 function Dropdown({ trigger, options, value, onChange, placement = "bottom-start", disabled, style, className }) {
-  const [isOpen, setIsOpen] = (0, import_react33.useState)(false);
-  const containerRef = (0, import_react33.useRef)(null);
-  (0, import_react33.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
+  const containerRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -42229,7 +42170,7 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         setIsOpen(false);
@@ -42258,11 +42199,11 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
         return { top: "100%", left: 0, marginTop: "4px" };
     }
   };
-  return (0, import_jsx_runtime35.jsxs)("div", { ref: containerRef, className, style: {
+  return (0, import_jsx_runtime33.jsxs)("div", { ref: containerRef, className, style: {
     position: "relative",
     display: "inline-block",
     ...style
-  }, children: [(0, import_jsx_runtime35.jsx)("div", { onClick: () => !disabled && setIsOpen(!isOpen), style: { cursor: disabled ? "not-allowed" : "pointer" }, children: trigger }), isOpen && (0, import_jsx_runtime35.jsx)("div", { style: {
+  }, children: [(0, import_jsx_runtime33.jsx)("div", { onClick: () => !disabled && setIsOpen(!isOpen), style: { cursor: disabled ? "not-allowed" : "pointer" }, children: trigger }), isOpen && (0, import_jsx_runtime33.jsx)("div", { style: {
     position: "absolute",
     ...getMenuPosition(),
     minWidth: "160px",
@@ -42272,19 +42213,19 @@ function Dropdown({ trigger, options, value, onChange, placement = "bottom-start
     boxShadow: shadow.lg,
     zIndex: zIndex.dropdown,
     padding: "4px"
-  }, children: options.map((option) => (0, import_jsx_runtime35.jsx)(MenuItem, { label: option.label, icon: option.icon, onClick: () => handleSelect(option.value), disabled: option.disabled, active: value === option.value, danger: option.danger }, option.value)) })] });
+  }, children: options.map((option) => (0, import_jsx_runtime33.jsx)(MenuItem, { label: option.label, icon: option.icon, onClick: () => handleSelect(option.value), disabled: option.disabled, active: value === option.value, danger: option.danger }, option.value)) })] });
 }
 function Autocomplete({ value = "", onChange, onSelect, options, placeholder, label, loading, disabled, error: error210, noResultsText = "No results found", style, className }) {
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react34.useState)(-1);
-  const containerRef = (0, import_react34.useRef)(null);
-  const filteredOptions = (0, import_react34.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react29.useState)(-1);
+  const containerRef = (0, import_react29.useRef)(null);
+  const filteredOptions = (0, import_react29.useMemo)(() => {
     if (!value)
       return options;
     const lowerValue = value.toLowerCase();
     return options.filter((opt) => opt.label.toLowerCase().includes(lowerValue) || opt.value.toLowerCase().includes(lowerValue));
   }, [options, value]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -42332,10 +42273,10 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
         break;
     }
   };
-  return (0, import_jsx_runtime36.jsxs)("div", { ref: containerRef, className, style: {
+  return (0, import_jsx_runtime34.jsxs)("div", { ref: containerRef, className, style: {
     position: "relative",
     ...style
-  }, children: [(0, import_jsx_runtime36.jsx)("div", { onKeyDown: handleKeyDown, children: (0, import_jsx_runtime36.jsx)(Input, { label, value, onChange: handleInputChange, onFocus: () => setIsOpen(true), placeholder, disabled, error: error210 }) }), isOpen && (0, import_jsx_runtime36.jsx)("div", { style: {
+  }, children: [(0, import_jsx_runtime34.jsx)("div", { onKeyDown: handleKeyDown, children: (0, import_jsx_runtime34.jsx)(Input, { label, value, onChange: handleInputChange, onFocus: () => setIsOpen(true), placeholder, disabled, error: error210 }) }), isOpen && (0, import_jsx_runtime34.jsx)("div", { style: {
     position: "absolute",
     top: "100%",
     left: 0,
@@ -42348,12 +42289,12 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
     zIndex: zIndex.dropdown,
     maxHeight: "240px",
     overflow: "auto"
-  }, children: loading ? (0, import_jsx_runtime36.jsx)("div", { style: { padding: "12px", display: "flex", justifyContent: "center" }, children: (0, import_jsx_runtime36.jsx)(Spinner, { size: 20 }) }) : filteredOptions.length === 0 ? (0, import_jsx_runtime36.jsx)("div", { style: {
+  }, children: loading ? (0, import_jsx_runtime34.jsx)("div", { style: { padding: "12px", display: "flex", justifyContent: "center" }, children: (0, import_jsx_runtime34.jsx)(Spinner, { size: 20 }) }) : filteredOptions.length === 0 ? (0, import_jsx_runtime34.jsx)("div", { style: {
     padding: "12px",
     textAlign: "center",
     color: colors.gray[500],
     fontSize: fontSize.sm
-  }, children: noResultsText }) : filteredOptions.map((option, index) => (0, import_jsx_runtime36.jsxs)("div", { onClick: () => !option.disabled && handleSelect(option), style: {
+  }, children: noResultsText }) : filteredOptions.map((option, index) => (0, import_jsx_runtime34.jsxs)("div", { onClick: () => !option.disabled && handleSelect(option), style: {
     padding: "8px 12px",
     cursor: option.disabled ? "not-allowed" : "pointer",
     backgroundColor: highlightedIndex === index ? colors.gray[100] : "transparent",
@@ -42362,10 +42303,10 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
     display: "flex",
     alignItems: "center",
     gap: "8px"
-  }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime36.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime36.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime36.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime36.jsx)("div", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: option.description })] })] }, option.value)) })] });
+  }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime34.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime34.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime34.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime34.jsx)("div", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: option.description })] })] }, option.value)) })] });
 }
 function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
-  return (0, import_jsx_runtime37.jsx)("nav", { "aria-label": "Breadcrumb", className, style: {
+  return (0, import_jsx_runtime35.jsx)("nav", { "aria-label": "Breadcrumb", className, style: {
     display: "flex",
     alignItems: "center",
     gap: "8px",
@@ -42373,19 +42314,19 @@ function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
     ...style
   }, children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return (0, import_jsx_runtime37.jsxs)(import_react35.Fragment, { children: [index > 0 && (0, import_jsx_runtime37.jsx)("span", { style: { color: colors.gray[400] }, children: separator }), item.icon && (0, import_jsx_runtime37.jsx)("span", { style: {
+    return (0, import_jsx_runtime35.jsxs)(import_react30.Fragment, { children: [index > 0 && (0, import_jsx_runtime35.jsx)("span", { style: { color: colors.gray[400] }, children: separator }), item.icon && (0, import_jsx_runtime35.jsx)("span", { style: {
       display: "flex",
       alignItems: "center",
       color: isLast ? colors.gray[900] : colors.gray[500]
-    }, children: item.icon }), isLast ? (0, import_jsx_runtime37.jsx)("span", { style: {
+    }, children: item.icon }), isLast ? (0, import_jsx_runtime35.jsx)("span", { style: {
       color: colors.gray[900],
       fontWeight: 500
-    }, "aria-current": "page", children: item.label }) : item.href ? (0, import_jsx_runtime37.jsx)(Link, { href: item.href, tone: "muted", underline: "hover", onClick: (e) => {
+    }, "aria-current": "page", children: item.label }) : item.href ? (0, import_jsx_runtime35.jsx)(Link, { href: item.href, tone: "muted", underline: "hover", onClick: (e) => {
       if (onItemClick) {
         e.preventDefault();
         onItemClick(item, index);
       }
-    }, children: item.label }) : (0, import_jsx_runtime37.jsx)("button", { onClick: () => onItemClick?.(item, index), style: {
+    }, children: item.label }) : (0, import_jsx_runtime35.jsx)("button", { onClick: () => onItemClick?.(item, index), style: {
       background: "none",
       border: "none",
       padding: 0,
@@ -42428,7 +42369,7 @@ function Pagination({ currentPage, totalPages, onPageChange, showFirstLast = tru
   };
   const buttonSize = size === "sm" ? "xs" : size === "lg" ? "md" : "sm";
   const iconSize = size === "sm" ? 14 : size === "lg" ? 20 : 16;
-  const PageButton = ({ page, active }) => (0, import_jsx_runtime38.jsx)("button", { onClick: () => !disabled && onPageChange?.(page), disabled, style: {
+  const PageButton = ({ page, active }) => (0, import_jsx_runtime36.jsx)("button", { onClick: () => !disabled && onPageChange?.(page), disabled, style: {
     minWidth: size === "sm" ? "28px" : size === "lg" ? "40px" : "32px",
     height: size === "sm" ? "28px" : size === "lg" ? "40px" : "32px",
     padding: "0 8px",
@@ -42442,15 +42383,15 @@ function Pagination({ currentPage, totalPages, onPageChange, showFirstLast = tru
     opacity: disabled ? 0.5 : 1,
     transition: "all 0.15s"
   }, children: page });
-  return (0, import_jsx_runtime38.jsxs)("nav", { "aria-label": "Pagination", className, style: {
+  return (0, import_jsx_runtime36.jsxs)("nav", { "aria-label": "Pagination", className, style: {
     display: "flex",
     alignItems: "center",
     gap: "4px",
     ...style
-  }, children: [showFirstLast && (0, import_jsx_runtime38.jsxs)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: [(0, import_jsx_runtime38.jsx)(Icon, { name: "chevron-left", size: iconSize }), (0, import_jsx_runtime38.jsx)(Icon, { name: "chevron-left", size: iconSize, style: { marginLeft: "-8px" } })] }), (0, import_jsx_runtime38.jsx)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: (0, import_jsx_runtime38.jsx)(Icon, { name: "chevron-left", size: iconSize }) }), getVisiblePages().map((page, index) => page === "ellipsis" ? (0, import_jsx_runtime38.jsx)("span", { style: {
+  }, children: [showFirstLast && (0, import_jsx_runtime36.jsxs)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: [(0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-left", size: iconSize }), (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-left", size: iconSize, style: { marginLeft: "-8px" } })] }), (0, import_jsx_runtime36.jsx)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-left", size: iconSize }) }), getVisiblePages().map((page, index) => page === "ellipsis" ? (0, import_jsx_runtime36.jsx)("span", { style: {
     padding: "0 4px",
     color: colors.gray[400]
-  }, children: "..." }, `ellipsis-${index}`) : (0, import_jsx_runtime38.jsx)(PageButton, { page, active: page === currentPage }, page)), (0, import_jsx_runtime38.jsx)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: (0, import_jsx_runtime38.jsx)(Icon, { name: "chevron-right", size: iconSize }) }), showFirstLast && (0, import_jsx_runtime38.jsxs)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: [(0, import_jsx_runtime38.jsx)(Icon, { name: "chevron-right", size: iconSize }), (0, import_jsx_runtime38.jsx)(Icon, { name: "chevron-right", size: iconSize, style: { marginLeft: "-8px" } })] })] });
+  }, children: "..." }, `ellipsis-${index}`) : (0, import_jsx_runtime36.jsx)(PageButton, { page, active: page === currentPage }, page)), (0, import_jsx_runtime36.jsx)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-right", size: iconSize }) }), showFirstLast && (0, import_jsx_runtime36.jsxs)(Button, { variant: "ghost", size: buttonSize, onClick: () => onPageChange?.(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: [(0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-right", size: iconSize }), (0, import_jsx_runtime36.jsx)(Icon, { name: "chevron-right", size: iconSize, style: { marginLeft: "-8px" } })] })] });
 }
 function EmptyState({ icon, title, description, action, style, className }) {
   const composedStyle = {
@@ -42458,11 +42399,11 @@ function EmptyState({ icon, title, description, action, style, className }) {
     padding: "var(--ggui-spacing-xl, 32px)",
     ...style
   };
-  return (0, import_jsx_runtime39.jsxs)(Stack, { align: "center", gap: "sm", className, style: composedStyle, children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime39.jsx)(Icon, { name: icon, size: 40, tone: "subtle" }) : icon), (0, import_jsx_runtime39.jsx)(Heading, { level: 3, children: title }), description !== void 0 && (0, import_jsx_runtime39.jsx)(Text, { tone: "muted", children: description }), action !== void 0 && (0, import_jsx_runtime39.jsx)("div", { style: { marginTop: "var(--ggui-spacing-sm, 8px)" }, children: action })] });
+  return (0, import_jsx_runtime37.jsxs)(Stack, { align: "center", gap: "sm", className, style: composedStyle, children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime37.jsx)(Icon, { name: icon, size: 40, tone: "subtle" }) : icon), (0, import_jsx_runtime37.jsx)(Heading, { level: 3, children: title }), description !== void 0 && (0, import_jsx_runtime37.jsx)(Text, { tone: "muted", children: description }), action !== void 0 && (0, import_jsx_runtime37.jsx)("div", { style: { marginTop: "var(--ggui-spacing-sm, 8px)" }, children: action })] });
 }
 function Stat({ label, value, delta, trend = "neutral", icon, style, className }) {
   const deltaTone = trend === "up" ? "success" : trend === "down" ? "error" : "muted";
-  return (0, import_jsx_runtime40.jsxs)(Stack, { gap: "xs", className, style, children: [(0, import_jsx_runtime40.jsxs)(Row, { gap: "xs", align: "center", children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime40.jsx)(Icon, { name: icon, size: 16, tone: "muted" }) : icon), (0, import_jsx_runtime40.jsx)(Text, { size: "xs", weight: "semibold", caps: true, tone: "muted", children: label })] }), (0, import_jsx_runtime40.jsxs)(Row, { gap: "sm", align: "end", children: [(0, import_jsx_runtime40.jsx)(Text, { size: "3xl", weight: "bold", children: value }), delta !== void 0 && (0, import_jsx_runtime40.jsx)(Text, { size: "sm", weight: "semibold", tone: deltaTone, children: delta })] })] });
+  return (0, import_jsx_runtime38.jsxs)(Stack, { gap: "xs", className, style, children: [(0, import_jsx_runtime38.jsxs)(Row, { gap: "xs", align: "center", children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime38.jsx)(Icon, { name: icon, size: 16, tone: "muted" }) : icon), (0, import_jsx_runtime38.jsx)(Text, { size: "xs", weight: "semibold", caps: true, tone: "muted", children: label })] }), (0, import_jsx_runtime38.jsxs)(Row, { gap: "sm", align: "end", children: [(0, import_jsx_runtime38.jsx)(Text, { size: "3xl", weight: "bold", children: value }), delta !== void 0 && (0, import_jsx_runtime38.jsx)(Text, { size: "sm", weight: "semibold", tone: deltaTone, children: delta })] })] });
 }
 var MARKER_SIZE = 28;
 function stepState(index, current) {
@@ -42490,7 +42431,7 @@ var markerStyles = {
   }
 };
 function Marker({ index, state }) {
-  return (0, import_jsx_runtime41.jsx)("span", { "aria-hidden": "true", style: {
+  return (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": "true", style: {
     width: MARKER_SIZE,
     height: MARKER_SIZE,
     borderRadius: "50%",
@@ -42501,19 +42442,19 @@ function Marker({ index, state }) {
     boxSizing: "border-box",
     transition: "background-color 0.2s, border-color 0.2s, color 0.2s",
     ...markerStyles[state]
-  }, children: state === "completed" ? (0, import_jsx_runtime41.jsx)(Icon, { name: "check", size: 16, tone: "inherit" }) : (0, import_jsx_runtime41.jsx)(Text, { is: "span", size: "sm", weight: "semibold", tone: "inherit", children: index + 1 }) });
+  }, children: state === "completed" ? (0, import_jsx_runtime39.jsx)(Icon, { name: "check", size: 16, tone: "inherit" }) : (0, import_jsx_runtime39.jsx)(Text, { is: "span", size: "sm", weight: "semibold", tone: "inherit", children: index + 1 }) });
 }
 function StepLabel({ label, state }) {
-  return (0, import_jsx_runtime41.jsx)(Text, { is: "span", size: "sm", weight: state === "current" ? "semibold" : "normal", tone: state === "upcoming" ? "muted" : "default", children: label });
+  return (0, import_jsx_runtime39.jsx)(Text, { is: "span", size: "sm", weight: state === "current" ? "semibold" : "normal", tone: state === "upcoming" ? "muted" : "default", children: label });
 }
 function Stepper({ steps, current, orientation = "horizontal", onStepClick, style, className }) {
   const renderStep = (label, index) => {
     const state = stepState(index, current);
-    const content = (0, import_jsx_runtime41.jsxs)(Row, { gap: "sm", align: "center", children: [(0, import_jsx_runtime41.jsx)(Marker, { index, state }), (0, import_jsx_runtime41.jsx)(StepLabel, { label, state })] });
+    const content = (0, import_jsx_runtime39.jsxs)(Row, { gap: "sm", align: "center", children: [(0, import_jsx_runtime39.jsx)(Marker, { index, state }), (0, import_jsx_runtime39.jsx)(StepLabel, { label, state })] });
     if (onStepClick === void 0) {
-      return (0, import_jsx_runtime41.jsx)("span", { "aria-current": state === "current" ? "step" : void 0, children: content });
+      return (0, import_jsx_runtime39.jsx)("span", { "aria-current": state === "current" ? "step" : void 0, children: content });
     }
-    return (0, import_jsx_runtime41.jsx)("button", { type: "button", onClick: () => onStepClick(index), "aria-current": state === "current" ? "step" : void 0, style: {
+    return (0, import_jsx_runtime39.jsx)("button", { type: "button", onClick: () => onStepClick(index), "aria-current": state === "current" ? "step" : void 0, style: {
       background: "none",
       border: "none",
       padding: 0,
@@ -42524,14 +42465,14 @@ function Stepper({ steps, current, orientation = "horizontal", onStepClick, styl
     }, children: content });
   };
   if (orientation === "vertical") {
-    return (0, import_jsx_runtime41.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime41.jsx)(Stack, { gap: "none", align: "start", children: steps.map((label, index) => (0, import_jsx_runtime41.jsxs)(Stack, { gap: "none", align: "start", children: [index > 0 && (0, import_jsx_runtime41.jsx)("span", { style: {
+    return (0, import_jsx_runtime39.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime39.jsx)(Stack, { gap: "none", align: "start", children: steps.map((label, index) => (0, import_jsx_runtime39.jsxs)(Stack, { gap: "none", align: "start", children: [index > 0 && (0, import_jsx_runtime39.jsx)("span", { style: {
       width: MARKER_SIZE,
       height: 16,
       display: "inline-flex",
       justifyContent: "center"
-    }, children: (0, import_jsx_runtime41.jsx)(Divider, { orientation: "vertical", margin: 0 }) }), renderStep(label, index)] }, index)) }) });
+    }, children: (0, import_jsx_runtime39.jsx)(Divider, { orientation: "vertical", margin: 0 }) }), renderStep(label, index)] }, index)) }) });
   }
-  return (0, import_jsx_runtime41.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime41.jsx)(Row, { gap: "sm", align: "center", children: steps.map((label, index) => (0, import_jsx_runtime41.jsxs)(Row, { gap: "sm", align: "center", style: index > 0 ? { flex: 1 } : void 0, children: [index > 0 && (0, import_jsx_runtime41.jsx)(Divider, { style: { flex: 1, minWidth: 16, margin: 0 } }), renderStep(label, index)] }, index)) }) });
+  return (0, import_jsx_runtime39.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime39.jsx)(Row, { gap: "sm", align: "center", children: steps.map((label, index) => (0, import_jsx_runtime39.jsxs)(Row, { gap: "sm", align: "center", style: index > 0 ? { flex: 1 } : void 0, children: [index > 0 && (0, import_jsx_runtime39.jsx)(Divider, { style: { flex: 1, minWidth: 16, margin: 0 } }), renderStep(label, index)] }, index)) }) });
 }
 var SAFE_HREF = /^(?:https?:\/\/|mailto:)[^\s\x00-\x1f]+$/i;
 function safeHref(raw) {
@@ -42840,16 +42781,16 @@ function renderRichTextInlines(inlines) {
       case "text":
         return node.text;
       case "break":
-        return (0, import_jsx_runtime42.jsx)("br", {}, i);
+        return (0, import_jsx_runtime40.jsx)("br", {}, i);
       case "strong":
-        return (0, import_jsx_runtime42.jsx)("strong", { children: renderRichTextInlines(node.children) }, i);
+        return (0, import_jsx_runtime40.jsx)("strong", { children: renderRichTextInlines(node.children) }, i);
       case "em":
-        return (0, import_jsx_runtime42.jsx)("em", { children: renderRichTextInlines(node.children) }, i);
+        return (0, import_jsx_runtime40.jsx)("em", { children: renderRichTextInlines(node.children) }, i);
       case "code":
-        return (0, import_jsx_runtime42.jsx)("code", { style: CODE_INLINE, children: node.code }, i);
+        return (0, import_jsx_runtime40.jsx)("code", { style: CODE_INLINE, children: node.code }, i);
       case "link": {
         const children = renderRichTextInlines(node.children);
-        return node.href !== void 0 ? (0, import_jsx_runtime42.jsx)(Link, { href: node.href, external: true, children }, i) : (0, import_jsx_runtime42.jsx)("span", { style: LINK_INERT, children }, i);
+        return node.href !== void 0 ? (0, import_jsx_runtime40.jsx)(Link, { href: node.href, external: true, children }, i) : (0, import_jsx_runtime40.jsx)("span", { style: LINK_INERT, children }, i);
       }
     }
   });
@@ -42857,20 +42798,20 @@ function renderRichTextInlines(inlines) {
 function renderBlock(block, key) {
   switch (block.type) {
     case "paragraph":
-      return (0, import_jsx_runtime42.jsx)(Text, { children: renderRichTextInlines(block.children) }, key);
+      return (0, import_jsx_runtime40.jsx)(Text, { children: renderRichTextInlines(block.children) }, key);
     case "heading":
-      return (0, import_jsx_runtime42.jsx)(Heading, { level: block.level, children: renderRichTextInlines(block.children) }, key);
+      return (0, import_jsx_runtime40.jsx)(Heading, { level: block.level, children: renderRichTextInlines(block.children) }, key);
     case "code-fence":
-      return (0, import_jsx_runtime42.jsx)("pre", { style: CODE_FENCE, "data-lang": block.lang, children: (0, import_jsx_runtime42.jsx)("code", { children: block.code }) }, key);
+      return (0, import_jsx_runtime40.jsx)("pre", { style: CODE_FENCE, "data-lang": block.lang, children: (0, import_jsx_runtime40.jsx)("code", { children: block.code }) }, key);
     case "list": {
-      const items = block.items.map((item, i) => (0, import_jsx_runtime42.jsx)("li", { children: renderRichTextInlines(item.children) }, i));
-      return block.ordered ? (0, import_jsx_runtime42.jsx)("ol", { start: block.start, style: LIST, children: items }, key) : (0, import_jsx_runtime42.jsx)("ul", { style: LIST, children: items }, key);
+      const items = block.items.map((item, i) => (0, import_jsx_runtime40.jsx)("li", { children: renderRichTextInlines(item.children) }, i));
+      return block.ordered ? (0, import_jsx_runtime40.jsx)("ol", { start: block.start, style: LIST, children: items }, key) : (0, import_jsx_runtime40.jsx)("ul", { style: LIST, children: items }, key);
     }
   }
 }
 function Markdown({ markdown, className, style }) {
   const blocks = parseRichText(markdown);
-  return (0, import_jsx_runtime42.jsx)("div", { className, "data-ggui-markdown": "", style: {
+  return (0, import_jsx_runtime40.jsx)("div", { className, "data-ggui-markdown": "", style: {
     display: "flex",
     flexDirection: "column",
     gap: "var(--ggui-spacing-sm, 12px)",
@@ -42878,7 +42819,7 @@ function Markdown({ markdown, className, style }) {
   }, children: blocks.map(renderBlock) });
 }
 function MarkdownInline({ markdown }) {
-  return (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: renderRichTextInlines(parseInlineRichText(markdown)) });
+  return (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: renderRichTextInlines(parseInlineRichText(markdown)) });
 }
 var compositions_exports = {};
 __export2(compositions_exports, {
@@ -42897,7 +42838,7 @@ __export2(compositions_exports, {
   Sidebar: () => Sidebar
 });
 function Header({ logo, navigation: navigation2, actions, sticky = false, background, bordered = true, style, className }) {
-  return (0, import_jsx_runtime43.jsxs)("header", { className, style: {
+  return (0, import_jsx_runtime41.jsxs)("header", { className, style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -42911,10 +42852,10 @@ function Header({ logo, navigation: navigation2, actions, sticky = false, backgr
       boxShadow: shadow.sm
     },
     ...style
-  }, children: [logo && (0, import_jsx_runtime43.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation2 && (0, import_jsx_runtime43.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation2 }), actions && (0, import_jsx_runtime43.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
+  }, children: [logo && (0, import_jsx_runtime41.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation2 && (0, import_jsx_runtime41.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation2 }), actions && (0, import_jsx_runtime41.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
 }
 function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
-  const [expanded, setExpanded] = (0, import_react36.useState)(false);
+  const [expanded, setExpanded] = (0, import_react31.useState)(false);
   const hasChildren = item.children && item.children.length > 0;
   const isActive = activeId === item.id;
   const handleClick = () => {
@@ -42923,7 +42864,7 @@ function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
     }
     onItemClick?.(item);
   };
-  return (0, import_jsx_runtime44.jsxs)("div", { children: [(0, import_jsx_runtime44.jsxs)("button", { onClick: handleClick, disabled: item.disabled, style: {
+  return (0, import_jsx_runtime42.jsxs)("div", { children: [(0, import_jsx_runtime42.jsxs)("button", { onClick: handleClick, disabled: item.disabled, style: {
     display: "flex",
     alignItems: "center",
     gap: "12px",
@@ -42940,11 +42881,11 @@ function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
     cursor: item.disabled ? "not-allowed" : "pointer",
     transition: "all 0.15s",
     justifyContent: collapsed ? "center" : "flex-start"
-  }, children: [item.icon && (0, import_jsx_runtime44.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: item.icon }), !collapsed && (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [(0, import_jsx_runtime44.jsx)("span", { style: { flex: 1 }, children: item.label }), item.badge && (0, import_jsx_runtime44.jsx)("span", { children: item.badge }), hasChildren && (0, import_jsx_runtime44.jsx)(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: 14, tone: "subtle" })] })] }), hasChildren && expanded && !collapsed && (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "4px" }, children: item.children.map((child) => (0, import_jsx_runtime44.jsx)(SidebarItem, { item: child, activeId, onItemClick, collapsed, depth: depth + 1 }, child.id)) })] });
+  }, children: [item.icon && (0, import_jsx_runtime42.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: item.icon }), !collapsed && (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [(0, import_jsx_runtime42.jsx)("span", { style: { flex: 1 }, children: item.label }), item.badge && (0, import_jsx_runtime42.jsx)("span", { children: item.badge }), hasChildren && (0, import_jsx_runtime42.jsx)(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: 14, tone: "subtle" })] })] }), hasChildren && expanded && !collapsed && (0, import_jsx_runtime42.jsx)("div", { style: { marginTop: "4px" }, children: item.children.map((child) => (0, import_jsx_runtime42.jsx)(SidebarItem, { item: child, activeId, onItemClick, collapsed, depth: depth + 1 }, child.id)) })] });
 }
 function Sidebar({ items, activeId, onItemClick, collapsed = false, header, footer, width = 256, collapsedWidth = 64, style, className }) {
   const currentWidth = collapsed ? collapsedWidth : width;
-  return (0, import_jsx_runtime44.jsxs)("aside", { className, style: {
+  return (0, import_jsx_runtime42.jsxs)("aside", { className, style: {
     width: currentWidth,
     minWidth: currentWidth,
     height: "100%",
@@ -42955,15 +42896,15 @@ function Sidebar({ items, activeId, onItemClick, collapsed = false, header, foot
     transition: "width 0.2s",
     overflow: "hidden",
     ...style
-  }, children: [header && (0, import_jsx_runtime44.jsx)("div", { style: {
+  }, children: [header && (0, import_jsx_runtime42.jsx)("div", { style: {
     padding: collapsed ? "16px 8px" : "16px",
     borderBottom: `1px solid ${colors.gray[200]}`
-  }, children: header }), (0, import_jsx_runtime44.jsx)("nav", { style: {
+  }, children: header }), (0, import_jsx_runtime42.jsx)("nav", { style: {
     flex: 1,
     padding: "8px",
     overflowY: "auto",
     overflowX: "hidden"
-  }, children: (0, import_jsx_runtime44.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: items.map((item) => (0, import_jsx_runtime44.jsx)(SidebarItem, { item, activeId, onItemClick, collapsed }, item.id)) }) }), footer && (0, import_jsx_runtime44.jsx)("div", { style: {
+  }, children: (0, import_jsx_runtime42.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: items.map((item) => (0, import_jsx_runtime42.jsx)(SidebarItem, { item, activeId, onItemClick, collapsed }, item.id)) }) }), footer && (0, import_jsx_runtime42.jsx)("div", { style: {
     padding: collapsed ? "16px 8px" : "16px",
     borderTop: `1px solid ${colors.gray[200]}`
   }, children: footer })] });
@@ -42975,7 +42916,7 @@ function CardGrid({ children, columns = 3, gap = 16, style, className }) {
     }
     return `repeat(auto-fit, minmax(280px, 1fr))`;
   };
-  return (0, import_jsx_runtime45.jsx)("div", { className, style: {
+  return (0, import_jsx_runtime43.jsx)("div", { className, style: {
     display: "grid",
     gridTemplateColumns: getGridColumns(),
     gap: `${gap}px`,
@@ -42983,8 +42924,8 @@ function CardGrid({ children, columns = 3, gap = 16, style, className }) {
   }, children });
 }
 function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
-  const [showReplyInput, setShowReplyInput] = (0, import_react37.useState)(false);
-  const [replyContent, setReplyContent] = (0, import_react37.useState)("");
+  const [showReplyInput, setShowReplyInput] = (0, import_react32.useState)(false);
+  const [replyContent, setReplyContent] = (0, import_react32.useState)("");
   const handleSubmitReply = () => {
     if (replyContent.trim()) {
       onReply?.(comment.id, replyContent);
@@ -42993,30 +42934,30 @@ function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
     }
   };
   const timestamp = comment.timestamp instanceof Date ? comment.timestamp.toLocaleString() : comment.timestamp;
-  return (0, import_jsx_runtime46.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime46.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime46.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime46.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime46.jsx)("span", { style: { color: colors.gray[500], fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime46.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: colors.gray[700] }, children: comment.content }), (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime46.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
+  return (0, import_jsx_runtime44.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime44.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime44.jsx)("span", { style: { color: colors.gray[500], fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime44.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: colors.gray[700] }, children: comment.content }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime44.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
     padding: "2px 8px",
     border: `1px solid ${colors.gray[200]}`,
     borderRadius: "12px",
     backgroundColor: colors.gray[50],
     fontSize: fontSize.xs,
     cursor: "pointer"
-  }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime46.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
+  }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime44.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
     background: "none",
     border: "none",
     color: colors.gray[500],
     fontSize: fontSize.xs,
     cursor: "pointer"
-  }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime46.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime46.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime46.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime46.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime46.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime46.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
+  }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime44.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime44.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime44.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime44.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
 }
 function CommentThread({ comments, currentUser, onAddComment, onReply, onReaction, loading, style, className }) {
-  const [newComment, setNewComment] = (0, import_react37.useState)("");
+  const [newComment, setNewComment] = (0, import_react32.useState)("");
   const handleSubmit = () => {
     if (newComment.trim()) {
       onAddComment?.(newComment);
       setNewComment("");
     }
   };
-  return (0, import_jsx_runtime46.jsxs)("div", { className, style: { ...style }, children: [currentUser && (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", gap: "12px", marginBottom: "24px" }, children: [(0, import_jsx_runtime46.jsx)(Avatar, { name: currentUser.name, src: currentUser.avatar, size: "sm" }), (0, import_jsx_runtime46.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime46.jsx)(TextArea, { value: newComment, onChange: setNewComment, placeholder: "Write a comment...", rows: 3 }), (0, import_jsx_runtime46.jsx)("div", { style: { marginTop: "8px", display: "flex", justifyContent: "flex-end" }, children: (0, import_jsx_runtime46.jsx)(Button, { onClick: handleSubmit, disabled: !newComment.trim(), children: "Comment" }) })] })] }), loading ? (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime46.jsx)(Spinner, { size: 24 }) }) : (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: comments.map((comment) => (0, import_jsx_runtime46.jsx)(CommentItem, { comment, onReply, onReaction }, comment.id)) })] });
+  return (0, import_jsx_runtime44.jsxs)("div", { className, style: { ...style }, children: [currentUser && (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px", marginBottom: "24px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: currentUser.name, src: currentUser.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: newComment, onChange: setNewComment, placeholder: "Write a comment...", rows: 3 }), (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "8px", display: "flex", justifyContent: "flex-end" }, children: (0, import_jsx_runtime44.jsx)(Button, { onClick: handleSubmit, disabled: !newComment.trim(), children: "Comment" }) })] })] }), loading ? (0, import_jsx_runtime44.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime44.jsx)(Spinner, { size: 24 }) }) : (0, import_jsx_runtime44.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: comments.map((comment) => (0, import_jsx_runtime44.jsx)(CommentItem, { comment, onReply, onReaction }, comment.id)) })] });
 }
 function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data", onSort, sortKey, sortDirection, onRowClick, selectable, selectedKeys = [], onSelectionChange, style, className }) {
   const getRowKey = (row, index) => {
@@ -43041,16 +42982,16 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
   };
   const allSelected = data.length > 0 && selectedKeys.length === data.length;
   const someSelected = selectedKeys.length > 0 && selectedKeys.length < data.length;
-  return (0, import_jsx_runtime47.jsx)("div", { className, style: {
+  return (0, import_jsx_runtime45.jsx)("div", { className, style: {
     border: `1px solid ${colors.gray[200]}`,
     borderRadius: "8px",
     overflow: "hidden",
     ...style
-  }, children: (0, import_jsx_runtime47.jsxs)("table", { style: {
+  }, children: (0, import_jsx_runtime45.jsxs)("table", { style: {
     width: "100%",
     borderCollapse: "collapse",
     fontSize: fontSize.sm
-  }, children: [(0, import_jsx_runtime47.jsx)("thead", { children: (0, import_jsx_runtime47.jsxs)("tr", { style: { backgroundColor: colors.gray[50] }, children: [selectable && (0, import_jsx_runtime47.jsx)("th", { style: { width: "40px", padding: "12px" }, children: (0, import_jsx_runtime47.jsx)(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll }) }), columns.map((col) => (0, import_jsx_runtime47.jsx)("th", { style: {
+  }, children: [(0, import_jsx_runtime45.jsx)("thead", { children: (0, import_jsx_runtime45.jsxs)("tr", { style: { backgroundColor: colors.gray[50] }, children: [selectable && (0, import_jsx_runtime45.jsx)("th", { style: { width: "40px", padding: "12px" }, children: (0, import_jsx_runtime45.jsx)(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll }) }), columns.map((col) => (0, import_jsx_runtime45.jsx)("th", { style: {
     padding: "12px 16px",
     textAlign: col.align || "left",
     fontWeight: fontWeight.semibold,
@@ -43058,14 +42999,14 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
     borderBottom: `1px solid ${colors.gray[200]}`,
     cursor: col.sortable ? "pointer" : void 0,
     width: col.width
-  }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime47.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime47.jsx)("tbody", { children: loading ? (0, import_jsx_runtime47.jsx)("tr", { children: (0, import_jsx_runtime47.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime47.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime47.jsx)("tr", { children: (0, import_jsx_runtime47.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: colors.gray[500] }, children: emptyText }) }) : data.map((row, index) => {
+  }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime45.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime45.jsx)("tbody", { children: loading ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: colors.gray[500] }, children: emptyText }) }) : data.map((row, index) => {
     const key = getRowKey(row, index);
     const isSelected = selectedKeys.includes(key);
-    return (0, import_jsx_runtime47.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
+    return (0, import_jsx_runtime45.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
       backgroundColor: isSelected ? colors.primary[50] : void 0,
       cursor: onRowClick ? "pointer" : void 0,
       transition: "background-color 0.15s"
-    }, children: [selectable && (0, import_jsx_runtime47.jsx)("td", { style: { padding: "12px" }, children: (0, import_jsx_runtime47.jsx)(Checkbox, { checked: isSelected, onChange: (checked) => handleSelectRow(key, checked) }) }), columns.map((col) => (0, import_jsx_runtime47.jsx)("td", { style: {
+    }, children: [selectable && (0, import_jsx_runtime45.jsx)("td", { style: { padding: "12px" }, children: (0, import_jsx_runtime45.jsx)(Checkbox, { checked: isSelected, onChange: (checked) => handleSelectRow(key, checked) }) }), columns.map((col) => (0, import_jsx_runtime45.jsx)("td", { style: {
       padding: "12px 16px",
       textAlign: col.align || "left",
       color: colors.gray[900],
@@ -43074,9 +43015,9 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
   }) })] }) });
 }
 function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, placeholder = "Type a message...", header, style, className }) {
-  const [inputValue, setInputValue] = (0, import_react38.useState)("");
-  const messagesEndRef = (0, import_react38.useRef)(null);
-  (0, import_react38.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react33.useState)("");
+  const messagesEndRef = (0, import_react33.useRef)(null);
+  (0, import_react33.useEffect)(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSend = () => {
@@ -43091,7 +43032,7 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
       handleSend();
     }
   };
-  return (0, import_jsx_runtime48.jsxs)("div", { className, style: {
+  return (0, import_jsx_runtime46.jsxs)("div", { className, style: {
     display: "flex",
     flexDirection: "column",
     height: "100%",
@@ -43100,51 +43041,51 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
     backgroundColor: colors.white,
     overflow: "hidden",
     ...style
-  }, children: [header && (0, import_jsx_runtime48.jsx)("div", { style: {
+  }, children: [header && (0, import_jsx_runtime46.jsx)("div", { style: {
     padding: "12px 16px",
     borderBottom: `1px solid ${colors.gray[200]}`
-  }, children: header }), (0, import_jsx_runtime48.jsxs)("div", { style: {
+  }, children: header }), (0, import_jsx_runtime46.jsxs)("div", { style: {
     flex: 1,
     padding: "16px",
     overflowY: "auto",
     display: "flex",
     flexDirection: "column",
     gap: "12px"
-  }, children: [loading ? (0, import_jsx_runtime48.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime48.jsx)(Spinner, { size: 24 }) }) : messages.map((message) => {
+  }, children: [loading ? (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime46.jsx)(Spinner, { size: 24 }) }) : messages.map((message) => {
     const isOwn = message.sender.id === currentUserId;
     const timestamp = message.timestamp instanceof Date ? message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : message.timestamp;
-    return (0, import_jsx_runtime48.jsxs)("div", { style: {
+    return (0, import_jsx_runtime46.jsxs)("div", { style: {
       display: "flex",
       flexDirection: isOwn ? "row-reverse" : "row",
       alignItems: "flex-end",
       gap: "8px"
-    }, children: [!isOwn && (0, import_jsx_runtime48.jsx)(Avatar, { name: message.sender.name, src: message.sender.avatar, size: "xs" }), (0, import_jsx_runtime48.jsxs)("div", { style: {
+    }, children: [!isOwn && (0, import_jsx_runtime46.jsx)(Avatar, { name: message.sender.name, src: message.sender.avatar, size: "xs" }), (0, import_jsx_runtime46.jsxs)("div", { style: {
       maxWidth: "70%",
       padding: "10px 14px",
       borderRadius: radius.lg,
       backgroundColor: isOwn ? colors.primary[600] : colors.gray[100],
       color: isOwn ? colors.white : colors.gray[900]
-    }, children: [(0, import_jsx_runtime48.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime48.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime46.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime46.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "4px",
       marginTop: "4px",
       fontSize: fontSize.xs,
       opacity: 0.7
-    }, children: [(0, import_jsx_runtime48.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime48.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
-  }), typing && (0, import_jsx_runtime48.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime48.jsxs)("span", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime48.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime48.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime46.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime46.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
+  }), typing && (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime46.jsxs)("span", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime46.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime46.jsxs)("div", { style: {
     padding: "12px 16px",
     borderTop: `1px solid ${colors.gray[200]}`,
     display: "flex",
     gap: "8px"
-  }, children: [(0, import_jsx_runtime48.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
+  }, children: [(0, import_jsx_runtime46.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
     flex: 1,
     padding: "10px 14px",
     border: `1px solid ${colors.gray[300]}`,
     borderRadius: radius.full,
     fontSize: fontSize.sm,
     outline: "none"
-  } }), (0, import_jsx_runtime48.jsx)(Button, { onClick: handleSend, disabled: !inputValue.trim(), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "chevron-right", size: 18 }) })] })] });
+  } }), (0, import_jsx_runtime46.jsx)(Button, { onClick: handleSend, disabled: !inputValue.trim(), children: (0, import_jsx_runtime46.jsx)(Icon, { name: "chevron-right", size: 18 }) })] })] });
 }
 function NavigationBar({ items, activeId, onItemClick, orientation = "horizontal", variant = "default", style, className }) {
   const renderItem = (item) => {
@@ -43186,16 +43127,16 @@ function NavigationBar({ items, activeId, onItemClick, orientation = "horizontal
         onItemClick?.(item);
       }
     };
-    const content = (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [item.icon && (0, import_jsx_runtime49.jsx)("span", { style: { display: "flex" }, children: item.icon }), (0, import_jsx_runtime49.jsx)("span", { children: item.label })] });
+    const content = (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [item.icon && (0, import_jsx_runtime47.jsx)("span", { style: { display: "flex" }, children: item.icon }), (0, import_jsx_runtime47.jsx)("span", { children: item.label })] });
     if (item.href) {
-      return (0, import_jsx_runtime49.jsx)("a", { href: item.href, onClick: (e) => {
+      return (0, import_jsx_runtime47.jsx)("a", { href: item.href, onClick: (e) => {
         e.preventDefault();
         handleClick();
       }, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
     }
-    return (0, import_jsx_runtime49.jsx)("button", { onClick: handleClick, disabled: item.disabled, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
+    return (0, import_jsx_runtime47.jsx)("button", { onClick: handleClick, disabled: item.disabled, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
   };
-  return (0, import_jsx_runtime49.jsx)("nav", { className, style: {
+  return (0, import_jsx_runtime47.jsx)("nav", { className, style: {
     display: "flex",
     flexDirection: orientation === "horizontal" ? "row" : "column",
     gap: orientation === "horizontal" ? "4px" : "2px",
@@ -43214,8 +43155,8 @@ function formatFileSize(bytes) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
 }
 function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multiple = true, maxSize, maxFiles, disabled, dragDrop = true, style, className }) {
-  const [isDragOver, setIsDragOver] = (0, import_react39.useState)(false);
-  const inputRef = (0, import_react39.useRef)(null);
+  const [isDragOver, setIsDragOver] = (0, import_react34.useState)(false);
+  const inputRef = (0, import_react34.useRef)(null);
   const handleFiles = (fileList) => {
     if (!fileList)
       return;
@@ -43244,7 +43185,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
   const handleDragLeave = () => {
     setIsDragOver(false);
   };
-  return (0, import_jsx_runtime50.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime50.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
+  return (0, import_jsx_runtime48.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime48.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
     border: `2px dashed ${isDragOver ? colors.primary[400] : colors.gray[300]}`,
     borderRadius: radius.lg,
     padding: "32px",
@@ -43253,7 +43194,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
     cursor: disabled ? "not-allowed" : "pointer",
     transition: "all 0.2s",
     opacity: disabled ? 0.5 : 1
-  }, children: [(0, import_jsx_runtime50.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime50.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime50.jsx)("p", { style: { margin: "12px 0 4px", color: colors.gray[700], fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime50.jsxs)("p", { style: { margin: 0, color: colors.gray[500], fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime50.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file2) => (0, import_jsx_runtime50.jsxs)("div", { style: {
+  }, children: [(0, import_jsx_runtime48.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime48.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime48.jsx)("p", { style: { margin: "12px 0 4px", color: colors.gray[700], fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: 0, color: colors.gray[500], fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime48.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file2) => (0, import_jsx_runtime48.jsxs)("div", { style: {
     display: "flex",
     alignItems: "center",
     gap: "12px",
@@ -43261,14 +43202,14 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
     border: `1px solid ${colors.gray[200]}`,
     borderRadius: radius.md,
     backgroundColor: colors.white
-  }, children: [(0, import_jsx_runtime50.jsx)(Icon, { name: "menu", size: 20, tone: "subtle" }), (0, import_jsx_runtime50.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime50.jsx)("p", { style: {
+  }, children: [(0, import_jsx_runtime48.jsx)(Icon, { name: "menu", size: 20, tone: "subtle" }), (0, import_jsx_runtime48.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime48.jsx)("p", { style: {
     margin: 0,
     fontSize: fontSize.sm,
     color: colors.gray[900],
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis"
-  }, children: file2.name }), (0, import_jsx_runtime50.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: colors.gray[500] }, children: [formatFileSize(file2.size), file2.error && (0, import_jsx_runtime50.jsx)("span", { style: { color: colors.error[500], marginLeft: "8px" }, children: file2.error })] }), file2.status === "uploading" && file2.progress !== void 0 && (0, import_jsx_runtime50.jsx)(Progress, { value: file2.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime50.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file2.id), children: (0, import_jsx_runtime50.jsx)(Icon, { name: "x", size: 16 }) })] }, file2.id)) })] });
+  }, children: file2.name }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: colors.gray[500] }, children: [formatFileSize(file2.size), file2.error && (0, import_jsx_runtime48.jsx)("span", { style: { color: colors.error[500], marginLeft: "8px" }, children: file2.error })] }), file2.status === "uploading" && file2.progress !== void 0 && (0, import_jsx_runtime48.jsx)(Progress, { value: file2.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime48.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file2.id), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "x", size: 16 }) })] }, file2.id)) })] });
 }
 var variantColors2 = {
   info: colors.info[500],
@@ -43279,44 +43220,44 @@ var variantColors2 = {
 function NotificationItem({ notification, onMarkAsRead, onDismiss }) {
   const timestamp = notification.timestamp instanceof Date ? notification.timestamp.toLocaleString() : notification.timestamp;
   const typeColor = variantColors2[notification.type || "info"];
-  return (0, import_jsx_runtime51.jsxs)("div", { style: {
+  return (0, import_jsx_runtime49.jsxs)("div", { style: {
     display: "flex",
     gap: "12px",
     padding: "12px",
     backgroundColor: notification.read ? "transparent" : colors.primary[50],
     borderRadius: radius.md,
     transition: "background-color 0.15s"
-  }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
+  }, children: [(0, import_jsx_runtime49.jsx)("div", { style: {
     width: "8px",
     height: "8px",
     borderRadius: "50%",
     backgroundColor: notification.read ? "transparent" : typeColor,
     flexShrink: 0,
     marginTop: "6px"
-  } }), (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px" }, children: [(0, import_jsx_runtime51.jsx)("p", { style: {
+  } }), (0, import_jsx_runtime49.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px" }, children: [(0, import_jsx_runtime49.jsx)("p", { style: {
     margin: 0,
     fontWeight: fontWeight.medium,
     color: colors.gray[900],
     fontSize: fontSize.sm
-  }, children: notification.title }), (0, import_jsx_runtime51.jsx)("button", { onClick: () => onDismiss?.(notification.id), style: {
+  }, children: notification.title }), (0, import_jsx_runtime49.jsx)("button", { onClick: () => onDismiss?.(notification.id), style: {
     background: "none",
     border: "none",
     padding: "2px",
     cursor: "pointer",
     color: colors.gray[400],
     flexShrink: 0
-  }, children: (0, import_jsx_runtime51.jsx)(Icon, { name: "x", size: 14 }) })] }), notification.message && (0, import_jsx_runtime51.jsx)("p", { style: {
+  }, children: (0, import_jsx_runtime49.jsx)(Icon, { name: "x", size: 14 }) })] }), notification.message && (0, import_jsx_runtime49.jsx)("p", { style: {
     margin: "4px 0 0",
     color: colors.gray[600],
     fontSize: fontSize.xs
-  }, children: notification.message }), (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime51.jsx)("span", { style: { color: colors.gray[400], fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime51.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
+  }, children: notification.message }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { color: colors.gray[400], fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime49.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
     background: "none",
     border: "none",
     padding: 0,
     color: colors.primary[600],
     fontSize: fontSize.xs,
     cursor: "pointer"
-  }, children: "Mark as read" }), notification.action && (0, import_jsx_runtime51.jsx)("button", { onClick: notification.action.onClick, style: {
+  }, children: "Mark as read" }), notification.action && (0, import_jsx_runtime49.jsx)("button", { onClick: notification.action.onClick, style: {
     background: "none",
     border: "none",
     padding: 0,
@@ -43327,24 +43268,24 @@ function NotificationItem({ notification, onMarkAsRead, onDismiss }) {
 }
 function NotificationCenter({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, emptyText = "No notifications", loading, style, className }) {
   const unreadCount = notifications.filter((n) => !n.read).length;
-  return (0, import_jsx_runtime51.jsxs)("div", { className, style: {
+  return (0, import_jsx_runtime49.jsxs)("div", { className, style: {
     display: "flex",
     flexDirection: "column",
     ...style
-  }, children: [(0, import_jsx_runtime51.jsxs)("div", { style: {
+  }, children: [(0, import_jsx_runtime49.jsxs)("div", { style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     padding: "12px 16px",
     borderBottom: `1px solid ${colors.gray[200]}`
-  }, children: [(0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime51.jsx)("span", { style: { fontWeight: fontWeight.semibold, color: colors.gray[900] }, children: "Notifications" }), unreadCount > 0 && (0, import_jsx_runtime51.jsx)("span", { style: {
+  }, children: [(0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { fontWeight: fontWeight.semibold, color: colors.gray[900] }, children: "Notifications" }), unreadCount > 0 && (0, import_jsx_runtime49.jsx)("span", { style: {
     padding: "2px 8px",
     borderRadius: "12px",
     backgroundColor: colors.primary[100],
     color: colors.primary[700],
     fontSize: fontSize.xs,
     fontWeight: fontWeight.medium
-  }, children: unreadCount })] }), (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime51.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime51.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime51.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime51.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: colors.gray[500] }, children: emptyText }) : (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime51.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
+  }, children: unreadCount })] }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime49.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime49.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime49.jsx)("div", { style: { textAlign: "center", padding: "32px", color: colors.gray[500] }, children: emptyText }) : (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime49.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
 }
 var sizeWidths = {
   sm: "400px",
@@ -43354,12 +43295,12 @@ var sizeWidths = {
   full: "100vw"
 };
 function Modal({ open, onClose, title, children, footer, size = "md", closeOnOverlayClick = true, closeOnEscape = true, showCloseButton = true, style, className }) {
-  const handleEscape = (0, import_react40.useCallback)((e) => {
+  const handleEscape = (0, import_react35.useCallback)((e) => {
     if (e.key === "Escape" && closeOnEscape) {
       onClose();
     }
   }, [closeOnEscape, onClose]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (open) {
       document.addEventListener("keydown", handleEscape);
       document.body.style.overflow = "hidden";
@@ -43377,7 +43318,7 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
     }
   };
   const isFullscreen = size === "full";
-  return (0, import_jsx_runtime52.jsxs)("div", { style: {
+  return (0, import_jsx_runtime50.jsxs)("div", { style: {
     position: "fixed",
     inset: 0,
     zIndex: zIndex.modal,
@@ -43385,12 +43326,12 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
     alignItems: isFullscreen ? "stretch" : "center",
     justifyContent: "center",
     padding: isFullscreen ? 0 : "24px"
-  }, children: [(0, import_jsx_runtime52.jsx)("div", { onClick: handleOverlayClick, style: {
+  }, children: [(0, import_jsx_runtime50.jsx)("div", { onClick: handleOverlayClick, style: {
     position: "absolute",
     inset: 0,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
     animation: animation.fadeIn
-  } }), (0, import_jsx_runtime52.jsxs)("div", { role: "dialog", "aria-modal": "true", className, style: {
+  } }), (0, import_jsx_runtime50.jsxs)("div", { role: "dialog", "aria-modal": "true", className, style: {
     position: "relative",
     width: sizeWidths[size],
     maxWidth: isFullscreen ? "100%" : "calc(100vw - 48px)",
@@ -43403,17 +43344,17 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
     overflow: "hidden",
     animation: animation.scaleIn,
     ...style
-  }, children: [(title || showCloseButton) && (0, import_jsx_runtime52.jsxs)("div", { style: {
+  }, children: [(title || showCloseButton) && (0, import_jsx_runtime50.jsxs)("div", { style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     padding: "16px 20px",
     borderBottom: `1px solid ${colors.gray[200]}`
-  }, children: [title && (0, import_jsx_runtime52.jsx)(Heading, { level: 4, children: title }), showCloseButton && (0, import_jsx_runtime52.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", style: { marginLeft: "auto" }, children: (0, import_jsx_runtime52.jsx)(Icon, { name: "x", size: 20 }) })] }), (0, import_jsx_runtime52.jsx)("div", { style: {
+  }, children: [title && (0, import_jsx_runtime50.jsx)(Heading, { level: 4, children: title }), showCloseButton && (0, import_jsx_runtime50.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", style: { marginLeft: "auto" }, children: (0, import_jsx_runtime50.jsx)(Icon, { name: "x", size: 20 }) })] }), (0, import_jsx_runtime50.jsx)("div", { style: {
     flex: 1,
     padding: "20px",
     overflowY: "auto"
-  }, children }), footer && (0, import_jsx_runtime52.jsx)("div", { style: {
+  }, children }), footer && (0, import_jsx_runtime50.jsx)("div", { style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
@@ -43423,9 +43364,9 @@ function Modal({ open, onClose, title, children, footer, size = "md", closeOnOve
   }, children: footer })] })] });
 }
 function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Search commands...", recentIds = [], loading, style, className }) {
-  const [query, setQuery] = (0, import_react41.useState)("");
-  const [selectedIndex, setSelectedIndex] = (0, import_react41.useState)(0);
-  const filteredCommands = (0, import_react41.useMemo)(() => {
+  const [query, setQuery] = (0, import_react36.useState)("");
+  const [selectedIndex, setSelectedIndex] = (0, import_react36.useState)(0);
+  const filteredCommands = (0, import_react36.useMemo)(() => {
     const filtered = query ? commands.filter((cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()) || cmd.description?.toLowerCase().includes(query.toLowerCase())) : commands;
     const groups = /* @__PURE__ */ new Map();
     if (!query && recentIds.length > 0) {
@@ -43446,21 +43387,21 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
     });
     return groups;
   }, [commands, query, recentIds]);
-  const flatCommands = (0, import_react41.useMemo)(() => {
+  const flatCommands = (0, import_react36.useMemo)(() => {
     const flat = [];
     filteredCommands.forEach((cmds) => flat.push(...cmds));
     return flat;
   }, [filteredCommands]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     setSelectedIndex(0);
   }, [query]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (open) {
       setQuery("");
       setSelectedIndex(0);
     }
   }, [open]);
-  const handleKeyDown = (0, import_react41.useCallback)((e) => {
+  const handleKeyDown = (0, import_react36.useCallback)((e) => {
     if (e.key === "Escape") {
       onClose();
       return;
@@ -43480,7 +43421,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
       }
     }
   }, [flatCommands, selectedIndex, onSelect, onClose]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (open) {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
@@ -43489,7 +43430,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
   if (!open)
     return null;
   let currentIndex = 0;
-  return (0, import_jsx_runtime53.jsxs)("div", { style: {
+  return (0, import_jsx_runtime51.jsxs)("div", { style: {
     position: "fixed",
     inset: 0,
     zIndex: zIndex.modal,
@@ -43497,11 +43438,11 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
     alignItems: "flex-start",
     justifyContent: "center",
     paddingTop: "15vh"
-  }, children: [(0, import_jsx_runtime53.jsx)("div", { onClick: onClose, style: {
+  }, children: [(0, import_jsx_runtime51.jsx)("div", { onClick: onClose, style: {
     position: "absolute",
     inset: 0,
     backgroundColor: "rgba(0, 0, 0, 0.5)"
-  } }), (0, import_jsx_runtime53.jsxs)("div", { role: "dialog", className, style: {
+  } }), (0, import_jsx_runtime51.jsxs)("div", { role: "dialog", className, style: {
     position: "relative",
     width: "560px",
     maxWidth: "calc(100vw - 48px)",
@@ -43513,19 +43454,19 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
     display: "flex",
     flexDirection: "column",
     ...style
-  }, children: [(0, import_jsx_runtime53.jsx)("div", { style: { padding: "12px", borderBottom: `1px solid ${colors.gray[200]}` }, children: (0, import_jsx_runtime53.jsxs)("div", { style: { position: "relative" }, children: [(0, import_jsx_runtime53.jsx)(Icon, { name: "search", size: 18, tone: "subtle", style: {
+  }, children: [(0, import_jsx_runtime51.jsx)("div", { style: { padding: "12px", borderBottom: `1px solid ${colors.gray[200]}` }, children: (0, import_jsx_runtime51.jsxs)("div", { style: { position: "relative" }, children: [(0, import_jsx_runtime51.jsx)(Icon, { name: "search", size: 18, tone: "subtle", style: {
     position: "absolute",
     left: "12px",
     top: "50%",
     transform: "translateY(-50%)"
-  } }), (0, import_jsx_runtime53.jsx)("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder, autoFocus: true, style: {
+  } }), (0, import_jsx_runtime51.jsx)("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder, autoFocus: true, style: {
     width: "100%",
     padding: "12px 12px 12px 42px",
     border: "none",
     fontSize: fontSize.base,
     outline: "none",
     backgroundColor: "transparent"
-  } })] }) }), (0, import_jsx_runtime53.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime53.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime53.jsx)(Spinner, { size: 24 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime53.jsx)("div", { style: { textAlign: "center", padding: "32px", color: colors.gray[500] }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime53.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime53.jsx)("div", { style: {
+  } })] }) }), (0, import_jsx_runtime51.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime51.jsx)(Spinner, { size: 24 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: colors.gray[500] }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime51.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
     padding: "8px 12px",
     fontSize: fontSize.xs,
     fontWeight: fontWeight.semibold,
@@ -43535,7 +43476,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
   }, children: group }), cmds.map((cmd) => {
     const index = currentIndex++;
     const isSelected = index === selectedIndex;
-    return (0, import_jsx_runtime53.jsxs)("button", { onClick: () => {
+    return (0, import_jsx_runtime51.jsxs)("button", { onClick: () => {
       if (!cmd.disabled) {
         onSelect(cmd);
         onClose();
@@ -43552,7 +43493,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
       color: cmd.disabled ? colors.gray[400] : colors.gray[900],
       textAlign: "left",
       cursor: cmd.disabled ? "not-allowed" : "pointer"
-    }, children: [cmd.icon && (0, import_jsx_runtime53.jsx)("span", { style: { display: "flex", color: colors.gray[500] }, children: cmd.icon }), (0, import_jsx_runtime53.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime53.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime53.jsx)("div", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime53.jsx)("kbd", { style: {
+    }, children: [cmd.icon && (0, import_jsx_runtime51.jsx)("span", { style: { display: "flex", color: colors.gray[500] }, children: cmd.icon }), (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime51.jsx)("kbd", { style: {
       padding: "2px 6px",
       backgroundColor: colors.gray[100],
       borderRadius: radius.sm,
@@ -43560,7 +43501,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
       color: colors.gray[500],
       fontFamily: "inherit"
     }, children: cmd.shortcut })] }, cmd.id);
-  })] }, group)) }), (0, import_jsx_runtime53.jsxs)("div", { style: {
+  })] }, group)) }), (0, import_jsx_runtime51.jsxs)("div", { style: {
     padding: "8px 12px",
     borderTop: `1px solid ${colors.gray[200]}`,
     display: "flex",
@@ -43568,35 +43509,35 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
     gap: "16px",
     fontSize: fontSize.xs,
     color: colors.gray[500]
-  }, children: [(0, import_jsx_runtime53.jsx)("span", { children: "\u2191\u2193 Navigate" }), (0, import_jsx_runtime53.jsx)("span", { children: "\u21B5 Select" }), (0, import_jsx_runtime53.jsx)("span", { children: "Esc Close" })] })] })] });
+  }, children: [(0, import_jsx_runtime51.jsx)("span", { children: "\u2191\u2193 Navigate" }), (0, import_jsx_runtime51.jsx)("span", { children: "\u21B5 Select" }), (0, import_jsx_runtime51.jsx)("span", { children: "Esc Close" })] })] })] });
 }
 function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, background, bordered = true, style, className }) {
-  return (0, import_jsx_runtime54.jsxs)("footer", { className, role: "contentinfo", style: {
+  return (0, import_jsx_runtime52.jsxs)("footer", { className, role: "contentinfo", style: {
     backgroundColor: background || colors.gray[50],
     borderTop: bordered ? `1px solid ${colors.gray[200]}` : void 0,
     ...style
-  }, children: [(0, import_jsx_runtime54.jsxs)("div", { style: {
+  }, children: [(0, import_jsx_runtime52.jsxs)("div", { style: {
     display: "flex",
     flexWrap: "wrap",
     gap: "48px",
     padding: "48px 24px",
     maxWidth: "1280px",
     margin: "0 auto"
-  }, children: [brand && (0, import_jsx_runtime54.jsx)("div", { style: { flex: "1 1 280px", minWidth: "200px" }, children: brand }), columns?.map((column, colIdx) => (0, import_jsx_runtime54.jsxs)("div", { style: { flex: "0 1 180px", minWidth: "140px" }, children: [column.title && (0, import_jsx_runtime54.jsx)("h4", { style: {
+  }, children: [brand && (0, import_jsx_runtime52.jsx)("div", { style: { flex: "1 1 280px", minWidth: "200px" }, children: brand }), columns?.map((column, colIdx) => (0, import_jsx_runtime52.jsxs)("div", { style: { flex: "0 1 180px", minWidth: "140px" }, children: [column.title && (0, import_jsx_runtime52.jsx)("h4", { style: {
     fontSize: fontSize.sm,
     fontWeight: fontWeight.semibold,
     color: colors.gray[900],
     lineHeight: lineHeight.normal,
     margin: "0 0 16px 0",
     padding: 0
-  }, children: column.title }), (0, import_jsx_runtime54.jsx)("ul", { style: {
+  }, children: column.title }), (0, import_jsx_runtime52.jsx)("ul", { style: {
     listStyle: "none",
     margin: 0,
     padding: 0,
     display: "flex",
     flexDirection: "column",
     gap: "10px"
-  }, children: column.links.map((link, linkIdx) => (0, import_jsx_runtime54.jsx)("li", { children: (0, import_jsx_runtime54.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
+  }, children: column.links.map((link, linkIdx) => (0, import_jsx_runtime52.jsx)("li", { children: (0, import_jsx_runtime52.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
     e.preventDefault();
     link.onClick?.();
   } : void 0, style: {
@@ -43605,7 +43546,7 @@ function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, backgrou
     textDecoration: "none",
     transition: "color 0.15s",
     lineHeight: lineHeight.normal
-  }, "aria-label": link.label, children: link.label }) }, linkIdx)) })] }, colIdx))] }), (bottomText || bottomLinks || socialLinks) && (0, import_jsx_runtime54.jsxs)("div", { style: {
+  }, "aria-label": link.label, children: link.label }) }, linkIdx)) })] }, colIdx))] }), (bottomText || bottomLinks || socialLinks) && (0, import_jsx_runtime52.jsxs)("div", { style: {
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
@@ -43615,17 +43556,17 @@ function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, backgrou
     maxWidth: "1280px",
     margin: "0 auto",
     borderTop: `1px solid ${colors.gray[200]}`
-  }, children: [bottomText && (0, import_jsx_runtime54.jsx)("span", { style: {
+  }, children: [bottomText && (0, import_jsx_runtime52.jsx)("span", { style: {
     fontSize: fontSize.sm,
     color: colors.gray[500],
     lineHeight: lineHeight.normal
-  }, children: bottomText }), (0, import_jsx_runtime54.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "20px" }, children: [socialLinks?.map((social, idx) => (0, import_jsx_runtime54.jsx)("a", { href: social.href, "aria-label": social.label, style: {
+  }, children: bottomText }), (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "20px" }, children: [socialLinks?.map((social, idx) => (0, import_jsx_runtime52.jsx)("a", { href: social.href, "aria-label": social.label, style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     color: colors.gray[500],
     transition: "color 0.15s"
-  }, children: social.icon }, idx)), bottomLinks?.map((link, idx) => (0, import_jsx_runtime54.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
+  }, children: social.icon }, idx)), bottomLinks?.map((link, idx) => (0, import_jsx_runtime52.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
     e.preventDefault();
     link.onClick?.();
   } : void 0, style: {
@@ -43644,7 +43585,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
   const sizeConfig2 = sizeStyles7[size] || sizeStyles7.md;
   const hasImage = !!backgroundImage;
   const showOverlay = hasImage && overlay;
-  return (0, import_jsx_runtime55.jsxs)("section", { className, style: {
+  return (0, import_jsx_runtime53.jsxs)("section", { className, style: {
     position: "relative",
     backgroundColor: background || (hasImage ? void 0 : colors.white),
     ...hasImage && {
@@ -43654,11 +43595,11 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     },
     overflow: "hidden",
     ...style
-  }, children: [showOverlay && (0, import_jsx_runtime55.jsx)("div", { "aria-hidden": "true", style: {
+  }, children: [showOverlay && (0, import_jsx_runtime53.jsx)("div", { "aria-hidden": "true", style: {
     position: "absolute",
     inset: 0,
     backgroundColor: "rgba(0, 0, 0, 0.5)"
-  } }), (0, import_jsx_runtime55.jsxs)("div", { style: {
+  } }), (0, import_jsx_runtime53.jsxs)("div", { style: {
     position: "relative",
     maxWidth: "1280px",
     margin: "0 auto",
@@ -43668,10 +43609,10 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     alignItems: align === "center" ? "center" : "center",
     gap: "48px",
     textAlign: align === "center" ? "center" : "left"
-  }, children: [(0, import_jsx_runtime55.jsxs)("div", { style: {
+  }, children: [(0, import_jsx_runtime53.jsxs)("div", { style: {
     flex: align === "left" && media ? "1 1 50%" : void 0,
     maxWidth: align === "center" ? "800px" : void 0
-  }, children: [heading && (0, import_jsx_runtime55.jsx)("h1", { style: {
+  }, children: [heading && (0, import_jsx_runtime53.jsx)("h1", { style: {
     fontSize: sizeConfig2.headingSize,
     fontWeight: fontWeight.bold,
     lineHeight: lineHeight.tight,
@@ -43679,7 +43620,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     color: showOverlay ? colors.white : colors.gray[900],
     margin: "0 0 16px 0",
     padding: 0
-  }, children: heading }), description && (0, import_jsx_runtime55.jsx)("p", { style: {
+  }, children: heading }), description && (0, import_jsx_runtime53.jsx)("p", { style: {
     fontSize: sizeConfig2.descSize,
     lineHeight: lineHeight.relaxed,
     color: showOverlay ? "rgba(255,255,255,0.9)" : colors.gray[600],
@@ -43687,12 +43628,12 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     padding: 0,
     maxWidth: align === "center" ? "640px" : void 0,
     ...align === "center" && { marginLeft: "auto", marginRight: "auto" }
-  }, children: description }), (primaryAction || secondaryAction) && (0, import_jsx_runtime55.jsxs)("div", { style: {
+  }, children: description }), (primaryAction || secondaryAction) && (0, import_jsx_runtime53.jsxs)("div", { style: {
     display: "flex",
     flexWrap: "wrap",
     gap: "12px",
     justifyContent: align === "center" ? "center" : "flex-start"
-  }, children: [primaryAction && (0, import_jsx_runtime55.jsx)("button", { onClick: primaryAction.onClick, style: {
+  }, children: [primaryAction && (0, import_jsx_runtime53.jsx)("button", { onClick: primaryAction.onClick, style: {
     padding: "12px 28px",
     fontSize: fontSize.base,
     fontWeight: fontWeight.semibold,
@@ -43703,7 +43644,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     cursor: "pointer",
     transition: "background-color 0.15s",
     lineHeight: lineHeight.normal
-  }, children: primaryAction.label }), secondaryAction && (0, import_jsx_runtime55.jsx)("button", { onClick: secondaryAction.onClick, style: {
+  }, children: primaryAction.label }), secondaryAction && (0, import_jsx_runtime53.jsx)("button", { onClick: secondaryAction.onClick, style: {
     padding: "12px 28px",
     fontSize: fontSize.base,
     fontWeight: fontWeight.semibold,
@@ -43714,7 +43655,7 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     cursor: "pointer",
     transition: "all 0.15s",
     lineHeight: lineHeight.normal
-  }, children: secondaryAction.label })] })] }), media && (0, import_jsx_runtime55.jsx)("div", { style: {
+  }, children: secondaryAction.label })] })] }), media && (0, import_jsx_runtime53.jsx)("div", { style: {
     flex: align === "left" ? "1 1 50%" : void 0,
     display: "flex",
     justifyContent: "center",
@@ -43728,9 +43669,9 @@ __export2(interact_exports, {
   Hoverable: () => Hoverable,
   Pressable: () => Pressable
 });
-var Clickable = (0, import_react42.forwardRef)(function Clickable2({ children, onClick, onDoubleClick, hoverStyle, activeStyle, cursor, transition: transition2 = "all 200ms ease", disabled = false, role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react42.useState)(false);
-  const [active, setActive] = (0, import_react42.useState)(false);
+var Clickable = (0, import_react37.forwardRef)(function Clickable2({ children, onClick, onDoubleClick, hoverStyle, activeStyle, cursor, transition: transition2 = "all 200ms ease", disabled = false, role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react37.useState)(false);
+  const [active, setActive] = (0, import_react37.useState)(false);
   const hasClick = !!onClick;
   const resolvedCursor = disabled ? "not-allowed" : cursor ?? (hasClick ? "pointer" : void 0);
   const resolvedRole = role ?? (hasClick ? "button" : void 0);
@@ -43751,19 +43692,19 @@ var Clickable = (0, import_react42.forwardRef)(function Clickable2({ children, o
     ...hovered && !disabled ? hoverStyle : {},
     ...active && !disabled ? activeStyle : {}
   };
-  return (0, import_jsx_runtime56.jsx)("div", { ref, className, style: mergedStyle, onClick: disabled ? void 0 : onClick, onDoubleClick: disabled ? void 0 : onDoubleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
+  return (0, import_jsx_runtime54.jsx)("div", { ref, className, style: mergedStyle, onClick: disabled ? void 0 : onClick, onDoubleClick: disabled ? void 0 : onDoubleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
     setHovered(false);
     setActive(false);
   }, onMouseDown: () => setActive(true), onMouseUp: () => setActive(false), onKeyDown: handleKeyDown, role: resolvedRole, "aria-label": ariaLabel, "aria-disabled": disabled || void 0, tabIndex: resolvedTabIndex, ...rest, children });
 });
-var Hoverable = (0, import_react43.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react43.useState)(false);
+var Hoverable = (0, import_react38.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react38.useState)(false);
   const mergedStyle = {
     ...style,
     transition: transition2,
     ...hovered ? hoverStyle : {}
   };
-  return (0, import_jsx_runtime57.jsx)("div", { ref, className, style: mergedStyle, onMouseEnter: () => {
+  return (0, import_jsx_runtime55.jsx)("div", { ref, className, style: mergedStyle, onMouseEnter: () => {
     setHovered(true);
     onHoverChange?.(true);
   }, onMouseLeave: () => {
@@ -43771,10 +43712,10 @@ var Hoverable = (0, import_react43.forwardRef)(function Hoverable2({ children, h
     onHoverChange?.(false);
   }, ...rest, children });
 });
-var Pressable = (0, import_react44.forwardRef)(function Pressable2({ children, onPress, onLongPress, longPressDelay = 500, hoverStyle, pressStyle, disabled = false, transition: transition2 = "all 150ms ease", role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react44.useState)(false);
-  const [pressed, setPressed] = (0, import_react44.useState)(false);
-  const [longPressTimer, setLongPressTimer] = (0, import_react44.useState)(null);
+var Pressable = (0, import_react39.forwardRef)(function Pressable2({ children, onPress, onLongPress, longPressDelay = 500, hoverStyle, pressStyle, disabled = false, transition: transition2 = "all 150ms ease", role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react39.useState)(false);
+  const [pressed, setPressed] = (0, import_react39.useState)(false);
+  const [longPressTimer, setLongPressTimer] = (0, import_react39.useState)(null);
   const hasPress = !!onPress || !!onLongPress;
   const handleMouseDown = (e) => {
     if (disabled)
@@ -43817,7 +43758,7 @@ var Pressable = (0, import_react44.forwardRef)(function Pressable2({ children, o
     ...pressed && !disabled ? pressStyle : {}
   };
   const content = typeof children === "function" ? children({ pressed, hovered }) : children;
-  return (0, import_jsx_runtime58.jsx)("div", { ref, className, style: mergedStyle, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
+  return (0, import_jsx_runtime56.jsx)("div", { ref, className, style: mergedStyle, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
     setHovered(false);
     setPressed(false);
     if (longPressTimer)
@@ -46661,7 +46602,7 @@ function getTheme(id, mode = "light") {
 function getDefaultThemeId() {
   return "ggui";
 }
-var ThemeContext = (0, import_react45.createContext)(null);
+var ThemeContext = (0, import_react40.createContext)(null);
 var COLOR_MIX_SUPPORTS = "@supports (color: color-mix(in srgb, red, blue))";
 function resolvePrimary500Hex(cssVariables) {
   const match = cssVariables.match(/--ggui-color-primary-500:\s*(#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6})\s*;/);
@@ -47153,7 +47094,7 @@ function makeScopeClass(reactId) {
 }
 var AUTO_RETRY_LIMIT = 1;
 var AUTO_RETRY_DELAY = 500;
-var ErrorBoundary = class extends import_react12.default.Component {
+var ErrorBoundary = class extends import_react7.default.Component {
   state = { error: null, catchCount: 0, autoRetrying: false };
   retryTimer = null;
   static getDerivedStateFromError(error210) {
@@ -47175,10 +47116,10 @@ var ErrorBoundary = class extends import_react12.default.Component {
     if (this.retryTimer) clearTimeout(this.retryTimer);
   }
   render() {
-    const { error: error210, autoRetrying, catchCount } = this.state;
+    const { error: error210, autoRetrying } = this.state;
     if (!error210) return this.props.children;
     if (autoRetrying) {
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { style: {
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -47187,21 +47128,22 @@ var ErrorBoundary = class extends import_react12.default.Component {
         gap: 8,
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         fontSize: 13,
-        color: "rgba(255,255,255,0.4)"
+        color: "var(--ggui-color-onSurface, inherit)",
+        opacity: 0.6
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
           width: 16,
           height: 16,
-          border: "2px solid rgba(255,255,255,0.15)",
-          borderTopColor: "rgba(255,255,255,0.5)",
+          border: "2px solid rgba(128,128,128,0.25)",
+          borderTopColor: "currentColor",
           borderRadius: "50%",
           animation: "ggui-err-spin 0.6s linear infinite"
         } }),
         "Retrying...",
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("style", { children: `@keyframes ggui-err-spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("style", { children: `@keyframes ggui-err-spin { to { transform: rotate(360deg); } }` })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -47210,21 +47152,23 @@ var ErrorBoundary = class extends import_react12.default.Component {
       minHeight: 120,
       gap: 12,
       textAlign: "center",
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      color: "var(--ggui-color-onSurface, inherit)"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
         width: 48,
         height: 48,
         borderRadius: 14,
         background: "rgba(239, 68, 68, 0.1)",
+        color: "#ef4444",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         fontSize: 22
       }, children: "!" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Something went wrong" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: "This component encountered an error. Try asking for a different view." }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 14, fontWeight: 600, opacity: 0.9 }, children: "Something went wrong" }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 12, opacity: 0.6, maxWidth: 280, lineHeight: 1.4 }, children: "This component encountered an error. Try asking for a different view." }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "button",
         {
           onClick: () => this.setState({ error: null, catchCount: 0 }),
@@ -47232,9 +47176,10 @@ var ErrorBoundary = class extends import_react12.default.Component {
             marginTop: 4,
             padding: "8px 20px",
             borderRadius: 8,
-            border: "1px solid rgba(255,255,255,0.15)",
-            background: "rgba(255,255,255,0.08)",
-            color: "rgba(255,255,255,0.7)",
+            border: "1px solid currentColor",
+            background: "transparent",
+            color: "inherit",
+            opacity: 0.75,
             fontSize: 13,
             fontWeight: 500,
             cursor: "pointer"
@@ -47242,7 +47187,18 @@ var ErrorBoundary = class extends import_react12.default.Component {
           children: "Retry"
         }
       ),
-      catchCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.2)" }, children: error210.message })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("details", { style: { marginTop: 8, maxWidth: 320, width: "100%", textAlign: "left", opacity: 0.65 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("summary", { style: { fontSize: 11, cursor: "pointer" }, children: "Error details" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("pre", { style: {
+          fontSize: 11,
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+          whiteSpace: "pre-wrap",
+          overflowWrap: "anywhere",
+          margin: "6px 0 0",
+          maxHeight: 140,
+          overflow: "auto"
+        }, children: error210.message })
+      ] })
     ] });
   }
 };
@@ -47251,15 +47207,15 @@ function ReactComponentRenderer({
   props = {},
   themeId,
   cssOverrides,
-  fallback = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children: "Loading component..." }),
+  fallback = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: "Loading component..." }),
   onError
 }) {
-  const reactId = (0, import_react12.useId)();
-  const [scopeClass] = (0, import_react12.useState)(() => makeScopeClass(reactId) || `ggui-rcr-${++scopeCounter}`);
-  const [Component2, setComponent] = (0, import_react12.useState)(null);
-  const [error210, setError] = (0, import_react12.useState)(null);
-  const [loading, setLoading] = (0, import_react12.useState)(true);
-  (0, import_react12.useEffect)(() => {
+  const reactId = (0, import_react7.useId)();
+  const [scopeClass] = (0, import_react7.useState)(() => makeScopeClass(reactId) || `ggui-rcr-${++scopeCounter}`);
+  const [Component, setComponent] = (0, import_react7.useState)(null);
+  const [error210, setError] = (0, import_react7.useState)(null);
+  const [loading, setLoading] = (0, import_react7.useState)(true);
+  (0, import_react7.useEffect)(() => {
     if (!code || code.trim().length === 0) {
       setComponent(null);
       setLoading(false);
@@ -47287,7 +47243,7 @@ function ReactComponentRenderer({
         } catch {
         }
         w.__ggui__ = {
-          react: import_react12.default,
+          react: import_react7.default,
           reactDom: reactDomModule,
           primitives: primitives_exports,
           components: components_exports,
@@ -47295,7 +47251,7 @@ function ReactComponentRenderer({
           interact: interact_exports,
           wire: dist_exports
         };
-        w.__REACT = import_react12.default;
+        w.__REACT = import_react7.default;
         w.__GGUI_PRIMITIVES = primitives_exports;
         w.__GGUI_COMPONENTS = components_exports;
         w.__GGUI_COMPOSITIONS = compositions_exports;
@@ -47331,13 +47287,13 @@ function ReactComponentRenderer({
   }, [code]);
   const themeCss = themeId ? getScopedThemeCss(themeId, scopeClass) : getScopedCssTokens(scopeClass);
   if (!code || code.trim().length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: fallback });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: fallback });
   }
   if (error210) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -47348,7 +47304,7 @@ function ReactComponentRenderer({
       textAlign: "center",
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: {
         width: 48,
         height: 48,
         borderRadius: 14,
@@ -47358,52 +47314,26 @@ function ReactComponentRenderer({
         justifyContent: "center",
         fontSize: 22
       }, children: "!" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Failed to load component" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: error210.message })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Failed to load component" }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: error210.message })
     ] });
   }
-  if (!Component2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children: fallback });
+  if (!Component) {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: scopeClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("style", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: scopeClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("style", { children: [
       themeCss,
       cssOverrides ?? ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Component2, { ...props }) }, code.length)
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Component, { ...props }) }, code.length)
   ] });
 }
-var previewShimmerKeyframes = `@keyframes ggui-preview-shimmer {
-  0%   { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}`;
-var previewCaretKeyframes = `@keyframes ggui-preview-caret {
-  0%, 45%  { opacity: 1; }
-  55%, 100% { opacity: 0; }
-}`;
-var previewFragmentEnterKeyframes = `@keyframes ggui-preview-fragment-enter {
-  from { opacity: 0; transform: scale(0.97); }
-  to   { opacity: 1; transform: scale(1); }
-}`;
-var previewReducedMotionCSS = `@media (prefers-reduced-motion: reduce) {
-  [data-ggui-preview] *,
-  [data-ggui-preview]::before,
-  [data-ggui-preview]::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}`;
-var previewKeyframesCss = [
-  previewShimmerKeyframes,
-  previewCaretKeyframes,
-  previewFragmentEnterKeyframes,
-  previewReducedMotionCSS
-].join("\n\n");
 var DynamicComponent = ReactComponentRenderer;
+var DECODER = new TextDecoder();
 
 // hub-preview-client/main.tsx
-var import_jsx_runtime70 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1);
 function bootstrap() {
   const boot = window.__GGUI_DEV_PREVIEW__;
   return {
@@ -47467,11 +47397,11 @@ function PreviewApp({
   token,
   selectedId
 }) {
-  const [state, setState] = (0, import_react53.useState)(
+  const [state, setState] = (0, import_react43.useState)(
     selectedId ? { kind: "loading" } : { kind: "idle" }
   );
-  const [version2, setVersion] = (0, import_react53.useState)(0);
-  (0, import_react53.useEffect)(() => {
+  const [version2, setVersion] = (0, import_react43.useState)(0);
+  (0, import_react43.useEffect)(() => {
     if (!selectedId) {
       setState({ kind: "idle" });
       return;
@@ -47484,7 +47414,7 @@ function PreviewApp({
     });
     return () => controller.abort();
   }, [selectedId, token, version2]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!selectedId) return;
     const controller = new AbortController();
     subscribeToRegistry(token, controller.signal, (event) => {
@@ -47494,90 +47424,90 @@ function PreviewApp({
     return () => controller.abort();
   }, [selectedId, token]);
   if (state.kind === "idle") {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Meta, { children: "No UI selected" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Status, { children: "Pick a UI from the Discovered UIs panel to preview it here." })
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "No UI selected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: "Pick a UI from the Discovered UIs panel to preview it here." })
     ] });
   }
   if (state.kind === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Meta, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Meta, { children: [
         "Preview of ",
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("code", { children: selectedId })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: selectedId })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Status, { children: "Loading bundle\u2026" })
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: "Loading bundle\u2026" })
     ] });
   }
   if (state.kind === "ready") {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "surface", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicComponent, { code: state.code }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "surface", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DynamicComponent, { code: state.code }) });
   }
   if (state.kind === "not-found") {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Meta, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Meta, { children: [
         "Preview of ",
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("code", { children: selectedId })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: selectedId })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Status, { children: "The server doesn't know this id. It may have been removed from the registry." })
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: "The server doesn't know this id. It may have been removed from the registry." })
     ] });
   }
   if (state.kind === "missing") {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Meta, { children: "No renderable entry" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Status, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "No renderable entry" }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Status, { children: [
         "Declare ",
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("code", { children: "entryPoint" }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "entryPoint" }),
         " in ",
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("code", { children: "ggui.ui.json" }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "ggui.ui.json" }),
         ", or colocate a ",
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("code", { children: "ggui.ui.tsx" }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "ggui.ui.tsx" }),
         " beside the manifest."
       ] }),
-      state.tried.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("pre", { className: "tried", children: state.tried.join("\n") })
+      state.tried.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "tried", children: state.tried.join("\n") })
     ] });
   }
   if (state.kind === "compile") {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Meta, { children: "Local compile failed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("ul", { className: "errors", children: state.detail.errors.map((err, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "Local compile failed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "errors", children: state.detail.errors.map((err, i) => {
         const loc = err.location;
         const locLine = loc ? `${loc.file ?? state.detail.entry}:${loc.line ?? "?"}:${loc.column ?? "?"}` : state.detail.entry;
-        return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("li", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("pre", { className: "location", children: locLine }),
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("pre", { className: "error", children: err.text }),
-          loc?.lineText && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("pre", { className: "line-text", children: loc.lineText })
+        return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "location", children: locLine }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "error", children: err.text }),
+          loc?.lineText && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("pre", { className: "line-text", children: loc.lineText })
         ] }, i);
       }) })
     ] });
   }
   if (state.kind === "http") {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Meta, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Meta, { children: [
         "Bundle fetch failed (HTTP ",
         state.status,
         ")"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Status, { children: state.message })
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Status, { children: state.message })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Pane, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Meta, { children: "Local ggui dev server is unreachable" }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Status, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Pane, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Meta, { children: "Local ggui dev server is unreachable" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Status, { children: [
       "Studio could not reach the server \u2014 is ",
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("code", { children: "ggui dev" }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("code", { children: "ggui dev" }),
       " still running?",
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("br", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "dim", children: state.message })
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("br", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "dim", children: state.message })
     ] })
   ] });
 }
 function Pane({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "frame", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "pane", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "frame", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "pane", children }) });
 }
 function Meta({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "meta", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "meta", children });
 }
 function Status({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "status", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "status", children });
 }
 async function subscribeToRegistry(token, signal, onEvent) {
   let backoff = 500;
@@ -47646,7 +47576,7 @@ function mount() {
   if (!root) throw new Error("preview-root element not found in shell");
   const { token, selectedId } = bootstrap();
   (0, import_client.createRoot)(root).render(
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react53.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(PreviewApp, { token, selectedId }) })
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react43.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PreviewApp, { token, selectedId }) })
   );
 }
 mount();