@conscience-technology/ctds 0.3.1 → 0.3.2

package/assets/components/Onboarding/Onboarding.module.css

@@ -1351,3 +1351,189 @@
   border-radius: var(--radius-sm);
 }
 
+/* ── LayoutBuilder (shell preview) ────────────────────── */
+
+.layoutGrid {
+  display: grid;
+  grid-template-columns: minmax(var(--space-12), var(--space-16)) 1fr;
+  gap: var(--space-5);
+  min-height: 0;
+}
+.layoutOptions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+.optionGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.optionGroupLabel {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg-strong);
+}
+.optionList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.optionItem {
+  display: flex;
+  align-items: center;
+  min-height: var(--control-h-md);
+  padding: 0 var(--space-3);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg);
+  font: inherit;
+  font-size: var(--text-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.optionItem:hover {
+  background: var(--hover);
+}
+.optionItem[data-active] {
+  background: var(--secondary-bg);
+  border-color: var(--border-strong);
+  color: var(--fg-strong);
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.fieldLabel {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg-strong);
+}
+.fieldControl {
+  min-height: var(--control-h-md);
+  padding: 0 var(--space-3);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--fg);
+  font: inherit;
+  font-size: var(--text-sm);
+  transition: var(--transition-colors);
+}
+.fieldControl:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+.mini {
+  display: grid;
+  min-height: var(--space-16);
+  border-radius: var(--radius-lg);
+  background: var(--bg-subtle);
+  overflow: hidden;
+  grid-template-areas:
+    "sidebar body"
+    "sidebar body";
+  grid-template-columns: var(--space-12) 1fr;
+  grid-template-rows: 1fr;
+}
+.mini[data-topbar="true"] {
+  grid-template-areas:
+    "sidebar topbar"
+    "sidebar body";
+  grid-template-rows: auto 1fr;
+}
+.mini[data-sidebar="none"] {
+  grid-template-areas:
+    "body body"
+    "body body";
+  grid-template-columns: 1fr;
+}
+.mini[data-sidebar="none"][data-topbar="true"] {
+  grid-template-areas:
+    "topbar topbar"
+    "body body";
+}
+.mini[data-sidebar="dual"] {
+  grid-template-areas:
+    "sidebar body sidebar-right"
+    "sidebar body sidebar-right";
+  grid-template-columns: var(--space-12) 1fr var(--space-12);
+}
+.mini[data-sidebar="dual"][data-topbar="true"] {
+  grid-template-areas:
+    "sidebar topbar sidebar-right"
+    "sidebar body sidebar-right";
+}
+
+.miniTopbar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-4);
+  min-height: var(--control-h-md);
+  background: var(--bg);
+  border-bottom: var(--hairline) solid var(--border);
+}
+.miniSidebar {
+  grid-area: sidebar;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-3);
+  background: var(--bg);
+  border-right: var(--hairline) solid var(--border);
+}
+.miniSidebarRight {
+  grid-area: sidebar-right;
+  border-right: none;
+  border-left: var(--hairline) solid var(--border);
+}
+.miniBody {
+  grid-area: body;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  text-align: center;
+}
+.miniBrand {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg-strong);
+}
+.miniBrandSymbol {
+  width: var(--space-5);
+  height: var(--space-5);
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.miniBrandImg {
+  height: var(--space-5);
+  max-width: var(--space-12);
+  object-fit: contain;
+}
+.miniNavItem {
+  display: flex;
+  align-items: center;
+  min-height: var(--control-h-sm);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--fg);
+  font-size: var(--text-sm);
+}
+.miniNavItem[data-active] {
+  background: var(--secondary-bg);
+  color: var(--fg-strong);
+}
+

package/assets/components/Sidebar/Sidebar.module.css

@@ -1,20 +1,21 @@
 /* Root ─────────────────────────────────────────────────
    세 영역 구조: Header(상단 고정, flex:0) · Body(flex:1, 세로 스크롤) · Footer(하단 고정, flex:0).
-   padding-inline은 두지 않음 — Body가 스크롤 컨테이너라, root에 좌우 padding을 두면
-   스크롤바가 padding 안쪽에 생겨 "오른쪽 끝에 붙지 않는" 꼴이 됨.
-
-   좌우/상하 축 단일화 규칙 (중요):
-   Sidebar 내부 모든 좌우 padding은 `--sidebar-pad-x`, 모든 상하 padding은
-   `--sidebar-pad-y` 하나로 통일. 두 토큰 값은 동일(--space-4) — 가로/세로가
-   같은 숨돌림을 가져 영역별로 상하 padding이 달라 보이는 어긋남 방지.
-   Header·Section·Separator·Footer·Body에 삽입하는 바깥 블록 전부 동일 축.
-   Body 자체엔 padding-inline 금지(스크롤바 가장자리 밀어냄).
-   Section·Header·Footer는 각자 `padding-inline: var(--sidebar-pad-x)` +
-   `padding-block: var(--sidebar-pad-y)`로 복제. */
+
+   패딩 공급 원칙 (중요):
+   Sidebar 벤더는 좌우/상하 패딩을 공급하지 않는다. root/Header/Body/Footer wrapper
+   어디에도 padding-inline·padding-block을 깔지 않음. 이유 — Body가 스크롤 컨테이너라
+   wrapper에 패딩을 깔면 스크롤바가 가장자리와 떨어지고, 벤더가 자동 공급하면
+   소비처가 그걸 모르고 또 깔아 이중 패딩이 나는 함정이 반복됨.
+
+   공급 책임은 소비처에 있음. 두 가지 패턴:
+   - 패턴 1 (단일 축): 세 영역이 모두 같은 축을 쓰면, 각 영역의 콘텐츠 래퍼에
+     동일한 padding-inline을 하나씩 깔거나 가장 큰 그룹 하나에 공급.
+   - 패턴 2 (섹션별 다른 축): 각 섹션(nav 묶음·profile 등)이 자기 padding을 깐다.
+     Minimal/Aurora 템플릿이 이 패턴.
+
+   Separator의 좌우 inset은 `--separator-inset-x` 변수로 노출(기본 0 = full-bleed).
+   소비처가 inset이 필요하면 토큰 override. */
 .root {
-  /* 좌우/상하 축 토큰 — 전 영역이 공유. 두 값은 동일. */
-  --sidebar-pad-x: var(--space-4);
-  --sidebar-pad-y: var(--space-4);
   display: flex;
   flex-direction: column;
   width: var(--sidebar-w);
@@ -27,21 +28,14 @@
      percent-height가 auto로 떨어져 Body가 0px로 붕괴한다. */
   align-self: stretch;
   min-height: 0;
-  /* padding-block을 root에 두면 Footer 없는 구성에서 Body(flex:1) 아래로
-     그 패딩만큼 빈 공간이 남는다. 상/하 숨돌림은 Header/Body/Footer가
-     각자 담당(Header padding-block, Body padding-top, Footer padding-block). */
-  transition:
-    width var(--duration-base) var(--ease-out),
-    padding var(--duration-base) var(--ease-out);
+  transition: width var(--duration-base) var(--ease-out);
 }
 
 .root[data-collapsed] {
-  --sidebar-pad-x: var(--space-2);
-  --sidebar-pad-y: var(--space-2);
   width: var(--sidebar-w-collapsed);
 }
 
-/* Header / Footer — 좌우는 공통 `--sidebar-pad-x` 축. 상하는 영역별 리듬이 다름. */
+/* Header / Footer — 레이아웃만. 좌우/상하 padding은 소비처가 공급. */
 .header,
 .footer {
   display: flex;
@@ -49,26 +43,12 @@
   gap: var(--space-2);
   min-height: var(--control-h-md);
   flex: 0 0 auto;
-  padding-inline: var(--sidebar-pad-x);
-}
-
-/* Header — 위 숨돌림을 더 크게(--space-3), 아래는 Brand와 Body 상단 fade mask가
-   받으므로 짧게(--space-1). Body `padding-top: --space-3`이 Header bottom을 보완. */
-.header {
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-1);
 }
 
-/* Footer — 상하 패딩을 좌우 축(--sidebar-pad-y = --sidebar-pad-x)과 동일하게.
-   Profile(IdentityButton)의 안쪽 콘텐츠가 Footer border와 사이드바 좌/우에서
-   모두 같은 거리를 두도록 사방 균형. */
 /* Footer — 기본은 선 없음(사이드바 안쪽 ghost 리듬 유지). Body가 스크롤
    가능할 때만(data-overflow) 상단 hairline을 켬 — 스크롤되는 콘텐츠가 Footer
-   뒤로 깔릴 때 분리가 필요하기 때문. 짧은 메뉴에서는 선이 없어 깔끔.
-   line-heavy theme(spare 등)은 소비처에서 항상 켜고 싶을 수 있는데, 그땐
-   `[data-sidebar-always-divider]` 등 상위 토글로 해결 — 기본은 overflow 조건부. */
+   뒤로 깔릴 때 분리가 필요하기 때문. 짧은 메뉴에서는 선이 없어 깔끔. */
 .footer {
-  padding-block: var(--sidebar-pad-y);
   margin-top: auto;
 }
 
@@ -78,8 +58,7 @@
 
 /* Body — 세로 스크롤 영역.
    여러 개를 두면 각각 독립 스크롤 트랙. flex:1로 남은 공간을 균등 분배.
-   상단 fade mask로 Header와 자연스럽게 이어짐 — 하단은 Footer border로 끊음.
-   padding-bottom으로 Footer 바로 위에 숨돌릴 여백 — scroll 끝에서 마지막 항목이 border에 치이지 않도록. */
+   상하/좌우 padding은 소비처가 Body 안쪽 콘텐츠 래퍼에 공급. */
 .body {
   display: flex;
   flex-direction: column;
@@ -88,43 +67,32 @@
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
-  /* 'none': 스크롤 체인 차단 + 바운스/러버밴드 자체도 억제.
-     스크롤이 생길 콘텐츠면 자기 영역에서만 스크롤, 콘텐츠가 짧으면 바운스 없음. */
+  /* 'none': 스크롤 체인 차단 + 바운스/러버밴드 자체도 억제. */
   overscroll-behavior-y: none;
-  /* Header 바로 아래 숨돌림 — Footer보다 짧게. Header padding-bottom(--space-1)과
-     합쳐서 Body 첫 항목이 Header와 적당히 분리되어 보이는 리듬. */
-  padding-top: var(--space-2);
-  /* padding-inline 금지 — 스크롤바가 가장자리에 안 붙음.
-     좌우 축은 Section·Separator·외부 삽입 블록이 `--sidebar-pad-x`로 각자 담당. */
+  /* padding-inline 금지 — 스크롤바가 가장자리와 떨어짐. 좌우 축은 소비처가
+     Body 안쪽 콘텐츠 래퍼(nav/섹션 리스트 등)에 깐다. */
+  /* padding-top·padding-bottom도 두지 않음 — Header 아래 숨돌림, Footer 위
+     마지막 항목 숨돌림 모두 소비처가 안쪽 래퍼의 padding-block으로 공급. */
   /* mask-image 금지 — Body 안에 "고정 상단 블록(railTop 등 primary CTA + 검색)"을
      꽂는 소비처가 많아서 fade가 걸리면 그 블록 상단이 흐려져 "밝은 입체 바"
-     착시를 만듦(특히 primary solid 버튼에서 심함). Header와의 경계는
-     Header border 혹은 Header padding-bottom으로 처리. */
-  /* padding-bottom은 두지 않음 — Footer가 있으면 Footer 자체 padding이 받고,
-     없으면 콘텐츠가 사이드바 끝까지 자연스럽게 흐르게. */
+     착시를 만듦(특히 primary solid 버튼에서 심함). */
 }
 
 /* Body 자식이 flex column에서 수축돼 header가 뭉개지는 걸 방지.
-   각 섹션은 자기 콘텐츠 높이 유지, Body가 overflow-y로 스크롤.
-   좌우 축도 여기서 공급 — Body 자체엔 padding-inline 금지(스크롤바 가장자리
-   밀어냄). SidebarSection 안 쓰고 MenuItem.Section 등을 Body 직접 자식으로
-   꽂는 소비처(docs 사이드바)에서도 좌우 리듬 유지. SidebarSection은 자기
-   .section에서 같은 토큰 값으로 padding-inline을 걸므로 결과가 동일 — 중복 아님. */
+   좌우/상하 padding 공급은 **하지 않음** — 소비처 책임. */
 .body > * {
   flex: 0 0 auto;
-  padding-inline: var(--sidebar-pad-x);
 }
 
-/* Brand ───────────────────────────────────────────────
-   symbol은 항상, wordmark는 expanded일 때만 렌더.
+/* Brand preset ─────────────────────────────────────────
+   Header 안에 꽂히는 preset. symbol은 항상, wordmark는 expanded일 때만 렌더.
    상한선 토큰으로 max-height 강제 — 사용처가 그 안에서 자유롭게 크기 지정.
-   자식 svg/img/text 어떤 형태든 잘리지 않고 상한만 존중. */
+   좌우/상하 padding은 소비처가 공급. */
 .brand {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   min-height: var(--control-h-md);
-  /* padding-inline 없음 — Header가 `--sidebar-pad-x`로 좌우 축 담당. */
 }
 
 .brandSymbol {
@@ -161,26 +129,19 @@
   height: auto;
 }
 
-/* Profile ──────────────────────────────────────────────
-   IdentityButton의 preset 래퍼. Footer의 좌우/상하 padding(`--sidebar-pad-x/y`)은
-   그대로 유지 — 안쪽 Avatar/라벨이 Section 아이템과 동일 축에 정렬됨.
+/* Profile preset — Footer 안에 꽂히는 preset. 좌우/상하 padding은 소비처가 공급.
    IdentityButton 기본이 inline-flex라 Footer flex 안에서 콘텐츠 폭에 머무름 →
-   display: flex + width 100%로 가로만 끝까지 받게 하고, 세로는 늘리지 않음
-   (flex: 1 1 auto로 세로 당기면 Footer bottom padding이 Profile 안으로 흡수돼
-   아래 패딩이 "없어 보임"). */
+   display: flex + width 100%로 가로만 끝까지 받게 하고, 세로는 늘리지 않음. */
 .profile {
   display: flex;
   width: 100%;
 }
 
-/* Section ────────────────────────────────────────────
-   스크롤 트랙(.body) 안쪽의 "items" 레이어. 좌우 padding은 여기가 담당.
-   .body 자체에 두면 스크롤바가 padding 안쪽으로 밀려 좌/우 끝에 안 붙음. */
+/* Section preset — Body 안쪽에 꽂히는 preset. 좌우/상하 padding은 소비처가 공급. */
 .section {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
-  padding-inline: var(--sidebar-pad-x);
 }
 
 .sectionItems {
@@ -190,11 +151,12 @@
 }
 
 /* Separator ──────────────────────────────────────────
-   스크롤 트랙(.body) 바로 아래 자식. section의 padding-inline과 폭 맞추기 위해
-   같은 inline padding을 margin으로 복제 — 라인은 아이템과 좌/우 정렬. */
+   기본은 full-bleed(좌우 가장자리까지). 소비처가 inset이 필요하면
+   `--separator-inset-x` 토큰 override. */
 .separator {
   height: var(--hairline);
-  margin: var(--space-1) var(--sidebar-pad-x);
+  margin-block: var(--space-1);
+  margin-inline: var(--separator-inset-x, 0);
   background: var(--border);
 }
 

package/assets/components/Sidebar/Sidebar.tsx

@@ -61,7 +61,11 @@ const SidebarRoot = forwardRef<HTMLElement, SidebarProps>(function SidebarRoot(
 /* Header ───────────────────────────────────────────── */
 function SidebarHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={[styles.header, className ?? ""].filter(Boolean).join(" ")} {...rest}>
+    <div
+      data-sidebar-slot="header"
+      className={[styles.header, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    >
       {children}
     </div>
   );
@@ -95,6 +99,7 @@ function SidebarBody({ children, className, ...rest }: HTMLAttributes<HTMLDivEle
   return (
     <div
       ref={ref}
+      data-sidebar-slot="body"
       className={[styles.body, className ?? ""].filter(Boolean).join(" ")}
       {...rest}
     >
@@ -116,7 +121,11 @@ export interface SidebarBrandProps extends HTMLAttributes<HTMLDivElement> {
 function SidebarBrand({ symbol, wordmark, className, ...rest }: SidebarBrandProps) {
   const { collapsed } = useSidebar();
   return (
-    <div className={[styles.brand, className ?? ""].filter(Boolean).join(" ")} {...rest}>
+    <div
+      data-sidebar-slot="brand"
+      className={[styles.brand, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    >
       <div className={styles.brandSymbol}>{symbol}</div>
       {!collapsed && wordmark && (
         <div className={styles.brandWordmark}>{wordmark}</div>
@@ -132,6 +141,7 @@ function SidebarFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivE
   const { bodyOverflow } = useSidebar();
   return (
     <div
+      data-sidebar-slot="footer"
       className={[styles.footer, className ?? ""].filter(Boolean).join(" ")}
       data-overflow={bodyOverflow || undefined}
       {...rest}
@@ -177,6 +187,7 @@ function SidebarProfile({
       className={[styles.profile, className ?? ""].filter(Boolean).join(" ")}
       aria-label={collapsed ? name : undefined}
       onClick={onClick}
+      data-sidebar-slot="profile"
     />
   );
 }
@@ -191,6 +202,7 @@ function SidebarSection({ title, className, children, ...rest }: SidebarSectionP
   const { collapsed } = useSidebar();
   return (
     <div
+      data-sidebar-slot="section"
       className={[styles.section, className ?? ""].filter(Boolean).join(" ")}
       role="group"
       aria-label={title}
@@ -210,6 +222,7 @@ function SidebarSection({ title, className, children, ...rest }: SidebarSectionP
 function SidebarSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
+      data-sidebar-slot="separator"
       role="separator"
       className={[styles.separator, className ?? ""].filter(Boolean).join(" ")}
       {...rest}

package/assets/components/_utils.css

@@ -17,3 +17,108 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* ── emerge — 앵커(트리거)에서 튀어나오는 등장 ──────────────
+   overlay(Tooltip/Popover/Dropdown/Menu 등)가 data-side 값에 따라
+   "버튼에서 멀어지는 방향으로" 슬라이드 + 스케일 인.
+   Radix의 --radix-*-content-transform-origin과 결합해 앵커 엣지에서 자라남.
+   컴포넌트가 아래 클래스를 붙이거나, [data-state="open"][data-side] 셀렉터로 직접 매칭. */
+@keyframes m-emerge-from-top {
+  from { opacity: 0; transform: translateY(calc(-4px * var(--motion-distance-scale))) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes m-emerge-from-bottom {
+  from { opacity: 0; transform: translateY(calc(4px * var(--motion-distance-scale))) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes m-emerge-from-left {
+  from { opacity: 0; transform: translateX(calc(-4px * var(--motion-distance-scale))) scale(0.96); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+@keyframes m-emerge-from-right {
+  from { opacity: 0; transform: translateX(calc(4px * var(--motion-distance-scale))) scale(0.96); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+.m-emerge-from-top    { animation: m-emerge-from-top    var(--duration-fast) var(--ease-out); }
+.m-emerge-from-bottom { animation: m-emerge-from-bottom var(--duration-fast) var(--ease-out); }
+.m-emerge-from-left   { animation: m-emerge-from-left   var(--duration-fast) var(--ease-out); }
+.m-emerge-from-right  { animation: m-emerge-from-right  var(--duration-fast) var(--ease-out); }
+
+/* ── recede — emerge의 대칭 프리미티브. 앵커 쪽으로 살짝 물러나며 사라짐 ──
+   overlay 닫힘용. 이동량은 emerge의 절반(2px) — 닫힘은 짧고 담백하게. */
+@keyframes m-recede-to-top {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(calc(-2px * var(--motion-distance-scale))) scale(0.98); }
+}
+@keyframes m-recede-to-bottom {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(calc(2px * var(--motion-distance-scale))) scale(0.98); }
+}
+@keyframes m-recede-to-left {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(calc(-2px * var(--motion-distance-scale))) scale(0.98); }
+}
+@keyframes m-recede-to-right {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(calc(2px * var(--motion-distance-scale))) scale(0.98); }
+}
+.m-recede-to-top    { animation: m-recede-to-top    var(--duration-fast) var(--ease-in); }
+.m-recede-to-bottom { animation: m-recede-to-bottom var(--duration-fast) var(--ease-in); }
+.m-recede-to-left   { animation: m-recede-to-left   var(--duration-fast) var(--ease-in); }
+.m-recede-to-right  { animation: m-recede-to-right  var(--duration-fast) var(--ease-in); }
+
+/* ── m-float — 플로팅 서페이스(오버레이·팝오버·툴팁·메뉴·셀렉트·데이트픽커…) 공통 in/out ──
+   원칙: "떠오르는 표면"은 항상 이 유틸 하나로 등장·퇴장한다. 컴포넌트마다 다른 애니메이션 규칙을
+   만들지 말고, 반드시 Radix Content(또는 그 상응 요소)의 className에 "m-float"을 추가한다.
+
+   Radix는 오버레이 Content에 자동으로 다음 attribute를 부여한다:
+     data-state = "open" | "closed" | "delayed-open"  (Tooltip은 hover 지연으로 delayed-open 사용)
+     data-side  = "top" | "bottom" | "left" | "right"  (position=popper일 때)
+   → 이 유틸은 두 attribute 조합만으로 매칭되므로 컴포넌트 CSS Module 안에서 반복 정의할 필요 없음.
+
+   왜 전역 클래스인가:
+   Turbopack의 CSS Modules는 `animation: <name>` shorthand의 keyframe identifier를 로컬 스코프로
+   rewrite한다(예: m-emerge-from-top → xItvXq__m-emerge-from-top). 우회하려면 컴포넌트마다
+   `--anim` 변수로 이름을 넘기는 보일러플레이트가 필요했다. 규칙 자체를 _utils.css로 올리면
+   스코핑을 아예 회피할 수 있어 각 컴포넌트는 클래스 문자열 하나만 붙이면 된다.
+
+   왜 globals.css가 아니라 _utils.css인가:
+   globals.css는 로컬 Next 앱 전용이고 ctds npm 패키지엔 번들되지 않는다. 반면 _utils.css는
+   tokens.css가 import하고 tokens.css는 소비자 globals.css에 자동 패치로 끼워지므로,
+   `ctds init`로 설치한 소비자 앱에서도 .m-float이 그대로 로드된다.
+
+   방향 규칙:
+     - open  → 앵커 반대편에서 자라남 (data-side=bottom → 트리거 아래 → 위쪽에서 내려옴)
+     - close → 앵커 쪽으로 되감김     (data-side=bottom → 위쪽으로 물러남)
+   시간·곡선(모두 Motion 축 토큰 경유):
+     - open  : --duration-base + --ease-emphasized  (정착감 있는 등장)
+     - close : --duration-fast + --ease-in          (담백한 이탈, 이동량 절반) */
+.m-float {
+  will-change: transform, opacity;
+}
+.m-float[data-state="open"][data-side="top"],
+.m-float[data-state="delayed-open"][data-side="top"]    { animation: m-emerge-from-bottom var(--duration-base) var(--ease-emphasized); }
+.m-float[data-state="open"][data-side="bottom"],
+.m-float[data-state="delayed-open"][data-side="bottom"] { animation: m-emerge-from-top    var(--duration-base) var(--ease-emphasized); }
+.m-float[data-state="open"][data-side="left"],
+.m-float[data-state="delayed-open"][data-side="left"]   { animation: m-emerge-from-right  var(--duration-base) var(--ease-emphasized); }
+.m-float[data-state="open"][data-side="right"],
+.m-float[data-state="delayed-open"][data-side="right"]  { animation: m-emerge-from-left   var(--duration-base) var(--ease-emphasized); }
+
+.m-float[data-state="closed"][data-side="top"]    { animation: m-recede-to-bottom var(--duration-fast) var(--ease-in); }
+.m-float[data-state="closed"][data-side="bottom"] { animation: m-recede-to-top    var(--duration-fast) var(--ease-in); }
+.m-float[data-state="closed"][data-side="left"]   { animation: m-recede-to-right  var(--duration-fast) var(--ease-in); }
+.m-float[data-state="closed"][data-side="right"]  { animation: m-recede-to-left   var(--duration-fast) var(--ease-in); }
+
+/* data-side가 없는 경우(Tooltip이 아직 위치 계산 전, 또는 popper가 아닌 경우) 폴백: 페이드+살짝 스케일 */
+.m-float[data-state="open"]:not([data-side]),
+.m-float[data-state="delayed-open"]:not([data-side]) {
+  animation: m-emerge-from-top var(--duration-base) var(--ease-emphasized);
+}
+.m-float[data-state="closed"]:not([data-side]) {
+  animation: m-recede-to-top var(--duration-fast) var(--ease-in);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .m-float { animation: none !important; }
+}

package/assets/prompts/components/breadcrumb.md

@@ -11,6 +11,7 @@
 - **URL 계층이 그대로 라벨** — 사이트맵의 실제 위치를 그대로 반영. 계층에 없는 임의 카테고리를 만들어 붙이지 않는다.
 - **모바일에서는 축약** — 첫 항목 + `Breadcrumb.Ellipsis` + 마지막 두 항목. 6개 이상이면 축약이 필수.
 - **Next.js `<Link>` 등 라우터**는 `<Breadcrumb.Link asChild>`로 감싼다. 스타일 유지한 채 SPA 네비게이션 위임.
+- **형제 전환이 필요한 segment**는 `Breadcrumb.Menu`로. ▾ caret이 붙은 트리거를 눌러 같은 레벨의 다른 페이지(프로젝트·워크스페이스·브랜치 등)로 바로 이동. 현재 페이지 자리에 쓸 때는 `active` 필수 — `aria-current="page"`와 `--fg-strong` 톤을 자동으로 맞춘다.
 - **접근성**: 루트가 자동으로 `<nav aria-label="Breadcrumb">` + `<ol>`, 마지막 항목에 `aria-current="page"`를 붙인다. separator는 `aria-hidden`.
 
 ### Don't
@@ -20,6 +21,7 @@
 - **활성 색을 `--primary`로 덮지 않는다** — 활성은 `--fg-strong`(무채). 브랜드 컬러를 여기 쓰면 CTA와 위계가 충돌.
 - **아이콘 남발 금지** — 첫 항목 외에 아이콘 붙이면 라벨 스캔이 무너진다.
 - **draggable/sortable 만들지 않는다** — 계층은 URL이 정한다. UI에서 조작할 대상이 아님.
+- **`Breadcrumb.Menu`를 탭/필터로 쓰지 않는다** — Menu는 "같은 레벨의 다른 페이지로 URL 이동" 전용. 같은 페이지 안에서 뷰만 바꾸는 건 [[components/tabs]].
 
 ### Fallback
 - 라우터 결정 애매하면 기본 `<a href>` 렌더. 프레임워크 붙일 때 `asChild`로 교체.
@@ -41,10 +43,15 @@
   separator={<Icon name="caret-right" />}   // default: caret-right icon
 >
   <Breadcrumb.Link href="/" leftIcon={<Icon name="house" />}>Home</Breadcrumb.Link>
-  <Breadcrumb.Link asChild>
-    <Link href="/components">Components</Link>
-  </Breadcrumb.Link>
-  <Breadcrumb.Ellipsis />
+  <Breadcrumb.Menu
+    items={[
+      { label: "Alpha", href: "/p/alpha", active: true },
+      { label: "Beta",  href: "/p/beta" },
+    ]}
+  >
+    Alpha
+  </Breadcrumb.Menu>
+  <Breadcrumb.Ellipsis items={[...]} />
   <Breadcrumb.Current>Breadcrumb</Breadcrumb.Current>
 </Breadcrumb>
 ```
@@ -55,6 +62,7 @@
 | `Breadcrumb.Link` | 상위 계층 링크. Button xs · ghost 톤. hover 시 `--hover` 표면. | 마지막 항목엔 쓰지 않음. |
 | `Breadcrumb.Current` | 현재 페이지. `--fg-strong` 텍스트, hover 반응 없음. | `href`·`onClick` 붙이지 않음. |
 | `Breadcrumb.Ellipsis` | 축약 트리거. 항상 클릭 가능. [[components/select]]와 동일한 팝오버 표면으로 숨긴 항목 리스트를 연다. | `items`에 5개 이상 넣지 않는다 — 그러면 축약이 아니라 실질적 서브메뉴가 됨. 정적(클릭 불가) 마커는 지원하지 않는다. |
+| `Breadcrumb.Menu` | 형제 전환 트리거. ▾ caret이 붙은 segment를 눌러 같은 레벨 페이지로 이동. `active=true`로 현재 페이지 자리에도 쓸 수 있다 (aria-current + fg-strong 자동). | 아이콘 단독 모드 지원 안 함 — 트리거 라벨 필수. 탭 전환용으로 쓰지 않는다. |
 
 ### 조합 예시
 ```tsx
@@ -74,4 +82,36 @@
   </Breadcrumb.Link>
   <Breadcrumb.Current>Breadcrumb</Breadcrumb.Current>
 </Breadcrumb>
+
+// 프로젝트 스위처 — Menu로 형제 전환
+<Breadcrumb aria-label="프로젝트 경로">
+  <Breadcrumb.Link asChild leftIcon={<Icon name="user" />}>
+    <Link href="/">Workspace</Link>
+  </Breadcrumb.Link>
+  <Breadcrumb.Menu
+    items={[
+      { label: "Alpha", href: "/p/alpha", active: true },
+      { label: "Beta",  href: "/p/beta" },
+      { label: "Gamma", href: "/p/gamma" },
+    ]}
+  >
+    Alpha
+  </Breadcrumb.Menu>
+  <Breadcrumb.Current>Settings</Breadcrumb.Current>
+</Breadcrumb>
+
+// 현재 페이지 자체가 메뉴 — active=true로 aria-current="page" 유지
+<Breadcrumb aria-label="브랜치 경로">
+  <Breadcrumb.Link href="/">Repo</Breadcrumb.Link>
+  <Breadcrumb.Menu
+    active
+    items={[
+      { label: "main",    onSelect: () => switchBranch("main"), active: true },
+      { label: "develop", onSelect: () => switchBranch("develop") },
+      { label: "staging", onSelect: () => switchBranch("staging") },
+    ]}
+  >
+    main
+  </Breadcrumb.Menu>
+</Breadcrumb>
 ```