@simplysm/solid 13.0.69 → 13.0.71

package/src/providers/ClipboardProvider.tsx

@@ -1,17 +1,17 @@
 import { onCleanup, onMount, type ParentComponent } from "solid-js";
 
 /**
- * 폼 컨트롤의 value를 클립보드 복사에 포함시키는 Provider
+ * Provider that includes form control values in clipboard copy.
  *
  * @remarks
- * 브라우저 기본 동작에서는 드래그 선택 후 복사 시 `<input>`, `<textarea>`, `<select>`의
- * 값이 포함되지 않는 문제를 해결한다.
+ * Fixes the browser default behavior where `<input>`, `<textarea>`, `<select>` values
+ * are not included when copying after drag selection.
  *
  * - `<input type="text|number|...">` → `.value`
  * - `<textarea>` → `.value`
- * - `<select>` → 선택된 옵션 텍스트
+ * - `<select>` → selected option text
  * - `<input type="checkbox|radio">` → `.checked` ? "Y" : ""
- * - 테이블 내에서는 셀 간 탭(`\t`), 행 간 개행(`\n`) 구분 (Excel 호환)
+ * - Within tables: tab (`\t`) between cells, newline (`\n`) between rows (Excel compatible)
  */
 export const ClipboardProvider: ParentComponent = (props) => {
   onMount(() => {
@@ -35,10 +35,10 @@ export const ClipboardProvider: ParentComponent = (props) => {
 };
 
 /**
- * Selection Range 내의 텍스트를 추출한다.
- * 폼 컨트롤은 value로 치환하고, 테이블 구조는 TSV 형식으로 변환한다.
+ * Extracts text from a Selection Range.
+ * Substitutes form controls with their values and converts table structures to TSV format.
  *
- * @returns 추출된 텍스트. 폼 컨트롤이 없으면 `null` (브라우저 기본 동작 유지)
+ * @returns Extracted text. Returns `null` if no form controls are present (preserves browser default behavior)
  */
 function extractTextFromRange(range: Range): string | null {
   const root =
@@ -47,7 +47,7 @@ function extractTextFromRange(range: Range): string | null {
       : range.commonAncestorContainer.parentElement;
   if (!root) return null;
 
-  // 선택 범위에 폼 컨트롤이 없으면 브라우저 기본 동작 사용
+  // Use browser default behavior if no form controls in selection range
   const formSelector =
     'input:not([type=hidden]), textarea, select, [role="checkbox"], [role="radio"]';
   const hasFormElements = [...root.querySelectorAll(formSelector)].some((el) =>
@@ -60,7 +60,7 @@ function extractTextFromRange(range: Range): string | null {
   const walk = (node: Node) => {
     if (!range.intersectsNode(node)) return;
 
-    // ARIA checkbox/radio: role="checkbox" 또는 role="radio" 요소
+    // ARIA checkbox/radio: elements with role="checkbox" or role="radio"
     if (node instanceof Element) {
       const role = node.getAttribute("role");
       if (role === "checkbox" || role === "radio") {
@@ -69,7 +69,7 @@ function extractTextFromRange(range: Range): string | null {
       }
     }
 
-    // 폼 컨트롤: value 추출
+    // Form control: extract value
     if (node instanceof HTMLInputElement) {
       if (node.type === "hidden") return;
       if (node.type === "checkbox" || node.type === "radio") {
@@ -81,7 +81,7 @@ function extractTextFromRange(range: Range): string | null {
     }
     if (node instanceof HTMLTextAreaElement) {
       const v = node.value;
-      // 개행 포함 시 큰따옴표로 감싸서 Excel 셀 내 줄바꿈 유지
+      // Wrap in double quotes when containing newlines to preserve line breaks within Excel cells
       parts.push(v.includes("\n") ? `"${v.replace(/"/g, '""')}"` : v);
       return;
     }
@@ -92,9 +92,9 @@ function extractTextFromRange(range: Range): string | null {
       return;
     }
 
-    // 텍스트 노드
+    // Text node
     if (node.nodeType === Node.TEXT_NODE) {
-      // 숨겨진 텍스트 건너뛰기 (dual-element overlay 패턴 등)
+      // Skip hidden text (dual-element overlay pattern, etc.)
       const parent = node.parentElement;
       if (parent) {
         const style = getComputedStyle(parent);
@@ -115,7 +115,7 @@ function extractTextFromRange(range: Range): string | null {
       return;
     }
 
-    // Element가 아닌 노드
+    // Non-Element node
     if (!(node instanceof Element)) {
       for (const child of node.childNodes) walk(child);
       return;
@@ -127,7 +127,7 @@ function extractTextFromRange(range: Range): string | null {
       return;
     }
 
-    // 테이블 행: 셀 간 탭 구분, 행 끝 개행
+    // Table row: tab-separated cells, newline at end of row
     if (node.tagName === "TR") {
       let firstCell = true;
       for (const child of node.childNodes) {
@@ -142,7 +142,7 @@ function extractTextFromRange(range: Range): string | null {
       return;
     }
 
-    // 기본: 자식 순회
+    // Default: traverse children
     for (const child of node.childNodes) {
       walk(child);
     }
@@ -154,11 +154,11 @@ function extractTextFromRange(range: Range): string | null {
 }
 
 /**
- * input value를 로캘 형식으로 변환한다.
+ * Converts input value to locale format.
  * - `date` → `toLocaleDateString()`
  * - `time` → `toLocaleTimeString()`
  * - `datetime-local` → `toLocaleString()`
- * - 그 외 → 원래 값 그대로
+ * - Others → original value as-is
  */
 function formatInputValue(input: HTMLInputElement): string {
   const { type, value } = input;

package/src/providers/ConfigContext.tsx

@@ -1,35 +1,35 @@
 import { createContext, useContext, type ParentComponent } from "solid-js";
 
 /**
- * 앱 전역 설정
+ * App-wide configuration.
  */
 export interface AppConfig {
   /**
-   * 클라이언트 식별자 (저장소 key prefix로 사용)
+   * Client identifier (used as storage key prefix)
    */
   clientName: string;
 }
 
 /**
- * 앱 전역 설정 Context
+ * App-wide configuration Context.
  */
 export const ConfigContext = createContext<AppConfig>();
 
 /**
- * 앱 전역 설정에 접근하는 훅
+ * Hook to access app-wide configuration.
  *
- * @throws ConfigProvider가 없으면 에러 발생
+ * @throws Throws an error if ConfigProvider is not present
  */
 export function useConfig(): AppConfig {
   const context = useContext(ConfigContext);
   if (!context) {
-    throw new Error("useConfig는 ConfigProvider 내부에서만 사용할 수 있습니다");
+    throw new Error("useConfig can only be used inside ConfigProvider");
   }
   return context;
 }
 
 /**
- * 앱 전역 설정 Provider
+ * App-wide configuration Provider.
  *
  * @example
  * ```tsx
@@ -40,7 +40,7 @@ export function useConfig(): AppConfig {
  */
 export const ConfigProvider: ParentComponent<{ clientName: string }> = (props) => {
   return (
-    // eslint-disable-next-line solid/reactivity -- clientName은 초기 설정값으로 변경되지 않음
+    // eslint-disable-next-line solid/reactivity -- clientName is an initial config value that does not change
     <ConfigContext.Provider value={{ clientName: props.clientName }}>
       {props.children}
     </ConfigContext.Provider>

package/src/providers/ErrorLoggerProvider.tsx

@@ -2,11 +2,11 @@ import { onCleanup, type ParentComponent } from "solid-js";
 import { useLogger } from "../hooks/useLogger";
 
 /**
- * 전역 에러 캡처 Provider
+ * Global error capture Provider.
  *
  * @remarks
- * window.onerror, unhandledrejection 이벤트를 캡처하여 useLogger를 통해 로깅한다.
- * LoggerProvider가 없으면 consola로 fallback.
+ * Captures window.onerror and unhandledrejection events and logs them via useLogger.
+ * Falls back to consola if LoggerProvider is not present.
  */
 export const ErrorLoggerProvider: ParentComponent = (props) => {
   const logger = useLogger();

package/src/providers/LoggerContext.tsx

@@ -2,11 +2,11 @@ import { type Accessor, createContext, createSignal, type ParentComponent } from
 import { consola } from "consola";
 
 /**
- * 로그 어댑터 인터페이스
+ * Log adapter interface.
  *
  * @remarks
- * - `useLogger`에서 사용하는 로그 전송 어댑터 (DB, 서버 등)
- * - adapter가 설정되면 consola 대신 adapter만 사용됨
+ * - Log transport adapter used by `useLogger` (DB, server, etc.)
+ * - When an adapter is set, only the adapter is used instead of consola
  */
 export interface LogAdapter {
   write(severity: "error" | "warn" | "info" | "log", ...data: any[]): Promise<void> | void;
@@ -17,11 +17,11 @@ const defaultLogAdapter: LogAdapter = {
 };
 
 /**
- * 로그 어댑터 Context 값
+ * Logger context value.
  *
  * @remarks
- * - `adapter`: 현재 설정된 LogAdapter (signal). 기본값은 consola 기반 adapter
- * - `configure`: decorator function으로 adapter를 설정/체이닝하는 함수
+ * - `adapter`: Currently configured LogAdapter (signal). Defaults to consola-based adapter
+ * - `configure`: Function that sets/chains adapter via decorator function
  */
 export interface LoggerContextValue {
   adapter: Accessor<LogAdapter>;
@@ -29,20 +29,20 @@ export interface LoggerContextValue {
 }
 
 /**
- * 로그 어댑터 Context
+ * Log adapter Context.
  *
  * @remarks
- * Provider가 없으면 `undefined` (useLogger에서 consola 기본 adapter 사용)
+ * Returns `undefined` without Provider (useLogger uses consola default adapter)
  */
 export const LoggerContext = createContext<LoggerContextValue>();
 
 /**
- * 로그 어댑터 Provider
+ * Log adapter Provider.
  *
  * @remarks
- * - prop 없이 사용. adapter는 `useLogger().configure()`로 나중에 주입
- * - 기본값은 consola 기반 adapter
- * - configure는 decorator function을 받아 기존 adapter를 감싸거나 교체
+ * - Used without props. Adapter is injected later via `useLogger().configure()`
+ * - Defaults to consola-based adapter
+ * - configure accepts a decorator function to wrap or replace the existing adapter
  *
  * @example
  * ```tsx
@@ -50,7 +50,7 @@ export const LoggerContext = createContext<LoggerContextValue>();
  *   <App />
  * </LoggerProvider>
  *
- * // 자식 컴포넌트에서 decorator로 설정:
+ * // Configure with a decorator in a child component:
  * useLogger().configure((origin) => ({
  *   write: (...args) => {
  *     origin.write(...args);

package/src/providers/PwaUpdateProvider.tsx

@@ -4,13 +4,13 @@ import { useNotification } from "../components/feedback/notification/Notificatio
 const UPDATE_INTERVAL = 5 * 60 * 1000; // 5 minutes
 
 /**
- * PWA Service Worker 업데이트 감지 Provider
+ * PWA Service Worker update detection Provider.
  *
  * @remarks
- * 5분마다 SW 업데이트를 폴링하며, 새 버전 감지 시 알림을 표시한다.
- * NotificationProvider 내부에서 사용해야 한다.
+ * Polls for SW updates every 5 minutes and displays a notification when a new version is detected.
+ * Must be used inside NotificationProvider.
  *
- * navigator.serviceWorker가 없거나 등록된 SW가 없으면 graceful no-op.
+ * Graceful no-op if navigator.serviceWorker is unavailable or no SW is registered.
  */
 export const PwaUpdateProvider: ParentComponent = (props) => {
   if (typeof navigator !== "undefined" && "serviceWorker" in navigator) {
@@ -53,9 +53,9 @@ export const PwaUpdateProvider: ParentComponent = (props) => {
     });
 
     function promptUpdate(waitingSW: ServiceWorker): void {
-      notification.info("앱이 업데이트되었습니다", "새로고침하면 최신 버전을 사용할 수 있습니다", {
+      notification.info("App updated", "Refresh to use the latest version", {
         action: {
-          label: "새로고침",
+          label: "Refresh",
           onClick: () => {
             waitingSW.postMessage({ type: "SKIP_WAITING" });
           },

package/src/providers/ServiceClientContext.ts

@@ -2,31 +2,31 @@ import { createContext, useContext } from "solid-js";
 import type { ServiceClient, ServiceConnectionConfig } from "@simplysm/service-client";
 
 /**
- * WebSocket 서비스 클라이언트 Context 값
+ * WebSocket service client context value.
  */
 export interface ServiceClientContextValue {
-  /** WebSocket 연결 열기 (key 생략 시 "default") */
+  /** Open a WebSocket connection (defaults to "default" if key is omitted) */
   connect: (key?: string, options?: Partial<ServiceConnectionConfig>) => Promise<void>;
-  /** 연결 닫기 */
+  /** Close a connection */
   close: (key?: string) => Promise<void>;
-  /** 연결된 클라이언트 인스턴스 가져오기 (연결되지 않은 key면 에러 발생) */
+  /** Get a connected client instance (throws if the key is not connected) */
   get: (key?: string) => ServiceClient;
-  /** 연결 상태 확인 */
+  /** Check connection status */
   isConnected: (key?: string) => boolean;
 }
 
-/** WebSocket 서비스 클라이언트 Context */
+/** WebSocket service client Context */
 export const ServiceClientContext = createContext<ServiceClientContextValue>();
 
 /**
- * WebSocket 서비스 클라이언트에 접근하는 훅
+ * Hook to access the WebSocket service client.
  *
- * @throws ServiceClientProvider가 없으면 에러 발생
+ * @throws Throws an error if ServiceClientProvider is not present
  */
 export function useServiceClient(): ServiceClientContextValue {
   const context = useContext(ServiceClientContext);
   if (!context) {
-    throw new Error("useServiceClient는 ServiceClientProvider 내부에서만 사용할 수 있습니다");
+    throw new Error("useServiceClient can only be used inside ServiceClientProvider");
   }
   return context;
 }

package/src/providers/ServiceClientProvider.tsx

@@ -9,14 +9,14 @@ import { useConfig } from "./ConfigContext";
 import { useNotification } from "../components/feedback/notification/NotificationContext";
 
 /**
- * WebSocket 서비스 클라이언트 Provider
+ * WebSocket service client Provider.
  *
  * @remarks
- * - ConfigProvider와 NotificationProvider 내부에서 사용해야 함
- * - key 기반 다중 연결 관리
- * - 요청/응답 진행률을 NotificationProvider 알림으로 표시
- * - host, port, ssl 미지정 시 window.location에서 자동 추론
- * - cleanup 시 모든 연결 자동 종료
+ * - Must be used inside ConfigProvider and NotificationProvider
+ * - Key-based multi-connection management
+ * - Displays request/response progress as NotificationProvider alerts
+ * - Auto-infers host, port, ssl from window.location when not specified
+ * - Automatically closes all connections on cleanup
  *
  * @example
  * ```tsx
@@ -53,9 +53,9 @@ export const ServiceClientProvider: ParentComponent = (props) => {
     if (clientMap.has(resolvedKey)) {
       const existing = clientMap.get(resolvedKey)!;
       if (!existing.connected) {
-        throw new Error("이미 연결이 끊긴 클라이언트와 같은 키로 연결을 시도하였습니다.");
+        throw new Error("Attempted to connect with the same key as a disconnected client.");
       } else {
-        throw new Error("이미 연결된 클라이언트와 같은 키로 연결을 시도하였습니다.");
+        throw new Error("Attempted to connect with the same key as an already connected client.");
       }
     }
 
@@ -70,12 +70,12 @@ export const ServiceClientProvider: ParentComponent = (props) => {
       ...options,
     });
 
-    // 요청 진행률 이벤트
+    // Request progress event
     client.on("request-progress", (state) => {
       const existing = reqProgressMap.get(state.uuid);
 
       if (existing == null) {
-        const id = notification.info("요청을 전송하는 중입니다.", "0%");
+        const id = notification.info("Sending request", "0%");
         reqProgressMap.set(state.uuid, id);
       } else {
         const percent = Math.round((state.completedSize / state.totalSize) * 100);
@@ -88,7 +88,7 @@ export const ServiceClientProvider: ParentComponent = (props) => {
           notification.update(
             id,
             {
-              title: "요청 전송 완료",
+              title: "Request transmission completed",
               message: "100%",
             },
             { renotify: true },
@@ -98,12 +98,12 @@ export const ServiceClientProvider: ParentComponent = (props) => {
       }
     });
 
-    // 응답 진행률 이벤트
+    // Response progress event
     client.on("response-progress", (state) => {
       const existing = resProgressMap.get(state.uuid);
 
       if (existing == null) {
-        const id = notification.info("응답을 전송받는 중입니다.", "0%");
+        const id = notification.info("Receiving response", "0%");
         resProgressMap.set(state.uuid, id);
       } else {
         const percent = Math.round((state.completedSize / state.totalSize) * 100);
@@ -116,7 +116,7 @@ export const ServiceClientProvider: ParentComponent = (props) => {
           notification.update(
             id,
             {
-              title: "응답 전송 완료",
+              title: "Response reception completed",
               message: "100%",
             },
             { renotify: true },
@@ -143,7 +143,7 @@ export const ServiceClientProvider: ParentComponent = (props) => {
     const resolvedKey = key ?? "default";
     const client = clientMap.get(resolvedKey);
     if (!client) {
-      throw new Error(`연결하지 않은 클라이언트 키입니다. ${resolvedKey}`);
+      throw new Error(`Client key not connected: ${resolvedKey}`);
     }
     return client;
   };

package/src/providers/SyncStorageContext.tsx

@@ -7,11 +7,11 @@ import {
 } from "solid-js";
 
 /**
- * 커스텀 동기화 저장소 어댑터 인터페이스
+ * Custom sync storage adapter interface.
  *
  * @remarks
- * - 동기 저장소: `localStorage`, `sessionStorage` 등 그대로 전달 가능
- * - 비동기 저장소: `getItem`이 `Promise`를 반환하는 구현체 전달
+ * - Sync storage: can pass `localStorage`, `sessionStorage`, etc. directly
+ * - Async storage: pass an implementation where `getItem` returns a `Promise`
  */
 export interface StorageAdapter {
   getItem(key: string): string | null | Promise<string | null>;
@@ -20,7 +20,7 @@ export interface StorageAdapter {
 }
 
 /**
- * 기본 localStorage 기반 어댑터
+ * Default localStorage-based adapter.
  */
 const defaultStorageAdapter: StorageAdapter = {
   getItem: (key) => localStorage.getItem(key),
@@ -29,11 +29,11 @@ const defaultStorageAdapter: StorageAdapter = {
 };
 
 /**
- * 동기화 저장소 Context 값
+ * Sync storage context value.
  *
  * @remarks
- * - `adapter`: 현재 설정된 StorageAdapter (signal). 기본값은 localStorage 기반 어댑터
- * - `configure`: decorator 함수를 받아 기존 adapter를 감싸서 새 adapter를 설정하는 함수
+ * - `adapter`: Currently configured StorageAdapter (signal). Defaults to localStorage-based adapter
+ * - `configure`: Function that accepts a decorator function to wrap the existing adapter into a new one
  */
 export interface SyncStorageContextValue {
   adapter: Accessor<StorageAdapter>;
@@ -41,28 +41,28 @@ export interface SyncStorageContextValue {
 }
 
 /**
- * 동기화 저장소 Context
+ * Sync storage Context.
  *
  * @remarks
- * Provider가 없으면 `undefined` (useSyncConfig에서 localStorage로 fallback)
+ * Returns `undefined` without Provider (useSyncConfig falls back to localStorage)
  */
 export const SyncStorageContext = createContext<SyncStorageContextValue>();
 
 /**
- * 동기화 저장소 Context에 접근하는 훅
+ * Hook to access the sync storage Context.
  *
- * @returns SyncStorageContextValue 또는 undefined (Provider가 없으면)
+ * @returns SyncStorageContextValue or undefined (if Provider is not present)
  */
 export function useSyncStorage(): SyncStorageContextValue | undefined {
   return useContext(SyncStorageContext);
 }
 
 /**
- * 동기화 저장소 Provider
+ * Sync storage Provider.
  *
  * @remarks
- * - prop 없이 사용. 기본적으로 localStorage 기반 어댑터가 설정됨
- * - `configure()`로 decorator 함수를 전달하여 기존 adapter를 감싸거나 교체 가능
+ * - Used without props. localStorage-based adapter is set by default
+ * - Use `configure()` to pass a decorator function to wrap or replace the existing adapter
  *
  * @example
  * ```tsx
@@ -70,7 +70,7 @@ export function useSyncStorage(): SyncStorageContextValue | undefined {
  *   <App />
  * </SyncStorageProvider>
  *
- * // 자식 컴포넌트에서 decorator 패턴으로 adapter 커스터마이징:
+ * // Customize adapter with decorator pattern in a child component:
  * useSyncStorage()!.configure((origin) => ({
  *   getItem: (key) => myCustomGetItem(key),
  *   setItem: origin.setItem,

package/src/providers/SystemProvider.tsx

@@ -1,5 +1,6 @@
 import { type ParentComponent } from "solid-js";
 import { ConfigProvider } from "./ConfigContext";
+import { I18nProvider } from "./i18n/I18nContext";
 import { SyncStorageProvider } from "./SyncStorageContext";
 import { LoggerProvider } from "./LoggerContext";
 import { NotificationProvider } from "../components/feedback/notification/NotificationProvider";
@@ -21,17 +22,18 @@ export const SystemProvider: ParentComponent<{
 }> = (props) => {
   return (
     <ConfigProvider clientName={props.clientName}>
-      <SyncStorageProvider>
-        <LoggerProvider>
-          <NotificationProvider>
-            <NotificationBanner />
-            <ErrorLoggerProvider>
-              <PwaUpdateProvider>
-                <ClipboardProvider>
-                  <ThemeProvider>
-                    <ServiceClientProvider>
-                      <SharedDataProvider>
-                        <BusyProvider variant={props.busyVariant}>{props.children}</BusyProvider>
+      <I18nProvider>
+        <SyncStorageProvider>
+          <LoggerProvider>
+            <NotificationProvider>
+              <NotificationBanner />
+              <ErrorLoggerProvider>
+                <PwaUpdateProvider>
+                  <ClipboardProvider>
+                    <ThemeProvider>
+                      <ServiceClientProvider>
+                        <SharedDataProvider>
+                          <BusyProvider variant={props.busyVariant}>{props.children}</BusyProvider>
                       </SharedDataProvider>
                     </ServiceClientProvider>
                   </ThemeProvider>
@@ -40,7 +42,8 @@ export const SystemProvider: ParentComponent<{
             </ErrorLoggerProvider>
           </NotificationProvider>
         </LoggerProvider>
-      </SyncStorageProvider>
+        </SyncStorageProvider>
+      </I18nProvider>
     </ConfigProvider>
   );
 };