@clipbus/plugin-sdk 0.8.4 → 0.8.5

package/dist/preview/index.cjs

@@ -0,0 +1,1041 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/preview/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_THEME_KEY: () => DEFAULT_THEME_KEY,
+  PLUGIN_CALL_HANDLER_NAME: () => PLUGIN_CALL_HANDLER_NAME,
+  THEME_CSS_VAR_NAMES: () => THEME_CSS_VAR_NAMES,
+  WINDOW_SET_HEIGHT_METHOD: () => WINDOW_SET_HEIGHT_METHOD,
+  applyThemeCssVars: () => applyThemeCssVars,
+  clampWidth: () => clampWidth,
+  computeWirePayloads: () => computeWirePayloads,
+  createPreviewWorkbench: () => createPreviewWorkbench,
+  defaultDarkTheme: () => defaultDarkTheme,
+  defaultLightTheme: () => defaultLightTheme,
+  getThemePreset: () => getThemePreset,
+  groupScenariosByMode: () => groupScenariosByMode,
+  injectWire: () => injectWire,
+  installFakeHost: () => installFakeHost,
+  previewThemePresets: () => previewThemePresets,
+  resolveViewportWidth: () => resolveViewportWidth
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/preview/styles.ts
+var previewStyles = `
+/* \u2500\u2500 CSS variable defaults (graphite dark) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb {
+  --cbp-wb-backdrop: #16181C;
+  --cbp-wb-accent: #43C6AC;
+  --cbp-wb-surface-elevated: rgba(35,37,42,.78);
+  --cbp-wb-border: rgba(255,255,255,.10);
+  --cbp-wb-text: #F3F4F6;
+  --cbp-wb-text-secondary: #C2C6CF;
+}
+
+/* \u2500\u2500 Root chrome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb {
+  min-height: 100%;
+  padding: 24px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+  color: var(--cbp-wb-text);
+  background: var(--cbp-wb-backdrop);
+}
+
+*, .cbp-wb * {
+  box-sizing: border-box;
+}
+
+/* \u2500\u2500 Theme-aware scrollbars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* The default OS / WebKit scrollbar is an opaque bar (white on dark themes)
+   that reads as jarring. Restyle every scroll area under the workbench \u2014 chrome
+   (log panel) AND plugin content inside the slot \u2014 into a thin, translucent,
+   theme-synced overlay that mirrors the native host's subtle scrollbars. The
+   --cbp-wb-* vars cascade from the workbench root into the plugin slot, so one
+   rule set covers both surfaces and recolours automatically on theme switch. */
+.cbp-wb,
+.cbp-wb * {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--cbp-wb-text-secondary) 30%, transparent) transparent;
+}
+
+.cbp-wb ::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+.cbp-wb ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cbp-wb ::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--cbp-wb-text-secondary) 30%, transparent);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.cbp-wb ::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--cbp-wb-text-secondary) 50%, transparent);
+  background-clip: padding-box;
+}
+
+.cbp-wb ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* \u2500\u2500 Controls bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb__controls {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  margin-bottom: 20px;
+}
+
+.cbp-wb__control {
+  display: grid;
+  gap: 6px;
+}
+
+.cbp-wb__control-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--cbp-wb-text-secondary);
+}
+
+.cbp-wb__control select,
+.cbp-wb__scenario-select {
+  min-width: 160px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--cbp-wb-border);
+  background: color-mix(in srgb, var(--cbp-wb-backdrop) 70%, transparent);
+  color: var(--cbp-wb-text);
+  font-size: 13px;
+  font-family: inherit;
+}
+
+/* \u2500\u2500 Width slider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb__width-slider {
+  width: 140px;
+  accent-color: var(--cbp-wb-accent);
+  cursor: pointer;
+}
+
+/* \u2500\u2500 Canvas layout (host frame on top, native-call log below) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb__canvas {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+}
+
+/* Host frame hugs the fixed-width viewport (no flex:1 stretch) so a wide
+   browser window leaves neutral backdrop on the sides instead of a large
+   empty framed area \u2014 the centered, native-like card the viewport expects. */
+.cbp-wb__host-frame {
+  min-width: 0;
+  padding: 16px;
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--cbp-wb-surface-elevated) 40%, transparent);
+  border: 1px solid var(--cbp-wb-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* \u2500\u2500 Frame title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb__frame-title {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--cbp-wb-text-secondary);
+  width: 100%;
+}
+
+/* \u2500\u2500 Viewport shell: centers the viewport horizontally \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb__viewport-shell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+/* Body clip box. NO border-radius of its own \u2014 the card shell (its parent)
+   owns the rounding. A radius here would clip the card's own corners/border. */
+.cbp-wb__viewport {
+  width: 100%;
+  /* Native hard ceiling (AttachmentRenderHeightConstants.ceiling = 800): the
+     body never grows past this even under the 'auto' content-driven policy. */
+  max-height: 800px;
+  /* At the ceiling, content SCROLLS inside the (fixed) card chrome \u2014 it does
+     not clip away or push the card taller. */
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: height 0.1s ease;
+}
+
+/* \u2500\u2500 Native card shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* Geometry source: AttachmentRenderCardShell.swift:24-59                    */
+/* 10 pt padding / 7 pt continuous radius / 1 pt accent border / elevated bg */
+/* Outer card: stacks the body (viewport) above the host action strip, like  */
+/* native VStack { body; actions }. Width is set inline; height auto-wraps.   */
+.cbp-wb__card-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* native cardSpacing: body \u2194 action strip */
+  padding: 10px; /* native cardPadding */
+  border-radius: 7px; /* native radius.panelInner (replaces the 20px viewport clip) */
+  /* Border tint = the attachment's tintColor (--cbp-wb-card-tint, set per
+     scenario from scenario.accentHex), falling back to the theme accent \u2014
+     mirrors native, where the card border uses record.tintColor. */
+  border: 1px solid color-mix(in srgb, var(--cbp-wb-card-tint, var(--cbp-wb-accent)) 26%, transparent);
+  background: var(--cbp-wb-surface-elevated);
+  /* No box-shadow per native spec */
+}
+
+.cbp-wb__webview {
+  width: 100%;
+  height: 100%;
+  /* Fixed/bounded body shorter than its content \u2192 scroll inside. (Only the one
+     element whose content actually exceeds its box scrolls, so there is never a
+     double scrollbar: in 'auto' the viewport scrolls; in fixed/bounded the
+     webview does.) */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* \u2500\u2500 Host button strip (inside the card, below the body) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* Native action row: HStack { buttons; Spacer } \u2192 left-aligned, compact.    */
+.cbp-wb__strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px; /* native action HStack spacing */
+  justify-content: flex-start; /* left-aligned, not centered */
+}
+
+/* No buttons \u2192 no strip box, and the card's flex gap reserves nothing. */
+.cbp-wb__strip:empty {
+  display: none;
+}
+
+.cbp-wb__button {
+  appearance: none;
+  border: 1px solid var(--cbp-wb-border);
+  border-radius: 999px;
+  padding: 4px 10px; /* native actionPadding \u2248 3 v / 8 h \u2014 was 10/16 (too large) */
+  background: color-mix(in srgb, var(--cbp-wb-surface-elevated) 60%, transparent);
+  color: var(--cbp-wb-text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.cbp-wb__button--primary {
+  background: var(--cbp-wb-accent);
+  color: var(--cbp-wb-backdrop);
+  border-color: var(--cbp-wb-accent);
+}
+
+/* \u2500\u2500 Log panel (fixed-width right column) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb__log {
+  width: 100%;
+  max-width: 720px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--cbp-wb-surface-elevated) 50%, transparent);
+  border: 1px solid var(--cbp-wb-border);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.cbp-wb__log-title {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--cbp-wb-text);
+}
+
+.cbp-wb__log-empty {
+  font-size: 12px;
+  color: color-mix(in srgb, var(--cbp-wb-text-secondary) 60%, transparent);
+  font-style: italic;
+}
+
+.cbp-wb__log-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.cbp-wb__log-entry {
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: color-mix(in srgb, var(--cbp-wb-surface-elevated) 60%, transparent);
+  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.cbp-wb__log-entry-method {
+  font-weight: 700;
+  color: var(--cbp-wb-accent);
+}
+
+.cbp-wb__log-entry-seq {
+  font-weight: 400;
+  color: var(--cbp-wb-text-secondary);
+  margin-left: 6px;
+}
+
+.cbp-wb__log-entry-payload {
+  margin-top: 2px;
+  color: var(--cbp-wb-text-secondary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+`;
+
+// src/preview/theme.ts
+var previewThemePresets = [
+  // ── Graphite · default dark ────────────────────────────────────────────────
+  {
+    key: "graphite",
+    label: "Graphite (Dark)",
+    scheme: "dark",
+    backdrop: "#16181C",
+    tokens: {
+      surface: "rgba(255,255,255,.08)",
+      surfaceElevated: "rgba(35,37,42,.78)",
+      textPrimary: "#F3F4F6",
+      textSecondary: "#C2C6CF",
+      textTertiary: "#8D95A3",
+      accent: "#43C6AC",
+      accentContrast: "#081411",
+      border: "rgba(255,255,255,.10)",
+      divider: "rgba(255,255,255,.14)",
+      success: "#22C55E",
+      warning: "#F59E0B",
+      danger: "#EF4444"
+    }
+  },
+  // ── Ember · dark warm ─────────────────────────────────────────────────────
+  {
+    key: "ember",
+    label: "Ember (Dark)",
+    scheme: "dark",
+    backdrop: "#1C120C",
+    tokens: {
+      surface: "rgba(58,36,26,.32)",
+      surfaceElevated: "rgba(43,28,21,.90)",
+      textPrimary: "#F7E7D8",
+      textSecondary: "#D6B89E",
+      textTertiary: "#9E7F69",
+      accent: "#F97316",
+      accentContrast: "#26160E",
+      border: "rgba(240,201,164,.10)",
+      divider: "rgba(240,201,164,.14)",
+      success: "#22C55E",
+      warning: "#F59E0B",
+      danger: "#EF4444"
+    }
+  },
+  // ── Porcelain · default light ─────────────────────────────────────────────
+  {
+    key: "porcelain",
+    label: "Porcelain (Light)",
+    scheme: "light",
+    backdrop: "#ECECEE",
+    tokens: {
+      surface: "rgba(255,255,255,.68)",
+      surfaceElevated: "rgba(249,251,254,.96)",
+      textPrimary: "#1F2A37",
+      textSecondary: "#4B5C6E",
+      textTertiary: "#7A8A99",
+      accent: "#2563EB",
+      accentContrast: "#FFFFFF",
+      border: "rgba(116,135,155,.16)",
+      divider: "rgba(116,135,155,.22)",
+      success: "#059669",
+      warning: "#D97706",
+      danger: "#DC2626"
+    }
+  },
+  // ── Sand · light warm ─────────────────────────────────────────────────────
+  {
+    key: "sand",
+    label: "Sand (Light)",
+    scheme: "light",
+    backdrop: "#EFE9DD",
+    tokens: {
+      surface: "rgba(255,255,255,.56)",
+      surfaceElevated: "rgba(247,241,232,.88)",
+      textPrimary: "#2F2419",
+      textSecondary: "#5F5246",
+      textTertiary: "#8A7C6F",
+      accent: "#D97706",
+      accentContrast: "#2B2117",
+      border: "rgba(142,126,106,.18)",
+      divider: "rgba(142,126,106,.24)",
+      success: "#15803D",
+      warning: "#CA8A04",
+      danger: "#DC2626"
+    }
+  }
+];
+var DEFAULT_THEME_KEY = "graphite";
+function getThemePreset(key) {
+  if (key === "light") return previewThemePresets[2];
+  if (!key || key === "dark") return previewThemePresets[0];
+  return previewThemePresets.find((p) => p.key === key) ?? previewThemePresets[0];
+}
+var defaultDarkTheme = {
+  scheme: "dark",
+  tokens: previewThemePresets[0].tokens
+};
+var defaultLightTheme = {
+  scheme: "light",
+  tokens: previewThemePresets[2].tokens
+};
+
+// src/preview/chrome.ts
+var MODE_WIDTHS = {
+  attachmentRenderer: { width: 720, min: 560, max: 900 },
+  action: { width: 350, min: 300, max: 500 }
+};
+var RENDERER_HEIGHT_CEILING = 800;
+function groupScenariosByMode(scenarios) {
+  const map = /* @__PURE__ */ new Map();
+  for (const s of scenarios) {
+    let group = map.get(s.mode);
+    if (!group) {
+      group = [];
+      map.set(s.mode, group);
+    }
+    group.push(s);
+  }
+  return Array.from(map.entries()).map(([mode, list]) => ({ mode, scenarios: list }));
+}
+function resolveViewportWidth(scenario) {
+  const def = MODE_WIDTHS[scenario.mode] ?? MODE_WIDTHS.attachmentRenderer;
+  return {
+    width: scenario.viewport?.width ?? def.width,
+    min: scenario.viewport?.widthMin ?? def.min,
+    max: scenario.viewport?.widthMax ?? def.max
+  };
+}
+function clampWidth(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function renderChrome(root, scenarios, opts, handlers) {
+  const query = new URLSearchParams(
+    typeof window !== "undefined" ? window.location.search : ""
+  );
+  const initialView = query.get("view") === "action" ? "action" : "attachmentRenderer";
+  let selectedView = initialView;
+  const rawThemeKey = query.get("theme") ?? DEFAULT_THEME_KEY;
+  let selectedThemeKey = getThemePreset(rawThemeKey).key;
+  const rendererScenarios = scenarios.filter((s) => s.mode === "attachmentRenderer");
+  const actionScenarios = scenarios.filter((s) => s.mode === "action");
+  function scenariosForView(view) {
+    return view === "attachmentRenderer" ? rendererScenarios : actionScenarios;
+  }
+  function resolveInitialScenarioID(view) {
+    const requested = query.get("scenario");
+    const options = scenariosForView(view);
+    if (requested && options.some((s) => s.id === requested)) return requested;
+    return options[0]?.id ?? "";
+  }
+  let selectedScenarioID = resolveInitialScenarioID(initialView);
+  let currentWidth = MODE_WIDTHS[initialView].width;
+  function activeScenario() {
+    const list = scenariosForView(selectedView);
+    return list.find((s) => s.id === selectedScenarioID) ?? list[0];
+  }
+  root.innerHTML = "";
+  const wb = div("cbp-wb");
+  root.appendChild(wb);
+  const controls = div("cbp-wb__controls");
+  wb.appendChild(controls);
+  const viewOptions = [
+    { value: "attachmentRenderer", label: "Renderer" },
+    { value: "action", label: "Action" }
+  ];
+  const viewSelect = buildSelect("cbp-wb-view", "View", viewOptions, selectedView, controls);
+  const scenarioAreaWrapper = div("cbp-wb__control");
+  controls.appendChild(scenarioAreaWrapper);
+  const themeOptions = previewThemePresets.map((p) => ({ value: p.key, label: p.label }));
+  const themeSelect = buildSelect(
+    "cbp-wb-theme",
+    "Theme",
+    themeOptions,
+    selectedThemeKey,
+    controls
+  );
+  const widthControl = div("cbp-wb__control");
+  const widthLabel = document.createElement("label");
+  widthLabel.className = "cbp-wb__control-label";
+  widthLabel.htmlFor = "cbp-wb-width";
+  widthLabel.textContent = `Width: ${currentWidth}px`;
+  widthControl.appendChild(widthLabel);
+  const widthSlider = document.createElement("input");
+  widthSlider.type = "range";
+  widthSlider.id = "cbp-wb-width";
+  widthSlider.name = "cbp-wb-width";
+  widthSlider.className = "cbp-wb__width-slider";
+  widthControl.appendChild(widthSlider);
+  controls.appendChild(widthControl);
+  const canvas = div("cbp-wb__canvas");
+  wb.appendChild(canvas);
+  const hostFrame = div("cbp-wb__host-frame");
+  canvas.appendChild(hostFrame);
+  const frameTitle = div("cbp-wb__frame-title");
+  const frameTitleLabel = span("cbp-wb__frame-title-label");
+  const frameSizeLabel = span("cbp-wb__frame-title-size");
+  frameTitle.appendChild(frameTitleLabel);
+  frameTitle.appendChild(frameSizeLabel);
+  hostFrame.appendChild(frameTitle);
+  const viewportShell = div("cbp-wb__viewport-shell");
+  hostFrame.appendChild(viewportShell);
+  const cardShell = div("cbp-wb__card-shell");
+  viewportShell.appendChild(cardShell);
+  const viewport = div("cbp-wb__viewport");
+  cardShell.appendChild(viewport);
+  const webview = div("cbp-wb__webview");
+  viewport.appendChild(webview);
+  const slotEl = webview;
+  const strip = div("cbp-wb__strip");
+  cardShell.appendChild(strip);
+  const logPanel = div("cbp-wb__log");
+  canvas.appendChild(logPanel);
+  const logTitle = document.createElement("p");
+  logTitle.className = "cbp-wb__log-title";
+  logTitle.textContent = "Native Calls";
+  logPanel.appendChild(logTitle);
+  const logEmpty = document.createElement("p");
+  logEmpty.className = "cbp-wb__log-empty";
+  logEmpty.textContent = "No calls yet.";
+  logPanel.appendChild(logEmpty);
+  const logList = document.createElement("ul");
+  logList.className = "cbp-wb__log-list";
+  logPanel.appendChild(logList);
+  let logSeq = 0;
+  function applyTheme(preset) {
+    wb.style.setProperty("--cbp-wb-backdrop", preset.backdrop);
+    wb.style.setProperty("--cbp-wb-accent", preset.tokens.accent);
+    wb.style.setProperty("--cbp-wb-surface-elevated", preset.tokens.surfaceElevated);
+    wb.style.setProperty("--cbp-wb-border", preset.tokens.border);
+    wb.style.setProperty("--cbp-wb-text", preset.tokens.textPrimary);
+    wb.style.setProperty("--cbp-wb-text-secondary", preset.tokens.textSecondary);
+    wb.dataset["themeScheme"] = preset.scheme;
+    wb.dataset["themeKey"] = preset.key;
+  }
+  function currentBodyHeightLabel() {
+    const inline = parseInt(viewport.style.height, 10);
+    if (!Number.isNaN(inline)) return String(inline);
+    const rendered = Math.round(viewport.getBoundingClientRect().height);
+    return rendered > 0 ? String(rendered) : "auto";
+  }
+  function setViewportWidth(px) {
+    currentWidth = px;
+    cardShell.style.width = `${px}px`;
+    widthLabel.textContent = `Width: ${px}px`;
+    widthSlider.value = String(px);
+    frameSizeLabel.textContent = `${px} \xD7 ${currentBodyHeightLabel()}`;
+  }
+  function updateWidthSlider(min, max, value) {
+    widthSlider.min = String(min);
+    widthSlider.max = String(max);
+    widthSlider.value = String(value);
+  }
+  function applyInitialHeight(scenario) {
+    const policy = scenario.viewport?.heightPolicy ?? "auto";
+    if (policy === "fixed" && scenario.viewport?.height != null) {
+      const h = Math.min(scenario.viewport.height, RENDERER_HEIGHT_CEILING);
+      viewport.style.height = `${h}px`;
+    } else {
+      viewport.style.height = "";
+    }
+  }
+  function setViewportHeight(height) {
+    const scenario = activeScenario();
+    const policy = scenario.viewport?.heightPolicy ?? "auto";
+    if (policy === "fixed") return;
+    let clamped = Math.min(height, RENDERER_HEIGHT_CEILING);
+    if (policy === "bounded") {
+      const min = scenario.viewport?.min ?? 0;
+      const max = Math.min(scenario.viewport?.max ?? Infinity, RENDERER_HEIGHT_CEILING);
+      clamped = Math.min(max, Math.max(min, height));
+    }
+    viewport.style.height = `${clamped}px`;
+    frameSizeLabel.textContent = `${currentWidth} \xD7 ${clamped}`;
+  }
+  function appendLogEntry(method, payload) {
+    logEmpty.style.display = "none";
+    logSeq += 1;
+    const entry = document.createElement("li");
+    entry.className = "cbp-wb__log-entry";
+    const methodSpan = document.createElement("span");
+    methodSpan.className = "cbp-wb__log-entry-method";
+    methodSpan.textContent = method;
+    const seqSpan = document.createElement("span");
+    seqSpan.className = "cbp-wb__log-entry-seq";
+    seqSpan.textContent = `#${logSeq}`;
+    const payloadDiv = document.createElement("div");
+    payloadDiv.className = "cbp-wb__log-entry-payload";
+    try {
+      payloadDiv.textContent = JSON.stringify(payload, null, 2);
+    } catch {
+      payloadDiv.textContent = String(payload);
+    }
+    entry.appendChild(methodSpan);
+    entry.appendChild(seqSpan);
+    entry.appendChild(payloadDiv);
+    logList.insertBefore(entry, logList.firstChild);
+  }
+  let activeButtons = [];
+  let activeDefaultButtonID = null;
+  function renderButtons() {
+    strip.innerHTML = "";
+    for (const btn of activeButtons) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "cbp-wb__button" + (btn.id === activeDefaultButtonID ? " cbp-wb__button--primary" : "");
+      button.textContent = btn.title;
+      if (btn.isEnabled === false) {
+        button.disabled = true;
+      }
+      button.addEventListener("click", () => {
+        const scenario = activeScenario();
+        const eventName = scenario.mode === "action" ? "clipbus-plugin-action-host-invoke" : "clipbus-plugin-attachment-host-invoke";
+        window.dispatchEvent(
+          new CustomEvent(eventName, { detail: { buttonID: btn.id } })
+        );
+      });
+      strip.appendChild(button);
+    }
+  }
+  function applyButtons(buttons, defaultButtonID) {
+    activeButtons = Array.isArray(buttons) ? buttons.map((b) => ({ id: b.id, title: b.title, isEnabled: b.isEnabled })) : [];
+    activeDefaultButtonID = defaultButtonID ?? null;
+    renderButtons();
+  }
+  function applyScenarioButtons(scenario) {
+    applyButtons(scenario.buttons ?? [], scenario.defaultButtonID ?? null);
+  }
+  function refreshScenarioArea() {
+    scenarioAreaWrapper.innerHTML = "";
+    const list = scenariosForView(selectedView);
+    if (!list.some((s) => s.id === selectedScenarioID)) {
+      selectedScenarioID = list[0]?.id ?? "";
+    }
+    const lbl = document.createElement("label");
+    lbl.className = "cbp-wb__control-label";
+    lbl.htmlFor = "cbp-wb-scenario";
+    lbl.textContent = "Scenario";
+    scenarioAreaWrapper.appendChild(lbl);
+    const select = document.createElement("select");
+    select.id = "cbp-wb-scenario";
+    select.name = "cbp-wb-scenario";
+    select.className = "cbp-wb__scenario-select";
+    for (const s of list) {
+      const opt = document.createElement("option");
+      opt.value = s.id;
+      opt.textContent = s.label;
+      select.appendChild(opt);
+    }
+    select.value = selectedScenarioID;
+    select.addEventListener("change", () => {
+      selectedScenarioID = select.value;
+      activateCurrentScenario();
+    });
+    scenarioAreaWrapper.appendChild(select);
+  }
+  function updateFrameTitle() {
+    const scenario = activeScenario();
+    frameTitleLabel.textContent = scenario.mode === "attachmentRenderer" ? "Attachment Renderer" : "Draft Action";
+    frameSizeLabel.textContent = `${currentWidth} \xD7 ${currentBodyHeightLabel()}`;
+  }
+  function activateCurrentScenario() {
+    const scenario = activeScenario();
+    if (!scenario) return;
+    if (scenario.accentHex) {
+      cardShell.style.setProperty("--cbp-wb-card-tint", scenario.accentHex);
+    } else {
+      cardShell.style.removeProperty("--cbp-wb-card-tint");
+    }
+    const { width, min, max } = resolveViewportWidth(scenario);
+    const initialWidth = clampWidth(
+      scenario.viewport?.width ?? opts.defaultViewport?.width ?? width,
+      min,
+      max
+    );
+    setViewportWidth(initialWidth);
+    updateWidthSlider(min, max, initialWidth);
+    applyInitialHeight(scenario);
+    applyScenarioButtons(scenario);
+    updateFrameTitle();
+    syncQuery();
+    handlers.onActivate(scenario, selectedThemeKey);
+  }
+  function syncQuery() {
+    if (typeof window === "undefined") return;
+    const next = new URL(window.location.href);
+    next.searchParams.set("view", selectedView);
+    next.searchParams.set("scenario", selectedScenarioID);
+    next.searchParams.set("theme", selectedThemeKey);
+    window.history.replaceState({}, "", next.toString());
+  }
+  viewSelect.addEventListener("change", () => {
+    selectedView = viewSelect.value;
+    refreshScenarioArea();
+    activateCurrentScenario();
+  });
+  themeSelect.addEventListener("change", () => {
+    selectedThemeKey = themeSelect.value;
+    const preset = getThemePreset(selectedThemeKey);
+    applyTheme(preset);
+    syncQuery();
+    handlers.onThemeChange(activeScenario(), selectedThemeKey);
+  });
+  widthSlider.addEventListener("input", () => {
+    const { min, max } = resolveViewportWidth(activeScenario());
+    const clamped = clampWidth(parseInt(widthSlider.value, 10), min, max);
+    setViewportWidth(clamped);
+  });
+  function start() {
+    refreshScenarioArea();
+    applyTheme(getThemePreset(selectedThemeKey));
+    activateCurrentScenario();
+  }
+  function destroy() {
+  }
+  return {
+    slotEl,
+    setViewportHeight,
+    setViewportWidth,
+    appendLogEntry,
+    applyButtons,
+    applyTheme,
+    start,
+    destroy
+  };
+}
+function div(className) {
+  const el = document.createElement("div");
+  if (className) el.className = className;
+  return el;
+}
+function span(className) {
+  const el = document.createElement("span");
+  if (className) el.className = className;
+  return el;
+}
+function buildSelect(id, labelText, options, initialValue, container) {
+  const wrapper = div("cbp-wb__control");
+  const labelEl = document.createElement("label");
+  labelEl.className = "cbp-wb__control-label";
+  labelEl.textContent = labelText;
+  labelEl.htmlFor = id;
+  wrapper.appendChild(labelEl);
+  const select = document.createElement("select");
+  select.id = id;
+  select.name = id;
+  for (const opt of options) {
+    const option = document.createElement("option");
+    option.value = opt.value;
+    option.textContent = opt.label;
+    select.appendChild(option);
+  }
+  select.value = initialValue;
+  wrapper.appendChild(select);
+  container.appendChild(wrapper);
+  return select;
+}
+
+// src/generated/wireConstants.generated.ts
+var PLUGIN_CALL_HANDLER_NAME = "clipbusPluginCall";
+var WINDOW_SET_HEIGHT_METHOD = "window.setHeight";
+
+// src/preview/fakeHost.ts
+function installFakeHost(target, hooks) {
+  const t = target;
+  if (!t["webkit"]) {
+    t["webkit"] = {};
+  }
+  const webkit = t["webkit"];
+  if (!webkit["messageHandlers"]) {
+    webkit["messageHandlers"] = {};
+  }
+  const handlers = webkit["messageHandlers"];
+  handlers[PLUGIN_CALL_HANDLER_NAME] = {
+    postMessage: async (msg) => {
+      const { method, payload } = msg;
+      hooks.onCall(method, payload);
+      if (method === WINDOW_SET_HEIGHT_METHOD) {
+        const height = payload?.height;
+        if (typeof height === "number") {
+          hooks.onSetHeight(height);
+        }
+        return defaultReplyFor(method);
+      }
+      if (method.endsWith(".setButtons")) {
+        const p = payload ?? {};
+        hooks.onSetButtons(
+          Array.isArray(p.buttons) ? p.buttons : [],
+          p.defaultButtonID ?? null
+        );
+        return defaultReplyFor(method);
+      }
+      return defaultReplyFor(method);
+    }
+  };
+}
+function defaultReplyFor(method) {
+  if (method === "runtime.invoke") {
+    return { response: void 0 };
+  }
+  return {};
+}
+
+// src/generated/hostBootstrap.generated.ts
+function emitAttachmentBootstrap(p) {
+  if (p.context !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_CONTEXT__"] = p.context;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-context", { detail: p.context }));
+  }
+  if (p.item !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_ITEM__"] = p.item;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-item", { detail: p.item }));
+  }
+  if (p.attachment !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_ATTACHMENT__"] = p.attachment;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-attachment", { detail: p.attachment }));
+  }
+  if (p.theme !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_THEME__"] = p.theme;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-theme", { detail: p.theme }));
+  }
+  if (p.locale !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_LOCALE__"] = p.locale;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-locale", { detail: p.locale }));
+  }
+}
+function emitActionBootstrap(p) {
+  if (p.context !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_CONTEXT__"] = p.context;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-context", { detail: p.context }));
+  }
+  if (p.item !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_ITEM__"] = p.item;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-item", { detail: p.item }));
+  }
+  if (p.draft !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_DRAFT__"] = p.draft;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-draft", { detail: p.draft }));
+  }
+  if (p.theme !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_THEME__"] = p.theme;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-theme", { detail: p.theme }));
+  }
+  if (p.locale !== void 0) {
+    globalThis["__CLIPBUS_PLUGIN_LOCALE__"] = p.locale;
+    globalThis.dispatchEvent(new CustomEvent("clipbus-plugin-locale", { detail: p.locale }));
+  }
+}
+
+// src/preview/wire.ts
+function computeWirePayloads(scenario, themeKey = DEFAULT_THEME_KEY) {
+  const context = {
+    mode: scenario.mode,
+    pluginID: scenario.pluginID ?? "plugin.preview.harness"
+  };
+  const preset = getThemePreset(themeKey);
+  const theme = {
+    scheme: preset.scheme,
+    tokens: { ...preset.tokens }
+  };
+  const locale = { locale: "en" };
+  if (scenario.mode === "attachmentRenderer") {
+    return {
+      mode: "attachmentRenderer",
+      context,
+      item: scenario.item,
+      attachment: scenario.attachment,
+      theme,
+      locale
+    };
+  }
+  return {
+    mode: "action",
+    context,
+    item: scenario.item,
+    draft: scenario.draft ?? {},
+    theme,
+    locale
+  };
+}
+function injectWire(_target, payloads) {
+  if (payloads.mode === "attachmentRenderer") {
+    emitAttachmentBootstrap({
+      context: payloads.context,
+      item: payloads.item,
+      attachment: payloads.attachment,
+      theme: payloads.theme,
+      locale: payloads.locale
+    });
+  } else {
+    emitActionBootstrap({
+      context: payloads.context,
+      item: payloads.item,
+      draft: payloads.draft,
+      theme: payloads.theme,
+      locale: payloads.locale
+    });
+  }
+}
+var THEME_CSS_VAR_NAMES = {
+  surface: "--clipbus-surface",
+  surfaceElevated: "--clipbus-surface-elevated",
+  textPrimary: "--clipbus-text-primary",
+  textSecondary: "--clipbus-text-secondary",
+  textTertiary: "--clipbus-text-tertiary",
+  accent: "--clipbus-accent",
+  accentContrast: "--clipbus-accent-contrast",
+  border: "--clipbus-border",
+  divider: "--clipbus-divider",
+  success: "--clipbus-success",
+  warning: "--clipbus-warning",
+  danger: "--clipbus-danger"
+};
+function applyThemeCssVars(target, snapshot) {
+  const tokens = snapshot.tokens;
+  for (const [field, varName] of Object.entries(THEME_CSS_VAR_NAMES)) {
+    const value = tokens[field];
+    if (typeof value === "string") target.style.setProperty(varName, value);
+  }
+}
+
+// src/preview/index.ts
+function createPreviewWorkbench(root, opts) {
+  if (opts.scenarios.length === 0) {
+    root.textContent = "[preview] No scenarios provided.";
+    return;
+  }
+  injectStyles(root.ownerDocument ?? document);
+  let pendingLogEntry = null;
+  let pendingSetHeight = null;
+  let pendingSetButtons = null;
+  installFakeHost(window, {
+    onCall(method, payload) {
+      pendingLogEntry?.(method, payload);
+    },
+    onSetHeight(height) {
+      pendingSetHeight?.(height);
+    },
+    onSetButtons(buttons, defaultButtonID) {
+      pendingSetButtons?.(buttons, defaultButtonID);
+    }
+  });
+  let currentCleanup = null;
+  const {
+    slotEl,
+    setViewportHeight,
+    appendLogEntry,
+    applyButtons,
+    start,
+    destroy
+  } = renderChrome(
+    root,
+    opts.scenarios,
+    opts,
+    {
+      onActivate: (scenario, presetKey) => activateScenario(scenario, presetKey),
+      onThemeChange: (scenario, presetKey) => reinjectTheme(scenario, presetKey)
+    }
+  );
+  pendingLogEntry = appendLogEntry;
+  pendingSetHeight = setViewportHeight;
+  pendingSetButtons = applyButtons;
+  function activateScenario(scenario, presetKey) {
+    if (currentCleanup) {
+      try {
+        currentCleanup();
+      } catch {
+      }
+      currentCleanup = null;
+    }
+    slotEl.innerHTML = "";
+    const payloads = computeWirePayloads(scenario, presetKey);
+    injectWire(window, payloads);
+    applyThemeCssVars(slotEl, payloads.theme);
+    currentCleanup = opts.mount(slotEl, { scenario });
+  }
+  function reinjectTheme(scenario, presetKey) {
+    const payloads = computeWirePayloads(scenario, presetKey);
+    injectWire(window, payloads);
+    applyThemeCssVars(slotEl, payloads.theme);
+  }
+  start();
+  root["__cbpWbDestroy__"] = () => {
+    currentCleanup?.();
+    destroy();
+  };
+}
+var STYLE_TAG_ID = "cbp-wb-styles";
+var FAVICON_TAG_ID = "cbp-wb-favicon";
+function injectStyles(doc) {
+  const head = doc.head ?? doc.documentElement;
+  if (!doc.getElementById(STYLE_TAG_ID)) {
+    const style = doc.createElement("style");
+    style.id = STYLE_TAG_ID;
+    style.textContent = previewStyles;
+    head.appendChild(style);
+  }
+  if (!doc.getElementById(FAVICON_TAG_ID)) {
+    const icon = doc.createElement("link");
+    icon.id = FAVICON_TAG_ID;
+    icon.rel = "icon";
+    icon.href = "data:,";
+    head.appendChild(icon);
+  }
+}