/* ============================================================
STORYBOOK v7 — part 1
- Fig 1: v1 monitor composition restored, but extension lives
in the upper-right of the browser chrome (manager strip
visible), and a small extension card floats off from there.
No leader lines from annotations.
- Fig 2: only ONE Auto Print button on the lower (detail)
surface, top-right of the page.
Depends on scene-utils.jsx and APMark from v3-1 (we re-export).
============================================================ */
/* ------------------------------------------------------------
A6_TemplatesAndRouting — NEW SETUP SLIDE
Narrowed to ONE doc type (invoices) so the story is crystal:
1. BUILD CUSTOM HTML INVOICE TEMPLATES
Three different invoice templates, visibly distinct
(Default / Wholesale / International). The active one
peeks its raw HTML/Liquid markup so the "this is code
you author" nature is unmistakable.
2. ROUTING RULES
Every rule emits an invoice — different rules pick
different invoice templates based on order context.
------------------------------------------------------------ */
/* SlideLabel — left-aligned (slides 1 & 2) */
const SlideLabel = ({ num, title, body }) => (
{num}
{title}
{body}
);
/* SlideLabelRight — right-aligned (slide 3) */
const SlideLabelRight = ({ num, title, body }) => (
{num}
{title}
{body}
);
const A6_TemplatesAndRouting = ({ motion = true, annotated = true, showLabels = true, staticPose = false }) => {
const W = 1000, H = 600;
const animate = motion && !staticPose;
return (
)}
{/* ============================================================
STEP 1.1 — INVOICE TEMPLATES (left half)
============================================================ */}
{/* file-folder tab */}
{``}
INVOICE TEMPLATES
+ New
{/* THREE invoice template cards — visibly different layouts */}
{(() => {
const templates = [
{
key: "default",
title: "Default invoice",
meta: "letter · doc · v3",
accent: PALETTE.ink,
hl: false,
draw: (
<>
{/* tidy minimal: small wordmark + line items */}
))}
),
},
{
key: "wholesale",
title: "Wholesale invoice",
meta: "letter · doc · v7",
accent: PALETTE.honey,
hl: true, // active
draw: (
<>
{/* big honey header bar + LOGO + columns */}
WHOLESALE INVOICE
{/* PO box */}
PO #
88204
{/* table header */}
{[48, 54, 60, 66].map((y, j) => (
))}
NET 30
),
},
{
key: "intl",
title: "International invoice",
meta: "letter · doc · v2",
accent: "#5C7B89",
hl: false,
draw: (
<>
{/* customs/commercial: stamp + multi-currency cell */}
COMMERCIAL INVOICE
HS · COO · CUSTOMS
{/* circular stamp */}
EXPORT
))}
USD · €
{/* card */}
{t.draw}
{/* metadata + chip (right) */}
{/* type chip — indicates HTML */}
{``}
HTML · LIQUID
{t.title}
{t.meta}
{/* peek of underlying HTML/Liquid (only on the active/highlighted card) — static display */}
{t.hl ? (
wholesale-invoice.html.liquid
{``}
{` `}
{` {{ product.title }} `}
{/* blinking caret — only subtle indicator of liveness */}
{animate && (
)}
) : (
{t.key}-invoice.html.liquid
)}
{/* edit affordance */}
{/* active glow — pulses in animation; rendered at peak in static pose */}
{((animate || staticPose) && t.hl) && (
{animate &&
)}
);
});
})()}
{/* connector arrow between steps */}
{/* ============================================================
STEP 1.2 — ROUTING RULES (right half)
One rule per template — each rule's WHEN condition
picks the matching template.
============================================================ */}
WHEN TO PRINT WHICH INVOICE
{animate &&
{/* legend */}
WHEN ORDER CONTEXT MATCHES…
…RENDER THE MATCHING INVOICE TEMPLATE
{/* THREE invoice rule rows — one per template */}
{[
{ when: "customer.tag = wholesale", tpl: "Wholesale invoice", active: true, hue: PALETTE.honey },
{ when: "shipping.country ≠ US", tpl: "International invoice", active: false, hue: "#5C7B89" },
{ when: "else (default)", tpl: "Default invoice", active: false, hue: PALETTE.paper },
].map((r, i) => (
RULE 0{i+1}
{/* WHEN */}
WHEN
{r.when}
{/* arrow */}
→
{/* RENDER */}
RENDER
{r.tpl}
{/* mini doc icon on the right */}
{[12,18,24,30,36,42,48].map((y, j) => (
))}
{((animate || staticPose) && r.active) && (
{animate &&
)}
))}
);
};
/* ------------------------------------------------------------
APMarkV5 — same favicon as v3 (re-included to be standalone).
------------------------------------------------------------ */
const APMarkV5 = ({ x = 0, y = 0, size = 16, bg = PALETTE.paper, rx = "14" }) => {
const s = size / 64;
return (
);
};
/* ------------------------------------------------------------
A6_LabelIntercept — v1 frame, with extension manager strip
visible on the browser chrome and a small extension card
floating off from there in the upper-right.
------------------------------------------------------------ */
const A6_LabelIntercept = ({ motion = true, annotated = true, showLabels = true, staticPose = false }) => {
const W = 1000, H = 560;
const animate = motion && !staticPose;
return (
{showLabels && (
)}
{/* desk */}
{/* monitor group — translate(90, 80) keeps it centered with extension card */}
{/* screen contents */}
{/* browser chrome */}
admin.shopify.com/orders/#1042
{/* extension manager strip — top right of browser chrome */}
{/* AP extension chip — highlighted */}
{animate &&
)}
⋮
{/* sidebar */}
{[78, 92, 104, 116, 128].map((y, i) => (
#1042
PAID
{/* line items */}
{[142, 194].map((y, i) => (
))}
{/* customer panel */}
{[164, 172, 180, 188].map((y, i) => (
))}
{/* THE BUTTON */}
Print label
{(animate || staticPose) && (
{animate &&
)}
{/* cursor */}
{/* flying label with face — static pose freezes at midpoint of arc */}
{animate && (
{animate && (
USPS PRIORITY
{[0,2,5,7,10,12,15,17,19,22,25,28,30,33,36,38,41,44,47,50].map((x, i) => (
))}
9405 5036 9930 0042 1815
2 LB · 4×6
{/* SMALL EXTENSION CARD — floating off from extension manager strip
Monitor at translate(90, 80). Chip absolute = (90+458+34+5.5, 80+42+8) = (587.5, 130).
Card at translate(790, 140). Leader path stays relative — both groups shifted same +30. */}
{animate &&
)}
{/* status pill */}
{animate &&
LISTENING
{/* nameplate UNDER */}
{/* arc — subtle dashed handoff from screen → extension card */}
);
};
/* ------------------------------------------------------------
A6_DocumentIntercept — top: bulk list w/ Auto Print menu in
header. Bottom: order detail w/ a SINGLE Auto Print button
in the upper-right of the page.
------------------------------------------------------------ */
const A6_DocumentIntercept = ({ motion = true, annotated = true, showLabels = true, staticPose = false }) => {
const W = 1000, H = 600;
const animate = motion && !staticPose;
const AP = PALETTE.honey;
const APln = PALETTE.honeyLn;
return (
Select orders, hit Autoprint — every selected order's docs are queued at once.
admin.shopify.com/orders
Orders
3 selected
{/* Auto Print button on the bulk row */}
Autoprint ▾
{(animate || staticPose) && (
{animate &&
)}
{[0, 1, 2, 3].map((i) => {
const y = 178 + i * 28;
const checked = i < 3;
return (
#104{2+i}
{["Ada Lovelace", "Bea Tran", "Carlos Reyes", "Dani Park"][i]}
PAID
${[42,128,76,210][i]}.00
);
})}
{/* BOTTOM: detail — ONE Auto Print button, upper right.
Translated up 6px to balance with block-1 shift; final layout has
~27px of whitespace at top, between the two blocks, and at bottom. */}
Open an order, hit Autoprint — just that order's docs go through.
admin.shopify.com/orders/#1042
{/* page header row */}
#1042
PAID
{/* ONE Auto Print button — upper right.
Sized to match the bulk Auto Print button exactly (108×20)
AND right-aligned with it: both have their right edge at x=520. */}
Autoprint ▾
{(animate || staticPose) && (
{animate &&
)}
{/* page body */}
{/* line items column */}
{/* customer panel right */}
{[0, 1, 2, 3, 4].map((i) => (
))}
{/* AUTOPRINTER — right side. Lowered to translate(620, 244) so the
2.3 label + wrapped body sits comfortably above it AND the whole
(text + object + cog cluster) group reads as roughly centered
vertically on the slide.
Right-half body now hosts a small horizontal routing decision tree
(source dot → 3 destination circles) so the visual matches the
"QUEUES + ROUTES" label.
3-cog cluster (big + medium + small, interlocking, varying spin
speeds + directions) bleeds past the object's bottom-right corner
for that "machinery in motion" feel. */}
AUTOPRINTER
SHOPIFY APP
{/* Queue panel — left side of body. */}
Queued
{[
["#1042 · Packing Slip", 0],
["#1042 · Invoice", 1],
["#1043 · Packing Slip", 2],
["#1044 · Packing Slip", 3],
].map(([label, i]) => (
{animate &&
{label}
))}
{/* Routing decision tree — right of queue. 2-layer-deep asymmetric
tree: layer-1 root → 2 layer-2 nodes → 2 layer-3 nodes (both
branching off the BOTTOM layer-2 node only, not the top one).
Layers spaced 47px apart so the tree spans more of the cavity:
~10px gap from queue's right edge AND ~10px gap from the cog
cluster's left edge. Tree visibly fills the available space. */}
{/* Layer 1 — root */}
{/* Layer 1 → Layer 2 connections */}
{/* 3-cog cluster — floating over the lower-right corner.
Formation: Big (upper-left), Small (middle-right), Medium (lower-left).
Big touches Small; Medium touches Small; Big and Medium do NOT
touch (small sits between them, meshing with both).
Gear physics: Big CW, Small CCW (driven by Big), Medium CW
(driven by Small). Speeds inversely proportional to radius. */}
{/* Big cog — visual r=14, clockwise 5s */}
{animate &&
))}
{/* Small cog — visual r=7, counter-clockwise 2.5s. Sits between
Big and Medium, meshing with both. */}
{animate &&
))}
{/* Medium cog — visual r=10, clockwise 3.5s */}
{animate &&
))}
{/* 3.3 annotation rendered BEFORE the flying docs so the docs paint
on top as they cross the text block area. */}
{annotated && (
Print jobs are routed to Autoprinter for template
selection and print routing.
)}
{/* PAYLOADS IN FLIGHT */}
{/* slip stack from list — 3 docs (3 were selected).
Spawn at right edge of bulk Auto Print button. Click peaks at
t=0.10 → fade in 0.13-0.16 → straight steady-pace flight from
start to the middle of the autoprinter object (780, 319) over
0.20-0.62 → land + fade out. */}
{animate && (
{animate && (
PACKING SLIP · #1042
{[24, 28, 32, 36, 40, 46, 50, 54].map((y, i) => (
{/* "×3" badge to make the multiplicity unmistakable */}
×3
{/* slip from detail (Auto Print upper right).
Spawn at right edge of detail Auto Print button. Click peaks at
t=0.40 (begin=1.5s on a 5s cycle) → fade in 0.42-0.46 → straight
steady-pace flight from start to the middle of the autoprinter
object (780, 319) over 0.50-0.85 → land + fade out. */}
{animate && (
{animate && (
INVOICE · #1042
{[24, 28, 32, 36, 40, 46, 50, 54].map((y, i) => (
{/* Static-pose arrows: documents → AUTOPRINTER, fan-in style.
Top arrow points at AUTOPRINTER's upper-left corner area; bottom
arrow points at lower-left corner area. Both angle inward toward
the box. (Replaces an earlier "both aim at the visual center"
version that looked unbalanced because the top doc is far above
the box while the bottom doc sits right at its bottom edge.)
Tips terminate 5px short of the box's left edge (x=620).
Dashed honey line + open chevron tip — matches the visual
vocabulary of the existing connector arrows + routing-tree
dashed connectors. Only rendered in static-pose mode (the
animated version has the flying docs themselves performing
the "direction-of-flow" job). */}
{staticPose && (
{/* top: bulk slip stack at (550, 133) → tip at AUTOPRINTER top edge near left corner (625, 240) */}
)}
);
};
Object.assign(window, {
A7_TemplatesAndRouting: A6_TemplatesAndRouting,
A7_LabelIntercept: A6_LabelIntercept,
A7_DocumentIntercept: A6_DocumentIntercept,
APMarkV5,
});