@decido/shell 4.0.2 → 4.0.3

package/dist/TimelineEditor-N4HRMHTB.mjs

@@ -0,0 +1,226 @@
+import {
+  usePlaygroundStore
+} from "./chunk-XMSU6UWD.mjs";
+import "./chunk-UJCSKKID.mjs";
+
+// src/components/studio/TimelineEditor.tsx
+import { useTimelineStore } from "@decido/engine";
+import { Plus, MonitorPlay } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+
+// src/components/studio/TimelineKeyframeCard.tsx
+import React from "react";
+import { Trash2, Clock } from "lucide-react";
+import { motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var trackColors = {
+  dialogue: { clock: "text-purple-400/70", input: "focus:border-purple-500/50", text: "text-purple-300", label: "text-purple-400/70" },
+  ui: { clock: "text-cyan-400/70", input: "focus:border-cyan-500/50", text: "text-text-primary", label: "text-cyan-400/70" },
+  logic: { clock: "text-orange-400/70", input: "focus:border-orange-500/50", text: "text-text-primary", label: "text-orange-400/70" }
+};
+var TimelineKeyframeCard = React.memo(function TimelineKeyframeCard2({
+  kf,
+  track,
+  activeTimelineId,
+  updateKeyframe,
+  removeKeyframe
+}) {
+  const colors = trackColors[track];
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.9 },
+      transition: { duration: 0.2 },
+      style: { left: `${kf.t * 100}px`, width: "260px" },
+      className: "absolute top-2 bottom-2 bg-surface-secondary border border-border-default rounded-xl p-3 flex flex-col gap-2 group hover:border-border-subtle0 shadow-[0_8px_30px_rgb(0,0,0,0.5)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.8)] transition-all z-10",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border-subtle pb-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 bg-surface-overlay px-1.5 py-0.5 rounded border border-border-default transition-colors", children: [
+            /* @__PURE__ */ jsx(Clock, { size: 10, className: colors.clock }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                step: "0.1",
+                className: "bg-transparent w-10 text-xs text-text-primary font-mono focus:outline-hidden text-center",
+                value: kf.t,
+                onChange: (e) => updateKeyframe(activeTimelineId, kf.id, { t: parseFloat(e.target.value) || 0 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => removeKeyframe(activeTimelineId, kf.id),
+              className: "p-1 text-text-muted hover:text-red-400 hover:bg-red-500/10 rounded transition-colors opacity-0 group-hover:opacity-100",
+              title: "Eliminar Keyframe",
+              children: /* @__PURE__ */ jsx(Trash2, { size: 12 })
+            }
+          )
+        ] }),
+        track === "dialogue" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-[9px] uppercase tracking-wider ${colors.label} w-10`, children: "Actor" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: `flex-1 bg-surface-glass border border-border-subtle rounded px-2 py-1 text-xs ${colors.text} focus:outline-hidden ${colors.input}`,
+                value: kf.actorId || "",
+                placeholder: "system",
+                onChange: (e) => updateKeyframe(activeTimelineId, kf.id, { actorId: e.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: `w-full bg-surface-glass border border-border-subtle rounded px-2 py-1.5 text-xs text-text-primary focus:outline-hidden ${colors.input} resize-none flex-1 min-h-0`,
+              placeholder: "Texto a sintetizar...",
+              value: kf.speech || "",
+              onChange: (e) => updateKeyframe(activeTimelineId, kf.id, { speech: e.target.value })
+            }
+          )
+        ] }),
+        track === "ui" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 flex-1 justify-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-[9px] uppercase tracking-wider ${colors.label}`, children: "App State" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: `w-full bg-surface-glass border border-border-subtle rounded px-2 py-1.5 text-xs text-text-primary focus:outline-hidden ${colors.input}`,
+                value: kf.state || "",
+                placeholder: "idle",
+                onChange: (e) => updateKeyframe(activeTimelineId, kf.id, { state: e.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 p-1.5 mt-1 rounded hover:bg-surface-glass cursor-pointer border border-transparent hover:border-border-subtle transition-colors", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: kf.canvas || false,
+                onChange: (e) => updateKeyframe(activeTimelineId, kf.id, { canvas: e.target.checked }),
+                className: "rounded border-border-strong bg-surface-glass text-cyan-500 w-3.5 h-3.5"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-cyan-300", children: "Mostrar Lienzo 3D" })
+          ] })
+        ] }),
+        track === "logic" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1 justify-center", children: [
+          /* @__PURE__ */ jsx("span", { className: `text-[9px] uppercase tracking-wider ${colors.label}`, children: "Intent / Action" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: `w-full bg-surface-glass border border-border-subtle rounded px-2 py-1.5 text-xs text-text-primary focus:outline-hidden ${colors.input} font-mono mt-1`,
+              value: kf.intent || "",
+              placeholder: "action_name",
+              onChange: (e) => updateKeyframe(activeTimelineId, kf.id, { intent: e.target.value })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[9px] text-text-muted leading-tight mt-2 px-1", children: "Dispara un trigger local o llamada MCP." })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/studio/TimelineEditor.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TimelineEditor = () => {
+  const activeTimelineId = usePlaygroundStore((state) => state.prototypeBrand);
+  const timelines = useTimelineStore((state) => state.timelines);
+  const addKeyframe = useTimelineStore((state) => state.addKeyframe);
+  const updateKeyframe = useTimelineStore((state) => state.updateKeyframe);
+  const removeKeyframe = useTimelineStore((state) => state.removeKeyframe);
+  const updateDuration = useTimelineStore((state) => state.updateDuration);
+  const activeTimeline = timelines[activeTimelineId];
+  if (!activeTimeline) return null;
+  const handleAdd = (trackName) => {
+    addKeyframe(activeTimelineId, {
+      t: activeTimeline.duration,
+      track: trackName,
+      ...trackName === "dialogue" ? { speech: "", actorId: "system" } : {},
+      ...trackName === "ui" ? { state: "new_state", canvas: false } : {},
+      ...trackName === "logic" ? { intent: "" } : {}
+    });
+  };
+  const tracks = ["dialogue", "ui", "logic"];
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col h-full bg-surface-secondary text-text-primary border-l border-border-default w-full shadow-2xl z-40 overflow-hidden relative", children: [
+    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E')] opacity-[0.10] mix-blend-overlay pointer-events-none z-0" }),
+    /* @__PURE__ */ jsxs2("div", { className: "p-4 border-b border-border-default relative z-10 flex justify-between items-center bg-surface-glass", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsxs2("h2", { className: "text-lg font-bold text-text-primary flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(MonitorPlay, { size: 18, className: "text-purple-400" }),
+          "Multi-Track Sequence"
+        ] }),
+        /* @__PURE__ */ jsxs2("p", { className: "text-xs text-text-secondary mt-1 font-mono uppercase tracking-wider", children: [
+          "Editando: ",
+          activeTimeline.name
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "text-right flex flex-col items-end gap-1", children: [
+        /* @__PURE__ */ jsx2("span", { className: "text-xs text-text-muted font-mono", children: "Duraci\xF3n Global (s)" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "number",
+            className: "bg-surface-glass border border-border-strong rounded px-2 py-1 w-20 text-text-primary text-right text-sm focus:outline-hidden focus:border-purple-400",
+            value: activeTimeline.duration,
+            onChange: (e) => updateDuration(activeTimelineId, parseFloat(e.target.value) || 0)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex overflow-hidden w-full relative z-10", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "w-[220px] shrink-0 flex flex-col border-r border-border-default bg-surface-primary z-20", children: [
+        /* @__PURE__ */ jsx2("div", { className: "h-8 border-b border-border-default shrink-0 bg-surface-secondary" }),
+        tracks.map((track) => /* @__PURE__ */ jsxs2("div", { className: `h-[170px] flex flex-col justify-center p-4 border-b border-border-subtle relative
+                            ${track === "dialogue" ? "bg-purple-500/5" : track === "ui" ? "bg-cyan-500/5" : "bg-orange-500/5"}`, children: [
+          /* @__PURE__ */ jsx2("div", { className: `text-[10px] font-bold uppercase tracking-widest
+                                ${track === "dialogue" ? "text-purple-400" : track === "ui" ? "text-cyan-400" : "text-orange-400"}`, children: track === "dialogue" ? "Track 1: Di\xE1logo & Audio" : track === "ui" ? "Track 2: UI & Canvas" : "Track 3: L\xF3gica & MCP" }),
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              onClick: () => handleAdd(track),
+              className: "mt-3 w-fit py-1.5 px-3 rounded text-xs transition-colors flex items-center gap-1 border border-border-default hover:bg-surface-glass text-text-primary/70 hover:text-text-primary",
+              children: [
+                /* @__PURE__ */ jsx2(Plus, { size: 12 }),
+                " Add Node"
+              ]
+            }
+          )
+        ] }, track))
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-x-auto overflow-y-hidden custom-scrollbar bg-surface-secondary relative", children: /* @__PURE__ */ jsxs2("div", { className: "h-full relative min-w-max pb-10", style: { width: `${Math.max(activeTimeline.duration, 15) * 100 + 400}px` }, children: [
+        /* @__PURE__ */ jsx2("div", { className: "h-8 border-b border-border-default sticky top-0 bg-surface-secondary z-20 flex items-end", children: Array.from({ length: Math.ceil(Math.max(activeTimeline.duration, 15)) + 5 }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "absolute h-3 border-l border-border-strong", style: { left: `${i * 100}px` }, children: [
+          /* @__PURE__ */ jsxs2("span", { className: "absolute -top-5 -left-1.5 text-[10px] text-text-primary/30 font-mono tracking-tighter", children: [
+            i,
+            "s"
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "absolute left-[50px] -bottom-3 h-1.5 border-l border-border-default" })
+        ] }, i)) }),
+        /* @__PURE__ */ jsx2("div", { className: "flex flex-col w-full relative", children: tracks.map((track) => /* @__PURE__ */ jsx2("div", { className: "h-[170px] border-b border-border-subtle relative hover:bg-surface-glass transition-colors group/lane", children: /* @__PURE__ */ jsx2(AnimatePresence, { children: activeTimeline.keyframes.filter((kf) => kf.track === track).map((kf) => /* @__PURE__ */ jsx2(
+          TimelineKeyframeCard,
+          {
+            kf,
+            track,
+            activeTimelineId,
+            updateKeyframe,
+            removeKeyframe
+          },
+          kf.id
+        )) }) }, track)) })
+      ] }) })
+    ] })
+  ] });
+};
+export {
+  TimelineEditor
+};

package/dist/WidgetSlotPanel-KJI4CHHD.mjs

@@ -0,0 +1,11 @@
+import {
+  WidgetSlotPanel,
+  pluginWidgetStore
+} from "./chunk-PMYAM764.mjs";
+import "./chunk-MSVEFEXE.mjs";
+import "./chunk-3P4P3M54.mjs";
+import "./chunk-UJCSKKID.mjs";
+export {
+  WidgetSlotPanel,
+  pluginWidgetStore
+};