@broberg/seti-client 0.1.0

package/dist/preact.js

@@ -0,0 +1,157 @@
+import { SetiClient, FrameAccumulator } from './chunk-VWTGZF3D.js';
+export { SetiClient } from './chunk-VWTGZF3D.js';
+import { useMemo, useState, useRef, useEffect } from 'preact/hooks';
+import { jsxs, jsx } from 'preact/jsx-runtime';
+
+var NAV_KEYS = [
+  { key: "Escape", label: "Esc", title: "Escape" },
+  { key: "Up", label: "\u2191", title: "Pil op" },
+  { key: "Down", label: "\u2193", title: "Pil ned" },
+  { key: "Left", label: "\u2190", title: "Pil venstre" },
+  { key: "Right", label: "\u2192", title: "Pil h\xF8jre" },
+  { key: "Enter", label: "\u23CE", title: "Enter" }
+];
+var STYLE_ID = "broberg-seti-chat-style";
+var CSS = `
+.seti-chat{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--seti-bg,#0b0e14);color:var(--seti-fg,#d7dce5);border:1px solid var(--seti-edge,#1e2430);border-radius:var(--seti-radius,12px);overflow:hidden}
+.seti-chat__header{display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;background:var(--seti-panel,#11151f);border-bottom:1px solid var(--seti-edge,#1e2430);font-size:.82rem}
+.seti-chat__dot{width:9px;height:9px;border-radius:50%;background:var(--seti-dim,#8a93a6);transition:background .2s;flex:none}
+.seti-chat__dot.is-on{background:var(--seti-accent,#34d399);animation:seti-pulse 2s infinite}
+.seti-chat__dot.is-bad{background:var(--seti-bad,#f87171)}
+@keyframes seti-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
+.seti-chat__meta{color:var(--seti-dim,#8a93a6);font-family:var(--seti-mono,ui-monospace,Menlo,monospace);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.seti-chat__screen{flex:1;margin:0;padding:.9rem 1rem;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:var(--seti-mono,ui-monospace,Menlo,monospace);font-size:12.5px;line-height:1.45;-webkit-overflow-scrolling:touch}
+.seti-chat__screen.is-empty{color:var(--seti-dim,#8a93a6)}
+.seti-chat__navkeys{display:flex;gap:.4rem;padding:.45rem .65rem .2rem;background:var(--seti-panel,#11151f);flex-wrap:wrap;border-top:1px solid var(--seti-edge,#1e2430)}
+.seti-chat__navkeys button{padding:.45rem .7rem;background:var(--seti-edge,#1e2430);color:var(--seti-fg,#d7dce5);font-size:13px;min-width:2.6rem;min-height:2.2rem;font-weight:600;border:0;border-radius:8px;cursor:pointer;transition:transform .06s,background .15s,opacity .15s}
+.seti-chat__navkeys button:hover{filter:brightness(1.25)}
+.seti-chat__navkeys button:active{transform:translateY(1px) scale(.98)}
+.seti-chat__navkeys button:disabled{opacity:.5;cursor:not-allowed}
+.seti-chat__form{display:flex;gap:.5rem;padding:.6rem;background:var(--seti-panel,#11151f);border-top:1px solid var(--seti-edge,#1e2430)}
+.seti-chat__input{flex:1;min-width:0;background:var(--seti-bg,#0b0e14);border:1px solid var(--seti-edge,#1e2430);color:var(--seti-fg,#d7dce5);border-radius:10px;padding:.65rem .85rem;font-family:var(--seti-mono,ui-monospace,Menlo,monospace);font-size:16px;outline:none}
+.seti-chat__input:focus{border-color:var(--seti-accent,#34d399);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
+.seti-chat__send{background:var(--seti-accent,#34d399);color:#07120d;border:0;border-radius:10px;padding:.65rem 1.05rem;font-weight:650;cursor:pointer;transition:transform .06s,background .15s,opacity .15s}
+.seti-chat__send:hover{filter:brightness(1.08)}
+.seti-chat__send:active{transform:translateY(1px) scale(.99)}
+.seti-chat__send:disabled{opacity:.5;cursor:not-allowed}
+.seti-chat__send.is-sending{background:var(--seti-warn,#fbbf24);color:#2a1d00}
+`;
+function ensureStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = CSS;
+  document.head.appendChild(el);
+}
+function SetiChat(props) {
+  const client = useMemo(
+    () => props.client ?? new SetiClient({ baseUrl: props.baseUrl ?? "/api/seti" }),
+    [props.client, props.baseUrl]
+  );
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const [screenText, setScreenText] = useState("");
+  const [edgeOn, setEdgeOn] = useState(null);
+  const [streamState, setStreamState] = useState("connecting");
+  const [notice, setNotice] = useState(null);
+  const screenRef = useRef(null);
+  useEffect(ensureStyle, []);
+  useEffect(() => {
+    const acc = new FrameAccumulator();
+    setScreenText("");
+    setNotice(null);
+    const atBottom = () => {
+      const s = screenRef.current;
+      return !s || s.scrollHeight - s.scrollTop - s.clientHeight < 40;
+    };
+    const handle = client.openStream(props.edge, props.session, {
+      onHello: (h) => setEdgeOn(h.edgeConnected),
+      onPing: (p) => setEdgeOn(p.edgeConnected),
+      onStateChange: setStreamState,
+      onFrame: (content) => {
+        const stick = atBottom();
+        acc.feed(content);
+        setScreenText(acc.text);
+        if (stick) {
+          requestAnimationFrame(() => {
+            const s = screenRef.current;
+            if (s) s.scrollTop = s.scrollHeight;
+          });
+        }
+      }
+    });
+    return () => handle.close();
+  }, [client, props.edge, props.session]);
+  const meta = streamState === "open" ? edgeOn === false ? `${props.edge} \xB7 edge offline` : `${props.edge} \xB7 ${props.session}` : streamState === "closed" ? "lukket" : "forbinder\u2026";
+  const dotClass = "seti-chat__dot" + (streamState === "open" && edgeOn ? " is-on" : edgeOn === false ? " is-bad" : "");
+  const submit = async (ev) => {
+    ev.preventDefault();
+    if (!text.trim() || sending) return;
+    setSending(true);
+    setNotice(null);
+    const res = await client.sendText(props.edge, props.session, text);
+    if (res.ok) {
+      setText("");
+    } else {
+      setNotice("Ikke leveret \u2014 din tekst er bevaret");
+    }
+    setSending(false);
+  };
+  const pressKey = async (key) => {
+    await client.sendKey(props.edge, props.session, key);
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "seti-chat" + (props.class ? ` ${props.class}` : ""), "data-testid": "seti-chat-root", children: [
+    /* @__PURE__ */ jsxs("div", { class: "seti-chat__header", "data-testid": "seti-chat-header", children: [
+      /* @__PURE__ */ jsx("span", { class: dotClass, "data-testid": "seti-chat-status-dot" }),
+      /* @__PURE__ */ jsx("span", { class: "seti-chat__meta", "data-testid": "seti-chat-meta", children: notice ?? meta })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        ref: screenRef,
+        class: "seti-chat__screen" + (screenText ? "" : " is-empty"),
+        "data-testid": "seti-chat-screen",
+        children: screenText || "Venter p\xE5 den f\xF8rste frame fra edgen\u2026"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { class: "seti-chat__navkeys", "data-testid": "seti-chat-navkeys", children: NAV_KEYS.map((k) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: k.title,
+        "data-testid": `seti-chat-key-${k.key.toLowerCase()}`,
+        onClick: () => void pressKey(k.key),
+        children: k.label
+      },
+      k.key
+    )) }),
+    /* @__PURE__ */ jsxs("form", { class: "seti-chat__form", "data-testid": "seti-chat-form", onSubmit: submit, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          class: "seti-chat__input",
+          "data-testid": "seti-chat-input",
+          value: text,
+          placeholder: props.placeholder ?? "Skriv til sessionen\u2026",
+          autocomplete: "off",
+          onInput: (e) => setText(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          class: "seti-chat__send" + (sending ? " is-sending" : ""),
+          "data-testid": "seti-chat-send",
+          disabled: sending,
+          children: sending ? "\u2026" : "Send"
+        }
+      )
+    ] })
+  ] });
+}
+
+export { SetiChat };
+//# sourceMappingURL=preact.js.map
+//# sourceMappingURL=preact.js.map

package/dist/preact.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preact.tsx"],"names":[],"mappings":";;;;;AA6BA,IAAM,QAAA,GAAkE;AAAA,EACtE,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,KAAA,EAAO,OAAO,QAAA,EAAS;AAAA,EAC/C,EAAE,GAAA,EAAK,IAAA,EAAM,KAAA,EAAO,QAAA,EAAK,OAAO,QAAA,EAAS;AAAA,EACzC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,QAAA,EAAK,OAAO,SAAA,EAAU;AAAA,EAC5C,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,QAAA,EAAK,OAAO,aAAA,EAAc;AAAA,EAChD,EAAE,GAAA,EAAK,OAAA,EAAS,KAAA,EAAO,QAAA,EAAK,OAAO,cAAA,EAAY;AAAA,EAC/C,EAAE,GAAA,EAAK,OAAA,EAAS,KAAA,EAAO,QAAA,EAAK,OAAO,OAAA;AACrC,CAAA;AAEA,IAAM,QAAA,GAAW,yBAAA;AACjB,IAAM,GAAA,GAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAyBZ,SAAS,WAAA,GAAoB;AAC3B,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,IAAI,QAAA,CAAS,cAAA,CAAe,QAAQ,CAAA,EAAG;AACvC,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AACzC,EAAA,EAAA,CAAG,EAAA,GAAK,QAAA;AACR,EAAA,EAAA,CAAG,WAAA,GAAc,GAAA;AACjB,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,EAAE,CAAA;AAC9B;AAEO,SAAS,SAAS,KAAA,EAAsB;AAC7C,EAAA,MAAM,MAAA,GAAS,OAAA;AAAA,IACb,MAAM,KAAA,CAAM,MAAA,IAAU,IAAI,UAAA,CAAW,EAAE,OAAA,EAAS,KAAA,CAAM,OAAA,IAAW,WAAA,EAAa,CAAA;AAAA,IAC9E,CAAC,KAAA,CAAM,MAAA,EAAQ,KAAA,CAAM,OAAO;AAAA,GAC9B;AACA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,EAAE,CAAA;AACnC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA;AAC/C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAyB,IAAI,CAAA;AACzD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAA0B,YAAY,CAAA;AAC5E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAwB,IAAI,CAAA;AACxD,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAE7C,EAAA,SAAA,CAAU,WAAA,EAAa,EAAE,CAAA;AAEzB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,GAAA,GAAM,IAAI,gBAAA,EAAiB;AACjC,IAAA,aAAA,CAAc,EAAE,CAAA;AAChB,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,MAAM,WAAW,MAAe;AAC9B,MAAA,MAAM,IAAI,SAAA,CAAU,OAAA;AACpB,MAAA,OAAO,CAAC,CAAA,IAAK,CAAA,CAAE,eAAe,CAAA,CAAE,SAAA,GAAY,EAAE,YAAA,GAAe,EAAA;AAAA,IAC/D,CAAA;AACA,IAAA,MAAM,SAAS,MAAA,CAAO,UAAA,CAAW,KAAA,CAAM,IAAA,EAAM,MAAM,OAAA,EAAS;AAAA,MAC1D,OAAA,EAAS,CAAC,CAAA,KAAM,SAAA,CAAU,EAAE,aAAa,CAAA;AAAA,MACzC,MAAA,EAAQ,CAAC,CAAA,KAAM,SAAA,CAAU,EAAE,aAAa,CAAA;AAAA,MACxC,aAAA,EAAe,cAAA;AAAA,MACf,OAAA,EAAS,CAAC,OAAA,KAAY;AACpB,QAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,QAAA,GAAA,CAAI,KAAK,OAAO,CAAA;AAChB,QAAA,aAAA,CAAc,IAAI,IAAI,CAAA;AACtB,QAAA,IAAI,KAAA,EAAO;AACT,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAA,MAAM,IAAI,SAAA,CAAU,OAAA;AACpB,YAAA,IAAI,CAAA,EAAG,CAAA,CAAE,SAAA,GAAY,CAAA,CAAE,YAAA;AAAA,UACzB,CAAC,CAAA;AAAA,QACH;AAAA,MACF;AAAA,KACD,CAAA;AACD,IAAA,OAAO,MAAM,OAAO,KAAA,EAAM;AAAA,EAC5B,GAAG,CAAC,MAAA,EAAQ,MAAM,IAAA,EAAM,KAAA,CAAM,OAAO,CAAC,CAAA;AAEtC,EAAA,MAAM,OACJ,WAAA,KAAgB,MAAA,GACZ,WAAW,KAAA,GACT,CAAA,EAAG,MAAM,IAAI,CAAA,kBAAA,CAAA,GACb,CAAA,EAAG,KAAA,CAAM,IAAI,CAAA,MAAA,EAAM,KAAA,CAAM,OAAO,CAAA,CAAA,GAClC,WAAA,KAAgB,WACd,QAAA,GACA,iBAAA;AACR,EAAA,MAAM,QAAA,GACJ,oBAAoB,WAAA,KAAgB,MAAA,IAAU,SAAS,QAAA,GAAW,MAAA,KAAW,QAAQ,SAAA,GAAY,EAAA,CAAA;AAEnG,EAAA,MAAM,MAAA,GAAS,OAAO,EAAA,KAAc;AAClC,IAAA,EAAA,CAAG,cAAA,EAAe;AAClB,IAAA,IAAI,CAAC,IAAA,CAAK,IAAA,EAAK,IAAK,OAAA,EAAS;AAC7B,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,MAAM,GAAA,GAAM,MAAM,MAAA,CAAO,QAAA,CAAS,MAAM,IAAA,EAAM,KAAA,CAAM,SAAS,IAAI,CAAA;AACjE,IAAA,IAAI,IAAI,EAAA,EAAI;AACV,MAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,IACZ,CAAA,MAAO;AACL,MAAA,SAAA,CAAU,0CAAqC,CAAA;AAAA,IACjD;AACA,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,MAAM,QAAA,GAAW,OAAO,GAAA,KAAiB;AACvC,IAAA,MAAM,OAAO,OAAA,CAAQ,KAAA,CAAM,IAAA,EAAM,KAAA,CAAM,SAAS,GAAG,CAAA;AAAA,EACrD,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,WAAA,IAAe,KAAA,CAAM,KAAA,GAAQ,CAAA,CAAA,EAAI,KAAA,CAAM,KAAK,CAAA,CAAA,GAAK,EAAA,CAAA,EAAK,aAAA,EAAY,gBAAA,EAC5E,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,mBAAA,EAAoB,aAAA,EAAY,kBAAA,EACzC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,QAAA,EAAU,aAAA,EAAY,sBAAA,EAAuB,CAAA;AAAA,0BACzD,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAkB,aAAA,EAAY,gBAAA,EACvC,oBAAU,IAAA,EACb;AAAA,KAAA,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,KAAA,EAAO,mBAAA,IAAuB,UAAA,GAAa,EAAA,GAAK,WAAA,CAAA;AAAA,QAChD,aAAA,EAAY,kBAAA;AAAA,QAEX,QAAA,EAAA,UAAA,IAAc;AAAA;AAAA,KACjB;AAAA,oBACA,GAAA,CAAC,SAAI,KAAA,EAAM,oBAAA,EAAqB,eAAY,mBAAA,EACzC,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,qBACb,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,QAAA;AAAA,QACL,OAAO,CAAA,CAAE,KAAA;AAAA,QACT,aAAA,EAAa,CAAA,cAAA,EAAiB,CAAA,CAAE,GAAA,CAAI,aAAa,CAAA,CAAA;AAAA,QACjD,OAAA,EAAS,MAAM,KAAK,QAAA,CAAS,EAAE,GAAG,CAAA;AAAA,QAEjC,QAAA,EAAA,CAAA,CAAE;AAAA,OAAA;AAAA,MANE,CAAA,CAAE;AAAA,KAQV,CAAA,EACH,CAAA;AAAA,yBACC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAkB,aAAA,EAAY,gBAAA,EAAiB,UAAU,MAAA,EACnE,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,kBAAA;AAAA,UACN,aAAA,EAAY,iBAAA;AAAA,UACZ,KAAA,EAAO,IAAA;AAAA,UACP,WAAA,EAAa,MAAM,WAAA,IAAe,2BAAA;AAAA,UAClC,YAAA,EAAa,KAAA;AAAA,UACb,SAAS,CAAC,CAAA,KAAM,OAAA,CAAS,CAAA,CAAE,OAA4B,KAAK;AAAA;AAAA,OAC9D;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,KAAA,EAAO,iBAAA,IAAqB,OAAA,GAAU,aAAA,GAAgB,EAAA,CAAA;AAAA,UACtD,aAAA,EAAY,gBAAA;AAAA,UACZ,QAAA,EAAU,OAAA;AAAA,UAET,oBAAU,QAAA,GAAM;AAAA;AAAA;AACnB,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"preact.js","sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport { SetiClient } from \"./client\";\nimport { FrameAccumulator } from \"./frame-accumulator\";\nimport type { SetiKey, SetiStreamState } from \"./types\";\n\n/**\n * <SetiChat> — the complete mobile-first SET/SETI live chat surface:\n * status header, accumulated screen (FrameAccumulator), nav-keys bar\n * (Esc/↑/↓/←/→/⏎) and a text input with delivery feedback (text is preserved\n * when delivery fails).\n *\n * Self-contained styles, themeable via CSS vars (set them on a parent):\n *   --seti-bg, --seti-panel, --seti-edge, --seti-fg, --seti-dim,\n *   --seti-accent, --seti-warn, --seti-bad, --seti-mono, --seti-radius\n *\n * Every interactive element carries data-testid=\"seti-chat-*\".\n */\nexport interface SetiChatProps {\n  /** The host app's proxy mount, e.g. \"/api/seti\". Ignored if `client` is given. */\n  baseUrl?: string;\n  client?: SetiClient;\n  edge: string;\n  session: string;\n  /** Extra class on the root (sizing/layout belongs to the host). */\n  class?: string;\n  /** Placeholder for the text input. Default: \"Skriv til sessionen…\" */\n  placeholder?: string;\n}\n\nconst NAV_KEYS: Array<{ key: SetiKey; label: string; title: string }> = [\n  { key: \"Escape\", label: \"Esc\", title: \"Escape\" },\n  { key: \"Up\", label: \"↑\", title: \"Pil op\" },\n  { key: \"Down\", label: \"↓\", title: \"Pil ned\" },\n  { key: \"Left\", label: \"←\", title: \"Pil venstre\" },\n  { key: \"Right\", label: \"→\", title: \"Pil højre\" },\n  { key: \"Enter\", label: \"⏎\", title: \"Enter\" },\n];\n\nconst STYLE_ID = \"broberg-seti-chat-style\";\nconst CSS = `\n.seti-chat{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--seti-bg,#0b0e14);color:var(--seti-fg,#d7dce5);border:1px solid var(--seti-edge,#1e2430);border-radius:var(--seti-radius,12px);overflow:hidden}\n.seti-chat__header{display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;background:var(--seti-panel,#11151f);border-bottom:1px solid var(--seti-edge,#1e2430);font-size:.82rem}\n.seti-chat__dot{width:9px;height:9px;border-radius:50%;background:var(--seti-dim,#8a93a6);transition:background .2s;flex:none}\n.seti-chat__dot.is-on{background:var(--seti-accent,#34d399);animation:seti-pulse 2s infinite}\n.seti-chat__dot.is-bad{background:var(--seti-bad,#f87171)}\n@keyframes seti-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}\n.seti-chat__meta{color:var(--seti-dim,#8a93a6);font-family:var(--seti-mono,ui-monospace,Menlo,monospace);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.seti-chat__screen{flex:1;margin:0;padding:.9rem 1rem;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:var(--seti-mono,ui-monospace,Menlo,monospace);font-size:12.5px;line-height:1.45;-webkit-overflow-scrolling:touch}\n.seti-chat__screen.is-empty{color:var(--seti-dim,#8a93a6)}\n.seti-chat__navkeys{display:flex;gap:.4rem;padding:.45rem .65rem .2rem;background:var(--seti-panel,#11151f);flex-wrap:wrap;border-top:1px solid var(--seti-edge,#1e2430)}\n.seti-chat__navkeys button{padding:.45rem .7rem;background:var(--seti-edge,#1e2430);color:var(--seti-fg,#d7dce5);font-size:13px;min-width:2.6rem;min-height:2.2rem;font-weight:600;border:0;border-radius:8px;cursor:pointer;transition:transform .06s,background .15s,opacity .15s}\n.seti-chat__navkeys button:hover{filter:brightness(1.25)}\n.seti-chat__navkeys button:active{transform:translateY(1px) scale(.98)}\n.seti-chat__navkeys button:disabled{opacity:.5;cursor:not-allowed}\n.seti-chat__form{display:flex;gap:.5rem;padding:.6rem;background:var(--seti-panel,#11151f);border-top:1px solid var(--seti-edge,#1e2430)}\n.seti-chat__input{flex:1;min-width:0;background:var(--seti-bg,#0b0e14);border:1px solid var(--seti-edge,#1e2430);color:var(--seti-fg,#d7dce5);border-radius:10px;padding:.65rem .85rem;font-family:var(--seti-mono,ui-monospace,Menlo,monospace);font-size:16px;outline:none}\n.seti-chat__input:focus{border-color:var(--seti-accent,#34d399);box-shadow:0 0 0 3px rgba(52,211,153,.15)}\n.seti-chat__send{background:var(--seti-accent,#34d399);color:#07120d;border:0;border-radius:10px;padding:.65rem 1.05rem;font-weight:650;cursor:pointer;transition:transform .06s,background .15s,opacity .15s}\n.seti-chat__send:hover{filter:brightness(1.08)}\n.seti-chat__send:active{transform:translateY(1px) scale(.99)}\n.seti-chat__send:disabled{opacity:.5;cursor:not-allowed}\n.seti-chat__send.is-sending{background:var(--seti-warn,#fbbf24);color:#2a1d00}\n`;\n\nfunction ensureStyle(): void {\n  if (typeof document === \"undefined\") return;\n  if (document.getElementById(STYLE_ID)) return;\n  const el = document.createElement(\"style\");\n  el.id = STYLE_ID;\n  el.textContent = CSS;\n  document.head.appendChild(el);\n}\n\nexport function SetiChat(props: SetiChatProps) {\n  const client = useMemo(\n    () => props.client ?? new SetiClient({ baseUrl: props.baseUrl ?? \"/api/seti\" }),\n    [props.client, props.baseUrl],\n  );\n  const [text, setText] = useState(\"\");\n  const [sending, setSending] = useState(false);\n  const [screenText, setScreenText] = useState(\"\");\n  const [edgeOn, setEdgeOn] = useState<boolean | null>(null);\n  const [streamState, setStreamState] = useState<SetiStreamState>(\"connecting\");\n  const [notice, setNotice] = useState<string | null>(null);\n  const screenRef = useRef<HTMLPreElement>(null);\n\n  useEffect(ensureStyle, []);\n\n  useEffect(() => {\n    const acc = new FrameAccumulator();\n    setScreenText(\"\");\n    setNotice(null);\n    const atBottom = (): boolean => {\n      const s = screenRef.current;\n      return !s || s.scrollHeight - s.scrollTop - s.clientHeight < 40;\n    };\n    const handle = client.openStream(props.edge, props.session, {\n      onHello: (h) => setEdgeOn(h.edgeConnected),\n      onPing: (p) => setEdgeOn(p.edgeConnected),\n      onStateChange: setStreamState,\n      onFrame: (content) => {\n        const stick = atBottom();\n        acc.feed(content);\n        setScreenText(acc.text);\n        if (stick) {\n          requestAnimationFrame(() => {\n            const s = screenRef.current;\n            if (s) s.scrollTop = s.scrollHeight;\n          });\n        }\n      },\n    });\n    return () => handle.close();\n  }, [client, props.edge, props.session]);\n\n  const meta =\n    streamState === \"open\"\n      ? edgeOn === false\n        ? `${props.edge} · edge offline`\n        : `${props.edge} · ${props.session}`\n      : streamState === \"closed\"\n        ? \"lukket\"\n        : \"forbinder…\";\n  const dotClass =\n    \"seti-chat__dot\" + (streamState === \"open\" && edgeOn ? \" is-on\" : edgeOn === false ? \" is-bad\" : \"\");\n\n  const submit = async (ev: Event) => {\n    ev.preventDefault();\n    if (!text.trim() || sending) return;\n    setSending(true);\n    setNotice(null);\n    const res = await client.sendText(props.edge, props.session, text);\n    if (res.ok) {\n      setText(\"\"); // only clear when actually delivered — text survives failures\n    } else {\n      setNotice(\"Ikke leveret — din tekst er bevaret\");\n    }\n    setSending(false);\n  };\n\n  const pressKey = async (key: SetiKey) => {\n    await client.sendKey(props.edge, props.session, key);\n  };\n\n  return (\n    <div class={\"seti-chat\" + (props.class ? ` ${props.class}` : \"\")} data-testid=\"seti-chat-root\">\n      <div class=\"seti-chat__header\" data-testid=\"seti-chat-header\">\n        <span class={dotClass} data-testid=\"seti-chat-status-dot\" />\n        <span class=\"seti-chat__meta\" data-testid=\"seti-chat-meta\">\n          {notice ?? meta}\n        </span>\n      </div>\n      <pre\n        ref={screenRef}\n        class={\"seti-chat__screen\" + (screenText ? \"\" : \" is-empty\")}\n        data-testid=\"seti-chat-screen\"\n      >\n        {screenText || \"Venter på den første frame fra edgen…\"}\n      </pre>\n      <div class=\"seti-chat__navkeys\" data-testid=\"seti-chat-navkeys\">\n        {NAV_KEYS.map((k) => (\n          <button\n            key={k.key}\n            type=\"button\"\n            title={k.title}\n            data-testid={`seti-chat-key-${k.key.toLowerCase()}`}\n            onClick={() => void pressKey(k.key)}\n          >\n            {k.label}\n          </button>\n        ))}\n      </div>\n      <form class=\"seti-chat__form\" data-testid=\"seti-chat-form\" onSubmit={submit}>\n        <input\n          class=\"seti-chat__input\"\n          data-testid=\"seti-chat-input\"\n          value={text}\n          placeholder={props.placeholder ?? \"Skriv til sessionen…\"}\n          autocomplete=\"off\"\n          onInput={(e) => setText((e.target as HTMLInputElement).value)}\n        />\n        <button\n          type=\"submit\"\n          class={\"seti-chat__send\" + (sending ? \" is-sending\" : \"\")}\n          data-testid=\"seti-chat-send\"\n          disabled={sending}\n        >\n          {sending ? \"…\" : \"Send\"}\n        </button>\n      </form>\n    </div>\n  );\n}\n\nexport { SetiClient } from \"./client\";\nexport type { SetiKey } from \"./types\";\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@broberg/seti-client",
+  "version": "0.1.0",
+  "description": "Typed client + frame-merge engine + Preact <SetiChat> component for buddycloud.cc SET/SETI live streaming chat (consumed through a host-app proxy from @broberg/seti-server).",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "files": ["dist", "README.md"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./preact": {
+      "types": "./dist/preact.d.ts",
+      "import": "./dist/preact.js",
+      "require": "./dist/preact.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  },
+  "peerDependenciesMeta": {
+    "preact": { "optional": true }
+  },
+  "devDependencies": {
+    "preact": "^10.24.3",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "keywords": [
+    "seti",
+    "set",
+    "streaming",
+    "terminal",
+    "tmux",
+    "sse",
+    "chat",
+    "preact",
+    "buddycloud",
+    "broberg"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/broberg-ai/components",
+    "directory": "packages/seti-client"
+  },
+  "publishConfig": { "access": "public" }
+}