@lostgradient/cinder 0.4.0 → 0.5.0

package/dist/server/index.server-gdtt4a78.js

@@ -0,0 +1,143 @@
+import {
+  Tooltip
+} from "./index.server-axf8h1gd.js";
+import {
+  Avatar
+} from "./index.server-0m5sf323.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/avatar-group/avatar-group.svelte
+import * as $ from "svelte/internal/server";
+function Avatar_group($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const defaultMaxVisible = 5;
+    let {
+      avatars = [],
+      maxVisible = defaultMaxVisible,
+      overlap = "0.75rem",
+      zOrder = "last-on-top",
+      size = "md",
+      shape = "circle",
+      overflowLabel,
+      label = "Collaborators",
+      "aria-label": consumerAriaLabel,
+      class: className,
+      style,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const accessibleName = $.derived(() => typeof consumerAriaLabel === "string" && consumerAriaLabel.trim().length > 0 ? consumerAriaLabel : label);
+    const normalizedMaxVisible = $.derived(() => normalizeMaxVisible(maxVisible));
+    const visibleCount = $.derived(() => Math.min(normalizedMaxVisible(), avatars.length));
+    const hiddenCount = $.derived(() => Math.max(0, avatars.length - visibleCount()));
+    const hasOverflow = $.derived(() => hiddenCount() > 0);
+    const computedOverflowLabel = $.derived(() => overflowLabel ?? `${hiddenCount()} more collaborators`);
+    const normalizedOverlap = $.derived(() => normalizeOverlap(overlap));
+    const identityCounts = $.derived(() => countAvatarIdentities(avatars));
+    const rootStyle = $.derived(() => [
+      style,
+      `--cinder-avatar-group-overlap: ${normalizedOverlap()}`
+    ].filter(Boolean).join("; "));
+    const visibleAvatars = $.derived(() => avatars.slice(0, visibleCount()).map((avatar, index) => ({
+      avatar,
+      key: getAvatarKey(avatar, index, identityCounts()),
+      trimmedName: (avatar.name ?? "").trim(),
+      stackIndex: getVisibleStackIndex(index, visibleCount(), zOrder)
+    })));
+    const overflowStackIndex = $.derived(() => getOverflowStackIndex(visibleCount(), zOrder));
+    function normalizeMaxVisible(value) {
+      if (!Number.isFinite(value))
+        return defaultMaxVisible;
+      return Math.max(0, Math.floor(value));
+    }
+    function normalizeOverlap(value) {
+      const trimmed = value.trim();
+      if (/^(?:0|(?:\d*\.)?\d+(?:px|rem|em|ch|ex|vw|vh|vmin|vmax|%))$/.test(trimmed)) {
+        return trimmed;
+      }
+      return "0.75rem";
+    }
+    function countAvatarIdentities(items) {
+      const counts = new Map;
+      for (const avatar of items) {
+        const identity = avatar.id ?? avatar.name ?? "";
+        counts.set(identity, (counts.get(identity) ?? 0) + 1);
+      }
+      return counts;
+    }
+    function getAvatarKey(avatar, index, counts) {
+      const identity = avatar.id ?? avatar.name ?? "";
+      return counts.get(identity) === 1 ? identity : `${identity}:${index}`;
+    }
+    function getVisibleStackIndex(index, count, order) {
+      if (order === "first-on-top")
+        return count - index;
+      return index + 1;
+    }
+    function getOverflowStackIndex(count, order) {
+      if (count === 0)
+        return 0;
+      if (order === "first-on-top")
+        return 0;
+      return count + 1;
+    }
+    function avatarSourceProps(src) {
+      return src === undefined ? {} : { src };
+    }
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-avatar-group", className)),
+      style: rootStyle(),
+      role: "list",
+      "aria-label": accessibleName(),
+      "data-cinder-size": size,
+      "data-cinder-shape": shape,
+      "data-cinder-z-order": zOrder
+    })}><!--[-->`);
+    const each_array = $.ensure_array_like(visibleAvatars());
+    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+      let item = each_array[$$index];
+      $$renderer2.push(`<span class="cinder-avatar-group__item" role="listitem"${$.attr_style(`--cinder-avatar-group-index: ${item.stackIndex}`)}>`);
+      if (item.trimmedName) {
+        $$renderer2.push("<!--[0-->");
+        Tooltip($$renderer2, {
+          text: item.trimmedName,
+          describe: false,
+          children: ($$renderer3) => {
+            $$renderer3.push(`<span class="cinder-avatar-group__trigger" role="img" tabindex="0"${$.attr("aria-label", item.trimmedName)}>`);
+            Avatar($$renderer3, $.spread_props([
+              avatarSourceProps(item.avatar.src),
+              { name: item.trimmedName, alt: "", size, shape }
+            ]));
+            $$renderer3.push(`<!----></span>`);
+          },
+          $$slots: { default: true }
+        });
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<span class="cinder-avatar-group__trigger">`);
+        Avatar($$renderer2, $.spread_props([
+          avatarSourceProps(item.avatar.src),
+          { name: "", alt: "", size, shape }
+        ]));
+        $$renderer2.push(`<!----></span>`);
+      }
+      $$renderer2.push(`<!--]--></span>`);
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (hasOverflow()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-avatar-group__item cinder-avatar-group__overflow" role="listitem"${$.attr("aria-label", computedOverflowLabel())}${$.attr_style(`--cinder-avatar-group-index: ${overflowStackIndex()}`)}>+${$.escape(hiddenCount())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  }, Avatar_group);
+}
+
+export { Avatar_group };
+
+//# debugId=EB74332EC67B8CD964756E2164756E21

package/dist/server/index.server-ge07r1p8.js

@@ -0,0 +1,8 @@
+// ../../node_modules/esm-env/false.js
+var false_default = false;
+
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+export { false_default, true_default };
+
+//# debugId=8D925CE476CFC24C64756E2164756E21

package/dist/server/index.server-gf20dp5p.js

@@ -0,0 +1,9 @@
+import {
+  Tree_item
+} from "./index.server-w7a9knxq.js";
+
+// src/components/tree-item/index.ts
+var tree_item_default = Tree_item;
+export { tree_item_default };
+
+//# debugId=918F2EC2D9B8064564756E2164756E21

package/dist/server/index.server-gmd6gbwb.js

@@ -0,0 +1,462 @@
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/utilities/sortable-controller.svelte.ts
+import * as $ from "svelte/internal/server";
+import { createContext } from "svelte";
+var [getSortableContext, setSortableContext] = createContext();
+var defaultAnnouncements = {
+  lifted: (itemLabel, position, total) => `${itemLabel}, lifted. Current position ${position} of ${total}. Use arrow keys to move. Space to drop, Escape to cancel.`,
+  moved: (itemLabel, position, total) => `${itemLabel}, moved to position ${position} of ${total}.`,
+  dropped: (itemLabel, position, total) => `${itemLabel}, dropped at position ${position} of ${total}.`,
+  cancelled: (itemLabel) => `Reorder cancelled. ${itemLabel} returned to original position.`
+};
+
+class SortableController {
+  phase = "idle";
+  liftedKey = null;
+  liftedLabel = "";
+  liftedFrom = 0;
+  liftedTo = 0;
+  #announce;
+  #announcements;
+  constructor(options) {
+    this.#announce = options.announce;
+    this.#announcements = { ...defaultAnnouncements, ...options.announcements };
+  }
+  lift(key, fromIndex, itemLabel, total) {
+    if (this.phase === "lifted")
+      return;
+    this.phase = "lifted";
+    this.liftedKey = key;
+    this.liftedLabel = itemLabel;
+    this.liftedFrom = fromIndex;
+    this.liftedTo = fromIndex;
+    this.#announce(this.#announcements.lifted(itemLabel, fromIndex + 1, total));
+  }
+  move(toIndex, itemLabel, total, options = {}) {
+    if (this.phase !== "lifted")
+      return false;
+    const clamped = Math.max(0, Math.min(total - 1, toIndex));
+    if (clamped === this.liftedTo)
+      return false;
+    this.liftedTo = clamped;
+    if (options.announce !== false) {
+      this.#announce(this.#announcements.moved(itemLabel, clamped + 1, total));
+    }
+    return true;
+  }
+  drop(items, itemLabel) {
+    if (this.phase !== "lifted" || this.liftedKey === null)
+      return null;
+    const fromIndex = this.liftedFrom;
+    const toIndex = this.liftedTo;
+    const itemKey = this.liftedKey;
+    this.#announce(this.#announcements.dropped(itemLabel, toIndex + 1, items.length));
+    this.#reset();
+    if (fromIndex === toIndex)
+      return null;
+    if (fromIndex < 0 || fromIndex >= items.length || toIndex < 0 || toIndex >= items.length) {
+      return null;
+    }
+    const nextItems = reorder(items, fromIndex, toIndex);
+    return { nextItems, change: { itemKey, fromIndex, toIndex } };
+  }
+  completeDrop(itemLabel, total) {
+    if (this.phase !== "lifted")
+      return;
+    const boundedTotal = Math.max(1, total);
+    const position = Math.max(1, Math.min(this.liftedTo + 1, boundedTotal));
+    this.#announce(this.#announcements.dropped(itemLabel, position, boundedTotal));
+    this.#reset();
+  }
+  cancel(itemLabel) {
+    if (this.phase !== "lifted")
+      return;
+    this.#announce(this.#announcements.cancelled(itemLabel ?? this.liftedLabel));
+    this.#reset();
+  }
+  reconcileLiftedKey(items, getKey) {
+    if (this.phase !== "lifted" || this.liftedKey === null)
+      return;
+    const currentIndex = items.findIndex((it) => getKey(it) === this.liftedKey);
+    if (currentIndex < 0) {
+      this.#announce(this.#announcements.cancelled(this.liftedLabel));
+      this.#reset();
+      return;
+    }
+    this.liftedTo = Math.max(0, Math.min(items.length - 1, this.liftedTo));
+    if (currentIndex !== this.liftedFrom) {
+      this.liftedFrom = currentIndex;
+    }
+  }
+  #reset() {
+    this.phase = "idle";
+    this.liftedKey = null;
+    this.liftedLabel = "";
+    this.liftedFrom = 0;
+    this.liftedTo = 0;
+  }
+}
+function reorder(items, fromIndex, toIndex) {
+  const result = [...items];
+  const spliced = result.splice(fromIndex, 1);
+  if (spliced.length === 0)
+    return result;
+  result.splice(toIndex, 0, ...spliced);
+  return result;
+}
+
+// src/components/_sortable-item.svelte
+import * as $2 from "svelte/internal/server";
+function _sortable_item($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const rowId = $2.props_id($$renderer2);
+    let {
+      item: _item,
+      itemKey,
+      index,
+      itemLabel,
+      formatHandleLabel,
+      children,
+      handle,
+      instructionsId,
+      total,
+      class: className
+    } = $$props;
+    const context = getSortableContext();
+    let handleEl = null;
+    let rowEl = null;
+    let pointerActive = false;
+    let pointerId = null;
+    let moveRafHandle = null;
+    let scrollRafHandle = null;
+    let latestPointerY = 0;
+    let latestPointerX = 0;
+    let listEl = null;
+    let windowPointerListenersActive = false;
+    let previewX = 0;
+    let previewY = 0;
+    let isDraggingWithPointer = false;
+    let previewWidth = 0;
+    let previewHeight = 0;
+    let previewPortalEl = null;
+    const isLifted = $2.derived(() => context.controller.phase === "lifted" && context.controller.liftedKey === itemKey);
+    const isDropTarget = $2.derived(() => context.controller.phase === "lifted" && context.controller.liftedTo === index);
+    const itemContext = {
+      get isLifted() {
+        return isLifted();
+      },
+      get isDropTarget() {
+        return isDropTarget();
+      },
+      get visualIndex() {
+        return index;
+      },
+      get total() {
+        return total;
+      }
+    };
+    const handleLabel = $2.derived(() => formatHandleLabel(itemLabel));
+    let grabOffsetX = 0;
+    let grabOffsetY = 0;
+    function createPreviewPortal(pointerX, pointerY) {
+      if (typeof document === "undefined")
+        return;
+      if (previewPortalEl)
+        return;
+      if (!rowEl)
+        return;
+      const rect = rowEl.getBoundingClientRect();
+      previewWidth = rect.width;
+      previewHeight = rect.height;
+      grabOffsetX = pointerX - rect.left;
+      grabOffsetY = pointerY - rect.top;
+      const portal = document.createElement("div");
+      portal.setAttribute("data-cinder-drag-preview", "");
+      portal.setAttribute("aria-hidden", "true");
+      portal.setAttribute("inert", "");
+      portal.className = "cinder-sortable-drag-preview";
+      const clone = rowEl.cloneNode(true);
+      clone.removeAttribute("data-sortable-row");
+      clone.removeAttribute("data-key");
+      clone.removeAttribute("data-key-type");
+      clone.removeAttribute("data-row-id");
+      clone.removeAttribute("id");
+      clone.querySelectorAll("[id]").forEach((descendant) => {
+        descendant.removeAttribute("id");
+      });
+      portal.appendChild(clone);
+      portal.style.setProperty("--preview-width", `${previewWidth}px`);
+      portal.style.setProperty("--preview-height", `${previewHeight}px`);
+      portal.style.setProperty("--preview-left", `${rect.left}px`);
+      portal.style.setProperty("--preview-top", `${rect.top}px`);
+      portal.style.setProperty("--preview-dx", "0px");
+      portal.style.setProperty("--preview-dy", "0px");
+      document.body.appendChild(portal);
+      previewPortalEl = portal;
+      isDraggingWithPointer = true;
+    }
+    function updatePreviewPosition(pointerX, pointerY) {
+      if (!previewPortalEl || !rowEl)
+        return;
+      if (typeof document === "undefined")
+        return;
+      const rect = rowEl.getBoundingClientRect();
+      const dx = pointerX - grabOffsetX - rect.left;
+      const dy = pointerY - grabOffsetY - rect.top;
+      previewPortalEl.style.setProperty("--preview-left", `${rect.left}px`);
+      previewPortalEl.style.setProperty("--preview-top", `${rect.top}px`);
+      previewPortalEl.style.setProperty("--preview-dx", `${dx}px`);
+      previewPortalEl.style.setProperty("--preview-dy", `${dy}px`);
+      previewX = pointerX;
+      previewY = pointerY;
+    }
+    function destroyPreviewPortal() {
+      if (moveRafHandle !== null) {
+        cancelAnimationFrame(moveRafHandle);
+        moveRafHandle = null;
+      }
+      if (previewPortalEl) {
+        previewPortalEl.remove();
+        previewPortalEl = null;
+      }
+      isDraggingWithPointer = false;
+    }
+    function addWindowPointerListeners() {
+      if (windowPointerListenersActive || typeof window === "undefined")
+        return;
+      window.addEventListener("pointerup", handleWindowPointerUp);
+      window.addEventListener("pointercancel", handleWindowPointerCancel);
+      windowPointerListenersActive = true;
+    }
+    function removeWindowPointerListeners() {
+      if (!windowPointerListenersActive || typeof window === "undefined")
+        return;
+      window.removeEventListener("pointerup", handleWindowPointerUp);
+      window.removeEventListener("pointercancel", handleWindowPointerCancel);
+      windowPointerListenersActive = false;
+    }
+    function endPointerSession(reason) {
+      if (reason === "drop") {
+        if (moveRafHandle !== null) {
+          cancelAnimationFrame(moveRafHandle);
+          moveRafHandle = null;
+        }
+        recomputeTarget();
+        updatePreviewPosition(latestPointerX, latestPointerY);
+      } else {
+        if (moveRafHandle !== null) {
+          cancelAnimationFrame(moveRafHandle);
+          moveRafHandle = null;
+        }
+      }
+      if (scrollRafHandle !== null) {
+        cancelAnimationFrame(scrollRafHandle);
+        scrollRafHandle = null;
+      }
+      if (pointerId !== null && handleEl?.hasPointerCapture(pointerId)) {
+        try {
+          handleEl.releasePointerCapture(pointerId);
+        } catch {}
+      }
+      destroyPreviewPortal();
+      removeWindowPointerListeners();
+      pointerActive = false;
+      pointerId = null;
+      listEl = null;
+      if (reason === "drop") {
+        context.commitDrop(itemKey, itemLabel);
+      } else {
+        context.cancel(itemLabel);
+      }
+    }
+    function scheduleAutoScroll() {
+      if (!pointerActive)
+        return;
+      const SCROLL_ZONE = 32;
+      const SCROLL_SPEED = 8;
+      const viewportHeight = window.innerHeight;
+      scrollRafHandle = requestAnimationFrame(() => {
+        scrollRafHandle = null;
+        if (!pointerActive)
+          return;
+        if (latestPointerY < SCROLL_ZONE) {
+          window.scrollBy(0, -SCROLL_SPEED);
+          recomputeTarget();
+          scheduleAutoScroll();
+        } else if (latestPointerY > viewportHeight - SCROLL_ZONE) {
+          window.scrollBy(0, SCROLL_SPEED);
+          recomputeTarget();
+          scheduleAutoScroll();
+        }
+      });
+    }
+    function recomputeTarget() {
+      if (!pointerActive)
+        return;
+      if (context.getPointerTarget) {
+        const target2 = context.getPointerTarget({
+          activeKey: itemKey,
+          pointerX: latestPointerX,
+          pointerY: latestPointerY,
+          itemLabel
+        });
+        if (target2)
+          context.move(target2.index, itemLabel, target2.total);
+        return;
+      }
+      if (!listEl)
+        return;
+      const rows = Array.from(listEl.querySelectorAll(":scope > [data-sortable-row]"));
+      const nonLifted = rows.filter((r) => r.dataset["rowId"] !== String(rowId));
+      const midpoints = nonLifted.map((r) => {
+        const rect = r.getBoundingClientRect();
+        return rect.top + rect.height / 2;
+      });
+      const insertionIndex = midpoints.filter((m) => m < latestPointerY).length;
+      const target = Math.max(0, Math.min(insertionIndex, total - 1));
+      context.move(target, itemLabel, total);
+    }
+    function handlePointerDown(event) {
+      if (pointerActive)
+        return;
+      if (event.button !== 0 && event.pointerType === "mouse")
+        return;
+      if (!handleEl)
+        return;
+      listEl = handleEl.closest(".cinder-sortable-list");
+      event.preventDefault();
+      pointerActive = true;
+      pointerId = event.pointerId;
+      latestPointerX = event.clientX;
+      latestPointerY = event.clientY;
+      handleEl.setPointerCapture(event.pointerId);
+      context.lift(itemKey, index, itemLabel, total);
+      if (context.controller.phase !== "lifted" || context.controller.liftedKey !== itemKey) {
+        try {
+          handleEl.releasePointerCapture(event.pointerId);
+        } catch {}
+        pointerActive = false;
+        pointerId = null;
+        listEl = null;
+        return;
+      }
+      createPreviewPortal(event.clientX, event.clientY);
+      updatePreviewPosition(event.clientX, event.clientY);
+      addWindowPointerListeners();
+      scheduleAutoScroll();
+    }
+    function handlePointerMove(event) {
+      if (!pointerActive)
+        return;
+      latestPointerX = event.clientX;
+      latestPointerY = event.clientY;
+      if (moveRafHandle === null) {
+        moveRafHandle = requestAnimationFrame(() => {
+          moveRafHandle = null;
+          recomputeTarget();
+          updatePreviewPosition(latestPointerX, latestPointerY);
+        });
+      }
+      if (scrollRafHandle === null) {
+        scheduleAutoScroll();
+      }
+    }
+    function handlePointerUp(_event) {
+      if (!pointerActive)
+        return;
+      endPointerSession("drop");
+    }
+    function handlePointerCancel(_event) {
+      if (!pointerActive)
+        return;
+      endPointerSession("cancel");
+    }
+    function handleWindowPointerUp(event) {
+      if (!pointerActive || pointerId !== null && event.pointerId !== pointerId)
+        return;
+      endPointerSession("drop");
+    }
+    function handleWindowPointerCancel(event) {
+      if (!pointerActive || pointerId !== null && event.pointerId !== pointerId)
+        return;
+      endPointerSession("cancel");
+    }
+    function handleKeyDown(event) {
+      const { key } = event;
+      if (!isLifted()) {
+        if (key === " " || key === "Enter") {
+          event.preventDefault();
+          context.lift(itemKey, index, itemLabel, total);
+        }
+        return;
+      }
+      switch (key) {
+        case "ArrowLeft":
+        case "ArrowRight":
+          if (context.handleLiftedKeydown?.({ event, itemKey, itemLabel, index, total }) === true) {
+            return;
+          }
+          break;
+        case " ":
+        case "Enter":
+          event.preventDefault();
+          if (pointerActive) {
+            endPointerSession("drop");
+          } else {
+            context.commitDrop(itemKey, itemLabel);
+          }
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          context.move(context.controller.liftedTo + 1, itemLabel, total);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          context.move(context.controller.liftedTo - 1, itemLabel, total);
+          break;
+        case "Home":
+          event.preventDefault();
+          context.move(0, itemLabel, total);
+          break;
+        case "End":
+          event.preventDefault();
+          context.move(total - 1, itemLabel, total);
+          break;
+        case "Escape":
+          event.preventDefault();
+          if (pointerActive) {
+            endPointerSession("cancel");
+          } else {
+            context.cancel(itemLabel);
+          }
+          break;
+        case "Tab":
+          if (pointerActive) {
+            endPointerSession("cancel");
+          } else {
+            context.cancel(itemLabel);
+          }
+          break;
+      }
+    }
+    $$renderer2.push(`<li data-sortable-row=""${$2.attr("data-key", itemKey)}${$2.attr("data-key-type", typeof itemKey)}${$2.attr("data-row-id", rowId)}${$2.attr("data-preview-x", isDraggingWithPointer ? previewX : undefined)}${$2.attr("data-preview-y", isDraggingWithPointer ? previewY : undefined)} aria-roledescription="sortable item"${$2.attr_class($2.clsx(classNames("cinder-sortable-item", isLifted() && isDraggingWithPointer && "cinder-sortable-item--placeholder", isLifted() && !isDraggingWithPointer && "cinder-sortable-item--lifted", !isLifted() && context.controller.phase === "lifted" && "cinder-sortable-item--shifting", className)))}>`);
+    children($$renderer2, itemContext);
+    $$renderer2.push(`<!----> <button type="button" class="cinder-sortable-handle"${$2.attr("aria-label", handleLabel())}${$2.attr("aria-pressed", isLifted())}${$2.attr("aria-describedby", instructionsId)}>`);
+    if (handle) {
+      $$renderer2.push("<!--[0-->");
+      handle($$renderer2, { pressed: isLifted(), label: handleLabel() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M2 4h12v1.5H2zM2 7.25h12v1.5H2zM2 10.5h12v1.5H2z"></path></svg>`);
+    }
+    $$renderer2.push(`<!--]--></button></li>`);
+  }, _sortable_item);
+}
+
+export { setSortableContext, SortableController, reorder, _sortable_item };
+
+//# debugId=259615A66FAE6CD764756E2164756E21

package/dist/server/index.server-gmszd3fn.js

@@ -0,0 +1,9 @@
+import {
+  Table_cell
+} from "./index.server-4kxpbg4p.js";
+
+// src/components/table-cell/index.ts
+var table_cell_default = Table_cell;
+export { table_cell_default };
+
+//# debugId=3F0A0AB2E95A896264756E2164756E21