@designbasekorea/ui-wc 0.14.0 → 0.15.0

package/docs/LAYER-LIST.md

@@ -0,0 +1,31 @@
+<!-- Generated from docs/LAYER-LIST.md by scripts/sync-package-docs.mjs. -->
+# Layer List
+
+`db-layer-list` / React `LayerList` is a compact list for editor layers and effect stacks. It composes native Designbase ghost buttons and outline icons. Default labels follow `dbSetLocale`; item labels and custom action labels belong to the host document.
+
+```tsx
+import { useState } from 'react';
+import { LayerList, type LayerListItem } from '@designbasekorea/ui-wc/react';
+const initial: LayerListItem[] = [
+  { id:'color', label:'Color grade', visible:true },
+  { id:'grain', label:'Film grain', locked:true },
+];
+export function Effects() {
+  const [items,setItems] = useState(initial);
+  return <LayerList items={items} dragMode="handle"
+    onChange={e => { setItems(e.detail.items); /* persist complete document state */ }} />;
+}
+```
+
+- `items`: array or JSON string, unique stable `id`, `label`, optional `description`, official `icon`, `visible` (default true), `locked`, `removable` (default true), `actions: {id,label,icon,disabled?}[]`.
+- `drag-mode`: `handle` (default) or `row`. Row mode omits the grip; mouse/touch can drag anywhere except action buttons. Use handle mode when touch users need to scroll by swiping rows.
+- `selected-id` / `selectedId`: selected item. Selection does not change visibility or lock.
+- `actions-visibility` / `actionsVisibility`: `always` (default) or `hover`. Hover mode reveals controls on row hover or keyboard focus, keeps label space stable, and always displays actions on touch devices.
+- `disabled`, `hide-visibility`, `hide-lock`, `hide-delete` are boolean options.
+- `--db-layer-list-max-height`: opt-in scrolling height, e.g. `240px`. Dragging at an overflowing ancestor's top/bottom scrolls it. Width always stays inside the parent.
+
+`db-change` delivers `{items,itemId,action,fromIndex?,toIndex?}`, where action is `reorder`, `visibility`, `lock`, or `delete`. `db-reorder` also reports reorder only. `db-selection-change` reports `{itemId}`. `db-action` reports custom `{itemId,actionId}`; the owner implements duplication, settings, etc. React maps these to `onChange`, `onReorder`, `onSelectionChange`, `onAction`. Persist only once through `onChange`; subscribing to both change and reorder must not produce two history entries.
+
+A locked item cannot initiate drag or be deleted, but can be unlocked or hidden. Other items may reorder around it. `removable:false` removes delete entirely. No network or project deletion occurs automatically; the component only changes its local list and emits the result. Supply saved items on remount.
+
+Keyboard on a focused row: arrows focus previous/next, Enter/Space select, Alt+Up/Down reorder, Delete/Backspace delete when allowed, Escape cancels an active drag. Buttons retain their own normal keyboard behavior. Pointer cancellation and disconnection cancel uncommitted reorder. One drop produces one change; clicking an action never initiates row drag.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designbasekorea/ui-wc",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Supernormal Web Components 및 React wrapper — by Designbase",
   "type": "module",
   "main": "dist/index.cjs",