@spacesync/client 0.1.7 → 0.1.10

package/dist/chunk-34332W2P.js

@@ -1,381 +0,0 @@
-import { parseHm, toTimeStr, formatTimeForDisplay } from './chunk-H3CNZCYU.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-34332W2P.js.map
-//# sourceMappingURL=chunk-34332W2P.js.map

package/dist/chunk-34332W2P.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/booking/analog-clock-picker.tsx"],"names":[],"mappings":"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","file":"chunk-34332W2P.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"]}