@x33025/sveltely 0.0.57 → 0.1.0

package/dist/utils/positioning.d.ts

@@ -1,8 +1,8 @@
 /**
  * Shared positioning engine for floating UI elements (popovers, tooltips, dropdowns, etc.).
- * Handles anchor/align placement with automatic viewport-overflow flipping.
+ * Handles preferred side placement with contextual attachment and viewport-overflow flipping.
  */
-export type Anchor = 'top' | 'bottom' | 'leading' | 'trailing';
+export type Anchor = 'top' | 'bottom' | 'left' | 'right';
 export type Align = 'left' | 'center' | 'right';
 export type Transform = 'none' | 'translateX(-50%)' | 'translateX(-100%)' | 'translateY(-100%)' | 'translate(-50%, -100%)' | 'translate(-100%, -100%)';
 export interface Placement {
@@ -16,6 +16,7 @@ export interface PositionResult extends Placement {
 }
 export declare function oppositeAnchor(value: Anchor): Anchor;
 export declare function flippedAlign(value: Align): Align;
+export declare function autoAlignForViewport(rect: DOMRect): Align;
 export declare function getPlacement(rect: DOMRect, nextAnchor: Anchor, nextAlign: Align): Placement;
 export declare function getViewportRect(placement: Placement, width: number, height: number): {
     left: number;

package/dist/utils/positioning.js

@@ -1,21 +1,25 @@
 /**
  * Shared positioning engine for floating UI elements (popovers, tooltips, dropdowns, etc.).
- * Handles anchor/align placement with automatic viewport-overflow flipping.
+ * Handles preferred side placement with contextual attachment and viewport-overflow flipping.
  */
 export function oppositeAnchor(value) {
     if (value === 'top')
         return 'bottom';
     if (value === 'bottom')
         return 'top';
-    if (value === 'leading')
-        return 'trailing';
-    return 'leading';
+    if (value === 'left')
+        return 'right';
+    return 'left';
 }
 export function flippedAlign(value) {
     if (value === 'center')
         return 'center';
     return value === 'left' ? 'right' : 'left';
 }
+export function autoAlignForViewport(rect) {
+    const triggerCenter = rect.left + rect.width / 2;
+    return triggerCenter <= window.innerWidth / 2 ? 'left' : 'right';
+}
 export function getPlacement(rect, nextAnchor, nextAlign) {
     if (nextAnchor === 'top' || nextAnchor === 'bottom') {
         const left = nextAlign === 'left'
@@ -41,7 +45,7 @@ export function getPlacement(rect, nextAnchor, nextAlign) {
         }
         return { top, left, transform: 'none' };
     }
-    if (nextAnchor === 'leading') {
+    if (nextAnchor === 'left') {
         return {
             top: rect.top + window.scrollY,
             left: rect.left + window.scrollX,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.57",
+	"version": "0.1.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -39,6 +39,7 @@
 		"./style.css": "./dist/style.css"
 	},
 	"peerDependencies": {
+		"@sveltejs/kit": "^2.50.1",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {

package/dist/components/AnimatedNumber.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { Spring } from 'svelte/motion';
-
-	interface Props {
-		value: number;
-		class?: string;
-		as?: keyof HTMLElementTagNameMap;
-	}
-
-	let { value, class: className = '', as = 'span' }: Props = $props();
-
-	const spring = Spring.of(() => value);
-	const display = $derived(Math.round(spring.current).toLocaleString());
-</script>
-
-<svelte:element this={as} class="tabular-nums {className}">
-	{display}
-</svelte:element>

package/dist/components/AnimatedNumber.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    value: number;
-    class?: string;
-    as?: keyof HTMLElementTagNameMap;
-}
-declare const AnimatedNumber: import("svelte").Component<Props, {}, "">;
-type AnimatedNumber = ReturnType<typeof AnimatedNumber>;
-export default AnimatedNumber;

package/dist/components/AsyncButton.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-	import { CircleAlertIcon } from '@lucide/svelte';
-	import type { Component } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import Spinner from './Spinner.svelte';
-	import Tooltip from './Tooltip.svelte';
-
-	type Props = {
-		icon?: Component<{ class?: string }>;
-		label: string;
-		action: () => void | Promise<void>;
-		error?: unknown | null;
-		loading?: boolean;
-		disableWhileLoading?: boolean;
-		style?: 'iconAndLabel' | 'iconOnly';
-	} & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
-
-	let {
-		icon,
-		label,
-		action,
-		error = $bindable<unknown | null>(null),
-		loading = undefined,
-		disableWhileLoading = true,
-		style: styleMode = 'iconAndLabel',
-		disabled = false,
-		class: className = '',
-		type = 'button',
-		...props
-	}: Props = $props();
-
-	let internalLoading = $state(false);
-
-	const isControlledLoading = $derived(loading !== undefined);
-	const effectiveLoading = $derived(isControlledLoading ? loading : internalLoading);
-	const effectiveDisabled = $derived(disabled || (disableWhileLoading && effectiveLoading));
-
-	const handleClick = async () => {
-		if (effectiveDisabled) return;
-		error = null;
-		if (isControlledLoading) {
-			try {
-				await action();
-			} catch (caught) {
-				error = caught;
-			}
-			return;
-		}
-
-		internalLoading = true;
-		try {
-			await action();
-		} catch (caught) {
-			error = caught;
-		} finally {
-			internalLoading = false;
-		}
-	};
-
-	const errorLabel = $derived.by(() => {
-		if (!error) return null;
-		if (typeof error === 'string' && error.trim().length > 0) return error;
-		if (error instanceof Error && error.message.trim().length > 0) return error.message;
-		return 'Something went wrong';
-	});
-</script>
-
-<Tooltip label={errorLabel ?? ''} disabled={!errorLabel}>
-	<button
-		{type}
-		class="inline-flex items-center gap-2 disabled:cursor-not-allowed disabled:opacity-50 {className}"
-		disabled={effectiveDisabled}
-		aria-busy={effectiveLoading}
-		aria-label={styleMode === 'iconOnly' ? label : undefined}
-		data-error={error ? 'true' : 'false'}
-		{...props}
-		onclick={handleClick}
-	>
-		<span class="inline-grid size-4 shrink-0 place-items-center">
-			{#if effectiveLoading}
-				<Spinner class="async-button-icon size-4" />
-			{:else if error}
-				<CircleAlertIcon class="async-button-icon size-4 text-red-600" />
-			{:else if icon}
-				{@const Icon = icon}
-				<Icon class="async-button-icon size-4" />
-			{/if}
-		</span>
-		{#if styleMode === 'iconAndLabel'}
-			<span class="async-button-text">{label}</span>
-		{/if}
-	</button>
-</Tooltip>

package/dist/components/NavigationStack/NavigationStack.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import { setContext, getContext } from 'svelte';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		left?: Snippet;
-		right?: Snippet;
-		children?: Snippet;
-		chrome?: boolean;
-	}
-
-	let { left, right, children, chrome = true }: Props = $props();
-
-	const existingContext = getContext<{
-		leftOpen?: boolean;
-		rightOpen?: boolean;
-	}>('navigationStack');
-
-	let leftOpen = $state(existingContext?.leftOpen ?? true);
-	let rightOpen = $state(existingContext?.rightOpen ?? true);
-
-	function toggleLeft() {
-		leftOpen = !leftOpen;
-	}
-
-	function toggleRight() {
-		rightOpen = !rightOpen;
-	}
-
-	setContext('navigationStack', {
-		get leftOpen() {
-			return leftOpen;
-		},
-		get rightOpen() {
-			return rightOpen;
-		},
-		toggleLeft,
-		toggleRight
-	});
-</script>
-
-<div class="navigation-stack hstack size-full" data-chrome={chrome ? 'true' : 'false'}>
-	{#if left}
-		<div
-			class="navigation-stack-sidebar navigation-stack-sidebar-left h-full overflow-hidden transition-all duration-300 ease-in-out"
-			style="width: {leftOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
-		>
-			<div
-				class="navigation-stack-sidebar-inner vstack h-full overflow-auto p-4"
-				style="width: var(--navigation-stack-sidebar-width);"
-			>
-				{@render left()}
-			</div>
-		</div>
-	{/if}
-
-	<div class="navigation-stack-content vstack flex-1">
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-
-	{#if right}
-		<div
-			class="navigation-stack-sidebar navigation-stack-sidebar-right h-full overflow-hidden transition-all duration-300 ease-in-out"
-			style="width: {rightOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
-		>
-			<div
-				class="navigation-stack-sidebar-inner vstack h-full overflow-auto p-4"
-				style="width: var(--navigation-stack-sidebar-width);"
-			>
-				{@render right()}
-			</div>
-		</div>
-	{/if}
-</div>

package/dist/components/NavigationStack/NavigationStack.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    left?: Snippet;
-    right?: Snippet;
-    children?: Snippet;
-    chrome?: boolean;
-}
-declare const NavigationStack: import("svelte").Component<Props, {}, "">;
-type NavigationStack = ReturnType<typeof NavigationStack>;
-export default NavigationStack;

package/dist/components/NavigationStack/SidebarToggle.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import { PanelLeft, PanelRight } from '@lucide/svelte';
-
-	interface Props {
-		side: 'left' | 'right';
-		children?: Snippet;
-		class?: string;
-	}
-
-	let { side, children, class: className = '' }: Props = $props();
-
-	const ctx = getContext<{
-		toggleLeft: () => void;
-		toggleRight: () => void;
-	}>('navigationStack');
-
-	function handleClick() {
-		if (side === 'left') {
-			ctx?.toggleLeft();
-		} else {
-			ctx?.toggleRight();
-		}
-	}
-</script>
-
-<button onclick={handleClick} class="sidebar-toggle {className}" title="Toggle {side} sidebar">
-	{#if children}
-		{@render children()}
-	{:else if side === 'left'}
-		<PanelLeft class="h-5 w-5" />
-	{:else}
-		<PanelRight class="h-5 w-5" />
-	{/if}
-</button>

package/dist/components/NavigationStack/SidebarToggle.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    side: 'left' | 'right';
-    children?: Snippet;
-    class?: string;
-}
-declare const SidebarToggle: import("svelte").Component<Props, {}, "">;
-type SidebarToggle = ReturnType<typeof SidebarToggle>;
-export default SidebarToggle;

package/dist/components/NavigationStack/Toolbar.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		header?: Snippet;
-		children?: Snippet;
-		chrome?: boolean;
-	}
-
-	let { header, children, chrome = true }: Props = $props();
-</script>
-
-<div class="navigation-stack-toolbar-shell vstack h-full" data-chrome={chrome ? 'true' : 'false'}>
-	{#if header}
-		<div class="navigation-stack-toolbar flex items-center gap-2 p-2">
-			{@render header()}
-		</div>
-	{/if}
-
-	<div class="navigation-stack-toolbar-content vstack h-full">
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-</div>

package/dist/components/NavigationStack/Toolbar.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    header?: Snippet;
-    children?: Snippet;
-    chrome?: boolean;
-}
-declare const Toolbar: import("svelte").Component<Props, {}, "">;
-type Toolbar = ReturnType<typeof Toolbar>;
-export default Toolbar;

package/dist/components/Pagination.svelte

@@ -1,144 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import {
-		ChevronLeftIcon,
-		ChevronRightIcon,
-		ChevronsLeftIcon,
-		ChevronsRightIcon
-	} from '@lucide/svelte';
-
-	type PaginationData = {
-		view: string;
-		page: number;
-		totalPages: number;
-		hasNext?: boolean;
-	};
-
-	let {
-		data,
-		onPageChange,
-		showFirstLast = false,
-		style: styleMode = 'label',
-		class: className = ''
-	}: {
-		data: PaginationData;
-		onPageChange?: (page: number, href: string) => void | Promise<void>;
-		showFirstLast?: boolean;
-		style?: 'icon' | 'label';
-		class?: string;
-	} = $props();
-
-	const clampedPage = (targetPage: number) => Math.min(Math.max(targetPage, 1), maxPage());
-
-	const toQuery = (targetPage: number) => {
-		const params = new URLSearchParams({
-			view: data.view,
-			page: String(clampedPage(targetPage))
-		});
-		return `?${params.toString()}`;
-	};
-
-	const maxPage = () => Math.max(1, data.totalPages);
-	const safePage = () => Math.min(Math.max(data.page, 1), maxPage());
-	const hasNext = () => (typeof data.hasNext === 'boolean' ? data.hasNext : safePage() < maxPage());
-	const hasPrevious = () => safePage() > 1;
-	const buttonClass = () =>
-		`pagination-button action disabled:bg-zinc-200 disabled:text-zinc-500 inline-flex items-center justify-center leading-none ${
-			styleMode === 'icon' ? 'h-8 w-8 p-0' : 'padding-sm'
-		}`;
-
-	const goToPage = (targetPage: number) => {
-		const clamped = clampedPage(targetPage);
-		const href = toQuery(clamped);
-		if (onPageChange) {
-			void onPageChange(clamped, href);
-			return;
-		}
-		void goto(href);
-	};
-
-	const handleSubmit = (event: SubmitEvent) => {
-		event.preventDefault();
-		const form = event.currentTarget as HTMLFormElement;
-		const input = form.elements.namedItem('page') as HTMLInputElement | null;
-		if (!input) return;
-
-		const parsed = Number.parseInt(input.value, 10);
-		const fallback = safePage();
-		const next = Number.isFinite(parsed) ? parsed : fallback;
-		const clamped = Math.min(Math.max(next, 1), maxPage());
-		input.value = String(clamped);
-		goToPage(clamped);
-	};
-</script>
-
-<div class={`pagination hstack items-center ${className}`}>
-	{#if showFirstLast}
-		<button
-			type="button"
-			class={buttonClass()}
-			onclick={() => goToPage(1)}
-			aria-label="First page"
-			disabled={!hasPrevious()}
-		>
-			{#if styleMode === 'icon'}
-				<ChevronsLeftIcon class="size-4 -translate-x-px" />
-			{:else}
-				First
-			{/if}
-		</button>
-	{/if}
-
-	<button
-		type="button"
-		class={buttonClass()}
-		onclick={() => goToPage(safePage() - 1)}
-		aria-label="Previous page"
-		disabled={!hasPrevious()}
-	>
-		{#if styleMode === 'icon'}
-			<ChevronLeftIcon class="size-4 -translate-x-px" />
-		{:else}
-			Previous
-		{/if}
-	</button>
-
-	<span>Page</span>
-
-	<form method="GET" style="display: inline;" novalidate onsubmit={handleSubmit}>
-		<input type="hidden" name="view" value={data.view} />
-		<input id="page" name="page" type="number" class="pagination-input" value={safePage()} />
-	</form>
-
-	<span>of {maxPage()}</span>
-
-	<button
-		type="button"
-		class={buttonClass()}
-		onclick={() => goToPage(safePage() + 1)}
-		aria-label="Next page"
-		disabled={!hasNext()}
-	>
-		{#if styleMode === 'icon'}
-			<ChevronRightIcon class="size-4 translate-x-px" />
-		{:else}
-			Next
-		{/if}
-	</button>
-
-	{#if showFirstLast}
-		<button
-			type="button"
-			class={buttonClass()}
-			onclick={() => goToPage(maxPage())}
-			aria-label="Last page"
-			disabled={!hasNext()}
-		>
-			{#if styleMode === 'icon'}
-				<ChevronsRightIcon class="size-4 translate-x-px" />
-			{:else}
-				Last
-			{/if}
-		</button>
-	{/if}
-</div>

package/dist/components/Popover/Popover.demo.svelte

@@ -1,35 +0,0 @@
-<script module lang="ts">
-	export const demo = {
-		name: 'Popover',
-		description: 'Composable popover with trigger and content snippets.'
-	};
-</script>
-
-<script lang="ts">
-	import Popover from './Popover.svelte';
-	import SearchInput from '../SearchInput.svelte';
-
-	let search = $state('');
-</script>
-
-<Popover align="center">
-	{#snippet trigger()}
-		<button
-			type="button"
-			class="rounded-full border border-zinc-300 px-3 py-2 text-sm text-zinc-800"
-		>
-			Open popover
-		</button>
-	{/snippet}
-
-	<div class="vstack gap-2">
-		<label for="popover-demo-search" class="text-sm font-medium text-zinc-700">Search</label>
-		<SearchInput
-			id="popover-demo-search"
-			bind:value={search}
-			placeholder="Type to search..."
-			confirmText="Enter"
-			class="w-64"
-		/>
-	</div>
-</Popover>

package/dist/components/Popover/Popover.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type Anchor, type Align } from '../../utils/positioning';
-interface Props {
-    trigger: Snippet;
-    children: Snippet;
-    open?: boolean;
-    class?: string;
-    align?: Align;
-    anchor?: Anchor;
-}
-declare const Popover: import("svelte").Component<Props, {}, "open">;
-type Popover = ReturnType<typeof Popover>;
-export default Popover;

package/dist/components/Popover/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Popover.svelte';
-export { default as PopoverDebugOverlay } from './PopoverDebugOverlay.svelte';

package/dist/components/Popover/index.js

@@ -1,2 +0,0 @@
-export { default } from './Popover.svelte';
-export { default as PopoverDebugOverlay } from './PopoverDebugOverlay.svelte';

package/dist/components/Popover/registry.svelte.d.ts

@@ -1,18 +0,0 @@
-export declare function registerPopover(id: string): void;
-export declare function unregisterPopover(id: string): void;
-export declare function setParentId(id: string, parentId: string | null): void;
-export declare function setOpen(id: string, open: boolean): void;
-export declare function getParentId(id: string): string | null;
-/**
- * Returns true if any registered popover lists `parentId` as its parent and is currently open.
- */
-export declare function hasOpenChild(parentId: string): boolean;
-/**
- * Walk the parent chain from `candidateId` upward.
- * Returns true if `ancestorId` is found in the chain.
- */
-export declare function isAncestor(candidateId: string | null, ancestorId: string): boolean;
-/**
- * Returns the IDs of all currently open popovers.
- */
-export declare function getOpenPopoverIds(): string[];

package/dist/components/SearchInput.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { SearchIcon } from '@lucide/svelte';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-
-	type Props = {
-		value?: string;
-		confirmText?: string | null;
-		inputClass?: string;
-	} & Omit<HTMLInputAttributes, 'children' | 'type' | 'value'>;
-
-	let {
-		value = $bindable(''),
-		confirmText = null,
-		inputClass = '',
-		class: className = '',
-		disabled = false,
-		placeholder = 'Search',
-		...props
-	}: Props = $props();
-</script>
-
-<label class="search-input {className}" data-disabled={disabled ? 'true' : 'false'}>
-	<span class="search-input-icon" aria-hidden="true">
-		<SearchIcon class="size-4" />
-	</span>
-	<input
-		type="search"
-		bind:value
-		{disabled}
-		{placeholder}
-		class="search-input-field {inputClass}"
-		{...props}
-	/>
-	{#if confirmText}
-		<span class="search-input-confirm">
-			{confirmText}
-		</span>
-	{/if}
-</label>

package/dist/components/SegmentedPicker.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-	type Option = {
-		label: string;
-		value: string;
-		disabled?: boolean;
-	};
-
-	let {
-		options,
-		value = $bindable(''),
-		disabled = false,
-		class: className = ''
-	}: {
-		options: Option[];
-		value: string;
-		disabled?: boolean;
-		class?: string;
-	} = $props();
-</script>
-
-<div
-	class={`segmented-picker hstack w-fit ${className}`}
-	class:segmented-picker-disabled={disabled}
->
-	{#each options as option}
-		{#if option.disabled}
-			<span
-				class={`segmented-picker-button segmented-picker-button-disabled ${
-					option.value === value ? 'segmented-picker-button-disabled-selected' : ''
-				}`}
-				aria-disabled="true"
-			>
-				{option.label}
-			</span>
-		{:else if option.value === value}
-			<span class="segmented-picker-button segmented-picker-button-active">{option.label}</span>
-		{:else}
-			<button
-				type="button"
-				{disabled}
-				class="segmented-picker-button"
-				onclick={() => {
-					if (disabled) return;
-					value = option.value;
-				}}
-			>
-				{option.label}
-			</button>
-		{/if}
-	{/each}
-</div>