WookcomDocsIr a Wookcom ↗

Wookcom interface and canvas corrections

Approved design

Use the supplied Wookcom logo unchanged, blue/black branding, neutral white surfaces, and the reference's left category panel and independent right toolbar buttons. The login uses the reference's two-column layout on desktop and one column on mobile; Google and email/password remain the only sign-in methods. Existing registration and password recovery remain functional.

Tokens are scoped to .application-ui so authored websites retain their design. Brand blue is #0075ff, actionable blue #005fcc for AA white labels/links, text #111827, and white/gray surfaces. Existing 4px spacing increments and system typography remain; controls use 4–6px radii, panels 8–16px, with one restrained panel shadow. No decorative animation or gradients were added. The original logo's embedded appearance is preserved.

Changes

  • Shared logo asset and component; visible product naming changed to Wookcom. Persistence keys, Firebase project identifiers and MCP protocol identifiers remain compatible.
  • Left category panel: 208px, branded header, collapse/category/search controls, selected/hover/focus states and an explicit no-results message. Existing component searches and drag/drop remain shared across categories.
  • Right toolbar buttons align in a separate vertical column under undo/redo; preview has the same white button surface. Publish stays above the flame with its existing accessible tooltip. Lists scroll on short screens.
  • Desktop page frame fills available viewport width. The authored background belongs to that frame; the surrounding workspace stays neutral. Centered 1000px content coordinates are retained to avoid moving saved elements relative to the published layout. Tablet (768px), mobile (375px) and explicit zoom retain their dimensions.
  • Login: responsive two-column composition, supplied logo, real product copy, Google/email authentication, account creation, password visibility, reset, disabled/loading/error/success states.
  • Browser readiness now polls HTTP instead of parsing Local: from stdout. Reproduced with env -u NO_COLOR CI=true FORCE_COLOR=1: Vite prints Local\x1b[22m:, so the old test timed out even while Vite was ready. New helper captures diagnostics, detects early exit and keeps draining child streams. CI uploads diagnostic logs and new UI screenshots.

Verification

  • Editor suite: 154 tests, including desktop width and Wookcom branding regressions observed failing before the changes.
  • Readiness: 2 Node tests (colored output plus delayed HTTP; early process exit with diagnostics).
  • Wookcom browser checks: 22, including login/registration/reset/library/text panel at 320/375/768/1440px, original logo loading, no horizontal overflow, axe AA, and real UIverse drag/drop beyond the old page boundary.
  • MCP UI: 16 surfaces passed under forced-color CI output; zero axe violations or overflow.
  • MCP E2E: 7 checks with real SDK and Auth/Firestore emulators including editing, conflict resolution, publication and revocation.
  • TypeScript, production build, diff-check and bundle budget pass. Initial JS 1188.76 kB / gzip 343.32 kB; six panels remain deferred. Existing large-chunk warning remains.

Limits and edge cases

  • Auth UI browser fixtures exercise the interface; they do not validate Google OAuth credentials in production. The existing Firebase authentication implementation is reused.
  • Empty search, narrow screens, keyboard focus and disabled preview before publication are covered by existing/new checks. A 375×480 regression verifies the auth scroll container and wheel scrolling with production body overflow hidden.
  • Independent review found two issues, both corrected: the login previously grew beyond a short viewport instead of scrolling, and the neutral workspace override hid the grid. The grid now renders as a pointer-transparent overlay inside the page frame.
  • The category-search test previously grouped all 13 categories under one 5-second timeout; a repeat run exceeded it. Each category now has its own parameterized case with identical assertions and no increased timeout.
  • Reduced zoom intentionally exposes neutral workspace; desktop at 100% fills the viewport. Fixed content coordinates preserve compatibility with existing saved/published pages.
  • No production credential changes or deployment are included. Remote CI must run on the new PR; local success is not a remote CI result.