@skillbuilder/miniapp-simulator 0.0.0-stage → 0.2.1

package/lib/workbench.js

@@ -0,0 +1,1404 @@
+import { c as Mn } from "./client-BlQ9j4FW.mjs";
+function Sn(a, i) {
+  const e = /* @__PURE__ */ new Map();
+  let v = 0, l = !1, w, b, L, m, u;
+  const C = (s) => {
+    a.classList.toggle("is-visible", s), a.setAttribute("aria-hidden", String(!s)), i.setAttribute("aria-busy", String(s)), i.inert = s;
+  }, y = () => (m ?? (m = new Promise((s) => {
+    u = () => {
+      b !== void 0 && window.cancelAnimationFrame(b), window.clearTimeout(L), L = void 0, b = void 0, m = void 0, u = void 0, s();
+    }, b = window.requestAnimationFrame(() => {
+      b = window.requestAnimationFrame(() => u?.());
+    }), L = window.setTimeout(() => u?.(), 80);
+  })), m);
+  return {
+    isActive: (s) => e.has(s),
+    async run(s, z) {
+      if (l) return;
+      const k = ++v;
+      e.set(s, k), window.clearTimeout(w), C(!0);
+      try {
+        await y(), !l && e.get(s) === k && await z();
+      } finally {
+        !l && e.get(s) === k && (e.delete(s), e.size === 0 && (w = window.setTimeout(() => {
+          w = void 0, C(!1);
+        }, 100)));
+      }
+    },
+    destroy() {
+      l = !0, e.clear(), window.clearTimeout(w), b !== void 0 && window.cancelAnimationFrame(b), u?.(), C(!1);
+    }
+  };
+}
+const Ln = `:host {
+  --wb-page: #fbfbfc;
+  --wb-surface: rgba(255, 255, 255, 0.9);
+  --wb-surface-strong: #ffffff;
+  --wb-surface-muted: #f4f4f6;
+  --wb-text: #27262b;
+  --wb-text-secondary: #696771;
+  --wb-text-muted: #9a98a2;
+  --wb-border: rgba(35, 32, 45, 0.1);
+  --wb-border-strong: rgba(35, 32, 45, 0.16);
+  --wb-accent: #8068f5;
+  --wb-accent-soft: #e6e0ff;
+  --wb-success: #21a675;
+  --wb-warning: #d59022;
+  --wb-danger: #d84a61;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  color: var(--wb-text);
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button {
+  font: inherit;
+}
+
+button,
+.view-pill,
+.runtime-state {
+  -webkit-tap-highlight-color: transparent;
+}
+
+svg {
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.65;
+}
+
+.workbench-shell {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--wb-page);
+}
+
+.workbench-header {
+  z-index: 30;
+  display: flex;
+  height: 58px;
+  min-height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 0 18px;
+  border-top: 3px solid #28272a;
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0 1px 0 var(--wb-border);
+  backdrop-filter: blur(18px) saturate(1.15);
+}
+
+.view-navigation,
+.header-actions,
+.view-pill,
+.runtime-state,
+.header-button,
+.device-switcher,
+.device-switcher button,
+.preview-dock,
+.diagnostics-header,
+.section-title {
+  display: flex;
+  align-items: center;
+}
+
+.view-navigation {
+  min-width: 0;
+  gap: 5px;
+}
+
+.view-pill,
+.header-button,
+.runtime-state,
+.device-switcher,
+.preview-dock {
+  border: 1px solid rgba(42, 38, 56, 0.09);
+  background: rgba(248, 248, 250, 0.68);
+  box-shadow: inset 0 1px 2px rgba(15, 12, 24, 0.1), inset 0 -0.5px 0 rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(18px) saturate(1.15);
+}
+
+.view-pill {
+  height: 34px;
+  gap: 7px;
+  padding: 0 13px;
+  border-radius: 999px;
+  color: var(--wb-accent);
+  font-size: 13px;
+  font-weight: 650;
+  letter-spacing: 0.01em;
+}
+
+.view-pill.is-active {
+  border-color: rgba(128, 104, 245, 0.25);
+  background: linear-gradient(180deg, rgba(226, 219, 255, 0.96), rgba(237, 233, 255, 0.86));
+  box-shadow: inset 0 0 0 0.5px rgba(128, 104, 245, 0.16), 0 2px 7px rgba(84, 64, 184, 0.09);
+}
+
+.view-pill svg,
+.view-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.view-icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  color: var(--wb-text-muted);
+}
+
+.project-name {
+  max-width: 240px;
+  overflow: hidden;
+  margin-left: 3px;
+  color: var(--wb-text-secondary);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header-actions {
+  gap: 8px;
+}
+
+.runtime-state,
+.header-button {
+  height: 34px;
+  border-radius: 999px;
+  color: var(--wb-text-secondary);
+  font-size: 12px;
+  font-weight: 570;
+}
+
+.runtime-state {
+  gap: 7px;
+  padding: 0 12px;
+}
+
+.runtime-state i {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--wb-warning);
+  box-shadow: 0 0 0 4px rgba(213, 144, 34, 0.1);
+}
+
+.runtime-state[data-tone="ready"] i {
+  background: var(--wb-success);
+  box-shadow: 0 0 0 4px rgba(33, 166, 117, 0.1);
+}
+
+.runtime-state[data-tone="error"] i {
+  background: var(--wb-danger);
+  box-shadow: 0 0 0 4px rgba(216, 74, 97, 0.1);
+}
+
+.header-button {
+  justify-content: center;
+  gap: 7px;
+  padding: 0 14px;
+  cursor: pointer;
+  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
+}
+
+.header-button svg {
+  width: 15px;
+  height: 15px;
+}
+
+.header-button:hover {
+  background: rgba(242, 242, 245, 0.92);
+  color: var(--wb-text);
+}
+
+.header-button.is-active {
+  border-color: rgba(128, 104, 245, 0.2);
+  background: linear-gradient(180deg, rgba(229, 223, 255, 0.82), rgba(240, 237, 255, 0.72));
+  color: var(--wb-accent);
+  box-shadow: inset 0 0 0 0.5px rgba(128, 104, 245, 0.1), 0 2px 8px rgba(79, 59, 166, 0.08);
+}
+
+.header-button:active {
+  transform: scale(0.98);
+}
+
+.header-button:disabled {
+  cursor: wait;
+  opacity: 0.45;
+}
+
+.stage {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  background: radial-gradient(circle at 50% 42%, #fff 0, rgba(255, 255, 255, 0.92) 28%, transparent 62%),
+    linear-gradient(180deg, #fbfbfc 0%, #f8f8fa 100%);
+}
+
+.stage::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 120px;
+  background: linear-gradient(180deg, transparent, rgba(248, 248, 250, 0.82));
+  content: "";
+  pointer-events: none;
+}
+
+.preview-controls {
+  position: absolute;
+  z-index: 20;
+  top: 16px;
+  left: 50%;
+  display: flex;
+  width: max-content;
+  max-width: calc(100% - 32px);
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  transform: translateX(-50%);
+}
+
+.scene-switcher {
+  display: flex;
+  height: 38px;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--wb-border);
+  border-radius: 999px;
+  background: rgba(248, 248, 250, 0.9);
+  box-shadow: inset 0 1px 2px rgba(15, 12, 24, 0.08);
+}
+
+.scene-switcher button {
+  height: 30px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--wb-text-secondary);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
+}
+
+.scene-switcher button.is-active {
+  background: var(--wb-accent-soft);
+  box-shadow: inset 0 0 0 1px rgba(128, 104, 245, 0.18);
+  color: var(--wb-accent);
+}
+
+.scene-switcher button:disabled {
+  cursor: progress;
+  opacity: 0.65;
+}
+
+.device-switcher {
+  position: relative;
+  display: block;
+  width: 166px;
+  height: 38px;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 999px;
+  flex: 0 0 166px;
+}
+
+.device-switcher-indicator {
+  position: absolute;
+  z-index: 1;
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+  width: 92px;
+  border: 1px solid rgba(128, 104, 245, 0.2);
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(221, 213, 255, 0.96), rgba(235, 230, 255, 0.88));
+  box-shadow: 0 1px 2px rgba(48, 36, 107, 0.12), inset 0 0.5px 0 rgba(255, 255, 255, 0.68),
+    inset 0 0 0 0.5px rgba(128, 104, 245, 0.12);
+  pointer-events: none;
+  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
+  will-change: transform;
+}
+
+.device-switcher button {
+  position: absolute;
+  z-index: 2;
+  top: 3px;
+  height: 30px;
+  justify-content: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--wb-text-muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  outline: none;
+  transition: left 320ms cubic-bezier(0.32, 0.72, 0, 1),
+    width 320ms cubic-bezier(0.32, 0.72, 0, 1), color 170ms ease;
+  will-change: left, width;
+}
+
+.device-switcher button svg {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+}
+
+.device-switcher button span {
+  max-width: 0;
+  overflow: hidden;
+  margin-left: -6px;
+  opacity: 0;
+  transition: max-width 220ms ease, margin-left 220ms ease, opacity 140ms ease;
+  white-space: nowrap;
+}
+
+.device-switcher button:hover {
+  color: var(--wb-text-secondary);
+}
+
+.device-switcher button.is-active {
+  color: var(--wb-accent);
+}
+
+.device-switcher button.is-active span {
+  max-width: 58px;
+  margin-left: 0;
+  opacity: 1;
+  transition: max-width 250ms ease 30ms, margin-left 250ms ease 30ms, opacity 180ms ease 70ms;
+}
+
+.device-switcher button:focus-visible,
+.scene-switcher button:focus-visible,
+.header-button:focus-visible,
+.preview-dock button:focus-visible,
+.diagnostics-header button:focus-visible {
+  outline: 2px solid rgba(128, 104, 245, 0.28);
+  outline-offset: 2px;
+}
+
+.stage-canvas {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: calc(var(--preview-controls-height, 38px) + 32px) 42px 82px;
+  scrollbar-width: none;
+}
+
+.stage-canvas::-webkit-scrollbar {
+  display: none;
+}
+
+.device-slot {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.device-shell {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: transparent;
+  transform: scale(var(--device-scale, 1));
+  transform-origin: top left;
+  transition: transform 180ms ease-out;
+  will-change: transform;
+}
+
+.preview {
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+}
+
+.preview-transition {
+  position: absolute;
+  z-index: 12;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(250, 250, 252, 0.6);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  transition: opacity 140ms ease, visibility 0s linear 140ms;
+}
+
+.preview-transition.is-visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.preview-transition-label {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 11px 16px;
+  border: 1px solid rgba(128, 104, 245, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 6px 24px rgba(45, 35, 80, 0.06);
+  color: var(--wb-text-secondary);
+  font-size: 12px;
+}
+
+.preview-transition-label i {
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid var(--wb-accent-soft);
+  border-top-color: var(--wb-accent);
+  border-radius: 50%;
+  animation: wb-spin 800ms linear infinite;
+}
+
+.preview-dock {
+  position: absolute;
+  z-index: 25;
+  bottom: 19px;
+  left: 50%;
+  height: 45px;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.preview-dock button {
+  position: relative;
+  display: grid;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--wb-text-muted);
+  cursor: pointer;
+  outline: none;
+  place-items: center;
+  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
+}
+
+.preview-dock button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.preview-dock button:hover {
+  background: rgba(42, 39, 52, 0.07);
+  color: var(--wb-text);
+}
+
+.preview-dock button.is-active {
+  background: linear-gradient(180deg, rgba(221, 213, 255, 0.9), rgba(237, 233, 255, 0.78));
+  color: var(--wb-accent);
+  box-shadow: inset 0 0 0 0.5px rgba(128, 104, 245, 0.2), 0 2px 6px rgba(79, 59, 166, 0.08);
+}
+
+.preview-dock button.is-acknowledged {
+  animation: wb-dock-acknowledged 360ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.preview-dock button:active {
+  transform: scale(0.94);
+}
+
+.preview-dock button:disabled {
+  cursor: wait;
+  opacity: 0.35;
+}
+
+.preview-dock button[data-action="reload"]:disabled {
+  background: rgba(128, 104, 245, 0.1);
+  color: var(--wb-accent);
+  opacity: 1;
+}
+
+.preview-dock button[data-action="reload"]:disabled svg {
+  animation: wb-spin 760ms linear infinite;
+}
+
+.preview-dock button::after {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  padding: 5px 8px;
+  border: 1px solid var(--wb-border);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 5px 16px rgba(24, 22, 32, 0.1);
+  color: var(--wb-text-secondary);
+  content: attr(data-tooltip);
+  font-size: 10px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 2px);
+  transition: opacity 120ms ease, transform 120ms ease;
+  white-space: nowrap;
+}
+
+.preview-dock button:hover::after,
+.preview-dock button:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+.diagnostics-panel {
+  position: absolute;
+  z-index: 40;
+  top: 14px;
+  right: 14px;
+  bottom: 14px;
+  display: flex;
+  width: min(336px, calc(100% - 28px));
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(42, 38, 56, 0.11);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 22px 70px rgba(24, 22, 32, 0.15), 0 5px 18px rgba(24, 22, 32, 0.07);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(18px) scale(0.985);
+  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  backdrop-filter: blur(24px) saturate(1.15);
+}
+
+.diagnostics-panel.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0) scale(1);
+}
+
+.diagnostics-header {
+  min-height: 65px;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 13px 14px 13px 17px;
+  border-bottom: 1px solid var(--wb-border);
+}
+
+.diagnostics-header > div {
+  display: grid;
+  gap: 3px;
+}
+
+.diagnostics-header strong {
+  font-size: 13px;
+  font-weight: 680;
+}
+
+.diagnostics-header span {
+  color: var(--wb-text-muted);
+  font-size: 10px;
+}
+
+.diagnostics-header button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--wb-surface-muted);
+  color: var(--wb-text-muted);
+  cursor: pointer;
+  outline: none;
+  place-items: center;
+}
+
+.diagnostics-header button:hover {
+  color: var(--wb-text);
+}
+
+.diagnostics-header button svg {
+  width: 14px;
+  height: 14px;
+}
+
+.diagnostics-content {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding: 14px;
+  scrollbar-color: #d8d7dc transparent;
+  scrollbar-width: thin;
+}
+
+.diagnostics-card {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid var(--wb-border);
+  border-radius: 14px;
+  background: var(--wb-border);
+}
+
+.diagnostics-card > div {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.diagnostics-card .latest-event {
+  grid-column: 1 / -1;
+}
+
+.diagnostics-card span,
+.section-title {
+  color: var(--wb-text-muted);
+  font-size: 10px;
+}
+
+.diagnostics-card strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--wb-text-secondary);
+  font-size: 11px;
+  font-weight: 620;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.diagnostics-section {
+  margin-top: 17px;
+}
+
+.section-title {
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-weight: 620;
+}
+
+.section-title span:last-child {
+  font-size: 9px;
+  font-weight: 500;
+}
+
+.capability-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px;
+}
+
+.capability-grid span {
+  position: relative;
+  padding: 10px 10px 10px 25px;
+  border: 1px solid var(--wb-border);
+  border-radius: 10px;
+  background: rgba(249, 249, 250, 0.9);
+  color: var(--wb-text-secondary);
+  font-size: 10px;
+  font-weight: 580;
+}
+
+.capability-grid span::before {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--wb-success);
+  box-shadow: 0 0 0 3px rgba(33, 166, 117, 0.09);
+  content: "";
+  transform: translateY(-50%);
+}
+
+.events {
+  display: grid;
+  gap: 6px;
+}
+
+.event-empty {
+  display: grid;
+  min-height: 116px;
+  place-items: center;
+  align-content: center;
+  gap: 5px;
+  border: 1px dashed var(--wb-border-strong);
+  border-radius: 12px;
+  color: var(--wb-text-muted);
+  text-align: center;
+}
+
+.event-empty-icon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  margin-bottom: 2px;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--wb-surface-muted);
+}
+
+.event-empty-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.event-empty strong {
+  color: var(--wb-text-secondary);
+  font-size: 10px;
+  font-weight: 620;
+}
+
+.event-empty > span:last-child {
+  font-size: 9px;
+}
+
+.event {
+  display: grid;
+  grid-template-columns: 7px minmax(0, 1fr);
+  gap: 8px;
+  padding: 9px 10px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: rgba(246, 246, 248, 0.9);
+}
+
+.event-mark {
+  width: 7px;
+  height: 7px;
+  margin-top: 4px;
+  border-radius: 50%;
+  background: var(--wb-accent);
+  box-shadow: 0 0 0 3px rgba(128, 104, 245, 0.1);
+}
+
+.event[data-tone="error"] .event-mark {
+  background: var(--wb-danger);
+  box-shadow: 0 0 0 3px rgba(216, 74, 97, 0.1);
+}
+
+.event-name {
+  overflow: hidden;
+  font: 600 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.event-detail {
+  overflow: hidden;
+  margin-top: 2px;
+  color: var(--wb-text-muted);
+  font-size: 9px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes wb-dock-acknowledged {
+  0% {
+    background: rgba(128, 104, 245, 0.05);
+    color: var(--wb-text-muted);
+    transform: scale(0.92);
+  }
+  45% {
+    background: rgba(128, 104, 245, 0.14);
+    color: var(--wb-accent);
+    transform: scale(1.04);
+  }
+  100% {
+    background: transparent;
+    color: var(--wb-text-muted);
+    transform: scale(1);
+  }
+}
+
+@keyframes wb-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 760px) {
+  .project-name,
+  .runtime-state {
+    display: none;
+  }
+
+  .workbench-header {
+    padding: 0 10px;
+  }
+
+  .header-button {
+    width: 34px;
+    padding: 0;
+  }
+
+  .header-button span {
+    display: none;
+  }
+
+  .stage-canvas {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+}
+
+@media (max-height: 620px) {
+  .preview-controls {
+    top: 9px;
+  }
+
+  .stage-canvas {
+    padding-top: calc(var(--preview-controls-height, 38px) + 18px);
+    padding-bottom: 66px;
+  }
+
+  .preview-dock {
+    bottom: 10px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .device-slot,
+  .device-switcher-indicator,
+  .device-shell,
+  .preview,
+  .device-switcher button span,
+  .device-switcher button,
+  .scene-switcher button,
+  .preview-transition,
+  .diagnostics-panel,
+  .header-button,
+  .preview-dock button {
+    transition: none;
+  }
+
+  .preview-transition-label i,
+  .preview-dock button.is-acknowledged,
+  .preview-dock button[data-action="reload"]:disabled svg {
+    animation: none;
+  }
+}
+`, Cn = `<div class="workbench-shell">
+  <header class="workbench-header">
+    <div class="view-navigation">
+      <span class="view-pill is-active">
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M2.8 10s2.6-4.2 7.2-4.2 7.2 4.2 7.2 4.2-2.6 4.2-7.2 4.2S2.8 10 2.8 10Z" />
+          <circle cx="10" cy="10" r="2" />
+        </svg>
+        <span>Preview</span>
+      </span>
+      <span class="view-icon" title="小工具运行预览">
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="m7.4 6-4 4 4 4M12.6 6l4 4-4 4" />
+        </svg>
+      </span>
+      <span class="project-name" data-role="project-name"></span>
+    </div>
+
+    <div class="header-actions">
+      <span class="runtime-state" data-role="status" data-tone="pending" aria-live="polite">
+        <i></i>
+        <span data-role="status-text">正在连接</span>
+      </span>
+      <button class="header-button" type="button" data-action="diagnostics" aria-expanded="false">
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M4 15.5V10M8 15.5V6M12 15.5v-3M16 15.5V4" />
+        </svg>
+        <span>运行诊断</span>
+      </button>
+      <button class="header-button" type="button" data-action="screenshot">
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M3.4 6.7h2.1l1-1.8h7l1 1.8h2.1v8.4H3.4z" />
+          <circle cx="10" cy="10.9" r="2.5" />
+        </svg>
+        <span>截图</span>
+      </button>
+    </div>
+  </header>
+
+  <main class="stage" data-role="stage">
+    <div class="preview-controls" data-role="preview-controls">
+      <div class="device-switcher" role="group" aria-label="预览设备">
+        <span
+          class="device-switcher-indicator"
+          data-role="device-indicator"
+          aria-hidden="true"
+        ></span>
+        <button type="button" data-viewport="iphone" aria-label="iPhone 预览">
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="6.2" y="2.5" width="7.6" height="15" rx="1.8" />
+            <path d="M9 4h2M9.2 15.7h1.6" />
+          </svg>
+          <span>iPhone</span>
+        </button>
+        <button type="button" data-viewport="ipad" aria-label="iPad 预览">
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="4.2" y="2.8" width="11.6" height="14.4" rx="1.6" />
+            <circle cx="10" cy="14.9" r=".6" />
+          </svg>
+          <span>iPad</span>
+        </button>
+        <button type="button" data-viewport="desktop" aria-label="桌面预览">
+          <svg viewBox="0 0 20 20" aria-hidden="true">
+            <rect x="2.7" y="3.7" width="14.6" height="10" rx="1.4" />
+            <path d="M7.5 16.3h5M10 13.7v2.6" />
+          </svg>
+          <span>Desktop</span>
+        </button>
+      </div>
+      <div class="scene-switcher" role="group" aria-label="模拟场景">
+        <button type="button" data-scene="fullscreen" aria-pressed="true">全屏小工具</button>
+        <button type="button" data-scene="half" aria-pressed="false">半屏小工具</button>
+        <button type="button" data-scene="note" aria-pressed="false">笔记页</button>
+        <button type="button" data-scene="profile" aria-pressed="false">个人页</button>
+      </div>
+    </div>
+
+    <div class="stage-canvas" data-role="preview-canvas" aria-busy="false">
+      <div class="device-slot" data-role="device-slot">
+        <div class="device-shell" data-role="device-shell" data-form-factor="iphone">
+          <div class="preview" data-role="preview"></div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="preview-transition"
+      data-role="preview-transition"
+      role="status"
+      aria-live="polite"
+      aria-hidden="true"
+    >
+      <span class="preview-transition-label">
+        <i aria-hidden="true"></i>
+        正在切换预览
+      </span>
+    </div>
+
+    <div class="preview-dock" aria-label="预览工具">
+      <button type="button" data-action="fit" aria-label="适应窗口" data-tooltip="适应窗口">
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M7 3H3v4M13 3h4v4M7 17H3v-4M13 17h4v-4" />
+        </svg>
+      </button>
+      <button type="button" data-action="reload" aria-label="重新运行" data-tooltip="重新运行">
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M15.7 7.1A6.2 6.2 0 1 0 16 11" />
+          <path d="M16 3.8v3.8h-3.8" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        data-action="diagnostics"
+        aria-label="运行诊断"
+        data-tooltip="运行诊断"
+        aria-expanded="false"
+      >
+        <svg viewBox="0 0 20 20" aria-hidden="true">
+          <path d="M4 15.5V10M8 15.5V6M12 15.5v-3M16 15.5V4" />
+        </svg>
+      </button>
+    </div>
+
+    <aside
+      class="diagnostics-panel"
+      data-role="diagnostics"
+      aria-label="运行诊断"
+      aria-hidden="true"
+    >
+      <div class="diagnostics-header">
+        <div>
+          <strong>运行诊断</strong>
+          <span>Remote Simulator</span>
+        </div>
+        <button type="button" data-action="close-diagnostics" aria-label="关闭运行诊断">
+          <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15" /></svg>
+        </button>
+      </div>
+
+      <div class="diagnostics-content">
+        <section class="diagnostics-card overview-card">
+          <div>
+            <span>逻辑视口</span>
+            <strong data-role="viewport"></strong>
+          </div>
+          <div>
+            <span>事件数量</span>
+            <strong data-role="event-count">0 events</strong>
+          </div>
+          <div class="latest-event">
+            <span>最近事件</span>
+            <strong data-role="last-event">等待加载小工具产物</strong>
+          </div>
+        </section>
+
+        <section class="diagnostics-section">
+          <div class="section-title">
+            <span>调试能力</span>
+            <span>4 / 4</span>
+          </div>
+          <div class="capability-grid">
+            <span>产物加载</span>
+            <span>交互截图</span>
+            <span>场景结构</span>
+            <span>日志诊断</span>
+          </div>
+        </section>
+
+        <section class="diagnostics-section event-section">
+          <div class="section-title">
+            <span>最近事件</span>
+            <span>自动刷新</span>
+          </div>
+          <div class="events" data-role="events">
+            <div class="event-empty">
+              <span class="event-empty-icon">
+                <svg viewBox="0 0 20 20" aria-hidden="true">
+                  <path d="M4 5h12v10H4z" />
+                  <path d="M7 8h6M7 11h4" />
+                </svg>
+              </span>
+              <strong>暂无运行事件</strong>
+              <span>加载小工具后将在这里显示</span>
+            </div>
+          </div>
+        </section>
+      </div>
+    </aside>
+  </main>
+</div>
+`;
+function r(a, i) {
+  const e = a.querySelector(i);
+  if (!e) throw new Error(`MiniAppWorkbench internal element missing: ${i}`);
+  return e;
+}
+function G(a, i) {
+  const e = Array.from(a.querySelectorAll(i));
+  if (e.length === 0)
+    throw new Error(`MiniAppWorkbench internal elements missing: ${i}`);
+  return e;
+}
+function zn(a) {
+  const i = document.createElement("div"), e = i.attachShadow({ mode: "open" }), v = document.createElement("style"), l = document.createElement("template");
+  return v.textContent = Ln, l.innerHTML = Cn, e.append(v, l.content.cloneNode(!0)), r(e, '[data-role="project-name"]').textContent = a, {
+    host: i,
+    root: e,
+    elements: {
+      closeDiagnosticsButton: r(e, '[data-action="close-diagnostics"]'),
+      deviceButtons: G(e, "[data-viewport]"),
+      deviceIndicator: r(e, '[data-role="device-indicator"]'),
+      deviceShell: r(e, '[data-role="device-shell"]'),
+      deviceSlot: r(e, '[data-role="device-slot"]'),
+      diagnosticsButtons: G(e, '[data-action="diagnostics"]'),
+      diagnosticsPanel: r(e, '[data-role="diagnostics"]'),
+      eventCount: r(e, '[data-role="event-count"]'),
+      events: r(e, '[data-role="events"]'),
+      fitButton: r(e, '[data-action="fit"]'),
+      lastEvent: r(e, '[data-role="last-event"]'),
+      preview: r(e, '[data-role="preview"]'),
+      previewCanvas: r(e, '[data-role="preview-canvas"]'),
+      previewControls: r(e, '[data-role="preview-controls"]'),
+      reloadButton: r(e, '[data-action="reload"]'),
+      sceneButtons: G(e, "[data-scene]"),
+      screenshotButton: r(e, '[data-action="screenshot"]'),
+      stage: r(e, '[data-role="stage"]'),
+      status: r(e, '[data-role="status"]'),
+      statusText: r(e, '[data-role="status-text"]'),
+      transitionOverlay: r(e, '[data-role="preview-transition"]'),
+      viewportLabel: r(e, '[data-role="viewport"]')
+    }
+  };
+}
+const J = {
+  fullscreen: { contentMode: "fullscreen", route: "minitool" },
+  half: { contentMode: "half", route: "minitool" },
+  note: { contentMode: "fullscreen", route: "note" },
+  profile: { contentMode: "fullscreen", route: "profile" }
+}, Tn = { width: 393, height: 852 }, f = 34, Q = 92, An = 3, bn = {
+  iphone: { width: 393, height: 852 },
+  ipad: { width: 834, height: 852 },
+  desktop: { width: 1280, height: 852 }
+}, Bn = [
+  "beforeLoad",
+  "load",
+  "renderDone",
+  "error",
+  "navigation",
+  "console",
+  "guestError",
+  "network"
+];
+function Fn(a) {
+  const i = typeof a == "string" ? document.querySelector(a) : a;
+  if (!i) throw new Error(`MiniAppWorkbench mount not found: ${String(a)}`);
+  return i;
+}
+function H(a) {
+  if (a == null) return "事件已触发";
+  if (typeof a == "string") return a;
+  if (typeof a == "object") {
+    const i = a;
+    for (const e of ["message", "reason", "url", "status", "code"])
+      if (i[e] != null) return String(i[e]);
+  }
+  try {
+    const i = JSON.stringify(a);
+    return i.length > 92 ? `${i.slice(0, 89)}...` : i;
+  } catch {
+    return String(a);
+  }
+}
+function Pn(a) {
+  const i = document.createElement("a");
+  i.href = a, i.download = `miniapp-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.png`, i.click();
+}
+function Dn(a) {
+  const i = Fn(a.mount);
+  let e = { ...a.viewport ?? Tn }, v = a.remote.options?.contentMode ?? "fullscreen", l = J[v].contentMode;
+  const w = zn(a.projectName?.trim() || "本地小工具"), { host: b, elements: L } = w;
+  i.appendChild(b);
+  const {
+    closeDiagnosticsButton: m,
+    deviceButtons: u,
+    deviceIndicator: C,
+    deviceShell: y,
+    deviceSlot: s,
+    diagnosticsButtons: z,
+    diagnosticsPanel: k,
+    eventCount: vn,
+    events: F,
+    fitButton: E,
+    lastEvent: P,
+    preview: W,
+    previewCanvas: un,
+    previewControls: gn,
+    reloadButton: $,
+    sceneButtons: T,
+    screenshotButton: D,
+    stage: V,
+    status: hn,
+    statusText: wn,
+    transitionOverlay: xn,
+    viewportLabel: fn
+  } = L;
+  let M, S;
+  const j = Sn(xn, un), mn = (n) => n.width >= 1024 ? "desktop" : n.width >= 700 ? "ipad" : "iphone", yn = () => {
+    S = void 0;
+    const n = e.width, t = e.height, o = Math.max(V.clientWidth - 84, 1), c = gn.offsetHeight;
+    V.style.setProperty("--preview-controls-height", `${c}px`);
+    const h = Math.max(V.clientHeight - c - 112, 1), p = Math.min(1, o / n, h / t);
+    y.style.setProperty("--device-scale", String(p)), s.style.width = `${n * p}px`, s.style.height = `${t * p}px`;
+  }, I = () => {
+    S !== void 0 && window.cancelAnimationFrame(S), S = window.requestAnimationFrame(yn);
+  }, nn = (n) => {
+    e = { ...n };
+    const t = mn(n), o = Math.max(
+      0,
+      u.findIndex((c) => c.dataset.viewport === t)
+    );
+    W.style.width = `${n.width}px`, W.style.height = `${n.height}px`, y.style.width = `${n.width}px`, y.style.height = `${n.height}px`, y.dataset.formFactor = t, C.style.transform = `translateX(${o * f}px)`;
+    for (const [c, h] of u.entries()) {
+      const p = c === o, B = c < o ? c * f : o === 0 ? Q + (c - 1) * f : o * f + Q + (c - o - 1) * f, En = p ? o * f : B;
+      h.style.left = `${An + En}px`, h.style.width = `${p ? Q : f}px`, h.classList.toggle("is-active", p), h.setAttribute("aria-pressed", String(p));
+    }
+    fn.textContent = `${n.width} × ${n.height}`, I();
+  };
+  nn(e);
+  const { options: N, ...kn } = a.remote, d = Mn({
+    ...kn,
+    mount: W,
+    options: {
+      ...N,
+      contentMode: l,
+      shell: "rednote",
+      viewport: e,
+      phoneFrame: N?.phoneFrame ?? !1,
+      touchEmulation: N?.touchEmulation ?? !0,
+      stageFit: N?.stageFit ?? !0
+    }
+  }), _ = [];
+  let q = 0, g = !1, X = !1;
+  const K = (n) => {
+    X = n, k.classList.toggle("is-open", n), k.setAttribute("aria-hidden", String(!n));
+    for (const t of z)
+      t.classList.toggle("is-active", n), t.setAttribute("aria-expanded", String(n));
+  }, x = (n, t) => {
+    hn.dataset.tone = n, wn.textContent = t;
+  }, A = (n, t) => {
+    q += 1, vn.textContent = `${q} ${q === 1 ? "event" : "events"}`, P.textContent = `${n} · ${H(t)}`, F.querySelector(".event-empty")?.remove();
+    const o = document.createElement("div");
+    o.className = "event", (n === "error" || n === "guestError") && (o.dataset.tone = "error");
+    const c = document.createElement("span");
+    c.className = "event-mark";
+    const h = document.createElement("div"), p = document.createElement("div");
+    p.className = "event-name", p.textContent = n;
+    const B = document.createElement("div");
+    for (B.className = "event-detail", B.textContent = H(t), h.append(p, B), o.append(c, h), F.prepend(o); F.children.length > 7; ) F.lastElementChild?.remove();
+    (n === "error" || n === "guestError") && x("error", "运行异常"), (n === "load" || n === "renderDone") && x("ready", "小工具运行中");
+  };
+  for (const n of Bn)
+    _.push(d.on(n, (t) => A(n, t)));
+  x("pending", "正在连接远程模拟器"), d.ready.then(
+    (n) => {
+      g || (x("ready", "远程模拟器已连接"), P.textContent = `runtimeReady · ${n.runtimeVersion}`);
+    },
+    (n) => {
+      g || (x("error", "远程模拟器连接失败"), P.textContent = H(n));
+    }
+  );
+  const U = async (n, t) => {
+    x("pending", n);
+    try {
+      await t();
+    } catch (o) {
+      throw x("error", "小工具加载失败"), P.textContent = H(o), o;
+    }
+  };
+  let Z = !1, O;
+  const Y = () => {
+    for (const n of T) {
+      const t = n.dataset.scene === v;
+      n.classList.toggle("is-active", t), n.setAttribute("aria-pressed", String(t));
+    }
+  };
+  Y(), _.push(
+    d.on("routerChange", ({ to: n }) => {
+      g || O || (v = n === "minitool" ? l : n, Y());
+    })
+  );
+  const R = () => {
+    if (g) return Promise.resolve();
+    Z = !0, $.disabled = !0;
+    for (const n of T) n.disabled = !0;
+    return O ?? (O = j.run("reload", async () => {
+      for (; Z && !g; ) {
+        Z = !1;
+        const t = J[v];
+        x("pending", "正在重新加载");
+        try {
+          l !== t.contentMode && (await d.switchContentMode(t.contentMode), l = t.contentMode), a.onReload ? await a.onReload() : await d.reload(), await d.redirectTo(t.route, {
+            sheetMode: t.contentMode === "half" ? "half" : "full"
+          });
+        } catch (o) {
+          A("error", o);
+        }
+      }
+    }).finally(() => {
+      O = void 0, $.disabled = !1;
+      for (const n of T) n.disabled = !1;
+    })), O;
+  }, en = (n) => Object.prototype.hasOwnProperty.call(J, n) ? g ? Promise.resolve() : (v = n, Y(), R()) : Promise.reject(new Error(`不支持的工作台场景：${n}`)), tn = (n) => {
+    const t = n.currentTarget.dataset.scene;
+    en(t);
+  }, an = async () => {
+    D.disabled = !0;
+    try {
+      const n = await d.screenShot();
+      n.success ? Pn(n.base64) : A("error", { code: n.code, message: n.reason });
+    } catch (n) {
+      A("error", n);
+    } finally {
+      D.disabled = !1;
+    }
+  }, on = (n) => {
+    const o = n.currentTarget.dataset.viewport;
+    !o || !bn[o] || rn(bn[o]);
+  }, rn = (n) => {
+    if (!g) {
+      if (n.width === e.width && n.height === e.height && !j.isActive("viewport")) {
+        I();
+        return;
+      }
+      j.run("viewport", async () => {
+        nn(n), await d.invoke("setViewport", n);
+      }).catch((t) => {
+        g || A("error", t);
+      });
+    }
+  }, sn = () => K(!X), dn = () => K(!1), cn = () => {
+    I(), E.classList.remove("is-acknowledged"), E.offsetWidth, E.classList.add("is-acknowledged"), M !== void 0 && window.clearTimeout(M), M = window.setTimeout(() => {
+      M = void 0, E.classList.remove("is-acknowledged");
+    }, 360);
+  }, ln = (n) => {
+    n.key === "Escape" && X && K(!1);
+  };
+  $.addEventListener("click", R), D.addEventListener("click", an), E.addEventListener("click", cn), m.addEventListener("click", dn);
+  for (const n of z)
+    n.addEventListener("click", sn);
+  for (const n of u) n.addEventListener("click", on);
+  for (const n of T) n.addEventListener("click", tn);
+  w.root.addEventListener("keydown", ln);
+  const pn = new ResizeObserver(I);
+  return pn.observe(V), {
+    element: b,
+    simulator: d,
+    ready: d.ready,
+    reload: R,
+    setScene: en,
+    async loadZip(n, t) {
+      await U("正在加载小工具产物", () => d.loadZip(n, t));
+    },
+    async loadFiles(n, t) {
+      await U("正在加载小工具文件", () => d.loadFiles(n, t));
+    },
+    async loadApp(n, t) {
+      await U("正在加载小工具", () => d.loadApp(n, t));
+    },
+    setViewport: rn,
+    destroy(n = "workbench-destroy") {
+      if (!g) {
+        g = !0, $.removeEventListener("click", R), D.removeEventListener("click", an), E.removeEventListener("click", cn), m.removeEventListener("click", dn);
+        for (const t of z)
+          t.removeEventListener("click", sn);
+        for (const t of u) t.removeEventListener("click", on);
+        for (const t of T) t.removeEventListener("click", tn);
+        w.root.removeEventListener("keydown", ln), pn.disconnect(), S !== void 0 && window.cancelAnimationFrame(S), M !== void 0 && window.clearTimeout(M), j.destroy();
+        for (const t of _) t();
+        d.destroy(n), b.remove();
+      }
+    }
+  };
+}
+export {
+  Dn as createMiniAppWorkbench
+};