@conscience-technology/ctds 0.4.4 → 0.4.5

package/assets/components/ChatInput/ChatInput.module.css

@@ -125,7 +125,7 @@
   box-sizing: border-box;
 }
 .multiField::placeholder {
-  color: var(--fg-muted);
+  color: var(--fg-subtle);
 }
 /* attachments/quotation 아래에선 상단 padding 압축 (이미 attachments/quotation이 상단 책임). */
 .attachments + .body .multiField,
@@ -200,7 +200,7 @@
   box-sizing: border-box;
 }
 .singleField::placeholder {
-  color: var(--fg-muted);
+  color: var(--fg-subtle);
 }
 
 /* Attach 버튼 */
@@ -287,14 +287,15 @@
   padding: var(--space-1_5);
 }
 
-/* Send — Shape 축 반응. Button sm과 동일한 radius. */
+/* Send — Shape 축 반응. Button sm과 동일한 radius.
+   variant는 solid(기본)/ghost/soft 세 톤. 비활성→활성 전이는 색만 바뀜. */
 .sendBtn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 0;
-  background: var(--bg-subtle);
+  background: transparent;
   color: var(--fg-muted);
   border-radius: var(--radius-sm);
   cursor: pointer;
@@ -303,13 +304,6 @@
   flex: 0 0 auto;
   transition: var(--transition-colors);
 }
-.sendBtn[data-active] {
-  background: var(--primary);
-  color: var(--bg);
-}
-.sendBtn:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .sendBtn:focus-visible {
   outline: none;
   box-shadow: var(--ring);
@@ -317,15 +311,61 @@
 .sendBtn:disabled {
   cursor: not-allowed;
 }
-/* 비활성(= 입력 비어있어 보낼 수 없음) 상태 아이콘을 연하게.
-   data-active일 땐 primary 배경이라 색 유지. */
-.sendBtn:not([data-active]) {
+
+/* solid — 현재 기본. 비활성=bg-subtle, 활성=primary + 흰 아이콘. */
+.sendBtn[data-variant="solid"] {
+  background: var(--bg-subtle);
+}
+.sendBtn[data-variant="solid"]:not([data-active]) {
   color: var(--fg-disabled);
 }
+.sendBtn[data-variant="solid"][data-active] {
+  background: var(--primary);
+  color: var(--bg);
+}
+.sendBtn[data-variant="solid"]:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* ghost — 투명. 아이콘만 보임. 비활성=fg-disabled, 활성=fg-strong.
+   hover에서만 bg-subtle이 살짝 들어와 클릭 가능성 신호. */
+.sendBtn[data-variant="ghost"] {
+  background: transparent;
+}
+.sendBtn[data-variant="ghost"]:not([data-active]) {
+  color: var(--fg-disabled);
+}
+.sendBtn[data-variant="ghost"][data-active] {
+  color: var(--fg-strong);
+}
+.sendBtn[data-variant="ghost"]:hover:not(:disabled) {
+  background: var(--bg-subtle);
+}
+
+/* soft — 늘 은은한 bg-subtle. 활성이어도 색 강조 없이 fg만 진해짐.
+   조용한 자리(사이드바 바닥 flush 등)에서 send 존재감을 낮추고 싶을 때. */
+.sendBtn[data-variant="soft"] {
+  background: var(--bg-subtle);
+}
+.sendBtn[data-variant="soft"]:not([data-active]) {
+  color: var(--fg-disabled);
+}
+.sendBtn[data-variant="soft"][data-active] {
+  color: var(--fg-strong);
+}
+.sendBtn[data-variant="soft"]:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
 .sendIcon {
   width: 44%;
   height: 44%;
 }
+/* return(↵) 아이콘은 화살표가 작게 그려져 있어 조금 키워야 눈에 들어옴. */
+.sendBtn[data-icon="return"] .sendIcon {
+  width: 60%;
+  height: 60%;
+}
 
 /* 파일 input 숨김 */
 .hiddenFile {

package/assets/components/ChatInput/ChatInput.tsx

@@ -17,11 +17,13 @@ import { AttachmentThumb } from "@/components/ctds/AttachmentThumb";
 import { DropdownMenu } from "@/components/ctds/DropdownMenu";
 import { QuotationBar } from "@/components/ctds/QuotationBar";
 import { ModelSelector } from "./ModelSelector";
-import { SendButton } from "./SendButton";
+import { SendButton, type SendButtonIcon, type SendButtonVariant } from "./SendButton";
 import styles from "./ChatInput.module.css";
 
 export type ChatInputShape = "multi" | "single";
 export type ChatInputVariant = "framed" | "flush";
+export type ChatInputSendVariant = SendButtonVariant;
+export type ChatInputSendIcon = SendButtonIcon;
 
 /** 첨부 공용 타입 — ChatInput·Message 양쪽에서 재사용. */
 export interface ChatAttachmentImage {
@@ -72,6 +74,11 @@ export interface ChatInputProps {
   selectedModel?: string;
   onSelectModel?: (id: string) => void;
 
+  /** Send 버튼 톤. solid(기본)=primary bg + 흰 아이콘, ghost=투명·아이콘만, soft=bg-subtle 은은. */
+  sendVariant?: ChatInputSendVariant;
+  /** Send 아이콘 모양. 스트리밍 중엔 자동으로 square. */
+  sendIcon?: ChatInputSendIcon;
+
   placeholder?: string;
   disabled?: boolean;
   /** multiLine일 때 textarea max rows. 넘으면 세로 스크롤. */
@@ -101,6 +108,8 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
       models,
       selectedModel,
       onSelectModel,
+      sendVariant = "solid",
+      sendIcon = "arrow-up",
       placeholder = "Ask me anything…",
       disabled = false,
       maxRows = 8,
@@ -233,6 +242,8 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
           streaming={showStop}
           disabled={disabled && !showStop}
           onClick={handleSendClick}
+          variant={sendVariant}
+          icon={sendIcon}
         />
       </div>
     );

package/assets/components/ChatInput/SendButton.tsx

@@ -3,10 +3,15 @@
 import type { MouseEvent } from "react";
 import {
   ArrowUp as PhArrowUp,
+  ArrowElbowDownLeft as PhReturn,
+  PaperPlaneTilt as PhPaperPlane,
   Square as PhSquare,
 } from "@phosphor-icons/react";
 import styles from "./ChatInput.module.css";
 
+export type SendButtonVariant = "solid" | "ghost" | "soft";
+export type SendButtonIcon = "arrow-up" | "return" | "paper-plane";
+
 interface SendButtonProps {
   /** 입력에 텍스트/첨부가 있어 send 가능한지. */
   active: boolean;
@@ -14,6 +19,10 @@ interface SendButtonProps {
   streaming?: boolean;
   disabled?: boolean;
   onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  /** 시각 톤. solid=primary bg(기본), ghost=투명 아이콘만, soft=bg-subtle 은은 */
+  variant?: SendButtonVariant;
+  /** 전송 아이콘 모양. 스트리밍 중엔 자동으로 square로 교체 */
+  icon?: SendButtonIcon;
 }
 
 export function SendButton({
@@ -21,11 +30,19 @@ export function SendButton({
   streaming = false,
   disabled,
   onClick,
+  variant = "solid",
+  icon = "arrow-up",
 }: SendButtonProps) {
+  const SendIconCmp =
+    icon === "return" ? PhReturn : icon === "paper-plane" ? PhPaperPlane : PhArrowUp;
+  const iconWeight = icon === "return" ? "regular" : "bold";
+
   return (
     <button
       type="button"
       className={styles.sendBtn}
+      data-variant={variant}
+      data-icon={icon}
       data-active={active || streaming || undefined}
       disabled={disabled}
       onClick={onClick}
@@ -34,7 +51,7 @@ export function SendButton({
       {streaming ? (
         <PhSquare className={styles.sendIcon} weight="fill" />
       ) : (
-        <PhArrowUp className={styles.sendIcon} weight="bold" />
+        <SendIconCmp className={styles.sendIcon} weight={iconWeight} />
       )}
     </button>
   );

package/assets/components/ChatInput/index.ts

@@ -3,6 +3,8 @@ export type {
   ChatInputProps,
   ChatInputShape,
   ChatInputVariant,
+  ChatInputSendVariant,
+  ChatInputSendIcon,
   ChatInputModel,
   ChatAttachment,
   ChatAttachmentImage,

package/assets/components/TabStrip/TabStrip.module.css

@@ -0,0 +1,358 @@
+/* TabStrip — 브라우저/문서 탭 (Chrome · Figma · VSCode 식).
+   각 탭 = 독립 문서. 섹션 전환 Tabs와 역할 분리.
+
+   활성 표시 = bg-muted 상시 배경 (pill 아님, hover 색이 그대로 lock).
+   비활성 탭 = 투명 배경, hover 시 bg-muted.
+
+   축 반응:
+   ─ Density → --control-h-* (탭 높이), --space-scale (gap/padding)
+   ─ Shape   → 탭 radius (--radius-sm · soft에서도 과하지 않게)
+   ─ Motion  → hover·active 전환 duration/easing
+*/
+
+/* Root ─────────────────────────────────────────────────────── */
+.root {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  gap: var(--space-0_5);
+}
+
+.track {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-0_5);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.track::-webkit-scrollbar {
+  display: none;
+}
+
+/* Sizes — Button·Tabs 계열과 동일한 --control-h-* 기반 */
+.size_sm .tab { height: var(--control-h-sm); }
+.size_md .tab { height: var(--control-h-md); }
+
+/* Tab ──────────────────────────────────────────────────────── */
+.tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1_5);
+  padding-inline: var(--space-2_5);
+  border-radius: var(--radius-sm);
+  color: var(--fg-muted);
+  background: transparent;
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  letter-spacing: var(--label-tracking);
+  line-height: var(--lh-tight);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 20ch;
+  overflow: hidden;
+  transition:
+    background var(--duration-slow) var(--ease-out),
+    color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+.size_sm .tab {
+  font-size: var(--label-sm-size);
+  padding-inline: var(--space-2);
+  gap: var(--space-1);
+  max-width: 20ch;
+}
+.size_md .tab { font-size: var(--label-md-size); }
+
+.tab:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  position: relative;
+  z-index: var(--z-docked);
+}
+.tab[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.tab:hover:not([data-disabled="true"]) {
+  background: var(--bg-muted);
+  color: var(--fg);
+}
+.tab[data-state="active"] {
+  background: var(--bg-muted);
+  color: var(--fg-strong);
+}
+
+/* Leading slot — Icon·사진·svg 전부 ReactNode로 허용. 톤만 조절. */
+.leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.75;
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+.leading > svg,
+.leading > img {
+  display: block;
+}
+.tab:hover:not([data-disabled="true"]) .leading,
+.tab[data-state="active"] .leading {
+  opacity: 1;
+}
+
+/* Label — overflow 숨김 컨테이너. 안쪽 .labelInner가 marquee 대상.
+   오른쪽 edge fade는 closeFade(hover 시)와 labelFade(기본)가 담당. */
+.label {
+  display: block;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+/* 기본 상태 (hover 아님)에서 라벨 오른쪽 edge를 bg로 자연스럽게 녹임.
+   closable·non-closable 모두 적용. 활성/hover가 되면 closeFade가 덮으니 거의 안 보임. */
+.labelFade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--space-6);
+  pointer-events: none;
+  background: linear-gradient(to right, transparent 0%, var(--bg) 100%);
+  z-index: var(--z-base);
+}
+.tab[data-state="active"] .labelFade,
+.tab:hover:not([data-disabled="true"]) .labelFade {
+  background: linear-gradient(to right, transparent 0%, var(--bg-muted) 100%);
+}
+
+.labelInner {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  will-change: transform;
+}
+
+.labelPrimary {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* Marquee — 전광판 스타일 loop.
+   라벨이 overflow되는 탭은 .labelInner가 "라벨 + gap + 라벨" 복제본을 가진다
+   (React에서 data-overflow="true" 세팅 시 복제본이 visible). 첫 번째 라벨이
+   왼쪽으로 완전히 빠지는 시점에 두 번째 라벨이 translateX(0) 자리에 자연스레
+   이어 받아 끊김 없이 반복된다.
+
+   --marquee-shift (px 수치)와 --marquee-duration (CSS time)은 React에서
+   ResizeObserver로 측정해 inline style로 설정. 짧은 라벨은 overflow 안 되므로
+   data-overflow가 안 붙고, keyframe도 적용되지 않는다. */
+.tab[data-overflow="true"]:hover:not([data-disabled="true"]) .labelInner {
+  animation: marquee-loop var(--marquee-duration, var(--duration-slower)) var(--ease-linear) var(--marquee-delay, var(--duration-slower)) infinite;
+}
+.tab:not(:hover) .labelInner,
+.tab:not([data-overflow="true"]) .labelInner {
+  animation: none;
+  transform: translateX(0);
+}
+
+@keyframes marquee-loop {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(var(--marquee-shift, 0) * -1px));
+  }
+}
+
+/* 복제본 — overflow 시에만 보이고, 평상시엔 숨겨 레이아웃·측정에 영향 없음. */
+.labelDupe {
+  display: inline-block;
+  padding-inline-start: var(--space-6);
+  visibility: hidden;
+}
+.tab[data-overflow="true"] .labelDupe {
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab[data-overflow="true"]:hover:not([data-disabled="true"]) .labelInner {
+    animation: none;
+  }
+}
+
+/* Close button — absolute로 오른쪽에 띄워 라벨 위를 그라데이션으로 덮으며 등장.
+   활성·hover 아닐 땐 opacity 0, 그라데이션 fade도 opacity 0.
+
+   폭 구성: 왼쪽은 fade 구간, 오른쪽은 x 뒤를 가려주는 solid 구간.
+   solid 구간이 없으면 x 뒤로 흐르는 라벨이 비쳐 보임. */
+.closeFade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: calc(var(--control-h-xs) + var(--space-6));
+  pointer-events: none;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--bg-muted) 50%,
+    var(--bg-muted) 100%
+  );
+  opacity: 0;
+  transition: opacity var(--duration-slow) var(--ease-in-out);
+  z-index: var(--z-raise);
+}
+
+.closeButton {
+  position: absolute;
+  top: 50%;
+  right: var(--space-1);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--control-h-xs);
+  height: var(--control-h-xs);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out),
+    opacity var(--duration-slow) var(--ease-in-out);
+  z-index: var(--z-docked);
+}
+.tab:hover:not([data-disabled="true"]) .closeButton,
+.tab:focus-within .closeButton {
+  opacity: 1;
+}
+.tab:hover:not([data-disabled="true"]) .closeFade,
+.tab:focus-within .closeFade {
+  opacity: 1;
+}
+.closeButton:hover {
+  background: var(--hover);
+  color: var(--fg-strong);
+}
+.closeButton:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--ring-shadow);
+}
+
+/* Trailing slot — track 바깥 오른쪽. 소비처가 ReactNode로 자유 조립 (+·...·없음).
+   TabStrip 전체 hover·focus-within에서만 fade-in. 공간은 늘 차지해 흔들림 없음. */
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity var(--duration-slow) var(--ease-in-out);
+}
+.root:hover .trailing,
+.root:focus-within .trailing {
+  opacity: 1;
+}
+
+/* ───────────────────────────────────────────────────────────
+   Variants — ghost(default) · soft · segmented
+   기본 .tab 규칙은 ghost 기준. 여기선 variant별 override만.
+*/
+
+/* Soft ──────────────────────────────────────────────────────
+   모든 탭에 연한 bg 상시. 버튼처럼 "모양이 미리 잡힌" 느낌.
+   비활성=bg-subtle · hover=hover mix(subtle→muted 사이) · 활성=bg-muted. */
+.variant_soft .track {
+  gap: var(--space-1);
+}
+.variant_soft .tab {
+  background: var(--bg-subtle);
+}
+.variant_soft .tab:hover:not([data-disabled="true"]) {
+  background: color-mix(in oklab, var(--bg-subtle) 50%, var(--bg-muted) 50%);
+  color: var(--fg);
+}
+.variant_soft .tab[data-state="active"] {
+  background: var(--bg-muted);
+  color: var(--fg-strong);
+}
+/* labelFade: 비활성 상태는 bg-subtle로 녹여야 자연스러움. */
+.variant_soft .labelFade {
+  background: linear-gradient(to right, transparent 0%, var(--bg-subtle) 100%);
+}
+.variant_soft .tab:hover:not([data-disabled="true"]) .labelFade {
+  background: linear-gradient(to right, transparent 0%, color-mix(in oklab, var(--bg-subtle) 50%, var(--bg-muted) 50%) 100%);
+}
+
+/* Segmented ──────────────────────────────────────────────────
+   Chrome·Figma 식 — 탭은 네모칸, 사이에 세로 hairline. 활성·hover 탭의
+   왼쪽 hairline, 그리고 활성·hover 탭 오른쪽 이웃 탭의 왼쪽 hairline을
+   숨겨 "구분선이 활성 탭에 닿지 않게" 처리.
+   gap은 아주 작게(--space-0_5) 둬 hairline이 숨을 때 탭이 완전히 붙어보이지 않게. */
+.variant_segmented .track {
+  gap: var(--space-0_5);
+}
+.variant_segmented .tab {
+  border-radius: var(--radius-xs);
+  position: relative;
+}
+.variant_segmented .tab::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--hairline);
+  height: calc(100% - var(--space-3));
+  background: var(--border);
+  transition: opacity var(--duration-slow) var(--ease-out);
+}
+/* 첫 탭은 왼쪽 hairline 없음. */
+.variant_segmented .tab:first-child::before {
+  opacity: 0;
+}
+/* 활성·hover 탭 자신의 왼쪽 hairline 숨김. */
+.variant_segmented .tab:hover:not([data-disabled="true"])::before,
+.variant_segmented .tab[data-state="active"]::before {
+  opacity: 0;
+}
+/* 활성·hover 탭 바로 오른쪽 이웃의 왼쪽 hairline도 숨김 (경계가 활성 영역에 안 닿게). */
+.variant_segmented .tab:hover:not([data-disabled="true"]) + .tab::before,
+.variant_segmented .tab[data-state="active"] + .tab::before {
+  opacity: 0;
+}
+
+/* ───────────────────────────────────────────────────────────
+   Trailing slot variant별 처리
+   소비처가 넣는 자식 요소(IconButton, Button, 등) 자체 시각은 건드리지 않고,
+   wrapper 쪽에서 간격·디바이더만 담당.
+*/
+.variant_segmented {
+  gap: var(--space-2);
+}
+.variant_segmented .trailing {
+  position: relative;
+  padding-inline-start: var(--space-2);
+}
+.variant_segmented .trailing::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--hairline);
+  height: calc(100% - var(--space-3));
+  background: var(--border);
+}

package/assets/components/TabStrip/TabStrip.tsx

@@ -0,0 +1,396 @@
+"use client";
+
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { Icon } from "../Icon/Icon";
+import styles from "./TabStrip.module.css";
+
+export type TabStripSize = "sm" | "md";
+export type TabStripVariant = "ghost" | "soft" | "segmented";
+
+type TabStripContextValue = {
+  value: string | undefined;
+  setValue: (v: string) => void;
+  size: TabStripSize;
+  variant: TabStripVariant;
+  baseId: string;
+  registerTab: (value: string, node: HTMLDivElement | null) => void;
+  focusNext: (currentValue: string, dir: 1 | -1) => void;
+  focusEdge: (edge: "first" | "last") => void;
+};
+
+const TabStripContext = createContext<TabStripContextValue | null>(null);
+
+function useTabStripContext(component: string): TabStripContextValue {
+  const ctx = useContext(TabStripContext);
+  if (!ctx) {
+    throw new Error(`${component} must be rendered inside <TabStrip>`);
+  }
+  return ctx;
+}
+
+const ICON_SIZE: Record<TabStripSize, number> = {
+  sm: 14,
+  md: 16,
+};
+
+const CLOSE_ICON_SIZE: Record<TabStripSize, number> = {
+  sm: 12,
+  md: 14,
+};
+
+function sizedIcon(node: ReactNode, size: number): ReactNode {
+  if (!isValidElement(node)) return node;
+  const el = node as ReactElement<{ size?: number | string }>;
+  if (el.props.size !== undefined) return el;
+  return cloneElement(el, { size });
+}
+
+// ────────────────────────────────────────────────────────────
+// Root
+// ────────────────────────────────────────────────────────────
+
+export interface TabStripProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  size?: TabStripSize;
+  /** 시각 variant.
+   *  - `ghost` (default): 투명 + hover·active에서 bg-muted. 가장 가볍고 shell chrome 기본.
+   *  - `soft`: 연한 bg 상시 (버튼처럼 모양이 잡혀 있고, 선택이 조금 더 진함).
+   *  - `segmented`: 브라우저처럼 탭 사이 세로 hairline으로 칸 구분. */
+  variant?: TabStripVariant;
+  /** controlled */
+  value?: string;
+  /** uncontrolled 초기값 */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 탭 묶음 오른쪽 slot. "+" 버튼, "..." 더보기, 또는 아무것도 안 넣을 수 있음.
+   *  TabStrip hover·focus-within 시에만 자연스럽게 fade-in. */
+  trailing?: ReactNode;
+  children: ReactNode;
+}
+
+const Root = forwardRef<HTMLDivElement, TabStripProps>(
+  (
+    {
+      className,
+      size = "md",
+      variant = "ghost",
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      trailing,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const baseId = useId();
+    const [uncontrolled, setUncontrolled] = useState<string | undefined>(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolled;
+
+    const tabsRef = useRef<Map<string, HTMLDivElement>>(new Map());
+
+    const registerTab = useCallback((v: string, node: HTMLDivElement | null) => {
+      if (node) tabsRef.current.set(v, node);
+      else tabsRef.current.delete(v);
+    }, []);
+
+    const setValue = useCallback(
+      (v: string) => {
+        if (!isControlled) setUncontrolled(v);
+        onValueChange?.(v);
+      },
+      [isControlled, onValueChange],
+    );
+
+    const orderedTabs = useCallback(() => {
+      const nodes = Array.from(tabsRef.current.values());
+      nodes.sort((a, b) =>
+        a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
+      );
+      return nodes;
+    }, []);
+
+    const focusNext = useCallback(
+      (currentValue: string, dir: 1 | -1) => {
+        const nodes = orderedTabs();
+        if (nodes.length === 0) return;
+        const idx = nodes.findIndex((n) => n.dataset.value === currentValue);
+        if (idx === -1) return;
+        const nextIdx = (idx + dir + nodes.length) % nodes.length;
+        nodes[nextIdx].focus();
+      },
+      [orderedTabs],
+    );
+
+    const focusEdge = useCallback(
+      (edge: "first" | "last") => {
+        const nodes = orderedTabs();
+        if (nodes.length === 0) return;
+        (edge === "first" ? nodes[0] : nodes[nodes.length - 1]).focus();
+      },
+      [orderedTabs],
+    );
+
+    const ctx = useMemo<TabStripContextValue>(
+      () => ({ value, setValue, size, variant, baseId, registerTab, focusNext, focusEdge }),
+      [value, setValue, size, variant, baseId, registerTab, focusNext, focusEdge],
+    );
+
+    const rootClass = [
+      styles.root,
+      styles[`size_${size}`],
+      styles[`variant_${variant}`],
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <TabStripContext.Provider value={ctx}>
+        <div
+          ref={ref}
+          className={rootClass}
+          data-size={size}
+          data-variant={variant}
+          role="tablist"
+          aria-orientation="horizontal"
+          {...rest}
+        >
+          <div className={styles.track}>{children}</div>
+          {trailing && <div className={styles.trailing}>{trailing}</div>}
+        </div>
+      </TabStripContext.Provider>
+    );
+  },
+);
+Root.displayName = "TabStrip";
+
+// ────────────────────────────────────────────────────────────
+// Tab
+// ────────────────────────────────────────────────────────────
+
+export interface TabStripTabProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onClick"> {
+  value: string;
+  /** 탭 왼쪽에 들어가는 요소. Icon, 사진(<img>), svg 뭐든 ReactNode. */
+  leadingIcon?: ReactNode;
+  /** true면 hover 시 x 버튼 노출, 클릭 시 onClose 호출. */
+  closable?: boolean;
+  onClose?: () => void;
+  /** 탭 라벨 클릭. */
+  onSelect?: () => void;
+  /** 닫기 버튼 aria-label (기본 "탭 닫기"). */
+  closeLabel?: string;
+  disabled?: boolean;
+}
+
+const Tab = forwardRef<HTMLDivElement, TabStripTabProps>(
+  (
+    {
+      className,
+      value,
+      leadingIcon,
+      closable,
+      onClose,
+      onSelect,
+      closeLabel = "탭 닫기",
+      disabled,
+      children,
+      onKeyDown,
+      ...rest
+    },
+    ref,
+  ) => {
+    const {
+      value: selected,
+      setValue,
+      size,
+      baseId,
+      registerTab,
+      focusNext,
+      focusEdge,
+    } = useTabStripContext("TabStrip.Tab");
+    const isActive = selected === value;
+
+    const setRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        registerTab(value, node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) (ref as { current: HTMLDivElement | null }).current = node;
+      },
+      [ref, registerTab, value],
+    );
+
+    const handleClick = () => {
+      if (disabled) return;
+      setValue(value);
+      onSelect?.();
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault();
+          focusNext(value, 1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          focusNext(value, -1);
+          break;
+        case "Home":
+          e.preventDefault();
+          focusEdge("first");
+          break;
+        case "End":
+          e.preventDefault();
+          focusEdge("last");
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          handleClick();
+          break;
+      }
+    };
+
+    const handleCloseClick = (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      onClose?.();
+    };
+
+    // Marquee loop (전광판) — 라벨 "본체 + gap + 복제본" 중 본체 폭만큼 왼쪽으로
+    // 흐르면 복제본이 자연스럽게 translateX(0) 자리에 와있어 끊김 없이 반복된다.
+    // 측정: 본체(.labelPrimary)의 offsetWidth + gap(--space-6 ≈ 24px, 토큰 반영).
+    // 짧은 라벨은 overflow 안 되므로 isOverflow=false → animation 미적용.
+    //
+    // 속도: 라벨 폭에 비례해 ~60px/sec. 긴 라벨도 꼴보기 좋게.
+    const labelOuterRef = useRef<HTMLSpanElement | null>(null);
+    const labelPrimaryRef = useRef<HTMLSpanElement | null>(null);
+    const [marquee, setMarquee] = useState<{
+      shift: number;
+      duration: string;
+      overflow: boolean;
+    } | null>(null);
+
+    useEffect(() => {
+      const outer = labelOuterRef.current;
+      const primary = labelPrimaryRef.current;
+      if (!outer || !primary) return;
+      const measure = () => {
+        const primaryWidth = primary.offsetWidth;
+        const outerWidth = outer.clientWidth;
+        const overflow = primaryWidth > outerWidth + 1; // 서브픽셀 여유
+        if (!overflow) {
+          setMarquee({ shift: 0, duration: "0ms", overflow: false });
+          return;
+        }
+        // gap은 CSS .labelDupe의 padding-inline-start(--space-6)와 맞춤 (≈24px).
+        const gap = 24;
+        const shift = primaryWidth + gap;
+        // 60px/sec 흐름. 1초당 60px 이동.
+        const duration = Math.round((shift / 60) * 1000);
+        setMarquee({ shift, duration: `${duration}ms`, overflow: true });
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(outer);
+      ro.observe(primary);
+      return () => ro.disconnect();
+    }, [children]);
+
+    const tabStyle: CSSProperties | undefined = marquee?.overflow
+      ? ({
+          "--marquee-shift": `${marquee.shift}`,
+          "--marquee-duration": marquee.duration,
+          "--marquee-delay": "500ms",
+        } as CSSProperties)
+      : undefined;
+
+    const cls = [styles.tab, className ?? ""].filter(Boolean).join(" ");
+
+    return (
+      <div
+        ref={setRef}
+        className={cls}
+        role="tab"
+        id={`${baseId}-tab-${value}`}
+        aria-selected={isActive}
+        aria-disabled={disabled || undefined}
+        tabIndex={isActive ? 0 : -1}
+        data-value={value}
+        data-state={isActive ? "active" : "inactive"}
+        data-disabled={disabled ? "true" : undefined}
+        data-closable={closable ? "true" : undefined}
+        data-overflow={marquee?.overflow ? "true" : undefined}
+        style={tabStyle}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        {leadingIcon && (
+          <span className={styles.leading} aria-hidden>
+            {sizedIcon(leadingIcon, ICON_SIZE[size])}
+          </span>
+        )}
+        <span ref={labelOuterRef} className={styles.label}>
+          <span className={styles.labelInner}>
+            <span ref={labelPrimaryRef} className={styles.labelPrimary}>
+              {children}
+            </span>
+            <span className={styles.labelDupe} aria-hidden>
+              {children}
+            </span>
+          </span>
+        </span>
+        <span className={styles.labelFade} aria-hidden />
+        {closable && (
+          <>
+            <span className={styles.closeFade} aria-hidden />
+            <button
+              type="button"
+              tabIndex={-1}
+              className={styles.closeButton}
+              aria-label={closeLabel}
+              onClick={handleCloseClick}
+            >
+              <Icon name="x" size={CLOSE_ICON_SIZE[size]} />
+            </button>
+          </>
+        )}
+      </div>
+    );
+  },
+);
+Tab.displayName = "TabStrip.Tab";
+
+// ────────────────────────────────────────────────────────────
+
+type TabStripCompound = typeof Root & {
+  Tab: typeof Tab;
+};
+
+const TabStrip = Root as TabStripCompound;
+TabStrip.Tab = Tab;
+
+export { TabStrip };

package/assets/components/TabStrip/index.ts

@@ -0,0 +1,7 @@
+export { TabStrip } from "./TabStrip";
+export type {
+  TabStripProps,
+  TabStripTabProps,
+  TabStripSize,
+  TabStripVariant,
+} from "./TabStrip";

package/assets/components/Toolbar/Toolbar.module.css

@@ -7,18 +7,36 @@
      기본 24 → 28. 아이콘 자체 크기는 그대로 두고 주변 여유만 확장해서
      클릭 영역이 넉넉해지도록. */
 .root {
-  --iconbtn-h-md: var(--control-h-sm);
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
-  min-height: var(--control-h-md);
   width: max-content;
-  padding-block: var(--space-1_5);
-  padding-inline: var(--space-2);
   color: var(--fg);
   box-sizing: border-box;
 }
 
+/* Size ──────────────────────────────────────────────
+   두 사이즈 모두 아이콘 18(16 + 2)로 통일하고 히트박스만 다르게 — 간격을 좁혀서
+   md가 커 보이고 sm이 작아 보이는 체감 문제 완화.
+   md — 히트 30 · 아이콘 18 (32·20보다 한 스텝 다운)
+   sm — 히트 28 · 아이콘 18 (히트만 2 작음)
+   scale에 없는 중간값(30·28·18)은 토큰 조합으로 합성 — Density 축에 비례. */
+.root[data-size="md"] {
+  --iconbtn-h-md: calc(var(--control-h-sm) - var(--space-0_5));
+  --icon-size-sm: calc(var(--icon-size-md) - var(--space-0_5));
+  min-height: calc(var(--control-h-md) - var(--space-0_5));
+  padding-block: var(--space-1_5);
+  padding-inline: var(--space-2);
+}
+.root[data-size="sm"] {
+  --iconbtn-h-md: calc(var(--control-h-xs) + var(--space-1));
+  --icon-size-sm: calc(var(--icon-size-md) - var(--space-0_5));
+  min-height: calc(var(--control-h-xs) + var(--space-1));
+  padding-block: var(--space-1);
+  padding-inline: var(--space-1_5);
+  gap: var(--space-0_5);
+}
+
 /* stretch=true : 콘텐츠 폭이 아니라 부모 폭을 꽉 채움 (attached의 기본값). */
 .root[data-stretch] {
   display: flex;
@@ -28,14 +46,23 @@
 /* Variants ──────────────────────────────────────────── */
 
 /* floating — 떠 있는 알약.
-   bg-elevated + 얕은 그림자 + 큰 radius. 콘텐츠 위에 살짝 떠 있는 느낌.
-   무게감은 hairline이 쥐고, 그림자는 분리감만 더한다. */
+   bg-elevated + 얕은 그림자 + Shape 축에 또렷하게 반응하는 radius.
+   무게감은 hairline이 쥐고, 그림자는 분리감만 더한다.
+   Shape 축별 체감 폭을 크게 — crisp는 각지게(sm 4px), standard는 중간(lg 12px),
+   soft는 알약(full). scale 하나로 묶으면 axis별 체감이 평평해지는 자리라
+   data-shape 선택자로 Toolbar만 로컬 override. */
 .root[data-variant="floating"] {
   background: var(--bg-elevated, var(--bg));
   border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
 }
+[data-shape="crisp"] .root[data-variant="floating"] {
+  border-radius: var(--radius-sm);
+}
+[data-shape="soft"] .root[data-variant="floating"] {
+  border-radius: var(--radius-2xl);
+}
 
 /* attached — 콘텐츠에 붙은 bar.
    자체 bg 없음 + 하단 hairline만. 에디터 상단·문서 chrome. */

package/assets/components/Toolbar/Toolbar.tsx

@@ -6,20 +6,25 @@ import { cn } from "../_cn";
 import styles from "./Toolbar.module.css";
 
 /* Root ─────────────────────────────────────────────────
-   툴바 — IconButton 중심의 action 줄. 단일 size.
+   툴바 — IconButton 중심의 action 줄.
    variant:
      - floating  : 떠 있는 알약(bg-elevated + shadow-md + radius-xl)
-     - attached  : 콘텐츠에 붙은 bar (transparent + 하단 hairline) */
+     - attached  : 콘텐츠에 붙은 bar (transparent + 하단 hairline)
+   size:
+     - md(기본)  : 히트박스 32 · 아이콘 20 — 표준 자리
+     - sm        : 히트박스 24 · 아이콘 16 — 밀도 승부처(사이드바 바닥·인라인 bar) */
 export type ToolbarVariant = "floating" | "attached";
+export type ToolbarSize = "sm" | "md";
 
 export interface ToolbarProps extends HTMLAttributes<HTMLElement> {
   variant?: ToolbarVariant;
+  size?: ToolbarSize;
   /** 가로 꽉 채울지(attached에 어울림) vs 콘텐츠 폭(floating). 기본은 variant로 자동 결정. */
   stretch?: boolean;
 }
 
 const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarProps>(function ToolbarRoot(
-  { variant = "floating", stretch, className, children, role = "toolbar", ...rest },
+  { variant = "floating", size = "md", stretch, className, children, role = "toolbar", ...rest },
   ref,
 ) {
   const resolvedStretch = stretch ?? variant === "attached";
@@ -29,6 +34,7 @@ const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarProps>(function ToolbarRoo
       role={role}
       className={cn(styles.root, className)}
       data-variant={variant}
+      data-size={size}
       data-stretch={resolvedStretch || undefined}
       {...rest}
     >

package/assets/components/Toolbar/index.ts

@@ -1,2 +1,2 @@
 export { Toolbar } from "./Toolbar";
-export type { ToolbarProps, ToolbarVariant } from "./Toolbar";
+export type { ToolbarProps, ToolbarVariant, ToolbarSize } from "./Toolbar";

package/assets/components/_data.ts

@@ -546,6 +546,7 @@ export const componentSlugs: Record<string, string> = {
   "Date Picker": "input/date-picker",
   "Time Picker": "input/time-picker",
   Tabs: "nav/tabs",
+  "Tab Strip": "nav/tab-strip",
   Breadcrumb: "nav/breadcrumb",
   Sidebar: "nav/sidebar",
   "Sidebar Split": "nav/sidebar-split",
@@ -632,7 +633,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "nav",
     title: "Navigation",
     items: [
-      "App Frame", "Page Header", "Tabs", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Identity Button", "Pagination",
+      "App Frame", "Page Header", "Tabs", "Tab Strip", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Identity Button", "Pagination",
       "Stepper",
     ],
   },

package/assets/components/index.ts

@@ -70,6 +70,7 @@ export * from "./TableRow";
 export * from "./TableRowEdit";
 export * from "./TableRowSelect";
 export * from "./Tabs";
+export * from "./TabStrip";
 export * from "./Textarea";
 export * from "./TimePicker";
 export * from "./Toast";

package/assets/prompts/components/chat-input.md

@@ -16,11 +16,18 @@ AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(t
 - 첨부·인용·메시지 상태를 ChatInput 안에서 관리하지 않는다 — controlled 전용.
 - 모델 선택 메뉴를 내부에서 열지 않는다 — 현재는 라벨 클릭 시 다음 모델로 토글만. 실제 ContextMenu는 소비처에서 조립 (ChatInput의 책임 과잉 방지).
 - SingleLine에서 모델 라벨을 끝까지 노출하지 않는다 — 10자 넘으면 자동 compact(아이콘만).
-- Send 버튼 색을 변경하지 않는다 — 비활성=`bg-subtle` / 활성·스트리밍=`primary`로 고정.
+- Send 버튼 색을 임의로 override하지 않는다 — 톤 조정은 `sendVariant` prop(`solid` | `ghost` | `soft`)으로만. 각 variant 안에서 비활성→활성 색 전환은 고정 규약.
 - `flush`를 떠있는 자리(페이지 중앙·오버레이)에 쓰지 않는다 — 외곽선 없이 공중에 뜨면 영역이 흐려짐. 반드시 shell 바닥·바텀바처럼 바깥 경계가 이미 존재하는 자리에만.
 
+### Send 버튼 variant
+- `sendVariant="solid"` *(기본)* — 비활성=`bg-subtle` / 활성·스트리밍=`primary` + 흰 아이콘. ChatGPT·Claude 류 떠있는 네모 버튼.
+- `sendVariant="ghost"` — 배경 투명, 아이콘만. 비활성=`fg-disabled` / 활성=`fg-strong`. hover에서만 `bg-subtle` 살짝. 흰 캔버스에 녹아드는 깔끔한 자리(가벼운 질문창·검색봉·툴 안쪽 작은 입력).
+- `sendVariant="soft"` — 늘 `bg-subtle` 배경, 활성이어도 색 강조 없이 fg만 진해짐. 조용한 자리(사이드바 바닥 flush, 패널 바텀바)에서 send 존재감을 낮추고 싶을 때.
+- `sendIcon="arrow-up"` *(기본)* — 전송 뉘앙스, 범용. `"return"`(↵) — 폼 submit·키보드 힌트. `"paper-plane"` — 메신저 느낌(iMessage/카톡 류). 스트리밍 중엔 아이콘 선택과 무관하게 자동으로 square로 교체.
+- 셋 다 활성 상태의 **아이콘 색 규약**은 고정 — ghost·soft는 fg-strong, solid만 흰색. 임의로 primary 색 아이콘 넣지 않는다.
+
 ### Fallback
-shape 애매하면 `multi`. variant 애매하면 `framed`. maxRows 애매하면 `8`.
+shape 애매하면 `multi`. variant 애매하면 `framed`. sendVariant 애매하면 `solid`. sendIcon 애매하면 `arrow-up`. maxRows 애매하면 `8`.
 
 ### 관련
 - [[components/file-icon]] / [[components/attachment-thumb]] / [[components/attachment-item]] / [[components/quotation-bar]] — 조립 요소
@@ -51,6 +58,9 @@ shape 애매하면 `multi`. variant 애매하면 `framed`. maxRows 애매하면
   selectedModel={string}
   onSelectModel={(id) => void}
 
+  sendVariant="solid | ghost | soft"   // default: solid
+  sendIcon="arrow-up | return | paper-plane"  // default: arrow-up
+
   placeholder="Ask me anything…"
   disabled={boolean}
   maxRows={number}                     // multi 전용, default 8

package/assets/prompts/components/tab-strip.md

@@ -0,0 +1,144 @@
+# TabStrip
+
+### 원칙
+브라우저·에디터·디자인툴 상단에 늘어선 **"열려있는 문서/파일 탭"** 전용 컴포넌트. 각 탭은 **독립 문서·독립 라우트**를 가리킨다 — Chrome의 창 탭, Figma의 파일 탭, VSCode의 에디터 탭이 전부 같은 자리. 이름은 Chromium/VSCode/Telerik이 공통으로 쓰는 업계 표준어 `TabStrip`.
+
+[[components/tabs]]와 역할이 **완전히 다르다**. Tabs는 "같은 화면 안 섹션 전환"(URL `?tab=activity`), TabStrip은 "열린 N개 중 하나 선택"(각 탭 = 라우트). 섞어 쓰지 말 것 — 한 화면에 TabStrip이 있고 그 아래 Tabs가 있는 건 OK (브라우저 탭 밑에 설정 섹션 탭 있는 꼴).
+
+활성 표시는 **pill·underline이 아니라 bg-muted 배경 상시 유지** — hover 색(bg-muted)이 활성 탭에서 lock된 꼴. "hover되는 자리가 현재 자리"라는 직관.
+
+### Do
+- **각 탭 = 독립 문서/라우트**. 라우팅이나 외부 상태 저장소에 반영 (`?doc=portfolio` 또는 workspace store).
+- **leadingIcon에 자유롭게** — [[components/icon]], `<img>`(파일 썸네일), `<svg>`(브랜드 로고) 전부 ReactNode로 받는다. Figma 파일 탭의 작은 썸네일, VSCode 파일 아이콘 패턴.
+- **닫기는 `closable` prop으로**. x 버튼은 `absolute`로 오른쪽에 띄워 **왼쪽에서 bg-muted 그라데이션으로 라벨 위를 덮으며 등장** — Chrome 긴 탭 패턴. **hover 시에만** fade-in (활성 탭도 hover 아니면 숨김) — 평상시 시각 노이즈 최소화.
+- **긴 라벨은 hover 시 marquee loop** — 라벨이 overflow되면 짧은 지연 후 왼쪽으로 **전광판처럼 끊김 없이** 흐른다 (텍스트 복제본이 뒤를 이어받음). ResizeObserver로 overflow 감지, 짧은 라벨은 자동으로 안 움직임. `prefers-reduced-motion`에선 비활성.
+- **trailing slot은 자유 조립**. `trailing` prop에 ReactNode를 넣으면 탭 묶음 오른쪽에 자리잡음 — `<IconButton icon={<Icon name="plus" />} />` (새 탭), `<IconButton icon={<Icon name="dots-three" />} />` (더보기), 또는 아무것도 안 넣기. TabStrip hover·focus-within 시에만 fade-in.
+- **자리 중립** — Topbar 바로 아래 2번째 줄에 flush로 두거나, Topbar의 center slot에 넣는다. 소비처가 자리를 결정.
+- **키보드**: ← → Home End 지원. Enter/Space로 선택. 활성 탭만 `tabIndex=0` (roving).
+- **라벨은 1줄 cap** — `max-width: 20ch`(md), `16ch`(sm)에서 ellipsis. 문서명이 길면 Tooltip으로 보완.
+
+### Don't
+- **섹션 전환**에 TabStrip 쓰지 말 것 — 그건 [[components/tabs]] underline/segmented/text. 역할 뒤집으면 "탭 안에 탭" 혼동.
+- **활성 색을 `--primary`로 덮지 않는다** — 활성은 `--fg-strong` + `--bg-muted` 무채. 브랜드 컬러는 CTA와 위계가 충돌 ([[components/tabs]]와 동일 원칙).
+- **라벨 가로 폭을 숫자(px)로 고정 금지** — 폰트 축이 바뀌면 깨짐. `ch` 단위 사용.
+- **x 아이콘을 상시 노출하지 말 것** — 시각 노이즈. hover·active에만, 활성 탭은 늘 보이는 게 맞다.
+- **`<svg>` 인라인 금지** — leadingIcon은 Icon·이미지·브랜드 svg는 OK지만 "아이콘용 raw svg"는 [[feedback_no_inline_svg]].
+- **trailing에 생짜 `<button>` 넣지 말 것** — Button·IconButton·DropdownMenu 트리거 등 CTDS 컴포넌트 경유. 자리별 간격·디바이더는 wrapper가 담당하니 소비처는 버튼만 넘김.
+- **탭 사이에 가운뎃점·대시 구분자 금지** — [[feedback_no_bullet_separator]]. 탭 자체가 구분된 블록.
+
+### Fallback
+자리 애매하면 **Topbar 아래 2번째 줄**(shell 2단), size 애매하면 **md** (shell chrome에서도 sm보다 md가 안정적 — Topbar와 같은 리듬).
+
+### 관련
+- [[components/tabs]] — 역할 분리. Tabs=섹션 전환, TabStrip=문서 전환
+- [[components/topbar]] — TabStrip이 가장 자주 조립되는 shell. 아래 줄 또는 center slot
+- [[components/icon]] · [[components/file-icon]] — leadingIcon 자리 (파일 타입 썸네일로 FileIcon 자주 조합)
+- [[components/tooltip]] — 라벨이 ellipsis될 때 전체 문서명 노출
+- [[axes/density]] — `--control-h-*`가 탭 높이에 매핑
+- [[axes/shape]] — 탭 radius가 Shape 축에 반응
+- [[axes/motion]] — hover·active 전환 duration
+- [[tokens/color]] — `--bg-muted`(활성·hover 배경), `--fg-muted` → `--fg-strong` 대비
+
+### Props 시그니처
+```tsx
+<TabStrip
+  variant="ghost | soft | segmented"  // default: ghost
+  size="sm | md"                      // default: md
+  value={string}                      // controlled
+  defaultValue={string}               // uncontrolled 초기값
+  onValueChange={(v) => void}
+  trailing={<ReactNode>}              // 오른쪽 slot. IconButton·DropdownMenu 등 자유 조립
+>
+  <TabStrip.Tab
+    value="revana"
+    leadingIcon={<Icon name="file-text" />}
+    closable
+    onClose={() => removeTab("revana")}
+    closeLabel="탭 닫기"
+  >
+    Revana (copy 2)
+  </TabStrip.Tab>
+  <TabStrip.Tab
+    value="portfolio"
+    leadingIcon={<img src="/figma.svg" alt="" />}
+    closable
+    onClose={() => removeTab("portfolio")}
+  >
+    Portfolio
+  </TabStrip.Tab>
+</TabStrip>
+```
+
+### 상태 매트릭스
+| 상태 | 배경 | 라벨 색 | leading opacity | x + fade | 라벨 marquee |
+|---|---|---|---|---|---|
+| default (inactive) | transparent | `--fg-muted` | 0.75 | opacity 0 | 정지 |
+| hover (inactive) | `--bg-muted` | `--fg` | 1 | fade-in | 지연 후 loop (오버플로우 시) |
+| active (no hover) | `--bg-muted` 상시 | `--fg-strong` | 1 | opacity 0 | 정지 |
+| active + hover | `--bg-muted` | `--fg-strong` | 1 | fade-in | 지연 후 loop (오버플로우 시) |
+| disabled | transparent | opacity 0.5 | 0.5 | opacity 0 | 정지 |
+| focus-visible | — | — | — | `--ring-shadow` | — |
+
+### Variant 가이드
+| variant | 결 | 언제 |
+|---|---|---|
+| `ghost` (default) | 투명 + hover/active bg | shell chrome 기본. 가장 가벼움. 주변 UI와 조용히 어울림. |
+| `soft` | 모든 탭에 연한 bg 상시, 활성이 조금 더 진함 | 탭이 **독립 블록**으로 보여야 할 때. 선택 자리가 또렷. Button 그룹과 리듬 맞음. |
+| `segmented` | 탭 사이 세로 hairline으로 칸 구분 | 브라우저·에디터의 **문서 탭** 표준. 탭 경계가 또렷하고 전통적. |
+
+### Size 가이드
+| size | 언제 |
+|---|---|
+| `sm` | 밀도 승부처 (사이드바 내부 docked, 좁은 패널) |
+| `md` | 기본. Topbar 아래 shell 2번째 줄 |
+
+### 조합 예시
+
+```tsx
+// Topbar 아래 줄 (Figma·Chrome 패턴)
+<Topbar>
+  <Topbar.Leading><IdentityButton …/></Topbar.Leading>
+  <Topbar.Trailing>…</Topbar.Trailing>
+</Topbar>
+<div className="shell-row-2">
+  <TabStrip
+    value={active}
+    onValueChange={setActive}
+    trailing={
+      <IconButton
+        variant="ghost"
+        icon={<Icon name="plus" />}
+        aria-label="새 문서"
+        onClick={handleNewDoc}
+      />
+    }
+  >
+    {docs.map((d) => (
+      <TabStrip.Tab
+        key={d.id}
+        value={d.id}
+        leadingIcon={<FileIcon ext={d.ext} />}
+        closable
+        onClose={() => closeDoc(d.id)}
+      >
+        {d.title}
+      </TabStrip.Tab>
+    ))}
+  </TabStrip>
+</div>
+```
+
+```tsx
+// Topbar center slot (탭 2~4개로 적을 때)
+<Topbar>
+  <Topbar.Leading><IdentityButton …/></Topbar.Leading>
+  <Topbar.Center>
+    <TabStrip value={view} onValueChange={setView} size="sm">
+      <TabStrip.Tab value="design">Design</TabStrip.Tab>
+      <TabStrip.Tab value="code">Code</TabStrip.Tab>
+      <TabStrip.Tab value="specs">Specs</TabStrip.Tab>
+    </TabStrip>
+  </Topbar.Center>
+  <Topbar.Trailing>…</Topbar.Trailing>
+</Topbar>
+```

package/assets/prompts/components/toolbar.md

@@ -1,14 +1,16 @@
 # Toolbar
 
 ### 원칙
-IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는 "뜨 있는" 알약으로 콘텐츠 위에 떠서 액션을 모으는 자리. 단일 size — toolbar 안의 버튼은 전부 같은 사이즈여야 한다.
+IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는 "뜨 있는" 알약으로 콘텐츠 위에 떠서 액션을 모으는 자리. toolbar 안의 버튼은 전부 같은 사이즈 — Toolbar의 `size` prop이 안쪽 IconButton 히트박스·아이콘을 한 번에 결정.
 
 ### Do
 - `variant="floating"` 기본 — bg-elevated + shadow-md + radius-xl, 콘텐츠 위에 떠있는 알약. 캔버스·에디터·이미지 뷰어의 상단 중앙.
 - `variant="attached"`는 콘텐츠에 붙은 bar — transparent + 하단 hairline. 페이지 상단에 "탭 아래 액션 바"로 쓸 때.
 - 관련 액션은 `<Toolbar.Group>`으로 묶는다 — 내부는 좁은 gap, 그룹 간은 `<Toolbar.Divider>`.
 - 좌·우 정렬이 필요하면 `<Toolbar.Spacer>`로 공간 밀기 — flex:1.
-- toolbar 안엔 IconButton size="sm"이 기본. floating variant는 size="md"까지도 OK.
+- `size="md"`(기본) — 히트박스 32·아이콘 20. 캔버스·에디터 상단 표준 자리.
+- `size="sm"` — 히트박스 24·아이콘 16. 사이드바 바닥·인라인 bar처럼 밀도 승부처.
+- 안쪽 IconButton은 size prop을 넘기지 않는다 — Toolbar가 CSS 변수로 자동 매칭.
 
 ### Don't
 - toolbar 안에 label 긴 Button을 섞지 않는다 — IconButton + Tooltip이 toolbar 패턴. 긴 label이 필요하면 그 자리는 toolbar가 아니라 액션 영역.
@@ -20,6 +22,7 @@ IconButton 중심의 action 줄. 에디터·캔버스·갤러리 상단, 또는
 ```tsx
 <Toolbar
   variant?="floating | attached"              // default: floating
+  size?="sm | md"                              // default: md (히트박스 32·아이콘 20)
   stretch?={boolean}                           // default: variant로 자동 (attached=true, floating=false)
   role?={string}                               // default: "toolbar"
 >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI (shadcn식 코드 생성기)",
   "type": "module",
   "sideEffects": [