Upgrade www to kinetic standards lab

Author: SisyphusZheng

.gitignore

@@ -52,6 +52,7 @@ docs/autoflow/cells/*/state.json
 
 # Vite cache
 .vite/
+/.wrangler/
 
 # Generated data modules (typed stubs are tracked as .d.ts)
 www/app/data/_generated-*.ts
@@ -100,4 +101,3 @@ www/.openElement/
 
 # Vite virtual assets
 assets/_virtual_*
-

packages/ui/deno.json

@@ -9,6 +9,7 @@
     "./open-code-block": "./src/open-code-block.tsx",
     "./open-badge": "./src/open-badge.tsx",
     "./open-lab-panel": "./src/open-lab-panel.tsx",
+    "./open-lab-stage": "./src/open-lab-stage.tsx",
     "./open-standards-visual": "./src/open-standards-visual.tsx",
     "./open-layout": "./src/open-layout.tsx",
     "./open-theme-toggle": "./src/open-theme-toggle.tsx",

packages/ui/src/index.ts

@@ -16,6 +16,7 @@
  * - open-code-block: Code block with copy button
  * - open-badge: Open Props status badge
  * - open-lab-panel: Standards-lab artifact/spec panel
+ * - open-lab-stage: Kinetic standards-lab hero primitive
  * - open-standards-visual: Product-art standards diagrams
  * - open-layout: App layout with header, sidebar, footer
  * - open-theme-toggle: Theme toggle Island (Dark/Light)
@@ -50,6 +51,7 @@ export { OpenInput, tagName as openInputTagName } from './open-input.js';
 export { OpenCodeBlock, tagName as openCodeBlockTagName } from './open-code-block.js';
 export { OpenBadge, tagName as openBadgeTagName } from './open-badge.js';
 export { OpenLabPanel, tagName as openLabPanelTagName } from './open-lab-panel.js';
+export { OpenLabStage, tagName as openLabStageTagName } from './open-lab-stage.js';
 export {
   OpenStandardsVisual,
   tagName as openStandardsVisualTagName,

packages/ui/src/manifest.ts

@@ -267,6 +267,8 @@ export const manifest: OpenElementPackageManifest = {
       description: 'Product-art standards diagram for route, package, token, and hero visuals',
       attributes: [
         { name: 'variant', type: 'string', default: '"hero"', description: 'Visual variant' },
+        { name: 'motion', type: 'string', default: '"auto"', description: 'Motion mode' },
+        { name: 'emphasis', type: 'string', default: '"normal"', description: 'Visual emphasis' },
       ],
       cssParts: [],
       openElement: {
@@ -278,6 +280,27 @@ export const manifest: OpenElementPackageManifest = {
         export: 'OpenStandardsVisual',
       },
     },
+    {
+      tagName: 'open-lab-stage',
+      className: 'OpenLabStage',
+      superclassName: 'OpenElement',
+      description: 'Kinetic standards-lab hero stage for product-art pages',
+      attributes: [
+        { name: 'motion', type: 'string', default: '"auto"', description: 'Motion mode' },
+        { name: 'emphasis', type: 'string', default: '"high"', description: 'Stage emphasis' },
+      ],
+      cssParts: [
+        { name: 'stage', description: 'The stage wrapper' },
+      ],
+      openElement: {
+        ssr: true,
+        dsd: true,
+        layer: 'dsd-static',
+        hydrate: 'idle',
+        module: '@openelement/ui/open-lab-stage',
+        export: 'OpenLabStage',
+      },
+    },
     {
       tagName: 'open-dialog',
       className: 'OpenDialog',
@@ -645,6 +668,26 @@ export const manifest: OpenElementPackageManifest = {
       exports: [{ name: 'OpenCodeBlock', path: './open-code-block.js' }],
       declarations: ['open-code-block'],
     },
+    {
+      path: './open-badge.js',
+      exports: [{ name: 'OpenBadge', path: './open-badge.js' }],
+      declarations: ['open-badge'],
+    },
+    {
+      path: './open-lab-panel.js',
+      exports: [{ name: 'OpenLabPanel', path: './open-lab-panel.js' }],
+      declarations: ['open-lab-panel'],
+    },
+    {
+      path: './open-lab-stage.js',
+      exports: [{ name: 'OpenLabStage', path: './open-lab-stage.js' }],
+      declarations: ['open-lab-stage'],
+    },
+    {
+      path: './open-standards-visual.js',
+      exports: [{ name: 'OpenStandardsVisual', path: './open-standards-visual.js' }],
+      declarations: ['open-standards-visual'],
+    },
     {
       path: './open-dialog.js',
       exports: [{ name: 'OpenDialog', path: './open-dialog.js' }],