@wipco/sdui 1.9.1 → 1.9.2

package/dist/{chunk-FPEOYSK4.js → chunk-CKZ66V5Q.js}

@@ -1,4 +1,5 @@
-import { ImageLightbox } from './chunk-S4CQTJC6.js';
+import { ImageLightbox } from './chunk-FLBU7AVR.js';
+import { looksLikeImage, fileMimeOf, FileTile, fileBadgeOf, fileDisplayNameOf, safeFileHref, FILE_TILE_WIDTH, IMAGE_EXTENSIONS } from './chunk-EKNEBGNW.js';
 import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-DE7FPWVJ.js';
 import { Spinner, Icon, IconButton } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
@@ -6,91 +7,6 @@ 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;
@@ -421,7 +337,7 @@ function FileDropzoneImpl({
     ) : null,
     items.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--wp-space-2)" }, children: items.map((item) => {
       const fileType = fileTypesRef.current.get(item.id);
-      const asImage = itemLooksLikeImage(item, fileType);
+      const asImage = looksLikeImage(item, fileType);
       const resolved = resolveAsset(item.url, {
         component: "FileDropzone",
         prop: asImage ? "src" : "href",
@@ -449,6 +365,7 @@ function FileDropzoneImpl({
           {
             src: resolved,
             alt: item.name,
+            mimeType: fileMimeOf(item) ?? fileType,
             thumbStyle: {
               width: THUMB_SIZE,
               height: THUMB_SIZE,
@@ -460,75 +377,15 @@ function FileDropzoneImpl({
           }
         );
       } 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",
+        preview = /* @__PURE__ */ jsx(
+          FileTile,
           {
-            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
+            href: sandbox || resolved === null ? null : safeFileHref(resolved),
+            name: fileDisplayNameOf(item),
+            badge: fileBadgeOf(item, fileType),
+            highlighted: hovered
           }
-        ) : /* @__PURE__ */ jsx("span", { title: displayName, "data-file-tile": "", style: tileStyle, children: tileBody });
+        );
       }
       return /* @__PURE__ */ jsxs(
         "div",

package/dist/{chunk-7NQBV77N.js → chunk-EKNEBGNW.js}

@@ -1,9 +1,200 @@
 import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-R2ORCOTG.js';
-import { IconButton } from './chunk-45GIMFRP.js';
-import { useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { useSduiSandbox } from './chunk-DE7FPWVJ.js';
+import { IconButton, Icon } from './chunk-45GIMFRP.js';
+import React, { useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
+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 asMime(value) {
+  return typeof value === "string" && MIME_SHAPE.test(value.trim()) ? value.trim().toLowerCase() : null;
+}
+function urlOf(item) {
+  return typeof item.url === "string" ? item.url : "";
+}
+function nameOf(item) {
+  return typeof item.name === "string" && item.name.trim() !== "" ? item.name : null;
+}
+function fileMimeOf(item) {
+  return asMime(item.mimeType) ?? asMime(item.mime_type) ?? asMime(item.type);
+}
+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 ? asMime(match[1]) : null;
+}
+function looksLikeImage(item, fileType) {
+  const mime = fileMimeOf(item) ?? asMime(fileType) ?? dataUrlMime(urlOf(item));
+  if (mime) return mime.startsWith("image/");
+  const name = nameOf(item);
+  const ext = extensionOfUrl(urlOf(item)) ?? (name ? extensionOfPath(name) : null);
+  if (ext) return IMAGE_EXTENSIONS.has(ext);
+  return true;
+}
+function fileBadgeOf(item, fileType) {
+  const name = nameOf(item);
+  const ext = (name ? extensionOfPath(name) : null) ?? extensionOfUrl(urlOf(item));
+  if (ext) return ext.toUpperCase();
+  const mime = fileMimeOf(item) ?? asMime(fileType);
+  const subtype = mime?.split("/")[1]?.split(/[;+]/)[0];
+  return subtype && /^[a-z0-9]{1,5}$/.test(subtype) ? subtype.toUpperCase() : null;
+}
+function fileDisplayNameOf(item) {
+  const name = nameOf(item);
+  if (name) return 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- ]/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;
+}
+var FILE_TILE_WIDTH = 168;
+var FILE_TILE_HEIGHT = 72;
+function FileTile({
+  href,
+  name,
+  badge,
+  layout = "row",
+  highlighted,
+  style,
+  className
+}) {
+  const [ownHover, setOwnHover] = React.useState(false);
+  const hovered = highlighted ?? ownHover;
+  const tile = layout === "tile";
+  const tileStyle = {
+    display: "flex",
+    flexDirection: tile ? "column" : void 0,
+    alignItems: "center",
+    justifyContent: tile ? "center" : void 0,
+    gap: tile ? 2 : "var(--wp-space-2)",
+    boxSizing: "border-box",
+    width: FILE_TILE_WIDTH,
+    height: FILE_TILE_HEIGHT,
+    padding: tile ? "var(--wp-space-1)" : "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: tile ? "var(--wp-text-muted)" : "var(--wp-text-default)",
+    textDecoration: "none",
+    transition: "var(--wp-transition-surface)",
+    ...style
+  };
+  const mark = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { name: "file-text", size: tile ? 28 : 24 }),
+    badge ? /* @__PURE__ */ jsx("span", { className: "wp-overline", style: { lineHeight: 1 }, children: badge }) : null
+  ] });
+  const body = tile ? mark : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+          flex: "none",
+          minWidth: 28,
+          color: "var(--wp-text-muted)"
+        },
+        children: mark
+      }
+    ),
+    /* @__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: name
+      }
+    )
+  ] });
+  const hoverProps = highlighted === void 0 ? { onMouseEnter: () => setOwnHover(true), onMouseLeave: () => setOwnHover(false) } : {};
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener",
+        title: name,
+        "aria-label": `${name}${badge ? ` (${badge})` : ""} \u2014 \uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30`,
+        "data-file-tile": "",
+        className,
+        style: tileStyle,
+        onClick: (event) => event.stopPropagation(),
+        ...hoverProps,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: name,
+      "data-file-tile": "",
+      className,
+      style: tileStyle,
+      role: tile ? "img" : void 0,
+      "aria-label": tile ? `${name}${badge ? ` (${badge})` : ""}` : void 0,
+      children: body
+    }
+  );
+}
 var MIN_SCALE = 1;
 var MAX_SCALE = 8;
 var BUTTON_ZOOM_STEP = 1.5;
@@ -15,6 +206,10 @@ function clamp(value, min, max) {
 function ImageViewer({ src, alt, open, onClose }) {
   const [view, setView] = useState(INITIAL_VIEW);
   const [dragging, setDragging] = useState(false);
+  const [failedSrc, setFailedSrc] = useState(null);
+  const sandbox = useSduiSandbox();
+  const source = typeof src === "string" ? src : "";
+  const showImage = looksLikeImage({ url: source }) && failedSrc !== source;
   const rootRef = useRef(null);
   const stageRef = useRef(null);
   const imgRef = useRef(null);
@@ -40,7 +235,7 @@ function ImageViewer({ src, alt, open, onClose }) {
   const zoomAt = useCallback(
     (clientX, clientY, factor) => {
       const stage = stageRef.current;
-      if (!stage) return;
+      if (!stage || !imgRef.current) return;
       const prev = viewRef.current;
       const nextScale = clamp(prev.scale * factor, MIN_SCALE, MAX_SCALE);
       if (nextScale === prev.scale) return;
@@ -180,13 +375,14 @@ function ImageViewer({ src, alt, open, onClose }) {
               onPointerMove: onStagePointerMove,
               onPointerUp: endDrag,
               onPointerCancel: endDrag,
-              children: /* @__PURE__ */ jsx(
+              children: showImage ? /* @__PURE__ */ jsx(
                 "img",
                 {
                   ref: imgRef,
                   src,
                   alt: alt ?? "",
                   draggable: false,
+                  onError: () => setFailedSrc(source),
                   style: {
                     maxWidth: "calc(100vw - 96px)",
                     maxHeight: "calc(100vh - 96px)",
@@ -196,6 +392,12 @@ function ImageViewer({ src, alt, open, onClose }) {
                     borderRadius: view.scale === 1 ? "var(--wp-radius-sm)" : 0
                   }
                 }
+              ) : /* @__PURE__ */ jsx(
+                ViewerFileNotice,
+                {
+                  name: alt && alt.trim() !== "" ? alt : fileDisplayNameOf({ url: source }),
+                  href: sandbox ? null : safeFileHref(source)
+                }
               )
             }
           ),
@@ -238,7 +440,7 @@ function ImageViewer({ src, alt, open, onClose }) {
                     icon: "zoom-out",
                     label: "\uCD95\uC18C",
                     size: "sm",
-                    disabled: view.scale <= MIN_SCALE,
+                    disabled: !showImage || view.scale <= MIN_SCALE,
                     onClick: () => zoomAtCenter(1 / BUTTON_ZOOM_STEP)
                   }
                 ),
@@ -248,7 +450,7 @@ function ImageViewer({ src, alt, open, onClose }) {
                     icon: "zoom-in",
                     label: "\uD655\uB300",
                     size: "sm",
-                    disabled: view.scale >= MAX_SCALE,
+                    disabled: !showImage || view.scale >= MAX_SCALE,
                     onClick: () => zoomAtCenter(BUTTON_ZOOM_STEP)
                   }
                 ),
@@ -272,5 +474,40 @@ function ImageViewer({ src, alt, open, onClose }) {
     portalRoot
   );
 }
+function ViewerFileNotice({ name, href }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "var(--wp-space-2)",
+        maxWidth: "min(360px, calc(100vw - 48px))",
+        padding: "var(--wp-space-6)",
+        background: "var(--wp-surface-card)",
+        borderRadius: "var(--wp-radius-lg)",
+        boxShadow: "var(--wp-shadow-xl)",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "file-text", size: 32, style: { color: "var(--wp-text-muted)" } }),
+        /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { color: "var(--wp-text-default)", wordBreak: "break-all" }, children: name }),
+        /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uC774\uBBF8\uC9C0\uB85C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uB294 \uD30C\uC77C\uC785\uB2C8\uB2E4" }),
+        href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noopener",
+            className: "wp-btn wp-btn--secondary wp-btn--sm",
+            children: "\uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30"
+          }
+        ) : null
+      ]
+    }
+  );
+}
 
-export { ImageViewer };
+export { FILE_TILE_WIDTH, FileTile, IMAGE_EXTENSIONS, ImageViewer, fileBadgeOf, fileDisplayNameOf, fileMimeOf, looksLikeImage, safeFileHref };

package/dist/chunk-FLBU7AVR.js

@@ -0,0 +1,130 @@
+import { looksLikeImage, safeFileHref, fileDisplayNameOf, FileTile, fileBadgeOf, ImageViewer } from './chunk-EKNEBGNW.js';
+import { useSduiSandbox } from './chunk-DE7FPWVJ.js';
+import { boxed } from './chunk-3JTBOABA.js';
+import { useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var BOX_KEYS = [
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "borderRadius",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "alignSelf"
+];
+function tileBoxOf(thumbStyle) {
+  if (!thumbStyle || thumbStyle.width === void 0 && thumbStyle.height === void 0) return null;
+  const box = {};
+  for (const key of BOX_KEYS) {
+    if (thumbStyle[key] !== void 0) box[key] = thumbStyle[key];
+  }
+  if (box.width === void 0) box.minWidth ??= 72;
+  if (box.height === void 0) box.minHeight ??= 72;
+  return box;
+}
+function ImageLightboxImpl({
+  src,
+  alt,
+  mimeType,
+  thumbClassName,
+  thumbStyle,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const [failedSrc, setFailedSrc] = useState(null);
+  const sandbox = useSduiSandbox();
+  const source = typeof src === "string" ? src : "";
+  const item = { url: source, mimeType };
+  const asImage = looksLikeImage(item) && failedSrc !== source;
+  const href = sandbox ? null : safeFileHref(source);
+  const openViewer = (event) => {
+    event.stopPropagation();
+    if (asImage) {
+      setOpen(true);
+      return;
+    }
+    if (href && typeof window !== "undefined") window.open(href, "_blank", "noopener");
+  };
+  const overlay = asImage ? /* @__PURE__ */ jsx(
+    ImageViewer,
+    {
+      src,
+      alt,
+      open,
+      onClose: () => setOpen(false)
+    }
+  ) : null;
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: { display: "contents" },
+          onClick: openViewer,
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              openViewer(event);
+            }
+          },
+          children
+        }
+      ),
+      overlay
+    ] });
+  }
+  if (!asImage) {
+    const box = tileBoxOf(thumbStyle);
+    const name = alt && alt.trim() !== "" ? alt : fileDisplayNameOf(item);
+    return /* @__PURE__ */ jsx(
+      FileTile,
+      {
+        href,
+        name,
+        badge: fileBadgeOf(item),
+        layout: box ? "tile" : "row",
+        style: box ?? void 0,
+        className: thumbClassName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: alt ?? "",
+        role: "button",
+        tabIndex: 0,
+        className: thumbClassName,
+        style: { cursor: "zoom-in", ...thumbStyle },
+        onClick: openViewer,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openViewer(event);
+          }
+        },
+        onError: () => setFailedSrc(source)
+      }
+    ),
+    overlay
+  ] });
+}
+var ImageLightbox = boxed(
+  ImageLightboxImpl,
+  "ImageLightbox"
+);
+
+export { ImageLightbox };

package/dist/{chunk-QHSUTI55.js → chunk-GLAG6ZT3.js}

@@ -1,9 +1,10 @@
 import { ellipsisStyle, unwrapRows } from './chunk-HR2U2QGN.js';
 import { includesLooseSearch } from './chunk-QDCP6P3K.js';
+import { useDismiss, usePopoverAnchor, usePortalTo, usePanelPointer, AnchoredPopoverStyles, focusStaysInside, anchorStyle } from './chunk-HNMBEUBO.js';
 import { useSduiAdapter, hostFetchOf } from './chunk-DE7FPWVJ.js';
 import { Icon, Input, Spinner, Button } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
-import { useId, useRef, useMemo, useState, useEffect } from 'react';
+import { useId, useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function endpointSearchFn(endpoint, searchParam, hostFetch) {
@@ -32,6 +33,20 @@ function pickText(option, key) {
 var statusRowStyle = {
   padding: "var(--wp-space-2) var(--wp-space-3)"
 };
+var LIST_MAX_HEIGHT = 280;
+var LIST_ESTIMATE = LIST_MAX_HEIGHT + 10;
+function listPopStyle(anchor) {
+  const base = anchorStyle(anchor);
+  if (!base || !anchor) return base;
+  return { ...base, width: anchor.minWidth, minWidth: 0, maxWidth: "calc(100vw - 16px)", boxSizing: "border-box" };
+}
+var listBoxStyle = {
+  maxHeight: `min(${LIST_MAX_HEIGHT}px, var(--wp-pop-avail, ${LIST_MAX_HEIGHT}px))`,
+  overflowY: "auto",
+  overscrollBehavior: "contain",
+  padding: "var(--wp-space-1)"
+};
+var keepFocusInField = (event) => event.preventDefault();
 function optionRowStyle(active) {
   return {
     display: "block",
@@ -102,6 +117,7 @@ function AutocompleteFieldImpl({
   const [activeIndex, setActiveIndex] = useState(0);
   const [focusPending, setFocusPending] = useState(false);
   const listRef = useRef(null);
+  const popRef = useRef(null);
   const [typedSeq, setTypedSeq] = useState(0);
   const [ownLinked, setOwnLinked] = useState(false);
   const linked = freeText && (selected ?? ownLinked);
@@ -109,6 +125,17 @@ function AutocompleteFieldImpl({
   useEffect(() => {
     if (linked) unlinkSentRef.current = false;
   }, [linked]);
+  const dismiss = useCallback(() => setOpen(false), []);
+  useDismiss(open, hostRef, popRef, dismiss);
+  const anchor = usePopoverAnchor(open, hostRef, popRef, LIST_ESTIMATE);
+  const portal = usePortalTo();
+  const pointer = usePanelPointer(popRef);
+  const anchored = anchor !== null;
+  const handleHostBlur = (event) => {
+    if (!open) return;
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef, pointer)) return;
+    setOpen(false);
+  };
   useEffect(() => {
     if (!open) return;
     const box = listRef.current;
@@ -118,7 +145,7 @@ function AutocompleteFieldImpl({
     const bottom = top + active.offsetHeight;
     if (top < box.scrollTop) box.scrollTop = top;
     else if (bottom > box.scrollTop + box.clientHeight) box.scrollTop = bottom - box.clientHeight;
-  }, [open, activeIndex, listId, results]);
+  }, [open, anchored, activeIndex, listId, results]);
   useEffect(() => {
     if (disabled || cardMode) return;
     const keyword = query.trim();
@@ -162,22 +189,6 @@ function AutocompleteFieldImpl({
       controller.abort();
     };
   }, [query, typedSeq, hasSearch, labelKey, subKey, minChars, debounceMs, disabled, cardMode]);
-  useEffect(() => {
-    if (!open) return;
-    const closeOnOutsideClick = (event) => {
-      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
-      setOpen(false);
-    };
-    const closeOnEscape = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", closeOnOutsideClick);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsideClick);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [open]);
   useEffect(() => {
     if (!focusPending || hasSelection) return;
     hostRef.current?.querySelector("input")?.focus();
@@ -266,7 +277,6 @@ function AutocompleteFieldImpl({
       }
       return;
     }
-    if (event.key === "Escape") setOpen(false);
   };
   const handleKeyDown = (event) => {
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -285,7 +295,6 @@ function AutocompleteFieldImpl({
       if (active) selectOption(active);
       return;
     }
-    if (event.key === "Escape") setOpen(false);
   };
   const staticMatch = useMemo(() => {
     if (!hasSelection) return null;
@@ -297,7 +306,8 @@ function AutocompleteFieldImpl({
   const cardSub = cardOption ? pickText(cardOption, subKey) : "";
   if (freeText) {
     const createText = freeTextCreateLabel(createLabel, freeTextValue);
-    return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", children: [
+    return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", onBlur: handleHostBlur, children: [
+      /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
       /* @__PURE__ */ jsxs("div", { className: "wp-inputwrap wp-inputwrap--lead", children: [
         /* @__PURE__ */ jsx(
           "span",
@@ -325,65 +335,74 @@ function AutocompleteFieldImpl({
           }
         )
       ] }),
-      open ? /* @__PURE__ */ jsx("div", { className: "erp-popover erp-popover--left", style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          id: listId,
-          ref: listRef,
-          role: "listbox",
-          className: "erp-popover__body",
-          style: {
-            maxHeight: 280,
-            overflowY: "auto",
-            overscrollBehavior: "contain",
-            padding: "var(--wp-space-1)"
-          },
-          onMouseDown: (event) => event.preventDefault(),
-          children: [
-            /* @__PURE__ */ jsx(
-              "button",
+      open ? portal(
+        anchor,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: popRef,
+            className: "wp-anchored-pop",
+            style: listPopStyle(anchor),
+            ...pointer.panelProps,
+            onMouseDown: keepFocusInField,
+            children: /* @__PURE__ */ jsxs(
+              "div",
               {
-                id: `${listId}-opt-0`,
-                type: "button",
-                role: "option",
-                "aria-selected": activeIndex === 0,
-                "data-create-row": "",
-                onClick: () => chooseFreeRow(0),
-                onPointerEnter: () => setActiveIndex(0),
-                style: optionRowStyle(activeIndex === 0),
-                children: /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: createText })
+                id: listId,
+                ref: listRef,
+                role: "listbox",
+                className: "erp-popover__body",
+                style: listBoxStyle,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      id: `${listId}-opt-0`,
+                      type: "button",
+                      tabIndex: -1,
+                      role: "option",
+                      "aria-selected": activeIndex === 0,
+                      "data-create-row": "",
+                      onClick: () => chooseFreeRow(0),
+                      onPointerEnter: () => setActiveIndex(0),
+                      style: optionRowStyle(activeIndex === 0),
+                      children: /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: createText })
+                    }
+                  ),
+                  status === "loading" ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: statusRowStyle, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uAC80\uC0C9 \uC911\u2026" }) }) : status === "offline" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 16, style: { color: "var(--wp-text-muted)", flex: "none" } }),
+                    /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" })
+                  ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
+                    /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
+                  ] }) : status === "ready" && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { ...statusRowStyle, color: "var(--wp-text-subtle)" }, children: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9 \uC5C6\uC74C" }) : status === "ready" ? results.map((option, index) => {
+                    const row = index + 1;
+                    const optionSub = pickText(option, subKey);
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        id: `${listId}-opt-${row}`,
+                        type: "button",
+                        tabIndex: -1,
+                        role: "option",
+                        "aria-selected": row === activeIndex,
+                        onClick: () => chooseFreeRow(row),
+                        onPointerEnter: () => setActiveIndex(row),
+                        style: optionRowStyle(row === activeIndex),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
+                          optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
+                        ]
+                      },
+                      `${pickText(option, valueKey)}-${index}`
+                    );
+                  }) : null
+                ]
               }
-            ),
-            status === "loading" ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: statusRowStyle, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uAC80\uC0C9 \uC911\u2026" }) }) : status === "offline" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
-              /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 16, style: { color: "var(--wp-text-muted)", flex: "none" } }),
-              /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" })
-            ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
-              /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
-              /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
-            ] }) : status === "ready" && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { ...statusRowStyle, color: "var(--wp-text-subtle)" }, children: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9 \uC5C6\uC74C" }) : status === "ready" ? results.map((option, index) => {
-              const row = index + 1;
-              const optionSub = pickText(option, subKey);
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  id: `${listId}-opt-${row}`,
-                  type: "button",
-                  role: "option",
-                  "aria-selected": row === activeIndex,
-                  onClick: () => chooseFreeRow(row),
-                  onPointerEnter: () => setActiveIndex(row),
-                  style: optionRowStyle(row === activeIndex),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
-                    optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
-                  ]
-                },
-                `${pickText(option, valueKey)}-${index}`
-              );
-            }) : null
-          ]
-        }
-      ) }) : null
+            )
+          }
+        )
+      ) : null
     ] });
   }
   if (cardMode) {
@@ -420,7 +439,8 @@ function AutocompleteFieldImpl({
     );
   }
   const showActiveDescendant = open && status === "ready" && results.length > 0;
-  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", onBlur: handleHostBlur, children: [
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -441,47 +461,56 @@ function AutocompleteFieldImpl({
         onKeyDown: handleKeyDown
       }
     ),
-    open ? /* @__PURE__ */ jsx("div", { className: "erp-popover erp-popover--left", style: { width: "100%" }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: listId,
-        ref: listRef,
-        role: "listbox",
-        className: "erp-popover__body",
-        style: {
-          maxHeight: 280,
-          overflowY: "auto",
-          overscrollBehavior: "contain",
-          padding: "var(--wp-space-1)"
-        },
-        children: status === "loading" ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: statusRowStyle, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uAC80\uC0C9 \uC911\u2026" }) }) : status === "offline" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
-          /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 16, style: { color: "var(--wp-text-muted)", flex: "none" } }),
-          /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" })
-        ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
-          /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
-          /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
-        ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: statusRowStyle, children: "\uACB0\uACFC \uC5C6\uC74C" }) : results.map((option, index) => {
-          const optionSub = pickText(option, subKey);
-          return /* @__PURE__ */ jsxs(
-            "button",
+    open ? portal(
+      anchor,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popRef,
+          className: "wp-anchored-pop",
+          style: listPopStyle(anchor),
+          ...pointer.panelProps,
+          onMouseDown: keepFocusInField,
+          children: /* @__PURE__ */ jsx(
+            "div",
             {
-              id: `${listId}-opt-${index}`,
-              type: "button",
-              role: "option",
-              "aria-selected": index === activeIndex,
-              onClick: () => selectOption(option),
-              onPointerEnter: () => setActiveIndex(index),
-              style: optionRowStyle(index === activeIndex),
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
-                optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
-              ]
-            },
-            `${pickText(option, valueKey)}-${index}`
-          );
-        })
-      }
-    ) }) : null
+              id: listId,
+              ref: listRef,
+              role: "listbox",
+              className: "erp-popover__body",
+              style: listBoxStyle,
+              children: status === "loading" ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: statusRowStyle, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uAC80\uC0C9 \uC911\u2026" }) }) : status === "offline" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
+                /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 16, style: { color: "var(--wp-text-muted)", flex: "none" } }),
+                /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" })
+              ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
+                /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
+                /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
+              ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: statusRowStyle, children: "\uACB0\uACFC \uC5C6\uC74C" }) : results.map((option, index) => {
+                const optionSub = pickText(option, subKey);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    id: `${listId}-opt-${index}`,
+                    type: "button",
+                    tabIndex: -1,
+                    role: "option",
+                    "aria-selected": index === activeIndex,
+                    onClick: () => selectOption(option),
+                    onPointerEnter: () => setActiveIndex(index),
+                    style: optionRowStyle(index === activeIndex),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
+                      optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
+                    ]
+                  },
+                  `${pickText(option, valueKey)}-${index}`
+                );
+              })
+            }
+          )
+        }
+      )
+    ) : null
   ] });
 }
 var AutocompleteField = boxed(AutocompleteFieldImpl, "AutocompleteField");

package/dist/{chunk-NP4VOH2M.js → chunk-QM2YJS7J.js}

@@ -1,6 +1,6 @@
 import { parseJobPositionRow } from './chunk-XRHR452N.js';
 import { MIN_ZOOM, usePanZoomCanvas } from './chunk-XDR6HC4U.js';
-import { ImageLightbox } from './chunk-S4CQTJC6.js';
+import { ImageLightbox } from './chunk-FLBU7AVR.js';
 import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DE7FPWVJ.js';
 import { useIsTabletDown } from './chunk-TAVKGYH5.js';
 import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-45GIMFRP.js';

package/dist/index.d.ts

@@ -315,6 +315,10 @@ interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElem
      * (그래서 button일 때도 둘 다 붙인다 — 표기가 태그에 따라 달라지지 않게).
      */
     as?: 'button' | 'a' | 'span';
+    /** `as="a"` 링크의 주소·여는 곳·관계 — 나머지 프롭처럼 태그에 그대로 얹힌다(button 에서는 뜻이 없다). */
+    href?: string;
+    target?: string;
+    rel?: string;
     /**
      * 버튼 **안쪽** 내용(아이콘·글자)의 가로 정렬. 기본은 가운데다.
      *
@@ -2572,6 +2576,10 @@ interface ImageViewerProps {
  * **포털이지만 React 이벤트는 트리거 쪽 트리로 버블한다** — 그래서 오버레이 뿌리에서
  * click·pointerdown·dblclick 전파를 끊는다. 이게 없으면 목록에서 연 뷰어의 사진을
  * 눌렀을 때 그 행의 rowClick(상세 이동)이 함께 발동한다.
+ *
+ * **그림이 아니거나 못 불러오면 깨진 그림 대신 안내 상자**(1.9.2) — 문서 아이콘·이름·"새 탭에서 열기".
+ * 판정은 첨부 공용 규칙(file-kind.tsx `looksLikeImage`, 주소만 본다). 트리거들(ImageLightbox·목록 셀)은
+ * 이미지가 아닌 첨부로 뷰어를 열지 않지만, 확장자 없는 PDF 주소처럼 열어 봐야 아는 경우가 남는다.
  */
 declare function ImageViewer({ src, alt, open, onClose }: ImageViewerProps): React__default.ReactPortal | null;
 

package/dist/index.js

@@ -3,8 +3,8 @@ import { useSduiDispatch, SduiDialog, useSduiCan, useSduiRuntime, SduiDirtyRegis
 export { SduiDialog, SduiPermissionProvider, useSduiCan, useSduiDispatch, useSduiRuntime } from './chunk-77OM6OQG.js';
 import { Text, Spacer, Show, Section, Row, PageHead, KeyValueList, Grid, Divider, Col, Actions } from './chunk-PPOQY3V5.js';
 export { Actions, Col, Divider, Grid, KeyValueList, PageHead, Row, Section, Show, Spacer, Text } from './chunk-PPOQY3V5.js';
-import { ImageViewer } from './chunk-7NQBV77N.js';
-export { ImageViewer } from './chunk-7NQBV77N.js';
+import { looksLikeImage, ImageViewer } from './chunk-EKNEBGNW.js';
+export { ImageViewer } from './chunk-EKNEBGNW.js';
 import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-QDCP6P3K.js';
 export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-QDCP6P3K.js';
 import { parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chunk-KMNC3Q4J.js';
@@ -310,7 +310,7 @@ function ImageCellView({
   const [open, setOpen] = useState(false);
   const [failed, setFailed] = useState(false);
   const box = { width, height, borderRadius: "var(--wp-radius-lg)", flex: "none" };
-  if (!url || failed) {
+  if (!url || failed || !looksLikeImage({ url })) {
     return /* @__PURE__ */ jsx(
       "span",
       {

package/dist/meta.js

@@ -503,6 +503,15 @@ var CardMeta = {
     },
     { name: "selected", kind: "boolean", label: "\uC120\uD0DD\uB428", default: false, bindable: true, group: "appearance" },
     { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
+    {
+      name: "aria-label",
+      kind: "string",
+      label: "\uC811\uADFC\uC131 \uB77C\uBCA8",
+      bindable: true,
+      description: '\uCE74\uB4DC \uBFCC\uB9AC(div)\uC5D0 \uADF8\uB300\uB85C \uC5B9\uD78C\uB2E4. \uB204\uB97C \uC218 \uC788\uB294 \uCE74\uB4DC(interactive + onClick \u2192 \uBC84\uD2BC \uC5ED\uD560)\uC758 \uC774\uB984\uC744 \uC81C\uBAA9\uACFC \uB2E4\uB974\uAC8C \uC77D\uD600\uC57C \uD560 \uB54C \u2014 \uC608: \uC81C\uBAA9 "\uB9E4\uC785" \uCE74\uB4DC\uB97C "\uB9E4\uC785 \uC138\uAE08\uACC4\uC0B0\uC11C \uBCF4\uAE30"\uB85C. \uD589\uB9C8\uB2E4 \uB2E4\uB974\uBA74 $calc/$item \uC73C\uB85C \uC5EE\uB294\uB2E4.',
+      group: "content",
+      advanced: true
+    },
     styleProp,
     classNameProp,
     growProp,
@@ -947,6 +956,35 @@ var ButtonMeta = {
       group: "behavior",
       advanced: true
     },
+    {
+      name: "href",
+      kind: "string",
+      label: "\uB9C1\uD06C \uC8FC\uC18C",
+      bindable: true,
+      description: 'as \uAC00 "a" \uC77C \uB54C \uC774\uB3D9\uD560 \uC8FC\uC18C(<a href>\uC5D0 \uADF8\uB300\uB85C \uC5B9\uD78C\uB2E4). \uCCA8\uBD80 \uD30C\uC77C \uC5F4\uAE30\uCC98\uB7FC \uD589\uB9C8\uB2E4 \uB2E4\uB974\uBA74 {"$item":"url"} \uB85C \uC5EE\uB294\uB2E4. javascript: \uAC19\uC740 \uC704\uD5D8\uD55C \uC8FC\uC18C\uB294 \uB80C\uB354\uB7EC\uAC00 \uBC84\uB9B0\uB2E4. button \uC5D0\uC11C\uB294 \uC544\uBB34 \uB370\uB3C4 \uAC00\uC9C0 \uC54A\uB294\uB2E4.',
+      group: "behavior",
+      advanced: true
+    },
+    {
+      name: "target",
+      kind: "enum",
+      label: "\uC5EC\uB294 \uACF3",
+      description: 'as "a" \uB9C1\uD06C\uB97C \uC5B4\uB514\uC11C \uC5F4\uC9C0. \uC0C8 \uD0ED(_blank)\uC774\uBA74 rel \uC5D0 "noopener noreferrer"\uB97C \uAC19\uC774 \uC900\uB2E4.',
+      options: [
+        { value: "_blank", label: "\uC0C8 \uD0ED(_blank)" },
+        { value: "_self", label: "\uAC19\uC740 \uD0ED(_self)" }
+      ],
+      group: "behavior",
+      advanced: true
+    },
+    {
+      name: "rel",
+      kind: "string",
+      label: "\uB9C1\uD06C \uAD00\uACC4(rel)",
+      description: 'as "a" \uB9C1\uD06C\uC758 rel. \uC0C8 \uD0ED\uC73C\uB85C \uC5EC\uB294 \uBC14\uAE65 \uC8FC\uC18C\uB294 "noopener noreferrer" \u2014 \uC5F4\uB9B0 \uCABD\uC774 \uC774 \uCC3D\uC744 \uC870\uC791\uD558\uC9C0 \uBABB\uD558\uAC8C \uD55C\uB2E4.',
+      group: "behavior",
+      advanced: true
+    },
     {
       name: "aria-label",
       kind: "string",
@@ -5534,10 +5572,26 @@ var ImageLightboxMeta = {
   label: "\uC774\uBBF8\uC9C0 \uD655\uB300",
   category: "display",
   icon: "image",
-  description: "\uC378\uB124\uC77C\uC744 \uB204\uB974\uBA74 \uC804\uCCB4 \uD654\uBA74\uC73C\uB85C \uB744\uC6B0\uACE0 \uD655\uB300\xB7\uD68C\uC804\xB7\uB2E4\uC6B4\uB85C\uB4DC\uB97C \uC81C\uACF5\uD55C\uB2E4.",
+  description: "\uC378\uB124\uC77C\uC744 \uB204\uB974\uBA74 \uC804\uCCB4 \uD654\uBA74\uC73C\uB85C \uB744\uC6B0\uACE0 \uD655\uB300\xB7\uD68C\uC804\xB7\uB2E4\uC6B4\uB85C\uB4DC\uB97C \uC81C\uACF5\uD55C\uB2E4. \uC774\uBBF8\uC9C0\uAC00 \uC544\uB2CC \uCCA8\uBD80(PDF \uB4F1)\uB098 \uBABB \uBD88\uB7EC\uC628 \uC8FC\uC18C\uB294 \uC378\uB124\uC77C \uC790\uB9AC\uC5D0 \uD30C\uC77C \uD0C0\uC77C(\uBB38\uC11C \uC544\uC774\uCF58\xB7\uD655\uC7A5\uC790, \uB204\uB974\uBA74 \uC0C8 \uD0ED)\uB85C \uBCF4\uC774\uACE0 \uBDF0\uC5B4\uB97C \uC5F4\uC9C0 \uC54A\uB294\uB2E4.",
   props: [
-    { name: "src", kind: "string", label: "\uC774\uBBF8\uC9C0 \uC8FC\uC18C", required: true, bindable: true, group: "data" },
-    { name: "alt", kind: "string", label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", bindable: true, group: "content" },
+    {
+      name: "src",
+      kind: "string",
+      label: "\uC774\uBBF8\uC9C0 \uC8FC\uC18C",
+      required: true,
+      bindable: true,
+      description: "\uC774\uBBF8\uC9C0\uAC00 \uC544\uB2C8\uBA74(mimeType, \uC5C6\uC73C\uBA74 \uC8FC\uC18C \uD655\uC7A5\uC790\uB85C \uD310\uC815) \uD30C\uC77C \uD0C0\uC77C\uC774 \uB41C\uB2E4. \uB2E8\uC11C\uAC00 \uC5C6\uB294 \uC8FC\uC18C\uB294 \uADF8\uB824 \uBCF4\uACE0 \uC2E4\uD328\uD558\uBA74 \uD0C0\uC77C\uB85C \uB5A8\uC5B4\uC9C4\uB2E4.",
+      group: "data"
+    },
+    { name: "alt", kind: "string", label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", bindable: true, description: "\uD30C\uC77C \uD0C0\uC77C\uC5D0\uC11C\uB294 \uD30C\uC77C \uC774\uB984(title\xB7\uC811\uADFC\uC131 \uC774\uB984)\uC73C\uB85C \uC4F4\uB2E4.", group: "content" },
+    {
+      name: "mimeType",
+      kind: "string",
+      label: "MIME \uD615\uC2DD",
+      bindable: true,
+      description: '\uCCA8\uBD80\uC758 MIME \uD615\uC2DD(\uC608: application/pdf) \u2014 \uC788\uC73C\uBA74 \uC774\uBBF8\uC9C0/\uD30C\uC77C \uD310\uC815\uC758 1\uC21C\uC704\uB2E4. \uC11C\uBC84 \uCCA8\uBD80 \uD589\uC774\uBA74 {"$item":"mime_type"} \uC744 \uBB36\uB294\uB2E4. \uC0DD\uB7B5\uD558\uBA74 \uC8FC\uC18C \uD655\uC7A5\uC790\uB85C \uD310\uC815\uD55C\uB2E4.',
+      group: "data"
+    },
     {
       name: "thumbClassName",
       kind: "string",

package/dist/widgets/AutocompleteField.js

@@ -1,4 +1,4 @@
-export { AutocompleteField, endpointSearchFn, freeTextCreateLabel, toAutocompleteOptions } from '../chunk-QHSUTI55.js';
+export { AutocompleteField, endpointSearchFn, freeTextCreateLabel, toAutocompleteOptions } from '../chunk-GLAG6ZT3.js';
 import '../chunk-HR2U2QGN.js';
 import '../chunk-QDCP6P3K.js';
 import '../chunk-KMNC3Q4J.js';

package/dist/widgets/FileDropzone.d.ts

@@ -9,6 +9,7 @@ type FileDropzoneItem = {
      * MIME 형식(예: `application/pdf`) — 있으면 이미지/파일 타일 판정의 1순위다.
      * 서버 행을 그대로 채우는 앱은 snake_case(`mime_type`)로 주고, File 같은 객체는
      * `type`으로 준다 — 셋 다 읽는다(`type`은 `x/y` 모양일 때만 MIME 으로 본다).
+     * 판정 규칙은 공용 {@link looksLikeImage}(file-kind.tsx) — 상세 사진 격자·원본 보기·목록 사진 칸과 같다.
      */
     mimeType?: string;
     mime_type?: string;

package/dist/widgets/FileDropzone.js

@@ -1,6 +1,6 @@
-export { FileDropzone, unwrapUploaded } from '../chunk-FPEOYSK4.js';
-import '../chunk-S4CQTJC6.js';
-import '../chunk-7NQBV77N.js';
+export { FileDropzone, unwrapUploaded } from '../chunk-CKZ66V5Q.js';
+import '../chunk-FLBU7AVR.js';
+import '../chunk-EKNEBGNW.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';
 import '../chunk-DE7FPWVJ.js';

package/dist/widgets/ImageLightbox.d.ts

@@ -5,6 +5,11 @@ interface ImageLightboxProps {
     /** 원본 이미지 URL */
     src: string;
     alt?: string;
+    /**
+     * 첨부의 MIME 형식(예: `application/pdf`) — 있으면 이미지/파일 판정의 1순위다(서버 첨부 행의
+     * `mime_type` 을 그대로 묶는다). 없으면 `src` 확장자로 판정하고, 단서가 없으면 이미지로 그린다.
+     */
+    mimeType?: string;
     /** 기본 썸네일 <img>에 적용할 클래스 */
     thumbClassName?: string;
     /** 기본 썸네일 <img>에 적용할 스타일 */

package/dist/widgets/ImageLightbox.js

@@ -1,7 +1,8 @@
-export { ImageLightbox } from '../chunk-S4CQTJC6.js';
-import '../chunk-7NQBV77N.js';
+export { ImageLightbox } from '../chunk-FLBU7AVR.js';
+import '../chunk-EKNEBGNW.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';
+import '../chunk-DE7FPWVJ.js';
 import '../chunk-TAVKGYH5.js';
 import '../chunk-45GIMFRP.js';
 import '../chunk-3JTBOABA.js';

package/dist/widgets/OrgChartBoard.js

@@ -1,8 +1,8 @@
-export { OrgChartBoard, buildFlowLayout, buildModel, compareMembers, fitCanvasView, fitFlowView, flowToggleIds, isUnassignedGroup, leadershipEmployees, orgVocabOf, pickEmployees, pickGroups, pickPositions } from '../chunk-NP4VOH2M.js';
+export { OrgChartBoard, buildFlowLayout, buildModel, compareMembers, fitCanvasView, fitFlowView, flowToggleIds, isUnassignedGroup, leadershipEmployees, orgVocabOf, pickEmployees, pickGroups, pickPositions } from '../chunk-QM2YJS7J.js';
 import '../chunk-XRHR452N.js';
 import '../chunk-XDR6HC4U.js';
-import '../chunk-S4CQTJC6.js';
-import '../chunk-7NQBV77N.js';
+import '../chunk-FLBU7AVR.js';
+import '../chunk-EKNEBGNW.js';
 import '../chunk-R2ORCOTG.js';
 import '../chunk-RIZRM7OO.js';
 import '../chunk-DE7FPWVJ.js';

package/dist/widgets/index.js

@@ -42,15 +42,15 @@ import { OptionValueFields } from '../chunk-5N4ESLPX.js';
 export { OptionValueFields } from '../chunk-5N4ESLPX.js';
 import { OrgChart } from '../chunk-LRDGT4T4.js';
 export { OrgChart } from '../chunk-LRDGT4T4.js';
-import { OrgChartBoard } from '../chunk-NP4VOH2M.js';
-export { OrgChartBoard } from '../chunk-NP4VOH2M.js';
+import { OrgChartBoard } from '../chunk-QM2YJS7J.js';
+export { OrgChartBoard } from '../chunk-QM2YJS7J.js';
 import '../chunk-XRHR452N.js';
 import '../chunk-XDR6HC4U.js';
 import { PermissionMatrixEditor } from '../chunk-BOL536MN.js';
 export { PermissionMatrixEditor, stickyInsetOf } from '../chunk-BOL536MN.js';
 import { PeriodFilter } from '../chunk-FVONSLW3.js';
 export { PeriodFilter } from '../chunk-FVONSLW3.js';
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-QHSUTI55.js';
+export { AutocompleteField, endpointSearchFn, toAutocompleteOptions } from '../chunk-GLAG6ZT3.js';
 import { ColumnBoard } from '../chunk-Q6V7E2H5.js';
 export { ColumnBoard } from '../chunk-Q6V7E2H5.js';
 import { DiffView } from '../chunk-QZMMW3JC.js';
@@ -59,14 +59,14 @@ import { Disclosure } from '../chunk-BBA7KKG4.js';
 export { Disclosure } from '../chunk-BBA7KKG4.js';
 import { EventCalendar } from '../chunk-ZAESY6NX.js';
 export { EventCalendar, statusToneOf } from '../chunk-ZAESY6NX.js';
-export { FileDropzone, unwrapUploaded } from '../chunk-FPEOYSK4.js';
-import { ImageLightbox } from '../chunk-S4CQTJC6.js';
-export { ImageLightbox } from '../chunk-S4CQTJC6.js';
+export { FileDropzone, unwrapUploaded } from '../chunk-CKZ66V5Q.js';
+import { ImageLightbox } from '../chunk-FLBU7AVR.js';
+export { ImageLightbox } from '../chunk-FLBU7AVR.js';
 import { InlineEdit } from '../chunk-GAABHPGR.js';
 export { InlineEdit } from '../chunk-GAABHPGR.js';
 import '../chunk-77OM6OQG.js';
 import '../chunk-PPOQY3V5.js';
-import '../chunk-7NQBV77N.js';
+import '../chunk-EKNEBGNW.js';
 import { ApprovalOverridesEditor } from '../chunk-MBROAHA6.js';
 export { ApprovalOverridesEditor } from '../chunk-MBROAHA6.js';
 import { TagMultiSelect } from '../chunk-5DLUGN5M.js';

package/package.json

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

package/dist/chunk-S4CQTJC6.js

@@ -1,73 +0,0 @@
-import { ImageViewer } from './chunk-7NQBV77N.js';
-import { boxed } from './chunk-3JTBOABA.js';
-import { useState } from 'react';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function ImageLightboxImpl({
-  src,
-  alt,
-  thumbClassName,
-  thumbStyle,
-  children
-}) {
-  const [open, setOpen] = useState(false);
-  const openViewer = (event) => {
-    event.stopPropagation();
-    setOpen(true);
-  };
-  const overlay = /* @__PURE__ */ jsx(
-    ImageViewer,
-    {
-      src,
-      alt,
-      open,
-      onClose: () => setOpen(false)
-    }
-  );
-  if (children) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: { display: "contents" },
-          onClick: openViewer,
-          onKeyDown: (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault();
-              openViewer(event);
-            }
-          },
-          children
-        }
-      ),
-      overlay
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src,
-        alt: alt ?? "",
-        role: "button",
-        tabIndex: 0,
-        className: thumbClassName,
-        style: { cursor: "zoom-in", ...thumbStyle },
-        onClick: openViewer,
-        onKeyDown: (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            openViewer(event);
-          }
-        }
-      }
-    ),
-    overlay
-  ] });
-}
-var ImageLightbox = boxed(
-  ImageLightboxImpl,
-  "ImageLightbox"
-);
-
-export { ImageLightbox };