@conscience-technology/ctds 0.1.14 → 0.2.0

package/assets/components/Calendar/Calendar.tsx

@@ -1,323 +0,0 @@
-"use client";
-
-import {
-  forwardRef,
-  memo,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type HTMLAttributes,
-  type ReactNode,
-} from "react";
-
-import { Badge } from "../Badge";
-import { Button } from "../Button";
-import { EventChip, type EventChipTone } from "../EventChip";
-import { Icon } from "../Icon";
-import { IconButton } from "../IconButton";
-import {
-  addMonths,
-  buildMonthGrid,
-  isSameDay,
-  isSameMonth,
-  formatISODate,
-  MONTH_LABELS_KO,
-  WEEKDAY_LABELS_KO,
-  startOfMonth,
-} from "../DatePicker/utils";
-import styles from "./Calendar.module.css";
-
-export type CalendarEventTone = EventChipTone;
-
-export type CalendarEvent = {
-  id: string;
-  /** ISO yyyy-MM-dd */
-  date: string;
-  title: string;
-  tone?: CalendarEventTone;
-};
-
-export type CalendarProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
-  /** 현재 보여줄 달. controlled. */
-  month: Date;
-  /** 오늘 날짜. 테스트/스토리북에서 고정하려면 넘김. 기본 new Date(). */
-  today?: Date;
-  /** 선택된 날짜. 셀 하이라이트. */
-  selectedDate?: Date | null;
-  events?: CalendarEvent[];
-  /** 요일 시작. 0=일, 1=월. 기본 1 (업무 캘린더 관행). */
-  weekStartsOn?: 0 | 1;
-  showWeekend?: boolean;
-  /** 상단바 왼쪽 커스텀 슬롯 (예: Google 연결 상태). */
-  leadingSlot?: ReactNode;
-  /** 상단바 오른쪽 "오늘" 버튼 표시 여부. 기본 true. */
-  showTodayButton?: boolean;
-  onMonthChange?: (next: Date) => void;
-  onSelectedDateChange?: (next: Date) => void;
-};
-
-const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
-  {
-    className,
-    month,
-    today: todayProp,
-    selectedDate = null,
-    events = [],
-    weekStartsOn = 1,
-    showWeekend = true,
-    leadingSlot,
-    showTodayButton = true,
-    onMonthChange,
-    onSelectedDateChange,
-    ...rest
-  },
-  ref,
-) {
-  const today = useMemo(() => todayProp ?? new Date(), [todayProp]);
-  const monthStart = useMemo(() => startOfMonth(month), [month]);
-  const isTodayMonth = isSameMonth(monthStart, today);
-
-  const allDays = useMemo(
-    () => buildMonthGrid(monthStart, weekStartsOn),
-    [monthStart, weekStartsOn],
-  );
-  const weeks = allDays.length / 7;
-
-  const weekdays = useMemo(() => {
-    const list = [...WEEKDAY_LABELS_KO];
-    for (let i = 0; i < weekStartsOn; i += 1) list.push(list.shift() as string);
-    return list;
-  }, [weekStartsOn]);
-
-  const visibleWeekdays = showWeekend ? weekdays : weekdays.filter((_, i) => !isWeekendIndex(i, weekStartsOn));
-  const visibleDays = showWeekend
-    ? allDays
-    : allDays.filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
-
-  const eventsByDate = useMemo(() => groupEventsByDate(events), [events]);
-
-  const shiftMonth = (delta: number) => onMonthChange?.(addMonths(monthStart, delta));
-  const shiftYear = (delta: number) => {
-    const next = new Date(monthStart);
-    next.setFullYear(next.getFullYear() + delta);
-    onMonthChange?.(next);
-  };
-
-  const columns = showWeekend ? 7 : 5;
-
-  return (
-    <div
-      ref={ref}
-      className={[styles.root, className].filter(Boolean).join(" ")}
-      {...rest}
-    >
-      <div className={styles.toolbar}>
-        <div className={styles.toolbarSide}>{leadingSlot}</div>
-
-        <div className={styles.monthNav}>
-          <IconButton
-            variant="ghost"
-            size="sm"
-            aria-label="이전 해"
-            icon={<Icon name="caret-double-left" />}
-            onClick={() => shiftYear(-1)}
-          />
-          <IconButton
-            variant="ghost"
-            size="sm"
-            aria-label="이전 달"
-            icon={<Icon name="caret-left" />}
-            onClick={() => shiftMonth(-1)}
-          />
-          <span className={styles.monthTitle}>
-            {monthStart.getFullYear()}년 {MONTH_LABELS_KO[monthStart.getMonth()]}
-          </span>
-          <IconButton
-            variant="ghost"
-            size="sm"
-            aria-label="다음 달"
-            icon={<Icon name="caret-right" />}
-            onClick={() => shiftMonth(1)}
-          />
-          <IconButton
-            variant="ghost"
-            size="sm"
-            aria-label="다음 해"
-            icon={<Icon name="caret-double-right" />}
-            onClick={() => shiftYear(1)}
-          />
-        </div>
-
-        <div className={styles.toolbarSide} data-align="end">
-          {showTodayButton && (
-            <div data-visible={(!isTodayMonth) || undefined} className={styles.todaySlot}>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  onMonthChange?.(startOfMonth(today));
-                  onSelectedDateChange?.(today);
-                }}
-              >
-                오늘
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div
-        className={styles.weekdays}
-        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
-      >
-        {visibleWeekdays.map((w) => (
-          <div
-            key={w}
-            className={styles.weekday}
-            data-tone={weekdayTone(w)}
-          >
-            {w}
-          </div>
-        ))}
-      </div>
-
-      <div
-        className={styles.grid}
-        style={{
-          gridTemplateColumns: `repeat(${columns}, 1fr)`,
-          gridTemplateRows: `repeat(${weeks}, minmax(0, 1fr))`,
-        }}
-      >
-        {visibleDays.map((day) => {
-          const key = formatISODate(day);
-          return (
-            <DayCell
-              key={key}
-              day={day}
-              month={monthStart}
-              today={today}
-              events={eventsByDate.get(key) ?? []}
-              isSelected={!!selectedDate && isSameDay(day, selectedDate)}
-              onSelect={() => onSelectedDateChange?.(day)}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-});
-
-export { Calendar };
-
-/* ───────────────────────── DayCell ───────────────────────── */
-
-type DayCellProps = {
-  day: Date;
-  month: Date;
-  today: Date;
-  events: CalendarEvent[];
-  isSelected: boolean;
-  onSelect: () => void;
-};
-
-const DayCell = memo(function DayCell({
-  day,
-  month,
-  today,
-  events,
-  isSelected,
-  onSelect,
-}: DayCellProps) {
-  const outside = !isSameMonth(day, month);
-  const isToday = isSameDay(day, today);
-  const isPast = day.getTime() < new Date(today).setHours(0, 0, 0, 0);
-  const dow = day.getDay();
-  const tone = outside || isPast ? "muted" : dow === 0 ? "sun" : dow === 6 ? "sat" : "default";
-
-  const eventsRef = useRef<HTMLDivElement>(null);
-  const [hiddenCount, setHiddenCount] = useState(0);
-
-  useLayoutEffect(() => {
-    const container = eventsRef.current;
-    if (!container) return;
-    const recalc = () => {
-      const containerBottom = container.getBoundingClientRect().bottom;
-      const children = Array.from(container.children) as HTMLElement[];
-      let visible = 0;
-      for (const child of children) {
-        if (child.getBoundingClientRect().bottom <= containerBottom + 1) {
-          visible += 1;
-        } else {
-          break;
-        }
-      }
-      setHiddenCount(Math.max(0, events.length - visible));
-    };
-    recalc();
-    const ro = new ResizeObserver(recalc);
-    ro.observe(container);
-    return () => ro.disconnect();
-  }, [events.length]);
-
-  return (
-    <div
-      className={styles.cell}
-      data-outside={outside || undefined}
-      data-today={isToday || undefined}
-      data-selected={isSelected || undefined}
-      role="button"
-      tabIndex={0}
-      onClick={onSelect}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onSelect();
-        }
-      }}
-    >
-      <div className={styles.cellHead}>
-        <span className={styles.dayNum} data-tone={tone} data-selected={isSelected || undefined}>
-          {day.getDate()}
-        </span>
-        <span className={styles.cellBadges}>
-          {hiddenCount > 0 && <Badge size="sm" variant="soft">+{hiddenCount}</Badge>}
-          {isToday && <Badge size="sm" variant="soft">오늘</Badge>}
-        </span>
-      </div>
-      <div ref={eventsRef} className={styles.cellEvents}>
-        {events.map((ev) => (
-          <EventChip
-            key={ev.id}
-            title={ev.title}
-            tone={ev.tone}
-            faded={outside}
-          />
-        ))}
-      </div>
-    </div>
-  );
-});
-
-/* ───────────────────────── helpers ───────────────────────── */
-
-function groupEventsByDate(events: CalendarEvent[]): Map<string, CalendarEvent[]> {
-  const map = new Map<string, CalendarEvent[]>();
-  for (const ev of events) {
-    const list = map.get(ev.date) ?? [];
-    list.push(ev);
-    map.set(ev.date, list);
-  }
-  return map;
-}
-
-function isWeekendIndex(i: number, weekStartsOn: 0 | 1): boolean {
-  if (weekStartsOn === 0) return i === 0 || i === 6;
-  return i === 5 || i === 6;
-}
-
-function weekdayTone(label: string): "sat" | "sun" | "default" {
-  if (label === "토") return "sat";
-  if (label === "일") return "sun";
-  return "default";
-}

package/assets/components/Calendar/index.ts

@@ -1,2 +0,0 @@
-export { Calendar } from "./Calendar";
-export type { CalendarProps, CalendarEvent, CalendarEventTone } from "./Calendar";

package/assets/components/MessageAttachment/index.ts

@@ -1,5 +0,0 @@
-export { MessageAttachment } from "./MessageAttachment";
-export type {
-  MessageAttachmentProps,
-  MessageAttachmentAspect,
-} from "./MessageAttachment";

package/assets/prompts/components/calendar.md

@@ -1,116 +0,0 @@
-# Calendar
-
-### 원칙
-
-페이지에 **인라인**으로 들어가는 월간 캘린더. 날짜 하나를 "고르기만 하는" [[components/date-picker]]와는 역할이 완전히 다르다 — Calendar는 **콘텐츠로서의 달력**이다. 셀마다 이벤트 pill이 쌓이고, 선택된 날짜가 페이지 다른 영역(사이드 리스트·상세 패널)의 입력이 된다. 그래서 Popover 안에 넣지 않는다. 날짜 입력이 필요하면 DatePicker, 월간 뷰가 필요하면 Calendar.
-
-### Do
-- `month`는 controlled — 외부 상태로 쥔다. `onMonthChange` 짝. `selectedDate`도 controlled.
-- 이벤트 pill의 `tone`은 **의미**에 매핑. 색은 7개 토큰(default/accent/success/warning/danger/info/neutral)만 — Presto류 14색 팔레트 재현 금지.
-- 셀을 넘치는 이벤트는 자동으로 `+N` 뱃지로 접힌다. 내부 스크롤을 만들지 않는다 — 셀 안 스크롤은 밀도 신호를 깬다.
-- `weekStartsOn`은 기본 `1` (월요일) — 업무 캘린더 관행. 생활 캘린더는 `0`으로 명시.
-- 토요일은 `--info`, 일요일은 `--destructive` 톤. 이 두 색만 요일 신호로 쓰고 임의 색 추가 금지.
-- 선택된 셀은 inset ring(--primary)로만 신호한다. 배경을 primary로 채우지 않는다 — 그 자리는 이벤트 pill 공간이다.
-- 보더는 그리드가 top/left를, 각 셀이 right/bottom을 그린다 — 열 수가 바뀌어도(5↔7) 왼쪽 세로선이 안정적으로 유지된다. 셀 nth-child 보더 제거 트릭 쓰지 말 것.
-
-### Don't
-- Popover로 감싸지 않는다 — 이건 DatePicker 자리. Calendar는 페이지 레이아웃의 블록 영역을 차지한다.
-- 셀 안에 "클릭 가능한 이벤트 pill"을 만들지 않는다 — 셀 전체가 하나의 클릭 타겟이고, 상세는 사이드 패널·Drawer에서 연다. pill 안에 또 버튼이 들어가면 클릭 영역이 미궁에 빠진다.
-- 요일 헤더에 "월요일/화요일" 두 글자 표기 금지 — "월·화" 한 글자. 두 글자는 가로 공간을 먹고 셀 수가 줄어든 느낌을 준다.
-- 하루 셀에 이벤트 pill 5개 이상 노출 금지. 넘치면 `+N`으로 접고 선택 시 사이드 리스트에 전부 뿌린다.
-- `showWeekend=false`일 때 토·일 셀 자리를 유지하지 않는다 — 숨길 거면 열 자체를 5열로 접는다.
-- 이벤트 pill에 `pill` radius(완전 둥근) 쓰지 않는다 — Shape 축이 radius를 쥐고 있는데 pill로 고정하면 Soft/Standard/Crisp 신호가 셀 안에서 깨진다.
-- Calendar 자체 상단바에 "주말 숨김" 류 **뷰 옵션 토글**을 넣지 않는다 — Calendar는 콘텐츠 블록이고, 뷰 옵션은 호스트 화면의 툴바 영역이 담당한다. 외부 state로 `showWeekend`를 넘겨 조립할 것. (월 이동·오늘 복귀는 Calendar 내부 — 뷰 옵션이 아니라 "지금 보는 좌표" 조작이므로 예외.)
-
-### Fallback
-`today` 생략하면 `new Date()`. `selectedDate` 없이도 성립 — 그냥 뷰어로 쓸 수 있다. `events` 빈 배열이어도 그리드만 그려진다. `tone` 애매하면 `default`.
-
-### 관련
-- [[components/event-chip]] — 셀 안에 쌓이는 일정 블록. Calendar가 자동으로 그려주지만 톤·props 체계는 EventChip 문서를 1차 참조.
-- [[components/date-picker]] — "날짜 입력"이 목적이면 그쪽. Popover + Input 트리거. Calendar와 utils(buildMonthGrid 등) 공유.
-- [[components/badge]] — "+N"·"오늘" 메타 뱃지는 Badge soft. EventChip 톤 체계도 Badge와 동일 토큰.
-- [[components/icon-button]] — 월 이동 네비게이션(이전해·이전달·다음달·다음해 4개). ghost + sm.
-- [[components/button]] — "오늘" 복귀 버튼은 outline·sm.
-- [[axes/shape]] — 셀 radius는 없음(격자형이라 radius 신호를 셀이 받지 않음). EventChip·Badge만 Shape 축에 반응.
-- [[axes/density]] — compact일수록 셀 padding이 줄고 EventChip이 더 많이 보임.
-- [[tokens/color]] — `--primary`(선택), `--hover`(셀 hover), `--border`(hairline), `--info`/`--destructive`(요일 신호).
-
-### Props 시그니처
-
-```tsx
-<Calendar
-  month={Date}                                    // required — 현재 보여줄 달 (controlled)
-  today={Date}                                    // default: new Date()
-  selectedDate={Date | null}                      // 셀 하이라이트
-  events={CalendarEvent[]}                        // id/date/title/code?/tone?/resolved?
-  weekStartsOn={0 | 1}                            // default: 1 (월)
-  showWeekend={boolean}                           // default: true
-  leadingSlot={ReactNode}                         // 상단바 왼쪽 — Google 연결 뱃지 등
-  showTodayButton={boolean}                       // default: true
-  onMonthChange={(next: Date) => void}
-  onSelectedDateChange={(next: Date) => void}
-/>
-
-type CalendarEvent = {
-  id: string;
-  date: string;                                   // yyyy-MM-dd
-  title: string;
-  tone?: "default" | "accent" | "success" | "warning" | "danger" | "info" | "neutral";
-};
-// 셀 안 렌더링은 EventChip이 담당. 상세 라벨(코드·시각·주최자)은 Calendar 밖
-// 사이드 패널·상세 뷰에서 다룬다. [[components/event-chip]] 참조.
-```
-
-### Tone
-
-이벤트 톤 7개(default/neutral/accent/success/warning/danger/info) — 상세 매트릭스는 [[components/event-chip]]에서 1차 정의한다. Calendar는 `event.tone`을 그대로 EventChip에 전달.
-
-**금지 조합**
-- `tone="danger"`를 "눈에 띄게" 쓰려고 전부 danger로 깔기 — 색이 의미 신호를 잃는다. 셀당 1개가 danger라면 다른 셀은 default/accent여야 한다.
-- Calendar를 가로 너비 300px 미만에 끼워넣기 — 셀이 사각형을 못 지키고 pill 1개도 안 들어간다. 이 자리는 DatePicker.
-- `showWeekend=false` + 월말 날짜가 토/일에 몰린 달 — 선택 가능한 셀이 사라져 "클릭이 안 되는 날짜"가 생긴다. 주말 숨김은 평일만 다루는 업무 캘린더 전용.
-
-### 조합 예시
-
-```tsx
-// 기본 — 페이지 메인에 깔리는 월간 뷰
-const [month, setMonth] = useState(new Date());
-const [selected, setSelected] = useState<Date | null>(new Date());
-
-<Calendar
-  month={month}
-  selectedDate={selected}
-  events={events}
-  onMonthChange={setMonth}
-  onSelectedDateChange={setSelected}
-/>
-
-// 2단 레이아웃 — 선택 날짜 상세 패널과 짝. 리스트는 ListItem으로 조립.
-<div className="flex min-h-0 flex-1">
-  <Calendar
-    month={month}
-    selectedDate={selected}
-    events={events}
-    onMonthChange={setMonth}
-    onSelectedDateChange={setSelected}
-  />
-  <aside className="w-80 shrink-0 border-l border-[var(--border)]">
-    <SelectedDayPanel date={selected} items={eventsOf(selected)} />
-  </aside>
-</div>
-
-// 외부 상태 신호가 있는 상단바 — leadingSlot으로 Badge 꽂음
-<Calendar
-  leadingSlot={<Badge variant="soft" status="info">Google 연결됨</Badge>}
-  month={month}
-  onMonthChange={setMonth}
-/>
-
-// 업무 전용 — 주말 숨김, 월요일 시작
-<Calendar
-  month={month}
-  showWeekend={false}
-  weekStartsOn={1}
-  onMonthChange={setMonth}
-/>
-```

package/assets/prompts/components/form-field.md

@@ -1,74 +0,0 @@
-# FormField
-
-### 원칙
-
-라벨 · 설명 · 에러 · required 별표를 담당하는 폼 필드 래퍼. 자식 입력 컨트롤([[components/input]] · [[components/date-picker]] · Select 등)의 접근성 속성(`id` · `aria-describedby` · `aria-invalid` · `required`)을 자동으로 연결한다. 입력 컨트롤 자체는 이 속성들을 직접 관리하지 않는다.
-
-### Do
-- 라벨이 필요한 모든 폼 컨트롤은 `FormField`로 감싼다.
-- `FormField.Label`은 항상 첫 번째 자식. 그 다음 `Description`, 컨트롤, `Error` 순.
-- `invalid`는 FormField에 준다 — 자식 컨트롤이 자동으로 `aria-invalid`를 받는다. 컨트롤에도 `invalid`를 넘겨 시각 피드백을 켜준다.
-- `required`는 FormField에 준다 — 라벨에 별표(*)가 자동으로 붙고 컨트롤에 `required` 속성이 전파된다.
-- 에러 문구는 반드시 `FormField.Error` 컴포넌트로 넣는다. 임의의 `<p>`나 텍스트로 두지 않는다 — `role="alert"`과 aria 연결이 깨진다.
-
-### Don't
-- 한 FormField 안에 두 개 이상의 컨트롤을 두지 않는다. 라벨/에러 대응이 1:1이 아니게 됨.
-- `Description`을 에러 메시지로 쓰지 않는다. Description은 상시 힌트, Error는 검증 실패 시 표시.
-- `Label`의 `htmlFor`를 수동 지정하지 않는다 — FormField가 자동 생성한 id와 어긋난다.
-
-### Fallback
-`required` 여부가 애매하면 `false`. 필수 입력이 확정되면 켠다. `invalid`는 상위 폼 상태에서 파생된 값을 넘긴다 (컴포넌트가 스스로 판단하지 않음).
-
-### 관련
-- [[components/input]] — 가장 자주 조합되는 자식.
-- [[components/date-picker]] — 트리거 Input이 FormField의 자식이 될 수 있음.
-- [[tokens/color]] — `--destructive`(에러 · required 별표), `--fg-muted`(설명).
-- [[tokens/typography]] — 라벨은 `--text-sm` · `medium`, 설명/에러는 `--text-xs`.
-
-### Props 시그니처
-
-```tsx
-<FormField
-  invalid={boolean}
-  disabled={boolean}
-  required={boolean}
-  id={string}                          // 없으면 자동 생성
->
-  <FormField.Label>...</FormField.Label>
-  <FormField.Description>...</FormField.Description>
-  <Input ... />                        // 자식 컨트롤
-  <FormField.Error>...</FormField.Error>
-</FormField>
-```
-
-**하위:**
-- `FormField.Label` — `htmlFor` 자동. `required=true`면 별표 자동.
-- `FormField.Description` — 상시 힌트. `id` 자동 → 컨트롤의 `aria-describedby`에 연결.
-- `FormField.Error` — `invalid=true`일 때만 렌더링. `role="alert"` 포함.
-
-### Variant 매트릭스
-
-FormField 자체는 variant가 없다. 자식 컨트롤의 variant를 따른다.
-
-| 상태 | 시각 반응 |
-|---|---|
-| `required` | 라벨에 destructive 색 별표(*) |
-| `invalid` | 자식 컨트롤에 `aria-invalid` 전파 + Error 노출 |
-| `disabled` | 자식 컨트롤에 `disabled` 전파 |
-
-### 조합 예시
-
-```tsx
-<FormField required invalid={!!emailError}>
-  <FormField.Label>이메일</FormField.Label>
-  <FormField.Description>업무용 이메일을 입력해주세요.</FormField.Description>
-  <Input
-    type="email"
-    value={email}
-    onChange={(e) => setEmail(e.target.value)}
-    invalid={!!emailError}
-    leftIcon={<MailIcon />}
-  />
-  <FormField.Error>{emailError}</FormField.Error>
-</FormField>
-```

package/assets/prompts/components/message-attachment.md

@@ -1,40 +0,0 @@
-# Message Attachment
-
-### 원칙
-AI가 생성한 **큰 이미지**를 메시지 안에 보여주는 블록. 작은 썸네일(첨부물 바에 들어가는 것)은 [[components/attachment-thumb]]. 생성 중엔 sparkle 숨쉼, 완료되면 cover 이미지. hover 시 다운로드 버튼.
-
-### Do
-- 세로형 포스터가 기본 (`aspect="portrait"` = 3:4) — 레퍼런스 톤.
-- `loading` 중엔 그라데이션 + sparkle 애니. src 세팅되면 자동 전환.
-- 다운로드가 필요하면 `onDownload` 전달 — hover 시 우상단 버튼 노출.
-- 이미지 폭은 `--input-w-lg` 기준으로 약간 크게. 메시지 너비 안에서 자동 fit.
-
-### Don't
-- MessageAttachment를 작은 썸네일 용도로 쓰지 않는다 — [[components/attachment-thumb]].
-- loading과 src 동시에 넘기지 않는다 — loading이 우선.
-- 다운로드 버튼을 상시 노출하지 않는다 — hover/focus-within에서만.
-
-### Fallback
-aspect 애매하면 `portrait`. src 없으면 placeholder (sparkle 정적).
-
-### 관련
-- [[components/attachment-thumb]] — 작은 썸네일
-- [[components/ai-message]] — 상위 소비처
-
-### Props 시그니처
-```tsx
-<MessageAttachment
-  src={string}                           // 생성된 이미지 URL
-  alt={string}
-  aspect="portrait | square | landscape" // default: portrait
-  loading={boolean}                      // 생성 중 — sparkle 애니
-  onDownload={(e) => void}               // 지정 시 hover download 버튼
-/>
-```
-
-### 레이아웃
-- 외곽: `radius-md`, `max-width: input-w-lg × 1.1`, overflow hidden
-- aspect-ratio로 비율 고정 (`3/4`·`1/1`·`4/3`)
-- loading/placeholder bg: `/illustrations/image-gen-placeholder.png` (public에 저장된 그라데이션 placeholder)
-- 로딩 중 중앙 아이콘: [[components/spinner]] `variant="lottie-dots"` `size="md"`, 색은 `--bg` (bg 이미지 위에서 흰 톤)
-- Download 버튼: `space-8` 정사각, 우상단 inset `space-2`, hover 시 fade-in + scale