# Tideline Restaurant Porcelain · Catalog, Fall/Winter 2026

> Public LivePage template `sample-product-catalog` · Scene: Catalogs & company profiles · Industries: Manufacturing / E-commerce & trade
> Anyone and any agent may read and adapt it; no account needed. Example content is fictional.
> Live page: https://space.24haowan.com/s/ZNRYzvbG016C · Detail: https://getlivepage.com/examples/sample-product-catalog

## What it is

Product catalogue · Products and prices for clients

## When to use it

Pick it when you want to turn products, specs, prices and case studies into a catalogue clients can leaf through, or when you are making a company introduction; also pick it when prices change and you want clients to always see the latest version. For a one-off partnership proposal to one client, pick sample-client-proposal; for a deck you present to people, pick sample-pitch-deck.

## What the user would say

Turn our products into a catalogue for clients and send it as a web link. The header has the company letterhead, the catalogue name and a few key facts (factory, minimum order, lead time, contact), followed by a row of links jumping to each product category and one large lifestyle photo. Then three or four selling points, each one sentence with a concrete number. Then a size comparison of the whole range drawn to true scale (the top-down rim drawn as nested circles aligned on the left, with names and sizes listed beside them; tapping a name highlights its circle). Each category gets a product photo and a spec table (style, size, weight, unit price range), ending with the minimum order, tiered pricing and how long prices are valid. Then three client case studies, each with one result number. End with an inquiry form (what they want first, rough quantity, name, mobile number, store), with submissions stored in a data table. A magazine-style layout, serif headings, few shaded blocks, thin rules to separate; on a phone, images and tables stack vertically. When prices change, update the same link.

If you don't have the LivePage connector (MCP) yet, read https://getlivepage.com/for-agents.md first and follow it to connect, or publish without signing in.

## How to make your own

1. Read the entry file https://getlivepage.com/examples/sample-product-catalog/source/index.html (and the other files below if it references them).
2. Keep the structure, layout and interactions; replace ALL content with the user's own. Company names, people and numbers in the template are fictional.
3. Deliver one self-contained HTML file (styles inline, no external fonts/scripts/CDNs) that looks right at 375px and 1440px wide, with dark mode if the template has it.
4. To turn it into a link that opens inside WeChat and keeps updating: connect LivePage (https://getlivepage.com/for-agents.md) and publish; without an account the user can upload the file at https://getlivepage.com/quick.
5. No LivePage tools but you can send HTTPS requests: POST the finished HTML (Content-Type: text/html) to https://getlivepage.com/api/quick?client=template-sample-product-catalog — it returns a preview link, a 7-day share step and a claim link the user can keep after signing in.

## Page structure

- Why kitchens like it
- The full range
- Plates and deep plates
- Bowls
- Cups
- Who uses it
- Samples or a quote

## Files (public, plain text)

- https://getlivepage.com/examples/sample-product-catalog/source/index.html (entry)
- https://getlivepage.com/examples/sample-product-catalog/source/_data/inquiries.json
- https://getlivepage.com/examples/sample-product-catalog/source/bowls.webp
- https://getlivepage.com/examples/sample-product-catalog/source/cups.webp
- https://getlivepage.com/examples/sample-product-catalog/source/hero.webp
- https://getlivepage.com/examples/sample-product-catalog/source/plates.webp

## Once published on LivePage

- The same link stays the same after updates (after a price change the client's link still shows the latest prices)
- Read receipts (which product categories the client looked at)
- Inquiries on the page write back to a data table (native form POST ./_data/inquiries)

## Prepare before publishing

- Data table inquiries (columns want / qty / name / phone / store / items, append_open=true): the inquiry form at the end writes here; create it with set_data before publishing

## Template README

English edition of `core/space/examples/sample-product-catalog/` — the same document, section for section, with the story reset for international readers (EPIC #11418 · C7, C15). Quality bar: `core/space/examples/QUALITY.md` (§9 for the English edition). All sample data is fictional.

## Cast & setting

| | |
|---|---|
| Company | **Harbor Ceramics** — a fictional restaurant-porcelain maker in East Liverpool, Ohio (3 kiln lines) |
| Range | **Tideline** — white porcelain with a thin blue rim line (what the four photos show) |
| People | **Daniel Reyes**, account manager (the callback in "Samples or a quote") |
| Clients | Saltmarsh Kitchen (24 seafood restaurants) · The Linden Hotel (180 rooms) · Noodle Hour (9 ramen bars) — all fictional |
| Money & units | USD per piece; sizes cm · in, weights g, volumes ml · oz; ruler and ring drawing stay in cm |
| Channels | Phone callback and email |

Keep the three in step: this table, the page text, and any sample rows you seed into `inquiries`.

## What it demonstrates

**One link that stays current after a price change + in-page inquiries written back to a data table + read receipts.**

- Prices, items and client stories change after you send a catalog: publish each revision as a new version of the **same proposal** — the `proposal_id` doesn't change, so the link your client already has always opens the latest prices.
- "Samples or a quote" at the end is a plain HTML form; submissions land in this proposal's data table `inquiries`. Read them back with `list_data_rows` — no separate survey tool.
- Read receipts show which categories a client lingered on: `get_session_timeline` gives the section-by-section trail, and each section's anchor is the `data-track-section` on its `<section>`.
- **No external links.** The small script at the end does three things: animate the size drawing, highlight a ring from the legend, submit the form in place. Without it the drawing is complete and the form still posts. The manifest has no `render`.
- The memorable part is "The full range": the top-down diameters of all eight pieces drawn to true scale (10 px per cm) as rings aligned on the left, with a US Letter-width reference line. The SVG viewBox is 340 wide: 1:1 on phones (343 panel), slightly enlarged in the 400px desktop column — it only grows, so the text never gets smaller.

## Make it yours

| Where | What to change |
|---|---|
| Header `.org` / `h1` / `.facts` | Letterhead (inline SVG mark), catalog number, range name, factory / minimum order / lead time / contact |
| Category nav `nav .cats` | Each link points at a section `id`; when you add or drop a category, change it here, in the section, and in `manifest.sections` |
| Hero image `hero.webp` | Your own setting shot (WebP, long edge ≤ 1600px, ≤ 300 KB); no `loading="lazy"` — it's above the fold |
| "Why kitchens like working with it" `.points` | Three or four selling points, one sentence each with a number someone can check |
| "The full range" `svg.sizes` | One `<circle>` per item: `r` = diameter (cm) × 5, `cx` = 16 + r (left-aligned at x=16), `cy` fixed at 166; `data-k` matches the `data-k` on the legend `.key li`; `--i` is the draw order. If your largest item is over 30 cm, shrink the scale and move the ruler ticks and the Letter line (x = 16 + 21.6 × px per cm) with it; keep `aria-label` in sync. The label `Letter 8.5 in` starts at x=237 and is about 80px wide — measure before you lengthen it (the viewBox ends at 340) |
| Categories `#plates` / `#bowls` / `#cups` | One product image + one `table` (item, size, weight, unit price range); the table sits in `.scroll`, so extra columns scroll sideways on phones instead of widening the page |
| Price terms `.terms` | Minimum order, tier pricing, tax, validity — must match the "Minimum order" fact in the header |
| "Who uses it" `.cases` | One row per client: who, what they use, and one result number on the right |
| "Samples or a quote" (end) | Plain `<form class="ask" action="./_data/inquiries">`: two short-label radio groups (`want` / `qty`) + name / mobile / restaurant + items wanted; each `name` is a column in the table. If you change columns, change `columns` in `set_data` too |
| Footer | Platform mark and product name (LivePage, `PRODUCT_EN` in `core/space/src/theme.ts`) + one line on when to use it; delete the whole footer when you publish your own catalog |
| `manifest.json` | `title` / `share.title` / `share.desc` (the text on the WeChat card); `sections` must match the `id` / `data-track-section` on the page |

Don't touch: each section's `id` must equal its `data-track-section` and its `sections[].anchor`, or the table of contents won't jump and the read receipt shows a nameless section (`src/upload/example-deck.test.ts` checks this). Section ids and the table name are identical to the Chinese pack — change one, change both.

## Data table

The inquiry form writes to the data table `inquiries` (columns `want` / `qty` / `name` / `phone` / `store` / `items`, one row per submission, `append_open=true`). Create it before publishing:

```
set_data  proposal_id: <id>  table: "inquiries"  columns: ["want","qty","name","phone","store","items"]  rows: []  append_open: true  revision: 0
```

Read submissions with `list_data_rows table=inquiries` and mark handled rows with `set_data_row_status`. Local `space-cli serve` writes submissions into the pack's `_data/inquiries.json` — reset it to `[]` when you're done testing.

## How to publish

Create a proposal with MCP `create_proposal` to get a `proposal_id`, create the `inquiries` table as above, then push the whole folder (it has images, so the CLI is easiest):

```bash
export SPACE_TOKEN=sk-space-…            # MCP create_cli_token
node core/space/cli/space-cli.mjs push core/space/examples/en/sample-product-catalog \
  --proposal <proposal_id> --manifest core/space/examples/en/sample-product-catalog/manifest.json --note "Fall/Winter 2026" --hold
```

`--hold` lets you check the preview first; then `publish_version`. No terminal? Use MCP `create_upload_session` → upload each file → `finalize_upload`.

**After a price change**: edit the same folder and push again with the same `--proposal` — the link stays the same and the data table is untouched (tables belong to the proposal, not the version).

Who can see it: only you by default; to send it to a client use `set_visibility` (`passcode`, or `public`).

## Assets

- `hero.webp` / `plates.webp` / `bowls.webp` / `cups.webp`: the same images as the Chinese pack. The Tideline range, Harbor Ceramics and the restaurants and hotel in the client stories are fictional; no real brands appear in the images.

## Ground rules

- A mobile number is a client's personal information: use it to call back, don't forward it to group chats; mark rows once handled.
- The numbers are examples — replace them all before sending, and delete the footer line "Sample content — all names and figures are fictional."