@veams/status-quo 1.5.0 → 1.6.0

package/playground/src/assets/philosophy-agnostic.svg

@@ -1,18 +0,0 @@
-<svg width="640" height="420" viewBox="0 0 640 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="640" height="420" rx="48" fill="#0E1116"/>
-  <circle cx="320" cy="210" r="120" fill="#1B2330" stroke="#2F6BFF" stroke-width="2"/>
-  <circle cx="320" cy="210" r="64" fill="#2F6BFF" fill-opacity="0.22"/>
-  <circle cx="320" cy="210" r="24" fill="#2F6BFF"/>
-  <path d="M320 78V122" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M320 298V342" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M188 210H232" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M408 210H452" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <circle cx="320" cy="78" r="12" fill="#FF9F1C"/>
-  <circle cx="320" cy="342" r="12" fill="#7B879A"/>
-  <circle cx="188" cy="210" r="12" fill="#FF9F1C"/>
-  <circle cx="452" cy="210" r="12" fill="#7B879A"/>
-  <path d="M238 134L270 156" stroke="#E7E9EE" stroke-width="3" stroke-linecap="round"/>
-  <path d="M402 134L370 156" stroke="#E7E9EE" stroke-width="3" stroke-linecap="round"/>
-  <path d="M238 286L270 264" stroke="#E7E9EE" stroke-width="3" stroke-linecap="round"/>
-  <path d="M402 286L370 264" stroke="#E7E9EE" stroke-width="3" stroke-linecap="round"/>
-</svg>

package/playground/src/assets/philosophy-separation.svg

@@ -1,13 +0,0 @@
-<svg width="640" height="420" viewBox="0 0 640 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="640" height="420" rx="48" fill="#0E1116"/>
-  <rect x="64" y="70" width="220" height="280" rx="32" fill="#1B2330" stroke="#2F6BFF" stroke-width="2"/>
-  <rect x="356" y="70" width="220" height="280" rx="32" fill="#1B2330" stroke="#7B879A" stroke-width="2"/>
-  <rect x="90" y="110" width="170" height="28" rx="14" fill="#2F6BFF" fill-opacity="0.25"/>
-  <rect x="90" y="160" width="140" height="28" rx="14" fill="#2F6BFF" fill-opacity="0.25"/>
-  <rect x="90" y="210" width="120" height="28" rx="14" fill="#2F6BFF" fill-opacity="0.25"/>
-  <rect x="382" y="120" width="168" height="44" rx="22" fill="#2F6BFF"/>
-  <rect x="382" y="186" width="168" height="44" rx="22" fill="#FF9F1C"/>
-  <rect x="382" y="252" width="168" height="44" rx="22" fill="#7B879A"/>
-  <path d="M284 210H356" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round" stroke-dasharray="10 12"/>
-  <circle cx="320" cy="210" r="8" fill="#E7E9EE"/>
-</svg>

package/playground/src/assets/philosophy-swap.svg

@@ -1,17 +0,0 @@
-<svg width="640" height="420" viewBox="0 0 640 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="640" height="420" rx="48" fill="#0E1116"/>
-  <rect x="40" y="70" width="220" height="280" rx="28" fill="#1B2330" stroke="#2F6BFF" stroke-width="2"/>
-  <rect x="380" y="70" width="220" height="280" rx="28" fill="#1B2330" stroke="#FF9F1C" stroke-width="2"/>
-  <circle cx="150" cy="150" r="44" fill="#2F6BFF" fill-opacity="0.2"/>
-  <circle cx="150" cy="150" r="18" fill="#2F6BFF"/>
-  <circle cx="490" cy="270" r="44" fill="#FF9F1C" fill-opacity="0.2"/>
-  <circle cx="490" cy="270" r="18" fill="#FF9F1C"/>
-  <path d="M260 155H330" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M330 155L312 141" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M330 155L312 169" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M380 265H310" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M310 265L328 251" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <path d="M310 265L328 279" stroke="#E7E9EE" stroke-width="4" stroke-linecap="round"/>
-  <rect x="90" y="230" width="120" height="18" rx="9" fill="#2F6BFF" fill-opacity="0.3"/>
-  <rect x="430" y="160" width="120" height="18" rx="9" fill="#FF9F1C" fill-opacity="0.3"/>
-</svg>

package/playground/src/main.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import 'prismjs/themes/prism-tomorrow.css';
-
-import { App } from './App.js';
-import './styles.css';
-
-const rootElement = document.getElementById('root');
-
-if (!rootElement) {
-  throw new Error('Missing root element');
-}
-
-createRoot(rootElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/playground/src/styles.css

@@ -1,534 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
-
-:root {
-  color-scheme: light;
-  --bg: #f3f2ee;
-  --bg-strong: #e6e1d8;
-  --card: #ffffff;
-  --ink: #1b1b1f;
-  --muted: #5c5c66;
-  --accent: #2f6bff;
-  --accent-soft: #c9d8ff;
-  --accent-2: #ff9f1c;
-  --shadow: 0 18px 45px -30px rgba(0, 0, 0, 0.45);
-  --radius-lg: 28px;
-  --radius-md: 18px;
-  --radius-sm: 12px;
-  --panel-dark: #0e1116;
-  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  color: var(--ink);
-  background:
-    radial-gradient(circle at 20% 20%, rgba(47, 107, 255, 0.18), transparent 55%),
-    radial-gradient(circle at 80% 0%, rgba(255, 159, 28, 0.2), transparent 50%),
-    linear-gradient(160deg, var(--bg), var(--bg-strong));
-}
-
-#root {
-  min-height: 100vh;
-}
-
-.app {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 56px 28px 72px;
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-}
-
-.brand-bar {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 600;
-  justify-content: center;
-  width: 100%;
-}
-
-.brand-logo {
-  width: 260px;
-  height: auto;
-  display: block;
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 10px 6px;
-  width: 100%;
-}
-
-.nav-toggle {
-  display: none;
-  border: 1px solid rgba(27, 27, 31, 0.18);
-  background: rgba(255, 255, 255, 0.85);
-  color: var(--ink);
-  border-radius: 999px;
-  padding: 8px 14px;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  box-shadow: var(--shadow);
-}
-
-.nav-links {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  padding: 6px 12px;
-  width: min(100%, 980px);
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 999px;
-  border: 1px solid rgba(27, 27, 31, 0.1);
-  box-shadow: var(--shadow);
-}
-
-.nav-links a {
-  text-decoration: none;
-  color: var(--ink);
-  font-weight: 500;
-  padding: 6px 12px;
-  border-radius: 999px;
-  transition: background 0.2s ease, color 0.2s ease;
-}
-
-.nav-links a:hover {
-  background: rgba(47, 107, 255, 0.12);
-  color: var(--accent);
-}
-
-.hero {
-  display: grid;
-  gap: 16px;
-  padding: 32px 34px;
-  background: rgba(255, 255, 255, 0.75);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow);
-  border: 1px solid rgba(27, 27, 31, 0.08);
-  backdrop-filter: blur(14px);
-  animation: fade-up 0.6s ease both;
-}
-
-.hero.intro {
-  gap: 18px;
-}
-
-h1 {
-  font-size: clamp(2rem, 1.6vw + 1.4rem, 2.8rem);
-  line-height: 1.15;
-  margin: 0;
-}
-
-h2 {
-  margin: 0;
-  font-size: 1.4rem;
-}
-
-h3 {
-  margin: 0 0 8px;
-}
-
-p {
-  margin: 0;
-  color: var(--muted);
-  line-height: 1.6;
-
-  span {
-    font-family: monospace;
-    font-weight: 700;
-    font-size: .9rem;
-  }
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.eyebrow {
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  font-size: 0.7rem;
-  color: var(--muted);
-  margin-bottom: 10px;
-}
-
-.subtext {
-  max-width: 600px;
-}
-
-.hero .subtext {
-  margin-top: 12px;
-}
-
-.hero .subtext + .subtext {
-  margin-top: 10px;
-}
-
-.grid {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  align-items: stretch;
-}
-
-.doc-section {
-  display: grid;
-  gap: 18px;
-  padding: 28px;
-  border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.85);
-  border: 1px solid rgba(27, 27, 31, 0.08);
-  box-shadow: var(--shadow);
-}
-
-.doc-copy {
-  display: grid;
-  gap: 10px;
-}
-
-.doc-snippets {
-  display: grid;
-  gap: 12px;
-}
-
-.singleton-grid {
-  display: grid;
-  gap: 20px;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  align-items: stretch;
-}
-
-.singleton-card {
-  background: #fff;
-  border-radius: var(--radius-md);
-  padding: 22px;
-  border: 1px solid rgba(27, 27, 31, 0.08);
-  box-shadow: var(--shadow);
-  display: grid;
-  gap: 14px;
-  align-content: start;
-  height: 100%;
-}
-
-.singleton-count {
-  font-size: 2.4rem;
-  font-weight: 700;
-  color: var(--ink);
-  background: var(--bg-strong);
-  border-radius: var(--radius-sm);
-  padding: 10px 16px;
-  width: fit-content;
-}
-
-.singleton-count.highlight {
-  background: rgba(47, 107, 255, 0.16);
-  color: var(--accent);
-}
-
-.singleton-hint {
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.guide {
-  display: grid;
-  gap: 20px;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  align-items: stretch;
-}
-
-.api-flow {
-  display: grid;
-  gap: 30px;
-}
-
-.api-group {
-  display: grid;
-  gap: 18px;
-}
-
-.api-grid {
-  display: grid;
-  gap: 18px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  align-items: stretch;
-}
-
-.api-composition-card {
-  padding: 2px 0 18px;
-  border-bottom: 1px solid rgba(27, 27, 31, 0.16);
-  display: grid;
-  gap: 10px;
-  align-content: start;
-}
-
-.api-composition-card h3 {
-  margin: 0;
-  font-size: 1rem;
-}
-
-.api-composition-punch {
-  margin-top: 8px;
-  font-weight: 600;
-  color: var(--ink);
-  background: linear-gradient(120deg, rgba(47, 107, 255, 0.14), rgba(255, 159, 28, 0.14));
-  border: 1px solid rgba(47, 107, 255, 0.2);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-}
-
-.api-card {
-  background: #fff;
-  border-radius: var(--radius-sm);
-  padding: 18px;
-  border: 1px solid rgba(27, 27, 31, 0.08);
-  box-shadow: var(--shadow);
-  display: grid;
-  gap: 10px;
-  align-content: start;
-  height: 100%;
-}
-
-.api-card h3 {
-  margin: 0;
-  font-size: 1rem;
-}
-
-.api-card-wide {
-  grid-column: 1 / -1;
-}
-
-.philosophy-grid {
-  display: grid;
-  gap: 20px;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  align-items: stretch;
-}
-
-.philosophy-card {
-  background: #fff;
-  border-radius: var(--radius-md);
-  border: 1px solid rgba(27, 27, 31, 0.08);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-  display: grid;
-  gap: 16px;
-  align-content: start;
-  height: 100%;
-}
-
-.philosophy-card img {
-  width: 100%;
-  height: 190px;
-  object-fit: cover;
-  background: var(--panel-dark);
-}
-
-.philosophy-card div {
-  padding: 0 20px 22px;
-  display: grid;
-  gap: 8px;
-}
-
-.guide-card {
-  background: rgba(255, 255, 255, 0.85);
-  border-radius: var(--radius-md);
-  padding: 22px;
-  border: 1px solid rgba(27, 27, 31, 0.08);
-  box-shadow: var(--shadow);
-  display: grid;
-  gap: 16px;
-  align-content: start;
-  height: 100%;
-}
-
-.guide-highlight {
-  margin-top: 4px;
-  font-weight: 600;
-  color: var(--ink);
-  background: linear-gradient(120deg, rgba(47, 107, 255, 0.16), rgba(255, 159, 28, 0.16));
-  border: 1px solid rgba(47, 107, 255, 0.2);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-}
-
-.code-block.compact {
-  font-size: 0.75rem;
-  padding: 12px 14px;
-}
-
-.card {
-  background: var(--card);
-  border-radius: var(--radius-md);
-  padding: 24px;
-  box-shadow: var(--shadow);
-  border: 1px solid rgba(27, 27, 31, 0.08);
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  animation: fade-up 0.6s ease both;
-  height: 100%;
-}
-
-.card:nth-child(2) {
-  animation-delay: 0.1s;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.count-chip {
-  background: var(--accent-soft);
-  color: var(--accent);
-  border-radius: 999px;
-  padding: 6px 14px;
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-.count-display {
-  display: grid;
-  gap: 8px;
-  padding: 16px;
-  border-radius: var(--radius-sm);
-  background: linear-gradient(120deg, rgba(47, 107, 255, 0.1), rgba(255, 159, 28, 0.08));
-}
-
-.code-block {
-  margin: 0;
-  padding: 16px 18px;
-  border-radius: var(--radius-sm);
-  background: #12131a;
-  color: #f0f2ff;
-  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
-  font-size: 0.8rem;
-  line-height: 1.5;
-  overflow-x: auto;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-}
-
-.code-block code {
-  font-family: inherit;
-}
-
-.count-label {
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.count-value {
-  font-size: 2.6rem;
-  font-weight: 700;
-}
-
-.actions {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
-  gap: 10px;
-}
-
-.btn {
-  border: 1px solid rgba(27, 27, 31, 0.18);
-  border-radius: 999px;
-  padding: 10px 14px;
-  font: inherit;
-  background: #fff;
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
-}
-
-.btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 10px 20px -14px rgba(27, 27, 31, 0.4);
-}
-
-.btn.primary {
-  background: var(--accent);
-  color: #fff;
-  border-color: transparent;
-}
-
-.btn.ghost {
-  background: transparent;
-  color: var(--ink);
-}
-
-@keyframes fade-up {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 720px) {
-  .app {
-    padding: 40px 20px 60px;
-  }
-
-  .nav {
-    padding: 0;
-  }
-
-  .nav-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-  }
-
-  .nav-links {
-    display: none;
-    width: 100%;
-    border-radius: var(--radius-md);
-    padding: 10px;
-    gap: 8px;
-  }
-
-  .nav-links.is-open {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .nav-links a {
-    text-align: center;
-  }
-
-  .doc-section {
-    padding: 22px;
-  }
-
-  .api-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .hero {
-    padding: 26px;
-  }
-
-  .footer-card {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}

package/playground/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "noEmit": true,
-    "baseUrl": ".",
-    "paths": {
-      "@veams/status-quo": ["../src/index.ts"]
-    }
-  },
-  "include": ["src"]
-}

package/playground/vite.config.ts

@@ -1,18 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { fileURLToPath, URL } from 'node:url';
-
-export default defineConfig({
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  base: './',
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@veams/status-quo': fileURLToPath(new URL('../src/index.ts', import.meta.url)),
-    },
-  },
-  build: {
-    outDir: fileURLToPath(new URL('../docs', import.meta.url)),
-    emptyOutDir: true,
-  },
-});