63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T94a,"use client"; import * as React from "react"; import { Close } from "./marks"; const SQUIRCLE = "M12 3H20C26 3 29 6 29 12V17.6C25.6 17.7 23.5 19.8 23 22.8C22.5 25.8 20.6 28.3 17.6 29H12C6 29 3 26 3 20V12C3 6 6 3 12 3Z"; const CREST = "M29.1 21.4C27.3 21.8 26.2 23.1 25.8 24.9C25.4 26.8 24.1 28.4 21.6 29.1"; const TRIANGLE = "M11.8 10.2L11.8 20.6L20.7 15.4Z"; const CHEVRON = "M13.9 11L18.2 15.4L13.9 19.8"; /** * The Playtide mark: a soft squircle whose lower-right edge is cut by a wave, with a tide crest beyond the cut and a * play notch. Opening the panel turns the notch around: the triangle rotates 180° about its centroid and, at mid-turn, * its fill drains into a chevron pointing back at the dock: one shape turning, never two icons swapping. */ export function BrandMark({ open, className = "duet-mark-svg" }: { open: boolean; className?: string }) { const raw = React.useId(); const id = `duet-mark-${raw.replace(/[^a-zA-Z0-9_-]/g, "")}`; return ( ); } /** A host's own mark: shown as given, cross-fading to a close glyph while the panel is open. */ export function CustomMark({ mark, open }: { mark: React.ReactNode; open: boolean }) { return ( ); } 66:Tfdc,"use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useDuet } from "./context"; import { Avatar } from "./parts"; import type { DuetItem } from "./types"; /** The height spring for the list: measured by motion, no jump for the rows below. */ const ACCORDION = { type: "spring", stiffness: 420, damping: 40 } as const; /** Up to five channels under Subscriptions, with LIVE or a fresh dot, and "Show all (n)". */ export function Channels({ item, open, id }: { item: DuetItem; open: boolean; id: string }) { const ctx = useDuet(); const channels = (item.channels ?? []).slice(0, 5); const total = item.channelsTotal ?? item.channels?.length ?? 0; return ( {open ? (

{c.name} {c.live ? ( {ctx.labels.live} ) : c.fresh ? ( ) : null} ); const props = { className: "duet-channel", "data-roving": "", "data-duet-id": `${item.id}:${c.id}`, "data-duet-channel-of": item.id, tabIndex: -1, onClick: () => { ctx.onChannelSelect?.(c, item); ctx.select(item.id, "channel"); }, }; return ( {c.href ? ( ctx.renderLink({ ...props, href: c.href, children: inner }) ) : ( )} ); })} {item.channelsHref ? ( ctx.renderLink({ className: "duet-channel duet-channel-all", "data-roving": "", "data-duet-id": `${item.id}:all`, "data-duet-channel-of": item.id, tabIndex: -1, href: item.channelsHref, onClick: () => ctx.select(item.id, "channel"), children: ctx.labels.showAll(total), }) ) : ( )}

) : null} ); } 67:T1e78,"use client"; import * as React from "react"; import type { DuetLabels } from "./labels"; import type { DuetAccount, DuetChannel, DuetEdge, DuetItem, DuetLinkProps, DuetMode, DuetSidebarProps, DuetTheme } from "./types"; export type TooltipApi = { show(el: HTMLElement, label: string, kbd?: string): void; hide(): void }; export type GhostApi = (id: string | null, strength: number) => void; /** * Hover between the slabs, without React: the dock and the panel register their elements here, and pointer events * write straight to the DOM (a data attribute on a dock tile, motion values on the panel's ghost). Only methods: the * parts never assign to it, so it stays out of React's render data entirely. */ export type HoverBus = { register(kind: "dock" | "rows", id: string, el: HTMLElement | null): void; dockEl(id: string | undefined): HTMLElement | null; rowEl(id: string | undefined): HTMLElement | null; hasDock(id: string): boolean; setGhost(api: GhostApi): void; clearGhost(api: GhostApi): void; /** The panel's ghost: glide to a row at a strength (1 = hovered there, 0.6 = sympathy from the dock). */ ghost(id: string | null, strength: number): void; setTooltip(api: TooltipApi): void; clearTooltip(api: TooltipApi): void; tooltip(): TooltipApi | null; sync(active: string | undefined, open: boolean): void; active(): string | undefined; /** The pointer is over a dock item (or left it: null). */ fromDock(id: string | null): void; /** The pointer is over a panel row (or left them: null). */ fromPanel(id: string | null): void; }; export function createBus(): HoverBus { const dock = new Map(); const rows = new Map(); let ghost: GhostApi | null = null; let tip: TooltipApi | null = null; let active: string | undefined; let open = false; let sym: HTMLElement | null = null; const live = (el: HTMLElement | undefined) => (el && el.isConnected ? el : null); return { register(kind, id, el) { const map = kind === "dock" ? dock : rows; if (el) map.set(id, el); else map.delete(id); }, dockEl: (id) => (id ? live(dock.get(id)) : null), rowEl: (id) => (id ? live(rows.get(id)) : null), hasDock: (id) => !!live(dock.get(id)), setGhost(api) { ghost = api; }, clearGhost(api) { if (ghost === api) ghost = null; }, ghost(id, strength) { ghost?.(id, strength); }, setTooltip(api) { tip = api; }, clearTooltip(api) { if (tip === api) tip = null; }, tooltip: () => tip, sync(a, o) { active = a; open = o; }, active: () => active, fromDock(id) { if (open) ghost?.(id, 0.6); }, fromPanel(id) { const el = id ? live(dock.get(id)) : null; if (sym && sym !== el) sym.removeAttribute("data-sym"); sym = el; if (sym && id !== active) sym.setAttribute("data-sym", ""); }, }; } export type NodeName = "root" | "dock" | "dockList" | "panel" | "panelList" | "logo" | "search" | "profile" | "avatar"; /** * The sidebar's shared elements, registered by callback refs and read only in effects and handlers (never while * rendering), plus the one-shot hand-offs between parts: where focus goes when the panel opens, and how it folds. */ export type DuetDom = { /** A stable callback ref for a part. */ ref(name: NodeName): (el: HTMLElement | null) => void | (() => void); get(name: NodeName): HTMLElement | null; /** A stable getter, for hooks that read the element in their effects. */ getter(name: NodeName): () => HTMLElement | null; /** Where focus goes once the panel's content has mounted: "menu", "view", "search" or "row:". */ setFocus(value: string | null): void; takeFocus(match?: (value: string) => boolean): string | null; setSquash(value: boolean): void; squash(): boolean; }; export function createDom(): DuetDom { const nodes = new Map(); const refs = new Map void | (() => void)>(); const getters = new Map HTMLElement | null>(); let focus: string | null = null; let squash = false; const get = (name: NodeName) => { const el = nodes.get(name); return el && el.isConnected ? el : null; }; return { ref(name) { let r = refs.get(name); if (!r) { r = (el) => { if (!el) return; nodes.set(name, el); // React 19 calls this on unmount; an exiting copy never removes the one that replaced it. return () => { if (nodes.get(name) === el) nodes.delete(name); }; }; refs.set(name, r); } return r; }, get, getter(name) { let g = getters.get(name); if (!g) { g = () => get(name); getters.set(name, g); } return g; }, setFocus(value) { focus = value; }, takeFocus(match) { const v = focus; if (v === null || (match && !match(v))) return null; focus = null; return v; }, setSquash(value) { squash = value; }, squash: () => squash, }; } export type Source = "dock" | "panel" | "sheet" | "bottom" | "channel" | "api"; export type ViewState = { id: string } | null; export type PopoverFrom = "panel" | "dock" | "sheet"; export type DuetContextValue = { brand: DuetSidebarProps["brand"]; items: DuetItem[]; primary: DuetItem[]; secondary: DuetItem[]; labels: DuetLabels; renderLink: (props: DuetLinkProps) => React.ReactNode; search: DuetSidebarProps["search"]; settings: React.ReactNode; help: DuetSidebarProps["help"]; chrome: boolean; bridge: boolean; value: string | undefined; select(id: string, from: Source, el?: HTMLElement | null): void; open: boolean; setOpen(next: boolean, how?: { focus?: "menu" | "logo" | "none"; squash?: boolean }): void; pinned: boolean; canPin: boolean; setPinned(next: boolean): void; /** Bumped on every user-initiated open: the light bridge keys off it. */ openCount: number; view: ViewState; /** The pushed view's item and title, read from the current items and labels (they follow a language switch). */ viewInfo(id: string): { item: DuetItem; title: string } | null; pushView(item: DuetItem): void; popView(): void; expanded: string | null; setExpanded(id: string | null): void; dotVisible(item: DuetItem): boolean; freshCount(item: DuetItem): number; onChannelSelect?: (channel: DuetChannel, item: DuetItem) => void; account?: DuetAccount; accountFrom: PopoverFrom | null; openAccount(from: PopoverFrom): void; closeAccount(): void; switchAccount(id: string): void; confirm: { from: string; anchor: () => HTMLElement | null | undefined } | null; askLogout(from: string, anchor: () => HTMLElement | null | undefined): void; closeConfirm(): void; logout(): Promise; mode: DuetMode; edge: DuetEdge; dir: "ltr" | "rtl"; theme: DuetTheme; resolved: "light" | "dark" | null; tintAttr: string; reduced: boolean; fine: boolean; bus: HoverBus; dom: DuetDom; ids: { panel: string; title: string; base: string }; announce(message: string): void; portal: { theme: DuetTheme; style: React.CSSProperties; tint: string }; }; export const DuetContext = React.createContext(null); export function useDuet(): DuetContextValue { const ctx = React.useContext(DuetContext); if (!ctx) throw new Error("Duet Sidebar parts must render inside ."); return ctx; } 68:T1e76,"use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { BrandMark, CustomMark } from "./brand-mark"; import { useDuet } from "./context"; import { Divider, Slab } from "./glass"; import { focusItem, useRovingFocus } from "./hooks/use-roving-focus"; import { useScrollFade } from "./hooks/use-scroll-fade"; import { useSheen } from "./hooks/use-sheen"; import { Indicator } from "./indicator"; import { Avatar, Badge, Dots, preloadImages, preloadLayers } from "./parts"; import { TILE } from "./springs"; import type { DuetItem } from "./types"; /** The slim slab that is always there: dots, the mark that opens the panel, the icons, the account. */ export function Dock() { const ctx = useDuet(); const { dom, primary, secondary, labels, account, value, bus } = ctx; const sheen = useSheen(dom.getter("dock"), ctx.fine && !ctx.reduced); useScrollFade(dom.getter("dockList"), [primary.length, secondary.length]); const roving = useRovingFocus(dom.getter("dockList"), { // The arrow toward the panel (→ when the dock is on the left) opens it on the matching row. dir: ctx.edge === "left" ? "ltr" : "rtl", onForward: (el) => { const id = el.dataset.duetId; if (!id) return false; if (ctx.open && focusItem(dom.get("panelList"), id)) return true; dom.setFocus(`row:${id}`); ctx.setOpen(true); return true; }, }); const dockIds = [...primary, ...secondary].map((i) => i.id); const stop = value && dockIds.includes(value) ? value : dockIds[0]; const onLeave = () => { bus.fromDock(null); bus.tooltip()?.hide(); }; return ( bus.dockEl(value)} scroller={dom.getter("dockList")} value={value} reduced={ctx.reduced} /> } >

{ctx.chrome ? : null}

))}

{secondary.length ? ( <>

))}

) : null}

{account ? : null}

); } function MarkButton() { const ctx = useDuet(); const { dom, labels, open, brand, account, items } = ctx; const warm = () => { preloadLayers(); preloadImages([account?.avatar, ...items.flatMap((i) => i.channels?.map((c) => c.avatar) ?? [])]); }; return ( ); } function DockItem({ item, stop }: { item: DuetItem; stop: boolean }) { const ctx = useDuet(); const { bus, labels } = ctx; const active = item.id === ctx.value && !item.view && !item.action; const dot = ctx.dotVisible(item); const fresh = ctx.freshCount(item); const Icon = item.icon; const liRef = (el: HTMLLIElement | null) => { bus.register("dock", item.id, el); }; const tip = dot && fresh ? labels.newCount(item.label, fresh) : item.label; const show = (el: HTMLElement) => { if (!ctx.open) bus.tooltip()?.show(el, tip, item.shortcut); }; const onClick = (e: React.MouseEvent) => { if (item.disabled) { e.preventDefault(); return; } if (item.view || item.action) e.preventDefault(); bus.tooltip()?.hide(); ctx.select(item.id, "dock", e.currentTarget as HTMLElement); }; const content = ( <> {active ? ( ctx.reduced ? ( ) : ( ) ) : null} {dot ? ( {item.badge ? : null} ); const label = [item.label, dot && fresh ? labels.freshShort(fresh) : null, item.badge ? String(item.badge) : null] .filter(Boolean) .join(", "); const common = { className: "duet-tile", "data-roving": "", "data-duet-id": item.id, tabIndex: stop ? 0 : -1, "aria-label": label, "aria-disabled": item.disabled ? (true as const) : undefined, }; return (

{ if (e.pointerType !== "mouse") return; bus.fromDock(item.id); show(e.currentTarget); }} onFocus={(e) => { if ((e.target as HTMLElement).matches(":focus-visible")) show(e.currentTarget); }} onBlur={() => bus.tooltip()?.hide()} > {item.href && !item.view && !item.action ? ( ctx.renderLink({ ...common, href: item.href, "aria-current": active ? "page" : undefined, onClick, children: content, }) ) : ( )}

); } function DockAvatar() { const ctx = useDuet(); const account = ctx.account!; const open = ctx.accountFrom === "dock"; return ( ); } 69:Tdad5,/* * Duet Sidebar — plain CSS, no Tailwind needed. Every colour is a --duet-* token written once with light-dark(): * a theme only flips `color-scheme`, so light and dark can never drift apart. * * theme="dark" | "light" → fixed * theme="auto" → a .dark / .light / [data-theme] ancestor wins, then the system setting * * Override any --duet-* token on .duet to re-skin it; set --duet-font on :root (popovers render in ). */ @property --duet-tint { syntax: ""; inherits: true; initial-value: #d3122f; } @property --duet-text { syntax: ""; inherits: true; initial-value: white; } @property --duet-text-strong { syntax: ""; inherits: true; initial-value: white; } @property --duet-muted { syntax: ""; inherits: true; initial-value: white; } @property --duet-glyph { syntax: ""; inherits: true; initial-value: white; } @property --duet-indicator { syntax: ""; inherits: true; initial-value: white; } /* The stage's height and the rhythm it gives (0 at 600 px tall, 1 at 850 px and above). */ @property --duet-h { syntax: ""; inherits: true; initial-value: 850px; } @property --duet-t { syntax: ""; inherits: true; initial-value: 1; } @property --duet-mx { syntax: ""; inherits: false; initial-value: 0px; } @property --duet-my { syntax: ""; inherits: false; initial-value: 0px; } .duet, .duet-portal { /* type */ --duet-text: light-dark(#22090f, rgb(255 255 255 / 0.9)); --duet-text-strong: light-dark(#160307, #ffffff); --duet-muted: light-dark(#6e4c53, rgb(255 255 255 / 0.86)); --duet-glyph: light-dark(#3a1a21, rgb(255 255 255 / 0.92)); /* glass */ --duet-glass-hi: light-dark(rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.15)); --duet-glass-mid: light-dark(rgb(255 255 255 / 0.54), rgb(255 255 255 / 0.07)); --duet-glass-lo: light-dark(rgb(255 255 255 / 0.46), rgb(255 255 255 / 0.035)); /* light-dark() takes colours only: the tint's strength per theme is written into the colour itself. */ --duet-tint-layer: light-dark(color-mix(in oklab, var(--duet-tint) 10%, transparent), color-mix(in oklab, var(--duet-tint) 14%, transparent)); --duet-veil: light-dark(rgb(255 250 251 / 0.14), rgb(18 2 6 / 0.26)); --duet-border-hi: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.38)); --duet-border-lo: light-dark(rgb(34 9 15 / 0.08), rgb(255 255 255 / 0.08)); --duet-shadow-1: light-dark(rgb(80 10 20 / 0.22), rgb(0 0 0 / 0.7)); --duet-shadow-2: light-dark(rgb(80 10 20 / 0.12), rgb(0 0 0 / 0.45)); --duet-specular: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.24)); --duet-sheen: light-dark(rgb(255 255 255 / 0.26), rgb(255 255 255 / 0.06)); --duet-grain: 0.03; /* surfaces */ --duet-tile: light-dark(rgb(34 9 15 / 0.06), rgb(255 255 255 / 0.1)); --duet-tile-hi: light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.18)); --duet-tile-shadow: light-dark(rgb(80 10 20 / 0.12), rgb(0 0 0 / 0.25)); --duet-ghost: light-dark(rgb(34 9 15 / 0.05), rgb(255 255 255 / 0.07)); --duet-press: light-dark(rgb(34 9 15 / 0.08), rgb(255 255 255 / 0.11)); --duet-indicator: light-dark(#22090f, #ffffff); --duet-halo: light-dark(rgb(232 90 120 / 0.42), rgb(255 255 255 / 0.55)); --duet-divider: light-dark(rgb(34 9 15 / 0.14), rgb(255 255 255 / 0.26)); --duet-divider-side: light-dark(rgb(34 9 15 / 0.07), rgb(255 255 255 / 0.16)); --duet-focus: light-dark(rgb(34 9 15 / 0.85), rgb(255 255 255 / 0.85)); --duet-dot: light-dark(#22090f, #ffffff); --duet-live: #e3123a; --duet-ring: light-dark(rgb(34 9 15 / 0.18), rgb(0 0 0 / 0.18)); --duet-avatar-ring: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.35)); --duet-field: light-dark(rgb(255 255 255 / 0.55), rgb(0 0 0 / 0.18)); --duet-field-border: light-dark(rgb(34 9 15 / 0.12), rgb(255 255 255 / 0.16)); --duet-kbd: light-dark(rgb(34 9 15 / 0.06), rgb(255 255 255 / 0.1)); --duet-kbd-border: light-dark(rgb(34 9 15 / 0.12), rgb(255 255 255 / 0.16)); --duet-solid: light-dark(#22090f, #ffffff); --duet-solid-ink: light-dark(#ffffff, #1c0408); --duet-scrim: rgb(0 0 0 / 0.4); /* popovers and tooltips (their own blur, outside the slabs) */ --duet-pop: light-dark(rgb(255 252 252 / 0.8), rgb(40 12 18 / 0.72)); --duet-pop-border: light-dark(rgb(34 9 15 / 0.08), rgb(255 255 255 / 0.14)); --duet-pop-shadow: light-dark(rgb(80 10 20 / 0.24), rgb(0 0 0 / 0.55)); --duet-tint: #d3122f; --duet-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Springs as CSS easings (stiffness / damping, mass 1). */ --duet-spring-tile: linear(0, 0.07, 0.211, 0.376, 0.536, 0.676, 0.789, 0.875, 0.937, 0.978, 1.003, 1.017, 1.023, 1.023, 1.021, 1.017, 1.013, 1.01, 1.007, 1.004, 1.002, 1.001, 1, 1, 1); --duet-spring-soft: linear(0, 0.048, 0.152, 0.278, 0.398, 0.516, 0.619, 0.701, 0.773, 0.83, 0.874, 0.907, 0.933, 0.953, 0.967, 0.977, 0.985, 0.99, 0.994, 0.996, 0.998, 0.999, 1, 1, 1); color-scheme: dark; /* Set --duet-font anywhere above the sidebar (:root works for the portalled popovers too). */ font-family: var(--duet-font, "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: --duet-text 200ms ease, --duet-text-strong 200ms ease, --duet-muted 200ms ease, --duet-glyph 200ms ease, --duet-indicator 200ms ease, --duet-tint 240ms ease; } .duet[data-duet-theme="dark"], .duet-portal[data-duet-theme="dark"] { color-scheme: dark; } .duet[data-duet-theme="light"], .duet-portal[data-duet-theme="light"] { color-scheme: light; } .duet[data-duet-theme="auto"], .duet-portal[data-duet-theme="auto"] { color-scheme: light dark; } :where(.dark, [data-theme="dark"]) .duet[data-duet-theme="auto"] { color-scheme: dark; } :where(.light, [data-theme="light"]) .duet[data-duet-theme="auto"] { color-scheme: light; } /* Resets at zero specificity, so every component class below wins over them. */ :where(.duet, .duet-portal) :where(*) { box-sizing: border-box; } :where(.duet, .duet-portal) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } :where(.duet, .duet-portal) :where(a) { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } :where(.duet, .duet-portal) :where(ul) { list-style: none; margin: 0; padding: 0; } :where(.duet, .duet-portal) :where(img) { display: block; } :where(.duet, .duet-portal) :where(:focus-visible) { outline: none; } .duet-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Root and stage ────────────────────────────────────────────────────────────────── */ .duet { --duet-dock-w: 95px; --duet-gap: 65px; --duet-panel-w: 430px; --duet-margin: 24px; --duet-reserved: calc(var(--duet-margin) * 2 + var(--duet-dock-w)); position: sticky; top: 0; z-index: 40; flex: none; width: var(--duet-reserved); height: 100dvh; container-type: size; color: var(--duet-text); } .duet[data-pinned][data-mode="desktop"] { --duet-reserved: calc(var(--duet-margin) * 2 + var(--duet-dock-w) + var(--duet-gap) + var(--duet-panel-w)); } .duet[data-mode="compact"] { --duet-panel-w: min(430px, var(--duet-room, 430px) - var(--duet-dock-w) - var(--duet-gap) - var(--duet-margin) * 2); } /* Until the mode is known, phones see nothing rather than the desktop dock. */ @media (max-width: 639px) { .duet:not([data-ready]):not([data-mode="mobile"]) { visibility: hidden; } } .duet-pair { --duet-h: min(850px, 100cqh - var(--duet-margin) * 2); --duet-t: clamp(0, tan(atan2(var(--duet-h) - 600px, 250px)), 1); --duet-rhythm: calc(0.74 + 0.26 * var(--duet-t)); --duet-pad: calc(20px + 8px * var(--duet-t)); --duet-pad-b: calc(18px + 6px * var(--duet-t)); --duet-dots-mb: calc(18px + 12px * var(--duet-t)); --duet-mark-box: calc(50px + 12px * var(--duet-t)); --duet-mark: calc(46px + 10px * var(--duet-t)); --duet-mark-mb: calc(22px + 13px * var(--duet-t)); --duet-line-m: calc(10px + 8px * var(--duet-t)); --duet-tile: calc(46px + 14px * var(--duet-t)); --duet-tile-gap: calc(6px + 6px * var(--duet-t)); --duet-avatar: calc(38px + 6px * var(--duet-t)); --duet-word: calc(38px + 14px * var(--duet-t)); --duet-word-mb: calc(10px + 6px * var(--duet-t)); --duet-row: calc(44px + 18px * var(--duet-t)); --duet-row-gap: calc(4px + 6px * var(--duet-t)); --duet-div-mt: calc(6px + 2px * var(--duet-t)); --duet-div-mb: calc(14px + 8px * var(--duet-t)); --duet-profile: calc(52px + 20px * var(--duet-t)); position: absolute; top: calc(50% - var(--duet-h) / 2); left: var(--duet-margin); width: var(--duet-dock-w); height: var(--duet-h); } .duet[data-edge="right"] .duet-pair { left: auto; right: var(--duet-margin); } .duet[data-search] .duet-pair { --duet-row: calc(46px + 12px * var(--duet-t)); --duet-row-gap: 6px; --duet-word-mb: calc(8px + 6px * var(--duet-t)); --duet-div-mb: calc(12px + 4px * var(--duet-t)); } .duet:not([data-chrome]) .duet-pair { --duet-dots-mb: 0px; } /* ── The slab: shadow, glass, face ─────────────────────────────────────────────────── */ .duet-slab { position: absolute; top: 0; height: 100%; isolation: isolate; } .duet-shadow { position: absolute; inset: 0; z-index: -1; border-radius: var(--duet-radius); pointer-events: none; box-shadow: 0 40px 80px -30px var(--duet-shadow-1), 0 14px 28px -14px var(--duet-shadow-2); } /* The only backdrop blur in a slab. Veil, tint, body and grain are its own background layers, so one element carries the whole material and nothing is blended against the un-blurred page. */ .duet-glass { position: absolute; inset: 0; border-radius: var(--duet-radius); background: linear-gradient(var(--duet-veil), var(--duet-veil)), linear-gradient(var(--duet-tint-layer), var(--duet-tint-layer)), linear-gradient(160deg, var(--duet-glass-hi) 0%, var(--duet-glass-mid) 42%, var(--duet-glass-lo) 100%); -webkit-backdrop-filter: blur(44px) saturate(150%); backdrop-filter: blur(44px) saturate(150%); pointer-events: none; } .duet[data-tint="clear"] .duet-glass, .duet-portal[data-tint="clear"] .duet-glass { background: linear-gradient(var(--duet-veil), var(--duet-veil)), linear-gradient(160deg, var(--duet-glass-hi) 0%, var(--duet-glass-mid) 42%, var(--duet-glass-lo) 100%); } /* Everything above the glass: grain, sheen, specular line, border and the content. */ .duet-face { position: absolute; inset: 0; border-radius: var(--duet-radius); overflow: hidden; box-shadow: inset 0 1px 0 var(--duet-specular); } .duet-grain { position: absolute; inset: 0; pointer-events: none; opacity: var(--duet-grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .duet-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .duet-sheen-spot { position: absolute; top: -240px; left: -240px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, var(--duet-sheen), rgb(255 255 255 / 0) 100%); transform: translate(var(--duet-mx), var(--duet-my)); will-change: transform, opacity; } .duet-border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .duet-border rect { x: 0.75px; y: 0.75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); rx: calc(var(--duet-radius) - 0.75px); ry: calc(var(--duet-radius) - 0.75px); fill: none; stroke-width: 1.5px; vector-effect: non-scaling-stroke; } /* The divider: brightest in the middle, fading to nothing at both ends. */ .duet-divider { flex: none; height: 1px; background: linear-gradient(90deg, transparent, var(--duet-divider-side) 20%, var(--duet-divider) 50%, var(--duet-divider-side) 80%, transparent); transform-origin: var(--duet-origin, left) center; } .duet[dir="rtl"] .duet-divider, .duet-portal[dir="rtl"] .duet-divider { --duet-origin: right; } /* ── Window dots ───────────────────────────────────────────────────────────────────── */ .duet-dots { display: flex; flex: none; align-items: center; gap: 10px; height: 12px; margin-bottom: var(--duet-dots-mb); } .duet-dot { position: relative; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px var(--duet-ring); } .duet-dot[data-c="red"] { background: #ff6b7d; } .duet-dot[data-c="yellow"] { background: #ffd93d; } .duet-dot[data-c="green"] { background: #3ee37a; } /* A real button gets a 22 px hit area round its 12 px dot. */ button.duet-dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } button.duet-dot:focus-visible { box-shadow: inset 0 0 0 0.5px var(--duet-ring), 0 0 0 2px var(--duet-focus); } .duet-dot svg { width: 9px; height: 9px; color: rgb(60 8 16 / 0.72); opacity: 0; transition: opacity 120ms ease; } .duet-dot[data-c="yellow"] svg { color: rgb(90 60 0 / 0.72); } .duet-dot[data-c="green"] svg { color: rgb(0 70 26 / 0.72); } @media (hover: hover) and (pointer: fine) { .duet-dots:hover button.duet-dot svg { opacity: 1; } } .duet-dots:focus-within button.duet-dot svg { opacity: 1; } .duet-dot[aria-disabled="true"] { cursor: default; } /* ── The dock ──────────────────────────────────────────────────────────────────────── */ .duet-dock { --duet-radius: 25px; left: 0; width: var(--duet-dock-w); } .duet[data-edge="right"] .duet-dock { left: auto; right: 0; } .duet-dock-inner { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: var(--duet-pad) 0 var(--duet-pad); } .duet-mark-box { display: grid; flex: none; place-items: center; width: var(--duet-mark-box); height: var(--duet-mark-box); margin-bottom: var(--duet-mark-mb); } .duet-mark { position: relative; display: grid; place-items: center; width: var(--duet-mark); height: var(--duet-mark); border-radius: 18px; color: var(--duet-text-strong); background: var(--duet-tile); box-shadow: inset 0 1px var(--duet-tile-hi); transition: background-color 220ms var(--duet-ease), box-shadow 220ms var(--duet-ease); } .duet-mark[aria-expanded="true"] { background: light-dark(rgb(34 9 15 / 0.1), rgb(255 255 255 / 0.16)); } @media (hover: hover) and (pointer: fine) { .duet-mark:hover { background: light-dark(rgb(34 9 15 / 0.09), rgb(255 255 255 / 0.14)); } .duet-mark[aria-expanded="true"]:hover { background: light-dark(rgb(34 9 15 / 0.12), rgb(255 255 255 / 0.19)); } } .duet-mark:focus-visible { box-shadow: inset 0 1px var(--duet-tile-hi), 0 0 0 2px var(--duet-focus); } .duet-mark-svg { width: calc(var(--duet-mark) * 0.54); height: calc(var(--duet-mark) * 0.54); overflow: visible; transition: transform 90ms ease; } .duet-mark:active .duet-mark-svg { transform: scale(0.94); } .duet[data-edge="right"] .duet-mark-svg { scale: -1 1; } /* The mark turning around: one shape, the fill draining into a chevron at mid-turn. */ .duet-mark-turn { transform-box: view-box; transform-origin: 14.8px 15.4px; transition: transform 400ms var(--duet-spring-soft); } .duet-mark-svg[data-open] .duet-mark-turn { transform: rotate(180deg); } .duet-mark-tri { transition: opacity 90ms ease 50ms; } .duet-mark-chev { opacity: 0; transition: opacity 90ms ease 60ms; } .duet-mark-svg[data-open] .duet-mark-tri { opacity: 0; } .duet-mark-svg[data-open] .duet-mark-chev { opacity: 1; } .duet-custom-mark { position: relative; display: grid; place-items: center; width: calc(var(--duet-mark) * 0.54); height: calc(var(--duet-mark) * 0.54); } .duet-custom-mark > * { grid-area: 1 / 1; transition: opacity 160ms ease, transform 300ms var(--duet-spring-tile); } .duet-custom-mark-own { display: grid; place-items: center; width: 100%; height: 100%; } .duet-custom-mark-close { width: 70%; height: 70%; opacity: 0; transform: rotate(-90deg); } .duet-custom-mark[data-open] .duet-custom-mark-own { opacity: 0; transform: rotate(90deg); } .duet-custom-mark[data-open] .duet-custom-mark-close { opacity: 1; transform: none; } .duet-dock-line { flex: none; width: 48px; margin: var(--duet-line-m) 0; } .duet-dock-scroll { position: relative; display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; min-height: 0; width: 100%; overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain; } .duet-dock-scroll::-webkit-scrollbar { display: none; } .duet-dock-list { display: flex; flex-direction: column; align-items: center; gap: var(--duet-tile-gap); padding: 2px 0; } /* Scroll edges fade with a mask (never a gradient painted in a background colour). */ [data-scroll-fade] { --duet-fade-top: 0px; --duet-fade-bottom: 0px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--duet-fade-top), #000 calc(100% - var(--duet-fade-bottom)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--duet-fade-top), #000 calc(100% - var(--duet-fade-bottom)), transparent 100%); } [data-scroll-fade~="top"] { --duet-fade-top: 22px; } [data-scroll-fade~="bottom"] { --duet-fade-bottom: 22px; } .duet-tile { position: relative; display: grid; place-items: center; width: var(--duet-tile); height: var(--duet-tile); border-radius: 18px; color: var(--duet-glyph); touch-action: manipulation; } .duet-tile[aria-disabled="true"] { opacity: 0.45; cursor: default; } .duet-tile-ghost, .duet-tile-active { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .duet-tile-ghost { background: var(--duet-ghost); opacity: 0; transform: scale(0.92); transition: opacity 180ms ease, transform 410ms var(--duet-spring-tile); } @media (hover: hover) and (pointer: fine) { .duet-tile:not([aria-current]):not([aria-disabled="true"]):hover .duet-tile-ghost { opacity: 1; transform: scale(1); transition: opacity 120ms ease, transform 410ms var(--duet-spring-tile); } } .duet-dock-li[data-sym] .duet-tile:not([aria-current]) .duet-tile-ghost { opacity: 0.6; transform: scale(1); } .duet-tile-active { background: var(--duet-tile); box-shadow: inset 0 1px var(--duet-tile-hi), 0 8px 18px var(--duet-tile-shadow); } .duet-tile-glyph { position: relative; display: grid; place-items: center; transition: transform 260ms var(--duet-ease), color 200ms ease; } .duet-tile-glyph svg { width: 24px; height: 24px; } .duet-tile[aria-current] .duet-tile-glyph { color: var(--duet-text-strong); transform: scale(1.04); } .duet-tile:active .duet-tile-glyph { transform: scale(0.96); transition-duration: 90ms; } .duet-tile:focus-visible::after { content: ""; position: absolute; inset: 3px; border-radius: 15px; box-shadow: 0 0 0 2px var(--duet-focus); pointer-events: none; } /* The "new" dot, ringed in the glass colour so it reads on the icon. */ .duet-tile-dot { position: absolute; top: calc(50% - 15px); left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--duet-dot); box-shadow: 0 0 0 2px light-dark(rgb(246 226 230), rgb(92 20 32)), 0 0 8px light-dark(rgb(232 90 120 / 0.5), rgb(255 255 255 / 0.55)); } .duet-badge { position: absolute; top: calc(50% - 20px); left: calc(50% + 4px); display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--duet-solid); color: var(--duet-solid-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; overflow: hidden; } .duet-badge-roll { display: block; } .duet-dock-avatar { position: relative; flex: none; width: var(--duet-avatar); height: var(--duet-avatar); margin-top: auto; border-radius: 50%; } .duet-dock-avatar:focus-visible { box-shadow: 0 0 0 3px light-dark(#fff, #2a0a10), 0 0 0 5px var(--duet-focus); } /* ── Avatar (with the account-switch wipe) ─────────────────────────────────────────── */ .duet-avatar { position: relative; display: block; flex: none; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: light-dark(#ead6da, #3a1016); box-shadow: 0 0 0 1.5px var(--duet-avatar-ring); } .duet-avatar img, .duet-avatar-initials { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .duet-avatar-initials { display: grid; place-items: center; font-size: 0.4em; font-weight: 600; color: var(--duet-text-strong); } /* ── Indicator (white pill straddling the dock's outer edge) ───────────────────────── */ .duet-indicator { position: absolute; top: 0; left: -2px; width: 4px; height: 100%; pointer-events: none; } .duet[data-edge="right"] .duet-indicator { left: auto; right: -2px; } .duet-indicator-pill { position: absolute; inset: 0; background: var(--duet-indicator); will-change: clip-path; } .duet-indicator-halo { position: absolute; top: 0; left: -18px; width: 40px; height: 64px; border-radius: 50%; background: radial-gradient(closest-side, var(--duet-halo), rgb(255 255 255 / 0) 100%); will-change: transform, opacity; } /* ── Light bridge ──────────────────────────────────────────────────────────────────── */ .duet-bridge { position: absolute; left: 100%; width: var(--duet-gap); height: 1px; pointer-events: none; overflow: visible; } .duet[data-edge="right"] .duet-bridge { left: auto; right: 100%; transform: scaleX(-1); } .duet-bridge-streak { position: absolute; top: 0; left: -44px; width: 44px; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 1) 55%, rgb(255 255 255 / 0)); } .duet[data-duet-resolved="light"] .duet-bridge-streak { background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 1) 55%, rgb(255 255 255 / 0)); filter: none; } /* ── The panel ─────────────────────────────────────────────────────────────────────── */ .duet-panel { --duet-radius: 32px; left: calc(var(--duet-dock-w) + var(--duet-gap)); width: var(--duet-panel-w); z-index: 1; } .duet[data-edge="right"] .duet-panel { left: auto; right: calc(var(--duet-dock-w) + var(--duet-gap)); } .duet:not([data-pinned]) .duet-panel .duet-shadow, .duet[data-mode="compact"] .duet-panel .duet-shadow { box-shadow: 0 50px 100px -30px var(--duet-shadow-1), 0 18px 36px -14px var(--duet-shadow-2); } .duet-panel-inner { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--duet-pad) var(--duet-pad) var(--duet-pad-b); } .duet-panel-head { position: relative; flex: none; } .duet-panel-top { display: flex; align-items: center; justify-content: space-between; height: 12px; margin-bottom: var(--duet-dots-mb); } .duet-panel-top .duet-dots { margin: 0; } .duet:not([data-chrome]) .duet-panel-top { justify-content: flex-end; height: 32px; margin-bottom: 4px; } .duet-pin { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin: -10px -6px -10px 0; border-radius: 50%; color: var(--duet-glyph); background: var(--duet-tile); box-shadow: inset 0 1px var(--duet-tile-hi); transition: background-color 160ms ease; } .duet[dir="rtl"] .duet-pin { margin: -10px 0 -10px -6px; } .duet:not([data-chrome]) .duet-pin { margin: 0; } .duet-pin svg { width: 16px; height: 16px; transform: rotate(0deg); transition: transform 420ms var(--duet-spring-tile); } .duet-pin[aria-pressed="true"] { color: var(--duet-text-strong); background: light-dark(rgb(34 9 15 / 0.1), rgb(255 255 255 / 0.18)); } .duet-pin[aria-pressed="true"] svg { transform: rotate(-45deg); } @media (hover: hover) and (pointer: fine) { .duet-pin:hover { background: light-dark(rgb(34 9 15 / 0.1), rgb(255 255 255 / 0.15)); } } .duet-pin:focus-visible { box-shadow: inset 0 1px var(--duet-tile-hi), 0 0 0 2px var(--duet-focus); } .duet[data-mode="compact"] .duet-pin, .duet[data-mode="mobile"] .duet-pin { display: none; } .duet-wordmark { display: block; margin: 0 0 var(--duet-word-mb); padding: 0; overflow: hidden; font-size: var(--duet-word); font-weight: 800; line-height: 1.12; letter-spacing: 0.5px; color: var(--duet-text-strong); white-space: nowrap; text-overflow: ellipsis; } .duet-wordmark-line { display: block; } .duet-crumb { display: flex; align-items: center; gap: 2px; height: 24px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; line-height: 24px; text-transform: uppercase; color: var(--duet-muted); white-space: nowrap; } .duet-crumb-letters { display: inline-flex; } .duet-crumb-letter { display: inline-block; white-space: pre; } .duet-crumb-back { display: inline-flex; align-items: center; gap: 2px; height: 28px; margin-inline-start: -8px; padding: 0 8px 0 4px; border-radius: 10px; letter-spacing: inherit; text-transform: inherit; color: var(--duet-muted); transition: background-color 140ms ease, color 140ms ease; } .duet-crumb-back svg { width: 16px; height: 16px; } .duet[dir="rtl"] .duet-crumb-back svg, .duet[dir="rtl"] .duet-row-chevron svg, .duet[dir="rtl"] .duet-caret svg, .duet-portal[dir="rtl"] .duet-flip { scale: -1 1; } @media (hover: hover) and (pointer: fine) { .duet-crumb-back:hover { background: var(--duet-ghost); color: var(--duet-text-strong); } } .duet-crumb-back:focus-visible { box-shadow: 0 0 0 2px var(--duet-focus); } .duet-crumb-sep { opacity: 0.6; padding: 0 6px; } .duet-crumb-current { color: var(--duet-text-strong); } .duet-head-divider { margin: var(--duet-div-mt) 0 var(--duet-div-mb); } /* Search (optional) */ .duet-search { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 0 calc(var(--duet-word-mb) + 2px); padding: 0 8px 0 14px; border-radius: 16px; background: var(--duet-field); box-shadow: inset 0 0 0 1px var(--duet-field-border); color: var(--duet-glyph); transition: box-shadow 160ms ease; } .duet-search:focus-within { box-shadow: inset 0 0 0 1px var(--duet-field-border), 0 0 0 2px var(--duet-focus); } .duet-search > svg { flex: none; width: 18px; height: 18px; } .duet-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 500; color: var(--duet-text-strong); outline: none; } .duet-search input:focus-visible { outline: none; } .duet-search input::placeholder { color: var(--duet-muted); opacity: 1; } .duet-search input::-webkit-search-cancel-button { display: none; } .duet-kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--duet-kbd); box-shadow: inset 0 0 0 1px var(--duet-kbd-border); font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--duet-text); white-space: nowrap; } /* ── Panel body: rows ──────────────────────────────────────────────────────────────── */ .duet-panel-body { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 calc(var(--duet-pad) * -1); } .duet-page { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; } .duet-scroll { flex: 1 1 auto; min-height: 0; padding: 0 var(--duet-pad); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; } .duet-scroll::-webkit-scrollbar { width: 4px; } .duet-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } @media (hover: hover) and (pointer: fine) { .duet-scroll:hover { scrollbar-width: thin; scrollbar-color: light-dark(rgb(34 9 15 / 0.22), rgb(255 255 255 / 0.22)) transparent; } .duet-scroll:hover::-webkit-scrollbar-thumb { background: light-dark(rgb(34 9 15 / 0.22), rgb(255 255 255 / 0.22)); } } .duet-rows { position: relative; display: flex; flex-direction: column; padding-bottom: 8px; } .duet-row-list { display: flex; flex-direction: column; gap: var(--duet-row-gap); } .duet-rows-divider { margin: var(--duet-div-mt) 0 var(--duet-div-mb); } .duet-ghost { position: absolute; top: 0; left: 0; right: 0; height: var(--duet-row); border-radius: 18px; background: var(--duet-ghost); pointer-events: none; opacity: 0; will-change: transform, opacity; } .duet-row-li { position: relative; } .duet-row { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; height: var(--duet-row); padding: 0 18px; border-radius: 18px; color: var(--duet-text); font-size: 16.5px; font-weight: 500; line-height: 1.2; text-align: start; touch-action: manipulation; } .duet-row[aria-disabled="true"] { opacity: 0.45; cursor: default; } .duet-row-tile { position: absolute; inset: 0; border-radius: inherit; background: var(--duet-tile); box-shadow: inset 0 1px var(--duet-tile-hi), 0 8px 18px var(--duet-tile-shadow); pointer-events: none; } .duet-row-content { position: relative; display: flex; flex: 1; align-items: center; gap: 18px; min-width: 0; height: 100%; transition: transform 260ms var(--duet-ease); } .duet-row:active .duet-row-content { transform: scale(0.96); transition-duration: 90ms; } .duet-row-glyph { display: grid; flex: none; place-items: center; color: var(--duet-glyph); transition: transform 260ms var(--duet-ease); } .duet-row-glyph svg { width: 22px; height: 22px; } .duet-row[aria-current] { color: var(--duet-text-strong); } .duet-row[aria-current] .duet-row-glyph { color: var(--duet-text-strong); transform: scale(1.04); } .duet-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duet-row[aria-current] .duet-row-label { font-weight: 600; } .duet-row-end { display: flex; flex: none; align-items: center; gap: 10px; } .duet-row-dot { width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--duet-dot); box-shadow: 0 0 9px 1px light-dark(rgb(232 90 120 / 0.45), rgb(255 255 255 / 0.6)); } .duet-row-badge { position: static; } .duet-row-chevron { position: absolute; top: 50%; right: 16px; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; color: var(--duet-text-strong); transition: transform 300ms var(--duet-spring-tile); } .duet[dir="rtl"] .duet-row-chevron { right: auto; left: 16px; } .duet-row-chevron svg { width: 18px; height: 18px; } @media (hover: hover) and (pointer: fine) { .duet-row:hover .duet-row-chevron { transform: translateX(2px); } .duet[dir="rtl"] .duet-row:hover .duet-row-chevron { transform: translateX(-2px); } } .duet-row[aria-current] .duet-row-end { margin-inline-end: 26px; } .duet-row:focus-visible::after, .duet-channel:focus-visible::after, .duet-profile:focus-visible::after, .duet-option:focus-visible::after { content: ""; position: absolute; inset: 3px; border-radius: 16px; box-shadow: 0 0 0 2px var(--duet-focus); pointer-events: none; } /* The Subscriptions caret: shows on hover or focus, turns a quarter when the list is open. */ .duet-caret { display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -6px -4px 0; border-radius: 9px; color: var(--duet-muted); opacity: 0; transition: opacity 160ms ease, background-color 140ms ease; } .duet-caret svg { width: 16px; height: 16px; transition: transform 340ms var(--duet-spring-tile); } .duet-row[aria-expanded="true"] .duet-caret svg { transform: rotate(90deg); } .duet[dir="rtl"] .duet-row[aria-expanded="true"] .duet-caret svg { transform: rotate(-90deg); } .duet-row:focus-visible .duet-caret, .duet-row[aria-expanded="true"] .duet-caret { opacity: 1; } @media (hover: hover) and (pointer: fine) { .duet-row:hover .duet-caret { opacity: 1; } .duet-caret:hover { background: var(--duet-ghost); color: var(--duet-text-strong); } } /* Channels */ .duet-channels { overflow: hidden; } .duet-channels-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 4px 34px; } .duet[dir="rtl"] .duet-channels-list { padding: 6px 34px 4px 0; } .duet-channel { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: 14px; font-size: 14px; font-weight: 500; color: var(--duet-text); text-align: start; transition: background-color 140ms ease; } @media (hover: hover) and (pointer: fine) { .duet-channel:hover { background: var(--duet-ghost); color: var(--duet-text-strong); } } .duet-channel-avatar { width: 26px; height: 26px; } .duet-channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duet-live { flex: none; padding: 3px 6px 2px; border-radius: 5px; background: var(--duet-live); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .duet-fresh { flex: none; width: 6px; height: 6px; margin-inline-end: 4px; border-radius: 50%; background: var(--duet-dot); } .duet-channel-all { color: var(--duet-muted); font-weight: 600; } /* Footer: the profile row */ .duet-panel-foot { flex: none; } .duet-foot-divider { margin: var(--duet-div-mt) 0 var(--duet-div-mb); } .duet-profile { position: relative; display: flex; align-items: center; gap: 14px; width: calc(100% + 16px); height: var(--duet-profile); margin: 0 -8px; padding: 0 14px 0 8px; border-radius: 20px; text-align: start; transition: background-color 160ms ease; } .duet[dir="rtl"] .duet-profile { padding: 0 8px 0 14px; } @media (hover: hover) and (pointer: fine) { .duet-profile:hover { background: var(--duet-ghost); } } .duet-profile[aria-expanded="true"] { background: var(--duet-ghost); } .duet-profile-avatar { width: calc(var(--duet-profile) * 0.72); height: calc(var(--duet-profile) * 0.72); } .duet-profile-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; } .duet-profile-name { position: relative; display: block; height: 1.25em; overflow: hidden; font-size: 16.5px; font-weight: 600; line-height: 1.25; color: var(--duet-text-strong); } .duet-profile-name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duet-profile-plan { overflow: hidden; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--duet-muted); text-overflow: ellipsis; white-space: nowrap; } .duet-profile-chevron { display: grid; flex: none; place-items: center; color: var(--duet-text-strong); } .duet-profile-chevron svg { width: 18px; height: 18px; } .duet[dir="rtl"] .duet-profile-chevron svg { scale: -1 1; } /* Views (Settings, Help) */ .duet-view { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; } .duet-view-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--duet-muted); } .duet-view-title:focus { outline: none; } .duet-section { display: flex; flex-direction: column; gap: 10px; } .duet-section-label { font-size: 13px; font-weight: 600; color: var(--duet-muted); } .duet-setting { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 4px; } .duet-setting-glyph { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--duet-tile); color: var(--duet-glyph); } .duet-setting-glyph svg { width: 18px; height: 18px; } .duet-setting-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .duet-setting-label { font-size: 15px; font-weight: 500; color: var(--duet-text-strong); } .duet-setting-hint { font-size: 12.5px; color: var(--duet-muted); } /* Switch */ .duet-switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: light-dark(rgb(34 9 15 / 0.14), rgb(255 255 255 / 0.16)); box-shadow: inset 0 0 0 1px light-dark(rgb(34 9 15 / 0.06), rgb(255 255 255 / 0.08)); transition: background-color 200ms ease; } .duet-switch[aria-checked="true"] { background: var(--duet-solid); } .duet-switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: light-dark(#fff, #fff); box-shadow: 0 2px 6px rgb(0 0 0 / 0.25); transition: transform 410ms var(--duet-spring-tile), background-color 200ms ease; } .duet-switch[aria-checked="true"] .duet-switch-thumb { transform: translateX(18px); background: var(--duet-solid-ink); } .duet[dir="rtl"] .duet-switch-thumb, .duet-portal[dir="rtl"] .duet-switch-thumb { left: auto; right: 3px; } .duet[dir="rtl"] .duet-switch[aria-checked="true"] .duet-switch-thumb, .duet-portal[dir="rtl"] .duet-switch[aria-checked="true"] .duet-switch-thumb { transform: translateX(-18px); } .duet-switch:focus-visible { box-shadow: 0 0 0 2px var(--duet-focus); } /* Segmented */ .duet-segmented { position: relative; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: 4px; border-radius: 16px; background: var(--duet-field); box-shadow: inset 0 0 0 1px var(--duet-field-border); } .duet-segment { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--duet-text); } .duet-segment svg { width: 16px; height: 16px; } .duet-segment[aria-checked="true"] { color: var(--duet-text-strong); } .duet-segment:focus-visible { box-shadow: 0 0 0 2px var(--duet-focus); } .duet-segment-pill { position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--duet-tile); box-shadow: inset 0 1px var(--duet-tile-hi), 0 6px 14px var(--duet-tile-shadow); } /* Swatches */ .duet-swatches { display: flex; gap: 12px; } .duet-swatch { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--duet-swatch); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28), 0 4px 10px rgb(0 0 0 / 0.2); transition: transform 300ms var(--duet-spring-tile); } .duet-swatch[data-clear] { background: linear-gradient(135deg, transparent calc(50% - 1px), light-dark(rgb(34 9 15 / 0.4), rgb(255 255 255 / 0.55)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.12)); } .duet-swatch::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--duet-solid); opacity: 0; transform: scale(0.85); transition: opacity 160ms ease, transform 300ms var(--duet-spring-tile); } .duet-swatch[aria-checked="true"]::after { opacity: 1; transform: scale(1); } @media (hover: hover) and (pointer: fine) { .duet-swatch:hover { transform: scale(1.08); } } .duet-swatch:focus-visible::after { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px var(--duet-focus); } /* Select (a themed listbox, never a native setQ(e.target.value)} placeholder={config.placeholder ?? ctx.labels.searchPlaceholder(ctx.brand.name)} aria-label={ctx.labels.searchLabel} enterKeyHint="search" onKeyDown={(e) => { if (e.key === "Escape" && q) { // First Esc clears, the next one closes. e.preventDefault(); e.stopPropagation(); setQ(""); } }} /> ); } /** The list of rows: one tab stop, ↑/↓ inside, ← back to the dock, → opens a row's channels. */ function MenuPage({ entrance: entranceProp, offset, onMounted }: { entrance: boolean; offset: number; onMounted: (v: boolean) => void }) { const ctx = useDuet(); const { dom, primary, secondary, bus, value } = ctx; const [entrance] = React.useState(entranceProp); React.useEffect(() => onMounted(true), [onMounted]); const list = dom.getter("panelList"); useScrollFade(list, [ctx.expanded]); const ghostY = useMotionValue(0); const ghostO = useMotionValue(0); const ghostAnims = React.useRef([]); React.useEffect(() => { const ghost = (id: string | null, strength: number) => { ghostAnims.current.forEach((a) => a.stop()); const el = id && id !== bus.active() ? bus.rowEl(id) : null; if (!el) { ghostAnims.current = [animate(ghostO, 0, { duration: 0.18, ease: "easeOut" })]; return; } const y = el.offsetTop; const visible = ghostO.get() > 0.05; if (!visible || ctx.reduced) ghostY.set(y); ghostAnims.current = [ ...(visible && !ctx.reduced ? [animate(ghostY, y, GHOST)] : []), animate(ghostO, strength, { duration: 0.12, ease: "easeOut" }), ]; }; bus.setGhost(ghost); const running = ghostAnims; return () => { bus.clearGhost(ghost); running.current.forEach((a) => a.stop()); }; }, [bus, ghostY, ghostO, ctx.reduced]); // Never over the active tile: when the selection lands on the hovered row, the ghost steps aside. React.useEffect(() => { bus.ghost(null, 0); }, [value, bus]); const roving = useRovingFocus(list, { dir: ctx.edge === "left" ? "ltr" : "rtl", onForward: (el) => { const id = el.dataset.duetId; const item = ctx.items.find((i) => i.id === id); if (item?.channels?.length && ctx.expanded !== id) { ctx.setExpanded(item.id); return true; } return false; }, onBackward: (el) => { const id = el.dataset.duetId; const channelOf = el.dataset.duetChannelOf; if (channelOf) { ctx.setExpanded(null); focusItem(list(), channelOf); return true; } if (id && ctx.expanded === id) { ctx.setExpanded(null); return true; } if (ctx.mode === "mobile") return false; return focusItem(dom.get("dockList"), id && bus.hasDock(id) ? id : value); }, }); // Where focus goes once the panel has opened. useIsoLayoutEffect(() => { // Taken inside the frame, so React's dev double effects (run, clean up, run) still move focus once. const raf = requestAnimationFrame(() => { const want = dom.takeFocus((v) => v !== "view"); if (!want) return; if (want === "search") dom.get("search")?.focus(); else focusItem(dom.get("panelList"), want.startsWith("row:") ? want.slice(4) : bus.active()); }); return () => cancelAnimationFrame(raf); }, [dom, bus]); const stop = value && ctx.items.some((i) => i.id === value) ? value : primary[0]?.id; const sign = ctx.edge === "left" ? 1 : -1; return (

{ bus.ghost(null, 0); bus.fromPanel(null); }} >

); } function Row({ item, stop, entrance, index }: { item: DuetItem; stop: boolean; entrance: boolean; index: number }) { const ctx = useDuet(); const { bus, labels } = ctx; const active = item.id === ctx.value && !item.view && !item.action; const dot = ctx.dotVisible(item); const hasChannels = !!item.channels?.length; const expanded = hasChannels && ctx.expanded === item.id; const Icon = item.icon; const listId = `${ctx.ids.base}-channels-${item.id}`; const liRef = (el: HTMLLIElement | null) => { bus.register("rows", item.id, el); }; const onClick = (e: React.MouseEvent) => { if (item.disabled) { e.preventDefault(); return; } if (item.view || item.action) e.preventDefault(); if (item.action === "logout") preloadLayers(); ctx.select(item.id, ctx.mode === "mobile" ? "sheet" : "panel", e.currentTarget as HTMLElement); }; const content = ( <> {active ? ( ctx.reduced ? ( ) : ( ) ) : null} {item.label} {item.badge ? : null} {dot ? ( {hasChannels ? ( ) : null} ); const fresh = ctx.freshCount(item); const common = { className: "duet-row", "data-roving": "", "data-duet-id": item.id, tabIndex: stop ? 0 : -1, "aria-disabled": item.disabled ? (true as const) : undefined, "aria-expanded": hasChannels ? expanded : undefined, "aria-controls": hasChannels && expanded ? listId : undefined, "aria-haspopup": item.action === "logout" ? ("dialog" as const) : undefined, "aria-describedby": undefined, }; const srExtra = dot && fresh ? , {labels.freshShort(fresh)} : null; const el = item.href && !item.view && !item.action ? ( ctx.renderLink({ ...common, href: item.href, "aria-current": active ? "page" : undefined, onClick, children: ( <> {content} {srExtra} ), }) ) : ( ); const body = (

{ if (e.pointerType !== "mouse") return; bus.ghost(item.id, 1); bus.fromPanel(item.id); }} > {el} {hasChannels ? : null}

); if (!entrance) return body; return ( { if (e.pointerType !== "mouse") return; bus.ghost(item.id, 1); bus.fromPanel(item.id); }} > {el} {hasChannels ? : null} ); } /** The account row closing the panel: it opens the account popover upward. */ function ProfileRow({ from }: { from: "panel" | "sheet" }) { const ctx = useDuet(); const account = ctx.account!; const open = ctx.accountFrom === from; return ( ); } 79:T2a23,"use client"; import { animate, AnimatePresence, motion, useMotionValue, usePresence, useTransform } from "motion/react"; import * as React from "react"; import { BrandMark, CustomMark } from "../brand-mark"; import { useDuet } from "../context"; import { Slab } from "../glass"; import { useIsoLayoutEffect, useNode } from "../hooks/use-controllable"; import { useRovingFocus } from "../hooks/use-roving-focus"; import { Indicator } from "../indicator"; import { MenuContent } from "../menu"; import { preloadImages, preloadLayers } from "../parts"; import { SHEET, TILE } from "../springs"; import type { DuetItem } from "../types"; /** On a phone the duet becomes a floating bottom dock with the mark raised in its middle, and a bottom sheet. */ export default function Mobile() { const ctx = useDuet(); return ( <> {ctx.open ? : null} ); } function BottomDock() { const ctx = useDuet(); const { bus, value } = ctx; const [dockEl, setDockEl] = useNode(); const [rowEl, setRowEl] = useNode(); const items = ctx.primary.slice(0, 4); const left = items.slice(0, 2); const right = items.slice(2); const roving = useRovingFocus(rowEl, { orientation: "horizontal", dir: ctx.dir }); const stop = value && items.some((i) => i.id === value) ? value : items[0]?.id; return ( bus.dockEl(value)} value={value} reduced={ctx.reduced} className="duet-bottom-indicator" /> } >

{left.map((item) => ( ))}

); } function MarkButton() { const ctx = useDuet(); const { open, labels, brand, dom } = ctx; return ( ); } function BottomItem({ item, stop }: { item: DuetItem; stop: boolean }) { const ctx = useDuet(); const { bus } = ctx; const active = item.id === ctx.value; const dot = ctx.dotVisible(item); const Icon = item.icon; const register = (el: HTMLElement | null) => { bus.register("dock", item.id, el); }; const fresh = ctx.freshCount(item); const label = [item.label, dot && fresh ? ctx.labels.freshShort(fresh) : null].filter(Boolean).join(", "); const content = ( {active ? ( ); const common = { className: "duet-bottom-item", "data-roving": "", "data-duet-id": item.id, tabIndex: stop ? 0 : -1, "aria-label": label, onClick: (e: React.MouseEvent) => { if (item.view || item.action) e.preventDefault(); ctx.select(item.id, "bottom", e.currentTarget as HTMLElement); }, }; return item.href && !item.view && !item.action ? ( <>{ctx.renderLink({ ...common, href: item.href, "aria-current": active ? "page" : undefined, children: content })} ) : ( ); } const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; /** * The menu as a bottom sheet: snaps at 62 % and 94 % of the height, a drag handle, drag down to close (past 30 % or * faster than 600 px/s). Focus stays inside and the page behind does not scroll while it is open. */ function Sheet() { const ctx = useDuet(); const { dom, labels, reduced } = ctx; const [isPresent, safeToRemove] = usePresence(); const y = useMotionValue(4000); const anim = React.useRef | null>(null); const height = useMotionValue(1); const scrimOpacity = useTransform(() => Math.max(0, Math.min(1, 1 - y.get() / height.get()))); const stops = () => { const box = dom.get("root")?.clientHeight ?? window.innerHeight; const sheet = box * 0.94; height.set(sheet); return { full: 0, half: sheet - box * 0.62, closed: sheet }; }; const to = (target: number, velocity = 0) => { anim.current?.stop(); anim.current = reduced ? animate(y, target, { duration: 0 }) : animate(y, target, { ...SHEET, velocity }); return anim.current; }; useIsoLayoutEffect(() => { const s = stops(); y.set(s.closed); to(s.half); return () => anim.current?.stop(); }, []); React.useEffect(() => { if (isPresent) return; const s = stops(); const a = to(s.closed); a.then(() => safeToRemove?.()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isPresent]); // Keep the page still behind the sheet. React.useEffect(() => { const html = document.documentElement; const previous = html.style.overflow; html.style.overflow = "hidden"; let scroller: HTMLElement | null = dom.get("root")?.parentElement ?? null; while (scroller && scroller !== document.body && !/(auto|scroll)/.test(getComputedStyle(scroller).overflowY)) scroller = scroller.parentElement; const own = scroller && scroller !== document.body ? scroller : null; const ownPrevious = own?.style.overflow ?? ""; if (own) own.style.overflow = "hidden"; return () => { html.style.overflow = previous; if (own) own.style.overflow = ownPrevious; }; }, [dom]); // Drag from the handle or the header. const drag = React.useRef<{ id: number; start: number; from: number; samples: [number, number][] } | null>(null); const onPointerDown = (e: React.PointerEvent) => { const t = e.target as HTMLElement; if (!t.closest(".duet-handle, .duet-panel-head") || t.closest("button, a, input")) return; anim.current?.stop(); drag.current = { id: e.pointerId, start: e.clientY, from: y.get(), samples: [[e.timeStamp, e.clientY]] }; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }; const onPointerMove = (e: React.PointerEvent) => { const d = drag.current; if (!d || d.id !== e.pointerId) return; let next = d.from + (e.clientY - d.start); if (next < 0) next = next / 3; // resist above the top stop y.set(next); d.samples.push([e.timeStamp, e.clientY]); if (d.samples.length > 6) d.samples.shift(); }; const onPointerUp = (e: React.PointerEvent) => { const d = drag.current; if (!d || d.id !== e.pointerId) return; drag.current = null; const [t0, y0] = d.samples[0]; const [t1, y1] = d.samples[d.samples.length - 1]; const v = t1 > t0 ? ((y1 - y0) / (t1 - t0)) * 1000 : 0; const s = stops(); const current = y.get(); if (v > 600 || current > s.closed * 0.3 + s.half * 0.7) { ctx.setOpen(false, { focus: "logo" }); return; } const target = v < -400 ? s.full : v > 400 ? s.half : Math.abs(current - s.full) < Math.abs(current - s.half) ? s.full : s.half; to(target, v); }; const onKeyDown = (e: React.KeyboardEvent) => { const sheet = dom.get("panel"); if (e.key !== "Tab" || !sheet) return; const items = [...sheet.querySelectorAll(FOCUSABLE)].filter((el) => el.getClientRects().length > 0); if (!items.length) return; const first = items[0]; const last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; return ( <> ctx.setOpen(false, { focus: "logo" })} /> ); } 7a:T107a,"use client"; import { animate, motion, useMotionValue, usePresence, useTransform, type AnimationPlaybackControls } from "motion/react"; import * as React from "react"; import { useDuet } from "./context"; import { Slab } from "./glass"; import { useIsoLayoutEffect } from "./hooks/use-controllable"; import { useSheen } from "./hooks/use-sheen"; import { MenuContent } from "./menu"; import { FOLD, UNFURL } from "./springs"; const clamp = (v: number) => Math.min(1, Math.max(0, v)); /** * The wide slab beside the dock. It unfurls from the corner nearest the brand mark (a clip that grows, the glass * fading in over the first 40 %, an 18 px slide) and folds back the same way, with the content fading first. */ export function Panel() { const ctx = useDuet(); const { dom, edge, reduced } = ctx; const [isPresent, safeToRemove] = usePresence(); // An open that the user asked for unfurls; a panel that is simply there on load (pinned, defaultOpen) does not. const [entrance] = React.useState(() => ctx.openCount > 0); const animated = entrance && !reduced; const reveal = useMotionValue(animated ? 0 : 1); const fade = useMotionValue(entrance && reduced ? 0 : 1); const sign = edge === "left" ? 1 : -1; const x = useMotionValue(animated ? -18 * sign : 0); const scaleX = useMotionValue(1); const contentOpacity = useMotionValue(1); const contentY = useMotionValue(0); const clip = useTransform(() => { const r = clamp(reveal.get()); if (r >= 1) return "none"; const p = `${((1 - r) * 100).toFixed(3)}%`; return edge === "left" ? `inset(0 ${p} ${p} 0 round 32px)` : `inset(0 0 ${p} ${p} round 32px)`; }); const glassOpacity = useTransform(() => clamp(reveal.get() / 0.4) * fade.get()); const shadowOpacity = useTransform(() => clamp((reveal.get() - 0.5) / 0.5) * fade.get()); const bodyOpacity = useTransform(() => contentOpacity.get() * fade.get()); const sheen = useSheen(dom.getter("panel"), ctx.fine && !reduced); const anims = React.useRef([]); useIsoLayoutEffect(() => { if (!entrance) return; if (reduced) { anims.current = [animate(fade, 1, { duration: 0.16, ease: "easeOut" })]; } else { anims.current = [animate(reveal, 1, UNFURL), animate(x, 0, UNFURL)]; } return () => anims.current.forEach((a) => a.stop()); }, []); React.useEffect(() => { if (isPresent) return; anims.current.forEach((a) => a.stop()); let done = false; const finish = () => { if (done) return; done = true; safeToRemove?.(); }; if (reduced) { const a = animate(fade, 0, { duration: 0.16, ease: "easeIn" }); a.then(finish); return () => a.stop(); } const squash = dom.squash(); const list: AnimationPlaybackControls[] = [ animate(contentOpacity, 0, { duration: 0.12, ease: "easeIn" }), animate(contentY, 6, { duration: 0.12, ease: "easeIn" }), ]; const timer = window.setTimeout(() => { list.push(animate(reveal, 0, FOLD), animate(x, -12 * sign, FOLD)); if (squash) list.push(animate(scaleX, 0.96, FOLD)); }, 60); const unsub = reveal.on("change", (r) => { if (r <= 0.012) finish(); }); const fallback = window.setTimeout(finish, 700); return () => { window.clearTimeout(timer); window.clearTimeout(fallback); unsub(); list.forEach((a) => a.stop()); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [isPresent]); return ( ); } 7b:T1572,"use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useDuet } from "./context"; import { Close, Expand, Minus } from "./marks"; /** Window dots in macOS order. On the panel they are real buttons: close, minimise (a fold with a squash), pin. */ export function Dots({ interactive = false }: { interactive?: boolean }) { const ctx = useDuet(); if (!interactive) { return ( ); } const { labels } = ctx; return (

); } /** A round photo with an initials fallback. Changing `src` wipes the new face in with a circle. */ export function Avatar({ src, name, className, eager }: { src: string; name: string; className?: string; eager?: boolean }) { const ctx = useDuet(); const [failed, setFailed] = React.useState(null); const initials = name .split(/\s+/) .slice(0, 2) .map((w) => w[0]?.toUpperCase() ?? "") .join(""); return ( {failed === src ? ( {initials} ) : ( // eslint-disable-next-line @next/next/no-img-element

setFailed(src)} /> )} ); } /** Text that rolls up when it changes (the account name on a switch). */ export function Roll({ text }: { text: string }) { const { reduced } = useDuet(); return ( {text} ); } /** A count that rolls its digits (99+ above 99). */ export function Badge({ count, className = "duet-badge" }: { count: number; className?: string }) { const { reduced } = useDuet(); const text = count > 99 ? "99+" : String(count); // The previous count, kept in state (adjusted during render): it decides which way the digits roll. const [prev, setPrev] = React.useState(count); const [up, setUp] = React.useState(true); if (count !== prev) { setPrev(count); setUp(count >= prev); } return ( ); } /** Loads images ahead of need (the panel's avatars on logo hover intent). */ const preloaded = new Set(); export function preloadImages(srcs: (string | undefined)[]) { for (const src of srcs) { if (!src || preloaded.has(src)) continue; preloaded.add(src); const img = new Image(); img.decoding = "async"; img.src = src; } } /** Warms the lazily loaded parts (the panel, account popover, sign-out confirm) on hover intent, so they open at once. */ export function preloadLayers() { void import("./panel"); void import("./popovers/account-popover"); void import("./popovers/logout-confirm"); } 7c:T1684,"use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useDuet } from "../context"; import { Crown, Receipt, SignOut, UserCircle, UserSwitch } from "../glyphs"; import { ChevronRight } from "../marks"; import { Avatar, Roll } from "../parts"; import { Popover } from "./popover"; /** * The account popover, from the panel's profile row (upward) or the dock's avatar (beside it): the photo, name and * handle, the plan chip with one slow shimmer as it opens, the renewal date, and Your channel, Switch account (inline), * Purchases & memberships and Sign out. */ export default function AccountPopover() { const ctx = useDuet(); const account = ctx.account!; const from = ctx.accountFrom; const [switching, setSwitching] = React.useState(false); const titleId = `${ctx.ids.base}-account-title`; const dom = ctx.dom; const trigger = () => dom.get(from === "dock" ? "avatar" : "profile"); const placement = from === "dock" ? (ctx.edge === "left" ? "right-end" : "left-end") : "top-start"; const others = account.others ?? []; const optionClass = "duet-option"; const link = (href: string | undefined, children: React.ReactNode, icon: React.ReactNode) => href ? ( ctx.renderLink({ className: optionClass, href, tabIndex: 0, onClick: () => ctx.closeAccount(), children: <>{icon}{children} }) ) : ( ); return ( dom.get("dock"), edge: ctx.edge } : undefined} placement={placement} offset={from === "dock" ? 12 : 10} className="duet-account" dialog labelledBy={titleId} ignore={[trigger]} returnFocus={trigger} onClose={() => ctx.closeAccount()} >

{account.handle ?

{account.handle}

: null} {account.plan ? (

{account.plan} {ctx.reduced ? null : ( {account.renews ? {ctx.labels.renews(account.renews)} : null}

) : null}

{link(account.href, {ctx.labels.yourChannel}, )} {others.length ? ( <> {switching ? (

{others.map((o) => ( ))}

) : null} ) : null} {link(account.purchasesHref, {ctx.labels.purchases}, )}

); } 7d:Tdd5,"use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useDuet } from "../context"; import { Check } from "../marks"; import { Popover } from "./popover"; /** * "Sign out of Playtide?" anchored to whatever asked (the Log out row or icon, or the account popover's trigger). * A promise from `onLogout` shows a spinner, then a check; Cancel puts focus back where it was. */ export default function LogoutConfirm() { const ctx = useDuet(); const confirm = ctx.confirm!; const [phase, setPhase] = React.useState<"ask" | "busy" | "done">("ask"); const cancelRef = React.useRef(null); const titleId = `${ctx.ids.base}-signout-title`; const placement = confirm.from === "dock" ? (ctx.edge === "left" ? "right" : "left") : ctx.mode === "mobile" ? "top" : "top-start"; const timer = React.useRef(undefined); React.useEffect(() => () => window.clearTimeout(timer.current), []); const signOut = async () => { if (phase !== "ask") return; setPhase("busy"); try { await ctx.logout(); setPhase("done"); ctx.announce(ctx.labels.signedOut); timer.current = window.setTimeout(() => ctx.closeConfirm(), 700); } catch { setPhase("ask"); } }; return ( ctx.dom.get("dock"), edge: ctx.edge } : undefined} placement={placement} offset={confirm.from === "dock" ? 12 : 10} className="duet-confirm" dialog role="alertdialog" labelledBy={titleId} initialFocus={cancelRef} returnFocus={confirm.anchor} onClose={() => phase !== "busy" && ctx.closeConfirm()} >

{ctx.labels.signOutTitle(ctx.brand.name)}

{ctx.labels.signOutBody}

); } 7e:T1d2c,"use client"; import { autoUpdate, flip, offset as offsetMw, shift, useFloating, type Placement, type VirtualElement } from "@floating-ui/react-dom"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useLatest } from "../hooks/use-controllable"; import { POP } from "../springs"; import { DuetPortal } from "./portal"; export type ElementSource = () => HTMLElement | null | undefined; const EMPTY = { x: 0, y: 0, top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }; /** An element as an anchor, read only when the layer is placed (never while rendering). */ /** * A zero-width anchor on the dock's outer edge, level with an item in it: layers opened from the dock sit just past * the glass (like the tooltips), not on top of it. */ export function besideDock(dock: ElementSource, el: ElementSource, edge: "left" | "right"): VirtualElement { return { get contextElement() { return el() ?? undefined; }, getBoundingClientRect() { const d = dock(); const node = el(); if (!d || !node) return EMPTY; const dr = d.getBoundingClientRect(); const r = node.getBoundingClientRect(); const x = edge === "left" ? dr.right : dr.left; return { x, y: r.top, top: r.top, bottom: r.bottom, left: x, right: x, width: 0, height: r.height }; }, }; } export function elementAnchor(el: ElementSource): VirtualElement { return { get contextElement() { return el() ?? undefined; }, getBoundingClientRect() { return el()?.getBoundingClientRect() ?? EMPTY; }, }; } const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; type PopoverProps = { open: boolean; /** The element the layer is anchored to, read when it is placed (never while rendering). */ anchor: ElementSource; /** Place it beside the dock's outer edge (level with `anchor`) instead of beside `anchor` itself. */ dock?: { el: ElementSource; edge: "left" | "right" }; placement: Placement; offset?: number; className?: string; onClose: (reason: "escape" | "outside") => void; /** Elements whose clicks don't count as "outside" (the trigger). */ ignore?: ElementSource[]; /** Dialog semantics: focus moves in, Tab stays inside, focus returns on close. */ dialog?: boolean; role?: "dialog" | "listbox" | "alertdialog"; label?: string; labelledBy?: string; initialFocus?: React.RefObject; returnFocus?: ElementSource; id?: string; children: React.ReactNode; boxProps?: React.HTMLAttributes; }; function Floating({ anchor, dock, placement, offset = 12, className, onClose, ignore, dialog, role, label, labelledBy, initialFocus, returnFocus, id, children, boxProps, }: Omit) { const latestAnchor = useLatest({ anchor, dock }); const [reference] = React.useState(() => { const el = () => latestAnchor.current.anchor(); const d = latestAnchor.current.dock; return d ? besideDock(() => latestAnchor.current.dock?.el(), el, d.edge) : elementAnchor(el); }); const { refs, floatingStyles, placement: final } = useFloating({ placement, strategy: "fixed", elements: { reference }, middleware: [offsetMw(offset), flip({ padding: 12 }), shift({ padding: 12 })], whileElementsMounted: autoUpdate, }); const boxRef = React.useRef(null); const setFloating = refs.setFloating; const setRef = React.useCallback( (node: HTMLDivElement | null) => { boxRef.current = node; setFloating(node); }, [setFloating], ); const onCloseRef = useLatest(onClose); const ignoreRef = useLatest(ignore); React.useEffect(() => { const onPointer = (e: PointerEvent) => { const t = e.target as Node; if (boxRef.current?.contains(t)) return; if (ignoreRef.current?.some((get) => get()?.contains(t))) return; onCloseRef.current("outside"); }; // Capture: the popover answers Esc before the sidebar does (which would go back or close the panel). const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); e.stopPropagation(); onCloseRef.current("escape"); } }; document.addEventListener("pointerdown", onPointer, true); document.addEventListener("keydown", onKey, true); return () => { document.removeEventListener("pointerdown", onPointer, true); document.removeEventListener("keydown", onKey, true); }; }, [onCloseRef, ignoreRef]); React.useEffect(() => { if (!dialog) return; const box = boxRef.current; const ret = returnFocus?.() ?? (document.activeElement as HTMLElement | null); const raf = requestAnimationFrame(() => { const target = initialFocus?.current ?? box?.querySelector(FOCUSABLE) ?? box; target?.focus({ preventScroll: true }); }); return () => { cancelAnimationFrame(raf); const active = document.activeElement; // Take focus back only if it was inside (or got lost): never steal it from where the user went. if (!active || active === document.body || box?.contains(active)) ret?.focus({ preventScroll: true }); }; }, [dialog, initialFocus, returnFocus]); const onKeyDown = (e: React.KeyboardEvent) => { if (!dialog || e.key !== "Tab" || !boxRef.current) return; const items = [...boxRef.current.querySelectorAll(FOCUSABLE)].filter((el) => el.getClientRects().length > 0); if (items.length === 0) return; const first = items[0]; const last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; const side = final.split("-")[0]; const dx = side === "right" ? -8 : side === "left" ? 8 : 0; const dy = side === "bottom" ? -6 : side === "top" ? 6 : 0; const origin = side === "right" ? "left center" : side === "left" ? "right center" : side === "bottom" ? "top center" : "bottom center"; return (

{children}

); } /** A glass layer anchored to an element: outside clicks and Esc close it; as a dialog it holds and returns focus. */ export function Popover({ open, ...rest }: PopoverProps) { return ( {open ? : null} ); } 7f:Tf70,"use client"; import { animate, motion, useMotionValue, useTransform, type AnimationPlaybackControls } from "motion/react"; import * as React from "react"; import { useDuet, type TooltipApi } from "../context"; import { POP } from "../springs"; import { DuetPortal } from "./portal"; const FIRST_DELAY = 300; const COOL_DOWN = 600; /** * The dock's tooltips while the panel is closed: one glass pill beside the dock, centred on the icon, with the label * and its shortcut. 300 ms before the first, then instant while the pointer moves between icons; 600 ms after leaving * it cools down again. Text, position and fade are written straight to the DOM: hovering never renders React. */ export function Tooltip() { const ctx = useDuet(); const { bus, edge, dom, reduced } = ctx; const boxRef = React.useRef(null); const labelRef = React.useRef(null); const kbdRef = React.useRef(null); const px = useMotionValue(-1000); const y = useMotionValue(-1000); const shift = useMotionValue(0); const opacity = useMotionValue(0); const x = useTransform(() => px.get() + shift.get()); React.useEffect(() => { let timer = 0; let cool = 0; let warm = false; let visible = false; let anims: AnimationPlaybackControls[] = []; const stop = () => { anims.forEach((a) => a.stop()); anims = []; }; const sign = edge === "left" ? 1 : -1; const place = (target: HTMLElement) => { const box = boxRef.current; const dock = dom.get("dock"); if (!box || !dock) return null; const r = target.getBoundingClientRect(); const d = dock.getBoundingClientRect(); const w = box.offsetWidth; return { x: edge === "left" ? d.right + 12 : d.left - 12 - w, y: r.top + r.height / 2 - box.offsetHeight / 2 }; }; const reveal = (target: HTMLElement, label: string, kbd?: string) => { if (labelRef.current) labelRef.current.textContent = label; if (kbdRef.current) kbdRef.current.textContent = kbd ?? ""; const p = place(target); if (!p) return; stop(); if (visible && !reduced) { px.set(p.x); anims = [animate(y, p.y, { type: "spring", stiffness: 500, damping: 40 })]; } else { px.set(p.x); y.set(p.y); shift.set(reduced ? 0 : -6 * sign); anims = [animate(shift, 0, POP), animate(opacity, 1, { duration: reduced ? 0.12 : 0.14, ease: "easeOut" })]; } visible = true; warm = true; }; const api: TooltipApi = { show(target, label, kbd) { window.clearTimeout(timer); window.clearTimeout(cool); if (warm || visible) reveal(target, label, kbd); else timer = window.setTimeout(() => reveal(target, label, kbd), FIRST_DELAY); }, hide() { window.clearTimeout(timer); if (visible) { stop(); anims = [animate(opacity, 0, { duration: 0.12, ease: "easeIn" })]; visible = false; } window.clearTimeout(cool); cool = window.setTimeout(() => (warm = false), COOL_DOWN); }, }; bus.setTooltip(api); return () => { window.clearTimeout(timer); window.clearTimeout(cool); stop(); bus.clearTooltip(api); }; }, [bus, edge, dom, reduced, px, y, shift, opacity]); // Opening the panel puts the labels on screen: the tooltip steps aside. React.useEffect(() => { if (ctx.open) bus.tooltip()?.hide(); }, [ctx.open, bus]); return ( ); } 80:T7cf,/** * Every spring in Duet, in one place (stiffness / damping, mass 1). The README says why each one is what it is. */ /** The active tile sliding between items, on both slabs: firm, no overshoot to speak of. */ export const TILE = { type: "spring", stiffness: 480, damping: 40 } as const; /** The indicator's leading edge: quick and firm. */ export const LEADING = { type: "spring", stiffness: 620, damping: 44 } as const; /** The indicator's trailing edge: softer, so the pill stretches on the way and then catches up. */ export const TRAILING = { type: "spring", stiffness: 380, damping: 36 } as const; /** The unfurl: the clip opens from the corner nearest the mark while the slab slides the last 18 px. */ export const UNFURL = { type: "spring", stiffness: 260, damping: 30 } as const; /** The fold: firmer than the unfurl, so closing feels decisive. */ export const FOLD = { type: "spring", stiffness: 340, damping: 36 } as const; /** Rows, the wordmark and the stagger: a whisper of settle. */ export const ROW = { type: "spring", stiffness: 420, damping: 34 } as const; /** Pages inside the panel (menu ⇄ Settings, Help). */ export const PUSH = { type: "spring", stiffness: 420, damping: 36 } as const; /** The hover ghost gliding between rows. */ export const GHOST = { type: "spring", stiffness: 380, damping: 36 } as const; /** Tooltips and popovers springing in. */ export const POP = { type: "spring", stiffness: 420, damping: 30 } as const; /** The phone sheet snapping to a stop. */ export const SHEET = { type: "spring", stiffness: 380, damping: 38 } as const; /** A page sliding in from (and out to) 24 px: `d` = 1 pushes forward, -1 goes back; `sign` mirrors for the right edge. */ export function pageVariants(sign: number, reduced: boolean) { return { enter: (d: number) => (reduced ? { opacity: 0 } : { opacity: 0, x: 24 * d * sign }), center: { opacity: 1, x: 0 }, exit: (d: number) => (reduced ? { opacity: 0 } : { opacity: 0, x: -24 * d * sign }), }; } 81:T599,import type { DuetTint } from "./types"; /** The glass tints. Only the glass is coloured: the interface stays white (or ink) in every tint. */ export const TINTS = { crimson: "#d3122f", ocean: "#0f6fd6", violet: "#7a3cf0", graphite: "#6b6f78", } as const; export type TintPreset = keyof typeof TINTS | "clear"; export const TINT_NAMES: TintPreset[] = ["crimson", "ocean", "violet", "graphite", "clear"]; const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i; /** "#abc" → "#aabbcc"; anything that isn't a hex colour → null. */ export function normalizeHex(value: string): string | null { const v = value.trim(); if (!HEX.test(v)) return null; if (v.length === 4) return `#${v[1]}${v[1]}${v[2]}${v[2]}${v[3]}${v[3]}`.toLowerCase(); return v.toLowerCase(); } /** * The colour of the glass for a tint: a preset's hex, a custom hex (normalised), or null for "clear". * Anything unrecognised falls back to crimson, so a typo never leaves the glass without a material. */ export function resolveTint(tint: DuetTint | undefined): string | null { if (tint === undefined) return TINTS.crimson; if (tint === "clear") return null; if (tint in TINTS) return TINTS[tint as keyof typeof TINTS]; return normalizeHex(tint) ?? TINTS.crimson; } /** True for a preset name or a valid hex. */ export function isValidTint(tint: string): boolean { return tint === "clear" || tint in TINTS || normalizeHex(tint) !== null; } 82:T1324,import type * as React from "react"; import type { DuetLabels } from "./labels"; /** Any icon component: the bundled glyphs, lucide, your own SVG. */ export type DuetIcon = React.ComponentType<{ className?: string; filled?: boolean }>; export type DuetChannel = { id: string; name: string; avatar: string; href?: string; /** Streaming now: a LIVE capsule. */ live?: boolean; /** New uploads since the last visit: a small dot. */ fresh?: boolean; }; export type DuetView = "settings" | "help" | { title: string; render: () => React.ReactNode }; export type DuetItem = { id: string; label: string; icon: DuetIcon; /** Which side of the divider: the main destinations or the utilities below them. */ group: "primary" | "secondary"; href?: string; /** "New since your last visit": a dot on the row and on the dock icon, cleared once the list has been opened. */ dot?: boolean; /** An optional count (shown as 99+ above 99). */ badge?: number; /** Turns the row into an expandable list of channels. */ channels?: DuetChannel[]; /** The total behind "Show all (n)"; defaults to the number of channels. */ channelsTotal?: number; channelsHref?: string; /** Pushes a view inside the panel instead of navigating. */ view?: DuetView; /** Opens the sign-out confirm. */ action?: "logout"; /** Shown in the dock tooltips, e.g. "G H". */ shortcut?: string; disabled?: boolean; }; export type DuetAccountRef = { id: string; name: string; handle?: string; avatar: string }; export type DuetAccount = { /** Changing the id plays the switch (a circular wipe on the avatar, a roll on the name). */ id?: string; name: string; handle?: string; avatar: string; plan?: string; renews?: string; href?: string; others?: DuetAccountRef[]; purchasesHref?: string; }; /** Every prop a link gets. Spread them all onto your router's link: `renderLink={(p) => }`. */ export type DuetLinkProps = Omit, "href" | "className" | "children"> & { href: string; className: string; children: React.ReactNode; tabIndex: number; onClick: React.MouseEventHandler; "aria-current"?: "page"; [key: `data-${string}`]: string | undefined; }; export type DuetTint = "crimson" | "ocean" | "violet" | "graphite" | "clear" | (string & {}); export type DuetTheme = "dark" | "light" | "auto"; export type DuetLayout = "auto" | "desktop" | "mobile"; export type DuetSidebarProps = { brand: { name: string; mark?: React.ReactNode }; items: DuetItem[]; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; pinned?: boolean; defaultPinned?: boolean; onPinnedChange?: (pinned: boolean) => void; /** Unpinned only: choosing an item folds the panel once its tile has landed. Default true. */ closeOnSelect?: boolean; account?: DuetAccount; onAccountSwitch?: (id: string) => void; onLogout?: () => void | Promise; /** The body of the Settings view: build it from the exported primitives. */ settings?: React.ReactNode; /** What the Help view's "About" shows, and where "Send feedback" goes. */ help?: { about?: React.ReactNode; onFeedback?: (message: string) => void | Promise }; /** A search field in the panel. Off by default (the reference has none). */ search?: false | { placeholder?: string; onSubmit?: (query: string) => void }; theme?: DuetTheme; tint?: DuetTint; /** Window dots on both slabs. Default true. */ chrome?: boolean; /** The light that crosses the gap when the panel opens. Default true. */ bridge?: boolean; /** "auto" picks desktop, compact or mobile from the width of the sidebar's container. */ layout?: DuetLayout; /** The edge the dock sits on, in reading direction (in RTL "left" is the right-hand edge). */ side?: "left" | "right"; /** Remembers pinned and the last value in localStorage under this key. */ persistKey?: string; renderLink?: (props: DuetLinkProps) => React.ReactNode; labels?: Partial; /** A channel in an expanded list was chosen (its href, if any, is followed as usual). */ onChannelSelect?: (channel: DuetChannel, item: DuetItem) => void; /** An item's "new" dot was seen (its list opened): clear `dot` in your data, set it again when there is news. */ onDotSeen?: (id: string) => void; className?: string; style?: React.CSSProperties; }; export type DuetSidebarHandle = { open(): void; close(): void; toggle(): void; pin(value?: boolean): void; focusSearch(): void; }; export type DuetMode = "desktop" | "compact" | "mobile"; export type DuetEdge = "left" | "right"; 83:T14cd,"use client"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useDuet } from "../context"; import { ChatDots, Info } from "../glyphs"; import { Check, ChevronRight } from "../marks"; import { DuetKbd, DuetSection, DuetView } from "./settings-primitives"; const isMac = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent); /** Help & info: the keyboard shortcuts, About, and a small feedback form. */ export default function HelpView() { const ctx = useDuet(); const { labels, help } = ctx; const mod = isMac() ? "⌘" : "Ctrl"; const [open, setOpen] = React.useState<"about" | "feedback" | null>(null); const rows: [React.ReactNode, string][] = [ [ <> {mod} B , labels.shortcutToggle, ], ]; if (ctx.search) rows.push([ <> / {mod} K , labels.shortcutSearch, ]); rows.push([Esc, labels.shortcutBack]); rows.push([ <> ↑ ↓ ← → , labels.shortcutMove, ]); return (

{rows.map(([keys, text], i) => (

{text} {keys}

))}

} label={labels.about(ctx.brand.name)} open={open === "about"} onToggle={() => setOpen((o) => (o === "about" ? null : "about"))}>

{help?.about ?? `${ctx.brand.name} · 1.0`}

} label={labels.feedback} open={open === "feedback"} onToggle={() => setOpen((o) => (o === "feedback" ? null : "feedback"))}>

); } function Disclosure({ icon, label, open, onToggle, children, }: { icon: React.ReactNode; label: string; open: boolean; onToggle: () => void; children: React.ReactNode; }) { const { reduced } = useDuet(); const id = React.useId(); return ( <> {open ? ( {children} ) : null} ); } function Feedback() { const ctx = useDuet(); const [text, setText] = React.useState(""); const [phase, setPhase] = React.useState<"write" | "busy" | "sent">("write"); const id = React.useId(); if (phase === "sent") return (

{ctx.labels.feedbackThanks}

); return (

{ e.preventDefault(); if (!text.trim() || phase !== "write") return; setPhase("busy"); try { await ctx.help?.onFeedback?.(text.trim()); setPhase("sent"); } catch { setPhase("write"); } }} > {ctx.labels.feedback}

setText(e.target.value)}
      />
      <div style={{ display: "flex", justifyContent: "flex-end" }}>
        <button type="submit" className="duet-btn duet-btn-solid" disabled={!text.trim()} aria-busy={phase === "busy" || undefined}>
          {phase === "busy" ? <span className="duet-spinner" aria-hidden="true" /> : null}
          {ctx.labels.feedbackSend}
        </button>
      </div>
    </form>
  );
}
84:T26de,"use client";

import { motion } from "motion/react";
import * as React from "react";
import { DuetContext } from "../context";
import { Check, ChevronRight } from "../marks";
import { Popover } from "../popovers/popover";
import { TILE } from "../springs";
import type { DuetIcon } from "../types";

/**
 * Building blocks for the Settings view (or any view you push), themed with the sidebar. Compose them and pass the
 * result as `settings`:
 *
 *   <DuetView>
 *     <DuetSection label="Appearance"><DuetSegmented … /></DuetSection>
 *     <DuetSetting icon={Captions} label="Captions"><DuetSwitch … /></DuetSetting>
 *   </DuetView>
 */
export function DuetView({ children }: { children: React.ReactNode }) {
  return <div className="duet-view">{children}</div>;
}

export function DuetSection({ label, children }: { label: string; children: React.ReactNode }) {
  const id = React.useId();
  return (
    <section className="duet-section" aria-labelledby={id}>
      <div className="duet-section-label" id={id}>
        {label}
      </div>
      {children}
    </section>
  );
}

/** A setting row: glyph, label (and hint), and its control on the end. */
export function DuetSetting({ icon: Icon, label, hint, children }: { icon?: DuetIcon; label: string; hint?: string; children: React.ReactNode }) {
  return (
    <div className="duet-setting">
      {Icon ? (
        <span className="duet-setting-glyph" aria-hidden="true">
          <Icon />
        </span>
      ) : null}
      <span className="duet-setting-text">
        <span className="duet-setting-label">{label}</span>
        {hint ? <span className="duet-setting-hint">{hint}</span> : null}
      </span>
      {children}
    </div>
  );
}

export function DuetKbd({ children }: { children: React.ReactNode }) {
  return <kbd className="duet-kbd">{children}</kbd>;
}

/** An on/off switch: the thumb springs across and the track fills. */
export function DuetSwitch({
  checked,
  onCheckedChange,
  label,
  disabled,
}: {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  label: string;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      role="switch"
      className="duet-switch"
      aria-checked={checked}
      aria-label={label}
      disabled={disabled}
      onClick={() => onCheckedChange(!checked)}
    >
      <span className="duet-switch-thumb" aria-hidden="true" />
    </button>
  );
}

type Option<T extends string> = { value: T; label: string; icon?: DuetIcon };

/** Arrow keys move the choice inside a radio group (one tab stop). */
function useRadioKeys<T extends string>(options: { value: T }[], value: T, onChange: (v: T) => void) {
  const dir = React.useContext(DuetContext)?.dir ?? "ltr";
  return (e: React.KeyboardEvent<HTMLElement>) => {
    const i = options.findIndex((o) => o.value === value);
    const next = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
    const prev = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
    let j = -1;
    if (e.key === next || e.key === "ArrowDown") j = (i + 1) % options.length;
    else if (e.key === prev || e.key === "ArrowUp") j = (i - 1 + options.length) % options.length;
    else if (e.key === "Home") j = 0;
    else if (e.key === "End") j = options.length - 1;
    if (j < 0) return;
    e.preventDefault();
    onChange(options[j].value);
    const buttons = e.currentTarget.querySelectorAll<HTMLElement>('[role="radio"]');
    buttons[j]?.focus();
  };
}

/** A segmented control whose selection pill slides between the options. */
export function DuetSegmented<T extends string>({
  value,
  onValueChange,
  options,
  label,
}: {
  value: T;
  onValueChange: (v: T) => void;
  options: Option<T>[];
  label: string;
}) {
  const id = React.useId();
  const reduced = React.useContext(DuetContext)?.reduced ?? false;
  const onKeyDown = useRadioKeys(options, value, onValueChange);
  return (
    <div className="duet-segmented" role="radiogroup" aria-label={label} onKeyDown={onKeyDown}>
      {options.map((o) => {
        const on = o.value === value;
        const Icon = o.icon;
        return (
          <button
            key={o.value}
            type="button"
            role="radio"
            aria-checked={on}
            tabIndex={on ? 0 : -1}
            className="duet-segment"
            onClick={() => onValueChange(o.value)}
          >
            {on ? (
              <motion.span
                layoutId={reduced ? undefined : `${id}-pill`}
                className="duet-segment-pill"
                aria-hidden="true"
                transition={TILE}
              />
            ) : null}
            {Icon ? <Icon /> : null}
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

/** Colour choices as round swatches (a radio group). `color` "clear" draws the no-tint swatch. */
export function DuetSwatches<T extends string>({
  value,
  onValueChange,
  options,
  label,
}: {
  value: T;
  onValueChange: (v: T) => void;
  options: { value: T; label: string; color: string }[];
  label: string;
}) {
  const onKeyDown = useRadioKeys(options, value, onValueChange);
  return (
    <div className="duet-swatches" role="radiogroup" aria-label={label} onKeyDown={onKeyDown}>
      {options.map((o) => (
        <button
          key={o.value}
          type="button"
          role="radio"
          aria-checked={o.value === value}
          aria-label={o.label}
          tabIndex={o.value === value ? 0 : -1}
          className="duet-swatch"
          data-clear={o.color === "clear" ? "" : undefined}
          style={{ "--duet-swatch": o.color } as React.CSSProperties}
          onClick={() => onValueChange(o.value)}
        />
      ))}
    </div>
  );
}

/** A themed listbox in a glass popover: never a native <select>. ↑/↓, Home/End, type to jump, Enter to choose. */
export function DuetSelect<T extends string>({
  value,
  onValueChange,
  options,
  label,
}: {
  value: T;
  onValueChange: (v: T) => void;
  options: { value: T; label: string; lang?: string }[];
  label: string;
}) {
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState(0);
  const [button, setButton] = React.useState<HTMLButtonElement | null>(null);
  const listRef = React.useRef<HTMLDivElement | null>(null);
  const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
  const getButton = () => button;
  const current = options.find((o) => o.value === value) ?? options[0];
  const typed = React.useRef({ text: "", at: 0 });

const show = () => {
    setActive(Math.max(0, options.findIndex((o) => o.value === value)));
    setOpen(true);
  };
  const choose = (i: number) => {
    const o = options[i];
    if (o) onValueChange(o.value);
    setOpen(false);
    button?.focus();
  };

React.useEffect(() => {
    if (!open) return;
    const raf = requestAnimationFrame(() => listRef.current?.focus({ preventScroll: true }));
    return () => cancelAnimationFrame(raf);
  }, [open]);

const onListKey = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") setActive((a) => Math.min(options.length - 1, a + 1));
    else if (e.key === "ArrowUp") setActive((a) => Math.max(0, a - 1));
    else if (e.key === "Home") setActive(0);
    else if (e.key === "End") setActive(options.length - 1);
    else if (e.key === "Enter" || e.key === " ") choose(active);
    else if (e.key === "Tab") setOpen(false);
    else if (e.key.length === 1) {
      const now = e.timeStamp;
      typed.current.text = now - typed.current.at > 600 ? e.key : typed.current.text + e.key;
      typed.current.at = now;
      const j = options.findIndex((o) => o.label.toLowerCase().startsWith(typed.current.text.toLowerCase()));
      if (j >= 0) setActive(j);
      return;
    } else return;
    e.preventDefault();
  };

return (
    <>
      <button
        ref={setButton}
        type="button"
        className="duet-select"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-controls={open ? `${id}-list` : undefined}
        aria-label={`${label}: ${current?.label ?? ""}`}
        onClick={() => (open ? setOpen(false) : show())}
        onKeyDown={(e) => {
          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
            e.preventDefault();
            show();
          }
        }}
      >
        <span lang={current?.lang}>{current?.label}</span>
        <ChevronRight />
      </button>
      <Popover
        open={open}
        anchor={getButton}
        placement="bottom-end"
        offset={8}
        className="duet-listbox-pop"
        label={label}
        onClose={(reason) => {
          setOpen(false);
          if (reason === "escape") button?.focus();
        }}
        ignore={[getButton]}
      >
        <div
          ref={listRef}
          id={`${id}-list`}
          role="listbox"
          aria-label={label}
          tabIndex={-1}
          className="duet-listbox"
          aria-activedescendant={`${id}-opt-${active}`}
          onKeyDown={onListKey}
        >
          {options.map((o, i) => (
            <div
              key={o.value}
              id={`${id}-opt-${i}`}
              role="option"
              aria-selected={o.value === value}
              className="duet-option"
              data-active={i === active ? "" : undefined}
              lang={o.lang}
              onPointerMove={() => setActive(i)}
              onClick={() => choose(i)}
            >
              <span className="duet-option-label">{o.label}</span>
              {o.value === value ? <Check /> : null}
            </div>
          ))}
        </div>
      </Popover>
    </>
  );
}
85:Tb16,"use client";

import { motion } from "motion/react";
import * as React from "react";
import { useDuet } from "../context";
import { useIsoLayoutEffect, useNode } from "../hooks/use-controllable";
import { useScrollFade } from "../hooks/use-scroll-fade";
import { pageVariants, PUSH } from "../springs";

const HelpView = React.lazy(() => import("./help-view"));

/**
 * A view pushed inside the panel (iOS-style): the menu slides 24 px away and fades, the view slides in from 24 px
 * on the other side. The panel keeps its height; the breadcrumb, Esc or a swipe toward the reading end goes back.
 */
export function ViewPage() {
  const ctx = useDuet();
  // Kept from mount: while the page slides out after "back", the context's view is already gone.
  const [id] = React.useState(() => ctx.view!.id);
  const info = ctx.viewInfo(id);
  const headingRef = React.useRef<HTMLHeadingElement | null>(null);
  const [scrollEl, setScrollEl] = useNode<HTMLDivElement>();
  const swipe = React.useRef<{ x: number; y: number; id: number } | null>(null);
  useScrollFade(scrollEl);

useIsoLayoutEffect(() => {
    const raf = requestAnimationFrame(() => {
      if (ctx.dom.takeFocus((v) => v === "view")) headingRef.current?.focus({ preventScroll: true });
    });
    return () => cancelAnimationFrame(raf);
  }, []);

const kind = info?.item.view;
  let content: React.ReactNode;
  if (kind === "settings") content = ctx.settings ?? <p className="duet-empty">{ctx.labels.noSettings}</p>;
  else if (kind === "help")
    content = (
      <React.Suspense fallback={null}>
        <HelpView />
      </React.Suspense>
    );
  else if (kind && typeof kind === "object") content = kind.render();

const sign = ctx.edge === "left" ? 1 : -1;
  const back = ctx.dir === "rtl" ? -1 : 1;

return (
    <motion.div
      className="duet-page"
      custom={1}
      variants={pageVariants(sign, ctx.reduced)}
      initial="enter"
      animate="center"
      exit="exit"
      transition={PUSH}
      onPointerDown={(e) => {
        if (e.pointerType === "touch") swipe.current = { x: e.clientX, y: e.clientY, id: e.pointerId };
      }}
      onPointerUp={(e) => {
        const s = swipe.current;
        swipe.current = null;
        if (!s || s.id !== e.pointerId) return;
        const dx = (e.clientX - s.x) * back;
        if (dx > 60 && Math.abs(e.clientY - s.y) < 40) ctx.popView();
      }}
      onPointerCancel={() => (swipe.current = null)}
    >
      <div ref={setScrollEl} className="duet-scroll" role="group" aria-labelledby={`${ctx.ids.base}-view-title`}>
        <h3 ref={headingRef} id={`${ctx.ids.base}-view-title`} className="duet-sr" tabIndex={-1}>
          {info?.title}
        </h3>
        {content}
      </div>
    </motion.div>
  );
}
62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@floating-ui/react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40floating-ui%2Freact-dom","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@floating-ui/react-dom"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L63",null,{"namespace":"@upfork","registryDependencies":[]}]]}],null]}],["$","$L64",null,{"files":[{"path":"components/duet-sidebar/brand-mark.tsx","content":"$65","type":"registry:component","target":"@components/duet-sidebar/brand-mark.tsx"},{"path":"components/duet-sidebar/channels.tsx","content":"$66","type":"registry:component","target":"@components/duet-sidebar/channels.tsx"},{"path":"components/duet-sidebar/context.ts","content":"$67","type":"registry:component","target":"@components/duet-sidebar/context.ts"},{"path":"components/duet-sidebar/dock.tsx","content":"$68","type":"registry:component","target":"@components/duet-sidebar/dock.tsx"},{"path":"components/duet-sidebar/duet-sidebar.css","content":"$69","type":"registry:file","target":"@components/duet-sidebar/duet-sidebar.css"},{"path":"components/duet-sidebar/duet-sidebar.tsx","content":"$6a","type":"registry:component","target":"@components/duet-sidebar/duet-sidebar.tsx"},{"path":"components/duet-sidebar/glass.tsx","content":"$6b","type":"registry:component","target":"@components/duet-sidebar/glass.tsx"},{"path":"components/duet-sidebar/glyphs.tsx","content":"$6c","type":"registry:component","target":"@components/duet-sidebar/glyphs.tsx"},{"path":"components/duet-sidebar/hooks/use-controllable.ts","content":"$6d","type":"registry:component","target":"@components/duet-sidebar/hooks/use-controllable.ts"},{"path":"components/duet-sidebar/hooks/use-environment.ts","content":"$6e","type":"registry:component","target":"@components/duet-sidebar/hooks/use-environment.ts"},{"path":"components/duet-sidebar/hooks/use-hotkeys.ts","content":"$6f","type":"registry:component","target":"@components/duet-sidebar/hooks/use-hotkeys.ts"},{"path":"components/duet-sidebar/hooks/use-persisted.ts","content":"$70","type":"registry:component","target":"@components/duet-sidebar/hooks/use-persisted.ts"},{"path":"components/duet-sidebar/hooks/use-roving-focus.ts","content":"$71","type":"registry:component","target":"@components/duet-sidebar/hooks/use-roving-focus.ts"},{"path":"components/duet-sidebar/hooks/use-scroll-fade.ts","content":"$72","type":"registry:component","target":"@components/duet-sidebar/hooks/use-scroll-fade.ts"},{"path":"components/duet-sidebar/hooks/use-sheen.ts","content":"$73","type":"registry:component","target":"@components/duet-sidebar/hooks/use-sheen.ts"},{"path":"components/duet-sidebar/index.ts","content":"export { DuetSidebar } from \"./duet-sidebar\";\r\nexport { BrandMark } from \"./brand-mark\";\r\nexport {\r\n  DuetView,\r\n  DuetSection,\r\n  DuetSetting,\r\n  DuetSwitch,\r\n  DuetSegmented,\r\n  DuetSelect,\r\n  DuetSwatches,\r\n  DuetKbd,\r\n} from \"./views/settings-primitives\";\r\nexport { TINTS, TINT_NAMES, resolveTint, normalizeHex, isValidTint } from \"./tints\";\r\nexport { defaultLabels, type DuetLabels } from \"./labels\";\r\nexport * as DuetGlyphs from \"./glyphs\";\r\nexport * as DuetMarks from \"./marks\";\r\nexport type {\r\n  DuetAccount,\r\n  DuetAccountRef,\r\n  DuetChannel,\r\n  DuetEdge,\r\n  DuetIcon,\r\n  DuetItem,\r\n  DuetLayout,\r\n  DuetLinkProps,\r\n  DuetMode,\r\n  DuetSidebarHandle,\r\n  DuetSidebarProps,\r\n  DuetTheme,\r\n  DuetTint,\r\n  DuetView as DuetViewKind,\r\n} from \"./types\";\r\n","type":"registry:component","target":"@components/duet-sidebar/index.ts"},{"path":"components/duet-sidebar/indicator.tsx","content":"$74","type":"registry:component","target":"@components/duet-sidebar/indicator.tsx"},{"path":"components/duet-sidebar/labels.ts","content":"$75","type":"registry:component","target":"@components/duet-sidebar/labels.ts"},{"path":"components/duet-sidebar/light-bridge.tsx","content":"$76","type":"registry:component","target":"@components/duet-sidebar/light-bridge.tsx"},{"path":"components/duet-sidebar/marks.tsx","content":"$77","type":"registry:component","target":"@components/duet-sidebar/marks.tsx"},{"path":"components/duet-sidebar/menu.tsx","content":"$78","type":"registry:component","target":"@components/duet-sidebar/menu.tsx"},{"path":"components/duet-sidebar/mobile/mobile.tsx","content":"$79","type":"registry:component","target":"@components/duet-sidebar/mobile/mobile.tsx"},{"path":"components/duet-sidebar/panel.tsx","content":"$7a","type":"registry:component","target":"@components/duet-sidebar/panel.tsx"},{"path":"components/duet-sidebar/parts.tsx","content":"$7b","type":"registry:component","target":"@components/duet-sidebar/parts.tsx"},{"path":"components/duet-sidebar/popovers/account-popover.tsx","content":"$7c","type":"registry:component","target":"@components/duet-sidebar/popovers/account-popover.tsx"},{"path":"components/duet-sidebar/popovers/logout-confirm.tsx","content":"$7d","type":"registry:component","target":"@components/duet-sidebar/popovers/logout-confirm.tsx"},{"path":"components/duet-sidebar/popovers/popover.tsx","content":"$7e","type":"registry:component","target":"@components/duet-sidebar/popovers/popover.tsx"},{"path":"components/duet-sidebar/popovers/portal.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { DuetContext } from \"../context\";\nimport { useIsClient } from \"../hooks/use-controllable\";\n\n/** Tooltips, popovers and listboxes render here, outside the slabs, with the sidebar's theme, tint and direction. */\nexport function DuetPortal({ children }: { children: React.ReactNode }) {\n  const ctx = React.useContext(DuetContext);\n  const client = useIsClient();\n  if (!client) return null;\n  const theme = ctx ? (ctx.resolved ?? ctx.theme) : \"auto\";\n  return createPortal(\n    <div className=\"duet-portal\" data-duet-theme={theme} data-tint={ctx?.portal.tint} style={ctx?.portal.style} dir={ctx?.dir}>\n      {children}\n    </div>,\n    document.body,\n  );\n}\n","type":"registry:component","target":"@components/duet-sidebar/popovers/portal.tsx"},{"path":"components/duet-sidebar/popovers/tooltip.tsx","content":"$7f","type":"registry:component","target":"@components/duet-sidebar/popovers/tooltip.tsx"},{"path":"components/duet-sidebar/springs.ts","content":"$80","type":"registry:component","target":"@components/duet-sidebar/springs.ts"},{"path":"components/duet-sidebar/tints.ts","content":"$81","type":"registry:component","target":"@components/duet-sidebar/tints.ts"},{"path":"components/duet-sidebar/types.ts","content":"$82","type":"registry:component","target":"@components/duet-sidebar/types.ts"},{"path":"components/duet-sidebar/views/help-view.tsx","content":"$83","type":"registry:component","target":"@components/duet-sidebar/views/help-view.tsx"},{"path":"components/duet-sidebar/views/settings-primitives.tsx","content":"$84","type":"registry:component","target":"@components/duet-sidebar/views/settings-primitives.tsx"},{"path":"components/duet-sidebar/views/view-stack.tsx","content":"$85","type":"registry:component","target":"@components/duet-sidebar/views/view-stack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>