@uxbertlabs/reportly 1.0.21 → 1.0.22
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/dist/components/IssueModal.d.ts.map +1 -1
- package/dist/components/Reportly.d.ts.map +1 -1
- package/dist/features/annotation.d.ts +9 -1
- package/dist/features/annotation.d.ts.map +1 -1
- package/dist/index.cjs.js +223 -17
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.js +223 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/lib/utils.d.ts +6 -0
- package/dist/lib/utils.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--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-black:#000;--spacing:0.25rem;--container-xs:20rem;--container-2xl:42rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-xl:1.25rem;--text-xl--line-height:1.4;--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:0.025em;--radius-md:0.375rem;--radius-lg:0.5rem;--ease-in-out:cubic-bezier(0.4,0,0.2,1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:0.5rem;--color-border:oklch(0.9 0 0);--color-input:oklch(0.9 0 0);--color-ring:oklch(0.1 0 0);--color-background:oklch(1 0 0);--color-foreground:oklch(0.09 0 0);--color-primary:oklch(0.1 0 0);--color-muted:oklch(0.96 0 0);--color-muted-foreground:oklch(0.45 0 0);--color-destructive:oklch(0.6 0.2 25);--uxbert-z-canvas:999997;--uxbert-z-button:999998;--uxbert-z-toolbar:999999;--uxbert-z-modal:1000000}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;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-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}: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}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){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,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-6{top:calc(var(--spacing)*6)}.right-6{right:calc(var(--spacing)*6)}.bottom-6{bottom:calc(var(--spacing)*6)}.left-6{left:calc(var(--spacing)*6)}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.mx-auto{margin-inline:auto}.mt-3{margin-top:calc(var(--spacing)*3)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.block{display:block}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-14{height:calc(var(--spacing)*14)}.h-16{height:calc(var(--spacing)*16)}.h-auto{height:auto}.max-h-72{max-height:calc(var(--spacing)*72)}.max-h-\[90vh\]{max-height:90vh}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-14{width:calc(var(--spacing)*14)}.w-16{width:calc(var(--spacing)*16)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\[220px\]{max-width:220px}.max-w-xs{max-width:var(--container-xs)}.min-w-\[200px\]{min-width:200px}.flex-1{flex:1}.-translate-y-1\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;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-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.space-y-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}}.space-y-5{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*5*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*5*var(--tw-space-y-reverse))}}.space-y-6{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*6*var(--tw-space-y-reverse))}}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-3{border-style:var(--tw-border-style);border-width:3px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-border{border-color:var(--color-border)}.border-destructive\/50{border-color:color-mix(in srgb,oklch(.6 .2 25) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-destructive) 50%,transparent)}}.border-foreground{border-color:var(--color-foreground)}.border-input{border-color:var(--color-input)}.border-transparent{border-color:transparent}.bg-background{background-color:var(--color-background)}.bg-black\/50{background-color:color-mix(in srgb,#000 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-foreground{background-color:var(--color-foreground)}.bg-foreground\/5{background-color:color-mix(in srgb,oklch(.09 0 0) 5%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-foreground) 5%,transparent)}}.bg-foreground\/10{background-color:color-mix(in srgb,oklch(.09 0 0) 10%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-foreground) 10%,transparent)}}.bg-muted{background-color:var(--color-muted)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-4{padding-top:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.text-center{text-align:center}.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-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.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)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-background{color:var(--color-background)}.text-current{color:currentcolor}.text-destructive{color:var(--color-destructive)}.text-muted-foreground{color:var(--color-muted-foreground)}.uppercase{text-transform:uppercase}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,rgba(0,0,0,.25))}.shadow-2xl,.shadow-lg{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,rgba(0,0,0,.1)),0 4px 6px -4px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,rgba(0,0,0,.1)),0 8px 10px -6px var(--tw-shadow-color,rgba(0,0,0,.1))}.ring,.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-foreground{--tw-ring-color:var(--color-foreground)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.blur{--tw-blur:blur(8px);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,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm))}.backdrop-blur-sm,.backdrop-filter{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-duration:var(--tw-duration,var(--default-transition-duration));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,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));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))}.duration-200{--tw-duration:200ms;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.placeholder\:text-muted-foreground{&::-moz-placeholder{color:var(--color-muted-foreground)}&::placeholder{color:var(--color-muted-foreground)}}.hover\:scale-110{&:hover{@media (hover:hover){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:border-foreground\/50{&:hover{@media (hover:hover){border-bottom-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);border-left-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);border-right-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);border-top-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-foreground) 50%,transparent)}}}}.hover\:bg-destructive\/10{&:hover{@media (hover:hover){background-color:color-mix(in srgb,oklch(.6 .2 25) 10%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-destructive) 10%,transparent)}}}}.hover\:bg-foreground\/90{&:hover{@media (hover:hover){background-color:color-mix(in srgb,oklch(.09 0 0) 90%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-foreground) 90%,transparent)}}}}.hover\:bg-muted{&:hover{@media (hover:hover){background-color:var(--color-muted)}}}.focus\:border-transparent{&:focus{border-color:transparent}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-ring{&:focus{--tw-ring-color:var(--color-ring)}}.focus\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.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)}}.disabled\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\:opacity-50{&:disabled{opacity:50%}}}@layer base{#demo-root div,button,input,select,textarea{color:var(--color-foreground)}}[data-theme=dark]{--color-background:oklch(0.09 0 0);--color-foreground:oklch(0.98 0 0);--color-card:oklch(0.09 0 0);--color-card-foreground:oklch(0.98 0 0);--color-popover:oklch(0.09 0 0);--color-popover-foreground:oklch(0.98 0 0);--color-primary:oklch(0.98 0 0);--color-primary-foreground:oklch(0.1 0 0);--color-secondary:oklch(0.16 0 0);--color-secondary-foreground:oklch(0.98 0 0);--color-muted:oklch(0.16 0 0);--color-muted-foreground:oklch(0.64 0 0);--color-accent:oklch(0.16 0 0);--color-accent-foreground:oklch(0.98 0 0);--color-destructive:oklch(0.3 0.2 25);--color-destructive-foreground:oklch(0.98 0 0);--color-border:oklch(0.16 0 0);--color-input:oklch(0.16 0 0);--color-ring:oklch(0.83 0 0)}.uxbert-canvas-overlay{cursor:crosshair;display:none;height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:var(--uxbert-z-canvas)}.uxbert-canvas-overlay.active{display:block;pointer-events:auto}.uxbert-canvas-overlay.viewport-mode{position:fixed}.uxbert-text-input{background:var(--color-background);border:2px solid var(--color-primary);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.2);color:var(--color-foreground);font-family:Arial,sans-serif;font-size:16px;padding:8px 12px;position:fixed;z-index:calc(var(--uxbert-z-canvas) + 1)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@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-y-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-tracking{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-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-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(1turn)}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--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-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking: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-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-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}}}
|
|
1
|
+
/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--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-black:#000;--spacing:0.25rem;--container-xs:20rem;--container-2xl:42rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-xl:1.25rem;--text-xl--line-height:1.4;--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:0.025em;--radius-md:0.375rem;--radius-lg:0.5rem;--ease-in-out:cubic-bezier(0.4,0,0.2,1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:0.5rem;--color-border:oklch(0.9 0 0);--color-input:oklch(0.9 0 0);--color-ring:oklch(0.1 0 0);--color-background:oklch(1 0 0);--color-foreground:oklch(0.09 0 0);--color-primary:oklch(0.1 0 0);--color-muted:oklch(0.96 0 0);--color-muted-foreground:oklch(0.45 0 0);--color-destructive:oklch(0.6 0.2 25);--uxbert-z-canvas:999997;--uxbert-z-button:999998;--uxbert-z-toolbar:999999;--uxbert-z-modal:1000000}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;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-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}: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}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){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,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-6{top:calc(var(--spacing)*6)}.right-6{right:calc(var(--spacing)*6)}.bottom-6{bottom:calc(var(--spacing)*6)}.left-6{left:calc(var(--spacing)*6)}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.mx-auto{margin-inline:auto}.mt-3{margin-top:calc(var(--spacing)*3)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.block{display:block}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-14{height:calc(var(--spacing)*14)}.h-16{height:calc(var(--spacing)*16)}.h-auto{height:auto}.max-h-72{max-height:calc(var(--spacing)*72)}.max-h-\[90vh\]{max-height:90vh}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-14{width:calc(var(--spacing)*14)}.w-16{width:calc(var(--spacing)*16)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\[220px\]{max-width:220px}.max-w-xs{max-width:var(--container-xs)}.min-w-\[200px\]{min-width:200px}.flex-1{flex:1}.-translate-y-1\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;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-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.space-y-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}}.space-y-5{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*5*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*5*var(--tw-space-y-reverse))}}.space-y-6{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*6*var(--tw-space-y-reverse))}}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-3{border-style:var(--tw-border-style);border-width:3px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-border{border-color:var(--color-border)}.border-destructive\/50{border-color:color-mix(in srgb,oklch(.6 .2 25) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-destructive) 50%,transparent)}}.border-foreground{border-color:var(--color-foreground)}.border-input{border-color:var(--color-input)}.border-transparent{border-color:transparent}.bg-background{background-color:var(--color-background)}.bg-black\/50{background-color:color-mix(in srgb,#000 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-foreground{background-color:var(--color-foreground)}.bg-foreground\/5{background-color:color-mix(in srgb,oklch(.09 0 0) 5%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-foreground) 5%,transparent)}}.bg-foreground\/10{background-color:color-mix(in srgb,oklch(.09 0 0) 10%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-foreground) 10%,transparent)}}.bg-muted{background-color:var(--color-muted)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-4{padding-top:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.text-center{text-align:center}.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-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.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)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-background{color:var(--color-background)}.text-current{color:currentcolor}.text-destructive{color:var(--color-destructive)}.text-muted-foreground{color:var(--color-muted-foreground)}.uppercase{text-transform:uppercase}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,rgba(0,0,0,.25))}.shadow-2xl,.shadow-lg{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,rgba(0,0,0,.1)),0 4px 6px -4px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,rgba(0,0,0,.1)),0 8px 10px -6px var(--tw-shadow-color,rgba(0,0,0,.1))}.ring,.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-foreground{--tw-ring-color:var(--color-foreground)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.blur{--tw-blur:blur(8px);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,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm))}.backdrop-blur-sm,.backdrop-filter{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-duration:var(--tw-duration,var(--default-transition-duration));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,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));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))}.duration-200{--tw-duration:200ms;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.placeholder\:text-muted-foreground{&::-moz-placeholder{color:var(--color-muted-foreground)}&::placeholder{color:var(--color-muted-foreground)}}.hover\:scale-110{&:hover{@media (hover:hover){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}.hover\:border-foreground\/50{&:hover{@media (hover:hover){border-bottom-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);border-left-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);border-right-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);border-top-color:color-mix(in srgb,oklch(.09 0 0) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-foreground) 50%,transparent)}}}}.hover\:bg-destructive\/10{&:hover{@media (hover:hover){background-color:color-mix(in srgb,oklch(.6 .2 25) 10%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-destructive) 10%,transparent)}}}}.hover\:bg-foreground\/90{&:hover{@media (hover:hover){background-color:color-mix(in srgb,oklch(.09 0 0) 90%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-foreground) 90%,transparent)}}}}.hover\:bg-muted{&:hover{@media (hover:hover){background-color:var(--color-muted)}}}.focus\:border-transparent{&:focus{border-color:transparent}}.focus\:ring-2{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-ring{&:focus{--tw-ring-color:var(--color-ring)}}.focus\:ring-offset-2{&:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.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)}}.disabled\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\:opacity-50{&:disabled{opacity:50%}}}@layer base{#demo-root div,button,input,select,textarea{color:var(--color-foreground)}}[data-theme=dark]{--color-background:oklch(0.09 0 0);--color-foreground:oklch(0.98 0 0);--color-card:oklch(0.09 0 0);--color-card-foreground:oklch(0.98 0 0);--color-popover:oklch(0.09 0 0);--color-popover-foreground:oklch(0.98 0 0);--color-primary:oklch(0.98 0 0);--color-primary-foreground:oklch(0.1 0 0);--color-secondary:oklch(0.16 0 0);--color-secondary-foreground:oklch(0.98 0 0);--color-muted:oklch(0.16 0 0);--color-muted-foreground:oklch(0.64 0 0);--color-accent:oklch(0.16 0 0);--color-accent-foreground:oklch(0.98 0 0);--color-destructive:oklch(0.3 0.2 25);--color-destructive-foreground:oklch(0.98 0 0);--color-border:oklch(0.16 0 0);--color-input:oklch(0.16 0 0);--color-ring:oklch(0.83 0 0)}.uxbert-canvas-overlay{cursor:crosshair;display:none;left:0;pointer-events:none;position:absolute;top:0;z-index:var(--uxbert-z-canvas)}.uxbert-canvas-overlay.active{display:block;pointer-events:auto}.uxbert-canvas-overlay.viewport-mode{height:100vh!important;position:fixed;width:100vw!important}.uxbert-text-input{background:var(--color-background);border:2px solid var(--color-primary);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.2);color:var(--color-foreground);font-family:Arial,sans-serif;font-size:16px;padding:8px 12px;position:absolute;z-index:calc(var(--uxbert-z-canvas) + 1)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@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-y-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-tracking{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-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-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(1turn)}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--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-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking: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-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-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}}}
|
package/dist/index.esm.js
CHANGED
|
@@ -9493,6 +9493,11 @@ class Screenshot {
|
|
|
9493
9493
|
}
|
|
9494
9494
|
}
|
|
9495
9495
|
|
|
9496
|
+
var screenshot = /*#__PURE__*/Object.freeze({
|
|
9497
|
+
__proto__: null,
|
|
9498
|
+
default: Screenshot
|
|
9499
|
+
});
|
|
9500
|
+
|
|
9496
9501
|
const initialState = {
|
|
9497
9502
|
isOpen: false,
|
|
9498
9503
|
isAnnotating: false,
|
|
@@ -13103,7 +13108,7 @@ function FloatingButton({
|
|
|
13103
13108
|
}) {
|
|
13104
13109
|
const {
|
|
13105
13110
|
state,
|
|
13106
|
-
|
|
13111
|
+
startAnnotation
|
|
13107
13112
|
} = useReportly();
|
|
13108
13113
|
const {
|
|
13109
13114
|
config
|
|
@@ -13122,7 +13127,7 @@ function FloatingButton({
|
|
|
13122
13127
|
style: {
|
|
13123
13128
|
zIndex: "var(--uxbert-z-button)"
|
|
13124
13129
|
},
|
|
13125
|
-
onClick:
|
|
13130
|
+
onClick: startAnnotation,
|
|
13126
13131
|
title: "Report an issue",
|
|
13127
13132
|
"aria-label": "Report an issue"
|
|
13128
13133
|
}, /*#__PURE__*/React.createElement(Bug, {
|
|
@@ -13159,7 +13164,8 @@ function IssueModal({
|
|
|
13159
13164
|
retakeScreenshot,
|
|
13160
13165
|
startAnnotation,
|
|
13161
13166
|
submitIssue,
|
|
13162
|
-
submitToN8n
|
|
13167
|
+
submitToN8n,
|
|
13168
|
+
reset
|
|
13163
13169
|
} = useReportly();
|
|
13164
13170
|
const [formData, setFormData] = useState({
|
|
13165
13171
|
title: "",
|
|
@@ -13176,6 +13182,27 @@ function IssueModal({
|
|
|
13176
13182
|
[field]: value
|
|
13177
13183
|
}));
|
|
13178
13184
|
}, []);
|
|
13185
|
+
const handleClose = useCallback(() => {
|
|
13186
|
+
// Check if there's any data that would be lost
|
|
13187
|
+
const hasData = state.screenshot !== null || formData.title.trim() !== "" || formData.description.trim() !== "";
|
|
13188
|
+
if (hasData) {
|
|
13189
|
+
const confirmed = window.confirm("Are you sure you want to close? All unsaved data (screenshot, title, description) will be lost.");
|
|
13190
|
+
if (confirmed) {
|
|
13191
|
+
// Clear all data
|
|
13192
|
+
reset();
|
|
13193
|
+
setFormData({
|
|
13194
|
+
title: "",
|
|
13195
|
+
description: "",
|
|
13196
|
+
priority: "Medium",
|
|
13197
|
+
deviceType: "desktop"
|
|
13198
|
+
});
|
|
13199
|
+
closeModal();
|
|
13200
|
+
}
|
|
13201
|
+
} else {
|
|
13202
|
+
// No data to lose, just close
|
|
13203
|
+
closeModal();
|
|
13204
|
+
}
|
|
13205
|
+
}, [state.screenshot, formData.title, formData.description, reset, closeModal]);
|
|
13179
13206
|
const handleCapture = useCallback(async () => {
|
|
13180
13207
|
try {
|
|
13181
13208
|
await captureScreenshot(captureMode);
|
|
@@ -13205,6 +13232,7 @@ function IssueModal({
|
|
|
13205
13232
|
try {
|
|
13206
13233
|
setIsSubmitting(true);
|
|
13207
13234
|
submitIssue(formData);
|
|
13235
|
+
// Form data is cleared by the submitIssue function which calls reset()
|
|
13208
13236
|
setFormData({
|
|
13209
13237
|
title: "",
|
|
13210
13238
|
description: "",
|
|
@@ -13274,7 +13302,7 @@ function IssueModal({
|
|
|
13274
13302
|
})), /*#__PURE__*/React.createElement("h2", {
|
|
13275
13303
|
className: "text-xl font-semibold"
|
|
13276
13304
|
}, "Report Issue")), /*#__PURE__*/React.createElement("button", {
|
|
13277
|
-
onClick:
|
|
13305
|
+
onClick: handleClose,
|
|
13278
13306
|
className: "p-2 rounded-md hover:bg-muted transition-colors cursor-pointer",
|
|
13279
13307
|
"aria-label": "Close"
|
|
13280
13308
|
}, /*#__PURE__*/React.createElement(X, {
|
|
@@ -13639,12 +13667,20 @@ class AnnotationManager {
|
|
|
13639
13667
|
this.currentPath = [];
|
|
13640
13668
|
this.textInput = null;
|
|
13641
13669
|
this.currentTextAnnotation = null;
|
|
13670
|
+
this.drawingBounds = null;
|
|
13671
|
+
this.currentMode = 'fullpage';
|
|
13672
|
+
this.scrollListener = null;
|
|
13673
|
+
this.initialScrollPosition = null;
|
|
13642
13674
|
}
|
|
13643
13675
|
createCanvas() {
|
|
13676
|
+
// Calculate page dimensions BEFORE creating canvas
|
|
13677
|
+
const fullPageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
|
|
13678
|
+
const fullPageWidth = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
|
|
13679
|
+
// Create canvas with calculated dimensions
|
|
13644
13680
|
this.canvas = document.createElement('canvas');
|
|
13645
13681
|
this.canvas.className = 'uxbert-canvas-overlay';
|
|
13646
|
-
|
|
13647
|
-
this.
|
|
13682
|
+
this.canvas.width = fullPageWidth;
|
|
13683
|
+
this.canvas.height = fullPageHeight;
|
|
13648
13684
|
this.ctx = this.canvas.getContext('2d');
|
|
13649
13685
|
if (this.ctx) {
|
|
13650
13686
|
// Set canvas styles
|
|
@@ -13664,6 +13700,8 @@ class AnnotationManager {
|
|
|
13664
13700
|
className: this.canvas.className,
|
|
13665
13701
|
width: this.canvas.width,
|
|
13666
13702
|
height: this.canvas.height,
|
|
13703
|
+
fullPageHeight: fullPageHeight,
|
|
13704
|
+
fullPageWidth: fullPageWidth,
|
|
13667
13705
|
inDOM: document.body.contains(this.canvas)
|
|
13668
13706
|
});
|
|
13669
13707
|
return this.canvas;
|
|
@@ -13682,8 +13720,80 @@ class AnnotationManager {
|
|
|
13682
13720
|
this.canvas.height = fullPageHeight;
|
|
13683
13721
|
}
|
|
13684
13722
|
}
|
|
13723
|
+
updateDrawingBounds(x, y) {
|
|
13724
|
+
if (!this.drawingBounds) {
|
|
13725
|
+
this.drawingBounds = {
|
|
13726
|
+
minX: x,
|
|
13727
|
+
minY: y,
|
|
13728
|
+
maxX: x,
|
|
13729
|
+
maxY: y
|
|
13730
|
+
};
|
|
13731
|
+
} else {
|
|
13732
|
+
this.drawingBounds.minX = Math.min(this.drawingBounds.minX, x);
|
|
13733
|
+
this.drawingBounds.minY = Math.min(this.drawingBounds.minY, y);
|
|
13734
|
+
this.drawingBounds.maxX = Math.max(this.drawingBounds.maxX, x);
|
|
13735
|
+
this.drawingBounds.maxY = Math.max(this.drawingBounds.maxY, y);
|
|
13736
|
+
}
|
|
13737
|
+
}
|
|
13738
|
+
checkAndAdjustCanvasMode() {
|
|
13739
|
+
if (!this.drawingBounds || !this.canvas) return;
|
|
13740
|
+
// Get current viewport bounds (accounting for scroll position)
|
|
13741
|
+
const viewportBounds = {
|
|
13742
|
+
minX: window.scrollX,
|
|
13743
|
+
minY: window.scrollY,
|
|
13744
|
+
maxX: window.scrollX + window.innerWidth,
|
|
13745
|
+
maxY: window.scrollY + window.innerHeight
|
|
13746
|
+
};
|
|
13747
|
+
// Check if all drawings are within viewport
|
|
13748
|
+
const isWithinViewport = this.drawingBounds.minX >= viewportBounds.minX && this.drawingBounds.maxX <= viewportBounds.maxX && this.drawingBounds.minY >= viewportBounds.minY && this.drawingBounds.maxY <= viewportBounds.maxY;
|
|
13749
|
+
// If currently in fullpage mode and drawings are within viewport, switch to viewport mode
|
|
13750
|
+
if (this.currentMode === 'fullpage' && isWithinViewport && this.annotations.length > 0) {
|
|
13751
|
+
console.log('🔄 Switching to viewport mode - all drawings within viewport', {
|
|
13752
|
+
drawingBounds: this.drawingBounds,
|
|
13753
|
+
viewportBounds
|
|
13754
|
+
});
|
|
13755
|
+
this.currentMode = 'viewport';
|
|
13756
|
+
this.updateCanvasSize('viewport');
|
|
13757
|
+
this.canvas.classList.add('viewport-mode');
|
|
13758
|
+
// Reset context properties after resize
|
|
13759
|
+
if (this.ctx) {
|
|
13760
|
+
this.ctx.lineCap = 'round';
|
|
13761
|
+
this.ctx.lineJoin = 'round';
|
|
13762
|
+
}
|
|
13763
|
+
this.redraw();
|
|
13764
|
+
}
|
|
13765
|
+
// If currently in viewport mode but drawings extend beyond, switch to fullpage mode
|
|
13766
|
+
else if (this.currentMode === 'viewport' && !isWithinViewport) {
|
|
13767
|
+
console.log('🔄 Switching to fullpage mode - drawings extend beyond viewport', {
|
|
13768
|
+
drawingBounds: this.drawingBounds,
|
|
13769
|
+
viewportBounds
|
|
13770
|
+
});
|
|
13771
|
+
this.currentMode = 'fullpage';
|
|
13772
|
+
this.updateCanvasSize('fullpage');
|
|
13773
|
+
this.canvas.classList.remove('viewport-mode');
|
|
13774
|
+
// Reset context properties after resize
|
|
13775
|
+
if (this.ctx) {
|
|
13776
|
+
this.ctx.lineCap = 'round';
|
|
13777
|
+
this.ctx.lineJoin = 'round';
|
|
13778
|
+
}
|
|
13779
|
+
this.redraw();
|
|
13780
|
+
}
|
|
13781
|
+
}
|
|
13685
13782
|
show(mode = 'fullpage') {
|
|
13686
13783
|
if (this.canvas && this.ctx) {
|
|
13784
|
+
// Set the current mode and reset drawing bounds for new annotation session
|
|
13785
|
+
this.currentMode = mode;
|
|
13786
|
+
this.drawingBounds = null;
|
|
13787
|
+
// Store initial scroll position
|
|
13788
|
+
this.initialScrollPosition = {
|
|
13789
|
+
x: window.scrollX,
|
|
13790
|
+
y: window.scrollY
|
|
13791
|
+
};
|
|
13792
|
+
// Add scroll listener to detect scrolling
|
|
13793
|
+
this.scrollListener = this.handleScroll.bind(this);
|
|
13794
|
+
window.addEventListener('scroll', this.scrollListener, {
|
|
13795
|
+
passive: true
|
|
13796
|
+
});
|
|
13687
13797
|
// Update canvas size to match current page dimensions
|
|
13688
13798
|
this.updateCanvasSize(mode);
|
|
13689
13799
|
// Reset context properties after resize
|
|
@@ -13710,11 +13820,51 @@ class AnnotationManager {
|
|
|
13710
13820
|
this.redraw();
|
|
13711
13821
|
}
|
|
13712
13822
|
}
|
|
13823
|
+
handleScroll() {
|
|
13824
|
+
if (!this.initialScrollPosition) return;
|
|
13825
|
+
// Check if user has scrolled significantly (more than 10 pixels)
|
|
13826
|
+
const scrollThreshold = 10;
|
|
13827
|
+
const scrollDeltaX = Math.abs(window.scrollX - this.initialScrollPosition.x);
|
|
13828
|
+
const scrollDeltaY = Math.abs(window.scrollY - this.initialScrollPosition.y);
|
|
13829
|
+
if (scrollDeltaX > scrollThreshold || scrollDeltaY > scrollThreshold) {
|
|
13830
|
+
// User scrolled - switch to fullpage mode if not already
|
|
13831
|
+
if (this.currentMode === 'viewport') {
|
|
13832
|
+
console.log('📜 User scrolled - switching to fullpage mode', {
|
|
13833
|
+
scrollDelta: {
|
|
13834
|
+
x: scrollDeltaX,
|
|
13835
|
+
y: scrollDeltaY
|
|
13836
|
+
},
|
|
13837
|
+
initialScroll: this.initialScrollPosition,
|
|
13838
|
+
currentScroll: {
|
|
13839
|
+
x: window.scrollX,
|
|
13840
|
+
y: window.scrollY
|
|
13841
|
+
}
|
|
13842
|
+
});
|
|
13843
|
+
this.currentMode = 'fullpage';
|
|
13844
|
+
this.updateCanvasSize('fullpage');
|
|
13845
|
+
if (this.canvas) {
|
|
13846
|
+
this.canvas.classList.remove('viewport-mode');
|
|
13847
|
+
}
|
|
13848
|
+
// Reset context properties after resize
|
|
13849
|
+
if (this.ctx) {
|
|
13850
|
+
this.ctx.lineCap = 'round';
|
|
13851
|
+
this.ctx.lineJoin = 'round';
|
|
13852
|
+
}
|
|
13853
|
+
this.redraw();
|
|
13854
|
+
}
|
|
13855
|
+
}
|
|
13856
|
+
}
|
|
13713
13857
|
hide() {
|
|
13714
13858
|
if (this.canvas) {
|
|
13715
13859
|
this.canvas.classList.remove('active');
|
|
13716
13860
|
this.canvas.classList.remove('viewport-mode');
|
|
13717
13861
|
}
|
|
13862
|
+
// Remove scroll listener
|
|
13863
|
+
if (this.scrollListener) {
|
|
13864
|
+
window.removeEventListener('scroll', this.scrollListener);
|
|
13865
|
+
this.scrollListener = null;
|
|
13866
|
+
}
|
|
13867
|
+
this.initialScrollPosition = null;
|
|
13718
13868
|
// Clean up any active text input
|
|
13719
13869
|
this.removeTextInput();
|
|
13720
13870
|
this.currentTextAnnotation = null;
|
|
@@ -13727,12 +13877,16 @@ class AnnotationManager {
|
|
|
13727
13877
|
}
|
|
13728
13878
|
handleMouseDown(e) {
|
|
13729
13879
|
const isViewportMode = this.canvas?.classList.contains('viewport-mode');
|
|
13880
|
+
// For fullpage mode (absolute positioning), we need to add scroll offset
|
|
13881
|
+
// For viewport mode (fixed positioning), we don't need scroll offset
|
|
13730
13882
|
const scrollOffsetX = isViewportMode ? 0 : window.scrollX;
|
|
13731
13883
|
const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
|
|
13732
13884
|
// Handle text tool separately
|
|
13733
13885
|
if (this.currentTool === 'text') {
|
|
13734
13886
|
const x = e.clientX + scrollOffsetX;
|
|
13735
13887
|
const y = e.clientY + scrollOffsetY;
|
|
13888
|
+
// Update drawing bounds for text
|
|
13889
|
+
this.updateDrawingBounds(x, y);
|
|
13736
13890
|
// Check if clicking on existing text to edit
|
|
13737
13891
|
const clickedText = this.getTextAnnotationAt(x, y);
|
|
13738
13892
|
if (clickedText) {
|
|
@@ -13750,6 +13904,8 @@ class AnnotationManager {
|
|
|
13750
13904
|
x: this.startX,
|
|
13751
13905
|
y: this.startY
|
|
13752
13906
|
}];
|
|
13907
|
+
// Update drawing bounds with start position
|
|
13908
|
+
this.updateDrawingBounds(this.startX, this.startY);
|
|
13753
13909
|
}
|
|
13754
13910
|
handleMouseMove(e) {
|
|
13755
13911
|
if (!this.isDrawing || !this.ctx) return;
|
|
@@ -13758,6 +13914,8 @@ class AnnotationManager {
|
|
|
13758
13914
|
const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
|
|
13759
13915
|
const x = e.clientX + scrollOffsetX;
|
|
13760
13916
|
const y = e.clientY + scrollOffsetY;
|
|
13917
|
+
// Update drawing bounds with current position
|
|
13918
|
+
this.updateDrawingBounds(x, y);
|
|
13761
13919
|
if (this.currentTool === 'pen') {
|
|
13762
13920
|
this.currentPath.push({
|
|
13763
13921
|
x,
|
|
@@ -13782,6 +13940,8 @@ class AnnotationManager {
|
|
|
13782
13940
|
const scrollOffsetY = isViewportMode ? 0 : window.scrollY;
|
|
13783
13941
|
const x = e.clientX + scrollOffsetX;
|
|
13784
13942
|
const y = e.clientY + scrollOffsetY;
|
|
13943
|
+
// Update drawing bounds with final position
|
|
13944
|
+
this.updateDrawingBounds(x, y);
|
|
13785
13945
|
// Save the annotation
|
|
13786
13946
|
if (this.currentTool === 'pen') {
|
|
13787
13947
|
this.annotations.push({
|
|
@@ -13809,6 +13969,8 @@ class AnnotationManager {
|
|
|
13809
13969
|
color: this.currentColor
|
|
13810
13970
|
});
|
|
13811
13971
|
}
|
|
13972
|
+
// Check if we need to adjust canvas mode based on drawing location
|
|
13973
|
+
this.checkAndAdjustCanvasMode();
|
|
13812
13974
|
this.redraw();
|
|
13813
13975
|
}
|
|
13814
13976
|
handleTouchStart(e) {
|
|
@@ -13879,8 +14041,7 @@ class AnnotationManager {
|
|
|
13879
14041
|
this.textInput = document.createElement('input');
|
|
13880
14042
|
this.textInput.type = 'text';
|
|
13881
14043
|
this.textInput.className = 'uxbert-text-input';
|
|
13882
|
-
|
|
13883
|
-
// Position relative to the document, accounting for scroll
|
|
14044
|
+
// Position relative to the document (absolute positioning)
|
|
13884
14045
|
this.textInput.style.left = `${x}px`;
|
|
13885
14046
|
this.textInput.style.top = `${y}px`;
|
|
13886
14047
|
this.textInput.style.transform = 'translate(0, 0)';
|
|
@@ -13944,6 +14105,8 @@ class AnnotationManager {
|
|
|
13944
14105
|
if (text) {
|
|
13945
14106
|
this.currentTextAnnotation.text = text;
|
|
13946
14107
|
this.annotations.push(this.currentTextAnnotation);
|
|
14108
|
+
// Check if we need to adjust canvas mode based on drawing location
|
|
14109
|
+
this.checkAndAdjustCanvasMode();
|
|
13947
14110
|
this.redraw();
|
|
13948
14111
|
}
|
|
13949
14112
|
}
|
|
@@ -14024,9 +14187,13 @@ class AnnotationManager {
|
|
|
14024
14187
|
}
|
|
14025
14188
|
clear() {
|
|
14026
14189
|
this.annotations = [];
|
|
14190
|
+
this.drawingBounds = null;
|
|
14027
14191
|
this.redraw();
|
|
14028
14192
|
}
|
|
14029
|
-
|
|
14193
|
+
getCurrentMode() {
|
|
14194
|
+
return this.currentMode;
|
|
14195
|
+
}
|
|
14196
|
+
async exportAnnotatedScreenshot(baseScreenshot, mode) {
|
|
14030
14197
|
// Create a temporary canvas to combine screenshot + annotations
|
|
14031
14198
|
const tempCanvas = document.createElement('canvas');
|
|
14032
14199
|
const img = new Image();
|
|
@@ -14040,8 +14207,29 @@ class AnnotationManager {
|
|
|
14040
14207
|
if (tempCtx && this.canvas) {
|
|
14041
14208
|
// Draw the base screenshot
|
|
14042
14209
|
tempCtx.drawImage(img, 0, 0);
|
|
14043
|
-
//
|
|
14044
|
-
|
|
14210
|
+
// If mode is specified and different from current canvas mode, we need to adjust
|
|
14211
|
+
const isCanvasInViewportMode = this.canvas.classList.contains('viewport-mode');
|
|
14212
|
+
const isTargetFullpage = mode === 'fullpage';
|
|
14213
|
+
if (isCanvasInViewportMode && isTargetFullpage) {
|
|
14214
|
+
// User drew in viewport mode, but we're capturing fullpage
|
|
14215
|
+
// Need to offset annotations by current scroll position
|
|
14216
|
+
const scrollOffsetX = window.scrollX;
|
|
14217
|
+
const scrollOffsetY = window.scrollY;
|
|
14218
|
+
// Create a temporary canvas for adjusted annotations
|
|
14219
|
+
const adjustedCanvas = document.createElement('canvas');
|
|
14220
|
+
adjustedCanvas.width = tempCanvas.width;
|
|
14221
|
+
adjustedCanvas.height = tempCanvas.height;
|
|
14222
|
+
const adjustedCtx = adjustedCanvas.getContext('2d');
|
|
14223
|
+
if (adjustedCtx) {
|
|
14224
|
+
// Draw annotations with scroll offset
|
|
14225
|
+
adjustedCtx.drawImage(this.canvas, scrollOffsetX, scrollOffsetY);
|
|
14226
|
+
// Draw the adjusted annotations on top of screenshot
|
|
14227
|
+
tempCtx.drawImage(adjustedCanvas, 0, 0);
|
|
14228
|
+
}
|
|
14229
|
+
} else {
|
|
14230
|
+
// Draw annotations directly on top
|
|
14231
|
+
tempCtx.drawImage(this.canvas, 0, 0);
|
|
14232
|
+
}
|
|
14045
14233
|
resolve(tempCanvas.toDataURL('image/png'));
|
|
14046
14234
|
}
|
|
14047
14235
|
};
|
|
@@ -14087,14 +14275,15 @@ function ReportlyInner() {
|
|
|
14087
14275
|
useEffect(() => {
|
|
14088
14276
|
if (annotationRef.current) {
|
|
14089
14277
|
if (state.isAnnotating) {
|
|
14090
|
-
|
|
14091
|
-
|
|
14278
|
+
// Start in fullpage mode - it will auto-switch to viewport if drawings stay within viewport
|
|
14279
|
+
console.log('Showing canvas in fullpage mode (will auto-adjust based on drawing location)');
|
|
14280
|
+
annotationRef.current.show('fullpage');
|
|
14092
14281
|
} else {
|
|
14093
14282
|
console.log('Hiding canvas');
|
|
14094
14283
|
annotationRef.current.hide();
|
|
14095
14284
|
}
|
|
14096
14285
|
}
|
|
14097
|
-
}, [state.isAnnotating
|
|
14286
|
+
}, [state.isAnnotating]);
|
|
14098
14287
|
const handleUndo = () => {
|
|
14099
14288
|
annotationRef.current?.undo();
|
|
14100
14289
|
};
|
|
@@ -14102,14 +14291,31 @@ function ReportlyInner() {
|
|
|
14102
14291
|
annotationRef.current?.clear();
|
|
14103
14292
|
};
|
|
14104
14293
|
const handleDone = async () => {
|
|
14105
|
-
if (!annotationRef.current
|
|
14294
|
+
if (!annotationRef.current) return;
|
|
14106
14295
|
try {
|
|
14107
|
-
const
|
|
14296
|
+
const Screenshot = (await Promise.resolve().then(function () { return screenshot; })).default;
|
|
14297
|
+
// Use the current mode from annotation manager (it has auto-adjusted based on drawing location)
|
|
14298
|
+
const captureMode = annotationRef.current.getCurrentMode();
|
|
14299
|
+
console.log('Using capture mode from annotation manager:', captureMode);
|
|
14300
|
+
// Hide the annotation canvas temporarily
|
|
14301
|
+
annotationRef.current.hide();
|
|
14302
|
+
// Capture the screenshot
|
|
14303
|
+
const screenshotService = new Screenshot();
|
|
14304
|
+
const baseScreenshot = await screenshotService.capture(captureMode);
|
|
14305
|
+
// Export the annotated screenshot (combine base screenshot + annotations)
|
|
14306
|
+
// Pass the capture mode so annotations can be positioned correctly
|
|
14307
|
+
const annotatedScreenshot = await annotationRef.current.exportAnnotatedScreenshot(baseScreenshot, captureMode);
|
|
14308
|
+
// Update the screenshot in state
|
|
14108
14309
|
updateScreenshot(annotatedScreenshot);
|
|
14310
|
+
// End annotation mode and show the modal
|
|
14109
14311
|
endAnnotation();
|
|
14110
14312
|
} catch (error) {
|
|
14111
14313
|
console.error('Failed to finish annotation:', error);
|
|
14112
|
-
alert('Failed to
|
|
14314
|
+
alert('Failed to capture screenshot. Please try again.');
|
|
14315
|
+
// Show canvas again in case of error
|
|
14316
|
+
if (annotationRef.current) {
|
|
14317
|
+
annotationRef.current.show('fullpage'); // Default back to fullpage mode on error
|
|
14318
|
+
}
|
|
14113
14319
|
}
|
|
14114
14320
|
};
|
|
14115
14321
|
const handleExit = () => {
|