kubex · bajb · Feb 3, 2026 · Feb 3, 2026 · Feb 3, 2026 · Feb 3, 2026
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ _site
 .cache
 dist
 node_modules
+.worktrees
diff --git a/docs/pages/examples/analytics/dashboard.md b/docs/pages/examples/analytics/dashboard.md
@@ -0,0 +1,170 @@
+---
+meta:
+  title: Analytics Dashboard
+  description: Data visualization dashboard with multiple chart types and metrics.
+fullWidth: true
+---
+
+# Analytics Dashboard
+
+A data-rich analytics dashboard with various chart types and KPI metrics. Demonstrates `zn-chart`, `zn-stat`, `zn-datepicker`, and visualization layouts.
+
+```html:preview
+<zn-pane>
+  <zn-sp flush>
+    <!-- Header with Date Range -->
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: var(--zn-spacing-md);">
+      <h2 style="margin: 0;">Analytics Overview</h2>
+      <div style="display: flex; gap: var(--zn-spacing-sm); align-items: center;">
+        <zn-datepicker range placeholder="Select date range" value="2026-01-01 - 2026-01-31"></zn-datepicker>
+        <zn-button icon="refresh" color="secondary">Refresh</zn-button>
+        <zn-button icon="download" color="secondary">Export</zn-button>
+      </div>
+    </div>
+
+    <!-- KPI Stats Row -->
+    <div style="padding: 0 var(--zn-spacing-md);">
+      <zn-cols layout="1,1,1,1,1,1">
+        <zn-stat caption="Total Visitors" value="48,352" trend="up" trend-value="+12.5%"></zn-stat>
+        <zn-stat caption="Page Views" value="156,847" trend="up" trend-value="+8.3%"></zn-stat>
+        <zn-stat caption="Bounce Rate" value="42.3%" trend="down" trend-value="-5.2%"></zn-stat>
+        <zn-stat caption="Avg. Session" value="4m 23s" trend="up" trend-value="+15.1%"></zn-stat>
+        <zn-stat caption="Conversions" value="1,284" trend="up" trend-value="+22.8%"></zn-stat>
+        <zn-stat caption="Revenue" value="$48,352" trend="up" trend-value="+18.4%"></zn-stat>
+      </zn-cols>
+    </div>
+
+    <!-- Main Charts Row -->
+    <div style="padding: var(--zn-spacing-md);">
+      <zn-cols layout="2,1">
+        <zn-panel caption="Traffic Overview" description="Visitors over time">
+          <zn-chart
+            type="area"
+            height="300"
+            series='[{"name": "Visitors", "data": [3200, 3800, 4100, 3600, 4800, 5200, 5400, 5800, 6200, 5900, 6800, 7200, 6900, 7500, 8100, 7800, 8400, 8800, 8200, 9100, 9500, 8900, 9800, 10200, 9600, 10500, 10900, 10200, 11000, 11500]}, {"name": "Unique", "data": [2400, 2900, 3100, 2700, 3600, 3900, 4100, 4400, 4700, 4500, 5100, 5400, 5200, 5600, 6100, 5900, 6300, 6600, 6200, 6800, 7100, 6700, 7400, 7700, 7200, 7900, 8200, 7700, 8300, 8700]}]'
+            categories='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"]'>
+          </zn-chart>
+        </zn-panel>
+        <zn-panel caption="Traffic Sources">
+          <zn-chart
+            type="donut"
+            height="300"
+            series="[35, 25, 20, 15, 5]"
+            labels='["Organic Search", "Direct", "Social Media", "Referral", "Email"]'>
+          </zn-chart>
+        </zn-panel>
+      </zn-cols>
+    </div>
+
+    <!-- Secondary Charts Row -->
+    <div style="padding: 0 var(--zn-spacing-md) var(--zn-spacing-md);">
+      <zn-cols layout="1,1,1">
+        <zn-panel caption="Revenue by Channel">
+          <zn-chart
+            type="bar"
+            height="250"
+            series='[{"name": "Revenue", "data": [18500, 12300, 9800, 5200, 2552]}]'
+            categories='["Organic", "Direct", "Social", "Referral", "Email"]'>
+          </zn-chart>
+        </zn-panel>
+        <zn-panel caption="Conversion Funnel">
+          <zn-chart
+            type="bar"
+            height="250"
+            horizontal="true"
+            series='[{"name": "Users", "data": [48352, 28500, 12400, 4200, 1284]}]'
+            categories='["Visitors", "Product Views", "Add to Cart", "Checkout", "Purchase"]'>
+          </zn-chart>
+        </zn-panel>
+        <zn-panel caption="Device Breakdown">
+          <zn-chart
+            type="pie"
+            height="250"
+            series="[58, 32, 10]"
+            labels='["Desktop", "Mobile", "Tablet"]'>
+          </zn-chart>
+        </zn-panel>
+      </zn-cols>
+    </div>
+
+    <!-- Bottom Section -->
+    <div style="padding: 0 var(--zn-spacing-md) var(--zn-spacing-md);">
+      <zn-cols layout="1,1">
+        <zn-panel caption="Top Pages" flush>
+          <zn-data-table>
+            <table>
+              <thead>
+                <tr>
+                  <th>Page</th>
+                  <th>Views</th>
+                  <th>Bounce</th>
+                  <th>Avg. Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>/products</td>
+                  <td>24,521</td>
+                  <td>35.2%</td>
+                  <td>3:42</td>
+                </tr>
+                <tr>
+                  <td>/pricing</td>
+                  <td>18,347</td>
+                  <td>28.1%</td>
+                  <td>5:15</td>
+                </tr>
+                <tr>
+                  <td>/features</td>
+                  <td>15,892</td>
+                  <td>42.3%</td>
+                  <td>2:58</td>
+                </tr>
+                <tr>
+                  <td>/blog</td>
+                  <td>12,456</td>
+                  <td>55.8%</td>
+                  <td>4:21</td>
+                </tr>
+                <tr>
+                  <td>/contact</td>
+                  <td>8,234</td>
+                  <td>22.4%</td>
+                  <td>2:12</td>
+                </tr>
+              </tbody>
+            </table>
+          </zn-data-table>
+        </zn-panel>
+        <zn-panel caption="Real-time Activity">
+          <div slot="actions">
+            <zn-status-indicator color="success">Live</zn-status-indicator>
+          </div>
+          <zn-sp divide no-gap>
+            <zn-item label="User from San Francisco viewed /products" description="Just now">
+              <zn-icon slot="prefix" src="visibility"></zn-icon>
+            </zn-item>
+            <zn-item label="User from New York completed purchase" description="2 seconds ago">
+              <zn-icon slot="prefix" src="shopping_cart" style="color: var(--zn-color-success);"></zn-icon>
+            </zn-item>
+            <zn-item label="User from London signed up" description="15 seconds ago">
+              <zn-icon slot="prefix" src="person_add" style="color: var(--zn-color-info);"></zn-icon>
+            </zn-item>
+            <zn-item label="User from Tokyo viewed /pricing" description="23 seconds ago">
+              <zn-icon slot="prefix" src="visibility"></zn-icon>
+            </zn-item>
+            <zn-item label="User from Berlin added item to cart" description="45 seconds ago">
+              <zn-icon slot="prefix" src="add_shopping_cart" style="color: var(--zn-color-warning);"></zn-icon>
+            </zn-item>
+            <zn-item label="User from Sydney viewed /features" description="1 minute ago">
+              <zn-icon slot="prefix" src="visibility"></zn-icon>
+            </zn-item>
+          </zn-sp>
+        </zn-panel>
+      </zn-cols>
+    </div>
+  </zn-sp>
+</zn-pane>
+```
+
+**Components demonstrated:** `zn-chart`, `zn-stat`, `zn-datepicker`, `zn-data-table`, `zn-panel`, `zn-cols`, `zn-item`, `zn-status-indicator`
diff --git a/docs/pages/examples/analytics/report-builder.md b/docs/pages/examples/analytics/report-builder.md
@@ -0,0 +1,178 @@
+---
+meta:
+  title: Report Builder
+  description: Custom report builder with query interface and chart preview.
+fullWidth: true
+---
+
+# Report Builder
+
+A custom report creation interface with query builder, chart selection, and live preview. Demonstrates `zn-query-builder`, chart configuration, and builder patterns.
+
+```html:preview
+<zn-pane>
+  <zn-sp flush>
+    <!-- Header -->
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: var(--zn-spacing-md); border-bottom: 1px solid var(--zn-color-neutral-200);">
+      <div style="display: flex; align-items: center; gap: var(--zn-spacing-md);">
+        <zn-button icon="arrow_back" color="transparent" size="small"></zn-button>
+        <div>
+          <h2 style="margin: 0;">New Report</h2>
+          <span style="color: var(--zn-text-secondary);">Untitled Report</span>
+        </div>
+      </div>
+      <div style="display: flex; gap: var(--zn-spacing-sm);">
+        <zn-button color="secondary">Save Draft</zn-button>
+        <zn-button icon="download">Export</zn-button>
+      </div>
+    </div>
+
+    <zn-sidebar>
+      <!-- Configuration Panel -->
+      <div slot="side" style="padding: var(--zn-spacing-md); border-right: 1px solid var(--zn-color-neutral-200);">
+        <zn-sp>
+          <zn-panel caption="Data Source">
+            <zn-select label="Select data" value="orders">
+              <zn-option value="orders">Orders</zn-option>
+              <zn-option value="customers">Customers</zn-option>
+              <zn-option value="products">Products</zn-option>
+              <zn-option value="traffic">Website Traffic</zn-option>
+            </zn-select>
+          </zn-panel>
+
+          <zn-panel caption="Time Range">
+            <zn-sp>
+              <zn-select label="Period" value="last30">
+                <zn-option value="last7">Last 7 days</zn-option>
+                <zn-option value="last30">Last 30 days</zn-option>
+                <zn-option value="last90">Last 90 days</zn-option>
+                <zn-option value="ytd">Year to date</zn-option>
+                <zn-option value="custom">Custom range</zn-option>
+              </zn-select>
+              <zn-select label="Granularity" value="day">
+                <zn-option value="hour">Hourly</zn-option>
+                <zn-option value="day">Daily</zn-option>
+                <zn-option value="week">Weekly</zn-option>
+                <zn-option value="month">Monthly</zn-option>
+              </zn-select>
+            </zn-sp>
+          </zn-panel>
+
+          <zn-panel caption="Metrics">
+            <zn-checkbox-group>
+              <zn-checkbox value="revenue" checked>Revenue</zn-checkbox>
+              <zn-checkbox value="orders" checked>Order Count</zn-checkbox>
+              <zn-checkbox value="aov">Avg. Order Value</zn-checkbox>
+              <zn-checkbox value="customers">Customers</zn-checkbox>
+              <zn-checkbox value="units">Units Sold</zn-checkbox>
+            </zn-checkbox-group>
+          </zn-panel>
+
+          <zn-panel caption="Group By">
+            <zn-select label="Dimension" value="channel">
+              <zn-option value="none">No grouping</zn-option>
+              <zn-option value="channel">Sales Channel</zn-option>
+              <zn-option value="product">Product Category</zn-option>
+              <zn-option value="region">Region</zn-option>
+              <zn-option value="customer">Customer Type</zn-option>
+            </zn-select>
+          </zn-panel>
+
+          <zn-panel caption="Visualization">
+            <zn-sp>
+              <div>
+                <label style="display: block; margin-bottom: var(--zn-spacing-xs); font-weight: 500;">Chart Type</label>
+                <zn-button-group>
+                  <zn-button size="small" icon="show_chart" color="secondary"></zn-button>
+                  <zn-button size="small" icon="bar_chart" color="transparent"></zn-button>
+                  <zn-button size="small" icon="pie_chart" color="transparent"></zn-button>
+                  <zn-button size="small" icon="table_chart" color="transparent"></zn-button>
+                </zn-button-group>
+              </div>
+              <zn-item label="Show trend line" description="Display trend overlay">
+                <zn-toggle slot="actions" checked></zn-toggle>
+              </zn-item>
+              <zn-item label="Show data labels" description="Display values on chart">
+                <zn-toggle slot="actions"></zn-toggle>
+              </zn-item>
+            </zn-sp>
+          </zn-panel>
+        </zn-sp>
+      </div>
+
+      <!-- Main Preview Area -->
+      <zn-container padded style="background: var(--zn-color-neutral-50);">
+        <zn-sp>
+          <!-- Filters Section -->
+          <zn-panel caption="Filters">
+            <zn-query-builder>
+              <zn-query-builder-group>
+                <zn-query-builder-rule>
+                  <zn-select slot="field" value="status" size="small">
+                    <zn-option value="status">Order Status</zn-option>
+                    <zn-option value="channel">Channel</zn-option>
+                    <zn-option value="amount">Amount</zn-option>
+                  </zn-select>
+                  <zn-select slot="operator" value="equals" size="small">
+                    <zn-option value="equals">equals</zn-option>
+                    <zn-option value="not_equals">not equals</zn-option>
+                    <zn-option value="contains">contains</zn-option>
+                  </zn-select>
+                  <zn-select slot="value" value="completed" size="small">
+                    <zn-option value="completed">Completed</zn-option>
+                    <zn-option value="pending">Pending</zn-option>
+                    <zn-option value="cancelled">Cancelled</zn-option>
+                  </zn-select>
+                </zn-query-builder-rule>
+                <zn-query-builder-rule>
+                  <zn-select slot="field" value="amount" size="small">
+                    <zn-option value="status">Order Status</zn-option>
+                    <zn-option value="channel">Channel</zn-option>
+                    <zn-option value="amount">Amount</zn-option>
+                  </zn-select>
+                  <zn-select slot="operator" value="greater" size="small">
+                    <zn-option value="equals">equals</zn-option>
+                    <zn-option value="greater">greater than</zn-option>
+                    <zn-option value="less">less than</zn-option>
+                  </zn-select>
+                  <zn-input slot="value" type="number" value="100" size="small" style="width: 100px;"></zn-input>
+                </zn-query-builder-rule>
+              </zn-query-builder-group>
+            </zn-query-builder>
+          </zn-panel>
+
+          <!-- Chart Preview -->
+          <zn-panel caption="Preview" description="Revenue and Orders by Sales Channel">
+            <zn-chart
+              type="line"
+              height="350"
+              series='[{"name": "Revenue", "data": [12500, 14200, 11800, 15600, 18200, 16500, 19800, 22100, 20500, 24200, 21800, 25500, 23200, 27800, 25100, 29500, 26800, 31200, 28500, 33500, 30200, 35800, 32500, 38200, 34800, 40500, 36200, 42800, 38500, 45200]}, {"name": "Orders", "data": [85, 92, 78, 105, 118, 108, 132, 145, 138, 158, 148, 168, 155, 182, 172, 195, 178, 208, 192, 225, 205, 242, 218, 258, 235, 275, 248, 292, 265, 310]}]'
+              categories='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"]'>
+            </zn-chart>
+          </zn-panel>
+
+          <!-- Summary Stats -->
+          <zn-cols layout="1,1,1,1">
+            <zn-stat caption="Total Revenue" value="$847,500"></zn-stat>
+            <zn-stat caption="Total Orders" value="5,847"></zn-stat>
+            <zn-stat caption="Avg. Order Value" value="$145"></zn-stat>
+            <zn-stat caption="Growth" value="+24.5%" trend="up"></zn-stat>
+          </zn-cols>
+
+          <!-- Export Options -->
+          <zn-panel caption="Export Options">
+            <div style="display: flex; gap: var(--zn-spacing-md); flex-wrap: wrap;">
+              <zn-button color="secondary" icon="picture_as_pdf">Export PDF</zn-button>
+              <zn-button color="secondary" icon="grid_on">Export CSV</zn-button>
+              <zn-button color="secondary" icon="image">Export PNG</zn-button>
+              <zn-button color="secondary" icon="schedule">Schedule Report</zn-button>
+            </div>
+          </zn-panel>
+        </zn-sp>
+      </zn-container>
+    </zn-sidebar>
+  </zn-sp>
+</zn-pane>
+```
+
+**Components demonstrated:** `zn-query-builder`, `zn-query-builder-group`, `zn-query-builder-rule`, `zn-chart`, `zn-stat`, `zn-select`, `zn-checkbox-group`, `zn-toggle`, `zn-button-group`, `zn-sidebar`, `zn-panel`
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ _site @@
     .cache
     dist
     node_modules
+    .worktrees