@x33025/sveltely 0.0.31 → 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,86 +210,100 @@
 	});
 </script>
 
-<div class="w-full max-w-lg">
-	<div class="tag-row flex flex-wrap items-center">
-		{#each tags as tag (tag)}
-			{#if editingTag === tag}
-				<input
-					bind:this={editingEl}
-					bind:value={editingValue}
-					class="tag-surface tag-input-field min-w-20 outline-none"
-					onblur={() => commitEdit('blur', tag)}
-					onkeydown={(event) => onEditKeydown(event, tag)}
-				/>
-			{:else if selectionEnabled}
-				<button
-					type="button"
-					class="tag-surface inline-flex items-center gap-2"
-					class:tag-selected={selection?.includes(tag)}
-					onclick={() => toggleSelected(tag)}
-					ondblclick={() => startEditing(tag)}
-					aria-pressed={selection?.includes(tag)}
-				>
-					{tag}
-				</button>
-			{:else}
-				<button
-					type="button"
-					class="tag-surface inline-flex items-center gap-2"
-					ondblclick={() => startEditing(tag)}>{tag}</button
-				>
-			{/if}
-		{/each}
-
-		{#if showInput}
+<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={inputEl}
-				bind:value={inputValue}
-				class="tag-surface tag-input-field min-w-36 outline-none"
-				{placeholder}
-				onkeydown={onKeydown}
-				onblur={onBlur}
+				bind:this={editingEl}
+				bind:value={editingValue}
+				size={Math.max(editingValue.length, 1)}
+				class="chip-surface chip-input-field outline-none"
+				onblur={() => commitEdit('blur', tag)}
+				onkeydown={(event) => onEditKeydown(event, tag)}
 			/>
-		{:else}
+		{:else if selectionEnabled}
 			<button
 				type="button"
-				class="tag-surface chip-input-action inline-flex items-center justify-center font-semibold"
-				aria-label="Add tag"
-				onclick={openInput}
+				class="chip-surface inline-flex items-center gap-2"
+				class:chip-selected={selection?.includes(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)}
 			>
-				<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
+				{tag}
 			</button>
+		{:else}
+			<button
+				type="button"
+				class="chip-surface inline-flex items-center gap-2"
+				ondblclick={() => startEditing(tag)}>{tag}</button
+			>
 		{/if}
-
-		{#if action}
-			{@render action()}
-		{/if}
-	</div>
+	{/each}
+
+	{#if showInput}
+		<input
+			bind:this={inputEl}
+			bind:value={inputValue}
+			size={Math.max(inputValue.length, placeholder.length, 1)}
+			class="chip-surface chip-input-field outline-none"
+			{placeholder}
+			onkeydown={onKeydown}
+			onblur={onBlur}
+		/>
+	{:else}
+		<button
+			type="button"
+			class="chip-surface chip-input-action inline-flex items-center justify-center font-semibold"
+			aria-label="Add tag"
+			onclick={openInput}
+		>
+			<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
+		</button>
+	{/if}
+
+	{#if action}
+		{@render action()}
+	{/if}
 </div>
 
 <style>
-	.tag-row {
+	.chip-row {
 		gap: var(--chip-input-gap);
 	}
 
-	.tag-surface {
+	.chip-surface {
 		background: var(--chip-input-background);
 		color: var(--chip-input-text);
 		font-size: var(--chip-input-font-size);
 		border-radius: var(--chip-input-border-radius);
 		padding: var(--chip-input-padding);
 		border: 1px solid var(--chip-input-border-color);
+		white-space: nowrap;
 	}
 
-	.tag-selected {
+	.chip-selected {
 		border-color: var(--chip-input-highlight);
 	}
 
-	.tag-surface:hover {
+	.chip-surface:hover {
+		background: var(--chip-input-hover);
+	}
+
+	.chip-hovered {
 		background: var(--chip-input-hover);
 	}
 
-	.tag-input-field:hover {
+	.chip-input-field:hover {
 		background: var(--chip-input-background);
 	}
 </style>

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);
@@ -22,7 +23,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-lg: 32rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-medium: 500;
@@ -234,6 +234,9 @@
   .flex {
     display: flex;
   }
+  .hidden {
+    display: none;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -269,15 +272,6 @@
   .w-full {
     width: 100%;
   }
-  .max-w-lg {
-    max-width: var(--container-lg);
-  }
-  .min-w-20 {
-    min-width: calc(var(--spacing) * 20);
-  }
-  .min-w-36 {
-    min-width: calc(var(--spacing) * 36);
-  }
   .flex-1 {
     flex: 1;
   }
@@ -374,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);
   }
@@ -550,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 {
@@ -559,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 {
@@ -643,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.31",
+	"version": "0.0.34",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",