@lostgradient/cinder 0.5.0 → 0.6.0

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

@@ -1,428 +0,0 @@
-<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';
-</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>();
-    return items.filter((item) => {
-      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>();
-    return value.filter((id) => {
-      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 {
-    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 {
-    return `${baseId}-${side}-option-${index}`;
-  }
-
-  function getEnabledItems(
-    side: 'left' | 'right',
-    sideItems: TransferListItem[],
-  ): TransferListItem[] {
-    return sideItems.filter((item) => canMoveItem(side, item));
-  }
-
-  function resolveActiveId(
-    side: 'left' | 'right',
-    sideItems: TransferListItem[],
-    currentId: string | null,
-  ): string | null {
-    const enabled = getEnabledItems(side, sideItems);
-    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 nextLeftSelectedIds = leftSelectedIds.filter((id) => leftItemIdSet.has(id));
-    const nextRightSelectedIds = rightSelectedIds.filter((id) => rightItemIdSet.has(id));
-
-    if (nextLeftSelectedIds.length !== leftSelectedIds.length) {
-      leftSelectedIds = nextLeftSelectedIds;
-    }
-
-    if (nextRightSelectedIds.length !== rightSelectedIds.length) {
-      rightSelectedIds = nextRightSelectedIds;
-    }
-  });
-
-  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 index = rightItems.findIndex((item) => item.id === resolvedRightActiveId);
-    return index === -1 ? undefined : optionId('right', index);
-  });
-
-  function commitValue(nextValue: string[], announcement: string): void {
-    const dedupedKnownValue = [...new Set(nextValue)].filter((id) => itemById.has(id));
-    value = dedupedKnownValue;
-    onchange?.(dedupedKnownValue);
-    announcer.announce(announcement);
-  }
-
-  function pluralize(count: number): string {
-    return count === 1 ? 'item' : 'items';
-  }
-
-  function focusList(side: 'left' | 'right'): void {
-    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}.`,
-    );
-    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}.`,
-    );
-    leftSelectedIds = [];
-    await tick();
-    focusList('right');
-  }
-
-  async function moveSelectedLeft(): Promise<void> {
-    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}.`,
-    );
-    rightSelectedIds = [];
-    await tick();
-    focusList(rightItems.length > 0 ? 'right' : 'left');
-  }
-
-  async function moveAllLeft(): Promise<void> {
-    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}.`,
-    );
-    rightSelectedIds = [];
-    await tick();
-    focusList('left');
-  }
-
-  function toggleId(side: 'left' | 'right', id: string): void {
-    const item = itemById.get(id);
-    if (!item || !canMoveItem(side, item)) return;
-
-    if (side === 'left') {
-      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;
-    setActiveId(side, item.id);
-    toggleId(side, item.id);
-  }
-
-  function handleListClick(event: MouseEvent, side: 'left' | 'right'): void {
-    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;
-
-    const id = optionElement.getAttribute('data-cinder-transfer-list-item-id');
-    if (!id) return;
-
-    const item = itemById.get(id);
-    if (!item) return;
-
-    currentTarget.focus();
-    handleOptionClick(side, item);
-  }
-
-  function handleListFocus(side: 'left' | 'right'): void {
-    focusedSide = side;
-    if (side === 'left') {
-      leftActiveId = resolvedLeftActiveId;
-    } else {
-      rightActiveId = resolvedRightActiveId;
-    }
-  }
-
-  function handleListBlur(event: FocusEvent, side: 'left' | 'right'): void {
-    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 {
-    const sideItems = side === 'left' ? leftItems : rightItems;
-    const activeId = side === 'left' ? resolvedLeftActiveId : resolvedRightActiveId;
-    const enabledItems = getEnabledItems(side, sideItems);
-    if (enabledItems.length === 0 || !activeId) return;
-
-    const activeIndex = enabledItems.findIndex((item) => item.id === activeId);
-    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;
-    }
-
-    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;
-    }
-
-    if (event.key === ' ') {
-      event.preventDefault();
-      toggleId(side, activeId);
-      return;
-    }
-
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      if (side === 'left') moveSelectedRight();
-      else moveSelectedLeft();
-    }
-  }
-</script>
-
-<div {...rest} class={classNames('cinder-transfer-list', customClassName)}>
-  <div class="cinder-transfer-list__layout">
-    <section class="cinder-transfer-list__panel" aria-labelledby={`${baseId}-left-label`}>
-      <h3 id={`${baseId}-left-label`} class="cinder-transfer-list__label">{leftLabel}</h3>
-      <ul
-        bind:this={leftListElement}
-        class="cinder-transfer-list__list"
-        role="listbox"
-        aria-multiselectable="true"
-        aria-labelledby={`${baseId}-left-label`}
-        aria-activedescendant={focusedSide === 'left' ? leftActiveOptionId : undefined}
-        tabindex="0"
-        onfocus={() => handleListFocus('left')}
-        onblur={(event) => handleListBlur(event, 'left')}
-        onclick={(event) => handleListClick(event, 'left')}
-        onkeydown={(event) => handleListKeydown(event, 'left')}
-      >
-        {#each leftItems as item, index (item.id)}
-          <li
-            id={optionId('left', index)}
-            class="cinder-transfer-list__option"
-            role="option"
-            aria-selected={leftSelectedSet.has(item.id) ? 'true' : 'false'}
-            aria-disabled={item.disabled ? 'true' : undefined}
-            data-cinder-active={focusedSide === 'left' && resolvedLeftActiveId === item.id
-              ? 'true'
-              : undefined}
-            data-cinder-transfer-list-item-id={item.id}
-          >
-            {item.label}
-          </li>
-        {:else}
-          <li class="cinder-transfer-list__empty" role="presentation">No available items</li>
-        {/each}
-      </ul>
-    </section>
-
-    <div class="cinder-transfer-list__controls" role="group" aria-label="Transfer controls">
-      <button
-        type="button"
-        class="cinder-transfer-list__control"
-        aria-label={`Move selected items to ${rightLabel}`}
-        disabled={movableLeftSelectedIds.length === 0}
-        onclick={moveSelectedRight}
-      >
-        Add
-      </button>
-      <button
-        type="button"
-        class="cinder-transfer-list__control"
-        aria-label={`Move all items to ${rightLabel}`}
-        disabled={movableLeftItemIds.length === 0}
-        onclick={moveAllRight}
-      >
-        Add all
-      </button>
-      <button
-        type="button"
-        class="cinder-transfer-list__control"
-        aria-label={`Move selected items to ${leftLabel}`}
-        disabled={movableRightSelectedIds.length === 0}
-        onclick={moveSelectedLeft}
-      >
-        Remove
-      </button>
-      <button
-        type="button"
-        class="cinder-transfer-list__control"
-        aria-label={`Move all items to ${leftLabel}`}
-        disabled={movableRightItemIds.length === 0}
-        onclick={moveAllLeft}
-      >
-        Remove all
-      </button>
-    </div>
-
-    <section class="cinder-transfer-list__panel" aria-labelledby={`${baseId}-right-label`}>
-      <h3 id={`${baseId}-right-label`} class="cinder-transfer-list__label">{rightLabel}</h3>
-      <ul
-        bind:this={rightListElement}
-        class="cinder-transfer-list__list"
-        role="listbox"
-        aria-multiselectable="true"
-        aria-labelledby={`${baseId}-right-label`}
-        aria-activedescendant={focusedSide === 'right' ? rightActiveOptionId : undefined}
-        tabindex="0"
-        onfocus={() => handleListFocus('right')}
-        onblur={(event) => handleListBlur(event, 'right')}
-        onclick={(event) => handleListClick(event, 'right')}
-        onkeydown={(event) => handleListKeydown(event, 'right')}
-      >
-        {#each rightItems as item, index (item.id)}
-          <li
-            id={optionId('right', index)}
-            class="cinder-transfer-list__option"
-            role="option"
-            aria-selected={rightSelectedSet.has(item.id) ? 'true' : 'false'}
-            data-cinder-active={focusedSide === 'right' && resolvedRightActiveId === item.id
-              ? 'true'
-              : undefined}
-            data-cinder-transfer-list-item-id={item.id}
-          >
-            {item.label}
-          </li>
-        {:else}
-          <li class="cinder-transfer-list__empty" role="presentation">No selected items</li>
-        {/each}
-      </ul>
-    </section>
-  </div>
-
-  <div role="alert" aria-atomic="true" class="cinder-sr-only">{announcer.message}</div>
-</div>

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

@@ -1,58 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * @schemaObject
- */
-export type TransferListItem = {
-  /** Unique stable item identifier stored in `value`. */
-  id: string;
-  /** Visible option label. */
-  label: string;
-  /** Prevents selecting or transferring the item from the available list. Already-selected disabled items remain removable. */
-  disabled?: boolean;
-};
-
-/** Props for the TransferList component. */
-export type TransferListProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'children' | 'class' | 'onchange'
-> & {
-  /** Full item pool. Item IDs must be unique; duplicate IDs after the first are ignored. The component never mutates this array. */
-  items: TransferListItem[];
-  /** Unique IDs currently assigned to the right-side selected list. Supports `bind:value`. Unknown IDs are ignored and dropped on the next transfer. */
-  value?: string[];
-  /**
-   * Accessible and visible label for the left list.
-   * @default "Available"
-   */
-  leftLabel?: string;
-  /**
-   * Accessible and visible label for the right list.
-   * @default "Selected"
-   */
-  rightLabel?: string;
-  /** Called with the next right-side value after a transfer. */
-  onchange?: (value: string[]) => void;
-  /** Custom class merged with `.cinder-transfer-list`. */
-  class?: string;
-};
-
-/** Schema-facing props for TransferList. */
-export interface TransferListSchemaProps {
-  /** Full item pool. Item IDs must be unique; duplicate IDs after the first are ignored. The component never mutates this array. */
-  items: TransferListItem[];
-  /** Unique IDs currently assigned to the right-side selected list. Supports `bind:value`. Unknown IDs are ignored and dropped on the next transfer. */
-  value?: string[];
-  /**
-   * Accessible and visible label for the left list.
-   * @default "Available"
-   */
-  leftLabel?: string;
-  /**
-   * Accessible and visible label for the right list.
-   * @default "Selected"
-   */
-  rightLabel?: string;
-  /** Custom class merged with `.cinder-transfer-list`. */
-  class?: string;
-}

package/src/components/tree/index.ts

@@ -1,38 +0,0 @@
-import TreeExpandAll from '../_tree-expand-all/tree-expand-all.svelte';
-import TreeSelectAll from '../_tree-select-all/tree-select-all.svelte';
-import TreeItem from '../tree-item/tree-item.svelte';
-import './tree.css';
-import TreeRoot from './tree.svelte';
-
-/**
- * `Tree` is the parent compound component and a namespace exposing two parts:
- *   - `Tree.Item`, the compose-only leaf (also importable via `@lostgradient/cinder/tree-item`).
- *   - `Tree.SelectAll`, the select-all/none control. It reads Tree's selection
- *   - `Tree.ExpandAll`, the expand/collapse control. It reads Tree's expansion
- *     context and throws if rendered outside a Tree, so — unlike `Tree.Item` —
- *     the context-only controls are namespace-only: there are no standalone
- *     `@lostgradient/cinder/tree-select-all` or `@lostgradient/cinder/tree-expand-all`
- *     imports, because standalone renders are always runtime errors.
- */
-const Tree = Object.assign(TreeRoot, {
-  ExpandAll: TreeExpandAll,
-  Item: TreeItem,
-  SelectAll: TreeSelectAll,
-});
-
-export default Tree;
-export type { FlattenedTreeDataItem, TreeDataItem } from '../../_internal/tree-data.ts';
-export type {
-  TreeFilterPredicate,
-  TreeProps,
-  TreeRef,
-  TreeSelectionBehavior,
-  TreeSelectionMode,
-  TreeVirtualizedItemRenderState,
-} from './tree.types.ts';
-// Tree.SelectAll is namespace-only (no standalone cinder/tree-select-all subpath).
-// Re-export its prop type here so consumers can type a Tree.SelectAll wrapper without
-// reaching into the internal _tree-select-all directory.
-export type { TreeExpandAllProps } from '../_tree-expand-all/tree-expand-all.types.ts';
-export type { TreeSelectAllProps } from '../_tree-select-all/tree-select-all.types.ts';
-export { Tree };

package/src/components/tree/tree-selection.ts

@@ -1,88 +0,0 @@
-export type TreeSelectionState = {
-  checked: boolean;
-  indeterminate: boolean;
-};
-
-export function uniqueIds(ids: readonly string[]): string[] {
-  return [...new Set(ids)];
-}
-
-export function selectableIds(
-  ids: readonly string[],
-  disabledIds: ReadonlySet<string> = new Set(),
-): string[] {
-  return uniqueIds(ids).filter((id) => !disabledIds.has(id));
-}
-
-export function selectionStateFor(
-  selectedIds: readonly string[],
-  targetIds: readonly string[],
-  disabledIds: ReadonlySet<string> = new Set(),
-): TreeSelectionState {
-  const targets = selectableIds(targetIds, disabledIds);
-  if (targets.length === 0) return { checked: false, indeterminate: false };
-
-  const selected = new Set(selectedIds);
-  const selectedCount = targets.filter((id) => selected.has(id)).length;
-
-  return {
-    checked: selectedCount === targets.length,
-    indeterminate: selectedCount > 0 && selectedCount < targets.length,
-  };
-}
-
-export function selectIds(
-  selectedIds: readonly string[],
-  targetIds: readonly string[],
-  disabledIds: ReadonlySet<string> = new Set(),
-): string[] {
-  const targets = selectableIds(targetIds, disabledIds);
-  if (targets.length === 0) return [...selectedIds];
-
-  const existing = new Set(selectedIds);
-  const next = [...selectedIds];
-
-  for (const id of targets) {
-    if (!existing.has(id)) {
-      existing.add(id);
-      next.push(id);
-    }
-  }
-
-  return next;
-}
-
-export function deselectIds(
-  selectedIds: readonly string[],
-  targetIds: readonly string[],
-  disabledIds: ReadonlySet<string> = new Set(),
-): string[] {
-  const targetSet = new Set(selectableIds(targetIds, disabledIds));
-  if (targetSet.size === 0) return [...selectedIds];
-  return selectedIds.filter((id) => !targetSet.has(id));
-}
-
-export function toggleIndependentId(
-  selectedIds: readonly string[],
-  id: string,
-  disabledIds: ReadonlySet<string> = new Set(),
-): string[] {
-  if (disabledIds.has(id)) return [...selectedIds];
-  return selectedIds.includes(id)
-    ? selectedIds.filter((selectedId) => selectedId !== id)
-    : [...selectedIds, id];
-}
-
-export function toggleSelectionScope(
-  selectedIds: readonly string[],
-  targetIds: readonly string[],
-  disabledIds: ReadonlySet<string> = new Set(),
-): string[] {
-  const targets = selectableIds(targetIds, disabledIds);
-  if (targets.length === 0) return [...selectedIds];
-
-  const state = selectionStateFor(selectedIds, targets);
-  return state.checked
-    ? deselectIds(selectedIds, targets, disabledIds)
-    : selectIds(selectedIds, targets, disabledIds);
-}