@wipco/sdui 1.9.0 → 1.9.2

package/dist/{chunk-SMVPMDWO.js → chunk-35GI6LM5.js}

@@ -1,6 +1,6 @@
-import { includesLooseSearch } from './chunk-MIFCOTLQ.js';
+import { includesLooseSearch } from './chunk-QDCP6P3K.js';
 import { OverlayLayer } from './chunk-R2ORCOTG.js';
-import { Button, Dialog, Input, Tag, Checkbox } from './chunk-NKRZVRGH.js';
+import { Button, Dialog, Input, Tag, Checkbox } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo, useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-J2SPMIMO.js → chunk-3L4EXK3X.js}

@@ -1,5 +1,5 @@
-import { Disclosure } from './chunk-UYOQ3SEG.js';
-import { Icon } from './chunk-NKRZVRGH.js';
+import { Disclosure } from './chunk-BBA7KKG4.js';
+import { Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-VSCAW4LS.js → chunk-3XUHKSJM.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-NKRZVRGH.js';
+import { Button } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useEffect, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-NKRZVRGH.js → chunk-45GIMFRP.js}

@@ -1282,8 +1282,10 @@ function sanitizeNumberText(text) {
   let dot = false;
   for (const raw of text) {
     const ch = halfWidth(raw);
-    if (ch >= "0" && ch <= "9") out += ch;
-    else if (ch === "." && !dot) {
+    if (ch >= "0" && ch <= "9") {
+      if (!dot && (out === "0" || out === "-0")) out = out.slice(0, -1);
+      out += ch;
+    } else if (ch === "." && !dot) {
       dot = true;
       out += ch;
     } else if (ch === "-" && out === "") out += ch;

package/dist/{chunk-3M64LBYZ.js → chunk-5DLUGN5M.js}

@@ -1,5 +1,5 @@
-import { useSduiAdapter, hostFetchOf } from './chunk-RMYGRGKS.js';
-import { Badge, Tag } from './chunk-NKRZVRGH.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-DE7FPWVJ.js';
+import { Badge, Tag } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useEffect, useMemo, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-55524GIB.js → chunk-5N4ESLPX.js}

@@ -1,5 +1,5 @@
-import { Text } from './chunk-CZMSQ3B3.js';
-import { Switch, Field, Select, Input } from './chunk-NKRZVRGH.js';
+import { Text } from './chunk-PPOQY3V5.js';
+import { Switch, Field, Select, Input } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-RT2I2U45.js → chunk-77OM6OQG.js}

@@ -1,5 +1,5 @@
 import { OverlayLayer } from './chunk-R2ORCOTG.js';
-import { Dialog, Button, warnOnce } from './chunk-NKRZVRGH.js';
+import { Dialog, Button, warnOnce } from './chunk-45GIMFRP.js';
 import { createContext, useContext, useMemo, useRef, useCallback, useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-UYOQ3SEG.js → chunk-BBA7KKG4.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-NKRZVRGH.js';
+import { Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-NHKQZDBX.js → chunk-BOL536MN.js}

@@ -1,7 +1,7 @@
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-RMYGRGKS.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DE7FPWVJ.js';
 import { MOBILE_MEDIA_QUERY } from './chunk-TAVKGYH5.js';
-import { Icon, Badge, Checkbox, Select, Button } from './chunk-NKRZVRGH.js';
+import { Icon, Badge, Checkbox, Select, Button } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-TYPNHH3I.js → chunk-BT5P3DW6.js}

@@ -1,4 +1,4 @@
-import { Textarea, Icon } from './chunk-NKRZVRGH.js';
+import { Textarea, Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-ZHWBTWHS.js → chunk-CBY6ACMR.js}

@@ -1,5 +1,5 @@
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-RMYGRGKS.js';
-import { Spinner, Badge, Icon } from './chunk-NKRZVRGH.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DE7FPWVJ.js';
+import { Spinner, Badge, Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

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

@@ -1,96 +1,12 @@
-import { ImageLightbox } from './chunk-5NDYDUMJ.js';
-import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-RMYGRGKS.js';
-import { Spinner, Icon, IconButton } from './chunk-NKRZVRGH.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';
 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-LK7MHTJO.js → chunk-CRSNVEUE.js}

@@ -1,5 +1,5 @@
-import { buildCascadingTree } from './chunk-MIFCOTLQ.js';
-import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-NKRZVRGH.js';
+import { buildCascadingTree } from './chunk-QDCP6P3K.js';
+import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-RMYGRGKS.js → chunk-DE7FPWVJ.js}

@@ -1,5 +1,5 @@
 import { DEV } from './chunk-TAVKGYH5.js';
-import { warnOnce } from './chunk-NKRZVRGH.js';
+import { warnOnce } from './chunk-45GIMFRP.js';
 import { createContext, useContext } from 'react';
 
 function isSafeNavigationTarget(to) {

package/dist/{chunk-SANCYRIQ.js → chunk-EH5QJJQE.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-NKRZVRGH.js';
+import { Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-3LPLTD66.js → chunk-EKNEBGNW.js}

@@ -1,9 +1,200 @@
 import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-R2ORCOTG.js';
-import { IconButton } from './chunk-NKRZVRGH.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 };