@conscience-technology/ctds 0.4.3 → 0.4.5

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

@@ -488,7 +488,7 @@ export const shadows: [string, string, string][] = [
   ["shadow-sm", "var(--shadow-sm)", "Card 기본"],
   ["shadow-md", "var(--shadow-md)", "Dropdown, Popover"],
   ["shadow-lg", "var(--shadow-lg)", "Modal"],
-  ["shadow-xl", "var(--shadow-xl)",],
+  ["shadow-xl", "var(--shadow-xl)", "Command Palette"],
   ["shadow-inner", "var(--shadow-inner)", "눌린 상태"],
 ];
 
@@ -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",
     ],
   },
@@ -648,7 +649,8 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "overlay",
     title: "Overlay / Menu",
     items: [
-      "Context Menu", "Dropdown Menu", "Disclosure", "Collapsible", "Toggle Group",
+      "Context Menu", "Dropdown Menu",
+ "Disclosure", "Collapsible", "Toggle Group",
     ],
   },
   {

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/ASSEMBLY.md

@@ -47,6 +47,17 @@ anatomy = padding·gap·radius·border 전략. 이걸 복제하면 벤더가 축
 - **Icon 이름**은 `web/components/Icon/Icon.tsx`의 phosphor 레지스트리에서 확인 — 레시피/다른 문서에 등장하는 이름이 실제 등재된 이름이라는 보장 없음
 - **`"use client"` 전염**: 쓰는 벤더 중 하나라도 `"use client"`면 조립하는 **page 자체도 `"use client"`**. compound(`Stepper.Item`·`Card.Header` 등)를 Server Component에서 접근하면 **런타임 undefined**(Next 15/React 19 경계 이슈). 현재 Button/Icon/IconButton/Stepper 등 대다수 vendor가 client — 사실상 조립 page는 모두 client로 가는 쪽이 안전
 
+**벤더 수정 vs 로컬 파생 결정 트리** ([[feedback_no_vendor_modification]], [[feedback_local_derivative_over_handrolled]]):
+
+벤더에 "비슷하지만 그대로는 안 되는" 자리를 만들 때 네 갈래 중 하나를 **글로 적어 결정**한다 — 수제(div+span 하드코딩) 로 빠지는 순간 토큰·여백·사이즈 리듬이 전부 깨진다.
+
+1. **벤더 variant/size 로 커버됨** → 그대로 import, 변경 금지.
+2. **커버 안 됨 + 다른 사용처에도 쓰일 패턴** → `ctds-component` 스킬로 넘겨 **벤더에 새 variant/size 신설**. Layer 1(코드)과 Layer 2(문서) 쌍으로 수정. 영향 범위 평가 필수.
+3. **커버 안 됨 + 번역/페이지 이 자리에만 필요** → **로컬 파생**: 가장 비슷한 벤더 코드(JSX + CSS Module)를 소비 프로젝트 로컬 경로(`web/app/_components/` 또는 `app/components/<page>/_parts/`)에 **다른 이름**으로 복사. 토큰·height·padding·gap·radius 기본값은 **건드리지 말고 유지** — 조정은 추가 slot/위치/variant 수준. 벤더 패키지(`packages/ctds-cli/assets/`, `node_modules/ctds/`) 는 **절대 수정 금지**.
+4. **벤더에 비슷한 것도 없고 레시피에도 없음** → 사용자에게 보고. 수제 조립로 임의 결정 금지.
+
+**왜 로컬 파생이 수제보다 통일성이 좋은가**: 벤더의 토큰 선택을 그대로 베낀 상태로 시작하므로 Shape/Density/Hue 축 스왑에 자동 반응. 수제는 padding `12px`·gap `8px` 같은 직관값이 CTDS space scale 과 미묘하게 어긋나거나 하드코딩되고, 축 스왑에서 그 자리만 깨진다.
+
 ### 3단계 — 레시피를 확인한다
 
 `prompts/recipes/`에 **자리별 조립 레시피**가 있다. 맞는 레시피가 있으면 그 토큰·구조 그대로 쓴다.

package/assets/prompts/axes/icon.md

@@ -16,11 +16,14 @@ Weight는 축이 아니라 `<Icon weight="..." />` prop (컴포넌트별 자유
 - 아이콘은 항상 의미 기반 이름으로 참조: `<Icon name="check" />`.
 - 프로젝트 시작 시 Family 하나 결정. 리스킨 아닌 이상 안 바꾼다.
 - 활성/선택 상태 표시엔 `weight=fill`, 그 외에는 `weight=regular`.
+- **단순한 상징 우선** — Button/MenuItem 라벨이 이미 의미를 담고 있으니, 아이콘은 1초 안에 분류되는 "모양 꼬리표" 역할. 조합형 메타포(`envelope-plus`, `pencil-simple` 등)보다 원형 상징(`plus`, `x`, `check`, `search`, `trash`, `arrow-right`)이 우선 ([[feedback_simple_icons]]).
 
 ### Don't
 - 한 페이지에서 두 Family를 섞지 않는다.
 - 아이콘을 SVG로 하드코딩하지 않는다. 항상 `<Icon />` 경유.
 - Lucide에서 `weight=fill`을 요구하지 않는다 (원본이 fill 미제공).
+- 조합형 메타포로 의미를 "그림으로 설명" 하지 않는다 — "새 메시지" 는 `plus` 지 `envelope-plus`/`pencil-simple` 가 아니다. "제출" 은 `arrow-right` 지 `paper-plane` 이 아니다. 라벨에 의미를 넣고 아이콘은 보편 상징.
+- 예외: Sidebar·네비처럼 **아이콘 혼자 뜻을 담아야 하는 자리**는 구체 아이콘 OK (`gear`, `house`, `bell`).
 
 ### Fallback
 Family는 `phosphor`, Weight는 `regular`.

package/assets/prompts/axes/voice.md

@@ -24,10 +24,13 @@ Theme과 독립 — editorial이든 mechanical이든 어떤 Theme에도 어떤 V
 - 접근성 문구(에러 설명, 필수 필드 안내, 스크린리더 라벨)는 Voice와 무관하게 **명확성 우선**.
   `casual`이어도 필수 정보를 희석하지 않는다 (예: "비밀번호는 필수입니다" 수준은 유지).
 - Voice에 CSS 변수나 토큰을 할당하지 않는다. 코드 레벨 영향은 `data-voice` 속성 노출뿐.
-- **제목·헤딩·버튼 라벨·메뉴명에 em dash(—), en dash(–), 하이픈(-)으로 부제를 잇지 않는다.**
-  모든 Voice 공통 하드 룰. 문서·UI 카피·AI 생성물 전부 해당.
-  나쁜 예: "온보딩 — 테마를 고릅니다", "설정 — 기본값", "저장 — 완료".
-  대신: 한 줄 제목으로 끝내거나(`"테마 고르기"`), 부제가 꼭 필요하면 별도 하위 텍스트로 분리.
+- **[HARD] em dash(—), en dash(–), 생략부호(…), 수사적 큰따옴표 전면 금지.** ([[feedback_no_em_dash]])
+  모든 Voice 공통 하드 룰. 범위는 **제목·헤딩·버튼 라벨·메뉴명뿐 아니라 본문·테이블 셀·설명·툴팁·에러 메시지까지 모든 사람 UI 카피** 전부. 문서·UI 카피·AI 생성물 전부 해당.
+  나쁜 예:
+  - 제목: "온보딩 — 테마를 고릅니다", "설정 — 기본값", "저장 — 완료"
+  - 본문: "작업이 완료되었습니다 — 다시 시작하려면...", "결과는 다음과 같습니다…"
+  - 테이블 셀: "완료 — 2026년 10월 15일"
+  대신: 한 줄 제목으로 끝내거나(`"테마 고르기"`), 부제가 꼭 필요하면 별도 하위 텍스트로 분리. 본문에서는 쉼표·마침표·괄호로 흐름을 끊고, "…" 대신 **"기다리는 중"** 처럼 상태를 명시.
 
 ### Fallback
 `neutral`.