@claude-canvas/core 0.2.0

package/dist/index.js

@@ -0,0 +1,1433 @@
+// src/shadow-container.ts
+var DESIGN_TOKENS = `
+:host {
+  --cc-bg-panel: rgba(30, 30, 30, 0.95);
+  --cc-bg-toolbar: rgba(40, 40, 40, 0.92);
+  --cc-bg-input: rgba(50, 50, 50, 1);
+  --cc-bg-hover: rgba(60, 60, 60, 1);
+  --cc-text-primary: #e0e0e0;
+  --cc-text-secondary: #a0a0a0;
+  --cc-text-muted: #707070;
+  --cc-annotation-box: #ff4444;
+  --cc-annotation-box-fill: rgba(255, 68, 68, 0.1);
+  --cc-highlight-hover: rgba(66, 133, 244, 0.3);
+  --cc-highlight-select: rgba(255, 152, 0, 0.4);
+  --cc-accent: #7c4dff;
+  --cc-success: #4caf50;
+  --cc-warning: #ff9800;
+  --cc-error: #f44336;
+  --cc-info: #2196f3;
+  --cc-border: rgba(255, 255, 255, 0.12);
+  --cc-border-focus: rgba(124, 77, 255, 0.6);
+  --cc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --cc-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+  --cc-font-size-xs: 11px;
+  --cc-font-size-sm: 12px;
+  --cc-font-size-md: 13px;
+  --cc-font-size-lg: 14px;
+  --cc-line-height: 1.4;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.cc-container {
+  font-family: var(--cc-font-family);
+  font-size: var(--cc-font-size-md);
+  color: var(--cc-text-primary);
+  line-height: var(--cc-line-height);
+}
+`;
+var ShadowContainer = class {
+  host;
+  shadow;
+  container;
+  mounted = false;
+  constructor() {
+    this.host = document.createElement("div");
+    this.host.id = "claude-canvas-root";
+    this.shadow = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = DESIGN_TOKENS;
+    this.shadow.appendChild(style);
+    this.container = document.createElement("div");
+    this.container.className = "cc-container";
+    this.shadow.appendChild(this.container);
+  }
+  mount() {
+    if (this.mounted) return;
+    document.body.appendChild(this.host);
+    this.mounted = true;
+  }
+  unmount() {
+    if (!this.mounted) return;
+    this.host.remove();
+    this.mounted = false;
+  }
+  getContainer() {
+    return this.container;
+  }
+  getShadowRoot() {
+    return this.shadow;
+  }
+};
+
+// src/toast.ts
+var TOAST_STYLES = `
+.cc-toast-container {
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.cc-toast {
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-family: var(--cc-font-family);
+  font-size: var(--cc-font-size-sm);
+  color: #fff;
+  pointer-events: auto;
+  animation: cc-toast-in 0.2s ease-out;
+}
+
+.cc-toast--success { background: var(--cc-success); }
+.cc-toast--warning { background: var(--cc-warning); }
+.cc-toast--error { background: var(--cc-error); }
+.cc-toast--info { background: var(--cc-info); }
+
+@keyframes cc-toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`;
+var Toast = class {
+  shadowRoot;
+  toastContainer;
+  styleInjected = false;
+  constructor(shadowRoot) {
+    this.shadowRoot = shadowRoot;
+    this.toastContainer = document.createElement("div");
+    this.toastContainer.className = "cc-toast-container";
+  }
+  ensureStyle() {
+    if (this.styleInjected) return;
+    const style = document.createElement("style");
+    style.textContent = TOAST_STYLES;
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(this.toastContainer);
+    this.styleInjected = true;
+  }
+  show(message, variant) {
+    this.ensureStyle();
+    const el = document.createElement("div");
+    el.className = `cc-toast cc-toast--${variant}`;
+    el.textContent = message;
+    this.toastContainer.appendChild(el);
+    setTimeout(() => {
+      el.remove();
+    }, 3e3);
+  }
+  hide() {
+    const toasts = this.toastContainer.querySelectorAll(".cc-toast");
+    for (const t of toasts) {
+      t.remove();
+    }
+  }
+};
+
+// src/keyboard-handler.ts
+var KEY_TO_MODE = {
+  "1": "select",
+  "2": "box",
+  "3": "memo",
+  "4": "capture"
+};
+var KeyboardHandler = class {
+  callbacks;
+  enabled = true;
+  listener = null;
+  constructor(callbacks) {
+    this.callbacks = callbacks;
+  }
+  mount() {
+    this.listener = (e) => {
+      if (!this.enabled) return;
+      if (e.ctrlKey && e.shiftKey && e.key === "A") {
+        e.preventDefault();
+        this.callbacks.onToggleMode();
+        return;
+      }
+      if (e.key === "Escape") {
+        this.callbacks.onEscape();
+        return;
+      }
+      if (e.key === "Enter") {
+        this.callbacks.onSend();
+        return;
+      }
+      const mode = KEY_TO_MODE[e.key];
+      if (mode) {
+        this.callbacks.onToolSwitch(mode);
+      }
+    };
+    window.addEventListener("keydown", this.listener, true);
+  }
+  unmount() {
+    if (this.listener) {
+      window.removeEventListener("keydown", this.listener, true);
+      this.listener = null;
+    }
+  }
+  setEnabled(enabled) {
+    this.enabled = enabled;
+  }
+};
+
+// src/panels/fab-button.ts
+var FAB_ICON = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5" fill="none"/>
+  <line x1="6" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="6" y1="10" x2="12" y2="10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="6" y1="13" x2="10" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>`;
+var FAB_STYLES = `
+.cc-fab-button {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: var(--cc-accent, #7c4dff);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: background 0.15s ease, transform 0.15s ease;
+}
+
+.cc-fab-button:hover {
+  background: var(--cc-border-focus, rgba(124, 77, 255, 0.8));
+  transform: scale(1.08);
+}
+
+.cc-fab-tooltip {
+  position: fixed;
+  bottom: 72px;
+  right: 16px;
+  background: var(--cc-bg-panel, rgba(30, 30, 30, 0.95));
+  color: var(--cc-text-primary, #e0e0e0);
+  font-family: var(--cc-font-family, sans-serif);
+  font-size: var(--cc-font-size-xs, 11px);
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 99999;
+}
+`;
+var FabButton = class {
+  shadowRoot;
+  options;
+  button = null;
+  tooltip = null;
+  styleEl = null;
+  mounted = false;
+  constructor(shadowRoot, options) {
+    this.shadowRoot = shadowRoot;
+    this.options = options;
+  }
+  mount() {
+    if (this.mounted) return;
+    this.styleEl = document.createElement("style");
+    this.styleEl.textContent = FAB_STYLES;
+    this.shadowRoot.appendChild(this.styleEl);
+    this.button = document.createElement("button");
+    this.button.className = "cc-fab-button";
+    this.button.innerHTML = FAB_ICON;
+    this.button.style.position = "fixed";
+    this.button.style.bottom = "24px";
+    this.button.style.right = "24px";
+    this.button.style.width = "40px";
+    this.button.style.height = "40px";
+    this.button.style.borderRadius = "50%";
+    this.button.style.zIndex = "99999";
+    this.button.addEventListener("click", this.handleClick);
+    this.button.addEventListener("mouseenter", this.handleMouseEnter);
+    this.button.addEventListener("mouseleave", this.handleMouseLeave);
+    this.shadowRoot.appendChild(this.button);
+    this.mounted = true;
+  }
+  unmount() {
+    if (!this.mounted) return;
+    this.button?.removeEventListener("click", this.handleClick);
+    this.button?.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.button?.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.button?.remove();
+    this.styleEl?.remove();
+    this.hideTooltip();
+    this.button = null;
+    this.styleEl = null;
+    this.mounted = false;
+  }
+  setVisible(visible) {
+    if (!this.button) return;
+    this.button.style.display = visible ? "flex" : "none";
+    if (!visible) {
+      this.hideTooltip();
+    }
+  }
+  handleClick = () => {
+    this.options.onActivate();
+  };
+  handleMouseEnter = () => {
+    this.showTooltip();
+  };
+  handleMouseLeave = () => {
+    this.hideTooltip();
+  };
+  showTooltip() {
+    if (this.tooltip) return;
+    this.tooltip = document.createElement("div");
+    this.tooltip.className = "cc-fab-tooltip";
+    this.tooltip.textContent = "Ctrl+Shift+A";
+    this.shadowRoot.appendChild(this.tooltip);
+  }
+  hideTooltip() {
+    this.tooltip?.remove();
+    this.tooltip = null;
+  }
+};
+
+// src/panels/chat-panel.ts
+var CHAT_PANEL_STYLES = `
+.cc-chat-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 360px;
+  height: 100vh;
+  background: var(--cc-bg-panel, rgba(30, 30, 30, 0.95));
+  border-left: 1px solid var(--cc-border, rgba(255, 255, 255, 0.1));
+  display: flex;
+  flex-direction: column;
+  z-index: 100000;
+  transition: transform 0.2s ease;
+  font-family: var(--cc-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+}
+
+.cc-chat-panel.collapsed {
+  transform: translateX(100%);
+}
+
+.cc-chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--cc-border, rgba(255, 255, 255, 0.1));
+}
+
+.cc-chat-title {
+  font-weight: 600;
+  font-size: var(--cc-font-size-lg, 14px);
+  color: var(--cc-text-primary, #e0e0e0);
+}
+
+.cc-collapse-btn {
+  background: none;
+  border: none;
+  color: var(--cc-text-primary, #e0e0e0);
+  cursor: pointer;
+  padding: 4px 8px;
+  font-size: 12px;
+  transition: color 0.15s ease;
+}
+
+.cc-collapse-btn:hover {
+  color: var(--cc-accent, #7c4dff);
+}
+
+.cc-message-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.cc-message {
+  margin-bottom: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  font-size: var(--cc-font-size-md, 12px);
+  word-break: break-word;
+}
+
+.cc-user-message {
+  background: var(--cc-bg-hover, rgba(255, 255, 255, 0.05));
+  color: var(--cc-text-primary, #e0e0e0);
+}
+
+.cc-assistant-message {
+  background: rgba(124, 77, 255, 0.1);
+  color: var(--cc-text-primary, #e0e0e0);
+}
+
+.cc-system-message {
+  background: var(--cc-bg-toolbar, rgba(255, 255, 255, 0.02));
+  font-size: var(--cc-font-size-sm, 11px);
+  color: var(--cc-text-secondary, #999);
+}
+
+.cc-message-content {
+  margin-bottom: 4px;
+}
+
+.cc-files-changed {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: var(--cc-font-size-sm, 11px);
+}
+
+.cc-file-change {
+  margin-bottom: 4px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.cc-file-action {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  min-width: 40px;
+  text-align: center;
+}
+
+.cc-file-action {
+  background: rgba(124, 77, 255, 0.2);
+  color: #7c4dff;
+}
+
+.cc-annotation-card {
+  margin-top: 6px;
+  padding: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  border-left: 2px solid #7c4dff;
+  border-radius: 3px;
+  font-size: var(--cc-font-size-sm, 11px);
+}
+
+.cc-annotation-card > div {
+  margin-bottom: 3px;
+  color: #b39ddb;
+}
+
+.cc-annotation-card > div:last-child {
+  margin-bottom: 0;
+}
+
+.cc-chat-footer {
+  padding: 8px;
+  border-top: 1px solid var(--cc-border, rgba(255, 255, 255, 0.1));
+  display: flex;
+  gap: 4px;
+}
+
+.cc-chat-input {
+  flex: 1;
+  background: var(--cc-bg-input, rgba(255, 255, 255, 0.05));
+  color: var(--cc-text-primary, #e0e0e0);
+  border: 1px solid var(--cc-border, rgba(255, 255, 255, 0.1));
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: var(--cc-font-size-md, 12px);
+  font-family: var(--cc-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  resize: none;
+  transition: border-color 0.15s ease;
+}
+
+.cc-chat-input:focus {
+  outline: none;
+  border-color: var(--cc-accent, #7c4dff);
+}
+
+.cc-send-btn {
+  width: 32px;
+  height: 32px;
+  background: var(--cc-accent, #7c4dff);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: background 0.15s ease, transform 0.1s ease;
+}
+
+.cc-send-btn:hover {
+  background: rgba(124, 77, 255, 0.8);
+}
+
+.cc-send-btn:active {
+  transform: scale(0.95);
+}
+
+.cc-send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
+var ChatPanel = class {
+  container;
+  messageList;
+  inputArea;
+  sendButton;
+  messages = [];
+  collapsed = false;
+  onSend;
+  constructor(shadowRoot) {
+    const styleEl = document.createElement("style");
+    styleEl.textContent = CHAT_PANEL_STYLES;
+    shadowRoot.appendChild(styleEl);
+    this.container = document.createElement("div");
+    this.container.className = "cc-chat-panel";
+    this.container.innerHTML = `
+      <div class="cc-chat-header">
+        <span class="cc-chat-title">Claude Canvas</span>
+        <button class="cc-collapse-btn" aria-label="Toggle panel">\u25C0</button>
+      </div>
+      <div class="cc-message-list"></div>
+      <div class="cc-chat-footer">
+        <textarea class="cc-chat-input" placeholder="\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694..." rows="2"></textarea>
+        <button class="cc-send-btn" aria-label="Send">\u25B6</button>
+      </div>
+    `;
+    shadowRoot.appendChild(this.container);
+    this.messageList = this.container.querySelector(".cc-message-list");
+    this.inputArea = this.container.querySelector(".cc-chat-input");
+    this.sendButton = this.container.querySelector(".cc-send-btn");
+    const collapseBtn = this.container.querySelector(".cc-collapse-btn");
+    collapseBtn?.addEventListener("click", () => this.toggle());
+    this.sendButton.addEventListener("click", () => this.handleSend());
+    this.inputArea.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        this.handleSend();
+      }
+    });
+  }
+  addMessage(msg) {
+    this.messages.push(msg);
+    const el = this.renderMessage(msg);
+    this.messageList.appendChild(el);
+    this.messageList.scrollTop = this.messageList.scrollHeight;
+  }
+  appendStream(delta) {
+    const last = this.messageList.lastElementChild;
+    if (last?.classList.contains("cc-assistant-message")) {
+      const content = last.querySelector(".cc-message-content");
+      if (content) {
+        content.textContent = (content.textContent || "") + delta;
+      }
+    }
+  }
+  toggle() {
+    this.collapsed = !this.collapsed;
+    this.container.classList.toggle("collapsed", this.collapsed);
+  }
+  isCollapsed() {
+    return this.collapsed;
+  }
+  onMessageSend(cb) {
+    this.onSend = cb;
+  }
+  handleSend() {
+    const text = this.inputArea.value.trim();
+    if (!text) return;
+    this.onSend?.(text);
+    this.inputArea.value = "";
+  }
+  renderMessage(msg) {
+    const el = document.createElement("div");
+    el.className = `cc-message cc-${msg.role}-message`;
+    const content = document.createElement("div");
+    content.className = "cc-message-content";
+    content.textContent = msg.content;
+    el.appendChild(content);
+    if (msg.filesChanged?.length) {
+      const files = document.createElement("div");
+      files.className = "cc-files-changed";
+      files.innerHTML = msg.filesChanged.map(
+        (f) => `<div class="cc-file-change"><span class="cc-file-action">${f.action}</span> ${f.file} (+${f.linesAdded}/-${f.linesRemoved})</div>`
+      ).join("");
+      el.appendChild(files);
+    }
+    if (msg.annotations?.annotations.length) {
+      const annCard = document.createElement("div");
+      annCard.className = "cc-annotation-card";
+      annCard.innerHTML = msg.annotations.annotations.map(
+        (a) => a.source ? `<div>${a.source.componentName} \u2014 ${a.source.file}:${a.source.line}</div>` : `<div>${a.memo}</div>`
+      ).join("");
+      el.appendChild(annCard);
+    }
+    return el;
+  }
+};
+
+// src/panels/session-bar.ts
+var SESSION_BAR_STYLES = `
+.cc-session-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  background: var(--cc-bg-toolbar);
+  border-bottom: 1px solid var(--cc-border);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 16px;
+  font-size: var(--cc-font-size-sm);
+  color: var(--cc-text-secondary);
+  z-index: 100003;
+}
+.cc-status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--cc-success);
+}
+.cc-branch-name {
+  font-family: var(--cc-font-mono);
+  color: var(--cc-text-primary);
+}
+.cc-end-session-btn {
+  margin-left: auto;
+  padding: 2px 8px;
+  background: var(--cc-error);
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: var(--cc-font-size-xs);
+}
+`;
+var SessionBarPanel = class {
+  container;
+  statusDot;
+  branchLabel;
+  changeLabel;
+  hmrLabel;
+  endBtn;
+  onEndSession;
+  visible = false;
+  constructor(shadowRoot) {
+    const style = document.createElement("style");
+    style.textContent = SESSION_BAR_STYLES;
+    shadowRoot.appendChild(style);
+    this.container = document.createElement("div");
+    this.container.className = "cc-session-bar";
+    this.container.style.display = "none";
+    this.container.innerHTML = `
+      <span class="cc-status-indicator"></span>
+      <span class="cc-branch-name"></span>
+      <span class="cc-change-count">0 files changed</span>
+      <span class="cc-hmr-status">\u2713 HMR</span>
+      <button class="cc-end-session-btn">End Session</button>
+    `;
+    shadowRoot.appendChild(this.container);
+    this.statusDot = this.container.querySelector(".cc-status-indicator");
+    this.branchLabel = this.container.querySelector(".cc-branch-name");
+    this.changeLabel = this.container.querySelector(".cc-change-count");
+    this.hmrLabel = this.container.querySelector(".cc-hmr-status");
+    this.endBtn = this.container.querySelector(".cc-end-session-btn");
+    this.endBtn.addEventListener("click", () => this.onEndSession?.());
+  }
+  show(branch) {
+    this.branchLabel.textContent = branch;
+    this.container.style.display = "flex";
+    this.visible = true;
+    this.setStatus("active");
+  }
+  hide() {
+    this.container.style.display = "none";
+    this.visible = false;
+  }
+  setStatus(status) {
+    const colors = {
+      "active": "var(--cc-success)",
+      "qa-running": "var(--cc-warning)",
+      "qa-passed": "var(--cc-success)",
+      "qa-failed": "var(--cc-error)"
+    };
+    this.statusDot.style.background = colors[status];
+  }
+  updateChangedFiles(count) {
+    this.changeLabel.textContent = `${count} file${count !== 1 ? "s" : ""} changed`;
+  }
+  setHmrStatus(connected) {
+    this.hmrLabel.textContent = connected ? "\u2713 HMR" : "\u2717 HMR";
+    this.hmrLabel.style.color = connected ? "var(--cc-success)" : "var(--cc-error)";
+  }
+  onEnd(cb) {
+    this.onEndSession = cb;
+  }
+  isVisible() {
+    return this.visible;
+  }
+};
+
+// src/panels/qa-result.ts
+var QA_RESULT_STYLES = `
+.cc-qa-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100004;
+}
+.cc-qa-modal {
+  background: var(--cc-bg-panel);
+  border: 1px solid var(--cc-border);
+  border-radius: 8px;
+  padding: 24px;
+  min-width: 420px;
+  max-width: 520px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+}
+.cc-qa-title {
+  margin-bottom: 16px;
+  font-size: var(--cc-font-size-lg);
+}
+.cc-qa-step {
+  padding: 4px 0;
+  font-family: var(--cc-font-mono);
+  font-size: var(--cc-font-size-sm);
+}
+.cc-change-summary {
+  margin: 12px 0;
+  padding: 8px;
+  background: var(--cc-bg-input);
+  border-radius: 4px;
+}
+.cc-qa-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+.cc-qa-merge-btn {
+  flex: 1;
+  padding: 6px;
+  background: var(--cc-success);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.cc-qa-merge-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.cc-qa-fix-btn {
+  flex: 1;
+  padding: 6px;
+  background: var(--cc-warning);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.cc-qa-discard-btn {
+  flex: 1;
+  padding: 6px;
+  background: var(--cc-error);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.cc-confirm-dialog {
+  margin-top: 12px;
+  padding: 12px;
+  background: var(--cc-bg-input);
+  border-radius: 4px;
+}
+.cc-confirm-yes,
+.cc-confirm-no {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-right: 8px;
+}
+.cc-confirm-yes {
+  background: var(--cc-error);
+  color: white;
+}
+.cc-confirm-no {
+  background: var(--cc-bg-hover);
+  color: var(--cc-text-primary);
+}
+`;
+var QAResultPanel = class {
+  overlay;
+  modal;
+  stepList;
+  changeSummary;
+  mergeBtn;
+  fixBtn;
+  discardBtn;
+  confirmDialog = null;
+  onMerge;
+  onFix;
+  onDiscard;
+  constructor(shadowRoot) {
+    const style = document.createElement("style");
+    style.textContent = QA_RESULT_STYLES;
+    shadowRoot.appendChild(style);
+    this.overlay = document.createElement("div");
+    this.overlay.className = "cc-qa-modal-overlay";
+    this.overlay.style.display = "none";
+    this.overlay.innerHTML = `
+      <div class="cc-qa-modal">
+        <h3 class="cc-qa-title">QA Results</h3>
+        <div class="cc-qa-step-list"></div>
+        <div class="cc-change-summary"></div>
+        <div class="cc-qa-actions">
+          <button class="cc-qa-merge-btn" disabled>Merge</button>
+          <button class="cc-qa-fix-btn">Fix</button>
+          <button class="cc-qa-discard-btn">Discard</button>
+        </div>
+      </div>
+    `;
+    shadowRoot.appendChild(this.overlay);
+    this.modal = this.overlay.querySelector(".cc-qa-modal");
+    this.stepList = this.overlay.querySelector(".cc-qa-step-list");
+    this.changeSummary = this.overlay.querySelector(".cc-change-summary");
+    this.mergeBtn = this.overlay.querySelector(".cc-qa-merge-btn");
+    this.fixBtn = this.overlay.querySelector(".cc-qa-fix-btn");
+    this.discardBtn = this.overlay.querySelector(".cc-qa-discard-btn");
+    this.mergeBtn.addEventListener("click", () => this.onMerge?.());
+    this.fixBtn.addEventListener("click", () => {
+      this.hide();
+      this.onFix?.();
+    });
+    this.discardBtn.addEventListener("click", () => this.showConfirm());
+  }
+  show() {
+    this.overlay.style.display = "flex";
+  }
+  hide() {
+    this.overlay.style.display = "none";
+  }
+  updateStep(step) {
+    let el = this.stepList.querySelector(`[data-step="${step.name}"]`);
+    if (!el) {
+      el = document.createElement("div");
+      el.className = "cc-qa-step";
+      el.setAttribute("data-step", step.name);
+      this.stepList.appendChild(el);
+    }
+    const icon = step.status === "pass" ? "\u2713" : step.status === "fail" ? "\u2717" : step.status === "running" ? "\u27F3" : "\u25CB";
+    const color = step.status === "pass" ? "var(--cc-success)" : step.status === "fail" ? "var(--cc-error)" : "var(--cc-text-muted)";
+    el.innerHTML = `<span style="color:${color}">${icon}</span> ${step.name}${step.duration ? ` (${step.duration}ms)` : ""}`;
+  }
+  setOverallPass(pass) {
+    this.mergeBtn.disabled = !pass;
+  }
+  setChangeSummary(changes) {
+    this.changeSummary.innerHTML = changes.map(
+      (c) => `<div class="cc-change-item">${c.action} ${c.file} <span class="cc-diff-stat">+${c.linesAdded}/-${c.linesRemoved}</span></div>`
+    ).join("");
+  }
+  onMergeClick(cb) {
+    this.onMerge = cb;
+  }
+  onFixClick(cb) {
+    this.onFix = cb;
+  }
+  onDiscardClick(cb) {
+    this.onDiscard = cb;
+  }
+  showConfirm() {
+    this.confirmDialog = document.createElement("div");
+    this.confirmDialog.className = "cc-confirm-dialog";
+    this.confirmDialog.innerHTML = `
+      <p>\uC815\uB9D0 \uD3D0\uAE30\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? \uBAA8\uB4E0 \uBCC0\uACBD\uC0AC\uD56D\uC774 \uC0AD\uC81C\uB429\uB2C8\uB2E4.</p>
+      <button class="cc-confirm-yes">\uD3D0\uAE30</button>
+      <button class="cc-confirm-no">\uCDE8\uC18C</button>
+    `;
+    this.modal.appendChild(this.confirmDialog);
+    this.confirmDialog.querySelector(".cc-confirm-yes")?.addEventListener("click", () => {
+      this.hide();
+      this.onDiscard?.();
+    });
+    this.confirmDialog.querySelector(".cc-confirm-no")?.addEventListener("click", () => {
+      this.confirmDialog?.remove();
+      this.confirmDialog = null;
+    });
+  }
+};
+
+// src/inspector/fiber-walker.ts
+var FIBER_KEY_PREFIXES = ["__reactFiber$", "__reactInternalInstance$"];
+var FiberWalker = {
+  /**
+   * Find the React fiber attached to a DOM element.
+   * React 18+ uses __reactFiber$<hash>, older versions use __reactInternalInstance$<hash>.
+   */
+  getFiberFromElement(el) {
+    const keys = Object.keys(el);
+    for (const key of keys) {
+      for (const prefix of FIBER_KEY_PREFIXES) {
+        if (key.startsWith(prefix)) {
+          const fiber = el[key];
+          if (fiber && typeof fiber === "object") {
+            return fiber;
+          }
+        }
+      }
+    }
+    return null;
+  },
+  /**
+   * Extract SourceInfo from a React fiber's _debugSource.
+   * Returns null when debug source info is unavailable.
+   */
+  getSourceInfo(fiber) {
+    if (!fiber || !fiber._debugSource) {
+      return null;
+    }
+    const { fileName, lineNumber, columnNumber } = fiber._debugSource;
+    let componentName = "Anonymous";
+    if (fiber.type && typeof fiber.type === "object") {
+      const fiberType = fiber.type;
+      if (fiberType.displayName) {
+        componentName = fiberType.displayName;
+      } else if (fiberType.name) {
+        componentName = fiberType.name;
+      }
+    } else if (typeof fiber.type === "string") {
+      componentName = fiber.type;
+    }
+    let tagName = "unknown";
+    if (fiber.stateNode && typeof fiber.stateNode.tagName === "string") {
+      tagName = fiber.stateNode.tagName.toLowerCase();
+    }
+    let className;
+    if (fiber.stateNode && typeof fiber.stateNode.className === "string" && fiber.stateNode.className.length > 0) {
+      className = fiber.stateNode.className;
+    }
+    return {
+      componentName,
+      file: fileName,
+      line: lineNumber,
+      column: columnNumber,
+      tagName,
+      ...className !== void 0 ? { className } : {}
+    };
+  }
+};
+
+// src/inspector/source-mapper.ts
+var SourceMapper = class _SourceMapper {
+  static detectLibrary(source, wrapperPaths) {
+    if (source.file.includes("node_modules/@carbon")) return "carbon";
+    if (source.library?.includes("@carbon")) return "carbon";
+    if (wrapperPaths && wrapperPaths.some((p) => source.file.includes(p))) return "project-wrapper";
+    return "unknown";
+  }
+  static isWrapperComponent(file, wrapperPaths) {
+    return wrapperPaths.some((p) => file.includes(p));
+  }
+  static formatSourcePath(file, line, column) {
+    return `${file}:${line}:${column}`;
+  }
+  // Instance method aliases
+  detectLibrary(source, wrapperPaths) {
+    return _SourceMapper.detectLibrary(source, wrapperPaths);
+  }
+  isWrapperComponent(file, wrapperPaths) {
+    return _SourceMapper.isWrapperComponent(file, wrapperPaths);
+  }
+  formatSourcePath(file, line, column) {
+    return _SourceMapper.formatSourcePath(file, line, column);
+  }
+};
+
+// src/annotator/canvas-overlay.ts
+function makeNoopCtx() {
+  return new Proxy({}, {
+    get: () => () => void 0,
+    set: () => true
+  });
+}
+var CanvasOverlay = class {
+  canvas;
+  ctx;
+  mode = "off";
+  annotations = [];
+  constructor() {
+    this.canvas = document.createElement("canvas");
+    this.canvas.style.cssText = "position:fixed;inset:0;width:100vw;height:100vh;z-index:100001;pointer-events:none;";
+    try {
+      this.ctx = this.canvas.getContext("2d") ?? makeNoopCtx();
+    } catch {
+      this.ctx = makeNoopCtx();
+    }
+  }
+  mount() {
+    document.body.appendChild(this.canvas);
+  }
+  unmount() {
+    this.canvas.remove();
+  }
+  setMode(mode) {
+    this.mode = mode;
+    this.canvas.style.pointerEvents = mode === "off" ? "none" : "auto";
+  }
+  getMode() {
+    return this.mode;
+  }
+  drawHoverHighlight(rect) {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.strokeStyle = "rgba(66, 133, 244, 0.8)";
+    this.ctx.lineWidth = 2;
+    this.ctx.setLineDash([4, 4]);
+    this.ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    this.ctx.fillStyle = "rgba(66, 133, 244, 0.1)";
+    this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+  }
+  drawSelectHighlight(rect) {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.strokeStyle = "rgba(255, 140, 0, 0.9)";
+    this.ctx.lineWidth = 2;
+    this.ctx.setLineDash([]);
+    this.ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    this.ctx.fillStyle = "rgba(255, 140, 0, 0.1)";
+    this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+  }
+  drawBoxAnnotation(rect, memo) {
+    this.ctx.strokeStyle = "rgba(220, 50, 50, 0.9)";
+    this.ctx.lineWidth = 2;
+    this.ctx.setLineDash([]);
+    this.ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    if (memo) {
+      this.ctx.fillStyle = "rgba(220, 50, 50, 0.9)";
+      this.ctx.font = "12px sans-serif";
+      this.ctx.fillText(memo, rect.x + 4, rect.y - 4);
+    }
+  }
+  clear() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  getAnnotations() {
+    return [...this.annotations];
+  }
+  addAnnotation(ann) {
+    this.annotations.push(ann);
+  }
+  clearAnnotations() {
+    this.annotations = [];
+  }
+};
+
+// src/annotator/box-tool.ts
+var BoxTool = class {
+  startX = 0;
+  startY = 0;
+  drawing = false;
+  startDraw(x, y) {
+    this.startX = x;
+    this.startY = y;
+    this.drawing = true;
+  }
+  updateDraw(x, y) {
+    return {
+      x: Math.min(this.startX, x),
+      y: Math.min(this.startY, y),
+      width: Math.abs(x - this.startX),
+      height: Math.abs(y - this.startY)
+    };
+  }
+  endDraw(x, y) {
+    this.drawing = false;
+    return this.updateDraw(x, y);
+  }
+  isDrawing() {
+    return this.drawing;
+  }
+};
+
+// src/annotator/text-memo.ts
+var TextMemo = class {
+  input;
+  visible = false;
+  constructor(container) {
+    this.input = document.createElement("textarea");
+    this.input.className = "cc-memo-input";
+    this.input.style.cssText = "position:absolute;display:none;width:200px;height:60px;background:var(--cc-bg-input);color:var(--cc-text-primary);border:1px solid var(--cc-border);border-radius:4px;padding:4px 8px;font-size:var(--cc-font-size-sm);resize:none;";
+    container.appendChild(this.input);
+  }
+  show(x, y) {
+    this.input.style.display = "block";
+    this.input.style.left = x + "px";
+    this.input.style.top = y + "px";
+    this.visible = true;
+    this.input.focus();
+  }
+  hide() {
+    this.input.style.display = "none";
+    this.visible = false;
+    this.input.value = "";
+  }
+  getValue() {
+    return this.input.value;
+  }
+  isVisible() {
+    return this.visible;
+  }
+};
+
+// src/panels/canvas-overlay.ts
+var CanvasOverlayPanel = class {
+  overlay;
+  boxTool;
+  mode = "off";
+  onSourceSelect;
+  onAnnotationsReady;
+  constructor() {
+    this.overlay = new CanvasOverlay();
+    this.boxTool = new BoxTool();
+  }
+  mount() {
+    this.overlay.mount();
+  }
+  unmount() {
+    this.overlay.unmount();
+  }
+  setMode(mode) {
+    this.mode = mode;
+    this.overlay.setMode(mode);
+  }
+  getMode() {
+    return this.mode;
+  }
+  onSelect(cb) {
+    this.onSourceSelect = cb;
+  }
+  onSend(cb) {
+    this.onAnnotationsReady = cb;
+  }
+  handleElementHover(el) {
+    const fiber = FiberWalker.getFiberFromElement(el);
+    if (!fiber) return;
+    const rect = el.getBoundingClientRect();
+    this.overlay.drawHoverHighlight(rect);
+  }
+  handleElementSelect(el) {
+    const fiber = FiberWalker.getFiberFromElement(el);
+    if (!fiber) return;
+    const source = FiberWalker.getSourceInfo(fiber);
+    if (!source) return;
+    source.library = SourceMapper.detectLibrary(source);
+    const rect = el.getBoundingClientRect();
+    this.overlay.drawSelectHighlight(rect);
+    const annotation = {
+      id: `ann-${Date.now()}`,
+      type: "element-select",
+      rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      source,
+      memo: "",
+      createdAt: Date.now()
+    };
+    this.overlay.addAnnotation(annotation);
+    this.onSourceSelect?.(source);
+  }
+  collectAnnotationSet() {
+    return {
+      annotations: this.overlay.getAnnotations(),
+      viewport: { width: window.innerWidth, height: window.innerHeight }
+    };
+  }
+  send() {
+    const set = this.collectAnnotationSet();
+    this.onAnnotationsReady?.(set);
+  }
+  clearAnnotations() {
+    this.overlay.clearAnnotations();
+    this.overlay.clear();
+  }
+};
+
+// src/panels/toolbar.ts
+var TOOLS = [
+  { mode: "select", label: "S", title: "Select element" },
+  { mode: "box", label: "B", title: "Draw box annotation" },
+  { mode: "memo", label: "M", title: "Add memo" },
+  { mode: "capture", label: "C", title: "Capture screenshot" }
+];
+var TOOLBAR_STYLES = `
+.cc-toolbar {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--cc-bg-panel, rgba(30,30,30,0.95));
+  border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
+  border-radius: 8px;
+  padding: 6px 8px;
+  z-index: 100002;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+}
+.cc-tool-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--cc-text-secondary, rgba(255,255,255,0.6));
+  cursor: pointer;
+  font-size: 11px;
+  font-family: var(--cc-font-family, sans-serif);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.cc-tool-btn:hover {
+  background: var(--cc-bg-hover, rgba(255,255,255,0.1));
+  color: var(--cc-text-primary, #e0e0e0);
+}
+.cc-tool-btn.active {
+  background: var(--cc-accent, #7c4dff);
+  color: #fff;
+}
+.cc-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--cc-border, rgba(255,255,255,0.15));
+  margin: 0 2px;
+}
+.cc-send-btn {
+  padding: 0 12px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  background: var(--cc-accent, #7c4dff);
+  color: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--cc-font-family, sans-serif);
+  white-space: nowrap;
+  transition: background 0.1s ease;
+}
+.cc-send-btn:hover {
+  background: var(--cc-border-focus, rgba(124,77,255,0.8));
+}
+`;
+var ToolbarPanel = class {
+  container;
+  currentTool = "select";
+  onModeChange;
+  onSend;
+  buttons = /* @__PURE__ */ new Map();
+  mounted = false;
+  constructor(shadowRoot) {
+    const style = document.createElement("style");
+    style.textContent = TOOLBAR_STYLES;
+    shadowRoot.appendChild(style);
+    this.container = document.createElement("div");
+    this.container.className = "cc-toolbar";
+    this.container.style.display = "none";
+    TOOLS.forEach(({ mode, label, title }) => {
+      const btn = document.createElement("button");
+      btn.className = "cc-tool-btn";
+      btn.textContent = label;
+      btn.title = title;
+      btn.setAttribute("data-mode", mode);
+      btn.addEventListener("click", () => {
+        this.setActiveTool(mode);
+        this.onModeChange?.(mode);
+      });
+      this.buttons.set(mode, btn);
+      this.container.appendChild(btn);
+    });
+    const divider = document.createElement("div");
+    divider.className = "cc-toolbar-divider";
+    this.container.appendChild(divider);
+    const sendBtn = document.createElement("button");
+    sendBtn.className = "cc-send-btn";
+    sendBtn.textContent = "Send";
+    sendBtn.addEventListener("click", () => this.onSend?.());
+    this.container.appendChild(sendBtn);
+    shadowRoot.appendChild(this.container);
+  }
+  mount() {
+    this.container.style.display = "flex";
+    this.mounted = true;
+  }
+  unmount() {
+    this.container.style.display = "none";
+    this.mounted = false;
+  }
+  setActiveTool(mode) {
+    this.currentTool = mode;
+    this.buttons.forEach((btn, btnMode) => {
+      btn.classList.toggle("active", btnMode === mode);
+    });
+  }
+  getActiveTool() {
+    return this.currentTool;
+  }
+  onToolChange(cb) {
+    this.onModeChange = cb;
+  }
+  onSendClick(cb) {
+    this.onSend = cb;
+  }
+  isMounted() {
+    return this.mounted;
+  }
+};
+
+// src/panels/inspector-popup.ts
+var POPUP_STYLES = `
+.cc-inspector-popup {
+  position: fixed;
+  background: var(--cc-bg-panel, rgba(30,30,30,0.97));
+  border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-family: var(--cc-font-family, monospace);
+  font-size: var(--cc-font-size-xs, 11px);
+  color: var(--cc-text-primary, #e0e0e0);
+  z-index: 100003;
+  pointer-events: none;
+  max-width: 320px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  display: none;
+}
+.cc-inspector-popup.pinned {
+  pointer-events: auto;
+}
+.cc-popup-component {
+  font-weight: bold;
+  color: var(--cc-accent, #7c4dff);
+  margin-bottom: 2px;
+}
+.cc-popup-file {
+  color: var(--cc-text-secondary, rgba(255,255,255,0.6));
+  word-break: break-all;
+}
+.cc-popup-library {
+  margin-top: 4px;
+  padding: 2px 6px;
+  background: var(--cc-bg-hover, rgba(255,255,255,0.08));
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 10px;
+}
+`;
+var InspectorPopupPanel = class {
+  element;
+  sourceMapper;
+  pinned = false;
+  constructor(shadowRoot) {
+    this.sourceMapper = new SourceMapper();
+    const style = document.createElement("style");
+    style.textContent = POPUP_STYLES;
+    shadowRoot.appendChild(style);
+    this.element = document.createElement("div");
+    this.element.className = "cc-inspector-popup";
+    this.element.style.display = "none";
+    shadowRoot.appendChild(this.element);
+  }
+  show(source, rect) {
+    const library = this.sourceMapper.detectLibrary(source);
+    const path = this.sourceMapper.formatSourcePath(source.file, source.line, source.column);
+    this.element.innerHTML = "";
+    const compLine = document.createElement("div");
+    compLine.className = "cc-popup-component";
+    compLine.textContent = `<${source.componentName}>`;
+    this.element.appendChild(compLine);
+    const fileLine = document.createElement("div");
+    fileLine.className = "cc-popup-file";
+    fileLine.textContent = path;
+    this.element.appendChild(fileLine);
+    if (library !== "unknown") {
+      const libLine = document.createElement("span");
+      libLine.className = "cc-popup-library";
+      libLine.textContent = library;
+      this.element.appendChild(libLine);
+    }
+    const popupHeight = 80;
+    const top = Math.max(4, rect.top - popupHeight - 8);
+    const left = Math.min(rect.left, window.innerWidth - 330);
+    this.element.style.top = top + "px";
+    this.element.style.left = left + "px";
+    this.element.style.display = "block";
+  }
+  hide() {
+    if (this.pinned) return;
+    this.element.style.display = "none";
+  }
+  forceHide() {
+    this.pinned = false;
+    this.element.style.display = "none";
+  }
+  pin() {
+    this.pinned = true;
+    this.element.classList.add("pinned");
+  }
+  unpin() {
+    this.pinned = false;
+    this.element.classList.remove("pinned");
+  }
+  isPinned() {
+    return this.pinned;
+  }
+  isVisible() {
+    return this.element.style.display !== "none";
+  }
+};
+export {
+  BoxTool,
+  CanvasOverlay,
+  CanvasOverlayPanel,
+  ChatPanel,
+  FabButton,
+  FiberWalker,
+  InspectorPopupPanel,
+  KeyboardHandler,
+  QAResultPanel,
+  SessionBarPanel,
+  ShadowContainer,
+  SourceMapper,
+  TextMemo,
+  Toast,
+  ToolbarPanel
+};
+//# sourceMappingURL=index.js.map