@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/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
- openModal
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: openModal,
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: closeModal,
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
- // Set canvas to full page dimensions
13647
- this.updateCanvasSize();
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
- this.textInput.style.position = 'absolute';
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
- async exportAnnotatedScreenshot(baseScreenshot) {
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
- // Draw annotations on top
14044
- tempCtx.drawImage(this.canvas, 0, 0);
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
- console.log('Showing canvas in mode:', state.captureMode);
14091
- annotationRef.current.show(state.captureMode);
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, state.captureMode]);
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 || !state.screenshot) return;
14294
+ if (!annotationRef.current) return;
14106
14295
  try {
14107
- const annotatedScreenshot = await annotationRef.current.exportAnnotatedScreenshot(state.screenshot);
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 process annotations. Please try again.');
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 = () => {