@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/ui/MultiSortable.svelte

@@ -0,0 +1,287 @@
+<script lang="ts" module>
+	export interface MultiSortableProps<T> {
+		/** Items in this list — bindable so reorders and transfers write back */
+		items: T[];
+		/** Renders each item. Receives (item, index, dragging). */
+		children: import('svelte').Snippet<[T, number, boolean]>;
+		/** Stable key per item — defaults to index (not safe for reordered lists with snippets that need identity) */
+		getKey?: (item: T, index: number) => string | number;
+		/** Layout direction */
+		direction?: 'vertical' | 'horizontal';
+		/** When true, items can't be dragged out of this list (drops in are still allowed) */
+		disabled?: boolean;
+		/** CSS selector for drag handle within each item. When set, drag starts only from this element. */
+		handle?: string;
+		/** Group name — lists sharing a group can move items between each other */
+		group?: string;
+		/** FLIP animation duration in ms when items shift (reorder, receive, or transfer out).
+		 * 0 disables. Requires a stable getKey — with the default index key nothing moves. */
+		animation?: number;
+		/** Gate incoming items from other lists. Return false to reject. Local reorders are always allowed. */
+		canReceive?: (item: T) => boolean;
+		/** Rendered when the list is empty — useful as a visible drop target for the first item. */
+		placeholder?: import('svelte').Snippet;
+		/** Fires when this list changes (reorder, item received, or item removed by transfer out) */
+		onChange?: (items: T[]) => void;
+		class?: string;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import { flip } from 'svelte/animate';
+	import { draggable, droppable, type DragContext } from '../util/DragDrop.js';
+
+	let {
+		items = $bindable(),
+		children,
+		getKey = (_: T, i: number) => i,
+		direction = 'vertical',
+		disabled = false,
+		handle,
+		group = 'default',
+		animation = 150,
+		canReceive,
+		placeholder,
+		onChange,
+		class: classes = ''
+	}: MultiSortableProps<T> = $props();
+
+	const SORTABLE_ID = Math.random().toString(36).slice(2);
+	const TYPE = $derived(`pui-multisortable:${group}`);
+
+	const reducedMotion =
+		typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	const flipDuration = $derived(reducedMotion ? 0 : animation);
+
+	interface MultiSortablePayload {
+		sortableId: string;
+		index: number;
+		item: T;
+		/** Removes the item from its source list — called by the target after inserting. */
+		onRemove: () => void;
+	}
+
+	let draggingIndex = $state<number | null>(null);
+	let dropIndex = $state<number | null>(null);
+	let dropPosition = $state<'before' | 'after'>('before');
+	let container = $state<HTMLElement>();
+
+	function removeAt(index: number) {
+		const next = items.slice();
+		next.splice(index, 1);
+		items = next;
+		// This runs when the item is transferred to another list, which detaches the dragged
+		// element from the DOM. A detached element never fires `dragend`, so onDragEnd won't
+		// reset our state — clear it here or the item shifting into this slot stays faded.
+		draggingIndex = null;
+		dropIndex = null;
+		onChange?.(next);
+	}
+
+	/** Reorder within this list (drag originated here). */
+	function applyMove(from: number, target: number, position: 'before' | 'after') {
+		let to = target + (position === 'after' ? 1 : 0);
+		if (to > from) to--;
+		if (from === to) return;
+		const next = items.slice();
+		const [moved] = next.splice(from, 1);
+		next.splice(to, 0, moved);
+		items = next;
+		onChange?.(next);
+	}
+
+	/** Insert an item received from another list at the current drop marker. */
+	function applyInsert(item: T, target: number | null, position: 'before' | 'after') {
+		const to = target === null ? items.length : target + (position === 'after' ? 1 : 0);
+		const next = items.slice();
+		next.splice(to, 0, item);
+		items = next;
+		onChange?.(next);
+	}
+
+	function accepts(ctx: DragContext<MultiSortablePayload>): boolean {
+		// Reorders from this same list are always allowed.
+		if (ctx.payload.sortableId === SORTABLE_ID) return true;
+		return !canReceive || canReceive(ctx.payload.item);
+	}
+
+	/**
+	 * Positioning lives on the container (not per item) so empty lists, gaps, and
+	 * the space after the last item are all valid drop targets. Walks the rendered
+	 * item rects and picks the insertion marker from the pointer position.
+	 */
+	function handleDragOver(e: DragEvent, ctx: DragContext<MultiSortablePayload>) {
+		if (!accepts(ctx)) return;
+		const host = container;
+		if (!host) return;
+		const itemEls = Array.from(
+			host.querySelectorAll<HTMLElement>(':scope > .pui-msortable-item')
+		);
+		if (itemEls.length === 0) {
+			dropIndex = null;
+			return;
+		}
+		for (let idx = 0; idx < itemEls.length; idx++) {
+			const rect = itemEls[idx].getBoundingClientRect();
+			const mid =
+				direction === 'vertical' ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+			const pointer = direction === 'vertical' ? e.clientY : e.clientX;
+			if (pointer < mid) {
+				dropIndex = idx;
+				dropPosition = 'before';
+				return;
+			}
+		}
+		dropIndex = itemEls.length - 1;
+		dropPosition = 'after';
+	}
+
+	function handleDrop(ctx: DragContext<MultiSortablePayload>) {
+		if (!accepts(ctx)) return;
+		if (ctx.payload.sortableId === SORTABLE_ID) {
+			// Local reorder — the dragged item is guaranteed to be in this list.
+			if (dropIndex !== null) applyMove(ctx.payload.index, dropIndex, dropPosition);
+		} else {
+			// Cross-list transfer: insert here, then have the source drop it.
+			applyInsert(ctx.payload.item, dropIndex, dropPosition);
+			ctx.payload.onRemove();
+		}
+		dropIndex = null;
+	}
+</script>
+
+<div
+	bind:this={container}
+	class="pui-msortable {direction} {classes}"
+	class:is-empty={items.length === 0}
+	use:droppable={{
+		accepts: TYPE,
+		canDrop: (ctx) => accepts(ctx as DragContext<MultiSortablePayload>),
+		onDragOver: (ctx, e) => handleDragOver(e, ctx as DragContext<MultiSortablePayload>),
+		onDragLeave: () => {
+			dropIndex = null;
+		},
+		onDrop: (ctx) => handleDrop(ctx as DragContext<MultiSortablePayload>)
+	}}
+>
+	{#each items as item, i (getKey(item, i))}
+		<div
+			class="pui-msortable-item"
+			class:is-dragging={draggingIndex === i}
+			class:drop-before={dropIndex === i && dropPosition === 'before' && draggingIndex !== i}
+			class:drop-after={dropIndex === i && dropPosition === 'after' && draggingIndex !== i}
+			animate:flip={{ duration: flipDuration }}
+			use:draggable={{
+				payload: {
+					sortableId: SORTABLE_ID,
+					index: i,
+					item,
+					onRemove: () => removeAt(i)
+				} satisfies MultiSortablePayload,
+				type: TYPE,
+				source: SORTABLE_ID,
+				disabled,
+				handle,
+				onDragStart: () => {
+					draggingIndex = i;
+				},
+				onDragEnd: () => {
+					draggingIndex = null;
+					dropIndex = null;
+				}
+			}}
+		>
+			{@render children(item, i, draggingIndex === i)}
+		</div>
+	{/each}
+
+	{#if items.length === 0 && placeholder}
+		<div class="pui-msortable-placeholder">{@render placeholder()}</div>
+	{/if}
+</div>
+
+<style>
+	.pui-msortable {
+		display: flex;
+		gap: 0.25rem;
+	}
+
+	.pui-msortable.vertical {
+		flex-direction: column;
+	}
+
+	.pui-msortable.horizontal {
+		flex-direction: row;
+	}
+
+	/* Keep empty lists a valid, visible drop target. */
+	.pui-msortable.is-empty {
+		min-height: 2.5rem;
+	}
+
+	.pui-msortable-item {
+		position: relative;
+		transition: opacity 0.15s ease;
+	}
+
+	.pui-msortable-item.is-dragging {
+		opacity: 0.35;
+	}
+
+	.pui-msortable-item::before,
+	.pui-msortable-item::after {
+		content: '';
+		position: absolute;
+		background: var(--ui-tertiary);
+		border-radius: 2px;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.1s ease;
+	}
+
+	.pui-msortable.vertical > .pui-msortable-item::before,
+	.pui-msortable.vertical > .pui-msortable-item::after {
+		left: 0;
+		right: 0;
+		height: 2px;
+	}
+
+	.pui-msortable.vertical > .pui-msortable-item::before {
+		top: -2px;
+	}
+
+	.pui-msortable.vertical > .pui-msortable-item::after {
+		bottom: -2px;
+	}
+
+	.pui-msortable.horizontal > .pui-msortable-item::before,
+	.pui-msortable.horizontal > .pui-msortable-item::after {
+		top: 0;
+		bottom: 0;
+		width: 2px;
+	}
+
+	.pui-msortable.horizontal > .pui-msortable-item::before {
+		left: -2px;
+	}
+
+	.pui-msortable.horizontal > .pui-msortable-item::after {
+		right: -2px;
+	}
+
+	.pui-msortable-item.drop-before::before {
+		opacity: 1;
+	}
+
+	.pui-msortable-item.drop-after::after {
+		opacity: 1;
+	}
+
+	.pui-msortable-placeholder {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+</style>

package/dist/ui/MultiSortable.svelte.d.ts

@@ -0,0 +1,50 @@
+export interface MultiSortableProps<T> {
+    /** Items in this list — bindable so reorders and transfers write back */
+    items: T[];
+    /** Renders each item. Receives (item, index, dragging). */
+    children: import('svelte').Snippet<[T, number, boolean]>;
+    /** Stable key per item — defaults to index (not safe for reordered lists with snippets that need identity) */
+    getKey?: (item: T, index: number) => string | number;
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** When true, items can't be dragged out of this list (drops in are still allowed) */
+    disabled?: boolean;
+    /** CSS selector for drag handle within each item. When set, drag starts only from this element. */
+    handle?: string;
+    /** Group name — lists sharing a group can move items between each other */
+    group?: string;
+    /** FLIP animation duration in ms when items shift (reorder, receive, or transfer out).
+     * 0 disables. Requires a stable getKey — with the default index key nothing moves. */
+    animation?: number;
+    /** Gate incoming items from other lists. Return false to reject. Local reorders are always allowed. */
+    canReceive?: (item: T) => boolean;
+    /** Rendered when the list is empty — useful as a visible drop target for the first item. */
+    placeholder?: import('svelte').Snippet;
+    /** Fires when this list changes (reorder, item received, or item removed by transfer out) */
+    onChange?: (items: T[]) => void;
+    class?: string;
+}
+declare function $$render<T>(): {
+    props: MultiSortableProps<T>;
+    exports: {};
+    bindings: "items";
+    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(): "items";
+    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 MultiSortable: $$IsomorphicComponent;
+type MultiSortable<T> = InstanceType<typeof MultiSortable<T>>;
+export default MultiSortable;

package/dist/ui/Pagination.svelte

@@ -4,10 +4,14 @@
 	import ActionIcon from './ActionIcon.svelte';
 	import { iconChevronLeft } from '../icon/index.js';
 
-	interface Props {
+	export interface PaginationProps {
+		/** Currently selected page number (bindable) */
 		selectedPage?: number;
+		/** Total number of pages */
 		totalPages?: number;
+		/** Callback when page changes */
 		onPageChange?: (page: number) => void;
+		/** Maximum number of page buttons to display */
 		maxPageButtons?: number;
 	}
 
@@ -16,7 +20,7 @@
 		totalPages,
 		onPageChange = (page: number) => {},
 		maxPageButtons = 8
-	}: Props = $props();
+	}: PaginationProps = $props();
 
 	type Page = { page: number | undefined; isSelected: boolean };
 
@@ -25,7 +29,9 @@
 
 		selectedPage = page;
 		onPageChange(page);
-	}	function determinePages(selectedPage: number, totalPages?: number) {
+	}
+
+	function determinePages(selectedPage: number, totalPages: number | undefined = undefined) {
 		let pages: Page[] = [];
 
 		function push(page: number | undefined) {
@@ -90,7 +96,7 @@
 <div class="pagination-container">
 	<ActionIcon
 		svg={iconChevronLeft}
-		variant="primary-outline"
+		variant="secondary"
 		onclick={() => setPage(selectedPage - 1)}
 		disabled={selectedPage <= 1}
 	/>
@@ -98,7 +104,7 @@
 	{#each determinePages(selectedPage, totalPages) as page}
 		{#if page.page}
 			<Button
-				variant={page.isSelected ? 'primary' : 'primary-outline'}
+				variant={page.isSelected ? 'secondary-selected' : 'secondary'}
 				class="paginate-button"
 				onclick={() => setPage(page.page!)}>{page.page}</Button
 			>
@@ -109,7 +115,7 @@
 
 	<ActionIcon
 		svg={chevronRight}
-		variant="primary-outline"
+		variant="secondary"
 		disabled={totalPages === undefined || selectedPage >= totalPages}
 		onclick={() => setPage(selectedPage + 1)}
 	/>
@@ -119,7 +125,7 @@
 	.pagination-container {
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 	}
 
 	.pagination-container :global(.paginate-button) {
@@ -128,8 +134,8 @@
 		display: flex;
 		justify-content: center;
 	}
-
+	
 	:global(.dark) .pagination-container :global(.paginate-button.secondary-selected) {
-		color: var(--pui-color-black);
+		color: black;
 	}
 </style>

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

@@ -1,9 +1,13 @@
-interface Props {
+export interface PaginationProps {
+    /** Currently selected page number (bindable) */
     selectedPage?: number;
+    /** Total number of pages */
     totalPages?: number;
+    /** Callback when page changes */
     onPageChange?: (page: number) => void;
+    /** Maximum number of page buttons to display */
     maxPageButtons?: number;
 }
-declare const Pagination: import("svelte").Component<Props, {}, "selectedPage">;
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "selectedPage">;
 type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

package/dist/ui/Popover.svelte

@@ -1,41 +1,50 @@
 <!-- drop down component that displays a button, when clicked on the children expand -->
 <script lang="ts">
-	import type { Snippet } from "svelte";
-	import Button from "./Button.svelte";
-	import { clickOutside } from "../actions/ClickOutside.js";
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+	import { clickOutside } from '../util/ClickOutside.js';
 
-	type PopoverPosition = "top" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
-	type PopoverTrigger = "click" | "hover";
+	type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+	type PopoverTrigger = 'click' | 'hover';
 
-	interface Props {
+	export interface PopoverProps {
+		/** Whether the popover is visible (bindable) */
 		show?: boolean;
+		/** Text label for the default trigger button */
 		label?: string | undefined;
+		/** Position of the popover relative to trigger */
 		position?: PopoverPosition;
+		/** Additional CSS classes */
 		class?: string;
+		/** Custom width for the popover content */
 		cssWidth?: string;
+		/** Custom trigger button content */
 		button?: Snippet;
+		/** Popover content */
 		children?: Snippet;
+		/** How to trigger the popover */
 		trigger?: PopoverTrigger;
+		/** Delay before showing on hover (ms) */
 		hoverDelay?: number;
 	}
 
 	let {
 		show = $bindable(false),
 		label,
-		position = "bottom",
-		class: classes = "",
-		cssWidth = "auto",
+		position = 'bottom',
+		class: classes = '',
+		cssWidth = 'auto',
 		button,
 		children,
-		trigger = "click",
-		hoverDelay = 1000,
-	}: Props = $props();
+		trigger = 'click',
+		hoverDelay = 1000
+	}: PopoverProps = $props();
 
 	let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
 	let isHovering = false;
 
 	function handleMouseEnter() {
-		if (trigger === "hover") {
+		if (trigger === 'hover') {
 			isHovering = true;
 			hoverTimeout = setTimeout(() => {
 				if (isHovering) {
@@ -46,7 +55,7 @@
 	}
 
 	function handleMouseLeave() {
-		if (trigger === "hover") {
+		if (trigger === 'hover') {
 			isHovering = false;
 			if (hoverTimeout) {
 				clearTimeout(hoverTimeout);
@@ -62,19 +71,19 @@
 	}
 
 	function handleClick() {
-		if (trigger === "click") {
+		if (trigger === 'click') {
 			show = !show;
 		}
 	}
 
 	function handleContentMouseEnter() {
-		if (trigger === "hover") {
+		if (trigger === 'hover') {
 			isHovering = true;
 		}
 	}
 
 	function handleContentMouseLeave() {
-		if (trigger === "hover") {
+		if (trigger === 'hover') {
 			isHovering = false;
 			setTimeout(() => {
 				if (!isHovering) {
@@ -85,15 +94,12 @@
 	}
 </script>
 
-<div class="popover-wrapper">
-	<div
-		class="popover {classes}"
-		use:clickOutside={() => trigger === "click" && (show = false)}
-	>
+<div class="d-flex">
+	<div class="popover {classes}" use:clickOutside={() => trigger === 'click' && (show = false)}>
 		{#if button}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-			<button
+			<button 
 				onclick={handleClick}
 				onmouseenter={handleMouseEnter}
 				onmouseleave={handleMouseLeave}
@@ -130,10 +136,6 @@
 </div>
 
 <style>
-	.popover-wrapper {
-		display: flex;
-	}
-
 	.popover {
 		position: relative;
 	}
@@ -141,12 +143,12 @@
 	.popover-content {
 		display: block;
 		position: absolute;
-		background-color: var(--pui-paper-body-bg);
-		border: 1px solid var(--pui-border-default);
+		background-color: var(--paper-body-bg);
+		border: 1px solid var(--border-color);
 		min-width: 160px;
-		box-shadow: var(--pui-shadow-lg);
-		z-index: var(--pui-z-dropdown);
-		border-radius: var(--pui-radius-base);
+		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+		z-index: 1000;
+		border-radius: 4px;
 	}
 
 	/* Position-specific styles */
@@ -154,45 +156,33 @@
 		top: 100%;
 		left: 50%;
 		transform: translateX(-50%);
-		margin-top: var(--pui-spacing-1);
-	}
-
-	.popover-bottom-left {
-		top: 100%;
-		right: calc(50% - 16px);
-		margin-top: var(--pui-spacing-1);
-	}
-
-	.popover-bottom-right {
-		top: 100%;
-		left: calc(50% - 16px);
-		margin-top: var(--pui-spacing-1);
+		margin-top: 4px;
 	}
 
 	.popover-top {
 		bottom: 100%;
 		left: 50%;
 		transform: translateX(-50%);
-		margin-bottom: var(--pui-spacing-1);
+		margin-bottom: 4px;
 	}
 
 	.popover-right {
 		top: 50%;
 		left: 100%;
 		transform: translateY(-50%);
-		margin-left: var(--pui-spacing-1);
+		margin-left: 4px;
 	}
 
 	.popover-left {
 		top: 50%;
 		right: 100%;
 		transform: translateY(-50%);
-		margin-right: var(--pui-spacing-1);
+		margin-right: 4px;
 	}
 
 	/* Arrow indicators for each position */
 	.popover-content::before {
-		content: "";
+		content: '';
 		position: absolute;
 		border: 6px solid transparent;
 	}
@@ -201,40 +191,28 @@
 		top: -12px;
 		left: 50%;
 		transform: translateX(-50%);
-		border-bottom-color: var(--pui-border-default);
-	}
-
-	.popover-bottom-left::before {
-		top: -12px;
-		right: 12px;
-		border-bottom-color: var(--pui-border-default);
-	}
-
-	.popover-bottom-right::before {
-		top: -12px;
-		left: 12px;
-		border-bottom-color: var(--pui-border-default);
+		border-bottom-color: var(--border-color);
 	}
 
 	.popover-top::before {
 		bottom: -12px;
 		left: 50%;
 		transform: translateX(-50%);
-		border-top-color: var(--pui-border-default);
+		border-top-color: var(--border-color);
 	}
 
 	.popover-right::before {
 		top: 50%;
 		left: -12px;
 		transform: translateY(-50%);
-		border-right-color: var(--pui-border-default);
+		border-right-color: var(--border-color);
 	}
 
 	.popover-left::before {
 		top: 50%;
 		right: -12px;
 		transform: translateY(-50%);
-		border-left-color: var(--pui-border-default);
+		border-left-color: var(--border-color);
 	}
 
 	/* clear all button styles */