2affd1aba0
Drag-reorderable tile grid with per-tile width control + view-scoped
persistence. Native HTML5 drag — zero runtime deps (no @dnd-kit).
──────────────────────────────────────────────────────────────────
Module surface
──────────────────────────────────────────────────────────────────
<Workspace tiles storageKey persistence? columns? readOnly?>
Wave 13.F.1 + .2
- Native HTML5 drag-and-drop (draggable + dragover + drop)
- role=grid + per-cell role=gridcell + tabIndex=0
- Keyboard shortcuts on focused tile:
← / → resize span down/up (clamped 1..columns)
↑ / ↓ move tile up/down by one slot
- Per-tile 1/2/3/4 size buttons (suppressed in readOnly)
- Drop target gets dashed accent outline
- Reset-layout CTA (suppressed in readOnly)
useWorkspaceLayout(tiles, { storageKey, persistence })
- move(from, to) / resize(id, span) / reset()
- hydrated flag — true once initial load resolves
- One-shot load on mount, save on every change (post-hydration)
reconcile(layout, tiles) · exported pure fn
- Drops entries referencing removed tiles
- Appends new tiles in registry order with defaultSpan fallback
- Used by the hook on every tile-registry change
(defensive against schema drift between releases)
localStoragePersistence · default; SSR-safe (returns null when
window is absent)
──────────────────────────────────────────────────────────────────
Quality gates
──────────────────────────────────────────────────────────────────
✓ 10/10 tests passing
- reconcile: 3 cases (drop unknown / append new / preserve order)
- hook: 4 cases (hydrate defaults / move / resize / reset)
- component: 3 cases (renders cells / keyboard resize / readOnly)
✓ tsc build clean
──────────────────────────────────────────────────────────────────
Roadmap (lands in subsequent commit)
──────────────────────────────────────────────────────────────────
13.F.1 Drag-resize tiles
13.F.2 Saved views per route + persistence layer
Showcase /futurism/workspace (MAG.6) lands in the paired showcase
commit.
35 lines
872 B
JSON
35 lines
872 B
JSON
{
|
|
"name": "@bytelyst/customizable-workspace",
|
|
"version": "0.1.0",
|
|
"type": "module",
|
|
"description": "Drag-reorderable tile grid with width control + per-view persistence. Native HTML5 drag — zero runtime deps.",
|
|
"exports": {
|
|
".": {
|
|
"import": "./dist/index.js",
|
|
"types": "./dist/index.d.ts"
|
|
}
|
|
},
|
|
"main": "./dist/index.js",
|
|
"types": "./dist/index.d.ts",
|
|
"files": ["dist"],
|
|
"scripts": {
|
|
"build": "tsc",
|
|
"test": "vitest run --pool forks",
|
|
"typecheck": "tsc --noEmit"
|
|
},
|
|
"peerDependencies": {
|
|
"react": ">=18.0.0",
|
|
"react-dom": ">=18.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@testing-library/react": "^16.3.2",
|
|
"@types/react": "^19.2.14",
|
|
"@types/react-dom": "^19.2.3",
|
|
"happy-dom": "^18.0.1",
|
|
"react": "^19.2.4",
|
|
"react-dom": "^19.2.4",
|
|
"typescript": "^5.7.3",
|
|
"vitest": "^4.0.18"
|
|
}
|
|
}
|