@viniaraujo68/plinth 0.2.0 → 0.3.0

package/README.md

@@ -258,7 +258,7 @@ base URL, how auth is injected, and how the backend spells an error body.
 | `@viniaraujo68/plinth`             | `AsyncAction`, the error reporter, `LIBRARY_VERSION`                                                       |
 | `@viniaraujo68/plinth/theme`       | `ThemeContext`, `ThemeController`, `ThemeToggle`, the cookie helpers, `createCssColorReader`               |
 | `@viniaraujo68/plinth/theme.css`   | The stylesheet the tokens are declared in                                                                  |
-| `@viniaraujo68/plinth/attachments` | The `tooltip` attachment, usable on any tag                                                                |
+| `@viniaraujo68/plinth/attachments` | The `tooltip` attachment, usable on any tag, and `sortable`, which reorders a list from its drag handles   |
 | `@viniaraujo68/plinth/components`  | The primitives, the `DateRange` and option-matching helpers                                                |
 | `@viniaraujo68/plinth/confirm`     | `confirm`, `Confirmer`, the challenge helpers                                                              |
 | `@viniaraujo68/plinth/shell`       | `AppShell`, `Breadcrumbs`                                                                                  |
@@ -270,7 +270,7 @@ base URL, how auth is injected, and how the backend spells an error body.
 | `@viniaraujo68/plinth/formatters`  | `createFormatters`, over `Intl`                                                                            |
 
 The components entry point ships `AsyncButton`, `Combobox`, `Copyable`, `DateRangePicker`,
-`Dialog`, `Dropdown`, `ErrorDisplay`, `ErrorPage`, `JsonInput`, `Listbox`, `LoadingButton`, `Logo`,
+`Dialog`, `DragHandle`, `Dropdown`, `ErrorDisplay`, `ErrorPage`, `JsonInput`, `Listbox`, `LoadingButton`, `Logo`,
 `Modal`, `MultiSelect`, `Paginator`, `RefreshButton`, `SegmentedControl`, `Select`, `Skeleton` and
 `Tooltip`. Every one of them has a page in the showcase.
 It also exports the mark's outline as data — `PICK_PATH` and `PICK_CLIP_PATH` — for anything

package/dist/attachments/index.d.ts

@@ -1 +1,2 @@
+export { sortable, type SortableOptions } from "./sortable.js";
 export { tooltip, tooltipPanel, type TooltipOptions } from "./tooltip.js";

package/dist/attachments/index.js

@@ -1 +1,2 @@
+export { sortable } from "./sortable.js";
 export { tooltip, tooltipPanel } from "./tooltip.js";

package/dist/attachments/sortable.d.ts

@@ -0,0 +1,6 @@
+import type { Attachment } from "svelte/attachments";
+export interface SortableOptions {
+    onmove: (from: number, to: number) => void;
+    disabled?: boolean;
+}
+export declare const sortable: (options: SortableOptions) => Attachment<HTMLElement>;

package/dist/attachments/sortable.js

@@ -0,0 +1,227 @@
+import { tick } from "svelte";
+const ITEM = "[data-sortable-item]";
+const HANDLE = "[data-sortable-handle]";
+const DRAGGING = "data-sortable-dragging";
+const ANIMATION_ID = "plinth-sortable";
+const SHIFT_MS = 180;
+const SETTLE_MS = 160;
+const EASING = "cubic-bezier(0.2, 0, 0, 1)";
+const KEY_STEPS = {
+    ArrowLeft: -1,
+    ArrowUp: -1,
+    ArrowRight: 1,
+    ArrowDown: 1,
+};
+const destination = (key, from, last) => {
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return last;
+    return key in KEY_STEPS ? from + KEY_STEPS[key] : null;
+};
+const layoutCenter = (element) => ({
+    x: element.offsetLeft + element.offsetWidth / 2,
+    y: element.offsetTop + element.offsetHeight / 2,
+});
+const draggedCenter = (current) => ({
+    x: current.startLeft + current.item.offsetWidth / 2 + current.x - current.grabX,
+    y: current.startTop + current.item.offsetHeight / 2 + current.y - current.grabY,
+});
+const distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const cancelShift = (element) => {
+    for (const animation of element.getAnimations())
+        if (animation.id === ANIMATION_ID)
+            animation.cancel();
+};
+const offsetOf = (element) => {
+    const [x = "0", y = "0"] = element.style.translate.split(" ");
+    return { x: Number.parseFloat(x) || 0, y: Number.parseFloat(y) || 0 };
+};
+export const sortable = (options) => (container) => {
+    let drag = null;
+    let shifting = false;
+    let frame = 0;
+    const items = () => [...container.querySelectorAll(ITEM)];
+    const handleOf = (event) => {
+        const handle = event.target?.closest(HANDLE) ?? null;
+        return handle && container.contains(handle) ? handle : null;
+    };
+    const shift = async (move, still) => {
+        const before = new Map(items().map((element) => [element, element.getBoundingClientRect()]));
+        move();
+        await tick();
+        if (reducedMotion())
+            return;
+        for (const element of items()) {
+            const previous = before.get(element);
+            if (element === still || !previous)
+                continue;
+            cancelShift(element);
+            const current = element.getBoundingClientRect();
+            const dx = previous.left - current.left;
+            const dy = previous.top - current.top;
+            if (!dx && !dy)
+                continue;
+            element.animate([{ translate: `${dx}px ${dy}px` }, { translate: "0px 0px" }], {
+                duration: SHIFT_MS,
+                easing: EASING,
+                id: ANIMATION_ID,
+            });
+        }
+    };
+    const follow = () => {
+        if (!drag)
+            return;
+        const { item } = drag;
+        const dx = drag.x - drag.grabX - (item.offsetLeft - drag.startLeft);
+        const dy = drag.y - drag.grabY - (item.offsetTop - drag.startTop);
+        item.style.translate = `${dx}px ${dy}px`;
+    };
+    const targetFor = (current) => {
+        const all = items();
+        const from = all.indexOf(current.item);
+        if (from < 0)
+            return null;
+        const center = draggedCenter(current);
+        let index = -1;
+        let nearest = Infinity;
+        for (const [position, element] of all.entries()) {
+            if (element === current.item)
+                continue;
+            const gap = distance(center, layoutCenter(element));
+            if (gap < nearest) {
+                nearest = gap;
+                index = position;
+            }
+        }
+        if (index < 0)
+            return null;
+        const target = all[index];
+        const middle = layoutCenter(target);
+        const sameRow = Math.abs(target.offsetTop - current.item.offsetTop) < target.offsetHeight / 2;
+        const forward = index > from;
+        const passed = sameRow ? forward === center.x > middle.x : forward === center.y > middle.y;
+        return passed ? { from, to: index } : null;
+    };
+    const step = () => {
+        if (!drag || shifting)
+            return;
+        follow();
+        const target = targetFor(drag);
+        if (!target)
+            return;
+        shifting = true;
+        const { item } = drag;
+        void shift(() => {
+            options.onmove(target.from, target.to);
+        }, item).then(() => {
+            shifting = false;
+            follow();
+            frame = requestAnimationFrame(step);
+        });
+    };
+    const settle = (current) => {
+        const { item, restore } = current;
+        const offset = offsetOf(item);
+        item.style.translate = "";
+        item.removeAttribute(DRAGGING);
+        const done = () => {
+            item.style.position = restore.position;
+            item.style.zIndex = restore.zIndex;
+            item.style.willChange = restore.willChange;
+        };
+        if (reducedMotion() || (!offset.x && !offset.y)) {
+            done();
+            return;
+        }
+        const animation = item.animate([{ translate: `${offset.x}px ${offset.y}px` }, { translate: "0px 0px" }], { duration: SETTLE_MS, easing: EASING });
+        void animation.finished.then(done, done);
+    };
+    const stop = () => {
+        cancelAnimationFrame(frame);
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+        window.removeEventListener("pointercancel", onPointerUp);
+        if (!drag)
+            return;
+        const current = drag;
+        drag = null;
+        settle(current);
+    };
+    function onPointerMove(event) {
+        if (drag?.pointerId !== event.pointerId)
+            return;
+        drag.x = event.clientX;
+        drag.y = event.clientY;
+        step();
+    }
+    function onPointerUp(event) {
+        if (drag?.pointerId === event.pointerId)
+            stop();
+    }
+    const onPointerDown = (event) => {
+        if (options.disabled || event.button !== 0 || drag)
+            return;
+        const item = handleOf(event)?.closest(ITEM);
+        if (!item)
+            return;
+        event.preventDefault();
+        cancelShift(item);
+        drag = {
+            item,
+            pointerId: event.pointerId,
+            grabX: event.clientX,
+            grabY: event.clientY,
+            startLeft: item.offsetLeft,
+            startTop: item.offsetTop,
+            x: event.clientX,
+            y: event.clientY,
+            restore: {
+                position: item.style.position,
+                zIndex: item.style.zIndex,
+                willChange: item.style.willChange,
+            },
+        };
+        if (getComputedStyle(item).position === "static")
+            item.style.position = "relative";
+        item.style.zIndex = "10";
+        item.style.willChange = "translate";
+        item.setAttribute(DRAGGING, "");
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("pointercancel", onPointerUp);
+    };
+    const onTouchMove = (event) => {
+        if (drag)
+            event.preventDefault();
+    };
+    const onKeyDown = (event) => {
+        if (options.disabled || drag)
+            return;
+        const item = handleOf(event)?.closest(ITEM);
+        if (!item)
+            return;
+        const all = items();
+        const from = all.indexOf(item);
+        const last = all.length - 1;
+        const to = destination(event.key, from, last);
+        if (to === null || from < 0)
+            return;
+        event.preventDefault();
+        if (to < 0 || to > last || to === from)
+            return;
+        void shift(() => {
+            options.onmove(from, to);
+        }).then(() => items()[to]?.querySelector(HANDLE)?.focus());
+    };
+    container.addEventListener("pointerdown", onPointerDown);
+    container.addEventListener("touchmove", onTouchMove, { passive: false });
+    container.addEventListener("keydown", onKeyDown);
+    return () => {
+        stop();
+        container.removeEventListener("pointerdown", onPointerDown);
+        container.removeEventListener("touchmove", onTouchMove);
+        container.removeEventListener("keydown", onKeyDown);
+    };
+};

package/dist/components/DragHandle.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLButtonAttributes, "type" | "children"> {
+    label: string;
+  }
+
+  let { label, class: className = "", ...rest }: Props = $props();
+</script>
+
+<button
+  {...rest}
+  type="button"
+  aria-label={label}
+  data-sortable-handle
+  class="inline-grid shrink-0 cursor-grab touch-none place-items-center self-stretch px-1 text-base-content/45 select-none hover:text-base-content focus-visible:text-base-content focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary in-data-sortable-dragging:cursor-grabbing {className}"
+>
+  <svg viewBox="0 0 10 15" class="h-[15px] w-2.5" fill="currentColor" aria-hidden="true">
+    <circle cx="2.5" cy="2.5" r="1.5" />
+    <circle cx="7.5" cy="2.5" r="1.5" />
+    <circle cx="2.5" cy="7.5" r="1.5" />
+    <circle cx="7.5" cy="7.5" r="1.5" />
+    <circle cx="2.5" cy="12.5" r="1.5" />
+    <circle cx="7.5" cy="12.5" r="1.5" />
+  </svg>
+</button>

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

@@ -0,0 +1,7 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLButtonAttributes, "type" | "children"> {
+    label: string;
+}
+declare const DragHandle: import("svelte").Component<Props, {}, "">;
+type DragHandle = ReturnType<typeof DragHandle>;
+export default DragHandle;

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export { default as Combobox } from "./Combobox.svelte";
 export { default as Copyable } from "./Copyable.svelte";
 export { default as DateRangePicker } from "./DateRangePicker.svelte";
 export { default as Dialog } from "./Dialog.svelte";
+export { default as DragHandle } from "./DragHandle.svelte";
 export { default as Dropdown } from "./Dropdown.svelte";
 export { default as ErrorDisplay } from "./ErrorDisplay.svelte";
 export { default as ErrorPage } from "./ErrorPage.svelte";

package/dist/components/index.js

@@ -3,6 +3,7 @@ export { default as Combobox } from "./Combobox.svelte";
 export { default as Copyable } from "./Copyable.svelte";
 export { default as DateRangePicker } from "./DateRangePicker.svelte";
 export { default as Dialog } from "./Dialog.svelte";
+export { default as DragHandle } from "./DragHandle.svelte";
 export { default as Dropdown } from "./Dropdown.svelte";
 export { default as ErrorDisplay } from "./ErrorDisplay.svelte";
 export { default as ErrorPage } from "./ErrorPage.svelte";

package/dist/index.d.ts

@@ -5,6 +5,6 @@
  * no portable way to import its own manifest, and a consumer that only wants to log a version
  * should not have to bundle one. `version.spec.ts` fails when this drifts from the manifest.
  */
-export declare const LIBRARY_VERSION = "0.2.0";
+export declare const LIBRARY_VERSION = "0.3.0";
 export { AsyncAction, type AsyncActionStatus, type AsyncFn } from "./async-action.svelte.js";
 export { reportError, setErrorReporter, type ErrorReporter } from "./error.js";

package/dist/index.js

@@ -5,7 +5,7 @@
  * no portable way to import its own manifest, and a consumer that only wants to log a version
  * should not have to bundle one. `version.spec.ts` fails when this drifts from the manifest.
  */
-export const LIBRARY_VERSION = "0.2.0";
+export const LIBRARY_VERSION = "0.3.0";
 // The root entry carries only what is not tied to one area: the error channel an app installs
 // once, and the async state machine the components are built on. Everything visual is reached
 // through a subpath — `/theme`, `/attachments`, `/components`, `/toast` — so importing a button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viniaraujo68/plinth",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A personal Svelte 5 design system: theme, application shell, interface primitives, routing metadata, a fetch wrapper and locale-aware formatters.",
   "license": "MIT",
   "type": "module",