@x33025/sveltely 0.0.32 → 0.0.34

package/dist/components/ChipInput.svelte

@@ -23,6 +23,12 @@
 	let editingTag = $state<string | null>(null);
 	let editingValue = $state('');
 	let editingEl = $state<HTMLInputElement | null>(null);
+	let rootEl = $state<HTMLElement | null>(null);
+	let dragStartIndex = $state<number | null>(null);
+	let dragHoverIndex = $state<number | null>(null);
+	let isPointerSelecting = $state(false);
+	let rangeSelectionMoved = $state(false);
+	let suppressNextClick = $state(false);
 	const selectionEnabled = $derived(selection !== undefined);
 
 	const addTag = (rawValue: string) => {
@@ -42,6 +48,53 @@
 		selection = [...selection, tag];
 	};
 
+	const applySelectionRange = (start: number, end: number) => {
+		if (!selection) return;
+		const from = Math.min(start, end);
+		const to = Math.max(start, end);
+		selection = tags.slice(from, to + 1);
+	};
+
+	const beginRangeSelection = (event: PointerEvent, index: number) => {
+		if (!selectionEnabled || event.button !== 0) return;
+		dragStartIndex = index;
+		dragHoverIndex = index;
+		isPointerSelecting = true;
+		rangeSelectionMoved = false;
+	};
+
+	const extendRangeSelection = (index: number) => {
+		if (!selectionEnabled || !isPointerSelecting || dragStartIndex === null) return;
+		dragHoverIndex = index;
+		if (dragStartIndex === index && !rangeSelectionMoved) return;
+		rangeSelectionMoved = true;
+		applySelectionRange(dragStartIndex, index);
+	};
+
+	const endRangeSelection = () => {
+		if (!isPointerSelecting) return;
+		suppressNextClick = rangeSelectionMoved;
+		isPointerSelecting = false;
+		rangeSelectionMoved = false;
+		dragStartIndex = null;
+		dragHoverIndex = null;
+	};
+
+	const onChipClick = (tag: string) => {
+		if (suppressNextClick) {
+			suppressNextClick = false;
+			return;
+		}
+		toggleSelected(tag);
+	};
+
+	const handleWindowPointerDown = (event: PointerEvent) => {
+		if (!selectionEnabled || !selection || !rootEl) return;
+		const target = event.target as Node | null;
+		if (target && rootEl.contains(target)) return;
+		selection = [];
+	};
+
 	const onKeydown = (event: KeyboardEvent) => {
 		if ((event.key === 'Enter' || event.key === ',') && inputValue.trim()) {
 			event.preventDefault();
@@ -157,8 +210,14 @@
 	});
 </script>
 
-<div class="chip-row flex w-full flex-wrap items-center">
-	{#each tags as tag (tag)}
+<svelte:window
+	onpointerup={endRangeSelection}
+	onpointercancel={endRangeSelection}
+	onpointerdown={handleWindowPointerDown}
+/>
+
+<div bind:this={rootEl} class="chip-row flex w-full flex-wrap items-center">
+	{#each tags as tag, index (tag)}
 		{#if editingTag === tag}
 			<input
 				bind:this={editingEl}
@@ -173,7 +232,10 @@
 				type="button"
 				class="chip-surface inline-flex items-center gap-2"
 				class:chip-selected={selection?.includes(tag)}
-				onclick={() => toggleSelected(tag)}
+				class:chip-hovered={isPointerSelecting && dragHoverIndex === index}
+				onpointerdown={(event) => beginRangeSelection(event, index)}
+				onpointerenter={() => extendRangeSelection(index)}
+				onclick={() => onChipClick(tag)}
 				ondblclick={() => startEditing(tag)}
 				aria-pressed={selection?.includes(tag)}
 			>
@@ -237,6 +299,10 @@
 		background: var(--chip-input-hover);
 	}
 
+	.chip-hovered {
+		background: var(--chip-input-hover);
+	}
+
 	.chip-input-field:hover {
 		background: var(--chip-input-background);
 	}

package/dist/components/Pagination.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	type PaginationData = {
+		view: string;
+		page: number;
+		totalPages: number;
+		hasNext?: boolean;
+	};
+
+	let {
+		data,
+		onPageChange,
+		class: className = ''
+	}: {
+		data: PaginationData;
+		onPageChange?: (page: number, href: string) => void | Promise<void>;
+		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 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={`hstack items-center ${className}`} style="gap: var(--pagination-gap);">
+	{#if safePage() > 1}
+		<button
+			type="button"
+			class="pagination-button action padding-sm"
+			onclick={() => goToPage(safePage() - 1)}
+		>
+			Previous
+		</button>
+	{:else}
+		<span class="pagination-button action padding-sm bg-zinc-400">Previous</span>
+	{/if}
+
+	<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>
+
+	{#if hasNext()}
+		<button
+			type="button"
+			class="pagination-button action padding-sm"
+			onclick={() => goToPage(safePage() + 1)}
+		>
+			Next
+		</button>
+	{:else}
+		<span class="pagination-button action padding-sm bg-zinc-400">Next</span>
+	{/if}
+</div>

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

@@ -0,0 +1,14 @@
+type PaginationData = {
+    view: string;
+    page: number;
+    totalPages: number;
+    hasNext?: boolean;
+};
+type $$ComponentProps = {
+    data: PaginationData;
+    onPageChange?: (page: number, href: string) => void | Promise<void>;
+    class?: string;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
 export { default as GlowEffect } from './components/GlowEffect.svelte';
 export { default as NavigationStack } from './components/NavigationStack';
 export { default as SegmentedPicker } from './components/SegmentedPicker.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
 export { default as Slider } from './components/Slider.svelte';
 export { default as Sheet } from './components/Sheet';
 export { default as Spinner } from './components/Spinner.svelte';

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
 export { default as GlowEffect } from './components/GlowEffect.svelte';
 export { default as NavigationStack } from './components/NavigationStack';
 export { default as SegmentedPicker } from './components/SegmentedPicker.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
 export { default as Slider } from './components/Slider.svelte';
 export { default as Sheet } from './components/Sheet';
 export { default as Spinner } from './components/Spinner.svelte';

package/dist/style/index.css

@@ -9,7 +9,7 @@
 
 @layer utilities {
 	.layout {
-		@apply flex size-full min-h-0 flex-col;
+		@apply flex size-full min-h-0 min-w-0 shrink-0 flex-col;
 	}
 
 	.center {
@@ -17,11 +17,11 @@
 	}
 
 	.vstack {
-		@apply flex min-h-0 flex-col;
+		@apply flex min-h-0 shrink-0 flex-col;
 	}
 
 	.hstack {
-		@apply flex min-w-0 flex-row;
+		@apply flex min-w-0 shrink-0 flex-row;
 	}
 
 	.spacer {
@@ -55,6 +55,12 @@
 	.dropdown-item:hover {
 		background: var(--dropdown-item-highlight);
 	}
+
+	.pagination-button {
+	}
+
+	.pagination-input {
+	}
 }
 
 @layer theme {
@@ -109,5 +115,7 @@
 		--chip-input-border-radius: 9999px;
 		--chip-input-border-color: transparent;
 		--chip-input-highlight: var(--color-zinc-300);
+
+		--pagination-gap: calc(var(--spacing) * 4);
 	}
 }

package/dist/style.css

@@ -15,6 +15,7 @@
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
     --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
     --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-900: oklch(21% 0.006 285.885);
@@ -233,6 +234,9 @@
   .flex {
     display: flex;
   }
+  .hidden {
+    display: none;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -364,6 +368,9 @@
   .bg-zinc-50 {
     background-color: var(--color-zinc-50);
   }
+  .bg-zinc-400 {
+    background-color: var(--color-zinc-400);
+  }
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
   }
@@ -540,6 +547,8 @@
     width: 100%;
     height: 100%;
     min-height: calc(var(--spacing) * 0);
+    min-width: calc(var(--spacing) * 0);
+    flex-shrink: 0;
     flex-direction: column;
   }
   .center {
@@ -549,11 +558,13 @@
   .vstack {
     display: flex;
     min-height: calc(var(--spacing) * 0);
+    flex-shrink: 0;
     flex-direction: column;
   }
   .hstack {
     display: flex;
     min-width: calc(var(--spacing) * 0);
+    flex-shrink: 0;
     flex-direction: row;
   }
   .spacer {
@@ -633,6 +644,7 @@
     --chip-input-border-radius: 9999px;
     --chip-input-border-color: transparent;
     --chip-input-highlight: var(--color-zinc-300);
+    --pagination-gap: calc(var(--spacing) * 4);
   }
 }
 @property --tw-rotate-x {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.32",
+	"version": "0.0.34",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",