@shapesos/clay 0.14.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ai-elements.cjs +112 -7
- package/dist/ai-elements.cjs.map +1 -1
- package/dist/ai-elements.d.cts +30 -2
- package/dist/ai-elements.d.ts +30 -2
- package/dist/ai-elements.js +1 -1
- package/dist/blocks.css +1 -1
- package/dist/{chunk-BR5S37SC.js → chunk-4VE6ZXXW.js} +113 -8
- package/dist/chunk-4VE6ZXXW.js.map +1 -0
- package/dist/index.cjs +112 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-BR5S37SC.js.map +0 -1
package/dist/blocks.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-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-outline-style:solid;--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;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:"Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-serif:"Crimson Pro", Georgia, "Times New Roman", serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:#ef4444;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--radius-2xl:1rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-lg:16px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--default-mono-font-family:var(--font-mono);--color-brown-10:#faf9f8;--color-brown-20:#f5f3f0;--color-brown-30:#eeebe5;--color-brown-40:#e6e2da;--color-brown-60:#a19e99;--color-brown-70:#73716d;--color-brown-90:#2e2d2c;--color-brown-100:#171716;--color-background:var(--color-white);--color-foreground:var(--color-brown-100);--color-popover:var(--color-white);--color-muted:var(--color-brown-10);--color-border:var(--color-brown-40)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before{border-color:var(--color-border)}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[var\(--z-popover\,99999\)\]{z-index:var(--z-popover,99999)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.my-1{margin-block:calc(var(--spacing) * 1)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-12{height:calc(var(--spacing) * 12)}.h-\[3px\]{height:3px}.h-auto{height:auto}.h-px{height:1px}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing) * 4)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-32{min-width:calc(var(--spacing) * 32)}.min-w-\[10rem\]{min-width:10rem}.min-w-\[150px\]{min-width:150px}.min-w-\[…\]{min-width:…}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.origin-\[--radix-tooltip-content-transform-origin\]{transform-origin:--radix-tooltip-content-transform-origin}.animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overscroll-none{overscroll-behavior:none}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.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-brown-40)}.border-brown-30{border-color:#eeebe5}.border-brown-40{border-color:#e6e2da}.border-brown-alpha-12{border-color:#1717161f}.border-b-brown-30{border-bottom-color:#eeebe5}.bg-\[…\]{background-color:…}.bg-background{background-color:var(--color-white)}.bg-background\/70{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.bg-background\/70{background-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-brown-10{background-color:#faf9f8}.bg-brown-30{background-color:#eeebe5}.bg-brown-100{background-color:#171716}.bg-muted{background-color:var(--color-brown-10)}.bg-muted-foreground\/20{background-color:#73716d33}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/20{background-color:color-mix(in oklab, var(--color-brown-70) 20%, transparent)}}.bg-muted\/50{background-color:#faf9f880}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-brown-10) 50%, transparent)}}.bg-popover{background-color:var(--color-white)}.bg-secondary{background-color:var(--color-brown-20)}.bg-white{background-color:#fff}.bg-white-alpha-85{background-color:#ffffffd9}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.align-top{vertical-align:top}.font-sans{font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.font-serif{font-family:Crimson Pro,Georgia,Times New Roman,serif}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-brown-70{color:#73716d}.text-brown-80{color:#5c5a57}.text-brown-90{color:#2e2d2c}.text-brown-100{color:#171716}.text-foreground{color:var(--color-brown-100)}.text-fuchsia-500{color:#d946ef}.text-muted-foreground{color:var(--color-brown-70)}.text-popover-foreground{color:var(--color-brown-100)}.text-red-600{color:#dc2626}.lowercase{text-transform:lowercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.accent-foreground{accent-color:var(--color-brown-100)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + 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)}.shadow-foreground\/5{--tw-shadow-color:#1717160d}@supports (color:color-mix(in lab, red, red)){.shadow-foreground\/5{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-brown-100) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);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,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.fade-in-0{--tw-enter-opacity:0}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.zoom-in-95{--tw-enter-scale:.95}.fade-in{--tw-enter-opacity:0}.running{animation-play-state:running}@media (hover:hover){.hover\:bg-brown-10:hover{background-color:#faf9f8}.hover\:bg-muted\/50:hover{background-color:#faf9f880}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--color-brown-10) 50%, transparent)}}.hover\:bg-secondary:hover{background-color:var(--color-brown-20)}.hover\:bg-transparent:hover{background-color:#0000}}.focus\:bg-accent:focus{background-color:var(--color-brown-20)}.focus\:text-accent-foreground:focus{color:var(--color-brown-90)}.focus-visible\:ring-2:focus-visible{--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-visible\:ring-brown-40:focus-visible{--tw-ring-color:#e6e2da}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--color-brown-10)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--spacing) * 0)}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:10px;--z-popover:99999}.vibe-mouse-grid-layer{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.vibe-mouse-grid{pointer-events:none;background-image:linear-gradient(90deg,#1717160f 1px,#0000 1px),linear-gradient(#1717160f 1px,#0000 1px);position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){.vibe-mouse-grid{background-image:linear-gradient(to right, color-mix(in oklch, var(--color-foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--color-foreground) 6%, transparent) 1px, transparent 1px)}}.vibe-mouse-grid{-webkit-mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);-webkit-mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);-webkit-mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);background-size:36px 36px;transition:opacity .24s ease-out}.vibe-mouse-glow{pointer-events:none;background-image:radial-gradient(circle 480px at var(--vibe-mx,50%) var(--vibe-my,50%), var(--vibe-glow-color,oklch(57.61% .2508 var(--hue,295) / .08)) 0%, transparent 70%);transition:opacity .24s ease-out;position:absolute;inset:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-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-outline-style{syntax:"*";inherits:false;initial-value:solid}@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 pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-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-outline-style:solid;--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;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:"Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-serif:"Crimson Pro", Georgia, "Times New Roman", serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:#ef4444;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--radius-2xl:1rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-lg:16px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--default-mono-font-family:var(--font-mono);--color-brown-10:#faf9f8;--color-brown-20:#f5f3f0;--color-brown-30:#eeebe5;--color-brown-40:#e6e2da;--color-brown-60:#a19e99;--color-brown-70:#73716d;--color-brown-90:#2e2d2c;--color-brown-100:#171716;--color-background:var(--color-white);--color-foreground:var(--color-brown-100);--color-popover:var(--color-white);--color-muted:var(--color-brown-10);--color-border:var(--color-brown-40)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before{border-color:var(--color-border)}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-\[var\(--z-popover\,99999\)\]{z-index:var(--z-popover,99999)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.my-1{margin-block:calc(var(--spacing) * 1)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-12{height:calc(var(--spacing) * 12)}.h-\[3px\]{height:3px}.h-auto{height:auto}.h-px{height:1px}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing) * 4)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-32{min-width:calc(var(--spacing) * 32)}.min-w-\[10rem\]{min-width:10rem}.min-w-\[150px\]{min-width:150px}.min-w-\[…\]{min-width:…}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.origin-\[--radix-tooltip-content-transform-origin\]{transform-origin:--radix-tooltip-content-transform-origin}.animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.animate-pulse{animation:var(--animate-pulse)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overscroll-none{overscroll-behavior:none}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[12px\]{border-radius:12px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.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-brown-40)}.border-brown-30{border-color:#eeebe5}.border-brown-40{border-color:#e6e2da}.border-brown-alpha-12{border-color:#1717161f}.border-b-brown-30{border-bottom-color:#eeebe5}.bg-\[…\]{background-color:…}.bg-background{background-color:var(--color-white)}.bg-background\/70{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.bg-background\/70{background-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-brown-10{background-color:#faf9f8}.bg-brown-30{background-color:#eeebe5}.bg-brown-100{background-color:#171716}.bg-muted{background-color:var(--color-brown-10)}.bg-muted-foreground\/20{background-color:#73716d33}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/20{background-color:color-mix(in oklab, var(--color-brown-70) 20%, transparent)}}.bg-muted\/50{background-color:#faf9f880}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-brown-10) 50%, transparent)}}.bg-popover{background-color:var(--color-white)}.bg-secondary{background-color:var(--color-brown-20)}.bg-white{background-color:#fff}.bg-white-alpha-85{background-color:#ffffffd9}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.align-top{vertical-align:top}.font-sans{font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.font-serif{font-family:Crimson Pro,Georgia,Times New Roman,serif}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-brown-70{color:#73716d}.text-brown-80{color:#5c5a57}.text-brown-90{color:#2e2d2c}.text-brown-100{color:#171716}.text-foreground{color:var(--color-brown-100)}.text-fuchsia-500{color:#d946ef}.text-muted-foreground{color:var(--color-brown-70)}.text-popover-foreground{color:var(--color-brown-100)}.text-red-600{color:#dc2626}.lowercase{text-transform:lowercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.accent-foreground{accent-color:var(--color-brown-100)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + 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)}.shadow-foreground\/5{--tw-shadow-color:#1717160d}@supports (color:color-mix(in lab, red, red)){.shadow-foreground\/5{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-brown-100) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);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,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.fade-in-0{--tw-enter-opacity:0}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.zoom-in-95{--tw-enter-scale:.95}.fade-in{--tw-enter-opacity:0}.running{animation-play-state:running}@media (hover:hover){.hover\:bg-brown-10:hover{background-color:#faf9f8}.hover\:bg-muted\/50:hover{background-color:#faf9f880}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--color-brown-10) 50%, transparent)}}.hover\:bg-secondary:hover{background-color:var(--color-brown-20)}.hover\:bg-transparent:hover{background-color:#0000}}.focus\:bg-accent:focus{background-color:var(--color-brown-20)}.focus\:text-accent-foreground:focus{color:var(--color-brown-90)}.focus-visible\:ring-2:focus-visible{--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-visible\:ring-brown-40:focus-visible{--tw-ring-color:#e6e2da}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--color-brown-10)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--spacing) * 0)}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:10px;--z-popover:99999}.vibe-mouse-grid-layer{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.vibe-mouse-grid{pointer-events:none;background-image:linear-gradient(90deg,#1717160f 1px,#0000 1px),linear-gradient(#1717160f 1px,#0000 1px);position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){.vibe-mouse-grid{background-image:linear-gradient(to right, color-mix(in oklch, var(--color-foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--color-foreground) 6%, transparent) 1px, transparent 1px)}}.vibe-mouse-grid{-webkit-mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);-webkit-mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);-webkit-mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);mask-image:radial-gradient(circle 320px at var(--vibe-mx,50%) var(--vibe-my,50%), #000 0%, #00000080 40%, #0000 100%);background-size:36px 36px;transition:opacity .24s ease-out}.vibe-mouse-glow{left:var(--vibe-mx,50%);top:var(--vibe-my,50%);pointer-events:none;background-color:var(--vibe-glow-color,oklch(57.61% .2508 var(--hue,295) / .08));filter:blur(60px);width:520px;height:520px;transition:background-color var(--vibe-glow-cycle,0s) linear, opacity .24s ease-out;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;margin-top:-260px;margin-left:-260px;animation:9s ease-in-out infinite vibe-blob-morph,26s linear infinite vibe-blob-rotate;position:absolute}@keyframes vibe-blob-morph{0%,to{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}33%{border-radius:67% 33% 47% 53%/58% 62% 38% 42%}66%{border-radius:38% 62% 54% 46%/63% 38% 62% 37%}}@keyframes vibe-blob-rotate{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.vibe-mouse-glow{animation:none}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-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-outline-style{syntax:"*";inherits:false;initial-value:solid}@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 pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}
|
|
@@ -96,43 +96,148 @@ var PromptInputSubmit = ({
|
|
|
96
96
|
|
|
97
97
|
// src/components/ai-elements/mouse-grid/mouse-grid.tsx
|
|
98
98
|
import { useEffect, useRef } from "react";
|
|
99
|
+
|
|
100
|
+
// src/utils/prefers-reduced-motion.ts
|
|
101
|
+
function prefersReducedMotion() {
|
|
102
|
+
return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// src/components/ai-elements/mouse-grid/mouse-grid.tsx
|
|
99
106
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
100
|
-
function MouseGrid({ glowColor } = {}) {
|
|
107
|
+
function MouseGrid({ glowColor, colorCycleMs = 4e3, autoDrift = false } = {}) {
|
|
101
108
|
const layerRef = useRef(null);
|
|
109
|
+
const glowRef = useRef(null);
|
|
102
110
|
useEffect(() => {
|
|
111
|
+
const driftEnabled = autoDrift && !prefersReducedMotion();
|
|
103
112
|
let raf = 0;
|
|
113
|
+
let driftRaf = 0;
|
|
114
|
+
let lastDriftTime = 0;
|
|
104
115
|
let clientX = 0;
|
|
105
116
|
let clientY = 0;
|
|
117
|
+
let pointerInside = false;
|
|
118
|
+
let centerX = 0;
|
|
119
|
+
let centerY = 0;
|
|
120
|
+
let hasCenter = false;
|
|
121
|
+
function setCenter(x, y) {
|
|
122
|
+
const layer = layerRef.current;
|
|
123
|
+
if (!layer) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
centerX = x;
|
|
127
|
+
centerY = y;
|
|
128
|
+
hasCenter = true;
|
|
129
|
+
layer.style.setProperty("--vibe-mx", `${x}px`);
|
|
130
|
+
layer.style.setProperty("--vibe-my", `${y}px`);
|
|
131
|
+
}
|
|
106
132
|
function flush() {
|
|
107
133
|
raf = 0;
|
|
108
134
|
const layer = layerRef.current;
|
|
109
135
|
if (!layer) {
|
|
110
136
|
return;
|
|
111
137
|
}
|
|
138
|
+
if (driftEnabled && !pointerInside) {
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
112
141
|
const rect = layer.getBoundingClientRect();
|
|
113
|
-
|
|
114
|
-
layer.style.setProperty("--vibe-my", `${clientY - rect.top}px`);
|
|
142
|
+
setCenter(clientX - rect.left, clientY - rect.top);
|
|
115
143
|
}
|
|
116
144
|
function onMove(event) {
|
|
117
145
|
clientX = event.clientX;
|
|
118
146
|
clientY = event.clientY;
|
|
147
|
+
const layer = layerRef.current;
|
|
148
|
+
if (layer) {
|
|
149
|
+
const rect = layer.getBoundingClientRect();
|
|
150
|
+
pointerInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
|
|
151
|
+
}
|
|
152
|
+
if (pointerInside) {
|
|
153
|
+
stopDrift();
|
|
154
|
+
} else {
|
|
155
|
+
startDrift();
|
|
156
|
+
}
|
|
119
157
|
if (raf) {
|
|
120
158
|
return;
|
|
121
159
|
}
|
|
122
160
|
raf = requestAnimationFrame(flush);
|
|
123
161
|
}
|
|
162
|
+
function onPointerLeave() {
|
|
163
|
+
pointerInside = false;
|
|
164
|
+
startDrift();
|
|
165
|
+
}
|
|
166
|
+
function drift(time) {
|
|
167
|
+
const delta = lastDriftTime ? time - lastDriftTime : 16.67;
|
|
168
|
+
lastDriftTime = time;
|
|
169
|
+
driftRaf = requestAnimationFrame(drift);
|
|
170
|
+
const layer = layerRef.current;
|
|
171
|
+
if (!layer) {
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
const { width, height } = layer.getBoundingClientRect();
|
|
175
|
+
if (!hasCenter) {
|
|
176
|
+
centerX = width / 2;
|
|
177
|
+
centerY = height / 2;
|
|
178
|
+
}
|
|
179
|
+
const targetX = width * (0.5 + 0.32 * Math.sin(time * 37e-5) + 0.12 * Math.sin(time * 91e-5));
|
|
180
|
+
const targetY = height * (0.5 + 0.32 * Math.cos(time * 41e-5) + 0.12 * Math.sin(time * 11e-4));
|
|
181
|
+
const alpha = 1 - Math.exp(-25e-4 * delta);
|
|
182
|
+
setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);
|
|
183
|
+
}
|
|
184
|
+
function startDrift() {
|
|
185
|
+
if (!driftEnabled || driftRaf) {
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
lastDriftTime = 0;
|
|
189
|
+
driftRaf = requestAnimationFrame(drift);
|
|
190
|
+
}
|
|
191
|
+
function stopDrift() {
|
|
192
|
+
if (driftRaf) {
|
|
193
|
+
cancelAnimationFrame(driftRaf);
|
|
194
|
+
driftRaf = 0;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
124
197
|
window.addEventListener("mousemove", onMove, { passive: true });
|
|
198
|
+
document.documentElement.addEventListener("mouseleave", onPointerLeave);
|
|
199
|
+
startDrift();
|
|
125
200
|
return () => {
|
|
126
201
|
window.removeEventListener("mousemove", onMove);
|
|
202
|
+
document.documentElement.removeEventListener("mouseleave", onPointerLeave);
|
|
127
203
|
if (raf) {
|
|
128
204
|
cancelAnimationFrame(raf);
|
|
129
205
|
}
|
|
206
|
+
stopDrift();
|
|
130
207
|
};
|
|
131
|
-
}, []);
|
|
132
|
-
const
|
|
208
|
+
}, [autoDrift]);
|
|
209
|
+
const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];
|
|
210
|
+
const glowColorsKey = JSON.stringify(colorList);
|
|
211
|
+
useEffect(() => {
|
|
212
|
+
const glow = glowRef.current;
|
|
213
|
+
if (!glow) {
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
const colors = JSON.parse(glowColorsKey).filter(Boolean);
|
|
217
|
+
const staticColor = colors[0];
|
|
218
|
+
if (staticColor) {
|
|
219
|
+
glow.style.setProperty("--vibe-glow-color", staticColor);
|
|
220
|
+
}
|
|
221
|
+
const clearColor = () => glow.style.removeProperty("--vibe-glow-color");
|
|
222
|
+
if (colors.length < 2 || prefersReducedMotion()) {
|
|
223
|
+
return staticColor ? clearColor : void 0;
|
|
224
|
+
}
|
|
225
|
+
let index = 0;
|
|
226
|
+
const raf = requestAnimationFrame(() => glow.style.setProperty("--vibe-glow-cycle", `${colorCycleMs}ms`));
|
|
227
|
+
const timer = setInterval(() => {
|
|
228
|
+
index = (index + 1) % colors.length;
|
|
229
|
+
glow.style.setProperty("--vibe-glow-color", colors[index]);
|
|
230
|
+
}, colorCycleMs);
|
|
231
|
+
return () => {
|
|
232
|
+
cancelAnimationFrame(raf);
|
|
233
|
+
clearInterval(timer);
|
|
234
|
+
glow.style.removeProperty("--vibe-glow-cycle");
|
|
235
|
+
clearColor();
|
|
236
|
+
};
|
|
237
|
+
}, [glowColorsKey, colorCycleMs]);
|
|
133
238
|
return /* @__PURE__ */ jsxs("div", { ref: layerRef, "aria-hidden": "true", className: "vibe-mouse-grid-layer", children: [
|
|
134
239
|
/* @__PURE__ */ jsx2("div", { className: "vibe-mouse-grid" }),
|
|
135
|
-
/* @__PURE__ */ jsx2("div", { className: "vibe-mouse-glow"
|
|
240
|
+
/* @__PURE__ */ jsx2("div", { ref: glowRef, className: "vibe-mouse-glow" })
|
|
136
241
|
] });
|
|
137
242
|
}
|
|
138
243
|
|
|
@@ -148,7 +253,7 @@ var Suggestion = ({ suggestion, onClick, className, children, ...props }) => {
|
|
|
148
253
|
type: "button",
|
|
149
254
|
onClick: handleClick,
|
|
150
255
|
className: cn(
|
|
151
|
-
"cursor-pointer whitespace-nowrap rounded-
|
|
256
|
+
"cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40",
|
|
152
257
|
className
|
|
153
258
|
),
|
|
154
259
|
...props,
|
|
@@ -168,4 +273,4 @@ export {
|
|
|
168
273
|
Suggestions,
|
|
169
274
|
Suggestion
|
|
170
275
|
};
|
|
171
|
-
//# sourceMappingURL=chunk-
|
|
276
|
+
//# sourceMappingURL=chunk-4VE6ZXXW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ai-elements/prompt-input/prompt-input.tsx","../src/components/ai-elements/prompt-input/types.ts","../src/components/ai-elements/mouse-grid/mouse-grid.tsx","../src/utils/prefers-reduced-motion.ts","../src/components/ai-elements/suggestion/suggestion.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport type { FormEventHandler, KeyboardEventHandler, MouseEventHandler } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/button/button\";\nimport { BUTTON_INTENT, BUTTON_SIZE } from \"@/components/button/constants\";\nimport { TextArea } from \"@/components/text-area/text-area\";\nimport { CHAT_STATUS } from \"./types\";\nimport type {\n PromptInputFooterProps,\n PromptInputProps,\n PromptInputSubmitProps,\n PromptInputTextareaProps,\n PromptInputToolsProps,\n} from \"./types\";\n\n/* ------------------------------------------------------------------------------------------------\n * Originally vendored from `@vercel/ai-elements`'s `prompt-input` registry entry. Slimmed hard to\n * the creation-surface essentials a consumer composes into a prompt-launcher hero: `PromptInput`\n * (form wrapper), `PromptInputTextarea`, `PromptInputFooter`, `PromptInputTools`, `PromptInputSubmit`.\n *\n * Everything else from the upstream entry is intentionally dropped: the action menu\n * (`PromptInputActionMenu*`), attachment / screenshot actions, the attachments strip, the\n * provider/controller contexts, and the `Select` / `HoverCard` / `Command` / `Tab` families. That\n * also sheds the upstream `nanoid` (id-per-attachment) dependency.\n *\n * Rewiring to clay's single-sourced primitives let this primitive ship with ZERO new runtime\n * dependencies — diverging from the original shared spec, which assumed the kept set would still\n * lean on `@base-ui/react`, `ai`, and `lucide-react`:\n * - upstream `InputGroupButton` (submit) → clay `Button` (filled, `type=\"button\"`, consumer label).\n * - upstream `InputGroupTextarea` → clay `TextArea` (auto-resize, transparent chrome).\n * - `lucide-react` icons → clay's already-bundled `@tabler/icons-react`.\n * - `ai`'s `ChatStatus` → a local ready/error status (see `./types`).\n *\n * Because clay's `Button` always renders `type=\"button\"`, native form submit isn't available;\n * both the Enter-key handler and the submit button trigger `form.requestSubmit()` explicitly. And\n * because clay's `TextArea` doesn't forward a `name` attribute, `PromptInput` reads the textarea's\n * value straight off the DOM at submit time rather than via `FormData` — keeping the form wrapper\n * decoupled from whoever controls the textarea's value.\n *\n * Types live in `./types`.\n * ------------------------------------------------------------------------------------------------ */\n\n/**\n * Form wrapper for a prompt composer. Renders a bordered, rounded surface; stacks its children\n * (textarea + footer) vertically. Reads the nested textarea's value on submit and forwards it to\n * `onSubmit`. Empty / whitespace-only submissions, and all submissions while `disabled`, are\n * ignored.\n */\nexport const PromptInput = ({ className, onSubmit, disabled, children, ...props }: PromptInputProps) => {\n const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(\n (event) => {\n event.preventDefault();\n if (disabled) {\n return;\n }\n const textarea = event.currentTarget.querySelector(\"textarea\");\n const text = textarea?.value ?? \"\";\n if (!text.trim()) {\n return;\n }\n onSubmit({ text }, event);\n },\n [disabled, onSubmit]\n );\n\n return (\n <form\n className={cn(\n \"flex w-full flex-col overflow-hidden rounded-xl border bg-background shadow-lg shadow-foreground/5\",\n className\n )}\n onSubmit={handleSubmit}\n {...props}\n >\n {children}\n </form>\n );\n};\n\n/**\n * Auto-resizing textarea for the prompt composer. Wraps clay's `TextArea` and adds Enter-to-submit\n * (Shift+Enter inserts a newline; submission is suppressed while an IME composition is active). The\n * consumer's `onKeyDown` runs first and can `preventDefault()` to opt out of the built-in Enter\n * handling.\n *\n * Horizontal padding lives on the textarea itself (not the wrapper) so its overflow scrollbar sits\n * flush against the wrapper's right edge; the wrapper only owns the vertical padding.\n */\nexport const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTextareaProps>(\n function PromptInputTextarea({ className, onKeyDown, placeholder = \"What would you like to know?\", ...props }, ref) {\n const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) {\n return;\n }\n if (event.key === \"Enter\" && !event.shiftKey && !event.nativeEvent.isComposing) {\n event.preventDefault();\n event.currentTarget.form?.requestSubmit();\n }\n },\n [onKeyDown]\n );\n\n return (\n <div className={cn(\"py-3\", className)}>\n <TextArea ref={ref} className=\"px-4\" onKeyDown={handleKeyDown} placeholder={placeholder} {...props} />\n </div>\n );\n }\n);\n\n/**\n * Footer row beneath the textarea — left tools and the right-aligned submit button. Horizontal\n * padding matches {@link PromptInputTextarea}'s (`px-4`) so the tools/submit align with the\n * textarea's text edges.\n */\nexport const PromptInputFooter = ({ className, ...props }: PromptInputFooterProps) => (\n <div className={cn(\"flex items-center justify-between gap-1 px-4 pb-3\", className)} {...props} />\n);\n\n/** Left-aligned cluster inside {@link PromptInputFooter} (e.g. the submit hint). */\nexport const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (\n <div className={cn(\"flex min-w-0 items-center gap-1\", className)} {...props} />\n);\n\n/**\n * Submit button for the prompt composer — a filled clay `Button` whose text is the consumer's\n * `label` (pass a localized string for i18n). Always submits the form via `form.requestSubmit()` on\n * click (clay buttons render `type=\"button\"`); the consumer disables it while a generation is in\n * flight. `status` drives the color: `error` renders the error (red) intent, otherwise primary.\n */\nexport const PromptInputSubmit = ({\n label = \"Submit\",\n status = CHAT_STATUS.READY,\n disabled,\n className,\n}: PromptInputSubmitProps) => {\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>((event) => {\n event.currentTarget.form?.requestSubmit();\n }, []);\n\n return (\n <Button\n intent={status === CHAT_STATUS.ERROR ? BUTTON_INTENT.ERROR : BUTTON_INTENT.PRIMARY}\n size={BUTTON_SIZE.XS}\n className={className}\n disabled={disabled}\n onClick={handleClick}\n >\n {label}\n </Button>\n );\n};\n","import type { FormEvent, HTMLAttributes } from \"react\";\n\nimport type { TextAreaProps } from \"@/components/text-area/types\";\n\n/**\n * Submission status the submit button reflects. The composer has no cancellation and no\n * intermediate \"generating\" state of its own — the consumer disables the button while busy — so\n * only the idle and error states are modeled here.\n */\nexport const CHAT_STATUS = {\n /** Idle / ready to submit. */\n READY: \"ready\",\n /** The last submission errored — the button shows a retry affordance. */\n ERROR: \"error\",\n} as const;\n\n/** Submission status the submit button reflects. */\nexport type ChatStatus = (typeof CHAT_STATUS)[keyof typeof CHAT_STATUS];\n\n/** Payload emitted by {@link PromptInput} on submit. v1 carries only text (attachments are cut). */\nexport interface PromptInputMessage {\n /** The current textarea value at submit time. */\n text: string;\n}\n\n/** Props for the {@link PromptInput} form wrapper. */\nexport type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\"> & {\n /**\n * Fired when the form is submitted (Enter key or the submit button) with non-empty text.\n * Receives the captured message and the underlying form event.\n */\n onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void;\n /**\n * Blocks submission across every trigger (Enter key, submit button, programmatic) when `true` —\n * e.g. while a generation is in flight. The single gate that keeps the Enter path in sync with a\n * disabled submit button. @default false\n */\n disabled?: boolean;\n};\n\n/** Props for {@link PromptInputTextarea} — clay `TextArea` props; `className` styles the wrapper. */\nexport type PromptInputTextareaProps = TextAreaProps;\n\n/** Props for {@link PromptInputFooter}. */\nexport type PromptInputFooterProps = HTMLAttributes<HTMLDivElement>;\n\n/** Props for {@link PromptInputTools}. */\nexport type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;\n\n/** Props for {@link PromptInputSubmit}. */\nexport interface PromptInputSubmitProps {\n /** Button label — pass a localized string (i18n) from the consumer. @default \"Submit\" */\n label?: string;\n /** Drives the button color: `error` renders the red error intent, otherwise primary. @default \"ready\" */\n status?: ChatStatus;\n /** Whether the button is non-interactive (e.g. empty input or a generation in flight). */\n disabled?: boolean;\n /** Additional CSS class name. */\n className?: string;\n}\n","import { useEffect, useRef } from \"react\";\n\nimport { prefersReducedMotion } from \"@/utils/prefers-reduced-motion\";\n\nimport type { MouseGridProps } from \"./types\";\n\n/**\n * Absolutely-positioned grid backdrop, confined to its nearest positioned ancestor (give the\n * parent `position: relative` + `overflow: hidden` to clip it). The grid is revealed only near the\n * cursor via a radial mask whose center is driven by the `--vibe-mx` / `--vibe-my` CSS vars,\n * updated by a rAF-throttled `mousemove` listener. Renders behind all content (`z-0`) and never\n * blocks pointer events.\n *\n * Cursor coordinates are translated from viewport space (`clientX` / `clientY`) into layer-local\n * space (minus the layer's `getBoundingClientRect()` origin) and written onto the layer element\n * itself — not the document root — so the glow tracks correctly even though the layer no longer\n * fills the viewport. The rect read happens inside the rAF so it batches with paint.\n *\n * Pure `useEffect` + `requestAnimationFrame`, no animation library. The `.vibe-mouse-grid-layer` /\n * `.vibe-mouse-grid` / `.vibe-mouse-glow` styles ship in `@shapesos/clay/blocks/styles.css`.\n *\n * With `autoDrift`, a second rAF loop wanders the glow center along a slow sum-of-sines path\n * whenever the cursor is outside the layer; it yields the moment the cursor re-enters (the\n * mousemove handler owns the vars then) and resumes on exit. Suppressed under `prefers-reduced-motion`.\n *\n * When `glowColor` is an array of 2+ colors, a `setInterval` cycles the `--vibe-glow-color` var\n * through the list every `colorCycleMs`; the `.vibe-mouse-glow` `background-color` transition\n * (duration = `--vibe-glow-cycle`) crossfades between them. Also suppressed under\n * `prefers-reduced-motion` (first color applied flat).\n */\nexport function MouseGrid({ glowColor, colorCycleMs = 4000, autoDrift = false }: MouseGridProps = {}) {\n const layerRef = useRef<HTMLDivElement>(null);\n const glowRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n // Drift only runs when `autoDrift` is on AND motion isn't reduced. When it's off, the cursor is\n // tracked normally even outside the layer — so reduced-motion users don't get a frozen glow.\n const driftEnabled = autoDrift && !prefersReducedMotion();\n\n let raf = 0;\n let driftRaf = 0;\n let lastDriftTime = 0;\n let clientX = 0;\n let clientY = 0;\n let pointerInside = false;\n // Last applied glow center (layer-local px). Tracked across both modes so drift can resume from\n // wherever the cursor left off instead of snapping to the wander path's current value.\n let centerX = 0;\n let centerY = 0;\n let hasCenter = false;\n\n function setCenter(x: number, y: number) {\n const layer = layerRef.current;\n if (!layer) {\n return;\n }\n centerX = x;\n centerY = y;\n hasCenter = true;\n layer.style.setProperty(\"--vibe-mx\", `${x}px`);\n layer.style.setProperty(\"--vibe-my\", `${y}px`);\n }\n function flush() {\n raf = 0;\n const layer = layerRef.current;\n if (!layer) {\n return;\n }\n // While drift is active and the cursor is outside the layer, the drift loop owns the center —\n // don't let the (out-of-bounds) cursor position fight it. Otherwise always track the cursor.\n if (driftEnabled && !pointerInside) {\n return;\n }\n const rect = layer.getBoundingClientRect();\n setCenter(clientX - rect.left, clientY - rect.top);\n }\n function onMove(event: MouseEvent) {\n clientX = event.clientX;\n clientY = event.clientY;\n const layer = layerRef.current;\n if (layer) {\n const rect = layer.getBoundingClientRect();\n pointerInside =\n clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;\n }\n // Run the drift loop only when it has work to do (cursor outside) — pause it while inside.\n if (pointerInside) {\n stopDrift();\n } else {\n startDrift();\n }\n if (raf) {\n return;\n }\n raf = requestAnimationFrame(flush);\n }\n // The cursor can leave the layer without another `mousemove` ever firing — e.g. when the layer\n // fills the viewport (or Storybook's preview iframe) and the pointer exits it entirely. Reset\n // the flag on document exit so drift resumes instead of freezing at the last in-bounds frame.\n function onPointerLeave() {\n pointerInside = false;\n startDrift();\n }\n function drift(time: number) {\n // Frame-rate-independent ease: convert elapsed ms into a per-frame factor so the glow reaches\n // the wander target in the same wall-clock time at 60 Hz and 120 Hz (a fixed factor would be\n // ~2× snappier on high-refresh displays). First frame falls back to a ~60 Hz delta.\n const delta = lastDriftTime ? time - lastDriftTime : 16.67;\n lastDriftTime = time;\n driftRaf = requestAnimationFrame(drift);\n const layer = layerRef.current;\n if (!layer) {\n return;\n }\n const { width, height } = layer.getBoundingClientRect();\n if (!hasCenter) {\n centerX = width / 2;\n centerY = height / 2;\n }\n // Organic wander: two sines per axis, slow + offset, kept inside ~[6%, 94%] of the bounds.\n const targetX = width * (0.5 + 0.32 * Math.sin(time * 0.00037) + 0.12 * Math.sin(time * 0.00091));\n const targetY = height * (0.5 + 0.32 * Math.cos(time * 0.00041) + 0.12 * Math.sin(time * 0.0011));\n // ~0.04 per frame at 60 Hz, but resolution-stable. Lets drift resume continuously from the\n // cursor's exit point with no jump; the target moves far slower, so amplitude is intact.\n const alpha = 1 - Math.exp(-0.0025 * delta);\n setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);\n }\n function startDrift() {\n if (!driftEnabled || driftRaf) {\n return;\n }\n lastDriftTime = 0;\n driftRaf = requestAnimationFrame(drift);\n }\n function stopDrift() {\n if (driftRaf) {\n cancelAnimationFrame(driftRaf);\n driftRaf = 0;\n }\n }\n\n window.addEventListener(\"mousemove\", onMove, { passive: true });\n document.documentElement.addEventListener(\"mouseleave\", onPointerLeave);\n // No pointer has been seen yet → idle, so start drifting immediately when enabled.\n startDrift();\n return () => {\n window.removeEventListener(\"mousemove\", onMove);\n document.documentElement.removeEventListener(\"mouseleave\", onPointerLeave);\n if (raf) {\n cancelAnimationFrame(raf);\n }\n stopDrift();\n };\n }, [autoDrift]);\n\n // Normalize the single `glowColor` prop (a CSS color, a list of colors, or nothing) to an array,\n // then serialize it: an inline array literal is a fresh ref each render, so keying the effect on\n // the serialized content means only an actual color change re-runs it — not unrelated re-renders.\n const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];\n const glowColorsKey = JSON.stringify(colorList);\n\n // Single owner of `--vibe-glow-color`: applies the first/only color flat, and crossfades through\n // the list when there are 2+. Driving it from one effect (rather than a cycle vs. a React inline\n // style) lets teardown reliably remove the var so a stale cycled color can't stick when cycling\n // stops — it reverts to the CSS default instead.\n useEffect(() => {\n const glow = glowRef.current;\n if (!glow) {\n return;\n }\n const colors = (JSON.parse(glowColorsKey) as string[]).filter(Boolean);\n const staticColor = colors[0];\n if (staticColor) {\n // Apply the first/static color flat (cycle duration still 0ms) so it doesn't fade in.\n glow.style.setProperty(\"--vibe-glow-color\", staticColor);\n }\n const clearColor = () => glow.style.removeProperty(\"--vibe-glow-color\");\n if (colors.length < 2 || prefersReducedMotion()) {\n return staticColor ? clearColor : undefined;\n }\n // Enable the crossfade next frame, then advance the color on each interval. The transition\n // duration equals the interval, so the blob is always smoothly in transit between colors.\n let index = 0;\n const raf = requestAnimationFrame(() => glow.style.setProperty(\"--vibe-glow-cycle\", `${colorCycleMs}ms`));\n const timer = setInterval(() => {\n index = (index + 1) % colors.length;\n glow.style.setProperty(\"--vibe-glow-color\", colors[index]);\n }, colorCycleMs);\n return () => {\n cancelAnimationFrame(raf);\n clearInterval(timer);\n glow.style.removeProperty(\"--vibe-glow-cycle\");\n clearColor();\n };\n }, [glowColorsKey, colorCycleMs]);\n\n return (\n <div ref={layerRef} aria-hidden=\"true\" className=\"vibe-mouse-grid-layer\">\n <div className=\"vibe-mouse-grid\" />\n <div ref={glowRef} className=\"vibe-mouse-glow\" />\n </div>\n );\n}\n","/**\n * Whether the user has requested reduced motion via the OS / browser\n * (`(prefers-reduced-motion: reduce)`). SSR-safe — use it to gate any optional animation so it\n * doesn't run for users who've opted out.\n *\n * @returns `true` when reduced motion is requested; `false` otherwise (including non-browser /\n * `matchMedia`-less environments, where there's no preference to honor).\n */\nexport function prefersReducedMotion(): boolean {\n return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n : false;\n}\n","import { useCallback } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { SuggestionProps, SuggestionsProps } from \"./types\";\n\n/* ------------------------------------------------------------------------------------------------\n * Vendored + slimmed from `@vercel/ai-elements`'s `suggestion` registry entry. Upstream wraps the\n * pills in a shadcn `ScrollArea` and renders each as a shadcn `Button variant=\"outline\"`; clay has\n * neither, so this ships a dependency-free row (`flex flex-wrap`) of Tailwind-styled pills using\n * clay's named color tokens. Engine note: this is vendored ai-elements chrome, so it's Tailwind —\n * clay's `Button` is styled-components with fixed radii and can't produce this 12px pill.\n * ------------------------------------------------------------------------------------------------ */\n\n/**\n * A centered, wrapping row of {@link Suggestion} pills — e.g. starter prompts beneath a composer.\n * Compose `Suggestion` children inside.\n */\nexport const Suggestions = ({ className, ...props }: SuggestionsProps) => (\n <div className={cn(\"flex flex-wrap items-center justify-center gap-3\", className)} {...props} />\n);\n\n/**\n * A single tappable suggestion pill. Renders `children` if provided, otherwise the `suggestion`\n * text, and calls `onClick(suggestion)` when clicked.\n */\nexport const Suggestion = ({ suggestion, onClick, className, children, ...props }: SuggestionProps) => {\n const handleClick = useCallback(() => onClick?.(suggestion), [onClick, suggestion]);\n\n return (\n <button\n type=\"button\"\n onClick={handleClick}\n className={cn(\n \"cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40\",\n className\n )}\n {...props}\n >\n {children ?? suggestion}\n </button>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,mBAAmB;;;ACSjC,IAAM,cAAc;AAAA;AAAA,EAEzB,OAAO;AAAA;AAAA,EAEP,OAAO;AACT;;;ADqDI;AAlBG,IAAM,cAAc,CAAC,EAAE,WAAW,UAAU,UAAU,UAAU,GAAG,MAAM,MAAwB;AACtG,QAAM,eAAkD;AAAA,IACtD,CAAC,UAAU;AACT,YAAM,eAAe;AACrB,UAAI,UAAU;AACZ;AAAA,MACF;AACA,YAAM,WAAW,MAAM,cAAc,cAAc,UAAU;AAC7D,YAAM,OAAO,UAAU,SAAS;AAChC,UAAI,CAAC,KAAK,KAAK,GAAG;AAChB;AAAA,MACF;AACA,eAAS,EAAE,KAAK,GAAG,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAWO,IAAM,sBAAsB;AAAA,EACjC,SAASA,qBAAoB,EAAE,WAAW,WAAW,cAAc,gCAAgC,GAAG,MAAM,GAAG,KAAK;AAClH,UAAM,gBAA2D;AAAA,MAC/D,CAAC,UAAU;AACT,oBAAY,KAAK;AACjB,YAAI,MAAM,kBAAkB;AAC1B;AAAA,QACF;AACA,YAAI,MAAM,QAAQ,WAAW,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY,aAAa;AAC9E,gBAAM,eAAe;AACrB,gBAAM,cAAc,MAAM,cAAc;AAAA,QAC1C;AAAA,MACF;AAAA,MACA,CAAC,SAAS;AAAA,IACZ;AAEA,WACE,oBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,GAClC,8BAAC,YAAS,KAAU,WAAU,QAAO,WAAW,eAAe,aAA2B,GAAG,OAAO,GACtG;AAAA,EAEJ;AACF;AAOO,IAAM,oBAAoB,CAAC,EAAE,WAAW,GAAG,MAAM,MACtD,oBAAC,SAAI,WAAW,GAAG,qDAAqD,SAAS,GAAI,GAAG,OAAO;AAI1F,IAAM,mBAAmB,CAAC,EAAE,WAAW,GAAG,MAAM,MACrD,oBAAC,SAAI,WAAW,GAAG,mCAAmC,SAAS,GAAI,GAAG,OAAO;AASxE,IAAM,oBAAoB,CAAC;AAAA,EAChC,QAAQ;AAAA,EACR,SAAS,YAAY;AAAA,EACrB;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,cAAc,YAAkD,CAAC,UAAU;AAC/E,UAAM,cAAc,MAAM,cAAc;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,WAAW,YAAY,QAAQ,cAAc,QAAQ,cAAc;AAAA,MAC3E,MAAM,YAAY;AAAA,MAClB;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MAER;AAAA;AAAA,EACH;AAEJ;;;AE1JA,SAAS,WAAW,cAAc;;;ACQ3B,SAAS,uBAAgC;AAC9C,SAAO,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aACjE,OAAO,WAAW,kCAAkC,EAAE,UACtD;AACN;;;ADyLI,SACE,OAAAC,MADF;AAvKG,SAAS,UAAU,EAAE,WAAW,eAAe,KAAM,YAAY,MAAM,IAAoB,CAAC,GAAG;AACpG,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AAGd,UAAM,eAAe,aAAa,CAAC,qBAAqB;AAExD,QAAI,MAAM;AACV,QAAI,WAAW;AACf,QAAI,gBAAgB;AACpB,QAAI,UAAU;AACd,QAAI,UAAU;AACd,QAAI,gBAAgB;AAGpB,QAAI,UAAU;AACd,QAAI,UAAU;AACd,QAAI,YAAY;AAEhB,aAAS,UAAU,GAAW,GAAW;AACvC,YAAM,QAAQ,SAAS;AACvB,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,gBAAU;AACV,gBAAU;AACV,kBAAY;AACZ,YAAM,MAAM,YAAY,aAAa,GAAG,CAAC,IAAI;AAC7C,YAAM,MAAM,YAAY,aAAa,GAAG,CAAC,IAAI;AAAA,IAC/C;AACA,aAAS,QAAQ;AACf,YAAM;AACN,YAAM,QAAQ,SAAS;AACvB,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AAGA,UAAI,gBAAgB,CAAC,eAAe;AAClC;AAAA,MACF;AACA,YAAM,OAAO,MAAM,sBAAsB;AACzC,gBAAU,UAAU,KAAK,MAAM,UAAU,KAAK,GAAG;AAAA,IACnD;AACA,aAAS,OAAO,OAAmB;AACjC,gBAAU,MAAM;AAChB,gBAAU,MAAM;AAChB,YAAM,QAAQ,SAAS;AACvB,UAAI,OAAO;AACT,cAAM,OAAO,MAAM,sBAAsB;AACzC,wBACE,WAAW,KAAK,QAAQ,WAAW,KAAK,SAAS,WAAW,KAAK,OAAO,WAAW,KAAK;AAAA,MAC5F;AAEA,UAAI,eAAe;AACjB,kBAAU;AAAA,MACZ,OAAO;AACL,mBAAW;AAAA,MACb;AACA,UAAI,KAAK;AACP;AAAA,MACF;AACA,YAAM,sBAAsB,KAAK;AAAA,IACnC;AAIA,aAAS,iBAAiB;AACxB,sBAAgB;AAChB,iBAAW;AAAA,IACb;AACA,aAAS,MAAM,MAAc;AAI3B,YAAM,QAAQ,gBAAgB,OAAO,gBAAgB;AACrD,sBAAgB;AAChB,iBAAW,sBAAsB,KAAK;AACtC,YAAM,QAAQ,SAAS;AACvB,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,YAAM,EAAE,OAAO,OAAO,IAAI,MAAM,sBAAsB;AACtD,UAAI,CAAC,WAAW;AACd,kBAAU,QAAQ;AAClB,kBAAU,SAAS;AAAA,MACrB;AAEA,YAAM,UAAU,SAAS,MAAM,OAAO,KAAK,IAAI,OAAO,KAAO,IAAI,OAAO,KAAK,IAAI,OAAO,KAAO;AAC/F,YAAM,UAAU,UAAU,MAAM,OAAO,KAAK,IAAI,OAAO,KAAO,IAAI,OAAO,KAAK,IAAI,OAAO,KAAM;AAG/F,YAAM,QAAQ,IAAI,KAAK,IAAI,SAAU,KAAK;AAC1C,gBAAU,WAAW,UAAU,WAAW,OAAO,WAAW,UAAU,WAAW,KAAK;AAAA,IACxF;AACA,aAAS,aAAa;AACpB,UAAI,CAAC,gBAAgB,UAAU;AAC7B;AAAA,MACF;AACA,sBAAgB;AAChB,iBAAW,sBAAsB,KAAK;AAAA,IACxC;AACA,aAAS,YAAY;AACnB,UAAI,UAAU;AACZ,6BAAqB,QAAQ;AAC7B,mBAAW;AAAA,MACb;AAAA,IACF;AAEA,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,KAAK,CAAC;AAC9D,aAAS,gBAAgB,iBAAiB,cAAc,cAAc;AAEtE,eAAW;AACX,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,eAAS,gBAAgB,oBAAoB,cAAc,cAAc;AACzE,UAAI,KAAK;AACP,6BAAqB,GAAG;AAAA,MAC1B;AACA,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAKd,QAAM,YAAY,MAAM,QAAQ,SAAS,IAAI,YAAY,aAAa,OAAO,CAAC,SAAS,IAAI,CAAC;AAC5F,QAAM,gBAAgB,KAAK,UAAU,SAAS;AAM9C,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AACA,UAAM,SAAU,KAAK,MAAM,aAAa,EAAe,OAAO,OAAO;AACrE,UAAM,cAAc,OAAO,CAAC;AAC5B,QAAI,aAAa;AAEf,WAAK,MAAM,YAAY,qBAAqB,WAAW;AAAA,IACzD;AACA,UAAM,aAAa,MAAM,KAAK,MAAM,eAAe,mBAAmB;AACtE,QAAI,OAAO,SAAS,KAAK,qBAAqB,GAAG;AAC/C,aAAO,cAAc,aAAa;AAAA,IACpC;AAGA,QAAI,QAAQ;AACZ,UAAM,MAAM,sBAAsB,MAAM,KAAK,MAAM,YAAY,qBAAqB,GAAG,YAAY,IAAI,CAAC;AACxG,UAAM,QAAQ,YAAY,MAAM;AAC9B,eAAS,QAAQ,KAAK,OAAO;AAC7B,WAAK,MAAM,YAAY,qBAAqB,OAAO,KAAK,CAAC;AAAA,IAC3D,GAAG,YAAY;AACf,WAAO,MAAM;AACX,2BAAqB,GAAG;AACxB,oBAAc,KAAK;AACnB,WAAK,MAAM,eAAe,mBAAmB;AAC7C,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,SACE,qBAAC,SAAI,KAAK,UAAU,eAAY,QAAO,WAAU,yBAC/C;AAAA,oBAAAA,KAAC,SAAI,WAAU,mBAAkB;AAAA,IACjC,gBAAAA,KAAC,SAAI,KAAK,SAAS,WAAU,mBAAkB;AAAA,KACjD;AAEJ;;;AE1MA,SAAS,eAAAC,oBAAmB;AAkB1B,gBAAAC,YAAA;AADK,IAAM,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,MAChD,gBAAAA,KAAC,SAAI,WAAW,GAAG,oDAAoD,SAAS,GAAI,GAAG,OAAO;AAOzF,IAAM,aAAa,CAAC,EAAE,YAAY,SAAS,WAAW,UAAU,GAAG,MAAM,MAAuB;AACrG,QAAM,cAAcC,aAAY,MAAM,UAAU,UAAU,GAAG,CAAC,SAAS,UAAU,CAAC;AAElF,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ;","names":["PromptInputTextarea","jsx","useCallback","jsx","useCallback"]}
|
package/dist/index.cjs
CHANGED
|
@@ -19169,43 +19169,148 @@ var PromptInputSubmit = ({
|
|
|
19169
19169
|
|
|
19170
19170
|
// src/components/ai-elements/mouse-grid/mouse-grid.tsx
|
|
19171
19171
|
var import_react20 = require("react");
|
|
19172
|
+
|
|
19173
|
+
// src/utils/prefers-reduced-motion.ts
|
|
19174
|
+
function prefersReducedMotion() {
|
|
19175
|
+
return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
|
|
19176
|
+
}
|
|
19177
|
+
|
|
19178
|
+
// src/components/ai-elements/mouse-grid/mouse-grid.tsx
|
|
19172
19179
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
19173
|
-
function MouseGrid({ glowColor } = {}) {
|
|
19180
|
+
function MouseGrid({ glowColor, colorCycleMs = 4e3, autoDrift = false } = {}) {
|
|
19174
19181
|
const layerRef = (0, import_react20.useRef)(null);
|
|
19182
|
+
const glowRef = (0, import_react20.useRef)(null);
|
|
19175
19183
|
(0, import_react20.useEffect)(() => {
|
|
19184
|
+
const driftEnabled = autoDrift && !prefersReducedMotion();
|
|
19176
19185
|
let raf = 0;
|
|
19186
|
+
let driftRaf = 0;
|
|
19187
|
+
let lastDriftTime = 0;
|
|
19177
19188
|
let clientX = 0;
|
|
19178
19189
|
let clientY = 0;
|
|
19190
|
+
let pointerInside = false;
|
|
19191
|
+
let centerX = 0;
|
|
19192
|
+
let centerY = 0;
|
|
19193
|
+
let hasCenter = false;
|
|
19194
|
+
function setCenter(x, y) {
|
|
19195
|
+
const layer = layerRef.current;
|
|
19196
|
+
if (!layer) {
|
|
19197
|
+
return;
|
|
19198
|
+
}
|
|
19199
|
+
centerX = x;
|
|
19200
|
+
centerY = y;
|
|
19201
|
+
hasCenter = true;
|
|
19202
|
+
layer.style.setProperty("--vibe-mx", `${x}px`);
|
|
19203
|
+
layer.style.setProperty("--vibe-my", `${y}px`);
|
|
19204
|
+
}
|
|
19179
19205
|
function flush() {
|
|
19180
19206
|
raf = 0;
|
|
19181
19207
|
const layer = layerRef.current;
|
|
19182
19208
|
if (!layer) {
|
|
19183
19209
|
return;
|
|
19184
19210
|
}
|
|
19211
|
+
if (driftEnabled && !pointerInside) {
|
|
19212
|
+
return;
|
|
19213
|
+
}
|
|
19185
19214
|
const rect = layer.getBoundingClientRect();
|
|
19186
|
-
|
|
19187
|
-
layer.style.setProperty("--vibe-my", `${clientY - rect.top}px`);
|
|
19215
|
+
setCenter(clientX - rect.left, clientY - rect.top);
|
|
19188
19216
|
}
|
|
19189
19217
|
function onMove(event) {
|
|
19190
19218
|
clientX = event.clientX;
|
|
19191
19219
|
clientY = event.clientY;
|
|
19220
|
+
const layer = layerRef.current;
|
|
19221
|
+
if (layer) {
|
|
19222
|
+
const rect = layer.getBoundingClientRect();
|
|
19223
|
+
pointerInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
|
|
19224
|
+
}
|
|
19225
|
+
if (pointerInside) {
|
|
19226
|
+
stopDrift();
|
|
19227
|
+
} else {
|
|
19228
|
+
startDrift();
|
|
19229
|
+
}
|
|
19192
19230
|
if (raf) {
|
|
19193
19231
|
return;
|
|
19194
19232
|
}
|
|
19195
19233
|
raf = requestAnimationFrame(flush);
|
|
19196
19234
|
}
|
|
19235
|
+
function onPointerLeave() {
|
|
19236
|
+
pointerInside = false;
|
|
19237
|
+
startDrift();
|
|
19238
|
+
}
|
|
19239
|
+
function drift(time2) {
|
|
19240
|
+
const delta = lastDriftTime ? time2 - lastDriftTime : 16.67;
|
|
19241
|
+
lastDriftTime = time2;
|
|
19242
|
+
driftRaf = requestAnimationFrame(drift);
|
|
19243
|
+
const layer = layerRef.current;
|
|
19244
|
+
if (!layer) {
|
|
19245
|
+
return;
|
|
19246
|
+
}
|
|
19247
|
+
const { width: width2, height: height2 } = layer.getBoundingClientRect();
|
|
19248
|
+
if (!hasCenter) {
|
|
19249
|
+
centerX = width2 / 2;
|
|
19250
|
+
centerY = height2 / 2;
|
|
19251
|
+
}
|
|
19252
|
+
const targetX = width2 * (0.5 + 0.32 * Math.sin(time2 * 37e-5) + 0.12 * Math.sin(time2 * 91e-5));
|
|
19253
|
+
const targetY = height2 * (0.5 + 0.32 * Math.cos(time2 * 41e-5) + 0.12 * Math.sin(time2 * 11e-4));
|
|
19254
|
+
const alpha = 1 - Math.exp(-25e-4 * delta);
|
|
19255
|
+
setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);
|
|
19256
|
+
}
|
|
19257
|
+
function startDrift() {
|
|
19258
|
+
if (!driftEnabled || driftRaf) {
|
|
19259
|
+
return;
|
|
19260
|
+
}
|
|
19261
|
+
lastDriftTime = 0;
|
|
19262
|
+
driftRaf = requestAnimationFrame(drift);
|
|
19263
|
+
}
|
|
19264
|
+
function stopDrift() {
|
|
19265
|
+
if (driftRaf) {
|
|
19266
|
+
cancelAnimationFrame(driftRaf);
|
|
19267
|
+
driftRaf = 0;
|
|
19268
|
+
}
|
|
19269
|
+
}
|
|
19197
19270
|
window.addEventListener("mousemove", onMove, { passive: true });
|
|
19271
|
+
document.documentElement.addEventListener("mouseleave", onPointerLeave);
|
|
19272
|
+
startDrift();
|
|
19198
19273
|
return () => {
|
|
19199
19274
|
window.removeEventListener("mousemove", onMove);
|
|
19275
|
+
document.documentElement.removeEventListener("mouseleave", onPointerLeave);
|
|
19200
19276
|
if (raf) {
|
|
19201
19277
|
cancelAnimationFrame(raf);
|
|
19202
19278
|
}
|
|
19279
|
+
stopDrift();
|
|
19203
19280
|
};
|
|
19204
|
-
}, []);
|
|
19205
|
-
const
|
|
19281
|
+
}, [autoDrift]);
|
|
19282
|
+
const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];
|
|
19283
|
+
const glowColorsKey = JSON.stringify(colorList);
|
|
19284
|
+
(0, import_react20.useEffect)(() => {
|
|
19285
|
+
const glow = glowRef.current;
|
|
19286
|
+
if (!glow) {
|
|
19287
|
+
return;
|
|
19288
|
+
}
|
|
19289
|
+
const colors2 = JSON.parse(glowColorsKey).filter(Boolean);
|
|
19290
|
+
const staticColor = colors2[0];
|
|
19291
|
+
if (staticColor) {
|
|
19292
|
+
glow.style.setProperty("--vibe-glow-color", staticColor);
|
|
19293
|
+
}
|
|
19294
|
+
const clearColor = () => glow.style.removeProperty("--vibe-glow-color");
|
|
19295
|
+
if (colors2.length < 2 || prefersReducedMotion()) {
|
|
19296
|
+
return staticColor ? clearColor : void 0;
|
|
19297
|
+
}
|
|
19298
|
+
let index2 = 0;
|
|
19299
|
+
const raf = requestAnimationFrame(() => glow.style.setProperty("--vibe-glow-cycle", `${colorCycleMs}ms`));
|
|
19300
|
+
const timer = setInterval(() => {
|
|
19301
|
+
index2 = (index2 + 1) % colors2.length;
|
|
19302
|
+
glow.style.setProperty("--vibe-glow-color", colors2[index2]);
|
|
19303
|
+
}, colorCycleMs);
|
|
19304
|
+
return () => {
|
|
19305
|
+
cancelAnimationFrame(raf);
|
|
19306
|
+
clearInterval(timer);
|
|
19307
|
+
glow.style.removeProperty("--vibe-glow-cycle");
|
|
19308
|
+
clearColor();
|
|
19309
|
+
};
|
|
19310
|
+
}, [glowColorsKey, colorCycleMs]);
|
|
19206
19311
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref: layerRef, "aria-hidden": "true", className: "vibe-mouse-grid-layer", children: [
|
|
19207
19312
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "vibe-mouse-grid" }),
|
|
19208
|
-
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "vibe-mouse-glow"
|
|
19313
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref: glowRef, className: "vibe-mouse-glow" })
|
|
19209
19314
|
] });
|
|
19210
19315
|
}
|
|
19211
19316
|
|
|
@@ -19221,7 +19326,7 @@ var Suggestion = ({ suggestion, onClick, className, children, ...props }) => {
|
|
|
19221
19326
|
type: "button",
|
|
19222
19327
|
onClick: handleClick,
|
|
19223
19328
|
className: cn(
|
|
19224
|
-
"cursor-pointer whitespace-nowrap rounded-
|
|
19329
|
+
"cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40",
|
|
19225
19330
|
className
|
|
19226
19331
|
),
|
|
19227
19332
|
...props,
|