@invisibleloop/pulse 0.1.21

package/public/examples/counter.css

@@ -0,0 +1,79 @@
+/* ─── Counter example ────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  min-height: 100dvh;
+}
+
+.cnt-root { display: flex; flex-direction: column; min-height: 100dvh; }
+
+.cnt-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+}
+
+.cnt-eyebrow {
+  font-size: .75rem;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--ui-muted);
+}
+
+/* Counter display — no component equivalent for this scale */
+.cnt-display {
+  display: flex;
+  align-items: baseline;
+  gap: .5rem;
+}
+
+.cnt-value {
+  font-size: 5rem;
+  font-weight: 800;
+  line-height: 1;
+  color: var(--ui-accent);
+  font-variant-numeric: tabular-nums;
+  min-width: 3ch;
+  text-align: center;
+}
+
+.cnt-of-max {
+  font-size: 1.5rem;
+  color: var(--ui-muted);
+}
+
+/* Progress track — server serves old markup until restart */
+.cnt-track {
+  width: 100%;
+  height: 6px;
+  background: var(--ui-border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.cnt-track-fill {
+  height: 100%;
+  background: var(--ui-accent);
+  border-radius: 3px;
+  transition: width .2s ease;
+}
+
+.cnt-step-label {
+  font-size: .8rem;
+  color: var(--ui-muted);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+
+.cnt-hint {
+  font-size: .8rem;
+  color: var(--ui-muted);
+  text-align: center;
+  max-width: 32ch;
+}

package/public/examples/pricing.css

@@ -0,0 +1,132 @@
+/* ─── Pricing example ────────────────────────────────────────────────────── */
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  min-height: 100dvh;
+}
+
+/* Logo */
+.pr-logo {
+  font-weight: 800;
+  font-size: 1.1rem;
+  letter-spacing: -.01em;
+}
+
+/* Hero */
+.pr-eyebrow {
+  font-size: .75rem;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  color: var(--ui-accent);
+  font-weight: 600;
+}
+
+/* Fluid type for hero title — kept custom since heading() uses fixed sizes */
+.pr-hero-title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 800;
+  text-align: center;
+  line-height: 1.1;
+}
+
+.pr-hero-sub {
+  color: var(--ui-muted);
+  text-align: center;
+  max-width: 44ch;
+  line-height: 1.6;
+}
+
+/* Billing toggle */
+.pr-toggle {
+  display: flex;
+  gap: .25rem;
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  border-radius: 10px;
+  padding: .25rem;
+  align-items: center;
+}
+
+.pr-save-label {
+  font-size: .7rem;
+  font-weight: 700;
+  padding: .15rem .45rem;
+  border-radius: 99px;
+  border: 1px solid currentColor;
+  color: var(--ui-text);
+}
+
+.pr-annual-note {
+  font-size: .8rem;
+  color: var(--ui-muted);
+  text-align: center;
+}
+
+/* Plans */
+.pr-plans {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.25rem;
+  width: 100%;
+  align-items: start;
+}
+
+@media (max-width: 760px) {
+  .pr-plans { grid-template-columns: 1fr; max-width: 400px; }
+}
+
+/* Feature table */
+.pr-feature-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ui-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.pr-feature-header,
+.pr-feature-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 1rem;
+  padding: .75rem 1.25rem;
+  align-items: center;
+}
+
+.pr-feature-header {
+  background: var(--ui-surface-2);
+  font-size: .8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--ui-muted);
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.pr-feature-header span:not(:first-child),
+.pr-feature-row span:not(:first-child) {
+  text-align: center;
+}
+
+.pr-feature-row {
+  font-size: .9rem;
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.pr-feature-row:last-child { border-bottom: none; }
+.pr-feature-row:nth-child(odd) { background: color-mix(in srgb, var(--ui-surface-2) 50%, transparent); }
+
+.pr-feature-name { color: var(--ui-text); }
+
+.pr-feature-val { color: var(--ui-muted); font-size: .875rem; }
+
+.pr-feature-val--yes {
+  color: #10b981;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.pr-feature-val--no {
+  color: var(--ui-border);
+}

package/public/examples/products.css

@@ -0,0 +1,100 @@
+/* ─── Products example ───────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  min-height: 100dvh;
+}
+
+.pd-root { display: flex; flex-direction: column; min-height: 100dvh; }
+
+/* Logo */
+.pd-logo-text { font-weight: 700; }
+
+/* Main */
+.pd-main {
+  flex: 1;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+/* Page header */
+.pd-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.75rem;
+}
+
+.pd-subtitle { font-size: .875rem; color: var(--ui-muted); margin-top: .25rem; }
+
+/* Sort uses ui-field/ui-select components */
+.pd-sort-wrap { display: flex; align-items: flex-end; gap: .625rem; }
+
+/* Layout: sidebar + content */
+.pd-sidebar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--ui-border);
+}
+
+/* Search — uses ui-search component */
+.ui-search { flex: 1; min-width: 200px; }
+
+/* Categories */
+.pd-category-wrap { display: flex; flex-direction: column; gap: .375rem; }
+.pd-sidebar-label { font-size: .8rem; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .05em; }
+
+.pd-categories {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: .375rem;
+}
+
+.pd-cat-pill { border-radius: 999px !important; }
+
+/* Image inside card — card overflow:hidden clips top corners; remove image radius so bottom is square */
+.ui-card .ui-image-crop { border-radius: 0; }
+
+/* Grid */
+.pd-grid {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1.25rem;
+}
+
+.pd-product-body { display: flex; flex-direction: column; gap: .5rem; padding: .875rem; }
+
+.pd-product-meta { display: flex; gap: .375rem; flex-wrap: wrap; }
+
+.pd-product-stats { display: flex; align-items: center; gap: .375rem; }
+
+.pd-rating {
+  font-size: .8rem;
+  color: #b45309;
+  font-weight: 600;
+}
+
+.pd-reviews {
+  font-size: .775rem;
+  color: var(--ui-muted);
+}
+
+.pd-price {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--ui-accent);
+}

package/public/examples/quiz.css

@@ -0,0 +1,200 @@
+/* ─── Quiz example ───────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  min-height: 100dvh;
+}
+
+.qz-root { display: flex; flex-direction: column; min-height: 100dvh; }
+
+/* Main */
+.qz-main {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 3rem 1rem;
+}
+
+.qz-card {
+  width: 100%;
+  max-width: 580px;
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 16px;
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.75rem;
+}
+
+/* Intro */
+.qz-intro-icon { font-size: 3.5rem; }
+
+/* Used for results phase heading (wraps badge HTML — cannot use heading component) */
+.qz-title {
+  font-size: 1.75rem;
+  font-weight: 800;
+  text-align: center;
+}
+
+.qz-subtitle {
+  font-size: .875rem;
+  color: var(--ui-muted);
+  text-align: center;
+}
+
+.qz-intro-desc {
+  color: var(--ui-muted);
+  text-align: center;
+  line-height: 1.6;
+  max-width: 36ch;
+}
+
+/* Progress */
+.qz-progress-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: .85rem;
+  color: var(--ui-muted);
+}
+
+/* Question */
+.qz-question {
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-align: center;
+  line-height: 1.45;
+  width: 100%;
+}
+
+/* Options */
+.qz-options {
+  list-style: none;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: .625rem;
+}
+
+.qz-option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: .875rem 1.25rem;
+  border: 1px solid var(--ui-border);
+  border-radius: 10px;
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  font-size: .95rem;
+  cursor: pointer;
+  text-align: left;
+  transition: all .15s;
+}
+
+.qz-option:hover {
+  border-color: var(--ui-accent);
+  background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
+}
+
+.qz-option:focus-visible {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: 2px;
+}
+
+.qz-option-letter {
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background: var(--ui-border);
+  color: var(--ui-muted);
+  font-size: .8rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all .15s;
+}
+
+.qz-option:hover .qz-option-letter {
+  background: var(--ui-accent);
+  color: #fff;
+}
+
+.qz-option-text { flex: 1; }
+
+/* Results */
+.qz-score-wrap { display: flex; justify-content: center; }
+
+.qz-score-ring {
+  width: 6rem;
+  height: 6rem;
+  border-radius: 50%;
+  border: 4px solid var(--ui-accent);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: .1rem;
+}
+
+.qz-score-num {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--ui-accent);
+  line-height: 1;
+}
+
+.qz-score-denom {
+  font-size: .7rem;
+  color: var(--ui-muted);
+}
+
+.qz-results {
+  list-style: none;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+
+.qz-result-row {
+  display: flex;
+  align-items: flex-start;
+  gap: .875rem;
+  padding: .875rem;
+  border-radius: 8px;
+  background: var(--ui-bg);
+  border: 1px solid var(--ui-border);
+}
+
+.qz-result-row--correct { border-left: 3px solid #10b981; }
+.qz-result-row--wrong   { border-left: 3px solid #ef4444; }
+
+.qz-result-icon {
+  flex-shrink: 0;
+  margin-top: .1rem;
+}
+
+.qz-result-row--correct .qz-result-icon { color: #10b981; }
+.qz-result-row--wrong   .qz-result-icon { color: #ef4444; }
+
+.qz-result-q {
+  font-size: .9rem;
+  line-height: 1.4;
+}
+
+.qz-result-answer {
+  font-size: .8rem;
+  color: #10b981;
+  margin-top: .25rem;
+}

package/public/examples/todos.css

@@ -0,0 +1,137 @@
+/* ─── Todos example ──────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  min-height: 100dvh;
+}
+
+.td-root { display: flex; flex-direction: column; min-height: 100dvh; }
+
+/* Main */
+.td-main {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 2.5rem 1rem;
+}
+
+.td-panel {
+  width: 100%;
+  max-width: 520px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.td-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+
+.td-counts { display: flex; gap: .375rem; }
+
+/* Form */
+.td-form { display: flex; flex-direction: column; gap: .5rem; }
+
+.td-form-row { display: flex; align-items: flex-end; gap: .5rem; }
+
+/* Override the ui-field wrapper inside the form row so it grows to fill space */
+.td-text-field { flex: 1; margin: 0; }
+
+.td-limit-msg {
+  font-size: .8rem;
+  color: var(--ui-warning, #f59e0b);
+}
+
+/* Toolbar */
+.td-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+
+.td-filters { display: flex; gap: .25rem; }
+
+/* List */
+.td-list { list-style: none; }
+
+.td-item {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  padding: .875rem 1rem;
+  border-bottom: 1px solid var(--ui-border);
+  transition: background .1s;
+}
+
+.td-item:last-child { border-bottom: none; }
+.td-item:hover { background: color-mix(in srgb, var(--ui-accent) 4%, transparent); }
+
+.td-item--done .td-text {
+  text-decoration: line-through;
+  color: var(--ui-muted);
+}
+
+/* Custom checkbox */
+.td-check-label {
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  flex: 1;
+  cursor: pointer;
+}
+
+.td-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
+
+.td-check-mark {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 2px solid var(--ui-border);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all .15s;
+}
+
+.td-checkbox:checked + .td-check-mark {
+  background: var(--ui-accent);
+  border-color: var(--ui-accent);
+}
+
+.td-checkbox:checked + .td-check-mark::after {
+  content: '';
+  width: 5px;
+  height: 9px;
+  border: 2px solid #fff;
+  border-top: none;
+  border-left: none;
+  transform: rotate(45deg) translate(-1px, -1px);
+  display: block;
+}
+
+.td-checkbox:focus-visible + .td-check-mark {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: 2px;
+}
+
+.td-text {
+  font-size: .95rem;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+/* Remove button — hidden until hover/focus */
+.td-remove-btn { opacity: 0; transition: opacity .15s; }
+.td-item:hover .td-remove-btn,
+.td-remove-btn:focus-visible { opacity: 1; }