citadel_cli 1.3.0 → 1.4.1

package/dist/citadel.es.js

@@ -1,13 +1,13 @@
-var Ne = Object.defineProperty;
-var ze = (t, e, n) => e in t ? Ne(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var b = (t, e, n) => ze(t, typeof e != "symbol" ? e + "" : e, n);
-import { jsx as m, jsxs as E, Fragment as Ae } from "react/jsx-runtime";
-import L, { createContext as _e, useState as I, useMemo as M, useEffect as z, useContext as J, useCallback as v, useReducer as Ie, useRef as F } from "react";
-import { createRoot as Re } from "react-dom/client";
-var W = /* @__PURE__ */ ((t) => (t.Pending = "pending", t.Success = "success", t.Failure = "failure", t.Timeout = "timeout", t))(W || {});
-class O {
+var Ie = Object.defineProperty;
+var Pe = (t, e, n) => e in t ? Ie(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var y = (t, e, n) => Pe(t, typeof e != "symbol" ? e + "" : e, n);
+import { jsx as m, jsxs as A, Fragment as He } from "react/jsx-runtime";
+import $, { createContext as Re, useState as _, useMemo as P, useEffect as I, useContext as Z, useCallback as f, useReducer as _e, useRef as T, useLayoutEffect as Me } from "react";
+import { createRoot as Te } from "react-dom/client";
+var V = /* @__PURE__ */ ((t) => (t.Pending = "pending", t.Success = "success", t.Failure = "failure", t.Timeout = "timeout", t))(V || {});
+class K {
   constructor(e = Date.now()) {
-    b(this, "_status", "pending");
+    y(this, "_status", "pending");
     this.timestamp = e;
   }
   get status() {
@@ -23,80 +23,88 @@ class O {
     this._status = "timeout";
   }
 }
-class Pe extends O {
+class ze extends K {
   constructor(e, n) {
     super(n), this.data = e;
   }
   render() {
-    return /* @__PURE__ */ m("pre", { className: "text-gray-200", children: JSON.stringify(this.data, null, 2) });
+    return /* @__PURE__ */ m("pre", { className: "citadel-result-json", children: JSON.stringify(this.data, null, 2) });
   }
 }
-class Y extends O {
+class G extends K {
   constructor(e, n) {
     super(n), this.text = e;
   }
   render() {
-    return /* @__PURE__ */ m("div", { className: "text-gray-200 whitespace-pre", children: this.text });
+    return /* @__PURE__ */ m("div", { className: "citadel-result-text", children: this.text });
   }
 }
-class fe extends O {
+class De extends K {
+  constructor(e, n = "true", s = "false", r) {
+    super(r), this.value = e, this.trueText = n, this.falseText = s;
+  }
+  render() {
+    return /* @__PURE__ */ m("div", { className: "citadel-result-text citadel-result-boolean", children: this.value ? this.trueText : this.falseText });
+  }
+}
+class we extends K {
   constructor(e, n) {
     super(n), this.error = e, this.markFailure();
   }
   render() {
-    return /* @__PURE__ */ m("div", { className: "mt-1 text-red-400", children: this.error });
+    return /* @__PURE__ */ m("div", { className: "citadel-result-error", children: this.error });
   }
 }
-class He extends O {
+class Oe extends K {
   render() {
-    return /* @__PURE__ */ m("div", { className: "text-gray-400", children: "..." });
+    return /* @__PURE__ */ m("div", { className: "citadel-result-pending", children: "..." });
   }
 }
-class Me extends O {
-  constructor(e, n = "", r) {
-    super(r), this.imageUrl = e, this.altText = n;
+class Fe extends K {
+  constructor(e, n = "", s) {
+    super(s), this.imageUrl = e, this.altText = n;
   }
   render() {
-    return /* @__PURE__ */ m("div", { className: "my-2", children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ m("div", { className: "citadel-result-image-wrap", children: /* @__PURE__ */ m(
       "img",
       {
         src: this.imageUrl,
         alt: this.altText,
-        className: "max-w-[400px] max-h-[300px] h-auto rounded-lg object-contain"
+        className: "citadel-result-image"
       }
     ) });
   }
 }
-const Te = (t) => async function() {
-  const n = t.commands.filter((r) => r.fullPath[0] !== "help").map((r) => {
-    const s = `${r.segments.map((l) => l.type === "argument" ? `<${l.name}>` : l.name).join(" ")} - ${r.description}`, i = r.segments.filter((l) => l.type === "argument" && l.description).map((l) => `  <${l.name}>: ${l.description}`);
+const Le = (t) => async function() {
+  const n = t.commands.filter((s) => s.fullPath[0] !== "help").map((s) => {
+    const o = `${s.segments.map((c) => c.type === "argument" ? `<${c.name}>` : c.name).join(" ")} - ${s.description}`, a = s.segments.filter((c) => c.type === "argument" && c.description).map((c) => `  <${c.name}>: ${c.description}`);
     return {
-      commandLine: s,
-      argumentLines: i
+      commandLine: o,
+      argumentLines: a
     };
-  }).sort((r, o) => r.commandLine.localeCompare(o.commandLine)).flatMap((r) => [
-    r.commandLine,
-    ...r.argumentLines
+  }).sort((s, r) => s.commandLine.localeCompare(r.commandLine)).flatMap((s) => [
+    s.commandLine,
+    ...s.argumentLines
   ]);
-  return n.length === 0 ? new Y(
+  return n.length === 0 ? new G(
     "No commands available yet. Add some commands to get started!"
-  ) : (n.push("help - Show available commands"), new Y(
+  ) : (n.push("help - Show available commands"), new G(
     `Available Commands:
 ` + n.join(`
 `)
   ));
 };
-var re = /* @__PURE__ */ ((t) => (t[t.NONE = 0] = "NONE", t[t.ERROR = 1] = "ERROR", t[t.WARN = 2] = "WARN", t[t.INFO = 3] = "INFO", t[t.DEBUG = 4] = "DEBUG", t[t.TRACE = 5] = "TRACE", t))(re || {});
-const ie = !0;
-class k {
+var ie = /* @__PURE__ */ ((t) => (t[t.NONE = 0] = "NONE", t[t.ERROR = 1] = "ERROR", t[t.WARN = 2] = "WARN", t[t.INFO = 3] = "INFO", t[t.DEBUG = 4] = "DEBUG", t[t.TRACE = 5] = "TRACE", t))(ie || {});
+const ue = !0;
+class b {
   static configure(e) {
     this.level = e.level, this.prefix = e.prefix || "[Citadel]";
   }
   static trace(...e) {
-    this.level >= 5 && !ie && console.trace(this.prefix, ...e);
+    this.level >= 5 && !ue && console.trace(this.prefix, ...e);
   }
   static debug(...e) {
-    this.level >= 4 && !ie && console.debug(this.prefix, ...e);
+    this.level >= 4 && !ue && console.debug(this.prefix, ...e);
   }
   static info(...e) {
     this.level >= 3 && console.info(this.prefix, ...e);
@@ -108,8 +116,8 @@ class k {
     this.level >= 1 && console.error(this.prefix, ...e);
   }
 }
-b(k, "level", 0), b(k, "prefix", "");
-const N = {
+y(b, "level", 0), y(b, "prefix", "");
+const x = {
   commandTimeoutMs: 1e4,
   cursorColor: "var(--cursor-color, #fff)",
   cursorSpeed: 530,
@@ -117,63 +125,65 @@ const N = {
   includeHelpCommand: !0,
   fontFamily: "monospace",
   fontSize: "0.875rem",
-  initialHeight: "40vh",
-  logLevel: re.ERROR,
+  initialHeight: "50vh",
+  logLevel: ie.ERROR,
   maxHeight: "80vh",
   minHeight: "200",
   outputFontSize: "0.875rem",
   resetStateOnHide: !1,
+  closeOnEscape: !0,
   showCitadelKey: ".",
+  showOnLoad: !1,
   displayMode: "panel",
   storage: {
     type: "localStorage",
     maxCommands: 100
   }
-}, we = async () => new Y("");
-class oe {
-  constructor(e, n, r) {
-    this.type = e, this.name = n, this.description = r;
+}, Ce = async () => new G("");
+class ce {
+  constructor(e, n, s) {
+    this.type = e, this.name = n, this.description = s;
   }
   toString() {
     return this.name;
   }
 }
-class se extends oe {
+class le extends ce {
   constructor() {
     super("null", ">null<", "Empty segment");
   }
 }
-class ye extends oe {
+class ve extends ce {
   constructor(e, n) {
     super("word", e, n);
   }
 }
-class $ extends oe {
-  constructor(e, n, r, o) {
-    super("argument", e, n), this.value = r, this.valid = o;
+class q extends ce {
+  constructor(e, n, s, r) {
+    super("argument", e, n), this.value = s, this.valid = r;
   }
 }
-const Fe = (t) => {
+const je = (t) => {
   if (t.type === "word")
-    return new ye(t.name, t.description);
+    return new ve(t.name, t.description);
   if (t.type === "argument") {
     const e = t;
-    return new $(
+    return new q(
       e.name,
       e.description,
       e.value,
       e.valid
     );
   }
-  return new se();
-}, H = (t) => t.map((e) => Fe(e));
-class De {
-  constructor(e, n, r = we) {
-    b(this, "_segments");
-    b(this, "_description");
+  return new le();
+}, z = (t) => t.map((e) => je(e));
+class Ue {
+  constructor(e, n, s = Ce) {
+    y(this, "_segments");
+    y(this, "_description");
     // Used by `Help` command, etc.
-    b(this, "_handler");
-    this._segments = e, this._description = n, this._handler = r;
+    y(this, "_handler");
+    this._segments = e, this._description = n, this._handler = s;
   }
   get segments() {
     return this._segments;
@@ -197,9 +207,9 @@ class De {
     return this.fullPath.join(" ") === e.fullPath.join(" ");
   }
 }
-class X {
+class ee {
   constructor() {
-    b(this, "_commands", []);
+    y(this, "_commands", []);
   }
   get commands() {
     return this._commands;
@@ -215,20 +225,20 @@ class X {
    * @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(e, n, r = we) {
+  addCommand(e, n, s = Ce) {
     if (e === void 0 || e.length === 0)
       throw new Error("Command path cannot be empty");
-    const o = new De(e, n, r), s = this._commands.find((i) => {
-      const l = i.segments.map(
-        (c) => c.type === "argument" ? "*" : c.name
-      ).join(" "), a = e.map(
-        (c) => c.type === "argument" ? "*" : c.name
+    const r = new Ue(e, n, s), o = this._commands.find((a) => {
+      const c = a.segments.map(
+        (d) => d.type === "argument" ? "*" : d.name
+      ).join(" "), i = e.map(
+        (d) => d.type === "argument" ? "*" : d.name
       ).join(" ");
-      return l === a;
+      return c === i;
     });
-    if (s)
-      throw new Error(`Duplicate commands: '${s.fullPath_s}' and '${o.fullPath_s}'`);
-    this._commands.push(o);
+    if (o)
+      throw new Error(`Duplicate commands: '${o.fullPath_s}' and '${r.fullPath_s}'`);
+    this._commands.push(r);
   }
   /**
    * Removes a command that exactly matches the provided path.
@@ -237,8 +247,8 @@ class X {
    * @returns True if a command was removed; otherwise false.
    */
   removeCommand(e) {
-    const n = e.join(" "), r = this._commands.findIndex((o) => o.fullPath.join(" ") === n);
-    return r === -1 ? !1 : (this._commands.splice(r, 1), !0);
+    const n = e.join(" "), s = this._commands.findIndex((r) => r.fullPath.join(" ") === n);
+    return s === -1 ? !1 : (this._commands.splice(s, 1), !0);
   }
   /**
    * Retrieves a command from the registry for the given path.
@@ -248,25 +258,25 @@ class X {
    */
   getCommand(e) {
     return this._commands.find((n) => {
-      const r = n.fullPath.join(" "), o = e.join(" ");
-      if (r === o)
+      const s = n.fullPath.join(" "), r = e.join(" ");
+      if (s === r)
         return !0;
-      const i = n.segments.filter((l) => l.type === "word").map((l) => l.name);
-      return i.length === e.length && i.join(" ") === o;
+      const a = n.segments.filter((c) => c.type === "word").map((c) => c.name);
+      return a.length === e.length && a.join(" ") === r;
     });
   }
   commandExistsForPath(e) {
     const n = this._commands.map(
-      (o) => o.segments.map(
-        (s) => s.type === "argument" ? "*" : s.name
+      (r) => r.segments.map(
+        (o) => o.type === "argument" ? "*" : o.name
       ).join(" ")
-    ), r = e.map((o, s) => this._commands.some(
-      (l) => {
-        var a;
-        return ((a = l.segments[s]) == null ? void 0 : a.type) === "argument";
+    ), s = e.map((r, o) => this._commands.some(
+      (c) => {
+        var i;
+        return ((i = c.segments[o]) == null ? void 0 : i.type) === "argument";
       }
-    ) ? "*" : o).join(" ");
-    return n.includes(r);
+    ) ? "*" : r).join(" ");
+    return n.includes(s);
   }
   /**
    * Gets possible matches for a given path.
@@ -282,19 +292,19 @@ class X {
    * Matching is case-insensitive.
    */
   getMatchingCompletions(e, n) {
-    const r = n.trim().toLowerCase(), o = this.getCompletions(e);
-    return r ? o.filter(
-      (s) => s.name.toLowerCase().startsWith(r)
-    ) : o;
+    const s = n.trim().toLowerCase(), r = this.getCompletions(e);
+    return s ? r.filter(
+      (o) => o.name.toLowerCase().startsWith(s)
+    ) : r;
   }
   /**
    * Returns a single completion when prefix matching is unambiguous.
    * Returns undefined for ambiguous or no-match prefixes.
    */
   getUniqueCompletion(e, n) {
-    const r = this.getMatchingCompletions(e, n);
-    if (r.length === 1)
-      return r[0];
+    const s = this.getMatchingCompletions(e, n);
+    if (s.length === 1)
+      return s[0];
   }
   /**
    * Gets an array of segments reachable from a given path
@@ -303,29 +313,29 @@ class X {
    * @returns An array of completion strings.
    */
   getCompletions(e) {
-    if (k.debug("[getCompletions] path: ", e), !e.length) {
-      const s = this._commands.map((a) => a.segments[0]), i = (a, c) => a.type === c.type && a.name === c.name;
-      return s.filter(
-        (a, c, g) => c === g.findIndex((f) => i(f, a))
+    if (b.debug("[getCompletions] path: ", e), !e.length) {
+      const o = this._commands.map((i) => i.segments[0]), a = (i, d) => i.type === d.type && i.name === d.name;
+      return o.filter(
+        (i, d, g) => d === g.findIndex((u) => a(u, i))
       );
     }
     const n = e.length;
-    return this._commands.filter((s) => {
-      const i = s.segments;
-      if (i.length <= n - 1)
+    return this._commands.filter((o) => {
+      const a = o.segments;
+      if (a.length <= n - 1)
         return !1;
-      for (let l = 0; l < n; l++) {
-        const a = e[l], c = i[l];
-        if (!(a === "*" && c.type === "argument") && a !== c.name)
+      for (let c = 0; c < n; c++) {
+        const i = e[c], d = a[c];
+        if (!(i === "*" && d.type === "argument") && i !== d.name)
           return !1;
       }
       return !0;
-    }).filter((s) => s.segments.length > n).map((s) => {
-      const i = s.segments[n], l = i.type === "argument" ? $ : ye;
-      return new l(i.name, i.description);
+    }).filter((o) => o.segments.length > n).map((o) => {
+      const a = o.segments[n], c = a.type === "argument" ? q : ve;
+      return new c(a.name, a.description);
     }).filter(
-      (s, i, l) => i === l.findIndex(
-        (a) => a.type === s.type && a.name === s.name
+      (o, a, c) => a === c.findIndex(
+        (i) => i.type === o.type && i.name === o.name
       )
     );
   }
@@ -333,9 +343,9 @@ class X {
     return this.getCompletions(e).length > 0;
   }
 }
-class be {
+class Se {
   constructor(e) {
-    b(this, "config");
+    y(this, "config");
     this.config = {
       type: "localStorage",
       maxCommands: 100,
@@ -352,17 +362,17 @@ class be {
     await this.saveCommands(n);
   }
 }
-class Ue extends be {
+class $e extends Se {
   constructor(n) {
     super(n);
-    b(this, "storageKey", "citadel_command_history");
+    y(this, "storageKey", "citadel_command_history");
   }
   async getStoredCommands() {
     try {
       const n = window.localStorage.getItem(this.storageKey);
-      return n ? JSON.parse(n).map((o) => ({
-        commandSegments: Array.isArray(o.commandSegments) ? H(o.commandSegments) : [],
-        timestamp: o.timestamp
+      return n ? JSON.parse(n).map((r) => ({
+        commandSegments: Array.isArray(r.commandSegments) ? z(r.commandSegments) : [],
+        timestamp: r.timestamp
       })) : [];
     } catch (n) {
       return console.warn("Failed to load commands from localStorage:", n), [];
@@ -377,29 +387,29 @@ class Ue extends be {
   }
   async saveCommands(n) {
     try {
-      const r = n.map((o) => ({
-        commandSegments: Array.isArray(o.commandSegments) ? H(o.commandSegments).map((s) => ({
-          type: s.type,
-          name: s.name,
-          description: s.description,
-          ...s instanceof $ ? { value: s.value } : {}
+      const s = n.map((r) => ({
+        commandSegments: Array.isArray(r.commandSegments) ? z(r.commandSegments).map((o) => ({
+          type: o.type,
+          name: o.name,
+          description: o.description,
+          ...o instanceof q ? { value: o.value } : {}
         })) : [],
-        timestamp: o.timestamp
+        timestamp: r.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(s));
+    } catch (s) {
+      throw console.warn("Failed to save commands to localStorage:", s), s;
     }
   }
 }
-class le extends be {
+class pe extends Se {
   constructor(n) {
     super(n);
-    b(this, "storedCommands", []);
+    y(this, "storedCommands", []);
   }
   async getStoredCommands() {
     return this.storedCommands.map((n) => ({
-      commandSegments: Array.isArray(n.commandSegments) ? H(n.commandSegments) : [],
+      commandSegments: Array.isArray(n.commandSegments) ? z(n.commandSegments) : [],
       timestamp: n.timestamp
     }));
   }
@@ -407,27 +417,27 @@ class le extends be {
     this.storedCommands = [];
   }
   async saveCommands(n) {
-    this.storedCommands = n.map((r) => ({
-      commandSegments: Array.isArray(r.commandSegments) ? H(r.commandSegments) : [],
-      timestamp: r.timestamp
+    this.storedCommands = n.map((s) => ({
+      commandSegments: Array.isArray(s.commandSegments) ? z(s.commandSegments) : [],
+      timestamp: s.timestamp
     }));
   }
 }
-const U = class U {
+const j = class j {
   constructor() {
-    b(this, "currentStorage");
+    y(this, "currentStorage");
   }
   static reset() {
-    U.instance = void 0;
+    j.instance = void 0;
   }
   static getInstance() {
-    return U.instance || (U.instance = new U()), U.instance;
+    return j.instance || (j.instance = new j()), j.instance;
   }
   initializeStorage(e) {
     try {
-      e.type === "memory" ? this.currentStorage = new le(e) : this.currentStorage = new Ue(e);
+      e.type === "memory" ? this.currentStorage = new pe(e) : this.currentStorage = new $e(e);
     } catch (n) {
-      console.warn("Failed to create storage, falling back to memory storage:", n), this.currentStorage = new le(e);
+      console.warn("Failed to create storage, falling back to memory storage:", n), this.currentStorage = new pe(e);
     }
   }
   getStorage() {
@@ -436,13 +446,13 @@ const U = class U {
     return this.currentStorage;
   }
 };
-b(U, "instance");
-let V = U;
+y(j, "instance");
+let Q = j;
 class xe {
   constructor() {
-    b(this, "segments", []);
-    b(this, "nullSegment", new se());
-    b(this, "observers", []);
+    y(this, "segments", []);
+    y(this, "nullSegment", new le());
+    y(this, "observers", []);
   }
   subscribe(e) {
     this.observers.push(e);
@@ -525,420 +535,417 @@ class xe {
     return [...this.segments];
   }
 }
-const je = {
-  config: N,
-  commands: new X(),
+const Ke = {
+  config: x,
+  commands: new ee(),
   segmentStack: new xe()
-}, q = _e(je), Le = ({ config: t = N, commandRegistry: e, children: n }) => {
-  const [r, o] = L.useState(), [s] = I(() => new xe()), i = M(() => ({
-    ...N,
+}, Y = Re(Ke), We = ({ config: t = x, commandRegistry: e, children: n }) => {
+  const [s, r] = $.useState(), [o] = _(() => new xe()), a = P(() => ({
+    ...x,
     ...t,
     // Ensure nested objects are properly merged
     storage: {
-      ...N.storage,
+      ...x.storage,
       ...t.storage
     },
     // Ensure explicit values from config take precedence
-    cursorType: t.cursorType ?? N.cursorType,
-    cursorColor: t.cursorColor ?? N.cursorColor,
-    cursorSpeed: t.cursorSpeed ?? N.cursorSpeed,
-    showCitadelKey: t.showCitadelKey || "."
+    cursorType: t.cursorType ?? x.cursorType,
+    cursorColor: t.cursorColor ?? x.cursorColor,
+    cursorSpeed: t.cursorSpeed ?? x.cursorSpeed,
+    closeOnEscape: t.closeOnEscape ?? x.closeOnEscape,
+    showCitadelKey: t.showCitadelKey ?? x.showCitadelKey,
+    showOnLoad: t.showOnLoad ?? x.showOnLoad
   }), [t]);
-  z(() => {
-    V.getInstance().initializeStorage(
-      i.storage ?? N.storage
-    ), o(V.getInstance().getStorage());
-  }, [i.storage]), z(() => {
+  I(() => {
+    Q.getInstance().initializeStorage(
+      a.storage ?? x.storage
+    ), r(Q.getInstance().getStorage());
+  }, [a.storage]), I(() => {
     if (e) {
-      if (i.includeHelpCommand) {
+      if (a.includeHelpCommand) {
         if (!e.commandExistsForPath(["help"])) {
-          const a = Te(e);
+          const i = Le(e);
           e.addCommand(
             [{ type: "word", name: "help" }],
             "Show available commands",
-            a
+            i
           );
         }
         return;
       }
       e.removeCommand(["help"]);
     }
-  }, [e, i.includeHelpCommand]);
-  const l = M(() => ({
-    config: i,
-    commands: e || new X(),
-    storage: r,
-    segmentStack: s
-  }), [i, e, r, s]);
-  return /* @__PURE__ */ m(q.Provider, { value: l, children: n });
-}, j = () => {
-  const t = J(q);
+  }, [e, a.includeHelpCommand]);
+  const c = P(() => ({
+    config: a,
+    commands: e || new ee(),
+    storage: s,
+    segmentStack: o
+  }), [a, e, s, o]);
+  return /* @__PURE__ */ m(Y.Provider, { value: c, children: n });
+}, U = () => {
+  const t = Z(Y);
   if (t === void 0)
     throw new Error("useCitadelConfig must be used within a CitadelConfigProvider");
   return t.config;
-}, Q = () => {
-  const t = J(q);
+}, te = () => {
+  const t = Z(Y);
   if (t === void 0)
     throw new Error("useCitadelCommands must be used within a CitadelConfigProvider");
   return t.commands;
-}, ve = () => {
-  const t = J(q);
+}, be = () => {
+  const t = Z(Y);
   if (t === void 0)
     throw new Error("useCitadelStorage must be used within a CitadelConfigProvider");
   return t.storage;
-}, B = () => {
-  const t = J(q);
+}, J = () => {
+  const t = Z(Y);
   if (t === void 0)
     throw new Error("useSegmentStack must be used within a CitadelConfigProvider");
   return t.segmentStack;
-}, G = class G {
+}, X = class X {
   constructor(e, n) {
-    b(this, "id");
-    b(this, "timestamp");
-    b(this, "command");
-    b(this, "result");
-    this.id = `output-${Date.now()}-${G.idCounter++}`, this.command = e.toArray().map((r) => r.type === "argument" ? r.value || "" : r.name), this.timestamp = Date.now(), this.result = n ?? new He();
+    y(this, "id");
+    y(this, "timestamp");
+    y(this, "command");
+    y(this, "result");
+    this.id = `output-${Date.now()}-${X.idCounter++}`, this.command = e.toArray().map((s) => s.type === "argument" ? s.value || "" : s.name), this.timestamp = Date.now(), this.result = n ?? new Oe();
   }
 };
-b(G, "idCounter", 0);
-let te = G;
-function $e(t) {
+y(X, "idCounter", 0);
+let oe = X;
+function qe(t) {
   return {
-    commandSegments: H(t),
+    commandSegments: z(t),
     timestamp: Date.now()
   };
 }
-function Ce() {
-  const t = ve(), [e, n] = I({
+function ke() {
+  const t = be(), [e, n] = _({
     storedCommands: [],
     position: null
-  }), r = v(async (l) => {
+  }), s = f(async (c) => {
     if (t)
       try {
-        const a = $e(l);
-        await t.addStoredCommand(a), n((c) => ({
-          ...c,
-          storedCommands: [...c.storedCommands, {
-            ...a,
-            commandSegments: H(a.commandSegments)
+        const i = qe(c);
+        await t.addStoredCommand(i), n((d) => ({
+          ...d,
+          storedCommands: [...d.storedCommands, {
+            ...i,
+            commandSegments: z(i.commandSegments)
           }],
           position: null
         }));
-      } catch (a) {
-        console.warn("Failed to save command to history:", a);
+      } catch (i) {
+        console.warn("Failed to save command to history:", i);
       }
-  }, [t]), o = v(async () => t ? (await t.getStoredCommands()).map((a) => ({
-    ...a,
-    commandSegments: H(a.commandSegments)
+  }, [t]), r = f(async () => t ? (await t.getStoredCommands()).map((i) => ({
+    ...i,
+    commandSegments: z(i.commandSegments)
   })) : [], [t]);
-  z(() => {
+  I(() => {
     if (!t) return;
     (async () => {
       try {
-        const c = (await t.getStoredCommands()).map((g) => ({
+        const d = (await t.getStoredCommands()).map((g) => ({
           ...g,
-          commandSegments: H(g.commandSegments)
+          commandSegments: z(g.commandSegments)
         }));
         return n((g) => ({
           ...g,
-          storedCommands: c
-        })), c;
-      } catch (a) {
-        console.warn("Failed to load command history:", a);
+          storedCommands: d
+        })), d;
+      } catch (i) {
+        console.warn("Failed to load command history:", i);
       }
     })();
   }, [t]);
-  const s = v(async (l) => {
-    const a = await o();
-    if (a.length === 0)
-      return n((f) => ({
-        ...f,
+  const o = f(async (c) => {
+    const i = await r();
+    if (i.length === 0)
+      return n((u) => ({
+        ...u,
         storedCommands: [],
         position: null
       })), { segments: null, position: null };
-    let c = null;
-    if (l === "up" ? e.position === null ? c = a.length - 1 : e.position > 0 ? c = e.position - 1 : c = 0 : e.position === null || e.position >= a.length - 1 ? c = null : c = e.position + 1, n((f) => ({
-      ...f,
-      storedCommands: a.map((x) => ({
-        ...x,
-        commandSegments: H(x.commandSegments)
+    let d = null;
+    if (c === "up" ? e.position === null ? d = i.length - 1 : e.position > 0 ? d = e.position - 1 : d = 0 : e.position === null || e.position >= i.length - 1 ? d = null : d = e.position + 1, n((u) => ({
+      ...u,
+      storedCommands: i.map((h) => ({
+        ...h,
+        commandSegments: z(h.commandSegments)
       })),
-      position: c
-    })), c === null)
+      position: d
+    })), d === null)
       return {
         segments: [],
         position: null
       };
-    const g = a[c];
+    const g = i[d];
     return g ? {
-      segments: H(g.commandSegments),
-      position: c
+      segments: z(g.commandSegments),
+      position: d
     } : {
       segments: [],
       position: null
     };
-  }, [e.position, o]), i = v(async () => {
+  }, [e.position, r]), a = f(async () => {
     try {
       if (!t) return;
       await t.clear(), n({
         storedCommands: [],
         position: null
       });
-    } catch (l) {
-      console.warn("Failed to clear command history:", l);
+    } catch (c) {
+      console.warn("Failed to clear command history:", c);
     }
   }, [t]);
   return {
     history: e,
-    addStoredCommand: r,
-    getStoredCommands: o,
-    navigateHistory: s,
-    clear: i
+    addStoredCommand: s,
+    getStoredCommands: r,
+    navigateHistory: o,
+    clear: a
   };
 }
-const ae = () => {
-  const t = j(), e = Q(), n = Ce(), r = B(), o = ve(), [s, i] = I({
+const de = () => {
+  const t = U(), e = te(), n = ke(), s = J(), r = be(), [o, a] = _({
     currentInput: "",
     isEnteringArg: !1,
     output: [],
     history: {
       commands: [],
       position: null,
-      storage: o
+      storage: r
     }
   });
-  z(() => {
-  }, [o]), z(() => {
-    i((a) => ({
-      ...a,
+  I(() => {
+  }, [r]), I(() => {
+    a((i) => ({
+      ...i,
       history: {
         commands: n.history.storedCommands,
         position: n.history.position,
-        storage: o
+        storage: r
       }
     }));
-  }, [n.history, o]);
-  const l = {
-    setCurrentInput: v((a) => {
-      k.debug("[CitadelActions] setCurrentInput: ", a), i((c) => ({ ...c, currentInput: a }));
+  }, [n.history, r]);
+  const c = {
+    setCurrentInput: f((i) => {
+      b.debug("[CitadelActions] setCurrentInput: ", i), a((d) => ({ ...d, currentInput: i }));
     }, []),
-    setIsEnteringArg: v((a) => {
-      k.debug("[CitadelActions] setIsEnteringArg: ", a), i((c) => ({ ...c, isEnteringArg: a }));
+    setIsEnteringArg: f((i) => {
+      b.debug("[CitadelActions] setIsEnteringArg: ", i), a((d) => ({ ...d, isEnteringArg: i }));
     }, []),
-    addOutput: v((a) => {
-      k.debug("[CitadelActions]addOutput: ", a), i((c) => ({
-        ...c,
-        output: [...c.output, a]
+    addOutput: f((i) => {
+      b.debug("[CitadelActions]addOutput: ", i), a((d) => ({
+        ...d,
+        output: [...d.output, i]
       }));
     }, []),
-    executeCommand: v(async () => {
-      const a = r.path(), c = e.getCommand(a);
-      if (!c) {
-        console.error("[CitadelActions][executeCommand] Cannot execute command because no command was found for the given path: ", a);
+    executeCommand: f(async () => {
+      const i = s.path(), d = e.getCommand(i);
+      if (!d) {
+        console.error("[CitadelActions][executeCommand] Cannot execute command because no command was found for the given path: ", i);
         return;
       }
-      const g = new te(r);
-      i((f) => ({
-        ...f,
-        output: [...f.output, g]
+      const g = new oe(s);
+      a((u) => ({
+        ...u,
+        output: [...u.output, g]
       }));
       try {
-        const f = new Promise((h, S) => {
+        const u = new Promise((C, k) => {
           setTimeout(() => {
-            S(new Error("Request timed out"));
+            k(new Error("Request timed out"));
           }, t.commandTimeoutMs);
-        }), x = r.arguments.map((h) => h.value || ""), w = await Promise.race([
-          c.handler(x),
-          f
+        }), h = s.arguments.map((C) => C.value || ""), S = await Promise.race([
+          d.handler(h),
+          u
         ]);
-        if (!(w instanceof O))
+        if (!(S instanceof K))
           throw new Error(
-            `The ${a.join(".")} command returned an invalid result type. Commands must return an instance of a CommandResult.
+            `The ${i.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 ${a.join(".")} command and update the return type for its handler.`
+Check the definition of the ${i.join(".")} command and update the return type for its handler.`
           );
-        w.markSuccess(), i((h) => ({
-          ...h,
-          output: h.output.map(
-            (S) => S.id === g.id ? { ...S, result: w } : S
+        S.markSuccess(), a((C) => ({
+          ...C,
+          output: C.output.map(
+            (k) => k.id === g.id ? { ...k, result: S } : k
           )
         }));
-      } catch (f) {
-        const x = new fe(
-          f instanceof Error ? f.message : "Unknown error"
+      } catch (u) {
+        const h = new we(
+          u instanceof Error ? u.message : "Unknown error"
         );
-        x.markFailure(), i((w) => ({
-          ...w,
-          output: w.output.map(
-            (h) => h.id === g.id ? { ...h, result: x } : h
+        h.markFailure(), a((S) => ({
+          ...S,
+          output: S.output.map(
+            (C) => C.id === g.id ? { ...C, result: h } : C
           )
         }));
       }
-    }, [e, t.commandTimeoutMs, r]),
-    clearHistory: v(async () => {
+    }, [e, t.commandTimeoutMs, s]),
+    clearHistory: f(async () => {
       try {
         await n.clear();
-      } catch (a) {
-        console.warn("Failed to clear history:", a);
+      } catch (i) {
+        console.warn("Failed to clear history:", i);
       }
     }, [n])
   };
-  return { state: s, actions: l };
-}, Oe = ({ onOpen: t, onClose: e, isVisible: n, showCitadelKey: r }) => {
-  z(() => {
-    const o = (s) => {
-      var i, l;
-      !n && s.key === r && !["input", "textarea"].includes(((l = (i = s.target) == null ? void 0 : i.tagName) == null ? void 0 : l.toLowerCase()) || "") && (s.preventDefault(), t()), n && s.key === "Escape" && (s.preventDefault(), e());
+  return { state: o, actions: c };
+}, Be = ({
+  onOpen: t,
+  onClose: e,
+  isVisible: n,
+  showCitadelKey: s,
+  closeOnEscape: r
+}) => {
+  I(() => {
+    const o = (a) => {
+      var c, i;
+      !n && a.key === s && !["input", "textarea"].includes(((i = (c = a.target) == null ? void 0 : c.tagName) == null ? void 0 : i.toLowerCase()) || "") && (a.preventDefault(), t()), r && n && a.key === "Escape" && (a.preventDefault(), e());
     };
     return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [t, e, n, r]);
-}, Ke = "_panelContainer_1pav9_3", We = "_innerContainer_1pav9_19", qe = "_inputSection_1pav9_29", Be = "_resizeHandle_1pav9_36", Ye = "_citadel_slideUp_1pav9_65", Ve = "_citadel_slideDown_1pav9_69", Ge = "_inlineContainer_1pav9_73", ce = {
-  panelContainer: Ke,
-  innerContainer: We,
-  inputSection: qe,
-  resizeHandle: Be,
-  citadel_slideUp: Ye,
-  citadel_slideDown: Ve,
-  inlineContainer: Ge
-}, Je = (t) => {
-  const { isVisible: e, isClosing: n, onAnimationComplete: r } = t, o = M(() => e ? n ? ce.slideDown : ce.slideUp : "", [e, n]);
-  return z(() => {
-    if (r) {
-      const i = setTimeout(() => {
-        r();
-      }, 200);
-      return () => clearTimeout(i);
+  }, [t, e, n, s, r]);
+}, Ve = 200, Ye = (t) => {
+  const { isVisible: e, isClosing: n, onAnimationComplete: s } = t, r = P(() => e ? n ? "citadel_slideDown" : "citadel_slideUp" : "", [e, n]);
+  return I(() => {
+    if (!n || !s) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      s();
+      return;
     }
-  }, [n, r]), {
-    style: M(() => ({
-      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
+    const a = setTimeout(() => {
+      s();
+    }, Ve);
+    return () => clearTimeout(a);
+  }, [n, s]), {
+    animationClass: r
   };
-}, Xe = () => /* @__PURE__ */ m(
+}, Je = () => /* @__PURE__ */ m(
   "div",
   {
     "data-testid": "spinner",
-    className: "animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-gray-600"
+    className: "citadel-spinner"
   }
-), Qe = /^text-(xs|sm|base|lg|xl|[2-9]xl|\[[^\]]+\])$/, Se = (t) => {
+), Ee = (t) => {
   const e = t == null ? void 0 : t.trim();
   return e || void 0;
-}, Ze = (t) => {
-  const e = Se(t);
-  return e ? Qe.test(e) ? { className: e } : { style: { fontSize: e } } : {};
-}, Z = (t, e) => {
-  const n = Se(t), r = Ze(e), o = {
-    ...r.style
+}, Ge = (t) => {
+  const e = Ee(t);
+  return e ? { style: { fontSize: e } } : {};
+}, ne = (t, e) => {
+  const n = Ee(t), r = {
+    ...Ge(e).style
   };
-  return n && (o.fontFamily = n), {
-    className: r.className,
-    style: Object.keys(o).length > 0 ? o : void 0
+  return n && (r.fontFamily = n), {
+    style: Object.keys(r).length > 0 ? r : void 0
   };
-}, en = ({
+}, Qe = ({
   command: t,
   timestamp: e,
   status: n,
-  fontFamily: r,
-  fontSize: o
+  fontFamily: s,
+  fontSize: r
 }) => {
-  const s = M(
-    () => Z(r, o ?? "text-sm"),
-    [r, o]
+  const o = P(
+    () => ne(s, r ?? "0.875rem"),
+    [s, r]
   );
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ A(
     "div",
     {
-      className: `flex items-center gap-2 ${s.className ?? ""}`.trim(),
-      style: s.style,
+      className: "citadel-output-line",
+      style: o.style,
       children: [
-        /* @__PURE__ */ E("span", { className: "text-gray-200", children: [
+        /* @__PURE__ */ A("span", { className: "citadel-output-command", children: [
           "> ",
-          t.split(" ").map((i, l) => {
-            const a = i.startsWith("<") && i.endsWith(">");
-            return /* @__PURE__ */ E(
+          t.split(" ").map((a, c) => {
+            const i = a.startsWith("<") && a.endsWith(">");
+            return /* @__PURE__ */ A(
               "span",
               {
-                className: a ? "text-green-400" : "text-gray-200",
+                className: i ? "citadel-output-command-arg" : "citadel-output-command-word",
                 children: [
-                  l > 0 ? " " : "",
-                  i
+                  c > 0 ? " " : "",
+                  a
                 ]
               },
-              l
+              c
             );
           })
         ] }),
-        /* @__PURE__ */ m("span", { className: "text-gray-400", children: "·" }),
-        /* @__PURE__ */ m("span", { className: "text-gray-500", children: e }),
-        n === W.Pending && /* @__PURE__ */ m(Xe, {}),
-        n === W.Success && /* @__PURE__ */ m(
+        /* @__PURE__ */ m("span", { className: "citadel-output-separator", children: "·" }),
+        /* @__PURE__ */ m("span", { className: "citadel-output-timestamp", children: e }),
+        n === V.Pending && /* @__PURE__ */ m(Je, {}),
+        n === V.Success && /* @__PURE__ */ m(
           "div",
           {
             "data-testid": "success-indicator",
-            className: "w-4 h-4 rounded-full bg-green-500"
+            className: "citadel-status-dot citadel-status-dot-success"
           }
         ),
-        (n === W.Timeout || n === W.Failure) && /* @__PURE__ */ m(
+        (n === V.Timeout || n === V.Failure) && /* @__PURE__ */ m(
           "div",
           {
             "data-testid": "success-indicator",
-            className: "w-4 h-4 rounded-full bg-red-500"
+            className: "citadel-status-dot citadel-status-dot-failure"
           }
         )
       ]
     }
   );
-}, nn = ({ output: t, outputRef: e }) => {
-  const n = j(), r = M(
-    () => Z(n.fontFamily, n.outputFontSize ?? n.fontSize),
+}, Xe = ({ output: t, outputRef: e }) => {
+  const n = U(), s = P(
+    () => ne(n.fontFamily, n.outputFontSize ?? n.fontSize),
     [n.fontFamily, n.fontSize, n.outputFontSize]
-  ), o = v(() => {
+  ), r = f(() => {
     if (e.current) {
-      const s = e.current;
+      const o = e.current;
       requestAnimationFrame(() => {
-        s.scrollTop = s.scrollHeight;
+        o.scrollTop = o.scrollHeight;
       });
     }
   }, [e]);
-  return z(() => {
-    if (o(), e.current) {
-      const s = e.current.getElementsByTagName("img"), i = s[s.length - 1];
-      if (i && !i.complete)
-        return i.addEventListener("load", o), () => i.removeEventListener("load", o);
+  return I(() => {
+    if (r(), e.current) {
+      const o = e.current.getElementsByTagName("img"), a = o[o.length - 1];
+      if (a && !a.complete)
+        return a.addEventListener("load", r), () => a.removeEventListener("load", r);
     }
-  }, [t, o, e]), /* @__PURE__ */ m(
+  }, [t, r, e]), /* @__PURE__ */ m(
     "div",
     {
       ref: e,
-      className: "h-full overflow-y-auto border border-gray-700 rounded-lg p-3 text-left",
+      className: "citadel-output",
       "data-testid": "citadel-command-output",
-      children: t.map((s) => /* @__PURE__ */ E("div", { className: "mb-4 last:mb-0", children: [
+      children: t.map((o) => /* @__PURE__ */ A("div", { className: "citadel-output-item", children: [
         /* @__PURE__ */ m(
-          en,
+          Qe,
           {
-            command: s.command.join(" "),
-            timestamp: new Date(s.timestamp).toLocaleTimeString(),
-            status: s.result.status,
+            command: o.command.join(" "),
+            timestamp: new Date(o.timestamp).toLocaleTimeString(),
+            status: o.result.status,
             fontFamily: n.fontFamily,
             fontSize: n.fontSize
           }
         ),
         /* @__PURE__ */ m(
-          "pre",
+          "div",
           {
-            className: `text-gray-200 whitespace-pre ${r.className ?? ""}`.trim(),
-            style: r.style,
-            children: s.result.render()
+            className: "citadel-output-content",
+            style: s.style,
+            children: o.result.render()
           }
         )
-      ] }, s.id))
+      ] }, o.id))
     }
   );
-}, tn = {
+}, Ze = {
   blink: {
     character: "▋",
     speed: 530,
@@ -959,487 +966,517 @@ Check the definition of the ${a.join(".")} command and update the return type fo
     speed: 120,
     color: "#fff"
   }
-}, de = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"], me = ["|", "/", "-", "\\"], rn = ({
+}, he = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"], ge = ["|", "/", "-", "\\"], et = ({
   style: t = { type: "blink" },
   isValid: e = !0,
   errorMessage: n
 }) => {
-  const r = M(() => ({
-    ...tn[t.type],
+  const s = P(() => ({
+    ...Ze[t.type],
     ...t
-  }), [t]), [o, s] = I(!0), [i, l] = I(0);
-  z(() => {
-    if (r.speed === 0) return;
+  }), [t]), [r, o] = _(!0), [a, c] = _(0);
+  I(() => {
+    if (s.speed === 0) return;
     const g = setInterval(() => {
-      r.type === "blink" ? s((f) => !f) : ["spin", "bbs"].includes(r.type) && l((f) => (f + 1) % (r.type === "bbs" ? me.length : de.length));
-    }, r.speed);
+      s.type === "blink" ? o((u) => !u) : ["spin", "bbs"].includes(s.type) && c((u) => (u + 1) % (s.type === "bbs" ? ge.length : he.length));
+    }, s.speed);
     return () => clearInterval(g);
-  }, [r.type, r.speed]);
-  const a = M(() => ({
-    color: e ? r.color : "#ff4444",
+  }, [s.type, s.speed]);
+  const i = P(() => ({
+    color: e ? s.color : "#ff4444",
     transition: "color 0.15s ease-in-out"
-  }), [e, r.color]);
-  return /* @__PURE__ */ m("div", { className: "relative inline-block", children: /* @__PURE__ */ m(
+  }), [e, s.color]);
+  return /* @__PURE__ */ m("div", { className: "citadel-cursor-wrapper", children: /* @__PURE__ */ m(
     "span",
     {
       className: `command-cursor ${e ? "" : "animate-shake"}`,
-      style: a,
+      style: i,
       title: n,
-      children: !e && n ? "✗" : ["spin", "bbs"].includes(r.type) ? (r.type === "bbs" ? me : de)[i] : r.type === "solid" || o ? r.character : " "
+      children: !e && n ? "✗" : ["spin", "bbs"].includes(s.type) ? (s.type === "bbs" ? ge : he)[a] : s.type === "solid" || r ? s.character : " "
     }
   ) });
 };
-function on(t, e) {
+function tt(t, e) {
   switch (e.type) {
     case "set":
-      return k.debug(`[inputStateReducer] InputState changing from ${t} to ${e.state}`), e.state;
+      return b.debug(`[inputStateReducer] InputState changing from ${t} to ${e.state}`), e.state;
     default:
       return t;
   }
 }
-const sn = () => {
-  const { state: t } = ae(), e = Q(), n = Ce(), r = B(), [o, s] = Ie(on, "idle"), i = (d) => {
-    s({ type: "set", state: d });
-  }, l = v(() => {
-    const u = e.getCompletions(r.path())[0] || r.nullSegment;
-    return k.debug("[getNextExpectedSegment] ", u), u;
-  }, [e, r]), a = v(() => e.getCompletionNames(r.path()).map((u) => e.getCommand([...r.path(), u])).filter((u) => u !== void 0), [e, r]), c = v((d, u) => {
-    if (!d) return u;
-    const p = r.path().length;
-    return u.filter((R) => {
-      const C = R.segments[p];
-      return !C || C.type !== "word" ? !1 : C.name.toLowerCase().startsWith(d.toLowerCase());
+const nt = () => {
+  const { state: t } = de(), e = te(), n = ke(), s = J(), [r, o] = _e(tt, "idle"), a = (l) => {
+    o({ type: "set", state: l });
+  }, c = f(() => {
+    const p = e.getCompletions(s.path())[0] || s.nullSegment;
+    return b.debug("[getNextExpectedSegment] ", p), p;
+  }, [e, s]), i = f(() => e.getCompletionNames(s.path()).map((p) => e.getCommand([...s.path(), p])).filter((p) => p !== void 0), [e, s]), d = f((l, p) => {
+    if (!l) return p;
+    const w = s.path().length;
+    return p.filter((D) => {
+      const v = D.segments[w];
+      return !v || v.type !== "word" ? !1 : v.name.toLowerCase().startsWith(l.toLowerCase());
     });
-  }, [r]), g = v((d) => {
-    const u = e.getUniqueCompletion(r.path(), d);
-    return u && u.type === "word" ? u : r.nullSegment;
-  }, [e, r]), f = v((d) => {
-    const u = r.path(), p = e.getCompletions(u);
-    return p.length === 0 && d ? !1 : p.some((C) => C.type === "argument") ? !0 : e.getMatchingCompletions(u, d).some((C) => C.type === "word");
-  }, [e, r]), x = v((d) => {
-    k.debug("[tryAutoComplete] input: ", d);
-    const u = g(d);
-    return !u || u.type === "null" ? new se() : (k.debug("[tryAutoComplete] result: ", u), u);
-  }, [g]), w = v((d, u) => {
+  }, [s]), g = f((l) => {
+    const p = e.getUniqueCompletion(s.path(), l);
+    return p && p.type === "word" ? p : s.nullSegment;
+  }, [e, s]), u = f((l) => {
+    const p = s.path(), w = e.getCompletions(p);
+    return w.length === 0 && l ? !1 : w.some((v) => v.type === "argument") ? !0 : e.getMatchingCompletions(p, l).some((v) => v.type === "word");
+  }, [e, s]), h = f((l) => {
+    b.debug("[tryAutoComplete] input: ", l);
+    const p = g(l);
+    return !p || p.type === "null" ? new le() : (b.debug("[tryAutoComplete] result: ", p), p);
+  }, [g]), S = f((l, p) => {
     if (t.history.position !== null)
       return;
-    u.setCurrentInput(d), k.debug("[useCommandParser][handleInputChange] newValue: ", d);
-    const p = l();
-    if (p.type === "argument" || o === "entering_argument") {
-      const A = ue(d);
-      if (A.isQuoted)
-        if (A.isComplete) {
-          if (!(p instanceof $)) return;
-          p.value = d.trim() || "", k.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", p), r.push(p), u.setCurrentInput(""), i("idle");
+    p.setCurrentInput(l), b.debug("[useCommandParser][handleInputChange] newValue: ", l);
+    const w = c();
+    if (w.type === "argument" || r === "entering_argument") {
+      const H = fe(l);
+      if (H.isQuoted)
+        if (H.isComplete) {
+          if (!(w instanceof q)) return;
+          w.value = l.trim() || "", b.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", w), s.push(w), p.setCurrentInput(""), a("idle");
           return;
         } else
           return;
-      else if (A.isComplete) {
-        if (!(p instanceof $)) return;
-        p.value = d.trim() || "", k.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", p), r.push(p), u.setCurrentInput(""), i("idle");
+      else if (H.isComplete) {
+        if (!(w instanceof q)) return;
+        w.value = l.trim() || "", b.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", w), s.push(w), p.setCurrentInput(""), a("idle");
         return;
       } else
         return;
     }
-    if (d.endsWith(" ")) {
-      const A = d.trim().toLowerCase(), P = e.getCompletions(r.path()).filter(
-        (y) => y.type === "word" && y.name.toLowerCase() === A
+    if (l.endsWith(" ")) {
+      const H = l.trim().toLowerCase(), M = e.getCompletions(s.path()).filter(
+        (E) => E.type === "word" && E.name.toLowerCase() === H
       );
-      if (P.length === 1) {
-        r.push(P[0]), u.setCurrentInput(""), i("idle");
+      if (M.length === 1) {
+        s.push(M[0]), p.setCurrentInput(""), a("idle");
         return;
       }
     }
-    const C = x(d);
-    if (C.type === "word") {
-      k.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", C), r.push(C), u.setCurrentInput(""), i("idle");
+    const v = h(l);
+    if (v.type === "word") {
+      b.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", v), s.push(v), p.setCurrentInput(""), a("idle");
       return;
     }
-  }, [x, t, l, o, r, e]), h = v((d) => {
-    d.setCurrentInput(""), d.setIsEnteringArg(!1), r.clear(), i("idle");
-  }, [r]), S = v((d, u, p) => {
-    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))
+  }, [h, t, c, r, s, e]), C = f((l) => {
+    l.setCurrentInput(""), l.setIsEnteringArg(!1), s.clear(), a("idle");
+  }, [s]), k = f((l, p, w) => {
+    if (!(l.key === "Backspace" || l.key === "Enter" || l.key === "ArrowUp" || l.key === "ArrowDown" || l.key === "ArrowLeft" || l.key === "ArrowRight" || l.key === "Escape" || l.key === "Delete" || l.key === "Home" || l.key === "End" || l.key.length === 1))
       return !0;
-    const { currentInput: C, isEnteringArg: A } = u, P = ue(C);
-    switch (d.key) {
+    const { currentInput: v, isEnteringArg: H } = p, M = fe(v);
+    switch (l.key) {
       case "Backspace":
-        return C === "" && (d.preventDefault(), r.size() > 0 && r.pop(), i("idle")), !0;
+        return v === "" && (l.preventDefault(), s.size() > 0 && s.pop(), a("idle")), !0;
       case "Enter": {
-        if (d.preventDefault(), P.isQuoted && !P.isComplete)
+        if (l.preventDefault(), M.isQuoted && !M.isComplete)
           return !0;
-        if (o === "entering_argument" || A && C.trim()) {
-          const T = l();
-          T instanceof $ && (T.value = C, k.debug("[handleKeyDown][Enter]['entering_argument'] pushing: ", T), r.push(T));
+        if (r === "entering_argument" || H && v.trim()) {
+          const F = c();
+          F instanceof q && (F.value = v, b.debug("[handleKeyDown][Enter]['entering_argument'] pushing: ", F), s.push(F));
         }
-        const y = r.path(), _ = e.getCommand(y);
-        if (!_)
+        const E = s.path(), B = e.getCommand(E);
+        if (!B)
           return !1;
-        const D = _.segments.filter((T) => T.type === "argument"), K = r.arguments;
-        return D.length > K.length ? !1 : (k.debug("[handleKeyDown][Enter] calling actions.executeCommand. segmentStack: ", r), p.executeCommand(), n.addStoredCommand(r.toArray()), h(p), !0);
+        const O = B.segments.filter((F) => F.type === "argument"), W = s.arguments;
+        return O.length > W.length ? !1 : (b.debug("[handleKeyDown][Enter] calling actions.executeCommand. segmentStack: ", s), w.executeCommand(), n.addStoredCommand(s.toArray()), C(w), !0);
       }
       case "ArrowUp":
-        return d.preventDefault(), (async () => {
-          const y = await n.navigateHistory("up");
-          return y.segments && (r.clear(), r.pushAll(y.segments), p.setCurrentInput("")), !0;
+        return l.preventDefault(), (async () => {
+          const E = await n.navigateHistory("up");
+          return E.segments && (s.clear(), s.pushAll(E.segments), w.setCurrentInput("")), !0;
         })();
       case "ArrowDown":
-        return d.preventDefault(), (async () => {
-          const y = await n.navigateHistory("down");
-          return y.segments && (r.clear(), r.pushAll(y.segments), p.setCurrentInput("")), !0;
+        return l.preventDefault(), (async () => {
+          const E = await n.navigateHistory("down");
+          return E.segments && (s.clear(), s.pushAll(E.segments), w.setCurrentInput("")), !0;
         })();
       default: {
-        if (!A && d.key.length === 1) {
-          const y = C + d.key;
-          if (!f(y))
-            return d.preventDefault(), !1;
+        if (!H && l.key.length === 1) {
+          const E = v + l.key;
+          if (!u(E))
+            return l.preventDefault(), !1;
         }
         return !0;
       }
     }
   }, [
-    o,
-    f,
-    l,
+    r,
+    u,
+    c,
     n,
-    h,
+    C,
     e,
-    r
+    s
   ]);
   return {
-    handleInputChange: w,
-    handleKeyDown: S,
-    inputState: o,
-    setInputStateWithLogging: i,
+    handleInputChange: S,
+    handleKeyDown: k,
+    inputState: r,
+    setInputStateWithLogging: a,
     // Expose internal functions for testing
-    findMatchingCommands: c,
+    findMatchingCommands: d,
     getAutocompleteSuggestion: g,
-    getAvailableNodes: a,
-    getNextExpectedSegment: l,
-    isValidCommandInput: f
+    getAvailableNodes: i,
+    getNextExpectedSegment: c,
+    isValidCommandInput: u
   };
 };
-function ue(t) {
+function fe(t) {
   const e = [];
-  let n = "", r = !1, o;
-  for (let s = 0; s < t.length; s++) {
-    const i = t[s];
-    (i === '"' || i === "'") && (!r || i === o) ? r ? (e.push(n), n = "", r = !1, o = void 0) : (n && (e.push(n), n = ""), r = !0, o = i) : !r && i === " " ? n && (e.push(n), n = "") : n += i;
+  let n = "", s = !1, r;
+  for (let o = 0; o < t.length; o++) {
+    const a = t[o];
+    (a === '"' || a === "'") && (!s || a === r) ? s ? (e.push(n), n = "", s = !1, r = void 0) : (n && (e.push(n), n = ""), s = !0, r = a) : !s && a === " " ? n && (e.push(n), n = "") : n += a;
   }
   return {
     words: e,
     currentWord: n,
-    isQuoted: r,
-    quoteChar: o,
-    isComplete: !r && !n
+    isQuoted: s,
+    quoteChar: r,
+    isComplete: !s && !n
   };
 }
-const an = () => {
-  const t = B(), [e, n] = I(0);
-  return z(() => {
-    const r = {
+const st = () => {
+  const t = J(), [e, n] = _(0);
+  return I(() => {
+    const s = {
       update: () => {
-        n((o) => o + 1);
+        n((r) => r + 1);
       }
     };
-    return t.subscribe(r), () => {
-      t.unsubscribe(r);
+    return t.subscribe(s), () => {
+      t.unsubscribe(s);
     };
   }, [t]), e;
-}, ln = ({
+}, rt = ({
   state: t,
   actions: e
 }) => {
-  const n = F(null), r = Q(), o = B(), {
-    handleKeyDown: s,
-    handleInputChange: i,
-    inputState: l,
-    setInputStateWithLogging: a,
-    getNextExpectedSegment: c
-  } = sn(), [g, f] = I(!1), x = j(), w = an(), h = M(
-    () => Z(x.fontFamily, x.fontSize),
-    [x.fontFamily, x.fontSize]
-  ), S = async (y) => {
-    const _ = s(y, t, e);
-    await Promise.resolve(_) === !1 && (f(!0), setTimeout(() => f(!1), 500));
-  }, d = (y) => {
-    i(y.target.value, e);
-  }, u = (y) => {
-    y.preventDefault();
-    const _ = y.clipboardData.getData("text");
-    i(_, e);
-  };
-  z(() => {
-    n.current && n.current.focus(), l !== "entering_command" && a("entering_command");
-  }, [l, a]), z(() => {
-    if (l !== "idle") return;
-    const y = c();
-    let _ = "idle";
-    switch (y.type) {
+  const n = T(null), s = te(), r = J(), {
+    handleKeyDown: o,
+    handleInputChange: a,
+    inputState: c,
+    setInputStateWithLogging: i,
+    getNextExpectedSegment: d
+  } = nt(), [g, u] = _(!1), h = U(), S = st(), C = T(null), [k, l] = _(0), p = P(
+    () => ne(h.fontFamily, h.fontSize),
+    [h.fontFamily, h.fontSize]
+  ), w = f(async (N) => {
+    const R = o(N, t, e);
+    await Promise.resolve(R) === !1 && (u(!0), setTimeout(() => u(!1), 500));
+  }, [e, o, t]), D = f((N) => {
+    a(N.target.value, e);
+  }, [e, a]), v = f((N) => {
+    N.preventDefault();
+    const R = N.clipboardData.getData("text");
+    a(R, e);
+  }, [e, a]);
+  I(() => {
+    n.current && n.current.focus(), c !== "entering_command" && i("entering_command");
+  }, [c, i]), I(() => {
+    if (c !== "idle") return;
+    const N = d();
+    let R = "idle";
+    switch (N.type) {
       case "word":
-        _ = "entering_command", e.setIsEnteringArg(!1);
+        R = "entering_command", e.setIsEnteringArg(!1);
         break;
       case "argument":
-        _ = "entering_argument", e.setIsEnteringArg(!0);
+        R = "entering_argument", e.setIsEnteringArg(!0);
         break;
     }
-    a(_);
-  }, [w, l, c, a, e]);
-  const p = M(() => {
-    const y = [], _ = o.toArray().map((D, K) => {
-      y.push(D.name);
-      const T = r.hasNextSegment(y);
-      if (D.type === "argument") {
-        const ee = D;
-        return /* @__PURE__ */ E(L.Fragment, { children: [
-          /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: ee.value }),
-          K < o.size() && T && /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: " " })
-        ] }, "arg-" + ee.name + ee.value);
+    i(R);
+  }, [S, c, d, i, e]);
+  const H = P(() => {
+    const N = [], R = r.toArray().map((L, se) => {
+      N.push(L.name);
+      const me = s.hasNextSegment(N);
+      if (L.type === "argument") {
+        const re = L;
+        return /* @__PURE__ */ A($.Fragment, { children: [
+          /* @__PURE__ */ m("span", { className: "citadel-input-segment-arg", children: re.value }),
+          se < r.size() && me && /* @__PURE__ */ m("span", { className: "citadel-input-segment-space", children: " " })
+        ] }, "arg-" + re.name + re.value);
       }
-      return /* @__PURE__ */ E(L.Fragment, { children: [
-        /* @__PURE__ */ m("span", { className: "text-blue-400 whitespace-pre", children: D.name }),
-        K < o.size() && T && /* @__PURE__ */ m("span", { className: "text-blue-400 whitespace-pre", children: " " })
-      ] }, "word-" + D.name);
+      return /* @__PURE__ */ A($.Fragment, { children: [
+        /* @__PURE__ */ m("span", { className: "citadel-input-segment-word", children: L.name }),
+        se < r.size() && me && /* @__PURE__ */ m("span", { className: "citadel-input-segment-space citadel-input-segment-space-command", children: " " })
+      ] }, "word-" + L.name);
     });
-    return [/* @__PURE__ */ m("div", { className: "flex items-center gap-1", "data-testid": "user-input-area", children: _ }, w)];
-  }, [w, r, o]), [R, C] = I("");
-  z(() => {
-    const y = c();
-    y.type === "argument" ? C(y.name) : C("");
-  }, [w, c]);
-  const A = !t.isEnteringArg, P = t.currentInput.length;
-  return /* @__PURE__ */ E("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: subtleGlow 0.4s ease-in-out;
-        }
-      ` }),
-    /* @__PURE__ */ E(
-      "div",
-      {
-        className: `flex items-center gap-2 ${h.className ?? ""}`.trim(),
-        style: h.style,
-        children: [
-          /* @__PURE__ */ m("div", { className: "text-gray-400", children: ">" }),
-          /* @__PURE__ */ E("div", { className: "flex-1 flex items-center", children: [
-            p,
-            /* @__PURE__ */ E("div", { className: "relative flex-1", children: [
-              /* @__PURE__ */ m(
-                "input",
-                {
-                  ref: n,
-                  type: "text",
-                  role: "textbox",
-                  value: t.currentInput,
-                  onChange: d,
-                  onKeyDown: S,
-                  onPaste: u,
-                  "data-testid": "citadel-command-input",
-                  className: `w-full bg-transparent outline-none caret-transparent ${A ? "text-blue-400" : "text-gray-200"} ${g ? "invalid-input-animation" : ""}`,
-                  spellCheck: !1,
-                  autoComplete: "off",
-                  placeholder: R
-                }
-              ),
-              /* @__PURE__ */ m(
-                "div",
-                {
-                  className: "absolute top-0 pointer-events-none",
-                  style: {
-                    left: `${P}ch`,
-                    transition: "left 0.05s ease-out"
-                  },
-                  children: /* @__PURE__ */ m(
-                    rn,
-                    {
-                      style: {
-                        type: x.cursorType ?? N.cursorType,
-                        color: x.cursorColor || N.cursorColor,
-                        speed: x.cursorSpeed || N.cursorSpeed
-                      }
-                    }
-                  )
-                }
-              )
-            ] })
+    return [/* @__PURE__ */ m("div", { className: "citadel-input-segments", "data-testid": "user-input-area", children: R }, S)];
+  }, [S, s, r]), [M, E] = _("");
+  I(() => {
+    const N = d();
+    N.type === "argument" ? E(N.name) : E("");
+  }, [S, d]);
+  const O = !t.isEnteringArg ? "is-command-mode" : "is-argument-mode", W = P(
+    () => ({
+      left: `${k}px`,
+      transition: "left 0.05s ease-out"
+    }),
+    [k]
+  ), F = P(
+    () => ({
+      type: h.cursorType ?? x.cursorType,
+      color: h.cursorColor || x.cursorColor,
+      speed: h.cursorSpeed || x.cursorSpeed
+    }),
+    [h.cursorColor, h.cursorSpeed, h.cursorType]
+  );
+  return Me(() => {
+    const N = C.current, R = n.current;
+    if (!N || !R) {
+      l(0);
+      return;
+    }
+    const L = N.getBoundingClientRect().width;
+    l(Math.max(0, L - R.scrollLeft));
+  }, [t.currentInput, O, p.style]), /* @__PURE__ */ m("div", { className: "citadel-input-shell", children: /* @__PURE__ */ A(
+    "div",
+    {
+      className: "citadel-input-line",
+      style: p.style,
+      children: [
+        /* @__PURE__ */ m("div", { className: "citadel-input-prompt", children: ">" }),
+        /* @__PURE__ */ A("div", { className: "citadel-input-row", children: [
+          H,
+          /* @__PURE__ */ A("div", { className: "citadel-input-control", children: [
+            /* @__PURE__ */ m(
+              "span",
+              {
+                ref: C,
+                className: `citadel-input-measure ${O}`.trim(),
+                "aria-hidden": "true",
+                children: t.currentInput
+              }
+            ),
+            /* @__PURE__ */ m(
+              "input",
+              {
+                ref: n,
+                type: "text",
+                role: "textbox",
+                value: t.currentInput,
+                onChange: D,
+                onKeyDown: w,
+                onPaste: v,
+                "data-testid": "citadel-command-input",
+                className: `citadel-input-field ${O} ${g ? "invalid-input-animation" : ""}`.trim(),
+                spellCheck: !1,
+                autoComplete: "off",
+                placeholder: M
+              }
+            ),
+            /* @__PURE__ */ m(
+              "div",
+              {
+                className: "citadel-input-cursor",
+                style: W,
+                children: /* @__PURE__ */ m(et, { style: F })
+              }
+            )
           ] })
-        ]
-      }
-    )
-  ] });
-}, cn = ({ currentInput: t = "" }) => {
-  const e = Q(), n = j(), r = B(), o = L.useMemo(
-    () => Z(n.fontFamily, n.fontSize),
+        ] })
+      ]
+    }
+  ) });
+}, at = ({ currentInput: t = "" }) => {
+  const e = te(), n = U(), s = J(), r = $.useMemo(
+    () => ne(n.fontFamily, n.fontSize),
     [n.fontFamily, n.fontSize]
-  ), s = "mt-2 border-t border-gray-700 px-4 py-2", i = `text-gray-300 ${o.className ?? ""}`.trim(), l = t.trim().toLowerCase(), a = e.getMatchingCompletions(
-    r.path(),
-    l
+  ), o = t.trim().toLowerCase(), a = e.getMatchingCompletions(
+    s.path(),
+    o
   );
-  k.debug("[AvailableCommands] nextCommandSegments: ", a);
-  const c = L.useMemo(() => {
-    const w = [...a], h = (p) => p.name.toLowerCase() === "help", S = w.filter(h);
-    return [...w.filter((p) => !h(p)).sort(
-      (p, R) => p.name.localeCompare(R.name, void 0, { sensitivity: "base" })
+  b.debug("[AvailableCommands] nextCommandSegments: ", a);
+  const c = $.useMemo(() => {
+    const u = [...a], h = (l) => l.name.toLowerCase() === "help", S = u.filter(h);
+    return [...u.filter((l) => !h(l)).sort(
+      (l, p) => l.name.localeCompare(p.name, void 0, { sensitivity: "base" })
     ), ...S];
-  }, [a]), g = L.useMemo(() => {
-    const w = /* @__PURE__ */ new Map();
+  }, [a]), i = $.useMemo(() => {
+    const u = /* @__PURE__ */ new Map();
     for (const h of c) {
-      const S = c.reduce((d, u) => {
-        if (u === h) return d;
-        let p = 0;
-        for (; p < h.name.length && p < u.name.length && h.name[p].toLowerCase() === u.name[p].toLowerCase(); )
-          p++;
-        return Math.max(d, p + 1);
+      const S = c.reduce((C, k) => {
+        if (k === h) return C;
+        let l = 0;
+        for (; l < h.name.length && l < k.name.length && h.name[l].toLowerCase() === k.name[l].toLowerCase(); )
+          l++;
+        return Math.max(C, l + 1);
       }, 1);
-      w.set(h.name, S);
+      u.set(h.name, S);
     }
-    return w;
-  }, [c]), f = a.some((w) => w.type === "argument"), x = a[0];
-  return /* @__PURE__ */ m("div", { className: s, "data-testid": "available-commands", children: /* @__PURE__ */ m("div", { className: i, style: o.style, children: f ? a.length > 0 ? /* @__PURE__ */ E(Ae, { children: [
-    /* @__PURE__ */ m("span", { className: "text-blue-400", children: x.name }),
-    x.description && /* @__PURE__ */ E("span", { className: "text-gray-400 ml-2", children: [
+    return u;
+  }, [c]), d = a.some((u) => u.type === "argument"), g = a[0];
+  return /* @__PURE__ */ m("div", { className: "citadel-available-commands", "data-testid": "available-commands", children: /* @__PURE__ */ m("div", { className: "citadel-available-commands-content", style: r.style, children: d ? a.length > 0 ? /* @__PURE__ */ A(He, { children: [
+    /* @__PURE__ */ m("span", { className: "citadel-available-next-arg", children: g.name }),
+    g.description && /* @__PURE__ */ A("span", { className: "citadel-available-next-desc", children: [
       "- ",
-      x.description
+      g.description
     ] })
-  ] }) : null : /* @__PURE__ */ m("div", { className: "flex flex-wrap gap-2", children: c == null ? void 0 : c.map((w) => {
-    const h = g.get(w.name) ?? 1;
+  ] }) : null : /* @__PURE__ */ m("div", { className: "citadel-available-chip-list", children: c == null ? void 0 : c.map((u) => {
+    const h = i.get(u.name) ?? 1;
     return /* @__PURE__ */ m(
       "div",
       {
         "data-testid": "available-command-chip",
-        className: "px-2 py-1 rounded bg-gray-800 mr-2 last:mr-0",
-        children: /* @__PURE__ */ E("span", { className: "text-white", children: [
-          /* @__PURE__ */ m("strong", { className: "underline", children: w.name.slice(0, h) }),
-          w.name.slice(h)
+        className: "citadel-available-chip",
+        children: /* @__PURE__ */ A("span", { className: "citadel-available-chip-text", children: [
+          /* @__PURE__ */ m("strong", { className: "citadel-available-chip-prefix", children: u.name.slice(0, h) }),
+          u.name.slice(h)
         ] })
       },
-      w.name
+      u.name
     );
   }) }) }) });
-}, ke = ({
+}, Ne = ({
   state: t,
   actions: e,
   outputRef: n
 }) => {
-  const o = j().displayMode === "inline";
-  return /* @__PURE__ */ E("div", { className: "innerContainer", children: [
+  const r = U().displayMode === "inline", o = $.useMemo(
+    () => r ? { overflow: "hidden" } : void 0,
+    [r]
+  );
+  return /* @__PURE__ */ A("div", { className: "innerContainer citadel-tty", children: [
     /* @__PURE__ */ m(
       "div",
       {
-        className: "flex-1 min-h-0 pt-3 px-4",
+        className: "citadel-tty-output-pane",
         "data-testid": "citadel-output-pane",
-        style: o ? { overflow: "hidden" } : void 0,
-        children: /* @__PURE__ */ m(nn, { output: t.output, outputRef: n })
+        style: o,
+        children: /* @__PURE__ */ m(Xe, { output: t.output, outputRef: n })
       }
     ),
-    /* @__PURE__ */ E("div", { className: "shrink-0", children: [
-      /* @__PURE__ */ m(ln, { state: t, actions: e }),
-      /* @__PURE__ */ m(cn, { currentInput: t.isEnteringArg ? "" : t.currentInput })
+    /* @__PURE__ */ A("div", { className: "citadel-tty-input-region", children: [
+      /* @__PURE__ */ m(rt, { state: t, actions: e }),
+      /* @__PURE__ */ m(at, { currentInput: t.isEnteringArg ? "" : t.currentInput })
     ] })
   ] });
-}, dn = () => {
-  const [t, e] = I(!1), [n, r] = I(!1), o = j(), [s, i] = I(() => o.initialHeight || null), l = F(null), a = F(null), c = F(!1), g = F(0), f = F(0), { state: x, actions: w } = ae();
-  Oe({
-    onOpen: () => e(!0),
-    onClose: () => r(!0),
-    isVisible: t,
-    showCitadelKey: o.showCitadelKey || "."
+}, ot = () => {
+  const t = U(), [e, n] = _(() => t.showOnLoad ?? !1), [s, r] = _(!1), [o, a] = _(() => t.initialHeight || null), c = T(null), i = T(null), d = T(!1), g = T(0), u = T(0), { state: h, actions: S } = de(), C = f(() => {
+    r(!1), n(!0);
+  }, []), k = f(() => {
+    r(!0);
+  }, []);
+  Be({
+    onOpen: C,
+    onClose: k,
+    isVisible: e && !s,
+    showCitadelKey: t.showCitadelKey || ".",
+    closeOnEscape: t.closeOnEscape ?? !0
   });
-  const h = v((p) => {
-    var P;
-    if (!c.current) return;
-    const R = p.clientY - g.current, C = (P = o.maxHeight) != null && P.endsWith("vh") ? window.innerHeight * parseInt(o.maxHeight, 10) / 100 : parseInt(o.maxHeight || "80vh", 10), A = Math.min(
-      Math.max(f.current - R, parseInt(o.minHeight || "200", 10)),
-      C
+  const l = f((M) => {
+    var W;
+    if (!d.current) return;
+    const E = M.clientY - g.current, B = (W = t.maxHeight) != null && W.endsWith("vh") ? window.innerHeight * parseInt(t.maxHeight, 10) / 100 : parseInt(t.maxHeight || "80vh", 10), O = Math.min(
+      Math.max(u.current - E, parseInt(t.minHeight || "200", 10)),
+      B
     );
-    a.current && (a.current.style.height = `${A}px`, a.current.style.bottom = "0", i(`${A}px`));
-  }, [o.maxHeight, o.minHeight]), S = v(() => {
-    c.current = !1, document.documentElement.style.userSelect = "", document.documentElement.style.webkitUserSelect = "", document.documentElement.style.mozUserSelect = "", document.documentElement.style.msUserSelect = "", document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", S);
-  }, [h]), d = v((p) => {
-    a.current && (c.current = !0, g.current = p.clientY, f.current = a.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", h), document.addEventListener("mouseup", S));
-  }, [h, S]);
-  z(() => () => {
-    document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", S);
-  }, [h, S]);
-  const u = v(() => {
-    n && (e(!1), r(!1));
-  }, [n]);
-  return Je({
-    isVisible: t,
-    isClosing: n,
-    onAnimationComplete: u
-  }), t ? /* @__PURE__ */ E(
+    i.current && (i.current.style.height = `${O}px`, i.current.style.bottom = "0", a(`${O}px`));
+  }, [t.maxHeight, t.minHeight]), p = f(() => {
+    d.current = !1, document.documentElement.style.userSelect = "", document.documentElement.style.webkitUserSelect = "", document.documentElement.style.mozUserSelect = "", document.documentElement.style.msUserSelect = "", document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", p);
+  }, [l]), w = f((M) => {
+    i.current && (d.current = !0, g.current = M.clientY, u.current = i.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", l), document.addEventListener("mouseup", p));
+  }, [l, p]);
+  I(() => () => {
+    document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", p);
+  }, [l, p]);
+  const D = f(() => {
+    s && (n(!1), r(!1));
+  }, [s]), { animationClass: v } = Ye({
+    isVisible: e,
+    isClosing: s,
+    onAnimationComplete: D
+  }), H = P(
+    () => ({
+      ...o ? { height: o } : {},
+      maxHeight: t.maxHeight
+    }),
+    [t.maxHeight, o]
+  );
+  return e ? /* @__PURE__ */ A(
     "div",
     {
-      ref: a,
-      className: `panelContainer ${t ? "citadel_slideUp" : ""} ${n ? "citadel_slideDown" : ""}`,
-      style: {
-        ...s ? { height: s } : void 0,
-        maxHeight: o.maxHeight
-      },
+      ref: i,
+      className: `panelContainer ${v}`.trim(),
+      style: H,
       children: [
-        /* @__PURE__ */ m("div", { className: "resizeHandle", onMouseDown: d }),
+        /* @__PURE__ */ m("div", { className: "resizeHandle", onMouseDown: w }),
         /* @__PURE__ */ m(
-          ke,
+          Ne,
           {
-            state: x,
-            actions: w,
-            outputRef: l
+            state: h,
+            actions: S,
+            outputRef: c
           }
         )
       ]
     }
   ) : null;
-}, ne = (t) => {
+}, ae = (t) => {
   if (!t) return;
   const e = t.trim();
   if (e)
     return /^\d+(\.\d+)?$/.test(e) ? `${e}px` : e;
-}, mn = () => {
-  const { state: t, actions: e } = ae(), n = j(), r = F(null);
+}, it = () => {
+  const { state: t, actions: e } = de(), n = U(), s = T(null), r = P(
+    () => ({
+      height: ae(n.initialHeight),
+      maxHeight: ae(n.maxHeight),
+      minHeight: ae(n.minHeight)
+    }),
+    [n.initialHeight, n.maxHeight, n.minHeight]
+  );
   return /* @__PURE__ */ m(
     "div",
     {
       className: "inlineContainer",
       "data-testid": "citadel-inline-container",
-      style: {
-        height: ne(n.initialHeight),
-        maxHeight: ne(n.maxHeight),
-        minHeight: ne(n.minHeight)
-      },
+      style: r,
       children: /* @__PURE__ */ m(
-        ke,
+        Ne,
         {
           state: t,
           actions: e,
-          outputRef: r
+          outputRef: s
         }
       )
     }
   );
-}, pe = `:host {
-  --citadel-bg: rgb(17, 24, 39);
-  --citadel-text: rgba(255, 255, 255, 0.87);
-  --citadel-border: rgb(55, 65, 81);
-  --citadel-accent: #646cff;
-  --citadel-accent-hover: #535bf2;
+}, ye = `:host {
+  --citadel-bg: oklch(20.8% 0.042 265.8);
+  --citadel-surface: oklch(27.9% 0.041 260);
+  --citadel-border: oklch(37.2% 0.044 257.3);
+  --citadel-text: oklch(92.8% 0.006 264.5);
+  --citadel-muted: oklch(70.7% 0.022 261.3);
+  --citadel-subtle: oklch(55.1% 0.023 264.4);
+  --citadel-word: oklch(70.7% 0.165 254.6);
+  --citadel-arg: oklch(72.3% 0.219 149.6);
+  --citadel-error: oklch(70.4% 0.191 22.2);
+  --citadel-success: oklch(72.3% 0.219 149.6);
   --citadel-min-height: 200px;
   --citadel-max-height: 80vh;
   --citadel-default-height: 35vh;
-  --citadel-error: rgb(239, 68, 68);
+  --citadel-panel-enter-duration: 200ms;
+  --citadel-panel-exit-duration: 200ms;
+  --citadel-panel-enter-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --citadel-panel-exit-easing: cubic-bezier(0.4, 0, 1, 1);
 
   display: block;
   pointer-events: auto;
+  color: var(--citadel-text);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-:host([data-display-mode="panel"]) {
+:host([data-display-mode='panel']) {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -1448,11 +1485,11 @@ const an = () => {
   height: var(--citadel-default-height);
   max-height: var(--citadel-max-height);
   min-height: var(--citadel-min-height);
-  z-index: 2147483647; /* Maximum z-index value */
+  z-index: 2147483647;
   overflow: hidden;
 }
 
-:host([data-display-mode="inline"]) {
+:host([data-display-mode='inline']) {
   position: relative;
   bottom: auto;
   left: auto;
@@ -1465,135 +1502,110 @@ const an = () => {
   overflow: hidden;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: var(--citadel-accent);
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-a {
-  font-weight: 500;
-  color: var(--citadel-accent);
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: var(--citadel-accent-hover);
-}
-
-.flex-1 { flex: 1 1 0%; }
-.flex-shrink-0 { flex-shrink: 0; }
-.min-h-0 { min-height: 0px; }
-.pt-3 { padding-top: 0.75rem; }
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-
-.h-full {
+#citadel-root {
+  width: 100%;
   height: 100%;
 }
-.overflow-y-auto {
-  overflow-y: auto;
-}
-.border {
-  border-width: 1px;
-}
-.border-gray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
-}
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-.p-3 {
-  padding: 0.75rem;
-}
-.text-left {
-  text-align: left;
+
+#citadel-root,
+#citadel-root * {
+  box-sizing: border-box;
 }
-`, he = `/* Keep only component-specific styles here */
 
 .panelContainer {
   position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
   height: var(--citadel-default-height);
   min-height: var(--citadel-min-height);
   max-height: var(--citadel-max-height);
-  background-color: var(--citadel-bg);
-  overflow: hidden;
-  width: 100%;
-  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  background-color: var(--citadel-bg);
+  overflow: hidden;
+  transform: translateY(0);
+  will-change: transform;
 }
 
 .innerContainer {
-  height: 100%;
-  flex: 1;
   width: 100%;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
   margin: 0;
   padding: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
 }
 
-.inputSection {
-  border-top: 1px solid var(--citadel-border);
-  padding: 1rem;
-  margin: 0;
-  box-sizing: border-box;
+.citadel-tty {
+  background: var(--citadel-bg);
+}
+
+.citadel-tty-output-pane {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0.75rem 1rem 0;
+}
+
+.citadel-tty-input-region {
+  flex-shrink: 0;
 }
 
 .resizeHandle {
-  width: 100%;
-  height: 6px;
-  background: transparent;
-  cursor: ns-resize;
   position: absolute;
   top: -3px;
   left: 0;
   right: 0;
   z-index: 10;
+  width: 100%;
+  height: 6px;
+  background: transparent;
+  cursor: ns-resize;
   user-select: none;
   -webkit-user-select: none;
   pointer-events: all;
 }
 
 .resizeHandle:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: color-mix(in oklch, var(--citadel-text) 10%, transparent);
 }
 
 @keyframes citadel_slideUp {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
 }
 
 @keyframes citadel_slideDown {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
 }
 
 .citadel_slideUp {
-  animation: citadel_slideUp 0.2s ease-out forwards;
+  animation: citadel_slideUp var(--citadel-panel-enter-duration) var(--citadel-panel-enter-easing) forwards;
 }
 
 .citadel_slideDown {
-  animation: citadel_slideDown 0.2s ease-out forwards;
+  animation: citadel_slideDown var(--citadel-panel-exit-duration) var(--citadel-panel-exit-easing) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --citadel-panel-enter-duration: 1ms;
+    --citadel-panel-exit-duration: 1ms;
+  }
 }
 
 .inlineContainer {
@@ -1604,882 +1616,364 @@ a:hover {
   flex-direction: column;
   background-color: var(--citadel-bg);
   overflow: hidden;
-  box-sizing: border-box;
-}
-`, ge = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`, un = `*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}/*
-! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
-*//*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured \`sans\` font-family by default.
-5. Use the user's configured \`sans\` font-feature-settings by default.
-6. Use the user's configured \`sans\` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  -o-tab-size: 4;
-     tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
-  font-feature-settings: normal; /* 5 */
-  font-variation-settings: normal; /* 6 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
-*/
-
-body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
 }
 
-/*
-1. Use the user's configured \`mono\` font-family by default.
-2. Use the user's configured \`mono\` font-feature-settings by default.
-3. Use the user's configured \`mono\` font-variation-settings by default.
-4. Correct the odd \`em\` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-feature-settings: normal; /* 2 */
-  font-variation-settings: normal; /* 3 */
-  font-size: 1em; /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
+.citadel-output {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0.75rem;
+  border: 1px solid var(--citadel-border);
+  border-radius: 0.5rem;
+  background: color-mix(in oklch, var(--citadel-bg) 75%, black);
+  text-align: left;
 }
 
-/*
-Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+.citadel-output-item {
+  margin-bottom: 1rem;
 }
 
-sub {
-  bottom: -0.25em;
+.citadel-output-item:last-child {
+  margin-bottom: 0;
 }
 
-sup {
-  top: -0.5em;
+.citadel-output-content {
+  margin-top: 0.35rem;
+  color: var(--citadel-text);
 }
 
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
+.citadel-output-content > :first-child {
+  margin-top: 0;
 }
 
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
+.citadel-output-content > :last-child {
+  margin-bottom: 0;
 }
 
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
+.citadel-output-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
+.citadel-output-command,
+.citadel-output-command-word {
+  color: var(--citadel-text);
 }
 
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
+.citadel-output-command-arg {
+  color: var(--citadel-arg);
 }
 
-/*
-Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
+.citadel-output-separator {
+  color: var(--citadel-muted);
+}
 
-:-moz-ui-invalid {
-  box-shadow: none;
+.citadel-output-timestamp {
+  color: var(--citadel-subtle);
 }
 
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
+.citadel-status-dot {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 999px;
+}
 
-progress {
-  vertical-align: baseline;
+.citadel-status-dot-success {
+  background: var(--citadel-success);
 }
 
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
+.citadel-status-dot-failure {
+  background: var(--citadel-error);
+}
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
+.citadel-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid color-mix(in oklch, var(--citadel-text) 60%, transparent);
+  border-top-color: color-mix(in oklch, var(--citadel-muted) 80%, black);
+  border-radius: 999px;
+  animation: citadel-spin 0.9s linear infinite;
 }
 
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
+@keyframes citadel-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+.citadel-input-shell {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--citadel-bg);
 }
 
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
+.citadel-input-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 
-::-webkit-search-decoration {
-  -webkit-appearance: none;
+.citadel-input-prompt {
+  color: var(--citadel-muted);
 }
 
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to \`inherit\` in Safari.
-*/
+.citadel-input-row {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
 
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+.citadel-input-segments {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
-/*
-Add the correct display in Chrome and Safari.
-*/
+.citadel-input-segment-arg {
+  color: var(--citadel-text);
+  white-space: pre;
+}
 
-summary {
-  display: list-item;
+.citadel-input-segment-word {
+  color: var(--citadel-word);
+  white-space: pre;
 }
 
-/*
-Removes the default spacing and border for appropriate elements.
-*/
+.citadel-input-segment-space {
+  color: var(--citadel-text);
+  white-space: pre;
+}
 
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
+.citadel-input-segment-space-command {
+  color: var(--citadel-word);
 }
 
-fieldset {
-  margin: 0;
-  padding: 0;
+.citadel-input-control {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
-legend {
-  padding: 0;
+.citadel-input-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: pre;
+  font: inherit;
+  letter-spacing: inherit;
 }
 
-ol,
-ul,
-menu {
-  list-style: none;
+.citadel-input-field {
+  width: 100%;
   margin: 0;
   padding: 0;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  caret-color: transparent;
 }
 
-/*
-Reset default styling for dialogs.
-*/
-dialog {
-  padding: 0;
+.citadel-input-field::placeholder {
+  color: var(--citadel-subtle);
+  opacity: 1;
 }
 
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
+.citadel-input-field.is-command-mode {
+  color: var(--citadel-word);
 }
 
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
+.citadel-input-field.is-argument-mode {
+  color: var(--citadel-text);
 }
 
-input::placeholder,
-textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
+.citadel-input-cursor {
+  position: absolute;
+  top: 0;
+  pointer-events: none;
 }
 
-/*
-Set the default cursor for buttons.
-*/
+@keyframes citadel-invalid-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 color-mix(in oklch, var(--citadel-error) 0%, transparent);
+  }
 
-button,
-[role="button"] {
-  cursor: pointer;
+  50% {
+    box-shadow: 0 0 8px color-mix(in oklch, var(--citadel-error) 70%, transparent);
+  }
 }
 
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-:disabled {
-  cursor: default;
+.invalid-input-animation {
+  animation: citadel-invalid-glow 0.4s ease-in-out;
 }
 
-/*
-1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
+.citadel-cursor-wrapper {
+  position: relative;
+  display: inline-block;
+}
 
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
+.command-cursor {
+  display: inline-block;
+  white-space: pre;
 }
 
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
+@keyframes citadel-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
 
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
+  25% {
+    transform: translateX(-4px);
+  }
 
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden]:where(:not([hidden="until-found"])) {
-  display: none;
-}
-.container {
-  width: 100%;
-}
-.pointer-events-none {
-  pointer-events: none;
-}
-.visible {
-  visibility: visible;
-}
-.static {
-  position: static;
-}
-.fixed {
-  position: fixed;
-}
-.absolute {
-  position: absolute;
-}
-.relative {
-  position: relative;
-}
-.top-0 {
-  top: 0px;
-}
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.mb-4 {
-  margin-bottom: 1rem;
-}
-.ml-2 {
-  margin-left: 0.5rem;
-}
-.mr-2 {
-  margin-right: 0.5rem;
+  75% {
+    transform: translateX(4px);
+  }
 }
-.mt-1 {
-  margin-top: 0.25rem;
+
+.animate-shake {
+  animation: citadel-shake 0.2s ease-in-out;
 }
-.mt-2 {
+
+.citadel-available-commands {
   margin-top: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--citadel-border);
 }
-.block {
-  display: block;
-}
-.inline-block {
-  display: inline-block;
-}
-.flex {
-  display: flex;
-}
-.hidden {
-  display: none;
-}
-.h-12 {
-  height: 3rem;
-}
-.h-4 {
-  height: 1rem;
-}
-.h-auto {
-  height: auto;
-}
-.h-full {
-  height: 100%;
-}
-.max-h-\\[300px\\] {
-  max-height: 300px;
-}
-.min-h-0 {
-  min-height: 0px;
-}
-.min-h-screen {
-  min-height: 100vh;
-}
-.w-4 {
-  width: 1rem;
-}
-.w-full {
-  width: 100%;
-}
-.max-w-\\[400px\\] {
-  max-width: 400px;
-}
-.flex-1 {
-  flex: 1 1 0%;
-}
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-@keyframes spin {
 
-  to {
-    transform: rotate(360deg);
-  }
-}
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-.flex-col {
-  flex-direction: column;
+.citadel-available-commands-content {
+  color: var(--citadel-muted);
 }
-.flex-wrap {
+
+.citadel-available-chip-list {
+  display: flex;
   flex-wrap: wrap;
-}
-.items-center {
-  align-items: center;
-}
-.justify-center {
-  justify-content: center;
-}
-.gap-2 {
   gap: 0.5rem;
 }
-.overflow-y-auto {
-  overflow-y: auto;
-}
-.whitespace-pre {
-  white-space: pre;
-}
-.rounded {
-  border-radius: 0.25rem;
-}
-.rounded-full {
-  border-radius: 9999px;
-}
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-.border {
-  border-width: 1px;
-}
-.border-2 {
-  border-width: 2px;
-}
-.border-t {
-  border-top-width: 1px;
-}
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
-}
-.border-gray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
-}
-.border-t-gray-600 {
-  --tw-border-opacity: 1;
-  border-top-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
-}
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-.bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
-}
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
-}
-.bg-green-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
-}
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
-}
-.bg-transparent {
-  background-color: transparent;
-}
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-.p-3 {
-  padding: 0.75rem;
-}
-.p-4 {
-  padding: 1rem;
-}
-.p-6 {
-  padding: 1.5rem;
-}
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-.pt-2 {
-  padding-top: 0.5rem;
-}
-.pt-3 {
-  padding-top: 0.75rem;
-}
-.text-left {
-  text-align: left;
-}
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
-}
-.text-gray-200 {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
-}
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
-}
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
-}
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
-}
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
-}
-.text-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
-}
-.text-red-400 {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
-}
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+
+.citadel-available-chip {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  background: var(--citadel-surface);
 }
-.underline {
-  text-decoration-line: underline;
+
+.citadel-available-chip-text {
+  color: white;
 }
-.caret-transparent {
-  caret-color: transparent;
+
+.citadel-available-chip-prefix {
+  text-decoration: underline;
 }
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+.citadel-available-next-arg {
+  color: var(--citadel-word);
 }
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+.citadel-available-next-desc {
+  margin-left: 0.5rem;
+  color: var(--citadel-muted);
 }
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+
+.citadel-result-json,
+.citadel-result-text {
+  color: var(--citadel-text);
 }
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+
+.citadel-result-json {
+  margin: 0;
 }
-.transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+
+.citadel-result-text {
+  white-space: pre;
 }
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+.citadel-result-error {
+  margin-top: 0.25rem;
+  color: var(--citadel-error);
 }
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+.citadel-result-pending {
+  color: var(--citadel-muted);
 }
-.last\\:mb-0:last-child {
-  margin-bottom: 0px;
+
+.citadel-result-image-wrap {
+  margin-block: 0.5rem;
 }
-.last\\:mr-0:last-child {
-  margin-right: 0px;
+
+.citadel-result-image {
+  max-width: 400px;
+  max-height: 300px;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
 }
-`, En = ({
-  config: t = N,
+`, vt = ({
+  config: t = x,
   commandRegistry: e,
   containerId: n = null
 }) => {
-  const r = F(new X()), o = e ?? r.current, s = F(null), i = t.displayMode ?? N.displayMode ?? "panel";
-  return z(() => {
-    k.configure({
-      level: t.logLevel || N.logLevel || re.ERROR,
+  const s = T(new ee()), r = e ?? s.current, o = T(null), a = P(() => ({ width: "100%", height: "100%" }), []), c = t.displayMode ?? x.displayMode ?? "panel";
+  return I(() => {
+    b.configure({
+      level: t.logLevel || x.logLevel || ie.ERROR,
       prefix: "[Citadel]"
     });
-    const l = new Ee(o, t), a = i === "inline" && !n, c = a ? s.current : n ? document.getElementById(n) : document.body;
-    if (c)
-      c.appendChild(l);
+    const i = new Ae(r, t), d = c === "inline" && !n, g = d ? o.current : n ? document.getElementById(n) : document.body;
+    if (g)
+      g.appendChild(i);
     else {
-      if (a) {
+      if (d) {
         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(l);
+      console.warn(`Container with id "${n}" not found, falling back to body`), document.body.appendChild(i);
     }
     return () => {
-      var g;
-      (g = l.parentElement) == null || g.removeChild(l);
+      var u;
+      (u = i.parentElement) == null || u.removeChild(i);
     };
-  }, [o, n, t, i]), i === "inline" && !n ? /* @__PURE__ */ m("div", { ref: s, style: { width: "100%", height: "100%" } }) : null;
+  }, [r, n, t, c]), c === "inline" && !n ? /* @__PURE__ */ m("div", { ref: o, style: a }) : null;
 };
-class Ee extends HTMLElement {
-  constructor(n, r) {
-    var s;
+class Ae extends HTMLElement {
+  constructor(n, s) {
+    var o;
     super();
-    b(this, "shadow");
-    b(this, "root", null);
-    b(this, "commandRegistry");
-    b(this, "config");
-    this.shadow = this.attachShadow({ mode: "open" }), this.commandRegistry = n, this.config = r;
-    const o = ((s = this.config) == null ? void 0 : s.displayMode) ?? "panel";
-    this.setAttribute("data-display-mode", o);
+    y(this, "shadow");
+    y(this, "root", null);
+    y(this, "commandRegistry");
+    y(this, "config");
+    this.shadow = this.attachShadow({ mode: "open" }), this.commandRegistry = n, this.config = s;
+    const r = ((o = this.config) == null ? void 0 : o.displayMode) ?? "panel";
+    this.setAttribute("data-display-mode", r);
   }
   connectedCallback() {
     try {
-      const r = [pe, he, ge, un].map((o) => {
-        const s = new CSSStyleSheet();
-        return s.replaceSync(o), s;
+      const s = [ye].map((r) => {
+        const o = new CSSStyleSheet();
+        return o.replaceSync(r), o;
       });
-      this.shadow.adoptedStyleSheets = [...r];
+      this.shadow.adoptedStyleSheets = [...s];
     } catch {
-      const r = [pe, he, ge].join(`
-`), o = document.createElement("style");
-      o.textContent = r, this.shadow.appendChild(o);
+      const s = [ye].join(`
+`), r = document.createElement("style");
+      r.textContent = s, this.shadow.appendChild(r);
     }
     const n = document.createElement("div");
-    n.id = "citadel-root", n.style.width = "100%", n.style.height = "100%", this.shadow.appendChild(n), this.root = Re(n), this.root.render(
-      /* @__PURE__ */ m(Le, { config: this.config || N, commandRegistry: this.commandRegistry, children: /* @__PURE__ */ m(pn, {}) })
+    n.id = "citadel-root", n.style.width = "100%", n.style.height = "100%", this.shadow.appendChild(n), this.root = Te(n), this.root.render(
+      /* @__PURE__ */ m(We, { config: this.config || x, commandRegistry: this.commandRegistry, children: /* @__PURE__ */ m(ct, {}) })
     );
   }
   disconnectedCallback() {
@@ -2493,11 +1987,11 @@ class Ee extends HTMLElement {
     });
   }
 }
-typeof window < "u" && window.customElements && !window.customElements.get("citadel-element") && window.customElements.define("citadel-element", Ee);
-const pn = () => (j().displayMode ?? "panel") === "inline" ? /* @__PURE__ */ m(mn, {}) : /* @__PURE__ */ m(dn, {});
-class hn {
+typeof window < "u" && window.customElements && !window.customElements.get("citadel-element") && window.customElements.define("citadel-element", Ae);
+const ct = () => (U().displayMode ?? "panel") === "inline" ? /* @__PURE__ */ m(it, {}) : /* @__PURE__ */ m(ot, {});
+class lt {
   constructor() {
-    b(this, "_description");
+    y(this, "_description");
   }
   describe(e) {
     return this._description = e, this;
@@ -2506,13 +2000,13 @@ class hn {
     return this._description;
   }
 }
-class gn {
+class dt {
   constructor(e) {
-    b(this, "state");
+    y(this, "state");
     this.state = {
       path: e,
       description: "",
-      segments: fn(e)
+      segments: mt(e)
     };
   }
   describe(e) {
@@ -2522,11 +2016,11 @@ class gn {
     return this.state.details = e, this;
   }
   arg(e, n) {
-    const r = new hn();
-    return n == null || n(r), this.state.segments.push({
+    const s = new lt();
+    return n == null || n(s), this.state.segments.push({
       type: "argument",
       name: e,
-      description: r.description
+      description: s.description
     }), this;
   }
   handle(e) {
@@ -2539,85 +2033,90 @@ class gn {
     };
   }
 }
-function fn(t) {
+function mt(t) {
   const e = t.trim();
   if (!e)
     throw new Error("Command path cannot be empty");
   const n = e.split(".");
-  if (n.some((r) => r.trim() === ""))
+  if (n.some((s) => s.trim() === ""))
     throw new Error(`Invalid command path "${t}". Empty segments are not allowed.`);
-  if (n.some((r) => r.includes(" ")))
+  if (n.some((s) => s.includes(" ")))
     throw new Error(
       `Invalid command path "${t}". Use dot-delimited words (e.g. "user.show").`
     );
-  return n.map((r) => ({
+  return n.map((s) => ({
     type: "word",
-    name: r
+    name: s
   }));
 }
-function wn(t) {
+function ut(t) {
   return t.flatMap((e) => e.type === "argument" ? [e.name] : []);
 }
-function yn(t) {
-  const e = wn(t.segments);
+function pt(t) {
+  const e = ut(t.segments);
   return async (n) => {
-    const r = e.reduce((o, s, i) => (o[s] = n[i], o), {});
+    const s = e.reduce((r, o, a) => (r[o] = n[a], r), {});
     return Promise.resolve(
       t.handler({
         rawArgs: n,
-        namedArgs: r,
+        namedArgs: s,
         commandPath: t.path
       })
     );
   };
 }
-function Nn(t) {
-  return new gn(t);
+function St(t) {
+  return new dt(t);
 }
-function bn(t, e) {
+function ht(t, e) {
   t.addCommand(
     e.segments,
     e.description,
-    yn(e)
+    pt(e)
   );
 }
-function xn(t, e) {
-  return e.forEach((n) => bn(t, n)), t;
+function gt(t, e) {
+  return e.forEach((n) => ht(t, n)), t;
+}
+function xt(t) {
+  const e = new ee();
+  return gt(e, t);
 }
-function zn(t) {
-  const e = new X();
-  return xn(e, t);
+function bt(t) {
+  return new G(t);
 }
-function An(t) {
-  return new Y(t);
+function kt(t, e = "true", n = "false") {
+  return new De(t, e, n);
 }
-function _n(t) {
-  return new Pe(t);
+function Et(t) {
+  return new ze(t);
 }
-function In(t, e = "") {
-  return new Me(t, e);
+function Nt(t, e = "") {
+  return new Fe(t, e);
 }
-function Rn(t) {
-  return new fe(t);
+function At(t) {
+  return new we(t);
 }
 export {
-  En as Citadel,
-  X as CommandRegistry,
-  O as CommandResult,
-  W as CommandStatus,
-  tn as DEFAULT_CURSOR_CONFIGS,
-  fe as ErrorCommandResult,
-  Me as ImageCommandResult,
-  Pe as JsonCommandResult,
-  te as OutputItem,
-  He as PendingCommandResult,
-  Y as TextCommandResult,
-  Nn as command,
-  zn as createCommandRegistry,
-  Rn as error,
-  In as image,
-  _n as json,
-  bn as registerCommand,
-  xn as registerCommands,
-  An as text
+  De as BooleanCommandResult,
+  vt as Citadel,
+  ee as CommandRegistry,
+  K as CommandResult,
+  V as CommandStatus,
+  Ze as DEFAULT_CURSOR_CONFIGS,
+  we as ErrorCommandResult,
+  Fe as ImageCommandResult,
+  ze as JsonCommandResult,
+  oe as OutputItem,
+  Oe as PendingCommandResult,
+  G as TextCommandResult,
+  kt as bool,
+  St as command,
+  xt as createCommandRegistry,
+  At as error,
+  Nt as image,
+  Et as json,
+  ht as registerCommand,
+  gt as registerCommands,
+  bt as text
 };