@simplysm/solid 13.0.51 → 13.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.51",
+  "version": "13.0.55",
   "description": "심플리즘 패키지 - SolidJS 라이브러리",
   "author": "김석래",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "solid-tiptap": "^0.8.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.51",
-    "@simplysm/core-common": "13.0.51"
+    "@simplysm/core-browser": "13.0.55",
+    "@simplysm/core-common": "13.0.55"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

package/src/components/data/sheet/DataSheet.css

@@ -1,10 +1,27 @@
-[data-sheet] tbody tr:hover > td {
-  box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 3%);
+[data-sheet] tbody tr {
+  position: relative;
+}
+
+/* ::after 공통 — content가 없으면 렌더링되지 않으므로 각 상태에서 content 설정 */
+[data-sheet] tbody tr::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+
+[data-sheet] tbody tr:hover::after {
+  content: "";
+  background: rgb(0 0 0 / 3%);
 }
 
 /* 선택 행 시각 효과 — 호버보다 약간 더 진하게 */
-[data-sheet] tbody tr[data-selected] > td {
-  box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 5%);
+[data-sheet] tbody tr[data-selected]::after {
+  content: "";
+  background: rgb(0 0 0 / 5%);
 }
 
 /* 드래그 중인 행 */
@@ -13,14 +30,15 @@
 }
 
 /* inside 드롭 대상 행 */
-[data-sheet] tbody tr[data-drag-over="inside"] > td {
-  box-shadow: inset 0 0 0 9999px rgb(59 130 246 / 10%);
+[data-sheet] tbody tr[data-drag-over="inside"]::after {
+  content: "";
+  background: rgb(59 130 246 / 10%);
 }
 
-.dark [data-sheet] tbody tr:hover > td {
-  box-shadow: inset 0 0 0 9999px rgb(255 255 255 / 4%);
+.dark [data-sheet] tbody tr:hover::after {
+  background: rgb(255 255 255 / 4%);
 }
 
-.dark [data-sheet] tbody tr[data-selected] > td {
-  box-shadow: inset 0 0 0 9999px rgb(255 255 255 / 6%);
+.dark [data-sheet] tbody tr[data-selected]::after {
+  background: rgb(255 255 255 / 6%);
 }

package/src/components/data/sheet/DataSheet.tsx

@@ -267,6 +267,12 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     return sortedItems().slice((page - 1) * ipp, page * ipp);
   });
 
+  const originalIndexMap = createMemo(() => {
+    const map = new Map<T, number>();
+    (local.items ?? []).forEach((item, i) => map.set(item, i));
+    return map;
+  });
+
   // #region Feature Column Setup (확장/선택 기능 컬럼 공통)
   const hasExpandFeature = () => local.getChildren != null;
   const hasSelectFeature = () => local.selectMode != null;
@@ -462,13 +468,24 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
   function toggleExpandAll(): void {
     if (!local.getChildren) return;
-    const allExpandable = collectAllExpandable(pagedItems(), local.getChildren);
+    const indexMap = originalIndexMap();
+    const allExpandable = collectAllExpandable(
+      pagedItems(),
+      local.getChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
     const isAllExpanded = allExpandable.every((item) => expandedItems().includes(item));
     setExpandedItems(isAllExpanded ? [] : allExpandable);
   }
 
   const flatItems = createMemo((): FlatItem<T>[] => {
-    return flattenTree(pagedItems(), expandedItems(), local.getChildren);
+    const indexMap = originalIndexMap();
+    return flattenTree(
+      pagedItems(),
+      expandedItems(),
+      local.getChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
   });
 
   // #region Selection
@@ -732,7 +749,12 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   // 전체 확장 상태인지
   const isAllExpanded = createMemo(() => {
     if (!local.getChildren) return false;
-    const allExpandable = collectAllExpandable(pagedItems(), local.getChildren);
+    const indexMap = originalIndexMap();
+    const allExpandable = collectAllExpandable(
+      pagedItems(),
+      local.getChildren,
+      (item) => indexMap.get(item) ?? -1,
+    );
     return (
       allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
     );
@@ -1127,7 +1149,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                     {(() => {
                       const selectable = () => getItemSelectable(flat.item);
                       const isSelected = () => selectedItems().includes(flat.item);
-                      const rowIndex = () => displayItems().indexOf(flat);
+                      const rowIndex = () => flat.row;
 
                       return (
                         <td
@@ -1244,6 +1266,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                         {col.cell({
                           item: flat.item,
                           index: flat.index,
+                          row: flat.row,
                           depth: flat.depth,
                         })}
                       </td>

package/src/components/data/sheet/sheetUtils.ts

@@ -103,25 +103,29 @@ export function flattenTree<TNode>(
   items: TNode[],
   expandedItems: TNode[],
   getChildren?: (item: TNode, index: number) => TNode[] | undefined,
+  getOriginalIndex?: (item: TNode) => number,
 ): FlatItem<TNode>[] {
   if (!getChildren) {
     return items.map((item, i) => ({
       item,
-      index: i,
+      index: getOriginalIndex ? getOriginalIndex(item) : i,
+      row: i,
       depth: 0,
       hasChildren: false,
     }));
   }
 
   const result: FlatItem<TNode>[] = [];
-  let index = 0;
+  let row = 0;
 
   function walk(list: TNode[], depth: number, parent?: TNode): void {
-    for (const item of list) {
+    for (let localIdx = 0; localIdx < list.length; localIdx++) {
+      const item = list[localIdx];
+      const index = depth === 0 && getOriginalIndex ? getOriginalIndex(item) : localIdx;
       const children = getChildren!(item, index);
       const hasChildren = children != null && children.length > 0;
-      result.push({ item, index, depth, hasChildren, parent });
-      index++;
+      result.push({ item, index, row, depth, hasChildren, parent });
+      row++;
 
       if (hasChildren && expandedItems.includes(item)) {
         walk(children, depth + 1, item);
@@ -136,22 +140,23 @@ export function flattenTree<TNode>(
 export function collectAllExpandable<TItem>(
   items: TItem[],
   getChildren: (item: TItem, index: number) => TItem[] | undefined,
+  getOriginalIndex?: (item: TItem) => number,
 ): TItem[] {
   const result: TItem[] = [];
-  let index = 0;
 
-  function walk(list: TItem[]): void {
-    for (const item of list) {
+  function walk(list: TItem[], depth: number): void {
+    for (let localIdx = 0; localIdx < list.length; localIdx++) {
+      const item = list[localIdx];
+      const index = depth === 0 && getOriginalIndex ? getOriginalIndex(item) : localIdx;
       const children = getChildren(item, index);
-      index++;
       if (children != null && children.length > 0) {
         result.push(item);
-        walk(children);
+        walk(children, depth + 1);
       }
     }
   }
 
-  walk(items);
+  walk(items, 0);
   return result;
 }
 

package/src/components/data/sheet/types.ts

@@ -64,7 +64,10 @@ export interface DataSheetColumnProps<TItem> {
 
 export interface DataSheetCellContext<TItem> {
   item: TItem;
+  /** 소속 배열 내 위치 (루트: items[], 자식: parent.children[]) */
   index: number;
+  /** 플랫 표시 행 위치 (현재 페이지 내 순번) */
+  row: number;
   depth: number;
 }
 
@@ -116,7 +119,10 @@ export interface HeaderDef {
 
 export interface FlatItem<TItem> {
   item: TItem;
+  /** 소속 배열 내 위치 (루트: items[], 자식: parent.children[]) */
   index: number;
+  /** 플랫 표시 행 위치 (현재 페이지 내 순번) */
+  row: number;
   depth: number;
   hasChildren: boolean;
   parent?: TItem;

package/src/components/display/Icon.tsx

@@ -1,6 +1,7 @@
 import { type Component, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
+import clsx from "clsx";
 
 export interface IconProps extends Omit<TablerIconProps, "size"> {
   icon: Component<TablerIconProps>;
@@ -9,5 +10,13 @@ export interface IconProps extends Omit<TablerIconProps, "size"> {
 
 export const Icon: Component<IconProps> = (props) => {
   const [local, rest] = splitProps(props, ["icon", "size"]);
-  return <Dynamic component={local.icon} data-icon size={local.size ?? "1.25em"} {...rest} />;
+  return (
+    <Dynamic
+      data-icon
+      component={local.icon}
+      size={local.size ?? "1.25em"}
+      {...rest}
+      class={clsx("inline", rest.class)}
+    />
+  );
 };

package/src/components/display/Link.tsx

@@ -1,21 +1,31 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { disabledOpacity, type SemanticTheme, themeTokens } from "../../styles/tokens.styles";
 
-export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {}
+export type LinkTheme = SemanticTheme;
 
-const baseClass = clsx(
-  "text-primary-600",
-  "dark:text-primary-400",
-  "hover:underline",
-  "cursor-pointer",
-);
+export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  theme?: LinkTheme;
+  disabled?: boolean;
+}
+
+const baseClass = clsx("hover:underline", "cursor-pointer");
+
+const themeClasses: Record<LinkTheme, string> = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [theme, t.text]),
+) as Record<LinkTheme, string>;
 
 export const Link: ParentComponent<LinkProps> = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class"]);
+  const [local, rest] = splitProps(props, ["children", "class", "theme", "disabled"]);
+
+  const getClassName = () => {
+    const theme = local.theme ?? "primary";
+    return twMerge(baseClass, themeClasses[theme], local.disabled && disabledOpacity, local.class);
+  };
 
   return (
-    <a class={twMerge(baseClass, local.class)} {...rest}>
+    <a class={getClassName()} aria-disabled={local.disabled ?? undefined} {...rest}>
       {local.children}
     </a>
   );

package/src/components/form-control/Invalid.tsx

@@ -1,4 +1,5 @@
-import { type ParentComponent, children, createEffect, createSignal, onCleanup } from "solid-js";
+import { children, createEffect, createSignal, onCleanup, type ParentComponent } from "solid-js";
+import clsx from "clsx";
 import "@simplysm/core-browser";
 
 export interface InvalidProps {
@@ -13,9 +14,12 @@ export interface InvalidProps {
 export const Invalid: ParentComponent<InvalidProps> = (props) => {
   const hiddenInputEl = document.createElement("input");
   hiddenInputEl.type = "text";
-  hiddenInputEl.style.cssText =
-    "position:absolute; bottom:0; left:50%; width:1px; height:1px; opacity:0; pointer-events:none; z-index:-10;";
-  hiddenInputEl.autocomplete = "off";
+  hiddenInputEl.className = clsx(
+    "absolute bottom-0 left-1/2",
+    "size-px opacity-0",
+    "pointer-events-none -z-10",
+  );
+  hiddenInputEl.autocomplete = "one-time-code";
   hiddenInputEl.tabIndex = -1;
   hiddenInputEl.setAttribute("aria-hidden", "true");
 
@@ -81,8 +85,11 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
       if (shouldShow) {
         const dot = document.createElement("span");
         dot.setAttribute("data-invalid-dot", "");
-        dot.style.cssText =
-          "position:absolute; top:2px; right:2px; width:6px; height:6px; border-radius:50%; background:red; pointer-events:none;";
+        dot.className = clsx(
+          "absolute left-0.5 top-0.5",
+          "size-1.5 rounded-full",
+          "pointer-events-none bg-danger-500",
+        );
         targetEl.appendChild(dot);
       }
 

package/src/components/form-control/combobox/Combobox.tsx

@@ -277,7 +277,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       size: local.size,
       disabled: local.disabled,
       inset: local.inset,
-      class: local.class,
+      class: clsx(!local.inset && "bg-primary-50 dark:bg-primary-950/30", local.class),
     });
 
   // 참고: 초기 검색은 handleTriggerClick에서 수행됨
@@ -314,6 +314,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
             value={query()}
             placeholder={currentValue === undefined ? local.placeholder : undefined}
             disabled={local.disabled}
+            autocomplete="one-time-code"
             onInput={handleInput}
           />
         );

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -49,7 +49,7 @@ export interface RichTextEditorProps {
 // 에디터 wrapper 스타일
 const editorWrapperClass = clsx(
   "flex flex-col",
-  "bg-white dark:bg-base-900",
+  "bg-primary-50 dark:bg-primary-950/30",
   "text-base-900 dark:text-base-100",
   "border border-base-300 dark:border-base-700",
   "rounded",

package/src/components/form-control/field/DatePicker.tsx

@@ -3,7 +3,7 @@ import { type Component, createMemo, type JSX, Show, splitProps } from "solid-js
 import { twMerge } from "tailwind-merge";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, type FieldSize, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
 
 type DatePickerUnit = "year" | "month" | "date";
@@ -181,6 +181,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
+      extra: "min-w-32",
     });
 
   // 편집 가능 여부
@@ -231,6 +232,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
                 title={local.title}
                 min={formatDateValue(local.min, fieldType())}
                 max={formatDateValue(local.max, fieldType())}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>
@@ -257,6 +259,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
                 title={local.title}
                 min={formatDateValue(local.min, fieldType())}
                 max={formatDateValue(local.max, fieldType())}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>

package/src/components/form-control/field/DateTimePicker.tsx

@@ -176,6 +176,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
+      extra: "min-w-44",
     });
 
   // 편집 가능 여부
@@ -230,6 +231,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
                 min={formatDateTimeValue(local.min, fieldType())}
                 max={formatDateTimeValue(local.max, fieldType())}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>
@@ -262,6 +264,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
                 min={formatDateTimeValue(local.min, fieldType())}
                 max={formatDateTimeValue(local.max, fieldType())}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>

package/src/components/form-control/field/NumberInput.tsx

@@ -328,6 +328,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
                 value={displayValue()}
                 placeholder={local.placeholder}
                 title={local.title}
+                autocomplete="one-time-code"
                 onInput={handleInput}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
@@ -361,6 +362,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
                 value={displayValue()}
                 placeholder={local.placeholder}
                 title={local.title}
+                autocomplete="one-time-code"
                 onInput={handleInput}
                 onFocus={handleFocus}
                 onBlur={handleBlur}

package/src/components/form-control/field/TextInput.tsx

@@ -284,7 +284,7 @@ export const TextInput: Component<TextInputProps> = (props) => {
                 value={inputValue()}
                 placeholder={local.placeholder}
                 title={local.title}
-                autocomplete={local.autocomplete}
+                autocomplete={local.autocomplete ?? "one-time-code"}
                 onInput={handleInput}
                 onCompositionStart={handleCompositionStart}
                 onCompositionEnd={handleCompositionEnd}
@@ -314,7 +314,7 @@ export const TextInput: Component<TextInputProps> = (props) => {
                 value={inputValue()}
                 placeholder={local.placeholder}
                 title={local.title}
-                autocomplete={local.autocomplete}
+                autocomplete={local.autocomplete ?? "one-time-code"}
                 onInput={handleInput}
                 onCompositionStart={handleCompositionStart}
                 onCompositionEnd={handleCompositionEnd}

package/src/components/form-control/field/TimePicker.tsx

@@ -151,6 +151,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
+      extra: "min-w-24",
     });
 
   // 편집 가능 여부
@@ -203,6 +204,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
                 value={displayValue()}
                 title={local.title}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>
@@ -228,6 +230,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
                 value={displayValue()}
                 title={local.title}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -289,6 +289,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
           type="text"
           class={resolvedInputClass()}
           placeholder="이름..."
+          autocomplete="one-time-code"
           value={inputValue()}
           onInput={(e) => setInputValue(e.currentTarget.value)}
           onKeyDown={handleInputKeyDown}

package/src/components/layout/topbar/Topbar.tsx

@@ -5,6 +5,7 @@ import { Icon } from "../../display/Icon";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../form-control/Button";
 import { useSidebarContextOptional } from "../sidebar/SidebarContext";
+import { TopbarActions } from "./TopbarActions";
 import { TopbarContainer } from "./TopbarContainer";
 import { TopbarMenu } from "./TopbarMenu";
 import { TopbarUser } from "./TopbarUser";
@@ -58,6 +59,7 @@ export interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
  * ```
  */
 interface TopbarComponent extends ParentComponent<TopbarProps> {
+  Actions: typeof TopbarActions;
   Container: typeof TopbarContainer;
   Menu: typeof TopbarMenu;
   User: typeof TopbarUser;
@@ -88,6 +90,7 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
 };
 
 export const Topbar = TopbarBase as TopbarComponent;
+Topbar.Actions = TopbarActions;
 Topbar.Container = TopbarContainer;
 Topbar.Menu = TopbarMenu;
 Topbar.User = TopbarUser;

package/src/components/layout/topbar/TopbarActions.tsx

@@ -0,0 +1,8 @@
+import { type Component, useContext } from "solid-js";
+import { TopbarContext } from "./TopbarContext";
+
+export const TopbarActions: Component = () => {
+  const context = useContext(TopbarContext);
+
+  return <span data-topbar-actions>{context?.actions()}</span>;
+};

package/src/components/layout/topbar/TopbarContainer.tsx

@@ -1,6 +1,7 @@
-import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import { type JSX, type ParentComponent, splitProps, createSignal } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { TopbarContext } from "./TopbarContext";
 
 const containerClass = clsx("flex h-full flex-col");
 
@@ -13,7 +14,7 @@ export interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement>
  *
  * @remarks
  * - `flex flex-col h-full` 구조로 Topbar와 콘텐츠를 수직 배치
- * - Context 없이 순수 레이아웃 역할만 수행
+ * - TopbarContext.Provider로 actions 상태 공유
  * - 부모 요소에 높이가 지정되어야 함
  *
  * @example
@@ -29,12 +30,15 @@ export interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement>
  */
 export const TopbarContainer: ParentComponent<TopbarContainerProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
+  const [actions, setActions] = createSignal<JSX.Element | undefined>(undefined);
 
   const getClassName = () => twMerge(containerClass, local.class);
 
   return (
-    <div {...rest} data-topbar-container class={getClassName()}>
-      {local.children}
-    </div>
+    <TopbarContext.Provider value={{ actions, setActions }}>
+      <div {...rest} data-topbar-container class={getClassName()}>
+        {local.children}
+      </div>
+    </TopbarContext.Provider>
   );
 };

package/src/components/layout/topbar/TopbarContext.ts

@@ -0,0 +1,36 @@
+import {
+  createContext,
+  useContext,
+  onCleanup,
+  type Accessor,
+  type JSX,
+  type Setter,
+} from "solid-js";
+
+export interface TopbarContextValue {
+  actions: Accessor<JSX.Element | undefined>;
+  setActions: Setter<JSX.Element | undefined>;
+}
+
+export const TopbarContext = createContext<TopbarContextValue>();
+
+export function useTopbarActionsAccessor(): Accessor<JSX.Element | undefined> {
+  const context = useContext(TopbarContext);
+  if (!context) {
+    throw new Error("useTopbarActionsAccessor는 Topbar.Container 내부에서만 사용할 수 있습니다");
+  }
+  return context.actions;
+}
+
+export function createTopbarActions(accessor: () => JSX.Element): void {
+  const context = useContext(TopbarContext);
+  if (!context) {
+    throw new Error("createTopbarActions는 Topbar.Container 내부에서만 사용할 수 있습니다");
+  }
+
+  context.setActions(() => accessor());
+
+  onCleanup(() => {
+    context.setActions(undefined);
+  });
+}