// components.jsx — Ryoko · Shared primitives + link enrichers // // ── window.RkLinks ─────────────────────────────────────────────── // enrichSubject(item) and enrichActivity(item) take a card-shaped // object ({ id, title, sub, image, eyebrow, tag, href }) and return // an enriched href that carries the card's content as query params. // This lets the destination page (Place.html / Activity.html) render // *that subject* even when the id doesn't match a rich data record. // // All cards in the app must use these instead of `item.href` directly. // // ── window.Rk* components ──────────────────────────────────────── // // Six React components every feature page should reach for first. // Goal: kill the 24× reinvented chips / cards / section heads / meta // rows. These map onto patterns already in styles.css + semantics.css; // they are not a new design system, they are the contract. // // Loading order (in HTML ): // styles.css → semantics.css → components.css → feature.css // Loading order (in HTML ): // ... → components.jsx → states.jsx → feature app.jsx // // Every component exposes itself onto window so feature pages can use // it without imports under Babel-standalone. // // ── RkSectionHead ────────────────────────────────────────────────── // The vault, earning its keep.} // sub="A document only earns its place in the vault if it's working on a brief." // /> // // ── RkChip ───────────────────────────────────────────────────────── // Action required // Confirmed // Off-book // Filter // // tone: blocking | approved | warning | pending | discretion | accent | neutral // size: sm | md (default md) // as: span | button (default span) // // ── RkMetaRow ────────────────────────────────────────────────────── // // // layout: stacked (default) | inline | dense // // ── RkButton ─────────────────────────────────────────────────────── // Brief a new trip // See all // Decline // Held off-book // // variant: primary | ghost | destructive | discreet | quiet // size: sm | md (default md) // // ── RkCard ───────────────────────────────────────────────────────── // ... contents ... // // tone: none (default) | sensitive | urgent | approved | discretion // hoverable: true → adds the lift+shadow polish on hover // as: article (default) | a | div // // ── RkModal ──────────────────────────────────────────────────────── // setOpen(false)} title="Confirm"> // ... contents ... // // // onClose fires on veil click and Escape. (function () { const { useEffect } = React; // ── RkLinks ────────────────────────────────────────────────────── // Enriches card hrefs with the card's own content so destination // pages can show real content instead of a generic placeholder. // Build the enriched href for a card. // · If item.placeId is set, that is the canonical id (resolves to a // real venue file). Card-side ids like "fy-saved-etxebarri" are // for tracking only, not routing. // · For Place.html targets without a real placeId, return null — // callers MUST drop the link wrapper. We never bluff a venue. // · For Activity.html / Location.html / Trips.html targets, the // subjects.jsx store handles the lookup itself, so the card id is // fine as the routing id. function enrichSubject(item) { if (!item || !item.href) return null; const isPlaceLink = /\/place\/Place\.html\b/.test(item.href); if (isPlaceLink) { // The only way a Place link is valid is with a known placeId. if (!item.placeId) return null; const sep = item.href.includes("?") ? "&" : "?"; return `${item.href}${sep}id=${encodeURIComponent(item.placeId)}`; } // For non-Place targets · pass the card's own id + content so the // destination page can render it. const sep = item.href.includes("?") ? "&" : "?"; const hasIdInHref = /[?&]id=/.test(item.href); const extras = new URLSearchParams(); if (item.id && !hasIdInHref) extras.set("id", item.id); if (item.title) extras.set("name", item.title); if (item.sub) extras.set("sub", item.sub); if (item.image) extras.set("image", item.image); if (item.eyebrow) extras.set("eyebrow", item.eyebrow); if (item.tag) extras.set("ctx", item.tag); const q = extras.toString(); if (!q) return item.href; return `${item.href}${sep}${q}`; } function enrichActivity(item) { return enrichSubject(item); } if (typeof window !== "undefined") { window.RkLinks = { enrichSubject, enrichActivity }; } // ── RkSectionHead ──────────────────────────────────────────────── function RkSectionHead({ eyebrow, num, title, sub, align = "left", children }) { return (

{eyebrow && (

{num && {num}} {eyebrow}

)} {title &&

{title}

} {sub &&

{sub}

} {children}

); } // ── RkChip ─────────────────────────────────────────────────────── function RkChip({ tone = "neutral", size = "md", as = "span", children, onClick, title, className = "", ...rest }) { const Tag = as; const cls = `rk-chip rk-chip-${tone} rk-chip-${size} ${className}`.trim(); if (as === "button") { return ( ); } return {children}; } // ── RkMetaRow ──────────────────────────────────────────────────── // pairs: [{ k, v, tone, mono }] // tone on a pair colours the value (blocking, warning, approved, accent). function RkMetaRow({ pairs = [], layout = "stacked", className = "" }) { return (

{p.k}: {p.v}

); } // ── RkButton ───────────────────────────────────────────────────── function RkButton({ variant = "ghost", size = "md", href, onClick, children, disabled, arrow = false, title, className = "", ...rest }) { const cls = `rk-btn rk-btn-${variant} rk-btn-${size} ${arrow ? "has-arrow" : ""} ${className}`.trim(); const inner = ( <> {children} {arrow && →} ); if (href && !disabled) { return ( {inner} ); } return ( ); } // ── RkCard ─────────────────────────────────────────────────────── function RkCard({ tone = "none", hoverable = false, as = "article", href, onClick, children, className = "", label, ...rest }) { const Tag = href ? "a" : as; const cls = `rk-c rk-c-tone-${tone} ${hoverable ? "rk-c-hoverable" : ""} ${className}`.trim(); const tagProps = href ? { href, onClick } : { onClick }; return ( {tone !== "none" && ); } // ── RkModal ────────────────────────────────────────────────────── function RkModal({ open, onClose, title, eyebrow, children, footer, size = "md" }) { useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [open, onClose]); if (!open) return null; return (

e.target === e.currentTarget && onClose()} data-screen-label="Modal">

); } // ── RkArchitectOnly ───────────────────────────────────────────── // The moat: opportunities at a venue that aren't available to the // general public — held inventory, off-menu wines, named after-hours // access, first-refusal seats, signed gestures. Quietly exclusive, // always specific (named persons, exact times, real lead times). // // // // kind drives the small icon + tone: // off-menu | after-hours | private | introduction | held | // first-refusal | no-list | signed function RkArchitectOnly({ opportunities = [], eyebrow = "Doors only the architect can open", title }) { if (!opportunities || opportunities.length === 0) return null; const labelFor = (k) => ({ "off-menu": "Off-menu", "after-hours": "After hours", "private": "Private", "introduction": "Introduction", "held": "Held inventory", "first-refusal": "First refusal", "no-list": "Off the list", "signed": "House gesture", })[k] || "Held by the desk"; return (

{eyebrow}

{title || <>The {opportunities.length} doors only the desk can open.}

None of these are bookable directly. Each is held against your file by name, with a specific person on point and a specific lead-time. The architect calls; the venue answers.

{labelFor(o.kind)}

{o.title}
{o.detail &&
{o.detail}
}
{o.via && via {o.via}} {o.lead && lead {o.lead}} {o.cost && cost {o.cost}}

); } // ── RkVenueExtras ──────────────────────────────────────────────── // Four small panels of venue intelligence that sit alongside the // architectOnly band — what the architect deliberately doesn't // recommend (restraint), the architect's single opinionated pick, // what travels home (memorabilia), and what the venue itself gives // back (philanthropy). // // // // All four props optional · component renders only the panels with content. function RkVenueExtras({ restraint, architectPick, memorabilia, philanthropy }) { if (!restraint && !architectPick && !memorabilia && !philanthropy) return null; return (

{architectPick && (

The architect's pick ✦

{architectPick}

)} {restraint && (

What we don't recommend, and why

{restraint}

)} {memorabilia && (

What travels back with you

{memorabilia}

)} {philanthropy && (

What the venue gives

{philanthropy}

)}

); } if (typeof window !== "undefined") { window.RkVenueExtras = RkVenueExtras; window.RkArchitectOnly = RkArchitectOnly; window.RkSectionHead = RkSectionHead; window.RkChip = RkChip; window.RkMetaRow = RkMetaRow; window.RkButton = RkButton; window.RkCard = RkCard; window.RkModal = RkModal; window.RkProvenance = RkProvenance; window.RkSurfacesIn = RkSurfacesIn; window.RkImage = RkImage; window.rkImg = rkImg; } // ── rkImg / RkImage ───────────────────────────────────────────── // Image provenance pattern. An editorial product credits its // photography. Every hero, card, and inline place image should be // an object — { src, alt, credit, date, caption } — not a bare URL. // // rkImg(url, opts) returns that object form, so legacy data callsites // can incrementally upgrade by wrapping their bare URL strings: // // image: rkImg("https://...", { // credit: "Takashi Nakamura", // date: "October 2025", // caption:"The garden corridor at Tawaraya, an October morning.", // alt: "Cedar corridor lit from a paper screen", // }) // // renders the picture // with a quiet credit line. Backwards compatible: if `img` is a string // it still works — but no credit appears. function rkImg(src, opts = {}) { if (!src) return null; return { src, alt: opts.alt || "", credit: opts.credit || null, date: opts.date || null, caption: opts.caption || null, }; } function RkImage({ img, ratio = "auto", className = "", showCredit = true, sizing = "cover" }) { if (!img) return null; const obj = typeof img === "string" ? { src: img, alt: "" } : img; return (

{obj.alt — {obj.caption && {obj.caption}} {obj.credit && *Photograph* · {obj.credit}} {obj.date && {obj.date}}

); } // ── RkProvenance ───────────────────────────────────────────────── // Shows where a member-side artefact came from: architect's draft, // approval, or both. Use on every surface that displays an output // of the atelier's work — approve rows, today events, spend lines, // vault docs. // // // NOTE: the reference-code prop is `refCode`, NOT `ref` — `ref` is reserved // by React and a string value crashes function components at render. function RkProvenance({ eyebrow = "How this got here", refCode, by, links = [], children }) { return (

); } // ── RkSurfacesIn ───────────────────────────────────────────────── // The architect-side mirror of RkProvenance. Shows where this draft // currently appears on the member side: open approvals + day-of // executions + held vault items. // // function RkSurfacesIn({ surfaces = [], eyebrow = "Where this surfaces · member-side, right now" }) { if (!surfaces || surfaces.length === 0) return null; const labelFor = (k) => k === "approval" ? "Approval" : k === "today" ? "On the day" : k === "vault" ? "Vault" : k === "spend" ? "Spend" : k; return (

↗ {eyebrow} {surfaces.length} surfaces

{labelFor(s.kind)} {s.ref} {s.label} {s.when} Open →

); } })();