npm - @pylonsync/create-pylon - Versions diffs - 0.3.346 → 0.3.347 - Mend

@pylonsync/create-pylon 0.3.346 → 0.3.347

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.346",
+  "version": "0.3.347",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

package/templates/crm/README.md CHANGED Viewed

@@ -71,10 +71,11 @@ no policy allows an anonymous read — keep it that way if you add one.
 ## Theme
-Dark by default (`class="dark"` in `app/layout.tsx`). The light tokens in
-`app/globals.css` are complete, so removing that class flips the whole app. Both
-use the standard shadcn variables, so `npx shadcn@latest add <component>` drops
-in already themed.
+Light by default. The dark tokens in `app/globals.css` are complete, so adding
+`className="dark"` to the `<html>` in `app/layout.tsx` flips the whole app —
+wire it to a stored preference or `prefers-color-scheme` for a toggle. Both use
+the standard shadcn variables, so `npx shadcn@latest add <component>` drops in
+already themed.
 ## Grow it

package/templates/crm/app/companies/companies-view.tsx CHANGED Viewed

@@ -10,13 +10,15 @@ import { EmptyState } from "@/components/empty-state";
 import { RecordDialog } from "@/components/record-dialog";
 import { Avatar } from "@/components/avatar";
 import { money, relativeTime } from "@/lib/pipeline";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type CompanyRow, type DealRow } from "../workspace";
-export function CompaniesView({ email }: { email: string }) {
+export function CompaniesView() {
   const [open, setOpen] = useState(false);
   return (
-    <Workspace email={email} pathname="/companies">
+    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+      <Workspace pathname="/companies">
       {(data) => {
         // Pipeline per company, computed here rather than stored — one less
         // thing to keep in sync when a deal moves.
@@ -124,6 +126,7 @@ export function CompaniesView({ email }: { email: string }) {
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/crm/app/companies/page.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { CompaniesView } from "./companies-view";
@@ -7,11 +7,6 @@ export const metadata: Metadata = {
   robots: "noindex",
 };
-export default function CompaniesPage({ auth, response, serverData }: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  return <CompaniesView email={me?.email ?? ""} />;
+export default function CompaniesPage({}: PageProps) {
+  return <CompaniesView />;
 }

package/templates/crm/app/contacts/contacts-view.tsx CHANGED Viewed

@@ -10,13 +10,15 @@ import { EmptyState } from "@/components/empty-state";
 import { RecordDialog } from "@/components/record-dialog";
 import { Avatar } from "@/components/avatar";
 import { relativeTime } from "@/lib/pipeline";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type ContactRow } from "../workspace";
-export function ContactsView({ email }: { email: string }) {
+export function ContactsView() {
   const [open, setOpen] = useState(false);
   return (
-    <Workspace email={email} pathname="/contacts">
+    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+      <Workspace pathname="/contacts">
       {(data) => {
         const columns: ColumnDef<ContactRow>[] = [
           {
@@ -134,6 +136,7 @@ export function ContactsView({ email }: { email: string }) {
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/crm/app/contacts/page.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { ContactsView } from "./contacts-view";
@@ -7,11 +7,6 @@ export const metadata: Metadata = {
   robots: "noindex",
 };
-export default function ContactsPage({ auth, response, serverData }: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  return <ContactsView email={me?.email ?? ""} />;
+export default function ContactsPage({}: PageProps) {
+  return <ContactsView />;
 }

package/templates/crm/app/deals/[id]/deal-view.tsx CHANGED Viewed

@@ -11,13 +11,15 @@ import { ActivityTimeline } from "@/components/activity-timeline";
 import { StageBadge } from "@/components/stage-badge";
 import { Avatar } from "@/components/avatar";
 import { PIPELINE, daysUntil, money, relativeTime } from "@/lib/pipeline";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
-export function DealView({ email, dealId }: { email: string; dealId: string }) {
+export function DealView({ dealId }: { dealId: string }) {
   const router = useRouter();
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const deal = data.deals.find((d) => d.id === dealId);
@@ -169,7 +171,8 @@ export function DealView({ email, dealId }: { email: string; dealId: string }) {
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/crm/app/deals/[id]/page.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { DealView } from "./deal-view";
@@ -8,16 +8,6 @@ export const metadata: Metadata = {
 };
 /** `app/deals/[id]/page.tsx` → `/deals/:id`. */
-export default function DealPage({
-  auth,
-  response,
-  params,
-  serverData,
-}: PageProps<{ id: string }>) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  return <DealView email={me?.email ?? ""} dealId={params.id} />;
+export default function DealPage({ params }: PageProps<{ id: string }>) {
+  return <DealView dealId={params.id} />;
 }

package/templates/crm/app/layout.tsx CHANGED Viewed

@@ -9,13 +9,13 @@ interface LayoutProps {
  * lives in `app/workspace.tsx` instead, because it needs the synced data; this
  * layer only sets up the page.
  *
- * `class="dark"` makes dark the default theme. The light tokens in globals.css
- * are complete and tested, so removing the class flips the whole app; swap it
- * for a stored preference when you want a toggle.
+ * Light by default. The dark tokens in globals.css are complete, so adding
+ * `className="dark"` here flips the whole app — or wire it to a stored
+ * preference, or to `prefers-color-scheme`, when you want a toggle.
  */
 export default function RootLayout({ children }: LayoutProps) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />

package/templates/crm/app/page.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { PipelineView } from "./pipeline-view";
@@ -10,27 +10,10 @@ export const metadata: Metadata = {
 /**
  * `/` — the pipeline board.
  *
- * Server-side auth gate only. Reading `auth` opts this render out of caching,
- * which is correct: every screen in this app is private.
- *
- * The signed-in email comes from the User row, not from `auth` — `PageAuth` is
- * `{ user_id, is_admin, tenant_id, roles }` and carries no email.
  */
-export default function PipelinePage({
-  auth,
-  response,
-  searchParams,
-  serverData,
-}: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+export default function PipelinePage({ searchParams }: PageProps) {
   return (
     <PipelineView
-      email={me?.email ?? ""}
       // The ⌘K "New deal" action navigates here with ?new=deal.
       openNew={searchParams?.new === "deal"}
     />

package/templates/crm/app/pipeline-view.tsx CHANGED Viewed

@@ -10,13 +10,12 @@ import { MetricsBar } from "@/components/metrics-bar";
 import { PipelineBoard } from "@/components/pipeline-board";
 import { BoardSkeleton } from "@/components/board-skeleton";
 import { DealDialog } from "@/components/deal-dialog";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "./workspace";
 export function PipelineView({
-  email,
   openNew,
 }: {
-  email: string;
   openNew?: boolean;
 }) {
   const router = useRouter();
@@ -42,7 +41,8 @@ export function PipelineView({
   }, []);
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => (
         <>
           <PageHeader title="Pipeline" count={data.deals.length}>
@@ -94,6 +94,7 @@ export function PipelineView({
           />
         </>
       )}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/crm/app/workspace.tsx CHANGED Viewed

@@ -73,16 +73,18 @@ export interface WorkspaceData {
  * so there's one behaviour to reason about rather than two.
  */
 export function Workspace({
-  email,
   pathname,
   children,
 }: {
-  email: string;
   pathname: string;
   children: (data: WorkspaceData) => React.ReactNode;
 }) {
   const router = useRouter();
-  const { signOut } = useAuth();
+  // The signed-in identity comes from the CLIENT session, not from an SSR
+  // prop: the session cookie is SameSite=Lax and browsers withhold it inside
+  // the builder's cross-site preview iframe, so a server-resolved email would
+  // be empty exactly where this app is most often viewed.
+  const { signOut, userId } = useAuth();
   const { data: companies, loading: loadingCompanies } =
     db.useQuery<CompanyRow>("Company");
   const { data: contacts } = db.useQuery<ContactRow>("Contact");
@@ -90,6 +92,11 @@ export function Workspace({
   const { data: activities } = db.useQuery<ActivityRow>("Activity");
   const { data: users } = db.useQuery<UserRow>("User");
+  // Whoever is signed in, named from the synced User row rather than an
+  // SSR prop — see the note on useAuth above.
+  const signedInEmail =
+    (users ?? []).find((user) => user.id === userId)?.email ?? "";
   const [paletteOpen, setPaletteOpen] = useState(false);
   const seeded = useRef(false);
@@ -187,19 +194,14 @@ export function Workspace({
     <div className="flex h-screen overflow-hidden">
       <Sidebar
         workspace="CRM"
-        email={email}
+        email={signedInEmail}
         pathname={pathname}
         counts={{
           "/companies": companyList.length,
           "/contacts": contactList.length,
         }}
         onOpenCommand={() => setPaletteOpen(true)}
-        onSignOut={async () => {
-          await signOut();
-          // Full navigation so the SSR runtime re-resolves auth from the
-          // cookie and the login page renders server-side.
-          window.location.assign("/login");
-        }}
+        onSignOut={() => void signOut()}
       />
       <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>

package/templates/crm/{app/login → components}/auth-form.tsx RENAMED Viewed

@@ -16,9 +16,10 @@ import { Label } from "@/components/ui/label";
  * then `persistSession` writes the token so the sync engine and `callFn`
  * authenticate as this user on the next load.
  *
- * The navigation is a full `assign`, not a client route change, so the SSR
- * runtime re-resolves auth from the HttpOnly cookie and the first paint of the
- * workspace is already signed in.
+ * No navigation afterwards: `persistSession` notifies the sync engine and the
+ * client-side gate swaps the app in. Reloading would hand the decision to the
+ * SSR cookie, which browsers withhold inside the builder's cross-site preview
+ * iframe — that's the sign-in loop this avoids.
  */
 export function AuthForm() {
   const [mode, setMode] = useState<"login" | "signup">("login");
@@ -36,8 +37,10 @@ export function AuthForm() {
         mode === "login"
           ? await passwordLogin({ email, password })
           : await passwordRegister({ email, password });
+      // No navigation: persistSession notifies the sync engine, RequireAuth
+      // re-renders, and the app appears in place. A full page load here would
+      // depend on the SSR session cookie, which a cross-site iframe withholds.
       persistSession(session);
-      window.location.assign("/");
     } catch (err) {
       setError(messageFor(err));
       setPending(false);

package/templates/crm/components/require-auth.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+"use client";
+import React from "react";
+import { useAuth } from "@pylonsync/client";
+import { AuthForm } from "@/components/auth-form";
+/**
+ * Client-side auth gate.
+ *
+ * Deliberately NOT a server-side `response.redirect("/login")`. The session
+ * cookie is `SameSite=Lax`, which browsers withhold on cross-site iframe
+ * navigations — and this app is shown inside an iframe in the Pylon Cloud
+ * builder's live preview. An SSR gate there sees every request as anonymous no
+ * matter how many times you sign in, so signing in bounces straight back to the
+ * form. The token in local storage is visible to the client either way, so the
+ * gate belongs here.
+ *
+ * It also removes a full page load from the sign-in path: authenticating swaps
+ * this component's children in place instead of navigating.
+ */
+export function RequireAuth({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  const { isSignedIn, isLoaded } = useAuth();
+  // `isLoaded` covers the beat before the engine has resolved the stored token.
+  // Rendering the form during it would flash a sign-in screen at someone who is
+  // already signed in.
+  if (!isLoaded) {
+    return (
+      <main className="flex min-h-screen items-center justify-center">
+        <span className="text-[13px] text-muted-foreground">Loading…</span>
+      </main>
+    );
+  }
+  if (!isSignedIn) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-6">
+        <div className="w-full max-w-[320px]">
+          <div className="mb-7 flex items-center gap-2">
+            <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
+              {title.slice(0, 1).toUpperCase()}
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight">{title}</span>
+          </div>
+          <h1 className="text-[19px] font-semibold tracking-tight">
+            Sign in to your workspace
+          </h1>
+          <p className="mt-1 text-[13px] text-muted-foreground">{description}</p>
+          <div className="mt-6">
+            <AuthForm />
+          </div>
+        </div>
+      </main>
+    );
+  }
+  return <>{children}</>;
+}

package/templates/helpdesk/app/customers/customers-view.tsx CHANGED Viewed

@@ -11,14 +11,16 @@ import { RecordDialog } from "@/components/record-dialog";
 import { Avatar } from "@/components/avatar";
 import { relativeTime } from "@/lib/format";
 import { isOpen } from "@/lib/tickets";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type CustomerRow } from "../workspace";
-export function CustomersView({ email }: { email: string }) {
+export function CustomersView() {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   return (
-    <Workspace email={email} pathname="/customers">
+    <RequireAuth title="Helpdesk" description="Your team shares one queue. Anyone with an account sees it.">
+      <Workspace pathname="/customers">
       {(data) => {
         // Ticket counts per customer, derived rather than stored — one less
         // thing to keep in sync when a ticket is opened or solved.
@@ -135,6 +137,7 @@ export function CustomersView({ email }: { email: string }) {
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/helpdesk/app/customers/page.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { CustomersView } from "./customers-view";
@@ -7,11 +7,6 @@ export const metadata: Metadata = {
   robots: "noindex",
 };
-export default function CustomersPage({ auth, response, serverData }: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  return <CustomersView email={me?.email ?? ""} />;
+export default function CustomersPage({}: PageProps) {
+  return <CustomersView />;
 }

package/templates/helpdesk/app/inbox-view.tsx CHANGED Viewed

@@ -11,14 +11,13 @@ import { EmptyState } from "@/components/empty-state";
 import { TicketList } from "@/components/ticket-list";
 import { NewTicketDialog } from "@/components/new-ticket-dialog";
 import { STATUSES, applyFilter, counts, type Filter } from "@/lib/tickets";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "./workspace";
 export function InboxView({
-  email,
   openNew,
   initialFilter,
 }: {
-  email: string;
   openNew?: boolean;
   initialFilter?: string;
 }) {
@@ -47,7 +46,8 @@ export function InboxView({
   }, []);
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Helpdesk" description="Your team shares one queue. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const filter: Filter = {
           ...(status === "all" ? {} : { status }),
@@ -142,6 +142,7 @@ export function InboxView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/helpdesk/app/layout.tsx CHANGED Viewed

@@ -9,13 +9,13 @@ interface LayoutProps {
  * lives in `app/workspace.tsx` instead, because it needs the synced data; this
  * layer only sets up the page.
  *
- * `class="dark"` makes dark the default theme. The light tokens in globals.css
- * are complete and tested, so removing the class flips the whole app; swap it
- * for a stored preference when you want a toggle.
+ * Light by default. The dark tokens in globals.css are complete, so adding
+ * `className="dark"` here flips the whole app — or wire it to a stored
+ * preference, or to `prefers-color-scheme`, when you want a toggle.
  */
 export default function RootLayout({ children }: LayoutProps) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />

package/templates/helpdesk/app/page.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { InboxView } from "./inbox-view";
@@ -10,28 +10,12 @@ export const metadata: Metadata = {
 /**
  * `/` — the support queue.
  *
- * Server-side auth gate only. Reading `auth` opts this render out of caching,
- * which is correct: every screen here is private.
- *
- * The signed-in email comes from the User row, not from `auth` — `PageAuth` is
- * `{ user_id, is_admin, tenant_id, roles }` and carries no email.
  */
-export default function InboxPage({
-  auth,
-  response,
-  searchParams,
-  serverData,
-}: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+export default function InboxPage({ searchParams }: PageProps) {
   return (
     <InboxView
-      email={me?.email ?? ""}
-      openNew={searchParams?.new === "ticket"}
+          openNew={searchParams?.new === "ticket"}
       initialFilter={searchParams?.filter}
     />
   );

package/templates/helpdesk/app/tickets/[id]/page.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { TicketView } from "./ticket-view";
@@ -8,16 +8,6 @@ export const metadata: Metadata = {
 };
 /** `app/tickets/[id]/page.tsx` -> `/tickets/:id`. */
-export default function TicketPage({
-  auth,
-  response,
-  params,
-  serverData,
-}: PageProps<{ id: string }>) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  return <TicketView email={me?.email ?? ""} ticketId={params.id} />;
+export default function TicketPage({ params }: PageProps<{ id: string }>) {
+  return <TicketView ticketId={params.id} />;
 }

package/templates/helpdesk/app/tickets/[id]/ticket-view.tsx CHANGED Viewed

@@ -13,19 +13,19 @@ import { SlaIndicator } from "@/components/sla-indicator";
 import { Avatar } from "@/components/avatar";
 import { relativeTime } from "@/lib/format";
 import { PRIORITIES, STATUSES, ticketNumber } from "@/lib/tickets";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 export function TicketView({
-  email,
   ticketId,
 }: {
-  email: string;
   ticketId: string;
 }) {
   const router = useRouter();
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Helpdesk" description="Your team shares one queue. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const ticket = data.tickets.find((t) => t.id === ticketId);
@@ -159,6 +159,7 @@ export function TicketView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }