@simplysm/solid 13.0.69 → 13.0.71

package/src/directives/ripple.ts

@@ -10,13 +10,13 @@ declare module "solid-js" {
 }
 
 /**
- * 인터랙티브 요소에 ripple 효과를 추가하는 directive.
+ * Directive that adds a ripple effect to interactive elements.
  *
  * @remarks
- * - 내부에 ripple-container div를 생성하여 overflow: hidden 적용 (부모 요소 영향 없음)
- * - 요소의 position이 `static`일 때만 `relative`로 변경 (cleanup 시 원래 값 복원)
- * - 단일 ripple 모드: 새 클릭 시 이전 ripple 제거
- * - `prefers-reduced-motion: reduce` 설정 시 ripple 비활성화
+ * - Creates an internal ripple-container div with overflow: hidden (no impact on parent element)
+ * - Changes position to `relative` only when the element is `static` (restores original value on cleanup)
+ * - Single ripple mode: removes the previous ripple on new click
+ * - Disables ripple when `prefers-reduced-motion: reduce` is set
  *
  * @example
  * ```tsx
@@ -32,7 +32,7 @@ export function ripple(el: HTMLElement, accessor: Accessor<boolean>): void {
 
   const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
 
-  // ripple container 생성 (내부에서 overflow: hidden 처리)
+  // Create ripple container (handles overflow: hidden internally)
   const ensureContainer = () => {
     if (containerEl) return containerEl;
 
@@ -48,7 +48,7 @@ export function ripple(el: HTMLElement, accessor: Accessor<boolean>): void {
     if (!accessor()) return;
     if (prefersReducedMotion.matches) return;
 
-    // position 확인 및 적용 (container 배치를 위해 필요)
+    // Check and apply position (required for container placement)
     if (getComputedStyle(el).position === "static") {
       if (!positionApplied) originalPosition = el.style.position;
       el.style.position = "relative";
@@ -66,7 +66,7 @@ export function ripple(el: HTMLElement, accessor: Accessor<boolean>): void {
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
 
-    // 클릭 위치에서 가장 먼 모서리까지의 거리를 반지름으로 사용
+    // Use the distance from the click position to the farthest corner as the radius
     const maxDist = Math.max(
       Math.hypot(x, y),
       Math.hypot(rect.width - x, y),

package/src/helpers/createAppStructure.ts

@@ -1,8 +1,9 @@
 import type { Component, ParentComponent } from "solid-js";
-import { type Accessor, createContext, createMemo, createRoot, useContext } from "solid-js";
+import { type Accessor, createMemo, createRoot, useContext } from "solid-js";
+import { createHmrSafeContext } from "./createHmrSafeContext";
 import type { IconProps } from "@tabler/icons-solidjs";
 
-// ── 입력 타입 ──
+// ── Input Types ──
 
 export interface AppStructureGroupItem<TModule> {
   code: string;
@@ -37,7 +38,7 @@ export interface AppStructureSubPerm<TModule> {
   perms: ("use" | "edit")[];
 }
 
-// ── 출력 타입 ──
+// ── Output Types ──
 
 export interface AppMenu {
   title: string;
@@ -81,7 +82,7 @@ export interface AppStructure<TModule> {
   getTitleChainByHref(href: string): string[];
 }
 
-// ── Perms 타입 추론 ──
+// ── Perms Type Inference ──
 
 type PermKey<TItem> = TItem extends { code: infer C extends string }
   ? TItem extends { children: any }
@@ -114,7 +115,7 @@ type InferPerms<TItems extends any[]> = {
     : InferLeafPerms<Item>;
 };
 
-// ── 내부 헬퍼 ──
+// ── Internal Helpers ──
 
 function isGroupItem<TModule>(
   item: AppStructureItem<TModule>,
@@ -234,12 +235,18 @@ function buildPerms<TModule>(
 
     if (isGroupItem(item)) {
       const children = buildPerms(item.children, href, usableModules);
+      if (children.length === 0) continue;
       result.push({
         title: item.title,
         modules: item.modules,
         children,
       });
     } else {
+      if (
+        (item.perms == null || item.perms.length === 0) &&
+        (item.subPerms == null || item.subPerms.length === 0)
+      )
+        continue;
       result.push({
         title: item.title,
         href,
@@ -410,7 +417,7 @@ function findItemChainByCodes<TModule>(
   return result;
 }
 
-// ── 메인 함수 ──
+// ── Main Function ──
 
 function buildAppStructure<TModule, const TItems extends AppStructureItem<TModule>[]>(opts: {
   items: TItems;
@@ -491,7 +498,7 @@ export function createAppStructure<TModule, const TItems extends AppStructureIte
 } {
   type TRet = AppStructure<TModule> & { perms: InferPerms<TItems> };
 
-  const Ctx = createContext<TRet>();
+  const Ctx = createHmrSafeContext<TRet>("AppStructure");
 
   const AppStructureProvider: ParentComponent = (props) => {
     const structure = buildAppStructure(getOpts());
@@ -505,7 +512,7 @@ export function createAppStructure<TModule, const TItems extends AppStructureIte
 
   const useAppStructure = (): TRet => {
     const ctx = useContext(Ctx);
-    if (!ctx) throw new Error("AppStructureProvider가 필요합니다.");
+    if (!ctx) throw new Error("AppStructureProvider is required.");
     return ctx;
   };
 

package/src/helpers/createHmrSafeContext.ts

@@ -0,0 +1,8 @@
+import { type Context, createContext } from "solid-js";
+
+const CACHE_KEY = "__simplysm_ctx__";
+const cache = ((globalThis as unknown as Record<string, Record<string, unknown>>)[CACHE_KEY] ??= {});
+
+export function createHmrSafeContext<TValue>(key: string): Context<TValue | undefined> {
+  return (cache[key] ??= createContext<TValue>()) as Context<TValue | undefined>;
+}

package/src/helpers/createSlotComponent.ts

@@ -4,10 +4,10 @@ import type { JSX } from "solid-js";
 type SlotSetter = (value: (() => JSX.Element) | undefined) => void;
 
 /**
- * Slot 등록 컴포넌트를 생성하는 팩토리 함수
+ * Factory function that creates a slot registration component.
  *
- * @param context - slot을 등록할 Context
- * @param getSetter - context value에서 setter를 추출하는 함수
+ * @param context - Context to register the slot in
+ * @param getSetter - Function to extract the setter from the context value
  */
 export function createSlotComponent<TCtx>(
   context: Context<TCtx | undefined>,
@@ -15,7 +15,7 @@ export function createSlotComponent<TCtx>(
 ): ParentComponent {
   return (props) => {
     const ctx = useContext(context)!;
-    // eslint-disable-next-line solid/reactivity -- slot 등록은 초기 마운트 시 한 번만 수행
+    // eslint-disable-next-line solid/reactivity -- Slot registration runs only once on initial mount
     getSetter(ctx)(() => props.children);
     onCleanup(() => getSetter(ctx)(undefined));
     return null;

package/src/helpers/mergeStyles.ts

@@ -1,25 +1,25 @@
 import { type JSX } from "solid-js";
 
 /**
- * CSS 스타일을 병합하는 유틸리티 함수
+ * Utility function that merges CSS styles.
  *
  * @remarks
- * - string과 object 형태의 스타일을 모두 지원
- * - object 형태는 하나의 객체로 병합 (나중 값이 우선)
- * - string은 파싱하여 병합
- * - undefined는 무시
+ * - Supports both string and object style formats
+ * - Object styles are merged into a single object (later values take precedence)
+ * - Strings are parsed and merged
+ * - undefined values are ignored
  *
  * @example
  * ```tsx
- * // Object 병합
+ * // Object merge
  * mergeStyles({ color: "red" }, { background: "blue" })
  * // => { color: "red", background: "blue" }
  *
- * // String 병합
+ * // String merge
  * mergeStyles("color: red;", "background: blue;")
  * // => { color: "red", background: "blue" }
  *
- * // Mixed 병합
+ * // Mixed merge
  * mergeStyles({ color: "red" }, "background: blue;")
  * // => { color: "red", background: "blue" }
  * ```
@@ -33,7 +33,7 @@ export function mergeStyles(
     if (style === undefined) continue;
 
     if (typeof style === "string") {
-      // CSS string 파싱
+      // Parse CSS string
       const declarations = style.split(";").filter((s) => s.trim());
       for (const declaration of declarations) {
         const colonIndex = declaration.indexOf(":");
@@ -42,7 +42,7 @@ export function mergeStyles(
         const property = declaration.slice(0, colonIndex).trim();
         const value = declaration.slice(colonIndex + 1).trim();
         if (property && value) {
-          // kebab-case를 camelCase로 변환
+          // Convert kebab-case to camelCase
           const camelProperty = property.replace(/-([a-z])/g, (_, letter: string) =>
             letter.toUpperCase(),
           );
@@ -50,7 +50,7 @@ export function mergeStyles(
         }
       }
     } else {
-      // Object 스타일 병합
+      // Merge object styles
       Object.assign(result, style);
     }
   }

package/src/hooks/createControllableSignal.ts

@@ -1,37 +1,37 @@
 import { createSignal, createEffect } from "solid-js";
 
 /**
- * 함수 타입을 제한하는 유틸리티 타입
- * 함수 타입이 전달되면 never로 변환되어 컴파일 타임 에러 발생
+ * Utility type that restricts function types.
+ * If a function type is passed, it is converted to never, causing a compile-time error.
  *
  * @remarks
- * 함수를 저장해야 할 경우 객체로 감싸기: `createControllableSignal<{ fn: () => void }>(...)`
+ * To store a function, wrap it in an object: `createControllableSignal<{ fn: () => void }>(...)`
  */
 type NotFunction<TValue> = TValue extends (...args: unknown[]) => unknown ? never : TValue;
 
 /**
- * Controlled/Uncontrolled 패턴을 지원하는 signal hook
+ * Signal hook that supports the controlled/uncontrolled pattern.
  *
  * @remarks
- * - `onChange`가 제공되면 controlled 모드: 외부에서 값 관리
- * - `onChange`가 없으면 uncontrolled 모드: 내부 상태 사용
- * - 함수형 setter 지원: `setValue(prev => !prev)`
+ * - When `onChange` is provided: controlled mode, value managed externally
+ * - When `onChange` is absent: uncontrolled mode, uses internal state
+ * - Supports functional setter: `setValue(prev => !prev)`
  *
  * @example
  * ```tsx
- * // Controlled 모드 (onOpenChange 제공)
+ * // Controlled mode (onOpenChange provided)
  * const [open, setOpen] = createControllableSignal({
  *   value: () => props.open ?? false,
  *   onChange: () => props.onOpenChange,
  * });
  *
- * // Uncontrolled 모드 (onOpenChange 미제공)
+ * // Uncontrolled mode (onOpenChange not provided)
  * const [open, setOpen] = createControllableSignal({
  *   value: () => props.open ?? false,
  *   onChange: () => undefined,
  * });
  *
- * // 함수형 setter
+ * // Functional setter
  * setOpen(prev => !prev);
  * ```
  */
@@ -41,7 +41,7 @@ export function createControllableSignal<TValue>(options: {
 }) {
   const [internalValue, setInternalValue] = createSignal<TValue>(options.value());
 
-  // props 변경 시 내부 상태 동기화 (props 우선)
+  // Sync internal state when props change (props take precedence)
   createEffect(() => {
     const propValue = options.value();
     setInternalValue(() => propValue);

package/src/hooks/createControllableStore.ts

@@ -4,22 +4,22 @@ import type { SetStoreFunction } from "solid-js/store";
 import { objClone } from "@simplysm/core-common";
 
 /**
- * Controlled/Uncontrolled 패턴을 지원하는 store hook
+ * Store hook that supports the controlled/uncontrolled pattern.
  *
  * @remarks
- * - `onChange`가 제공되면 controlled 모드: setter 호출 시 onChange로 변경 알림
- * - `onChange`가 없으면 uncontrolled 모드: 내부 store만 사용
- * - SetStoreFunction의 모든 overload 지원 (path 기반, produce, reconcile 등)
+ * - When `onChange` is provided: controlled mode, notifies changes via onChange on setter calls
+ * - When `onChange` is absent: uncontrolled mode, uses internal store only
+ * - Supports all SetStoreFunction overloads (path-based, produce, reconcile, etc.)
  *
  * @example
  * ```tsx
- * // Controlled 모드 (onItemsChange 제공)
+ * // Controlled mode (onItemsChange provided)
  * const [items, setItems] = createControllableStore<Item[]>({
  *   value: () => props.items ?? [],
  *   onChange: () => props.onItemsChange,
  * });
  *
- * // Uncontrolled 모드 (onItemsChange 미제공)
+ * // Uncontrolled mode (onItemsChange not provided)
  * const [items, setItems] = createControllableStore<Item[]>({
  *   value: () => [],
  *   onChange: () => undefined,
@@ -32,12 +32,12 @@ export function createControllableStore<TValue extends object>(options: {
 }): [TValue, SetStoreFunction<TValue>] {
   const [store, rawSet] = createStore<TValue>(objClone(options.value()));
 
-  // 외부 value 변경 → 내부 store 동기화
+  // Sync internal store when external value changes
   createEffect(() => {
     rawSet(reconcile(options.value()) as any);
   });
 
-  // 함수 래퍼로 setter 감싸서 onChange 알림 추가
+  // Wrap setter with a function wrapper to add onChange notification
   const wrappedSet = ((...args: any[]) => {
     const before = JSON.stringify(unwrap(store));
     (rawSet as any)(...args);

package/src/hooks/createIMEHandler.ts

@@ -1,16 +1,16 @@
 import { createSignal, onCleanup } from "solid-js";
 
 /**
- * IME 조합 처리 훅
+ * IME composition handling hook.
  *
  * @remarks
- * 한글 등 IME 조합 중 onValueChange를 지연하여 DOM 재생성(조합 끊김)을 방지합니다.
- * - 조합 중: composingValue만 업데이트 (content div 표시용)
- * - 조합 완료(compositionEnd): setTimeout(0)으로 지연 후 setValue 호출
- * - cleanup: flushComposition으로 미커밋 값 즉시 커밋
+ * Delays onValueChange during IME composition (e.g., Korean) to prevent DOM recreation (composition breakage).
+ * - During composition: only updates composingValue (for content div display)
+ * - On compositionEnd: delays setValue call via setTimeout(0)
+ * - Cleanup: immediately commits uncommitted value via flushComposition
  *
- * @param setValue - 값 커밋 함수
- * @returns IME 핸들러 객체
+ * @param setValue - Value commit function
+ * @returns IME handler object
  */
 export function createIMEHandler(setValue: (value: string) => void) {
   const [composingValue, setComposingValue] = createSignal<string | null>(null);

package/src/hooks/createMountTransition.ts

@@ -1,12 +1,12 @@
 import { createSignal, createEffect, onCleanup } from "solid-js";
 
 /**
- * 열림/닫힘 애니메이션을 위한 mount transition 훅
+ * Mount transition hook for open/close animations.
  *
  * @remarks
- * - `open`이 true가 되면 즉시 `mounted=true`, double rAF 후 `animating=true`
- * - `open`이 false가 되면 즉시 `animating=false`, transitionend 또는 fallback 타이머(200ms) 후 `mounted=false`
- * - CSS transition과 함께 사용: `mounted()`로 DOM 렌더링, `animating()`으로 CSS 클래스 전환
+ * - When `open` becomes true: immediately sets `mounted=true`, then `animating=true` after double rAF
+ * - When `open` becomes false: immediately sets `animating=false`, then `mounted=false` after transitionend or fallback timer (200ms)
+ * - Used with CSS transitions: `mounted()` for DOM rendering, `animating()` for CSS class toggling
  */
 export function createMountTransition(open: () => boolean): {
   mounted: () => boolean;

package/src/hooks/createSelectionGroup.tsx

@@ -1,11 +1,11 @@
 import {
   type JSX,
   type ParentComponent,
-  createContext,
   createMemo,
   splitProps,
   useContext,
 } from "solid-js";
+import { createHmrSafeContext } from "../helpers/createHmrSafeContext";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "./createControllableSignal";
 import { Invalid } from "../components/form-control/Invalid";
@@ -106,14 +106,16 @@ export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfi
     Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
   };
 } {
-  const Context = createContext<MultiSelectContext | SingleSelectContext>();
+  const Context = createHmrSafeContext<MultiSelectContext | SingleSelectContext>(
+    `SelectionGroup_${config.contextName}`,
+  );
   const ItemComponent = config.ItemComponent;
 
   function ItemInner<TValue>(props: SelectionGroupItemProps<TValue>) {
     const ctx = useContext(Context);
     if (!ctx)
       throw new Error(
-        `${config.contextName}.Item은 ${config.contextName} 내부에서만 사용할 수 있습니다`,
+        `${config.contextName}.Item can only be used inside ${config.contextName}`,
       );
 
     const isSelected = (): boolean => {

package/src/hooks/createSlotSignal.ts

@@ -3,9 +3,9 @@ import { createSignal, type Accessor, type JSX } from "solid-js";
 export type SlotAccessor = (() => JSX.Element) | undefined;
 
 /**
- * 슬롯 등록용 signal 생성
+ * Creates a signal for slot registration.
  *
- * @returns [accessor, setter] — setter는 함수를 값으로 저장하기 위해 래핑 처리
+ * @returns [accessor, setter] -- setter is wrapped to store a function as a value
  */
 export function createSlotSignal(): [Accessor<SlotAccessor>, (content: SlotAccessor) => void] {
   const [slot, _setSlot] = createSignal<SlotAccessor>();

package/src/hooks/useLocalStorage.ts

@@ -6,28 +6,28 @@ type StorageSetter<TValue> = (
 ) => TValue | undefined;
 
 /**
- * localStorage 기반 저장소 훅.
- * syncStorage 설정과 무관하게 항상 localStorage를 사용한다.
- * 기기별로 독립적으로 유지되어야 하는 데이터(인증 토큰, 기기별 상태 등)에 사용한다.
+ * localStorage-based storage hook.
+ * Always uses localStorage regardless of syncStorage settings.
+ * Used for data that should be maintained independently per device (auth tokens, device-specific state, etc.).
  *
- * 키는 ConfigContext의 `clientName`으로 자동 prefix된다. (`${clientName}.${key}`)
+ * Keys are automatically prefixed with ConfigContext's `clientName`. (`${clientName}.${key}`)
  *
- * @template T - 저장할 값의 타입
- * @param key - localStorage 키
- * @param initialValue - 초기값 (옵셔널)
- * @returns [Accessor<T | undefined>, StorageSetter<T>] 튜플
+ * @template T - Type of the value to store
+ * @param key - localStorage key
+ * @param initialValue - Initial value (optional)
+ * @returns [Accessor<T | undefined>, StorageSetter<T>] tuple
  *
  * @example
  * ```tsx
  * const [token, setToken] = useLocalStorage<string>("auth-token");
  *
- * // 값 설정
+ * // Set value
  * setToken("abc123");
  *
- * // 값 읽기
+ * // Read value
  * console.log(token()); // "abc123"
  *
- * // 값 제거
+ * // Remove value
  * setToken(undefined);
  * ```
  */
@@ -38,7 +38,7 @@ export function useLocalStorage<TValue>(
   const config = useConfig();
   const prefixedKey = `${config.clientName}.${key}`;
 
-  // localStorage에서 초기값 읽기
+  // Read initial value from localStorage
   let storedValue: TValue | undefined = initialValue;
   try {
     const item = localStorage.getItem(prefixedKey);
@@ -46,7 +46,7 @@ export function useLocalStorage<TValue>(
       storedValue = JSON.parse(item) as TValue;
     }
   } catch {
-    // JSON 파싱 실패 시 초기값 사용
+    // Use initial value on JSON parse failure
   }
 
   const [value, setValue] = createSignal<TValue | undefined>(storedValue);

package/src/hooks/useLogger.ts

@@ -9,7 +9,7 @@ export interface Logger {
   info: (...args: unknown[]) => void;
   warn: (...args: unknown[]) => void;
   error: (...args: unknown[]) => void;
-  /** LogAdapter를 나중에 주입. LoggerProvider 내부에서만 사용 가능 */
+  /** Inject LogAdapter later. Only usable inside LoggerProvider */
   configure: (fn: (origin: LogAdapter) => LogAdapter) => void;
 }
 
@@ -34,7 +34,7 @@ export function useLogger(): Logger {
     error: createLogFunction("error"),
     configure: (fn: (origin: LogAdapter) => LogAdapter) => {
       if (!loggerCtx) {
-        throw new Error("configure()는 LoggerProvider 내부에서만 사용할 수 있습니다");
+        throw new Error("configure() can only be used inside LoggerProvider");
       }
       loggerCtx.configure(fn);
     },

package/src/hooks/useRouterLink.ts

@@ -1,41 +1,41 @@
 import { useNavigate } from "@solidjs/router";
 
 export interface RouterLinkOptions {
-  /** 이동할 경로 (완성된 URL, 예: "/home/dashboard?tab=1") */
+  /** Navigation path (complete URL, e.g., "/home/dashboard?tab=1") */
   href: string;
 
-  /** 페이지 이동 시 전달할 데이터 (URL에 노출되지 않음) */
+  /** Data to pass during navigation (not exposed in the URL) */
   state?: Record<string, unknown>;
 
-  /** Shift+클릭 시 새 창 크기 */
+  /** New window size on Shift+click */
   window?: {
-    width?: number; // 기본값: 800
-    height?: number; // 기본값: 800
+    width?: number; // Default: 800
+    height?: number; // Default: 800
   };
 }
 
 /**
- * 라우터 네비게이션을 처리하는 hook
+ * Hook that handles router navigation.
  *
  * @remarks
- * - 일반 클릭: SPA 라우팅 (useNavigate)
- * - Ctrl/Alt + 클릭: 새 탭
- * - Shift + 클릭: 새 창 (window 옵션 크기 적용)
+ * - Normal click: SPA routing (useNavigate)
+ * - Ctrl/Alt + click: new tab
+ * - Shift + click: new window (with window option size applied)
  *
  * @example
  * ```tsx
  * const navigate = useRouterLink();
  *
  * <ListItem onClick={navigate({ href: "/home/dashboard" })}>
- *   대시보드
+ *   Dashboard
  * </ListItem>
  *
- * // state 전달
+ * // Passing state
  * <ListItem onClick={navigate({
  *   href: "/users/123",
  *   state: { from: "list" }
  * })}>
- *   사용자
+ *   Users
  * </ListItem>
  * ```
  */
@@ -50,15 +50,15 @@ export function useRouterLink(): (
       e.stopPropagation();
 
       if (e.ctrlKey || e.metaKey || e.altKey) {
-        // Ctrl/Cmd/Alt + 클릭: 새 탭
+        // Ctrl/Cmd/Alt + click: new tab
         window.open(options.href, "_blank");
       } else if (e.shiftKey) {
-        // Shift + 클릭: 새 창
+        // Shift + click: new window
         const width = options.window?.width ?? 800;
         const height = options.window?.height ?? 800;
         window.open(options.href, "", `width=${width},height=${height}`);
       } else {
-        // 일반 클릭: SPA 라우팅
+        // Normal click: SPA routing
         navigate(options.href, options.state ? { state: options.state } : undefined);
       }
     };

package/src/index.ts

@@ -6,9 +6,6 @@ export * from "./components/form-control/Button";
 // Select
 export * from "./components/form-control/select/Select";
 
-// SelectList
-export * from "./components/form-control/select-list/SelectList";
-
 // Combobox
 export * from "./components/form-control/combobox/Combobox";
 
@@ -134,6 +131,10 @@ export * from "./providers/shared-data/SharedDataChangeEvent";
 // SystemProvider
 export * from "./providers/SystemProvider";
 
+// I18n
+export * from "./providers/i18n/I18nContext";
+export * from "./providers/i18n/I18nContext.types";
+
 //#endregion
 
 //#region ========== Hooks ==========