sheer-ui 0.4.2 → 0.5.0

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

@@ -1,60 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-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/link-preview.svelte.ts

@@ -1,270 +0,0 @@
-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,
-	);
-}

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

@@ -1,102 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { OpenCell } from '../../internal/open-cell.svelte.js';
-import type { DismissibleLayerProps } from '../../internal/dismissible-layer/types.js';
-import type { EscapeLayerProps } from '../../internal/escape-layer/types.js';
-import type { FloatingLayerContentProps } from '../../internal/floating-layer/types.js';
-import type { PortalProps } from '../../internal/portal/index.js';
-import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveDivAttributes } from '../../internal/attribute-types.js';
-import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from '../../internal/types.js';
-import type { FloatingContentSnippetProps } from '../../internal/types.js';
-
-export type LinkPreviewRootPropsWithoutHTML = Omit<
-	WithChildren<{
-	/**
-	 * The derivation source for the link preview's open state: the internal cell
-	 * re-derives whenever this prop changes, and interactions override it until
-	 * the next change. Plain value — not bindable.
-	 */
-	open?: boolean;
-
-	/**
-	 * A caller-constructed cell (own source and, optionally, a delegate writer)
-	 * used instead of building one from `open`. When given, `open` is ignored.
-	 */
-	state?: OpenCell;
-
-	/**
-	 * A callback that will be called when the link preview finishes opening/closing animations.
-	 */
-	onOpenChangeComplete?: OnChangeFn<boolean>;
-
-	/**
-	 * The delay in milliseconds before the preview opens.
-	 *
-	 * @defaultValue 700
-	 */
-	openDelay?: number;
-
-	/**
-	 * The delay in milliseconds before the preview closes.
-	 *
-	 * @defaultValue 300
-	 */
-	closeDelay?: number;
-
-	/**
-	 * When `true`, the preview will be disabled and will not open.
-	 *
-	 * @defaultValue false
-	 */
-	disabled?: boolean;
-
-	/**
-	 * Prevent the preview from opening if the focus did not come using
-	 * the keyboard.
-	 *
-	 * @defaultValue false
-	 */
-	ignoreNonKeyboardFocus?: boolean;
-}>,
-	'children'
-> & {
-	/** Children receive the state cell, typed and guaranteed within the tree. */
-	children?: Snippet<[OpenCell]>;
-};
-
-export type LinkPreviewRootProps = LinkPreviewRootPropsWithoutHTML;
-
-export type LinkPreviewContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
-	Pick<
-		FloatingLayerContentProps,
-		| 'side'
-		| 'sideOffset'
-		| 'align'
-		| 'alignOffset'
-		| 'avoidCollisions'
-		| 'collisionPadding'
-		| 'arrowPadding'
-		| 'dir'
-		| 'customAnchor'
-	> &
-		Omit<DismissibleLayerProps, 'onInteractOutsideStart'> &
-		EscapeLayerProps & {
-			/**
-			 * When `true`, the link preview content will be forced to mount in the DOM.
-			 *
-			 * Useful for more control over the transition behavior.
-			 */
-			forceMount?: boolean;
-		},
-	FloatingContentSnippetProps
->;
-
-export type LinkPreviewContentProps = LinkPreviewContentPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, LinkPreviewContentPropsWithoutHTML>;
-
-export type LinkPreviewPortalPropsWithoutHTML = PortalProps;
-export type LinkPreviewPortalProps = LinkPreviewPortalPropsWithoutHTML;
-
-export type LinkPreviewTriggerPropsWithoutHTML = WithChild;
-
-export type LinkPreviewTriggerProps = LinkPreviewTriggerPropsWithoutHTML &
-	Without<BitsPrimitiveAnchorAttributes, LinkPreviewTriggerPropsWithoutHTML>;

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

@@ -1,38 +0,0 @@
-export { default as Root } from "./components/menu.svelte";
-export { default as Arrow } from "./components/menu-arrow.svelte";
-export { default as CheckboxGroup } from "./components/menu-checkbox-group.svelte";
-export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte";
-export { default as Content } from "./components/menu-content.svelte";
-export { default as Group } from "./components/menu-group.svelte";
-export { default as Item } from "./components/menu-item.svelte";
-export { default as GroupHeading } from "./components/menu-group-heading.svelte";
-export { default as Portal } from "../../internal/portal/portal.svelte";
-export { default as RadioGroup } from "./components/menu-radio-group.svelte";
-export { default as RadioItem } from "./components/menu-radio-item.svelte";
-export { default as Separator } from "./components/menu-separator.svelte";
-export { default as Sub } from "./components/menu-sub.svelte";
-export { default as SubContent } from "./components/menu-sub-content.svelte";
-export { default as SubTrigger } from "./components/menu-sub-trigger.svelte";
-export { default as Trigger } from "./components/menu-trigger.svelte";
-export { default as SubContentStatic } from "./components/menu-sub-content-static.svelte";
-
-export type {
-	MenuRootPropsWithoutHTML as RootProps,
-	MenuContentProps as ContentProps,
-	MenuContentStaticProps as ContentStaticProps,
-	MenuItemProps as ItemProps,
-	MenuTriggerProps as TriggerProps,
-	MenuSubPropsWithoutHTML as SubProps,
-	MenuSubContentProps as SubContentProps,
-	MenuSubContentStaticProps as SubContentStaticProps,
-	MenuSeparatorProps as SeparatorProps,
-	MenuArrowProps as ArrowProps,
-	MenuCheckboxGroupProps as CheckboxGroupProps,
-	MenuCheckboxItemProps as CheckboxItemProps,
-	MenuGroupHeadingProps as GroupHeadingProps,
-	MenuGroupProps as GroupProps,
-	MenuRadioGroupProps as RadioGroupProps,
-	MenuRadioItemProps as RadioItemProps,
-	MenuSubTriggerProps as SubTriggerProps,
-	MenuPortalProps as PortalProps,
-} from "./types.js";