// ────────────────────────────────────────────────────────────── // LIULIAN — Guides modal · the seven canonical user stories // Each story is named (codename), persona-led, // mode-tagged (A/B/C), and lists the F-principles it invokes. // ────────────────────────────────────────────────────────────── function GuidesModal({ open, onClose, nav, mode }) { const [active, setActive] = React.useState(null); const [tab, setTab] = React.useState("flows"); // flows · modes · principles React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; const story = STORIES.find(s => s.id === active); return (
e.stopPropagation()} style={{ width: 960, maxWidth: "94vw", maxHeight: "88vh", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 14, boxShadow: "0 28px 64px rgba(19,19,19,0.20)", display: "flex", flexDirection: "column", overflow: "hidden", }}> {/* header */}
Guides

Seven flows · three modes

{/* body */}
{tab === "flows" && } {tab === "modes" && } {tab === "principles" && }
{/* footer */}
); } function FlowsTab({ active, setActive, story, onClose, nav }) { return ( <>
{!story ? : }
); } function StoryDetail({ story, onClose, nav }) { return (
● {(story.code || "").padStart(2, "0")} guide · {story.duration} modes · {story.modes.join(" / ")} {story.principles && principles · {story.principles.join(" · ")}}

{story.title} {story.cn && {story.cn}}

{story.persona}

{story.setup}

    {story.steps.map((s, i) => (
  1. {(i + 1).toString().padStart(2, "0")} {s}
    2. ))}
{story.start.note}
); } function ModesTab({ mode }) { return (

Every flow is offered in three modes. The same goal, three interaction shapes. Mode C — Fused — is the default and the headline; modes A and B remain available for users who prefer pure controls or pure conversation.

{MODES.map(m => { const isActive = m.id === (mode || "C"); return (
{isActive && ● active}
{m.id}

{m.label}

{m.sub}

{m.detail}

{m.id === "C" && (
Six principles
{FUSED_PRINCIPLES.map(p => {p.id})}
)}
); })}
); } function PrinciplesTab() { return (

Six principles distinguish the Fused mode from "chatbot in a sidebar plus controls in the middle". Every fused interaction in LIULIAN satisfies at least three of these.

{FUSED_PRINCIPLES.map(p => (
{p.id}

{p.name}

{p.line}

used in stories · {STORIES.filter(s => (s.principles || []).includes(p.id)).map(s => (s.code || "?").padStart(2, "0")).join(" · ")}
))}
); } function EmptyGuide() { return (

Pick a flow on the left.

Each one is a canonical path through LIULIAN, persona-led, with concrete steps and the Fused-mode principles it invokes. Click Start to be dropped at the first step.

Or browse the second + third tabs above
); } Object.assign(window, { GuidesModal });