@conscience-technology/ctds 0.4.5 → 0.4.7

package/assets/components/Icon/Icon.tsx

@@ -10,6 +10,9 @@
  *     (예: solar에 자동차 아이콘이 없음 → truck/car가 같은 Truck으로 수렴).
  *     이건 라이브러리 한계라는 사실을 받아들이는 거지, 설계 결함이 아님.
  *   - 매핑 자체가 아예 없는 경우에만 family 전용 placeholder("빗금 사각형")를 렌더.
+ *   - 일부 editor UI 아이콘(text-align, flex align, bold/italic 등)은 solar/lucide에
+ *     형상이 명확한 등가물이 없어 축과 무관하게 phosphor로 고정 노출한다
+ *     (forcePhosphorFamily). 유저에겐 조용히 처리.
  *
  * weight(regular/fill) 반응:
  *   phosphor → weight prop으로 반응
@@ -222,6 +225,26 @@ import {
   Flower as PhFlower,
   Leaf as PhLeaf,
   Tree as PhTree,
+  // Editor UI — forced to phosphor regardless of family axis (see forcePhosphorFamily)
+  TextAlignLeft as PhTextAlignLeft,
+  TextAlignCenter as PhTextAlignCenter,
+  TextAlignRight as PhTextAlignRight,
+  TextAlignJustify as PhTextAlignJustify,
+  TextB as PhTextB,
+  TextItalic as PhTextItalic,
+  TextUnderline as PhTextUnderline,
+  TextStrikethrough as PhTextStrikethrough,
+  TextIndent as PhTextIndent,
+  TextOutdent as PhTextOutdent,
+  AlignLeft as PhAlignLeft,
+  AlignCenterHorizontal as PhAlignCenterHorizontal,
+  AlignRight as PhAlignRight,
+  AlignTop as PhAlignTop,
+  AlignCenterVertical as PhAlignCenterVertical,
+  AlignBottom as PhAlignBottom,
+  Code as PhCode,
+  CodeBlock as PhCodeBlock,
+  Quotes as PhQuotes,
 } from "@phosphor-icons/react";
 
 // Solar (Linear = regular, Bold = fill) ───────────────────────────
@@ -836,6 +859,26 @@ const phosphorSet: Partial<Record<IconName, AnyComp>> = {
   flower: PhFlower,
   leaf: PhLeaf,
   tree: PhTree,
+  // Editor UI — forced phosphor (see forcePhosphorFamily)
+  "text-align-left": PhTextAlignLeft,
+  "text-align-center": PhTextAlignCenter,
+  "text-align-right": PhTextAlignRight,
+  "text-align-justify": PhTextAlignJustify,
+  "text-b": PhTextB,
+  "text-italic": PhTextItalic,
+  "text-underline": PhTextUnderline,
+  "text-strikethrough": PhTextStrikethrough,
+  "text-indent": PhTextIndent,
+  "text-outdent": PhTextOutdent,
+  "align-left": PhAlignLeft,
+  "align-center-horizontal": PhAlignCenterHorizontal,
+  "align-right": PhAlignRight,
+  "align-top": PhAlignTop,
+  "align-center-vertical": PhAlignCenterVertical,
+  "align-bottom": PhAlignBottom,
+  code: PhCode,
+  "code-block": PhCodeBlock,
+  quotes: PhQuotes,
 };
 
 /* solar 세트 — phosphor 이름 → solar의 가장 자연스러운 대응.
@@ -858,7 +901,7 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   sliders: { regular: SoSlidersL, fill: SoSlidersB },
   trash: { regular: SoTrashL, fill: SoTrashB },
   "arrow-right": { regular: SoArrowRightL, fill: SoArrowRightB },
-  x: { regular: SoXL, fill: SoXB },
+  x: { regular: PhX, fill: PhX },
   sun: { regular: SoSunL, fill: SoSunB },
   moon: { regular: SoMoonL, fill: SoMoonB },
   "caret-down": { regular: SoCaretDownL, fill: SoCaretDownB },
@@ -1310,6 +1353,36 @@ function ArrowsDownUpIcon({
   );
 }
 
+/* 축과 무관하게 phosphor로 고정 노출할 아이콘.
+   solar/lucide에 형상이 명확한 등가물이 없거나 기존 매핑이 의미상 틀린 자리. */
+const forcePhosphorFamily = new Set<IconName>([
+  "text-align-left",
+  "text-align-center",
+  "text-align-right",
+  "text-align-justify",
+  "text-b",
+  "text-italic",
+  "text-underline",
+  "text-strikethrough",
+  "text-indent",
+  "text-outdent",
+  "align-left",
+  "align-center-horizontal",
+  "align-right",
+  "align-top",
+  "align-center-vertical",
+  "align-bottom",
+  "code",
+  "code-block",
+  "quotes",
+  // 기존 매핑이 solar/lucide에서 의미상 틀린 자리
+  "square-half",
+  "toggle-left",
+  "toggle-right",
+  "line-segments",
+  "textbox",
+]);
+
 export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
   name: IconName;
   /** 축 기본값(html data-icon-family) 오버라이드 */
@@ -1332,7 +1405,8 @@ export function Icon({
   ...rest
 }: IconProps) {
   const axis = useIconAxis();
-  const family = familyProp ?? axis.family;
+  const requestedFamily = familyProp ?? axis.family;
+  const family = forcePhosphorFamily.has(name) ? "phosphor" : requestedFamily;
   const weight = weightProp ?? axis.weight;
 
   /* family와 무관하게 늘 같은 모양으로 나와야 하는 커스텀 아이콘 분기. */

package/assets/components/TableHeader/TableHeader.module.css

@@ -212,12 +212,14 @@
   display: none;
 }
 
-/* pinned 경계 hairline과 tick(cellSlot 좌측 세로선) 겹침 방지.
+/* pinned/select 경계 hairline과 tick(cellSlot 좌측 세로선) 겹침 방지.
    - pinned-left 셀의 바로 다음 cellSlot: pinned의 border-right와 다음 셀의
      tick이 바로 붙어 두 줄처럼 보이는 현상 제거.
-   - pinned-right 셀 자신: border-left와 자기 tick이 같은 지점에 겹침. */
+   - pinned-right 셀 자신: border-left와 자기 tick이 같은 지점에 겹침.
+   - selectCell 바로 다음 cellSlot: selectCell의 border-right와 겹침 제거. */
 .cellSlot[data-pinned="left"] + .cellSlot .tick,
-.cellSlot[data-pinned="right"] .tick {
+.cellSlot[data-pinned="right"] .tick,
+.selectCell + .cellSlot .tick {
   display: none;
 }
 

package/assets/components/TableRowEdit/TableRowEdit.module.css

@@ -51,7 +51,11 @@
   padding-inline-end: 0;
 }
 
-/* ── 세로 구분선 ────────────────────────────────────────── */
+/* ── 세로 구분선 ──────────────────────────────────────────
+   pinned/select 경계는 cellSlot/selectCell box-shadow가 담당. JS에서 skip하지만
+   렌더 지연·외부 조립 등 어떤 경로로든 data-divider가 붙어도 CSS로 보강:
+   selectCell 바로 다음 cellSlot, pinned-left 바로 다음 cellSlot, pinned-right
+   자신의 셀 ::before는 숨겨 두 줄 겹침 방지. */
 .editCell[data-divider]::before,
 .readonlyCell[data-divider]::before {
   content: "";
@@ -63,6 +67,15 @@
   pointer-events: none;
 }
 
+[data-edit-cell="select"] + * .editCell::before,
+[data-edit-cell="select"] + * .readonlyCell::before,
+[data-pinned="left"] + * .editCell::before,
+[data-pinned="left"] + * .readonlyCell::before,
+[data-pinned="right"] .editCell::before,
+[data-pinned="right"] .readonlyCell::before {
+  display: none;
+}
+
 
 /* ── Edit cell ────────────────────────────────────────────
    클릭/포커스 타겟. 활성 상태엔 input/select가 셀을 꽉 채움. */

package/assets/components/TableRowEdit/TableRowEdit.tsx

@@ -179,12 +179,14 @@ function TableRowEditInner<T>(
         /* 세로 구분선은 editable 여부와 무관하게 모든 셀 사이에 균일하게.
            엑셀 톤 "셀 그리드" 신호는 일관성이 핵심 — read-only 셀만 선이 빠지면
            리듬이 깨져 보임. 첫 데이터 셀은 왼쪽에 선 없음(테이블 외곽).
-           selectable이면 체크박스 ↔ 첫 데이터 셀 사이에도 선.
-           pinned 경계는 cellSlot box-shadow가 담당 — pinned-right 셀 자신과
-           pinned-left 바로 다음 셀의 왼쪽 divider는 그으면 두 줄로 겹쳐 보임. */
+           pinned/select 경계는 cellSlot/selectCell box-shadow가 담당 —
+           pinned-right 셀 자신, pinned-left 바로 다음 셀, selectable일 때
+           첫 데이터 셀의 왼쪽 divider는 그으면 두 줄로 겹쳐 보임. */
         const prevCol = idx > 0 ? columnMap.get(orderedKeys[idx - 1]) : undefined;
         const skipDivider =
-          col.pinned === "right" || prevCol?.pinned === "left";
+          col.pinned === "right" ||
+          prevCol?.pinned === "left" ||
+          (idx === 0 && selectable);
         const showLeftDivider = (idx > 0 || selectable) && !skipDivider;
         return (
           <div

package/assets/prompts/ASSEMBLY.md

@@ -214,6 +214,7 @@ page (gap: space-10)                             ← 그룹 사이 넓게
 조립할 때 사람·AI 모두 자주 미끄러지는 자리. 안티패턴 메모리와 쌍을 이룬다.
 
 - **"페이지 맨 위에 Tabs만"** — Tabs 위에 PageHeader(h1/breadcrumb)가 먼저 와야 한다 ([antipattern-tabs-without-title])
+- **"브라우저·노션처럼 다중 탭" 요청에 Tabs로 조립** — Tabs는 섹션 전환 전용(한 화면 안 뷰 토글). "열려있는 문서 N개 중 하나 선택"(각 탭 = 라우트, 추가/닫기)은 전부 [[components/tab-strip]]. Chrome·Figma·VSCode·노션 탭 UI 요청은 즉시 TabStrip으로. 수제 조립·Tabs 변형 금지
 - **"워크스페이스 스위처를 수제 Button+Dropdown으로 조립"** — 전용 IdentityButton + DropdownMenu 사용 ([antipattern-workspace-switcher])
 - **"Topbar leading에만 요소 몰림"** — leading/center/trailing 3구역 균형. leading·trailing 짝 필수 ([[components/topbar]])
 - **"Sidebar 2단 쉘을 SidebarSplit으로"** — 바깥 flex로 Rail+Sidebar 직접 조립 ([feedback-sidebar-scroll])

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

@@ -7,6 +7,19 @@
 
 활성 표시는 **pill·underline이 아니라 bg-muted 배경 상시 유지** — hover 색(bg-muted)이 활성 탭에서 lock된 꼴. "hover되는 자리가 현재 자리"라는 직관.
 
+### 발동 트리거 — 다중 탭 UI를 원할 때
+사용자가 **"브라우저처럼 탭 열기"**, **"노션처럼 다중 탭"**, **"Figma/VSCode처럼 파일 탭"**, **"Chrome 탭 UI"**, **"탭으로 여러 문서/페이지 열기"** 등을 요구하면 **TabStrip이 정답**. 수제 조립·`<Tabs>` 전용화 하지 말 것. 신호 체크:
+- 사용자가 **"열어두기"**·**"탭 추가"**·**"X 버튼으로 닫기"** 언급 → TabStrip (각 탭 = 열린 문서)
+- 사용자가 **"섹션 전환"**·**"뷰 바꾸기"**·**"필터 토글"** 언급 → [[components/tabs]] (한 화면 안 뷰 전환)
+- 둘 다 필요하면 **TabStrip(상단, 문서 탭) → PageHeader → Tabs(그 안 섹션)** 순으로 중첩. 한 화면에 TabStrip도 되고 Tabs도 되는 자리면 **TabStrip이 바깥**.
+
+소비처 세팅은 보통 **라우팅 상태 + 열린 문서 배열**:
+```tsx
+const [docs, setDocs] = useState<Doc[]>(openDocs);
+const [activeId, setActiveId] = useState<string>(openDocs[0].id);
+// closeDoc, addDoc 핸들러는 소비처가 관리 (TabStrip은 상태 안 가짐).
+```
+
 ### Do
 - **각 탭 = 독립 문서/라우트**. 라우팅이나 외부 상태 저장소에 반영 (`?doc=portfolio` 또는 workspace store).
 - **leadingIcon에 자유롭게** — [[components/icon]], `<img>`(파일 썸네일), `<svg>`(브랜드 로고) 전부 ReactNode로 받는다. Figma 파일 탭의 작은 썸네일, VSCode 파일 아이콘 패턴.

package/assets/skills/ctds-page/SKILL.md

@@ -33,6 +33,8 @@ description: CTDS 페이지·대시보드·레이아웃을 조합할 때 발동.
 | 메타 라벨 가로 나열 | `prompts/recipes/meta-line.md` |
 | 폼·모달 하단 액션 | `prompts/recipes/form-footer.md` |
 | 페이지 폭 안내 바 | `prompts/recipes/page-banner.md` |
+| 다중 탭 UI (브라우저·노션·Figma·VSCode식, 각 탭 = 열린 문서/라우트, 추가·닫기) | `prompts/components/tab-strip.md` — Tabs 아님 |
+| 섹션/뷰 전환 탭 (한 화면 안에서 뷰만 토글, URL `?tab=…`) | `prompts/components/tabs.md` — TabStrip 아님 |
 | 리스트 | `prompts/components/list-item.md` |
 | 테이블 | `prompts/components/{table-row,table-row-edit,table-row-select,table-header}.md` |
 | 폼 | `prompts/components/{form-field,input,select,checkbox,radio,switch}.md` |

package/assets/skills/ctds-wireframe/SKILL.md

@@ -73,10 +73,11 @@ description: 와이어프레임·목업·기존 페이지를 CTDS로 번역·교
 
 1. **CTDS 벤더 컴포넌트가 그대로 맞음** → 그대로 import해서 사용. 끝.
 2. **살짝 다름** (라벨 하나 더, trailing 영역 하나 추가, 특정 variant 미지원 등) → **로컬 파생 컴포넌트** 생성:
-   - 가장 비슷한 CTDS 벤더 컴포넌트 코드(JSX + CSS Module)를 **그대로 복사해서 소비 프로젝트 로컬 경로**(예: `web/app/_components/` 또는 `app/components/<page>/_parts/`)에 **다른 이름**으로 둠.
+   - 가장 비슷한 CTDS 벤더 컴포넌트 코드(JSX + CSS Module)를 **그대로 복사해서 로컬 경로에 다른 이름으로 둠**. 벤더가 설치된 경로(`components/ctds/` 또는 `src/components/ctds/`) **바깥**이어야 함.
+   - 로컬 경로는 소비 프로젝트 관례에 맞춤 — Next.js app router 플젝이면 라우트 옆 `_components/`·`_parts/`, 공용은 `components/local/`·`src/components/local/` 등. 관례가 애매하면 사용자에게 한 번 묻고 그 뒤로는 그 자리 재사용.
    - 거기서 **디자인만 살짝** 조정. 토큰·height·padding·gap·radius 기본값은 **건드리지 말고 유지** — 조정은 추가 요소/위치/variant 수준.
-   - **CTDS 벤더 패키지는 절대 수정 금지** ([[feedback_no_vendor_modification]]).
-3. **벤더에 비슷한 것조차 없음** → `prompts/recipes/<자리>.md` 반드시 확인 ([[ASSEMBLY]]). 레시피에도 없으면 **수제가 아니라 사용자에게 보고** — "이 자리 벤더/레시피 둘 다 없음, 어떻게 할지" 물어본다. 임의로 div+span 수제 조립 금지.
+   - **CTDS 벤더(설치된 `components/ctds/` 전체 + 레포 작업 중이면 `packages/ctds-cli/assets/`)는 절대 수정 금지** ([[feedback_no_vendor_modification]]).
+3. **벤더에 비슷한 것조차 없음** → `prompts/recipes/<자리>.md` 반드시 확인 ([[ASSEMBLY]]). 레시피 위치는 레포 루트 `prompts/recipes/` 또는 `ctds init`으로 설치된 소비 프로젝트 루트 `prompts/recipes/` 둘 다 유효. 레시피에도 없으면 **수제가 아니라 사용자에게 보고** — "이 자리 벤더/레시피 둘 다 없음, 어떻게 할지" 물어본다. 임의로 div+span 수제 조립 금지.
 
 **왜 로컬 파생이 수제보다 통일성이 좋은가**:
 - 수제 조립은 토큰 선택부터 틀어진다. padding `12px`·gap `8px` 같은 직관에서 뽑은 값들이 CTDS space scale(--space-2=8, --space-3=12 등)과 미묘하게 어긋나거나, 심지어 하드코딩됨 ([[feedback_no_hardcoded_values]]).
@@ -85,7 +86,7 @@ description: 와이어프레임·목업·기존 페이지를 CTDS로 번역·교
 
 **로컬 파생 결정 시 확인**:
 - 어떤 벤더 컴포넌트에서 베낄지 (파일 경로 명시)
-- 어디에 둘지 (`_components/` or `_parts/`)
+- 어디에 둘지 (소비 프로젝트 관례의 로컬 폴더 — 벤더 경로 바깥)
 - 무엇을 바꿀지 (추가 slot, 삭제한 variant, 추가 라벨 — "디자인 기본값 건드리지 않음" 명시)
 - 베끼면서 토큰 하드코딩 금지, 기존 토큰 그대로 유지
 

package/package.json

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