velm 0.1.2__py3-none-any.whl

velm/semantic_injection/directives/ui_knowledge/html_ui/src/components/organisms/pricing_table.html

@@ -0,0 +1,37 @@
+<style>
+.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; width: 100%; max-width: 1000px; }
+.price-card {
+    background: var(--surface); padding: 2rem; border-radius: var(--radius-lg);
+    border: 1px solid var(--border); text-align: center;
+}
+.price-card.featured { border-color: var(--primary); position: relative; overflow: hidden; }
+.price-card.featured::before {
+    content: 'POPULAR'; position: absolute; top: 0; right: 0;
+    background: var(--primary); color: white; font-size: 0.7rem;
+    padding: 0.25rem 0.5rem; border-bottom-left-radius: var(--radius);
+}
+.price-amount { font-size: 2.5rem; font-weight: 800; color: var(--text); }
+.price-features { list-style: none; padding: 0; text-align: left; margin: 2rem 0; }
+.price-features li { padding: 0.5rem 0; border-bottom: 1px dashed var(--border); font-size: 0.9rem; }
+</style>
+<div class="pricing-grid">
+    <div class="price-card">
+        <h3>Starter</h3>
+        <div class="price-amount">$0</div>
+        <ul class="price-features">
+            <li>✓ 5 Blueprints</li>
+            <li>✓ Community Support</li>
+        </ul>
+        <button class="btn btn-outline" style="width:100%">Join</button>
+    </div>
+    <div class="price-card featured">
+        <h3>Pro</h3>
+        <div class="price-amount">$29</div>
+        <ul class="price-features">
+            <li>✓ Unlimited Blueprints</li>
+            <li>✓ Priority Translocation</li>
+            <li>✓ AI Co-Architect</li>
+        </ul>
+        <button class="btn btn-primary" style="width:100%">Upgrade</button>
+    </div>
+</div>

velm/semantic_injection/directives/ui_knowledge/html_ui/src/components/organisms/sidebar.html

@@ -0,0 +1,30 @@
+<style>
+.sidebar {
+    width: 250px; height: 100%; background: var(--surface);
+    border-right: 1px solid var(--border); padding: 2rem 1rem;
+    display: flex; flex-direction: column; gap: 0.5rem;
+}
+.nav-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 0.75rem 1rem; color: var(--text-light);
+    text-decoration: none; border-radius: var(--radius);
+    transition: 0.2s;
+}
+.nav-item:hover, .nav-item.active {
+    background: #eef2ff; color: var(--primary);
+}
+.nav-item svg { width: 20px; }
+</style>
+<div class="sidebar">
+    <a href="#" class="nav-item active">
+        <span>🏠</span> Dashboard
+    </a>
+    <a href="#" class="nav-item">
+        <span>📊</span> Analytics
+    </a>
+    <a href="#" class="nav-item">
+        <span>⚙️</span> Settings
+    </a>
+    <div style="flex-grow:1"></div>
+    <a href="#" class="nav-item">Logout</a>
+</div>

velm/semantic_injection/directives/ui_knowledge/html_ui/src/css/variables.css

@@ -0,0 +1,44 @@
+:root {
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --secondary: #ec4899;
+    --bg: #f8fafc;
+    --surface: #ffffff;
+    --text: #0f172a;
+    --text-light: #64748b;
+    --border: #e2e8f0;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --radius-sm: 0.25rem;
+    --radius: 0.5rem;
+    --radius-lg: 1rem;
+    --radius-full: 9999px;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --font-main: system-ui, -apple-system, sans-serif;
+}
+
+* { box-sizing: border-box; }
+body {
+    font-family: var(--font-main);
+    background: var(--bg);
+    color: var(--text);
+    margin: 0;
+    padding: 20px;
+    line-height: 1.5;
+}
+.component-wrapper {
+    background: var(--surface);
+    padding: 2rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 1rem;
+}
+h2 { color: var(--text); border-bottom: 2px solid var(--primary); padding-bottom: 0.5rem; display: inline-block; }

velm/semantic_injection/directives/ui_knowledge/layouts.py

@@ -0,0 +1,242 @@
+# scaffold/semantic_injection/directives/ui_knowledge/layouts.py
+
+from textwrap import dedent
+from typing import List, Tuple
+
+from .registry import ComponentRegistry
+from ....contracts.heresy_contracts import ArtisanHeresy
+from ....utils.invocation import invoke_scaffold_command
+
+
+@ComponentRegistry.register("dashboard-layout")
+def forge_dashboard_layout(name: str, props: List[Tuple[str, str]]) -> str:
+    """
+    =================================================================================
+    == THE CITADEL'S FOUNDATION (V-Ω-LAYOUT-KIT)                                   ==
+    =================================================================================
+    This artisan is a Gnostic Conductor. It does not generate code directly. It
+    proclaims a sacred, ephemeral blueprint scripture and then summons the
+    God-Engine (`invoke_scaffold_command`) to materialize that scripture within
+    the current reality. This is the apotheosis of compositional architecture.
+    =================================================================================
+    """
+
+    # The Gnostic Blueprint is the artisan's one true soul.
+    # It speaks the language of Form to forge a living, interconnected Organism.
+    blueprint_scripture = dedent(r"""
+# =================================================================
+# == EPHEMERAL BLUEPRINT: THE GNOSTIC DASHBOARD CITADEL          ==
+# =================================================================
+
+# --- 1. The Gnostic Nervous System (State & Context) ---
+
+src/providers/LayoutProvider.tsx :: '''
+'use client';
+
+import React, { createContext, useState, useCallback, useMemo, useContext } from 'react';
+
+interface LayoutContextType {
+  isSidebarOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+export const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
+
+export function LayoutProvider({ children }: { children: React.ReactNode }) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const toggleSidebar = useCallback(() => setIsSidebarOpen(prev => !prev), []);
+
+  const value = useMemo(() => ({ isSidebarOpen, toggleSidebar }), [isSidebarOpen, toggleSidebar]);
+
+  return (
+    <LayoutContext.Provider value={value}>
+      {children}
+    </Layout-Provider>
+  );
+}
+'''
+
+src/hooks/use-layout.ts :: '''
+import { useContext } from 'react';
+import { LayoutContext } from '@/providers/LayoutProvider';
+
+export function useLayout() {
+  const context = useContext(LayoutContext);
+  if (context === undefined) {
+    throw new Error('useLayout must be used within a LayoutProvider');
+  }
+  return context;
+}
+'''
+
+# --- 2. The Citadel's Form (The Core Layout & Its Organs) ---
+
+src/layouts/DashboardLayout.tsx :: '''
+'use client';
+
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from '@/components/layout/Sidebar';
+import { Header } from '@/components/layout/Header';
+import { LayoutProvider } from '@/providers/LayoutProvider';
+import { useLayout } from '@/hooks/use-layout';
+import { cn } from '@/lib/utils';
+
+function DashboardShell() {
+  const { isSidebarOpen, toggleSidebar } = useLayout();
+
+  return (
+    <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+      <div className={cn("hidden border-r bg-muted/40 md:block", !isSidebarOpen && "md:hidden")}>
+        <Sidebar />
+      </div>
+      <div className="flex flex-col">
+        <Header onMenuClick={toggleSidebar} />
+        <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6 bg-background">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardLayout() {
+  return (
+    <LayoutProvider>
+      <DashboardShell />
+    </LayoutProvider>
+  );
+}
+'''
+
+src/components/layout/Header.tsx :: '''
+import { Menu, Search } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { UserNav } from '@/components/layout/UserNav';
+
+export function Header({ onMenuClick }: { onMenuClick: () => void }) {
+  return (
+    <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+      <Button variant="outline" size="icon" className="h-8 w-8 shrink-0 md:hidden" onClick={onMenuClick}>
+        <Menu className="h-5 w-5" />
+        <span className="sr-only">Toggle navigation menu</span>
+      </Button>
+      <div className="w-full flex-1">
+        <form>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search the cosmos..."
+              className="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
+            />
+          </div>
+        </form>
+      </div>
+      <UserNav />
+    </header>
+  );
+}
+'''
+
+src/components/layout/Sidebar.tsx :: '''
+import { NavLink } from 'react-router-dom';
+import { Home, Package, ShoppingCart, Users, LineChart } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+
+const navLinks = [
+  { to: '/dashboard', icon: Home, label: 'Dashboard' },
+  { to: '/orders', icon: ShoppingCart, label: 'Orders', badge: '6' },
+  { to: '/products', icon: Package, label: 'Products' },
+  { to: '/customers', icon: Users, label: 'Customers' },
+  { to: '/analytics', icon: LineChart, label: 'Analytics' },
+];
+
+export function Sidebar() {
+  return (
+    <div className="flex h-full max-h-screen flex-col gap-2">
+      <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+        <span className="flex items-center gap-2 font-semibold">
+          <Package className="h-6 w-6 text-primary" />
+          <span>Gnostic Inc</span>
+        </span>
+      </div>
+      <div className="flex-1">
+        <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+          {navLinks.map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              className={({ isActive }) => cn(
+                "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
+                isActive && "bg-muted text-primary"
+              )}
+            >
+              <link.icon className="h-4 w-4" />
+              {link.label}
+              {link.badge && <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">{link.badge}</Badge>}
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+      <div className="mt-auto p-4">
+        <Card>
+          <CardHeader className="p-2 pt-0 md:p-4">
+            <CardTitle>Upgrade to Pro</CardTitle>
+            <CardDescription>Unlock all Gnostic features and get unlimited access to our support team.</CardDescription>
+          </CardHeader>
+          <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
+            <Button size="sm" className="w-full">Upgrade</Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+'''
+
+# --- 3. The Organs' Organs (The Atoms Summoned by the Layout) ---
+# We summon these to ensure the layout is born complete and without heresy.
+
+src/components/layout/UserNav.tsx :: @ui/component(name="UserNav")
+src/components/ui/badge.tsx :: @ui/component(name="Badge")
+src/components/ui/button.tsx :: @ui/component(name="Button")
+src/components/ui/card.tsx :: @ui/component(name="Card")
+src/components/ui/input.tsx :: @ui/component(name="Input")
+src/components/ui/dropdown-menu.tsx :: @ui/component(name="DropdownMenu")
+src/components/ui/avatar.tsx :: @ui/component(name="Avatar")
+src/lib/utils.ts :: @ui/utils
+
+    """)
+
+    # --- The Rite of Gnostic Invocation ---
+    # The artisan summons the God-Engine to make its own, internal will manifest.
+    # This is a divine, recursive act of self-creation.
+    try:
+        # We use the raw, internal `invoke_scaffold_command` for a pure,
+        # in-process symphony, bypassing the profane shell.
+        result = invoke_scaffold_command(
+            command_args=["-"],  # The "-" sigil commands the engine to read from stdin
+            stdin_content=blueprint_scripture,
+            non_interactive=True  # The child rite must be silent
+        )
+
+        if result.exit_code != 0:
+            # A heresy in our own scripture is a catastrophic paradox.
+            raise ArtisanHeresy(
+                "A catastrophic paradox occurred while materializing the DashboardLayout kit.",
+                details=result.output
+            )
+
+        # The Conductor's Vow: It must return a string.
+        # We proclaim the path to the main layout file as a sacred comment,
+        # a luminous guide for the Architect's Gaze.
+        return "// Gnostic Layout Kit materialized successfully. See 'src/layouts/DashboardLayout.tsx'."
+
+    except Exception as e:
+        # The Unbreakable Ward of Grace
+        raise ArtisanHeresy("A catastrophic, unhandled paradox shattered the Layout Conductor.", child_heresy=e)

velm/semantic_injection/directives/ui_knowledge/multi_step_wizard.py

@@ -0,0 +1,95 @@
+from textwrap import dedent
+from typing import List, Tuple
+
+from .registry import ComponentRegistry
+
+
+@ComponentRegistry.register("multi-step-wizard")
+def forge_multi_step_wizard(name: str, props: List[Tuple[str, str]]) -> str:
+    # This artisan forges a stateful, multi-step form or onboarding flow.
+    return dedent(r'''
+'use client';
+
+import React, { useState, FormEvent, ReactElement } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+
+// The Gnostic Hook for managing wizard state
+function useMultiStepForm(steps: ReactElement[]) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+  function next() {
+    setCurrentStepIndex(i => {
+      if (i >= steps.length - 1) return i;
+      return i + 1;
+    });
+  }
+
+  function back() {
+    setCurrentStepIndex(i => {
+      if (i <= 0) return i;
+      return i - 1;
+    });
+  }
+
+  function goTo(index: number) {
+    setCurrentStepIndex(index);
+  }
+
+  return {
+    currentStepIndex,
+    step: steps[currentStepIndex],
+    steps,
+    isFirstStep: currentStepIndex === 0,
+    isLastStep: currentStepIndex === steps.length - 1,
+    goTo,
+    next,
+    back,
+  };
+}
+
+// Dummy Step Components (To be replaced by the Architect's will)
+const Step1 = () => <div>Step 1: Welcome</div>;
+const Step2 = () => <div>Step 2: Configuration</div>;
+const Step3 = () => <div>Step 3: Finalization</div>;
+
+export function MultiStepWizard({ className }: { className?: string }) {
+  const { steps, currentStepIndex, step, isFirstStep, isLastStep, back, next } = useMultiStepForm([
+    <Step1 />,
+    <Step2 />,
+    <Step3 />,
+  ]);
+
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!isLastStep) return next();
+    alert("Onboarding Complete!");
+  }
+
+  return (
+    <Card className={cn("w-[450px]", className)}>
+      <form onSubmit={onSubmit}>
+        <CardHeader>
+          <CardTitle>
+            Onboarding ({currentStepIndex + 1} / {steps.length})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {step}
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          {!isFirstStep && (
+            <Button type="button" variant="ghost" onClick={back}>
+              Back
+            </Button>
+          )}
+          <Button type="submit" className={isFirstStep ? "ml-auto" : ""}>
+            {isLastStep ? "Finish" : "Next"}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}
+''')

velm/semantic_injection/directives/ui_knowledge/python_ui/__init__.py

@@ -0,0 +1,17 @@
+# scaffold/semantic_injection/directives/ui_knowledge/python_ui/__init__.py
+
+"""
+=================================================================================
+== THE PYTHONIC FACE (V-Ω-PANTHEON)                                            ==
+=================================================================================
+This sanctum exposes the full spectrum of Python UI frameworks.
+It bridges the gap between backend logic and frontend visualization.
+=================================================================================
+"""
+from . import dash_forge
+from . import flet_forge
+from . import gradio_forge
+from . import nicegui_forge
+from . import reflex_forge
+from . import streamlit_forge
+from . import textual_forge

velm/semantic_injection/directives/ui_knowledge/python_ui/dash_forge.py

@@ -0,0 +1,55 @@
+# scaffold/semantic_injection/directives/ui_knowledge/python_ui/dash_forge.py
+
+from textwrap import dedent
+from typing import List, Tuple
+
+from ..registry import ComponentRegistry
+
+
+@ComponentRegistry.register("dash-analytics")
+def forge_dash_analytics(name: str, props: List[Tuple[str, str]]) -> str:
+    """
+    Forges an Enterprise Analytical Dashboard using Plotly Dash.
+    """
+    return dedent(f"""
+        from dash import Dash, html, dcc, callback, Output, Input
+        import plotly.express as px
+        import pandas as pd
+
+        app = Dash(__name__)
+
+        # Mock Data
+        df = pd.DataFrame({{
+            "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
+            "Amount": [4, 1, 2, 2, 4, 5],
+            "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
+        }})
+
+        app.layout = html.Div(children=[
+            html.H1(children='{name}'),
+
+            html.Div(children='''
+                Gnostic Analytics: Enterprise Data Visualization.
+            '''),
+
+            dcc.Dropdown(
+                id='city-filter',
+                options=df['City'].unique(),
+                value='SF'
+            ),
+
+            dcc.Graph(id='example-graph')
+        ])
+
+        @callback(
+            Output('example-graph', 'figure'),
+            Input('city-filter', 'value')
+        )
+        def update_graph(city):
+            filtered_df = df[df.City == city]
+            fig = px.bar(filtered_df, x="Fruit", y="Amount", color="Fruit", barmode="group")
+            return fig
+
+        if __name__ == '__main__':
+            app.run(debug=True)
+    """).strip()

velm/semantic_injection/directives/ui_knowledge/python_ui/flet_forge.py

@@ -0,0 +1,39 @@
+# scaffold/semantic_injection/directives/ui_knowledge/python_ui/flet_forge.py
+
+from textwrap import dedent
+from typing import List, Tuple
+
+from ..registry import ComponentRegistry
+
+
+@ComponentRegistry.register("flet-todo")
+def forge_flet_todo(name: str, props: List[Tuple[str, str]]) -> str:
+    """
+    Forges a Flutter-based To-Do app using Flet (Python).
+    """
+    return dedent(f"""
+        import flet as ft
+
+        def main(page: ft.Page):
+            page.title = "{name}"
+            page.vertical_alignment = ft.MainAxisAlignment.START
+
+            new_task = ft.TextField(hint_text="What needs to be done?", width=300)
+
+            def add_clicked(e):
+                if new_task.value:
+                    page.add(ft.Checkbox(label=new_task.value))
+                    new_task.value = ""
+                    new_task.focus()
+                    page.update()
+
+            page.add(
+                ft.Row([
+                    new_task,
+                    ft.ElevatedButton("Add", on_click=add_clicked)
+                ]),
+                ft.Text("Active Tasks:", size=20, weight="bold")
+            )
+
+        ft.app(target=main)
+    """).strip()

velm/semantic_injection/directives/ui_knowledge/python_ui/gradio_forge.py

@@ -0,0 +1,79 @@
+# scaffold/semantic_injection/directives/ui_knowledge/python_ui/gradio_forge.py
+
+from textwrap import dedent
+from typing import List, Tuple
+
+from ..registry import ComponentRegistry
+
+
+@ComponentRegistry.register("gradio-chat")
+def forge_gradio_chat(name: str, props: List[Tuple[str, str]]) -> str:
+    """
+    Forges a modern ChatInterface for LLM interactions.
+    Usage: app.py :: @ui/component(name="Bot", props="title:My Bot")
+    """
+    config = {k: v for k, v in props}
+    title = config.get("title", "Gnostic Chat")
+
+    return dedent(f"""
+        import gradio as gr
+        import time
+
+        def echo_mind(message, history):
+            \"\"\"
+            Connect this to your @neuron/client.
+            \"\"\"
+            response = f"I perceive your thought: '{{message}}'"
+            for i in range(len(response)):
+                time.sleep(0.02)
+                yield response[:i+1]
+
+        demo = gr.ChatInterface(
+            fn=echo_mind,
+            title="{title}",
+            description="Interact with the Neural Cortex.",
+            theme="soft",
+            examples=["What is the meaning of code?", "Generate a Python script."],
+            retry_btn="Re-think",
+            undo_btn="Undo",
+            clear_btn="Tabula Rasa",
+        )
+
+        if __name__ == "__main__":
+            demo.queue().launch()
+    """).strip()
+
+
+@ComponentRegistry.register("gradio-vision")
+def forge_gradio_vision(name: str, props: List[Tuple[str, str]]) -> str:
+    """
+    Forges a Computer Vision workspace.
+    """
+    return dedent(f"""
+        import gradio as gr
+        import numpy as np
+
+        def process_vision(input_img, threshold):
+            \"\"\"Simulates image processing.\"\"\"
+            # Convert to grayscale for demo
+            if input_img is None: return None
+            return np.dot(input_img[...,:3], [0.2989, 0.5870, 0.1140])
+
+        with gr.Blocks(title="{name}") as demo:
+            gr.Markdown("# 👁️ {name} Processing")
+
+            with gr.Row():
+                with gr.Column():
+                    input_img = gr.Image(label="Input Source")
+                    threshold = gr.Slider(0, 100, value=50, label="Sensitivity")
+                    btn = gr.Button("Process", variant="primary")
+
+                with gr.Column():
+                    output_img = gr.Image(label="Gnostic Output")
+                    json_out = gr.JSON(label="Metadata")
+
+            btn.click(fn=process_vision, inputs=[input_img, threshold], outputs=output_img)
+
+        if __name__ == "__main__":
+            demo.launch()
+    """).strip()

velm/semantic_injection/directives/ui_knowledge/python_ui/nicegui_forge.py

@@ -0,0 +1,39 @@
+# scaffold/semantic_injection/directives/ui_knowledge/python_ui/nicegui_forge.py
+
+from textwrap import dedent
+from typing import List, Tuple
+
+from ..registry import ComponentRegistry
+
+
+@ComponentRegistry.register("nicegui-app")
+def forge_nicegui_app(name: str, props: List[Tuple[str, str]]) -> str:
+    """
+    Forges a modern, reactive web app using NiceGUI.
+    """
+    return dedent(f"""
+        from nicegui import ui
+
+        def {name.lower()}_app():
+            with ui.header().classes(replace='row items-center') as header:
+                ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')
+                ui.label('{name}').classes('text-h6')
+
+            with ui.left_drawer().classes('bg-blue-100') as left_drawer:
+                ui.label('Navigation')
+                ui.link('Home', '#')
+                ui.link('Settings', '#')
+
+            with ui.column().classes('w-full items-center'):
+                ui.label('Welcome to the Gnostic Web').classes('text-4xl font-bold')
+
+                with ui.card():
+                    ui.label('Interactive Elements')
+                    ui.switch('Dark Mode', on_change=lambda e: ui.dark_mode(e.value))
+
+                    result = ui.label()
+                    ui.button('Click Me', on_click=lambda: result.set_text('Clicked!'))
+
+        {name.lower()}_app()
+        ui.run()
+    """).strip()