@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/index.cjs.js +1 -1
- package/lib/index.es.js +358 -357
- package/lib/output.css +1 -1
- package/lib/server.cjs.js +113 -80
- package/lib/server.es.js +113 -80
- package/lib/ui/components/EditPanel.d.ts.map +1 -1
- package/lib/ui/components/FlowChart.d.ts.map +1 -1
- package/lib/ui/components/NodeComponent.d.ts.map +1 -1
- package/lib/ui/components/Panels.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/ui/components/EditPanel.tsx +6 -1
- package/src/ui/components/FlowChart.tsx +65 -23
- package/src/ui/components/NodeComponent.tsx +3 -6
- package/src/ui/components/Panels.tsx +38 -15
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\"
|
|
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\"
|
|
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$
|
|
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$
|
|
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.
|
|
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=\"
|
|
1264
|
+
" class=\"",
|
|
1265
|
+
"\">",
|
|
1254
1266
|
"</div>"
|
|
1255
1267
|
];
|
|
1256
1268
|
var _tmpl$2$3 = [
|
|
1257
1269
|
"<div",
|
|
1258
|
-
" class=\"
|
|
1259
|
-
"
|
|
1260
|
-
|
|
1261
|
-
|
|
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
|
-
(
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
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
|
|
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
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
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
|
-
|
|
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:",
|
|
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)(
|
|
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\"
|
|
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\"
|
|
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$
|
|
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$
|
|
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
|
-
})),
|
|
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=\"
|
|
1263
|
+
" class=\"",
|
|
1264
|
+
"\">",
|
|
1253
1265
|
"</div>"
|
|
1254
1266
|
];
|
|
1255
1267
|
var _tmpl$2$3 = [
|
|
1256
1268
|
"<div",
|
|
1257
|
-
" class=\"
|
|
1258
|
-
"
|
|
1259
|
-
|
|
1260
|
-
|
|
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
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
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
|
|
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
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
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
|
-
|
|
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:",
|
|
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(
|
|
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
|
},
|