@conscience-technology/ctds 0.1.14 → 0.2.0

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.1.14",
-  "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI",
+  "version": "0.2.0",
+  "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI (shadcn식 코드 생성기)",
   "type": "module",
+  "sideEffects": [
+    "assets/components/**/*.css",
+    "assets/app/**/*.css"
+  ],
   "bin": {
     "ctds": "./bin/ctds.js"
   },
@@ -13,6 +17,13 @@
     "templates",
     "README.md"
   ],
+  "exports": {
+    ".": {
+      "import": "./bin/ctds.js"
+    },
+    "./assets/*": "./assets/*",
+    "./templates/*": "./templates/*"
+  },
   "scripts": {
     "bundle-assets": "node ./scripts/bundle-assets.mjs",
     "prepublishOnly": "npm run bundle-assets"
@@ -23,7 +34,11 @@
   "keywords": [
     "ctds",
     "design-system",
-    "cli"
+    "cli",
+    "shadcn",
+    "nextjs",
+    "react",
+    "tokens"
   ],
   "license": "MIT",
   "publishConfig": {
@@ -33,5 +48,67 @@
     "type": "git",
     "url": "git+https://github.com/Conscience-Technology/CTDS.git",
     "directory": "packages/ctds-cli"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "next": ">=14.0.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "solar-icon-set": "^2.0.1",
+    "lucide-react": "^1.47.0",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.2.0",
+    "@radix-ui/react-toast": "^1.2.24",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "@phosphor-icons/react": {
+      "optional": true
+    },
+    "solar-icon-set": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "@radix-ui/react-popover": {
+      "optional": true
+    },
+    "@radix-ui/react-select": {
+      "optional": true
+    },
+    "@radix-ui/react-tooltip": {
+      "optional": true
+    },
+    "@radix-ui/react-context-menu": {
+      "optional": true
+    },
+    "@radix-ui/react-dialog": {
+      "optional": true
+    },
+    "@radix-ui/react-toast": {
+      "optional": true
+    },
+    "@radix-ui/react-slot": {
+      "optional": true
+    },
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    }
   }
 }

package/src/commands/init.js

@@ -23,6 +23,7 @@ import { checkMissingDeps, renderInstallCmd } from "../utils/deps.js";
 import { c, step, success, warn, info, kv } from "../utils/log.js";
 import { computeFilesMap, writeMeta } from "../utils/meta.js";
 import { hasDevScript, startDevAndOpen } from "../utils/launch.js";
+import { patchGlobalsCss, patchLayoutTsx } from "../utils/patch.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const CLI_PKG_PATH = join(__dirname, "..", "..", "package.json");
@@ -126,45 +127,74 @@ export async function run(args) {
     }
   }
 
-  // 3) 수동 안내 — layout.tsx wrapper + globals.css import + AI 에이전트 안내
+  // 3) 자동 패치 — globals.css import + layout.tsx ThemeController wrapper
   console.log("");
   console.log(c.bold("설치 완료"));
   console.log(c.dim("—").repeat(40));
   success("자동으로 복사·생성된 파일은 위 리스트와 같습니다.");
   console.log("");
 
-  console.log(c.bold("다음 두 가지를 수동으로 설정해주세요:"));
-  console.log("");
+  const manualFallbacks = [];
 
   // 3-1) globals.css — tokens.css import (폰트 + CTDS 토큰 + 축 셀렉터 전부 포함)
   const globalsRel = project.useSrcDir ? "src/app/globals.css" : "app/globals.css";
-  info(`${c.bold("1)")} ${c.cyan(globalsRel)} 최상단에 다음 한 줄을 추가:`);
-  console.log(c.dim("```css"));
-  console.log(`@import "../components/ctds/tokens.css";`);
-  console.log(c.dim("```"));
-  console.log(c.dim("    tokens.css가 폰트 로드 + CTDS 토큰 + Palette/Shape/Density/Motion/Mode"));
-  console.log(c.dim("    축 셀렉터까지 전부 담당합니다. 이 import 하나면 CTDS 작동 OK."));
-  console.log("");
+  const globalsAbs = resolve(cwd, globalsRel);
+  const globalsResult = patchGlobalsCss(globalsAbs, { dry });
+  if (globalsResult.status === "applied") {
+    step(dry ? `[dry] 패치` : `패치`, `${globalsRel} — @import 추가`);
+  } else if (globalsResult.status === "skipped") {
+    info(`${globalsRel} — ${globalsResult.reason}`);
+  } else {
+    warn(`${globalsRel} 자동 패치 실패: ${globalsResult.reason}`);
+    manualFallbacks.push({
+      title: `${c.cyan(globalsRel)} 최상단에 다음 한 줄을 추가:`,
+      lang: "css",
+      body: `@import "../components/ctds/tokens.css";`,
+      note: "tokens.css가 폰트 로드 + CTDS 토큰 + 축 셀렉터 전부 담당합니다.",
+    });
+  }
 
   // 3-2) layout.tsx wrapper
   const layoutRel = project.useSrcDir ? "src/app/layout.tsx" : "app/layout.tsx";
-  info(`${c.bold("2)")} ${c.cyan(layoutRel)} 의 <html>·<body>를 아래 형태로 수정:`);
-  console.log(c.dim("```tsx"));
-  console.log(renderLayoutSnippet(project));
-  console.log(c.dim("```"));
-  console.log("");
+  const layoutAbs = resolve(cwd, layoutRel);
+  const layoutResult = patchLayoutTsx(layoutAbs, { dry });
+  if (layoutResult.status === "applied") {
+    step(dry ? `[dry] 패치` : `패치`, `${layoutRel} — <body>를 ThemeController로 감쌈`);
+  } else if (layoutResult.status === "skipped") {
+    info(`${layoutRel} — ${layoutResult.reason}`);
+  } else {
+    warn(`${layoutRel} 자동 패치 실패: ${layoutResult.reason}`);
+    manualFallbacks.push({
+      title: `${c.cyan(layoutRel)} 의 <html>·<body>를 아래 형태로 수정:`,
+      lang: "tsx",
+      body: renderLayoutSnippet(project),
+    });
+  }
 
   // 3-3) 의존성 체크
   const { missing } = checkMissingDeps(cwd);
   if (missing.length > 0) {
-    info(`${c.bold("3)")} 다음 패키지를 설치해주세요 (CTDS 컴포넌트가 필요):`);
-    console.log(c.dim("```bash"));
-    console.log(renderInstallCmd(missing));
-    console.log(c.dim("```"));
-    console.log("");
+    manualFallbacks.push({
+      title: "다음 패키지를 설치해주세요 (CTDS 컴포넌트가 필요):",
+      lang: "bash",
+      body: renderInstallCmd(missing),
+    });
   } else {
     success("필요한 의존성이 모두 설치돼 있어요.");
+  }
+
+  if (manualFallbacks.length > 0) {
+    console.log("");
+    console.log(c.bold("수동 설정이 남았어요:"));
     console.log("");
+    manualFallbacks.forEach((m, idx) => {
+      info(`${c.bold(`${idx + 1})`)} ${m.title}`);
+      console.log(c.dim("```" + m.lang));
+      console.log(m.body);
+      console.log(c.dim("```"));
+      if (m.note) console.log(c.dim("    " + m.note));
+      console.log("");
+    });
   }
 
   // 4) 다음 단계
@@ -172,9 +202,9 @@ export async function run(args) {
   console.log(c.dim("—").repeat(40));
   console.log("");
 
-  // 수동 설정이 남은 경우(globals.css import / layout.tsx wrapper / 의존성) 자동 실행 보류.
-  // 서버가 안 뜨거나 뜨더라도 화면이 깨져서 혼란만 커짐.
-  const needsManual = missing.length > 0;
+  // 수동 설정이 남은 경우(globals.css import 자동 패치 실패 / layout.tsx wrapper 실패 /
+  // 의존성 설치 필요) 자동 실행 보류. 서버가 안 뜨거나 뜨더라도 화면이 깨져서 혼란만 커짐.
+  const needsManual = manualFallbacks.length > 0;
 
   if (dry || noOpen || needsManual || !hasDevScript(cwd)) {
     console.log(`  ${c.cyan("npm run dev")}`);

package/src/utils/deps.js

@@ -1,27 +1,33 @@
 /**
  * CTDS 런타임 의존성 체크 + 설치 명령 생성.
  * 사용자 플젝 package.json을 읽어 빠진 패키지만 안내.
+ *
+ * Single source of truth: ctds-cli/package.json의 peerDependencies.
+ * react/react-dom/next는 소비자가 당연히 가진다고 가정하고 체크에서 제외.
  */
 
 import { existsSync, readFileSync } from "node:fs";
-import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { dirname, join, resolve } from "node:path";
 
-/** CTDS 컴포넌트가 실제로 import하는 외부 패키지. */
-export const CTDS_RUNTIME_DEPS = {
-  "@phosphor-icons/react": "^2.1.10",
-  "solar-icon-set": "^2.0.1",
-  "lucide-react": "^1.47.0",
-  "@radix-ui/react-popover": "^1.1.23",
-  "@radix-ui/react-select": "^2.3.7",
-  "@radix-ui/react-tooltip": "^1.2.16",
-  "@radix-ui/react-context-menu": "^2.3.7",
-  "@radix-ui/react-dialog": "^1.2.0",
-  "@radix-ui/react-toast": "^1.2.24",
-  "@radix-ui/react-slot": "^1.3.3",
-  "@dnd-kit/core": "^6.3.1",
-  "@dnd-kit/sortable": "^10.0.0",
-  "@dnd-kit/utilities": "^3.2.2",
-};
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const CLI_PKG_PATH = resolve(__dirname, "../../package.json");
+
+/** 소비자 레포가 당연히 가진 호스트 환경 패키지. install 안내 대상에서 제외. */
+const HOST_DEPS = new Set(["react", "react-dom", "next"]);
+
+/** CTDS 컴포넌트가 실제로 import하는 외부 패키지. CLI 자체 package.json에서 읽어온다. */
+export const CTDS_RUNTIME_DEPS = (() => {
+  const pkg = JSON.parse(readFileSync(CLI_PKG_PATH, "utf8"));
+  const peers = pkg.peerDependencies ?? {};
+  const runtime = {};
+  for (const [name, range] of Object.entries(peers)) {
+    if (HOST_DEPS.has(name)) continue;
+    runtime[name] = range;
+  }
+  return runtime;
+})();
 
 /**
  * 사용자 플젝의 package.json을 읽어 CTDS가 필요로 하는 deps 중 빠진 것 리스트.

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/index.ts

@@ -1,6 +0,0 @@
-export { AttachmentChip } from "./AttachmentChip";
-export type {
-  AttachmentChipProps,
-  AttachmentChipSize,
-  AttachmentChipState,
-} 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;
-}