@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/shared/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../src/components/shared/ConfirmDialog.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { X, AlertTriangle } from 'lucide-react';\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface ConfirmDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void;\n  title: string;\n  message: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: 'danger' | 'warning' | 'default';\n  isLoading?: boolean;\n}\n\nexport function ConfirmDialog({\n  isOpen,\n  onClose,\n  onConfirm,\n  title,\n  message,\n  confirmLabel,\n  cancelLabel,\n  variant = 'default',\n  isLoading = false,\n}: ConfirmDialogProps) {\n  const tr = useTr();\n  const resolvedConfirmLabel =\n    confirmLabel ?? tr('vibecontrols.shared.confirmDialog.confirm', 'Confirm');\n  const resolvedCancelLabel =\n    cancelLabel ?? tr('vibecontrols.shared.confirmDialog.cancel', 'Cancel');\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const shouldReduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen) {\n      dialog.showModal();\n    } else {\n      dialog.close();\n    }\n  }, [isOpen]);\n\n  const variantStyles = {\n    danger: {\n      icon: 'bg-status-error-bg-subtle text-status-error-text',\n      button: 'bg-status-error-bg text-text-inverse hover:bg-status-error-text-hover',\n    },\n    warning: {\n      icon: 'bg-status-warning-bg-subtle text-status-warning-text',\n      button: 'bg-status-warning-bg text-text-primary hover:bg-status-warning-text-hover',\n    },\n    default: {\n      icon: 'bg-action-primary-bg text-action-primary-text',\n      button: 'bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover',\n    },\n  };\n\n  const styles = variantStyles[variant];\n\n  if (!isOpen) return null;\n\n  return (\n    <dialog\n      ref={dialogRef}\n      className=\"fixed inset-0 z-50 m-auto p-0 bg-transparent backdrop:bg-transparent\"\n      onClose={onClose}\n    >\n      <AnimatePresence>\n        {isOpen && (\n          <>\n            <motion.div\n              className=\"fixed inset-0 bg-bg-overlay\"\n              initial={shouldReduceMotion ? undefined : { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2 }}\n              onClick={onClose}\n            />\n            <motion.div\n              className=\"relative w-full max-w-md bg-bg-surface rounded-lg shadow-xl\"\n              initial={shouldReduceMotion ? undefined : { opacity: 0, scale: 0.95, y: 8 }}\n              animate={{ opacity: 1, scale: 1, y: 0 }}\n              exit={{ opacity: 0, scale: 0.95, y: 8 }}\n              transition={{\n                duration: 0.2,\n                ease: [0.2, 0, 0, 1],\n              }}\n            >\n              <div className=\"flex items-start gap-4 p-6\">\n                <motion.div\n                  className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                  initial={shouldReduceMotion ? undefined : { scale: 0.5 }}\n                  animate={{ scale: 1 }}\n                  transition={{ type: 'spring', stiffness: 400, damping: 15, delay: 0.1 }}\n                >\n                  <AlertTriangle className=\"w-5 h-5\" />\n                </motion.div>\n                <div className=\"flex-1 min-w-0\">\n                  <h3 className=\"text-lg font-semibold text-text-primary\">{title}</h3>\n                  <p className=\"mt-2 text-sm text-text-secondary\">{message}</p>\n                </div>\n                <button\n                  onClick={onClose}\n                  className=\"flex-shrink-0 p-1 rounded hover:bg-bg-sunken transition-colors\"\n                >\n                  <X className=\"w-5 h-5 text-text-secondary\" />\n                </button>\n              </div>\n              <div className=\"flex items-center justify-end gap-3 px-6 py-4 bg-bg-sunken rounded-b-lg\">\n                <motion.button\n                  onClick={onClose}\n                  disabled={isLoading}\n                  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\"\n                  whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}\n                >\n                  {resolvedCancelLabel}\n                </motion.button>\n                <motion.button\n                  onClick={onConfirm}\n                  disabled={isLoading}\n                  className={`px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 ${styles.button}`}\n                  whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}\n                >\n                  {isLoading\n                    ? tr('vibecontrols.shared.confirmDialog.processing', 'Processing...')\n                    : resolvedConfirmLabel}\n                </motion.button>\n              </div>\n            </motion.div>\n          </>\n        )}\n      </AnimatePresence>\n    </dialog>\n  );\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,EAAc,EAC5B,WACA,YACA,cACA,UACA,YACA,iBACA,gBACA,aAAU,WACV,eAAY,MACS;CACrB,IAAM,IAAK,GAAO,EACZ,IACJ,KAAgB,EAAG,6CAA6C,UAAU,EACtE,IACJ,KAAe,EAAG,4CAA4C,SAAS,EACnE,IAAY,EAA0B,KAAK,EAC3C,IAAqB,GAAkB;AAE7C,SAAgB;EACd,IAAM,IAAS,EAAU;AACpB,QAED,IACF,EAAO,WAAW,GAElB,EAAO,OAAO;IAEf,CAAC,EAAO,CAAC;CAiBZ,IAAM,IAfgB;EACpB,QAAQ;GACN,MAAM;GACN,QAAQ;GACT;EACD,SAAS;GACP,MAAM;GACN,QAAQ;GACT;EACD,SAAS;GACP,MAAM;GACN,QAAQ;GACT;EACF,CAE4B;AAI7B,QAFK,IAGH,kBAAC,UAAD;EACE,KAAK;EACL,WAAU;EACD;YAET,kBAAC,GAAD,EAAA,UACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,EAAO,KAAR;GACE,WAAU;GACV,SAAS,IAAqB,KAAA,IAAY,EAAE,SAAS,GAAG;GACxD,SAAS,EAAE,SAAS,GAAG;GACvB,MAAM,EAAE,SAAS,GAAG;GACpB,YAAY,EAAE,UAAU,IAAK;GAC7B,SAAS;GACT,CAAA,EACF,kBAAC,EAAO,KAAR;GACE,WAAU;GACV,SAAS,IAAqB,KAAA,IAAY;IAAE,SAAS;IAAG,OAAO;IAAM,GAAG;IAAG;GAC3E,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG,GAAG;IAAG;GACvC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM,GAAG;IAAG;GACvC,YAAY;IACV,UAAU;IACV,MAAM;KAAC;KAAK;KAAG;KAAG;KAAE;IACrB;aARH,CAUE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,EAAO,KAAR;MACE,WAAW,yEAAyE,EAAO;MAC3F,SAAS,IAAqB,KAAA,IAAY,EAAE,OAAO,IAAK;MACxD,SAAS,EAAE,OAAO,GAAG;MACrB,YAAY;OAAE,MAAM;OAAU,WAAW;OAAK,SAAS;OAAI,OAAO;OAAK;gBAEvE,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;MAC1B,CAAA;KACb,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAA2C;OAAW,CAAA,EACpE,kBAAC,KAAD;OAAG,WAAU;iBAAoC;OAAY,CAAA,CACzD;;KACN,kBAAC,UAAD;MACE,SAAS;MACT,WAAU;gBAEV,kBAAC,GAAD,EAAG,WAAU,+BAAgC,CAAA;MACtC,CAAA;KACL;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,EAAO,QAAR;KACE,SAAS;KACT,UAAU;KACV,WAAU;KACV,UAAU,IAAqB,KAAA,IAAY,EAAE,OAAO,KAAM;eAEzD;KACa,CAAA,EAChB,kBAAC,EAAO,QAAR;KACE,SAAS;KACT,UAAU;KACV,WAAW,kFAAkF,EAAO;KACpG,UAAU,IAAqB,KAAA,IAAY,EAAE,OAAO,KAAM;eAEzD,IACG,EAAG,gDAAgD,gBAAgB,GACnE;KACU,CAAA,CACZ;MACK;KACZ,EAAA,CAAA,EAEW,CAAA;EACX,CAAA,GAzES"}

package/dist/components/shared/EmptyState.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+}
+export declare function EmptyState({ icon, title, description, action }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/shared/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/shared/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,eAAe,2CA6D/E"}

package/dist/components/shared/EmptyState.js

@@ -0,0 +1,108 @@
+import { Inbox as e } from "lucide-react";
+import { motion as t, useReducedMotion as n } from "framer-motion";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/shared/EmptyState.tsx
+function a({ icon: a, title: o, description: s, action: c }) {
+	return n() ? /* @__PURE__ */ i("div", {
+		className: "flex flex-col items-center justify-center py-12 px-4 text-center",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "w-16 h-16 rounded-full bg-bg-sunken flex items-center justify-center mb-4",
+				children: a || /* @__PURE__ */ r(e, { className: "w-8 h-8 text-text-secondary" })
+			}),
+			/* @__PURE__ */ r("h3", {
+				className: "text-lg font-semibold text-text-primary mb-1",
+				children: o
+			}),
+			s && /* @__PURE__ */ r("p", {
+				className: "text-sm text-text-secondary mb-4 max-w-md",
+				children: s
+			}),
+			c && /* @__PURE__ */ r("div", {
+				className: "mt-2",
+				children: c
+			})
+		]
+	}) : /* @__PURE__ */ i(t.div, {
+		className: "flex flex-col items-center justify-center py-12 px-4 text-center",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		transition: { duration: .25 },
+		children: [
+			/* @__PURE__ */ r(t.div, {
+				className: "w-16 h-16 rounded-full bg-bg-sunken flex items-center justify-center mb-4",
+				initial: {
+					scale: .5,
+					opacity: 0
+				},
+				animate: {
+					scale: 1,
+					opacity: 1
+				},
+				transition: {
+					duration: .35,
+					ease: [
+						.2,
+						0,
+						0,
+						1
+					],
+					delay: .1
+				},
+				children: a || /* @__PURE__ */ r(e, { className: "w-8 h-8 text-text-secondary" })
+			}),
+			/* @__PURE__ */ r(t.h3, {
+				className: "text-lg font-semibold text-text-primary mb-1",
+				initial: {
+					opacity: 0,
+					y: 6
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: {
+					duration: .25,
+					delay: .2
+				},
+				children: o
+			}),
+			s && /* @__PURE__ */ r(t.p, {
+				className: "text-sm text-text-secondary mb-4 max-w-md",
+				initial: {
+					opacity: 0,
+					y: 6
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: {
+					duration: .25,
+					delay: .3
+				},
+				children: s
+			}),
+			c && /* @__PURE__ */ r(t.div, {
+				className: "mt-2",
+				initial: {
+					opacity: 0,
+					y: 6
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: {
+					duration: .25,
+					delay: .4
+				},
+				children: c
+			})
+		]
+	});
+}
+//#endregion
+export { a as EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/shared/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/components/shared/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Inbox } from 'lucide-react';\nimport { motion, useReducedMotion } from 'framer-motion';\n\ninterface EmptyStateProps {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n}\n\nexport function EmptyState({ icon, title, description, action }: EmptyStateProps) {\n  const shouldReduceMotion = useReducedMotion();\n\n  if (shouldReduceMotion) {\n    return (\n      <div className=\"flex flex-col items-center justify-center py-12 px-4 text-center\">\n        <div className=\"w-16 h-16 rounded-full bg-bg-sunken flex items-center justify-center mb-4\">\n          {icon || <Inbox className=\"w-8 h-8 text-text-secondary\" />}\n        </div>\n        <h3 className=\"text-lg font-semibold text-text-primary mb-1\">{title}</h3>\n        {description && <p className=\"text-sm text-text-secondary mb-4 max-w-md\">{description}</p>}\n        {action && <div className=\"mt-2\">{action}</div>}\n      </div>\n    );\n  }\n\n  return (\n    <motion.div\n      className=\"flex flex-col items-center justify-center py-12 px-4 text-center\"\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.25 }}\n    >\n      <motion.div\n        className=\"w-16 h-16 rounded-full bg-bg-sunken flex items-center justify-center mb-4\"\n        initial={{ scale: 0.5, opacity: 0 }}\n        animate={{ scale: 1, opacity: 1 }}\n        transition={{ duration: 0.35, ease: [0.2, 0, 0, 1], delay: 0.1 }}\n      >\n        {icon || <Inbox className=\"w-8 h-8 text-text-secondary\" />}\n      </motion.div>\n      <motion.h3\n        className=\"text-lg font-semibold text-text-primary mb-1\"\n        initial={{ opacity: 0, y: 6 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.25, delay: 0.2 }}\n      >\n        {title}\n      </motion.h3>\n      {description && (\n        <motion.p\n          className=\"text-sm text-text-secondary mb-4 max-w-md\"\n          initial={{ opacity: 0, y: 6 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.25, delay: 0.3 }}\n        >\n          {description}\n        </motion.p>\n      )}\n      {action && (\n        <motion.div\n          className=\"mt-2\"\n          initial={{ opacity: 0, y: 6 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.25, delay: 0.4 }}\n        >\n          {action}\n        </motion.div>\n      )}\n    </motion.div>\n  );\n}\n"],"mappings":";;;;AAWA,SAAgB,EAAW,EAAE,SAAM,UAAO,gBAAa,aAA2B;AAgBhF,QAf2B,GAAkB,GAIzC,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cACZ,KAAQ,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA;IACtD,CAAA;GACN,kBAAC,MAAD;IAAI,WAAU;cAAgD;IAAW,CAAA;GACxE,KAAe,kBAAC,KAAD;IAAG,WAAU;cAA6C;IAAgB,CAAA;GACzF,KAAU,kBAAC,OAAD;IAAK,WAAU;cAAQ;IAAa,CAAA;GAC3C;MAKR,kBAAC,EAAO,KAAR;EACE,WAAU;EACV,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,YAAY,EAAE,UAAU,KAAM;YAJhC;GAME,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS;KAAE,OAAO;KAAK,SAAS;KAAG;IACnC,SAAS;KAAE,OAAO;KAAG,SAAS;KAAG;IACjC,YAAY;KAAE,UAAU;KAAM,MAAM;MAAC;MAAK;MAAG;MAAG;MAAE;KAAE,OAAO;KAAK;cAE/D,KAAQ,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA;IAC/C,CAAA;GACb,kBAAC,EAAO,IAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,YAAY;KAAE,UAAU;KAAM,OAAO;KAAK;cAEzC;IACS,CAAA;GACX,KACC,kBAAC,EAAO,GAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,YAAY;KAAE,UAAU;KAAM,OAAO;KAAK;cAEzC;IACQ,CAAA;GAEZ,KACC,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,YAAY;KAAE,UAAU;KAAM,OAAO;KAAK;cAEzC;IACU,CAAA;GAEJ"}

package/dist/components/shared/EntityTagPicker.d.ts

@@ -0,0 +1,8 @@
+interface EntityTagPickerProps {
+    entityType: string;
+    entityId: string;
+    readOnly?: boolean;
+}
+export declare function EntityTagPicker({ entityType, entityId, readOnly }: EntityTagPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EntityTagPicker.d.ts.map

package/dist/components/shared/EntityTagPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityTagPicker.d.ts","sourceRoot":"","sources":["../../../src/components/shared/EntityTagPicker.tsx"],"names":[],"mappings":"AAkBA,UAAU,oBAAoB;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAKD,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,oBAAoB,2CAwP/F"}

package/dist/components/shared/EntityTagPicker.js

@@ -0,0 +1,195 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useAvailableTags as t, useGetEntityTags as n, useSearchTags as r, useTagEntity as i, useUntagEntity as a } from "../../hooks/useEntityTags.js";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Loader2 as d, Plus as f, Search as p, Tag as m, X as h } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/shared/EntityTagPicker.tsx
+var v = 4e3, y = 250;
+function b({ entityType: b, entityId: x, readOnly: S = !1 }) {
+	let C = e(), [w, T] = u(!1), [E, D] = u(""), [O, k] = u(null), { data: A, loading: j, refetch: M } = n(b, x), { data: N, loading: P } = t(50, { skip: !w }), [F, { data: I, loading: L }] = r(), [R, { loading: z }] = i(), [B, { loading: V }] = a(), H = A?.vibecontrolsEntityTags ?? [], U = c(() => new Set(H.map((e) => e.tagId)), [H]), W = c(() => ((E ? I?.searchVibecontrolsTags : N?.availableVibecontrolsTags) ?? []).filter((e) => !U.has(e.id)), [
+		E,
+		I,
+		N,
+		U
+	]);
+	s(() => {
+		if (!O) return;
+		let e = setTimeout(() => k(null), v);
+		return () => clearTimeout(e);
+	}, [O]);
+	let G = l(null);
+	s(() => () => {
+		G.current && clearTimeout(G.current);
+	}, []);
+	let K = o((e) => {
+		D(e), G.current && clearTimeout(G.current), !(e.length < 2) && (G.current = setTimeout(() => {
+			F({ variables: {
+				query: e,
+				limit: 10
+			} });
+		}, y));
+	}, [F]), q = o(async (e) => {
+		try {
+			await R({ variables: { input: {
+				entityType: b,
+				entityId: x,
+				tagId: e
+			} } }), await M(), D(""), k(null);
+		} catch (e) {
+			k(e instanceof Error ? e.message : C("vibecontrols.shared.entityTagPicker.failedToAddTag", "Failed to add tag"));
+		}
+	}, [
+		R,
+		b,
+		x,
+		M,
+		C
+	]), J = o(async (e) => {
+		try {
+			await B({ variables: { input: {
+				entityType: b,
+				entityId: x,
+				tagId: e
+			} } }), await M(), k(null);
+		} catch (e) {
+			k(e instanceof Error ? e.message : C("vibecontrols.shared.entityTagPicker.failedToRemoveTag", "Failed to remove tag"));
+		}
+	}, [
+		B,
+		b,
+		x,
+		M,
+		C
+	]), Y = o((e) => e.tag?.label ?? C("vibecontrols.shared.entityTagPicker.untitledTag", "Untitled tag"), [C]);
+	return j ? /* @__PURE__ */ _("div", {
+		className: "flex items-center gap-2 text-text-secondary text-sm",
+		role: "status",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ g(d, {
+			className: "h-4 w-4 animate-spin",
+			"aria-hidden": "true"
+		}), C("vibecontrols.shared.entityTagPicker.loadingTags", "Loading tags...")]
+	}) : /* @__PURE__ */ _("div", {
+		className: "space-y-3",
+		children: [
+			O && /* @__PURE__ */ _("div", {
+				role: "alert",
+				className: "flex items-start gap-2 rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700",
+				children: [/* @__PURE__ */ g("span", {
+					className: "flex-1",
+					children: O
+				}), /* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: () => k(null),
+					"aria-label": C("vibecontrols.shared.entityTagPicker.dismissError", "Dismiss error"),
+					className: "text-red-700 hover:text-red-900",
+					children: /* @__PURE__ */ g(h, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-2",
+				"aria-label": C("vibecontrols.shared.entityTagPicker.assignedTags", "Assigned tags"),
+				children: [
+					H.length === 0 && !w && /* @__PURE__ */ g("p", {
+						className: "text-text-secondary text-sm",
+						children: C("vibecontrols.shared.entityTagPicker.noTagsAssigned", "No tags assigned")
+					}),
+					H.map((e) => {
+						let t = Y(e);
+						return /* @__PURE__ */ _("span", {
+							className: "inline-flex items-center gap-1 px-3 py-1 bg-action-primary-bg/10 text-action-primary-bg text-sm rounded-full",
+							children: [
+								/* @__PURE__ */ g(m, {
+									className: "h-3 w-3",
+									"aria-hidden": "true"
+								}),
+								t,
+								!S && /* @__PURE__ */ g("button", {
+									type: "button",
+									onClick: () => J(e.tagId),
+									disabled: V,
+									"aria-label": `Remove tag ${t}`,
+									className: "ml-1 hover:text-red-500 transition-colors disabled:opacity-50",
+									children: /* @__PURE__ */ g(h, {
+										className: "h-3 w-3",
+										"aria-hidden": "true"
+									})
+								})
+							]
+						}, e.id);
+					}),
+					!S && !w && /* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: () => T(!0),
+						"aria-label": C("vibecontrols.shared.entityTagPicker.addTag", "Add tag"),
+						className: "inline-flex items-center gap-1 px-3 py-1 border border-dashed border-border-default text-text-secondary text-sm rounded-full hover:border-action-primary-bg hover:text-action-primary-bg transition-colors",
+						children: [/* @__PURE__ */ g(f, {
+							className: "h-3 w-3",
+							"aria-hidden": "true"
+						}), C("vibecontrols.shared.entityTagPicker.addTag", "Add Tag")]
+					})
+				]
+			}),
+			w && /* @__PURE__ */ _("div", {
+				className: "border border-border-default rounded-lg p-3 space-y-2 bg-bg-surface",
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ g(p, {
+							className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ g("input", {
+							type: "text",
+							value: E,
+							onChange: (e) => K(e.target.value),
+							placeholder: C("vibecontrols.shared.entityTagPicker.searchPlaceholder", "Search tags..."),
+							autoFocus: !0,
+							"aria-label": C("vibecontrols.shared.entityTagPicker.searchAvailableTags", "Search available tags"),
+							className: "w-full pl-9 pr-3 py-2 text-sm bg-bg-default border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary placeholder:text-text-secondary"
+						})]
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "flex flex-wrap gap-2 max-h-32 overflow-y-auto",
+						"aria-label": C("vibecontrols.shared.entityTagPicker.tagSuggestions", "Tag suggestions"),
+						children: [
+							(L || P && !E) && /* @__PURE__ */ g("span", {
+								className: "text-text-secondary text-xs",
+								children: C("vibecontrols.shared.entityTagPicker.loading", "Loading...")
+							}),
+							!L && !P && W.length === 0 && /* @__PURE__ */ g("span", {
+								className: "text-text-secondary text-xs",
+								children: E ? C("vibecontrols.shared.entityTagPicker.noMatchingTags", "No matching tags") : C("vibecontrols.shared.entityTagPicker.noAvailableTags", "No available tags")
+							}),
+							W.map((e) => /* @__PURE__ */ _("button", {
+								type: "button",
+								onClick: () => q(e.id),
+								disabled: z,
+								"aria-label": `Add tag ${e.label}`,
+								className: "inline-flex items-center gap-1 px-3 py-1 bg-bg-sunken text-text-primary text-sm rounded-full hover:bg-action-primary-bg/10 hover:text-action-primary-bg transition-colors cursor-pointer disabled:opacity-50",
+								children: [/* @__PURE__ */ g(f, {
+									className: "h-3 w-3",
+									"aria-hidden": "true"
+								}), e.label]
+							}, e.id))
+						]
+					}),
+					/* @__PURE__ */ g("button", {
+						type: "button",
+						onClick: () => {
+							T(!1), D("");
+						},
+						className: "text-xs text-text-secondary hover:text-text-primary",
+						children: C("vibecontrols.shared.entityTagPicker.done", "Done")
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { b as EntityTagPicker };
+
+//# sourceMappingURL=EntityTagPicker.js.map

package/dist/components/shared/EntityTagPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityTagPicker.js","names":[],"sources":["../../../src/components/shared/EntityTagPicker.tsx"],"sourcesContent":["/**\n * EntityTagPicker — Reusable tag picker for any VibeControls entity\n *\n * Usage:\n *   <EntityTagPicker entityType=\"VIBECONTROLS_VIBE\" entityId={vibe.id} />\n */\nimport { useState, useCallback, useMemo, useEffect, useRef } from 'react';\nimport { Tag, Plus, X, Search, Loader2 } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  useGetEntityTags,\n  useAvailableTags,\n  useSearchTags,\n  useTagEntity,\n  useUntagEntity,\n} from '../../hooks/useEntityTags';\nimport type { AvailableTag, EntityTagAssignment } from '../../hooks/useEntityTags';\n\ninterface EntityTagPickerProps {\n  entityType: string;\n  entityId: string;\n  readOnly?: boolean;\n}\n\nconst ERROR_DISMISS_MS = 4000;\nconst SEARCH_DEBOUNCE_MS = 250;\n\nexport function EntityTagPicker({ entityType, entityId, readOnly = false }: EntityTagPickerProps) {\n  const tr = useTr();\n  const [isAdding, setIsAdding] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n\n  const {\n    data: tagsData,\n    loading: tagsLoading,\n    refetch: refetchTags,\n  } = useGetEntityTags(entityType, entityId);\n  const { data: availableData, loading: availableLoading } = useAvailableTags(50, {\n    skip: !isAdding,\n  });\n  const [searchTags, { data: searchData, loading: searchLoading }] = useSearchTags();\n  const [tagEntity, { loading: tagging }] = useTagEntity();\n  const [untagEntity, { loading: untagging }] = useUntagEntity();\n\n  // Apollo Client v4 returns DeepPartialObject from useQuery data, but our\n  // hook types declare full shapes — we cast back to the declared types since\n  // the resolver is guaranteed to return non-null fields per the schema.\n  const assignedTags = (tagsData?.vibecontrolsEntityTags ?? []) as EntityTagAssignment[];\n  const assignedTagIds = useMemo(() => new Set(assignedTags.map((t) => t.tagId)), [assignedTags]);\n\n  const suggestions: AvailableTag[] = useMemo(() => {\n    const source = searchQuery\n      ? (searchData?.searchVibecontrolsTags as AvailableTag[] | undefined)\n      : (availableData?.availableVibecontrolsTags as AvailableTag[] | undefined);\n    return (source ?? []).filter((t) => !assignedTagIds.has(t.id));\n  }, [searchQuery, searchData, availableData, assignedTagIds]);\n\n  // Auto-dismiss error toast after a few seconds\n  useEffect(() => {\n    if (!errorMessage) return;\n    const timer = setTimeout(() => setErrorMessage(null), ERROR_DISMISS_MS);\n    return () => clearTimeout(timer);\n  }, [errorMessage]);\n\n  // Debounce the search query so we don't fire a request on every keystroke.\n  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    return () => {\n      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);\n    };\n  }, []);\n\n  const handleSearch = useCallback(\n    (query: string) => {\n      setSearchQuery(query);\n      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);\n      if (query.length < 2) return;\n      searchTimerRef.current = setTimeout(() => {\n        searchTags({ variables: { query, limit: 10 } });\n      }, SEARCH_DEBOUNCE_MS);\n    },\n    [searchTags]\n  );\n\n  const handleAddTag = useCallback(\n    async (tagId: string) => {\n      try {\n        await tagEntity({ variables: { input: { entityType, entityId, tagId } } });\n        await refetchTags();\n        setSearchQuery('');\n        setErrorMessage(null);\n      } catch (err) {\n        setErrorMessage(\n          err instanceof Error\n            ? err.message\n            : tr('vibecontrols.shared.entityTagPicker.failedToAddTag', 'Failed to add tag')\n        );\n      }\n    },\n    [tagEntity, entityType, entityId, refetchTags, tr]\n  );\n\n  const handleRemoveTag = useCallback(\n    async (tagId: string) => {\n      try {\n        await untagEntity({ variables: { input: { entityType, entityId, tagId } } });\n        await refetchTags();\n        setErrorMessage(null);\n      } catch (err) {\n        setErrorMessage(\n          err instanceof Error\n            ? err.message\n            : tr('vibecontrols.shared.entityTagPicker.failedToRemoveTag', 'Failed to remove tag')\n        );\n      }\n    },\n    [untagEntity, entityType, entityId, refetchTags, tr]\n  );\n\n  // The assignment fragment always carries `tag.label` (see\n  // EntityTagPickerAssignmentFields in useEntityTags.ts), so we read directly\n  // from it. Falling back to `availableData` here is dead code in display\n  // mode because availableData is only fetched when `isAdding=true`.\n  const getTagLabel = useCallback(\n    (assignment: EntityTagAssignment): string =>\n      assignment.tag?.label ??\n      tr('vibecontrols.shared.entityTagPicker.untitledTag', 'Untitled tag'),\n    [tr]\n  );\n\n  if (tagsLoading) {\n    return (\n      <div\n        className=\"flex items-center gap-2 text-text-secondary text-sm\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n        {tr('vibecontrols.shared.entityTagPicker.loadingTags', 'Loading tags...')}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      {errorMessage && (\n        <div\n          role=\"alert\"\n          className=\"flex items-start gap-2 rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700\"\n        >\n          <span className=\"flex-1\">{errorMessage}</span>\n          <button\n            type=\"button\"\n            onClick={() => setErrorMessage(null)}\n            aria-label={tr('vibecontrols.shared.entityTagPicker.dismissError', 'Dismiss error')}\n            className=\"text-red-700 hover:text-red-900\"\n          >\n            <X className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      )}\n\n      <div\n        className=\"flex flex-wrap gap-2\"\n        aria-label={tr('vibecontrols.shared.entityTagPicker.assignedTags', 'Assigned tags')}\n      >\n        {assignedTags.length === 0 && !isAdding && (\n          <p className=\"text-text-secondary text-sm\">\n            {tr('vibecontrols.shared.entityTagPicker.noTagsAssigned', 'No tags assigned')}\n          </p>\n        )}\n        {assignedTags.map((assignment) => {\n          const label = getTagLabel(assignment);\n          return (\n            <span\n              key={assignment.id}\n              className=\"inline-flex items-center gap-1 px-3 py-1 bg-action-primary-bg/10 text-action-primary-bg text-sm rounded-full\"\n            >\n              <Tag className=\"h-3 w-3\" aria-hidden=\"true\" />\n              {label}\n              {!readOnly && (\n                <button\n                  type=\"button\"\n                  onClick={() => handleRemoveTag(assignment.tagId)}\n                  disabled={untagging}\n                  aria-label={`Remove tag ${label}`}\n                  className=\"ml-1 hover:text-red-500 transition-colors disabled:opacity-50\"\n                >\n                  <X className=\"h-3 w-3\" aria-hidden=\"true\" />\n                </button>\n              )}\n            </span>\n          );\n        })}\n        {!readOnly && !isAdding && (\n          <button\n            type=\"button\"\n            onClick={() => setIsAdding(true)}\n            aria-label={tr('vibecontrols.shared.entityTagPicker.addTag', 'Add tag')}\n            className=\"inline-flex items-center gap-1 px-3 py-1 border border-dashed border-border-default text-text-secondary text-sm rounded-full hover:border-action-primary-bg hover:text-action-primary-bg transition-colors\"\n          >\n            <Plus className=\"h-3 w-3\" aria-hidden=\"true\" />\n            {tr('vibecontrols.shared.entityTagPicker.addTag', 'Add Tag')}\n          </button>\n        )}\n      </div>\n\n      {isAdding && (\n        <div className=\"border border-border-default rounded-lg p-3 space-y-2 bg-bg-surface\">\n          <div className=\"relative\">\n            <Search\n              className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\"\n              aria-hidden=\"true\"\n            />\n            <input\n              type=\"text\"\n              value={searchQuery}\n              onChange={(e) => handleSearch(e.target.value)}\n              placeholder={tr(\n                'vibecontrols.shared.entityTagPicker.searchPlaceholder',\n                'Search tags...'\n              )}\n              autoFocus\n              aria-label={tr(\n                'vibecontrols.shared.entityTagPicker.searchAvailableTags',\n                'Search available tags'\n              )}\n              className=\"w-full pl-9 pr-3 py-2 text-sm bg-bg-default border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div\n            className=\"flex flex-wrap gap-2 max-h-32 overflow-y-auto\"\n            aria-label={tr('vibecontrols.shared.entityTagPicker.tagSuggestions', 'Tag suggestions')}\n          >\n            {(searchLoading || (availableLoading && !searchQuery)) && (\n              <span className=\"text-text-secondary text-xs\">\n                {tr('vibecontrols.shared.entityTagPicker.loading', 'Loading...')}\n              </span>\n            )}\n            {!searchLoading && !availableLoading && suggestions.length === 0 && (\n              <span className=\"text-text-secondary text-xs\">\n                {searchQuery\n                  ? tr('vibecontrols.shared.entityTagPicker.noMatchingTags', 'No matching tags')\n                  : tr('vibecontrols.shared.entityTagPicker.noAvailableTags', 'No available tags')}\n              </span>\n            )}\n            {suggestions.map((tag) => (\n              <button\n                key={tag.id}\n                type=\"button\"\n                onClick={() => handleAddTag(tag.id)}\n                disabled={tagging}\n                aria-label={`Add tag ${tag.label}`}\n                className=\"inline-flex items-center gap-1 px-3 py-1 bg-bg-sunken text-text-primary text-sm rounded-full hover:bg-action-primary-bg/10 hover:text-action-primary-bg transition-colors cursor-pointer disabled:opacity-50\"\n              >\n                <Plus className=\"h-3 w-3\" aria-hidden=\"true\" />\n                {tag.label}\n              </button>\n            ))}\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setIsAdding(false);\n              setSearchQuery('');\n            }}\n            className=\"text-xs text-text-secondary hover:text-text-primary\"\n          >\n            {tr('vibecontrols.shared.entityTagPicker.done', 'Done')}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/ErrorState.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+interface ErrorStateProps {
+    title?: string;
+    message: string;
+    onRetry?: () => void;
+    action?: ReactNode;
+}
+export declare function ErrorState({ title, message, onRetry, action }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ErrorState.d.ts.map

package/dist/components/shared/ErrorState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ErrorState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,eAAe,2CAsF9E"}

package/dist/components/shared/ErrorState.js

@@ -0,0 +1,116 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { AlertTriangle as t, RefreshCw as n } from "lucide-react";
+import { motion as r, useReducedMotion as i } from "framer-motion";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/shared/ErrorState.tsx
+function s({ title: s, message: c, onRetry: l, action: u }) {
+	let d = e(), f = s ?? d("vibecontrols.shared.errorState.title", "Something went wrong");
+	return i() ? /* @__PURE__ */ o("div", {
+		className: "flex flex-col items-center justify-center py-12 px-4 text-center",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "w-16 h-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center mb-4",
+				children: /* @__PURE__ */ a(t, { className: "w-8 h-8 text-status-error-text" })
+			}),
+			/* @__PURE__ */ a("h3", {
+				className: "text-lg font-semibold text-text-primary mb-1",
+				children: f
+			}),
+			/* @__PURE__ */ a("p", {
+				className: "text-sm text-text-secondary mb-4 max-w-md",
+				children: c
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center gap-3",
+				children: [l && /* @__PURE__ */ o("button", {
+					onClick: l,
+					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",
+					children: [/* @__PURE__ */ a(n, { className: "w-4 h-4" }), d("vibecontrols.shared.errorState.tryAgain", "Try Again")]
+				}), u]
+			})
+		]
+	}) : /* @__PURE__ */ o(r.div, {
+		className: "flex flex-col items-center justify-center py-12 px-4 text-center",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		transition: { duration: .25 },
+		children: [
+			/* @__PURE__ */ a(r.div, {
+				className: "w-16 h-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center mb-4",
+				initial: {
+					scale: .5,
+					opacity: 0
+				},
+				animate: {
+					scale: 1,
+					opacity: 1
+				},
+				transition: {
+					type: "spring",
+					stiffness: 400,
+					damping: 15,
+					delay: .1
+				},
+				children: /* @__PURE__ */ a(t, { className: "w-8 h-8 text-status-error-text" })
+			}),
+			/* @__PURE__ */ a(r.h3, {
+				className: "text-lg font-semibold text-text-primary mb-1",
+				initial: {
+					opacity: 0,
+					y: 8
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: {
+					duration: .25,
+					delay: .2
+				},
+				children: f
+			}),
+			/* @__PURE__ */ a(r.p, {
+				className: "text-sm text-text-secondary mb-4 max-w-md",
+				initial: {
+					opacity: 0,
+					y: 8
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: {
+					duration: .25,
+					delay: .3
+				},
+				children: c
+			}),
+			/* @__PURE__ */ o(r.div, {
+				className: "flex items-center gap-3",
+				initial: {
+					opacity: 0,
+					y: 8
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: {
+					duration: .25,
+					delay: .4
+				},
+				children: [l && /* @__PURE__ */ o(r.button, {
+					onClick: l,
+					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",
+					whileHover: { scale: 1.01 },
+					whileTap: { scale: .99 },
+					children: [/* @__PURE__ */ a(n, { className: "w-4 h-4" }), d("vibecontrols.shared.errorState.tryAgain", "Try Again")]
+				}), u]
+			})
+		]
+	});
+}
+//#endregion
+export { s as ErrorState };
+
+//# sourceMappingURL=ErrorState.js.map

package/dist/components/shared/ErrorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.js","names":[],"sources":["../../../src/components/shared/ErrorState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { AlertTriangle, RefreshCw } from 'lucide-react';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface ErrorStateProps {\n  title?: string;\n  message: string;\n  onRetry?: () => void;\n  action?: ReactNode;\n}\n\nexport function ErrorState({ title, message, onRetry, action }: ErrorStateProps) {\n  const tr = useTr();\n  const resolvedTitle = title ?? tr('vibecontrols.shared.errorState.title', 'Something went wrong');\n  const shouldReduceMotion = useReducedMotion();\n\n  if (shouldReduceMotion) {\n    return (\n      <div className=\"flex flex-col items-center justify-center py-12 px-4 text-center\">\n        <div className=\"w-16 h-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center mb-4\">\n          <AlertTriangle className=\"w-8 h-8 text-status-error-text\" />\n        </div>\n        <h3 className=\"text-lg font-semibold text-text-primary mb-1\">{resolvedTitle}</h3>\n        <p className=\"text-sm text-text-secondary mb-4 max-w-md\">{message}</p>\n        <div className=\"flex items-center gap-3\">\n          {onRetry && (\n            <button\n              onClick={onRetry}\n              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\"\n            >\n              <RefreshCw className=\"w-4 h-4\" />\n              {tr('vibecontrols.shared.errorState.tryAgain', 'Try Again')}\n            </button>\n          )}\n          {action}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <motion.div\n      className=\"flex flex-col items-center justify-center py-12 px-4 text-center\"\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 0.25 }}\n    >\n      <motion.div\n        className=\"w-16 h-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center mb-4\"\n        initial={{ scale: 0.5, opacity: 0 }}\n        animate={{ scale: 1, opacity: 1 }}\n        transition={{\n          type: 'spring',\n          stiffness: 400,\n          damping: 15,\n          delay: 0.1,\n        }}\n      >\n        <AlertTriangle className=\"w-8 h-8 text-status-error-text\" />\n      </motion.div>\n      <motion.h3\n        className=\"text-lg font-semibold text-text-primary mb-1\"\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.25, delay: 0.2 }}\n      >\n        {resolvedTitle}\n      </motion.h3>\n      <motion.p\n        className=\"text-sm text-text-secondary mb-4 max-w-md\"\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.25, delay: 0.3 }}\n      >\n        {message}\n      </motion.p>\n      <motion.div\n        className=\"flex items-center gap-3\"\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.25, delay: 0.4 }}\n      >\n        {onRetry && (\n          <motion.button\n            onClick={onRetry}\n            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\"\n            whileHover={{ scale: 1.01 }}\n            whileTap={{ scale: 0.99 }}\n          >\n            <RefreshCw className=\"w-4 h-4\" />\n            {tr('vibecontrols.shared.errorState.tryAgain', 'Try Again')}\n          </motion.button>\n        )}\n        {action}\n      </motion.div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,EAAW,EAAE,UAAO,YAAS,YAAS,aAA2B;CAC/E,IAAM,IAAK,GAAO,EACZ,IAAgB,KAAS,EAAG,wCAAwC,uBAAuB;AA2BjG,QA1B2B,GAAkB,GAIzC,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAe,WAAU,kCAAmC,CAAA;IACxD,CAAA;GACN,kBAAC,MAAD;IAAI,WAAU;cAAgD;IAAmB,CAAA;GACjF,kBAAC,KAAD;IAAG,WAAU;cAA6C;IAAY,CAAA;GACtE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,UAAD;KACE,SAAS;KACT,WAAU;eAFZ,CAIE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAChC,EAAG,2CAA2C,YAAY,CACpD;QAEV,EACG;;GACF;MAKR,kBAAC,EAAO,KAAR;EACE,WAAU;EACV,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,YAAY,EAAE,UAAU,KAAM;YAJhC;GAME,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS;KAAE,OAAO;KAAK,SAAS;KAAG;IACnC,SAAS;KAAE,OAAO;KAAG,SAAS;KAAG;IACjC,YAAY;KACV,MAAM;KACN,WAAW;KACX,SAAS;KACT,OAAO;KACR;cAED,kBAAC,GAAD,EAAe,WAAU,kCAAmC,CAAA;IACjD,CAAA;GACb,kBAAC,EAAO,IAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,YAAY;KAAE,UAAU;KAAM,OAAO;KAAK;cAEzC;IACS,CAAA;GACZ,kBAAC,EAAO,GAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,YAAY;KAAE,UAAU;KAAM,OAAO;KAAK;cAEzC;IACQ,CAAA;GACX,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,YAAY;KAAE,UAAU;KAAM,OAAO;KAAK;cAJ5C,CAMG,KACC,kBAAC,EAAO,QAAR;KACE,SAAS;KACT,WAAU;KACV,YAAY,EAAE,OAAO,MAAM;KAC3B,UAAU,EAAE,OAAO,KAAM;eAJ3B,CAME,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAChC,EAAG,2CAA2C,YAAY,CAC7C;QAEjB,EACU;;GACF"}

package/dist/components/shared/FilterDropdown.d.ts

@@ -0,0 +1,20 @@
+interface FilterOption {
+    value: string;
+    label: string;
+}
+interface FilterDropdownProps {
+    label: string;
+    /**
+     * Options to display after the hardcoded "All" button.
+     * Any option with `value === 'all'` is automatically skipped — the component
+     * renders its own "All" entry at the top, so callers may include or omit an
+     * `{ value: 'all' }` entry without causing a duplicate.
+     */
+    options: FilterOption[];
+    value: string | null;
+    onChange: (value: string) => void;
+    className?: string;
+}
+export declare function FilterDropdown({ label, options, value, onChange, className, }: FilterDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterDropdown.d.ts.map

package/dist/components/shared/FilterDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FilterDropdown.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAc,GACf,EAAE,mBAAmB,2CA2ErB"}

package/dist/components/shared/FilterDropdown.js

@@ -0,0 +1,81 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { Check as i, ChevronDown as a } from "lucide-react";
+import { AnimatePresence as o, motion as s } from "framer-motion";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/shared/FilterDropdown.tsx
+function u({ label: u, options: d, value: f, onChange: p, className: m = "" }) {
+	let h = e(), [g, _] = r(!1), v = n(null);
+	t(() => {
+		function e(e) {
+			v.current && !v.current.contains(e.target) && _(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let y = d.find((e) => e.value === f);
+	return /* @__PURE__ */ l("div", {
+		className: `relative ${m}`,
+		ref: v,
+		children: [/* @__PURE__ */ l("button", {
+			onClick: () => _(!g),
+			className: "inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-1.5 sm:py-2 text-xs sm:text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary hover:bg-bg-elevated transition-colors whitespace-nowrap flex-shrink-0",
+			children: [
+				/* @__PURE__ */ l("span", {
+					className: "text-text-secondary",
+					children: [u, ":"]
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "font-medium max-w-[80px] sm:max-w-none truncate",
+					children: y?.label || h("vibecontrols.shared.filterDropdown.all", "All")
+				}),
+				/* @__PURE__ */ c(a, { className: `w-3.5 h-3.5 sm:w-4 sm:h-4 transition-transform flex-shrink-0 ${g ? "rotate-180" : ""}` })
+			]
+		}), /* @__PURE__ */ c(o, { children: g && /* @__PURE__ */ c(s.div, {
+			initial: {
+				opacity: 0,
+				y: -4,
+				scale: .97
+			},
+			animate: {
+				opacity: 1,
+				y: 0,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				y: -4,
+				scale: .97
+			},
+			transition: {
+				duration: .15,
+				ease: [
+					.4,
+					0,
+					.2,
+					1
+				]
+			},
+			className: "absolute z-50 mt-1 w-48 bg-bg-surface border border-border-default rounded-md shadow-lg",
+			children: /* @__PURE__ */ l("div", {
+				className: "py-1",
+				children: [/* @__PURE__ */ l("button", {
+					onClick: () => {
+						p("all"), _(!1);
+					},
+					className: "flex items-center justify-between w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken transition-colors",
+					children: [h("vibecontrols.shared.filterDropdown.all", "All"), (f === null || f === "all") && /* @__PURE__ */ c(i, { className: "w-4 h-4 text-action-primary-bg" })]
+				}), d.filter((e) => e.value !== "all").map((e) => /* @__PURE__ */ l("button", {
+					onClick: () => {
+						p(e.value), _(!1);
+					},
+					className: "flex items-center justify-between w-full px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken transition-colors",
+					children: [e.label, f === e.value && /* @__PURE__ */ c(i, { className: "w-4 h-4 text-action-primary-bg" })]
+				}, e.value))]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { u as FilterDropdown };
+
+//# sourceMappingURL=FilterDropdown.js.map