@wipco/sdui 0.29.0 → 0.30.0

package/dist/{chunk-6S5CFNFM.js → chunk-CVCP52OD.js}

@@ -1,5 +1,5 @@
 import { includesLooseSearch } from './chunk-BD75U73S.js';
-import { useSduiAdapter, hostFetchOf } from './chunk-DVOPZFQS.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-DKPNFEVU.js';
 import { Icon, Button, Input, Spinner } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';

package/dist/{chunk-DVOPZFQS.js → chunk-DKPNFEVU.js}

@@ -96,5 +96,10 @@ function hostFetchOf(adapter) {
   if (!hostFetch || hostFetch === defaultAdapter.fetch) return null;
   return hostFetch;
 }
+function hostRawFetchOf(adapter) {
+  const hostRawFetch = adapter?.rawFetch;
+  if (!hostRawFetch || hostRawFetch === defaultAdapter.rawFetch) return null;
+  return hostRawFetch;
+}
 
-export { DEV, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };
+export { DEV, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, hostRawFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };

package/dist/chunk-DQVDS2VP.js

@@ -0,0 +1,400 @@
+import { ImageLightbox } from './chunk-XPBZMECW.js';
+import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-DKPNFEVU.js';
+import { Spinner, Icon, IconButton } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var THUMB_SIZE = 72;
+function matchesAccept(file, accept) {
+  const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  if (rules.length === 0) return true;
+  const type = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return rules.some((rule) => {
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+    return type === rule;
+  });
+}
+function localId() {
+  return `local-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function unwrapUploaded(payload) {
+  if (typeof payload !== "object" || payload === null || Array.isArray(payload)) return null;
+  const body = payload;
+  if ("id" in body || "url" in body) return body;
+  const objectKeys = Object.keys(body).filter(
+    (key) => typeof body[key] === "object" && body[key] !== null && !Array.isArray(body[key])
+  );
+  if (objectKeys.length !== 1) return body;
+  return body[objectKeys[0]];
+}
+function FileDropzoneImpl({
+  upload,
+  fileField = "file",
+  localFallbackOn503 = false,
+  endpoint,
+  value,
+  onChange,
+  onBusyChange,
+  maxCount,
+  accept = "image/*",
+  disabled = false,
+  hint,
+  deleteEndpoint,
+  onRemove
+}) {
+  const sandbox = useSduiSandbox();
+  const adapter = useSduiAdapter();
+  const hostRaw = hostRawFetchOf(adapter);
+  const rawFetch = hostRaw ?? defaultAdapter.rawFetch;
+  const canUpload = hostRaw !== null || upload !== void 0;
+  const resolveAsset = useSduiAssetResolver();
+  const [internalItems, setInternalItems] = useState(value ?? []);
+  const items = value ?? internalItems;
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const [busy, setBusy] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const [warnings, setWarnings] = useState([]);
+  const [localMode, setLocalMode] = useState(!endpoint);
+  const [dragOver, setDragOver] = useState(false);
+  const [hovering, setHovering] = useState(false);
+  const [hoverItemId, setHoverItemId] = useState(null);
+  const inputRef = useRef(null);
+  const dragDepthRef = useRef(0);
+  const createdUrlsRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const created = createdUrlsRef.current;
+    return () => created.forEach((url) => URL.revokeObjectURL(url));
+  }, []);
+  const atCapacity = maxCount !== void 0 && items.length >= maxCount;
+  const canAdd = !disabled && !busy && !atCapacity;
+  const commit = useCallback(
+    (next) => {
+      itemsRef.current = next;
+      setInternalItems(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const runQueue = useCallback(
+    async (queue, baseWarnings) => {
+      setBusy(true);
+      onBusyChange?.(true);
+      const failures = [];
+      let local = localMode || !endpoint || sandbox || !canUpload;
+      try {
+        for (let index = 0; index < queue.length; index += 1) {
+          const file = queue[index];
+          setProgress({ current: index + 1, total: queue.length });
+          if (!local && upload) {
+            try {
+              const item = await upload(file);
+              if (item && typeof item.id === "string" && typeof item.url === "string") {
+                commit([...itemsRef.current, { name: file.name, ...item }]);
+              } else {
+                failures.push(`${file.name} (\uC5C5\uB85C\uB354\uAC00 \uD56D\uBAA9\uC744 \uC8FC\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4)`);
+              }
+            } catch (error) {
+              failures.push(`${file.name} (${error instanceof Error ? error.message : "\uC5C5\uB85C\uB4DC \uC2E4\uD328"})`);
+            }
+            continue;
+          }
+          if (!local && endpoint) {
+            try {
+              const formData = new FormData();
+              formData.append(fileField, file, file.name);
+              const res = await rawFetch(endpoint, { method: "POST", body: formData });
+              if (res.status === 503 && localFallbackOn503) {
+                local = true;
+                setLocalMode(true);
+              } else if (!res.ok) {
+                failures.push(`${file.name} (${res.status})`);
+                continue;
+              } else {
+                const json = await res.json().catch(() => null);
+                const body = unwrapUploaded(json);
+                const id = body?.id;
+                const url2 = body?.url;
+                if ((typeof id === "string" || typeof id === "number") && typeof url2 === "string") {
+                  commit([...itemsRef.current, { id: String(id), url: url2, name: file.name }]);
+                } else {
+                  failures.push(`${file.name} (\uC751\uB2F5 \uD615\uC2DD \uC624\uB958)`);
+                }
+                continue;
+              }
+            } catch {
+              failures.push(`${file.name} (\uB124\uD2B8\uC6CC\uD06C \uC624\uB958)`);
+              continue;
+            }
+          }
+          const url = URL.createObjectURL(file);
+          createdUrlsRef.current.add(url);
+          commit([...itemsRef.current, { id: localId(), url, name: file.name }]);
+        }
+      } finally {
+        setProgress(null);
+        setBusy(false);
+        onBusyChange?.(false);
+      }
+      if (failures.length > 0) {
+        setWarnings([...baseWarnings, `\uC5C5\uB85C\uB4DC \uC2E4\uD328: ${failures.join(", ")}`]);
+      }
+    },
+    [commit, endpoint, localMode, onBusyChange, sandbox, upload, rawFetch, canUpload, fileField, localFallbackOn503]
+  );
+  const handleFiles = useCallback(
+    (fileList) => {
+      const files = Array.from(fileList);
+      if (files.length === 0) return;
+      const nextWarnings = [];
+      const matched = files.filter((file) => matchesAccept(file, accept));
+      const rejectedCount = files.length - matched.length;
+      if (rejectedCount > 0) {
+        nextWarnings.push(
+          `\uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD615\uC2DD\uC774\uB77C ${rejectedCount}\uAC1C \uD30C\uC77C\uC744 \uC81C\uC678\uD588\uC2B5\uB2C8\uB2E4 (\uD5C8\uC6A9: ${accept})`
+        );
+      }
+      let queue = matched;
+      if (maxCount !== void 0) {
+        const remaining = Math.max(0, maxCount - itemsRef.current.length);
+        if (queue.length > remaining) {
+          nextWarnings.push(
+            `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD560 \uC218 \uC788\uC5B4 ${queue.length - remaining}\uAC1C\uB97C \uC81C\uC678\uD588\uC2B5\uB2C8\uB2E4`
+          );
+          queue = queue.slice(0, remaining);
+        }
+      }
+      setWarnings(nextWarnings);
+      if (queue.length === 0) return;
+      void runQueue(queue, nextWarnings);
+    },
+    [accept, maxCount, runQueue]
+  );
+  const removeItem = useCallback(
+    (item) => {
+      const forget = () => {
+        commit(itemsRef.current.filter((current) => current.id !== item.id));
+        if (createdUrlsRef.current.has(item.url)) {
+          URL.revokeObjectURL(item.url);
+          createdUrlsRef.current.delete(item.url);
+        }
+      };
+      if (deleteEndpoint && !item.id.startsWith("local-")) {
+        void (async () => {
+          try {
+            const res = await rawFetch(`${deleteEndpoint}/${item.id}`, { method: "DELETE" });
+            if (!res.ok && res.status !== 404) {
+              setWarnings([`${item.name ?? "\uCCA8\uBD80"} \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${res.status})`]);
+              return;
+            }
+          } catch {
+            setWarnings([`${item.name ?? "\uCCA8\uBD80"} \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 \u2014 \uC5F0\uACB0\uC744 \uD655\uC778\uD558\uC138\uC694`]);
+            return;
+          }
+          forget();
+          onRemove?.();
+        })();
+        return;
+      }
+      forget();
+    },
+    [commit, deleteEndpoint, onRemove]
+  );
+  const openPicker = () => {
+    if (canAdd) inputRef.current?.click();
+  };
+  const showLocalCaption = localMode || items.some((item) => item.id.startsWith("local-"));
+  const dropTinted = canAdd && (dragOver || hovering);
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple: maxCount !== 1,
+        hidden: true,
+        disabled: !canAdd,
+        onChange: (event) => {
+          const selected = event.currentTarget.files;
+          if (selected && selected.length > 0) handleFiles(selected);
+          event.currentTarget.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: canAdd ? 0 : -1,
+        "aria-disabled": !canAdd,
+        "aria-label": "\uC774\uBBF8\uC9C0 \uCCA8\uBD80",
+        onClick: openPicker,
+        onKeyDown: (event) => {
+          if (canAdd && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            openPicker();
+          }
+        },
+        onMouseEnter: () => setHovering(true),
+        onMouseLeave: () => setHovering(false),
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (!canAdd) return;
+          dragDepthRef.current += 1;
+          setDragOver(true);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragLeave: () => {
+          dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+          if (dragDepthRef.current === 0) setDragOver(false);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          dragDepthRef.current = 0;
+          setDragOver(false);
+          if (!canAdd) return;
+          handleFiles(event.dataTransfer.files);
+        },
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "var(--wp-space-2)",
+          padding: "var(--wp-space-6)",
+          border: `var(--wp-border-w) dashed ${dragOver ? "var(--wp-border-brand)" : "var(--wp-border-subtle)"}`,
+          borderRadius: "var(--wp-radius-md)",
+          background: dropTinted ? "var(--wp-surface-brand-tint)" : "var(--wp-surface-card)",
+          cursor: canAdd ? "pointer" : "not-allowed",
+          opacity: disabled ? 0.55 : 1,
+          transition: "var(--wp-transition-surface)",
+          textAlign: "center"
+        },
+        title: disabled ? "\uBE44\uD65C\uC131\uD654\uB41C \uC0C1\uD0DC\uC785\uB2C8\uB2E4" : atCapacity ? `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4` : void 0,
+        children: busy && progress ? /* @__PURE__ */ jsx(Spinner, { label: `(${progress.current}/${progress.total}) \uC5C5\uB85C\uB4DC \uC911` }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "cloud-upload",
+              size: 24,
+              style: { color: dropTinted ? "var(--wp-text-brand)" : "var(--wp-text-muted)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { color: "var(--wp-text-default)" }, children: atCapacity ? `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD588\uC2B5\uB2C8\uB2E4` : "\uD074\uB9AD\uD558\uAC70\uB098 \uC774\uBBF8\uC9C0\uB97C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
+          hint ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: hint }) : null
+        ] })
+      }
+    ),
+    warnings.map((warning) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "wp-caption",
+        style: {
+          color: "var(--wp-text-warning)",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "var(--wp-space-1)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "triangle-alert", size: 14 }),
+          warning
+        ]
+      },
+      warning
+    )),
+    showLocalCaption ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "wp-caption",
+        style: { display: "inline-flex", alignItems: "center", gap: "var(--wp-space-1)" },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 14 }),
+          "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uC784\uC2DC \uBBF8\uB9AC\uBCF4\uAE30"
+        ]
+      }
+    ) : null,
+    items.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--wp-space-2)" }, children: items.map((item) => {
+      const thumbSrc = resolveAsset(item.url, {
+        component: "FileDropzone",
+        prop: "src",
+        kind: "attribute"
+      });
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: { position: "relative", width: THUMB_SIZE, height: THUMB_SIZE },
+          onMouseEnter: () => setHoverItemId(item.id),
+          onMouseLeave: () => setHoverItemId((current) => current === item.id ? null : current),
+          children: [
+            thumbSrc === null ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-label": item.name ?? "\uCCA8\uBD80 \uBBF8\uB9AC\uBCF4\uAE30 \uC5C6\uC74C",
+                role: "img",
+                style: {
+                  display: "block",
+                  width: THUMB_SIZE,
+                  height: THUMB_SIZE,
+                  borderRadius: "var(--wp-radius-md)",
+                  border: "var(--wp-border-w) solid var(--wp-border-subtle)",
+                  background: "var(--wp-surface-sunken)"
+                }
+              }
+            ) : /* @__PURE__ */ jsx(
+              ImageLightbox,
+              {
+                src: thumbSrc,
+                alt: item.name,
+                thumbStyle: {
+                  width: THUMB_SIZE,
+                  height: THUMB_SIZE,
+                  objectFit: "cover",
+                  display: "block",
+                  borderRadius: "var(--wp-radius-md)",
+                  border: "var(--wp-border-w) solid var(--wp-border-subtle)"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: "var(--wp-space-1)",
+                  right: "var(--wp-space-1)",
+                  background: "var(--wp-surface-card)",
+                  borderRadius: "var(--wp-radius-sm)",
+                  boxShadow: "var(--wp-shadow-sm)",
+                  opacity: hoverItemId === item.id ? 1 : 0,
+                  transition: "opacity var(--wp-duration-fast) var(--wp-ease-out)"
+                },
+                children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: "trash-2",
+                    label: `\uC0AD\uC81C${item.name ? ` \u2014 ${item.name}` : ""}`,
+                    variant: "danger",
+                    size: "xs",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      removeItem(item);
+                    },
+                    onFocus: () => setHoverItemId(item.id)
+                  }
+                )
+              }
+            )
+          ]
+        },
+        item.id
+      );
+    }) }) : null
+  ] });
+}
+var FileDropzone = boxed(FileDropzoneImpl, "FileDropzone");
+
+export { FileDropzone, unwrapUploaded };

package/dist/{chunk-WLQ7PLHB.js → chunk-N24VF6KI.js}

@@ -1,4 +1,4 @@
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
 import { Icon, Badge, Checkbox, Select, Button } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useRef, useEffect, useMemo, useState } from 'react';

package/dist/{chunk-KBLFOC37.js → chunk-NGZI4V3O.js}

@@ -1,5 +1,5 @@
 import { ImageLightbox } from './chunk-XPBZMECW.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
 import { Badge, Button, IconButton, Icon } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';

package/dist/{chunk-ZDRERW4G.js → chunk-OR27SRKL.js}

@@ -1,6 +1,6 @@
 import { TagMultiSelect } from './chunk-QDEZXA34.js';
-import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-SAPJVLZM.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-S4LOH2TU.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
 import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useState, useEffect } from 'react';

package/dist/{chunk-SAPJVLZM.js → chunk-S4LOH2TU.js}

@@ -1,5 +1,5 @@
 import { includesLooseSearch } from './chunk-BD75U73S.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
 import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useState, useId, useRef, useEffect } from 'react';

package/dist/{chunk-DIVN4TBW.js → chunk-U6H7YN4I.js}

@@ -1,5 +1,5 @@
 import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-QU7YVMFA.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
 import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useState, useEffect, useCallback, useMemo } from 'react';

package/dist/{chunk-XSCFMCLH.js → chunk-WXZDYDXG.js}

@@ -1,4 +1,4 @@
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
 import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useMemo, useState, useRef, useCallback, useEffect } from 'react';

package/dist/index.js

@@ -9,8 +9,8 @@ export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSea
 import { HoistedStyle, DateRangePicker, DatePicker } from './chunk-EFMKWPZ3.js';
 export { DatePicker, DateRangePicker } from './chunk-EFMKWPZ3.js';
 export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XQPTSEJC.js';
-import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-DVOPZFQS.js';
-export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-DVOPZFQS.js';
+import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-DKPNFEVU.js';
+export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-DKPNFEVU.js';
 import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce } from './chunk-WIDDHR7L.js';
 export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-WIDDHR7L.js';
 import { boxed, mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-SAN4IX6N.js';

package/dist/meta.d.ts

@@ -430,6 +430,7 @@ declare const ApprovalOverridesEditorMeta: SduiComponentMeta;
 declare const OrgChartBoardMeta: SduiComponentMeta;
 declare const PermissionMatrixEditorMeta: SduiComponentMeta;
 declare const RoleMemberPickerMeta: SduiComponentMeta;
+declare const FileDropzoneMeta: SduiComponentMeta;
 declare const AutocompleteFieldMeta: SduiComponentMeta;
 declare const InlineEditMeta: SduiComponentMeta;
 declare const JsonFieldMeta: SduiComponentMeta;
@@ -455,7 +456,7 @@ declare const StripMeta: SduiComponentMeta;
 /**
  * 위젯 어휘의 메타데이터.
  *
- * 키 타입이 `SduiWidgetComponentName | 'AutocompleteField'`인 이유:
+ * 키 타입이 `SduiWidgetComponentName | 'AutocompleteField' | 'FileDropzone'`인 이유:
  * 앞의 20종은 `widgetComponents`와 키가 어긋나면 컴파일 에러가 나야 하고(core·rich와 같다),
  * `AutocompleteField`는 그 묶음에 **일부러 빠져 있는** 이름이라 union에 직접 적어야 한다.
  * 표시 계층만 라이브러리에 있고 조회는 앱 어댑터가 얹는 구조인데(widgets/index.ts 참고),
@@ -466,6 +467,7 @@ declare const widgetComponentMeta: {
     ApprovalLineEditor: SduiComponentMeta;
     ApprovalOverridesEditor: SduiComponentMeta;
     ApprovalStepper: SduiComponentMeta;
+    FileDropzone: SduiComponentMeta;
     PermissionMatrixEditor: SduiComponentMeta;
     RoleMemberPicker: SduiComponentMeta;
     OrgChartBoard: SduiComponentMeta;
@@ -602,4 +604,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/meta.js

@@ -3839,6 +3839,116 @@ var RoleMemberPickerMeta = {
   },
   resize: { kind: "none" }
 };
+var FileDropzoneMeta = {
+  name: "FileDropzone",
+  label: "\uD30C\uC77C \uCCA8\uBD80",
+  category: "input",
+  icon: "paperclip",
+  description: "\uB4DC\uB798\uADF8 \uC564 \uB4DC\uB86D \uB2E4\uC911 \uCCA8\uBD80. \uC5C5\uB85C\uB4DC \uACBD\uB85C\uAC00 \uC5C6\uAC70\uB098 \uBC31\uC5D4\uB4DC\uAC00 503\uC774\uBA74 object URL \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30\uB85C \uB5A8\uC5B4\uC9C4\uB2E4.",
+  props: [
+    {
+      name: "value",
+      kind: "array",
+      label: "\uCCA8\uBD80 \uBAA9\uB85D",
+      bindable: true,
+      description: "\uC8FC\uBA74 controlled. \uC2E4\uCE21 6/7\uC774 \uC804\uBD80 $state \uBC14\uC778\uB529\uC774\uACE0 default\uAC00 \uBE48 \uBC30\uC5F4\uC774\uB2E4.",
+      group: "data",
+      // 실측 6/7. 원소 리터럴은 스펙에 한 건도 없어(전부 빈 배열) 형태의 근거는 타입뿐이다.
+      item: [
+        { name: "id", kind: "string", label: "\uC2DD\uBCC4\uC790", required: true },
+        { name: "url", kind: "string", label: "URL", required: true },
+        { name: "name", kind: "string", label: "\uD30C\uC77C\uBA85" }
+      ]
+    },
+    {
+      name: "onChange",
+      kind: "action",
+      label: "\uCCA8\uBD80 \uBCC0\uACBD",
+      eventArg: "\uBCC0\uACBD\uB41C \uCCA8\uBD80 \uBAA9\uB85D \uBC30\uC5F4",
+      group: "behavior"
+    },
+    // 실측 6/7 — 전부 setState + fromEvent
+    {
+      name: "endpoint",
+      kind: "string",
+      label: "\uC5C5\uB85C\uB4DC \uACBD\uB85C",
+      description: '\uD30C\uC77C\uB9C8\uB2E4 FormData("file")\uB97C POST\uD558\uACE0 {id,url} \uC751\uB2F5\uC744 \uAE30\uB300\uD55C\uB2E4. \uC5C6\uC73C\uBA74 \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30 \uBAA8\uB4DC\uB85C\uB9CC \uB3D9\uC791\uD55C\uB2E4.',
+      group: "data"
+    },
+    // 실측 1/7 ("/asset/attachments")
+    { name: "maxCount", kind: "number", label: "\uCD5C\uB300 \uCCA8\uBD80 \uC218", group: "behavior" },
+    // 실측 7/7 (5×4, 8×3)
+    {
+      name: "accept",
+      kind: "string",
+      label: "\uD5C8\uC6A9 \uD615\uC2DD",
+      default: "image/*",
+      description: "input accept \uBB38\uBC95. \uB9DE\uC9C0 \uC54A\uB294 \uD30C\uC77C\uC740 \uC81C\uC678\uD558\uACE0 \uC778\uB77C\uC778 \uACBD\uACE0\uB85C \uC548\uB0B4\uD55C\uB2E4.",
+      group: "behavior"
+    },
+    // 실측 7/7 ("image/*,.pdf"×4, "image/*"×3)
+    { name: "hint", kind: "string", label: "\uBCF4\uC870 \uBB38\uAD6C", description: "\uB4DC\uB86D \uC601\uC5ED \uC544\uB798\uC5D0 \uBD99\uB294\uB2E4.", group: "content" },
+    // 실측 7/7
+    {
+      name: "deleteEndpoint",
+      kind: "string",
+      label: "\uC0AD\uC81C \uACBD\uB85C \uAE30\uC900",
+      description: "\uC8FC\uBA74 \uC378\uB124\uC77C \uC0AD\uC81C\uAC00 DELETE {\uC774 \uAC12}/{id}\uAE4C\uC9C0 \uBCF4\uB0B8\uB2E4(\uC608: /attachments). \uC774\uBBF8 \uC62C\uB77C\uAC04 \uC0AC\uC9C4\uC744 \uC774 \uCE78\uC5D0 \uCC44\uC6CC \uB458 \uB54C \uD544\uC218 \u2014 \uC5C6\uC73C\uBA74 \uC9C0\uC6B4 \uAC83\uCC98\uB7FC \uBCF4\uC774\uB294\uB370 \uC11C\uBC84\uC5D0\uB294 \uB0A8\uB294\uB2E4.",
+      group: "data"
+    },
+    {
+      name: "onRemove",
+      kind: "action",
+      label: "\uC0AD\uC81C \uD6C4",
+      description: "\uC11C\uBC84\uC5D0\uC11C \uC2E4\uC81C\uB85C \uC9C0\uC6B4 \uB4A4 \uD55C \uBC88. \uBCF4\uD1B5 \uBAA9\uB85D\xB7\uC0C1\uC138\uB97C \uB2E4\uC2DC \uC77D\uB294 invalidate\uB97C \uAC74\uB2E4.",
+      group: "behavior"
+    },
+    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
+    // 실측 0/7 — 구현에는 있다
+    {
+      name: "onBusyChange",
+      kind: "action",
+      label: "\uC5C5\uB85C\uB4DC \uC9C4\uD589 \uC54C\uB9BC",
+      eventArg: "\uC5C5\uB85C\uB4DC \uD050\uAC00 \uB3C4\uB294 \uB3D9\uC548 true, \uB05D\uB098\uBA74 false",
+      description: "\uCCA8\uBD80\uAC00 \uC62C\uB77C\uAC00\uB294 \uB3D9\uC548 \uC800\uC7A5 \uBC84\uD2BC\uC744 \uC7A0\uAE00 \uB54C \uC4F4\uB2E4.",
+      group: "behavior",
+      advanced: true
+    },
+    // 실측 0/7 — 구현에는 있다
+    {
+      name: "fileField",
+      kind: "string",
+      label: "multipart \uD544\uB4DC \uC774\uB984",
+      description: "\uAE30\uBCF8 'file'. \uC11C\uBC84\uAC00 \uB2E4\uB978 \uC774\uB984\uC744 \uBC1B\uC73C\uBA74 \uBC14\uAFBC\uB2E4.",
+      group: "data",
+      advanced: true
+    },
+    {
+      name: "localFallbackOn503",
+      kind: "boolean",
+      label: "503\uC774\uBA74 \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30",
+      description: '503\uC744 "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9"\uC73C\uB85C \uC77D\uC5B4 \uAC15\uB4F1\uD55C\uB2E4. \uAE30\uBCF8 \uAEBC\uC9D0 \u2014 \uC77C\uBC18 \uC11C\uBC84\uC758 \uACFC\uBD80\uD558 503\uC5D0\uC11C "\uC62C\uB9B0 \uAC83 \uAC19\uC740\uB370 \uC0C8\uB85C\uACE0\uCE68\uD558\uBA74 \uC5C6\uB294" \uD56D\uBAA9\uC744 \uB9CC\uB4E4\uBA74 \uC548 \uB418\uAE30 \uB54C\uBB38\uC774\uB2E4.',
+      group: "behavior",
+      advanced: true
+    }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  // 실측: 루트가 <div class="wp-col">
+  // 프리셋에 endpoint를 넣지 않는다 — 넣으면 캔버스에서 파일을 놓는 순간 실제 업로드가 나간다.
+  // 없으면 업로드 큐가 object URL로만 돌아 바깥으로 나가는 요청이 0건이다.
+  preset: {
+    component: "FileDropzone",
+    props: {
+      value: { $state: "form.attachments", default: [] },
+      onChange: { action: "setState", key: "form.attachments", fromEvent: true },
+      accept: "image/*",
+      maxCount: 5,
+      hint: "\uC774\uBBF8\uC9C0 \uD30C\uC77C\uC744 \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574 \uC120\uD0DD\uD558\uC138\uC694"
+    }
+  },
+  resize: { kind: "none" }
+};
 var AutocompleteFieldMeta = {
   name: "AutocompleteField",
   label: "\uC790\uB3D9\uC644\uC131",
@@ -5259,6 +5369,7 @@ var widgetComponentMeta = {
   ApprovalLineEditor: ApprovalLineEditorMeta,
   ApprovalOverridesEditor: ApprovalOverridesEditorMeta,
   ApprovalStepper: ApprovalStepperMeta,
+  FileDropzone: FileDropzoneMeta,
   PermissionMatrixEditor: PermissionMatrixEditorMeta,
   RoleMemberPicker: RoleMemberPickerMeta,
   OrgChartBoard: OrgChartBoardMeta,
@@ -5320,4 +5431,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, ApprovalLineEditorMeta, ApprovalOverridesEditorMeta, ApprovalStepperMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, FileDropzoneMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartBoardMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PermissionMatrixEditorMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RankBoardMeta, RecordSheetMeta, RemoteSearchResultsMeta, RoleMemberPickerMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/rich.js

@@ -3,7 +3,7 @@ export { TimePicker } from './chunk-WXOU7QTN.js';
 import { HoistedStyle } from './chunk-EFMKWPZ3.js';
 export { DatePicker, DateRangePicker } from './chunk-EFMKWPZ3.js';
 import './chunk-XQPTSEJC.js';
-import { useSduiAssetResolver } from './chunk-DVOPZFQS.js';
+import { useSduiAssetResolver } from './chunk-DKPNFEVU.js';
 import { Spinner, EmptyState } from './chunk-WIDDHR7L.js';
 import './chunk-SAN4IX6N.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';

package/dist/widgets/ApprovalLineEditor.js

@@ -1,7 +1,7 @@
-export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-SAPJVLZM.js';
+export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-S4LOH2TU.js';
 import '../chunk-BD75U73S.js';
 import '../chunk-EFMKWPZ3.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DVOPZFQS.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/ApprovalOverridesEditor.js

@@ -1,9 +1,9 @@
-export { ApprovalOverridesEditor } from '../chunk-ZDRERW4G.js';
+export { ApprovalOverridesEditor } from '../chunk-OR27SRKL.js';
 import '../chunk-QDEZXA34.js';
-import '../chunk-SAPJVLZM.js';
+import '../chunk-S4LOH2TU.js';
 import '../chunk-BD75U73S.js';
 import '../chunk-EFMKWPZ3.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DVOPZFQS.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/AutocompleteField.js

@@ -1,7 +1,7 @@
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-6S5CFNFM.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-CVCP52OD.js';
 import '../chunk-BD75U73S.js';
 import '../chunk-EFMKWPZ3.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DVOPZFQS.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/FileDropzone.d.ts

@@ -0,0 +1,65 @@
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
+import React__default from 'react';
+
+type FileDropzoneItem = {
+    id: string;
+    url: string;
+    name?: string;
+};
+interface FileDropzoneProps {
+    /** 백엔드 업로드 경로 (예: "/attachments"). 없으면 로컬 미리보기 모드 */
+    endpoint?: string;
+    /** 첨부 목록 — 주면 controlled */
+    value?: FileDropzoneItem[];
+    onChange?: (files: FileDropzoneItem[]) => void;
+    /** 업로드 큐 시작/종료 알림 */
+    onBusyChange?: (busy: boolean) => void;
+    /** 최대 첨부 수 */
+    maxCount?: number;
+    /** 허용 형식 (input accept 문법) */
+    accept?: string;
+    disabled?: boolean;
+    /** 드롭 영역 아래 보조 문구 */
+    hint?: string;
+    /**
+     * 첨부 삭제 경로의 **기준**(예: "/attachments"). 주면 썸네일의 삭제가 목록에서
+     * 빼는 데 그치지 않고 `DELETE {deleteEndpoint}/{id}` 까지 보낸다.
+     *
+     * 이게 없으면 이미 올라간 사진을 이 칸에 채워 둘 수 없다 — 지운 것처럼 보이는데
+     * 서버에는 그대로 남는 함정이 되기 때문이다(그래서 예전에는 "추가 전용"이었다).
+     * 아직 업로드 중이거나 로컬 미리보기(id가 `local-`)인 항목은 보낼 곳이 없어 건너뛴다.
+     */
+    /**
+     * 업로드를 직접 맡는다. 주면 `endpoint` 대신 이 함수가 불린다 — 위젯은 응답을
+     * 해석하지 않고 항목을 그대로 받는다(서버 봉투가 특수한 앱의 탈출구).
+     */
+    upload?: (file: File) => Promise<FileDropzoneItem>;
+    /** multipart 필드 이름. 기본 'file'. */
+    fileField?: string;
+    /**
+     * 503을 "백엔드 미연동"으로 읽어 로컬 미리보기로 강등한다. 기본 false —
+     * 일반 서버의 과부하 503에서 "올린 것처럼 보이는데 새로고침하면 없는" 항목을
+     * 만들면 안 되기 때문이다. 데모 모드를 503으로 합성하는 앱만 켠다.
+     */
+    localFallbackOn503?: boolean;
+    deleteEndpoint?: string;
+    /** 서버에서 실제로 지운 뒤 한 번 — 보통 목록·상세를 다시 읽는 invalidate를 건다 */
+    onRemove?: () => void;
+}
+/**
+ * 업로드 응답에서 `{id, url}` 을 꺼낸다 — **도메인 명사를 알지 않는다.**
+ *
+ * 단일 자원을 한 겹 감싸 주는 것은 REST 관례다(`{attachment:{…}}`·`{data:{…}}`).
+ * 그래서 이름 목록을 두는 대신 **모양**으로 판정한다: 최상위에 id·url 이 없고
+ * 객체 값을 가진 키가 **정확히 하나**면 그 안으로 한 겹 내려간다.
+ * 그 조건을 벗어나면(키가 둘 이상, 값이 객체가 아님) 벗기지 않는다 — 잘못 벗겨
+ * 엉뚱한 값을 집는 것보다 "응답 형식 오류"로 드러나는 편이 낫다.
+ */
+declare function unwrapUploaded(payload: unknown): {
+    id?: unknown;
+    url?: unknown;
+} | null;
+/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다 — 자기 축(폭·여백)이 닿게 하는 통로. */
+declare const FileDropzone: React__default.FC<FileDropzoneProps & SduiBoxProps>;
+
+export { FileDropzone, type FileDropzoneItem, type FileDropzoneProps, unwrapUploaded };

package/dist/widgets/FileDropzone.js

@@ -0,0 +1,6 @@
+export { FileDropzone, unwrapUploaded } from '../chunk-DQVDS2VP.js';
+import '../chunk-XPBZMECW.js';
+import '../chunk-THEP3VWY.js';
+import '../chunk-DKPNFEVU.js';
+import '../chunk-WIDDHR7L.js';
+import '../chunk-SAN4IX6N.js';

package/dist/widgets/OrgChartBoard.js

@@ -1,6 +1,6 @@
-export { OrgChartBoard } from '../chunk-KBLFOC37.js';
+export { OrgChartBoard } from '../chunk-NGZI4V3O.js';
 import '../chunk-XPBZMECW.js';
 import '../chunk-THEP3VWY.js';
-import '../chunk-DVOPZFQS.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/PermissionMatrixEditor.js

@@ -1,4 +1,4 @@
-export { PermissionMatrixEditor } from '../chunk-WLQ7PLHB.js';
-import '../chunk-DVOPZFQS.js';
+export { PermissionMatrixEditor } from '../chunk-N24VF6KI.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/RankBoard.js

@@ -1,6 +1,6 @@
-export { RankBoard } from '../chunk-DIVN4TBW.js';
+export { RankBoard } from '../chunk-U6H7YN4I.js';
 import '../chunk-QU7YVMFA.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DVOPZFQS.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/RoleMemberPicker.js

@@ -1,4 +1,4 @@
-export { RoleMemberPicker } from '../chunk-XSCFMCLH.js';
-import '../chunk-DVOPZFQS.js';
+export { RoleMemberPicker } from '../chunk-WXZDYDXG.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.d.ts

@@ -57,6 +57,7 @@ import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
 import { ApprovalLineEditorProps } from './ApprovalLineEditor.js';
 export { ApprovalLineEditor, ApprovalLineStep, CustomApprover } from './ApprovalLineEditor.js';
 export { AutocompleteField, AutocompleteFieldProps, AutocompleteOption, AutocompleteSearchFn, AutocompleteSearchResult, toAutocompleteOptions } from './AutocompleteField.js';
+export { FileDropzone, FileDropzoneItem, FileDropzoneProps, unwrapUploaded } from './FileDropzone.js';
 
 /**
  * `createRegistry(widgetComponents)`로 어휘에 얹는 묶음.

package/dist/widgets/index.js

@@ -1,3 +1,9 @@
+import { TreePicker } from '../chunk-U3HYQCFA.js';
+export { TreePicker } from '../chunk-U3HYQCFA.js';
+import { TreeView } from '../chunk-X5R2HHEN.js';
+export { TreeView, buildTreeNodes } from '../chunk-X5R2HHEN.js';
+import { RoleMemberPicker } from '../chunk-WXZDYDXG.js';
+export { RoleMemberPicker } from '../chunk-WXZDYDXG.js';
 import { SearchableMultiPicker } from '../chunk-C53NGSA3.js';
 export { SearchableMultiPicker } from '../chunk-C53NGSA3.js';
 import { SecureScreen } from '../chunk-IIRENCDS.js';
@@ -10,26 +16,22 @@ import { SummaryTable } from '../chunk-O4U7Y3XL.js';
 export { SummaryTable } from '../chunk-O4U7Y3XL.js';
 import { Timeline } from '../chunk-EFYEOT47.js';
 export { Timeline } from '../chunk-EFYEOT47.js';
-import { TreePicker } from '../chunk-U3HYQCFA.js';
-export { TreePicker } from '../chunk-U3HYQCFA.js';
-import { TreeView } from '../chunk-X5R2HHEN.js';
-export { TreeView, buildTreeNodes } from '../chunk-X5R2HHEN.js';
+import { LiveClock } from '../chunk-Z3WGIFJP.js';
+export { LiveClock } from '../chunk-Z3WGIFJP.js';
 import { OrgChart } from '../chunk-QWJ3OBBL.js';
 export { OrgChart } from '../chunk-QWJ3OBBL.js';
-import { OrgChartBoard } from '../chunk-KBLFOC37.js';
-export { OrgChartBoard } from '../chunk-KBLFOC37.js';
-import { PermissionMatrixEditor } from '../chunk-WLQ7PLHB.js';
-export { PermissionMatrixEditor } from '../chunk-WLQ7PLHB.js';
+import { OrgChartBoard } from '../chunk-NGZI4V3O.js';
+export { OrgChartBoard } from '../chunk-NGZI4V3O.js';
+import { PermissionMatrixEditor } from '../chunk-N24VF6KI.js';
+export { PermissionMatrixEditor } from '../chunk-N24VF6KI.js';
 import { PeriodFilter } from '../chunk-INWASR2G.js';
 export { PeriodFilter } from '../chunk-INWASR2G.js';
 import { PrintSheet } from '../chunk-MYJ2KEIP.js';
 export { PrintSheet } from '../chunk-MYJ2KEIP.js';
-import { RankBoard } from '../chunk-DIVN4TBW.js';
-export { RankBoard } from '../chunk-DIVN4TBW.js';
+import { RankBoard } from '../chunk-U6H7YN4I.js';
+export { RankBoard } from '../chunk-U6H7YN4I.js';
 import { RecordSheet } from '../chunk-K3JBSWFI.js';
 export { RecordSheet } from '../chunk-K3JBSWFI.js';
-import { RoleMemberPicker } from '../chunk-XSCFMCLH.js';
-export { RoleMemberPicker } from '../chunk-XSCFMCLH.js';
 import { ColumnBoard } from '../chunk-C4JRSZGS.js';
 export { ColumnBoard } from '../chunk-C4JRSZGS.js';
 import { DiffView } from '../chunk-LDJ2CFFH.js';
@@ -38,29 +40,28 @@ import { Disclosure } from '../chunk-HIZ2OVJA.js';
 export { Disclosure } from '../chunk-HIZ2OVJA.js';
 import { EventCalendar } from '../chunk-C3JY6GA3.js';
 export { EventCalendar } from '../chunk-C3JY6GA3.js';
+export { FileDropzone, unwrapUploaded } from '../chunk-DQVDS2VP.js';
 import { ImageLightbox } from '../chunk-XPBZMECW.js';
 export { ImageLightbox } from '../chunk-XPBZMECW.js';
 import { InlineEdit } from '../chunk-KT3ZVBLN.js';
 export { InlineEdit } from '../chunk-KT3ZVBLN.js';
 import { JsonField } from '../chunk-JVBZRDC2.js';
 export { JsonField } from '../chunk-JVBZRDC2.js';
-import { LiveClock } from '../chunk-Z3WGIFJP.js';
-export { LiveClock } from '../chunk-Z3WGIFJP.js';
 import '../chunk-QU7YVMFA.js';
 import '../chunk-THEP3VWY.js';
-import { ApprovalOverridesEditor } from '../chunk-ZDRERW4G.js';
-export { ApprovalOverridesEditor } from '../chunk-ZDRERW4G.js';
+import { ApprovalOverridesEditor } from '../chunk-OR27SRKL.js';
+export { ApprovalOverridesEditor } from '../chunk-OR27SRKL.js';
 import { TagMultiSelect } from '../chunk-QDEZXA34.js';
 export { TagMultiSelect } from '../chunk-QDEZXA34.js';
-import { ApprovalLineEditor } from '../chunk-SAPJVLZM.js';
-export { ApprovalLineEditor } from '../chunk-SAPJVLZM.js';
+import { ApprovalLineEditor } from '../chunk-S4LOH2TU.js';
+export { ApprovalLineEditor } from '../chunk-S4LOH2TU.js';
 import { ApprovalStepper } from '../chunk-ZTQEP3TR.js';
 export { ApprovalStepper } from '../chunk-ZTQEP3TR.js';
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-6S5CFNFM.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-CVCP52OD.js';
 import '../chunk-BD75U73S.js';
 import '../chunk-EFMKWPZ3.js';
 import '../chunk-XQPTSEJC.js';
-import '../chunk-DVOPZFQS.js';
+import '../chunk-DKPNFEVU.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",
@@ -68,6 +68,10 @@
       "types": "./dist/widgets/EventCalendar.d.ts",
       "default": "./dist/widgets/EventCalendar.js"
     },
+    "./widgets/FileDropzone": {
+      "types": "./dist/widgets/FileDropzone.d.ts",
+      "default": "./dist/widgets/FileDropzone.js"
+    },
     "./widgets/ImageLightbox": {
       "types": "./dist/widgets/ImageLightbox.d.ts",
       "default": "./dist/widgets/ImageLightbox.js"