@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/marketplace/client/market.ts

@@ -1,6 +1,6 @@
 "use client";
 
-// Shared client-side glue for Pylon Market: types, display helpers, and the
+// Shared client-side glue for the marketplace: types, display helpers, and the
 // email/password auth bootstrap. Same-origin under native SSR, so no baseUrl —
 // init() resolves window.location.origin.
 import { init, configureClient, callFn, setSessionToken, storageKey } from "@pylonsync/react";
@@ -10,13 +10,13 @@ import { init, configureClient, callFn, setSessionToken, storageKey } from "@pyl
 // keyspace disagreement, no double token migration.
 export const APP_NAME = "__APP_NAME__";
 
-// Prefilled demo account — the shopper you sign in as. Owns a couple of its
-// own listings so "My Market" isn't empty, but NOT the bulk of the catalog,
-// so it can actually buy + bid on things.
+// Prefilled demo account: the shopper you sign in as. Owns three listings (so
+// the dashboard has offers to answer) but not the bulk of the catalog, so it
+// can buy and bid on everything else.
 export const DEMO = {
   email: "demo@pylon.market",
   password: "pylondemo123",
-  name: "Demo Shopper",
+  name: "Sam Rivera",
 } as const;
 
 // The seed seller that owns most of the catalog. Nobody logs in as this; it
@@ -27,13 +27,23 @@ const BAZAAR = {
   name: "Pylon Bazaar",
 } as const;
 
+// A seed buyer. Nobody logs in as this; it sends the demo offers (including
+// offers on the demo shopper's own listings) so every listing page and the
+// dashboard have live offer activity on first boot.
+const COLLECTOR = {
+  email: "collector@pylon.market",
+  password: "collectorseed123",
+  name: "Collector",
+} as const;
+
 // How many of the seeded listings the bazaar owns; the rest go to the demo.
-const BAZAAR_COUNT = 10;
+const BAZAAR_COUNT = 7;
 
 export interface Listing {
   id: string;
   sellerId: string;
   sellerName: string;
+  location?: string;
   title: string;
   slug: string;
   description: string;
@@ -85,12 +95,18 @@ function hash(s: string): number {
   return h >>> 0;
 }
 
-/** Deterministic visual fallback for listings whose remote image is unavailable. */
+/** Deterministic visual fallback for listings without a photo. */
 export function gradient(seed: string): string {
   const h = hash(seed);
-  const a = h % 360;
-  const b = (a + 40 + ((h >> 3) % 90)) % 360;
-  return `linear-gradient(135deg, hsl(${a} 68% 56%), hsl(${b} 72% 44%))`;
+  const a = 20 + (h % 60);
+  return `linear-gradient(160deg, hsl(${a} 22% 82%), hsl(${a + 12} 18% 64%))`;
+}
+
+/** A stable, muted avatar color for a person's name. */
+export function avatarColor(name: string): string {
+  const hues = [18, 32, 96, 152, 196, 262, 340];
+  const hue = hues[hash(name) % hues.length];
+  return `hsl(${hue} 32% 42%)`;
 }
 
 export function initials(title: string): string {
@@ -305,15 +321,29 @@ async function ensureAccount(
  * prefilled login is one click from a working session that can actually buy
  * and sell. Idempotent and best-effort: any failure is swallowed.
  *
- * Two accounts are seeded:
+ * Three accounts are seeded:
  *   - **bazaar** owns the bulk of the catalog, so the demo shopper has other
  *     people's listings to buy + bid on (you can't buy your own);
- *   - **demo** (the prefilled login) owns a couple of its own listings so
- *     "My Market" has something in it.
+ *   - **demo** (the prefilled login) owns three listings so the dashboard has
+ *     something in it;
+ *   - **collector** sends the demo offers and buys one item, so listings show
+ *     offer activity and the demo shopper has offers to accept.
  *
- * Both tokens are used transiently to seed and then discarded — the visitor
+ * All tokens are used transiently to seed and then discarded — the visitor
  * stays anonymous (read-only) until they choose to sign in.
  */
+/** True when the public entity API returns at least one row. */
+async function hasAnyRow(entity: string): Promise<boolean> {
+  try {
+    const res = await fetch(`/api/entities/${entity}?limit=1`);
+    if (!res.ok) return false;
+    const body = (await res.json()) as { data?: unknown[] };
+    return (body.data?.length ?? 0) > 0;
+  } catch {
+    return false;
+  }
+}
+
 // Shared in-flight promise so the many islands that mount MarketProvider on
 // one page (ticker, header, SeedOnEmpty) all await the SAME seed run instead
 // of each firing their own — that flood was tripping the login rate limit,
@@ -329,6 +359,14 @@ export function ensureDemoSeed(options: { force?: boolean } = {}): Promise<void>
   if (seedPromise) return seedPromise;
 
   seedPromise = (async () => {
+    // The collector's offers are the last seed step, so any Offer row means
+    // the accounts and catalog already exist. Skipping here keeps a fresh
+    // browser from spending the login rate limit on seed accounts.
+    if (!options.force && (await hasAnyRow("Offer"))) {
+      localStorage.setItem("market:demo-seeded", "1");
+      return;
+    }
+
     const bazaarToken = await ensureAccount(
       BAZAAR.email,
       BAZAAR.password,
@@ -347,6 +385,15 @@ export function ensureDemoSeed(options: { force?: boolean } = {}): Promise<void>
       await callFn("seedMarket", { start: BAZAAR_COUNT }, { token: demoToken });
     }
 
+    const collectorToken = await ensureAccount(
+      COLLECTOR.email,
+      COLLECTOR.password,
+      COLLECTOR.name,
+    );
+    if (collectorToken) {
+      await callFn("seedOffers", {}, { token: collectorToken });
+    }
+
     // Mark done only AFTER a successful pass, so a failed/partial run retries
     // on the next load instead of being permanently skipped.
     localStorage.setItem("market:demo-seeded", "1");

package/templates/marketplace/functions/seedMarket.ts

@@ -1,30 +1,141 @@
 import { mutation, v } from "@pylonsync/functions";
 
-// A handful of believable listings so the marketplace isn't empty on first
-// run. Idempotent: seeds only when the catalog is empty, so the browse page
-// can call it on load without worrying about duplicates.
+// Demo catalog for first boot. The client bootstrap calls this twice: once as
+// the "bazaar" account for DEMO[0..7] and once as the demo shopper for the
+// rest, so the shopper has other people's listings to buy and a few of its
+// own to receive offers on. Idempotent per caller: a seller that already has
+// listings is skipped.
 const DEMO: Array<{
   seller: string;
+  location: string;
   title: string;
   description: string;
   price: number;
   category: string;
   condition: string;
-  imageUrl: string;
+  photo: string;
   seed: string;
 }> = [
-  { seller: "maple-fox", title: "Herman Miller Aeron (size B)", description: "Fully loaded, posture-fit SL. Light desk use, no squeaks.", price: 540, category: "furniture", condition: "like-new", imageUrl: "https://images.unsplash.com/photo-1758607010203-d6b7f6ec9262?auto=format&fit=crop&w=1200&q=82", seed: "a1f3" },
-  { seller: "amber-lynx", title: "Kodak Retina IIa rangefinder", description: "1950s folding 35mm. Clean glass, accurate shutter, leather case.", price: 185, category: "cameras", condition: "good", imageUrl: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1200&q=82", seed: "b7c2" },
-  { seller: "swift-otter", title: "Specialized Allez road bike, 54cm", description: "Shimano Claris, fresh bar tape, recently tuned. Fast commuter.", price: 420, category: "bikes", condition: "good", imageUrl: "https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?auto=format&fit=crop&w=1200&q=82", seed: "c4e9" },
-  { seller: "cosmic-wren", title: "Vintage Technics SL-1200 MK2", description: "Legendary direct-drive turntable. Spins true, new slipmat.", price: 650, category: "audio", condition: "good", imageUrl: "https://images.unsplash.com/photo-1599723895995-80e160d14fe4?auto=format&fit=crop&w=1200&q=82", seed: "d8a1" },
-  { seller: "ivory-sparrow", title: "Le Creuset 5.5qt Dutch oven", description: "Flame orange, enamel intact. The one everyone wants.", price: 120, category: "kitchen", condition: "like-new", imageUrl: "https://images.unsplash.com/photo-1559137703-44aeed6161b6?auto=format&fit=crop&w=1200&q=82", seed: "e2b6" },
-  { seller: "slate-heron", title: 'LG 27" 4K UltraFine monitor', description: "USB-C, 60Hz, color-accurate. Box + cables included.", price: 240, category: "electronics", condition: "good", imageUrl: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?auto=format&fit=crop&w=1200&q=82", seed: "f5d0" },
-  { seller: "maple-fox", title: "Eames-style lounge + ottoman", description: "Walnut + tan leather replica. Sturdy, very comfortable.", price: 380, category: "furniture", condition: "good", imageUrl: "https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?auto=format&fit=crop&w=1200&q=82", seed: "a9c4" },
-  { seller: "amber-lynx", title: "Patagonia Black Hole 55L duffel", description: "One trip old. Weatherproof, zips perfect. Forest green.", price: 75, category: "outdoor", condition: "like-new", imageUrl: "https://images.unsplash.com/photo-1699319656128-6e353d6b9c7c?auto=format&fit=crop&w=1200&q=82", seed: "b3f8" },
-  { seller: "cosmic-wren", title: "Fender Player Stratocaster, sunburst", description: "Maple neck, plays great. Small buckle rash on back.", price: 560, category: "instruments", condition: "good", imageUrl: "https://images.unsplash.com/photo-1525201548942-d8732f6617a0?auto=format&fit=crop&w=1200&q=82", seed: "d1e7" },
-  { seller: "slate-heron", title: "iPad Air (5th gen) 64GB", description: "Space gray, excellent battery health, screen flawless.", price: 330, category: "electronics", condition: "like-new", imageUrl: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?auto=format&fit=crop&w=1200&q=82", seed: "f0a2" },
-  { seller: "ivory-sparrow", title: "Mid-century teak sideboard", description: "Three drawers, two cabinets. Real teak, refinished top.", price: 295, category: "furniture", condition: "good", imageUrl: "https://images.unsplash.com/photo-1558997519-83ea9252edf8?auto=format&fit=crop&w=1200&q=82", seed: "e7c3" },
-  { seller: "swift-otter", title: "Brooks Brothers wool overcoat, 40R", description: "Charcoal herringbone, fully lined. Dry-cleaned, ready to wear.", price: 90, category: "apparel", condition: "good", imageUrl: "https://images.unsplash.com/photo-1551488831-00ddcb6c6bd3?auto=format&fit=crop&w=1200&q=82", seed: "c2b5" },
+  {
+    seller: "Nora Lind",
+    location: "Brooklyn, NY",
+    title: "Danish teak lounge chair, oatmeal wool",
+    description:
+      "Solid teak frame with the original joinery, oiled last spring. Cushions were reupholstered in a heavy oatmeal wool bouclé. No wobble, no cracks. Seat height 16 in, width 27 in. Pickup in Greenpoint or I can help arrange a courier.",
+    price: 680,
+    category: "furniture",
+    condition: "good",
+    photo: "lounge-chair",
+    seed: "a1f3",
+  },
+  {
+    seller: "Marcus Bell",
+    location: "Dallas, TX",
+    title: "1960s steel dress watch, cream dial",
+    description:
+      "34 mm stainless case, hand-wound movement serviced in March. Keeps about +6 s/day. Cream dial has light, even patina. Comes on a brown suede strap with a spare black leather strap.",
+    price: 890,
+    category: "watches",
+    condition: "good",
+    photo: "watch",
+    seed: "b7c2",
+  },
+  {
+    seller: "Theo Park",
+    location: "Portland, OR",
+    title: "Chrome 35mm SLR with 50mm f/1.7",
+    description:
+      "Fully mechanical body, shutter fires at every speed and sounds right. Light meter reads within a third of a stop. Lens is clean with no haze or fungus. Original leather strap. Tested with a roll of Portra; sample scans on request.",
+    price: 240,
+    category: "cameras",
+    condition: "good",
+    photo: "film-camera",
+    seed: "c4e9",
+  },
+  {
+    seller: "Ava Moreno",
+    location: "Austin, TX",
+    title: "Walnut direct-drive turntable",
+    description:
+      "Direct-drive deck in a solid walnut plinth. Speed is stable at 33 and 45, pitch control works. New belt-free motor service, new cartridge with about 40 hours on it. Dust cover not included.",
+    price: 410,
+    category: "audio",
+    condition: "like-new",
+    photo: "turntable",
+    seed: "d8a1",
+  },
+  {
+    seller: "Nora Lind",
+    location: "Brooklyn, NY",
+    title: "Cognac leather weekender",
+    description:
+      "Full-grain leather duffel with solid brass hardware and a detachable shoulder strap. Carried on about ten trips; the leather has softened and darkened evenly. Interior lining is clean. 20 x 11 x 10 in.",
+    price: 295,
+    category: "bags",
+    condition: "good",
+    photo: "weekender-bag",
+    seed: "a9c4",
+  },
+  {
+    seller: "Elise Carter",
+    location: "Asheville, NC",
+    title: "Speckled stoneware table lamp",
+    description:
+      "Hand-thrown stoneware base in a sand glaze, pleated linen shade. Rewired with a cloth cord and inline switch. 22 in tall with the shade. One tiny glaze pop near the foot, shown in photos.",
+    price: 165,
+    category: "lighting",
+    condition: "like-new",
+    photo: "ceramic-lamp",
+    seed: "b3f8",
+  },
+  {
+    seller: "Elise Carter",
+    location: "Asheville, NC",
+    title: "Tufted slipper chair, ivory",
+    description:
+      "Small button-tufted slipper chair in ivory cotton velvet on turned white legs. Frame is tight, fabric has no stains or pulls. Seat height 17 in, width 24 in. Works in a bedroom or reading corner.",
+    price: 240,
+    category: "furniture",
+    condition: "like-new",
+    photo: "slipper-chair",
+    seed: "m5t1",
+  },
+  {
+    seller: "Sam Rivera",
+    location: "Denver, CO",
+    title: "Two-door oak wardrobe",
+    description:
+      "Solid oak wardrobe with two doors over two deep drawers. Hanging rail and one shelf inside. Doors close flush, drawers run smoothly. 40 in wide, 22 in deep, 74 in tall. Comes apart at the top for moving.",
+    price: 450,
+    category: "furniture",
+    condition: "good",
+    photo: "wardrobe",
+    seed: "n8w3",
+  },
+  {
+    seller: "Sam Rivera",
+    location: "Denver, CO",
+    title: "Carbon road bike, 54 cm, matte black",
+    description:
+      "Carbon frame and fork, 54 cm, matte black. 2x11 drivetrain shifts cleanly, new chain and brake pads this season. No cracks or impact damage. About 8.4 kg as pictured.",
+    price: 1250,
+    category: "bikes",
+    condition: "good",
+    photo: "road-bike",
+    seed: "e2b6",
+  },
+  {
+    seller: "Sam Rivera",
+    location: "Denver, CO",
+    title: "Black travel duffel, 55 L",
+    description:
+      "Water-resistant nylon duffel with padded shoulder straps and a separate shoe pocket. Used on two trips. All zips and buckles work. Packs flat into its own pocket.",
+    price: 70,
+    category: "bags",
+    condition: "like-new",
+    photo: "duffel",
+    seed: "p2d6",
+  },
 ];
 
 interface SeedMarketArgs {
@@ -36,11 +147,17 @@ interface SeedMarketResult {
   seeded: number;
 }
 
+function slugify(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+}
+
 export default mutation<SeedMarketArgs, SeedMarketResult>({
-  // Defaults to auth: "user" — seeds a slice of the catalog owned by the
-  // caller. The bootstrap calls this twice: once as a "bazaar" seller for the
-  // bulk of the catalog (so the demo buyer can bid on it), and once as the
-  // demo account for a couple of its own listings.
+  // auth defaults to "user": every seeded listing is owned by the caller.
   args: {
     start: v.optional(v.number()),
     end: v.optional(v.number()),
@@ -48,32 +165,22 @@ export default mutation<SeedMarketArgs, SeedMarketResult>({
   async handler(ctx, args) {
     if (!ctx.auth.userId) throw ctx.error("UNAUTHENTICATED", "sign in first");
 
-    // Per-caller idempotency: skip if THIS seller already has listings, so the
-    // two seed calls (and any reloads) don't duplicate.
-    const all = await ctx.db.list("Listing") as Array<{ sellerId: string }>;
+    const all = (await ctx.db.list("Listing")) as Array<{ sellerId: string }>;
     if (all.some((l) => l.sellerId === ctx.auth.userId)) return { seeded: 0 };
 
     const start = args.start ?? 0;
     const end = args.end ?? DEMO.length;
     const slice = DEMO.slice(start, end);
 
-    // Stagger createdAt so the grid + ticker have a believable order. The
-    // seller id is the caller — `Listing.sellerId` is `field.owner()`, so the
-    // framework would reject any other value. `seller` stays a display name.
-    const slugify = (s: string) =>
-      s
-        .toLowerCase()
-        .trim()
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "")
-        .slice(0, 60);
-
+    // Stagger createdAt so "newest first" follows the array order. The
+    // seller id is the caller; `sellerName` is a display name only.
     const now = Date.now();
     let n = 0;
     for (const d of slice) {
       await ctx.db.insert("Listing", {
         sellerId: ctx.auth.userId,
         sellerName: d.seller,
+        location: d.location,
         title: d.title,
         slug: `${slugify(d.title) || "item"}-${d.seed}`,
         description: d.description,
@@ -81,9 +188,9 @@ export default mutation<SeedMarketArgs, SeedMarketResult>({
         category: d.category,
         condition: d.condition,
         status: "active",
-        imageUrl: d.imageUrl,
+        imageUrl: `/images/listings/${d.photo}.webp`,
         seed: d.seed,
-        createdAt: new Date(now - (start + n) * 7 * 60_000).toISOString(),
+        createdAt: new Date(now - ((start + n) * 23 + 4) * 60_000).toISOString(),
       });
       n++;
     }

package/templates/marketplace/functions/seedOffers.ts

@@ -0,0 +1,101 @@
+import { mutation } from "@pylonsync/functions";
+
+// Demo offers for first boot, made by the caller (the "collector" account in
+// client/market.ts). Each entry is an ordinary offer the caller could send
+// through makeOffer, or a purchase it could make through buyNow, so this
+// grants no extra power: it skips listings the caller owns and listings that
+// are no longer active. Idempotent per caller: a buyer that already has
+// offers is skipped.
+const PLAN: Array<{
+  seed: string;
+  amount?: number;
+  buyerName: string;
+  message?: string;
+  minutesAgo: number;
+  buy?: boolean;
+}> = [
+  { seed: "a1f3", amount: 600, buyerName: "Leo T.", minutesAgo: 31 },
+  { seed: "a1f3", amount: 620, buyerName: "Ines M.", message: "Could pick up this weekend.", minutesAgo: 6 },
+  { seed: "b7c2", amount: 800, buyerName: "Kenji A.", minutesAgo: 14 },
+  { seed: "c4e9", amount: 215, buyerName: "Dana R.", message: "Does the meter need a battery?", minutesAgo: 26 },
+  { seed: "d8a1", amount: 380, buyerName: "Ines M.", minutesAgo: 22 },
+  { seed: "a9c4", amount: 260, buyerName: "Leo T.", minutesAgo: 44 },
+  { seed: "e2b6", buyerName: "Kenji A.", minutesAgo: 11, buy: true },
+  { seed: "n8w3", amount: 400, buyerName: "Dana R.", message: "I can pick up Saturday morning.", minutesAgo: 3 },
+  { seed: "p2d6", amount: 60, buyerName: "Ines M.", minutesAgo: 17 },
+];
+
+interface SeedOffersResult {
+  seeded: number;
+}
+
+type Row = {
+  id: string;
+  seed: string;
+  title: string;
+  price: number;
+  sellerId: string;
+  status: string;
+};
+
+export default mutation<Record<string, never>, SeedOffersResult>({
+  args: {},
+  async handler(ctx) {
+    const buyerId = ctx.auth.userId;
+    if (!buyerId) throw ctx.error("UNAUTHENTICATED", "sign in first");
+
+    const existing = (await ctx.db.list("Offer")) as Array<{ buyerId: string }>;
+    if (existing.some((o) => o.buyerId === buyerId)) return { seeded: 0 };
+
+    const listings = (await ctx.db.list("Listing")) as Row[];
+    const bySeed = new Map(listings.map((l) => [l.seed, l]));
+    const now = Date.now();
+    let seeded = 0;
+
+    for (const entry of PLAN) {
+      const listing = bySeed.get(entry.seed);
+      if (!listing || listing.sellerId === buyerId || listing.status !== "active") {
+        continue;
+      }
+      const createdAt = new Date(now - entry.minutesAgo * 60_000).toISOString();
+
+      if (entry.buy) {
+        const offerId = await ctx.db.insert("Offer", {
+          listingId: listing.id,
+          listingTitle: listing.title,
+          sellerId: listing.sellerId,
+          buyerId,
+          buyerName: entry.buyerName,
+          amount: listing.price,
+          message: "Bought at list price",
+          status: "accepted",
+          createdAt,
+        });
+        await ctx.db.update("Listing", listing.id, { status: "sold" });
+        listing.status = "sold";
+        const siblings = (await ctx.db.query("Offer", {
+          listingId: listing.id,
+        })) as Array<{ id: string; status: string }>;
+        for (const o of siblings) {
+          if (o.id !== offerId && o.status === "pending") {
+            await ctx.db.update("Offer", o.id, { status: "declined" });
+          }
+        }
+      } else {
+        await ctx.db.insert("Offer", {
+          listingId: listing.id,
+          listingTitle: listing.title,
+          sellerId: listing.sellerId,
+          buyerId,
+          buyerName: entry.buyerName,
+          amount: entry.amount ?? listing.price,
+          message: entry.message ?? "",
+          status: "pending",
+          createdAt,
+        });
+      }
+      seeded++;
+    }
+    return { seeded };
+  },
+});

package/templates/marketplace/lib/catalog.ts

@@ -1,7 +1,39 @@
-import type { Listing } from "../client/market";
+import type { Listing, Offer } from "../client/market";
 
 export type CatalogSort = "latest" | "price-low" | "price-high";
 
+export interface Category {
+  id: string;
+  label: string;
+}
+
+// Browse + sell categories. The id is what a Listing stores; the label is
+// what the UI shows.
+export const CATEGORIES: Category[] = [
+  { id: "furniture", label: "Furniture" },
+  { id: "lighting", label: "Lighting" },
+  { id: "audio", label: "Audio" },
+  { id: "cameras", label: "Cameras" },
+  { id: "watches", label: "Watches" },
+  { id: "clothing", label: "Clothing" },
+  { id: "shoes", label: "Shoes" },
+  { id: "bags", label: "Bags" },
+  { id: "bikes", label: "Bikes" },
+  { id: "instruments", label: "Instruments" },
+  { id: "kitchen", label: "Kitchen" },
+  { id: "other", label: "Other" },
+];
+
+export const CONDITIONS = ["new", "like-new", "good", "fair"] as const;
+
+export function categoryLabel(id: string): string {
+  return CATEGORIES.find((c) => c.id === id)?.label ?? id;
+}
+
+export function isCategory(id: string): boolean {
+  return CATEGORIES.some((c) => c.id === id);
+}
+
 export function browseListings(
   listings: Listing[],
   options: { category?: string; query?: string; sort?: string },
@@ -21,6 +53,7 @@ export function browseListings(
       listing.description,
       listing.category,
       listing.sellerName,
+      listing.location ?? "",
     ].some((value) => value.toLocaleLowerCase().includes(query));
   });
 
@@ -30,3 +63,41 @@ export function browseListings(
     return b.createdAt.localeCompare(a.createdAt);
   });
 }
+
+/** Pending offers per listing id. */
+export function pendingOfferCounts(offers: Offer[]): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const offer of offers) {
+    if (offer.status !== "pending") continue;
+    counts.set(offer.listingId, (counts.get(offer.listingId) ?? 0) + 1);
+  }
+  return counts;
+}
+
+/** An offer as a whole-number percentage of the asking price. */
+export function percentOfAsk(amount: number, price: number): number {
+  if (!(price > 0)) return 0;
+  return Math.round((amount / price) * 100);
+}
+
+/**
+ * Suggested offer amounts: 95%, 90%, and 85% of the asking price, rounded to
+ * a clean step, deduplicated, and always below the asking price.
+ */
+export function suggestedOffers(price: number): number[] {
+  if (!(price > 0)) return [];
+  const step = price >= 500 ? 10 : price >= 100 ? 5 : 1;
+  const amounts = [0.95, 0.9, 0.85].map((ratio) =>
+    Math.max(step, Math.round((price * ratio) / step) * step),
+  );
+  return Array.from(new Set(amounts)).filter((amount) => amount < price);
+}
+
+const BUNDLED_PHOTO = /^(\/images\/listings\/[a-z0-9-]+)\.webp$/;
+
+/** Responsive `srcset` for a bundled listing photo; undefined for others. */
+export function listingSrcSet(imageUrl: string | undefined): string | undefined {
+  const match = imageUrl?.match(BUNDLED_PHOTO);
+  if (!match) return undefined;
+  return `${match[1]}-640.webp 640w, ${imageUrl} 1120w`;
+}