@callembed/sdk 0.0.0-stage → 0.1.2

package/dist/ui/copy.js

@@ -0,0 +1,45 @@
+import { enCopy } from "./copy-en.js";
+import { zhTwCopy } from "./copy-zh-tw.js";
+const PACKS = {
+    "zh-TW": { ...zhTwCopy },
+    en: { ...enCopy },
+};
+/**
+ * Resolve panel copy from locale + safe string overrides.
+ * Override values are coerced to strings (never used as HTML).
+ */
+export function resolveCopy(runtime) {
+    const locale = runtime?.locale ?? "en";
+    const base = { ...(PACKS[locale] ?? PACKS.en) };
+    const overrides = runtime?.copyOverrides ?? {};
+    for (const [key, value] of Object.entries(overrides)) {
+        if (key in base && value !== undefined && value !== null) {
+            base[key] = String(value);
+        }
+    }
+    return base;
+}
+/**
+ * Map machine error codes to friendly panel copy (never show raw codes to B).
+ */
+/**
+ * Map machine error codes to friendly panel copy.
+ * Unknown codes use the locale generic `error` string — never raw server text.
+ */
+export function friendlyErrorMessage(copy, code, _fallback) {
+    switch (code) {
+        case "no_agent_online":
+            return copy.errNoAgent;
+        case "quota_exceeded":
+            return copy.errQuota;
+        case "mic_permission_denied":
+            return copy.errMicDenied;
+        case "no_microphone":
+            return copy.errNoMic;
+        case "connection_failed":
+            return copy.errConnection;
+        default:
+            return copy.error;
+    }
+}
+export { zhTwCopy, enCopy };

package/dist/ui/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Optional CallEmbed UI layer (panel, launch button, theme, copy).
+ * Depends on the headless core; core never imports this module.
+ *
+ * Importing this package does **not** change `CallEmbed.startCall` behaviour.
+ * Call {@link enableDefaultUi} or {@link mountButton} to attach the default panel.
+ */
+export { enableDefaultUi, createPanelHooks } from "./bind.js";
+export { mountButton, type MountButtonOptions, type MountButtonResult, } from "./button.js";
+export { createCallPanel, destroyPanel, setPanelStatus, type CallPanelElements, type CreatePanelOptions, } from "./panel.js";
+export { ensureStyles, THEME_VARIABLES } from "./theme.js";
+export { resolveCopy, friendlyErrorMessage, zhTwCopy, enCopy, type PanelCopy, } from "./copy.js";

package/dist/ui/index.js

@@ -0,0 +1,12 @@
+/**
+ * Optional CallEmbed UI layer (panel, launch button, theme, copy).
+ * Depends on the headless core; core never imports this module.
+ *
+ * Importing this package does **not** change `CallEmbed.startCall` behaviour.
+ * Call {@link enableDefaultUi} or {@link mountButton} to attach the default panel.
+ */
+export { enableDefaultUi, createPanelHooks } from "./bind.js";
+export { mountButton, } from "./button.js";
+export { createCallPanel, destroyPanel, setPanelStatus, } from "./panel.js";
+export { ensureStyles, THEME_VARIABLES } from "./theme.js";
+export { resolveCopy, friendlyErrorMessage, zhTwCopy, enCopy, } from "./copy.js";

package/dist/ui/panel.d.ts

@@ -0,0 +1,26 @@
+import type { CallStatus } from "../core/types.js";
+import type { PanelCopy } from "./copy-zh-tw.js";
+export interface CallPanelElements {
+    root: HTMLElement;
+    brandEl: HTMLElement;
+    titleEl: HTMLElement;
+    statusEl: HTMLElement;
+    muteBtn: HTMLButtonElement;
+    hangupBtn: HTMLButtonElement;
+    metaEl: HTMLElement;
+}
+export interface CreatePanelOptions {
+    copy: PanelCopy;
+    branding?: boolean;
+    container?: HTMLElement;
+}
+/**
+ * Build the default call panel with `createElement` / `textContent` only.
+ * Never interprets copy strings as HTML.
+ */
+export declare function createCallPanel(options: CreatePanelOptions): CallPanelElements;
+/**
+ * Update panel status line (always via `textContent`).
+ */
+export declare function setPanelStatus(panel: CallPanelElements, status: CallStatus, copy: PanelCopy, message?: string): void;
+export declare function destroyPanel(panel: CallPanelElements): void;

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,78 @@
 {
   "name": "@callembed/sdk",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TonyFeng1203/CallEmbed.git",
+    "directory": "packages/sdk"
+  },
+  "bugs": {
+    "url": "https://github.com/TonyFeng1203/CallEmbed/issues"
+  },
+  "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"
+  }
+}