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:T669,"use client"; import { forwardRef, useMemo } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { SIDEBAR_KEY, type SidebarContext } from "./types"; import "./sidebar.css"; export interface SidebarProps { /** Accessible name for the `

` landmark. Defaults to `"Sidebar"`. */ label?: string; /** * Whether the sidebar is collapsed to an icon-only rail. A plain prop — * `Sidebar` has no internal control of its own that ever changes this, so * there is nothing for a controlled/uncontrolled split to round-trip. Own * the state yourself and pass it down. */ collapsed?: boolean; /** `SidebarGroup`, `SidebarSeparator` and `SidebarFooter`. */ children?: ReactNode; /** Additional CSS classes */ className?: string; } export const Sidebar = forwardRef(function Sidebar( { label = "Sidebar", collapsed = false, children, className }, ref ) { // The context VALUE is a plain object rebuilt when `collapsed` changes, and // that rebuild is what re-renders the nested consumers — the React shape of // the source's `get collapsed()` getter. Never `useMemo(..., [])` here. const context = useMemo(() => ({ collapsed }), [collapsed]); return ( ); }); Sidebar.displayName = "Sidebar"; 53:T537,"use client"; import { forwardRef, useContext } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { SidebarSeparator } from "./SidebarSeparator"; import { SIDEBAR_KEY } from "./types"; export interface SidebarFooterProps { /** A decorative avatar, shown even when the sidebar is collapsed. */ avatar?: ReactNode; /** The name / text next to the avatar. Moves to `sr-only` while collapsed — never removed. */ children?: ReactNode; /** Additional CSS classes */ className?: string; } export const SidebarFooter = forwardRef(function SidebarFooter( { avatar, children, className }, ref ) { const sidebar = useContext(SIDEBAR_KEY); const collapsed = sidebar?.collapsed ?? false; return (

{avatar ? ( ) : null} {children}

); }); SidebarFooter.displayName = "SidebarFooter"; 54:T59c,"use client"; import { useContext } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useFancyId } from "../../internals/use-id"; import { SIDEBAR_KEY } from "./types"; export interface SidebarGroupProps { /** The section heading, e.g. `"General"`. Required — read by `aria-labelledby`, not decorative. */ label: string; /** The `SidebarItem`s in this section. */ children?: ReactNode; /** Additional CSS classes */ className?: string; } export function SidebarGroup({ label, children, className }: SidebarGroupProps) { // `undefined` outside a Sidebar: the group still renders correctly, just // never in the icon-only collapsed presentation. const sidebar = useContext(SIDEBAR_KEY); const collapsed = sidebar?.collapsed ?? false; // SSR-stable — `uid()` throws outside the browser, and this id has to // exist on the very first server-rendered markup for `aria-labelledby` // to point at something real. const headingId = useFancyId(); return (

{label}

{children}

); } 55:T1199,"use client"; import { forwardRef, useContext } from "react"; import type { MouseEvent, ReactNode, Ref } from "react"; import { cn } from "../../utils"; import { useSoundCue } from "../../sound/use-sound"; import { SIDEBAR_KEY } from "./types"; import "./sidebar-item.css"; export interface SidebarItemProps { /** Renders an `` when set; a ` )} ); } ); SidebarItem.displayName = "SidebarItem"; 56:Tb2c,/* * Declared here too, not just on Sidebar's root: `SidebarItem` is meant to * be usable on its own DOM subtree, and relying on inheritance alone * would leave the accent bar and badge fill missing wherever it doesn't * happen to render as a Sidebar descendant. Same shape as * `Autocomplete`/`Combobox`/`TimePicker`'s `--ft-field-accent` and * `Button`'s `--ft-btn-accent` — every one of those declares its own copy * of the same formula rather than trusting an ancestor. This reads * `--ft-accent`, never redeclares it, so a consumer retinting the whole * tree from higher up still reaches this. Declared on the item's own * root class, not the `--current` modifier, so the badge fill below — * which needs it regardless of `current` — inherits it too. */ .ft-sidebar-item { --ft-nav-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); /* The accent bar below is an absolutely-positioned pseudo, which needs a containing block. A flex item taking `position: relative` changes no layout. */ position: relative; } /* * The accent bar, character-for-character the declaration that used to sit * on `.ft-sidebar-item--current` itself — same inset shadow, same inherited * radius, so the resting look is unchanged. It lives one layer down for two * reasons. It can now be transitioned without transitioning the focus ring, * which shares the `box-shadow` property and must never animate. And it * frees the host's own `box-shadow`, which Tailwind's `focus-visible:ring-2` * compiles to: an unlayered rule beats `@layer utilities` regardless of * specificity, so a bar declared on the host itself would suppress the * current item's focus ring entirely. */ .ft-sidebar-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 2px 0 0 var(--ft-nav-accent); opacity: 0; } .ft-sidebar-item--current::before { opacity: 1; } @media (prefers-reduced-motion: no-preference) { /* 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) = tokens.EASINGS.inout */ .ft-sidebar-item::before { transition: opacity var(--ft-sidebar-signal-duration, var(--ft-duration-fast, 150ms)) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ft-sidebar-signal-duration, var(--ft-duration-fast, 150ms)) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)); transform: scaleY(0.4); transform-origin: center; } .ft-sidebar-item--current::before { transform: scaleY(1); } } .ft-sidebar-item-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 600; line-height: 1.4; background: var(--ft-nav-accent); color: var(--ft-accent-foreground, oklch(1 0 0)); } 57:T5fb,/* * `SidebarItem` declares this same fallback again, locally on itself — * deliberately, not a drift: an item is a fully standalone component, and * this declaration here only reaches it through DOM inheritance, which * plain CSS custom properties do regardless of where the rule was authored. * `Autocomplete`/`Combobox`/`TimePicker` and its portalled `TimePickerPanel` * are the precedent — a component that can render somewhere other than as * a literal descendant needs its own copy, not just an ancestor's. Neither * declaration redeclares `--ft-accent` itself, so a consumer retinting the * whole tree via `--ft-accent` still reaches both. */ .ft-sidebar { --ft-nav-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); } /* * A NAMED exception to "only opacity and transform animate": a collapsing * sidebar is a layout change and there is no transform that reflows the * content beside it. Kept, retokenised, and declared as an exception rather * than quietly claiming compliance. * * The curve is `--ft-ease-inout`, not `--ft-ease-out`: a collapse is a * reversible state flip, not an arrival, and it has to read the same in * both directions. * * 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) = tokens.EASINGS.inout */ @media (prefers-reduced-motion: no-preference) { .ft-sidebar { transition: width var(--ft-sidebar-collapse-duration, var(--ft-duration-fast, 150ms)) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)); } } 58:T706,"use client"; /** * The contract between `Sidebar` and everything nested inside it. * * `Sidebar` owns the collapsed/expanded state and publishes it through * context so `SidebarGroup`, `SidebarItem` and `SidebarFooter` can each * adapt their own rendering (icon-only, `sr-only` labels) without the state * being threaded down as a prop through every layer by hand. Unlike * `ToggleGroupContext`, this context is read-only from the consumer side — * there is no `toggle`/`setCollapsed` method here on purpose: `collapsed` is * driven entirely from outside the compound (a consumer's own trigger, * passed through `Sidebar`'s `collapsed` prop), never by anything nested * inside it. * * A subcomponent mounted outside a `Sidebar` degrades instead of throwing — * the context reads `undefined` and every consumer treats that the same as * `collapsed: false`. See each subcomponent for the exact fallback. */ import { createContext } from "react"; /** What `Sidebar` publishes. Nested components read it; only `Sidebar` writes it. */ export interface SidebarContext { /** Whether the sidebar is currently in its icon-only, collapsed state. */ readonly collapsed: boolean; } /** * The context nested components read to learn whether the surrounding rail is * collapsed. The source publishes it under a `Symbol` context key; React's own * context object plays that role here, so the exported name is kept and the * value is a `React.Context` rather than a symbol: * * ```tsx * const sidebar = useContext(SIDEBAR_KEY); * ``` * * Read it as optional — a subcomponent rendered outside a `Sidebar` gets * `undefined` rather than throwing. */ export const SIDEBAR_KEY = createContext(undefined); SIDEBAR_KEY.displayName = "SidebarContext"; 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":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/sidebar/Sidebar.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/sidebar/Sidebar.tsx"},{"path":"react/src/components/sidebar/SidebarFooter.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/sidebar/SidebarFooter.tsx"},{"path":"react/src/components/sidebar/SidebarGroup.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/sidebar/SidebarGroup.tsx"},{"path":"react/src/components/sidebar/SidebarItem.tsx","content":"$55","type":"registry:ui","target":"@ui/fancy/components/sidebar/SidebarItem.tsx"},{"path":"react/src/components/sidebar/SidebarSeparator.tsx","content":"\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../../utils\";\n\nexport interface SidebarSeparatorProps {\n\t/** Additional CSS classes */\n\tclassName?: string;\n}\n\nexport const SidebarSeparator = forwardRef(\n\tfunction SidebarSeparator({ className }, ref) {\n\t\t// `

` is `role=\"separator\"` implicitly — no extra ARIA needed.\n\t\treturn

;\n\t}\n);\n\nSidebarSeparator.displayName = \"SidebarSeparator\";\n","type":"registry:ui","target":"@ui/fancy/components/sidebar/SidebarSeparator.tsx"},{"path":"react/src/components/sidebar/index.ts","content":"\"use client\";\n\nexport { Sidebar } from \"./Sidebar\";\nexport type { SidebarProps } from \"./Sidebar\";\nexport { SidebarGroup } from \"./SidebarGroup\";\nexport type { SidebarGroupProps } from \"./SidebarGroup\";\nexport { SidebarItem } from \"./SidebarItem\";\nexport type { SidebarItemProps } from \"./SidebarItem\";\nexport { SidebarSeparator } from \"./SidebarSeparator\";\nexport type { SidebarSeparatorProps } from \"./SidebarSeparator\";\nexport { SidebarFooter } from \"./SidebarFooter\";\nexport type { SidebarFooterProps } from \"./SidebarFooter\";\nexport { SIDEBAR_KEY } from \"./types\";\nexport type { SidebarContext } from \"./types\";\n","type":"registry:ui","target":"@ui/fancy/components/sidebar/index.ts"},{"path":"react/src/components/sidebar/sidebar-item.css","content":"$56","type":"registry:ui","target":"@ui/fancy/components/sidebar/sidebar-item.css"},{"path":"react/src/components/sidebar/sidebar.css","content":"$57","type":"registry:ui","target":"@ui/fancy/components/sidebar/sidebar.css"},{"path":"react/src/components/sidebar/types.ts","content":"$58","type":"registry:ui","target":"@ui/fancy/components/sidebar/types.ts"}],"className":"h-[70svh] min-h-80"}]]}]