50: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"] 51: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"] 52:Tc66,/* The shell is the container, so it responds to the space it is given, not the window. */ .cr-app-shell { container-type: inline-size; height: var(--cr-app-shell-height, 100dvh); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-app-shell__frame { position: relative; display: flex; height: 100%; } .cr-app-shell__skip { position: absolute; top: var(--cr-space-2); left: var(--cr-space-2); z-index: 20; padding: var(--cr-space-2) var(--cr-space-3); border-radius: var(--cr-radius-md); background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); font-weight: var(--cr-font-weight-semibold); text-decoration: none; } /* Hidden until it has focus. Clipped, not moved, so it cannot show above a shell that is not at the top of the page. */ .cr-app-shell__skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cr-app-shell__sidebar { display: flex; flex: none; overflow-y: auto; border-inline-end: 1px solid var(--cr-color-border-default); background: color-mix(in srgb, var(--cr-color-glass-tint) 22%, transparent); } .cr-app-shell__column { display: flex; flex: 1; flex-direction: column; min-width: 0; } .cr-app-shell__header { display: flex; align-items: center; gap: var(--cr-space-3); box-sizing: border-box; min-height: 60px; padding: var(--cr-space-3) var(--cr-space-5); border-bottom: 1px solid var(--cr-color-border-default); background: var(--cr-color-glass-tile); } /* With no header content, the bar is only needed for the menu button on a narrow shell. */ .cr-app-shell__header[data-empty] { display: none; } .cr-app-shell__header-slot { display: flex; flex: 1; align-items: center; gap: var(--cr-space-3); min-width: 0; } .cr-app-shell__menu { display: none; } .cr-app-shell__content { display: flex; flex: 1; min-height: 0; } .cr-app-shell__main { flex: 1; box-sizing: border-box; min-width: 0; padding: var(--cr-space-6) var(--cr-space-8); overflow-y: auto; } .cr-app-shell__main:focus { outline: none; } .cr-app-shell__aside { flex: none; box-sizing: border-box; width: var(--cr-app-shell-aside-width, 300px); padding: var(--cr-space-6) var(--cr-space-5); overflow-y: auto; border-inline-start: 1px solid var(--cr-color-border-default); background: color-mix(in srgb, var(--cr-color-glass-tint) 22%, transparent); } .cr-app-shell__sheet .cr-sidebar { width: 100%; padding: 0; } /* Narrow: the sidebar leaves for a sheet, and the aside drops below the content. */ @container (max-width: 900px) { .cr-app-shell__sidebar { display: none; } .cr-app-shell__menu, .cr-app-shell__header[data-empty] { display: flex; } .cr-app-shell__content { flex-direction: column; overflow-y: auto; } .cr-app-shell__main { flex: none; padding: var(--cr-space-5); overflow: visible; } .cr-app-shell__aside { width: auto; overflow: visible; border-inline-start: 0; border-top: 1px solid var(--cr-color-border-default); } } 53:Te17,'use client'; import { useId, useState, type CSSProperties, type ReactNode } from 'react'; import { IconButton } from '@/components/creance/icon-button/IconButton'; import { Sheet, SheetContent } from '@/components/creance/sheet/Sheet'; import { cx } from '@/lib/creance/cx'; import { MenuIcon } from '@/lib/creance/icons'; import './AppShell.css'; export interface AppShellProps { /** Down the left, usually a Sidebar. When the shell is narrow it moves into a sheet opened from the header. */ sidebar?: ReactNode; /** Across the top of the content: breadcrumbs, search, actions. */ header?: ReactNode; /** A second column beside the content. It moves below the content when the shell is narrow. */ aside?: ReactNode; /** The page. Rendered in `

`. */ children: ReactNode; /** Height of the shell. Default is the full viewport. */ height?: number | string; /** Title of the sheet that holds the sidebar on a narrow shell. Default "Navigation". */ sidebarLabel?: string; /** Accessible name of the button that opens it. Default "Open navigation". */ menuLabel?: string; /** Accessible name of the aside. */ asideLabel?: string; /** Text of the link that jumps past the sidebar and header. Default "Skip to content". */ skipLabel?: string; className?: string; } /** * The frame of an app: sidebar, header, content and an optional aside. Layout only: it renders the slots it is given. * The first thing in it is a skip link to the content. */ export function AppShell({ sidebar, header, aside, children, height, sidebarLabel = 'Navigation', menuLabel = 'Open navigation', asideLabel, skipLabel = 'Skip to content', className, }: AppShellProps) { const [open, setOpen] = useState(false); const mainId = useId(); const style = height === undefined ? undefined : ({ '--cr-app-shell-height': typeof height === 'number' ? `${height}px` : height } as CSSProperties); return (

{skipLabel} {sidebar &&

{sidebar}

}

{(header || sidebar) && (

{sidebar && ( } label={menuLabel} tooltip={false} onClick={() => setOpen(true)} /> )} {header &&

{header}

}

)}

{children}

{aside && ( )}

{sidebar && ( (e.target as Element).closest('a') && setOpen(false)} > {open && sidebar} )}

); } 4f:["$","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,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/icon-button.json","https://creance.pages.dev/r/sheet.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"app-shell/AppShell.css","content":"$52","type":"registry:file","target":"@components/creance/app-shell/AppShell.css"},{"path":"app-shell/AppShell.tsx","content":"$53","type":"registry:ui","target":"@components/creance/app-shell/AppShell.tsx"}],"className":"h-[70svh] min-h-80"}]]}]