@designbasekorea/ui-wc 0.14.0 → 0.16.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/docs/MEDIA-EDITORS.md

@@ -61,3 +61,12 @@ The Effects/property-keyframes demo drives a live X/Y/scale/opacity sample. It u
 U, while the timeline is focused outside text inputs, expands/collapses the selected clip's effect properties. Click a key to select it; Shift toggles additive selection. Drag empty property-lane space to box-select visible keys across rows (Shift adds). Selected diamonds are filled and outlined. Drag a selected key to move the selection by one shared frame-quantized delta, bounded by clip edges and unselected neighbors. Delete/Backspace removes selected keys; the two-level Context Menu applies easing presets to their outgoing segments. Detailed property graphs still expose exact values and Bezier tangents. Escape rolls back timing drags or box selection. Timeline tool text is nonselectable; actual text-entry controls remain selectable. Value readouts target a dedicated class and never replace Button icon nodes.
 
 Alt/Option + key drag duplicates the entire selected key group, preserving original IDs, values and tangent data. Copies receive new IDs and a shared frame offset; landing on an existing key frame is rejected. Duplicate, delete and easing actions are available from the real ContextMenu with an Easing submenu. Plain dragging anywhere in blank effect content starts a marquee. Cmd/Ctrl+Z undoes committed timeline edits and Shift+Cmd/Ctrl+Z redoes them (up to 100 snapshots); optimistic moves and selection changes do not create history. External clip replacements reset native history; own controlled commit echoes do not. Undo/redo emits db-change actions undo/redo for consumers with their own history integration.
+
+
+### Label panel and composition boundary
+
+`label-width` / React `labelWidth` defaults to 144px (120–480px). Drag any vertical divider on the ruler, track name, or effect property label. Arrow keys resize a focused divider, Shift uses larger steps, Home resets; Escape cancels pointer resizing. Persist `db-label-resize.detail.width` / `onLabelResize` alongside editor preferences. Long names use single-line ellipsis and retain their complete title for inspection.
+
+Single-effect clips use one Effects disclosure; multiple effects retain per-effect grouping. `U` expands/collapses the active clip's effect controls.
+
+`duration` remains the composition/playback boundary. Moving a clip beyond it preserves its start and full duration, including when controlled hosts reapply `clips`; the canvas expands to show the clip, and only the part after the boundary is faded. Playback remains bounded by `duration`; exporting/rendering outside the composition remains a host decision. Media source limits still apply to trimming. Collision protection remains active; Cmd/Ctrl insert moves following clips when required.

package/package.json

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