@clipbus/plugin-sdk 0.8.4 → 0.8.6

package/dist/preview/index.cjs

@@ -0,0 +1,1670 @@
+"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,
+  classifyWireSections: () => classifyWireSections,
+  computeWirePayloads: () => computeWirePayloads,
+  createPreviewWorkbench: () => createPreviewWorkbench,
+  defaultDarkTheme: () => defaultDarkTheme,
+  defaultLightTheme: () => defaultLightTheme,
+  getThemePreset: () => getThemePreset,
+  groupScenariosByMode: () => groupScenariosByMode,
+  injectWire: () => injectWire,
+  installFakeHost: () => installFakeHost,
+  parsePayloadJson: () => parsePayloadJson,
+  previewThemePresets: () => previewThemePresets,
+  resolveViewportWidth: () => resolveViewportWidth
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/preview/styles.ts
+var previewStyles = `
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+
+/* \u2500\u2500 Wire Bench chrome tokens (stable \u2014 independent of native theme preset) \u2500 */
+/* Intentional decoupling: the workbench chrome is a tool, not a specimen.     */
+/* The electric violet signal colour (#7B61FF) is chosen to not clash with     */
+/* any of the 4 native theme accents (teal / orange / blue / amber).           */
+.cbp-wb {
+  --bench:           #14161D;
+  --bench-2:         #1A1D26;
+  --bench-3:         #222634;
+  --bench-line:      rgba(152,164,196,.12);
+  --bench-line-2:    rgba(152,164,196,.20);
+  --bench-ink:       #E8EAF2;
+  --bench-ink-dim:   #969EB2;
+  --bench-ink-faint: #646B7E;
+  --bench-signal:    #7B61FF;
+  --bench-signal-2:  #B9A8FF;
+  --bench-signal-soft: rgba(123,97,255,.16);
+}
+
+/* \u2500\u2500 Card-side theme vars (graphite defaults; applyTheme() overwrites these) \u2500 */
+/* These track the active preset so the specimen card (card-shell / buttons)   */
+/* still recolours when the theme picker changes \u2014 native fidelity for the     */
+/* card interior. The chrome itself never reads these for its own background.  */
+.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\u2500 */
+/* Background uses --bench (stable), not --cbp-wb-backdrop (theme-driven).   */
+/* Blueprint grid is a visual signature of the instrument chrome.             */
+.cbp-wb {
+  min-height: 100%;
+  padding: 28px 26px 34px;
+  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 14px;
+  box-sizing: border-box;
+  color: var(--bench-ink);
+  background:
+    linear-gradient(var(--bench-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--bench-line) 1px, transparent 1px),
+    var(--bench);
+  background-size: 32px 32px, 32px 32px, auto;
+  background-position: -1px -1px, -1px -1px, 0 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+*, .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\u2500 */
+/* Restyle every scroll area \u2014 chrome AND plugin content inside the slot \u2014   */
+/* into a thin, translucent bench-toned overlay. Uses bench-ink-dim (stable) */
+/* rather than --cbp-wb-text-secondary so the scrollbar doesn't recolour     */
+/* when the theme switches (intentional \u2014 chrome palette is stable).         */
+/* The --cbp-wb-* vars still cascade into the plugin slot for its own use.  */
+.cbp-wb,
+.cbp-wb * {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--bench-ink-dim) 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(--bench-ink-dim) 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(--bench-ink-dim) 50%, transparent);
+  background-clip: padding-box;
+}
+
+.cbp-wb ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* \u2500\u2500 Header: brand wordmark + controls console \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__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 24px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.cbp-wb__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.cbp-wb__brand-sn {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11.5px;
+  letter-spacing: .16em;
+  color: var(--bench-ink-faint);
+  text-transform: uppercase;
+}
+
+.cbp-wb__brand-mark {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -.01em;
+  line-height: 1;
+}
+
+.cbp-wb__brand-mark b   { color: var(--bench-signal-2); }
+.cbp-wb__brand-mark span { color: var(--bench-ink); }
+
+/* \u2500\u2500 Controls console (Surface / Scenario / Theme / Width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.cbp-wb__controls {
+  display: flex;
+  gap: 11px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.cbp-wb__control {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cbp-wb__control-label {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--bench-ink-faint);
+}
+
+/* Scenario + Theme selects */
+.cbp-wb__control select,
+.cbp-wb__scenario-select {
+  background: var(--bench-2);
+  border: 1px solid var(--bench-line);
+  border-radius: 11px;
+  color: var(--bench-ink);
+  font: inherit;
+  font-size: 13px;
+  padding: 8px 13px;
+  min-width: 158px;
+}
+
+/* Width slider */
+.cbp-wb__width-slider {
+  accent-color: var(--bench-signal);
+  width: 128px;
+  cursor: pointer;
+}
+
+/* Current width value shown inline with the label */
+.cbp-wb__width-val {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  color: var(--bench-ink-dim);
+}
+
+/* \u2500\u2500 Horizontal rule separating header from stage \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__rule {
+  height: 1px;
+  background: var(--bench-line);
+  margin: 0 0 22px;
+}
+
+/* \u2500\u2500 Stage: workspace (hero) left + dock right \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__stage {
+  display: flex;
+  gap: 22px;
+  align-items: flex-start;
+}
+
+/* \u2500\u2500 Workspace \u2014 hero, fills the left 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 */
+.cbp-wb__workspace {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.cbp-wb__ws-head {
+  display: flex;
+  align-items: baseline;
+  gap: 13px;
+  margin-bottom: 13px;
+}
+
+.cbp-wb__ws-kicker {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .2em;
+  color: var(--bench-signal-2);
+}
+
+.cbp-wb__ws-title {
+  font-size: 23px;
+  font-weight: 700;
+  letter-spacing: -.01em;
+}
+
+.cbp-wb__ws-sub {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  color: var(--bench-ink-faint);
+}
+
+/* Mode + scenario chip \u2014 right-aligned in the ws-head */
+.cbp-wb__ws-chip {
+  margin-left: auto;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  color: var(--bench-ink-dim);
+  background: var(--bench-2);
+  border: 1px solid var(--bench-line);
+  border-radius: 9px;
+  padding: 6px 11px;
+  white-space: nowrap;
+}
+
+/* \u2500\u2500 Workspace surface \u2014 glass stage that holds the specimen card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* min-height fills the viewport column height (hero). The card is anchored   */
+/* at the top; excess space becomes the "growth floor" labelling the 800 cap. */
+.cbp-wb__ws-surface {
+  position: relative;
+  border: 1px solid var(--bench-line);
+  border-radius: 18px;
+  background:
+    radial-gradient(120% 64% at 50% 0%, var(--bench-signal-soft), transparent 56%),
+    var(--bench-2);
+  min-height: calc(100vh - 150px);
+  padding: 34px 36px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  overflow: auto;
+}
+
+/* Violet accent line across the top edge \u2014 signal that this is live */
+.cbp-wb__ws-surface::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--bench-signal-soft), transparent);
+}
+
+/* Small tape label anchored top-left inside the surface */
+.cbp-wb__ws-tape {
+  position: absolute;
+  top: 13px;
+  left: 20px;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--bench-ink-faint);
+}
+
+/* Wrapper that provides a positioning context for the "card internals" tag */
+.cbp-wb__specimen-wrap {
+  position: relative;
+  margin-top: 20px;
+}
+
+/* Dimensions readout (WxH) below the specimen */
+.cbp-wb__ws-dims {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  color: var(--bench-ink-faint);
+  letter-spacing: .06em;
+}
+
+/* Growth floor \u2014 pushes to the bottom of the surface, labels the 800 ceiling */
+/* Turns the blank space below the card into meaningful information:           */
+/* "this gap is the room left before the native height cap".                  */
+.cbp-wb__ws-floor {
+  margin-top: auto;
+  width: 100%;
+  padding-top: 16px;
+  border-top: 1px dashed var(--bench-line-2);
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11.5px;
+  letter-spacing: .07em;
+  color: var(--bench-ink-faint);
+}
+
+.cbp-wb__ws-floor-pip {
+  color: var(--bench-signal-2);
+  font-size: 13px;
+}
+
+/* \u2500\u2500 Dock \u2014 two attachment cards, position:sticky \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 */
+/* Sticks to the top so the workspace can grow vertically without pushing    */
+/* the OUT card out of view. Right column is always in frame.                */
+.cbp-wb__dock {
+  flex: 0 0 470px;
+  position: sticky;
+  top: 8px;
+  align-self: flex-start;
+  max-height: calc(100vh - 54px);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* \u2500\u2500 Attachment card (IN and OUT share this 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 */
+.cbp-wb__att {
+  position: relative;
+  background: var(--bench-2);
+  border: 1px solid var(--bench-line);
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cbp-wb__att-head {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 14px 17px;
+  border-bottom: 1px solid var(--bench-line);
+  flex: none;
+}
+
+.cbp-wb__att-code {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .16em;
+  color: var(--bench-signal-2);
+}
+
+.cbp-wb__att-title {
+  font-size: 15.5px;
+  font-weight: 700;
+}
+
+.cbp-wb__att-dir {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11.5px;
+  color: var(--bench-ink-faint);
+}
+
+.cbp-wb__att-meta {
+  margin-left: auto;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  color: var(--bench-ink-dim);
+}
+
+.cbp-wb__att-scroll {
+  overflow: auto;
+  padding: 7px 0;
+}
+
+.cbp-wb__att--in  .cbp-wb__att-scroll { max-height: 474px; }
+.cbp-wb__att--out .cbp-wb__att-scroll { max-height: 320px; }
+
+/* \u2500\u2500 Wire Input sections (IN panel \u2014 host\u2192plugin) \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 */
+/* Section dividers; first child has no top border.                           */
+.cbp-wb__wire-sec {
+  border-top: 1px solid var(--bench-line);
+}
+
+.cbp-wb__wire-sec:first-child {
+  border-top: 0;
+}
+
+/* Clickable header row: chevron + key + kind tag + collapsed summary */
+.cbp-wb__wire-sec-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 17px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cbp-wb__wire-sec-chev {
+  font-size: 10px;
+  width: 10px;
+  color: var(--bench-ink-faint);
+  flex: none;
+}
+
+.cbp-wb__wire-sec--open .cbp-wb__wire-sec-chev {
+  color: var(--bench-signal-2);
+}
+
+.cbp-wb__wire-sec-key {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--bench-ink);
+}
+
+.cbp-wb__wire-sec-tag {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 10.5px;
+  color: var(--bench-ink-faint);
+  letter-spacing: .04em;
+  border: 1px solid var(--bench-line);
+  border-radius: 5px;
+  padding: 1px 6px;
+}
+
+/* Content sections are highlighted \u2014 these are the user-facing payloads */
+.cbp-wb__wire-sec-tag--content {
+  color: var(--bench-signal-2);
+  border-color: color-mix(in srgb, var(--bench-signal) 35%, transparent);
+}
+
+.cbp-wb__wire-sec-sum {
+  margin-left: auto;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11.5px;
+  color: var(--bench-ink-faint);
+  max-width: 44%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Collapsible payload body \u2014 hidden until the section is open */
+.cbp-wb__wire-sec-body {
+  display: none;
+  padding: 0 17px 14px 32px;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre;
+  color: var(--bench-ink);
+  overflow-x: auto;
+}
+
+.cbp-wb__wire-sec--open .cbp-wb__wire-sec-body {
+  display: block;
+}
+
+/* \u2500\u2500 Native Calls accordion (OUT panel \u2014 plugin\u2192host) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* Single-open: exactly one entry is expanded at a time. Newest entry auto-  */
+/* opens on arrival and collapses all prior entries. Clicking an open entry  */
+/* closes it; clicking a closed entry opens it and closes the rest.          */
+.cbp-wb__calls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 11px 15px;
+}
+
+/* Empty-state label shown before any calls arrive */
+.cbp-wb__calls-empty {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  color: var(--bench-ink-faint);
+  padding: 12px 17px;
+  font-style: italic;
+}
+
+/* .cbp-wb__log-entry \u2014 ONE per native call (class name frozen by tests and  */
+/* native fidelity contract). Serves as the accordion item outer shell.      */
+.cbp-wb__log-entry {
+  background: var(--bench-3);
+  border: 1px solid var(--bench-line);
+  border-radius: 11px;
+  overflow: hidden;
+}
+
+/* Open state: signal-tinted border + soft glow */
+.cbp-wb__log-entry--open {
+  border-color: color-mix(in srgb, var(--bench-signal) 42%, transparent);
+  box-shadow: 0 0 0 1px var(--bench-signal-soft);
+}
+
+/* Clickable top row: chevron + sequence number + method name + summary */
+.cbp-wb__log-entry-top {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 13px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.cbp-wb__log-entry-chev {
+  font-size: 10px;
+  width: 10px;
+  color: var(--bench-ink-faint);
+  flex: none;
+}
+
+.cbp-wb__log-entry--open .cbp-wb__log-entry-chev {
+  color: var(--bench-signal-2);
+}
+
+.cbp-wb__log-entry-seq {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  color: var(--bench-ink-faint);
+}
+
+/* .cbp-wb__log-entry-method \u2014 method name (class name frozen by tests). */
+.cbp-wb__log-entry-method {
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--bench-signal-2);
+}
+
+/* One-line payload summary visible in collapsed state; hidden when expanded */
+.cbp-wb__log-entry-sum {
+  margin-left: auto;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 11.5px;
+  color: var(--bench-ink-faint);
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cbp-wb__log-entry--open .cbp-wb__log-entry-sum {
+  display: none;
+}
+
+/* Collapsible payload body \u2014 shown only when the entry is open */
+.cbp-wb__log-entry-body {
+  display: none;
+  padding: 0 13px 12px 32px;
+  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre;
+  color: var(--bench-ink);
+  overflow-x: auto;
+}
+
+.cbp-wb__log-entry--open .cbp-wb__log-entry-body {
+  display: block;
+}
+
+/* \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* FROZEN SPECIMEN GEOMETRY \u2014 pixel-identical to HEAD (native measurement     */
+/* parity). Class names, padding, radius, border, and overflow rules are all  */
+/* verbatim from the prior implementation. Only the surrounding layout        */
+/* changed (canvas \u2192 stage / workspace). DO NOT adjust values below.         */
+/* \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* 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;
+}
+
+/* Native card shell: 10 pt padding / 7 pt radius / 1 pt accent border / elevated bg */
+/* Geometry source: AttachmentRenderCardShell.swift:24-59                             */
+/* Outer card stacks the body (viewport) above the host action strip:                 */
+/* 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 */
+  /* 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;
+}
+
+/* Host button strip (inside the card, below the body) */
+/* 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 */
+  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 Responsive reflow \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 */
+/* The side-by-side stage assumes a wide display: the renderer card runs up to
+   900px and must sit beside the 470px dock. Below ~1335px the card would clip
+   against the dock. Stack instead \u2014 workspace on top at FULL width (the
+   specimen is never clipped), dock below as a row of the two attachment cards.
+   The dock drops its sticky behaviour here (it's no longer a side rail). */
+@media (max-width: 1335px) {
+  .cbp-wb__stage {
+    flex-direction: column;
+  }
+  /* Surface no longer needs to fill the viewport column \u2014 let it wrap the card
+     so the dock below is reachable without a long scroll past empty space. */
+  .cbp-wb__ws-surface {
+    min-height: 420px;
+  }
+  .cbp-wb__dock {
+    position: static;
+    flex: none;
+    width: 100%;
+    max-height: none;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .cbp-wb__att {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+`;
+
+// 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 header = div("cbp-wb__header");
+  wb.appendChild(header);
+  const brand = div("cbp-wb__brand");
+  const brandSn = document.createElement("div");
+  brandSn.className = "cbp-wb__brand-sn";
+  brandSn.textContent = "@clipbus/plugin-sdk \xB7 preview";
+  const brandMark = document.createElement("div");
+  brandMark.className = "cbp-wb__brand-mark";
+  brandMark.innerHTML = "<span>WIRE</span> <b>BENCH</b>";
+  brand.appendChild(brandSn);
+  brand.appendChild(brandMark);
+  header.appendChild(brand);
+  const controls = div("cbp-wb__controls");
+  header.appendChild(controls);
+  const viewOptions = [
+    { value: "attachmentRenderer", label: "Renderer" },
+    { value: "action", label: "Action" }
+  ];
+  const viewSelect = buildSelect("cbp-wb-view", "Surface", 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 ";
+  const widthVal = document.createElement("span");
+  widthVal.className = "cbp-wb__width-val";
+  widthVal.textContent = `${currentWidth}px`;
+  widthLabel.appendChild(widthVal);
+  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 rule = div("cbp-wb__rule");
+  wb.appendChild(rule);
+  const stage = div("cbp-wb__stage");
+  wb.appendChild(stage);
+  const workspace = div("cbp-wb__workspace");
+  stage.appendChild(workspace);
+  const wsHead = div("cbp-wb__ws-head");
+  const wsKicker = span("cbp-wb__ws-kicker");
+  wsKicker.textContent = "PREVIEW";
+  const wsTitle = span("cbp-wb__ws-title");
+  wsTitle.textContent = "Workspace";
+  const wsSub = span("cbp-wb__ws-sub");
+  wsSub.textContent = "native-fidelity \xB7 grows with setHeight";
+  const wsChip = span("cbp-wb__ws-chip");
+  wsHead.appendChild(wsKicker);
+  wsHead.appendChild(wsTitle);
+  wsHead.appendChild(wsSub);
+  wsHead.appendChild(wsChip);
+  workspace.appendChild(wsHead);
+  const wsSurface = div("cbp-wb__ws-surface");
+  workspace.appendChild(wsSurface);
+  const wsTape = div("cbp-wb__ws-tape");
+  wsTape.textContent = "device under preview \xB7 specimen";
+  wsSurface.appendChild(wsTape);
+  const specimenWrap = div("cbp-wb__specimen-wrap");
+  wsSurface.appendChild(specimenWrap);
+  const cardShell = div("cbp-wb__card-shell");
+  specimenWrap.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 wsDims = div("cbp-wb__ws-dims");
+  wsSurface.appendChild(wsDims);
+  const wsFloor = div("cbp-wb__ws-floor");
+  const wsFloorPip = span("cbp-wb__ws-floor-pip");
+  wsFloorPip.textContent = "\u2195";
+  wsFloor.appendChild(wsFloorPip);
+  const wsFloorText = document.createTextNode(
+    " height follows the plugin \xB7 native ceiling \u2248 800px \xB7 content usually fits one screen"
+  );
+  wsFloor.appendChild(wsFloorText);
+  wsSurface.appendChild(wsFloor);
+  const dock = div("cbp-wb__dock");
+  stage.appendChild(dock);
+  const inAtt = div("cbp-wb__att cbp-wb__att--in");
+  dock.appendChild(inAtt);
+  const inHead = div("cbp-wb__att-head");
+  const inCode = span("cbp-wb__att-code");
+  inCode.textContent = "IN";
+  const inTitle = span("cbp-wb__att-title");
+  inTitle.textContent = "Wire Input";
+  const inDir = span("cbp-wb__att-dir");
+  inDir.textContent = "host \u2192 plugin";
+  const inMeta = span("cbp-wb__att-meta");
+  inMeta.textContent = "5 keys";
+  inHead.appendChild(inCode);
+  inHead.appendChild(inTitle);
+  inHead.appendChild(inDir);
+  inHead.appendChild(inMeta);
+  inAtt.appendChild(inHead);
+  const inputContainer = div("cbp-wb__att-scroll");
+  inAtt.appendChild(inputContainer);
+  const outAtt = div("cbp-wb__att cbp-wb__att--out");
+  dock.appendChild(outAtt);
+  const outHead = div("cbp-wb__att-head");
+  const outCode = span("cbp-wb__att-code");
+  outCode.textContent = "OUT";
+  const outTitle = span("cbp-wb__att-title");
+  outTitle.textContent = "Native Calls";
+  const outDir = span("cbp-wb__att-dir");
+  outDir.textContent = "plugin \u2192 host";
+  const outMeta = span("cbp-wb__att-meta");
+  outMeta.textContent = "0 calls";
+  outHead.appendChild(outCode);
+  outHead.appendChild(outTitle);
+  outHead.appendChild(outDir);
+  outHead.appendChild(outMeta);
+  outAtt.appendChild(outHead);
+  const outScroll = div("cbp-wb__att-scroll");
+  outAtt.appendChild(outScroll);
+  const callsEmpty = document.createElement("p");
+  callsEmpty.className = "cbp-wb__calls-empty";
+  callsEmpty.textContent = "No calls yet.";
+  outScroll.appendChild(callsEmpty);
+  const callsList = div("cbp-wb__calls");
+  outScroll.appendChild(callsList);
+  let logSeq = 0;
+  function applyTheme(preset) {
+    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.style.setProperty("--cbp-wb-backdrop", preset.backdrop);
+    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`;
+    widthVal.textContent = `${px}px`;
+    widthSlider.value = String(px);
+    wsDims.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`;
+    wsDims.textContent = `${currentWidth} \xD7 ${clamped}`;
+  }
+  function appendLogEntry(method, payload) {
+    callsEmpty.style.display = "none";
+    logSeq += 1;
+    let payloadText;
+    try {
+      payloadText = JSON.stringify(payload, null, 2);
+    } catch {
+      payloadText = String(payload);
+    }
+    let summaryText;
+    try {
+      const compact = JSON.stringify(payload);
+      summaryText = compact && compact.length > 60 ? compact.slice(0, 57) + "\u2026" : compact ?? "\u2014";
+    } catch {
+      summaryText = String(payload);
+    }
+    const entry = document.createElement("div");
+    entry.className = "cbp-wb__log-entry cbp-wb__log-entry--open";
+    const top = document.createElement("div");
+    top.className = "cbp-wb__log-entry-top";
+    const chev = span("cbp-wb__log-entry-chev");
+    chev.textContent = "\u25BC";
+    const seqEl = span("cbp-wb__log-entry-seq");
+    seqEl.textContent = `#${logSeq}`;
+    const methodSpan = span("cbp-wb__log-entry-method");
+    methodSpan.textContent = method;
+    const sumEl = span("cbp-wb__log-entry-sum");
+    sumEl.textContent = summaryText;
+    top.appendChild(chev);
+    top.appendChild(seqEl);
+    top.appendChild(methodSpan);
+    top.appendChild(sumEl);
+    const body = document.createElement("div");
+    body.className = "cbp-wb__log-entry-body";
+    body.textContent = payloadText;
+    entry.appendChild(top);
+    entry.appendChild(body);
+    collapseAllLogEntries();
+    callsList.insertBefore(entry, callsList.firstChild);
+    outMeta.textContent = `${logSeq} call${logSeq === 1 ? "" : "s"}`;
+    top.addEventListener("click", () => {
+      const isOpen = entry.classList.contains("cbp-wb__log-entry--open");
+      if (isOpen) {
+        entry.classList.remove("cbp-wb__log-entry--open");
+        chev.textContent = "\u25B6";
+      } else {
+        collapseAllLogEntries();
+        entry.classList.add("cbp-wb__log-entry--open");
+        chev.textContent = "\u25BC";
+      }
+    });
+  }
+  function collapseAllLogEntries() {
+    for (const el of callsList.querySelectorAll(".cbp-wb__log-entry")) {
+      el.classList.remove("cbp-wb__log-entry--open");
+      const c = el.querySelector(".cbp-wb__log-entry-chev");
+      if (c) c.textContent = "\u25B6";
+    }
+  }
+  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 updateWorkspaceHead() {
+    const scenario = activeScenario();
+    const modeLabel = scenario.mode === "attachmentRenderer" ? "attachmentRenderer" : "action";
+    wsChip.textContent = `${modeLabel} \xB7 ${scenario.label}`;
+    wsDims.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);
+    updateWorkspaceHead();
+    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,
+    inputContainer,
+    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/inputPanel.ts
+function classifyWireSections(payloads) {
+  const sections = [];
+  sections.push({
+    key: "context",
+    kind: "infra",
+    defaultOpen: false,
+    value: payloads.context
+  });
+  sections.push({
+    key: "item",
+    kind: "content",
+    defaultOpen: true,
+    value: payloads.item
+  });
+  if (payloads.mode === "attachmentRenderer") {
+    sections.push({
+      key: "attachment",
+      kind: "content",
+      defaultOpen: true,
+      value: payloads.attachment
+    });
+  } else {
+    sections.push({
+      key: "draft",
+      kind: "content",
+      defaultOpen: true,
+      value: payloads.draft
+    });
+  }
+  sections.push({
+    key: "theme",
+    kind: "infra",
+    defaultOpen: false,
+    value: payloads.theme
+  });
+  sections.push({
+    key: "locale",
+    kind: "infra",
+    defaultOpen: false,
+    value: payloads.locale
+  });
+  return sections;
+}
+function parsePayloadJson(raw) {
+  if (typeof raw !== "string") return { ok: false, raw };
+  try {
+    const value = JSON.parse(raw);
+    return { ok: true, value };
+  } catch {
+    return { ok: false, raw };
+  }
+}
+function sectionSummary(value) {
+  if (value === void 0 || value === null) return "\u2014";
+  if (typeof value !== "object") return String(value).slice(0, 48);
+  try {
+    const keys = Object.keys(value);
+    const preview = keys.slice(0, 3).join(", ");
+    return `{ ${preview}${keys.length > 3 ? ", \u2026" : ""} }`;
+  } catch {
+    return String(value);
+  }
+}
+function formatSectionValue(value) {
+  if (value === void 0) return "undefined";
+  try {
+    return JSON.stringify(
+      value,
+      (_key, v) => {
+        if (_key === "payloadJson" && typeof v === "string") {
+          const parsed = parsePayloadJson(v);
+          return parsed.ok ? parsed.value : v;
+        }
+        return v;
+      },
+      2
+    );
+  } catch {
+    return String(value);
+  }
+}
+function renderWireInput(containerEl, payloads) {
+  containerEl.innerHTML = "";
+  const sections = classifyWireSections(payloads);
+  for (const section of sections) {
+    const isOpen = section.defaultOpen;
+    const sec = document.createElement("div");
+    sec.className = "cbp-wb__wire-sec" + (isOpen ? " cbp-wb__wire-sec--open" : "");
+    const head = document.createElement("div");
+    head.className = "cbp-wb__wire-sec-head";
+    const chev = document.createElement("span");
+    chev.className = "cbp-wb__wire-sec-chev";
+    chev.textContent = isOpen ? "\u25BC" : "\u25B6";
+    const keySpan = document.createElement("span");
+    keySpan.className = "cbp-wb__wire-sec-key";
+    keySpan.textContent = section.key;
+    const tag = document.createElement("span");
+    tag.className = "cbp-wb__wire-sec-tag" + (section.kind === "content" ? " cbp-wb__wire-sec-tag--content" : "");
+    tag.textContent = section.kind;
+    const sum = document.createElement("span");
+    sum.className = "cbp-wb__wire-sec-sum";
+    sum.textContent = sectionSummary(section.value);
+    head.appendChild(chev);
+    head.appendChild(keySpan);
+    head.appendChild(tag);
+    head.appendChild(sum);
+    const body = document.createElement("div");
+    body.className = "cbp-wb__wire-sec-body";
+    body.textContent = formatSectionValue(section.value);
+    head.addEventListener("click", () => {
+      const nowOpen = sec.classList.contains("cbp-wb__wire-sec--open");
+      if (nowOpen) {
+        sec.classList.remove("cbp-wb__wire-sec--open");
+        chev.textContent = "\u25B6";
+      } else {
+        sec.classList.add("cbp-wb__wire-sec--open");
+        chev.textContent = "\u25BC";
+      }
+    });
+    sec.appendChild(head);
+    sec.appendChild(body);
+    containerEl.appendChild(sec);
+  }
+}
+
+// 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,
+    inputContainer,
+    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);
+    renderWireInput(inputContainer, payloads);
+    currentCleanup = opts.mount(slotEl, { scenario });
+  }
+  function reinjectTheme(scenario, presetKey) {
+    const payloads = computeWirePayloads(scenario, presetKey);
+    injectWire(window, payloads);
+    applyThemeCssVars(slotEl, payloads.theme);
+    renderWireInput(inputContainer, payloads);
+  }
+  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);
+  }
+}