@conscience-technology/ctds 0.1.13 → 0.2.0

package/src/utils/patch.js

@@ -0,0 +1,155 @@
+/**
+ * ctds init이 소비자 플젝의 globals.css · layout.tsx를 자동 패치하는 유틸.
+ *
+ * 설계:
+ *   - 각 패치는 멱등(idempotent): 이미 적용돼 있으면 skip 리턴, 재실행해도 안전.
+ *   - 실패 시 fallback 수동 안내로 넘긴다. 억지로 깨뜨리지 않음.
+ *   - 변경 전 .bak 백업. 실패하면 되돌릴 수 있게.
+ *   - --dry 모드에선 쓰지 않고 "하게 될 일" 리포트만.
+ *
+ * 리턴 형태 (공통):
+ *   { status: "applied" | "skipped" | "failed", reason: string, before?, after? }
+ */
+
+import { existsSync, readFileSync, writeFileSync, copyFileSync } from "node:fs";
+
+const GLOBALS_IMPORT = `@import "../components/ctds/tokens.css";`;
+const GLOBALS_IMPORT_RE = /@import\s+["']\.\.\/components\/ctds\/tokens\.css["']\s*;?/;
+
+/**
+ * globals.css 최상단에 CTDS tokens.css import를 추가.
+ * 이미 있으면 skip. 다른 import 라인은 건드리지 않음.
+ */
+export function patchGlobalsCss(filePath, { dry = false } = {}) {
+  if (!existsSync(filePath)) {
+    return { status: "failed", reason: `파일 없음: ${filePath}` };
+  }
+  const before = readFileSync(filePath, "utf8");
+  if (GLOBALS_IMPORT_RE.test(before)) {
+    return { status: "skipped", reason: "CTDS tokens.css import가 이미 있어요." };
+  }
+  const after = GLOBALS_IMPORT + "\n" + before;
+  if (dry) {
+    return { status: "applied", reason: "(dry) 최상단에 @import 추가 예정", before, after };
+  }
+  copyFileSync(filePath, filePath + ".bak");
+  writeFileSync(filePath, after, "utf8");
+  return { status: "applied", reason: "최상단에 @import 추가", before, after };
+}
+
+const THEME_CONTROLLER_IMPORT_RE =
+  /import\s*\{\s*ThemeController\s*\}\s*from\s*["'][^"']+ThemeController["']\s*;?/;
+const THEME_BOOT_IMPORT_RE =
+  /import\s*\{\s*themeBootScript\s*\}\s*from\s*["'][^"']+themeBootScript["']\s*;?/;
+
+/**
+ * layout.tsx 자동 패치:
+ *   1) ThemeController import + <body>를 <ThemeController>로 wrap
+ *   2) themeBootScript import + <head> 안 blocking <script> 삽입 (FOUC 방지)
+ *   3) <html>에 suppressHydrationWarning 추가 (boot script가 attr을 미리 세팅하므로)
+ *
+ * 각 단계는 멱등 — 이미 적용돼 있으면 그 단계만 skip. 둘 다 skip이면 전체 skip 리턴.
+ * <body> 매칭 실패 같은 치명 조건에선 전체 fail — fallback 수동 안내.
+ */
+export function patchLayoutTsx(
+  filePath,
+  {
+    dry = false,
+    importPath = "../components/ctds/ThemeController",
+    bootImportPath = "../components/ctds/themeBootScript",
+  } = {},
+) {
+  if (!existsSync(filePath)) {
+    return { status: "failed", reason: `파일 없음: ${filePath}` };
+  }
+  const before = readFileSync(filePath, "utf8");
+
+  const hasController =
+    THEME_CONTROLLER_IMPORT_RE.test(before) || /<ThemeController[\s>]/.test(before);
+  const hasBoot =
+    THEME_BOOT_IMPORT_RE.test(before) || /themeBootScript\s*\(/.test(before);
+
+  if (hasController && hasBoot) {
+    return { status: "skipped", reason: "ThemeController + boot script가 이미 wiring 돼 있어요." };
+  }
+
+  let next = before;
+  const applied = [];
+
+  // 1) ThemeController wrap
+  if (!hasController) {
+    const bodyRe = /<body(\s[^>]*)?>([\s\S]*?)<\/body>/;
+    const match = next.match(bodyRe);
+    if (!match) {
+      return { status: "failed", reason: "<body> 태그를 찾지 못했어요 — 수동 설정 필요." };
+    }
+    const secondBodyIdx = next.indexOf("<body", match.index + 5);
+    if (secondBodyIdx !== -1) {
+      return { status: "failed", reason: "<body>가 둘 이상이에요 — 수동 설정 필요." };
+    }
+    const [, attrs = "", inner] = match;
+    const wrapped =
+      `<body${attrs}>\n` +
+      `        <ThemeController>${inner}</ThemeController>\n` +
+      `      </body>`;
+    next = insertAfterLastImport(next, `import { ThemeController } from "${importPath}";`);
+    next = next.replace(bodyRe, wrapped);
+    applied.push("ThemeController wrap");
+  }
+
+  // 2) themeBootScript import + <head> 안 <script> 삽입
+  if (!hasBoot) {
+    next = insertAfterLastImport(next, `import { themeBootScript } from "${bootImportPath}";`);
+    const scriptTag = `<script dangerouslySetInnerHTML={{ __html: themeBootScript() }} />`;
+    // <head>...</head> 쌍 매칭 우선. 없으면 self-closed <head />를 쌍 형태로 치환.
+    const headPairRe = /<head(\s[^>]*)?>([\s\S]*?)<\/head>/;
+    const headSelfRe = /<head(\s[^>]*)?\/>/;
+    if (headPairRe.test(next)) {
+      next = next.replace(headPairRe, (_m, attrs = "", inner) => {
+        const a = attrs ? ` ${attrs.trim()}` : "";
+        return `<head${a}>${inner}\n        ${scriptTag}\n      </head>`;
+      });
+    } else if (headSelfRe.test(next)) {
+      next = next.replace(headSelfRe, (_m, attrs = "") => {
+        const a = attrs ? ` ${attrs.trim()}` : "";
+        return `<head${a}>\n        ${scriptTag}\n      </head>`;
+      });
+    } else {
+      // <head>가 아예 없으면 <html ...> 바로 다음에 <head>를 신규 삽입.
+      const htmlOpenRe = /<html(\s[^>]*)?>/;
+      if (!htmlOpenRe.test(next)) {
+        return { status: "failed", reason: "<html> 태그를 찾지 못했어요 — 수동 설정 필요." };
+      }
+      next = next.replace(htmlOpenRe, (m) => `${m}\n      <head>\n        ${scriptTag}\n      </head>`);
+    }
+    applied.push("boot script 삽입");
+  }
+
+  // 3) <html>에 suppressHydrationWarning 추가 (boot script가 attr을 재세팅하므로 필요)
+  if (!/suppressHydrationWarning/.test(next)) {
+    next = next.replace(/<html(\s[^>]*)?>/, (m, attrs = "") => {
+      return `<html${attrs} suppressHydrationWarning>`;
+    });
+    applied.push("suppressHydrationWarning");
+  }
+
+  if (next === before) {
+    return { status: "skipped", reason: "변경 사항 없음." };
+  }
+  if (dry) {
+    return { status: "applied", reason: `(dry) ${applied.join(" + ")}`, before, after: next };
+  }
+  copyFileSync(filePath, filePath + ".bak");
+  writeFileSync(filePath, next, "utf8");
+  return { status: "applied", reason: applied.join(" + "), before, after: next };
+}
+
+/** 파일 상단의 마지막 import 바로 아래에 line 삽입. import가 없으면 파일 최상단. */
+function insertAfterLastImport(source, line) {
+  const lastImportMatch = [...source.matchAll(/^import\s[^\n]+\n/gm)].pop();
+  if (lastImportMatch) {
+    const insertAt = lastImportMatch.index + lastImportMatch[0].length;
+    return source.slice(0, insertAt) + line + "\n" + source.slice(insertAt);
+  }
+  return line + "\n\n" + source;
+}

package/assets/components/AttachmentChip/AttachmentChip.module.css

@@ -1,73 +0,0 @@
-/* AttachmentChip — [FileIcon] filename [X]
-   레퍼런스: ChatInput 안에서 쓰이는 둥근 사각 — radius-md, hairline border. */
-
-.root {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-width: 0;
-  background: var(--bg);
-  border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--fg);
-  transition: var(--transition-colors);
-}
-
-/* 패딩만 size 차이. 오른쪽은 X 버튼 자리라 좁게. 폭은 고정 — label이 길면 ellipsis. */
-.sizeSm {
-  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-1);
-  font-size: var(--text-xs);
-  width: calc(var(--space-20) * 2);
-}
-.sizeMd {
-  padding: var(--space-1_5) var(--space-1_5) var(--space-1_5) var(--space-1_5);
-  font-size: var(--text-sm);
-  width: calc(var(--space-24) * 2);
-}
-
-/* 파일명 */
-.label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--fg-strong);
-  line-height: 1.2;
-  padding-right: var(--space-1);
-}
-
-/* X 버튼 — size에 따라 width/height가 변하도록 토큰 조합 */
-.removeBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--fg-muted);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: var(--transition-colors);
-  width: var(--space-5);
-  height: var(--space-5);
-  flex: 0 0 auto;
-}
-.sizeSm .removeBtn {
-  width: var(--space-4);
-  height: var(--space-4);
-}
-
-.removeBtn:hover {
-  background: var(--bg-subtle);
-  color: var(--fg);
-}
-.removeBtn:focus-visible {
-  outline: none;
-  box-shadow: var(--ring);
-}
-
-.removeIcon {
-  width: 70%;
-  height: 70%;
-}

package/assets/components/AttachmentChip/AttachmentChip.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import type { HTMLAttributes, MouseEvent } from "react";
-import { X as PhX } from "@phosphor-icons/react";
-import { FileIcon, type FileIconSize } from "@/components/ctds/FileIcon";
-import styles from "./AttachmentChip.module.css";
-
-export type AttachmentChipSize = "sm" | "md";
-
-export interface AttachmentChipProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "onError"> {
-  /** 파일명. 확장자가 FileIcon 색/라벨을 결정. */
-  filename: string;
-  /** 지정 시 우측에 X 노출, 클릭 시 호출. */
-  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
-  /** sm=padding·icon 작게 / md=기본. */
-  size?: AttachmentChipSize;
-}
-
-const sizeClass: Record<AttachmentChipSize, string> = {
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-};
-
-const fileIconSize: Record<AttachmentChipSize, FileIconSize> = {
-  sm: "sm",
-  md: "md",
-};
-
-/** 긴 파일명을 중간 생략으로 자르되 확장자는 유지.
- *  "very-long-report-name.pdf" → "very-long-rep…pdf" */
-function middleEllipsis(filename: string, max = 28): string {
-  if (filename.length <= max) return filename;
-  const dot = filename.lastIndexOf(".");
-  if (dot < 0 || dot < filename.length - 6) {
-    return filename.slice(0, max - 1) + "…";
-  }
-  const ext = filename.slice(dot); // ".pdf"
-  const head = filename.slice(0, Math.max(1, max - ext.length - 1));
-  return head + "…" + ext;
-}
-
-export function AttachmentChip({
-  filename,
-  onRemove,
-  size = "md",
-  className,
-  ...rest
-}: AttachmentChipProps) {
-  const cls = [styles.root, sizeClass[size], className]
-    .filter(Boolean)
-    .join(" ");
-
-  const label = middleEllipsis(filename);
-
-  return (
-    <span className={cls} {...rest}>
-      <FileIcon ext={filename} size={fileIconSize[size]} />
-      <span className={styles.label} title={filename}>
-        {label}
-      </span>
-      {onRemove ? (
-        <button
-          type="button"
-          className={styles.removeBtn}
-          onClick={onRemove}
-          aria-label="첨부 제거"
-        >
-          <PhX className={styles.removeIcon} weight="regular" />
-        </button>
-      ) : null}
-    </span>
-  );
-}

package/assets/components/AttachmentChip/index.ts

@@ -1,2 +0,0 @@
-export { AttachmentChip } from "./AttachmentChip";
-export type { AttachmentChipProps, AttachmentChipSize } from "./AttachmentChip";

package/assets/components/Calendar/Calendar.module.css

@@ -1,163 +0,0 @@
-/* Calendar ───────────────────────────────────────────────────
-   페이지에 인라인으로 들어가는 월간 캘린더. DatePicker와 분리.
-   레이아웃은 flex column + 그리드 flex-1로 뷰포트 높이에 반응.
-   스크롤 2-레이어 규약: cellEvents는 overflow:hidden 유지 — 넘치면
-   hiddenCount로 "+N" 뱃지가 대체한다 (내부 스크롤 금지). */
-.root {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  background: var(--bg);
-  color: var(--fg);
-}
-
-/* Toolbar ──────────────────────────────────────────────────── */
-.toolbar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-block: var(--space-2);
-  gap: var(--space-3);
-}
-
-.toolbarSide {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.toolbarSide[data-align="end"] {
-  justify-content: flex-end;
-}
-
-.monthNav {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.monthTitle {
-  min-width: calc(var(--space-2) * 14);
-  text-align: center;
-  font-family: var(--font-normal);
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-medium);
-  color: var(--fg);
-}
-
-/* "오늘"은 현재 달이 아닐 때만 등장. 사라져도 toolbar 높이가 흔들리지 않도록
-   자리를 유지하고 visibility만 토글. */
-.todaySlot {
-  visibility: hidden;
-}
-.todaySlot[data-visible] {
-  visibility: visible;
-}
-
-/* Weekdays ─────────────────────────────────────────────────── */
-.weekdays {
-  display: grid;
-  gap: 0;
-}
-
-.weekday {
-  padding-block: var(--space-2);
-  text-align: center;
-  font-family: var(--label-font);
-  font-size: var(--text-xs);
-  color: var(--fg-muted);
-  letter-spacing: var(--label-tracking);
-}
-
-.weekday[data-tone="sat"] { color: var(--info); }
-.weekday[data-tone="sun"] { color: var(--destructive); }
-
-/* Month grid ────────────────────────────────────────────────
-   보더는 그리드가 전체 둘레(top/left)를 그리고, 각 셀이 right/bottom만 그린다.
-   이렇게 하면 열 수(5열/7열)가 바뀌어도 왼쪽 세로선이 안정적으로 유지됨. */
-.grid {
-  display: grid;
-  flex: 1 1 0;
-  min-height: 0;
-  border-top: var(--hairline) solid var(--border);
-  border-left: var(--hairline) solid var(--border);
-}
-
-/* Cell ───────────────────────────────────────────────────── */
-.cell {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  min-width: 0;
-  min-height: 0;
-  padding: var(--space-2);
-  border-right: var(--hairline) solid var(--border);
-  border-bottom: var(--hairline) solid var(--border);
-  overflow: hidden;
-  background: var(--bg);
-  cursor: pointer;
-  transition: var(--transition-colors);
-}
-
-.cell:hover:not([data-selected]) {
-  background: var(--hover);
-}
-
-.cell:focus-visible {
-  outline: var(--ring-width) solid var(--ring);
-  outline-offset: calc(-1 * var(--ring-width));
-}
-
-/* selected 셀 — inset ring. active 상태 위 hover가 border/bg를 덮지 않도록
-   ring만 사용 (feedback_hover_over_active 규약). */
-.cell[data-selected] {
-  z-index: var(--z-raise);
-  box-shadow: inset 0 0 0 var(--ring-width) var(--primary);
-}
-
-.cellHead {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.dayNum {
-  font-family: var(--font-normal);
-  font-size: var(--text-sm);
-  color: var(--fg);
-  line-height: 1;
-}
-
-.dayNum[data-tone="muted"] { color: var(--fg-disabled); }
-.dayNum[data-tone="sat"]   { color: var(--info); }
-.dayNum[data-tone="sun"]   { color: var(--destructive); }
-
-.dayNum[data-selected],
-.cell[data-today] .dayNum:not([data-tone="muted"]) {
-  color: var(--primary);
-  font-weight: var(--font-weight-medium);
-}
-
-.cellBadges {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.cellEvents {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  flex: 1 1 0;
-  min-height: 0;
-  overflow: hidden;
-}