@santi020k/lumen 3.0.1 → 4.1.0

package/templates/astro/media-workspace/src/lumen/adjustment-controls.astro

@@ -0,0 +1,89 @@
+---
+import { Badge, Button, Field, Label, Slider, Stack } from '@santi020k/lumen-astro'
+
+interface Props {
+  adjustmentId: string
+  label: string
+  value: number
+  defaultValue: number
+  min: number
+  max: number
+  step: number
+  unit?: string
+  locale?: string
+  disabled?: boolean
+  modifiedLabel: string
+  resetLabel: string
+}
+
+declare const Astro: Readonly<{ props: Props, slots: { has: (name: string) => boolean } }>
+
+const { adjustmentId, label, value, defaultValue, min, max, step, unit = '', locale = 'en', disabled = false, modifiedLabel, resetLabel } = Astro.props
+const id = `adjustment-${crypto.randomUUID()}`
+let formatter: Intl.NumberFormat
+
+try {
+  formatter = new Intl.NumberFormat(locale, { maximumFractionDigits: 3 })
+} catch {
+  formatter = new Intl.NumberFormat('en', { maximumFractionDigits: 3 })
+}
+
+const format = (amount: number) => `${formatter.format(amount)}${unit}`
+---
+
+<Field data-media-adjustment={adjustmentId} data-default-value={defaultValue} data-unit={unit} data-locale={locale}>
+  <Stack direction="horizontal" align="center" justify="between" wrap>
+    <Label for={id}>{label}</Label><output id={`${id}-output`} for={id}>{format(value)}</output>
+    <Badge variant="secondary" hidden={value === defaultValue} data-adjustment-modified>{modifiedLabel}</Badge>
+  </Stack>
+  <Slider id={id} aria-describedby={`${id}-output`} aria-valuetext={format(value)} min={min} max={max} step={step} value={value} disabled={disabled} />
+  <Button variant="ghost" disabled={disabled || value === defaultValue} data-adjustment-reset>{resetLabel}</Button>
+</Field>
+
+<script>
+  for (const field of document.querySelectorAll<HTMLElement>('[data-media-adjustment]')) {
+    const slider = field.querySelector<HTMLInputElement>('input[type="range"]')
+    const output = field.querySelector('output')
+    const reset = field.querySelector<HTMLButtonElement>('button[data-adjustment-reset]')
+    const badge = field.querySelector<HTMLElement>('[data-adjustment-modified]')
+
+    if (!slider || !output || !reset || !badge) continue
+
+    let formatter: Intl.NumberFormat
+
+    try {
+ formatter = new Intl.NumberFormat(field.dataset.locale, { maximumFractionDigits: 3 })
+} catch {
+ formatter = new Intl.NumberFormat('en', { maximumFractionDigits: 3 })
+}
+
+    const update = () => {
+      const value = slider.valueAsNumber
+      const formatted = `${formatter.format(value)}${field.dataset.unit ?? ''}`
+
+      output.textContent = formatted
+
+      slider.ariaValueText = formatted
+
+      badge.hidden = value === Number(field.dataset.defaultValue)
+
+      reset.disabled = slider.disabled || badge.hidden
+
+      field.dispatchEvent(new CustomEvent('ui:adjustment-change', { bubbles: true, detail: { id: field.dataset.mediaAdjustment, value } }))
+    }
+
+    slider.addEventListener('input', () => {
+ if (!slider.disabled) update()
+})
+
+    reset.addEventListener('click', () => {
+      if (reset.disabled || slider.disabled) return
+
+      slider.value = field.dataset.defaultValue ?? '0'
+
+      update()
+
+      slider.focus()
+    })
+  }
+</script>

package/templates/astro/media-workspace/src/lumen/media-processing.astro

@@ -0,0 +1,47 @@
+---
+import { Button, ErrorState, Progress, Stack } from '@santi020k/lumen-astro'
+
+interface Props {
+  phase: 'idle' | 'pending' | 'cancelled' | 'error' | 'success'
+  message: string
+  recovery?: string
+  progress?: number
+  progressLabel: string
+  startLabel: string
+  cancelLabel: string
+  retryLabel: string
+}
+
+declare const Astro: Readonly<{ props: Props, slots: { has: (name: string) => boolean } }>
+
+const { phase, message, recovery, progress, progressLabel, startLabel, cancelLabel, retryLabel } = Astro.props
+---
+
+<Stack gap="related" data-media-processing data-phase={phase}>
+  {phase === 'error' ? <ErrorState title={message} description={recovery} showGraphic={false} announce="polite" headingLevel={3}><Button data-media-processing-action="retry">{retryLabel}</Button></ErrorState> : <p role="status">{message}</p>}
+  {phase === 'pending' && (
+<>
+    {progress !== undefined && Number.isFinite(progress) && <Progress aria-label={progressLabel} value={Math.min(100, Math.max(0, progress))} />}
+    <Button variant="outline" data-media-processing-action="cancel">{cancelLabel}</Button>
+  </>
+)}
+  {phase !== 'pending' && phase !== 'error' && <Button data-media-processing-action="start">{startLabel}</Button>}
+</Stack>
+
+<script>
+  for (const panel of document.querySelectorAll<HTMLElement>('[data-media-processing]')) {
+    panel.addEventListener('click', event => {
+      if (!(event.target instanceof Element)) return
+
+      const button = event.target.closest<HTMLButtonElement>('button[data-media-processing-action]')
+
+      if (!button || button.disabled || !panel.contains(button)) return
+
+      const action = button.dataset.mediaProcessingAction
+
+      if (action !== 'start' && action !== 'cancel' && action !== 'retry') return
+
+      panel.dispatchEvent(new CustomEvent('ui:media-processing-request', { bubbles: true, detail: { action } }))
+    })
+  }
+</script>

package/templates/astro/media-workspace/src/lumen/media-workspace.astro

@@ -0,0 +1,77 @@
+---
+import { Button, Card, Image, MediaFilmstrip, MediaThumbnail, Stack, Toolbar } from '@santi020k/lumen-astro'
+import { resolveLumenMediaSelection } from '@santi020k/lumen-core'
+
+interface MediaItem {
+  id: string
+  label: string
+  src: string
+  alt: string
+  width: number
+  height: number
+  disabled?: boolean
+}
+
+interface Props {
+  title: string
+  items: readonly MediaItem[]
+  selectedIds?: readonly string[]
+  collectionLabel: string
+  selectionLabel: string
+  toolsLabel: string
+  previewLabel: string
+  inspectorLabel: string
+  moveEarlierLabel: string
+  moveLaterLabel: string
+}
+
+declare const Astro: Readonly<{ props: Props, slots: { has: (name: string) => boolean } }>
+
+const { title, items, selectedIds = [], collectionLabel, selectionLabel, toolsLabel, previewLabel, inspectorLabel, moveEarlierLabel, moveLaterLabel } = Astro.props
+const selection = resolveLumenMediaSelection(items, selectedIds)
+---
+
+<section class="lumen-media-workspace" aria-label={title} data-media-workspace>
+  <h2>{title}</h2>
+  <div class="lumen-media-workspace__layout">
+    <div class="lumen-media-workspace__preview" role="group" aria-label={previewLabel}><slot name="preview" /></div>
+    <Card class="lumen-media-workspace__inspector" aria-label={inspectorLabel}><slot name="inspector" /></Card>
+  </div>
+  <Card glass="subtle" class="lumen-media-workspace__tools"><Toolbar aria-label={toolsLabel}><slot name="tools" /></Toolbar></Card>
+  <MediaFilmstrip label={collectionLabel} selectionLabel={selectionLabel}>
+    {items.map((item, index) => (
+<li data-media-item={item.id}>
+      <MediaThumbnail label={item.label} mediaId={item.id} selected={selection.includes(item.id)} order={index + 1} disabled={item.disabled}>
+        <Image src={item.src} alt={item.alt} width={item.width} height={item.height} />
+      </MediaThumbnail>
+      <Stack gap="related">
+        <Button variant="outline" aria-label={`${moveEarlierLabel}: ${item.label}`} disabled={item.disabled === true || index === 0} data-media-move="earlier" data-media-id={item.id}>{moveEarlierLabel}</Button>
+        <Button variant="outline" aria-label={`${moveLaterLabel}: ${item.label}`} disabled={item.disabled === true || index === items.length - 1} data-media-move="later" data-media-id={item.id}>{moveLaterLabel}</Button>
+      </Stack>
+    </li>
+))}
+  </MediaFilmstrip>
+  <Card class="lumen-media-workspace__bottom"><slot name="bottom-controls" /></Card>
+</section>
+
+<script>
+  // Import media-workspace.css once at the application's style boundary.
+  // Selection and move requests remain controlled by the host. Accept them only after
+  // validating permissions and updating canonical state; keep focus on the same stable ID.
+  for (const workspace of document.querySelectorAll<HTMLElement>('[data-media-workspace]')) {
+    workspace.addEventListener('click', event => {
+      if (!(event.target instanceof Element)) return
+
+      const button = event.target.closest<HTMLButtonElement>('button[data-media-move]')
+
+      if (!button || button.disabled || !workspace.contains(button)) return
+
+      const id = button.dataset.mediaId
+      const direction = button.dataset.mediaMove
+
+      if (!id || (direction !== 'earlier' && direction !== 'later')) return
+
+      workspace.dispatchEvent(new CustomEvent('ui:media-move-request', { bubbles: true, detail: { id, direction } }))
+    })
+  }
+</script>

package/templates/astro/page-header/src/lumen/page-header.astro

@@ -0,0 +1,41 @@
+---
+import { Badge, Breadcrumb, Link, Stack, Typography } from '@santi020k/lumen-astro'
+
+interface Props {
+  actionsLabel?: string
+  breadcrumbLabel?: string
+  breadcrumbs?: readonly { href: string, label: string }[]
+  description?: string
+  headingId: string
+  status?: string
+  title: string
+}
+
+declare const Astro: Readonly<{ props: Props, slots: { has: (name: string) => boolean } }>
+
+const { actionsLabel = 'Page actions', breadcrumbLabel = 'Breadcrumb', breadcrumbs = [], description, headingId, status, title } = Astro.props
+---
+
+<header aria-labelledby={headingId}>
+  <Stack gap="group">
+    {breadcrumbs.length > 0 && (
+<Breadcrumb aria-label={breadcrumbLabel}>
+      <ol>
+        {breadcrumbs.map(item => <li><Link href={item.href}>{item.label}</Link></li>)}
+        <li aria-current="page">{title}</li>
+      </ol>
+    </Breadcrumb>
+)}
+    <Stack direction="horizontal" align="start" justify="between" gap="group" wrap>
+      <Stack class="header-identity" gap="related">
+        <Typography><h1 id={headingId}>{title}</h1>{description && <p>{description}</p>}</Typography>
+        {status && <Badge variant="outline" style="align-self: flex-start">{status}</Badge>}
+      </Stack>
+      {Astro.slots.has('actions') && <Stack direction="horizontal" align="center" gap="related" wrap role="group" aria-label={actionsLabel}><slot name="actions" /></Stack>}
+    </Stack>
+  </Stack>
+</header>
+
+<style>
+  .header-identity { flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere; }
+</style>

package/templates/astro/project-workspace/src/lumen/project-workspace.astro

@@ -0,0 +1,103 @@
+---
+import './lumen-template.css'
+
+import {
+  Badge,
+  Button,
+  Card,
+  Progress,
+  Sidebar,
+  Stat,
+  Table,
+  Timeline,
+  TimelineItem
+} from '@santi020k/lumen-astro'
+---
+
+<div class="lumen-template lumen-template__shell">
+  <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>
+  </Sidebar>
+  <main class="lumen-template__main" id="overview">
+    <header class="lumen-template__header">
+      <div>
+        <Badge variant="outline">Team delivery</Badge>
+        <h1>Team workspace</h1>
+        <p>Priorities, delivery health, and next decisions.</p>
+      </div>
+      <Button>New project</Button>
+    </header>
+    <section class="lumen-template__metrics" aria-label="Delivery metrics">
+      <Card class="lumen-template__metric">
+        <Stat label="Open tasks" value="42" />
+        <Badge variant="warning">6 due soon</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Milestones reached" value="18" />
+        <Badge variant="success">+4</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="At-risk projects" value="2" />
+        <Badge variant="destructive">Needs help</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Delivery velocity" value="46 pts" />
+        <Badge variant="success">+6.4%</Badge>
+      </Card>
+    </section>
+    <section class="lumen-template__grid">
+      <Card class="lumen-template__panel">
+        <h2>Active workstreams</h2>
+        <p>Mobile checkout · 72%</p>
+        <Progress aria-label="Mobile checkout is 72% complete" value={72} />
+        <p>Billing migration · 54%</p>
+        <Progress aria-label="Billing migration is 54% complete" value={54} />
+      </Card>
+      <Card class="lumen-template__panel" id="activity">
+        <h2>Recent activity</h2>
+        <Timeline>
+          <TimelineItem>Amina completed checkout validation</TimelineItem>
+          <TimelineItem>Jon reviewed billing retries</TimelineItem>
+          <TimelineItem>Nora moved tokens to review</TimelineItem>
+        </Timeline>
+      </Card>
+    </section>
+    <Card class="lumen-template__panel" id="projects">
+      <div class="lumen-template__section-header">
+        <h2>Priority projects</h2>
+        <Button variant="ghost">View all</Button>
+      </div>
+      <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><Badge variant="success">Active</Badge></td>
+              <td>72%</td>
+            </tr>
+            <tr>
+              <td>Billing migration</td>
+              <td>Jon</td>
+              <td><Badge variant="destructive">At risk</Badge></td>
+              <td>54%</td>
+            </tr>
+          </tbody>
+        </table>
+      </Table>
+    </Card>
+  </main>
+</div>

package/templates/astro/rich-text-editor/src/lumen/rich-text-editor.astro

@@ -0,0 +1,21 @@
+---
+import {
+  Button,
+  ButtonGroup,
+  RichTextEditor,
+  Textarea,
+  ToggleGroup
+} from '@santi020k/lumen-astro'
+---
+
+<RichTextEditor class="lumen-recipe lumen-recipe--rich-text-editor">
+  <div role="toolbar" aria-label="Editor toolbar">
+    <ButtonGroup>
+      <Button data-ui-editor-command="bold" type="button">Bold</Button>
+      <Button data-ui-editor-command="italic" type="button">Italic</Button>
+    </ButtonGroup>
+    <ToggleGroup><button data-ui-editor-command="insertUnorderedList" type="button">List</button></ToggleGroup>
+  </div>
+  <div contenteditable="true">Draft release notes...</div>
+  <Textarea name="fallback" placeholder="Plain text fallback" />
+</RichTextEditor>

package/templates/astro/saas-admin/src/lumen/saas-admin.astro

@@ -0,0 +1,110 @@
+---
+import './lumen-template.css'
+
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Progress,
+  SearchField,
+  Sidebar,
+  Stat,
+  Table
+} from '@santi020k/lumen-astro'
+---
+
+<div class="lumen-template lumen-template__shell">
+  <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>
+  </Sidebar>
+  <main class="lumen-template__main" id="overview">
+    <header class="lumen-template__header">
+      <div>
+        <Badge variant="outline">Workspace administration</Badge>
+        <h1>Good morning, Maya</h1>
+        <p>Access, billing, and operational health.</p>
+      </div>
+      <Button>Invite members</Button>
+    </header>
+    <Alert>
+      <strong>Quarterly access review is ready.</strong>
+      {' '}
+      Confirm eight elevated roles before July 12.
+    </Alert>
+    <section class="lumen-template__metrics" aria-label="Workspace metrics">
+      <Card class="lumen-template__metric">
+        <Stat label="Workspace members" value="248" />
+        <Badge variant="success">+24</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Seat activation" value="91%" />
+        <Badge variant="success">Healthy</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Access reviews" value="8" />
+        <Badge variant="warning">3 pending</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Availability" value="99.99%" />
+        <Badge variant="success">Normal</Badge>
+      </Card>
+    </section>
+    <section class="lumen-template__grid" id="billing">
+      <Card class="lumen-template__panel">
+        <h2>Plan utilization</h2>
+        <Stat label="Seats used" value="248 / 300" />
+        <Progress aria-label="248 of 300 seats used" max={300} value={248} />
+        <p class="lumen-template__muted">52 seats available</p>
+      </Card>
+      <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>
+      </Card>
+    </section>
+    <Card class="lumen-template__panel" id="members">
+      <div class="lumen-template__section-header">
+        <div>
+          <h2>Recently active members</h2>
+          <p>Access changes from the last 30 days.</p>
+        </div>
+        <SearchField aria-label="Search members" placeholder="Search members" />
+      </div>
+      <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><Badge variant="success">Active</Badge></td>
+              <td>Admin</td>
+            </tr>
+            <tr>
+              <td>Theo Martin</td>
+              <td>Success</td>
+              <td><Badge variant="warning">Pending</Badge></td>
+              <td>Member</td>
+            </tr>
+          </tbody>
+        </table>
+      </Table>
+    </Card>
+  </main>
+</div>

package/templates/astro/scheduler/src/lumen/scheduler.astro

@@ -0,0 +1,36 @@
+---
+import {
+  Agenda,
+  Calendar,
+  DatePicker,
+  Schedule
+} from '@santi020k/lumen-astro'
+---
+
+<section class="lumen-recipe lumen-recipe--scheduler">
+  <Calendar aria-label="Choose schedule date" />
+  <DatePicker aria-label="Jump to date" />
+  <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>
+  </Schedule>
+  <Agenda>
+    <ol>
+      <li>
+        <strong>Design review</strong>
+        <span>10:00</span>
+      </li>
+      <li>
+        <strong>Release notes</strong>
+        <span>14:30</span>
+      </li>
+    </ol>
+  </Agenda>
+</section>

package/templates/astro/section-header/src/lumen/section-header.astro

@@ -0,0 +1,35 @@
+---
+import { Badge, Stack, Typography } from '@santi020k/lumen-astro'
+
+interface Props {
+  actionsLabel?: string
+  count?: string
+  description?: string
+  headingId: string
+  level?: 2 | 3 | 4 | 5 | 6
+  title: string
+}
+
+declare const Astro: Readonly<{ props: Props, slots: { has: (name: string) => boolean } }>
+
+const { actionsLabel = 'Section actions', count, description, headingId, level = 2, title } = Astro.props
+const headings = { 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5', 6: 'h6' } as const
+const Heading = headings[level]
+---
+
+<header aria-labelledby={headingId}>
+  <Stack direction="horizontal" align="start" justify="between" gap="group" wrap>
+    <Stack class="header-identity" gap="related">
+      <Stack direction="horizontal" align="center" gap="related" wrap>
+        <Typography><Heading id={headingId}>{title}</Heading></Typography>
+        {count !== undefined && <Badge variant="secondary">{count}</Badge>}
+      </Stack>
+      {description && <Typography><p>{description}</p></Typography>}
+    </Stack>
+    {Astro.slots.has('actions') && <Stack direction="horizontal" align="center" gap="related" wrap role="group" aria-label={actionsLabel}><slot name="actions" /></Stack>}
+  </Stack>
+</header>
+
+<style>
+  .header-identity { flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere; }
+</style>

package/templates/astro/theme-builder/src/lumen/theme-builder.astro

@@ -0,0 +1,28 @@
+---
+import {
+  Button,
+  Card,
+  ColorPicker,
+  Input,
+  ThemeBuilder
+} from '@santi020k/lumen-astro'
+---
+
+<ThemeBuilder class="lumen-recipe lumen-recipe--theme-builder" data-ui-theme-target="#lumen-theme-preview">
+  <header>
+    <h2>Brand theme</h2>
+    <Button data-ui-theme-export type="button">Copy CSS</Button>
+  </header>
+  <Card id="lumen-theme-preview" style="display: flex; gap: 0.5rem;">
+    <span data-ui-swatch style="--ui-swatch:hsl(var(--brand))"></span>
+    <span data-ui-swatch style="--ui-swatch:hsl(var(--accent))"></span>
+  </Card>
+  <Card>
+    <Button aria-pressed="true" data-ui-theme-mode="generated" type="button" variant="secondary">Generated</Button>
+    <Button aria-pressed="false" data-ui-theme-mode="manual" type="button" variant="outline">Manual</Button>
+    <Input aria-label="Brand hue" data-ui-theme-brand-hue max="359" min="0" type="range" value="264" />
+    <ColorPicker aria-label="Manual brand color" data-ui-theme-primary-color value="#6f20f0" />
+    <Input aria-label="Manual brand hex" data-ui-theme-primary-hex value="#6f20f0" />
+  </Card>
+  <textarea data-ui-theme-output aria-label="Theme CSS"></textarea>
+</ThemeBuilder>

package/templates/elements/advanced-fields/src/lumen/advanced-fields.html

@@ -0,0 +1,25 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<form class="lumen-recipe lumen-recipe--advanced-fields">
+  <lumen-search-field name="q" placeholder="Search records"></lumen-search-field>
+  <lumen-autocomplete list="assignees" placeholder="Assign to..."></lumen-autocomplete>
+  <datalist id="assignees">
+    <option value="Design"></option>
+    <option value="Engineering"></option>
+    <option value="Operations"></option>
+  </datalist>
+  <lumen-number-field aria-label="Seats" min="1" value="3"></lumen-number-field>
+  <lumen-time-field aria-label="Start time" value="09:30"></lumen-time-field>
+  <lumen-date-range-picker>
+    <lumen-date-picker aria-label="Start date"></lumen-date-picker>
+    <lumen-date-picker aria-label="End date"></lumen-date-picker>
+  </lumen-date-range-picker>
+  <lumen-color-picker aria-label="Brand color" value="#2563eb"></lumen-color-picker>
+  <lumen-tag-group aria-label="Selected filters">
+    <span data-ui-tag role="listitem">Active <button data-ui-tag-remove type="button">Remove</button></span>
+  </lumen-tag-group>
+</form>

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

@@ -0,0 +1,28 @@
+<link rel="stylesheet" href="./lumen-template.css" />
+
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+
+  const revenue = document.querySelector('#analytics-revenue')
+  const channels = document.querySelector('#analytics-channels')
+
+  if (revenue) revenue.series = [{ data: [{ x: 'Jan', y: 118 }, { x: 'Feb', y: 126 }, { x: 'Mar', y: 132 }, { x: 'Apr', y: 148 }, { x: 'May', y: 162 }, { x: 'Jun', y: 184 }], id: 'revenue', label: 'Revenue', tone: 'brand' }]
+  if (channels) channels.series = [{ data: [{ x: 'Organic', y: 4820 }, { x: 'Referral', y: 3180 }, { x: 'Paid', y: 2640 }], id: 'visitors', label: 'Visitors', tone: 'brand' }]
+</script>
+
+<div class="lumen-template lumen-template__shell">
+  <lumen-sidebar class="lumen-template__sidebar"><strong>Pulse Analytics</strong><nav aria-label="Analytics"><a aria-current="page" href="#overview">Overview</a><a href="#acquisition">Acquisition</a><a href="#accounts">Accounts</a></nav></lumen-sidebar>
+  <main class="lumen-template__main" id="overview">
+    <header class="lumen-template__header"><div><lumen-badge variant="outline">Jun 1–30</lumen-badge><h1>Growth overview</h1><p>Revenue, retention, and account health.</p></div><lumen-button>Export report</lumen-button></header>
+    <section class="lumen-template__metrics" aria-label="Key metrics">
+      <lumen-card class="lumen-template__metric"><lumen-stat label="Monthly revenue" value="$184,320"></lumen-stat><lumen-badge variant="success">+12.4%</lumen-badge></lumen-card>
+      <lumen-card class="lumen-template__metric"><lumen-stat label="Active accounts" value="12,480"></lumen-stat><lumen-badge variant="success">+8.2%</lumen-badge></lumen-card>
+      <lumen-card class="lumen-template__metric"><lumen-stat label="Customer churn" value="2.8%"></lumen-stat><lumen-badge variant="success">-1.6%</lumen-badge></lumen-card>
+      <lumen-card class="lumen-template__metric"><lumen-stat label="Net retention" value="116%"></lumen-stat><lumen-badge variant="success">+3.1%</lumen-badge></lumen-card>
+    </section>
+    <section class="lumen-template__grid" id="acquisition"><lumen-line-chart area heading="Revenue trajectory" id="analytics-revenue"></lumen-line-chart><lumen-bar-chart heading="Channel performance" id="analytics-channels"></lumen-bar-chart></section>
+    <lumen-card class="lumen-template__panel" id="accounts"><div class="lumen-template__section-header"><h2>Accounts to watch</h2><lumen-button variant="ghost">View all</lumen-button></div><lumen-table class="lumen-template__table"><table><thead><tr><th>Account</th><th>Plan</th><th>Status</th><th>Value</th></tr></thead><tbody><tr><td>Northstar Labs</td><td>Enterprise</td><td><lumen-badge variant="success">Active</lumen-badge></td><td>$18,400</td></tr><tr><td>Arc & Field</td><td>Enterprise</td><td><lumen-badge variant="destructive">At risk</lumen-badge></td><td>$14,780</td></tr></tbody></table></lumen-table></lumen-card>
+  </main>
+</div>