@santi020k/lumen 3.0.1 → 4.0.0

package/templates/elements/auth-onboarding/src/lumen/auth-onboarding.html

@@ -0,0 +1,79 @@
+<link rel="stylesheet" href="./lumen-template.css" />
+
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<main class="lumen-template lumen-template__form-shell">
+  <lumen-card class="lumen-template__form">
+    <lumen-stepper role="list" aria-label="Setup steps">
+      <div class="ui-stepper__step" data-state="complete" role="listitem">
+        <span class="ui-stepper__marker">1</span>
+        <span class="ui-stepper__content"><span class="ui-stepper__title">Account</span></span>
+      </div>
+      <div aria-current="step" class="ui-stepper__step" data-state="current" role="listitem">
+        <span class="ui-stepper__marker">2</span>
+        <span class="ui-stepper__content"><span class="ui-stepper__title">Workspace</span></span>
+      </div>
+      <div class="ui-stepper__step" data-state="upcoming" role="listitem">
+        <span class="ui-stepper__marker">3</span>
+        <span class="ui-stepper__content"><span class="ui-stepper__title">Preferences</span></span>
+      </div>
+      <div class="ui-stepper__step" data-state="upcoming" role="listitem">
+        <span class="ui-stepper__marker">4</span>
+        <span class="ui-stepper__content"><span class="ui-stepper__title">Invite</span></span>
+      </div>
+    </lumen-stepper>
+    <header><p class="lumen-template__muted">Step 2 of 4</p><h1>Create your workspace</h1><p class="lumen-template__muted">We’ll prepare the right starting point.</p></header>
+    <form class="lumen-template__form">
+      <lumen-field class="lumen-template__field"><label for="workspace-name">Workspace name</label><lumen-input id="workspace-name" name="workspace" placeholder="Northstar Labs" required></lumen-input></lumen-field>
+      <lumen-field class="lumen-template__field"><label for="work-email">Work email</label><lumen-input aria-invalid="true" id="work-email" name="email" type="email" value="maya@example" required></lumen-input><lumen-alert role="alert" variant="destructive">Enter a complete email address.</lumen-alert></lumen-field>
+      <fieldset class="lumen-template__choices"><legend>What are you setting up?</legend><label class="lumen-template__choice"><input checked name="intent" type="radio" value="team" /> A team workspace</label><label class="lumen-template__choice"><input name="intent" type="radio" value="personal" /> A personal workspace</label></fieldset>
+      <label><lumen-checkbox checked name="updates" value="updates"></lumen-checkbox> Send occasional onboarding tips</label>
+      <div><div class="lumen-template__section-header"><span>Setup progress</span><strong>50%</strong></div><lumen-progress aria-label="Setup is 50% complete" value="50"></lumen-progress></div>
+      <div class="lumen-template__actions"><lumen-button variant="ghost">Back</lumen-button><lumen-button type="submit">Continue</lumen-button></div>
+    </form>
+  </lumen-card>
+  <section class="lumen-login-examples" aria-labelledby="login-examples-title">
+    <header>
+      <p>Returning members</p>
+      <h2 id="login-examples-title">A familiar way back in.</h2>
+      <p>Email codes and passkeys, composed with Lumen. These visual examples do not send codes or sign you in.</p>
+    </header>
+    <lumen-grid class="lumen-login-examples__grid">
+      <lumen-card class="lumen-login-examples__card">
+        <h3>Welcome back</h3>
+        <p>Use a saved passkey or receive a code by email.</p>
+        <lumen-button disabled type="button">Sign in with a passkey</lumen-button>
+        <lumen-field>
+          <label for="login-email">Email address</label>
+          <lumen-input autocomplete="email" id="login-email" name="login-email" readonly type="email" value="member@example.com"></lumen-input>
+        </lumen-field>
+        <lumen-button disabled type="button">Send sign-in code</lumen-button>
+        <p>No password to remember.</p>
+      </lumen-card>
+      <lumen-card class="lumen-login-examples__card">
+        <h3>Check your inbox</h3>
+        <p>If this address can sign in, a code will arrive shortly.</p>
+        <lumen-field>
+          <label for="login-code">Email code</label>
+          <lumen-input aria-describedby="login-code-hint" autocomplete="one-time-code" id="login-code" inputmode="numeric" name="login-code" placeholder="Enter your code" readonly></lumen-input>
+          <p id="login-code-hint">Paste the complete code from your email.</p>
+        </lumen-field>
+        <lumen-button disabled type="button">Verify and continue</lumen-button>
+        <lumen-button disabled type="button" variant="outline">Resend code</lumen-button>
+        <p>Entered the wrong address? Return to email sign-in.</p>
+      </lumen-card>
+      <lumen-card class="lumen-login-examples__card">
+        <h3>Try another way</h3>
+        <lumen-alert variant="destructive">Passkey sign-in was canceled. You can try again or request a code by email.</lumen-alert>
+        <p>You can still use email when your passkey is unavailable.</p>
+        <lumen-button disabled type="button">Try passkey again</lumen-button>
+        <lumen-button disabled type="button" variant="outline">Use an email code</lumen-button>
+        <p>Your existing account and workspace stay the same.</p>
+      </lumen-card>
+    </lumen-grid>
+  </section>
+</main>

package/templates/elements/command-center/src/lumen/command-center.html

@@ -0,0 +1,15 @@
+<section data-product-block="command" aria-label="Workspace commands">
+  <lumen-typography><h2>What would you like to do?</h2><p>Search with the keyboard, then choose a command.</p></lumen-typography>
+  <lumen-command><lumen-input type="search" aria-label="Search workspace commands" placeholder="Search commands…" ></lumen-input>
+    <button data-ui-command-item data-workspace-command="search" type="button">Search project documentation</button>
+    <button data-ui-command-item data-workspace-command="create" type="button">Create a task draft</button>
+    <button data-ui-command-item data-workspace-command="review" type="button">Review pending proposals</button>
+  </lumen-command><p role="status" data-block-status>Choose a command.</p>
+</section>
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements'
+  import { mountProductBlocks } from './product-blocks.js'
+  defineLumenElements()
+  const cleanup = mountProductBlocks(document)
+  window.addEventListener('pagehide', cleanup, { once: true })
+</script>

package/templates/elements/commerce-dashboard/src/lumen/commerce-dashboard.html

@@ -0,0 +1,24 @@
+<link rel="stylesheet" href="./lumen-template.css" />
+
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+
+  const sales = document.querySelector('#commerce-sales')
+  const sources = document.querySelector('#commerce-sources')
+
+  if (sales) sales.series = [{ data: [{ x: 'Mon', y: 11200 }, { x: 'Tue', y: 13800 }, { x: 'Wed', y: 12600 }, { x: 'Thu', y: 15400 }, { x: 'Fri', y: 16800 }], id: 'sales', label: 'Sales', tone: 'brand' }]
+  if (sources) sources.series = { data: [{ x: 'Online', y: 812 }, { x: 'Marketplace', y: 286 }, { x: 'POS', y: 186 }], id: 'orders', label: 'Orders' }
+</script>
+
+<div class="lumen-template lumen-template__shell">
+  <lumen-sidebar class="lumen-template__sidebar"><strong>Mercury Commerce</strong><nav aria-label="Commerce"><a aria-current="page" href="#overview">Overview</a><a href="#orders">Orders</a><a href="#inventory">Inventory</a></nav></lumen-sidebar>
+  <main class="lumen-template__main" id="overview">
+    <header class="lumen-template__header"><div><lumen-badge variant="outline">Store overview</lumen-badge><h1>Commerce command center</h1><p>Sales, fulfillment, and inventory risk.</p></div><lumen-button>Add product</lumen-button></header>
+    <section class="lumen-template__metrics" aria-label="Commerce metrics"><lumen-card class="lumen-template__metric"><lumen-stat label="Gross sales" value="$92,840"></lumen-stat><lumen-badge variant="success">+18.6%</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Orders" value="1,284"></lumen-stat><lumen-badge variant="success">+7.4%</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Average order" value="$72.31"></lumen-stat><lumen-badge variant="success">+$6.20</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Return rate" value="2.1%"></lumen-stat><lumen-badge variant="success">-0.4%</lumen-badge></lumen-card></section>
+    <section class="lumen-template__grid"><lumen-bar-chart heading="Sales this week" id="commerce-sales"></lumen-bar-chart><lumen-pie-chart center-label="orders" center-value="1,284" heading="Order sources" id="commerce-sources"></lumen-pie-chart></section>
+    <section class="lumen-template__grid" id="inventory"><lumen-card class="lumen-template__panel"><h2>Fulfillment</h2><lumen-stat label="Orders ready" value="42"></lumen-stat><lumen-progress aria-label="42 of 58 orders fulfilled" max="58" value="42"></lumen-progress></lumen-card><lumen-card class="lumen-template__panel"><h2>Inventory signals</h2><ul class="lumen-template__list"><li>3 products below safety stock</li><li>8 transfers arriving this week</li><li>94% inventory accuracy</li></ul></lumen-card></section>
+    <lumen-card class="lumen-template__panel" id="orders"><div class="lumen-template__section-header"><h2>Recent orders</h2><lumen-button variant="ghost">View all</lumen-button></div><lumen-table class="lumen-template__table"><table><thead><tr><th>Order</th><th>Customer</th><th>Status</th><th>Total</th></tr></thead><tbody><tr><td>#10482</td><td>Nora Singh</td><td><lumen-badge variant="success">Completed</lumen-badge></td><td>$148.00</td></tr><tr><td>#10481</td><td>Theo Martin</td><td><lumen-badge variant="warning">Pending</lumen-badge></td><td>$84.50</td></tr></tbody></table></lumen-table></lumen-card>
+  </main>
+</div>

package/templates/elements/content-flow-actions/src/lumen/content-flow-actions.html

@@ -0,0 +1,11 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+  defineLumenElements(['Stack', 'Button'])
+</script>
+
+<lumen-stack role="group" aria-label="Changes" gap="related">
+  <p role="status">You have unsaved changes.</p>
+  <lumen-stack direction="horizontal" gap="related" wrap>
+    <lumen-button>Save changes</lumen-button><lumen-button variant="secondary">Discard changes</lumen-button>
+  </lumen-stack>
+</lumen-stack>

package/templates/elements/content-flow-header/src/lumen/content-flow-header.html

@@ -0,0 +1,15 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+  defineLumenElements(['Stack', 'Typography', 'Button'])
+</script>
+
+<lumen-stack gap="group" role="region" aria-labelledby="workspace-heading">
+  <lumen-typography>
+    <h1 id="workspace-heading">Workspace settings</h1>
+    <p>Manage your team’s access and notification preferences.</p>
+  </lumen-typography>
+  <lumen-stack direction="horizontal" gap="related" wrap>
+    <lumen-button>Invite a teammate</lumen-button>
+    <lumen-button variant="secondary">View activity</lumen-button>
+  </lumen-stack>
+</lumen-stack>

package/templates/elements/content-flow-list/src/lumen/content-flow-list.html

@@ -0,0 +1,14 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+  defineLumenElements(['Card', 'CardHeader', 'CardTitle', 'CardContent', 'Stack', 'Badge'])
+</script>
+
+<lumen-card role="region" aria-labelledby="members-heading">
+  <lumen-card-header><lumen-card-title id="members-heading" role="heading" aria-level="2">Team members</lumen-card-title></lumen-card-header>
+  <lumen-card-content>
+    <lumen-stack role="list" gap="group">
+      <lumen-stack role="listitem" direction="horizontal" align="center" justify="between" gap="related" wrap><span>Alex Morgan — Workspace owner</span><lumen-badge>Active</lumen-badge></lumen-stack>
+      <lumen-stack role="listitem" direction="horizontal" align="center" justify="between" gap="related" wrap><span>Jamie Lee — Design and operations</span><lumen-badge variant="secondary">Invited</lumen-badge></lumen-stack>
+    </lumen-stack>
+  </lumen-card-content>
+</lumen-card>

package/templates/elements/content-flow-settings/src/lumen/content-flow-settings.html

@@ -0,0 +1,18 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+  defineLumenElements(['Card', 'CardHeader', 'CardTitle', 'CardDescription', 'CardContent', 'CardFooter', 'Stack', 'Field', 'Label', 'Input', 'Button'])
+</script>
+
+<lumen-card role="region" aria-labelledby="notification-heading">
+  <lumen-card-header>
+    <lumen-card-title id="notification-heading" role="heading" aria-level="2">Notifications</lumen-card-title>
+    <lumen-card-description>Choose where your team receives updates.</lumen-card-description>
+  </lumen-card-header>
+  <lumen-card-content>
+    <lumen-stack gap="group">
+      <lumen-field><lumen-label id="team-name-label">Team name</lumen-label><lumen-input id="team-name" name="team" aria-labelledby="team-name-label" autocomplete="organization"></lumen-input></lumen-field>
+      <lumen-field><lumen-label id="team-email-label">Team email</lumen-label><lumen-input id="team-email" name="email" aria-labelledby="team-email-label" type="email" autocomplete="email"></lumen-input></lumen-field>
+    </lumen-stack>
+  </lumen-card-content>
+  <lumen-card-footer><lumen-button>Save preferences</lumen-button><lumen-button variant="secondary">Discard changes</lumen-button></lumen-card-footer>
+</lumen-card>

package/templates/elements/data-collections/src/lumen/data-collections.html

@@ -0,0 +1,31 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<section class="lumen-recipe lumen-recipe--data-collections">
+  <lumen-command>
+    <input type="search" placeholder="Filter records" />
+    <button data-ui-command-item type="button">Open docs</button>
+  </lumen-command>
+  <lumen-data-table>
+    <table>
+      <thead><tr><th>Name</th><th>Status</th></tr></thead>
+      <tbody><tr><td>Docs</td><td>Ready</td></tr></tbody>
+    </table>
+  </lumen-data-table>
+  <lumen-tree aria-label="Files">
+    <div role="treeitem" aria-expanded="true">src</div>
+    <div role="treeitem">index.ts</div>
+  </lumen-tree>
+  <lumen-tree-grid aria-label="Project status">
+    <div role="row"><span role="gridcell">Docs</span><span role="gridcell">Ready</span></div>
+  </lumen-tree-grid>
+  <lumen-virtual-list data-ui-item-size="44" style="--ui-list-height: 12rem">
+    <div>Row 1</div>
+    <div>Row 2</div>
+    <div>Row 3</div>
+  </lumen-virtual-list>
+  <lumen-pagination><a href="?page=1">Previous</a><a href="?page=2">Next</a></lumen-pagination>
+</section>

package/templates/elements/feature-preview/src/lumen/feature-preview.html

@@ -0,0 +1,13 @@
+<section data-product-block="feature" aria-label="Feature preview">
+  <lumen-typography><h2>From idea to delivery</h2></lumen-typography>
+  <lumen-stack direction="horizontal" gap="related" role="group" aria-label="Preview a workflow stage"><lumen-button data-feature="plan" aria-pressed="true">Plan</lumen-button><lumen-button data-feature="review" aria-pressed="false">Review</lumen-button><lumen-button data-feature="ship" aria-pressed="false">Ship</lumen-button></lumen-stack>
+  <lumen-motion-group><lumen-card data-ui-motion-key="plan" data-feature-panel="plan"><lumen-visual-effect variant="mesh"><lumen-typography><h3>Plan</h3><p>Bring the next three tasks into focus.</p></lumen-typography></lumen-visual-effect></lumen-card><lumen-card hidden data-ui-motion-key="review" data-feature-panel="review"><lumen-visual-effect variant="mesh"><lumen-typography><h3>Review</h3><p>Compare a proposal before deciding.</p></lumen-typography></lumen-visual-effect></lumen-card><lumen-card hidden data-ui-motion-key="ship" data-feature-panel="ship"><lumen-visual-effect variant="mesh"><lumen-typography><h3>Ship</h3><p>Check the release evidence before publishing.</p></lumen-typography></lumen-visual-effect></lumen-card></lumen-motion-group>
+  <p role="status" data-block-status>Previewing plan.</p>
+</section>
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements'
+  import { mountProductBlocks } from './product-blocks.js'
+  defineLumenElements()
+  const cleanup = mountProductBlocks(document)
+  window.addEventListener('pagehide', cleanup, { once: true })
+</script>

package/templates/elements/guided-onboarding/src/lumen/guided-onboarding.html

@@ -0,0 +1,16 @@
+<section data-product-block="onboarding" aria-label="Workspace setup">
+  <lumen-card><lumen-stack gap="group"><lumen-typography><h2>Prepare your workspace</h2><p>This draft stays local until your application handles completion.</p></lumen-typography>
+  <form method="post"><lumen-stack gap="group">
+    <section data-onboarding-step="0"><lumen-typography><h3 tabindex="-1">Workspace</h3></lumen-typography><lumen-label id="workspace-draft-name-label">Workspace name</lumen-label><lumen-input id="workspace-draft-name" aria-labelledby="workspace-draft-name-label" name="workspace" data-workspace-name required maxlength="80" ></lumen-input></section>
+    <section data-onboarding-step="1" hidden><lumen-typography><h3 tabindex="-1">Review your draft</h3><p>Workspace: <span data-workspace-review></span></p></lumen-typography></section>
+    <section data-onboarding-step="2" hidden><lumen-typography><h3 tabindex="-1">Ready</h3><p>Workspace draft completed.</p></lumen-typography><lumen-button data-onboarding-edit type="button">Edit draft</lumen-button></section>
+    <lumen-stack direction="horizontal" gap="related"><lumen-button data-onboarding-back type="button" hidden variant="secondary">Back</lumen-button><lumen-button data-onboarding-next disabled type="submit">Continue</lumen-button></lumen-stack>
+  </lumen-stack></form><p role="status" data-block-status>Step 1 of 3.</p></lumen-stack></lumen-card>
+</section>
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements'
+  import { mountProductBlocks } from './product-blocks.js'
+  defineLumenElements()
+  const cleanup = mountProductBlocks(document)
+  window.addEventListener('pagehide', cleanup, { once: true })
+</script>

package/templates/elements/interactive-pricing/src/lumen/interactive-pricing.html

@@ -0,0 +1,13 @@
+<section data-product-block="pricing" aria-label="Example pricing">
+  <lumen-typography><h2>A plan for your next project</h2><p>Illustrative prices. Connect selections to your own checkout.</p></lumen-typography>
+  <lumen-stack direction="horizontal" gap="related" role="group" aria-label="Billing period"><lumen-button data-billing="monthly" aria-pressed="true">Monthly</lumen-button><lumen-button data-billing="annual" aria-pressed="false">Annual</lumen-button></lumen-stack>
+  <lumen-grid columns="auto"><lumen-card><lumen-visual-effect variant="border"><lumen-typography><h3>Starter</h3><p data-monthly="10" data-annual="96">$10 / month</p></lumen-typography><lumen-button data-plan="starter">Choose starter</lumen-button></lumen-visual-effect></lumen-card><lumen-card><lumen-visual-effect variant="mesh"><lumen-typography><h3>Team</h3><p data-monthly="24" data-annual="240">$24 / month</p></lumen-typography><lumen-button data-plan="team">Choose team</lumen-button></lumen-visual-effect></lumen-card></lumen-grid>
+  <p role="status" data-block-status>Select a plan to compare billing.</p>
+</section>
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements'
+  import { mountProductBlocks } from './product-blocks.js'
+  defineLumenElements()
+  const cleanup = mountProductBlocks(document)
+  window.addEventListener('pagehide', cleanup, { once: true })
+</script>

package/templates/elements/media-workspace/src/lumen/media-workspace.html

@@ -0,0 +1,57 @@
+<!-- Load @santi020k/lumen-elements/styles.css, register its elements, and import media-workspace.css once. -->
+<section class="lumen-media-workspace" data-media-workspace data-lumen-preset="studio" aria-label="Photo workspace">
+  <h2>Photo workspace</h2>
+  <div class="lumen-media-workspace__layout">
+    <div class="lumen-media-workspace__preview" role="group" aria-label="Image preview">
+      <lumen-image-comparison label="Compare the treatment" before-label="Original" after-label="Adjusted" mode="reveal" ratio="1.6">
+        <img slot="before" src="/original.jpg" alt="Original photo" width="960" height="600">
+        <img slot="after" src="/adjusted.jpg" alt="Adjusted photo" width="960" height="600">
+      </lumen-image-comparison>
+      <lumen-media-viewport label="Inspect the photo" ratio="1.6" hidden>
+        <img src="/adjusted.jpg" alt="Adjusted photo" width="960" height="600">
+      </lumen-media-viewport>
+    </div>
+    <lumen-card class="lumen-media-workspace__inspector" aria-label="Image adjustments">
+      <lumen-field data-media-adjustment="exposure" data-default-value="0">
+        <lumen-label for="media-exposure">Exposure</lumen-label>
+        <output id="media-exposure-output" for="media-exposure">0 EV</output>
+        <lumen-badge data-adjustment-modified hidden>Modified</lumen-badge>
+        <lumen-slider id="media-exposure" aria-label="Exposure" aria-describedby="media-exposure-output" aria-valuetext="0 EV" min="-1" max="1" step="0.1" value="0"></lumen-slider>
+        <lumen-button variant="ghost" data-adjustment-reset disabled>Reset exposure</lumen-button>
+      </lumen-field>
+    </lumen-card>
+  </div>
+  <lumen-card glass="subtle" class="lumen-media-workspace__tools">
+    <lumen-toolbar aria-label="Preview tools">
+      <lumen-button variant="outline" data-comparison-mode="reveal" aria-pressed="true">Reveal</lumen-button>
+      <lumen-button variant="outline" data-comparison-mode="side-by-side" aria-pressed="false">Side by side</lumen-button>
+      <lumen-button variant="outline" data-comparison-mode="before" aria-pressed="false">Original</lumen-button>
+      <lumen-button variant="outline" data-comparison-mode="after" aria-pressed="false">Adjusted</lumen-button>
+      <lumen-button variant="outline" data-inspect aria-pressed="false">Inspect details</lumen-button>
+    </lumen-toolbar>
+  </lumen-card>
+  <lumen-media-filmstrip label="Photo collection" selection-label="1 photo selected">
+    <li data-media-item="photo-1">
+      <lumen-media-thumbnail label="Landscape" media-id="photo-1" selected order="1"><img src="/adjusted.jpg" alt="" width="960" height="600"></lumen-media-thumbnail>
+      <lumen-button variant="outline" data-media-move="earlier" data-media-id="photo-1" disabled>Move earlier</lumen-button>
+      <lumen-button variant="outline" data-media-move="later" data-media-id="photo-1">Move later</lumen-button>
+    </li>
+    <li data-media-item="photo-2">
+      <lumen-media-thumbnail label="Original landscape" media-id="photo-2" order="2"><img src="/original.jpg" alt="" width="960" height="600"></lumen-media-thumbnail>
+      <lumen-button variant="outline" data-media-move="earlier" data-media-id="photo-2">Move earlier</lumen-button>
+      <lumen-button variant="outline" data-media-move="later" data-media-id="photo-2" disabled>Move later</lumen-button>
+    </li>
+  </lumen-media-filmstrip>
+  <lumen-card class="lumen-media-workspace__bottom" data-media-processing>
+    <p role="status" data-processing-message>Ready to prepare a preview.</p>
+    <lumen-progress data-processing-progress aria-label="Preview progress" hidden></lumen-progress>
+    <lumen-error-state data-processing-error role="status" aria-live="polite" hidden>
+      <h3 data-processing-error-title></h3>
+      <p data-processing-recovery></p>
+    </lumen-error-state>
+    <lumen-button data-media-processing-action="start">Prepare preview</lumen-button>
+    <lumen-button data-media-processing-action="cancel" variant="outline" hidden>Cancel preparation</lumen-button>
+    <lumen-button data-media-processing-action="retry" hidden>Try again</lumen-button>
+  </lumen-card>
+</section>
+<script type="module" src="./media-workspace.js"></script>

package/templates/elements/media-workspace/src/lumen/media-workspace.ts

@@ -0,0 +1,163 @@
+// The application accepts requests and renders canonical state; this bridge owns no services.
+const updatePreview = (workspace: HTMLElement, control: HTMLElement) => {
+  const comparison = workspace.querySelector<HTMLElement>('lumen-image-comparison')
+  const viewport = workspace.querySelector<HTMLElement>('lumen-media-viewport')
+
+  if (!comparison || !viewport) return
+
+  const inspect = control.hasAttribute('data-inspect')
+
+  comparison.hidden = inspect
+
+  viewport.hidden = !inspect
+
+  const mode = control.dataset.comparisonMode
+
+  if (mode) comparison.setAttribute('mode', mode)
+
+  for (const button of workspace.querySelectorAll<HTMLElement>('[data-comparison-mode], [data-inspect]')) {
+    button.setAttribute('aria-pressed', String(button === control))
+  }
+}
+
+const updateAdjustment = (field: HTMLElement, slider: HTMLInputElement, announce: boolean) => {
+  const output = field.querySelector('output')
+  const badge = field.querySelector<HTMLElement>('[data-adjustment-modified]')
+  const reset = field.querySelector<HTMLElement>('[data-adjustment-reset]')
+
+  if (!output || !badge || !reset) return
+
+  const value = slider.valueAsNumber
+
+  if (!Number.isFinite(value)) return
+
+  output.textContent = `${value} ${field.dataset.unit ?? 'EV'}`
+
+  slider.ariaValueText = output.textContent
+
+  badge.hidden = value === Number(field.dataset.defaultValue)
+
+  reset.toggleAttribute('disabled', slider.disabled || badge.hidden)
+
+  if (announce) field.dispatchEvent(new CustomEvent('ui:adjustment-change', {
+    bubbles: true, detail: { id: field.dataset.mediaAdjustment, value }
+  }))
+}
+
+for (const workspace of document.querySelectorAll<HTMLElement>('[data-media-workspace]')) {
+  workspace.addEventListener('click', event => {
+    if (!(event.target instanceof Element)) return
+
+    const control = event.target.closest<HTMLElement>('lumen-button')
+
+    if (!control || control.hasAttribute('disabled') || !workspace.contains(control)) return
+
+    if (control.dataset.comparisonMode || control.hasAttribute('data-inspect')) updatePreview(workspace, control)
+
+    const direction = control.dataset.mediaMove
+
+    if (direction) workspace.dispatchEvent(new CustomEvent('ui:media-move-request', {
+      bubbles: true, detail: { id: control.dataset.mediaId, direction }
+    }))
+
+    const action = control.dataset.mediaProcessingAction
+
+    if (action) workspace.dispatchEvent(new CustomEvent('ui:media-processing-request', {
+      bubbles: true, detail: { action }
+    }))
+  })
+
+  for (const field of workspace.querySelectorAll<HTMLElement>('[data-media-adjustment]')) {
+    const reset = field.querySelector<HTMLElement>('[data-adjustment-reset]')
+
+    field.addEventListener('input', event => {
+      if (event.target instanceof HTMLInputElement && !event.target.disabled) {
+        updateAdjustment(field, event.target, true)
+      }
+    })
+
+    reset?.addEventListener('click', () => {
+      const slider = field.querySelector<HTMLInputElement>('input[type="range"]')
+
+      if (!slider || slider.disabled || reset.hasAttribute('disabled')) return
+
+      slider.value = field.dataset.defaultValue ?? '0'
+
+      updateAdjustment(field, slider, true)
+
+      slider.focus()
+    })
+  }
+}
+// Keep selection canonical and preserve focus by stable media ID after moves. Render job messages
+// through textContent. Keep cancellation pending until acknowledged and ignore stale completions.
+
+export type MediaProcessingState =
+  | { phase: 'idle' | 'cancelled' | 'success', message: string } |
+  { phase: 'pending', message: string, progress: number | null } |
+  { phase: 'error', message: string, recovery: string }
+
+const renderProcessingError = (panel: HTMLElement, state: MediaProcessingState): void => {
+  const error = panel.querySelector<HTMLElement>('[data-processing-error]')
+
+  if (!error) return
+
+  error.hidden = state.phase !== 'error'
+
+  const title = error.querySelector('[data-processing-error-title]')
+  const recovery = error.querySelector('[data-processing-recovery]')
+
+  if (title) title.textContent = state.phase === 'error' ? state.message : ''
+
+  if (recovery) recovery.textContent = state.phase === 'error' ? state.recovery : ''
+}
+
+const renderProcessingProgress = (panel: HTMLElement, state: MediaProcessingState): void => {
+  const progress = panel.querySelector<HTMLElement>('[data-processing-progress]')
+
+  if (!progress) return
+
+  const value = state.phase === 'pending' ? state.progress : null
+  const known = value !== null && Number.isFinite(value)
+
+  progress.hidden = !known
+
+  if (known) progress.setAttribute('value', String(Math.min(100, Math.max(0, value))))
+}
+
+const processingActionVisible = (action: string | undefined, phase: MediaProcessingState['phase']): boolean => {
+  if (action === 'cancel') return phase === 'pending'
+
+  if (action === 'retry') return phase === 'error'
+
+  return action === 'start' && phase !== 'pending' && phase !== 'error'
+}
+
+/** Call after a host transition. The bridge neither starts jobs nor acknowledges cancellation. */
+export const renderMediaProcessing = (workspace: HTMLElement, state: MediaProcessingState): void => {
+  const panel = workspace.querySelector<HTMLElement>('[data-media-processing]')
+
+  if (!panel) return
+
+  panel.dataset.phase = state.phase
+
+  const message = panel.querySelector<HTMLElement>('[data-processing-message]')
+
+  if (message) {
+    message.textContent = state.message
+
+    message.hidden = state.phase === 'error'
+  }
+
+  renderProcessingError(panel, state)
+
+  renderProcessingProgress(panel, state)
+
+  for (const button of panel.querySelectorAll<HTMLElement>('[data-media-processing-action]')) {
+    const visible = processingActionVisible(button.dataset.mediaProcessingAction, state.phase)
+
+    button.hidden = !visible
+
+    button.toggleAttribute('disabled', !visible)
+  }
+}

package/templates/elements/page-header/src/lumen/page-header.html

@@ -0,0 +1,20 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+  defineLumenElements(['Badge', 'Breadcrumb', 'Button', 'Link', 'Stack', 'Typography'])
+</script>
+
+<header aria-labelledby="page-heading">
+  <lumen-stack gap="group">
+    <lumen-breadcrumb><nav aria-label="Breadcrumb"><ol><li><lumen-link><a href="/">Workspace</a></lumen-link></li><li aria-current="page">Portfolio operations</li></ol></nav></lumen-breadcrumb>
+    <lumen-stack direction="horizontal" align="start" justify="between" gap="group" wrap>
+      <lumen-stack gap="related" style="flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere">
+        <lumen-typography><h1 id="page-heading">Portfolio operations</h1><p>Review activity and keep your workspace up to date.</p></lumen-typography>
+        <lumen-badge variant="outline" style="align-self: flex-start">Active</lumen-badge>
+      </lumen-stack>
+      <lumen-stack direction="horizontal" align="center" gap="related" wrap role="group" aria-label="Page actions">
+        <lumen-button type="button">Export report</lumen-button>
+        <lumen-button type="button">Create record</lumen-button>
+      </lumen-stack>
+    </lumen-stack>
+  </lumen-stack>
+</header>

package/templates/elements/project-workspace/src/lumen/project-workspace.html

@@ -0,0 +1,17 @@
+<link rel="stylesheet" href="./lumen-template.css" />
+
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<div class="lumen-template lumen-template__shell">
+  <lumen-sidebar class="lumen-template__sidebar"><strong>Relay Projects</strong><nav aria-label="Projects"><a aria-current="page" href="#overview">Overview</a><a href="#projects">Projects</a><a href="#activity">Activity</a></nav></lumen-sidebar>
+  <main class="lumen-template__main" id="overview">
+    <header class="lumen-template__header"><div><lumen-badge variant="outline">Team delivery</lumen-badge><h1>Team workspace</h1><p>Priorities, delivery health, and next decisions.</p></div><lumen-button>New project</lumen-button></header>
+    <section class="lumen-template__metrics" aria-label="Delivery metrics"><lumen-card class="lumen-template__metric"><lumen-stat label="Open tasks" value="42"></lumen-stat><lumen-badge variant="warning">6 due soon</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Milestones reached" value="18"></lumen-stat><lumen-badge variant="success">+4</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="At-risk projects" value="2"></lumen-stat><lumen-badge variant="destructive">Needs help</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Delivery velocity" value="46 pts"></lumen-stat><lumen-badge variant="success">+6.4%</lumen-badge></lumen-card></section>
+    <section class="lumen-template__grid"><lumen-card class="lumen-template__panel"><h2>Active workstreams</h2><p>Mobile checkout · 72%</p><lumen-progress aria-label="Mobile checkout is 72% complete" value="72"></lumen-progress><p>Billing migration · 54%</p><lumen-progress aria-label="Billing migration is 54% complete" value="54"></lumen-progress></lumen-card><lumen-card class="lumen-template__panel" id="activity"><h2>Recent activity</h2><lumen-timeline><lumen-timeline-item>Amina completed checkout validation</lumen-timeline-item><lumen-timeline-item>Jon reviewed billing retries</lumen-timeline-item><lumen-timeline-item>Nora moved tokens to review</lumen-timeline-item></lumen-timeline></lumen-card></section>
+    <lumen-card class="lumen-template__panel" id="projects"><div class="lumen-template__section-header"><h2>Priority projects</h2><lumen-button variant="ghost">View all</lumen-button></div><lumen-table class="lumen-template__table"><table><thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Progress</th></tr></thead><tbody><tr><td>Mobile checkout</td><td>Amina</td><td><lumen-badge variant="success">Active</lumen-badge></td><td>72%</td></tr><tr><td>Billing migration</td><td>Jon</td><td><lumen-badge variant="destructive">At risk</lumen-badge></td><td>54%</td></tr></tbody></table></lumen-table></lumen-card>
+  </main>
+</div>

package/templates/elements/rich-text-editor/src/lumen/rich-text-editor.html

@@ -0,0 +1,17 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<lumen-rich-text-editor class="lumen-recipe lumen-recipe--rich-text-editor">
+  <div role="toolbar" aria-label="Editor toolbar">
+    <lumen-button-group>
+      <lumen-button data-ui-editor-command="bold" type="button">Bold</lumen-button>
+      <lumen-button data-ui-editor-command="italic" type="button">Italic</lumen-button>
+    </lumen-button-group>
+    <lumen-toggle-group><button data-ui-editor-command="insertUnorderedList" type="button">List</button></lumen-toggle-group>
+  </div>
+  <div contenteditable="true">Draft release notes...</div>
+  <lumen-textarea name="fallback" placeholder="Plain text fallback"></lumen-textarea>
+</lumen-rich-text-editor>

package/templates/elements/saas-admin/src/lumen/saas-admin.html

@@ -0,0 +1,18 @@
+<link rel="stylesheet" href="./lumen-template.css" />
+
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<div class="lumen-template lumen-template__shell">
+  <lumen-sidebar class="lumen-template__sidebar"><strong>Orbit Admin</strong><nav aria-label="Administration"><a aria-current="page" href="#overview">Overview</a><a href="#members">Members</a><a href="#billing">Billing</a></nav></lumen-sidebar>
+  <main class="lumen-template__main" id="overview">
+    <header class="lumen-template__header"><div><lumen-badge variant="outline">Workspace administration</lumen-badge><h1>Good morning, Maya</h1><p>Access, billing, and operational health.</p></div><lumen-button>Invite members</lumen-button></header>
+    <lumen-alert><strong>Quarterly access review is ready.</strong> Confirm eight elevated roles before July 12.</lumen-alert>
+    <section class="lumen-template__metrics" aria-label="Workspace metrics"><lumen-card class="lumen-template__metric"><lumen-stat label="Workspace members" value="248"></lumen-stat><lumen-badge variant="success">+24</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Seat activation" value="91%"></lumen-stat><lumen-badge variant="success">Healthy</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Access reviews" value="8"></lumen-stat><lumen-badge variant="warning">3 pending</lumen-badge></lumen-card><lumen-card class="lumen-template__metric"><lumen-stat label="Availability" value="99.99%"></lumen-stat><lumen-badge variant="success">Normal</lumen-badge></lumen-card></section>
+    <section class="lumen-template__grid" id="billing"><lumen-card class="lumen-template__panel"><h2>Plan utilization</h2><lumen-stat label="Seats used" value="248 / 300"></lumen-stat><lumen-progress aria-label="248 of 300 seats used" max="300" value="248"></lumen-progress></lumen-card><lumen-card class="lumen-template__panel"><h2>Security posture</h2><ul class="lumen-template__list"><li>Single sign-on enforced</li><li>Domain verification complete</li><li>3 recovery codes need rotation</li></ul></lumen-card></section>
+    <lumen-card class="lumen-template__panel" id="members"><div class="lumen-template__section-header"><h2>Recently active members</h2><lumen-search-field aria-label="Search members" placeholder="Search members"></lumen-search-field></div><lumen-table class="lumen-template__table"><table><thead><tr><th>Member</th><th>Team</th><th>Status</th><th>Role</th></tr></thead><tbody><tr><td>Amina Bello</td><td>Design</td><td><lumen-badge variant="success">Active</lumen-badge></td><td>Admin</td></tr><tr><td>Theo Martin</td><td>Success</td><td><lumen-badge variant="warning">Pending</lumen-badge></td><td>Member</td></tr></tbody></table></lumen-table></lumen-card>
+  </main>
+</div>

package/templates/elements/scheduler/src/lumen/scheduler.html

@@ -0,0 +1,27 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<section class="lumen-recipe lumen-recipe--scheduler">
+  <lumen-calendar aria-label="Choose schedule date"></lumen-calendar>
+  <lumen-date-picker aria-label="Jump to date"></lumen-date-picker>
+  <lumen-schedule>
+    <header><h2>Launch week</h2></header>
+    <div data-ui-schedule-grid>
+      <section data-ui-schedule-slot="monday">
+        <article id="schedule-planning" data-ui-draggable="true" data-ui-schedule-event>Planning</article>
+      </section>
+      <section data-ui-schedule-slot="friday">
+        <article id="schedule-ship" data-ui-draggable="true" data-ui-schedule-event>Ship</article>
+      </section>
+    </div>
+  </lumen-schedule>
+  <lumen-agenda>
+    <ol>
+      <li><strong>Design review</strong><span>10:00</span></li>
+      <li><strong>Release notes</strong><span>14:30</span></li>
+    </ol>
+  </lumen-agenda>
+</section>