51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53:T3135,import * as React from "react"; import { cn } from "@/lib/utils"; import { ScrollIndicator } from "@/components/ui/scroll-indicator"; import { ScrollRegionProvider, type ScrollRegion } from "@/hooks/use-scroll-region"; import { NavResetProvider, useNavDoubleActivate } from "@/hooks/use-nav-reset"; import { useSlidingIndicator } from "@/hooks/use-sliding-indicator"; import { useTravelDirection } from "@/hooks/use-travel-direction"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { useMergedRefs } from "@/lib/merge-refs"; /** * The app shell skeleton shared by every Whiskeyjack app: a root container, * the frosted desktop header (floating or sticky), the standard header nav * pills, and the main scroll region. Composable slots rather than a * monolith -- app-specific chrome (Tauri window controls, sidebar rails, * drawers) stays in the app and nests between these pieces. * * Two scroll models (see `.claude/rules/web-apps.md`, "Layout shell"): * - `shell`: fixed-height column (`h-dvh overflow-hidden`); ONLY the AppMain * scroller moves. Pair with AppHeader `floating` + AppMain `self`. * - `document`: the page itself scrolls (content sites, simple apps). Pair * with AppHeader `sticky` + AppMain `document`. */ // -- AppShell ---------------------------------------------------------------- export interface AppShellProps extends React.HTMLAttributes { /** 'shell': fixed h-dvh column, main scrolls. 'document': page scrolls. */ scroll?: "shell" | "document"; } export const AppShell = React.forwardRef( ({ scroll = "shell", className, children, ...props }, ref) => ( // The nav-reset slot wraps everything, so the Layout's nav chrome and the // page that registers its start are both below it.

{children}

), ); AppShell.displayName = "AppShell"; // -- AppHeader --------------------------------------------------------------- export interface AppHeaderProps extends React.HTMLAttributes { /** * 'floating': absolute over the scroller(s) -- content scrolls behind the * frost; scrollers reserve the header height (md:pt-14 / md:pt-16). * 'sticky': in-flow sticky bar for document-scroll apps. */ variant?: "floating" | "sticky"; /** * 'contained': centered title-bar (max-w 800). 'full': edge-to-edge. * 'none': no width/padding classes on the row -- supply them via * `rowClassName` (Tauri headers with window-control clearance vars). */ width?: "contained" | "full" | "none"; /** Header row height in Tailwind units. 14 = 56px, 16 = 64px. */ height?: 14 | 16; /** Right side of the bar (action pill, toggle, ...). */ toolbar?: React.ReactNode; /** * Absolutely-positioned chrome inside the header but outside the content * row -- the Tauri extension point (window-control containers pinned to the * window edges while the row clears them via the --wc-* vars). */ chrome?: React.ReactNode; /** Extra classes for the inner content row (merged after the width preset). */ rowClassName?: string; } export const AppHeader = React.forwardRef( ( { variant = "floating", width = "contained", height = 16, toolbar, chrome, rowClassName, className, children, ...props }, ref, ) => (

{chrome}

{children} {toolbar}

), ); AppHeader.displayName = "AppHeader"; // -- HeaderNav --------------------------------------------------------------- export interface HeaderNavItem { key: string; /** Passed to the link component's `to` prop. */ to: string; label: React.ReactNode; active: boolean; renderIcon: (args: { active: boolean; size: number }) => React.ReactNode; } export interface HeaderNavProps extends React.HTMLAttributes { items: HeaderNavItem[]; /** Router link component (e.g. react-router's Link) -- same injection as MobileBottomNav. */ linkComponent: React.ElementType; /** * The app's scroll region, for double-clicking the active item to return to * the top (then to the page's start -- see `useRegisterNavReset`). Pass the * same ref given to `AppMain`; omit it for a document-scroll app. Taken as a * ref for the reason `useScrollReset` does: this nav renders above the scroll * region `AppMain` publishes, so it cannot read it from context. */ scrollRef?: React.RefObject; } export const HeaderNav = React.forwardRef(function HeaderNav( { items, linkComponent: LinkComp, scrollRef, className, ...props }, ref, ) { const onActivate = useNavDoubleActivate(scrollRef); const navRef = React.useRef(null); const mergedRef = useMergedRefs(navRef, ref); const reduced = useReducedMotion(); // The highlight travels between items instead of appearing on the new one, // the horizontal read of the SidebarTabs rail. Desktop only by construction: // MobileBottomNav is its own component and shares nothing here. const activeKey = items.find((i) => i.active)?.key; const indicator = useSlidingIndicator(navRef, activeKey, { attribute: "data-nav-key", changeKey: items.length, }); // Which edge leads depends on the direction of travel, so `.wj-nav-highlight` // names it -- the same stretch the SegmentedControl pill takes. const direction = useTravelDirection(items.findIndex((i) => i.active)); return (

{indicator && ( )} {items.map((item) => ( onActivate(item.active)} aria-current={item.active ? "page" : undefined} className={cn( // touch-manipulation: the active item takes a double-click/tap // (useNavDoubleActivate), which Safari would read as zoom on a // zoomable page. Pinch-zoom is unaffected. // z-10 so the label rides above the travelling highlight, and // wj-nav-handoff fades this item's own fill out as that // highlight crosses to reach it. "wj-nav-handoff relative z-10 flex items-center gap-2 min-h-control-md px-3 py-2 rounded-lg text-sm font-medium transition-colors wj-focus-ring touch-manipulation", item.active ? "text-[var(--color-text-primary-light)] dark:text-[var(--color-text-primary-dark)]" : "text-[var(--color-text-secondary-light)] dark:text-[var(--color-text-secondary-dark)] hover:bg-[var(--wj-nav-active)]", )} > {item.renderIcon({ active: item.active, size: 20 })} {item.label} ))}

); }); HeaderNav.displayName = "HeaderNav"; // -- AppMain ----------------------------------------------------------------- export interface AppMainProps extends React.HTMLAttributes { /** * 'self': the main element is the scroller (shell model) -- hides its native * scrollbar, ships a bounded ScrollIndicator, and carries `overscroll-none` * so a touch overscroll cannot rubber-band the shell or trigger the * browser's pull-to-refresh (a caller's own `overscroll-*` class wins). * 'document': plain flex-1 region, the page scrolls. */ scroll?: "self" | "document"; /** * ScrollIndicator top offset (header height + ~4px: 60 for h-14, 68 for * h-16). Only used with scroll='self'. */ indicatorTopOffset?: number; /** * Hide the native scrollbar at every width (default). Pass false when the * app gates the hiding itself (Chip Away hides it md+ only via CSS, keeping * the native overlay indicator on phones). */ hideScrollbar?: boolean; /** * Hide the bounded ScrollIndicator below `md` (default `true`), where a * touch viewport's own overlay scrollbar is the better affordance. * * Pass `false` for a real desktop WINDOW, which can be resized narrower than * `md` while still being a desktop: the default would hand it back the native * scrollbar, which then runs the full height behind a floating header -- * exactly what the indicator exists to avoid. Width is not a proxy for * platform once the app ships as a resizable window. */ indicatorHideBelowMd?: boolean; } export const AppMain = React.forwardRef( ( { scroll = "self", indicatorTopOffset = 68, hideScrollbar = true, indicatorHideBelowMd = true, className, children, ...props }, ref, ) => { const innerRef = React.useRef(null); const setRefs = (el: HTMLElement | null) => { innerRef.current = el; if (typeof ref === "function") ref(el); else if (ref) ref.current = el; }; // Which element "scroll to the top" means is a choice this component just // made on the app's behalf, so it is also this component's job to publish // the answer -- a page has no way to know, and `window.scrollTo` is wrong // here without saying so. See `useScrollReset`. const region = React.useMemo( () => ({ scrollToTop: () => { if (scroll === "document") window.scrollTo(0, 0); else if (innerRef.current) innerRef.current.scrollTop = 0; }, getElement: () => (scroll === "document" ? null : innerRef.current), }), [scroll], ); if (scroll === "document") { return (

{children}

); } return ( <>

{children}

); }, ); AppMain.displayName = "AppMain"; 50:["$","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,["$","$L51",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/merge-refs.json","https://whiskeyjack.net/r/scroll-indicator.json","https://whiskeyjack.net/r/use-nav-reset.json","https://whiskeyjack.net/r/use-reduced-motion.json","https://whiskeyjack.net/r/use-scroll-region.json","https://whiskeyjack.net/r/use-sliding-indicator.json","https://whiskeyjack.net/r/use-travel-direction.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/app-shell.tsx","content":"$53","type":"registry:ui","target":"components/ui/app-shell.tsx"}],"className":"h-[70svh] min-h-80"}]]}]