@cakejp/design-system 0.17.1 → 0.20.0

package/dist/index.js

@@ -1,149 +1,150 @@
-"use client";
 /* empty css          */
 import { cn as t } from "./lib/utils.js";
 import { FOCUS_RING as n, FOCUS_RING_INSET as i, FOCUS_RING_WITHIN as p } from "./lib/focus-ring.js";
-import { toast as l } from "sonner";
+import { toast as m } from "sonner";
 import { Accordion as u, AccordionContent as f, AccordionItem as d, AccordionTrigger as g } from "./components/foundations/accordion.js";
-import { Alert as c, AlertDescription as s, AlertTitle as S } from "./components/foundations/alert.js";
-import { AlertDialog as D, AlertDialogAction as M, AlertDialogCancel as T, AlertDialogContent as I, AlertDialogDescription as v, AlertDialogFooter as h, AlertDialogHeader as F, AlertDialogOverlay as P, AlertDialogPortal as w, AlertDialogTitle as A, AlertDialogTrigger as B } from "./components/foundations/alert-dialog.js";
-import { AspectRatio as k } from "./components/foundations/aspect-ratio.js";
+import { Alert as c, AlertDescription as s, AlertTitle as b } from "./components/foundations/alert.js";
+import { AlertDialog as D, AlertDialogAction as T, AlertDialogCancel as M, AlertDialogContent as I, AlertDialogDescription as v, AlertDialogFooter as h, AlertDialogHeader as F, AlertDialogOverlay as P, AlertDialogPortal as w, AlertDialogTitle as A, AlertDialogTrigger as k } from "./components/foundations/alert-dialog.js";
+import { AspectRatio as R } from "./components/foundations/aspect-ratio.js";
 import { Avatar as L, AvatarFallback as N, AvatarImage as G } from "./components/foundations/avatar.js";
-import { Badge as H, badgeVariants as O } from "./components/foundations/badge.js";
+import { Badge as V, badgeVariants as O } from "./components/foundations/badge.js";
 import { Breadcrumb as U, BreadcrumbEllipsis as _, BreadcrumbItem as W, BreadcrumbLink as Q, BreadcrumbList as z, BreadcrumbPage as K, BreadcrumbSeparator as j } from "./components/foundations/breadcrumb.js";
 import { Button as J, buttonVariants as X } from "./components/foundations/button.js";
 import { Calendar as Z } from "./components/foundations/calendar.js";
-import { Card as oo, CardAction as eo, CardContent as ro, CardDescription as to, CardFooter as ao, CardHeader as no, CardTitle as io, cardVariants as po } from "./components/foundations/card.js";
-import { Checkbox as lo } from "./components/foundations/checkbox.js";
-import { CheckboxCardGroup as uo, CheckboxCardItem as fo } from "./components/foundations/checkbox-card.js";
-import { CheckboxGroup as Co, CheckboxGroupItem as co } from "./components/foundations/checkbox-group.js";
-import { Collapsible as So, CollapsibleContent as bo, CollapsibleTrigger as Do } from "./components/foundations/collapsible.js";
-import { Command as To, CommandDialog as Io, CommandEmpty as vo, CommandGroup as ho, CommandInput as Fo, CommandItem as Po, CommandList as wo, CommandSeparator as Ao, CommandShortcut as Bo } from "./components/foundations/command.js";
-import { ContextMenu as ko, ContextMenuCheckboxItem as yo, ContextMenuContent as Lo, ContextMenuGroup as No, ContextMenuItem as Go, ContextMenuLabel as Vo, ContextMenuPortal as Ho, ContextMenuRadioGroup as Oo, ContextMenuRadioItem as Eo, ContextMenuSeparator as Uo, ContextMenuShortcut as _o, ContextMenuSub as Wo, ContextMenuSubContent as Qo, ContextMenuSubTrigger as zo, ContextMenuTrigger as Ko } from "./components/foundations/context-menu.js";
-import { DataTable as qo } from "./components/foundations/data-table.js";
-import { Dialog as Xo, DialogClose as Yo, DialogContent as Zo, DialogDescription as $o, DialogFooter as oe, DialogHeader as ee, DialogOverlay as re, DialogPortal as te, DialogTitle as ae, DialogTrigger as ne } from "./components/foundations/dialog.js";
-import { Drawer as pe, DrawerClose as me, DrawerContent as le, DrawerDescription as xe, DrawerFooter as ue, DrawerHeader as fe, DrawerOverlay as de, DrawerPortal as ge, DrawerTitle as Ce, DrawerTrigger as ce } from "./components/foundations/drawer.js";
-import { DropdownMenu as Se, DropdownMenuCheckboxItem as be, DropdownMenuContent as De, DropdownMenuGroup as Me, DropdownMenuItem as Te, DropdownMenuLabel as Ie, DropdownMenuPortal as ve, DropdownMenuRadioGroup as he, DropdownMenuRadioItem as Fe, DropdownMenuSeparator as Pe, DropdownMenuShortcut as we, DropdownMenuSub as Ae, DropdownMenuSubContent as Be, DropdownMenuSubTrigger as Re, DropdownMenuTrigger as ke } from "./components/foundations/dropdown-menu.js";
-import { Field as Le, FieldDescription as Ne, FieldError as Ge, FieldGroup as Ve, FieldLabel as He, FieldLegend as Oe, FieldSeparator as Ee, FieldSet as Ue, fieldVariants as _e } from "./components/foundations/field.js";
-import { FileInput as Qe, formatFileNames as ze, validateFileSize as Ke } from "./components/foundations/file-input.js";
-import { Form as qe, FormControl as Je, FormDescription as Xe, FormField as Ye, FormItem as Ze, FormLabel as $e, FormMessage as or, useFormField as er } from "./components/foundations/form.js";
-import { HoverCard as tr, HoverCardContent as ar, HoverCardTrigger as nr } from "./components/foundations/hover-card.js";
-import { IconBadge as pr, iconBadgeVariants as mr } from "./components/foundations/icon-badge.js";
-import { Input as xr } from "./components/foundations/input.js";
-import { Label as fr } from "./components/foundations/label.js";
-import { Menubar as gr, MenubarCheckboxItem as Cr, MenubarContent as cr, MenubarGroup as sr, MenubarItem as Sr, MenubarLabel as br, MenubarMenu as Dr, MenubarPortal as Mr, MenubarRadioGroup as Tr, MenubarRadioItem as Ir, MenubarSeparator as vr, MenubarShortcut as hr, MenubarSub as Fr, MenubarSubContent as Pr, MenubarSubTrigger as wr, MenubarTrigger as Ar } from "./components/foundations/menubar.js";
-import { NavigationMenu as Rr, NavigationMenuContent as kr, NavigationMenuIndicator as yr, NavigationMenuItem as Lr, NavigationMenuLink as Nr, NavigationMenuList as Gr, NavigationMenuTrigger as Vr, NavigationMenuViewport as Hr, navigationMenuTriggerStyle as Or } from "./components/foundations/navigation-menu.js";
-import { Pagination as Ur, PaginationContent as _r, PaginationEllipsis as Wr, PaginationItem as Qr, PaginationLink as zr, PaginationNext as Kr, PaginationPrevious as jr } from "./components/foundations/pagination.js";
-import { getPaginationRange as Jr } from "./lib/pagination-range.js";
-import { Popover as Yr, PopoverAnchor as Zr, PopoverContent as $r, PopoverTrigger as ot } from "./components/foundations/popover.js";
-import { Progress as rt } from "./components/foundations/progress.js";
-import { ResponsiveDialog as at, ResponsiveDialogClose as nt, ResponsiveDialogContent as it, ResponsiveDialogDescription as pt, ResponsiveDialogFooter as mt, ResponsiveDialogHeader as lt, ResponsiveDialogTitle as xt, ResponsiveDialogTrigger as ut, useIsMobile as ft } from "./components/foundations/responsive-dialog.js";
-import { RadioGroup as gt, RadioGroupItem as Ct } from "./components/foundations/radio-group.js";
-import { ScrollArea as st, ScrollBar as St } from "./components/foundations/scroll-area.js";
-import { Select as Dt, SelectContent as Mt, SelectGroup as Tt, SelectItem as It, SelectLabel as vt, SelectScrollDownButton as ht, SelectScrollUpButton as Ft, SelectSeparator as Pt, SelectTrigger as wt, SelectValue as At } from "./components/foundations/select.js";
-import { Separator as Rt } from "./components/foundations/separator.js";
-import { Sheet as yt, SheetClose as Lt, SheetContent as Nt, SheetDescription as Gt, SheetFooter as Vt, SheetHeader as Ht, SheetTitle as Ot, SheetTrigger as Et } from "./components/foundations/sheet.js";
-import { Skeleton as _t } from "./components/foundations/skeleton.js";
-import { SkipLink as Qt } from "./components/foundations/skip-link.js";
-import { Slider as Kt } from "./components/foundations/slider.js";
-import { Spinner as qt } from "./components/foundations/spinner.js";
-import { SocialIcon as Xt } from "./components/foundations/social-icon.js";
-import { Switch as Zt } from "./components/foundations/switch.js";
-import { Table as oa, TableBody as ea, TableCaption as ra, TableCell as ta, TableFooter as aa, TableHead as na, TableHeader as ia, TableRow as pa } from "./components/foundations/table.js";
-import { Tabs as la, TabsContent as xa, TabsList as ua, TabsTrigger as fa } from "./components/foundations/tabs.js";
-import { Textarea as ga } from "./components/foundations/textarea.js";
-import { Toaster as ca } from "./components/foundations/sonner.js";
-import { Toggle as Sa, toggleVariants as ba } from "./components/foundations/toggle.js";
-import { ToggleGroup as Ma, ToggleGroupItem as Ta } from "./components/foundations/toggle-group.js";
-import { Tooltip as va, TooltipContent as ha, TooltipProvider as Fa, TooltipTrigger as Pa } from "./components/foundations/tooltip.js";
-import { AdminSideNav as Aa } from "./components/primitives/admin-side-nav.js";
-import { AdminHeader as Ra } from "./components/primitives/admin-header.js";
-import { CoachMark as ya } from "./components/primitives/coach-mark.js";
-import { Combobox as Na } from "./components/primitives/combobox.js";
-import { BannerCarousel as Va } from "./components/primitives/banner-carousel.js";
-import { ContentCarousel as Oa } from "./components/primitives/content-carousel.js";
-import { MultiSelect as Ua } from "./components/primitives/multi-select.js";
-import { StickyActionBar as Wa } from "./components/primitives/sticky-action-bar.js";
-import { BottomTabBar as za } from "./components/primitives/bottom-tab-bar.js";
-import { BulkActionBar as ja } from "./components/primitives/bulk-action-bar.js";
-import { CategoryShortcuts as Ja } from "./components/primitives/category-shortcuts.js";
-import { CategoryScroll as Ya } from "./components/primitives/category-scroll.js";
-import { ChatComposer as $a } from "./components/primitives/chat-composer.js";
-import { Chip as en } from "./components/primitives/chip.js";
-import { StandardPageShell as tn, StandardPageShell as an } from "./components/primitives/standard-page-shell.js";
-import { EmptyState as pn } from "./components/primitives/empty-state.js";
-import { DatePicker as ln, DateTimePicker as xn } from "./components/primitives/date-picker.js";
-import { ErrorState as fn, NotFoundIllustration as dn } from "./components/primitives/error-state.js";
-import { FilterBar as Cn } from "./components/primitives/filter-bar.js";
-import { Footer as sn } from "./components/primitives/footer.js";
-import { FormField as bn } from "./components/primitives/form-field.js";
-import { FunnelShell as Mn } from "./components/primitives/funnel-shell.js";
-import { Header as In } from "./components/primitives/header.js";
-import { ImageCarousel as hn } from "./components/primitives/image-carousel.js";
-import { ImageGallery as Pn } from "./components/primitives/image-gallery.js";
-import { ImageInput as An, imageInputPreviewVariants as Bn } from "./components/primitives/image-input.js";
-import { ImageUploader as kn } from "./components/primitives/image-uploader.js";
-import { KebabMenu as Ln } from "./components/primitives/kebab-menu.js";
-import { ListItem as Gn } from "./components/primitives/list-item.js";
-import { MenuDrawer as Hn } from "./components/primitives/menu-drawer.js";
-import { SubNav as En } from "./components/primitives/sub-nav.js";
-import { NotificationBadge as _n, notificationBadgeVariants as Wn } from "./components/primitives/notification-badge.js";
-import { NotificationList as zn } from "./components/primitives/notification-list.js";
-import { PriceDisplay as jn, priceDisplayVariants as qn } from "./components/primitives/price-display.js";
-import { ProgressSteps as Xn } from "./components/primitives/progress-steps.js";
-import { Timeline as Zn } from "./components/primitives/timeline.js";
-import { NumberInput as oi, QuantitySelector as ei } from "./components/primitives/number-input.js";
-import { SearchBar as ti } from "./components/primitives/search-bar.js";
-import { SearchPanel as ni } from "./components/primitives/search-panel.js";
-import { Container as pi, containerVariants as mi } from "./components/primitives/container.js";
-import { Section as xi, sectionScrimVariants as ui, sectionVariants as fi } from "./components/primitives/section.js";
-import { SectionHeader as gi } from "./components/primitives/section-header.js";
-import { SectionNav as ci } from "./components/primitives/section-nav.js";
-import { ShareButtons as Si } from "./components/primitives/share-buttons.js";
-import { SideNav as Di } from "./components/primitives/side-nav.js";
-import { SocialLoginButton as Ti } from "./components/primitives/social-login-button.js";
-import { StatusCountTabs as vi } from "./components/primitives/status-count-tabs.js";
-import { Tag as Fi, tagVariants as Pi } from "./components/primitives/tag.js";
-import { WorkspaceShell as Ai, WorkspaceShell as Bi } from "./components/primitives/workspace-shell.js";
-import { AdminShell as ki, AdminShell as yi, MissingComponent as Li } from "./components/ec/admin-shell.js";
-import { AnniversaryCard as Gi } from "./components/ec/anniversary-card.js";
-import { CakeLogo as Hi } from "./components/ec/cake-logo.js";
-import { ChartControls as Ei } from "./components/ec/chart-controls.js";
-import { CountdownTimer as _i } from "./components/ec/countdown-timer.js";
-import { CouponCard as Qi } from "./components/ec/coupon-card.js";
-import { DeliveryCalendar as Ki } from "./components/ec/delivery-calendar.js";
-import { mypageMenuGroups as qi } from "./components/ec/_mypage-menu-data.js";
-import { OrderSection as Xi } from "./components/ec/order-section.js";
-import { OrderSummary as Zi } from "./components/ec/order-summary.js";
-import { CreditCardIcon as op, PaymentMethodDisplay as ep } from "./components/ec/payment-method.js";
-import { ProductCard as tp } from "./components/ec/product-card.js";
-import { ProductCarousel as np } from "./components/ec/product-carousel.js";
-import { ProductCTA as pp } from "./components/ec/product-cta.js";
-import { ProductDetailBar as lp } from "./components/ec/product-detail-bar.js";
-import { ProductDetailSidebar as up } from "./components/ec/product-detail-sidebar.js";
-import { ProductListItem as dp } from "./components/ec/product-list-item.js";
-import { OptionImageUpload as Cp, OptionQuantity as cp, OptionSelect as sp, OptionText as Sp, ProductOption as bp } from "./components/ec/product-option.js";
-import { RatingStars as Mp, SparkleIcon as Tp } from "./components/ec/rating-stars.js";
-import { ReviewCard as vp } from "./components/ec/review-card.js";
-import { ReviewForm as Fp } from "./components/ec/review-form.js";
-import { ReviewItem as wp, ReviewSummary as Ap } from "./components/ec/review-summary.js";
-import { MypageShell as Rp } from "./components/ec/mypage-shell.js";
-import { ShopCard as yp } from "./components/ec/shop-card.js";
-import { StatCard as Np } from "./components/ec/stat-card.js";
-import { chipVariants as Vp } from "./components/foundations/chip-variants.js";
+import { Card as ee, CardAction as oe, CardContent as re, CardDescription as te, CardFooter as ae, CardHeader as ne, CardTitle as ie, cardVariants as pe } from "./components/foundations/card.js";
+import { Checkbox as me } from "./components/foundations/checkbox.js";
+import { CheckboxCardGroup as ue, CheckboxCardItem as fe } from "./components/foundations/checkbox-card.js";
+import { CheckboxGroup as ge, CheckboxGroupItem as Ce } from "./components/foundations/checkbox-group.js";
+import { Collapsible as se, CollapsibleContent as be, CollapsibleTrigger as Se } from "./components/foundations/collapsible.js";
+import { Command as Te, CommandDialog as Me, CommandEmpty as Ie, CommandGroup as ve, CommandInput as he, CommandItem as Fe, CommandList as Pe, CommandSeparator as we, CommandShortcut as Ae } from "./components/foundations/command.js";
+import { ContextMenu as Be, ContextMenuCheckboxItem as Re, ContextMenuContent as ye, ContextMenuGroup as Le, ContextMenuItem as Ne, ContextMenuLabel as Ge, ContextMenuPortal as He, ContextMenuRadioGroup as Ve, ContextMenuRadioItem as Oe, ContextMenuSeparator as Ee, ContextMenuShortcut as Ue, ContextMenuSub as _e, ContextMenuSubContent as We, ContextMenuSubTrigger as Qe, ContextMenuTrigger as ze } from "./components/foundations/context-menu.js";
+import { DataTable as je, DataTableActionCell as qe, DataTableAddRow as Je, DataTableAvatarCell as Xe, DataTableBody as Ye, DataTableBulkActions as Ze, DataTableCell as $e, DataTableCheckboxCell as eo, DataTableDragHandleCell as oo, DataTableEmptyState as ro, DataTableHead as to, DataTableHeader as ao, DataTableImageCell as no, DataTableInputCell as io, DataTableLinkCell as po, DataTableNumberCell as lo, DataTableRow as mo, DataTableSectionRow as xo, DataTableSelectCell as uo, DataTableTable as fo } from "./components/foundations/data-table.js";
+import { Dialog as Co, DialogClose as co, DialogContent as so, DialogDescription as bo, DialogFooter as So, DialogHeader as Do, DialogOverlay as To, DialogPortal as Mo, DialogTitle as Io, DialogTrigger as vo } from "./components/foundations/dialog.js";
+import { Drawer as Fo, DrawerClose as Po, DrawerContent as wo, DrawerDescription as Ao, DrawerFooter as ko, DrawerHeader as Bo, DrawerOverlay as Ro, DrawerPortal as yo, DrawerTitle as Lo, DrawerTrigger as No } from "./components/foundations/drawer.js";
+import { DropdownMenu as Ho, DropdownMenuCheckboxItem as Vo, DropdownMenuContent as Oo, DropdownMenuGroup as Eo, DropdownMenuItem as Uo, DropdownMenuLabel as _o, DropdownMenuPortal as Wo, DropdownMenuRadioGroup as Qo, DropdownMenuRadioItem as zo, DropdownMenuSeparator as Ko, DropdownMenuShortcut as jo, DropdownMenuSub as qo, DropdownMenuSubContent as Jo, DropdownMenuSubTrigger as Xo, DropdownMenuTrigger as Yo } from "./components/foundations/dropdown-menu.js";
+import { Field as $o, FieldDescription as er, FieldError as or, FieldGroup as rr, FieldLabel as tr, FieldLegend as ar, FieldSeparator as nr, FieldSet as ir, fieldVariants as pr } from "./components/foundations/field.js";
+import { FileInput as mr, formatFileNames as xr, validateFileSize as ur } from "./components/foundations/file-input.js";
+import { Form as dr, FormControl as gr, FormDescription as Cr, FormField as cr, FormItem as sr, FormLabel as br, FormMessage as Sr, useFormField as Dr } from "./components/foundations/form.js";
+import { HoverCard as Mr, HoverCardContent as Ir, HoverCardTrigger as vr } from "./components/foundations/hover-card.js";
+import { IconBadge as Fr, iconBadgeVariants as Pr } from "./components/foundations/icon-badge.js";
+import { Input as Ar } from "./components/foundations/input.js";
+import { Label as Br } from "./components/foundations/label.js";
+import { Menubar as yr, MenubarCheckboxItem as Lr, MenubarContent as Nr, MenubarGroup as Gr, MenubarItem as Hr, MenubarLabel as Vr, MenubarMenu as Or, MenubarPortal as Er, MenubarRadioGroup as Ur, MenubarRadioItem as _r, MenubarSeparator as Wr, MenubarShortcut as Qr, MenubarSub as zr, MenubarSubContent as Kr, MenubarSubTrigger as jr, MenubarTrigger as qr } from "./components/foundations/menubar.js";
+import { NavigationMenu as Xr, NavigationMenuContent as Yr, NavigationMenuIndicator as Zr, NavigationMenuItem as $r, NavigationMenuLink as et, NavigationMenuList as ot, NavigationMenuTrigger as rt, NavigationMenuViewport as tt, navigationMenuTriggerStyle as at } from "./components/foundations/navigation-menu.js";
+import { Pagination as it, PaginationContent as pt, PaginationEllipsis as lt, PaginationItem as mt, PaginationLink as xt, PaginationNext as ut, PaginationPrevious as ft } from "./components/foundations/pagination.js";
+import { getPaginationRange as gt } from "./lib/pagination-range.js";
+import { Popover as ct, PopoverAnchor as st, PopoverContent as bt, PopoverTrigger as St } from "./components/foundations/popover.js";
+import { Progress as Tt } from "./components/foundations/progress.js";
+import { ResponsiveDialog as It, ResponsiveDialogClose as vt, ResponsiveDialogContent as ht, ResponsiveDialogDescription as Ft, ResponsiveDialogFooter as Pt, ResponsiveDialogHeader as wt, ResponsiveDialogTitle as At, ResponsiveDialogTrigger as kt, useIsMobile as Bt } from "./components/foundations/responsive-dialog.js";
+import { RadioGroup as yt, RadioGroupItem as Lt } from "./components/foundations/radio-group.js";
+import { ScrollArea as Gt, ScrollBar as Ht } from "./components/foundations/scroll-area.js";
+import { Select as Ot, SelectContent as Et, SelectGroup as Ut, SelectItem as _t, SelectLabel as Wt, SelectScrollDownButton as Qt, SelectScrollUpButton as zt, SelectSeparator as Kt, SelectTrigger as jt, SelectValue as qt } from "./components/foundations/select.js";
+import { Separator as Xt } from "./components/foundations/separator.js";
+import { Sheet as Zt, SheetClose as $t, SheetContent as ea, SheetDescription as oa, SheetFooter as ra, SheetHeader as ta, SheetTitle as aa, SheetTrigger as na } from "./components/foundations/sheet.js";
+import { Skeleton as pa } from "./components/foundations/skeleton.js";
+import { SkipLink as ma } from "./components/foundations/skip-link.js";
+import { Slider as ua } from "./components/foundations/slider.js";
+import { Spinner as da } from "./components/foundations/spinner.js";
+import { SocialIcon as Ca } from "./components/foundations/social-icon.js";
+import { Switch as sa } from "./components/foundations/switch.js";
+import { Table as Sa, TableBody as Da, TableCaption as Ta, TableCell as Ma, TableFooter as Ia, TableHead as va, TableHeader as ha, TableRow as Fa } from "./components/foundations/table.js";
+import { Tabs as wa, TabsContent as Aa, TabsList as ka, TabsTrigger as Ba } from "./components/foundations/tabs.js";
+import { Textarea as ya } from "./components/foundations/textarea.js";
+import { Toaster as Na } from "./components/foundations/sonner.js";
+import { Toggle as Ha, toggleVariants as Va } from "./components/foundations/toggle.js";
+import { ToggleGroup as Ea, ToggleGroupItem as Ua } from "./components/foundations/toggle-group.js";
+import { Tooltip as Wa, TooltipContent as Qa, TooltipProvider as za, TooltipTrigger as Ka } from "./components/foundations/tooltip.js";
+import { AdminSideNav as qa } from "./components/primitives/admin-side-nav.js";
+import { AdminHeader as Xa } from "./components/primitives/admin-header.js";
+import { CoachMark as Za } from "./components/primitives/coach-mark.js";
+import { Combobox as en } from "./components/primitives/combobox.js";
+import { BannerCarousel as rn } from "./components/primitives/banner-carousel.js";
+import { ContentCarousel as an } from "./components/primitives/content-carousel.js";
+import { MultiSelect as pn } from "./components/primitives/multi-select.js";
+import { StickyActionBar as mn } from "./components/primitives/sticky-action-bar.js";
+import { BottomTabBar as un } from "./components/primitives/bottom-tab-bar.js";
+import { BulkActionBar as dn } from "./components/primitives/bulk-action-bar.js";
+import { CategoryShortcuts as Cn } from "./components/primitives/category-shortcuts.js";
+import { CategoryScroll as sn } from "./components/primitives/category-scroll.js";
+import { ChatComposer as Sn } from "./components/primitives/chat-composer.js";
+import { Chip as Tn } from "./components/primitives/chip.js";
+import { Prose as In } from "./components/primitives/prose.js";
+import { ContentCard as hn, ContentList as Fn } from "./components/primitives/content-card.js";
+import { StandardPageShell as wn, StandardPageShell as An } from "./components/primitives/standard-page-shell.js";
+import { EmptyState as Bn } from "./components/primitives/empty-state.js";
+import { DatePicker as yn, DateTimePicker as Ln } from "./components/primitives/date-picker.js";
+import { ErrorState as Gn, NotFoundIllustration as Hn } from "./components/primitives/error-state.js";
+import { FilterBar as On } from "./components/primitives/filter-bar.js";
+import { Footer as Un } from "./components/primitives/footer.js";
+import { FormField as Wn } from "./components/primitives/form-field.js";
+import { FunnelShell as zn } from "./components/primitives/funnel-shell.js";
+import { Header as jn } from "./components/primitives/header.js";
+import { ImageCarousel as Jn } from "./components/primitives/image-carousel.js";
+import { ImageGallery as Yn } from "./components/primitives/image-gallery.js";
+import { ImageInput as $n, imageInputPreviewVariants as ei } from "./components/primitives/image-input.js";
+import { ImageUploader as ri } from "./components/primitives/image-uploader.js";
+import { KebabMenu as ai } from "./components/primitives/kebab-menu.js";
+import { ListItem as ii } from "./components/primitives/list-item.js";
+import { MenuDrawer as li } from "./components/primitives/menu-drawer.js";
+import { SubNav as xi } from "./components/primitives/sub-nav.js";
+import { NotificationBadge as fi, notificationBadgeVariants as di } from "./components/primitives/notification-badge.js";
+import { NotificationList as Ci } from "./components/primitives/notification-list.js";
+import { PriceDisplay as si, priceDisplayVariants as bi } from "./components/primitives/price-display.js";
+import { ProgressSteps as Di } from "./components/primitives/progress-steps.js";
+import { Timeline as Mi } from "./components/primitives/timeline.js";
+import { NumberInput as vi, QuantitySelector as hi } from "./components/primitives/number-input.js";
+import { SearchBar as Pi } from "./components/primitives/search-bar.js";
+import { SearchPanel as Ai } from "./components/primitives/search-panel.js";
+import { Container as Bi, containerVariants as Ri } from "./components/primitives/container.js";
+import { Section as Li, sectionScrimVariants as Ni, sectionVariants as Gi } from "./components/primitives/section.js";
+import { SectionHeader as Vi } from "./components/primitives/section-header.js";
+import { SectionNav as Ei } from "./components/primitives/section-nav.js";
+import { ShareButtons as _i } from "./components/primitives/share-buttons.js";
+import { SideNav as Qi } from "./components/primitives/side-nav.js";
+import { SocialLoginButton as Ki } from "./components/primitives/social-login-button.js";
+import { StatusCountTabs as qi } from "./components/primitives/status-count-tabs.js";
+import { Tag as Xi, tagVariants as Yi } from "./components/primitives/tag.js";
+import { WorkspaceShell as $i, WorkspaceShell as ep } from "./components/primitives/workspace-shell.js";
+import { AdminShell as rp, AdminShell as tp, MissingComponent as ap } from "./components/ec/admin-shell.js";
+import { AnniversaryCard as ip } from "./components/ec/anniversary-card.js";
+import { CakeLogo as lp } from "./components/ec/cake-logo.js";
+import { ChartControls as xp } from "./components/ec/chart-controls.js";
+import { CountdownTimer as fp } from "./components/ec/countdown-timer.js";
+import { CouponCard as gp } from "./components/ec/coupon-card.js";
+import { DeliveryCalendar as cp } from "./components/ec/delivery-calendar.js";
+import { mypageMenuGroups as bp } from "./components/ec/_mypage-menu-data.js";
+import { OrderSection as Dp } from "./components/ec/order-section.js";
+import { OrderSummary as Mp } from "./components/ec/order-summary.js";
+import { CreditCardIcon as vp, PaymentMethodDisplay as hp } from "./components/ec/payment-method.js";
+import { BookmarkRibbonIcon as Pp, ProductCard as wp } from "./components/ec/product-card.js";
+import { ProductCarousel as kp } from "./components/ec/product-carousel.js";
+import { ProductCTA as Rp } from "./components/ec/product-cta.js";
+import { ProductDetailBar as Lp } from "./components/ec/product-detail-bar.js";
+import { ProductDetailSidebar as Gp } from "./components/ec/product-detail-sidebar.js";
+import { ProductListItem as Vp } from "./components/ec/product-list-item.js";
+import { OptionImageUpload as Ep, OptionQuantity as Up, OptionSelect as _p, OptionText as Wp, ProductOption as Qp } from "./components/ec/product-option.js";
+import { RatingStars as Kp, SparkleIcon as jp } from "./components/ec/rating-stars.js";
+import { ReviewCard as Jp } from "./components/ec/review-card.js";
+import { ReviewForm as Yp } from "./components/ec/review-form.js";
+import { ReviewItem as $p, ReviewSummary as el } from "./components/ec/review-summary.js";
+import { MypageShell as rl } from "./components/ec/mypage-shell.js";
+import { ShopCard as al } from "./components/ec/shop-card.js";
+import { StatCard as il } from "./components/ec/stat-card.js";
+import { chipVariants as ll } from "./components/foundations/chip-variants.js";
 export {
   u as Accordion,
   f as AccordionContent,
   d as AccordionItem,
   g as AccordionTrigger,
-  Ra as AdminHeader,
-  ki as AdminLayout,
-  yi as AdminShell,
-  Aa as AdminSideNav,
+  Xa as AdminHeader,
+  rp as AdminLayout,
+  tp as AdminShell,
+  qa as AdminSideNav,
   c as Alert,
   s as AlertDescription,
   D as AlertDialog,
-  M as AlertDialogAction,
-  T as AlertDialogCancel,
+  T as AlertDialogAction,
+  M as AlertDialogCancel,
   I as AlertDialogContent,
   v as AlertDialogDescription,
   h as AlertDialogFooter,
@@ -151,16 +152,17 @@ export {
   P as AlertDialogOverlay,
   w as AlertDialogPortal,
   A as AlertDialogTitle,
-  B as AlertDialogTrigger,
-  S as AlertTitle,
-  Gi as AnniversaryCard,
-  k as AspectRatio,
+  k as AlertDialogTrigger,
+  b as AlertTitle,
+  ip as AnniversaryCard,
+  R as AspectRatio,
   L as Avatar,
   N as AvatarFallback,
   G as AvatarImage,
-  H as Badge,
-  Va as BannerCarousel,
-  za as BottomTabBar,
+  V as Badge,
+  rn as BannerCarousel,
+  Pp as BookmarkRibbonIcon,
+  un as BottomTabBar,
   U as Breadcrumb,
   _ as BreadcrumbEllipsis,
   W as BreadcrumbItem,
@@ -168,305 +170,327 @@ export {
   z as BreadcrumbList,
   K as BreadcrumbPage,
   j as BreadcrumbSeparator,
-  ja as BulkActionBar,
+  dn as BulkActionBar,
   J as Button,
-  bn as CakeFormField,
-  Hi as CakeLogo,
+  Wn as CakeFormField,
+  lp as CakeLogo,
   Z as Calendar,
-  oo as Card,
-  eo as CardAction,
-  ro as CardContent,
-  to as CardDescription,
-  ao as CardFooter,
-  no as CardHeader,
-  io as CardTitle,
-  Ya as CategoryScroll,
-  Ja as CategoryShortcuts,
-  Ei as ChartControls,
-  $a as ChatComposer,
-  lo as Checkbox,
-  uo as CheckboxCardGroup,
-  fo as CheckboxCardItem,
-  Co as CheckboxGroup,
-  co as CheckboxGroupItem,
-  en as Chip,
-  ya as CoachMark,
-  So as Collapsible,
-  bo as CollapsibleContent,
-  Do as CollapsibleTrigger,
-  Na as Combobox,
-  To as Command,
-  Io as CommandDialog,
-  vo as CommandEmpty,
-  ho as CommandGroup,
-  Fo as CommandInput,
-  Po as CommandItem,
-  wo as CommandList,
-  Ao as CommandSeparator,
-  Bo as CommandShortcut,
-  pi as Container,
-  Oa as ContentCarousel,
-  ko as ContextMenu,
-  yo as ContextMenuCheckboxItem,
-  Lo as ContextMenuContent,
-  No as ContextMenuGroup,
-  Go as ContextMenuItem,
-  Vo as ContextMenuLabel,
-  Ho as ContextMenuPortal,
-  Oo as ContextMenuRadioGroup,
-  Eo as ContextMenuRadioItem,
-  Uo as ContextMenuSeparator,
-  _o as ContextMenuShortcut,
-  Wo as ContextMenuSub,
-  Qo as ContextMenuSubContent,
-  zo as ContextMenuSubTrigger,
-  Ko as ContextMenuTrigger,
-  _i as CountdownTimer,
-  Qi as CouponCard,
-  op as CreditCardIcon,
-  qo as DataTable,
-  ln as DatePicker,
-  xn as DateTimePicker,
-  Ki as DeliveryCalendar,
-  Xo as Dialog,
-  Yo as DialogClose,
-  Zo as DialogContent,
-  $o as DialogDescription,
-  oe as DialogFooter,
-  ee as DialogHeader,
-  re as DialogOverlay,
-  te as DialogPortal,
-  ae as DialogTitle,
-  ne as DialogTrigger,
-  pe as Drawer,
-  me as DrawerClose,
-  le as DrawerContent,
-  xe as DrawerDescription,
-  ue as DrawerFooter,
-  fe as DrawerHeader,
-  de as DrawerOverlay,
-  ge as DrawerPortal,
-  Ce as DrawerTitle,
-  ce as DrawerTrigger,
-  Se as DropdownMenu,
-  be as DropdownMenuCheckboxItem,
-  De as DropdownMenuContent,
-  Me as DropdownMenuGroup,
-  Te as DropdownMenuItem,
-  Ie as DropdownMenuLabel,
-  ve as DropdownMenuPortal,
-  he as DropdownMenuRadioGroup,
-  Fe as DropdownMenuRadioItem,
-  Pe as DropdownMenuSeparator,
-  we as DropdownMenuShortcut,
-  Ae as DropdownMenuSub,
-  Be as DropdownMenuSubContent,
-  Re as DropdownMenuSubTrigger,
-  ke as DropdownMenuTrigger,
-  tn as EcPageShell,
-  pn as EmptyState,
-  fn as ErrorState,
+  ee as Card,
+  oe as CardAction,
+  re as CardContent,
+  te as CardDescription,
+  ae as CardFooter,
+  ne as CardHeader,
+  ie as CardTitle,
+  sn as CategoryScroll,
+  Cn as CategoryShortcuts,
+  xp as ChartControls,
+  Sn as ChatComposer,
+  me as Checkbox,
+  ue as CheckboxCardGroup,
+  fe as CheckboxCardItem,
+  ge as CheckboxGroup,
+  Ce as CheckboxGroupItem,
+  Tn as Chip,
+  Za as CoachMark,
+  se as Collapsible,
+  be as CollapsibleContent,
+  Se as CollapsibleTrigger,
+  en as Combobox,
+  Te as Command,
+  Me as CommandDialog,
+  Ie as CommandEmpty,
+  ve as CommandGroup,
+  he as CommandInput,
+  Fe as CommandItem,
+  Pe as CommandList,
+  we as CommandSeparator,
+  Ae as CommandShortcut,
+  Bi as Container,
+  hn as ContentCard,
+  an as ContentCarousel,
+  Fn as ContentList,
+  Be as ContextMenu,
+  Re as ContextMenuCheckboxItem,
+  ye as ContextMenuContent,
+  Le as ContextMenuGroup,
+  Ne as ContextMenuItem,
+  Ge as ContextMenuLabel,
+  He as ContextMenuPortal,
+  Ve as ContextMenuRadioGroup,
+  Oe as ContextMenuRadioItem,
+  Ee as ContextMenuSeparator,
+  Ue as ContextMenuShortcut,
+  _e as ContextMenuSub,
+  We as ContextMenuSubContent,
+  Qe as ContextMenuSubTrigger,
+  ze as ContextMenuTrigger,
+  fp as CountdownTimer,
+  gp as CouponCard,
+  vp as CreditCardIcon,
+  je as DataTable,
+  qe as DataTableActionCell,
+  Je as DataTableAddRow,
+  Xe as DataTableAvatarCell,
+  Ye as DataTableBody,
+  Ze as DataTableBulkActions,
+  $e as DataTableCell,
+  eo as DataTableCheckboxCell,
+  oo as DataTableDragHandleCell,
+  ro as DataTableEmptyState,
+  to as DataTableHead,
+  ao as DataTableHeader,
+  no as DataTableImageCell,
+  io as DataTableInputCell,
+  po as DataTableLinkCell,
+  lo as DataTableNumberCell,
+  mo as DataTableRow,
+  xo as DataTableSectionRow,
+  uo as DataTableSelectCell,
+  fo as DataTableTable,
+  yn as DatePicker,
+  Ln as DateTimePicker,
+  cp as DeliveryCalendar,
+  Co as Dialog,
+  co as DialogClose,
+  so as DialogContent,
+  bo as DialogDescription,
+  So as DialogFooter,
+  Do as DialogHeader,
+  To as DialogOverlay,
+  Mo as DialogPortal,
+  Io as DialogTitle,
+  vo as DialogTrigger,
+  Fo as Drawer,
+  Po as DrawerClose,
+  wo as DrawerContent,
+  Ao as DrawerDescription,
+  ko as DrawerFooter,
+  Bo as DrawerHeader,
+  Ro as DrawerOverlay,
+  yo as DrawerPortal,
+  Lo as DrawerTitle,
+  No as DrawerTrigger,
+  Ho as DropdownMenu,
+  Vo as DropdownMenuCheckboxItem,
+  Oo as DropdownMenuContent,
+  Eo as DropdownMenuGroup,
+  Uo as DropdownMenuItem,
+  _o as DropdownMenuLabel,
+  Wo as DropdownMenuPortal,
+  Qo as DropdownMenuRadioGroup,
+  zo as DropdownMenuRadioItem,
+  Ko as DropdownMenuSeparator,
+  jo as DropdownMenuShortcut,
+  qo as DropdownMenuSub,
+  Jo as DropdownMenuSubContent,
+  Xo as DropdownMenuSubTrigger,
+  Yo as DropdownMenuTrigger,
+  wn as EcPageShell,
+  Bn as EmptyState,
+  Gn as ErrorState,
   n as FOCUS_RING,
   i as FOCUS_RING_INSET,
   p as FOCUS_RING_WITHIN,
-  Le as Field,
-  Ne as FieldDescription,
-  Ge as FieldError,
-  Ve as FieldGroup,
-  He as FieldLabel,
-  Oe as FieldLegend,
-  Ee as FieldSeparator,
-  Ue as FieldSet,
-  Qe as FileInput,
-  Cn as FilterBar,
-  sn as Footer,
-  qe as Form,
-  Je as FormControl,
-  Xe as FormDescription,
-  Ye as FormField,
-  Ze as FormItem,
-  $e as FormLabel,
-  or as FormMessage,
-  Mn as FunnelShell,
-  In as Header,
-  tr as HoverCard,
-  ar as HoverCardContent,
-  nr as HoverCardTrigger,
-  pr as IconBadge,
-  hn as ImageCarousel,
-  Pn as ImageGallery,
-  An as ImageInput,
-  kn as ImageUploader,
-  xr as Input,
-  Ln as KebabMenu,
-  fr as Label,
-  Gn as ListItem,
-  Hn as MenuDrawer,
-  gr as Menubar,
-  Cr as MenubarCheckboxItem,
-  cr as MenubarContent,
-  sr as MenubarGroup,
-  Sr as MenubarItem,
-  br as MenubarLabel,
-  Dr as MenubarMenu,
-  Mr as MenubarPortal,
-  Tr as MenubarRadioGroup,
-  Ir as MenubarRadioItem,
-  vr as MenubarSeparator,
-  hr as MenubarShortcut,
-  Fr as MenubarSub,
-  Pr as MenubarSubContent,
-  wr as MenubarSubTrigger,
-  Ar as MenubarTrigger,
-  Li as MissingComponent,
-  Ua as MultiSelect,
-  Rp as MypageShell,
-  Rr as NavigationMenu,
-  kr as NavigationMenuContent,
-  yr as NavigationMenuIndicator,
-  Lr as NavigationMenuItem,
-  Nr as NavigationMenuLink,
-  Gr as NavigationMenuList,
-  Vr as NavigationMenuTrigger,
-  Hr as NavigationMenuViewport,
-  dn as NotFoundIllustration,
-  _n as NotificationBadge,
-  zn as NotificationList,
-  oi as NumberInput,
-  Cp as OptionImageUpload,
-  cp as OptionQuantity,
-  sp as OptionSelect,
-  Sp as OptionText,
-  Xi as OrderSection,
-  Zi as OrderSummary,
-  Ur as Pagination,
-  _r as PaginationContent,
-  Wr as PaginationEllipsis,
-  Qr as PaginationItem,
-  zr as PaginationLink,
-  Kr as PaginationNext,
-  jr as PaginationPrevious,
-  ep as PaymentMethodDisplay,
-  Yr as Popover,
-  Zr as PopoverAnchor,
-  $r as PopoverContent,
-  ot as PopoverTrigger,
-  jn as PriceDisplay,
-  pp as ProductCTA,
-  tp as ProductCard,
-  np as ProductCarousel,
-  lp as ProductDetailBar,
-  up as ProductDetailSidebar,
-  dp as ProductListItem,
-  bp as ProductOption,
-  rt as Progress,
-  Xn as ProgressSteps,
-  ei as QuantitySelector,
-  gt as RadioGroup,
-  Ct as RadioGroupItem,
-  Mp as RatingStars,
-  at as ResponsiveDialog,
-  nt as ResponsiveDialogClose,
-  it as ResponsiveDialogContent,
-  pt as ResponsiveDialogDescription,
-  mt as ResponsiveDialogFooter,
-  lt as ResponsiveDialogHeader,
-  xt as ResponsiveDialogTitle,
-  ut as ResponsiveDialogTrigger,
-  vp as ReviewCard,
-  Fp as ReviewForm,
-  wp as ReviewItem,
-  Ap as ReviewSummary,
-  st as ScrollArea,
-  St as ScrollBar,
-  ti as SearchBar,
-  ni as SearchPanel,
-  xi as Section,
-  gi as SectionHeader,
-  ci as SectionNav,
-  Dt as Select,
-  Mt as SelectContent,
-  Tt as SelectGroup,
-  It as SelectItem,
-  vt as SelectLabel,
-  ht as SelectScrollDownButton,
-  Ft as SelectScrollUpButton,
-  Pt as SelectSeparator,
-  wt as SelectTrigger,
-  At as SelectValue,
-  Rt as Separator,
-  Si as ShareButtons,
-  yt as Sheet,
-  Lt as SheetClose,
-  Nt as SheetContent,
-  Gt as SheetDescription,
-  Vt as SheetFooter,
-  Ht as SheetHeader,
-  Ot as SheetTitle,
-  Et as SheetTrigger,
-  yp as ShopCard,
-  Di as SideNav,
-  _t as Skeleton,
-  Qt as SkipLink,
-  Kt as Slider,
-  Xt as SocialIcon,
-  Ti as SocialLoginButton,
-  Tp as SparkleIcon,
-  qt as Spinner,
-  an as StandardPageShell,
-  Np as StatCard,
-  vi as StatusCountTabs,
-  Wa as StickyActionBar,
-  En as SubNav,
-  Zt as Switch,
-  oa as Table,
-  ea as TableBody,
-  ra as TableCaption,
-  ta as TableCell,
-  aa as TableFooter,
-  na as TableHead,
-  ia as TableHeader,
-  pa as TableRow,
-  la as Tabs,
-  xa as TabsContent,
-  ua as TabsList,
-  fa as TabsTrigger,
-  Fi as Tag,
-  ga as Textarea,
-  Zn as Timeline,
-  ca as Toaster,
-  Sa as Toggle,
-  Ma as ToggleGroup,
-  Ta as ToggleGroupItem,
-  va as Tooltip,
-  ha as TooltipContent,
-  Fa as TooltipProvider,
-  Pa as TooltipTrigger,
-  Ai as WorkspaceLayout,
-  Bi as WorkspaceShell,
+  $o as Field,
+  er as FieldDescription,
+  or as FieldError,
+  rr as FieldGroup,
+  tr as FieldLabel,
+  ar as FieldLegend,
+  nr as FieldSeparator,
+  ir as FieldSet,
+  mr as FileInput,
+  On as FilterBar,
+  Un as Footer,
+  dr as Form,
+  gr as FormControl,
+  Cr as FormDescription,
+  cr as FormField,
+  sr as FormItem,
+  br as FormLabel,
+  Sr as FormMessage,
+  zn as FunnelShell,
+  jn as Header,
+  Mr as HoverCard,
+  Ir as HoverCardContent,
+  vr as HoverCardTrigger,
+  Fr as IconBadge,
+  Jn as ImageCarousel,
+  Yn as ImageGallery,
+  $n as ImageInput,
+  ri as ImageUploader,
+  Ar as Input,
+  ai as KebabMenu,
+  Br as Label,
+  ii as ListItem,
+  li as MenuDrawer,
+  yr as Menubar,
+  Lr as MenubarCheckboxItem,
+  Nr as MenubarContent,
+  Gr as MenubarGroup,
+  Hr as MenubarItem,
+  Vr as MenubarLabel,
+  Or as MenubarMenu,
+  Er as MenubarPortal,
+  Ur as MenubarRadioGroup,
+  _r as MenubarRadioItem,
+  Wr as MenubarSeparator,
+  Qr as MenubarShortcut,
+  zr as MenubarSub,
+  Kr as MenubarSubContent,
+  jr as MenubarSubTrigger,
+  qr as MenubarTrigger,
+  ap as MissingComponent,
+  pn as MultiSelect,
+  rl as MypageShell,
+  Xr as NavigationMenu,
+  Yr as NavigationMenuContent,
+  Zr as NavigationMenuIndicator,
+  $r as NavigationMenuItem,
+  et as NavigationMenuLink,
+  ot as NavigationMenuList,
+  rt as NavigationMenuTrigger,
+  tt as NavigationMenuViewport,
+  Hn as NotFoundIllustration,
+  fi as NotificationBadge,
+  Ci as NotificationList,
+  vi as NumberInput,
+  Ep as OptionImageUpload,
+  Up as OptionQuantity,
+  _p as OptionSelect,
+  Wp as OptionText,
+  Dp as OrderSection,
+  Mp as OrderSummary,
+  it as Pagination,
+  pt as PaginationContent,
+  lt as PaginationEllipsis,
+  mt as PaginationItem,
+  xt as PaginationLink,
+  ut as PaginationNext,
+  ft as PaginationPrevious,
+  hp as PaymentMethodDisplay,
+  ct as Popover,
+  st as PopoverAnchor,
+  bt as PopoverContent,
+  St as PopoverTrigger,
+  si as PriceDisplay,
+  Rp as ProductCTA,
+  wp as ProductCard,
+  kp as ProductCarousel,
+  Lp as ProductDetailBar,
+  Gp as ProductDetailSidebar,
+  Vp as ProductListItem,
+  Qp as ProductOption,
+  Tt as Progress,
+  Di as ProgressSteps,
+  In as Prose,
+  hi as QuantitySelector,
+  yt as RadioGroup,
+  Lt as RadioGroupItem,
+  Kp as RatingStars,
+  It as ResponsiveDialog,
+  vt as ResponsiveDialogClose,
+  ht as ResponsiveDialogContent,
+  Ft as ResponsiveDialogDescription,
+  Pt as ResponsiveDialogFooter,
+  wt as ResponsiveDialogHeader,
+  At as ResponsiveDialogTitle,
+  kt as ResponsiveDialogTrigger,
+  Jp as ReviewCard,
+  Yp as ReviewForm,
+  $p as ReviewItem,
+  el as ReviewSummary,
+  Gt as ScrollArea,
+  Ht as ScrollBar,
+  Pi as SearchBar,
+  Ai as SearchPanel,
+  Li as Section,
+  Vi as SectionHeader,
+  Ei as SectionNav,
+  Ot as Select,
+  Et as SelectContent,
+  Ut as SelectGroup,
+  _t as SelectItem,
+  Wt as SelectLabel,
+  Qt as SelectScrollDownButton,
+  zt as SelectScrollUpButton,
+  Kt as SelectSeparator,
+  jt as SelectTrigger,
+  qt as SelectValue,
+  Xt as Separator,
+  _i as ShareButtons,
+  Zt as Sheet,
+  $t as SheetClose,
+  ea as SheetContent,
+  oa as SheetDescription,
+  ra as SheetFooter,
+  ta as SheetHeader,
+  aa as SheetTitle,
+  na as SheetTrigger,
+  al as ShopCard,
+  Qi as SideNav,
+  pa as Skeleton,
+  ma as SkipLink,
+  ua as Slider,
+  Ca as SocialIcon,
+  Ki as SocialLoginButton,
+  jp as SparkleIcon,
+  da as Spinner,
+  An as StandardPageShell,
+  il as StatCard,
+  qi as StatusCountTabs,
+  mn as StickyActionBar,
+  xi as SubNav,
+  sa as Switch,
+  Sa as Table,
+  Da as TableBody,
+  Ta as TableCaption,
+  Ma as TableCell,
+  Ia as TableFooter,
+  va as TableHead,
+  ha as TableHeader,
+  Fa as TableRow,
+  wa as Tabs,
+  Aa as TabsContent,
+  ka as TabsList,
+  Ba as TabsTrigger,
+  Xi as Tag,
+  ya as Textarea,
+  Mi as Timeline,
+  Na as Toaster,
+  Ha as Toggle,
+  Ea as ToggleGroup,
+  Ua as ToggleGroupItem,
+  Wa as Tooltip,
+  Qa as TooltipContent,
+  za as TooltipProvider,
+  Ka as TooltipTrigger,
+  $i as WorkspaceLayout,
+  ep as WorkspaceShell,
   O as badgeVariants,
   X as buttonVariants,
-  po as cardVariants,
-  Vp as chipVariants,
+  pe as cardVariants,
+  ll as chipVariants,
   t as cn,
-  mi as containerVariants,
-  _e as fieldVariants,
-  ze as formatFileNames,
-  Jr as getPaginationRange,
-  mr as iconBadgeVariants,
-  Bn as imageInputPreviewVariants,
-  qi as mypageMenuGroups,
-  Or as navigationMenuTriggerStyle,
-  Wn as notificationBadgeVariants,
-  qn as priceDisplayVariants,
-  ui as sectionScrimVariants,
-  fi as sectionVariants,
-  Pi as tagVariants,
-  l as toast,
-  ba as toggleVariants,
-  er as useFormField,
-  ft as useIsMobile,
-  Ke as validateFileSize
+  Ri as containerVariants,
+  pr as fieldVariants,
+  xr as formatFileNames,
+  gt as getPaginationRange,
+  Pr as iconBadgeVariants,
+  ei as imageInputPreviewVariants,
+  bp as mypageMenuGroups,
+  at as navigationMenuTriggerStyle,
+  di as notificationBadgeVariants,
+  bi as priceDisplayVariants,
+  Ni as sectionScrimVariants,
+  Gi as sectionVariants,
+  Yi as tagVariants,
+  m as toast,
+  Va as toggleVariants,
+  Dr as useFormField,
+  Bt as useIsMobile,
+  ur as validateFileSize
 };
 
 
@@ -656,6 +680,8 @@ export {
 // ]
 // 
 // src/components/ec/admin-shell.tsx
+// "use client"
+// 
 // /**
 //  * AdminShell — 管理画面の共通レイアウト
 //  *
@@ -2359,7 +2385,8 @@ export {
 //     <div
 //       data-slot="order-summary"
 //       className={cn(
-//         "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]",
+//         // fixed 表示はスクロール内容の上に重なるため地は Surface-Elevated（disableFixed 側はページ内フローなので Surface-Primary のまま）
+//         "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
 //         className
 //       )}
 //       {...props}
@@ -2557,6 +2584,17 @@ export {
 //   reviewCount?: number
 //   /** ショップ名 */
 //   shopName?: string
+//   /**
+//    * ホバー時の画像演出。
+//    * - `zoom` : 画像をわずかに拡大
+//    * - `fade` : 拡大せず画像をわずかに明るくする（本番 EC 準拠）
+//    * - `none` : 演出なし
+//    *
+//    * 未指定時の既定は orientation で変わる（従来の見た目を維持するため）:
+//    * `vertical` = `zoom` / `horizontal` = `none`。明示指定すればどちらの
+//    * orientation でも同じように効く。
+//    */
+//   hoverEffect?: "zoom" | "fade" | "none"
 //   /** ショップページURL（指定するとショップ名がリンク化、hover時アンダーライン） */
 //   shopHref?: string
 //   /** タグリスト（配送方法・キャンペーンなど） */
@@ -2753,6 +2791,18 @@ export {
 //  * - `showCartButton` で「カートに追加」ボタン表示（verticalのみ）
 //  * - ランキングバッジ、お気に入り、割引バッジなどEC必須要素を統合提供
 //  */
+// /**
+//  * hoverEffect ごとの画像クラス（拡大 / 明るく / なし）
+//  *
+//  * fade は opacity ではなく brightness を使う。opacity は背景（--Surface-Primary）と
+//  * 合成されるだけなので、暗テーマでは「明るく」ではなく暗くなってしまう。
+//  */
+// function hoverEffectImageClass(effect: "zoom" | "fade" | "none") {
+//   if (effect === "none") return undefined
+//   if (effect === "fade") return "transition-[filter] group-hover:brightness-110"
+//   return "transition-transform group-hover:scale-105"
+// }
+// 
 // function ProductCard({
 //   className,
 //   name,
@@ -2765,6 +2815,7 @@ export {
 //   reviewCount,
 //   shopName,
 //   shopHref,
+//   hoverEffect,
 //   tags = [],
 //   isFavorite = false,
 //   onFavoriteToggle,
@@ -2779,6 +2830,9 @@ export {
 //   cartButtonLabel = "カートに追加",
 //   ...props
 // }: ProductCardProps) {
+//   // 既定は orientation ごと（vertical=zoom / horizontal=none）。従来の見た目を変えない。
+//   const resolvedHoverEffect =
+//     hoverEffect ?? (orientation === "horizontal" ? "none" : "zoom")
 //   const discountText = showDiscountBadge ? calcDiscountPercent(price, originalPrice) : null
 // 
 //   if (orientation === "horizontal") {
@@ -2799,7 +2853,7 @@ export {
 //         {/* ランキングバッジ: カードレベルに配置（画像の overflow-hidden の外） */}
 //         {ranking != null && <RankingBadge rank={ranking} />}
 //         <div className="relative h-auto w-28 shrink-0 overflow-hidden rounded-lg @sm:w-36">
-//           <img src={imageUrl} alt={imageAlt ?? name} className="h-full w-full object-cover" loading="lazy" />
+//           <img src={imageUrl} alt={imageAlt ?? name} className={cn("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", hoverEffectImageClass(resolvedHoverEffect))} loading="lazy" />
 //           {discountText && (
 //             <Tag variant="sale" size="sm" className="absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)]">{discountText}</Tag>
 //           )}
@@ -2861,7 +2915,7 @@ export {
 //       {/* 画像エリア: Figma — aspect-square, rounded-lg, p-1, 内部にタグ+ブックマーク */}
 //       <div className="relative">
 //         <div className="aspect-square overflow-hidden rounded-lg">
-//           <img src={imageUrl} alt={imageAlt ?? name} className="h-full w-full object-cover transition-transform duration-[var(--Motion-Duration-Base)] group-hover:scale-105" loading="lazy" />
+//           <img src={imageUrl} alt={imageAlt ?? name} className={cn("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", hoverEffectImageClass(resolvedHoverEffect))} loading="lazy" />
 // 
 //           {/* 画像内オーバーレイ: 左下にタグ・割引 */}
 //           <div className="absolute inset-x-1 bottom-1 z-[var(--Z-Local-3)] flex items-end">
@@ -4375,6 +4429,8 @@ export {
 // export { ProductListItem }
 // 
 // src/components/ec/product-option.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowDown2 from "iconsax-reactjs/dist/esm/ArrowDown2.js"
 // import Add from "iconsax-reactjs/dist/esm/Add.js"
@@ -4757,6 +4813,11 @@ export {
 // export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** レビューバリアント */
 //   variant?: "list" | "card" | "pc"
+//   /**
+//    * 枠線を出すか（既定 true）。
+//    * 商品詳細などページ全体をフラットに統一する画面では false にする。
+//    */
+//   bordered?: boolean
 //   /** 星評価（1〜5） */
 //   rating: number
 //   /** 投稿日 */
@@ -4799,6 +4860,7 @@ export {
 // function ReviewCard({
 //   className,
 //   variant = "list",
+//   bordered = true,
 //   rating,
 //   date,
 //   text,
@@ -4825,7 +4887,8 @@ export {
 //     <div
 //       data-slot="review-card"
 //       className={cn(
-//         "flex flex-col rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)]",
+//         "flex flex-col rounded-lg bg-[var(--Surface-Primary)]",
+//         bordered && "border border-[var(--Border-Medium-Emphasis)]",
 //         isPc ? "w-full max-w-[680px] gap-4 p-6" : "min-w-[240px] w-full gap-2 p-4",
 //         isCard && "items-center",
 //         className
@@ -4935,6 +4998,8 @@ export {
 // export { ReviewCard }
 // 
 // src/components/ec/review-form.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import Camera from "iconsax-reactjs/dist/esm/Camera.js"
 // import { X } from "lucide-react"
@@ -5884,7 +5949,7 @@ export {
 //           // 画面端との余白は上下左右 40px（calc(100%-5rem)）。
 //           // 幅上限は端末幅に応じて: SP は端末幅-80px に追従 / sm 以上は
 //           // default=480px（テキスト確認が間延びしない幅）・sm=320px
-//           "group/alert-dialog-content fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-full max-w-[calc(100%-5rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-background p-6 shadow-lg duration-[var(--Motion-Duration-Base)] data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-[480px]",
+//           "group/alert-dialog-content fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-full max-w-[calc(100%-5rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-[480px]",
 //           className
 //         )}
 //         {...props}
@@ -6024,6 +6089,8 @@ export {
 // }
 // 
 // src/components/foundations/alert.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // import Warning2 from "iconsax-reactjs/dist/esm/Warning2.js"
@@ -6741,6 +6808,12 @@ export {
 //         "icon-xs": "size-6 rounded [&_svg:not([class*='size-'])]:size-3",
 //         "icon-sm": "size-8 rounded-lg",
 //         "icon-lg": "size-10 rounded-lg",
+//         /**
+//          * icon-xl — 44px（size-11）。size="default" と同じ高さなので、
+//          * 入力行（Input / SearchBar / SelectTrigger）の横にアイコンボタンを並置しても揃う。
+//          * tokens.json の touchTarget["text-input"].min = 44px も満たす唯一の icon サイズ。
+//          */
+//         "icon-xl": "size-11 rounded-lg",
 //       },
 //     },
 //     defaultVariants: {
@@ -6777,6 +6850,8 @@ export {
 // export { Button, buttonVariants }
 // 
 // src/components/foundations/calendar.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import {
 //   ChevronDownIcon,
@@ -7284,6 +7359,8 @@ export {
 // export { CheckboxCardGroup, CheckboxCardItem }
 // 
 // src/components/foundations/checkbox-group.tsx
+// "use client"
+// 
 // /**
 //  * ## CheckboxGroup / チェックボックスグループ
 //  *
@@ -7456,6 +7533,8 @@ export {
 // export { CheckboxGroup, CheckboxGroupItem }
 // 
 // src/components/foundations/checkbox.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import TickSquare from "iconsax-reactjs/dist/esm/TickSquare.js"
 // import MinusSquare from "iconsax-reactjs/dist/esm/MinusSquare.js"
@@ -8154,6 +8233,7 @@ export {
 // import ExportSquare from "iconsax-reactjs/dist/esm/ExportSquare.js"
 // 
 // import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
 // import { Checkbox } from "@/components/foundations/checkbox"
 // import { Button } from "@/components/foundations/button"
 // import { Avatar, AvatarImage, AvatarFallback } from "@/components/foundations/avatar"
@@ -8263,6 +8343,7 @@ export {
 //   sortDirection,
 //   onSort,
 //   width,
+//   srLabel,
 //   children,
 //   ...props
 // }: React.ComponentProps<"th"> & {
@@ -8271,8 +8352,19 @@ export {
 //   onSort?: () => void
 //   /** セル幅バリアント: max=320-360px, hug=最小 */
 //   width?: "auto" | "max" | "hug"
+//   /**
+//    * 見出し文字を出さない列（チェックボックス選択列・操作列など）の読み上げ用ラベル。
+//    * 画面には出さず、スクリーンリーダーにだけ列の意味を伝える。
+//    *
+//    * 空の `<th>` は「この列が何か」が支援技術に伝わらない（axe: empty-table-header）。
+//    * 見出しを出したくない列には必ず指定する。
+//    */
+//   srLabel?: string
 // }) {
 //   const SortIcon = sortDirection === "asc" ? ArrowUp : sortDirection === "desc" ? ArrowDown : ArrowSwapVertical
+//   /** 未ソート列も "none" を明示する（列が並び替え可能であること自体を読み上げる） */
+//   const ariaSort: React.AriaAttributes["aria-sort"] =
+//     sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none"
 // 
 //   return (
 //     <th
@@ -8280,22 +8372,40 @@ export {
 //       className={cn(
 //         "h-16 px-4 text-left align-middle typo-label-sm whitespace-nowrap text-[var(--Text-Medium-Emphasis)]",
 //         "[&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
-//         sortable && "cursor-pointer select-none hover:bg-[var(--Surface-Tertiary)]",
+//         sortable && "hover:bg-[var(--Surface-Tertiary)]",
 //         width === "max" && "min-w-[320px] max-w-[360px]",
 //         width === "hug" && "min-w-0 w-0",
 //         className
 //       )}
-//       onClick={sortable ? onSort : undefined}
+//       // 並び替えの状態は aria-sort で読み上げる。押下は下の <button> が担う
+//       aria-sort={sortable ? ariaSort : undefined}
 //       {...props}
 //     >
 //       {sortable ? (
-//         <span className={cn("inline-flex items-center gap-1", sortDirection && "typo-label-sm font-bold text-[var(--Text-High-Emphasis)]")}>
+//         // th の onClick はマウスにしか届かない（キーボードで到達できず role も無い）。
+//         // 本物の <button> にして Tab / Enter / Space で並び替えられるようにする。
+//         <button
+//           type="button"
+//           onClick={onSort}
+//           className={cn(
+//             "inline-flex items-center gap-1 rounded-sm outline-none",
+//             "cursor-pointer select-none",
+//             FOCUS_RING,
+//             sortDirection && "typo-label-sm font-bold text-[var(--Text-High-Emphasis)]"
+//           )}
+//         >
 //           {children}
-//           <SortIcon size={14} className={cn(sortDirection ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]")} />
-//         </span>
+//           <SortIcon
+//             size={14}
+//             aria-hidden="true"
+//             className={cn(sortDirection ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]")}
+//           />
+//         </button>
 //       ) : (
 //         children
 //       )}
+//       {/* 見出し文字を出さない列は、読み上げ用のラベルだけ置く */}
+//       {srLabel && <span className="sr-only">{srLabel}</span>}
 //     </th>
 //   )
 // }
@@ -8904,7 +9014,7 @@ export {
 //         data-slot="dialog-content"
 //         onOpenAutoFocus={(e) => e.preventDefault()}
 //         className={cn(
-//           "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-background dark:bg-[var(--Primitive-Gray-800)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+//           "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
 //           className
 //         )}
 //         {...props}
@@ -9059,7 +9169,7 @@ export {
 //       <DrawerPrimitive.Content
 //         data-slot="drawer-content"
 //         className={cn(
-//           "group/drawer-content fixed z-[var(--Z-Modal)] flex h-auto flex-col border-[var(--Border-Medium-Emphasis)] bg-background",
+//           "group/drawer-content fixed z-[var(--Z-Modal)] flex h-auto flex-col border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)]",
 //           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
 //           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
 //           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
@@ -9624,6 +9734,8 @@ export {
 //   VariantProps<typeof fieldVariants>
 // 
 // src/components/foundations/file-input.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { Paperclip, X } from "lucide-react"
 // 
@@ -10697,6 +10809,7 @@ export {
 // } from "lucide-react"
 // 
 // import { cn } from "@/lib/utils"
+// import { resolveLinkComponent, type LinkComponent } from "@/lib/link-component"
 // import { buttonVariants, type Button } from "@/components/foundations/button"
 // 
 // function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
@@ -10730,6 +10843,11 @@ export {
 // 
 // type PaginationLinkProps = {
 //   isActive?: boolean
+//   /**
+//    * リンクの描画に使うコンポーネント（既定 `a`）。
+//    * `next/link` 等を渡すとクライアント遷移になる（#236）。
+//    */
+//   linkComponent?: LinkComponent
 // } & Pick<React.ComponentProps<typeof Button>, "size"> &
 //   React.ComponentProps<"a">
 // 
@@ -10737,10 +10855,12 @@ export {
 //   className,
 //   isActive,
 //   size = "icon",
+//   linkComponent,
 //   ...props
 // }: PaginationLinkProps) {
+//   const LinkTag = resolveLinkComponent(linkComponent)
 //   return (
-//     <a
+//     <LinkTag
 //       aria-current={isActive ? "page" : undefined}
 //       data-slot="pagination-link"
 //       data-active={isActive}
@@ -10948,6 +11068,8 @@ export {
 // export { Progress }
 // 
 // src/components/foundations/radio-group.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 // 
@@ -11111,6 +11233,8 @@ export {
 // export { RadioGroup, RadioGroupItem }
 // 
 // src/components/foundations/responsive-dialog.tsx
+// "use client"
+// 
 // import * as React from "react"
 // 
 // import { cn } from "@/lib/utils"
@@ -11671,20 +11795,34 @@ export {
 //   children,
 //   side = "right",
 //   showCloseButton = true,
+//   autoFocus = true,
+//   onOpenAutoFocus,
+//   onCloseAutoFocus,
 //   ...props
 // }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 //   side?: "top" | "right" | "bottom" | "left"
 //   showCloseButton?: boolean
+//   /**
+//    * 開閉時のフォーカス自動移動。既定 true（Radix 既定＝開いたら中へ入り、閉じたらトリガーへ戻る）。
+//    * WCAG 2.4.3 を満たすため、止めたい特別な事情があるときだけ false にする。
+//    */
+//   autoFocus?: boolean
 // }) {
 //   return (
 //     <SheetPortal>
 //       <SheetOverlay />
 //       <SheetPrimitive.Content
 //         data-slot="sheet-content"
-//         onOpenAutoFocus={(e) => e.preventDefault()}
-//         onCloseAutoFocus={(e) => e.preventDefault()}
+//         onOpenAutoFocus={(e) => {
+//           if (!autoFocus) e.preventDefault()
+//           onOpenAutoFocus?.(e)
+//         }}
+//         onCloseAutoFocus={(e) => {
+//           if (!autoFocus) e.preventDefault()
+//           onCloseAutoFocus?.(e)
+//         }}
 //         className={cn(
-//           "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
+//           "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
 //           side === "right" &&
 //             "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 //           side === "left" &&
@@ -11964,10 +12102,20 @@ export {
 // 
 // import { cn } from "@/lib/utils"
 // 
-// export type SocialPlatform = "line" | "x" | "facebook" | "amazon" | "google" | "apple"
+// export type SocialPlatform =
+//   | "line"
+//   | "x"
+//   | "facebook"
+//   | "amazon"
+//   | "google"
+//   | "apple"
+//   | "hatena"
 // 
-// /** 単色で描くブランド。多色ロゴ（google / amazon）は個別に塗り分けるため除外 */
-// type MonoPlatform = Exclude<SocialPlatform, "google" | "amazon">
+// /**
+//  * 単色で描くブランド。
+//  * 多色ロゴ（google / amazon）と、地＋白抜きで描くもの（hatena）は個別に塗り分けるため除外
+//  */
+// type MonoPlatform = Exclude<SocialPlatform, "google" | "amazon" | "hatena">
 // 
 // export interface SocialIconProps extends Omit<React.ComponentProps<"svg">, "children"> {
 //   platform: SocialPlatform
@@ -12055,6 +12203,33 @@ export {
 //     )
 //   }
 // 
+//   if (platform === "hatena") {
+//     // はてなブックマークの「B!」マーク。角丸の地（--Third-Party-Hatena = #00A4DE）に白抜き。
+//     // 字形は公式アートワークのトレースではなく幾何的に再構成したもの。公式 SVG が入手できたら
+//     // この 2 つの path を差し替えれば足りる（公開 API は変わらない）。
+//     // tone="mono" では地を描かず currentColor の字だけにする（ブランド色の地に載せる用）。
+//     return (
+//       <svg {...common} fill="none">
+//         {!mono && (
+//           <rect
+//             x="1"
+//             y="1"
+//             width="22"
+//             height="22"
+//             rx="4"
+//             fill="var(--Third-Party-Hatena)"
+//           />
+//         )}
+//         <path
+//           fillRule="evenodd"
+//           /* 出典: はてなブックマークのブランド表記「B!」。白抜き（地の上）または currentColor */
+//           fill={mono ? "currentColor" : "#FFFFFF"}
+//           d="M6 6h4.4c2 0 3.2 1 3.2 2.7 0 1.1-.6 1.9-1.6 2.3 1.3.4 2.1 1.4 2.1 2.8 0 2-1.4 3.2-3.7 3.2H6V6Zm2.4 4.4h1.7c.85 0 1.3-.38 1.3-1.05s-.45-1.05-1.3-1.05H8.4v2.1Zm0 4.5h2c.95 0 1.45-.42 1.45-1.15s-.5-1.15-1.45-1.15h-2v2.3ZM16.2 6h2.4v6.6h-2.4V6Zm0 8.2h2.4V17h-2.4v-2.8Z"
+//         />
+//       </svg>
+//     )
+//   }
+// 
 //   return (
 //     <svg {...common} fill={mono ? "currentColor" : brandColors[platform]}>
 //       <path d={monoPaths[platform]} />
@@ -12380,10 +12555,22 @@ export {
 //       scrollable: {
 //         true: "gap-4",
 //       },
+//       /**
+//        * 狭い置き場所（サイドバー等）向けの詰め設定。
+//        * segment の 1 項目あたりの最小幅（100px）を外し、左右の padding を詰める（issue #235）。
+//        */
+//       size: {
+//         md: "",
+//         sm: "",
+//       },
 //     },
+//     compoundVariants: [
+//       { variant: "segment", size: "sm", class: "p-1" },
+//     ],
 //     defaultVariants: {
 //       variant: "underbar",
 //       scrollable: false,
+//       size: "md",
 //     },
 //   }
 // )
@@ -12392,6 +12579,7 @@ export {
 //   className,
 //   variant = "underbar",
 //   scrollable = false,
+//   size = "md",
 //   ...props
 // }: React.ComponentProps<typeof TabsPrimitive.List> &
 //   VariantProps<typeof tabsListVariants>) {
@@ -12400,7 +12588,8 @@ export {
 //       data-slot="tabs-list"
 //       data-variant={variant}
 //       data-scrollable={scrollable || undefined}
-//       className={cn(tabsListVariants({ variant, scrollable }), className)}
+//       data-size={size}
+//       className={cn(tabsListVariants({ variant, scrollable, size }), className)}
 //       {...props}
 //     />
 //   )
@@ -12418,13 +12607,19 @@ export {
 //         // Base
 //         "group/trigger relative inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 //         // Underbar variant (default: equal-width tabs with full-width underline)
-//         "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
+//         // px-2: 均等割りで幅が詰まったとき、隣のラベルと文字が接触しないための最小余白（issue #235）
+//         "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:px-2 group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
 //         // Underbar active
 //         "group-data-[variant=underbar]/tabs-list:data-[state=active]:border-[var(--Text-High-Emphasis)] group-data-[variant=underbar]/tabs-list:data-[state=active]:text-[var(--Text-High-Emphasis)]",
 //         // Scrollable underbar: shrink to text width, bold text, remove trigger border (underline moves to inner span)
-//         "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
+//         // gap-4 で間隔を取っているので左右 padding は戻す（従来の間隔を保つ）
+//         "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:!px-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
 //         // Segment variant
 //         "group-data-[variant=segment]/tabs-list:h-[37px] group-data-[variant=segment]/tabs-list:min-w-[100px] group-data-[variant=segment]/tabs-list:rounded-full group-data-[variant=segment]/tabs-list:px-3 group-data-[variant=segment]/tabs-list:typo-body-md group-data-[variant=segment]/tabs-list:text-[var(--Text-High-Emphasis)]",
+//         // size="sm": 狭い置き場所（サイドバー等）向け。1 項目あたりの最小幅を外し、
+//         // 左右の padding を詰める。min-w を持つのは segment だけ、underbar の px-2 は同値なので
+//         // 実際に効くのは segment。variant 側の group-data と具体度が並ぶため ! で順序依存を断つ（issue #235）
+//         "group-data-[size=sm]/tabs-list:!min-w-0 group-data-[size=sm]/tabs-list:!px-2",
 //         // Segment active
 //         "group-data-[variant=segment]/tabs-list:data-[state=active]:bg-[var(--Surface-Primary)] group-data-[variant=segment]/tabs-list:data-[state=active]:shadow-[0px_4px_6px_-4px_rgba(24,39,75,0.12),0px_8px_8px_-4px_rgba(24,39,75,0.08)]",
 //         className
@@ -12546,6 +12741,8 @@ export {
 // export { Textarea }
 // 
 // src/components/foundations/toggle-group.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
@@ -12838,7 +13035,7 @@ export {
 //   return (
 //     <header
 //       data-slot="admin-header"
-//       className="fixed top-0 left-0 right-0 z-[var(--Z-Nav)] flex h-14 @md:h-16 items-center justify-between bg-[var(--Surface-Primary)] border-b border-[var(--Border-Low-Emphasis)] px-4 @md:px-6"
+//       className="fixed top-0 left-0 right-0 z-[var(--Z-Nav)] flex h-14 @md:h-16 items-center justify-between bg-[var(--Surface-Elevated)] border-b border-[var(--Border-Low-Emphasis)] px-4 @md:px-6"
 //     >
 //       <div className="flex items-center gap-2 @md:gap-3">
 //         {onMenuClick && (
@@ -12869,10 +13066,19 @@ export {
 // export { AdminHeader }
 // 
 // src/components/primitives/admin-side-nav.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowDown2 from "iconsax-reactjs/dist/esm/ArrowDown2.js"
 // import { XIcon } from "lucide-react"
 // 
+// import {
+//   DropdownMenu,
+//   DropdownMenuContent,
+//   DropdownMenuItem,
+//   DropdownMenuTrigger,
+// } from "@/components/foundations/dropdown-menu"
+// import { FOCUS_RING } from "@/lib/focus-ring"
 // import { cn } from "@/lib/utils"
 // 
 // // ============================================================
@@ -12961,6 +13167,9 @@ export {
 //  *
 //  * メイン項目・サブメニュー項目とも 44px（WCAG 2.5.5 の最小ターゲット）以上にする。
 //  * 行高が小さいテキストで縦 padding だけに頼ると割り込むため、`min-h-11` で下限を固定する。
+//  * PC のサブメニューは `DropdownMenu` の Portal / collision handling を利用し、
+//  * viewport 端では位置と最大高を自動調整する。hover ではフォーカスを奪わず、
+//  * Enter / Space / ArrowDown / Escape では標準のメニュー操作に従う。
 //  *
 //  * ### インポート
 //  * ```tsx
@@ -12986,6 +13195,113 @@ export {
 //   ariaLabel = "管理メニュー",
 // }: AdminSideNavProps) {
 //   const [openMenu, setOpenMenu] = React.useState<string | null>(null)
+//   const hoverOpenedMenuRef = React.useRef<string | null>(null)
+//   const hoverOpenedMenusRef = React.useRef(new Set<string>())
+//   const focusedMenuTriggerRef = React.useRef<string | null>(null)
+//   const pointerOpenedMenuRef = React.useRef<string | null>(null)
+//   const pointerHoverBlockedMenuRef = React.useRef<string | null>(null)
+//   const outsideDismissedMenuRef = React.useRef<string | null>(null)
+//   const menuTriggerRefs = React.useRef(new Map<string, HTMLButtonElement>())
+//   const firstMenuItemRefs = React.useRef(new Map<string, HTMLAnchorElement>())
+//   const openTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+//   const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+//   const desktopNavRef = React.useRef<HTMLElement | null>(null)
+// 
+//   const cancelScheduledClose = React.useCallback(() => {
+//     if (closeTimerRef.current !== null) {
+//       clearTimeout(closeTimerRef.current)
+//       closeTimerRef.current = null
+//     }
+//   }, [])
+// 
+//   const cancelScheduledOpen = React.useCallback(() => {
+//     if (openTimerRef.current !== null) {
+//       clearTimeout(openTimerRef.current)
+//       openTimerRef.current = null
+//     }
+//   }, [])
+// 
+//   const openMenuFromPointer = React.useCallback(
+//     (key: string, pointerType: string) => {
+//       if (pointerType === "touch") return
+//       cancelScheduledOpen()
+//       cancelScheduledClose()
+//       openTimerRef.current = setTimeout(() => {
+//         if (
+//           pointerOpenedMenuRef.current !== null &&
+//           pointerOpenedMenuRef.current !== key
+//         ) {
+//           pointerOpenedMenuRef.current = null
+//           menuTriggerRefs.current.get(key)?.focus({ preventScroll: true })
+//         }
+//         hoverOpenedMenuRef.current = key
+//         hoverOpenedMenusRef.current.add(key)
+//         setOpenMenu(key)
+//         openTimerRef.current = null
+//       }, 80)
+//     },
+//     [cancelScheduledClose, cancelScheduledOpen],
+//   )
+// 
+//   const schedulePointerClose = React.useCallback(
+//     (key: string) => {
+//       cancelScheduledOpen()
+//       cancelScheduledClose()
+//       closeTimerRef.current = setTimeout(() => {
+//         setOpenMenu((current) => (current === key ? null : current))
+//         closeTimerRef.current = null
+//       }, 120)
+//     },
+//     [cancelScheduledClose, cancelScheduledOpen],
+//   )
+// 
+//   const closeDesktopMenus = React.useCallback(() => {
+//     cancelScheduledOpen()
+//     cancelScheduledClose()
+//     hoverOpenedMenuRef.current = null
+//     hoverOpenedMenusRef.current.clear()
+//     focusedMenuTriggerRef.current = null
+//     pointerOpenedMenuRef.current = null
+//     pointerHoverBlockedMenuRef.current = null
+//     outsideDismissedMenuRef.current = null
+//     setOpenMenu(null)
+//   }, [cancelScheduledClose, cancelScheduledOpen])
+// 
+//   React.useEffect(
+//     () => () => {
+//       if (openTimerRef.current !== null) clearTimeout(openTimerRef.current)
+//       if (closeTimerRef.current !== null) clearTimeout(closeTimerRef.current)
+//       focusedMenuTriggerRef.current = null
+//       pointerOpenedMenuRef.current = null
+//       pointerHoverBlockedMenuRef.current = null
+//       outsideDismissedMenuRef.current = null
+//       menuTriggerRefs.current.clear()
+//       firstMenuItemRefs.current.clear()
+//     },
+//     [],
+//   )
+// 
+//   React.useEffect(() => {
+//     const nav = desktopNavRef.current
+//     if (!nav || typeof ResizeObserver === "undefined") return
+// 
+//     const closeWhenHidden = () => {
+//       const bounds = nav.getBoundingClientRect()
+//       if (
+//         getComputedStyle(nav).display === "none" ||
+//         bounds.width === 0 ||
+//         bounds.height === 0
+//       ) {
+//         closeDesktopMenus()
+//       }
+//     }
+// 
+//     const observer = new ResizeObserver(closeWhenHidden)
+//     observer.observe(nav)
+//     closeWhenHidden()
+// 
+//     return () => observer.disconnect()
+//   }, [closeDesktopMenus])
 // 
 //   return (
 //     <>
@@ -12995,26 +13311,23 @@ export {
 //           （h-full だとヘッダー帯に重なるため使わない）。--Z-Sticky = 30 でヘッダーより背面。
 //           レールは @md 限定表示なので SP のヘッダー高さ h-14 は考慮しない。 */}
 //       <nav
+//         ref={desktopNavRef}
 //         data-slot="admin-side-nav"
 //         aria-label={ariaLabel}
-//         className="hidden @md:flex fixed left-0 top-16 bottom-0 z-[var(--Z-Sticky)] w-[72px] flex-col items-center bg-[var(--Surface-Primary)] border-r border-[var(--Border-Low-Emphasis)]"
+//         className="hidden @md:flex fixed left-0 top-16 bottom-0 z-[var(--Z-Sticky)] w-[72px] flex-col items-center bg-[var(--Surface-Elevated)] border-r border-[var(--Border-Low-Emphasis)]"
 //       >
 //         {items.map((item) => {
 //           const isActive = activeKey === item.key
 //           const hasSubMenu = !!item.subMenus && item.subMenus.length > 0
 //           return (
-//             <div
-//               key={item.key}
-//               className="relative"
-//               onMouseEnter={() => setOpenMenu(hasSubMenu ? item.key : null)}
-//               onMouseLeave={() => setOpenMenu(null)}
-//             >
+//             <div key={item.key} className="relative">
 //               {(() => {
 //                 const triggerClass = cn(
-//                   "flex h-16 w-16 flex-col items-center justify-center gap-1 transition-colors",
+//                   "flex h-16 w-16 flex-col items-center justify-center gap-1 rounded-md transition-colors",
 //                   isActive
 //                     ? "text-[var(--Text-Accent-Primary)]"
 //                     : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]",
+//                   FOCUS_RING,
 //                 )
 //                 const triggerContent = (
 //                   <>
@@ -13024,6 +13337,175 @@ export {
 //                     </span>
 //                   </>
 //                 )
+//                 if (hasSubMenu) {
+//                   return (
+//                     <DropdownMenu
+//                       modal={false}
+//                       open={openMenu === item.key}
+//                       onOpenChange={(nextOpen) => {
+//                         cancelScheduledClose()
+//                         if (nextOpen) {
+//                           if (outsideDismissedMenuRef.current === item.key) {
+//                             outsideDismissedMenuRef.current = null
+//                           }
+//                           hoverOpenedMenuRef.current = null
+//                           hoverOpenedMenusRef.current.delete(item.key)
+//                           setOpenMenu(item.key)
+//                         } else {
+//                           setOpenMenu((current) =>
+//                             current === item.key ? null : current,
+//                           )
+//                         }
+//                       }}
+//                     >
+//                       <DropdownMenuTrigger asChild>
+//                         <button
+//                           ref={(node) => {
+//                             if (node) {
+//                               menuTriggerRefs.current.set(item.key, node)
+//                             } else {
+//                               menuTriggerRefs.current.delete(item.key)
+//                             }
+//                           }}
+//                           type="button"
+//                           className={triggerClass}
+//                           onFocus={() => {
+//                             cancelScheduledOpen()
+//                             focusedMenuTriggerRef.current = item.key
+//                             if (hoverOpenedMenuRef.current === item.key) {
+//                               hoverOpenedMenuRef.current = null
+//                             }
+//                             hoverOpenedMenusRef.current.delete(item.key)
+//                           }}
+//                           onBlur={() => {
+//                             if (focusedMenuTriggerRef.current === item.key) {
+//                               focusedMenuTriggerRef.current = null
+//                             }
+//                           }}
+//                           onPointerEnter={(event) => {
+//                             if (
+//                               focusedMenuTriggerRef.current === item.key ||
+//                               pointerHoverBlockedMenuRef.current === item.key
+//                             ) {
+//                               return
+//                             }
+//                             openMenuFromPointer(item.key, event.pointerType)
+//                           }}
+//                           onPointerDownCapture={() => {
+//                             cancelScheduledOpen()
+//                             if (openMenu !== item.key) {
+//                               pointerOpenedMenuRef.current = item.key
+//                             }
+//                           }}
+//                           onPointerLeave={() => {
+//                             if (
+//                               pointerHoverBlockedMenuRef.current === item.key
+//                             ) {
+//                               pointerHoverBlockedMenuRef.current = null
+//                             }
+//                             schedulePointerClose(item.key)
+//                           }}
+//                         >
+//                           {triggerContent}
+//                         </button>
+//                       </DropdownMenuTrigger>
+//                       <DropdownMenuContent
+//                         side="right"
+//                         align="start"
+//                         sideOffset={0}
+//                         collisionPadding={8}
+//                         className="w-[240px] rounded-2xl p-2 shadow-menu"
+//                         onPointerEnter={cancelScheduledClose}
+//                         onPointerLeave={() => schedulePointerClose(item.key)}
+//                         onPointerMoveCapture={(event) => {
+//                           if (hoverOpenedMenuRef.current === item.key) {
+//                             event.preventDefault()
+//                           }
+//                         }}
+//                         onInteractOutside={(event) => {
+//                           const trigger = menuTriggerRefs.current.get(item.key)
+//                           if (
+//                             pointerOpenedMenuRef.current === item.key &&
+//                             event.target instanceof Node &&
+//                             !trigger?.contains(event.target)
+//                           ) {
+//                             outsideDismissedMenuRef.current = item.key
+//                           }
+//                         }}
+//                         {...{
+//                           onOpenAutoFocus: (event: Event) => {
+//                             if (hoverOpenedMenuRef.current === item.key) {
+//                               event.preventDefault()
+//                             } else if (
+//                               pointerOpenedMenuRef.current === item.key
+//                             ) {
+//                               event.preventDefault()
+//                               requestAnimationFrame(() => {
+//                                 firstMenuItemRefs.current.get(item.key)?.focus()
+//                               })
+//                             }
+//                           },
+//                         }}
+//                         onCloseAutoFocus={(event) => {
+//                           if (hoverOpenedMenusRef.current.has(item.key)) {
+//                             event.preventDefault()
+//                             hoverOpenedMenusRef.current.delete(item.key)
+//                             if (hoverOpenedMenuRef.current === item.key) {
+//                               hoverOpenedMenuRef.current = null
+//                             }
+//                           }
+//                           if (pointerOpenedMenuRef.current === item.key) {
+//                             event.preventDefault()
+//                             pointerOpenedMenuRef.current = null
+//                             if (outsideDismissedMenuRef.current !== item.key) {
+//                               pointerHoverBlockedMenuRef.current = item.key
+//                               requestAnimationFrame(() => {
+//                                 menuTriggerRefs.current.get(item.key)?.focus()
+//                               })
+//                             }
+//                           }
+//                           if (outsideDismissedMenuRef.current === item.key) {
+//                             outsideDismissedMenuRef.current = null
+//                           }
+//                         }}
+//                       >
+//                         {item.subMenus!.map((sub, index) => (
+//                           <DropdownMenuItem
+//                             key={sub.label}
+//                             asChild
+//                             className="min-h-11 px-4"
+//                             onPointerLeave={(event) => {
+//                               if (hoverOpenedMenuRef.current === item.key) {
+//                                 event.preventDefault()
+//                               }
+//                             }}
+//                           >
+//                             <a
+//                               ref={
+//                                 index === 0
+//                                   ? (node) => {
+//                                       if (node) {
+//                                         firstMenuItemRefs.current.set(
+//                                           item.key,
+//                                           node,
+//                                         )
+//                                       } else {
+//                                         firstMenuItemRefs.current.delete(item.key)
+//                                       }
+//                                     }
+//                                   : undefined
+//                               }
+//                               href={sub.href}
+//                             >
+//                               {sub.label}
+//                             </a>
+//                           </DropdownMenuItem>
+//                         ))}
+//                       </DropdownMenuContent>
+//                     </DropdownMenu>
+//                   )
+//                 }
+// 
 //                 return item.href ? (
 //                   <a
 //                     href={item.href}
@@ -13038,23 +13520,6 @@ export {
 //                   </button>
 //                 )
 //               })()}
-//               {/* Sub-menu popup */}
-//               {hasSubMenu && openMenu === item.key && (
-//                 <div className="absolute left-full top-0 z-[var(--Z-Popover)] ml-0 w-[240px] rounded-2xl bg-[var(--Surface-Primary)] shadow-menu border border-[var(--Border-Low-Emphasis)] py-2">
-//                   {item.subMenus!.map((sub) => (
-//                     <a
-//                       key={sub.label}
-//                       href={sub.href}
-//                       // min-h-11 = 44px（WCAG 2.5.5 最小ターゲット）。
-//                       // py-2.5(10px×2) + typo-body-sm の行高 18px = 38px で 44px を割るため、
-//                       // 高さを min-h-11 で確保し flex で中央寄せする。
-//                       className="flex min-h-11 items-center px-4 py-2.5 typo-body-sm text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] transition-colors"
-//                     >
-//                       {sub.label}
-//                     </a>
-//                   ))}
-//                 </div>
-//               )}
 //             </div>
 //           )
 //         })}
@@ -13366,7 +13831,7 @@ export {
 //       data-slot="bottom-tab-bar"
 //       aria-label="メインナビゲーション"
 //       className={cn(
-//         "fixed inset-x-0 bottom-0 z-[var(--Z-Floating)] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] pb-[env(safe-area-inset-bottom)] @md:hidden",
+//         "fixed inset-x-0 bottom-0 z-[var(--Z-Floating)] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)] pb-[env(safe-area-inset-bottom)] @md:hidden",
 //         className
 //       )}
 //       {...props}
@@ -13802,6 +14267,8 @@ export {
 // export { CategoryShortcuts }
 // 
 // src/components/primitives/chat-composer.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { SendHorizontal } from "lucide-react"
 // 
@@ -14396,6 +14863,8 @@ export {
 // export { CoachMark }
 // 
 // src/components/primitives/combobox.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { Check, ChevronsUpDown } from "lucide-react"
 // 
@@ -14583,7 +15052,186 @@ export {
 // // eslint-disable-next-line react-refresh/only-export-components -- shadcn 慣習: variants はコンポーネントと同居 export（分割は公開 API の破壊変更）
 // export { Container, containerVariants }
 // 
+// src/components/primitives/content-card.tsx
+// import * as React from "react"
+// 
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
+// import { resolveLinkComponent, type LinkComponent } from "@/lib/link-component"
+// import { Tag, type TagProps } from "@/components/primitives/tag"
+// 
+// export type ContentCardOrientation = "vertical" | "horizontal" | "list"
+// export type ContentCardAspect = "16/10" | "16/9" | "1/1"
+// 
+// export interface ContentCardProps
+//   extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+//   /** 記事タイトル。一覧で高さが割れないよう常に 2 行ぶんの高さを取る */
+//   title: string
+//   /** 遷移先。カード全体がリンクになる */
+//   href: string
+//   /**
+//    * 画像。`next/image` や CMS の img、図版をそのまま渡す。
+//    * 縦横比とクリップはカード側が持つので、中身は `h-full w-full object-cover` を想定。
+//    */
+//   imageSlot?: React.ReactNode
+//   /** 画像左下に重ねるラベル（カテゴリ等）。長いラベルは省略記号で切る */
+//   tag?: { label: string; variant?: TagProps["variant"] }
+//   /** 日付・著者などの補足。**必ず 1 行**に収まる内容にする（複数行だと一覧で高さが割れる） */
+//   meta?: React.ReactNode
+//   /**
+//    * カードの向き。
+//    * - `vertical`（既定）: 画像が上、本文が下。グリッド一覧向け
+//    * - `horizontal` : 画像が左、本文が右
+//    * - `list` : 本文が左、サムネイルが右（記事一覧の Medium 型）
+//    */
+//   orientation?: ContentCardOrientation
+//   /** 画像の縦横比（既定 `16/10`。記事のアイキャッチは横長素材が前提） */
+//   aspect?: ContentCardAspect
+//   /**
+//    * リンクの描画に使うコンポーネント（既定 `a`）。
+//    * `next/link` 等を渡すとクライアント遷移になる（#236）。
+//    */
+//   linkComponent?: LinkComponent
+// }
+// 
+// const aspectClass: Record<ContentCardAspect, string> = {
+//   "16/10": "aspect-[16/10]",
+//   "16/9": "aspect-[16/9]",
+//   "1/1": "aspect-[1/1]",
+// }
+// 
+// /** orientation ごとの外枠レイアウト */
+// const rootLayout: Record<ContentCardOrientation, string> = {
+//   vertical: "flex-col gap-2",
+//   horizontal: "flex-row items-start gap-3",
+//   list: "flex-row-reverse items-start gap-3",
+// }
+// 
+// /** orientation ごとの画像枠の幅 */
+// const mediaLayout: Record<ContentCardOrientation, string> = {
+//   vertical: "w-full",
+//   horizontal: "w-28 shrink-0",
+//   list: "w-24 shrink-0",
+// }
+// 
+// /**
+//  * 記事・特集・お知らせなど「画像 + タイトル + メタ」のカード。
+//  *
+//  * `ProductCard`（商品）/ `ShopCard`（店舗）の兄弟で、記事メディア向け。
+//  * 汎用の `Card` に載せて組むと、枠線・タイトル行数・カード高さが揃わない
+//  * （実測で高さ 268 と 312 に割れる事例あり）ため、この部品を使う。
+//  *
+//  * ### 作法
+//  *
+//  * - 枠線なし・`rounded-lg`・サーフェスは親から伝播（`Section background="subtle"` 配下では白）
+//  * - タイトルは 2 行で省略し、常に 2 行ぶんの高さを取る（一覧で下端が揃う）
+//  * - `meta` は 1 行固定でカード下端へ寄る
+//  * - 画像は `imageSlot` で consumer が用意する（`next/image` / CMS / 図版を吸収する）
+//  *
+//  * ### AI 向け使用ルール
+//  *
+//  * - 記事一覧・関連記事・注目記事は `Card` + `CardContent` で組まずこれを使う
+//  * - グリッド一覧は `orientation="vertical"`、Medium 型の縦リストは `orientation="list"` +
+//  *   `ContentList`（区切り線つき）
+//  * - タイトルの文字装飾を利用側で足さない（`font-bold` にしない。既定は `font-medium`）
+//  */
+// function ContentCard({
+//   className,
+//   title,
+//   href,
+//   imageSlot,
+//   tag,
+//   meta,
+//   orientation = "vertical",
+//   aspect = "16/10",
+//   linkComponent,
+//   ...props
+// }: ContentCardProps) {
+//   const Comp = resolveLinkComponent(linkComponent)
+// 
+//   return (
+//     <Comp
+//       data-slot="content-card"
+//       data-orientation={orientation}
+//       href={href}
+//       className={cn(
+//         "group flex rounded-lg bg-[var(--card-surface,var(--Surface-Primary))]",
+//         rootLayout[orientation],
+//         FOCUS_RING,
+//         className
+//       )}
+//       {...props}
+//     >
+//       {imageSlot && (
+//         <div
+//           data-slot="content-card-media"
+//           className={cn(
+//             "relative overflow-hidden rounded-lg",
+//             aspectClass[aspect],
+//             mediaLayout[orientation]
+//           )}
+//         >
+//           <div className="h-full w-full transition-transform duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] group-hover:scale-[1.02]">
+//             {imageSlot}
+//           </div>
+//           {tag && (
+//             <Tag
+//               variant={tag.variant}
+//               className="absolute bottom-2 left-2 max-w-[calc(100%-1rem)] overflow-hidden text-ellipsis"
+//             >
+//               {tag.label}
+//             </Tag>
+//           )}
+//         </div>
+//       )}
+//       <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+//         <span
+//           data-slot="content-card-title"
+//           className="line-clamp-2 min-h-[2lh] typo-body-md font-medium text-[var(--Text-High-Emphasis)]"
+//         >
+//           {title}
+//         </span>
+//         {meta && (
+//           <span
+//             data-slot="content-card-meta"
+//             className="mt-auto truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]"
+//           >
+//             {meta}
+//           </span>
+//         )}
+//       </div>
+//     </Comp>
+//   )
+// }
+// 
+// /**
+//  * `ContentCard` を区切り線つきで縦に並べるリスト（記事一覧の Medium 型）。
+//  *
+//  * 一覧ページで `orientation="list"` の `ContentCard` を並べるときに使う。
+//  * 区切り線と項目間の余白だけを持ち、幅・背景は持たない。
+//  */
+// function ContentList({
+//   className,
+//   ...props
+// }: React.HTMLAttributes<HTMLDivElement>) {
+//   return (
+//     <div
+//       data-slot="content-list"
+//       className={cn(
+//         "flex flex-col divide-y divide-[var(--Border-Low-Emphasis)]",
+//         "[&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0",
+//         className
+//       )}
+//       {...props}
+//     />
+//   )
+// }
+// 
+// export { ContentCard, ContentList }
+// 
 // src/components/primitives/content-carousel.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowLeft2 from "iconsax-reactjs/dist/esm/ArrowLeft2.js"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
@@ -14825,6 +15473,8 @@ export {
 // export { ContentCarousel }
 // 
 // src/components/primitives/date-picker.tsx
+// "use client"
+// 
 // /**
 //  * ## DatePicker / DateTimePicker — Popover + Calendar 組合せ済みの日付・日時入力
 //  *
@@ -15620,9 +16270,12 @@ export {
 // export { FilterBar }
 // 
 // src/components/primitives/footer.tsx
+// "use client"
+// 
 // import * as React from "react"
 // 
 // import { cn } from "@/lib/utils"
+// import { resolveLinkComponent, type LinkComponent } from "@/lib/link-component"
 // 
 // export interface FooterLink {
 //   label: string
@@ -15682,6 +16335,25 @@ export {
 //   trustBadge?: FooterTrustBadge
 //   /** フッター下部の補助リンク（特定商取引法、プライバシーポリシー等） */
 //   bottomLinks?: FooterLink[]
+//   /**
+//    * リンクの描画に使うコンポーネント（既定 `a`）。
+//    * `next/link` 等を渡すとクライアント遷移になる（#236）。
+//    * `external: true` のリンクは常に素の `<a target="_blank">` で描く。
+//    */
+//   linkComponent?: LinkComponent
+//   /**
+//    * レイアウト（既定 `default`）。
+//    * - `default` : ロゴ・説明文を最下部に中央寄せ（本番 Cake.jp 準拠）
+//    * - `brand-first` : ロゴ・説明文を先頭カラムに置き、その右にリンク群を並べる。
+//    *   下部バーはコピーライト左・`bottomRightSlot` 右の左右振り分けになる
+//    *   （求人ケーキ屋さん.jp / 仕入れケーキ屋さん.JP のフッター構成）
+//    */
+//   variant?: "default" | "brand-first"
+//   /**
+//    * 下部バーの右側に置く要素（`Powered by` 等）。
+//    * `variant="brand-first"` でのみ配置され、既定レイアウトでは無視される。
+//    */
+//   bottomRightSlot?: React.ReactNode
 // }
 // 
 // /**
@@ -15757,7 +16429,7 @@ export {
 //  * 本番CSS: `.p-footer-item__area { display: flex; justify-content: space-between; }`
 //  * 本番CSS: `.p-footer-item__title { pointer-events: none; }` （PCではアコーディオン無効）
 //  */
-// function FooterColumnNav({ groups }: { groups: FooterLinkGroup[] }) {
+// function FooterColumnNav({ groups, linkComponent }: { groups: FooterLinkGroup[]; linkComponent?: LinkComponent }) {
 //   const colClass =
 //     groups.length <= 4 ? "@lg:grid-cols-4" :
 //     groups.length === 5 ? "@lg:grid-cols-5" :
@@ -15773,13 +16445,13 @@ export {
 //           <ul className="space-y-1.5">
 //             {group.links.map((link) => (
 //               <li key={link.label}>
-//                 <a
-//                   href={link.href}
+//                 <FooterAnchor
+//                   link={link}
+//                   linkComponent={linkComponent}
 //                   className="typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]"
-//                   {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
 //                 >
 //                   {link.label}
-//                 </a>
+//                 </FooterAnchor>
 //               </li>
 //             ))}
 //           </ul>
@@ -15792,13 +16464,13 @@ export {
 //               <ul className="space-y-1.5">
 //                 {sub.links.map((link) => (
 //                   <li key={link.label}>
-//                     <a
-//                       href={link.href}
+//                     <FooterAnchor
+//                       link={link}
+//                       linkComponent={linkComponent}
 //                       className="typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]"
-//                       {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
 //                     >
 //                       {link.label}
-//                     </a>
+//                     </FooterAnchor>
 //                   </li>
 //                 ))}
 //               </ul>
@@ -15813,19 +16485,46 @@ export {
 // /**
 //  * フッターリンクリスト
 //  */
-// function FooterLinkList({ links }: { links: FooterLink[] }) {
+// /**
+//  * フッター内のリンク 1 本。linkComponent が渡されていればそれで描く（#236）。
+//  * 外部リンクは常に素の `<a target="_blank">`。
+//  */
+// function FooterAnchor({
+//   link,
+//   linkComponent,
+//   className,
+//   children,
+// }: {
+//   link: FooterLink
+//   linkComponent?: LinkComponent
+//   className?: string
+//   children: React.ReactNode
+// }) {
+//   const LinkTag = resolveLinkComponent(linkComponent, link.external)
+//   return (
+//     <LinkTag
+//       href={link.href}
+//       className={className}
+//       {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+//     >
+//       {children}
+//     </LinkTag>
+//   )
+// }
+// 
+// function FooterLinkList({ links, linkComponent }: { links: FooterLink[]; linkComponent?: LinkComponent }) {
 //   return (
 //     <ul>
 //       {links.map((link) => (
 //         <li key={link.label} className="border-b border-[var(--Border-Low-Emphasis)] last:border-b-0">
-//           <a
-//             href={link.href}
+//           <FooterAnchor
+//             link={link}
+//             linkComponent={linkComponent}
 //             className={cn(
 //               "flex items-center justify-between px-5 py-5",
 //               "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
 //               "hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]"
 //             )}
-//             {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
 //           >
 //             <span>{link.label}</span>
 //             {/* 右矢印アイコン（本番の icon-arrow と同等） */}
@@ -15838,7 +16537,7 @@ export {
 //             >
 //               <path d="M3.5 1.5L7 5L3.5 8.5" />
 //             </svg>
-//           </a>
+//           </FooterAnchor>
 //         </li>
 //       ))}
 //     </ul>
@@ -15879,8 +16578,27 @@ export {
 //   paymentMethods = [],
 //   trustBadge,
 //   bottomLinks = [],
+//   variant = "default",
+//   bottomRightSlot,
+//   linkComponent,
 //   ...props
 // }: FooterProps) {
+//   const isBrandFirst = variant === "brand-first"
+//   // ロゴはサイト内トップへの内部遷移なので linkComponent の対象にする（#236）
+//   const LogoLinkTag = resolveLinkComponent(linkComponent)
+//   const brandBlock = (logo || description) && (
+//     <div data-slot="footer-brand" className="grid content-start gap-4">
+//       {logo && (
+//         <LogoLinkTag href={logoHref} className="block w-fit text-[var(--Text-High-Emphasis)]">
+//           {logo}
+//         </LogoLinkTag>
+//       )}
+//       {description && (
+//         <p className="typo-body-sm text-[var(--Text-Low-Emphasis)]">{description}</p>
+//       )}
+//     </div>
+//   )
+// 
 //   return (
 //     <footer
 //       data-slot="footer"
@@ -15898,18 +16616,24 @@ export {
 //        */}
 //       {linkGroups.length > 0 && (
 //         <>
+//           {/* SP: brand-first はブランドブロックを先頭に出す */}
+//           {isBrandFirst && brandBlock && (
+//             <div className="border-t border-[var(--Border-Medium-Emphasis)] px-5 py-8 @lg:hidden">
+//               {brandBlock}
+//             </div>
+//           )}
 //           {/* SP: アコーディオン形式（md未満で表示） */}
-//           <nav aria-label="フッターナビゲーション" data-slot="footer-links" className="border-t border-[var(--Border-Medium-Emphasis)] @lg:hidden">
+//           <nav aria-label="フッターナビゲーション" data-slot="footer-links" className={cn("border-t border-[var(--Border-Medium-Emphasis)] @lg:hidden", isBrandFirst && "border-t-0")}>
 //             {linkGroups.map((group) => (
 //               <FooterAccordion key={group.title} title={group.title}>
-//                 <FooterLinkList links={group.links} />
+//                 <FooterLinkList links={group.links} linkComponent={linkComponent} />
 //                 {/* サブグループ（法人セクション内の催事・マガジン等） */}
 //                 {group.subGroups?.map((sub) => (
 //                   <div key={sub.title}>
 //                     <div className="border-t border-[var(--Border-Low-Emphasis)] px-5 py-5 typo-body-md text-[var(--Text-High-Emphasis)]">
 //                       {sub.title}
 //                     </div>
-//                     <FooterLinkList links={sub.links} />
+//                     <FooterLinkList links={sub.links} linkComponent={linkComponent} />
 //                   </div>
 //                 ))}
 //               </FooterAccordion>
@@ -15924,12 +16648,41 @@ export {
 //             className="hidden @lg:block border-t border-[var(--Border-Medium-Emphasis)]"
 //           >
 //             <div className="mx-auto max-w-[1065px] px-5 py-16">
-//               <FooterColumnNav groups={linkGroups} />
-//             </div>
-//           </nav>
+//               {isBrandFirst ? (
+//                 // FooterColumnNav は 1 つの grid 子としてリンク群をまとめて持つ。
+//                 // auto-fit だと nav 全体が 1 トラックに潰れて中で再分割されるため、
+//                 // ブランド列と nav 領域の比率を明示する（求人サイトの 1.6 : 3.4 相当）。
+//                 // brandBlock が無い（logo も description も未指定）ときに 2 カラムへ
+//                 // すると nav が 1.6fr のブランド側トラックへ入って左に寄るため、
+//                 // その場合は nav 単独レイアウトにする。
+//                 <div
+//                   className={cn(
+//                     "grid gap-8",
+//                     brandBlock && "@lg:grid-cols-[minmax(0,1.6fr)_minmax(0,3.4fr)]"
+//                   )}
+//                 >
+//                   {brandBlock}
+//                   <FooterColumnNav groups={linkGroups} linkComponent={linkComponent} />
+//                 </div>
+//               ) : (
+//                 <FooterColumnNav groups={linkGroups} linkComponent={linkComponent} />
+//               )}
+//             </div>
+//           </nav>
 //         </>
 //       )}
 // 
+//       {/* brand-first でリンク群が無いとき、ロゴ・説明文が消えないよう単独で出す
+//           （既定レイアウトは下部バーで出すのでここは通らない） */}
+//       {isBrandFirst && linkGroups.length === 0 && brandBlock && (
+//         <div
+//           data-slot="footer-brand-only"
+//           className="border-t border-[var(--Border-Medium-Emphasis)] px-5 py-8 @lg:py-16"
+//         >
+//           <div className="mx-auto max-w-[1065px]">{brandBlock}</div>
+//         </div>
+//       )}
+// 
 //       {/* Social Links (p-footer-item__sns) */}
 //       {socialLinks.length > 0 && (
 //         <div
@@ -16013,45 +16766,59 @@ export {
 //         >
 //           <div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-2 @sm:gap-x-4">
 //             {bottomLinks.map((link) => (
-//               <a
+//               <FooterAnchor
 //                 key={link.label}
-//                 href={link.href}
+//                 link={link}
+//                 linkComponent={linkComponent}
 //                 className="typo-body-xs text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]"
-//                 {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
 //               >
 //                 {link.label}
-//               </a>
+//               </FooterAnchor>
 //             ))}
 //           </div>
 //         </div>
 //       )}
 // 
 //       {/* Footer Bottom (p-footer-bottom) */}
-//       <div
-//         data-slot="footer-bottom"
-//         className="border-t border-[var(--Border-Medium-Emphasis)] px-5 pt-8 pb-9 text-center"
-//       >
-//         {/* Logo */}
-//         {logo && (
-//           <div className="mx-auto w-fit max-w-[160px]">
-//             <a href={logoHref} className="block text-[var(--Text-High-Emphasis)]">
-//               {logo}
-//             </a>
+//       {isBrandFirst ? (
+//         // ロゴ・説明文はブランド列で出し済みなので、ここはコピーライトと
+//         // bottomRightSlot（Powered by 等）を左右に振り分けるだけにする。
+//         <div
+//           data-slot="footer-bottom"
+//           className="border-t border-[var(--Border-Medium-Emphasis)] px-5 py-5"
+//         >
+//           <div className="mx-auto flex max-w-[1065px] flex-col gap-3 typo-body-sm text-[var(--Text-Low-Emphasis)] @lg:flex-row @lg:items-center @lg:justify-between">
+//             <p>{copyright}</p>
+//             {bottomRightSlot}
 //           </div>
-//         )}
+//         </div>
+//       ) : (
+//         <div
+//           data-slot="footer-bottom"
+//           className="border-t border-[var(--Border-Medium-Emphasis)] px-5 pt-8 pb-9 text-center"
+//         >
+//           {/* Logo */}
+//           {logo && (
+//             <div className="mx-auto w-fit max-w-[160px]">
+//               <LogoLinkTag href={logoHref} className="block text-[var(--Text-High-Emphasis)]">
+//                 {logo}
+//               </LogoLinkTag>
+//             </div>
+//           )}
 // 
-//         {/* Description */}
-//         {description && (
-//           <p className="mt-6 typo-body-sm text-[var(--Text-Low-Emphasis)]">
-//             {description}
-//           </p>
-//         )}
+//           {/* Description */}
+//           {description && (
+//             <p className="mt-6 typo-body-sm text-[var(--Text-Low-Emphasis)]">
+//               {description}
+//             </p>
+//           )}
 // 
-//         {/* Copyright */}
-//         <p className="mt-5 typo-body-sm text-[var(--Text-Low-Emphasis)]">
-//           {copyright}
-//         </p>
-//       </div>
+//           {/* Copyright */}
+//           <p className="mt-5 typo-body-sm text-[var(--Text-Low-Emphasis)]">
+//             {copyright}
+//           </p>
+//         </div>
+//       )}
 //     </footer>
 //   )
 // }
@@ -16059,6 +16826,8 @@ export {
 // export { Footer }
 // 
 // src/components/primitives/form-field.tsx
+// "use client"
+// 
 // /**
 //  * ## FormField / フォームフィールド
 //  *
@@ -16394,6 +17163,8 @@ export {
 // export { FunnelShell }
 // 
 // src/components/primitives/header.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowDown2 from "iconsax-reactjs/dist/esm/ArrowDown2.js"
 // import ArrowLeft from "iconsax-reactjs/dist/esm/ArrowLeft.js"
@@ -16406,6 +17177,13 @@ export {
 //   DropdownMenuItem,
 //   DropdownMenuTrigger,
 // } from "@/components/foundations/dropdown-menu"
+// import { containerVariants } from "@/components/primitives/container"
+// 
+// /**
+//  * ヘッダー内側の最大幅。`Container` の同名 size と同じ値を使う（値の正本は Container）。
+//  * 本文を `Container size="page"` で中央寄せしているサイトで、ロゴ・ナビの左端を本文に揃える。
+//  */
+// export type HeaderContainerSize = "page" | "wide" | "fluid"
 // 
 // export interface HeaderAction {
 //   /** アイコン要素 */
@@ -16422,6 +17200,12 @@ export {
 //   href?: string
 //   /** バッジ数（通知やカート件数） */
 //   badge?: React.ReactNode
+//   /**
+//    * `label` をアイコンの右に可視テキストとして出す（既定 false = アイコンのみ）。
+//    * 「ログイン」等、文字が無いと意味が伝わりにくい導線に使う。
+//    * true のときは正方形のアイコンボタンではなく、枠線付きのピル型で描画する。
+//    */
+//   showLabel?: boolean
 // }
 // 
 // export interface HeaderNavItem {
@@ -16466,7 +17250,7 @@ export {
 //   /**
 //    * インラインナビ（navItems / searchSlot 行）を出し始めるコンテナ幅。
 //    * - `md`（既定）: `@[768px]`+
-//    * - `lg` : `@[1024px]`+（ロゴが多段で横幅を食う等、中幅での同居を避けたいとき）
+//    * - `lg` : `@[960px]`+（ロゴが多段で横幅を食う等、中幅での同居を避けたいとき）
 //    * 未満の幅では SP 行（ロゴ + actions）になる。
 //    */
 //   navBreakpoint?: "md" | "lg"
@@ -16480,6 +17264,16 @@ export {
 //    * navItems が無く searchSlot だけを渡した場合も PC 行を描画する。
 //    */
 //   searchSlot?: React.ReactNode
+//   /**
+//    * `searchSlot` を出し始めるコンテナ幅（既定はインラインナビ行と同じ）。
+//    * tokens.json の切替段に一致する `md`（768px）/ `lg`（960px）のみ。
+//    * `xl`(1280) はコンテンツ上限段でレイアウトの切替段ではないため受け付けない。
+//    *
+//    * 中身を consumer 側の CSS で隠しても、このスロットの器は `flex-1` の幅を
+//    * 確保し続けてインラインナビを潰す（#243）。狭い帯で検索を出さない場合は
+//    * CSS ではなくこの prop で器ごと畳むこと。
+//    */
+//   searchBreakpoint?: "md" | "lg"
 //   /** 右側に配置するカスタム要素（variant="back"で使用） */
 //   rightSlot?: React.ReactNode
 //   /** 検索バーなど中央に配置するカスタム要素（variant="back-search"で使用） */
@@ -16492,6 +17286,65 @@ export {
 //   bottomSlot?: React.ReactNode
 //   /** sticky 配置を無効化 */
 //   disableSticky?: boolean
+//   /**
+//    * ヘッダー内側の最大幅（`Container` と同じ段）。
+//    * 指定すると背景・border・sticky は全幅のまま、**中身だけ**を中央寄せする。
+//    * 本文を `Container size="page"` で組んでいるサイトで、ロゴ・ナビの左端が本文と揃う。
+//    * 未指定なら従来どおり全幅（DOM も従来どおりで内側ラッパーを足さない）。
+//    */
+//   containerSize?: HeaderContainerSize
+// }
+// 
+// /**
+//  * ヘッダーの外枠。
+//  *
+//  * `containerSize` 指定時は、背景・border・sticky を `<header>` に残したまま、
+//  * 内側だけ `Container` 相当（max-width + mx-auto）で中央寄せする。
+//  * 未指定時はラッパーを足さず、従来の DOM 構造をそのまま保つ。
+//  */
+// function HeaderShell({
+//   containerSize,
+//   shellClass,
+//   layoutClass,
+//   containerQuery = false,
+//   children,
+//   ...props
+// }: React.ComponentProps<"header"> & {
+//   containerSize?: HeaderContainerSize
+//   /** sticky / 背景 / border / 利用側 className をまとめたもの（常に全幅側） */
+//   shellClass?: string
+//   /** その variant の行レイアウト（padding 含む）。containerSize 指定時は内側へ移す */
+//   layoutClass?: string
+//   /** @container を張るか（variant="logo" のインラインナビ判定用） */
+//   containerQuery?: boolean
+// }) {
+//   if (!containerSize) {
+//     return (
+//       <header
+//         data-slot="header"
+//         className={cn(containerQuery && "@container", layoutClass, shellClass)}
+//         {...props}
+//       >
+//         {children}
+//       </header>
+//     )
+//   }
+// 
+//   return (
+//     <header data-slot="header" className={shellClass} {...props}>
+//       <div
+//         data-slot="header-container"
+//         data-container-size={containerSize}
+//         className={cn(
+//           containerQuery && "@container",
+//           containerVariants({ size: containerSize, gutter: "none" }),
+//           layoutClass
+//         )}
+//       >
+//         {children}
+//       </div>
+//     </header>
+//   )
 // }
 // 
 // /** ナビ項目の共通クラス（表示用・計測用で同一にしないと退避判定がずれる） */
@@ -16581,21 +17434,30 @@ export {
 // 
 //   return (
 //     <div ref={wrapRef} className="relative min-w-0 flex-1">
-//       {/* 計測用の複製（visibility:hidden・absolute なのでレイアウトに影響しない） */}
+//       {/*
+//         計測用の複製。absolute + invisible は通常フローには影響しないが、絶対配置
+//         要素も祖先のスクロール可能領域には寄与するため、そのままではページ全体が
+//         横スクロールする（#243）。0 幅 0 高 + overflow:hidden の器で包んで寄与を
+//         断つ。クリップは描画時のみでレイアウトは保たれるため計測結果は変わらない。
+//       */}
 //       <div
-//         ref={measureRef}
 //         aria-hidden="true"
-//         className="invisible pointer-events-none absolute top-0 left-0 flex w-max items-center gap-0.5"
+//         className="pointer-events-none absolute top-0 left-0 h-0 w-0 overflow-hidden"
 //       >
-//         {items.map((item) => (
-//           <span key={item.label} className={navItemClass(item.isActive)}>
-//             {item.label}
+//         <div
+//           ref={measureRef}
+//           className="invisible flex w-max items-center gap-0.5"
+//         >
+//           {items.map((item) => (
+//             <span key={item.label} className={navItemClass(item.isActive)}>
+//               {item.label}
+//             </span>
+//           ))}
+//           <span className={cn(navItemClass(false), "inline-flex items-center gap-1")}>
+//             {overflowLabel}
+//             <ArrowDown2 size={16} />
 //           </span>
-//         ))}
-//         <span className={cn(navItemClass(false), "inline-flex items-center gap-1")}>
-//           {overflowLabel}
-//           <ArrowDown2 size={16} />
-//         </span>
+//         </div>
 //       </div>
 // 
 //       <nav className="flex items-center gap-0.5">
@@ -16672,10 +17534,12 @@ export {
 //   navBreakpoint = "md",
 //   navOverflowLabel,
 //   searchSlot,
+//   searchBreakpoint,
 //   rightSlot,
 //   centerSlot,
 //   bottomSlot,
 //   disableSticky = false,
+//   containerSize,
 //   ...props
 // }: HeaderProps) {
 //   const stickyClass = disableSticky
@@ -16683,13 +17547,25 @@ export {
 //     : "sticky top-0 z-[var(--Z-Nav)]"
 // 
 //   const baseClass =
-//     "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]"
+//     // 地は Surface-Elevated: sticky バーはスクロールするコンテンツの上に重なるため
+//     // 不透明が必須（dark の Surface-Primary は 10% 透過で下の文字が透ける）。light は同値
+//     "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]"
+// 
+//   const shellClass = cn(stickyClass, baseClass, className)
 // 
 //   // navBreakpoint → コンテナクエリのクラス（Tailwind の静的解析を保つため即値で持つ）
+//   // 切替段は tokens.json の md=768 / lg=960 のみ（1024 は DS に存在しない段）
 //   const spRowHiddenClass =
-//     navBreakpoint === "lg" ? "@[1024px]:hidden" : "@[768px]:hidden"
+//     navBreakpoint === "lg" ? "@[960px]:hidden" : "@[768px]:hidden"
 //   const pcRowVisibleClass =
-//     navBreakpoint === "lg" ? "hidden @[1024px]:flex" : "hidden @[768px]:flex"
+//     navBreakpoint === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex"
+//   // searchSlot の器を出す幅。未指定ならナビ行と同じ（＝常に描画）。
+//   const searchSlotVisibleClass =
+//     searchBreakpoint === "lg"
+//       ? "hidden @[960px]:block"
+//       : searchBreakpoint === "md"
+//         ? "hidden @[768px]:block"
+//         : undefined
 // 
 //   /* ── variant: logo ─────────────────────────────── */
 //   if (variant === "logo") {
@@ -16701,38 +17577,56 @@ export {
 // 
 //     const actionsEl = actions && actions.length > 0 && (
 //       <div className="flex shrink-0 items-center gap-1">
-//         {actions.map((action) =>
-//           action.href ? (
+//         {actions.map((action) => {
+//           // showLabel はアイコン＋可視テキストのピル。タップターゲット確保のため
+//           // 高さは 40px（h-10）で、正方形の icon-sm とは別サイズにする。
+//           const buttonProps = action.showLabel
+//             ? {
+//                 variant: "ghost" as const,
+//                 size: "sm" as const,
+//                 className:
+//                   "h-10 gap-1.5 rounded-full border border-[var(--Border-Medium-Emphasis)] px-4",
+//               }
+//             : { variant: "ghost" as const, size: "icon-sm" as const }
+//           const content = (
+//             <>
+//               {action.badge ? action.badge : action.icon}
+//               {action.showLabel && (
+//                 <span className="typo-label-sm">{action.label}</span>
+//               )}
+//             </>
+//           )
+// 
+//           return action.href ? (
 //             <Button
 //               key={action.label}
 //               asChild
-//               variant="ghost"
-//               size="icon-sm"
-//               aria-label={action.label}
+//               {...buttonProps}
+//               aria-label={action.showLabel ? undefined : action.label}
 //             >
 //               <a href={action.href} onClick={action.onClick}>
-//                 {action.badge ? action.badge : action.icon}
+//                 {content}
 //               </a>
 //             </Button>
 //           ) : (
 //             <Button
 //               key={action.label}
-//               variant="ghost"
-//               size="icon-sm"
-//               aria-label={action.label}
+//               {...buttonProps}
+//               aria-label={action.showLabel ? undefined : action.label}
 //               onClick={action.onClick}
 //             >
-//               {action.badge ? action.badge : action.icon}
+//               {content}
 //             </Button>
 //           )
-//         )}
+//         })}
 //       </div>
 //     )
 // 
 //     return (
-//       <header
-//         data-slot="header"
-//         className={cn(stickyClass, baseClass, "@container", className)}
+//       <HeaderShell
+//         containerSize={containerSize}
+//         shellClass={shellClass}
+//         containerQuery
 //         {...props}
 //       >
 //         {/* SP: ロゴ + アクション（navItems / searchSlot は非表示。SP 検索は bottomSlot で運用） */}
@@ -16744,7 +17638,7 @@ export {
 //           {actionsEl}
 //         </div>
 // 
-//         {/* PC（既定 @[768px]+ / navBreakpoint="lg" なら @[1024px]+）:
+//         {/* PC（既定 @[768px]+ / navBreakpoint="lg" なら @[960px]+）:
 //             ロゴ + グローバルナビ + 検索 + アクション（1行）。
 //             navItems / searchSlot のどちらかがあれば描画する。 */}
 //         {(navItems || searchSlot) && (
@@ -16760,28 +17654,31 @@ export {
 //             </div>
 //             {/* 検索スロット（navItems と actions の間・伸縮。既存要素を潰さない） */}
 //             {searchSlot && (
-//               <div className="min-w-0 flex-1 max-w-[400px]">{searchSlot}</div>
+//               <div
+//                 className={cn(
+//                   "min-w-0 flex-1 max-w-[400px]",
+//                   searchSlotVisibleClass
+//                 )}
+//               >
+//                 {searchSlot}
+//               </div>
 //             )}
 //             {actionsEl}
 //           </div>
 //         )}
 // 
 //         {bottomSlot}
-//       </header>
+//       </HeaderShell>
 //     )
 //   }
 // 
 //   /* ── variant: logo-center ────────────────────────── */
 //   if (variant === "logo-center") {
 //     return (
-//       <header
-//         data-slot="header"
-//         className={cn(
-//           stickyClass,
-//           baseClass,
-//           "flex items-center justify-center px-4 py-3",
-//           className
-//         )}
+//       <HeaderShell
+//         containerSize={containerSize}
+//         shellClass={shellClass}
+//         layoutClass="flex items-center justify-center px-4 py-3"
 //         {...props}
 //       >
 //         {typeof logo === "string" ? (
@@ -16791,27 +17688,25 @@ export {
 //         ) : (
 //           logo ?? null
 //         )}
-//       </header>
+//       </HeaderShell>
 //     )
 //   }
 // 
 //   /* ── variant: back-search ──────────────────────── */
 //   if (variant === "back-search") {
 //     return (
-//       <header
-//         data-slot="header"
-//         className={cn(
-//           stickyClass,
-//           baseClass,
-//           "px-4 py-3",
-//           className
-//         )}
+//       <HeaderShell
+//         containerSize={containerSize}
+//         shellClass={shellClass}
+//         layoutClass="px-4 py-3"
 //         {...props}
 //       >
 //         <div className="flex items-center gap-2">
+//           {/* centerSlot は SearchBar 等の入力コントロール（44px）が入るので、
+//               戻るボタンも同じ 44px にして高さを揃える（icon-sm=32px だと 12px ずれる） */}
 //           <Button
 //             variant="ghost"
-//             size="icon-sm"
+//             size="icon-xl"
 //             aria-label={backLabel}
 //             onClick={onBack}
 //           >
@@ -16819,7 +17714,7 @@ export {
 //           </Button>
 //           {centerSlot && <div className="flex-1">{centerSlot}</div>}
 //         </div>
-//       </header>
+//       </HeaderShell>
 //     )
 //   }
 // 
@@ -16828,14 +17723,10 @@ export {
 //   // 左右カラムを等幅にすることで、rightSlot の幅に関わらずタイトルがヘッダー中央に
 //   // 正しく揃う（旧 flex-1 text-center は rightSlot が広いとタイトルが左へずれた）。
 //   return (
-//     <header
-//       data-slot="header"
-//       className={cn(
-//         stickyClass,
-//         baseClass,
-//         "grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-2 py-3",
-//         className
-//       )}
+//     <HeaderShell
+//       containerSize={containerSize}
+//       shellClass={shellClass}
+//       layoutClass="grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-2 py-3"
 //       {...props}
 //     >
 //       <div className="justify-self-start">
@@ -16852,13 +17743,15 @@ export {
 //         {title}
 //       </h1>
 //       <div className="justify-self-end">{rightSlot}</div>
-//     </header>
+//     </HeaderShell>
 //   )
 // }
 // 
 // export { Header }
 // 
 // src/components/primitives/image-carousel.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowLeft2 from "iconsax-reactjs/dist/esm/ArrowLeft2.js"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
@@ -17111,6 +18004,8 @@ export {
 // export { ImageCarousel }
 // 
 // src/components/primitives/image-gallery.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowLeft2 from "iconsax-reactjs/dist/esm/ArrowLeft2.js"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
@@ -17350,6 +18245,8 @@ export {
 // export { ImageGallery }
 // 
 // src/components/primitives/image-input.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // import { Image as ImageIcon, X } from "lucide-react"
@@ -17917,6 +18814,8 @@ export {
 // }
 // 
 // src/components/primitives/list-item.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // import ArrowDown2 from "iconsax-reactjs/dist/esm/ArrowDown2.js"
@@ -18139,6 +19038,8 @@ export {
 // export { ListItem }
 // 
 // src/components/primitives/menu-drawer.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import ArrowDown2 from "iconsax-reactjs/dist/esm/ArrowDown2.js"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
@@ -18147,6 +19048,7 @@ export {
 // import { X } from "lucide-react"
 // 
 // import { cn } from "@/lib/utils"
+// import { resolveLinkComponent, type LinkComponent } from "@/lib/link-component"
 // import { Button } from "@/components/foundations/button"
 // 
 // export interface MenuSection {
@@ -18191,6 +19093,12 @@ export {
 // }
 // 
 // export interface MenuDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+//   /**
+//    * リンクの描画に使うコンポーネント（既定 `a`）。
+//    * `next/link` 等を渡すとクライアント遷移になる（#236）。
+//    */
+//   linkComponent?: LinkComponent
+// 
 //   /** ユーザー名（ログイン時） */
 //   userName?: string
 //   /** ログイン状態 */
@@ -18247,8 +19155,12 @@ export {
 //   onLogin,
 //   loginHref = "/security/login_link/",
 //   className,
+//   linkComponent,
 //   ...props
 // }: MenuDrawerProps) {
+//   // ログイン導線・バナーも内部遷移なので linkComponent の対象にする（#236）
+//   const LoginLinkTag = resolveLinkComponent(linkComponent)
+//   const BannerLinkTag = resolveLinkComponent(linkComponent)
 //   const [expandedSections, setExpandedSections] = React.useState<Set<number>>(
 //     new Set()
 //   )
@@ -18305,7 +19217,7 @@ export {
 //           <div className="py-2">
 //             <ul>
 //               <li>
-//                 <a
+//                 <LoginLinkTag
 //                   href={loginHref}
 //                   onClick={
 //                     onLogin
@@ -18321,7 +19233,7 @@ export {
 //                     <Add size={16} />
 //                   </span>
 //                   <span className="flex-1">ログイン・新規会員登録</span>
-//                 </a>
+//                 </LoginLinkTag>
 //               </li>
 //             </ul>
 //           </div>
@@ -18355,7 +19267,7 @@ export {
 //               <ul>
 //                 {section.items.map((item) => (
 //                   <li key={item.label}>
-//                     <MenuItemLink item={item} />
+//                     <MenuItemLink linkComponent={linkComponent} item={item} />
 //                   </li>
 //                 ))}
 //               </ul>
@@ -18367,7 +19279,7 @@ export {
 //                     <ul>
 //                       {section.itemsExtra.map((item) => (
 //                         <li key={item.label}>
-//                           <MenuItemLink item={item} />
+//                           <MenuItemLink linkComponent={linkComponent} item={item} />
 //                         </li>
 //                       ))}
 //                     </ul>
@@ -18401,7 +19313,7 @@ export {
 //             <ul className="flex justify-center">
 //               {banners.map((banner, i) => (
 //                 <li key={i} className="w-1/2 max-w-28 px-2">
-//                   <a
+//                   <BannerLinkTag
 //                     href={banner.href ?? "#"}
 //                     className="block overflow-hidden rounded"
 //                   >
@@ -18411,7 +19323,7 @@ export {
 //                       alt={banner.alt}
 //                       className="h-auto w-full object-cover"
 //                     />
-//                   </a>
+//                   </BannerLinkTag>
 //                 </li>
 //               ))}
 //             </ul>
@@ -18423,9 +19335,10 @@ export {
 // }
 // 
 // /** 個別メニューアイテムのリンク表示 */
-// function MenuItemLink({ item }: { item: MenuItem }) {
+// function MenuItemLink({ item, linkComponent }: { item: MenuItem; linkComponent?: LinkComponent }) {
+//   const LinkTag = resolveLinkComponent(linkComponent)
 //   return (
-//     <a
+//     <LinkTag
 //       href={item.href ?? "#"}
 //       onClick={item.onClick}
 //       className={menuRowClass}
@@ -18466,13 +19379,15 @@ export {
 //       {item.hasChildren && (
 //         <ArrowRight2 size={16} className="shrink-0 text-[var(--Object-High-Emphasis)]" />
 //       )}
-//     </a>
+//     </LinkTag>
 //   )
 // }
 // 
 // export { MenuDrawer }
 // 
 // src/components/primitives/multi-select.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { Check, ChevronsUpDown } from "lucide-react"
 // 
@@ -18871,6 +19786,8 @@ export {
 // export { NotificationList }
 // 
 // src/components/primitives/number-input.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import Add from "iconsax-reactjs/dist/esm/Add.js"
 // import Minus from "iconsax-reactjs/dist/esm/Minus.js"
@@ -19511,7 +20428,104 @@ export {
 // 
 // export { ProgressSteps }
 // 
+// src/components/primitives/prose.tsx
+// import * as React from "react"
+// 
+// import { cn } from "@/lib/utils"
+// 
+// export interface ProseProps extends React.HTMLAttributes<HTMLElement> {
+//   /**
+//    * CMS（microCMS 等）のリッチテキスト HTML。
+//    *
+//    * **サニタイズ済みの HTML だけを渡すこと。** この部品は体裁を当てるだけで、
+//    * 中身の無害化は行わない（`dangerouslySetInnerHTML` に素通しする）。
+//    * 未指定なら `children` をそのまま包む。
+//    */
+//   html?: string
+//   /** ラップする要素（既定 `div`。記事本文なら `article`） */
+//   as?: "div" | "article" | "section"
+// }
+// 
+// /**
+//  * 記事本文の体裁（見出し・段落・リスト・引用・表・画像・リンク）をトークンで揃える。
+//  *
+//  * 各要素の余白・サイズ・線・色を 1 箇所に集約し、記事メディアごとに CSS Modules を
+//  * 書き分けて見た目がばらつくのを防ぐ。`Container size="narrow"`（760px）と
+//  * 組み合わせて使う前提の行長になっている。
+//  *
+//  * ### AI 向け使用ルール
+//  *
+//  * - CMS のリッチテキストを描くときは、consumer 側で `h2` / `p` / `ul` の CSS を書かず
+//  *   これを使う（`ArticleBody.module.css` のような独自 CSS を作らない）
+//  * - `html` に渡す HTML は **利用側でサニタイズ済み**であること
+//  * - 記事幅は `Container size="narrow"` で決める。この部品は幅を持たない
+//  * - 見出しレベルは CMS の出力に従う（この部品は体裁だけを当て、階層は変えない）
+//  *
+//  * @example
+//  * <Container size="narrow">
+//  *   <Prose as="article" html={sanitizedHtml} />
+//  * </Container>
+//  */
+// function Prose({ className, html, as: Comp = "div", children, ...props }: ProseProps) {
+//   const proseClass = cn(
+//     // 基本の本文
+//     "typo-body-md text-[var(--Text-High-Emphasis)]",
+//     // 見出し
+//     "[&_h2]:mt-10 [&_h2]:mb-4 [&_h2]:typo-heading-2xl",
+//     "[&_h3]:mt-8 [&_h3]:mb-3 [&_h3]:typo-heading-xl",
+//     "[&_h4]:mt-6 [&_h4]:mb-2 [&_h4]:typo-heading-lg",
+//     "[&_h5]:mt-6 [&_h5]:mb-2 [&_h5]:typo-heading-md",
+//     // 段落・リスト
+//     "[&_p]:my-4",
+//     "[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6",
+//     "[&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6",
+//     "[&_li]:my-1",
+//     // 引用
+//     "[&_blockquote]:my-6 [&_blockquote]:border-l-4 [&_blockquote]:border-[var(--Border-Medium-Emphasis)] [&_blockquote]:pl-4 [&_blockquote]:text-[var(--Text-Medium-Emphasis)]",
+//     // リンク
+//     "[&_a]:text-[var(--Text-Accent-Primary)] [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:no-underline",
+//     // 画像・図版
+//     "[&_img]:my-6 [&_img]:h-auto [&_img]:w-full [&_img]:rounded-lg",
+//     "[&_figure]:my-6 [&_figcaption]:mt-2 [&_figcaption]:typo-body-sm [&_figcaption]:text-[var(--Text-Medium-Emphasis)]",
+//     // 表。block + w-max + max-w-full で、枠に収まるまで縮み、縮みきれなければ
+//     // 表自身が横スクロールする。どちらの場合もページを横に伸ばさない
+//     "[&_table]:my-6 [&_table]:block [&_table]:w-max [&_table]:max-w-full [&_table]:overflow-x-auto [&_table]:border-collapse",
+//     "[&_th]:border [&_th]:border-[var(--Border-Low-Emphasis)] [&_th]:bg-[var(--Surface-Secondary)] [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:typo-label-sm",
+//     "[&_td]:border [&_td]:border-[var(--Border-Low-Emphasis)] [&_td]:px-3 [&_td]:py-2",
+//     // コード
+//     "[&_code]:rounded-xs [&_code]:bg-[var(--Surface-Secondary)] [&_code]:px-1 [&_code]:py-0.5",
+//     "[&_pre]:my-6 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-[var(--Surface-Secondary)] [&_pre]:p-4",
+//     "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
+//     // 区切り線
+//     "[&_hr]:my-8 [&_hr]:border-t [&_hr]:border-[var(--Border-Low-Emphasis)]",
+//     // 先頭・末尾は外側の余白と二重にしない
+//     "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+//     className
+//   )
+// 
+//   if (html !== undefined) {
+//     return (
+//       <Comp
+//         data-slot="prose"
+//         className={proseClass}
+//         dangerouslySetInnerHTML={{ __html: html }}
+//         {...props}
+//       />
+//     )
+//   }
+// 
+//   return (
+//     <Comp data-slot="prose" className={proseClass} {...props}>
+//       {children}
+//     </Comp>
+//   )
+// }
+// 
+// export { Prose }
+// 
 // src/components/primitives/search-bar.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import SearchNormal1 from "iconsax-reactjs/dist/esm/SearchNormal1.js"
 // 
@@ -19526,6 +20540,17 @@ export {
 //   size?: "sm" | "md"
 //   /** 検索リンクURL（{query} はクエリに置換） */
 //   searchHref?: string
+//   /**
+//    * 指定すると `<form method="get" action={action}>` として描画し、素のフォーム送信で遷移する。
+//    * JS を必要としないので、スクリプト無効環境やクローラでも検索が成立する（SEO 重視のサイト向け）。
+//    * 送信するクエリのキーは `name`（既定 `"q"`）。`searchHref` とは併用しない（`action` が優先）。
+//    */
+//   action?: string
+//   /**
+//    * 送信するクエリのキー（`action` 指定時の既定 `"q"`）。
+//    * そのまま input の `name` 属性になる。
+//    */
+//   name?: string
 // }
 // 
 // /**
@@ -19546,7 +20571,9 @@ export {
 //  * - `size="sm"` はコンパクトなヘッダー向け
 //  * - `size="md"` は検索専用ページ向け
 //  * - `onSearch` で検索クエリを受け取る
-//  * - `searchHref` で検索結果ページへの遷移リンクを生成
+//  * - `searchHref` で検索結果ページへの遷移リンクを生成（JS が必要）
+//  * - **JS 無効環境・SEO を考慮するサイトは `action` を使う**。`<form method="get">` として
+//  *   描画され、素のフォーム送信で遷移する（`Input` + `Button` で `<form>` を手組みしない）
 //  */
 // const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>(
 //   (
@@ -19556,10 +20583,14 @@ export {
 //       onSearch,
 //       size = "md",
 //       searchHref,
+//       action,
+//       name,
 //       ...props
 //     },
 //     ref
 //   ) => {
+//     /** action があれば素の GET フォームとして描く（JS 不要で遷移する） */
+//     const isFormMode = !!action
 //     const inputRef = React.useRef<HTMLInputElement | null>(null)
 // 
 //     const setRefs = React.useCallback(
@@ -19584,29 +20615,40 @@ export {
 //     }
 // 
 //     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-//       if (e.key === "Enter") {
+//       // form モードでは Enter は素のフォーム送信が処理する（ここで遷移すると二重になる）
+//       if (e.key === "Enter" && !isFormMode) {
 //         triggerSearch()
 //       }
 //       props.onKeyDown?.(e)
 //     }
 // 
-//     return (
-//       <div
-//         data-slot="search-bar"
-//         className={cn(
-//           "group flex items-center overflow-hidden rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] transition-colors",
-//           // Tailwind の variant 順では focus-within が hover より先に出力される
-//           // ＝ hover が後勝ちしてフォーカス枠を潰すため、hover 側を明示的に抑制する。
-//           "hover:not-focus-within:border-[var(--Border-High-Emphasis)]",
-//           FOCUS_RING_WITHIN,
-//           size === "sm" ? "h-9" : "h-11",
-//           className
-//         )}
-//       >
+//     /** form モードの送信。空クエリは従来どおり無視する */
+//     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+//       const query = inputRef.current?.value ?? ""
+//       if (!query.trim()) {
+//         e.preventDefault()
+//         return
+//       }
+//       onSearch?.(query)
+//     }
+// 
+//     const rootClassName = cn(
+//       "group flex items-center overflow-hidden rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] transition-colors",
+//       // Tailwind の variant 順では focus-within が hover より先に出力される
+//       // ＝ hover が後勝ちしてフォーカス枠を潰すため、hover 側を明示的に抑制する。
+//       "hover:not-focus-within:border-[var(--Border-High-Emphasis)]",
+//       FOCUS_RING_WITHIN,
+//       size === "sm" ? "h-9" : "h-11",
+//       className
+//     )
+// 
+//     const content = (
+//       <>
 //         <input
 //           ref={setRefs}
 //           type="search"
 //           aria-label="キーワード検索"
+//           name={isFormMode ? (name ?? "q") : name}
 //           placeholder={placeholder}
 //           className={cn(
 //             "min-w-0 flex-1 bg-transparent px-3 text-[var(--Text-High-Emphasis)] outline-none placeholder:text-[var(--Text-Low-Emphasis)]",
@@ -19616,18 +20658,40 @@ export {
 //           {...props}
 //         />
 //         <button
-//           type="button"
+//           type={isFormMode ? "submit" : "button"}
 //           className={cn(
 //             "flex shrink-0 items-center justify-center border-l border-[var(--Border-Medium-Emphasis)] text-[var(--Text-Low-Emphasis)] transition-colors outline-none hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)]",
 //             // 親が overflow-hidden なので外向きリングは切れる。内側に描く。
 //             FOCUS_RING_INSET,
 //             size === "sm" ? "size-9" : "h-11 w-11"
 //           )}
-//           onClick={triggerSearch}
+//           onClick={isFormMode ? undefined : triggerSearch}
 //           aria-label="検索"
 //         >
 //           <SearchNormal1 size={size === "sm" ? 14 : 16} />
 //         </button>
+//       </>
+//     )
+// 
+//     if (isFormMode) {
+//       return (
+//         <form
+//           data-slot="search-bar"
+//           action={action}
+//           method="get"
+//           // 検索フォームであることを支援技術に伝える標準パターン
+//           role="search"
+//           onSubmit={handleSubmit}
+//           className={rootClassName}
+//         >
+//           {content}
+//         </form>
+//       )
+//     }
+// 
+//     return (
+//       <div data-slot="search-bar" className={rootClassName}>
+//         {content}
 //       </div>
 //     )
 //   }
@@ -19832,7 +20896,8 @@ export {
 //  * - セクション見出し（ランキング等）: `size="xl"` or `size="lg"`（デフォルト）
 //  * - 小見出し・グループラベル: `size="md"` or `size="sm"`
 //  * - `as` で見出しレベルを上書き可能（同一ページに h1 が複数必要な場合など）
-//  * - `moreHref` 指定時はタイトル+サブタイトル全体がリンクになる（クリック領域拡大）
+//  * - `moreHref` 指定時はタイトル行がリンクになる（クリック領域拡大）。`subtitle` は
+//  *   右側アクションの下も含めた全幅で折り返すため、リンクの外に置く（issue #232）
 //  * - `action` に任意の ReactNode（Button 等）を渡して右側にアクションを配置可能
 //  * - `align="center"` でランディング/ガイド系の中央寄せ大見出しに切替（`eyebrow` に Badge 等を載せられる）
 //  */
@@ -19914,29 +20979,33 @@ export {
 //     </div>
 //   )
 // 
+//   const headingNode = (
+//     <HeadingTag
+//       className={cn(
+//         "text-[var(--Text-High-Emphasis)]",
+//         titleSizeClasses[size],
+//         desktopSize && desktopTitleSizeClasses[desktopSize]
+//       )}
+//     >
+//       {title}
+//     </HeadingTag>
+//   )
+// 
+//   const subtitleNode = subtitle && (
+//     <p
+//       className={cn(
+//         "text-[var(--Text-High-Emphasis)]",
+//         isLargeCaption ? "typo-body-lg" : "typo-body-md"
+//       )}
+//     >
+//       {subtitle}
+//     </p>
+//   )
+// 
 //   const titleContent = (
 //     <>
-//       <HeadingTag
-//         className={cn(
-//           "text-[var(--Text-High-Emphasis)]",
-//           titleSizeClasses[size],
-//           desktopSize && desktopTitleSizeClasses[desktopSize]
-//         )}
-//       >
-//         {title}
-//       </HeadingTag>
-//       {subtitle && (
-//         <p
-//           className={cn(
-//             "text-[var(--Text-High-Emphasis)]",
-//             isLargeCaption
-//               ? "typo-body-lg"
-//               : "typo-body-md"
-//           )}
-//         >
-//           {subtitle}
-//         </p>
-//       )}
+//       {headingNode}
+//       {subtitleNode}
 //     </>
 //   )
 // 
@@ -19967,17 +21036,23 @@ export {
 //       {...props}
 //     >
 //       {eyebrow}
-//       <div className="flex items-baseline justify-between gap-2 min-w-0">
-//         {wrapTitleWithLink ? (
-//           <a href={moreHref} className="flex min-w-0 flex-1 flex-col gap-1">
-//             {titleContent}
-//           </a>
-//         ) : (
-//           <div className="flex min-w-0 flex-1 flex-col gap-1">
-//             {titleContent}
-//           </div>
-//         )}
-//         {trailingControls}
+//       {/*
+//         タイトル行（タイトル + もっと見る/action）と subtitle を別の行に分ける。
+//         同じ Flex 行に入れると subtitle まで action の幅ぶん狭まり、右側に空きが
+//         あるのに早い位置で折り返していた（issue #232）。
+//       */}
+//       <div className="flex flex-col gap-1">
+//         <div className="flex items-baseline justify-between gap-2 min-w-0">
+//           {wrapTitleWithLink ? (
+//             <a href={moreHref} className="min-w-0 flex-1">
+//               {headingNode}
+//             </a>
+//           ) : (
+//             <div className="min-w-0 flex-1">{headingNode}</div>
+//           )}
+//           {trailingControls}
+//         </div>
+//         {subtitleNode}
 //       </div>
 //     </div>
 //   )
@@ -20318,6 +21393,8 @@ export {
 // export { Section, sectionVariants, sectionScrimVariants }
 // 
 // src/components/primitives/share-buttons.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import Link2 from "iconsax-reactjs/dist/esm/Link2.js"
 // 
@@ -20325,12 +21402,34 @@ export {
 // import { Button } from "@/components/foundations/button"
 // import { SocialIcon } from "@/components/foundations/social-icon"
 // 
+// /** 組み込みの共有先 */
+// export type ShareService = "line" | "x" | "facebook" | "hatena" | "copy"
+// 
+// /** 組み込みに無い共有先を足すための指定 */
+// export interface ShareCustomService {
+//   /** 一意なキー（React の key に使う） */
+//   key: string
+//   /** ボタンの可視ラベル */
+//   label: string
+//   /** 共有先 URL。`{url}` / `{text}` は共有対象に置換される（どちらも URL エンコード済み） */
+//   href: string
+//   /** ラベル左のアイコン */
+//   icon?: React.ReactNode
+//   /** 読み上げ名（未指定ならラベルをそのまま使う） */
+//   ariaLabel?: string
+// }
+// 
 // export interface ShareButtonsProps
 //   extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy"> {
 //   /** シェアURL */
 //   url?: string
 //   /** シェアテキスト */
 //   text?: string
+//   /**
+//    * 表示する共有先と並び順（既定 `["line", "x", "copy"]`）。
+//    * 組み込みに無い共有先は `ShareCustomService` を混ぜて足す。
+//    */
+//   services?: Array<ShareService | ShareCustomService>
 //   /** コピーボタンのラベル */
 //   copyLabel?: string
 //   /** コピー成功時に一時表示するラベル（約2秒） */
@@ -20341,22 +21440,68 @@ export {
 //   onCopy?: (result: "success" | "error") => void
 // }
 // 
+// const DEFAULT_SERVICES: ShareService[] = ["line", "x", "copy"]
+// 
+// /** 組み込み共有先の共有 URL・ラベル・アイコン */
+// const SHARE_TARGETS: Record<
+//   Exclude<ShareService, "copy">,
+//   {
+//     label: string
+//     ariaLabel: string
+//     href: (url: string, text: string) => string
+//     icon: React.ReactNode
+//   }
+// > = {
+//   line: {
+//     label: "LINE",
+//     ariaLabel: "LINEでシェア",
+//     href: (url) =>
+//       `https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(url)}`,
+//     icon: <SocialIcon platform="line" size={16} />,
+//   },
+//   x: {
+//     label: "X",
+//     ariaLabel: "Xでシェア",
+//     href: (url, text) =>
+//       `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`,
+//     // X のブランド色は黒固定でダーク地に溶けるため、地の文字色に追従させる
+//     icon: <SocialIcon platform="x" size={14} tone="mono" />,
+//   },
+//   facebook: {
+//     label: "Facebook",
+//     ariaLabel: "Facebookでシェア",
+//     href: (url) =>
+//       `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
+//     icon: <SocialIcon platform="facebook" size={16} />,
+//   },
+//   hatena: {
+//     label: "はてブ",
+//     ariaLabel: "はてなブックマークに追加",
+//     href: (url, text) =>
+//       `https://b.hatena.ne.jp/entry/panel/?url=${encodeURIComponent(url)}&title=${encodeURIComponent(text)}`,
+//     icon: <SocialIcon platform="hatena" size={16} />,
+//   },
+// }
+// 
 // /**
 //  * シェアボタンコンポーネント
 //  *
-//  * 商品をSNSやURLでシェアするためのボタン群。
-//  * LINE、X（Twitter）、URLコピーに対応。
+//  * 記事や商品を SNS・URL コピーで共有するためのボタン群。
 //  *
 //  * ### AI 向け使用ルール
 //  *
-//  * - 商品詳細ページの共有セクションに使用
+//  * - 商品詳細ページ・記事ページの共有セクションに使用
 //  * - `url` と `text` でシェア内容を指定
+//  * - 共有先は `services` で選ぶ（既定は LINE / X / コピー）。
+//  *   **同じ意匠を `Button asChild` で組み直さない**
+//  * - 組み込みに無い共有先は `services` に `{ key, label, href, icon }` を混ぜて足す
 //  * - ボタンは横並び、等幅表示
 //  */
 // function ShareButtons({
 //   className,
 //   url = "",
 //   text = "",
+//   services = DEFAULT_SERVICES,
 //   copyLabel = "URLをコピー",
 //   copiedLabel = "コピーしました",
 //   copyErrorLabel = "コピーできませんでした",
@@ -20398,59 +21543,70 @@ export {
 //         ? copyErrorLabel
 //         : copyLabel
 // 
+//   const renderLink = (
+//     key: string,
+//     href: string,
+//     ariaLabel: string,
+//     icon: React.ReactNode,
+//     label: string
+//   ) => (
+//     <Button key={key} variant="tertiary" size="sm" className="flex-1 gap-1.5" asChild>
+//       <a href={href} target="_blank" rel="noopener noreferrer" aria-label={ariaLabel}>
+//         {icon}
+//         <span className="typo-body-sm">{label}</span>
+//       </a>
+//     </Button>
+//   )
+// 
 //   return (
 //     <div
 //       data-slot="share-buttons"
 //       className={cn("flex items-center gap-2", className)}
 //       {...props}
 //     >
-//       <Button
-//         variant="tertiary"
-//         size="sm"
-//         className="flex-1 gap-1.5"
-//         asChild
-//       >
-//         <a
-//           href={`https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(url)}`}
-//           target="_blank"
-//           rel="noopener noreferrer"
-//           aria-label="LINEでシェア"
-//         >
-//           <SocialIcon platform="line" size={16} />
-//           <span className="typo-body-sm">LINE</span>
-//         </a>
-//       </Button>
-//       <Button
-//         variant="tertiary"
-//         size="sm"
-//         className="flex-1 gap-1.5"
-//         asChild
-//       >
-//         <a
-//           href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`}
-//           target="_blank"
-//           rel="noopener noreferrer"
-//           aria-label="Xでシェア"
-//         >
-//           {/* X のブランド色は黒固定でダーク地に溶けるため、地の文字色に追従させる */}
-//           <SocialIcon platform="x" size={14} tone="mono" />
-//           <span className="typo-body-sm">X</span>
-//         </a>
-//       </Button>
-//       {/* aria-label は付けない: 可視ラベルが「コピーしました/できませんでした」に変わるため、
-//           固定 aria-label だとアクセシブル名と可視名が食い違う（WCAG 2.5.3 Label in Name）。
-//           アクセシブル名は可視テキスト（aria-live で読み上げ更新）に委ねる。 */}
-//       <Button
-//         variant="tertiary"
-//         size="sm"
-//         className="flex-1 gap-1.5"
-//         onClick={handleCopy}
-//       >
-//         <Link2 size={14} aria-hidden="true" />
-//         <span className="typo-body-sm" aria-live="polite">
-//           {copyButtonLabel}
-//         </span>
-//       </Button>
+//       {services.map((service) => {
+//         if (typeof service !== "string") {
+//           const href = service.href
+//             .replace("{url}", encodeURIComponent(url))
+//             .replace("{text}", encodeURIComponent(text))
+//           return renderLink(
+//             service.key,
+//             href,
+//             service.ariaLabel ?? service.label,
+//             service.icon,
+//             service.label
+//           )
+//         }
+// 
+//         if (service === "copy") {
+//           // aria-label は付けない: 可視ラベルが「コピーしました/できませんでした」に変わるため、
+//           // 固定 aria-label だとアクセシブル名と可視名が食い違う（WCAG 2.5.3 Label in Name）。
+//           // アクセシブル名は可視テキスト（aria-live で読み上げ更新）に委ねる。
+//           return (
+//             <Button
+//               key="copy"
+//               variant="tertiary"
+//               size="sm"
+//               className="flex-1 gap-1.5"
+//               onClick={handleCopy}
+//             >
+//               <Link2 size={14} aria-hidden="true" />
+//               <span className="typo-body-sm" aria-live="polite">
+//                 {copyButtonLabel}
+//               </span>
+//             </Button>
+//           )
+//         }
+// 
+//         const target = SHARE_TARGETS[service]
+//         return renderLink(
+//           service,
+//           target.href(url, text),
+//           target.ariaLabel,
+//           target.icon,
+//           target.label
+//         )
+//       })}
 //     </div>
 //   )
 // }
@@ -20895,6 +22051,8 @@ export {
 // export { StandardPageShell }
 // 
 // src/components/primitives/status-count-tabs.tsx
+// "use client"
+// 
 // /**
 //  * ## StatusCountTabs / ステータスカウントタブ
 //  *
@@ -20993,7 +22151,8 @@ export {
 //     <div
 //       data-slot="sticky-action-bar"
 //       className={cn(
-//         "sticky bottom-0 z-[var(--Z-Nav)] bg-[var(--Surface-Primary)] px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+//         // Surface-Elevated: スクロール内容の上に重なる固定バーは不透明が必須（dark で透けない）
+//         "sticky bottom-0 z-[var(--Z-Nav)] bg-[var(--Surface-Elevated)] px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
 //         bordered && "border-t border-[var(--Border-Low-Emphasis)]",
 //         className
 //       )}
@@ -21010,6 +22169,11 @@ export {
 // import * as React from "react"
 // 
 // import { cn } from "@/lib/utils"
+// import { resolveLinkComponent, type LinkComponent } from "@/lib/link-component"
+// import { containerVariants } from "@/components/primitives/container"
+// 
+// /** `Container` の gutter（SP 16 / PC 24）。本文の左端と揃えるための正本 */
+// const GUTTER_CLASS = "px-4 md:px-6"
 // 
 // export interface SubNavItem {
 //   /** 表示ラベル */
@@ -21024,10 +22188,23 @@ export {
 // 
 // export interface SubNavProps
 //   extends React.HTMLAttributes<HTMLDivElement> {
+//   /**
+//    * リンクの描画に使うコンポーネント（既定 `a`）。
+//    * `next/link` 等を渡すとクライアント遷移になる（#236）。
+//    */
+//   linkComponent?: LinkComponent
+// 
 //   /** ナビゲーション項目 */
 //   items: SubNavItem[]
 //   /** スタイルバリアント */
 //   variant?: "text" | "chip"
+//   /**
+//    * ナビ内側の最大幅（`Container` と同じ段）。
+//    * 指定すると下線（border）は全幅のまま、**中身だけ**を中央寄せする。
+//    * 本文を `Container size="page"` で組んでいるサイトで、項目の左端が本文と揃う。
+//    * 未指定なら従来どおり全幅（DOM も従来どおりで内側ラッパーを足さない）。
+//    */
+//   containerSize?: "page" | "wide" | "fluid"
 // }
 // 
 // /**
@@ -21044,81 +22221,100 @@ export {
 //  * - アクティブ項目は `isActive: true` で下線を強調
 //  * - テキスト色: アクティブ = 黒（High-Emphasis）、非アクティブ = グレー（Medium-Emphasis）
 //  * - 必ず `overflow-x-auto` + `scrollbar-hide` で横スクロール対応
+//  * - 左右の余白は `Container` と同じ（SP 16 / PC 24）。本文を `Container` で中央寄せしている
+//  *   サイトでは `containerSize="page"` を指定すると項目の左端が本文と揃う
 //  */
 // function SubNav({
 //   className,
 //   items,
 //   variant = "text",
+//   linkComponent,
+//   containerSize,
 //   ...props
 // }: SubNavProps) {
-//   if (variant === "chip") {
-//     return (
-//       <div
-//         data-slot="sub-nav"
-//         className={cn(
-//           "flex gap-2 overflow-x-auto px-4 py-2 scrollbar-hide",
-//           className
-//         )}
-//         {...props}
-//       >
-//         {items.map((item) => {
-//           const Comp = item.href ? "a" : "button"
-//           const compProps = item.href
-//             ? { href: item.href }
-//             : { type: "button" as const, onClick: item.onClick }
-//           return (
-//             <Comp
-//               key={item.label}
-//               className={cn(
-//                 "shrink-0 rounded-full px-3 typo-label-sm transition-colors h-8 inline-flex items-center justify-center",
-//                 item.isActive
-//                   ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"
-//                   : "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Tertiary)]"
-//               )}
-//               {...compProps}
-//             >
-//               {item.label}
-//             </Comp>
-//           )
-//         })}
-//       </div>
-//     )
-//   }
-// 
-//   // text variant (production default)
-//   return (
-//     <nav
-//       data-slot="sub-nav"
-//       className={cn(
-//         "flex gap-4 overflow-x-auto border-b border-[var(--Border-Low-Emphasis)] px-4 scrollbar-hide",
-//         className
-//       )}
-//       {...props}
-//     >
-//       {items.map((item) => {
-//         const Comp = item.href ? "a" : "button"
-//         const compProps = item.href
-//           ? { href: item.href }
-//           : { type: "button" as const, onClick: item.onClick }
+//   const renderItems = () =>
+//     items.map((item) => {
+//       const Comp = item.href ? resolveLinkComponent(linkComponent) : "button"
+//       const compProps = item.href
+//         ? { href: item.href }
+//         : { type: "button" as const, onClick: item.onClick }
+// 
+//       if (variant === "chip") {
 //         return (
 //           <Comp
 //             key={item.label}
 //             className={cn(
-//               "relative shrink-0 py-2.5 typo-label-md transition-colors",
+//               "shrink-0 rounded-full px-3 typo-label-sm transition-colors h-8 inline-flex items-center justify-center",
 //               item.isActive
-//                 ? "text-[var(--Text-High-Emphasis)]"
-//                 : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
+//                 ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"
+//                 : "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Tertiary)]"
 //             )}
 //             {...compProps}
 //           >
 //             {item.label}
-//             {item.isActive && (
-//               <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--Text-High-Emphasis)]" />
-//             )}
 //           </Comp>
 //         )
-//       })}
-//     </nav>
+//       }
+// 
+//       return (
+//         <Comp
+//           key={item.label}
+//           className={cn(
+//             "relative shrink-0 py-2.5 typo-label-md transition-colors",
+//             item.isActive
+//               ? "text-[var(--Text-High-Emphasis)]"
+//               : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
+//           )}
+//           {...compProps}
+//         >
+//           {item.label}
+//           {item.isActive && (
+//             <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--Text-High-Emphasis)]" />
+//           )}
+//         </Comp>
+//       )
+//     })
+// 
+//   const isChip = variant === "chip"
+//   const Root = isChip ? "div" : "nav"
+// 
+//   /** 項目を並べる行（横スクロール・左右 gutter を持つ） */
+//   const rowClass = isChip
+//     ? cn("flex gap-2 overflow-x-auto py-2 scrollbar-hide", GUTTER_CLASS)
+//     : cn("flex gap-4 overflow-x-auto scrollbar-hide", GUTTER_CLASS)
+// 
+//   /** 外枠が常に持つ装飾（全幅で描く） */
+//   const decorationClass = isChip
+//     ? undefined
+//     : "border-b border-[var(--Border-Low-Emphasis)]"
+// 
+//   // containerSize 指定時は、下線を外枠に残したまま内側だけ Container 相当で中央寄せする。
+//   // 未指定時はラッパーを足さず従来の DOM 構造をそのまま保つ（#234）。
+//   if (containerSize) {
+//     return (
+//       <Root data-slot="sub-nav" className={cn(decorationClass, className)} {...props}>
+//         <div
+//           data-slot="sub-nav-container"
+//           data-container-size={containerSize}
+//           className={cn(
+//             containerVariants({ size: containerSize, gutter: "none" }),
+//             rowClass
+//           )}
+//         >
+//           {renderItems()}
+//         </div>
+//       </Root>
+//     )
+//   }
+// 
+//   return (
+//     <Root
+//       data-slot="sub-nav"
+//       className={cn(decorationClass, rowClass, className)}
+//       {...props}
+//     >
+//       {renderItems()}
+//     </Root>
 //   )
 // }
 // 
@@ -22247,7 +23443,29 @@ export {
 // export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/foundations/collapsible"
 // export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/foundations/command"
 // export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/foundations/context-menu"
-// export { DataTable } from "./components/foundations/data-table"
+// export {
+//   DataTable,
+//   DataTableTable,
+//   DataTableHeader,
+//   DataTableBody,
+//   DataTableRow,
+//   DataTableHead,
+//   DataTableCell,
+//   DataTableAvatarCell,
+//   DataTableImageCell,
+//   DataTableLinkCell,
+//   DataTableCheckboxCell,
+//   DataTableActionCell,
+//   DataTableInputCell,
+//   DataTableSelectCell,
+//   DataTableNumberCell,
+//   DataTableDragHandleCell,
+//   DataTableBulkActions,
+//   DataTableSectionRow,
+//   DataTableAddRow,
+//   DataTableEmptyState,
+// } from "./components/foundations/data-table"
+// export type { SortDirection } from "./components/foundations/data-table"
 // export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/foundations/dialog"
 // export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/foundations/drawer"
 // export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/foundations/dropdown-menu"
@@ -22322,6 +23540,14 @@ export {
 // export type { ChatComposerProps, ChatComposerAttachmentError } from "./components/primitives/chat-composer"
 // export { Chip, chipVariants } from "./components/primitives/chip"
 // export type { ChipProps } from "./components/primitives/chip"
+// export { Prose } from "./components/primitives/prose"
+// export type { ProseProps } from "./components/primitives/prose"
+// export { ContentCard, ContentList } from "./components/primitives/content-card"
+// export type {
+//   ContentCardProps,
+//   ContentCardOrientation,
+//   ContentCardAspect,
+// } from "./components/primitives/content-card"
 // export { StandardPageShell } from "./components/primitives/standard-page-shell"
 // export type { StandardPageShellProps } from "./components/primitives/standard-page-shell"
 // /**
@@ -22444,7 +23670,7 @@ export {
 // export type { OrderSummaryProps, OrderSummaryLineItem } from "./components/ec/order-summary"
 // export { PaymentMethodDisplay, CreditCardIcon } from "./components/ec/payment-method"
 // export type { PaymentMethodDisplayProps, CreditCardIconProps, CreditCardBrand } from "./components/ec/payment-method"
-// export { ProductCard } from "./components/ec/product-card"
+// export { ProductCard, BookmarkRibbonIcon } from "./components/ec/product-card"
 // export type { ProductCardProps } from "./components/ec/product-card"
 // export { ProductCarousel } from "./components/ec/product-carousel"
 // export type { ProductCarouselProps } from "./components/ec/product-carousel"
@@ -22475,6 +23701,8 @@ export {
 // export type { StatCardProps } from "./components/ec/stat-card"
 // 
 // src/lib/field-labelling.ts
+// "use client"
+// 
 // /**
 //  * ## フィールドのラベル関連付け（DS 全体の方針 / issue #202）
 //  *
@@ -22624,6 +23852,51 @@ export {
 // export const FOCUS_RING_INSET =
 //   "focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--Focus-High-Emphasis)]/50"
 // 
+// src/lib/link-component.ts
+// import type * as React from "react"
+// 
+// /**
+//  * リンクの描画に使うコンポーネント（#236）
+//  *
+//  * DS 内でリンクを複数描く部品（Footer / MenuDrawer / SubNav / Pagination）は
+//  * 素の `<a>` を描くため、Next.js の `next/link` 等を差し込めずクライアント遷移に
+//  * ならない。`asChild` は複数リンクを内部で描く部品には向かないため、
+//  * 「リンク実装そのもの」を差し替える prop を共通の型で用意する。
+//  *
+//  * 例: `<Footer linkComponent={Link} … />`（next/link をそのまま渡せる）
+//  *
+//  * ⚠️ `Footer` / `MenuDrawer` は Client Component。React Server Components では
+//  * Server Component からこの prop を渡すと client 境界を越えて関数を渡すことに
+//  * なり、`Functions cannot be passed directly to Client Components` で落ちる。
+//  * Next.js App Router では、この prop を使う呼び出し側を `"use client"` にする
+//  * （エラーメッセージは `"use server"` を示唆するが、正解は逆）。
+//  *
+//  * `Pagination` / `SubNav` / `ContentCard` は Server Component のまま使えるため、
+//  * この prop を使うだけで呼び出し側を `"use client"` にする必要はない。
+//  */
+// export type LinkComponent = React.ComponentType<
+//   React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
+// >
+// 
+// /**
+//  * 実際に使うリンク実装を決める。
+//  *
+//  * 外部リンク（`target="_blank"` を付けるもの）は framework のリンク部品に通す
+//  * 意味が無いため、常に素の `<a>` にフォールバックする。
+//  *
+//  * `isExternal` を渡せるのは、項目に `external` フラグを持つ `Footer` だけ。
+//  * MenuDrawer / SubNav / Pagination の項目に `external` は無く、渡した href は
+//  * すべて `linkComponent` で描かれる（外部 URL を出し分けたい場合は consumer 側で
+//  * ラップする）。
+//  */
+// export function resolveLinkComponent(
+//   linkComponent: LinkComponent | undefined,
+//   isExternal?: boolean
+// ): React.ElementType {
+//   if (isExternal || !linkComponent) return "a"
+//   return linkComponent
+// }
+// 
 // src/lib/pagination-range.ts
 // export type PaginationRangeItem = number | "ellipsis"
 // 
@@ -22755,6 +24028,8 @@ export {
 // } as const
 // 
 // src/lib/use-value-length.ts
+// "use client"
+// 
 // import * as React from "react"
 // 
 // type CountableElement = HTMLInputElement | HTMLTextAreaElement