@wipco/sdui 1.4.2 → 1.6.0

package/dist/{chunk-ZORQPB6B.js → chunk-53KS4E5N.js}

@@ -1,5 +1,7 @@
-import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
+import { useIsMobile } from './chunk-GSM664TX.js';
+import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -171,7 +173,7 @@ var EventBar = ({ segment, selected, tall = false, onSelect }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: event.title })
+        /* @__PURE__ */ jsx("span", { className: "wp-evcal__bar-title", style: { overflow: "hidden", textOverflow: "ellipsis" }, children: event.title })
       ]
     }
   );
@@ -198,6 +200,28 @@ function normalizeViews(views) {
   return items.length > 0 ? items : VIEW_ITEMS;
 }
 var cellBorder = "1px solid var(--wp-border-subtle)";
+var EVCAL_CSS = `
+.wp-evcal{display:flex;flex-direction:column;gap:var(--wp-space-3);min-width:0}
+.wp-evcal__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp-space-2)}
+.wp-evcal__types{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp-space-1);margin-left:auto}
+.wp-evcal__item{display:flex;align-items:center;gap:var(--wp-space-3);width:100%;padding:var(--wp-space-3) var(--wp-space-4);border-radius:var(--wp-radius-md);cursor:pointer;text-align:left;min-width:0;transition:background var(--wp-duration-fast),border-color var(--wp-duration-fast)}
+.wp-evcal__item-bar{width:4px;height:26px;flex:none;border-radius:var(--wp-radius-pill)}
+.wp-evcal__item-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--wp-text-strong)}
+.wp-evcal__item-meta{display:contents}
+.wp-evcal__item-range{flex:none;font-size:13px;color:var(--wp-text-muted)}
+@media screen and (max-width:767.98px){
+  .wp-evcal__types{flex:1 1 100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
+  .wp-evcal__types::-webkit-scrollbar{display:none}
+  .wp-evcal__types>*{flex:none}
+  /* \uC720\uD615 \uCE69(23px)\uC740 \uC190\uAC00\uB77D \uB300\uC0C1\uC774 \uBABB \uB41C\uB2E4 \u2014 \uCE69 \uBAA8\uC591\uC740 \uB450\uACE0 \uB204\uB974\uB294 \uBC84\uD2BC\uB9CC 32px \uB85C \uD0A4\uC6B4\uB2E4. */
+  .wp-evcal__types>button{min-height:32px;display:inline-flex;align-items:center}
+  .wp-evcal__item{display:grid;grid-template-columns:4px minmax(0,1fr);column-gap:var(--wp-space-3);row-gap:var(--wp-space-1);padding:var(--wp-space-2) var(--wp-space-3)}
+  .wp-evcal__item-bar{grid-row:1 / span 2;height:auto;align-self:stretch}
+  .wp-evcal__item-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+  .wp-evcal__item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp-space-1) var(--wp-space-2);min-width:0}
+  .wp-evcal--month .wp-evcal__bar-title{display:none}
+}
+`;
 var EventCalendarImpl = ({
   events,
   view,
@@ -210,13 +234,15 @@ var EventCalendarImpl = ({
   onEventClick,
   selectedId
 }) => {
-  const [internalView, setInternalView] = useState(view ?? "month");
+  const isMobile = useIsMobile();
+  const [internalView, setInternalView] = useState(view ?? null);
   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 fallbackView = isMobile && viewItems.some((item) => item.value === "agenda") ? "agenda" : "month";
+  const requestedView = view ?? internalView ?? fallbackView;
   const activeView = viewItems.some((item) => item.value === requestedView) ? requestedView : viewItems[0].value;
   const anchor = parseISO(date ?? internalDate);
   const activeSelected = selectedId !== void 0 ? selectedId : internalSelected;
@@ -374,298 +400,102 @@ var EventCalendarImpl = ({
       "button",
       {
         type: "button",
+        className: "wp-evcal__item",
         "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)"
+          background: selected ? "var(--wp-surface-selected)" : "var(--wp-surface-card)"
         },
         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: statusToneOf(event.status, statusTones), children: event.status }),
-          /* @__PURE__ */ jsx("span", { style: { flex: "none", fontSize: 13, color: "var(--wp-text-muted)" }, children: fmtRange(event.dayStart, event.dayEnd) })
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "wp-evcal__item-bar", style: { background: event.color } }),
+          /* @__PURE__ */ jsx("span", { className: "wp-evcal__item-title", children: event.title }),
+          /* @__PURE__ */ jsxs("span", { className: "wp-evcal__item-meta", children: [
+            event.typeLabel && /* @__PURE__ */ jsx(Tag, { color: event.color, className: "wp-caption", children: event.typeLabel }),
+            event.status && /* @__PURE__ */ jsx(Badge, { tone: statusToneOf(event.status, statusTones), children: event.status }),
+            /* @__PURE__ */ jsx("span", { className: "wp-evcal__item-range", 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",
+  return /* @__PURE__ */ jsxs("div", { className: `wp-evcal wp-evcal--${activeView}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-evcal__toolbar", 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", { className: "wp-evcal__types", role: "group", "aria-label": "\uC77C\uC815 \uC720\uD615", 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: cellBorder,
-              borderRadius: "var(--wp-radius-card)",
-              background: "var(--wp-surface-card)",
-              overflow: "hidden"
+              border: "none",
+              background: "none",
+              padding: 0,
+              cursor: "pointer",
+              opacity: off ? 0.4 : 1,
+              transition: "opacity var(--wp-duration-fast)"
             },
-            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: [
+            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",
                     {
@@ -675,100 +505,229 @@ var EventCalendarImpl = ({
                         display: "grid",
                         gridTemplateColumns: "repeat(7, 1fr)"
                       },
-                      children: week.days.map((day, i) => /* @__PURE__ */ jsx(
+                      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.isToday ? "var(--wp-surface-brand-tint)" : void 0
-                          }
+                            background: day.inMonth ? void 0 : "var(--wp-surface-sunken)",
+                            cursor: "pointer"
+                          },
+                          children: dayNumber(day)
                         },
                         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
+                  /* @__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"
                     },
-                    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: [
+                      /* @__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) })
+                    ]
                   },
-                  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(
+                  day.ts
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { position: "relative", minHeight: week.bodyHeight }, children: [
+              /* @__PURE__ */ jsx(
                 "div",
                 {
                   style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "var(--wp-space-4)",
-                    padding: "var(--wp-space-4)"
+                    position: "absolute",
+                    inset: 0,
+                    display: "grid",
+                    gridTemplateColumns: "repeat(7, 1fr)"
                   },
-                  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))
+                  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
                       }
-                    )
-                  ] }, group.ts))
+                    },
+                    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))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-evcal", css: EVCAL_CSS })
+  ] });
 };
 var EventCalendar = boxed(EventCalendarImpl, "EventCalendar");