sheer-ui 0.0.0

package/src/lib/components/item/item.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { declareVariants, type VariantProps } from 'overrule';
+
+	export const itemVariants = declareVariants({
+		base: '[a]:hover:bg-muted rounded-md border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-3 [a]:transition-colors',
+		variants: {
+			variant: {
+				default: 'border-transparent',
+				outline: 'border-border',
+				muted: 'bg-muted/50 border-transparent',
+			},
+			size: {
+				default: 'gap-3.5 px-4 py-3.5',
+				sm: 'gap-2.5 px-3 py-2.5',
+				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	});
+
+	export type ItemSize = VariantProps<typeof itemVariants>['size'];
+	export type ItemVariant = VariantProps<typeof itemVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		variant,
+		size,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		variant?: ItemVariant;
+		size?: ItemSize;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: itemVariants({ variant, size, class: className }),
+		'data-slot': 'item',
+		'data-variant': variant,
+		'data-size': size,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/src/lib/components/kbd/index.ts

@@ -0,0 +1,10 @@
+import Root from './kbd.svelte';
+import Group from './kbd-group.svelte';
+
+export {
+	Root,
+	Group,
+	//
+	Root as Kbd,
+	Group as KbdGroup,
+};

package/src/lib/components/kbd/kbd-group.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd bind:this={ref} data-slot="kbd-group" class={join('gap-1 inline-flex items-center', className)} {...restProps}>
+	{@render children?.()}
+</kbd>

package/src/lib/components/kbd/kbd.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={join(
+		"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</kbd>

package/src/lib/components/label/exports.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./label.svelte";
+export type { LabelRootProps as RootProps } from "./types.js";

package/src/lib/components/label/index.ts

@@ -0,0 +1,2 @@
+export * as Label from "./exports.js";
+export * from "./exports.js";

package/src/lib/components/label/label.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { boxWith } from '../../internal/tools/index.js';
+	import { mergeProps } from '../../internal/merge-props.js';
+	import type { LabelRootProps } from './types.js';
+	import { LabelRootState } from './label.svelte.js';
+	import { createId } from '../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, id = createId(uid), ref = $bindable(null), for: forProp, ...restProps }: LabelRootProps = $props();
+
+	const rootState = LabelRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'label',
+				class:
+					'flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+			},
+			restProps,
+			rootState.props,
+			{ for: forProp },
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<label {...mergedProps} for={forProp}>
+		{@render children?.()}
+	</label>
+{/if}

package/src/lib/components/label/label.svelte.ts

@@ -0,0 +1,39 @@
+import { attachRef } from '../../internal/tools/index.js';
+import type { BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import { createBitsAttrs } from "../../internal/attrs.js";
+
+const labelAttrs = createBitsAttrs({
+	component: "label",
+	parts: ["root"],
+});
+
+interface LabelRootStateOpts extends WithRefOpts {}
+
+export class LabelRootState {
+	static create(opts: LabelRootStateOpts) {
+		return new LabelRootState(opts);
+	}
+
+	readonly opts: LabelRootStateOpts;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: LabelRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+		this.onmousedown = this.onmousedown.bind(this);
+	}
+
+	onmousedown(e: BitsMouseEvent) {
+		if (e.detail > 1) e.preventDefault();
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[labelAttrs.root]: "",
+				onmousedown: this.onmousedown,
+				...this.attachment,
+			}) as const
+	);
+}

package/src/lib/components/label/types.ts

@@ -0,0 +1,7 @@
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveLabelAttributes } from "../../internal/attribute-types.js";
+
+export type LabelRootPropsWithoutHTML = WithChild;
+
+export type LabelRootProps = LabelRootPropsWithoutHTML &
+	Without<BitsPrimitiveLabelAttributes, LabelRootPropsWithoutHTML>;

package/src/lib/components/link-preview/components/link-preview-content.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { LinkPreviewContentProps } from '../types.js';
+	import { LinkPreviewContentState } from '../link-preview.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { useNativePopoverLifecycle } from '../../../internal/native-popover.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		side = 'top',
+		align = 'center',
+		onInteractOutside = () => {},
+		onEscapeKeydown = () => {},
+		style,
+		// Floating-UI-only props kept for API compatibility; native positioning ignores them
+		// (sideOffset, alignOffset, avoidCollisions, collisionPadding, arrowPadding, dir, customAnchor,
+		//  forceMount).
+		...restProps
+	}: LinkPreviewContentProps = $props();
+
+	const contentState = LinkPreviewContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+	});
+
+	const lifecycleProps = useNativePopoverLifecycle(contentState);
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'hover-card-content',
+				class:
+					'bg-popover text-popover-foreground z-50 w-64 rounded-md border p-4 shadow-md outline-none transition-[opacity,scale,translate,display,overlay] transition-discrete opacity-0 scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-95',
+			},
+			restProps,
+			contentState.props,
+			{ style },
+			lifecycleProps,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...contentState.snippetProps })}
+{:else}
+	<div {...mergedProps} bind:this={ref} data-side={side} data-align={align}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/link-preview/components/link-preview-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { LinkPreviewTriggerProps } from '../types.js';
+	import { LinkPreviewTriggerState } from '../link-preview.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { ref = $bindable(null), id = createId(uid), child, children, ...restProps }: LinkPreviewTriggerProps = $props();
+
+	const triggerState = LinkPreviewTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps({ 'data-slot': 'hover-card-trigger' }, restProps, triggerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}

package/src/lib/components/link-preview/components/link-preview.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { OpenCell } from '../../../internal/open-cell.svelte.js';
+	import type { LinkPreviewRootProps } from '../types.js';
+	import { LinkPreviewRootState } from '../link-preview.svelte.js';
+
+	let {
+		disabled = false,
+		open = false,
+		state: givenCell,
+		onOpenChangeComplete = () => {},
+		openDelay = 700,
+		closeDelay = 300,
+		children,
+	}: LinkPreviewRootProps = $props();
+
+	// Cell over the source prop; the engine keeps its boxed-open interface (vendored,
+	// ADR 0006) — the box is a bridge over the cell, so the cell owns `open`.
+	// svelte-ignore state_referenced_locally
+	const cell = givenCell ?? new OpenCell(() => open);
+
+	LinkPreviewRootState.create({
+		disabled: boxWith(() => disabled),
+		open: boxWith(
+			() => cell.open,
+			(v) => (cell.open = v),
+		),
+		openDelay: boxWith(() => openDelay),
+		closeDelay: boxWith(() => closeDelay),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+{@render children?.(cell)}

package/src/lib/components/link-preview/exports.ts

@@ -0,0 +1,11 @@
+export { default as Root } from "./components/link-preview.svelte";
+export { default as Content } from "./components/link-preview-content.svelte";
+export { default as Trigger } from "./components/link-preview-trigger.svelte";
+export { default as Portal } from "../../internal/portal/portal.svelte";
+
+export type {
+	LinkPreviewRootProps as RootProps,
+	LinkPreviewContentProps as ContentProps,
+	LinkPreviewTriggerProps as TriggerProps,
+	LinkPreviewPortalProps as PortalProps,
+} from "./types.js";

package/src/lib/components/link-preview/index.ts

@@ -0,0 +1,2 @@
+export * as LinkPreview from './exports.js';
+export * from './exports.js';

package/src/lib/components/link-preview/link-preview.svelte.ts

@@ -0,0 +1,270 @@
+import { attachRef, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { on } from 'svelte/events';
+import { createContext, onDestroy, untrack } from 'svelte';
+import { createBitsAttrs, boolToStr, getDataOpenClosed } from '../../internal/attrs.js';
+import { isElement } from '../../internal/tools/utils/dom.js';
+import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { getTabbableCandidates } from '../../internal/tabbable.js';
+import { SafePolygon } from '../../internal/safe-polygon.svelte.js';
+import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
+
+const linkPreviewAttrs = createBitsAttrs({
+	component: 'link-preview',
+	parts: ['content', 'trigger'],
+});
+
+const [getLinkPreviewRoot, setLinkPreviewRoot] = createContext<LinkPreviewRootState>();
+
+interface LinkPreviewRootStateOpts
+	extends
+		WritableBoxedValues<{
+			open: boolean;
+		}>,
+		ReadableBoxedValues<{
+			disabled: boolean;
+			openDelay: number;
+			closeDelay: number;
+			onOpenChangeComplete: OnChangeFn<boolean>;
+		}> {}
+
+export class LinkPreviewRootState {
+	static create(opts: LinkPreviewRootStateOpts) {
+		return setLinkPreviewRoot(new LinkPreviewRootState(opts));
+	}
+
+	readonly opts: LinkPreviewRootStateOpts;
+
+	hasSelection = $state(false);
+	isPointerDownOnContent = $state(false);
+	containsSelection = $state(false);
+	contentNode = $state<HTMLElement | null>(null);
+	triggerNode = $state<HTMLElement | null>(null);
+	domContext: DOMContext = new DOMContext(() => null);
+	#openTimer = createEffectTimeout(() => {
+		this.opts.open.current = true;
+	}, () => this.opts.openDelay.current);
+	#closeTimer = createEffectTimeout(() => {
+		this.opts.open.current = false;
+	}, () => this.opts.closeDelay.current);
+
+	constructor(opts: LinkPreviewRootStateOpts) {
+		this.opts = opts;
+
+		$effect(() => {
+			const isOpen = this.opts.open.current;
+			return untrack(() => {
+				if (!isOpen) {
+					this.hasSelection = false;
+					return;
+				}
+				if (!this.domContext) return;
+
+				const handlePointerUp = () => {
+					this.containsSelection = false;
+					this.isPointerDownOnContent = false;
+
+					setTimeout(() => {
+						const isSelection = this.domContext.getDocument().getSelection()?.toString() !== '';
+
+						if (isSelection) {
+							this.hasSelection = true;
+						} else {
+							this.hasSelection = false;
+						}
+					}, 1);
+				};
+
+				const unsubListener = on(this.domContext.getDocument(), 'pointerup', handlePointerUp);
+
+				if (!this.contentNode) return;
+				const tabCandidates = getTabbableCandidates(this.contentNode);
+
+				for (const candidate of tabCandidates) {
+					candidate.setAttribute('tabindex', '-1');
+				}
+
+				return () => {
+					unsubListener();
+					this.hasSelection = false;
+					this.isPointerDownOnContent = false;
+				};
+			});
+		});
+	}
+
+	clearTimeout() {
+		this.#openTimer.stop();
+		this.#closeTimer.stop();
+	}
+
+	handleOpen() {
+		this.clearTimeout();
+		if (this.opts.open.current || this.opts.disabled.current) return;
+		this.#openTimer.start();
+	}
+
+	immediateClose() {
+		this.clearTimeout();
+		this.opts.open.current = false;
+	}
+
+	handleClose() {
+		this.clearTimeout();
+
+		if (!this.isPointerDownOnContent && !this.hasSelection) {
+			this.#closeTimer.start();
+		}
+	}
+}
+
+interface LinkPreviewTriggerStateOpts extends WithRefOpts {}
+
+export class LinkPreviewTriggerState {
+	static create(opts: LinkPreviewTriggerStateOpts) {
+		return new LinkPreviewTriggerState(opts, getLinkPreviewRoot());
+	}
+
+	readonly opts: LinkPreviewTriggerStateOpts;
+	readonly root: LinkPreviewRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: LinkPreviewTriggerStateOpts, root: LinkPreviewRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
+		this.root.domContext = new DOMContext(opts.ref);
+		this.onpointerenter = this.onpointerenter.bind(this);
+		this.onpointerleave = this.onpointerleave.bind(this);
+		this.onfocus = this.onfocus.bind(this);
+		this.onblur = this.onblur.bind(this);
+	}
+
+	onpointerenter(e: BitsPointerEvent) {
+		if (e.pointerType === 'touch') return;
+		this.root.handleOpen();
+	}
+
+	onpointerleave(e: BitsPointerEvent) {
+		if (e.pointerType === 'touch') return;
+		// The content is always mounted (native popover, display toggled), so open is the only gate.
+		if (!this.root.opts.open.current) {
+			this.root.immediateClose();
+		}
+	}
+
+	onfocus(e: BitsFocusEvent) {
+		if (!e.currentTarget.matches(':focus-visible')) return;
+		this.root.handleOpen();
+	}
+
+	onblur(_: BitsFocusEvent) {
+		this.root.handleClose();
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'aria-haspopup': 'dialog',
+				'aria-expanded': boolToStr(this.root.opts.open.current),
+				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				'aria-controls': this.root.contentNode?.id,
+				role: 'button',
+				[linkPreviewAttrs.trigger]: '',
+				onpointerenter: this.onpointerenter,
+				onfocus: this.onfocus,
+				onblur: this.onblur,
+				onpointerleave: this.onpointerleave,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface LinkPreviewContentStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			onInteractOutside: (e: PointerEvent) => void;
+			onEscapeKeydown: (e: KeyboardEvent) => void;
+		}> {}
+
+export class LinkPreviewContentState {
+	static create(opts: LinkPreviewContentStateOpts) {
+		return new LinkPreviewContentState(opts, getLinkPreviewRoot());
+	}
+
+	readonly opts: LinkPreviewContentStateOpts;
+	readonly root: LinkPreviewRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: LinkPreviewContentStateOpts, root: LinkPreviewRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+		this.root.domContext = new DOMContext(opts.ref);
+		this.onpointerdown = this.onpointerdown.bind(this);
+		this.onpointerenter = this.onpointerenter.bind(this);
+		this.onfocusout = this.onfocusout.bind(this);
+
+		new SafePolygon({
+			triggerNode: () => this.root.triggerNode,
+			contentNode: () => this.opts.ref.current,
+			enabled: () => this.root.opts.open.current,
+			onPointerExit: () => {
+				this.root.handleClose();
+			},
+		});
+
+		onDestroy(() => {
+			this.root.clearTimeout();
+		});
+	}
+
+	onpointerdown(e: BitsPointerEvent) {
+		const target = e.target;
+		if (!isElement(target)) return;
+
+		if (e.currentTarget.contains(target)) {
+			this.root.containsSelection = true;
+		}
+		this.root.hasSelection = true;
+		this.root.isPointerDownOnContent = true;
+	}
+
+	onpointerenter(e: BitsPointerEvent) {
+		if (e.pointerType === 'touch') return;
+		this.root.handleOpen();
+	}
+
+	onfocusout(e: BitsFocusEvent) {
+		e.preventDefault();
+	}
+
+	onInteractOutside = (e: PointerEvent) => {
+		this.opts.onInteractOutside.current(e);
+		if (e.defaultPrevented) return;
+		this.root.handleClose();
+	};
+
+	onEscapeKeydown = (e: KeyboardEvent) => {
+		this.opts.onEscapeKeydown.current?.(e);
+		if (e.defaultPrevented) return;
+		this.root.handleClose();
+	};
+
+	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				tabindex: -1,
+				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				[linkPreviewAttrs.content]: '',
+				onpointerdown: this.onpointerdown,
+				onpointerenter: this.onpointerenter,
+				onfocusout: this.onfocusout,
+				...this.attachment,
+			}) as const,
+	);
+}