@volter/twin-tiktok 0.1.0

package/dist/client/tiktok-mirror.css

@@ -0,0 +1,137 @@
+/* TikTok mirror — tiktok.com's own look, copied on purpose. A vendor-mirror stylesheet: exempt from the
+   Volter brand (the .githooks brand check reads only the Volter-branded sheets). */
+:root {
+  --bg: #fff;
+  --text: #161823;
+  --muted: rgba(22, 24, 35, 0.5);
+  --line: rgba(22, 24, 35, 0.12);
+  --fill: rgba(22, 24, 35, 0.06);
+  --fill-hover: rgba(22, 24, 35, 0.12);
+  --red: #fe2c55;
+  --red-hover: #ef2950;
+  --cyan: #25f4ee;
+  --font: "TikTokFont", "ProximaNova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.35; }
+a { color: inherit; text-decoration: none; }
+button { font-family: inherit; color: inherit; }
+code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
+.muted { color: var(--muted); }
+.loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+
+/* ── the logo ────────────────────────────────────────────────────────────── */
+.logo { display: inline-flex; align-items: center; gap: 4px; color: #000; }
+.logo-word { font-size: 27px; font-weight: 800; letter-spacing: -0.8px; }
+
+/* ── layout: the left nav and the main column ────────────────────────────── */
+.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
+.sidenav { position: sticky; top: 0; height: 100vh; padding: 16px 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
+.nav-logo { padding: 2px 8px 14px; }
+.nav-search { margin: 0 8px 10px 0; height: 40px; border-radius: 92px; background: var(--fill); color: var(--muted); display: flex; align-items: center; padding: 0 16px; font-size: 15px; }
+.nav-item { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px; border: 0; background: transparent; border-radius: 6px; font-size: 18px; font-weight: 700; cursor: pointer; text-align: left; }
+.nav-item:hover { background: var(--fill); }
+.nav-item.active { color: var(--red); }
+.nav-item .avatar { font-size: 14px !important; }
+.nav-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
+.nav-signout { border: 0; background: transparent; padding: 0; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
+.nav-signout:hover { color: var(--text); }
+.main { min-width: 0; padding: 32px 24px 48px 40px; }
+
+/* ── avatars, badges ─────────────────────────────────────────────────────── */
+.avatar { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; user-select: none; }
+.verified { position: relative; display: inline-flex; color: #20d5ec; flex: none; }
+.verified-check { position: absolute; inset: 0; color: #fff; }
+
+/* ── the profile header ──────────────────────────────────────────────────── */
+.profile { max-width: 1320px; }
+.profile-header { display: flex; gap: 28px; align-items: flex-start; }
+.profile-info { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; min-width: 0; }
+.profile-names { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.profile-username { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; }
+.profile-nickname { margin: 0; font-size: 18px; font-weight: 600; }
+.profile-buttons { display: flex; gap: 8px; }
+.btn { height: 40px; min-width: 104px; padding: 0 20px; border-radius: 8px; border: 0; font-size: 16px; font-weight: 600; cursor: pointer; }
+.btn-red { background: var(--red); color: #fff; }
+.btn-red:hover { background: var(--red-hover); }
+.btn-gray { background: var(--fill); }
+.btn-gray:hover { background: var(--fill-hover); }
+.profile-stats { display: flex; gap: 20px; font-size: 16px; }
+.stat strong { font-weight: 700; margin-right: 6px; }
+.stat-label { color: var(--muted); }
+.profile-bio { margin: 0; white-space: pre-wrap; max-width: 560px; }
+.profile-missing { padding: 120px 0; text-align: center; }
+
+/* ── tabs, sort ──────────────────────────────────────────────────────────── */
+.profile-tabs { margin-top: 28px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
+.ptab { display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 140px; justify-content: center; border: 0; background: transparent; font-size: 18px; font-weight: 600; color: var(--muted); cursor: pointer; position: relative; }
+.ptab:hover { color: var(--text); }
+.ptab.active { color: var(--text); }
+.ptab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); }
+.sort { margin-left: auto; margin-bottom: 6px; display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--fill); font-size: 14px; font-weight: 600; }
+.sort span { padding: 6px 12px; border-radius: 4px; color: var(--muted); }
+.sort .sort-on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
+
+/* ── the grid: 9:16 tiles ────────────────────────────────────────────────── */
+.grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 24px 16px; }
+.tile { position: relative; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; background: #000; cursor: pointer; }
+.tile-video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); pointer-events: none; }
+.tile-views { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 16px; font-weight: 700; }
+.tile-views svg { fill: none; stroke: #fff; }
+.tile-fallback { position: absolute; inset: 0; padding: 16px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 600; background: linear-gradient(160deg, #2b2b35, #111); }
+.caption .tag { font-weight: 700; }
+.empty { padding: 96px 0; text-align: center; }
+.empty h3 { margin: 0 0 8px; font-size: 24px; }
+.show-more { margin: 24px auto 0; display: block; height: 40px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--fill); font-weight: 600; cursor: pointer; }
+
+/* ── the vertical player ─────────────────────────────────────────────────── */
+.player-page { position: fixed; inset: 0; background: #000; color: #fff; overflow: hidden; }
+.player-backdrop { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) brightness(0.3) saturate(0.8); transform: scale(1.1); }
+.player-close { position: absolute; z-index: 3; top: 20px; left: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(84, 84, 84, 0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.player-close:hover { background: rgba(120, 120, 120, 0.6); }
+.player-logo { position: absolute; z-index: 3; top: 22px; left: 76px; }
+.player-logo .logo { color: #fff; }
+.player-logo .logo-word { font-size: 24px; }
+.player-stage { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 12px 0; }
+.player-frame { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; }
+.player-video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.player-sound-toggle { position: absolute; z-index: 2; top: 14px; left: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(84, 84, 84, 0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.player-paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); pointer-events: none; }
+.player-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); pointer-events: none; }
+.player-caption { position: absolute; left: 16px; right: 16px; bottom: 44px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); pointer-events: none; }
+.player-author { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 700; }
+.player-text { max-height: 60px; overflow: hidden; }
+.player-sound { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
+.player-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; }
+.player-toggle { width: 24px; height: 24px; border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer; }
+.player-track { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.34); overflow: hidden; }
+.player-progress { height: 100%; background: #fff; }
+.player-time { font-size: 12px; font-variant-numeric: tabular-nums; }
+.player-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
+.rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 40px; }
+.rail-avatar { position: relative; margin-bottom: 10px; }
+.rail-avatar .avatar { border: 1px solid #fff; }
+.rail-plus { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 18px; font-weight: 700; line-height: 21px; text-align: center; }
+.rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; min-height: 70px; }
+.rail-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(84, 84, 84, 0.5); display: flex; align-items: center; justify-content: center; color: #fff; }
+.player-nav { position: absolute; z-index: 3; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }
+.player-nav button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(84, 84, 84, 0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
+.player-nav button:disabled { opacity: 0.35; cursor: default; }
+
+/* ── the login form ──────────────────────────────────────────────────────── */
+.login-backdrop { min-height: 100vh; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
+.login { width: 483px; max-width: 94vw; background: #fff; border-radius: 8px; padding: 48px 48px 0; display: flex; flex-direction: column; align-items: stretch; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25); }
+.login-logo { display: flex; justify-content: center; margin-bottom: 8px; }
+.login-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }
+.login-form h1 { margin: 8px 0 12px; text-align: center; font-size: 32px; font-weight: 700; }
+.login-sub { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+.login-input { height: 44px; padding: 0 12px; border-radius: 4px; border: 1px solid rgba(22, 24, 35, 0.12); background: rgba(22, 24, 35, 0.06); font-size: 16px; font-family: inherit; outline: none; }
+.login-input:focus { border-color: rgba(22, 24, 35, 0.2); }
+.login-error { color: var(--red); font-size: 13px; }
+.btn-login { height: 46px; border: 0; border-radius: 4px; background: var(--red); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 12px; }
+.btn-login:disabled { background: rgba(22, 24, 35, 0.06); color: rgba(22, 24, 35, 0.34); cursor: default; }
+.login-note { font-size: 12px; line-height: 16px; }
+.link { border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
+.login-foot { margin: 0 -48px; padding: 18px; border-top: 1px solid var(--line); text-align: center; font-size: 15px; }
+.link-red { color: var(--red); font-weight: 600; }

package/dist/client/tiktok-mirror.d.ts

@@ -0,0 +1,42 @@
+import { type TtRow } from '../src/tiktok-mirror-ui.js';
+export declare function Logo({ size, word }: {
+    size?: number;
+    word?: boolean;
+}): import("react").JSX.Element;
+export declare function Avatar({ user, size }: {
+    user: TtRow | undefined;
+    size: number;
+}): import("react").JSX.Element;
+export declare function Caption({ text }: {
+    text: unknown;
+}): import("react").JSX.Element;
+/** The profile header: avatar, @username (h1) with the verified tick, the nickname, the buttons a
+ *  creator sees on their own page, the three counts (only those the twin returned) and the bio. */
+export declare function ProfileHeader({ user, own }: {
+    user: TtRow;
+    own: boolean;
+}): import("react").JSX.Element;
+/** One grid tile: the post's own first frame (the twin serves no cover image), 9:16, with the play
+ *  count at the bottom left. A post whose bytes the twin does not hold shows its caption instead. */
+export declare function VideoTile({ video, src, onOpen }: {
+    video: TtRow;
+    src: string;
+    onOpen: () => void;
+}): import("react").JSX.Element;
+export declare function VideoGrid({ videos, sourceOf, onOpen }: {
+    videos: TtRow[];
+    sourceOf: (id: string) => string;
+    onOpen: (id: string) => void;
+}): import("react").JSX.Element;
+/** The player's overlay: @handle, the caption with its tags, and the sound line TikTok prints for a
+ *  video's own audio ("original sound - <nickname>"). */
+export declare function PlayerCaption({ user, video }: {
+    user: TtRow;
+    video: TtRow;
+}): import("react").JSX.Element;
+/** The right-hand action rail: the creator's avatar, then like / comment / save / share, each with the
+ *  count the Video Object carries — and no number where the Display API returns none (saves). */
+export declare function ActionRail({ user, video }: {
+    user: TtRow;
+    video: TtRow;
+}): import("react").JSX.Element;

package/dist/client/tiktok-mirror.js

@@ -0,0 +1,315 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// TikTok mirror — React/TSX client. tiktok.com's own view of the twin's state: log in as the creator,
+// read their profile over the Videos grid, and open a post in the vertical player. Every read is the
+// twin's OWN Display API on the same origin (GET /v2/user/info/, POST /v2/video/list/); the player
+// plays the posted bytes from the twin's media route. Nothing is kept but the signed-in username and
+// token, in the tab's sessionStorage.
+import { createRoot } from 'react-dom/client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { avatarHue, avatarInitial, BASIC_FIELDS, captionOf, captionSegments, clock, compactCount, mediaSource, PROFILE_FIELDS, profileStats, VIDEO_PAGE_SIZE, VIDEO_READ_FIELDS, } from "../src/tiktok-mirror-ui.js";
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative); served
+// under a path prefix with a <base> tag, every read resolves inside that prefix.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+const SESSION_HANDLE = 'tiktok-mirror.username';
+const SESSION_TOKEN = 'tiktok-mirror.token';
+function readSession() {
+    if (typeof sessionStorage === 'undefined')
+        return null;
+    const handle = sessionStorage.getItem(SESSION_HANDLE);
+    const token = sessionStorage.getItem(SESSION_TOKEN);
+    return handle && token ? { handle, token } : null;
+}
+async function wire(token, path, init) {
+    const res = await fetch(`${WIRE_BASE}${path}`, {
+        method: init?.method ?? 'GET',
+        headers: { authorization: `Bearer ${token}`, ...(init?.body !== undefined ? { 'content-type': 'application/json' } : {}) },
+        ...(init?.body !== undefined ? { body: JSON.stringify(init.body) } : {}),
+    });
+    let body = {};
+    try {
+        body = await res.json();
+    }
+    catch {
+        body = {};
+    }
+    return { status: res.status, body };
+}
+/** TikTok's nested error, as one sentence for the screen. */
+const errorText = (w) => String(w.body?.error?.message ?? `HTTP ${w.status}`);
+const errorCode = (w) => String(w.body?.error?.code ?? '');
+/** The signed-in creator: every profile field, or — for a token without the profile/stats scopes —
+ *  the basic ones, so the header shows what the twin returns and nothing it does not. */
+async function readMe(token) {
+    const full = await wire(token, `/v2/user/info/?fields=${PROFILE_FIELDS}`);
+    if (full.status === 401 && errorCode(full) === 'scope_not_authorized')
+        return wire(token, `/v2/user/info/?fields=${BASIC_FIELDS}`);
+    return full;
+}
+function parseRoute(hash) {
+    const parts = hash.replace(/^#\/?/, '').split('/').filter(Boolean);
+    if (parts.length === 0)
+        return null;
+    if (parts[0] === 'login')
+        return { page: 'login' };
+    const handle = decodeURIComponent(parts[0]).replace(/^@/, '');
+    if (parts[1] === 'video' && parts[2])
+        return { page: 'video', handle, id: parts[2] };
+    return { page: 'profile', handle };
+}
+const go = (path) => { location.hash = `#/${path}`; };
+// ── icons (vendor mirror: tiktok.com's look, drawn here) ────────────────────────────────────────
+const NOTE = 'M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6 0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64 0 3.33 2.76 5.7 5.69 5.7 3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48z';
+export function Logo({ size = 34, word = true }) {
+    return (_jsxs("span", { className: "logo", children: [_jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, "aria-hidden": "true", children: [_jsx("path", { d: NOTE, fill: "#25F4EE", transform: "translate(-0.9 -0.7)" }), _jsx("path", { d: NOTE, fill: "#FE2C55", transform: "translate(0.9 0.7)" }), _jsx("path", { d: NOTE, fill: "currentColor" })] }), word ? _jsx("span", { className: "logo-word", children: "TikTok" }) : null] }));
+}
+function Icon({ d, size = 24, fill = false, className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 24 24", width: size, height: size, "aria-hidden": "true", fill: fill ? 'currentColor' : 'none', stroke: fill ? 'none' : 'currentColor', strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: d.map((p) => _jsx("path", { d: p }, p)) }));
+}
+const I_HOME = ['M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3z'];
+const I_EXPLORE = ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'm16.2 7.8-2.1 6.3-6.3 2.1 2.1-6.3z'];
+const I_FOLLOWING = ['M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2', 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z', 'M19 8v6', 'M22 11h-6'];
+const I_FRIENDS = ['M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2', 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z', 'M23 21v-2a4 4 0 0 0-3-3.87', 'M16 3.13a4 4 0 0 1 0 7.75'];
+const I_LIVE = ['M4 6h16v12H4z', 'm10 9 5 3-5 3z'];
+const I_UPLOAD = ['M12 5v14', 'M5 12h14'];
+const I_PROFILE = ['M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2', 'M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'];
+const I_PLAY = ['M7 4.5v15l12-7.5z'];
+const I_PAUSE = ['M7 4h3.5v16H7z', 'M13.5 4H17v16h-3.5z'];
+const I_CLOSE = ['M18 6 6 18', 'm6 6 12 12'];
+const I_UP = ['m18 15-6-6-6 6'];
+const I_DOWN = ['m6 9 6 6 6-6'];
+const I_SHARE_ARROW = ['M14 4.5V9C7 9 3.5 13 3 19.5c2-3.5 5-5 11-5V19l7-7.25z'];
+const I_HEART = ['M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.9 4.5 6.7 4.5c2.2 0 3.7 1.2 5.3 3 1.6-1.8 3.1-3 5.3-3 3.8 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'];
+const I_COMMENT = ['M12 3C6.5 3 2 6.9 2 11.7c0 2.6 1.3 4.9 3.4 6.5L4.7 22l4.6-2.4c.9.2 1.8.3 2.7.3 5.5 0 10-3.9 10-8.7S17.5 3 12 3z'];
+const I_BOOKMARK = ['M6 2.5h12a1 1 0 0 1 1 1V22l-7-4.5L5 22V3.5a1 1 0 0 1 1-1z'];
+const I_VERIFIED = ['M12 1.5 14.6 3.4l3.2-.2.9 3.1 2.8 1.6-1 3.1 1 3.1-2.8 1.6-.9 3.1-3.2-.2L12 22.5l-2.6-1.9-3.2.2-.9-3.1-2.8-1.6 1-3.1-1-3.1 2.8-1.6.9-3.1 3.2.2z'];
+const I_CHECK = ['m7.5 12.2 3 3 6-6.4'];
+const I_MUSIC = ['M9 18V5l12-2v13', 'M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z', 'M18 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'];
+const I_VOLUME = ['M11 5 6 9H2v6h4l5 4z', 'M15.5 8.5a5 5 0 0 1 0 7', 'M19 5a10 10 0 0 1 0 14'];
+const I_MUTED = ['M11 5 6 9H2v6h4l5 4z', 'm22 9-6 6', 'm16 9 6 6'];
+const I_LOCK = ['M5 11h14v10H5z', 'M8 11V7a4 4 0 0 1 8 0v4'];
+const I_GRID = ['M4 4h7v7H4z', 'M13 4h7v7h-7z', 'M4 13h7v7H4z', 'M13 13h7v7h-7z'];
+// ── pieces ───────────────────────────────────────────────────────────────────────────────────────
+export function Avatar({ user, size }) {
+    return (_jsx("div", { className: "avatar", style: { width: size, height: size, fontSize: size * 0.42, background: `hsl(${avatarHue(user?.union_id ?? user?.username)} 55% 45%)` }, "aria-hidden": "true", children: avatarInitial(user) }));
+}
+function Verified({ size = 20 }) {
+    return (_jsxs("span", { className: "verified", title: "Verified account", children: [_jsx(Icon, { d: I_VERIFIED, fill: true, size: size }), _jsx(Icon, { d: I_CHECK, size: size, className: "verified-check" })] }));
+}
+export function Caption({ text }) {
+    return (_jsx("span", { className: "caption", children: captionSegments(text).map((s, i) => s.kind === 'text' ? _jsx("span", { children: s.value }, i) : _jsx("strong", { className: "tag", children: s.value }, i)) }));
+}
+/** The profile header: avatar, @username (h1) with the verified tick, the nickname, the buttons a
+ *  creator sees on their own page, the three counts (only those the twin returned) and the bio. */
+export function ProfileHeader({ user, own }) {
+    const stats = profileStats(user);
+    return (_jsxs("header", { className: "profile-header", children: [_jsx(Avatar, { user: user, size: 212 }), _jsxs("div", { className: "profile-info", children: [_jsxs("div", { className: "profile-names", children: [_jsx("h1", { className: "profile-username", children: String(user.username ?? user.display_name ?? '') }), user.is_verified === true ? _jsx(Verified, {}) : null, _jsx("h2", { className: "profile-nickname", children: String(user.display_name ?? '') })] }), _jsx("div", { className: "profile-buttons", children: own ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "btn btn-red", children: "Edit profile" }), _jsx("button", { className: "btn btn-gray", children: "Promote post" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { className: "btn btn-red", children: "Follow" }), _jsx("button", { className: "btn btn-gray", children: "Message" })] })) }), stats.length > 0 ? (_jsx("div", { className: "profile-stats", children: stats.map((s) => _jsxs("span", { className: "stat", "data-stat": s.label, children: [_jsx("strong", { children: s.value }), _jsx("span", { className: "stat-label", children: s.label })] }, s.label)) })) : null, typeof user.bio_description === 'string' && user.bio_description !== '' ? _jsx("p", { className: "profile-bio", children: user.bio_description }) : _jsx("p", { className: "profile-bio muted", children: "No bio yet." })] })] }));
+}
+/** One grid tile: the post's own first frame (the twin serves no cover image), 9:16, with the play
+ *  count at the bottom left. A post whose bytes the twin does not hold shows its caption instead. */
+export function VideoTile({ video, src, onOpen }) {
+    const [broken, setBroken] = useState(false);
+    return (_jsxs("div", { className: "tile", "data-video-id": String(video.id), onClick: onOpen, role: "link", tabIndex: 0, onKeyDown: (e) => { if (e.key === 'Enter')
+            onOpen(); }, children: [broken ? _jsx("div", { className: "tile-fallback", children: _jsx(Caption, { text: captionOf(video) }) }) : (_jsx("video", { className: "tile-video", src: `${src}#t=0.1`, preload: "metadata", muted: true, playsInline: true, onError: () => setBroken(true), onMouseEnter: (e) => { void e.currentTarget.play().catch(() => undefined); }, onMouseLeave: (e) => { e.currentTarget.pause(); } })), typeof video.view_count === 'number' ? (_jsxs("span", { className: "tile-views", children: [_jsx(Icon, { d: I_PLAY, size: 16 }), compactCount(video.view_count)] })) : null] }));
+}
+export function VideoGrid({ videos, sourceOf, onOpen }) {
+    return (_jsx("div", { className: "grid", children: videos.map((v) => _jsx(VideoTile, { video: v, src: sourceOf(String(v.id)), onOpen: () => onOpen(String(v.id)) }, String(v.id))) }));
+}
+/** The player's overlay: @handle, the caption with its tags, and the sound line TikTok prints for a
+ *  video's own audio ("original sound - <nickname>"). */
+export function PlayerCaption({ user, video }) {
+    return (_jsxs("div", { className: "player-caption", children: [_jsxs("div", { className: "player-author", children: ["@", String(user.username ?? user.display_name ?? ''), user.is_verified === true ? _jsx(Verified, { size: 16 }) : null] }), _jsx("div", { className: "player-text", children: _jsx(Caption, { text: captionOf(video) }) }), _jsxs("div", { className: "player-sound", children: [_jsx(Icon, { d: I_MUSIC, size: 14 }), _jsxs("span", { children: ["original sound - ", String(user.display_name ?? user.username ?? '')] })] })] }));
+}
+/** The right-hand action rail: the creator's avatar, then like / comment / save / share, each with the
+ *  count the Video Object carries — and no number where the Display API returns none (saves). */
+export function ActionRail({ user, video }) {
+    const count = (raw) => (typeof raw === 'number' ? compactCount(raw) : '');
+    return (_jsxs("div", { className: "rail", children: [_jsxs("div", { className: "rail-avatar", children: [_jsx(Avatar, { user: user, size: 48 }), _jsx("span", { className: "rail-plus", children: "+" })] }), _jsxs("div", { className: "rail-item", children: [_jsx("span", { className: "rail-btn", children: _jsx(Icon, { d: I_HEART, fill: true, size: 26 }) }), _jsx("strong", { children: count(video.like_count) })] }), _jsxs("div", { className: "rail-item", children: [_jsx("span", { className: "rail-btn", children: _jsx(Icon, { d: I_COMMENT, fill: true, size: 26 }) }), _jsx("strong", { children: count(video.comment_count) })] }), _jsxs("div", { className: "rail-item", children: [_jsx("span", { className: "rail-btn", children: _jsx(Icon, { d: I_BOOKMARK, fill: true, size: 24 }) }), _jsx("strong", {})] }), _jsxs("div", { className: "rail-item", children: [_jsx("span", { className: "rail-btn", children: _jsx(Icon, { d: I_SHARE_ARROW, fill: true, size: 26 }) }), _jsx("strong", { children: count(video.share_count) })] })] }));
+}
+/** The full-height vertical player: the post playing, looped, in a 9:16 frame as tall as the window,
+ *  over a blurred copy of itself; tap to pause; the caption and the rail over it; up/down to the
+ *  neighbouring posts; close back to the profile. */
+function Player({ user, video, src, prev, next, onClose }) {
+    const ref = useRef(null);
+    const [paused, setPaused] = useState(false);
+    const [muted, setMuted] = useState(false);
+    const [time, setTime] = useState({ at: 0, of: Number(video.duration) || 0 });
+    const toggle = () => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (el.paused) {
+            void el.play().catch(() => undefined);
+            setPaused(false);
+        }
+        else {
+            el.pause();
+            setPaused(true);
+        }
+    };
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+            if (e.key === 'ArrowUp' && prev)
+                go(`@${user.username}/video/${prev}`);
+            if (e.key === 'ArrowDown' && next)
+                go(`@${user.username}/video/${next}`);
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [prev, next, onClose, user.username]);
+    return (_jsxs("div", { className: "player-page", "data-video-id": String(video.id), children: [_jsx("video", { className: "player-backdrop", src: src, muted: true, autoPlay: true, loop: true, playsInline: true, "aria-hidden": "true" }), _jsx("button", { className: "player-close", "aria-label": "Close", onClick: onClose, children: _jsx(Icon, { d: I_CLOSE, size: 24 }) }), _jsx("div", { className: "player-logo", children: _jsx(Logo, { size: 30 }) }), _jsxs("div", { className: "player-stage", children: [_jsxs("div", { className: "player-frame", onClick: toggle, children: [_jsx("button", { className: "player-sound-toggle", "aria-label": muted ? 'Unmute' : 'Mute', onClick: (e) => { e.stopPropagation(); setMuted(!muted); }, children: _jsx(Icon, { d: muted ? I_MUTED : I_VOLUME, size: 20 }) }), _jsx("video", { ref: ref, className: "player-video", src: src, autoPlay: true, loop: true, playsInline: true, muted: muted, onTimeUpdate: (e) => setTime({ at: e.currentTarget.currentTime, of: e.currentTarget.duration || time.of }), onPlay: () => setPaused(false), onPause: () => setPaused(true) }), paused ? _jsx("span", { className: "player-paused", children: _jsx(Icon, { d: I_PLAY, fill: true, size: 64 }) }) : null, _jsx("div", { className: "player-shade" }), _jsx(PlayerCaption, { user: user, video: video }), _jsxs("div", { className: "player-bar", onClick: (e) => e.stopPropagation(), children: [_jsx("button", { className: "player-toggle", "aria-label": paused ? 'Play' : 'Pause', onClick: toggle, children: _jsx(Icon, { d: paused ? I_PLAY : I_PAUSE, fill: true, size: 18 }) }), _jsx("div", { className: "player-track", children: _jsx("div", { className: "player-progress", style: { width: `${time.of > 0 ? Math.min(100, (time.at / time.of) * 100) : 0}%` } }) }), _jsxs("span", { className: "player-time", children: [clock(time.at), "/", clock(time.of)] })] })] }), _jsx(ActionRail, { user: user, video: video })] }), _jsxs("div", { className: "player-nav", children: [_jsx("button", { "aria-label": "Previous video", disabled: !prev, onClick: () => prev && go(`@${user.username}/video/${prev}`), children: _jsx(Icon, { d: I_UP, size: 26 }) }), _jsx("button", { "aria-label": "Next video", disabled: !next, onClick: () => next && go(`@${user.username}/video/${next}`), children: _jsx(Icon, { d: I_DOWN, size: 26 }) })] })] }));
+}
+// ── the creator's videos: POST /v2/video/list/, newest first, paged on the vendor's own cursor ────
+function useVideos(session, reloadKey) {
+    const [videos, setVideos] = useState([]);
+    const [cursor, setCursor] = useState(null);
+    const [error, setError] = useState(null);
+    const [loaded, setLoaded] = useState(false);
+    const load = useCallback(async (from, prev) => {
+        if (!session)
+            return;
+        const w = await wire(session.token, `/v2/video/list/?fields=${VIDEO_READ_FIELDS}`, { method: 'POST', body: { max_count: VIDEO_PAGE_SIZE, ...(from !== null ? { cursor: from } : {}) } });
+        setLoaded(true);
+        if (w.status !== 200) {
+            setError(errorCode(w) === 'scope_not_authorized' ? "This token can't read the account's videos (it needs video.list)." : errorText(w));
+            return;
+        }
+        setError(null);
+        const page = Array.isArray(w.body?.data?.videos) ? w.body.data.videos : [];
+        setVideos([...prev, ...page]);
+        setCursor(w.body?.data?.has_more === true ? Number(w.body.data.cursor) : null);
+    }, [session]);
+    useEffect(() => { setVideos([]); setCursor(null); setLoaded(false); void load(null, []); }, [load, reloadKey]);
+    return { videos, error, loaded, more: cursor !== null ? () => void load(cursor, videos) : null };
+}
+// ── screens ──────────────────────────────────────────────────────────────────────────────────────
+function SideNav({ me, active, onSignOut }) {
+    const item = (icon, label, on = false, onClick) => (_jsxs("button", { className: on ? 'nav-item active' : 'nav-item', onClick: onClick, children: [_jsx(Icon, { d: icon, size: 26 }), _jsx("span", { children: label })] }));
+    return (_jsxs("nav", { className: "sidenav", children: [_jsx("a", { className: "nav-logo", href: me ? `#/@${me.username}` : '#/', children: _jsx(Logo, {}) }), _jsx("div", { className: "nav-search", children: _jsx("span", { children: "Search" }) }), item(I_HOME, 'For You'), item(I_EXPLORE, 'Explore'), item(I_FOLLOWING, 'Following'), item(I_FRIENDS, 'Friends'), item(I_UPLOAD, 'Upload'), item(I_LIVE, 'LIVE'), me ? (_jsxs("button", { className: active === 'profile' ? 'nav-item active' : 'nav-item', onClick: () => go(`@${me.username}`), children: [_jsx(Avatar, { user: me, size: 32 }), _jsx("span", { children: "Profile" })] })) : item(I_PROFILE, 'Profile'), _jsxs("div", { className: "nav-foot", children: [me ? _jsxs("button", { className: "nav-signout", onClick: onSignOut, children: ["Log out @", String(me.username ?? '')] }) : null, _jsx("div", { className: "muted", children: "\u00A9 2026 TikTok" })] })] }));
+}
+function ProfileScreen({ session, me, handle }) {
+    const own = handle === String(me.username ?? '');
+    const read = useVideos(own ? session : null, 0);
+    const [tab, setTab] = useState('videos');
+    if (!own) {
+        // The Display API reads only the token's own account; another creator's page is not readable here.
+        return _jsxs("div", { className: "profile-missing", children: [_jsx("h2", { children: "Couldn't find this account" }), _jsx("p", { className: "muted", children: "Looking for videos? Try browsing our trending creators, hashtags, and sounds." })] });
+    }
+    return (_jsxs("div", { className: "profile", children: [_jsx(ProfileHeader, { user: me, own: true }), _jsxs("div", { className: "profile-tabs", children: [_jsxs("button", { className: tab === 'videos' ? 'ptab active' : 'ptab', onClick: () => setTab('videos'), children: [_jsx(Icon, { d: I_GRID, size: 18 }), "Videos"] }), _jsx("button", { className: tab === 'reposts' ? 'ptab active' : 'ptab', onClick: () => setTab('reposts'), children: "Reposts" }), _jsxs("button", { className: tab === 'favorites' ? 'ptab active' : 'ptab', onClick: () => setTab('favorites'), children: [_jsx(Icon, { d: I_LOCK, size: 16 }), "Favorites"] }), _jsxs("button", { className: tab === 'liked' ? 'ptab active' : 'ptab', onClick: () => setTab('liked'), children: [_jsx(Icon, { d: I_LOCK, size: 16 }), "Liked"] }), tab === 'videos' ? _jsxs("div", { className: "sort", children: [_jsx("span", { className: "sort-on", children: "Latest" }), _jsx("span", { children: "Popular" }), _jsx("span", { children: "Oldest" })] }) : null] }), tab !== 'videos' ? _jsxs("div", { className: "empty", children: [_jsx("h3", { children: "Nothing here yet" }), _jsx("p", { className: "muted", children: "This twin models the account's own posts." })] })
+                : read.error ? _jsx("div", { className: "empty", role: "alert", children: read.error })
+                    : read.loaded && read.videos.length === 0 ? _jsxs("div", { className: "empty", children: [_jsx("h3", { children: "Upload your first video" }), _jsx("p", { className: "muted", children: "Your videos will appear here" })] })
+                        : (_jsxs(_Fragment, { children: [_jsx(VideoGrid, { videos: read.videos, sourceOf: (id) => mediaSource(WIRE_BASE, id, session.token), onOpen: (id) => go(`@${me.username}/video/${id}`) }), read.more ? _jsx("button", { className: "show-more", onClick: read.more, children: "Load more" }) : null] }))] }));
+}
+function VideoScreen({ session, me, id }) {
+    const read = useVideos(session, 0);
+    const at = read.videos.findIndex((v) => String(v.id) === id);
+    const close = useCallback(() => go(`@${me.username}`), [me.username]);
+    if (!read.loaded)
+        return _jsx("div", { className: "player-page" });
+    if (at < 0)
+        return _jsxs("div", { className: "player-page", children: [_jsx("div", { className: "player-missing", children: "Video currently unavailable" }), _jsx("button", { className: "player-close", "aria-label": "Close", onClick: close, children: _jsx(Icon, { d: I_CLOSE, size: 24 }) })] });
+    return (_jsx(Player, { user: me, video: read.videos[at], src: mediaSource(WIRE_BASE, id, session.token), ...(at > 0 ? { prev: String(read.videos[at - 1].id) } : {}), ...(at < read.videos.length - 1 ? { next: String(read.videos[at + 1].id) } : {}), onClose: close }, id));
+}
+function LoginScreen({ onSignedIn }) {
+    const [step, setStep] = useState('username');
+    const [handle, setHandle] = useState('');
+    const [token, setToken] = useState('');
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const clean = handle.trim().replace(/^@/, '');
+    const next = () => {
+        if (!/^[A-Za-z0-9_.]{2,24}$/.test(clean)) {
+            setError("Couldn't find this account");
+            return;
+        }
+        setError(null);
+        setStep('token');
+    };
+    const login = async () => {
+        setBusy(true);
+        const w = await readMe(token.trim());
+        setBusy(false);
+        if (w.status === 401 && errorCode(w) === 'access_token_invalid') {
+            setError('Incorrect account or password');
+            return;
+        }
+        if (w.status !== 200 || !w.body?.data?.user) {
+            setError(errorText(w));
+            return;
+        }
+        const me = w.body.data.user;
+        // Is this token THIS account's? The Display API answers the token's own account, so the answer says.
+        if (me.username !== undefined && String(me.username) !== clean) {
+            setError(`That token does not log in as @${clean}.`);
+            return;
+        }
+        onSignedIn({ handle: clean, token: token.trim() }, { ...me, username: me.username ?? clean });
+    };
+    return (_jsx("div", { className: "login-backdrop", children: _jsxs("div", { className: "login", children: [_jsx("div", { className: "login-logo", children: _jsx(Logo, { size: 40, word: false }) }), step === 'username' ? (_jsxs("form", { className: "login-form", onSubmit: (e) => { e.preventDefault(); next(); }, children: [_jsx("h1", { children: "Log in to TikTok" }), _jsx("div", { className: "login-sub", children: "Username" }), _jsx("input", { autoFocus: true, name: "username", className: "login-input", placeholder: "Username", value: handle, onChange: (e) => setHandle(e.target.value), autoComplete: "username" }), error ? _jsx("div", { className: "login-error", role: "alert", children: error }) : null, _jsx("button", { className: "btn-login", type: "submit", disabled: clean === '', children: "Next" }), _jsxs("div", { className: "muted login-note", children: ["This twin logs you in with the access token it issued for the account (", _jsx("code", { children: "/_twin/tokens" }), "), in place of a password."] })] })) : (_jsxs("form", { className: "login-form", onSubmit: (e) => { e.preventDefault(); void login(); }, children: [_jsx("h1", { children: "Log in" }), _jsxs("div", { className: "login-sub", children: ["@", clean, " ", _jsx("button", { type: "button", className: "link", onClick: () => { setStep('username'); setError(null); }, children: "Change" })] }), _jsx("input", { autoFocus: true, name: "token", className: "login-input", type: "password", placeholder: "Access token", value: token, onChange: (e) => setToken(e.target.value), autoComplete: "current-password" }), error ? _jsx("div", { className: "login-error", role: "alert", children: error }) : null, _jsx("button", { className: "btn-login", type: "submit", disabled: token.trim() === '' || busy, children: "Log in" })] })), _jsxs("div", { className: "login-foot", children: ["Don't have an account? ", _jsx("span", { className: "link-red", children: "Sign up" })] })] }) }));
+}
+function App() {
+    const [session, setSession] = useState(readSession);
+    const [me, setMe] = useState(null);
+    const [route, setRoute] = useState(() => parseRoute(typeof location === 'undefined' ? '' : location.hash));
+    useEffect(() => {
+        const onHash = () => { setRoute(parseRoute(location.hash)); window.scrollTo(0, 0); };
+        // a `#/…` link is one of the mirror's own routes; under a World's <base> the browser would resolve
+        // it against the base and leave the shell, so it moves the hash here
+        const onClick = (e) => {
+            const a = e.target?.closest?.('a[href^="#/"]');
+            if (!a || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                return;
+            e.preventDefault();
+            location.hash = a.getAttribute('href');
+        };
+        window.addEventListener('hashchange', onHash);
+        document.addEventListener('click', onClick, true);
+        return () => { window.removeEventListener('hashchange', onHash); document.removeEventListener('click', onClick, true); };
+    }, []);
+    const signOut = useCallback(() => {
+        sessionStorage.removeItem(SESSION_HANDLE);
+        sessionStorage.removeItem(SESSION_TOKEN);
+        setSession(null);
+        setMe(null);
+        go('login');
+    }, []);
+    // who am I: the signed-in creator, read back through the vendor's own user read
+    useEffect(() => {
+        if (!session) {
+            setMe(null);
+            return;
+        }
+        void readMe(session.token).then((w) => {
+            if (w.status === 200 && w.body?.data?.user)
+                setMe({ ...w.body.data.user, username: w.body.data.user.username ?? session.handle });
+            else if (w.status === 401)
+                signOut();
+        });
+    }, [session, signOut]);
+    const signIn = (s, user) => {
+        sessionStorage.setItem(SESSION_HANDLE, s.handle);
+        sessionStorage.setItem(SESSION_TOKEN, s.token);
+        setSession(s);
+        setMe(user);
+        go(`@${s.handle}`);
+    };
+    if (!session || route?.page === 'login') {
+        return session && route?.page === 'login' ? _jsx(LoginRedirect, { handle: session.handle }) : _jsx(LoginScreen, { onSignedIn: signIn });
+    }
+    if (!me)
+        return _jsx("div", { className: "loading", children: _jsx(Logo, {}) });
+    const current = route ?? { page: 'profile', handle: String(me.username) };
+    if (current.page === 'video')
+        return _jsx(VideoScreen, { session: session, me: me, id: current.id });
+    return (_jsxs("div", { className: "layout", children: [_jsx(SideNav, { me: me, active: current.page === 'profile' && current.handle === me.username ? 'profile' : 'none', onSignOut: signOut }), _jsx("main", { className: "main", children: _jsx(ProfileScreen, { session: session, me: me, handle: current.page === 'profile' ? current.handle : String(me.username) }) })] }));
+}
+function LoginRedirect({ handle }) {
+    useEffect(() => { go(`@${handle}`); }, [handle]);
+    return null;
+}
+if (typeof document !== 'undefined') {
+    const el = document.getElementById('root');
+    if (el)
+        createRoot(el).render(_jsx(App, {}));
+}