@zaip-ai/cli 0.1.0 → 1.0.2

package/templates/.zaip-aios/design/apps/catalog/src/styles/components.css

@@ -0,0 +1,228 @@
+.card {
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  padding: 24px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+}
+.card-accent {
+  background: linear-gradient(180deg, #f3feff 0%, #ffffff 100%);
+}
+.card h3 {
+  margin: 24px 0 8px;
+  font-size: 1.45rem;
+  letter-spacing: -0.025em;
+}
+.card > p {
+  color: #526176;
+  line-height: 1.65;
+}
+.button {
+  min-height: 46px;
+  border-radius: 999px;
+  padding: 12px 22px;
+  border: 1px solid transparent;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    filter 150ms ease,
+    background 150ms ease;
+}
+.button:not(:disabled):hover {
+  transform: translateY(-1px);
+}
+.button-primary {
+  background: linear-gradient(135deg, #00b0f0 0%, #72f4fb 100%);
+  color: #042330;
+}
+.button-secondary {
+  border-color: rgba(0, 176, 240, 0.45);
+  background: transparent;
+  color: #006b91;
+}
+.button-ghost {
+  border-color: #dbe4ef;
+  background: #ffffff;
+  color: #0f172a;
+}
+.button:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: #eef2f7;
+  color: #475569;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+.badge-accent {
+  background: #dffcff;
+  color: #006b91;
+}
+.badge-success {
+  background: #dcfce7;
+  color: #166534;
+}
+.badge-warning {
+  background: #fffbeb;
+  color: #92400e;
+}
+.badge-error {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: #0f172a;
+  font-weight: 650;
+}
+.field small,
+.field i {
+  color: #526176;
+  font-size: 0.78rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+}
+.field input,
+.field select {
+  width: 100%;
+  min-height: 48px;
+  border: 1px solid #cbd5e1;
+  border-radius: 16px;
+  padding: 12px 14px;
+  background: #ffffff;
+  color: #0f172a;
+}
+.field input[aria-invalid="true"] {
+  border-color: #dc2626;
+}
+.field em {
+  color: #dc2626;
+  font-size: 0.78rem;
+  font-style: normal;
+  font-weight: 600;
+}
+.form-grid {
+  row-gap: 24px;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+.metric-value {
+  display: block;
+  margin-top: 14px;
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.045em;
+}
+.metric-change {
+  margin-bottom: 0;
+  color: #526176;
+}
+.table-wrap {
+  overflow-x: auto;
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+}
+table {
+  width: 100%;
+  min-width: 640px;
+  border-collapse: collapse;
+}
+th,
+td {
+  padding: 16px 20px;
+  border-bottom: 1px solid #dbe4ef;
+  text-align: left;
+}
+th {
+  color: #526176;
+  font-size: 0.72rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+.table-wrap td small {
+  display: block;
+  margin-top: 4px;
+  color: #526176;
+}
+.number {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.empty-state {
+  display: grid;
+  justify-items: center;
+  padding: 28px;
+  text-align: center;
+}
+.empty-state h3 {
+  margin: 18px 0 0;
+}
+.empty-state p {
+  max-width: 440px;
+  margin: 8px 0 24px;
+}
+.empty-icon {
+  display: grid;
+  width: 64px;
+  height: 64px;
+  place-items: center;
+  border-radius: 24px;
+  background: #dffcff;
+  color: #006b91;
+  font-size: 2rem;
+}
+
+.theme-dark .card,
+.theme-dark .table-wrap {
+  border-color: var(--border);
+  background: var(--surface);
+  box-shadow: none;
+}
+.theme-dark .card-accent {
+  background: linear-gradient(180deg, rgba(0, 176, 240, 0.09) 0%, var(--surface) 100%);
+}
+.theme-dark .card > p,
+.theme-dark .metric-change,
+.theme-dark .table-wrap td small,
+.theme-dark th,
+.theme-dark .field small,
+.theme-dark .field i {
+  color: var(--text-muted);
+}
+.theme-dark .field {
+  color: var(--text);
+}
+.theme-dark .field input,
+.theme-dark .field select,
+.theme-dark .button-ghost {
+  border-color: var(--border);
+  background: #0f172a;
+  color: var(--text);
+}
+.theme-dark .button-secondary {
+  color: #7dd3fc;
+}
+.theme-dark th,
+.theme-dark td {
+  border-color: var(--border);
+}

package/templates/.zaip-aios/design/apps/catalog/src/styles/design-system.css

@@ -0,0 +1,137 @@
+.semantic-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+.semantic-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  min-height: 148px;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 22px;
+  background: var(--surface);
+}
+.semantic-success {
+  border-color: rgba(22, 163, 74, 0.3);
+  background: linear-gradient(145deg, rgba(22, 163, 74, 0.12), var(--surface) 72%);
+}
+.semantic-warning {
+  border-color: rgba(217, 119, 6, 0.32);
+  background: linear-gradient(145deg, rgba(217, 119, 6, 0.12), var(--surface) 72%);
+}
+.semantic-danger {
+  border-color: rgba(220, 38, 38, 0.3);
+  background: linear-gradient(145deg, rgba(220, 38, 38, 0.1), var(--surface) 72%);
+}
+.semantic-dot {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  margin-top: 3px;
+  border: 4px solid var(--surface);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px currentColor;
+}
+.semantic-card strong,
+.semantic-card code {
+  display: block;
+}
+.semantic-card p {
+  margin: 7px 0 14px;
+  color: var(--text-muted);
+  line-height: 1.45;
+}
+.semantic-card code {
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+}
+
+.dark-specimen {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
+  gap: 18px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 28px;
+  padding: clamp(24px, 5vw, 48px);
+  background: radial-gradient(circle at 88% 8%, rgba(0, 176, 240, 0.17), transparent 28%), #0a0e17;
+  color: #f1f5f9;
+  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
+}
+.dark-specimen-copy > .eyebrow {
+  margin-top: 40px;
+  color: #7dd3fc;
+}
+.dark-specimen h3 {
+  max-width: 620px;
+  margin: 10px 0 14px;
+  font-size: clamp(1.9rem, 4vw, 3.4rem);
+  line-height: 1.03;
+  letter-spacing: -0.045em;
+}
+.dark-specimen-copy > p:not(.eyebrow) {
+  max-width: 600px;
+  color: #94a3b8;
+  line-height: 1.65;
+}
+.dark-specimen .button-secondary {
+  color: #7dd3fc;
+}
+.dark-metric-card {
+  align-self: end;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 24px;
+  padding: 24px;
+  background: rgba(17, 24, 39, 0.8);
+  backdrop-filter: blur(10px);
+}
+.dark-metric-card > strong {
+  display: block;
+  margin: 18px 0 32px;
+  color: #ffffff;
+  font-size: clamp(2.6rem, 6vw, 4.5rem);
+  line-height: 1;
+  letter-spacing: -0.055em;
+}
+.dark-status-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.theme-dark {
+  color-scheme: dark;
+  --surface: #111827;
+  --surface-muted: #0a0e17;
+  --text: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --border: rgba(255, 255, 255, 0.12);
+}
+.theme-dark .catalog-section,
+.theme-dark .type-sample {
+  border-color: var(--border);
+}
+.theme-dark .lede,
+.theme-dark .section-heading p,
+.theme-dark .swatch small,
+.theme-dark .scale-grid code {
+  color: var(--text-muted);
+}
+.theme-dark .swatch,
+.theme-dark .scale-grid > div {
+  border-color: var(--border);
+  background: var(--surface);
+  box-shadow: none;
+}
+.theme-dark .swatch code,
+.theme-dark .type-sample span,
+.theme-dark .eyebrow,
+.theme-dark .metric-label {
+  color: #7dd3fc;
+}
+.theme-dark .swatch > div {
+  border-color: var(--border);
+}

package/templates/.zaip-aios/design/apps/catalog/src/styles.css

@@ -0,0 +1,85 @@
+@import "./styles/catalog.css";
+@import "./styles/design-system.css";
+@import "./styles/components.css";
+
+:root {
+  color-scheme: light;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #0f172a;
+  background: #f5f7fb;
+  --primary: #00b0f0;
+  --primary-strong: #018abb;
+  --primary-ink: #006b91;
+  --secondary: #0a0e17;
+  --surface: #ffffff;
+  --surface-muted: #f5f7fb;
+  --text: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #526176;
+  --border: #dbe4ef;
+  --neutral-border: #e2e8f0;
+  --neutral-muted: #94a3b8;
+  --neutral-surface: #f8fafc;
+  --success: #16a34a;
+  --success-ink: #166534;
+  --warning: #d97706;
+  --warning-ink: #92400e;
+  --error: #dc2626;
+  --error-ink: #b91c1c;
+  --focus: #00b0f0;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  background: #f5f7fb;
+}
+button,
+input,
+select {
+  font: inherit;
+}
+button,
+a,
+input,
+select {
+  -webkit-tap-highlight-color: transparent;
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 3px solid rgba(0, 176, 240, 0.45);
+  outline-offset: 3px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  .button {
+    transition-duration: 0.01ms;
+  }
+}

package/templates/.zaip-aios/design/apps/catalog/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": [
+    ".storybook/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "vite.config.ts",
+    "vitest.config.ts"
+  ]
+}

package/templates/.zaip-aios/design/apps/catalog/vite.config.ts

@@ -0,0 +1,10 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  base: "./",
+  cacheDir: "../../../../.cache/vite/design-catalog",
+  plugins: [react()],
+  build: { outDir: "dist" },
+  server: { host: "127.0.0.1", port: 5174, strictPort: true },
+});

package/templates/.zaip-aios/design/apps/catalog/vitest.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: { exclude: ["node_modules/**", "dist/**"] },
+});

package/templates/.zaip-aios/design/packages/local-runtime/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@zaip-ai/design-local-runtime",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "node --test runtime.test.mjs"
+  }
+}