From b35910e0f09921695dfe50c8a0807cef4f3eba49 Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 9 Jul 2026 11:54:45 +0530 Subject: [PATCH 1/4] fix: match Webjs UI and example-blog logo to the webjs.dev brand mark The Webjs UI docs site and the example blog painted their logo mark with a color-mix of the accent and the foreground, which muddied the gradient and diverged from webjs.dev. Adopt the same --logo-from / --logo-to warm-orange stops the main site and docs app already use (light and dark), so the brand mark reads identically everywhere. --- examples/blog/app/layout.ts | 11 ++++++++++- packages/ui/packages/website/app/layout.ts | 11 ++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/examples/blog/app/layout.ts b/examples/blog/app/layout.ts index cb4541a6..e25cbe65 100644 --- a/examples/blog/app/layout.ts +++ b/examples/blog/app/layout.ts @@ -155,6 +155,11 @@ export default function RootLayout({ children }: LayoutProps) { --accent-text: var(--accent); --accent-surface: color-mix(in oklch, var(--accent-live) 12%, transparent); --accent-border: color-mix(in oklch, var(--accent-live) 28%, transparent); + /* Logo mark gradient: the exact warm-orange stops webjs.dev uses, so + the brand mark reads identically here and on the main site (dark + default here; the light overrides below carry the light stops). */ + --logo-from: oklch(0.8 0.16 58); + --logo-to: oklch(0.62 0.18 44); --glow-a: oklch(0.63 0.17 44); --glow-strength: 0.16; @@ -178,6 +183,8 @@ export default function RootLayout({ children }: LayoutProps) { --accent: oklch(0.54 0.16 52); --accent-hover: oklch(0.5 0.16 52); --accent-fg: oklch(1 0 0); + --logo-from: oklch(0.63 0.17 50); + --logo-to: oklch(0.44 0.11 52); } /* light: OS preference */ @@ -195,6 +202,8 @@ export default function RootLayout({ children }: LayoutProps) { --accent: oklch(0.54 0.16 52); --accent-hover: oklch(0.5 0.16 52); --accent-fg: oklch(1 0 0); + --logo-from: oklch(0.63 0.17 50); + --logo-to: oklch(0.44 0.11 52); } } @@ -251,7 +260,7 @@ export default function RootLayout({ children }: LayoutProps) {
- + webjs / blog diff --git a/packages/ui/packages/website/app/layout.ts b/packages/ui/packages/website/app/layout.ts index 5ec7183c..22c8bf00 100644 --- a/packages/ui/packages/website/app/layout.ts +++ b/packages/ui/packages/website/app/layout.ts @@ -114,6 +114,11 @@ export default function Layout({ children }: { children: any }) { --accent-text: var(--accent); --accent-surface: color-mix(in oklch, var(--accent-live) 12%, transparent); --accent-border: color-mix(in oklch, var(--accent-live) 28%, transparent); + /* Logo mark gradient: the exact warm-orange stops webjs.dev uses, so + the brand mark reads identically across the site, the docs and the + example blog. NOT a color-mix with --fg (that muddied the mark). */ + --logo-from: oklch(0.63 0.17 50); + --logo-to: oklch(0.44 0.11 52); --glow-a: oklch(0.63 0.17 44); --glow-strength: 0.16; @@ -152,6 +157,8 @@ export default function Layout({ children }: { children: any }) { --accent: oklch(0.7 0.16 52); --accent-hover: oklch(0.75 0.16 52); --accent-fg: oklch(0.17 0.02 52); + --logo-from: oklch(0.8 0.16 58); + --logo-to: oklch(0.62 0.18 44); --glow-strength: 0.16; --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3); --shadow: 0 4px 24px oklch(0 0 0 / 0.4); @@ -181,6 +188,8 @@ export default function Layout({ children }: { children: any }) { --accent: oklch(0.7 0.16 52); --accent-hover: oklch(0.75 0.16 52); --accent-fg: oklch(0.17 0.02 52); + --logo-from: oklch(0.8 0.16 58); + --logo-to: oklch(0.62 0.18 44); --glow-strength: 0.16; --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3); --shadow: 0 4px 24px oklch(0 0 0 / 0.4); @@ -381,7 +390,7 @@ export default function Layout({ children }: { children: any }) {
- + Webjs UI From d65c61f28bd9801506be76fddda8b09238c0ff84 Mon Sep 17 00:00:00 2001 From: Vivek Date: Thu, 9 Jul 2026 11:54:54 +0530 Subject: [PATCH 2/4] feat: add Preview/Code toggle to Webjs UI component previews Every preview pane on a component docs page (the hero Preview plus the Variants / Sizes / Icon panes, across Tier 1 and Tier 2 components) now has a shadcn-style Preview / Code segmented toggle so readers can flip a live demo to the source snippet that produced it. uses shadow DOM plus slots on purpose: the live demo is projected through slot=preview, so it stays in light DOM (Tailwind and the shadcn preview tokens apply) and is projected once, never rebuilt. That keeps the ui-* custom elements it contains upgraded exactly once, so an interactive demo (tabs, dialog) keeps working after a toggle. The shadow root owns only the segmented control and hides the inactive slot. --- .../website/app/_components/preview-tabs.ts | 89 +++++++++++++++++++ .../app/docs/components/[name]/page.ts | 38 +++++++- 2 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 packages/ui/packages/website/app/_components/preview-tabs.ts diff --git a/packages/ui/packages/website/app/_components/preview-tabs.ts b/packages/ui/packages/website/app/_components/preview-tabs.ts new file mode 100644 index 00000000..b1381b1e --- /dev/null +++ b/packages/ui/packages/website/app/_components/preview-tabs.ts @@ -0,0 +1,89 @@ +import { WebComponent, html, css, signal } from '@webjsdev/core'; + +/** + * ``: a Preview / Code segmented toggle wrapping a live + * component demo and its source snippet, the way shadcn's docs let you flip a + * preview to the markup that produced it. + * + * Why shadow DOM plus slots (not a light-DOM re-render): the live demo is + * projected through `slot="preview"`, so it stays in light DOM (Tailwind and + * the shadcn preview tokens still apply) and, crucially, it is projected once + * and never rebuilt. A WebComponent that emitted the demo from its own + * `render()` would tear down and re-instantiate every `ui-*` custom element on + * each toggle (their `connectedCallback` captures `innerHTML`, so a rebuild is + * destructive). The shadow root owns only the segmented control and hides the + * inactive slot; both slots stay in the tree so the projected demo is assigned + * exactly once. + * + * Progressive enhancement: with JS off the DSD-rendered shadow shows the + * default Preview slot and the buttons are inert. The full source is also + * printed at the bottom of every component page, so no information is lost. + */ +export class PreviewTabs extends WebComponent { + static shadow = true; + + /** Which pane is visible. Instance signal, so each toggle is component-local. */ + mode = signal<'preview' | 'code'>('preview'); + + static styles = css` + :host { display: block; } + .bar { + display: inline-flex; + gap: 2px; + padding: 3px; + margin-bottom: 10px; + border: 1px solid var(--border); + border-radius: 9px; + background: var(--bg-elev); + } + .tab { + font: 500 12.5px/1 var(--font-sans, system-ui, sans-serif); + color: var(--fg-muted); + background: transparent; + border: 0; + border-radius: 6px; + padding: 6px 13px; + cursor: pointer; + transition: color 140ms ease, background 140ms ease; + } + .tab:hover { color: var(--fg); } + .tab[data-active='true'] { + color: var(--fg); + background: var(--bg-subtle); + } + .tab:focus-visible { + outline: none; + box-shadow: 0 0 0 3px var(--accent-tint); + } + [hidden] { display: none !important; } + `; + + render() { + const mode = this.mode.get(); + const isPreview = mode === 'preview'; + return html` +
+ + +
+ + + `; + } +} + +PreviewTabs.register('preview-tabs'); diff --git a/packages/ui/packages/website/app/docs/components/[name]/page.ts b/packages/ui/packages/website/app/docs/components/[name]/page.ts index ad787e58..01407783 100644 --- a/packages/ui/packages/website/app/docs/components/[name]/page.ts +++ b/packages/ui/packages/website/app/docs/components/[name]/page.ts @@ -7,6 +7,9 @@ import { } from './examples.ts'; import { getComponentApi, type ComponentApi } from './component-api.ts'; import { loadRegistryItem } from '#app/_lib/registry.server.ts'; +// Side-effect import: register so every preview pane below can +// flip between the live demo and its source snippet. +import '#app/_components/preview-tabs.ts'; // --------------------------------------------------------------------------- // Side-effect imports: load every ui-* component module so the custom @@ -76,6 +79,35 @@ function previewPane(snippet: string, opts: { minH?: string } = {}) { `; } +// Strip the shared leading indentation off a snippet so the Code view reads +// like hand-written markup rather than template-literal-indented source. +function dedent(snippet: string): string { + const lines = snippet.replace(/^\n+/, '').replace(/\s+$/, '').split('\n'); + const widths = lines + .filter((l) => l.trim().length > 0) + .map((l) => (l.match(/^[ \t]*/)?.[0].length ?? 0)); + const trim = widths.length ? Math.min(...widths) : 0; + return lines.map((l) => l.slice(trim)).join('\n'); +} + +// The "Code" side of a preview: the exact snippet that produced the demo, +// escaped (text interpolation, not unsafeHTML) so the markup shows as source. +// Reuses the site-wide 
 code surface + client highlighter.
+function codePane(snippet: string) {
+  return html`
${dedent(snippet)}
`;
+}
+
+// Wraps a live preview and its source in  so the reader can flip
+// between them. Used for the hero preview and every Variants/Sizes/Icon pane.
+function previewWithCode(snippet: string, opts: { minH?: string } = {}) {
+  return html`
+    
+      
${previewPane(snippet, opts)}

+      
${codePane(snippet)}

+    
+  `;
+}
+
 // Concatenate all defined values from a variant/size example map into one
 // snippet for the combined preview pane. Skips keys missing from the
 // examples map so a stale metadata entry doesn't blank the pane.
@@ -112,7 +144,7 @@ function renderValueSection(
               ? html`
                   

                     
${startCase(k)}

-                    ${previewPane(examples[k])}
+                    ${previewWithCode(examples[k])}
                   

                 `
               : '',
@@ -124,7 +156,7 @@ function renderValueSection(
   return html`
     

       
${heading}

-      ${previewPane(combineExamples(keys, examples))}
+      ${previewWithCode(combineExamples(keys, examples))}
     

   `;
 }
@@ -176,7 +208,7 @@ export default async function ComponentDoc({ params }: { params: { name: string
               component fresh, connectedCallback captures innerHTML correctly, and
               the rendered output looks right.
             -->
-            ${previewPane(example, { minH: '280px' })}
+            ${previewWithCode(example, { minH: '280px' })}
           
         `
         : html`

From 44784304d47fd10c62b3b3cef403d21c3e7f5474 Mon Sep 17 00:00:00 2001
From: Vivek 
Date: Thu, 9 Jul 2026 13:21:50 +0530
Subject: [PATCH 3/4] feat: Code view shows idiomatic helper usage, not
 expanded classes

The Preview/Code toggle's Code tab showed the fully-expanded Tailwind class
string (the helper output baked in at module load), not the call an end user
writes. It now shows the composition verbatim, e.g. class=${buttonClass()} and
class="${cardClass()} w-full max-w-sm", across every Tier 1 and Tier 2
component.

Single source of truth: each example freezes its class-helper holes as literal
${xClass(...)} text (leading ${ backslash-escaped, so the string keeps the
call instead of interpolating it). renderExample() evaluates the frozen holes
for the live preview; codeExample() shows them as calls for the Code tab, and
drops the quotes when a hole is the whole attribute value so it reads as the
idiomatic unquoted form. Structural holes (${type}/${position}) and
${ICON_SETTINGS} stay live. Verified across all 32 component pages: previews
render real classes, no eval failures, no leftover holes.
---
 .../app/docs/components/[name]/examples.ts    | 550 +++++++++++-------
 .../app/docs/components/[name]/page.ts        |  17 +-
 2 files changed, 337 insertions(+), 230 deletions(-)

diff --git a/packages/ui/packages/website/app/docs/components/[name]/examples.ts b/packages/ui/packages/website/app/docs/components/[name]/examples.ts
index c27439ff..a9381c1f 100644
--- a/packages/ui/packages/website/app/docs/components/[name]/examples.ts
+++ b/packages/ui/packages/website/app/docs/components/[name]/examples.ts
@@ -116,6 +116,108 @@ import {
   alertDialogFooterClass,
 } from '#components/ui/alert-dialog.ts';
 
+// --------------------------------------------------------------------------
+// Single source of truth for previews (#866 follow-up)
+//
+// Every example below is authored the way an end user composes the component:
+// the class-helper call sits INLINE in the markup as a frozen `${xClass(...)}`
+// hole (the leading `${` is backslash-escaped, so the string stores the call
+// verbatim instead of interpolating it at module load). Two derivations read
+// off that single source.
+//   - renderExample() evaluates each frozen hole to its class string, for the
+//     live preview (unsafeHTML needs real classes to render).
+//   - codeExample() shows each hole as the call, for the Code tab, so the
+//     snippet teaches the helper usage rather than the expanded class soup.
+// Only class-helper holes are frozen; structural holes (${type}, ${position})
+// and ${ICON_SETTINGS} stay live and are resolved at authoring time.
+// --------------------------------------------------------------------------
+
+// Registry the frozen holes are evaluated against. Listing every imported
+// helper here also keeps each import "used" after the freeze.
+const HELPERS: Record string> = {
+  accordionClass, accordionContentClass, accordionItemClass, accordionTriggerClass,
+  alertClass, alertDescriptionClass, alertTitleClass,
+  alertDialogContentClass, alertDialogDescriptionClass, alertDialogFooterClass,
+  alertDialogHeaderClass, alertDialogTitleClass,
+  avatarClass, avatarFallbackClass, avatarGroupClass, avatarImageClass,
+  badgeClass,
+  breadcrumbItemClass, breadcrumbLinkClass, breadcrumbListClass, breadcrumbPageClass, breadcrumbSeparatorClass,
+  buttonClass,
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+  checkboxClass,
+  collapsibleClass, collapsibleContentClass, collapsibleTriggerClass,
+  dialogDescriptionClass, dialogFooterClass, dialogHeaderClass, dialogTitleClass,
+  fieldClass, hintClass, inputClass, kbdClass, kbdGroupClass, labelClass,
+  nativeSelectClass, nativeSelectIconClass, nativeSelectWrapperClass,
+  paginationClass, paginationContentClass, paginationLinkClass, paginationNextClass, paginationPreviousClass,
+  popoverContentClass, popoverDescriptionClass, popoverHeaderClass, popoverTitleClass,
+  progressClass, radioClass, radioGroupClass, separatorClass, skeletonClass, stackClass,
+  switchInputClass, switchTrackClass,
+  tableBodyClass, tableCellClass, tableClass, tableContainerClass, tableHeadClass, tableHeaderClass, tableRowClass,
+  tabsListClass, textareaClass, toggleClass,
+};
+
+// Evaluate one authored call expression such as buttonClass({ variant: 'x' })
+// against HELPERS. Runs server-side only (from the page render), over strings
+// this module authored, never user input. Fails soft to an empty class.
+function evalHole(expr: string): string {
+  try {
+    return String(new Function('H', `return (H.${expr});`)(HELPERS));
+  } catch {
+    return '';
+  }
+}
+
+// Walk a frozen snippet, replacing each hole. Uses a brace-balanced scan so
+// object-literal args do not end the hole early. In render mode a hole becomes
+// its evaluated class string (quotes left as authored); in code mode a hole
+// becomes the call verbatim, and when the hole is the ENTIRE quoted attribute
+// value the quotes are dropped so it reads as the idiomatic unquoted form.
+function buildExample(src: string, mode: 'render' | 'code'): string {
+  let out = '';
+  let i = 0;
+  while (i < src.length) {
+    const open = src.indexOf('${', i);
+    if (open === -1) {
+      out += src.slice(i);
+      break;
+    }
+    let depth = 0;
+    let j = open + 2;
+    for (; j < src.length; j++) {
+      const ch = src[j];
+      if (ch === '{') depth++;
+      else if (ch === '}') {
+        if (depth === 0) break;
+        depth--;
+      }
+    }
+    const before = src.slice(i, open);
+    const expr = src.slice(open + 2, j).trim();
+    if (mode === 'render') {
+      out += before + evalHole(expr);
+      i = j + 1;
+    } else if (before.endsWith('="') && src[j + 1] === '"') {
+      out += before.slice(0, -1) + '${' + expr + '}';
+      i = j + 2;
+    } else {
+      out += before + '${' + expr + '}';
+      i = j + 1;
+    }
+  }
+  return out;
+}
+
+/** A snippet with every class-helper hole evaluated, for the live preview. */
+export function renderExample(src: string): string {
+  return buildExample(src, 'render');
+}
+
+/** A snippet with every class-helper hole shown as the call, for the Code tab. */
+export function codeExample(src: string): string {
+  return buildExample(src, 'code');
+}
+
 // --------------------------------------------------------------------------
 // Tier-1 examples (class-helper functions on native HTML)
 // --------------------------------------------------------------------------
@@ -123,129 +225,129 @@ import {
 const EXAMPLES: Record = {
   button: `
     

-      
-      
-      
-      
-      
-      
+      
+      
+      
+      
+      
+      
     

   `,
 
   badge: `
     

-      Default
-      Secondary
-      Destructive
-      Outline
-      Ghost
-      Link
+      Default
+      Secondary
+      Destructive
+      Outline
+      Ghost
+      Link
     

   `,
 
   alert: `
-