@callembed/sdk 0.0.0-stage → 0.1.0

package/dist/ui/panel.js

@@ -0,0 +1,62 @@
+import { ensureStyles } from "./theme.js";
+function el(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className)
+        node.className = className;
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+/**
+ * Build the default call panel with `createElement` / `textContent` only.
+ * Never interprets copy strings as HTML.
+ */
+export function createCallPanel(options) {
+    ensureStyles();
+    const { copy, branding = true, container } = options;
+    const root = el("div", "ce-panel");
+    root.setAttribute("role", "dialog");
+    root.setAttribute("aria-label", copy.ariaLabel);
+    if (container)
+        root.dataset.embedded = "true";
+    const brandEl = el("p", "ce-brand", copy.brand);
+    if (!branding)
+        brandEl.hidden = true;
+    const titleEl = el("h2", "ce-title", copy.title);
+    const statusEl = el("p", "ce-status", copy.connecting);
+    statusEl.dataset.tone = "neutral";
+    const actions = el("div", "ce-actions");
+    const muteBtn = el("button", "ce-btn ce-btn-primary", copy.mute);
+    muteBtn.type = "button";
+    muteBtn.dataset.ce = "mute";
+    const hangupBtn = el("button", "ce-btn ce-btn-danger", copy.hangup);
+    hangupBtn.type = "button";
+    hangupBtn.dataset.ce = "hangup";
+    actions.append(muteBtn, hangupBtn);
+    const metaEl = el("p", "ce-meta", "");
+    metaEl.hidden = true;
+    metaEl.dataset.ce = "meta";
+    root.append(brandEl, titleEl, statusEl, actions, metaEl);
+    (container ?? document.body).appendChild(root);
+    return { root, brandEl, titleEl, statusEl, muteBtn, hangupBtn, metaEl };
+}
+/**
+ * Update panel status line (always via `textContent`).
+ */
+export function setPanelStatus(panel, status, copy, message) {
+    const labels = {
+        idle: copy.ready,
+        connecting: copy.connecting,
+        ringing: copy.ringing,
+        answered: copy.answered,
+        ended: copy.ended,
+        error: copy.error,
+    };
+    panel.statusEl.textContent = message || labels[status];
+    panel.statusEl.dataset.tone =
+        status === "error" ? "error" : status === "answered" ? "ok" : "neutral";
+    panel.root.dataset.status = status;
+}
+export function destroyPanel(panel) {
+    panel.root.remove();
+}

package/dist/ui/theme.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Inject default CallEmbed UI styles once.
+ *
+ * Defaults use `var(--name, fallback)` so `:root { --ce-accent: … }` overrides
+ * work. Do not re-declare the same custom properties on `.ce-panel` as solid
+ * values that shadow inherited `:root` tokens.
+ *
+ * Variables: `--ce-bg` `--ce-fg` `--ce-muted` `--ce-accent` `--ce-danger`
+ * `--ce-ok` `--ce-error` `--ce-border` `--ce-radius` `--ce-font` `--ce-shadow`
+ */
+export declare function ensureStyles(): void;
+/** Documented theme variable names for API reference / tests. */
+export declare const THEME_VARIABLES: readonly ["--ce-bg", "--ce-fg", "--ce-muted", "--ce-accent", "--ce-danger", "--ce-ok", "--ce-error", "--ce-border", "--ce-radius", "--ce-font", "--ce-shadow"];

package/dist/ui/theme.js

@@ -0,0 +1,124 @@
+const STYLE_ID = "callembed-sdk-styles";
+/**
+ * Inject default CallEmbed UI styles once.
+ *
+ * Defaults use `var(--name, fallback)` so `:root { --ce-accent: … }` overrides
+ * work. Do not re-declare the same custom properties on `.ce-panel` as solid
+ * values that shadow inherited `:root` tokens.
+ *
+ * Variables: `--ce-bg` `--ce-fg` `--ce-muted` `--ce-accent` `--ce-danger`
+ * `--ce-ok` `--ce-error` `--ce-border` `--ce-radius` `--ce-font` `--ce-shadow`
+ */
+export function ensureStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+:where(.ce-panel, .ce-launch) {
+  font-family: var(--ce-font, "Noto Sans TC", "IBM Plex Sans", "Segoe UI", sans-serif);
+  color: var(--ce-fg, #e8eef4);
+}
+.ce-panel {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 2147483000;
+  width: min(320px, calc(100vw - 2rem));
+  background: var(--ce-bg, linear-gradient(160deg, #121820, #1a2430));
+  border: 1px solid var(--ce-border, #2a3a46);
+  border-radius: var(--ce-radius, 0);
+  box-shadow: var(--ce-shadow, 0 12px 40px rgba(0,0,0,.35));
+  padding: 1rem;
+}
+.ce-panel[data-embedded="true"] {
+  position: relative;
+  right: auto;
+  bottom: auto;
+  width: 100%;
+  box-shadow: none;
+}
+.ce-brand {
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ce-muted, #9aadb8);
+  margin: 0 0 0.35rem;
+}
+.ce-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+.ce-status {
+  margin: 0 0 0.85rem;
+  color: var(--ce-muted, #9aadb8);
+  font-size: 0.9rem;
+  line-height: 1.4;
+  min-height: 1.25em;
+}
+.ce-status[data-tone="error"] { color: var(--ce-error, #f0c4c4); }
+.ce-status[data-tone="ok"] { color: var(--ce-ok, #9fd6c0); }
+.ce-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.ce-btn {
+  appearance: none;
+  border: 1px solid var(--ce-border, #2a3a46);
+  border-radius: var(--ce-radius, 0);
+  background: transparent;
+  color: inherit;
+  padding: 0.55rem 0.85rem;
+  font: inherit;
+  cursor: pointer;
+}
+.ce-btn:hover { border-color: var(--ce-accent, #5eb0d8); }
+.ce-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ce-btn-primary {
+  background: color-mix(in srgb, var(--ce-accent, #5eb0d8) 25%, transparent);
+  border-color: color-mix(in srgb, var(--ce-accent, #5eb0d8) 55%, var(--ce-border, #2a3a46));
+}
+.ce-btn-danger {
+  border-color: color-mix(in srgb, var(--ce-danger, #c44b4b) 55%, var(--ce-border, #2a3a46));
+  color: var(--ce-error, #f0c4c4);
+}
+.ce-meta {
+  margin: 0.75rem 0 0;
+  font-size: 0.75rem;
+  color: var(--ce-muted, #9aadb8);
+  word-break: break-all;
+}
+.ce-launch {
+  appearance: none;
+  display: inline-block;
+  border: 1px solid var(--ce-border, #2a3a46);
+  border-radius: var(--ce-radius, 0);
+  background: color-mix(in srgb, var(--ce-accent, #5eb0d8) 25%, transparent);
+  color: var(--ce-fg, #e8eef4);
+  padding: 0.7rem 1.1rem;
+  font-size: inherit;
+  cursor: pointer;
+}
+.ce-launch:hover { border-color: var(--ce-accent, #5eb0d8); }
+.ce-launch:disabled { opacity: 0.5; cursor: not-allowed; }
+`;
+    document.head.appendChild(style);
+}
+/** Documented theme variable names for API reference / tests. */
+export const THEME_VARIABLES = [
+    "--ce-bg",
+    "--ce-fg",
+    "--ce-muted",
+    "--ce-accent",
+    "--ce-danger",
+    "--ce-ok",
+    "--ce-error",
+    "--ce-border",
+    "--ce-radius",
+    "--ce-font",
+    "--ce-shadow",
+];

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@callembed/sdk",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "CallEmbed embeddable web SDK — headless core + optional UI",
+  "license": "MIT",
+  "author": "Sealby",
+  "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"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/callembed.iife.js"
+  ],
+  "unpkg": "./dist/callembed.iife.js",
+  "jsdelivr": "./dist/callembed.iife.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node ./scripts/build-iife.mjs",
+    "prepack": "npm run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "dev": "tsc -p tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "pack:verify": "node ./scripts/pack-verify.mjs",
+    "pack:verify:workflow": "node ./scripts/pack-verify-workflow-smoke.mjs"
+  },
+  "homepage": "https://callembed.sealby.me",
+  "keywords": [
+    "callembed",
+    "voice",
+    "webrtc",
+    "livekit",
+    "embed",
+    "sdk",
+    "realtime",
+    "customer-support"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "livekit-client": "^2.13.0"
+  },
+  "devDependencies": {
+    "esbuild": "0.25.4",
+    "jsdom": "26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "3.2.7"
+  }
+}