@x33025/sveltely 0.0.58 → 0.1.0

package/dist/components/Library/NavigationStack/NavigationStack.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	import { setContext, getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	interface Props {
+		leftHeader?: Snippet;
+		header?: Snippet;
+		rightHeader?: Snippet;
+		left?: Snippet;
+		right?: Snippet;
+		children?: Snippet;
+		chrome?: boolean;
+	}
+
+	let {
+		leftHeader,
+		header,
+		rightHeader,
+		left,
+		right,
+		children,
+		chrome = true,
+		...restProps
+	}: Props & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+
+	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
+	});
+
+	const shellStyle = $derived.by(() => {
+		const declarations = [
+			`--navigation-stack-left-width: ${left && leftOpen ? 'var(--navigation-stack-sidebar-width)' : '0px'};`,
+			`--navigation-stack-right-width: ${right && rightOpen ? 'var(--navigation-stack-sidebar-width)' : '0px'};`
+		];
+		const stylePropDeclarations = surfaceStyle(styleProps, 'navigation-stack');
+		if (stylePropDeclarations) declarations.push(stylePropDeclarations);
+		return declarations.join(' ');
+	});
+</script>
+
+<div
+	class="navigation-stack size-full"
+	data-chrome={chrome ? 'true' : 'false'}
+	data-left-open={leftOpen ? 'true' : 'false'}
+	data-right-open={rightOpen ? 'true' : 'false'}
+	style={shellStyle}
+	{...props}
+>
+	{#if left || leftHeader}
+		<div class="navigation-stack-pane navigation-stack-pane-left navigation-stack-pane-header">
+			{#if leftHeader}
+				<div
+					class="navigation-stack-toolbar flex items-center gap-2"
+					style="padding: calc(var(--sveltely-padding-y) * 0.67) calc(var(--sveltely-padding-x) * 0.67);"
+				>
+					{@render leftHeader()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="navigation-stack-pane navigation-stack-pane-center navigation-stack-pane-header">
+		{#if header}
+			<div
+				class="navigation-stack-toolbar flex items-center gap-2"
+				style="padding: calc(var(--sveltely-padding-y) * 0.67) calc(var(--sveltely-padding-x) * 0.67);"
+			>
+				{@render header()}
+			</div>
+		{/if}
+	</div>
+
+	{#if right || rightHeader}
+		<div class="navigation-stack-pane navigation-stack-pane-right navigation-stack-pane-header">
+			{#if rightHeader}
+				<div
+					class="navigation-stack-toolbar flex items-center gap-2"
+					style="padding: calc(var(--sveltely-padding-y) * 0.67) calc(var(--sveltely-padding-x) * 0.67);"
+				>
+					{@render rightHeader()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	{#if left}
+		<div class="navigation-stack-pane navigation-stack-pane-left navigation-stack-pane-body">
+			<div
+				class="navigation-stack-sidebar-inner vstack h-full overflow-auto"
+				style="padding: calc(var(--sveltely-padding-y) * 1.33) calc(var(--sveltely-padding-x) * 1.33);"
+			>
+				{@render left()}
+			</div>
+		</div>
+	{/if}
+
+	<div class="navigation-stack-pane navigation-stack-pane-center navigation-stack-pane-body navigation-stack-content vstack">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if right}
+		<div class="navigation-stack-pane navigation-stack-pane-right navigation-stack-pane-body">
+			<div
+				class="navigation-stack-sidebar-inner vstack h-full overflow-auto"
+				style="padding: calc(var(--sveltely-padding-y) * 1.33) calc(var(--sveltely-padding-x) * 1.33);"
+			>
+				{@render right()}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.navigation-stack {
+		--navigation-stack-sidebar-width: 16rem;
+		display: grid;
+		grid-template-columns:
+			var(--navigation-stack-left-width)
+			minmax(0, 1fr)
+			var(--navigation-stack-right-width);
+		grid-template-rows: auto minmax(0, 1fr);
+		overflow: hidden;
+		transition: grid-template-columns 300ms ease-in-out;
+	}
+
+	.navigation-stack-pane {
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+		transition:
+			border-color 300ms ease-in-out,
+			background-color 300ms ease-in-out;
+	}
+
+	.navigation-stack-pane-left.navigation-stack-pane-header,
+	.navigation-stack-pane-left.navigation-stack-pane-body {
+		grid-column: 1;
+	}
+
+	.navigation-stack-pane-center.navigation-stack-pane-header,
+	.navigation-stack-pane-center.navigation-stack-pane-body {
+		grid-column: 2;
+	}
+
+	.navigation-stack-pane-right.navigation-stack-pane-header,
+	.navigation-stack-pane-right.navigation-stack-pane-body {
+		grid-column: 3;
+	}
+
+	.navigation-stack-pane-header {
+		grid-row: 1;
+		border-bottom: 1px solid var(--sveltely-border-color);
+		background: white;
+	}
+
+	.navigation-stack-pane-body {
+		grid-row: 2;
+	}
+
+	.navigation-stack-pane-left {
+		border-right: 1px solid var(--sveltely-border-color);
+	}
+
+	.navigation-stack-pane-right {
+		border-left: 1px solid var(--sveltely-border-color);
+	}
+
+	.navigation-stack-toolbar {
+		height: 100%;
+	}
+
+	.navigation-stack-content {
+		overflow: auto;
+	}
+
+	.navigation-stack-sidebar-inner {
+		background: var(--color-zinc-50);
+		transition:
+			visibility 0ms linear 300ms,
+			background-color 300ms ease-in-out;
+	}
+
+	.navigation-stack[data-left-open='true'] .navigation-stack-pane-left.navigation-stack-pane-body .navigation-stack-sidebar-inner,
+	.navigation-stack[data-right-open='true'] .navigation-stack-pane-right.navigation-stack-pane-body .navigation-stack-sidebar-inner {
+		visibility: visible;
+		transition-delay: 0ms;
+	}
+
+	.navigation-stack[data-left-open='false'] .navigation-stack-pane-left.navigation-stack-pane-body .navigation-stack-sidebar-inner,
+	.navigation-stack[data-right-open='false'] .navigation-stack-pane-right.navigation-stack-pane-body .navigation-stack-sidebar-inner {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	.navigation-stack[data-chrome='false'] .navigation-stack-pane-header {
+		border-color: transparent;
+		background: transparent;
+	}
+
+	.navigation-stack[data-chrome='false'] .navigation-stack-pane-left,
+	.navigation-stack[data-chrome='false'] .navigation-stack-pane-right {
+		border-color: transparent;
+	}
+
+	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-inner {
+		background: transparent;
+	}
+
+	.navigation-stack[data-chrome='false'] :global(.sidebar-toggle) {
+		background: transparent;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
+interface Props {
+    leftHeader?: Snippet;
+    header?: Snippet;
+    rightHeader?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    chrome?: boolean;
+}
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const NavigationStack: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavigationStack = ReturnType<typeof NavigationStack>;
+export default NavigationStack;

package/dist/components/Library/NavigationStack/SidebarToggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { PanelLeft, PanelRight } from '@lucide/svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	interface Props {
+		side: 'left' | 'right';
+		children?: Snippet;
+	}
+
+	let { side, children, ...restProps }: Props & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'sidebar-toggle'));
+
+	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" style={rootStyle} title="Toggle {side} sidebar" {...props}>
+	{#if children}
+		{@render children()}
+	{:else if side === 'left'}
+		<PanelLeft class="h-5 w-5" />
+	{:else}
+		<PanelRight class="h-5 w-5" />
+	{/if}
+</button>
+
+<style>
+	.sidebar-toggle {
+		border-radius: var(--sveltely-border-radius);
+		padding: calc(var(--sveltely-padding-y) * 0.5) calc(var(--sveltely-padding-x) * 0.5);
+	}
+
+	.sidebar-toggle:hover {
+		background: var(--sveltely-hover-color);
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
+interface Props {
+    side: 'left' | 'right';
+    children?: Snippet;
+}
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const SidebarToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarToggle = ReturnType<typeof SidebarToggle>;
+export default SidebarToggle;

package/dist/components/Library/NavigationStack/Toolbar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	interface Props {
+		header?: Snippet;
+		children?: Snippet;
+		chrome?: boolean;
+	}
+
+	let {
+		header,
+		children,
+		chrome = true,
+		...restProps
+	}: Props & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'navigation-stack-toolbar'));
+</script>
+
+<div class="navigation-stack-toolbar-shell vstack h-full" style={rootStyle} data-chrome={chrome ? 'true' : 'false'} {...props}>
+	{#if header}
+		<div
+			class="navigation-stack-toolbar flex items-center gap-2"
+			style="padding: calc(var(--sveltely-padding-y) * 0.67) calc(var(--sveltely-padding-x) * 0.67);"
+		>
+			{@render header()}
+		</div>
+	{/if}
+
+	<div class="navigation-stack-toolbar-content vstack h-full">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.navigation-stack-toolbar {
+		border-bottom: 1px solid var(--sveltely-border-color);
+		background: white;
+	}
+
+	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar {
+		border-color: transparent;
+		background: transparent;
+	}
+
+	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar-content {
+		background: transparent;
+	}
+
+	.navigation-stack-toolbar-shell[data-chrome='false'] :global(.sidebar-toggle) {
+		background: transparent;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
+interface Props {
+    header?: Snippet;
+    children?: Snippet;
+    chrome?: boolean;
+}
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/{Pagination.demo.svelte → Library/Pagination/Pagination.demo.svelte}

@@ -2,7 +2,6 @@
 	export const demo = {
 		name: 'Pagination',
 		description: 'Pagination control with local demo state.',
-		isProminent: false,
 		columnSpan: 2
 	};
 </script>

package/dist/components/{Pagination.demo.svelte.d.ts → Library/Pagination/Pagination.demo.svelte.d.ts}

@@ -1,7 +1,6 @@
 export declare const demo: {
     name: string;
     description: string;
-    isProminent: boolean;
     columnSpan: number;
 };
 import Pagination from './Pagination.svelte';

package/dist/components/Library/Pagination/Pagination.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import {
+		ChevronLeftIcon,
+		ChevronRightIcon,
+		ChevronsLeftIcon,
+		ChevronsRightIcon
+	} from '@lucide/svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type PaginationData = {
+		view: string;
+		page: number;
+		totalPages: number;
+		hasNext?: boolean;
+	};
+
+	let {
+		data,
+		onPageChange,
+		showFirstLast = false,
+		variant = 'label',
+		...restProps
+	}: {
+		data: PaginationData;
+		onPageChange?: (page: number, href: string) => void | Promise<void>;
+		showFirstLast?: boolean;
+		variant?: 'icon' | 'label';
+	} & StyleProps & Record<string, unknown> = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'pagination'));
+
+	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 ${
+			variant === 'icon' ? 'pagination-button-icon' : ''
+		}`;
+
+	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" style={rootStyle} {...props}>
+	<div class="pagination-group pagination-group-backward">
+		{#if showFirstLast}
+			<button
+				type="button"
+				class={buttonClass()}
+				onclick={() => goToPage(1)}
+				aria-label="First page"
+				disabled={!hasPrevious()}
+			>
+				{#if variant === 'icon'}
+					<ChevronsLeftIcon class="pagination-icon pagination-icon-backward" />
+				{:else}
+					First
+				{/if}
+			</button>
+		{/if}
+
+		<button
+			type="button"
+			class={buttonClass()}
+			onclick={() => goToPage(safePage() - 1)}
+			aria-label="Previous page"
+			disabled={!hasPrevious()}
+		>
+			{#if variant === 'icon'}
+				<ChevronLeftIcon class="pagination-icon pagination-icon-backward" />
+			{:else}
+				Previous
+			{/if}
+		</button>
+	</div>
+
+	<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>
+
+	<div class="pagination-group pagination-group-forward">
+		<button
+			type="button"
+			class={buttonClass()}
+			onclick={() => goToPage(safePage() + 1)}
+			aria-label="Next page"
+			disabled={!hasNext()}
+		>
+			{#if variant === 'icon'}
+				<ChevronRightIcon class="pagination-icon pagination-icon-forward" />
+			{:else}
+				Next
+			{/if}
+		</button>
+
+		{#if showFirstLast}
+			<button
+				type="button"
+				class={buttonClass()}
+				onclick={() => goToPage(maxPage())}
+				aria-label="Last page"
+				disabled={!hasNext()}
+			>
+				{#if variant === 'icon'}
+					<ChevronsRightIcon class="pagination-icon pagination-icon-forward" />
+				{:else}
+					Last
+				{/if}
+			</button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.pagination {
+		--pagination-font-size: calc(var(--sveltely-font-size) * 0.875);
+		--pagination-scale: calc(var(--pagination-font-size) / 0.875rem);
+		--pagination-icon-size: calc(var(--pagination-font-size) * 1.143);
+		--pagination-gap: calc(var(--sveltely-gap) * 2);
+		--pagination-icon-shift: calc(var(--sveltely-gap) / 2);
+		display: inline-flex;
+		width: fit-content;
+		gap: var(--pagination-gap);
+		font-size: var(--pagination-font-size);
+	}
+
+	.pagination-group {
+		display: inline-flex;
+		align-items: center;
+		gap: calc(var(--pagination-gap) * 0.33);
+	}
+
+	.pagination-icon {
+		width: var(--pagination-icon-size);
+		height: var(--pagination-icon-size);
+	}
+
+	.pagination-icon-backward {
+		transform: translateX(calc(var(--pagination-icon-shift) * -1));
+	}
+
+	.pagination-icon-forward {
+		transform: translateX(var(--pagination-icon-shift));
+	}
+
+	.pagination-button {
+		border-radius: var(--sveltely-border-radius);
+		background: var(--color-zinc-100);
+		padding:
+			calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
+			calc(var(--sveltely-padding-x) * 0.67 * var(--pagination-scale));
+	}
+
+	.pagination-button-icon {
+		padding:
+			calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
+			calc(var(--sveltely-padding-x) * 0.67 * var(--pagination-scale));
+		min-width: calc((var(--sveltely-padding-x) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size));
+		min-height: calc((var(--sveltely-padding-y) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size));
+	}
+
+	.pagination-button:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.pagination-input {
+		width: 10ch;
+		border-radius: var(--sveltely-border-radius);
+		background: var(--color-zinc-100);
+		font-size: inherit;
+		line-height: 1.25;
+		outline: none;
+		padding:
+			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
+			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
+			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
+			calc(var(--sveltely-padding-x) * var(--pagination-scale));
+	}
+</style>

package/dist/components/{Pagination.svelte.d.ts → Library/Pagination/Pagination.svelte.d.ts}

@@ -1,3 +1,4 @@
+import { type StyleProps } from '../../../style/surface';
 type PaginationData = {
     view: string;
     page: number;
@@ -8,9 +9,8 @@ type $$ComponentProps = {
     data: PaginationData;
     onPageChange?: (page: number, href: string) => void | Promise<void>;
     showFirstLast?: boolean;
-    style?: 'icon' | 'label';
-    class?: string;
-};
+    variant?: 'icon' | 'label';
+} & StyleProps & Record<string, unknown>;
 declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "">;
 type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

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

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

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

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

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

@@ -0,0 +1,21 @@
+<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/SearchInput.svelte';
+
+	let search = $state('');
+</script>
+
+<Popover>
+	{#snippet trigger()}
+		<span>Open popover</span>
+	{/snippet}
+
+	<SearchInput id="popover-demo-search" bind:value={search} placeholder="Type to search..." />
+</Popover>