@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/notes/NoteCard.js

@@ -0,0 +1,146 @@
+import { useState as e } from "react";
+import { useI18n as t } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Edit as n, FileText as r, MoreVertical as i, Pin as a, PinOff as o, Tag as s, Trash2 as c } from "lucide-react";
+import { AnimatePresence as l, motion as u } from "framer-motion";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/notes/NoteCard.tsx
+function p({ note: p, onOpen: m, onEdit: h, onDelete: g, onPin: _, onUnpin: v }) {
+	let { t: y } = t(), [b, x] = e(!1);
+	return /* @__PURE__ */ f(u.div, {
+		whileHover: {
+			y: -2,
+			transition: {
+				duration: .15,
+				ease: [
+					.4,
+					0,
+					.2,
+					1
+				]
+			}
+		},
+		whileTap: { scale: .98 },
+		className: "bg-bg-surface border border-border-default rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer",
+		onClick: () => m?.(p),
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex items-start gap-3 min-w-0",
+					children: [/* @__PURE__ */ d("div", {
+						className: "flex-shrink-0 w-10 h-10 rounded-lg bg-status-warning-bg flex items-center justify-center",
+						children: /* @__PURE__ */ d(r, { className: "w-5 h-5 text-status-warning-text" })
+					}), /* @__PURE__ */ f("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ f("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ d("h3", {
+								className: "font-semibold text-text-primary truncate",
+								children: p.title
+							}), p.isPinned && /* @__PURE__ */ d(a, { className: "w-4 h-4 text-status-warning-text flex-shrink-0" })]
+						}), /* @__PURE__ */ d("p", {
+							className: "text-xs text-text-secondary",
+							children: ((e) => new Date(e).toLocaleDateString("en-US", {
+								month: "short",
+								day: "numeric",
+								year: "numeric"
+							}))(p.updatedAt)
+						})]
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ d("button", {
+						onClick: (e) => {
+							e.stopPropagation(), x(!b);
+						},
+						className: "p-1 rounded hover:bg-bg-sunken transition-colors",
+						children: /* @__PURE__ */ d(i, { className: "w-4 h-4 text-text-secondary" })
+					}), /* @__PURE__ */ d(l, { children: b && /* @__PURE__ */ f(u.div, {
+						initial: {
+							opacity: 0,
+							scale: .95,
+							y: -4
+						},
+						animate: {
+							opacity: 1,
+							scale: 1,
+							y: 0
+						},
+						exit: {
+							opacity: 0,
+							scale: .95,
+							y: -4
+						},
+						transition: { duration: .15 },
+						className: "absolute right-0 mt-1 w-36 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10",
+						children: [
+							h && /* @__PURE__ */ f(u.button, {
+								whileTap: { scale: .97 },
+								onClick: (e) => {
+									e.stopPropagation(), h(p), x(!1);
+								},
+								className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg",
+								children: [/* @__PURE__ */ d(n, { className: "w-4 h-4" }), "Edit"]
+							}),
+							p.isPinned && v && /* @__PURE__ */ f(u.button, {
+								whileTap: { scale: .97 },
+								onClick: (e) => {
+									e.stopPropagation(), v(p), x(!1);
+								},
+								className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken",
+								children: [/* @__PURE__ */ d(o, { className: "w-4 h-4" }), "Unpin"]
+							}),
+							!p.isPinned && _ && /* @__PURE__ */ f(u.button, {
+								whileTap: { scale: .97 },
+								onClick: (e) => {
+									e.stopPropagation(), _(p), x(!1);
+								},
+								className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken",
+								children: [/* @__PURE__ */ d(a, { className: "w-4 h-4" }), "Pin"]
+							}),
+							g && /* @__PURE__ */ f(u.button, {
+								whileTap: { scale: .97 },
+								onClick: (e) => {
+									e.stopPropagation(), g(p), x(!1);
+								},
+								className: "flex items-center gap-2 w-full px-3 py-2 text-sm text-status-error-text hover:bg-bg-sunken rounded-b-lg",
+								children: [/* @__PURE__ */ d(c, { className: "w-4 h-4" }), "Delete"]
+							})
+						]
+					}) })]
+				})]
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "mt-3 text-sm text-text-secondary line-clamp-2",
+				children: ((e) => {
+					let t = e.replace(/^#+\s+/gm, "").replace(/\n/g, " ").trim();
+					return t.length > 100 ? t.slice(0, 100) + "..." : t;
+				})(p.content)
+			}),
+			p.tagAssignments && p.tagAssignments.length > 0 ? /* @__PURE__ */ f("div", {
+				className: "mt-3 flex flex-wrap gap-1",
+				children: [p.tagAssignments.slice(0, 3).map((e) => /* @__PURE__ */ f("span", {
+					className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg rounded",
+					style: e.tag?.color ? { borderLeft: `3px solid ${e.tag.color}` } : void 0,
+					children: [/* @__PURE__ */ d(s, { className: "w-3 h-3" }), e.tag?.label ?? e.tagId.slice(0, 8)]
+				}, e.id)), p.tagAssignments.length > 3 && /* @__PURE__ */ f("span", {
+					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+					children: ["+", p.tagAssignments.length - 3]
+				})]
+			}) : p.tags && p.tags.length > 0 ? /* @__PURE__ */ f("div", {
+				className: "mt-3 flex flex-wrap gap-1",
+				children: [p.tags.slice(0, 3).map((e) => /* @__PURE__ */ f("span", {
+					className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+					children: [/* @__PURE__ */ d(s, { className: "w-3 h-3" }), e]
+				}, e)), p.tags.length > 3 && /* @__PURE__ */ f("span", {
+					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+					children: ["+", p.tags.length - 3]
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { p as NoteCard };
+
+//# sourceMappingURL=NoteCard.js.map

package/dist/components/notes/NoteCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoteCard.js","names":[],"sources":["../../../src/components/notes/NoteCard.tsx"],"sourcesContent":["import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { FileText, Pin, Tag, MoreVertical, Edit, Trash2, PinOff } from 'lucide-react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport type { Note } from './types';\n\ninterface NoteCardProps {\n  note: Note;\n  onOpen?: (note: Note) => void;\n  onEdit?: (note: Note) => void;\n  onDelete?: (note: Note) => void;\n  onPin?: (note: Note) => void;\n  onUnpin?: (note: Note) => void;\n}\n\nexport function NoteCard({ note, onOpen, onEdit, onDelete, onPin, onUnpin }: NoteCardProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n  const [showMenu, setShowMenu] = useState(false);\n\n  const formatDate = (dateStr: string) => {\n    return new Date(dateStr).toLocaleDateString('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n  };\n\n  const getPreview = (content: string) => {\n    // Remove markdown headers and get first 100 chars\n    const text = content\n      .replace(/^#+\\s+/gm, '')\n      .replace(/\\n/g, ' ')\n      .trim();\n    return text.length > 100 ? text.slice(0, 100) + '...' : text;\n  };\n\n  return (\n    <motion.div\n      whileHover={{ y: -2, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}\n      whileTap={{ scale: 0.98 }}\n      className=\"bg-bg-surface border border-border-default rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer\"\n      onClick={() => onOpen?.(note)}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex items-start gap-3 min-w-0\">\n          <div className=\"flex-shrink-0 w-10 h-10 rounded-lg bg-status-warning-bg flex items-center justify-center\">\n            <FileText className=\"w-5 h-5 text-status-warning-text\" />\n          </div>\n          <div className=\"min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <h3 className=\"font-semibold text-text-primary truncate\">{note.title}</h3>\n              {note.isPinned && <Pin className=\"w-4 h-4 text-status-warning-text flex-shrink-0\" />}\n            </div>\n            <p className=\"text-xs text-text-secondary\">{formatDate(note.updatedAt)}</p>\n          </div>\n        </div>\n        <div className=\"relative\">\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              setShowMenu(!showMenu);\n            }}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n          >\n            <MoreVertical className=\"w-4 h-4 text-text-secondary\" />\n          </button>\n          <AnimatePresence>\n            {showMenu && (\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95, y: -4 }}\n                animate={{ opacity: 1, scale: 1, y: 0 }}\n                exit={{ opacity: 0, scale: 0.95, y: -4 }}\n                transition={{ duration: 0.15 }}\n                className=\"absolute right-0 mt-1 w-36 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10\"\n              >\n                {onEdit && (\n                  <motion.button\n                    whileTap={{ scale: 0.97 }}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onEdit(note);\n                      setShowMenu(false);\n                    }}\n                    className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-t-lg\"\n                  >\n                    <Edit className=\"w-4 h-4\" />\n                    Edit\n                  </motion.button>\n                )}\n                {note.isPinned && onUnpin && (\n                  <motion.button\n                    whileTap={{ scale: 0.97 }}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onUnpin(note);\n                      setShowMenu(false);\n                    }}\n                    className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                  >\n                    <PinOff className=\"w-4 h-4\" />\n                    Unpin\n                  </motion.button>\n                )}\n                {!note.isPinned && onPin && (\n                  <motion.button\n                    whileTap={{ scale: 0.97 }}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onPin(note);\n                      setShowMenu(false);\n                    }}\n                    className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken\"\n                  >\n                    <Pin className=\"w-4 h-4\" />\n                    Pin\n                  </motion.button>\n                )}\n                {onDelete && (\n                  <motion.button\n                    whileTap={{ scale: 0.97 }}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onDelete(note);\n                      setShowMenu(false);\n                    }}\n                    className=\"flex items-center gap-2 w-full px-3 py-2 text-sm text-status-error-text hover:bg-bg-sunken rounded-b-lg\"\n                  >\n                    <Trash2 className=\"w-4 h-4\" />\n                    Delete\n                  </motion.button>\n                )}\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      </div>\n\n      <p className=\"mt-3 text-sm text-text-secondary line-clamp-2\">{getPreview(note.content)}</p>\n\n      {/* Render tagAssignments if available, otherwise fall back to legacy string tags */}\n      {note.tagAssignments && note.tagAssignments.length > 0 ? (\n        <div className=\"mt-3 flex flex-wrap gap-1\">\n          {note.tagAssignments.slice(0, 3).map((assignment) => (\n            <span\n              key={assignment.id}\n              className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg rounded\"\n              style={\n                assignment.tag?.color\n                  ? { borderLeft: `3px solid ${assignment.tag.color}` }\n                  : undefined\n              }\n            >\n              <Tag className=\"w-3 h-3\" />\n              {assignment.tag?.label ?? assignment.tagId.slice(0, 8)}\n            </span>\n          ))}\n          {note.tagAssignments.length > 3 && (\n            <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n              +{note.tagAssignments.length - 3}\n            </span>\n          )}\n        </div>\n      ) : note.tags && note.tags.length > 0 ? (\n        <div className=\"mt-3 flex flex-wrap gap-1\">\n          {note.tags.slice(0, 3).map((tag) => (\n            <span\n              key={tag}\n              className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\"\n            >\n              <Tag className=\"w-3 h-3\" />\n              {tag}\n            </span>\n          ))}\n          {note.tags.length > 3 && (\n            <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n              +{note.tags.length - 3}\n            </span>\n          )}\n        </div>\n      ) : null}\n    </motion.div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/notes/NoteEditor.d.ts

@@ -0,0 +1,31 @@
+import { CreateNoteInput, Note } from './types';
+
+/** Tag selected in the editor */
+export interface SelectedTag {
+    id: string;
+    key: string;
+    label: string;
+    color: string | null;
+}
+/** Note data submitted from the editor — includes `id` and selected tag IDs */
+export type NoteEditorSubmitData = CreateNoteInput & {
+    id?: string;
+    selectedTagIds?: string[];
+};
+interface NoteEditorProps {
+    note?: Note;
+    vibeOptions?: {
+        id: string;
+        name: string;
+    }[];
+    /** Pre-set vibeId when creating a new note (used in vibe-scoped context) */
+    defaultVibeId?: string;
+    /** Hide the vibe dropdown (used when notes are scoped to a single vibe) */
+    hideVibeSelect?: boolean;
+    onSubmit: (data: NoteEditorSubmitData) => void;
+    onCancel: () => void;
+    isLoading?: boolean;
+}
+export declare function NoteEditor({ note, vibeOptions, defaultVibeId, hideVibeSelect, onSubmit, onCancel, isLoading, }: NoteEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NoteEditor.d.ts.map

package/dist/components/notes/NoteEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoteEditor.d.ts","sourceRoot":"","sources":["../../../src/components/notes/NoteEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAqB,MAAM,SAAS,CAAC;AAIxE,iCAAiC;AACjC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,+EAA+E;AAC/E,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAYhG,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,WAAgB,EAChB,aAAa,EACb,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,2CAkmBjB"}

package/dist/components/notes/NoteEditor.js

@@ -0,0 +1,433 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useAvailableNoteTagsQuery as t, useCreateNoteTagMutation as n } from "../../generated/wspace-operations.js";
+import { useEffect as r, useState as i } from "react";
+import { Check as a, Edit as o, Eye as s, Plus as c, Save as l, Tag as u, X as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/notes/NoteEditor.tsx
+var m = [
+	"var(--color-status-error-text)",
+	"var(--color-status-warning-text)",
+	"var(--color-status-success-text)",
+	"var(--color-accent-teal)",
+	"var(--color-text-link)",
+	"var(--color-accent-purple)",
+	"var(--color-text-tertiary)"
+];
+function h({ note: h, vibeOptions: g = [], defaultVibeId: _, hideVibeSelect: v, onSubmit: y, onCancel: b, isLoading: x }) {
+	let S = e(), [C, w] = i(!1), [T, E] = i({
+		title: h?.title || "",
+		content: h?.content || "",
+		vibeId: h?.vibeId || _ || "",
+		isPinned: h?.isPinned ?? !1
+	}), [D, O] = i(/* @__PURE__ */ new Set()), [k, A] = i(!1), [j, M] = i(!1), { data: N, refetch: P } = t(), F = (N?.availableNoteTags ?? []).map((e) => ({
+		id: e.id,
+		key: e.key,
+		label: e.label,
+		color: e.color ?? null
+	}));
+	r(() => {
+		if (k || F.length === 0) return;
+		let e = /* @__PURE__ */ new Set();
+		if (h?.tagAssignments && h.tagAssignments.length > 0) h.tagAssignments.forEach((t) => e.add(t.tagId));
+		else if (h?.tags && h.tags.length > 0) for (let t of h.tags) {
+			let n = F.find((e) => e.label.toLowerCase() === t.toLowerCase() || e.key === t.toLowerCase());
+			n && e.add(n.id);
+		}
+		e.size > 0 && O(e), A(!0);
+	}, [
+		F,
+		h,
+		k
+	]);
+	let [I] = n(), [L, R] = i(""), [z, B] = i("var(--color-accent-purple)"), [V, H] = i(!1), U = async () => {
+		let e = L.trim();
+		if (!(!e || V)) {
+			H(!0);
+			try {
+				let t = (await I({ variables: { input: {
+					label: e,
+					color: z
+				} } })).data?.createNoteTag;
+				t && (O((e) => new Set(e).add(t.id)), await P()), R("");
+			} catch (e) {
+				console.error("Failed to create tag:", e);
+			} finally {
+				H(!1);
+			}
+		}
+	}, W = (e) => {
+		O((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, G = (e) => {
+		e.preventDefault(), y({
+			...h?.id ? { id: h.id } : {},
+			workspaceId: "ws-demo-1",
+			title: T.title,
+			content: T.content,
+			vibeId: T.vibeId || void 0,
+			isPinned: T.isPinned,
+			selectedTagIds: Array.from(D)
+		});
+	}, K = (e) => {
+		let t = [], n = e, r = 0;
+		for (; n.length > 0;) {
+			let e = n.match(/^(\*\*|__)(.+?)\1/);
+			if (e) {
+				t.push(/* @__PURE__ */ f("strong", { children: K(e[2]) }, r++)), n = n.slice(e[0].length);
+				continue;
+			}
+			let i = n.match(/^(\*|_)([^*_]+?)\1/);
+			if (i) {
+				t.push(/* @__PURE__ */ f("em", { children: K(i[2]) }, r++)), n = n.slice(i[0].length);
+				continue;
+			}
+			let a = n.match(/^~~(.+?)~~/);
+			if (a) {
+				t.push(/* @__PURE__ */ f("del", { children: K(a[1]) }, r++)), n = n.slice(a[0].length);
+				continue;
+			}
+			let o = n.match(/^`([^`]+)`/);
+			if (o) {
+				t.push(/* @__PURE__ */ f("code", {
+					className: "bg-bg-elevated px-1.5 py-0.5 rounded text-sm font-mono text-text-primary",
+					children: o[1]
+				}, r++)), n = n.slice(o[0].length);
+				continue;
+			}
+			let s = n.match(/^\[([^\]]+)\]\(([^)]+)\)/);
+			if (s) {
+				let e = s[2];
+				/^(https?:\/\/|mailto:|\/|#)/i.test(e) ? t.push(/* @__PURE__ */ f("a", {
+					href: e,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "text-action-primary-bg hover:underline",
+					children: s[1]
+				}, r++)) : t.push(/* @__PURE__ */ f("span", {
+					className: "text-text-secondary",
+					children: s[1]
+				}, r++)), n = n.slice(s[0].length);
+				continue;
+			}
+			t.push(n[0]), n = n.slice(1);
+		}
+		return t;
+	};
+	return /* @__PURE__ */ f("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
+		children: /* @__PURE__ */ p("div", {
+			className: "w-full max-w-3xl bg-bg-surface rounded-lg shadow-xl max-h-[90vh] flex flex-col",
+			children: [/* @__PURE__ */ p("div", {
+				className: "flex items-center justify-between px-6 py-4 border-b border-border-default",
+				children: [/* @__PURE__ */ f("h2", {
+					className: "text-lg font-semibold text-text-primary",
+					children: h ? S("vibecontrols.notes.editNote", "Edit Note") : S("vibecontrols.notes.newNote", "New Note")
+				}), /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ p("button", {
+						type: "button",
+						onClick: () => w(!C),
+						className: `inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-md transition-colors ${C ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-primary hover:bg-bg-elevated"}`,
+						children: [f(C ? o : s, { className: "w-4 h-4" }), C ? S("vibecontrols.notes.edit", "Edit") : S("vibecontrols.notes.preview", "Preview")]
+					}), /* @__PURE__ */ f("button", {
+						onClick: b,
+						className: "p-1 rounded hover:bg-bg-sunken transition-colors",
+						children: /* @__PURE__ */ f(d, { className: "w-5 h-5 text-text-secondary" })
+					})]
+				})]
+			}), /* @__PURE__ */ p("form", {
+				onSubmit: G,
+				className: "flex-1 flex flex-col overflow-hidden",
+				children: [/* @__PURE__ */ p("div", {
+					className: "p-6 space-y-4 flex-1 overflow-y-auto",
+					children: [
+						/* @__PURE__ */ f("div", { children: /* @__PURE__ */ f("input", {
+							type: "text",
+							value: T.title,
+							onChange: (e) => E({
+								...T,
+								title: e.target.value
+							}),
+							placeholder: S("vibecontrols.notes.titlePlaceholder", "Note title..."),
+							required: !0,
+							className: "w-full px-0 py-2 text-lg sm:text-2xl font-bold bg-transparent border-0 border-b border-border-default text-text-primary placeholder:text-text-placeholder focus:outline-none focus:border-action-primary-bg"
+						}) }),
+						/* @__PURE__ */ p("div", {
+							className: `grid ${v ? "grid-cols-1" : "grid-cols-2"} gap-4`,
+							children: [!v && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								className: "block text-sm font-medium text-text-primary mb-1",
+								children: S("vibecontrols.notes.relatedVibe", "Related Vibe (optional)")
+							}), /* @__PURE__ */ p("select", {
+								value: T.vibeId,
+								onChange: (e) => E({
+									...T,
+									vibeId: e.target.value
+								}),
+								className: "w-full px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+								children: [/* @__PURE__ */ f("option", {
+									value: "",
+									children: "No vibe"
+								}), g.map((e) => /* @__PURE__ */ f("option", {
+									value: e.id,
+									children: e.name
+								}, e.id))]
+							})] }), /* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ f("label", {
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: S("vibecontrols.notes.tags", "Tags")
+								}),
+								/* @__PURE__ */ p("div", {
+									className: "flex flex-wrap gap-1.5 min-h-[38px] px-3 py-2 bg-bg-sunken border border-border-default rounded-md",
+									children: [F.filter((e) => D.has(e.id)).map((e) => /* @__PURE__ */ p("span", {
+										className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded",
+										children: [
+											/* @__PURE__ */ f(u, { className: "w-3 h-3" }),
+											e.label,
+											/* @__PURE__ */ f("button", {
+												type: "button",
+												onClick: () => W(e.id),
+												className: "ml-0.5 hover:text-status-error-text",
+												children: /* @__PURE__ */ f(d, { className: "w-3 h-3" })
+											})
+										]
+									}, e.id)), /* @__PURE__ */ p("button", {
+										type: "button",
+										onClick: () => M(!j),
+										className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs text-text-secondary hover:text-text-primary hover:bg-bg-elevated rounded transition-colors",
+										children: [/* @__PURE__ */ f(u, { className: "w-3 h-3" }), D.size === 0 ? "Add tags..." : "+"]
+									})]
+								}),
+								j && /* @__PURE__ */ p("div", {
+									className: "mt-1 bg-bg-surface border border-border-default rounded-md shadow-lg",
+									children: [
+										/* @__PURE__ */ p("div", {
+											className: "flex items-center gap-2 p-2 border-b border-border-subtle",
+											children: [
+												/* @__PURE__ */ f("span", {
+													"aria-hidden": "true",
+													className: "w-6 h-6 rounded-full border-2 border-border-default",
+													style: { backgroundColor: z }
+												}),
+												/* @__PURE__ */ f("input", {
+													type: "text",
+													value: L,
+													onChange: (e) => R(e.target.value),
+													onKeyDown: (e) => {
+														e.key === "Enter" && (e.preventDefault(), U());
+													},
+													placeholder: "New tag name... (Enter to create)",
+													disabled: V,
+													className: "flex-1 px-2 py-1 text-sm bg-bg-sunken border border-border-default rounded text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-1 focus:ring-action-primary-bg disabled:opacity-50"
+												}),
+												/* @__PURE__ */ f("button", {
+													type: "button",
+													onClick: U,
+													disabled: !L.trim() || V,
+													className: "p-1 text-action-primary-bg hover:bg-action-primary-bg/10 rounded transition-colors disabled:opacity-30",
+													children: /* @__PURE__ */ f(c, { className: "w-4 h-4" })
+												})
+											]
+										}),
+										/* @__PURE__ */ f("div", {
+											className: "flex items-center gap-1 px-2 py-1.5 border-b border-border-subtle",
+											children: m.map((e) => /* @__PURE__ */ f("button", {
+												type: "button",
+												onClick: () => B(e),
+												className: `w-4 h-4 rounded-full transition-transform ${z === e ? "ring-2 ring-action-primary-bg scale-125" : "hover:scale-110"}`,
+												style: { backgroundColor: e }
+											}, e))
+										}),
+										/* @__PURE__ */ f("div", {
+											className: "max-h-32 overflow-y-auto p-1",
+											children: F.length === 0 ? /* @__PURE__ */ f("p", {
+												className: "text-xs text-text-muted px-2 py-1",
+												children: "No tags yet — create one above"
+											}) : F.map((e) => /* @__PURE__ */ p("button", {
+												type: "button",
+												onClick: () => W(e.id),
+												className: "flex items-center justify-between w-full px-2 py-1.5 text-sm text-text-primary hover:bg-bg-sunken rounded transition-colors",
+												children: [/* @__PURE__ */ p("span", {
+													className: "flex items-center gap-2",
+													children: [e.color && /* @__PURE__ */ f("span", {
+														className: "w-2.5 h-2.5 rounded-full",
+														style: { backgroundColor: e.color }
+													}), e.label]
+												}), D.has(e.id) && /* @__PURE__ */ f(a, { className: "w-4 h-4 text-action-primary-bg" })]
+											}, e.id))
+										})
+									]
+								})
+							] })]
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "flex-1 min-h-[300px]",
+							children: C ? /* @__PURE__ */ f("div", {
+								className: "h-full p-4 bg-bg-sunken rounded-md prose prose-sm dark:prose-invert max-w-none overflow-y-auto",
+								children: ((e) => {
+									let t = e.split("\n"), n = [], r = 0;
+									for (; r < t.length;) {
+										let e = t[r];
+										if (e.startsWith("```")) {
+											let i = e.slice(3).trim(), a = [];
+											for (r++; r < t.length && !t[r].startsWith("```");) a.push(t[r]), r++;
+											n.push(/* @__PURE__ */ f("pre", {
+												className: "bg-bg-elevated rounded-md p-3 my-2 overflow-x-auto",
+												children: /* @__PURE__ */ p("code", {
+													className: "text-sm font-mono text-text-primary",
+													children: [i && /* @__PURE__ */ f("span", {
+														className: "text-xs text-text-secondary block mb-2",
+														children: i
+													}), a.join("\n")]
+												})
+											}, n.length)), r++;
+											continue;
+										}
+										if (e.startsWith("# ")) {
+											n.push(/* @__PURE__ */ f("h1", {
+												className: "text-2xl font-bold mb-2 mt-4",
+												children: K(e.slice(2))
+											}, n.length)), r++;
+											continue;
+										}
+										if (e.startsWith("## ")) {
+											n.push(/* @__PURE__ */ f("h2", {
+												className: "text-xl font-bold mb-2 mt-3",
+												children: K(e.slice(3))
+											}, n.length)), r++;
+											continue;
+										}
+										if (e.startsWith("### ")) {
+											n.push(/* @__PURE__ */ f("h3", {
+												className: "text-lg font-bold mb-2 mt-2",
+												children: K(e.slice(4))
+											}, n.length)), r++;
+											continue;
+										}
+										if (e.startsWith("> ")) {
+											n.push(/* @__PURE__ */ f("blockquote", {
+												className: "border-l-4 border-border-default pl-4 my-2 italic text-text-secondary",
+												children: K(e.slice(2))
+											}, n.length)), r++;
+											continue;
+										}
+										if (e.match(/^[-*] /)) {
+											let e = [];
+											for (; r < t.length && t[r].match(/^[-*] /);) e.push(/* @__PURE__ */ f("li", {
+												className: "list-disc",
+												children: K(t[r].slice(2))
+											}, e.length)), r++;
+											n.push(/* @__PURE__ */ f("ul", {
+												className: "ml-6 my-2",
+												children: e
+											}, n.length));
+											continue;
+										}
+										if (e.match(/^(\d+)\. /)) {
+											let e = [];
+											for (; r < t.length;) {
+												let n = t[r].match(/^(\d+)\. /);
+												if (!n) break;
+												e.push(/* @__PURE__ */ f("li", {
+													className: "list-decimal",
+													children: K(t[r].slice(n[0].length))
+												}, e.length)), r++;
+											}
+											n.push(/* @__PURE__ */ f("ol", {
+												className: "ml-6 my-2",
+												children: e
+											}, n.length));
+											continue;
+										}
+										if (e.match(/^(-{3,}|\*{3,})$/)) {
+											n.push(/* @__PURE__ */ f("hr", { className: "my-4 border-border-default" }, n.length)), r++;
+											continue;
+										}
+										if (e.startsWith("|") && e.endsWith("|")) {
+											let i = [e];
+											for (r++; r < t.length && t[r].startsWith("|") && t[r].endsWith("|");) i.push(t[r]), r++;
+											let a = i.filter((e) => !e.match(/^\|[\s\-:|]+\|$/)).map((e) => e.slice(1, -1).split("|").map((e) => e.trim()));
+											if (a.length > 0) {
+												let [e, ...t] = a;
+												n.push(/* @__PURE__ */ p("table", {
+													className: "w-full my-2 border-collapse text-sm",
+													children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ f("tr", {
+														className: "border-b border-border-default",
+														children: e.map((e, t) => /* @__PURE__ */ f("th", {
+															className: "text-left py-2 px-3 font-semibold text-text-primary",
+															children: K(e)
+														}, t))
+													}) }), /* @__PURE__ */ f("tbody", { children: t.map((e, t) => /* @__PURE__ */ f("tr", {
+														className: "border-b border-border-subtle",
+														children: e.map((e, t) => /* @__PURE__ */ f("td", {
+															className: "py-2 px-3 text-text-primary",
+															children: K(e)
+														}, t))
+													}, t)) })]
+												}, n.length));
+											}
+											continue;
+										}
+										if (e === "") {
+											n.push(/* @__PURE__ */ f("br", {}, n.length)), r++;
+											continue;
+										}
+										n.push(/* @__PURE__ */ f("p", {
+											className: "mb-1",
+											children: K(e)
+										}, n.length)), r++;
+									}
+									return n;
+								})(T.content)
+							}) : /* @__PURE__ */ f("textarea", {
+								value: T.content,
+								onChange: (e) => E({
+									...T,
+									content: e.target.value
+								}),
+								placeholder: S("vibecontrols.notes.contentPlaceholder", "Write your note in Markdown..."),
+								className: "w-full h-full min-h-[300px] px-3 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none font-mono"
+							})
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ f("input", {
+								type: "checkbox",
+								id: "isPinned",
+								checked: T.isPinned,
+								onChange: (e) => E({
+									...T,
+									isPinned: e.target.checked
+								}),
+								className: "w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg"
+							}), /* @__PURE__ */ f("label", {
+								htmlFor: "isPinned",
+								className: "text-sm text-text-primary",
+								children: S("vibecontrols.notes.pinThisNote", "Pin this note")
+							})]
+						})
+					]
+				}), /* @__PURE__ */ p("div", {
+					className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-border-default bg-bg-sunken",
+					children: [/* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: b,
+						disabled: x,
+						className: "px-4 py-2 text-sm font-medium text-text-primary bg-bg-surface border border-border-default rounded-md hover:bg-bg-elevated transition-colors disabled:opacity-50",
+						children: S("vibecontrols.notes.cancel", "Cancel")
+					}), /* @__PURE__ */ p("button", {
+						type: "submit",
+						disabled: x,
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+						children: [/* @__PURE__ */ f(l, { className: "w-4 h-4" }), x ? S("vibecontrols.notes.saving", "Saving...") : S("vibecontrols.notes.saveNote", "Save Note")]
+					})]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { h as NoteEditor };
+
+//# sourceMappingURL=NoteEditor.js.map