wepscli 0.1.0

package/dist/WEPSCLI-shell/components.js

@@ -0,0 +1,850 @@
+import { use as _$use } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { useKeyboard } from "@opentui/solid";
+import { For, Show, createEffect, createMemo, createSignal } from "solid-js";
+import { getSlashCommands } from "./slash-commands.js";
+import { wepscliShellTheme as theme } from "./theme.js";
+export function HeaderBar(props) {
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("box"),
+      _el$3 = _$createElement("text"),
+      _el$5 = _$createElement("text"),
+      _el$7 = _$createElement("box");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$7);
+    _$setProp(_el$, "flexShrink", 0);
+    _$setProp(_el$, "paddingLeft", 2);
+    _$setProp(_el$, "paddingRight", 2);
+    _$setProp(_el$, "paddingTop", 1);
+    _$setProp(_el$, "paddingBottom", 1);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "gap", 1);
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$5);
+    _$setProp(_el$2, "flexDirection", "row");
+    _$setProp(_el$2, "justifyContent", "space-between");
+    _$insertNode(_el$3, _$createTextNode(`WEPSCLI-SHELL`));
+    _$insertNode(_el$5, _$createTextNode(`Tab focus | h home | p providers | m models | s sessions`));
+    _$setProp(_el$7, "flexDirection", "row");
+    _$setProp(_el$7, "gap", 1);
+    _$insert(_el$7, _$createComponent(HeaderChip, {
+      label: "Home",
+      get tone() {
+        return props.activeView === "home" ? "accent" : "muted";
+      },
+      onClick: () => props.onNavigate("home")
+    }), null);
+    _$insert(_el$7, _$createComponent(HeaderChip, {
+      label: "Providers",
+      get tone() {
+        return props.activeView === "providers" ? "accent" : "muted";
+      },
+      onClick: () => props.onNavigate("providers")
+    }), null);
+    _$insert(_el$7, _$createComponent(HeaderChip, {
+      label: "History",
+      get tone() {
+        return props.activeView === "history" ? "accent" : "muted";
+      },
+      onClick: () => props.onNavigate("history")
+    }), null);
+    _$insert(_el$7, _$createComponent(HeaderSpacer, {}), null);
+    _$insert(_el$7, _$createComponent(HeaderChip, {
+      label: "New Session",
+      tone: "accent",
+      onClick: () => props.onAction("session:new")
+    }), null);
+    _$insert(_el$7, _$createComponent(HeaderChip, {
+      get label() {
+        return `Provider ${props.providerLabel}`;
+      },
+      tone: "accent",
+      onClick: () => props.onAction("overlay:provider")
+    }), null);
+    _$insert(_el$7, _$createComponent(HeaderChip, {
+      get label() {
+        return `Model ${props.modelLabel}`;
+      },
+      tone: "muted",
+      onClick: () => props.onAction("overlay:model")
+    }), null);
+    _$insert(_el$7, _$createComponent(HeaderChip, {
+      label: "Sessions",
+      tone: "muted",
+      onClick: () => props.onAction("overlay:session")
+    }), null);
+    _$effect(_p$ => {
+      var _v$ = theme.header,
+        _v$2 = theme.accentStrong,
+        _v$3 = theme.muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "backgroundColor", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$3, "fg", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$5, "fg", _v$3, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+}
+export function MainPanel(props) {
+  return (() => {
+    var _el$8 = _$createElement("box"),
+      _el$9 = _$createElement("text"),
+      _el$0 = _$createTextNode(`Workspace [`),
+      _el$1 = _$createTextNode(`]`),
+      _el$10 = _$createElement("text"),
+      _el$11 = _$createElement("scrollbox"),
+      _el$12 = _$createElement("box"),
+      _el$13 = _$createElement("box"),
+      _el$14 = _$createElement("text");
+    _$insertNode(_el$8, _el$9);
+    _$insertNode(_el$8, _el$10);
+    _$insertNode(_el$8, _el$11);
+    _$setProp(_el$8, "flexGrow", 1);
+    _$setProp(_el$8, "minWidth", 0);
+    _$setProp(_el$8, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$8, "padding", 1);
+    _$setProp(_el$8, "flexDirection", "column");
+    _$setProp(_el$8, "gap", 1);
+    _$insertNode(_el$9, _el$0);
+    _$insertNode(_el$9, _el$1);
+    _$insert(_el$9, () => props.viewLabel, _el$1);
+    _$insert(_el$10, () => props.sectionLabel ?? "Primary actions and timeline live here.");
+    _$insertNode(_el$11, _el$12);
+    _$setProp(_el$11, "flexGrow", 1);
+    _$setProp(_el$11, "minHeight", 0);
+    _$setProp(_el$11, "scrollbarOptions", {
+      visible: false
+    });
+    _$insertNode(_el$12, _el$13);
+    _$setProp(_el$12, "flexDirection", "column");
+    _$setProp(_el$12, "gap", 1);
+    _$insert(_el$12, (() => {
+      var _c$ = _$memo(() => !!props.hero);
+      return () => _c$() ? (() => {
+        var _el$16 = _$createElement("box"),
+          _el$17 = _$createElement("text"),
+          _el$18 = _$createElement("text"),
+          _el$19 = _$createElement("box");
+        _$insertNode(_el$16, _el$17);
+        _$insertNode(_el$16, _el$18);
+        _$insertNode(_el$16, _el$19);
+        _$setProp(_el$16, "border", ["top", "right", "bottom", "left"]);
+        _$setProp(_el$16, "padding", 1);
+        _$setProp(_el$16, "flexDirection", "column");
+        _$setProp(_el$16, "gap", 1);
+        _$insert(_el$17, () => props.hero.title);
+        _$insert(_el$18, () => props.hero.subtitle);
+        _$setProp(_el$19, "flexDirection", "row");
+        _$setProp(_el$19, "gap", 1);
+        _$insert(_el$19, _$createComponent(For, {
+          get each() {
+            return props.hero.tags;
+          },
+          children: tag => _$createComponent(TagPill, {
+            tag: tag
+          })
+        }));
+        _$insert(_el$16, _$createComponent(For, {
+          get each() {
+            return props.hero.lines;
+          },
+          children: (line, index) => (() => {
+            var _el$20 = _$createElement("text");
+            _$insert(_el$20, line);
+            _$effect(_$p => _$setProp(_el$20, "fg", index() === 0 ? theme.text : theme.muted, _$p));
+            return _el$20;
+          })()
+        }), null);
+        _$effect(_p$ => {
+          var _v$1 = theme.panelAlt,
+            _v$10 = theme.accent,
+            _v$11 = theme.accentStrong,
+            _v$12 = theme.muted;
+          _v$1 !== _p$.e && (_p$.e = _$setProp(_el$16, "backgroundColor", _v$1, _p$.e));
+          _v$10 !== _p$.t && (_p$.t = _$setProp(_el$16, "borderColor", _v$10, _p$.t));
+          _v$11 !== _p$.a && (_p$.a = _$setProp(_el$17, "fg", _v$11, _p$.a));
+          _v$12 !== _p$.o && (_p$.o = _$setProp(_el$18, "fg", _v$12, _p$.o));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$16;
+      })() : null;
+    })(), _el$13);
+    _$insert(_el$12, _$createComponent(For, {
+      get each() {
+        return props.cards;
+      },
+      children: (card, index) => _$createComponent(CardButton, {
+        card: card,
+        get selected() {
+          return _$memo(() => !!props.focused)() && props.selectedIndex === index();
+        },
+        onClick: () => props.onSelect(card.id, index())
+      })
+    }), _el$13);
+    _$insertNode(_el$13, _el$14);
+    _$setProp(_el$13, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$13, "padding", 1);
+    _$setProp(_el$13, "flexDirection", "column");
+    _$setProp(_el$13, "gap", 1);
+    _$insertNode(_el$14, _$createTextNode(`Conversation / Activity`));
+    _$insert(_el$13, _$createComponent(For, {
+      get each() {
+        return props.timeline;
+      },
+      children: line => (() => {
+        var _el$21 = _$createElement("text");
+        _$insert(_el$21, line);
+        _$effect(_$p => _$setProp(_el$21, "fg", theme.text, _$p));
+        return _el$21;
+      })()
+    }), null);
+    _$effect(_p$ => {
+      var _v$4 = theme.panel,
+        _v$5 = theme.border,
+        _v$6 = theme.accent,
+        _v$7 = theme.muted,
+        _v$8 = theme.panelAlt,
+        _v$9 = theme.border,
+        _v$0 = theme.accent;
+      _v$4 !== _p$.e && (_p$.e = _$setProp(_el$8, "backgroundColor", _v$4, _p$.e));
+      _v$5 !== _p$.t && (_p$.t = _$setProp(_el$8, "borderColor", _v$5, _p$.t));
+      _v$6 !== _p$.a && (_p$.a = _$setProp(_el$9, "fg", _v$6, _p$.a));
+      _v$7 !== _p$.o && (_p$.o = _$setProp(_el$10, "fg", _v$7, _p$.o));
+      _v$8 !== _p$.i && (_p$.i = _$setProp(_el$13, "backgroundColor", _v$8, _p$.i));
+      _v$9 !== _p$.n && (_p$.n = _$setProp(_el$13, "borderColor", _v$9, _p$.n));
+      _v$0 !== _p$.s && (_p$.s = _$setProp(_el$14, "fg", _v$0, _p$.s));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
+    });
+    return _el$8;
+  })();
+}
+export function InspectorPanel(props) {
+  return (() => {
+    var _el$22 = _$createElement("box"),
+      _el$23 = _$createElement("text"),
+      _el$25 = _$createElement("text"),
+      _el$26 = _$createElement("text");
+    _$insertNode(_el$22, _el$23);
+    _$insertNode(_el$22, _el$25);
+    _$insertNode(_el$22, _el$26);
+    _$setProp(_el$22, "width", 34);
+    _$setProp(_el$22, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$22, "padding", 1);
+    _$setProp(_el$22, "flexDirection", "column");
+    _$setProp(_el$22, "gap", 1);
+    _$insertNode(_el$23, _$createTextNode(`Inspector`));
+    _$insert(_el$22, _$createComponent(InspectorLine, {
+      label: "Onboarding",
+      get value() {
+        return props.onboardingComplete ? "Complete" : "Pending";
+      }
+    }), _el$25);
+    _$insert(_el$22, _$createComponent(InspectorLine, {
+      label: "Profiles",
+      get value() {
+        return String(props.profilesCount);
+      }
+    }), _el$25);
+    _$insert(_el$22, _$createComponent(InspectorLine, {
+      label: "Provider",
+      get value() {
+        return props.activeProvider ?? "none";
+      }
+    }), _el$25);
+    _$insert(_el$22, _$createComponent(InspectorLine, {
+      label: "Model",
+      get value() {
+        return props.activeModel ?? "none";
+      }
+    }), _el$25);
+    _$insert(_el$22, _$createComponent(InspectorLine, {
+      label: "Focus",
+      get value() {
+        return props.focusLabel;
+      }
+    }), _el$25);
+    _$insert(_el$25, () => props.detailTitle);
+    _$insert(_el$22, _$createComponent(For, {
+      get each() {
+        return props.detailLines;
+      },
+      children: (line, index) => (() => {
+        var _el$28 = _$createElement("text");
+        _$insert(_el$28, line);
+        _$effect(_$p => _$setProp(_el$28, "fg", index() === 0 ? theme.text : theme.muted, _$p));
+        return _el$28;
+      })()
+    }), _el$26);
+    _$insertNode(_el$26, _$createTextNode(`Todo`));
+    _$insert(_el$22, _$createComponent(For, {
+      get each() {
+        return props.todoLines;
+      },
+      children: line => (() => {
+        var _el$29 = _$createElement("text");
+        _$insert(_el$29, line);
+        _$effect(_$p => _$setProp(_el$29, "fg", theme.muted, _$p));
+        return _el$29;
+      })()
+    }), null);
+    _$effect(_p$ => {
+      var _v$13 = theme.panelMuted,
+        _v$14 = theme.border,
+        _v$15 = theme.accent,
+        _v$16 = theme.accent,
+        _v$17 = theme.accent;
+      _v$13 !== _p$.e && (_p$.e = _$setProp(_el$22, "backgroundColor", _v$13, _p$.e));
+      _v$14 !== _p$.t && (_p$.t = _$setProp(_el$22, "borderColor", _v$14, _p$.t));
+      _v$15 !== _p$.a && (_p$.a = _$setProp(_el$23, "fg", _v$15, _p$.a));
+      _v$16 !== _p$.o && (_p$.o = _$setProp(_el$25, "fg", _v$16, _p$.o));
+      _v$17 !== _p$.i && (_p$.i = _$setProp(_el$26, "fg", _v$17, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$22;
+  })();
+}
+export function DockPanel(props) {
+  const [draftValue, setDraftValue] = createSignal(props.value);
+  const [slashIndex, setSlashIndex] = createSignal(0);
+  const slashOptions = createMemo(() => getSlashCommands(draftValue()));
+  createEffect(() => {
+    setDraftValue(props.value);
+    if (!props.value.trim().startsWith("/")) {
+      setSlashIndex(0);
+    }
+  });
+  useKeyboard(evt => {
+    if (!props.focused || slashOptions().length === 0) {
+      return;
+    }
+    if (evt.name === "up") {
+      evt.preventDefault();
+      setSlashIndex(current => current <= 0 ? slashOptions().length - 1 : current - 1);
+      return;
+    }
+    if (evt.name === "down") {
+      evt.preventDefault();
+      setSlashIndex(current => (current + 1) % slashOptions().length);
+      return;
+    }
+    if (evt.name === "return" && draftValue().trim().startsWith("/")) {
+      const command = slashOptions()[slashIndex()] ?? slashOptions()[0];
+      if (!command) {
+        return;
+      }
+      evt.preventDefault();
+      props.onSelectSlashCommand(command.id);
+    }
+  });
+  return (() => {
+    var _el$30 = _$createElement("box"),
+      _el$31 = _$createElement("box"),
+      _el$32 = _$createElement("box"),
+      _el$33 = _$createElement("box"),
+      _el$34 = _$createElement("input"),
+      _el$35 = _$createElement("text");
+    _$insertNode(_el$30, _el$31);
+    _$insertNode(_el$30, _el$32);
+    _$setProp(_el$30, "flexShrink", 0);
+    _$setProp(_el$30, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$30, "paddingLeft", 2);
+    _$setProp(_el$30, "paddingRight", 2);
+    _$setProp(_el$30, "paddingTop", 1);
+    _$setProp(_el$30, "paddingBottom", 1);
+    _$setProp(_el$30, "flexDirection", "column");
+    _$setProp(_el$30, "gap", 1);
+    _$setProp(_el$30, "marginLeft", 1);
+    _$setProp(_el$30, "marginRight", 1);
+    _$setProp(_el$31, "flexDirection", "row");
+    _$setProp(_el$31, "gap", 1);
+    _$insert(_el$31, _$createComponent(HeaderChip, {
+      get label() {
+        return `Provider ${props.activeProvider}`;
+      },
+      tone: "accent",
+      onClick: () => props.onAction("overlay:provider")
+    }), null);
+    _$insert(_el$31, _$createComponent(HeaderChip, {
+      get label() {
+        return `Model ${props.activeModel}`;
+      },
+      tone: "muted",
+      onClick: () => props.onAction("overlay:model")
+    }), null);
+    _$insert(_el$31, _$createComponent(HeaderChip, {
+      label: "Sessions",
+      tone: "muted",
+      onClick: () => props.onAction("overlay:session")
+    }), null);
+    _$insert(_el$31, _$createComponent(HeaderChip, {
+      label: "Commands",
+      tone: "muted",
+      onClick: () => props.onAction("command-menu")
+    }), null);
+    _$insertNode(_el$32, _el$33);
+    _$setProp(_el$32, "flexDirection", "column");
+    _$setProp(_el$32, "gap", 1);
+    _$insert(_el$32, (() => {
+      var _c$2 = _$memo(() => slashOptions().length > 0);
+      return () => _c$2() ? (() => {
+        var _el$36 = _$createElement("box"),
+          _el$37 = _$createElement("text");
+        _$insertNode(_el$36, _el$37);
+        _$setProp(_el$36, "border", ["top", "right", "bottom", "left"]);
+        _$setProp(_el$36, "padding", 1);
+        _$setProp(_el$36, "flexDirection", "column");
+        _$setProp(_el$36, "gap", 1);
+        _$insertNode(_el$37, _$createTextNode(`Slash Commands`));
+        _$insert(_el$36, _$createComponent(For, {
+          get each() {
+            return slashOptions();
+          },
+          children: (option, index) => (() => {
+            var _el$39 = _$createElement("box"),
+              _el$40 = _$createElement("box"),
+              _el$41 = _$createElement("text"),
+              _el$42 = _$createElement("text");
+            _$insertNode(_el$39, _el$40);
+            _$insertNode(_el$39, _el$42);
+            _$setProp(_el$39, "paddingLeft", 1);
+            _$setProp(_el$39, "paddingRight", 1);
+            _$setProp(_el$39, "paddingTop", 1);
+            _$setProp(_el$39, "paddingBottom", 1);
+            _$setProp(_el$39, "flexDirection", "column");
+            _$setProp(_el$39, "onMouseUp", () => props.onSelectSlashCommand(option.id));
+            _$insertNode(_el$40, _el$41);
+            _$setProp(_el$40, "flexDirection", "row");
+            _$setProp(_el$40, "justifyContent", "space-between");
+            _$insert(_el$41, () => option.label);
+            _$insert(_el$40, (() => {
+              var _c$3 = _$memo(() => !!option.keyHint);
+              return () => _c$3() ? (() => {
+                var _el$43 = _$createElement("text");
+                _$insert(_el$43, () => option.keyHint);
+                _$effect(_$p => _$setProp(_el$43, "fg", slashIndex() === index() ? theme.background : theme.muted, _$p));
+                return _el$43;
+              })() : null;
+            })(), null);
+            _$insert(_el$42, () => option.description);
+            _$effect(_p$ => {
+              var _v$35 = slashIndex() === index() ? theme.accent : theme.panelMuted,
+                _v$36 = slashIndex() === index() ? theme.background : theme.text,
+                _v$37 = slashIndex() === index() ? theme.background : theme.muted;
+              _v$35 !== _p$.e && (_p$.e = _$setProp(_el$39, "backgroundColor", _v$35, _p$.e));
+              _v$36 !== _p$.t && (_p$.t = _$setProp(_el$41, "fg", _v$36, _p$.t));
+              _v$37 !== _p$.a && (_p$.a = _$setProp(_el$42, "fg", _v$37, _p$.a));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            return _el$39;
+          })()
+        }), null);
+        _$effect(_p$ => {
+          var _v$32 = theme.panel,
+            _v$33 = theme.accent,
+            _v$34 = theme.accent;
+          _v$32 !== _p$.e && (_p$.e = _$setProp(_el$36, "backgroundColor", _v$32, _p$.e));
+          _v$33 !== _p$.t && (_p$.t = _$setProp(_el$36, "borderColor", _v$33, _p$.t));
+          _v$34 !== _p$.a && (_p$.a = _$setProp(_el$37, "fg", _v$34, _p$.a));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$36;
+      })() : null;
+    })(), _el$33);
+    _$insertNode(_el$33, _el$34);
+    _$insertNode(_el$33, _el$35);
+    _$setProp(_el$33, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$33, "paddingLeft", 1);
+    _$setProp(_el$33, "paddingRight", 1);
+    _$setProp(_el$33, "paddingTop", 1);
+    _$setProp(_el$33, "paddingBottom", 1);
+    _$setProp(_el$33, "flexDirection", "column");
+    _$setProp(_el$33, "gap", 1);
+    _$use(ref => props.inputRef(ref), _el$34);
+    _$setProp(_el$34, "placeholder", "Ask, edit, review, or type / for commands");
+    _$setProp(_el$34, "onInput", value => {
+      setDraftValue(value);
+      if (!value.trim().startsWith("/")) {
+        setSlashIndex(0);
+      }
+      props.onInput(value);
+    });
+    _$setProp(_el$34, "onSubmit", value => {
+      const matchingCommands = getSlashCommands(value);
+      if (value.trim().startsWith("/") && matchingCommands.length > 0) {
+        const command = matchingCommands[slashIndex()] ?? matchingCommands[0];
+        if (command) {
+          props.onSelectSlashCommand(command.id);
+          return;
+        }
+      }
+      props.onSubmit(value);
+    });
+    _$insert(_el$35, () => props.focused ? "Enter submit | Up/Down command menu | Esc exit when empty" : "Press Tab to focus composer");
+    _$effect(_p$ => {
+      var _v$18 = theme.panelAlt,
+        _v$19 = theme.border,
+        _v$20 = theme.panel,
+        _v$21 = props.focused ? theme.accent : theme.border,
+        _v$22 = props.onFocusComposer,
+        _v$23 = props.focused,
+        _v$24 = draftValue(),
+        _v$25 = theme.panel,
+        _v$26 = theme.text,
+        _v$27 = theme.panel,
+        _v$28 = theme.text,
+        _v$29 = theme.accent,
+        _v$30 = props.onFocusComposer,
+        _v$31 = props.focused ? theme.accentStrong : theme.muted;
+      _v$18 !== _p$.e && (_p$.e = _$setProp(_el$30, "backgroundColor", _v$18, _p$.e));
+      _v$19 !== _p$.t && (_p$.t = _$setProp(_el$30, "borderColor", _v$19, _p$.t));
+      _v$20 !== _p$.a && (_p$.a = _$setProp(_el$33, "backgroundColor", _v$20, _p$.a));
+      _v$21 !== _p$.o && (_p$.o = _$setProp(_el$33, "borderColor", _v$21, _p$.o));
+      _v$22 !== _p$.i && (_p$.i = _$setProp(_el$33, "onMouseUp", _v$22, _p$.i));
+      _v$23 !== _p$.n && (_p$.n = _$setProp(_el$34, "focused", _v$23, _p$.n));
+      _v$24 !== _p$.s && (_p$.s = _$setProp(_el$34, "value", _v$24, _p$.s));
+      _v$25 !== _p$.h && (_p$.h = _$setProp(_el$34, "backgroundColor", _v$25, _p$.h));
+      _v$26 !== _p$.r && (_p$.r = _$setProp(_el$34, "textColor", _v$26, _p$.r));
+      _v$27 !== _p$.d && (_p$.d = _$setProp(_el$34, "focusedBackgroundColor", _v$27, _p$.d));
+      _v$28 !== _p$.l && (_p$.l = _$setProp(_el$34, "focusedTextColor", _v$28, _p$.l));
+      _v$29 !== _p$.u && (_p$.u = _$setProp(_el$34, "cursorColor", _v$29, _p$.u));
+      _v$30 !== _p$.c && (_p$.c = _$setProp(_el$34, "onMouseUp", _v$30, _p$.c));
+      _v$31 !== _p$.w && (_p$.w = _$setProp(_el$35, "fg", _v$31, _p$.w));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined,
+      w: undefined
+    });
+    return _el$30;
+  })();
+}
+export function PickerOverlay(props) {
+  return (() => {
+    var _el$44 = _$createElement("box"),
+      _el$45 = _$createElement("box"),
+      _el$46 = _$createElement("box"),
+      _el$47 = _$createElement("text"),
+      _el$48 = _$createElement("text"),
+      _el$50 = _$createElement("text");
+    _$insertNode(_el$44, _el$45);
+    _$setProp(_el$44, "position", "absolute");
+    _$setProp(_el$44, "width", "100%");
+    _$setProp(_el$44, "height", "100%");
+    _$setProp(_el$44, "alignItems", "center");
+    _$setProp(_el$44, "justifyContent", "center");
+    _$insertNode(_el$45, _el$46);
+    _$insertNode(_el$45, _el$50);
+    _$setProp(_el$45, "width", "70%");
+    _$setProp(_el$45, "maxWidth", 80);
+    _$setProp(_el$45, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$45, "padding", 1);
+    _$setProp(_el$45, "flexDirection", "column");
+    _$setProp(_el$45, "gap", 1);
+    _$insertNode(_el$46, _el$47);
+    _$insertNode(_el$46, _el$48);
+    _$setProp(_el$46, "flexDirection", "row");
+    _$setProp(_el$46, "justifyContent", "space-between");
+    _$insert(_el$47, () => props.title);
+    _$insertNode(_el$48, _$createTextNode(`esc`));
+    _$insert(_el$50, () => props.description);
+    _$insert(_el$45, _$createComponent(Show, {
+      get when() {
+        return props.options.length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$53 = _$createElement("text");
+          _$insertNode(_el$53, _$createTextNode(`No options are available for this picker yet.`));
+          _$effect(_$p => _$setProp(_el$53, "fg", theme.warning, _$p));
+          return _el$53;
+        })();
+      },
+      get children() {
+        var _el$51 = _$createElement("scrollbox"),
+          _el$52 = _$createElement("box");
+        _$insertNode(_el$51, _el$52);
+        _$setProp(_el$51, "maxHeight", 12);
+        _$setProp(_el$51, "scrollbarOptions", {
+          visible: false
+        });
+        _$setProp(_el$52, "flexDirection", "column");
+        _$setProp(_el$52, "gap", 1);
+        _$insert(_el$52, _$createComponent(For, {
+          get each() {
+            return props.options;
+          },
+          children: (option, index) => (() => {
+            var _el$55 = _$createElement("box"),
+              _el$56 = _$createElement("box"),
+              _el$57 = _$createElement("text"),
+              _el$58 = _$createElement("text");
+            _$insertNode(_el$55, _el$56);
+            _$insertNode(_el$55, _el$58);
+            _$setProp(_el$55, "paddingLeft", 1);
+            _$setProp(_el$55, "paddingRight", 1);
+            _$setProp(_el$55, "paddingTop", 1);
+            _$setProp(_el$55, "paddingBottom", 1);
+            _$setProp(_el$55, "flexDirection", "column");
+            _$setProp(_el$55, "onMouseUp", () => props.onSelect(option.id, index()));
+            _$insertNode(_el$56, _el$57);
+            _$setProp(_el$56, "flexDirection", "row");
+            _$setProp(_el$56, "justifyContent", "space-between");
+            _$insert(_el$57, () => option.label);
+            _$insert(_el$56, (() => {
+              var _c$4 = _$memo(() => !!option.badge);
+              return () => _c$4() ? (() => {
+                var _el$59 = _$createElement("text");
+                _$insert(_el$59, () => option.badge);
+                _$effect(_$p => _$setProp(_el$59, "fg", props.selectedIndex === index() ? theme.background : theme.success, _$p));
+                return _el$59;
+              })() : null;
+            })(), null);
+            _$insert(_el$58, () => option.description);
+            _$effect(_p$ => {
+              var _v$44 = props.selectedIndex === index() ? theme.accent : theme.panel,
+                _v$45 = props.selectedIndex === index() ? theme.background : theme.text,
+                _v$46 = props.selectedIndex === index() ? theme.background : theme.muted;
+              _v$44 !== _p$.e && (_p$.e = _$setProp(_el$55, "backgroundColor", _v$44, _p$.e));
+              _v$45 !== _p$.t && (_p$.t = _$setProp(_el$57, "fg", _v$45, _p$.t));
+              _v$46 !== _p$.a && (_p$.a = _$setProp(_el$58, "fg", _v$46, _p$.a));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            return _el$55;
+          })()
+        }));
+        return _el$51;
+      }
+    }), null);
+    _$effect(_p$ => {
+      var _v$38 = theme.panelAlt,
+        _v$39 = theme.accent,
+        _v$40 = theme.accentStrong,
+        _v$41 = theme.muted,
+        _v$42 = props.onClose,
+        _v$43 = theme.muted;
+      _v$38 !== _p$.e && (_p$.e = _$setProp(_el$45, "backgroundColor", _v$38, _p$.e));
+      _v$39 !== _p$.t && (_p$.t = _$setProp(_el$45, "borderColor", _v$39, _p$.t));
+      _v$40 !== _p$.a && (_p$.a = _$setProp(_el$47, "fg", _v$40, _p$.a));
+      _v$41 !== _p$.o && (_p$.o = _$setProp(_el$48, "fg", _v$41, _p$.o));
+      _v$42 !== _p$.i && (_p$.i = _$setProp(_el$48, "onMouseUp", _v$42, _p$.i));
+      _v$43 !== _p$.n && (_p$.n = _$setProp(_el$50, "fg", _v$43, _p$.n));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
+    });
+    return _el$44;
+  })();
+}
+function HeaderChip(props) {
+  const backgroundColor = props.tone === "accent" ? theme.accent : theme.panel;
+  const foregroundColor = props.tone === "accent" ? theme.background : theme.text;
+  return (() => {
+    var _el$60 = _$createElement("box"),
+      _el$61 = _$createElement("text");
+    _$insertNode(_el$60, _el$61);
+    _$setProp(_el$60, "backgroundColor", backgroundColor);
+    _$setProp(_el$60, "paddingLeft", 1);
+    _$setProp(_el$60, "paddingRight", 1);
+    _$setProp(_el$61, "fg", foregroundColor);
+    _$insert(_el$61, () => props.label);
+    _$effect(_$p => _$setProp(_el$60, "onMouseUp", props.onClick, _$p));
+    return _el$60;
+  })();
+}
+function HeaderSpacer() {
+  return (() => {
+    var _el$62 = _$createElement("box");
+    _$setProp(_el$62, "flexGrow", 1);
+    return _el$62;
+  })();
+}
+function ChipButton(props) {
+  const backgroundColor = props.active ? theme.accent : props.selected ? theme.panelAlt : theme.panel;
+  const foregroundColor = props.active ? theme.background : theme.text;
+  return (() => {
+    var _el$63 = _$createElement("box"),
+      _el$64 = _$createElement("text");
+    _$insertNode(_el$63, _el$64);
+    _$setProp(_el$63, "backgroundColor", backgroundColor);
+    _$setProp(_el$63, "paddingLeft", 1);
+    _$setProp(_el$63, "paddingRight", 1);
+    _$setProp(_el$64, "fg", foregroundColor);
+    _$insert(_el$64, () => props.label);
+    return _el$63;
+  })();
+}
+function CardButton(props) {
+  const accentColor = props.card.tone === "success" ? theme.success : props.card.tone === "muted" ? theme.muted : theme.accent;
+  return (() => {
+    var _el$65 = _$createElement("box"),
+      _el$66 = _$createElement("text"),
+      _el$67 = _$createElement("text");
+    _$insertNode(_el$65, _el$66);
+    _$insertNode(_el$65, _el$67);
+    _$setProp(_el$65, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$65, "padding", 1);
+    _$setProp(_el$65, "flexDirection", "column");
+    _$setProp(_el$65, "gap", 1);
+    _$insert(_el$66, () => props.card.title);
+    _$insert(_el$65, (() => {
+      var _c$5 = _$memo(() => !!props.card.tags?.length);
+      return () => _c$5() ? (() => {
+        var _el$68 = _$createElement("box");
+        _$setProp(_el$68, "flexDirection", "row");
+        _$setProp(_el$68, "gap", 1);
+        _$insert(_el$68, _$createComponent(For, {
+          get each() {
+            return props.card.tags;
+          },
+          children: tag => _$createComponent(TagPill, {
+            tag: tag,
+            compact: true
+          })
+        }));
+        return _el$68;
+      })() : null;
+    })(), _el$67);
+    _$insert(_el$65, _$createComponent(For, {
+      get each() {
+        return props.card.lines;
+      },
+      children: (line, index) => (() => {
+        var _el$69 = _$createElement("text");
+        _$insert(_el$69, line);
+        _$effect(_$p => _$setProp(_el$69, "fg", index() === 0 ? theme.text : theme.muted, _$p));
+        return _el$69;
+      })()
+    }), _el$67);
+    _$setProp(_el$67, "fg", accentColor);
+    _$insert(_el$67, () => props.card.actionLabel);
+    _$effect(_p$ => {
+      var _v$47 = props.selected ? theme.panelAlt : theme.panelMuted,
+        _v$48 = props.selected ? accentColor : theme.border,
+        _v$49 = props.onClick,
+        _v$50 = theme.text;
+      _v$47 !== _p$.e && (_p$.e = _$setProp(_el$65, "backgroundColor", _v$47, _p$.e));
+      _v$48 !== _p$.t && (_p$.t = _$setProp(_el$65, "borderColor", _v$48, _p$.t));
+      _v$49 !== _p$.a && (_p$.a = _$setProp(_el$65, "onMouseUp", _v$49, _p$.a));
+      _v$50 !== _p$.o && (_p$.o = _$setProp(_el$66, "fg", _v$50, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$65;
+  })();
+}
+function TagPill(props) {
+  const backgroundColor = props.tag.color ?? toneColor(props.tag.tone);
+  const foregroundColor = props.tag.tone === "muted" ? theme.text : theme.background;
+  return (() => {
+    var _el$70 = _$createElement("box"),
+      _el$71 = _$createElement("text");
+    _$insertNode(_el$70, _el$71);
+    _$setProp(_el$70, "backgroundColor", backgroundColor);
+    _$setProp(_el$70, "paddingLeft", 1);
+    _$setProp(_el$70, "paddingRight", 1);
+    _$setProp(_el$71, "fg", foregroundColor);
+    _$insert(_el$71, () => props.tag.label);
+    return _el$70;
+  })();
+}
+function InspectorLine(props) {
+  return (() => {
+    var _el$72 = _$createElement("box"),
+      _el$73 = _$createElement("text"),
+      _el$74 = _$createElement("text");
+    _$insertNode(_el$72, _el$73);
+    _$insertNode(_el$72, _el$74);
+    _$setProp(_el$72, "flexDirection", "row");
+    _$setProp(_el$72, "justifyContent", "space-between");
+    _$insert(_el$73, () => props.label);
+    _$insert(_el$74, () => props.value);
+    _$effect(_p$ => {
+      var _v$51 = theme.muted,
+        _v$52 = theme.text;
+      _v$51 !== _p$.e && (_p$.e = _$setProp(_el$73, "fg", _v$51, _p$.e));
+      _v$52 !== _p$.t && (_p$.t = _$setProp(_el$74, "fg", _v$52, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$72;
+  })();
+}
+function toneColor(tone) {
+  switch (tone) {
+    case "accent":
+      return theme.accent;
+    case "success":
+      return theme.success;
+    case "warning":
+      return theme.warning;
+    case "danger":
+      return theme.danger;
+    case "muted":
+      return theme.border;
+  }
+}