grab 0.1.1 → 0.1.2

package/dist/chunk-YLRWPBUP.js

@@ -1,2896 +0,0 @@
-import { delegateEvents, styles_default, render, createComponent, createSignal, onCleanup, template, use, insert, Show, For, createRenderEffect, style, setStyleProperty, memo, setAttribute, SelectionLabel, ContextMenu, onMount, addEventListener, cn, PANEL_STYLES, className, IconSelect, getToolbarIconColor, IconComment, IconChevron } from './chunk-SS53RBM5.js';
-
-/**
- * @license MIT
- *
- * Copyright (c) 2025 Aiden Bai
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// src/components/toolbar/toolbar-content.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<button class="contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox mr-1.5">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button class="contain-layout flex items-center justify-center cursor-pointer interactive-scale outline-none mx-0.5"><div><div>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<button class="contain-layout shrink-0 flex items-center justify-center cursor-pointer interactive-scale">`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div><div><div class="flex items-center min-w-0"><div><div class="relative overflow-visible min-w-0"></div></div><div><div class="relative overflow-visible min-w-0"></div></div><div class="relative shrink-0 overflow-visible">`);
-var ToolbarContent = (props) => {
-  const edge = () => props.snapEdge ?? "bottom";
-  const collapsedEdgeClasses = () => {
-    if (!props.isCollapsed) return "";
-    const roundedClass = {
-      top: "rounded-t-none rounded-b-[10px]",
-      bottom: "rounded-b-none rounded-t-[10px]",
-      left: "rounded-l-none rounded-r-[10px]",
-      right: "rounded-r-none rounded-l-[10px]"
-    }[edge()];
-    const paddingClass = edge() === "top" || edge() === "bottom" ? "px-2 py-0.25" : "px-0.25 py-2";
-    return `${roundedClass} ${paddingClass}`;
-  };
-  const chevronRotation = () => {
-    const collapsed = props.isCollapsed;
-    switch (edge()) {
-      case "top":
-        return collapsed ? "rotate-180" : "rotate-0";
-      case "bottom":
-        return collapsed ? "rotate-0" : "rotate-180";
-      case "left":
-        return collapsed ? "rotate-90" : "-rotate-90";
-      case "right":
-        return collapsed ? "-rotate-90" : "rotate-90";
-      default:
-        return "rotate-0";
-    }
-  };
-  const defaultSelectButton = () => (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, createComponent(IconSelect, {
-      size: 14,
-      get ["class"]() {
-        return cn("transition-colors", getToolbarIconColor(Boolean(props.isActive) && !props.isCommentMode, Boolean(props.isCommentMode)));
-      }
-    }));
-    return _el$;
-  })();
-  const defaultCommentButton = () => (() => {
-    var _el$2 = _tmpl$();
-    insert(_el$2, createComponent(IconComment, {
-      size: 14,
-      get ["class"]() {
-        return cn("transition-colors", getToolbarIconColor(Boolean(props.isCommentMode), Boolean(props.isActive) && !props.isCommentMode));
-      }
-    }));
-    return _el$2;
-  })();
-  const defaultToggleButton = () => (() => {
-    var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
-    createRenderEffect((_p$) => {
-      var _v$ = cn("relative w-5 h-3 rounded-full transition-colors", props.enabled ? "bg-black" : "bg-black/25"), _v$2 = cn("absolute top-0.5 w-2 h-2 rounded-full bg-white transition-transform", props.enabled ? "left-2.5" : "left-0.5");
-      _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$3;
-  })();
-  const defaultCollapseButton = () => (() => {
-    var _el$6 = _tmpl$3();
-    insert(_el$6, createComponent(IconChevron, {
-      get ["class"]() {
-        return cn("text-[#B3B3B3] transition-transform duration-150", chevronRotation());
-      }
-    }));
-    return _el$6;
-  })();
-  return (() => {
-    var _el$7 = _tmpl$4(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling;
-    addEventListener(_el$7, "click", props.onPanelClick, true);
-    addEventListener(_el$7, "animationend", props.onAnimationEnd);
-    insert(_el$1, () => props.selectButton ?? defaultSelectButton());
-    insert(_el$11, () => props.commentButton ?? defaultCommentButton());
-    insert(_el$12, () => props.toggleButton ?? defaultToggleButton());
-    insert(_el$7, () => props.collapseButton ?? defaultCollapseButton(), null);
-    insert(_el$7, () => props.shakeTooltip, null);
-    createRenderEffect((_p$) => {
-      var _v$3 = cn("flex items-center justify-center rounded-[10px] antialiased transition-all duration-150 ease-out relative overflow-visible [font-synthesis:none] filter-[drop-shadow(0px_1px_2px_#51515140)] [corner-shape:superellipse(1.25)]", PANEL_STYLES, !props.isCollapsed && "py-1.5 gap-1.5 px-2", collapsedEdgeClasses(), props.isShaking && "animate-shake"), _v$4 = props.transformOrigin, _v$5 = cn("grid transition-all duration-150 ease-out", props.isCollapsed ? "grid-cols-[0fr] opacity-0" : "grid-cols-[1fr] opacity-100"), _v$6 = cn("grid transition-all duration-150 ease-out", props.enabled ? "grid-cols-[1fr] opacity-100" : "grid-cols-[0fr] opacity-0"), _v$7 = cn("grid transition-all duration-150 ease-out", props.enabled ? "grid-cols-[1fr] opacity-100" : "grid-cols-[0fr] opacity-0");
-      _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
-      _v$4 !== _p$.t && setStyleProperty(_el$7, "transform-origin", _p$.t = _v$4);
-      _v$5 !== _p$.a && className(_el$8, _p$.a = _v$5);
-      _v$6 !== _p$.o && className(_el$0, _p$.o = _v$6);
-      _v$7 !== _p$.i && className(_el$10, _p$.i = _v$7);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    });
-    return _el$7;
-  })();
-};
-delegateEvents(["click"]);
-
-// src/design-system.tsx
-var _tmpl$5 = /* @__PURE__ */ template(`<span style=font-size:10px;font-weight:500>/`);
-var _tmpl$22 = /* @__PURE__ */ template(`<div style=display:flex;align-items:center;gap:8px;margin-top:8px><button style="display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background-color:transparent;border-radius:4px;font-size:10px;cursor:pointer;flex-shrink:0;transition:all 0.15s ease"></button><input type=range min=0 style=flex:1;height:4px;cursor:pointer>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div><div><div style=display:flex;flex-direction:column;gap:2px;flex:1;min-width:0><div style=display:flex;align-items:center;gap:6px><span style=font-size:13px;font-weight:500;line-height:1.3></span></div><span style=font-size:11px;line-height:1.3></span></div><div style=display:flex;align-items:center;gap:4px;flex-shrink:0><button style="display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background-color:transparent;border-radius:4px;font-size:12px;cursor:pointer;transition:all 0.15s ease"></button><button title="Refresh this card"style="display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background-color:transparent;border-radius:4px;font-size:12px;cursor:pointer;transition:all 0.15s ease">\u21BB</button></div></div><div>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<div style="position:fixed;bottom:16px;right:16px;padding:6px 10px;border-radius:6px;font-family:ui-monospace, SFMono-Regular, monospace;font-size:12px;z-index:9999;backdrop-filter:blur(8px)"> FPS`);
-var _tmpl$6 = /* @__PURE__ */ template(`<div style="padding:16px 24px"><span style="color:rgba(250, 204, 21, 0.8)">\u2605 Starred (<!>)</span><div>`);
-var _tmpl$7 = /* @__PURE__ */ template(`<div style="padding:16px 24px"><span>Flows</span><div>`);
-var _tmpl$8 = /* @__PURE__ */ template(`<div style="padding:16px 24px"><span>Selection Label</span><div>`);
-var _tmpl$9 = /* @__PURE__ */ template(`<div style="padding:16px 24px"><span>Context Menu (Right-Click)</span><div>`);
-var _tmpl$0 = /* @__PURE__ */ template(`<div style="padding:16px 24px"><span>Toolbar</span><div>`);
-var _tmpl$1 = /* @__PURE__ */ template(`<div style="padding:16px 24px"><span>Agent States</span><div>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<div style="padding:48px 24px;text-align:center"><span style=font-size:14px>No states match "<!>"`);
-var _tmpl$11 = /* @__PURE__ */ template(`<div style="display:flex;flex-direction:column;min-height:100vh;font-family:Geist, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, sans-serif;transition:background-color 0.15s ease"><div style="display:flex;justify-content:space-between;align-items:center;padding:16px 24px"><div style=display:flex;align-items:center;gap:10px><svg width=24 height=24 viewBox="0 0 294 294"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_logo)><mask id=mask0_logo maskUnits=userSpaceOnUse x=0 y=0 width=294 height=294 style=mask-type:luminance><path d="M294 0H0V294H294V0Z"fill=white></path></mask><g mask=url(#mask0_logo)><path d="M144.599 47.4924C169.712 27.3959 194.548 20.0265 212.132 30.1797C227.847 39.2555 234.881 60.3243 231.926 89.516C231.677 92.0069 231.328 94.5423 230.94 97.1058L228.526 110.14C228.517 110.136 228.505 110.132 228.495 110.127C228.486 110.165 228.479 110.203 228.468 110.24L216.255 105.741C216.256 105.736 216.248 105.728 216.248 105.723C207.915 103.125 199.421 101.075 190.82 99.5888L190.696 99.5588L173.526 97.2648L173.511 97.2631C173.492 97.236 173.467 97.2176 173.447 97.1905C163.862 96.2064 154.233 95.7166 144.599 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8624 138.391 86.939 147.193C90.8624 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245C115.749 197.245 115.758 197.246 115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.507 229.974L144.609 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.472 238.38C154.485 238.392 154.499 238.402 154.513 238.412L143.846 247.482L143.827 247.497C126.56 261.128 109.472 268.745 94.8019 268.745C88.5916 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3164 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3363 185.327 9.52301 167.51 9.52301 147.193C9.52301 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3164 60.3243 61.3496 39.2555 77.0657 30.1797C94.6494 20.0265 119.486 27.3959 144.599 47.4924ZM70.6423 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5176 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8516 207.742 83.0977 205.066 70.6423 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1787 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.9311 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.759 110.203C59.234 110.839 57.7378 111.475 56.27 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9104 147.193C67.822 135.23 63.7566 122.855 60.759 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.854 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.6291 47.6015 67.6975 64.5954 70.0424 87.9446L70.0416 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8263 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.773 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.29 38.512C183.321 38.512 169.34 44.4991 154.444 56.0153C163.93 64.9374 172.634 74.6557 180.462 85.064C193.375 86.6345 206.128 89.3102 218.584 93.0624C218.812 91.4325 219.003 89.8118 219.165 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.552 64.3097C138.104 70.2614 132.054 76.6306 126.443 83.3765C132.39 82.995 138.426 82.8046 144.552 82.8046C150.727 82.8046 156.778 83.0143 162.707 83.3765C157.08 76.6293 151.015 70.2596 144.552 64.3097Z"></path><path d="M144.598 47.4924C169.712 27.3959 194.547 20.0265 212.131 30.1797C227.847 39.2555 234.88 60.3243 231.926 89.516C231.677 92.0069 231.327 94.5423 230.941 97.1058L228.526 110.14L228.496 110.127C228.487 110.165 228.478 110.203 228.469 110.24L216.255 105.741L216.249 105.723C207.916 103.125 199.42 101.075 190.82 99.5888L190.696 99.5588L173.525 97.2648L173.511 97.263C173.492 97.236 173.468 97.2176 173.447 97.1905C163.863 96.2064 154.234 95.7166 144.598 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8622 138.391 86.939 147.193C90.8622 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245L115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.506 229.974L144.61 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.473 238.38L154.512 238.412L143.847 247.482L143.827 247.497C126.56 261.13 109.472 268.745 94.8018 268.745C88.5915 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3162 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3362 185.327 9.52298 167.51 9.52298 147.193C9.52298 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3162 60.3243 61.3496 39.2555 77.0657 30.1797C94.6493 20.0265 119.486 27.3959 144.598 47.4924ZM70.6422 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5175 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8515 207.742 83.0977 205.066 70.6422 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1786 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.931 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.7589 110.203C59.234 110.839 57.7378 111.475 56.2699 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9103 147.193C67.822 135.23 63.7566 122.855 60.7589 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.8539 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.629 47.6015 67.6975 64.5954 70.0424 87.9446L70.0415 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8262 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.772 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.291 38.512C183.321 38.512 169.34 44.4991 154.443 56.0153C163.929 64.9374 172.634 74.6557 180.462 85.064C193.374 86.6345 206.129 89.3102 218.584 93.0624C218.813 91.4325 219.003 89.8118 219.166 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.551 64.3097C138.103 70.2614 132.055 76.6306 126.443 83.3765C132.389 82.995 138.427 82.8046 144.551 82.8046C150.727 82.8046 156.779 83.0143 162.707 83.3765C157.079 76.6293 151.015 70.2596 144.551 64.3097Z"fill=#FF40E0></path></g><mask id=mask1_logo maskUnits=userSpaceOnUse x=102 y=84 width=161 height=162 style=mask-type:luminance><path d="M235.282 84.827L102.261 112.259L129.693 245.28L262.714 217.848L235.282 84.827Z"fill=white></path></mask><g mask=url(#mask1_logo)><path d="M136.863 129.916L213.258 141.224C220.669 142.322 222.495 152.179 215.967 155.856L187.592 171.843L184.135 204.227C183.339 211.678 173.564 213.901 169.624 207.526L129.021 141.831C125.503 136.14 130.245 128.936 136.863 129.916Z"fill=#FF40E0 stroke=#FF40E0 stroke-width=0.817337 stroke-linecap=round stroke-linejoin=round></path></g></g><defs><clipPath id=clip0_logo><rect width=294 height=294 fill=white></rect></clipPath></defs></svg><span style=font-size:14px;font-weight:600;letter-spacing:-0.01em>Design System</span></div><div style=display:flex;align-items:center;gap:8px;flex:1;max-width:400px><input type=text placeholder="Search states\u2026"style="flex:1;padding:6px 12px;border-radius:6px;font-size:13px;font-family:inherit;outline:none;transition:all 0.15s ease"></div><div style=display:flex;align-items:center;gap:8px><button></button><button>\u21BB Refresh</button><button>`);
-var DESIGN_SYSTEM_STATES = [
-  // ══════════════════════════════════════════════════════════════════════════
-  // SELECTION LABEL STATES
-  // ══════════════════════════════════════════════════════════════════════════
-  // === IDLE STATES ===
-  {
-    id: "idle-default",
-    label: "Idle (Default)",
-    description: 'TagBadge + "Click to Copy"',
-    component: "label",
-    props: {
-      tagName: "button",
-      componentName: "Button",
-      status: "idle",
-      hasAgent: false
-    }
-  },
-  {
-    id: "idle-with-filepath",
-    label: "Idle (With File Path)",
-    description: "Clickable tag badge with open icon",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Header",
-      status: "idle",
-      hasAgent: false,
-      filePath: "src/components/Header.tsx"
-    }
-  },
-  {
-    id: "idle-context-menu-open",
-    label: "Idle (Context Menu Open)",
-    description: "Open indicator icon visible",
-    component: "label",
-    props: {
-      tagName: "main",
-      componentName: "Main",
-      status: "idle",
-      hasAgent: false,
-      isContextMenuOpen: true,
-      filePath: "src/components/Main.tsx"
-    }
-  },
-  {
-    id: "idle-multi-element",
-    label: "Idle (Multi-Element)",
-    description: 'Shows "3 elements" instead of tag',
-    component: "label",
-    props: {
-      tagName: "div",
-      elementsCount: 3,
-      status: "idle",
-      hasAgent: false
-    }
-  },
-  {
-    id: "idle-tag-only",
-    label: "Idle (Tag Only)",
-    description: "HTML tag without component name",
-    component: "label",
-    props: {
-      tagName: "section",
-      status: "idle",
-      hasAgent: false
-    }
-  },
-  {
-    id: "idle-long-component-name",
-    label: "Idle (Long Component)",
-    description: "Very long component name truncation",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "SuperLongComponentNameThatShouldDefinitelyTruncate",
-      status: "idle",
-      hasAgent: false
-    }
-  },
-  {
-    id: "idle-long-tag-name",
-    label: "Idle (Long Tag)",
-    description: "Long custom element tag name",
-    component: "label",
-    props: {
-      tagName: "my-super-long-custom-web-component-element",
-      status: "idle",
-      hasAgent: false
-    }
-  },
-  {
-    id: "idle-long-filepath",
-    label: "Idle (Long File Path)",
-    description: "Deeply nested file path truncation",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Button",
-      status: "idle",
-      hasAgent: false,
-      filePath: "src/components/ui/forms/inputs/buttons/primary/PrimaryButton.tsx"
-    }
-  },
-  {
-    id: "idle-large-element-count",
-    label: "Idle (Large Count)",
-    description: "Many elements selected (99)",
-    component: "label",
-    props: {
-      tagName: "div",
-      elementsCount: 99,
-      status: "idle",
-      hasAgent: false
-    }
-  },
-  {
-    id: "idle-long-both",
-    label: "Idle (Long Tag + Component)",
-    description: "Both tag and component name long",
-    component: "label",
-    props: {
-      tagName: "custom-interactive-element",
-      componentName: "InteractiveCustomElementWrapper",
-      status: "idle",
-      hasAgent: false,
-      filePath: "src/wrappers/InteractiveCustomElementWrapper.tsx"
-    }
-  },
-  {
-    id: "idle-agent-not-connected",
-    label: "Idle (Agent Not Connected)",
-    description: "Agent available but not connected",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Panel",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: false
-    }
-  },
-  // === PROMPT MODE STATES ===
-  {
-    id: "prompt-empty",
-    label: "Prompt (Empty)",
-    description: "Input field ready for typing",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Card",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: ""
-    }
-  },
-  {
-    id: "prompt-with-text",
-    label: "Prompt (With Text)",
-    description: "Input field with user text",
-    component: "label",
-    props: {
-      tagName: "form",
-      componentName: "Form",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: "make the button larger"
-    }
-  },
-  {
-    id: "prompt-with-reply",
-    label: "Prompt (Reply Mode)",
-    description: 'Shows "previously:" quote above input',
-    component: "label",
-    props: {
-      tagName: "span",
-      componentName: "Text",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: "now make it blue",
-      replyToPrompt: "make the button larger"
-    }
-  },
-  {
-    id: "prompt-multiline",
-    label: "Prompt (Multi-line)",
-    description: "Long text that wraps to multiple lines",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Container",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: "make the button bigger and change the background color to a nice gradient from blue to purple"
-    }
-  },
-  {
-    id: "prompt-long-reply",
-    label: "Prompt (Long Previous)",
-    description: "Long previously: text that truncates",
-    component: "label",
-    props: {
-      tagName: "button",
-      componentName: "Submit",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: "also add rounded corners",
-      replyToPrompt: "make the button larger and add a hover effect with a nice shadow underneath it"
-    }
-  },
-  {
-    id: "pending-dismiss",
-    label: "Pending Dismiss",
-    description: '"Discard?" confirmation dialog',
-    component: "label",
-    props: {
-      tagName: "header",
-      componentName: "Header",
-      status: "idle",
-      hasAgent: true,
-      isPromptMode: true,
-      isPendingDismiss: true
-    }
-  },
-  // === COPYING STATES ===
-  {
-    id: "copying-simple",
-    label: "Copying (Simple)",
-    description: '"Grabbing..." with pulse animation',
-    component: "label",
-    props: {
-      tagName: "input",
-      componentName: "TextField",
-      status: "copying",
-      hasAgent: false,
-      statusText: "Grabbing\u2026"
-    }
-  },
-  {
-    id: "copying-with-prompt",
-    label: "Copying (With Prompt)",
-    description: "Disabled input + stop button",
-    component: "label",
-    props: {
-      tagName: "section",
-      componentName: "Section",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      inputValue: "add form validation",
-      statusText: "Thinking\u2026"
-    }
-  },
-  {
-    id: "pending-abort",
-    label: "Pending Abort",
-    description: '"Discard?" during copy operation',
-    component: "label",
-    props: {
-      tagName: "article",
-      componentName: "Article",
-      status: "copying",
-      hasAgent: true,
-      isPendingAbort: true
-    }
-  },
-  {
-    id: "copying-applying",
-    label: "Copying (Applying)",
-    description: '"Applying changes\u2026" status variant',
-    component: "label",
-    props: {
-      tagName: "form",
-      componentName: "LoginForm",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      inputValue: "add validation",
-      statusText: "Applying changes\u2026"
-    }
-  },
-  {
-    id: "copying-analyzing",
-    label: "Copying (Analyzing)",
-    description: '"Analyzing\u2026" status variant',
-    component: "label",
-    props: {
-      tagName: "table",
-      componentName: "DataTable",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      inputValue: "make columns sortable",
-      statusText: "Analyzing\u2026"
-    }
-  },
-  {
-    id: "copying-long-input",
-    label: "Copying (Long Input)",
-    description: "Long prompt during copying",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Modal",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      inputValue: "add a close button in the top right corner with an X icon and make it dismiss the modal when clicked",
-      statusText: "Thinking\u2026"
-    }
-  },
-  {
-    id: "copying-long-component",
-    label: "Copying (Long Component)",
-    description: "Long component name while copying",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "InteractiveDataVisualizationChart",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      inputValue: "add tooltips",
-      statusText: "Applying\u2026"
-    }
-  },
-  // === COMPLETION STATES ===
-  {
-    id: "copied-simple",
-    label: "Copied (Simple)",
-    description: 'Checkmark + "Copied" text only',
-    component: "label",
-    props: {
-      tagName: "nav",
-      componentName: "Navigation",
-      status: "copied",
-      hasAgent: false,
-      hasOnDismiss: false,
-      hasOnUndo: false
-    }
-  },
-  {
-    id: "copied-with-actions",
-    label: "Copied (With Actions)",
-    description: "Undo + Keep buttons",
-    component: "label",
-    props: {
-      tagName: "footer",
-      componentName: "Footer",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Applied changes",
-      supportsUndo: true
-    }
-  },
-  {
-    id: "copied-with-followup",
-    label: "Copied (With Follow-up)",
-    description: "Follow-up input field below",
-    component: "label",
-    props: {
-      tagName: "aside",
-      componentName: "Sidebar",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Done",
-      supportsUndo: true,
-      supportsFollowUp: true
-    }
-  },
-  {
-    id: "copied-no-dismiss",
-    label: "Copied (No Dismiss)",
-    description: "Checkmark + status only, no Keep button",
-    component: "label",
-    props: {
-      tagName: "span",
-      componentName: "Badge",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Applied",
-      hasOnDismiss: false
-    }
-  },
-  {
-    id: "copied-no-undo",
-    label: "Copied (No Undo)",
-    description: "Keep button but no Undo",
-    component: "label",
-    props: {
-      tagName: "li",
-      componentName: "ListItem",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Changes saved",
-      supportsUndo: false
-    }
-  },
-  {
-    id: "copied-with-more-options",
-    label: "Copied (More Options)",
-    description: "Ellipsis button for context menu",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Widget",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Updated",
-      supportsUndo: true,
-      showMoreOptions: true
-    }
-  },
-  {
-    id: "copied-custom-dismiss",
-    label: "Copied (Custom Dismiss)",
-    description: '"Accept" instead of "Keep"',
-    component: "label",
-    props: {
-      tagName: "section",
-      componentName: "Hero",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Ready",
-      supportsUndo: true,
-      dismissButtonText: "Accept"
-    }
-  },
-  {
-    id: "copied-followup-placeholder",
-    label: "Copied (Follow-up Placeholder)",
-    description: "Previous prompt as placeholder",
-    component: "label",
-    props: {
-      tagName: "header",
-      componentName: "TopBar",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Done",
-      supportsUndo: true,
-      supportsFollowUp: true,
-      previousPrompt: "make it bigger"
-    }
-  },
-  // === AGENT EDGE CASES ===
-  {
-    id: "agent-long-component",
-    label: "Agent (Long Component)",
-    description: "Long component name with prompt",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "VeryLongComponentNameThatShouldTruncateInTheUI",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: ""
-    }
-  },
-  {
-    id: "agent-long-status",
-    label: "Agent (Long Status)",
-    description: "Very long status text during operation",
-    component: "label",
-    props: {
-      tagName: "form",
-      componentName: "SearchForm",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      inputValue: "add validation",
-      statusText: "Analyzing component structure and dependencies\u2026"
-    }
-  },
-  {
-    id: "agent-long-previous",
-    label: "Agent (Long Previous Prompt)",
-    description: "Very long previous prompt truncation",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Card",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: "and also fix the spacing",
-      replyToPrompt: "make the card have rounded corners with a subtle shadow and increase the padding on all sides to make it feel more spacious"
-    }
-  },
-  {
-    id: "agent-copied-long-status",
-    label: "Agent Copied (Long Status)",
-    description: "Long completion status message",
-    component: "label",
-    props: {
-      tagName: "section",
-      componentName: "HeroSection",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Successfully applied 5 changes across 3 files",
-      supportsUndo: true,
-      supportsFollowUp: true
-    }
-  },
-  {
-    id: "agent-copied-long-placeholder",
-    label: "Agent Copied (Long Placeholder)",
-    description: "Long previous prompt as placeholder",
-    component: "label",
-    props: {
-      tagName: "nav",
-      componentName: "Navbar",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Done",
-      supportsUndo: true,
-      supportsFollowUp: true,
-      previousPrompt: "make the navbar sticky with a blur background effect and add smooth scroll behavior"
-    }
-  },
-  {
-    id: "agent-all-features",
-    label: "Agent (All Features)",
-    description: "Undo + Follow-up + More options",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Dashboard",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Applied changes",
-      supportsUndo: true,
-      supportsFollowUp: true,
-      showMoreOptions: true,
-      previousPrompt: "add dark mode"
-    }
-  },
-  {
-    id: "agent-single-char-component",
-    label: "Agent (Single Char)",
-    description: "Single character component name",
-    component: "label",
-    props: {
-      tagName: "i",
-      componentName: "I",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: ""
-    }
-  },
-  {
-    id: "agent-numeric-component",
-    label: "Agent (Numeric Name)",
-    description: "Component name with numbers",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Card2024V2",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: "update the styles"
-    }
-  },
-  // === ERROR STATES ===
-  {
-    id: "error",
-    label: "Error",
-    description: "Error message with Retry + Ok",
-    component: "label",
-    props: {
-      tagName: "dialog",
-      componentName: "Modal",
-      status: "error",
-      error: "Failed to copy element"
-    }
-  },
-  {
-    id: "error-retry-only",
-    label: "Error (Retry Only)",
-    description: "Retry button, no Ok",
-    component: "label",
-    props: {
-      tagName: "form",
-      componentName: "Search",
-      status: "error",
-      error: "Connection timeout",
-      hasOnRetry: true,
-      hasOnAcknowledge: false
-    }
-  },
-  {
-    id: "error-ok-only",
-    label: "Error (Ok Only)",
-    description: "Ok button, no Retry",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Alert",
-      status: "error",
-      error: "Operation cancelled",
-      hasOnRetry: false,
-      hasOnAcknowledge: true
-    }
-  },
-  {
-    id: "error-long-message",
-    label: "Error (Long Message)",
-    description: "Truncated error > 50 chars",
-    component: "label",
-    props: {
-      tagName: "section",
-      componentName: "Dashboard",
-      status: "error",
-      error: "The server returned an unexpected error response. Please check your network connection and try again later."
-    }
-  },
-  {
-    id: "error-long-component",
-    label: "Error (Long Component)",
-    description: "Error with long component name",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "VeryLongComponentNameThatMightOverflow",
-      status: "error",
-      error: "Component not found"
-    }
-  },
-  {
-    id: "error-no-buttons",
-    label: "Error (No Buttons)",
-    description: "Error with no action buttons",
-    component: "label",
-    props: {
-      tagName: "span",
-      componentName: "Text",
-      status: "error",
-      error: "Unknown error occurred",
-      hasOnRetry: false,
-      hasOnAcknowledge: false
-    }
-  },
-  // ══════════════════════════════════════════════════════════════════════════
-  // CONTEXT MENU STATES (Right-Click Menu)
-  // ══════════════════════════════════════════════════════════════════════════
-  {
-    id: "context-menu-basic",
-    label: "Context Menu (Basic)",
-    description: "Copy, Copy HTML options",
-    component: "context-menu",
-    props: {
-      tagName: "button",
-      componentName: "Button",
-      hasFilePath: false
-    }
-  },
-  {
-    id: "context-menu-with-open",
-    label: "Context Menu (With Open)",
-    description: "Includes Open option with file path",
-    component: "context-menu",
-    props: {
-      tagName: "div",
-      componentName: "Header",
-      hasFilePath: true,
-      filePath: "src/components/Header.tsx"
-    }
-  },
-  {
-    id: "context-menu-tag-only",
-    label: "Context Menu (Tag Only)",
-    description: "HTML tag without component name",
-    component: "context-menu",
-    props: {
-      tagName: "section",
-      hasFilePath: false
-    }
-  },
-  {
-    id: "context-menu-long-component",
-    label: "Context Menu (Long Name)",
-    description: "Long component name in header",
-    component: "context-menu",
-    props: {
-      tagName: "div",
-      componentName: "SuperLongComponentNameThatNeedsTruncation",
-      hasFilePath: true,
-      filePath: "src/components/SuperLongComponentNameThatNeedsTruncation.tsx"
-    }
-  },
-  {
-    id: "context-menu-long-tag",
-    label: "Context Menu (Long Tag)",
-    description: "Long custom element tag",
-    component: "context-menu",
-    props: {
-      tagName: "my-custom-interactive-web-component",
-      hasFilePath: false
-    }
-  },
-  // ══════════════════════════════════════════════════════════════════════════
-  // TOOLBAR STATES
-  // ══════════════════════════════════════════════════════════════════════════
-  {
-    id: "toolbar-default",
-    label: "Toolbar (Default)",
-    description: "Inactive, enabled state",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: true
-    }
-  },
-  {
-    id: "toolbar-active",
-    label: "Toolbar (Active)",
-    description: "Selection mode active",
-    component: "toolbar",
-    props: {
-      isToolbarActive: true,
-      isToolbarEnabled: true
-    }
-  },
-  {
-    id: "toolbar-disabled",
-    label: "Toolbar (Disabled)",
-    description: "Toggle switch off",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: false
-    }
-  },
-  {
-    id: "toolbar-active-disabled",
-    label: "Toolbar (Active + Disabled)",
-    description: "Active but toggle off",
-    component: "toolbar",
-    props: {
-      isToolbarActive: true,
-      isToolbarEnabled: false
-    }
-  },
-  {
-    id: "toolbar-comment-mode",
-    label: "Toolbar (Comment Mode)",
-    description: "Comment selection mode active",
-    component: "toolbar",
-    props: {
-      isToolbarActive: true,
-      isToolbarCommentMode: true,
-      isToolbarEnabled: true
-    }
-  },
-  {
-    id: "toolbar-collapsed-bottom",
-    label: "Toolbar (Collapsed Bottom)",
-    description: "Minimized, snapped to bottom edge",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: true,
-      isToolbarCollapsed: true,
-      toolbarSnapEdge: "bottom"
-    }
-  },
-  {
-    id: "toolbar-collapsed-top",
-    label: "Toolbar (Collapsed Top)",
-    description: "Minimized, snapped to top edge",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: true,
-      isToolbarCollapsed: true,
-      toolbarSnapEdge: "top"
-    }
-  },
-  {
-    id: "toolbar-collapsed-left",
-    label: "Toolbar (Collapsed Left)",
-    description: "Minimized, snapped to left edge",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: true,
-      isToolbarCollapsed: true,
-      toolbarSnapEdge: "left"
-    }
-  },
-  {
-    id: "toolbar-collapsed-right",
-    label: "Toolbar (Collapsed Right)",
-    description: "Minimized, snapped to right edge",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: true,
-      isToolbarCollapsed: true,
-      toolbarSnapEdge: "right"
-    }
-  },
-  // ══════════════════════════════════════════════════════════════════════════
-  // ANIMATION SEQUENCES
-  // ══════════════════════════════════════════════════════════════════════════
-  {
-    id: "anim-copy-flow",
-    label: "Copy Flow",
-    description: "idle \u2192 copying \u2192 \u2713 copied",
-    component: "label",
-    props: {
-      tagName: "button",
-      componentName: "Button",
-      status: "idle",
-      hasAgent: false
-    },
-    animationSequence: [{
-      props: {
-        tagName: "button",
-        componentName: "Button",
-        status: "idle",
-        hasAgent: false
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "button",
-        componentName: "Button",
-        status: "copying",
-        hasAgent: false,
-        statusText: "Grabbing\u2026"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "button",
-        componentName: "Button",
-        status: "copied",
-        hasAgent: false,
-        hasOnDismiss: false,
-        hasOnUndo: false,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-agent-flow",
-    label: "Agent Flow",
-    description: "prompt \u2192 thinking \u2192 done",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Card",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: ""
-    },
-    animationSequence: [{
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: ""
-      },
-      durationMs: 1e3
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "make it"
-      },
-      durationMs: 400
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "make it bigger"
-      },
-      durationMs: 800
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        inputValue: "make it bigger",
-        statusText: "Thinking\u2026"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        inputValue: "make it bigger",
-        statusText: "Applying changes\u2026"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "copied",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Applied changes",
-        supportsUndo: true,
-        supportsFollowUp: true,
-        showMoreOptions: true
-      },
-      durationMs: 2500
-    }]
-  },
-  {
-    id: "anim-error-flow",
-    label: "Error Flow",
-    description: "idle \u2192 copying \u2192 error",
-    component: "label",
-    props: {
-      tagName: "form",
-      componentName: "Form",
-      status: "idle",
-      hasAgent: false
-    },
-    animationSequence: [{
-      props: {
-        tagName: "form",
-        componentName: "Form",
-        status: "idle",
-        hasAgent: false
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "form",
-        componentName: "Form",
-        status: "copying",
-        hasAgent: false,
-        statusText: "Grabbing\u2026"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "form",
-        componentName: "Form",
-        status: "error",
-        error: "Failed to copy element",
-        hasOnRetry: true,
-        hasOnAcknowledge: true
-      },
-      durationMs: 2500
-    }]
-  },
-  {
-    id: "anim-discard-flow",
-    label: "Discard Prompt",
-    description: "prompt \u2192 pending dismiss \u2192 cancelled",
-    component: "label",
-    props: {
-      tagName: "header",
-      componentName: "Header",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: "change color"
-    },
-    animationSequence: [{
-      props: {
-        tagName: "header",
-        componentName: "Header",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "change color"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "header",
-        componentName: "Header",
-        status: "idle",
-        hasAgent: true,
-        isPromptMode: true,
-        isPendingDismiss: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "header",
-        componentName: "Header",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "change color"
-      },
-      durationMs: 1500
-    }]
-  },
-  {
-    id: "anim-abort-flow",
-    label: "Abort Operation",
-    description: "copying \u2192 pending abort \u2192 idle",
-    component: "label",
-    props: {
-      tagName: "section",
-      componentName: "Section",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      inputValue: "add animation",
-      statusText: "Thinking\u2026"
-    },
-    animationSequence: [{
-      props: {
-        tagName: "section",
-        componentName: "Section",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        inputValue: "add animation",
-        statusText: "Thinking\u2026"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "section",
-        componentName: "Section",
-        status: "copying",
-        hasAgent: true,
-        isPendingAbort: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "section",
-        componentName: "Section",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: ""
-      },
-      durationMs: 1500
-    }]
-  },
-  {
-    id: "anim-toolbar-toggle",
-    label: "Toolbar Toggle",
-    description: "inactive \u2192 active \u2192 inactive",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: true
-    },
-    animationSequence: [{
-      props: {
-        isToolbarActive: false,
-        isToolbarEnabled: true
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        isToolbarActive: true,
-        isToolbarEnabled: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        isToolbarActive: false,
-        isToolbarEnabled: true
-      },
-      durationMs: 1500
-    }]
-  },
-  {
-    id: "anim-toolbar-enable",
-    label: "Toolbar Enable",
-    description: "disabled \u2192 enabled \u2192 disabled",
-    component: "toolbar",
-    props: {
-      isToolbarActive: false,
-      isToolbarEnabled: false
-    },
-    animationSequence: [{
-      props: {
-        isToolbarActive: false,
-        isToolbarEnabled: false
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        isToolbarActive: false,
-        isToolbarEnabled: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        isToolbarActive: false,
-        isToolbarEnabled: false
-      },
-      durationMs: 1500
-    }]
-  },
-  {
-    id: "anim-followup-flow",
-    label: "Follow-up",
-    description: "copied \u2192 follow-up \u2192 new result",
-    component: "label",
-    props: {
-      tagName: "nav",
-      componentName: "Navbar",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Done",
-      supportsUndo: true,
-      supportsFollowUp: true,
-      showMoreOptions: true
-    },
-    animationSequence: [{
-      props: {
-        tagName: "nav",
-        componentName: "Navbar",
-        status: "copied",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Done",
-        supportsUndo: true,
-        supportsFollowUp: true,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "nav",
-        componentName: "Navbar",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        inputValue: "also make it sticky",
-        statusText: "Thinking\u2026"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "nav",
-        componentName: "Navbar",
-        status: "copied",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Applied 2 changes",
-        supportsUndo: true,
-        supportsFollowUp: true,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-undo-flow",
-    label: "Undo Flow",
-    description: "copied \u2192 undo \u2192 idle",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Modal",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Applied changes",
-      supportsUndo: true,
-      showMoreOptions: true
-    },
-    animationSequence: [{
-      props: {
-        tagName: "div",
-        componentName: "Modal",
-        status: "copied",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Applied changes",
-        supportsUndo: true,
-        supportsFollowUp: true,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Modal",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: ""
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-retry-flow",
-    label: "Retry After Error",
-    description: "error \u2192 retry \u2192 \u2713 copied",
-    component: "label",
-    props: {
-      tagName: "table",
-      componentName: "DataTable",
-      status: "error",
-      error: "Connection timeout",
-      hasOnRetry: true,
-      hasOnAcknowledge: true
-    },
-    animationSequence: [{
-      props: {
-        tagName: "table",
-        componentName: "DataTable",
-        status: "error",
-        error: "Connection timeout",
-        hasOnRetry: true,
-        hasOnAcknowledge: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "table",
-        componentName: "DataTable",
-        status: "copying",
-        statusText: "Retrying\u2026"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "table",
-        componentName: "DataTable",
-        status: "copied",
-        hasOnDismiss: false,
-        hasOnUndo: false,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-agent-error-flow",
-    label: "Agent Error",
-    description: "prompt \u2192 thinking \u2192 error",
-    component: "label",
-    props: {
-      tagName: "aside",
-      componentName: "Sidebar",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: true,
-      isPromptMode: true,
-      inputValue: ""
-    },
-    animationSequence: [{
-      props: {
-        tagName: "aside",
-        componentName: "Sidebar",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: ""
-      },
-      durationMs: 1e3
-    }, {
-      props: {
-        tagName: "aside",
-        componentName: "Sidebar",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "make it collapsible"
-      },
-      durationMs: 800
-    }, {
-      props: {
-        tagName: "aside",
-        componentName: "Sidebar",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Thinking\u2026"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "aside",
-        componentName: "Sidebar",
-        status: "error",
-        hasAgent: true,
-        error: "Agent failed to respond",
-        hasOnRetry: true,
-        hasOnAcknowledge: true
-      },
-      durationMs: 2500
-    }]
-  },
-  {
-    id: "anim-acknowledge-error",
-    label: "Acknowledge Error",
-    description: "error \u2192 ok \u2192 dismissed",
-    component: "label",
-    props: {
-      tagName: "ul",
-      componentName: "List",
-      status: "error",
-      error: "Element not found",
-      hasOnRetry: true,
-      hasOnAcknowledge: true
-    },
-    animationSequence: [{
-      props: {
-        tagName: "ul",
-        componentName: "List",
-        status: "error",
-        error: "Element not found",
-        hasOnRetry: true,
-        hasOnAcknowledge: true
-      },
-      durationMs: 2500
-    }, {
-      props: {
-        tagName: "ul",
-        componentName: "List",
-        status: "idle"
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-connect-agent",
-    label: "Agent Connect",
-    description: "disconnected \u2192 connected \u2192 prompt",
-    component: "label",
-    props: {
-      tagName: "footer",
-      componentName: "Footer",
-      status: "idle",
-      hasAgent: true,
-      isAgentConnected: false
-    },
-    animationSequence: [{
-      props: {
-        tagName: "footer",
-        componentName: "Footer",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: false
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "footer",
-        componentName: "Footer",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: ""
-      },
-      durationMs: 2500
-    }]
-  },
-  {
-    id: "anim-context-menu-flow",
-    label: "Context Menu",
-    description: "context menu options",
-    component: "context-menu",
-    props: {
-      tagName: "article",
-      componentName: "BlogPost",
-      hasFilePath: false
-    },
-    animationSequence: [{
-      props: {
-        tagName: "article",
-        componentName: "BlogPost",
-        hasFilePath: false
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "article",
-        componentName: "BlogPost",
-        hasFilePath: true,
-        filePath: "src/components/BlogPost.tsx"
-      },
-      durationMs: 2500
-    }, {
-      props: {
-        tagName: "article",
-        componentName: "BlogPost",
-        hasFilePath: false
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-toolbar-collapse-bottom",
-    label: "Toolbar Collapse (Bottom)",
-    description: "expanded \u2192 collapsed \u2192 expanded",
-    component: "toolbar",
-    props: {
-      isToolbarActive: true,
-      isToolbarEnabled: true,
-      isToolbarCollapsed: false,
-      toolbarSnapEdge: "bottom"
-    },
-    animationSequence: [{
-      props: {
-        isToolbarActive: true,
-        isToolbarEnabled: true,
-        isToolbarCollapsed: false,
-        toolbarSnapEdge: "bottom"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        isToolbarActive: true,
-        isToolbarEnabled: true,
-        isToolbarCollapsed: true,
-        toolbarSnapEdge: "bottom"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        isToolbarActive: true,
-        isToolbarEnabled: true,
-        isToolbarCollapsed: false,
-        toolbarSnapEdge: "bottom"
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-toolbar-collapse-right",
-    label: "Toolbar Collapse (Right)",
-    description: "expanded \u2192 collapsed \u2192 expanded",
-    component: "toolbar",
-    props: {
-      isToolbarActive: true,
-      isToolbarEnabled: true,
-      isToolbarCollapsed: false,
-      toolbarSnapEdge: "right"
-    },
-    animationSequence: [{
-      props: {
-        isToolbarActive: true,
-        isToolbarEnabled: true,
-        isToolbarCollapsed: false,
-        toolbarSnapEdge: "right"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        isToolbarActive: true,
-        isToolbarEnabled: true,
-        isToolbarCollapsed: true,
-        toolbarSnapEdge: "right"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        isToolbarActive: true,
-        isToolbarEnabled: true,
-        isToolbarCollapsed: false,
-        toolbarSnapEdge: "right"
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-copy-with-file",
-    label: "Copy with File Path",
-    description: "idle \u2192 copying \u2192 \u2713 copied",
-    component: "label",
-    props: {
-      tagName: "span",
-      componentName: "Badge",
-      status: "idle",
-      filePath: "src/components/Badge.tsx"
-    },
-    animationSequence: [{
-      props: {
-        tagName: "span",
-        componentName: "Badge",
-        status: "idle",
-        filePath: "src/components/Badge.tsx"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "span",
-        componentName: "Badge",
-        status: "copying",
-        filePath: "src/components/Badge.tsx",
-        statusText: "Grabbing\u2026"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "span",
-        componentName: "Badge",
-        status: "copied",
-        filePath: "src/components/Badge.tsx",
-        hasOnDismiss: false,
-        hasOnUndo: false,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-multiple-elements",
-    label: "Multiple Elements",
-    description: "1 \u2192 5 selected \u2192 copying \u2192 \u2713 copied",
-    component: "label",
-    props: {
-      tagName: "li",
-      componentName: "ListItem",
-      status: "idle",
-      elementsCount: 1
-    },
-    animationSequence: [{
-      props: {
-        tagName: "li",
-        componentName: "ListItem",
-        status: "idle",
-        elementsCount: 1
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "li",
-        componentName: "ListItem",
-        status: "idle",
-        elementsCount: 5
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "li",
-        componentName: "ListItem",
-        status: "copying",
-        elementsCount: 5,
-        statusText: "Grabbing 5\u2026"
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "li",
-        componentName: "ListItem",
-        status: "copied",
-        elementsCount: 5,
-        hasOnDismiss: false,
-        hasOnUndo: false,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-long-operation",
-    label: "Long Operation",
-    description: "copying with status updates",
-    component: "label",
-    props: {
-      tagName: "main",
-      componentName: "Dashboard",
-      status: "copying",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Starting\u2026"
-    },
-    animationSequence: [{
-      props: {
-        tagName: "main",
-        componentName: "Dashboard",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "redesign the layout"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "main",
-        componentName: "Dashboard",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Analyzing\u2026"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "main",
-        componentName: "Dashboard",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Generating code\u2026"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "main",
-        componentName: "Dashboard",
-        status: "copying",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Applying changes\u2026"
-      },
-      durationMs: 1500
-    }, {
-      props: {
-        tagName: "main",
-        componentName: "Dashboard",
-        status: "copied",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Done",
-        supportsUndo: true,
-        supportsFollowUp: true,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }]
-  },
-  {
-    id: "anim-reply-to-prompt",
-    label: "Reply to Prompt",
-    description: "completed \u2192 edit with previous",
-    component: "label",
-    props: {
-      tagName: "div",
-      componentName: "Card",
-      status: "copied",
-      hasAgent: true,
-      isAgentConnected: true,
-      statusText: "Done",
-      supportsFollowUp: true,
-      showMoreOptions: true
-    },
-    animationSequence: [{
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "copied",
-        hasAgent: true,
-        isAgentConnected: true,
-        statusText: "Done",
-        supportsUndo: true,
-        supportsFollowUp: true,
-        showMoreOptions: true
-      },
-      durationMs: 2e3
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "",
-        previousPrompt: "make it bigger",
-        replyToPrompt: "make it bigger"
-      },
-      durationMs: 2500
-    }, {
-      props: {
-        tagName: "div",
-        componentName: "Card",
-        status: "idle",
-        hasAgent: true,
-        isAgentConnected: true,
-        isPromptMode: true,
-        inputValue: "also add shadow",
-        previousPrompt: "make it bigger",
-        replyToPrompt: "make it bigger"
-      },
-      durationMs: 1500
-    }]
-  }
-];
-var CELL_SIZE_PX = 300;
-var TARGET_HEIGHT_PX = 48;
-var GAP_PX = 16;
-var CARD_BORDER_RADIUS_PX = 8;
-var CARD_HEADER_PADDING = "12px 14px";
-var CARD_CONTENT_PADDING_PX = 16;
-var TOGGLE_BUTTON_PADDING = "5px 10px";
-var TOGGLE_BUTTON_GAP_PX = 6;
-var TOGGLE_BUTTON_BORDER_RADIUS_PX = 6;
-var TOGGLE_BUTTON_FONT_SIZE_PX = 12;
-var SECTION_TITLE_FONT_SIZE_PX = 11;
-var SECTION_TITLE_MARGIN_BOTTOM_PX = 12;
-var TARGET_BORDER_RADIUS_PX = 6;
-var TARGET_FONT_SIZE_PX = 12;
-var TRANSITION_DURATION = "0.15s ease";
-var STORAGE_KEY_THEME = "react-grab-design-system-theme";
-var STORAGE_KEY_STARRED = "react-grab-design-system-starred";
-var generateRandomSuffix = (length) => {
-  const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return result;
-};
-var elongateProps = (props) => {
-  const elongateString = (value) => {
-    if (!value) return value;
-    return value + generateRandomSuffix(20 + Math.floor(Math.random() * 30));
-  };
-  return {
-    ...props,
-    tagName: elongateString(props.tagName),
-    componentName: elongateString(props.componentName),
-    filePath: elongateString(props.filePath),
-    statusText: elongateString(props.statusText),
-    error: elongateString(props.error),
-    inputValue: elongateString(props.inputValue),
-    replyToPrompt: elongateString(props.replyToPrompt),
-    previousPrompt: elongateString(props.previousPrompt),
-    dismissButtonText: elongateString(props.dismissButtonText)
-  };
-};
-var loadTheme = () => {
-  try {
-    const saved = localStorage.getItem(STORAGE_KEY_THEME);
-    if (saved === "light") return false;
-    return true;
-  } catch {
-    return true;
-  }
-};
-var saveTheme = (isDark) => {
-  try {
-    localStorage.setItem(STORAGE_KEY_THEME, isDark ? "dark" : "light");
-  } catch {
-  }
-};
-var loadStarred = () => {
-  try {
-    const saved = localStorage.getItem(STORAGE_KEY_STARRED);
-    if (!saved) return /* @__PURE__ */ new Set();
-    return new Set(JSON.parse(saved));
-  } catch {
-    return /* @__PURE__ */ new Set();
-  }
-};
-var saveStarred = (starred) => {
-  try {
-    localStorage.setItem(STORAGE_KEY_STARRED, JSON.stringify([...starred]));
-  } catch {
-  }
-};
-var DARK_THEME = {
-  background: "#000000",
-  cardBackground: "rgba(255, 255, 255, 0.05)",
-  cardContentBackground: "rgba(0, 0, 0, 0.6)",
-  cardBorder: "rgba(255, 255, 255, 0.1)",
-  cardShadow: "0 8px 30px rgba(0, 0, 0, 0.3)",
-  titleText: "#ffffff",
-  descriptionText: "rgba(255, 255, 255, 0.5)",
-  targetBackground: "rgba(215, 95, 203, 0.1)",
-  targetBorder: "rgba(215, 95, 203, 0.3)",
-  targetText: "rgba(215, 95, 203, 0.7)",
-  toggleBackground: "rgba(255, 255, 255, 0.05)",
-  toggleBorder: "rgba(255, 255, 255, 0.1)",
-  toggleText: "#ffffff",
-  sectionTitle: "rgba(255, 255, 255, 0.4)"
-};
-var LIGHT_THEME = {
-  background: "#f5f5f5",
-  cardBackground: "#ffffff",
-  cardContentBackground: "rgba(0, 0, 0, 0.03)",
-  cardBorder: "rgba(0, 0, 0, 0.1)",
-  cardShadow: "0 8px 30px rgba(0, 0, 0, 0.08)",
-  titleText: "#0a0a0a",
-  descriptionText: "rgba(0, 0, 0, 0.5)",
-  targetBackground: "rgba(215, 95, 203, 0.08)",
-  targetBorder: "rgba(215, 95, 203, 0.3)",
-  targetText: "rgba(215, 95, 203, 0.7)",
-  toggleBackground: "#ffffff",
-  toggleBorder: "rgba(0, 0, 0, 0.1)",
-  toggleText: "#0a0a0a",
-  sectionTitle: "rgba(0, 0, 0, 0.4)"
-};
-var createToggleButtonStyle = (theme) => ({
-  display: "flex",
-  "align-items": "center",
-  gap: `${TOGGLE_BUTTON_GAP_PX}px`,
-  padding: TOGGLE_BUTTON_PADDING,
-  "background-color": theme.toggleBackground,
-  border: `1px solid ${theme.toggleBorder}`,
-  "border-radius": `${TOGGLE_BUTTON_BORDER_RADIUS_PX}px`,
-  color: theme.toggleText,
-  "font-size": `${TOGGLE_BUTTON_FONT_SIZE_PX}px`,
-  "font-weight": "500",
-  cursor: "pointer",
-  transition: `all ${TRANSITION_DURATION}`
-});
-var createCardContainerStyle = (theme) => ({
-  display: "flex",
-  "flex-direction": "column",
-  "background-color": theme.cardBackground,
-  "border-radius": `${CARD_BORDER_RADIUS_PX}px`,
-  border: `1px solid ${theme.cardBorder}`,
-  "box-shadow": theme.cardShadow,
-  overflow: "hidden",
-  "aspect-ratio": "1",
-  transition: `all ${TRANSITION_DURATION}`
-});
-var createCardHeaderStyle = (theme) => ({
-  display: "flex",
-  "justify-content": "space-between",
-  "align-items": "flex-start",
-  padding: CARD_HEADER_PADDING,
-  "border-bottom": `1px solid ${theme.cardBorder}`
-});
-var createCardContentStyle = (theme) => ({
-  flex: "1",
-  display: "flex",
-  "flex-direction": "column",
-  "align-items": "center",
-  "justify-content": "center",
-  padding: `${CARD_CONTENT_PADDING_PX}px`,
-  position: "relative",
-  "background-color": theme.cardContentBackground
-});
-var createTargetStyle = (theme) => ({
-  width: "100%",
-  height: `${TARGET_HEIGHT_PX}px`,
-  "background-color": theme.targetBackground,
-  border: `1px solid ${theme.targetBorder}`,
-  "border-radius": `${TARGET_BORDER_RADIUS_PX}px`,
-  display: "flex",
-  "align-items": "center",
-  "justify-content": "center",
-  color: theme.targetText,
-  "font-size": `${TARGET_FONT_SIZE_PX}px`,
-  "font-family": "ui-monospace, SFMono-Regular, monospace"
-});
-var StateCard = (props) => {
-  const [isCardRefreshing, setIsCardRefreshing] = createSignal(false);
-  const [isPlaying, setIsPlaying] = createSignal(false);
-  const [frameIndex, setFrameIndex] = createSignal(0);
-  let animationTimeout;
-  const hasAnimation = () => Boolean(props.state.animationSequence?.length);
-  const frameCount = () => props.state.animationSequence?.length ?? 0;
-  const currentProps = () => {
-    let baseProps;
-    if (hasAnimation() && props.state.animationSequence) {
-      baseProps = props.state.animationSequence[frameIndex()].props;
-    } else {
-      baseProps = props.state.props;
-    }
-    return props.isScrambled ? elongateProps(baseProps) : baseProps;
-  };
-  const scheduleNextFrame = () => {
-    if (!props.state.animationSequence) return;
-    const sequence = props.state.animationSequence;
-    const currentFrame = sequence[frameIndex()];
-    animationTimeout = setTimeout(() => {
-      const nextIndex = (frameIndex() + 1) % sequence.length;
-      setFrameIndex(nextIndex);
-      if (isPlaying()) {
-        scheduleNextFrame();
-      }
-    }, currentFrame.durationMs);
-  };
-  const handleTogglePlay = (event) => {
-    event.stopPropagation();
-    if (isPlaying()) {
-      setIsPlaying(false);
-      if (animationTimeout) {
-        clearTimeout(animationTimeout);
-        animationTimeout = void 0;
-      }
-    } else {
-      setIsPlaying(true);
-      scheduleNextFrame();
-    }
-  };
-  const handleSliderChange = (event) => {
-    const target = event.target;
-    setFrameIndex(parseInt(target.value, 10));
-    if (isPlaying()) {
-      setIsPlaying(false);
-      if (animationTimeout) {
-        clearTimeout(animationTimeout);
-        animationTimeout = void 0;
-      }
-    }
-  };
-  onCleanup(() => {
-    if (animationTimeout) {
-      clearTimeout(animationTimeout);
-    }
-  });
-  const handleCardRefresh = (event) => {
-    event.stopPropagation();
-    setIsCardRefreshing(true);
-    setFrameIndex(0);
-    setIsPlaying(false);
-    if (animationTimeout) {
-      clearTimeout(animationTimeout);
-      animationTimeout = void 0;
-    }
-    props.onRefresh();
-    queueMicrotask(() => setIsCardRefreshing(false));
-  };
-  const handleToggleStar = (event) => {
-    event.stopPropagation();
-    props.onToggleStar();
-  };
-  return (() => {
-    var _el$ = _tmpl$42(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$8 = _el$4.nextSibling, _el$10 = _el$3.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$2.nextSibling;
-    insert(_el$5, () => props.state.label);
-    insert(_el$4, createComponent(Show, {
-      get when() {
-        return hasAnimation();
-      },
-      get children() {
-        var _el$6 = _tmpl$5(), _el$7 = _el$6.firstChild;
-        insert(_el$6, () => frameIndex() + 1, _el$7);
-        insert(_el$6, frameCount, null);
-        createRenderEffect((_$p) => setStyleProperty(_el$6, "color", props.theme.descriptionText));
-        return _el$6;
-      }
-    }), null);
-    insert(_el$8, () => props.state.description);
-    insert(_el$3, createComponent(Show, {
-      get when() {
-        return hasAnimation();
-      },
-      get children() {
-        var _el$9 = _tmpl$22(), _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
-        _el$0.$$click = handleTogglePlay;
-        insert(_el$0, () => isPlaying() ? "\u23F8" : "\u25B6");
-        _el$1.$$input = handleSliderChange;
-        createRenderEffect((_p$) => {
-          var _v$ = `1px solid ${props.theme.cardBorder}`, _v$2 = props.theme.titleText, _v$3 = isPlaying() ? "Pause" : "Play", _v$4 = frameCount() - 1, _v$5 = props.theme.titleText;
-          _v$ !== _p$.e && setStyleProperty(_el$0, "border", _p$.e = _v$);
-          _v$2 !== _p$.t && setStyleProperty(_el$0, "color", _p$.t = _v$2);
-          _v$3 !== _p$.a && setAttribute(_el$0, "title", _p$.a = _v$3);
-          _v$4 !== _p$.o && setAttribute(_el$1, "max", _p$.o = _v$4);
-          _v$5 !== _p$.i && setStyleProperty(_el$1, "accent-color", _p$.i = _v$5);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0,
-          a: void 0,
-          o: void 0,
-          i: void 0
-        });
-        createRenderEffect(() => _el$1.value = frameIndex());
-        return _el$9;
-      }
-    }), null);
-    _el$11.$$click = handleToggleStar;
-    insert(_el$11, () => props.isStarred ? "\u2605" : "\u2606");
-    _el$12.$$click = handleCardRefresh;
-    insert(_el$13, createComponent(Show, {
-      get when() {
-        return !isCardRefreshing();
-      },
-      get children() {
-        return [createComponent(Show, {
-          get when() {
-            return props.state.component !== "toolbar";
-          },
-          get children() {
-            var _el$14 = _tmpl$32();
-            use((element) => props.registerCell(element), _el$14);
-            insert(_el$14, () => props.getTargetDisplayText());
-            createRenderEffect((_$p) => style(_el$14, createTargetStyle(props.theme), _$p));
-            return _el$14;
-          }
-        }), createComponent(Show, {
-          get when() {
-            return props.state.component === "label";
-          },
-          get children() {
-            return createComponent(SelectionLabel, {
-              get tagName() {
-                return currentProps().tagName;
-              },
-              get componentName() {
-                return currentProps().componentName;
-              },
-              get elementsCount() {
-                return currentProps().elementsCount;
-              },
-              get selectionBounds() {
-                return props.getBounds();
-              },
-              get mouseX() {
-                return memo(() => !!props.getBounds())() ? props.getBounds().x + props.getBounds().width / 2 : void 0;
-              },
-              visible: true,
-              get status() {
-                return currentProps().status;
-              },
-              get hasAgent() {
-                return currentProps().hasAgent;
-              },
-              get isAgentConnected() {
-                return currentProps().isAgentConnected;
-              },
-              get isPromptMode() {
-                return currentProps().isPromptMode;
-              },
-              get inputValue() {
-                return currentProps().inputValue;
-              },
-              get replyToPrompt() {
-                return currentProps().replyToPrompt;
-              },
-              get statusText() {
-                return currentProps().statusText;
-              },
-              get isPendingDismiss() {
-                return currentProps().isPendingDismiss;
-              },
-              get isPendingAbort() {
-                return currentProps().isPendingAbort;
-              },
-              get error() {
-                return currentProps().error;
-              },
-              get isContextMenuOpen() {
-                return currentProps().isContextMenuOpen;
-              },
-              get supportsUndo() {
-                return currentProps().supportsUndo;
-              },
-              get supportsFollowUp() {
-                return currentProps().supportsFollowUp;
-              },
-              get filePath() {
-                return currentProps().filePath;
-              },
-              get dismissButtonText() {
-                return currentProps().dismissButtonText;
-              },
-              get previousPrompt() {
-                return currentProps().previousPrompt;
-              },
-              get onOpen() {
-                return currentProps().filePath ? () => {
-                } : void 0;
-              },
-              onInputChange: () => {
-              },
-              onSubmit: () => {
-              },
-              onToggleExpand: () => {
-              },
-              onConfirmDismiss: () => {
-              },
-              onCancelDismiss: () => {
-              },
-              onConfirmAbort: () => {
-              },
-              onCancelAbort: () => {
-              },
-              get onAcknowledgeError() {
-                return currentProps().hasOnAcknowledge !== false ? () => {
-                } : void 0;
-              },
-              get onRetry() {
-                return currentProps().hasOnRetry !== false ? () => {
-                } : void 0;
-              },
-              get onDismiss() {
-                return currentProps().hasOnDismiss !== false ? () => {
-                } : void 0;
-              },
-              get onUndo() {
-                return currentProps().hasOnUndo !== false ? () => {
-                } : void 0;
-              },
-              onFollowUpSubmit: () => {
-              },
-              onAbort: () => {
-              },
-              get onShowContextMenu() {
-                return currentProps().showMoreOptions ? () => {
-                } : void 0;
-              }
-            });
-          }
-        }), createComponent(Show, {
-          get when() {
-            return props.state.component === "context-menu";
-          },
-          get children() {
-            return createComponent(ContextMenu, {
-              get position() {
-                return memo(() => !!props.getBounds())() ? {
-                  x: props.getBounds().x + props.getBounds().width / 2,
-                  y: props.getBounds().y + props.getBounds().height
-                } : null;
-              },
-              get selectionBounds() {
-                return props.getBounds() ?? null;
-              },
-              get tagName() {
-                return currentProps().tagName;
-              },
-              get componentName() {
-                return currentProps().componentName;
-              },
-              get hasFilePath() {
-                return currentProps().hasFilePath ?? false;
-              },
-              get actions() {
-                return [{
-                  id: "copy",
-                  label: "Copy",
-                  shortcut: "C",
-                  onAction: () => {
-                  }
-                }, {
-                  id: "screenshot",
-                  label: "Screenshot",
-                  shortcut: "S",
-                  onAction: () => {
-                  }
-                }, {
-                  id: "copy-html",
-                  label: "Copy HTML",
-                  onAction: () => {
-                  }
-                }, {
-                  id: "open",
-                  label: "Open",
-                  shortcut: "O",
-                  enabled: currentProps().hasFilePath ?? false,
-                  onAction: () => {
-                  }
-                }, {
-                  id: "comment",
-                  label: "Comment",
-                  shortcut: "Enter",
-                  onAction: () => {
-                  }
-                }];
-              },
-              onDismiss: () => {
-              },
-              onHide: () => {
-              }
-            });
-          }
-        }), createComponent(Show, {
-          get when() {
-            return props.state.component === "toolbar";
-          },
-          get children() {
-            return createComponent(ToolbarContent, {
-              get isActive() {
-                return currentProps().isToolbarActive ?? false;
-              },
-              get isCommentMode() {
-                return currentProps().isToolbarCommentMode ?? false;
-              },
-              get enabled() {
-                return currentProps().isToolbarEnabled ?? true;
-              },
-              get isCollapsed() {
-                return currentProps().isToolbarCollapsed;
-              },
-              get snapEdge() {
-                return currentProps().toolbarSnapEdge;
-              }
-            });
-          }
-        })];
-      }
-    }));
-    createRenderEffect((_p$) => {
-      var _v$6 = createCardContainerStyle(props.theme), _v$7 = createCardHeaderStyle(props.theme), _v$8 = props.theme.titleText, _v$9 = props.theme.descriptionText, _v$0 = `1px solid ${props.isStarred ? "rgba(250, 204, 21, 0.5)" : props.theme.cardBorder}`, _v$1 = props.isStarred ? "rgba(250, 204, 21, 1)" : props.theme.descriptionText, _v$10 = props.isStarred ? "Unstar this card" : "Star this card", _v$11 = `1px solid ${props.theme.cardBorder}`, _v$12 = props.theme.descriptionText, _v$13 = createCardContentStyle(props.theme);
-      _p$.e = style(_el$, _v$6, _p$.e);
-      _p$.t = style(_el$2, _v$7, _p$.t);
-      _v$8 !== _p$.a && setStyleProperty(_el$5, "color", _p$.a = _v$8);
-      _v$9 !== _p$.o && setStyleProperty(_el$8, "color", _p$.o = _v$9);
-      _v$0 !== _p$.i && setStyleProperty(_el$11, "border", _p$.i = _v$0);
-      _v$1 !== _p$.n && setStyleProperty(_el$11, "color", _p$.n = _v$1);
-      _v$10 !== _p$.s && setAttribute(_el$11, "title", _p$.s = _v$10);
-      _v$11 !== _p$.h && setStyleProperty(_el$12, "border", _p$.h = _v$11);
-      _v$12 !== _p$.r && setStyleProperty(_el$12, "color", _p$.r = _v$12);
-      _p$.d = style(_el$13, _v$13, _p$.d);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0,
-      d: void 0
-    });
-    return _el$;
-  })();
-};
-var FpsMeter = (props) => {
-  const [fps, setFps] = createSignal(0);
-  let frameCount = 0;
-  let lastTime = performance.now();
-  let animationFrameId;
-  const measureFps = () => {
-    frameCount++;
-    const currentTime = performance.now();
-    const elapsed = currentTime - lastTime;
-    if (elapsed >= 1e3) {
-      setFps(Math.round(frameCount * 1e3 / elapsed));
-      frameCount = 0;
-      lastTime = currentTime;
-    }
-    animationFrameId = requestAnimationFrame(measureFps);
-  };
-  onMount(() => {
-    animationFrameId = requestAnimationFrame(measureFps);
-  });
-  onCleanup(() => {
-    if (animationFrameId) {
-      cancelAnimationFrame(animationFrameId);
-    }
-  });
-  return (() => {
-    var _el$15 = _tmpl$52(), _el$16 = _el$15.firstChild;
-    insert(_el$15, fps, _el$16);
-    createRenderEffect((_p$) => {
-      var _v$14 = props.theme.cardBackground, _v$15 = `1px solid ${props.theme.cardBorder}`, _v$16 = props.theme.titleText;
-      _v$14 !== _p$.e && setStyleProperty(_el$15, "background-color", _p$.e = _v$14);
-      _v$15 !== _p$.t && setStyleProperty(_el$15, "border", _p$.t = _v$15);
-      _v$16 !== _p$.a && setStyleProperty(_el$15, "color", _p$.a = _v$16);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$15;
-  })();
-};
-var DesignSystemGrid = () => {
-  const [cellRefs, setCellRefs] = createSignal(/* @__PURE__ */ new Map());
-  const [boundsVersion, setBoundsVersion] = createSignal(0);
-  const [isDarkMode, setIsDarkMode] = createSignal(loadTheme());
-  const [isRefreshing, setIsRefreshing] = createSignal(false);
-  const [starredIds, setStarredIds] = createSignal(loadStarred());
-  const [searchQuery, setSearchQuery] = createSignal("");
-  const [isScrambled, setIsScrambled] = createSignal(false);
-  const handleRefresh = () => {
-    setIsRefreshing(true);
-    setCellRefs(/* @__PURE__ */ new Map());
-    queueMicrotask(() => setIsRefreshing(false));
-  };
-  const handleToggleTheme = () => {
-    setIsDarkMode((prev) => {
-      const newValue = !prev;
-      saveTheme(newValue);
-      return newValue;
-    });
-  };
-  const handleToggleStar = (id) => {
-    setStarredIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      saveStarred(next);
-      return next;
-    });
-  };
-  const isStarred = (id) => starredIds().has(id);
-  const theme = () => isDarkMode() ? DARK_THEME : LIGHT_THEME;
-  const sectionTitleStyle = () => ({
-    display: "block",
-    color: theme().sectionTitle,
-    "font-size": `${SECTION_TITLE_FONT_SIZE_PX}px`,
-    "font-weight": "600",
-    "text-transform": "uppercase",
-    "letter-spacing": "0.05em",
-    "margin-bottom": `${SECTION_TITLE_MARGIN_BOTTOM_PX}px`
-  });
-  const gridStyle = () => ({
-    display: "grid",
-    "grid-template-columns": `repeat(auto-fill, minmax(${CELL_SIZE_PX}px, 1fr))`,
-    gap: `${GAP_PX}px`
-  });
-  const getTargetDisplayText = (state) => {
-    if (state.component === "toolbar") {
-      return "";
-    }
-    if (state.props.elementsCount && state.props.elementsCount > 1) {
-      return `<${state.props.elementsCount} elements>`;
-    }
-    return `<${state.props.componentName || state.props.tagName || "element"} />`;
-  };
-  const registerCell = (id, element) => {
-    setCellRefs((prev) => {
-      const next = new Map(prev);
-      next.set(id, element);
-      return next;
-    });
-    setBoundsVersion((version) => version + 1);
-  };
-  const getBoundsForCell = (id) => {
-    boundsVersion();
-    const element = cellRefs().get(id);
-    if (!element) return void 0;
-    const rect = element.getBoundingClientRect();
-    return {
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: rect.height,
-      borderRadius: `${TARGET_BORDER_RADIUS_PX}px`,
-      transform: ""
-    };
-  };
-  let resizeObserver;
-  let containerRef;
-  const handleScroll = () => {
-    setBoundsVersion((version) => version + 1);
-  };
-  const setupResizeObserver = (container) => {
-    containerRef = container;
-    resizeObserver = new ResizeObserver(() => {
-      setBoundsVersion((version) => version + 1);
-    });
-    resizeObserver.observe(container);
-    window.addEventListener("scroll", handleScroll, true);
-    container.addEventListener("scroll", handleScroll, true);
-  };
-  onCleanup(() => {
-    resizeObserver?.disconnect();
-    window.removeEventListener("scroll", handleScroll, true);
-    containerRef?.removeEventListener("scroll", handleScroll, true);
-  });
-  const hasAnimation = (state) => Boolean(state.animationSequence?.length);
-  const matchesSearch = (state) => {
-    const query = searchQuery().toLowerCase().trim();
-    if (!query) return true;
-    return state.label.toLowerCase().includes(query) || state.description.toLowerCase().includes(query) || state.id.toLowerCase().includes(query) || (state.props.componentName?.toLowerCase().includes(query) ?? false) || (state.props.tagName?.toLowerCase().includes(query) ?? false);
-  };
-  const starredStates = () => DESIGN_SYSTEM_STATES.filter((state) => starredIds().has(state.id) && matchesSearch(state));
-  const labelStates = () => DESIGN_SYSTEM_STATES.filter((state) => state.component === "label" && !state.props.hasAgent && !hasAnimation(state) && matchesSearch(state));
-  const contextMenuStates = () => DESIGN_SYSTEM_STATES.filter((state) => state.component === "context-menu" && !hasAnimation(state) && matchesSearch(state));
-  const toolbarStates = () => DESIGN_SYSTEM_STATES.filter((state) => state.component === "toolbar" && !hasAnimation(state) && matchesSearch(state));
-  const agentLabelStates = () => DESIGN_SYSTEM_STATES.filter((state) => state.component === "label" && state.props.hasAgent && !hasAnimation(state) && matchesSearch(state));
-  const flowStates = () => DESIGN_SYSTEM_STATES.filter((state) => hasAnimation(state) && matchesSearch(state));
-  const createRefreshHandler = (id) => () => {
-    setCellRefs((prev) => {
-      const next = new Map(prev);
-      next.delete(id);
-      return next;
-    });
-  };
-  return (() => {
-    var _el$17 = _tmpl$11(), _el$18 = _el$17.firstChild, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$20.nextSibling, _el$26 = _el$19.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$30.nextSibling;
-    use(setupResizeObserver, _el$17);
-    _el$27.$$input = (event) => setSearchQuery(event.currentTarget.value);
-    _el$29.$$click = () => setIsScrambled((prev) => !prev);
-    insert(_el$29, () => isScrambled() ? "\u2713 Scramble" : "Scramble");
-    _el$30.$$click = handleRefresh;
-    _el$31.$$click = handleToggleTheme;
-    insert(_el$31, () => isDarkMode() ? "Dark" : "Light");
-    insert(_el$17, createComponent(Show, {
-      get when() {
-        return !isRefreshing();
-      },
-      get children() {
-        return [createComponent(Show, {
-          get when() {
-            return starredStates().length > 0;
-          },
-          get children() {
-            var _el$32 = _tmpl$6(), _el$33 = _el$32.firstChild, _el$34 = _el$33.firstChild, _el$36 = _el$34.nextSibling; _el$36.nextSibling; var _el$37 = _el$33.nextSibling;
-            insert(_el$33, () => starredStates().length, _el$36);
-            insert(_el$37, createComponent(For, {
-              get each() {
-                return starredStates();
-              },
-              children: (state) => createComponent(StateCard, {
-                state,
-                get theme() {
-                  return theme();
-                },
-                getBounds: () => getBoundsForCell(state.id),
-                registerCell: (element) => registerCell(state.id, element),
-                get onRefresh() {
-                  return createRefreshHandler(state.id);
-                },
-                getTargetDisplayText: () => getTargetDisplayText(state),
-                get isStarred() {
-                  return isStarred(state.id);
-                },
-                onToggleStar: () => handleToggleStar(state.id),
-                get isScrambled() {
-                  return isScrambled();
-                }
-              })
-            }));
-            createRenderEffect((_p$) => {
-              var _v$17 = {
-                ...sectionTitleStyle()
-              }, _v$18 = gridStyle();
-              _p$.e = style(_el$33, _v$17, _p$.e);
-              _p$.t = style(_el$37, _v$18, _p$.t);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$32;
-          }
-        }), createComponent(Show, {
-          get when() {
-            return flowStates().length > 0;
-          },
-          get children() {
-            var _el$38 = _tmpl$7(), _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
-            insert(_el$40, createComponent(For, {
-              get each() {
-                return flowStates();
-              },
-              children: (state) => createComponent(StateCard, {
-                state,
-                get theme() {
-                  return theme();
-                },
-                getBounds: () => getBoundsForCell(state.id),
-                registerCell: (element) => registerCell(state.id, element),
-                get onRefresh() {
-                  return createRefreshHandler(state.id);
-                },
-                getTargetDisplayText: () => getTargetDisplayText(state),
-                get isStarred() {
-                  return isStarred(state.id);
-                },
-                onToggleStar: () => handleToggleStar(state.id),
-                get isScrambled() {
-                  return isScrambled();
-                }
-              })
-            }));
-            createRenderEffect((_p$) => {
-              var _v$19 = sectionTitleStyle(), _v$20 = gridStyle();
-              _p$.e = style(_el$39, _v$19, _p$.e);
-              _p$.t = style(_el$40, _v$20, _p$.t);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$38;
-          }
-        }), createComponent(Show, {
-          get when() {
-            return labelStates().length > 0;
-          },
-          get children() {
-            var _el$41 = _tmpl$8(), _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling;
-            insert(_el$43, createComponent(For, {
-              get each() {
-                return labelStates();
-              },
-              children: (state) => createComponent(StateCard, {
-                state,
-                get theme() {
-                  return theme();
-                },
-                getBounds: () => getBoundsForCell(state.id),
-                registerCell: (element) => registerCell(state.id, element),
-                get onRefresh() {
-                  return createRefreshHandler(state.id);
-                },
-                getTargetDisplayText: () => getTargetDisplayText(state),
-                get isStarred() {
-                  return isStarred(state.id);
-                },
-                onToggleStar: () => handleToggleStar(state.id),
-                get isScrambled() {
-                  return isScrambled();
-                }
-              })
-            }));
-            createRenderEffect((_p$) => {
-              var _v$21 = sectionTitleStyle(), _v$22 = gridStyle();
-              _p$.e = style(_el$42, _v$21, _p$.e);
-              _p$.t = style(_el$43, _v$22, _p$.t);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$41;
-          }
-        }), createComponent(Show, {
-          get when() {
-            return contextMenuStates().length > 0;
-          },
-          get children() {
-            var _el$44 = _tmpl$9(), _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling;
-            insert(_el$46, createComponent(For, {
-              get each() {
-                return contextMenuStates();
-              },
-              children: (state) => createComponent(StateCard, {
-                state,
-                get theme() {
-                  return theme();
-                },
-                getBounds: () => getBoundsForCell(state.id),
-                registerCell: (element) => registerCell(state.id, element),
-                get onRefresh() {
-                  return createRefreshHandler(state.id);
-                },
-                getTargetDisplayText: () => getTargetDisplayText(state),
-                get isStarred() {
-                  return isStarred(state.id);
-                },
-                onToggleStar: () => handleToggleStar(state.id),
-                get isScrambled() {
-                  return isScrambled();
-                }
-              })
-            }));
-            createRenderEffect((_p$) => {
-              var _v$23 = sectionTitleStyle(), _v$24 = gridStyle();
-              _p$.e = style(_el$45, _v$23, _p$.e);
-              _p$.t = style(_el$46, _v$24, _p$.t);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$44;
-          }
-        }), createComponent(Show, {
-          get when() {
-            return toolbarStates().length > 0;
-          },
-          get children() {
-            var _el$47 = _tmpl$0(), _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling;
-            insert(_el$49, createComponent(For, {
-              get each() {
-                return toolbarStates();
-              },
-              children: (state) => createComponent(StateCard, {
-                state,
-                get theme() {
-                  return theme();
-                },
-                getBounds: () => getBoundsForCell(state.id),
-                registerCell: (element) => registerCell(state.id, element),
-                get onRefresh() {
-                  return createRefreshHandler(state.id);
-                },
-                getTargetDisplayText: () => getTargetDisplayText(state),
-                get isStarred() {
-                  return isStarred(state.id);
-                },
-                onToggleStar: () => handleToggleStar(state.id),
-                get isScrambled() {
-                  return isScrambled();
-                }
-              })
-            }));
-            createRenderEffect((_p$) => {
-              var _v$25 = sectionTitleStyle(), _v$26 = gridStyle();
-              _p$.e = style(_el$48, _v$25, _p$.e);
-              _p$.t = style(_el$49, _v$26, _p$.t);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$47;
-          }
-        }), createComponent(Show, {
-          get when() {
-            return agentLabelStates().length > 0;
-          },
-          get children() {
-            var _el$50 = _tmpl$1(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling;
-            insert(_el$52, createComponent(For, {
-              get each() {
-                return agentLabelStates();
-              },
-              children: (state) => createComponent(StateCard, {
-                state,
-                get theme() {
-                  return theme();
-                },
-                getBounds: () => getBoundsForCell(state.id),
-                registerCell: (element) => registerCell(state.id, element),
-                get onRefresh() {
-                  return createRefreshHandler(state.id);
-                },
-                getTargetDisplayText: () => getTargetDisplayText(state),
-                get isStarred() {
-                  return isStarred(state.id);
-                },
-                onToggleStar: () => handleToggleStar(state.id),
-                get isScrambled() {
-                  return isScrambled();
-                }
-              })
-            }));
-            createRenderEffect((_p$) => {
-              var _v$27 = sectionTitleStyle(), _v$28 = gridStyle();
-              _p$.e = style(_el$51, _v$27, _p$.e);
-              _p$.t = style(_el$52, _v$28, _p$.t);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$50;
-          }
-        }), createComponent(Show, {
-          get when() {
-            return memo(() => !!searchQuery().trim())() && starredStates().length + flowStates().length + labelStates().length + contextMenuStates().length + toolbarStates().length + agentLabelStates().length === 0;
-          },
-          get children() {
-            var _el$53 = _tmpl$10(), _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$57 = _el$55.nextSibling; _el$57.nextSibling;
-            insert(_el$54, searchQuery, _el$57);
-            createRenderEffect((_$p) => setStyleProperty(_el$54, "color", theme().descriptionText));
-            return _el$53;
-          }
-        })];
-      }
-    }), null);
-    insert(_el$17, createComponent(FpsMeter, {
-      get theme() {
-        return theme();
-      }
-    }), null);
-    createRenderEffect((_p$) => {
-      var _v$29 = theme().background, _v$30 = `1px solid ${theme().cardBorder}`, _v$31 = theme().titleText, _v$32 = theme().titleText, _v$33 = `1px solid ${theme().cardBorder}`, _v$34 = theme().cardBackground, _v$35 = theme().titleText, _v$36 = {
-        ...createToggleButtonStyle(theme()),
-        "background-color": isScrambled() ? "rgba(215, 95, 203, 0.2)" : theme().toggleBackground,
-        "border-color": isScrambled() ? "rgba(215, 95, 203, 0.5)" : theme().toggleBorder
-      }, _v$37 = createToggleButtonStyle(theme()), _v$38 = createToggleButtonStyle(theme());
-      _v$29 !== _p$.e && setStyleProperty(_el$17, "background-color", _p$.e = _v$29);
-      _v$30 !== _p$.t && setStyleProperty(_el$18, "border-bottom", _p$.t = _v$30);
-      _v$31 !== _p$.a && setAttribute(_el$24, "fill", _p$.a = _v$31);
-      _v$32 !== _p$.o && setStyleProperty(_el$25, "color", _p$.o = _v$32);
-      _v$33 !== _p$.i && setStyleProperty(_el$27, "border", _p$.i = _v$33);
-      _v$34 !== _p$.n && setStyleProperty(_el$27, "background-color", _p$.n = _v$34);
-      _v$35 !== _p$.s && setStyleProperty(_el$27, "color", _p$.s = _v$35);
-      _p$.h = style(_el$29, _v$36, _p$.h);
-      _p$.r = style(_el$30, _v$37, _p$.r);
-      _p$.d = style(_el$31, _v$38, _p$.d);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0,
-      d: void 0
-    });
-    createRenderEffect(() => _el$27.value = searchQuery());
-    return _el$17;
-  })();
-};
-var renderDesignSystemPreview = (container, options) => {
-  const shadowHost = document.createElement("div");
-  shadowHost.setAttribute("data-react-grab-design-system", "true");
-  shadowHost.style.position = "relative";
-  shadowHost.style.width = "100%";
-  shadowHost.style.minHeight = "100vh";
-  const shadowRoot = shadowHost.attachShadow({
-    mode: "open"
-  });
-  if (styles_default) {
-    const styleElement = document.createElement("style");
-    styleElement.textContent = styles_default;
-    shadowRoot.appendChild(styleElement);
-  }
-  const fontLink = document.createElement("link");
-  fontLink.rel = "stylesheet";
-  fontLink.href = "https://fonts.googleapis.com/css2?family=Geist:wght@500&display=swap";
-  shadowRoot.appendChild(fontLink);
-  const renderRoot = document.createElement("div");
-  renderRoot.style.width = "100%";
-  shadowRoot.appendChild(renderRoot);
-  container.appendChild(shadowHost);
-  const dispose = render(() => createComponent(DesignSystemGrid, {}), renderRoot);
-  return () => {
-    dispose();
-    container.removeChild(shadowHost);
-    options?.onDispose?.();
-  };
-};
-delegateEvents(["click", "input"]);
-
-export { renderDesignSystemPreview };