Fix inspection follow-ups: docs, import UX, rendering fidelity

[zeidalidiez]

Summary

Addresses the post-tier-4 repo inspection findings: truthfulness of docs vs code, import UX, schema fields that were ignored by the renderer, preview fidelity, AI mode, and tooling hygiene.

Fixes

• Templates CSS: interpolate theme border colors (broken single-quoted ${} strings)
• JSON import: explicit Import button instead of auto-parse while typing
• CSV import: quoted-field parser, all asset kinds, validateManifest before accept
• File upload + drag-and-drop for JSON/CSV on the Manifest home view
• Renderer honors schema fields: frame_style, show_grid, numbering_style, panel_guides, fill_mode (procedural checker), export_panel_metadata sidecar
• AssetPreview uses core drawAsset so preview matches ZIP output
• Job Overview preview strips (2–3 assets per request)
• Generate UX: progress bar, cancel via AbortSignal
• AI-driven mode (localStorage) + Copy AI prompt on Templates
• UIBuilder uses shared builderLayerFactories (no duplicated factories)
• README rewritten to match current product; dual-renderer limits documented
• pnpm lint runs tsc --noEmit in each package
• @placeholderer/templates package scaffolded (engine re-exports)
• CLI help string cleanup

Known remaining limits (documented)

• Core builder_recipe path is solid-fill only vs full web Builder
• custom_fill_image does not load external rasters in core (checker overlay when tile fill is requested)
• System fonts only (no bundled webfonts)

Test plan

• pnpm test (core + CLI) — 99 tests
• pnpm -r build
• pnpm lint
• pnpm e2e (Playwright; updated for Import JSON button + AI mode)
• Manual: paste JSON → Import → preview strip → Generate → cancel mid-run
• Manual: CSV with quoted fields + wrong kind fails validation
• Manual: Templates borders follow theme; AI mode shows Copy AI prompt

Greptile Summary

This PR updates Placeholderer’s import, preview, generation, rendering, docs, and tooling flows. The main changes are:

• Explicit JSON import plus upload and drag-and-drop support.
• Shared CSV parsing with quoted-field support and schema validation.
• Overview preview strips and AssetPreview rendering aligned with generateJob.
• Generation progress, cancellation support, and manifest report handling.
• Core rendering support for schema fields such as grids, numbering, panel styles, guides, fill mode, and panel metadata.
• AI-driven Templates prompt copying and a new @placeholderer/templates scaffold.
• README and lint scripts updated to match current behavior.

Confidence Score: 5/5

Safe to merge with low risk from the reviewed changes.

No new issues were identified in the changed code paths. The earlier AssetPreview preview mismatch and crash concerns appear addressed by matching generateJob rendering branches and catching renderer failures. CSV parsing, generation sidecars, package lint scripts, and tests are consistent with the updated behavior.

No files require special attention.

T-Rex Logs

What T-Rex did

• Ran the web UI end-to-end tests; the log shows PLAYWRIGHT_BROWSERS_PATH=/ms-playwright pnpm e2e completed with exit code 0 and all 5 tests passed.
• Recorded a UI flow video that covers the Import Manifest through overview generation and Templates AI mode.
• Captured a set of before/after UI screenshots including the Import page before JSON import, the Job Overview after import, the generation report, and the Templates AI prompt state.
• Reviewed and confirmed the presence of the E2E log, UI video, and screenshots in the artifacts bundle to support the validation.

_{Ran code and verified through T-Rex}

Important Files Changed

Filename	Overview
README.md	Rewrites user-facing documentation to match current import, rendering, CLI, build, and known-limit behavior.
apps/web/src/App.tsx	Adds explicit JSON import, upload/drop handling, CSV integration, AI-mode persistence, preview strips, and cancellable generation progress.
apps/web/src/AssetPreview.tsx	Updates preview rendering to mirror generateJob branches and catch recipe rendering failures in the UI.
apps/web/src/CSVImport.tsx	Routes CSV imports through the shared parser and schema validation with explicit asset-kind selection.
packages/core/src/builderRender.ts	Documents and enforces the core builder-renderer subset for unsupported fills and raster layers.
packages/core/src/csv.ts	Adds shared CSV-to-manifest parsing with quoted-field support, typed coercion, and selected-kind enforcement.
packages/core/src/generate.ts	Adds cancellable progress-aware generation plus rendering-side support for builder recipes, panel metadata, and sidecar reporting.
packages/core/src/render.ts	Expands core rendering to honor fill modes, numbering styles, grid toggles, panel frame styles, guides, and panel metadata.
packages/templates/src/index.ts	Re-exports engine guide and starter-manifest helpers from core as the templates package public surface.
tests/e2e/placeholderer.spec.ts	Updates Playwright coverage for explicit JSON import and AI-driven Templates prompt visibility.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant User
participant App as apps/web App
participant CSV as CSVImport / parseCsvToManifest
participant Core as @placeholderer/core
participant Preview as AssetPreview
participant Zip as ZIP download/report

User->>App: Paste/upload/drop JSON or CSV
alt JSON import
    App->>Core: validateManifest(parsed JSON)
else CSV import
    App->>CSV: parseCsvToManifest(text, selected kind)
    CSV->>Core: validateManifest(manifest)
end
Core-->>App: valid manifest or errors
App->>Preview: render overview preview strip
Preview->>Core: drawAsset or renderBuilderRecipe
User->>App: Generate / Cancel
App->>Core: generateJob(manifest, backend, signal, onProgress)
Core-->>App: progress callbacks and GenerateResult
alt success
    App->>Zip: download ZIP and read manifest-report.json
else cancelled or errors
    App-->>User: show cancellation/error report
end

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant User
participant App as apps/web App
participant CSV as CSVImport / parseCsvToManifest
participant Core as @placeholderer/core
participant Preview as AssetPreview
participant Zip as ZIP download/report

User->>App: Paste/upload/drop JSON or CSV
alt JSON import
    App->>Core: validateManifest(parsed JSON)
else CSV import
    App->>CSV: parseCsvToManifest(text, selected kind)
    CSV->>Core: validateManifest(manifest)
end
Core-->>App: valid manifest or errors
App->>Preview: render overview preview strip
Preview->>Core: drawAsset or renderBuilderRecipe
User->>App: Generate / Cancel
App->>Core: generateJob(manifest, backend, signal, onProgress)
Core-->>App: progress callbacks and GenerateResult
alt success
    App->>Zip: download ZIP and read manifest-report.json
else cancelled or errors
    App-->>User: show cancellation/error report
end

Loading

_{Reviews (3): Last reviewed commit: "Guard AssetPreview against core recipe r..." | Re-trigger Greptile}