@spacesync/client 0.1.0 → 0.1.2

package/dist/chunk-YAVEMXXV.js

@@ -0,0 +1,381 @@
+import { parseHm, toTimeStr, formatTimeForDisplay } from './chunk-4A6RCBB5.js';
+import { cn } from './chunk-DMPSQ22Q.js';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SIZE = 248;
+var CX = SIZE / 2;
+var CY = SIZE / 2;
+var FACE_R = 98;
+var HOUR_LABEL_R = 72;
+var MINUTE_TICK_R = 84;
+function pointToAngleDeg(x, y) {
+  const dx = x - CX;
+  const dy = y - CY;
+  let deg = Math.atan2(dy, dx) * 180 / Math.PI + 90;
+  if (deg < 0) deg += 360;
+  return deg;
+}
+function angleToHour12(deg) {
+  const h = Math.round(deg / 30) % 12;
+  return h === 0 ? 12 : h;
+}
+function angleToHour24(deg) {
+  return Math.round(deg / 15) % 24;
+}
+function angleToMinute(deg) {
+  return Math.round(deg / 6) % 60;
+}
+function hour12To24(h12, ap) {
+  if (ap === "am") return h12 === 12 ? 0 : h12;
+  return h12 === 12 ? 12 : h12 + 12;
+}
+function hour24To12(h24) {
+  return { h12: h24 % 12 || 12, ap: h24 >= 12 ? "pm" : "am" };
+}
+function handEnd(deg, length) {
+  const rad = (deg - 90) * Math.PI / 180;
+  return { x: CX + Math.cos(rad) * length, y: CY + Math.sin(rad) * length };
+}
+function hourCenterDeg(h, timeFormat) {
+  if (timeFormat === "24h") return h * 15;
+  return h % 12 * 30;
+}
+function sectorPath(centerDeg, spread, radius) {
+  const start = handEnd(centerDeg - spread, radius);
+  const end = handEnd(centerDeg + spread, radius);
+  return `M ${CX} ${CY} L ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y} Z`;
+}
+function pointerTarget(clientX, clientY, svg, phase, timeFormat) {
+  const rect = svg.getBoundingClientRect();
+  const scale = SIZE / rect.width;
+  const x = (clientX - rect.left) * scale;
+  const y = (clientY - rect.top) * scale;
+  const dist = Math.hypot(x - CX, y - CY);
+  if (dist < 24 || dist > FACE_R + 8) return null;
+  const deg = pointToAngleDeg(x, y);
+  if (phase === "hour") {
+    return timeFormat === "24h" ? angleToHour24(deg) : angleToHour12(deg);
+  }
+  return angleToMinute(deg);
+}
+function AnalogClockPicker({
+  value,
+  onChange,
+  timeFormat = "24h",
+  className
+}) {
+  const svgRef = useRef(null);
+  const parsed = parseHm(value);
+  const editor = parsed ?? { h: 9, m: 0 };
+  const { h12, ap } = hour24To12(editor.h);
+  const [phase, setPhase] = useState("hour");
+  const [hoverTarget, setHoverTarget] = useState(null);
+  const setTime = useCallback(
+    (h, m) => {
+      onChange(toTimeStr(h, m));
+    },
+    [onChange]
+  );
+  const handlePointer = useCallback(
+    (clientX, clientY) => {
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const scale = SIZE / rect.width;
+      const x = (clientX - rect.left) * scale;
+      const y = (clientY - rect.top) * scale;
+      const deg = pointToAngleDeg(x, y);
+      if (phase === "hour") {
+        if (timeFormat === "24h") {
+          const h24 = angleToHour24(deg);
+          setTime(h24, editor.m);
+        } else {
+          const h = angleToHour12(deg);
+          setTime(hour12To24(h, ap), editor.m);
+        }
+        setPhase("minute");
+      } else {
+        const m = angleToMinute(deg);
+        setTime(editor.h, m);
+      }
+    },
+    [phase, timeFormat, ap, editor.h, editor.m, setTime]
+  );
+  const updateHover = useCallback(
+    (clientX, clientY) => {
+      const svg = svgRef.current;
+      if (!svg) return;
+      setHoverTarget(pointerTarget(clientX, clientY, svg, phase, timeFormat));
+    },
+    [phase, timeFormat]
+  );
+  const previewHour = phase === "hour" && hoverTarget != null ? timeFormat === "24h" ? hoverTarget : hour12To24(hoverTarget, ap) : editor.h;
+  const previewMinute = phase === "minute" && hoverTarget != null ? hoverTarget : editor.m;
+  const hourHandDeg = previewHour % 12 * 30 + previewMinute * 0.5;
+  const minuteHandDeg = previewMinute * 6;
+  const hourEnd = handEnd(hourHandDeg, 46);
+  const minuteEnd = handEnd(minuteHandDeg, 64);
+  const selectedHourKey = timeFormat === "24h" ? editor.h : h12;
+  const hoveredHourKey = phase === "hour" ? hoverTarget : null;
+  const hourMarkers = useMemo(() => {
+    if (timeFormat === "24h") {
+      return Array.from({ length: 24 }, (_, h) => {
+        const deg = h * 15;
+        const rad = (deg - 90) * Math.PI / 180;
+        const showLabel = h % 3 === 0;
+        const r = showLabel ? HOUR_LABEL_R - 6 : HOUR_LABEL_R + 4;
+        return {
+          key: h,
+          label: showLabel ? String(h).padStart(2, "0") : null,
+          x: CX + Math.cos(rad) * r,
+          y: CY + Math.sin(rad) * r,
+          deg,
+          h
+        };
+      });
+    }
+    return Array.from({ length: 12 }, (_, i) => {
+      const h = i === 0 ? 12 : i;
+      const deg = h * 30;
+      const rad = (deg - 90) * Math.PI / 180;
+      return {
+        key: h,
+        label: String(h),
+        x: CX + Math.cos(rad) * HOUR_LABEL_R,
+        y: CY + Math.sin(rad) * HOUR_LABEL_R,
+        deg,
+        h
+      };
+    });
+  }, [timeFormat]);
+  const minuteMarkers = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => {
+      const m = i * 5;
+      const deg = m * 6;
+      const rad = (deg - 90) * Math.PI / 180;
+      const selected = editor.m === m;
+      const hovered = hoverTarget != null && Math.round(hoverTarget / 5) * 5 === m;
+      return {
+        m,
+        x: CX + Math.cos(rad) * MINUTE_TICK_R,
+        y: CY + Math.sin(rad) * MINUTE_TICK_R,
+        selected,
+        hovered
+      };
+    }),
+    [editor.m, hoverTarget]
+  );
+  const displayTime = formatTimeForDisplay(value || toTimeStr(editor.h, editor.m), timeFormat);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-2xl border border-border bg-muted/60 px-4 py-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPhase("hour"),
+          className: cn(
+            "rounded-lg px-3 py-1 text-2xl font-semibold tabular-nums transition-colors",
+            phase === "hour" ? "bg-blue-500 text-white shadow-sm" : "text-foreground hover:bg-accent"
+          ),
+          children: timeFormat === "24h" ? String(editor.h).padStart(2, "0") : String(h12).padStart(2, "0")
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-muted-foreground", children: ":" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPhase("minute"),
+          className: cn(
+            "rounded-lg px-3 py-1 text-2xl font-semibold tabular-nums transition-colors",
+            phase === "minute" ? "bg-blue-500 text-white shadow-sm" : "text-foreground hover:bg-accent"
+          ),
+          children: String(editor.m).padStart(2, "0")
+        }
+      ),
+      timeFormat === "12h" ? /* @__PURE__ */ jsx("div", { className: "ml-2 flex flex-col gap-0.5", children: ["am", "pm"].map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTime(hour12To24(h12, p), editor.m),
+          className: cn(
+            "rounded-md px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide transition-colors",
+            ap === p ? "bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300" : "text-muted-foreground hover:bg-accent"
+          ),
+          children: p
+        },
+        p
+      )) }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        width: SIZE,
+        height: SIZE,
+        viewBox: `0 0 ${SIZE} ${SIZE}`,
+        className: "cursor-pointer touch-none select-none",
+        onClick: (e) => handlePointer(e.clientX, e.clientY),
+        onPointerMove: (e) => updateHover(e.clientX, e.clientY),
+        onPointerLeave: () => setHoverTarget(null),
+        onPointerDown: (e) => {
+          e.preventDefault();
+          handlePointer(e.clientX, e.clientY);
+        },
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: FACE_R, className: "fill-blue-50/80 dark:fill-blue-950/30" }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: CX,
+              cy: CY,
+              r: FACE_R,
+              className: "fill-none stroke-border",
+              strokeWidth: 1.5
+            }
+          ),
+          phase === "hour" && hoverTarget != null ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: sectorPath(
+                hourCenterDeg(hoverTarget, timeFormat),
+                timeFormat === "24h" ? 7.5 : 15,
+                FACE_R - 2
+              ),
+              className: "fill-blue-200/70 transition-opacity dark:fill-blue-500/25"
+            }
+          ) : null,
+          phase === "minute" && hoverTarget != null ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: sectorPath(hoverTarget * 6, 3, FACE_R - 2),
+              className: "fill-blue-200/70 transition-opacity dark:fill-blue-500/25"
+            }
+          ) : null,
+          phase === "hour" ? hourMarkers.map((m) => {
+            const isSelected = m.h === selectedHourKey || timeFormat === "12h" && m.h === h12;
+            const isHovered = m.h === hoveredHourKey;
+            const active = isHovered || isSelected && hoveredHourKey == null;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              active ? /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: m.x,
+                  cy: m.y,
+                  r: isHovered ? 18 : 16,
+                  className: cn(
+                    "transition-all duration-100",
+                    isHovered ? "fill-blue-500 shadow-sm" : "fill-blue-400/90"
+                  )
+                }
+              ) : null,
+              m.label ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: m.x,
+                  y: m.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  className: cn(
+                    "pointer-events-none text-[11px] font-semibold transition-colors duration-100",
+                    active ? "fill-white" : "fill-muted-foreground",
+                    isHovered && "text-[12px] font-bold"
+                  ),
+                  children: m.label
+                }
+              ) : /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: m.x,
+                  cy: m.y,
+                  r: isHovered ? 5 : 2,
+                  className: cn(
+                    "pointer-events-none transition-all duration-100",
+                    isHovered ? "fill-white" : "fill-muted-foreground/40"
+                  )
+                }
+              )
+            ] }, m.key);
+          }) : minuteMarkers.map((m) => {
+            const active = m.selected || m.hovered;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: m.x,
+                  cy: m.y,
+                  r: m.hovered ? 16 : m.selected ? 14 : 4,
+                  className: cn(
+                    "transition-all duration-100",
+                    m.hovered ? "fill-blue-400" : m.selected ? "fill-blue-500" : "fill-blue-200/80 dark:fill-blue-800/60"
+                  )
+                }
+              ),
+              active || m.m % 15 === 0 ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: m.x,
+                  y: m.y,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  className: cn(
+                    "pointer-events-none text-[10px] font-semibold transition-colors duration-100",
+                    active ? "fill-white" : "fill-blue-700 dark:fill-blue-300"
+                  ),
+                  children: String(m.m).padStart(2, "0")
+                }
+              ) : null
+            ] }, m.m);
+          }),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: CX,
+              y1: CY,
+              x2: hourEnd.x,
+              y2: hourEnd.y,
+              className: cn(
+                "stroke-blue-600 transition-all duration-100 dark:stroke-blue-400",
+                phase === "hour" && hoverTarget != null && "stroke-blue-500 opacity-90"
+              ),
+              strokeWidth: 3.5,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: CX,
+              y1: CY,
+              x2: minuteEnd.x,
+              y2: minuteEnd.y,
+              className: cn(
+                "stroke-blue-500 transition-all duration-100 dark:stroke-blue-300",
+                phase === "minute" && hoverTarget != null && "stroke-blue-400 opacity-90"
+              ),
+              strokeWidth: 2.5,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 5, className: "fill-blue-600 dark:fill-blue-400" }),
+          /* @__PURE__ */ jsx("circle", { cx: CX, cy: CY, r: 2.5, className: "fill-white" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-center text-[11px] text-muted-foreground", children: [
+      phase === "hour" ? "Hover or tap an hour" : "Hover or tap minutes \xB7 ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: hoverTarget != null && phase === "hour" ? formatTimeForDisplay(
+        toTimeStr(
+          timeFormat === "24h" ? hoverTarget : hour12To24(hoverTarget, ap),
+          editor.m
+        ),
+        timeFormat
+      ) : hoverTarget != null && phase === "minute" ? formatTimeForDisplay(toTimeStr(editor.h, hoverTarget), timeFormat) : displayTime })
+    ] })
+  ] });
+}
+
+export { AnalogClockPicker };
+//# sourceMappingURL=chunk-YAVEMXXV.js.map
+//# sourceMappingURL=chunk-YAVEMXXV.js.map

package/dist/chunk-YAVEMXXV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/booking/analog-clock-picker.tsx"],"names":[],"mappings":"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","file":"chunk-YAVEMXXV.js","sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  formatTimeForDisplay,\n  parseHm,\n  toTimeStr,\n} from \"../ui/time-field\";\nimport { cn } from \"../ui\";\n\nconst SIZE = 248;\nconst CX = SIZE / 2;\nconst CY = SIZE / 2;\nconst FACE_R = 98;\nconst HOUR_LABEL_R = 72;\nconst MINUTE_TICK_R = 84;\n\ntype ClockPhase = \"hour\" | \"minute\";\n\nfunction pointToAngleDeg(x: number, y: number): number {\n  const dx = x - CX;\n  const dy = y - CY;\n  let deg = (Math.atan2(dy, dx) * 180) / Math.PI + 90;\n  if (deg < 0) deg += 360;\n  return deg;\n}\n\nfunction angleToHour12(deg: number): number {\n  const h = Math.round(deg / 30) % 12;\n  return h === 0 ? 12 : h;\n}\n\nfunction angleToHour24(deg: number): number {\n  return Math.round(deg / 15) % 24;\n}\n\nfunction angleToMinute(deg: number): number {\n  return Math.round(deg / 6) % 60;\n}\n\nfunction hour12To24(h12: number, ap: \"am\" | \"pm\"): number {\n  if (ap === \"am\") return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction hour24To12(h24: number): { h12: number; ap: \"am\" | \"pm\" } {\n  return { h12: h24 % 12 || 12, ap: h24 >= 12 ? \"pm\" : \"am\" };\n}\n\nfunction handEnd(deg: number, length: number): { x: number; y: number } {\n  const rad = ((deg - 90) * Math.PI) / 180;\n  return { x: CX + Math.cos(rad) * length, y: CY + Math.sin(rad) * length };\n}\n\nfunction hourCenterDeg(h: number, timeFormat: \"12h\" | \"24h\"): number {\n  if (timeFormat === \"24h\") return h * 15;\n  return (h % 12) * 30;\n}\n\nfunction sectorPath(centerDeg: number, spread: number, radius: number): string {\n  const start = handEnd(centerDeg - spread, radius);\n  const end = handEnd(centerDeg + spread, radius);\n  return `M ${CX} ${CY} L ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y} Z`;\n}\n\nfunction pointerTarget(\n  clientX: number,\n  clientY: number,\n  svg: SVGSVGElement,\n  phase: ClockPhase,\n  timeFormat: \"12h\" | \"24h\",\n): number | null {\n  const rect = svg.getBoundingClientRect();\n  const scale = SIZE / rect.width;\n  const x = (clientX - rect.left) * scale;\n  const y = (clientY - rect.top) * scale;\n  const dist = Math.hypot(x - CX, y - CY);\n  if (dist < 24 || dist > FACE_R + 8) return null;\n\n  const deg = pointToAngleDeg(x, y);\n  if (phase === \"hour\") {\n    return timeFormat === \"24h\" ? angleToHour24(deg) : angleToHour12(deg);\n  }\n  return angleToMinute(deg);\n}\n\nexport function AnalogClockPicker({\n  value,\n  onChange,\n  timeFormat = \"24h\",\n  className,\n}: {\n  value: string;\n  onChange: (v: string) => void;\n  timeFormat?: \"12h\" | \"24h\";\n  className?: string;\n}) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const parsed = parseHm(value);\n  const editor = parsed ?? { h: 9, m: 0 };\n  const { h12, ap } = hour24To12(editor.h);\n\n  const [phase, setPhase] = useState<ClockPhase>(\"hour\");\n  const [hoverTarget, setHoverTarget] = useState<number | null>(null);\n\n  const setTime = useCallback(\n    (h: number, m: number) => {\n      onChange(toTimeStr(h, m));\n    },\n    [onChange],\n  );\n\n  const handlePointer = useCallback(\n    (clientX: number, clientY: number) => {\n      const svg = svgRef.current;\n      if (!svg) return;\n      const rect = svg.getBoundingClientRect();\n      const scale = SIZE / rect.width;\n      const x = (clientX - rect.left) * scale;\n      const y = (clientY - rect.top) * scale;\n      const deg = pointToAngleDeg(x, y);\n\n      if (phase === \"hour\") {\n        if (timeFormat === \"24h\") {\n          const h24 = angleToHour24(deg);\n          setTime(h24, editor.m);\n        } else {\n          const h = angleToHour12(deg);\n          setTime(hour12To24(h, ap), editor.m);\n        }\n        setPhase(\"minute\");\n      } else {\n        const m = angleToMinute(deg);\n        setTime(editor.h, m);\n      }\n    },\n    [phase, timeFormat, ap, editor.h, editor.m, setTime],\n  );\n\n  const updateHover = useCallback(\n    (clientX: number, clientY: number) => {\n      const svg = svgRef.current;\n      if (!svg) return;\n      setHoverTarget(pointerTarget(clientX, clientY, svg, phase, timeFormat));\n    },\n    [phase, timeFormat],\n  );\n\n  const previewHour =\n    phase === \"hour\" && hoverTarget != null\n      ? timeFormat === \"24h\"\n        ? hoverTarget\n        : hour12To24(hoverTarget, ap)\n      : editor.h;\n\n  const previewMinute = phase === \"minute\" && hoverTarget != null ? hoverTarget : editor.m;\n\n  const hourHandDeg = (previewHour % 12) * 30 + previewMinute * 0.5;\n  const minuteHandDeg = previewMinute * 6;\n  const hourEnd = handEnd(hourHandDeg, 46);\n  const minuteEnd = handEnd(minuteHandDeg, 64);\n\n  const selectedHourKey =\n    timeFormat === \"24h\" ? editor.h : h12;\n  const hoveredHourKey = phase === \"hour\" ? hoverTarget : null;\n\n  const hourMarkers = useMemo(() => {\n    if (timeFormat === \"24h\") {\n      return Array.from({ length: 24 }, (_, h) => {\n        const deg = h * 15;\n        const rad = ((deg - 90) * Math.PI) / 180;\n        const showLabel = h % 3 === 0;\n        const r = showLabel ? HOUR_LABEL_R - 6 : HOUR_LABEL_R + 4;\n        return {\n          key: h,\n          label: showLabel ? String(h).padStart(2, \"0\") : null,\n          x: CX + Math.cos(rad) * r,\n          y: CY + Math.sin(rad) * r,\n          deg,\n          h,\n        };\n      });\n    }\n    return Array.from({ length: 12 }, (_, i) => {\n      const h = i === 0 ? 12 : i;\n      const deg = h * 30;\n      const rad = ((deg - 90) * Math.PI) / 180;\n      return {\n        key: h,\n        label: String(h),\n        x: CX + Math.cos(rad) * HOUR_LABEL_R,\n        y: CY + Math.sin(rad) * HOUR_LABEL_R,\n        deg,\n        h,\n      };\n    });\n  }, [timeFormat]);\n\n  const minuteMarkers = useMemo(\n    () =>\n      Array.from({ length: 12 }, (_, i) => {\n        const m = i * 5;\n        const deg = m * 6;\n        const rad = ((deg - 90) * Math.PI) / 180;\n        const selected = editor.m === m;\n        const hovered =\n          hoverTarget != null && Math.round(hoverTarget / 5) * 5 === m;\n        return {\n          m,\n          x: CX + Math.cos(rad) * MINUTE_TICK_R,\n          y: CY + Math.sin(rad) * MINUTE_TICK_R,\n          selected,\n          hovered,\n        };\n      }),\n    [editor.m, hoverTarget],\n  );\n\n  const displayTime = formatTimeForDisplay(value || toTimeStr(editor.h, editor.m), timeFormat);\n\n  return (\n    <div className={cn(\"flex flex-col items-center gap-4\", className)}>\n      <div className=\"flex items-center gap-1 rounded-2xl border border-border bg-muted/60 px-4 py-2.5\">\n        <button\n          type=\"button\"\n          onClick={() => setPhase(\"hour\")}\n          className={cn(\n            \"rounded-lg px-3 py-1 text-2xl font-semibold tabular-nums transition-colors\",\n            phase === \"hour\"\n              ? \"bg-blue-500 text-white shadow-sm\"\n              : \"text-foreground hover:bg-accent\",\n          )}\n        >\n          {timeFormat === \"24h\"\n            ? String(editor.h).padStart(2, \"0\")\n            : String(h12).padStart(2, \"0\")}\n        </button>\n        <span className=\"text-2xl font-semibold text-muted-foreground\">:</span>\n        <button\n          type=\"button\"\n          onClick={() => setPhase(\"minute\")}\n          className={cn(\n            \"rounded-lg px-3 py-1 text-2xl font-semibold tabular-nums transition-colors\",\n            phase === \"minute\"\n              ? \"bg-blue-500 text-white shadow-sm\"\n              : \"text-foreground hover:bg-accent\",\n          )}\n        >\n          {String(editor.m).padStart(2, \"0\")}\n        </button>\n        {timeFormat === \"12h\" ? (\n          <div className=\"ml-2 flex flex-col gap-0.5\">\n            {([\"am\", \"pm\"] as const).map((p) => (\n              <button\n                key={p}\n                type=\"button\"\n                onClick={() => setTime(hour12To24(h12, p), editor.m)}\n                className={cn(\n                  \"rounded-md px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide transition-colors\",\n                  ap === p\n                    ? \"bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300\"\n                    : \"text-muted-foreground hover:bg-accent\",\n                )}\n              >\n                {p}\n              </button>\n            ))}\n          </div>\n        ) : null}\n      </div>\n\n      <div className=\"relative\">\n        <svg\n          ref={svgRef}\n          width={SIZE}\n          height={SIZE}\n          viewBox={`0 0 ${SIZE} ${SIZE}`}\n          className=\"cursor-pointer touch-none select-none\"\n          onClick={(e) => handlePointer(e.clientX, e.clientY)}\n          onPointerMove={(e) => updateHover(e.clientX, e.clientY)}\n          onPointerLeave={() => setHoverTarget(null)}\n          onPointerDown={(e) => {\n            e.preventDefault();\n            handlePointer(e.clientX, e.clientY);\n          }}\n        >\n          <circle cx={CX} cy={CY} r={FACE_R} className=\"fill-blue-50/80 dark:fill-blue-950/30\" />\n          <circle\n            cx={CX}\n            cy={CY}\n            r={FACE_R}\n            className=\"fill-none stroke-border\"\n            strokeWidth={1.5}\n          />\n\n          {phase === \"hour\" && hoverTarget != null ? (\n            <path\n              d={sectorPath(\n                hourCenterDeg(hoverTarget, timeFormat),\n                timeFormat === \"24h\" ? 7.5 : 15,\n                FACE_R - 2,\n              )}\n              className=\"fill-blue-200/70 transition-opacity dark:fill-blue-500/25\"\n            />\n          ) : null}\n\n          {phase === \"minute\" && hoverTarget != null ? (\n            <path\n              d={sectorPath(hoverTarget * 6, 3, FACE_R - 2)}\n              className=\"fill-blue-200/70 transition-opacity dark:fill-blue-500/25\"\n            />\n          ) : null}\n\n          {phase === \"hour\"\n            ? hourMarkers.map((m) => {\n                const isSelected = m.h === selectedHourKey || (timeFormat === \"12h\" && m.h === h12);\n                const isHovered = m.h === hoveredHourKey;\n                const active = isHovered || (isSelected && hoveredHourKey == null);\n                return (\n                  <g key={m.key}>\n                    {active ? (\n                      <circle\n                        cx={m.x}\n                        cy={m.y}\n                        r={isHovered ? 18 : 16}\n                        className={cn(\n                          \"transition-all duration-100\",\n                          isHovered\n                            ? \"fill-blue-500 shadow-sm\"\n                            : \"fill-blue-400/90\",\n                        )}\n                      />\n                    ) : null}\n                    {m.label ? (\n                      <text\n                        x={m.x}\n                        y={m.y}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"central\"\n                        className={cn(\n                          \"pointer-events-none text-[11px] font-semibold transition-colors duration-100\",\n                          active ? \"fill-white\" : \"fill-muted-foreground\",\n                          isHovered && \"text-[12px] font-bold\",\n                        )}\n                      >\n                        {m.label}\n                      </text>\n                    ) : (\n                      <circle\n                        cx={m.x}\n                        cy={m.y}\n                        r={isHovered ? 5 : 2}\n                        className={cn(\n                          \"pointer-events-none transition-all duration-100\",\n                          isHovered ? \"fill-white\" : \"fill-muted-foreground/40\",\n                        )}\n                      />\n                    )}\n                  </g>\n                );\n              })\n            : minuteMarkers.map((m) => {\n                const active = m.selected || m.hovered;\n                return (\n                  <g key={m.m}>\n                    <circle\n                      cx={m.x}\n                      cy={m.y}\n                      r={m.hovered ? 16 : m.selected ? 14 : 4}\n                      className={cn(\n                        \"transition-all duration-100\",\n                        m.hovered\n                          ? \"fill-blue-400\"\n                          : m.selected\n                            ? \"fill-blue-500\"\n                            : \"fill-blue-200/80 dark:fill-blue-800/60\",\n                      )}\n                    />\n                    {active || m.m % 15 === 0 ? (\n                      <text\n                        x={m.x}\n                        y={m.y}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"central\"\n                        className={cn(\n                          \"pointer-events-none text-[10px] font-semibold transition-colors duration-100\",\n                          active ? \"fill-white\" : \"fill-blue-700 dark:fill-blue-300\",\n                        )}\n                      >\n                        {String(m.m).padStart(2, \"0\")}\n                      </text>\n                    ) : null}\n                  </g>\n                );\n              })}\n\n          <line\n            x1={CX}\n            y1={CY}\n            x2={hourEnd.x}\n            y2={hourEnd.y}\n            className={cn(\n              \"stroke-blue-600 transition-all duration-100 dark:stroke-blue-400\",\n              phase === \"hour\" && hoverTarget != null && \"stroke-blue-500 opacity-90\",\n            )}\n            strokeWidth={3.5}\n            strokeLinecap=\"round\"\n          />\n          <line\n            x1={CX}\n            y1={CY}\n            x2={minuteEnd.x}\n            y2={minuteEnd.y}\n            className={cn(\n              \"stroke-blue-500 transition-all duration-100 dark:stroke-blue-300\",\n              phase === \"minute\" && hoverTarget != null && \"stroke-blue-400 opacity-90\",\n            )}\n            strokeWidth={2.5}\n            strokeLinecap=\"round\"\n          />\n          <circle cx={CX} cy={CY} r={5} className=\"fill-blue-600 dark:fill-blue-400\" />\n          <circle cx={CX} cy={CY} r={2.5} className=\"fill-white\" />\n        </svg>\n      </div>\n\n      <p className=\"text-center text-[11px] text-muted-foreground\">\n        {phase === \"hour\" ? \"Hover or tap an hour\" : \"Hover or tap minutes · \"}\n        <span className=\"font-medium text-foreground\">\n          {hoverTarget != null && phase === \"hour\"\n            ? formatTimeForDisplay(\n                toTimeStr(\n                  timeFormat === \"24h\" ? hoverTarget : hour12To24(hoverTarget, ap),\n                  editor.m,\n                ),\n                timeFormat,\n              )\n            : hoverTarget != null && phase === \"minute\"\n              ? formatTimeForDisplay(toTimeStr(editor.h, hoverTarget), timeFormat)\n              : displayTime}\n        </span>\n      </p>\n    </div>\n  );\n}\n"]}

package/dist/chunk-ZIJQ7BXU.js

@@ -0,0 +1,27 @@
+import { Box, DoorOpen, Armchair } from 'lucide-react';
+
+// src/live-space/live-resource-meta.ts
+var LIVE_RESOURCE_TYPE_META = {
+  desks: {
+    label: "Desk",
+    rowAccent: "text-blue-700 bg-blue-50 border-blue-100",
+    Icon: Armchair,
+    iconTile: "bg-blue-50 text-blue-600 border-blue-100 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-900/50"
+  },
+  rooms: {
+    label: "Room",
+    rowAccent: "text-orange-700 bg-orange-50 border-orange-100",
+    Icon: DoorOpen,
+    iconTile: "bg-orange-50 text-orange-600 border-orange-100 dark:bg-orange-950/50 dark:text-orange-400 dark:border-orange-900/50"
+  },
+  other: {
+    label: "Other",
+    rowAccent: "text-purple-700 bg-purple-50 border-purple-100",
+    Icon: Box,
+    iconTile: "bg-purple-50 text-purple-600 border-purple-100 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-900/50"
+  }
+};
+
+export { LIVE_RESOURCE_TYPE_META };
+//# sourceMappingURL=chunk-ZIJQ7BXU.js.map
+//# sourceMappingURL=chunk-ZIJQ7BXU.js.map

package/dist/chunk-ZIJQ7BXU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/live-space/live-resource-meta.ts"],"names":[],"mappings":";;;AAGO,IAAM,uBAAA,GAGT;AAAA,EACF,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,MAAA;AAAA,IACP,SAAA,EAAW,0CAAA;AAAA,IACX,IAAA,EAAM,QAAA;AAAA,IACN,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,MAAA;AAAA,IACP,SAAA,EAAW,gDAAA;AAAA,IACX,IAAA,EAAM,QAAA;AAAA,IACN,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,OAAA;AAAA,IACP,SAAA,EAAW,gDAAA;AAAA,IACX,IAAA,EAAM,GAAA;AAAA,IACN,QAAA,EAAU;AAAA;AAEd","file":"chunk-ZIJQ7BXU.js","sourcesContent":["import { Armchair, Box, DoorOpen, type LucideIcon } from \"lucide-react\";\n\n/** Live space table category pill (aligned with operator RESOURCE_TYPE_META live row accents). */\nexport const LIVE_RESOURCE_TYPE_META: Record<\n  \"desks\" | \"rooms\" | \"other\",\n  { label: string; rowAccent: string; Icon: LucideIcon; iconTile: string }\n> = {\n  desks: {\n    label: \"Desk\",\n    rowAccent: \"text-blue-700 bg-blue-50 border-blue-100\",\n    Icon: Armchair,\n    iconTile: \"bg-blue-50 text-blue-600 border-blue-100 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-900/50\",\n  },\n  rooms: {\n    label: \"Room\",\n    rowAccent: \"text-orange-700 bg-orange-50 border-orange-100\",\n    Icon: DoorOpen,\n    iconTile: \"bg-orange-50 text-orange-600 border-orange-100 dark:bg-orange-950/50 dark:text-orange-400 dark:border-orange-900/50\",\n  },\n  other: {\n    label: \"Other\",\n    rowAccent: \"text-purple-700 bg-purple-50 border-purple-100\",\n    Icon: Box,\n    iconTile: \"bg-purple-50 text-purple-600 border-purple-100 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-900/50\",\n  },\n};\n"]}

package/dist/detail-page-header.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { ReactNode } from 'react';
 
 type DetailPageHeaderProps = {
@@ -10,7 +10,7 @@ type DetailPageHeaderProps = {
     mobileTitle?: ReactNode;
     actions?: ReactNode;
 };
-declare function DetailPageShellHeader(props: DetailPageHeaderProps): react_jsx_runtime.JSX.Element;
-declare function DetailPageMobileHeader({ onBack, backAriaLabel, icon, title, mobileTitle, actions, }: DetailPageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function DetailPageShellHeader(props: DetailPageHeaderProps): React.JSX.Element;
+declare function DetailPageMobileHeader({ onBack, backAriaLabel, icon, title, mobileTitle, actions, }: DetailPageHeaderProps): React.JSX.Element;
 
 export { type DetailPageHeaderProps, DetailPageMobileHeader, DetailPageShellHeader };

package/dist/detail-page-header.js

@@ -1,155 +1,11 @@
+import { ShellTopBar } from './chunk-4NNK5IXY.js';
+import { Button } from './chunk-VHINHHZQ.js';
+import { shellTopBarBackButtonClass, shellTopBarMutedIconClass, shellTopBarTitleTextClass } from './chunk-FCY5FYJB.js';
+import './chunk-OWNUMPUC.js';
+import './chunk-DMPSQ22Q.js';
 import { ChevronLeft } from 'lucide-react';
-import * as React from 'react';
-import { createContext, useEffect, useContext } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/shell/detail-page-header.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 active:scale-[0.98] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:active:bg-destructive/70",
-        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-accent/80 active:scale-[0.98] dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-input/60",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]",
-        ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/90 active:scale-[0.98] dark:hover:bg-accent/50 dark:active:bg-accent/40",
-        link: "text-primary underline-offset-4 hover:underline active:text-primary/80"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9 rounded-md"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React.forwardRef(function Button2({ className, variant, size, asChild = false, ...props }, ref) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size }), className),
-      ...props
-    }
-  );
-});
-Button.displayName = "Button";
-var EMPTY_TOP_BAR_STATE = {};
-var ShellTopBarStoreContext = createContext(null);
-function useShellTopBarStore() {
-  const store = useContext(ShellTopBarStoreContext);
-  if (!store) {
-    throw new Error("ShellTopBar components must be used within ShellTopBarProvider");
-  }
-  return store;
-}
-function ShellTopBar({
-  title,
-  icon,
-  actions
-}) {
-  const store = useShellTopBarStore();
-  useEffect(() => {
-    store.setState({ title, icon, actions });
-    return () => store.setState(EMPTY_TOP_BAR_STATE);
-  }, [title, icon, actions, store]);
-  return null;
-}
-
-// src/shell/shell-top-bar-chrome.ts
-var shellTopBarMutedIconClass = "text-sidebar-foreground/60";
-var shellTopBarTitleTextClass = "text-sidebar-foreground";
-var shellTopBarActionSize = cn(
-  "inline-flex !h-7 min-h-0 items-center justify-center gap-1 px-2.5 text-xs font-medium",
-  "[&_svg:not([class*='size-'])]:size-3.5"
-);
-var shellTopBarRadius = "rounded-md";
-var shellTopBarNeutralRest = "border border-sidebar-border bg-sidebar-accent text-sidebar-foreground shadow-none transition-colors";
-var shellTopBarNeutralHover = "hover:!border-sidebar-foreground/14 hover:!bg-sidebar-foreground/6 hover:!text-sidebar-foreground";
-var shellTopBarNeutralActive = "active:!border-sidebar-foreground/10 active:!bg-sidebar-foreground/4 active:!text-sidebar-foreground";
-var shellTopBarBackButtonClass = cn(
-  "inline-flex !h-6 !w-6 shrink-0 items-center justify-center text-sidebar-foreground/70",
-  shellTopBarRadius,
-  shellTopBarNeutralRest,
-  shellTopBarNeutralHover,
-  shellTopBarNeutralActive
-);
-cn(
-  "inline-flex !h-7 !w-7 shrink-0 items-center justify-center text-sidebar-foreground/70",
-  shellTopBarRadius,
-  shellTopBarNeutralRest,
-  shellTopBarNeutralHover,
-  shellTopBarNeutralActive,
-  "[&_svg:not([class*='size-'])]:size-3.5"
-);
-cn(
-  shellTopBarActionSize,
-  shellTopBarRadius,
-  "!border-sidebar-border !bg-sidebar-accent !text-sidebar-foreground shadow-none transition-colors",
-  "!py-0",
-  shellTopBarNeutralHover,
-  shellTopBarNeutralActive,
-  "disabled:pointer-events-none disabled:!border-sidebar-border/60 disabled:!bg-sidebar-accent/60 disabled:!text-sidebar-foreground/40"
-);
-cn(
-  shellTopBarActionSize,
-  shellTopBarRadius,
-  "bg-blue-500 text-white transition-colors hover:bg-blue-600",
-  "disabled:pointer-events-none disabled:opacity-50"
-);
-cn(
-  shellTopBarActionSize,
-  shellTopBarRadius,
-  "bg-emerald-600 text-white transition-colors hover:bg-emerald-700"
-);
-cn(
-  shellTopBarActionSize,
-  shellTopBarRadius,
-  "border border-emerald-200 bg-emerald-50 text-emerald-700 transition-colors hover:border-emerald-300 hover:bg-emerald-100"
-);
-cn(
-  shellTopBarActionSize,
-  shellTopBarRadius,
-  "border border-blue-200 bg-blue-50 text-blue-700 transition-colors hover:border-blue-300 hover:bg-blue-100"
-);
-cn(
-  "flex items-center gap-0.5 border border-sidebar-border bg-sidebar-accent p-0.5",
-  shellTopBarRadius
-);
-cn(
-  "flex h-7 items-center gap-1.5 border border-sidebar-border bg-sidebar-accent pl-2.5 pr-1 text-sidebar-foreground",
-  shellTopBarRadius
-);
-cn(
-  "inline-flex !h-6 !w-6 items-center justify-center text-sidebar-foreground/70",
-  shellTopBarRadius,
-  shellTopBarNeutralRest,
-  shellTopBarNeutralHover,
-  shellTopBarNeutralActive,
-  "[&_svg:not([class*='size-'])]:size-3.5"
-);
-cn(
-  shellTopBarActionSize,
-  "min-w-[72px]",
-  shellTopBarNeutralRest,
-  shellTopBarNeutralHover,
-  shellTopBarNeutralActive
-);
 var mobileBackClass = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground";
 function DetailTitleRow({
   onBack,