@wipco/sdui 1.5.0 → 1.6.1

package/dist/{chunk-XGFDY43I.js → chunk-CUFGH3LB.js}

@@ -1,5 +1,5 @@
-import { Icon, Badge, Tooltip } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Icon, Badge, Tooltip } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -25,6 +25,14 @@ var STATUS_META = {
     border: "var(--wp-status-neutral-border)",
     fg: "var(--wp-status-neutral-fg)"
   },
+  // 취소 — 신청자가 거둬들인 문서의 단계. 반려(빨강 x)와 달리 회색이라 판정이 아닌 종료로 읽힌다.
+  cancelled: {
+    icon: "circle-x",
+    label: "\uCDE8\uC18C",
+    bg: "var(--wp-status-neutral-bg)",
+    border: "var(--wp-status-neutral-border)",
+    fg: "var(--wp-status-neutral-fg)"
+  },
   current: {
     icon: "circle-dot",
     label: "\uC9C4\uD589 \uC911",
@@ -40,6 +48,9 @@ var STATUS_META = {
     fg: "var(--wp-text-muted)"
   }
 };
+function normalizeStepStatus(status) {
+  return status && Object.prototype.hasOwnProperty.call(STATUS_META, status) ? status : "pending";
+}
 function stepTitle(step, index, typeLabels) {
   const name = step.name?.trim();
   if (name) return name;
@@ -84,6 +95,15 @@ var nodeTextStyle = {
   whiteSpace: "nowrap",
   textAlign: "center"
 };
+var noticeNodeStyle = { ...nodeStyle, maxWidth: 240 };
+var noticeTextStyle = {
+  display: "block",
+  maxWidth: "100%",
+  textAlign: "center",
+  whiteSpace: "normal",
+  wordBreak: "keep-all",
+  overflowWrap: "anywhere"
+};
 var connectorStyle = {
   flex: "none",
   width: "var(--wp-space-6)",
@@ -93,7 +113,7 @@ var connectorStyle = {
   marginTop: "calc(var(--wp-space-1) + 16px)"
 };
 function stepTooltip(step, index, typeLabels) {
-  const meta = STATUS_META[step.status ?? "pending"];
+  const meta = STATUS_META[normalizeStepStatus(step.status)];
   const lines = [`${stepTitle(step, index, typeLabels)} \u2014 ${meta.label}`];
   if (step.approver) lines.push(`\uCC98\uB9AC\uC790: ${step.approver}`);
   if (step.processedAt) lines.push(`\uCC98\uB9AC \uC77C\uC2DC: ${formatDateTime(step.processedAt)}`);
@@ -102,14 +122,53 @@ function stepTooltip(step, index, typeLabels) {
   }
   return /* @__PURE__ */ jsx(Fragment, { children: lines.map((line) => /* @__PURE__ */ jsx("span", { style: { display: "block" }, children: line }, line)) });
 }
+var OUTCOME_NOTICE = {
+  approved: {
+    tone: "success",
+    icon: "check-check",
+    badge: "\uC790\uB3D9 \uC2B9\uC778",
+    text: "\uACB0\uC7AC \uB2E8\uACC4 \uC5C6\uC774 \uC790\uB3D9 \uC2B9\uC778\uB418\uC5C8\uC2B5\uB2C8\uB2E4"
+  },
+  pending: {
+    tone: "success",
+    icon: "check-check",
+    badge: "\uC790\uB3D9 \uC2B9\uC778",
+    text: "\uACB0\uC7AC \uB2E8\uACC4\uAC00 \uC5C6\uC5B4 \uC62C\uB9AC\uB294 \uC989\uC2DC \uC2B9\uC778\uB429\uB2C8\uB2E4"
+  },
+  rejected: { tone: "danger", icon: "x", badge: "\uBC18\uB824", text: "\uACB0\uC7AC \uB2E8\uACC4 \uC5C6\uC774 \uBC18\uB824\uB418\uC5C8\uC2B5\uB2C8\uB2E4" },
+  cancelled: { tone: "neutral", icon: "circle-x", badge: "\uCDE8\uC18C", text: "\uACB0\uC7AC\uAC00 \uCDE8\uC18C\uB418\uC5C8\uC2B5\uB2C8\uB2E4" }
+};
+var OUTCOME_STATUS = {
+  approved: "approved",
+  pending: "pending",
+  rejected: "rejected",
+  cancelled: "cancelled"
+};
+function normalizeOutcome(outcome) {
+  return outcome && Object.prototype.hasOwnProperty.call(OUTCOME_NOTICE, outcome) ? outcome : "approved";
+}
 function ApprovalStepperImpl({
   requester,
   steps,
+  decidedBy,
+  decidedAt,
+  outcome,
   onStepClick,
   typeLabels
 }) {
-  const safeSteps = steps ?? [];
   const clickable = typeof onStepClick === "function";
+  const result = normalizeOutcome(outcome);
+  const decider = decidedBy?.trim();
+  if (steps === null || steps === void 0) return null;
+  const safeSteps = steps.length > 0 ? steps : decider ? [
+    {
+      id: "__decision",
+      name: "\uACB0\uC7AC",
+      status: OUTCOME_STATUS[result],
+      approver: decider,
+      processedAt: decidedAt?.trim() || void 0
+    }
+  ] : [];
   const requesterNode = requester ? /* @__PURE__ */ jsxs("div", { style: nodeStyle, children: [
     /* @__PURE__ */ jsx(
       "span",
@@ -127,17 +186,27 @@ function ApprovalStepperImpl({
     /* @__PURE__ */ jsx("span", { className: "wp-caption", style: nodeTextStyle, children: requester.sub?.trim() || "\uC2E0\uCCAD\uC790" })
   ] }) : null;
   if (safeSteps.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { overflowX: "auto", paddingBottom: "var(--wp-space-1)" }, children: [
-      requesterNode,
-      requesterNode ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: connectorStyle }) : null,
-      /* @__PURE__ */ jsxs("div", { style: nodeStyle, children: [
-        /* @__PURE__ */ jsxs(Badge, { tone: "success", size: "lg", children: [
-          /* @__PURE__ */ jsx(Icon, { name: "check-check", size: 14, style: { marginRight: "var(--wp-space-1)" } }),
-          "\uC790\uB3D9 \uC2B9\uC778"
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { textAlign: "center", whiteSpace: "nowrap" }, children: "\uACB0\uC7AC \uB2E8\uACC4\uAC00 \uC5C6\uC5B4 \uC790\uB3D9\uC73C\uB85C \uC2B9\uC778\uB429\uB2C8\uB2E4" })
-      ] })
-    ] });
+    const notice = OUTCOME_NOTICE[result];
+    const when = decidedAt?.trim();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "wp-row",
+        style: { alignItems: "flex-start", overflowX: "auto", paddingBottom: "var(--wp-space-1)" },
+        children: [
+          requesterNode,
+          requesterNode ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: connectorStyle }) : null,
+          /* @__PURE__ */ jsxs("div", { style: noticeNodeStyle, "data-outcome": result, children: [
+            /* @__PURE__ */ jsxs(Badge, { tone: notice.tone, size: "lg", children: [
+              /* @__PURE__ */ jsx(Icon, { name: notice.icon, size: 14, style: { marginRight: "var(--wp-space-1)" } }),
+              notice.badge
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "wp-caption", style: noticeTextStyle, children: notice.text }),
+            when ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { ...noticeTextStyle, color: "var(--wp-text-muted)" }, children: formatDateTime(when) }) : null
+          ] })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     "div",
@@ -154,8 +223,9 @@ function ApprovalStepperImpl({
       children: [
         requesterNode,
         safeSteps.map((step, index) => {
-          const status = step.status ?? "pending";
+          const status = normalizeStepStatus(step.status);
           const meta = STATUS_META[status];
+          const muted = status === "skipped" || status === "cancelled";
           const body = /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { style: circleStyle(meta.bg, meta.border, meta.fg, status === "current"), children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: 16 }) }),
             /* @__PURE__ */ jsx(
@@ -164,7 +234,7 @@ function ApprovalStepperImpl({
                 className: "wp-body-sm",
                 style: {
                   ...nodeTextStyle,
-                  color: status === "skipped" ? "var(--wp-text-muted)" : "var(--wp-text-strong)"
+                  color: muted ? "var(--wp-text-muted)" : "var(--wp-text-strong)"
                 },
                 children: stepTitle(step, index, typeLabels)
               }
@@ -208,4 +278,4 @@ function ApprovalStepperImpl({
 }
 var ApprovalStepper = boxed(ApprovalStepperImpl, "ApprovalStepper");
 
-export { ApprovalStepper };
+export { ApprovalStepper, normalizeStepStatus };

package/dist/{chunk-A6LAIGUS.js → chunk-EGFDELSF.js}

@@ -1,6 +1,6 @@
-import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-MMIGOPO5.js';
-import { IconButton, Badge } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-CSZCWBOE.js';
+import { IconButton, Badge } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -112,6 +112,7 @@ function OrgChartImpl({
     setView,
     dragging,
     isFullscreen,
+    pseudoFullscreen,
     viewportCenter,
     zoomAt,
     toggleFullscreen,
@@ -161,7 +162,9 @@ function OrgChartImpl({
         cursor: dragging ? "grabbing" : "grab",
         touchAction: "none",
         overscrollBehavior: "contain",
-        userSelect: "none"
+        userSelect: "none",
+        // 요소 전체화면이 없는 브라우저(iPhone Safari)의 대체 — 화면을 덮는 고정 배치
+        ...pseudoFullscreen ? { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)", height: "100dvh", borderRadius: 0 } : null
       },
       children: [
         /* @__PURE__ */ jsxs(

package/dist/{chunk-JIV4YHCZ.js → chunk-EJIWOD7W.js}

@@ -1,4 +1,4 @@
-import { boxed } from './chunk-5WW4MBRO.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var resolveColor = (color, index) => {

package/dist/{chunk-CXW6KT6X.js → chunk-ESAFQXEU.js}

@@ -1,6 +1,6 @@
-import { Text } from './chunk-WPSK2CB5.js';
-import { Field, Input, Select, IconButton, Button } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Text } from './chunk-UC725BGW.js';
+import { Field, Input, Select, IconButton, Button } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-N5RKM6IC.js → chunk-EUSC5NMZ.js}

@@ -1,7 +1,7 @@
-import { ImageLightbox } from './chunk-VY7MVBSE.js';
-import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-KO6OEY3G.js';
-import { Spinner, Icon, IconButton } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { ImageLightbox } from './chunk-3PT5OBOU.js';
+import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-JHFA5RDN.js';
+import { Spinner, Icon, IconButton } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-RWSH2MBU.js → chunk-FP32LNFK.js}

@@ -1,25 +1,31 @@
+import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-BITS7UJY.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-XQPTSEJC.js';
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useIsMobile } from './chunk-GSM664TX.js';
+import { Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ANCHOR_GAP = 8;
 var VIEWPORT_EDGE = 8;
-function anchorTo(host, height) {
-  if (!host || typeof window === "undefined") return null;
-  const rect = host.getBoundingClientRect();
-  const below = window.innerHeight - rect.bottom;
+function anchorTo(rect, viewportHeight, height) {
+  const below = viewportHeight - rect.bottom;
   const up = below < height && rect.top > below;
+  const room = (up ? rect.top : below) - ANCHOR_GAP - VIEWPORT_EDGE;
   return {
     left: rect.left,
     top: up ? void 0 : rect.bottom + ANCHOR_GAP,
-    bottom: up ? window.innerHeight - rect.top + ANCHOR_GAP : void 0,
-    minWidth: rect.width
+    bottom: up ? viewportHeight - rect.top + ANCHOR_GAP : void 0,
+    minWidth: rect.width,
+    available: Math.max(MIN_AVAILABLE, Math.floor(room))
   };
 }
+var MIN_AVAILABLE = 120;
+function anchorToHost(host, height) {
+  if (!host || typeof window === "undefined") return null;
+  return anchorTo(host.getBoundingClientRect(), window.innerHeight, height);
+}
 function usePopoverAnchor(open, hostRef, popRef, height) {
   const [anchor, setAnchor] = useState(null);
   useLayoutEffect(() => {
@@ -27,7 +33,7 @@ function usePopoverAnchor(open, hostRef, popRef, height) {
       setAnchor(null);
       return;
     }
-    const place = () => setAnchor(anchorTo(hostRef.current, height));
+    const place = () => setAnchor(anchorToHost(hostRef.current, height));
     place();
     window.addEventListener("scroll", place, true);
     window.addEventListener("resize", place);
@@ -57,7 +63,14 @@ var ANCHORED_POP_CSS = `
 `;
 function anchorStyle(anchor) {
   if (!anchor) return void 0;
-  return { left: anchor.left, top: anchor.top, bottom: anchor.bottom, minWidth: anchor.minWidth };
+  const style = {
+    left: anchor.left,
+    top: anchor.top,
+    bottom: anchor.bottom,
+    minWidth: anchor.minWidth
+  };
+  if (anchor.available !== void 0) style["--wp-pop-avail"] = `${anchor.available}px`;
+  return style;
 }
 function usePortalTo() {
   const container = React.useContext(OverlayContainerContext);
@@ -279,7 +292,7 @@ function TimePickerImpl({
 var TP_CSS = `
 .wp-tp-host{position:relative}
 .wp-tp-input{padding-right:6px;min-width:calc(5ch + 36px)}
-.wp-tp-pop{padding:var(--wp-space-1);max-height:260px;overflow-y:auto;overscroll-behavior:contain}
+.wp-tp-pop{padding:var(--wp-space-1);max-height:min(260px,var(--wp-pop-avail,260px));overflow-y:auto;overscroll-behavior:contain}
 .wp-tp-opt{display:block;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-family:var(--wp-font-mono);font-size:12.5px;color:var(--wp-text-default);text-align:left;cursor:pointer}
 .wp-tp-opt:hover{background:var(--wp-surface-hover)}
 .wp-tp-opt:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-2px}
@@ -360,6 +373,33 @@ function splitDateTime(value) {
   const [date = "", time = ""] = value.split(/[T ]/, 2);
   return [date, time.slice(0, 5)];
 }
+var ZONED_RE = /^(\d{4}-\d{2}-\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?\s*(Z|[+-]\d{2}(?::?\d{2})?)$/i;
+function isZonedDateTime(value) {
+  return typeof value === "string" && ZONED_RE.test(value.trim());
+}
+function toLocalWallClock(value) {
+  const match = ZONED_RE.exec(value.trim());
+  if (!match) return value;
+  const [, date, hh, mm, ss = "00", zone] = match;
+  const offset = zone.toUpperCase() === "Z" ? "Z" : `${zone.slice(0, 3)}:${zone.length > 3 ? zone.slice(-2) : "00"}`;
+  const instant = /* @__PURE__ */ new Date(`${date}T${hh}:${mm}:${ss}${offset}`);
+  if (Number.isNaN(instant.getTime())) return value;
+  const h = String(instant.getHours()).padStart(2, "0");
+  const m = String(instant.getMinutes()).padStart(2, "0");
+  return `${formatYmd(instant)}T${h}:${m}`;
+}
+function withLocalOffset(wall) {
+  const [date, time] = splitDateTime(wall);
+  const day = parseYmd(date);
+  const minuteOfDay = parseHm(time);
+  if (!day || minuteOfDay === void 0) return wall;
+  const local = new Date(day.getFullYear(), day.getMonth(), day.getDate(), Math.floor(minuteOfDay / 60), minuteOfDay % 60, 0, 0);
+  const minutes = -local.getTimezoneOffset();
+  const sign = minutes >= 0 ? "+" : "-";
+  const abs = Math.abs(minutes);
+  const zone = `${sign}${String(Math.floor(abs / 60)).padStart(2, "0")}:${String(abs % 60).padStart(2, "0")}`;
+  return `${date}T${time}:00${zone}`;
+}
 function toFieldText(value, withTime) {
   if (!withTime) return splitDateTime(value)[0];
   const [date, time] = splitDateTime(value);
@@ -617,6 +657,7 @@ function DatePickerImpl({
   disabled = false,
   size = "md",
   withTime = false,
+  zoned,
   locale
 }) {
   const loc = resolveLocale(locale, KO_LOCALE.calendarLabel);
@@ -626,7 +667,10 @@ function DatePickerImpl({
   const popRef = useRef(null);
   const inputRef = useRef(null);
   const isControlled = value !== void 0;
-  const currentValue = (isControlled ? value : innerValue) ?? "";
+  const rawValue = (isControlled ? value : innerValue) ?? "";
+  const currentValue = useMemo(() => toLocalWallClock(String(rawValue)), [rawValue]);
+  const sawZone = useRef(false);
+  if (isZonedDateTime(rawValue)) sawZone.current = true;
   const fieldText = useMemo(() => toFieldText(currentValue, withTime), [currentValue, withTime]);
   const [text, setText] = useState(fieldText);
   useEffect(() => {
@@ -645,7 +689,9 @@ function DatePickerImpl({
   const anchor = usePopoverAnchor(open, hostRef, popRef, CALENDAR_HEIGHT);
   const portal = usePortalTo();
   const isInvalid = Boolean(invalid);
-  const commit = (next) => {
+  const commit = (wall) => {
+    const emitZone = withTime && wall !== "" && (zoned ?? sawZone.current);
+    const next = emitZone ? withLocalOffset(wall) : wall;
     if (!isControlled) setInnerValue(next);
     onChange?.(next);
   };
@@ -744,6 +790,10 @@ function DatePickerImpl({
     )
   ] });
 }
+function rangeEndText(value) {
+  if (typeof value !== "string") return "";
+  return isZonedDateTime(value) ? toLocalWallClock(value).slice(0, 10) : value;
+}
 function DateRangePickerImpl({
   value,
   onChange,
@@ -763,8 +813,10 @@ function DateRangePickerImpl({
   const toRef = useRef(null);
   const isControlled = value !== void 0;
   const currentRange = (isControlled ? value : innerRange) ?? {};
-  const fromValue = currentRange.from ?? "";
-  const toValue = currentRange.to ?? "";
+  const fromValue = rangeEndText(currentRange.from);
+  const toValue = rangeEndText(currentRange.to);
+  const isMobile = useIsMobile();
+  const monthCount = isMobile ? 1 : 2;
   const [fromText, setFromText] = useState(fromValue);
   const [toText, setToText] = useState(toValue);
   useEffect(() => {
@@ -915,14 +967,14 @@ function DateRangePickerImpl({
         "div",
         {
           ref: popRef,
-          className: "wp-anchored-pop wp-dp-pop wp-dp-pop--wide",
+          className: monthCount > 1 ? "wp-anchored-pop wp-dp-pop wp-dp-pop--wide" : "wp-anchored-pop wp-dp-pop",
           style: anchorStyle(anchor),
           role: "dialog",
           "aria-label": loc.calendarLabel,
           children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
             Calendar,
             {
-              monthCount: 2,
+              monthCount,
               minDate,
               maxDate,
               focusDate,
@@ -952,7 +1004,9 @@ function DateRangePickerImpl({
 var DP_CSS = `
 .wp-dp-host{position:relative}
 .wp-dp-pop--wide{max-width:min(92vw,720px)}
-.wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
+/* \uC0C1\uD55C\uC740 \uD654\uBA74 60% \uC640 **\uD3B8 \uCABD\uC5D0 \uB0A8\uC740 \uB192\uC774**(anchored-popover \uAC00 --wp-pop-avail \uB85C \uC2E3\uB294\uB2E4) \uC911
+   \uC791\uC740 \uCABD \u2014 \uCE78\uC774 \uD654\uBA74 \uC544\uB798\uCABD\uC774\uBA74 \uD328\uB110\uC774 \uBDF0\uD3EC\uD2B8 \uBC16\uC73C\uB85C \uB118\uCE58\uC9C0 \uC54A\uACE0 \uC548\uC5D0\uC11C \uC2A4\uD06C\uB864\uD55C\uB2E4. */
+.wp-dp-pop__body{padding:var(--wp-space-4);max-height:min(60vh,calc(var(--wp-pop-avail,100vh) - 2px));overflow:auto}
 .wp-dp-range{display:flex;align-items:center;gap:var(--wp-space-1)}
 .wp-dp-range>*{flex:1 1 0;min-width:0}
 .wp-dp-range__sep{flex:none;color:var(--wp-text-subtle)}

package/dist/{chunk-44TDRCKR.js → chunk-GKYUDTMI.js}

@@ -1,6 +1,6 @@
-import { DateRangePicker } from './chunk-RWSH2MBU.js';
-import { SegmentedControl, Select } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { DateRangePicker } from './chunk-FP32LNFK.js';
+import { SegmentedControl, Select } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -161,14 +161,14 @@ function PeriodFilterImpl({ value, onChange, years, modes }) {
         gap: "var(--wp-space-2)"
       },
       children: [
-        /* @__PURE__ */ jsx(
+        modeItems.length > 1 ? /* @__PURE__ */ jsx(
           SegmentedControl,
           {
             items: [...modeItems],
             value: period.mode,
             onChange: (m) => emit(convertMode(period, m))
           }
-        ),
+        ) : null,
         period.mode !== "custom" ? /* @__PURE__ */ jsx("span", { style: { width: 96, flex: "none" }, children: /* @__PURE__ */ jsx(
           Select,
           {

package/dist/chunk-GSM664TX.js

@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from 'react';
+
+// src/env.ts
+var DEV = (() => {
+  try {
+    const meta = import.meta;
+    return Boolean(meta.env?.DEV);
+  } catch {
+    return false;
+  }
+})();
+var MOBILE_MEDIA_QUERY = "screen and (max-width: 767.98px)";
+function mobileQueryList() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
+  return window.matchMedia(MOBILE_MEDIA_QUERY);
+}
+function subscribeMobile(onChange) {
+  const list = mobileQueryList();
+  if (!list) return () => {
+  };
+  if (typeof list.addEventListener === "function") {
+    list.addEventListener("change", onChange);
+    return () => list.removeEventListener("change", onChange);
+  }
+  list.addListener(onChange);
+  return () => list.removeListener(onChange);
+}
+function mobileSnapshot() {
+  return mobileQueryList()?.matches ?? false;
+}
+function mobileServerSnapshot() {
+  return false;
+}
+function useIsMobile() {
+  return useSyncExternalStore(subscribeMobile, mobileSnapshot, mobileServerSnapshot);
+}
+
+export { DEV, MOBILE_MEDIA_QUERY, useIsMobile };

package/dist/{chunk-I5SD7XRA.js → chunk-GSXD52XG.js}

@@ -1,6 +1,6 @@
-import { useSduiAdapter, hostFetchOf } from './chunk-KO6OEY3G.js';
-import { Badge, Tag } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-JHFA5RDN.js';
+import { Badge, Tag } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useEffect, useMemo, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-O4IISNE7.js → chunk-IB2ZPUTF.js}

@@ -1,5 +1,5 @@
-import { boxed } from './chunk-5WW4MBRO.js';
-import { useState } from 'react';
+import { boxed } from './chunk-3JTBOABA.js';
+import { useRef, useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var RECORD_SHEET_CSS = `
@@ -15,7 +15,13 @@ var RECORD_SHEET_CSS = `
 .erp-recsheet__img{display:block;width:100%;height:11rem;object-fit:cover;border-radius:var(--wp-radius-sm)}
 .erp-recsheet__noimg{display:flex;align-items:center;justify-content:center;width:100%;height:11rem;border:var(--wp-border-w) dashed var(--wp-border-default);border-radius:var(--wp-radius-sm);color:var(--wp-text-disabled);font-size:var(--wp-size-xs)}
 .erp-recsheet__note{margin:var(--wp-space-2) 0 0;text-align:right;color:var(--wp-text-subtle);font-size:var(--wp-size-xs)}
+.erp-recsheet__frame{position:relative;min-width:0}
+.erp-recsheet__frame::before,.erp-recsheet__frame::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:var(--wp-space-4);pointer-events:none;opacity:0;transition:opacity var(--wp-duration-fast)}
+.erp-recsheet__frame::before{left:0;background:linear-gradient(to right,color-mix(in srgb,var(--wp-text-strong) 16%,transparent),transparent)}
+.erp-recsheet__frame::after{right:0;background:linear-gradient(to left,color-mix(in srgb,var(--wp-text-strong) 16%,transparent),transparent)}
+.erp-recsheet__frame[data-more-left]::before,.erp-recsheet__frame[data-more-right]::after{opacity:1}
 @media print{
+  .erp-recsheet__frame::before,.erp-recsheet__frame::after{display:none}
   .erp-recsheet__scroll{overflow-x:visible}
   .erp-recsheet{min-width:0}
   .erp-recsheet tr{break-inside:avoid}
@@ -88,6 +94,8 @@ function repeatLength(sources, minRows) {
   return Math.max(longest, Math.max(0, Math.floor(minRows ?? 0)));
 }
 function RecordSheetImpl({ columns, title, rows, note }) {
+  const scrollRef = useRef(null);
+  const edges = useScrollEdges(scrollRef);
   const width = gridColumns(columns);
   const list = Array.isArray(rows) ? rows : [];
   const body = [];
@@ -116,17 +124,48 @@ function RecordSheetImpl({ columns, title, rows, note }) {
     }
     body.push(/* @__PURE__ */ jsx("tr", { children: renderCells(cells, null, `row-${rowIndex}`) }, `row-${rowIndex}`));
   });
-  return /* @__PURE__ */ jsxs("div", { className: "erp-recsheet__scroll", children: [
-    /* @__PURE__ */ jsx(RecordSheetStyles, {}),
-    /* @__PURE__ */ jsxs("table", { className: "erp-recsheet", children: [
-      /* @__PURE__ */ jsx("colgroup", { children: Array.from({ length: width }, (_, index) => /* @__PURE__ */ jsx("col", { style: { width: `${100 / width}%` } }, index)) }),
-      /* @__PURE__ */ jsxs("tbody", { children: [
-        title ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-recsheet__title", colSpan: width, children: title }) }) : null,
-        body
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "erp-recsheet__frame",
+      "data-more-left": edges.left ? "" : void 0,
+      "data-more-right": edges.right ? "" : void 0,
+      children: /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "erp-recsheet__scroll", children: [
+        /* @__PURE__ */ jsx(RecordSheetStyles, {}),
+        /* @__PURE__ */ jsxs("table", { className: "erp-recsheet", children: [
+          /* @__PURE__ */ jsx("colgroup", { children: Array.from({ length: width }, (_, index) => /* @__PURE__ */ jsx("col", { style: { width: `${100 / width}%` } }, index)) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            title ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-recsheet__title", colSpan: width, children: title }) }) : null,
+            body
+          ] })
+        ] }),
+        note ? /* @__PURE__ */ jsx("p", { className: "erp-recsheet__note", children: note }) : null
       ] })
-    ] }),
-    note ? /* @__PURE__ */ jsx("p", { className: "erp-recsheet__note", children: note }) : null
-  ] });
+    }
+  );
+}
+function useScrollEdges(ref) {
+  const [edges, setEdges] = useState({ left: false, right: false });
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => {
+      const left = el.scrollLeft > 1;
+      const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+      setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    const table = el.querySelector("table");
+    if (table) observer?.observe(table);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [ref]);
+  return edges;
 }
 var RecordSheet = boxed(RecordSheetImpl, "RecordSheet");
 

package/dist/{chunk-YOZN35HD.js → chunk-IIRVHSNK.js}

@@ -1,6 +1,6 @@
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Spinner, Badge, Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
+import { Spinner, Badge, Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-FNMS7OB7.js → chunk-J7BZF4T4.js}

@@ -1,8 +1,8 @@
-import { ellipsisStyle, unwrapRows } from './chunk-Q4SWUINA.js';
-import { includesLooseSearch } from './chunk-UV6HHFEW.js';
-import { useSduiAdapter, hostFetchOf } from './chunk-KO6OEY3G.js';
-import { Icon, Button, Input, Spinner } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { ellipsisStyle, unwrapRows } from './chunk-VAXRTBJH.js';
+import { includesLooseSearch } from './chunk-A57GKV5F.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-JHFA5RDN.js';
+import { Icon, Button, Input, Spinner } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-KO6OEY3G.js → chunk-JHFA5RDN.js}

@@ -1,17 +1,7 @@
-import { warnOnce } from './chunk-RNOUXUBO.js';
+import { DEV } from './chunk-GSM664TX.js';
+import { warnOnce } from './chunk-YYAGE733.js';
 import { createContext, useContext } from 'react';
 
-// src/env.ts
-var DEV = (() => {
-  try {
-    const meta = import.meta;
-    return Boolean(meta.env?.DEV);
-  } catch {
-    return false;
-  }
-})();
-
-// src/adapter.ts
 function isSafeNavigationTarget(to) {
   if (typeof to !== "string") return false;
   const value = to.replace(/[\u0000-\u0020]/g, "");
@@ -115,4 +105,4 @@ function hostRawFetchOf(adapter) {
   };
 }
 
-export { DEV, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, hostRawFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };
+export { SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, hostRawFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };