@wipco/sdui 0.2.0 → 0.3.0

package/dist/chunk-LZJTKVMO.js

@@ -0,0 +1,767 @@
+import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-ZUCI34QY.js';
+import { useState, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DAY_MS = 864e5;
+var WEEKDAYS = ["\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0", "\uC77C"];
+var todayTs = () => {
+  const d = /* @__PURE__ */ new Date();
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+};
+var parseISO = (value) => {
+  if (value) {
+    const m = /^(\d{4})-(\d{1,2})-(\d{1,2})/.exec(value.trim());
+    if (m) {
+      const ts = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])).getTime();
+      if (!Number.isNaN(ts)) return ts;
+    }
+  }
+  return todayTs();
+};
+var fmtISO = (ts) => {
+  const d = new Date(ts);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
+var addDays = (ts, amount) => {
+  const d = new Date(ts);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + amount).getTime();
+};
+var addMonths = (ts, amount) => {
+  const d = new Date(ts);
+  return new Date(d.getFullYear(), d.getMonth() + amount, 1).getTime();
+};
+var mondayStart = (ts) => addDays(ts, -((new Date(ts).getDay() + 6) % 7));
+var weekdayName = (ts) => WEEKDAYS[(new Date(ts).getDay() + 6) % 7];
+var fmtMonthDay = (ts) => {
+  const d = new Date(ts);
+  return `${d.getMonth() + 1}\uC6D4 ${d.getDate()}\uC77C`;
+};
+var fmtRange = (startTs, endTs) => endTs > startTs ? `${fmtMonthDay(startTs)} \u2013 ${fmtMonthDay(endTs)}` : fmtMonthDay(startTs);
+var buildColorMap = (events, types) => {
+  const map = /* @__PURE__ */ new Map();
+  let cursor = 0;
+  const assign = (key, explicit) => {
+    if (map.has(key)) return;
+    map.set(key, explicit ?? `var(--wp-series-${cursor % 8 + 1})`);
+    cursor += 1;
+  };
+  for (const t of types ?? []) assign(t.value, t.color);
+  for (const e of events) assign(e.type ?? "", void 0);
+  return map;
+};
+var normalizeEvents = (events, types) => {
+  const colorMap = buildColorMap(events, types);
+  const labelMap = new Map((types ?? []).map((t) => [t.value, t.label]));
+  return events.map((e) => {
+    const dayStart = parseISO(e.start);
+    const type = e.type ?? "";
+    return {
+      source: e,
+      id: e.id,
+      title: e.title,
+      dayStart,
+      dayEnd: Math.max(dayStart, e.end ? parseISO(e.end) : dayStart),
+      type,
+      typeLabel: labelMap.get(type) ?? type,
+      status: e.status,
+      color: e.color ?? colorMap.get(type) ?? "var(--wp-series-1)"
+    };
+  });
+};
+var packWeek = (events, weekStart) => {
+  const weekEnd = addDays(weekStart, 6);
+  const segments = [];
+  for (const event of events) {
+    if (event.dayStart > weekEnd || event.dayEnd < weekStart) continue;
+    const start = Math.max(event.dayStart, weekStart);
+    const end = Math.min(event.dayEnd, weekEnd);
+    segments.push({
+      event,
+      col: Math.round((start - weekStart) / DAY_MS),
+      span: Math.round((end - start) / DAY_MS) + 1,
+      clipL: event.dayStart < weekStart,
+      clipR: event.dayEnd > weekEnd,
+      lane: 0
+    });
+  }
+  segments.sort(
+    (a, b) => a.col - b.col || b.span - a.span || a.event.id.localeCompare(b.event.id)
+  );
+  const laneEnd = [];
+  let lanes = 0;
+  for (const seg of segments) {
+    let lane = 0;
+    while (laneEnd[lane] !== void 0 && laneEnd[lane] >= seg.col) lane += 1;
+    laneEnd[lane] = seg.col + seg.span - 1;
+    seg.lane = lane;
+    lanes = Math.max(lanes, lane + 1);
+  }
+  return { segments, lanes };
+};
+var statusTone = (status) => {
+  if (/완료|반납|승인됨/.test(status)) return "success";
+  if (/진행|수리중|대기/.test(status)) return "warning";
+  if (/연체|반려|취소|분실/.test(status)) return "danger";
+  if (/예정|대여중|승인/.test(status)) return "info";
+  return "neutral";
+};
+var MONTH_LANE_H = 22;
+var MONTH_BAR_TOP = 32;
+var MONTH_MAX_LANES = 3;
+var WEEK_LANE_H = 30;
+var EventBar = ({ segment, selected, tall = false, onSelect }) => {
+  const { event, col, span, clipL, clipR, lane } = segment;
+  const singleDay = event.dayStart === event.dayEnd;
+  const radius = "var(--wp-radius-sm)";
+  const barHeight = tall ? WEEK_LANE_H - 6 : MONTH_LANE_H - 4;
+  const style = {
+    border: "none",
+    gridColumn: `${col + 1} / span ${span}`,
+    gridRow: `${lane + 1}`,
+    pointerEvents: "auto",
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--wp-space-half)",
+    height: barHeight,
+    alignSelf: "center",
+    marginLeft: clipL ? 0 : "var(--wp-space-half)",
+    marginRight: clipR ? 0 : "var(--wp-space-half)",
+    padding: singleDay ? "0 var(--wp-space-2)" : "0 var(--wp-space-2) 0 var(--wp-space-1)",
+    borderRadius: singleDay ? "var(--wp-radius-pill)" : `${clipL ? "0" : radius} ${clipR ? "0" : radius} ${clipR ? "0" : radius} ${clipL ? "0" : radius}`,
+    // 여러 날 막대: 색 틴트 배경 + 왼쪽 실선 모서리. 선택되면 원색으로 채움.
+    background: selected ? event.color : `color-mix(in srgb, ${event.color} 18%, var(--wp-surface-card))`,
+    borderLeft: singleDay ? void 0 : `3px solid ${clipL ? "transparent" : event.color}`,
+    color: selected ? "var(--wp-text-inverse)" : "var(--wp-text-strong)",
+    fontSize: tall ? 13 : 12,
+    fontWeight: 600,
+    lineHeight: 1,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    textAlign: "left",
+    minWidth: 0,
+    transition: "background var(--wp-duration-fast)"
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      title: event.title,
+      "aria-pressed": selected,
+      style,
+      onClick: (e) => onSelect(event, e),
+      children: [
+        singleDay && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              width: 7,
+              height: 7,
+              flex: "none",
+              borderRadius: "var(--wp-radius-pill)",
+              background: selected ? "var(--wp-text-inverse)" : event.color
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: event.title })
+      ]
+    }
+  );
+};
+var VIEW_ITEMS = [
+  { value: "month", label: "\uC6D4" },
+  { value: "week", label: "\uC8FC" },
+  { value: "day", label: "\uC77C" },
+  { value: "agenda", label: "\uC77C\uC815" }
+];
+var VIEW_VALUES = ["month", "week", "day", "agenda"];
+function normalizeViews(views) {
+  if (!Array.isArray(views)) return VIEW_ITEMS;
+  const seen = /* @__PURE__ */ new Set();
+  const items = [];
+  for (const raw of views) {
+    const value = typeof raw === "string" ? raw : raw?.value;
+    if (!VIEW_VALUES.includes(value) || seen.has(value)) continue;
+    seen.add(value);
+    const preset = VIEW_ITEMS.find((item) => item.value === value);
+    const given = typeof raw === "string" ? void 0 : raw;
+    items.push({ value, label: given?.label ?? preset?.label, icon: given?.icon });
+  }
+  return items.length > 0 ? items : VIEW_ITEMS;
+}
+var cellBorder = "1px solid var(--wp-border-subtle)";
+var EventCalendar = ({
+  events,
+  view,
+  onViewChange,
+  views,
+  date,
+  onDateChange,
+  types,
+  onEventClick,
+  selectedId
+}) => {
+  const [internalView, setInternalView] = useState(view ?? "month");
+  const [internalDate, setInternalDate] = useState(() => date ?? fmtISO(todayTs()));
+  const [internalSelected, setInternalSelected] = useState(null);
+  const [hiddenTypes, setHiddenTypes] = useState(/* @__PURE__ */ new Set());
+  const [today] = useState(todayTs);
+  const viewItems = useMemo(() => normalizeViews(views), [views]);
+  const requestedView = view ?? internalView;
+  const activeView = viewItems.some((item) => item.value === requestedView) ? requestedView : viewItems[0].value;
+  const anchor = parseISO(date ?? internalDate);
+  const activeSelected = selectedId !== void 0 ? selectedId : internalSelected;
+  const setView = (next) => {
+    setInternalView(next);
+    onViewChange?.(next);
+  };
+  const setDate = (ts) => {
+    const iso = fmtISO(ts);
+    setInternalDate(iso);
+    onDateChange?.(iso);
+  };
+  const openDay = (ts) => {
+    setDate(ts);
+    setView("day");
+  };
+  const selectEvent = (event, e) => {
+    e.stopPropagation();
+    setInternalSelected(event.id);
+    onEventClick?.(event.source);
+  };
+  const toggleType = (value) => {
+    setHiddenTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      return next;
+    });
+  };
+  const dayEvents = useMemo(() => normalizeEvents(events, types), [events, types]);
+  const visibleEvents = useMemo(
+    () => dayEvents.filter((e) => !hiddenTypes.has(e.type)),
+    [dayEvents, hiddenTypes]
+  );
+  const move = (dir) => {
+    if (activeView === "week") setDate(addDays(anchor, dir * 7));
+    else if (activeView === "day") setDate(addDays(anchor, dir));
+    else setDate(addMonths(anchor, dir));
+  };
+  const headline = (() => {
+    const d = new Date(anchor);
+    if (activeView === "week") {
+      const ws = mondayStart(anchor);
+      return `${fmtMonthDay(ws)} \u2013 ${fmtMonthDay(addDays(ws, 6))}`;
+    }
+    if (activeView === "day") {
+      return `${d.getFullYear()}\uB144 ${d.getMonth() + 1}\uC6D4 ${d.getDate()}\uC77C (${weekdayName(anchor)})`;
+    }
+    return `${d.getFullYear()}\uB144 ${d.getMonth() + 1}\uC6D4`;
+  })();
+  const monthWeeks = useMemo(() => {
+    if (activeView !== "month") return [];
+    const d = new Date(anchor);
+    const month = d.getMonth();
+    const gridStart = mondayStart(new Date(d.getFullYear(), month, 1).getTime());
+    return Array.from({ length: 6 }, (_, w) => {
+      const weekStart = addDays(gridStart, w * 7);
+      const { segments, lanes } = packWeek(visibleEvents, weekStart);
+      const shown = segments.filter((s) => s.lane < MONTH_MAX_LANES);
+      const hidden = segments.filter((s) => s.lane >= MONTH_MAX_LANES);
+      const overflow = Array.from(
+        { length: 7 },
+        (_2, i) => hidden.filter((s) => s.col <= i && i < s.col + s.span).length
+      );
+      const days = Array.from({ length: 7 }, (_2, i) => {
+        const ts = addDays(weekStart, i);
+        const dd = new Date(ts);
+        return {
+          ts,
+          num: dd.getDate(),
+          inMonth: dd.getMonth() === month,
+          isToday: ts === today,
+          isSunday: dd.getDay() === 0
+        };
+      });
+      const visLanes = Math.min(lanes, MONTH_MAX_LANES);
+      return {
+        weekStart,
+        days,
+        segments: shown,
+        overflow,
+        hasOverflow: hidden.length > 0,
+        rowHeight: Math.max(
+          96,
+          MONTH_BAR_TOP + visLanes * MONTH_LANE_H + (hidden.length > 0 ? 20 : 0) + 6
+        )
+      };
+    });
+  }, [activeView, anchor, visibleEvents, today]);
+  const week = useMemo(() => {
+    if (activeView !== "week") return null;
+    const weekStart = mondayStart(anchor);
+    const { segments, lanes } = packWeek(visibleEvents, weekStart);
+    const days = Array.from({ length: 7 }, (_, i) => {
+      const ts = addDays(weekStart, i);
+      return {
+        ts,
+        label: WEEKDAYS[i],
+        num: new Date(ts).getDate(),
+        isToday: ts === today,
+        isSunday: new Date(ts).getDay() === 0
+      };
+    });
+    return { days, segments, bodyHeight: Math.max(200, 16 + lanes * WEEK_LANE_H + 16) };
+  }, [activeView, anchor, visibleEvents, today]);
+  const dayItems = useMemo(() => {
+    if (activeView !== "day") return [];
+    return visibleEvents.filter((e) => e.dayStart <= anchor && e.dayEnd >= anchor).sort((a, b) => a.dayStart - b.dayStart || a.title.localeCompare(b.title));
+  }, [activeView, anchor, visibleEvents]);
+  const agendaGroups = useMemo(() => {
+    if (activeView !== "agenda") return [];
+    const upcoming = visibleEvents.filter((e) => e.dayEnd >= anchor).sort((a, b) => a.dayStart - b.dayStart || a.title.localeCompare(b.title));
+    const groups = [];
+    for (const event of upcoming) {
+      const ts = Math.max(event.dayStart, anchor);
+      const last = groups[groups.length - 1];
+      if (last && last.ts === ts) last.items.push(event);
+      else groups.push({ ts, items: [event] });
+    }
+    return groups;
+  }, [activeView, anchor, visibleEvents]);
+  const dayNumber = (opts) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: 24,
+        height: 24,
+        padding: "0 var(--wp-space-half)",
+        borderRadius: "var(--wp-radius-pill)",
+        fontSize: 13,
+        fontWeight: opts.isToday ? 700 : 500,
+        color: opts.isToday ? "var(--wp-text-brand)" : opts.inMonth === false ? "var(--wp-text-disabled)" : opts.isSunday ? "var(--wp-text-danger)" : "var(--wp-text-default)",
+        background: opts.isToday ? "var(--wp-surface-brand-tint)" : void 0,
+        boxShadow: opts.isToday ? "0 0 0 1.5px var(--wp-border-focus)" : void 0
+      },
+      children: opts.num
+    }
+  );
+  const laneGridStyle = (top, laneHeight) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top,
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gridAutoRows: laneHeight,
+    pointerEvents: "none"
+  });
+  const eventRow = (event) => {
+    const selected = event.id === activeSelected;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": selected,
+        onClick: (e) => selectEvent(event, e),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--wp-space-3)",
+          width: "100%",
+          padding: "var(--wp-space-3) var(--wp-space-4)",
+          border: cellBorder,
+          borderColor: selected ? "var(--wp-border-focus)" : "var(--wp-border-subtle)",
+          borderRadius: "var(--wp-radius-md)",
+          background: selected ? "var(--wp-surface-selected)" : "var(--wp-surface-card)",
+          cursor: "pointer",
+          textAlign: "left",
+          minWidth: 0,
+          transition: "background var(--wp-duration-fast), border-color var(--wp-duration-fast)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              style: {
+                width: 4,
+                height: 26,
+                flex: "none",
+                borderRadius: "var(--wp-radius-pill)",
+                background: event.color
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                flex: "1 1 auto",
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontSize: 14,
+                fontWeight: 600,
+                color: "var(--wp-text-strong)"
+              },
+              children: event.title
+            }
+          ),
+          event.typeLabel && /* @__PURE__ */ jsx(Tag, { color: event.color, className: "wp-caption", children: event.typeLabel }),
+          event.status && /* @__PURE__ */ jsx(Badge, { tone: statusTone(event.status), children: event.status }),
+          /* @__PURE__ */ jsx("span", { style: { flex: "none", fontSize: 13, color: "var(--wp-text-muted)" }, children: fmtRange(event.dayStart, event.dayEnd) })
+        ]
+      },
+      event.id + fmtISO(event.dayStart)
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--wp-space-3)",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: "var(--wp-space-2)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                SegmentedControl,
+                {
+                  items: [...viewItems],
+                  value: activeView,
+                  onChange: (v) => setView(v)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  style: { width: 1, height: 20, background: "var(--wp-border-subtle)" }
+                }
+              ),
+              /* @__PURE__ */ jsx(IconButton, { icon: "chevron-left", label: "\uC774\uC804", onClick: () => move(-1) }),
+              /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setDate(today), children: "\uC624\uB298" }),
+              /* @__PURE__ */ jsx(IconButton, { icon: "chevron-right", label: "\uB2E4\uC74C", onClick: () => move(1) }),
+              /* @__PURE__ */ jsx("h3", { className: "wp-h4", style: { margin: "0 0 0 var(--wp-space-2)" }, children: headline }),
+              types && types.length > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    alignItems: "center",
+                    gap: "var(--wp-space-1)",
+                    marginLeft: "auto"
+                  },
+                  children: types.map((t) => {
+                    const off = hiddenTypes.has(t.value);
+                    const color = dayEvents.find((e) => e.type === t.value)?.color ?? t.color;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": !off,
+                        title: off ? `${t.label} \uC77C\uC815 \uD45C\uC2DC` : `${t.label} \uC77C\uC815 \uC228\uAE30\uAE30`,
+                        onClick: () => toggleType(t.value),
+                        style: {
+                          border: "none",
+                          background: "none",
+                          padding: 0,
+                          cursor: "pointer",
+                          opacity: off ? 0.4 : 1,
+                          transition: "opacity var(--wp-duration-fast)"
+                        },
+                        children: /* @__PURE__ */ jsx(Tag, { color, filled: !off, children: t.label })
+                      },
+                      t.value
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              border: cellBorder,
+              borderRadius: "var(--wp-radius-card)",
+              background: "var(--wp-surface-card)",
+              overflow: "hidden"
+            },
+            children: [
+              activeView === "month" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }, children: WEEKDAYS.map((w, i) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "wp-caption",
+                    style: {
+                      padding: "var(--wp-space-2) 0",
+                      textAlign: "center",
+                      fontWeight: 600,
+                      color: i === 6 ? "var(--wp-text-danger)" : "var(--wp-text-muted)"
+                    },
+                    children: w
+                  },
+                  w
+                )) }),
+                monthWeeks.map((row) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: { position: "relative", borderTop: cellBorder, minHeight: row.rowHeight },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            inset: 0,
+                            display: "grid",
+                            gridTemplateColumns: "repeat(7, 1fr)"
+                          },
+                          children: row.days.map((day, i) => /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              role: "button",
+                              tabIndex: 0,
+                              "aria-label": `${fmtISO(day.ts)} \uC77C\uC815 \uBCF4\uAE30`,
+                              onClick: () => openDay(day.ts),
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  openDay(day.ts);
+                                }
+                              },
+                              style: {
+                                display: "flex",
+                                alignItems: "flex-start",
+                                justifyContent: "flex-end",
+                                padding: "var(--wp-space-1)",
+                                borderRight: i < 6 ? cellBorder : void 0,
+                                background: day.inMonth ? void 0 : "var(--wp-surface-sunken)",
+                                cursor: "pointer"
+                              },
+                              children: dayNumber(day)
+                            },
+                            day.ts
+                          ))
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { style: laneGridStyle(MONTH_BAR_TOP, MONTH_LANE_H), children: [
+                        row.segments.map((seg) => /* @__PURE__ */ jsx(
+                          EventBar,
+                          {
+                            segment: seg,
+                            selected: seg.event.id === activeSelected,
+                            onSelect: selectEvent
+                          },
+                          `${seg.event.id}-${row.weekStart}`
+                        )),
+                        row.hasOverflow && row.overflow.map(
+                          (count, i) => count > 0 ? /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              title: `\uC228\uACA8\uC9C4 \uC77C\uC815 ${count}\uAC74 \u2014 \uC77C \uBCF4\uAE30\uB85C \uC774\uB3D9`,
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                openDay(row.days[i].ts);
+                              },
+                              style: {
+                                gridColumn: `${i + 1} / span 1`,
+                                gridRow: `${MONTH_MAX_LANES + 1}`,
+                                pointerEvents: "auto",
+                                justifySelf: "start",
+                                alignSelf: "center",
+                                margin: "0 var(--wp-space-1)",
+                                padding: "0 var(--wp-space-1)",
+                                height: 16,
+                                border: "none",
+                                borderRadius: "var(--wp-radius-xs)",
+                                background: "none",
+                                fontSize: 11,
+                                fontWeight: 700,
+                                color: "var(--wp-text-muted)",
+                                cursor: "pointer"
+                              },
+                              children: [
+                                "+",
+                                count
+                              ]
+                            },
+                            `ov-${row.days[i].ts}`
+                          ) : null
+                        )
+                      ] })
+                    ]
+                  },
+                  row.weekStart
+                ))
+              ] }),
+              activeView === "week" && week && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(7, 1fr)",
+                      borderBottom: cellBorder
+                    },
+                    children: week.days.map((day) => /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => openDay(day.ts),
+                        style: {
+                          border: "none",
+                          background: "none",
+                          padding: "var(--wp-space-2) 0",
+                          textAlign: "center",
+                          cursor: "pointer"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "wp-caption",
+                              style: {
+                                display: "block",
+                                fontWeight: 600,
+                                color: day.isSunday ? "var(--wp-text-danger)" : "var(--wp-text-muted)"
+                              },
+                              children: day.label
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { style: { marginTop: "var(--wp-space-half)", display: "inline-flex" }, children: dayNumber(day) })
+                        ]
+                      },
+                      day.ts
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { position: "relative", minHeight: week.bodyHeight }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "grid",
+                        gridTemplateColumns: "repeat(7, 1fr)"
+                      },
+                      children: week.days.map((day, i) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            borderRight: i < 6 ? cellBorder : void 0,
+                            background: day.isToday ? "var(--wp-surface-brand-tint)" : void 0
+                          }
+                        },
+                        day.ts
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: laneGridStyle(12, WEEK_LANE_H), children: week.segments.map((seg) => /* @__PURE__ */ jsx(
+                    EventBar,
+                    {
+                      segment: seg,
+                      selected: seg.event.id === activeSelected,
+                      tall: true,
+                      onSelect: selectEvent
+                    },
+                    seg.event.id
+                  )) }),
+                  week.segments.length === 0 && /* @__PURE__ */ jsx(EmptyState, { icon: "calendar", tight: true, title: "\uC77C\uC815 \uC5C6\uC74C", children: "\uC774 \uC8FC\uC5D0\uB294 \uD45C\uC2DC\uD560 \uC77C\uC815\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                ] })
+              ] }),
+              activeView === "day" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "var(--wp-space-2)",
+                    padding: "var(--wp-space-4)"
+                  },
+                  children: dayItems.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { icon: "calendar", tight: true, title: "\uC77C\uC815 \uC5C6\uC74C", children: "\uC774 \uB0A0\uC9DC\uC5D0\uB294 \uD45C\uC2DC\uD560 \uC77C\uC815\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : dayItems.map((event) => eventRow(event))
+                }
+              ),
+              activeView === "agenda" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "var(--wp-space-4)",
+                    padding: "var(--wp-space-4)"
+                  },
+                  children: agendaGroups.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { icon: "calendar", tight: true, title: "\uB2E4\uAC00\uC624\uB294 \uC77C\uC815 \uC5C6\uC74C", children: "\uAE30\uC900\uC77C \uC774\uD6C4\uC5D0 \uD45C\uC2DC\uD560 \uC77C\uC815\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : agendaGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "var(--wp-space-2)",
+                          marginBottom: "var(--wp-space-2)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 16, style: { color: "var(--wp-text-muted)" } }),
+                          /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              className: "wp-caption",
+                              style: {
+                                fontWeight: 700,
+                                color: group.ts === today ? "var(--wp-text-brand)" : "var(--wp-text-muted)"
+                              },
+                              children: [
+                                fmtMonthDay(group.ts),
+                                " (",
+                                weekdayName(group.ts),
+                                ")",
+                                group.ts === today ? " \xB7 \uC624\uB298" : ""
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: { display: "flex", flexDirection: "column", gap: "var(--wp-space-1)" },
+                        children: group.items.map((event) => eventRow(event))
+                      }
+                    )
+                  ] }, group.ts))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { EventCalendar };