npm - @syncedco/flow - Versions diffs - 0.1.0 - Mend

@syncedco/flow 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/CODE_OF_CONDUCT.md +26 -0
package/CONTRIBUTING.md +54 -0
package/LICENSE +21 -0
package/README.md +334 -0
package/SECURITY.md +30 -0
package/SUPPORT.md +32 -0
package/TRADEMARKS.md +14 -0
package/base.css +100 -0
package/bin/synced-flow.mjs +4639 -0
package/components.css +1392 -0
package/defaults.css +26 -0
package/dist/config.d.ts +94 -0
package/dist/config.js +3 -0
package/dist/index.d.ts +45 -0
package/dist/index.js +67 -0
package/docs/accessibility-css.md +133 -0
package/docs/ai-usage.md +112 -0
package/docs/api-contract.md +81 -0
package/docs/base-styling.md +113 -0
package/docs/build-a-site-walkthrough.md +122 -0
package/docs/cli-reference.md +230 -0
package/docs/config-reference.md +81 -0
package/docs/css-optimisation.md +117 -0
package/docs/migration-from-tailwind.md +60 -0
package/docs/native-components.md +156 -0
package/docs/patterns.md +32 -0
package/docs/presets.md +60 -0
package/docs/quick-start.md +252 -0
package/docs/recipes.md +285 -0
package/docs/release-readiness.md +63 -0
package/docs/system-primitives.md +150 -0
package/docs/tailwind-comparison.md +66 -0
package/docs/tokens.md +79 -0
package/docs/website-patterns.md +114 -0
package/docs/why-synced-flow.md +99 -0
package/docs/wordpress.md +66 -0
package/examples/README.md +16 -0
package/examples/astro/package.json +19 -0
package/examples/astro/src/pages/index.astro +85 -0
package/examples/astro/src/styles/synced-flow.css +2 -0
package/examples/astro/src/styles/synced-flow.generated.css +206 -0
package/examples/astro/synced-flow.config.mjs +9 -0
package/examples/next/app/layout.tsx +14 -0
package/examples/next/app/page.tsx +92 -0
package/examples/next/app/synced-flow.css +2 -0
package/examples/next/app/synced-flow.generated.css +205 -0
package/examples/next/package.json +19 -0
package/examples/next/synced-flow.config.mjs +9 -0
package/examples/plain-html/index.html +384 -0
package/examples/plain-html/package.json +15 -0
package/examples/plain-html/synced-flow.config.mjs +9 -0
package/examples/plain-html/synced-flow.css +2 -0
package/examples/plain-html/synced-flow.generated.css +205 -0
package/examples/templates/README.md +22 -0
package/examples/templates/blog-index.html +41 -0
package/examples/templates/coming-soon.html +27 -0
package/examples/templates/portfolio-scroll.html +45 -0
package/examples/templates/saas-dashboard.html +171 -0
package/examples/templates/saas-landing.html +104 -0
package/examples/vite/index.html +2 -0
package/examples/vite/package.json +20 -0
package/examples/vite/src/main.jsx +27 -0
package/examples/vite/src/synced-flow.css +2 -0
package/examples/vite/src/synced-flow.generated.css +205 -0
package/examples/vite/synced-flow.config.mjs +9 -0
package/examples/wordpress/assets/css/synced-flow.css +641 -0
package/examples/wordpress/functions.php +13 -0
package/examples/wordpress/package.json +15 -0
package/examples/wordpress/parts/footer.html +12 -0
package/examples/wordpress/parts/header.html +10 -0
package/examples/wordpress/patterns/contact-cta.php +28 -0
package/examples/wordpress/patterns/feature-grid.php +38 -0
package/examples/wordpress/patterns/landing-hero.php +45 -0
package/examples/wordpress/synced-flow.config.mjs +11 -0
package/examples/wordpress/templates/front-page.html +11 -0
package/examples/wordpress/templates/index.html +27 -0
package/examples/wordpress/theme.json +19 -0
package/layout.css +365 -0
package/package.json +93 -0
package/reset.css +13 -0
package/skills/synced-flow/SKILL.md +151 -0
package/src/config.ts +98 -0
package/src/index.ts +75 -0
package/src/presets.d.mts +21 -0
package/src/presets.mjs +171 -0
package/src/tokens.mjs +138 -0
package/src/utility-tokens.mjs +47 -0
package/styles.css +2313 -0
package/tokens.css +198 -0
package/utilities.css +255 -0

package/examples/templates/blog-index.html ADDED Viewed

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synced Flow Blog Index Template</title>
+    <link rel="stylesheet" href="../plain-html/synced-flow.css" />
+  </head>
+  <body>
+    <main class="sf-section">
+      <div class="sf-container sf-stack">
+        <nav class="sf-breadcrumb" aria-label="Breadcrumb">
+          <a href="/">Home</a>
+          <span>Resources</span>
+        </nav>
+        <header class="sf-section-header">
+          <p class="sf-kicker">Resources</p>
+          <h1 class="sf-text-display">Ideas, guides, and product notes.</h1>
+        </header>
+        <div class="sf-auto-grid">
+          <article class="sf-card sf-card--interactive sf-stack">
+            <p class="sf-meta">Guide - 6 min read</p>
+            <h2 class="sf-text-h4"><a class="sf-link-plain" href="/articles/theme-tokens">Theme tokens first</a></h2>
+            <p class="sf-text-muted">Keep brand decisions reusable.</p>
+          </article>
+          <article class="sf-card sf-card--interactive sf-stack">
+            <p class="sf-meta">Pattern - 4 min read</p>
+            <h2 class="sf-text-h4"><a class="sf-link-plain" href="/articles/native-ui">Native UI patterns</a></h2>
+            <p class="sf-text-muted">Use browser primitives before JavaScript.</p>
+          </article>
+        </div>
+        <nav class="sf-pagination" aria-label="Pagination">
+          <a href="#">Previous</a>
+          <a aria-current="page" href="#">1</a>
+          <a href="#">2</a>
+          <a href="#">Next</a>
+        </nav>
+      </div>
+    </main>
+  </body>
+</html>

package/examples/templates/coming-soon.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synced Flow Coming Soon Template</title>
+    <link rel="stylesheet" href="../plain-html/synced-flow.css" />
+  </head>
+  <body>
+    <main class="sf-section">
+      <section class="sf-container sf-split">
+        <div class="sf-stack">
+          <p class="sf-badge">Coming soon</p>
+          <h1 class="sf-text-display">A new product is almost ready.</h1>
+          <p class="sf-text-lead sf-prose">Join the list for launch updates.</p>
+        </div>
+        <form class="sf-form sf-card">
+          <label class="sf-field">
+            <span class="sf-label">Email</span>
+            <input class="sf-input" type="email" placeholder="you@example.com" required />
+          </label>
+          <button class="sf-button" type="submit">Join waitlist</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>

package/examples/templates/portfolio-scroll.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synced Flow Scroll Portfolio Template</title>
+    <link rel="stylesheet" href="../plain-html/synced-flow.css" />
+  </head>
+  <body>
+    <header class="sf-section sf-section--compact sf-sticky-top sf-bg-background">
+      <nav class="sf-container sf-nav" aria-label="Portfolio navigation">
+        <a class="sf-nav__link" href="#intro">Studio</a>
+        <ul class="sf-nav__list">
+          <li><a class="sf-nav__link" href="#work">Work</a></li>
+          <li><a class="sf-nav__link" href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="sf-scroll-viewport" data-snap="mandatory">
+      <section class="sf-scroll-panel" id="intro">
+        <div class="sf-container sf-stack">
+          <p class="sf-kicker">Selected work</p>
+          <h1 class="sf-text-display">Fluid portfolio panels with native scroll snap.</h1>
+          <p class="sf-text-lead sf-prose">Use each panel for one story, proof point, or call to action.</p>
+        </div>
+      </section>
+      <section class="sf-scroll-panel" id="work">
+        <div class="sf-container sf-split">
+          <div class="sf-card sf-stack">
+            <p class="sf-badge">Case study</p>
+            <h2 class="sf-text-h2">Project title</h2>
+            <p class="sf-text-muted">Replace this panel with project details.</p>
+          </div>
+          <div class="sf-frame sf-card" aria-label="Project media placeholder"></div>
+        </div>
+      </section>
+      <section class="sf-scroll-panel" id="contact">
+        <div class="sf-container sf-stack">
+          <h2 class="sf-text-h2">Let's build the next one.</h2>
+          <a class="sf-button" href="mailto:hello@example.com">Start a project</a>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/examples/templates/saas-dashboard.html ADDED Viewed

@@ -0,0 +1,171 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synced Flow SaaS Dashboard Template</title>
+    <link rel="stylesheet" href="../plain-html/synced-flow.css" />
+  </head>
+  <body>
+    <a class="sf-skip-link" href="#dashboard-main">Skip to dashboard</a>
+    <div class="sf-app-shell" data-sf-dashboard-theme data-sf-theme="light">
+      <aside class="sf-app-sidebar sf-stack" aria-label="Workspace navigation">
+        <div class="sf-app-sidebar__brand">
+          <span class="sf-badge" aria-hidden="true">SF</span>
+          <div><strong>Product Suite</strong><br><span class="sf-text-muted">Workspace</span></div>
+        </div>
+        <nav class="sf-nav" aria-label="Primary">
+          <p class="sf-kicker">Overview</p>
+          <ul class="sf-nav__list">
+            <li><a class="sf-nav__link" href="#dashboard-main" aria-current="page"><svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg><span>Dashboard</span></a></li>
+            <li><a class="sf-nav__link" href="#command"><svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg><span>Command centre</span></a></li>
+          </ul>
+          <p class="sf-kicker">Workspace</p>
+          <ul class="sf-nav__list">
+            <li><a class="sf-nav__link" href="#customers"><svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg><span>Customers</span></a></li>
+            <li><a class="sf-nav__link" href="#activity"><svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg><span>Activity</span></a></li>
+            <li><a class="sf-nav__link" href="#billing"><svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg><span>Billing</span></a></li>
+          </ul>
+          <p class="sf-kicker">System</p>
+          <ul class="sf-nav__list">
+            <li><a class="sf-nav__link" href="/app/settings"><svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg><span>Settings</span></a></li>
+          </ul>
+        </nav>
+        <footer class="sf-stack sf-stack--tight sf-push-block-end">
+          <div class="sf-cluster">
+            <span class="sf-badge" aria-hidden="true">S</span>
+            <span><strong>Account owner</strong><br><span class="sf-text-muted">Admin role</span></span>
+          </div>
+          <form action="/logout" method="post"><button class="sf-button sf-button--ghost sf-button--block" type="submit">Sign out</button></form>
+          <p class="sf-text-caption sf-text-muted">Product Suite v1.0</p>
+        </footer>
+      </aside>
+      <main class="sf-app-main sf-stack sf-stack--loose" id="dashboard-main">
+        <header class="sf-toolbar">
+          <div class="sf-cluster">
+            <button class="sf-button sf-button--outline sf-button--icon" type="button" aria-label="Open workspace menu">
+              <svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="7" y2="7"></line><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="17" y2="17"></line></svg>
+            </button>
+            <form class="sf-field" role="search">
+              <label class="sf-visually-hidden" for="dashboard-search">Search workspace</label>
+              <input class="sf-input" id="dashboard-search" type="search" placeholder="Search or type command..." size="36">
+            </form>
+            <span class="sf-badge" aria-hidden="true">Cmd K</span>
+          </div>
+          <div class="sf-cluster" aria-label="Theme, notifications, and signed-in user">
+            <button class="sf-button sf-button--outline sf-button--icon" type="button" aria-label="Use light theme" aria-pressed="true" data-sf-theme-choice="light">
+              <svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
+            </button>
+            <button class="sf-button sf-button--outline sf-button--icon" type="button" aria-label="Use dark theme" aria-pressed="false" data-sf-theme-choice="dark">
+              <svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 7.4A9 9 0 1 1 12 3Z"></path></svg>
+            </button>
+            <button class="sf-button sf-button--outline sf-button--icon" type="button" aria-label="View notifications">
+              <svg class="sf-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.27 21a2 2 0 0 0 3.46 0"></path><path d="M18 8a6 6 0 1 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"></path></svg>
+            </button>
+            <div class="sf-cluster" aria-label="Signed in as Admin">
+              <span class="sf-avatar" aria-hidden="true">A</span>
+              <strong>Admin</strong>
+            </div>
+          </div>
+        </header>
+        <section class="sf-metric-grid" aria-label="Workspace metrics">
+          <article class="sf-card sf-stack sf-stack--tight"><div class="sf-repel"><p class="sf-kicker">Accounts</p><span class="sf-badge">+12</span></div><strong class="sf-text-h3 sf-font-sans">128</strong><span class="sf-text-muted">Active workspaces</span></article>
+          <article class="sf-card sf-stack sf-stack--tight"><div class="sf-repel"><p class="sf-kicker">Revenue</p><span class="sf-badge">Month</span></div><strong class="sf-text-h3 sf-font-sans">£78k</strong><span class="sf-text-muted">Tracked this month</span></article>
+          <article class="sf-card sf-stack sf-stack--tight"><div class="sf-repel"><p class="sf-kicker">Tasks</p><span class="sf-badge">5 due</span></div><strong class="sf-text-h3 sf-font-sans">24</strong><span class="sf-text-muted">Open actions</span></article>
+          <article class="sf-card sf-stack sf-stack--tight"><div class="sf-repel"><p class="sf-kicker">Health</p><span class="sf-badge">Good</span></div><strong class="sf-text-h3 sf-font-sans">94%</strong><span class="sf-text-muted">Across accounts</span></article>
+        </section>
+        <section class="sf-panel-grid" data-density="featured" aria-labelledby="analytics-title">
+          <article class="sf-card sf-chart sf-chart--wide sf-stack" aria-labelledby="analytics-title">
+            <div class="sf-repel">
+              <div><p class="sf-kicker">Analytics</p><h2 class="sf-card__title sf-font-sans" id="analytics-title">Revenue trend</h2></div>
+              <span class="sf-badge">+12%</span>
+            </div>
+            <div class="sf-chart__plot">
+              <svg class="sf-chart__svg" viewBox="0 0 320 160" role="img" aria-labelledby="revenue-chart-title revenue-chart-desc">
+                <title id="revenue-chart-title">Revenue trend for the last six months</title>
+                <desc id="revenue-chart-desc">Revenue rises from twenty eight thousand pounds to seventy eight thousand pounds with one mid-period dip.</desc>
+                <path class="sf-chart__grid" d="M20 30H300M20 75H300M20 120H300"></path>
+                <path class="sf-chart__axis" d="M20 20V140H304"></path>
+                <path class="sf-chart__area" d="M20 124L72 104L124 112L176 76L228 54L280 34L280 140L20 140Z"></path>
+                <path class="sf-chart__line" d="M20 124L72 104L124 112L176 76L228 54L280 34"></path>
+                <circle class="sf-chart__point" cx="280" cy="34" r="4"></circle>
+              </svg>
+            </div>
+            <div class="sf-chart__legend" aria-label="Chart legend">
+              <span class="sf-chart__legend-item"><span class="sf-chart__swatch" aria-hidden="true"></span>Revenue</span>
+              <span class="sf-text-muted">£78k current month</span>
+            </div>
+          </article>
+          <article class="sf-card sf-chart sf-stack" aria-labelledby="capacity-title">
+            <div><p class="sf-kicker">Capacity</p><h2 class="sf-card__title sf-font-sans" id="capacity-title">Usage by area</h2></div>
+            <div class="sf-meter-list">
+              <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>
+            </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>
+        </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>
+            <div class="sf-table-wrap">
+              <table>
+                <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>
+                </tbody>
+              </table>
+            </div>
+          </article>
+          <article class="sf-card sf-stack" 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>
+            </ul>
+          </article>
+        </section>
+        <section class="sf-card sf-form" 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>
+            <span class="sf-badge">Auth UI only</span>
+          </div>
+          <div class="sf-panel-grid">
+            <label class="sf-field"><span class="sf-label">Email</span><input class="sf-input" type="email" autocomplete="email" placeholder="you@example.com"></label>
+            <label class="sf-field"><span class="sf-label">Password</span><input class="sf-input" type="password" autocomplete="current-password"></label>
+          </div>
+          <label class="sf-check"><input type="checkbox" name="remember"> <span>Remember this device</span></label>
+          <div class="sf-cluster"><button class="sf-button" type="submit">Sign in</button><a class="sf-link" href="/forgot-password">Forgot password?</a></div>
+        </section>
+      </main>
+    </div>
+    <script>
+      (() => {
+        const shell = document.querySelector("[data-sf-dashboard-theme]");
+        const buttons = document.querySelectorAll("[data-sf-theme-choice]");
+        const storageKey = "synced-flow-dashboard-theme";
+        const setTheme = (theme) => {
+          shell?.setAttribute("data-sf-theme", theme);
+          buttons.forEach((button) => {
+            button.setAttribute("aria-pressed", String(button.dataset.sfThemeChoice === theme));
+          });
+          localStorage.setItem(storageKey, theme);
+        };
+        const stored = localStorage.getItem(storageKey);
+        if (stored === "light" || stored === "dark") setTheme(stored);
+        buttons.forEach((button) => {
+          button.addEventListener("click", () => setTheme(button.dataset.sfThemeChoice));
+        });
+      })();
+    </script>
+  </body>
+</html>

package/examples/templates/saas-landing.html ADDED Viewed

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synced Flow SaaS Landing Template</title>
+    <link rel="stylesheet" href="../plain-html/synced-flow.css" />
+  </head>
+  <body>
+    <a class="sf-skip-link" href="#main">Skip to main content</a>
+    <header class="sf-section sf-section--compact sf-sticky-top sf-bg-background">
+      <nav class="sf-container sf-nav" aria-label="Main navigation">
+        <a class="sf-nav__link" href="/">Product</a>
+        <ul class="sf-nav__list">
+          <li><a class="sf-nav__link" href="#features">Features</a></li>
+          <li><a class="sf-nav__link" href="#pricing">Pricing</a></li>
+          <li><a class="sf-nav__link" href="#faq">FAQ</a></li>
+        </ul>
+        <a class="sf-button sf-button--sm" href="#contact">Book demo</a>
+      </nav>
+    </header>
+    <main id="main">
+      <section class="sf-section">
+        <div class="sf-container sf-split">
+          <div class="sf-stack">
+            <p class="sf-kicker">Launch faster</p>
+            <h1 class="sf-text-display">A modern product site without page-specific CSS.</h1>
+            <p class="sf-text-lead sf-prose">Compose hero, proof, pricing, FAQ, and contact sections from Synced Flow primitives.</p>
+            <div class="sf-cluster">
+              <a class="sf-button sf-button--default" href="#contact">Start free</a>
+              <a class="sf-button sf-button--outline" href="#features">View features</a>
+            </div>
+          </div>
+          <aside class="sf-card sf-stack">
+            <p class="sf-badge">Included</p>
+            <ul class="sf-list-disc">
+              <li>Fluid tokens</li>
+              <li>Native components</li>
+              <li>Accessible states</li>
+            </ul>
+          </aside>
+        </div>
+      </section>
+      <section class="sf-section" id="features">
+        <div class="sf-container sf-stack">
+          <header class="sf-section-header" data-align="center">
+            <p class="sf-kicker">Features</p>
+            <h2 class="sf-text-h2">Everything a basic website needs.</h2>
+          </header>
+          <div class="sf-auto-grid">
+            <article class="sf-card sf-card--interactive sf-stack">
+              <h3 class="sf-text-h4">Tokens</h3>
+              <p class="sf-text-muted">Theme type, colour, radius, motion, and surfaces.</p>
+            </article>
+            <article class="sf-card sf-card--interactive sf-stack">
+              <h3 class="sf-text-h4">Patterns</h3>
+              <p class="sf-text-muted">Hero, cards, nav, forms, pricing, FAQ, and CTA.</p>
+            </article>
+            <article class="sf-card sf-card--interactive sf-stack">
+              <h3 class="sf-text-h4">Guardrails</h3>
+              <p class="sf-text-muted">Doctor, lint, catalog, and recipe discovery.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section class="sf-section" id="pricing">
+        <div class="sf-container sf-stack">
+          <header class="sf-section-header" data-align="center">
+            <p class="sf-kicker">Pricing</p>
+            <h2 class="sf-text-h2">Simple plans.</h2>
+          </header>
+          <div class="sf-pricing-grid">
+            <article class="sf-price-card">
+              <h3>Starter</h3>
+              <p class="sf-price">$19</p>
+              <a class="sf-button sf-button--outline" href="#contact">Choose Starter</a>
+            </article>
+            <article class="sf-price-card" data-featured="true">
+              <h3>Team</h3>
+              <p class="sf-price">$49</p>
+              <a class="sf-button" href="#contact">Choose Team</a>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section class="sf-section" id="faq">
+        <div class="sf-container sf-stack">
+          <header class="sf-section-header">
+            <p class="sf-kicker">FAQ</p>
+            <h2 class="sf-text-h2">Answers before the call.</h2>
+          </header>
+          <details class="sf-disclosure">
+            <summary>Does this require JavaScript components?</summary>
+            <p>No. Synced Flow styles native HTML and CSS primitives.</p>
+          </details>
+          <details class="sf-disclosure">
+            <summary>Can the theme change?</summary>
+            <p>Yes. Put brand decisions in synced-flow.config.mjs theme tokens.</p>
+          </details>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/examples/vite/index.html ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <div id="root"></div>
2	+ <script type="module" src="/src/main.jsx"></script>

package/examples/vite/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "synced-flow-vite-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "flow:build": "synced-flow build",
+    "flow:check": "synced-flow build --check",
+    "flow:lint": "synced-flow lint",
+    "flow:watch": "synced-flow watch",
+    "flow:doctor": "synced-flow doctor"
+  },
+  "dependencies": {
+    "@syncedco/flow": "file:../..",
+    "@vitejs/plugin-react": "^5.0.0",
+    "vite": "^7.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/examples/vite/src/main.jsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { createRoot } from 'react-dom/client'
+import './synced-flow.css'
+function App() {
+  return (
+    <main className="sf-section">
+      <section className="sf-container sf-stack">
+        <p className="sf-badge">Strict fluid starter</p>
+        <h1 className="sf-text-display">A reusable styling foundation for practical interfaces.</h1>
+        <p className="sf-text-lead sf-prose">
+          Synced Flow gives new projects tokens, layout primitives, and generated utilities without starting from breakpoints.
+        </p>
+        <div className="sf-cluster">
+          <a className="sf-button sf-button--default" href="/">
+            Start building
+          </a>
+          <a className="sf-button sf-button--outline" href="https://github.com/SyncedCo/synced-flow">
+            View package
+          </a>
+        </div>
+      </section>
+    </main>
+  )
+}
+createRoot(document.getElementById('root')).render(<App />)

package/examples/vite/src/synced-flow.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @import "@syncedco/flow/styles.css";
2	+ @import "./synced-flow.generated.css";