Studio Content Module — Slice Tracking

Mô-đun Content trong LumiBase Studio quản lý dữ liệu động cho một collection duy nhất. Development được chia thành các "slices" (phát triển tăng dần, mỗi slice xây dựng trên slice trước).

Tổng quan

---

Slice 1 — SDK items API + Content module list view

Mục tiêu: Thiết lập SDK items API và view danh sách content.

SDK items API

• File: packages/sdk/src/client.ts
• APIs:
  • listItems(siteId, collectionId, options) — danh sách items với filter/sort/pagination
  • getItem(siteId, collectionId, itemId) — chi tiết item
  • createItem(siteId, collectionId, data) — tạo item mới
  • updateItem(siteId, collectionId, itemId, data) — cập nhật item
  • deleteItem(siteId, collectionId, itemId) — xoá item
  • listFields(siteId, collectionId) — danh sách fields của collection

Content module list view

• File: apps/studio/src/modules/content/items-list.tsx
• Features:
  • Tabular view của items
  • Filter, sort, pagination
  • Click row → navigate đến detail editor
  • PAGE_SIZE = 25

---

Slice 2 — Detail editor shell + Revisions tab + Raw JSON tab

Mục tiêu: Xây dựng shell cho detail editor với 3 tab: Fields, Revisions, Raw JSON.

Item detail editor

• File: apps/studio/src/modules/content/item-detail.tsx
• Tabs:
  • FieldsTab: Form edit các field (sẽ được wire vào interface registry ở slice 3+)
  • RevisionsTab: Danh sách revisions với khả năng revert
  • RawJsonTab: Xem/edit raw JSON của item

Revisions panel

• File: apps/studio/src/modules/content/revisions-panel.tsx
• Features:
  • List revisions (từ SDK: listRevisions())
  • Hiển thị delta JSON (before/after)
  • Nút revert về revision cũ
  • Diff viewer (sẽ được thêm ở slice 6)

Raw JSON panel

• File: apps/studio/src/modules/content/raw-json-panel.tsx
• Features:
  • Monaco Editor để xem/edit raw JSON
  • Validate JSON trước khi save
  • Sync với FieldsTab

---

Slice 3 — Interface registry phần 1

Mục tiêu: Xây dựng interface registry và implement các interface cơ bản.

Interface registry

• File: apps/studio/src/modules/content/interfaces/registry.tsx
• Contract: InterfaceComponent<T> nhận { value, onChange, field }
• Helper: readOptions<T>(field) đọc options từ field.meta.options

Interfaces implement (Phase A + Phase B slice 3)

---

Slice 4 — Interface registry phần 2

Mục tiêu: Implement các interface phức tạp hơn: relation, code, wysiwyg, markdown, file, repeater, presentation.

Interfaces implement (Phase B slice 4)

Lưu ý: File interface chỉ stub UI, không thực hiện upload thật. TODO: phase-e/storage

---

Slice 5 — Display registry + Raw toggle + Bulk raw editor

Mục tiêu: Xây dựng display registry cho list view, raw toggle per field, và bulk raw editor.

Display registry

• File: apps/studio/src/modules/content/displays/registry.tsx
• Contract: DisplayProps<T> nhận { value, field, row? }
• Purpose: Render field values trong list view (read-only, stateless)

Displays implement

Raw toggle per field

• File: apps/studio/src/modules/content/interfaces/raw-toggle.tsx
• Features:
  • Toggle giữa interface component và Monaco Editor (raw JSON)
  • Preserve user edits ngay cả khi JSON invalid
  • Wire vào FieldsTab của item-detail

Bulk raw editor

• File: apps/studio/src/modules/content/bulk-raw-editor.tsx
• Features:
  • Select multiple items từ list view
  • Edit raw JSON của tất cả selected items cùng lúc
  • Validate JSON trước khi save
  • Wire vào items-list với "Edit raw (N)" button

---

Slice 6 — Revisions diff viewer + Mustache display

Mục tiêu: Implement diff viewer cho revisions và mustache display template.

Revisions diff viewer

• File: apps/studio/src/modules/content/revisions-diff.tsx
• Features:
  • So sánh delta.before và delta.after của revision
  • Highlight thay đổi (added/removed/modified)
  • Toggle giữa diff view và raw JSON
  • Filter "Show unchanged"
  • Wire vào RevisionsPanel

Mustache display

• File: apps/studio/src/modules/content/displays/mustache.tsx
• Features:
  • Mustache template interpolation sử dụng field.meta.displayTemplate
  • Truy cập sibling fields thông qua row prop
  • Wire vào display registry

---

Slice 7 — Cập nhật docs/features/field-types-and-config.md

Mục tiêu: Cập nhật documentation để reflect những gì đã implement.

Tasks

• Cập nhật danh sách interface thực tế (đã implement)
• Cập nhật danh sách display thực tế (đã implement)
• Thêm note về raw toggle, bulk raw editor, diff viewer
• Sync với code hiện tại

---

Dependencies & Tech Stack

• React + Vite — Frontend framework
• @tanstack/react-query — Data fetching & caching
• @monaco-editor/react — Code editor (JSON, code interface)
• @lumibase/sdk — Workspace dependency cho API
• dnd-kit — Drag-and-drop cho repeater
• Tailwind CSS — Styling
• Mustache.js — Template interpolation (mustache display)

---

Nguồn slice definitions

Các slice definitions không có trong task docs (docs/roadmap/tasks.md chỉ có phases). Slice definitions được tạo bởi AI assistant dựa trên:

1. Yêu cầu thực tế của LumiBase Studio
2. Best practices cho incremental development
3. Tách biệt rõ ràng giữa: SDK → UI shell → Interface registry → Display registry → Advanced features

Reference: Design spec tại docs/features/field-types-and-config.md