@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/Toolbar/Toolbar.module.css

@@ -0,0 +1,72 @@
+/* Root ───────────────────────────────────────────────
+   가로 action 줄. IconButton·Button·텍스트 트리거를 품는다.
+   표현은 variant가 쥐고, 내부 구조(gap/정렬)만 공통.
+   단일 size — IconButton md(24)에 맞춘 bar 높이.
+
+   ▸ Toolbar 내부 로컬 override: IconButton md 히트박스를 살짝 넓힌다.
+     기본 24 → 28. 아이콘 자체 크기는 그대로 두고 주변 여유만 확장해서
+     클릭 영역이 넉넉해지도록. */
+.root {
+  --iconbtn-h-md: var(--control-h-sm);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: var(--control-h-md);
+  width: max-content;
+  padding-block: var(--space-1_5);
+  padding-inline: var(--space-2);
+  color: var(--fg);
+  box-sizing: border-box;
+}
+
+/* stretch=true : 콘텐츠 폭이 아니라 부모 폭을 꽉 채움 (attached의 기본값). */
+.root[data-stretch] {
+  display: flex;
+  width: 100%;
+}
+
+/* Variants ──────────────────────────────────────────── */
+
+/* floating — 떠 있는 알약.
+   bg-elevated + 얕은 그림자 + 큰 radius. 콘텐츠 위에 살짝 떠 있는 느낌.
+   무게감은 hairline이 쥐고, 그림자는 분리감만 더한다. */
+.root[data-variant="floating"] {
+  background: var(--bg-elevated, var(--bg));
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
+}
+
+/* attached — 콘텐츠에 붙은 bar.
+   자체 bg 없음 + 하단 hairline만. 에디터 상단·문서 chrome. */
+.root[data-variant="attached"] {
+  background: transparent;
+  border: 0;
+  border-bottom: var(--hairline) solid var(--border);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* Group ─────────────────────────────────────────────── */
+.group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-0_5);
+  flex-shrink: 0;
+}
+
+/* Divider ───────────────────────────────────────────────
+   세로 hairline. 그룹 사이 시각 구분.
+   굵기 --hairline 고정, 상/하 margin으로 아이콘 라인에서 살짝 안쪽. */
+.divider {
+  width: var(--hairline);
+  align-self: stretch;
+  background: var(--border);
+  margin-inline: var(--space-1);
+  margin-block: var(--space-1_5);
+}
+
+/* Spacer ───────────────────────────────────────────── */
+.spacer {
+  flex: 1 1 auto;
+}

package/assets/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { cn } from "../_cn";
+import styles from "./Toolbar.module.css";
+
+/* Root ─────────────────────────────────────────────────
+   툴바 — IconButton 중심의 action 줄. 단일 size.
+   variant:
+     - floating  : 떠 있는 알약(bg-elevated + shadow-md + radius-xl)
+     - attached  : 콘텐츠에 붙은 bar (transparent + 하단 hairline) */
+export type ToolbarVariant = "floating" | "attached";
+
+export interface ToolbarProps extends HTMLAttributes<HTMLElement> {
+  variant?: ToolbarVariant;
+  /** 가로 꽉 채울지(attached에 어울림) vs 콘텐츠 폭(floating). 기본은 variant로 자동 결정. */
+  stretch?: boolean;
+}
+
+const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarProps>(function ToolbarRoot(
+  { variant = "floating", stretch, className, children, role = "toolbar", ...rest },
+  ref,
+) {
+  const resolvedStretch = stretch ?? variant === "attached";
+  return (
+    <div
+      ref={ref}
+      role={role}
+      className={cn(styles.root, className)}
+      data-variant={variant}
+      data-stretch={resolvedStretch || undefined}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+/* Group ─────────────────────────────────────────────────
+   관련 액션 묶음. 내부는 좁은 gap, 그룹 간은 Divider 또는 넓은 gap으로 구분. */
+interface ToolbarGroupProps extends HTMLAttributes<HTMLDivElement> {}
+
+function ToolbarGroup({ className, children, ...rest }: ToolbarGroupProps) {
+  return (
+    <div className={cn(styles.group, className)} role="group" {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/* Divider ───────────────────────────────────────────────
+   세로 hairline. 그룹 사이 시각 구분. */
+function ToolbarDivider() {
+  return <div className={styles.divider} role="separator" aria-orientation="vertical" />;
+}
+
+/* Spacer ────────────────────────────────────────────────
+   좌/우 정렬용 flex:1. */
+function ToolbarSpacer() {
+  return <div className={styles.spacer} aria-hidden />;
+}
+
+type ToolbarComponent = typeof ToolbarRoot & {
+  Group: typeof ToolbarGroup;
+  Divider: typeof ToolbarDivider;
+  Spacer: typeof ToolbarSpacer;
+};
+
+const Toolbar = ToolbarRoot as ToolbarComponent;
+Toolbar.Group = ToolbarGroup;
+Toolbar.Divider = ToolbarDivider;
+Toolbar.Spacer = ToolbarSpacer;
+
+export { Toolbar };

package/assets/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export { Toolbar } from "./Toolbar";
+export type { ToolbarProps, ToolbarVariant } from "./Toolbar";

package/assets/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,42 @@
+.content {
+  position: relative;
+  color: var(--tooltip-fg);
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+  max-width: 240px;
+  white-space: pre-line;
+  user-select: none;
+  z-index: var(--z-tooltip);
+  /* 배경/그림자는 SVG path에 걸림 */
+  filter: drop-shadow(var(--shadow-drop));
+  /* 앵커(트리거) 엣지에서 자라나는 느낌을 위해 Radix가 계산한 원점 사용 */
+  transform-origin: var(--radix-tooltip-content-transform-origin);
+}
+
+/* In · Out 애니메이션은 전역 유틸 `.m-float`가 담당한다.
+   Tooltip.tsx에서 Content className에 "m-float"을 concat해 발동.
+   Radix Tooltip은 delayed-open · closed state를 데이터 어트리뷰트로 노출하므로
+   유틸이 그대로 매칭한다. */
+
+/* SVG shape: content 크기에 딱 맞게 절대 위치 */
+.shape {
+  position: absolute;
+  inset: 0;
+  display: block;
+  pointer-events: none;
+}
+.shapePath {
+  fill: var(--tooltip-bg);
+}
+
+/* 텍스트 레이어: SVG 위에 올라감. side별로 tail 크기만큼 패딩을 밀어줌 */
+.text {
+  position: relative;
+  padding: var(--space-1) var(--space-2);
+}
+.content[data-side="top"] .text    { padding-bottom: calc(var(--space-1) + var(--tail)); }
+.content[data-side="bottom"] .text { padding-top: calc(var(--space-1) + var(--tail)); }
+.content[data-side="left"] .text   { padding-right: calc(var(--space-2) + var(--tail)); }
+.content[data-side="right"] .text  { padding-left: calc(var(--space-2) + var(--tail)); }
+
+/* keyframes(m-emerge-*)는 globals.css의 Motion 프리미티브에서 정의됨 */

package/assets/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import styles from "./Tooltip.module.css";
+
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  /** 튀어나올 방향. 뷰포트 충돌 시 자동 flip. 기본 top. */
+  side?: Side;
+  /** 그 방향에서의 정렬. 기본 center. */
+  align?: Align;
+  /** 트리거와의 간격 (px). 기본 6. */
+  sideOffset?: number;
+  /**
+   * 꼭지(arrow)의 위치를 중심에서 얼마나 밀지 (px).
+   * side=top/bottom이면 x축, side=left/right면 y축으로 이동.
+   * 기본 0 = 툴팁 본체의 정중앙.
+   * followMouse가 true면 이 값은 무시됩니다.
+   */
+  arrowOffset?: number;
+  /**
+   * 마우스가 트리거 위에서 움직일 때 꼭지가 마우스를 따라가게 함.
+   * side=top/bottom일 때 x축, left/right일 때 y축을 따라감.
+   */
+  followMouse?: boolean;
+  delayDuration?: number;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 화살표 표시 여부. 기본 true. */
+  arrow?: boolean;
+}
+
+/* --- SVG path 프리셋 ---
+   body(rounded rect) + tail(삼각형)을 하나의 path로 그린다.
+   폭/높이는 사용처의 크기를 따라가고, 꼭지 위치는 CSS 변수 --arrow-x/--arrow-y로 제어. */
+
+// 각 side별 path 함수: 컨테이너 크기(width, height)와 꼭지 위치(arrowPos), 꼭지 크기(tail), radius를 받아 path d 문자열 반환
+const TAIL = 6; // 꼭지 크기 (side offset이 이만큼 필요)
+const RADIUS = 6;
+
+function buildPath(
+  side: Side,
+  w: number,
+  h: number,
+  arrowPos: number, // side가 top/bottom이면 x좌표, left/right면 y좌표
+  hasArrow: boolean
+): string {
+  const r = Math.min(RADIUS, Math.min(w, h) / 2);
+  const t = TAIL;
+
+  if (side === "top") {
+    // body는 0..w-t 세로, arrow는 아래로 삐죽
+    const bodyH = h - t;
+    // arrow 위치는 x축, tail의 tip이 아래로 나감
+    const cx = clamp(arrowPos, r + t, w - r - t);
+    return [
+      `M${r},0`,
+      `H${w - r}`,
+      `Q${w},0 ${w},${r}`,
+      `V${bodyH - r}`,
+      `Q${w},${bodyH} ${w - r},${bodyH}`,
+      hasArrow ? `H${cx + t}` : "",
+      hasArrow ? `L${cx},${h}` : "",
+      hasArrow ? `L${cx - t},${bodyH}` : "",
+      `H${r}`,
+      `Q0,${bodyH} 0,${bodyH - r}`,
+      `V${r}`,
+      `Q0,0 ${r},0`,
+      `Z`,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  if (side === "bottom") {
+    // body는 t..h 세로, arrow는 위로 삐죽
+    const bodyTop = t;
+    const cx = clamp(arrowPos, r + t, w - r - t);
+    return [
+      `M${r},${bodyTop}`,
+      hasArrow ? `H${cx - t}` : "",
+      hasArrow ? `L${cx},0` : "",
+      hasArrow ? `L${cx + t},${bodyTop}` : "",
+      `H${w - r}`,
+      `Q${w},${bodyTop} ${w},${bodyTop + r}`,
+      `V${h - r}`,
+      `Q${w},${h} ${w - r},${h}`,
+      `H${r}`,
+      `Q0,${h} 0,${h - r}`,
+      `V${bodyTop + r}`,
+      `Q0,${bodyTop} ${r},${bodyTop}`,
+      `Z`,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  if (side === "left") {
+    // body는 0..w-t 가로, arrow는 오른쪽으로 삐죽
+    const bodyW = w - t;
+    const cy = clamp(arrowPos, r + t, h - r - t);
+    return [
+      `M${r},0`,
+      `H${bodyW - r}`,
+      `Q${bodyW},0 ${bodyW},${r}`,
+      hasArrow ? `V${cy - t}` : "",
+      hasArrow ? `L${w},${cy}` : "",
+      hasArrow ? `L${bodyW},${cy + t}` : "",
+      `V${h - r}`,
+      `Q${bodyW},${h} ${bodyW - r},${h}`,
+      `H${r}`,
+      `Q0,${h} 0,${h - r}`,
+      `V${r}`,
+      `Q0,0 ${r},0`,
+      `Z`,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  // right
+  // body는 t..w 가로, arrow는 왼쪽으로 삐죽
+  const bodyLeft = t;
+  const cy = clamp(arrowPos, r + t, h - r - t);
+  return [
+    `M${bodyLeft + r},0`,
+    `H${w - r}`,
+    `Q${w},0 ${w},${r}`,
+    `V${h - r}`,
+    `Q${w},${h} ${w - r},${h}`,
+    `H${bodyLeft + r}`,
+    `Q${bodyLeft},${h} ${bodyLeft},${h - r}`,
+    hasArrow ? `V${cy + t}` : "",
+    hasArrow ? `L0,${cy}` : "",
+    hasArrow ? `L${bodyLeft},${cy - t}` : "",
+    `V${r}`,
+    `Q${bodyLeft},0 ${bodyLeft + r},0`,
+    `Z`,
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v));
+}
+
+/**
+ * Radix Content를 감싼 컴포넌트. content 크기를 재서 SVG path를 다시 그린다.
+ * data-side는 Radix가 자동 flip 후 세팅해주는 값(top/right/bottom/left)을 그대로 씀.
+ */
+const CustomContent = forwardRef<
+  HTMLDivElement,
+  {
+    initialSide: Side;
+    align: Align;
+    sideOffset: number;
+    arrowOffset: number;
+    arrow: boolean;
+    children: ReactNode;
+  }
+>(({ initialSide, align, sideOffset, arrowOffset, arrow, children }, ref) => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
+  const [side, setSide] = useState<Side>(initialSide);
+
+  // 크기 측정 + 실제 렌더링된 side(자동 flip 반영) 관측
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      setSize({ w: rect.width, h: rect.height });
+      const s = el.getAttribute("data-side") as Side | null;
+      if (s) setSide(s);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    // data-side는 Radix가 mount 후 세팅하므로 MutationObserver로 관측
+    const mo = new MutationObserver(measure);
+    mo.observe(el, { attributes: true, attributeFilter: ["data-side"] });
+    return () => {
+      ro.disconnect();
+      mo.disconnect();
+    };
+  }, []);
+
+  // arrow 위치: side에 따라 x 또는 y 좌표
+  const arrowPos = size
+    ? side === "top" || side === "bottom"
+      ? size.w / 2 + arrowOffset
+      : size.h / 2 + arrowOffset
+    : 0;
+
+  const d = size ? buildPath(side, size.w, size.h, arrowPos, arrow) : "";
+
+  return (
+    <RadixTooltip.Content
+      ref={(node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      }}
+      className={[styles.content, "m-float"].join(" ")}
+      side={initialSide}
+      align={align}
+      sideOffset={sideOffset}
+      collisionPadding={8}
+      // side에 따라 tail 방향 패딩 확보
+      style={
+        {
+          "--tail": `${TAIL}px`,
+        } as React.CSSProperties
+      }
+      data-side-current={side}
+    >
+      {size && (
+        <svg
+          className={styles.shape}
+          width={size.w}
+          height={size.h}
+          viewBox={`0 0 ${size.w} ${size.h}`}
+          preserveAspectRatio="none"
+          aria-hidden="true"
+        >
+          <path d={d} className={styles.shapePath} />
+        </svg>
+      )}
+      <div className={styles.text}>{children}</div>
+    </RadixTooltip.Content>
+  );
+});
+CustomContent.displayName = "CustomContent";
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    {
+      content,
+      children,
+      side = "top",
+      align = "center",
+      sideOffset = 6,
+      arrowOffset = 0,
+      followMouse = false,
+      delayDuration,
+      open,
+      onOpenChange,
+      arrow = true,
+    },
+    ref
+  ) => {
+    const triggerRef = useRef<HTMLElement | null>(null);
+    const [mouseOffset, setMouseOffset] = useState(0);
+
+    // followMouse: 트리거 위에서의 마우스 좌표를 arrow 위치로 환산
+    useEffect(() => {
+      if (!followMouse) return;
+      const el = triggerRef.current;
+      if (!el) return;
+      const onMove = (e: MouseEvent) => {
+        const rect = el.getBoundingClientRect();
+        if (side === "top" || side === "bottom") {
+          const cx = rect.left + rect.width / 2;
+          setMouseOffset(e.clientX - cx);
+        } else {
+          const cy = rect.top + rect.height / 2;
+          setMouseOffset(e.clientY - cy);
+        }
+      };
+      el.addEventListener("mousemove", onMove);
+      return () => el.removeEventListener("mousemove", onMove);
+    }, [followMouse, side]);
+
+    const effectiveArrowOffset = followMouse ? mouseOffset : arrowOffset;
+
+    return (
+      <RadixTooltip.Root
+        delayDuration={delayDuration}
+        open={open}
+        onOpenChange={onOpenChange}
+      >
+        <RadixTooltip.Trigger asChild ref={triggerRef as React.RefObject<HTMLButtonElement>}>
+          {children}
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <CustomContent
+            ref={ref}
+            initialSide={side}
+            align={align}
+            sideOffset={sideOffset}
+            arrowOffset={effectiveArrowOffset}
+            arrow={arrow}
+          >
+            {content}
+          </CustomContent>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    );
+  }
+);
+
+Tooltip.displayName = "Tooltip";
+
+export const TooltipProvider = ({
+  delayDuration = 300,
+  skipDelayDuration = 300,
+  children,
+}: {
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  children: ReactNode;
+}) => (
+  <RadixTooltip.Provider
+    delayDuration={delayDuration}
+    skipDelayDuration={skipDelayDuration}
+  >
+    {children}
+  </RadixTooltip.Provider>
+);

package/assets/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipProvider } from "./Tooltip";
+export type { TooltipProps } from "./Tooltip";

package/assets/components/Topbar/Topbar.module.css

@@ -0,0 +1,26 @@
+/* Root ─────────────────────────────────────────────────
+   투명. 배경·보더·그림자 없음. children 자유 배치.
+   size는 높이만 결정 — padding/gap은 동일. */
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--topbar-h);
+  padding-inline: var(--space-5);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.root[data-size="sm"] {
+  height: var(--topbar-h-sm);
+}
+
+.root[data-size="md"] {
+  height: var(--topbar-h-md);
+}
+
+/* Spacer ───────────────────────────────────────────── */
+.spacer {
+  flex: 1 1 auto;
+}

package/assets/components/Topbar/Topbar.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { cn } from "../_cn";
+import styles from "./Topbar.module.css";
+
+/* Root ─────────────────────────────────────────────────
+   자유 슬롯 컨테이너. 자체 표현(bg/border/shadow) 없음.
+   컨테이너 표현은 상위 AppFrame variant가 담당.
+   size는 세로 높이만 결정 (sm=얇게, md=기본). */
+export type TopbarSize = "sm" | "md";
+
+export interface TopbarProps extends HTMLAttributes<HTMLElement> {
+  size?: TopbarSize;
+}
+
+const TopbarRoot = forwardRef<HTMLElement, TopbarProps>(function TopbarRoot(
+  { size = "md", className, children, ...rest },
+  ref,
+) {
+  return (
+    <header
+      ref={ref}
+      className={cn(styles.root, className)}
+      data-size={size}
+      {...rest}
+    >
+      {children}
+    </header>
+  );
+});
+
+/* Spacer ───────────────────────────────────────────────
+   좌/우 정렬용 flex:1 빈 블록. */
+function TopbarSpacer() {
+  return <div className={styles.spacer} aria-hidden />;
+}
+
+type TopbarComponent = typeof TopbarRoot & {
+  Spacer: typeof TopbarSpacer;
+};
+
+const Topbar = TopbarRoot as TopbarComponent;
+Topbar.Spacer = TopbarSpacer;
+
+export { Topbar };

package/assets/components/Topbar/index.ts

@@ -0,0 +1,2 @@
+export { Topbar } from "./Topbar";
+export type { TopbarProps, TopbarSize } from "./Topbar";

package/assets/components/_cn.ts

@@ -0,0 +1,3 @@
+export function cn(...values: (string | false | null | undefined)[]): string {
+  return values.filter(Boolean).join(" ");
+}

package/assets/components/_color.ts

@@ -0,0 +1,48 @@
+export type OKLCH = { l: number; c: number; h: number };
+
+export function hexToOklch(hex: string): OKLCH | null {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const [lr, lg, lb] = rgb.map(srgbToLinear) as [number, number, number];
+  const l =
+    Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m =
+    Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s =
+    Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const b = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const C = Math.sqrt(a * a + b * b);
+  let H = (Math.atan2(b, a) * 180) / Math.PI;
+  if (H < 0) H += 360;
+  return { l: L, c: C, h: H };
+}
+
+export function hexToHue(hex: string): number | null {
+  const oklch = hexToOklch(hex);
+  return oklch ? Math.round(oklch.h) : null;
+}
+
+export function isValidHex(hex: string): boolean {
+  return /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex.trim());
+}
+
+function hexToRgb(hex: string): [number, number, number] | null {
+  const clean = hex.trim().replace(/^#/, "");
+  if (!/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(clean)) return null;
+  const expanded =
+    clean.length === 3
+      ? clean.split("").map((c) => c + c).join("")
+      : clean;
+  const num = parseInt(expanded, 16);
+  return [(num >> 16) & 0xff, (num >> 8) & 0xff, num & 0xff].map((v) => v / 255) as [
+    number,
+    number,
+    number,
+  ];
+}
+
+function srgbToLinear(v: number): number {
+  return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}