@getcoherent/core 0.5.13 → 0.5.15

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sergei Kovtun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -2154,6 +2154,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         cssFramework: z.ZodDefault<z.ZodEnum<["tailwind", "css-modules"]>>;
         deployTarget: z.ZodOptional<z.ZodEnum<["vercel", "netlify", "cloudflare", "self-hosted"]>>;
         autoScaffold: z.ZodDefault<z.ZodBoolean>;
+        homePagePlaceholder: z.ZodDefault<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         initialized: boolean;
         appType: "multi-page" | "spa";
@@ -2161,6 +2162,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         typescript: boolean;
         cssFramework: "tailwind" | "css-modules";
         autoScaffold: boolean;
+        homePagePlaceholder: boolean;
         router?: "react-router" | "tanstack-router" | undefined;
         deployTarget?: "vercel" | "netlify" | "cloudflare" | "self-hosted" | undefined;
     }, {
@@ -2172,6 +2174,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         cssFramework?: "tailwind" | "css-modules" | undefined;
         deployTarget?: "vercel" | "netlify" | "cloudflare" | "self-hosted" | undefined;
         autoScaffold?: boolean | undefined;
+        homePagePlaceholder?: boolean | undefined;
     }>;
     createdAt: z.ZodString;
     updatedAt: z.ZodString;
@@ -2365,6 +2368,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         typescript: boolean;
         cssFramework: "tailwind" | "css-modules";
         autoScaffold: boolean;
+        homePagePlaceholder: boolean;
         router?: "react-router" | "tanstack-router" | undefined;
         deployTarget?: "vercel" | "netlify" | "cloudflare" | "self-hosted" | undefined;
     };
@@ -2556,6 +2560,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         cssFramework?: "tailwind" | "css-modules" | undefined;
         deployTarget?: "vercel" | "netlify" | "cloudflare" | "self-hosted" | undefined;
         autoScaffold?: boolean | undefined;
+        homePagePlaceholder?: boolean | undefined;
     };
     navigation?: {
         items: NavigationItem[];
@@ -2746,6 +2751,8 @@ declare const SharedComponentEntrySchema: z.ZodObject<{
     createdAt: z.ZodOptional<z.ZodString>;
     /** Human-readable description */
     description: z.ZodOptional<z.ZodString>;
+    /** TypeScript props interface body, e.g. "{ icon: React.ReactNode; title: string }" */
+    propsInterface: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     type: "layout" | "section" | "widget";
     name: string;
@@ -2754,6 +2761,7 @@ declare const SharedComponentEntrySchema: z.ZodObject<{
     usedIn: string[];
     description?: string | undefined;
     createdAt?: string | undefined;
+    propsInterface?: string | undefined;
 }, {
     type: "layout" | "section" | "widget";
     name: string;
@@ -2762,6 +2770,7 @@ declare const SharedComponentEntrySchema: z.ZodObject<{
     description?: string | undefined;
     createdAt?: string | undefined;
     usedIn?: string[] | undefined;
+    propsInterface?: string | undefined;
 }>;
 type SharedComponentEntry = z.infer<typeof SharedComponentEntrySchema>;
 /** Root schema for coherent.components.json */
@@ -2780,6 +2789,8 @@ declare const SharedComponentsManifestSchema: z.ZodObject<{
         createdAt: z.ZodOptional<z.ZodString>;
         /** Human-readable description */
         description: z.ZodOptional<z.ZodString>;
+        /** TypeScript props interface body, e.g. "{ icon: React.ReactNode; title: string }" */
+        propsInterface: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         type: "layout" | "section" | "widget";
         name: string;
@@ -2788,6 +2799,7 @@ declare const SharedComponentsManifestSchema: z.ZodObject<{
         usedIn: string[];
         description?: string | undefined;
         createdAt?: string | undefined;
+        propsInterface?: string | undefined;
     }, {
         type: "layout" | "section" | "widget";
         name: string;
@@ -2796,6 +2808,7 @@ declare const SharedComponentsManifestSchema: z.ZodObject<{
         description?: string | undefined;
         createdAt?: string | undefined;
         usedIn?: string[] | undefined;
+        propsInterface?: string | undefined;
     }>, "many">>;
     /** Next numeric id for new entries (CID-XXX → nextId = 4 for CID-004) */
     nextId: z.ZodDefault<z.ZodNumber>;
@@ -2808,6 +2821,7 @@ declare const SharedComponentsManifestSchema: z.ZodObject<{
         usedIn: string[];
         description?: string | undefined;
         createdAt?: string | undefined;
+        propsInterface?: string | undefined;
     }[];
     nextId: number;
 }, {
@@ -2819,6 +2833,7 @@ declare const SharedComponentsManifestSchema: z.ZodObject<{
         description?: string | undefined;
         createdAt?: string | undefined;
         usedIn?: string[] | undefined;
+        propsInterface?: string | undefined;
     }[] | undefined;
     nextId?: number | undefined;
 }>;
@@ -3130,6 +3145,7 @@ interface CreateSharedComponentInput {
     file: string;
     usedIn?: string[];
     description?: string;
+    propsInterface?: string;
 }
 /**
  * Add a new shared component: allocate CID, set createdAt, append to shared, increment nextId.
@@ -3539,6 +3555,8 @@ interface GenerateSharedComponentInput {
     usedIn?: string[];
     /** If true, overwrite an existing component with the same name instead of creating a uniquely-named copy. */
     overwrite?: boolean;
+    /** TypeScript props interface body, e.g. "{ title: string; icon: React.ReactNode }". */
+    propsInterface?: string;
 }
 interface GenerateSharedComponentResult {
     id: string;
@@ -3864,6 +3882,28 @@ interface LoginContent extends BasePageContent {
 interface RegisterContent extends BasePageContent {
     loginRoute?: string;
 }
+interface TeamContent extends BasePageContent {
+    members?: Array<{
+        name: string;
+        role: string;
+        email?: string;
+        avatar?: string;
+    }>;
+}
+interface TasksContent extends BasePageContent {
+    tasks?: Array<{
+        title: string;
+        status: string;
+        assignee?: string;
+        priority?: string;
+    }>;
+}
+interface TaskDetailContent extends BasePageContent {
+    taskId?: string;
+}
+interface ResetPasswordContent extends BasePageContent {
+    loginRoute?: string;
+}
 interface ChangelogContent extends BasePageContent {
     versions: Array<{
         version: string;
@@ -3921,6 +3961,18 @@ type PageContent = {
 } | {
     pageType: 'register';
     content: RegisterContent;
+} | {
+    pageType: 'team';
+    content: TeamContent;
+} | {
+    pageType: 'tasks';
+    content: TasksContent;
+} | {
+    pageType: 'task-detail';
+    content: TaskDetailContent;
+} | {
+    pageType: 'reset-password';
+    content: ResetPasswordContent;
 };
 
 type TemplateFn = (content: any, options: TemplateOptions) => string;

package/dist/index.js

@@ -295,7 +295,9 @@ var DesignSystemConfigSchema = z.object({
     // Deployment
     deployTarget: z.enum(["vercel", "netlify", "cloudflare", "self-hosted"]).optional(),
     // Auto-scaffold linked pages (e.g. login → signup, forgot-password)
-    autoScaffold: z.boolean().default(false)
+    autoScaffold: z.boolean().default(false),
+    // True when the home page is the init placeholder (not yet AI-generated)
+    homePagePlaceholder: z.boolean().default(false)
   }),
   // Timestamps
   createdAt: z.string().datetime(),
@@ -421,7 +423,8 @@ var EXAMPLE_MULTIPAGE_CONFIG = {
     framework: "next",
     typescript: true,
     cssFramework: "tailwind",
-    autoScaffold: false
+    autoScaffold: false,
+    homePagePlaceholder: false
   },
   createdAt: (/* @__PURE__ */ new Date()).toISOString(),
   updatedAt: (/* @__PURE__ */ new Date()).toISOString()
@@ -437,7 +440,8 @@ var EXAMPLE_SPA_CONFIG = {
     router: "react-router",
     typescript: true,
     cssFramework: "tailwind",
-    autoScaffold: false
+    autoScaffold: false,
+    homePagePlaceholder: false
   },
   features: {
     ...EXAMPLE_MULTIPAGE_CONFIG.features,
@@ -464,7 +468,9 @@ var SharedComponentEntrySchema = z2.object({
   usedIn: z2.array(z2.string()).default([]),
   createdAt: z2.string().datetime().optional(),
   /** Human-readable description */
-  description: z2.string().optional()
+  description: z2.string().optional(),
+  /** TypeScript props interface body, e.g. "{ icon: React.ReactNode; title: string }" */
+  propsInterface: z2.string().optional()
 });
 var SharedComponentsManifestSchema = z2.object({
   shared: z2.array(SharedComponentEntrySchema).default([]),
@@ -1970,6 +1976,7 @@ function createEntry(manifest, input) {
     file: input.file,
     usedIn: input.usedIn ?? [],
     description: input.description,
+    propsInterface: input.propsInterface,
     createdAt: now
   };
   const nextManifest = {
@@ -6818,7 +6825,8 @@ async function generateSharedComponent(projectRoot, input) {
     type: input.type,
     file: filePath,
     usedIn: input.usedIn ?? [],
-    description: input.description
+    description: input.description,
+    propsInterface: input.propsInterface
   });
   await saveManifest(projectRoot, nextManifest);
   return { id: entry.id, name: entry.name, file: entry.file };
@@ -8928,6 +8936,269 @@ export default function ${pageName}() {
 `;
 }
 
+// src/generators/templates/pages/team.ts
+function teamTemplate(content, options) {
+  const { title, description, members } = content;
+  const { pageName } = options;
+  const memberList = (members && members.length > 0 ? members : [
+    { name: "Sarah Chen", role: "CEO & Founder", email: "sarah@example.com" },
+    { name: "Marcus Kim", role: "CTO", email: "marcus@example.com" },
+    { name: "Elena Rodriguez", role: "Head of Design", email: "elena@example.com" },
+    { name: "James Park", role: "Lead Engineer", email: "james@example.com" }
+  ]).map(
+    (m) => `        <div key="${m.name}" className="${D.card} p-6">
+          <div className="flex items-center gap-4">
+            <div className="flex size-12 items-center justify-center rounded-full bg-muted ${D.cardTitle}">
+              ${m.name.split(" ").map((n) => n[0]).join("")}
+            </div>
+            <div className="space-y-1">
+              <h3 className="${D.cardTitle}">${m.name}</h3>
+              <p className="${D.cardDesc}">${m.role}</p>
+            </div>
+          </div>
+        </div>`
+  ).join("\n");
+  return `import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '${title}',
+  description: '${description}',
+}
+
+export default function ${pageName}() {
+  return (
+    <main className="${D.pageWrapper}">
+      <div>
+        <h1 className="${D.pageTitle}">${title}</h1>
+        <p className="${D.muted}">${description}</p>
+      </div>
+      <div className="${D.statsGrid}">
+${memberList}
+      </div>
+    </main>
+  )
+}
+`;
+}
+
+// src/generators/templates/pages/tasks.ts
+function tasksTemplate(content, options) {
+  const { title, description, tasks } = content;
+  const { pageName } = options;
+  const taskList = tasks && tasks.length > 0 ? tasks : [
+    { title: "Design landing page", status: "In Progress", assignee: "Sarah", priority: "High" },
+    { title: "Set up CI/CD pipeline", status: "Done", assignee: "Marcus", priority: "Medium" },
+    { title: "Write API documentation", status: "To Do", assignee: "Elena", priority: "Low" },
+    { title: "Fix login redirect bug", status: "In Progress", assignee: "James", priority: "High" },
+    { title: "Update dependencies", status: "To Do", assignee: "Marcus", priority: "Medium" }
+  ];
+  const statusColor = {
+    Done: "bg-emerald-500/10 text-emerald-500",
+    "In Progress": "bg-blue-500/10 text-blue-500",
+    "To Do": "bg-zinc-500/10 text-zinc-400"
+  };
+  const priorityColor = {
+    High: "bg-red-500/10 text-red-500",
+    Medium: "bg-yellow-500/10 text-yellow-500",
+    Low: "bg-zinc-500/10 text-zinc-400"
+  };
+  const rows = taskList.map(
+    (t) => `            <div className="${D.listItem}">
+              <div className="flex items-center gap-3">
+                <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${statusColor[t.status] || statusColor["To Do"]}">${t.status}</span>
+                <span className="${D.body} font-medium">${t.title}</span>
+              </div>
+              <div className="flex items-center gap-3">
+                ${t.priority ? `<span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${priorityColor[t.priority] || priorityColor["Medium"]}">${t.priority}</span>` : ""}
+                ${t.assignee ? `<span className="${D.mutedXs}">${t.assignee}</span>` : ""}
+              </div>
+            </div>`
+  ).join("\n");
+  return `"use client"
+
+import { useState } from 'react'
+import { Search } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+
+export default function ${pageName}() {
+  const [search, setSearch] = useState('')
+
+  return (
+    <main className="${D.pageWrapper}">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="${D.pageTitle}">${title}</h1>
+          <p className="${D.muted}">${description}</p>
+        </div>
+      </div>
+
+      <div className="relative max-w-sm">
+        <Search className="absolute left-3 top-1/2 ${D.icon} -translate-y-1/2" />
+        <Input
+          placeholder="Search tasks..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      <div className="${D.card} divide-y">
+${rows}
+      </div>
+    </main>
+  )
+}
+`;
+}
+
+// src/generators/templates/pages/task-detail.ts
+function taskDetailTemplate(content, options) {
+  const { title, description } = content;
+  const { pageName } = options;
+  return `"use client"
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+
+export default function ${pageName}() {
+  const [status, setStatus] = useState('In Progress')
+
+  return (
+    <main className="${D.pageWrapper}">
+      <div className="flex items-center gap-2">
+        <Link href="/tasks">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="${D.icon}" />
+          </Button>
+        </Link>
+        <div>
+          <h1 className="${D.pageTitle}">${title}</h1>
+          <p className="${D.muted}">${description}</p>
+        </div>
+      </div>
+
+      <div className="${D.grid2}">
+        <Card>
+          <CardHeader>
+            <CardTitle className="${D.cardTitle}">Details</CardTitle>
+          </CardHeader>
+          <CardContent className="${D.formGap}">
+            <div className="${D.fieldGroup}">
+              <span className="${D.mutedXs}">Status</span>
+              <span className="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-500">{status}</span>
+            </div>
+            <div className="${D.fieldGroup}">
+              <span className="${D.mutedXs}">Priority</span>
+              <span className="inline-flex items-center rounded-full bg-red-500/10 px-2 py-0.5 text-xs font-medium text-red-500">High</span>
+            </div>
+            <div className="${D.fieldGroup}">
+              <span className="${D.mutedXs}">Assignee</span>
+              <span className="${D.body}">Sarah Chen</span>
+            </div>
+            <div className="${D.fieldGroup}">
+              <span className="${D.mutedXs}">Due Date</span>
+              <span className="${D.body}">Jan 15, 2025</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="${D.cardTitle}">Activity</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div className="${D.listItem}">
+                <span className="${D.body}">Task created</span>
+                <span className="${D.mutedXs}">2 days ago</span>
+              </div>
+              <div className="${D.listItem}">
+                <span className="${D.body}">Status changed to In Progress</span>
+                <span className="${D.mutedXs}">1 day ago</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  )
+}
+`;
+}
+
+// src/generators/templates/pages/reset-password.ts
+function resetPasswordTemplate(content, options) {
+  const { title, description, loginRoute } = content;
+  const { pageName } = options;
+  return `"use client"
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+export default function ${pageName}() {
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+  }
+
+  return (
+    <div className="${D.centeredForm}">
+      <div className="${D.formContainer}">
+        <Card>
+          <CardHeader className="text-center">
+            <CardTitle className="text-xl">${title}</CardTitle>
+            <CardDescription>${description}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="${D.formGap}">
+              <div className="${D.fieldGroup}">
+                <Label htmlFor="password">New Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="${D.fieldGroup}">
+                <Label htmlFor="confirmPassword">Confirm Password</Label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <Button type="submit" className="w-full">Reset password</Button>
+            </form>
+            <p className="mt-4 text-center text-sm text-muted-foreground">
+              Remember your password?{' '}
+              <Link href="${loginRoute || "/login"}" className="text-foreground underline underline-offset-4 hover:text-foreground/80 transition-colors">
+                Sign in
+              </Link>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+`;
+}
+
 // src/generators/templates/pages/index.ts
 var TEMPLATE_REGISTRY = {
   dashboard: dashboardTemplate,
@@ -8943,7 +9214,11 @@ var TEMPLATE_REGISTRY = {
   faq: faqTemplate,
   changelog: changelogTemplate,
   login: loginTemplate,
-  register: registerTemplate
+  register: registerTemplate,
+  team: teamTemplate,
+  tasks: tasksTemplate,
+  "task-detail": taskDetailTemplate,
+  "reset-password": resetPasswordTemplate
 };
 function getTemplateForPageType(pageType) {
   return TEMPLATE_REGISTRY[pageType] ?? null;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "Core design system engine for Coherent",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,12 +32,6 @@
   ],
   "author": "Coherent Design Method",
   "license": "MIT",
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest"
-  },
   "dependencies": {
     "handlebars": "^4.7.8",
     "zod": "^3.22.4"
@@ -47,5 +41,11 @@
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vitest": "^1.2.1"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
   }
-}
+}