docs: update architecture and plan for tree inspector UI
Record the viewer-registry decision and refresh the extract/web descriptions and repo layout.
This commit is contained in:
@@ -47,8 +47,8 @@ apps/web ──► apps/proxy ──► packages/tts ──► packages/shared
|
|||||||
|
|
||||||
- **`apps/web` → `apps/proxy`** — calls `/search`, `/items/:id`, and
|
- **`apps/web` → `apps/proxy`** — calls `/search`, `/items/:id`, and
|
||||||
`/items/:id/file` over HTTP.
|
`/items/:id/file` over HTTP.
|
||||||
- **`apps/web` → `packages/extract`** — uses `flattenObjects` / `collectRefs`
|
- **`apps/web` → `packages/extract`** — uses `buildTree` / `collectRefs`
|
||||||
to analyze a loaded `TTSMod` in the browser.
|
to analyze a loaded `TTSMod` in the browser (tree sidebar + asset refs).
|
||||||
- **`apps/proxy` → `packages/tts`** — calls `fetchMod` / `getFileName` to serve
|
- **`apps/proxy` → `packages/tts`** — calls `fetchMod` / `getFileName` to serve
|
||||||
item requests.
|
item requests.
|
||||||
- **`apps/proxy` → `packages/shared`** — uses shared types and zod schemas for
|
- **`apps/proxy` → `packages/shared`** — uses shared types and zod schemas for
|
||||||
|
|||||||
@@ -112,3 +112,20 @@ small amount of client state (search + mod).
|
|||||||
**Alternatives considered:** Next.js (heavier than needed for a client-only
|
**Alternatives considered:** Next.js (heavier than needed for a client-only
|
||||||
tool); Redux Toolkit (more boilerplate than warranted); CSS Modules (no
|
tool); Redux Toolkit (more boilerplate than warranted); CSS Modules (no
|
||||||
utility styling).
|
utility styling).
|
||||||
|
|
||||||
|
## D10 — Object inspection via a viewer registry
|
||||||
|
|
||||||
|
**Decision:** The mod page shows a containment-tree sidebar (mirroring how TTS
|
||||||
|
nests objects) and an inspector pane. The inspector resolves a per-class viewer
|
||||||
|
from a registry (`registerViewer` / `resolveViewer`), falling back to a
|
||||||
|
`DefaultViewer` that renders an object's raw fields.
|
||||||
|
|
||||||
|
**Context:** The user wants to visualize objects in a save. A flat list of all
|
||||||
|
objects and assets is hard to navigate, so the UI was reworked around a tree
|
||||||
|
and a selected-object inspector. Custom viewers per object class (`Card`,
|
||||||
|
`Bag`, ...) are expected later; a registry keeps that extension point explicit
|
||||||
|
without coupling the page to any one viewer.
|
||||||
|
|
||||||
|
**Alternatives considered:** A single monolithic inspector component. Rejected —
|
||||||
|
would grow unboundedly as per-class viewers are added; the registry keeps each
|
||||||
|
viewer isolated and swappable.
|
||||||
@@ -78,7 +78,9 @@ tts-workshop/
|
|||||||
│ │ ├── SearchPage.tsx
|
│ │ ├── SearchPage.tsx
|
||||||
│ │ └── ModPage.tsx
|
│ │ └── ModPage.tsx
|
||||||
│ ├── components/
|
│ ├── components/
|
||||||
│ │ └── SearchResults.tsx
|
│ │ ├── SearchResults.tsx
|
||||||
|
│ │ ├── ObjectTree.tsx # containment-tree sidebar
|
||||||
|
│ │ └── viewers.tsx # viewer registry + default viewer
|
||||||
│ └── stores/
|
│ └── stores/
|
||||||
│ ├── searchStore.ts # zustand
|
│ ├── searchStore.ts # zustand
|
||||||
│ └── modStore.ts # zustand
|
│ └── modStore.ts # zustand
|
||||||
@@ -145,6 +147,9 @@ Isomorphic analysis of a parsed `TTSMod`. No Node-specific APIs.
|
|||||||
- `flattenObjects(mod)` — all objects in the tree.
|
- `flattenObjects(mod)` — all objects in the tree.
|
||||||
- `filterObjects(mod, predicate)` — filter by name, GUID, type, etc.
|
- `filterObjects(mod, predicate)` — filter by name, GUID, type, etc.
|
||||||
- `findObject(mod, guid)` — lookup by GUID.
|
- `findObject(mod, guid)` — lookup by GUID.
|
||||||
|
- `buildTree(mod)` — containment tree (`{ object, label, children }`),
|
||||||
|
mirroring how TTS nests objects; `label` is `Nickname` when present,
|
||||||
|
else the class `Name`.
|
||||||
- `traverseMod` / `markParent` (moved from `tts`).
|
- `traverseMod` / `markParent` (moved from `tts`).
|
||||||
- Returns lightweight graph shapes: `{ guid, name, type, parentGuid,
|
- Returns lightweight graph shapes: `{ guid, name, type, parentGuid,
|
||||||
childrenGuids, refs }`.
|
childrenGuids, refs }`.
|
||||||
@@ -195,9 +200,14 @@ proxy API and `packages/extract` directly for analysis.
|
|||||||
`modFileUrl` helper for the raw-file download.
|
`modFileUrl` helper for the raw-file download.
|
||||||
- `pages/SearchPage.tsx` — search form, drives `searchStore`.
|
- `pages/SearchPage.tsx` — search form, drives `searchStore`.
|
||||||
- `pages/ModPage.tsx` — loads the mod via `modStore`, uses `@tts/extract`
|
- `pages/ModPage.tsx` — loads the mod via `modStore`, uses `@tts/extract`
|
||||||
(`flattenObjects`, `collectRefs`) to render objects and asset refs, and links
|
(`buildTree`, `collectRefs`) to render a containment-tree sidebar and an
|
||||||
to the raw save file.
|
inspector pane for the selected object, and links to the raw save file.
|
||||||
- `components/SearchResults.tsx` — result grid + pagination.
|
- `components/SearchResults.tsx` — result grid + pagination.
|
||||||
|
- `components/ObjectTree.tsx` — recursive tree sidebar; each entry shows a
|
||||||
|
class tag + display label, indented by depth. Clicking selects an object.
|
||||||
|
- `components/viewers.tsx` — viewer registry (`registerViewer` /
|
||||||
|
`resolveViewer`) plus a `DefaultViewer` that renders an object's fields;
|
||||||
|
custom per-class viewers can be registered later.
|
||||||
- `stores/searchStore.ts` / `stores/modStore.ts` — Zustand stores for search
|
- `stores/searchStore.ts` / `stores/modStore.ts` — Zustand stores for search
|
||||||
and mod state.
|
and mod state.
|
||||||
- `vite.config.ts` — dev proxy for `/search`, `/items`, `/health` →
|
- `vite.config.ts` — dev proxy for `/search`, `/items`, `/health` →
|
||||||
|
|||||||
Reference in New Issue
Block a user