64: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"] 65:I[544296,["/_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"],"ItemStyles"] 66:I[8513,["/_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"],"ScrollArea"] 67:I[8513,["/_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"],"ScrollBar"] 68: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"] 69:T3225,"use client"; import { useId, useLayoutEffect, useRef, useState } from "react"; /** One literal data row shown on the sheet underneath — the actual value, never a placeholder. */ export interface EnvelopeField { /** Field label, e.g. "Name". */ label: string; /** The real value on file, e.g. "Jordan Ellis". */ value: string; } /** One requested scope: a switch that governs one die-cut window over one or more real rows. */ export interface EnvelopeScope { id: string; /** Visible + accessible switch label, e.g. "Repositories". */ label: string; /** The real rows this scope's window sits over. */ fields: EnvelopeField[]; /** Short accessible summary named by aria-describedby, e.g. "14 events this week". */ sample: string; /** Required scopes render as a glassine (hatched) window: always open, never closable. */ required?: boolean; /** Initial aperture for an optional scope. Defaults to closed. */ defaultOpen?: boolean; } export interface EnvelopeWindowProps { /** The app requesting access, e.g. "Northlake Analytics". */ appName: string; /** The scopes it's asking for, in the order they appear on the sheet. */ scopes: EnvelopeScope[]; /** Called with the ids of every currently-open scope (required scopes always included). */ onAllow?: (openScopeIds: string[]) => void; /** Called after every optional window has been closed. */ onDeny?: () => void; className?: string; } const OPEN_MS = 240; const EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; // ease-out-expo const WINDOW_PAD = 6; type Rect = { top: number; left: number; width: number; height: number }; /** * An OAuth-style consent screen built as a physical envelope. The user's real * account data sits on a sheet in normal document flow; an opaque die-cut * window sits over each scope's rows, and that window's aperture (0..1) is * literally the switch's checked state. Opening a scope parts two flaps from * the seam outward via animated clip-path insets; closing reverses the same * scalar. Required scopes render as glassine (hatched) windows: always at * aperture 1, visible, never closable — what the app can always see. */ export function EnvelopeWindow({ appName, scopes, onAllow, onDeny, className = "", }: EnvelopeWindowProps) { const uid = useId(); const containerRef = useRef(null); const rowRefs = useRef(new Map()); const [rects, setRects] = useState>({}); const [open, setOpen] = useState>(() => Object.fromEntries(scopes.map((s) => [s.id, s.required ? true : (s.defaultOpen ?? false)])), ); useLayoutEffect(() => { const container = containerRef.current; if (!container) return; const measure = () => { const next: Record = {}; for (const scope of scopes) { const el = rowRefs.current.get(scope.id); if (!el) continue; next[scope.id] = { top: el.offsetTop - WINDOW_PAD, left: el.offsetLeft - WINDOW_PAD, width: el.offsetWidth + WINDOW_PAD * 2, height: el.offsetHeight + WINDOW_PAD * 2, }; } setRects(next); }; measure(); const ro = new ResizeObserver(measure); ro.observe(container); return () => ro.disconnect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [scopes]); const toggle = (scope: EnvelopeScope) => { if (scope.required) return; setOpen((prev) => ({ ...prev, [scope.id]: !prev[scope.id] })); }; const isOpen = (scope: EnvelopeScope) => scope.required || !!open[scope.id]; const openCount = scopes.filter(isOpen).length; const total = scopes.length; const allowLabel = `Allow access to ${openCount} of ${total} areas`; const handleDeny = () => { setOpen((prev) => { const next = { ...prev }; for (const s of scopes) if (!s.required) next[s.id] = false; return next; }); onDeny?.(); }; const handleAllow = () => { onAllow?.(scopes.filter(isOpen).map((s) => s.id)); }; // Optional switches lead the control list, required ones trail it — the // window layout above stays in the caller's own scope order regardless. const orderedSwitches = [ ...scopes.filter((s) => !s.required), ...scopes.filter((s) => s.required), ]; const hatchId = `envwin-hatch-${uid}`; return (

{/* Shared die-cut hatch, referenced by every glassine (required) window. */}

AUTHORIZE ACCESS

{appName} wants to access your account

{scopes.map((scope) => (

{ if (el) rowRefs.current.set(scope.id, el); else rowRefs.current.delete(scope.id); }} data-envelope-row={scope.id} className="py-2.5 first:pt-0 last:pb-0" > {scope.fields.map((f, i) => (

{f.label} {f.value}

))}

))} {scopes.map((scope) => { const rect = rects[scope.id]; if (!rect) return null; const rectStyle = { top: rect.top, left: rect.left, width: rect.width, height: rect.height, }; if (scope.required) { // Glassine: a translucent, hatched pane always over the data — // visible, textured, but never a plain clear cut. return (

); } const a = open[scope.id] ? 1 : 0; return (

{/* Two flaps parting from the centre seam. Each covers half the window at aperture 0 and clips away toward its own edge as aperture rises to 1 — the reveal is the clip, not a fade. */}

); })}

{orderedSwitches.map((scope) => { const labelId = `${uid}-${scope.id}-label`; const descId = `${uid}-${scope.id}-desc`; const checked = isOpen(scope); return (

{scope.label}

{scope.required ? "Required by this app. " : ""} {`Shows: ${scope.sample}`}

); })}

{allowLabel}

); } 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/envelope-window/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/envelope-window.tsx"}],"className":"h-[70svh] min-h-80"}]]}]