cronus-ui 0.6.2 → 0.6.4

package/README.md

@@ -49,7 +49,7 @@ Notes that match the commander surface:
   `packages/cli/scripts/build-registry.ts` — each item carries its source, its npm
   `dependencies`, and its `registryDependencies` (other components it imports),
   derived by parsing imports.
-- The default registry is pinned to the CLI package version (`v0.6.2` here), not
+- The default registry is pinned to the CLI package version (`v0.6.4` here), not
   mutable `main`, so a published CLI reads the registry snapshot it was released
   with. Use `-r, --registry ./registry` when testing local registry changes before
   a release tag exists.
@@ -80,7 +80,7 @@ Notes that match the commander surface:
     "lib": "lib",
     "blocks": "components/blocks"
   },
-  "registry": "https://raw.githubusercontent.com/pedrogbraz/cronus-ui/v0.6.2/registry"
+  "registry": "https://raw.githubusercontent.com/pedrogbraz/cronus-ui/v0.6.4/registry"
 }
 ```
 

package/dist/compose/gold-path.d.ts

@@ -37,10 +37,15 @@ export declare function goldPathLayout(config: CronusUIConfig): GoldPathLayout;
 export declare function patchChromeSource(source: string, workspaceImport: string, inviteImport: string, sessionImport?: string): string | undefined;
 /** Insert ItemsPanel into a generated home page. Returns undefined when there is no main. */
 export declare function patchHomePageSource(source: string, itemsImport: string): string | undefined;
+/**
+ * Replace the catalog TeamBlock on a generated /team page with MembersPanel.
+ * Idempotent. Returns undefined when there is no TeamBlock and no MembersPanel.
+ */
+export declare function patchTeamPageSource(source: string, membersImport: string): string | undefined;
 /**
  * Write sqlite + Drizzle + Better-Auth files into a composed saas/admin app.
- * Overwrites lib/auth-adapter.ts always (replaces the demo adapter). Patches
- * the shell home page only when compose wrote it this run.
+ * Overwrites lib/auth-adapter.ts, lib/items.ts, and lib/members.ts always.
+ * Patches the shell home and /team pages only when compose wrote them this run.
  */
 export declare function applyGoldPath(options: ApplyGoldPathOptions): Promise<ApplyGoldPathResult>;
 //# sourceMappingURL=gold-path.d.ts.map

package/dist/compose/gold-path.js

@@ -38,6 +38,7 @@ const ENV_VARS = {
 };
 const GITIGNORE_ENTRIES = ["*.db", "data/", "drizzle/"];
 const DATABASE_URL_FALLBACK = "file:./data/app.db";
+const TITLE_MAX = 200;
 export function goldPathLayout(config) {
     const libDir = posix(config.paths.lib);
     const uiDir = posix(config.paths.ui);
@@ -81,6 +82,13 @@ function homePageRel(appDir, generatedFiles) {
     const any = generatedFiles.find((f) => /(^|\/)\(shell\)\/page\.tsx$/.test(posix(f)));
     return any !== undefined ? posix(any) : undefined;
 }
+function teamPageRel(appDir, generatedFiles) {
+    const match = generatedFiles.find((f) => posix(f) === `${appDir}/(shell)/team/page.tsx`);
+    if (match !== undefined)
+        return posix(match);
+    const any = generatedFiles.find((f) => /(^|\/)\(shell\)\/team\/page\.tsx$/.test(posix(f)));
+    return any !== undefined ? posix(any) : undefined;
+}
 function drizzleConfigSource(dbDir) {
     return `import { mkdirSync } from "node:fs";
 import { dirname } from "node:path";
@@ -432,37 +440,304 @@ export const config = {
 };
 `;
 }
-function itemsPanelSource(authImport) {
-    return `import { eq } from "drizzle-orm";
+function itemsActionsSource(authImport) {
+    return `"use server";
+
+import { and, desc, eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
 import { headers } from "next/headers";
 import { db } from "@/db";
 import { items, member, organization } from "@/db/schema";
 import { auth } from ${JSON.stringify(authImport)};
 
-export async function ItemsPanel() {
+const TITLE_MAX = ${TITLE_MAX};
+
+async function activeWorkspaceId(): Promise<string | null> {
   const session = await auth.api.getSession({ headers: await headers() });
-  let orgId = session?.session?.activeOrganizationId ?? null;
-  if (!orgId && session?.user?.id) {
-    const [row] = await db
+  const userId = session?.user?.id;
+  if (!userId) return null;
+  const hinted = session.session?.activeOrganizationId ?? null;
+  if (hinted) {
+    const [membership] = await db
       .select({ organizationId: member.organizationId })
       .from(member)
-      .where(eq(member.userId, session.user.id))
+      .where(and(eq(member.userId, userId), eq(member.organizationId, hinted)))
       .limit(1);
-    orgId = row?.organizationId ?? null;
+    if (membership?.organizationId) return membership.organizationId;
   }
-  const org = orgId
-    ? (await db.select().from(organization).where(eq(organization.id, orgId)).limit(1))[0]
-    : undefined;
-  const rows = orgId
-    ? await db.select().from(items).where(eq(items.workspaceId, orgId))
-    : [];
+  const [row] = await db
+    .select({ organizationId: member.organizationId })
+    .from(member)
+    .where(eq(member.userId, userId))
+    .limit(1);
+  return row?.organizationId ?? null;
+}
+
+export async function loadItems(): Promise<{
+  email: string;
+  workspace: string;
+  rows: { id: number; title: string }[];
+}> {
+  const session = await auth.api.getSession({ headers: await headers() });
   const email = session?.user?.email ?? "signed out";
-  const workspace = org?.name ?? "no workspace";
+  const orgId = await activeWorkspaceId();
+  if (!orgId) return { email, workspace: "no workspace", rows: [] };
+  const [org] = await db.select().from(organization).where(eq(organization.id, orgId)).limit(1);
+  const rows = await db
+    .select({ id: items.id, title: items.title })
+    .from(items)
+    .where(eq(items.workspaceId, orgId))
+    .orderBy(desc(items.id));
+  return { email, workspace: org?.name ?? "no workspace", rows };
+}
+
+export async function createItem(formData: FormData) {
+  const orgId = await activeWorkspaceId();
+  if (!orgId) return;
+  const title = String(formData.get("title") ?? "")
+    .trim()
+    .slice(0, TITLE_MAX);
+  if (!title) return;
+  await db.insert(items).values({ title, workspaceId: orgId });
+  revalidatePath("/");
+}
+
+export async function deleteItem(formData: FormData) {
+  const orgId = await activeWorkspaceId();
+  if (!orgId) return;
+  const id = Number(formData.get("id"));
+  if (!Number.isInteger(id) || id < 1) return;
+  await db.delete(items).where(and(eq(items.id, id), eq(items.workspaceId, orgId)));
+  revalidatePath("/");
+}
+`;
+}
+function itemsPanelSource(actionsImport, viewImport) {
+    return `import { loadItems } from ${JSON.stringify(actionsImport)};
+import { ItemsView } from ${JSON.stringify(viewImport)};
+
+export async function ItemsPanel() {
+  const data = await loadItems();
+  return <ItemsView email={data.email} workspace={data.workspace} rows={data.rows} />;
+}
+`;
+}
+function itemsViewSource(actionsImport) {
+    return `"use client";
+
+import { Button, Input } from "@cronus-ui/ui";
+import { createItem, deleteItem } from ${JSON.stringify(actionsImport)};
+
+export function ItemsView({
+  email,
+  workspace,
+  rows,
+}: {
+  email: string;
+  workspace: string;
+  rows: { id: number; title: string }[];
+}) {
+  const count = String(rows.length);
+  return (
+    <section
+      data-slot="items-panel"
+      aria-labelledby="items-heading"
+      className="border-b border-border px-6 py-6"
+    >
+      <h2 id="items-heading" className="text-sm font-semibold text-fg">
+        Items
+      </h2>
+      <p className="mt-1 text-sm text-fg-tertiary">
+        {email} · {workspace} · {count} items
+      </p>
+      <form action={createItem} className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-end">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <label htmlFor="item-title" className="text-sm font-medium text-fg">
+            Title
+          </label>
+          <Input
+            id="item-title"
+            name="title"
+            required
+            maxLength={${TITLE_MAX}}
+            autoComplete="off"
+            placeholder="New item"
+          />
+        </div>
+        <Button type="submit">Add</Button>
+      </form>
+      {rows.length === 0 ? (
+        <p className="mt-4 text-sm text-fg-tertiary">No items yet.</p>
+      ) : (
+        <ul className="mt-4">
+          {rows.map((row) => (
+            <li
+              key={row.id}
+              data-slot="item"
+              className="flex items-center justify-between gap-3 border-t border-border py-3"
+            >
+              <span className="min-w-0 truncate text-sm text-fg">{row.title}</span>
+              <form action={deleteItem}>
+                <input type="hidden" name="id" value={row.id} />
+                <Button type="submit" variant="ghost" size="sm" aria-label={"Delete " + row.title}>
+                  Delete
+                </Button>
+              </form>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+`;
+}
+function membersActionsSource(authImport) {
+    return `"use server";
+
+import { and, asc, eq } from "drizzle-orm";
+import { headers } from "next/headers";
+import { db } from "@/db";
+import { member, organization, user } from "@/db/schema";
+import { auth } from ${JSON.stringify(authImport)};
+
+async function activeWorkspaceId(): Promise<string | null> {
+  const session = await auth.api.getSession({ headers: await headers() });
+  const userId = session?.user?.id;
+  if (!userId) return null;
+  const hinted = session.session?.activeOrganizationId ?? null;
+  if (hinted) {
+    const [membership] = await db
+      .select({ organizationId: member.organizationId })
+      .from(member)
+      .where(and(eq(member.userId, userId), eq(member.organizationId, hinted)))
+      .limit(1);
+    if (membership?.organizationId) return membership.organizationId;
+  }
+  const [row] = await db
+    .select({ organizationId: member.organizationId })
+    .from(member)
+    .where(eq(member.userId, userId))
+    .limit(1);
+  return row?.organizationId ?? null;
+}
+
+export async function loadMembers(): Promise<{
+  workspace: string;
+  rows: { id: string; name: string; email: string; image: string | null; role: string }[];
+}> {
+  const orgId = await activeWorkspaceId();
+  if (!orgId) return { workspace: "no workspace", rows: [] };
+  const [org] = await db.select().from(organization).where(eq(organization.id, orgId)).limit(1);
+  const rows = await db
+    .select({
+      id: member.id,
+      name: user.name,
+      email: user.email,
+      image: user.image,
+      role: member.role,
+    })
+    .from(member)
+    .innerJoin(user, eq(member.userId, user.id))
+    .where(eq(member.organizationId, orgId))
+    .orderBy(asc(member.createdAt));
+  return { workspace: org?.name ?? "no workspace", rows };
+}
+`;
+}
+function membersPanelSource(actionsImport, viewImport) {
+    return `import { loadMembers } from ${JSON.stringify(actionsImport)};
+import { MembersView } from ${JSON.stringify(viewImport)};
+
+export async function MembersPanel() {
+  const data = await loadMembers();
+  return <MembersView workspace={data.workspace} rows={data.rows} />;
+}
+`;
+}
+function membersViewSource(inviteImport) {
+    return `"use client";
+
+import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from "@cronus-ui/ui";
+import { InviteMember } from ${JSON.stringify(inviteImport)};
+
+function initialsOf(name: string, email: string): string {
+  const parts = name.trim().split(/\\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return \`\${parts[0]?.[0] ?? ""}\${parts[1]?.[0] ?? ""}\`.toUpperCase();
+  }
+  if (parts[0]?.[0]) return parts[0][0].toUpperCase();
+  return email.slice(0, 2).toUpperCase();
+}
+
+function roleLabel(role: string): string {
+  if (role === "owner") return "Owner";
+  if (role === "admin") return "Admin";
+  if (role === "member") return "Member";
+  return role;
+}
+
+function roleVariant(role: string): "primary" | "info" | "secondary" {
+  if (role === "owner") return "primary";
+  if (role === "admin") return "info";
+  return "secondary";
+}
+
+export function MembersView({
+  workspace,
+  rows,
+}: {
+  workspace: string;
+  rows: { id: string; name: string; email: string; image: string | null; role: string }[];
+}) {
   const count = String(rows.length);
   return (
-    <p className="px-6 pt-6 text-sm text-fg-tertiary">
-      {email} · {workspace} · {count} items
-    </p>
+    <section
+      data-slot="members-panel"
+      aria-labelledby="members-heading"
+      className="mx-auto w-full max-w-xl px-6 py-6"
+    >
+      <div className="flex items-end justify-between gap-3">
+        <div className="min-w-0">
+          <h1 id="members-heading" className="text-sm font-semibold text-fg">
+            Team
+          </h1>
+          <p className="mt-1 text-sm text-fg-tertiary">
+            {workspace} · {count} members
+          </p>
+        </div>
+        <InviteMember
+          trigger={
+            <Button type="button" size="sm">
+              Invite
+            </Button>
+          }
+        />
+      </div>
+      {rows.length === 0 ? (
+        <p className="mt-4 text-sm text-fg-tertiary">No members yet.</p>
+      ) : (
+        <ul className="mt-4">
+          {rows.map((row) => (
+            <li
+              key={row.id}
+              data-slot="member"
+              className="flex items-center gap-3 border-t border-border py-3"
+            >
+              <Avatar className="size-8">
+                {row.image ? <AvatarImage src={row.image} alt={row.name} /> : null}
+                <AvatarFallback>{initialsOf(row.name, row.email)}</AvatarFallback>
+              </Avatar>
+              <div className="flex min-w-0 flex-1 flex-col">
+                <span className="truncate text-sm text-fg">{row.name}</span>
+                <span className="truncate text-sm text-fg-tertiary">{row.email}</span>
+              </div>
+              <Badge variant={roleVariant(row.role)}>{roleLabel(row.role)}</Badge>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
   );
 }
 `;
@@ -728,6 +1003,25 @@ export function patchHomePageSource(source, itemsImport) {
     }
     return out;
 }
+/**
+ * Replace the catalog TeamBlock on a generated /team page with MembersPanel.
+ * Idempotent. Returns undefined when there is no TeamBlock and no MembersPanel.
+ */
+export function patchTeamPageSource(source, membersImport) {
+    const hasPanel = /<MembersPanel\s*\/>/.test(source);
+    const hasTeam = /<TeamBlock\s*\/>/.test(source);
+    if (!hasPanel && !hasTeam)
+        return undefined;
+    if (hasPanel)
+        return source;
+    let out = source;
+    const importLine = `import { MembersPanel } from ${JSON.stringify(membersImport)};`;
+    out = insertImport(out, importLine);
+    out = out.replace(/import \{ TeamBlock \} from "[^"]+";\n/, "");
+    out = out.replace(/export default(?! async) function/, "export default async function");
+    out = out.replace(/<TeamBlock\s*\/>/, "<MembersPanel />");
+    return out;
+}
 function mergePackageJson(raw) {
     const pkg = JSON.parse(raw);
     const dependencies = { ...(pkg.dependencies ?? {}) };
@@ -797,8 +1091,8 @@ async function writeRel(targetDir, rel, content, overwrite, always, written, ski
 }
 /**
  * Write sqlite + Drizzle + Better-Auth files into a composed saas/admin app.
- * Overwrites lib/auth-adapter.ts always (replaces the demo adapter). Patches
- * the shell home page only when compose wrote it this run.
+ * Overwrites lib/auth-adapter.ts, lib/items.ts, and lib/members.ts always.
+ * Patches the shell home and /team pages only when compose wrote them this run.
  */
 export async function applyGoldPath(options) {
     const { targetDir, config, generatedFiles, overwrite } = options;
@@ -811,7 +1105,12 @@ export async function applyGoldPath(options) {
             : layout.middlewareRel;
     const authImport = `${config.aliases.lib}/auth`;
     const authClientImport = `${config.aliases.lib}/auth-client`;
+    const itemsActionsImport = `${config.aliases.lib}/items`;
+    const itemsViewImport = "@/components/items-view";
     const itemsImport = "@/components/items-panel";
+    const membersActionsImport = `${config.aliases.lib}/members`;
+    const membersViewImport = "@/components/members-view";
+    const membersImport = "@/components/members-panel";
     const workspaceImport = "@/components/workspace-menu";
     const inviteImport = "@/components/invite-member";
     const sessionImport = "@/components/session-user";
@@ -825,12 +1124,41 @@ export async function applyGoldPath(options) {
         { rel: `${layout.libDir}/auth.ts`, content: authServerSource() },
         { rel: `${layout.libDir}/auth-client.ts`, content: authClientSource() },
         { rel: `${layout.libDir}/auth-adapter.ts`, content: authAdapterSource(), always: true },
+        {
+            rel: `${layout.libDir}/items.ts`,
+            content: itemsActionsSource(authImport),
+            always: true,
+        },
         {
             rel: `${appDir}/api/auth/[...all]/route.ts`,
             content: authRouteSource(authImport),
         },
         { rel: middlewareRel, content: middlewareSource() },
-        { rel: `${layout.componentsDir}/items-panel.tsx`, content: itemsPanelSource(authImport) },
+        {
+            rel: `${layout.componentsDir}/items-panel.tsx`,
+            content: itemsPanelSource(itemsActionsImport, itemsViewImport),
+            always: true,
+        },
+        {
+            rel: `${layout.componentsDir}/items-view.tsx`,
+            content: itemsViewSource(itemsActionsImport),
+            always: true,
+        },
+        {
+            rel: `${layout.libDir}/members.ts`,
+            content: membersActionsSource(authImport),
+            always: true,
+        },
+        {
+            rel: `${layout.componentsDir}/members-panel.tsx`,
+            content: membersPanelSource(membersActionsImport, membersViewImport),
+            always: true,
+        },
+        {
+            rel: `${layout.componentsDir}/members-view.tsx`,
+            content: membersViewSource(inviteImport),
+            always: true,
+        },
         {
             rel: `${layout.componentsDir}/workspace-menu.tsx`,
             content: workspaceMenuSource(authClientImport),
@@ -870,6 +1198,22 @@ export async function applyGoldPath(options) {
             }
         }
     }
+    const teamRel = teamPageRel(appDir, generatedFiles);
+    if (teamRel !== undefined) {
+        const dest = resolveSafeDest(targetDir, ".", teamRel);
+        if (existsSync(dest)) {
+            const current = await readFile(dest, "utf8");
+            const patched = patchTeamPageSource(current, membersImport);
+            if (patched !== undefined && patched !== current) {
+                await writeFileEnsured(dest, patched);
+                const templateName = options.templateName;
+                if (templateName !== undefined) {
+                    const snapDest = resolveSafeDest(targetDir, baseSnapshotDir(templateName), teamRel);
+                    await writeFileEnsured(snapDest, patched);
+                }
+            }
+        }
+    }
     const homeRel = homePageRel(appDir, generatedFiles);
     if (homeRel !== undefined) {
         const dest = resolveSafeDest(targetDir, ".", homeRel);

package/dist/config.d.ts

@@ -1,6 +1,6 @@
 export declare const CONFIG_FILE = "cronus-ui.json";
-export declare const CLI_VERSION = "0.6.2";
-export declare const DEFAULT_REGISTRY = "https://raw.githubusercontent.com/pedrogbraz/cronus-ui/v0.6.2/registry";
+export declare const CLI_VERSION = "0.6.4";
+export declare const DEFAULT_REGISTRY = "https://raw.githubusercontent.com/pedrogbraz/cronus-ui/v0.6.4/registry";
 /** Manifest entry `add`/`upgrade` record per installed registry item. */
 export interface InstalledRecord {
     /** Registry release the files came from (git tag without the leading "v"). */

package/dist/config.js

@@ -2,7 +2,7 @@ import { existsSync } from "node:fs";
 import { readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 export const CONFIG_FILE = "cronus-ui.json";
-export const CLI_VERSION = "0.6.2";
+export const CLI_VERSION = "0.6.4";
 export const DEFAULT_REGISTRY = `https://raw.githubusercontent.com/pedrogbraz/cronus-ui/v${CLI_VERSION}/registry`;
 export const DEFAULT_CONFIG = {
     aliases: { ui: "@/components/ui", lib: "@/lib", blocks: "@/components/blocks" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cronus-ui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "cronus-ui — add Cronus UI components to your project, shadcn-style (copy-paste registry).",
   "type": "module",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "registry:check": "bun run scripts/check-registry.ts"
   },
   "dependencies": {
-    "@cronus-ui/ai-kit": "0.6.2",
+    "@cronus-ui/ai-kit": "0.6.4",
     "commander": "^15.0.0",
     "picocolors": "^1.1.1"
   },