wozie 3.2.0 → 4.0.0

package/DOCS.md

@@ -1,15 +1,15 @@
-# Woozie — The Easiest Web Framework Ever 🚀
+# Woozie — The Easiest Web Framework Ever
 
-**Built by Woozlit 2026 — v2.0**
+**Built by Woozlit 2026 — v4.0 with CommonUI**
 
 Write simple tags. Get beautiful, responsive websites. No HTML, no CSS, no JavaScript required.
 
 ## What is Woozie?
 
-Woozie is a declarative UI language that compiles to modern HTML/CSS/JS. It has **40+ built-in components**, a **plugin system**, **dark mode**, **style files**, and **multi-file output** — all with zero configuration.
+Woozie is a declarative UI language that compiles to modern HTML/CSS/JS. It has **100+ built-in components** via the **CommonUI** library, a **plugin system**, **CometUI community packages**, **dark mode**, **style files**, **custom JavaScript support**, and **multi-page routing** — all with zero configuration.
 
 ```woozie
-app "My App":
+app:
     hero "Hello World":
         text "Built with Woozie"
         button "Get Started"
@@ -20,44 +20,48 @@ That's a full website. Seriously.
 ## Quick Start
 
 ```bash
-git clone <repo-url>
-cd woozie
-npm install
-npm link
-
-woozie init MyProject
-cd MyProject
+npm install -g wozie
+woozie init myapp
+cd myapp
 woozie run
 ```
 
-Open http://localhost:3000 and see your app with live reload.
+Open http://localhost:3000 and you're running.
 
 ## Features
 
 | Feature | Description |
 |---------|-------------|
-| **40+ Components** | Buttons, cards, forms, modals, tabs, accordions, alerts, stats, and more |
+| **100+ Components** | Buttons, cards, forms, modals, drawers, carousels, pricing, testimonials and more |
+| **CommonUI Library** | Professional component library built-in — like shadcn/ui but for Woozie |
 | **Style Files** | Customize any component via `style.woozie` |
 | **Dark Mode** | Set `theme: dark` in `woozie.rules` |
 | **Plugins** | Drop a `.woozie` file in `plugins/` — it becomes a tag |
 | **Live Reload** | Dev server watches files and reloads instantly |
 | **Multi-File Output** | Generates separate HTML, CSS, JS files |
+| **Clean URLs** | No `.html` in the browser — ever |
+| **Custom JavaScript** | Drop a `script.js` in your project, it's auto-included |
+| **CometUI** | Community plugin ecosystem — install with `woozie add` |
 | **Responsive** | Every component is mobile-friendly |
-| **Animations** | Scroll animations, hover effects, transitions |
-| **Attributes** | `button "Click" [variant=outline, color=success]` |
-| **Comments** | `// This is a comment` |
+| **Animations** | Scroll animations, hover effects, page transitions |
+| **JS API** | `wz.toast()`, `wz.openDrawer()`, `wz.openDialog()` and more |
+| **SEO Ready** | Meta tags, OG tags, semantic HTML |
 | **Zero Config** | No webpack, no babel, no config files |
 
 ## Project Structure
 
 ```
 my-project/
-    main.woozie         <- entry point (your app)
-    woozie.rules        <- config (NO COMMENTS allowed)
-    style.woozie        <- custom style overrides (optional)
-    plugins/            <- custom components (optional)
+    main.woozie         -- homepage (required)
+    woozie.rules        -- project config
+    style.woozie        -- custom style overrides (optional)
+    script.js           -- custom JavaScript (optional, auto-included)
+    pages/              -- additional pages
+        about.woozie
+        contact.woozie
+    plugins/            -- reusable components
         navbar.woozie
-        sidebar.woozie
+    comet_modules/      -- installed community packages
 ```
 
 ## Syntax
@@ -71,56 +75,272 @@ tagname "argument" [attr1=value1, attr2=value2]:
 
 A colon `:` at the end means the tag has children (indent them below).
 
-## Components
+---
+
+## Complete Component Reference
 
 ### Layout
-`column` `row` `grid [cols=N]` `center` `container` `section` `spacer` `divider` `wrap`
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `column` / `col` | Vertical stack | `column:` |
+| `row` | Horizontal layout | `row:` |
+| `grid` | Responsive grid | `grid [cols=3]:` |
+| `center` | Centered content | `center:` |
+| `container` | Max-width wrapper | `container:` |
+| `section` | Page section | `section:` |
+| `spacer` | Vertical spacing | `spacer "2"` |
+| `divider` | Horizontal line | `divider` |
+| `wrap` | Flex wrap | `wrap:` |
+| `stack` / `vstack` | Vertical stack with gap | `stack [gap=2rem]:` |
+| `hstack` | Horizontal stack | `hstack [gap=1rem]:` |
+| `flex` | Flexible layout | `flex [direction=row, align=center]:` |
+| `sidebar_layout` | Sidebar + main layout | `sidebar_layout:` |
+| `sidebar` | Sidebar container | `sidebar:` |
+| `sidebar_item` | Sidebar nav item | `sidebar_item "Dashboard" [href=#]` |
+| `sidebar_section` | Sidebar group label | `sidebar_section "MENU"` |
+| `main` | Main content area | `main:` |
+| `twocol` | Two-column grid | `twocol:` |
+| `threecol` | Three-column grid | `threecol:` |
+| `fullwidth` | Full viewport width | `fullwidth:` |
+| `sticky` | Sticky positioning | `sticky:` |
+| `scrollarea` | Custom scrollbar area | `scrollarea [height=300px]:` |
+| `aspect` | Aspect ratio box | `aspect [ratio=16/9]:` |
 
 ### Typography
-`heading` `subheading` `text` `small` `bold` `italic` `label` `link [href=URL]` `code` `quote`
 
-### Interactive
-`button [variant=solid|outline|ghost, color=primary|success|warning|danger, size=sm|md|lg]`
-`input [type=text|email|password]` `textarea [rows=N]` `select`/`option` `toggle` `checkbox` `radio [name=group]` `slider [min=0, max=100]` `dropdown`
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `h1` / `title` | Top-level heading | `h1 "Welcome"` |
+| `heading` / `h2` | Section heading | `heading "Features"` |
+| `subheading` / `h3` | Subsection heading | `subheading "Details"` |
+| `h4` | Level 4 heading | `h4 "Subtitle"` |
+| `h5` | Level 5 heading | `h5 "Minor heading"` |
+| `h6` | Label heading (uppercase) | `h6 "CATEGORY"` |
+| `text` / `p` | Paragraph | `text "Hello world"` |
+| `lead` | Large intro text | `lead "A bigger paragraph"` |
+| `small` | Small text | `small "Fine print"` |
+| `muted` | Muted/gray text | `muted "Secondary info"` |
+| `bold` / `strong` | Bold text | `bold "Important"` |
+| `italic` / `em` | Italic text | `italic "Emphasis"` |
+| `underline` / `u` | Underlined text | `underline "Noted"` |
+| `del` / `strikethrough` | Deleted text | `del "Old price"` |
+| `mark` / `highlight` | Highlighted text | `mark "Key point"` |
+| `label` | Form label | `label "Email"` |
+| `link` | Hyperlink | `link "Click" [href=url]` |
+| `code` | Code (inline or block) | `code "npm install"` |
+| `quote` | Blockquote | `quote "Famous words"` |
+| `kbd` | Keyboard shortcut | `kbd "Ctrl"` |
+| `caption` | Figure caption | `caption "Figure 1"` |
+| `gradient` | Gradient text | `gradient "Colorful text"` |
+| `prose` | Long-form content wrapper | `prose:` |
+
+### Interactive / Forms
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `button` / `btn` | Button | `button "Click" [variant=solid, color=primary]` |
+| `input` | Text input | `input "Placeholder" [type=email]` |
+| `textarea` | Multi-line input | `textarea "Write here" [rows=5]` |
+| `select` | Dropdown select | `select:` + `option "Item"` |
+| `option` | Select option | `option "Value" [value=x]` |
+| `toggle` | Toggle switch | `toggle "Dark mode"` |
+| `checkbox` | Checkbox | `checkbox "Accept terms"` |
+| `radio` | Radio button | `radio "Option A" [name=group]` |
+| `slider` | Range slider | `slider [min=0, max=100]` |
+| `dropdown` | Dropdown menu | `dropdown:` |
+| `form` | Form wrapper | `form [action=/api]:` |
+| `formgroup` / `field` | Label + input group | `formgroup "Email" [hint=Required]:` |
+| `search` | Search input with icon | `search "Search..."` |
+| `fileupload` | File upload area | `fileupload "Drop files" [accept=image/*]` |
+| `rating` | Star rating | `rating "4" [max=5]` |
+| `numberinput` | Number stepper | `numberinput [min=0, max=99]` |
+| `dateinput` | Date picker | `dateinput` |
+| `colorpicker` | Color picker | `colorpicker` |
+
+**Button attributes:**
+- `variant` = `solid` | `outline` | `ghost`
+- `color` = `primary` | `success` | `warning` | `danger`
+- `size` = `sm` | `md` | `lg`
+- `icon` = emoji/text to show before label
+- `modal` = opens modal with this ID
+- `dialog` = opens dialog with this ID
+- `drawer` = opens drawer with this ID
+- `sheet` = opens sheet with this ID
+- `page` = navigates to this page
+- `disabled` = disables the button
 
 ### Media
-`image "url"` `video "url"` `audio "url"` `icon "emoji"` `avatar "url"`
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `image` / `img` | Image | `image "photo.jpg" [alt=Photo]` |
+| `video` | Video player | `video "clip.mp4" [autoplay, muted, loop]` |
+| `audio` | Audio player | `audio "song.mp3"` |
+| `icon` | Emoji icon | `icon "⚡" [size=3rem]` |
+| `avatar` | User avatar | `avatar "face.jpg" [size=64]` |
+| `avatar_group` | Stacked avatars | `avatar_group:` |
+| `carousel` | Image carousel | `carousel:` with children |
+| `gallery` | Image gallery grid | `gallery [cols=4]:` |
+| `embed` | YouTube/Vimeo embed | `embed "https://youtube.com/watch?v=..."` |
 
 ### Feedback
-`alert "msg" [type=info|success|warning|error]` `badge "text" [color=X]` `progress "75"` `spinner` `tooltip [text=X]`
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `alert` | Alert message | `alert "Success!" [type=success, closable=true]` |
+| `badge` | Small label | `badge "New" [color=green]` |
+| `progress` | Progress bar | `progress "75"` |
+| `spinner` | Loading spinner | `spinner [size=lg]` |
+| `tooltip` | Hover tooltip | `tooltip [text=Info]:` |
+| `toast` | Toast notification | `toast "Saved!" [type=success]` |
+| `skeleton` | Loading skeleton | `skeleton [type=text, count=3]` |
+| `empty` | Empty state | `empty "No data" [icon=📭, title=Nothing here]` |
+| `banner` | Top banner | `banner "Announcement!" [type=primary]` |
+| `callout` | Info callout box | `callout "Tip text" [type=tip, title=Pro Tip]` |
+| `notification` | Notification card | `notification [title=New, icon=🔔, time=2m ago]` |
+| `meter` | Meter/gauge | `meter "65" [max=100, label=CPU]` |
 
 ### Navigation
-`nav` `navlink "text" [href=URL]` `tabs`/`tab "Label"` `breadcrumb` `menu`
 
-### Data
-`table` `list [type=ordered]` `listitem "text"` `stat "value" [label=Label]`
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `nav` | Navigation bar | `nav:` |
+| `navlink` | Nav link | `navlink "Home" [page=index]` |
+| `tabs` / `tab` | Tab panels | `tabs:` + `tab "Label":` |
+| `breadcrumb` | Breadcrumb trail | `breadcrumb:` |
+| `menu` | Menu container | `menu:` |
+| `drawer` | Side drawer | `drawer "Title" [id=x, position=right]` |
+| `sheet` | Bottom/side sheet | `sheet "Title" [id=x, position=bottom]` |
+| `bottomnav` | Bottom navigation | `bottomnav:` |
+| `bottomnav_item` | Bottom nav item | `bottomnav_item "Home" [icon=🏠, page=index]` |
+| `commandmenu` | Cmd+K palette | `commandmenu "Search..." [id=cmd]` |
+| `pagination` | Page pagination | `pagination [pages=10, current=3]` |
+| `steps` / `step` | Step indicator | `steps:` + `step "Name" [status=active]` |
+
+### Data Display
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `table` | Data table | `table:` + `thead:` + `tbody:` |
+| `list` | List | `list [type=ordered]:` |
+| `listitem` / `li` | List item | `listitem "Item text"` |
+| `stat` | Stat number | `stat "10K+" [label=Users, trend=+12%]` |
+| `tag` | Tag label | `tag "React" [color=blue, closable=true]` |
+| `chip` | Chip label | `chip "Design"` |
+| `timeline` | Timeline | `timeline:` |
+| `timeline_item` | Timeline entry | `timeline_item "Event":` |
+| `count` | Large number | `count "42"` |
 
 ### Containers
-`card` `modal [id=X]` `accordion`/`accordion_item "Title"` `hero "Title"` `header` `footer`
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `card` | Content card | `card [title=My Card]:` |
+| `modal` | Modal dialog | `modal [id=my-modal]:` |
+| `dialog` | Enhanced dialog | `dialog "Title" [id=my-dialog]:` |
+| `popover` | Popover | `popover:` |
+| `accordion` | Accordion group | `accordion:` |
+| `accordion_item` | Accordion panel | `accordion_item "Title":` |
+| `collapsible` | Collapsible section | `collapsible "Click to expand":` |
+| `panel` | Panel with header | `panel "Title" [action=View All]:` |
+| `glass` | Glass morphism card | `glass:` |
+| `hero` | Hero section | `hero "Title" [subtitle=Text]:` |
+| `header` | Page header | `header:` |
+| `footer` | Page footer | `footer:` |
+
+### Page Sections (Pre-built Blocks)
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `pricing` | Pricing card | `pricing "Pro" [price=$29, period=month, featured=true]:` |
+| `pricing_feature` | Pricing feature | `pricing_feature "Unlimited users"` |
+| `testimonial` | Testimonial card | `testimonial "Quote" [author=Name, role=CEO]` |
+| `feature` | Feature block | `feature "Fast" [icon=⚡]:` |
+| `cta` | Call-to-action | `cta "Ready?" [subtitle=Get started now]:` |
+| `logocloud` | Logo cloud | `logocloud:` |
+| `faq` | FAQ section | `faq:` with accordion children |
+| `separator` | Visual separator | `separator "or"` |
+
+### Animation & Utility
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `animate` | Animation wrapper | `animate [type=slide, delay=2]:` |
+| `gradient` | Gradient text | `gradient "Colorful"` |
+
+Animation types: `fade`, `slide`, `slideup`, `slidedown`, `slideleft`, `slideright`, `zoom`, `bounce`
+
+### Special / Meta
+
+| Tag | Description | Example |
+|-----|-------------|---------|
+| `tailwindcss` | Include Tailwind CSS | `tailwindcss` |
+| `css` | Custom CSS | `css "styles.css"` |
+| `script` / `js` | JavaScript | `script "app.js"` |
+| `raw` / `html` | Raw HTML | `raw "<br>"` |
+| `meta` | Meta tag | `meta "Description" [name=description]` |
+| `ogmeta` | OpenGraph meta | `ogmeta "Title" [property=title]` |
+
+---
+
+## JavaScript API
+
+Woozie exposes a global `wz` object for programmatic control:
+
+```javascript
+// Show toast notifications
+wz.toast("Saved successfully!", "success");
+wz.toast("Something went wrong", "error", 3000);
+
+// Control drawers
+wz.openDrawer("my-drawer");
+wz.closeDrawer("my-drawer");
+
+// Control sheets
+wz.openSheet("my-sheet");
+wz.closeSheet("my-sheet");
+
+// Control dialogs
+wz.openDialog("my-dialog");
+wz.closeDialog("my-dialog");
+
+// Control modals
+wz.openModal("my-modal");
+wz.closeModal("my-modal");
+```
+
+---
 
 ## Rules File (woozie.rules)
 
 Configuration file. **NO COMMENTS ALLOWED.**
 
 ```
-version: 2.0
-theme: light
+version: 4.0
+theme: dark
 title: My App
 font: Inter
 color: #6366f1
 lang: en
 favicon: icon.png
+description: My awesome website
+
+plugins:
+    navbar = plugins/navbar.woozie
+    footer = plugins/footer.woozie
 ```
 
 | Key | Values | Default |
 |-----|--------|---------|
-| `version` | Any | `2.0` |
+| `version` | Any | `4.0` |
 | `theme` | `light`, `dark` | `light` |
 | `title` | Any string | `Woozie App` |
 | `font` | Google Font name | `Inter` |
 | `color` | Hex color | `#6366f1` |
 | `lang` | Language code | `en` |
 | `favicon` | Path or URL | (none) |
+| `description` | Meta description | (none) |
 
 ## Style File (style.woozie)
 
@@ -138,7 +358,6 @@ card:
 
 hero:
     padding: 8rem 2rem
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
 ```
 
 Selector names match Woozie element names. Properties are standard CSS.
@@ -169,23 +388,22 @@ woozie init <name>    Create a new project
 woozie run            Start dev server with live reload
 woozie dev            Alias for run
 woozie build          Compile to static dist/ folder
+woozie add <name>     Install a CometUI package from npm
+woozie publish        Publish a CometUI package to npm
+woozie comet init     Scaffold a new CometUI package
+woozie comet list     List installed packages
+woozie comet remove   Remove a package
+woozie syntax         Install VS Code syntax highlighting
   --port <n>          Custom port (default: 3000)
-  --output <path>     Custom output path
   --help              Show help
 ```
 
-## Documentation
-
-- [Element Reference](docs/elements.md) — Every component with examples
-- [Installation Guide](docs/install.md) — How to install and set up
-- [Hosting Guide](docs/hosting.md) — How to deploy your Woozie app
-
 ## VS Code Extension
 
-Install syntax highlighting from `editor/woozie-syntax/`:
+Syntax highlighting installs automatically when you `npm install -g wozie`. You can also run:
+
 ```bash
-cd editor/woozie-syntax
-# Install in VS Code via Extensions > Install from VSIX
+woozie syntax
 ```
 
-Features: syntax highlighting, auto-indent, comment toggling, bracket matching.
+Features: syntax highlighting, file icons, auto-indent, comment toggling, bracket matching.

package/bin/woozie.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import arg from 'arg';
 import fs from 'fs';
@@ -22,7 +22,8 @@ const command = args._[0];
 
 if (!command || args['--help']) {
     console.log(`
-Woozie CLI v3.0 — The easiest web framework 🚀
+Woozie CLI v4.0 — The easiest web framework 🚀
+Now with CommonUI — 100+ professional components
 Usage: woozie <command> [options]
 
 Commands:
@@ -66,29 +67,69 @@ async function main() {
         navlink "Contact" [page=contact]
 
     hero "Welcome to ${name}":
-        text "Built with Woozie — the easiest web framework"
+        text "Built with Woozie and CommonUI — the easiest web framework with 100+ components"
         row:
             button "Get Started" [variant=solid]
-            button "About Us" [variant=outline, page=about]
+            button "Learn More" [variant=outline, page=about]
 
     section:
-        heading "Features"
+        heading "Why ${name}?"
+        text "Everything you need to build beautiful websites, fast."
+        spacer "1"
         grid [cols=3]:
+            feature "Lightning Fast" [icon=⚡]:
+                text "Compiles in milliseconds. No webpack, no config, just results."
+            feature "Beautiful Design" [icon=🎨]:
+                text "100+ stunning components built-in with CommonUI library."
+            feature "Easy to Learn" [icon=📖]:
+                text "Simple indentation-based syntax anyone can master in minutes."
+            feature "Dark Mode" [icon=🌙]:
+                text "Beautiful dark and light themes with a single config change."
+            feature "Responsive" [icon=📱]:
+                text "Every component adapts perfectly to mobile, tablet, and desktop."
+            feature "Extensible" [icon=🔌]:
+                text "CometUI plugin system for community packages and custom components."
+
+    section:
+        heading "Built-in Components"
+        text "Here's a taste of what you get out of the box."
+        spacer "1"
+        grid [cols=2]:
             card:
-                icon "⚡"
-                subheading "Fast"
-                text "Compiles in milliseconds"
-            card:
-                icon "🎨"
-                subheading "Beautiful"
-                text "Stunning UI out of the box"
+                subheading "Buttons"
+                row:
+                    button "Primary" [variant=solid]
+                    button "Outline" [variant=outline]
+                    button "Ghost" [variant=ghost]
+                row:
+                    button "Success" [variant=solid, color=success]
+                    button "Danger" [variant=solid, color=danger]
+                    button "Warning" [variant=solid, color=warning]
             card:
-                icon "🔌"
-                subheading "Extensible"
-                text "CometUI plugin system for community libraries"
+                subheading "Feedback"
+                alert "This is an info alert" [type=info]
+                alert "Operation successful!" [type=success]
+                progress "72"
+                spacer "1"
+                row:
+                    badge "New" [color=primary]
+                    badge "Active" [color=green]
+                    badge "Pending" [color=yellow]
+
+    section:
+        row:
+            stat "10K+" [label=Users]
+            stat "99.9%" [label=Uptime]
+            stat "100+" [label=Components]
+            stat "4.9" [label=Rating]
+
+    cta "Ready to build something amazing?" [subtitle=Get started in seconds with Woozie and CommonUI.]:
+        row:
+            button "Get Started" [variant=solid, size=lg]
+            button "View Docs" [variant=outline, size=lg, page=about]
 
     footer:
-        text "Built with Woozie 3.0"
+        text "Built with Woozie 4.0 and CommonUI"
 `);
 
         fs.writeFileSync(path.join(projectDir, 'pages', 'about.woozie'),
@@ -99,11 +140,36 @@ async function main() {
         navlink "Contact" [page=contact]
 
     section:
-        heading "About"
-        text "This project was built with Woozie, the easiest web framework."
+        heading "About ${name}"
+        lead "We believe building websites should be easy, fast, and fun."
+        spacer "2"
+        twocol:
+            column:
+                subheading "Our Mission"
+                text "We created ${name} to make web development accessible to everyone. No complex toolchains, no configuration headaches — just write and build."
+                spacer "1"
+                subheading "Technology"
+                text "Built with Woozie, the easiest web framework, powered by CommonUI with 100+ professional components."
+            column:
+                timeline:
+                    timeline_item "Project Started":
+                        text "The idea was born to simplify web development."
+                    timeline_item "First Release":
+                        text "Launched with core components and dark mode."
+                    timeline_item "CommonUI Added":
+                        text "100+ professional components, page sections, and more."
+                    timeline_item "Growing Community":
+                        text "Developers worldwide are building with Woozie."
+
+    section:
+        heading "What People Say"
+        grid [cols=3]:
+            testimonial "Woozie is by far the easiest framework I've ever used. I built my landing page in 10 minutes!" [author=Sarah Chen, role=Designer]
+            testimonial "The CommonUI components are beautiful. I don't need a design system anymore." [author=Alex Rodriguez, role=Developer]
+            testimonial "My clients love how fast I can iterate. Woozie changed my workflow." [author=James Park, role=Freelancer]
 
     footer:
-        text "Built with Woozie 3.0"
+        text "Built with Woozie 4.0 and CommonUI"
 `);
 
         fs.writeFileSync(path.join(projectDir, 'pages', 'contact.woozie'),
@@ -115,21 +181,48 @@ async function main() {
 
     section:
         heading "Contact Us"
-        column:
-            input "Your name" [type=text]
-            input "Your email" [type=email]
-            textarea "Your message"
-            button "Send Message" [variant=solid]
+        text "Have a question or want to say hello? We'd love to hear from you."
+        spacer "2"
+        twocol:
+            card:
+                form:
+                    formgroup "Full Name":
+                        input "Enter your name" [type=text, name=name, required=true]
+                    formgroup "Email Address":
+                        input "you@example.com" [type=email, name=email, required=true]
+                    formgroup "Subject":
+                        select [name=subject]:
+                            option "General Question" [value=general]
+                            option "Bug Report" [value=bug]
+                            option "Feature Request" [value=feature]
+                            option "Partnership" [value=partnership]
+                    formgroup "Message":
+                        textarea "Tell us what's on your mind..." [rows=5, name=message]
+                    button "Send Message" [variant=solid, icon=✉️]
+            column:
+                card:
+                    icon "📧"
+                    subheading "Email"
+                    text "hello@example.com"
+                card:
+                    icon "📍"
+                    subheading "Location"
+                    text "San Francisco, CA"
+                card:
+                    icon "🕐"
+                    subheading "Response Time"
+                    text "We reply within 24 hours"
 
     footer:
-        text "Built with Woozie 3.0"
+        text "Built with Woozie 4.0 and CommonUI"
 `);
 
         fs.writeFileSync(path.join(projectDir, 'woozie.rules'),
-`version: 3.0
-theme: light
+`version: 4.0
+theme: dark
 title: ${name}
 font: Inter
+description: Built with Woozie and CommonUI
 `);
 
         fs.writeFileSync(path.join(projectDir, 'style.woozie'),