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:
@@ -118,12 +118,12 @@ body {
|
||||
overflow: auto;
|
||||
}
|
||||
.ps-content {
|
||||
max-width: 820px;
|
||||
max-width: var(--ps-font-measure, 720px);
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px 96px;
|
||||
font-family: var(--ps-font-body);
|
||||
font-size: 17px;
|
||||
line-height: 1.75;
|
||||
font-size: var(--ps-font-size, 17px);
|
||||
line-height: var(--ps-font-leading, 1.75);
|
||||
}
|
||||
|
||||
/* ---- Sidebar nav ---- */
|
||||
@@ -137,7 +137,12 @@ body {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.ps-logo .ps-logo-mark { color: var(--ps-accent); }
|
||||
.ps-logo .ps-logo-mark {
|
||||
color: var(--ps-accent);
|
||||
width: 1.35em;
|
||||
height: 1.35em;
|
||||
flex: none;
|
||||
}
|
||||
.ps-nav-section-title {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -130,3 +130,39 @@ export function applyTheme(id: ThemeId): ThemeId {
|
||||
export function getActiveTheme(): ThemeId {
|
||||
return activeTheme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Runtime font overrides for the writing surface. See PLAN.md §4.1/§4.7.
|
||||
* These layer on top of the theme's base font families.
|
||||
*/
|
||||
export interface FontSettings {
|
||||
/** Body font family override (falls back to the theme's body font). */
|
||||
family: string;
|
||||
/** Base body font size in px. */
|
||||
size: number;
|
||||
/** Line height as a unitless multiplier. */
|
||||
leading: number;
|
||||
/** Prose column max width (measure) in px. */
|
||||
measure: number;
|
||||
}
|
||||
|
||||
export const DEFAULT_FONT_SETTINGS: FontSettings = {
|
||||
family: "",
|
||||
size: 18,
|
||||
leading: 1.7,
|
||||
measure: 720,
|
||||
};
|
||||
|
||||
/**
|
||||
* Apply font settings by writing CSS variables to :root. The prose column
|
||||
* (`.ps-content`) reads these; an empty `family` leaves the theme's body font
|
||||
* in place. Safe to call before the DOM exists (no-op).
|
||||
*/
|
||||
export function applyFontSettings(s: Partial<FontSettings>): void {
|
||||
const root = typeof document !== "undefined" ? document.documentElement : undefined;
|
||||
if (!root) return;
|
||||
if (s.size != null) root.style.setProperty("--ps-font-size", `${s.size}px`);
|
||||
if (s.leading != null) root.style.setProperty("--ps-font-leading", String(s.leading));
|
||||
if (s.measure != null) root.style.setProperty("--ps-font-measure", `${s.measure}px`);
|
||||
if (s.family != null && s.family !== "") root.style.setProperty("--ps-font-body", s.family);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user