visual-comments 0.0.0-stage → 0.2.0

package/dist/ui/Toolbar.svelte

@@ -0,0 +1,35 @@
+<!-- The floating toolbar: comment mode and the account, at the bottom of the window. -->
+<script lang="ts">
+	import Account from './Account.svelte';
+	import { useComments } from './context.js';
+	import Icon from './Icon.svelte';
+
+	const vc = useComments();
+</script>
+
+<div data-vc-ui class="pointer-events-auto absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center gap-2">
+	{#if vc.store.error && !vc.active}
+		<div role="alert" class="flex max-w-80 items-start gap-2 rounded-[8px] bg-vc-ink px-3 py-2 text-white shadow-lg">
+			<p class="flex-1">{vc.store.error}</p>
+			<button type="button" class="text-white/70 hover:text-white" aria-label="Dismiss" onclick={() => (vc.store.error = null)}>
+				<Icon name="close" size={14} />
+			</button>
+		</div>
+	{/if}
+	<div class="flex items-center gap-0.5 rounded-full bg-vc-island p-1 text-vc-island-ink shadow-[0_2px_10px_rgb(0_0_0/0.2)] backdrop-blur-[5px]">
+		<button
+			type="button"
+			class="vc-island-tool relative"
+			aria-pressed={vc.active}
+			aria-label="Comments"
+			title="Comments{vc.options.shortcut === false ? '' : ` (${(vc.options.shortcut ?? 'c').toUpperCase()})`}"
+			onclick={() => vc.toggle()}
+		>
+			<Icon name="comment" />
+			{#if vc.unreadCount && !vc.active}
+				<span class="absolute top-1 right-1 size-2 rounded-full bg-vc-comment"></span>
+			{/if}
+		</button>
+		<Account {vc} />
+	</div>
+</div>

package/dist/ui/Toolbar.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toolbar = InstanceType<typeof Toolbar>;
+export default Toolbar;

package/dist/ui/context.d.ts

@@ -0,0 +1,3 @@
+import type { VisualComments } from '../visual-comments.svelte.js';
+export declare function setComments(vc: VisualComments): void;
+export declare function useComments(): VisualComments;

package/dist/ui/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('visual-comments');
+export function setComments(vc) {
+    setContext(KEY, vc);
+}
+export function useComments() {
+    return getContext(KEY);
+}

package/dist/ui/generated/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-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}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--leading-tight:1.25;--radius-lg:.5rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-vc:var(--vc-font,var(--vc-font-default));--color-vc-ink:var(--vc-ink,#292524);--color-vc-muted:var(--vc-muted,#78716c);--color-vc-wash:var(--vc-wash,#e7e5e4);--color-vc-accent:var(--vc-accent,#57534e);--color-vc-avatar:var(--vc-avatar,#009aaa);--color-vc-comment:var(--vc-comment,#0d99ff);--color-vc-island-ink:var(--vc-island-ink,#fff);--color-vc-island-hover:var(--vc-island-hover,#ffffff24);--color-vc-working:var(--vc-working,var(--vc-comment,#0d99ff))}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{font-family:var(--font-vc);color:var(--color-vc-ink);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.4}.vc-ui{cursor:auto!important}.vc-ui button,.vc-ui a,.vc-ui [role=menuitem]{cursor:pointer}}@layer components{.vc-tool{border-radius:.125rem;outline:none;justify-content:center;align-items:center;min-width:1.75rem;height:1.75rem;display:inline-flex}.vc-tool:hover{background:var(--color-vc-wash)}.vc-tool:focus-visible{box-shadow:0 0 0 2px var(--color-vc-accent)}.vc-island-tool{min-width:2rem;height:2rem;color:var(--color-vc-island-ink);border-radius:9999px;outline:none;justify-content:center;align-items:center;gap:.375rem;display:inline-flex}.vc-island-tool:hover,.vc-island-tool[aria-expanded=true]{background:var(--color-vc-island-hover)}.vc-island-tool[aria-pressed=true]{background:var(--color-vc-island-ink);color:var(--color-vc-ink)}.vc-island-tool:focus-visible{box-shadow:0 0 0 2px #fff9}.vc-comment-cursor{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 1.5a12.5 12.5 0 1 1 0 25H1.5V14A12.5 12.5 0 0 1 14 1.5z' fill='white' stroke='%231c1917' stroke-width='1.5'/%3E%3Cpath d='M14 9v10M9 14h10' stroke='%231c1917' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 1 27,crosshair}.vc-working{animation:1.6s ease-out infinite vc-working}@keyframes vc-working{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-vc-working) 70%, transparent)}to{box-shadow:0 0 0 9px color-mix(in srgb, var(--color-vc-working) 0%, transparent)}}@media (prefers-reduced-motion:reduce){.vc-working{box-shadow:0 0 0 2px var(--color-vc-working);animation:none}}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-auto{inset:auto}.top-0\.5{top:calc(var(--spacing) * .5)}.top-1{top:var(--spacing)}.top-2\.5{top:calc(var(--spacing) * 2.5)}.top-3{top:calc(var(--spacing) * 3)}.right-0\.5{right:calc(var(--spacing) * .5)}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.bottom-3{bottom:calc(var(--spacing) * 3)}.bottom-4{bottom:calc(var(--spacing) * 4)}.-left-2{left:calc(var(--spacing) * -2)}.left-1\/2{left:50%}.left-\[42px\]{left:42px}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.m-0{margin:0}.m-2{margin:calc(var(--spacing) * 2)}.m-auto{margin:auto}.my-1{margin-block:var(--spacing)}.mt-0{margin-top:0}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-\[3px\]{margin-top:3px}.ml-1{margin-left:var(--spacing)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-full{width:100%;height:100%}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-11{height:calc(var(--spacing) * 11)}.h-auto{height:auto}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-\[min\(70vh\,560px\)\]{max-height:min(70vh,560px)}.min-h-0{min-height:0}.w-4{width:calc(var(--spacing) * 4)}.w-40{width:calc(var(--spacing) * 40)}.w-80{width:calc(var(--spacing) * 80)}.w-\[296px\]{width:296px}.w-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.max-w-72{max-width:calc(var(--spacing) * 72)}.max-w-80{max-width:calc(var(--spacing) * 80)}.max-w-\[240px\]{max-width:240px}.max-w-\[296px\]{max-width:296px}.max-w-\[calc\(100vw-24px\)\]{max-width:calc(100vw - 24px)}.min-w-0{min-width:0}.min-w-52{min-width:calc(var(--spacing) * 52)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-none\!{cursor:none!important}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}.self-center{align-self:center}.self-end{align-self:flex-end}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:.25rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-\[12px\]{border-radius:12px}.rounded-\[14px\]{border-radius:14px}.rounded-\[18px\]{border-radius:18px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.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-vc-comment{border-color:var(--vc-comment,#0d99ff)}.border-vc-comment\!{border-color:var(--vc-comment,#0d99ff)!important}.border-vc-line,.border-vc-line\/70{border-color:var(--vc-line,#d6d3d1)}@supports (color:color-mix(in lab, red, red)){.border-vc-line\/70{border-color:color-mix(in oklab, var(--vc-line,#d6d3d1) 70%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-t-transparent{border-top-color:#0000}.bg-\[\#d9d9d9\]{background-color:#d9d9d9}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\/60{background-color:color-mix(in oklab, var(--color-black) 60%, transparent)}}.bg-current\/15{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.bg-current\/15{background-color:color-mix(in oklab, currentcolor 15%, transparent)}}.bg-transparent{background-color:#0000}.bg-vc-agent{background-color:var(--vc-agent,#292524)}.bg-vc-comment{background-color:var(--vc-comment,#0d99ff)}.bg-vc-comment-soft{background-color:var(--vc-comment-soft,#e5f4ff)}.bg-vc-ink{background-color:var(--vc-ink,#292524)}.bg-vc-island{background-color:var(--vc-island,#323232b8)}.bg-vc-surface{background-color:var(--vc-surface,#f5f5f4)}.bg-white{background-color:var(--color-white)}.bg-white\/85{background-color:#ffffffd9}@supports (color:color-mix(in lab, red, red)){.bg-white\/85{background-color:color-mix(in oklab, var(--color-white) 85%, transparent)}}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-5{padding:calc(var(--spacing) * 5)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-\[3px\]{padding-block:3px}.py-\[5px\]{padding-block:5px}.pt-1\.5{padding-top:calc(var(--spacing) * 1.5)}.pr-0\.5{padding-right:calc(var(--spacing) * .5)}.pr-1{padding-right:var(--spacing)}.pr-1\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-\[3px\]{padding-right:3px}.pr-\[5px\]{padding-right:5px}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5)}.pl-0\.5{padding-left:calc(var(--spacing) * .5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-3\.5{padding-left:calc(var(--spacing) * 3.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.font-vc{font-family:var(--vc-font,var(--vc-font-default))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-\[18px\]{--tw-leading:18px;line-height:18px}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.text-red-600{color:var(--color-red-600)}.text-vc-accent{color:var(--vc-accent,#57534e)}.text-vc-comment{color:var(--vc-comment,#0d99ff)}.text-vc-ink{color:var(--vc-ink,#292524)}.text-vc-island-ink{color:var(--vc-island-ink,#fff)}.text-vc-muted{color:var(--vc-muted,#78716c)}.text-vc-working{color:var(--vc-working,var(--vc-comment,#0d99ff))}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-55{opacity:.55}.opacity-60{opacity:.6}.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-\[0_1px_3px_rgb\(0_0_0\/0\.12\)\]{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgb\(0_0_0\/0\.3\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_6px_rgb\(0_0_0\/0\.16\)\]{--tw-shadow:0 1px 6px var(--tw-shadow-color,#00000029);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_2px_10px_rgb\(0_0_0\/0\.2\)\]{--tw-shadow:0 2px 10px var(--tw-shadow-color,#0003);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_2px_14px_rgb\(0_0_0\/0\.18\)\]{--tw-shadow:0 2px 14px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_4px_24px_rgb\(0_0_0\/0\.22\)\]{--tw-shadow:0 4px 24px var(--tw-shadow-color,#00000038);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_8px_40px_rgb\(0_0_0\/0\.28\)\]{--tw-shadow:0 8px 40px var(--tw-shadow-color,#00000047);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)}.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)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[1\.5px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-vc-comment\/30{--tw-ring-color:var(--vc-comment,#0d99ff)}@supports (color:color-mix(in lab, red, red)){.ring-vc-comment\/30{--tw-ring-color:color-mix(in oklab, var(--vc-comment,#0d99ff) 30%, transparent)}}.ring-white{--tw-ring-color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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-\[5px\]{--tw-backdrop-blur:blur(5px);-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-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[grid-area\:1\/1\]{grid-area:1/1}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-vc-muted\/70::placeholder{color:var(--vc-muted,#78716c)}@supports (color:color-mix(in lab, red, red)){.placeholder\:text-vc-muted\/70::placeholder{color:color-mix(in oklab, var(--vc-muted,#78716c) 70%, transparent)}}.placeholder\:text-vc-muted\/80::placeholder{color:var(--vc-muted,#78716c)}@supports (color:color-mix(in lab, red, red)){.placeholder\:text-vc-muted\/80::placeholder{color:color-mix(in oklab, var(--vc-muted,#78716c) 80%, transparent)}}.backdrop\:bg-black\/30::backdrop{background-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.backdrop\:bg-black\/30::backdrop{background-color:color-mix(in oklab, var(--color-black) 30%, transparent)}}.focus-within\:border-vc-comment:focus-within{border-color:var(--vc-comment,#0d99ff)}.focus-within\:opacity-100:focus-within{opacity:1}.focus-within\:ring-1:focus-within{--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)}.focus-within\:ring-vc-comment:focus-within{--tw-ring-color:var(--vc-comment,#0d99ff)}@media (hover:hover){.hover\:border-vc-line:hover{border-color:var(--vc-line,#d6d3d1)}.hover\:bg-black\/80:hover{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/80:hover{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.hover\:bg-vc-surface:hover{background-color:var(--vc-surface,#f5f5f4)}.hover\:bg-vc-wash:hover{background-color:var(--vc-wash,#e7e5e4)}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:text-vc-ink:hover{color:var(--vc-ink,#292524)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);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,)}}.focus-visible\:bg-vc-wash:focus-visible{background-color:var(--vc-wash,#e7e5e4)}.focus-visible\:bg-white\/10:focus-visible{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.focus-visible\:bg-white\/10:focus-visible{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-vc-comment:focus-visible{outline-color:var(--vc-comment,#0d99ff)}.has-\[\[aria-expanded\=true\]\]\:opacity-100:has([aria-expanded=true]){opacity:1}}:host{--vc-font-default:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-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}@keyframes spin{to{transform:rotate(360deg)}}

package/dist/ui/generated/styles.d.ts

@@ -0,0 +1,2 @@
+export const styles: string;
+export const properties: string;

package/dist/ui/generated/styles.js

@@ -0,0 +1,3 @@
+// Generated by scripts/build-css.mjs.
+export const styles = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-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}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--leading-tight:1.25;--radius-lg:.5rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-vc:var(--vc-font,var(--vc-font-default));--color-vc-ink:var(--vc-ink,#292524);--color-vc-muted:var(--vc-muted,#78716c);--color-vc-wash:var(--vc-wash,#e7e5e4);--color-vc-accent:var(--vc-accent,#57534e);--color-vc-avatar:var(--vc-avatar,#009aaa);--color-vc-comment:var(--vc-comment,#0d99ff);--color-vc-island-ink:var(--vc-island-ink,#fff);--color-vc-island-hover:var(--vc-island-hover,#ffffff24);--color-vc-working:var(--vc-working,var(--vc-comment,#0d99ff))}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{font-family:var(--font-vc);color:var(--color-vc-ink);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.4}.vc-ui{cursor:auto!important}.vc-ui button,.vc-ui a,.vc-ui [role=menuitem]{cursor:pointer}}@layer components{.vc-tool{border-radius:.125rem;outline:none;justify-content:center;align-items:center;min-width:1.75rem;height:1.75rem;display:inline-flex}.vc-tool:hover{background:var(--color-vc-wash)}.vc-tool:focus-visible{box-shadow:0 0 0 2px var(--color-vc-accent)}.vc-island-tool{min-width:2rem;height:2rem;color:var(--color-vc-island-ink);border-radius:9999px;outline:none;justify-content:center;align-items:center;gap:.375rem;display:inline-flex}.vc-island-tool:hover,.vc-island-tool[aria-expanded=true]{background:var(--color-vc-island-hover)}.vc-island-tool[aria-pressed=true]{background:var(--color-vc-island-ink);color:var(--color-vc-ink)}.vc-island-tool:focus-visible{box-shadow:0 0 0 2px #fff9}.vc-comment-cursor{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 1.5a12.5 12.5 0 1 1 0 25H1.5V14A12.5 12.5 0 0 1 14 1.5z' fill='white' stroke='%231c1917' stroke-width='1.5'/%3E%3Cpath d='M14 9v10M9 14h10' stroke='%231c1917' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E\") 1 27,crosshair}.vc-working{animation:1.6s ease-out infinite vc-working}@keyframes vc-working{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-vc-working) 70%, transparent)}to{box-shadow:0 0 0 9px color-mix(in srgb, var(--color-vc-working) 0%, transparent)}}@media (prefers-reduced-motion:reduce){.vc-working{box-shadow:0 0 0 2px var(--color-vc-working);animation:none}}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-auto{inset:auto}.top-0\\.5{top:calc(var(--spacing) * .5)}.top-1{top:var(--spacing)}.top-2\\.5{top:calc(var(--spacing) * 2.5)}.top-3{top:calc(var(--spacing) * 3)}.right-0\\.5{right:calc(var(--spacing) * .5)}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.bottom-3{bottom:calc(var(--spacing) * 3)}.bottom-4{bottom:calc(var(--spacing) * 4)}.-left-2{left:calc(var(--spacing) * -2)}.left-1\\/2{left:50%}.left-\\[42px\\]{left:42px}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.m-0{margin:0}.m-2{margin:calc(var(--spacing) * 2)}.m-auto{margin:auto}.my-1{margin-block:var(--spacing)}.mt-0{margin-top:0}.mt-0\\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-\\[3px\\]{margin-top:3px}.ml-1{margin-left:var(--spacing)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.size-1\\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-full{width:100%;height:100%}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-11{height:calc(var(--spacing) * 11)}.h-auto{height:auto}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-\\[min\\(70vh\\,560px\\)\\]{max-height:min(70vh,560px)}.min-h-0{min-height:0}.w-4{width:calc(var(--spacing) * 4)}.w-40{width:calc(var(--spacing) * 40)}.w-80{width:calc(var(--spacing) * 80)}.w-\\[296px\\]{width:296px}.w-\\[320px\\]{width:320px}.w-\\[360px\\]{width:360px}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.max-w-72{max-width:calc(var(--spacing) * 72)}.max-w-80{max-width:calc(var(--spacing) * 80)}.max-w-\\[240px\\]{max-width:240px}.max-w-\\[296px\\]{max-width:296px}.max-w-\\[calc\\(100vw-24px\\)\\]{max-width:calc(100vw - 24px)}.min-w-0{min-width:0}.min-w-52{min-width:calc(var(--spacing) * 52)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-none\\!{cursor:none!important}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}.self-center{align-self:center}.self-end{align-self:flex-end}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:.25rem}.rounded-\\[2px\\]{border-radius:2px}.rounded-\\[6px\\]{border-radius:6px}.rounded-\\[8px\\]{border-radius:8px}.rounded-\\[12px\\]{border-radius:12px}.rounded-\\[14px\\]{border-radius:14px}.rounded-\\[18px\\]{border-radius:18px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.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-vc-comment{border-color:var(--vc-comment,#0d99ff)}.border-vc-comment\\!{border-color:var(--vc-comment,#0d99ff)!important}.border-vc-line,.border-vc-line\\/70{border-color:var(--vc-line,#d6d3d1)}@supports (color:color-mix(in lab, red, red)){.border-vc-line\\/70{border-color:color-mix(in oklab, var(--vc-line,#d6d3d1) 70%, transparent)}}.border-white\\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-t-transparent{border-top-color:#0000}.bg-\\[\\#d9d9d9\\]{background-color:#d9d9d9}.bg-black\\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\\/60{background-color:color-mix(in oklab, var(--color-black) 60%, transparent)}}.bg-current\\/15{background-color:currentColor}@supports (color:color-mix(in lab, red, red)){.bg-current\\/15{background-color:color-mix(in oklab, currentcolor 15%, transparent)}}.bg-transparent{background-color:#0000}.bg-vc-agent{background-color:var(--vc-agent,#292524)}.bg-vc-comment{background-color:var(--vc-comment,#0d99ff)}.bg-vc-comment-soft{background-color:var(--vc-comment-soft,#e5f4ff)}.bg-vc-ink{background-color:var(--vc-ink,#292524)}.bg-vc-island{background-color:var(--vc-island,#323232b8)}.bg-vc-surface{background-color:var(--vc-surface,#f5f5f4)}.bg-white{background-color:var(--color-white)}.bg-white\\/85{background-color:#ffffffd9}@supports (color:color-mix(in lab, red, red)){.bg-white\\/85{background-color:color-mix(in oklab, var(--color-white) 85%, transparent)}}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-5{padding:calc(var(--spacing) * 5)}.px-1{padding-inline:var(--spacing)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\\.5{padding-inline:calc(var(--spacing) * 3.5)}.py-0\\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-\\[3px\\]{padding-block:3px}.py-\\[5px\\]{padding-block:5px}.pt-1\\.5{padding-top:calc(var(--spacing) * 1.5)}.pr-0\\.5{padding-right:calc(var(--spacing) * .5)}.pr-1{padding-right:var(--spacing)}.pr-1\\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-\\[3px\\]{padding-right:3px}.pr-\\[5px\\]{padding-right:5px}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-2\\.5{padding-bottom:calc(var(--spacing) * 2.5)}.pl-0\\.5{padding-left:calc(var(--spacing) * .5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-3\\.5{padding-left:calc(var(--spacing) * 3.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.font-vc{font-family:var(--vc-font,var(--vc-font-default))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[13px\\]{font-size:13px}.text-\\[15px\\]{font-size:15px}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-\\[18px\\]{--tw-leading:18px;line-height:18px}.leading-none{--tw-leading:1;line-height:1}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\\[0\\.2em\\]{--tw-tracking:.2em;letter-spacing:.2em}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.text-red-600{color:var(--color-red-600)}.text-vc-accent{color:var(--vc-accent,#57534e)}.text-vc-comment{color:var(--vc-comment,#0d99ff)}.text-vc-ink{color:var(--vc-ink,#292524)}.text-vc-island-ink{color:var(--vc-island-ink,#fff)}.text-vc-muted{color:var(--vc-muted,#78716c)}.text-vc-working{color:var(--vc-working,var(--vc-comment,#0d99ff))}.text-white{color:var(--color-white)}.text-white\\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-white\\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-55{opacity:.55}.opacity-60{opacity:.6}.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-\\[0_1px_3px_rgb\\(0_0_0\\/0\\.12\\)\\]{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[0_1px_4px_rgb\\(0_0_0\\/0\\.3\\)\\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[0_1px_6px_rgb\\(0_0_0\\/0\\.16\\)\\]{--tw-shadow:0 1px 6px var(--tw-shadow-color,#00000029);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[0_2px_10px_rgb\\(0_0_0\\/0\\.2\\)\\]{--tw-shadow:0 2px 10px var(--tw-shadow-color,#0003);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[0_2px_14px_rgb\\(0_0_0\\/0\\.18\\)\\]{--tw-shadow:0 2px 14px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[0_4px_24px_rgb\\(0_0_0\\/0\\.22\\)\\]{--tw-shadow:0 4px 24px var(--tw-shadow-color,#00000038);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\\[0_8px_40px_rgb\\(0_0_0\\/0\\.28\\)\\]{--tw-shadow:0 8px 40px var(--tw-shadow-color,#00000047);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)}.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)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\\[1\\.5px\\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-vc-comment\\/30{--tw-ring-color:var(--vc-comment,#0d99ff)}@supports (color:color-mix(in lab, red, red)){.ring-vc-comment\\/30{--tw-ring-color:color-mix(in oklab, var(--vc-comment,#0d99ff) 30%, transparent)}}.ring-white{--tw-ring-color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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-\\[5px\\]{--tw-backdrop-blur:blur(5px);-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-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\\[grid-area\\:1\\/1\\]{grid-area:1/1}@media (hover:hover){.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\\:text-vc-muted\\/70::placeholder{color:var(--vc-muted,#78716c)}@supports (color:color-mix(in lab, red, red)){.placeholder\\:text-vc-muted\\/70::placeholder{color:color-mix(in oklab, var(--vc-muted,#78716c) 70%, transparent)}}.placeholder\\:text-vc-muted\\/80::placeholder{color:var(--vc-muted,#78716c)}@supports (color:color-mix(in lab, red, red)){.placeholder\\:text-vc-muted\\/80::placeholder{color:color-mix(in oklab, var(--vc-muted,#78716c) 80%, transparent)}}.backdrop\\:bg-black\\/30::backdrop{background-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.backdrop\\:bg-black\\/30::backdrop{background-color:color-mix(in oklab, var(--color-black) 30%, transparent)}}.focus-within\\:border-vc-comment:focus-within{border-color:var(--vc-comment,#0d99ff)}.focus-within\\:opacity-100:focus-within{opacity:1}.focus-within\\:ring-1:focus-within{--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)}.focus-within\\:ring-vc-comment:focus-within{--tw-ring-color:var(--vc-comment,#0d99ff)}@media (hover:hover){.hover\\:border-vc-line:hover{border-color:var(--vc-line,#d6d3d1)}.hover\\:bg-black\\/80:hover{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-black\\/80:hover{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.hover\\:bg-vc-surface:hover{background-color:var(--vc-surface,#f5f5f4)}.hover\\:bg-vc-wash:hover{background-color:var(--vc-wash,#e7e5e4)}.hover\\:bg-white\\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-white\\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\\:text-vc-ink:hover{color:var(--vc-ink,#292524)}.hover\\:text-white:hover{color:var(--color-white)}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:brightness-110:hover{--tw-brightness:brightness(110%);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,)}}.focus-visible\\:bg-vc-wash:focus-visible{background-color:var(--vc-wash,#e7e5e4)}.focus-visible\\:bg-white\\/10:focus-visible{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.focus-visible\\:bg-white\\/10:focus-visible{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.focus-visible\\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\\:outline-vc-comment:focus-visible{outline-color:var(--vc-comment,#0d99ff)}.has-\\[\\[aria-expanded\\=true\\]\\]\\:opacity-100:has([aria-expanded=true]){opacity:1}}:host{--vc-font-default:ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif}@keyframes spin{to{transform:rotate(360deg)}}";
+export const properties = "@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-tracking{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-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}";

package/dist/ui/styles.css

@@ -0,0 +1,113 @@
+/*
+  The comment UI's styles. They are compiled into a string and added to the
+  shadow roots the UI renders in, so the page's styles and these never mix.
+  Theme the UI from the page with the --vc-* custom properties, which inherit
+  into the shadow roots: --vc-comment, --vc-avatar, --vc-font and the rest.
+*/
+@import 'tailwindcss' source(none);
+@source './';
+
+:host {
+	--vc-font-default: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+@theme inline {
+	--font-vc: var(--vc-font, var(--vc-font-default));
+	--color-vc-ink: var(--vc-ink, #292524);
+	--color-vc-muted: var(--vc-muted, #78716c);
+	--color-vc-line: var(--vc-line, #d6d3d1);
+	--color-vc-wash: var(--vc-wash, #e7e5e4);
+	--color-vc-surface: var(--vc-surface, #f5f5f4);
+	--color-vc-accent: var(--vc-accent, #57534e);
+	--color-vc-avatar: var(--vc-avatar, #009aaa);
+	--color-vc-comment: var(--vc-comment, #0d99ff);
+	--color-vc-comment-soft: var(--vc-comment-soft, #e5f4ff);
+	--color-vc-island: var(--vc-island, rgb(50 50 50 / 0.72));
+	--color-vc-island-ink: var(--vc-island-ink, #fff);
+	--color-vc-island-hover: var(--vc-island-hover, rgb(255 255 255 / 0.14));
+	/* An agent's badge, and the pulse of a pin and an avatar while an agent works on it. */
+	--color-vc-agent: var(--vc-agent, #292524);
+	--color-vc-working: var(--vc-working, var(--vc-comment, #0d99ff));
+}
+
+@layer base {
+	:host {
+		font-family: var(--font-vc);
+		font-size: 13px;
+		line-height: 1.4;
+		color: var(--color-vc-ink);
+		-webkit-font-smoothing: antialiased;
+	}
+	/* The page hides its cursor in comment mode; the UI shows its own. */
+	.vc-ui {
+		cursor: auto !important;
+	}
+	.vc-ui button,
+	.vc-ui a,
+	.vc-ui [role='menuitem'] {
+		cursor: pointer;
+	}
+}
+
+@layer components {
+	.vc-tool {
+		display: inline-flex;
+		height: 1.75rem;
+		min-width: 1.75rem;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0.125rem;
+		outline: none;
+	}
+	.vc-tool:hover {
+		background: var(--color-vc-wash);
+	}
+	.vc-tool:focus-visible {
+		box-shadow: 0 0 0 2px var(--color-vc-accent);
+	}
+	/* The floating toolbar's tools: pill-shaped on a frosted pill. */
+	.vc-island-tool {
+		display: inline-flex;
+		height: 2rem;
+		min-width: 2rem;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		border-radius: 9999px;
+		color: var(--color-vc-island-ink);
+		outline: none;
+	}
+	.vc-island-tool:hover,
+	.vc-island-tool[aria-expanded='true'] {
+		background: var(--color-vc-island-hover);
+	}
+	.vc-island-tool[aria-pressed='true'] {
+		background: var(--color-vc-island-ink);
+		color: var(--color-vc-ink);
+	}
+	.vc-island-tool:focus-visible {
+		box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
+	}
+	/* The comment tool: a pin whose bottom-left point is the hotspot. */
+	.vc-comment-cursor {
+		cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 1.5a12.5 12.5 0 1 1 0 25H1.5V14A12.5 12.5 0 0 1 14 1.5z' fill='white' stroke='%231c1917' stroke-width='1.5'/%3E%3Cpath d='M14 9v10M9 14h10' stroke='%231c1917' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 1 27, crosshair;
+	}
+	/* Something is being worked on: a ring that pulses out of the element's edge. */
+	.vc-working {
+		animation: vc-working 1.6s ease-out infinite;
+	}
+	@keyframes vc-working {
+		from {
+			box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-vc-working) 70%, transparent);
+		}
+		to {
+			box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-vc-working) 0%, transparent);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.vc-working {
+			animation: none;
+			box-shadow: 0 0 0 2px var(--color-vc-working);
+		}
+	}
+}

package/dist/ui/text.d.ts

@@ -0,0 +1,5 @@
+import type { Author, Comment } from '../shared/types.js';
+/** A comment's text for previews, or what it holds when it is only images. */
+export declare function commentText(comment: Comment): string;
+/** Who someone is, saying who added them when they are an agent. */
+export declare function authorLabel(author: Author): string;

package/dist/ui/text.js

@@ -0,0 +1,11 @@
+/** A comment's text for previews, or what it holds when it is only images. */
+export function commentText(comment) {
+    if (comment.body)
+        return comment.body;
+    const count = comment.images?.length ?? 0;
+    return count === 1 ? 'Image' : `${count} images`;
+}
+/** Who someone is, saying who added them when they are an agent. */
+export function authorLabel(author) {
+    return author.agent ? `${author.name} · added by ${author.agent.addedBy.name}` : author.name;
+}

package/dist/visual-comments.svelte.d.ts

@@ -0,0 +1,230 @@
+import { type Aim } from './core/aim.js';
+import { Api } from './core/api.js';
+import { type Rect, type Surface } from './core/surfaces.js';
+import { type CommentTarget } from './core/target.js';
+import { Threads } from './core/threads.svelte.js';
+import type { CommentImage, CommentThread, Participant, Viewer } from './shared/types.js';
+export interface VisualCommentsOptions {
+    /** Where the site's server passes comment requests on to the comment server. Default `/_comments`. */
+    endpoint?: string;
+    /**
+     * The site's sign-in: the path of its routes, as in `@cnvx/sign-in`
+     * (default `/auth`), or functions that sign in and out.
+     */
+    auth?: string | {
+        signIn(): void;
+        signOut(): void;
+    };
+    /**
+     * Who is signed in, when the page knows it already (null: nobody), so the
+     * account shows before the server answers. Default: ask the server.
+     */
+    viewer?: Viewer | null;
+    /**
+     * The page threads belong to. Default: the address's origin and path, so
+     * the query and fragment do not matter. A fixed string makes every page share threads.
+     */
+    page?: string | ((url: URL) => string);
+    /** What to store about where a thread is placed, besides the viewport size and `data-vc-context`. */
+    context?: (surface: SurfaceInfo) => Record<string, string | number | undefined> | undefined;
+    /**
+     * Brings a thread's surface into view when it is opened from the list or a
+     * link, e.g. by zooming a canvas to it or navigating to it. Return true when
+     * handled; otherwise threads on other pages are opened by navigating to them.
+     */
+    show?: (thread: CommentThread) => boolean | void;
+    /**
+     * Goes to a thread on another page, at its `link`, when `show` did not
+     * handle it. Default: `location.assign`, which loads the page anew. An app
+     * with its own router navigates in it instead; the thread stays open and
+     * shows once its page is there.
+     */
+    navigate?: (url: string, thread: CommentThread) => void;
+    /** The address that opens a thread. Default: where it was placed, with `#vc=<id>`. */
+    link?: (thread: CommentThread) => string;
+    /** A surface's title and place in the list, for surfaces not on screen. */
+    describe?: (surface: string) => {
+        title?: string;
+        order?: number;
+    } | undefined;
+    /** A frame surface's document, when the default (any same-origin frame once loaded) is not right. */
+    documentOf?: (surface: Element, frame: HTMLIFrameElement) => Document | undefined;
+    /** The key that turns comment mode on and off. Default: `c`. */
+    shortcut?: string | false;
+    /** Show the floating toolbar. Default: unless the page has a `[data-vc-toggle]` button. */
+    toolbar?: boolean;
+}
+export interface SurfaceInfo {
+    id: string;
+    title: string;
+    element: Element | null;
+}
+/** Where the viewer is, as the host knows it. Others see it on the viewer's `Participant`. */
+export interface PresenceLocation {
+    /** Default: the page key. */
+    page?: string;
+    /** The surface on screen or selected, e.g. a frame's id. */
+    surface?: string;
+}
+export interface CommentFilters {
+    query: string;
+    sort: 'date' | 'place';
+    showResolved: boolean;
+    onlyMine: boolean;
+    /** Threads on every page, not only this one. */
+    allPages: boolean;
+}
+/** A new comment being written. */
+export interface Draft extends Aim {
+    text: string;
+    /** Narrower targets the pin was widened from, innermost first. */
+    inner?: CommentTarget[];
+    /** Images added so far, so a click elsewhere keeps them like text. */
+    images?: number;
+}
+interface Pointer {
+    x: number;
+    y: number;
+    alt: boolean;
+}
+/**
+ * Comments on a page: pins, the comment mode, the list of threads and the
+ * sign-in, drawn in a shadow root over the page. One per page.
+ */
+export declare class VisualComments {
+    readonly api: Api;
+    readonly store: Threads;
+    options: VisualCommentsOptions;
+    /** Comment mode: clicking a surface starts a thread. Pins always show. */
+    active: boolean;
+    /** Hide the list while keeping comment mode active. */
+    panelCollapsed: boolean;
+    /** The thread whose conversation is open. */
+    openId: number | undefined;
+    draft: Draft | undefined;
+    filters: CommentFilters;
+    /** Measured on every change of the page. */
+    surfaces: Surface[];
+    /** Bumped whenever anything on the page may have moved. */
+    layout: number;
+    page: string;
+    /** Where the host asked for the list to go. */
+    panelRect: Rect | undefined;
+    hostToggles: boolean;
+    /** Where a click would start a thread, while it would. */
+    aim: Aim | undefined;
+    /** The pointer while it is over a surface in comment mode: the comment cursor is drawn there. */
+    cursor: {
+        x: number;
+        y: number;
+    } | undefined;
+    /** Opening a thread scrolls its element into view once it is found. */
+    revealing: number | undefined;
+    /** An agent's request to join, from `#vc-connect=<id>`, while the dialog to approve it is shown. */
+    connecting: string | undefined;
+    /** The reply field of the open thread is being written in. */
+    typing: boolean;
+    /** Where the host says the viewer is, for others to see. */
+    private whereabouts;
+    readonly doc: Document;
+    readonly host: HTMLElement;
+    private app?;
+    private slots;
+    private frames;
+    private cleanup;
+    private pointer?;
+    private pressed?;
+    private measuring;
+    private aiming;
+    private animating;
+    private cursorSheet;
+    private focusDraftHandler?;
+    private linked?;
+    private typingTimer?;
+    private presenceTimer?;
+    constructor(options: VisualCommentsOptions, doc?: Document);
+    get viewer(): Viewer | null;
+    get threads(): CommentThread[];
+    get unreadCount(): number;
+    get loading(): boolean;
+    get open(): CommentThread | undefined;
+    /** Everyone present in the space: people's tabs, this one included, and agents' tasks. Empty when signed out. */
+    get participants(): Participant[];
+    /** This tab's connection to the server's event stream, as in `Participant.id`, while it is open. */
+    get connection(): string | undefined;
+    /** What this tab tells others: the host's location, the open thread, and whether its reply is being written. */
+    private get ownPresence();
+    /** Threads shown as pins: on this page, unresolved unless resolved ones are shown or it is open. */
+    get pinned(): CommentThread[];
+    get showToolbar(): boolean;
+    surface(id: string): Surface | undefined;
+    /** A surface's title for the list, whether or not it is on screen. */
+    titleOf(thread: CommentThread): string;
+    orderOf(thread: CommentThread): number;
+    linkOf(thread: CommentThread): string;
+    imageUrl(image: CommentImage): string;
+    /** Whether an element belongs to the comment UI. */
+    readonly ours: (element: Element) => boolean;
+    /** Changes options after creation, e.g. when a host's view mounts and can show threads. */
+    configure(options: Partial<VisualCommentsOptions>): void;
+    toggle(on?: boolean): void;
+    openThread(id: number | undefined): void;
+    /** Opens a thread from the list or a link, bringing it into view. */
+    focus(thread: CommentThread): void;
+    /** The thread's element, once found, scrolled into view inside its document. */
+    revealElement(element: Element): void;
+    /**
+     * Tells others where the viewer is: the page, by default the page key, and
+     * the surface, e.g. the frame on screen. Each call replaces the last.
+     */
+    setPresence(update: PresenceLocation): void;
+    /** Called by the UI as the viewer writes in the open thread; they stop typing 5 seconds after the last key. */
+    noteTyping(): void;
+    stopTyping(): void;
+    /** Closes the dialog for an agent's request and takes it out of the address. */
+    endConnect(): void;
+    /** Leaves for the site's sign-in, and comes back to this address. */
+    signIn(): void;
+    signOut(): void;
+    /** Measures the page again, e.g. after the host moved surfaces in a way it cannot see. */
+    relayout(): void;
+    /** For hosts that are not built with Svelte: called after any change of state. */
+    subscribe(listener: (comments: VisualComments) => void): () => void;
+    destroy(): void;
+    /** Called by the UI so a click elsewhere can bring the unsent comment back to attention. */
+    onFocusDraft(handler: (() => void) | undefined): void;
+    private get draftHasContent();
+    private start;
+    /** Watches a frame's own document: its scrolling, its changes and its keys. */
+    private watchFrame;
+    private schedule;
+    private measure;
+    /** Puts the account button in every `[data-vc-account]` element of the host's own toolbar. */
+    private mountSlots;
+    private fromUs;
+    private surfaceAt;
+    /** The pointer moved, or left (undefined). Also called by the layers over frames. */
+    move(pointer: Pointer | undefined): void;
+    private onPointerMove;
+    /** Aims again, at most once per frame: the pointer moved, or the page moved under it. */
+    private updateAim;
+    /** Over a surface in comment mode the page's cursor is hidden; the comment cursor is drawn instead. */
+    private updateCursorStyle;
+    /** Pressing on a surface in comment mode does not reach the page, unless the host keeps its gestures there. */
+    private onPress;
+    private onRelease;
+    private onOtherClick;
+    private onClick;
+    /** A click on a surface in comment mode starts a thread. A click away from an open thread closes it first. */
+    place(surface: Surface, x: number, y: number, free: boolean): void;
+    /** A layer over a frame passes wheel turns to whatever scrolls under the pointer. */
+    wheel(surface: Surface, event: WheelEvent): void;
+    private onKey;
+    /** Escape drops the new comment, else closes the open thread, else leaves comment mode. */
+    private onEscape;
+    /** Whether a key is the comments' to act on: not typed into a field, nor into the dialog to approve an agent. */
+    private ownsKey;
+}
+/** The page key: the address's origin and path, without a trailing slash. */
+export declare function pageOf(option: VisualCommentsOptions['page']): string;
+export {};