@saywright/studio 0.0.0-stage → 0.1.1

package/dist/sample/src/styles.css

@@ -0,0 +1,155 @@
+/* Tidewell design tokens. Components read these; nothing else should hardcode colors. */
+:root {
+  --ink: #1b1f1c;
+  --ink-2: #4a504b;
+  --ink-3: #8a908a;
+  --bg: #f7f6f2;
+  --surface: #ffffff;
+  --line: #e9e7e0;
+  --line-2: #dedbd2;
+  --brand: #1f4d3a;
+  --brand-ink: #ffffff;
+  --brand-soft: #e7efe9;
+  --success: #2f7a4d;
+  --success-soft: #e6f2ea;
+  --danger: #b4362b;
+  --danger-soft: #fbeae7;
+  --focus: #2b6cb0;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-display: 'New York', 'Iowan Old Style', Georgia, serif;
+  --shadow-sm: 0 1px 2px rgba(20, 24, 20, 0.05);
+  --shadow-md: 0 6px 24px rgba(20, 24, 20, 0.06);
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body {
+  font-family: var(--font);
+  color: var(--ink);
+  background: var(--bg);
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+button, input { font: inherit; color: inherit; }
+:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+/* layout */
+.shell { min-height: 100vh; display: flex; flex-direction: column; }
+.header { height: 64px; display: flex; align-items: center; gap: 28px; padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--line); }
+.logo { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--brand); text-decoration: none; letter-spacing: -0.01em; }
+.nav { display: flex; gap: 4px; }
+.nav a { color: var(--ink-2); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; }
+.nav a[aria-current='page'] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
+.header-end { margin-left: auto; color: var(--ink-3); font-size: 13px; display: flex; align-items: center; gap: 8px; }
+.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px 40px 64px; }
+.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
+.steps { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; }
+.steps i { width: 20px; height: 1px; background: var(--line-2); }
+.steps b { color: var(--ink); font-weight: 600; }
+.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
+.stack { display: grid; gap: 24px; }
+@media (max-width: 860px) { .checkout { grid-template-columns: minmax(0, 1fr); } .page { padding: 24px 20px 48px; } .header { padding: 0 20px; } }
+
+/* design system: Card */
+.ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
+.ds-card[data-padding='sm'] { padding: var(--space-4); }
+.ds-card[data-padding='md'] { padding: var(--space-6); }
+.ds-card[data-padding='lg'] { padding: var(--space-8); }
+.ds-card[data-tone='muted'] { background: var(--bg); }
+.ds-card[data-tone='brand'] { background: var(--brand-soft); border-color: transparent; }
+.ds-card-title { margin: 0 0 var(--space-4); font-size: 15px; font-weight: 600; }
+
+/* Heading */
+.ds-heading { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
+.ds-heading[data-size='sm'] { font-size: 18px; }
+.ds-heading[data-size='md'] { font-size: 24px; }
+.ds-heading[data-size='lg'] { font-size: 32px; }
+.ds-heading[data-size='xl'] { font-size: 44px; }
+
+/* Button */
+.ds-button { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: var(--radius-md); white-space: nowrap; transition: background 0.15s, box-shadow 0.15s, transform 0.05s; }
+.ds-button:active { transform: translateY(1px); }
+.ds-button[data-size='sm'] { height: 34px; padding: 0 14px; font-size: 13px; }
+.ds-button[data-size='md'] { height: 44px; padding: 0 18px; font-size: 15px; }
+.ds-button[data-size='lg'] { height: 54px; padding: 0 24px; font-size: 16px; }
+.ds-button[data-variant='primary'] { background: var(--brand); color: var(--brand-ink); }
+.ds-button[data-variant='primary']:hover { background: #18402f; }
+.ds-button[data-variant='secondary'] { background: var(--surface); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
+.ds-button[data-variant='secondary']:hover { background: var(--brand-soft); }
+.ds-button[data-variant='ghost'] { background: transparent; color: var(--ink-2); }
+.ds-button[data-variant='ghost']:hover { background: var(--bg); }
+.ds-button[data-variant='link'] { background: transparent; color: var(--brand); padding-left: 6px; padding-right: 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
+.ds-button[data-variant='danger'] { background: var(--danger); color: #fff; }
+.ds-button[data-full='true'] { width: 100%; }
+.ds-button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Badge */
+.ds-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
+.ds-badge[data-tone='neutral'] { background: var(--bg); color: var(--ink-2); }
+.ds-badge[data-tone='success'] { background: var(--success-soft); color: var(--success); }
+.ds-badge[data-tone='danger'] { background: var(--danger-soft); color: var(--danger); }
+.ds-badge[data-tone='brand'] { background: var(--brand-soft); color: var(--brand); }
+
+/* SummaryRow */
+.ds-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink-2); min-height: 32px; }
+.ds-row[data-size='sm'] { font-size: 13px; }
+.ds-row[data-size='md'] { font-size: 15px; }
+.ds-row[data-size='lg'] { font-size: 18px; }
+.ds-row[data-emphasis='strong'] { color: var(--ink); font-weight: 700; }
+.ds-row[data-tone='success'] .ds-row-value { color: var(--success); font-weight: 600; }
+.ds-row[data-tone='danger'] .ds-row-value { color: var(--danger); font-weight: 600; }
+.ds-row-value { font-variant-numeric: tabular-nums; }
+
+/* TextField */
+.ds-field { display: grid; gap: 6px; }
+.ds-field label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
+.ds-input { height: 44px; border-radius: var(--radius-md); border: 1px solid var(--line-2); background: var(--surface); padding: 0 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
+.ds-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
+.ds-input[aria-invalid='true'] { border-color: var(--danger); }
+.ds-field-hint { font-size: 12px; color: var(--ink-3); }
+.ds-field-hint[data-tone='danger'] { color: var(--danger); }
+
+/* checkout pieces */
+.address { color: var(--ink-2); line-height: 1.6; }
+.line-items { display: grid; }
+.line-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
+.line-item:first-child { border-top: 0; padding-top: 0; }
+.thumb { width: 56px; height: 56px; border-radius: 12px; }
+.line-item b { display: block; font-weight: 600; }
+.line-item small { color: var(--ink-3); font-size: 12.5px; }
+.price { font-variant-numeric: tabular-nums; }
+.coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
+.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--success-soft); }
+.summary { display: grid; gap: 6px; }
+.summary hr { border: 0; height: 1px; background: var(--line); margin: 8px 0; width: 100%; }
+.pay-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }
+
+/* shop */
+.ds-grid { display: grid; }
+.ds-grid[data-columns='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.ds-grid[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.ds-grid[data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.ds-grid[data-gap='sm'] { gap: var(--space-3); }
+.ds-grid[data-gap='md'] { gap: var(--space-6); }
+.ds-grid[data-gap='lg'] { gap: var(--space-8); }
+.ds-grid[data-gap='xl'] { gap: 48px; }
+.product { display: grid; gap: 10px; }
+.product-img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
+.product-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.product-meta b { font-weight: 600; }
+.product-meta span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
+.product small { color: var(--ink-3); }
+.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow-md); }

package/dist/sample/tests/smoke.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+test('checkout page loads', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('heading', { name: 'Checkout' })).toBeVisible();
+  await expect(page.getByTestId('summary-total')).toContainText('$');
+});

package/dist/sample/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "ES2023",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "customConditions": [
+      "source"
+    ],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": false,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "types": [
+      "vite/client",
+      "node"
+    ]
+  },
+  "include": [
+    "src",
+    "tests",
+    "playwright.config.ts",
+    "vite.config.ts"
+  ]
+}

package/dist/sample/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import saywright from '@saywright/vite';
+
+export default defineConfig({
+  plugins: [saywright(), react()],
+  server: { port: 5174 },
+});

package/dist/server/node-BgmEDdmn.mjs

@@ -0,0 +1,23 @@
+import { p as __exportAll } from "../cli.mjs";
+import * as path$1 from "node:path";
+import * as fs$1 from "node:fs";
+import * as child_process from "node:child_process";
+import * as util from "node:util";
+import * as crypto$1 from "node:crypto";
+import * as stream from "node:stream";
+//#region ../../node_modules/@anthropic-ai/sdk/internal/node.mjs
+/**
+* The one module under `src/` that may import Node built-ins (eslint enforces this).
+* The package.json `browser` field swaps it for `./node.browser`, so only touch its
+* exports on code paths that run on Node-compatible runtimes.
+*/
+var node_exports = /* @__PURE__ */ __exportAll({
+	child_process: () => child_process,
+	crypto: () => crypto$1,
+	fs: () => fs$1,
+	path: () => path$1,
+	stream: () => stream,
+	util: () => util
+});
+//#endregion
+export { path$1 as a, node_exports as i, crypto$1 as n, stream as o, fs$1 as r, util as s, child_process as t };