vds-test-empty 1.0.0

package/.cursorrules

@@ -0,0 +1,12 @@
+# VDS — Vibe Design System
+Bu proje VDS kullanıyor. Komutlar:
+- npm run vds → projeyi tara
+- npm run vds:stories → Storybook story'lerini üret
+- npm run vds:watch → değişiklikleri izle
+- npm run storybook → design system'ı aç (localhost:6006)
+
+Geliştirme kuralları:
+- UI component'leri src/components/ui/ altına koy
+- Variant'lar için cva() kullan
+- Tailwind CSS kullan
+- Named export veya default export — ikisi de çalışır

package/.storybook/main.ts

@@ -0,0 +1,10 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,4 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+const preview: Preview = { parameters: { layout: "centered" } };
+export default preview;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "vds-test-empty",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "vds": "node vds-core/scan.mjs",
+    "vds:stories": "node vds-core/story-generator.mjs",
+    "vds:watch": "node vds-core/watch.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "@storybook/react": "^10.2.13",
+    "@storybook/react-vite": "^10.2.13",
+    "storybook": "^10.2.13"
+  }
+}

package/public/vds-output.json

@@ -0,0 +1,26 @@
+{
+  "branch": null,
+  "engineer": null,
+  "scannedAt": "2026-02-28T18:28:49.571Z",
+  "totalComponents": 0,
+  "components": [],
+  "foundations": {
+    "colors": {},
+    "typography": {},
+    "radius": {},
+    "shadows": {},
+    "spacing": {},
+    "breakpoints": {},
+    "zIndex": {},
+    "motion": {
+      "transitionDuration": {},
+      "transitionTimingFunction": {},
+      "animation": {}
+    },
+    "icons": [],
+    "brand": {
+      "assets": []
+    }
+  },
+  "componentSuggestions": []
+}

package/src/stories/foundations/Brand.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = { title: "Foundations/Brand" } satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+const assets = [];
+
+export const Default: Story = {
+  render: () => (
+    <div>
+      <h2 style={{ marginBottom: 16 }}>Logo and favicon paths</h2>
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        {assets.length === 0 ? <li>No brand assets found.</li> : assets.map((a, i) => (
+          <li key={i} style={{ padding: "8px 0", borderBottom: "1px solid #222" }}>
+            <strong>{a.type || "asset"}</strong>: <code>{a.path || a.name || ""}</code>
+          </li>
+        ))}
+      </ul>
+    </div>
+  ),
+};

package/src/stories/foundations/Colors.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = { title: "Foundations/Colors" } satisfies Meta;
+export default meta;
+type Story = StoryObj;
+
+const colors = [];
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "1rem" }}>
+      {colors.map(({ name, hex }) => (
+        <div key={name}>
+          <div style={{ backgroundColor: hex, height: 80, borderRadius: 8, border: "1px solid #333" }} />
+          <p style={{ marginTop: 8, fontSize: 12 }}>{name}</p>
+          <code style={{ fontSize: 11 }}>{hex}</code>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/vds-core/README.md

@@ -0,0 +1,52 @@
+# VDS Core — Ghost mode
+
+Zero-config, autonomous design system. Drop this folder into any Vite + React project and activate with one route.
+
+## Activation (any project)
+
+1. **Scan** (regenerate manifest):
+   ```bash
+   npm run vds
+   ```
+   Add to `package.json` if missing:
+   ```json
+   "vds": "node vds-core/scan.mjs"
+   ```
+
+2. **Mount** the dashboard (e.g. in your router):
+   ```tsx
+   import VdsDashboard from "@/vds-core";
+   // ...
+   <Route path="/vds" element={<VdsDashboard />} />
+   ```
+
+3. Ensure `public/vds-output.json` exists (created by step 1). Then open `/vds`.
+
+## Live component preview (optional)
+
+To see **live renders** of components in the dashboard (isolated, no app chrome):
+
+1. Add the preview route **outside** any layout that has your app header, sidebar, or nav. Otherwise every preview iframe will show your full app shell instead of just the component.
+   ```tsx
+   import VdsPreview from "./vds-core/VdsPreview";  // or from node_modules/vibe-design-system/vds-core-template/
+   // ...
+   <Routes>
+     {/* Preview must NOT be inside a layout with header/sidebar */}
+     <Route path="/vds-preview" element={<VdsPreview />} />
+     <Route path="/" element={<YourLayoutWithHeader />}>
+       <Route index element={<Home />} />
+       {/* ... */}
+     </Route>
+   </Routes>
+   ```
+
+2. If you open the dashboard from the **standalone server** (e.g. `npm run vds:watch` → Dashboard at `http://localhost:3334/vds`), run your app as well (e.g. `npm run dev` on port 5173). The dashboard will load previews from that app. If your app runs on another port (e.g. 3000), set:
+   ```bash
+   VDS_PREVIEW_URL=http://localhost:3000 node vds-core/dashboard-server.mjs
+   ```
+
+## Layout
+
+- `vds-core/scan.mjs` — Node script; scans `src/components`, CSS, Tailwind config. Writes `vds-output.json` and `public/vds-output.json`. Paths are relative to **project root** (parent of `vds-core`).
+- `vds-core/VdsPreview.tsx` — Optional; mount at `/vds-preview` so the dashboard can show live component renders.
+- Dashboard UI reads `/vds-output.json`, renders Foundations + Component Library.

package/vds-core/VdsPreview.tsx

@@ -0,0 +1,72 @@
+/**
+ * VDS Component Preview — mount at /vds-preview so the dashboard can show live component renders.
+ *
+ * Important: Render this route OUTSIDE any layout that contains your app header, sidebar, or nav.
+ * Otherwise every component preview iframe will show your full app shell instead of the component alone.
+ *
+ * Example (React Router):
+ *   <Route path="/vds-preview" element={<VdsPreview />} />   // at root, not inside <LayoutWithHeader>
+ *
+ * Requires Vite; uses import.meta.glob. Path alias @/components must point to src/components.
+ */
+import React, { useEffect, useState, Suspense } from "react";
+import { useSearchParams } from "react-router-dom";
+
+const componentModules = import.meta.glob("@/components/**/*.tsx");
+
+export default function VdsPreview() {
+  const [searchParams] = useSearchParams();
+  const file = searchParams.get("file");
+  const [Component, setComponent] = useState<React.ComponentType | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!file) {
+      setError("Missing ?file= parameter");
+      setComponent(null);
+      return;
+    }
+    const normalized = file.replace(/\\/g, "/");
+    const key = Object.keys(componentModules).find((k) => {
+      const kk = k.replace(/\\/g, "/");
+      return kk === `@/components/${normalized}` || kk.endsWith("/components/" + normalized) || kk.endsWith(normalized);
+    });
+    if (!key) {
+      setError(`Component not found: ${file}`);
+      setComponent(null);
+      return;
+    }
+    const loader = componentModules[key] as () => Promise<{ default: React.ComponentType }>;
+    loader()
+      .then((m) => {
+        setComponent(() => m.default);
+        setError(null);
+      })
+      .catch((err) => {
+        setError(String(err?.message || err));
+        setComponent(null);
+      });
+  }, [file]);
+
+  if (error) {
+    return (
+      <div style={{ padding: 24, background: "#0f172a", minHeight: 200, color: "#94a3b8", fontSize: 13 }}>
+        {error}
+      </div>
+    );
+  }
+  if (!Component) {
+    return (
+      <div style={{ padding: 24, background: "#0f172a", minHeight: 200, color: "#94a3b8", fontSize: 13 }}>
+        Loading…
+      </div>
+    );
+  }
+  return (
+    <div style={{ padding: 24, background: "#020617", minHeight: 200 }}>
+      <Suspense fallback={<div style={{ color: "#94a3b8", fontSize: 13 }}>Loading component…</div>}>
+        <Component />
+      </Suspense>
+    </div>
+  );
+}

package/vds-core/dashboard-server.mjs

@@ -0,0 +1,237 @@
+#!/usr/bin/env node
+/**
+ * VDS Dashboard Server — http://localhost:PORT
+ * - /vds → pre-compiled dashboard from node_modules/vibe-design-system/dist/dashboard
+ * - Port: 3333, or first available 3333..3342 (EADDRINUSE resilience)
+ * - Proje kökünde çalıştırın: node vds-core/dashboard-server.mjs (init ile kopyalanır)
+ */
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import http from "http";
+import net from "net";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = path.join(__dirname, "..");
+const PUBLIC_MANIFEST = path.join(PROJECT_ROOT, "public", "vds-output.json");
+const ASSET_EXTENSIONS = /\.(svg|png|jpg|jpeg|ico|webp|gif)$/i;
+
+const PORT_MIN = 3333;
+const PORT_MAX = 3342;
+const MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".ico": "image/x-icon",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".webp": "image/webp",
+  ".gif": "image/gif",
+  ".woff2": "font/woff2",
+};
+
+function findDashboardDir() {
+  const candidates = [
+    path.join(PROJECT_ROOT, "node_modules", "vibe-design-system", "dist", "dashboard"),
+  ];
+  let dir = PROJECT_ROOT;
+  for (let i = 0; i < 5; i++) {
+    const nm = path.join(dir, "node_modules", "vibe-design-system", "dist", "dashboard");
+    if (!candidates.includes(nm)) candidates.push(nm);
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  for (const d of candidates) {
+    if (fs.existsSync(d) && fs.statSync(d).isDirectory()) return d;
+  }
+  return null;
+}
+
+function findAvailablePort(startPort) {
+  return new Promise((resolve) => {
+    const tryPort = (port) => {
+      if (port > PORT_MAX) {
+        resolve(null);
+        return;
+      }
+      const server = net.createServer(() => {});
+      server.once("error", (err) => {
+        if (err.code === "EADDRINUSE") tryPort(port + 1);
+        else resolve(port);
+      });
+      server.once("listening", () => {
+        server.close(() => resolve(port));
+      });
+      server.listen(port, "127.0.0.1");
+    };
+    tryPort(startPort);
+  });
+}
+
+function readManifest() {
+  try {
+    if (fs.existsSync(PUBLIC_MANIFEST)) {
+      return fs.readFileSync(PUBLIC_MANIFEST, "utf-8");
+    }
+  } catch (_) {}
+  return JSON.stringify({ components: [], totalComponents: 0, scannedAt: new Date().toISOString() });
+}
+
+const sseClients = new Set();
+
+function notifyManifestChange() {
+  const data = JSON.stringify({ type: "vds-output-changed", ts: Date.now() });
+  for (const res of sseClients) {
+    try {
+      res.write(`data: ${data}\n\n`);
+    } catch (_) {}
+  }
+}
+
+function setupWatcher() {
+  const dir = path.dirname(PUBLIC_MANIFEST);
+  if (!fs.existsSync(dir)) return;
+  try {
+    fs.watch(PUBLIC_MANIFEST, (event, filename) => {
+      if (filename && event === "change") notifyManifestChange();
+    });
+  } catch (_) {}
+}
+
+function safeEnd(res, statusCode, body, contentType = "text/plain; charset=utf-8") {
+  if (res.writableEnded) return;
+  res.writeHead(statusCode, { "Content-Type": contentType });
+  res.end(body);
+}
+
+const server = http.createServer((req, res) => {
+  const url = req.url?.split("?")[0] || "";
+  const method = req.method;
+
+  try {
+    if (method === "GET" && url === "/api/vds-preview-url") {
+      const url = process.env.VDS_PREVIEW_URL || "http://localhost:5173";
+      safeEnd(res, 200, JSON.stringify({ url }), "application/json; charset=utf-8");
+      return;
+    }
+    if (method === "GET" && (url === "/vds-output.json" || url === "/api/vds-output")) {
+      safeEnd(res, 200, readManifest(), "application/json; charset=utf-8");
+      return;
+    }
+
+    if (method === "GET" && url.startsWith("/api/vds-asset")) {
+      const u = new URL(req.url || "", `http://127.0.0.1`);
+      const filePath = u.searchParams.get("path");
+      if (!filePath || filePath.includes("..") || path.isAbsolute(filePath)) {
+        safeEnd(res, 400, "Bad request");
+        return;
+      }
+      if (!ASSET_EXTENSIONS.test(filePath)) {
+        safeEnd(res, 403, "Forbidden");
+        return;
+      }
+      const fullPath = path.join(PROJECT_ROOT, filePath);
+      const resolved = path.resolve(fullPath);
+      if (!resolved.startsWith(path.resolve(PROJECT_ROOT)) || !fs.existsSync(resolved) || !fs.statSync(resolved).isFile()) {
+        safeEnd(res, 404, "Not found");
+        return;
+      }
+      const ext = path.extname(resolved).toLowerCase();
+      const contentType = MIME[ext] || "application/octet-stream";
+      try {
+        const data = fs.readFileSync(resolved);
+        if (res.writableEnded) return;
+        res.writeHead(200, { "Content-Type": contentType });
+        res.end(data);
+      } catch (_) {
+        safeEnd(res, 500, "Internal Server Error");
+      }
+      return;
+    }
+
+    if (method === "GET" && url === "/api/vds-output/events") {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      });
+      sseClients.add(res);
+      res.write("data: " + JSON.stringify({ type: "connected" }) + "\n\n");
+      req.on("close", () => sseClients.delete(res));
+      return;
+    }
+
+    if (method === "GET" && (url === "/vds" || url.startsWith("/vds/"))) {
+      const dashboardDir = findDashboardDir();
+      if (!dashboardDir) {
+        safeEnd(
+          res,
+          503,
+          "VDS dashboard bulunamadı. npm install vibe-design-system ile kurun; paket dist/dashboard içerir.",
+          "text/plain; charset=utf-8"
+        );
+        return;
+      }
+      const sub = url === "/vds" || url === "/vds/" ? "/vds/index.html" : url;
+      const relativePath = sub.slice("/vds".length).replace(/^\//, "") || "index.html";
+      const filePath = path.join(dashboardDir, relativePath);
+      if (!path.resolve(filePath).startsWith(path.resolve(dashboardDir))) {
+        safeEnd(res, 403, "Forbidden");
+        return;
+      }
+      if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) {
+        const indexHtml = path.join(dashboardDir, "index.html");
+        if (fs.existsSync(indexHtml)) {
+          let html = fs.readFileSync(indexHtml, "utf-8");
+          const sseScript =
+            "<script>try{var es=new EventSource('/api/vds-output/events');es.onmessage=function(){location.reload();};}catch(e){}</script>";
+          if (!html.includes("api/vds-output/events")) {
+            html = html.replace("</body>", sseScript + "</body>");
+          }
+          safeEnd(res, 200, html, "text/html; charset=utf-8");
+          return;
+        }
+        safeEnd(res, 404, "Not found");
+        return;
+      }
+      const ext = path.extname(filePath).toLowerCase();
+      const contentType = MIME[ext] || "application/octet-stream";
+      const data = fs.readFileSync(filePath);
+      if (res.writableEnded) return;
+      res.writeHead(200, { "Content-Type": contentType });
+      res.end(data);
+      return;
+    }
+
+    safeEnd(res, 404, "Not found");
+  } catch (err) {
+    if (!res.writableEnded) {
+      console.error("[VDS] Request error:", err?.message || err);
+      safeEnd(res, 500, "Internal Server Error");
+    }
+  }
+});
+
+setupWatcher();
+
+findAvailablePort(PORT_MIN).then((port) => {
+  if (port == null) {
+    console.error("[VDS] 3333–3342 aralığında boş port bulunamadı.");
+    process.exit(1);
+  }
+  const dashboardDir = findDashboardDir();
+  const resolvedPath = dashboardDir ? path.resolve(dashboardDir) : null;
+  const exists = Boolean(dashboardDir && fs.existsSync(dashboardDir));
+  console.log("[VDS] dist/dashboard path:", resolvedPath ?? "(aranıyor...)");
+  console.log("[VDS] dist/dashboard exists:", exists);
+  if (!exists) {
+    console.warn("[VDS] Dashboard klasörü bulunamadı; /vds istekleri 503 dönecek.");
+  }
+  server.listen(port, "127.0.0.1", () => {
+    console.log(`VDS şu adreste: http://localhost:${port}/vds`);
+  });
+});