@conscience-technology/ctds 0.4.6 → 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의 가장 자연스러운 대응.
@@ -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/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.6",
+  "version": "0.4.7",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI (shadcn식 코드 생성기)",
   "type": "module",
   "sideEffects": [