@conscience-technology/ctds 0.3.1 → 0.3.3

package/assets/components/CommandPalette/CommandPalette.module.css

@@ -1,203 +0,0 @@
-/* CommandPalette ─────────────────────────────────────────────────
-   ⌘K 전역 명령 창. Modal과 다른 쉘:
-   - 세로: top 20vh (중앙 아님). 리스트가 아래로 자라야.
-   - 너비: 좁음(640 수준). 리스트 모양 집중.
-   - dismiss: 바깥 클릭 허용(가벼운 상호작용).
-   아이템 시각은 MenuItem이 담당 — 여기선 쉘·Input·List 트랙·cmdk 매핑만. */
-
-/* Overlay ───────────────────────────────────────────────── */
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-overlay);
-  background: var(--scrim);
-  animation: cmdk-overlay-in var(--duration-base) var(--ease-out);
-}
-
-.overlay[data-state="closed"] {
-  animation: cmdk-overlay-out var(--duration-fast) var(--ease-in);
-}
-
-/* Content ───────────────────────────────────────────────── */
-.content {
-  position: fixed;
-  top: 20vh;
-  left: 50%;
-  z-index: var(--z-modal);
-  display: flex;
-  flex-direction: column;
-  width: calc(100vw - var(--space-8));
-  /* 640 = space-2(8) * 80. Modal(440)보다 넓다 — 리스트가 들어가야. */
-  max-width: calc(var(--space-2) * 80);
-  /* 아래로 자라는 영역: 상단 20vh + 하단 10vh 여백 확보 → 최대 70vh. */
-  max-height: 70vh;
-  background: var(--bg);
-  border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  font-family: var(--font-sans);
-  color: var(--fg);
-  outline: none;
-  overflow: hidden;
-  animation: cmdk-content-in var(--duration-slow) var(--ease-out);
-  transform: translateX(-50%);
-  will-change: transform, opacity;
-}
-
-.content[data-state="closed"] {
-  animation: cmdk-content-out var(--duration-base) var(--ease-in);
-}
-
-/* cmdk 루트 — content 내부 꽉 채움. 세로 flex. */
-.command {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-/* Input row ─────────────────────────────────────────────── */
-/* 상단 고정 영역: 좌측 아이콘 + 네이티브 input.
-   border-bottom만 — 전체 border는 content가 담당. */
-.inputRow {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0 var(--space-4);
-  height: calc(var(--space-2) * 7);
-  border-bottom: var(--hairline) solid var(--border);
-  flex-shrink: 0;
-}
-
-.inputIcon {
-  display: inline-flex;
-  color: var(--fg-muted);
-  flex-shrink: 0;
-}
-
-.input {
-  flex: 1 1 auto;
-  min-width: 0;
-  height: 100%;
-  background: transparent;
-  border: 0;
-  outline: 0;
-  padding: 0;
-  margin: 0;
-  color: var(--fg);
-  font-family: inherit;
-  font-size: var(--text-base);
-  line-height: var(--lh-base);
-}
-
-.input::placeholder {
-  color: var(--fg-subtle);
-}
-
-/* List ──────────────────────────────────────────────────── */
-/* 2단 스크롤 패턴: 바깥(.list)이 overflow, padding은 아이템이 담당하는 그룹/트랙에.
-   cmdk가 내부에 .list 콘텐츠 트랙을 자동 생성하지 않으므로 padding을 여기 직접. */
-.list {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--space-1);
-  scroll-padding: var(--space-1);
-}
-
-/* Empty ─────────────────────────────────────────────────── */
-.empty {
-  padding: var(--space-6) var(--space-4);
-  text-align: center;
-  color: var(--fg-muted);
-  font-size: var(--text-sm);
-  line-height: var(--lh-sm);
-}
-
-/* Group ─────────────────────────────────────────────────── */
-/* heading은 MenuItem variant="section"으로 렌더되므로 Group 자체 스타일은 거의 없음.
-   그룹 간 상단 여백만 — 첫 그룹은 제외. */
-.group {
-  /* cmdk가 heading을 [cmdk-group-heading] div로 감싸므로 그 내부 레이아웃만 조정. */
-}
-
-.group + .group {
-  margin-top: var(--space-1);
-}
-
-/* heading 자체는 MenuItem variant="section" 시각 — 추가 marginReset만. */
-.groupHeading {
-  margin: 0;
-}
-
-/* Separator ─────────────────────────────────────────────── */
-/* DropdownMenu·ContextMenu의 separator 규칙과 동일 — 토큰 재사용. */
-.separator {
-  height: var(--hairline);
-  margin: var(--space-1) var(--space-2);
-  background: var(--border);
-}
-
-/* cmdk ↔ MenuItem 매핑 ────────────────────────────────────
-   cmdk는 활성 아이템(↑↓ 선택)에 data-selected="true"를 세팅.
-   MenuItem은 data-active를 fill 스타일로 처리하므로, 둘을 동일 셀렉터에 매핑.
-   asChild로 MenuItem에 cmdk 속성이 전달됨 → 하위 요소에 그대로 적용된다. */
-.list [cmdk-item][data-selected="true"] {
-  background: var(--menu-active-bg, var(--hover));
-  color: var(--menu-active-fg, var(--fg-strong));
-}
-
-/* 활성 아이템 안의 leading 아이콘 색도 fg-strong으로 전파. MenuItem과 동일 규칙. */
-.list [cmdk-item][data-selected="true"] [data-slot="leading"] {
-  color: var(--menu-active-fg, var(--fg-strong));
-}
-
-/* 비활성(cmdk-disabled) 아이템은 MenuItem이 이미 disabled 시각 처리하지만,
-   cmdk 측 상호작용(선택/엔터)이 꺼지는 건 cmdk가 담당. */
-
-/* Animations ────────────────────────────────────────────── */
-@keyframes cmdk-overlay-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes cmdk-overlay-out {
-  from { opacity: 1; }
-  to   { opacity: 0; }
-}
-
-@keyframes cmdk-content-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, calc(var(--space-1) * -1)) scale(var(--cmdk-scale-from, 0.98));
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-}
-
-@keyframes cmdk-content-out {
-  from {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, calc(var(--space-1) * -1)) scale(var(--cmdk-scale-from, 0.98));
-  }
-}
-
-:root[data-motion="bouncy"]   .content { --cmdk-scale-from: 0.96; }
-:root[data-motion="standard"] .content { --cmdk-scale-from: 0.98; }
-:root[data-motion="calm"]     .content { --cmdk-scale-from: 0.99; }
-:root[data-motion="none"]     .content { --cmdk-scale-from: 1; }
-
-@media (prefers-reduced-motion: reduce) {
-  .overlay,
-  .overlay[data-state="closed"],
-  .content,
-  .content[data-state="closed"] {
-    animation: none;
-  }
-}

package/assets/components/CommandPalette/CommandPalette.tsx

@@ -1,262 +0,0 @@
-"use client";
-
-/**
- * CommandPalette ─ ⌘K 스타일 전역 명령 검색 창.
- *
- * 조립
- * - Radix Dialog: 쉘(open/portal/overlay/focus trap/ESC)
- * - cmdk: 검색 입력·결과 리스트·fuzzy 필터·↑↓ 네비게이션·role 매핑
- * - MenuItem: 결과 아이템의 시각 (DropdownMenu·ContextMenu와 동일 어댑터)
- *
- * 소비 표면
- *   <CommandPalette open={open} onOpenChange={setOpen}>
- *     <CommandPalette.Input placeholder="검색..." />
- *     <CommandPalette.List>
- *       <CommandPalette.Empty>결과 없음</CommandPalette.Empty>
- *       <CommandPalette.Group heading="페이지">
- *         <CommandPalette.Item onSelect={...} leadingIcon="house">대시보드</CommandPalette.Item>
- *       </CommandPalette.Group>
- *     </CommandPalette.List>
- *   </CommandPalette>
- *
- * Modal과 다른 점
- * - 위치: 상단 쪽(top 20vh). 리스트가 아래로 자라야 하므로.
- * - dismiss: 바깥 클릭 허용. 가벼운 상호작용.
- * - 포커스: 열리면 Input 자동 포커스 → ↑↓로 리스트 네비.
- */
-
-import * as RadixDialog from "@radix-ui/react-dialog";
-import { Command } from "cmdk";
-import {
-  createContext,
-  forwardRef,
-  useContext,
-  type ComponentPropsWithoutRef,
-  type ReactNode,
-} from "react";
-
-import { Icon, IconAxisProvider, useIconAxis, type IconName } from "../Icon";
-import { MenuItem, type MenuItemAction, type MenuItemSize } from "../MenuItem";
-import styles from "./CommandPalette.module.css";
-
-/* Size context — Content가 Item 기본 size 결정. 메뉴들과 동일 패턴. */
-const SizeContext = createContext<MenuItemSize>("md");
-
-/* Root ─────────────────────────────────────────────────────────── */
-
-export interface CommandPaletteProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** 리스트 아이템 밀도. 기본 md. */
-  size?: MenuItemSize;
-  /** 스크린리더 라벨. 시각적으로 숨겨진 다이얼로그 타이틀. */
-  label?: string;
-  children?: ReactNode;
-}
-
-const Root = forwardRef<HTMLDivElement, CommandPaletteProps>(function CommandPalette(
-  { open, onOpenChange, size = "md", label = "명령 검색", children },
-  ref,
-) {
-  const iconAxis = useIconAxis();
-  return (
-    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
-      <RadixDialog.Portal>
-        <RadixDialog.Overlay className={styles.overlay} />
-        <RadixDialog.Content
-          ref={ref}
-          className={styles.content}
-          aria-label={label}
-        >
-          <RadixDialog.Title className="visually-hidden">{label}</RadixDialog.Title>
-          <IconAxisProvider value={iconAxis}>
-            <SizeContext.Provider value={size}>
-              <Command className={styles.command} label={label}>
-                {children}
-              </Command>
-            </SizeContext.Provider>
-          </IconAxisProvider>
-        </RadixDialog.Content>
-      </RadixDialog.Portal>
-    </RadixDialog.Root>
-  );
-});
-
-/* Input ────────────────────────────────────────────────────────── */
-
-export interface InputProps
-  extends Omit<ComponentPropsWithoutRef<typeof Command.Input>, "ref"> {
-  /** 좌측 아이콘. 기본 search. null이면 숨김. */
-  leadingIcon?: IconName | null;
-}
-
-const InputCmd = forwardRef<HTMLInputElement, InputProps>(function CommandPaletteInput(
-  { className, leadingIcon = "search", placeholder = "검색...", ...rest },
-  ref,
-) {
-  return (
-    <div className={styles.inputRow}>
-      {leadingIcon && (
-        <span className={styles.inputIcon} aria-hidden>
-          <Icon name={leadingIcon} />
-        </span>
-      )}
-      <Command.Input
-        ref={ref}
-        placeholder={placeholder}
-        className={[styles.input, className ?? ""].filter(Boolean).join(" ")}
-        {...rest}
-      />
-    </div>
-  );
-});
-
-/* List ─────────────────────────────────────────────────────────── */
-
-const List = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof Command.List>>(
-  function CommandPaletteList({ className, children, ...rest }, ref) {
-    return (
-      <Command.List
-        ref={ref}
-        className={[styles.list, className ?? ""].filter(Boolean).join(" ")}
-        {...rest}
-      >
-        {children}
-      </Command.List>
-    );
-  },
-);
-
-/* Empty ────────────────────────────────────────────────────────── */
-
-const Empty = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof Command.Empty>>(
-  function CommandPaletteEmpty({ className, children, ...rest }, ref) {
-    return (
-      <Command.Empty
-        ref={ref}
-        className={[styles.empty, className ?? ""].filter(Boolean).join(" ")}
-        {...rest}
-      >
-        {children ?? "결과가 없어요"}
-      </Command.Empty>
-    );
-  },
-);
-
-/* Group ────────────────────────────────────────────────────────── */
-
-export interface GroupProps
-  extends Omit<ComponentPropsWithoutRef<typeof Command.Group>, "heading"> {
-  heading?: ReactNode;
-}
-
-const Group = forwardRef<HTMLDivElement, GroupProps>(function CommandPaletteGroup(
-  { className, heading, children, ...rest },
-  ref,
-) {
-  const size = useContext(SizeContext);
-  return (
-    <Command.Group
-      ref={ref}
-      className={[styles.group, className ?? ""].filter(Boolean).join(" ")}
-      heading={
-        heading ? (
-          <MenuItem variant="section" size={size} className={styles.groupHeading}>
-            {heading}
-          </MenuItem>
-        ) : undefined
-      }
-      {...rest}
-    >
-      {children}
-    </Command.Group>
-  );
-});
-
-/* Separator ────────────────────────────────────────────────────── */
-
-const Separator = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof Command.Separator>>(
-  function CommandPaletteSeparator({ className, ...rest }, ref) {
-    return (
-      <Command.Separator
-        ref={ref}
-        className={[styles.separator, className ?? ""].filter(Boolean).join(" ")}
-        {...rest}
-      />
-    );
-  },
-);
-
-/* Item ─────────────────────────────────────────────────────────── */
-
-export interface ItemProps
-  extends Omit<ComponentPropsWithoutRef<typeof Command.Item>, "children"> {
-  /** 좌측 아이콘 이름. leading 슬롯 간결 사용. */
-  leadingIcon?: IconName;
-  /** 커스텀 좌측 노드. leadingIcon보다 우선. */
-  leadingActions?: MenuItemAction[];
-  /** 우측 메타(배지·숫자 등). */
-  trailingActions?: MenuItemAction[];
-  /** 오른쪽 끝 단축키 (예: "⌘N"). */
-  shortcut?: string;
-  /** 라벨 아래 보조 설명 한 줄. */
-  description?: ReactNode;
-  size?: MenuItemSize;
-  children?: ReactNode;
-}
-
-const Item = forwardRef<HTMLDivElement, ItemProps>(function CommandPaletteItem(
-  {
-    leadingIcon,
-    leadingActions,
-    trailingActions,
-    shortcut,
-    description,
-    size,
-    disabled,
-    children,
-    ...rest
-  },
-  ref,
-) {
-  const ctxSize = useContext(SizeContext);
-  const effectiveSize = size ?? ctxSize;
-  const leading: MenuItemAction[] | undefined =
-    leadingActions ?? (leadingIcon ? [<Icon key="icon" name={leadingIcon} />] : undefined);
-  return (
-    <Command.Item disabled={disabled} {...rest} asChild>
-      <MenuItem
-        ref={ref}
-        size={effectiveSize}
-        leadingActions={leading}
-        trailingActions={trailingActions}
-        shortcut={shortcut}
-        description={description}
-        disabled={disabled}
-      >
-        {children}
-      </MenuItem>
-    </Command.Item>
-  );
-});
-
-/* Compound export ──────────────────────────────────────────────── */
-
-type CommandPaletteComponent = typeof Root & {
-  Input: typeof InputCmd;
-  List: typeof List;
-  Empty: typeof Empty;
-  Group: typeof Group;
-  Separator: typeof Separator;
-  Item: typeof Item;
-};
-
-const CommandPalette = Root as CommandPaletteComponent;
-CommandPalette.Input = InputCmd;
-CommandPalette.List = List;
-CommandPalette.Empty = Empty;
-CommandPalette.Group = Group;
-CommandPalette.Separator = Separator;
-CommandPalette.Item = Item;
-
-export { CommandPalette };

package/assets/components/CommandPalette/index.ts

@@ -1,9 +0,0 @@
-export { CommandPalette } from "./CommandPalette";
-export type {
-  CommandPaletteProps,
-  InputProps as CommandPaletteInputProps,
-  GroupProps as CommandPaletteGroupProps,
-  ItemProps as CommandPaletteItemProps,
-} from "./CommandPalette";
-export { useCommandPaletteHotkey } from "./useCommandPaletteHotkey";
-export type { HotkeyOptions as CommandPaletteHotkeyOptions } from "./useCommandPaletteHotkey";

package/assets/components/CommandPalette/useCommandPaletteHotkey.ts

@@ -1,49 +0,0 @@
-"use client";
-
-/**
- * useCommandPaletteHotkey ─ Command Palette 토글 전역 단축키 훅.
- * 기본값 ⌘K / Ctrl+K. 입력 요소에서도 동작한다(검색 창은 어디서든 열려야 함).
- *
- * 사용
- *   const [open, setOpen] = useState(false);
- *   useCommandPaletteHotkey(() => setOpen((v) => !v));
- *
- * 커스텀 키
- *   useCommandPaletteHotkey(toggle, { key: "p", mod: true, shift: true }); // ⌘⇧P
- */
-
-import { useEffect } from "react";
-
-export type HotkeyOptions = {
-  /** 단일 문자 키 (소문자). 기본 "k". */
-  key?: string;
-  /** Meta(⌘)/Ctrl 필수 여부. 기본 true. */
-  mod?: boolean;
-  /** Shift 필수 여부. 기본 false. */
-  shift?: boolean;
-  /** Alt 필수 여부. 기본 false. */
-  alt?: boolean;
-  /** 비활성 플래그. 조건부 활성 때 유용. */
-  disabled?: boolean;
-};
-
-export function useCommandPaletteHotkey(
-  callback: () => void,
-  options: HotkeyOptions = {},
-): void {
-  const { key = "k", mod = true, shift = false, alt = false, disabled = false } = options;
-  useEffect(() => {
-    if (disabled) return;
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key.toLowerCase() !== key.toLowerCase()) return;
-      if (mod && !(e.metaKey || e.ctrlKey)) return;
-      if (!mod && (e.metaKey || e.ctrlKey)) return;
-      if (shift !== e.shiftKey) return;
-      if (alt !== e.altKey) return;
-      e.preventDefault();
-      callback();
-    }
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [callback, key, mod, shift, alt, disabled]);
-}

package/assets/components/EventCard/EventCard.module.css

@@ -1,133 +0,0 @@
-/*
- * EventCard — 리스트에 쌓이는 일정 아이템.
- * 좌: 날짜 블록(큰 숫자 + 요일 소문자) · 세로 hairline · 우: 제목 + status + meta.
- *
- * chrome: --radius-lg + 1px --border + --bg. 그림자 금지.
- * interactive: href 있을 때만 hover/focus ring.
- */
-
-.root {
-  display: flex;
-  align-items: stretch;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  color: inherit;
-  text-decoration: none;
-  min-width: 0;
-}
-
-.interactive {
-  cursor: pointer;
-  transition: var(--transition-colors), var(--transition-ring);
-}
-
-.interactive:hover {
-  background: var(--hover);
-}
-
-.interactive:focus-visible {
-  outline: none;
-  box-shadow: var(--ring-shadow);
-}
-
-/* 날짜 블록 — 좌측 고정 폭. 숫자가 2자리 기준으로 흔들리지 않도록 min-width 트랙. */
-.dateBlock {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--space-8); /* 2자리 숫자 트랙 (한 단계 조임) */
-  padding-inline: var(--space-0_5);
-  flex-shrink: 0;
-}
-
-.day {
-  font-size: var(--text-xl);
-  line-height: var(--lh-tight);
-  font-weight: var(--font-weight-semibold); /* xl=20px → semibold 허용 */
-  font-variant-numeric: tabular-nums;
-  color: var(--fg-strong);
-}
-
-.weekday {
-  font-size: var(--text-3xs);
-  line-height: var(--lh-3xs);
-  font-weight: var(--font-weight-regular);
-  color: var(--fg-muted);
-  /* 소문자 유지. uppercase 금지 */
-}
-
-/* 세로 hairline — border-left shorthand로 (리터럴 width 금지 회피) */
-.divider {
-  border-inline-start: 1px solid var(--border);
-  align-self: stretch;
-  flex-shrink: 0;
-}
-
-/* 본문 — 제목 + 메타 라인 */
-.body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  justify-content: center;
-}
-
-.title {
-  margin: 0;
-  font-size: var(--text-xs);
-  line-height: var(--lh-xs);
-  font-weight: var(--font-weight-medium); /* 20px 미만 → medium */
-  color: var(--fg-strong);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 메타 라인 — status Badge + 아이콘+텍스트 N개. 사이는 짧은 세로 hairline. */
-.metaRow {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1_5);
-  flex-wrap: wrap;
-  min-width: 0;
-  color: var(--fg-muted);
-}
-
-.metaItem {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: var(--text-2xs);
-  line-height: var(--lh-2xs);
-  color: var(--fg-muted);
-  min-width: 0;
-}
-
-/* 메타 라인 안에서 "앞선 형제가 있을 때만" 왼쪽 hairline. 첫 아이템은 항상 제거,
-   앞 slot이 비었다가 뒤에 하나만 나오는 경우에도 자동으로 안 그려진다. */
-.metaRow > * + .metaItem {
-  padding-inline-start: var(--space-1_5);
-  border-inline-start: 1px solid var(--border);
-}
-
-.metaIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--fg-muted);
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.metaLabel {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}