@syncedco/flow 0.1.4 → 0.2.0

package/bin/synced-flow.mjs

@@ -1025,7 +1025,7 @@ function getTokenSummary() {
     themePresets: presetNames.map(kebabThemeName),
     starterClasses: {
       layout: ['sf-container', 'sf-container--narrow', 'sf-container--wide', 'sf-container--full', 'sf-rail-shell', 'sf-rail-shell__rail', 'sf-rail-shell__body', 'sf-rail-shell__mark', 'sf-rail-shell__label', 'sf-section', 'sf-section--compact', 'sf-section--spacious', 'sf-stack', 'sf-flow', 'sf-cluster', 'sf-repel', 'sf-toolbar', 'sf-app-shell', 'sf-app-sidebar', 'sf-app-sidebar__brand', 'sf-app-main', 'sf-auto-grid', 'sf-auto-grid--xs', 'sf-auto-grid--sm', 'sf-auto-grid--lg', 'sf-switcher', 'sf-sidebar', 'sf-split', 'sf-split--reverse', 'sf-chapter', 'sf-chapter__copy', 'sf-frame', 'sf-cover', 'sf-panel-grid', 'sf-metric-grid', 'sf-pipeline', 'sf-scroll-viewport', 'sf-scroll-panel', 'sf-scroll-snap-y', 'sf-sticky-top', 'sf-media-object', 'sf-aside-rail'],
-      components: ['sf-button', 'sf-button-group', 'sf-button--icon', 'sf-icon-button', 'sf-icon', 'sf-icon--xs', 'sf-icon--sm', 'sf-icon--md', 'sf-icon--lg', 'sf-icon--xl', 'sf-card', 'sf-card--flat', 'sf-card--raised', 'sf-card--compact', 'sf-card--glass', 'sf-card--technical', 'sf-card--accent', 'sf-card--center', 'sf-surface', 'sf-code-window', 'sf-code-window--glow', 'sf-code-window__bar', 'sf-window-dots', 'sf-code-lines', 'sf-code-lines--compact', 'sf-code-block', 'sf-token-strip', 'sf-marquee', 'sf-marquee__track', 'sf-marquee__item', 'sf-command-list', 'sf-command-list__prompt', 'sf-platform-card', 'sf-platform-card__logo', 'sf-hero', 'sf-logo-cloud', 'sf-feature', 'sf-stats', 'sf-stat', 'sf-testimonial', 'sf-pricing-grid', 'sf-price-card', 'sf-price', 'sf-faq', 'sf-cta', 'sf-footer', 'sf-badge', 'sf-avatar', 'sf-chart', 'sf-chart--wide', 'sf-chart__plot', 'sf-chart__svg', 'sf-chart__grid', 'sf-chart__axis', 'sf-chart__area', 'sf-chart__line', 'sf-chart__point', 'sf-chart__legend', 'sf-chart__legend-item', 'sf-chart__swatch', 'sf-meter-list', 'sf-meter-row', 'sf-meter', 'sf-nav', 'sf-nav--mobile', 'sf-nav__list', 'sf-nav__link', 'sf-menu', 'sf-breadcrumb', 'sf-pagination', 'sf-dialog', 'sf-popover', 'sf-tooltip', 'sf-tooltip-trigger', 'sf-menu-popover', 'sf-toast', 'sf-banner', 'sf-drawer', 'sf-drawer--stack', 'sf-disclosure', 'sf-accordion', 'sf-tabs', 'sf-tab-list', 'sf-tab', 'sf-tab-panel', 'sf-form', 'sf-fieldset', 'sf-field', 'sf-label', 'sf-help', 'sf-error', 'sf-input', 'sf-select', 'sf-textarea', 'sf-check', 'sf-alert', 'sf-section-header', 'sf-kicker'],
+      components: ['sf-button', 'sf-button-group', 'sf-button--icon', 'sf-icon-button', 'sf-icon', 'sf-icon--xs', 'sf-icon--sm', 'sf-icon--md', 'sf-icon--lg', 'sf-icon--xl', 'sf-card', 'sf-card--flat', 'sf-card--raised', 'sf-card--compact', 'sf-card--glass', 'sf-card--technical', 'sf-card--accent', 'sf-card--center', 'sf-surface', 'sf-code-window', 'sf-code-window--glow', 'sf-code-window__bar', 'sf-window-dots', 'sf-code-lines', 'sf-code-lines--compact', 'sf-code-block', 'sf-token-strip', 'sf-marquee', 'sf-marquee__track', 'sf-marquee__item', 'sf-command-list', 'sf-command-list__prompt', 'sf-platform-card', 'sf-platform-card__logo', 'sf-hero', 'sf-logo-cloud', 'sf-feature', 'sf-stats', 'sf-stat', 'sf-testimonial', 'sf-pricing-grid', 'sf-price-card', 'sf-price', 'sf-faq', 'sf-cta', 'sf-footer', 'sf-badge', 'sf-avatar', 'sf-chart', 'sf-chart--wide', 'sf-chart__plot', 'sf-chart__svg', 'sf-chart__grid', 'sf-chart__axis', 'sf-chart__area', 'sf-chart__line', 'sf-chart__point', 'sf-chart__legend', 'sf-chart__legend-item', 'sf-chart__swatch', 'sf-meter-list', 'sf-meter-row', 'sf-meter', 'sf-progress', 'sf-skeleton', 'sf-filter-bar', 'sf-data-table', 'sf-status', 'sf-data-list', 'sf-empty-state', 'sf-settings-section', 'sf-detail-panel', 'sf-nav', 'sf-nav--mobile', 'sf-nav__list', 'sf-nav__link', 'sf-menu', 'sf-breadcrumb', 'sf-pagination', 'sf-dialog', 'sf-popover', 'sf-tooltip', 'sf-tooltip-trigger', 'sf-menu-popover', 'sf-toast', 'sf-banner', 'sf-drawer', 'sf-drawer--stack', 'sf-disclosure', 'sf-accordion', 'sf-tabs', 'sf-tab-list', 'sf-tab', 'sf-tab-panel', 'sf-form', 'sf-fieldset', 'sf-field', 'sf-label', 'sf-help', 'sf-error', 'sf-input', 'sf-select', 'sf-textarea', 'sf-check', 'sf-alert', 'sf-section-header', 'sf-kicker'],
       type: ['sf-text-caption', 'sf-text-body', 'sf-text-lead', 'sf-text-h4', 'sf-text-h3', 'sf-text-h2', 'sf-text-h1', 'sf-text-display'],
       utilities: ['sr-only', 'not-sr-only', 'sf-visually-hidden', 'sf-not-visually-hidden', 'sf-skip-link', 'sf-focus-ring', 'sf-touch-target', 'sf-list-reset', 'sf-list-disc', 'sf-list-decimal', 'sf-link', 'sf-link-subtle', 'sf-link-plain', 'sf-prose', 'sf-prose--blog', 'sf-prose--legal', 'sf-meta', 'sf-figure', 'sf-caption', 'sf-table-wrap', 'sf-push-block-end', 'sf-push-block-start', 'sf-push-inline-end', 'sf-push-inline-start', 'sf-full-bleed', 'sf-text-muted', 'sf-bg-surface', 'sf-border', 'sf-rounded-panel', 'sf-shadow-md', 'sf-animate-fade', 'sf-animate-rise', 'sf-animate-scale', 'sf-animate-slide', 'sf-animate-stagger'],
     },
@@ -1239,6 +1239,133 @@ export default function DialogExample() {
       markup: '<article class="sf-container sf-prose sf-prose--blog">...</article>',
       keywords: ['blog', 'article', 'prose', 'legal', 'docs', 'case-study', 'table', 'figure', 'seo'],
     },
+    {
+      id: 'filter-toolbar',
+      name: 'Filter toolbar',
+      whenToUse: 'Search, status filters, quick actions, and exports above lists, tables, queues, directories, and admin screens.',
+      classes: ['sf-filter-bar', 'sf-field', 'sf-label', 'sf-input', 'sf-select', 'sf-button', 'sf-button--outline'],
+      requiresJs: false,
+      requiresJsNotes: 'Use native form submit, GET params, or app-owned state. Synced Flow only styles the shell and controls.',
+      a11y: ['Keep every field labelled.', 'Use button type="submit" for applied filters.', 'Announce result count in app markup when filtering changes content dynamically.'],
+      gotchas: ['Do not hide labels without keeping them accessible.', 'Use app logic for debounced search, saved views, and live result counts.'],
+      markup: {
+        html: `<form class="sf-filter-bar" role="search" action="/app/customers" method="get">
+  <label class="sf-field">
+    <span class="sf-label">Search</span>
+    <input class="sf-input" name="q" type="search" placeholder="Search customers">
+  </label>
+  <label class="sf-field">
+    <span class="sf-label">Status</span>
+    <select class="sf-select" name="status"><option>Any status</option><option>Healthy</option><option>Needs review</option></select>
+  </label>
+  <button class="sf-button" type="submit">Apply</button>
+  <a class="sf-button sf-button--outline" href="/app/customers/export">Export</a>
+</form>`,
+      },
+      keywords: ['saas', 'filter', 'toolbar', 'search', 'status', 'table', 'list', 'admin', 'crm'],
+    },
+    {
+      id: 'date-filter-form',
+      name: 'Native date filter',
+      whenToUse: 'Date ranges, billing periods, export windows, audit logs, appointments, and reporting filters that can use browser-native date/time controls.',
+      classes: ['sf-filter-bar', 'sf-field', 'sf-label', 'sf-input', 'sf-select', 'sf-button', 'sf-button--outline'],
+      requiresJs: false,
+      requiresJsNotes: 'Native date, time, month, week, and datetime-local inputs submit through normal forms. Custom calendar widgets and availability logic belong to the app.',
+      a11y: ['Use explicit visible labels for each date or time input.', 'Prefer separate start and end fields for ranges.', 'Use server or app validation for invalid ranges.'],
+      gotchas: ['Native picker UI varies by browser and operating system.', 'Use a dedicated calendar library only when the product needs custom scheduling behavior.'],
+      markup: {
+        html: `<form class="sf-filter-bar" action="/app/reports" method="get">
+  <label class="sf-field"><span class="sf-label">From</span><input class="sf-input" name="from" type="date"></label>
+  <label class="sf-field"><span class="sf-label">To</span><input class="sf-input" name="to" type="date"></label>
+  <label class="sf-field"><span class="sf-label">Period</span><select class="sf-select" name="period"><option>Custom</option><option>This month</option><option>Last month</option></select></label>
+  <button class="sf-button" type="submit">Apply</button>
+  <a class="sf-button sf-button--outline" href="/app/reports">Reset</a>
+</form>`,
+      },
+      keywords: ['saas', 'date', 'time', 'calendar', 'filter', 'range', 'reports', 'billing', 'native'],
+    },
+    {
+      id: 'active-filter-tags',
+      name: 'Active filter tags',
+      whenToUse: 'Visible selected filters below a search/filter toolbar, with clear-all and individual removal actions owned by the app.',
+      classes: ['sf-cluster', 'sf-badge', 'sf-button', 'sf-button--ghost', 'sf-button--sm', 'sf-link'],
+      requiresJs: false,
+      requiresJsNotes: 'Links can remove filters through URL params without JavaScript. Client-side filter state belongs to the consuming app.',
+      a11y: ['Use clear link text that names the filter being removed.', 'Keep the active filter value visible as text.', 'Provide a clear-all action when several filters can be active.'],
+      gotchas: ['Use buttons only when client-side state changes in place.', 'Use links for URL-driven filters so filtered views remain shareable.'],
+      markup: {
+        html: `<div class="sf-cluster" aria-label="Active filters">
+  <span class="sf-badge">Status: Healthy <a class="sf-link" href="?plan=team" aria-label="Remove status filter">Remove</a></span>
+  <span class="sf-badge">Plan: Team <a class="sf-link" href="?status=healthy" aria-label="Remove plan filter">Remove</a></span>
+  <a class="sf-button sf-button--ghost sf-button--sm" href="/app/customers">Clear filters</a>
+</div>`,
+      },
+      keywords: ['saas', 'filter', 'filters', 'chips', 'tags', 'badge', 'selected', 'active'],
+    },
+    {
+      id: 'data-table',
+      name: 'Data table',
+      whenToUse: 'Account lists, activity logs, invoices, users, queues, directories, and operational tables that should keep native table semantics.',
+      classes: ['sf-table-wrap', 'sf-data-table', 'sf-status', 'sf-avatar', 'sf-link'],
+      requiresJs: false,
+      requiresJsNotes: 'Sorting, pagination state, and row actions belong to the consuming app.',
+      a11y: ['Use a caption or labelled section.', 'Use real table headers.', 'Do not replace table markup with divs for tabular data.'],
+      gotchas: ['Wrap wide tables in sf-table-wrap.', 'Use sf-status for display only; keep actual status text in the element.'],
+      markup: {
+        html: `<div class="sf-table-wrap">
+  <table class="sf-data-table" aria-label="Customers">
+    <thead><tr><th>Customer</th><th>Status</th><th>Plan</th><th>Updated</th></tr></thead>
+    <tbody>
+      <tr><td><a class="sf-link" href="/app/customers/northstar">Northstar Labs</a></td><td><span class="sf-status" data-tone="success">Healthy</span></td><td>Growth</td><td>Today</td></tr>
+      <tr><td>Willow Group</td><td><span class="sf-status" data-tone="warning">Needs review</span></td><td>Operations</td><td>Yesterday</td></tr>
+    </tbody>
+  </table>
+</div>`,
+      },
+      keywords: ['saas', 'table', 'data', 'customers', 'accounts', 'admin', 'crm', 'status', 'list'],
+    },
+    {
+      id: 'empty-state',
+      name: 'Empty state',
+      whenToUse: 'Empty queues, no search results, first-run screens, directories, and dashboards before data is available.',
+      classes: ['sf-empty-state', 'sf-button', 'sf-button--outline', 'sf-text-muted'],
+      requiresJs: false,
+      requiresJsNotes: 'No JavaScript is required unless the consuming app opens a creation flow.',
+      a11y: ['Use a heading that explains the missing state.', 'Keep primary action text specific.', 'Do not rely on illustration-only meaning.'],
+      gotchas: ['Keep it short; empty states should unblock the next action.', 'Use sf-card around it only when the surrounding layout needs a card surface.'],
+      markup: {
+        html: `<div class="sf-empty-state">
+  <h2 class="sf-text-h4">No matching customers</h2>
+  <p class="sf-text-muted">Adjust the filters or add the first customer.</p>
+  <div class="sf-cluster">
+    <a class="sf-button" href="/app/customers/new">Add customer</a>
+    <a class="sf-button sf-button--outline" href="/app/customers">Reset filters</a>
+  </div>
+</div>`,
+      },
+      keywords: ['saas', 'empty', 'state', 'first-run', 'onboarding', 'no-results', 'zero'],
+    },
+    {
+      id: 'settings-section',
+      name: 'Settings section',
+      whenToUse: 'Account, team, billing, security, notification, integration, profile, and site settings screens.',
+      classes: ['sf-settings-section', 'sf-detail-panel', 'sf-data-list', 'sf-form', 'sf-field', 'sf-input', 'sf-check', 'sf-button'],
+      requiresJs: false,
+      requiresJsNotes: 'Form submission, optimistic saves, and validation belong to the consuming app.',
+      a11y: ['Group related settings under a heading.', 'Use fieldsets when settings are tightly related.', 'Describe destructive settings before the action.'],
+      gotchas: ['Avoid putting unrelated settings in one panel.', 'Use sf-detail-panel for read-only metadata next to editable fields.'],
+      markup: {
+        html: `<section class="sf-settings-section" aria-labelledby="workspace-settings-title">
+  <header class="sf-repel"><div><h2 id="workspace-settings-title">Workspace settings</h2><p class="sf-text-muted">Manage visible account details.</p></div><button class="sf-button" type="submit" form="workspace-settings">Save</button></header>
+  <form class="sf-form" id="workspace-settings">
+    <label class="sf-field"><span class="sf-label">Workspace name</span><input class="sf-input" name="name" value="Product Suite"></label>
+    <label class="sf-check"><input type="checkbox" name="weekly_summary" checked> <span>Email weekly summary</span></label>
+  </form>
+  <aside class="sf-detail-panel"><dl class="sf-data-list"><div><dt>Plan</dt><dd>Team</dd></div><div><dt>Seats</dt><dd>12 active</dd></div></dl></aside>
+</section>`,
+      },
+      keywords: ['saas', 'settings', 'section', 'billing', 'team', 'security', 'account', 'detail'],
+    },
     {
       id: 'contact-form',
       name: 'Accessible contact form',
@@ -1362,8 +1489,8 @@ function getPublicRecipes() {
       id: 'saas-dashboard',
       name: 'SaaS dashboard',
       whenToUse: 'Authenticated SaaS apps, admin panels, customer portals, CRMs, analytics dashboards, and product workspaces.',
-      sections: ['sticky-navigation', 'mobile-nav-drawer', 'card-grid', 'contact-form', 'long-form-content'],
-      classes: ['sf-skip-link', 'sf-theme-light', 'sf-app-shell', 'sf-app-sidebar', 'sf-app-sidebar__brand', 'sf-app-main', 'sf-toolbar', 'sf-stack', 'sf-stack--tight', 'sf-repel', 'sf-cluster', 'sf-panel-grid', 'sf-metric-grid', 'sf-nav', 'sf-nav__list', 'sf-nav__link', 'sf-icon', 'sf-card', 'sf-surface', 'sf-stat', 'sf-badge', 'sf-avatar', 'sf-chart', 'sf-chart--wide', 'sf-chart__plot', 'sf-chart__svg', 'sf-chart__grid', 'sf-chart__axis', 'sf-chart__area', 'sf-chart__line', 'sf-chart__point', 'sf-chart__legend', 'sf-chart__legend-item', 'sf-chart__swatch', 'sf-meter-list', 'sf-meter-row', 'sf-meter', 'sf-button', 'sf-button--outline', 'sf-button--icon', 'sf-form', 'sf-field', 'sf-input', 'sf-check', 'sf-table-wrap', 'sf-font-sans', 'sf-visually-hidden'],
+      sections: ['sticky-navigation', 'mobile-nav-drawer', 'card-grid', 'contact-form', 'long-form-content', 'filter-toolbar', 'date-filter-form', 'active-filter-tags', 'data-table', 'empty-state', 'settings-section'],
+      classes: ['sf-skip-link', 'sf-theme-light', 'sf-app-shell', 'sf-app-sidebar', 'sf-app-sidebar__brand', 'sf-app-main', 'sf-toolbar', 'sf-stack', 'sf-stack--tight', 'sf-repel', 'sf-cluster', 'sf-panel-grid', 'sf-metric-grid', 'sf-nav', 'sf-nav__list', 'sf-nav__link', 'sf-icon', 'sf-card', 'sf-surface', 'sf-stat', 'sf-badge', 'sf-avatar', 'sf-chart', 'sf-chart--wide', 'sf-chart__plot', 'sf-chart__svg', 'sf-chart__grid', 'sf-chart__axis', 'sf-chart__area', 'sf-chart__line', 'sf-chart__point', 'sf-chart__legend', 'sf-chart__legend-item', 'sf-chart__swatch', 'sf-meter-list', 'sf-meter-row', 'sf-meter', 'sf-progress', 'sf-skeleton', 'sf-filter-bar', 'sf-data-table', 'sf-status', 'sf-data-list', 'sf-empty-state', 'sf-settings-section', 'sf-detail-panel', 'sf-button', 'sf-button--outline', 'sf-button--icon', 'sf-form', 'sf-field', 'sf-input', 'sf-select', 'sf-check', 'sf-table-wrap', 'sf-font-sans', 'sf-visually-hidden'],
       keywords: ['saas', 'dashboard', 'admin', 'panel', 'portal', 'crm', 'analytics', 'app', 'auth', 'login', 'signin', 'sign-in', 'user', 'account', 'metrics', 'pipeline', 'activity', 'customers', 'accounts', 'tasks', 'tickets', 'revenue'],
       markup: `<a class="sf-skip-link" href="#dashboard-main">Skip to dashboard</a>
 <div class="sf-app-shell sf-theme-light">
@@ -1460,38 +1587,47 @@ function getPublicRecipes() {
           <label class="sf-meter-row"><span class="sf-repel"><strong>Accounts</strong><span class="sf-text-muted">82%</span></span><meter class="sf-meter" min="0" max="100" value="82">82%</meter></label>
           <label class="sf-meter-row"><span class="sf-repel"><strong>Automation</strong><span class="sf-text-muted">64%</span></span><meter class="sf-meter" min="0" max="100" value="64">64%</meter></label>
           <label class="sf-meter-row"><span class="sf-repel"><strong>Support</strong><span class="sf-text-muted">48%</span></span><meter class="sf-meter" min="0" max="100" value="48">48%</meter></label>
+          <label class="sf-meter-row"><span class="sf-repel"><strong>Import job</strong><span class="sf-text-muted">36%</span></span><progress class="sf-progress" max="100" value="36">36%</progress></label>
         </div>
       </article>
     </section>
     <section class="sf-metric-grid" id="command">
       <article class="sf-card sf-stack"><div class="sf-repel"><h2 class="sf-card__title sf-font-sans">Command centre</h2><span class="sf-badge">Priority</span></div><p class="sf-card__description">Follow-ups, approvals, and missing next actions stay visible.</p></article>
       <article class="sf-card sf-stack" id="billing"><h2 class="sf-card__title sf-font-sans">Billing watch</h2><p class="sf-card__description">2 overdue payment follow-ups and 1 renewal due this week.</p></article>
-      <article class="sf-card sf-stack"><h2 class="sf-card__title sf-font-sans">Relationship pulse</h2><p class="sf-card__description">Three customer timelines need a recent touch point.</p></article>
+      <article class="sf-card sf-stack"><h2 class="sf-card__title sf-font-sans">Relationship pulse</h2><p class="sf-card__description">Three customer timelines need a recent touch point.</p><div class="sf-empty-state"><strong>No urgent escalations</strong><span class="sf-text-muted">New priority work will appear here.</span></div></article>
     </section>
     <section class="sf-panel-grid" id="customers">
       <article class="sf-card sf-stack">
         <div class="sf-repel"><h2 class="sf-card__title sf-font-sans">Recent activity</h2><a class="sf-link" href="/app/activity">View all</a></div>
+        <form class="sf-filter-bar" role="search" action="/app/activity" method="get">
+          <label class="sf-field"><span class="sf-label">Search</span><input class="sf-input" name="q" type="search" placeholder="Search activity"></label>
+          <label class="sf-field"><span class="sf-label">Status</span><select class="sf-select" name="status"><option>Any status</option><option>Active</option><option>Scheduled</option><option>Complete</option></select></label>
+          <label class="sf-field"><span class="sf-label">From</span><input class="sf-input" name="from" type="date"></label>
+          <button class="sf-button" type="submit">Apply</button>
+        </form>
+        <div class="sf-cluster" aria-label="Active filters"><span class="sf-badge">Status: Active <a class="sf-link" href="/app/activity" aria-label="Remove status filter">Remove</a></span><a class="sf-button sf-button--ghost sf-button--sm" href="/app/activity">Clear filters</a></div>
         <div class="sf-table-wrap">
-          <table>
+          <table class="sf-data-table" aria-label="Recent activity">
             <thead><tr><th>Item</th><th>Status</th><th>Value</th><th>Date</th></tr></thead>
             <tbody>
-              <tr><td>Enterprise onboarding</td><td><span class="sf-badge">Active</span></td><td>£7,800</td><td>Today</td></tr>
-              <tr><td>Usage review</td><td><span class="sf-badge">Scheduled</span></td><td>£4,050</td><td>Yesterday</td></tr>
-              <tr><td>Renewal workflow</td><td><span class="sf-badge">Complete</span></td><td>£3,250</td><td>17 May</td></tr>
+              <tr><td>Enterprise onboarding</td><td><span class="sf-status" data-tone="success">Active</span></td><td>£7,800</td><td>Today</td></tr>
+              <tr><td>Usage review</td><td><span class="sf-status" data-tone="info">Scheduled</span></td><td>£4,050</td><td>Yesterday</td></tr>
+              <tr><td>Renewal workflow</td><td><span class="sf-status" data-tone="warning">Review</span></td><td>£3,250</td><td>17 May</td></tr>
             </tbody>
           </table>
         </div>
       </article>
-      <article class="sf-card sf-stack" id="activity">
+      <article class="sf-card sf-stack sf-detail-panel" id="activity">
         <div class="sf-repel"><h2 class="sf-card__title sf-font-sans">Recent customers</h2><a class="sf-link" href="/app/customers">View all</a></div>
-        <ul class="sf-list-reset sf-stack">
-          <li class="sf-repel"><span><strong>Northstar Labs</strong><br><span class="sf-text-muted">Growth workspace</span></span><span class="sf-text-muted">Healthy</span></li>
-          <li class="sf-repel"><span><strong>Willow Group</strong><br><span class="sf-text-muted">Operations workspace</span></span><span class="sf-text-muted">Needs review</span></li>
-          <li class="sf-repel"><span><strong>Harbour Systems</strong><br><span class="sf-text-muted">Platform workspace</span></span><span class="sf-text-muted">Healthy</span></li>
+        <div class="sf-skeleton" aria-hidden="true">Loading customer details</div>
+        <ul class="sf-list-reset sf-data-list">
+          <li><span><strong>Northstar Labs</strong><br><span class="sf-text-muted">Growth workspace</span></span><span class="sf-status" data-tone="success">Healthy</span></li>
+          <li><span><strong>Willow Group</strong><br><span class="sf-text-muted">Operations workspace</span></span><span class="sf-status" data-tone="warning">Needs review</span></li>
+          <li><span><strong>Harbour Systems</strong><br><span class="sf-text-muted">Platform workspace</span></span><span class="sf-status" data-tone="success">Healthy</span></li>
         </ul>
       </article>
     </section>
-    <section class="sf-card sf-form" aria-labelledby="signin-title">
+    <section class="sf-card sf-form sf-settings-section" aria-labelledby="signin-title">
       <!-- Example unauthenticated state. Wire this form to your app auth provider. -->
       <div class="sf-repel">
         <div><p class="sf-kicker">Signed out state</p><h2 class="sf-card__title sf-font-sans" id="signin-title">Sign in to your workspace</h2></div>
@@ -1684,7 +1820,7 @@ function runTokens() {
 function runCatalog() {
   const catalog = getPublicCatalog()
   if (args.includes('--json')) {
-    console.log(JSON.stringify(catalog, null, 2))
+    writeFileSync(1, `${JSON.stringify(catalog, null, 2)}\n`)
     return
   }
 
@@ -4313,6 +4449,181 @@ function buildComponentCss() {
     overflow: hidden;
   }
 
+  .sf-progress {
+    accent-color: var(--progress-color, var(--color-primary));
+    block-size: var(--progress-size, .625rem);
+    inline-size: 100%;
+  }
+
+  .sf-progress::-webkit-progress-bar {
+    background: var(--color-surface-alt);
+    border-radius: var(--radius-full);
+  }
+
+  .sf-progress::-webkit-progress-value,
+  .sf-progress::-moz-progress-bar {
+    background: var(--progress-color, var(--color-primary));
+    border-radius: var(--radius-full);
+  }
+
+  .sf-skeleton {
+    background: color-mix(in oklch, var(--color-surface-alt) 82%, var(--color-foreground));
+    border-radius: var(--skeleton-radius, var(--radius-md));
+    color: transparent;
+    min-block-size: var(--skeleton-block-size, 1em);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sf-skeleton {
+      animation: sf-skeleton-pulse 1.4s var(--ease-standard) infinite alternate;
+    }
+  }
+
+  @keyframes sf-skeleton-pulse {
+    to { opacity: .62; }
+  }
+
+  .sf-filter-bar {
+    align-items: end;
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    padding: var(--space-s);
+  }
+
+  .sf-filter-bar > :where(.sf-field, form, label) {
+    flex: 1 1 min(100%, 14rem);
+  }
+
+  .sf-filter-bar > :where(.sf-button, button, a) {
+    flex: 0 0 auto;
+  }
+
+  .sf-data-table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    min-inline-size: var(--data-table-min, 44rem);
+  }
+
+  .sf-data-table :where(th, td) {
+    border-block-end: 1px solid var(--color-border);
+    padding-block: var(--data-table-padding-block, var(--space-xs));
+    padding-inline: var(--data-table-padding-inline, var(--space-s));
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .sf-data-table :where(th) {
+    background: var(--color-surface-alt);
+    color: var(--color-muted-foreground);
+    font-size: var(--step--1);
+    font-weight: 800;
+  }
+
+  .sf-data-table :where(tbody tr:hover) {
+    background: color-mix(in oklch, var(--color-primary) 6%, transparent);
+  }
+
+  .sf-data-table[data-density="compact"] {
+    --data-table-padding-block: var(--space-2xs);
+    --data-table-padding-inline: var(--space-xs);
+  }
+
+  .sf-status {
+    align-items: center;
+    background: var(--status-bg, var(--color-surface-alt));
+    border: 1px solid var(--status-border, var(--color-border));
+    border-radius: var(--radius-full);
+    color: var(--status-color, var(--color-foreground));
+    display: inline-flex;
+    font-size: var(--step--1);
+    font-weight: 700;
+    gap: var(--space-3xs);
+    line-height: 1;
+    min-block-size: 1.75rem;
+    padding-inline: .7em;
+  }
+
+  .sf-status::before {
+    background: currentColor;
+    block-size: .42em;
+    border-radius: var(--radius-full);
+    content: "";
+    inline-size: .42em;
+  }
+
+  .sf-status[data-tone="success"] {
+    --status-bg: var(--sf-colour-success-soft, oklch(62% 0.13 150 / 0.12));
+    --status-border: color-mix(in oklch, var(--sf-colour-success, oklch(62% 0.13 150)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-success, oklch(62% 0.13 150)) 76%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="warning"] {
+    --status-bg: var(--sf-colour-warning-soft, oklch(78% 0.15 82 / 0.16));
+    --status-border: color-mix(in oklch, var(--sf-colour-warning, oklch(78% 0.15 82)) 38%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-warning, oklch(78% 0.15 82)) 70%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="danger"] {
+    --status-bg: var(--sf-colour-danger-soft, oklch(56% 0.2 28 / 0.12));
+    --status-border: color-mix(in oklch, var(--sf-colour-danger, var(--color-destructive)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-danger, var(--color-destructive)) 76%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="info"] {
+    --status-bg: var(--sf-colour-info-soft, oklch(70% 0.12 205 / 0.14));
+    --status-border: color-mix(in oklch, var(--sf-colour-info, oklch(70% 0.12 205)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-info, oklch(70% 0.12 205)) 76%, var(--color-foreground));
+  }
+
+  .sf-data-list {
+    display: grid;
+  }
+
+  .sf-data-list > * {
+    align-items: center;
+    border-block-end: 1px solid var(--color-border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    justify-content: space-between;
+    padding-block: var(--space-xs);
+  }
+
+  .sf-data-list > :last-child {
+    border-block-end: 0;
+  }
+
+  .sf-empty-state {
+    align-items: center;
+    background: var(--color-surface-alt);
+    border: 1px dashed var(--color-border);
+    border-radius: var(--radius-lg);
+    color: var(--color-muted-foreground);
+    display: grid;
+    gap: var(--space-xs);
+    justify-items: center;
+    padding: var(--space-l);
+    text-align: center;
+  }
+
+  .sf-settings-section,
+  .sf-detail-panel {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    display: grid;
+    gap: var(--space-s);
+    padding: var(--space-m);
+  }
+
+  .sf-detail-panel {
+    background: var(--color-surface-alt);
+  }
+
   .sf-field {
     display: grid;
     gap: var(--space-2xs);

package/components.css

@@ -802,6 +802,181 @@
     overflow: hidden;
   }
 
+  .sf-progress {
+    accent-color: var(--sf-progress-colour, var(--sf-colour-primary));
+    block-size: var(--sf-progress-size, .625rem);
+    inline-size: 100%;
+  }
+
+  .sf-progress::-webkit-progress-bar {
+    background: var(--sf-colour-surface-alt);
+    border-radius: var(--sf-radius-full);
+  }
+
+  .sf-progress::-webkit-progress-value,
+  .sf-progress::-moz-progress-bar {
+    background: var(--sf-progress-colour, var(--sf-colour-primary));
+    border-radius: var(--sf-radius-full);
+  }
+
+  .sf-skeleton {
+    background: color-mix(in oklch, var(--sf-colour-surface-alt) 82%, var(--sf-colour-foreground));
+    border-radius: var(--sf-skeleton-radius, var(--sf-radius-md));
+    color: transparent;
+    min-block-size: var(--sf-skeleton-block-size, 1em);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sf-skeleton {
+      animation: sf-skeleton-pulse 1.4s var(--sf-ease-standard) infinite alternate;
+    }
+  }
+
+  @keyframes sf-skeleton-pulse {
+    to { opacity: .62; }
+  }
+
+  .sf-filter-bar {
+    align-items: end;
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-xs);
+    padding: var(--sf-space-s);
+  }
+
+  .sf-filter-bar > :where(.sf-field, form, label) {
+    flex: 1 1 min(100%, 14rem);
+  }
+
+  .sf-filter-bar > :where(.sf-button, button, a) {
+    flex: 0 0 auto;
+  }
+
+  .sf-data-table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    min-inline-size: var(--sf-data-table-min, 44rem);
+  }
+
+  .sf-data-table :where(th, td) {
+    border-block-end: 1px solid var(--sf-colour-border);
+    padding-block: var(--sf-data-table-padding-block, var(--sf-space-xs));
+    padding-inline: var(--sf-data-table-padding-inline, var(--sf-space-s));
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .sf-data-table :where(th) {
+    background: var(--sf-colour-surface-alt);
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+    font-weight: 800;
+  }
+
+  .sf-data-table :where(tbody tr:hover) {
+    background: color-mix(in oklch, var(--sf-colour-primary) 6%, transparent);
+  }
+
+  .sf-data-table[data-density="compact"] {
+    --sf-data-table-padding-block: var(--sf-space-2xs);
+    --sf-data-table-padding-inline: var(--sf-space-xs);
+  }
+
+  .sf-status {
+    align-items: center;
+    background: var(--sf-status-bg, var(--sf-colour-surface-alt));
+    border: 1px solid var(--sf-status-border, var(--sf-colour-border));
+    border-radius: var(--sf-radius-full);
+    color: var(--sf-status-colour, var(--sf-colour-foreground));
+    display: inline-flex;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    gap: var(--sf-space-3xs);
+    line-height: 1;
+    min-block-size: 1.75rem;
+    padding-inline: .7em;
+  }
+
+  .sf-status::before {
+    background: currentColor;
+    block-size: .42em;
+    border-radius: var(--sf-radius-full);
+    content: "";
+    inline-size: .42em;
+  }
+
+  .sf-status[data-tone="success"] {
+    --sf-status-bg: var(--sf-colour-success-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-success) 34%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-success) 76%, var(--sf-colour-foreground));
+  }
+
+  .sf-status[data-tone="warning"] {
+    --sf-status-bg: var(--sf-colour-warning-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-warning) 38%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-warning) 70%, var(--sf-colour-foreground));
+  }
+
+  .sf-status[data-tone="danger"] {
+    --sf-status-bg: var(--sf-colour-danger-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-danger) 34%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-danger) 76%, var(--sf-colour-foreground));
+  }
+
+  .sf-status[data-tone="info"] {
+    --sf-status-bg: var(--sf-colour-info-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-info) 34%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-info) 76%, var(--sf-colour-foreground));
+  }
+
+  .sf-data-list {
+    display: grid;
+  }
+
+  .sf-data-list > * {
+    align-items: center;
+    border-block-end: 1px solid var(--sf-colour-border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-xs);
+    justify-content: space-between;
+    padding-block: var(--sf-space-xs);
+  }
+
+  .sf-data-list > :last-child {
+    border-block-end: 0;
+  }
+
+  .sf-empty-state {
+    align-items: center;
+    background: var(--sf-colour-surface-alt);
+    border: 1px dashed var(--sf-colour-border-strong);
+    border-radius: var(--sf-radius-panel);
+    color: var(--sf-colour-muted);
+    display: grid;
+    gap: var(--sf-space-xs);
+    justify-items: center;
+    padding: var(--sf-space-l);
+    text-align: center;
+  }
+
+  .sf-settings-section,
+  .sf-detail-panel {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    display: grid;
+    gap: var(--sf-space-s);
+    padding: var(--sf-space-m);
+  }
+
+  .sf-detail-panel {
+    background: var(--sf-colour-surface-alt);
+  }
+
   .sf-nav {
     align-items: center;
     display: flex;

package/docs/api-contract.md

@@ -14,7 +14,7 @@ These are intended for application code and examples.
 | Tokens | Unlayered `--sf-*` custom properties emitted by `tokens.css` |
 | Theme config | `theme.fonts`, `theme.colours`, `theme.darkColours`, `theme.radii`, `theme.layout`, `theme.components` |
 | Layout classes | `sf-container`, `sf-section`, `sf-stack`, `sf-flow`, `sf-cluster`, `sf-repel`, `sf-toolbar`, `sf-app-shell`, `sf-app-sidebar`, `sf-app-main`, `sf-auto-grid`, `sf-switcher`, `sf-sidebar`, `sf-split`, `sf-frame`, `sf-cover`, `sf-metric-grid`, `sf-pipeline` |
-| Components | `sf-button`, `sf-icon`, `sf-icon-button`, `sf-avatar`, `sf-chart`, `sf-meter`, `sf-card`, `sf-surface`, `sf-hero`, `sf-nav`, `sf-form`, `sf-field`, `sf-input`, `sf-select`, `sf-textarea`, `sf-check`, `sf-alert`, `sf-badge`, `sf-section-header`, `sf-kicker` |
+| Components | `sf-button`, `sf-icon`, `sf-icon-button`, `sf-avatar`, `sf-chart`, `sf-meter`, `sf-progress`, `sf-skeleton`, `sf-filter-bar`, `sf-data-table`, `sf-status`, `sf-data-list`, `sf-empty-state`, `sf-settings-section`, `sf-detail-panel`, `sf-card`, `sf-surface`, `sf-hero`, `sf-nav`, `sf-form`, `sf-field`, `sf-input`, `sf-select`, `sf-textarea`, `sf-check`, `sf-alert`, `sf-badge`, `sf-section-header`, `sf-kicker` |
 | Native components | `sf-dialog`, `sf-popover`, `sf-tooltip`, `sf-drawer`, `sf-drawer--stack`, `sf-disclosure`, `sf-accordion`, `sf-tabs`, `sf-menu`, `sf-breadcrumb`, `sf-pagination` |
 | Website patterns | `sf-logo-cloud`, `sf-feature`, `sf-stats`, `sf-testimonial`, `sf-pricing-grid`, `sf-price-card`, `sf-faq`, `sf-cta`, `sf-footer` |
 | Utilities | `sf-prose`, `sf-link`, `sf-link-subtle`, `sf-link-plain`, `sf-list-*`, `sf-push-*`, `sf-focus-ring`, `sf-touch-target`, `sf-skip-link`, `sr-only`, `not-sr-only` |

package/docs/native-components.md

@@ -128,6 +128,26 @@ Use `sf-nav--mobile` with a popover drawer for mobile navigation. Use
 </nav>
 ```
 
+## Native Date And Time Inputs
+
+Use browser-native inputs for simple date, time, month, week, and datetime
+fields. Synced Flow styles the control shell with `sf-input`; validation,
+range rules, and custom scheduling behavior belong to the app.
+
+```html
+<form class="sf-filter-bar" action="/app/reports" method="get">
+  <label class="sf-field">
+    <span class="sf-label">From</span>
+    <input class="sf-input" name="from" type="date">
+  </label>
+  <label class="sf-field">
+    <span class="sf-label">To</span>
+    <input class="sf-input" name="to" type="date">
+  </label>
+  <button class="sf-button" type="submit">Apply</button>
+</form>
+```
+
 ## Scroll And Sticky
 
 Use CSS scroll snap and sticky positioning for full-page sections and sticky

package/docs/patterns.md

@@ -18,6 +18,12 @@ pnpm exec synced-flow pattern scroll-viewport-sections --json
 | `scroll-viewport-with-spy` | Scroll snap panels with optional IntersectionObserver active-state notes. |
 | `native-dialog-react` | Native `<dialog>` markup plus React/Next fallback shape. |
 | `popover-drawer-layout` | Popover-backed drawer or filter panel with `sf-drawer--stack`. |
+| `filter-toolbar` | Search, filters, and actions above app lists and tables. |
+| `date-filter-form` | Native date/time inputs inside filter forms. |
+| `active-filter-tags` | Visible selected filter tags with remove and clear actions. |
+| `data-table` | Native responsive table markup with status pills. |
+| `empty-state` | No-results and first-run states with clear next actions. |
+| `settings-section` | Settings/detail sections for account, team, billing, and security screens. |
 
 Pattern JSON includes:
 

package/docs/recipes.md

@@ -160,12 +160,13 @@ The recipe includes:
 - Generic account initials using `sf-avatar`
 - Inline SVG and native meter analytics using `sf-chart` and `sf-meter`
 - traditional SaaS app shell with persistent desktop navigation and a visible stacked mobile navigation rail
-- KPI cards, theme-aware toolbar, filter/search form, customer table, and activity list
+- KPI cards, theme-aware toolbar, filter/search form, native date input, active filter tags, data table, status pills, progress, skeleton loading, empty state, and activity list
 
 It uses Synced Flow primitives such as `sf-app-shell`, `sf-app-sidebar`,
 `sf-app-main`, `sf-toolbar`, `sf-metric-grid`, `sf-panel-grid`, `sf-icon`,
-`sf-chart`, `sf-chart--wide`, `sf-meter`, `sf-card`, `sf-form`, and
-`sf-table-wrap`.
+`sf-chart`, `sf-chart--wide`, `sf-meter`, `sf-progress`, `sf-skeleton`,
+`sf-card`, `sf-form`, `sf-filter-bar`, `sf-data-table`, `sf-status`,
+`sf-data-list`, `sf-empty-state`, `sf-detail-panel`, and `sf-table-wrap`.
 
 ## Documentation Page
 

package/docs/system-primitives.md

@@ -70,6 +70,8 @@ These cover the common UI elements needed for a simple site.
 | `sf-alert`, `sf-alert--info`, `sf-alert--success`, `sf-alert--warning`, `sf-alert--danger`, `sf-alert__title` | Notices and feedback. |
 | `sf-section-header`, `sf-kicker`, `sf-badge`, `sf-avatar` | Common marketing/content and account patterns. |
 | `sf-chart`, `sf-chart__plot`, `sf-chart__svg`, `sf-chart__legend`, `sf-meter-list`, `sf-meter` | Lightweight chart shells for app-owned SVG charts and native meter bars. |
+| `sf-progress`, `sf-skeleton` | Native progress bars and CSS-only loading placeholders for async app states. |
+| `sf-filter-bar`, `sf-data-table`, `sf-status`, `sf-data-list`, `sf-empty-state`, `sf-settings-section`, `sf-detail-panel` | Lean application primitives for filters, operational data, status, empty states, and settings/detail screens. |
 
 ## Utility Classes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncedco/flow",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "AI-native fluid CSS design system for brand-consistent websites and agency builds.",
   "type": "module",
   "packageManager": "pnpm@11.2.2",

package/styles.css

@@ -1468,6 +1468,181 @@
     overflow: hidden;
   }
 
+  .sf-progress {
+    accent-color: var(--sf-progress-colour, var(--sf-colour-primary));
+    block-size: var(--sf-progress-size, .625rem);
+    inline-size: 100%;
+  }
+
+  .sf-progress::-webkit-progress-bar {
+    background: var(--sf-colour-surface-alt);
+    border-radius: var(--sf-radius-full);
+  }
+
+  .sf-progress::-webkit-progress-value,
+  .sf-progress::-moz-progress-bar {
+    background: var(--sf-progress-colour, var(--sf-colour-primary));
+    border-radius: var(--sf-radius-full);
+  }
+
+  .sf-skeleton {
+    background: color-mix(in oklch, var(--sf-colour-surface-alt) 82%, var(--sf-colour-foreground));
+    border-radius: var(--sf-skeleton-radius, var(--sf-radius-md));
+    color: transparent;
+    min-block-size: var(--sf-skeleton-block-size, 1em);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sf-skeleton {
+      animation: sf-skeleton-pulse 1.4s var(--sf-ease-standard) infinite alternate;
+    }
+  }
+
+  @keyframes sf-skeleton-pulse {
+    to { opacity: .62; }
+  }
+
+  .sf-filter-bar {
+    align-items: end;
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-xs);
+    padding: var(--sf-space-s);
+  }
+
+  .sf-filter-bar > :where(.sf-field, form, label) {
+    flex: 1 1 min(100%, 14rem);
+  }
+
+  .sf-filter-bar > :where(.sf-button, button, a) {
+    flex: 0 0 auto;
+  }
+
+  .sf-data-table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    min-inline-size: var(--sf-data-table-min, 44rem);
+  }
+
+  .sf-data-table :where(th, td) {
+    border-block-end: 1px solid var(--sf-colour-border);
+    padding-block: var(--sf-data-table-padding-block, var(--sf-space-xs));
+    padding-inline: var(--sf-data-table-padding-inline, var(--sf-space-s));
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .sf-data-table :where(th) {
+    background: var(--sf-colour-surface-alt);
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+    font-weight: 800;
+  }
+
+  .sf-data-table :where(tbody tr:hover) {
+    background: color-mix(in oklch, var(--sf-colour-primary) 6%, transparent);
+  }
+
+  .sf-data-table[data-density="compact"] {
+    --sf-data-table-padding-block: var(--sf-space-2xs);
+    --sf-data-table-padding-inline: var(--sf-space-xs);
+  }
+
+  .sf-status {
+    align-items: center;
+    background: var(--sf-status-bg, var(--sf-colour-surface-alt));
+    border: 1px solid var(--sf-status-border, var(--sf-colour-border));
+    border-radius: var(--sf-radius-full);
+    color: var(--sf-status-colour, var(--sf-colour-foreground));
+    display: inline-flex;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    gap: var(--sf-space-3xs);
+    line-height: 1;
+    min-block-size: 1.75rem;
+    padding-inline: .7em;
+  }
+
+  .sf-status::before {
+    background: currentColor;
+    block-size: .42em;
+    border-radius: var(--sf-radius-full);
+    content: "";
+    inline-size: .42em;
+  }
+
+  .sf-status[data-tone="success"] {
+    --sf-status-bg: var(--sf-colour-success-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-success) 34%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-success) 76%, var(--sf-colour-foreground));
+  }
+
+  .sf-status[data-tone="warning"] {
+    --sf-status-bg: var(--sf-colour-warning-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-warning) 38%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-warning) 70%, var(--sf-colour-foreground));
+  }
+
+  .sf-status[data-tone="danger"] {
+    --sf-status-bg: var(--sf-colour-danger-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-danger) 34%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-danger) 76%, var(--sf-colour-foreground));
+  }
+
+  .sf-status[data-tone="info"] {
+    --sf-status-bg: var(--sf-colour-info-soft);
+    --sf-status-border: color-mix(in oklch, var(--sf-colour-info) 34%, transparent);
+    --sf-status-colour: color-mix(in oklch, var(--sf-colour-info) 76%, var(--sf-colour-foreground));
+  }
+
+  .sf-data-list {
+    display: grid;
+  }
+
+  .sf-data-list > * {
+    align-items: center;
+    border-block-end: 1px solid var(--sf-colour-border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-xs);
+    justify-content: space-between;
+    padding-block: var(--sf-space-xs);
+  }
+
+  .sf-data-list > :last-child {
+    border-block-end: 0;
+  }
+
+  .sf-empty-state {
+    align-items: center;
+    background: var(--sf-colour-surface-alt);
+    border: 1px dashed var(--sf-colour-border-strong);
+    border-radius: var(--sf-radius-panel);
+    color: var(--sf-colour-muted);
+    display: grid;
+    gap: var(--sf-space-xs);
+    justify-items: center;
+    padding: var(--sf-space-l);
+    text-align: center;
+  }
+
+  .sf-settings-section,
+  .sf-detail-panel {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    display: grid;
+    gap: var(--sf-space-s);
+    padding: var(--sf-space-m);
+  }
+
+  .sf-detail-panel {
+    background: var(--sf-colour-surface-alt);
+  }
+
   .sf-nav {
     align-items: center;
     display: flex;