@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/widgets/ActivityPlanner.js

@@ -1,532 +1,870 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useRef, useMemo, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/ActivityPlanner.tsx
+/**
+* @zendir/ui - ActivityPlanner Component
+*
+* Activity scheduling and management panel. Creates, edits, and monitors
+* scheduled activities across timelines. Integrates with MissionCalendar
+* and Timeline components.
+*
+* Space Mission Features:
+* - Create/edit activities with command or script execution
+* - Drag-and-drop reorder within timeline
+* - Hazardous activity warnings (Astro UX)
+* - Activity lifecycle tracking (created → scheduled → started → completed)
+* - Overlap detection within a timeline
+* - Metadata recording (operator, environment, notes)
+* - Contact window awareness
+* - Batch scheduling
+*
+* @example
+* ```tsx
+* <ActivityPlanner
+*   activities={activities}
+*   timelines={timelines}
+*   onActivityCreate={(a) => console.log('Create:', a)}
+*   onActivityUpdate={(a) => console.log('Update:', a)}
+* />
+* ```
+*/
+/**
+* Map activity status → Astro UX status color using tokens.
+*   created/scheduled → standby (cyan)
+*   started/completed → normal (green)
+*   paused/stopped/disabled → caution (yellow)
+*   error/failed/crashed → critical (red)
+*/
 function getStatusColor(status, tokens) {
-  if (!status || !tokens) return (tokens == null ? void 0 : tokens.colors.text.muted) ?? "currentColor";
-  switch (status) {
-    case "created":
-    case "scheduled":
-      return tokens.colors.status.standby;
-    case "started":
-    case "completed":
-      return tokens.colors.status.normal;
-    case "paused":
-    case "stopped":
-    case "disabled":
-      return tokens.colors.status.caution;
-    case "error":
-    case "failed":
-    case "crashed":
-      return tokens.colors.status.critical;
-  }
+	if (!status || !tokens) return tokens?.colors.text.muted ?? "currentColor";
+	switch (status) {
+		case "created":
+		case "scheduled": return tokens.colors.status.standby;
+		case "started":
+		case "completed": return tokens.colors.status.normal;
+		case "paused":
+		case "stopped":
+		case "disabled": return tokens.colors.status.caution;
+		case "error":
+		case "failed":
+		case "crashed": return tokens.colors.status.critical;
+	}
 }
+/**
+* Return Astro UX status shape + contextual icon.
+* The leading character is the Astro status shape for the mapped level:
+*   standby → ◯ (ring), normal → ● (filled circle),
+*   caution → ■ (square), critical → ▼ (triangle down)
+* Followed by a contextual glyph for the specific activity state.
+*/
 function getStatusIcon(status) {
-  if (!status) return "◯";
-  switch (status) {
-    case "created":
-      return "◯";
-    case "scheduled":
-      return "◯ ◉";
-    case "started":
-      return "● ▶";
-    case "completed":
-      return "● ✓";
-    case "paused":
-      return "■ ⏸";
-    case "stopped":
-      return "■ ⏹";
-    case "disabled":
-      return "■ ⊘";
-    case "error":
-    case "failed":
-    case "crashed":
-      return "▼";
-  }
+	if (!status) return "◯";
+	switch (status) {
+		case "created": return "◯";
+		case "scheduled": return "◯ ◉";
+		case "started": return "● ▶";
+		case "completed": return "● ✓";
+		case "paused": return "■ ⏸";
+		case "stopped": return "■ ⏹";
+		case "disabled": return "■ ⊘";
+		case "error":
+		case "failed":
+		case "crashed": return "▼";
+	}
 }
 function formatDate(d) {
-  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+	return d.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
 }
 function formatTime(d) {
-  return d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
+	return d.toLocaleTimeString("en-US", {
+		hour12: false,
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
 }
 function checkOverlap(a, b) {
-  if (!a.end || !b.end) return false;
-  if (a.timeline !== b.timeline) return false;
-  return a.start < b.end && b.start < a.end;
+	if (!a.end || !b.end) return false;
+	if (a.timeline !== b.timeline) return false;
+	return a.start < b.end && b.start < a.end;
 }
-const ActivityForm = memo(function ActivityForm2({
-  timelines,
-  selectedDate,
-  tokens,
-  onSubmit,
-  onCancel
-}) {
-  var _a;
-  const now = selectedDate || /* @__PURE__ */ new Date();
-  const endDefault = new Date(now.getTime() + 36e5);
-  const [form, setForm] = useState({
-    title: "",
-    type: "command",
-    start: now.toISOString().slice(0, 16),
-    end: endDefault.toISOString().slice(0, 16),
-    timeline: ((_a = timelines[0]) == null ? void 0 : _a.id) || "",
-    description: "",
-    command: "",
-    script: "",
-    hazardous: false,
-    metadata: {}
-  });
-  const [metaKey, setMetaKey] = useState("");
-  const [metaValue, setMetaValue] = useState("");
-  const addMetadata = useCallback(() => {
-    if (metaKey.trim()) {
-      setForm((prev) => ({ ...prev, metadata: { ...prev.metadata, [metaKey.trim()]: metaValue } }));
-      setMetaKey("");
-      setMetaValue("");
-    }
-  }, [metaKey, metaValue]);
-  const inputStyle = {
-    background: tokens.colors.background.base,
-    color: tokens.colors.text.primary,
-    border: `1px solid ${tokens.colors.border.muted}`,
-    borderRadius: tokens.borderRadius.md,
-    padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
-    fontSize: tokens.typography.fontSize.xs,
-    width: "100%",
-    minHeight: 40,
-    fontFamily: tokens.typography.fontFamily.primary,
-    transition: "all 150ms ease"
-  };
-  const labelStyle = {
-    fontSize: tokens.typography.fontSize.xxs,
-    fontWeight: 500,
-    color: tokens.colors.text.muted,
-    textTransform: "uppercase",
-    marginBottom: 3,
-    display: "block"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 12, display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 120px", gap: 8 }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "activity-title", style: labelStyle, children: "Title" }),
-        /* @__PURE__ */ jsx("input", { id: "activity-title", "aria-label": "Activity title", style: inputStyle, value: form.title, onChange: (e) => setForm((p) => ({ ...p, title: e.target.value })), placeholder: "Activity name" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "activity-type", style: labelStyle, children: "Type" }),
-        /* @__PURE__ */ jsxs("select", { id: "activity-type", "aria-label": "Activity type", style: inputStyle, value: form.type, onChange: (e) => setForm((p) => ({ ...p, type: e.target.value })), children: [
-          /* @__PURE__ */ jsx("option", { value: "command", children: "Command" }),
-          /* @__PURE__ */ jsx("option", { value: "script", children: "Script" }),
-          /* @__PURE__ */ jsx("option", { value: "reserve", children: "Reserve" }),
-          /* @__PURE__ */ jsx("option", { value: "contact", children: "Contact" }),
-          /* @__PURE__ */ jsx("option", { value: "note", children: "Note" }),
-          /* @__PURE__ */ jsx("option", { value: "metadata", children: "Metadata" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "activity-start-time", style: labelStyle, children: "Start Time" }),
-        /* @__PURE__ */ jsx("input", { id: "activity-start-time", "aria-label": "Start time", type: "datetime-local", style: { ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }, value: form.start, onChange: (e) => setForm((p) => ({ ...p, start: e.target.value })) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "activity-end-time", style: labelStyle, children: "End Time" }),
-        /* @__PURE__ */ jsx("input", { id: "activity-end-time", "aria-label": "End time", type: "datetime-local", style: { ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }, value: form.end, onChange: (e) => setForm((p) => ({ ...p, end: e.target.value })) })
-      ] })
-    ] }),
-    timelines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "activity-timeline", style: labelStyle, children: "Timeline" }),
-      /* @__PURE__ */ jsx("select", { id: "activity-timeline", "aria-label": "Timeline", style: inputStyle, value: form.timeline, onChange: (e) => setForm((p) => ({ ...p, timeline: e.target.value })), children: timelines.map((t) => /* @__PURE__ */ jsx("option", { value: t.id, children: t.name }, t.id)) })
-    ] }),
-    form.type === "command" && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "activity-command", style: labelStyle, children: "Command" }),
-      /* @__PURE__ */ jsx("input", { id: "activity-command", "aria-label": "Command", style: { ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }, value: form.command, onChange: (e) => setForm((p) => ({ ...p, command: e.target.value })), placeholder: 'cmd("TARGET COMMAND")' })
-    ] }),
-    form.type === "script" && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "activity-script", style: labelStyle, children: "Script Path" }),
-      /* @__PURE__ */ jsx("input", { id: "activity-script", "aria-label": "Script path", style: { ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }, value: form.script, onChange: (e) => setForm((p) => ({ ...p, script: e.target.value })), placeholder: "/scripts/ops/collect.rb" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "activity-description", style: labelStyle, children: "Description" }),
-      /* @__PURE__ */ jsx("textarea", { id: "activity-description", "aria-label": "Description", style: { ...inputStyle, minHeight: 48, resize: "vertical" }, value: form.description, onChange: (e) => setForm((p) => ({ ...p, description: e.target.value })), placeholder: "Notes..." })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Metadata" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, marginBottom: 4 }, children: [
-        /* @__PURE__ */ jsx("input", { "aria-label": "Metadata key", style: { ...inputStyle, flex: 1 }, value: metaKey, onChange: (e) => setMetaKey(e.target.value), placeholder: "Key" }),
-        /* @__PURE__ */ jsx("input", { "aria-label": "Metadata value", style: { ...inputStyle, flex: 1 }, value: metaValue, onChange: (e) => setMetaValue(e.target.value), placeholder: "Value" }),
-        /* @__PURE__ */ jsx("button", { onClick: addMetadata, style: {
-          background: tokens.colors.interactive.default,
-          color: tokens.colors.text.inverse,
-          border: "none",
-          borderRadius: tokens.borderRadius.md,
-          padding: `0 ${tokens.spacing.sm}px`,
-          fontSize: tokens.typography.fontSize.xs,
-          cursor: "pointer",
-          transition: "all 150ms ease"
-        }, children: "+" })
-      ] }),
-      Object.keys(form.metadata).length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap" }, children: Object.entries(form.metadata).map(([k, v]) => /* @__PURE__ */ jsxs("span", { style: {
-        fontSize: tokens.typography.fontSize.micro,
-        background: tokens.colors.background.surface,
-        padding: `2px 6px`,
-        borderRadius: tokens.borderRadius.sm,
-        display: "flex",
-        alignItems: "center",
-        gap: tokens.spacing.xs
-      }, children: [
-        k,
-        ": ",
-        v,
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Remove metadata ${k}`,
-            onClick: () => setForm((p) => {
-              const m = { ...p.metadata };
-              delete m[k];
-              return { ...p, metadata: m };
-            }),
-            style: {
-              cursor: "pointer",
-              color: tokens.colors.status.critical,
-              fontWeight: 500,
-              border: "none",
-              background: "transparent",
-              padding: 0,
-              lineHeight: 1
-            },
-            children: "×"
-          }
-        )
-      ] }, k)) })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: tokens.typography.fontSize.xs, cursor: "pointer" }, children: [
-      /* @__PURE__ */ jsx("input", { "aria-label": "Hazardous activity", type: "checkbox", checked: form.hazardous, onChange: (e) => setForm((p) => ({ ...p, hazardous: e.target.checked })) }),
-      /* @__PURE__ */ jsx("span", { style: { color: form.hazardous ? tokens.colors.status.critical : tokens.colors.text.secondary }, children: "⚠ Hazardous Activity" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, justifyContent: "flex-end", marginTop: 4 }, children: [
-      /* @__PURE__ */ jsx("button", { onClick: onCancel, style: {
-        background: "transparent",
-        color: tokens.colors.text.muted,
-        border: `1px solid ${tokens.colors.border.muted}`,
-        borderRadius: tokens.borderRadius.md,
-        padding: `${tokens.spacing.xs}px 14px`,
-        fontSize: tokens.typography.fontSize.xs,
-        cursor: "pointer",
-        transition: "all 150ms ease"
-      }, children: "Cancel" }),
-      /* @__PURE__ */ jsx("button", { onClick: () => onSubmit(form), disabled: !form.title.trim(), style: {
-        background: tokens.colors.interactive.default,
-        color: tokens.colors.text.inverse,
-        border: "none",
-        borderRadius: tokens.borderRadius.md,
-        padding: `${tokens.spacing.xs}px 14px`,
-        fontSize: tokens.typography.fontSize.xs,
-        cursor: form.title.trim() ? "pointer" : "not-allowed",
-        fontWeight: 500,
-        opacity: form.title.trim() ? 1 : 0.5,
-        transition: "all 150ms ease"
-      }, children: "Create Activity" })
-    ] })
-  ] });
+var ActivityForm = memo(function ActivityForm({ timelines, selectedDate, tokens, onSubmit, onCancel }) {
+	const now = selectedDate || /* @__PURE__ */ new Date();
+	const endDefault = new Date(now.getTime() + 36e5);
+	const [form, setForm] = useState({
+		title: "",
+		type: "command",
+		start: now.toISOString().slice(0, 16),
+		end: endDefault.toISOString().slice(0, 16),
+		timeline: timelines[0]?.id || "",
+		description: "",
+		command: "",
+		script: "",
+		hazardous: false,
+		metadata: {}
+	});
+	const [metaKey, setMetaKey] = useState("");
+	const [metaValue, setMetaValue] = useState("");
+	const addMetadata = useCallback(() => {
+		if (metaKey.trim()) {
+			setForm((prev) => ({
+				...prev,
+				metadata: {
+					...prev.metadata,
+					[metaKey.trim()]: metaValue
+				}
+			}));
+			setMetaKey("");
+			setMetaValue("");
+		}
+	}, [metaKey, metaValue]);
+	const inputStyle = {
+		background: tokens.colors.background.base,
+		color: tokens.colors.text.primary,
+		border: `1px solid ${tokens.colors.border.muted}`,
+		borderRadius: tokens.borderRadius.md,
+		padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
+		fontSize: tokens.typography.fontSize.xs,
+		width: "100%",
+		minHeight: 40,
+		fontFamily: tokens.typography.fontFamily.primary,
+		transition: "all 150ms ease"
+	};
+	const labelStyle = {
+		fontSize: tokens.typography.fontSize.xxs,
+		fontWeight: 500,
+		color: tokens.colors.text.muted,
+		textTransform: "uppercase",
+		marginBottom: 3,
+		display: "block"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			padding: 12,
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "1fr 120px",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: "activity-title",
+					style: labelStyle,
+					children: "Title"
+				}), /* @__PURE__ */ jsx("input", {
+					id: "activity-title",
+					"aria-label": "Activity title",
+					style: inputStyle,
+					value: form.title,
+					onChange: (e) => setForm((p) => ({
+						...p,
+						title: e.target.value
+					})),
+					placeholder: "Activity name"
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: "activity-type",
+					style: labelStyle,
+					children: "Type"
+				}), /* @__PURE__ */ jsxs("select", {
+					id: "activity-type",
+					"aria-label": "Activity type",
+					style: inputStyle,
+					value: form.type,
+					onChange: (e) => setForm((p) => ({
+						...p,
+						type: e.target.value
+					})),
+					children: [
+						/* @__PURE__ */ jsx("option", {
+							value: "command",
+							children: "Command"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "script",
+							children: "Script"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "reserve",
+							children: "Reserve"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "contact",
+							children: "Contact"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "note",
+							children: "Note"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "metadata",
+							children: "Metadata"
+						})
+					]
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "1fr 1fr",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: "activity-start-time",
+					style: labelStyle,
+					children: "Start Time"
+				}), /* @__PURE__ */ jsx("input", {
+					id: "activity-start-time",
+					"aria-label": "Start time",
+					type: "datetime-local",
+					style: {
+						...inputStyle,
+						fontFamily: tokens.typography.fontFamily.mono
+					},
+					value: form.start,
+					onChange: (e) => setForm((p) => ({
+						...p,
+						start: e.target.value
+					}))
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: "activity-end-time",
+					style: labelStyle,
+					children: "End Time"
+				}), /* @__PURE__ */ jsx("input", {
+					id: "activity-end-time",
+					"aria-label": "End time",
+					type: "datetime-local",
+					style: {
+						...inputStyle,
+						fontFamily: tokens.typography.fontFamily.mono
+					},
+					value: form.end,
+					onChange: (e) => setForm((p) => ({
+						...p,
+						end: e.target.value
+					}))
+				})] })]
+			}),
+			timelines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "activity-timeline",
+				style: labelStyle,
+				children: "Timeline"
+			}), /* @__PURE__ */ jsx("select", {
+				id: "activity-timeline",
+				"aria-label": "Timeline",
+				style: inputStyle,
+				value: form.timeline,
+				onChange: (e) => setForm((p) => ({
+					...p,
+					timeline: e.target.value
+				})),
+				children: timelines.map((t) => /* @__PURE__ */ jsx("option", {
+					value: t.id,
+					children: t.name
+				}, t.id))
+			})] }),
+			form.type === "command" && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "activity-command",
+				style: labelStyle,
+				children: "Command"
+			}), /* @__PURE__ */ jsx("input", {
+				id: "activity-command",
+				"aria-label": "Command",
+				style: {
+					...inputStyle,
+					fontFamily: tokens.typography.fontFamily.mono
+				},
+				value: form.command,
+				onChange: (e) => setForm((p) => ({
+					...p,
+					command: e.target.value
+				})),
+				placeholder: "cmd(\"TARGET COMMAND\")"
+			})] }),
+			form.type === "script" && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "activity-script",
+				style: labelStyle,
+				children: "Script Path"
+			}), /* @__PURE__ */ jsx("input", {
+				id: "activity-script",
+				"aria-label": "Script path",
+				style: {
+					...inputStyle,
+					fontFamily: tokens.typography.fontFamily.mono
+				},
+				value: form.script,
+				onChange: (e) => setForm((p) => ({
+					...p,
+					script: e.target.value
+				})),
+				placeholder: "/scripts/ops/collect.rb"
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: "activity-description",
+				style: labelStyle,
+				children: "Description"
+			}), /* @__PURE__ */ jsx("textarea", {
+				id: "activity-description",
+				"aria-label": "Description",
+				style: {
+					...inputStyle,
+					minHeight: 48,
+					resize: "vertical"
+				},
+				value: form.description,
+				onChange: (e) => setForm((p) => ({
+					...p,
+					description: e.target.value
+				})),
+				placeholder: "Notes..."
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("div", {
+					style: labelStyle,
+					children: "Metadata"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: 4,
+						marginBottom: 4
+					},
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							"aria-label": "Metadata key",
+							style: {
+								...inputStyle,
+								flex: 1
+							},
+							value: metaKey,
+							onChange: (e) => setMetaKey(e.target.value),
+							placeholder: "Key"
+						}),
+						/* @__PURE__ */ jsx("input", {
+							"aria-label": "Metadata value",
+							style: {
+								...inputStyle,
+								flex: 1
+							},
+							value: metaValue,
+							onChange: (e) => setMetaValue(e.target.value),
+							placeholder: "Value"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							onClick: addMetadata,
+							style: {
+								background: tokens.colors.interactive.default,
+								color: tokens.colors.text.inverse,
+								border: "none",
+								borderRadius: tokens.borderRadius.md,
+								padding: `0 ${tokens.spacing.sm}px`,
+								fontSize: tokens.typography.fontSize.xs,
+								cursor: "pointer",
+								transition: "all 150ms ease"
+							},
+							children: "+"
+						})
+					]
+				}),
+				Object.keys(form.metadata).length > 0 && /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						gap: 4,
+						flexWrap: "wrap"
+					},
+					children: Object.entries(form.metadata).map(([k, v]) => /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.micro,
+							background: tokens.colors.background.surface,
+							padding: `2px 6px`,
+							borderRadius: tokens.borderRadius.sm,
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.xs
+						},
+						children: [
+							k,
+							": ",
+							v,
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Remove metadata ${k}`,
+								onClick: () => setForm((p) => {
+									const m = { ...p.metadata };
+									delete m[k];
+									return {
+										...p,
+										metadata: m
+									};
+								}),
+								style: {
+									cursor: "pointer",
+									color: tokens.colors.status.critical,
+									fontWeight: 500,
+									border: "none",
+									background: "transparent",
+									padding: 0,
+									lineHeight: 1
+								},
+								children: "×"
+							})
+						]
+					}, k))
+				})
+			] }),
+			/* @__PURE__ */ jsxs("label", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					fontSize: tokens.typography.fontSize.xs,
+					cursor: "pointer"
+				},
+				children: [/* @__PURE__ */ jsx("input", {
+					"aria-label": "Hazardous activity",
+					type: "checkbox",
+					checked: form.hazardous,
+					onChange: (e) => setForm((p) => ({
+						...p,
+						hazardous: e.target.checked
+					}))
+				}), /* @__PURE__ */ jsx("span", {
+					style: { color: form.hazardous ? tokens.colors.status.critical : tokens.colors.text.secondary },
+					children: "⚠ Hazardous Activity"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: 6,
+					justifyContent: "flex-end",
+					marginTop: 4
+				},
+				children: [/* @__PURE__ */ jsx("button", {
+					onClick: onCancel,
+					style: {
+						background: "transparent",
+						color: tokens.colors.text.muted,
+						border: `1px solid ${tokens.colors.border.muted}`,
+						borderRadius: tokens.borderRadius.md,
+						padding: `${tokens.spacing.xs}px 14px`,
+						fontSize: tokens.typography.fontSize.xs,
+						cursor: "pointer",
+						transition: "all 150ms ease"
+					},
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: () => onSubmit(form),
+					disabled: !form.title.trim(),
+					style: {
+						background: tokens.colors.interactive.default,
+						color: tokens.colors.text.inverse,
+						border: "none",
+						borderRadius: tokens.borderRadius.md,
+						padding: `${tokens.spacing.xs}px 14px`,
+						fontSize: tokens.typography.fontSize.xs,
+						cursor: form.title.trim() ? "pointer" : "not-allowed",
+						fontWeight: 500,
+						opacity: form.title.trim() ? 1 : .5,
+						transition: "all 150ms ease"
+					},
+					children: "Create Activity"
+				})]
+			})
+		]
+	});
 });
-const ActivityPlanner = memo(function ActivityPlanner2({
-  activities,
-  timelines,
-  selectedDate,
-  height = 500,
-  title = "Activity Planner",
-  readOnly = false,
-  showOverlapWarning = true,
-  onActivityCreate,
-  onActivityUpdate: _onActivityUpdate,
-  onActivityDelete,
-  onViewInCalendar,
-  onViewInTimeline,
-  className = ""
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [showForm, setShowForm] = useState(false);
-  const [filter, setFilter] = useState("");
-  const [sortBy, setSortBy] = useState("time");
-  const listRef = useRef(null);
-  const overlaps = useMemo(() => {
-    const pairs = [];
-    for (let i = 0; i < activities.length; i++) {
-      for (let j = i + 1; j < activities.length; j++) {
-        if (checkOverlap(activities[i], activities[j])) {
-          pairs.push([activities[i].id, activities[j].id]);
-        }
-      }
-    }
-    return new Set(pairs.flat());
-  }, [activities]);
-  const displayActivities = useMemo(() => {
-    let list = [...activities];
-    if (filter) {
-      const lf = filter.toLowerCase();
-      list = list.filter(
-        (a) => {
-          var _a, _b, _c;
-          return a.title.toLowerCase().includes(lf) || ((_a = a.description) == null ? void 0 : _a.toLowerCase().includes(lf)) || ((_b = a.timeline) == null ? void 0 : _b.toLowerCase().includes(lf)) || ((_c = a.command) == null ? void 0 : _c.toLowerCase().includes(lf));
-        }
-      );
-    }
-    switch (sortBy) {
-      case "time":
-        list.sort((a, b) => a.start.getTime() - b.start.getTime());
-        break;
-      case "status":
-        list.sort((a, b) => (a.status || "").localeCompare(b.status || ""));
-        break;
-      case "timeline":
-        list.sort((a, b) => (a.timeline || "").localeCompare(b.timeline || ""));
-        break;
-    }
-    return list;
-  }, [activities, filter, sortBy]);
-  const stats = useMemo(() => ({
-    total: activities.length,
-    scheduled: activities.filter((a) => a.status === "scheduled" || a.status === "created").length,
-    running: activities.filter((a) => a.status === "started").length,
-    completed: activities.filter((a) => a.status === "completed").length,
-    errors: activities.filter((a) => a.status === "error" || a.status === "failed" || a.status === "crashed").length
-  }), [activities]);
-  const handleCreate = useCallback((data) => {
-    onActivityCreate == null ? void 0 : onActivityCreate({
-      title: data.title,
-      type: data.type,
-      start: new Date(data.start),
-      end: new Date(data.end),
-      timeline: data.timeline,
-      description: data.description,
-      command: data.command || void 0,
-      script: data.script || void 0,
-      metadata: Object.keys(data.metadata).length > 0 ? data.metadata : void 0,
-      status: "created"
-    });
-    setShowForm(false);
-  }, [onActivityCreate]);
-  const panelPadX = tokens.spacing.md;
-  const panelPadY = tokens.spacing.sm;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `activity-planner ${className}`,
-      style: {
-        height: typeof height === "number" ? height : void 0,
-        background: tokens.colors.background.base,
-        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
-        borderRadius: tokens.borderRadius.lg,
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: tokens.typography.fontFamily.primary,
-        color: tokens.colors.text.primary,
-        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: `${panelPadY}px ${panelPadX}px`,
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          backdropFilter: "blur(8px)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between"
-        }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: tokens.typography.fontSize.sm }, children: title }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted }, children: [
-              /* @__PURE__ */ jsxs("span", { children: [
-                "Scheduled ",
-                stats.scheduled
-              ] }),
-              /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.secondary }, children: [
-                "Running ",
-                stats.running
-              ] }),
-              /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.secondary }, children: [
-                "Completed ",
-                stats.completed
-              ] }),
-              stats.errors > 0 && /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.status.critical }, children: [
-                "Errors ",
-                stats.errors
-              ] })
-            ] })
-          ] }),
-          !readOnly && /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setShowForm(!showForm),
-              style: {
-                background: showForm ? tokens.colors.status.critical + "22" : tokens.colors.interactive.default,
-                color: showForm ? tokens.colors.status.critical : tokens.colors.text.inverse,
-                border: "none",
-                borderRadius: tokens.borderRadius.md,
-                padding: "3px 10px",
-                fontSize: tokens.typography.fontSize.xs,
-                fontWeight: 500,
-                cursor: "pointer",
-                transition: "all 150ms ease"
-              },
-              children: showForm ? "✕ Cancel" : "+ New Activity"
-            }
-          )
-        ] }),
-        showForm && !readOnly && /* @__PURE__ */ jsx("div", { style: { borderBottom: `1px solid ${tokens.colors.border.muted}`, background: tokens.colors.background.surface + "88" }, children: /* @__PURE__ */ jsx(
-          ActivityForm,
-          {
-            timelines,
-            selectedDate,
-            tokens,
-            onSubmit: handleCreate,
-            onCancel: () => setShowForm(false)
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: `${tokens.spacing.xs}px ${panelPadX}px`,
-          display: "flex",
-          gap: 6,
-          alignItems: "center",
-          borderBottom: `1px solid ${tokens.colors.border.muted}`
-        }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              value: filter,
-              onChange: (e) => setFilter(e.target.value),
-              "aria-label": "Search activities",
-              placeholder: "Search activities...",
-              style: {
-                flex: 1,
-                background: tokens.colors.background.surface,
-                color: tokens.colors.text.primary,
-                border: `1px solid ${tokens.colors.border.muted}`,
-                borderRadius: tokens.borderRadius.md,
-                padding: "3px 8px",
-                fontSize: tokens.typography.fontSize.xxs,
-                fontFamily: tokens.typography.fontFamily.primary,
-                transition: "all 150ms ease"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: sortBy,
-              onChange: (e) => setSortBy(e.target.value),
-              "aria-label": "Sort activities",
-              style: {
-                background: tokens.colors.background.surface,
-                color: tokens.colors.text.secondary,
-                border: `1px solid ${tokens.colors.border.muted}`,
-                borderRadius: tokens.borderRadius.md,
-                padding: "3px 6px",
-                fontSize: tokens.typography.fontSize.xxs,
-                transition: "all 150ms ease"
-              },
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "time", children: "Sort: Time" }),
-                /* @__PURE__ */ jsx("option", { value: "status", children: "Sort: Status" }),
-                /* @__PURE__ */ jsx("option", { value: "timeline", children: "Sort: Timeline" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { ref: listRef, style: { flex: 1, overflow: "auto", padding: 8 }, children: displayActivities.length === 0 ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", color: tokens.colors.text.muted, padding: 40, fontSize: tokens.typography.fontSize.xs }, children: filter ? "No matching activities" : "No activities scheduled" }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: displayActivities.map((a) => {
-          const color = a.color || getStatusColor(a.status, tokens);
-          const hasOverlap = overlaps.has(a.id);
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "grid",
-                gridTemplateColumns: "24px 1fr auto",
-                alignItems: "center",
-                gap: tokens.spacing.sm,
-                padding: "6px 10px",
-                background: hasOverlap ? `${tokens.colors.status.caution}10` : `${color}08`,
-                borderLeft: `3px solid ${color}`,
-                borderRadius: tokens.borderRadius.md,
-                fontSize: tokens.typography.fontSize.xs,
-                cursor: "pointer",
-                border: hasOverlap && showOverlapWarning ? `1px solid ${tokens.colors.status.caution}44` : void 0,
-                transition: "all 150ms ease"
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("span", { style: { color, fontSize: tokens.typography.fontSize.sm, fontWeight: 500 }, children: getStatusIcon(a.status) }) }),
-                /* @__PURE__ */ jsxs("div", { style: { overflow: "hidden" }, children: [
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 2 }, children: [
-                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.title }),
-                    a.timeline && /* @__PURE__ */ jsx("span", { style: {
-                      fontSize: tokens.typography.fontSize.micro,
-                      background: tokens.colors.background.surface,
-                      padding: `0 ${tokens.spacing.xs}px`,
-                      borderRadius: tokens.borderRadius.sm,
-                      color: tokens.colors.text.muted
-                    }, children: a.timeline }),
-                    hasOverlap && showOverlapWarning && /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.micro, color: tokens.colors.status.caution, fontWeight: 500 }, children: "⚠ OVERLAP" })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { style: { fontSize: tokens.typography.fontSize.micro, fontFamily: tokens.typography.fontFamily.mono, color: tokens.colors.text.muted }, children: [
-                    formatDate(a.start),
-                    " ",
-                    formatTime(a.start),
-                    a.end ? ` → ${formatTime(a.end)}` : ""
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
-                  onViewInCalendar && /* @__PURE__ */ jsx("button", { "aria-label": `View ${a.title} in calendar`, onClick: () => onViewInCalendar(a), style: actionBtnStyle(tokens), title: "View in Calendar", children: "Calendar" }),
-                  onViewInTimeline && /* @__PURE__ */ jsx("button", { "aria-label": `View ${a.title} in timeline`, onClick: () => onViewInTimeline(a), style: actionBtnStyle(tokens), title: "View in Timeline", children: "Timeline" }),
-                  !readOnly && onActivityDelete && /* @__PURE__ */ jsx("button", { "aria-label": `Delete ${a.title}`, onClick: () => onActivityDelete(a.id), style: { ...actionBtnStyle(tokens), color: tokens.colors.status.critical }, title: "Delete", children: "Delete" })
-                ] })
-              ]
-            },
-            a.id
-          );
-        }) }) }),
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: `${tokens.spacing.xs}px ${panelPadX}px`,
-          borderTop: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          fontSize: tokens.typography.fontSize.micro,
-          color: tokens.colors.text.muted,
-          display: "flex",
-          justifyContent: "space-between"
-        }, children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            displayActivities.length,
-            " / ",
-            activities.length,
-            " activities"
-          ] }),
-          overlaps.size > 0 && showOverlapWarning && /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.status.caution }, children: [
-            "⚠ ",
-            overlaps.size,
-            " overlapping activities"
-          ] })
-        ] })
-      ]
-    }
-  );
+var ActivityPlanner = memo(function ActivityPlanner({ activities, timelines, selectedDate, height = 500, title = "Activity Planner", readOnly = false, showOverlapWarning = true, onActivityCreate, onActivityUpdate: _onActivityUpdate, onActivityDelete, onViewInCalendar, onViewInTimeline, className = "" }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [showForm, setShowForm] = useState(false);
+	const [filter, setFilter] = useState("");
+	const [sortBy, setSortBy] = useState("time");
+	const listRef = useRef(null);
+	const overlaps = useMemo(() => {
+		const pairs = [];
+		for (let i = 0; i < activities.length; i++) for (let j = i + 1; j < activities.length; j++) if (checkOverlap(activities[i], activities[j])) pairs.push([activities[i].id, activities[j].id]);
+		return new Set(pairs.flat());
+	}, [activities]);
+	const displayActivities = useMemo(() => {
+		let list = [...activities];
+		if (filter) {
+			const lf = filter.toLowerCase();
+			list = list.filter((a) => a.title.toLowerCase().includes(lf) || a.description?.toLowerCase().includes(lf) || a.timeline?.toLowerCase().includes(lf) || a.command?.toLowerCase().includes(lf));
+		}
+		switch (sortBy) {
+			case "time":
+				list.sort((a, b) => a.start.getTime() - b.start.getTime());
+				break;
+			case "status":
+				list.sort((a, b) => (a.status || "").localeCompare(b.status || ""));
+				break;
+			case "timeline":
+				list.sort((a, b) => (a.timeline || "").localeCompare(b.timeline || ""));
+				break;
+		}
+		return list;
+	}, [
+		activities,
+		filter,
+		sortBy
+	]);
+	const stats = useMemo(() => ({
+		total: activities.length,
+		scheduled: activities.filter((a) => a.status === "scheduled" || a.status === "created").length,
+		running: activities.filter((a) => a.status === "started").length,
+		completed: activities.filter((a) => a.status === "completed").length,
+		errors: activities.filter((a) => a.status === "error" || a.status === "failed" || a.status === "crashed").length
+	}), [activities]);
+	const handleCreate = useCallback((data) => {
+		onActivityCreate?.({
+			title: data.title,
+			type: data.type,
+			start: new Date(data.start),
+			end: new Date(data.end),
+			timeline: data.timeline,
+			description: data.description,
+			command: data.command || void 0,
+			script: data.script || void 0,
+			metadata: Object.keys(data.metadata).length > 0 ? data.metadata : void 0,
+			status: "created"
+		});
+		setShowForm(false);
+	}, [onActivityCreate]);
+	const panelPadX = tokens.spacing.md;
+	const panelPadY = tokens.spacing.sm;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `activity-planner ${className}`,
+		style: {
+			height: typeof height === "number" ? height : void 0,
+			background: tokens.colors.background.base,
+			...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+			borderRadius: tokens.borderRadius.lg,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			fontFamily: tokens.typography.fontFamily.primary,
+			color: tokens.colors.text.primary,
+			backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: `${panelPadY}px ${panelPadX}px`,
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					backdropFilter: "blur(8px)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.sm
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						style: {
+							fontWeight: 500,
+							fontSize: tokens.typography.fontSize.sm
+						},
+						children: title
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							gap: 10,
+							fontSize: tokens.typography.fontSize.xxs,
+							color: tokens.colors.text.muted
+						},
+						children: [
+							/* @__PURE__ */ jsxs("span", { children: ["Scheduled ", stats.scheduled] }),
+							/* @__PURE__ */ jsxs("span", {
+								style: { color: tokens.colors.text.secondary },
+								children: ["Running ", stats.running]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								style: { color: tokens.colors.text.secondary },
+								children: ["Completed ", stats.completed]
+							}),
+							stats.errors > 0 && /* @__PURE__ */ jsxs("span", {
+								style: { color: tokens.colors.status.critical },
+								children: ["Errors ", stats.errors]
+							})
+						]
+					})]
+				}), !readOnly && /* @__PURE__ */ jsx("button", {
+					onClick: () => setShowForm(!showForm),
+					style: {
+						background: showForm ? tokens.colors.status.critical + "22" : tokens.colors.interactive.default,
+						color: showForm ? tokens.colors.status.critical : tokens.colors.text.inverse,
+						border: "none",
+						borderRadius: tokens.borderRadius.md,
+						padding: "3px 10px",
+						fontSize: tokens.typography.fontSize.xs,
+						fontWeight: 500,
+						cursor: "pointer",
+						transition: "all 150ms ease"
+					},
+					children: showForm ? "✕ Cancel" : "+ New Activity"
+				})]
+			}),
+			showForm && !readOnly && /* @__PURE__ */ jsx("div", {
+				style: {
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface + "88"
+				},
+				children: /* @__PURE__ */ jsx(ActivityForm, {
+					timelines,
+					selectedDate,
+					tokens,
+					onSubmit: handleCreate,
+					onCancel: () => setShowForm(false)
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: `${tokens.spacing.xs}px ${panelPadX}px`,
+					display: "flex",
+					gap: 6,
+					alignItems: "center",
+					borderBottom: `1px solid ${tokens.colors.border.muted}`
+				},
+				children: [/* @__PURE__ */ jsx("input", {
+					value: filter,
+					onChange: (e) => setFilter(e.target.value),
+					"aria-label": "Search activities",
+					placeholder: "Search activities...",
+					style: {
+						flex: 1,
+						background: tokens.colors.background.surface,
+						color: tokens.colors.text.primary,
+						border: `1px solid ${tokens.colors.border.muted}`,
+						borderRadius: tokens.borderRadius.md,
+						padding: "3px 8px",
+						fontSize: tokens.typography.fontSize.xxs,
+						fontFamily: tokens.typography.fontFamily.primary,
+						transition: "all 150ms ease"
+					}
+				}), /* @__PURE__ */ jsxs("select", {
+					value: sortBy,
+					onChange: (e) => setSortBy(e.target.value),
+					"aria-label": "Sort activities",
+					style: {
+						background: tokens.colors.background.surface,
+						color: tokens.colors.text.secondary,
+						border: `1px solid ${tokens.colors.border.muted}`,
+						borderRadius: tokens.borderRadius.md,
+						padding: "3px 6px",
+						fontSize: tokens.typography.fontSize.xxs,
+						transition: "all 150ms ease"
+					},
+					children: [
+						/* @__PURE__ */ jsx("option", {
+							value: "time",
+							children: "Sort: Time"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "status",
+							children: "Sort: Status"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "timeline",
+							children: "Sort: Timeline"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: listRef,
+				style: {
+					flex: 1,
+					overflow: "auto",
+					padding: 8
+				},
+				children: displayActivities.length === 0 ? /* @__PURE__ */ jsx("div", {
+					style: {
+						textAlign: "center",
+						color: tokens.colors.text.muted,
+						padding: 40,
+						fontSize: tokens.typography.fontSize.xs
+					},
+					children: filter ? "No matching activities" : "No activities scheduled"
+				}) : /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: 4
+					},
+					children: displayActivities.map((a) => {
+						const color = a.color || getStatusColor(a.status, tokens);
+						const hasOverlap = overlaps.has(a.id);
+						return /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "grid",
+								gridTemplateColumns: "24px 1fr auto",
+								alignItems: "center",
+								gap: tokens.spacing.sm,
+								padding: "6px 10px",
+								background: hasOverlap ? `${tokens.colors.status.caution}10` : `${color}08`,
+								borderLeft: `3px solid ${color}`,
+								borderRadius: tokens.borderRadius.md,
+								fontSize: tokens.typography.fontSize.xs,
+								cursor: "pointer",
+								border: hasOverlap && showOverlapWarning ? `1px solid ${tokens.colors.status.caution}44` : void 0,
+								transition: "all 150ms ease"
+							},
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									style: { textAlign: "center" },
+									children: /* @__PURE__ */ jsx("span", {
+										style: {
+											color,
+											fontSize: tokens.typography.fontSize.sm,
+											fontWeight: 500
+										},
+										children: getStatusIcon(a.status)
+									})
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: { overflow: "hidden" },
+									children: [/* @__PURE__ */ jsxs("div", {
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: 6,
+											marginBottom: 2
+										},
+										children: [
+											/* @__PURE__ */ jsx("span", {
+												style: {
+													fontWeight: 500,
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													whiteSpace: "nowrap"
+												},
+												children: a.title
+											}),
+											a.timeline && /* @__PURE__ */ jsx("span", {
+												style: {
+													fontSize: tokens.typography.fontSize.micro,
+													background: tokens.colors.background.surface,
+													padding: `0 ${tokens.spacing.xs}px`,
+													borderRadius: tokens.borderRadius.sm,
+													color: tokens.colors.text.muted
+												},
+												children: a.timeline
+											}),
+											hasOverlap && showOverlapWarning && /* @__PURE__ */ jsx("span", {
+												style: {
+													fontSize: tokens.typography.fontSize.micro,
+													color: tokens.colors.status.caution,
+													fontWeight: 500
+												},
+												children: "⚠ OVERLAP"
+											})
+										]
+									}), /* @__PURE__ */ jsxs("div", {
+										style: {
+											fontSize: tokens.typography.fontSize.micro,
+											fontFamily: tokens.typography.fontFamily.mono,
+											color: tokens.colors.text.muted
+										},
+										children: [
+											formatDate(a.start),
+											" ",
+											formatTime(a.start),
+											a.end ? ` → ${formatTime(a.end)}` : ""
+										]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										display: "flex",
+										gap: 4
+									},
+									children: [
+										onViewInCalendar && /* @__PURE__ */ jsx("button", {
+											"aria-label": `View ${a.title} in calendar`,
+											onClick: () => onViewInCalendar(a),
+											style: actionBtnStyle(tokens),
+											title: "View in Calendar",
+											children: "Calendar"
+										}),
+										onViewInTimeline && /* @__PURE__ */ jsx("button", {
+											"aria-label": `View ${a.title} in timeline`,
+											onClick: () => onViewInTimeline(a),
+											style: actionBtnStyle(tokens),
+											title: "View in Timeline",
+											children: "Timeline"
+										}),
+										!readOnly && onActivityDelete && /* @__PURE__ */ jsx("button", {
+											"aria-label": `Delete ${a.title}`,
+											onClick: () => onActivityDelete(a.id),
+											style: {
+												...actionBtnStyle(tokens),
+												color: tokens.colors.status.critical
+											},
+											title: "Delete",
+											children: "Delete"
+										})
+									]
+								})
+							]
+						}, a.id);
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: `${tokens.spacing.xs}px ${panelPadX}px`,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					fontSize: tokens.typography.fontSize.micro,
+					color: tokens.colors.text.muted,
+					display: "flex",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					displayActivities.length,
+					" / ",
+					activities.length,
+					" activities"
+				] }), overlaps.size > 0 && showOverlapWarning && /* @__PURE__ */ jsxs("span", {
+					style: { color: tokens.colors.status.caution },
+					children: [
+						"⚠ ",
+						overlaps.size,
+						" overlapping activities"
+					]
+				})]
+			})
+		]
+	});
 });
 function actionBtnStyle(tokens) {
-  return {
-    background: "transparent",
-    border: `1px solid ${tokens.colors.border.muted}`,
-    borderRadius: tokens.borderRadius.sm,
-    padding: `2px ${tokens.spacing.xs}px`,
-    fontSize: tokens.typography.fontSize.xxs,
-    cursor: "pointer",
-    lineHeight: 1,
-    transition: "all 150ms ease"
-  };
+	return {
+		background: "transparent",
+		border: `1px solid ${tokens.colors.border.muted}`,
+		borderRadius: tokens.borderRadius.sm,
+		padding: `2px ${tokens.spacing.xs}px`,
+		fontSize: tokens.typography.fontSize.xxs,
+		cursor: "pointer",
+		lineHeight: 1,
+		transition: "all 150ms ease"
+	};
 }
-export {
-  ActivityPlanner
-};
-//# sourceMappingURL=ActivityPlanner.js.map
+//#endregion
+export { ActivityPlanner, ActivityPlanner as default };
+
+//# sourceMappingURL=ActivityPlanner.js.map