@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/transfer-list/transfer-list.svelte

@@ -1,316 +1,246 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status beta
-   * @purpose Dual-list assignment control for moving items between an available pool and a selected set.
-   * @tag form
-   * @tag selection
-   * @useWhen Letting users build a subset from a fixed pool such as permissions, tags, or visible columns.
-   * @avoidWhen The pool needs inline search or filtering - compose search controls around the lists instead.
-   * @avoidWhen The user only needs independent checkbox choices - use checkbox-group instead. | checkbox-group
-   * @related checkbox-group, selection-popover, sortable-list
-   */
-  export type { TransferListItem, TransferListProps } from './transfer-list.types.ts';
+export {};
 </script>
 
 <script lang="ts">
-  import { tick } from 'svelte';
-  import { SvelteSet } from 'svelte/reactivity';
-
-  import { classNames } from '../../utilities/class-names.ts';
-  import { useAnnouncer } from '../../utilities/use-announcer.svelte.ts';
-  import type { TransferListItem, TransferListProps } from './transfer-list.types.ts';
-
-  const baseId = $props.id();
-
-  let {
-    items,
-    value = $bindable([]),
-    leftLabel = 'Available',
-    rightLabel = 'Selected',
-    onchange,
-    class: customClassName,
-    ...rest
-  }: TransferListProps = $props();
-
-  let leftSelectedIds = $state<string[]>([]);
-  let rightSelectedIds = $state<string[]>([]);
-  let leftActiveId = $state<string | null>(null);
-  let rightActiveId = $state<string | null>(null);
-  let focusedSide = $state<'left' | 'right' | null>(null);
-  let leftListElement: HTMLUListElement | undefined = $state();
-  let rightListElement: HTMLUListElement | undefined = $state();
-
-  const announcer = useAnnouncer({ clearDelay: 5000 });
-
-  const uniqueItems = $derived.by(() => {
-    const seenIds = new SvelteSet<string>();
+import { tick } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
+import { classNames } from '../../utilities/class-names.ts';
+import { useAnnouncer } from '../../utilities/use-announcer.svelte.ts';
+const baseId = $props.id();
+let { items, value = $bindable([]), leftLabel = 'Available', rightLabel = 'Selected', onchange, class: customClassName, ...rest } = $props();
+let leftSelectedIds = $state([]);
+let rightSelectedIds = $state([]);
+let leftActiveId = $state(null);
+let rightActiveId = $state(null);
+let focusedSide = $state(null);
+let leftListElement = $state();
+let rightListElement = $state();
+const announcer = useAnnouncer({ clearDelay: 5000 });
+const uniqueItems = $derived.by(() => {
+    const seenIds = new SvelteSet();
     return items.filter((item) => {
-      if (seenIds.has(item.id)) return false;
-      seenIds.add(item.id);
-      return true;
+        if (seenIds.has(item.id))
+            return false;
+        seenIds.add(item.id);
+        return true;
     });
-  });
-
-  const itemById = $derived.by(() => new Map(uniqueItems.map((item) => [item.id, item])));
-  const knownValue = $derived.by(() => {
-    const seenIds = new SvelteSet<string>();
+});
+const itemById = $derived.by(() => new Map(uniqueItems.map((item) => [item.id, item])));
+const knownValue = $derived.by(() => {
+    const seenIds = new SvelteSet();
     return value.filter((id) => {
-      if (!itemById.has(id) || seenIds.has(id)) return false;
-      seenIds.add(id);
-      return true;
+        if (!itemById.has(id) || seenIds.has(id))
+            return false;
+        seenIds.add(id);
+        return true;
     });
-  });
-  const rightIdSet = $derived(new Set(knownValue));
-  const leftItems = $derived(uniqueItems.filter((item) => !rightIdSet.has(item.id)));
-  const rightItems = $derived(
-    knownValue.flatMap((id) => {
-      const item = itemById.get(id);
-      return item ? [item] : [];
-    }),
-  );
-  const leftItemIdSet = $derived(new Set(leftItems.map((item) => item.id)));
-  const rightItemIdSet = $derived(new Set(rightItems.map((item) => item.id)));
-
-  const leftSelectedSet = $derived(new Set(leftSelectedIds));
-  const rightSelectedSet = $derived(new Set(rightSelectedIds));
-
-  function canMoveItem(side: 'left' | 'right', item: TransferListItem): boolean {
+});
+const rightIdSet = $derived(new Set(knownValue));
+const leftItems = $derived(uniqueItems.filter((item) => !rightIdSet.has(item.id)));
+const rightItems = $derived(knownValue.flatMap((id) => {
+    const item = itemById.get(id);
+    return item ? [item] : [];
+}));
+const leftItemIdSet = $derived(new Set(leftItems.map((item) => item.id)));
+const rightItemIdSet = $derived(new Set(rightItems.map((item) => item.id)));
+const leftSelectedSet = $derived(new Set(leftSelectedIds));
+const rightSelectedSet = $derived(new Set(rightSelectedIds));
+function canMoveItem(side, item) {
     return side === 'right' || !item.disabled;
-  }
-
-  const movableLeftSelectedIds = $derived(
-    leftSelectedIds.filter((id) => {
-      const item = itemById.get(id);
-      return item !== undefined && canMoveItem('left', item) && !rightIdSet.has(id);
-    }),
-  );
-  const movableRightSelectedIds = $derived(
-    rightSelectedIds.filter((id) => {
-      const item = itemById.get(id);
-      return item !== undefined && canMoveItem('right', item) && rightIdSet.has(id);
-    }),
-  );
-  const movableLeftItemIds = $derived(
-    leftItems.filter((item) => canMoveItem('left', item)).map((item) => item.id),
-  );
-  const movableRightItemIds = $derived(rightItems.map((item) => item.id));
-
-  function optionId(side: 'left' | 'right', index: number): string {
+}
+const movableLeftSelectedIds = $derived(leftSelectedIds.filter((id) => {
+    const item = itemById.get(id);
+    return item !== undefined && canMoveItem('left', item) && !rightIdSet.has(id);
+}));
+const movableRightSelectedIds = $derived(rightSelectedIds.filter((id) => {
+    const item = itemById.get(id);
+    return item !== undefined && canMoveItem('right', item) && rightIdSet.has(id);
+}));
+const movableLeftItemIds = $derived(leftItems.filter((item) => canMoveItem('left', item)).map((item) => item.id));
+const movableRightItemIds = $derived(rightItems.map((item) => item.id));
+function optionId(side, index) {
     return `${baseId}-${side}-option-${index}`;
-  }
-
-  function getEnabledItems(
-    side: 'left' | 'right',
-    sideItems: TransferListItem[],
-  ): TransferListItem[] {
+}
+function getEnabledItems(side, sideItems) {
     return sideItems.filter((item) => canMoveItem(side, item));
-  }
-
-  function resolveActiveId(
-    side: 'left' | 'right',
-    sideItems: TransferListItem[],
-    currentId: string | null,
-  ): string | null {
+}
+function resolveActiveId(side, sideItems, currentId) {
     const enabled = getEnabledItems(side, sideItems);
-    if (enabled.length === 0) return null;
-    if (currentId && enabled.some((item) => item.id === currentId)) return currentId;
+    if (enabled.length === 0)
+        return null;
+    if (currentId && enabled.some((item) => item.id === currentId))
+        return currentId;
     return enabled[0]?.id ?? null;
-  }
-
-  const resolvedLeftActiveId = $derived(resolveActiveId('left', leftItems, leftActiveId));
-  const resolvedRightActiveId = $derived(resolveActiveId('right', rightItems, rightActiveId));
-
-  $effect(() => {
+}
+const resolvedLeftActiveId = $derived(resolveActiveId('left', leftItems, leftActiveId));
+const resolvedRightActiveId = $derived(resolveActiveId('right', rightItems, rightActiveId));
+$effect(() => {
     const nextLeftSelectedIds = leftSelectedIds.filter((id) => leftItemIdSet.has(id));
     const nextRightSelectedIds = rightSelectedIds.filter((id) => rightItemIdSet.has(id));
-
     if (nextLeftSelectedIds.length !== leftSelectedIds.length) {
-      leftSelectedIds = nextLeftSelectedIds;
+        leftSelectedIds = nextLeftSelectedIds;
     }
-
     if (nextRightSelectedIds.length !== rightSelectedIds.length) {
-      rightSelectedIds = nextRightSelectedIds;
+        rightSelectedIds = nextRightSelectedIds;
     }
-  });
-
-  const leftActiveOptionId = $derived.by(() => {
-    if (!resolvedLeftActiveId) return undefined;
+});
+const leftActiveOptionId = $derived.by(() => {
+    if (!resolvedLeftActiveId)
+        return undefined;
     const index = leftItems.findIndex((item) => item.id === resolvedLeftActiveId);
     return index === -1 ? undefined : optionId('left', index);
-  });
-
-  const rightActiveOptionId = $derived.by(() => {
-    if (!resolvedRightActiveId) return undefined;
+});
+const rightActiveOptionId = $derived.by(() => {
+    if (!resolvedRightActiveId)
+        return undefined;
     const index = rightItems.findIndex((item) => item.id === resolvedRightActiveId);
     return index === -1 ? undefined : optionId('right', index);
-  });
-
-  function commitValue(nextValue: string[], announcement: string): void {
+});
+function commitValue(nextValue, announcement) {
     const dedupedKnownValue = [...new Set(nextValue)].filter((id) => itemById.has(id));
     value = dedupedKnownValue;
     onchange?.(dedupedKnownValue);
     announcer.announce(announcement);
-  }
-
-  function pluralize(count: number): string {
+}
+function pluralize(count) {
     return count === 1 ? 'item' : 'items';
-  }
-
-  function focusList(side: 'left' | 'right'): void {
+}
+function focusList(side) {
     const listElement = side === 'left' ? leftListElement : rightListElement;
     listElement?.focus();
     focusedSide = side;
-  }
-
-  async function moveSelectedRight(): Promise<void> {
-    if (movableLeftSelectedIds.length === 0) return;
-    commitValue(
-      [...knownValue, ...movableLeftSelectedIds],
-      `${movableLeftSelectedIds.length} ${pluralize(movableLeftSelectedIds.length)} moved to ${rightLabel}.`,
-    );
+}
+async function moveSelectedRight() {
+    if (movableLeftSelectedIds.length === 0)
+        return;
+    commitValue([...knownValue, ...movableLeftSelectedIds], `${movableLeftSelectedIds.length} ${pluralize(movableLeftSelectedIds.length)} moved to ${rightLabel}.`);
     leftSelectedIds = [];
     await tick();
     focusList(leftItems.some((item) => canMoveItem('left', item)) ? 'left' : 'right');
-  }
-
-  async function moveAllRight(): Promise<void> {
-    if (movableLeftItemIds.length === 0) return;
-    commitValue(
-      [...knownValue, ...movableLeftItemIds],
-      `${movableLeftItemIds.length} ${pluralize(movableLeftItemIds.length)} moved to ${rightLabel}.`,
-    );
+}
+async function moveAllRight() {
+    if (movableLeftItemIds.length === 0)
+        return;
+    commitValue([...knownValue, ...movableLeftItemIds], `${movableLeftItemIds.length} ${pluralize(movableLeftItemIds.length)} moved to ${rightLabel}.`);
     leftSelectedIds = [];
     await tick();
     focusList('right');
-  }
-
-  async function moveSelectedLeft(): Promise<void> {
-    if (movableRightSelectedIds.length === 0) return;
+}
+async function moveSelectedLeft() {
+    if (movableRightSelectedIds.length === 0)
+        return;
     const removing = new Set(movableRightSelectedIds);
-    commitValue(
-      knownValue.filter((id) => !removing.has(id)),
-      `${movableRightSelectedIds.length} ${pluralize(movableRightSelectedIds.length)} moved to ${leftLabel}.`,
-    );
+    commitValue(knownValue.filter((id) => !removing.has(id)), `${movableRightSelectedIds.length} ${pluralize(movableRightSelectedIds.length)} moved to ${leftLabel}.`);
     rightSelectedIds = [];
     await tick();
     focusList(rightItems.length > 0 ? 'right' : 'left');
-  }
-
-  async function moveAllLeft(): Promise<void> {
-    if (movableRightItemIds.length === 0) return;
+}
+async function moveAllLeft() {
+    if (movableRightItemIds.length === 0)
+        return;
     const removing = new Set(movableRightItemIds);
-    commitValue(
-      knownValue.filter((id) => !removing.has(id)),
-      `${movableRightItemIds.length} ${pluralize(movableRightItemIds.length)} moved to ${leftLabel}.`,
-    );
+    commitValue(knownValue.filter((id) => !removing.has(id)), `${movableRightItemIds.length} ${pluralize(movableRightItemIds.length)} moved to ${leftLabel}.`);
     rightSelectedIds = [];
     await tick();
     focusList('left');
-  }
-
-  function toggleId(side: 'left' | 'right', id: string): void {
+}
+function toggleId(side, id) {
     const item = itemById.get(id);
-    if (!item || !canMoveItem(side, item)) return;
-
+    if (!item || !canMoveItem(side, item))
+        return;
     if (side === 'left') {
-      leftSelectedIds = leftSelectedSet.has(id)
-        ? leftSelectedIds.filter((selectedId) => selectedId !== id)
-        : [...leftSelectedIds, id];
-      return;
+        leftSelectedIds = leftSelectedSet.has(id)
+            ? leftSelectedIds.filter((selectedId) => selectedId !== id)
+            : [...leftSelectedIds, id];
+        return;
     }
-
     rightSelectedIds = rightSelectedSet.has(id)
-      ? rightSelectedIds.filter((selectedId) => selectedId !== id)
-      : [...rightSelectedIds, id];
-  }
-
-  function setActiveId(side: 'left' | 'right', id: string | null): void {
-    if (side === 'left') leftActiveId = id;
-    else rightActiveId = id;
-  }
-
-  function handleOptionClick(side: 'left' | 'right', item: TransferListItem): void {
-    if (!canMoveItem(side, item)) return;
+        ? rightSelectedIds.filter((selectedId) => selectedId !== id)
+        : [...rightSelectedIds, id];
+}
+function setActiveId(side, id) {
+    if (side === 'left')
+        leftActiveId = id;
+    else
+        rightActiveId = id;
+}
+function handleOptionClick(side, item) {
+    if (!canMoveItem(side, item))
+        return;
     setActiveId(side, item.id);
     toggleId(side, item.id);
-  }
-
-  function handleListClick(event: MouseEvent, side: 'left' | 'right'): void {
+}
+function handleListClick(event, side) {
     const target = event.target instanceof Element ? event.target : null;
     const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
-    if (!target || !currentTarget) return;
-
-    const optionElement = target.closest<HTMLElement>('[data-cinder-transfer-list-item-id]');
-    if (!optionElement || !currentTarget.contains(optionElement)) return;
-
+    if (!target || !currentTarget)
+        return;
+    const optionElement = target.closest('[data-cinder-transfer-list-item-id]');
+    if (!optionElement || !currentTarget.contains(optionElement))
+        return;
     const id = optionElement.getAttribute('data-cinder-transfer-list-item-id');
-    if (!id) return;
-
+    if (!id)
+        return;
     const item = itemById.get(id);
-    if (!item) return;
-
+    if (!item)
+        return;
     currentTarget.focus();
     handleOptionClick(side, item);
-  }
-
-  function handleListFocus(side: 'left' | 'right'): void {
+}
+function handleListFocus(side) {
     focusedSide = side;
     if (side === 'left') {
-      leftActiveId = resolvedLeftActiveId;
-    } else {
-      rightActiveId = resolvedRightActiveId;
+        leftActiveId = resolvedLeftActiveId;
     }
-  }
-
-  function handleListBlur(event: FocusEvent, side: 'left' | 'right'): void {
+    else {
+        rightActiveId = resolvedRightActiveId;
+    }
+}
+function handleListBlur(event, side) {
     const nextTarget = event.relatedTarget instanceof Node ? event.relatedTarget : null;
     const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
-    if (currentTarget && nextTarget && currentTarget.contains(nextTarget)) return;
-    if (focusedSide === side) focusedSide = null;
-  }
-
-  function handleListKeydown(event: KeyboardEvent, side: 'left' | 'right'): void {
+    if (currentTarget && nextTarget && currentTarget.contains(nextTarget))
+        return;
+    if (focusedSide === side)
+        focusedSide = null;
+}
+function handleListKeydown(event, side) {
     const sideItems = side === 'left' ? leftItems : rightItems;
     const activeId = side === 'left' ? resolvedLeftActiveId : resolvedRightActiveId;
     const enabledItems = getEnabledItems(side, sideItems);
-    if (enabledItems.length === 0 || !activeId) return;
-
+    if (enabledItems.length === 0 || !activeId)
+        return;
     const activeIndex = enabledItems.findIndex((item) => item.id === activeId);
-    if (activeIndex === -1) return;
-
+    if (activeIndex === -1)
+        return;
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault();
-      const direction = event.key === 'ArrowDown' ? 1 : -1;
-      const nextIndex = (activeIndex + direction + enabledItems.length) % enabledItems.length;
-      setActiveId(side, enabledItems[nextIndex]?.id ?? null);
-      return;
+        event.preventDefault();
+        const direction = event.key === 'ArrowDown' ? 1 : -1;
+        const nextIndex = (activeIndex + direction + enabledItems.length) % enabledItems.length;
+        setActiveId(side, enabledItems[nextIndex]?.id ?? null);
+        return;
     }
-
     if (event.key === 'Home' || event.key === 'End') {
-      event.preventDefault();
-      setActiveId(
-        side,
-        event.key === 'Home'
-          ? (enabledItems[0]?.id ?? null)
-          : (enabledItems[enabledItems.length - 1]?.id ?? null),
-      );
-      return;
+        event.preventDefault();
+        setActiveId(side, event.key === 'Home'
+            ? (enabledItems[0]?.id ?? null)
+            : (enabledItems[enabledItems.length - 1]?.id ?? null));
+        return;
     }
-
     if (event.key === ' ') {
-      event.preventDefault();
-      toggleId(side, activeId);
-      return;
+        event.preventDefault();
+        toggleId(side, activeId);
+        return;
     }
-
     if (event.key === 'Enter') {
-      event.preventDefault();
-      if (side === 'left') moveSelectedRight();
-      else moveSelectedLeft();
+        event.preventDefault();
+        if (side === 'left')
+            moveSelectedRight();
+        else
+            moveSelectedLeft();
     }
-  }
+}
 </script>
 
 <div {...rest} class={classNames('cinder-transfer-list', customClassName)}>

package/src/components/transfer-list/transfer-list.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/transfer-list/transfer-list.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/tree/tree.schema.json

@@ -0,0 +1,128 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "selectionMode": {
+      "enum": ["none", "single", "multiple"],
+      "description": "Selection model. Default: 'none'."
+    },
+    "checkboxSelection": {
+      "type": "boolean",
+      "description": "Render tree-owned checkbox indicators when selectionMode is multiple. Default: false."
+    },
+    "selectionBehavior": {
+      "enum": ["independent", "cascade"],
+      "description": "Select only the target item or cascade through its selectable scope. Default: 'independent'."
+    },
+    "selectedIds": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "Currently selected node ids. Bindable."
+    },
+    "expandedIds": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "Currently expanded branch ids. Bindable."
+    },
+    "virtualizationEstimatedRowHeight": {
+      "type": "number",
+      "description": "Estimated row height for virtualized Tree rows. Default: 36."
+    },
+    "virtualizationOverscan": {
+      "type": "number",
+      "description": "Extra rows rendered before and after the viewport. Default: 4."
+    },
+    "virtualizationHeight": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "type": "number"
+        }
+      ],
+      "description": "Block size for the virtualized scroll viewport. Default: '20rem'."
+    },
+    "aria-label": {
+      "type": "string",
+      "description": "Accessible label for the tree. One of aria-label or aria-labelledby is required."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "description": "The `id` of a visible element whose text serves as the accessible label for the tree. One of `aria-label` or `aria-labelledby` is required."
+    },
+    "disableTypeahead": {
+      "type": "boolean",
+      "description": "Disable typeahead. Default: false."
+    },
+    "filterValue": {
+      "type": "string",
+      "description": "Controlled filter query. When provided, matching is driven by this value."
+    },
+    "filterPlaceholder": {
+      "type": "string",
+      "description": "Placeholder and accessible label for the built-in search input. Default: 'Search tree'."
+    },
+    "showSearch": {
+      "type": "boolean",
+      "description": "Render the built-in search input before the role=\"tree\" element. Default: false."
+    },
+    "class": {
+      "type": "string",
+      "description": "Additional CSS class merged with `.cinder-tree`."
+    },
+    "virtualized": {
+      "type": "boolean",
+      "description": "Use the data-driven virtualized render path for large trees. Default: false."
+    }
+  },
+  "additionalProperties": false,
+  "metadata": {
+    "unsupportedProps": [
+      {
+        "name": "children",
+        "reason": "function-or-snippet",
+        "description": "Tree items (snippet). Required when virtualized is false or omitted; mutually exclusive with items."
+      },
+      {
+        "name": "filterPredicate",
+        "reason": "function-or-snippet",
+        "description": "Custom filter predicate. Default: case-insensitive label substring matching."
+      },
+      {
+        "name": "items",
+        "reason": "unknown-shape",
+        "description": "Data-driven Tree items. Required when virtualized is true; mutually exclusive with children."
+      },
+      {
+        "name": "onfilterchange",
+        "reason": "function-or-snippet",
+        "description": "Fires whenever the built-in search input changes the filter query."
+      },
+      {
+        "name": "onreorder",
+        "reason": "function-or-snippet",
+        "description": "Called when a draggable item is dropped before, after, or into another tree item."
+      },
+      {
+        "name": "ref",
+        "reason": "unknown-shape",
+        "description": "Typed programmatic handle. Use `bind:ref` to receive it."
+      },
+      {
+        "name": "selectionControls",
+        "reason": "function-or-snippet",
+        "description": "Optional selection controls rendered before the role=\"tree\" element."
+      },
+      {
+        "name": "virtualizedItem",
+        "reason": "function-or-snippet",
+        "description": "Optional custom virtualized row renderer."
+      }
+    ]
+  }
+}