@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/Textarea/Textarea.tsx

@@ -0,0 +1,426 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from "react";
+
+import { Icon } from "../Icon";
+import styles from "./Textarea.module.css";
+
+export type TextareaSize = "sm" | "md" | "lg";
+export type TextareaVariant = "outline" | "filled" | "line";
+/**
+ * 가로 폭 정책 — Input과 동일.
+ * "fill"(기본) 부모 폭 채움 · "md"=280px · "lg"=400px · number=px.
+ */
+export type TextareaWidth = "fill" | "md" | "lg" | number;
+
+export interface TextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "width"> {
+  size?: TextareaSize;
+  variant?: TextareaVariant;
+  /** 폼 검증 실패. warning이 있으면 자동으로 true. */
+  invalid?: boolean;
+  /** 가로 폭. 기본 "fill". */
+  width?: TextareaWidth;
+  /** 라벨 텍스트. */
+  label?: ReactNode;
+  /** 중립 톤 도움말. */
+  description?: ReactNode;
+  /** 경고 메시지. 있으면 invalid로 취급. */
+  warning?: ReactNode;
+  /**
+   * 내용에 맞춰 자동으로 높이 조정.
+   * true면 사용자 리사이즈 핸들은 감춰지고, maxRows에 도달하면 스크롤이 붙는다.
+   */
+  autoResize?: boolean;
+  /** autoResize 하한. 기본 rows(=3). */
+  minRows?: number;
+  /**
+   * autoResize 상한(줄 수). 넘으면 세로 스크롤.
+   * autoResize 없이 minRows/rows만 있으면 커스텀 핸들로 드래그해서 늘릴 수 있다.
+   */
+  maxRows?: number;
+  /** 글자수 카운터 노출. maxLength가 있으면 "n / max" 포맷. */
+  showCount?: boolean;
+}
+
+const sizeClass: Record<TextareaSize, string> = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+};
+
+const variantClass: Record<TextareaVariant, string> = {
+  outline: styles.outline,
+  filled: styles.filled,
+  line: styles.line,
+};
+
+const labelSizeClass: Record<TextareaSize, string> = {
+  sm: styles.labelSm,
+  md: styles.labelMd,
+  lg: styles.labelLg,
+};
+
+/* line-height + padding + border 합산해 chrome 높이(px)를 얻는다. */
+function computeMetrics(el: HTMLTextAreaElement) {
+  const cs = getComputedStyle(el);
+  const lh = parseFloat(cs.lineHeight);
+  const pt = parseFloat(cs.paddingTop);
+  const pb = parseFloat(cs.paddingBottom);
+  const bt = parseFloat(cs.borderTopWidth);
+  const bb = parseFloat(cs.borderBottomWidth);
+  return { lh, chrome: pt + pb + bt + bb };
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      size = "md",
+      variant = "outline",
+      invalid: invalidProp,
+      width = "fill",
+      label,
+      description,
+      warning,
+      autoResize = true,
+      minRows,
+      maxRows,
+      showCount = false,
+      rows = 3,
+      disabled,
+      readOnly,
+      required,
+      value,
+      defaultValue,
+      onChange,
+      maxLength,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const innerRef = useRef<HTMLTextAreaElement>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    const hasWarning = warning != null && warning !== false;
+    const invalid = invalidProp ?? hasWarning;
+
+    const autoId = useId();
+    const textareaId = id ?? autoId;
+    const descriptionId = description != null ? `${textareaId}-desc` : undefined;
+    const warningId = hasWarning ? `${textareaId}-warn` : undefined;
+    const describedBy =
+      [warningId, descriptionId].filter(Boolean).join(" ") || undefined;
+
+    const [uncontrolledValue, setUncontrolledValue] = useState<string>(
+      String(defaultValue ?? "")
+    );
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? String(value ?? "") : uncontrolledValue;
+
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLTextAreaElement>) => {
+        if (!isControlled) setUncontrolledValue(e.target.value);
+        onChange?.(e);
+      },
+      [isControlled, onChange]
+    );
+
+    /* autoResize: 컨텐츠 높이 → element.style.height 반영.
+       max에 도달하면 overflow-y=auto 로 스크롤. */
+    useLayoutEffect(() => {
+      if (!autoResize) return;
+      const el = innerRef.current;
+      if (!el) return;
+
+      const { lh, chrome } = computeMetrics(el);
+      const minR = minRows ?? rows ?? 3;
+      const minH = lh * minR + chrome;
+      const maxH = maxRows != null ? lh * maxRows + chrome : Infinity;
+
+      el.style.height = "auto";
+      const next = Math.min(Math.max(el.scrollHeight, minH), maxH);
+      el.style.height = `${next}px`;
+      el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+    }, [autoResize, currentValue, minRows, maxRows, rows, size]);
+
+    /* Manual 모드 — rows + minRows/maxRows로 min/max height를 계산해두고,
+       핸들 드래그로 el.style.height를 갱신. */
+    const [dragging, setDragging] = useState(false);
+    const dragState = useRef<{
+      startY: number;
+      startH: number;
+      minH: number;
+      maxH: number;
+    } | null>(null);
+
+    const applyManualBounds = useCallback(() => {
+      if (autoResize) return;
+      const el = innerRef.current;
+      if (!el) return;
+      const { lh, chrome } = computeMetrics(el);
+      const minR = minRows ?? rows ?? 3;
+      el.style.minHeight = `${lh * minR + chrome}px`;
+      if (maxRows != null) {
+        el.style.maxHeight = `${lh * maxRows + chrome}px`;
+      } else {
+        el.style.maxHeight = "";
+      }
+    }, [autoResize, minRows, maxRows, rows]);
+
+    useLayoutEffect(() => {
+      applyManualBounds();
+    }, [applyManualBounds, size]);
+
+    const onHandlePointerDown = useCallback(
+      (e: ReactPointerEvent<HTMLDivElement>) => {
+        const el = innerRef.current;
+        if (!el || autoResize || disabled || readOnly) return;
+        e.preventDefault();
+        const { lh, chrome } = computeMetrics(el);
+        const minR = minRows ?? rows ?? 3;
+        const minH = lh * minR + chrome;
+        const maxH = maxRows != null ? lh * maxRows + chrome : Infinity;
+        dragState.current = {
+          startY: e.clientY,
+          startH: el.offsetHeight,
+          minH,
+          maxH,
+        };
+        setDragging(true);
+        document.body.classList.add("textarea-resizing");
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+      },
+      [autoResize, disabled, readOnly, minRows, maxRows, rows]
+    );
+
+    const onHandlePointerMove = useCallback(
+      (e: ReactPointerEvent<HTMLDivElement>) => {
+        const state = dragState.current;
+        const el = innerRef.current;
+        if (!state || !el) return;
+        const dy = e.clientY - state.startY;
+        const next = Math.min(
+          Math.max(state.startH + dy, state.minH),
+          state.maxH
+        );
+        el.style.height = `${next}px`;
+      },
+      []
+    );
+
+    const onHandlePointerUp = useCallback(
+      (e: ReactPointerEvent<HTMLDivElement>) => {
+        if (!dragState.current) return;
+        dragState.current = null;
+        setDragging(false);
+        document.body.classList.remove("textarea-resizing");
+        try {
+          (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+        } catch {
+          /* pointer가 이미 해제된 경우 */
+        }
+      },
+      []
+    );
+
+    /* 키보드 조작 — Arrow Up/Down으로 한 줄씩. 접근성. */
+    const onHandleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLDivElement>) => {
+        const el = innerRef.current;
+        if (!el || autoResize || disabled || readOnly) return;
+        if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+        e.preventDefault();
+        const { lh, chrome } = computeMetrics(el);
+        const minR = minRows ?? rows ?? 3;
+        const minH = lh * minR + chrome;
+        const maxH = maxRows != null ? lh * maxRows + chrome : Infinity;
+        const step = lh;
+        const cur = el.offsetHeight;
+        const next = Math.min(
+          Math.max(cur + (e.key === "ArrowDown" ? step : -step), minH),
+          maxH
+        );
+        el.style.height = `${next}px`;
+      },
+      [autoResize, disabled, readOnly, minRows, maxRows, rows]
+    );
+
+    useEffect(() => {
+      return () => {
+        document.body.classList.remove("textarea-resizing");
+      };
+    }, []);
+
+    /* ref 병합 */
+    useEffect(() => {
+      if (typeof ref === "function") ref(innerRef.current);
+      else if (ref)
+        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current =
+          innerRef.current;
+    }, [ref]);
+
+    const widthStyle: string | undefined =
+      width === "fill"
+        ? undefined
+        : width === "md"
+        ? "var(--input-w-md)"
+        : width === "lg"
+        ? "var(--input-w-lg)"
+        : `${width}px`;
+
+    const rootClass = [
+      styles.root,
+      variantClass[variant],
+      sizeClass[size],
+      width === "fill" ? styles.fill : "",
+      autoResize ? styles.autoResize : "",
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const rootStyle: React.CSSProperties | undefined = widthStyle
+      ? { width: widthStyle }
+      : undefined;
+
+    const count = currentValue.length;
+    const over = maxLength != null && count > maxLength;
+
+    const showHandle = !autoResize && !disabled && !readOnly;
+
+    const control = (
+      <div
+        ref={rootRef}
+        className={rootClass}
+        style={rootStyle}
+        data-invalid={invalid || undefined}
+        data-disabled={disabled || undefined}
+        data-readonly={readOnly || undefined}
+        onClick={(e) => {
+          /* 핸들 클릭까지 focus로 넘기지 않도록 */
+          if ((e.target as HTMLElement).dataset.textareaHandle) return;
+          innerRef.current?.focus();
+        }}
+      >
+        <textarea
+          ref={innerRef}
+          id={textareaId}
+          className={styles.textarea}
+          rows={rows}
+          value={isControlled ? currentValue : undefined}
+          defaultValue={isControlled ? undefined : defaultValue}
+          onChange={handleChange}
+          disabled={disabled}
+          readOnly={readOnly}
+          required={required}
+          maxLength={maxLength}
+          aria-invalid={invalid || undefined}
+          aria-describedby={describedBy}
+          {...props}
+        />
+
+        {showHandle && (
+          <div
+            className={styles.handle}
+            data-textarea-handle="true"
+            data-active={dragging || undefined}
+            role="separator"
+            aria-orientation="horizontal"
+            aria-label="높이 조절"
+            tabIndex={0}
+            onPointerDown={onHandlePointerDown}
+            onPointerMove={onHandlePointerMove}
+            onPointerUp={onHandlePointerUp}
+            onPointerCancel={onHandlePointerUp}
+            onKeyDown={onHandleKeyDown}
+          />
+        )}
+      </div>
+    );
+
+    const footer = showCount ? (
+      <div
+        className={[styles.footer, over ? styles.countOver : ""]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {maxLength != null ? `${count} / ${maxLength}` : count}
+      </div>
+    ) : null;
+
+    if (label == null && description == null && !hasWarning && !footer) {
+      return (
+        <>
+          {control}
+          {footer}
+        </>
+      );
+    }
+
+    const fieldStyle: React.CSSProperties | undefined = widthStyle
+      ? { width: widthStyle }
+      : undefined;
+
+    return (
+      <div
+        className={styles.field}
+        style={fieldStyle}
+        data-disabled={disabled || undefined}
+      >
+        {label != null && (
+          <label
+            htmlFor={textareaId}
+            className={[styles.label, labelSizeClass[size]].join(" ")}
+          >
+            {label}
+            {required && (
+              <span aria-hidden className={styles.requiredMark}>
+                *
+              </span>
+            )}
+          </label>
+        )}
+
+        {control}
+
+        {footer}
+
+        {hasWarning && (
+          <p id={warningId} role="alert" className={styles.errorText}>
+            <span className={styles.messageIcon} aria-hidden>
+              <Icon name="warning-circle" size={14} />
+            </span>
+            {warning}
+          </p>
+        )}
+
+        {description != null && !hasWarning && (
+          <p id={descriptionId} className={styles.description}>
+            <span className={styles.messageIcon} aria-hidden>
+              <Icon name="info" size={14} />
+            </span>
+            {description}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";

package/assets/components/Textarea/index.ts

@@ -0,0 +1,7 @@
+export { Textarea } from "./Textarea";
+export type {
+  TextareaProps,
+  TextareaSize,
+  TextareaVariant,
+  TextareaWidth,
+} from "./Textarea";

package/assets/components/ThemeController.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import type {
+  DensityValue,
+  IconFamily,
+  LangValue,
+  MotionValue,
+  PaletteValue,
+  ShapeValue,
+  ThemePreset,
+  VoiceValue,
+} from "./_data";
+import { IconAxisProvider } from "./Icon";
+
+type ThemeMode = "light" | "dark";
+export type FocusRingValue = "on" | "off";
+
+/**
+ * ctds.config.json의 shape. `ctds init` 후 사용자가 /ctds 적용하면 이 모양으로 쓰임.
+ * 모든 필드가 optional — 부분 설정만 있어도 override로 작동, 나머지는 ThemeController
+ * 기본값 유지. 알 수 없는 필드는 무시.
+ */
+export type InitialConfig = {
+  mode?: ThemeMode;
+  palette?: PaletteValue;
+  hue?: number;
+  accentHue?: number | null;
+  shape?: ShapeValue;
+  density?: DensityValue;
+  motion?: MotionValue;
+  iconFamily?: IconFamily;
+  voice?: VoiceValue;
+  lang?: LangValue;
+  focusRing?: FocusRingValue;
+};
+
+export type ThemeState = {
+  theme: ThemeMode;
+  setTheme: (v: ThemeMode) => void;
+  toggleTheme: () => void;
+  palette: PaletteValue;
+  setPalette: (v: PaletteValue) => void;
+  hue: number;
+  setHue: (v: number) => void;
+  /** 보조 hue. null이면 미설정(secondary variant는 primary hue로 폴백). */
+  accentHue: number | null;
+  setAccentHue: (v: number | null) => void;
+  shape: ShapeValue;
+  setShape: (v: ShapeValue) => void;
+  density: DensityValue;
+  setDensity: (v: DensityValue) => void;
+  motionMode: MotionValue;
+  setMotionMode: (v: MotionValue) => void;
+  iconFamily: IconFamily;
+  setIconFamily: (v: IconFamily) => void;
+  lang: LangValue;
+  setLang: (v: LangValue) => void;
+  focusRing: FocusRingValue;
+  setFocusRing: (v: FocusRingValue) => void;
+  voice: VoiceValue;
+  setVoice: (v: VoiceValue) => void;
+  applyPreset: (preset: ThemePreset) => void;
+  reset: () => void;
+};
+
+const ThemeContext = createContext<ThemeState | null>(null);
+
+export function useTheme(): ThemeState {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeController");
+  return ctx;
+}
+
+/**
+ * ThemeController 사용법:
+ *   <ThemeController>...</ThemeController>  — 기본값에서 시작
+ *   <ThemeController initialConfig={ctdsConfig}>...</ThemeController>
+ *     → ctds.config.json을 import해서 넘기면 SSR 첫 렌더부터 그 값으로 뜸.
+ *       mount 후 localStorage가 있으면 localStorage가 우선 (사용자가 바꾼 값 유지).
+ */
+export function ThemeController({
+  children,
+  initialConfig,
+}: {
+  children: React.ReactNode;
+  initialConfig?: InitialConfig;
+}) {
+  const ic = initialConfig ?? {};
+  const [theme, setTheme] = useState<ThemeMode>(ic.mode ?? "light");
+  const [palette, setPalette] = useState<PaletteValue>(ic.palette ?? "standard");
+  const [hue, setHue] = useState<number>(ic.hue ?? 210);
+  const [accentHue, setAccentHue] = useState<number | null>(ic.accentHue ?? null);
+  const [shape, setShape] = useState<ShapeValue>(ic.shape ?? "standard");
+  const [density, setDensity] = useState<DensityValue>(ic.density ?? "default");
+  const [motionMode, setMotionMode] = useState<MotionValue>(ic.motion ?? "standard");
+  const [iconFamily, setIconFamily] = useState<IconFamily>(ic.iconFamily ?? "phosphor");
+  const [lang, setLang] = useState<LangValue>(ic.lang ?? "ko");
+  const [focusRing, setFocusRing] = useState<FocusRingValue>(ic.focusRing ?? "off");
+  const [voice, setVoice] = useState<VoiceValue>(ic.voice ?? "neutral");
+  const [hydrated, setHydrated] = useState(false);
+
+  // Init from localStorage — 반드시 첫 렌더는 서버와 동일한 default로 두고
+  // mount 후 한 번에 실제 값으로 스왑한다. 그래야 hydration mismatch가 안 난다.
+  useEffect(() => {
+    try {
+      const saved =
+        (localStorage.getItem("ctds-mode") as ThemeMode | null) ||
+        (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+      setTheme(saved);
+      const savedPalette = localStorage.getItem("ctds-palette") as PaletteValue | null;
+      if (savedPalette) setPalette(savedPalette);
+      const savedHue = localStorage.getItem("ctds-hue");
+      if (savedHue) setHue(Number(savedHue));
+      const savedAccentHue = localStorage.getItem("ctds-accent-hue");
+      if (savedAccentHue && savedAccentHue !== "") setAccentHue(Number(savedAccentHue));
+      // ctds-accent는 축에서 제거됨. 과거값은 정리.
+      try {
+        localStorage.removeItem("ctds-accent");
+      } catch {}
+      const savedShape = localStorage.getItem("ctds-shape") as ShapeValue | null;
+      if (savedShape) setShape(savedShape);
+      const savedDensity = localStorage.getItem("ctds-density") as DensityValue | null;
+      if (savedDensity) setDensity(savedDensity);
+      const savedMotion = localStorage.getItem("ctds-motion") as MotionValue | null;
+      const motionMigration: Record<string, MotionValue> = {
+        expressive: "bouncy",
+        subtle: "calm",
+      };
+      const validMotion: MotionValue[] = ["bouncy", "standard", "calm", "none"];
+      if (savedMotion) {
+        const next = motionMigration[savedMotion as string] ?? savedMotion;
+        if (validMotion.includes(next as MotionValue)) setMotionMode(next as MotionValue);
+      }
+      const savedIconFamily = localStorage.getItem("ctds-icon-family") as IconFamily | null;
+      if (savedIconFamily) setIconFamily(savedIconFamily);
+      // ctds-icon-weight는 축에서 제거됨. 과거값은 정리.
+      try {
+        localStorage.removeItem("ctds-icon-weight");
+      } catch {}
+      const savedLang = localStorage.getItem("ctds-lang") as LangValue | null;
+      const validLang: LangValue[] = ["ko", "en"];
+      if (savedLang && validLang.includes(savedLang)) setLang(savedLang);
+      const savedFocusRing = localStorage.getItem("ctds-focus-ring") as FocusRingValue | null;
+      if (savedFocusRing === "on" || savedFocusRing === "off") setFocusRing(savedFocusRing);
+      const savedVoice = localStorage.getItem("ctds-voice") as VoiceValue | null;
+      const validVoice: VoiceValue[] = ["formal", "neutral", "casual"];
+      if (savedVoice && validVoice.includes(savedVoice)) setVoice(savedVoice);
+      try {
+        localStorage.removeItem("ctds-typography");
+      } catch {}
+    } catch {}
+    setHydrated(true);
+  }, []);
+
+  // Sync -> document + persist
+  // hydrated 전에는 스킵 — head 스크립트가 이미 실제 값으로 attr을 세팅해뒀고,
+  // 우리는 마운트 후 state가 실제 값으로 스왑된 뒤부터 관리한다.
+  useEffect(() => {
+    if (!hydrated) return;
+    document.documentElement.setAttribute("data-mode", theme);
+    document.documentElement.setAttribute("data-palette", palette);
+    document.documentElement.removeAttribute("data-accent");
+    document.documentElement.setAttribute("data-shape", shape);
+    document.documentElement.setAttribute("data-density", density);
+    document.documentElement.setAttribute("data-motion", motionMode);
+    document.documentElement.setAttribute("data-icon-family", iconFamily);
+    document.documentElement.removeAttribute("data-icon-weight");
+    document.documentElement.setAttribute("data-lang", lang);
+    document.documentElement.setAttribute("data-focus-ring", focusRing);
+    document.documentElement.setAttribute("data-voice", voice);
+    document.documentElement.removeAttribute("data-typography");
+    document.documentElement.lang = lang;
+    document.documentElement.style.setProperty("--hue", String(hue));
+    if (accentHue == null) {
+      document.documentElement.style.removeProperty("--secondary-hue");
+    } else {
+      document.documentElement.style.setProperty("--secondary-hue", String(accentHue));
+    }
+    try {
+      localStorage.setItem("ctds-mode", theme);
+      localStorage.setItem("ctds-palette", palette);
+      localStorage.setItem("ctds-shape", shape);
+      localStorage.setItem("ctds-density", density);
+      localStorage.setItem("ctds-motion", motionMode);
+      localStorage.setItem("ctds-icon-family", iconFamily);
+      localStorage.setItem("ctds-lang", lang);
+      localStorage.setItem("ctds-focus-ring", focusRing);
+      localStorage.setItem("ctds-voice", voice);
+      localStorage.setItem("ctds-hue", String(hue));
+      if (accentHue == null) localStorage.removeItem("ctds-accent-hue");
+      else localStorage.setItem("ctds-accent-hue", String(accentHue));
+    } catch {}
+  }, [hydrated, theme, palette, hue, accentHue, shape, density, motionMode, iconFamily, lang, focusRing, voice]);
+
+  const toggleTheme = useCallback(
+    () => setTheme((t) => (t === "dark" ? "light" : "dark")),
+    []
+  );
+
+  const applyPreset = useCallback((p: ThemePreset) => {
+    // Voice is Theme-independent — intentionally not reset by presets.
+    setTheme(p.mode);
+    setPalette(p.palette);
+    setHue(p.hue);
+    setAccentHue(p.accentHue ?? null);
+    setShape(p.shape);
+    setDensity(p.density);
+    setMotionMode(p.motion);
+    setIconFamily(p.iconFamily);
+    setLang(p.lang);
+  }, []);
+
+  const reset = useCallback(() => {
+    setTheme("light");
+    setPalette("standard");
+    setHue(210);
+    setAccentHue(null);
+    setShape("standard");
+    setDensity("default");
+    setMotionMode("standard");
+    setIconFamily("phosphor");
+    setLang("ko");
+    setFocusRing("off");
+    setVoice("neutral");
+  }, []);
+
+  const value = useMemo<ThemeState>(
+    () => ({
+      theme,
+      setTheme,
+      toggleTheme,
+      palette,
+      setPalette,
+      hue,
+      setHue,
+      accentHue,
+      setAccentHue,
+      shape,
+      setShape,
+      density,
+      setDensity,
+      motionMode,
+      setMotionMode,
+      iconFamily,
+      setIconFamily,
+      lang,
+      setLang,
+      focusRing,
+      setFocusRing,
+      voice,
+      setVoice,
+      applyPreset,
+      reset,
+    }),
+    [theme, palette, hue, accentHue, shape, density, motionMode, iconFamily, lang, focusRing, voice, toggleTheme, applyPreset, reset]
+  );
+
+  // Icon 축을 Icon 라이브러리 컨텍스트에도 브로드캐스트 (아이콘마다 MutationObserver 제거용)
+  // weight 축은 제거됨. Icon 라이브러리는 default 'regular' 그대로.
+  const iconAxisValue = useMemo(
+    () => ({ family: iconFamily, weight: "regular" as const }),
+    [iconFamily]
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <IconAxisProvider value={iconAxisValue}>{children}</IconAxisProvider>
+    </ThemeContext.Provider>
+  );
+}