@wipco/sdui 1.8.1 → 1.8.3

package/dist/{chunk-HSS7MTJK.js → chunk-3PGKBTBZ.js}

@@ -1,4 +1,4 @@
-import { DatePicker, TimePicker } from './chunk-LKSGAILO.js';
+import { DatePicker, TimePicker } from './chunk-5JXXCRXA.js';
 import { Field } from './chunk-KIHN7DGA.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useMemo } from 'react';

package/dist/{chunk-2TUCSOZR.js → chunk-4SVSS7VO.js}

@@ -1,5 +1,5 @@
 import { orderCircleStyle, ellipsisStyle, unwrapRows, uid } from './chunk-YOLT2TPX.js';
-import { includesLooseSearch } from './chunk-ECBSYHZU.js';
+import { includesLooseSearch } from './chunk-I2URQNZZ.js';
 import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-XFNHHGFR.js';
 import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button, isPlainObject } from './chunk-KIHN7DGA.js';
 import { boxed } from './chunk-3JTBOABA.js';

package/dist/{chunk-LKSGAILO.js → chunk-5JXXCRXA.js}

@@ -360,6 +360,20 @@ function buildMonthCells(index, min, max, weekStartsOn = 0) {
   }
   return weeks;
 }
+function viewForSlot(anchorIdx, slot, monthCount) {
+  return slot === "start" ? anchorIdx : anchorIdx - monthCount + 1;
+}
+function initialRangeView(monthCount, anchorIdx, slot, endIdxs) {
+  if (endIdxs.length >= 2) {
+    const lo = Math.min(...endIdxs);
+    if (Math.max(...endIdxs) - lo < monthCount) return lo;
+  }
+  return viewForSlot(anchorIdx, slot, monthCount);
+}
+function alignRangeView(viewIdx, monthCount, anchorIdx, slot, endIdxs) {
+  if (endIdxs.every((idx) => idx >= viewIdx && idx <= viewIdx + monthCount - 1)) return viewIdx;
+  return viewForSlot(anchorIdx, slot, monthCount);
+}
 function sameDayInMonth(date, index) {
   const first = monthStart(index);
   const lastDay = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
@@ -379,14 +393,29 @@ function Calendar({
   onFocusDateChange,
   autoFocus = false,
   locale,
-  selectedDates = []
+  selectedDates = [],
+  viewAlign
 }) {
   const focusIdx = monthIndex(focusDate);
-  const [viewIdx, setViewIdx] = useState(focusIdx);
+  const minIdx = minDate ? monthIndex(minDate) : -Infinity;
+  const maxIdx = maxDate ? monthIndex(maxDate) : Infinity;
+  const lastViewIdx = Math.max(minIdx, maxIdx - monthCount + 1);
+  const clampView = (idx) => clampIndex(idx, minIdx, lastViewIdx);
+  const [viewIdx, setViewIdx] = useState(
+    () => viewAlign ? clampView(initialRangeView(monthCount, monthIndex(viewAlign.anchor), viewAlign.slot, viewAlign.ends.map(monthIndex))) : focusIdx
+  );
+  const [alignSeq, setAlignSeq] = useState(viewAlign?.seq);
   const [zoom, setZoom] = useState(null);
   const gridRef = useRef(null);
   const focusYmd = formatYmd(focusDate);
-  const visibleIdx = clampViewToFocus(focusIdx, viewIdx, monthCount);
+  let baseIdx = viewIdx;
+  if (viewAlign && viewAlign.seq !== alignSeq) {
+    setAlignSeq(viewAlign.seq);
+    baseIdx = clampView(
+      alignRangeView(viewIdx, monthCount, monthIndex(viewAlign.anchor), viewAlign.slot, viewAlign.ends.map(monthIndex))
+    );
+  }
+  const visibleIdx = clampViewToFocus(focusIdx, baseIdx, monthCount);
   if (visibleIdx !== viewIdx) setViewIdx(visibleIdx);
   const claimFocusRef = useRef(false);
   useEffect(() => {
@@ -402,12 +431,8 @@ function Calendar({
     if (claim) grid.querySelector('[tabindex="0"]')?.focus();
   }, [focusYmd]);
   const todayYmd = formatYmd(/* @__PURE__ */ new Date());
-  const minIdx = minDate ? monthIndex(minDate) : -Infinity;
-  const maxIdx = maxDate ? monthIndex(maxDate) : Infinity;
   const prevDisabled = visibleIdx <= minIdx;
   const nextDisabled = visibleIdx + monthCount - 1 >= maxIdx;
-  const lastViewIdx = Math.max(minIdx, maxIdx - monthCount + 1);
-  const clampView = (idx) => clampIndex(idx, minIdx, lastViewIdx);
   const moveFocus = (next) => {
     onFocusDateChange(clampDate(next, minDate, maxDate));
   };
@@ -530,11 +555,14 @@ function Calendar({
           );
         }) }) }),
         /* @__PURE__ */ jsx("tbody", { className: "wp-dp__weeks", children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { className: "wp-dp__week", children: week.map((cell) => {
-          const state = cell.disabled ? {} : dayState(cell.date);
+          if (cell.outside && monthCount > 1) {
+            return /* @__PURE__ */ jsx("td", { className: "wp-dp__day wp-dp__day--outside wp-dp__day--blank", children: /* @__PURE__ */ jsx("span", { className: "wp-dp__day-blank", "aria-hidden": "true" }) }, cell.ymd);
+          }
+          const state = cell.disabled || cell.outside ? {} : dayState(cell.date);
           const classes = ["wp-dp__day"];
           if (cell.outside) classes.push("wp-dp__day--outside");
           if (cell.disabled) classes.push("wp-dp__day--disabled");
-          if (cell.ymd === todayYmd) classes.push("wp-dp__day--today");
+          if (cell.ymd === todayYmd && !cell.outside) classes.push("wp-dp__day--today");
           if (state.selected) classes.push("wp-dp__day--selected");
           if (state.rangeStart) classes.push("wp-dp__day--range-start");
           if (state.rangeMiddle) classes.push("wp-dp__day--range-middle");
@@ -799,6 +827,36 @@ function DateRangePickerImpl({
   const [focusDate, setFocusDate] = useState(() => fromDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
   const [grabFocus, setGrabFocus] = useState(false);
   const [end, setEnd] = useState("from");
+  const [viewAlign, setViewAlign] = useState(void 0);
+  const programmaticFocusRef = useRef(false);
+  const alignFor = (which) => {
+    const ends = [fromDate, toDate].filter((d) => d !== void 0);
+    const own = which === "from" ? fromDate : toDate;
+    if (own) return { anchor: own, slot: which === "from" ? "start" : "end", ends };
+    const other = which === "from" ? toDate : fromDate;
+    if (other) return { anchor: other, slot: which === "from" ? "end" : "start", ends };
+    return void 0;
+  };
+  const requestAlign = (next) => {
+    setViewAlign((prev) => next ? { ...next, seq: (prev?.seq ?? 0) + 1 } : void 0);
+  };
+  const activateEnd = (which) => {
+    if (which === end) return;
+    setEnd(which);
+    if (!open || programmaticFocusRef.current) return;
+    const own = which === "from" ? fromDate : toDate;
+    if (!own) return;
+    setFocusDate(own);
+    requestAlign(alignFor(which));
+  };
+  const focusEndInput = (ref) => {
+    programmaticFocusRef.current = true;
+    try {
+      ref.current?.focus();
+    } finally {
+      programmaticFocusRef.current = false;
+    }
+  };
   const dismiss = useCallback((reason) => {
     setOpen(false);
     if (reason === "escape") (end === "to" ? toRef : fromRef).current?.focus();
@@ -821,6 +879,7 @@ function DateRangePickerImpl({
     setFocusDate(
       (which === "to" ? toDate ?? fromDate : fromDate ?? toDate) ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate)
     );
+    requestAlign(alignFor(which));
     setGrabFocus(claimFocus);
     setOpen(true);
   };
@@ -868,18 +927,18 @@ function DateRangePickerImpl({
       const keepTo = toDate && date.getTime() > toDate.getTime() ? "" : toValue;
       commit(ymd, keepTo);
       setEnd("to");
-      toRef.current?.focus();
+      focusEndInput(toRef);
       return;
     }
     if (fromDate && date.getTime() < fromDate.getTime()) {
       commit(ymd, "");
       setEnd("to");
-      toRef.current?.focus();
+      focusEndInput(toRef);
       return;
     }
     commit(fromValue, ymd);
     setOpen(false);
-    toRef.current?.focus();
+    focusEndInput(toRef);
   };
   return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host wp-dp-host--range", onBlur: handleBlur, children: [
     /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
@@ -900,7 +959,7 @@ function DateRangePickerImpl({
           ariaLabel: loc.startLabel,
           onValueChange: (raw) => handleTextChange("from", raw),
           onKeyDown: handleKeyDown("from"),
-          onFocus: () => setEnd("from"),
+          onFocus: () => activateEnd("from"),
           onPointerDown: () => {
             if (!disabled && !open) openCalendar("from", false);
           }
@@ -922,7 +981,7 @@ function DateRangePickerImpl({
           ariaLabel: loc.endLabel,
           onValueChange: (raw) => handleTextChange("to", raw),
           onKeyDown: handleKeyDown("to"),
-          onFocus: () => setEnd("to"),
+          onFocus: () => activateEnd("to"),
           onPointerDown: () => {
             if (!disabled && !open) openCalendar("to", false);
           }
@@ -951,6 +1010,7 @@ function DateRangePickerImpl({
               autoFocus: grabFocus,
               locale: loc,
               selectedDates: [fromDate, toDate].filter((d) => d !== void 0),
+              viewAlign,
               dayState: (date) => {
                 const t = date.getTime();
                 const start = fromDate?.getTime();
@@ -1007,6 +1067,8 @@ var DP_CSS = `
 .wp-dp__day-btn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-1px}
 .wp-dp__day--today .wp-dp__day-btn{box-shadow:inset 0 0 0 1px var(--wp-border-focus)}
 .wp-dp__day--outside{color:var(--wp-text-subtle)}
+/* \uB450 \uB2EC \uD45C\uC2DC\uC758 \uCC44\uC6C0 \uCE78 \u2014 \uB0A0\uC9DC \uCE78\uACFC \uAC19\uC740 \uC790\uB9AC\uB97C \uCC28\uC9C0\uD558\uB294 \uBE48\uCE78(6\uC8FC \uACA9\uC790 \uB192\uC774 \uC720\uC9C0, \uB450 \uD45C \uB192\uC774\uAC00 \uAC19\uB2E4) */
+.wp-dp__day-blank{display:block;width:32px;height:30px;margin:0 auto}
 .wp-dp__day--disabled{color:var(--wp-text-disabled)}
 .wp-dp__day--disabled .wp-dp__day-btn{cursor:default}
 .wp-dp__day--selected .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}

package/dist/{chunk-IWLLM45X.js → chunk-CFFSCGDV.js}

@@ -6,6 +6,98 @@ import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var THUMB_SIZE = 72;
+var FILE_TILE_WIDTH = 168;
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([
+  "jpg",
+  "jpeg",
+  "jpe",
+  "jfif",
+  "pjpeg",
+  "pjp",
+  "png",
+  "apng",
+  "gif",
+  "webp",
+  "avif",
+  "bmp",
+  "svg",
+  "ico",
+  "heic",
+  "heif",
+  "tif",
+  "tiff"
+]);
+var MIME_SHAPE = /^[a-z0-9][\w.+-]*\/[\w.+-]+/i;
+function urlOf(item) {
+  return typeof item.url === "string" ? item.url : "";
+}
+function itemMime(item) {
+  const record = item;
+  for (const key of ["mimeType", "mime_type", "type"]) {
+    const value = record[key];
+    if (typeof value === "string" && MIME_SHAPE.test(value.trim())) return value.trim().toLowerCase();
+  }
+  return null;
+}
+function extensionOfPath(path) {
+  const segment = path.slice(Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\")) + 1);
+  const dot = segment.lastIndexOf(".");
+  if (dot <= 0) return null;
+  const ext = segment.slice(dot + 1).toLowerCase();
+  return /^[a-z0-9]{1,10}$/.test(ext) ? ext : null;
+}
+function extensionOfUrl(url) {
+  if (/^(blob|data):/i.test(url.trim())) return null;
+  return extensionOfPath(url.split(/[?#]/, 1)[0]);
+}
+function dataUrlMime(url) {
+  const match = /^data:([^;,]+)/i.exec(url.trim());
+  return match && MIME_SHAPE.test(match[1]) ? match[1].toLowerCase() : null;
+}
+function itemLooksLikeImage(item, fileType) {
+  const mime = itemMime(item) ?? (fileType && MIME_SHAPE.test(fileType) ? fileType.toLowerCase() : null) ?? dataUrlMime(urlOf(item));
+  if (mime) return mime.startsWith("image/");
+  const ext = extensionOfUrl(urlOf(item)) ?? (item.name ? extensionOfPath(item.name) : null);
+  if (ext) return IMAGE_EXTENSIONS.has(ext);
+  return true;
+}
+function fileBadgeOf(item, fileType) {
+  const ext = (item.name ? extensionOfPath(item.name) : null) ?? extensionOfUrl(urlOf(item));
+  if (ext) return ext.toUpperCase();
+  const mime = itemMime(item) ?? (fileType && MIME_SHAPE.test(fileType) ? fileType.toLowerCase() : null);
+  const subtype = mime?.split("/")[1]?.split(/[;+]/)[0];
+  return subtype && /^[a-z0-9]{1,5}$/.test(subtype) ? subtype.toUpperCase() : null;
+}
+function displayNameOf(item) {
+  if (item.name && item.name.trim() !== "") return item.name;
+  const url = urlOf(item);
+  if (!/^(blob|data):/i.test(url.trim())) {
+    const path = url.split(/[?#]/, 1)[0];
+    const segment = path.slice(path.lastIndexOf("/") + 1);
+    if (segment !== "") {
+      try {
+        return decodeURIComponent(segment);
+      } catch {
+        return segment;
+      }
+    }
+  }
+  return "\uCCA8\uBD80 \uD30C\uC77C";
+}
+function safeFileHref(url) {
+  const value = url.replace(/[\u0000-\u0020]/g, "");
+  if (value === "") return null;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(value);
+  if (!scheme) return url;
+  return /^(https?|blob)$/i.test(scheme[1]) ? url : null;
+}
+function acceptIsImageOnly(accept) {
+  const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  if (rules.length === 0) return false;
+  return rules.every(
+    (rule) => rule.startsWith(".") ? IMAGE_EXTENSIONS.has(rule.slice(1)) : rule.startsWith("image/")
+  );
+}
 function matchesAccept(file, accept) {
   const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
   if (rules.length === 0) return true;
@@ -65,6 +157,10 @@ function FileDropzoneImpl({
   const inputRef = useRef(null);
   const dragDepthRef = useRef(0);
   const createdUrlsRef = useRef(/* @__PURE__ */ new Set());
+  const fileTypesRef = useRef(/* @__PURE__ */ new Map());
+  const rememberFileType = (id, file) => {
+    if (file.type) fileTypesRef.current.set(id, file.type);
+  };
   useEffect(() => {
     const created = createdUrlsRef.current;
     return () => created.forEach((url) => URL.revokeObjectURL(url));
@@ -93,6 +189,7 @@ function FileDropzoneImpl({
             try {
               const item = await upload(file);
               if (item && typeof item.id === "string" && typeof item.url === "string") {
+                rememberFileType(item.id, file);
                 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)`);
@@ -116,10 +213,11 @@ function FileDropzoneImpl({
               } else {
                 const json = await res.json().catch(() => null);
                 const body = unwrapUploaded(json);
-                const id = body?.id;
+                const id2 = 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 }]);
+                if ((typeof id2 === "string" || typeof id2 === "number") && typeof url2 === "string") {
+                  rememberFileType(String(id2), file);
+                  commit([...itemsRef.current, { id: String(id2), url: url2, name: file.name }]);
                 } else {
                   failures.push(`${file.name} (\uC751\uB2F5 \uD615\uC2DD \uC624\uB958)`);
                 }
@@ -132,7 +230,9 @@ function FileDropzoneImpl({
           }
           const url = URL.createObjectURL(file);
           createdUrlsRef.current.add(url);
-          commit([...itemsRef.current, { id: localId(), url, name: file.name }]);
+          const id = localId();
+          rememberFileType(id, file);
+          commit([...itemsRef.current, { id, url, name: file.name }]);
         }
       } finally {
         setProgress(null);
@@ -177,6 +277,7 @@ function FileDropzoneImpl({
     (item) => {
       const forget = () => {
         commit(itemsRef.current.filter((current) => current.id !== item.id));
+        fileTypesRef.current.delete(item.id);
         if (createdUrlsRef.current.has(item.url)) {
           URL.revokeObjectURL(item.url);
           createdUrlsRef.current.delete(item.url);
@@ -208,6 +309,7 @@ function FileDropzoneImpl({
   };
   const showLocalCaption = localMode || items.some((item) => item.id.startsWith("local-"));
   const dropTinted = canAdd && (dragOver || hovering);
+  const imageOnly = acceptIsImageOnly(accept);
   return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -231,7 +333,7 @@ function FileDropzoneImpl({
         role: "button",
         tabIndex: canAdd ? 0 : -1,
         "aria-disabled": !canAdd,
-        "aria-label": "\uC774\uBBF8\uC9C0 \uCCA8\uBD80",
+        "aria-label": imageOnly ? "\uC774\uBBF8\uC9C0 \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80",
         onClick: openPicker,
         onKeyDown: (event) => {
           if (canAdd && (event.key === "Enter" || event.key === " ")) {
@@ -284,7 +386,7 @@ function FileDropzoneImpl({
               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" }),
+          /* @__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 ${imageOnly ? "\uC774\uBBF8\uC9C0\uB97C" : "\uD30C\uC77C\uC744"} \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694` }),
           hint ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: hint }) : null
         ] })
       }
@@ -318,47 +420,128 @@ function FileDropzoneImpl({
       }
     ) : 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, {
+      const fileType = fileTypesRef.current.get(item.id);
+      const asImage = itemLooksLikeImage(item, fileType);
+      const resolved = resolveAsset(item.url, {
         component: "FileDropzone",
-        prop: "src",
+        prop: asImage ? "src" : "href",
         kind: "attribute"
       });
+      const hovered = hoverItemId === item.id;
+      let preview;
+      if (asImage) {
+        preview = resolved === 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: resolved,
+            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)"
+            }
+          }
+        );
+      } else {
+        const href = sandbox || resolved === null ? null : safeFileHref(resolved);
+        const displayName = displayNameOf(item);
+        const badge = fileBadgeOf(item, fileType);
+        const tileStyle = {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--wp-space-2)",
+          boxSizing: "border-box",
+          width: FILE_TILE_WIDTH,
+          height: THUMB_SIZE,
+          padding: "0 var(--wp-space-2)",
+          borderRadius: "var(--wp-radius-md)",
+          border: `var(--wp-border-w) solid ${hovered && href ? "var(--wp-border-strong)" : "var(--wp-border-subtle)"}`,
+          background: "var(--wp-surface-sunken)",
+          color: "var(--wp-text-default)",
+          textDecoration: "none",
+          transition: "var(--wp-transition-surface)"
+        };
+        const tileBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 2,
+                flex: "none",
+                minWidth: 28,
+                color: "var(--wp-text-muted)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "file-text", size: 24 }),
+                badge ? /* @__PURE__ */ jsx("span", { className: "wp-overline", style: { lineHeight: 1 }, children: badge }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "wp-caption",
+              style: {
+                flex: 1,
+                minWidth: 0,
+                color: "var(--wp-text-default)",
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+                wordBreak: "break-all"
+              },
+              children: displayName
+            }
+          )
+        ] });
+        preview = href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noopener",
+            title: displayName,
+            "aria-label": `${displayName}${badge ? ` (${badge})` : ""} \u2014 \uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30`,
+            "data-file-tile": "",
+            style: tileStyle,
+            onClick: (event) => event.stopPropagation(),
+            children: tileBody
+          }
+        ) : /* @__PURE__ */ jsx("span", { title: displayName, "data-file-tile": "", style: tileStyle, children: tileBody });
+      }
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          style: { position: "relative", width: THUMB_SIZE, height: THUMB_SIZE },
+          style: {
+            position: "relative",
+            width: asImage ? THUMB_SIZE : FILE_TILE_WIDTH,
+            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)"
-                }
-              }
-            ),
+            preview,
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -369,7 +552,7 @@ function FileDropzoneImpl({
                   background: "var(--wp-surface-card)",
                   borderRadius: "var(--wp-radius-sm)",
                   boxShadow: "var(--wp-shadow-sm)",
-                  opacity: hoverItemId === item.id ? 1 : 0,
+                  opacity: hovered ? 1 : 0,
                   transition: "opacity var(--wp-duration-fast) var(--wp-ease-out)"
                 },
                 children: /* @__PURE__ */ jsx(

package/dist/{chunk-OB425KVK.js → chunk-DTCZPXOT.js}

@@ -1,5 +1,5 @@
 import { ellipsisStyle, unwrapRows } from './chunk-YOLT2TPX.js';
-import { includesLooseSearch } from './chunk-ECBSYHZU.js';
+import { includesLooseSearch } from './chunk-I2URQNZZ.js';
 import { useSduiAdapter, hostFetchOf } from './chunk-XFNHHGFR.js';
 import { Icon, Button, Input, Spinner } from './chunk-KIHN7DGA.js';
 import { boxed } from './chunk-3JTBOABA.js';

package/dist/{chunk-LAGO4H4U.js → chunk-H7RLEDKJ.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-ECBSYHZU.js';
+import { includesLooseSearch } from './chunk-I2URQNZZ.js';
 import { OverlayLayer } from './chunk-R2ORCOTG.js';
 import { Button, Dialog, Input, Tag, Checkbox } from './chunk-KIHN7DGA.js';
 import { boxed } from './chunk-3JTBOABA.js';

package/dist/{chunk-ECBSYHZU.js → chunk-I2URQNZZ.js}

@@ -1,4 +1,4 @@
-import { DateRangePicker } from './chunk-LKSGAILO.js';
+import { DateRangePicker } from './chunk-5JXXCRXA.js';
 import { useOverlayLayer } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
 import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-KIHN7DGA.js';

package/dist/{chunk-L2WC45T3.js → chunk-OI2GPBIL.js}

@@ -1,4 +1,4 @@
-import { buildCascadingTree } from './chunk-ECBSYHZU.js';
+import { buildCascadingTree } from './chunk-I2URQNZZ.js';
 import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-KIHN7DGA.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo, useState, useRef, useEffect } from 'react';

package/dist/{chunk-RDQO43Y5.js → chunk-UDJVLMDH.js}

@@ -1,4 +1,4 @@
-import { resolveTreeNodes, TreeView } from './chunk-L2WC45T3.js';
+import { resolveTreeNodes, TreeView } from './chunk-OI2GPBIL.js';
 import { OverlayLayer } from './chunk-R2ORCOTG.js';
 import { Field, Dialog, Icon, Button, Input } from './chunk-KIHN7DGA.js';
 import { boxed } from './chunk-3JTBOABA.js';

package/dist/{chunk-6AFQPHLW.js → chunk-UNQ6VAVD.js}

@@ -1,4 +1,4 @@
-import { DateRangePicker } from './chunk-LKSGAILO.js';
+import { DateRangePicker } from './chunk-5JXXCRXA.js';
 import { SegmentedControl, Select } from './chunk-KIHN7DGA.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';

package/dist/{chunk-HSHVR6VH.js → chunk-ZDWCLHIY.js}

@@ -1,5 +1,5 @@
 import { TagMultiSelect } from './chunk-TCHXA35K.js';
-import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-2TUCSOZR.js';
+import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-4SVSS7VO.js';
 import { orderCircleStyle, unwrapRows, uid } from './chunk-YOLT2TPX.js';
 import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-XFNHHGFR.js';
 import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-KIHN7DGA.js';

package/dist/index.js

@@ -5,10 +5,10 @@ import { Text, Spacer, Show, Section, Row, PageHead, KeyValueList, Grid, Divider
 export { Actions, Col, Divider, Grid, KeyValueList, PageHead, Row, Section, Show, Spacer, Text } from './chunk-YK7ZNV2C.js';
 import { ImageViewer } from './chunk-PN5IJPA5.js';
 export { ImageViewer } from './chunk-PN5IJPA5.js';
-import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-ECBSYHZU.js';
-export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-ECBSYHZU.js';
-import { parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chunk-LKSGAILO.js';
-export { DatePicker, DateRangePicker, TimePicker } from './chunk-LKSGAILO.js';
+import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-I2URQNZZ.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-I2URQNZZ.js';
+import { parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chunk-5JXXCRXA.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-5JXXCRXA.js';
 import './chunk-KJDHF6VU.js';
 import { OverlayContainerContext, OverlayLayer, useAnyModalOpen } from './chunk-R2ORCOTG.js';
 export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useAnyModalOpen, useOverlayLayer } from './chunk-R2ORCOTG.js';

package/dist/meta.js

@@ -4376,7 +4376,7 @@ var FileDropzoneMeta = {
   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.",
+  description: "\uB4DC\uB798\uADF8 \uC564 \uB4DC\uB86D \uB2E4\uC911 \uCCA8\uBD80. \uC774\uBBF8\uC9C0\uB294 \uC378\uB124\uC77C, PDF \uB4F1 \uADF8 \uBC16\uC758 \uD30C\uC77C\uC740 \uC0C8 \uD0ED\uC73C\uB85C \uC5EC\uB294 \uD30C\uC77C \uD0C0\uC77C\uB85C \uBCF4\uC778\uB2E4. \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",
@@ -4389,7 +4389,13 @@ var FileDropzoneMeta = {
       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: "name", kind: "string", label: "\uD30C\uC77C\uBA85" },
+        {
+          name: "mimeType",
+          kind: "string",
+          label: "MIME \uD615\uC2DD",
+          description: "image/\u2026 \uC774\uBA74 \uC378\uB124\uC77C, \uC544\uB2C8\uBA74 \uD30C\uC77C \uD0C0\uC77C(\uBB38\uC11C \uC544\uC774\uCF58\xB7\uD655\uC7A5\uC790\xB7\uD30C\uC77C\uBA85, \uB204\uB974\uBA74 \uC0C8 \uD0ED). mime_type\xB7type \uB3C4 \uC77D\uACE0, \uC5C6\uC73C\uBA74 URL\xB7\uD30C\uC77C\uBA85 \uD655\uC7A5\uC790\uB85C \uD310\uC815\uD55C\uB2E4."
+        }
       ]
     },
     {

package/dist/rich.js

@@ -1,5 +1,5 @@
 import { useOptionalModule, DependencyPlaceholder } from './chunk-JRCHWX2B.js';
-export { DatePicker, DateRangePicker, TimePicker } from './chunk-LKSGAILO.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-5JXXCRXA.js';
 import './chunk-KJDHF6VU.js';
 import './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';

package/dist/widgets/ApprovalLineEditor.js

@@ -1,7 +1,7 @@
-export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-2TUCSOZR.js';
+export { ApprovalLineEditor, stepLabel, stepTypeIcon } from '../chunk-4SVSS7VO.js';
 import '../chunk-YOLT2TPX.js';
-import '../chunk-ECBSYHZU.js';
-import '../chunk-LKSGAILO.js';
+import '../chunk-I2URQNZZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/ApprovalOverridesEditor.js

@@ -1,9 +1,9 @@
-export { ApprovalOverridesEditor, facetsFrom } from '../chunk-HSHVR6VH.js';
+export { ApprovalOverridesEditor, facetsFrom } from '../chunk-ZDWCLHIY.js';
 import '../chunk-TCHXA35K.js';
-import '../chunk-2TUCSOZR.js';
+import '../chunk-4SVSS7VO.js';
 import '../chunk-YOLT2TPX.js';
-import '../chunk-ECBSYHZU.js';
-import '../chunk-LKSGAILO.js';
+import '../chunk-I2URQNZZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/AutocompleteField.js

@@ -1,7 +1,7 @@
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-OB425KVK.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-DTCZPXOT.js';
 import '../chunk-YOLT2TPX.js';
-import '../chunk-ECBSYHZU.js';
-import '../chunk-LKSGAILO.js';
+import '../chunk-I2URQNZZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/FileDropzone.d.ts

@@ -5,6 +5,14 @@ type FileDropzoneItem = {
     id: string;
     url: string;
     name?: string;
+    /**
+     * MIME 형식(예: `application/pdf`) — 있으면 이미지/파일 타일 판정의 1순위다.
+     * 서버 행을 그대로 채우는 앱은 snake_case(`mime_type`)로 주고, File 같은 객체는
+     * `type`으로 준다 — 셋 다 읽는다(`type`은 `x/y` 모양일 때만 MIME 으로 본다).
+     */
+    mimeType?: string;
+    mime_type?: string;
+    type?: string;
 };
 interface FileDropzoneProps {
     /** 백엔드 업로드 경로 (예: "/attachments"). 없으면 로컬 미리보기 모드 */

package/dist/widgets/FileDropzone.js

@@ -1,4 +1,4 @@
-export { FileDropzone, unwrapUploaded } from '../chunk-IWLLM45X.js';
+export { FileDropzone, unwrapUploaded } from '../chunk-CFFSCGDV.js';
 import '../chunk-JDTVNS3H.js';
 import '../chunk-PN5IJPA5.js';
 import '../chunk-R2ORCOTG.js';

package/dist/widgets/PeriodFilter.js

@@ -1,5 +1,5 @@
-export { PeriodFilter } from '../chunk-6AFQPHLW.js';
-import '../chunk-LKSGAILO.js';
+export { PeriodFilter } from '../chunk-UNQ6VAVD.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/SearchableMultiPicker.js

@@ -1,6 +1,6 @@
-export { SearchableMultiPicker } from '../chunk-LAGO4H4U.js';
-import '../chunk-ECBSYHZU.js';
-import '../chunk-LKSGAILO.js';
+export { SearchableMultiPicker } from '../chunk-H7RLEDKJ.js';
+import '../chunk-I2URQNZZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/StagePeriodEditor.js

@@ -1,5 +1,5 @@
-export { StagePeriodEditor } from '../chunk-HSS7MTJK.js';
-import '../chunk-LKSGAILO.js';
+export { StagePeriodEditor } from '../chunk-3PGKBTBZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/TreePicker.js

@@ -1,7 +1,7 @@
-export { TreePicker } from '../chunk-RDQO43Y5.js';
-import '../chunk-L2WC45T3.js';
-import '../chunk-ECBSYHZU.js';
-import '../chunk-LKSGAILO.js';
+export { TreePicker } from '../chunk-UDJVLMDH.js';
+import '../chunk-OI2GPBIL.js';
+import '../chunk-I2URQNZZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/TreeView.js

@@ -1,6 +1,6 @@
-export { TreeView, ancestorIdsOf, buildTreeNodes, pruneExcluded, resolveTreeNodes, scrollRowIntoBox } from '../chunk-L2WC45T3.js';
-import '../chunk-ECBSYHZU.js';
-import '../chunk-LKSGAILO.js';
+export { TreeView, ancestorIdsOf, buildTreeNodes, pruneExcluded, resolveTreeNodes, scrollRowIntoBox } from '../chunk-OI2GPBIL.js';
+import '../chunk-I2URQNZZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/dist/widgets/index.js

@@ -1,13 +1,13 @@
-import { TreePicker } from '../chunk-RDQO43Y5.js';
-export { TreePicker } from '../chunk-RDQO43Y5.js';
-import { TreeView } from '../chunk-L2WC45T3.js';
-export { TreeView, buildTreeNodes } from '../chunk-L2WC45T3.js';
+import { TreePicker } from '../chunk-UDJVLMDH.js';
+export { TreePicker } from '../chunk-UDJVLMDH.js';
+import { TreeView } from '../chunk-OI2GPBIL.js';
+export { TreeView, buildTreeNodes } from '../chunk-OI2GPBIL.js';
 import { SecureScreen } from '../chunk-ITFSPOOB.js';
 export { SecureScreen } from '../chunk-ITFSPOOB.js';
 import { StackedMeter } from '../chunk-EJIWOD7W.js';
 export { StackedMeter } from '../chunk-EJIWOD7W.js';
-import { StagePeriodEditor } from '../chunk-HSS7MTJK.js';
-export { StagePeriodEditor } from '../chunk-HSS7MTJK.js';
+import { StagePeriodEditor } from '../chunk-3PGKBTBZ.js';
+export { StagePeriodEditor } from '../chunk-3PGKBTBZ.js';
 import { Strip } from '../chunk-XAXROQKB.js';
 export { Strip } from '../chunk-XAXROQKB.js';
 import { SummaryTable } from '../chunk-VZOQRQAR.js';
@@ -30,8 +30,8 @@ import { RecordSheet } from '../chunk-VR4DQTWR.js';
 export { RecordSheet } from '../chunk-VR4DQTWR.js';
 import { RoleMemberPicker } from '../chunk-QP7AQEGZ.js';
 export { RoleMemberPicker } from '../chunk-QP7AQEGZ.js';
-import { SearchableMultiPicker } from '../chunk-LAGO4H4U.js';
-export { SearchableMultiPicker } from '../chunk-LAGO4H4U.js';
+import { SearchableMultiPicker } from '../chunk-H7RLEDKJ.js';
+export { SearchableMultiPicker } from '../chunk-H7RLEDKJ.js';
 import { JsonField } from '../chunk-PGAP2RLS.js';
 export { JsonField } from '../chunk-PGAP2RLS.js';
 import { LiveClock } from '../chunk-37BNG4DT.js';
@@ -48,9 +48,9 @@ import '../chunk-XRHR452N.js';
 import '../chunk-XDR6HC4U.js';
 import { PermissionMatrixEditor } from '../chunk-DNUO63VZ.js';
 export { PermissionMatrixEditor, stickyInsetOf } from '../chunk-DNUO63VZ.js';
-import { PeriodFilter } from '../chunk-6AFQPHLW.js';
-export { PeriodFilter } from '../chunk-6AFQPHLW.js';
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-OB425KVK.js';
+import { PeriodFilter } from '../chunk-UNQ6VAVD.js';
+export { PeriodFilter } from '../chunk-UNQ6VAVD.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-DTCZPXOT.js';
 import { ColumnBoard } from '../chunk-CUAGMSSG.js';
 export { ColumnBoard } from '../chunk-CUAGMSSG.js';
 import { DiffView } from '../chunk-DDX7KJAW.js';
@@ -59,7 +59,7 @@ import { Disclosure } from '../chunk-LONXOEZY.js';
 export { Disclosure } from '../chunk-LONXOEZY.js';
 import { EventCalendar } from '../chunk-KVQXQLAP.js';
 export { EventCalendar, statusToneOf } from '../chunk-KVQXQLAP.js';
-export { FileDropzone, unwrapUploaded } from '../chunk-IWLLM45X.js';
+export { FileDropzone, unwrapUploaded } from '../chunk-CFFSCGDV.js';
 import { ImageLightbox } from '../chunk-JDTVNS3H.js';
 export { ImageLightbox } from '../chunk-JDTVNS3H.js';
 import { InlineEdit } from '../chunk-FXEKHHEA.js';
@@ -67,15 +67,15 @@ export { InlineEdit } from '../chunk-FXEKHHEA.js';
 import '../chunk-O3SD2HS6.js';
 import '../chunk-YK7ZNV2C.js';
 import '../chunk-PN5IJPA5.js';
-import { ApprovalOverridesEditor } from '../chunk-HSHVR6VH.js';
-export { ApprovalOverridesEditor } from '../chunk-HSHVR6VH.js';
+import { ApprovalOverridesEditor } from '../chunk-ZDWCLHIY.js';
+export { ApprovalOverridesEditor } from '../chunk-ZDWCLHIY.js';
 import { TagMultiSelect } from '../chunk-TCHXA35K.js';
 export { TagMultiSelect, pickSeedValues } from '../chunk-TCHXA35K.js';
-import { ApprovalLineEditor } from '../chunk-2TUCSOZR.js';
-export { ApprovalLineEditor } from '../chunk-2TUCSOZR.js';
+import { ApprovalLineEditor } from '../chunk-4SVSS7VO.js';
+export { ApprovalLineEditor } from '../chunk-4SVSS7VO.js';
 import '../chunk-YOLT2TPX.js';
-import '../chunk-ECBSYHZU.js';
-import '../chunk-LKSGAILO.js';
+import '../chunk-I2URQNZZ.js';
+import '../chunk-5JXXCRXA.js';
 import '../chunk-KJDHF6VU.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",