@cakejp/design-system 0.17.0 → 0.19.0

package/dist/index.js

@@ -1,10 +1,9 @@
-"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 { 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 { Alert as s, AlertDescription as c, 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 { Avatar as L, AvatarFallback as N, AvatarImage as G } from "./components/foundations/avatar.js";
@@ -12,33 +11,33 @@ import { Badge as H, badgeVariants as O } from "./components/foundations/badge.j
 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 { Card as oo, CardAction as ro, CardContent as eo, 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 { CheckboxGroup as Co, CheckboxGroupItem as so } 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 { Dialog as Xo, DialogClose as Yo, DialogContent as Zo, DialogDescription as $o, DialogFooter as or, DialogHeader as rr, DialogOverlay as er, DialogPortal as tr, DialogTitle as ar, DialogTrigger as nr } from "./components/foundations/dialog.js";
+import { Drawer as pr, DrawerClose as mr, DrawerContent as lr, DrawerDescription as xr, DrawerFooter as ur, DrawerHeader as fr, DrawerOverlay as dr, DrawerPortal as gr, DrawerTitle as Cr, DrawerTrigger as sr } from "./components/foundations/drawer.js";
+import { DropdownMenu as Sr, DropdownMenuCheckboxItem as br, DropdownMenuContent as Dr, DropdownMenuGroup as Mr, DropdownMenuItem as Tr, DropdownMenuLabel as Ir, DropdownMenuPortal as vr, DropdownMenuRadioGroup as hr, DropdownMenuRadioItem as Fr, DropdownMenuSeparator as Pr, DropdownMenuShortcut as wr, DropdownMenuSub as Ar, DropdownMenuSubContent as Br, DropdownMenuSubTrigger as Rr, DropdownMenuTrigger as kr } from "./components/foundations/dropdown-menu.js";
+import { Field as Lr, FieldDescription as Nr, FieldError as Gr, FieldGroup as Vr, FieldLabel as Hr, FieldLegend as Or, FieldSeparator as Er, FieldSet as Ur, fieldVariants as _r } from "./components/foundations/field.js";
+import { FileInput as Qr, formatFileNames as zr, validateFileSize as Kr } from "./components/foundations/file-input.js";
+import { Form as qr, FormControl as Jr, FormDescription as Xr, FormField as Yr, FormItem as Zr, FormLabel as $r, FormMessage as oe, useFormField as re } from "./components/foundations/form.js";
+import { HoverCard as te, HoverCardContent as ae, HoverCardTrigger as ne } from "./components/foundations/hover-card.js";
+import { IconBadge as pe, iconBadgeVariants as me } from "./components/foundations/icon-badge.js";
+import { Input as xe } from "./components/foundations/input.js";
+import { Label as fe } from "./components/foundations/label.js";
+import { Menubar as ge, MenubarCheckboxItem as Ce, MenubarContent as se, MenubarGroup as ce, MenubarItem as Se, MenubarLabel as be, MenubarMenu as De, MenubarPortal as Me, MenubarRadioGroup as Te, MenubarRadioItem as Ie, MenubarSeparator as ve, MenubarShortcut as he, MenubarSub as Fe, MenubarSubContent as Pe, MenubarSubTrigger as we, MenubarTrigger as Ae } from "./components/foundations/menubar.js";
+import { NavigationMenu as Re, NavigationMenuContent as ke, NavigationMenuIndicator as ye, NavigationMenuItem as Le, NavigationMenuLink as Ne, NavigationMenuList as Ge, NavigationMenuTrigger as Ve, NavigationMenuViewport as He, navigationMenuTriggerStyle as Oe } from "./components/foundations/navigation-menu.js";
+import { Pagination as Ue, PaginationContent as _e, PaginationEllipsis as We, PaginationItem as Qe, PaginationLink as ze, PaginationNext as Ke, PaginationPrevious as je } from "./components/foundations/pagination.js";
+import { getPaginationRange as Je } from "./lib/pagination-range.js";
+import { Popover as Ye, PopoverAnchor as Ze, PopoverContent as $e, PopoverTrigger as ot } from "./components/foundations/popover.js";
+import { Progress as et } 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 { ScrollArea as ct, 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";
@@ -48,10 +47,10 @@ 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 { Table as oa, TableBody as ra, TableCaption as ea, 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 { Toaster as sa } 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";
@@ -68,79 +67,81 @@ 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 { Chip as rn } from "./components/primitives/chip.js";
+import { Prose as tn } from "./components/primitives/prose.js";
+import { ContentCard as nn, ContentList as pn } from "./components/primitives/content-card.js";
+import { StandardPageShell as ln, StandardPageShell as xn } from "./components/primitives/standard-page-shell.js";
+import { EmptyState as fn } from "./components/primitives/empty-state.js";
+import { DatePicker as gn, DateTimePicker as Cn } from "./components/primitives/date-picker.js";
+import { ErrorState as cn, NotFoundIllustration as Sn } from "./components/primitives/error-state.js";
+import { FilterBar as Dn } from "./components/primitives/filter-bar.js";
+import { Footer as Tn } from "./components/primitives/footer.js";
+import { FormField as vn } from "./components/primitives/form-field.js";
+import { FunnelShell as Fn } from "./components/primitives/funnel-shell.js";
+import { Header as wn } from "./components/primitives/header.js";
+import { ImageCarousel as Bn } from "./components/primitives/image-carousel.js";
+import { ImageGallery as kn } from "./components/primitives/image-gallery.js";
+import { ImageInput as Ln, imageInputPreviewVariants as Nn } from "./components/primitives/image-input.js";
+import { ImageUploader as Vn } from "./components/primitives/image-uploader.js";
+import { KebabMenu as On } from "./components/primitives/kebab-menu.js";
+import { ListItem as Un } from "./components/primitives/list-item.js";
+import { MenuDrawer as Wn } from "./components/primitives/menu-drawer.js";
+import { SubNav as zn } from "./components/primitives/sub-nav.js";
+import { NotificationBadge as jn, notificationBadgeVariants as qn } from "./components/primitives/notification-badge.js";
+import { NotificationList as Xn } from "./components/primitives/notification-list.js";
+import { PriceDisplay as Zn, priceDisplayVariants as $n } from "./components/primitives/price-display.js";
+import { ProgressSteps as ri } from "./components/primitives/progress-steps.js";
+import { Timeline as ti } from "./components/primitives/timeline.js";
+import { NumberInput as ni, QuantitySelector as ii } from "./components/primitives/number-input.js";
+import { SearchBar as mi } from "./components/primitives/search-bar.js";
+import { SearchPanel as xi } from "./components/primitives/search-panel.js";
+import { Container as fi, containerVariants as di } from "./components/primitives/container.js";
+import { Section as Ci, sectionScrimVariants as si, sectionVariants as ci } from "./components/primitives/section.js";
+import { SectionHeader as bi } from "./components/primitives/section-header.js";
+import { SectionNav as Mi } from "./components/primitives/section-nav.js";
+import { ShareButtons as Ii } from "./components/primitives/share-buttons.js";
+import { SideNav as hi } from "./components/primitives/side-nav.js";
+import { SocialLoginButton as Pi } from "./components/primitives/social-login-button.js";
+import { StatusCountTabs as Ai } from "./components/primitives/status-count-tabs.js";
+import { Tag as Ri, tagVariants as ki } from "./components/primitives/tag.js";
+import { WorkspaceShell as Li, WorkspaceShell as Ni } from "./components/primitives/workspace-shell.js";
+import { AdminShell as Vi, AdminShell as Hi, MissingComponent as Oi } from "./components/ec/admin-shell.js";
+import { AnniversaryCard as Ui } from "./components/ec/anniversary-card.js";
+import { CakeLogo as Wi } from "./components/ec/cake-logo.js";
+import { ChartControls as zi } from "./components/ec/chart-controls.js";
+import { CountdownTimer as ji } from "./components/ec/countdown-timer.js";
+import { CouponCard as Ji } from "./components/ec/coupon-card.js";
+import { DeliveryCalendar as Yi } from "./components/ec/delivery-calendar.js";
+import { mypageMenuGroups as $i } from "./components/ec/_mypage-menu-data.js";
+import { OrderSection as rp } from "./components/ec/order-section.js";
+import { OrderSummary as tp } from "./components/ec/order-summary.js";
+import { CreditCardIcon as np, PaymentMethodDisplay as ip } from "./components/ec/payment-method.js";
+import { ProductCard as mp } from "./components/ec/product-card.js";
+import { ProductCarousel as xp } from "./components/ec/product-carousel.js";
+import { ProductCTA as fp } from "./components/ec/product-cta.js";
+import { ProductDetailBar as gp } from "./components/ec/product-detail-bar.js";
+import { ProductDetailSidebar as sp } from "./components/ec/product-detail-sidebar.js";
+import { ProductListItem as Sp } from "./components/ec/product-list-item.js";
+import { OptionImageUpload as Dp, OptionQuantity as Mp, OptionSelect as Tp, OptionText as Ip, ProductOption as vp } from "./components/ec/product-option.js";
+import { RatingStars as Fp, SparkleIcon as Pp } from "./components/ec/rating-stars.js";
+import { ReviewCard as Ap } from "./components/ec/review-card.js";
+import { ReviewForm as Rp } from "./components/ec/review-form.js";
+import { ReviewItem as yp, ReviewSummary as Lp } from "./components/ec/review-summary.js";
+import { MypageShell as Gp } from "./components/ec/mypage-shell.js";
+import { ShopCard as Hp } from "./components/ec/shop-card.js";
+import { StatCard as Ep } from "./components/ec/stat-card.js";
+import { chipVariants as _p } 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,
+  Vi as AdminLayout,
+  Hi as AdminShell,
   Aa as AdminSideNav,
-  c as Alert,
-  s as AlertDescription,
+  s as Alert,
+  c as AlertDescription,
   D as AlertDialog,
   M as AlertDialogAction,
   T as AlertDialogCancel,
@@ -153,7 +154,7 @@ export {
   A as AlertDialogTitle,
   B as AlertDialogTrigger,
   S as AlertTitle,
-  Gi as AnniversaryCard,
+  Ui as AnniversaryCard,
   k as AspectRatio,
   L as Avatar,
   N as AvatarFallback,
@@ -170,26 +171,26 @@ export {
   j as BreadcrumbSeparator,
   ja as BulkActionBar,
   J as Button,
-  bn as CakeFormField,
-  Hi as CakeLogo,
+  vn as CakeFormField,
+  Wi as CakeLogo,
   Z as Calendar,
   oo as Card,
-  eo as CardAction,
-  ro as CardContent,
+  ro as CardAction,
+  eo as CardContent,
   to as CardDescription,
   ao as CardFooter,
   no as CardHeader,
   io as CardTitle,
   Ya as CategoryScroll,
   Ja as CategoryShortcuts,
-  Ei as ChartControls,
+  zi as ChartControls,
   $a as ChatComposer,
   lo as Checkbox,
   uo as CheckboxCardGroup,
   fo as CheckboxCardItem,
   Co as CheckboxGroup,
-  co as CheckboxGroupItem,
-  en as Chip,
+  so as CheckboxGroupItem,
+  rn as Chip,
   ya as CoachMark,
   So as Collapsible,
   bo as CollapsibleContent,
@@ -204,8 +205,10 @@ export {
   wo as CommandList,
   Ao as CommandSeparator,
   Bo as CommandShortcut,
-  pi as Container,
+  fi as Container,
+  nn as ContentCard,
   Oa as ContentCarousel,
+  pn as ContentList,
   ko as ContextMenu,
   yo as ContextMenuCheckboxItem,
   Lo as ContextMenuContent,
@@ -221,150 +224,151 @@ export {
   Qo as ContextMenuSubContent,
   zo as ContextMenuSubTrigger,
   Ko as ContextMenuTrigger,
-  _i as CountdownTimer,
-  Qi as CouponCard,
-  op as CreditCardIcon,
+  ji as CountdownTimer,
+  Ji as CouponCard,
+  np as CreditCardIcon,
   qo as DataTable,
-  ln as DatePicker,
-  xn as DateTimePicker,
-  Ki as DeliveryCalendar,
+  gn as DatePicker,
+  Cn as DateTimePicker,
+  Yi 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,
+  or as DialogFooter,
+  rr as DialogHeader,
+  er as DialogOverlay,
+  tr as DialogPortal,
+  ar as DialogTitle,
+  nr as DialogTrigger,
+  pr as Drawer,
+  mr as DrawerClose,
+  lr as DrawerContent,
+  xr as DrawerDescription,
+  ur as DrawerFooter,
+  fr as DrawerHeader,
+  dr as DrawerOverlay,
+  gr as DrawerPortal,
+  Cr as DrawerTitle,
+  sr as DrawerTrigger,
+  Sr as DropdownMenu,
+  br as DropdownMenuCheckboxItem,
+  Dr as DropdownMenuContent,
+  Mr as DropdownMenuGroup,
+  Tr as DropdownMenuItem,
+  Ir as DropdownMenuLabel,
+  vr as DropdownMenuPortal,
+  hr as DropdownMenuRadioGroup,
+  Fr as DropdownMenuRadioItem,
+  Pr as DropdownMenuSeparator,
+  wr as DropdownMenuShortcut,
+  Ar as DropdownMenuSub,
+  Br as DropdownMenuSubContent,
+  Rr as DropdownMenuSubTrigger,
+  kr as DropdownMenuTrigger,
+  ln as EcPageShell,
+  fn as EmptyState,
+  cn 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,
+  Lr as Field,
+  Nr as FieldDescription,
+  Gr as FieldError,
+  Vr as FieldGroup,
+  Hr as FieldLabel,
+  Or as FieldLegend,
+  Er as FieldSeparator,
+  Ur as FieldSet,
+  Qr as FileInput,
+  Dn as FilterBar,
+  Tn as Footer,
+  qr as Form,
+  Jr as FormControl,
+  Xr as FormDescription,
+  Yr as FormField,
+  Zr as FormItem,
+  $r as FormLabel,
+  oe as FormMessage,
+  Fn as FunnelShell,
+  wn as Header,
+  te as HoverCard,
+  ae as HoverCardContent,
+  ne as HoverCardTrigger,
+  pe as IconBadge,
+  Bn as ImageCarousel,
+  kn as ImageGallery,
+  Ln as ImageInput,
+  Vn as ImageUploader,
+  xe as Input,
+  On as KebabMenu,
+  fe as Label,
+  Un as ListItem,
+  Wn as MenuDrawer,
+  ge as Menubar,
+  Ce as MenubarCheckboxItem,
+  se as MenubarContent,
+  ce as MenubarGroup,
+  Se as MenubarItem,
+  be as MenubarLabel,
+  De as MenubarMenu,
+  Me as MenubarPortal,
+  Te as MenubarRadioGroup,
+  Ie as MenubarRadioItem,
+  ve as MenubarSeparator,
+  he as MenubarShortcut,
+  Fe as MenubarSub,
+  Pe as MenubarSubContent,
+  we as MenubarSubTrigger,
+  Ae as MenubarTrigger,
+  Oi 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,
+  Gp as MypageShell,
+  Re as NavigationMenu,
+  ke as NavigationMenuContent,
+  ye as NavigationMenuIndicator,
+  Le as NavigationMenuItem,
+  Ne as NavigationMenuLink,
+  Ge as NavigationMenuList,
+  Ve as NavigationMenuTrigger,
+  He as NavigationMenuViewport,
+  Sn as NotFoundIllustration,
+  jn as NotificationBadge,
+  Xn as NotificationList,
+  ni as NumberInput,
+  Dp as OptionImageUpload,
+  Mp as OptionQuantity,
+  Tp as OptionSelect,
+  Ip as OptionText,
+  rp as OrderSection,
+  tp as OrderSummary,
+  Ue as Pagination,
+  _e as PaginationContent,
+  We as PaginationEllipsis,
+  Qe as PaginationItem,
+  ze as PaginationLink,
+  Ke as PaginationNext,
+  je as PaginationPrevious,
+  ip as PaymentMethodDisplay,
+  Ye as Popover,
+  Ze as PopoverAnchor,
+  $e 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,
+  Zn as PriceDisplay,
+  fp as ProductCTA,
+  mp as ProductCard,
+  xp as ProductCarousel,
+  gp as ProductDetailBar,
+  sp as ProductDetailSidebar,
+  Sp as ProductListItem,
+  vp as ProductOption,
+  et as Progress,
+  ri as ProgressSteps,
+  tn as Prose,
+  ii as QuantitySelector,
   gt as RadioGroup,
   Ct as RadioGroupItem,
-  Mp as RatingStars,
+  Fp as RatingStars,
   at as ResponsiveDialog,
   nt as ResponsiveDialogClose,
   it as ResponsiveDialogContent,
@@ -373,17 +377,17 @@ export {
   lt as ResponsiveDialogHeader,
   xt as ResponsiveDialogTitle,
   ut as ResponsiveDialogTrigger,
-  vp as ReviewCard,
-  Fp as ReviewForm,
-  wp as ReviewItem,
-  Ap as ReviewSummary,
-  st as ScrollArea,
+  Ap as ReviewCard,
+  Rp as ReviewForm,
+  yp as ReviewItem,
+  Lp as ReviewSummary,
+  ct as ScrollArea,
   St as ScrollBar,
-  ti as SearchBar,
-  ni as SearchPanel,
-  xi as Section,
-  gi as SectionHeader,
-  ci as SectionNav,
+  mi as SearchBar,
+  xi as SearchPanel,
+  Ci as Section,
+  bi as SectionHeader,
+  Mi as SectionNav,
   Dt as Select,
   Mt as SelectContent,
   Tt as SelectGroup,
@@ -395,7 +399,7 @@ export {
   wt as SelectTrigger,
   At as SelectValue,
   Rt as Separator,
-  Si as ShareButtons,
+  Ii as ShareButtons,
   yt as Sheet,
   Lt as SheetClose,
   Nt as SheetContent,
@@ -404,24 +408,24 @@ export {
   Ht as SheetHeader,
   Ot as SheetTitle,
   Et as SheetTrigger,
-  yp as ShopCard,
-  Di as SideNav,
+  Hp as ShopCard,
+  hi as SideNav,
   _t as Skeleton,
   Qt as SkipLink,
   Kt as Slider,
   Xt as SocialIcon,
-  Ti as SocialLoginButton,
-  Tp as SparkleIcon,
+  Pi as SocialLoginButton,
+  Pp as SparkleIcon,
   qt as Spinner,
-  an as StandardPageShell,
-  Np as StatCard,
-  vi as StatusCountTabs,
+  xn as StandardPageShell,
+  Ep as StatCard,
+  Ai as StatusCountTabs,
   Wa as StickyActionBar,
-  En as SubNav,
+  zn as SubNav,
   Zt as Switch,
   oa as Table,
-  ea as TableBody,
-  ra as TableCaption,
+  ra as TableBody,
+  ea as TableCaption,
   ta as TableCell,
   aa as TableFooter,
   na as TableHead,
@@ -431,10 +435,10 @@ export {
   xa as TabsContent,
   ua as TabsList,
   fa as TabsTrigger,
-  Fi as Tag,
+  Ri as Tag,
   ga as Textarea,
-  Zn as Timeline,
-  ca as Toaster,
+  ti as Timeline,
+  sa as Toaster,
   Sa as Toggle,
   Ma as ToggleGroup,
   Ta as ToggleGroupItem,
@@ -442,31 +446,31 @@ export {
   ha as TooltipContent,
   Fa as TooltipProvider,
   Pa as TooltipTrigger,
-  Ai as WorkspaceLayout,
-  Bi as WorkspaceShell,
+  Li as WorkspaceLayout,
+  Ni as WorkspaceShell,
   O as badgeVariants,
   X as buttonVariants,
   po as cardVariants,
-  Vp as chipVariants,
+  _p 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,
+  di as containerVariants,
+  _r as fieldVariants,
+  zr as formatFileNames,
+  Je as getPaginationRange,
+  me as iconBadgeVariants,
+  Nn as imageInputPreviewVariants,
+  $i as mypageMenuGroups,
+  Oe as navigationMenuTriggerStyle,
+  qn as notificationBadgeVariants,
+  $n as priceDisplayVariants,
+  si as sectionScrimVariants,
+  ci as sectionVariants,
+  ki as tagVariants,
   l as toast,
   ba as toggleVariants,
-  er as useFormField,
+  re as useFormField,
   ft as useIsMobile,
-  Ke as validateFileSize
+  Kr as validateFileSize
 };
 
 
@@ -495,7 +499,7 @@ export {
 // import InfoCircle from "iconsax-reactjs/dist/esm/InfoCircle.js"
 // import Logout from "iconsax-reactjs/dist/esm/Logout.js"
 // 
-// import type { SideNavGroup } from "./components/primitives/side-nav"
+// import type { SideNavGroup } from "@/components/primitives/side-nav"
 // 
 // /**
 //  * Cake.jp マイページのメニュー定義
@@ -504,8 +508,8 @@ export {
 //  *
 //  * ### 使い方
 //  * ```tsx
-//  * import { SideNav } from './components/primitives/side-nav'
-//  * import { mypageMenuGroups } from './components/ec/_mypage-menu-data'
+//  * import { SideNav } from '@/components/primitives/side-nav'
+//  * import { mypageMenuGroups } from '@/components/ec/_mypage-menu-data'
 //  *
 //  * <SideNav groups={mypageMenuGroups} activeMenu="news" ariaLabel="マイページメニュー" />
 //  * ```
@@ -656,6 +660,8 @@ export {
 // ]
 // 
 // src/components/ec/admin-shell.tsx
+// "use client"
+// 
 // /**
 //  * AdminShell — 管理画面の共通レイアウト
 //  *
@@ -685,7 +691,7 @@ export {
 //  * - CSS: admin_shops/layout/nav_layout.css
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import Home2 from "iconsax-reactjs/dist/esm/Home2.js"
 // import ShoppingCart from "iconsax-reactjs/dist/esm/ShoppingCart.js"
 // import Cake from "iconsax-reactjs/dist/esm/Cake.js"
@@ -701,10 +707,10 @@ export {
 // import {
 //   AdminSideNav,
 //   type AdminNavItem,
-// } from "./components/primitives/admin-side-nav"
-// import { AdminHeader } from "./components/primitives/admin-header"
-// import { Button } from "./components/foundations/button"
-// import { SkipLink } from "./components/foundations/skip-link"
+// } from "@/components/primitives/admin-side-nav"
+// import { AdminHeader } from "@/components/primitives/admin-header"
+// import { Button } from "@/components/foundations/button"
+// import { SkipLink } from "@/components/foundations/skip-link"
 // 
 // // ============================================================
 // // Missing Component Wrapper — DSに存在しないコンポーネントを赤枠で囲む
@@ -977,8 +983,8 @@ export {
 // import * as React from "react"
 // import Calendar from "iconsax-reactjs/dist/esm/Calendar.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // export interface AnniversaryCardProps
 //   extends React.HTMLAttributes<HTMLDivElement> {
@@ -1008,7 +1014,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { AnniversaryCard } from './components/ec/anniversary-card'
+//  * import { AnniversaryCard } from '@/components/ec/anniversary-card'
 //  * ```
 //  *
 //  * ### Props（主要なもの）
@@ -1103,7 +1109,7 @@ export {
 // src/components/ec/cake-logo.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface CakeLogoProps extends React.SVGAttributes<SVGSVGElement> {
 //   /** ロゴの高さ（px） */
@@ -1176,7 +1182,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { ChartControls } from './components/ec/chart-controls'
+//  * import { ChartControls } from '@/components/ec/chart-controls'
 //  * ```
 //  *
 //  * ### Props
@@ -1195,8 +1201,8 @@ export {
 //  * - 粒度と期間は独立して管理する
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
-// import { Switch } from "./components/foundations/switch"
+// import { cn } from "@/lib/utils"
+// import { Switch } from "@/components/foundations/switch"
 // 
 // export type ChartGranularity = "daily" | "weekly" | "monthly"
 // export type ChartPeriod = "3M" | "6M" | "12M" | "all"
@@ -1319,7 +1325,7 @@ export {
 // src/components/ec/countdown-timer.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface CountdownTimerProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** カウントダウンの状態 */
@@ -1418,7 +1424,7 @@ export {
 // import Ticket2 from "iconsax-reactjs/dist/esm/Ticket2.js"
 // import { Check, Loader2 } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface CouponCardProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** クーポンタイトル（例: "【Example Patisserie】10%OFF" or "10%OFF"） */
@@ -1673,8 +1679,8 @@ export {
 // import ArrowLeft2 from "iconsax-reactjs/dist/esm/ArrowLeft2.js"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // export type DayAvailability = "available" | "unavailable" | "few"
 // 
@@ -1914,16 +1920,16 @@ export {
 //   BreadcrumbList,
 //   BreadcrumbPage,
 //   BreadcrumbSeparator,
-// } from "./components/foundations/breadcrumb"
-// import { SkipLink } from "./components/foundations/skip-link"
-// import { Header, type HeaderAction, type HeaderNavItem } from "./components/primitives/header"
-// import { SideNav, type SideNavGroup, type SideNavItem } from "./components/primitives/side-nav"
-// import { CakeLogo } from "./components/ec/cake-logo"
-// import { mypageMenuGroups } from "./components/ec/_mypage-menu-data"
+// } from "@/components/foundations/breadcrumb"
+// import { SkipLink } from "@/components/foundations/skip-link"
+// import { Header, type HeaderAction, type HeaderNavItem } from "@/components/primitives/header"
+// import { SideNav, type SideNavGroup, type SideNavItem } from "@/components/primitives/side-nav"
+// import { CakeLogo } from "@/components/ec/cake-logo"
+// import { mypageMenuGroups } from "@/components/ec/_mypage-menu-data"
 // import {
 //   BottomTabBar,
 //   type BottomTabBarItem,
-// } from "./components/primitives/bottom-tab-bar"
+// } from "@/components/primitives/bottom-tab-bar"
 // 
 // // ─── 型定義 ──────────────────────────────────────────────────
 // 
@@ -2135,7 +2141,7 @@ export {
 // import * as React from "react"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface OrderSectionProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** セクションタイトル */
@@ -2238,9 +2244,9 @@ export {
 // import * as React from "react"
 // import ShieldTick from "iconsax-reactjs/dist/esm/ShieldTick.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { Separator } from "./components/foundations/separator"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { Separator } from "@/components/foundations/separator"
 // 
 // export interface OrderSummaryLineItem {
 //   /** 項目ラベル（例: "商品合計（4点）"） */
@@ -2374,7 +2380,7 @@ export {
 // src/components/ec/payment-method.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export type CreditCardBrand =
 //   | "visa"
@@ -2533,10 +2539,10 @@ export {
 // src/components/ec/product-card.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { PriceDisplay } from "./components/primitives/price-display"
+// import { cn } from "@/lib/utils"
+// import { PriceDisplay } from "@/components/primitives/price-display"
 // import { RatingStars } from "./rating-stars"
-// import { Tag, type TagProps } from "./components/primitives/tag"
+// import { Tag, type TagProps } from "@/components/primitives/tag"
 // 
 // export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** 商品名 */
@@ -2557,6 +2563,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 +2770,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 +2794,7 @@ export {
 //   reviewCount,
 //   shopName,
 //   shopHref,
+//   hoverEffect,
 //   tags = [],
 //   isFavorite = false,
 //   onFavoriteToggle,
@@ -2779,6 +2809,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 +2832,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 +2894,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">
@@ -2923,9 +2956,9 @@ export {
 // src/components/ec/product-carousel.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { SectionHeader, type SectionHeaderSize } from "./components/primitives/section-header"
-// import { ProductCard, type ProductCardProps } from "./components/ec/product-card"
+// import { cn } from "@/lib/utils"
+// import { SectionHeader, type SectionHeaderSize } from "@/components/primitives/section-header"
+// import { ProductCard, type ProductCardProps } from "@/components/ec/product-card"
 // 
 // const cardSizeClasses = {
 //   sm: "w-40",
@@ -2976,7 +3009,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { ProductCarousel } from './components/ec/product-carousel'
+//  * import { ProductCarousel } from '@/components/ec/product-carousel'
 //  * ```
 //  *
 //  * ### AI 向け使用ルール
@@ -3101,8 +3134,8 @@ export {
 // src/components/ec/product-cta.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // export type ProductCTAVariant =
 //   | "add-to-cart"
@@ -3240,8 +3273,8 @@ export {
 // 
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // import { RatingStars } from "./rating-stars"
 // 
 // export interface ProductDetailBarTab {
@@ -3410,14 +3443,14 @@ export {
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // import ArrowDown2 from "iconsax-reactjs/dist/esm/ArrowDown2.js"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import { BookmarkRibbonIcon } from "./product-card"
-// import { Tag } from "./components/primitives/tag"
-// import { RatingStars } from "./components/ec/rating-stars"
-// import { NumberInput } from "./components/primitives/number-input"
-// import { PriceDisplay } from "./components/primitives/price-display"
-// import { Chip } from "./components/primitives/chip"
-// import { Button } from "./components/foundations/button"
+// import { Tag } from "@/components/primitives/tag"
+// import { RatingStars } from "@/components/ec/rating-stars"
+// import { NumberInput } from "@/components/primitives/number-input"
+// import { PriceDisplay } from "@/components/primitives/price-display"
+// import { Chip } from "@/components/primitives/chip"
+// import { Button } from "@/components/foundations/button"
 // 
 // /* ------------------------------------------------------------------ */
 // /*  Types                                                              */
@@ -3897,11 +3930,11 @@ export {
 // 
 // src/components/ec/product-list-item.tsx
 // import * as React from "react"
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { Tag } from "./components/primitives/tag"
-// import { NumberInput } from "./components/primitives/number-input"
-// import { PriceDisplay } from "./components/primitives/price-display"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { Tag } from "@/components/primitives/tag"
+// import { NumberInput } from "@/components/primitives/number-input"
+// import { PriceDisplay } from "@/components/primitives/price-display"
 // import { BookmarkRibbonIcon } from "./product-card"
 // 
 // export interface ProductListItemTag {
@@ -4375,16 +4408,18 @@ 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"
 // import Minus from "iconsax-reactjs/dist/esm/Minus.js"
 // import ExportSquare from "iconsax-reactjs/dist/esm/ExportSquare.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { Input } from "./components/foundations/input"
-// import { Label } from "./components/foundations/label"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { Input } from "@/components/foundations/input"
+// import { Label } from "@/components/foundations/label"
 // 
 // export type ProductOptionType =
 //   | "quantity"
@@ -4648,7 +4683,7 @@ export {
 // src/components/ec/rating-stars.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface RatingStarsProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** 評価値 (0〜5) */
@@ -4751,12 +4786,17 @@ export {
 // import * as React from "react"
 // import Like1 from "iconsax-reactjs/dist/esm/Like1.js"
 // 
-// import { cn } from "./lib/utils"
-// import { SparkleIcon } from "./components/ec/rating-stars"
+// import { cn } from "@/lib/utils"
+// import { SparkleIcon } from "@/components/ec/rating-stars"
 // 
 // export interface ReviewCardProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** レビューバリアント */
 //   variant?: "list" | "card" | "pc"
+//   /**
+//    * 枠線を出すか（既定 true）。
+//    * 商品詳細などページ全体をフラットに統一する画面では false にする。
+//    */
+//   bordered?: boolean
 //   /** 星評価（1〜5） */
 //   rating: number
 //   /** 投稿日 */
@@ -4799,6 +4839,7 @@ export {
 // function ReviewCard({
 //   className,
 //   variant = "list",
+//   bordered = true,
 //   rating,
 //   date,
 //   text,
@@ -4825,7 +4866,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,14 +4977,16 @@ 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"
 // 
-// import { cn } from "./lib/utils"
-// import { SparkleIcon } from "./components/ec/rating-stars"
-// import { Button } from "./components/foundations/button"
-// import { Textarea } from "./components/foundations/textarea"
+// import { cn } from "@/lib/utils"
+// import { SparkleIcon } from "@/components/ec/rating-stars"
+// import { Button } from "@/components/foundations/button"
+// import { Textarea } from "@/components/foundations/textarea"
 // 
 // export interface ReviewFormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, "onSubmit"> {
 //   /** 初期星評価 */
@@ -5189,7 +5233,7 @@ export {
 // src/components/ec/review-summary.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import { RatingStars, SparkleIcon } from "./rating-stars"
 // 
 // /* ─────────────── Review Summary (レビュー集計) ─────────────── */
@@ -5372,8 +5416,8 @@ export {
 // import Star1 from "iconsax-reactjs/dist/esm/Star1.js"
 // import { StarHalf } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // import { BookmarkRibbonIcon } from "./product-card"
 // 
 // export interface ShopCardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -5639,7 +5683,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { StatCard } from './components/ec/stat-card'
+//  * import { StatCard } from '@/components/ec/stat-card'
 //  * ```
 //  *
 //  * ### Props
@@ -5656,8 +5700,8 @@ export {
 //  * - 3〜4 カラムのグリッドで並べる
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
-// import { Card, CardContent } from "./components/foundations/card"
+// import { cn } from "@/lib/utils"
+// import { Card, CardContent } from "@/components/foundations/card"
 // import TrendUp from "iconsax-reactjs/dist/esm/TrendUp.js"
 // import TrendDown from "iconsax-reactjs/dist/esm/TrendDown.js"
 // 
@@ -5747,7 +5791,7 @@ export {
 // import { ChevronDownIcon } from "lucide-react"
 // import { Accordion as AccordionPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Accordion({
 //   ...props
@@ -5825,8 +5869,8 @@ export {
 // import * as React from "react"
 // import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // function AlertDialog({
 //   ...props
@@ -6024,6 +6068,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"
@@ -6031,7 +6077,7 @@ export {
 // import TickCircle from "iconsax-reactjs/dist/esm/TickCircle.js"
 // import CloseCircle from "iconsax-reactjs/dist/esm/CloseCircle.js"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // /**
 //  * Alert variants mapped to Figma design:
@@ -6374,7 +6420,7 @@ export {
 // import * as React from "react"
 // import { Avatar as AvatarPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Avatar({
 //   className,
@@ -6487,7 +6533,7 @@ export {
 // import { cva, type VariantProps } from "class-variance-authority"
 // import { Slot } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // const badgeVariants = cva(
 //   "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 typo-label-sm whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
@@ -6559,7 +6605,7 @@ export {
 // import { ChevronRight, MoreHorizontal } from "lucide-react"
 // import { Slot } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
 //   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
@@ -6670,8 +6716,8 @@ export {
 // import { cva, type VariantProps } from "class-variance-authority"
 // import { Slot } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING } from "./lib/focus-ring"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
 // 
 // const buttonVariants = cva(
 //   `inline-flex shrink-0 items-center justify-center gap-2 rounded-lg typo-label-md whitespace-nowrap transition-all outline-none ${FOCUS_RING} disabled:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
@@ -6741,6 +6787,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 +6829,8 @@ export {
 // export { Button, buttonVariants }
 // 
 // src/components/foundations/calendar.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import {
 //   ChevronDownIcon,
@@ -6789,8 +6843,8 @@ export {
 //   type DayButton,
 // } from "react-day-picker"
 // 
-// import { cn } from "./lib/utils"
-// import { Button, buttonVariants } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button, buttonVariants } from "@/components/foundations/button"
 // 
 // function Calendar({
 //   className,
@@ -7000,7 +7054,7 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // /**
 //  * Card の背景サーフェス。
@@ -7145,8 +7199,8 @@ export {
 // import TickSquare from "iconsax-reactjs/dist/esm/TickSquare.js"
 // import { Checkbox as CheckboxPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING } from "./lib/focus-ring"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
 // 
 // /**
 //  * カード型チェックボックスのグループコンテナ
@@ -7284,6 +7338,8 @@ export {
 // export { CheckboxCardGroup, CheckboxCardItem }
 // 
 // src/components/foundations/checkbox-group.tsx
+// "use client"
+// 
 // /**
 //  * ## CheckboxGroup / チェックボックスグループ
 //  *
@@ -7292,7 +7348,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { CheckboxGroup, CheckboxGroupItem } from "./components/foundations/checkbox-group"
+//  * import { CheckboxGroup, CheckboxGroupItem } from "@/components/foundations/checkbox-group"
 //  * ```
 //  *
 //  * ### Props（CheckboxGroup）
@@ -7315,8 +7371,8 @@ export {
 // import TickSquare from "iconsax-reactjs/dist/esm/TickSquare.js"
 // import { Checkbox as CheckboxPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { Label } from "./components/foundations/label"
+// import { cn } from "@/lib/utils"
+// import { Label } from "@/components/foundations/label"
 // 
 // /* ─────────────────────────────────────────────
 //  * CheckboxGroup — グループラッパー
@@ -7456,14 +7512,16 @@ 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"
 // import { Checkbox as CheckboxPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING } from "./lib/focus-ring"
-// import { useFieldLabelling, resolveFieldAria } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
+// import { useFieldLabelling, resolveFieldAria } from "@/lib/field-labelling"
 // 
 // type CheckboxRootProps = React.ComponentProps<typeof CheckboxPrimitive.Root>
 // 
@@ -7612,7 +7670,7 @@ export {
 // src/components/foundations/chip-variants.ts
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { FOCUS_RING } from "./lib/focus-ring"
+// import { FOCUS_RING } from "@/lib/focus-ring"
 // 
 // /**
 //  * Chip / choice-chip の共有バリアント（CVA）。
@@ -7703,14 +7761,14 @@ export {
 // import { Command as CommandPrimitive } from "cmdk"
 // import { SearchIcon } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import {
 //   Dialog,
 //   DialogContent,
 //   DialogDescription,
 //   DialogHeader,
 //   DialogTitle,
-// } from "./components/foundations/dialog"
+// } from "@/components/foundations/dialog"
 // 
 // function Command({
 //   className,
@@ -7891,7 +7949,7 @@ export {
 // import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 // import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function ContextMenu({
 //   ...props
@@ -8153,24 +8211,25 @@ export {
 // import Add from "iconsax-reactjs/dist/esm/Add.js"
 // import ExportSquare from "iconsax-reactjs/dist/esm/ExportSquare.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Checkbox } from "./components/foundations/checkbox"
-// import { Button } from "./components/foundations/button"
-// import { Avatar, AvatarImage, AvatarFallback } from "./components/foundations/avatar"
+// 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"
 // import {
 //   Select,
 //   SelectTrigger,
 //   SelectValue,
 //   SelectContent,
 //   SelectItem,
-// } from "./components/foundations/select"
+// } from "@/components/foundations/select"
 // import {
 //   DropdownMenu,
 //   DropdownMenuTrigger,
 //   DropdownMenuContent,
 //   DropdownMenuItem,
 //   DropdownMenuSeparator,
-// } from "./components/foundations/dropdown-menu"
+// } from "@/components/foundations/dropdown-menu"
 // 
 // // ── DataTable ─────────────────────────────────────────────
 // // メインラッパー。横スクロール対応。
@@ -8263,6 +8322,7 @@ export {
 //   sortDirection,
 //   onSort,
 //   width,
+//   srLabel,
 //   children,
 //   ...props
 // }: React.ComponentProps<"th"> & {
@@ -8271,8 +8331,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 +8351,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>
 //   )
 // }
@@ -8846,8 +8935,8 @@ export {
 // import { XIcon } from "lucide-react"
 // import { Dialog as DialogPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // function Dialog({
 //   ...props
@@ -9006,7 +9095,7 @@ export {
 // import * as React from "react"
 // import { Drawer as DrawerPrimitive } from "vaul"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Drawer({
 //   ...props
@@ -9142,7 +9231,7 @@ export {
 // import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 // import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function DropdownMenu({
 //   ...props
@@ -9404,7 +9493,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "./components/foundations/field"
+//  * import { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "@/components/foundations/field"
 //  * ```
 //  *
 //  * ### 構成要素
@@ -9430,9 +9519,9 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
-// import { Label } from "./components/foundations/label"
-// import { Separator } from "./components/foundations/separator"
+// import { cn } from "@/lib/utils"
+// import { Label } from "@/components/foundations/label"
+// import { Separator } from "@/components/foundations/separator"
 // 
 // /**
 //  * Field — 1 フィールド分の箱（ラベル + 入力 + 説明/エラー）。
@@ -9624,12 +9713,14 @@ export {
 //   VariantProps<typeof fieldVariants>
 // 
 // src/components/foundations/file-input.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { Paperclip, X } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING, FOCUS_RING_WITHIN } from "./lib/focus-ring"
-// import { buttonVariants } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING, FOCUS_RING_WITHIN } from "@/lib/focus-ring"
+// import { buttonVariants } from "@/components/foundations/button"
 // 
 // /** maxSize 超過などの理由でファイルが受理されなかったときのコールバック引数。 */
 // export interface FileInputError {
@@ -9715,7 +9806,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { FileInput } from './components/foundations/file-input'
+//  * import { FileInput } from '@/components/foundations/file-input'
 //  * ```
 //  *
 //  * ### AI 向け使用ルール
@@ -9853,8 +9944,8 @@ export {
 //   type FieldValues,
 // } from "react-hook-form"
 // 
-// import { cn } from "./lib/utils"
-// import { Label } from "./components/foundations/label"
+// import { cn } from "@/lib/utils"
+// import { Label } from "@/components/foundations/label"
 // 
 // const Form = FormProvider
 // 
@@ -10011,7 +10102,7 @@ export {
 // import * as React from "react"
 // import { HoverCard as HoverCardPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function HoverCard({
 //   openDelay = 200,
@@ -10057,7 +10148,7 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // /**
 //  * 丸いアイコンバッジ。アイコンを淡いアクセント背景の円で囲む装飾要素。
@@ -10107,10 +10198,10 @@ export {
 // src/components/foundations/input.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { useValueLength } from "./lib/use-value-length"
-// import { FOCUS_RING } from "./lib/focus-ring"
-// import { useFieldLabelling, resolveNativeFieldAria } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { useValueLength } from "@/lib/use-value-length"
+// import { FOCUS_RING } from "@/lib/focus-ring"
+// import { useFieldLabelling, resolveNativeFieldAria } from "@/lib/field-labelling"
 // 
 // export interface InputProps extends React.ComponentProps<"input"> {
 //   /**
@@ -10209,7 +10300,7 @@ export {
 // import * as React from "react"
 // import { Label as LabelPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Label({
 //   className,
@@ -10246,7 +10337,7 @@ export {
 // import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 // import { Menubar as MenubarPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Menubar({
 //   className,
@@ -10523,7 +10614,7 @@ export {
 // import { ChevronDownIcon } from "lucide-react"
 // import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function NavigationMenu({
 //   className,
@@ -10696,8 +10787,9 @@ export {
 //   MoreHorizontalIcon,
 // } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { buttonVariants, type Button } from "./components/foundations/button"
+// 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">) {
 //   return (
@@ -10730,6 +10822,11 @@ export {
 // 
 // type PaginationLinkProps = {
 //   isActive?: boolean
+//   /**
+//    * リンクの描画に使うコンポーネント（既定 `a`）。
+//    * `next/link` 等を渡すとクライアント遷移になる（#236）。
+//    */
+//   linkComponent?: LinkComponent
 // } & Pick<React.ComponentProps<typeof Button>, "size"> &
 //   React.ComponentProps<"a">
 // 
@@ -10737,10 +10834,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}
@@ -10824,7 +10923,7 @@ export {
 // import * as React from "react"
 // import { Popover as PopoverPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Popover({
 //   ...props
@@ -10913,7 +11012,7 @@ export {
 // import * as React from "react"
 // import { Progress as ProgressPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Progress({
 //   className,
@@ -10948,12 +11047,14 @@ export {
 // export { Progress }
 // 
 // src/components/foundations/radio-group.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING } from "./lib/focus-ring"
-// import { chipVariants } from "./components/foundations/chip-variants"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
+// import { chipVariants } from "@/components/foundations/chip-variants"
 // 
 // /** RadioGroup の描画スタイル。tile=タイル型（既定）/ chip=チップ型（choice chip）。 */
 // export type RadioGroupVariant = "tile" | "chip"
@@ -11111,9 +11212,11 @@ export {
 // export { RadioGroup, RadioGroupItem }
 // 
 // src/components/foundations/responsive-dialog.tsx
+// "use client"
+// 
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import {
 //   Dialog,
 //   DialogClose,
@@ -11123,7 +11226,7 @@ export {
 //   DialogHeader,
 //   DialogTitle,
 //   DialogTrigger,
-// } from "./components/foundations/dialog"
+// } from "@/components/foundations/dialog"
 // import {
 //   Drawer,
 //   DrawerClose,
@@ -11133,7 +11236,7 @@ export {
 //   DrawerHeader,
 //   DrawerTitle,
 //   DrawerTrigger,
-// } from "./components/foundations/drawer"
+// } from "@/components/foundations/drawer"
 // 
 // // ────────────────────────────────────────────────────────────
 // // useIsMobile — メディアクエリでSP判定
@@ -11330,7 +11433,7 @@ export {
 // import * as React from "react"
 // import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function ScrollArea({
 //   className,
@@ -11392,9 +11495,9 @@ export {
 // import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 // import { Select as SelectPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING } from "./lib/focus-ring"
-// import { useFieldLabelling, resolveFieldAria } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
+// import { useFieldLabelling, resolveFieldAria } from "@/lib/field-labelling"
 // 
 // function Select({
 //   ...props
@@ -11597,7 +11700,7 @@ export {
 // import * as React from "react"
 // import { Separator as SeparatorPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Separator({
 //   className,
@@ -11626,7 +11729,7 @@ export {
 // import { XIcon } from "lucide-react"
 // import { Dialog as SheetPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
 //   return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -11671,18 +11774,32 @@ 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)]",
 //           side === "right" &&
@@ -11767,7 +11884,7 @@ export {
 // }
 // 
 // src/components/foundations/skeleton.tsx
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 //   return (
@@ -11784,7 +11901,7 @@ export {
 // src/components/foundations/skip-link.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface SkipLinkProps
 //   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -11808,7 +11925,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { SkipLink } from './components/foundations/skip-link'
+//  * import { SkipLink } from '@/components/foundations/skip-link'
 //  * ```
 //  *
 //  * ### 使い方（シェルを使わず素の DOM に置く場合）
@@ -11854,9 +11971,9 @@ export {
 // import * as React from "react"
 // import { Slider as SliderPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING } from "./lib/focus-ring"
-// import { useFieldLabelling } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
+// import { useFieldLabelling } from "@/lib/field-labelling"
 // 
 // export interface SliderProps
 //   extends React.ComponentProps<typeof SliderPrimitive.Root> {
@@ -11962,12 +12079,22 @@ export {
 // src/components/foundations/social-icon.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// 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 +12182,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]} />
@@ -12132,7 +12286,7 @@ export {
 // 
 // src/components/foundations/spinner.tsx
 // import * as React from "react"
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
 //   size?: "sm" | "md" | "lg"
@@ -12170,8 +12324,8 @@ export {
 // import { Switch as SwitchPrimitive } from "radix-ui"
 // import { Check } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { useFieldLabelling, resolveFieldAria } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { useFieldLabelling, resolveFieldAria } from "@/lib/field-labelling"
 // 
 // /**
 //  * トグルスイッチ（Airbnb風）
@@ -12234,7 +12388,7 @@ export {
 // src/components/foundations/table.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Table({ className, ...props }: React.ComponentProps<"table">) {
 //   return (
@@ -12352,7 +12506,7 @@ export {
 // import { cva, type VariantProps } from "class-variance-authority"
 // import { Tabs as TabsPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function Tabs({
 //   className,
@@ -12380,10 +12534,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 +12558,7 @@ export {
 //   className,
 //   variant = "underbar",
 //   scrollable = false,
+//   size = "md",
 //   ...props
 // }: React.ComponentProps<typeof TabsPrimitive.List> &
 //   VariantProps<typeof tabsListVariants>) {
@@ -12400,7 +12567,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 +12586,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
@@ -12457,10 +12631,10 @@ export {
 // src/components/foundations/textarea.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { useValueLength } from "./lib/use-value-length"
-// import { FOCUS_RING } from "./lib/focus-ring"
-// import { useFieldLabelling, resolveNativeFieldAria } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { useValueLength } from "@/lib/use-value-length"
+// import { FOCUS_RING } from "@/lib/focus-ring"
+// import { useFieldLabelling, resolveNativeFieldAria } from "@/lib/field-labelling"
 // 
 // export interface TextareaProps extends React.ComponentProps<"textarea"> {
 //   /**
@@ -12546,11 +12720,13 @@ 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"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // /**
 //  * ChipGroup / チップグループ
@@ -12683,7 +12859,7 @@ export {
 // import { cva, type VariantProps } from "class-variance-authority"
 // import { Toggle as TogglePrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // const toggleVariants = cva(
 //   "inline-flex items-center justify-center gap-2 rounded-md typo-label-sm whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -12730,7 +12906,7 @@ export {
 // import * as React from "react"
 // import { Tooltip as TooltipPrimitive } from "radix-ui"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // function TooltipProvider({
 //   delayDuration = 0,
@@ -12824,7 +13000,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { AdminHeader } from './components/primitives/admin-header'
+//  * import { AdminHeader } from '@/components/primitives/admin-header'
 //  * ```
 //  *
 //  * ### Props
@@ -12869,11 +13045,13 @@ 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 { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // // ============================================================
 // // Types
@@ -12964,7 +13142,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { AdminSideNav } from './components/primitives/admin-side-nav'
+//  * import { AdminSideNav } from '@/components/primitives/admin-side-nav'
 //  * ```
 //  *
 //  * ### Props
@@ -13150,8 +13328,8 @@ export {
 // src/components/primitives/banner-carousel.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { SectionHeader, type SectionHeaderSize } from "./components/primitives/section-header"
+// import { cn } from "@/lib/utils"
+// import { SectionHeader, type SectionHeaderSize } from "@/components/primitives/section-header"
 // 
 // export interface BannerItem {
 //   /** バナー画像URL */
@@ -13209,7 +13387,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { BannerCarousel } from './components/primitives/banner-carousel'
+//  * import { BannerCarousel } from '@/components/primitives/banner-carousel'
 //  * ```
 //  *
 //  * ### AI 向け使用ルール
@@ -13313,7 +13491,7 @@ export {
 // 
 // src/components/primitives/bottom-tab-bar.tsx
 // import * as React from "react"
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import { NotificationBadge } from "./notification-badge"
 // 
 // export interface BottomTabBarItem {
@@ -13434,7 +13612,7 @@ export {
 // 
 // src/components/primitives/bulk-action-bar.tsx
 // import * as React from "react"
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface BulkActionBarProps {
 //   /** 選択件数 */
@@ -13490,8 +13668,8 @@ export {
 // src/components/primitives/category-scroll.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { SectionHeader, type SectionHeaderSize } from "./components/primitives/section-header"
+// import { cn } from "@/lib/utils"
+// import { SectionHeader, type SectionHeaderSize } from "@/components/primitives/section-header"
 // 
 // export interface CategoryItem {
 //   /** カテゴリ名 */
@@ -13565,7 +13743,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { CategoryScroll } from './components/primitives/category-scroll'
+//  * import { CategoryScroll } from '@/components/primitives/category-scroll'
 //  * ```
 //  *
 //  * ### Props（主要なもの）
@@ -13688,7 +13866,7 @@ export {
 // src/components/primitives/category-shortcuts.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface CategoryShortcutsItem {
 //   /** カテゴリ名 */
@@ -13725,7 +13903,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { CategoryShortcuts } from './components/primitives/category-shortcuts'
+//  * import { CategoryShortcuts } from '@/components/primitives/category-shortcuts'
 //  * ```
 //  *
 //  * ### AI 向け使用ルール
@@ -13802,14 +13980,16 @@ export {
 // export { CategoryShortcuts }
 // 
 // src/components/primitives/chat-composer.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { SendHorizontal } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { FileInput } from "./components/foundations/file-input"
-// import { Textarea } from "./components/foundations/textarea"
-// import { Chip } from "./components/primitives/chip"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { FileInput } from "@/components/foundations/file-input"
+// import { Textarea } from "@/components/foundations/textarea"
+// import { Chip } from "@/components/primitives/chip"
 // 
 // /** 添付が受理されなかったときのコールバック引数。 */
 // export interface ChatComposerAttachmentError {
@@ -13885,7 +14065,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { ChatComposer } from "./components/primitives/chat-composer"
+//  * import { ChatComposer } from "@/components/primitives/chat-composer"
 //  * ```
 //  *
 //  * ### 送信キー
@@ -14071,8 +14251,8 @@ export {
 // import * as React from "react"
 // import { X } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { chipVariants, type ChipVariantProps } from "./components/foundations/chip-variants"
+// import { cn } from "@/lib/utils"
+// import { chipVariants, type ChipVariantProps } from "@/components/foundations/chip-variants"
 // 
 // export interface ChipProps
 //   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -14255,8 +14435,8 @@ export {
 // import * as React from "react"
 // import { X } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // export type CoachMarkDirection =
 //   | "top"
@@ -14396,14 +14576,16 @@ export {
 // export { CoachMark }
 // 
 // src/components/primitives/combobox.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { Check, ChevronsUpDown } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./components/foundations/command"
-// import { Popover, PopoverContent, PopoverTrigger } from "./components/foundations/popover"
-// import { resolveFieldAria, useFieldLabelling } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/foundations/command"
+// import { Popover, PopoverContent, PopoverTrigger } from "@/components/foundations/popover"
+// import { resolveFieldAria, useFieldLabelling } from "@/lib/field-labelling"
 // 
 // export interface ComboboxOption {
 //   value: string
@@ -14531,7 +14713,7 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // /**
 //  * Container — ページ最大幅と左右余白の唯一の担い手。
@@ -14583,12 +14765,191 @@ 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"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export type ContentCarouselItemsPerView = 1 | 2 | 3 | 4
 // 
@@ -14645,7 +15006,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { ContentCarousel } from './components/primitives/content-carousel'
+//  * import { ContentCarousel } from '@/components/primitives/content-carousel'
 //  * ```
 //  *
 //  * ### AI 向け使用ルール
@@ -14825,6 +15186,8 @@ export {
 // export { ContentCarousel }
 // 
 // src/components/primitives/date-picker.tsx
+// "use client"
+// 
 // /**
 //  * ## DatePicker / DateTimePicker — Popover + Calendar 組合せ済みの日付・日時入力
 //  *
@@ -14834,7 +15197,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { DatePicker, DateTimePicker } from "./components/primitives/date-picker"
+//  * import { DatePicker, DateTimePicker } from "@/components/primitives/date-picker"
 //  * ```
 //  *
 //  * ### 表示フォーマット
@@ -14870,21 +15233,21 @@ export {
 // import { ja } from "react-day-picker/locale"
 // import type { Matcher } from "react-day-picker"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { Calendar } from "./components/foundations/calendar"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { Calendar } from "@/components/foundations/calendar"
 // import {
 //   Popover,
 //   PopoverContent,
 //   PopoverTrigger,
-// } from "./components/foundations/popover"
+// } from "@/components/foundations/popover"
 // import {
 //   Select,
 //   SelectContent,
 //   SelectItem,
 //   SelectTrigger,
 //   SelectValue,
-// } from "./components/foundations/select"
+// } from "@/components/foundations/select"
 // 
 // const WEEKDAY_JA = ["日", "月", "火", "水", "木", "金", "土"] as const
 // 
@@ -15136,7 +15499,7 @@ export {
 // src/components/primitives/empty-state.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** 中央に表示するアイコン */
@@ -15208,8 +15571,8 @@ export {
 // src/components/primitives/error-state.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // export type NotFoundIllustrationProps = React.SVGProps<SVGSVGElement>
 // 
@@ -15410,8 +15773,8 @@ export {
 // import ArrowDown2 from "iconsax-reactjs/dist/esm/ArrowDown2.js"
 // import ArrowLeft2 from "iconsax-reactjs/dist/esm/ArrowLeft2.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // export interface FilterChip {
 //   /** フィルターのラベル（例: "お届け日", "価格"） */
@@ -15620,9 +15983,12 @@ export {
 // export { FilterBar }
 // 
 // src/components/primitives/footer.tsx
+// "use client"
+// 
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
+// import { resolveLinkComponent, type LinkComponent } from "@/lib/link-component"
 // 
 // export interface FooterLink {
 //   label: string
@@ -15682,6 +16048,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 +16142,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 +16158,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 +16177,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 +16198,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 +16250,7 @@ export {
 //             >
 //               <path d="M3.5 1.5L7 5L3.5 8.5" />
 //             </svg>
-//           </a>
+//           </FooterAnchor>
 //         </li>
 //       ))}
 //     </ul>
@@ -15879,8 +16291,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 +16329,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 +16361,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} />
+//               {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 +16479,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 +16539,8 @@ export {
 // export { Footer }
 // 
 // src/components/primitives/form-field.tsx
+// "use client"
+// 
 // /**
 //  * ## FormField / フォームフィールド
 //  *
@@ -16067,7 +16549,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { FormField } from './components/primitives/form-field'
+//  * import { FormField } from '@/components/primitives/form-field'
 //  * ```
 //  *
 //  * ### Props
@@ -16087,9 +16569,9 @@ export {
 //  * - 管理画面・フロントどちらでも使用可
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
-// import { Label } from "./components/foundations/label"
-// import { FieldLabellingContext } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { Label } from "@/components/foundations/label"
+// import { FieldLabellingContext } from "@/lib/field-labelling"
 // 
 // export interface FormFieldProps {
 //   /** フィールドラベル */
@@ -16180,9 +16662,9 @@ export {
 // src/components/primitives/funnel-shell.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { SkipLink } from "./components/foundations/skip-link"
-// import { Header } from "./components/primitives/header"
+// import { cn } from "@/lib/utils"
+// import { SkipLink } from "@/components/foundations/skip-link"
+// import { Header } from "@/components/primitives/header"
 // 
 // export interface FunnelStep {
 //   /** ステップ識別子（activeStep との照合に使う） */
@@ -16394,18 +16876,27 @@ 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"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // import {
 //   DropdownMenu,
 //   DropdownMenuContent,
 //   DropdownMenuItem,
 //   DropdownMenuTrigger,
-// } from "./components/foundations/dropdown-menu"
+// } 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 +16913,12 @@ export {
 //   href?: string
 //   /** バッジ数（通知やカート件数） */
 //   badge?: React.ReactNode
+//   /**
+//    * `label` をアイコンの右に可視テキストとして出す（既定 false = アイコンのみ）。
+//    * 「ログイン」等、文字が無いと意味が伝わりにくい導線に使う。
+//    * true のときは正方形のアイコンボタンではなく、枠線付きのピル型で描画する。
+//    */
+//   showLabel?: boolean
 // }
 // 
 // export interface HeaderNavItem {
@@ -16466,7 +16963,7 @@ export {
 //   /**
 //    * インラインナビ（navItems / searchSlot 行）を出し始めるコンテナ幅。
 //    * - `md`（既定）: `@[768px]`+
-//    * - `lg` : `@[1024px]`+（ロゴが多段で横幅を食う等、中幅での同居を避けたいとき）
+//    * - `lg` : `@[960px]`+（ロゴが多段で横幅を食う等、中幅での同居を避けたいとき）
 //    * 未満の幅では SP 行（ロゴ + actions）になる。
 //    */
 //   navBreakpoint?: "md" | "lg"
@@ -16480,6 +16977,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 +16999,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 +17147,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 +17247,12 @@ export {
 //   navBreakpoint = "md",
 //   navOverflowLabel,
 //   searchSlot,
+//   searchBreakpoint,
 //   rightSlot,
 //   centerSlot,
 //   bottomSlot,
 //   disableSticky = false,
+//   containerSize,
 //   ...props
 // }: HeaderProps) {
 //   const stickyClass = disableSticky
@@ -16685,11 +17262,21 @@ export {
 //   const baseClass =
 //     "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]"
 // 
+//   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 +17288,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 +17349,7 @@ export {
 //           {actionsEl}
 //         </div>
 // 
-//         {/* PC（既定 @[768px]+ / navBreakpoint="lg" なら @[1024px]+）:
+//         {/* PC（既定 @[768px]+ / navBreakpoint="lg" なら @[960px]+）:
 //             ロゴ + グローバルナビ + 検索 + アクション（1行）。
 //             navItems / searchSlot のどちらかがあれば描画する。 */}
 //         {(navItems || searchSlot) && (
@@ -16760,28 +17365,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 +17399,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 +17425,7 @@ export {
 //           </Button>
 //           {centerSlot && <div className="flex-1">{centerSlot}</div>}
 //         </div>
-//       </header>
+//       </HeaderShell>
 //     )
 //   }
 // 
@@ -16828,14 +17434,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,18 +17454,20 @@ 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"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface ImageCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** スライド画像リスト */
@@ -17111,11 +17715,13 @@ 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"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface ImageGalleryProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** 画像URL配列 */
@@ -17350,14 +17956,16 @@ 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"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { FieldError } from "./components/foundations/field"
-// import { FileInput } from "./components/foundations/file-input"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { FieldError } from "@/components/foundations/field"
+// import { FileInput } from "@/components/foundations/file-input"
 // 
 // /** 選択されたファイルが受理されなかったときのコールバック引数。 */
 // export interface ImageInputValidationError {
@@ -17527,7 +18135,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { ImageInput } from "./components/primitives/image-input"
+//  * import { ImageInput } from "@/components/primitives/image-input"
 //  * ```
 //  *
 //  * ### 表示サイズ
@@ -17733,7 +18341,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { ImageUploader } from './components/primitives/image-uploader'
+//  * import { ImageUploader } from '@/components/primitives/image-uploader'
 //  * ```
 //  *
 //  * ### Props
@@ -17749,7 +18357,7 @@ export {
 //  * - 商品編集ページの画像セクションで使用
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import Add from "iconsax-reactjs/dist/esm/Add.js"
 // import Trash from "iconsax-reactjs/dist/esm/Trash.js"
 // 
@@ -17841,7 +18449,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { KebabMenu } from './components/primitives/kebab-menu'
+//  * import { KebabMenu } from '@/components/primitives/kebab-menu'
 //  * ```
 //  *
 //  * ### Props
@@ -17854,13 +18462,13 @@ export {
 //  * - DropdownMenu を内部で利用
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // import {
 //   DropdownMenu,
 //   DropdownMenuContent,
 //   DropdownMenuItem,
 //   DropdownMenuTrigger,
-// } from "./components/foundations/dropdown-menu"
+// } from "@/components/foundations/dropdown-menu"
 // import More from "iconsax-reactjs/dist/esm/More.js"
 // 
 // export interface KebabMenuItem {
@@ -17917,11 +18525,13 @@ 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"
-// import { Switch } from "./components/foundations/switch"
-// import { cn } from "./lib/utils"
+// import { Switch } from "@/components/foundations/switch"
+// import { cn } from "@/lib/utils"
 // 
 // export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
 //   /** メインタイトル */
@@ -18139,6 +18749,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"
@@ -18146,8 +18758,9 @@ export {
 // import Add from "iconsax-reactjs/dist/esm/Add.js"
 // import { X } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { resolveLinkComponent, type LinkComponent } from "@/lib/link-component"
+// import { Button } from "@/components/foundations/button"
 // 
 // export interface MenuSection {
 //   /** セクションタイトル */
@@ -18191,6 +18804,12 @@ export {
 // }
 // 
 // export interface MenuDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+//   /**
+//    * リンクの描画に使うコンポーネント（既定 `a`）。
+//    * `next/link` 等を渡すとクライアント遷移になる（#236）。
+//    */
+//   linkComponent?: LinkComponent
+// 
 //   /** ユーザー名（ログイン時） */
 //   userName?: string
 //   /** ログイン状態 */
@@ -18247,8 +18866,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 +18928,7 @@ export {
 //           <div className="py-2">
 //             <ul>
 //               <li>
-//                 <a
+//                 <LoginLinkTag
 //                   href={loginHref}
 //                   onClick={
 //                     onLogin
@@ -18321,7 +18944,7 @@ export {
 //                     <Add size={16} />
 //                   </span>
 //                   <span className="flex-1">ログイン・新規会員登録</span>
-//                 </a>
+//                 </LoginLinkTag>
 //               </li>
 //             </ul>
 //           </div>
@@ -18355,7 +18978,7 @@ export {
 //               <ul>
 //                 {section.items.map((item) => (
 //                   <li key={item.label}>
-//                     <MenuItemLink item={item} />
+//                     <MenuItemLink linkComponent={linkComponent} item={item} />
 //                   </li>
 //                 ))}
 //               </ul>
@@ -18367,7 +18990,7 @@ export {
 //                     <ul>
 //                       {section.itemsExtra.map((item) => (
 //                         <li key={item.label}>
-//                           <MenuItemLink item={item} />
+//                           <MenuItemLink linkComponent={linkComponent} item={item} />
 //                         </li>
 //                       ))}
 //                     </ul>
@@ -18401,7 +19024,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 +19034,7 @@ export {
 //                       alt={banner.alt}
 //                       className="h-auto w-full object-cover"
 //                     />
-//                   </a>
+//                   </BannerLinkTag>
 //                 </li>
 //               ))}
 //             </ul>
@@ -18423,9 +19046,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,21 +19090,23 @@ 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"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./components/foundations/command"
-// import { Popover, PopoverContent, PopoverTrigger } from "./components/foundations/popover"
-// import { resolveFieldAria, useFieldLabelling } from "./lib/field-labelling"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/foundations/command"
+// import { Popover, PopoverContent, PopoverTrigger } from "@/components/foundations/popover"
+// import { resolveFieldAria, useFieldLabelling } from "@/lib/field-labelling"
 // import { Chip } from "./chip"
 // 
 // export interface MultiSelectOption {
@@ -18620,7 +19246,7 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // /**
 //  * サイズは dot/number/multi-digit で動的に決まるため、
@@ -18738,7 +19364,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { NotificationList } from './components/primitives/notification-list'
+//  * import { NotificationList } from '@/components/primitives/notification-list'
 //  * ```
 //  *
 //  * ### Props（主要なもの）
@@ -18756,9 +19382,9 @@ export {
 // import * as React from "react"
 // import Notification from "iconsax-reactjs/dist/esm/Notification.js"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
-// import { Badge } from "./components/foundations/badge"
+// import { Badge } from "@/components/foundations/badge"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface NotificationItem {
 //   /** 通知ID */
@@ -18871,13 +19497,15 @@ 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"
 // import Trash from "iconsax-reactjs/dist/esm/Trash.js"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING } from "./lib/focus-ring"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING } from "@/lib/focus-ring"
 // 
 // export interface NumberInputProps
 //   extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
@@ -19269,7 +19897,7 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // const priceDisplayVariants = cva("inline-flex items-baseline gap-0.5 text-[var(--Text-High-Emphasis)]", {
 //   variants: {
@@ -19409,7 +20037,7 @@ export {
 // import * as React from "react"
 // import { Check } from "lucide-react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface ProgressStepsProps
 //   extends React.HTMLAttributes<HTMLDivElement> {
@@ -19511,12 +20139,109 @@ 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"
 // 
-// import { cn } from "./lib/utils"
-// import { FOCUS_RING_INSET, FOCUS_RING_WITHIN } from "./lib/focus-ring"
+// import { cn } from "@/lib/utils"
+// import { FOCUS_RING_INSET, FOCUS_RING_WITHIN } from "@/lib/focus-ring"
 // 
 // export interface SearchBarProps
 //   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -19526,6 +20251,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 +20282,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 +20294,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 +20326,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 +20369,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>
 //     )
 //   }
@@ -19645,7 +20420,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { SearchPanel } from './components/primitives/search-panel'
+//  * import { SearchPanel } from '@/components/primitives/search-panel'
 //  * ```
 //  *
 //  * ### Props
@@ -19663,8 +20438,8 @@ export {
 //  * - フィールド数が多く均等幅で折り返したい場合は layout="flex" を使う
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // import SearchNormal1 from "iconsax-reactjs/dist/esm/SearchNormal1.js"
 // 
 // export interface SearchPanelProps {
@@ -19731,8 +20506,8 @@ export {
 // import ArrowLeft2 from "iconsax-reactjs/dist/esm/ArrowLeft2.js"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
 // 
 // export type SectionHeaderSize = "3xl" | "2xl" | "xl" | "lg" | "md" | "sm"
 // export type SectionHeaderDesktopSize = "5xl" | "4xl"
@@ -19832,7 +20607,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 +20690,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 +20747,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>
 //   )
@@ -19988,7 +20774,7 @@ export {
 // src/components/primitives/section-nav.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // // ============================================================
 // // Types
@@ -20040,7 +20826,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { SectionNav } from './components/primitives/section-nav'
+//  * import { SectionNav } from '@/components/primitives/section-nav'
 //  * ```
 //  *
 //  * ### 使い方（vertical＝既定）
@@ -20185,7 +20971,7 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export type SectionScrim = "none" | "dark" | "light" | "bottom-dark"
 // 
@@ -20318,12 +21104,31 @@ 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"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { SocialIcon } from "./components/foundations/social-icon"
+// import { cn } from "@/lib/utils"
+// 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"> {
@@ -20331,6 +21136,11 @@ export {
 //   url?: string
 //   /** シェアテキスト */
 //   text?: string
+//   /**
+//    * 表示する共有先と並び順（既定 `["line", "x", "copy"]`）。
+//    * 組み込みに無い共有先は `ShareCustomService` を混ぜて足す。
+//    */
+//   services?: Array<ShareService | ShareCustomService>
 //   /** コピーボタンのラベル */
 //   copyLabel?: string
 //   /** コピー成功時に一時表示するラベル（約2秒） */
@@ -20341,22 +21151,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 +21254,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>
 //   )
 // }
@@ -20461,8 +21328,8 @@ export {
 // import * as React from "react"
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // 
-// import { cn } from "./lib/utils"
-// import { Separator } from "./components/foundations/separator"
+// import { cn } from "@/lib/utils"
+// import { Separator } from "@/components/foundations/separator"
 // 
 // // ============================================================
 // // Types
@@ -20582,7 +21449,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { SideNav } from './components/primitives/side-nav'
+//  * import { SideNav } from '@/components/primitives/side-nav'
 //  * ```
 //  *
 //  * ### 使い方
@@ -20698,9 +21565,9 @@ export {
 // src/components/primitives/social-login-button.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { Button } from "./components/foundations/button"
-// import { SocialIcon, type SocialPlatform } from "./components/foundations/social-icon"
+// import { cn } from "@/lib/utils"
+// import { Button } from "@/components/foundations/button"
+// import { SocialIcon, type SocialPlatform } from "@/components/foundations/social-icon"
 // 
 // export type SocialProvider = Extract<SocialPlatform, "line" | "amazon" | "google" | "apple">
 // export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -20793,8 +21660,8 @@ export {
 // src/components/primitives/standard-page-shell.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { SkipLink } from "./components/foundations/skip-link"
+// import { cn } from "@/lib/utils"
+// import { SkipLink } from "@/components/foundations/skip-link"
 // 
 // export interface StandardPageShellProps {
 //   /**
@@ -20895,6 +21762,8 @@ export {
 // export { StandardPageShell }
 // 
 // src/components/primitives/status-count-tabs.tsx
+// "use client"
+// 
 // /**
 //  * ## StatusCountTabs / ステータスカウントタブ
 //  *
@@ -20904,7 +21773,7 @@ export {
 //  *
 //  * ### インポート
 //  * ```tsx
-//  * import { StatusCountTabs } from './components/primitives/status-count-tabs'
+//  * import { StatusCountTabs } from '@/components/primitives/status-count-tabs'
 //  * ```
 //  *
 //  * ### Props
@@ -20920,8 +21789,8 @@ export {
 //  * - 内部で Chip (count prop) を使用
 //  */
 // import * as React from "react"
-// import { cn } from "./lib/utils"
-// import { Chip } from "./components/primitives/chip"
+// import { cn } from "@/lib/utils"
+// import { Chip } from "@/components/primitives/chip"
 // 
 // export interface StatusCountTabsProps {
 //   /** タブアイテム */
@@ -20976,7 +21845,7 @@ export {
 // 
 // src/components/primitives/sticky-action-bar.tsx
 // import * as React from "react"
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
 //   /** Whether to show a top border */
@@ -21009,7 +21878,12 @@ export {
 // src/components/primitives/sub-nav.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// 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 +21898,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 +21931,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>
 //   )
 // }
 // 
@@ -21128,7 +22034,7 @@ export {
 // import * as React from "react"
 // import { cva, type VariantProps } from "class-variance-authority"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // const tagVariants = cva(
 //   "inline-flex items-center gap-1 rounded text-nowrap",
@@ -21210,7 +22116,7 @@ export {
 // src/components/primitives/timeline.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
+// import { cn } from "@/lib/utils"
 // 
 // export interface TimelineItem {
 //   /** 省略時は1始まりの連番を表示。IconBadge 等の ReactNode も渡せる */
@@ -21296,10 +22202,10 @@ export {
 // src/components/primitives/workspace-shell.tsx
 // import * as React from "react"
 // 
-// import { cn } from "./lib/utils"
-// import { SkipLink } from "./components/foundations/skip-link"
-// import { Header } from "./components/primitives/header"
-// import { Container } from "./components/primitives/container"
+// import { cn } from "@/lib/utils"
+// import { SkipLink } from "@/components/foundations/skip-link"
+// import { Header } from "@/components/primitives/header"
+// import { Container } from "@/components/primitives/container"
 // 
 // export interface WorkspaceShellProps {
 //   /** 編集対象名（編集ヘッダーのタイトル） */
@@ -22322,6 +23228,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"
 // /**
@@ -22475,6 +23389,8 @@ export {
 // export type { StatCardProps } from "./components/ec/stat-card"
 // 
 // src/lib/field-labelling.ts
+// "use client"
+// 
 // /**
 //  * ## フィールドのラベル関連付け（DS 全体の方針 / issue #202）
 //  *
@@ -22624,6 +23540,42 @@ 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 をそのまま渡せる）
+//  */
+// 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 +23707,8 @@ export {
 // } as const
 // 
 // src/lib/use-value-length.ts
+// "use client"
+// 
 // import * as React from "react"
 // 
 // type CountableElement = HTMLInputElement | HTMLTextAreaElement