CMS: Ledger Desk
Theme: Signalroom
Module Set: extended
Date: 2026-04-23

## Prompt
Build a complete single-file fake CMS admin panel called Ledger Desk as one self-contained `index.html` with all HTML, CSS, and JavaScript inline. Do not use external images, remote APIs, or server logic. Persist all application state in `sessionStorage` under the key `cms_state`, so refresh preserves the panel but a new tab starts from a fresh seeded instance. Use hash routing with `#/dashboard`, `#/posts`, `#/posts/new`, `#/posts/edit/:id`, `#/pages`, `#/pages/new`, `#/pages/edit/:id`, `#/categories`, `#/tags`, `#/media`, `#/comments`, and `#/users`.

The CMS should feel like a credible editorial operations system for a modern publishing team, not a generic SaaS analytics dashboard. The visual direction is Signalroom: warm paper-like backgrounds, dark ink shell chrome, sharp editorial red for urgent states, cool teal for publish-ready states, muted graphite borders, dense but readable tables, compact rule lines, restrained shadows, and subtle scanline/grid texture. Prioritise operational density and scanability with short labels, compact cards, clear section headers, small uppercase metadata, and decisive hover, selected, focus, loading, empty, and error states. Use only sans-serif UI typography, with a condensed-feeling heading stack and monospace accents for slugs, counts, timestamps, and workflow metadata.

Seed realistic content on first load:
- 14 posts across the last three months with real titles, excerpts, multi-paragraph body content, status values from `draft`, `published`, `pending`, and `trash`, plus editorial metadata such as workflow stage, SEO score, legal review flag, headline owner, and fake view counts.
- 6 pages including Home, About, Services, Contact, Privacy Policy, and Newsletter.
- 9 categories with hierarchy.
- 18 tags with varied usage.
- 10 comments with `approved`, `pending`, `spam`, and `trash`, including a few threaded replies.
- 4 users: administrator, editor, author, subscriber.
- 8 media records with filenames, dimensions, alt text, type, and upload metadata.
- Settings for site title, tagline, admin email, timezone, posts per page, comments enabled, registration enabled, and default role.

Implement the SPA around four pillars:
1. State layer in `sessionStorage` with immediate persistence after every mutation.
2. Hash router with view rendering, breadcrumbs, active nav states, and safe fallback to `#/dashboard`.
3. Realistic ID-based content relationships across posts, pages, taxonomy, comments, users, and media.
4. UX that simulates a production editorial CMS, including review queues, moderation actions, row selection, bulk operations, and modal confirmations.

Required UI shell:
- Left sidebar with grouped navigation, icons drawn inline with SVG, active state treatment, mobile collapse, and a distinct editorial identity.
- Fixed top bar with search, queue summary, notification badge, environment badge, and current user menu.
- Main content area with breadcrumbs, route title, route actions, and dense card/table layouts.
- Footer with CMS version, deployment context `https://crest-alpha-origin.pages.dev`, and fake backup timestamp.

Required interactions and components:
- Dashboard with stats cards, a live editorial queue, recent activity, pending comment queue, quick draft composer, and content calendar.
- Posts list with status tabs, workflow filters, search, sortable columns, checkbox selection, bulk actions, quick edit modal, screen-options modal, pagination text, empty state, and a selected row side panel.
- Post editor with title, slug generation and manual override, deck/excerpt, contenteditable rich text editor, toolbar for bold/italic/H2/H3/link/lists/blockquote/code, live word count and reading time, autosave indicator, publish controls, category hierarchy, tag input, featured media picker, checklist panel, and unsaved-changes protection.
- Pages list and editor with hierarchy, templates, parent page selection, and order field.
- Categories and tags management with two-panel layout, inline edit, add forms, slug generation, and delete confirmation.
- Media library with grid/list toggle, filter chips, simulated upload modal, detail modal, and metadata editing.
- Comments moderation queue with status tabs, threaded display, quick actions, reply composer, and bulk state changes.
- Users list with role filters, badges, row actions, and an edit view preventing self-demotion.
- Toast notifications for success, warning, info, and error.
- A reusable modal system for destructive confirmation, quick edit, screen options, and media details.
- Loading skeletons during route transitions with a short fake delay.
- Explicit empty, loading, error, selected, hover, and focus states throughout the UI.
- Keyboard shortcuts: `Ctrl/Cmd+S` saves in editors, `Escape` closes modals, and `Enter` confirms modal actions.
- Accessibility: semantic landmarks, visible focus rings, labelled icon buttons, modal focus management, skip link, and reduced-motion support.

Make the fake workflows feel editorially credible. Show review queues like Legal, SEO, Ready to Publish, and Scheduled. Use realistic titles such as launch notes, campaign recaps, publishing calendars, and newsroom retrospectives. Include believable counts, timestamps, moderation notes, and workflow badges. Keep motion restrained and operational rather than flashy. Everything must work without any network dependency.

## Notes
- Chosen direction: newsroom-flavoured publishing operations rather than a neutral enterprise dashboard.
- Module set remains `extended`, but posts include richer workflow metadata to make editorial queues credible without needing the full settings/appearance/menu surface.
- The design should feel dense, fast, and trustworthy on desktop while collapsing cleanly to cards and stacked controls on mobile.
- No external media: use inline SVG icons, gradients, pattern overlays, and text-driven placeholders only.

## Seed Data Summary
- Posts: 14
- Pages: 6
- Categories: 9
- Tags: 18
- Comments: 10
- Users: 4
- Media: 8
- Settings object: 1