readme on landing page

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "forge",
@@ -9,6 +8,9 @@
       },
       "devDependencies": {
         "@types/bun": "latest",
+        "@types/prismjs": "^1.26.5",
+        "prismjs": "^1.30.0",
+        "snarkdown": "^2.0.0",
       },
       "peerDependencies": {
         "typescript": "^5",
@@ -20,10 +22,16 @@
 
     "@types/node": ["@types/node@25.0.3", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA=="],
 
+    "@types/prismjs": ["@types/prismjs@1.26.5", "", {}, "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ=="],
+
     "bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
 
     "hono": ["hono@4.11.3", "", {}, "sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w=="],
 
+    "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
+
+    "snarkdown": ["snarkdown@2.0.0", "", {}, "sha512-MgL/7k/AZdXCTJiNgrO7chgDqaB9FGM/1Tvlcenenb7div6obaDATzs16JhFyHHBGodHT3B7RzRc5qk8pFhg3A=="],
+
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
     "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],

examples/landing.tsx

@@ -0,0 +1,547 @@
+import { createScope, Styles } from '../src'
+import { theme } from './ssr/themes'
+import markdown from 'snarkdown'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-tsx'
+
+const { define } = createScope('Landing')
+
+const Page = define('Page', {
+  base: 'body',
+
+  margin: 0,
+  padding: theme('spacing-xl'),
+  minHeight: '100vh',
+  fontFamily: theme('fonts-mono'),
+  background: theme('colors-bg'),
+  color: theme('colors-fg'),
+})
+
+const Container = define('Container', {
+  maxWidth: 800,
+  margin: '0 auto',
+})
+
+const Pre = define('Pre', {
+  base: 'pre',
+
+  fontSize: 14,
+  lineHeight: 1.4,
+  marginBottom: theme('spacing-xl'),
+  color: theme('colors-fg'),
+  whiteSpace: 'pre',
+  borderBottom: '1px solid var(--theme-colors-border)',
+})
+
+const P = define('P', {
+  base: 'p',
+
+  fontSize: 16,
+  lineHeight: 1.6,
+  marginBottom: theme('spacing-xl'),
+  color: theme('colors-fgMuted'),
+})
+
+const LinkSection = define('LinkSection', {
+  marginBottom: theme('spacing-xl'),
+})
+
+const Link = define('Link', {
+  base: 'a',
+
+  display: 'inline-block',
+  marginRight: theme('spacing-xl'),
+  padding: `${theme('spacing-sm')} ${theme('spacing-lg')}`,
+  background: theme('colors-bgElevated'),
+  border: `1px solid ${theme('colors-border')}`,
+  color: theme('colors-fg'),
+  textDecoration: 'none',
+  fontSize: 14,
+
+  states: {
+    ':hover': {
+      background: theme('colors-bgHover'),
+      borderColor: theme('colors-borderActive'),
+    }
+  }
+})
+
+const ThemeToggle = define('ThemeToggle', {
+  position: 'fixed',
+  top: theme('spacing-lg'),
+  right: theme('spacing-lg'),
+  padding: `${theme('spacing-sm')} ${theme('spacing-lg')}`,
+  background: theme('colors-bgElevated'),
+  border: `1px solid ${theme('colors-border')}`,
+  color: theme('colors-fg'),
+  fontSize: 14,
+  cursor: 'pointer',
+  fontFamily: theme('fonts-mono'),
+
+  states: {
+    ':hover': {
+      background: theme('colors-bgHover'),
+      borderColor: theme('colors-borderActive'),
+    }
+  }
+})
+
+// Helper to highlight code blocks in markdown HTML
+function highlightCodeBlocks(html: string): string {
+  return html.replace(/<pre class="code[^"]*"><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g, (_, lang, code) => {
+    // Decode HTML entities
+    const decoded = code
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&amp;/g, '&')
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'")
+
+    // Map language to Prism grammar (tsx/typescript)
+    const grammar = lang === 'tsx' ? Prism.languages.tsx : Prism.languages.typescript
+
+    const highlighted = Prism.highlight(decoded, grammar!, lang)
+    return `<pre class="code ${lang}"><code class="language-${lang}">${highlighted}</code></pre>`
+  })
+}
+
+export const LandingPage = () => {
+  const themeScript = `
+    function switchTheme(themeName) {
+      document.body.setAttribute('data-theme', themeName)
+      localStorage.setItem('theme', themeName)
+      updateThemeToggle()
+    }
+
+    function updateThemeToggle() {
+      const currentTheme = document.body.getAttribute('data-theme')
+      const toggle = document.getElementById('theme-toggle')
+      if (toggle) {
+        toggle.textContent = currentTheme === 'dark' ? '☀ light' : '🌙 dark'
+      }
+    }
+
+    function toggleTheme() {
+      const currentTheme = document.body.getAttribute('data-theme')
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
+      switchTheme(newTheme)
+    }
+
+    window.switchTheme = switchTheme
+    window.toggleTheme = toggleTheme
+
+    // Load saved theme or default to dark
+    const savedTheme = localStorage.getItem('theme') || 'dark'
+    document.body.setAttribute('data-theme', savedTheme)
+    updateThemeToggle()
+  `
+
+  const prismTheme = `
+    code[class*="language-"],
+    pre[class*="language-"] {
+      color: var(--theme-colors-fg);
+      background: none;
+      font-family: var(--theme-fonts-mono);
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.5;
+      tab-size: 4;
+      hyphens: none;
+    }
+
+    pre[class*="language-"] {
+      padding: 1em;
+      margin: 0.5em 0;
+      overflow: auto;
+      background: var(--theme-colors-bgElevated);
+      border: 1px solid var(--theme-colors-border);
+      border-radius: 4px;
+    }
+
+    /* Dark theme colors */
+    [data-theme="dark"] .token.comment,
+    [data-theme="dark"] .token.prolog,
+    [data-theme="dark"] .token.doctype,
+    [data-theme="dark"] .token.cdata {
+      color: #999999;
+    }
+
+    [data-theme="dark"] .token.punctuation {
+      color: #808080;
+    }
+
+    [data-theme="dark"] .token.tag {
+      color: #ff6b6b;
+    }
+
+    [data-theme="dark"] .token.property,
+    [data-theme="dark"] .token.boolean,
+    [data-theme="dark"] .token.number,
+    [data-theme="dark"] .token.constant,
+    [data-theme="dark"] .token.symbol,
+    [data-theme="dark"] .token.deleted {
+      color: #ffd93d;
+    }
+
+    [data-theme="dark"] .token.selector,
+    [data-theme="dark"] .token.attr-name,
+    [data-theme="dark"] .token.string,
+    [data-theme="dark"] .token.char,
+    [data-theme="dark"] .token.builtin,
+    [data-theme="dark"] .token.inserted {
+      color: #ff6b6b;
+    }
+
+    [data-theme="dark"] .token.operator,
+    [data-theme="dark"] .token.entity,
+    [data-theme="dark"] .token.url,
+    [data-theme="dark"] .language-css .token.string,
+    [data-theme="dark"] .style .token.string {
+      color: #d4d4d4;
+    }
+
+    [data-theme="dark"] .token.atrule,
+    [data-theme="dark"] .token.attr-value,
+    [data-theme="dark"] .token.keyword {
+      color: #bb86fc;
+    }
+
+    [data-theme="dark"] .token.function,
+    [data-theme="dark"] .token.class-name {
+      color: #4dd0e1;
+    }
+
+    [data-theme="dark"] .token.regex,
+    [data-theme="dark"] .token.important,
+    [data-theme="dark"] .token.variable {
+      color: #bb86fc;
+    }
+
+    /* Light theme colors */
+    [data-theme="light"] .token.comment,
+    [data-theme="light"] .token.prolog,
+    [data-theme="light"] .token.doctype,
+    [data-theme="light"] .token.cdata {
+      color: #888888;
+    }
+
+    [data-theme="light"] .token.punctuation {
+      color: #666666;
+    }
+
+    [data-theme="light"] .token.tag {
+      color: #dc143c;
+    }
+
+    [data-theme="light"] .token.property,
+    [data-theme="light"] .token.boolean,
+    [data-theme="light"] .token.number,
+    [data-theme="light"] .token.constant,
+    [data-theme="light"] .token.symbol,
+    [data-theme="light"] .token.deleted {
+      color: #c9a700;
+    }
+
+    [data-theme="light"] .token.selector,
+    [data-theme="light"] .token.attr-name,
+    [data-theme="light"] .token.string,
+    [data-theme="light"] .token.char,
+    [data-theme="light"] .token.builtin,
+    [data-theme="light"] .token.inserted {
+      color: #dc143c;
+    }
+
+    [data-theme="light"] .token.operator,
+    [data-theme="light"] .token.entity,
+    [data-theme="light"] .token.url,
+    [data-theme="light"] .language-css .token.string,
+    [data-theme="light"] .style .token.string {
+      color: #000000;
+    }
+
+    [data-theme="light"] .token.atrule,
+    [data-theme="light"] .token.attr-value,
+    [data-theme="light"] .token.keyword {
+      color: #9333ea;
+    }
+
+    [data-theme="light"] .token.function,
+    [data-theme="light"] .token.class-name {
+      color: #0891b2;
+    }
+
+    [data-theme="light"] .token.regex,
+    [data-theme="light"] .token.important,
+    [data-theme="light"] .token.variable {
+      color: #9333ea;
+    }
+  `
+
+  return (
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>forge</title>
+        <Styles />
+        <style dangerouslySetInnerHTML={{ __html: prismTheme }} />
+      </head>
+      <Page data-theme="dark">
+        <ThemeToggle id="theme-toggle" onclick="toggleTheme()">🌙 dark</ThemeToggle>
+        <Container>
+          <Pre>{`╔═╝╔═║╔═║╔═╝╔═╝
+╔═╝║ ║╔╔╝║ ║╔═╝
+╝  ══╝╝ ╝══╝══╝`}</Pre>
+
+          <LinkSection>
+            <Link href="/ssr">SSR demos →</Link>
+            <Link href="/spa">SPA demos →</Link>
+          </LinkSection>
+
+          <div dangerouslySetInnerHTML={{ __html: highlightCodeBlocks(markdown(MARKDOWN_CONTENT)) }}></div>
+        </Container>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }}></script>
+      </Page>
+    </html>
+  )
+}
+
+
+const MARKDOWN_CONTENT = `
+## overview
+
+Forge is a typed, local, variant-driven way to organize CSS and create
+self-contained TSX components out of discrete parts.
+
+## css problems
+
+- Styles are global and open - anything can override anything anywhere.
+- No IDE-friendly link between the class name in markup and its definition.
+- Organizational techniques are patterns a human must know and follow, not APIs.
+- Errors happen silently.
+
+## forge solutions
+
+- All styles are local to your TSX components.
+- Styles are defined using TS typing.
+- Component styles are made up of independently styled "Parts".
+- "Variants" replace inline styles with typed, declarative parameters.
+- Style composition is deterministic.
+- Themes are easy.
+- Errors and feedback are provided.
+
+## examples
+
+### styles
+
+\`\`\`tsx
+import { define } from "forge"
+
+export const Container = define("Container", {
+  width: 600,
+  margin: '0 auto',
+})
+
+export const Button = define({
+  base: "button",
+
+  padding: 20,
+  background: "blue",
+})
+
+// Usage
+<Container>
+  <Button>Click me</Button>
+</Container>
+\`\`\`
+
+### variants
+
+\`\`\`tsx
+import { define } from "forge"
+
+export const Button = define({
+  base: "button",
+
+  padding: 20,
+  background: "blue",
+
+  variants: {
+    status: {
+      danger: { background: "red" },
+      warning: { background: "yellow" },
+    }
+  },
+})
+
+// Usage
+<Button>Click me</Button>
+<Button status="danger">Click me carefully</Button>
+<Button status="warning">Click me?</Button>
+\`\`\`
+
+### parts + \`render()\`
+
+\`\`\`typescript
+export const Profile = define("div", {
+  padding: 50,
+  background: "red",
+
+  parts: {
+    Header: { display: "flex" },
+    Avatar: { base: "img", width: 50 },
+    Bio: { color: "gray" },
+  },
+
+  variants: {
+    size: {
+      small: {
+        parts: { Avatar: { width: 20 } },
+      },
+    },
+  },
+
+  render({ props, parts: { Root, Header, Avatar, Bio } }) {
+    return (
+      <Root>
+        <Header>
+          <Avatar src={props.pic} />
+          <Bio>{props.bio}</Bio>
+        </Header>
+      </Root>
+    )
+  },
+})
+
+// Usage:
+import { Profile } from "./whatever"
+
+console.log(<Profile pic={user.pic} bio={user.bio} />)
+console.log(<Profile size="small" pic={user.pic} bio={user.bio} />)
+\`\`\`
+
+### selectors
+
+Use \`selectors\` to write custom CSS selectors. Reference the current
+element with \`&\` and other parts with \`@PartName\`:
+
+\`\`\`tsx
+const Checkbox = define("Checkbox", {
+  parts: {
+    Input: {
+      base: "input[type=checkbox]",
+      display: "none",
+    },
+    Label: {
+      base: "label",
+      padding: 10,
+      cursor: "pointer",
+      color: "gray",
+
+      selectors: {
+        // style Label when Input is checked
+        "@Input:checked + &": {
+          color: "green",
+          fontWeight: "bold",
+        },
+        // style Label when Input is disabled
+        "@Input:disabled + &": {
+          opacity: 0.5,
+          cursor: "not-allowed",
+        },
+      },
+    },
+  },
+
+  render({ props, parts: { Root, Input, Label } }) {
+    return (
+      <Root>
+        <Label>
+          <Input checked={props.checked} />
+          {props.label}
+        </Label>
+      </Root>
+    )
+  },
+})
+
+// Usage
+<Checkbox label="Agree to terms" checked />
+\`\`\`
+
+## themes
+
+built-in support for CSS variables with full type safety:
+
+\`\`\`tsx
+// themes.tsx - Define your themes
+import { createThemes } from "forge"
+
+export const theme = createThemes({
+  dark: {
+    bgColor: "#0a0a0a",
+    fgColor: "#00ff00",
+    sm: 12,
+    lg: 24,
+  },
+  light: {
+    bgColor: "#f5f5f0",
+    fgColor: "#0a0a0a",
+    sm: 12,
+    lg: 24,
+  },
+})
+
+// Use theme() in your components
+import { define } from "forge"
+import { theme } from "./themes"
+
+const Button = define("Button", {
+  padding: theme("spacing-sm"),
+  background: theme("colors-bg"),
+  color: theme("colors-fg"),
+})
+\`\`\`
+
+Theme switching is done via the \`data-theme\` attribute:
+
+\`\`\`tsx
+// Toggle between themes
+document.body.setAttribute("data-theme", "dark")
+document.body.setAttribute("data-theme", "light")
+\`\`\`
+
+The \`theme()\` function is fully typed based on your theme keys, giving
+you autocomplete and type checking throughout your codebase.
+
+## scopes
+
+Sometimes you want your parts named things like ButtonRow, ButtonCell,
+ButtonTable, etc, but all those Button's are repetitive:
+
+\`\`\`typescript
+const { define } = createScope("Button")
+
+// css class becomes "Button"
+const Button = define("Root", {
+  // becomes "Button"
+  // ...
+})
+
+// css class becomes "ButtonRow"
+const ButtonRow = define("Row", {
+  // ...
+})
+
+// css class becomes "ButtonContainer"
+const ButtonContainer = define("Container", {
+  // ...
+})
+\`\`\`
+`

examples/spa/app.tsx

@@ -108,7 +108,7 @@ const Link = define('Link', {
   }
 })
 
-const Nav = define('Nav', {
+const Nav = define({
   base: 'nav',
 
   display: 'flex',

examples/ssr/landing.tsx

@@ -1,116 +0,0 @@
-import { createScope, Styles } from '../../src'
-import { theme } from './themes'
-
-const { define } = createScope('Landing')
-
-const Page = define('Page', {
-  base: 'body',
-
-  margin: 0,
-  padding: theme('spacing-xl'),
-  minHeight: '100vh',
-  fontFamily: theme('fonts-mono'),
-  background: theme('colors-bg'),
-  color: theme('colors-fg'),
-})
-
-const Container = define('Container', {
-  maxWidth: 800,
-  margin: '0 auto',
-})
-
-const Pre = define('Pre', {
-  base: 'pre',
-
-  fontSize: 14,
-  lineHeight: 1.4,
-  marginBottom: theme('spacing-xl'),
-  color: theme('colors-fg'),
-  whiteSpace: 'pre',
-  borderBottom: '1px solid var(--theme-colors-border)',
-})
-
-const P = define('P', {
-  base: 'p',
-
-  fontSize: 16,
-  lineHeight: 1.6,
-  marginBottom: theme('spacing-xl'),
-  color: theme('colors-fgMuted'),
-})
-
-const LinkSection = define('LinkSection', {
-  marginTop: theme('spacing-xxl'),
-  paddingTop: theme('spacing-xl'),
-  borderTop: `1px solid ${theme('colors-border')}`,
-})
-
-const Link = define('Link', {
-  base: 'a',
-
-  display: 'inline-block',
-  marginRight: theme('spacing-xl'),
-  padding: `${theme('spacing-sm')} ${theme('spacing-lg')}`,
-  background: theme('colors-bgElevated'),
-  border: `1px solid ${theme('colors-border')}`,
-  color: theme('colors-fg'),
-  textDecoration: 'none',
-  fontSize: 14,
-
-  states: {
-    ':hover': {
-      background: theme('colors-bgHover'),
-      borderColor: theme('colors-borderActive'),
-    }
-  }
-})
-
-export const LandingPage = () => {
-  const themeScript = `
-    function switchTheme(themeName) {
-      document.body.setAttribute('data-theme', themeName)
-      localStorage.setItem('theme', themeName)
-    }
-
-    window.switchTheme = switchTheme
-
-    // Load saved theme or default to dark
-    const savedTheme = localStorage.getItem('theme') || 'dark'
-    document.body.setAttribute('data-theme', savedTheme)
-  `
-
-  return (
-    <html>
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>forge</title>
-        <Styles />
-      </head>
-      <Page data-theme="dark">
-        <Container>
-          <Pre>{`╔═╝╔═║╔═║╔═╝╔═╝
-╔═╝║ ║╔╔╝║ ║╔═╝
-╝  ══╝╝ ╝══╝══╝`}</Pre>
-
-          <P>
-            Typed, local, variant-driven CSS. No globals, no selector hell, no inline styles.
-            Built for TSX. Compiles to real CSS.
-          </P>
-
-          <P>
-            CSS is hostile to humans at scale. Forge fixes that by making styles local,
-            typed, and composable. Parts replace selectors. Variants replace inline styles.
-            Everything deterministic.
-          </P>
-
-          <LinkSection>
-            <Link href="/ssr">SSR demos →</Link>
-            <Link href="/spa">SPA demos →</Link>
-          </LinkSection>
-        </Container>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }}></script>
-      </Page>
-    </html>
-  )
-}

package.json

@@ -8,7 +8,10 @@
     "build:spa": "bun build examples/spa/index.tsx --outfile dist/spa.js --target browser"
   },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "@types/prismjs": "^1.26.5",
+    "prismjs": "^1.30.0",
+    "snarkdown": "^2.0.0"
   },
   "peerDependencies": {
     "typescript": "^5"

server.tsx

@@ -1,6 +1,6 @@
 import { Hono } from 'hono'
 import { IndexPage, ProfileExamplesPage, ButtonExamplesPage, NavigationExamplesPage, FormExamplesPage } from './examples/ssr/pages'
-import { LandingPage } from './examples/ssr/landing'
+import { LandingPage } from './examples/landing'
 import { stylesToCSS } from './src'
 
 const app = new Hono()

src/tests/index.test.tsx

@@ -38,8 +38,8 @@ describe('define - basic functionality', () => {
     const html2 = renderToString(Component2({}))
 
     // Should have different auto-generated names
-    expect(html1).toMatch(/class="Def\d+"/)
+    expect(html1).toMatch(/class="Div\d*"/)
-    expect(html2).toMatch(/class="Def\d+"/)
+    expect(html2).toMatch(/class="Div\d*"/)
     expect(html1).not.toBe(html2)
   })
 
@@ -891,7 +891,7 @@ describe('edge cases', () => {
     const html = renderToString(Component({}))
 
     expect(html).toBeDefined()
-    expect(html).toMatch(/class="Def\d+"/)
+    expect(html).toMatch(/class="Div\d*"/)
   })
 
   test('handles definition with only parts', () => {