@simplysm/solid 13.0.28 → 13.0.30

package/src/components/layout/sidebar/SidebarUser.tsx

@@ -11,7 +11,7 @@ import { Icon } from "../../display/Icon";
 
 void ripple;
 
-const containerClass = clsx("m-2 flex flex-col overflow-hidden rounded bg-white dark:bg-base-800");
+const containerClass = clsx("m-2 flex flex-col overflow-hidden rounded bg-white dark:bg-base-900");
 
 const headerClass = clsx(
   "flex",
@@ -23,12 +23,15 @@ const headerClass = clsx(
   "cursor-pointer",
   "transition-colors",
   "hover:bg-base-500/10",
-  "dark:hover:bg-base-700",
+  "dark:hover:bg-base-800",
 );
 
 const headerReadonlyClass = clsx("cursor-default hover:bg-transparent dark:hover:bg-transparent");
 
-const avatarClass = clsx("flex size-10 items-center justify-center rounded-full", "bg-primary-500 text-white");
+const avatarClass = clsx(
+  "flex size-10 items-center justify-center rounded-full",
+  "bg-primary-500 text-white",
+);
 
 export interface SidebarUserMenu {
   title: string;
@@ -114,17 +117,19 @@ export const SidebarUser: Component<SidebarUserProps> = (props) => {
           <div class={avatarClass}>
             <Icon icon={local.icon ?? IconUser} class="size-6" />
           </div>
-          <Show when={local.description} fallback={<span class="font-semibold">{local.name}</span>}>
+          <Show when={local.description} fallback={<span class="font-bold">{local.name}</span>}>
             <div class="flex flex-col">
-              <span class="font-semibold">{local.name}</span>
-              <span class={clsx("text-sm", "text-base-500 dark:text-base-400")}>{local.description}</span>
+              <span class="font-bold">{local.name}</span>
+              <span class={clsx("text-sm", "text-base-500 dark:text-base-400")}>
+                {local.description}
+              </span>
             </div>
           </Show>
         </div>
       </button>
       <Show when={hasMenus()}>
         <Collapse open={open()}>
-          <hr class={clsx("border-base-200 dark:border-base-700")} />
+          <hr class={clsx("border-base-100 dark:border-base-800")} />
           <List inset>
             <For each={local.menus}>
               {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}

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

@@ -24,7 +24,7 @@ const baseClass = clsx(
   "px-2",
   // 배경/테두리
   "bg-white",
-  "dark:bg-base-950",
+  "dark:bg-base-900",
   "border-b",
   "border-base-200",
   "dark:border-base-700",

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

@@ -1,4 +1,12 @@
-import { type Component, type JSX, For, Show, splitProps, createSignal, createMemo } from "solid-js";
+import {
+  type Component,
+  type JSX,
+  For,
+  Show,
+  splitProps,
+  createSignal,
+  createMemo,
+} from "solid-js";
 import { useLocation, useNavigate } from "@solidjs/router";
 import { IconChevronDown, IconDotsVertical, type IconProps } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
@@ -76,10 +84,16 @@ export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
         >
           <Icon icon={IconDotsVertical} size="1.25em" />
         </Button>
-        <Dropdown triggerRef={() => mobileButtonRef} open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>
+        <Dropdown
+          triggerRef={() => mobileButtonRef}
+          open={mobileMenuOpen()}
+          onOpenChange={setMobileMenuOpen}
+        >
           <List inset>
             <For each={local.menus}>
-              {(menu) => <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />}
+              {(menu) => (
+                <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />
+              )}
             </For>
           </List>
         </Dropdown>
@@ -147,7 +161,11 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
         </Show>
         <span>{props.menu.title}</span>
         <Show when={hasChildren()}>
-          <Icon icon={IconChevronDown} size="1em" class={clsx("transition-transform", open() && "rotate-180")} />
+          <Icon
+            icon={IconChevronDown}
+            size="1em"
+            class={clsx("transition-transform", open() && "rotate-180")}
+          />
         </Show>
       </Button>
       <Show when={hasChildren()}>
@@ -189,7 +207,11 @@ const TopbarMenuDropdownItem: Component<TopbarMenuDropdownItemProps> = (props) =
   };
 
   return (
-    <ListItem selected={isSelected()} readonly={props.menu.href === undefined && hasChildren()} onClick={handleClick}>
+    <ListItem
+      selected={isSelected()}
+      readonly={props.menu.href === undefined && hasChildren()}
+      onClick={handleClick}
+    >
       <Show when={props.menu.icon}>
         <Icon icon={props.menu.icon!} />
       </Show>

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

@@ -79,7 +79,11 @@ export const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
       >
         {local.children}
         <Show when={hasMenus()}>
-          <Icon icon={IconChevronDown} size="1em" class={clsx("transition-transform", open() && "rotate-180")} />
+          <Icon
+            icon={IconChevronDown}
+            size="1em"
+            class={clsx("transition-transform", open() && "rotate-180")}
+          />
         </Show>
       </Button>
       <Show when={hasMenus()}>

package/src/helpers/createAppStructure.ts

@@ -1,4 +1,4 @@
-import { type Accessor, createMemo } from "solid-js";
+import { type Accessor, createMemo, createRoot } from "solid-js";
 import type { Component } from "solid-js";
 import type { IconProps } from "@tabler/icons-solidjs";
 import type { SidebarMenuItem } from "../components/layout/sidebar/SidebarMenu";
@@ -26,7 +26,9 @@ export interface AppStructureLeafItem<TModule> {
   isNotMenu?: boolean;
 }
 
-export type AppStructureItem<TModule> = AppStructureGroupItem<TModule> | AppStructureLeafItem<TModule>;
+export type AppStructureItem<TModule> =
+  | AppStructureGroupItem<TModule>
+  | AppStructureLeafItem<TModule>;
 
 export interface AppStructureSubPerm<TModule> {
   code: string;
@@ -59,7 +61,9 @@ export interface AppStructure<TModule> {
 
 // ── 내부 헬퍼 ──
 
-function isGroupItem<TModule>(item: AppStructureItem<TModule>): item is AppStructureGroupItem<TModule> {
+function isGroupItem<TModule>(
+  item: AppStructureItem<TModule>,
+): item is AppStructureGroupItem<TModule> {
   return "children" in item;
 }
 
@@ -81,7 +85,11 @@ function checkModules<TModule>(
   return true;
 }
 
-function collectRoutes<TModule>(items: AppStructureItem<TModule>[], parentCodes: string[], routes: AppRoute[]): void {
+function collectRoutes<TModule>(
+  items: AppStructureItem<TModule>[],
+  parentCodes: string[],
+  routes: AppRoute[],
+): void {
   for (const item of items) {
     const codes = [...parentCodes, item.code];
 
@@ -179,23 +187,29 @@ export function createAppStructure<TModule>(opts: {
 
   const routes = extractRoutes(opts.items);
 
-  const usableMenus = createMemo(() => {
-    const menus: SidebarMenuItem[] = [];
-    for (const top of opts.items) {
-      if (isGroupItem(top)) {
-        menus.push(...buildMenus(top.children, "/" + top.code, opts.usableModules?.(), permRecord()));
+  const memos = createRoot(() => {
+    const usableMenus = createMemo(() => {
+      const menus: SidebarMenuItem[] = [];
+      for (const top of opts.items) {
+        if (isGroupItem(top)) {
+          menus.push(
+            ...buildMenus(top.children, "/" + top.code, opts.usableModules?.(), permRecord()),
+          );
+        }
       }
-    }
-    return menus;
-  });
+      return menus;
+    });
 
-  const usableFlatMenus = createMemo(() => flattenMenus(usableMenus()));
+    const usableFlatMenus = createMemo(() => flattenMenus(usableMenus()));
+
+    return { usableMenus, usableFlatMenus };
+  });
 
   return {
     items: opts.items,
     routes,
-    usableMenus,
-    usableFlatMenus,
+    usableMenus: memos.usableMenus,
+    usableFlatMenus: memos.usableFlatMenus,
     permRecord,
     getTitleChainByHref(href: string): string[] {
       const codes = href.split("/").filter(Boolean);

package/src/helpers/mergeStyles.ts

@@ -24,7 +24,9 @@ import { type JSX } from "solid-js";
  * // => { color: "red", background: "blue" }
  * ```
  */
-export function mergeStyles(...styles: (JSX.CSSProperties | string | undefined)[]): JSX.CSSProperties {
+export function mergeStyles(
+  ...styles: (JSX.CSSProperties | string | undefined)[]
+): JSX.CSSProperties {
   const result: Record<string, string> = {};
 
   for (const style of styles) {
@@ -41,7 +43,9 @@ export function mergeStyles(...styles: (JSX.CSSProperties | string | undefined)[
         const value = declaration.slice(colonIndex + 1).trim();
         if (property && value) {
           // kebab-case를 camelCase로 변환
-          const camelProperty = property.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase());
+          const camelProperty = property.replace(/-([a-z])/g, (_, letter: string) =>
+            letter.toUpperCase(),
+          );
           result[camelProperty] = value;
         }
       }

package/src/helpers/splitSlots.ts

@@ -26,7 +26,10 @@ export function splitSlots<K extends string>(
 ): [Accessor<Record<K, HTMLElement[]>>, Accessor<JSX.Element[]>] {
   const memo = createMemo(() => {
     const arr = resolved.toArray();
-    const result = Object.fromEntries(keys.map((k) => [k, []])) as unknown as Record<K, HTMLElement[]>;
+    const result = Object.fromEntries(keys.map((k) => [k, []])) as unknown as Record<
+      K,
+      HTMLElement[]
+    >;
     const content: JSX.Element[] = [];
 
     for (const c of arr) {

package/src/hooks/createControllableSignal.ts

@@ -50,7 +50,8 @@ export function createControllableSignal<TValue>(options: {
   const isControlled = () => options.onChange() !== undefined;
   const value = () => (isControlled() ? options.value() : internalValue());
   const setValue = (newValue: TValue | ((prev: TValue) => TValue)) => {
-    const resolved = typeof newValue === "function" ? (newValue as (prev: TValue) => TValue)(value()) : newValue;
+    const resolved =
+      typeof newValue === "function" ? (newValue as (prev: TValue) => TValue)(value()) : newValue;
 
     if (isControlled()) {
       options.onChange()?.(resolved);

package/src/hooks/createItemTemplate.tsx

@@ -0,0 +1,42 @@
+import type { JSX } from "solid-js";
+
+/**
+ * WeakMap 기반 템플릿 슬롯 패턴을 생성합니다. SolidJS children을 통해 렌더 함수를 전달할 때 사용합니다.
+ *
+ * Select와 Combobox의 ItemTemplate 서브 컴포넌트 패턴에서 사용됩니다.
+ * TemplateSlot은 WeakMap에 렌더 함수를 ref로 저장하는 숨겨진 span을 렌더링합니다.
+ * getTemplate은 resolved 슬롯 엘리먼트에서 렌더 함수를 가져옵니다.
+ *
+ * @param dataAttr - 숨겨진 span에 사용할 HTML 속성 이름 (예: "data-select-item-template")
+ */
+export function createItemTemplate<TArgs extends unknown[]>(
+  dataAttr: string,
+): {
+  TemplateSlot: (props: { children(...args: TArgs): JSX.Element }) => JSX.Element;
+  getTemplate: (slotElements: Element[]) => ((...args: TArgs) => JSX.Element) | undefined;
+} {
+  const templateFnMap = new WeakMap<HTMLElement, (...args: TArgs) => JSX.Element>();
+
+  function TemplateSlot(props: { children(...args: TArgs): JSX.Element }): JSX.Element {
+    return (
+      <span
+        ref={(el) => {
+          templateFnMap.set(el, props.children);
+        }}
+        {...{ [dataAttr]: true }}
+        style={{ display: "none" }}
+      />
+    );
+  }
+
+  function getTemplate(slotElements: Element[]): ((...args: TArgs) => JSX.Element) | undefined {
+    if (slotElements.length === 0) return undefined;
+    const el = slotElements[0];
+    if (el instanceof HTMLElement) {
+      return templateFnMap.get(el);
+    }
+    return undefined;
+  }
+
+  return { TemplateSlot, getTemplate };
+}

package/src/hooks/createPointerDrag.ts

@@ -0,0 +1,28 @@
+/**
+ * Sets up pointer capture and manages pointermove/pointerup lifecycle on a target element.
+ *
+ * @param target - Element to capture pointer on
+ * @param pointerId - Pointer ID from the initiating PointerEvent
+ * @param options.onMove - Called on each pointermove
+ * @param options.onEnd - Called on pointerup (after listener cleanup)
+ */
+export function createPointerDrag(
+  target: HTMLElement,
+  pointerId: number,
+  options: {
+    onMove: (e: PointerEvent) => void;
+    onEnd: (e: PointerEvent) => void;
+  },
+): void {
+  target.setPointerCapture(pointerId);
+
+  const onPointerMove = (e: PointerEvent) => options.onMove(e);
+  const onPointerUp = (e: PointerEvent) => {
+    target.removeEventListener("pointermove", onPointerMove);
+    target.removeEventListener("pointerup", onPointerUp);
+    options.onEnd(e);
+  };
+
+  target.addEventListener("pointermove", onPointerMove);
+  target.addEventListener("pointerup", onPointerUp);
+}

package/src/hooks/createSelectionGroup.tsx

@@ -0,0 +1,235 @@
+import {
+  type JSX,
+  type ParentComponent,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+} from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "./createControllableSignal";
+import { Invalid } from "../components/form-control/Invalid";
+import type { CheckboxSize } from "../components/form-control/checkbox/Checkbox.styles";
+
+interface SelectionItemComponentProps {
+  value: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  inline?: boolean;
+  inset?: boolean;
+  children?: JSX.Element;
+}
+
+interface SelectionGroupContextBase {
+  disabled: () => boolean;
+  size: () => CheckboxSize | undefined;
+  inline: () => boolean;
+  inset: () => boolean;
+}
+
+interface MultiSelectContext extends SelectionGroupContextBase {
+  value: () => unknown[];
+  toggle: (item: unknown) => void;
+}
+
+interface SingleSelectContext extends SelectionGroupContextBase {
+  value: () => unknown | undefined;
+  select: (item: unknown) => void;
+}
+
+interface MultiGroupConfig {
+  mode: "multiple";
+  contextName: string;
+  ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
+  emptyErrorMsg: string;
+}
+
+interface SingleGroupConfig {
+  mode: "single";
+  contextName: string;
+  ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
+  emptyErrorMsg: string;
+}
+
+interface SelectionGroupItemProps<TValue> {
+  value: TValue;
+  disabled?: boolean;
+  children?: JSX.Element;
+}
+
+interface MultiGroupProps<TValue> {
+  value?: TValue[];
+  onValueChange?: (value: TValue[]) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  inline?: boolean;
+  inset?: boolean;
+  required?: boolean;
+  validate?: (value: TValue[]) => string | undefined;
+  touchMode?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+interface SingleGroupProps<TValue> {
+  value?: TValue;
+  onValueChange?: (value: TValue) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  inline?: boolean;
+  inset?: boolean;
+  required?: boolean;
+  validate?: (value: TValue | undefined) => string | undefined;
+  touchMode?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+export function createSelectionGroup(config: MultiGroupConfig): {
+  Group: {
+    <TValue = unknown>(props: MultiGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+};
+export function createSelectionGroup(config: SingleGroupConfig): {
+  Group: {
+    <TValue = unknown>(props: SingleGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+};
+export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfig): {
+  Group: {
+    <TValue = unknown>(props: MultiGroupProps<TValue> | SingleGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+} {
+  const Context = createContext<MultiSelectContext | SingleSelectContext>();
+  const ItemComponent = config.ItemComponent;
+
+  function ItemInner<TValue>(props: SelectionGroupItemProps<TValue>) {
+    const ctx = useContext(Context);
+    if (!ctx)
+      throw new Error(
+        `${config.contextName}.Item은 ${config.contextName} 내부에서만 사용할 수 있습니다`,
+      );
+
+    const isSelected = (): boolean => {
+      if (config.mode === "multiple") {
+        return (ctx as MultiSelectContext).value().includes(props.value);
+      }
+      return (ctx as SingleSelectContext).value() === props.value;
+    };
+
+    const handleChange = () => {
+      if (config.mode === "multiple") {
+        (ctx as MultiSelectContext).toggle(props.value);
+      } else {
+        (ctx as SingleSelectContext).select(props.value);
+      }
+    };
+
+    return (
+      <ItemComponent
+        value={isSelected()}
+        onValueChange={handleChange}
+        disabled={props.disabled ?? ctx.disabled()}
+        size={ctx.size()}
+        inline={ctx.inline()}
+        inset={ctx.inset()}
+      >
+        {props.children}
+      </ItemComponent>
+    );
+  }
+
+  const GroupInner: ParentComponent<MultiGroupProps<unknown>> = (props) => {
+    const [local, rest] = splitProps(props, [
+      "value",
+      "onValueChange",
+      "disabled",
+      "size",
+      "inline",
+      "inset",
+      "required",
+      "validate",
+      "touchMode",
+      "class",
+      "style",
+      "children",
+    ]);
+
+    let contextValue: MultiSelectContext | SingleSelectContext;
+
+    if (config.mode === "multiple") {
+      const [value, setValue] = createControllableSignal<unknown[]>({
+        value: () => local.value ?? [],
+        onChange: () => local.onValueChange as ((v: unknown[]) => void) | undefined,
+      });
+      const toggle = (item: unknown) => {
+        setValue((prev) => {
+          if (prev.includes(item)) return prev.filter((v) => v !== item);
+          return [...prev, item];
+        });
+      };
+      contextValue = {
+        value,
+        toggle,
+        disabled: () => local.disabled ?? false,
+        size: () => local.size,
+        inline: () => local.inline ?? false,
+        inset: () => local.inset ?? false,
+      };
+    } else {
+      const [value, setValue] = createControllableSignal<unknown>({
+        value: () => local.value as unknown | undefined,
+        onChange: () => local.onValueChange as ((v: unknown) => void) | undefined,
+      });
+      const select = (item: unknown) => {
+        setValue(item);
+      };
+      contextValue = {
+        value,
+        select,
+        disabled: () => local.disabled ?? false,
+        size: () => local.size,
+        inline: () => local.inline ?? false,
+        inset: () => local.inset ?? false,
+      };
+    }
+
+    const errorMsg = createMemo(() => {
+      if (config.mode === "multiple") {
+        const v = local.value ?? [];
+        if (local.required && v.length === 0) return config.emptyErrorMsg;
+        return (local.validate as ((v: unknown[]) => string | undefined) | undefined)?.(v);
+      } else {
+        const v = local.value as unknown | undefined;
+        if (local.required && (v === undefined || v === null)) return config.emptyErrorMsg;
+        return (local.validate as ((v: unknown | undefined) => string | undefined) | undefined)?.(
+          v,
+        );
+      }
+    });
+
+    return (
+      <Invalid message={errorMsg()} variant="dot" touchMode={local.touchMode}>
+        <Context.Provider value={contextValue}>
+          <div {...rest} class={twMerge("inline-flex", local.class)} style={local.style}>
+            {local.children}
+          </div>
+        </Context.Provider>
+      </Invalid>
+    );
+  };
+
+  const Group = GroupInner as unknown as {
+    <TValue = unknown>(props: MultiGroupProps<TValue> | SingleGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+  Group.Item = ItemInner;
+
+  return { Group };
+}

package/src/hooks/useClipboardValueCopy.ts

@@ -46,8 +46,11 @@ function extractTextFromRange(range: Range): string | null {
   if (!root) return null;
 
   // 선택 범위에 폼 컨트롤이 없으면 브라우저 기본 동작 사용
-  const formSelector = 'input:not([type=hidden]), textarea, select, [role="checkbox"], [role="radio"]';
-  const hasFormElements = [...root.querySelectorAll(formSelector)].some((el) => range.intersectsNode(el));
+  const formSelector =
+    'input:not([type=hidden]), textarea, select, [role="checkbox"], [role="radio"]';
+  const hasFormElements = [...root.querySelectorAll(formSelector)].some((el) =>
+    range.intersectsNode(el),
+  );
   if (!hasFormElements) return null;
 
   const parts: string[] = [];

package/src/hooks/useLocalStorage.ts

@@ -1,6 +1,10 @@
-import { type Accessor, type Setter, createSignal } from "solid-js";
+import { type Accessor, createSignal } from "solid-js";
 import { useConfig } from "../providers/ConfigContext";
 
+type StorageSetter<TValue> = (
+  value: TValue | undefined | ((prev: TValue | undefined) => TValue | undefined),
+) => TValue | undefined;
+
 /**
  * localStorage 기반 저장소 훅.
  * syncStorage 설정과 무관하게 항상 localStorage를 사용한다.
@@ -11,7 +15,7 @@ import { useConfig } from "../providers/ConfigContext";
  * @template T - 저장할 값의 타입
  * @param key - localStorage 키
  * @param initialValue - 초기값 (옵셔널)
- * @returns [Accessor<T | undefined>, Setter<T | undefined>] 튜플
+ * @returns [Accessor<T | undefined>, StorageSetter<T>] 튜플
  *
  * @example
  * ```tsx
@@ -30,7 +34,7 @@ import { useConfig } from "../providers/ConfigContext";
 export function useLocalStorage<TValue>(
   key: string,
   initialValue?: TValue,
-): [Accessor<TValue | undefined>, Setter<TValue | undefined>] {
+): [Accessor<TValue | undefined>, StorageSetter<TValue>] {
   const config = useConfig();
   const prefixedKey = `${config.clientName}.${key}`;
 
@@ -47,7 +51,9 @@ export function useLocalStorage<TValue>(
 
   const [value, setValue] = createSignal<TValue | undefined>(storedValue);
 
-  const setAndStore = (newValue: TValue | undefined | ((prev: TValue | undefined) => TValue | undefined)) => {
+  const setAndStore = (
+    newValue: TValue | undefined | ((prev: TValue | undefined) => TValue | undefined),
+  ) => {
     let resolved: TValue | undefined;
 
     if (typeof newValue === "function") {
@@ -67,5 +73,5 @@ export function useLocalStorage<TValue>(
     return resolved;
   };
 
-  return [value, setAndStore as Setter<TValue | undefined>];
+  return [value, setAndStore];
 }

package/src/hooks/usePrint.ts

@@ -2,8 +2,11 @@ import type { JSX } from "solid-js";
 import { render } from "solid-js/web";
 import { jsPDF } from "jspdf";
 import * as htmlToImage from "html-to-image";
-import { useLoading } from "../components/feedback/loading/LoadingContext";
-import { PrintInstanceContext, type PrintInstance } from "../components/feedback/print/PrintInstanceContext";
+import { useBusy } from "../components/feedback/busy/BusyContext";
+import {
+  PrintInstanceContext,
+  type PrintInstance,
+} from "../components/feedback/print/PrintInstanceContext";
 
 // --- Types ---
 
@@ -74,7 +77,9 @@ function waitForImages(container: HTMLElement): Promise<void> {
   ).then(() => undefined);
 }
 
-async function renderAndWait(factory: () => JSX.Element): Promise<{ container: HTMLElement; dispose: () => void }> {
+async function renderAndWait(
+  factory: () => JSX.Element,
+): Promise<{ container: HTMLElement; dispose: () => void }> {
   const container = document.createElement("div");
   container.style.position = "fixed";
   container.style.left = "-9999px";
@@ -129,7 +134,7 @@ async function renderAndWait(factory: () => JSX.Element): Promise<{ container: H
 // --- Hook ---
 
 export function usePrint(): UsePrintReturn {
-  const busy = useLoading();
+  const busy = useBusy();
 
   const toPrinter = async (factory: () => JSX.Element, options?: PrintOptions): Promise<void> => {
     busy.show();

package/src/hooks/{createPwaUpdate.ts → usePwaUpdate.ts}

@@ -15,7 +15,7 @@ const UPDATE_INTERVAL = 5 * 60 * 1000; // 5 minutes
  *
  * Must be called inside NotificationProvider.
  */
-export function createPwaUpdate(): void {
+export function usePwaUpdate(): void {
   if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return;
 
   const notification = useNotification();