visual-comments 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,10 @@
+import type { CommentThread } from '../shared/types.js';
+type $$ComponentProps = {
+    onselect: (thread: CommentThread) => void;
+    onclose: () => void;
+    class?: string;
+    style?: string;
+};
+declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/ui/Pin.svelte

@@ -0,0 +1,136 @@
+<svelte:options css="injected" />
+
+<!--
+  A thread's marker. Its bottom-left point sits on the spot that was clicked.
+  On hover it grows from that point into a preview of the first comment. It
+  pops out of that point when it appears (loaded, added, scrolled into view)
+  and shrinks back into it when it goes.
+-->
+<script lang="ts" module>
+	import { backOut, cubicIn } from 'svelte/easing';
+
+	/** Scales from the pin's point (its bottom-left corner), keeping its lift above it. */
+	function pop(_node: Element, { duration, easing }: { duration: number; easing: (t: number) => number }) {
+		const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+		return {
+			duration: still ? 0 : duration,
+			easing,
+			css: (t: number) =>
+				`transform-origin: 0 100%; transform: translateY(-100%) scale(${0.2 + 0.8 * t}); opacity: ${Math.min(1, t * 2)}`
+		};
+	}
+</script>
+
+<script lang="ts">
+	import Avatar from './Avatar.svelte';
+	import { commentText } from './text.js';
+	import { ago } from '../core/time.js';
+	import type { CommentThread } from '../shared/types.js';
+
+	let { thread, left, top, open, now, onopen }: {
+		thread: CommentThread;
+		/** The pin's point, in client pixels. */
+		left: number;
+		top: number;
+		open: boolean;
+		now: number;
+		onopen: () => void;
+	} = $props();
+
+	const SIZE = 32;
+	const root = $derived(thread.comments[0]);
+	const text = $derived(commentText(root));
+	const replies = $derived(thread.comments.length - 1);
+
+	let hovered = $state(false);
+	let focused = $state(false);
+	let textWidth = $state(0);
+	let textHeight = $state(0);
+	const expanded = $derived((hovered || focused) && !open && textWidth > 0);
+</script>
+
+<button
+	type="button"
+	data-vc-ui
+	class={[
+		'vc-pin pointer-events-auto absolute block overflow-hidden bg-white text-left outline-none',
+		expanded ? 'z-30' : open ? 'z-20' : 'z-10',
+		thread.resolvedAt && !expanded && !open && 'opacity-60',
+		expanded && 'vc-pin-expanded'
+	]}
+	style:left="{left}px"
+	style:top="{top}px"
+	style:width="{expanded ? textWidth + 54 : SIZE}px"
+	style:height="{expanded ? Math.max(44, textHeight + 20) : SIZE}px"
+	style:border-radius={expanded ? '18px 18px 18px 4px' : `${SIZE / 2}px ${SIZE / 2}px ${SIZE / 2}px 0`}
+	style:box-shadow={open
+		? '0 0 0 2px var(--color-vc-comment), 0 2px 8px rgb(0 0 0 / 0.25)'
+		: expanded
+			? '0 4px 18px rgb(0 0 0 / 0.22)'
+			: '0 1px 4px rgb(0 0 0 / 0.3)'}
+	aria-label="Comment #{thread.id} by {root.author.name}: {text}"
+	aria-expanded={open}
+	in:pop={{ duration: 240, easing: backOut }}
+	out:pop={{ duration: 140, easing: cubicIn }}
+	onpointerenter={() => (hovered = true)}
+	onpointerleave={() => (hovered = false)}
+	onfocus={() => (focused = true)}
+	onblur={() => (focused = false)}
+	onclick={onopen}
+>
+	<Avatar
+		user={root.author}
+		size={24}
+		class="vc-pin-avatar absolute"
+	/>
+	<span
+		class="vc-pin-text absolute top-2.5 left-[42px] block w-max max-w-[240px] text-[13px] leading-[18px] text-vc-ink"
+		style:opacity={expanded ? 1 : 0}
+		bind:offsetWidth={textWidth}
+		bind:offsetHeight={textHeight}
+		aria-hidden="true"
+	>
+		<span class="block truncate whitespace-nowrap">
+			<span class="font-medium">{root.author.name}</span>
+			<span class="ml-1 text-vc-muted">{ago(root.createdAt, now)}</span>
+		</span>
+		<span class="line-clamp-2 block break-words whitespace-pre-line">{text}</span>
+		{#if replies > 0}
+			<span class="mt-0.5 block text-xs text-vc-muted">{replies} {replies === 1 ? 'reply' : 'replies'}</span>
+		{/if}
+	</span>
+	{#if thread.unread}
+		<span class="absolute top-0.5 right-0.5 size-2.5 rounded-full bg-vc-comment ring-2 ring-white"></span>
+	{/if}
+</button>
+
+<style>
+	.vc-pin {
+		transform: translateY(-100%);
+		transition:
+			width 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
+			height 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
+			border-radius 220ms ease,
+			box-shadow 160ms ease,
+			opacity 160ms ease;
+	}
+	.vc-pin :global(.vc-pin-avatar) {
+		top: 4px;
+		left: 4px;
+		transition: top 220ms cubic-bezier(0.2, 0.9, 0.3, 1), left 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
+	}
+	.vc-pin-expanded :global(.vc-pin-avatar) {
+		top: 10px;
+		left: 10px;
+	}
+	.vc-pin-text {
+		transition: opacity 140ms ease 60ms;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.vc-pin,
+		.vc-pin :global(.vc-pin-avatar),
+		.vc-pin-text {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { CommentThread } from '../shared/types.js';
+type $$ComponentProps = {
+    thread: CommentThread;
+    /** The pin's point, in client pixels. */
+    left: number;
+    top: number;
+    open: boolean;
+    now: number;
+    onopen: () => void;
+};
+declare const Pin: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pin = ReturnType<typeof Pin>;
+export default Pin;

package/dist/ui/ThreadCard.svelte

@@ -0,0 +1,177 @@
+<!-- An open thread: its comments, a reply field, and resolve and delete actions. -->
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { useComments } from './context.js';
+	import type { CommentThread } from '../shared/types.js';
+	import Avatar from './Avatar.svelte';
+	import Composer from './Composer.svelte';
+	import Icon from './Icon.svelte';
+	import Menu from './Menu.svelte';
+	import MenuItem from './MenuItem.svelte';
+	import { ago, fullDate } from '../core/time.js';
+
+	let { thread, title, link, maxHeight, onclose }: {
+		thread: CommentThread;
+		/** Where it is: its surface's or page's title. */
+		title: string;
+		/** Absolute URL that opens this thread. */
+		link?: string;
+		maxHeight: number;
+		onclose: () => void;
+	} = $props();
+
+	const vc = useComments();
+	const comments = vc.store;
+	const viewer = $derived(vc.viewer);
+	const details = $derived(Object.entries(thread.context).map(([key, value]) => `${key}: ${value}`).join('\n'));
+	const isAuthor = $derived(thread.comments[0]?.author.sub === viewer?.sub);
+	let editing = $state<number>();
+	let list = $state<HTMLOListElement>();
+
+	// Follow the conversation to its newest comment.
+	$effect(() => {
+		void thread.comments.length;
+		void tick().then(() => list?.scrollTo({ top: list.scrollHeight }));
+	});
+
+	async function remove(commentId: number, first: boolean) {
+		if (first && !confirm('Delete this thread and all its replies?')) return;
+		await comments.removeComment(commentId);
+	}
+
+	function copyLink() {
+		if (link) void navigator.clipboard?.writeText(link);
+	}
+</script>
+
+<div
+	data-vc-ui
+	role="dialog"
+	aria-label="Comment #{thread.id}"
+	class="pointer-events-auto flex w-[320px] cursor-default flex-col overflow-hidden rounded-[12px] bg-white text-[13px] text-vc-ink shadow-[0_4px_24px_rgb(0_0_0/0.22)]"
+	style:max-height="{maxHeight}px"
+>
+	<header class="flex h-11 shrink-0 items-center gap-0.5 border-b border-vc-line/70 pr-1.5 pl-3.5">
+		<p class="min-w-0 flex-1 truncate text-vc-muted" title={details || undefined}>#{thread.id} · {title}</p>
+		{#if viewer}
+			<Menu label="Thread options" align="end" class="vc-tool-light size-7 rounded-full">
+				{#snippet trigger()}<Icon name="more" />{/snippet}
+				{#snippet children(close)}
+					<MenuItem onselect={() => { close(); void comments.markRead(thread.id, false); onclose(); }}>Mark as unread</MenuItem>
+					{#if link}<MenuItem onselect={() => { close(); copyLink(); }}>Copy link</MenuItem>{/if}
+					{#if isAuthor}
+						<MenuItem onselect={() => { close(); void remove(thread.comments[0].id, true); }}>Delete thread…</MenuItem>
+					{/if}
+				{/snippet}
+			</Menu>
+			<button
+				type="button"
+				class={['vc-tool-light size-7 rounded-full', thread.resolvedAt && 'text-vc-comment']}
+				aria-pressed={Boolean(thread.resolvedAt)}
+				title={thread.resolvedAt ? 'Reopen' : 'Resolve'}
+				aria-label={thread.resolvedAt ? 'Reopen' : 'Resolve'}
+				onclick={() => {
+					const resolving = !thread.resolvedAt;
+					void comments.resolve(thread.id, resolving);
+					if (resolving) onclose();
+				}}
+			>
+				<Icon name="resolve" size={18} />
+			</button>
+		{/if}
+		<button type="button" class="vc-tool-light size-7 rounded-full" title="Close (Esc)" aria-label="Close" onclick={onclose}>
+			<Icon name="close" />
+		</button>
+	</header>
+
+	{#if thread.resolvedAt}
+		<p class="shrink-0 border-b border-vc-line/70 bg-vc-comment-soft px-3.5 py-1.5 text-xs text-vc-ink">
+			Resolved{thread.resolvedBy ? ` by ${thread.resolvedBy.name}` : ''}, {ago(thread.resolvedAt, comments.now)}
+		</p>
+	{/if}
+
+	<ol bind:this={list} data-vc-scroll class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3.5 py-1">
+		{#each thread.comments as comment, index (comment.id)}
+			{@const own = comment.author.sub === viewer?.sub}
+			<li class={['group flex gap-2.5 py-2.5', comment.pending && 'opacity-60']}>
+				<Avatar user={comment.author} size={24} />
+				<div class="min-w-0 flex-1">
+					<div class="flex h-6 items-center gap-1.5">
+						<p class="min-w-0 truncate">
+							<span class="font-medium">{comment.author.name}</span>
+							<time class="ml-1 text-vc-muted" datetime={new Date(comment.createdAt).toISOString()} title={fullDate(comment.createdAt)}>
+								{comment.pending ? 'sending…' : ago(comment.createdAt, comments.now)}
+							</time>
+							{#if comment.editedAt}<span class="text-vc-muted" title={fullDate(comment.editedAt)}> · edited</span>{/if}
+						</p>
+						{#if own && !comment.pending && editing !== comment.id}
+							<div class="ml-auto opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100">
+								<Menu label="Comment options" align="end" class="vc-tool-light size-6 rounded-full">
+									{#snippet trigger()}<Icon name="more" size={14} />{/snippet}
+									{#snippet children(close)}
+										<MenuItem onselect={() => { close(); editing = comment.id; }}>Edit</MenuItem>
+										<MenuItem onselect={() => { close(); void remove(comment.id, index === 0); }}>
+											{index === 0 ? 'Delete thread…' : 'Delete'}
+										</MenuItem>
+									{/snippet}
+								</Menu>
+							</div>
+						{/if}
+					</div>
+					{#if editing === comment.id}
+						<div class="mt-1">
+							<Composer
+								variant="edit"
+								placeholder="Edit comment"
+								initial={comment.body}
+								initialImages={comment.images}
+								autofocus
+								onsubmit={async (body, images) => {
+									await comments.edit(comment.id, body, images);
+									editing = undefined;
+								}}
+								oncancel={() => (editing = undefined)}
+							/>
+						</div>
+					{:else}
+						{#if comment.body}<p class="break-words whitespace-pre-wrap">{comment.body}</p>{/if}
+						{#if comment.images.length}
+							{@const several = comment.images.length > 1}
+							<div class={['mt-1.5 grid gap-1.5', several && 'grid-cols-2']}>
+								{#each comment.images as image, i (image.id)}
+									<a
+										href={comments.imageUrl(image)}
+										target="_blank"
+										rel="noopener"
+										title="Open full size"
+										class="block overflow-hidden rounded-lg border border-vc-line/70 bg-vc-surface hover:border-vc-line"
+									>
+										<img
+											src={comments.imageUrl(image)}
+											alt="Image {i + 1}"
+											width={image.width}
+											height={image.height}
+											loading="lazy"
+											class={['block w-full', several ? 'aspect-square object-cover' : 'h-auto max-h-64 object-contain']}
+										/>
+									</a>
+								{/each}
+							</div>
+						{/if}
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ol>
+
+	{#if viewer}
+		<footer class="flex shrink-0 items-start gap-2.5 border-t border-vc-line/70 px-3.5 py-3">
+			<Avatar user={viewer} size={24} class="mt-[3px]" />
+			<div class="min-w-0 flex-1">
+				{#key thread.id}
+					<Composer placeholder="Reply" autofocus onsubmit={(body, images) => comments.reply(thread.id, body, images)} oncancel={onclose} />
+				{/key}
+			</div>
+		</footer>
+	{/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { CommentThread } from '../shared/types.js';
+type $$ComponentProps = {
+    thread: CommentThread;
+    /** Where it is: its surface's or page's title. */
+    title: string;
+    /** Absolute URL that opens this thread. */
+    link?: string;
+    maxHeight: number;
+    onclose: () => void;
+};
+declare const ThreadCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThreadCard = ReturnType<typeof ThreadCard>;
+export default ThreadCard;

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-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);--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)}}@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}}@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-\[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-80{width:calc(var(--spacing) * 80)}.w-\[296px\]{width:296px}.w-\[320px\]{width:320px}.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}.gap-0\.5{gap:calc(var(--spacing) * .5)}.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-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}.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-transparent{background-color:#0000}.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)}.px-1{padding-inline:var(--spacing)}.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\.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-vc{font-family:var(--vc-font,var(--vc-font-default))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[13px\]{font-size:13px}.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)}.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-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-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-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-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}@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)}}.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-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-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-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);--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)}}@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}}@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-\\[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-80{width:calc(var(--spacing) * 80)}.w-\\[296px\\]{width:296px}.w-\\[320px\\]{width:320px}.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}.gap-0\\.5{gap:calc(var(--spacing) * .5)}.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-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}.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-transparent{background-color:#0000}.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)}.px-1{padding-inline:var(--spacing)}.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\\.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-vc{font-family:var(--vc-font,var(--vc-font-default))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.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)}.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-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-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-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-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}@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)}}.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-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-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,92 @@
+/*
+  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));
+}
+
+@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;
+	}
+}