react-grab 0.0.50 → 0.0.52
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/README.md +2 -6
- package/dist/{chunk-73DWLENH.js → chunk-CBPK6MDL.js} +93 -22
- package/dist/{chunk-V3NBFNRU.cjs → chunk-ZCGA27A6.cjs} +93 -22
- package/dist/core-CHAbsaHv.d.cts +272 -0
- package/dist/core-CHAbsaHv.d.ts +272 -0
- package/dist/core.cjs +8 -8
- package/dist/core.d.cts +2 -156
- package/dist/core.d.ts +2 -156
- package/dist/core.js +1 -1
- package/dist/index.cjs +14 -9
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.global.js +29 -29
- package/dist/index.js +9 -3
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -742,7 +742,7 @@ function cleanChildren(parent, current, marker, replacement) {
|
|
|
742
742
|
}
|
|
743
743
|
|
|
744
744
|
// dist/styles.css
|
|
745
|
-
var styles_default = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@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-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,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-white:#fff;--spacing:.25rem;--font-weight-medium:500;--font-weight-semibold:600;--leading-tight:1.25;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--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);--color-grab-pink:#b21c8e;--color-grab-pink-light:#fde7f7;--color-grab-pink-border:#f7c5ec;--color-grab-purple:#d239c0}}@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,ui-sans-serif,system-ui,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{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-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-0{top:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-2147483645{z-index:2147483645}.z-2147483646{z-index:2147483646}.z-\\[2147483645\\]{z-index:2147483645}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mr-1{margin-right:calc(var(--spacing)*1)}.ml-1{margin-left:calc(var(--spacing)*1)}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.h-2{height:calc(var(--spacing)*2)}.min-h-\\[18px\\]{min-height:18px}.w-2{width:calc(var(--spacing)*2)}.w-\\[240px\\]{width:240px}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-crosshair{cursor:crosshair}.resize{resize:both}.resize-y{resize:vertical}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-\\[3px\\]{border-radius:3px}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-grab-pink-border{border-color:var(--color-grab-pink-border)}.border-grab-purple{border-color:var(--color-grab-purple)}.border-grab-purple\\/40{border-color:#d239c066}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/40{border-color:color-mix(in oklab,var(--color-grab-purple)40%,transparent)}}.border-grab-purple\\/50{border-color:#d239c080}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/50{border-color:color-mix(in oklab,var(--color-grab-purple)50%,transparent)}}.border-t-transparent{border-top-color:#0000}.bg-grab-pink-light{background-color:var(--color-grab-pink-light)}.bg-grab-pink\\/20{background-color:#b21c8e33}@supports (color:color-mix(in lab, red, red)){.bg-grab-pink\\/20{background-color:color-mix(in oklab,var(--color-grab-pink)20%,transparent)}}.bg-grab-purple\\/5{background-color:#d239c00d}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/5{background-color:color-mix(in oklab,var(--color-grab-purple)5%,transparent)}}.bg-grab-purple\\/8{background-color:#d239c014}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/8{background-color:color-mix(in oklab,var(--color-grab-purple)8%,transparent)}}.bg-white{background-color:var(--color-white)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-\\[3px\\]{padding-inline:3px}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.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)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-grab-pink{color:var(--color-grab-pink)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.opacity-60{opacity:.6}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.will-change-\\[transform\\,width\\,height\\]{will-change:transform,width,height}.outline-none{--tw-outline-style:none;outline-style:none}}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}';
|
|
745
|
+
var styles_default = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@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-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,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-white:#fff;--spacing:.25rem;--font-weight-medium:500;--font-weight-semibold:600;--leading-tight:1.25;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--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);--color-grab-pink:#b21c8e;--color-grab-pink-light:#fde7f7;--color-grab-pink-border:#f7c5ec;--color-grab-purple:#d239c0}}@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,ui-sans-serif,system-ui,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{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-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-0{top:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-2147483645{z-index:2147483645}.z-2147483646{z-index:2147483646}.z-\\[2147483645\\]{z-index:2147483645}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mr-1{margin-right:calc(var(--spacing)*1)}.ml-1{margin-left:calc(var(--spacing)*1)}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.h-2{height:calc(var(--spacing)*2)}.min-h-\\[18px\\]{min-height:18px}.w-2{width:calc(var(--spacing)*2)}.w-\\[150px\\]{width:150px}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-crosshair{cursor:crosshair}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-\\[3px\\]{border-radius:3px}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-grab-pink-border{border-color:var(--color-grab-pink-border)}.border-grab-purple{border-color:var(--color-grab-purple)}.border-grab-purple\\/40{border-color:#d239c066}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/40{border-color:color-mix(in oklab,var(--color-grab-purple)40%,transparent)}}.border-grab-purple\\/50{border-color:#d239c080}@supports (color:color-mix(in lab, red, red)){.border-grab-purple\\/50{border-color:color-mix(in oklab,var(--color-grab-purple)50%,transparent)}}.border-t-transparent{border-top-color:#0000}.bg-grab-pink-light{background-color:var(--color-grab-pink-light)}.bg-grab-pink\\/20{background-color:#b21c8e33}@supports (color:color-mix(in lab, red, red)){.bg-grab-pink\\/20{background-color:color-mix(in oklab,var(--color-grab-pink)20%,transparent)}}.bg-grab-purple\\/5{background-color:#d239c00d}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/5{background-color:color-mix(in oklab,var(--color-grab-purple)5%,transparent)}}.bg-grab-purple\\/8{background-color:#d239c014}@supports (color:color-mix(in lab, red, red)){.bg-grab-purple\\/8{background-color:color-mix(in oklab,var(--color-grab-purple)8%,transparent)}}.bg-white{background-color:var(--color-white)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-\\[3px\\]{padding-inline:3px}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.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)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-grab-pink{color:var(--color-grab-pink)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.opacity-60{opacity:.6}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.will-change-\\[transform\\,width\\,height\\]{will-change:transform,width,height}.outline-none{--tw-outline-style:none;outline-style:none}}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}';
|
|
746
746
|
|
|
747
747
|
// src/utils/is-keyboard-event-triggered-by-input.ts
|
|
748
748
|
var FORM_TAGS_AND_ROLES = [
|
|
@@ -3400,7 +3400,7 @@ var SelectionBox = (props) => {
|
|
|
3400
3400
|
get children() {
|
|
3401
3401
|
var _el$ = _tmpl$();
|
|
3402
3402
|
createRenderEffect((_p$) => {
|
|
3403
|
-
var _v$ = cn("fixed box-border", props.variant === "drag" && "pointer-events-none", props.variant !== "drag" && "pointer-events-auto", props.variant === "grabbed" && "z-2147483645", props.variant !== "grabbed" && "z-2147483646", props.variant === "drag" && "border border-dashed border-grab-purple/40 bg-grab-purple/5 will-change-[transform,width,height] cursor-crosshair", props.variant === "selection" && "border border-dashed border-grab-purple/50 bg-grab-purple/8", props.variant === "grabbed" && "border border-grab-purple bg-grab-purple/8 transition-opacity duration-300 ease-out"), _v$2 = `${currentY()}px`, _v$3 = `${currentX()}px`, _v$4 = `${currentWidth()}px`, _v$5 = `${currentHeight()}px`, _v$6 = props.bounds.borderRadius, _v$7 = props.bounds.transform, _v$8 = opacity(), _v$9 = props.variant === "drag" ? "layout paint size" : void 0;
|
|
3403
|
+
var _v$ = cn("fixed box-border", props.variant === "drag" && "pointer-events-none", props.variant !== "drag" && "pointer-events-auto", props.variant === "grabbed" && "z-2147483645", props.variant !== "grabbed" && "z-2147483646", props.variant === "drag" && "border border-dashed border-grab-purple/40 bg-grab-purple/5 will-change-[transform,width,height] cursor-crosshair", props.variant === "selection" && "border border-dashed border-grab-purple/50 bg-grab-purple/8", props.variant === "grabbed" && "border border-solid border-grab-purple bg-grab-purple/8 transition-opacity duration-300 ease-out"), _v$2 = `${currentY()}px`, _v$3 = `${currentX()}px`, _v$4 = `${currentWidth()}px`, _v$5 = `${currentHeight()}px`, _v$6 = props.bounds.borderRadius, _v$7 = props.bounds.transform, _v$8 = opacity(), _v$9 = props.variant === "drag" ? "layout paint size" : void 0;
|
|
3404
3404
|
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
3405
3405
|
_v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
|
|
3406
3406
|
_v$3 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$3);
|
|
@@ -3761,7 +3761,7 @@ var Crosshair = (props) => {
|
|
|
3761
3761
|
};
|
|
3762
3762
|
|
|
3763
3763
|
// src/components/input-overlay.tsx
|
|
3764
|
-
var _tmpl$8 = /* @__PURE__ */ template(`<div data-react-grab-input class="fixed bg-grab-pink-light text-grab-pink border border-grab-pink-border rounded text-[11px] font-medium font-sans overflow-hidden"style="max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))"><div class="relative p-0.5 px-[3px] flex flex-col gap-0.5"><textarea placeholder="
|
|
3764
|
+
var _tmpl$8 = /* @__PURE__ */ template(`<div data-react-grab-input class="fixed bg-grab-pink-light text-grab-pink border border-grab-pink-border rounded text-[11px] font-medium font-sans overflow-hidden"style="max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))"><div class="relative p-0.5 px-[3px] flex flex-col gap-0.5"><textarea placeholder="Make a change"rows=1 class="w-[150px] px-1 py-0.5 bg-white text-grab-pink border border-grab-pink-border rounded-[3px] text-[11px] leading-tight font-sans outline-none resize-none min-h-[18px] overflow-hidden"></textarea><div class="text-[9px] opacity-60 text-center">Enter \u23CE submit · Esc cancel`);
|
|
3765
3765
|
var InputOverlay = (props) => {
|
|
3766
3766
|
let containerRef;
|
|
3767
3767
|
let inputRef;
|
|
@@ -3806,10 +3806,16 @@ var InputOverlay = (props) => {
|
|
|
3806
3806
|
const handleInput = (event) => {
|
|
3807
3807
|
const target = event.target;
|
|
3808
3808
|
props.onInput(target.value);
|
|
3809
|
+
autoResizeTextarea(target);
|
|
3810
|
+
};
|
|
3811
|
+
const autoResizeTextarea = (textarea) => {
|
|
3812
|
+
textarea.style.height = "auto";
|
|
3813
|
+
textarea.style.height = `${textarea.scrollHeight}px`;
|
|
3809
3814
|
};
|
|
3810
3815
|
createEffect(() => {
|
|
3811
3816
|
if (props.visible && inputRef) {
|
|
3812
3817
|
inputRef.focus();
|
|
3818
|
+
inputRef.style.height = "auto";
|
|
3813
3819
|
} else if (!props.visible && inputRef) {
|
|
3814
3820
|
inputRef.blur();
|
|
3815
3821
|
}
|
|
@@ -5308,6 +5314,43 @@ var mergeTheme = (userTheme) => {
|
|
|
5308
5314
|
}
|
|
5309
5315
|
};
|
|
5310
5316
|
};
|
|
5317
|
+
var deepMergeTheme = (baseTheme, partialTheme) => {
|
|
5318
|
+
return {
|
|
5319
|
+
enabled: partialTheme.enabled ?? baseTheme.enabled,
|
|
5320
|
+
hue: partialTheme.hue ?? baseTheme.hue,
|
|
5321
|
+
selectionBox: {
|
|
5322
|
+
enabled: partialTheme.selectionBox?.enabled ?? baseTheme.selectionBox.enabled,
|
|
5323
|
+
color: partialTheme.selectionBox?.color ?? baseTheme.selectionBox.color,
|
|
5324
|
+
borderRadius: partialTheme.selectionBox?.borderRadius ?? baseTheme.selectionBox.borderRadius
|
|
5325
|
+
},
|
|
5326
|
+
dragBox: {
|
|
5327
|
+
enabled: partialTheme.dragBox?.enabled ?? baseTheme.dragBox.enabled,
|
|
5328
|
+
color: partialTheme.dragBox?.color ?? baseTheme.dragBox.color
|
|
5329
|
+
},
|
|
5330
|
+
grabbedBoxes: {
|
|
5331
|
+
enabled: partialTheme.grabbedBoxes?.enabled ?? baseTheme.grabbedBoxes.enabled,
|
|
5332
|
+
color: partialTheme.grabbedBoxes?.color ?? baseTheme.grabbedBoxes.color
|
|
5333
|
+
},
|
|
5334
|
+
elementLabel: {
|
|
5335
|
+
enabled: partialTheme.elementLabel?.enabled ?? baseTheme.elementLabel.enabled,
|
|
5336
|
+
backgroundColor: partialTheme.elementLabel?.backgroundColor ?? baseTheme.elementLabel.backgroundColor,
|
|
5337
|
+
textColor: partialTheme.elementLabel?.textColor ?? baseTheme.elementLabel.textColor,
|
|
5338
|
+
borderColor: partialTheme.elementLabel?.borderColor ?? baseTheme.elementLabel.borderColor,
|
|
5339
|
+
padding: partialTheme.elementLabel?.padding ?? baseTheme.elementLabel.padding,
|
|
5340
|
+
cursorOffset: partialTheme.elementLabel?.cursorOffset ?? baseTheme.elementLabel.cursorOffset
|
|
5341
|
+
},
|
|
5342
|
+
successLabels: {
|
|
5343
|
+
enabled: partialTheme.successLabels?.enabled ?? baseTheme.successLabels.enabled
|
|
5344
|
+
},
|
|
5345
|
+
crosshair: {
|
|
5346
|
+
enabled: partialTheme.crosshair?.enabled ?? baseTheme.crosshair.enabled,
|
|
5347
|
+
color: partialTheme.crosshair?.color ?? baseTheme.crosshair.color
|
|
5348
|
+
},
|
|
5349
|
+
inputOverlay: {
|
|
5350
|
+
enabled: partialTheme.inputOverlay?.enabled ?? baseTheme.inputOverlay.enabled
|
|
5351
|
+
}
|
|
5352
|
+
};
|
|
5353
|
+
};
|
|
5311
5354
|
|
|
5312
5355
|
// src/core.tsx
|
|
5313
5356
|
var _tmpl$9 = /* @__PURE__ */ template(`<span class="font-mono tabular-nums align-middle">1 element`);
|
|
@@ -5321,7 +5364,7 @@ var init = (rawOptions) => {
|
|
|
5321
5364
|
allowActivationInsideInput: true,
|
|
5322
5365
|
...rawOptions
|
|
5323
5366
|
};
|
|
5324
|
-
const
|
|
5367
|
+
const initialTheme = mergeTheme(options.theme);
|
|
5325
5368
|
if (options.enabled === false || hasInited) {
|
|
5326
5369
|
return {
|
|
5327
5370
|
activate: () => {
|
|
@@ -5340,13 +5383,16 @@ var init = (rawOptions) => {
|
|
|
5340
5383
|
isCopying: false,
|
|
5341
5384
|
targetElement: null,
|
|
5342
5385
|
dragBounds: null
|
|
5343
|
-
})
|
|
5386
|
+
}),
|
|
5387
|
+
updateTheme: () => {
|
|
5388
|
+
},
|
|
5389
|
+
getTheme: () => initialTheme
|
|
5344
5390
|
};
|
|
5345
5391
|
}
|
|
5346
5392
|
hasInited = true;
|
|
5347
5393
|
const logIntro = () => {
|
|
5348
5394
|
try {
|
|
5349
|
-
const version = "0.0.
|
|
5395
|
+
const version = "0.0.52";
|
|
5350
5396
|
const logoSvg = `<svg width="294" height="294" viewBox="0 0 294 294" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_0_3)"><mask id="mask0_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="294" height="294"><path d="M294 0H0V294H294V0Z" fill="white"/></mask><g mask="url(#mask0_0_3)"><path d="M144.599 47.4924C169.712 27.3959 194.548 20.0265 212.132 30.1797C227.847 39.2555 234.881 60.3243 231.926 89.516C231.677 92.0069 231.328 94.5423 230.94 97.1058L228.526 110.14C228.517 110.136 228.505 110.132 228.495 110.127C228.486 110.165 228.479 110.203 228.468 110.24L216.255 105.741C216.256 105.736 216.248 105.728 216.248 105.723C207.915 103.125 199.421 101.075 190.82 99.5888L190.696 99.5588L173.526 97.2648L173.511 97.2631C173.492 97.236 173.467 97.2176 173.447 97.1905C163.862 96.2064 154.233 95.7166 144.599 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8624 138.391 86.939 147.193C90.8624 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245C115.749 197.245 115.758 197.246 115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.507 229.974L144.609 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.472 238.38C154.485 238.392 154.499 238.402 154.513 238.412L143.846 247.482L143.827 247.497C126.56 261.128 109.472 268.745 94.8019 268.745C88.5916 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3164 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3363 185.327 9.52301 167.51 9.52301 147.193C9.52301 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3164 60.3243 61.3496 39.2555 77.0657 30.1797C94.6494 20.0265 119.486 27.3959 144.599 47.4924ZM70.6423 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5176 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8516 207.742 83.0977 205.066 70.6423 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1787 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.9311 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.759 110.203C59.234 110.839 57.7378 111.475 56.27 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9104 147.193C67.822 135.23 63.7566 122.855 60.759 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.854 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.6291 47.6015 67.6975 64.5954 70.0424 87.9446L70.0416 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8263 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.773 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.29 38.512C183.321 38.512 169.34 44.4991 154.444 56.0153C163.93 64.9374 172.634 74.6557 180.462 85.064C193.375 86.6345 206.128 89.3102 218.584 93.0624C218.812 91.4325 219.003 89.8118 219.165 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.552 64.3097C138.104 70.2614 132.054 76.6306 126.443 83.3765C132.39 82.995 138.426 82.8046 144.552 82.8046C150.727 82.8046 156.778 83.0143 162.707 83.3765C157.08 76.6293 151.015 70.2596 144.552 64.3097Z" fill="white"/><path d="M144.598 47.4924C169.712 27.3959 194.547 20.0265 212.131 30.1797C227.847 39.2555 234.88 60.3243 231.926 89.516C231.677 92.0069 231.327 94.5423 230.941 97.1058L228.526 110.14L228.496 110.127C228.487 110.165 228.478 110.203 228.469 110.24L216.255 105.741L216.249 105.723C207.916 103.125 199.42 101.075 190.82 99.5888L190.696 99.5588L173.525 97.2648L173.511 97.263C173.492 97.236 173.468 97.2176 173.447 97.1905C163.863 96.2064 154.234 95.7166 144.598 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8622 138.391 86.939 147.193C90.8622 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245L115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.506 229.974L144.61 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.473 238.38L154.512 238.412L143.847 247.482L143.827 247.497C126.56 261.13 109.472 268.745 94.8018 268.745C88.5915 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3162 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3362 185.327 9.52298 167.51 9.52298 147.193C9.52298 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3162 60.3243 61.3496 39.2555 77.0657 30.1797C94.6493 20.0265 119.486 27.3959 144.598 47.4924ZM70.6422 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5175 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8515 207.742 83.0977 205.066 70.6422 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1786 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.931 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.7589 110.203C59.234 110.839 57.7378 111.475 56.2699 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9103 147.193C67.822 135.23 63.7566 122.855 60.7589 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.8539 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.629 47.6015 67.6975 64.5954 70.0424 87.9446L70.0415 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8262 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.772 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.291 38.512C183.321 38.512 169.34 44.4991 154.443 56.0153C163.929 64.9374 172.634 74.6557 180.462 85.064C193.374 86.6345 206.129 89.3102 218.584 93.0624C218.813 91.4325 219.003 89.8118 219.166 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.551 64.3097C138.103 70.2614 132.055 76.6306 126.443 83.3765C132.389 82.995 138.427 82.8046 144.551 82.8046C150.727 82.8046 156.779 83.0143 162.707 83.3765C157.079 76.6293 151.015 70.2596 144.551 64.3097Z" fill="#FF40E0"/></g><mask id="mask1_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="102" y="84" width="161" height="162"><path d="M235.282 84.827L102.261 112.259L129.693 245.28L262.714 217.848L235.282 84.827Z" fill="white"/></mask><g mask="url(#mask1_0_3)"><path d="M136.863 129.916L213.258 141.224C220.669 142.322 222.495 152.179 215.967 155.856L187.592 171.843L184.135 204.227C183.339 211.678 173.564 213.901 169.624 207.526L129.021 141.831C125.503 136.14 130.245 128.936 136.863 129.916Z" fill="#FF40E0" stroke="#FF40E0" stroke-width="0.817337" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="clip0_0_3"><rect width="294" height="294" fill="white"/></clipPath></defs></svg>`;
|
|
5351
5397
|
const logoDataUri = `data:image/svg+xml;base64,${btoa(logoSvg)}`;
|
|
5352
5398
|
console.log(`%cReact Grab${version ? ` v${version}` : ""}%c
|
|
@@ -5368,6 +5414,7 @@ https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid
|
|
|
5368
5414
|
};
|
|
5369
5415
|
logIntro();
|
|
5370
5416
|
return createRoot((dispose2) => {
|
|
5417
|
+
const [theme, setTheme] = createSignal(initialTheme);
|
|
5371
5418
|
const [isHoldingKeys, setIsHoldingKeys] = createSignal(false);
|
|
5372
5419
|
const [mouseX, setMouseX] = createSignal(OFFSCREEN_POSITION);
|
|
5373
5420
|
const [mouseY, setMouseY] = createSignal(OFFSCREEN_POSITION);
|
|
@@ -5554,12 +5601,12 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
5554
5601
|
options.onElementSelect?.(targetElement2);
|
|
5555
5602
|
} catch {
|
|
5556
5603
|
}
|
|
5557
|
-
if (theme.grabbedBoxes.enabled) {
|
|
5604
|
+
if (theme().grabbedBoxes.enabled) {
|
|
5558
5605
|
showTemporaryGrabbedBox(createElementBounds(targetElement2), targetElement2);
|
|
5559
5606
|
}
|
|
5560
5607
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
5561
5608
|
const didCopy = await tryCopyWithFallback([targetElement2], extraPrompt);
|
|
5562
|
-
if (didCopy && theme.successLabels.enabled) {
|
|
5609
|
+
if (didCopy && theme().successLabels.enabled) {
|
|
5563
5610
|
showTemporarySuccessLabel(extractElementTagNameForSuccess(targetElement2));
|
|
5564
5611
|
}
|
|
5565
5612
|
notifyElementsSelected([targetElement2]);
|
|
@@ -5572,14 +5619,14 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
5572
5619
|
} catch {
|
|
5573
5620
|
}
|
|
5574
5621
|
}
|
|
5575
|
-
if (theme.grabbedBoxes.enabled) {
|
|
5622
|
+
if (theme().grabbedBoxes.enabled) {
|
|
5576
5623
|
for (const element of targetElements) {
|
|
5577
5624
|
showTemporaryGrabbedBox(createElementBounds(element), element);
|
|
5578
5625
|
}
|
|
5579
5626
|
}
|
|
5580
5627
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
5581
5628
|
const didCopy = await tryCopyWithFallback(targetElements);
|
|
5582
|
-
if (didCopy && theme.successLabels.enabled) {
|
|
5629
|
+
if (didCopy && theme().successLabels.enabled) {
|
|
5583
5630
|
showTemporarySuccessLabel(`${targetElements.length} elements`);
|
|
5584
5631
|
}
|
|
5585
5632
|
notifyElementsSelected(targetElements);
|
|
@@ -5859,6 +5906,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
5859
5906
|
return;
|
|
5860
5907
|
}
|
|
5861
5908
|
if (!isTargetKeyCombination(event)) return;
|
|
5909
|
+
if (isActivated() || isHoldingKeys()) {
|
|
5910
|
+
event.preventDefault();
|
|
5911
|
+
}
|
|
5862
5912
|
if (isActivated()) {
|
|
5863
5913
|
if (isToggleMode()) return;
|
|
5864
5914
|
if (keydownSpamTimerId !== null) {
|
|
@@ -5896,6 +5946,7 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
5896
5946
|
capture: true
|
|
5897
5947
|
});
|
|
5898
5948
|
window.addEventListener("mousemove", (event) => {
|
|
5949
|
+
if (isInputMode()) return;
|
|
5899
5950
|
setMouseX(event.clientX);
|
|
5900
5951
|
setMouseY(event.clientY);
|
|
5901
5952
|
if (mouseSettleTimerId !== null) {
|
|
@@ -6016,6 +6067,14 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
6016
6067
|
}, {
|
|
6017
6068
|
signal: eventListenerSignal
|
|
6018
6069
|
});
|
|
6070
|
+
document.addEventListener("copy", (event) => {
|
|
6071
|
+
if (isRendererActive() || isCopying()) {
|
|
6072
|
+
event.preventDefault();
|
|
6073
|
+
}
|
|
6074
|
+
}, {
|
|
6075
|
+
signal: eventListenerSignal,
|
|
6076
|
+
capture: true
|
|
6077
|
+
});
|
|
6019
6078
|
onCleanup(() => {
|
|
6020
6079
|
abortController.abort();
|
|
6021
6080
|
if (holdTimerId) window.clearTimeout(holdTimerId);
|
|
@@ -6027,25 +6086,29 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
6027
6086
|
document.body.style.cursor = "";
|
|
6028
6087
|
});
|
|
6029
6088
|
const rendererRoot = mountRoot(styles_default);
|
|
6030
|
-
const selectionVisible = createMemo(() => theme.selectionBox.enabled && isRendererActive() && !isDragging() && Boolean(targetElement()));
|
|
6031
|
-
const dragVisible = createMemo(() => theme.dragBox.enabled && isRendererActive() && isDraggingBeyondThreshold());
|
|
6089
|
+
const selectionVisible = createMemo(() => theme().selectionBox.enabled && isRendererActive() && !isDragging() && Boolean(targetElement()));
|
|
6090
|
+
const dragVisible = createMemo(() => theme().dragBox.enabled && isRendererActive() && isDraggingBeyondThreshold());
|
|
6032
6091
|
const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
|
|
6033
6092
|
const labelVisible = createMemo(() => {
|
|
6034
|
-
if (!theme.elementLabel.enabled) return false;
|
|
6093
|
+
if (!theme().elementLabel.enabled) return false;
|
|
6035
6094
|
if (isInputMode()) return false;
|
|
6036
6095
|
if (isCopying()) return true;
|
|
6037
6096
|
if (successLabels().length > 0) return false;
|
|
6038
6097
|
return isRendererActive() && !isDragging() && Boolean(targetElement());
|
|
6039
6098
|
});
|
|
6040
6099
|
const progressVisible = createMemo(() => isCopying() && showProgressIndicator() && hasValidMousePosition());
|
|
6041
|
-
const crosshairVisible = createMemo(() => theme.crosshair.enabled && isRendererActive() && !isDragging());
|
|
6042
|
-
const inputVisible = createMemo(() => theme.inputOverlay.enabled && isInputMode());
|
|
6043
|
-
const shouldShowGrabbedBoxes = createMemo(() => theme.grabbedBoxes.enabled);
|
|
6044
|
-
const shouldShowSuccessLabels = createMemo(() => theme.successLabels.enabled);
|
|
6045
|
-
|
|
6046
|
-
if (
|
|
6047
|
-
rendererRoot.style.filter = `hue-rotate(${
|
|
6100
|
+
const crosshairVisible = createMemo(() => theme().crosshair.enabled && isRendererActive() && !isDragging());
|
|
6101
|
+
const inputVisible = createMemo(() => theme().inputOverlay.enabled && isInputMode());
|
|
6102
|
+
const shouldShowGrabbedBoxes = createMemo(() => theme().grabbedBoxes.enabled);
|
|
6103
|
+
const shouldShowSuccessLabels = createMemo(() => theme().successLabels.enabled);
|
|
6104
|
+
createEffect(on(theme, (currentTheme) => {
|
|
6105
|
+
if (currentTheme.hue !== 0) {
|
|
6106
|
+
rendererRoot.style.filter = `hue-rotate(${currentTheme.hue}deg)`;
|
|
6107
|
+
} else {
|
|
6108
|
+
rendererRoot.style.filter = "";
|
|
6048
6109
|
}
|
|
6110
|
+
}));
|
|
6111
|
+
if (theme().enabled) {
|
|
6049
6112
|
render(() => createComponent(ReactGrabRenderer, {
|
|
6050
6113
|
get selectionVisible() {
|
|
6051
6114
|
return selectionVisible();
|
|
@@ -6114,7 +6177,9 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
6114
6177
|
onInputChange: handleInputChange,
|
|
6115
6178
|
onInputSubmit: handleInputSubmit,
|
|
6116
6179
|
onInputCancel: handleInputCancel,
|
|
6117
|
-
theme
|
|
6180
|
+
get theme() {
|
|
6181
|
+
return theme();
|
|
6182
|
+
}
|
|
6118
6183
|
}), rendererRoot);
|
|
6119
6184
|
}
|
|
6120
6185
|
const copyElementAPI = async (elements) => {
|
|
@@ -6164,7 +6229,13 @@ ${plainTextContentOnly}` : plainTextContentOnly;
|
|
|
6164
6229
|
isActive: () => isActivated(),
|
|
6165
6230
|
dispose: dispose2,
|
|
6166
6231
|
copyElement: copyElementAPI,
|
|
6167
|
-
getState: getStateAPI
|
|
6232
|
+
getState: getStateAPI,
|
|
6233
|
+
updateTheme: (partialTheme) => {
|
|
6234
|
+
const currentTheme = theme();
|
|
6235
|
+
const mergedTheme = deepMergeTheme(currentTheme, partialTheme);
|
|
6236
|
+
setTheme(mergedTheme);
|
|
6237
|
+
},
|
|
6238
|
+
getTheme: () => theme()
|
|
6168
6239
|
};
|
|
6169
6240
|
});
|
|
6170
6241
|
};
|
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
import { FiberSource } from 'bippy/source';
|
|
2
|
+
import 'bippy';
|
|
3
|
+
|
|
4
|
+
type DeepPartial<T> = {
|
|
5
|
+
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
6
|
+
};
|
|
7
|
+
interface Theme {
|
|
8
|
+
/**
|
|
9
|
+
* Globally toggle the entire overlay
|
|
10
|
+
* @default true
|
|
11
|
+
*/
|
|
12
|
+
enabled?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Base hue (0-360) used to generate colors throughout the interface using HSL color space
|
|
15
|
+
* @default 0
|
|
16
|
+
*/
|
|
17
|
+
hue?: number;
|
|
18
|
+
/**
|
|
19
|
+
* The highlight box that appears when hovering over an element before selecting it
|
|
20
|
+
* @default true
|
|
21
|
+
*/
|
|
22
|
+
selectionBox?: {
|
|
23
|
+
/**
|
|
24
|
+
* Whether to show the selection highlight
|
|
25
|
+
* @default true
|
|
26
|
+
*/
|
|
27
|
+
enabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* The border/outline color of the selection box.
|
|
30
|
+
* When undefined, falls back to grab-purple (rgb(210, 57, 192)) with opacity modifiers (50% border, 8% fill).
|
|
31
|
+
* When set, this color is used as the base for both the border and fill with the same opacity modifiers.
|
|
32
|
+
* @default undefined
|
|
33
|
+
*/
|
|
34
|
+
color?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Rounded corners of the selection box (e.g., "4px")
|
|
37
|
+
* @default 0px
|
|
38
|
+
*/
|
|
39
|
+
borderRadius?: string;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* The rectangular selection area that appears when clicking and dragging to select multiple elements
|
|
43
|
+
* @default true
|
|
44
|
+
*/
|
|
45
|
+
dragBox?: {
|
|
46
|
+
/**
|
|
47
|
+
* Whether to show the drag selection box
|
|
48
|
+
* @default true
|
|
49
|
+
*/
|
|
50
|
+
enabled?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* The fill color and border of the drag rectangle.
|
|
53
|
+
* When undefined, falls back to grab-purple (rgb(210, 57, 192)) with opacity modifiers (40% border, 5% fill).
|
|
54
|
+
* When set, this color is used as the base for both the border and fill with the same opacity modifiers.
|
|
55
|
+
* @default undefined
|
|
56
|
+
*/
|
|
57
|
+
color?: string;
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* Brief flash/highlight boxes that appear on elements immediately after they're successfully grabbed/copied
|
|
61
|
+
* @default true
|
|
62
|
+
*/
|
|
63
|
+
grabbedBoxes?: {
|
|
64
|
+
/**
|
|
65
|
+
* Whether to show these success flash effects
|
|
66
|
+
* @default true
|
|
67
|
+
*/
|
|
68
|
+
enabled?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* The color of the flash boxes.
|
|
71
|
+
* When undefined, falls back to grab-purple (rgb(210, 57, 192)) with opacity modifiers (100% border, 8% fill).
|
|
72
|
+
* When set, this color is used as the base for both the border and fill with the same opacity modifiers.
|
|
73
|
+
* @default undefined
|
|
74
|
+
*/
|
|
75
|
+
color?: string;
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* The floating label that follows the cursor showing information about the currently hovered element
|
|
79
|
+
* @default true
|
|
80
|
+
*/
|
|
81
|
+
elementLabel?: {
|
|
82
|
+
/**
|
|
83
|
+
* Whether to show the label
|
|
84
|
+
* @default true
|
|
85
|
+
*/
|
|
86
|
+
enabled?: boolean;
|
|
87
|
+
/**
|
|
88
|
+
* Background color of the label box
|
|
89
|
+
* @default #fde7f7 (grab-pink-light)
|
|
90
|
+
*/
|
|
91
|
+
backgroundColor?: string;
|
|
92
|
+
/**
|
|
93
|
+
* Color of the text inside the label
|
|
94
|
+
* @default #b21c8e (grab-pink)
|
|
95
|
+
*/
|
|
96
|
+
textColor?: string;
|
|
97
|
+
/**
|
|
98
|
+
* Border color around the label
|
|
99
|
+
* @default #f7c5ec (grab-pink-border)
|
|
100
|
+
*/
|
|
101
|
+
borderColor?: string;
|
|
102
|
+
/**
|
|
103
|
+
* Internal spacing of the label (e.g., "4px 8px")
|
|
104
|
+
* @default "2px 6px"
|
|
105
|
+
*/
|
|
106
|
+
padding?: string;
|
|
107
|
+
/**
|
|
108
|
+
* Distance in pixels the label appears from the cursor
|
|
109
|
+
* @default 14
|
|
110
|
+
*/
|
|
111
|
+
cursorOffset?: number;
|
|
112
|
+
};
|
|
113
|
+
/**
|
|
114
|
+
* Text labels that appear after successful operations (like "Copied!" messages)
|
|
115
|
+
* @default true
|
|
116
|
+
*/
|
|
117
|
+
successLabels?: {
|
|
118
|
+
/**
|
|
119
|
+
* Whether to show success feedback labels
|
|
120
|
+
* @default true
|
|
121
|
+
*/
|
|
122
|
+
enabled?: boolean;
|
|
123
|
+
};
|
|
124
|
+
/**
|
|
125
|
+
* The crosshair cursor overlay that helps with precise element targeting
|
|
126
|
+
* @default true
|
|
127
|
+
*/
|
|
128
|
+
crosshair?: {
|
|
129
|
+
/**
|
|
130
|
+
* Whether to show the crosshair
|
|
131
|
+
* @default true
|
|
132
|
+
*/
|
|
133
|
+
enabled?: boolean;
|
|
134
|
+
/**
|
|
135
|
+
* Color of the crosshair lines
|
|
136
|
+
* @default rgba(210, 57, 192) (grab-purple)
|
|
137
|
+
*/
|
|
138
|
+
color?: string;
|
|
139
|
+
};
|
|
140
|
+
/**
|
|
141
|
+
* An input field overlay that can appear for text entry during selection
|
|
142
|
+
* @default true
|
|
143
|
+
*/
|
|
144
|
+
inputOverlay?: {
|
|
145
|
+
/**
|
|
146
|
+
* Whether to show the input overlay when needed
|
|
147
|
+
* @default true
|
|
148
|
+
*/
|
|
149
|
+
enabled?: boolean;
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
interface ReactGrabState {
|
|
153
|
+
isActive: boolean;
|
|
154
|
+
isDragging: boolean;
|
|
155
|
+
isCopying: boolean;
|
|
156
|
+
targetElement: Element | null;
|
|
157
|
+
dragBounds: DragRect | null;
|
|
158
|
+
}
|
|
159
|
+
type RenderType = "selectionBox" | "dragBox" | "grabbedBox" | "elementLabel" | "successLabel" | "crosshair" | "inputOverlay";
|
|
160
|
+
interface RenderData {
|
|
161
|
+
ref: HTMLElement | undefined;
|
|
162
|
+
props: Record<string, unknown>;
|
|
163
|
+
}
|
|
164
|
+
interface Options {
|
|
165
|
+
enabled?: boolean;
|
|
166
|
+
keyHoldDuration?: number;
|
|
167
|
+
allowActivationInsideInput?: boolean;
|
|
168
|
+
theme?: Theme;
|
|
169
|
+
onActivate?: () => void;
|
|
170
|
+
onDeactivate?: () => void;
|
|
171
|
+
onElementHover?: (element: Element) => void;
|
|
172
|
+
onElementSelect?: (element: Element) => void;
|
|
173
|
+
onDragStart?: (startX: number, startY: number) => void;
|
|
174
|
+
onDragEnd?: (elements: Element[], bounds: DragRect) => void;
|
|
175
|
+
onBeforeCopy?: (elements: Element[]) => void | Promise<void>;
|
|
176
|
+
onAfterCopy?: (elements: Element[], success: boolean) => void;
|
|
177
|
+
onCopySuccess?: (elements: Element[], content: string) => void;
|
|
178
|
+
onCopyError?: (error: Error) => void;
|
|
179
|
+
onStateChange?: (state: ReactGrabState) => void;
|
|
180
|
+
onRender?: (type: RenderType, data: RenderData) => void;
|
|
181
|
+
}
|
|
182
|
+
interface ReactGrabAPI {
|
|
183
|
+
activate: () => void;
|
|
184
|
+
deactivate: () => void;
|
|
185
|
+
toggle: () => void;
|
|
186
|
+
isActive: () => boolean;
|
|
187
|
+
dispose: () => void;
|
|
188
|
+
copyElement: (elements: Element | Element[]) => Promise<boolean>;
|
|
189
|
+
getState: () => ReactGrabState;
|
|
190
|
+
updateTheme: (theme: DeepPartial<Theme>) => void;
|
|
191
|
+
getTheme: () => Required<Theme>;
|
|
192
|
+
}
|
|
193
|
+
interface OverlayBounds {
|
|
194
|
+
borderRadius: string;
|
|
195
|
+
height: number;
|
|
196
|
+
transform: string;
|
|
197
|
+
width: number;
|
|
198
|
+
x: number;
|
|
199
|
+
y: number;
|
|
200
|
+
}
|
|
201
|
+
interface ReactGrabRendererProps {
|
|
202
|
+
selectionVisible?: boolean;
|
|
203
|
+
selectionBounds?: OverlayBounds;
|
|
204
|
+
dragVisible?: boolean;
|
|
205
|
+
dragBounds?: OverlayBounds;
|
|
206
|
+
grabbedBoxes?: Array<{
|
|
207
|
+
id: string;
|
|
208
|
+
bounds: OverlayBounds;
|
|
209
|
+
createdAt: number;
|
|
210
|
+
}>;
|
|
211
|
+
successLabels?: Array<{
|
|
212
|
+
id: string;
|
|
213
|
+
text: string;
|
|
214
|
+
}>;
|
|
215
|
+
labelVariant?: "hover" | "processing" | "success";
|
|
216
|
+
labelContent?: unknown;
|
|
217
|
+
labelX?: number;
|
|
218
|
+
labelY?: number;
|
|
219
|
+
labelVisible?: boolean;
|
|
220
|
+
labelZIndex?: number;
|
|
221
|
+
labelShowHint?: boolean;
|
|
222
|
+
progressVisible?: boolean;
|
|
223
|
+
progress?: number;
|
|
224
|
+
mouseX?: number;
|
|
225
|
+
mouseY?: number;
|
|
226
|
+
crosshairVisible?: boolean;
|
|
227
|
+
inputVisible?: boolean;
|
|
228
|
+
inputX?: number;
|
|
229
|
+
inputY?: number;
|
|
230
|
+
inputValue?: string;
|
|
231
|
+
onInputChange?: (value: string) => void;
|
|
232
|
+
onInputSubmit?: () => void;
|
|
233
|
+
onInputCancel?: () => void;
|
|
234
|
+
theme?: Required<Theme>;
|
|
235
|
+
}
|
|
236
|
+
interface GrabbedBox {
|
|
237
|
+
id: string;
|
|
238
|
+
bounds: OverlayBounds;
|
|
239
|
+
createdAt: number;
|
|
240
|
+
element: Element;
|
|
241
|
+
}
|
|
242
|
+
interface Rect {
|
|
243
|
+
left: number;
|
|
244
|
+
top: number;
|
|
245
|
+
right: number;
|
|
246
|
+
bottom: number;
|
|
247
|
+
}
|
|
248
|
+
interface DragRect {
|
|
249
|
+
x: number;
|
|
250
|
+
y: number;
|
|
251
|
+
width: number;
|
|
252
|
+
height: number;
|
|
253
|
+
}
|
|
254
|
+
interface Position {
|
|
255
|
+
left: number;
|
|
256
|
+
top: number;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
declare const getNearestComponentName: (element: Element) => string | null;
|
|
260
|
+
interface StackFrame {
|
|
261
|
+
name: string;
|
|
262
|
+
source: FiberSource | null;
|
|
263
|
+
}
|
|
264
|
+
declare const getStack: (element: Element) => Promise<Array<StackFrame>>;
|
|
265
|
+
declare const formatStack: (stack: Array<StackFrame>) => string;
|
|
266
|
+
declare const getHTMLPreview: (element: Element) => string;
|
|
267
|
+
|
|
268
|
+
declare const DEFAULT_THEME: Required<Theme>;
|
|
269
|
+
|
|
270
|
+
declare const init: (rawOptions?: Options) => ReactGrabAPI;
|
|
271
|
+
|
|
272
|
+
export { DEFAULT_THEME as D, type GrabbedBox as G, type Options as O, type Position as P, type ReactGrabAPI as R, type Theme as T, getHTMLPreview as a, getNearestComponentName as b, type ReactGrabState as c, type RenderType as d, type RenderData as e, formatStack as f, getStack as g, type OverlayBounds as h, init as i, type DragRect as j, type Rect as k, type DeepPartial as l, type ReactGrabRendererProps as m };
|