citadel_cli 1.1.3 → 1.1.5

package/dist/citadel.es.js

@@ -1,689 +1,14 @@
-var Xn = Object.defineProperty;
-var Qn = (o, n, t) => n in o ? Xn(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
-var A = (o, n, t) => Qn(o, typeof n != "symbol" ? n + "" : n, t);
-import Q, { useEffect as z, useMemo as be, createContext as Zn, useContext as ve, useState as Y, useCallback as R, useReducer as et, useRef as X } from "react";
-import nt from "react-dom";
-var Te = { exports: {} }, ae = {};
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var on;
-function tt() {
-  if (on) return ae;
-  on = 1;
-  var o = Q, n = Symbol.for("react.element"), t = Symbol.for("react.fragment"), r = Object.prototype.hasOwnProperty, a = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, i = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function u(f, c, m) {
-    var h, b = {}, _ = null, S = null;
-    m !== void 0 && (_ = "" + m), c.key !== void 0 && (_ = "" + c.key), c.ref !== void 0 && (S = c.ref);
-    for (h in c) r.call(c, h) && !i.hasOwnProperty(h) && (b[h] = c[h]);
-    if (f && f.defaultProps) for (h in c = f.defaultProps, c) b[h] === void 0 && (b[h] = c[h]);
-    return { $$typeof: n, type: f, key: _, ref: S, props: b, _owner: a.current };
-  }
-  return ae.Fragment = t, ae.jsx = u, ae.jsxs = u, ae;
-}
-var se = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var an;
-function rt() {
-  return an || (an = 1, process.env.NODE_ENV !== "production" && function() {
-    var o = Q, n = Symbol.for("react.element"), t = Symbol.for("react.portal"), r = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), i = Symbol.for("react.profiler"), u = Symbol.for("react.provider"), f = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), b = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), S = Symbol.for("react.offscreen"), U = Symbol.iterator, I = "@@iterator";
-    function d(e) {
-      if (e === null || typeof e != "object")
-        return null;
-      var s = U && e[U] || e[I];
-      return typeof s == "function" ? s : null;
-    }
-    var y = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function w(e) {
-      {
-        for (var s = arguments.length, l = new Array(s > 1 ? s - 1 : 0), g = 1; g < s; g++)
-          l[g - 1] = arguments[g];
-        N("error", e, l);
-      }
-    }
-    function N(e, s, l) {
-      {
-        var g = y.ReactDebugCurrentFrame, C = g.getStackAddendum();
-        C !== "" && (s += "%s", l = l.concat([C]));
-        var E = l.map(function(x) {
-          return String(x);
-        });
-        E.unshift("Warning: " + s), Function.prototype.apply.call(console[e], console, E);
-      }
-    }
-    var k = !1, j = !1, P = !1, $ = !1, L = !1, ee;
-    ee = Symbol.for("react.module.reference");
-    function de(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === r || e === i || L || e === a || e === m || e === h || $ || e === S || k || j || P || typeof e == "object" && e !== null && (e.$$typeof === _ || e.$$typeof === b || e.$$typeof === u || e.$$typeof === f || e.$$typeof === c || // This needs to include all possible module reference object
-      // types supported by any Flight configuration anywhere since
-      // we don't know which Flight build this will end up being used
-      // with.
-      e.$$typeof === ee || e.getModuleId !== void 0));
-    }
-    function ne(e, s, l) {
-      var g = e.displayName;
-      if (g)
-        return g;
-      var C = s.displayName || s.name || "";
-      return C !== "" ? l + "(" + C + ")" : l;
-    }
-    function De(e) {
-      return e.displayName || "Context";
-    }
-    function V(e) {
-      if (e == null)
-        return null;
-      if (typeof e.tag == "number" && w("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
-        return e.displayName || e.name || null;
-      if (typeof e == "string")
-        return e;
-      switch (e) {
-        case r:
-          return "Fragment";
-        case t:
-          return "Portal";
-        case i:
-          return "Profiler";
-        case a:
-          return "StrictMode";
-        case m:
-          return "Suspense";
-        case h:
-          return "SuspenseList";
-      }
-      if (typeof e == "object")
-        switch (e.$$typeof) {
-          case f:
-            var s = e;
-            return De(s) + ".Consumer";
-          case u:
-            var l = e;
-            return De(l._context) + ".Provider";
-          case c:
-            return ne(e, e.render, "ForwardRef");
-          case b:
-            var g = e.displayName || null;
-            return g !== null ? g : V(e.type) || "Memo";
-          case _: {
-            var C = e, E = C._payload, x = C._init;
-            try {
-              return V(x(E));
-            } catch {
-              return null;
-            }
-          }
-        }
-      return null;
-    }
-    var K = Object.assign, te = 0, ze, Fe, Ue, He, Me, $e, We;
-    function Le() {
-    }
-    Le.__reactDisabledLog = !0;
-    function En() {
-      {
-        if (te === 0) {
-          ze = console.log, Fe = console.info, Ue = console.warn, He = console.error, Me = console.group, $e = console.groupCollapsed, We = console.groupEnd;
-          var e = {
-            configurable: !0,
-            enumerable: !0,
-            value: Le,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            info: e,
-            log: e,
-            warn: e,
-            error: e,
-            group: e,
-            groupCollapsed: e,
-            groupEnd: e
-          });
-        }
-        te++;
-      }
-    }
-    function kn() {
-      {
-        if (te--, te === 0) {
-          var e = {
-            configurable: !0,
-            enumerable: !0,
-            writable: !0
-          };
-          Object.defineProperties(console, {
-            log: K({}, e, {
-              value: ze
-            }),
-            info: K({}, e, {
-              value: Fe
-            }),
-            warn: K({}, e, {
-              value: Ue
-            }),
-            error: K({}, e, {
-              value: He
-            }),
-            group: K({}, e, {
-              value: Me
-            }),
-            groupCollapsed: K({}, e, {
-              value: $e
-            }),
-            groupEnd: K({}, e, {
-              value: We
-            })
-          });
-        }
-        te < 0 && w("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
-      }
-    }
-    var Ce = y.ReactCurrentDispatcher, Se;
-    function me(e, s, l) {
-      {
-        if (Se === void 0)
-          try {
-            throw Error();
-          } catch (C) {
-            var g = C.stack.trim().match(/\n( *(at )?)/);
-            Se = g && g[1] || "";
-          }
-        return `
-` + Se + e;
-      }
-    }
-    var Ee = !1, pe;
-    {
-      var _n = typeof WeakMap == "function" ? WeakMap : Map;
-      pe = new _n();
-    }
-    function Ye(e, s) {
-      if (!e || Ee)
-        return "";
-      {
-        var l = pe.get(e);
-        if (l !== void 0)
-          return l;
-      }
-      var g;
-      Ee = !0;
-      var C = Error.prepareStackTrace;
-      Error.prepareStackTrace = void 0;
-      var E;
-      E = Ce.current, Ce.current = null, En();
-      try {
-        if (s) {
-          var x = function() {
-            throw Error();
-          };
-          if (Object.defineProperty(x.prototype, "props", {
-            set: function() {
-              throw Error();
-            }
-          }), typeof Reflect == "object" && Reflect.construct) {
-            try {
-              Reflect.construct(x, []);
-            } catch (H) {
-              g = H;
-            }
-            Reflect.construct(e, [], x);
-          } else {
-            try {
-              x.call();
-            } catch (H) {
-              g = H;
-            }
-            e.call(x.prototype);
-          }
-        } else {
-          try {
-            throw Error();
-          } catch (H) {
-            g = H;
-          }
-          e();
-        }
-      } catch (H) {
-        if (H && g && typeof H.stack == "string") {
-          for (var v = H.stack.split(`
-`), F = g.stack.split(`
-`), T = v.length - 1, O = F.length - 1; T >= 1 && O >= 0 && v[T] !== F[O]; )
-            O--;
-          for (; T >= 1 && O >= 0; T--, O--)
-            if (v[T] !== F[O]) {
-              if (T !== 1 || O !== 1)
-                do
-                  if (T--, O--, O < 0 || v[T] !== F[O]) {
-                    var W = `
-` + v[T].replace(" at new ", " at ");
-                    return e.displayName && W.includes("<anonymous>") && (W = W.replace("<anonymous>", e.displayName)), typeof e == "function" && pe.set(e, W), W;
-                  }
-                while (T >= 1 && O >= 0);
-              break;
-            }
-        }
-      } finally {
-        Ee = !1, Ce.current = E, kn(), Error.prepareStackTrace = C;
-      }
-      var G = e ? e.displayName || e.name : "", B = G ? me(G) : "";
-      return typeof e == "function" && pe.set(e, B), B;
-    }
-    function Rn(e, s, l) {
-      return Ye(e, !1);
-    }
-    function jn(e) {
-      var s = e.prototype;
-      return !!(s && s.isReactComponent);
-    }
-    function fe(e, s, l) {
-      if (e == null)
-        return "";
-      if (typeof e == "function")
-        return Ye(e, jn(e));
-      if (typeof e == "string")
-        return me(e);
-      switch (e) {
-        case m:
-          return me("Suspense");
-        case h:
-          return me("SuspenseList");
-      }
-      if (typeof e == "object")
-        switch (e.$$typeof) {
-          case c:
-            return Rn(e.render);
-          case b:
-            return fe(e.type, s, l);
-          case _: {
-            var g = e, C = g._payload, E = g._init;
-            try {
-              return fe(E(C), s, l);
-            } catch {
-            }
-          }
-        }
-      return "";
-    }
-    var re = Object.prototype.hasOwnProperty, Ve = {}, Ke = y.ReactDebugCurrentFrame;
-    function he(e) {
-      if (e) {
-        var s = e._owner, l = fe(e.type, e._source, s ? s.type : null);
-        Ke.setExtraStackFrame(l);
-      } else
-        Ke.setExtraStackFrame(null);
-    }
-    function An(e, s, l, g, C) {
-      {
-        var E = Function.call.bind(re);
-        for (var x in e)
-          if (E(e, x)) {
-            var v = void 0;
-            try {
-              if (typeof e[x] != "function") {
-                var F = Error((g || "React class") + ": " + l + " type `" + x + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[x] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw F.name = "Invariant Violation", F;
-              }
-              v = e[x](s, x, g, l, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (T) {
-              v = T;
-            }
-            v && !(v instanceof Error) && (he(C), w("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", g || "React class", l, x, typeof v), he(null)), v instanceof Error && !(v.message in Ve) && (Ve[v.message] = !0, he(C), w("Failed %s type: %s", l, v.message), he(null));
-          }
-      }
-    }
-    var Pn = Array.isArray;
-    function ke(e) {
-      return Pn(e);
-    }
-    function Tn(e) {
-      {
-        var s = typeof Symbol == "function" && Symbol.toStringTag, l = s && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return l;
-      }
-    }
-    function On(e) {
-      try {
-        return Be(e), !1;
-      } catch {
-        return !0;
-      }
-    }
-    function Be(e) {
-      return "" + e;
-    }
-    function qe(e) {
-      if (On(e))
-        return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Tn(e)), Be(e);
-    }
-    var oe = y.ReactCurrentOwner, Nn = {
-      key: !0,
-      ref: !0,
-      __self: !0,
-      __source: !0
-    }, Je, Ge, _e;
-    _e = {};
-    function In(e) {
-      if (re.call(e, "ref")) {
-        var s = Object.getOwnPropertyDescriptor(e, "ref").get;
-        if (s && s.isReactWarning)
-          return !1;
-      }
-      return e.ref !== void 0;
-    }
-    function Dn(e) {
-      if (re.call(e, "key")) {
-        var s = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (s && s.isReactWarning)
-          return !1;
-      }
-      return e.key !== void 0;
-    }
-    function zn(e, s) {
-      if (typeof e.ref == "string" && oe.current && s && oe.current.stateNode !== s) {
-        var l = V(oe.current.type);
-        _e[l] || (w('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', V(oe.current.type), e.ref), _e[l] = !0);
-      }
-    }
-    function Fn(e, s) {
-      {
-        var l = function() {
-          Je || (Je = !0, w("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
-        };
-        l.isReactWarning = !0, Object.defineProperty(e, "key", {
-          get: l,
-          configurable: !0
-        });
-      }
-    }
-    function Un(e, s) {
-      {
-        var l = function() {
-          Ge || (Ge = !0, w("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
-        };
-        l.isReactWarning = !0, Object.defineProperty(e, "ref", {
-          get: l,
-          configurable: !0
-        });
-      }
-    }
-    var Hn = function(e, s, l, g, C, E, x) {
-      var v = {
-        // This tag allows us to uniquely identify this as a React Element
-        $$typeof: n,
-        // Built-in properties that belong on the element
-        type: e,
-        key: s,
-        ref: l,
-        props: x,
-        // Record the component responsible for creating this element.
-        _owner: E
-      };
-      return v._store = {}, Object.defineProperty(v._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: !1
-      }), Object.defineProperty(v, "_self", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: g
-      }), Object.defineProperty(v, "_source", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !1,
-        value: C
-      }), Object.freeze && (Object.freeze(v.props), Object.freeze(v)), v;
-    };
-    function Mn(e, s, l, g, C) {
-      {
-        var E, x = {}, v = null, F = null;
-        l !== void 0 && (qe(l), v = "" + l), Dn(s) && (qe(s.key), v = "" + s.key), In(s) && (F = s.ref, zn(s, C));
-        for (E in s)
-          re.call(s, E) && !Nn.hasOwnProperty(E) && (x[E] = s[E]);
-        if (e && e.defaultProps) {
-          var T = e.defaultProps;
-          for (E in T)
-            x[E] === void 0 && (x[E] = T[E]);
-        }
-        if (v || F) {
-          var O = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          v && Fn(x, O), F && Un(x, O);
-        }
-        return Hn(e, v, F, C, g, oe.current, x);
-      }
-    }
-    var Re = y.ReactCurrentOwner, Xe = y.ReactDebugCurrentFrame;
-    function J(e) {
-      if (e) {
-        var s = e._owner, l = fe(e.type, e._source, s ? s.type : null);
-        Xe.setExtraStackFrame(l);
-      } else
-        Xe.setExtraStackFrame(null);
-    }
-    var je;
-    je = !1;
-    function Ae(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === n;
-    }
-    function Qe() {
-      {
-        if (Re.current) {
-          var e = V(Re.current.type);
-          if (e)
-            return `
-
-Check the render method of \`` + e + "`.";
-        }
-        return "";
-      }
-    }
-    function $n(e) {
-      return "";
-    }
-    var Ze = {};
-    function Wn(e) {
-      {
-        var s = Qe();
-        if (!s) {
-          var l = typeof e == "string" ? e : e.displayName || e.name;
-          l && (s = `
-
-Check the top-level render call using <` + l + ">.");
-        }
-        return s;
-      }
-    }
-    function en(e, s) {
-      {
-        if (!e._store || e._store.validated || e.key != null)
-          return;
-        e._store.validated = !0;
-        var l = Wn(s);
-        if (Ze[l])
-          return;
-        Ze[l] = !0;
-        var g = "";
-        e && e._owner && e._owner !== Re.current && (g = " It was passed a child from " + V(e._owner.type) + "."), J(e), w('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', l, g), J(null);
-      }
-    }
-    function nn(e, s) {
-      {
-        if (typeof e != "object")
-          return;
-        if (ke(e))
-          for (var l = 0; l < e.length; l++) {
-            var g = e[l];
-            Ae(g) && en(g, s);
-          }
-        else if (Ae(e))
-          e._store && (e._store.validated = !0);
-        else if (e) {
-          var C = d(e);
-          if (typeof C == "function" && C !== e.entries)
-            for (var E = C.call(e), x; !(x = E.next()).done; )
-              Ae(x.value) && en(x.value, s);
-        }
-      }
-    }
-    function Ln(e) {
-      {
-        var s = e.type;
-        if (s == null || typeof s == "string")
-          return;
-        var l;
-        if (typeof s == "function")
-          l = s.propTypes;
-        else if (typeof s == "object" && (s.$$typeof === c || // Note: Memo only checks outer props here.
-        // Inner props are checked in the reconciler.
-        s.$$typeof === b))
-          l = s.propTypes;
-        else
-          return;
-        if (l) {
-          var g = V(s);
-          An(l, e.props, "prop", g, e);
-        } else if (s.PropTypes !== void 0 && !je) {
-          je = !0;
-          var C = V(s);
-          w("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", C || "Unknown");
-        }
-        typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && w("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
-      }
-    }
-    function Yn(e) {
-      {
-        for (var s = Object.keys(e.props), l = 0; l < s.length; l++) {
-          var g = s[l];
-          if (g !== "children" && g !== "key") {
-            J(e), w("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", g), J(null);
-            break;
-          }
-        }
-        e.ref !== null && (J(e), w("Invalid attribute `ref` supplied to `React.Fragment`."), J(null));
-      }
-    }
-    var tn = {};
-    function rn(e, s, l, g, C, E) {
-      {
-        var x = de(e);
-        if (!x) {
-          var v = "";
-          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (v += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var F = $n();
-          F ? v += F : v += Qe();
-          var T;
-          e === null ? T = "null" : ke(e) ? T = "array" : e !== void 0 && e.$$typeof === n ? (T = "<" + (V(e.type) || "Unknown") + " />", v = " Did you accidentally export a JSX literal instead of a component?") : T = typeof e, w("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", T, v);
-        }
-        var O = Mn(e, s, l, C, E);
-        if (O == null)
-          return O;
-        if (x) {
-          var W = s.children;
-          if (W !== void 0)
-            if (g)
-              if (ke(W)) {
-                for (var G = 0; G < W.length; G++)
-                  nn(W[G], e);
-                Object.freeze && Object.freeze(W);
-              } else
-                w("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
-            else
-              nn(W, e);
-        }
-        if (re.call(s, "key")) {
-          var B = V(e), H = Object.keys(s).filter(function(Gn) {
-            return Gn !== "key";
-          }), Pe = H.length > 0 ? "{key: someKey, " + H.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!tn[B + Pe]) {
-            var Jn = H.length > 0 ? "{" + H.join(": ..., ") + ": ...}" : "{}";
-            w(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`, Pe, B, Jn, B), tn[B + Pe] = !0;
-          }
-        }
-        return e === r ? Yn(O) : Ln(O), O;
-      }
-    }
-    function Vn(e, s, l) {
-      return rn(e, s, l, !0);
-    }
-    function Kn(e, s, l) {
-      return rn(e, s, l, !1);
-    }
-    var Bn = Kn, qn = Vn;
-    se.Fragment = r, se.jsx = Bn, se.jsxs = qn;
-  }()), se;
-}
-process.env.NODE_ENV === "production" ? Te.exports = tt() : Te.exports = rt();
-var p = Te.exports, Oe, ge = nt;
-if (process.env.NODE_ENV === "production")
-  Oe = ge.createRoot, ge.hydrateRoot;
-else {
-  var sn = ge.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  Oe = function(o, n) {
-    sn.usingClientEntryPoint = !0;
-    try {
-      return ge.createRoot(o, n);
-    } finally {
-      sn.usingClientEntryPoint = !1;
-    }
-  };
-}
-const ot = ({ onOpen: o, onClose: n, isVisible: t, showCitadelKey: r }) => {
-  z(() => {
-    const a = (i) => {
-      var u, f;
-      !t && i.key === r && !["input", "textarea"].includes(((f = (u = i.target) == null ? void 0 : u.tagName) == null ? void 0 : f.toLowerCase()) || "") && (i.preventDefault(), o()), t && i.key === "Escape" && (i.preventDefault(), n());
-    };
-    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
-  }, [o, n, t, r]);
-}, at = "_container_141sr_3", st = "_innerContainer_141sr_19", it = "_inputSection_141sr_28", lt = "_resizeHandle_141sr_35", ct = "_citadel_slideUp_141sr_64", ut = "_citadel_slideDown_141sr_68", ln = {
-  container: at,
-  innerContainer: st,
-  inputSection: it,
-  resizeHandle: lt,
-  citadel_slideUp: ct,
-  citadel_slideDown: ut
-}, dt = (o) => {
-  const { isVisible: n, isClosing: t, onAnimationComplete: r } = o, a = be(() => n ? t ? ln.slideDown : ln.slideUp : "", [n, t]);
-  return z(() => {
-    if (r) {
-      const u = setTimeout(() => {
-        r();
-      }, 200);
-      return () => clearTimeout(u);
-    }
-  }, [t, r]), {
-    style: be(() => ({
-      opacity: n ? 1 : 0,
-      transform: n ? "translateY(0)" : t ? "translateY(100%)" : "translateY(-100%)",
-      transition: "opacity 200ms ease-in-out, transform 200ms ease-in-out"
-    }), [n, t]),
-    animationClass: a
-  };
-};
-var ie = /* @__PURE__ */ ((o) => (o.Pending = "pending", o.Success = "success", o.Failure = "failure", o.Timeout = "timeout", o))(ie || {});
-class Z {
-  constructor(n = Date.now()) {
-    A(this, "_status", "pending");
-    this.timestamp = n;
+var ge = Object.defineProperty;
+var fe = (r, e, n) => e in r ? ge(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
+var b = (r, e, n) => fe(r, typeof e != "symbol" ? e + "" : e, n);
+import { jsx as m, jsxs as _, Fragment as we } from "react/jsx-runtime";
+import L, { createContext as be, useEffect as A, useContext as Y, useState as R, useCallback as w, useMemo as V, useReducer as ye, useRef as H } from "react";
+import { createRoot as xe } from "react-dom/client";
+var T = /* @__PURE__ */ ((r) => (r.Pending = "pending", r.Success = "success", r.Failure = "failure", r.Timeout = "timeout", r))(T || {});
+class U {
+  constructor(e = Date.now()) {
+    b(this, "_status", "pending");
+    this.timestamp = e;
   }
   get status() {
     return this._status;
@@ -698,41 +23,41 @@ class Z {
     this._status = "timeout";
   }
 }
-class Ht extends Z {
-  constructor(n, t) {
-    super(t), this.data = n;
+class an extends U {
+  constructor(e, n) {
+    super(n), this.data = e;
   }
   render() {
-    return /* @__PURE__ */ p.jsx("pre", { className: "text-gray-200", children: JSON.stringify(this.data, null, 2) });
+    return /* @__PURE__ */ m("pre", { className: "text-gray-200", children: JSON.stringify(this.data, null, 2) });
   }
 }
-class hn extends Z {
-  constructor(n, t) {
-    super(t), this.text = n;
+class ae extends U {
+  constructor(e, n) {
+    super(n), this.text = e;
   }
   render() {
-    return /* @__PURE__ */ p.jsx("div", { className: "text-gray-200 whitespace-pre font-mono", children: this.text });
+    return /* @__PURE__ */ m("div", { className: "text-gray-200 whitespace-pre font-mono", children: this.text });
   }
 }
-class mt extends Z {
-  constructor(n, t) {
-    super(t), this.error = n, this.markFailure();
+class ve extends U {
+  constructor(e, n) {
+    super(n), this.error = e, this.markFailure();
   }
   render() {
-    return /* @__PURE__ */ p.jsx("div", { className: "mt-1 text-red-400", children: this.error });
+    return /* @__PURE__ */ m("div", { className: "mt-1 text-red-400", children: this.error });
   }
 }
-class pt extends Z {
+class Ce extends U {
   render() {
-    return /* @__PURE__ */ p.jsx("div", { className: "text-gray-400", children: "..." });
+    return /* @__PURE__ */ m("div", { className: "text-gray-400", children: "..." });
   }
 }
-class Mt extends Z {
-  constructor(n, t = "", r) {
-    super(r), this.imageUrl = n, this.altText = t;
+class ln extends U {
+  constructor(e, n = "", t) {
+    super(t), this.imageUrl = e, this.altText = n;
   }
   render() {
-    return /* @__PURE__ */ p.jsx("div", { className: "my-2", children: /* @__PURE__ */ p.jsx(
+    return /* @__PURE__ */ m("div", { className: "my-2", children: /* @__PURE__ */ m(
       "img",
       {
         src: this.imageUrl,
@@ -742,142 +67,143 @@ class Mt extends Z {
     ) });
   }
 }
-const ft = (o) => async function() {
-  const n = o.commands.filter((t) => t.fullPath[0] !== "help").map((t) => `${t.segments.map((a) => a.type === "argument" ? `<${a.name}>` : a.name).join(" ")} - ${t.description}`).sort();
-  return n.push("help - Show available commands"), new hn(
-    n.length > 0 ? `Available Commands:
-` + n.join(`
+const Se = (r) => async function() {
+  const e = r.commands.filter((n) => n.fullPath[0] !== "help").map((n) => `${n.segments.map((o) => o.type === "argument" ? `<${o.name}>` : o.name).join(" ")} - ${n.description}`).sort();
+  return e.push("help - Show available commands"), new ae(
+    e.length > 0 ? `Available Commands:
+` + e.join(`
 `) : "No commands available yet. Add some commands to get started!"
   );
 };
-var we = /* @__PURE__ */ ((o) => (o[o.NONE = 0] = "NONE", o[o.ERROR = 1] = "ERROR", o[o.WARN = 2] = "WARN", o[o.INFO = 3] = "INFO", o[o.DEBUG = 4] = "DEBUG", o[o.TRACE = 5] = "TRACE", o))(we || {});
-class D {
-  static configure(n) {
-    this.level = n.level, this.prefix = n.prefix || "[Citadel]";
+var W = /* @__PURE__ */ ((r) => (r[r.NONE = 0] = "NONE", r[r.ERROR = 1] = "ERROR", r[r.WARN = 2] = "WARN", r[r.INFO = 3] = "INFO", r[r.DEBUG = 4] = "DEBUG", r[r.TRACE = 5] = "TRACE", r))(W || {});
+class C {
+  static configure(e) {
+    this.level = e.level, this.prefix = e.prefix || "[Citadel]";
   }
-  static trace(...n) {
-    this.level >= 5 && process.env.NODE_ENV !== "production" && console.trace(this.prefix, ...n);
+  static trace(...e) {
+    this.level >= 5 && process.env.NODE_ENV !== "production" && console.trace(this.prefix, ...e);
   }
-  static debug(...n) {
-    this.level >= 4 && process.env.NODE_ENV !== "production" && console.debug(this.prefix, ...n);
+  static debug(...e) {
+    this.level >= 4 && process.env.NODE_ENV !== "production" && console.debug(this.prefix, ...e);
   }
-  static info(...n) {
-    this.level >= 3 && console.info(this.prefix, ...n);
+  static info(...e) {
+    this.level >= 3 && console.info(this.prefix, ...e);
   }
-  static warn(...n) {
-    this.level >= 2 && console.warn(this.prefix, ...n);
+  static warn(...e) {
+    this.level >= 2 && console.warn(this.prefix, ...e);
   }
-  static error(...n) {
-    this.level >= 1 && console.error(this.prefix, ...n);
+  static error(...e) {
+    this.level >= 1 && console.error(this.prefix, ...e);
   }
 }
-A(D, "level", 0), A(D, "prefix", "");
-const M = {
+b(C, "level", 0), b(C, "prefix", "");
+const z = {
   commandTimeoutMs: 1e4,
   cursorColor: "var(--cursor-color, #fff)",
   cursorSpeed: 530,
   cursorType: "blink",
   includeHelpCommand: !0,
   initialHeight: "40vh",
-  logLevel: process.env.NODE_ENV === "production" ? we.ERROR : we.DEBUG,
+  logLevel: process.env.NODE_ENV === "production" ? W.ERROR : W.DEBUG,
   maxHeight: "80vh",
   minHeight: "200",
   outputFontSize: "0.875rem",
   resetStateOnHide: !1,
   showCitadelKey: ".",
+  displayMode: "panel",
   storage: {
     type: "localStorage",
     maxCommands: 100
   }
 };
-class gn {
-  constructor(n) {
-    A(this, "config");
+class ie {
+  constructor(e) {
+    b(this, "config");
     this.config = {
       type: "localStorage",
       maxCommands: 100,
-      ...n
+      ...e
     };
   }
   /**
    * Add a command to history, enforcing storage limits
    */
-  async addStoredCommand(n) {
-    const t = await this.getStoredCommands();
-    for (t.push(n); t.length > this.config.maxCommands; )
-      t.shift();
-    await this.saveCommands(t);
+  async addStoredCommand(e) {
+    const n = await this.getStoredCommands();
+    for (n.push(e); n.length > this.config.maxCommands; )
+      n.shift();
+    await this.saveCommands(n);
   }
 }
-class ht extends gn {
-  constructor(t) {
-    super(t);
-    A(this, "storageKey", "citadel_command_history");
+class ke extends ie {
+  constructor(n) {
+    super(n);
+    b(this, "storageKey", "citadel_command_history");
   }
   async getStoredCommands() {
     try {
-      const t = window.localStorage.getItem(this.storageKey);
-      return t ? JSON.parse(t).map((a) => ({
-        commandSegments: a.commandSegments || [],
-        timestamp: a.timestamp
+      const n = window.localStorage.getItem(this.storageKey);
+      return n ? JSON.parse(n).map((o) => ({
+        commandSegments: o.commandSegments || [],
+        timestamp: o.timestamp
       })) : [];
-    } catch (t) {
-      return console.warn("Failed to load commands from localStorage:", t), [];
+    } catch (n) {
+      return console.warn("Failed to load commands from localStorage:", n), [];
     }
   }
   async clear() {
     try {
       window.localStorage.removeItem(this.storageKey);
-    } catch (t) {
-      console.warn("Failed to clear localStorage:", t);
+    } catch (n) {
+      console.warn("Failed to clear localStorage:", n);
     }
   }
-  async saveCommands(t) {
+  async saveCommands(n) {
     try {
-      const r = t.map((a) => ({
-        commandSegments: Array.isArray(a.commandSegments) ? [...a.commandSegments] : [],
-        timestamp: a.timestamp
+      const t = n.map((o) => ({
+        commandSegments: Array.isArray(o.commandSegments) ? [...o.commandSegments] : [],
+        timestamp: o.timestamp
       }));
-      window.localStorage.setItem(this.storageKey, JSON.stringify(r));
-    } catch (r) {
-      throw console.warn("Failed to save commands to localStorage:", r), r;
+      window.localStorage.setItem(this.storageKey, JSON.stringify(t));
+    } catch (t) {
+      throw console.warn("Failed to save commands to localStorage:", t), t;
     }
   }
 }
-class gt extends gn {
-  constructor(t) {
-    super(t);
-    A(this, "storedCommands", []);
+class Ee extends ie {
+  constructor(n) {
+    super(n);
+    b(this, "storedCommands", []);
   }
   async getStoredCommands() {
-    return this.storedCommands.map((t) => ({
-      commandSegments: Array.isArray(t.commandSegments) ? [...t.commandSegments] : [],
-      timestamp: t.timestamp
+    return this.storedCommands.map((n) => ({
+      commandSegments: Array.isArray(n.commandSegments) ? [...n.commandSegments] : [],
+      timestamp: n.timestamp
     }));
   }
   async clear() {
     this.storedCommands = [];
   }
-  async saveCommands(t) {
-    this.storedCommands = t.map((r) => ({
-      commandSegments: Array.isArray(r.commandSegments) ? [...r.commandSegments] : [],
-      timestamp: r.timestamp
+  async saveCommands(n) {
+    this.storedCommands = n.map((t) => ({
+      commandSegments: Array.isArray(t.commandSegments) ? [...t.commandSegments] : [],
+      timestamp: t.timestamp
     }));
   }
 }
-const q = class q {
+const D = class D {
   constructor() {
-    A(this, "currentStorage");
+    b(this, "currentStorage");
   }
   static getInstance() {
-    return q.instance || (q.instance = new q()), q.instance;
+    return D.instance || (D.instance = new D()), D.instance;
   }
-  initializeStorage(n) {
+  initializeStorage(e) {
     if (!this.currentStorage)
       try {
-        this.currentStorage = new ht(n);
-      } catch (t) {
-        console.warn("Failed to create storage, falling back to memory storage:", t), this.currentStorage = new gt(n);
+        this.currentStorage = new ke(e);
+      } catch (n) {
+        console.warn("Failed to create storage, falling back to memory storage:", n), this.currentStorage = new Ee(e);
       }
   }
   getStorage() {
@@ -886,39 +212,39 @@ const q = class q {
     return this.currentStorage;
   }
 };
-A(q, "instance");
-let ye = q;
-const bn = async () => new hn("");
-class Ne {
-  constructor(n, t, r) {
-    this.type = n, this.name = t, this.description = r;
+b(D, "instance");
+let q = D;
+const le = async () => new ae("");
+class J {
+  constructor(e, n, t) {
+    this.type = e, this.name = n, this.description = t;
   }
   toString() {
     return this.name;
   }
 }
-class wn extends Ne {
+class ce extends J {
   constructor() {
     super("null", ">null<", "Empty segment");
   }
 }
-class bt extends Ne {
-  constructor(n, t) {
-    super("word", n, t);
+class Ne extends J {
+  constructor(e, n) {
+    super("word", e, n);
   }
 }
-class wt extends Ne {
-  constructor(n, t, r, a) {
-    super("argument", n, t), this.value = r, this.valid = a;
+class _e extends J {
+  constructor(e, n, t, o) {
+    super("argument", e, n), this.value = t, this.valid = o;
   }
 }
-class yt {
-  constructor(n, t, r = bn) {
-    A(this, "_segments");
-    A(this, "_description");
+class Ae {
+  constructor(e, n, t = le) {
+    b(this, "_segments");
+    b(this, "_description");
     // Used by `Help` command, etc.
-    A(this, "_handler");
-    this._segments = n, this._description = t, this._handler = r;
+    b(this, "_handler");
+    this._segments = e, this._description = n, this._handler = t;
   }
   get segments() {
     return this._segments;
@@ -930,46 +256,50 @@ class yt {
     return this._handler;
   }
   get hasArguments() {
-    return this.segments.some((n) => n.type === "argument");
+    return this.segments.some((e) => e.type === "argument");
   }
   get fullPath() {
-    return this.segments.map((n) => n.name);
+    return this.segments.map((e) => e.name);
   }
   get fullPath_s() {
     return this.fullPath.join(" ");
   }
-  equals(n) {
-    return this.fullPath.join(" ") === n.fullPath.join(" ");
+  equals(e) {
+    return this.fullPath.join(" ") === e.fullPath.join(" ");
   }
 }
-class Ie {
+class Q {
   constructor() {
-    A(this, "_commands", []);
+    b(this, "_commands", []);
   }
   get commands() {
     return this._commands;
   }
   /**
-   * Registers a new command
-   * 
-   * @param newCommandNode The new command to add
-   * @throws {Error} If attempting to add a duplicate leaf command or a subcommand to a leaf
-   * 
+   * Registers a new command composed of ordered segments.
+   *
+   * Each segment describes either a literal word or an argument placeholder. The resulting
+   * path must be unique across the registry once argument placeholders are normalized.
+   *
+   * @param segments Ordered command path definition.
+   * @param description Human-readable summary surfaced by help and search results.
+   * @param handler Async handler executed when the command is submitted; defaults to `NoopHandler`.
+   * @throws {Error} If the segment list is empty or the path collides with an existing command.
    */
-  addCommand(n, t, r = bn) {
-    if (n === void 0 || n.length === 0)
+  addCommand(e, n, t = le) {
+    if (e === void 0 || e.length === 0)
       throw new Error("Command path cannot be empty");
-    const a = new yt(n, t, r), i = this._commands.find((u) => {
-      const f = u.segments.map(
-        (m) => m.type === "argument" ? "*" : m.name
-      ).join(" "), c = n.map(
-        (m) => m.type === "argument" ? "*" : m.name
+    const o = new Ae(e, n, t), s = this._commands.find((a) => {
+      const l = a.segments.map(
+        (c) => c.type === "argument" ? "*" : c.name
+      ).join(" "), d = e.map(
+        (c) => c.type === "argument" ? "*" : c.name
       ).join(" ");
-      return f === c;
+      return l === d;
     });
-    if (i)
-      throw new Error(`Duplicate commands: '${i.fullPath_s}' and '${a.fullPath_s}'`);
-    this._commands.push(a);
+    if (s)
+      throw new Error(`Duplicate commands: '${s.fullPath_s}' and '${o.fullPath_s}'`);
+    this._commands.push(o);
   }
   /**
    * Retrieves a command from the registry for the given path.
@@ -977,24 +307,27 @@ class Ie {
    * @param path The path of the command.
    * @returns The command node or undefined if not found.
    */
-  getCommand(n) {
-    return this._commands.find((t) => {
-      const r = t.fullPath.join(" "), a = n.join(" ");
-      return r === a;
+  getCommand(e) {
+    return this._commands.find((n) => {
+      const t = n.fullPath.join(" "), o = e.join(" ");
+      if (t === o)
+        return !0;
+      const a = n.segments.filter((l) => l.type === "word").map((l) => l.name);
+      return a.length === e.length && a.join(" ") === o;
     });
   }
-  commandExistsForPath(n) {
-    const t = this._commands.map(
-      (a) => a.segments.map(
-        (i) => i.type === "argument" ? "*" : i.name
+  commandExistsForPath(e) {
+    const n = this._commands.map(
+      (o) => o.segments.map(
+        (s) => s.type === "argument" ? "*" : s.name
       ).join(" ")
-    ), r = n.map((a, i) => this._commands.some(
-      (f) => {
-        var c;
-        return ((c = f.segments[i]) == null ? void 0 : c.type) === "argument";
+    ), t = e.map((o, s) => this._commands.some(
+      (l) => {
+        var d;
+        return ((d = l.segments[s]) == null ? void 0 : d.type) === "argument";
       }
-    ) ? "*" : a).join(" ");
-    return t.includes(r);
+    ) ? "*" : o).join(" ");
+    return n.includes(t);
   }
   /**
    * Gets possible matches for a given path.
@@ -1003,8 +336,8 @@ class Ie {
    * @returns An array of completion strings.
    */
   // used by AvailableCommands
-  getCompletions_s(n) {
-    return this.getCompletions(n).map((t) => t.name);
+  getCompletions_s(e) {
+    return this.getCompletions(e).map((n) => n.name);
   }
   /**
    * Gets an array of segments reachable from a given path
@@ -1012,51 +345,51 @@ class Ie {
    * @param path The path to get completions for.
    * @returns An array of completion strings.
    */
-  getCompletions(n) {
-    if (D.debug("[getCompletions] path: ", n), !n.length) {
-      const i = this._commands.map((c) => c.segments[0]), u = (c, m) => c.type === m.type && c.name === m.name;
-      return i.filter(
-        (c, m, h) => m === h.findIndex((b) => u(b, c))
+  getCompletions(e) {
+    if (C.debug("[getCompletions] path: ", e), !e.length) {
+      const s = this._commands.map((d) => d.segments[0]), a = (d, c) => d.type === c.type && d.name === c.name;
+      return s.filter(
+        (d, c, u) => c === u.findIndex((p) => a(p, d))
       );
     }
-    const t = n.length;
-    return this._commands.filter((i) => {
-      const u = i.segments;
-      if (u.length <= t - 1)
+    const n = e.length;
+    return this._commands.filter((s) => {
+      const a = s.segments;
+      if (a.length <= n - 1)
         return !1;
-      for (let f = 0; f < t; f++) {
-        const c = n[f], m = u[f];
-        if (!(c === "*" && m.type === "argument") && c !== m.name)
+      for (let l = 0; l < n; l++) {
+        const d = e[l], c = a[l];
+        if (!(d === "*" && c.type === "argument") && d !== c.name)
           return !1;
       }
       return !0;
-    }).filter((i) => i.segments.length > t).map((i) => {
-      const u = i.segments[t], f = u.type === "argument" ? wt : bt;
-      return new f(u.name, u.description);
+    }).filter((s) => s.segments.length > n).map((s) => {
+      const a = s.segments[n], l = a.type === "argument" ? _e : Ne;
+      return new l(a.name, a.description);
     }).filter(
-      (i, u, f) => u === f.findIndex(
-        (c) => c.type === i.type && c.name === i.name
+      (s, a, l) => a === l.findIndex(
+        (d) => d.type === s.type && d.name === s.name
       )
     );
   }
-  hasNextSegment(n) {
-    return this.getCompletions(n).length > 0;
+  hasNextSegment(e) {
+    return this.getCompletions(e).length > 0;
   }
 }
-class yn {
+class de {
   constructor() {
-    A(this, "segments", []);
-    A(this, "nullSegment", new wn());
-    A(this, "observers", []);
+    b(this, "segments", []);
+    b(this, "nullSegment", new ce());
+    b(this, "observers", []);
   }
-  subscribe(n) {
-    this.observers.push(n);
+  subscribe(e) {
+    this.observers.push(e);
   }
-  unsubscribe(n) {
-    this.observers = this.observers.filter((t) => t !== n);
+  unsubscribe(e) {
+    this.observers = this.observers.filter((n) => n !== e);
   }
   notifyObservers() {
-    this.observers.forEach((n) => n.update());
+    this.observers.forEach((e) => e.update());
   }
   /**
    * Clears all segments from the stack
@@ -1067,22 +400,22 @@ class yn {
   /**
    * Pushes a new segment onto the stack
    */
-  push(n) {
-    this.segments.push(n), this.notifyObservers();
+  push(e) {
+    this.segments.push(e), this.notifyObservers();
   }
   /**
    * Pushes an array of segments onto the stack
    */
-  pushAll(n) {
-    n.forEach((t) => this.push(t));
+  pushAll(e) {
+    e.forEach((n) => this.push(n));
   }
   /**
    * Removes and returns the top segment from the stack
    * Returns NullSegment if stack is empty
    */
   pop() {
-    const n = this.segments.pop() || this.nullSegment;
-    return this.notifyObservers(), n;
+    const e = this.segments.pop() || this.nullSegment;
+    return this.notifyObservers(), e;
   }
   /**
    * Returns the top segment without removing it
@@ -1107,21 +440,21 @@ class yn {
    * Returns true if any segment in the stack is an argument
    */
   get hasArguments() {
-    return this.segments.some((n) => n.type === "argument");
+    return this.segments.some((e) => e.type === "argument");
   }
   /**
    * Returns all argument segments in the stack
    */
   get arguments() {
     return this.segments.filter(
-      (n) => n.type === "argument"
+      (e) => e.type === "argument"
     );
   }
   /**
    * Returns the command path as an array of segment names
    */
   path() {
-    return this.segments.map((n) => n.name);
+    return this.segments.map((e) => e.name);
   }
   /**
    * Returns a copy of the internal segments array
@@ -1130,240 +463,352 @@ class yn {
     return [...this.segments];
   }
 }
-const vt = {
-  config: M,
-  commands: new Ie(),
-  segmentStack: new yn()
-}, le = Zn(vt), xt = ({ config: o = M, commandRegistry: n, children: t }) => {
-  const [r, a] = Q.useState(), i = {
-    ...M,
-    ...o,
+const ze = {
+  config: z,
+  commands: new Q(),
+  segmentStack: new de()
+}, j = be(ze), Ie = ({ config: r = z, commandRegistry: e, children: n }) => {
+  const [t, o] = L.useState(), s = {
+    ...z,
+    ...r,
     // Ensure nested objects are properly merged
     storage: {
-      ...M.storage,
-      ...o.storage
+      ...z.storage,
+      ...r.storage
     },
     // Ensure explicit values from config take precedence
-    cursorType: o.cursorType ?? M.cursorType,
-    cursorColor: o.cursorColor ?? M.cursorColor,
-    cursorSpeed: o.cursorSpeed ?? M.cursorSpeed,
-    showCitadelKey: o.showCitadelKey || "."
+    cursorType: r.cursorType ?? z.cursorType,
+    cursorColor: r.cursorColor ?? z.cursorColor,
+    cursorSpeed: r.cursorSpeed ?? z.cursorSpeed,
+    showCitadelKey: r.showCitadelKey || "."
   };
-  z(() => {
-    ye.getInstance().initializeStorage(
-      i.storage ?? M.storage
-    ), a(ye.getInstance().getStorage());
-  }, []), z(() => {
-    if (n && i.includeHelpCommand && !n.commandExistsForPath(["help"])) {
-      const f = ft(n);
-      n.addCommand(
+  A(() => {
+    q.getInstance().initializeStorage(
+      s.storage ?? z.storage
+    ), o(q.getInstance().getStorage());
+  }, []), A(() => {
+    if (e && s.includeHelpCommand && !e.commandExistsForPath(["help"])) {
+      const l = Se(e);
+      e.addCommand(
         [{ type: "word", name: "help" }],
         "Show available commands",
-        f
+        l
       );
     }
-  }, [n, i.includeHelpCommand]);
-  const u = {
-    config: i,
-    commands: n || new Ie(),
-    storage: r,
-    segmentStack: new yn()
+  }, [e, s.includeHelpCommand]);
+  const a = {
+    config: s,
+    commands: e || new Q(),
+    storage: t,
+    segmentStack: new de()
   };
-  return /* @__PURE__ */ p.jsx(le.Provider, { value: u, children: t });
-}, ce = () => {
-  const o = ve(le);
-  if (o === void 0)
+  return /* @__PURE__ */ m(j.Provider, { value: a, children: n });
+}, F = () => {
+  const r = Y(j);
+  if (r === void 0)
     throw new Error("useCitadelConfig must be used within a CitadelConfigProvider");
-  return o.config;
-}, xe = () => {
-  const o = ve(le);
-  if (o === void 0)
+  return r.config;
+}, B = () => {
+  const r = Y(j);
+  if (r === void 0)
     throw new Error("useCitadelCommands must be used within a CitadelConfigProvider");
-  return o.commands;
-}, vn = () => {
-  const o = ve(le);
-  if (o === void 0)
+  return r.commands;
+}, me = () => {
+  const r = Y(j);
+  if (r === void 0)
     throw new Error("useCitadelStorage must be used within a CitadelConfigProvider");
-  return o.storage;
-}, ue = () => {
-  const o = ve(le);
-  if (o === void 0)
+  return r.storage;
+}, O = () => {
+  const r = Y(j);
+  if (r === void 0)
     throw new Error("useSegmentStack must be used within a CitadelConfigProvider");
-  return o.segmentStack;
+  return r.segmentStack;
 };
-class Ct {
-  constructor(n, t) {
-    A(this, "timestamp");
-    A(this, "command");
-    A(this, "result");
-    this.command = n.toArray().map((r) => r.type === "argument" ? r.value || "" : r.name), this.timestamp = Date.now(), this.result = t ?? new pt();
+class Re {
+  constructor(e, n) {
+    b(this, "timestamp");
+    b(this, "command");
+    b(this, "result");
+    this.command = e.toArray().map((t) => t.type === "argument" ? t.value || "" : t.name), this.timestamp = Date.now(), this.result = n ?? new Ce();
   }
 }
-function St(o) {
+function Pe(r) {
   return {
-    commandSegments: o,
+    commandSegments: r,
     timestamp: Date.now()
   };
 }
-function xn() {
-  const o = vn(), [n, t] = Y({
+function ue() {
+  const r = me(), [e, n] = R({
     storedCommands: [],
     position: null
-  }), r = R(async (f) => {
-    if (o)
+  }), t = w(async (l) => {
+    if (r)
       try {
-        const c = St(f);
-        await o.addStoredCommand(c), t((m) => ({
-          ...m,
-          storedCommands: [...m.storedCommands, c],
+        const d = Pe(l);
+        await r.addStoredCommand(d), n((c) => ({
+          ...c,
+          storedCommands: [...c.storedCommands, d],
           position: null
         }));
-      } catch (c) {
-        console.warn("Failed to save command to history:", c);
+      } catch (d) {
+        console.warn("Failed to save command to history:", d);
       }
-  }, [o]), a = R(async () => o ? await o.getStoredCommands() : [], [o]);
-  z(() => {
-    if (!o) return;
+  }, [r]), o = w(async () => r ? await r.getStoredCommands() : [], [r]);
+  A(() => {
+    if (!r) return;
     (async () => {
       try {
-        const c = await o.getStoredCommands();
-        return t((m) => ({
-          ...m,
-          storedCommands: c
-        })), c;
-      } catch (c) {
-        console.warn("Failed to load command history:", c);
+        const d = await r.getStoredCommands();
+        return n((c) => ({
+          ...c,
+          storedCommands: d
+        })), d;
+      } catch (d) {
+        console.warn("Failed to load command history:", d);
       }
     })();
-  }, [o]);
-  const i = R(async (f) => {
-    if ((await a()).length === 0)
+  }, [r]);
+  const s = w(async (l) => {
+    if ((await o()).length === 0)
       return { segments: null, position: null };
-    let m = null;
-    return f === "up" ? n.position === null ? m = n.storedCommands.length - 1 : n.position > 0 ? m = n.position - 1 : m = 0 : n.position === null || n.position >= n.storedCommands.length - 1 ? m = null : m = n.position + 1, t((b) => ({
-      ...b,
-      position: m
-    })), m === null ? {
+    let c = null;
+    return l === "up" ? e.position === null ? c = e.storedCommands.length - 1 : e.position > 0 ? c = e.position - 1 : c = 0 : e.position === null || e.position >= e.storedCommands.length - 1 ? c = null : c = e.position + 1, n((p) => ({
+      ...p,
+      position: c
+    })), c === null ? {
       segments: [],
       position: null
     } : {
-      segments: m !== null ? n.storedCommands[m].commandSegments : null,
-      position: m
+      segments: c !== null ? e.storedCommands[c].commandSegments : null,
+      position: c
     };
-  }, [n, a]), u = R(async () => {
+  }, [e, o]), a = w(async () => {
     try {
-      if (!o) return;
-      await o.clear(), t({
+      if (!r) return;
+      await r.clear(), n({
         storedCommands: [],
         position: null
       });
-    } catch (f) {
-      console.warn("Failed to clear command history:", f);
+    } catch (l) {
+      console.warn("Failed to clear command history:", l);
     }
-  }, [o]);
+  }, [r]);
   return {
-    history: n,
-    addStoredCommand: r,
-    getStoredCommands: a,
-    navigateHistory: i,
-    clear: u
+    history: e,
+    addStoredCommand: t,
+    getStoredCommands: o,
+    navigateHistory: s,
+    clear: a
   };
 }
-const Cn = () => {
-  const o = ce(), n = xe(), t = xn(), r = ue(), a = vn(), [i, u] = Y({
+const X = () => {
+  const r = F(), e = B(), n = ue(), t = O(), o = me(), [s, a] = R({
     currentInput: "",
     isEnteringArg: !1,
     output: [],
     history: {
       commands: [],
       position: null,
-      storage: a
+      storage: o
     }
   });
-  z(() => {
-  }, [a]), z(() => {
-    u((h) => ({
-      ...h,
+  A(() => {
+  }, [o]), A(() => {
+    a((u) => ({
+      ...u,
       history: {
-        commands: t.history.storedCommands,
-        position: t.history.position,
-        storage: a
+        commands: n.history.storedCommands,
+        position: n.history.position,
+        storage: o
       }
     }));
-  }, [t.history, a]);
-  const f = {
-    setCurrentInput: R((h) => {
-      D.debug("[CitadelActions] setCurrentInput: ", h), u((b) => ({ ...b, currentInput: h }));
+  }, [n.history, o]);
+  const l = {
+    setCurrentInput: w((u) => {
+      C.debug("[CitadelActions] setCurrentInput: ", u), a((p) => ({ ...p, currentInput: u }));
     }, []),
-    setIsEnteringArg: R((h) => {
-      D.debug("[CitadelActions] setIsEnteringArg: ", h), u((b) => ({ ...b, isEnteringArg: h }));
+    setIsEnteringArg: w((u) => {
+      C.debug("[CitadelActions] setIsEnteringArg: ", u), a((p) => ({ ...p, isEnteringArg: u }));
     }, []),
-    addOutput: R((h) => {
-      D.debug("[CitadelActions]addOutput: ", h), u((b) => ({
-        ...b,
-        output: [...b.output, h]
+    addOutput: w((u) => {
+      C.debug("[CitadelActions]addOutput: ", u), a((p) => ({
+        ...p,
+        output: [...p.output, u]
       }));
     }, []),
-    executeCommand: R(async () => {
-      const h = r.path(), b = n.getCommand(h);
-      if (!b) {
-        console.error("[CitadelActions][executeCommand] Cannot execute command because no command was found for the given path: ", h);
+    executeCommand: w(async () => {
+      const u = t.path(), p = e.getCommand(u);
+      if (!p) {
+        console.error("[CitadelActions][executeCommand] Cannot execute command because no command was found for the given path: ", u);
         return;
       }
-      const _ = new Ct(r);
-      u((S) => ({
-        ...S,
-        output: [...S.output, _]
+      const k = new Re(t);
+      a((y) => ({
+        ...y,
+        output: [...y.output, k]
       }));
       try {
-        const S = new Promise((d, y) => {
+        const y = new Promise((i, h) => {
           setTimeout(() => {
-            y(new Error("Request timed out"));
-          }, o.commandTimeoutMs);
-        }), U = r.arguments.map((d) => d.value || ""), I = await Promise.race([
-          b.handler(U),
-          S
+            h(new Error("Request timed out"));
+          }, r.commandTimeoutMs);
+        }), E = t.arguments.map((i) => i.value || ""), N = await Promise.race([
+          p.handler(E),
+          y
         ]);
-        if (!(I instanceof Z))
+        if (!(N instanceof U))
           throw new Error(
-            `The ${h.join(".")} command returned an invalid result type. Commands must return an instance of a CommandResult.
+            `The ${u.join(".")} command returned an invalid result type. Commands must return an instance of a CommandResult.
 For example:
    return new JsonCommandResult({ text: "Hello World" });
-Check the definition of the ${h.join(".")} command and update the return type for its handler.`
+Check the definition of the ${u.join(".")} command and update the return type for its handler.`
           );
-        I.markSuccess(), u((d) => ({
-          ...d,
-          output: d.output.map(
-            (y) => y.timestamp === _.timestamp ? { ...y, result: I } : y
+        N.markSuccess(), a((i) => ({
+          ...i,
+          output: i.output.map(
+            (h) => h.timestamp === k.timestamp ? { ...h, result: N } : h
           )
         }));
-      } catch (S) {
-        const U = new mt(
-          S instanceof Error ? S.message : "Unknown error"
+      } catch (y) {
+        const E = new ve(
+          y instanceof Error ? y.message : "Unknown error"
         );
-        U.markFailure(), u((I) => ({
-          ...I,
-          output: I.output.map(
-            (d) => d.timestamp === _.timestamp ? { ...d, result: U } : d
+        E.markFailure(), a((N) => ({
+          ...N,
+          output: N.output.map(
+            (i) => i.timestamp === k.timestamp ? { ...i, result: E } : i
           )
         }));
       }
-    }, [n, o.commandTimeoutMs, r]),
-    clearHistory: R(async () => {
+    }, [e, r.commandTimeoutMs, t]),
+    clearHistory: w(async () => {
       try {
-        await t.clear();
-      } catch (h) {
-        console.warn("Failed to clear history:", h);
+        await n.clear();
+      } catch (u) {
+        console.warn("Failed to clear history:", u);
       }
-    }, [t])
-  }, c = R(() => n.getCompletions_s(r.path()), [r, n]), m = R(() => n.getCompletions(r.path()), [r, n]);
+    }, [n])
+  }, d = w(() => e.getCompletions_s(t.path()), [t, e]), c = w(() => e.getCompletions(t.path()), [t, e]);
   return {
-    state: i,
-    actions: f,
-    getAvailableCommands_s: c,
-    getAvailableCommandSegments: m
+    state: s,
+    actions: l,
+    getAvailableCommands_s: d,
+    getAvailableCommandSegments: c
+  };
+}, He = ({ onOpen: r, onClose: e, isVisible: n, showCitadelKey: t }) => {
+  A(() => {
+    const o = (s) => {
+      var a, l;
+      !n && s.key === t && !["input", "textarea"].includes(((l = (a = s.target) == null ? void 0 : a.tagName) == null ? void 0 : l.toLowerCase()) || "") && (s.preventDefault(), r()), n && s.key === "Escape" && (s.preventDefault(), e());
+    };
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+  }, [r, e, n, t]);
+}, De = "_panelContainer_1pav9_3", Me = "_innerContainer_1pav9_19", Ue = "_inputSection_1pav9_29", Fe = "_resizeHandle_1pav9_36", Te = "_citadel_slideUp_1pav9_65", je = "_citadel_slideDown_1pav9_69", Oe = "_inlineContainer_1pav9_73", Z = {
+  panelContainer: De,
+  innerContainer: Me,
+  inputSection: Ue,
+  resizeHandle: Fe,
+  citadel_slideUp: Te,
+  citadel_slideDown: je,
+  inlineContainer: Oe
+}, $e = (r) => {
+  const { isVisible: e, isClosing: n, onAnimationComplete: t } = r, o = V(() => e ? n ? Z.slideDown : Z.slideUp : "", [e, n]);
+  return A(() => {
+    if (t) {
+      const a = setTimeout(() => {
+        t();
+      }, 200);
+      return () => clearTimeout(a);
+    }
+  }, [n, t]), {
+    style: V(() => ({
+      opacity: e ? 1 : 0,
+      transform: e ? "translateY(0)" : n ? "translateY(100%)" : "translateY(-100%)",
+      transition: "opacity 200ms ease-in-out, transform 200ms ease-in-out"
+    }), [e, n]),
+    animationClass: o
   };
-}, Et = {
+}, Ke = () => /* @__PURE__ */ m(
+  "div",
+  {
+    "data-testid": "spinner",
+    className: "animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-gray-600"
+  }
+), Le = ({
+  command: r,
+  timestamp: e,
+  status: n
+}) => /* @__PURE__ */ _("div", { className: "flex items-center gap-2 font-mono text-sm", children: [
+  /* @__PURE__ */ _("span", { className: "text-gray-200", children: [
+    "> ",
+    r.split(" ").map((t, o) => {
+      const s = t.startsWith("<") && t.endsWith(">");
+      return /* @__PURE__ */ _(
+        "span",
+        {
+          className: s ? "text-green-400" : "text-gray-200",
+          children: [
+            o > 0 ? " " : "",
+            t
+          ]
+        },
+        o
+      );
+    })
+  ] }),
+  /* @__PURE__ */ m("span", { className: "text-gray-400", children: "·" }),
+  /* @__PURE__ */ m("span", { className: "text-gray-500", children: e }),
+  n === T.Pending && /* @__PURE__ */ m(Ke, {}),
+  n === T.Success && /* @__PURE__ */ m(
+    "div",
+    {
+      "data-testid": "success-indicator",
+      className: "w-4 h-4 rounded-full bg-green-500"
+    }
+  ),
+  (n === T.Timeout || n === T.Failure) && /* @__PURE__ */ m(
+    "div",
+    {
+      "data-testid": "success-indicator",
+      className: "w-4 h-4 rounded-full bg-red-500"
+    }
+  )
+] }), Ve = ({ output: r, outputRef: e }) => {
+  const n = F(), t = w(() => {
+    if (e.current) {
+      const o = e.current;
+      requestAnimationFrame(() => {
+        o.scrollTop = o.scrollHeight;
+      });
+    }
+  }, [e]);
+  return A(() => {
+    if (t(), e.current) {
+      const o = e.current.getElementsByTagName("img"), s = o[o.length - 1];
+      if (s && !s.complete)
+        return s.addEventListener("load", t), () => s.removeEventListener("load", t);
+    }
+  }, [r, t, e]), /* @__PURE__ */ m(
+    "div",
+    {
+      ref: e,
+      className: "h-full overflow-y-auto border border-gray-700 rounded-lg p-3 text-left",
+      "data-testid": "citadel-command-output",
+      children: r.map((o, s) => /* @__PURE__ */ _("div", { className: "mb-4 last:mb-0", children: [
+        /* @__PURE__ */ m(
+          Le,
+          {
+            command: o.command.join(" "),
+            timestamp: new Date(o.timestamp).toLocaleTimeString(),
+            status: o.result.status
+          }
+        ),
+        /* @__PURE__ */ m("pre", { className: `text-gray-200 whitespace-pre font-mono ${n.outputFontSize}`, children: o.result.render() })
+      ] }, s))
+    }
+  );
+}, We = {
   blink: {
     character: "▋",
     speed: 530,
@@ -1384,301 +829,299 @@ Check the definition of the ${h.join(".")} command and update the return type fo
     speed: 120,
     color: "#fff"
   }
-}, cn = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"], un = ["|", "/", "-", "\\"], kt = ({
-  style: o = { type: "blink" },
-  isValid: n = !0,
-  errorMessage: t
+}, ee = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"], ne = ["|", "/", "-", "\\"], qe = ({
+  style: r = { type: "blink" },
+  isValid: e = !0,
+  errorMessage: n
 }) => {
-  const r = be(() => ({
-    ...Et[o.type],
-    ...o
-  }), [o]), [a, i] = Y(!0), [u, f] = Y(0);
-  z(() => {
-    if (r.speed === 0) return;
-    const h = setInterval(() => {
-      r.type === "blink" ? i((b) => !b) : ["spin", "bbs"].includes(r.type) && f((b) => (b + 1) % (r.type === "bbs" ? un.length : cn.length));
-    }, r.speed);
-    return () => clearInterval(h);
-  }, [r.type, r.speed]);
-  const c = be(() => ({
-    color: n ? r.color : "#ff4444",
+  const t = V(() => ({
+    ...We[r.type],
+    ...r
+  }), [r]), [o, s] = R(!0), [a, l] = R(0);
+  A(() => {
+    if (t.speed === 0) return;
+    const u = setInterval(() => {
+      t.type === "blink" ? s((p) => !p) : ["spin", "bbs"].includes(t.type) && l((p) => (p + 1) % (t.type === "bbs" ? ne.length : ee.length));
+    }, t.speed);
+    return () => clearInterval(u);
+  }, [t.type, t.speed]);
+  const d = V(() => ({
+    color: e ? t.color : "#ff4444",
     transition: "color 0.15s ease-in-out"
-  }), [n, r.color]), m = () => !n && t ? "✗" : ["spin", "bbs"].includes(r.type) ? (r.type === "bbs" ? un : cn)[u] : r.type === "solid" || a ? r.character : " ";
-  return /* @__PURE__ */ p.jsx("div", { className: "relative inline-block", children: /* @__PURE__ */ p.jsx(
+  }), [e, t.color]);
+  return /* @__PURE__ */ m("div", { className: "relative inline-block", children: /* @__PURE__ */ m(
     "span",
     {
-      className: `command-cursor ${n ? "" : "animate-shake"}`,
-      style: c,
-      title: t,
-      children: m()
+      className: `command-cursor ${e ? "" : "animate-shake"}`,
+      style: d,
+      title: n,
+      children: !e && n ? "✗" : ["spin", "bbs"].includes(t.type) ? (t.type === "bbs" ? ne : ee)[a] : t.type === "solid" || o ? t.character : " "
     }
   ) });
 };
-function _t(o, n) {
-  switch (n.type) {
+function Ye(r, e) {
+  switch (e.type) {
     case "set":
-      return D.debug(`[inputStateReducer] InputState changing from ${o} to ${n.state}`), n.state;
+      return C.debug(`[inputStateReducer] InputState changing from ${r} to ${e.state}`), e.state;
     default:
-      return o;
-  }
-}
-const Rt = () => {
-  const { state: o } = Cn(), n = xe(), t = xn(), r = ue(), [a, i] = et(_t, "idle"), u = (d) => {
-    i({ type: "set", state: d });
-  }, f = R(() => {
-    const y = n.getCompletions(r.path())[0] || r.nullSegment;
-    return D.debug("[getNextExpectedSegment] ", y), y;
-  }, [n, r]), c = R(() => n.getCompletions_s(r.path()).map((y) => n.getCommand([...r.path(), y])).filter((y) => y !== void 0), [n, r]), m = R((d, y) => {
-    if (!d) return y;
-    const w = y.reduce((k, j) => {
-      const P = f();
-      return (P == null ? void 0 : P.type) === "word" && k.set(P.name, j), k;
+      return r;
+  }
+}
+const Be = () => {
+  const { state: r } = X(), e = B(), n = ue(), t = O(), [o, s] = ye(Ye, "idle"), a = (i) => {
+    s({ type: "set", state: i });
+  }, l = w(() => {
+    const h = e.getCompletions(t.path())[0] || t.nullSegment;
+    return C.debug("[getNextExpectedSegment] ", h), h;
+  }, [e, t]), d = w(() => e.getCompletions_s(t.path()).map((h) => e.getCommand([...t.path(), h])).filter((h) => h !== void 0), [e, t]), c = w((i, h) => {
+    if (!i) return h;
+    const g = h.reduce((f, x) => {
+      const v = l();
+      return (v == null ? void 0 : v.type) === "word" && f.set(v.name, x), f;
     }, /* @__PURE__ */ new Map());
-    return Array.from(w.values()).filter(() => {
-      const k = f();
-      return k.type !== "word" ? !1 : k.name.toLowerCase().startsWith(d.toLowerCase());
+    return Array.from(g.values()).filter(() => {
+      const f = l();
+      return f.type !== "word" ? !1 : f.name.toLowerCase().startsWith(i.toLowerCase());
     });
-  }, [f]), h = R((d) => {
-    const w = n.getCompletions(r.path()).filter((N) => N.type === "word").filter(
-      (N) => N.name.toLowerCase().startsWith(d.toLowerCase())
+  }, [l]), u = w((i) => {
+    const g = e.getCompletions(t.path()).filter((S) => S.type === "word").filter(
+      (S) => S.name.toLowerCase().startsWith(i.toLowerCase())
     );
-    return w.length === 1 ? w[0] : r.nullSegment;
-  }, [n, r]), b = R((d) => {
-    const y = r.path(), w = n.getCompletions(y);
-    return w.length === 0 && d ? !1 : w.some((k) => k.type === "argument") ? !0 : w.some(
-      (k) => k.type === "word" && k.name.toLowerCase().startsWith(d.toLowerCase())
+    return g.length === 1 ? g[0] : t.nullSegment;
+  }, [e, t]), p = w((i) => {
+    const h = t.path(), g = e.getCompletions(h);
+    return g.length === 0 && i ? !1 : g.some((f) => f.type === "argument") ? !0 : g.some(
+      (f) => f.type === "word" && f.name.toLowerCase().startsWith(i.toLowerCase())
     );
-  }, [n, r]), _ = R((d) => {
-    D.debug("[tryAutoComplete] input: ", d);
-    const y = h(d);
-    return !y || y.name === d ? new wn() : (D.debug("[tryAutoComplete] result: ", y), y);
-  }, [h]), S = R((d, y) => {
-    if (o.history.position === null) {
-      if (y.setCurrentInput(d), D.debug("[useCommandParser][handleInputChange] newValue: ", d), a === "entering_argument") {
-        const w = dn(d);
-        if (w.isQuoted)
-          if (w.isComplete) {
-            const N = f();
-            if (N.type === "argument") {
-              const k = N;
-              k.value = d.trim() || "", D.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", k), r.push(k), y.setCurrentInput(""), u("idle");
+  }, [e, t]), k = w((i) => {
+    C.debug("[tryAutoComplete] input: ", i);
+    const h = u(i);
+    return !h || h.name === i ? new ce() : (C.debug("[tryAutoComplete] result: ", h), h);
+  }, [u]), y = w((i, h) => {
+    if (r.history.position === null) {
+      if (h.setCurrentInput(i), C.debug("[useCommandParser][handleInputChange] newValue: ", i), o === "entering_argument") {
+        const g = te(i);
+        if (g.isQuoted)
+          if (g.isComplete) {
+            const S = l();
+            if (S.type === "argument") {
+              const f = S;
+              f.value = i.trim() || "", C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", f), t.push(f), h.setCurrentInput(""), a("idle");
               return;
             }
           } else
             return;
-        else if (w.isComplete) {
-          const N = f();
-          N.value = d.trim() || "", D.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", N), r.push(N), y.setCurrentInput(""), u("idle");
+        else if (g.isComplete) {
+          const S = l();
+          S.value = i.trim() || "", C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", S), t.push(S), h.setCurrentInput(""), a("idle");
           return;
         } else
           return;
       }
-      if (a == "entering_command") {
-        const w = _(d);
-        if (w.type === "word") {
-          D.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", w), r.push(w), y.setCurrentInput(""), u("idle");
+      if (o == "entering_command") {
+        const g = k(i);
+        if (g.type === "word") {
+          C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", g), t.push(g), h.setCurrentInput(""), a("idle");
           return;
         }
       }
     }
-  }, [_, o, f, a, r]), U = R((d) => {
-    d.setCurrentInput(""), d.setIsEnteringArg(!1), r.clear(), u("idle");
-  }, [r]), I = R((d, y, w) => {
-    if (!(d.key === "Backspace" || d.key === "Enter" || d.key === "ArrowUp" || d.key === "ArrowDown" || d.key === "ArrowLeft" || d.key === "ArrowRight" || d.key === "Escape" || d.key === "Delete" || d.key === "Home" || d.key === "End" || d.key.length === 1))
+  }, [k, r, l, o, t]), E = w((i) => {
+    i.setCurrentInput(""), i.setIsEnteringArg(!1), t.clear(), a("idle");
+  }, [t]), N = w((i, h, g) => {
+    if (!(i.key === "Backspace" || i.key === "Enter" || i.key === "ArrowUp" || i.key === "ArrowDown" || i.key === "ArrowLeft" || i.key === "ArrowRight" || i.key === "Escape" || i.key === "Delete" || i.key === "Home" || i.key === "End" || i.key.length === 1))
       return !0;
-    const { currentInput: k, isEnteringArg: j } = y, P = dn(k);
-    switch (d.key) {
+    const { currentInput: f, isEnteringArg: x } = h, v = te(f);
+    switch (i.key) {
       case "Backspace":
-        return k === "" && (d.preventDefault(), r.size() > 0 && r.pop(), u("idle")), !0;
+        return f === "" && (i.preventDefault(), t.size() > 0 && t.pop(), a("idle")), !0;
       case "Enter": {
-        if (d.preventDefault(), P.isQuoted && !P.isComplete)
+        if (i.preventDefault(), v.isQuoted && !v.isComplete)
           return !0;
-        if (a === "entering_argument") {
-          const L = f();
-          L.value = k, D.debug("[handleKeyDown][Enter]['entering_argument'] pushing: ", L), r.push(L);
+        if (o === "entering_argument" || x && f.trim()) {
+          const G = l();
+          G.value = f, C.debug("[handleKeyDown][Enter]['entering_argument'] pushing: ", G), t.push(G);
         }
-        return D.debug("[handleKeyDown][Enter] calling actions.executeCommand. segmentStack: ", r), w.executeCommand(), t.addStoredCommand(r.toArray()), U(w), !0;
+        const I = t.path(), P = e.getCommand(I);
+        if (!P)
+          return !1;
+        const $ = P.segments.filter((M) => M.type === "argument"), K = t.arguments;
+        return $.length > K.length ? !1 : (C.debug("[handleKeyDown][Enter] calling actions.executeCommand. segmentStack: ", t), g.executeCommand(), n.addStoredCommand(t.toArray()), E(g), !0);
       }
       case "ArrowUp":
-        return d.preventDefault(), (async () => {
-          const $ = await t.navigateHistory("up", r.toArray());
-          return $.segments && (r.clear(), r.pushAll($.segments), w.setCurrentInput("")), !0;
+        return i.preventDefault(), (async () => {
+          const I = await n.navigateHistory("up", t.toArray());
+          return I.segments && (t.clear(), t.pushAll(I.segments), g.setCurrentInput("")), !0;
         })();
       case "ArrowDown":
-        return d.preventDefault(), (async () => {
-          const $ = await t.navigateHistory("down", r.toArray());
-          return $.segments && (r.clear(), r.pushAll($.segments), w.setCurrentInput("")), !0;
+        return i.preventDefault(), (async () => {
+          const I = await n.navigateHistory("down", t.toArray());
+          return I.segments && (t.clear(), t.pushAll(I.segments), g.setCurrentInput("")), !0;
         })();
       default: {
-        if (!j && d.key.length === 1) {
-          const $ = k + d.key;
-          if (!b($))
-            return d.preventDefault(), !1;
+        if (!x && i.key.length === 1) {
+          const I = f + i.key;
+          if (!p(I))
+            return i.preventDefault(), !1;
         }
         return !0;
       }
     }
   }, [
-    a,
-    b,
-    f,
-    t,
-    U,
-    r
+    o,
+    p,
+    l,
+    n,
+    E,
+    e,
+    t
   ]);
   return {
-    handleInputChange: S,
-    handleKeyDown: I,
-    inputState: a,
-    setInputStateWithLogging: u,
+    handleInputChange: y,
+    handleKeyDown: N,
+    inputState: o,
+    setInputStateWithLogging: a,
     // Expose internal functions for testing
-    findMatchingCommands: m,
-    getAutocompleteSuggestion: h,
-    getAvailableNodes: c,
-    getNextExpectedSegment: f,
-    isValidCommandInput: b
+    findMatchingCommands: c,
+    getAutocompleteSuggestion: u,
+    getAvailableNodes: d,
+    getNextExpectedSegment: l,
+    isValidCommandInput: p
   };
 };
-function dn(o) {
-  const n = [];
-  let t = "", r = !1, a;
-  for (let i = 0; i < o.length; i++) {
-    const u = o[i];
-    (u === '"' || u === "'") && (!r || u === a) ? r ? (n.push(t), t = "", r = !1, a = void 0) : (t && (n.push(t), t = ""), r = !0, a = u) : !r && u === " " ? t && (n.push(t), t = "") : t += u;
+function te(r) {
+  const e = [];
+  let n = "", t = !1, o;
+  for (let s = 0; s < r.length; s++) {
+    const a = r[s];
+    (a === '"' || a === "'") && (!t || a === o) ? t ? (e.push(n), n = "", t = !1, o = void 0) : (n && (e.push(n), n = ""), t = !0, o = a) : !t && a === " " ? n && (e.push(n), n = "") : n += a;
   }
   return {
-    words: n,
-    currentWord: t,
-    isQuoted: r,
-    quoteChar: a,
-    isComplete: !r && !t
+    words: e,
+    currentWord: n,
+    isQuoted: t,
+    quoteChar: o,
+    isComplete: !t && !n
   };
 }
-const jt = () => {
-  const o = ue(), [n, t] = Y(0);
-  return z(() => {
-    const r = {
+const Ge = () => {
+  const r = O(), [e, n] = R(0);
+  return A(() => {
+    const t = {
       update: () => {
-        t((a) => a + 1);
+        n((o) => o + 1);
       }
     };
-    return o.subscribe(r), () => {
-      o.unsubscribe(r);
+    return r.subscribe(t), () => {
+      r.unsubscribe(t);
     };
-  }, [o]), n;
-}, At = ({
-  state: o,
-  actions: n
+  }, [r]), e;
+}, Je = ({
+  state: r,
+  actions: e
 }) => {
-  const t = X(null), r = xe(), a = ue(), {
-    handleKeyDown: i,
-    handleInputChange: u,
-    inputState: f,
-    setInputStateWithLogging: c,
-    getNextExpectedSegment: m
-  } = Rt(), [h, b] = Y(!1), _ = ce(), S = jt(), U = async (j) => {
-    const P = i(j, o, n);
-    await Promise.resolve(P) === !1 && (b(!0), setTimeout(() => b(!1), 500));
-  }, I = (j) => {
-    u(j.target.value, n);
-  }, d = (j) => {
-    j.preventDefault();
-    const P = j.clipboardData.getData("text");
-    u(P, n);
+  const n = H(null), t = B(), o = O(), {
+    handleKeyDown: s,
+    handleInputChange: a,
+    inputState: l,
+    setInputStateWithLogging: d,
+    getNextExpectedSegment: c
+  } = Be(), [u, p] = R(!1), k = F(), y = Ge(), E = async (x) => {
+    const v = s(x, r, e);
+    await Promise.resolve(v) === !1 && (p(!0), setTimeout(() => p(!1), 500));
+  }, N = (x) => {
+    a(x.target.value, e);
+  }, i = (x) => {
+    x.preventDefault();
+    const v = x.clipboardData.getData("text");
+    a(v, e);
   };
-  z(() => {
-    t.current && t.current.focus(), f !== "entering_command" && c("entering_command");
-  }, [f, c]), z(() => {
-    if (f !== "idle") return;
-    const j = m();
-    let P = "idle";
-    switch (j.type) {
+  A(() => {
+    n.current && n.current.focus(), l !== "entering_command" && d("entering_command");
+  }, [l, d]), A(() => {
+    if (l !== "idle") return;
+    const x = c();
+    let v = "idle";
+    switch (x.type) {
       case "word":
-        P = "entering_command", n.setIsEnteringArg(!1);
+        v = "entering_command", e.setIsEnteringArg(!1);
         break;
       case "argument":
-        P = "entering_argument", n.setIsEnteringArg(!0);
+        v = "entering_argument", e.setIsEnteringArg(!0);
         break;
     }
-    c(P);
-  }, [S, f, m, c, n]);
-  const [y, w] = Y([]);
-  z(() => {
-    const j = [], P = a.toArray().map((L, ee) => {
-      j.push(L.name);
-      const de = r.hasNextSegment(j);
-      if (L.type === "argument") {
-        const ne = L;
-        return /* @__PURE__ */ p.jsxs(Q.Fragment, { children: [
-          /* @__PURE__ */ p.jsx("span", { className: "text-gray-200 whitespace-pre", children: ne.value }),
-          ee < a.size() && de && /* @__PURE__ */ p.jsx("span", { className: "text-gray-200 whitespace-pre", children: " " })
-        ] }, "arg-" + ne.name + ne.value);
+    d(v);
+  }, [y, l, c, d, e]);
+  const [h, g] = R([]);
+  A(() => {
+    const x = [], v = o.toArray().map((P, $) => {
+      x.push(P.name);
+      const K = t.hasNextSegment(x);
+      if (P.type === "argument") {
+        const M = P;
+        return /* @__PURE__ */ _(L.Fragment, { children: [
+          /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: M.value }),
+          $ < o.size() && K && /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: " " })
+        ] }, "arg-" + M.name + M.value);
       }
-      return /* @__PURE__ */ p.jsxs(Q.Fragment, { children: [
-        /* @__PURE__ */ p.jsx("span", { className: "text-blue-400 whitespace-pre", children: L.name }),
-        ee < a.size() && de && /* @__PURE__ */ p.jsx("span", { className: "text-blue-400 whitespace-pre", children: " " })
-      ] }, "word-" + L.name);
+      return /* @__PURE__ */ _(L.Fragment, { children: [
+        /* @__PURE__ */ m("span", { className: "text-blue-400 whitespace-pre", children: P.name }),
+        $ < o.size() && K && /* @__PURE__ */ m("span", { className: "text-blue-400 whitespace-pre", children: " " })
+      ] }, "word-" + P.name);
     });
-    w([/* @__PURE__ */ p.jsx("div", { className: "flex items-center gap-1", "data-testid": "user-input-area", children: P }, "{segmentStackVersion}")]);
-  }, [S, r, a]);
-  const [N, k] = Y("");
-  return z(() => {
-    const j = m();
-    j.type === "argument" ? k(j.name) : k("");
-  }, [S, m]), /* @__PURE__ */ p.jsxs("div", { className: "flex flex-col w-full bg-gray-900 rounded-lg p-4", children: [
-    /* @__PURE__ */ p.jsx("style", { children: `
-        @keyframes shake {
-          0%, 100% { transform: translateX(0); }
-          25% { transform: translateX(-4px); }
-          75% { transform: translateX(4px); }
-        }
-        @keyframes flashBorder {
-          0%, 100% { border-color: transparent; }
-          50% { border-color: rgb(239, 68, 68); }
+    g([/* @__PURE__ */ m("div", { className: "flex items-center gap-1", "data-testid": "user-input-area", children: v }, "{segmentStackVersion}")]);
+  }, [y, t, o]);
+  const [S, f] = R("");
+  return A(() => {
+    const x = c();
+    x.type === "argument" ? f(x.name) : f("");
+  }, [y, c]), /* @__PURE__ */ _("div", { className: "flex flex-col w-full bg-gray-900 rounded-lg p-4", children: [
+    /* @__PURE__ */ m("style", { children: `
+        @keyframes subtleGlow {
+          0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
+          50% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
         }
         .invalid-input-animation {
-          animation: shake 0.2s ease-in-out, flashBorder 0.3s ease-in-out;
-          border-width: 1px;
-          border-style: solid;
+          animation: subtleGlow 0.4s ease-in-out;
         }
       ` }),
-    /* @__PURE__ */ p.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ p.jsx("div", { className: "text-gray-400 font-mono", children: ">" }),
-      /* @__PURE__ */ p.jsxs("div", { className: "flex-1 font-mono flex items-center", children: [
-        y,
-        /* @__PURE__ */ p.jsxs("div", { className: "relative flex-1", children: [
-          /* @__PURE__ */ p.jsx(
+    /* @__PURE__ */ _("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ m("div", { className: "text-gray-400 font-mono", children: ">" }),
+      /* @__PURE__ */ _("div", { className: "flex-1 font-mono flex items-center", children: [
+        h,
+        /* @__PURE__ */ _("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ m(
             "input",
             {
-              ref: t,
+              ref: n,
               type: "text",
               role: "textbox",
-              value: o.currentInput,
-              onChange: I,
-              onKeyDown: U,
-              onPaste: d,
+              value: r.currentInput,
+              onChange: N,
+              onKeyDown: E,
+              onPaste: i,
               "data-testid": "citadel-command-input",
-              className: `w-full bg-transparent outline-none text-gray-200 caret-transparent ${h ? "invalid-input-animation" : ""}`,
+              className: `w-full bg-transparent outline-none text-gray-200 caret-transparent ${u ? "invalid-input-animation" : ""}`,
               spellCheck: !1,
               autoComplete: "off",
-              placeholder: N
+              placeholder: S
             }
           ),
-          /* @__PURE__ */ p.jsx(
+          /* @__PURE__ */ m(
             "div",
             {
               className: "absolute top-0 pointer-events-none",
               style: {
-                left: `${o.currentInput.length}ch`,
+                left: `${r.currentInput.length}ch`,
                 transition: "left 0.05s ease-out"
               },
-              children: /* @__PURE__ */ p.jsx(
-                kt,
+              children: /* @__PURE__ */ m(
+                qe,
                 {
                   style: {
-                    type: _.cursorType ?? M.cursorType,
-                    color: _.cursorColor || M.cursorColor,
-                    speed: _.cursorSpeed || M.cursorSpeed
+                    type: k.cursorType ?? z.cursorType,
+                    color: k.cursorColor || z.cursorColor,
+                    speed: k.cursorSpeed || z.cursorSpeed
                   }
                 }
               )
@@ -1688,121 +1131,123 @@ const jt = () => {
       ] })
     ] })
   ] });
-}, Pt = () => /* @__PURE__ */ p.jsx(
-  "div",
-  {
-    "data-testid": "spinner",
-    className: "animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-gray-600"
-  }
-), Tt = ({
-  command: o,
-  timestamp: n,
-  status: t
-}) => /* @__PURE__ */ p.jsxs("div", { className: "flex items-center gap-2 font-mono text-sm", children: [
-  /* @__PURE__ */ p.jsxs("span", { className: "text-gray-200", children: [
-    "> ",
-    o.split(" ").map((r, a) => {
-      const i = r.startsWith("<") && r.endsWith(">");
-      return /* @__PURE__ */ p.jsxs(
-        "span",
-        {
-          className: i ? "text-green-400" : "text-gray-200",
-          children: [
-            a > 0 ? " " : "",
-            r
-          ]
-        },
-        a
-      );
-    })
-  ] }),
-  /* @__PURE__ */ p.jsx("span", { className: "text-gray-400", children: "·" }),
-  /* @__PURE__ */ p.jsx("span", { className: "text-gray-500", children: n }),
-  t === ie.Pending && /* @__PURE__ */ p.jsx(Pt, {}),
-  t === ie.Success && /* @__PURE__ */ p.jsx(
-    "div",
-    {
-      "data-testid": "success-indicator",
-      className: "w-4 h-4 rounded-full bg-green-500"
-    }
-  ),
-  (t === ie.Timeout || t === ie.Failure) && /* @__PURE__ */ p.jsx(
-    "div",
-    {
-      "data-testid": "success-indicator",
-      className: "w-4 h-4 rounded-full bg-red-500"
-    }
-  )
-] }), Ot = ({ output: o, outputRef: n }) => {
-  const t = ce(), r = R(() => {
-    if (n.current) {
-      const a = n.current;
-      requestAnimationFrame(() => {
-        a.scrollTop = a.scrollHeight;
-      });
-    }
-  }, [n]);
-  return z(() => {
-    if (r(), n.current) {
-      const a = n.current.getElementsByTagName("img"), i = a[a.length - 1];
-      if (i && !i.complete)
-        return i.addEventListener("load", r), () => i.removeEventListener("load", r);
-    }
-  }, [o, r, n]), /* @__PURE__ */ p.jsx(
-    "div",
-    {
-      ref: n,
-      className: "h-full overflow-y-auto border border-gray-700 rounded-lg p-3 text-left",
-      children: o.map((a, i) => /* @__PURE__ */ p.jsxs("div", { className: "mb-4 last:mb-0", children: [
-        /* @__PURE__ */ p.jsx(
-          Tt,
-          {
-            command: a.command.join(" "),
-            timestamp: new Date(a.timestamp).toLocaleTimeString(),
-            status: a.result.status
-          }
-        ),
-        /* @__PURE__ */ p.jsx("pre", { className: `text-gray-200 whitespace-pre font-mono ${t.outputFontSize}`, children: a.result.render() })
-      ] }, i))
-    }
-  );
-}, Nt = () => {
-  const o = xe(), n = ce(), t = ue(), r = "h-12 mt-2 border-t border-gray-700 px-4", a = "text-gray-300 pt-2", i = o.getCompletions(t.path());
-  D.debug("[AvailableCommands] nextCommandSegments: ", i);
-  const u = Q.useMemo(() => {
-    if (n.includeHelpCommand) {
-      const m = i.filter((b) => b.name !== "help"), h = i.find((b) => b.name === "help");
-      return [...m, ...h ? [h] : []];
+}, Qe = () => {
+  const r = B(), e = F(), n = O(), t = "h-12 mt-2 border-t border-gray-700 px-4", o = "text-gray-300 pt-2", s = r.getCompletions(n.path());
+  C.debug("[AvailableCommands] nextCommandSegments: ", s);
+  const a = L.useMemo(() => {
+    if (e.includeHelpCommand) {
+      const c = s.filter((p) => p.name !== "help"), u = s.find((p) => p.name === "help");
+      return [...c, ...u ? [u] : []];
     }
-    return i;
-  }, [i, n.includeHelpCommand]), f = i.some((m) => m.type === "argument"), c = i[0];
-  return /* @__PURE__ */ p.jsx("div", { className: r, "data-testid": "available-commands", children: /* @__PURE__ */ p.jsx("div", { className: a, children: f ? i.length > 0 ? /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
-    /* @__PURE__ */ p.jsx("span", { className: "text-blue-400", children: c.name }),
-    c.description && /* @__PURE__ */ p.jsxs("span", { className: "text-gray-400 ml-2", children: [
+    return s;
+  }, [s, e.includeHelpCommand]), l = s.some((c) => c.type === "argument"), d = s[0];
+  return /* @__PURE__ */ m("div", { className: t, "data-testid": "available-commands", children: /* @__PURE__ */ m("div", { className: o, children: l ? s.length > 0 ? /* @__PURE__ */ _(we, { children: [
+    /* @__PURE__ */ m("span", { className: "text-blue-400", children: d.name }),
+    d.description && /* @__PURE__ */ _("span", { className: "text-gray-400 ml-2", children: [
       "- ",
-      c.description
+      d.description
     ] })
-  ] }) : null : /* @__PURE__ */ p.jsx("div", { className: "flex flex-wrap gap-2", children: u == null ? void 0 : u.map((m) => {
-    const h = u == null ? void 0 : u.reduce((b, _) => {
-      if (_ === m) return b;
-      let S = 0;
-      for (; S < m.name.length && S < _.name.length && m.name[S].toLowerCase() === _.name[S].toLowerCase(); )
-        S++;
-      return Math.max(b, S + 1);
+  ] }) : null : /* @__PURE__ */ m("div", { className: "flex flex-wrap gap-2", children: a == null ? void 0 : a.map((c) => {
+    const u = a == null ? void 0 : a.reduce((p, k) => {
+      if (k === c) return p;
+      let y = 0;
+      for (; y < c.name.length && y < k.name.length && c.name[y].toLowerCase() === k.name[y].toLowerCase(); )
+        y++;
+      return Math.max(p, y + 1);
     }, 1);
-    return /* @__PURE__ */ p.jsx(
+    return /* @__PURE__ */ m(
       "div",
       {
         className: "px-2 py-1 rounded bg-gray-800 mr-2 last:mr-0",
-        children: /* @__PURE__ */ p.jsxs("span", { className: "font-mono text-white", children: [
-          /* @__PURE__ */ p.jsx("strong", { className: "underline", children: m.name.slice(0, h) }),
-          m.name.slice(h)
+        children: /* @__PURE__ */ _("span", { className: "font-mono text-white", children: [
+          /* @__PURE__ */ m("strong", { className: "underline", children: c.name.slice(0, u) }),
+          c.name.slice(u)
         ] })
       },
-      m.name
+      c.name
     );
   }) }) }) });
-}, mn = `:host {
+}, pe = ({
+  state: r,
+  actions: e,
+  outputRef: n
+}) => /* @__PURE__ */ _("div", { className: "innerContainer", children: [
+  /* @__PURE__ */ m("div", { className: "flex-1 min-h-0 pt-3 px-4", children: /* @__PURE__ */ m(Ve, { output: r.output, outputRef: n }) }),
+  /* @__PURE__ */ _("div", { children: [
+    /* @__PURE__ */ m(Je, { state: r, actions: e }),
+    /* @__PURE__ */ m(Qe, {})
+  ] })
+] }), Xe = () => {
+  const [r, e] = R(!1), [n, t] = R(!1), o = F(), [s, a] = R(() => o.initialHeight || null), l = H(null), d = H(null), c = H(!1), u = H(0), p = H(0), { state: k, actions: y } = X();
+  He({
+    onOpen: () => e(!0),
+    onClose: () => t(!0),
+    isVisible: r,
+    showCitadelKey: o.showCitadelKey || "."
+  });
+  const E = w((g) => {
+    var v;
+    if (!c.current) return;
+    const S = g.clientY - u.current, f = (v = o.maxHeight) != null && v.endsWith("vh") ? window.innerHeight * parseInt(o.maxHeight, 10) / 100 : parseInt(o.maxHeight || "80vh", 10), x = Math.min(
+      Math.max(p.current - S, parseInt(o.minHeight || "200", 10)),
+      f
+    );
+    d.current && (d.current.style.height = `${x}px`, d.current.style.bottom = "0", a(`${x}px`));
+  }, [o.maxHeight, o.minHeight]), N = w(() => {
+    c.current = !1, document.documentElement.style.userSelect = "", document.documentElement.style.webkitUserSelect = "", document.documentElement.style.mozUserSelect = "", document.documentElement.style.msUserSelect = "", document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", N);
+  }, [E]), i = w((g) => {
+    d.current && (c.current = !0, u.current = g.clientY, p.current = d.current.offsetHeight, document.documentElement.style.userSelect = "none", document.documentElement.style.webkitUserSelect = "none", document.documentElement.style.mozUserSelect = "none", document.documentElement.style.msUserSelect = "none", document.addEventListener("mousemove", E), document.addEventListener("mouseup", N));
+  }, [E, N]);
+  A(() => () => {
+    document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", N);
+  }, [E, N]);
+  const h = w(() => {
+    n && (e(!1), t(!1));
+  }, [n]);
+  return $e({
+    isVisible: r,
+    isClosing: n,
+    onAnimationComplete: h
+  }), r ? /* @__PURE__ */ _(
+    "div",
+    {
+      ref: d,
+      className: `panelContainer ${r ? "citadel_slideUp" : ""} ${n ? "citadel_slideDown" : ""}`,
+      style: {
+        ...s ? { height: s } : void 0,
+        maxHeight: o.maxHeight
+      },
+      children: [
+        /* @__PURE__ */ m("div", { className: "resizeHandle", onMouseDown: i }),
+        /* @__PURE__ */ m(
+          pe,
+          {
+            state: k,
+            actions: y,
+            outputRef: l
+          }
+        )
+      ]
+    }
+  ) : null;
+}, Ze = () => {
+  const { state: r, actions: e } = X(), n = H(null);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: "inlineContainer",
+      "data-testid": "citadel-inline-container",
+      children: /* @__PURE__ */ m(
+        pe,
+        {
+          state: r,
+          actions: e,
+          outputRef: n
+        }
+      )
+    }
+  );
+}, re = `:host {
   --citadel-bg: rgb(17, 24, 39);
   --citadel-text: rgba(255, 255, 255, 0.87);
   --citadel-border: rgb(55, 65, 81);
@@ -1813,22 +1258,38 @@ const jt = () => {
   --citadel-default-height: 35vh;
   --citadel-error: rgb(239, 68, 68);
 
-  height: var(--citadel-default-height);
-  max-height: var(--citadel-max-height);
-  min-height: var(--citadel-min-height);
-  width: 100%;
+  display: block;
+  pointer-events: auto;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
+:host([data-display-mode="panel"]) {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
+  width: 100%;
+  height: var(--citadel-default-height);
+  max-height: var(--citadel-max-height);
+  min-height: var(--citadel-min-height);
+  z-index: 2147483647; /* Maximum z-index value */
   overflow: hidden;
+}
 
-  pointer-events: auto;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+:host([data-display-mode="inline"]) {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  z-index: auto;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  min-height: 0;
+  overflow: hidden;
 }
 
 button {
@@ -1890,10 +1351,9 @@ a:hover {
 .text-left {
   text-align: left;
 }
+`, oe = `/* Keep only component-specific styles here */
 
-`, pn = `/* Keep only component-specific styles here */
-
-.container {
+.panelContainer {
   position: fixed;
   height: var(--citadel-default-height);
   min-height: var(--citadel-min-height);
@@ -1911,6 +1371,7 @@ a:hover {
 
 .innerContainer {
   height: 100%;
+  flex: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -1961,10 +1422,21 @@ a:hover {
 .citadel_slideDown {
   animation: citadel_slideDown 0.2s ease-out forwards;
 }
-`, fn = `@tailwind base;
+
+.inlineContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--citadel-bg);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+`, se = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
-`, It = `*, ::before, ::after {
+`, en = `*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -2781,112 +2253,75 @@ video {
 .last\\:mr-0:last-child {
   margin-right: 0px;
 }
-`, $t = ({
-  config: o = M,
-  commandRegistry: n = new Ie(),
-  containerId: t = null
-}) => (z(() => {
-  D.configure({
-    level: o.logLevel || M.logLevel || we.ERROR,
-    prefix: "[Citadel]"
-  });
-  const r = new Sn(n, o), a = t ? document.getElementById(t) : document.body;
-  return a ? a.appendChild(r) : (console.warn(`Container with id "${t}" not found, falling back to body`), document.body.appendChild(r)), () => {
-    var i;
-    (i = r.parentElement) == null || i.removeChild(r);
-  };
-}, [n, t, o]), null);
-class Sn extends HTMLElement {
-  constructor(t, r) {
+`, cn = ({
+  config: r = z,
+  commandRegistry: e = new Q(),
+  containerId: n = null
+}) => {
+  const t = H(null), o = r.displayMode ?? z.displayMode ?? "panel";
+  return A(() => {
+    C.configure({
+      level: r.logLevel || z.logLevel || W.ERROR,
+      prefix: "[Citadel]"
+    });
+    const s = new he(e, r), a = o === "inline" && !n, l = a ? t.current : n ? document.getElementById(n) : document.body;
+    if (l)
+      l.appendChild(s);
+    else {
+      if (a) {
+        console.warn("[Citadel] No host available for inline mode; skipping mount.");
+        return;
+      }
+      console.warn(`Container with id "${n}" not found, falling back to body`), document.body.appendChild(s);
+    }
+    return () => {
+      var d;
+      (d = s.parentElement) == null || d.removeChild(s);
+    };
+  }, [e, n, r, o]), o === "inline" && !n ? /* @__PURE__ */ m("div", { ref: t, style: { width: "100%", height: "100%" } }) : null;
+};
+class he extends HTMLElement {
+  constructor(n, t) {
+    var s;
     super();
-    A(this, "shadow");
-    A(this, "root", null);
-    A(this, "commandRegistry");
-    A(this, "config");
-    this.shadow = this.attachShadow({ mode: "open" }), this.commandRegistry = t, this.config = r;
+    b(this, "shadow");
+    b(this, "root", null);
+    b(this, "commandRegistry");
+    b(this, "config");
+    this.shadow = this.attachShadow({ mode: "open" }), this.commandRegistry = n, this.config = t;
+    const o = ((s = this.config) == null ? void 0 : s.displayMode) ?? "panel";
+    this.setAttribute("data-display-mode", o);
   }
   connectedCallback() {
     try {
-      const r = [mn, pn, fn, It].map((a) => {
-        const i = new CSSStyleSheet();
-        return i.replaceSync(a), i;
+      const t = [re, oe, se, en].map((o) => {
+        const s = new CSSStyleSheet();
+        return s.replaceSync(o), s;
       });
-      this.shadow.adoptedStyleSheets = [...r];
+      this.shadow.adoptedStyleSheets = [...t];
     } catch {
-      const r = [mn, pn, fn].join(`
-`), a = document.createElement("style");
-      a.textContent = r, this.shadow.appendChild(a);
+      const t = [re, oe, se].join(`
+`), o = document.createElement("style");
+      o.textContent = t, this.shadow.appendChild(o);
     }
-    const t = document.createElement("div");
-    t.id = "citadel-root", this.shadow.appendChild(t), this.root = Oe(t), this.root.render(
-      /* @__PURE__ */ p.jsx(xt, { config: this.config || M, commandRegistry: this.commandRegistry, children: /* @__PURE__ */ p.jsx(Dt, {}) })
+    const n = document.createElement("div");
+    n.id = "citadel-root", n.style.width = "100%", n.style.height = "100%", this.shadow.appendChild(n), this.root = xe(n), this.root.render(
+      /* @__PURE__ */ m(Ie, { config: this.config || z, commandRegistry: this.commandRegistry, children: /* @__PURE__ */ m(nn, {}) })
     );
   }
 }
-customElements.define("citadel-element", Sn);
-const Dt = () => {
-  const [o, n] = Y(!1), [t, r] = Y(!1), a = ce(), [i, u] = Y(() => a.initialHeight || null), f = X(null), c = X(null), m = X(!1), h = X(0), b = X(0), { state: _, actions: S } = Cn();
-  ot({
-    onOpen: () => n(!0),
-    onClose: () => r(!0),
-    isVisible: o,
-    showCitadelKey: a.showCitadelKey || "."
-  });
-  const U = R((w) => {
-    c.current && (m.current = !0, h.current = w.clientY, b.current = c.current.offsetHeight, document.documentElement.style.userSelect = "none", document.documentElement.style.webkitUserSelect = "none", document.documentElement.style.mozUserSelect = "none", document.documentElement.style.msUserSelect = "none", document.addEventListener("mousemove", I), document.addEventListener("mouseup", d));
-  }, []), I = R((w) => {
-    var P;
-    if (!m.current) return;
-    const N = w.clientY - h.current, k = (P = a.maxHeight) != null && P.endsWith("vh") ? window.innerHeight * parseInt(a.maxHeight, 10) / 100 : parseInt(a.maxHeight || "80vh", 10), j = Math.min(
-      Math.max(b.current - N, parseInt(a.minHeight || "200", 10)),
-      k
-    );
-    c.current && (c.current.style.height = `${j}px`, c.current.style.bottom = "0", u(`${j}px`));
-  }, [a.maxHeight, a.minHeight]), d = R(() => {
-    m.current = !1, document.documentElement.style.userSelect = "", document.documentElement.style.webkitUserSelect = "", document.documentElement.style.mozUserSelect = "", document.documentElement.style.msUserSelect = "", document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", d);
-  }, [I]);
-  z(() => () => {
-    document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", d);
-  }, [I, d]);
-  const y = R(() => {
-    t && (n(!1), r(!1));
-  }, [t]);
-  return dt({
-    isVisible: o,
-    isClosing: t,
-    onAnimationComplete: y
-  }), o ? /* @__PURE__ */ p.jsxs(
-    "div",
-    {
-      ref: c,
-      className: `container ${o ? "citadel_slideUp" : ""} ${t ? "citadel_slideDown" : ""}`,
-      style: {
-        ...i ? { height: i } : void 0,
-        maxHeight: a.maxHeight
-      },
-      children: [
-        /* @__PURE__ */ p.jsx("div", { className: "resizeHandle", onMouseDown: U }),
-        /* @__PURE__ */ p.jsxs("div", { className: "innerContainer", children: [
-          /* @__PURE__ */ p.jsx("div", { className: "flex-1 min-h-0 pt-3 px-4", children: /* @__PURE__ */ p.jsx(Ot, { output: _.output, outputRef: f }) }),
-          /* @__PURE__ */ p.jsxs("div", { children: [
-            /* @__PURE__ */ p.jsx(At, { state: _, actions: S }),
-            /* @__PURE__ */ p.jsx(Nt, {})
-          ] })
-        ] })
-      ]
-    }
-  ) : null;
-};
+customElements.define("citadel-element", he);
+const nn = () => (F().displayMode ?? "panel") === "inline" ? /* @__PURE__ */ m(Ze, {}) : /* @__PURE__ */ m(Xe, {});
 export {
-  $t as Citadel,
-  Ie as CommandRegistry,
-  Z as CommandResult,
-  ie as CommandStatus,
-  Et as DEFAULT_CURSOR_CONFIGS,
-  mt as ErrorCommandResult,
-  Mt as ImageCommandResult,
-  Ht as JsonCommandResult,
-  Ct as OutputItem,
-  pt as PendingCommandResult,
-  hn as TextCommandResult
+  cn as Citadel,
+  Q as CommandRegistry,
+  U as CommandResult,
+  T as CommandStatus,
+  We as DEFAULT_CURSOR_CONFIGS,
+  ve as ErrorCommandResult,
+  ln as ImageCommandResult,
+  an as JsonCommandResult,
+  Re as OutputItem,
+  Ce as PendingCommandResult,
+  ae as TextCommandResult
 };