CHUNK #3: Writing Surface — editor wiring, storage view, polish
Complete the Writing Surface chunk: wire the web writing view to the
offline-first storage adapter, finish the editor package exports, and
apply Step 4 polish (SVG monogram logo, real project in the sidebar,
font settings → CSS variables).
Editor package
- Re-export EditorContent + Editor type from @pubscript/editor so the
web app never imports TipTap directly.
Web writing view (apps/web)
- project-store (zustand) over storageLocal: project, chapters, active
chapter, autosave via createAutosave, idle detection via
createIdleDetector.
- Client-side seed mirroring the server seed ("The Glass Harbor").
- WritingView component: editor + autosave label + word/scene count +
chapter nav; wire the /write route inside AppShell.
- Import editor.css in main.tsx.
Core storage contract
- Extend StorageAdapter with createBook/listBooks/listChapters;
implement in local + server adapters; update contract test mock.
Polish
- Sidebar: SVG monogram logo + live project title/word count instead
of the placeholder "The Silent Cartographer".
- Fonts: applyFontSettings() in the theme engine writes --ps-font-*
variables; .ps-content reads --ps-font-size/leading/measure; settings
store applies fontSize on boot and change.
Docs
- PLAN.md: CHUNK #3 → in progress.
- CHUNK#3_PROGRESS.md: steps 1–3 done, step 4 polish in progress.
Verified: full workspace typecheck clean, lint clean, core 24 / ui 5 /
editor 7 tests pass, web build clean. (server vitest hits EADDRINUSE on
8080 — pre-existing Docker WordPress port conflict, unrelated.)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { create } from "zustand";
|
||||
import { applyTheme, type ThemeId } from "@pubscript/ui";
|
||||
import { applyFontSettings, applyTheme, type ThemeId } from "@pubscript/ui";
|
||||
|
||||
export type Density = "compact" | "comfortable";
|
||||
|
||||
@@ -44,14 +44,16 @@ export interface SettingsStore extends AppSettings {
|
||||
|
||||
export const useSettings = create<SettingsStore>((set, get) => {
|
||||
const initial = loadSettings();
|
||||
// Apply the persisted theme on boot.
|
||||
// Apply the persisted theme + font on boot.
|
||||
applyTheme(initial.theme);
|
||||
applyFontSettings({ size: initial.fontSize });
|
||||
|
||||
return {
|
||||
...initial,
|
||||
set: (patch) => {
|
||||
const next = { ...get(), ...patch };
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
|
||||
if (patch.fontSize != null) applyFontSettings({ size: next.fontSize });
|
||||
set(next);
|
||||
},
|
||||
setTheme: (theme) => {
|
||||
@@ -61,6 +63,7 @@ export const useSettings = create<SettingsStore>((set, get) => {
|
||||
reset: () => {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
applyTheme(DEFAULT_SETTINGS.theme);
|
||||
applyFontSettings({ size: DEFAULT_SETTINGS.fontSize });
|
||||
set({ ...DEFAULT_SETTINGS });
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user