@x33025/sveltely 0.1.1 → 0.1.3

package/dist/components/Library/Dropdown/index.js

@@ -1 +1,11 @@
-export { default } from './Dropdown.svelte';
+import DropdownComponent from './Dropdown.svelte';
+import Action from './Action.svelte';
+import Divider from './Divider.svelte';
+import Item from './Item.svelte';
+import Section from './Section.svelte';
+const Dropdown = DropdownComponent;
+Dropdown.Action = Action;
+Dropdown.Divider = Divider;
+Dropdown.Item = Item;
+Dropdown.Section = Section;
+export default Dropdown;

package/dist/components/Library/Floating/Floating.svelte

@@ -2,11 +2,7 @@
 	import { tick, onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { portalContent } from '../../../actions/portal';
-	import {
-		autoAlignForViewport,
-		computePosition,
-		type Anchor
-	} from '../../../utils/positioning';
+	import { autoAlignForViewport, computePosition, type Anchor } from '../../../utils/positioning';
 	import {
 		hasOpenChild,
 		isAncestor,
@@ -177,6 +173,39 @@
 		return Number.isFinite(parsed) ? parsed : 0;
 	};
 
+	const resolveCssLength = (element: HTMLElement, value: string) => {
+		const trimmedValue = value.trim();
+		if (!trimmedValue) return 0;
+		if (trimmedValue.endsWith('px')) return parsePx(trimmedValue);
+
+		const probe = document.createElement('div');
+		probe.style.position = 'absolute';
+		probe.style.visibility = 'hidden';
+		probe.style.pointerEvents = 'none';
+		probe.style.width = trimmedValue;
+		element.appendChild(probe);
+		const width = probe.getBoundingClientRect().width;
+		probe.remove();
+		return width;
+	};
+
+	const getFloatingInset = () => {
+		if (!panelEl) return 0;
+		const styles = getComputedStyle(panelEl);
+		return resolveCssLength(panelEl, styles.getPropertyValue('--sveltely-floating-inset'));
+	};
+
+	const offsetCoords = (
+		coords: { top: number; left: number },
+		currentAnchor: Anchor,
+		offset: number
+	) => {
+		if (currentAnchor === 'bottom') return { ...coords, top: coords.top + offset };
+		if (currentAnchor === 'top') return { ...coords, top: coords.top - offset };
+		if (currentAnchor === 'right') return { ...coords, left: coords.left + offset };
+		return { ...coords, left: coords.left - offset };
+	};
+
 	const updateRadiusFromSource = () => {
 		if (!matchPanelRadiusToSource || !panelEl || !contentEl) {
 			computedPanelRadius = null;
@@ -222,7 +251,11 @@
 			placement,
 			preferredAlign
 		);
-		panelCoords = { top: result.top, left: result.left };
+		panelCoords = offsetCoords(
+			{ top: result.top, left: result.left },
+			result.anchor,
+			getFloatingInset()
+		);
 		panelTransform = result.transform;
 		resolvedAnchor = result.anchor;
 	};
@@ -306,7 +339,10 @@
 
 	$effect(() => {
 		if (typeof window === 'undefined') return;
-		const handleWindowChange = () => closePanel();
+		const handleWindowChange = (event: Event) => {
+			if (event.type === 'scroll' && isEventInFloatingTree(event)) return;
+			closePanel();
+		};
 		window.addEventListener('scroll', handleWindowChange, true);
 		window.addEventListener('resize', handleWindowChange);
 		return () => {
@@ -317,6 +353,7 @@
 
 	const resolvedPanelStyle = $derived.by(() => {
 		const declarations = [
+			'--sveltely-floating-inset: var(--sveltely-inset);',
 			`top: ${panelCoords.top}px;`,
 			`left: ${panelCoords.left}px;`,
 			`transform: ${panelTransform};`

package/dist/components/Library/ForEach/ForEach.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: T[];
+		children: Snippet<[item: T, index: number]>;
+	};
+
+	let { items, children }: Props = $props();
+</script>
+
+{#each items as item, index}
+	{@render children(item, index)}
+{/each}

package/dist/components/Library/ForEach/ForEach.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        children: Snippet<[item: T, index: number]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ForEach: $$IsomorphicComponent;
+type ForEach<T> = InstanceType<typeof ForEach<T>>;
+export default ForEach;

package/dist/components/Library/ForEach/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ForEach.svelte';

package/dist/components/Library/ForEach/index.js

@@ -0,0 +1 @@
+export { default } from './ForEach.svelte';

package/dist/components/Library/Grid/Grid.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		columns?: number | string;
+		rows?: number | string;
+		autoRows?: number | string;
+		dense?: boolean;
+	} & LayoutProps &
+		StyleProps;
+
+	let {
+		children,
+		columns = 1,
+		rows,
+		autoRows,
+		dense = false,
+		...restProps
+	}: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const templateColumns = $derived(
+		typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns
+	);
+	const templateRows = $derived(
+		rows === undefined ? undefined : typeof rows === 'number' ? `repeat(${rows}, minmax(0, 1fr))` : rows
+	);
+	const gridAutoRows = $derived(
+		autoRows === undefined ? undefined : typeof autoRows === 'number' ? `${autoRows}rem` : autoRows
+	);
+	const rootStyle = $derived.by(() =>
+		[
+			`grid-template-columns: ${templateColumns};`,
+			templateRows ? `grid-template-rows: ${templateRows};` : '',
+			gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : '',
+			layoutStyle(layoutProps),
+			surfaceStyle(styleProps, 'grid')
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div class="grid" class:grid-dense={dense} style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid {
+		display: grid;
+		min-width: 0;
+		min-height: 0;
+		align-items: stretch;
+		gap: var(--grid-gap, 0px);
+		border-radius: var(--grid-border-radius, 0px);
+		padding:
+			var(--grid-padding-y, 0px)
+			var(--grid-padding-x, 0px);
+		font-size: var(--grid-font-size, inherit);
+	}
+
+	.grid-dense {
+		grid-auto-flow: dense;
+	}
+</style>

package/dist/components/Library/Grid/Grid.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    columns?: number | string;
+    rows?: number | string;
+    autoRows?: number | string;
+    dense?: boolean;
+} & LayoutProps & StyleProps;
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/Library/Grid/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Grid.svelte';

package/dist/components/Library/Grid/index.js

@@ -0,0 +1 @@
+export { default } from './Grid.svelte';

package/dist/components/Library/GridItem/GridItem.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		column?: number | string;
+		row?: number | string;
+		columnSpan?: number;
+		rowSpan?: number;
+		area?: string;
+	} & LayoutProps &
+		StyleProps;
+
+	let {
+		children,
+		column,
+		row,
+		columnSpan,
+		rowSpan,
+		area,
+		...restProps
+	}: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const rootStyle = $derived.by(() =>
+		[
+			column !== undefined ? `grid-column: ${column};` : '',
+			row !== undefined ? `grid-row: ${row};` : '',
+			column === undefined && columnSpan !== undefined
+				? `grid-column: span ${columnSpan} / span ${columnSpan};`
+				: '',
+			row === undefined && rowSpan !== undefined ? `grid-row: span ${rowSpan} / span ${rowSpan};` : '',
+			area !== undefined ? `grid-area: ${area};` : '',
+			layoutStyle(layoutProps),
+			surfaceStyle(styleProps, 'grid-item')
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div class="grid-item" style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid-item {
+		min-width: 0;
+		min-height: 0;
+		height: 100%;
+		border-radius: var(--grid-item-border-radius, 0px);
+		padding:
+			var(--grid-item-padding-y, 0px)
+			var(--grid-item-padding-x, 0px);
+		font-size: var(--grid-item-font-size, inherit);
+	}
+</style>

package/dist/components/Library/GridItem/GridItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    column?: number | string;
+    row?: number | string;
+    columnSpan?: number;
+    rowSpan?: number;
+    area?: string;
+} & LayoutProps & StyleProps;
+declare const GridItem: import("svelte").Component<Props, {}, "">;
+type GridItem = ReturnType<typeof GridItem>;
+export default GridItem;

package/dist/components/Library/GridItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './GridItem.svelte';

package/dist/components/Library/GridItem/index.js

@@ -0,0 +1 @@
+export { default } from './GridItem.svelte';

package/dist/components/Library/HStack/HStack.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+	} & LayoutProps &
+		StyleProps;
+
+	let { children, ...restProps }: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
+	);
+</script>
+
+<div class="hstack" style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.hstack {
+		display: flex;
+		min-width: min-content;
+		min-height: min-content;
+		flex-direction: row;
+		gap: var(--stack-gap, 0px);
+		border-radius: var(--stack-border-radius, 0px);
+		padding:
+			var(--stack-padding-y, 0px)
+			var(--stack-padding-x, 0px);
+		font-size: var(--stack-font-size, inherit);
+		--divider-width: 1px;
+		--divider-height: auto;
+		--divider-align-self: stretch;
+	}
+</style>

package/dist/components/Library/HStack/HStack.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+} & LayoutProps & StyleProps;
+declare const HStack: import("svelte").Component<Props, {}, "">;
+type HStack = ReturnType<typeof HStack>;
+export default HStack;

package/dist/components/Library/HStack/index.d.ts

@@ -0,0 +1 @@
+export { default } from './HStack.svelte';

package/dist/components/Library/HStack/index.js

@@ -0,0 +1 @@
+export { default } from './HStack.svelte';

package/dist/components/Library/Image/Image.demo.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Image',
+		description: 'Responsive image display with generated placeholder and busy states.'
+	};
+</script>
+
+<script lang="ts">
+	import Image from './Image.svelte';
+</script>
+
+<Image
+	src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=600&q=80"
+	alt="Red sneaker"
+	fit="cover"
+	class="aspect-square"
+/>
+<Image busy placeholderKey="image-demo-loading" class="aspect-square" />

package/dist/components/Library/Image/Image.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Image from './Image.svelte';
+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 Image: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Image = InstanceType<typeof Image>;
+export default Image;

package/dist/components/Library/Image/Image.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import type { ImageFit, ImageLoading } from '../../../style/media';
+	import ImagePlaceholder from './ImagePlaceholder.svelte';
+
+	type Props = {
+		src?: string | null;
+		alt?: string;
+		fit?: ImageFit;
+		busy?: boolean;
+		placeholderKey?: string;
+		loading?: ImageLoading;
+		decoding?: HTMLImgAttributes['decoding'];
+		children?: Snippet;
+		class?: string;
+	};
+
+	let {
+		src = null,
+		alt = '',
+		fit = 'contain',
+		busy = false,
+		placeholderKey = 'default',
+		loading = 'lazy',
+		decoding = 'async',
+		children,
+		class: className = ''
+	}: Props = $props();
+
+	const showImage = $derived(Boolean(src) && !busy);
+</script>
+
+<div class={`image relative overflow-hidden bg-zinc-100 ${className}`}>
+	{#if showImage}
+		<img
+			{src}
+			{alt}
+			{loading}
+			{decoding}
+			draggable="false"
+			class="absolute inset-0 size-full {fit === 'cover' ? 'object-cover' : 'object-contain'}"
+		/>
+	{:else}
+		<ImagePlaceholder seed={placeholderKey} class="absolute inset-0" />
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.image {
+		border-radius: var(--image-border-radius, var(--sveltely-border-radius));
+	}
+</style>

package/dist/components/Library/Image/Image.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { ImageFit, ImageLoading } from '../../../style/media';
+type Props = {
+    src?: string | null;
+    alt?: string;
+    fit?: ImageFit;
+    busy?: boolean;
+    placeholderKey?: string;
+    loading?: ImageLoading;
+    decoding?: HTMLImgAttributes['decoding'];
+    children?: Snippet;
+    class?: string;
+};
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;