+
,
+ );
+ expect(screen.getByRole('tab', { name: 'Preview' })).toHaveAttribute('aria-selected', 'true');
+ expect(screen.getByRole('tab', { name: 'Compare' })).toHaveAttribute('aria-selected', 'false');
+ });
+
+ it('can show a count', () => {
+ render(
+
+
+ -
+ {POINTS.map((p) => (
+
-
+
+ {p} +
+ ))}
+
+
+
+ Hand off the busywork. Keep the final say.
+Start a site or connect yours, and make your first change in minutes.
+ +
+
+
+ {state === 'before' ? 'Before' : 'After'}
+
+ );
+}
+
+export function Examples() {
+ return (
+ -
+ {EXAMPLES.map((e) => (
+
-
+
+
{e.title}
++
++ {e.meta} +
+ ))}
+
+ {FAQ.map((item) => (
+
+
+
+ {item.question}
+
+
+ ))}
+
+ {item.question}
+
+ {item.answer}
+{TAGLINE}
+Tell Wursor what to change. Watch it work. Approve what you like.
+
+
+
+
+ For WordPress sites · We host it, or you do
+
+
+
+
+
+
+
+
+ {PLANS.map((p) => (
+
+
+
+ ))}
+
+
+ {p.name}
+ {p.featured && Most popular} ++ {p.price} + per month +
+{p.allowance}
+-
+ {PLAN_FEATURES.map((f) => (
+
-
+
+ {f} +
+ ))}
+
+
+ ))}
+ {s.value}
+{s.label}
+
+ {RULES.map((r) => (
+
+
+
+
+ ))}
+ {r.title}
+{r.body}
+
+
+
+ {subtitle && (
+
+ );
+}
diff --git a/web/src/marketing/home/SurfacesShowcase.tsx b/web/src/marketing/home/SurfacesShowcase.tsx
new file mode 100644
index 0000000..f215804
--- /dev/null
+++ b/web/src/marketing/home/SurfacesShowcase.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { useId, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';
+import { BoardStrip } from '../../product/BoardStrip.tsx';
+import { HARBOR } from '../../product/harbor-bakery.ts';
+import { HarborConversation } from '../../product/HarborConversation.tsx';
+import { PreviewColumn } from '../../product/PreviewColumn.tsx';
+import { Fit } from '../../ui/Fit.tsx';
+import { Icon, type IconName } from '../../ui/Icon.tsx';
+import { Responsive } from './SectionHeader.tsx';
+
+type Surface = 'conversation' | 'preview' | 'board';
+
+const SURFACES: ReadonlyArray<{ value: Surface; label: string; icon: IconName; caption: string; mobileCaption?: string }> = [
+ { value: 'conversation', label: 'Conversation', icon: 'sparkles', caption: 'Conversation: ask in plain words. Wursor explains each step as it goes.', mobileCaption: 'Ask in plain words. Wursor explains each step.' },
+ { value: 'preview', label: 'Preview', icon: 'eye', caption: 'Preview: see the real page on a phone, tablet and laptop before anything goes live.' },
+ { value: 'board', label: 'Board', icon: 'board', caption: 'Board: every change in one place, from idea to published.' },
+];
+
+/**
+ * Each window is a share of the stage width with the design's aspect ratio, and its content is scaled to the
+ * window's own width, so the three views stay in proportion on any screen. Sizes are from the design (1344 × 720 stage).
+ */
+const WINDOWS: Record{eyebrow}
+
+
+ {subtitle && (
+
+
+
+ {surface === 'conversation' &&
+
+ );
+}
+
+export function SurfacesShowcase() {
+ const [selected, setSelected] = useState
+
+ );
+}
diff --git a/web/src/marketing/home/WatchTheWork.tsx b/web/src/marketing/home/WatchTheWork.tsx
new file mode 100644
index 0000000..5986781
--- /dev/null
+++ b/web/src/marketing/home/WatchTheWork.tsx
@@ -0,0 +1,43 @@
+import type { Density } from '../../product/ConversationPanel.tsx';
+import { Workspace } from '../../product/Workspace.tsx';
+import { Fit } from '../../ui/Fit.tsx';
+import { SectionHeader } from './SectionHeader.tsx';
+
+const LEVELS: ReadonlyArray<{ density: Density; title: string; description: string }> = [
+ { density: 'headline', title: 'Headline', description: 'Only what changed and what needs you.' },
+ { density: 'steps', title: 'Steps', description: 'Each step, in a sentence. The default.' },
+ { density: 'everything', title: 'Everything', description: 'Every look, edit, check and decision.' },
+];
+
+export function WatchTheWork() {
+ return (
+
+ {SURFACES.map((s, i) => (
+
+ ))}
+
+
+
+
+
+
+ {LEVELS.map((l) => (
+
+
+
+ ))}
+
+
+
+ {l.title}
+{l.description}
+
+
+
+ );
+}
diff --git a/web/src/product/ApprovalCard.tsx b/web/src/product/ApprovalCard.tsx
new file mode 100644
index 0000000..44cd328
--- /dev/null
+++ b/web/src/product/ApprovalCard.tsx
@@ -0,0 +1,20 @@
+import { ApprovalBar } from './ApprovalBar.tsx';
+import { CheckEvent } from './CheckEvent.tsx';
+import { CompareSlider } from './CompareSlider.tsx';
+import { Zoom } from '../ui/Zoom.tsx';
+import { SiteMock } from './SiteMock.tsx';
+
+/** Compare slider, the checks and the approval bar together: what the owner sees before anything goes live. */
+export function ApprovalCard() {
+ return (
+
+
+
+ {title}
+{meta}
+
+
+
+
+ );
+}
diff --git a/web/src/product/Avatar.tsx b/web/src/product/Avatar.tsx
new file mode 100644
index 0000000..bb686a6
--- /dev/null
+++ b/web/src/product/Avatar.tsx
@@ -0,0 +1,23 @@
+type Props =
+ | { kind: 'wursor'; size?: 'sm' | 'md' }
+ | { kind: 'initials'; initials: string; name: string; size?: 'sm' | 'md' };
+
+/** Person or Wursor agent identity: initials, or the brand mark on the inverse colour. */
+export function Avatar(props: Props) {
+ const size = props.size ?? 'sm';
+ if (props.kind === 'wursor') {
+ return (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ 
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ );
+ }
+ return (
+
+ {props.initials}
+
+ );
+}
diff --git a/web/src/product/BoardCard.tsx b/web/src/product/BoardCard.tsx
new file mode 100644
index 0000000..4dc541b
--- /dev/null
+++ b/web/src/product/BoardCard.tsx
@@ -0,0 +1,38 @@
+import { RiskChip } from './RiskChip.tsx';
+import { StatusPill, type Status } from './StatusPill.tsx';
+
+type Props = {
+ status: Status;
+ title: string;
+ meta: string;
+ risk?: 'everyday';
+ /** 0 to 1. Shown on a working change. */
+ progress?: number;
+};
+
+/** One change on the board. A change that needs the owner is outlined in the accent colour and says why. */
+export function BoardCard({ status, title, meta, risk, progress }: Props) {
+ return (
+
+
+ );
+}
diff --git a/web/src/product/BoardStrip.tsx b/web/src/product/BoardStrip.tsx
new file mode 100644
index 0000000..eb102d7
--- /dev/null
+++ b/web/src/product/BoardStrip.tsx
@@ -0,0 +1,31 @@
+import { BoardCard } from './BoardCard.tsx';
+import { Counter } from './Counter.tsx';
+import type { BoardLaneData } from './harbor-bakery.ts';
+
+/** The board as a strip under the preview: four lanes, each with its count. The header count is what is not done yet. */
+export function BoardStrip({ lanes }: { lanes: readonly BoardLaneData[] }) {
+ const open = lanes.filter((l) => l.status !== 'done').reduce((n, l) => n + l.cards.length, 0);
+ return (
+ {title}
+{meta}
+
+
+ {status === 'working' && progress !== undefined && (
+
+
+
+ )}
+ {status === 'needs-you' && Wursor is waiting for your answer
} +
+
+ Board
+
+ {lanes.map((lane) => (
+
+
+
+ ))}
+
+ {lane.title}
+
+ {lane.cards.map((c) => (
+
+
+ );
+}
diff --git a/web/src/product/CheckEvent.tsx b/web/src/product/CheckEvent.tsx
new file mode 100644
index 0000000..47bce3b
--- /dev/null
+++ b/web/src/product/CheckEvent.tsx
@@ -0,0 +1,19 @@
+import { Icon } from '../ui/Icon.tsx';
+
+type Props = { result: 'passed'; title: string; detail: string };
+
+/** Wursor's own checks after a change. Passed is quiet and green. "Needs attention" is not designed yet. */
+export function CheckEvent({ result, title, detail }: Props) {
+ return (
+
+
+
+
+
+ {title}
+{meta}
+
+ +{added} lines
+ −{removed} lines
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/product/CompareSlider.tsx b/web/src/product/CompareSlider.tsx
new file mode 100644
index 0000000..2812666
--- /dev/null
+++ b/web/src/product/CompareSlider.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from 'react';
+import { Icon } from '../ui/Icon.tsx';
+
+type Props = { before: ReactNode; after: ReactNode; defaultPosition?: number };
+
+const STEP = 5;
+const clamp = (n: number) => Math.min(100, Math.max(0, n));
+
+/** Drag the divider (or use the arrow keys) to compare the live site on the left with the draft on the right. */
+export function CompareSlider({ before, after, defaultPosition = 50 }: Props) {
+ const [position, setPosition] = useState(clamp(defaultPosition));
+ const box = useRef
+
+ {title}
+{detail}
+
+
+ );
+}
diff --git a/web/src/product/Composer.tsx b/web/src/product/Composer.tsx
new file mode 100644
index 0000000..6cf5a52
--- /dev/null
+++ b/web/src/product/Composer.tsx
@@ -0,0 +1,32 @@
+import { Button } from './Button.tsx';
+import { IconButton } from './IconButton.tsx';
+
+type Props = {
+ /** Only the working state is designed so far. Empty, typing and pointing come with the app screens. */
+ state: 'working';
+ autonomy: string;
+ placeholder?: string;
+ onStop?: () => void;
+};
+
+/** Where the owner talks to Wursor. While Wursor works, stop is offered and typing still works. */
+export function Composer({ autonomy, placeholder = 'Wursor is working. Add a note, or stop.', onStop }: Props) {
+ return (
+ {after}
+
+ {before}
+
+
+ Before
+ After
+
+
+
+
+ );
+}
diff --git a/web/src/product/ConversationPanel.tsx b/web/src/product/ConversationPanel.tsx
new file mode 100644
index 0000000..b5c7874
--- /dev/null
+++ b/web/src/product/ConversationPanel.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { Composer } from './Composer.tsx';
+import { SegmentedControl } from './SegmentedControl.tsx';
+
+export type Density = 'headline' | 'steps' | 'everything';
+
+const DENSITIES = [
+ { value: 'headline', label: 'Headline' },
+ { value: 'steps', label: 'Steps' },
+ { value: 'everything', label: 'Everything' },
+] as const;
+
+type Props = {
+ density: Density;
+ onDensityChange: (density: Density) => void;
+ composer?: ReactNode;
+ children?: ReactNode;
+};
+
+/** The conversation: header with the detail level, the stream, and the composer. */
+export function ConversationPanel({ density, onDensityChange, composer, children }: Props) {
+ return (
+
+
+
+
+
+
+
+
+ Conversation
+ +
+ {children}
+
+ {composer ??
+
+
+ );
+}
diff --git a/web/src/product/HarborConversation.tsx b/web/src/product/HarborConversation.tsx
new file mode 100644
index 0000000..c7f4529
--- /dev/null
+++ b/web/src/product/HarborConversation.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { useState } from 'react';
+import { ConversationPanel, type Density } from './ConversationPanel.tsx';
+import { HarborStream } from './HarborStream.tsx';
+
+/** The Harbor Bakery conversation on its own, with its own detail level. */
+export function HarborConversation({ defaultDensity = 'steps' }: { defaultDensity?: Density }) {
+ const [density, setDensity] = useState
+
+
+
+ {children}
+
+
+
+
+ );
+ }
+ return (
+ {children}
+
+
+ );
+}
diff --git a/web/src/product/Milestone.tsx b/web/src/product/Milestone.tsx
new file mode 100644
index 0000000..0b783a2
--- /dev/null
+++ b/web/src/product/Milestone.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { Icon } from '../ui/Icon.tsx';
+
+/** A divider in the stream that marks a stage in the life of a change. Always visible, even at the Headline level. */
+export function Milestone({ children }: { children: string | ReactNode }) {
+ const label = typeof children === 'string' ? children : undefined;
+ return (
+ {children}
+
+
+
+
+ );
+}
diff --git a/web/src/product/PointHighlight.tsx b/web/src/product/PointHighlight.tsx
new file mode 100644
index 0000000..3c8fb2a
--- /dev/null
+++ b/web/src/product/PointHighlight.tsx
@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+
+type Props = { left: number; top: number; width: number; height: number; label: string };
+
+/** A dashed accent box over the spot Wursor is editing. Position is in preview-stage pixels. */
+export function PointHighlight({ left, top, width, height, label }: Props) {
+ const style: CSSProperties = { left, top, width, height };
+ return (
+
+ );
+}
diff --git a/web/src/product/PreviewColumn.tsx b/web/src/product/PreviewColumn.tsx
new file mode 100644
index 0000000..e7a96dc
--- /dev/null
+++ b/web/src/product/PreviewColumn.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+import { AgentCursor } from './AgentCursor.tsx';
+import { BoardStrip } from './BoardStrip.tsx';
+import { DeviceFrame } from './DeviceFrame.tsx';
+import { HARBOR } from './harbor-bakery.ts';
+import { PointHighlight } from './PointHighlight.tsx';
+import { PreviewToolbar, type PreviewView } from './PreviewToolbar.tsx';
+import { SiteMock } from './SiteMock.tsx';
+
+/** The right-hand column of the workspace: view tabs, the live preview of the draft, and the board strip. */
+export function PreviewColumn({ defaultView = 'preview' }: { defaultView?: PreviewView }) {
+ const [view, setView] = useState
+
+ );
+}
diff --git a/web/src/product/PreviewToolbar.tsx b/web/src/product/PreviewToolbar.tsx
new file mode 100644
index 0000000..d5bafd1
--- /dev/null
+++ b/web/src/product/PreviewToolbar.tsx
@@ -0,0 +1,28 @@
+import { IconButton } from './IconButton.tsx';
+import { Tab } from './Tab.tsx';
+import { Tag } from './Tag.tsx';
+
+export type PreviewView = 'preview' | 'compare' | 'proof';
+const TABS: ReadonlyArray<{ value: PreviewView; label: string }> = [
+ { value: 'preview', label: 'Preview' },
+ { value: 'compare', label: 'Compare' },
+ { value: 'proof', label: 'Proof' },
+];
+
+type Props = { selected: PreviewView; tag?: string; onSelect?: (view: PreviewView) => void };
+
+export function PreviewToolbar({ selected, tag, onSelect }: Props) {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/product/RiskChip.tsx b/web/src/product/RiskChip.tsx
new file mode 100644
index 0000000..52da63f
--- /dev/null
+++ b/web/src/product/RiskChip.tsx
@@ -0,0 +1,13 @@
+import { Icon } from '../ui/Icon.tsx';
+
+const LABEL = { everyday: 'Everyday' } as const;
+
+/** Plain-word risk level. Only "Everyday" is designed so far; add the others when their designs exist. */
+export function RiskChip({ level }: { level: keyof typeof LABEL }) {
+ return (
+
+
+ {TABS.map((t) => (
+ onSelect?.(t.value)} />
+ ))}
+
+
+ {tag &&
+ {options.map((o) => (
+
+ ))}
+
+ );
+}
diff --git a/web/src/product/Sidebar.tsx b/web/src/product/Sidebar.tsx
new file mode 100644
index 0000000..8f084e3
--- /dev/null
+++ b/web/src/product/Sidebar.tsx
@@ -0,0 +1,55 @@
+import { Icon, type IconName } from '../ui/Icon.tsx';
+import { Avatar } from './Avatar.tsx';
+import { IconButton } from './IconButton.tsx';
+import type { Status } from './StatusPill.tsx';
+
+type Change = { title: string; status: Status; active?: boolean };
+type Props = {
+ changes: readonly Change[];
+ account: { initials: string; name: string; role: string };
+ /** Where each place goes. Defaults to in-page anchors so a mockup has no real links. */
+ hrefs?: Partial
+
+ );
+}
diff --git a/web/src/product/StatusPill.tsx b/web/src/product/StatusPill.tsx
new file mode 100644
index 0000000..9c0e411
--- /dev/null
+++ b/web/src/product/StatusPill.tsx
@@ -0,0 +1,18 @@
+export type Status = 'idea' | 'working' | 'needs-you' | 'done';
+
+export const STATUS_LABEL: Record
+
+
+ Harbor Bakery
+
+ Menu
+ Order
+ About
+ Contact
+
+
+
+ Find us on Quay Street
+Fresh bread from 6:30, every morning.
+
+
+
+
+ Opening hours
+{'Mon to Fri 6:30 to 17:00'}
+{'Saturday 7:00 to 15:00'}
+{'Sunday Closed'}
+
+
+ Call or visit
+12 Quay Street
+ {state === 'after' ? ( + +{phone.display}
+ )} +
+ 12 Quay Street
+ {phone.display}
+
+
+
+ {open &&
+ );
+}
diff --git a/web/src/product/StepLine.tsx b/web/src/product/StepLine.tsx
new file mode 100644
index 0000000..7d4b656
--- /dev/null
+++ b/web/src/product/StepLine.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { Icon, type IconName } from '../ui/Icon.tsx';
+
+type Kind = 'look' | 'search' | 'edit' | 'running';
+const ICON: Record{children}
}
+
+ {running ? (
+
+
+ );
+}
diff --git a/web/src/product/Tab.tsx b/web/src/product/Tab.tsx
new file mode 100644
index 0000000..f990d80
--- /dev/null
+++ b/web/src/product/Tab.tsx
@@ -0,0 +1,16 @@
+import { Counter } from './Counter.tsx';
+
+type Props = { label: string; selected?: boolean; count?: number; onSelect?: () => void };
+
+/** A tab with an underline indicator for the selected one. Put tabs inside an element with role="tablist". */
+export function Tab({ label, selected = false, count, onSelect }: Props) {
+ return (
+
+ );
+}
diff --git a/web/src/product/Tag.tsx b/web/src/product/Tag.tsx
new file mode 100644
index 0000000..02dccbe
--- /dev/null
+++ b/web/src/product/Tag.tsx
@@ -0,0 +1,17 @@
+import { Icon } from '../ui/Icon.tsx';
+
+type Props = { label: string; closable?: boolean; onClose?: () => void };
+
+/** Small outlined label, optionally removable. */
+export function Tag({ label, closable = false, onClose }: Props) {
+ return (
+
+ {label}
+ {closable && (
+
+ )}
+
+ );
+}
diff --git a/web/src/product/Thought.tsx b/web/src/product/Thought.tsx
new file mode 100644
index 0000000..de21ef9
--- /dev/null
+++ b/web/src/product/Thought.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { Icon } from '../ui/Icon.tsx';
+
+type Props = { seconds: number; defaultExpanded?: boolean; children?: ReactNode };
+
+/** Collapsed by default. Shows that Wursor reasoned; expand to read the reasoning in plain words. */
+export function Thought({ seconds, defaultExpanded = false, children }: Props) {
+ const [open, setOpen] = useState(defaultExpanded);
+ return (
+
+
+ {open && (
+
+ );
+}
diff --git a/web/src/product/TopBar.tsx b/web/src/product/TopBar.tsx
new file mode 100644
index 0000000..3685681
--- /dev/null
+++ b/web/src/product/TopBar.tsx
@@ -0,0 +1,42 @@
+import { Icon } from '../ui/Icon.tsx';
+import { Avatar } from './Avatar.tsx';
+import { Button } from './Button.tsx';
+import { IconButton } from './IconButton.tsx';
+import { StatusPill, type Status } from './StatusPill.tsx';
+
+type Props = {
+ site: string;
+ siteInitial: string;
+ change: string;
+ status: Status;
+ autonomy: string;
+ account: { initials: string; name: string };
+};
+
+/** Workspace top bar (48 px): sidebar toggle, site switcher, the current change and its status, autonomy, search, notifications, account. */
+export function TopBar({ site, siteInitial, change, status, autonomy, account }: Props) {
+ return (
+
+
+
+ )}
+ {children}
+
+ {change}
+
+
+
+
+
+ );
+}
diff --git a/web/src/product/harbor-bakery.ts b/web/src/product/harbor-bakery.ts
new file mode 100644
index 0000000..96bd11b
--- /dev/null
+++ b/web/src/product/harbor-bakery.ts
@@ -0,0 +1,50 @@
+import type { Status } from './StatusPill.tsx';
+
+/** Harbor Bakery: the fictional example site used for every mockup. Real previews replace this at build time. */
+export type BoardCardData = {
+ title: string;
+ meta: string;
+ status: Status;
+ risk?: 'everyday';
+ /** 0 to 1, shown on a working change. */
+ progress?: number;
+};
+export type BoardLaneData = { status: Status; title: string; cards: BoardCardData[] };
+
+export const HARBOR = {
+ site: { name: 'Harbor Bakery', initial: 'H', url: 'harborbakery.com/contact' },
+ account: { initials: 'AO', name: 'Amara Okoye', role: 'Owner' },
+ autonomy: 'Ask first',
+ change: { title: 'Make phone number tappable', status: 'working' as Status },
+ changes: [
+ { title: 'Make phone number tappable', status: 'working' as Status, active: true },
+ { title: 'Update opening hours', status: 'needs-you' as Status },
+ { title: 'Describe 3 images', status: 'idea' as Status },
+ { title: 'Refresh footer links', status: 'done' as Status },
+ ],
+ phone: { display: '(555) 014-2290', href: 'tel:+55550142290', callLabel: 'Call (555) 014-2290' },
+ board: [
+ {
+ status: 'needs-you',
+ title: 'Needs you',
+ cards: [{ title: 'Update opening hours', meta: 'Home page · 1 hour ago', status: 'needs-you' }],
+ },
+ {
+ status: 'working',
+ title: 'Working',
+ cards: [
+ { title: 'Make phone number tappable', meta: 'Contact page · 1 min ago', status: 'working', risk: 'everyday', progress: 0.42 },
+ ],
+ },
+ {
+ status: 'idea',
+ title: 'Idea',
+ cards: [{ title: 'Describe 3 images', meta: 'Home page · Suggested', status: 'idea' }],
+ },
+ {
+ status: 'done',
+ title: 'Done',
+ cards: [{ title: 'Refresh footer links', meta: 'Footer · Yesterday', status: 'done' }],
+ },
+ ] as BoardLaneData[],
+} as const;
diff --git a/web/src/product/index.ts b/web/src/product/index.ts
new file mode 100644
index 0000000..0c81ba4
--- /dev/null
+++ b/web/src/product/index.ts
@@ -0,0 +1,35 @@
+export { AgentCursor } from './AgentCursor.tsx';
+export { ApprovalBar } from './ApprovalBar.tsx';
+export { ApprovalCard } from './ApprovalCard.tsx';
+export { Avatar } from './Avatar.tsx';
+export { BoardCard } from './BoardCard.tsx';
+export { BoardStrip } from './BoardStrip.tsx';
+export { Button } from './Button.tsx';
+export { ChangeEvent } from './ChangeEvent.tsx';
+export { CheckEvent } from './CheckEvent.tsx';
+export { CompareSlider } from './CompareSlider.tsx';
+export { Composer } from './Composer.tsx';
+export { ConversationPanel, type Density } from './ConversationPanel.tsx';
+export { Counter } from './Counter.tsx';
+export { DeviceFrame } from './DeviceFrame.tsx';
+export { HARBOR } from './harbor-bakery.ts';
+export { HarborStream } from './HarborStream.tsx';
+export { IconButton } from './IconButton.tsx';
+export { Message } from './Message.tsx';
+export { Milestone } from './Milestone.tsx';
+export { HarborConversation } from './HarborConversation.tsx';
+export { PointHighlight } from './PointHighlight.tsx';
+export { PreviewColumn } from './PreviewColumn.tsx';
+export { PreviewToolbar, type PreviewView } from './PreviewToolbar.tsx';
+export { RiskChip } from './RiskChip.tsx';
+export { SegmentedControl } from './SegmentedControl.tsx';
+export { Sidebar } from './Sidebar.tsx';
+export { SiteMock } from './SiteMock.tsx';
+export { StatusPill, type Status } from './StatusPill.tsx';
+export { StepGroup } from './StepGroup.tsx';
+export { StepLine } from './StepLine.tsx';
+export { Tab } from './Tab.tsx';
+export { Tag } from './Tag.tsx';
+export { Thought } from './Thought.tsx';
+export { TopBar } from './TopBar.tsx';
+export { Workspace } from './Workspace.tsx';
diff --git a/web/src/styles/marketing.css b/web/src/styles/marketing.css
index 238be46..30f7590 100644
--- a/web/src/styles/marketing.css
+++ b/web/src/styles/marketing.css
@@ -115,3 +115,186 @@ button { font: inherit; color: inherit; }
.footer-column { flex: 1 1 40%; }
.footer-bottom { flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
}
+
+/* ---------- Button variants ---------- */
+.btn-secondary { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }
+.btn-light { background: var(--color-bg-canvas); color: var(--color-text-primary); }
+.btn-ghost:hover { background: var(--color-bg-sunken); }
+
+/* ---------- Page rhythm ---------- */
+main { display: block; }
+.m-section {
+ display: flex; flex-direction: column; align-items: center; gap: var(--space-10);
+ max-width: 1440px; margin: 160px auto 0; padding: 0 var(--space-6);
+}
+.m-section-first { margin-top: 140px; gap: var(--space-8); }
+.m-section-header { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 720px; }
+.m-align-center { align-items: center; text-align: center; }
+.m-align-left { align-items: flex-start; text-align: left; }
+.m-section-header > *, .m-section-title { margin: 0; }
+.m-eyebrow { color: var(--color-accent-text); }
+.m-section-title { color: var(--color-text-primary); }
+.m-section-sub { margin: 0; color: var(--color-text-secondary); }
+.m-caption { text-align: center; }
+
+/* ---------- Hero ---------- */
+.m-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-6) 0; text-align: center; }
+.m-announce {
+ display: inline-flex; align-items: center; gap: var(--space-2); padding: 7px 15px 7px 7px;
+ border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-bg-surface);
+}
+.m-announce-new { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-accent-text); }
+.m-hero-title { max-width: 1000px; margin: 0; color: var(--color-text-primary); }
+.m-hero-sub { max-width: 560px; margin: 0; color: var(--color-text-secondary); }
+.m-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
+.m-hero-footnote { margin: 0; color: var(--color-text-tertiary); }
+.m-hero-visual { width: 100%; max-width: 1344px; }
+.m-visual { position: relative; width: 100%; aspect-ratio: 1344 / 700; overflow: hidden; border-radius: var(--radius-xl); }
+.m-backdrop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
+.m-hero-shot { position: absolute; left: 9.0774%; top: 11.4286%; width: 81.8452%; }
+
+/* ---------- Proof strip ---------- */
+.m-proof { display: flex; gap: var(--space-8); max-width: 1200px; margin: 96px auto 0; padding: 0 var(--space-6); text-align: center; }
+.m-proof-stat { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; gap: var(--space-2); }
+.m-proof-stat p { margin: 0; }
+
+/* ---------- Surfaces ---------- */
+.m-showcase { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 100%; max-width: 1344px; }
+.m-feature-tabs { display: flex; gap: var(--space-2); }
+.m-feature-tab {
+ display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); cursor: pointer;
+ border-radius: var(--radius-full); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); color: var(--color-text-primary);
+}
+.m-feature-tab[aria-selected="true"] { background: var(--color-bg-inverse); border-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
+.m-showcase-panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 100%; }
+.m-surface { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1344 / 720; overflow: hidden; border-radius: var(--radius-xl); text-align: left; }
+.m-window { position: relative; width: var(--w); overflow: hidden; border-radius: var(--radius-lg); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-modal); }
+.m-m { display: none; }
+
+/* ---------- Watch the work ---------- */
+.m-densities { display: grid; grid-template-columns: repeat(3, 440px); gap: var(--space-6); justify-content: center; max-width: 100%; }
+.m-density { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
+.m-density-head { display: flex; flex-direction: column; gap: var(--space-1); }
+.m-density-head > * { margin: 0; }
+.m-density-head h3 { color: var(--color-text-primary); }
+.m-crop { position: relative; width: 440px; max-width: 100%; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
+.m-crop-frame { position: relative; width: 440px; height: 600px; overflow: hidden; }
+.m-crop-shot { position: absolute; left: -249px; top: -49px; width: 1440px; height: 900px; }
+
+/* ---------- Approve with proof ---------- */
+.m-approve { display: flex; align-items: center; gap: var(--space-16); max-width: 1248px; margin: 160px auto 0; padding: 0 var(--space-6); }
+.m-approve-text { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
+.m-approve-text .btn { align-self: flex-start; }
+.m-points { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
+.m-points li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-primary); }
+.m-points .icon { color: var(--color-status-success-fg); }
+.m-approve-visual { position: relative; flex: none; width: 600px; height: 700px; overflow: hidden; border-radius: var(--radius-xl); }
+.m-approve-backdrop { inset: auto; top: 0; left: -500px; width: 1344px; height: 720px; max-width: none; }
+.m-approve-card { position: absolute; left: 10%; top: 130px; width: 80%; }
+
+/* ---------- Safe by design ---------- */
+.m-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); width: 100%; max-width: 1192px; }
+.m-rule { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
+.m-rule h3, .m-rule p { margin: 0; }
+.m-rule h3 { color: var(--color-text-primary); }
+.m-rule-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-accent-subtle); color: var(--color-accent-text); }
+
+/* ---------- Examples ---------- */
+.m-section:has(.m-carousel) { gap: 56px; padding: 0; }
+.m-section:has(.m-carousel) .m-section-header { padding: 0 var(--space-6); }
+.m-carousel {
+ display: flex; gap: var(--space-6); width: 100%; margin: 0; list-style: none; overflow-x: auto; scroll-snap-type: x proximity;
+ padding: 0 var(--space-6) var(--space-2) max(var(--space-6), calc((100vw - 1200px) / 2)); scrollbar-width: none;
+}
+.m-carousel::-webkit-scrollbar { display: none; }
+.m-example { display: flex; flex: none; flex-direction: column; gap: var(--space-3); width: 300px; padding: var(--space-4); scroll-snap-align: start; border-radius: var(--radius-xl); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
+.m-example p { margin: 0; }
+.m-example > .t-title-s { color: var(--color-text-primary); }
+.m-thumbs { display: flex; gap: var(--space-2); }
+.m-thumb { position: relative; flex: none; width: 130px; height: 92px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); }
+.m-thumb-label { position: absolute; top: 5px; left: 5px; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-bg-surface); color: var(--color-text-primary); }
+.m-thumb[data-state="after"] .m-thumb-label { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
+.m-example-meta { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); }
+
+/* ---------- Pricing ---------- */
+.m-pricing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
+.m-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); width: 100%; max-width: 1200px; }
+.m-plan { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
+.m-plan-featured { border: 2px solid var(--color-accent-default); padding: calc(var(--space-6) - 1px); }
+.m-plan-head { display: flex; align-items: center; justify-content: space-between; }
+.m-plan h3, .m-plan p { margin: 0; }
+.m-plan-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-bg-inverse); color: var(--color-text-inverse); }
+.m-plan-price { display: flex; align-items: flex-end; gap: var(--space-1); }
+.m-plan-price .t-caption { color: var(--color-text-tertiary); }
+.m-plan-features { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
+.m-plan-features li { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-primary); }
+.m-plan-features .icon { color: var(--color-status-success-fg); }
+.m-plan-cta { width: 100%; }
+
+/* ---------- FAQ ---------- */
+.m-faq { width: 100%; max-width: 760px; }
+.m-faq-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border-subtle); }
+.m-faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none; color: var(--color-text-primary); }
+.m-faq-question::-webkit-details-marker { display: none; }
+.m-faq-question > span:first-child { flex: 1 0 0; }
+.m-faq-chevron { color: var(--color-text-tertiary); transition: transform 0.15s ease; }
+.m-faq-item[open] .m-faq-chevron { transform: rotate(180deg); }
+.m-faq-item p { margin-top: var(--space-3); }
+
+/* ---------- Closing CTA ---------- */
+.m-cta { max-width: 1248px; margin: 160px auto 0; padding: 0 var(--space-6); }
+.m-cta-panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: 96px 80px; border-radius: 32px; background: var(--color-bg-inverse); text-align: center; }
+.m-cta-title { max-width: 760px; margin: 0; color: var(--color-text-inverse); }
+.m-cta-sub { margin: 0; color: var(--color-text-inverse); opacity: 0.8; }
+.footer { margin-top: 160px; }
+.m-carousel { scroll-padding-inline-start: max(var(--space-6), calc((100vw - 1200px) / 2)); }
+
+/* ---------- Phone layout (design: 390 px wide) ---------- */
+@media (max-width: 900px) {
+ .m-d { display: none; }
+ .m-m { display: inline; }
+ .m-hide-mobile { display: none; }
+
+ .t-display-xl, .m-hero-title { font: 300 36px/40px var(--font-sans); letter-spacing: -0.02em; }
+ .m-section-title { font: 300 36px/40px var(--font-sans); letter-spacing: -0.02em; }
+ .m-section { margin-top: 72px; gap: var(--space-8); padding: 0 var(--space-4); }
+ .m-section-first { margin-top: 72px; }
+ .m-section:has(.m-carousel) { padding: 0; gap: var(--space-8); }
+ .m-section:has(.m-carousel) .m-section-header { padding: 0 var(--space-4); }
+
+ .m-hero { padding: var(--space-8) var(--space-4) 0; gap: var(--space-5); }
+ .m-announce { display: none; }
+ .m-hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
+ .m-hero-actions .btn { width: 100%; }
+ .m-hero-footnote { display: none; }
+ .m-hero-visual { margin-top: var(--space-2); }
+ .m-visual { aspect-ratio: auto; height: 420px; border-radius: 28px; }
+ .m-hero-shot { left: 24px; right: 24px; top: 40px; width: auto; height: 330px; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
+
+ .m-proof { flex-direction: column; gap: var(--space-6); margin-top: 56px; padding: 0 var(--space-4); }
+
+ .m-feature-tabs { gap: var(--space-1); justify-content: center; }
+ .m-surface { aspect-ratio: auto; height: 390px; align-items: flex-start; padding-top: 32px; border-radius: 28px; }
+ .m-window { width: calc(100% - 48px); }
+ .m-showcase-panel { gap: var(--space-6); }
+
+ .m-densities { display: flex; justify-content: flex-start; gap: var(--space-4); width: 100%; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); scrollbar-width: none; }
+ .m-densities::-webkit-scrollbar { display: none; }
+ .m-density { flex: none; width: calc(100vw - 32px); scroll-snap-align: start; }
+ .m-crop { width: 100%; }
+
+ .m-approve { flex-direction: column; align-items: stretch; gap: var(--space-8); margin-top: 72px; padding: 0 var(--space-4); }
+ .m-approve-visual { width: 100%; height: auto; aspect-ratio: 358 / 440; border-radius: 28px; }
+ .m-approve-card { left: 4%; width: 92%; top: 40px; }
+ .m-approve-backdrop { left: 0; width: 100%; height: 100%; object-fit: cover; }
+
+ .m-rules { grid-template-columns: 1fr; }
+ .m-plans { grid-template-columns: 1fr; }
+ .m-faq-item { padding: var(--space-5) 0; }
+
+ .m-cta { margin-top: 72px; padding: 0 var(--space-4); }
+ .m-cta-panel { padding: 40px var(--space-6); border-radius: 24px; }
+ .m-cta-title { font: 400 28px/34px var(--font-sans); letter-spacing: -0.015em; }
+ .m-cta-sub { display: none; }
+ .footer { margin-top: 72px; }
+}
diff --git a/web/src/styles/product.css b/web/src/styles/product.css
new file mode 100644
index 0000000..3796b56
--- /dev/null
+++ b/web/src/styles/product.css
@@ -0,0 +1,243 @@
+/*
+ * Product UI components, built once at their design size (1x) from the Figma file "Wursor - weown.net".
+ * The marketing mockups scale these with Fit/Zoom; the app uses them as they are.
+ * Colours, spacing and radii come from tokens.css only.
+ */
+.p-workspace, .p-approvalcard, .p-convo, .p-previewcol, .p-board, .p-site { text-align: left; }
+.p-spacer { flex: 1 0 0; min-width: 1px; min-height: 1px; }
+button:where([class^="p-"]) { font: inherit; }
+button:where([class^="p-"]), :where(.p-compare-handle) { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
+button:where([class^="p-"]):focus-visible { outline: 2px solid var(--color-accent-default); outline-offset: 2px; }
+.p-workspace p, .p-approvalcard p, .p-convo p, .p-site p, .p-board p { margin: 0; }
+.p-workspace h2, .p-workspace h3 { margin: 0; font: inherit; }
+
+/* ---------- Avatar ---------- */
+.p-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-full); }
+.p-avatar-sm { width: 24px; height: 24px; }
+.p-avatar-md { width: 32px; height: 32px; }
+.p-avatar-initials { background: var(--color-bg-sunken); border: 1px solid var(--color-border-subtle); color: var(--color-text-primary); }
+.p-avatar-initials.p-avatar-sm { font: 500 12px/16px var(--font-sans); }
+.p-avatar-initials.p-avatar-md { font: 500 13px/16px var(--font-sans); }
+.p-avatar-wursor { background: var(--color-bg-inverse); }
+.p-avatar-mark { display: block; width: 14px; height: 14px; }
+.p-avatar-mark-dark { display: none; }
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) .p-avatar-mark-light { display: none; }
+ :root:not([data-theme="light"]) .p-avatar-mark-dark { display: block; }
+}
+:root[data-theme="dark"] .p-avatar-mark-light { display: none; }
+:root[data-theme="dark"] .p-avatar-mark-dark { display: block; }
+
+/* ---------- Counter, status, risk ---------- */
+.p-counter {
+ display: inline-flex; align-items: center; justify-content: center; flex: none;
+ height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-full);
+ background: var(--color-accent-fill); color: var(--color-text-on-accent); font: 500 12px/16px var(--font-sans);
+}
+.p-status {
+ display: inline-flex; align-items: center; flex: none; gap: var(--space-2); height: 24px;
+ padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-full);
+ background: var(--color-bg-sunken); color: var(--color-text-secondary); font: 500 12px/16px var(--font-sans); white-space: nowrap;
+}
+.p-status[data-status="working"] { background: var(--color-status-working-bg); color: var(--color-status-working-fg); }
+.p-status[data-status="needs-you"] { background: var(--color-status-needs-you-bg); color: var(--color-status-needs-you-fg); }
+.p-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-tertiary); }
+.p-status[data-status="working"] .p-dot { background: var(--color-status-working-dot); }
+.p-status[data-status="needs-you"] .p-dot { background: var(--color-status-needs-you-dot); }
+.p-risk {
+ display: inline-flex; align-items: center; flex: none; gap: var(--space-1); height: 24px;
+ padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-full);
+ background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
+ color: var(--color-text-primary); font: 500 12px/16px var(--font-sans); white-space: nowrap;
+}
+.p-risk .icon { color: var(--color-status-success-fg); }
+
+/* ---------- Buttons ---------- */
+.p-iconbtn { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--icon-color); }
+.p-iconbtn-sm { width: 28px; height: 28px; }
+.p-iconbtn-md { width: 36px; height: 36px; }
+.p-iconbtn-inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
+.p-iconbtn-ghost:hover { background: var(--color-bg-sunken); }
+.p-btn {
+ display: inline-flex; flex: none; align-items: center; justify-content: center; gap: var(--space-2);
+ border-radius: var(--radius-full); font: 500 13px/16px var(--font-sans); white-space: nowrap;
+}
+.p-btn-sm { height: 28px; padding: 0 var(--space-3); }
+.p-btn-md { height: 36px; padding: 0 var(--space-4); }
+.p-btn-primary { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
+.p-btn-secondary { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }
+.p-btn-ghost { color: var(--color-text-primary); }
+.p-btn-ghost:hover { background: var(--color-bg-sunken); }
+
+/* ---------- Segmented control, tabs, tag ---------- */
+.p-segmented {
+ display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-full);
+ background: var(--color-bg-sunken); border: 1px solid var(--color-border-subtle);
+}
+.p-segment {
+ display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 var(--space-3);
+ border: 1px solid transparent; border-radius: var(--radius-full); color: var(--color-text-secondary); font: 500 13px/16px var(--font-sans);
+}
+.p-segment[aria-checked="true"] { background: var(--color-bg-surface); border-color: var(--color-border-subtle); color: var(--color-text-primary); }
+.p-tabs { display: flex; gap: var(--space-1); }
+.p-tab { display: flex; flex-direction: column; align-items: stretch; color: var(--color-text-secondary); font: 500 13px/16px var(--font-sans); }
+.p-tab[aria-selected="true"] { color: var(--color-text-primary); }
+.p-tab-row { display: flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
+.p-tab-indicator { height: 2px; }
+.p-tab[aria-selected="true"] .p-tab-indicator { background: var(--color-bg-inverse); }
+.p-tag {
+ display: inline-flex; align-items: center; flex: none; gap: var(--space-1); height: 28px; padding: 0 var(--space-3);
+ border-radius: var(--radius-full); background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
+ color: var(--color-text-primary); font: 500 13px/16px var(--font-sans); white-space: nowrap;
+}
+.p-tag-close { display: inline-flex; color: var(--icon-color); }
+
+/* ---------- Conversation ---------- */
+.p-convo { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--color-bg-surface); border-right: 1px solid var(--color-border-subtle); }
+.p-convo-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
+.p-convo-title { font: 500 13px/16px var(--font-sans); color: var(--color-text-primary); }
+.p-stream { display: flex; flex: 1 0 0; flex-direction: column; align-items: stretch; gap: var(--space-4); min-height: 0; padding: var(--space-4); overflow: hidden; }
+.p-stream[data-density="everything"] { justify-content: flex-end; }
+.p-composer-area { padding: var(--space-2) var(--space-4) var(--space-4); }
+.p-message-user { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-sunken); }
+.p-message p { font: 400 14px/20px var(--font-sans); color: var(--color-text-primary); }
+.p-message-wursor { display: flex; align-items: flex-start; gap: var(--space-3); }
+.p-message-wursor p { flex: 1 0 0; min-width: 0; }
+.p-stepgroup-header, .p-thought-header { display: flex; align-items: center; gap: var(--space-1); width: 100%; text-align: left; }
+.p-stepgroup-header { font: 500 13px/16px var(--font-sans); color: var(--color-text-primary); }
+.p-stepgroup-title { flex: 1 0 0; min-width: 0; }
+.p-stepgroup-header .icon, .p-thought-header .icon { color: var(--color-text-tertiary); }
+.p-stepgroup-body { padding-left: var(--space-6); }
+.p-thought { display: flex; flex-direction: column; gap: var(--space-2); }
+.p-thought-header { font: 500 12px/16px var(--font-sans); color: var(--color-text-tertiary); }
+.p-thought-body { display: flex; align-items: stretch; gap: var(--space-3); padding-left: 10px; }
+.p-thought-rule { flex: none; width: 2px; background: var(--color-border-default); }
+.p-thought-body p { flex: 1 0 0; min-width: 0; font: 400 14px/20px var(--font-sans); color: var(--color-text-secondary); }
+.p-stepline { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; }
+.p-stepline-icon { display: inline-flex; flex: none; color: var(--color-text-secondary); }
+.p-stepline-running .p-stepline-icon { color: var(--color-status-working-dot); }
+.p-stepline-text { flex: 1 0 0; min-width: 0; font: 400 14px/20px var(--font-sans); color: var(--color-text-secondary); }
+.p-stepline-running .p-stepline-text { color: var(--color-text-primary); }
+.p-stepline-time { flex: none; font: 400 12px/16px var(--font-sans); color: var(--color-text-tertiary); white-space: nowrap; }
+.p-change { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
+.p-change-top, .p-change-diff { display: flex; align-items: center; gap: var(--space-3); }
+.p-change-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-bg-sunken); color: var(--color-text-secondary); }
+.p-change-text { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; }
+.p-change-title { font: 500 14px/20px var(--font-sans); color: var(--color-text-primary); white-space: nowrap; }
+.p-change-meta { font: 400 12px/16px var(--font-sans); color: var(--color-text-tertiary); white-space: nowrap; }
+.p-diff-add { font: 400 12px/16px var(--font-mono); color: var(--color-diff-add-fg); white-space: nowrap; }
+.p-diff-remove { font: 400 12px/16px var(--font-mono); color: var(--color-diff-remove-fg); white-space: nowrap; }
+.p-check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-status-success-bg); }
+.p-check-icon { display: inline-flex; flex: none; color: var(--color-status-success-fg); }
+.p-check-text { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; gap: var(--space-1); }
+.p-check-title { font: 500 14px/20px var(--font-sans); color: var(--color-status-success-fg); }
+.p-check-detail { font: 400 12px/16px var(--font-sans); color: var(--color-text-secondary); }
+.p-check > .icon { flex: none; color: var(--color-text-secondary); }
+.p-milestone { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
+.p-milestone-line { flex: 1 0 0; height: 1px; background: var(--color-border-subtle); }
+.p-milestone-chip { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 12px/16px var(--font-sans); color: var(--color-text-primary); }
+.p-milestone-chip .icon { color: var(--color-text-secondary); }
+.p-composer { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-xl); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); }
+.p-composer-input { width: 100%; padding: 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--color-text-primary); font: 400 14px/20px var(--font-sans); }
+.p-composer-input::placeholder { color: var(--color-text-tertiary); opacity: 1; }
+.p-composer-toolbar { display: flex; align-items: center; justify-content: space-between; }
+.p-composer-side { display: flex; align-items: center; gap: var(--space-1); }
+
+/* ---------- Workspace chrome ---------- */
+.p-topbar { display: flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-4); background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-subtle); }
+.p-site-switcher { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font: 500 13px/16px var(--font-sans); color: var(--color-text-primary); }
+.p-site-switcher .icon { color: var(--color-text-tertiary); }
+.p-favicon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-xs); background: var(--color-accent-subtle); color: var(--color-accent-text); font: 500 12px/16px var(--font-sans); }
+.p-topbar-change { display: flex; align-items: center; gap: var(--space-3); }
+.p-topbar-change-title { font: 500 13px/16px var(--font-sans); color: var(--color-text-primary); white-space: nowrap; }
+.p-sidebar { display: flex; flex: none; flex-direction: column; gap: var(--space-1); width: 240px; height: 100%; padding: var(--space-3); background: var(--color-bg-canvas); border-right: 1px solid var(--color-border-subtle); }
+.p-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
+.p-navitem { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--color-text-secondary); }
+.p-navitem .icon { color: var(--color-text-secondary); }
+.p-sidebar-changes-header { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--space-2) 0; }
+.p-sidebar-changes-header .t-overline { color: var(--color-text-tertiary); }
+.p-changelist { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
+.p-changeitem { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--color-text-secondary); }
+.p-changeitem[aria-current="true"] { background: var(--color-bg-surface); border-color: var(--color-border-subtle); color: var(--color-text-primary); }
+.p-changeitem-title { flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.p-statusdot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--color-border-strong); }
+.p-changeitem[data-status="working"] .p-statusdot { background: var(--color-status-working-dot); border-color: transparent; }
+.p-changeitem[data-status="needs-you"] .p-statusdot { background: var(--color-status-needs-you-dot); border-color: transparent; }
+.p-changeitem[data-status="done"] .p-statusdot { background: var(--color-status-success-dot); border-color: transparent; }
+.p-account { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
+.p-account-text { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; }
+.p-account-text p:first-child { font: 500 13px/16px var(--font-sans); color: var(--color-text-primary); }
+.p-account-text p:last-child { font: 400 12px/16px var(--font-sans); color: var(--color-text-tertiary); }
+.p-workspace { position: relative; display: flex; flex-direction: column; width: 1440px; height: 900px; overflow: hidden; background: var(--color-bg-canvas); color: var(--color-text-primary); font-family: var(--font-sans); }
+.p-workspace-body { display: flex; flex: 1 0 0; min-height: 0; }
+.p-workspace-body > .p-convo { width: 440px; flex: none; }
+
+/* ---------- Preview ---------- */
+.p-previewcol { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; height: 100%; }
+.p-previewbar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); }
+.p-stage { position: relative; display: flex; flex: 1 0 0; min-height: 0; flex-direction: column; align-items: center; padding: var(--space-6); overflow: hidden; background: var(--color-bg-sunken); }
+.p-device { width: 712px; flex: none; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-bg-surface); }
+.p-device-scale { width: 760px; zoom: 0.93684; }
+.p-device-bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-bg-sunken); }
+.p-device-dots { color: var(--color-border-strong); }
+.p-device-address { display: flex; flex: 1 0 0; min-width: 0; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-bg-surface); font: 400 12px/16px var(--font-sans); color: var(--color-text-secondary); }
+.p-device-address .icon, .p-device-bar > .icon:last-child { color: var(--color-text-tertiary); }
+.p-highlight { position: absolute; border: 2px dashed var(--color-accent-default); border-radius: var(--radius-sm); }
+.p-highlight-fill { position: absolute; inset: -2px; border-radius: var(--radius-sm); background: var(--color-accent-default); opacity: 0.08; }
+.p-highlight-tag { position: absolute; bottom: -30px; left: -2px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--color-accent-fill); color: var(--color-text-on-accent); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
+.p-cursor { position: absolute; display: flex; align-items: center; gap: var(--space-1); }
+.p-cursor .icon { color: var(--color-accent-default); }
+.p-cursor-name { padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-accent-fill); color: var(--color-text-on-accent); font: 500 12px/16px var(--font-sans); }
+
+/* ---------- Site mock (Harbor Bakery, 760 px design width) ---------- */
+.p-site { width: 760px; background: var(--color-bg-surface); font-family: var(--font-sans); }
+.p-site-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); font-weight: 500; }
+.p-site-brand { font: 500 16px/24px var(--font-sans); letter-spacing: -0.005em; color: var(--color-text-primary); }
+.p-site-links { display: flex; gap: var(--space-5); font: 500 13px/16px var(--font-sans); color: var(--color-text-secondary); }
+.p-site-links .p-site-current { color: var(--color-text-primary); }
+.p-site-rule { height: 1px; background: var(--color-border-subtle); }
+.p-site-hero { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-6); background: var(--color-accent-subtle); }
+.p-site-title { font: 400 28px/34px var(--font-sans); letter-spacing: -0.015em; color: var(--color-text-primary); }
+.p-site-sub { font: 400 14px/20px var(--font-sans); color: var(--color-text-secondary); }
+.p-site-body { display: flex; align-items: flex-start; gap: var(--space-10); padding: var(--space-6); }
+.p-site-col { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
+.p-site-label { font: 500 13px/16px var(--font-sans); color: var(--color-text-primary); }
+.p-site-line { font: 400 14px/20px var(--font-sans); color: var(--color-text-secondary); white-space: pre; }
+.p-site-phone { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); background: var(--color-bg-inverse); color: var(--color-text-inverse); font: 500 13px/16px var(--font-sans); white-space: nowrap; }
+.p-site-phone-plain { font: 400 16px/24px var(--font-sans); color: var(--color-text-primary); }
+.p-site-footer { display: flex; justify-content: space-between; padding: var(--space-4) var(--space-6); background: var(--color-bg-sunken); font: 400 12px/16px var(--font-sans); color: var(--color-text-tertiary); }
+.p-site-footer-link { color: var(--color-text-link); }
+
+/* ---------- Board ---------- */
+.p-board { display: flex; flex: none; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); overflow: hidden; background: var(--color-bg-canvas); border-top: 1px solid var(--color-border-subtle); }
+.p-board-header { display: flex; align-items: center; gap: var(--space-2); }
+.p-board-title { font: 500 13px/16px var(--font-sans); color: var(--color-text-primary); }
+.p-board-link { font: 500 13px/16px var(--font-sans); color: var(--color-text-secondary); }
+.p-lanes { display: flex; align-items: flex-start; gap: var(--space-4); }
+.p-lane { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; gap: var(--space-2); }
+.p-lane-header { display: flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--color-text-secondary); }
+.p-boardcard { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); }
+.p-boardcard[data-status="needs-you"] { border: 1.5px solid var(--color-accent-default); padding: calc(var(--space-3) - 0.5px); }
+.p-boardcard-title { font: 500 14px/20px var(--font-sans); color: var(--color-text-primary); }
+.p-boardcard[data-status="done"] .p-boardcard-title { color: var(--color-text-secondary); }
+.p-boardcard-meta { font: 400 12px/16px var(--font-sans); color: var(--color-text-tertiary); }
+.p-boardcard-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; }
+.p-boardcard-ask { font: 400 12px/16px var(--font-sans); color: var(--color-accent-text); }
+.p-progress { height: 3px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-bg-sunken); }
+.p-progress-fill { display: block; height: 3px; border-radius: var(--radius-full); background: var(--color-accent-default); }
+
+/* ---------- Compare and approval ---------- */
+.p-compare { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-bg-surface); }
+.p-compare-layer { position: absolute; inset: 0; overflow: hidden; }
+.p-compare-divider { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--color-bg-inverse); }
+.p-compare-handle { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: var(--radius-full); background: var(--color-bg-inverse); color: var(--color-text-inverse); touch-action: none; cursor: ew-resize; }
+.p-compare-label { position: absolute; top: 62px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); border: 1px solid var(--color-border-default); font: 500 12px/16px var(--font-sans); }
+.p-compare-label-before { left: 12px; background: var(--color-bg-surface); color: var(--color-text-primary); }
+.p-compare-label-after { right: 12px; background: var(--color-bg-inverse); color: var(--color-text-inverse); }
+.p-approvalcard { display: flex; flex-direction: column; gap: var(--space-4); width: 480px; padding: var(--space-4); overflow: hidden; border-radius: 20px; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-modal); font-family: var(--font-sans); }
+.p-approvalcard-compare { width: 760px; height: 379px; }
+.p-approval { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); }
+.p-approval-icon { display: inline-flex; flex: none; color: var(--color-status-success-fg); }
+.p-approval-text { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; }
+.p-approval-title { font: 500 14px/20px var(--font-sans); color: var(--color-text-primary); }
+.p-approval-meta { font: 400 12px/16px var(--font-sans); color: var(--color-text-tertiary); }
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index bcfc10f..c5ce4c1 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -13,8 +13,9 @@
--color-bg-inverse: #14120b;
--color-text-primary: #14120b;
- --color-text-secondary: #6b675e;
- --color-text-tertiary: #8f8b80;
+ /* AA: Figma's #6b675e / #8f8b80 secondary and tertiary text are 4.9:1 and 3.0:1 on sunken. Darkened to 6.0:1 and 4.6:1. */
+ --color-text-secondary: #5e5a52;
+ --color-text-tertiary: #706c64;
--color-text-inverse: #f2f1ec;
--color-text-on-accent: #ffffff;
--color-text-link: #2a52b0;
@@ -24,6 +25,8 @@
--color-border-strong: #c4c2b8;
--color-accent-default: #e8590c;
+ /* Fill for chips and counters that carry text. White on #e8590c is 3.6:1; on this it is 4.9:1. */
+ --color-accent-fill: #c24a08;
--color-accent-text: #b8420a;
--color-accent-subtle: #fdede3;
@@ -80,8 +83,8 @@
--color-bg-inverse: #f2f1ec;
--color-text-primary: #f2f1ec;
- --color-text-secondary: #8f8b80;
- --color-text-tertiary: #6b675e;
+ --color-text-secondary: #aaa59a;
+ --color-text-tertiary: #918d83;
--color-text-inverse: #14120b;
--color-text-on-accent: #14120b;
/* Figma keeps the light value (#2a52b0) in dark, which fails AA on #0e0e0c. Lightened to the dark "working" blue. */
@@ -92,6 +95,7 @@
--color-border-strong: #4a473f;
--color-accent-default: #ff7a33;
+ --color-accent-fill: #ff7a33;
--color-accent-text: #ff9a5e;
--color-accent-subtle: #3a1a08;
@@ -121,8 +125,8 @@
--color-bg-inverse: #f2f1ec;
--color-text-primary: #f2f1ec;
- --color-text-secondary: #8f8b80;
- --color-text-tertiary: #6b675e;
+ --color-text-secondary: #aaa59a;
+ --color-text-tertiary: #918d83;
--color-text-inverse: #14120b;
--color-text-on-accent: #14120b;
--color-text-link: #7c9cf0;
@@ -132,6 +136,7 @@
--color-border-strong: #4a473f;
--color-accent-default: #ff7a33;
+ --color-accent-fill: #ff7a33;
--color-accent-text: #ff9a5e;
--color-accent-subtle: #3a1a08;
diff --git a/web/src/ui/Fit.tsx b/web/src/ui/Fit.tsx
new file mode 100644
index 0000000..e144084
--- /dev/null
+++ b/web/src/ui/Fit.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+
+type Props = {
+ /** The width the content is designed at, in px. */
+ designWidth: number;
+ /** The height the content is designed at, in px. */
+ designHeight: number;
+ /** Scale used before the container is measured (server render). */
+ initialScale?: number;
+ /** Never scale above this. Default 1. */
+ maxScale?: number;
+ /** Never scale below this; the parent clips what does not fit. Default 0 (always fits). */
+ minScale?: number;
+ className?: string;
+ children: ReactNode;
+};
+
+/** Scales content designed at a fixed size to the width of its container, and reserves the scaled height. */
+export function Fit({ designWidth, designHeight, initialScale = 1, maxScale = 1, minScale = 0, className, children }: Props) {
+ const outer = useRef
+
+
+
+
+
+ );
+}
diff --git a/web/src/ui/Icon.tsx b/web/src/ui/Icon.tsx
new file mode 100644
index 0000000..715981a
--- /dev/null
+++ b/web/src/ui/Icon.tsx
@@ -0,0 +1,18 @@
+import type { CSSProperties } from 'react';
+
+export type IconName =
+ | 'activity' | 'arrow-right' | 'bell' | 'board' | 'check' | 'check-circle' | 'chevron-down' | 'chevron-right' | 'chevron-up' | 'clock' | 'close' | 'dots'
+ | 'eye' | 'globe' | 'home' | 'list' | 'loader' | 'lock' | 'menu' | 'mic' | 'monitor' | 'paperclip'
+ | 'pencil' | 'plus' | 'pointer' | 'refresh' | 'search' | 'shield-check' | 'sidebar' | 'sliders'
+ | 'shield' | 'smartphone' | 'sparkles' | 'split' | 'stop' | 'undo';
+
+type Props = { name: IconName; size?: number; className?: string };
+
+/**
+ * Draws a single-colour Figma icon (public/icons) with a CSS mask, so its colour is the
+ * text colour of the surrounding element and follows the theme. The SVG is the exact Figma export.
+ */
+export function Icon({ name, size = 16, className }: Props) {
+ const style = { '--icon-src': `url(/icons/${name}.svg)`, width: size, height: size } as CSSProperties;
+ return ;
+}
diff --git a/web/src/ui/Zoom.tsx b/web/src/ui/Zoom.tsx
new file mode 100644
index 0000000..c8b1eca
--- /dev/null
+++ b/web/src/ui/Zoom.tsx
@@ -0,0 +1,13 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Shows content designed at one width at a smaller (or larger) fixed ratio, laid out at the scaled size.
+ * Use for a fixed ratio; use Fit when the ratio follows the container width.
+ */
+export function Zoom({ ratio, children, className }: { ratio: number; children: ReactNode; className?: string }) {
+ return (
+ {children}
+
+ {children}
+
+ );
+}