seblify 0.2.1 → 0.3.0

package/dist/components/action/input/select/checkbox/Checkbox.svelte

@@ -1,39 +1,277 @@
 <script lang="ts">
   import type { SeblifyProps } from 'seblify';
 
+  type CheckboxTone =
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'inverse';
+  type CheckboxVisualState =
+    | 'default'
+    | 'derived'
+    | 'indirect'
+    | 'direct-and-derived'
+    | 'direct-and-indirect';
+
   type Props = SeblifyProps<{
+    ariaLabel?: string;
     checked?: boolean;
     disabled?: boolean;
     label?: string;
     description?: string;
+    indeterminate?: boolean;
     name?: string;
+    onclick?: (event: MouseEvent) => void;
+    tone?: CheckboxTone;
+    visualState?: CheckboxVisualState;
     value?: string;
   }>;
 
   let {
+    ariaLabel,
     checked = $bindable(false),
     disabled = false,
     label,
     description,
+    indeterminate = false,
     name,
+    onclick,
+    tone,
+    visualState = 'default',
     value,
   }: Props = $props();
+  const checkboxId = $props.id();
+  let inputElement: HTMLInputElement | undefined;
+
+  const labelId = $derived(label ? `${checkboxId}-label` : undefined);
+  const descriptionId = $derived(
+    description ? `${checkboxId}-description` : undefined,
+  );
+
+  const dataState = $derived(
+    disabled && indeterminate
+      ? 'disabled-indeterminate'
+      : disabled && checked
+      ? 'disabled-checked'
+      : disabled
+        ? 'disabled-unchecked'
+        : indeterminate
+          ? 'indeterminate'
+          : checked
+            ? 'checked'
+            : 'unchecked',
+  );
+
+  $effect(() => {
+    if (inputElement) {
+      inputElement.checked = checked;
+      inputElement.indeterminate = indeterminate;
+    }
+  });
+
+  function handleInputChange(event: Event) {
+    if (disabled) {
+      const input = event.currentTarget as HTMLInputElement;
+
+      input.checked = checked;
+      input.indeterminate = indeterminate;
+      return;
+    }
+
+    checked = (event.currentTarget as HTMLInputElement).checked;
+  }
+
+  function handleInputClick(event: MouseEvent) {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (inputElement) {
+        inputElement.checked = checked;
+        inputElement.indeterminate = indeterminate;
+      }
+
+      return;
+    }
+
+    onclick?.(event);
+  }
 </script>
 
-<label class:disabled class="checkbox">
-  <input bind:checked {disabled} {name} type="checkbox" {value} />
-  <span class="content">
+<label
+  class:disabled
+  class="seblify-checkbox seblify-tone-context"
+  data-indeterminate={indeterminate}
+  data-seblify-tone={tone ?? 'inherit'}
+  data-state={dataState}
+  data-visual-state={visualState}
+>
+  <input
+    aria-checked={indeterminate ? 'mixed' : undefined}
+    aria-describedby={descriptionId}
+    aria-label={labelId ? undefined : ariaLabel}
+    aria-labelledby={labelId}
+    bind:this={inputElement}
+    checked={checked}
+    {disabled}
+    {name}
+    data-state={dataState}
+    onchange={handleInputChange}
+    onclick={handleInputClick}
+    type="checkbox"
+    {value}
+  />
+  <span class="seblify-checkbox__control" aria-hidden="true">
+    <span class="seblify-checkbox__mark"></span>
+  </span>
+  <span class="seblify-checkbox__content">
     {#if label}
-      <span class="label">{label}</span>
+      <span class="seblify-checkbox__label" id={labelId}>{label}</span>
     {/if}
     {#if description}
-      <span class="description">{description}</span>
+      <span class="seblify-checkbox__description" id={descriptionId}
+        >{description}</span
+      >
     {/if}
   </span>
 </label>
 
-<style>
-  .checkbox {
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}
+
+.seblify-checkbox {
+    --checkbox-size: 1.125rem;
+    --checkbox-radius: 0.25rem;
+    --checkbox-border: var(--seblify-color-border-strong, #aab7c5);
+    --checkbox-surface: var(--seblify-color-surface, #ffffff);
+    --checkbox-active-border: var(--seblify-tone-fill);
+    --checkbox-active-surface: var(--seblify-tone-fill);
+    --checkbox-active-mark: var(--seblify-tone-fill-text);
+    --checkbox-focus-ring: color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 54%,
+      transparent
+    );
+    --checkbox-derived-border: var(--seblify-color-border-strong, #aab7c5);
+    --checkbox-derived-surface: var(--seblify-color-surface-muted, #d9e0e8);
+    --checkbox-derived-mark: var(--seblify-color-text-muted, #516176);
+
+    position: relative;
     display: inline-flex;
     gap: 10px;
     align-items: flex-start;
@@ -41,30 +279,154 @@
     cursor: pointer;
   }
 
-  input {
-    width: 18px;
-    height: 18px;
-    margin: 2px 0 0;
-    accent-color: var(--seblify-color-fill-accent, #146a6f);
+.seblify-checkbox[data-seblify-tone='inherit'] {
+    --seblify-tone-fill: var(
+      --seblify-current-tone-fill,
+      var(--seblify-color-fill-primary, #146a6f)
+    );
+    --seblify-tone-fill-text: var(
+      --seblify-current-tone-fill-text,
+      var(--seblify-color-fill-primary-text, #ffffff)
+    );
+  }
+
+.seblify-checkbox > input {
+    position: absolute;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    margin: -1px !important;
+    overflow: hidden;
+    background: transparent !important;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+.seblify-checkbox__control {
+    position: relative;
+    display: inline-flex;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--checkbox-border);
+    border-radius: var(--checkbox-radius);
+    margin-top: 0.125rem;
+    background: var(--checkbox-surface);
+    box-sizing: border-box;
+    color: var(--checkbox-active-mark);
+    transition:
+      border-color 140ms ease,
+      background 140ms ease,
+      box-shadow 140ms ease;
+  }
+
+.seblify-checkbox__mark {
+    position: relative;
+    display: block;
+    width: 0.625rem;
+    height: 0.625rem;
+    opacity: 0;
+    transform: scale(0.86);
+    transition:
+      opacity 120ms ease,
+      transform 120ms ease;
+  }
+
+.seblify-checkbox[data-state='checked'] .seblify-checkbox__control,
+  .seblify-checkbox[data-state='indeterminate'] .seblify-checkbox__control,
+  .seblify-checkbox[data-state='disabled-checked'] .seblify-checkbox__control,
+  .seblify-checkbox[data-state='disabled-indeterminate']
+    .seblify-checkbox__control {
+    border-color: var(--checkbox-active-border);
+    background: var(--checkbox-active-surface);
+  }
+
+.seblify-checkbox[data-state='checked'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-state='indeterminate'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-state='disabled-checked'] .seblify-checkbox__mark,
+  .seblify-checkbox[data-state='disabled-indeterminate']
+    .seblify-checkbox__mark {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+.seblify-checkbox[data-state='checked'] .seblify-checkbox__mark::before,
+  .seblify-checkbox[data-state='disabled-checked']
+    .seblify-checkbox__mark::before {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0.25rem;
+    height: 0.55rem;
+    border: solid currentColor;
+    border-width: 0 0.125rem 0.125rem 0;
+    content: '';
+    transform: translate(-50%, -58%) rotate(45deg);
+  }
+
+.seblify-checkbox[data-state='indeterminate']
+    .seblify-checkbox__mark::before,
+  .seblify-checkbox[data-state='disabled-indeterminate']
+    .seblify-checkbox__mark::before {
+    position: absolute;
+    left: 0.0625rem;
+    right: 0.0625rem;
+    top: 50%;
+    height: 0.125rem;
+    border-radius: 999px;
+    background: currentColor;
+    content: '';
+    transform: translateY(-50%);
+  }
+
+.seblify-checkbox > input:focus-visible + .seblify-checkbox__control {
+    outline: 3px solid var(--checkbox-focus-ring);
+    outline-offset: 2px;
+  }
+
+.seblify-checkbox[data-visual-state='derived']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-visual-state='indirect']
+    .seblify-checkbox__control {
+    --checkbox-active-border: var(--checkbox-derived-border);
+    --checkbox-active-surface: var(--checkbox-derived-surface);
+    --checkbox-active-mark: var(--checkbox-derived-mark);
+
+    border-color: var(--checkbox-derived-border);
+    background: var(--checkbox-derived-surface);
+    color: var(--checkbox-derived-mark);
+  }
+
+.seblify-checkbox[data-visual-state='direct-and-derived']
+    .seblify-checkbox__control,
+  .seblify-checkbox[data-visual-state='direct-and-indirect']
+    .seblify-checkbox__control {
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--seblify-tone-fill) 22%, transparent);
   }
 
-  .content {
+.seblify-checkbox__content {
     display: grid;
     gap: 2px;
+    min-width: 0;
   }
 
-  .label {
+.seblify-checkbox__label {
     font-weight: 700;
     line-height: 1.35;
   }
 
-  .description {
+.seblify-checkbox__description {
     color: var(--seblify-color-text-muted, #516176);
     font-size: 0.875rem;
     line-height: 1.45;
   }
 
-  .disabled {
+.seblify-checkbox.disabled {
     cursor: not-allowed;
     opacity: var(--seblify-opacity-disabled, 0.56);
   }

package/dist/components/action/input/select/checkbox/Checkbox.svelte.d.ts

@@ -1,9 +1,16 @@
+type CheckboxTone = 'neutral' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type CheckboxVisualState = 'default' | 'derived' | 'indirect' | 'direct-and-derived' | 'direct-and-indirect';
 declare const Checkbox: import("svelte").Component<{
+    ariaLabel?: string | undefined;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
     label?: string | undefined;
     description?: string | undefined;
+    indeterminate?: boolean | undefined;
     name?: string | undefined;
+    onclick?: ((event: MouseEvent) => void) | undefined;
+    tone?: CheckboxTone | undefined;
+    visualState?: CheckboxVisualState | undefined;
     value?: string | undefined;
 }, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/action/input/select/checkbox/checkbox-relations.svelte.d.ts

@@ -0,0 +1,47 @@
+export type CheckboxRelationsId = string;
+export interface CheckboxRelationsItemConfig {
+    checked?: boolean;
+    disabled?: boolean;
+    requires?: CheckboxRelationsId[];
+    selects?: CheckboxRelationsId[];
+}
+export type CheckboxRelationsGroupConfig = CheckboxRelationsId[] | {
+    itemIds: CheckboxRelationsId[];
+};
+export interface CheckboxRelationsConfig {
+    groups?: Record<CheckboxRelationsId, CheckboxRelationsGroupConfig>;
+    items: Record<CheckboxRelationsId, CheckboxRelationsItemConfig>;
+}
+export type CheckboxRelationsVisualState = 'default' | 'indirect';
+export interface CheckboxRelationsItemState {
+    blockedBy: CheckboxRelationsId[];
+    checked: boolean;
+    directChecked: boolean;
+    disabled: boolean;
+    indirectChecked: boolean;
+    requires: CheckboxRelationsId[];
+    selects: CheckboxRelationsId[];
+    setChecked: (checked: boolean) => void;
+    toggle: () => void;
+    visualState: CheckboxRelationsVisualState;
+}
+export interface CheckboxRelationsGroupState {
+    checked: boolean;
+    directSelectedCount: number;
+    indeterminate: boolean;
+    indirectSelectedCount: number;
+    itemIds: CheckboxRelationsId[];
+    selectedCount: number;
+    selectableCount: number;
+    setChecked: (checked: boolean) => void;
+    toggle: () => void;
+    visualState: CheckboxRelationsVisualState;
+}
+export interface CheckboxRelations {
+    group: (id: CheckboxRelationsId) => CheckboxRelationsGroupState;
+    item: (id: CheckboxRelationsId) => CheckboxRelationsItemState;
+    setItemChecked: (id: CheckboxRelationsId, checked: boolean) => void;
+    toggleGroup: (id: CheckboxRelationsId) => void;
+    toggleItem: (id: CheckboxRelationsId) => void;
+}
+export declare function createCheckboxRelations(config: CheckboxRelationsConfig): CheckboxRelations;

package/dist/components/action/input/select/checkbox/checkbox-relations.svelte.js

@@ -0,0 +1,154 @@
+export function createCheckboxRelations(config) {
+    const items = config.items;
+    const groups = normalizeGroups(config.groups ?? {});
+    let directChecked = $state(Object.fromEntries(Object.entries(items).map(([id, item]) => [id, item.checked === true])));
+    const effectiveChecked = $derived(resolveEffectiveChecked(items, groups, directChecked));
+    function item(id) {
+        const config = getItemConfig(items, id);
+        const blockedBy = getBlockedBy(items, id, effectiveChecked);
+        const checked = effectiveChecked.has(id);
+        const direct = directChecked[id] === true && checked;
+        const indirect = checked && !direct;
+        return {
+            blockedBy,
+            checked,
+            directChecked: direct,
+            disabled: config.disabled === true || blockedBy.length > 0,
+            indirectChecked: indirect,
+            requires: config.requires ?? [],
+            selects: config.selects ?? [],
+            setChecked: (checked) => setItemChecked(id, checked),
+            toggle: () => toggleItem(id),
+            visualState: indirect ? 'indirect' : 'default',
+        };
+    }
+    function group(id) {
+        const itemIds = getGroupItemIds(groups, id);
+        const selectableItems = itemIds
+            .map((itemId) => item(itemId))
+            .filter((itemState) => !itemState.disabled);
+        const selectedCount = selectableItems.filter((itemState) => itemState.checked).length;
+        const directSelectedCount = selectableItems.filter((itemState) => itemState.directChecked).length;
+        const indirectSelectedCount = selectableItems.filter((itemState) => itemState.indirectChecked).length;
+        const checked = selectableItems.length > 0 && selectedCount === selectableItems.length;
+        const visualState = selectedCount > 0 && directSelectedCount === 0 ? 'indirect' : 'default';
+        return {
+            checked,
+            directSelectedCount,
+            indeterminate: selectedCount > 0 && !checked,
+            indirectSelectedCount,
+            itemIds,
+            selectedCount,
+            selectableCount: selectableItems.length,
+            setChecked: (checked) => setGroupChecked(id, checked),
+            toggle: () => toggleGroup(id),
+            visualState,
+        };
+    }
+    function setItemChecked(id, checked) {
+        const currentItem = item(id);
+        if (currentItem.disabled && checked) {
+            return;
+        }
+        directChecked[id] = checked;
+    }
+    function toggleItem(id) {
+        const currentItem = item(id);
+        if (currentItem.disabled) {
+            return;
+        }
+        directChecked[id] = !currentItem.directChecked;
+    }
+    function setGroupChecked(id, checked) {
+        const groupItemIds = getGroupItemIds(groups, id);
+        if (!checked) {
+            const selectableItemIds = groupItemIds.filter((itemId) => !item(itemId).disabled);
+            for (const itemId of selectableItemIds) {
+                directChecked[itemId] = false;
+            }
+            return;
+        }
+        let changed = true;
+        while (changed) {
+            changed = false;
+            for (const itemId of groupItemIds) {
+                const currentItem = item(itemId);
+                if (!currentItem.disabled && directChecked[itemId] !== true) {
+                    directChecked[itemId] = true;
+                    changed = true;
+                }
+            }
+        }
+    }
+    function toggleGroup(id) {
+        const currentGroup = group(id);
+        setGroupChecked(id, !(currentGroup.checked && currentGroup.directSelectedCount > 0));
+    }
+    return {
+        group,
+        item,
+        setItemChecked,
+        toggleGroup,
+        toggleItem,
+    };
+}
+function normalizeGroups(groups) {
+    return Object.fromEntries(Object.entries(groups).map(([id, group]) => [
+        id,
+        Array.isArray(group) ? group : group.itemIds,
+    ]));
+}
+function getItemConfig(items, id) {
+    const item = items[id];
+    if (!item) {
+        throw new Error(`Unknown checkbox relations item "${id}".`);
+    }
+    return item;
+}
+function getGroupItemIds(groups, id) {
+    const itemIds = groups[id];
+    if (!itemIds) {
+        throw new Error(`Unknown checkbox relations group "${id}".`);
+    }
+    return itemIds;
+}
+function resolveEffectiveChecked(items, groups, directChecked) {
+    const effectiveChecked = new Set();
+    let changed = true;
+    while (changed) {
+        changed = false;
+        for (const [id, item] of Object.entries(items)) {
+            if (directChecked[id] === true &&
+                item.disabled !== true &&
+                hasRequiredItems(item, effectiveChecked) &&
+                !effectiveChecked.has(id)) {
+                effectiveChecked.add(id);
+                changed = true;
+            }
+        }
+        for (const id of Array.from(effectiveChecked)) {
+            for (const selectedId of getSelectedItemIds(items, groups, id)) {
+                const selectedItem = getItemConfig(items, selectedId);
+                if (selectedItem.disabled !== true &&
+                    hasRequiredItems(selectedItem, effectiveChecked) &&
+                    !effectiveChecked.has(selectedId)) {
+                    effectiveChecked.add(selectedId);
+                    changed = true;
+                }
+            }
+        }
+    }
+    return effectiveChecked;
+}
+function getSelectedItemIds(items, groups, id) {
+    return (items[id]?.selects ?? []).flatMap((selectedId) => [
+        ...(items[selectedId] ? [selectedId] : []),
+        ...(groups[selectedId] ?? []),
+    ]);
+}
+function hasRequiredItems(item, effectiveChecked) {
+    return (item.requires ?? []).every((id) => effectiveChecked.has(id));
+}
+function getBlockedBy(items, id, effectiveChecked) {
+    return (getItemConfig(items, id).requires ?? []).filter((requiredId) => !effectiveChecked.has(requiredId));
+}