You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Two polish gaps on the in-repo showcase apps, bundled here per the owner's request (one issue, one PR):
Logo divergence. The marketing site website/ renders the canonical webjs mark as a theme-aware gradient square driven by --logo-from / --logo-to CSS vars (distinct light and dark values) plus an accent-tint shadow. The @webjsdev/ui website and examples/blog each hand-roll a DIFFERENT square (different corner radius, different gradient stops, no dark-specific gradient), so the brand mark is inconsistent across the three sites and does not track light/dark the way the canonical one does. Accent colors may also differ.
No preview code toggle. The ui website component docs show a rendered Preview pane for each example but no way to see the source snippet behind it. A Preview/Code toggle per pane is table stakes for a component gallery (shadcn-style).
Design / approach
Logo: treat website/app/layout.ts as the source of truth and replicate its mark + tokens into the other two apps (light AND dark), fixing any accent divergence. Canonical values:
Mark markup: <span class="w-[22px] h-[22px] rounded-[7px] bg-gradient-to-br from-[var(--logo-from)] to-[var(--logo-to)] shadow-[0_2px_10px_var(--accent-tint)]"></span>.
Toggle: a per-pane Preview/Code switch. Since page/layout modules do not hydrate, the interactive toggle must be a small Tier-2-style custom element (light DOM) living in packages/ui/packages/website/app/_components/ (NOT components/, see the ui-website footgun below), wrapping the existing preview markup plus a <pre> of the snippet. Progressive-enhancement: default to Preview visible so it reads with JS off.
Implementation notes (for the implementing agent)
Where to edit:
ui website logo: packages/ui/packages/website/app/layout.ts:384 (the placeholder rounded-md from-brand to-[color-mix(...)] span) + its @theme / :root / .dark blocks for the --logo-from / --logo-to / --accent-tint vars.
blog logo: examples/blog/app/layout.ts:254 (the rounded-md from-accent ... span) + its theme blocks.
preview toggle: packages/ui/packages/website/app/docs/components/[name]/page.ts (previewPane() around L67, the full component source at L136, the Preview heading L168). New toggle element under packages/ui/packages/website/app/_components/.
Landmines / gotchas:
ui-website footgun (packages/ui/AGENTS.md):packages/ui/packages/website/components/ and lib/ are wholesale GITIGNORED and regenerated by scripts/copy-registry.js via webjs.dev.before / webjs.start.before. Hand-written files there are invisible to git and 500 in prod. Put the toggle element in app/_components/ (underscore keeps it out of the router, tracked normally).
The website dev server can serve a STALE public/tailwind.css (webjs.dev only runs --watch); rebuild via the css:build before-step (memory: dev-serves-stale-tailwind).
Theme is dual-signal: chrome tokens follow data-theme on <html>, the ui kit follows a .dark class. Verify the logo in BOTH modes on a real browser, not just light.
Invariants: pages/layouts never hydrate (invariant), so the toggle interactivity MUST be a component, not page markup. Light DOM + Tailwind (ui kit rule 4).
Tests + docs: browser test for the toggle (packages/ui/packages/website has no browser suite today, so a @webjsdev/core/testingssrFixture interaction test for the toggle element, plus a smoke assertion that each app's layout renders the canonical mark). No public API change, so no AGENTS.md surface beyond a note if the toggle element is reusable.
Acceptance criteria
ui website and blog headers render the SAME gradient-square mark as website/, correct in light AND dark (verified in a real browser)
--logo-from / --logo-to / --accent-tint (and accent) match the canonical values in both apps
Each component preview pane has a working Preview/Code toggle; source snippet shown on Code, PE-safe (Preview default with JS off)
Toggle element lives in app/_components/ (not the gitignored components/)
Browser/SSR test covers the toggle; both apps boot and webjs check is clean
Problem
Two polish gaps on the in-repo showcase apps, bundled here per the owner's request (one issue, one PR):
website/renders the canonical webjs mark as a theme-aware gradient square driven by--logo-from/--logo-toCSS vars (distinct light and dark values) plus an accent-tint shadow. The@webjsdev/uiwebsite andexamples/blogeach hand-roll a DIFFERENT square (different corner radius, different gradient stops, no dark-specific gradient), so the brand mark is inconsistent across the three sites and does not track light/dark the way the canonical one does. Accent colors may also differ.Design / approach
Logo: treat
website/app/layout.tsas the source of truth and replicate its mark + tokens into the other two apps (light AND dark), fixing any accent divergence. Canonical values:--logo-from: oklch(0.63 0.17 50)/--logo-to: oklch(0.44 0.11 52)(light),--logo-from: oklch(0.8 0.16 58)/--logo-to: oklch(0.62 0.18 44)(dark).--accent-tint: color-mix(in oklch, var(--accent-live) 14%, transparent); dark accentoklch(0.7 0.16 52).<span class="w-[22px] h-[22px] rounded-[7px] bg-gradient-to-br from-[var(--logo-from)] to-[var(--logo-to)] shadow-[0_2px_10px_var(--accent-tint)]"></span>.Toggle: a per-pane Preview/Code switch. Since page/layout modules do not hydrate, the interactive toggle must be a small Tier-2-style custom element (light DOM) living in
packages/ui/packages/website/app/_components/(NOTcomponents/, see the ui-website footgun below), wrapping the existing preview markup plus a<pre>of the snippet. Progressive-enhancement: default to Preview visible so it reads with JS off.Implementation notes (for the implementing agent)
Where to edit:
packages/ui/packages/website/app/layout.ts:384(the placeholderrounded-md from-brand to-[color-mix(...)]span) + its@theme/:root/.darkblocks for the--logo-from/--logo-to/--accent-tintvars.examples/blog/app/layout.ts:254(therounded-md from-accent ...span) + its theme blocks.website/app/layout.ts:164-166, 186, 198, 262.packages/ui/packages/website/app/docs/components/[name]/page.ts(previewPane()around L67, the full componentsourceat L136, the Preview heading L168). New toggle element underpackages/ui/packages/website/app/_components/.Landmines / gotchas:
packages/ui/packages/website/components/andlib/are wholesale GITIGNORED and regenerated byscripts/copy-registry.jsviawebjs.dev.before/webjs.start.before. Hand-written files there are invisible to git and 500 in prod. Put the toggle element inapp/_components/(underscore keeps it out of the router, tracked normally).public/tailwind.css(webjs.dev only runs--watch); rebuild via thecss:buildbefore-step (memory: dev-serves-stale-tailwind).data-themeon<html>, the ui kit follows a.darkclass. Verify the logo in BOTH modes on a real browser, not just light.Invariants: pages/layouts never hydrate (invariant), so the toggle interactivity MUST be a component, not page markup. Light DOM + Tailwind (ui kit rule 4).
Tests + docs: browser test for the toggle (
packages/ui/packages/websitehas no browser suite today, so a@webjsdev/core/testingssrFixtureinteraction test for the toggle element, plus a smoke assertion that each app's layout renders the canonical mark). No public API change, so no AGENTS.md surface beyond a note if the toggle element is reusable.Acceptance criteria
website/, correct in light AND dark (verified in a real browser)--logo-from/--logo-to/--accent-tint(and accent) match the canonical values in both appsapp/_components/(not the gitignoredcomponents/)webjs checkis clean