Right-click me
\n * between groups\n//\n// Key difference from Menu (baseline):\n// • No portal, no popup animation, no trigger\n// • Always rendered (static)\n// • Shape morphing on hover works identically (reuses MenuGroup)\n// • Still provides MenuContext with isStatic=true so MenuItems know to use Slot\n//\n// Vertical Menu Gap architecture:\n// • Outer container: NO overflow-hidden (would clip group shape morphing!)\n// Instead, elevation shadow is applied here, bg is transparent.\n// • Each MenuGroup manages its own background + border-radius via Framer Motion.\n// • The 2dp gap between groups is transparent — page background shows through.\n//\n// Vertical Menu Divider architecture:\n// • Outer container applies containerBg + overflow-hidden + rounded-2xl\n// (groups inside all stay flush, no shape morph needed for divider variant).\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { MenuProvider, useMenuContext } from \"./menu-context\";\nimport { MenuGroup } from \"./menu-group\";\nimport {\n\tMENU_GROUP_GAP,\n\tMENU_MAX_WIDTH,\n\tMENU_MIN_WIDTH,\n\tSTANDARD_COLORS,\n\tVIBRANT_COLORS,\n} from \"./menu-tokens\";\nimport type {\n\tMenuGroupProps,\n\tMenuItemPosition,\n\tMenuItemProps,\n\tVerticalMenuContentProps,\n\tVerticalMenuDividerProps,\n\tVerticalMenuProps,\n\tVerticalMenuSeparatorStyle,\n} from \"./menu-types\";\nimport { flattenChildren } from \"./menu-utils\";\n\n// ─── VerticalMenuDivider ──────────────────────────────────────────────────────\n\n/**\n * A plain horizontal divider for use between groups in a VerticalMenuContent\n * with `separatorStyle=\"divider\"`.\n *\n * Uses the same visual spec as MenuDivider (outline-variant color, 12dp\n * horizontal padding, 2dp vertical padding) but is a plain `
` — no Radix\n * dependency, safe inside static (non-popup) contexts.\n *\n * @example\n *
\n\t\t\t\t{/* Actions — leading end */}\n\t\t\t\t{actions &&
\n\t\t\n\t);\n}\n","/**\n * @file docked-toolbar.tsx\n * MD3 Expressive Docked Toolbar.\n *\n * Secondary navigation component. NOT an App Bar.\n * Usually appears directly below the main App Bar.\n * Height: 64px | Background: surface-container\n * Typical content: chips, segmented buttons, filter actions.\n *\n * @see docs/m3/app-bars/DockedToolbarTokens.kt\n */\n\nimport { cn } from \"../../lib/utils\";\nimport { AppBarTokens } from \"./app-bar.tokens\";\nimport type { DockedToolbarProps } from \"./app-bar.types\";\n\n/**\n * MD3 Expressive Docked Toolbar.\n *\n * @example\n * ```tsx\n * {actions}
}\n\n\t\t\t\t{/* FAB — trailing end */}\n\t\t\t\t{floatingActionButton && (\n\t\t\t\t\t{floatingActionButton}
\n\t\t\t\t)}\n\t\t\t![\"\"](\"/banner.jpg\")
}\n * />\n * ```\n */\nexport function LargeFlexibleAppBar({\n\ttitle,\n\tsubtitle,\n\ttitleAlignment = \"start\",\n\tnavigationIcon,\n\tactions,\n\tcolors,\n\tscrollElement,\n\theaderContent,\n\tcollapsedHeight = AppBarTokens.heights.flexibleCollapsed,\n\texpandedHeight,\n\tclassName,\n\tenableFadingBlur,\n\tblurIntensity,\n\tblurHeight,\n}: FlexibleAppBarProps) {\n\tconst resolvedExpandedHeight =\n\t\texpandedHeight ??\n\t\t(subtitle\n\t\t\t? AppBarTokens.heights.largeFlexWithSubtitleExpanded\n\t\t\t: AppBarTokens.heights.largeFlexExpanded);\n\n\tconst {\n\t\theight,\n\t\tcurrentBg,\n\t\tcssTransition,\n\t\tlargeTitleOpacity,\n\t\tlargeTitleY,\n\t\tsmallTitleOpacity,\n\t\tsubtitleOpacity,\n\t\theaderContentOpacity,\n\t} = useFlexibleAppBar({\n\t\tcollapsedHeight,\n\t\texpandedHeight: resolvedExpandedHeight,\n\t\tscrollElement,\n\t\tcolors,\n\t\tlargeTitleFadeRange: [0, 0.35],\n\t\tsmallTitleFadeRange: [0.55, 0.95],\n\t\tsubtitleFadeRange: [0, 0.25],\n\t\theaderContentFadeRange: [0, 0.2],\n\t\tlargeTitleYRange: [0, 12],\n\t});\n\n\tconst isCentered = titleAlignment === \"center\";\n\n\treturn (\n\t\t{actions}
}\n\t\t\t\n\n\t\t\t{actions}
}\n\t\t\t\n\n\t\t\t\n\t\t\t\t{/* Optional navigation icon — leading edge */}\n\t\t\t\t{navigationIcon && (\n\t\t\t\t\t\n\t\t\t\t\t\t{navigationIcon}\n\t\t\t\t\t
\n\t\t\t\t)}\n\n\t\t\t\t{/* Search bar pill */}\n\t\t\t\t\n\t\t\t\t\t\t\t{trailingSearchActions}\n\t\t\t\t\t\t
\n\t\t\t\t\t)}\n\t\t\t\t\n\n\t\t\t\t{/* External actions — trailing edge of bar, outside pill */}\n\t\t\t\t{externalActions && (\n\t\t\t\t\t{externalActions}
\n\t\t\t\t)}\n\t\t\t\n\t\t\n\t);\n}\n","/**\n * @file search-view.tsx\n * MD3 Expressive Search View.\n *\n * Full-screen overlay activated when a SearchAppBar's search bar is clicked.\n * Shares a Framer Motion `layoutId` with the SearchAppBar search bar for a\n * smooth shared element transition.\n *\n * Usage pattern:\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * // In render:\n * \n\t\t\t\t{navigationIcon && (\n\t\t\t\t\t\n\t\t\t\t\t\t{navigationIcon}\n\t\t\t\t\t
\n\t\t\t\t)}\n\n\t\t\t\t{actions}
}\n\t\t\t\n\t\t\n\t);\n}\n\n/**\n * MD3 Expressive Small App Bar.\n *\n * @example\n * ```tsx\n * // Left-aligned (default)\n * `, purely informational with no interaction.\n * - **Interactive** → Powered by `` or ``, featuring Ripple effect and elevation animation on hover/press/drag.\n *\n * Elevation levels (0–5):\n * - Level 0 = \"none\" (Flat)\n * - Level 1 = box-shadow ~1dp (Slight elevation - Elevated rest)\n * - Level 2 = box-shadow ~2dp (Hover/Focus elevation)\n * - Level 3 = box-shadow ~6dp (Dragged state elevation)\n * - Level 4 = box-shadow ~8dp (Pickers/Popups elevation)\n * - Level 5 = box-shadow ~12dp (Modals/Dialogs elevation)\n *\n * @example\n * ```tsx\n * // Static card with flat elevation\n * \n * Flat elevated surface \n * \n *\n * // Interactive button card without ripple or hover effect\n * alert('Clicked!')} disableRipple disableHoverEffect>\n * Clickable without ripple \n * \n *\n * // Interactive link card with custom hover scale\n * \n * Scaled link card \n * \n * ```\n *\n * @see https://m3.material.io/components/cards/overview\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { domMax, type HTMLMotionProps, LazyMotion, m } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"../../../lib/utils\";\nimport { Ripple, useRippleState } from \"../../ripple\";\nimport { type CardVariant, useCardElevation } from \"./card-tokens\";\nimport type { CardProps } from \"./types\";\n\n// ─────────────────────────────────────────────────────────────────────────────\n// CVA – Variant base classes (token-aligned with MD3)\n// ─────────────────────────────────────────────────────────────────────────────\nexport const cardVariants = cva(\n\t\"rounded-m3-lg flex flex-col relative overflow-hidden transition-all duration-200\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\t// ElevatedCardTokens.ContainerColor = SurfaceContainerLow\n\t\t\t\televated: \"bg-m3-surface-container-low text-m3-on-surface\",\n\t\t\t\t// FilledCardTokens.ContainerColor = SurfaceContainerHighest\n\t\t\t\tfilled: \"bg-m3-surface-container-highest text-m3-on-surface\",\n\t\t\t\t// OutlinedCardTokens.ContainerColor = Surface, OutlineColor = OutlineVariant\n\t\t\t\toutlined:\n\t\t\t\t\t\"bg-m3-surface text-m3-on-surface border border-m3-outline-variant\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"elevated\" },\n\t},\n);\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Component\n// ─────────────────────────────────────────────────────────────────────────────\nconst CardImpl = React.forwardRef(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvariant = \"elevated\",\n\t\t\televation,\n\t\t\tdisableElevation = false,\n\t\t\tripple = true,\n\t\t\tdisableRipple = false,\n\t\t\thoverEffect = true,\n\t\t\tdisableHoverEffect = false,\n\t\t\tstateLayer = true,\n\t\t\tdisableStateLayer = false,\n\t\t\tdisabled = false,\n\t\t\tinteractive = false,\n\t\t\tdraggable = false,\n\t\t\thref,\n\t\t\ttarget,\n\t\t\trel: relProp,\n\t\t\tonClick,\n\t\t\tonPointerDown: userOnPointerDown,\n\t\t\twhileHover,\n\t\t\twhileTap,\n\t\t\twhileFocus,\n\t\t\twhileDrag,\n\t\t\ttransition,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst safeVariant = (variant || \"elevated\") as CardVariant;\n\t\tconst isInteractive = !!onClick || !!href || interactive || asChild;\n\t\tconst isHoverEnabled = hoverEffect !== false && !disableHoverEffect;\n\t\tconst isRippleEnabled =\n\t\t\tripple !== false && !disableRipple && isInteractive && !disabled;\n\t\tconst isStateLayerEnabled =\n\t\t\tstateLayer !== false && !disableStateLayer && isInteractive && !disabled;\n\n\t\tconst elevationProps = useCardElevation({\n\t\t\tvariant: safeVariant,\n\t\t\tdisabled,\n\t\t\tdraggable,\n\t\t\televation,\n\t\t\tdisableElevation,\n\t\t\thoverEffect: isHoverEnabled,\n\t\t});\n\n\t\tconst {\n\t\t\tripples,\n\t\t\tonPointerDown: rippleOnPointerDown,\n\t\t\tremoveRipple,\n\t\t} = useRippleState();\n\n\t\tconst handlePointerDown = (event: React.PointerEvent) => {\n\t\t\tif (isRippleEnabled) {\n\t\t\t\trippleOnPointerDown(event);\n\t\t\t}\n\t\t\tuserOnPointerDown?.(\n\t\t\t\tevent as unknown as React.PointerEvent,\n\t\t\t);\n\t\t};\n\n\t\tconst baseClass = cn(\n\t\t\tcardVariants({ variant: safeVariant }),\n\t\t\t// Disabled state:\n\t\t\t// - pointer-events-none → disable interactions completely\n\t\t\t// - opacity-[0.38] → MD3 DisabledContainerOpacity\n\t\t\tdisabled && \"pointer-events-none opacity-[0.38]\",\n\t\t\tclassName,\n\t\t);\n\n\t\t// MD3 State Layer (Hover: 8%, Focus: 10%, Pressed: 10%, Dragged: 16%)\n\t\t// Applied to interactive elements via absolute inset ::before pseudo-element\n\t\tconst interactiveClass = cn(\n\t\t\t// Remove default outline, use MD3 state overlay & elevation for focus\n\t\t\t\"focus-visible:outline-none focus:outline-none group\",\n\t\t\t// Base pseudo-element overlay layer (when stateLayer is enabled)\n\t\t\tisStateLayerEnabled && [\n\t\t\t\t\"before:absolute before:inset-0 before:pointer-events-none before:bg-m3-on-surface before:opacity-0 before:transition-opacity before:duration-200\",\n\t\t\t\tisHoverEnabled && \"hover:before:opacity-[0.08]\",\n\t\t\t\t\"focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]\",\n\t\t\t\tdraggable && \"active:before:opacity-[0.16]\",\n\t\t\t],\n\t\t\t// Outlined interactive card: smooth transition of border color to m3-outline on hover/focus/press\n\t\t\tsafeVariant === \"outlined\" &&\n\t\t\t\t\"transition-colors duration-200 hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline\",\n\t\t);\n\n\t\t// Merge user-supplied motion props with elevation motion presets\n\t\tconst mergedWhileHover =\n\t\t\televationProps.whileHover || whileHover\n\t\t\t\t? {\n\t\t\t\t\t\t...elevationProps.whileHover,\n\t\t\t\t\t\t...(typeof whileHover === \"object\" ? whileHover : {}),\n\t\t\t\t\t}\n\t\t\t\t: undefined;\n\n\t\tconst mergedWhileTap =\n\t\t\televationProps.whileTap || whileTap\n\t\t\t\t? {\n\t\t\t\t\t\t...elevationProps.whileTap,\n\t\t\t\t\t\t...(typeof whileTap === \"object\" ? whileTap : {}),\n\t\t\t\t\t}\n\t\t\t\t: undefined;\n\n\t\tconst mergedWhileFocus =\n\t\t\televationProps.whileFocus || whileFocus\n\t\t\t\t? {\n\t\t\t\t\t\t...elevationProps.whileFocus,\n\t\t\t\t\t\t...(typeof whileFocus === \"object\" ? whileFocus : {}),\n\t\t\t\t\t}\n\t\t\t\t: undefined;\n\n\t\tconst mergedWhileDrag =\n\t\t\televationProps.whileDrag || whileDrag\n\t\t\t\t? {\n\t\t\t\t\t\t...elevationProps.whileDrag,\n\t\t\t\t\t\t...(typeof whileDrag === \"object\" ? whileDrag : {}),\n\t\t\t\t\t}\n\t\t\t\t: undefined;\n\n\t\tconst mergedTransition =\n\t\t\televationProps.transition || transition\n\t\t\t\t? {\n\t\t\t\t\t\t...elevationProps.transition,\n\t\t\t\t\t\t...(typeof transition === \"object\" ? transition : {}),\n\t\t\t\t\t}\n\t\t\t\t: undefined;\n\n\t\t// ── asChild Delegation ───────────────────────────────────────────\n\t\tif (asChild) {\n\t\t\tconst child = React.Children.only(children) as React.ReactElement<{\n\t\t\t\tchildren?: React.ReactNode;\n\t\t\t}>;\n\t\t\tconst innerContent = (\n\t\t\t\t<>\n\t\t\t\t\t{isRippleEnabled && (\n\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\t\tclassName={cn(baseClass, interactiveClass)}\n\t\t\t\t\t\taria-disabled={disabled ? true : undefined}\n\t\t\t\t\t\ttabIndex={disabled ? -1 : 0}\n\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t{...(props as React.HTMLAttributes)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{React.cloneElement(child, { children: innerContent })}\n\t\t\t\t\t\n\t\t\t\t \n\t\t\t);\n\t\t}\n\n\t\t// ── Static Card – no interaction ─────────────────────────────────\n\t\tif (!isInteractive) {\n\t\t\treturn (\n\t\t\t\t}\n\t\t\t\t\tclassName={baseClass}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tboxShadow: elevationProps.animate.boxShadow,\n\t\t\t\t\t\t...((props as React.HTMLAttributes).style || {}),\n\t\t\t\t\t}}\n\t\t\t\t\taria-disabled={disabled ? true : undefined}\n\t\t\t\t\t{...(props as React.HTMLAttributes)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t
\n\t\t\t);\n\t\t}\n\n\t\t// ── Safe rel: automatically add \"noreferrer\" when target=\"_blank\" ─\n\t\tconst safeRel = href\n\t\t\t? (relProp ?? (target === \"_blank\" ? \"noreferrer\" : undefined))\n\t\t\t: undefined;\n\n\t\t// ── Link Card ────────────────────────────────────────────────────\n\t\tif (href) {\n\t\t\treturn (\n\t\t\t\t{avatar}
}\n\t\t\t\t{title || subheader ? (\n\t\t\t\t\t\n\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t
\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t\t{action && (\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{subheader && (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{subheader}\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t)}\n\t\t\t\t\t{action}
\n\t\t\t\t)}\n\t\t\t\n\t\t);\n\t},\n);\nCardHeader.displayName = \"CardHeader\";\n\n// ─────────────────────────────────────────────────────────────────────────────\n// CardMedia\n// ─────────────────────────────────────────────────────────────────────────────\nconst ASPECT_RATIO_CLASSES = {\n\tvideo: \"aspect-video\",\n\tsquare: \"aspect-square\",\n\twide: \"aspect-[21/9]\",\n\tauto: \"\",\n} as const;\n\nexport const CardMedia = React.forwardRef\n\t\t\t\t\t\t\t{renderItem(item, index)}\n\t\t\t\t\t\t
\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\n\t\t);\n\t}\n\n\t// RSC Mode: Render direct children\n\treturn (\n\t\t\n\t\t\t\t\t\t{child}\n\t\t\t\t\t
\n\t\t\t\t);\n\t\t\t})}\n\t\t\n\t);\n}\n","/**\n * @file carousel-item.tsx\n * Single Carousel slide wrapper supporting ARIA roles, dynamic clip-path masks,\n * inner parallax content translation, and MD3 touch ripples.\n *\n * @see docs/m3/carousel/Carousel_Specs_Material_Design_3.md\n * @see docs/m3/carousel/Carousel_Accessibility_Material_Design_3.md\n */\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Ripple, useRippleState } from \"../ripple\";\nimport type { CarouselLayout } from \"./carousel.types\";\n\nexport interface CarouselItemProps\n\textends React.HTMLAttributes