create-nativecore 0.1.1 → 0.2.0

package/template/src/views/protected/dashboard.html

@@ -0,0 +1,293 @@
+<div class="dashboard-container">
+    <nc-animation name="fade-in" trigger="mount" duration="420">
+        <nc-card variant="secondary" class="dashboard-hero">
+            <div class="dashboard-hero__content">
+                <nc-chip variant="success" size="sm">Protected Product Demo</nc-chip>
+                <h1 class="dashboard-title">NativeCore workspace</h1>
+                <p id="welcome-message" class="dashboard-subtitle">A polished dashboard that proves routing, state, components, and motion can all coexist without framework sprawl.</p>
+
+                <div class="dashboard-hero__actions">
+                    <nc-tooltip tip="Reload the authenticated dashboard metrics">
+                        <nc-button id="refreshBtn" variant="primary" size="lg">Refresh metrics</nc-button>
+                    </nc-tooltip>
+                    <nc-badge count="4" variant="info">
+                        <nc-a href="/docs" variant="outline">Open docs</nc-a>
+                    </nc-badge>
+                </div>
+
+                <div class="dashboard-hero__proofs">
+                    <nc-chip variant="primary" size="sm">Protected route</nc-chip>
+                    <nc-chip variant="default" size="sm">Lazy controllers</nc-chip>
+                    <nc-chip variant="success" size="sm">Signals + computed</nc-chip>
+                    <nc-chip variant="warning" size="sm">Core component system</nc-chip>
+                </div>
+            </div>
+
+            <div class="dashboard-hero__spotlight">
+                <nc-card class="dashboard-spotlight-card">
+                    <nc-popover placement="bottom-start">
+                        <nc-button slot="trigger" variant="ghost" size="sm">Framework health</nc-button>
+                        <div class="dashboard-popover-copy">
+                            A derived score calculated from authenticated users, active sessions, and revenue readiness to explain the dashboard story in one number.
+                        </div>
+                    </nc-popover>
+                    <strong id="dashboard-overview-score" class="dashboard-spotlight-card__value">0%</strong>
+                    <p class="dashboard-spotlight-card__copy">Derived from authenticated metrics, active sessions, and delivery readiness.</p>
+                </nc-card>
+
+                <nc-alert variant="success" title="Ready for walkthroughs">
+                    The protected experience now demonstrates real login, stable routing, responsive shell behavior, and component-led UI composition.
+                </nc-alert>
+            </div>
+        </nc-card>
+    </nc-animation>
+
+    <section class="dashboard-kpi-grid" id="dashboard-stats">
+        <nc-animation name="slide-up" trigger="visible" duration="420">
+            <nc-card variant="secondary" class="dashboard-kpi-card">
+                <div>
+                    <nc-chip variant="default" size="sm">Authenticated users</nc-chip>
+                    <strong id="stat-users" class="dashboard-kpi-card__value">0</strong>
+                    <p class="dashboard-kpi-card__copy">Live payload returned through the API service after remote-auth login.</p>
+                </div>
+                <nc-progress-circular id="stat-users-ring" size="82" thickness="7" variant="success" show-value value="0"></nc-progress-circular>
+            </nc-card>
+        </nc-animation>
+
+        <nc-animation name="slide-up" trigger="visible" duration="420" delay="80">
+            <nc-card variant="secondary" class="dashboard-kpi-card">
+                <div>
+                    <nc-chip variant="default" size="sm">Active sessions</nc-chip>
+                    <strong id="stat-sessions" class="dashboard-kpi-card__value">0</strong>
+                    <p class="dashboard-kpi-card__copy">Shows protected-shell activity and validates post-login token usage.</p>
+                </div>
+                <nc-progress-circular id="stat-sessions-ring" size="82" thickness="7" variant="primary" show-value value="0"></nc-progress-circular>
+            </nc-card>
+        </nc-animation>
+
+        <nc-animation name="slide-up" trigger="visible" duration="420" delay="160">
+            <nc-card variant="secondary" class="dashboard-kpi-card">
+                <div>
+                    <nc-chip variant="default" size="sm">Revenue pipeline</nc-chip>
+                    <strong id="stat-revenue" class="dashboard-kpi-card__value">$0</strong>
+                    <p class="dashboard-kpi-card__copy">Presented as business context instead of raw demo filler.</p>
+                </div>
+                <nc-progress-circular id="stat-revenue-ring" size="82" thickness="7" variant="warning" show-value value="0"></nc-progress-circular>
+            </nc-card>
+        </nc-animation>
+
+        <nc-animation name="slide-up" trigger="visible" duration="420" delay="240">
+            <nc-card variant="secondary" class="dashboard-kpi-card">
+                <div>
+                    <nc-chip variant="default" size="sm">New today</nc-chip>
+                    <strong id="stat-new-today" class="dashboard-kpi-card__value">0</strong>
+                    <p class="dashboard-kpi-card__copy">Useful for real-time extensions, notifications, and activity surfaces.</p>
+                </div>
+                <nc-progress-circular id="stat-new-today-ring" size="82" thickness="7" variant="danger" show-value value="0"></nc-progress-circular>
+            </nc-card>
+        </nc-animation>
+    </section>
+
+    <section class="dashboard-main-grid">
+        <nc-animation name="slide-up" trigger="visible" duration="420">
+            <nc-card variant="secondary" class="dashboard-panel dashboard-panel--wide">
+                <div class="dashboard-panel__header">
+                    <div>
+                        <nc-chip variant="success" size="sm">Operational Story</nc-chip>
+                        <h2 class="dashboard-panel__title">A cleaner view of delivery health</h2>
+                    </div>
+                    <nc-chip id="delivery-summary" variant="neutral" size="sm">Loading metrics...</nc-chip>
+                </div>
+
+                <nc-divider></nc-divider>
+
+                <div class="dashboard-health-list">
+                    <div class="dashboard-health-row">
+                        <div>
+                            <strong>Adoption confidence</strong>
+                            <span>Measures authenticated usage against the current demo target.</span>
+                        </div>
+                        <nc-progress id="health-adoption" size="md" variant="success" show-value></nc-progress>
+                    </div>
+
+                    <div class="dashboard-health-row">
+                        <div>
+                            <strong>Session durability</strong>
+                            <span>Shows whether protected route access stays active after sign-in and navigation.</span>
+                        </div>
+                        <nc-progress id="health-sessions" size="md" variant="primary" striped animated show-value></nc-progress>
+                    </div>
+
+                    <div class="dashboard-health-row">
+                        <div>
+                            <strong>Revenue instrumentation</strong>
+                            <span>Turns business metrics into a presentable operations summary for demos.</span>
+                        </div>
+                        <nc-progress id="health-revenue" size="md" variant="warning" show-value></nc-progress>
+                    </div>
+                </div>
+            </nc-card>
+        </nc-animation>
+
+        <nc-animation name="slide-up" trigger="visible" duration="420" delay="120">
+            <nc-card variant="secondary" class="dashboard-panel">
+                <div class="dashboard-panel__header">
+                    <div>
+                        <nc-chip variant="primary" size="sm">Activity Timeline</nc-chip>
+                        <h2 class="dashboard-panel__title">Recent protected-shell events</h2>
+                    </div>
+                    <nc-badge count="3" id="activity-count-badge" variant="info">
+                        <nc-chip variant="neutral" size="sm">Recent events</nc-chip>
+                    </nc-badge>
+                </div>
+
+                <nc-divider></nc-divider>
+
+                <nc-timeline id="dashboard-activity-timeline"></nc-timeline>
+            </nc-card>
+        </nc-animation>
+    </section>
+
+    <nc-animation name="slide-up" trigger="visible" duration="420" delay="180">
+        <nc-card variant="secondary" class="dashboard-panel dashboard-panel--showcase">
+            <div class="dashboard-panel__header">
+                <div>
+                    <nc-chip variant="warning" size="sm">Framework Showcase</nc-chip>
+                    <h2 class="dashboard-panel__title">Core primitives, state, and animation in one view</h2>
+                </div>
+            </div>
+
+            <nc-tabs variant="pills" transition="fade">
+                <nc-tab-item label="Signals + computed">
+                    <div class="dashboard-showcase-grid">
+                        <nc-card variant="secondary" class="dashboard-panel dashboard-signal-lab-card">
+                            <div class="dashboard-panel__header dashboard-panel__header--compact">
+                                <div>
+                                    <nc-chip variant="success" size="sm">Live Signals</nc-chip>
+                                    <h3 class="dashboard-panel__title dashboard-panel__title--small">useState + computed without view-layer rerenders</h3>
+                                </div>
+                                <nc-badge count="2" variant="success">
+                                    <nc-chip variant="neutral" size="sm">Derived values</nc-chip>
+                                </nc-badge>
+                            </div>
+
+                            <div class="dashboard-signal-lab-grid">
+                                <nc-card variant="secondary" class="dashboard-metric-card">
+                                    <nc-chip variant="default" size="sm">Completed</nc-chip>
+                                    <strong id="signal-completed" class="dashboard-metric-card__value">14</strong>
+                                </nc-card>
+
+                                <nc-card variant="secondary" class="dashboard-metric-card">
+                                    <nc-chip variant="default" size="sm">Remaining</nc-chip>
+                                    <strong id="signal-remaining" class="dashboard-metric-card__value">4</strong>
+                                </nc-card>
+
+                                <nc-card variant="secondary" class="dashboard-metric-card">
+                                    <nc-chip variant="default" size="sm">Completion</nc-chip>
+                                    <strong id="signal-completion" class="dashboard-metric-card__value">78%</strong>
+                                </nc-card>
+                            </div>
+
+                            <nc-progress id="signal-progress" size="lg" variant="success" show-value value="78"></nc-progress>
+                            <nc-alert id="signal-status" variant="success" title="On track">Computed delivery status updates from local dashboard state.</nc-alert>
+
+                            <div class="dashboard-hero__actions">
+                                <nc-button id="signal-complete-btn" variant="primary">Complete item</nc-button>
+                                <nc-button id="signal-add-btn" variant="secondary">Add scope</nc-button>
+                                <nc-button id="signal-reset-btn" variant="ghost">Reset demo</nc-button>
+                            </div>
+                        </nc-card>
+
+                        <div class="dashboard-content-stack">
+                            <nc-card variant="secondary" class="dashboard-note-card">
+                                <h3>Why this matters</h3>
+                                <p>`useState()` handles local mutations, `computed()` derives business state, and the controller wires subscriptions directly into the dashboard view.</p>
+                            </nc-card>
+                            <nc-code language="typescript" label="dashboard-signal-lab.ts" highlight="1,2,3">const completed = useState(14);
+const total = useState(18);
+const completion = computed(() =&gt; Math.round((completed.value / total.value) * 100));</nc-code>
+                        </div>
+                    </div>
+                </nc-tab-item>
+
+                <nc-tab-item label="Core components">
+                    <div class="dashboard-component-grid">
+                        <nc-animation name="scale-in" trigger="visible" duration="360">
+                            <nc-card variant="secondary" class="dashboard-component-card">
+                                <nc-chip variant="success" size="sm">nc-progress</nc-chip>
+                                <h3>Operational gauges</h3>
+                                <p>Progress bars make status changes legible without custom charting overhead.</p>
+                            </nc-card>
+                        </nc-animation>
+
+                        <nc-animation name="scale-in" trigger="visible" duration="360" delay="80">
+                            <nc-card variant="secondary" class="dashboard-component-card">
+                                <nc-chip variant="primary" size="sm">nc-tabs</nc-chip>
+                                <h3>Information density</h3>
+                                <p>Tabs keep the dashboard tight while still proving component composition.</p>
+                            </nc-card>
+                        </nc-animation>
+
+                        <nc-animation name="scale-in" trigger="visible" duration="360" delay="160">
+                            <nc-card variant="secondary" class="dashboard-component-card">
+                                <nc-chip variant="warning" size="sm">nc-timeline</nc-chip>
+                                <h3>Event storytelling</h3>
+                                <p>Timeline items turn backend activity into a digestible product narrative.</p>
+                            </nc-card>
+                        </nc-animation>
+
+                        <nc-animation name="scale-in" trigger="visible" duration="360" delay="240">
+                            <nc-card variant="secondary" class="dashboard-component-card">
+                                <nc-chip variant="danger" size="sm">nc-animation</nc-chip>
+                                <h3>Intentional motion</h3>
+                                <p>Visible-trigger animations make the interface feel premium without adding chaos.</p>
+                            </nc-card>
+                        </nc-animation>
+                    </div>
+                </nc-tab-item>
+
+                <nc-tab-item label="Data surfaces">
+                    <div class="dashboard-data-grid">
+                        <nc-card variant="secondary" class="dashboard-panel dashboard-panel--embedded">
+                            <div class="dashboard-panel__header dashboard-panel__header--compact">
+                                <div>
+                                    <nc-chip variant="info" size="sm">nc-table</nc-chip>
+                                    <h3 class="dashboard-panel__title dashboard-panel__title--small">Metric snapshot</h3>
+                                </div>
+                            </div>
+                            <nc-table id="dashboard-metrics-table" striped compact sortable max-height="320px"></nc-table>
+                        </nc-card>
+
+                        <div class="dashboard-content-stack">
+                            <nc-card variant="secondary" class="dashboard-panel dashboard-panel--embedded">
+                                <div class="dashboard-panel__header dashboard-panel__header--compact">
+                                    <div>
+                                        <nc-chip variant="warning" size="sm">nc-accordion</nc-chip>
+                                        <h3 class="dashboard-panel__title dashboard-panel__title--small">Implementation notes</h3>
+                                    </div>
+                                </div>
+                                <nc-accordion variant="bordered">
+                                    <nc-accordion-item header="Routing and auth" open>
+                                        Protected routes render after sign-in through the authenticated shell, while the API service carries the access token across subsequent requests.
+                                    </nc-accordion-item>
+                                    <nc-accordion-item header="Signals and computed state">
+                                        Local dashboard interactions use `useState()` and `computed()` directly in the controller to prove reactive updates without a virtual DOM.
+                                    </nc-accordion-item>
+                                    <nc-accordion-item header="Component coverage">
+                                        This page intentionally combines alerts, cards, chips, badges, progress bars, tabs, timelines, tables, tooltips, and popovers to act as a real framework demo.
+                                    </nc-accordion-item>
+                                </nc-accordion>
+                            </nc-card>
+
+                            <nc-empty-state title="Realtime feed pending" description="This panel is reserved for WebSocket or SSE integration once the dashboard moves beyond seeded mock data." icon="data" variant="bordered">
+                                <div slot="actions">
+                                    <nc-a href="/docs" variant="ghost">Read architecture</nc-a>
+                                </div>
+                            </nc-empty-state>
+                        </div>
+                    </div>
+                </nc-tab-item>
+            </nc-tabs>
+        </nc-card>
+    </nc-animation>
+</div>

package/template/src/views/public/home.html

@@ -0,0 +1,150 @@
+<section class="hero">
+    <div class="hero-inner">
+        <div class="hero-badge">TypeScript-first. Web Components. Zero runtime production dependencies.</div>
+
+        <h1>Build serious web apps on web standards</h1>
+
+        <p class="hero-tagline">
+            NativeCore combines Web Components, Shadow DOM, reactive signals, lazy route controllers,
+            and auth-ready protected route patterns into one framework for teams that want platform-native architecture
+            without a virtual DOM runtime.
+        </p>
+
+        <div class="hero-actions">
+            <nc-a variant="hero-primary" href="/docs" id="get-started-btn">Read the Docs</nc-a>
+            <nc-a variant="hero-ghost" href="/components">Explore Components</nc-a>
+            <nc-a variant="hero-ghost" href="/login">Open Demo App</nc-a>
+        </div>
+
+        <div class="hero-stats">
+            <div class="stat-item">
+                <span class="stat-number">60+</span>
+                <span class="stat-label">Core Components</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-number">0</span>
+                <span class="stat-label">Runtime Dependencies</span>
+            </div>
+            
+            <div class="stat-item">
+                <span class="stat-number">1</span>
+                <span class="stat-label">Framework Mental Model</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="why-section">
+    <div class="section-head">
+        <h2>Why teams choose NativeCore</h2>
+        <p class="section-subtitle">
+            NativeCore is strongest when you want framework-level structure while staying close to the platform.
+        </p>
+    </div>
+
+    <div class="why-cards">
+        <div class="comparison-card problem">
+            <div class="card-icon">Platform</div>
+            <h3>Built from browser primitives</h3>
+            <ul class="feature-list">
+                <li>Web Components and Shadow DOM for reusable UI</li>
+                <li>ES modules and native events instead of custom runtime rules</li>
+                <li>TypeScript as a compile-time tool, not an application runtime dependency</li>
+                <li>HTML views and controllers that stay readable to any strong web developer</li>
+            </ul>
+        </div>
+
+        <div class="comparison-card solution">
+            <div class="card-icon">Product</div>
+            <h3>Designed for production SPAs</h3>
+            <ul class="feature-list">
+                <li>Reactive signals, stores, and computed values</li>
+                <li>Lazy controllers, route caching, and auth-ready protected route patterns</li>
+                <li>Built-in component library for forms, navigation, overlays, and tables</li>
+                <li>Bot build tooling for SEO-sensitive static deployments</li>
+            </ul>
+        </div>
+    </div>
+</section>
+
+<section class="features-section">
+    <div class="section-head">
+        <h2>What ships with the framework</h2>
+        <p class="subtitle">
+            NativeCore already includes the core pieces teams usually assemble from several libraries.
+        </p>
+    </div>
+
+    <div class="features-grid">
+        <div class="feature-card">
+            <h3>Router and route protection</h3>
+            <p>Single-shell SPA routing with lazy-loaded route controllers, protected route gating, and explicit route registration.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Reactive state</h3>
+            <p>Signals, computed values, and shared stores for fine-grained updates without a virtual DOM.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Component system</h3>
+            <p>Shadow DOM-based components with lifecycle hooks, lazy registration, and standards-based interoperability.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Auth foundation</h3>
+            <p>JWT-ready auth service, protected-route patterns, and a single-shell SPA architecture for real application flows.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>UI library</h3>
+            <p>Buttons, inputs, forms, menus, overlays, feedback components, tables, and navigation primitives.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>SEO-oriented builds</h3>
+            <p>Bot-targeted static output so teams can improve indexing without taking on full SSR infrastructure.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Generator workflow</h3>
+            <p>Scaffold views, controllers, and components with the built-in scripts to preserve project conventions.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Adoption path</h3>
+            <p>Docs, components demos, and an evolving `create:app` flow aimed at faster team onboarding.</p>
+        </div>
+    </div>
+</section>
+
+<section class="comparison-section">
+    <div class="section-head">
+        <h2>What NativeCore is building next</h2>
+        <p class="subtitle">
+            The next chapter is about proof, adoption, and consistency across the product.
+        </p>
+    </div>
+
+    <div class="features-grid">
+        <div class="feature-card">
+            <h3>Flagship app</h3>
+            <p>A real-world example application that proves NativeCore can support production workflows end to end.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Official starters</h3>
+            <p>Stronger `create:app` templates for docs, dashboards, auth-first apps, and marketing-plus-app experiences.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Adoption-first docs</h3>
+            <p>A clearer learning path from install, to first route, to forms, server-state, deployment, and extension patterns.</p>
+        </div>
+
+        <div class="feature-card">
+            <h3>Reproducible benchmarks</h3>
+            <p>Performance and bundle-size comparisons that can be rerun and verified by the community.</p>
+        </div>
+    </div>
+</section>

package/template/src/views/public/login.html

@@ -0,0 +1,102 @@
+<div class="login-experience">
+    <div class="login-shell">
+        <section class="login-showcase" aria-label="Demo access overview">
+            <div class="login-showcase__eyebrow">Enterprise Demo Access</div>
+            <h1 class="login-showcase__title">Demo sign in.</h1>
+            <p class="login-showcase__copy">
+                Simple access to the NativeCore dashboard demo.
+            </p>
+
+            <div class="login-showcase__grid">
+                <article class="login-showcase__card">
+                    <h2>What this demo proves</h2>
+                    <ul class="login-showcase__list">
+                        <li>Protected route gating with dashboard handoff</li>
+                        <li>API-backed authentication flow using seeded demo users</li>
+                        <li>Component-driven UI built from NativeCore primitives</li>
+                    </ul>
+                </article>
+
+                <article class="login-showcase__card login-showcase__card--accent">
+                    <h2>Included in the walkthrough</h2>
+                    <div class="login-showcase__metrics">
+                        <div>
+                            <strong>Public routes</strong>
+                            <span>Marketing site and docs entry</span>
+                        </div>
+                        <div>
+                            <strong>Protected routes</strong>
+                            <span>Dashboard access, auth state, and API data</span>
+                        </div>
+                        <div>
+                            <strong>Demo account</strong>
+                            <span>Pre-seeded credentials for fast validation</span>
+                        </div>
+                    </div>
+                </article>
+            </div>
+        </section>
+
+        <section class="login-panel" aria-label="Sign in form">
+            <div class="login-panel__header">
+                <p class="login-panel__eyebrow">Secure Workspace Sign In</p>
+                <h2>Access the NativeCore demo dashboard</h2>
+                <p>Use the demo credentials below.</p>
+            </div>
+
+            <div class="login-demo-credentials" aria-label="Demo credentials">
+                <div class="login-demo-credentials__item">
+                    <span>Demo email</span>
+                    <strong>demo@example.com</strong>
+                </div>
+                <div class="login-demo-credentials__item">
+                    <span>Demo password</span>
+                    <strong>pa$$w0rd</strong>
+                </div>
+            </div>
+
+            <div id="login-error" class="login-alert alert alert-error" hidden aria-live="polite"></div>
+
+            <nc-form id="loginForm" class="login-form">
+                <nc-field class="login-field" label="Work Email" for="email" required>
+                    <nc-input
+                        id="email"
+                        name="email"
+                        type="email"
+                        autocomplete="username email"
+                        placeholder="demo@example.com"
+                        value="demo@example.com"
+                        required
+                    ></nc-input>
+                </nc-field>
+
+                <nc-field class="login-field" label="Password" for="password" required>
+                    <nc-input
+                        id="password"
+                        name="password"
+                        type="password"
+                        autocomplete="current-password"
+                        placeholder="Enter your password"
+                        value="pa$$w0rd"
+                        required
+                        minlength="8"
+                        show-password-toggle
+                    ></nc-input>
+                </nc-field>
+
+                <div class="login-form__utility">
+                    <nc-checkbox id="rememberMe" name="rememberMe" label="Remember demo email" checked></nc-checkbox>
+                    <a href="/docs" data-link class="login-form__utility-link">Review the docs</a>
+                </div>
+
+                <nc-button id="loginBtn" type="submit" variant="primary" size="lg" full-width>
+                    Access Dashboard
+                </nc-button>
+            </nc-form>
+
+            <p class="login-panel__footer">
+                Demo account only. The credentials above are intentionally exposed for evaluation purposes.
+            </p>
+        </section>
+    </div>
+</div>

package/template/tests/unit/component.test.ts

@@ -0,0 +1,87 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { Component, defineComponent } from '../../src/core/component.js';
+
+class TestComponentElement extends Component {
+    static useShadowDOM = true;
+    static observedAttributes = ['label'];
+
+    template(): string {
+        return `<div class="label">${this.getAttribute('label') ?? 'Default'}</div>`;
+    }
+}
+
+class FocusPreservingComponent extends Component {
+    static useShadowDOM = true;
+
+    constructor() {
+        super();
+        this.state = {
+            label: 'Initial label'
+        };
+    }
+
+    template(): string {
+        return `
+            <div class="wrapper">
+                <label for="name">${this.state.label}</label>
+                <input id="name" value="keep-me" />
+            </div>
+        `;
+    }
+}
+
+defineComponent('test-component-element', TestComponentElement);
+defineComponent('focus-preserving-component', FocusPreservingComponent);
+
+describe('core/component', () => {
+    let container: HTMLDivElement;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+        document.body.innerHTML = '';
+    });
+
+    it('renders into shadow DOM when enabled', () => {
+        const element = document.createElement('test-component-element') as TestComponentElement;
+        container.appendChild(element);
+
+        expect(element.shadowRoot).not.toBeNull();
+        expect(element.shadowRoot?.querySelector('.label')?.textContent).toBe('Default');
+    });
+
+    it('rerenders when observed attributes change', () => {
+        const element = document.createElement('test-component-element') as TestComponentElement;
+        container.appendChild(element);
+
+        element.setAttribute('label', 'Updated');
+
+        expect(element.shadowRoot?.querySelector('.label')?.textContent).toBe('Updated');
+    });
+
+    it('patches the existing DOM instead of replacing focused elements', () => {
+        const element = document.createElement('focus-preserving-component') as FocusPreservingComponent;
+        container.appendChild(element);
+
+        const shadowRoot = element.shadowRoot as ShadowRoot;
+        const inputBefore = shadowRoot.querySelector<HTMLInputElement>('#name');
+        const labelBefore = shadowRoot.querySelector('label');
+
+        expect(inputBefore).toBeTruthy();
+        expect(labelBefore?.textContent).toBe('Initial label');
+
+        inputBefore?.focus();
+        element.setState({ label: 'Updated label' });
+
+        const inputAfter = shadowRoot.querySelector<HTMLInputElement>('#name');
+        const labelAfter = shadowRoot.querySelector('label');
+
+        expect(inputAfter).toBe(inputBefore);
+        expect(labelAfter?.textContent).toBe('Updated label');
+        expect(shadowRoot.activeElement).toBe(inputAfter);
+    });
+});