@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/chat/app/globals.css

@@ -2,87 +2,101 @@
 @import "tw-animate-css";
 
 /* Tailwind v4 scans these globs for class names. `components/` is here so
-   shadcn/ui component classes are seen — add more @source lines if you put
-   markup elsewhere. */
+   shadcn/ui and chat component classes are seen. Add more @source lines if
+   you put markup elsewhere. */
 @source "../app/**/*.{tsx,ts,jsx,js}";
 @source "../components/**/*.{tsx,ts,jsx,js}";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
-/* shadcn/ui design tokens (new-york / zinc). Edit these to re-theme the
-   whole app; `npx shadcn@latest add <component>` drops new components that
-   consume the same variables. Toggle dark mode by putting `class="dark"`
-   on <html>. */
+/* Design tokens. The shadcn/ui names (background, primary, sidebar, …) are
+   kept so `npx shadcn@latest add <component>` drops in components that match.
+   `signal` is the accent (send button, unread badges); `online` is the
+   presence dot. Toggle dark mode by putting `class="dark"` on <html>. */
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
+  --background: oklch(0.988 0.003 85);
+  --foreground: oklch(0.21 0.012 265);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.21 0.012 265);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.21 0.012 265);
+  --primary: oklch(0.24 0.014 265);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
+  --secondary: oklch(0.955 0.004 85);
+  --secondary-foreground: oklch(0.24 0.014 265);
+  --muted: oklch(0.95 0.004 85);
+  --muted-foreground: oklch(0.53 0.012 265);
+  --accent: oklch(0.955 0.004 85);
+  --accent-foreground: oklch(0.24 0.014 265);
+  --destructive: oklch(0.577 0.215 27.325);
+  --border: oklch(0.905 0.005 85);
+  --input: oklch(0.905 0.005 85);
+  --ring: oklch(0.7 0.02 265);
+  --hover: oklch(0.955 0.004 85 / 0.7);
+  --signal: oklch(0.63 0.17 38);
+  --signal-foreground: oklch(0.99 0.005 60);
+  --online: oklch(0.72 0.17 150);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --sidebar: oklch(0.2 0.013 265);
+  --sidebar-foreground: oklch(0.95 0.004 265);
+  --sidebar-muted: oklch(0.62 0.014 265);
+  --sidebar-muted-strong: oklch(0.8 0.01 265);
+  --sidebar-primary: oklch(0.63 0.17 38);
+  --sidebar-primary-foreground: oklch(0.99 0.005 60);
+  --sidebar-accent: oklch(0.275 0.016 265);
+  --sidebar-accent-foreground: oklch(0.98 0.003 265);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.63 0.17 38);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
+  --background: oklch(0.17 0.01 265);
+  --foreground: oklch(0.95 0.004 265);
+  --card: oklch(0.22 0.012 265);
+  --card-foreground: oklch(0.95 0.004 265);
+  --popover: oklch(0.22 0.012 265);
+  --popover-foreground: oklch(0.95 0.004 265);
+  --primary: oklch(0.92 0.004 265);
+  --primary-foreground: oklch(0.21 0.012 265);
+  --secondary: oklch(0.26 0.012 265);
+  --secondary-foreground: oklch(0.95 0.004 265);
+  --muted: oklch(0.26 0.012 265);
+  --muted-foreground: oklch(0.68 0.012 265);
+  --accent: oklch(0.26 0.012 265);
+  --accent-foreground: oklch(0.95 0.004 265);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
+  --border: oklch(1 0 0 / 9%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.55 0.02 265);
+  --hover: oklch(1 0 0 / 4%);
+  --signal: oklch(0.68 0.16 40);
+  --signal-foreground: oklch(0.18 0.02 40);
+  --online: oklch(0.74 0.16 150);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.14 0.01 265);
+  --sidebar-foreground: oklch(0.95 0.004 265);
+  --sidebar-muted: oklch(0.6 0.014 265);
+  --sidebar-muted-strong: oklch(0.8 0.01 265);
+  --sidebar-primary: oklch(0.68 0.16 40);
+  --sidebar-primary-foreground: oklch(0.18 0.02 40);
+  --sidebar-accent: oklch(0.23 0.014 265);
+  --sidebar-accent-foreground: oklch(0.98 0.003 265);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.68 0.16 40);
 }
 
 @theme inline {
+  --font-sans: var(--font-geist), ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -105,6 +119,10 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-hover: var(--hover);
+  --color-signal: var(--signal);
+  --color-signal-foreground: var(--signal-foreground);
+  --color-online: var(--online);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -112,12 +130,35 @@
   --color-chart-5: var(--chart-5);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-muted: var(--sidebar-muted);
+  --color-sidebar-muted-strong: var(--sidebar-muted-strong);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
+  --shadow-composer:
+    0 0 0 1px oklch(0.21 0.012 265 / 0.08), 0 1px 2px oklch(0.21 0.012 265 / 0.04),
+    0 8px 24px -12px oklch(0.21 0.012 265 / 0.12);
+  --shadow-composer-focus:
+    0 0 0 1px oklch(0.21 0.012 265 / 0.16), 0 0 0 4px oklch(0.63 0.17 38 / 0.12),
+    0 10px 28px -12px oklch(0.21 0.012 265 / 0.16);
+  --shadow-float: 0 1px 2px oklch(0.21 0.012 265 / 0.1), 0 10px 30px -10px oklch(0.21 0.012 265 / 0.35);
+
+  --animate-message-in: message-in 260ms var(--ease-out-soft) both;
+  @keyframes message-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
 
 @layer base {
@@ -129,11 +170,86 @@
     border-color: var(--color-border, currentColor);
     outline-color: var(--color-ring);
   }
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-feature-settings: "ss01", "cv11";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
   }
   button {
     cursor: pointer;
   }
+  button:disabled {
+    cursor: default;
+  }
+}
+
+/* Thin scrollbars that only show while the pointer is over the list. */
+.scroll-area {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 200ms;
+}
+.scroll-area:hover {
+  scrollbar-color: oklch(0.5 0.01 265 / 0.3) transparent;
+}
+
+/* Three dots that rise in turn, beside "Maya is typing". */
+.typing-dots > span {
+  width: 5px;
+  height: 5px;
+  border-radius: 9999px;
+  background: currentColor;
+  opacity: 0.35;
+  animation: typing-dot 1.2s var(--ease-out-soft) infinite;
+}
+.typing-dots > span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.typing-dots > span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes typing-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 0.9;
+    transform: translateY(-3px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Delete button on your own messages: shown on hover or keyboard focus with a
+   mouse, always shown on touch screens (which have no hover). Hidden, it takes
+   no taps. */
+@media (hover: hover) {
+  .delete-action {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .group\/msg:hover .delete-action,
+  .delete-action:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }

package/templates/chat/app/layout.tsx

@@ -4,22 +4,25 @@ interface LayoutProps {
   children: React.ReactNode;
 }
 
-// Full-height layout so the chat can fill the screen with a sticky composer
-// at the bottom. The page renders server-side first, then hydrates into the
-// live room.
+// Full-height document shell. The chat fills the viewport; 404 and error
+// pages center themselves inside it.
 export default function RootLayout({ children }: LayoutProps) {
   return (
     <html lang="en" className="h-full">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"
+        />
+        <meta name="theme-color" content="#fbfaf8" />
+        <link
+          rel="icon"
+          href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23d9623b'/%3E%3Cpath d='M9 11.5A2.5 2.5 0 0 1 11.5 9h9a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5H15l-4 3.5V20h0a2 2 0 0 1-2-2z' fill='%23fff'/%3E%3C/svg%3E"
+        />
         <title>__APP_NAME__</title>
       </head>
-      <body className="h-full bg-background text-foreground antialiased">
-        <div className="mx-auto flex h-full max-w-lg flex-col px-4">
-          {children}
-        </div>
-      </body>
+      <body className="h-full bg-background text-foreground antialiased">{children}</body>
     </html>
   );
 }

package/templates/chat/app/not-found.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link, useRouter, type NotFoundProps } from "@pylonsync/react";
 import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
 
 // `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when
 // a page calls `response.notFound()`). It's HYDRATED, so it's interactive:
@@ -9,7 +10,7 @@ import { Button } from "@/components/ui/button";
 export default function NotFound(_props: NotFoundProps) {
   const router = useRouter();
   return (
-    <div className="space-y-6">
+    <div className="mx-auto flex min-h-dvh max-w-md flex-col justify-center gap-6 px-6">
       <section>
         <h1 className="text-2xl font-semibold tracking-tight">404</h1>
         <p className="mt-2 text-muted-foreground">
@@ -18,7 +19,8 @@ export default function NotFound(_props: NotFoundProps) {
       </section>
       <div className="flex items-center gap-3">
         <Button onClick={() => router.back()} variant="outline">
-          ← Go back
+          <ArrowLeft className="mr-1.5 size-4" aria-hidden />
+          Go back
         </Button>
         <Button asChild>
           <Link href="/">Home</Link>

package/templates/chat/app/page.tsx

@@ -1,26 +1,16 @@
 import React from "react";
-import { type Metadata } from "@pylonsync/react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
 import { ChatRoom } from "./chat-client";
 
 export const metadata: Metadata = {
-  title: "__APP_NAME__ — realtime chat on Pylon",
-  description:
-    "A live chat room over one Pylon backend. Open two tabs and watch messages sync instantly.",
+  title: "__APP_NAME__",
+  description: "A shared chat room. Everyone in the room sees the same messages.",
 };
 
-// `app/page.tsx` → `/`. The header is server-rendered; `<ChatRoom>` is a client
-// island that mints a guest session and runs the live message subscription +
-// optimistic send in the browser.
-export default function IndexPage() {
-  return (
-    <>
-      <header className="shrink-0 py-4">
-        <h1 className="text-xl font-semibold tracking-tight">Room</h1>
-        <p className="text-sm text-muted-foreground">
-          One shared room. Open a second tab — messages sync instantly.
-        </p>
-      </header>
-      <ChatRoom />
-    </>
-  );
+// `app/page.tsx` → `/`. `?c=<slug>` opens a channel (`/?c=launch`).
+// `<ChatRoom>` is a client island: the server renders its skeleton, and the
+// browser mints a guest session, then runs the live channels, messages, and
+// presence.
+export default function IndexPage({ searchParams }: PageProps) {
+  return <ChatRoom initialChannel={searchParams.c} />;
 }

package/templates/chat/app.ts

@@ -3,54 +3,133 @@ import {
   field,
   policy,
   auth,
+  font,
   buildManifest,
   discoverAppRoutes,
   discoverFunctions,
 } from "@pylonsync/sdk";
 
-// A chat message in the shared room. `authorId: field.owner()` stamps the
-// signed-in (guest) user's id server-side, so an optimistic
-// `db.insert("Message", { text })` can't forge the sender.
+// Data model
+//
+//   • Channel: a room in the sidebar (#general, #launch, …). Created by the
+//              seed; clients can read but not write.
+//   • Member:  a display name + avatar hue per user, including guests. Written
+//              only by the joinChat / renameMember functions, which take the
+//              user id from the session.
+//   • Message: one chat line. `authorId: field.owner()` stamps the sender from
+//              the session on the server, so the optimistic
+//              `db.insert("Message", …)` in the client cannot forge it.
+//
+// Presence ("3 online") and typing indicators are not stored. They ride on a
+// presence room (`useRoom` in app/chat-client.tsx).
+const Channel = entity(
+  "Channel",
+  {
+    slug: field.string().unique(),
+    name: field.string(),
+    topic: field.string(),
+    position: field.int(),
+  },
+  { indexes: [{ name: "by_position", fields: ["position"], unique: false }] },
+);
+
+const Member = entity("Member", {
+  userId: field.string().unique(),
+  name: field.string(),
+  // Avatar color, as an OKLCH hue angle (0–359).
+  hue: field.int(),
+  createdAt: field.datetime().defaultNow(),
+});
+
 const Message = entity(
   "Message",
   {
+    channelId: field.string(),
     authorId: field.string().owner(),
     text: field.string(),
     createdAt: field.datetime().defaultNow(),
   },
-  { indexes: [{ name: "by_created", fields: ["createdAt"], unique: false }] },
+  {
+    indexes: [
+      { name: "by_channel_created", fields: ["channelId", "createdAt"], unique: false },
+    ],
+  },
 );
 
-// Public-read so the room renders for everyone; insert requires a session
-// (the owner is stamped by field.owner, see the note on allowInsert); delete
-// is owner-only. An entity with no policy is denied to clients by default.
+// Everyone can read channels. Only the seed in functions/joinChat.ts writes them.
+const channelPolicy = policy({
+  name: "channel_public_read",
+  entity: "Channel",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// Names and avatar hues are public so every message can show its author.
+// Writes go through joinChat / renameMember, which validate the name and use
+// the caller's session id.
+const memberPolicy = policy({
+  name: "member_public_read",
+  entity: "Member",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The room is public-read. Insert needs a session (guests count), a channel
+// that exists, and no client-supplied `createdAt`: the server stamps the time,
+// so a client cannot pin its message to the bottom with a future date.
+// `auth.userId != null` rather than `== data.authorId`: field.owner() stamps
+// the owner after the policy check, and rejects any other user's id.
+// Messages can't be edited; the author can delete their own.
 const messagePolicy = policy({
   name: "message_room",
   entity: "Message",
   allowRead: "true",
-  // `auth.userId != null`, not `== data.authorId`: field.owner() stamps the
-  // owner AFTER the policy check, so it's null at insert-time. The stamp still
-  // guarantees the message is attributed to the caller.
-  allowInsert: "auth.userId != null",
+  allowInsert:
+    "auth.userId != null && data.createdAt == null && exists(Channel where id == data.channelId)",
   allowUpdate: "false",
   allowDelete: "auth.userId == data.authorId",
 });
 
 // buildManifest assembles the entities, policies, auth, and routes into the
-// single manifest `pylon dev` serves — SSR room + realtime API on one port.
-// Every non-internal function in functions/ becomes a manifest entry —
-// this is what makes them show up in /api/manifest, the OpenAPI spec,
-// and `pylon codegen`.
+// single manifest `pylon dev` serves: SSR page + realtime API on one port.
+// Every non-internal function in functions/ becomes a manifest entry, which
+// is what makes them show up in /api/manifest, the OpenAPI spec, and
+// `pylon codegen`.
 const fns = await discoverFunctions();
 
 const manifest = buildManifest({
   name: "__APP_NAME__",
   version: "0.1.0",
-  entities: [Message],
+  entities: [Channel, Member, Message],
   queries: fns.queries,
   actions: fns.actions,
-  policies: [messagePolicy],
+  policies: [channelPolicy, memberPolicy, messagePolicy],
   auth: auth(),
+  // Self-hosted Geist: the build fetches the woff2, serves it same-origin,
+  // preloads it, and adds a size-adjusted fallback face so text does not
+  // shift when it loads. globals.css reads the variables.
+  fonts: [
+    font({
+      family: "Geist",
+      variable: "--font-geist",
+      weights: ["400", "500", "600"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+    font({
+      family: "Geist Mono",
+      variable: "--font-geist-mono",
+      weights: ["400", "500"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: false,
+    }),
+  ],
   routes: await discoverAppRoutes(),
 });
 

package/templates/chat/components/chat/avatar.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { initials } from "@/lib/chat";
+
+interface AvatarProps {
+  name: string;
+  hue: number;
+  size?: "xs" | "sm" | "md";
+  online?: boolean;
+  className?: string;
+}
+
+const SIZES = {
+  xs: "size-5 text-[9px]",
+  sm: "size-7 text-[11px]",
+  md: "size-9 text-[13px]",
+} as const;
+
+/** Initials on a circle tinted by the member's hue. */
+export function Avatar({ name, hue, size = "md", online, className }: AvatarProps) {
+  return (
+    <span className={cn("relative inline-flex shrink-0", className)}>
+      <span
+        aria-hidden
+        className={cn(
+          "inline-flex items-center justify-center rounded-full font-semibold tracking-tight select-none",
+          SIZES[size],
+        )}
+        style={{
+          backgroundColor: `oklch(0.9 0.05 ${hue})`,
+          color: `oklch(0.38 0.1 ${hue})`,
+          boxShadow: `inset 0 0 0 1px oklch(0.8 0.07 ${hue} / 0.6)`,
+        }}
+      >
+        {initials(name)}
+      </span>
+      {online ? (
+        <span
+          aria-hidden
+          className="absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full bg-online ring-2 ring-[var(--avatar-ring,var(--background))]"
+        />
+      ) : null}
+    </span>
+  );
+}