@bitovi/vybit 0.11.1 → 0.11.3

package/README.md

@@ -1,8 +1,21 @@
 # VyBit
 
-Change designs, draw mockups, and provide suggestions in your browser and send them to your favorite coding agent (Claude, Cursor, Copilot, etc) to be implemented. VyBit works with React apps built with Tailwind v3 or v4.
+Change designs, draw mockups, and provide suggestions __in your browser__ and send them to your favorite coding agent (Claude, Cursor, Copilot, etc) to be implemented. VyBit works with React apps built with Tailwind v3 or v4. 
+
+<img width="1453" height="903" alt="Cursor_and_Carton_Case_Management" src="https://github.com/user-attachments/assets/59b8e280-a827-4fa0-95e3-6c350afacbc9" />
+
+`VyBit` changes how you can design and build an app or website. Instead of building your design system and page designs in Sketch or Figma and then implementing it in code, you:
+
+| Step No | Task | How |
+|----------|----------|----------|
+| 1    | Vibe code your design system    | `Claude, build a button, card and badge. Add storybook.`    |
+| 2    | __Use VyBit to fine-tune your design system in Storybook__ - Adjust colors, spacing, shadows, layout and more | <img  alt="image" src="https://github.com/user-attachments/assets/79ca04be-db8f-458f-8632-87cc040875db" />    |
+| 3a   | __Use VyBit to design features__ - drop customized design system components into your pages | <img width="1481" height="922" alt="image" src="https://github.com/user-attachments/assets/415acdb7-102a-4c31-910b-10536c59ee4a" /> |
+| 3b  | __Use VyBit to design features__ -  sketch a feature with the design canvas | <img width="1482" height="924" alt="image" src="https://github.com/user-attachments/assets/924e9733-baf6-4492-b9da-05fd27c2df93" /> | 
+| 4 | Add text or voice messages for extra context | <img width="376" height="261" alt="image" src="https://github.com/user-attachments/assets/546ea987-a0ad-4809-85c6-52fb91fb987e" /> | 
+
+Plus, VyBit always knows what page, components, and elements you're editing, making it easier for agents to know exactly what you want!
 
-<img width="1546" height="860" alt="image" src="https://github.com/user-attachments/assets/de3450be-abcf-4612-93a5-ae2dd324d583" />
 
 ## Installation
 
@@ -142,9 +155,9 @@ Click it. It will open the Editor Panel.
 
 ### Using the Editor to make changes
 
-More on this later.  But in short, click an element, then you can adjust the desig of it, or insert a panel to draw out changes.  You can also add contextual messages.  These are all draft changes until you commit.
+More on this later.  But in short, click an element, then you can adjust the design of it, or insert a panel to draw out changes.  You can also add contextual messages.  These are all draft changes until you commit.
 
-### Commiting changes
+### Committing changes
 
 Once you have the changes you want to make, you can click the drafts button. This will show you a list of changes.  Click `Commit All` to send them to the agent to be implemented:
 

package/overlay/dist/overlay.js

@@ -5,18 +5,15 @@
   var connected = false;
   var handlers = [];
   function connect(url = "ws://localhost:3333") {
-    console.log("[vybit-overlay] WS connecting to", url);
     socket = new WebSocket(url);
     socket.addEventListener("open", () => {
       connected = true;
-      console.log("[vybit-overlay] WS connected, registering as overlay");
       send({ type: "REGISTER", role: "overlay" });
       window.dispatchEvent(new CustomEvent("overlay-ws-connected"));
     });
     socket.addEventListener("close", () => {
       connected = false;
       socket = null;
-      console.log("[vybit-overlay] WS disconnected, will reconnect in 3s");
       window.dispatchEvent(new CustomEvent("overlay-ws-disconnected"));
       setTimeout(() => connect(url), 3e3);
     });
@@ -2138,15 +2135,21 @@ ${pad}</${tag}>`;
           body: JSON.stringify({ classes: [newClass] })
         });
         if (gen !== previewGeneration) return;
-        const { css } = await res.json();
-        if (gen !== previewGeneration) return;
-        if (!previewStyleEl) {
-          previewStyleEl = document.createElement("style");
-          previewStyleEl.setAttribute("data-tw-preview", "");
-          document.head.appendChild(previewStyleEl);
+        if (!res.ok) {
+          const errBody = await res.text();
+          console.error("[vybit-patcher] CSS fetch FAILED:", res.status, errBody);
+        } else {
+          const { css } = await res.json();
+          if (gen !== previewGeneration) return;
+          if (!previewStyleEl) {
+            previewStyleEl = document.createElement("style");
+            previewStyleEl.setAttribute("data-tw-preview", "");
+            document.head.appendChild(previewStyleEl);
+          }
+          previewStyleEl.textContent = css;
         }
-        previewStyleEl.textContent = css;
-      } catch {
+      } catch (err) {
+        console.error("[vybit-patcher] CSS fetch error:", err);
       }
     }
     if (gen !== previewGeneration) return;
@@ -2177,15 +2180,21 @@ ${pad}</${tag}>`;
           body: JSON.stringify({ classes: newClasses })
         });
         if (gen !== previewGeneration) return;
-        const { css } = await res.json();
-        if (gen !== previewGeneration) return;
-        if (!previewStyleEl) {
-          previewStyleEl = document.createElement("style");
-          previewStyleEl.setAttribute("data-tw-preview", "");
-          document.head.appendChild(previewStyleEl);
+        if (!res.ok) {
+          const errBody = await res.text();
+          console.error("[vybit-patcher] CSS batch fetch FAILED:", res.status, errBody);
+        } else {
+          const { css } = await res.json();
+          if (gen !== previewGeneration) return;
+          if (!previewStyleEl) {
+            previewStyleEl = document.createElement("style");
+            previewStyleEl.setAttribute("data-tw-preview", "");
+            document.head.appendChild(previewStyleEl);
+          }
+          previewStyleEl.textContent = css;
         }
-        previewStyleEl.textContent = css;
-      } catch {
+      } catch (err) {
+        console.error("[vybit-patcher] CSS batch fetch error:", err);
       }
     }
     if (gen !== previewGeneration) return;
@@ -3884,11 +3893,11 @@ ${pad}</${tag}>`;
     return "http://localhost:3333";
   }
   var SERVER_ORIGIN = getServerOrigin();
-  console.log("[vybit-overlay] SERVER_ORIGIN =", SERVER_ORIGIN);
   var insideStorybook = !!window.__STORYBOOK_PREVIEW__;
-  console.log("[vybit-overlay] insideStorybook =", insideStorybook);
   async function fetchTailwindConfig() {
-    if (tailwindConfigCache) return tailwindConfigCache;
+    if (tailwindConfigCache) {
+      return tailwindConfigCache;
+    }
     try {
       const res = await fetch(`${SERVER_ORIGIN}/tailwind-config`);
       tailwindConfigCache = await res.json();
@@ -3898,11 +3907,51 @@ ${pad}</${tag}>`;
       return {};
     }
   }
+  function resolveConfigCssVars(config) {
+    if (!config || !config.colors) return config;
+    const resolved = { ...config, colors: resolveColorObject(config.colors) };
+    return resolved;
+  }
+  function resolveColorObject(obj) {
+    if (typeof obj === "string") {
+      return resolveCssVar(obj);
+    }
+    if (obj && typeof obj === "object") {
+      const result = {};
+      for (const key of Object.keys(obj)) {
+        result[key] = resolveColorObject(obj[key]);
+      }
+      return result;
+    }
+    return obj;
+  }
+  function resolveCssVar(value) {
+    if (!value.startsWith("var(")) return value;
+    const match = value.match(/^var\(\s*(--[^,)]+)/);
+    if (!match) return value;
+    const computed = getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim();
+    if (!computed) return value;
+    const directColor = normalizeToHex(computed);
+    if (directColor) return directColor;
+    const hslColor = normalizeToHex(`hsl(${computed})`);
+    if (hslColor) return hslColor;
+    return computed;
+  }
+  function normalizeToHex(cssColor) {
+    const el = document.createElement("div");
+    el.style.color = cssColor;
+    if (!el.style.color) return null;
+    document.body.appendChild(el);
+    const rgb = getComputedStyle(el).color;
+    document.body.removeChild(el);
+    const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (!m) return null;
+    const hex = "#" + [m[1], m[2], m[3]].map((n) => Number(n).toString(16).padStart(2, "0")).join("");
+    return hex;
+  }
   async function clickHandler(e) {
-    console.log("[vybit-overlay] clickHandler fired on", e.target?.tagName, e.target?.className);
     const composed = e.composedPath();
     if (composed.some((el) => el === shadowHost)) {
-      console.log("[vybit-overlay] click ignored \u2014 shadow host");
       return;
     }
     if (composed.some(
@@ -3939,16 +3988,16 @@ ${pad}</${tag}>`;
         activeContainer.open(panelUrl);
       }
     }
+    const resolvedConfig = config ? resolveConfigCssVars(config) : config;
     sendTo("panel", {
       type: "ELEMENT_SELECTED",
       componentName: componentName2,
       instanceCount: result.exactMatch.length,
       classes: classString,
-      tailwindConfig: config
+      tailwindConfig: resolvedConfig
     });
   }
   function setSelectMode(on) {
-    console.log("[vybit-overlay] setSelectMode", on);
     if (on) {
       document.documentElement.style.cursor = "crosshair";
       document.addEventListener("click", clickHandler, { capture: true });
@@ -3963,7 +4012,6 @@ ${pad}</${tag}>`;
   }
   var PANEL_OPEN_KEY = "tw-inspector-panel-open";
   function toggleInspect(btn) {
-    console.log("[vybit-overlay] toggleInspect, active will be", !active2);
     active2 = !active2;
     if (active2) {
       btn.classList.add("active");
@@ -4282,7 +4330,6 @@ ${pad}</${tag}>`;
     return "popover";
   }
   function init() {
-    console.log("[vybit-overlay] init() called");
     shadowHost = document.createElement("div");
     shadowHost.id = "tw-visual-editor-host";
     shadowHost.style.cssText = "position:fixed;z-index:2147483647;top:0;left:0;width:0;height:0;pointer-events:none;";
@@ -4326,7 +4373,6 @@ ${pad}</${tag}>`;
     const wsUrl = SERVER_ORIGIN.replace(/^http/, "ws");
     connect(wsUrl);
     onMessage((msg) => {
-      console.log("[vybit-overlay] WS message received:", msg.type);
       if (msg.type === "TOGGLE_SELECT_MODE") {
         if (msg.active) {
           setSelectMode(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",

package/panel/dist/assets/{DesignMode-Ch-krWhx.js → DesignMode-CowjbsQM.js}

@@ -1,4 +1,4 @@
-import{r as F,j as A,c as co,s as Be,o as lo,a as uo}from"./index-CGc6ZuTL.js";function p(o,t,e){return(t=function(s){var r=function(i,n){if(typeof i!="object"||!i)return i;var a=i[Symbol.toPrimitive];if(a!==void 0){var h=a.call(i,n);if(typeof h!="object")return h;throw new TypeError("@@toPrimitive must return a primitive value.")}return(n==="string"?String:Number)(i)}(s,"string");return typeof r=="symbol"?r:r+""}(t))in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function Zr(o,t){var e=Object.keys(o);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(o);t&&(s=s.filter(function(r){return Object.getOwnPropertyDescriptor(o,r).enumerable})),e.push.apply(e,s)}return e}function m(o){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?Zr(Object(e),!0).forEach(function(s){p(o,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(e)):Zr(Object(e)).forEach(function(s){Object.defineProperty(o,s,Object.getOwnPropertyDescriptor(e,s))})}return o}function K(o,t){if(o==null)return{};var e,s,r=function(n,a){if(n==null)return{};var h={};for(var c in n)if({}.hasOwnProperty.call(n,c)){if(a.indexOf(c)>=0)continue;h[c]=n[c]}return h}(o,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(o);for(s=0;s<i.length;s++)e=i[s],t.indexOf(e)>=0||{}.propertyIsEnumerable.call(o,e)&&(r[e]=o[e])}return r}function Yt(o,t){return t||(t=o.slice(0)),Object.freeze(Object.defineProperties(o,{raw:{value:Object.freeze(t)}}))}class Qr{constructor(){p(this,"browserShadowBlurConstant",1),p(this,"DPI",96),p(this,"devicePixelRatio",typeof window<"u"?window.devicePixelRatio:1),p(this,"perfLimitSizeTotal",2097152),p(this,"maxCacheSideLimit",4096),p(this,"minCacheSideLimit",256),p(this,"disableStyleCopyPaste",!1),p(this,"enableGLFiltering",!0),p(this,"textureSize",4096),p(this,"forceGLPutImageData",!1),p(this,"cachesBoundsOfCurve",!1),p(this,"fontPaths",{}),p(this,"NUM_FRACTION_DIGITS",4)}}const V=new class extends Qr{constructor(o){super(),this.configure(o)}configure(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};Object.assign(this,o)}addFonts(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};this.fontPaths=m(m({},this.fontPaths),o)}removeFonts(){(arguments.length>0&&arguments[0]!==void 0?arguments[0]:[]).forEach(o=>{delete this.fontPaths[o]})}clearFonts(){this.fontPaths={}}restoreDefaults(o){const t=new Qr,e=(o==null?void 0:o.reduce((s,r)=>(s[r]=t[r],s),{}))||t;this.configure(e)}},he=function(o){for(var t=arguments.length,e=new Array(t>1?t-1:0),s=1;s<t;s++)e[s-1]=arguments[s];return console[o]("fabric",...e)};class Wt extends Error{constructor(t,e){super("fabric: ".concat(t),e)}}class go extends Wt{constructor(t){super("".concat(t," 'options.signal' is in 'aborted' state"))}}class fo{}class po extends fo{testPrecision(t,e){const s="precision ".concat(e,` float;
+import{r as F,j as A,c as co,s as Be,o as lo,a as uo}from"./index-r5Ny-REE.js";function p(o,t,e){return(t=function(s){var r=function(i,n){if(typeof i!="object"||!i)return i;var a=i[Symbol.toPrimitive];if(a!==void 0){var h=a.call(i,n);if(typeof h!="object")return h;throw new TypeError("@@toPrimitive must return a primitive value.")}return(n==="string"?String:Number)(i)}(s,"string");return typeof r=="symbol"?r:r+""}(t))in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function Zr(o,t){var e=Object.keys(o);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(o);t&&(s=s.filter(function(r){return Object.getOwnPropertyDescriptor(o,r).enumerable})),e.push.apply(e,s)}return e}function m(o){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?Zr(Object(e),!0).forEach(function(s){p(o,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(e)):Zr(Object(e)).forEach(function(s){Object.defineProperty(o,s,Object.getOwnPropertyDescriptor(e,s))})}return o}function K(o,t){if(o==null)return{};var e,s,r=function(n,a){if(n==null)return{};var h={};for(var c in n)if({}.hasOwnProperty.call(n,c)){if(a.indexOf(c)>=0)continue;h[c]=n[c]}return h}(o,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(o);for(s=0;s<i.length;s++)e=i[s],t.indexOf(e)>=0||{}.propertyIsEnumerable.call(o,e)&&(r[e]=o[e])}return r}function Yt(o,t){return t||(t=o.slice(0)),Object.freeze(Object.defineProperties(o,{raw:{value:Object.freeze(t)}}))}class Qr{constructor(){p(this,"browserShadowBlurConstant",1),p(this,"DPI",96),p(this,"devicePixelRatio",typeof window<"u"?window.devicePixelRatio:1),p(this,"perfLimitSizeTotal",2097152),p(this,"maxCacheSideLimit",4096),p(this,"minCacheSideLimit",256),p(this,"disableStyleCopyPaste",!1),p(this,"enableGLFiltering",!0),p(this,"textureSize",4096),p(this,"forceGLPutImageData",!1),p(this,"cachesBoundsOfCurve",!1),p(this,"fontPaths",{}),p(this,"NUM_FRACTION_DIGITS",4)}}const V=new class extends Qr{constructor(o){super(),this.configure(o)}configure(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};Object.assign(this,o)}addFonts(){let o=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};this.fontPaths=m(m({},this.fontPaths),o)}removeFonts(){(arguments.length>0&&arguments[0]!==void 0?arguments[0]:[]).forEach(o=>{delete this.fontPaths[o]})}clearFonts(){this.fontPaths={}}restoreDefaults(o){const t=new Qr,e=(o==null?void 0:o.reduce((s,r)=>(s[r]=t[r],s),{}))||t;this.configure(e)}},he=function(o){for(var t=arguments.length,e=new Array(t>1?t-1:0),s=1;s<t;s++)e[s-1]=arguments[s];return console[o]("fabric",...e)};class Wt extends Error{constructor(t,e){super("fabric: ".concat(t),e)}}class go extends Wt{constructor(t){super("".concat(t," 'options.signal' is in 'aborted' state"))}}class fo{}class po extends fo{testPrecision(t,e){const s="precision ".concat(e,` float;
 void main(){}`),r=t.createShader(t.FRAGMENT_SHADER);return!!r&&(t.shaderSource(r,s),t.compileShader(r),!!t.getShaderParameter(r,t.COMPILE_STATUS))}queryWebGL(t){const e=t.getContext("webgl");e&&(this.maxTextureSize=e.getParameter(e.MAX_TEXTURE_SIZE),this.GLPrecision=["highp","mediump","lowp"].find(s=>this.testPrecision(e,s)),e.getExtension("WEBGL_lose_context").loseContext(),he("log","WebGL: max texture size ".concat(this.maxTextureSize)))}isSupported(t){return!!this.maxTextureSize&&this.maxTextureSize>=t}}const mo={};let ti;const Vt=()=>ti||(ti={document,window,isTouchSupported:"ontouchstart"in window||"ontouchstart"in document||window&&window.navigator&&window.navigator.maxTouchPoints>0,WebGLProbe:new po,dispose(){},copyPasteData:mo}),Ee=()=>Vt().document,Gs=()=>Vt().window,qi=()=>{var o;return Math.max((o=V.devicePixelRatio)!==null&&o!==void 0?o:Gs().devicePixelRatio,1)},Ve=new class{constructor(){p(this,"boundsOfCurveCache",{}),this.charWidthsCache=new Map}getFontCache(o){let{fontFamily:t,fontStyle:e,fontWeight:s}=o;t=t.toLowerCase();const r=this.charWidthsCache;r.has(t)||r.set(t,new Map);const i=r.get(t),n="".concat(e.toLowerCase(),"_").concat((s+"").toLowerCase());return i.has(n)||i.set(n,new Map),i.get(n)}clearFontCache(o){o?this.charWidthsCache.delete((o||"").toLowerCase()):this.charWidthsCache=new Map}limitDimsByArea(o){const{perfLimitSizeTotal:t}=V,e=Math.sqrt(t*o);return[Math.floor(e),Math.floor(t/e)]}},vr="6.9.1";function Ts(){}const Je=Math.PI/2,Es=2*Math.PI,Pr=Math.PI/180,gt=Object.freeze([1,0,0,1,0,0]),Ar=16,ie=.4477152502,R="center",z="left",pt="top",yr="bottom",Z="right",mt="none",jr=/\r?\n/,Ki="moving",Ns="scaling",$i="rotating",Fr="rotate",Ji="skewing",Ge="resizing",vo="modifyPoly",yo="modifyPath",Ps="changed",Us="scale",xt="scaleX",Ot="scaleY",Pe="skewX",Ae="skewY",nt="fill",vt="stroke",As="modified",ye="json",rr="svg",D=new class{constructor(){this[ye]=new Map,this[rr]=new Map}has(o){return this[ye].has(o)}getClass(o){const t=this[ye].get(o);if(!t)throw new Wt("No class registered for ".concat(o));return t}setClass(o,t){t?this[ye].set(t,o):(this[ye].set(o.type,o),this[ye].set(o.type.toLowerCase(),o))}getSVGClass(o){return this[rr].get(o)}setSVGClass(o,t){this[rr].set(t??o.type.toLowerCase(),o)}},js=new class extends Array{remove(o){const t=this.indexOf(o);t>-1&&this.splice(t,1)}cancelAll(){const o=this.splice(0);return o.forEach(t=>t.abort()),o}cancelByCanvas(o){if(!o)return[];const t=this.filter(e=>{var s;return e.target===o||typeof e.target=="object"&&((s=e.target)===null||s===void 0?void 0:s.canvas)===o});return t.forEach(e=>e.abort()),t}cancelByTarget(o){if(!o)return[];const t=this.filter(e=>e.target===o);return t.forEach(e=>e.abort()),t}};class xo{constructor(){p(this,"__eventListeners",{})}on(t,e){if(this.__eventListeners||(this.__eventListeners={}),typeof t=="object")return Object.entries(t).forEach(s=>{let[r,i]=s;this.on(r,i)}),()=>this.off(t);if(e){const s=t;return this.__eventListeners[s]||(this.__eventListeners[s]=[]),this.__eventListeners[s].push(e),()=>this.off(s,e)}return()=>!1}once(t,e){if(typeof t=="object"){const s=[];return Object.entries(t).forEach(r=>{let[i,n]=r;s.push(this.once(i,n))}),()=>s.forEach(r=>r())}if(e){const s=this.on(t,function(){for(var r=arguments.length,i=new Array(r),n=0;n<r;n++)i[n]=arguments[n];e.call(this,...i),s()});return s}return()=>!1}_removeEventListener(t,e){if(this.__eventListeners[t])if(e){const s=this.__eventListeners[t],r=s.indexOf(e);r>-1&&s.splice(r,1)}else this.__eventListeners[t]=[]}off(t,e){if(this.__eventListeners)if(t===void 0)for(const s in this.__eventListeners)this._removeEventListener(s);else typeof t=="object"?Object.entries(t).forEach(s=>{let[r,i]=s;this._removeEventListener(r,i)}):this._removeEventListener(t,e)}fire(t,e){var s;if(!this.__eventListeners)return;const r=(s=this.__eventListeners[t])===null||s===void 0?void 0:s.concat();if(r)for(let i=0;i<r.length;i++)r[i].call(this,e||{})}}const we=(o,t)=>{const e=o.indexOf(t);return e!==-1&&o.splice(e,1),o},$t=o=>{if(o===0)return 1;switch(Math.abs(o)/Je){case 1:case 3:return 0;case 2:return-1}return Math.cos(o)},Jt=o=>{if(o===0)return 0;const t=o/Je,e=Math.sign(o);switch(t){case 1:return e;case 2:return 0;case 3:return-e}return Math.sin(o)};class y{constructor(){let t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:0,e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0;typeof t=="object"?(this.x=t.x,this.y=t.y):(this.x=t,this.y=e)}add(t){return new y(this.x+t.x,this.y+t.y)}addEquals(t){return this.x+=t.x,this.y+=t.y,this}scalarAdd(t){return new y(this.x+t,this.y+t)}scalarAddEquals(t){return this.x+=t,this.y+=t,this}subtract(t){return new y(this.x-t.x,this.y-t.y)}subtractEquals(t){return this.x-=t.x,this.y-=t.y,this}scalarSubtract(t){return new y(this.x-t,this.y-t)}scalarSubtractEquals(t){return this.x-=t,this.y-=t,this}multiply(t){return new y(this.x*t.x,this.y*t.y)}scalarMultiply(t){return new y(this.x*t,this.y*t)}scalarMultiplyEquals(t){return this.x*=t,this.y*=t,this}divide(t){return new y(this.x/t.x,this.y/t.y)}scalarDivide(t){return new y(this.x/t,this.y/t)}scalarDivideEquals(t){return this.x/=t,this.y/=t,this}eq(t){return this.x===t.x&&this.y===t.y}lt(t){return this.x<t.x&&this.y<t.y}lte(t){return this.x<=t.x&&this.y<=t.y}gt(t){return this.x>t.x&&this.y>t.y}gte(t){return this.x>=t.x&&this.y>=t.y}lerp(t){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:.5;return e=Math.max(Math.min(1,e),0),new y(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)}distanceFrom(t){const e=this.x-t.x,s=this.y-t.y;return Math.sqrt(e*e+s*s)}midPointFrom(t){return this.lerp(t)}min(t){return new y(Math.min(this.x,t.x),Math.min(this.y,t.y))}max(t){return new y(Math.max(this.x,t.x),Math.max(this.y,t.y))}toString(){return"".concat(this.x,",").concat(this.y)}setXY(t,e){return this.x=t,this.y=e,this}setX(t){return this.x=t,this}setY(t){return this.y=t,this}setFromPoint(t){return this.x=t.x,this.y=t.y,this}swap(t){const e=this.x,s=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=s}clone(){return new y(this.x,this.y)}rotate(t){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:Lr;const s=Jt(t),r=$t(t),i=this.subtract(e);return new y(i.x*r-i.y*s,i.x*s+i.y*r).add(e)}transform(t){let e=arguments.length>1&&arguments[1]!==void 0&&arguments[1];return new y(t[0]*this.x+t[2]*this.y+(e?0:t[4]),t[1]*this.x+t[3]*this.y+(e?0:t[5]))}}const Lr=new y(0,0),Os=o=>!!o&&Array.isArray(o._objects);function Zi(o){class t extends o{constructor(){super(...arguments),p(this,"_objects",[])}_onObjectAdded(s){}_onObjectRemoved(s){}_onStackOrderChanged(s){}add(){for(var s=arguments.length,r=new Array(s),i=0;i<s;i++)r[i]=arguments[i];const n=this._objects.push(...r);return r.forEach(a=>this._onObjectAdded(a)),n}insertAt(s){for(var r=arguments.length,i=new Array(r>1?r-1:0),n=1;n<r;n++)i[n-1]=arguments[n];return this._objects.splice(s,0,...i),i.forEach(a=>this._onObjectAdded(a)),this._objects.length}remove(){const s=this._objects,r=[];for(var i=arguments.length,n=new Array(i),a=0;a<i;a++)n[a]=arguments[a];return n.forEach(h=>{const c=s.indexOf(h);c!==-1&&(s.splice(c,1),r.push(h),this._onObjectRemoved(h))}),r}forEachObject(s){this.getObjects().forEach((r,i,n)=>s(r,i,n))}getObjects(){for(var s=arguments.length,r=new Array(s),i=0;i<s;i++)r[i]=arguments[i];return r.length===0?[...this._objects]:this._objects.filter(n=>n.isType(...r))}item(s){return this._objects[s]}isEmpty(){return this._objects.length===0}size(){return this._objects.length}contains(s,r){return!!this._objects.includes(s)||!!r&&this._objects.some(i=>i instanceof t&&i.contains(s,!0))}complexity(){return this._objects.reduce((s,r)=>s+=r.complexity?r.complexity():0,0)}sendObjectToBack(s){return!(!s||s===this._objects[0])&&(we(this._objects,s),this._objects.unshift(s),this._onStackOrderChanged(s),!0)}bringObjectToFront(s){return!(!s||s===this._objects[this._objects.length-1])&&(we(this._objects,s),this._objects.push(s),this._onStackOrderChanged(s),!0)}sendObjectBackwards(s,r){if(!s)return!1;const i=this._objects.indexOf(s);if(i!==0){const n=this.findNewLowerIndex(s,i,r);return we(this._objects,s),this._objects.splice(n,0,s),this._onStackOrderChanged(s),!0}return!1}bringObjectForward(s,r){if(!s)return!1;const i=this._objects.indexOf(s);if(i!==this._objects.length-1){const n=this.findNewUpperIndex(s,i,r);return we(this._objects,s),this._objects.splice(n,0,s),this._onStackOrderChanged(s),!0}return!1}moveObjectTo(s,r){return s!==this._objects[r]&&(we(this._objects,s),this._objects.splice(r,0,s),this._onStackOrderChanged(s),!0)}findNewLowerIndex(s,r,i){let n;if(i){n=r;for(let a=r-1;a>=0;--a)if(s.isOverlapping(this._objects[a])){n=a;break}}else n=r-1;return n}findNewUpperIndex(s,r,i){let n;if(i){n=r;for(let a=r+1;a<this._objects.length;++a)if(s.isOverlapping(this._objects[a])){n=a;break}}else n=r+1;return n}collectObjects(s){let{left:r,top:i,width:n,height:a}=s,{includeIntersecting:h=!0}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};const c=[],l=new y(r,i),u=l.add(new y(n,a));for(let d=this._objects.length-1;d>=0;d--){const g=this._objects[d];g.selectable&&g.visible&&(h&&g.intersectsWithRect(l,u)||g.isContainedWithinRect(l,u)||h&&g.containsPoint(l)||h&&g.containsPoint(u))&&c.push(g)}return c}}return t}class Qi extends xo{_setOptions(){let t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};for(const e in t)this.set(e,t[e])}_setObject(t){for(const e in t)this._set(e,t[e])}set(t,e){return typeof t=="object"?this._setObject(t):this._set(t,e),this}_set(t,e){this[t]=e}toggle(t){const e=this.get(t);return typeof e=="boolean"&&this.set(t,!e),this}get(t){return this[t]}}function ks(o){return Gs().requestAnimationFrame(o)}function _o(o){return Gs().cancelAnimationFrame(o)}let bo=0;const ce=()=>bo++,Zt=()=>{const o=Ee().createElement("canvas");if(!o||o.getContext===void 0)throw new Wt("Failed to create `canvas` element");return o},wo=()=>Ee().createElement("img"),kt=o=>{const t=Zt();return t.width=o.width,t.height=o.height,t},tn=(o,t,e)=>o.toDataURL("image/".concat(t),e),en=(o,t,e)=>new Promise((s,r)=>{o.toBlob(s,"image/".concat(t),e)}),Q=o=>o*Pr,Qt=o=>o/Pr,So=o=>o.every((t,e)=>t===gt[e]),ft=(o,t,e)=>new y(o).transform(t,e),jt=o=>{const t=1/(o[0]*o[3]-o[1]*o[2]),e=[t*o[3],-t*o[1],-t*o[2],t*o[0],0,0],{x:s,y:r}=new y(o[4],o[5]).transform(e,!0);return e[4]=-s,e[5]=-r,e},at=(o,t,e)=>[o[0]*t[0]+o[2]*t[1],o[1]*t[0]+o[3]*t[1],o[0]*t[2]+o[2]*t[3],o[1]*t[2]+o[3]*t[3],e?0:o[0]*t[4]+o[2]*t[5]+o[4],e?0:o[1]*t[4]+o[3]*t[5]+o[5]],Rr=(o,t)=>o.reduceRight((e,s)=>s&&e?at(s,e,t):s||e,void 0)||gt.concat(),sn=o=>{let[t,e]=o;return Math.atan2(e,t)},Fs=o=>{const t=sn(o),e=Math.pow(o[0],2)+Math.pow(o[1],2),s=Math.sqrt(e),r=(o[0]*o[3]-o[2]*o[1])/s,i=Math.atan2(o[0]*o[2]+o[1]*o[3],e);return{angle:Qt(t),scaleX:s,scaleY:r,skewX:Qt(i),skewY:0,translateX:o[4]||0,translateY:o[5]||0}},Ze=function(o){return[1,0,0,1,o,arguments.length>1&&arguments[1]!==void 0?arguments[1]:0]};function je(){let{angle:o=0}=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},{x:t=0,y:e=0}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};const s=Q(o),r=$t(s),i=Jt(s);return[r,i,-i,r,t?t-(r*t-i*e):0,e?e-(i*t+r*e):0]}const Br=function(o){return[o,0,0,arguments.length>1&&arguments[1]!==void 0?arguments[1]:o,0,0]},rn=o=>Math.tan(Q(o)),nn=o=>[1,0,rn(o),1,0,0],on=o=>[1,rn(o),0,1,0,0],qs=o=>{let{scaleX:t=1,scaleY:e=1,flipX:s=!1,flipY:r=!1,skewX:i=0,skewY:n=0}=o,a=Br(s?-t:t,r?-e:e);return i&&(a=at(a,nn(i),!0)),n&&(a=at(a,on(n),!0)),a},Co=o=>{const{translateX:t=0,translateY:e=0,angle:s=0}=o;let r=Ze(t,e);s&&(r=at(r,je({angle:s})));const i=qs(o);return So(i)||(r=at(r,i)),r},Ds=function(o){let{signal:t,crossOrigin:e=null}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};return new Promise(function(s,r){if(t&&t.aborted)return r(new go("loadImage"));const i=wo();let n;t&&(n=function(h){i.src="",r(h)},t.addEventListener("abort",n,{once:!0}));const a=function(){i.onload=i.onerror=null,n&&(t==null||t.removeEventListener("abort",n)),s(i)};o?(i.onload=a,i.onerror=function(){n&&(t==null||t.removeEventListener("abort",n)),r(new Wt("Error loading ".concat(i.src)))},e&&(i.crossOrigin=e),i.src=o):a()})},Ne=function(o){let{signal:t,reviver:e=Ts}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};return new Promise((s,r)=>{const i=[];t&&t.addEventListener("abort",r,{once:!0}),Promise.all(o.map(n=>D.getClass(n.type).fromObject(n,{signal:t}).then(a=>(e(n,a),i.push(a),a)))).then(s).catch(n=>{i.forEach(a=>{a.dispose&&a.dispose()}),r(n)}).finally(()=>{t&&t.removeEventListener("abort",r)})})},Ks=function(o){let{signal:t}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};return new Promise((e,s)=>{const r=[];t&&t.addEventListener("abort",s,{once:!0});const i=Object.values(o).map(a=>a&&a.type&&D.has(a.type)?Ne([a],{signal:t}).then(h=>{let[c]=h;return r.push(c),c}):a),n=Object.keys(o);Promise.all(i).then(a=>a.reduce((h,c,l)=>(h[n[l]]=c,h),{})).then(e).catch(a=>{r.forEach(h=>{h.dispose&&h.dispose()}),s(a)}).finally(()=>{t&&t.removeEventListener("abort",s)})})},Fe=function(o){return(arguments.length>1&&arguments[1]!==void 0?arguments[1]:[]).reduce((t,e)=>(e in o&&(t[e]=o[e]),t),{})},Ir=(o,t)=>Object.keys(o).reduce((e,s)=>(t(o[s],s,o)&&(e[s]=o[s]),e),{}),q=(o,t)=>parseFloat(Number(o).toFixed(t)),Ue=o=>"matrix("+o.map(t=>q(t,V.NUM_FRACTION_DIGITS)).join(" ")+")",Tt=o=>!!o&&o.toLive!==void 0,ei=o=>!!o&&typeof o.toObject=="function",si=o=>!!o&&o.offsetX!==void 0&&"source"in o,ue=o=>!!o&&"multiSelectionStacking"in o;function an(o){const t=o&&At(o);let e=0,s=0;if(!o||!t)return{left:e,top:s};let r=o;const i=t.documentElement,n=t.body||{scrollLeft:0,scrollTop:0};for(;r&&(r.parentNode||r.host)&&(r=r.parentNode||r.host,r===t?(e=n.scrollLeft||i.scrollLeft||0,s=n.scrollTop||i.scrollTop||0):(e+=r.scrollLeft||0,s+=r.scrollTop||0),r.nodeType!==1||r.style.position!=="fixed"););return{left:e,top:s}}const At=o=>o.ownerDocument||null,hn=o=>{var t;return((t=o.ownerDocument)===null||t===void 0?void 0:t.defaultView)||null},cn=function(o,t,e){let{width:s,height:r}=e,i=arguments.length>3&&arguments[3]!==void 0?arguments[3]:1;o.width=s,o.height=r,i>1&&(o.setAttribute("width",(s*i).toString()),o.setAttribute("height",(r*i).toString()),t.scale(i,i))},xr=(o,t)=>{let{width:e,height:s}=t;e&&(o.style.width=typeof e=="number"?"".concat(e,"px"):e),s&&(o.style.height=typeof s=="number"?"".concat(s,"px"):s)};function ri(o){return o.onselectstart!==void 0&&(o.onselectstart=()=>!1),o.style.userSelect=mt,o}class ln{constructor(t){p(this,"_originalCanvasStyle",void 0),p(this,"lower",void 0);const e=this.createLowerCanvas(t);this.lower={el:e,ctx:e.getContext("2d")}}createLowerCanvas(t){const e=(s=t)&&s.getContext!==void 0?t:t&&Ee().getElementById(t)||Zt();var s;if(e.hasAttribute("data-fabric"))throw new Wt("Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas?");return this._originalCanvasStyle=e.style.cssText,e.setAttribute("data-fabric","main"),e.classList.add("lower-canvas"),e}cleanupDOM(t){let{width:e,height:s}=t;const{el:r}=this.lower;r.classList.remove("lower-canvas"),r.removeAttribute("data-fabric"),r.setAttribute("width","".concat(e)),r.setAttribute("height","".concat(s)),r.style.cssText=this._originalCanvasStyle||"",this._originalCanvasStyle=void 0}setDimensions(t,e){const{el:s,ctx:r}=this.lower;cn(s,r,t,e)}setCSSDimensions(t){xr(this.lower.el,t)}calcOffset(){return function(t){var e;const s=t&&At(t),r={left:0,top:0};if(!s)return r;const i=((e=hn(t))===null||e===void 0?void 0:e.getComputedStyle(t,null))||{};r.left+=parseInt(i.borderLeftWidth,10)||0,r.top+=parseInt(i.borderTopWidth,10)||0,r.left+=parseInt(i.paddingLeft,10)||0,r.top+=parseInt(i.paddingTop,10)||0;let n={left:0,top:0};const a=s.documentElement;t.getBoundingClientRect!==void 0&&(n=t.getBoundingClientRect());const h=an(t);return{left:n.left+h.left-(a.clientLeft||0)+r.left,top:n.top+h.top-(a.clientTop||0)+r.top}}(this.lower.el)}dispose(){Vt().dispose(this.lower.el),delete this.lower}}const To={backgroundVpt:!0,backgroundColor:"",overlayVpt:!0,overlayColor:"",includeDefaultValues:!0,svgViewportTransformation:!0,renderOnAddRemove:!0,skipOffscreen:!0,enableRetinaScaling:!0,imageSmoothingEnabled:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,viewportTransform:[...gt]},Oo=["objects"];class Qe extends Zi(Qi){get lowerCanvasEl(){var t;return(t=this.elements.lower)===null||t===void 0?void 0:t.el}get contextContainer(){var t;return(t=this.elements.lower)===null||t===void 0?void 0:t.ctx}static getDefaults(){return Qe.ownDefaults}constructor(t){let e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};super(),Object.assign(this,this.constructor.getDefaults()),this.set(e),this.initElements(t),this._setDimensionsImpl({width:this.width||this.elements.lower.el.width||0,height:this.height||this.elements.lower.el.height||0}),this.skipControlsDrawing=!1,this.viewportTransform=[...this.viewportTransform],this.calcViewportBoundaries()}initElements(t){this.elements=new ln(t)}add(){const t=super.add(...arguments);return arguments.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),t}insertAt(t){for(var e=arguments.length,s=new Array(e>1?e-1:0),r=1;r<e;r++)s[r-1]=arguments[r];const i=super.insertAt(t,...s);return s.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),i}remove(){const t=super.remove(...arguments);return t.length>0&&this.renderOnAddRemove&&this.requestRenderAll(),t}_onObjectAdded(t){t.canvas&&t.canvas!==this&&(he("warn",`Canvas is trying to add an object that belongs to a different canvas.
 Resulting to default behavior: removing object from previous canvas and adding to new canvas`),t.canvas.remove(t)),t._set("canvas",this),t.setCoords(),this.fire("object:added",{target:t}),t.fire("added",{target:this})}_onObjectRemoved(t){t._set("canvas",void 0),this.fire("object:removed",{target:t}),t.fire("removed",{target:this})}_onStackOrderChanged(){this.renderOnAddRemove&&this.requestRenderAll()}getRetinaScaling(){return this.enableRetinaScaling?qi():1}calcOffset(){return this._offset=this.elements.calcOffset()}getWidth(){return this.width}getHeight(){return this.height}setWidth(t,e){return this.setDimensions({width:t},e)}setHeight(t,e){return this.setDimensions({height:t},e)}_setDimensionsImpl(t){let{cssOnly:e=!1,backstoreOnly:s=!1}=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};if(!e){const r=m({width:this.width,height:this.height},t);this.elements.setDimensions(r,this.getRetinaScaling()),this.hasLostContext=!0,this.width=r.width,this.height=r.height}s||this.elements.setCSSDimensions(t),this.calcOffset()}setDimensions(t,e){this._setDimensionsImpl(t,e),e&&e.cssOnly||this.requestRenderAll()}getZoom(){return this.viewportTransform[0]}setViewportTransform(t){this.viewportTransform=t,this.calcViewportBoundaries(),this.renderOnAddRemove&&this.requestRenderAll()}zoomToPoint(t,e){const s=t,r=[...this.viewportTransform],i=ft(t,jt(r));r[0]=e,r[3]=e;const n=ft(i,r);r[4]+=s.x-n.x,r[5]+=s.y-n.y,this.setViewportTransform(r)}setZoom(t){this.zoomToPoint(new y(0,0),t)}absolutePan(t){const e=[...this.viewportTransform];return e[4]=-t.x,e[5]=-t.y,this.setViewportTransform(e)}relativePan(t){return this.absolutePan(new y(-t.x-this.viewportTransform[4],-t.y-this.viewportTransform[5]))}getElement(){return this.elements.lower.el}clearContext(t){t.clearRect(0,0,this.width,this.height)}getContext(){return this.elements.lower.ctx}clear(){this.remove(...this.getObjects()),this.backgroundImage=void 0,this.overlayImage=void 0,this.backgroundColor="",this.overlayColor="",this.clearContext(this.getContext()),this.fire("canvas:cleared"),this.renderOnAddRemove&&this.requestRenderAll()}renderAll(){this.cancelRequestedRender(),this.destroyed||this.renderCanvas(this.getContext(),this._objects)}renderAndReset(){this.nextRenderHandle=0,this.renderAll()}requestRenderAll(){this.nextRenderHandle||this.disposed||this.destroyed||(this.nextRenderHandle=ks(()=>this.renderAndReset()))}calcViewportBoundaries(){const t=this.width,e=this.height,s=jt(this.viewportTransform),r=ft({x:0,y:0},s),i=ft({x:t,y:e},s),n=r.min(i),a=r.max(i);return this.vptCoords={tl:n,tr:new y(a.x,n.y),bl:new y(n.x,a.y),br:a}}cancelRequestedRender(){this.nextRenderHandle&&(_o(this.nextRenderHandle),this.nextRenderHandle=0)}drawControls(t){}renderCanvas(t,e){if(this.destroyed)return;const s=this.viewportTransform,r=this.clipPath;this.calcViewportBoundaries(),this.clearContext(t),t.imageSmoothingEnabled=this.imageSmoothingEnabled,t.patternQuality="best",this.fire("before:render",{ctx:t}),this._renderBackground(t),t.save(),t.transform(s[0],s[1],s[2],s[3],s[4],s[5]),this._renderObjects(t,e),t.restore(),this.controlsAboveOverlay||this.skipControlsDrawing||this.drawControls(t),r&&(r._set("canvas",this),r.shouldCache(),r._transformDone=!0,r.renderCache({forClipping:!0}),this.drawClipPathOnCanvas(t,r)),this._renderOverlay(t),this.controlsAboveOverlay&&!this.skipControlsDrawing&&this.drawControls(t),this.fire("after:render",{ctx:t}),this.__cleanupTask&&(this.__cleanupTask(),this.__cleanupTask=void 0)}drawClipPathOnCanvas(t,e){const s=this.viewportTransform;t.save(),t.transform(...s),t.globalCompositeOperation="destination-in",e.transform(t),t.scale(1/e.zoomX,1/e.zoomY),t.drawImage(e._cacheCanvas,-e.cacheTranslationX,-e.cacheTranslationY),t.restore()}_renderObjects(t,e){for(let s=0,r=e.length;s<r;++s)e[s]&&e[s].render(t)}_renderBackgroundOrOverlay(t,e){const s=this["".concat(e,"Color")],r=this["".concat(e,"Image")],i=this.viewportTransform,n=this["".concat(e,"Vpt")];if(!s&&!r)return;const a=Tt(s);if(s){if(t.save(),t.beginPath(),t.moveTo(0,0),t.lineTo(this.width,0),t.lineTo(this.width,this.height),t.lineTo(0,this.height),t.closePath(),t.fillStyle=a?s.toLive(t):s,n&&t.transform(...i),a){t.transform(1,0,0,1,s.offsetX||0,s.offsetY||0);const h=s.gradientTransform||s.patternTransform;h&&t.transform(...h)}t.fill(),t.restore()}if(r){t.save();const{skipOffscreen:h}=this;this.skipOffscreen=n,n&&t.transform(...i),r.render(t),this.skipOffscreen=h,t.restore()}}_renderBackground(t){this._renderBackgroundOrOverlay(t,"background")}_renderOverlay(t){this._renderBackgroundOrOverlay(t,"overlay")}getCenter(){return{top:this.height/2,left:this.width/2}}getCenterPoint(){return new y(this.width/2,this.height/2)}centerObjectH(t){return this._centerObject(t,new y(this.getCenterPoint().x,t.getCenterPoint().y))}centerObjectV(t){return this._centerObject(t,new y(t.getCenterPoint().x,this.getCenterPoint().y))}centerObject(t){return this._centerObject(t,this.getCenterPoint())}viewportCenterObject(t){return this._centerObject(t,this.getVpCenter())}viewportCenterObjectH(t){return this._centerObject(t,new y(this.getVpCenter().x,t.getCenterPoint().y))}viewportCenterObjectV(t){return this._centerObject(t,new y(t.getCenterPoint().x,this.getVpCenter().y))}getVpCenter(){return ft(this.getCenterPoint(),jt(this.viewportTransform))}_centerObject(t,e){t.setXY(e,R,R),t.setCoords(),this.renderOnAddRemove&&this.requestRenderAll()}toDatalessJSON(t){return this.toDatalessObject(t)}toObject(t){return this._toObjectMethod("toObject",t)}toJSON(){return this.toObject()}toDatalessObject(t){return this._toObjectMethod("toDatalessObject",t)}_toObjectMethod(t,e){const s=this.clipPath,r=s&&!s.excludeFromExport?this._toObject(s,t,e):null;return m(m(m({version:vr},Fe(this,e)),{},{objects:this._objects.filter(i=>!i.excludeFromExport).map(i=>this._toObject(i,t,e))},this.__serializeBgOverlay(t,e)),r?{clipPath:r}:null)}_toObject(t,e,s){let r;this.includeDefaultValues||(r=t.includeDefaultValues,t.includeDefaultValues=!1);const i=t[e](s);return this.includeDefaultValues||(t.includeDefaultValues=!!r),i}__serializeBgOverlay(t,e){const s={},r=this.backgroundImage,i=this.overlayImage,n=this.backgroundColor,a=this.overlayColor;return Tt(n)?n.excludeFromExport||(s.background=n.toObject(e)):n&&(s.background=n),Tt(a)?a.excludeFromExport||(s.overlay=a.toObject(e)):a&&(s.overlay=a),r&&!r.excludeFromExport&&(s.backgroundImage=this._toObject(r,t,e)),i&&!i.excludeFromExport&&(s.overlayImage=this._toObject(i,t,e)),s}toSVG(){let t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},e=arguments.length>1?arguments[1]:void 0;t.reviver=e;const s=[];return this._setSVGPreamble(s,t),this._setSVGHeader(s,t),this.clipPath&&s.push('<g clip-path="url(#'.concat(this.clipPath.clipPathId,`)" >
 `)),this._setSVGBgOverlayColor(s,"background"),this._setSVGBgOverlayImage(s,"backgroundImage",e),this._setSVGObjects(s,e),this.clipPath&&s.push(`</g>

package/panel/dist/assets/{index-CGc6ZuTL.js → index-r5Ny-REE.js}

@@ -58,5 +58,5 @@ Error generating stack: `+l.message+`
                 ${i?"opacity-35 hover:opacity-100":""}
                 ${d?"border-[1.5px] border-bv-teal bg-bv-teal text-white":"border-[1.5px] border-bv-border bg-bv-bg text-bv-muted hover:border-bv-teal hover:bg-bv-teal/9 hover:text-bv-teal"}`,onMouseEnter:()=>n(a.dir),onClick:()=>o(a.dir),children:a.arrow},a.dir)})}),u.jsx("div",{className:"text-[10px] font-mono text-bv-text-mid mt-0.75 max-w-[68px] truncate text-center",children:i?s?u.jsx("span",{className:"text-bv-text font-bold",children:s}):u.jsx("span",{className:"text-bv-muted italic",children:"none"}):u.jsxs("span",{children:["to-",u.jsx("span",{className:"text-bv-teal font-bold",children:e})]})})]})}function A0(e,t){const r=[...e].sort((o,l)=>(o.position??0)-(l.position??0)).map(o=>o.position!=null?`${o.hex} ${o.position}%`:o.hex);return`linear-gradient(${t}, ${r.join(", ")})`}function Ri(e){return Math.round(Math.max(0,Math.min(100,e))/5)*5}function L0({stop:e,isEndpoint:t,isSelected:n,onDragStart:r,onClick:o,onRemove:l}){const s=w.useRef(!1),i=w.useCallback(p=>{p.preventDefault(),p.stopPropagation(),s.current=!1,r(e.id,p.clientX);const f=()=>{s.current=!0},g=()=>{document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",g)};document.addEventListener("mousemove",f),document.addEventListener("mouseup",g)},[e.id,r]),a=w.useCallback(p=>{p.stopPropagation(),s.current||o(e.id,p.currentTarget)},[e.id,o]),c=w.useCallback(p=>{p.stopPropagation(),l(e.id)},[e.id,l]),d=e.position??0;return u.jsxs("div",{className:`absolute top-0 cursor-grab select-none z-10
         hover:z-20
-        ${n?"z-25":""}`,style:{left:`${d}%`,transform:"translateX(-50%)",width:22,height:26,filter:"drop-shadow(0 1px 2px rgba(0,0,0,0.2))"},onMouseDown:i,onClick:a,title:`${e.role}-${e.colorName}${e.position!=null?` ${e.position}%`:""}`,children:[u.jsx("svg",{viewBox:"0 0 22 26",width:22,height:26,xmlns:"http://www.w3.org/2000/svg",children:u.jsx("path",{d:"M2 1 L20 1 L20 16 L11 25 L2 16 Z",fill:e.hex,stroke:n?"#00848B":"white",strokeWidth:n?2:1.5,strokeLinejoin:"round"})}),!t&&u.jsx("div",{className:"absolute -top-1.5 -right-1.5 w-3.5 h-3.5 rounded-full bg-bv-orange text-white text-[9px] leading-3.5 text-center cursor-pointer z-40 hidden group-hover/handle:block hover:block!",style:{display:void 0},onClick:c,onMouseDown:p=>p.stopPropagation(),children:"×"})]})}function I0({stops:e,direction:t,onStopDrag:n,onStopDragEnd:r,onStopClick:o,onBarClick:l,onStopRemove:s,selectedStopId:i}){const a=w.useRef(null),c=w.useRef(null),d=[...e].sort((v,b)=>(v.position??0)-(b.position??0)),p=w.useCallback((v,b)=>{const S=e.find(y=>y.id===v);if(!S)return;c.current={stopId:v,startX:b,startPos:S.position??0};const h=y=>{const x=c.current;if(!x||!a.current)return;const j=a.current.getBoundingClientRect(),C=(y.clientX-x.startX)/j.width*100,N=Ri(x.startPos+C);n(x.stopId,N)},m=y=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",m);const x=c.current;if(x&&a.current){const j=a.current.getBoundingClientRect(),C=(y.clientX-x.startX)/j.width*100,N=Ri(x.startPos+C);r(x.stopId,N)}c.current=null};document.addEventListener("mousemove",h),document.addEventListener("mouseup",m)},[e,n,r]),f=w.useCallback(v=>{if(!a.current)return;const b=a.current.getBoundingClientRect(),S=(v.clientX-b.left)/b.width*100;l(Ri(S))},[l]),g=A0(d,t);return u.jsxs("div",{className:"relative flex-1 min-w-0",style:{paddingTop:28},children:[d.map((v,b)=>u.jsx(L0,{stop:v,isEndpoint:b===0||b===d.length-1,isSelected:v.id===i,onDragStart:p,onClick:o,onRemove:s},v.id)),u.jsx("div",{ref:a,className:"h-9 rounded-md cursor-pointer relative",style:{background:g,border:"1px solid rgba(0,0,0,0.08)",boxShadow:"inset 0 1px 2px rgba(0,0,0,0.06)"},onClick:f,children:u.jsx("div",{className:"absolute inset-0 flex items-center justify-center text-lg font-bold text-white/0 hover:text-white/60 transition-colors pointer-events-none",children:"+"})})]})}const O0={t:"to top",tr:"to top right",r:"to right",br:"to bottom right",b:"to bottom",bl:"to bottom left",l:"to left",tl:"to top left"};function D0(e){var Ft,Kn;const{direction:t,stops:n,mode:r,solidColorName:o,solidColorHex:l,onPreview:s,onPreviewBatch:i,onRevert:a,onStage:c}=e,[d,p]=w.useState(t),[f,g]=w.useState(n),[v,b]=w.useState(r),[S,h]=w.useState(o),[m,y]=w.useState(l),[x,j]=w.useState(null),[k,C]=w.useState(!1),[N,$]=w.useState(null),[A,O]=w.useState(null),F=w.useRef(n.length+1),T=w.useCallback(ee=>{if(v==="gradient")s(`bg-gradient-to-${d}`,`bg-gradient-to-${ee}`);else{const re=S??"slate-500",le=S?`bg-${S}`:"";i([{oldClass:le,newClass:`bg-gradient-to-${ee}`},{oldClass:"",newClass:`from-${re}`},{oldClass:"",newClass:`to-${re}`}])}},[d,v,S,s,i]),_=w.useCallback(()=>{a()},[a]),U=w.useCallback(ee=>{if(p(ee),b("gradient"),v==="gradient"&&f.length>=2){const re=`bg-gradient-to-${d}`,le=`bg-gradient-to-${ee}`;c(re,le)}else{const re=S??"slate-500",le=m??Xn(re,e.colors),E={id:"1",role:"from",colorName:re,hex:le,position:0},D={id:"2",role:"to",colorName:re,hex:le,position:100};F.current=3,g([E,D]);const z=S?`bg-${S}`:"";c(z,`bg-gradient-to-${ee}`),c("",`from-${re}`),c("",`to-${re}`)}},[d,v,f,S,m,e.colors,c]),W=w.useCallback(()=>{b("solid"),C(!1),j(null),$(null),f.length>0&&!S&&(h(f[0].colorName),y(f[0].hex))},[f,S]),J=w.useCallback((ee,re)=>{g(E=>E.map(D=>D.id===ee?{...D,position:re}:D));const le=f.find(E=>E.id===ee);if(le){const E=le.position!=null?`${le.role}-${le.position}%`:"",D=`${le.role}-${re}%`;s(E,D)}},[f,s]),R=w.useCallback((ee,re)=>{g(E=>E.map(D=>D.id===ee?{...D,position:re}:D));const le=f.find(E=>E.id===ee);if(le){const E=le.position!=null?`${le.role}-${le.position}%`:"",D=`${le.role}-${re}%`;c(E,D)}},[f,c]),I=w.useCallback((ee,re)=>{x===ee&&k?(j(null),C(!1),$(null),O(null)):(j(ee),C(!0),$("stop"),O(re))},[x,k]),P=w.useCallback(ee=>{const re=String(F.current++),le=[...f].sort((z,X)=>(z.position??0)-(X.position??0));let E=le[0];for(const z of le)(z.position??0)<=ee&&(E=z);const D={id:re,role:"via",colorName:(E==null?void 0:E.colorName)??"gray-500",hex:(E==null?void 0:E.hex)??"#6B7280",position:ee};g(z=>[...z,D]),j(re),C(!0),$("stop")},[f]),G=w.useCallback(ee=>{const re=f.find(E=>E.id===ee);if(!re)return;const le=f.filter(E=>E.id!==ee);if(j(null),C(!1),$(null),O(null),le.length>=2)g(le),c(`${re.role}-${re.colorName}`,"");else if(le.length===1){const E=le[0];g([]),b("solid"),h(E.colorName),y(E.hex),c(`bg-gradient-to-${d}`,""),f.forEach(D=>c(`${D.role}-${D.colorName}`,"")),c("",`bg-${E.colorName}`)}else g([]),b("none"),h(null),y(null),c(`bg-gradient-to-${d}`,""),f.forEach(E=>c(`${E.role}-${E.colorName}`,""))},[f,d,c]),q=w.useCallback(ee=>{C(!0),$("solid"),j(null),O(ee)},[]),Qe=w.useCallback(()=>{s(S?`bg-${S}`:"","")},[S,s]),ze=w.useCallback(()=>{S&&c(`bg-${S}`,""),h(null),y(null),C(!1),$(null),O(null)},[S,c]),je=w.useCallback(ee=>{if(N==="stop"&&x){const re=f.find(le=>le.id===x);re&&s(`${re.role}-${re.colorName}`,ee)}else N==="solid"&&s(`bg-${S}`,ee)},[N,x,f,S,s]),ae=w.useCallback(()=>{a()},[a]),Re=w.useCallback(ee=>{if(N==="stop"&&x){const re=f.find(le=>le.id===x);if(re){const le=re.role+"-",E=ee.startsWith(le)?ee.slice(le.length):ee;g(D=>D.map(z=>z.id===x?{...z,colorName:E,hex:Xn(E,e.colors)}:z)),c(`${re.role}-${re.colorName}`,`${re.role}-${E}`),C(!1),j(null),$(null),O(null)}}else if(N==="solid"){const re="bg-",le=ee.startsWith(re)?ee.slice(re.length):ee,E=S?`bg-${S}`:"";h(le),y(Xn(le,e.colors)),c(E,`bg-${le}`),C(!1),$(null),O(null)}},[N,x,f,S,c,e.colors]),me=w.useCallback(()=>{C(!1),j(null),$(null),O(null),a()},[a]),eo=N==="stop"&&x?(((Ft=f.find(ee=>ee.id===x))==null?void 0:Ft.role)??"from")+"-":"bg-",to=N==="stop"&&x?((Kn=f.find(ee=>ee.id===x))==null?void 0:Kn.colorName)??"":S??"",pr=O0[d],ro=!!(x?f.find(ee=>ee.id===x):null);return{direction:d,stops:f,mode:v,solidColorName:S,solidColorHex:m,selectedStopId:x,colorPickerOpen:k,editingTarget:N,anchorEl:A,colorPrefix:eo,colorPickerCurrentValue:to,directionCSS:pr,selectedStopIsRemovable:ro,handleDirectionHover:T,handleDirectionLeave:_,handleDirectionClick:U,handleSolidToggle:W,handleStopDrag:J,handleStopDragEnd:R,handleStopClick:I,handleBarClick:P,handleStopRemove:G,handleSwatchClick:q,handleHoverRemoveSolid:Qe,handleRemoveSolid:ze,handleColorHover:je,handleColorLeave:ae,handleColorClick:Re,handleCloseColorPicker:me}}function Xn(e,t){if(typeof t[e]=="string")return t[e];const n=e.lastIndexOf("-");if(n>0){const r=e.slice(0,n),o=e.slice(n+1);if(t[r]&&typeof t[r][o]=="string")return t[r][o]}return"#888888"}function M0(e){const t=D0(e),n=t.mode==="solid",{refs:r,floatingStyles:o,context:l}=hn({open:t.colorPickerOpen,onOpenChange:a=>{a||t.handleCloseColorPicker()},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8}),Ma({apply({availableHeight:a,elements:c}){Object.assign(c.floating.style,{maxHeight:`${a}px`})},padding:8})],whileElementsMounted:un}),s=sr(l),{getFloatingProps:i}=ir([s]);return w.useEffect(()=>{t.anchorEl&&r.setReference(t.anchorEl)},[t.anchorEl]),u.jsxs("div",{className:"group",children:[u.jsxs("div",{className:"flex items-start gap-2.5 mb-2",children:[u.jsx(_0,{direction:t.direction,mode:t.mode,onHover:t.handleDirectionHover,onLeave:t.handleDirectionLeave,onDirectionClick:t.handleDirectionClick,onSolidClick:t.handleSolidToggle,solidColorName:t.solidColorName}),n?u.jsx("div",{className:"flex-1 min-w-0 self-stretch rounded-md cursor-pointer relative overflow-hidden",style:{background:t.solidColorHex??"transparent",border:"1px solid rgba(255,255,255,0.12)",boxShadow:"inset 0 1px 2px rgba(0,0,0,0.06)",minHeight:36},onClick:a=>t.handleSwatchClick(a.currentTarget),title:t.solidColorName?`bg-${t.solidColorName}`:"Click to pick color",children:!t.solidColorHex&&u.jsxs("svg",{className:"absolute inset-0 w-full h-full",viewBox:"0 0 100 100",preserveAspectRatio:"none",xmlns:"http://www.w3.org/2000/svg",children:[u.jsx("line",{x1:"4",y1:"4",x2:"96",y2:"96",stroke:"#F5532D",strokeWidth:"3",strokeLinecap:"round"}),u.jsx("line",{x1:"96",y1:"4",x2:"4",y2:"96",stroke:"#F5532D",strokeWidth:"3",strokeLinecap:"round"})]})}):u.jsx(I0,{stops:t.stops,direction:t.directionCSS,onStopDrag:t.handleStopDrag,onStopDragEnd:t.handleStopDragEnd,onStopClick:t.handleStopClick,onBarClick:t.handleBarClick,onStopRemove:t.handleStopRemove,selectedStopId:t.selectedStopId})]}),t.colorPickerOpen&&u.jsx(pn,{children:u.jsxs("div",{ref:r.setFloating,style:{...o,zIndex:9999,overflowY:"auto"},...i(),children:[u.jsx(Fl,{prefix:t.colorPrefix,currentValue:t.colorPickerCurrentValue,colors:e.colors,locked:!1,lockedValue:null,onHover:t.handleColorHover,onLeave:t.handleColorLeave,onClick:t.handleColorClick,onRemove:t.editingTarget==="solid"?t.handleRemoveSolid:void 0,onRemoveHover:t.editingTarget==="solid"?t.handleHoverRemoveSolid:void 0}),t.selectedStopIsRemovable&&u.jsx("button",{type:"button",className:"mt-1.5 w-full text-[10px] text-bv-orange border border-bv-orange/40 rounded px-2 py-0.5 cursor-pointer hover:bg-bv-orange hover:text-white transition-colors",onClick:()=>{t.selectedStopId&&t.handleStopRemove(t.selectedStopId)},children:"Remove stop"})]})}),u.jsx("div",{className:"min-h-[1rem] text-[10px] text-bv-muted italic opacity-0 invisible transition-opacity duration-150 group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible",children:n?"Click the swatch to change color · Click a direction arrow for gradient":"Click handles to change color · Drag to reposition · Click bar to add stop"})]})}function $0(e,t,n){var y;const r=new Map;for(const x of e)r.set(x.fullClass,!0);if(n)for(const x of n)x.kind==="class-change"&&x.status==="staged"&&(x.originalClass&&r.delete(x.originalClass),x.newClass&&r.set(x.newClass,!0));const o=e.find(x=>x.property==="bg-gradient-to"),l=Array.from(r.keys()).find(x=>x.startsWith("bg-gradient-to-")),i=(l==null?void 0:l.replace("bg-gradient-to-",""))||(o==null?void 0:o.fullClass.slice(15))||"r",c=((y=Array.from(r.keys()).filter(x=>x.startsWith("bg-")&&!x.startsWith("bg-gradient-to-"))[0])==null?void 0:y.replace("bg-",""))??null,d=(c==null?void 0:c.split("/")[0])??null,p=d?Xn(d,t):null,f=Array.from(r.keys()),g=f.filter(x=>x.startsWith("from-")),v=f.filter(x=>x.startsWith("via-")),b=f.filter(x=>x.startsWith("to-")),S=!!(l||g.length>0&&b.length>0),h=S?"gradient":"solid",m=[];if(S){let x=1;for(const j of g){const k=j.replace("from-",""),C=k.split("/")[0];m.push({id:String(x++),role:"from",colorName:k,hex:Xn(C,t),position:null})}for(const j of v){const k=j.replace("via-",""),C=k.split("/")[0];m.push({id:String(x++),role:"via",colorName:k,hex:Xn(C,t),position:null})}for(const j of b){const k=j.replace("to-",""),C=k.split("/")[0];m.push({id:String(x++),role:"to",colorName:k,hex:Xn(C,t),position:null})}}return{direction:i,stops:m,mode:h,solidColorName:c,solidColorHex:p,colors:t}}const Oe="#00848B",ur="rgba(0,132,139,0.18)",z0="#F5532D",wt="#4a4a4a",Dn="#333333",Ae="#999999",Je="'Roboto Mono', 'Menlo', ui-monospace, monospace",$t={width:60,height:60,borderRadius:5,borderWidth:"1.5px",borderStyle:"solid",borderColor:wt,background:Dn,display:"flex",padding:4,overflow:"hidden",transition:"border-color 150ms ease-in-out, background-color 150ms ease-in-out, box-shadow 150ms ease-in-out",boxSizing:"border-box"},$a={background:Oe,opacity:.65,borderRadius:2,flexShrink:0,transition:"opacity 150ms ease-in-out"},Ed={...$a,opacity:.9},Lh={flexShrink:0,background:z0,opacity:.18,borderRadius:1,transition:"opacity 150ms ease-in-out"},K0={...Lh,opacity:.38};function Yt({label:e,isActive:t,containerStyle:n,onClick:r,onHover:o,children:l}){const[s,i]=w.useState(!1),a=t||s,c={...$t,borderColor:a?Oe:wt,background:a?ur:Dn,boxShadow:t?"0 0 0 2px rgba(0,132,139,0.35)":"none",...n};return u.jsxs("div",{className:"cursor-pointer",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3},onMouseEnter:()=>{i(!0),o==null||o()},onMouseLeave:()=>i(!1),onClick:r,children:[u.jsx("div",{style:c,children:l(a)}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:a?Oe:Ae,fontWeight:a?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:e})]})}const Pi=[{value:"flex-row",label:"row",arrow:"→"},{value:"flex-col",label:"col",arrow:"↓"},{value:"flex-row-reverse",label:"row-reverse",arrow:"←"},{value:"flex-col-reverse",label:"col-reverse",arrow:"↑"}];function Ih({direction:e,color:t}){const n={stroke:t,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"};switch(e){case"flex-row":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"5",y1:"15",x2:"25",y2:"15",...n}),u.jsx("polyline",{points:"19,9 25,15 19,21",...n})]});case"flex-col":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"15",y1:"5",x2:"15",y2:"25",...n}),u.jsx("polyline",{points:"9,19 15,25 21,19",...n})]});case"flex-row-reverse":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"25",y1:"15",x2:"5",y2:"15",...n}),u.jsx("polyline",{points:"11,9 5,15 11,21",...n})]});case"flex-col-reverse":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"15",y1:"25",x2:"15",y2:"5",...n}),u.jsx("polyline",{points:"9,11 15,5 21,11",...n})]})}}function F0({currentValue:e,lockedValue:t,locked:n,onHover:r,onLeave:o,onClick:l}){const[s,i]=w.useState(!1),{refs:a,floatingStyles:c,context:d}=hn({open:s,onOpenChange:k=>{k||(i(!1),o())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),p=sr(d),{getReferenceProps:f,getFloatingProps:g}=ir([p]),v=t!==null&&Pi.some(k=>k.value===t),b=n&&!v,S=v?t:e??"",h=Pi.find(k=>k.value===S),m=!h;function y(){i(!1),o()}function x(){b||i(k=>(k&&o(),!k))}const j=m?{...$t,borderStyle:"dashed",borderColor:s?Oe:wt,background:s?ur:"transparent",alignItems:"center",justifyContent:"center",cursor:b?"default":"pointer"}:{...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:s?"0 0 0 2px rgba(0,132,139,0.18)":"none",alignItems:"center",justifyContent:"center",cursor:b?"default":"pointer"};return u.jsxs("div",{style:{display:"inline-flex",flexDirection:"column",gap:2},children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Direction"}),u.jsxs("div",{ref:a.setReference,role:"button",tabIndex:b?-1:0,"aria-label":"Direction",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3},onKeyDown:k=>{(k.key==="Enter"||k.key===" ")&&x()},onClick:x,...f(),children:[u.jsx("div",{style:j,children:h?u.jsx(Ih,{direction:h.value,color:s?Oe:Ae}):u.jsx("span",{style:{fontSize:10,fontFamily:Je,color:Ae},children:"—"})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:(h==null?void 0:h.label)??"—"})]}),s&&u.jsx(pn,{children:u.jsx("div",{ref:a.setFloating,style:c,className:"z-[9999]",...g(),children:u.jsx(fr,{style:{background:"#1e1e1e",border:`1px solid ${wt}`,borderRadius:8,boxShadow:"0 4px 16px rgba(0,0,0,0.35)",padding:8},onMouseLeave:o,onClose:y,children:u.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(4, 60px)",gap:4},children:Pi.map(k=>{const C=k.value===S;return u.jsx(W0,{option:k,isActive:C,onHover:()=>r(k.value),onClick:()=>{l(k.value),y()}},k.value)})})})})})]})}function W0({option:e,isActive:t,onHover:n,onClick:r}){const[o,l]=w.useState(!1),s=t||o,i={...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:t?"0 0 0 2px rgba(0,132,139,0.35)":"none",alignItems:"center",justifyContent:"center"};return u.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3,cursor:"pointer"},onMouseEnter:()=>{l(!0),n()},onMouseLeave:()=>l(!1),onClick:r,children:[u.jsx("div",{style:i,children:u.jsx(Ih,{direction:e.value,color:s?Oe:Ae})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:e.label})]})}const _i=[{value:"flex-nowrap",label:"no-wrap"},{value:"flex-wrap",label:"wrap"},{value:"flex-wrap-reverse",label:"wrap-reverse"}],H0=e=>({stroke:e,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"});function Oh({mode:e,color:t}){const n=H0(t),r={...n,strokeDasharray:"2 3"};return e==="flex-nowrap"?u.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[u.jsx("line",{x1:"3",y1:"7",x2:"37",y2:"7",...n}),u.jsx("polyline",{points:"31,1 37,7 31,13",...n})]}):e==="flex-wrap"?u.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[u.jsx("line",{x1:"3",y1:"7",x2:"37",y2:"7",...n}),u.jsx("line",{x1:"37",y1:"7",x2:"3",y2:"33",...r}),u.jsx("line",{x1:"3",y1:"33",x2:"37",y2:"33",...n}),u.jsx("polyline",{points:"31,27 37,33 31,39",...n})]}):u.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[u.jsx("line",{x1:"3",y1:"33",x2:"37",y2:"33",...n}),u.jsx("line",{x1:"37",y1:"33",x2:"3",y2:"7",...r}),u.jsx("line",{x1:"3",y1:"7",x2:"37",y2:"7",...n}),u.jsx("polyline",{points:"31,1 37,7 31,13",...n})]})}function V0({option:e,isActive:t,onHover:n,onClick:r}){const[o,l]=w.useState(!1),s=t||o,i={...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:t?"0 0 0 2px rgba(0,132,139,0.35)":"none",alignItems:"center",justifyContent:"center"};return u.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3,cursor:"pointer"},onMouseEnter:()=>{l(!0),n()},onMouseLeave:()=>l(!1),onClick:r,children:[u.jsx("div",{style:i,children:u.jsx(Oh,{mode:e.value,color:s?Oe:Ae})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:e.label})]})}function B0({currentValue:e,lockedValue:t,locked:n,onHover:r,onLeave:o,onClick:l}){const[s,i]=w.useState(!1),{refs:a,floatingStyles:c,context:d}=hn({open:s,onOpenChange:k=>{k||(i(!1),o())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),p=sr(d),{getReferenceProps:f,getFloatingProps:g}=ir([p]),v=t!==null&&_i.some(k=>k.value===t),b=n&&!v,S=!v&&e===null,h=v?t:e??"",m=_i.find(k=>k.value===h),y=(m==null?void 0:m.label)??"Wrap";function x(){i(!1),o()}function j(){b||i(k=>(k&&o(),!k))}return u.jsxs("div",{style:{display:"inline-flex",flexDirection:"column",gap:2},children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Wrap"}),u.jsxs("div",{ref:a.setReference,role:"button",tabIndex:b?-1:0,"aria-label":"Wrap",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3},onKeyDown:k=>{(k.key==="Enter"||k.key===" ")&&j()},onClick:j,...f(),children:[S?u.jsx("div",{style:{...$t,borderStyle:"dashed",borderColor:s?Oe:wt,background:s?ur:"transparent",alignItems:"center",justifyContent:"center"},children:u.jsx("span",{style:{fontSize:10,fontFamily:Je,color:Ae},children:"—"})}):u.jsx("div",{style:{...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:s?"0 0 0 2px rgba(0,132,139,0.18)":"none",alignItems:"center",justifyContent:"center"},children:u.jsx(Oh,{mode:h,color:s?Oe:Ae})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:y})]}),s&&u.jsx(pn,{children:u.jsx("div",{ref:a.setFloating,style:c,className:"z-[9999]",...g(),children:u.jsx(fr,{style:{background:"#1e1e1e",border:`1px solid ${wt}`,borderRadius:8,boxShadow:"0 4px 16px rgba(0,0,0,0.35)",padding:8},onMouseLeave:o,onClose:x,children:u.jsx("div",{className:"grid gap-1",style:{gridTemplateColumns:"repeat(3, 60px)"},children:_i.map(k=>{const C=k.value===h;return u.jsx(V0,{option:k,isActive:C,onHover:()=>r(k.value),onClick:()=>{l(k.value),x()}},k.value)})})})})})]})}function U0({flexDirection:e="row",activeValue:t,onSelect:n,onHover:r}){const o=e.startsWith("column"),l=e;function s(f,g){const v=g?Ed:$a;return o?{...v,width:"100%",height:f}:{...v,width:f,height:"100%"}}function i(f){const g=f?Ed:$a;return o?{...g,flex:1,width:"100%"}:{...g,flex:1,height:"100%"}}function a(f,g){return{...g?K0:Lh,flex:f}}const c=f=>t===f,d=f=>()=>n==null?void 0:n(f),p=f=>()=>r==null?void 0:r(f);return u.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(4, 60px)",gap:4},children:[u.jsx(Yt,{label:"start",isActive:c("justify-start"),onClick:d("justify-start"),onHover:p("justify-start"),containerStyle:{flexDirection:l,justifyContent:"flex-start",gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(10,f)}),u.jsx("div",{style:s(14,f)}),u.jsx("div",{style:s(8,f)})]})}),u.jsx(Yt,{label:"center",isActive:c("justify-center"),onClick:d("justify-center"),onHover:p("justify-center"),containerStyle:{flexDirection:l,justifyContent:"center",gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(10,f)}),u.jsx("div",{style:s(14,f)}),u.jsx("div",{style:s(8,f)})]})}),u.jsx(Yt,{label:"stretch",isActive:c("justify-stretch"),onClick:d("justify-stretch"),onHover:p("justify-stretch"),containerStyle:{flexDirection:l,gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:i(f)}),u.jsx("div",{style:i(f)}),u.jsx("div",{style:i(f)})]})}),u.jsx(Yt,{label:"between",isActive:c("justify-between"),onClick:d("justify-between"),onHover:p("justify-between"),containerStyle:{flexDirection:l},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)})]})}),u.jsx(Yt,{label:"around",isActive:c("justify-around"),onClick:d("justify-around"),onHover:p("justify-around"),containerStyle:{flexDirection:l},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(2,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)})]})}),u.jsx(Yt,{label:"evenly",isActive:c("justify-evenly"),onClick:d("justify-evenly"),onHover:p("justify-evenly"),containerStyle:{flexDirection:l},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)})]})}),u.jsx(Yt,{label:"end",isActive:c("justify-end"),onClick:d("justify-end"),onHover:p("justify-end"),containerStyle:{flexDirection:l,justifyContent:"flex-end",gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(10,f)}),u.jsx("div",{style:s(14,f)}),u.jsx("div",{style:s(8,f)})]})})]})}const nn="bg-bv-teal/50 rounded-[2px] shrink-0 group-hover:bg-bv-teal/70 transition-colors duration-150",G0="bg-bv-orange/10 rounded-[2px]";function Xt({isCol:e,main:t}){return u.jsx("div",{className:nn,style:e?{height:t}:{width:t}})}function Wn({flex:e=1}){return u.jsx("div",{className:G0,style:{flex:e}})}function Bt({isCol:e,w:t,h:n}){return u.jsx("div",{className:nn,style:e?{width:n,height:t}:{width:t,height:n}})}function Ai({isCol:e,w:t,h:n,pt:r}){return u.jsx("div",{className:`${nn} text-[5px] text-white/80 leading-none overflow-hidden text-center`,style:e?{width:n,height:t,paddingLeft:r}:{width:t,height:n,paddingTop:r},children:"t"})}function Li(e){return u.jsxs(u.Fragment,{children:[u.jsx(Xt,{isCol:e,main:10}),u.jsx(Xt,{isCol:e,main:14}),u.jsx(Xt,{isCol:e,main:8})]})}const Td=[{value:"justify-start",label:"start",getContainerStyle:e=>({flexDirection:e,justifyContent:"flex-start",gap:2}),renderItems:e=>Li(e.startsWith("column"))},{value:"justify-center",label:"center",getContainerStyle:e=>({flexDirection:e,justifyContent:"center",gap:2}),renderItems:e=>Li(e.startsWith("column"))},{value:"justify-stretch",label:"stretch",getContainerStyle:e=>({flexDirection:e,gap:2}),renderItems:()=>u.jsxs(u.Fragment,{children:[u.jsx("div",{className:`${nn} flex-1`}),u.jsx("div",{className:`${nn} flex-1`}),u.jsx("div",{className:`${nn} flex-1`})]})},{value:"justify-between",label:"between",getContainerStyle:e=>({flexDirection:e}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{}),u.jsx(Xt,{isCol:t,main:12})]})}},{value:"justify-around",label:"around",getContainerStyle:e=>({flexDirection:e}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Wn,{flex:1}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{flex:2}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{flex:1})]})}},{value:"justify-evenly",label:"evenly",getContainerStyle:e=>({flexDirection:e}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Wn,{}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{})]})}},{value:"justify-end",label:"end",getContainerStyle:e=>({flexDirection:e,justifyContent:"flex-end",gap:2}),renderItems:e=>Li(e.startsWith("column"))}],Ii=[{value:"items-start",label:"start",getContainerStyle:e=>({flexDirection:e,alignItems:"flex-start",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Bt,{isCol:t,w:13,h:22}),u.jsx(Bt,{isCol:t,w:15,h:42}),u.jsx(Bt,{isCol:t,w:11,h:14})]})}},{value:"items-center",label:"center",getContainerStyle:e=>({flexDirection:e,alignItems:"center",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Bt,{isCol:t,w:13,h:22}),u.jsx(Bt,{isCol:t,w:15,h:42}),u.jsx(Bt,{isCol:t,w:11,h:14})]})}},{value:"items-baseline",label:"baseline",getContainerStyle:e=>({flexDirection:e,alignItems:"baseline",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Ai,{isCol:t,w:13,h:38,pt:17}),u.jsx(Ai,{isCol:t,w:15,h:26,pt:3}),u.jsx(Ai,{isCol:t,w:11,h:32,pt:10})]})}},{value:"items-stretch",label:"stretch",getContainerStyle:e=>({flexDirection:e,alignItems:"stretch",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx("div",{className:nn,style:t?{height:13}:{width:13}}),u.jsx("div",{className:nn,style:t?{height:15}:{width:15}}),u.jsx("div",{className:nn,style:t?{height:11}:{width:11}})]})}},{value:"items-end",label:"end",getContainerStyle:e=>({flexDirection:e,alignItems:"flex-end",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Bt,{isCol:t,w:13,h:22}),u.jsx(Bt,{isCol:t,w:15,h:42}),u.jsx(Bt,{isCol:t,w:11,h:14})]})}}];function Y0({currentValue:e,lockedValue:t,locked:n,flexDirection:r="row",onHover:o,onLeave:l,onClick:s,onRemove:i,onRemoveHover:a}){const[c,d]=w.useState(!1),{refs:p,floatingStyles:f,context:g}=hn({open:c,onOpenChange:A=>{A||(d(!1),l())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),v=sr(g),{getReferenceProps:b,getFloatingProps:S}=ir([v]),h=t!==null&&Td.some(A=>A.value===t),m=n&&!h,y=!h&&(e===null||e===""),x=h?t:e??"",j=Td.find(A=>A.value===x),k=(j==null?void 0:j.label)??"—";function C(){d(!1),l()}function N(){m||d(A=>(A&&l(),!A))}const $={...$t,borderStyle:"dashed",alignItems:"center",justifyContent:"center"};return u.jsxs("div",{className:"flex flex-col items-start gap-1",children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,fontWeight:500},children:"JUSTIFY →"}),u.jsx("div",{ref:p.setReference,className:"cursor-pointer",role:"button",tabIndex:m?-1:0,onKeyDown:A=>{(A.key==="Enter"||A.key===" ")&&N()},onClick:N,...b(),children:y?u.jsxs("div",{className:"flex flex-col items-center gap-0.5",children:[u.jsx("div",{style:$,children:u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae},children:"—"})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae},children:"none"})]}):u.jsx(Yt,{label:k,isActive:c,containerStyle:(j==null?void 0:j.getContainerStyle(r))??{flexDirection:r},children:A=>(j==null?void 0:j.renderItems(r))??null})}),c&&u.jsx(pn,{children:u.jsx("div",{ref:p.setFloating,style:f,className:"z-[9999]",...S(),children:u.jsxs(fr,{className:"bg-bv-bg border border-bv-border rounded-lg shadow-lg p-2 flex flex-col gap-1",onMouseLeave:l,onClose:C,children:[i&&u.jsxs("div",{className:"flex items-center gap-1.5 px-1.5 py-1 text-[10px] font-mono text-bv-muted border-b border-bv-border mb-1 pb-1.5 cursor-pointer transition-colors duration-150 hover:text-bv-orange",onMouseEnter:a,onMouseLeave:l,onClick:()=>{i(),C()},children:[u.jsxs("svg",{width:"10",height:"10",viewBox:"0 0 10 10",className:"shrink-0",children:[u.jsx("line",{x1:"1",y1:"1",x2:"9",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),u.jsx("line",{x1:"9",y1:"1",x2:"1",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})]}),"remove"]}),u.jsx(U0,{flexDirection:r,activeValue:x,onSelect:A=>{s(A),C()},onHover:o})]})})})]})}function Q0({currentValue:e,lockedValue:t,locked:n,flexDirection:r="row",onHover:o,onLeave:l,onClick:s,onRemove:i,onRemoveHover:a}){const[c,d]=w.useState(!1),{refs:p,floatingStyles:f,context:g}=hn({open:c,onOpenChange:O=>{O||(d(!1),l())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),v=sr(g),{getReferenceProps:b,getFloatingProps:S}=ir([v]),h=t!==null&&Ii.some(O=>O.value===t),m=n&&!h,y=!h&&(e===null||e===""),x=h?t:e??"",j=Ii.find(O=>O.value===x),k=(j==null?void 0:j.label)??"—",C=r;function N(){d(!1),l()}function $(){m||d(O=>(O&&l(),!O))}const A=y?{...$t,borderStyle:"dashed",borderColor:wt,background:Dn,cursor:m?"default":"pointer",alignItems:"center",justifyContent:"center"}:{...$t,borderColor:c?Oe:wt,background:c?"rgba(0,132,139,0.09)":Dn,cursor:m?"default":"pointer",...j?j.getContainerStyle(r):{}};return u.jsxs("div",{style:{display:"inline-flex",flexDirection:"column",alignItems:"center",gap:2},children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Align ↓"}),u.jsx("div",{ref:p.setReference,role:"button",tabIndex:m?-1:0,onKeyDown:O=>{(O.key==="Enter"||O.key===" ")&&$()},onClick:$,...b(),children:u.jsx("div",{style:A,children:y?u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae},children:"—"}):j==null?void 0:j.renderItems(r)})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:c?Oe:Ae,fontWeight:c?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:y?"—":k}),c&&u.jsx(pn,{children:u.jsx("div",{ref:p.setFloating,style:f,className:"z-[9999]",...S(),children:u.jsxs(fr,{className:"bg-bv-bg border border-bv-border rounded-lg shadow-lg p-2 flex flex-col gap-1",onMouseLeave:l,onClose:N,children:[i&&u.jsxs("div",{className:"flex items-center gap-1.5 px-1.5 py-1 text-[10px] font-mono text-bv-muted border-b border-bv-border mb-1 pb-1.5 cursor-pointer transition-colors duration-150 hover:text-bv-orange",onMouseEnter:a,onMouseLeave:l,onClick:()=>{i(),N()},children:[u.jsxs("svg",{width:"10",height:"10",viewBox:"0 0 10 10",className:"shrink-0",children:[u.jsx("line",{x1:"1",y1:"1",x2:"9",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),u.jsx("line",{x1:"9",y1:"1",x2:"1",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})]}),"remove"]}),u.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(5, 60px)",gap:4},children:Ii.map(O=>u.jsx(Yt,{label:O.label,isActive:O.value===x,containerStyle:{flexDirection:C,...O.getContainerStyle(r)},onHover:()=>o(O.value),onClick:()=>{s(O.value),N()},children:F=>O.renderItems(r)},O.value))})]})})})]})}function Nd(e){return e.replace(/^gap-x-/,"x-")}function Rd(e){return e.replace(/^gap-y-/,"y-")}function X0({slots:e,onSlotChange:t,onSlotHover:n,onSlotRemove:r,onSlotRemoveHover:o}){const[l,s]=w.useState(null),[i,a]=w.useState(null),c=e.find(S=>S.key==="gap"),d=e.find(S=>S.key==="gap-x"),p=e.find(S=>S.key==="gap-y");function f(S,h){a(h!=null?S:null),n==null||n(S,h)}function g(S){a(S)}function v(){a(null)}const b=i==="gap-x"?"gm-active-x":i==="gap-y"?"gm-active-y":i==="gap"?"gm-active-gap":"";return u.jsx("div",{className:"gm-root",children:u.jsxs("div",{className:`gm-grid${b?` ${b}`:""}`,children:[u.jsx("div",{className:"gm-col-highlight",style:{gridArea:"1 / 2 / 4 / 3"}}),u.jsx("div",{className:"gm-row-highlight",style:{gridArea:"2 / 1 / 3 / 4"}}),u.jsx("div",{className:"gm-box gm-box-tl",style:{gridArea:"1 / 1"}}),u.jsx("div",{className:"gm-cell",style:{gridArea:"1 / 2"},onMouseEnter:()=>g("gap-x"),onMouseLeave:v,children:(d==null?void 0:d.scaleValues)&&u.jsx(Kr,{placeholder:"x",values:d.scaleValues,currentValue:d.value,displayValue:d.value?Nd(d.value):null,formatValue:Nd,axis:"x",disabled:l!==null&&l!=="gap-x",onHover:S=>f("gap-x",S),onLeave:()=>f("gap-x",null),onClick:S=>t==null?void 0:t("gap-x",S),onOpen:()=>s("gap-x"),onClose:()=>s(null),onScrubStart:()=>s("gap-x"),onScrubEnd:()=>s(null),onRemove:d.value?()=>r==null?void 0:r("gap-x"):void 0,onRemoveHover:d.value?()=>{a(null),o==null||o("gap-x")}:void 0})}),u.jsx("div",{className:"gm-box gm-box-tr",style:{gridArea:"1 / 3"}}),u.jsx("div",{className:"gm-cell",style:{gridArea:"2 / 1"},onMouseEnter:()=>g("gap-y"),onMouseLeave:v,children:(p==null?void 0:p.scaleValues)&&u.jsx(Kr,{placeholder:"y",values:p.scaleValues,currentValue:p.value,displayValue:p.value?Rd(p.value):null,formatValue:Rd,axis:"y",disabled:l!==null&&l!=="gap-y",onHover:S=>f("gap-y",S),onLeave:()=>f("gap-y",null),onClick:S=>t==null?void 0:t("gap-y",S),onOpen:()=>s("gap-y"),onClose:()=>s(null),onScrubStart:()=>s("gap-y"),onScrubEnd:()=>s(null),onRemove:p.value?()=>r==null?void 0:r("gap-y"):void 0,onRemoveHover:p.value?()=>{a(null),o==null||o("gap-y")}:void 0})}),u.jsx("div",{className:"gm-cell",style:{gridArea:"2 / 2"},onMouseEnter:()=>g("gap"),onMouseLeave:v,children:(c==null?void 0:c.scaleValues)&&u.jsx(Kr,{placeholder:"gap",values:c.scaleValues,currentValue:c.value,displayValue:c.value??null,axis:"x",disabled:l!==null&&l!=="gap",onHover:S=>f("gap",S),onLeave:()=>f("gap",null),onClick:S=>t==null?void 0:t("gap",S),onOpen:()=>s("gap"),onClose:()=>s(null),onScrubStart:()=>s("gap"),onScrubEnd:()=>s(null),onRemove:c.value?()=>r==null?void 0:r("gap"):void 0,onRemoveHover:c.value?()=>{a(null),o==null||o("gap")}:void 0})}),u.jsx("div",{className:"gm-box gm-box-bl",style:{gridArea:"3 / 1"}})]})})}const Dh={shadow:"Shadow","inset-shadow":"Inset Shadow",ring:"Ring","inset-ring":"Inset Ring","text-shadow":"Text Shadow"},Pd={shadow:"shadow-md","inset-shadow":"inset-shadow-sm",ring:"ring-2","inset-ring":"inset-ring-2","text-shadow":"text-shadow-md"};function Z0(e){switch(e){case"shadow":return[...Iu];case"inset-shadow":return[...Zp];case"ring":return[...Na];case"inset-ring":return[...Na];case"text-shadow":return[...Ou]}}function _d(e,t){return`${e==="shadow"?"shadow-":e==="inset-shadow"?"inset-shadow-":e==="ring"?"ring-":e==="inset-ring"?"inset-ring-":"text-shadow-"}${t}`}function J0(e,t){const n=e==="shadow"?"shadow-":e==="inset-shadow"?"inset-shadow-":e==="ring"?"ring-":e==="inset-ring"?"inset-ring-":"text-shadow-";return t.startsWith(n)?t.slice(n.length):t}function q0(e){if(e.isNone||!e.sizeClass)return"none";const t=r=>{if(!e.colorHex)return r;if(e.opacity!==null&&e.opacity<100){const o=(e.opacity/100).toFixed(2),l=parseInt(e.colorHex.slice(1,3),16),s=parseInt(e.colorHex.slice(3,5),16),i=parseInt(e.colorHex.slice(5,7),16);return`rgba(${l},${s},${i},${o})`}return e.colorHex},n=e.colorHex?t(e.colorHex):void 0;switch(e.type){case"shadow":{const r=bo(e.sizeClass,"shadow-");return n1(r,n)}case"inset-shadow":{const r=bo(e.sizeClass,"inset-shadow-");return r1(r,n)}case"ring":{const r=bo(e.sizeClass,"ring-");return`0 0 0 ${r==="0"?0:Number(r)||1}px ${n??"rgba(99,102,241,0.5)"}`}case"inset-ring":{const r=bo(e.sizeClass,"inset-ring-");return`inset 0 0 0 ${r==="0"?0:Number(r)||1}px ${n??"rgba(99,102,241,0.5)"}`}case"text-shadow":return"none"}}function e1(e){if(e.isNone||!e.sizeClass)return"none";const t=o=>{if(!e.colorHex)return o;if(e.opacity!==null&&e.opacity<100){const l=(e.opacity/100).toFixed(2),s=parseInt(e.colorHex.slice(1,3),16),i=parseInt(e.colorHex.slice(3,5),16),a=parseInt(e.colorHex.slice(5,7),16);return`rgba(${s},${i},${a},${l})`}return e.colorHex},n=e.colorHex?t(e.colorHex):void 0,r=bo(e.sizeClass,"text-shadow-");return t1(r,n)}function t1(e,t){const n=t??"rgba(0,0,0,0.25)";return{"2xs":`0 1px 0 ${n}`,xs:`0 1px 1px ${n}`,sm:`0 1px 2px ${n}`,md:`0 2px 4px ${n}`,lg:`0 4px 6px ${n}`}[e]??"none"}function bo(e,t){return e.startsWith(t)?e.slice(t.length):e}function n1(e,t){const n=t??"rgba(0,0,0,0.15)";return{"2xs":`0 1px ${n}`,xs:`0 1px 2px 0 ${n}`,sm:`0 1px 3px 0 ${n}, 0 1px 2px -1px ${n}`,md:`0 4px 6px -1px ${n}, 0 2px 4px -2px ${n}`,lg:`0 10px 15px -3px ${n}, 0 4px 6px -4px ${n}`,xl:`0 20px 25px -5px ${n}, 0 8px 10px -6px ${n}`,"2xl":`0 25px 50px -12px ${n}`}[e]??"none"}function r1(e,t){const n=t??"rgba(0,0,0,0.05)";return{"2xs":`inset 0 0.5px ${n}`,xs:`inset 0 1px 1px ${n}`,sm:`inset 0 2px 4px ${n}`}[e]??"none"}const o1=Array.from({length:21},(e,t)=>`${t*5}%`);function l1({layer:e,onSizeHover:t,onSizeLeave:n,onSizeClick:r,onColorClick:o,onOpacityHover:l,onOpacityLeave:s,onOpacityClick:i,onRemove:a,onRemoveHover:c}){const[d,p]=w.useState(!1),f=w.useRef(),g={onMouseEnter:()=>{clearTimeout(f.current),p(!0)},onMouseLeave:()=>{f.current=setTimeout(()=>p(!1),60)}},v=Z0(e.type),b=q0(e),S=e.type==="text-shadow"?e1(e):"none",h=e.isNone,m=e.sizeClass?J0(e.type,e.sizeClass):v[0],y=!!e.colorHex,x=e.opacity!==null?`${e.opacity}%`:"100%",j=e.colorHex??void 0;function k(N){t(_d(e.type,N))}function C(N){r(_d(e.type,N))}return u.jsxs(u.Fragment,{children:[u.jsx("span",{className:"flex items-center justify-center",...g,children:u.jsx("span",{className:"w-1 h-1 rounded-full bg-bv-orange"})}),u.jsx("span",{className:"flex items-center text-[9px] font-semibold uppercase tracking-[0.8px] text-bv-text-mid font-mono whitespace-nowrap",...g,children:Dh[e.type]}),u.jsx("span",{className:"flex items-center",...g,children:u.jsx(xn,{values:v,currentValue:m,lockedValue:null,locked:!1,onHover:k,onLeave:n,onClick:C})}),u.jsx("button",{type:"button",className:`w-[26px] h-[26px] rounded-[5px] border shrink-0 cursor-pointer transition-[border-color] ${e.colorHex?"border-bv-border hover:border-bv-teal":"border-dashed border-bv-border hover:border-bv-teal"} ${h?"opacity-30 pointer-events-none":""}`,onClick:N=>o(N.currentTarget),title:e.colorClass?e.colorClass:"Default color — click to override",...g,children:e.colorHex?u.jsx("div",{className:"w-full h-full rounded-[4px]",style:{background:j,opacity:e.opacity!==null?e.opacity/100:1}}):u.jsx("div",{className:"w-full h-full rounded-[4px] flex items-center justify-center",children:u.jsx("span",{className:"w-2 h-2 rounded-full bg-bv-text-mid opacity-40"})})}),u.jsx("span",{className:`flex items-center ${h||!y?"opacity-30 pointer-events-none":""}`,...g,children:y&&!h?u.jsx(xn,{values:o1,currentValue:x,lockedValue:null,locked:!1,onHover:l,onLeave:s,onClick:i}):u.jsx("span",{className:"flex items-center justify-center w-full h-[26px] bg-bv-surface border border-bv-border rounded-[5px]",children:u.jsx("span",{className:"font-mono text-[11px] text-bv-muted select-none",children:"—"})})}),u.jsx("span",{className:"ml-4 flex w-[26px] h-[26px] rounded-[5px] bg-bv-surface-hi border border-bv-border transition-[box-shadow] duration-200 items-center justify-center overflow-hidden",style:e.type==="text-shadow"?{}:{boxShadow:b},title:`Preview: ${e.sizeClass??""} ${e.colorClass??""}`.trim(),...g,children:e.type==="text-shadow"&&u.jsx("span",{className:"text-[11px] font-semibold text-bv-text select-none transition-[text-shadow] duration-200",style:{textShadow:S},children:"Aa"})}),u.jsx("button",{type:"button",className:`ml-4 w-[18px] h-[18px] rounded-[3px] border-none bg-transparent text-bv-muted text-xs cursor-pointer flex items-center justify-center transition-all hover:text-bv-orange hover:bg-bv-orange/10 ${d?"opacity-100":"opacity-0"}`,onClick:a,onMouseEnter:()=>{clearTimeout(f.current),p(!0),c()},onMouseLeave:()=>{f.current=setTimeout(()=>p(!1),60)},title:"Remove layer",children:"×"})]})}const s1=["shadow","inset-shadow","ring","inset-ring","text-shadow"];function i1({layers:e,onPreview:t,onRevert:n,onStage:r,onAdd:o,onRemove:l,onRemoveHover:s,onColorClick:i}){function a(d){const p=[];return d.sizeClass&&p.push(d.sizeClass),d.colorClass&&p.push(d.opacity!==null?`${d.colorClass}/${d.opacity}`:d.colorClass),p}const c=s1.map(d=>({type:d,layer:e.find(p=>p.type===d)}));return u.jsx("div",{className:"grid items-center gap-x-1.5 gap-y-1",style:{gridTemplateColumns:"16px auto 1fr 26px 1fr 26px 18px"},children:c.map(({type:d,layer:p},f)=>u.jsxs(w.Fragment,{children:[f>0&&u.jsx("div",{className:"h-px bg-bv-border opacity-50",style:{gridColumn:"1 / -1"}}),p?u.jsx(l1,{layer:p,onSizeHover:g=>t(p.sizeClass??"",g),onSizeLeave:n,onSizeClick:g=>r(p.sizeClass??"",g),onColorClick:g=>i==null?void 0:i(p,g),onOpacityHover:g=>{if(!p.colorClass)return;const v=p.colorClass.split("/")[0],b=parseInt(g),S=b===100?v:`${v}/${b}`,h=p.opacity!==null?`${v}/${p.opacity}`:v;t(h,S)},onOpacityLeave:n,onOpacityClick:g=>{if(!p.colorClass)return;const v=p.colorClass.split("/")[0],b=parseInt(g),S=b===100?v:`${v}/${b}`,h=p.opacity!==null?`${v}/${p.opacity}`:v;r(h,S)},onRemove:()=>l(a(p)),onRemoveHover:()=>s(a(p))}):u.jsxs(u.Fragment,{children:[u.jsx("button",{type:"button",className:"w-4 h-4 rounded-[3px] border border-dashed border-bv-border bg-transparent text-bv-muted text-[11px] cursor-pointer flex items-center justify-center transition-all hover:border-bv-teal hover:border-solid hover:text-bv-teal hover:bg-bv-teal/10",onClick:()=>o(Pd[d]),title:`Add ${Pd[d]}`,children:"+"}),u.jsx("div",{className:"flex items-center leading-none text-[9px] font-mono uppercase tracking-[0.6px] text-bv-muted whitespace-nowrap",children:Dh[d]})]})]},d))})}const Ad=[{prop:"shadow",prefix:"shadow-",sizeSet:ps},{prop:"inset-shadow",prefix:"inset-shadow-",sizeSet:hs},{prop:"ring",prefix:"ring-",sizeSet:Yr},{prop:"inset-ring",prefix:"inset-ring-",sizeSet:Yr},{prop:"text-shadow",prefix:"text-shadow-",sizeSet:ms}];function yr(e,t,n,r,o){if(!t)return n?[...e,n]:e;if(e.includes(t))return n?e.map(c=>c===t?n:c):e.filter(c=>c!==t);if(e.length===0)return n?[n]:[];const l=t.startsWith(r)?t.slice(r.length).split("/")[0]:"",s=o.has(l);let i=!1;const a=e.flatMap(c=>{const d=c.startsWith(r)?c.slice(r.length).split("/")[0]:"";return o.has(d)===s&&!i?(i=!0,n?[n]:[]):[c]});return i?a:n?[...e,n]:e}function a1(e,t){if(!t)return null;const n=e.lastIndexOf("-");if(n===-1){const i=t[e];return typeof i=="string"?i:null}const r=e.slice(0,n),o=e.slice(n+1),l=t[r];if(!l)return null;if(typeof l=="string")return l;const s=l[o];return typeof s=="string"?s:null}function u1(e,t){const n=e.trim().split(/\s+/).filter(Boolean),r=t==null?void 0:t.colors,o=[{type:"shadow",prefix:"shadow-",sizeSet:ps},{type:"inset-shadow",prefix:"inset-shadow-",sizeSet:hs},{type:"ring",prefix:"ring-",sizeSet:Yr},{type:"inset-ring",prefix:"inset-ring-",sizeSet:Yr},{type:"text-shadow",prefix:"text-shadow-",sizeSet:ms}],l=[];for(const{type:s,prefix:i,sizeSet:a}of o){const c=n.filter(v=>v===i.slice(0,-1)||v.startsWith(i));if(c.length===0)continue;let d=null,p=null,f=null,g=null;for(const v of c){const S=v.slice(i.length).split("/")[0];if(a.has(S))d=v;else{p=v;const h=v.split("/");h.length===2&&(g=parseInt(h[1])),f=a1(S,r??null)}}l.push({type:s,sizeClass:d,colorClass:p,colorHex:f,opacity:g,isNone:d!==null&&(d.endsWith("-none")||d.endsWith("-0"))})}return l}function c1(e,t){const n=new Set(["shadow","inset-shadow","ring","inset-ring","text-shadow","shadow-size","shadow-color","inset-shadow-size","inset-shadow-color","ring-size","ring-color","inset-ring-size","inset-ring-color","text-shadow-size","text-shadow-color"]),r=t.filter(s=>n.has(s.property)),o=e.trim().split(/\s+/).filter(Boolean),l=o.filter(s=>!Ad.some(({prefix:i})=>s===i.slice(0,-1)||s.startsWith(i)));for(const{prop:s,prefix:i,sizeSet:a}of Ad){const c=r.find(v=>v.property===s),d=r.find(v=>v.property===`${s}-size`),p=r.find(v=>v.property===`${s}-color`),f=o.filter(v=>v===i.slice(0,-1)||v.startsWith(i));if(c){if(c.newClass)l.push(...yr(f,c.originalClass,c.newClass,i,a));else{const v=c.originalClass.startsWith(i)?c.originalClass.slice(i.length).split("/")[0]:"";a.has(v)||!c.originalClass||l.push(...yr(f,c.originalClass,c.newClass,i,a))}continue}let g=[...f];d&&(d.newClass?g=yr(g,d.originalClass,d.newClass,i,a):d.originalClass&&(g=yr(g,d.originalClass,"",i,a))),p&&(p.newClass?g=yr(g,p.originalClass,p.newClass,i,a):p.originalClass&&(g=yr(g,p.originalClass,"",i,a))),l.push(...g)}return l.join(" ")}const d1={spacing:"Spacing",sizing:"Sizing",typography:"Typography",color:"Backgrounds",borders:"Radius",effects:"Effects",layout:"Layout",flexbox:"Flexbox & Grid",overflow:"Overflow"},f1=["layout","borders","sizing","typography","color","flexbox","shadows","effects"];function Ld(e){const t=e.scale??e.color??e.style??e.align??e.size??e.value;return t?e.fullClass.slice(0,e.fullClass.length-t.length):e.property+"-"}function p1(e){return e.section==="spacing"||e.property==="border"||e.property==="rounded"||e.property==="bg"||e.property==="bg-gradient-to"||e.property==="from"||e.property==="via"||e.property==="to"||e.property==="shadow"||e.property==="text-shadow"}function Hn(e){const t=e.filter(s=>s.property==="rounded"),n=[{prefix:/^rounded-tl(-|$)/,key:"tl"},{prefix:/^rounded-tr(-|$)/,key:"tr"},{prefix:/^rounded-br(-|$)/,key:"br"},{prefix:/^rounded-bl(-|$)/,key:"bl"},{prefix:/^rounded-t(-|$)/,key:"t"},{prefix:/^rounded-r(-|$)/,key:"r"},{prefix:/^rounded-b(-|$)/,key:"b"},{prefix:/^rounded-l(-|$)/,key:"l"}],r=new Map;let o=null;for(const s of t){const i=s.fullClass,a=n.find(c=>c.prefix.test(i));a?r.set(a.key,i):o=i}return{shorthandValue:o,shorthandScaleValues:Ra,slots:["all","t","r","b","l","tl","tr","br","bl"].map(s=>({key:s,value:s==="all"?o:r.get(s)??null,placeholder:s,scaleValues:s==="all"?Ra:Ry(`rounded-${s}`)}))}}const Vn=a0(),Mh=u0(),h1={"text-size":{scaleName:"fontSize",valueType:"scalar"},"text-color":{scaleName:null,valueType:"color"}};Mh.typography.unshift({name:"Font size",prefixHint:"text-sm/base/lg/…",prefix:"text-size"},{name:"Text color",prefixHint:"text-{color}",prefix:"text-color"});function Wl(e){const t=h1[e];if(t)return{...t,stagingKey:e};const n=Object.entries(ar).find(([o,l])=>(l.propertyKey??o.replace(/-$/g,""))===e&&l.addable);if(n){const[o,l]=n;return{scaleName:l.themeKey,valueType:l.valueType,enumAlts:l.enumAlts,stagingKey:e}}const r=ar[e];return r?{scaleName:r.themeKey,valueType:r.valueType,enumAlts:r.enumAlts,stagingKey:e.replace(/-$/g,"")}:null}function m1(e,t,n,r){const o=new Set(t.map(s=>s.fullClass)),l=new Set(t.map(s=>s.property));return e.filter(s=>{if(n.has(s.prefix)||r!=null&&r.has(s.prefix))return!1;const i=Wl(s.prefix);if((i==null?void 0:i.valueType)==="enum"&&i.enumAlts)return!i.enumAlts.some(a=>o.has(a));if(i&&i.valueType!=="enum"){if(s.prefix==="text-size")return!t.some(a=>a.property==="text"&&a.scaleName==="fontSize");if(s.prefix==="text-color")return!t.some(a=>a.property==="text"&&a.color!==void 0)}return!l.has(s.prefix.replace(/-$/g,""))})}function g1(e){const t=new Map;for(const n of e){const r=n.section??"unknown",o=t.get(r)||[];o.push(n),t.set(r,o)}return t}function y1({componentName:e,instanceCount:t,rawClasses:n,parsedClasses:r,tailwindConfig:o,patchManager:l}){var re,le;const[s,i]=w.useState(null),[a,c]=w.useState(new Map),[d,p]=w.useState(new Map),[f,g]=w.useState(null),[v,b]=w.useState(null),[S,h]=w.useState(null),m=w.useRef(null),{refs:y,floatingStyles:x,context:j}=hn({open:f!==null,onOpenChange:E=>{E||(g(null),l.revertPreview())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8}),Ma({apply({availableHeight:E,elements:D}){Object.assign(D.floating.style,{maxHeight:`${E}px`})},padding:8})],whileElementsMounted:un}),k=sr(j),{getFloatingProps:C}=ir([k]);w.useEffect(()=>{f!=null&&f.anchorEl&&y.setReference(f.anchorEl)},[f==null?void 0:f.anchorEl]);const{refs:N,floatingStyles:$,context:A}=hn({open:v!==null||S!==null,onOpenChange:E=>{E||(b(null),h(null),l.revertPreview())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8}),Ma({apply({availableHeight:E,elements:D}){Object.assign(D.floating.style,{maxHeight:`${E}px`})},padding:8})],whileElementsMounted:un}),O=sr(A),{getFloatingProps:F}=ir([O]);w.useEffect(()=>{const E=(v==null?void 0:v.anchorEl)??(S==null?void 0:S.anchorEl);E&&N.setReference(E)},[v==null?void 0:v.anchorEl,S==null?void 0:S.anchorEl]);const[T,_]=w.useState(new Set),[U,W]=w.useState(!1),J=w.useRef(r.map(E=>E.fullClass).join(" ")),R=r.map(E=>E.fullClass).join(" ");w.useEffect(()=>{J.current!==R&&(J.current=R,l.revertPreview(),c(new Map),p(new Map),g(null),b(null),_(new Set))});const I=e,P=l.patches.filter(E=>E.status==="staged"&&E.elementKey===I),G=new Set(P.filter(E=>E.originalClass==="").map(E=>E.property));function q(E,D){const z=P.find(ge=>ge.property===E),X=(D==null?void 0:D.fullClass)??(z==null?void 0:z.originalClass)??"",te=(z==null?void 0:z.newClass)??(D==null?void 0:D.fullClass)??"";return{originalClass:X,effectiveClass:te,hasValue:te!==""}}function Qe(E){return a.size===0?E:E.map(D=>{const z=a.get(`${D.layer}-shorthand`),X=D.slots.map(ge=>{const ke=a.get(`${D.layer}-${ge.key}`);return ke!==void 0?{...ge,value:ke}:ge}),te=z??D.shorthandValue;let de=D.classState;return z!==void 0&&(de=X.some(ke=>ke.value!=null)?"mixed":"shorthand"),{...D,shorthandValue:te,classState:de,slots:X}})}function ze(E){if(d.size===0)return E;const D=d.get("all");return{...E,shorthandValue:D===void 0?E.shorthandValue:D,slots:E.slots.map(z=>{const X=d.get(z.key);return X===void 0?z:{...z,value:X}})}}const je=g1(r);function ae(E,D){l.preview(E,D)}function Re(){l.revertPreview()}function me(E,D,z){l.stage(I,E,D,z)}function eo(E,D){const z=E||D,X=z.startsWith("bg-gradient-to-")?"bg-gradient-to-":z.startsWith("from-")?"from-":z.startsWith("via-")?"via-":z.startsWith("to-")?"to-":"bg-";me(X,E,D)}function to(E,D){l.revertPreview(),pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),E.color!==void 0&&D?(b(z=>(z==null?void 0:z.cls.fullClass)===E.fullClass?null:{cls:E,anchorEl:D}),i(null)):(b(null),i(E))}function pr(E,D){l.preview(E.fullClass,D)}function no(E){l.revertPreview()}function ro(E){const D=ar[E];if(!((D==null?void 0:D.controlGroup)==="flex-container"&&(D==null?void 0:D.propertyKey)==="display")){if((D==null?void 0:D.controlGroup)==="flex-container"){const z=r.some(te=>te.fullClass==="flex"||te.fullClass==="inline-flex"),X=P.some(te=>te.property==="display"&&te.originalClass===""&&(te.newClass==="flex"||te.newClass==="inline-flex"));!z&&!X&&l.stage(I,"display","","flex")}}_(z=>new Set(z).add(E))}function Ft(E,D){l.preview("",D)}function Kn(E){l.revertPreview()}function ee(E,D){const z=Wl(E);l.stage(I,(z==null?void 0:z.stagingKey)??E,"",D),_(X=>{const te=new Set(X);return te.delete(E),te})}return u.jsxs("div",{className:"divide-y divide-bv-border",children:[u.jsxs("div",{className:"px-4 py-3",children:[u.jsxs("div",{className:"flex items-center gap-1.5 cursor-pointer select-none",onClick:()=>W(E=>!E),children:[u.jsx("svg",{className:`w-3 h-3 text-bv-muted transition-transform ${U?"":"rotate-90"}`,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:u.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M9 5l7 7-7 7"})}),u.jsx("span",{className:"text-[10px] font-semibold text-bv-text",children:"Box model"})]}),u.jsx("div",{className:`overflow-hidden transition-[max-height,opacity] duration-200 ease-in-out ${U?"max-h-0 opacity-0":"max-h-[600px] opacity-100"}`,children:u.jsxs("div",{className:"mt-3",children:[u.jsx(w0,{layers:Qe(gr(r,o)),onEditStart:()=>{pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),g(null)},onSlotClick:(E,D,z)=>{var ke;if(D!=="color"||!z){g(null);return}const X=gr(r,o).find(tt=>tt.layer===E),te=`${E}-color`,de=a.get(te)??((ke=X==null?void 0:X.slots.find(tt=>tt.key==="color"))==null?void 0:ke.value)??"",ge=E==="outline"?"outline-":"border-";g(tt=>(tt==null?void 0:tt.layer)===E?null:{layer:E,prefix:ge,currentClass:de,staged:!1,anchorEl:z})},onSlotHover:(E,D,z)=>{var X;if(z===null)l.revertPreview();else{const te=`${E}-${D}`,de=gr(r,o).find(ke=>ke.layer===E),ge=D==="shorthand"?a.get(te)??(de==null?void 0:de.shorthandValue):a.get(te)??((X=de==null?void 0:de.slots.find(ke=>ke.key===D))==null?void 0:X.value);l.preview(ge??"",z)}},onSlotChange:(E,D,z)=>{var ge;const X=`${E}-${D}`,te=gr(r,o).find(ke=>ke.layer===E),de=D==="shorthand"?a.get(X)??(te==null?void 0:te.shorthandValue):a.get(X)??((ge=te==null?void 0:te.slots.find(ke=>ke.key===D))==null?void 0:ge.value);me(`${E}-${D}`,de??"",z),c(ke=>new Map(ke).set(X,z))},onSlotRemoveHover:(E,D)=>{var de;const z=`${E}-${D}`,X=gr(r,o).find(ge=>ge.layer===E),te=D==="shorthand"?a.get(z)??(X==null?void 0:X.shorthandValue):a.get(z)??((de=X==null?void 0:X.slots.find(ge=>ge.key===D))==null?void 0:de.value);te&&l.preview(te,"")},onSlotRemove:(E,D)=>{var de;const z=`${E}-${D}`,X=gr(r,o).find(ge=>ge.layer===E),te=D==="shorthand"?a.get(z)??(X==null?void 0:X.shorthandValue):a.get(z)??((de=X==null?void 0:X.slots.find(ge=>ge.key===D))==null?void 0:de.value);te&&(me(`${E}-${D}`,te,""),c(ge=>{const ke=new Map(ge);return ke.delete(z),ke}))}}),f&&u.jsx(pn,{children:u.jsx("div",{ref:y.setFloating,style:{...x,zIndex:9999,overflowY:"auto"},...C(),children:u.jsx(Fl,{prefix:f.prefix,currentValue:f.currentClass.startsWith(f.prefix)?f.currentClass.slice(f.prefix.length):"",colors:(o==null?void 0:o.colors)||{},locked:!1,lockedValue:((re=P.find(E=>E.property===f.prefix))==null?void 0:re.newClass)??null,onHover:E=>{m.current=E,l.preview(f.currentClass,E)},onLeave:()=>{f.staged&&m.current?(l.preview(m.current,f.currentClass),m.current=null):l.revertPreview()},onClick:E=>{const D=`${f.layer}-color`;me(f.prefix,f.currentClass,E),c(z=>new Map(z).set(D,E)),g(z=>z?{...z,currentClass:E,staged:!0}:null)}})})})]})})]}),(v||S)&&u.jsx(pn,{children:u.jsxs("div",{ref:N.setFloating,style:{...$,zIndex:9999,overflowY:"auto"},...F(),children:[v&&u.jsx(Fl,{prefix:Ld(v.cls),currentValue:v.cls.color??"",colors:(o==null?void 0:o.colors)||{},locked:!1,lockedValue:((le=P.find(E=>E.property===v.cls.property))==null?void 0:le.newClass)??null,onHover:E=>ae(v.cls.fullClass,E),onLeave:Re,onClick:E=>me(v.cls.property,v.cls.fullClass,E),onRemoveHover:()=>ae(v.cls.fullClass,""),onRemove:()=>{me(v.cls.property,v.cls.fullClass,""),b(null)}}),S&&(()=>{const{layer:E}=S,D=E.type==="shadow"?"shadow-":E.type==="inset-shadow"?"inset-shadow-":E.type==="ring"?"ring-":E.type==="text-shadow"?"text-shadow-":"inset-ring-",z=E.colorClass??"",X=z?z.slice(D.length).split("/")[0]:"";return u.jsx(Fl,{prefix:D,currentValue:X,colors:(o==null?void 0:o.colors)||{},locked:!1,lockedValue:null,onHover:te=>ae(z,te),onLeave:Re,onClick:te=>{const de=E.type==="shadow"?"shadow-color":E.type==="inset-shadow"?"inset-shadow-color":E.type==="ring"?"ring-color":E.type==="text-shadow"?"text-shadow-color":"inset-ring-color";l.stage(I,de,z,te),h(null)},onRemoveHover:()=>{z&&ae(z,"")},onRemove:()=>{if(z){const te=E.type==="shadow"?"shadow-color":E.type==="inset-shadow"?"inset-shadow-color":E.type==="ring"?"ring-color":E.type==="text-shadow"?"text-shadow-color":"inset-ring-color";l.stage(I,te,z,"")}h(null)}})})()]})}),f1.map(E=>{if(E==="shadows"){const L=c1(n,P),Q=u1(L,o);return u.jsx(jd,{label:"Shadows & Rings",onAddProperty:()=>{},isEmpty:!1,classCount:Q.length,children:u.jsx(i1,{layers:Q,onPreview:(V,B)=>l.preview(V,B),onRevert:()=>l.revertPreview(),onStage:(V,B)=>{const ue=V||B,oe=Ve=>{if(Ve.startsWith("shadow-")){const Ke=Ve.slice(7).split("/")[0];return ps.has(Ke)}if(Ve.startsWith("inset-shadow-")){const Ke=Ve.slice(13).split("/")[0];return hs.has(Ke)}if(Ve.startsWith("ring-")||Ve.startsWith("inset-ring-")){const Ke=Ve.slice(Ve.startsWith("ring-")?5:11).split("/")[0];return Yr.has(Ke)}if(Ve.startsWith("text-shadow-")){const Ke=Ve.slice(12).split("/")[0];return ms.has(Ke)}return!1},De=ue.startsWith("text-shadow")?"text-shadow":ue.startsWith("inset-shadow")?"inset-shadow":ue.startsWith("inset-ring")?"inset-ring":ue.startsWith("ring")?"ring":"shadow",Wt=oe(V)||V===""&&oe(B)?`${De}-size`:`${De}-color`;l.stage(I,Wt,V,B)},onAdd:V=>{const B=V.startsWith("text-shadow")?"text-shadow-size":V.startsWith("inset-shadow")?"inset-shadow-size":V.startsWith("inset-ring")?"inset-ring-size":V.startsWith("ring")?"ring-size":"shadow-size";l.stage(I,B,"",V)},onRemove:V=>{const B=oe=>{if(oe.startsWith("shadow-")){const De=oe.slice(7).split("/")[0];return ps.has(De)}if(oe.startsWith("inset-shadow-")){const De=oe.slice(13).split("/")[0];return hs.has(De)}if(oe.startsWith("ring-")||oe.startsWith("inset-ring-")){const De=oe.slice(oe.startsWith("ring-")?5:11).split("/")[0];return Yr.has(De)}if(oe.startsWith("text-shadow-")){const De=oe.slice(12).split("/")[0];return ms.has(De)}return!1},ue=[...V].reverse();for(const oe of ue){const De=oe.startsWith("text-shadow")?"text-shadow":oe.startsWith("inset-shadow")?"inset-shadow":oe.startsWith("inset-ring")?"inset-ring":oe.startsWith("ring")?"ring":"shadow",Wt=B(oe)?`${De}-size`:`${De}-color`;l.stage(I,Wt,oe,"")}},onRemoveHover:V=>{V.length===1?l.preview(V[0],""):V.length>1&&l.preview(V.join(" "),"")},onColorClick:(V,B)=>{b(null),h(ue=>(ue==null?void 0:ue.layer.type)===V.type?null:{layer:V,anchorEl:B})}})},"shadows")}const z=(je.get(E)||[]).filter(L=>!p1(L)),X=Mh[E]||[],te=s0.get("flex-container")??new Set,de=i0.get("flex-container")??new Set,ge=r.some(L=>{if(L.fullClass==="flex"||L.fullClass==="inline-flex")return!0;const Q=Vn[L.fullClass];return!!(Q&&Q.propertyKey!=="display"&&te.has(Q.propertyKey)||te.has(L.property))}),ke=[...de].some(L=>T.has(L)||G.has(L.replace(/-$/,""))),tt=E==="flexbox"&&(ge||ke),$h=tt?X.filter(L=>!de.has(L.prefix)):X,zh=m1($h,z,T,G),Bs=X.filter(L=>T.has(L.prefix)).map(L=>L.prefix),Us=X.filter(L=>G.has(L.prefix.replace(/-$/g,""))).map(L=>L.prefix),Kh=E==="color"||E==="flexbox"&&tt||E==="borders"?!1:z.length===0&&Bs.length===0&&Us.length===0,Fh=E==="borders"?Hn(r).slots.filter(L=>L.value!=null).length+(Hn(r).shorthandValue?1:0):z.length+Bs.length+Us.length;return u.jsxs(jd,{label:d1[E]??E,availableProperties:zh,onAddProperty:ro,isEmpty:Kh,classCount:Fh,children:[E==="borders"&&u.jsx(R0,{state:ze(Hn(r)),onSlotHover:(L,Q)=>{var oe;const V=Hn(r),ue=(L==="all"?d.get("all")??V.shorthandValue:d.get(L)??((oe=V.slots.find(De=>De.key===L))==null?void 0:oe.value)??null)??"";Q===null?l.revertPreview():l.preview(ue,Q)},onSlotChange:(L,Q)=>{var ue;const V=Hn(r),B=d.get(L)??(L==="all"?V.shorthandValue:(ue=V.slots.find(oe=>oe.key===L))==null?void 0:ue.value)??"";me(`rounded-${L}`,B,Q),p(oe=>new Map(oe).set(L,Q))},onSlotRemove:L=>{var V;const Q=d.get(L)??((V=Hn(r).slots.find(B=>B.key===L))==null?void 0:V.value)??"";Q&&(me(`rounded-${L}`,Q,""),p(B=>new Map(B).set(L,null)))},onSlotRemoveHover:L=>{var V;const Q=d.get(L)??((V=Hn(r).slots.find(B=>B.key===L))==null?void 0:V.value)??"";Q&&l.preview(Q,"")},onEditStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"})}),E==="color"&&u.jsx(M0,{...$0(r,(o==null?void 0:o.colors)||{},P.filter(L=>L.elementKey===I)),onPreview:ae,onPreviewBatch:L=>l.previewBatch(L),onRevert:Re,onStage:eo}),E==="flexbox"&&tt&&(()=>{const L=r,Q=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="flex-direction"}),V=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="justify-content"}),B=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="align-items"}),ue=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="flex-wrap"}),oe={"flex-row":"row","flex-col":"column","flex-row-reverse":"row-reverse","flex-col-reverse":"column-reverse"},De=(Q==null?void 0:Q.fullClass)??null,ol=De?oe[De]??"row":"row",Wt=q("flex-direction",Q),Ve=q("flex-wrap",ue),Ke=q("justify-content",V),Ht=q("align-items",B),Wh=r.find(ne=>ne.property==="gap"),Hh=r.find(ne=>ne.property==="gap-x"),Vh=r.find(ne=>ne.property==="gap-y"),oo=q("gap",Wh),lo=q("gap-x",Hh),so=q("gap-y",Vh),Bh=[{key:"gap",value:oo.effectiveClass||null,scaleValues:mr("gap-","spacing",o)},{key:"gap-x",value:lo.effectiveClass||null,scaleValues:mr("gap-x-","spacing",o)},{key:"gap-y",value:so.effectiveClass||null,scaleValues:mr("gap-y-","spacing",o)}];return u.jsxs(u.Fragment,{children:[u.jsxs("div",{className:"flex justify-between items-start w-full",children:[u.jsx(F0,{currentValue:(Q==null?void 0:Q.fullClass)??null,lockedValue:Wt.effectiveClass!==Wt.originalClass?Wt.effectiveClass:null,locked:!1,onHover:ne=>ae(Wt.effectiveClass,ne),onLeave:Re,onClick:ne=>me("flex-direction",Wt.originalClass,ne)}),u.jsx(B0,{currentValue:(ue==null?void 0:ue.fullClass)??null,lockedValue:Ve.effectiveClass!==Ve.originalClass?Ve.effectiveClass:null,locked:!1,onHover:ne=>ae(Ve.effectiveClass,ne),onLeave:Re,onClick:ne=>me("flex-wrap",Ve.originalClass,ne)}),u.jsx(Y0,{currentValue:(V==null?void 0:V.fullClass)??null,lockedValue:Ke.effectiveClass!==Ke.originalClass?Ke.effectiveClass:null,locked:!1,flexDirection:ol,onHover:ne=>ae(Ke.effectiveClass,ne),onLeave:Re,onClick:ne=>me("justify-content",Ke.originalClass,ne),onRemove:Ke.hasValue?()=>me("justify-content",Ke.originalClass,""):void 0,onRemoveHover:Ke.hasValue?()=>ae(Ke.effectiveClass,""):void 0}),u.jsx(Q0,{currentValue:(B==null?void 0:B.fullClass)??null,lockedValue:Ht.effectiveClass!==Ht.originalClass?Ht.effectiveClass:null,locked:!1,flexDirection:ol,onHover:ne=>ae(Ht.effectiveClass,ne),onLeave:Re,onClick:ne=>me("align-items",Ht.originalClass,ne),onRemove:Ht.hasValue?()=>me("align-items",Ht.originalClass,""):void 0,onRemoveHover:Ht.hasValue?()=>ae(Ht.effectiveClass,""):void 0})]}),u.jsx("div",{className:"h-px w-full bg-bv-border opacity-50 my-2"}),u.jsx(X0,{slots:Bh,onSlotHover:(ne,fe)=>{const Ku=ne==="gap"?oo:ne==="gap-x"?lo:so;fe===null?l.revertPreview():l.preview(Ku.effectiveClass,fe)},onSlotRemoveHover:ne=>{const fe=ne==="gap"?oo:ne==="gap-x"?lo:so;fe.hasValue&&l.preview(fe.effectiveClass,"")},onSlotChange:(ne,fe)=>{me(ne,(ne==="gap"?oo:ne==="gap-x"?lo:so).originalClass,fe)},onSlotRemove:ne=>{const fe=ne==="gap"?oo:ne==="gap-x"?lo:so;fe.hasValue&&(l.preview(fe.effectiveClass,""),me(ne,fe.originalClass,""))}})]})})(),z.map(L=>{var Q,V;if(tt){const B=Vn[L.fullClass];if(B&&te.has(B.propertyKey)||te.has(L.property))return null}if(L.scaleName!==void 0){const B=mr(Ld(L),L.scaleName,o);if(B.length>0){const ue=((Q=P.find(oe=>oe.property===L.property))==null?void 0:Q.newClass)??null;return u.jsx(xn,{values:B,currentValue:L.fullClass,lockedValue:ue,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:oe=>pr(L,oe),onLeave:()=>no(),onClick:oe=>me(L.property,L.fullClass,oe),onRemoveHover:()=>l.preview(L.fullClass,""),onRemove:()=>me(L.property,L.fullClass,"")},L.fullClass)}}if(L.scaleName===void 0&&L.color===void 0){const B=Vn[L.fullClass];if(B){const ue=((V=P.find(oe=>oe.property===B.propertyKey))==null?void 0:V.newClass)??null;return u.jsx(xn,{values:B.alternatives,currentValue:L.fullClass,lockedValue:ue,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:oe=>pr(L,oe),onLeave:()=>no(),onClick:oe=>me(B.propertyKey,L.fullClass,oe),onRemoveHover:()=>l.preview(L.fullClass,""),onRemove:()=>me(B.propertyKey,L.fullClass,"")},L.fullClass)}}return u.jsxs("div",{className:`group flex items-center gap-1 px-2 py-0.5 rounded cursor-pointer text-[11px] font-mono border transition-colors ${(s==null?void 0:s.fullClass)===L.fullClass||(v==null?void 0:v.cls.fullClass)===L.fullClass?"border-bv-border bg-bv-surface-hi text-bv-text":"bg-bv-surface text-bv-text-mid border-transparent hover:border-bv-teal hover:text-bv-teal"}`,onClick:B=>to(L,B.currentTarget),children:[L.fullClass,u.jsx("span",{className:"opacity-0 group-hover:opacity-60 hover:!opacity-100 ml-0.5 shrink-0",title:"Remove class",onClick:B=>{B.stopPropagation(),me(L.property,L.fullClass,"")},onMouseEnter:B=>{B.stopPropagation(),l.preview(L.fullClass,"")},onMouseLeave:B=>{B.stopPropagation(),l.revertPreview()},children:u.jsxs("svg",{viewBox:"0 0 10 10",width:"8",height:"8",xmlns:"http://www.w3.org/2000/svg",children:[u.jsx("line",{x1:"1",y1:"1",x2:"9",y2:"9",stroke:"#F5532D",strokeWidth:"1.8",strokeLinecap:"round"}),u.jsx("line",{x1:"9",y1:"1",x2:"1",y2:"9",stroke:"#F5532D",strokeWidth:"1.8",strokeLinecap:"round"})]})})]},L.fullClass)}),Us.filter(L=>!(tt&&de.has(L))).map(L=>{const Q=Wl(L);if(!Q)return null;if(Q.valueType==="scalar"){const V=mr(L,Q.scaleName,o);if(V.length===0)return null;const B=P.find(ue=>ue.property===Q.stagingKey);return u.jsx(xn,{values:V,currentValue:(B==null?void 0:B.newClass)??V[Math.floor(V.length/2)],lockedValue:(B==null?void 0:B.newClass)??null,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:ue=>Ft(L,ue),onLeave:()=>Kn(),onClick:ue=>ee(L,ue)},`staged-${L}`)}if(Q.valueType==="enum"&&Q.enumAlts){const V=P.find(B=>B.property===Q.stagingKey);return u.jsx(xn,{values:Q.enumAlts,currentValue:(V==null?void 0:V.newClass)??Q.enumAlts[0],lockedValue:(V==null?void 0:V.newClass)??null,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:B=>Ft(L,B),onLeave:()=>Kn(),onClick:B=>ee(L,B)},`staged-${L}`)}return null}),Bs.filter(L=>!(tt&&de.has(L))).map(L=>{const Q=Wl(L);if(!Q)return null;if(Q.valueType==="scalar"){const V=mr(L,Q.scaleName,o);if(V.length>0)return u.jsx(xn,{values:V,currentValue:V[Math.floor(V.length/2)],lockedValue:null,locked:!1,ghost:!0,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:B=>Ft(L,B),onLeave:()=>Kn(),onClick:B=>ee(L,B)},`pending-${L}`)}return Q.valueType==="enum"&&Q.enumAlts?u.jsx(xn,{values:Q.enumAlts,currentValue:Q.enumAlts[0],lockedValue:null,locked:!1,ghost:!0,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:V=>Ft(L,V),onLeave:()=>Kn(),onClick:V=>ee(L,V)},`pending-${L}`):Q.valueType==="color"?u.jsxs("div",{"data-testid":`pending-ghost-${L}`,className:"px-2 py-0.5 rounded cursor-pointer text-[11px] font-mono border border-dashed border-bv-border text-bv-muted hover:border-bv-teal hover:text-bv-teal transition-colors",onClick:V=>{b({cls:{property:"text",fullClass:"",section:"typography",color:""},anchorEl:V.currentTarget}),i(null)},children:[L==="text-color"?"text-":L,"color"]},`pending-${L}`):null})]},E)})]})}const v1=w.lazy(()=>ky(()=>import("./DesignMode-Ch-krWhx.js"),[]).then(e=>({default:e.DesignMode}))),x1=new URLSearchParams(window.location.search),w1=x1.get("mode"),Id=[{id:"design",label:"Design"},{id:"draw",label:"Components"},{id:"message",label:"Message"}];function b1(){return w1==="design"?u.jsx(w.Suspense,{fallback:null,children:u.jsx(v1,{})}):u.jsx(S1,{})}function S1(){const[e,t]=w.useState(!1),[n,r]=w.useState(null),[o,l]=w.useState(0),[s,i]=w.useState("design"),[a,c]=w.useState(!1),d=Cv();w.useEffect(()=>{const T=Jy(()=>{t(!0);try{const W=localStorage.getItem("tw-panel-container");W&&W!=="popover"&&pe("overlay",{type:"SWITCH_CONTAINER",container:W})}catch{}}),_=qy(()=>t(!1)),U=th(W=>{W.type==="RESET_SELECTION"?(r(null),l(J=>J+1)):W.type==="ELEMENT_SELECTED"?(r({componentName:W.componentName,instanceCount:W.instanceCount,classes:W.classes,parsedClasses:Dy(W.classes,Xy),tailwindConfig:W.tailwindConfig}),l(J=>J+1),c(!1)):W.type==="SELECT_MODE_CHANGED"?c(!!W.active):W.type==="QUEUE_UPDATE"?d.handleQueueUpdate({draftCount:W.draftCount,committedCount:W.committedCount,implementingCount:W.implementingCount,implementedCount:W.implementedCount,partialCount:W.partialCount,errorCount:W.errorCount,draft:W.draft,commits:W.commits,agentWaiting:W.agentWaiting}):W.type==="PATCH_UPDATE"&&d.handlePatchUpdate({staged:W.staged,committed:W.committed,implementing:W.implementing,implemented:W.implemented,patches:W.patches})});return eh(),t(ev()),()=>{T(),_(),U()}},[]),w.useEffect(()=>{const T=_=>{_.key==="Escape"&&n&&(r(null),l(U=>U+1),pe("overlay",{type:"CLEAR_HIGHLIGHTS",deselect:!0}))};return document.addEventListener("keydown",T),()=>document.removeEventListener("keydown",T)},[n]);const{draft:p,committed:f,implementing:g,implemented:v,partial:b,error:S}=d.counts,h=(p>0||f>0)&&!d.agentWaiting&&g===0,m=new Map(d.patches.filter(T=>T.status==="staged").map(T=>[T.id,{id:T.id,kind:T.kind??"class-change",elementKey:T.elementKey,status:T.status,originalClass:T.originalClass,newClass:T.newClass,property:T.property,timestamp:T.timestamp,component:T.component,message:T.message,image:T.image}])),y=new Set(d.queueState.draft.map(T=>T.id)),x=[...d.queueState.draft.map(T=>m.get(T.id)??T),...d.patches.filter(T=>T.status==="staged"&&!y.has(T.id)).map(T=>m.get(T.id))],j=d.queueState.commits.filter(T=>T.status==="committed"),k=d.queueState.commits.filter(T=>T.status==="implementing"),C=d.queueState.commits.filter(T=>T.status==="implemented"),N="Please implement the next change and continue implementing changes with VyBit.";async function $(T){if(navigator.clipboard){try{if((await navigator.permissions.query({name:"clipboard-write"})).state==="denied"){A(T);return}}catch{}navigator.clipboard.writeText(T).catch(()=>A(T))}else A(T)}function A(T){const _=document.createElement("textarea");_.value=T,_.style.position="fixed",_.style.opacity="0",document.body.appendChild(_),_.select(),document.execCommand("copy"),document.body.removeChild(_)}const O=u.jsxs("div",{className:"shrink-0",children:[!e&&u.jsxs("div",{className:"flex items-center gap-1.5 px-2.5 py-1.5 bg-amber-950/40 border-t border-amber-800/40 text-amber-300 text-[10px] font-medium",children:[u.jsx("div",{className:"w-1.5 h-1.5 rounded-full bg-bv-orange animate-pulse shrink-0"}),u.jsxs("span",{className:"flex-1 leading-tight",children:["No agent listening —"," ",u.jsx("a",{href:"https://github.com/bitovi/vybit?tab=readme-ov-file#telling-your-agent-to-start-making-features",target:"_blank",rel:"noreferrer",className:"underline hover:text-amber-100",children:"ask your agent"})," ","to start!"]}),u.jsx("button",{onClick:()=>$(N),className:"shrink-0 px-1.5 py-0.5 rounded border border-amber-700/50 bg-amber-900/40 hover:bg-amber-800/40 text-amber-300 font-semibold text-[9px] transition-colors",title:`Copy: "${N}"`,children:"Copy prompt"})]}),h&&u.jsxs("div",{className:"flex items-center gap-1.5 px-2.5 py-1.5 bg-amber-950/40 border-t border-amber-800/40 text-amber-300 text-[10px] font-medium",children:[u.jsx("svg",{width:"12",height:"12",viewBox:"0 0 20 20",fill:"currentColor",className:"shrink-0 text-amber-400",children:u.jsx("path",{fillRule:"evenodd",d:"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.19-1.458-1.516-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"})}),u.jsxs("span",{className:"flex-1 leading-tight",children:["No agent watching —"," ",u.jsx("a",{href:"https://github.com/bitovi/vybit?tab=readme-ov-file#telling-your-agent-to-start-making-features",target:"_blank",rel:"noreferrer",className:"underline hover:text-amber-100",children:"ask your agent"})," ","to start"]}),u.jsx("button",{onClick:()=>$(N),className:"shrink-0 px-1.5 py-0.5 rounded border border-amber-700/50 bg-amber-900/40 hover:bg-amber-800/40 text-amber-300 font-semibold text-[9px] transition-colors",title:`Copy: "${N}"`,children:"Copy prompt"})]}),u.jsxs("div",{className:"flex items-center justify-center px-3 py-1.5 border-t border-bv-border gap-3 text-[10px]",children:[u.jsx(Sl,{label:"draft",count:p,items:x,activeColor:"text-amber-400",onDiscard:T=>d.discard(T),onCommitAll:()=>d.commitAll(),onDiscardAll:()=>d.discardAll()}),u.jsx(Sl,{label:"committed",count:f,items:j.flatMap(T=>T.patches),activeColor:"text-bv-orange"}),u.jsx(Sl,{label:"implementing",count:g,items:k.flatMap(T=>T.patches),activeColor:"text-blue-400"}),u.jsx(Sl,{label:"implemented",count:v,items:C.flatMap(T=>T.patches),activeColor:"text-bv-teal"})]})]});if(!n)return u.jsxs("div",{className:"h-full flex flex-col",children:[u.jsx("div",{className:"px-3 pt-3 pb-2 border-b border-bv-border",children:u.jsxs("div",{className:"flex items-center justify-between gap-2",children:[u.jsx(Od,{active:a,onToggle:()=>{const T=!a;c(T),pe("overlay",{type:"TOGGLE_SELECT_MODE",active:T})}}),u.jsx("div",{className:"flex-1 min-w-0",children:a?u.jsx("span",{className:"text-[11px] text-bv-teal font-medium",children:"● Selecting… click an element on the page"}):u.jsx("span",{className:"text-[12px] text-bv-muted",children:"No element selected"})}),u.jsx(Jc,{})]})}),u.jsx(rd,{tabs:Id,activeTab:s,onTabChange:i}),u.jsx("div",{className:"flex-1 overflow-auto",children:s==="draw"?u.jsx(td,{}):s==="message"?u.jsx(nd,{draft:x,currentElementKey:"",onAddMessage:(T,_)=>d.stageMessage(T,_),onDiscard:T=>d.discard(T)}):a?u.jsxs("div",{className:"flex flex-1 flex-col items-center justify-center gap-2 p-8",children:[u.jsx("div",{className:"w-10 h-10 rounded-full bg-bv-teal text-white flex items-center justify-center",children:u.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 16 16",fill:"currentColor",children:[u.jsx("path",{d:"M14,0H2C.895,0,0,.895,0,2V14c0,1.105,.895,2,2,2H6c.552,0,1-.448,1-1h0c0-.552-.448-1-1-1H2V2H14V6c0,.552,.448,1,1,1h0c.552,0,1-.448,1-1V2c0-1.105-.895-2-2-2Z"}),u.jsx("path",{d:"M12.043,10.629l2.578-.644c.268-.068,.43-.339,.362-.607-.043-.172-.175-.308-.345-.358l-7-2c-.175-.051-.363-.002-.492,.126-.128,.129-.177,.317-.126,.492l2,7c.061,.214,.257,.362,.48,.362h.009c.226-.004,.421-.16,.476-.379l.644-2.578,3.664,3.664c.397,.384,1.03,.373,1.414-.025,.374-.388,.374-1.002,0-1.389l-3.664-3.664Z"})]})}),u.jsx("span",{className:"text-[12px] text-bv-teal font-medium",children:"Selection mode active"}),u.jsxs("span",{className:"text-[12px] text-bv-muted text-center leading-relaxed",children:["Hover over elements on the page to preview, then click to select.",u.jsx("br",{}),"Press"," ",u.jsx("span",{className:"inline-flex items-center px-1.5 py-0.5 rounded bg-white/6 border border-white/8 font-mono text-[10px] text-bv-text-mid leading-none",children:"Esc"})," ","to cancel."]})]}):u.jsx("div",{className:"flex flex-1 flex-col justify-center p-4",children:u.jsxs("button",{onClick:()=>{c(!0),pe("overlay",{type:"TOGGLE_SELECT_MODE",active:!0})},className:"w-full flex flex-col items-center gap-3 px-6 py-5 rounded-lg border border-bv-border bg-bv-surface hover:border-bv-teal hover:bg-bv-teal/5 transition-all cursor-pointer",children:[u.jsx("div",{className:"w-14 h-14 rounded-full bg-bv-teal/10 text-bv-teal flex items-center justify-center",children:u.jsxs("svg",{width:"28",height:"28",viewBox:"0 0 64 64",fill:"currentColor",children:[u.jsx("path",{d:"M2,9C1.447,9,1,8.552,1,8V2c0-0.552,0.447-1,1-1h6c0.553,0,1,0.448,1,1S8.553,3,8,3H3v5C3,8.552,2.553,9,2,9z"}),u.jsx("path",{d:"M8,48H2c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v5h5c0.553,0,1,0.448,1,1S8.553,48,8,48z"}),u.jsx("path",{d:"M47,9c-0.553,0-1-0.448-1-1V3h-5c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1v6C48,8.552,47.553,9,47,9z"}),u.jsx("path",{d:"M21,3h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1S21.553,3,21,3z"}),u.jsx("path",{d:"M2,22c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v6C3,21.552,2.553,22,2,22z"}),u.jsx("path",{d:"M2,35c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v6C3,34.552,2.553,35,2,35z"}),u.jsx("path",{d:"M47,22c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v6C48,21.552,47.553,22,47,22z"}),u.jsx("path",{d:"M47,31c-0.553,0-1-0.448-1-1v-2c0-0.552,0.447-1,1-1s1,0.448,1,1v2C48,30.552,47.553,31,47,31z"}),u.jsx("path",{d:"M34,3h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1S34.553,3,34,3z"}),u.jsx("path",{d:"M21,48h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1S21.553,48,21,48z"}),u.jsx("path",{d:"M30,48h-2c-0.553,0-1-0.448-1-1s0.447-1,1-1h2c0.553,0,1,0.448,1,1S30.553,48,30,48z"}),u.jsx("path",{d:"M62.707,57.293L51.688,46.274l10.759-5.379c0.368-0.184,0.586-0.575,0.549-0.985c-0.037-0.41-0.322-0.755-0.717-0.87l-31-9c-0.355-0.1-0.729-0.005-0.986,0.253c-0.258,0.258-0.355,0.636-0.253,0.986l9,31c0.114,0.396,0.46,0.68,0.869,0.717C39.94,62.999,39.971,63,40,63c0.376,0,0.724-0.212,0.895-0.553l5.38-10.759l11.019,11.019c0.391,0.391,1.023,0.391,1.414,0l4-4C63.098,58.316,63.098,57.684,62.707,57.293z"})]})}),u.jsx("span",{className:"text-[12px] text-bv-text font-medium",children:"Select an element to inspect"}),u.jsxs("span",{className:"inline-flex items-center gap-1",children:[u.jsx("span",{className:"w-5 h-5 rounded flex items-center justify-center bg-white/6 border border-white/8 font-mono text-[10px] font-semibold text-bv-text-mid leading-none",children:"⌘"}),u.jsx("span",{className:"w-5 h-5 rounded flex items-center justify-center bg-white/6 border border-white/8 font-mono text-[10px] font-semibold text-bv-text-mid leading-none",children:"⇧"}),u.jsx("span",{className:"w-5 h-5 rounded flex items-center justify-center bg-white/6 border border-white/8 font-mono text-[10px] font-semibold text-bv-text-mid leading-none",children:"C"})]})]})})}),O]});const F=n.parsedClasses;return u.jsxs("div",{className:"h-full flex flex-col",children:[u.jsx("div",{className:"px-3 pt-3 pb-2 border-b border-bv-border",children:u.jsxs("div",{className:"flex items-center justify-between gap-2",children:[u.jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[u.jsx(Od,{active:a,onToggle:()=>{const T=!a;c(T),pe("overlay",{type:"TOGGLE_SELECT_MODE",active:T})}}),u.jsxs("div",{className:"font-[family-name:var(--font-display)] font-bold text-[13px] text-bv-text leading-tight truncate",children:[n.componentName," ",u.jsxs("span",{className:"font-[family-name:var(--font-ui)] font-normal text-bv-text-mid",children:["— ",n.instanceCount," instance",n.instanceCount!==1?"s":""]})]})]}),u.jsx(Jc,{})]})}),u.jsx(rd,{tabs:Id,activeTab:s,onTabChange:i}),u.jsxs("div",{className:"flex-1 overflow-auto",children:[s==="design"&&u.jsx(y1,{componentName:n.componentName,instanceCount:n.instanceCount,rawClasses:n.classes,parsedClasses:F,tailwindConfig:n.tailwindConfig,patchManager:d},o),s==="draw"&&u.jsx(td,{}),s==="message"&&u.jsx(nd,{draft:x,currentElementKey:n.componentName,onAddMessage:(T,_)=>d.stageMessage(T,_,n.componentName),onDiscard:T=>d.discard(T)})]}),O]})}function Od({active:e,onToggle:t}){return u.jsx("button",{onClick:t,title:`${e?"Stop selecting":"Select an element"} (⌘⇧C)`,className:`w-7 h-7 rounded flex items-center justify-center shrink-0 border transition-all
+        ${n?"z-25":""}`,style:{left:`${d}%`,transform:"translateX(-50%)",width:22,height:26,filter:"drop-shadow(0 1px 2px rgba(0,0,0,0.2))"},onMouseDown:i,onClick:a,title:`${e.role}-${e.colorName}${e.position!=null?` ${e.position}%`:""}`,children:[u.jsx("svg",{viewBox:"0 0 22 26",width:22,height:26,xmlns:"http://www.w3.org/2000/svg",children:u.jsx("path",{d:"M2 1 L20 1 L20 16 L11 25 L2 16 Z",fill:e.hex,stroke:n?"#00848B":"white",strokeWidth:n?2:1.5,strokeLinejoin:"round"})}),!t&&u.jsx("div",{className:"absolute -top-1.5 -right-1.5 w-3.5 h-3.5 rounded-full bg-bv-orange text-white text-[9px] leading-3.5 text-center cursor-pointer z-40 hidden group-hover/handle:block hover:block!",style:{display:void 0},onClick:c,onMouseDown:p=>p.stopPropagation(),children:"×"})]})}function I0({stops:e,direction:t,onStopDrag:n,onStopDragEnd:r,onStopClick:o,onBarClick:l,onStopRemove:s,selectedStopId:i}){const a=w.useRef(null),c=w.useRef(null),d=[...e].sort((v,b)=>(v.position??0)-(b.position??0)),p=w.useCallback((v,b)=>{const S=e.find(y=>y.id===v);if(!S)return;c.current={stopId:v,startX:b,startPos:S.position??0};const h=y=>{const x=c.current;if(!x||!a.current)return;const j=a.current.getBoundingClientRect(),C=(y.clientX-x.startX)/j.width*100,N=Ri(x.startPos+C);n(x.stopId,N)},m=y=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",m);const x=c.current;if(x&&a.current){const j=a.current.getBoundingClientRect(),C=(y.clientX-x.startX)/j.width*100,N=Ri(x.startPos+C);r(x.stopId,N)}c.current=null};document.addEventListener("mousemove",h),document.addEventListener("mouseup",m)},[e,n,r]),f=w.useCallback(v=>{if(!a.current)return;const b=a.current.getBoundingClientRect(),S=(v.clientX-b.left)/b.width*100;l(Ri(S))},[l]),g=A0(d,t);return u.jsxs("div",{className:"relative flex-1 min-w-0",style:{paddingTop:28},children:[d.map((v,b)=>u.jsx(L0,{stop:v,isEndpoint:b===0||b===d.length-1,isSelected:v.id===i,onDragStart:p,onClick:o,onRemove:s},v.id)),u.jsx("div",{ref:a,className:"h-9 rounded-md cursor-pointer relative",style:{background:g,border:"1px solid rgba(0,0,0,0.08)",boxShadow:"inset 0 1px 2px rgba(0,0,0,0.06)"},onClick:f,children:u.jsx("div",{className:"absolute inset-0 flex items-center justify-center text-lg font-bold text-white/0 hover:text-white/60 transition-colors pointer-events-none",children:"+"})})]})}const O0={t:"to top",tr:"to top right",r:"to right",br:"to bottom right",b:"to bottom",bl:"to bottom left",l:"to left",tl:"to top left"};function D0(e){var Ft,Kn;const{direction:t,stops:n,mode:r,solidColorName:o,solidColorHex:l,onPreview:s,onPreviewBatch:i,onRevert:a,onStage:c}=e,[d,p]=w.useState(t),[f,g]=w.useState(n),[v,b]=w.useState(r),[S,h]=w.useState(o),[m,y]=w.useState(l),[x,j]=w.useState(null),[k,C]=w.useState(!1),[N,$]=w.useState(null),[A,O]=w.useState(null),F=w.useRef(n.length+1),T=w.useCallback(ee=>{if(v==="gradient")s(`bg-gradient-to-${d}`,`bg-gradient-to-${ee}`);else{const re=S??"slate-500",le=S?`bg-${S}`:"";i([{oldClass:le,newClass:`bg-gradient-to-${ee}`},{oldClass:"",newClass:`from-${re}`},{oldClass:"",newClass:`to-${re}`}])}},[d,v,S,s,i]),_=w.useCallback(()=>{a()},[a]),U=w.useCallback(ee=>{if(p(ee),b("gradient"),v==="gradient"&&f.length>=2){const re=`bg-gradient-to-${d}`,le=`bg-gradient-to-${ee}`;c(re,le)}else{const re=S??"slate-500",le=m??Xn(re,e.colors),E={id:"1",role:"from",colorName:re,hex:le,position:0},D={id:"2",role:"to",colorName:re,hex:le,position:100};F.current=3,g([E,D]);const z=S?`bg-${S}`:"";c(z,`bg-gradient-to-${ee}`),c("",`from-${re}`),c("",`to-${re}`)}},[d,v,f,S,m,e.colors,c]),W=w.useCallback(()=>{b("solid"),C(!1),j(null),$(null),f.length>0&&!S&&(h(f[0].colorName),y(f[0].hex))},[f,S]),J=w.useCallback((ee,re)=>{g(E=>E.map(D=>D.id===ee?{...D,position:re}:D));const le=f.find(E=>E.id===ee);if(le){const E=le.position!=null?`${le.role}-${le.position}%`:"",D=`${le.role}-${re}%`;s(E,D)}},[f,s]),R=w.useCallback((ee,re)=>{g(E=>E.map(D=>D.id===ee?{...D,position:re}:D));const le=f.find(E=>E.id===ee);if(le){const E=le.position!=null?`${le.role}-${le.position}%`:"",D=`${le.role}-${re}%`;c(E,D)}},[f,c]),I=w.useCallback((ee,re)=>{x===ee&&k?(j(null),C(!1),$(null),O(null)):(j(ee),C(!0),$("stop"),O(re))},[x,k]),P=w.useCallback(ee=>{const re=String(F.current++),le=[...f].sort((z,X)=>(z.position??0)-(X.position??0));let E=le[0];for(const z of le)(z.position??0)<=ee&&(E=z);const D={id:re,role:"via",colorName:(E==null?void 0:E.colorName)??"gray-500",hex:(E==null?void 0:E.hex)??"#6B7280",position:ee};g(z=>[...z,D]),j(re),C(!0),$("stop")},[f]),G=w.useCallback(ee=>{const re=f.find(E=>E.id===ee);if(!re)return;const le=f.filter(E=>E.id!==ee);if(j(null),C(!1),$(null),O(null),le.length>=2)g(le),c(`${re.role}-${re.colorName}`,"");else if(le.length===1){const E=le[0];g([]),b("solid"),h(E.colorName),y(E.hex),c(`bg-gradient-to-${d}`,""),f.forEach(D=>c(`${D.role}-${D.colorName}`,"")),c("",`bg-${E.colorName}`)}else g([]),b("none"),h(null),y(null),c(`bg-gradient-to-${d}`,""),f.forEach(E=>c(`${E.role}-${E.colorName}`,""))},[f,d,c]),q=w.useCallback(ee=>{C(!0),$("solid"),j(null),O(ee)},[]),Qe=w.useCallback(()=>{s(S?`bg-${S}`:"","")},[S,s]),ze=w.useCallback(()=>{S&&c(`bg-${S}`,""),h(null),y(null),C(!1),$(null),O(null)},[S,c]),je=w.useCallback(ee=>{if(N==="stop"&&x){const re=f.find(le=>le.id===x);re&&s(`${re.role}-${re.colorName}`,ee)}else N==="solid"&&s(`bg-${S}`,ee)},[N,x,f,S,s]),ae=w.useCallback(()=>{a()},[a]),Re=w.useCallback(ee=>{if(N==="stop"&&x){const re=f.find(le=>le.id===x);if(re){const le=re.role+"-",E=ee.startsWith(le)?ee.slice(le.length):ee;g(D=>D.map(z=>z.id===x?{...z,colorName:E,hex:Xn(E,e.colors)}:z)),c(`${re.role}-${re.colorName}`,`${re.role}-${E}`),C(!1),j(null),$(null),O(null)}}else if(N==="solid"){const re="bg-",le=ee.startsWith(re)?ee.slice(re.length):ee,E=S?`bg-${S}`:"";h(le),y(Xn(le,e.colors)),c(E,`bg-${le}`),C(!1),$(null),O(null)}},[N,x,f,S,c,e.colors]),me=w.useCallback(()=>{C(!1),j(null),$(null),O(null),a()},[a]),eo=N==="stop"&&x?(((Ft=f.find(ee=>ee.id===x))==null?void 0:Ft.role)??"from")+"-":"bg-",to=N==="stop"&&x?((Kn=f.find(ee=>ee.id===x))==null?void 0:Kn.colorName)??"":S??"",pr=O0[d],ro=!!(x?f.find(ee=>ee.id===x):null);return{direction:d,stops:f,mode:v,solidColorName:S,solidColorHex:m,selectedStopId:x,colorPickerOpen:k,editingTarget:N,anchorEl:A,colorPrefix:eo,colorPickerCurrentValue:to,directionCSS:pr,selectedStopIsRemovable:ro,handleDirectionHover:T,handleDirectionLeave:_,handleDirectionClick:U,handleSolidToggle:W,handleStopDrag:J,handleStopDragEnd:R,handleStopClick:I,handleBarClick:P,handleStopRemove:G,handleSwatchClick:q,handleHoverRemoveSolid:Qe,handleRemoveSolid:ze,handleColorHover:je,handleColorLeave:ae,handleColorClick:Re,handleCloseColorPicker:me}}function Xn(e,t){if(console.log(`[resolveColorHex] Looking up colorName="${e}", available top-level keys:`,Object.keys(t).join(", ")),typeof t[e]=="string")return console.log(`[resolveColorHex] Found direct match: colors["${e}"] = "${t[e]}"`),t[e];if(t[e]&&typeof t[e]=="object"&&typeof t[e].DEFAULT=="string")return console.log(`[resolveColorHex] Found DEFAULT match: colors["${e}"].DEFAULT = "${t[e].DEFAULT}"`),t[e].DEFAULT;const n=e.lastIndexOf("-");if(n>0){const r=e.slice(0,n),o=e.slice(n+1);if(console.log(`[resolveColorHex] Trying hue="${r}" shade="${o}", colors["${r}"] =`,typeof t[r],t[r]?Object.keys(t[r]).slice(0,5).join(", "):"undefined"),t[r]&&typeof t[r][o]=="string")return console.log(`[resolveColorHex] Found hue-shade match: colors["${r}"]["${o}"] = "${t[r][o]}"`),t[r][o]}return console.warn(`[resolveColorHex] FALLBACK #888888 for colorName="${e}" — color not found in config`),"#888888"}function M0(e){const t=D0(e),n=t.mode==="solid",{refs:r,floatingStyles:o,context:l}=hn({open:t.colorPickerOpen,onOpenChange:a=>{a||t.handleCloseColorPicker()},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8}),Ma({apply({availableHeight:a,elements:c}){Object.assign(c.floating.style,{maxHeight:`${a}px`})},padding:8})],whileElementsMounted:un}),s=sr(l),{getFloatingProps:i}=ir([s]);return w.useEffect(()=>{t.anchorEl&&r.setReference(t.anchorEl)},[t.anchorEl]),u.jsxs("div",{className:"group",children:[u.jsxs("div",{className:"flex items-start gap-2.5 mb-2",children:[u.jsx(_0,{direction:t.direction,mode:t.mode,onHover:t.handleDirectionHover,onLeave:t.handleDirectionLeave,onDirectionClick:t.handleDirectionClick,onSolidClick:t.handleSolidToggle,solidColorName:t.solidColorName}),n?u.jsx("div",{className:"flex-1 min-w-0 self-stretch rounded-md cursor-pointer relative overflow-hidden",style:{background:t.solidColorHex??"transparent",border:"1px solid rgba(255,255,255,0.12)",boxShadow:"inset 0 1px 2px rgba(0,0,0,0.06)",minHeight:36},onClick:a=>t.handleSwatchClick(a.currentTarget),title:t.solidColorName?`bg-${t.solidColorName}`:"Click to pick color",children:!t.solidColorHex&&u.jsxs("svg",{className:"absolute inset-0 w-full h-full",viewBox:"0 0 100 100",preserveAspectRatio:"none",xmlns:"http://www.w3.org/2000/svg",children:[u.jsx("line",{x1:"4",y1:"4",x2:"96",y2:"96",stroke:"#F5532D",strokeWidth:"3",strokeLinecap:"round"}),u.jsx("line",{x1:"96",y1:"4",x2:"4",y2:"96",stroke:"#F5532D",strokeWidth:"3",strokeLinecap:"round"})]})}):u.jsx(I0,{stops:t.stops,direction:t.directionCSS,onStopDrag:t.handleStopDrag,onStopDragEnd:t.handleStopDragEnd,onStopClick:t.handleStopClick,onBarClick:t.handleBarClick,onStopRemove:t.handleStopRemove,selectedStopId:t.selectedStopId})]}),t.colorPickerOpen&&u.jsx(pn,{children:u.jsxs("div",{ref:r.setFloating,style:{...o,zIndex:9999,overflowY:"auto"},...i(),children:[u.jsx(Fl,{prefix:t.colorPrefix,currentValue:t.colorPickerCurrentValue,colors:e.colors,locked:!1,lockedValue:null,onHover:t.handleColorHover,onLeave:t.handleColorLeave,onClick:t.handleColorClick,onRemove:t.editingTarget==="solid"?t.handleRemoveSolid:void 0,onRemoveHover:t.editingTarget==="solid"?t.handleHoverRemoveSolid:void 0}),t.selectedStopIsRemovable&&u.jsx("button",{type:"button",className:"mt-1.5 w-full text-[10px] text-bv-orange border border-bv-orange/40 rounded px-2 py-0.5 cursor-pointer hover:bg-bv-orange hover:text-white transition-colors",onClick:()=>{t.selectedStopId&&t.handleStopRemove(t.selectedStopId)},children:"Remove stop"})]})}),u.jsx("div",{className:"min-h-[1rem] text-[10px] text-bv-muted italic opacity-0 invisible transition-opacity duration-150 group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible",children:n?"Click the swatch to change color · Click a direction arrow for gradient":"Click handles to change color · Drag to reposition · Click bar to add stop"})]})}function $0(e,t,n){var y;const r=new Map;for(const x of e)r.set(x.fullClass,!0);if(n)for(const x of n)x.kind==="class-change"&&x.status==="staged"&&(x.originalClass&&r.delete(x.originalClass),x.newClass&&r.set(x.newClass,!0));const o=e.find(x=>x.property==="bg-gradient-to"),l=Array.from(r.keys()).find(x=>x.startsWith("bg-gradient-to-")),i=(l==null?void 0:l.replace("bg-gradient-to-",""))||(o==null?void 0:o.fullClass.slice(15))||"r",a=Array.from(r.keys()).filter(x=>x.startsWith("bg-")&&!x.startsWith("bg-gradient-to-")),c=((y=a[0])==null?void 0:y.replace("bg-",""))??null;console.log("[deriveProps] allBgClasses:",a,"solidColorName:",c),console.log("[deriveProps] available color keys:",Object.keys(t).join(", "));const d=(c==null?void 0:c.split("/")[0])??null;console.log("[deriveProps] solidColorNameBase:",d);const p=d?Xn(d,t):null;console.log("[deriveProps] solidColorHex resolved to:",p);const f=Array.from(r.keys()),g=f.filter(x=>x.startsWith("from-")),v=f.filter(x=>x.startsWith("via-")),b=f.filter(x=>x.startsWith("to-")),S=!!(l||g.length>0&&b.length>0),h=S?"gradient":"solid",m=[];if(S){let x=1;for(const j of g){const k=j.replace("from-",""),C=k.split("/")[0];m.push({id:String(x++),role:"from",colorName:k,hex:Xn(C,t),position:null})}for(const j of v){const k=j.replace("via-",""),C=k.split("/")[0];m.push({id:String(x++),role:"via",colorName:k,hex:Xn(C,t),position:null})}for(const j of b){const k=j.replace("to-",""),C=k.split("/")[0];m.push({id:String(x++),role:"to",colorName:k,hex:Xn(C,t),position:null})}}return{direction:i,stops:m,mode:h,solidColorName:c,solidColorHex:p,colors:t}}const Oe="#00848B",ur="rgba(0,132,139,0.18)",z0="#F5532D",wt="#4a4a4a",Dn="#333333",Ae="#999999",Je="'Roboto Mono', 'Menlo', ui-monospace, monospace",$t={width:60,height:60,borderRadius:5,borderWidth:"1.5px",borderStyle:"solid",borderColor:wt,background:Dn,display:"flex",padding:4,overflow:"hidden",transition:"border-color 150ms ease-in-out, background-color 150ms ease-in-out, box-shadow 150ms ease-in-out",boxSizing:"border-box"},$a={background:Oe,opacity:.65,borderRadius:2,flexShrink:0,transition:"opacity 150ms ease-in-out"},Ed={...$a,opacity:.9},Lh={flexShrink:0,background:z0,opacity:.18,borderRadius:1,transition:"opacity 150ms ease-in-out"},K0={...Lh,opacity:.38};function Yt({label:e,isActive:t,containerStyle:n,onClick:r,onHover:o,children:l}){const[s,i]=w.useState(!1),a=t||s,c={...$t,borderColor:a?Oe:wt,background:a?ur:Dn,boxShadow:t?"0 0 0 2px rgba(0,132,139,0.35)":"none",...n};return u.jsxs("div",{className:"cursor-pointer",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3},onMouseEnter:()=>{i(!0),o==null||o()},onMouseLeave:()=>i(!1),onClick:r,children:[u.jsx("div",{style:c,children:l(a)}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:a?Oe:Ae,fontWeight:a?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:e})]})}const Pi=[{value:"flex-row",label:"row",arrow:"→"},{value:"flex-col",label:"col",arrow:"↓"},{value:"flex-row-reverse",label:"row-reverse",arrow:"←"},{value:"flex-col-reverse",label:"col-reverse",arrow:"↑"}];function Ih({direction:e,color:t}){const n={stroke:t,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"};switch(e){case"flex-row":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"5",y1:"15",x2:"25",y2:"15",...n}),u.jsx("polyline",{points:"19,9 25,15 19,21",...n})]});case"flex-col":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"15",y1:"5",x2:"15",y2:"25",...n}),u.jsx("polyline",{points:"9,19 15,25 21,19",...n})]});case"flex-row-reverse":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"25",y1:"15",x2:"5",y2:"15",...n}),u.jsx("polyline",{points:"11,9 5,15 11,21",...n})]});case"flex-col-reverse":return u.jsxs("svg",{width:"30",height:"30",viewBox:"0 0 30 30",children:[u.jsx("line",{x1:"15",y1:"25",x2:"15",y2:"5",...n}),u.jsx("polyline",{points:"9,11 15,5 21,11",...n})]})}}function F0({currentValue:e,lockedValue:t,locked:n,onHover:r,onLeave:o,onClick:l}){const[s,i]=w.useState(!1),{refs:a,floatingStyles:c,context:d}=hn({open:s,onOpenChange:k=>{k||(i(!1),o())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),p=sr(d),{getReferenceProps:f,getFloatingProps:g}=ir([p]),v=t!==null&&Pi.some(k=>k.value===t),b=n&&!v,S=v?t:e??"",h=Pi.find(k=>k.value===S),m=!h;function y(){i(!1),o()}function x(){b||i(k=>(k&&o(),!k))}const j=m?{...$t,borderStyle:"dashed",borderColor:s?Oe:wt,background:s?ur:"transparent",alignItems:"center",justifyContent:"center",cursor:b?"default":"pointer"}:{...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:s?"0 0 0 2px rgba(0,132,139,0.18)":"none",alignItems:"center",justifyContent:"center",cursor:b?"default":"pointer"};return u.jsxs("div",{style:{display:"inline-flex",flexDirection:"column",gap:2},children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Direction"}),u.jsxs("div",{ref:a.setReference,role:"button",tabIndex:b?-1:0,"aria-label":"Direction",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3},onKeyDown:k=>{(k.key==="Enter"||k.key===" ")&&x()},onClick:x,...f(),children:[u.jsx("div",{style:j,children:h?u.jsx(Ih,{direction:h.value,color:s?Oe:Ae}):u.jsx("span",{style:{fontSize:10,fontFamily:Je,color:Ae},children:"—"})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:(h==null?void 0:h.label)??"—"})]}),s&&u.jsx(pn,{children:u.jsx("div",{ref:a.setFloating,style:c,className:"z-[9999]",...g(),children:u.jsx(fr,{style:{background:"#1e1e1e",border:`1px solid ${wt}`,borderRadius:8,boxShadow:"0 4px 16px rgba(0,0,0,0.35)",padding:8},onMouseLeave:o,onClose:y,children:u.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(4, 60px)",gap:4},children:Pi.map(k=>{const C=k.value===S;return u.jsx(W0,{option:k,isActive:C,onHover:()=>r(k.value),onClick:()=>{l(k.value),y()}},k.value)})})})})})]})}function W0({option:e,isActive:t,onHover:n,onClick:r}){const[o,l]=w.useState(!1),s=t||o,i={...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:t?"0 0 0 2px rgba(0,132,139,0.35)":"none",alignItems:"center",justifyContent:"center"};return u.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3,cursor:"pointer"},onMouseEnter:()=>{l(!0),n()},onMouseLeave:()=>l(!1),onClick:r,children:[u.jsx("div",{style:i,children:u.jsx(Ih,{direction:e.value,color:s?Oe:Ae})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:e.label})]})}const _i=[{value:"flex-nowrap",label:"no-wrap"},{value:"flex-wrap",label:"wrap"},{value:"flex-wrap-reverse",label:"wrap-reverse"}],H0=e=>({stroke:e,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"});function Oh({mode:e,color:t}){const n=H0(t),r={...n,strokeDasharray:"2 3"};return e==="flex-nowrap"?u.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[u.jsx("line",{x1:"3",y1:"7",x2:"37",y2:"7",...n}),u.jsx("polyline",{points:"31,1 37,7 31,13",...n})]}):e==="flex-wrap"?u.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[u.jsx("line",{x1:"3",y1:"7",x2:"37",y2:"7",...n}),u.jsx("line",{x1:"37",y1:"7",x2:"3",y2:"33",...r}),u.jsx("line",{x1:"3",y1:"33",x2:"37",y2:"33",...n}),u.jsx("polyline",{points:"31,27 37,33 31,39",...n})]}):u.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[u.jsx("line",{x1:"3",y1:"33",x2:"37",y2:"33",...n}),u.jsx("line",{x1:"37",y1:"33",x2:"3",y2:"7",...r}),u.jsx("line",{x1:"3",y1:"7",x2:"37",y2:"7",...n}),u.jsx("polyline",{points:"31,1 37,7 31,13",...n})]})}function V0({option:e,isActive:t,onHover:n,onClick:r}){const[o,l]=w.useState(!1),s=t||o,i={...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:t?"0 0 0 2px rgba(0,132,139,0.35)":"none",alignItems:"center",justifyContent:"center"};return u.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3,cursor:"pointer"},onMouseEnter:()=>{l(!0),n()},onMouseLeave:()=>l(!1),onClick:r,children:[u.jsx("div",{style:i,children:u.jsx(Oh,{mode:e.value,color:s?Oe:Ae})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:e.label})]})}function B0({currentValue:e,lockedValue:t,locked:n,onHover:r,onLeave:o,onClick:l}){const[s,i]=w.useState(!1),{refs:a,floatingStyles:c,context:d}=hn({open:s,onOpenChange:k=>{k||(i(!1),o())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),p=sr(d),{getReferenceProps:f,getFloatingProps:g}=ir([p]),v=t!==null&&_i.some(k=>k.value===t),b=n&&!v,S=!v&&e===null,h=v?t:e??"",m=_i.find(k=>k.value===h),y=(m==null?void 0:m.label)??"Wrap";function x(){i(!1),o()}function j(){b||i(k=>(k&&o(),!k))}return u.jsxs("div",{style:{display:"inline-flex",flexDirection:"column",gap:2},children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Wrap"}),u.jsxs("div",{ref:a.setReference,role:"button",tabIndex:b?-1:0,"aria-label":"Wrap",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:3},onKeyDown:k=>{(k.key==="Enter"||k.key===" ")&&j()},onClick:j,...f(),children:[S?u.jsx("div",{style:{...$t,borderStyle:"dashed",borderColor:s?Oe:wt,background:s?ur:"transparent",alignItems:"center",justifyContent:"center"},children:u.jsx("span",{style:{fontSize:10,fontFamily:Je,color:Ae},children:"—"})}):u.jsx("div",{style:{...$t,borderColor:s?Oe:wt,background:s?ur:Dn,boxShadow:s?"0 0 0 2px rgba(0,132,139,0.18)":"none",alignItems:"center",justifyContent:"center"},children:u.jsx(Oh,{mode:h,color:s?Oe:Ae})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:s?Oe:Ae,fontWeight:s?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:y})]}),s&&u.jsx(pn,{children:u.jsx("div",{ref:a.setFloating,style:c,className:"z-[9999]",...g(),children:u.jsx(fr,{style:{background:"#1e1e1e",border:`1px solid ${wt}`,borderRadius:8,boxShadow:"0 4px 16px rgba(0,0,0,0.35)",padding:8},onMouseLeave:o,onClose:x,children:u.jsx("div",{className:"grid gap-1",style:{gridTemplateColumns:"repeat(3, 60px)"},children:_i.map(k=>{const C=k.value===h;return u.jsx(V0,{option:k,isActive:C,onHover:()=>r(k.value),onClick:()=>{l(k.value),x()}},k.value)})})})})})]})}function U0({flexDirection:e="row",activeValue:t,onSelect:n,onHover:r}){const o=e.startsWith("column"),l=e;function s(f,g){const v=g?Ed:$a;return o?{...v,width:"100%",height:f}:{...v,width:f,height:"100%"}}function i(f){const g=f?Ed:$a;return o?{...g,flex:1,width:"100%"}:{...g,flex:1,height:"100%"}}function a(f,g){return{...g?K0:Lh,flex:f}}const c=f=>t===f,d=f=>()=>n==null?void 0:n(f),p=f=>()=>r==null?void 0:r(f);return u.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(4, 60px)",gap:4},children:[u.jsx(Yt,{label:"start",isActive:c("justify-start"),onClick:d("justify-start"),onHover:p("justify-start"),containerStyle:{flexDirection:l,justifyContent:"flex-start",gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(10,f)}),u.jsx("div",{style:s(14,f)}),u.jsx("div",{style:s(8,f)})]})}),u.jsx(Yt,{label:"center",isActive:c("justify-center"),onClick:d("justify-center"),onHover:p("justify-center"),containerStyle:{flexDirection:l,justifyContent:"center",gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(10,f)}),u.jsx("div",{style:s(14,f)}),u.jsx("div",{style:s(8,f)})]})}),u.jsx(Yt,{label:"stretch",isActive:c("justify-stretch"),onClick:d("justify-stretch"),onHover:p("justify-stretch"),containerStyle:{flexDirection:l,gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:i(f)}),u.jsx("div",{style:i(f)}),u.jsx("div",{style:i(f)})]})}),u.jsx(Yt,{label:"between",isActive:c("justify-between"),onClick:d("justify-between"),onHover:p("justify-between"),containerStyle:{flexDirection:l},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)})]})}),u.jsx(Yt,{label:"around",isActive:c("justify-around"),onClick:d("justify-around"),onHover:p("justify-around"),containerStyle:{flexDirection:l},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(2,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)})]})}),u.jsx(Yt,{label:"evenly",isActive:c("justify-evenly"),onClick:d("justify-evenly"),onHover:p("justify-evenly"),containerStyle:{flexDirection:l},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)}),u.jsx("div",{style:s(12,f)}),u.jsx("div",{style:a(1,f)})]})}),u.jsx(Yt,{label:"end",isActive:c("justify-end"),onClick:d("justify-end"),onHover:p("justify-end"),containerStyle:{flexDirection:l,justifyContent:"flex-end",gap:2},children:f=>u.jsxs(u.Fragment,{children:[u.jsx("div",{style:s(10,f)}),u.jsx("div",{style:s(14,f)}),u.jsx("div",{style:s(8,f)})]})})]})}const nn="bg-bv-teal/50 rounded-[2px] shrink-0 group-hover:bg-bv-teal/70 transition-colors duration-150",G0="bg-bv-orange/10 rounded-[2px]";function Xt({isCol:e,main:t}){return u.jsx("div",{className:nn,style:e?{height:t}:{width:t}})}function Wn({flex:e=1}){return u.jsx("div",{className:G0,style:{flex:e}})}function Bt({isCol:e,w:t,h:n}){return u.jsx("div",{className:nn,style:e?{width:n,height:t}:{width:t,height:n}})}function Ai({isCol:e,w:t,h:n,pt:r}){return u.jsx("div",{className:`${nn} text-[5px] text-white/80 leading-none overflow-hidden text-center`,style:e?{width:n,height:t,paddingLeft:r}:{width:t,height:n,paddingTop:r},children:"t"})}function Li(e){return u.jsxs(u.Fragment,{children:[u.jsx(Xt,{isCol:e,main:10}),u.jsx(Xt,{isCol:e,main:14}),u.jsx(Xt,{isCol:e,main:8})]})}const Td=[{value:"justify-start",label:"start",getContainerStyle:e=>({flexDirection:e,justifyContent:"flex-start",gap:2}),renderItems:e=>Li(e.startsWith("column"))},{value:"justify-center",label:"center",getContainerStyle:e=>({flexDirection:e,justifyContent:"center",gap:2}),renderItems:e=>Li(e.startsWith("column"))},{value:"justify-stretch",label:"stretch",getContainerStyle:e=>({flexDirection:e,gap:2}),renderItems:()=>u.jsxs(u.Fragment,{children:[u.jsx("div",{className:`${nn} flex-1`}),u.jsx("div",{className:`${nn} flex-1`}),u.jsx("div",{className:`${nn} flex-1`})]})},{value:"justify-between",label:"between",getContainerStyle:e=>({flexDirection:e}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{}),u.jsx(Xt,{isCol:t,main:12})]})}},{value:"justify-around",label:"around",getContainerStyle:e=>({flexDirection:e}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Wn,{flex:1}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{flex:2}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{flex:1})]})}},{value:"justify-evenly",label:"evenly",getContainerStyle:e=>({flexDirection:e}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Wn,{}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{}),u.jsx(Xt,{isCol:t,main:12}),u.jsx(Wn,{})]})}},{value:"justify-end",label:"end",getContainerStyle:e=>({flexDirection:e,justifyContent:"flex-end",gap:2}),renderItems:e=>Li(e.startsWith("column"))}],Ii=[{value:"items-start",label:"start",getContainerStyle:e=>({flexDirection:e,alignItems:"flex-start",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Bt,{isCol:t,w:13,h:22}),u.jsx(Bt,{isCol:t,w:15,h:42}),u.jsx(Bt,{isCol:t,w:11,h:14})]})}},{value:"items-center",label:"center",getContainerStyle:e=>({flexDirection:e,alignItems:"center",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Bt,{isCol:t,w:13,h:22}),u.jsx(Bt,{isCol:t,w:15,h:42}),u.jsx(Bt,{isCol:t,w:11,h:14})]})}},{value:"items-baseline",label:"baseline",getContainerStyle:e=>({flexDirection:e,alignItems:"baseline",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Ai,{isCol:t,w:13,h:38,pt:17}),u.jsx(Ai,{isCol:t,w:15,h:26,pt:3}),u.jsx(Ai,{isCol:t,w:11,h:32,pt:10})]})}},{value:"items-stretch",label:"stretch",getContainerStyle:e=>({flexDirection:e,alignItems:"stretch",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx("div",{className:nn,style:t?{height:13}:{width:13}}),u.jsx("div",{className:nn,style:t?{height:15}:{width:15}}),u.jsx("div",{className:nn,style:t?{height:11}:{width:11}})]})}},{value:"items-end",label:"end",getContainerStyle:e=>({flexDirection:e,alignItems:"flex-end",gap:3}),renderItems:e=>{const t=e.startsWith("column");return u.jsxs(u.Fragment,{children:[u.jsx(Bt,{isCol:t,w:13,h:22}),u.jsx(Bt,{isCol:t,w:15,h:42}),u.jsx(Bt,{isCol:t,w:11,h:14})]})}}];function Y0({currentValue:e,lockedValue:t,locked:n,flexDirection:r="row",onHover:o,onLeave:l,onClick:s,onRemove:i,onRemoveHover:a}){const[c,d]=w.useState(!1),{refs:p,floatingStyles:f,context:g}=hn({open:c,onOpenChange:A=>{A||(d(!1),l())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),v=sr(g),{getReferenceProps:b,getFloatingProps:S}=ir([v]),h=t!==null&&Td.some(A=>A.value===t),m=n&&!h,y=!h&&(e===null||e===""),x=h?t:e??"",j=Td.find(A=>A.value===x),k=(j==null?void 0:j.label)??"—";function C(){d(!1),l()}function N(){m||d(A=>(A&&l(),!A))}const $={...$t,borderStyle:"dashed",alignItems:"center",justifyContent:"center"};return u.jsxs("div",{className:"flex flex-col items-start gap-1",children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,fontWeight:500},children:"JUSTIFY →"}),u.jsx("div",{ref:p.setReference,className:"cursor-pointer",role:"button",tabIndex:m?-1:0,onKeyDown:A=>{(A.key==="Enter"||A.key===" ")&&N()},onClick:N,...b(),children:y?u.jsxs("div",{className:"flex flex-col items-center gap-0.5",children:[u.jsx("div",{style:$,children:u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae},children:"—"})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae},children:"none"})]}):u.jsx(Yt,{label:k,isActive:c,containerStyle:(j==null?void 0:j.getContainerStyle(r))??{flexDirection:r},children:A=>(j==null?void 0:j.renderItems(r))??null})}),c&&u.jsx(pn,{children:u.jsx("div",{ref:p.setFloating,style:f,className:"z-[9999]",...S(),children:u.jsxs(fr,{className:"bg-bv-bg border border-bv-border rounded-lg shadow-lg p-2 flex flex-col gap-1",onMouseLeave:l,onClose:C,children:[i&&u.jsxs("div",{className:"flex items-center gap-1.5 px-1.5 py-1 text-[10px] font-mono text-bv-muted border-b border-bv-border mb-1 pb-1.5 cursor-pointer transition-colors duration-150 hover:text-bv-orange",onMouseEnter:a,onMouseLeave:l,onClick:()=>{i(),C()},children:[u.jsxs("svg",{width:"10",height:"10",viewBox:"0 0 10 10",className:"shrink-0",children:[u.jsx("line",{x1:"1",y1:"1",x2:"9",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),u.jsx("line",{x1:"9",y1:"1",x2:"1",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})]}),"remove"]}),u.jsx(U0,{flexDirection:r,activeValue:x,onSelect:A=>{s(A),C()},onHover:o})]})})})]})}function Q0({currentValue:e,lockedValue:t,locked:n,flexDirection:r="row",onHover:o,onLeave:l,onClick:s,onRemove:i,onRemoveHover:a}){const[c,d]=w.useState(!1),{refs:p,floatingStyles:f,context:g}=hn({open:c,onOpenChange:O=>{O||(d(!1),l())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8})],whileElementsMounted:un}),v=sr(g),{getReferenceProps:b,getFloatingProps:S}=ir([v]),h=t!==null&&Ii.some(O=>O.value===t),m=n&&!h,y=!h&&(e===null||e===""),x=h?t:e??"",j=Ii.find(O=>O.value===x),k=(j==null?void 0:j.label)??"—",C=r;function N(){d(!1),l()}function $(){m||d(O=>(O&&l(),!O))}const A=y?{...$t,borderStyle:"dashed",borderColor:wt,background:Dn,cursor:m?"default":"pointer",alignItems:"center",justifyContent:"center"}:{...$t,borderColor:c?Oe:wt,background:c?"rgba(0,132,139,0.09)":Dn,cursor:m?"default":"pointer",...j?j.getContainerStyle(r):{}};return u.jsxs("div",{style:{display:"inline-flex",flexDirection:"column",alignItems:"center",gap:2},children:[u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Align ↓"}),u.jsx("div",{ref:p.setReference,role:"button",tabIndex:m?-1:0,onKeyDown:O=>{(O.key==="Enter"||O.key===" ")&&$()},onClick:$,...b(),children:u.jsx("div",{style:A,children:y?u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:Ae},children:"—"}):j==null?void 0:j.renderItems(r)})}),u.jsx("span",{style:{fontSize:9,fontFamily:Je,color:c?Oe:Ae,fontWeight:c?600:400,textAlign:"center",transition:"color 150ms ease-in-out"},children:y?"—":k}),c&&u.jsx(pn,{children:u.jsx("div",{ref:p.setFloating,style:f,className:"z-[9999]",...S(),children:u.jsxs(fr,{className:"bg-bv-bg border border-bv-border rounded-lg shadow-lg p-2 flex flex-col gap-1",onMouseLeave:l,onClose:N,children:[i&&u.jsxs("div",{className:"flex items-center gap-1.5 px-1.5 py-1 text-[10px] font-mono text-bv-muted border-b border-bv-border mb-1 pb-1.5 cursor-pointer transition-colors duration-150 hover:text-bv-orange",onMouseEnter:a,onMouseLeave:l,onClick:()=>{i(),N()},children:[u.jsxs("svg",{width:"10",height:"10",viewBox:"0 0 10 10",className:"shrink-0",children:[u.jsx("line",{x1:"1",y1:"1",x2:"9",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),u.jsx("line",{x1:"9",y1:"1",x2:"1",y2:"9",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})]}),"remove"]}),u.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(5, 60px)",gap:4},children:Ii.map(O=>u.jsx(Yt,{label:O.label,isActive:O.value===x,containerStyle:{flexDirection:C,...O.getContainerStyle(r)},onHover:()=>o(O.value),onClick:()=>{s(O.value),N()},children:F=>O.renderItems(r)},O.value))})]})})})]})}function Nd(e){return e.replace(/^gap-x-/,"x-")}function Rd(e){return e.replace(/^gap-y-/,"y-")}function X0({slots:e,onSlotChange:t,onSlotHover:n,onSlotRemove:r,onSlotRemoveHover:o}){const[l,s]=w.useState(null),[i,a]=w.useState(null),c=e.find(S=>S.key==="gap"),d=e.find(S=>S.key==="gap-x"),p=e.find(S=>S.key==="gap-y");function f(S,h){a(h!=null?S:null),n==null||n(S,h)}function g(S){a(S)}function v(){a(null)}const b=i==="gap-x"?"gm-active-x":i==="gap-y"?"gm-active-y":i==="gap"?"gm-active-gap":"";return u.jsx("div",{className:"gm-root",children:u.jsxs("div",{className:`gm-grid${b?` ${b}`:""}`,children:[u.jsx("div",{className:"gm-col-highlight",style:{gridArea:"1 / 2 / 4 / 3"}}),u.jsx("div",{className:"gm-row-highlight",style:{gridArea:"2 / 1 / 3 / 4"}}),u.jsx("div",{className:"gm-box gm-box-tl",style:{gridArea:"1 / 1"}}),u.jsx("div",{className:"gm-cell",style:{gridArea:"1 / 2"},onMouseEnter:()=>g("gap-x"),onMouseLeave:v,children:(d==null?void 0:d.scaleValues)&&u.jsx(Kr,{placeholder:"x",values:d.scaleValues,currentValue:d.value,displayValue:d.value?Nd(d.value):null,formatValue:Nd,axis:"x",disabled:l!==null&&l!=="gap-x",onHover:S=>f("gap-x",S),onLeave:()=>f("gap-x",null),onClick:S=>t==null?void 0:t("gap-x",S),onOpen:()=>s("gap-x"),onClose:()=>s(null),onScrubStart:()=>s("gap-x"),onScrubEnd:()=>s(null),onRemove:d.value?()=>r==null?void 0:r("gap-x"):void 0,onRemoveHover:d.value?()=>{a(null),o==null||o("gap-x")}:void 0})}),u.jsx("div",{className:"gm-box gm-box-tr",style:{gridArea:"1 / 3"}}),u.jsx("div",{className:"gm-cell",style:{gridArea:"2 / 1"},onMouseEnter:()=>g("gap-y"),onMouseLeave:v,children:(p==null?void 0:p.scaleValues)&&u.jsx(Kr,{placeholder:"y",values:p.scaleValues,currentValue:p.value,displayValue:p.value?Rd(p.value):null,formatValue:Rd,axis:"y",disabled:l!==null&&l!=="gap-y",onHover:S=>f("gap-y",S),onLeave:()=>f("gap-y",null),onClick:S=>t==null?void 0:t("gap-y",S),onOpen:()=>s("gap-y"),onClose:()=>s(null),onScrubStart:()=>s("gap-y"),onScrubEnd:()=>s(null),onRemove:p.value?()=>r==null?void 0:r("gap-y"):void 0,onRemoveHover:p.value?()=>{a(null),o==null||o("gap-y")}:void 0})}),u.jsx("div",{className:"gm-cell",style:{gridArea:"2 / 2"},onMouseEnter:()=>g("gap"),onMouseLeave:v,children:(c==null?void 0:c.scaleValues)&&u.jsx(Kr,{placeholder:"gap",values:c.scaleValues,currentValue:c.value,displayValue:c.value??null,axis:"x",disabled:l!==null&&l!=="gap",onHover:S=>f("gap",S),onLeave:()=>f("gap",null),onClick:S=>t==null?void 0:t("gap",S),onOpen:()=>s("gap"),onClose:()=>s(null),onScrubStart:()=>s("gap"),onScrubEnd:()=>s(null),onRemove:c.value?()=>r==null?void 0:r("gap"):void 0,onRemoveHover:c.value?()=>{a(null),o==null||o("gap")}:void 0})}),u.jsx("div",{className:"gm-box gm-box-bl",style:{gridArea:"3 / 1"}})]})})}const Dh={shadow:"Shadow","inset-shadow":"Inset Shadow",ring:"Ring","inset-ring":"Inset Ring","text-shadow":"Text Shadow"},Pd={shadow:"shadow-md","inset-shadow":"inset-shadow-sm",ring:"ring-2","inset-ring":"inset-ring-2","text-shadow":"text-shadow-md"};function Z0(e){switch(e){case"shadow":return[...Iu];case"inset-shadow":return[...Zp];case"ring":return[...Na];case"inset-ring":return[...Na];case"text-shadow":return[...Ou]}}function _d(e,t){return`${e==="shadow"?"shadow-":e==="inset-shadow"?"inset-shadow-":e==="ring"?"ring-":e==="inset-ring"?"inset-ring-":"text-shadow-"}${t}`}function J0(e,t){const n=e==="shadow"?"shadow-":e==="inset-shadow"?"inset-shadow-":e==="ring"?"ring-":e==="inset-ring"?"inset-ring-":"text-shadow-";return t.startsWith(n)?t.slice(n.length):t}function q0(e){if(e.isNone||!e.sizeClass)return"none";const t=r=>{if(!e.colorHex)return r;if(e.opacity!==null&&e.opacity<100){const o=(e.opacity/100).toFixed(2),l=parseInt(e.colorHex.slice(1,3),16),s=parseInt(e.colorHex.slice(3,5),16),i=parseInt(e.colorHex.slice(5,7),16);return`rgba(${l},${s},${i},${o})`}return e.colorHex},n=e.colorHex?t(e.colorHex):void 0;switch(e.type){case"shadow":{const r=bo(e.sizeClass,"shadow-");return n1(r,n)}case"inset-shadow":{const r=bo(e.sizeClass,"inset-shadow-");return r1(r,n)}case"ring":{const r=bo(e.sizeClass,"ring-");return`0 0 0 ${r==="0"?0:Number(r)||1}px ${n??"rgba(99,102,241,0.5)"}`}case"inset-ring":{const r=bo(e.sizeClass,"inset-ring-");return`inset 0 0 0 ${r==="0"?0:Number(r)||1}px ${n??"rgba(99,102,241,0.5)"}`}case"text-shadow":return"none"}}function e1(e){if(e.isNone||!e.sizeClass)return"none";const t=o=>{if(!e.colorHex)return o;if(e.opacity!==null&&e.opacity<100){const l=(e.opacity/100).toFixed(2),s=parseInt(e.colorHex.slice(1,3),16),i=parseInt(e.colorHex.slice(3,5),16),a=parseInt(e.colorHex.slice(5,7),16);return`rgba(${s},${i},${a},${l})`}return e.colorHex},n=e.colorHex?t(e.colorHex):void 0,r=bo(e.sizeClass,"text-shadow-");return t1(r,n)}function t1(e,t){const n=t??"rgba(0,0,0,0.25)";return{"2xs":`0 1px 0 ${n}`,xs:`0 1px 1px ${n}`,sm:`0 1px 2px ${n}`,md:`0 2px 4px ${n}`,lg:`0 4px 6px ${n}`}[e]??"none"}function bo(e,t){return e.startsWith(t)?e.slice(t.length):e}function n1(e,t){const n=t??"rgba(0,0,0,0.15)";return{"2xs":`0 1px ${n}`,xs:`0 1px 2px 0 ${n}`,sm:`0 1px 3px 0 ${n}, 0 1px 2px -1px ${n}`,md:`0 4px 6px -1px ${n}, 0 2px 4px -2px ${n}`,lg:`0 10px 15px -3px ${n}, 0 4px 6px -4px ${n}`,xl:`0 20px 25px -5px ${n}, 0 8px 10px -6px ${n}`,"2xl":`0 25px 50px -12px ${n}`}[e]??"none"}function r1(e,t){const n=t??"rgba(0,0,0,0.05)";return{"2xs":`inset 0 0.5px ${n}`,xs:`inset 0 1px 1px ${n}`,sm:`inset 0 2px 4px ${n}`}[e]??"none"}const o1=Array.from({length:21},(e,t)=>`${t*5}%`);function l1({layer:e,onSizeHover:t,onSizeLeave:n,onSizeClick:r,onColorClick:o,onOpacityHover:l,onOpacityLeave:s,onOpacityClick:i,onRemove:a,onRemoveHover:c}){const[d,p]=w.useState(!1),f=w.useRef(),g={onMouseEnter:()=>{clearTimeout(f.current),p(!0)},onMouseLeave:()=>{f.current=setTimeout(()=>p(!1),60)}},v=Z0(e.type),b=q0(e),S=e.type==="text-shadow"?e1(e):"none",h=e.isNone,m=e.sizeClass?J0(e.type,e.sizeClass):v[0],y=!!e.colorHex,x=e.opacity!==null?`${e.opacity}%`:"100%",j=e.colorHex??void 0;function k(N){t(_d(e.type,N))}function C(N){r(_d(e.type,N))}return u.jsxs(u.Fragment,{children:[u.jsx("span",{className:"flex items-center justify-center",...g,children:u.jsx("span",{className:"w-1 h-1 rounded-full bg-bv-orange"})}),u.jsx("span",{className:"flex items-center text-[9px] font-semibold uppercase tracking-[0.8px] text-bv-text-mid font-mono whitespace-nowrap",...g,children:Dh[e.type]}),u.jsx("span",{className:"flex items-center",...g,children:u.jsx(xn,{values:v,currentValue:m,lockedValue:null,locked:!1,onHover:k,onLeave:n,onClick:C})}),u.jsx("button",{type:"button",className:`w-[26px] h-[26px] rounded-[5px] border shrink-0 cursor-pointer transition-[border-color] ${e.colorHex?"border-bv-border hover:border-bv-teal":"border-dashed border-bv-border hover:border-bv-teal"} ${h?"opacity-30 pointer-events-none":""}`,onClick:N=>o(N.currentTarget),title:e.colorClass?e.colorClass:"Default color — click to override",...g,children:e.colorHex?u.jsx("div",{className:"w-full h-full rounded-[4px]",style:{background:j,opacity:e.opacity!==null?e.opacity/100:1}}):u.jsx("div",{className:"w-full h-full rounded-[4px] flex items-center justify-center",children:u.jsx("span",{className:"w-2 h-2 rounded-full bg-bv-text-mid opacity-40"})})}),u.jsx("span",{className:`flex items-center ${h||!y?"opacity-30 pointer-events-none":""}`,...g,children:y&&!h?u.jsx(xn,{values:o1,currentValue:x,lockedValue:null,locked:!1,onHover:l,onLeave:s,onClick:i}):u.jsx("span",{className:"flex items-center justify-center w-full h-[26px] bg-bv-surface border border-bv-border rounded-[5px]",children:u.jsx("span",{className:"font-mono text-[11px] text-bv-muted select-none",children:"—"})})}),u.jsx("span",{className:"ml-4 flex w-[26px] h-[26px] rounded-[5px] bg-bv-surface-hi border border-bv-border transition-[box-shadow] duration-200 items-center justify-center overflow-hidden",style:e.type==="text-shadow"?{}:{boxShadow:b},title:`Preview: ${e.sizeClass??""} ${e.colorClass??""}`.trim(),...g,children:e.type==="text-shadow"&&u.jsx("span",{className:"text-[11px] font-semibold text-bv-text select-none transition-[text-shadow] duration-200",style:{textShadow:S},children:"Aa"})}),u.jsx("button",{type:"button",className:`ml-4 w-[18px] h-[18px] rounded-[3px] border-none bg-transparent text-bv-muted text-xs cursor-pointer flex items-center justify-center transition-all hover:text-bv-orange hover:bg-bv-orange/10 ${d?"opacity-100":"opacity-0"}`,onClick:a,onMouseEnter:()=>{clearTimeout(f.current),p(!0),c()},onMouseLeave:()=>{f.current=setTimeout(()=>p(!1),60)},title:"Remove layer",children:"×"})]})}const s1=["shadow","inset-shadow","ring","inset-ring","text-shadow"];function i1({layers:e,onPreview:t,onRevert:n,onStage:r,onAdd:o,onRemove:l,onRemoveHover:s,onColorClick:i}){function a(d){const p=[];return d.sizeClass&&p.push(d.sizeClass),d.colorClass&&p.push(d.opacity!==null?`${d.colorClass}/${d.opacity}`:d.colorClass),p}const c=s1.map(d=>({type:d,layer:e.find(p=>p.type===d)}));return u.jsx("div",{className:"grid items-center gap-x-1.5 gap-y-1",style:{gridTemplateColumns:"16px auto 1fr 26px 1fr 26px 18px"},children:c.map(({type:d,layer:p},f)=>u.jsxs(w.Fragment,{children:[f>0&&u.jsx("div",{className:"h-px bg-bv-border opacity-50",style:{gridColumn:"1 / -1"}}),p?u.jsx(l1,{layer:p,onSizeHover:g=>t(p.sizeClass??"",g),onSizeLeave:n,onSizeClick:g=>r(p.sizeClass??"",g),onColorClick:g=>i==null?void 0:i(p,g),onOpacityHover:g=>{if(!p.colorClass)return;const v=p.colorClass.split("/")[0],b=parseInt(g),S=b===100?v:`${v}/${b}`,h=p.opacity!==null?`${v}/${p.opacity}`:v;t(h,S)},onOpacityLeave:n,onOpacityClick:g=>{if(!p.colorClass)return;const v=p.colorClass.split("/")[0],b=parseInt(g),S=b===100?v:`${v}/${b}`,h=p.opacity!==null?`${v}/${p.opacity}`:v;r(h,S)},onRemove:()=>l(a(p)),onRemoveHover:()=>s(a(p))}):u.jsxs(u.Fragment,{children:[u.jsx("button",{type:"button",className:"w-4 h-4 rounded-[3px] border border-dashed border-bv-border bg-transparent text-bv-muted text-[11px] cursor-pointer flex items-center justify-center transition-all hover:border-bv-teal hover:border-solid hover:text-bv-teal hover:bg-bv-teal/10",onClick:()=>o(Pd[d]),title:`Add ${Pd[d]}`,children:"+"}),u.jsx("div",{className:"flex items-center leading-none text-[9px] font-mono uppercase tracking-[0.6px] text-bv-muted whitespace-nowrap",children:Dh[d]})]})]},d))})}const Ad=[{prop:"shadow",prefix:"shadow-",sizeSet:ps},{prop:"inset-shadow",prefix:"inset-shadow-",sizeSet:hs},{prop:"ring",prefix:"ring-",sizeSet:Yr},{prop:"inset-ring",prefix:"inset-ring-",sizeSet:Yr},{prop:"text-shadow",prefix:"text-shadow-",sizeSet:ms}];function yr(e,t,n,r,o){if(!t)return n?[...e,n]:e;if(e.includes(t))return n?e.map(c=>c===t?n:c):e.filter(c=>c!==t);if(e.length===0)return n?[n]:[];const l=t.startsWith(r)?t.slice(r.length).split("/")[0]:"",s=o.has(l);let i=!1;const a=e.flatMap(c=>{const d=c.startsWith(r)?c.slice(r.length).split("/")[0]:"";return o.has(d)===s&&!i?(i=!0,n?[n]:[]):[c]});return i?a:n?[...e,n]:e}function a1(e,t){if(!t)return null;const n=e.lastIndexOf("-");if(n===-1){const i=t[e];return typeof i=="string"?i:null}const r=e.slice(0,n),o=e.slice(n+1),l=t[r];if(!l)return null;if(typeof l=="string")return l;const s=l[o];return typeof s=="string"?s:null}function u1(e,t){const n=e.trim().split(/\s+/).filter(Boolean),r=t==null?void 0:t.colors,o=[{type:"shadow",prefix:"shadow-",sizeSet:ps},{type:"inset-shadow",prefix:"inset-shadow-",sizeSet:hs},{type:"ring",prefix:"ring-",sizeSet:Yr},{type:"inset-ring",prefix:"inset-ring-",sizeSet:Yr},{type:"text-shadow",prefix:"text-shadow-",sizeSet:ms}],l=[];for(const{type:s,prefix:i,sizeSet:a}of o){const c=n.filter(v=>v===i.slice(0,-1)||v.startsWith(i));if(c.length===0)continue;let d=null,p=null,f=null,g=null;for(const v of c){const S=v.slice(i.length).split("/")[0];if(a.has(S))d=v;else{p=v;const h=v.split("/");h.length===2&&(g=parseInt(h[1])),f=a1(S,r??null)}}l.push({type:s,sizeClass:d,colorClass:p,colorHex:f,opacity:g,isNone:d!==null&&(d.endsWith("-none")||d.endsWith("-0"))})}return l}function c1(e,t){const n=new Set(["shadow","inset-shadow","ring","inset-ring","text-shadow","shadow-size","shadow-color","inset-shadow-size","inset-shadow-color","ring-size","ring-color","inset-ring-size","inset-ring-color","text-shadow-size","text-shadow-color"]),r=t.filter(s=>n.has(s.property)),o=e.trim().split(/\s+/).filter(Boolean),l=o.filter(s=>!Ad.some(({prefix:i})=>s===i.slice(0,-1)||s.startsWith(i)));for(const{prop:s,prefix:i,sizeSet:a}of Ad){const c=r.find(v=>v.property===s),d=r.find(v=>v.property===`${s}-size`),p=r.find(v=>v.property===`${s}-color`),f=o.filter(v=>v===i.slice(0,-1)||v.startsWith(i));if(c){if(c.newClass)l.push(...yr(f,c.originalClass,c.newClass,i,a));else{const v=c.originalClass.startsWith(i)?c.originalClass.slice(i.length).split("/")[0]:"";a.has(v)||!c.originalClass||l.push(...yr(f,c.originalClass,c.newClass,i,a))}continue}let g=[...f];d&&(d.newClass?g=yr(g,d.originalClass,d.newClass,i,a):d.originalClass&&(g=yr(g,d.originalClass,"",i,a))),p&&(p.newClass?g=yr(g,p.originalClass,p.newClass,i,a):p.originalClass&&(g=yr(g,p.originalClass,"",i,a))),l.push(...g)}return l.join(" ")}const d1={spacing:"Spacing",sizing:"Sizing",typography:"Typography",color:"Backgrounds",borders:"Radius",effects:"Effects",layout:"Layout",flexbox:"Flexbox & Grid",overflow:"Overflow"},f1=["layout","borders","sizing","typography","color","flexbox","shadows","effects"];function Ld(e){const t=e.scale??e.color??e.style??e.align??e.size??e.value;return t?e.fullClass.slice(0,e.fullClass.length-t.length):e.property+"-"}function p1(e){return e.section==="spacing"||e.property==="border"||e.property==="rounded"||e.property==="bg"||e.property==="bg-gradient-to"||e.property==="from"||e.property==="via"||e.property==="to"||e.property==="shadow"||e.property==="text-shadow"}function Hn(e){const t=e.filter(s=>s.property==="rounded"),n=[{prefix:/^rounded-tl(-|$)/,key:"tl"},{prefix:/^rounded-tr(-|$)/,key:"tr"},{prefix:/^rounded-br(-|$)/,key:"br"},{prefix:/^rounded-bl(-|$)/,key:"bl"},{prefix:/^rounded-t(-|$)/,key:"t"},{prefix:/^rounded-r(-|$)/,key:"r"},{prefix:/^rounded-b(-|$)/,key:"b"},{prefix:/^rounded-l(-|$)/,key:"l"}],r=new Map;let o=null;for(const s of t){const i=s.fullClass,a=n.find(c=>c.prefix.test(i));a?r.set(a.key,i):o=i}return{shorthandValue:o,shorthandScaleValues:Ra,slots:["all","t","r","b","l","tl","tr","br","bl"].map(s=>({key:s,value:s==="all"?o:r.get(s)??null,placeholder:s,scaleValues:s==="all"?Ra:Ry(`rounded-${s}`)}))}}const Vn=a0(),Mh=u0(),h1={"text-size":{scaleName:"fontSize",valueType:"scalar"},"text-color":{scaleName:null,valueType:"color"}};Mh.typography.unshift({name:"Font size",prefixHint:"text-sm/base/lg/…",prefix:"text-size"},{name:"Text color",prefixHint:"text-{color}",prefix:"text-color"});function Wl(e){const t=h1[e];if(t)return{...t,stagingKey:e};const n=Object.entries(ar).find(([o,l])=>(l.propertyKey??o.replace(/-$/g,""))===e&&l.addable);if(n){const[o,l]=n;return{scaleName:l.themeKey,valueType:l.valueType,enumAlts:l.enumAlts,stagingKey:e}}const r=ar[e];return r?{scaleName:r.themeKey,valueType:r.valueType,enumAlts:r.enumAlts,stagingKey:e.replace(/-$/g,"")}:null}function m1(e,t,n,r){const o=new Set(t.map(s=>s.fullClass)),l=new Set(t.map(s=>s.property));return e.filter(s=>{if(n.has(s.prefix)||r!=null&&r.has(s.prefix))return!1;const i=Wl(s.prefix);if((i==null?void 0:i.valueType)==="enum"&&i.enumAlts)return!i.enumAlts.some(a=>o.has(a));if(i&&i.valueType!=="enum"){if(s.prefix==="text-size")return!t.some(a=>a.property==="text"&&a.scaleName==="fontSize");if(s.prefix==="text-color")return!t.some(a=>a.property==="text"&&a.color!==void 0)}return!l.has(s.prefix.replace(/-$/g,""))})}function g1(e){const t=new Map;for(const n of e){const r=n.section??"unknown",o=t.get(r)||[];o.push(n),t.set(r,o)}return t}function y1({componentName:e,instanceCount:t,rawClasses:n,parsedClasses:r,tailwindConfig:o,patchManager:l}){var re,le;const[s,i]=w.useState(null),[a,c]=w.useState(new Map),[d,p]=w.useState(new Map),[f,g]=w.useState(null),[v,b]=w.useState(null),[S,h]=w.useState(null),m=w.useRef(null),{refs:y,floatingStyles:x,context:j}=hn({open:f!==null,onOpenChange:E=>{E||(g(null),l.revertPreview())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8}),Ma({apply({availableHeight:E,elements:D}){Object.assign(D.floating.style,{maxHeight:`${E}px`})},padding:8})],whileElementsMounted:un}),k=sr(j),{getFloatingProps:C}=ir([k]);w.useEffect(()=>{f!=null&&f.anchorEl&&y.setReference(f.anchorEl)},[f==null?void 0:f.anchorEl]);const{refs:N,floatingStyles:$,context:A}=hn({open:v!==null||S!==null,onOpenChange:E=>{E||(b(null),h(null),l.revertPreview())},strategy:"fixed",placement:"bottom-start",middleware:[cn(4),fn(),dn({padding:8}),Ma({apply({availableHeight:E,elements:D}){Object.assign(D.floating.style,{maxHeight:`${E}px`})},padding:8})],whileElementsMounted:un}),O=sr(A),{getFloatingProps:F}=ir([O]);w.useEffect(()=>{const E=(v==null?void 0:v.anchorEl)??(S==null?void 0:S.anchorEl);E&&N.setReference(E)},[v==null?void 0:v.anchorEl,S==null?void 0:S.anchorEl]);const[T,_]=w.useState(new Set),[U,W]=w.useState(!1),J=w.useRef(r.map(E=>E.fullClass).join(" ")),R=r.map(E=>E.fullClass).join(" ");w.useEffect(()=>{J.current!==R&&(J.current=R,l.revertPreview(),c(new Map),p(new Map),g(null),b(null),_(new Set))});const I=e,P=l.patches.filter(E=>E.status==="staged"&&E.elementKey===I),G=new Set(P.filter(E=>E.originalClass==="").map(E=>E.property));function q(E,D){const z=P.find(ge=>ge.property===E),X=(D==null?void 0:D.fullClass)??(z==null?void 0:z.originalClass)??"",te=(z==null?void 0:z.newClass)??(D==null?void 0:D.fullClass)??"";return{originalClass:X,effectiveClass:te,hasValue:te!==""}}function Qe(E){return a.size===0?E:E.map(D=>{const z=a.get(`${D.layer}-shorthand`),X=D.slots.map(ge=>{const ke=a.get(`${D.layer}-${ge.key}`);return ke!==void 0?{...ge,value:ke}:ge}),te=z??D.shorthandValue;let de=D.classState;return z!==void 0&&(de=X.some(ke=>ke.value!=null)?"mixed":"shorthand"),{...D,shorthandValue:te,classState:de,slots:X}})}function ze(E){if(d.size===0)return E;const D=d.get("all");return{...E,shorthandValue:D===void 0?E.shorthandValue:D,slots:E.slots.map(z=>{const X=d.get(z.key);return X===void 0?z:{...z,value:X}})}}const je=g1(r);function ae(E,D){l.preview(E,D)}function Re(){l.revertPreview()}function me(E,D,z){l.stage(I,E,D,z)}function eo(E,D){const z=E||D,X=z.startsWith("bg-gradient-to-")?"bg-gradient-to-":z.startsWith("from-")?"from-":z.startsWith("via-")?"via-":z.startsWith("to-")?"to-":"bg-";me(X,E,D)}function to(E,D){l.revertPreview(),pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),E.color!==void 0&&D?(b(z=>(z==null?void 0:z.cls.fullClass)===E.fullClass?null:{cls:E,anchorEl:D}),i(null)):(b(null),i(E))}function pr(E,D){l.preview(E.fullClass,D)}function no(E){l.revertPreview()}function ro(E){const D=ar[E];if(!((D==null?void 0:D.controlGroup)==="flex-container"&&(D==null?void 0:D.propertyKey)==="display")){if((D==null?void 0:D.controlGroup)==="flex-container"){const z=r.some(te=>te.fullClass==="flex"||te.fullClass==="inline-flex"),X=P.some(te=>te.property==="display"&&te.originalClass===""&&(te.newClass==="flex"||te.newClass==="inline-flex"));!z&&!X&&l.stage(I,"display","","flex")}}_(z=>new Set(z).add(E))}function Ft(E,D){l.preview("",D)}function Kn(E){l.revertPreview()}function ee(E,D){const z=Wl(E);l.stage(I,(z==null?void 0:z.stagingKey)??E,"",D),_(X=>{const te=new Set(X);return te.delete(E),te})}return u.jsxs("div",{className:"divide-y divide-bv-border",children:[u.jsxs("div",{className:"px-4 py-3",children:[u.jsxs("div",{className:"flex items-center gap-1.5 cursor-pointer select-none",onClick:()=>W(E=>!E),children:[u.jsx("svg",{className:`w-3 h-3 text-bv-muted transition-transform ${U?"":"rotate-90"}`,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:u.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M9 5l7 7-7 7"})}),u.jsx("span",{className:"text-[10px] font-semibold text-bv-text",children:"Box model"})]}),u.jsx("div",{className:`overflow-hidden transition-[max-height,opacity] duration-200 ease-in-out ${U?"max-h-0 opacity-0":"max-h-[600px] opacity-100"}`,children:u.jsxs("div",{className:"mt-3",children:[u.jsx(w0,{layers:Qe(gr(r,o)),onEditStart:()=>{pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),g(null)},onSlotClick:(E,D,z)=>{var ke;if(D!=="color"||!z){g(null);return}const X=gr(r,o).find(tt=>tt.layer===E),te=`${E}-color`,de=a.get(te)??((ke=X==null?void 0:X.slots.find(tt=>tt.key==="color"))==null?void 0:ke.value)??"",ge=E==="outline"?"outline-":"border-";g(tt=>(tt==null?void 0:tt.layer)===E?null:{layer:E,prefix:ge,currentClass:de,staged:!1,anchorEl:z})},onSlotHover:(E,D,z)=>{var X;if(z===null)l.revertPreview();else{const te=`${E}-${D}`,de=gr(r,o).find(ke=>ke.layer===E),ge=D==="shorthand"?a.get(te)??(de==null?void 0:de.shorthandValue):a.get(te)??((X=de==null?void 0:de.slots.find(ke=>ke.key===D))==null?void 0:X.value);l.preview(ge??"",z)}},onSlotChange:(E,D,z)=>{var ge;const X=`${E}-${D}`,te=gr(r,o).find(ke=>ke.layer===E),de=D==="shorthand"?a.get(X)??(te==null?void 0:te.shorthandValue):a.get(X)??((ge=te==null?void 0:te.slots.find(ke=>ke.key===D))==null?void 0:ge.value);me(`${E}-${D}`,de??"",z),c(ke=>new Map(ke).set(X,z))},onSlotRemoveHover:(E,D)=>{var de;const z=`${E}-${D}`,X=gr(r,o).find(ge=>ge.layer===E),te=D==="shorthand"?a.get(z)??(X==null?void 0:X.shorthandValue):a.get(z)??((de=X==null?void 0:X.slots.find(ge=>ge.key===D))==null?void 0:de.value);te&&l.preview(te,"")},onSlotRemove:(E,D)=>{var de;const z=`${E}-${D}`,X=gr(r,o).find(ge=>ge.layer===E),te=D==="shorthand"?a.get(z)??(X==null?void 0:X.shorthandValue):a.get(z)??((de=X==null?void 0:X.slots.find(ge=>ge.key===D))==null?void 0:de.value);te&&(me(`${E}-${D}`,te,""),c(ge=>{const ke=new Map(ge);return ke.delete(z),ke}))}}),f&&u.jsx(pn,{children:u.jsx("div",{ref:y.setFloating,style:{...x,zIndex:9999,overflowY:"auto"},...C(),children:u.jsx(Fl,{prefix:f.prefix,currentValue:f.currentClass.startsWith(f.prefix)?f.currentClass.slice(f.prefix.length):"",colors:(o==null?void 0:o.colors)||{},locked:!1,lockedValue:((re=P.find(E=>E.property===f.prefix))==null?void 0:re.newClass)??null,onHover:E=>{m.current=E,l.preview(f.currentClass,E)},onLeave:()=>{f.staged&&m.current?(l.preview(m.current,f.currentClass),m.current=null):l.revertPreview()},onClick:E=>{const D=`${f.layer}-color`;me(f.prefix,f.currentClass,E),c(z=>new Map(z).set(D,E)),g(z=>z?{...z,currentClass:E,staged:!0}:null)}})})})]})})]}),(v||S)&&u.jsx(pn,{children:u.jsxs("div",{ref:N.setFloating,style:{...$,zIndex:9999,overflowY:"auto"},...F(),children:[v&&u.jsx(Fl,{prefix:Ld(v.cls),currentValue:v.cls.color??"",colors:(o==null?void 0:o.colors)||{},locked:!1,lockedValue:((le=P.find(E=>E.property===v.cls.property))==null?void 0:le.newClass)??null,onHover:E=>ae(v.cls.fullClass,E),onLeave:Re,onClick:E=>me(v.cls.property,v.cls.fullClass,E),onRemoveHover:()=>ae(v.cls.fullClass,""),onRemove:()=>{me(v.cls.property,v.cls.fullClass,""),b(null)}}),S&&(()=>{const{layer:E}=S,D=E.type==="shadow"?"shadow-":E.type==="inset-shadow"?"inset-shadow-":E.type==="ring"?"ring-":E.type==="text-shadow"?"text-shadow-":"inset-ring-",z=E.colorClass??"",X=z?z.slice(D.length).split("/")[0]:"";return u.jsx(Fl,{prefix:D,currentValue:X,colors:(o==null?void 0:o.colors)||{},locked:!1,lockedValue:null,onHover:te=>ae(z,te),onLeave:Re,onClick:te=>{const de=E.type==="shadow"?"shadow-color":E.type==="inset-shadow"?"inset-shadow-color":E.type==="ring"?"ring-color":E.type==="text-shadow"?"text-shadow-color":"inset-ring-color";l.stage(I,de,z,te),h(null)},onRemoveHover:()=>{z&&ae(z,"")},onRemove:()=>{if(z){const te=E.type==="shadow"?"shadow-color":E.type==="inset-shadow"?"inset-shadow-color":E.type==="ring"?"ring-color":E.type==="text-shadow"?"text-shadow-color":"inset-ring-color";l.stage(I,te,z,"")}h(null)}})})()]})}),f1.map(E=>{if(E==="shadows"){const L=c1(n,P),Q=u1(L,o);return u.jsx(jd,{label:"Shadows & Rings",onAddProperty:()=>{},isEmpty:!1,classCount:Q.length,children:u.jsx(i1,{layers:Q,onPreview:(V,B)=>l.preview(V,B),onRevert:()=>l.revertPreview(),onStage:(V,B)=>{const ue=V||B,oe=Ve=>{if(Ve.startsWith("shadow-")){const Ke=Ve.slice(7).split("/")[0];return ps.has(Ke)}if(Ve.startsWith("inset-shadow-")){const Ke=Ve.slice(13).split("/")[0];return hs.has(Ke)}if(Ve.startsWith("ring-")||Ve.startsWith("inset-ring-")){const Ke=Ve.slice(Ve.startsWith("ring-")?5:11).split("/")[0];return Yr.has(Ke)}if(Ve.startsWith("text-shadow-")){const Ke=Ve.slice(12).split("/")[0];return ms.has(Ke)}return!1},De=ue.startsWith("text-shadow")?"text-shadow":ue.startsWith("inset-shadow")?"inset-shadow":ue.startsWith("inset-ring")?"inset-ring":ue.startsWith("ring")?"ring":"shadow",Wt=oe(V)||V===""&&oe(B)?`${De}-size`:`${De}-color`;l.stage(I,Wt,V,B)},onAdd:V=>{const B=V.startsWith("text-shadow")?"text-shadow-size":V.startsWith("inset-shadow")?"inset-shadow-size":V.startsWith("inset-ring")?"inset-ring-size":V.startsWith("ring")?"ring-size":"shadow-size";l.stage(I,B,"",V)},onRemove:V=>{const B=oe=>{if(oe.startsWith("shadow-")){const De=oe.slice(7).split("/")[0];return ps.has(De)}if(oe.startsWith("inset-shadow-")){const De=oe.slice(13).split("/")[0];return hs.has(De)}if(oe.startsWith("ring-")||oe.startsWith("inset-ring-")){const De=oe.slice(oe.startsWith("ring-")?5:11).split("/")[0];return Yr.has(De)}if(oe.startsWith("text-shadow-")){const De=oe.slice(12).split("/")[0];return ms.has(De)}return!1},ue=[...V].reverse();for(const oe of ue){const De=oe.startsWith("text-shadow")?"text-shadow":oe.startsWith("inset-shadow")?"inset-shadow":oe.startsWith("inset-ring")?"inset-ring":oe.startsWith("ring")?"ring":"shadow",Wt=B(oe)?`${De}-size`:`${De}-color`;l.stage(I,Wt,oe,"")}},onRemoveHover:V=>{V.length===1?l.preview(V[0],""):V.length>1&&l.preview(V.join(" "),"")},onColorClick:(V,B)=>{b(null),h(ue=>(ue==null?void 0:ue.layer.type)===V.type?null:{layer:V,anchorEl:B})}})},"shadows")}const z=(je.get(E)||[]).filter(L=>!p1(L)),X=Mh[E]||[],te=s0.get("flex-container")??new Set,de=i0.get("flex-container")??new Set,ge=r.some(L=>{if(L.fullClass==="flex"||L.fullClass==="inline-flex")return!0;const Q=Vn[L.fullClass];return!!(Q&&Q.propertyKey!=="display"&&te.has(Q.propertyKey)||te.has(L.property))}),ke=[...de].some(L=>T.has(L)||G.has(L.replace(/-$/,""))),tt=E==="flexbox"&&(ge||ke),$h=tt?X.filter(L=>!de.has(L.prefix)):X,zh=m1($h,z,T,G),Bs=X.filter(L=>T.has(L.prefix)).map(L=>L.prefix),Us=X.filter(L=>G.has(L.prefix.replace(/-$/g,""))).map(L=>L.prefix),Kh=E==="color"||E==="flexbox"&&tt||E==="borders"?!1:z.length===0&&Bs.length===0&&Us.length===0,Fh=E==="borders"?Hn(r).slots.filter(L=>L.value!=null).length+(Hn(r).shorthandValue?1:0):z.length+Bs.length+Us.length;return u.jsxs(jd,{label:d1[E]??E,availableProperties:zh,onAddProperty:ro,isEmpty:Kh,classCount:Fh,children:[E==="borders"&&u.jsx(R0,{state:ze(Hn(r)),onSlotHover:(L,Q)=>{var oe;const V=Hn(r),ue=(L==="all"?d.get("all")??V.shorthandValue:d.get(L)??((oe=V.slots.find(De=>De.key===L))==null?void 0:oe.value)??null)??"";Q===null?l.revertPreview():l.preview(ue,Q)},onSlotChange:(L,Q)=>{var ue;const V=Hn(r),B=d.get(L)??(L==="all"?V.shorthandValue:(ue=V.slots.find(oe=>oe.key===L))==null?void 0:ue.value)??"";me(`rounded-${L}`,B,Q),p(oe=>new Map(oe).set(L,Q))},onSlotRemove:L=>{var V;const Q=d.get(L)??((V=Hn(r).slots.find(B=>B.key===L))==null?void 0:V.value)??"";Q&&(me(`rounded-${L}`,Q,""),p(B=>new Map(B).set(L,null)))},onSlotRemoveHover:L=>{var V;const Q=d.get(L)??((V=Hn(r).slots.find(B=>B.key===L))==null?void 0:V.value)??"";Q&&l.preview(Q,"")},onEditStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"})}),E==="color"&&u.jsx(M0,{...$0(r,(o==null?void 0:o.colors)||{},P.filter(L=>L.elementKey===I)),onPreview:ae,onPreviewBatch:L=>l.previewBatch(L),onRevert:Re,onStage:eo}),E==="flexbox"&&tt&&(()=>{const L=r,Q=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="flex-direction"}),V=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="justify-content"}),B=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="align-items"}),ue=L.find(ne=>{const fe=Vn[ne.fullClass];return(fe==null?void 0:fe.propertyKey)==="flex-wrap"}),oe={"flex-row":"row","flex-col":"column","flex-row-reverse":"row-reverse","flex-col-reverse":"column-reverse"},De=(Q==null?void 0:Q.fullClass)??null,ol=De?oe[De]??"row":"row",Wt=q("flex-direction",Q),Ve=q("flex-wrap",ue),Ke=q("justify-content",V),Ht=q("align-items",B),Wh=r.find(ne=>ne.property==="gap"),Hh=r.find(ne=>ne.property==="gap-x"),Vh=r.find(ne=>ne.property==="gap-y"),oo=q("gap",Wh),lo=q("gap-x",Hh),so=q("gap-y",Vh),Bh=[{key:"gap",value:oo.effectiveClass||null,scaleValues:mr("gap-","spacing",o)},{key:"gap-x",value:lo.effectiveClass||null,scaleValues:mr("gap-x-","spacing",o)},{key:"gap-y",value:so.effectiveClass||null,scaleValues:mr("gap-y-","spacing",o)}];return u.jsxs(u.Fragment,{children:[u.jsxs("div",{className:"flex justify-between items-start w-full",children:[u.jsx(F0,{currentValue:(Q==null?void 0:Q.fullClass)??null,lockedValue:Wt.effectiveClass!==Wt.originalClass?Wt.effectiveClass:null,locked:!1,onHover:ne=>ae(Wt.effectiveClass,ne),onLeave:Re,onClick:ne=>me("flex-direction",Wt.originalClass,ne)}),u.jsx(B0,{currentValue:(ue==null?void 0:ue.fullClass)??null,lockedValue:Ve.effectiveClass!==Ve.originalClass?Ve.effectiveClass:null,locked:!1,onHover:ne=>ae(Ve.effectiveClass,ne),onLeave:Re,onClick:ne=>me("flex-wrap",Ve.originalClass,ne)}),u.jsx(Y0,{currentValue:(V==null?void 0:V.fullClass)??null,lockedValue:Ke.effectiveClass!==Ke.originalClass?Ke.effectiveClass:null,locked:!1,flexDirection:ol,onHover:ne=>ae(Ke.effectiveClass,ne),onLeave:Re,onClick:ne=>me("justify-content",Ke.originalClass,ne),onRemove:Ke.hasValue?()=>me("justify-content",Ke.originalClass,""):void 0,onRemoveHover:Ke.hasValue?()=>ae(Ke.effectiveClass,""):void 0}),u.jsx(Q0,{currentValue:(B==null?void 0:B.fullClass)??null,lockedValue:Ht.effectiveClass!==Ht.originalClass?Ht.effectiveClass:null,locked:!1,flexDirection:ol,onHover:ne=>ae(Ht.effectiveClass,ne),onLeave:Re,onClick:ne=>me("align-items",Ht.originalClass,ne),onRemove:Ht.hasValue?()=>me("align-items",Ht.originalClass,""):void 0,onRemoveHover:Ht.hasValue?()=>ae(Ht.effectiveClass,""):void 0})]}),u.jsx("div",{className:"h-px w-full bg-bv-border opacity-50 my-2"}),u.jsx(X0,{slots:Bh,onSlotHover:(ne,fe)=>{const Ku=ne==="gap"?oo:ne==="gap-x"?lo:so;fe===null?l.revertPreview():l.preview(Ku.effectiveClass,fe)},onSlotRemoveHover:ne=>{const fe=ne==="gap"?oo:ne==="gap-x"?lo:so;fe.hasValue&&l.preview(fe.effectiveClass,"")},onSlotChange:(ne,fe)=>{me(ne,(ne==="gap"?oo:ne==="gap-x"?lo:so).originalClass,fe)},onSlotRemove:ne=>{const fe=ne==="gap"?oo:ne==="gap-x"?lo:so;fe.hasValue&&(l.preview(fe.effectiveClass,""),me(ne,fe.originalClass,""))}})]})})(),z.map(L=>{var Q,V;if(tt){const B=Vn[L.fullClass];if(B&&te.has(B.propertyKey)||te.has(L.property))return null}if(L.scaleName!==void 0){const B=mr(Ld(L),L.scaleName,o);if(B.length>0){const ue=((Q=P.find(oe=>oe.property===L.property))==null?void 0:Q.newClass)??null;return u.jsx(xn,{values:B,currentValue:L.fullClass,lockedValue:ue,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:oe=>pr(L,oe),onLeave:()=>no(),onClick:oe=>me(L.property,L.fullClass,oe),onRemoveHover:()=>l.preview(L.fullClass,""),onRemove:()=>me(L.property,L.fullClass,"")},L.fullClass)}}if(L.scaleName===void 0&&L.color===void 0){const B=Vn[L.fullClass];if(B){const ue=((V=P.find(oe=>oe.property===B.propertyKey))==null?void 0:V.newClass)??null;return u.jsx(xn,{values:B.alternatives,currentValue:L.fullClass,lockedValue:ue,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:oe=>pr(L,oe),onLeave:()=>no(),onClick:oe=>me(B.propertyKey,L.fullClass,oe),onRemoveHover:()=>l.preview(L.fullClass,""),onRemove:()=>me(B.propertyKey,L.fullClass,"")},L.fullClass)}}return u.jsxs("div",{className:`group flex items-center gap-1 px-2 py-0.5 rounded cursor-pointer text-[11px] font-mono border transition-colors ${(s==null?void 0:s.fullClass)===L.fullClass||(v==null?void 0:v.cls.fullClass)===L.fullClass?"border-bv-border bg-bv-surface-hi text-bv-text":"bg-bv-surface text-bv-text-mid border-transparent hover:border-bv-teal hover:text-bv-teal"}`,onClick:B=>to(L,B.currentTarget),children:[L.fullClass,u.jsx("span",{className:"opacity-0 group-hover:opacity-60 hover:!opacity-100 ml-0.5 shrink-0",title:"Remove class",onClick:B=>{B.stopPropagation(),me(L.property,L.fullClass,"")},onMouseEnter:B=>{B.stopPropagation(),l.preview(L.fullClass,"")},onMouseLeave:B=>{B.stopPropagation(),l.revertPreview()},children:u.jsxs("svg",{viewBox:"0 0 10 10",width:"8",height:"8",xmlns:"http://www.w3.org/2000/svg",children:[u.jsx("line",{x1:"1",y1:"1",x2:"9",y2:"9",stroke:"#F5532D",strokeWidth:"1.8",strokeLinecap:"round"}),u.jsx("line",{x1:"9",y1:"1",x2:"1",y2:"9",stroke:"#F5532D",strokeWidth:"1.8",strokeLinecap:"round"})]})})]},L.fullClass)}),Us.filter(L=>!(tt&&de.has(L))).map(L=>{const Q=Wl(L);if(!Q)return null;if(Q.valueType==="scalar"){const V=mr(L,Q.scaleName,o);if(V.length===0)return null;const B=P.find(ue=>ue.property===Q.stagingKey);return u.jsx(xn,{values:V,currentValue:(B==null?void 0:B.newClass)??V[Math.floor(V.length/2)],lockedValue:(B==null?void 0:B.newClass)??null,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:ue=>Ft(L,ue),onLeave:()=>Kn(),onClick:ue=>ee(L,ue)},`staged-${L}`)}if(Q.valueType==="enum"&&Q.enumAlts){const V=P.find(B=>B.property===Q.stagingKey);return u.jsx(xn,{values:Q.enumAlts,currentValue:(V==null?void 0:V.newClass)??Q.enumAlts[0],lockedValue:(V==null?void 0:V.newClass)??null,locked:!1,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:B=>Ft(L,B),onLeave:()=>Kn(),onClick:B=>ee(L,B)},`staged-${L}`)}return null}),Bs.filter(L=>!(tt&&de.has(L))).map(L=>{const Q=Wl(L);if(!Q)return null;if(Q.valueType==="scalar"){const V=mr(L,Q.scaleName,o);if(V.length>0)return u.jsx(xn,{values:V,currentValue:V[Math.floor(V.length/2)],lockedValue:null,locked:!1,ghost:!0,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:B=>Ft(L,B),onLeave:()=>Kn(),onClick:B=>ee(L,B)},`pending-${L}`)}return Q.valueType==="enum"&&Q.enumAlts?u.jsx(xn,{values:Q.enumAlts,currentValue:Q.enumAlts[0],lockedValue:null,locked:!1,ghost:!0,onStart:()=>pe("overlay",{type:"CLEAR_HIGHLIGHTS"}),onHover:V=>Ft(L,V),onLeave:()=>Kn(),onClick:V=>ee(L,V)},`pending-${L}`):Q.valueType==="color"?u.jsxs("div",{"data-testid":`pending-ghost-${L}`,className:"px-2 py-0.5 rounded cursor-pointer text-[11px] font-mono border border-dashed border-bv-border text-bv-muted hover:border-bv-teal hover:text-bv-teal transition-colors",onClick:V=>{b({cls:{property:"text",fullClass:"",section:"typography",color:""},anchorEl:V.currentTarget}),i(null)},children:[L==="text-color"?"text-":L,"color"]},`pending-${L}`):null})]},E)})]})}const v1=w.lazy(()=>ky(()=>import("./DesignMode-CowjbsQM.js"),[]).then(e=>({default:e.DesignMode}))),x1=new URLSearchParams(window.location.search),w1=x1.get("mode"),Id=[{id:"design",label:"Design"},{id:"draw",label:"Components"},{id:"message",label:"Message"}];function b1(){return w1==="design"?u.jsx(w.Suspense,{fallback:null,children:u.jsx(v1,{})}):u.jsx(S1,{})}function S1(){const[e,t]=w.useState(!1),[n,r]=w.useState(null),[o,l]=w.useState(0),[s,i]=w.useState("design"),[a,c]=w.useState(!1),d=Cv();w.useEffect(()=>{const T=Jy(()=>{t(!0);try{const W=localStorage.getItem("tw-panel-container");W&&W!=="popover"&&pe("overlay",{type:"SWITCH_CONTAINER",container:W})}catch{}}),_=qy(()=>t(!1)),U=th(W=>{W.type==="RESET_SELECTION"?(r(null),l(J=>J+1)):W.type==="ELEMENT_SELECTED"?(r({componentName:W.componentName,instanceCount:W.instanceCount,classes:W.classes,parsedClasses:Dy(W.classes,Xy),tailwindConfig:W.tailwindConfig}),l(J=>J+1),c(!1)):W.type==="SELECT_MODE_CHANGED"?c(!!W.active):W.type==="QUEUE_UPDATE"?d.handleQueueUpdate({draftCount:W.draftCount,committedCount:W.committedCount,implementingCount:W.implementingCount,implementedCount:W.implementedCount,partialCount:W.partialCount,errorCount:W.errorCount,draft:W.draft,commits:W.commits,agentWaiting:W.agentWaiting}):W.type==="PATCH_UPDATE"&&d.handlePatchUpdate({staged:W.staged,committed:W.committed,implementing:W.implementing,implemented:W.implemented,patches:W.patches})});return eh(),t(ev()),()=>{T(),_(),U()}},[]),w.useEffect(()=>{const T=_=>{_.key==="Escape"&&n&&(r(null),l(U=>U+1),pe("overlay",{type:"CLEAR_HIGHLIGHTS",deselect:!0}))};return document.addEventListener("keydown",T),()=>document.removeEventListener("keydown",T)},[n]);const{draft:p,committed:f,implementing:g,implemented:v,partial:b,error:S}=d.counts,h=(p>0||f>0)&&!d.agentWaiting&&g===0,m=new Map(d.patches.filter(T=>T.status==="staged").map(T=>[T.id,{id:T.id,kind:T.kind??"class-change",elementKey:T.elementKey,status:T.status,originalClass:T.originalClass,newClass:T.newClass,property:T.property,timestamp:T.timestamp,component:T.component,message:T.message,image:T.image}])),y=new Set(d.queueState.draft.map(T=>T.id)),x=[...d.queueState.draft.map(T=>m.get(T.id)??T),...d.patches.filter(T=>T.status==="staged"&&!y.has(T.id)).map(T=>m.get(T.id))],j=d.queueState.commits.filter(T=>T.status==="committed"),k=d.queueState.commits.filter(T=>T.status==="implementing"),C=d.queueState.commits.filter(T=>T.status==="implemented"),N="Please implement the next change and continue implementing changes with VyBit.";async function $(T){if(navigator.clipboard){try{if((await navigator.permissions.query({name:"clipboard-write"})).state==="denied"){A(T);return}}catch{}navigator.clipboard.writeText(T).catch(()=>A(T))}else A(T)}function A(T){const _=document.createElement("textarea");_.value=T,_.style.position="fixed",_.style.opacity="0",document.body.appendChild(_),_.select(),document.execCommand("copy"),document.body.removeChild(_)}const O=u.jsxs("div",{className:"shrink-0",children:[!e&&u.jsxs("div",{className:"flex items-center gap-1.5 px-2.5 py-1.5 bg-amber-950/40 border-t border-amber-800/40 text-amber-300 text-[10px] font-medium",children:[u.jsx("div",{className:"w-1.5 h-1.5 rounded-full bg-bv-orange animate-pulse shrink-0"}),u.jsxs("span",{className:"flex-1 leading-tight",children:["No agent listening —"," ",u.jsx("a",{href:"https://github.com/bitovi/vybit?tab=readme-ov-file#telling-your-agent-to-start-making-features",target:"_blank",rel:"noreferrer",className:"underline hover:text-amber-100",children:"ask your agent"})," ","to start!"]}),u.jsx("button",{onClick:()=>$(N),className:"shrink-0 px-1.5 py-0.5 rounded border border-amber-700/50 bg-amber-900/40 hover:bg-amber-800/40 text-amber-300 font-semibold text-[9px] transition-colors",title:`Copy: "${N}"`,children:"Copy prompt"})]}),h&&u.jsxs("div",{className:"flex items-center gap-1.5 px-2.5 py-1.5 bg-amber-950/40 border-t border-amber-800/40 text-amber-300 text-[10px] font-medium",children:[u.jsx("svg",{width:"12",height:"12",viewBox:"0 0 20 20",fill:"currentColor",className:"shrink-0 text-amber-400",children:u.jsx("path",{fillRule:"evenodd",d:"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.19-1.458-1.516-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"})}),u.jsxs("span",{className:"flex-1 leading-tight",children:["No agent watching —"," ",u.jsx("a",{href:"https://github.com/bitovi/vybit?tab=readme-ov-file#telling-your-agent-to-start-making-features",target:"_blank",rel:"noreferrer",className:"underline hover:text-amber-100",children:"ask your agent"})," ","to start"]}),u.jsx("button",{onClick:()=>$(N),className:"shrink-0 px-1.5 py-0.5 rounded border border-amber-700/50 bg-amber-900/40 hover:bg-amber-800/40 text-amber-300 font-semibold text-[9px] transition-colors",title:`Copy: "${N}"`,children:"Copy prompt"})]}),u.jsxs("div",{className:"flex items-center justify-center px-3 py-1.5 border-t border-bv-border gap-3 text-[10px]",children:[u.jsx(Sl,{label:"draft",count:p,items:x,activeColor:"text-amber-400",onDiscard:T=>d.discard(T),onCommitAll:()=>d.commitAll(),onDiscardAll:()=>d.discardAll()}),u.jsx(Sl,{label:"committed",count:f,items:j.flatMap(T=>T.patches),activeColor:"text-bv-orange"}),u.jsx(Sl,{label:"implementing",count:g,items:k.flatMap(T=>T.patches),activeColor:"text-blue-400"}),u.jsx(Sl,{label:"implemented",count:v,items:C.flatMap(T=>T.patches),activeColor:"text-bv-teal"})]})]});if(!n)return u.jsxs("div",{className:"h-full flex flex-col",children:[u.jsx("div",{className:"px-3 pt-3 pb-2 border-b border-bv-border",children:u.jsxs("div",{className:"flex items-center justify-between gap-2",children:[u.jsx(Od,{active:a,onToggle:()=>{const T=!a;c(T),pe("overlay",{type:"TOGGLE_SELECT_MODE",active:T})}}),u.jsx("div",{className:"flex-1 min-w-0",children:a?u.jsx("span",{className:"text-[11px] text-bv-teal font-medium",children:"● Selecting… click an element on the page"}):u.jsx("span",{className:"text-[12px] text-bv-muted",children:"No element selected"})}),u.jsx(Jc,{})]})}),u.jsx(rd,{tabs:Id,activeTab:s,onTabChange:i}),u.jsx("div",{className:"flex-1 overflow-auto",children:s==="draw"?u.jsx(td,{}):s==="message"?u.jsx(nd,{draft:x,currentElementKey:"",onAddMessage:(T,_)=>d.stageMessage(T,_),onDiscard:T=>d.discard(T)}):a?u.jsxs("div",{className:"flex flex-1 flex-col items-center justify-center gap-2 p-8",children:[u.jsx("div",{className:"w-10 h-10 rounded-full bg-bv-teal text-white flex items-center justify-center",children:u.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 16 16",fill:"currentColor",children:[u.jsx("path",{d:"M14,0H2C.895,0,0,.895,0,2V14c0,1.105,.895,2,2,2H6c.552,0,1-.448,1-1h0c0-.552-.448-1-1-1H2V2H14V6c0,.552,.448,1,1,1h0c.552,0,1-.448,1-1V2c0-1.105-.895-2-2-2Z"}),u.jsx("path",{d:"M12.043,10.629l2.578-.644c.268-.068,.43-.339,.362-.607-.043-.172-.175-.308-.345-.358l-7-2c-.175-.051-.363-.002-.492,.126-.128,.129-.177,.317-.126,.492l2,7c.061,.214,.257,.362,.48,.362h.009c.226-.004,.421-.16,.476-.379l.644-2.578,3.664,3.664c.397,.384,1.03,.373,1.414-.025,.374-.388,.374-1.002,0-1.389l-3.664-3.664Z"})]})}),u.jsx("span",{className:"text-[12px] text-bv-teal font-medium",children:"Selection mode active"}),u.jsxs("span",{className:"text-[12px] text-bv-muted text-center leading-relaxed",children:["Hover over elements on the page to preview, then click to select.",u.jsx("br",{}),"Press"," ",u.jsx("span",{className:"inline-flex items-center px-1.5 py-0.5 rounded bg-white/6 border border-white/8 font-mono text-[10px] text-bv-text-mid leading-none",children:"Esc"})," ","to cancel."]})]}):u.jsx("div",{className:"flex flex-1 flex-col justify-center p-4",children:u.jsxs("button",{onClick:()=>{c(!0),pe("overlay",{type:"TOGGLE_SELECT_MODE",active:!0})},className:"w-full flex flex-col items-center gap-3 px-6 py-5 rounded-lg border border-bv-border bg-bv-surface hover:border-bv-teal hover:bg-bv-teal/5 transition-all cursor-pointer",children:[u.jsx("div",{className:"w-14 h-14 rounded-full bg-bv-teal/10 text-bv-teal flex items-center justify-center",children:u.jsxs("svg",{width:"28",height:"28",viewBox:"0 0 64 64",fill:"currentColor",children:[u.jsx("path",{d:"M2,9C1.447,9,1,8.552,1,8V2c0-0.552,0.447-1,1-1h6c0.553,0,1,0.448,1,1S8.553,3,8,3H3v5C3,8.552,2.553,9,2,9z"}),u.jsx("path",{d:"M8,48H2c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v5h5c0.553,0,1,0.448,1,1S8.553,48,8,48z"}),u.jsx("path",{d:"M47,9c-0.553,0-1-0.448-1-1V3h-5c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1v6C48,8.552,47.553,9,47,9z"}),u.jsx("path",{d:"M21,3h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1S21.553,3,21,3z"}),u.jsx("path",{d:"M2,22c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v6C3,21.552,2.553,22,2,22z"}),u.jsx("path",{d:"M2,35c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v6C3,34.552,2.553,35,2,35z"}),u.jsx("path",{d:"M47,22c-0.553,0-1-0.448-1-1v-6c0-0.552,0.447-1,1-1s1,0.448,1,1v6C48,21.552,47.553,22,47,22z"}),u.jsx("path",{d:"M47,31c-0.553,0-1-0.448-1-1v-2c0-0.552,0.447-1,1-1s1,0.448,1,1v2C48,30.552,47.553,31,47,31z"}),u.jsx("path",{d:"M34,3h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1S34.553,3,34,3z"}),u.jsx("path",{d:"M21,48h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h6c0.553,0,1,0.448,1,1S21.553,48,21,48z"}),u.jsx("path",{d:"M30,48h-2c-0.553,0-1-0.448-1-1s0.447-1,1-1h2c0.553,0,1,0.448,1,1S30.553,48,30,48z"}),u.jsx("path",{d:"M62.707,57.293L51.688,46.274l10.759-5.379c0.368-0.184,0.586-0.575,0.549-0.985c-0.037-0.41-0.322-0.755-0.717-0.87l-31-9c-0.355-0.1-0.729-0.005-0.986,0.253c-0.258,0.258-0.355,0.636-0.253,0.986l9,31c0.114,0.396,0.46,0.68,0.869,0.717C39.94,62.999,39.971,63,40,63c0.376,0,0.724-0.212,0.895-0.553l5.38-10.759l11.019,11.019c0.391,0.391,1.023,0.391,1.414,0l4-4C63.098,58.316,63.098,57.684,62.707,57.293z"})]})}),u.jsx("span",{className:"text-[12px] text-bv-text font-medium",children:"Select an element to inspect"}),u.jsxs("span",{className:"inline-flex items-center gap-1",children:[u.jsx("span",{className:"w-5 h-5 rounded flex items-center justify-center bg-white/6 border border-white/8 font-mono text-[10px] font-semibold text-bv-text-mid leading-none",children:"⌘"}),u.jsx("span",{className:"w-5 h-5 rounded flex items-center justify-center bg-white/6 border border-white/8 font-mono text-[10px] font-semibold text-bv-text-mid leading-none",children:"⇧"}),u.jsx("span",{className:"w-5 h-5 rounded flex items-center justify-center bg-white/6 border border-white/8 font-mono text-[10px] font-semibold text-bv-text-mid leading-none",children:"C"})]})]})})}),O]});const F=n.parsedClasses;return u.jsxs("div",{className:"h-full flex flex-col",children:[u.jsx("div",{className:"px-3 pt-3 pb-2 border-b border-bv-border",children:u.jsxs("div",{className:"flex items-center justify-between gap-2",children:[u.jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[u.jsx(Od,{active:a,onToggle:()=>{const T=!a;c(T),pe("overlay",{type:"TOGGLE_SELECT_MODE",active:T})}}),u.jsxs("div",{className:"font-[family-name:var(--font-display)] font-bold text-[13px] text-bv-text leading-tight truncate",children:[n.componentName," ",u.jsxs("span",{className:"font-[family-name:var(--font-ui)] font-normal text-bv-text-mid",children:["— ",n.instanceCount," instance",n.instanceCount!==1?"s":""]})]})]}),u.jsx(Jc,{})]})}),u.jsx(rd,{tabs:Id,activeTab:s,onTabChange:i}),u.jsxs("div",{className:"flex-1 overflow-auto",children:[s==="design"&&u.jsx(y1,{componentName:n.componentName,instanceCount:n.instanceCount,rawClasses:n.classes,parsedClasses:F,tailwindConfig:n.tailwindConfig,patchManager:d},o),s==="draw"&&u.jsx(td,{}),s==="message"&&u.jsx(nd,{draft:x,currentElementKey:n.componentName,onAddMessage:(T,_)=>d.stageMessage(T,_,n.componentName),onDiscard:T=>d.discard(T)})]}),O]})}function Od({active:e,onToggle:t}){return u.jsx("button",{onClick:t,title:`${e?"Stop selecting":"Select an element"} (⌘⇧C)`,className:`w-7 h-7 rounded flex items-center justify-center shrink-0 border transition-all
         ${e?"bg-bv-teal border-bv-teal text-white":"bg-transparent border-bv-border text-bv-text-mid hover:border-bv-teal hover:text-bv-teal hover:bg-bv-teal/10"}`,children:u.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"currentColor",children:[u.jsx("path",{d:"M14,0H2C.895,0,0,.895,0,2V14c0,1.105,.895,2,2,2H6c.552,0,1-.448,1-1h0c0-.552-.448-1-1-1H2V2H14V6c0,.552,.448,1,1,1h0c.552,0,1-.448,1-1V2c0-1.105-.895-2-2-2Z"}),u.jsx("path",{d:"M12.043,10.629l2.578-.644c.268-.068,.43-.339,.362-.607-.043-.172-.175-.308-.345-.358l-7-2c-.175-.051-.363-.002-.492,.126-.128,.129-.177,.317-.126,.492l2,7c.061,.214,.257,.362,.48,.362h.009c.226-.004,.421-.16,.476-.379l.644-2.578,3.664,3.664c.397,.384,1.03,.373,1.414-.025,.374-.388,.374-1.002,0-1.389l-3.664-3.664Z"})]})})}function k1(){const e=["height","minHeight","maxHeight","overflow","overflowY","display","flexDirection","flex","position"],t=[{selector:"html",el:document.documentElement},{selector:"body",el:document.body}],n=document.getElementById("root");n&&t.push({selector:"#root",el:n}),console.group("[vybit-panel] Layout diagnostics"),console.log("window innerHeight:",window.innerHeight,"| document.body.scrollHeight:",document.body.scrollHeight),console.log("window.frameElement:",window.frameElement,"| parent === self:",window.parent===window);for(const{selector:r,el:o}of t){const l=getComputedStyle(o),s=o.getBoundingClientRect(),i={offsetHeight:o.offsetHeight,clientHeight:o.clientHeight,rectHeight:Math.round(s.height)};for(const a of e)i[a]=l[a];console.log(`[${r}]`,i)}console.groupEnd()}requestAnimationFrame(()=>setTimeout(k1,100));Oi.createRoot(document.getElementById("root")).render(u.jsx(Ud.StrictMode,{children:u.jsx(b1,{})}));export{th as a,eh as c,u as j,Jy as o,w as r,_r as s};

package/panel/dist/index.html

@@ -16,7 +16,7 @@
       font-size: 12px;
     }
   </style>
-  <script type="module" crossorigin src="/panel/assets/index-CGc6ZuTL.js"></script>
+  <script type="module" crossorigin src="/panel/assets/index-r5Ny-REE.js"></script>
   <link rel="stylesheet" crossorigin href="/panel/assets/index-BdUOBofL.css">
 </head>
 <body>

package/server/ghost-cache.ts

@@ -75,7 +75,7 @@ function flushToDisk(): void {
     const data: CacheFile = { entries: Array.from(cache.values()) };
     fs.writeFileSync(filePath, JSON.stringify(data), "utf-8");
   } catch (err) {
-    console.error("[ghost-cache] Failed to write cache:", err);
+    // ignore write errors
   }
 }
 

package/server/mcp-tools.ts

@@ -243,7 +243,6 @@ function waitForCommitted(
     }, KEEPALIVE_INTERVAL_MS);
 
     const onAbort = () => {
-      console.log('[mcp] waitForCommitted: abort signal fired — client disconnected');
       clearInterval(keepalive);
       unsubscribe();
       // Notify the panel that no agent is waiting anymore
@@ -255,7 +254,6 @@ function waitForCommitted(
     const unsubscribe = onCommitted(() => {
       const next = getNextCommitted();
       if (next) {
-        console.log(`[mcp] waitForCommitted: resolved with commit ${next.id}`);
         clearInterval(keepalive);
         extra?.signal?.removeEventListener?.("abort", onAbort);
         resolve(next);
@@ -293,7 +291,6 @@ export function registerMcpTools(mcp: McpServer, deps: McpToolDeps): void {
     "Use implement_next_change instead if you want guided implementation with auto-looping.",
     async (_extra) => {
       const extra = _extra as any;
-      console.log('[mcp] get_next_change called');
 
       const reclaimed = reclaimImplementingCommits();
       if (reclaimed > 0) broadcastPatchUpdate();
@@ -304,11 +301,9 @@ export function registerMcpTools(mcp: McpServer, deps: McpToolDeps): void {
       }
 
       if (extra?.signal?.aborted) {
-        console.log('[mcp] get_next_change: signal aborted after waitForCommitted — skipping markCommitImplementing');
         throw new Error('Cancelled');
       }
 
-      console.log(`[mcp] get_next_change: marking commit ${commit.id} as implementing`);
       markCommitImplementing(commit.id);
       broadcastPatchUpdate();
 
@@ -332,7 +327,6 @@ export function registerMcpTools(mcp: McpServer, deps: McpToolDeps): void {
     "The agent MUST keep calling this tool in a loop until explicitly stopped by the user.",
     async (_extra) => {
       const extra = _extra as any;
-      console.log('[mcp] implement_next_change called');
 
       const reclaimed = reclaimImplementingCommits();
       if (reclaimed > 0) broadcastPatchUpdate();
@@ -343,11 +337,9 @@ export function registerMcpTools(mcp: McpServer, deps: McpToolDeps): void {
       }
 
       if (extra?.signal?.aborted) {
-        console.log('[mcp] implement_next_change: signal aborted after waitForCommitted — skipping markCommitImplementing');
         throw new Error('Cancelled');
       }
 
-      console.log(`[mcp] implement_next_change: marking commit ${commit.id} as implementing`);
       markCommitImplementing(commit.id);
       broadcastPatchUpdate();
 

package/server/queue.ts

@@ -112,7 +112,6 @@ export function reclaimImplementingCommits(): number {
   let count = 0;
   for (const commit of commits) {
     if (commit.status === 'implementing') {
-      console.log(`[queue] Reclaiming orphaned implementing commit ${commit.id} → committed`);
       commit.status = 'committed';
       for (const p of commit.patches) {
         if (p.status === 'implementing') p.status = 'committed';

package/server/storybook.ts

@@ -62,13 +62,12 @@ export async function loadStoryArgTypes(
           result[componentName] = meta.argTypes;
         }
       } catch (err) {
-        console.error(`[storybook] Failed to import ${importPath}:`, err);
+        // ignore import errors
       }
     }
 
     return result;
   } catch (err) {
-    console.error('[storybook] loadStoryArgTypes failed:', err);
     return {};
   }
 }
@@ -81,19 +80,16 @@ export async function loadStoryArgTypes(
  */
 export async function detectStorybookUrl(): Promise<string | null> {
   if (process.env.STORYBOOK_URL) {
-    console.error(`[storybook] Using STORYBOOK_URL=${process.env.STORYBOOK_URL} (from env)`);
     return process.env.STORYBOOK_URL;
   }
 
   for (const port of SCAN_PORTS) {
     const url = `http://localhost:${port}`;
     if (await probeStorybookUrl(url)) {
-      console.error(`[storybook] Auto-detected at ${url}`);
       return url;
     }
   }
 
-  console.error('[storybook] Not detected — Draw tab will show "Start Storybook" prompt');
   return null;
 }
 

package/server/tailwind-v3.ts

@@ -407,8 +407,24 @@ export class TailwindV3Adapter implements TailwindAdapter {
 						pathToFileURL(req.resolve("tailwindcss/resolveConfig")).href
 					)
 				).default;
-				const userConfig = (await import(pathToFileURL(configPath).href))
-					.default;
+
+				// Inject a global `require` so ESM config files that call require()
+				// (e.g. `plugins: [require('tailwindcss-animate')]`) don't fail.
+				const hadRequire = "require" in globalThis;
+				const prevRequire = (globalThis as any).require;
+				(globalThis as any).require = req;
+				let userConfig: any;
+				try {
+					userConfig = (await import(pathToFileURL(configPath).href))
+						.default;
+				} finally {
+					if (hadRequire) {
+						(globalThis as any).require = prevRequire;
+					} else {
+						delete (globalThis as any).require;
+					}
+				}
+
 				const full = resolveConfig(userConfig);
 				const theme = full.theme ?? {};
 
@@ -462,10 +478,15 @@ export class TailwindV3Adapter implements TailwindAdapter {
 		let userConfig: object = {};
 		if (configPath) {
 			try {
+				console.error(`[tailwind-v3] Loading config from: ${configPath}`);
 				userConfig = (await import(pathToFileURL(configPath).href)).default;
-			} catch {
+				console.error(`[tailwind-v3] Config loaded successfully, keys:`, Object.keys(userConfig));
+			} catch (err) {
+				console.error(`[tailwind-v3] Failed to load config from ${configPath}:`, err);
 				// fall through to empty config
 			}
+		} else {
+			console.error(`[tailwind-v3] No config file found in ${cwd}`);
 		}
 
 		// Load postcss and tailwindcss as a PostCSS plugin from the target project
@@ -475,6 +496,7 @@ export class TailwindV3Adapter implements TailwindAdapter {
 			await import(pathToFileURL(req.resolve("tailwindcss")).href)
 		).default;
 
+		console.error(`[tailwind-v3] Running PostCSS with safelist:`, classes);
 		const result = await postcss([
 			tailwindPlugin({
 				...userConfig,
@@ -483,6 +505,8 @@ export class TailwindV3Adapter implements TailwindAdapter {
 			}),
 		]).process("@tailwind utilities;", { from: undefined });
 
+		console.error(`[tailwind-v3] PostCSS result: ${result.css.length} chars`);
+		if (result.css.length < 500) console.error(`[tailwind-v3] Full CSS:`, result.css);
 		return result.css;
 	}
 }

package/server/tailwind-v4.ts

@@ -1,8 +1,8 @@
 // Tailwind v4 adapter — uses compile() / build() from the target project's tailwindcss v4.
 
-import { readFileSync } from "fs";
+import { existsSync, readFileSync, readdirSync } from "fs";
 import { createRequire } from "module";
-import { dirname, resolve } from "path";
+import { dirname, resolve, join } from "path";
 import { pathToFileURL } from "url";
 import type {
 	TailwindAdapter,
@@ -41,7 +41,18 @@ function makeLoadStylesheet(cwd: string) {
 		if (id === "tailwindcss") {
 			resolved = req.resolve("tailwindcss/index.css");
 		} else {
-			resolved = req.resolve(id, { paths: [base || cwd] });
+			// Try resolving from node_modules first, then as a file path
+			try {
+				resolved = req.resolve(id, { paths: [base || cwd] });
+			} catch {
+				// If module resolution fails, try as a direct file path
+				const candidate = resolve(base || cwd, id);
+				if (existsSync(candidate)) {
+					resolved = candidate;
+				} else {
+					throw new Error(`Cannot resolve stylesheet: ${id} from ${base || cwd}`);
+				}
+			}
 		}
 		return {
 			content: readFileSync(resolved, "utf8"),
@@ -50,8 +61,60 @@ function makeLoadStylesheet(cwd: string) {
 	};
 }
 
+/**
+ * Find the project's CSS entry point that contains Tailwind directives.
+ * Looks for common CSS files that include @import "tailwindcss" or @theme blocks.
+ */
+function findProjectCssEntry(cwd: string): string | null {
+	const candidates = [
+		"src/index.css",
+		"src/app.css",
+		"src/globals.css",
+		"src/global.css",
+		"src/styles.css",
+		"src/style.css",
+		"src/main.css",
+		"app/globals.css",
+		"app/global.css",
+		"styles/globals.css",
+		"styles/global.css",
+	];
+
+	for (const candidate of candidates) {
+		const fullPath = join(cwd, candidate);
+		if (existsSync(fullPath)) {
+			const content = readFileSync(fullPath, "utf8");
+			// Check if it imports tailwindcss (v4 style) or has @theme blocks
+			if (content.includes("tailwindcss") || content.includes("@theme")) {
+
+				return fullPath;
+			}
+		}
+	}
+
+	// Fallback: scan src/ for any .css file that imports tailwindcss
+	const srcDir = join(cwd, "src");
+	if (existsSync(srcDir)) {
+		try {
+			const files = readdirSync(srcDir).filter(f => f.endsWith(".css"));
+			for (const file of files) {
+				const fullPath = join(srcDir, file);
+				const content = readFileSync(fullPath, "utf8");
+				if (content.includes("tailwindcss") || content.includes("@theme")) {
+
+					return fullPath;
+				}
+			}
+		} catch { /* ignore read errors */ }
+	}
+
+	return null;
+}
+
 /**
  * Initialize the Tailwind v4 compiler for the target project.
+ * Tries to use the project's actual CSS entry point (which may contain @theme blocks
+ * with custom colors) instead of bare @import "tailwindcss".
  */
 async function getCompiler(): Promise<{
 	build: (classes: string[]) => string;
@@ -61,14 +124,25 @@ async function getCompiler(): Promise<{
 	const cwd = process.cwd();
 	const compile = await getCompile();
 
-	const result = await compile('@import "tailwindcss";', {
+	// Try to use the project's CSS entry point for custom theme support
+	const cssEntryPath = findProjectCssEntry(cwd);
+	let inputCss: string;
+	let base: string;
+
+	if (cssEntryPath) {
+		inputCss = readFileSync(cssEntryPath, "utf8");
+		base = dirname(cssEntryPath);
+	} else {
+		inputCss = '@import "tailwindcss";';
+		base = cwd;
+	}
+
+	const result = await compile(inputCss, {
 		loadStylesheet: makeLoadStylesheet(cwd),
+		base,
 	});
 
 	compilerCache = result;
-	console.error(
-		"[tailwind] Initialized Tailwind v4 compiler from target project",
-	);
 	return result;
 }
 
@@ -217,7 +291,21 @@ export class TailwindV4Adapter implements TailwindAdapter {
 		const css = compiler.build(probeClasses);
 
 		// --- Colors (extracted from CSS custom properties) ---
+		// In v4, --color-* vars are emitted in the base layer for all theme colors,
+		// including custom ones from @theme blocks.
 		const colorVars = extractVars(css, "color");
+
+		// Also try building with zero classes to get just the theme layer vars
+		// (some custom colors may only appear in the theme layer, not triggered by probes)
+		const baseCss = compiler.build([]);
+		const baseColorVars = extractVars(baseCss, "color");
+		// Merge base vars into colorVars (base vars are the ground truth)
+		for (const [name, value] of baseColorVars) {
+			if (!colorVars.has(name)) {
+				colorVars.set(name, value);
+			}
+		}
+
 		const colors: Record<string, unknown> = {};
 		for (const [name, value] of colorVars) {
 			const dashIdx = name.lastIndexOf("-");
@@ -259,15 +347,12 @@ export class TailwindV4Adapter implements TailwindAdapter {
 			fontWeight,
 			borderRadius,
 		};
-		console.error("[tailwind] v4 resolved theme:", {
-			colors: Object.keys(colors).length + " entries",
-			spacing: Object.keys(spacing).length + " entries",
-		});
 		return result;
 	}
 
 	async generateCssForClasses(classes: string[]): Promise<string> {
 		const compiler = await getCompiler();
-		return compiler.build(classes);
+		const css = compiler.build(classes);
+		return css;
 	}
 }

package/server/tailwind.ts

@@ -32,7 +32,6 @@ async function getAdapter(): Promise<TailwindAdapter> {
     const { TailwindV4Adapter } = await import("./tailwind-v4.js");
     adapterCache = new TailwindV4Adapter();
   }
-  console.error(`[tailwind] Using Tailwind v${version} adapter`);
   return adapterCache;
 }
 

package/storybook-addon/preview-v10.ts

@@ -8,10 +8,8 @@ export const decorators = [
       context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
 
     if (!injected) {
-      console.log('[vybit-addon] Injecting overlay script from', serverUrl);
       const script = document.createElement('script');
       script.src = `${serverUrl}/overlay.js`;
-      script.onload = () => console.log('[vybit-addon] overlay.js loaded successfully');
       script.onerror = (err) => console.error('[vybit-addon] overlay.js FAILED to load', err);
       document.head.appendChild(script);
       injected = true;

package/storybook-addon/preview.ts

@@ -8,10 +8,8 @@ export const decorators = [
       context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
 
     if (!injected) {
-      console.log('[vybit-addon] Injecting overlay script from', serverUrl);
       const script = document.createElement('script');
       script.src = `${serverUrl}/overlay.js`;
-      script.onload = () => console.log('[vybit-addon] overlay.js loaded successfully');
       script.onerror = (err) => console.error('[vybit-addon] overlay.js FAILED to load', err);
       document.head.appendChild(script);
       injected = true;