@bemedev/mind-flow 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/output.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-all{pointer-events:all}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.inset-2{inset:calc(var(--spacing) * 2)}.-top-7\.5{top:calc(var(--spacing) * -7.5)}.-top-\[30px\]{top:-30px}.top-0{top:0}.top-4{top:calc(var(--spacing) * 4)}.-right-3{right:calc(var(--spacing) * -3)}.-right-\[18px\]{right:-18px}.right-0{right:0}.right-4{right:calc(var(--spacing) * 4)}.bottom-4{bottom:calc(var(--spacing) * 4)}.-left-\[18px\]{left:-18px}.left-4{left:calc(var(--spacing) * 4)}.z-1{z-index:1}.z-10{z-index:10}.z-50{z-index:50}.z-100{z-index:100}.z-200{z-index:200}.z-\[-3\]{z-index:-3}.z-\[1\]{z-index:1}.z-\[100\]{z-index:100}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-3{margin-block:calc(var(--spacing) * 3)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.block{display:block}.flex{display:flex}.inline{display:inline}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-3{height:calc(var(--spacing) * 3)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-25{height:calc(var(--spacing) * 25)}.h-\[100px\]{height:100px}.h-\[150vh\]{height:150vh}.h-full{height:100%}.h-screen{height:100vh}.w-0{width:0}.w-3{width:calc(var(--spacing) * 3)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-25{width:calc(var(--spacing) * 25)}.w-80{width:calc(var(--spacing) * 80)}.w-\[100px\]{width:100px}.w-\[2160px\]{width:2160px}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-max{min-width:max-content}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[\#4B9CAD\]\/20{border-color:oklab(64.8747% -.0689763 -.0453081/.2)}.border-\[\#e6d4be\]{border-color:#e6d4be}.border-\[\#e38c29\]{border-color:#e38c29}.border-\[\#f0f0f0\]{border-color:#f0f0f0}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-600{border-color:var(--color-gray-600)}.border-transparent{border-color:#0000}.border-t-\[\#4B9CAD\]{border-top-color:#4b9cad}.border-b-\[\#4B9CAD\]\/40{border-bottom-color:oklab(64.8747% -.0689763 -.0453081/.4)}.bg-\[\#3d8091\]{background-color:#3d8091}.bg-\[\#e38b29\]{background-color:#e38b29}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-green-500{background-color:var(--color-green-500)}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\/95{background-color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.bg-size-\[30px_30px\]{background-size:30px 30px}.fill-\[\#a11111\]{fill:#a11111}.fill-transparent{fill:#0000}.fill-white{fill:var(--color-white)}.stroke-\[rgba\(168\,168\,168\,0\.4\)\]{stroke:#a8a8a866}.stroke-\[rgba\(168\,168\,168\,0\.8\)\]{stroke:#a8a8a8cc}.stroke-\[rgba\(168\,168\,168\,1\)\]{stroke:#a8a8a8}.stroke-3{stroke-width:3px}.stroke-4{stroke-width:4px}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-gray-400{color:var(--color-gray-400)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[1px_1px_11px_-6px_rgba\(0\,0\,0\,0\.75\)\]{--tw-shadow:1px 1px 11px -6px var(--tw-shadow-color,#000000bf);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border\,box-shadow\]{transition-property:border,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:shadow-\[2px_2px_12px_-6px_rgba\(0\,0\,0\,0\.75\)\]:hover{--tw-shadow:2px 2px 12px -6px var(--tw-shadow-color,#000000bf);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@media (min-width:48rem){.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.dark\:text-gray-300:is(.dark *){color:var(--color-gray-300)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-all{pointer-events:all}.pointer-events-all\!{pointer-events:all!important}.pointer-events-none{pointer-events:none}.pointer-events-none\!{pointer-events:none!important}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.inset-0{inset:0}.inset-2{inset:calc(var(--spacing) * 2)}.-top-7\.5{top:calc(var(--spacing) * -7.5)}.-top-\[30px\]{top:-30px}.top-0{top:0}.top-4{top:calc(var(--spacing) * 4)}.-right-3{right:calc(var(--spacing) * -3)}.-right-\[18px\]{right:-18px}.right-0{right:0}.right-4{right:calc(var(--spacing) * 4)}.bottom-4{bottom:calc(var(--spacing) * 4)}.-left-\[18px\]{left:-18px}.left-4{left:calc(var(--spacing) * 4)}.-z-10{z-index:calc(10 * -1)}.z-1{z-index:1}.z-10{z-index:10}.z-50{z-index:50}.z-100{z-index:100}.z-200{z-index:200}.z-\[-3\]{z-index:-3}.z-\[1\]{z-index:1}.z-\[100\]{z-index:100}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-3{margin-block:calc(var(--spacing) * 3)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.block{display:block}.flex{display:flex}.inline{display:inline}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-3{height:calc(var(--spacing) * 3)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-25{height:calc(var(--spacing) * 25)}.h-\[100px\]{height:100px}.h-\[150vh\]{height:150vh}.h-full{height:100%}.h-screen{height:100vh}.w-0{width:0}.w-3{width:calc(var(--spacing) * 3)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-25{width:calc(var(--spacing) * 25)}.w-80{width:calc(var(--spacing) * 80)}.w-\[100px\]{width:100px}.w-\[2160px\]{width:2160px}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-max{min-width:max-content}.flex-1{flex:1}.scale-150{--tw-scale-x:150%;--tw-scale-y:150%;--tw-scale-z:150%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[\#4B9CAD\]\/20{border-color:oklab(64.8747% -.0689763 -.0453081/.2)}.border-\[\#e6d4be\]{border-color:#e6d4be}.border-\[\#e38c29\]{border-color:#e38c29}.border-\[\#f0f0f0\]{border-color:#f0f0f0}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-600{border-color:var(--color-gray-600)}.border-transparent{border-color:#0000}.border-t-\[\#4B9CAD\]{border-top-color:#4b9cad}.border-b-\[\#4B9CAD\]\/40{border-bottom-color:oklab(64.8747% -.0689763 -.0453081/.4)}.bg-\[\#3d8091\]{background-color:#3d8091}.bg-\[\#e38b29\]{background-color:#e38b29}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-green-500{background-color:var(--color-green-500)}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\/95{background-color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.bg-size-\[30px_30px\]{background-size:30px 30px}.fill-\[\#a11111\]{fill:#a11111}.fill-transparent{fill:#0000}.fill-white{fill:var(--color-white)}.stroke-\[rgba\(168\,168\,168\,0\.4\)\]{stroke:#a8a8a866}.stroke-\[rgba\(168\,168\,168\,0\.8\)\]{stroke:#a8a8a8cc}.stroke-\[rgba\(168\,168\,168\,1\)\]{stroke:#a8a8a8}.stroke-3{stroke-width:3px}.stroke-4{stroke-width:4px}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-gray-400{color:var(--color-gray-400)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[1px_1px_11px_-6px_rgba\(0\,0\,0\,0\.75\)\]{--tw-shadow:1px 1px 11px -6px var(--tw-shadow-color,#000000bf);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border\,box-shadow\]{transition-property:border,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:scale-150:hover{--tw-scale-x:150%;--tw-scale-y:150%;--tw-scale-z:150%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:shadow-\[2px_2px_12px_-6px_rgba\(0\,0\,0\,0\.75\)\]:hover{--tw-shadow:2px 2px 12px -6px var(--tw-shadow-color,#000000bf);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@media (min-width:48rem){.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.dark\:text-gray-300:is(.dark *){color:var(--color-gray-300)}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
package/lib/server.cjs.js CHANGED
@@ -1134,17 +1134,15 @@ var _tmpl$2$4 = [
1134
1134
  "\"><path d=\"M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z\"></path></svg><!--$-->",
1135
1135
  "<!--/--><svg class=\"flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" style=\"",
1136
1136
  "\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><div>",
1137
- "</div><div id=\"inputs\" data-handle-type=\"input\"",
1138
- " class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
1137
+ "</div><div id=\"inputs\" class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
1139
1138
  "\"><div data-handle-type=\"input\"",
1140
- " class=\"cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform\" style=\"",
1141
- "\"></div></div><div id=\"outputs\" data-handle-type=\"output\"",
1142
- " style=\"",
1139
+ " class=\"cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150\" style=\"",
1140
+ "\"></div></div><div id=\"outputs\" style=\"",
1143
1141
  "\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\"><div data-handle-type=\"output\"",
1144
- " class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform\" style=\"",
1142
+ " class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150\" style=\"",
1145
1143
  "\"></div></div></div>"
1146
1144
  ];
1147
- var _tmpl$3$2 = [
1145
+ var _tmpl$3$1 = [
1148
1146
  "<div",
1149
1147
  " class=\"p-3 select-none\"><!--$-->",
1150
1148
  "<!--/--><!--$-->",
@@ -1213,7 +1211,7 @@ var NodeComponent = (props) => {
1213
1211
  return props.children;
1214
1212
  },
1215
1213
  get fallback() {
1216
- return (0, solid_js_web.ssr)(_tmpl$3$2, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
1214
+ return (0, solid_js_web.ssr)(_tmpl$3$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
1217
1215
  get when() {
1218
1216
  return node().data.label;
1219
1217
  },
@@ -1244,26 +1242,57 @@ var NodeComponent = (props) => {
1244
1242
  return props.children;
1245
1243
  } }, () => node().data));
1246
1244
  }
1247
- })), (0, solid_js_web.ssrAttribute)("data-node-id", (0, solid_js_web.escape)(props.id, true), false), (0, solid_js_web.ssrStyleProperty)("left:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrAttribute)("data-node-id", (0, solid_js_web.escape)(props.id, true), false), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"), (0, solid_js_web.ssrAttribute)("data-node-id", (0, solid_js_web.escape)(props.id, true), false), (0, solid_js_web.ssrStyleProperty)("right:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrAttribute)("data-node-id", (0, solid_js_web.escape)(props.id, true), false), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"));
1245
+ })), (0, solid_js_web.ssrStyleProperty)("left:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrAttribute)("data-node-id", (0, solid_js_web.escape)(props.id, true), false), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"), (0, solid_js_web.ssrStyleProperty)("right:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrAttribute)("data-node-id", (0, solid_js_web.escape)(props.id, true), false), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"));
1248
1246
  };
1249
1247
  //#endregion
1248
+ //#region src/ui/utils.ts
1249
+ /**
1250
+ * Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
1251
+ * conflicts with `twMerge`.
1252
+ *
1253
+ * @param inputs - Variable list of class values, objects, or arrays.
1254
+ *
1255
+ * @returns The resolved single class name string.
1256
+ */
1257
+ function cn(...inputs) {
1258
+ return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
1259
+ }
1260
+ //#endregion
1250
1261
  //#region src/ui/components/Panels.tsx
1251
1262
  var _tmpl$$7 = [
1252
1263
  "<div",
1253
- " class=\"absolute top-4 left-4 z-50\">",
1264
+ " class=\"",
1265
+ "\">",
1254
1266
  "</div>"
1255
1267
  ];
1256
1268
  var _tmpl$2$3 = [
1257
1269
  "<div",
1258
- " class=\"absolute top-4 right-4 z-50\">",
1259
- "</div>"
1260
- ];
1261
- var _tmpl$3$1 = [
1262
- "<div",
1263
- " class=\"absolute bottom-4 left-4 z-50\">",
1264
- "</div>"
1270
+ " class=\"pointer-events-none absolute inset-0\"><!--$-->",
1271
+ "<!--/--><!--$-->",
1272
+ "<!--/--><!--$-->",
1273
+ "<!--/--></div>"
1265
1274
  ];
1266
1275
  /**
1276
+ * Overlay slot component rendering an optional panel component with z-index
1277
+ * positioning.
1278
+ *
1279
+ * @param props - Panel properties of type {@linkcode PanelProps}.
1280
+ *
1281
+ * @returns The rendered panel container element or fallback.
1282
+ *
1283
+ * @see {@linkcode cn}
1284
+ */
1285
+ var Panel = (props) => {
1286
+ const exists = (0, _bemedev_app_bemedev.isDefined)(props.children);
1287
+ return (0, solid_js_web.createComponent)(solid_js.Show, {
1288
+ get when() {
1289
+ return props.children;
1290
+ },
1291
+ keyed: true,
1292
+ children: (Children) => (0, solid_js_web.ssr)(_tmpl$$7, (0, solid_js_web.ssrHydrationKey)(), `${(0, solid_js_web.escape)(cn(props.class) || "", true)} ${exists ? "z-50" : ""}`, (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Children, {})))
1293
+ });
1294
+ };
1295
+ /**
1267
1296
  * Overlay container rendering custom panel slots positioned around the flowchart
1268
1297
  * canvas.
1269
1298
  *
@@ -1272,29 +1301,22 @@ var _tmpl$3$1 = [
1272
1301
  * @returns Rendered overlay panels JSX elements.
1273
1302
  */
1274
1303
  var Panels = (props) => {
1275
- return [
1276
- (0, solid_js_web.createComponent)(solid_js.Show, {
1277
- get when() {
1278
- return props.topLeft;
1279
- },
1280
- keyed: true,
1281
- children: (Panel) => (0, solid_js_web.ssr)(_tmpl$$7, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {})))
1282
- }),
1283
- (0, solid_js_web.createComponent)(solid_js.Show, {
1284
- get when() {
1285
- return props.topRight;
1286
- },
1287
- keyed: true,
1288
- children: (Panel) => (0, solid_js_web.ssr)(_tmpl$2$3, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {})))
1289
- }),
1290
- (0, solid_js_web.createComponent)(solid_js.Show, {
1291
- get when() {
1292
- return props.bottomLeft;
1293
- },
1294
- keyed: true,
1295
- children: (Panel) => (0, solid_js_web.ssr)(_tmpl$3$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {})))
1296
- })
1297
- ];
1304
+ return (0, solid_js_web.ssr)(_tmpl$2$3, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {
1305
+ get children() {
1306
+ return props.topLeft;
1307
+ },
1308
+ "class": "absolute top-4 left-4"
1309
+ })), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {
1310
+ get children() {
1311
+ return props.topRight;
1312
+ },
1313
+ "class": "absolute top-4 right-4"
1314
+ })), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {
1315
+ get children() {
1316
+ return props.bottomLeft;
1317
+ },
1318
+ "class": "absolute bottom-4 left-4"
1319
+ })));
1298
1320
  };
1299
1321
  //#endregion
1300
1322
  //#region src/ui/components/NodesBoard.tsx
@@ -1507,7 +1529,7 @@ var FlowChart = (props) => {
1507
1529
  const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
1508
1530
  const primaryEdges = props.config?.edges;
1509
1531
  const service = useFlow();
1510
- const hasNewEdge = (0, _bemedev_app_solidjs.createState)(service, { selector: (s) => !!s.context.newEdge });
1532
+ const fromSignal = (0, _bemedev_app_solidjs.createState)(service, { selector: (s) => s.context.newEdge?.from });
1511
1533
  (0, solid_js.onCleanup)(service.pause);
1512
1534
  (0, solid_js.onMount)(() => {
1513
1535
  service.resume();
@@ -1520,39 +1542,59 @@ var FlowChart = (props) => {
1520
1542
  }
1521
1543
  });
1522
1544
  });
1523
- (0, solid_js.createEffect)(() => {
1524
- if (!hasNewEdge()) return;
1525
- const handlePointerMove = (e) => {
1526
- service.send({
1527
- type: "MOVE_NEW_EDGE",
1528
- payload: {
1529
- x: e.clientX,
1530
- y: e.clientY
1531
- }
1532
- });
1533
- };
1534
- const handlePointerUp = (e) => {
1535
- const from = service.state.context.newEdge?.from;
1536
- if (from) {
1537
- const targetId = (document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-handle-type=\"input\"]"))?.getAttribute("data-node-id");
1538
- if (targetId && targetId !== from) service.send({
1539
- type: "ADD_EDGE",
1540
- payload: {
1541
- from,
1542
- to: targetId
1543
- }
1544
- });
1545
+ let added = false;
1546
+ let activeHandle = null;
1547
+ const clearActiveHandle = () => {
1548
+ if (activeHandle) {
1549
+ activeHandle.classList.remove("scale-150");
1550
+ activeHandle = null;
1551
+ added = false;
1552
+ }
1553
+ };
1554
+ const handlePointerMove = (e) => {
1555
+ service.send({
1556
+ type: "MOVE_NEW_EDGE",
1557
+ payload: {
1558
+ x: e.clientX,
1559
+ y: e.clientY
1545
1560
  }
1546
- service.send("CLEAR_NEW_EDGE");
1547
- };
1561
+ });
1562
+ const inputHandle = document.elementsFromPoint(e.clientX, e.clientY).map((el) => el.closest(".rounded-full[data-handle-type=\"input\"]")).find((handle) => Boolean(handle && handle.id !== "inputs"));
1563
+ if (activeHandle && activeHandle !== inputHandle) clearActiveHandle();
1564
+ if (inputHandle) {
1565
+ if (activeHandle !== inputHandle) {
1566
+ inputHandle.classList.add("scale-150");
1567
+ activeHandle = inputHandle;
1568
+ added = true;
1569
+ }
1570
+ }
1571
+ };
1572
+ const createHandlePointerUp = (from) => (e) => {
1573
+ const inputHandle = document.elementsFromPoint(e.clientX, e.clientY).map((el) => el.closest(".rounded-full[data-handle-type=\"input\"]")).find((handle) => Boolean(handle && handle.id !== "inputs"));
1574
+ const to = inputHandle?.getAttribute("data-node-id");
1575
+ if (inputHandle && to) service.send({
1576
+ type: "ADD_EDGE",
1577
+ payload: {
1578
+ from,
1579
+ to
1580
+ }
1581
+ });
1582
+ clearActiveHandle();
1583
+ service.send("CLEAR_NEW_EDGE");
1584
+ };
1585
+ (0, solid_js.createEffect)(() => {
1586
+ const from = fromSignal();
1587
+ if (!from || added) return;
1588
+ const handlePointerUp = createHandlePointerUp(from);
1548
1589
  window.addEventListener("pointermove", handlePointerMove);
1549
1590
  window.addEventListener("pointerup", handlePointerUp);
1550
1591
  (0, solid_js.onCleanup)(() => {
1592
+ clearActiveHandle();
1551
1593
  window.removeEventListener("pointermove", handlePointerMove);
1552
1594
  window.removeEventListener("pointerup", handlePointerUp);
1553
1595
  });
1554
1596
  });
1555
- return (0, solid_js_web.ssr)(_tmpl$$5, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("cursor:", hasNewEdge() ? "inherit" : "crosshair"), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(NodesBoard, {
1597
+ return (0, solid_js_web.ssr)(_tmpl$$5, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("cursor:", fromSignal() ? "inherit" : "crosshair"), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(NodesBoard, {
1556
1598
  get panels() {
1557
1599
  return props.panels;
1558
1600
  },
@@ -1562,19 +1604,6 @@ var FlowChart = (props) => {
1562
1604
  })));
1563
1605
  };
1564
1606
  //#endregion
1565
- //#region src/ui/utils.ts
1566
- /**
1567
- * Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
1568
- * conflicts with `twMerge`.
1569
- *
1570
- * @param inputs - Variable list of class values, objects, or arrays.
1571
- *
1572
- * @returns The resolved single class name string.
1573
- */
1574
- function cn(...inputs) {
1575
- return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
1576
- }
1577
- //#endregion
1578
1607
  //#region src/ui/globals/helpers/espace.ts
1579
1608
  /**
1580
1609
  * Returns a zero-width space if string is empty, preserving layout flow.
@@ -2046,7 +2075,11 @@ var EditPanel = (props) => {
2046
2075
  get when() {
2047
2076
  return hooks.editing();
2048
2077
  },
2049
- children: (node) => (0, solid_js_web.ssr)(_tmpl$, (0, solid_js_web.ssrHydrationKey)(), `${(0, solid_js_web.escape)(cn(`w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ""}`) || "", true)} ${(0, solid_js_web.escape)((0, solid_js_web.ssrClassList)(classList()) || "", true)}`, (0, solid_js_web.ssrStyle)(props.style), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
2078
+ children: (node) => (0, solid_js_web.ssr)(_tmpl$, (0, solid_js_web.ssrHydrationKey)(), `${(0, solid_js_web.escape)(cn(`w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ""}`) || "", true)} ${(0, solid_js_web.escape)((0, solid_js_web.ssrClassList)({
2079
+ ...classList(),
2080
+ "pointer-events-none! -z-10": !hooks.editing(),
2081
+ "pointer-events-all! z-50": !!hooks.editing()
2082
+ }) || "", true)}`, (0, solid_js_web.ssrStyle)(props.style), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
2050
2083
  get when() {
2051
2084
  return props.header;
2052
2085
  },
package/lib/server.es.js CHANGED
@@ -1133,17 +1133,15 @@ var _tmpl$2$4 = [
1133
1133
  "\"><path d=\"M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z\"></path></svg><!--$-->",
1134
1134
  "<!--/--><svg class=\"flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" style=\"",
1135
1135
  "\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><div>",
1136
- "</div><div id=\"inputs\" data-handle-type=\"input\"",
1137
- " class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
1136
+ "</div><div id=\"inputs\" class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
1138
1137
  "\"><div data-handle-type=\"input\"",
1139
- " class=\"cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform\" style=\"",
1140
- "\"></div></div><div id=\"outputs\" data-handle-type=\"output\"",
1141
- " style=\"",
1138
+ " class=\"cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150\" style=\"",
1139
+ "\"></div></div><div id=\"outputs\" style=\"",
1142
1140
  "\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\"><div data-handle-type=\"output\"",
1143
- " class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform\" style=\"",
1141
+ " class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150\" style=\"",
1144
1142
  "\"></div></div></div>"
1145
1143
  ];
1146
- var _tmpl$3$2 = [
1144
+ var _tmpl$3$1 = [
1147
1145
  "<div",
1148
1146
  " class=\"p-3 select-none\"><!--$-->",
1149
1147
  "<!--/--><!--$-->",
@@ -1212,7 +1210,7 @@ var NodeComponent = (props) => {
1212
1210
  return props.children;
1213
1211
  },
1214
1212
  get fallback() {
1215
- return ssr(_tmpl$3$2, ssrHydrationKey(), escape(createComponent(Show, {
1213
+ return ssr(_tmpl$3$1, ssrHydrationKey(), escape(createComponent(Show, {
1216
1214
  get when() {
1217
1215
  return node().data.label;
1218
1216
  },
@@ -1243,26 +1241,57 @@ var NodeComponent = (props) => {
1243
1241
  return props.children;
1244
1242
  } }, () => node().data));
1245
1243
  }
1246
- })), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("left:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("right:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));
1244
+ })), ssrStyleProperty("left:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"), ssrStyleProperty("right:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));
1247
1245
  };
1248
1246
  //#endregion
1247
+ //#region src/ui/utils.ts
1248
+ /**
1249
+ * Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
1250
+ * conflicts with `twMerge`.
1251
+ *
1252
+ * @param inputs - Variable list of class values, objects, or arrays.
1253
+ *
1254
+ * @returns The resolved single class name string.
1255
+ */
1256
+ function cn(...inputs) {
1257
+ return twMerge(clsx(inputs));
1258
+ }
1259
+ //#endregion
1249
1260
  //#region src/ui/components/Panels.tsx
1250
1261
  var _tmpl$$7 = [
1251
1262
  "<div",
1252
- " class=\"absolute top-4 left-4 z-50\">",
1263
+ " class=\"",
1264
+ "\">",
1253
1265
  "</div>"
1254
1266
  ];
1255
1267
  var _tmpl$2$3 = [
1256
1268
  "<div",
1257
- " class=\"absolute top-4 right-4 z-50\">",
1258
- "</div>"
1259
- ];
1260
- var _tmpl$3$1 = [
1261
- "<div",
1262
- " class=\"absolute bottom-4 left-4 z-50\">",
1263
- "</div>"
1269
+ " class=\"pointer-events-none absolute inset-0\"><!--$-->",
1270
+ "<!--/--><!--$-->",
1271
+ "<!--/--><!--$-->",
1272
+ "<!--/--></div>"
1264
1273
  ];
1265
1274
  /**
1275
+ * Overlay slot component rendering an optional panel component with z-index
1276
+ * positioning.
1277
+ *
1278
+ * @param props - Panel properties of type {@linkcode PanelProps}.
1279
+ *
1280
+ * @returns The rendered panel container element or fallback.
1281
+ *
1282
+ * @see {@linkcode cn}
1283
+ */
1284
+ var Panel = (props) => {
1285
+ const exists = isDefined(props.children);
1286
+ return createComponent(Show, {
1287
+ get when() {
1288
+ return props.children;
1289
+ },
1290
+ keyed: true,
1291
+ children: (Children) => ssr(_tmpl$$7, ssrHydrationKey(), `${escape(cn(props.class) || "", true)} ${exists ? "z-50" : ""}`, escape(createComponent(Children, {})))
1292
+ });
1293
+ };
1294
+ /**
1266
1295
  * Overlay container rendering custom panel slots positioned around the flowchart
1267
1296
  * canvas.
1268
1297
  *
@@ -1271,29 +1300,22 @@ var _tmpl$3$1 = [
1271
1300
  * @returns Rendered overlay panels JSX elements.
1272
1301
  */
1273
1302
  var Panels = (props) => {
1274
- return [
1275
- createComponent(Show, {
1276
- get when() {
1277
- return props.topLeft;
1278
- },
1279
- keyed: true,
1280
- children: (Panel) => ssr(_tmpl$$7, ssrHydrationKey(), escape(createComponent(Panel, {})))
1281
- }),
1282
- createComponent(Show, {
1283
- get when() {
1284
- return props.topRight;
1285
- },
1286
- keyed: true,
1287
- children: (Panel) => ssr(_tmpl$2$3, ssrHydrationKey(), escape(createComponent(Panel, {})))
1288
- }),
1289
- createComponent(Show, {
1290
- get when() {
1291
- return props.bottomLeft;
1292
- },
1293
- keyed: true,
1294
- children: (Panel) => ssr(_tmpl$3$1, ssrHydrationKey(), escape(createComponent(Panel, {})))
1295
- })
1296
- ];
1303
+ return ssr(_tmpl$2$3, ssrHydrationKey(), escape(createComponent(Panel, {
1304
+ get children() {
1305
+ return props.topLeft;
1306
+ },
1307
+ "class": "absolute top-4 left-4"
1308
+ })), escape(createComponent(Panel, {
1309
+ get children() {
1310
+ return props.topRight;
1311
+ },
1312
+ "class": "absolute top-4 right-4"
1313
+ })), escape(createComponent(Panel, {
1314
+ get children() {
1315
+ return props.bottomLeft;
1316
+ },
1317
+ "class": "absolute bottom-4 left-4"
1318
+ })));
1297
1319
  };
1298
1320
  //#endregion
1299
1321
  //#region src/ui/components/NodesBoard.tsx
@@ -1506,7 +1528,7 @@ var FlowChart = (props) => {
1506
1528
  const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
1507
1529
  const primaryEdges = props.config?.edges;
1508
1530
  const service = useFlow();
1509
- const hasNewEdge = createState(service, { selector: (s) => !!s.context.newEdge });
1531
+ const fromSignal = createState(service, { selector: (s) => s.context.newEdge?.from });
1510
1532
  onCleanup(service.pause);
1511
1533
  onMount(() => {
1512
1534
  service.resume();
@@ -1519,39 +1541,59 @@ var FlowChart = (props) => {
1519
1541
  }
1520
1542
  });
1521
1543
  });
1522
- createEffect(() => {
1523
- if (!hasNewEdge()) return;
1524
- const handlePointerMove = (e) => {
1525
- service.send({
1526
- type: "MOVE_NEW_EDGE",
1527
- payload: {
1528
- x: e.clientX,
1529
- y: e.clientY
1530
- }
1531
- });
1532
- };
1533
- const handlePointerUp = (e) => {
1534
- const from = service.state.context.newEdge?.from;
1535
- if (from) {
1536
- const targetId = (document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-handle-type=\"input\"]"))?.getAttribute("data-node-id");
1537
- if (targetId && targetId !== from) service.send({
1538
- type: "ADD_EDGE",
1539
- payload: {
1540
- from,
1541
- to: targetId
1542
- }
1543
- });
1544
+ let added = false;
1545
+ let activeHandle = null;
1546
+ const clearActiveHandle = () => {
1547
+ if (activeHandle) {
1548
+ activeHandle.classList.remove("scale-150");
1549
+ activeHandle = null;
1550
+ added = false;
1551
+ }
1552
+ };
1553
+ const handlePointerMove = (e) => {
1554
+ service.send({
1555
+ type: "MOVE_NEW_EDGE",
1556
+ payload: {
1557
+ x: e.clientX,
1558
+ y: e.clientY
1544
1559
  }
1545
- service.send("CLEAR_NEW_EDGE");
1546
- };
1560
+ });
1561
+ const inputHandle = document.elementsFromPoint(e.clientX, e.clientY).map((el) => el.closest(".rounded-full[data-handle-type=\"input\"]")).find((handle) => Boolean(handle && handle.id !== "inputs"));
1562
+ if (activeHandle && activeHandle !== inputHandle) clearActiveHandle();
1563
+ if (inputHandle) {
1564
+ if (activeHandle !== inputHandle) {
1565
+ inputHandle.classList.add("scale-150");
1566
+ activeHandle = inputHandle;
1567
+ added = true;
1568
+ }
1569
+ }
1570
+ };
1571
+ const createHandlePointerUp = (from) => (e) => {
1572
+ const inputHandle = document.elementsFromPoint(e.clientX, e.clientY).map((el) => el.closest(".rounded-full[data-handle-type=\"input\"]")).find((handle) => Boolean(handle && handle.id !== "inputs"));
1573
+ const to = inputHandle?.getAttribute("data-node-id");
1574
+ if (inputHandle && to) service.send({
1575
+ type: "ADD_EDGE",
1576
+ payload: {
1577
+ from,
1578
+ to
1579
+ }
1580
+ });
1581
+ clearActiveHandle();
1582
+ service.send("CLEAR_NEW_EDGE");
1583
+ };
1584
+ createEffect(() => {
1585
+ const from = fromSignal();
1586
+ if (!from || added) return;
1587
+ const handlePointerUp = createHandlePointerUp(from);
1547
1588
  window.addEventListener("pointermove", handlePointerMove);
1548
1589
  window.addEventListener("pointerup", handlePointerUp);
1549
1590
  onCleanup(() => {
1591
+ clearActiveHandle();
1550
1592
  window.removeEventListener("pointermove", handlePointerMove);
1551
1593
  window.removeEventListener("pointerup", handlePointerUp);
1552
1594
  });
1553
1595
  });
1554
- return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("cursor:", hasNewEdge() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
1596
+ return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("cursor:", fromSignal() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
1555
1597
  get panels() {
1556
1598
  return props.panels;
1557
1599
  },
@@ -1561,19 +1603,6 @@ var FlowChart = (props) => {
1561
1603
  })));
1562
1604
  };
1563
1605
  //#endregion
1564
- //#region src/ui/utils.ts
1565
- /**
1566
- * Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
1567
- * conflicts with `twMerge`.
1568
- *
1569
- * @param inputs - Variable list of class values, objects, or arrays.
1570
- *
1571
- * @returns The resolved single class name string.
1572
- */
1573
- function cn(...inputs) {
1574
- return twMerge(clsx(inputs));
1575
- }
1576
- //#endregion
1577
1606
  //#region src/ui/globals/helpers/espace.ts
1578
1607
  /**
1579
1608
  * Returns a zero-width space if string is empty, preserving layout flow.
@@ -2045,7 +2074,11 @@ var EditPanel = (props) => {
2045
2074
  get when() {
2046
2075
  return hooks.editing();
2047
2076
  },
2048
- children: (node) => ssr(_tmpl$, ssrHydrationKey(), `${escape(cn(`w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ""}`) || "", true)} ${escape(ssrClassList(classList()) || "", true)}`, ssrStyle(props.style), escape(createComponent(Show, {
2077
+ children: (node) => ssr(_tmpl$, ssrHydrationKey(), `${escape(cn(`w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ""}`) || "", true)} ${escape(ssrClassList({
2078
+ ...classList(),
2079
+ "pointer-events-none! -z-10": !hooks.editing(),
2080
+ "pointer-events-all! z-50": !!hooks.editing()
2081
+ }) || "", true)}`, ssrStyle(props.style), escape(createComponent(Show, {
2049
2082
  get when() {
2050
2083
  return props.header;
2051
2084
  },