@pylonsync/create-pylon 0.19.1 → 0.21.0

package/templates/marketplace/app/globals.css

@@ -8,52 +8,64 @@
 @source "./";
 @source "../client";
 @source "../components";
-@source "../../_shared/src";
-
-@theme {
-  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
+@source "../lib";
+
+/* Geist and Instrument Serif are declared in app.ts (`fonts: [font(...)]`);
+   the runtime defines --font-geist and --font-instrument. */
+@theme inline {
+  --font-sans: var(--font-geist, ui-sans-serif), ui-sans-serif, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-display: var(--font-instrument, "Iowan Old Style"), "Iowan Old Style",
+    Georgia, serif;
   --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
 
-  --color-background: oklch(0.975 0.004 85);
-  --color-foreground: oklch(0.17 0.004 85);
-  --color-card: oklch(0.995 0.002 85);
-  --color-card-foreground: oklch(0.17 0.004 85);
-  --color-popover: oklch(0.995 0.002 85);
-  --color-popover-foreground: oklch(0.17 0.004 85);
-  --color-primary: oklch(0.19 0.004 85);
-  --color-primary-foreground: oklch(0.98 0.002 85);
-  --color-secondary: oklch(0.94 0.006 85);
-  --color-secondary-foreground: oklch(0.21 0.004 85);
-  --color-muted: oklch(0.945 0.006 85);
-  --color-muted-foreground: oklch(0.48 0.008 85);
-  --color-accent: oklch(0.93 0.009 85);
-  --color-accent-foreground: oklch(0.21 0.004 85);
-  --color-destructive: oklch(0.577 0.245 27.325);
+@theme {
+  --color-background: oklch(0.967 0.007 80);
+  --color-foreground: oklch(0.2 0.008 70);
+  --color-card: oklch(0.993 0.003 80);
+  --color-card-foreground: oklch(0.2 0.008 70);
+  --color-popover: oklch(0.993 0.003 80);
+  --color-popover-foreground: oklch(0.2 0.008 70);
+  --color-primary: oklch(0.2 0.008 70);
+  --color-primary-foreground: oklch(0.98 0.004 80);
+  --color-secondary: oklch(0.93 0.009 80);
+  --color-secondary-foreground: oklch(0.22 0.008 70);
+  --color-muted: oklch(0.935 0.009 80);
+  --color-muted-foreground: oklch(0.5 0.012 70);
+  --color-accent: oklch(0.925 0.011 80);
+  --color-accent-foreground: oklch(0.22 0.008 70);
+  --color-destructive: oklch(0.56 0.2 28);
   --color-destructive-foreground: oklch(0.985 0 0);
-  --color-success: oklch(0.62 0.14 153);
-  --color-success-foreground: oklch(0.38 0.1 153);
-  --color-warning: oklch(0.72 0.14 75);
-  --color-warning-foreground: oklch(0.42 0.1 65);
-  --color-border: oklch(0.89 0.007 85);
-  --color-input: oklch(0.86 0.008 85);
-  --color-ring: oklch(0.53 0.015 85);
+  --color-success: oklch(0.6 0.12 155);
+  --color-success-foreground: oklch(0.4 0.09 155);
+  --color-warning: oklch(0.74 0.14 70);
+  --color-warning-foreground: oklch(0.46 0.1 60);
+  /* Live signal: pending offers, the live dot, "just listed". */
+  --color-signal: oklch(0.63 0.19 38);
+  --color-signal-foreground: oklch(0.5 0.17 38);
+  --color-border: oklch(0.895 0.011 80);
+  --color-input: oklch(0.87 0.012 80);
+  --color-ring: oklch(0.55 0.02 70);
 
   --radius-lg: 1rem;
   --radius-md: 0.625rem;
   --radius-sm: 0.5rem;
+
+  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 :root {
   color-scheme: light;
   --shadow-border:
-    0 0 0 1px rgb(0 0 0 / 0.06),
-    0 1px 2px -1px rgb(0 0 0 / 0.06),
-    0 8px 24px -16px rgb(41 37 33 / 0.18);
+    0 0 0 1px rgb(40 33 24 / 0.07),
+    0 1px 2px -1px rgb(40 33 24 / 0.06),
+    0 10px 28px -18px rgb(40 33 24 / 0.2);
   --shadow-border-hover:
-    0 0 0 1px rgb(0 0 0 / 0.09),
-    0 2px 4px -2px rgb(0 0 0 / 0.08),
-    0 16px 32px -18px rgb(41 37 33 / 0.24);
+    0 0 0 1px rgb(40 33 24 / 0.1),
+    0 2px 4px -2px rgb(40 33 24 / 0.08),
+    0 18px 36px -20px rgb(40 33 24 / 0.28);
+  --shadow-float: 0 1px 2px rgb(40 33 24 / 0.08), 0 8px 20px -12px rgb(40 33 24 / 0.35);
 }
 
 :root[data-theme="light"] {
@@ -62,61 +74,102 @@
 
 :root[data-theme="dark"] {
   color-scheme: dark;
-  --color-background: oklch(0.15 0.004 85);
-  --color-foreground: oklch(0.94 0.004 85);
-  --color-card: oklch(0.19 0.005 85);
-  --color-card-foreground: oklch(0.94 0.004 85);
-  --color-popover: oklch(0.19 0.005 85);
-  --color-popover-foreground: oklch(0.94 0.004 85);
-  --color-primary: oklch(0.93 0.004 85);
-  --color-primary-foreground: oklch(0.17 0.004 85);
-  --color-secondary: oklch(0.24 0.006 85);
-  --color-secondary-foreground: oklch(0.94 0.004 85);
-  --color-muted: oklch(0.23 0.006 85);
-  --color-muted-foreground: oklch(0.7 0.007 85);
-  --color-accent: oklch(0.25 0.008 85);
-  --color-accent-foreground: oklch(0.94 0.004 85);
-  --color-border: oklch(0.3 0.007 85);
-  --color-input: oklch(0.34 0.008 85);
-  --color-ring: oklch(0.68 0.01 85);
-  --color-success-foreground: oklch(0.82 0.12 153);
+  --color-background: oklch(0.165 0.006 70);
+  --color-foreground: oklch(0.94 0.006 80);
+  --color-card: oklch(0.2 0.007 70);
+  --color-card-foreground: oklch(0.94 0.006 80);
+  --color-popover: oklch(0.2 0.007 70);
+  --color-popover-foreground: oklch(0.94 0.006 80);
+  --color-primary: oklch(0.94 0.006 80);
+  --color-primary-foreground: oklch(0.18 0.006 70);
+  --color-secondary: oklch(0.25 0.008 70);
+  --color-secondary-foreground: oklch(0.94 0.006 80);
+  --color-muted: oklch(0.24 0.008 70);
+  --color-muted-foreground: oklch(0.7 0.01 75);
+  --color-accent: oklch(0.26 0.009 70);
+  --color-accent-foreground: oklch(0.94 0.006 80);
+  --color-border: oklch(0.3 0.008 70);
+  --color-input: oklch(0.34 0.009 70);
+  --color-ring: oklch(0.68 0.012 75);
+  --color-success-foreground: oklch(0.8 0.11 155);
   --color-warning-foreground: oklch(0.84 0.12 75);
+  --color-signal: oklch(0.7 0.17 42);
+  --color-signal-foreground: oklch(0.78 0.14 45);
   --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
   --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
+  --shadow-float: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 20px -12px rgb(0 0 0 / 0.6);
 }
 
-html,
-body {
-  height: 100%;
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --color-background: oklch(0.165 0.006 70);
+    --color-foreground: oklch(0.94 0.006 80);
+    --color-card: oklch(0.2 0.007 70);
+    --color-card-foreground: oklch(0.94 0.006 80);
+    --color-popover: oklch(0.2 0.007 70);
+    --color-popover-foreground: oklch(0.94 0.006 80);
+    --color-primary: oklch(0.94 0.006 80);
+    --color-primary-foreground: oklch(0.18 0.006 70);
+    --color-secondary: oklch(0.25 0.008 70);
+    --color-secondary-foreground: oklch(0.94 0.006 80);
+    --color-muted: oklch(0.24 0.008 70);
+    --color-muted-foreground: oklch(0.7 0.01 75);
+    --color-accent: oklch(0.26 0.009 70);
+    --color-accent-foreground: oklch(0.94 0.006 80);
+    --color-border: oklch(0.3 0.008 70);
+    --color-input: oklch(0.34 0.009 70);
+    --color-ring: oklch(0.68 0.012 75);
+    --color-success-foreground: oklch(0.8 0.11 155);
+    --color-warning-foreground: oklch(0.84 0.12 75);
+    --color-signal: oklch(0.7 0.17 42);
+    --color-signal-foreground: oklch(0.78 0.14 45);
+    --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
+    --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
+    --shadow-float: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 20px -12px rgb(0 0 0 / 0.6);
+  }
 }
 
-html {
-  -webkit-tap-highlight-color: rgb(23 23 23 / 0.08);
-}
+/* Base element rules sit in the base layer so utilities (text-nowrap,
+   truncate) override them. */
+@layer base {
+  html,
+  body {
+    height: 100%;
+  }
 
-h1,
-h2,
-h3 {
-  scroll-margin-top: 6rem;
-  text-wrap: balance;
-}
+  html {
+    -webkit-tap-highlight-color: rgb(23 23 23 / 0.08);
+  }
 
-button,
-a,
-input,
-select,
-textarea {
-  touch-action: manipulation;
-}
+  body {
+    font-feature-settings: "ss01", "cv11";
+  }
 
-:where(a, button, input, select, textarea):focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
-}
+  h1,
+  h2,
+  h3 {
+    scroll-margin-top: 6rem;
+    text-wrap: balance;
+  }
+
+  button,
+  a,
+  input,
+  select,
+  textarea {
+    touch-action: manipulation;
+  }
 
-p,
-li {
-  text-wrap: pretty;
+  :where(a, button, input, select, textarea):focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  p,
+  li {
+    text-wrap: pretty;
+  }
 }
 
 .hide-scrollbar {
@@ -127,54 +180,59 @@ li {
   display: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    color-scheme: dark;
-    --color-background: oklch(0.15 0.004 85);
-    --color-foreground: oklch(0.94 0.004 85);
-    --color-card: oklch(0.19 0.005 85);
-    --color-card-foreground: oklch(0.94 0.004 85);
-    --color-popover: oklch(0.19 0.005 85);
-    --color-popover-foreground: oklch(0.94 0.004 85);
-    --color-primary: oklch(0.93 0.004 85);
-    --color-primary-foreground: oklch(0.17 0.004 85);
-    --color-secondary: oklch(0.24 0.006 85);
-    --color-secondary-foreground: oklch(0.94 0.004 85);
-    --color-muted: oklch(0.23 0.006 85);
-    --color-muted-foreground: oklch(0.7 0.007 85);
-    --color-accent: oklch(0.25 0.008 85);
-    --color-accent-foreground: oklch(0.94 0.004 85);
-    --color-border: oklch(0.3 0.007 85);
-    --color-input: oklch(0.34 0.008 85);
-    --color-ring: oklch(0.68 0.01 85);
-    --color-success-foreground: oklch(0.82 0.12 153);
-    --color-warning-foreground: oklch(0.84 0.12 75);
-    --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
-    --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
+/* A row that arrives over the sync connection rises into place. */
+@keyframes market-rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
   }
 }
+.market-rise {
+  animation: market-rise 520ms var(--ease-out-soft) both;
+}
 
-/* Live "just listed" ticker. Items are doubled in the markup, so translating
-   the track by -50% loops seamlessly. */
-@keyframes market-marquee {
+/* A new offer or event gets a short signal-colored wash. */
+@keyframes market-flash {
   from {
-    transform: translateX(0);
+    background-color: color-mix(in oklch, var(--color-signal) 16%, transparent);
   }
   to {
-    transform: translateX(-50%);
+    background-color: transparent;
   }
 }
-.market-marquee {
-  animation: market-marquee 28s linear infinite;
+.market-flash {
+  animation: market-flash 2.4s var(--ease-out-soft) both;
 }
-.market-marquee:hover {
-  animation-play-state: paused;
+
+.market-rise.market-flash {
+  animation:
+    market-rise 520ms var(--ease-out-soft) both,
+    market-flash 2.4s var(--ease-out-soft) both;
 }
-@media (prefers-reduced-motion: reduce) {
-  .market-marquee {
-    animation: none;
+
+@keyframes market-ping {
+  0% {
+    transform: scale(1);
+    opacity: 0.7;
   }
-  .animate-pulse {
+  80%,
+  100% {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+.market-ping {
+  animation: market-ping 1.8s var(--ease-out-soft) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .market-rise,
+  .market-flash,
+  .market-ping {
     animation: none;
   }
 }

package/templates/marketplace/app/layout.tsx

@@ -1,17 +1,20 @@
 import React from "react";
-import { Link } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
+import { Link, type PageProps } from "@pylonsync/react";
+import { Plus, Search } from "lucide-react";
 import { AuthNav } from "../client/AuthNav";
 import { ThemeToggle } from "../client/ThemeToggle";
 
 // Root layout. Server-rendered shell; Pylon's SSR head adapter injects the
-// compiled Tailwind <link> from app/globals.css automatically.
+// compiled Tailwind <link> from app/globals.css and the fonts from app.ts.
 export default function RootLayout({
   children,
+  searchParams,
 }: {
   children: React.ReactNode;
-}) {
+} & Partial<Pick<PageProps, "searchParams">>) {
+  const query =
+    typeof searchParams?.q === "string" ? searchParams.q.trim() : "";
+
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -25,63 +28,105 @@ export default function RootLayout({
         />
         <meta
           name="theme-color"
-          content="#f8f6f2"
+          content="#f5f2ed"
           media="(prefers-color-scheme: light)"
         />
         <meta
           name="theme-color"
-          content="#181817"
+          content="#191714"
           media="(prefers-color-scheme: dark)"
         />
-        <link rel="preconnect" href="https://images.unsplash.com" />
       </head>
       <body className="min-h-screen bg-background text-foreground antialiased">
         <a
           href="#main-content"
-          className="fixed left-4 top-4 z-50 -translate-y-20 rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background shadow-lg transition-transform focus:translate-y-0"
+          className="fixed left-4 top-4 z-50 -translate-y-20 rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background transition-transform focus:translate-y-0"
         >
           Skip to content
         </a>
-        <header className="sticky top-0 z-20 h-16 border-b bg-background/85 backdrop-blur-xl">
-          <div className="mx-auto flex h-full max-w-6xl items-center justify-between gap-3 px-5">
+        <header className="sticky top-0 z-30 border-b border-border/70 bg-background/85 backdrop-blur-xl">
+          <div className="mx-auto flex h-16 max-w-[1440px] items-center gap-3 px-4 sm:gap-6 sm:px-8">
             <Link
               href="/"
               translate="no"
-              className="flex min-h-11 items-center gap-2.5 text-sm font-semibold tracking-[-0.01em]"
+              className="flex min-h-11 shrink-0 items-center gap-2"
+              aria-label="Reprise home"
             >
-              <span className="grid size-8 place-items-center rounded-lg bg-foreground text-sm font-semibold text-background shadow-sm">
-                R
+              <span
+                aria-hidden="true"
+                className="grid size-8 place-items-center rounded-full bg-foreground pb-0.5 font-display text-[22px] leading-none text-background"
+              >
+                r
+              </span>
+              <span className="font-display text-[26px] leading-none tracking-[-0.01em]">
+                Reprise
               </span>
-              Reprise
             </Link>
+
+            <form
+              method="get"
+              action="/"
+              role="search"
+              className="relative hidden max-w-xl flex-1 md:block"
+            >
+              <label htmlFor="header-search" className="sr-only">
+                Search listings
+              </label>
+              <Search
+                aria-hidden="true"
+                strokeWidth={1.75}
+                className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+              />
+              <input
+                id="header-search"
+                name="q"
+                type="search"
+                autoComplete="off"
+                defaultValue={query}
+                placeholder="Search chairs, cameras, sellers, cities"
+                className="h-10 w-full rounded-full border-0 bg-muted pl-10 pr-4 text-sm outline-none ring-1 ring-transparent transition-[box-shadow,background-color] duration-200 placeholder:text-muted-foreground focus:bg-card focus:ring-border focus-visible:outline-none"
+              />
+            </form>
+
             <nav
               aria-label="Primary navigation"
-              className="flex items-center gap-0.5 text-sm sm:gap-1"
+              className="ml-auto flex items-center gap-1 text-sm"
             >
-              <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
-                <Link href="/">Browse</Link>
-              </Button>
-              <Button asChild variant="ghost" size="sm">
-                <Link href="/sell">Sell</Link>
-              </Button>
-              <Button asChild variant="ghost" size="sm" className="hidden md:inline-flex">
-                <Link href="/me">Dashboard</Link>
-              </Button>
+              <Link
+                href="/me"
+                className="hidden min-h-10 items-center rounded-full px-3 font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground sm:inline-flex"
+              >
+                Dashboard
+              </Link>
               <ThemeToggle />
               <AuthNav />
+              <Link
+                href="/sell"
+                className="ml-1 inline-flex min-h-10 items-center gap-1.5 rounded-full bg-primary pl-3 pr-4 text-sm font-medium text-primary-foreground transition-[background-color,scale] duration-150 hover:bg-primary/85 active:scale-[0.97]"
+              >
+                <Plus aria-hidden="true" className="size-4" strokeWidth={2} />
+                Sell
+              </Link>
             </nav>
           </div>
         </header>
         <main
           id="main-content"
-          className="mx-auto min-h-[calc(100dvh-8rem)] max-w-6xl px-5 py-6 sm:py-8"
+          className="mx-auto min-h-[calc(100dvh-8rem)] max-w-[1440px] px-4 sm:px-8"
         >
           {children}
         </main>
-        <Separator />
-        <footer className="px-5 py-7 text-center text-xs text-muted-foreground">
-          Reprise, built with Pylon. Server-rendered listings and realtime offers
-          from one binary.
+        <footer className="mt-16 border-t border-border/70">
+          <div className="mx-auto flex max-w-[1440px] flex-col gap-2 px-4 py-8 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:px-8">
+            <p>
+              <span className="font-display text-lg text-foreground">Reprise</span>{" "}
+              · Pre-owned goods from independent sellers
+            </p>
+            <p className="text-xs">
+              Built with Pylon. Listings are server-rendered; offers and sold
+              status sync live.
+            </p>
+          </div>
         </footer>
       </body>
     </html>