/* global React */
// MCP access demo — animated apaleo user-management walkthrough.
// Scene ported from the Claude Design handoff (MCP Access Demo.dc.html);
// the embedded player below replaces the handoff's fullscreen Stage.
(function () {
const { useState, useEffect, useRef, useContext, createContext } = React;
const easeIO = (p) => (p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2);
// piecewise keyframe value
function kv(t, pts) {
if (t <= pts[0][0]) return pts[0][1];
const last = pts[pts.length - 1];
if (t >= last[0]) return last[1];
for (let i = 0; i < pts.length - 1; i++) {
const [t0, v0] = pts[i], [t1, v1] = pts[i + 1];
if (t >= t0 && t <= t1) {
const p = (t - t0) / (t1 - t0);
return v0 + (v1 - v0) * easeIO(p);
}
}
return last[1];
}
const NAVY = '#19213B';
const ORANGE = '#ED8C1F';
const TXT = '#3E4457';
const MUTED = '#70778C';
const BORDER = '#D8DAE5';
const CHIP_BG = '#EDEFF5';
const FONT = "'Roboto','Helvetica Neue',Arial,sans-serif";
const TARGET_ROLE = 'MCP Manage';
const TimeContext = createContext(0);
const useTime = () => useContext(TimeContext);
const Icon = ({ name, size = 20, color = 'inherit', fill = 1, style }) => (
{name}
);
const Tag = ({ label }) => (
{label}
);
// The freshly-assigned tag on the final list view: pops in, brief accent ring, settles.
const NewTag = ({ label, pop, ring, op }) => (
{label}
);
const Checkbox = ({ checked }) => (
{checked ? : null}
);
// ── Sidebar + chrome ──────────────────────────────────────────────────
function Sidebar() {
const item = (icon, label, opts = {}) => (
{opts.sub ? null : }
{label}
{opts.caret ? : null}
);
return (
{item('dashboard', 'Dashboard')}
{item('domain', 'Properties')}
{item('book', 'Reservations')}
{item('content_paste_search', 'Audit / Logs', { caret: true })}
{item('apps', 'Apps', { caret: true })}
{item('savings', 'Payment', { caret: true })}
{item('settings', 'Settings', { caret: true, open: true })}
{item('', 'General', { sub: true })}
{item('', 'Languages', { sub: true })}
{item('', 'Market segments', { sub: true })}
{item('', 'User management', { sub: true, active: true })}
);
}
function TopChrome({ crumbs }) {
return (
Ecosystem
Dev account
{crumbs.map((c, i) => (
/{c}
))}
Copilot
);
}
// ── Screen 1: user list ───────────────────────────────────────────────
function ListScreen({ hotelName, showNewRole, newTag, menu }) {
const rows = [
{ name: 'Anna Meier', email: 'anna.meier@example.com', props: ['All properties'], roles: ['Account Admin'], mfa: true },
{ name: 'Ben Koch', email: 'ben.koch@example.com', props: [hotelName], roles: ['MCP Manage', 'Housekeeper'], mfa: false },
{ name: 'Clara Weber', email: 'clara.weber@example.com', props: [hotelName, 'Hotel London', '+4'], roles: ['MCP Read', 'Front Desk'], mfa: false },
{ name: 'David Roth', email: 'david.roth@example.com', props: [hotelName], roles: ['Front Desk'], mfa: false },
{ name: 'Elena Fischer', email: 'elena.fischer@example.com', props: [hotelName], roles: ['Front Desk'], mfa: true },
];
const colStyle = { display: 'flex', alignItems: 'center' };
const widths = { cb: 50, name: 235, email: 300, props: 290, roles: 340, mfa: 90 };
const menuOn = menu && menu.op > 0.001;
return (
User management
Invite new user
{['Users', 'Invited', 'Deactivated', 'Roles', 'Access settings'].map((tab, i) => (
{tab}
))}
Search by user first name, last name and email
Assign roles and properties
{/* header */}
Name
Email
Properties
Roles
MFA
{rows.map((r, i) => (
{r.name}
{r.email}
{r.props.map((p) => )}
{r.roles.map((role) => )}
{i === 4 && showNewRole ? : null}
{r.mfa ? : null}
))}
{/* row action menu */}
{menuOn ? (
{[['edit', 'Edit'], ['domain', 'See properties and roles'], ['password', 'Reset password'], ['close', 'Deactivate']].map(([ic, label], i) => (
{label}
))}
) : null}
1 – 5 of 5
);
}
// ── Screen 2: user edit ───────────────────────────────────────────────
function Field({ x, y, w, h = 60, label, children, focused }) {
return (
);
}
const RoleChip = ({ label, pop = 1, op = 1 }) => (
{label}
);
function EditScreen({ hotelName, dd, searchText, caretOn, checked, chipPop, chipOp, hoverRead, hoverManage, savePressed }) {
const filtered = searchText.length > 0;
const items = filtered
? [{ label: 'MCP Read', checked: false, hover: hoverRead },
{ label: 'MCP Manage', checked, hover: hoverManage }]
: [{ label: 'Property Admin' }, { label: 'Front Desk', checked: true }, { label: 'Senior Front Desk' }, { label: 'Reservation Manager' }, { label: 'Accountant' }];
const ddOn = dd.op > 0.001;
return (
Elena Fischer (elena.fischer@example.com)
Elena
Fischer
{/* admin toggle */}
This user is Account Admin (full access to all properties and actions)
Selected properties apply only to property-level permissions. Account-level permissions always apply to all properties.
{/* Roles field */}
{chipOp > 0.001 ? : null}
{/* Property field */}
Add property/role definition
{/* Save / Cancel */}
Save
Cancel
{/* Roles dropdown panel */}
{ddOn ? (
{searchText || 'Search'}
{caretOn ? : null}
{searchText ?
: null}
{items.map((it) => (
{it.label}
))}
{filtered ? `${checked ? 2 : 1} selected` : '1 selected'}
) : null}
);
}
// ── Cursor: waypoints + curved, damped motion ─────────────────────────
const WAYPOINTS = [
[0, 900, 700], [0.8, 900, 700],
[2.3, 1552, 615], [2.9, 1552, 615], // kebab (click 2.45)
[3.95, 1330, 661], [4.5, 1330, 661], // Edit item (click 4.05)
[6.2, 742, 377], [6.9, 742, 377], // roles arrow (click 6.45)
[7.4, 400, 440], [8.7, 400, 440], // hover near search while typing
[9.15, 296, 491], // pass MCP Read
[9.55, 296, 543], [10.1, 296, 543], // MCP Manage checkbox (click 9.75)
[11.05, 738, 593], [11.6, 738, 593], // confirm (click 11.25)
[12.9, 325, 577], [13.5, 325, 577], // Save (click 13.05)
[15.2, 1180, 655], [17.6, 1180, 655], // rest near the new tag
[19.2, 900, 700],
];
const CLICKS = [2.45, 4.05, 6.45, 9.75, 11.25, 13.05];
function cursorPos(t) {
const w = WAYPOINTS;
if (t <= w[0][0]) return { x: w[0][1], y: w[0][2] };
for (let i = 0; i < w.length - 1; i++) {
const [t0, x0, y0] = w[i], [t1, x1, y1] = w[i + 1];
if (t >= t0 && t <= t1) {
const p = easeIO((t - t0) / (t1 - t0));
const dx = x1 - x0, dy = y1 - y0;
const dist = Math.hypot(dx, dy);
let x = x0 + dx * p, y = y0 + dy * p;
if (dist > 60) {
// gentle curved path, alternating side, strongest mid-flight
const bow = Math.min(22, dist * 0.05) * (i % 2 ? -1 : 1);
const s = Math.sin(Math.PI * p) * bow;
x += (-dy / dist) * s;
y += (dx / dist) * s;
}
return { x, y };
}
}
const last = w[w.length - 1];
return { x: last[1], y: last[2] };
}
function Cursor({ t }) {
const { x, y } = cursorPos(t);
let press = 1;
for (const ct of CLICKS) {
if (t >= ct - 0.06 && t <= ct + 0.1) press = 0.9;
else if (t > ct + 0.1 && t <= ct + 0.22) press = 0.9 + 0.1 * easeIO((t - ct - 0.1) / 0.12);
}
return (
);
}
// ── Main scene ────────────────────────────────────────────────────────
function SceneInner({ hotelName }) {
const t = useTime();
// camera
const cx = kv(t, [[0, 800], [1.5, 800], [2.8, 1040], [4.4, 1040], [5.2, 600], [11.4, 600], [12.0, 620], [13.1, 620], [13.7, 800], [14.8, 1020], [17.2, 1020], [18.9, 800]]);
const cy = kv(t, [[0, 450], [1.5, 450], [2.8, 590], [4.4, 590], [5.2, 450], [11.4, 450], [12.0, 480], [13.1, 480], [13.7, 490], [14.8, 575], [17.2, 575], [18.9, 450]]);
const s = kv(t, [[0, 1], [1.5, 1], [2.8, 1.45], [4.4, 1.45], [5.2, 1.5], [11.4, 1.5], [12.0, 1.4], [13.1, 1.4], [13.7, 1.1], [14.8, 1.4], [17.2, 1.4], [18.9, 1]]);
// screen opacities
const listOp = kv(t, [[4.4, 1], [5.1, 0]]);
const editOp = t < 4.4 ? 0 : kv(t, [[4.4, 0], [5.1, 1], [13.9, 1], [14.6, 0]]);
const list2Op = t < 13.9 ? 0 : kv(t, [[13.9, 0], [14.6, 1]]);
// row action menu
const menu = {
op: t < 2.5 || t > 4.35 ? 0 : kv(t, [[2.5, 0], [2.68, 1], [4.15, 1], [4.32, 0]]),
hoverEdit: t >= 3.7,
};
// roles dropdown
const dd = { op: t < 6.5 || t > 11.5 ? 0 : kv(t, [[6.5, 0], [6.72, 1], [11.25, 1], [11.44, 0]]) };
const nChars = t < 7.5 ? 0 : t < 7.85 ? 1 : t < 8.2 ? 2 : 3;
const searchText = 'mcp'.slice(0, nChars);
const caretOn = dd.op > 0.5 && t >= 7.0 && (t % 0.9) < 0.5;
const checked = t >= 9.8;
const hoverRead = t >= 8.85 && t < 9.25;
const hoverManage = t >= 9.35 && t < 10.1;
const chipPop = kv(t, [[9.8, 0.8], [10.1, 1]]);
const chipOp = t < 9.8 ? 0 : kv(t, [[9.8, 0], [10.02, 1]]);
const savePressed = t >= 13.05 && t < 13.35;
// toast
const toastOp = t < 13.35 ? 0 : kv(t, [[13.35, 0], [13.62, 1], [15.3, 1], [15.85, 0]]);
const toastY = kv(t, [[13.35, 22], [13.7, 0]]);
// final tag reveal
const newTag = {
op: t < 15.0 ? 0 : kv(t, [[15.0, 0], [15.22, 1]]),
pop: kv(t, [[15.0, 0.7], [15.24, 1.05], [15.45, 1]]),
ring: t < 15.0 ? 0 : kv(t, [[15.0, 0], [15.2, 1], [16.2, 1], [17.4, 0]]),
};
return (
{listOp > 0.001 ? (
) : null}
{editOp > 0.001 ? (
) : null}
{list2Op > 0.001 ? (
) : null}
{/* toast */}
{toastOp > 0.001 ? (
User updated
) : null}
);
}
// ── Embedded player ───────────────────────────────────────────────────
// Scales the 1600×900 scene to its container, loops a 20s timeline,
// autoplays while in view (paused for prefers-reduced-motion), and shows
// a slim play/pause + scrub bar.
const DURATION = 20;
const W = 1600, H = 900;
function McpAccessDemo({ hotelName = 'Hotel Berlin' }) {
const reduced = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
const [time, setTime] = useState(0);
const [playing, setPlaying] = useState(false);
const [scale, setScale] = useState(0);
const hostRef = useRef(null);
const lastTs = useRef(null);
const startedRef = useRef(false);
// fit scene to container width
useEffect(() => {
const el = hostRef.current;
if (!el) return;
const measure = () => setScale(el.clientWidth / W);
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, []);
// autoplay when scrolled into view (once), pause when scrolled away
useEffect(() => {
const el = hostRef.current;
if (!el || reduced) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting && !startedRef.current) { startedRef.current = true; setPlaying(true); }
else if (!e.isIntersecting) setPlaying(false);
}, { threshold: 0.3 });
io.observe(el);
return () => io.disconnect();
}, [reduced]);
// timeline loop
useEffect(() => {
if (!playing) { lastTs.current = null; return; }
let raf;
const step = (ts) => {
if (lastTs.current == null) lastTs.current = ts;
const dt = Math.min(0.1, (ts - lastTs.current) / 1000); // clamp rAF gaps (hidden tab)
lastTs.current = ts;
setTime((t) => (t + dt) % DURATION);
raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [playing]);
const seek = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
setTime(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)) * DURATION);
};
return (
{/* controls */}
);
}
window.McpAccessDemo = McpAccessDemo;
})();