@zaip-ai/cli 1.0.4 → 1.0.7

package/templates/.zaip-aios/design/apps/catalog/src/stories/Components.stories.tsx

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ComponentsPage } from "../pages/ComponentsPage.js";
-
-const meta = {
-  title: "ZAIP/Components",
-  component: ComponentsPage,
-  parameters: { layout: "fullscreen" },
-} satisfies Meta<typeof ComponentsPage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Catalog: Story = {};

package/templates/.zaip-aios/design/apps/catalog/src/stories/DesignSystem.stories.tsx

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DesignSystemPage } from "../pages/DesignSystemPage.js";
-
-const meta = {
-  title: "ZAIP/Design System",
-  component: DesignSystemPage,
-  parameters: { layout: "fullscreen" },
-} satisfies Meta<typeof DesignSystemPage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Overview: Story = {};

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

@@ -1,315 +0,0 @@
-.catalog-shell {
-  min-height: 100vh;
-  background: var(--surface-muted);
-  color: var(--text);
-  transition:
-    background 180ms ease,
-    color 180ms ease;
-}
-.topbar {
-  position: sticky;
-  z-index: 20;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 72px;
-  padding: 0 5vw;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(10, 14, 23, 0.94);
-  color: #f1f5f9;
-  backdrop-filter: blur(18px);
-}
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  color: inherit;
-  text-decoration: none;
-}
-.brand-logo {
-  display: block;
-  width: 84px;
-  height: 40px;
-  object-fit: contain;
-}
-.brand-product {
-  padding-left: 12px;
-  border-left: 1px solid rgba(255, 255, 255, 0.2);
-  color: #f1f5f9;
-  font-size: 0.84rem;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-.topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-.topbar nav {
-  display: flex;
-  gap: 8px;
-}
-.topbar nav a {
-  border-radius: 999px;
-  padding: 9px 14px;
-  color: #94a3b8;
-  text-decoration: none;
-}
-.topbar nav a:hover,
-.topbar nav a[aria-current="page"] {
-  background: rgba(0, 176, 240, 0.12);
-  color: #00b0f0;
-}
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 38px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 999px;
-  padding: 8px 13px;
-  background: rgba(255, 255, 255, 0.06);
-  color: #f1f5f9;
-  font-size: 0.78rem;
-  font-weight: 700;
-  cursor: pointer;
-}
-.theme-toggle:hover {
-  border-color: rgba(0, 176, 240, 0.55);
-  background: rgba(0, 176, 240, 0.1);
-}
-
-main {
-  width: min(1180px, 90vw);
-  margin: 0 auto;
-  padding-bottom: 80px;
-}
-.page-intro {
-  padding: clamp(72px, 10vw, 128px) 0 56px;
-}
-.eyebrow,
-.metric-label {
-  margin: 0;
-  color: #006b91;
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-h1,
-h2,
-h3,
-p {
-  overflow-wrap: anywhere;
-}
-h1 {
-  max-width: 900px;
-  margin: 12px 0 0;
-  font-size: clamp(2.5rem, 6vw, 4.25rem);
-  line-height: 1.05;
-  letter-spacing: -0.05em;
-}
-.lede {
-  max-width: 760px;
-  margin: 24px 0 0;
-  color: #526176;
-  font-size: clamp(1.05rem, 2vw, 1.25rem);
-  line-height: 1.7;
-}
-.catalog-section {
-  padding: 48px 0;
-  border-top: 1px solid #dbe4ef;
-}
-.section-heading {
-  display: grid;
-  grid-template-columns: minmax(0, 0.75fr) minmax(260px, 1fr);
-  gap: 32px;
-  margin-bottom: 28px;
-}
-.section-heading h2 {
-  margin: 0;
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  line-height: 1.15;
-  letter-spacing: -0.035em;
-}
-.section-heading p {
-  margin: 4px 0 0;
-  color: #526176;
-  line-height: 1.65;
-}
-
-.swatch-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 16px;
-}
-.swatch {
-  overflow: hidden;
-  border: 1px solid #dbe4ef;
-  border-radius: 24px;
-  background: #ffffff;
-  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
-}
-.swatch > div {
-  height: 118px;
-  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
-}
-.swatch strong,
-.swatch code,
-.swatch small {
-  display: block;
-  margin-inline: 18px;
-}
-.swatch strong {
-  margin-top: 16px;
-}
-.swatch code {
-  margin-top: 4px;
-  color: #006b91;
-}
-.swatch small {
-  margin-top: 8px;
-  margin-bottom: 18px;
-  color: #526176;
-}
-.type-sample {
-  padding: 24px 0;
-  border-bottom: 1px solid #dbe4ef;
-}
-.type-sample:last-child {
-  border: 0;
-}
-.type-sample span {
-  display: block;
-  margin-bottom: 12px;
-  color: #006b91;
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-.type-display {
-  font-size: clamp(2.2rem, 5vw, 4rem);
-  font-weight: 650;
-  line-height: 1.05;
-  letter-spacing: -0.05em;
-}
-.type-heading {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 650;
-  line-height: 1.15;
-  letter-spacing: -0.035em;
-}
-.type-body {
-  max-width: 720px;
-  font-size: 1rem;
-  line-height: 1.65;
-}
-.two-column,
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
-}
-.row,
-.specimen-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-  margin-top: 24px;
-}
-.specimen-row:first-child {
-  margin-top: 0;
-}
-.scale-grid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 12px;
-}
-.scale-grid div {
-  display: grid;
-  min-height: 112px;
-  align-content: center;
-  justify-items: center;
-  gap: 12px;
-  border: 1px solid #dbe4ef;
-  border-radius: 16px;
-  background: #ffffff;
-}
-.scale-grid span {
-  display: block;
-  height: 20px;
-  min-width: 4px;
-  background: #00b0f0;
-}
-.scale-grid i {
-  width: 48px;
-  height: 48px;
-  border: 2px solid #00b0f0;
-}
-.scale-grid code {
-  color: #526176;
-  font-size: 0.72rem;
-}
-footer {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 28px 5vw;
-  border-top: 1px solid rgba(255, 255, 255, 0.12);
-  background: #0a0e17;
-  color: #94a3b8;
-  font-size: 0.8rem;
-}
-
-@media (max-width: 760px) {
-  .topbar {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 12px;
-    padding-block: 14px;
-  }
-  .topbar nav {
-    width: 100%;
-  }
-  .topbar-actions {
-    width: 100%;
-    align-items: stretch;
-    flex-direction: column;
-  }
-  .topbar nav a {
-    flex: 1;
-    text-align: center;
-  }
-  main {
-    width: min(100% - 32px, 1180px);
-  }
-  .section-heading,
-  .two-column,
-  .form-grid,
-  .dark-specimen {
-    grid-template-columns: 1fr;
-  }
-  .semantic-grid,
-  .metric-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .scale-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  footer {
-    flex-direction: column;
-  }
-}
-
-@media (max-width: 480px) {
-  .semantic-grid,
-  .metric-grid {
-    grid-template-columns: 1fr;
-  }
-  .scale-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}

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

@@ -1,228 +0,0 @@
-.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

@@ -1,137 +0,0 @@
-.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);
-}