@mihe-dev/js 0.0.0-stage → 0.1.0

package/dist/widget/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../../js/src/widget/panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAsB,KAAK,IAAI,EAAE,KAAK,SAAS,EAAsB,MAAM,SAAS,CAAC;AAI5F,eAAO,MAAM,mBAAmB,EAAE,SAAS,EAA2B,CAAC;AAEvE,MAAM,WAAW,YAAY;IAC3B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,KAAK;IAad,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,OAAO;IAbjB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAO;IAC/B,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAc;IAClC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAoB;IAChD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAmB;IACzC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoB;IAC/C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IAC5C,gFAAgF;IAChF,OAAO,CAAC,KAAK,CAAiB;gBAGX,IAAI,EAAE,IAAI,EACnB,OAAO,EAAE,YAAY;IAiD/B,UAAU,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI;IAIvC,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAgC9B,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,cAAc;CA6CvB"}

package/dist/widget/panel.js

@@ -0,0 +1,239 @@
+/**
+ * The conversation: transcript, confirmation cards, composer, and in the
+ * classic form the microphone.
+ *
+ * Built once and updated. The composer and the microphone buttons in
+ * particular are never rebuilt: a rebuilt input loses what the user was
+ * typing, and a push-to-talk button replaced mid-press loses its pointer
+ * capture, so the release lands elsewhere and the microphone stays open.
+ */
+import { ASSISTANT_PANEL_ID } from "../mihe.js";
+import { confirmationCard } from "./card.js";
+import { h, replace, setAttrs } from "./dom.js";
+export const DEFAULT_VOICE_MODES = ["hands-free", "hold"];
+export class Panel {
+    mihe;
+    options;
+    root;
+    heading;
+    dot;
+    closeButton;
+    transcript;
+    input;
+    sendButton;
+    voiceControl;
+    /** What the transcript was last drawn from, so it is redrawn only on change. */
+    drawn = [];
+    constructor(mihe, options) {
+        this.mihe = mihe;
+        this.options = options;
+        this.heading = document.createTextNode("");
+        this.dot = h("span", { class: "status-dot", attrs: { "aria-hidden": "true" } });
+        this.closeButton = h("button", {
+            class: "icon-button",
+            attrs: { type: "button", "aria-label": "Close assistant" },
+            on: { click: () => this.mihe.close() },
+        }, "✕");
+        this.transcript = h("div", { class: "transcript" });
+        this.input = h("input", {
+            class: "input",
+            attrs: { "aria-label": "Message" },
+            on: { input: () => this.syncSend(this.mihe.getState()) },
+        });
+        this.sendButton = h("button", { class: "send", attrs: { type: "submit" } }, "Send");
+        this.voiceControl = new VoiceControl(mihe);
+        const composer = h("form", {
+            class: "composer",
+            on: {
+                submit: (event) => {
+                    event.preventDefault();
+                    this.mihe.send(this.input.value);
+                    this.input.value = "";
+                    this.syncSend(this.mihe.getState());
+                },
+            },
+        }, this.voiceControl.root, this.input, this.sendButton);
+        this.root = h("section", { class: "panel", attrs: { id: ASSISTANT_PANEL_ID } }, h("header", { class: "header" }, h("div", { class: "header-title" }, this.dot, this.heading), this.closeButton), this.transcript, composer);
+    }
+    setOptions(options) {
+        this.options = options;
+    }
+    update(state) {
+        const heading = this.options.title ?? state.assistantName ?? "Assistant";
+        this.heading.data = heading;
+        this.root.setAttribute("aria-label", heading);
+        this.dot.classList.toggle("open", state.connection === "open");
+        this.closeButton.hidden = !this.options.showClose;
+        this.input.placeholder = this.options.placeholder ?? "Ask me anything about this app…";
+        this.input.disabled = state.connection !== "open";
+        this.syncSend(state);
+        // The modes the app allows. Offering one it does not would be a button
+        // the runtime refuses.
+        const modes = state.widgetSettings?.voiceModes ?? DEFAULT_VOICE_MODES;
+        const showVoice = this.options.showVoice && state.voice.available && modes.length > 0;
+        this.voiceControl.root.hidden = !showVoice;
+        if (showVoice) {
+            this.voiceControl.update(state.voice, state.connection !== "open", modes);
+        }
+        const inputs = [
+            state.messages,
+            state.proposals,
+            state.voice.state === "connecting",
+            state.voice.notice,
+            state.lastError,
+            state.connection,
+        ];
+        if (inputs.every((value, index) => value === this.drawn[index]))
+            return;
+        this.drawn = inputs;
+        this.drawTranscript(state);
+    }
+    syncSend(state) {
+        this.sendButton.disabled = state.busy || !this.input.value.trim() || state.connection !== "open";
+    }
+    drawTranscript(state) {
+        replace(this.transcript, state.messages.length === 0 &&
+            h("p", { class: "empty" }, "Ask where something is, what a screen does, or for help getting something done."), ...state.messages.map((message) => h("div", { class: message.role === "user" ? "bubble-user" : "bubble-assistant" }, message.text, message.streaming && message.text === "" && h("span", { class: "thinking" }, "thinking…"), message.sources && message.sources.length > 0 &&
+            // Titles only. The snippet is what the model read, not something
+            // a reader needs.
+            h("div", { class: "sources" }, ...message.sources.map((source) => h("span", { class: "source" }, source.url && /^https?:\/\//i.test(source.url)
+                ? h("a", { attrs: { href: source.url, target: "_blank", rel: "noreferrer noopener" } }, source.title)
+                : source.title))))), ...state.proposals.map((proposal) => confirmationCard(proposal, this.mihe.respondToProposal)), 
+        // Setting up a voice session takes a moment, and the microphone stays
+        // shut until it finishes (amendment 32). Without a word here the user
+        // talks into a session that is not listening yet.
+        state.voice.state === "connecting" && h("div", { class: "voice-notice" }, "Setting up the microphone…"), state.voice.notice && h("div", { class: "voice-notice" }, state.voice.notice), state.lastError && h("div", { class: "error" }, state.lastError), state.connection !== "open" &&
+            h("div", { class: "notice" }, state.connection === "closed" ? "Disconnected." : "Connecting…"));
+        this.transcript.scrollTo?.({ top: this.transcript.scrollHeight, behavior: "smooth" });
+    }
+}
+/**
+ * The microphone, in whichever of its two modes is running.
+ *
+ * Idle, it offers both: hold to talk, or hands-free. Once a session is live
+ * only the running one is shown, with a way out.
+ */
+class VoiceControl {
+    mihe;
+    root;
+    hold;
+    handsFree;
+    stopHandsFree;
+    pulse;
+    constructor(mihe) {
+        this.mihe = mihe;
+        this.hold = pushToTalk(mihe);
+        this.handsFree = h("button", {
+            class: "hands-free",
+            attrs: {
+                type: "button",
+                "aria-label": "Start hands-free voice",
+                title: "Hands-free — talk without holding anything",
+            },
+            on: { click: () => this.mihe.voice.start({ handsFree: true }) },
+        }, "∞");
+        this.pulse = h("span", { class: "pulse" });
+        this.stopHandsFree = h("button", {
+            class: "mic live",
+            attrs: { type: "button", "aria-label": "Stop hands-free voice", "aria-pressed": "true" },
+            on: { click: () => this.mihe.voice.stop() },
+        }, this.pulse);
+        this.root = h("span", { attrs: { style: "display: contents" } }, this.hold, this.handsFree, this.stopHandsFree);
+    }
+    update(voice, disabled, modes) {
+        // Connecting is not live: the microphone is shut until the provider
+        // accepts its configuration, and a live-looking button invites talking
+        // into a session that cannot hear yet.
+        const live = voice.state !== "idle" && voice.state !== "error" && voice.state !== "connecting";
+        const liveHandsFree = live && voice.handsFree;
+        this.stopHandsFree.hidden = !liveHandsFree;
+        this.hold.hidden = liveHandsFree || (!live && !modes.includes("hold"));
+        this.handsFree.hidden = live || !modes.includes("hands-free");
+        this.stopHandsFree.disabled = disabled;
+        this.handsFree.disabled = disabled;
+        this.stopHandsFree.title =
+            voice.state === "speaking" ? "Speaking — just talk to interrupt" : "Listening — say anything";
+        // Speaking and listening pulse at different rates: a hands-free user
+        // cannot tell from a still icon whether the microphone is open.
+        this.pulse.classList.toggle("fast", voice.state === "speaking");
+        const connecting = voice.state === "connecting";
+        const recording = voice.state === "recording";
+        setAttrs(this.hold, {
+            "aria-label": connecting
+                ? "Setting up the microphone"
+                : !live
+                    ? "Start voice"
+                    : recording
+                        ? "Release to send"
+                        : "Hold to speak",
+            "aria-busy": connecting ? "true" : undefined,
+            "aria-pressed": recording ? "true" : "false",
+            title: voice.state === "thinking" ? "Thinking…" : voice.state === "speaking" ? "Speaking — press to interrupt" : undefined,
+        });
+        this.hold.disabled = disabled || connecting;
+        this.hold.classList.toggle("recording", recording);
+        this.hold.classList.toggle("live", live && !recording);
+        this.hold.textContent = voice.state === "thinking" ? "…" : "\u{1F399}";
+    }
+}
+/**
+ * The push-to-talk button: hold to speak, release to send, the same gesture
+ * on a mouse, a touchscreen and a keyboard.
+ *
+ * - **Pointer down, not click,** because the press begins the utterance and
+ *   the release ends it. It is also the gesture iOS Safari needs before any
+ *   audio, which is why the first press opens the session.
+ * - **Pointer capture,** so a finger that slides off still ends the
+ *   utterance on release.
+ * - **Space and Enter, held,** with key repeat ignored.
+ *
+ * State is read at the moment of each event, never captured.
+ */
+function pushToTalk(mihe) {
+    const phase = () => {
+        const state = mihe.getState().voice.state;
+        const connecting = state === "connecting";
+        return { connecting, live: state !== "idle" && state !== "error" && !connecting };
+    };
+    const begin = (button, pointerId) => {
+        const { connecting, live } = phase();
+        if (connecting)
+            return;
+        if (!live) {
+            mihe.voice.start();
+            return;
+        }
+        if (pointerId !== undefined)
+            button.setPointerCapture?.(pointerId);
+        mihe.voice.press();
+    };
+    const end = () => {
+        if (phase().live)
+            mihe.voice.release();
+    };
+    const button = h("button", {
+        class: "mic",
+        attrs: { type: "button" },
+        on: {
+            pointerdown: (event) => begin(button, event.pointerId),
+            pointerup: end,
+            pointercancel: end,
+            keydown: (event) => {
+                if (event.repeat)
+                    return;
+                if (event.key === " " || event.key === "Enter") {
+                    event.preventDefault();
+                    begin(button);
+                }
+            },
+            keyup: (event) => {
+                if (event.key === " " || event.key === "Enter") {
+                    event.preventDefault();
+                    end();
+                }
+            },
+        },
+    }, "\u{1F399}");
+    return button;
+}
+//# sourceMappingURL=panel.js.map

package/dist/widget/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../../js/src/widget/panel.ts"],"names":[],"mappings":"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"}

package/dist/widget/styles.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The widget's stylesheet, inside its shadow root.
+ *
+ * The shadow root is what keeps the host page out: a Tailwind reset or a
+ * site's `button { … }` cannot select anything in here, and nothing here can
+ * select the page. Inherited properties still cross the boundary, which is
+ * why `:host` resets them all.
+ *
+ * Theming is through custom properties set on the element, the one styling
+ * hook a shadow root lets through by design:
+ *
+ * ```css
+ * mihe-assistant { --mihe-accent: #0a7d5a; --mihe-radius: 10px; }
+ * ```
+ *
+ * The values match the React widget's.
+ */
+export declare const LAUNCHER_BG = "#221f1b";
+export declare const LAUNCHER_INK = "#eae7e4";
+export declare const LAUNCHER_VOICE = "#5ac8cd";
+export declare const STYLES = "\n:host {\n  all: initial;\n  --mihe-accent: #4f7cff;\n  --mihe-radius: 14px;\n  --mihe-font: system-ui, -apple-system, 'Segoe UI', sans-serif;\n  --mihe-z: 2147482000;\n}\n:host([layout=\"inline\"]) { display: block; width: 100%; height: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n[hidden] { display: none !important; }\nbutton { font: inherit; color: inherit; margin: 0; }\n\n.panel {\n  display: flex; flex-direction: column; width: 100%; height: 100%;\n  background: #fff; color: #0f172a;\n  border-radius: var(--mihe-radius); border: 1px solid #e2e8f0;\n  box-shadow: 0 20px 50px rgba(15,23,42,0.22);\n  font: 14px/1.5 var(--mihe-font); overflow: hidden;\n}\n.floating {\n  position: fixed; bottom: 20px;\n  width: min(380px, calc(100vw - 40px)); height: min(560px, calc(100vh - 40px));\n  z-index: var(--mihe-z);\n}\n.floating.right { right: 20px; }\n.floating.left { left: 20px; }\n.header {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 12px 14px; border-bottom: 1px solid #e2e8f0; font-weight: 600;\n}\n.header-title { display: flex; align-items: center; gap: 8px; }\n.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #f59e0b; }\n.status-dot.open { background: #22c55e; }\n.icon-button { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #64748b; }\n.transcript { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }\n.empty { color: #64748b; margin: 0; }\n.bubble-user, .bubble-assistant { max-width: 85%; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }\n.bubble-user { align-self: flex-end; background: var(--mihe-accent); color: #fff; border-radius: 12px 12px 2px 12px; }\n.bubble-assistant { align-self: flex-start; background: #f1f5f9; border-radius: 12px 12px 12px 2px; }\n.thinking { color: #64748b; font-style: italic; }\n.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }\n.source { font-size: 11px; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; }\n.source a { color: inherit; text-decoration: none; }\n.error { background: #fef2f2; color: #991b1b; padding: 8px 10px; border-radius: 8px; font-size: 13px; }\n.notice { color: #64748b; font-size: 13px; text-align: center; }\n.voice-notice { background: #f1f5f9; color: #475569; padding: 8px 10px; border-radius: 8px; font-size: 13px; }\n.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e2e8f0; }\n.input {\n  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid #cbd5e1;\n  font: 14px var(--mihe-font); color: #0f172a; background: #fff; outline: none;\n}\n.send {\n  padding: 9px 16px; border-radius: 8px; border: none; background: var(--mihe-accent);\n  color: #fff; cursor: pointer; font: 600 13px var(--mihe-font);\n}\n.send:disabled { opacity: 0.6; cursor: default; }\n.mic {\n  width: 38px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer;\n  font-size: 16px; user-select: none; -webkit-user-select: none; touch-action: none;\n}\n.mic.live { border-color: var(--mihe-accent); }\n.mic.recording { border-color: #dc2626; background: #fef2f2; }\n.hands-free {\n  width: 30px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #475569;\n  cursor: pointer; font-size: 15px; user-select: none; -webkit-user-select: none;\n}\n.pulse {\n  display: block; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%;\n  background: var(--mihe-accent); animation: mihe-pulse 2s ease-in-out infinite;\n}\n.pulse.fast { animation-duration: 0.8s; }\n@keyframes mihe-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.45; } }\n\n.card {\n  border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; background: #fff; color: #0f172a;\n  box-shadow: 0 2px 8px rgba(15,23,42,0.06); font: 14px/1.5 var(--mihe-font);\n}\n.card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }\n.risk { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: #fef3c7; color: #92400e; }\n.risk-high { background: #fee2e2; color: #991b1b; }\n.card-description { margin: 0 0 10px; color: #475569; font-size: 13px; }\n.card-input { margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }\n.card-row { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }\n.card-key { color: #64748b; min-width: 90px; margin: 0; }\n.card-value { margin: 0; font-weight: 500; overflow-wrap: anywhere; min-width: 0; flex: 1 1 160px; }\n.input-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }\n.input-text { white-space: pre-wrap; }\n.card-actions { display: flex; gap: 8px; justify-content: flex-end; }\n.button-secondary {\n  padding: 7px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff;\n  cursor: pointer; font: 500 13px var(--mihe-font);\n}\n.button-primary {\n  padding: 7px 14px; border-radius: 8px; border: none; background: var(--mihe-accent); color: #fff;\n  cursor: pointer; font: 600 13px var(--mihe-font);\n}\n\n.launcher {\n  position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%;\n  border: none; padding: 0; display: grid; place-items: center; overflow: hidden;\n  background: #221f1b; color: #eae7e4; cursor: pointer;\n  box-shadow: 0 8px 24px rgba(15,23,42,0.25); z-index: var(--mihe-z);\n}\n.launcher-image { width: 100%; height: 100%; object-fit: cover; display: block; }\n\n.orb {\n  position: fixed; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%;\n  background: #221f1b; color: #eae7e4; box-shadow: 0 8px 24px rgba(15,23,42,0.25);\n  z-index: var(--mihe-z); cursor: pointer; transition: left 180ms ease, top 180ms ease;\n  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.orb.dragging { cursor: grabbing; transition: none; }\n.orb:disabled { cursor: default; }\n.face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; pointer-events: none; }\n.ring {\n  position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #5ac8cd;\n  pointer-events: none; transform-origin: center; will-change: transform;\n}\n.ring.idle { border-color: transparent; }\n.ring.recording { border-color: #e5484d; border-width: 3px; }\n.ring.thinking, .ring.connecting { border-style: dashed; }\n.ring.listening { animation: mihe-orb-breathe 2.4s ease-in-out infinite; }\n.ring.thinking { animation: mihe-orb-spin 1.2s linear infinite; }\n.ring.connecting { animation: mihe-orb-spin 2.4s linear infinite; }\n@keyframes mihe-orb-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }\n@keyframes mihe-orb-spin { to { rotate: 360deg; } }\n.stop {\n  position: fixed; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15,23,42,0.12);\n  background: #fff; box-shadow: 0 4px 14px rgba(15,23,42,0.18); display: grid; place-items: center;\n  cursor: pointer; z-index: var(--mihe-z);\n}\n.stop-square { width: 12px; height: 12px; border-radius: 2px; background: #0f172a; }\n.popover {\n  position: fixed; max-width: min(340px, calc(100vw - 40px)); z-index: calc(var(--mihe-z) + 1);\n  display: flex; flex-direction: column; gap: 8px; font: 14px/1.45 var(--mihe-font);\n}\n.popover.cards { width: 320px; }\n.menu-item {\n  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px;\n  border-radius: 999px; border: 1px solid rgba(15,23,42,0.1); background: #fff; color: #0f172a;\n  box-shadow: 0 6px 18px rgba(15,23,42,0.16); cursor: pointer; font: 500 14px var(--mihe-font);\n}\n.menu-icon {\n  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;\n  background: #221f1b; color: #5ac8cd;\n}\n.orb-bubble {\n  padding: 8px 12px; border-radius: 12px; background: #fff; color: #0f172a;\n  border: 1px solid rgba(15,23,42,0.1); box-shadow: 0 6px 18px rgba(15,23,42,0.16);\n}\n.orb-bubble.error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }\n\n@media (prefers-reduced-motion: reduce) {\n  .pulse, .ring { animation: none !important; }\n  .ring { transform: none !important; }\n  .orb { transition: none; }\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/widget/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../js/src/widget/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,eAAO,MAAM,MAAM,gzQA+JlB,CAAC"}

package/dist/widget/styles.js

@@ -0,0 +1,181 @@
+/**
+ * The widget's stylesheet, inside its shadow root.
+ *
+ * The shadow root is what keeps the host page out: a Tailwind reset or a
+ * site's `button { … }` cannot select anything in here, and nothing here can
+ * select the page. Inherited properties still cross the boundary, which is
+ * why `:host` resets them all.
+ *
+ * Theming is through custom properties set on the element, the one styling
+ * hook a shadow root lets through by design:
+ *
+ * ```css
+ * mihe-assistant { --mihe-accent: #0a7d5a; --mihe-radius: 10px; }
+ * ```
+ *
+ * The values match the React widget's.
+ */
+export const LAUNCHER_BG = "#221f1b";
+export const LAUNCHER_INK = "#eae7e4";
+export const LAUNCHER_VOICE = "#5ac8cd";
+export const STYLES = `
+:host {
+  all: initial;
+  --mihe-accent: #4f7cff;
+  --mihe-radius: 14px;
+  --mihe-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --mihe-z: 2147482000;
+}
+:host([layout="inline"]) { display: block; width: 100%; height: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+[hidden] { display: none !important; }
+button { font: inherit; color: inherit; margin: 0; }
+
+.panel {
+  display: flex; flex-direction: column; width: 100%; height: 100%;
+  background: #fff; color: #0f172a;
+  border-radius: var(--mihe-radius); border: 1px solid #e2e8f0;
+  box-shadow: 0 20px 50px rgba(15,23,42,0.22);
+  font: 14px/1.5 var(--mihe-font); overflow: hidden;
+}
+.floating {
+  position: fixed; bottom: 20px;
+  width: min(380px, calc(100vw - 40px)); height: min(560px, calc(100vh - 40px));
+  z-index: var(--mihe-z);
+}
+.floating.right { right: 20px; }
+.floating.left { left: 20px; }
+.header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 14px; border-bottom: 1px solid #e2e8f0; font-weight: 600;
+}
+.header-title { display: flex; align-items: center; gap: 8px; }
+.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #f59e0b; }
+.status-dot.open { background: #22c55e; }
+.icon-button { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #64748b; }
+.transcript { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
+.empty { color: #64748b; margin: 0; }
+.bubble-user, .bubble-assistant { max-width: 85%; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.bubble-user { align-self: flex-end; background: var(--mihe-accent); color: #fff; border-radius: 12px 12px 2px 12px; }
+.bubble-assistant { align-self: flex-start; background: #f1f5f9; border-radius: 12px 12px 12px 2px; }
+.thinking { color: #64748b; font-style: italic; }
+.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
+.source { font-size: 11px; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; }
+.source a { color: inherit; text-decoration: none; }
+.error { background: #fef2f2; color: #991b1b; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
+.notice { color: #64748b; font-size: 13px; text-align: center; }
+.voice-notice { background: #f1f5f9; color: #475569; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
+.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e2e8f0; }
+.input {
+  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid #cbd5e1;
+  font: 14px var(--mihe-font); color: #0f172a; background: #fff; outline: none;
+}
+.send {
+  padding: 9px 16px; border-radius: 8px; border: none; background: var(--mihe-accent);
+  color: #fff; cursor: pointer; font: 600 13px var(--mihe-font);
+}
+.send:disabled { opacity: 0.6; cursor: default; }
+.mic {
+  width: 38px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer;
+  font-size: 16px; user-select: none; -webkit-user-select: none; touch-action: none;
+}
+.mic.live { border-color: var(--mihe-accent); }
+.mic.recording { border-color: #dc2626; background: #fef2f2; }
+.hands-free {
+  width: 30px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #475569;
+  cursor: pointer; font-size: 15px; user-select: none; -webkit-user-select: none;
+}
+.pulse {
+  display: block; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%;
+  background: var(--mihe-accent); animation: mihe-pulse 2s ease-in-out infinite;
+}
+.pulse.fast { animation-duration: 0.8s; }
+@keyframes mihe-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.45; } }
+
+.card {
+  border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; background: #fff; color: #0f172a;
+  box-shadow: 0 2px 8px rgba(15,23,42,0.06); font: 14px/1.5 var(--mihe-font);
+}
+.card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+.risk { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: #fef3c7; color: #92400e; }
+.risk-high { background: #fee2e2; color: #991b1b; }
+.card-description { margin: 0 0 10px; color: #475569; font-size: 13px; }
+.card-input { margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }
+.card-row { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
+.card-key { color: #64748b; min-width: 90px; margin: 0; }
+.card-value { margin: 0; font-weight: 500; overflow-wrap: anywhere; min-width: 0; flex: 1 1 160px; }
+.input-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
+.input-text { white-space: pre-wrap; }
+.card-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.button-secondary {
+  padding: 7px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff;
+  cursor: pointer; font: 500 13px var(--mihe-font);
+}
+.button-primary {
+  padding: 7px 14px; border-radius: 8px; border: none; background: var(--mihe-accent); color: #fff;
+  cursor: pointer; font: 600 13px var(--mihe-font);
+}
+
+.launcher {
+  position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%;
+  border: none; padding: 0; display: grid; place-items: center; overflow: hidden;
+  background: ${LAUNCHER_BG}; color: ${LAUNCHER_INK}; cursor: pointer;
+  box-shadow: 0 8px 24px rgba(15,23,42,0.25); z-index: var(--mihe-z);
+}
+.launcher-image { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+.orb {
+  position: fixed; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%;
+  background: ${LAUNCHER_BG}; color: ${LAUNCHER_INK}; box-shadow: 0 8px 24px rgba(15,23,42,0.25);
+  z-index: var(--mihe-z); cursor: pointer; transition: left 180ms ease, top 180ms ease;
+  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.orb.dragging { cursor: grabbing; transition: none; }
+.orb:disabled { cursor: default; }
+.face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; pointer-events: none; }
+.ring {
+  position: absolute; inset: -6px; border-radius: 50%; border: 2px solid ${LAUNCHER_VOICE};
+  pointer-events: none; transform-origin: center; will-change: transform;
+}
+.ring.idle { border-color: transparent; }
+.ring.recording { border-color: #e5484d; border-width: 3px; }
+.ring.thinking, .ring.connecting { border-style: dashed; }
+.ring.listening { animation: mihe-orb-breathe 2.4s ease-in-out infinite; }
+.ring.thinking { animation: mihe-orb-spin 1.2s linear infinite; }
+.ring.connecting { animation: mihe-orb-spin 2.4s linear infinite; }
+@keyframes mihe-orb-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
+@keyframes mihe-orb-spin { to { rotate: 360deg; } }
+.stop {
+  position: fixed; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15,23,42,0.12);
+  background: #fff; box-shadow: 0 4px 14px rgba(15,23,42,0.18); display: grid; place-items: center;
+  cursor: pointer; z-index: var(--mihe-z);
+}
+.stop-square { width: 12px; height: 12px; border-radius: 2px; background: #0f172a; }
+.popover {
+  position: fixed; max-width: min(340px, calc(100vw - 40px)); z-index: calc(var(--mihe-z) + 1);
+  display: flex; flex-direction: column; gap: 8px; font: 14px/1.45 var(--mihe-font);
+}
+.popover.cards { width: 320px; }
+.menu-item {
+  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px;
+  border-radius: 999px; border: 1px solid rgba(15,23,42,0.1); background: #fff; color: #0f172a;
+  box-shadow: 0 6px 18px rgba(15,23,42,0.16); cursor: pointer; font: 500 14px var(--mihe-font);
+}
+.menu-icon {
+  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
+  background: ${LAUNCHER_BG}; color: ${LAUNCHER_VOICE};
+}
+.orb-bubble {
+  padding: 8px 12px; border-radius: 12px; background: #fff; color: #0f172a;
+  border: 1px solid rgba(15,23,42,0.1); box-shadow: 0 6px 18px rgba(15,23,42,0.16);
+}
+.orb-bubble.error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
+
+@media (prefers-reduced-motion: reduce) {
+  .pulse, .ring { animation: none !important; }
+  .ring { transform: none !important; }
+  .orb { transition: none; }
+}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/widget/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../js/src/widget/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC;AACrC,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;AACtC,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAqGN,WAAW,YAAY,YAAY;;;;;;;gBAOnC,WAAW,YAAY,YAAY;;;;;;;;;2EASwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BzE,WAAW,YAAY,cAAc;;;;;;;;;;;;;CAapD,CAAC"}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@mihe-dev/js",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Embed an app-aware AI assistant in any web app, with or without a framework.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./mihe.min.js": "./dist/mihe.min.js",
+    "./mihe.iife.min.js": "./dist/mihe.iife.min.js",
+    "./package.json": "./package.json"
+  },
+  "jsdelivr": "./dist/mihe.iife.min.js",
+  "unpkg": "./dist/mihe.iife.min.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "homepage": "https://mihe.dev/docs",
+  "keywords": [
+    "ai",
+    "assistant",
+    "copilot",
+    "agent",
+    "vanilla",
+    "javascript",
+    "voice",
+    "mihe"
+  ],
+  "dependencies": {
+    "@mihe-dev/protocol": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}