@simplysm/solid 13.0.69 → 13.0.71

package/src/components/data/calendar/Calendar.tsx

@@ -3,6 +3,7 @@ import { DateOnly } from "@simplysm/core-common";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 export interface CalendarProps<TValue> extends Omit<
   JSX.HTMLAttributes<HTMLTableElement>,
@@ -17,8 +18,6 @@ export interface CalendarProps<TValue> extends Omit<
   minDaysInFirstWeek?: number;
 }
 
-const WEEKS = ["일", "월", "화", "수", "목", "금", "토"];
-
 const baseClass = clsx(
   "w-full",
   "border-separate border-spacing-0",
@@ -63,9 +62,16 @@ function CalendarBase<TValue>(props: CalendarProps<TValue>) {
     onChange: () => local.onYearMonthChange,
   });
 
+  const i18n = useI18nOptional();
+  const weekNames = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"] as const;
+
   const weekHeaders = createMemo(() => {
     const start = weekStartDay();
-    return Array.from({ length: 7 }, (_, i) => WEEKS[(start + i) % 7]);
+    return Array.from({ length: 7 }, (_, i) => {
+      const key = weekNames[(start + i) % 7];
+      return i18n?.t(`calendar.weeks.${key}`) ??
+              { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", fri: "Fri", sat: "Sat" }[key];
+    });
   });
 
   const dataTable = createMemo(() => {
@@ -73,7 +79,7 @@ function CalendarBase<TValue>(props: CalendarProps<TValue>) {
     const items = local.items;
     const getDate = local.getItemDate;
 
-    // 아이템을 날짜별로 그룹핑 (O(N))
+    // Group items by date (O(N))
     const itemMap = new Map<number, { item: TValue; index: number }[]>();
     for (let i = 0; i < items.length; i++) {
       const date = getDate(items[i], i);

package/src/components/data/kanban/Kanban.tsx

@@ -108,7 +108,7 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
     }
     e.dataTransfer?.setData("text/plain", "");
     const heightOnDrag = hostRef.offsetHeight;
-    // 브라우저가 드래그 고스트 이미지를 캡처한 뒤 숨기기 위해 한 프레임 지연
+    // Delay one frame so the browser can capture the drag ghost image before hiding
     requestAnimationFrame(() => {
       boardCtx.setDragCard({
         value: local.value,
@@ -144,7 +144,7 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
     boardCtx.onDropTo(laneCtx.value(), local.value, current?.position ?? "before");
   };
 
-  // Shift+Click 다중 선택 토글
+  // Shift+Click multi-select toggle
   const handleClick = (e: MouseEvent) => {
     if (longPressed) {
       e.preventDefault();
@@ -160,7 +160,7 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
     boardCtx.toggleSelection(local.value);
   };
 
-  // Long press → 해당 카드만 단독 선택 (다른 선택 모두 해제)
+  // Long press → select only this card (deselect all others)
   let longPressTimer: ReturnType<typeof setTimeout> | undefined;
   let longPressed = false;
 
@@ -329,10 +329,10 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
   const [dropTarget, setDropTarget] = createSignal<KanbanDropTarget>();
   const [dragEnterCount, setDragEnterCount] = createSignal(0);
 
-  // 드래그 오버 상태: 카운터 > 0 && 드래그 중
+  // Drag-over state: counter > 0 && dragging
   const isDragOverLane = () => dragEnterCount() > 0 && boardCtx.dragCard() != null;
 
-  // dragCard가 리셋되면 dropTarget, 카운터도 초기화
+  // When dragCard resets, also reset dropTarget and counter
   createEffect(() => {
     if (!boardCtx.dragCard()) {
       setDragEnterCount(0);
@@ -340,7 +340,7 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
     }
   });
 
-  // Lane 이탈 감지: dragenter/dragleave 카운터
+  // Lane exit detection: dragenter/dragleave counter
   const handleLaneDragEnter = () => {
     setDragEnterCount((c) => c + 1);
   };
@@ -353,23 +353,23 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
     }
   };
 
-  // 빈 영역 dragover (카드가 없거나 카드 아래 영역)
+  // Empty area dragover (no cards, or below cards)
   const handleLaneDragOver = (e: DragEvent) => {
     if (!boardCtx.dragCard()) return;
     e.preventDefault();
   };
 
-  // 빈 영역 또는 placeholder drop
+  // Empty area or placeholder drop
   const handleLaneDrop = (e: DragEvent) => {
     if (!boardCtx.dragCard()) return;
     e.preventDefault();
 
     const current = dropTarget();
     if (current) {
-      // placeholder나 카드 사이 gap에 drop된 경우 — dropTarget 위치 사용
+      // Dropped on placeholder or gap between cards — use dropTarget position
       boardCtx.onDropTo(local.value, current.value, current.position);
     } else {
-      // 빈 레인에 drop된 경우 — 끝에 추가
+      // Dropped onto an empty lane — append to end
       boardCtx.onDropTo(local.value, undefined, undefined);
     }
   };
@@ -391,7 +391,7 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
   const hasHeader = () =>
     local.collapsible || hasSelectableCards() || title() != null || tools() != null;
 
-  // placeholder div (Lane이 소유, DOM 직접 제어)
+  // Placeholder div (owned by Lane, direct DOM control)
   let bodyRef: HTMLDivElement | undefined;
   const placeholderEl = document.createElement("div");
   placeholderEl.className = placeholderBaseClass;
@@ -407,14 +407,14 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
       return;
     }
 
-    // placeholder 높이 설정
+    // Set placeholder height
     placeholderEl.style.height = `${dc.heightOnDrag}px`;
 
-    // 삽입 위치 계산
+    // Calculate insertion position
     const referenceNode =
       target.position === "before" ? target.element : target.element.nextElementSibling;
 
-    // 이미 올바른 위치면 DOM 조작 생략
+    // Skip DOM manipulation if already in the correct position
     if (placeholderEl.parentNode === bodyRef && placeholderEl.nextSibling === referenceNode) {
       return;
     }

package/src/components/data/kanban/KanbanContext.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext, type Accessor, type Setter } from "solid-js";
 import type { SlotAccessor } from "../../../hooks/createSlotSignal";
 
-// ── 타입 ──────────────────────────────────────────────────────
+// ── Types ──────────────────────────────────────────────────────
 
 export interface KanbanCardRef<L = unknown, T = unknown> {
   value: T | undefined;
@@ -44,7 +44,7 @@ export const KanbanContext = createContext<KanbanContextValue>();
 export function useKanbanContext(): KanbanContextValue {
   const context = useContext(KanbanContext);
   if (!context) {
-    throw new Error("useKanbanContext는 Kanban 내부에서만 사용할 수 있습니다");
+    throw new Error("useKanbanContext can only be used inside Kanban");
   }
   return context;
 }
@@ -70,7 +70,7 @@ export const KanbanLaneContext = createContext<KanbanLaneContextValue>();
 export function useKanbanLaneContext(): KanbanLaneContextValue {
   const context = useContext(KanbanLaneContext);
   if (!context) {
-    throw new Error("useKanbanLaneContext는 Kanban.Lane 내부에서만 사용할 수 있습니다");
+    throw new Error("useKanbanLaneContext can only be used inside Kanban.Lane");
   }
   return context;
 }

package/src/components/data/list/List.tsx

@@ -18,20 +18,20 @@ const insetClass = clsx(
 
 export interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /**
-   * 투명 배경 스타일 적용
+   * Apply transparent background style
    */
   inset?: boolean;
 }
 
 /**
- * ListItem들을 담는 컨테이너 컴포넌트
+ * Container component for ListItems
  *
- * 트리뷰 스타일 키보드 네비게이션 지원:
- * - `Space`/`Enter`: 현재 항목 토글
- * - `ArrowUp`/`ArrowDown`: 이전/다음 항목으로 포커스 이동
- * - `Home`/`End`: 첫 번째/마지막 항목으로 포커스 이동
- * - `ArrowRight`: 닫혀있으면 열기, 열려있으면 첫 번째 자식으로 포커스
- * - `ArrowLeft`: 열려있으면 닫기, 닫혀있으면 부모로 포커스
+ * Supports tree-view style keyboard navigation:
+ * - `Space`/`Enter`: toggle current item
+ * - `ArrowUp`/`ArrowDown`: move focus to previous/next item
+ * - `Home`/`End`: move focus to first/last item
+ * - `ArrowRight`: open if closed, or focus first child if open
+ * - `ArrowLeft`: close if open, or focus parent if closed
  *
  * @example
  * ```tsx
@@ -78,7 +78,7 @@ const ListBase: ParentComponent<ListProps> = (props) => {
     if (!isOpen) {
       current.click();
     } else {
-      // button의 다음 형제 요소(Collapse) 내에서 첫 번째 자식 항목 찾기
+      // Find the first child item inside the next sibling (Collapse) of the button
       const collapse = current.nextElementSibling;
       const nestedItem = collapse?.querySelector<HTMLElement>("[data-list-item]");
       nestedItem?.focus();
@@ -92,7 +92,7 @@ const ListBase: ParentComponent<ListProps> = (props) => {
     if (hasChildren && isOpen) {
       current.click();
     } else {
-      // Collapse의 이전 형제가 부모 button
+      // The previous sibling of the Collapse is the parent button
       const parentItem = current.closest("[data-collapse]")
         ?.previousElementSibling as HTMLElement | null;
       if (parentItem?.hasAttribute("data-list-item")) {

package/src/components/data/list/ListContext.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "solid-js";
 
 /**
- * List context - 중첩 level 전달용
+ * List context - for passing nested level
  */
 export interface ListContextValue {
   level: number;

package/src/components/data/list/ListItem.styles.ts

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { borderDefault, type ComponentSize } from "../../../styles/tokens.styles";
 
-// 기본 아이템 스타일
+// Base item style
 export const listItemBaseClass = clsx(
   "flex",
   "items-center",
@@ -17,7 +17,7 @@ export const listItemBaseClass = clsx(
   "hover:bg-base-500/10 dark:hover:bg-base-700",
 );
 
-// 사이즈별 스타일
+// Size-based styles
 export const listItemSizeClasses: Record<ComponentSize, string> = {
   xs: clsx("px-0.5 py-0"),
   sm: clsx("px-1 py-0.5"),
@@ -25,7 +25,7 @@ export const listItemSizeClasses: Record<ComponentSize, string> = {
   xl: clsx("px-3 py-2"),
 };
 
-// 선택된 상태
+// Selected state
 export const listItemSelectedClass = clsx(
   "bg-primary-100",
   "dark:bg-primary-800/50",
@@ -34,18 +34,18 @@ export const listItemSelectedClass = clsx(
   "dark:hover:bg-primary-700",
 );
 
-// 비활성화 상태
+// Disabled state
 export const listItemDisabledClass = clsx("pointer-events-none cursor-auto opacity-50");
 
-// 읽기 전용 상태
+// Readonly state
 export const listItemReadonlyClass = clsx("cursor-auto select-text hover:bg-transparent");
 
-// 들여쓰기 가이드 (중첩 아이템용)
+// Indent guide (for nested items)
 export const listItemIndentGuideClass = clsx("ml-4 w-2 border-l", borderDefault);
 
-// 아이템 콘텐츠 영역
+// Item content area
 export const listItemContentClass = clsx("flex flex-1 flex-row", "items-center gap-1", "text-left");
 
-// 선택 아이콘 색상
+// Selection icon color
 export const getListItemSelectedIconClass = (selected: boolean) =>
   clsx(selected ? "text-primary-600 dark:text-primary-400" : "text-black/30 dark:text-white/30");

package/src/components/data/list/ListItem.tsx

@@ -46,64 +46,64 @@ export interface ListItemProps extends Omit<
   "onClick"
 > {
   /**
-   * 중첩 리스트의 열림 상태 (controlled 모드)
+   * Open state of the nested list (controlled mode)
    */
   open?: boolean;
 
   /**
-   * 열림 상태 변경 콜백 (있으면 controlled 모드)
+   * Callback for open state change (enables controlled mode)
    */
   onOpenChange?: (open: boolean) => void;
 
   /**
-   * 선택된 상태
+   * Selected state
    */
   selected?: boolean;
 
   /**
-   * 읽기 전용 (클릭 비활성화, 일반 색상 유지)
+   * Readonly (click disabled, normal color retained)
    */
   readonly?: boolean;
 
   /**
-   * 비활성화 (클릭 불가, 흐려짐)
+   * Disabled (unclickable, dimmed)
    */
   disabled?: boolean;
 
   /**
-   * 선택 표시 아이콘 컴포넌트 (중첩 List가 없을 때만 표시)
+   * Selection icon component (shown only when no nested List)
    */
   selectedIcon?: Component<IconProps>;
 
   /**
-   * 아이템 크기
+   * Item size
    */
   size?: ComponentSize;
 
   /**
-   * 클릭 핸들러 (중첩 List가 없을 때 호출)
+   * Click handler (called when no nested List)
    */
   onClick?: (e: MouseEvent) => void;
 }
 
 /**
- * 리스트 아이템 컴포넌트
+ * List item component
  *
- * `ListItem.Children`으로 중첩 리스트를 포함하면 아코디언 동작을 지원한다.
- * controlled 모드로 사용하려면 open과 onOpenChange를 함께 제공한다.
+ * Supports accordion behavior when a nested list is included via `ListItem.Children`.
+ * Provide both open and onOpenChange for controlled mode.
  *
  * @example
  * ```tsx
- * // 기본 사용
+ * // Basic usage
  * <List.Item>Simple item</List.Item>
  *
- * // 선택 상태
+ * // Selected state
  * <List.Item selected>Selected item</List.Item>
  *
- * // 선택 아이콘
+ * // Selection icon
  * <List.Item selectedIcon={IconCheck} selected>Icon selection</List.Item>
  *
- * // 중첩 리스트 (아코디언)
+ * // Nested list (accordion)
  * <List.Item>
  *   Folder
  *   <List.Item.Children>

package/src/components/data/sheet/DataSheet.styles.ts

@@ -44,22 +44,22 @@ export const insetTableClass = clsx(
 
 export const defaultContainerClass = clsx("border", borderDefault, "rounded");
 
-// 정렬 가능 헤더 — 클릭 가능 표시
+// Sortable header — shows clickable indicator
 export const sortableThClass = clsx("cursor-pointer", "hover:underline");
 
-// 정렬 아이콘 영역
+// Sort icon area
 export const sortIconClass = clsx("px-1 py-0.5", "bg-base-100 dark:bg-base-900");
 
-// 상단 툴바 (설정 버튼 + 페이지네이션)
+// Top toolbar (settings button + pagination)
 export const toolbarClass = clsx("flex items-center gap-2", "px-2 py-1", "border-b", borderDefault);
 
-// 고정 컬럼 기본 (sticky)
+// Fixed column base (sticky)
 export const fixedClass = "sticky";
 
-// 고정/비고정 경계 시각 효과 — 고정 컬럼의 마지막 셀에 적용
+// Visual effect for fixed/unfixed boundary — applied to last cell of fixed column
 export const fixedLastClass = clsx("border-r border-r-base-400", "dark:border-r-base-600");
 
-// 리사이저 핸들 (헤더 셀 우측 드래그 영역)
+// Resizer handle (right-side drag area of header cell)
 export const resizerClass = clsx(
   "absolute inset-y-0 right-0",
   "w-1",
@@ -68,7 +68,7 @@ export const resizerClass = clsx(
   "hover:bg-primary-300 dark:hover:bg-primary-600",
 );
 
-// 드래그 중 세로 점선 인디케이터
+// Vertical dashed indicator while dragging
 export const resizeIndicatorClass = clsx(
   "absolute inset-y-0",
   "w-0 border-l-2 border-dashed border-primary-500",
@@ -76,7 +76,7 @@ export const resizeIndicatorClass = clsx(
   "z-[7]",
 );
 
-// 기능 컬럼 기본 (확장/선택 컬럼 공통)
+// Feature column base (expand/select column common)
 export const featureThClass = clsx(
   "bg-base-100 dark:bg-base-800",
   "border-b border-r",
@@ -94,13 +94,13 @@ export const featureTdClass = clsx(
   "h-px",
 );
 
-// 확장 컬럼 깊이 가이드 — 래퍼 (토글 아이콘과 같은 너비, 세로선 중앙 정렬)
+// Expand column depth guide — wrapper (same width as toggle icon, vertically centered line)
 export const expandIndentGuideClass = clsx("mr-0.5 w-3 self-stretch", "flex justify-end");
 
-// 확장 컬럼 깊이 가이드 — 세로선
+// Expand column depth guide — vertical line
 export const expandIndentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault);
 
-// 확장 토글 버튼
+// Expand toggle button
 export const expandToggleClass = clsx(
   "flex items-center justify-center",
   "size-6",
@@ -109,7 +109,7 @@ export const expandToggleClass = clsx(
   "hover:bg-base-200 dark:hover:bg-base-600",
 );
 
-// 선택 컬럼 — single 모드 아이콘 래퍼
+// Select column — icon wrapper for single mode
 export const selectSingleClass = clsx(
   "flex items-center justify-center",
   "size-6",
@@ -117,13 +117,13 @@ export const selectSingleClass = clsx(
   "rounded",
 );
 
-// single 모드 — 선택됨
+// Single mode — selected
 export const selectSingleSelectedClass = clsx("text-primary-500", "dark:text-primary-400");
 
-// single 모드 — 미선택
+// Single mode — unselected
 export const selectSingleUnselectedClass = clsx("text-base-300", "dark:text-base-600");
 
-// 드래그 핸들 기능 컬럼
+// Drag handle feature column
 export const reorderHandleClass = clsx(
   "flex items-center justify-center",
   "size-6",
@@ -132,7 +132,7 @@ export const reorderHandleClass = clsx(
   "hover:text-base-600 dark:hover:text-base-400",
 );
 
-// 드래그 인디케이터 (before/after 수평선)
+// Drag indicator (before/after horizontal line)
 export const reorderIndicatorClass = clsx(
   "absolute inset-x-0",
   "h-0 border-t-2 border-primary-500",
@@ -140,31 +140,31 @@ export const reorderIndicatorClass = clsx(
   "z-[7]",
 );
 
-// 기능 컬럼 헤더 내부 래퍼 (확장/선택 등)
+// Feature column header inner wrapper (expand/select, etc.)
 export const featureCellWrapperClass = clsx("flex items-center", "px-1");
 
-// 기능 컬럼 바디 내부 래퍼 (확장/선택/재정렬 등 — 전체 높이)
+// Feature column body inner wrapper (expand/select/reorder, etc. — full height)
 export const featureCellBodyWrapperClass = clsx("flex h-full items-center", "px-1");
 
-// 기능 컬럼 헤더 클릭 가능 래퍼 (전체 선택 등)
+// Feature column header clickable wrapper (select all, etc.)
 export const featureCellClickableClass = clsx(
   "flex cursor-pointer items-center justify-center",
   "px-1",
 );
 
-// 기능 컬럼 바디 클릭 가능 래퍼 (선택/재정렬 등 — 전체 높이)
+// Feature column body clickable wrapper (select/reorder, etc. — full height)
 export const featureCellBodyClickableClass = clsx(
   "flex h-full cursor-pointer items-center justify-center",
   "px-1",
 );
 
-// 재정렬 핸들 래퍼 (touch-none 추가)
+// Reorder handle wrapper (with touch-none added)
 export const reorderCellWrapperClass = clsx(
   "flex h-full touch-none items-center justify-center",
   "px-1",
 );
 
-// 설정 버튼
+// Settings button
 export const configButtonClass = clsx(
   "flex items-center justify-center",
   "size-6 rounded",