npm - ntvframes - Versions diffs - 0.8.21 → 0.8.23 - Mend

ntvframes 0.8.21 → 0.8.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/cli.js +35 -5
package/dist/fontLocalizeCli.js +1 -1
package/dist/studio/assets/{hyperframes-player-tIdajFvT.js → hyperframes-player-6CsXgdw8.js} +1 -1
package/dist/studio/assets/{index-VRU0FC4n.js → index-B4VGx85r.js} +1 -1
package/dist/studio/assets/index-BMJ1qJAS.css +1 -0
package/dist/studio/assets/{index-CU6QNXwP.js → index-CGb2uB17.js} +1 -1
package/dist/studio/assets/{index-CoBzmxvz.js → index-SzGOj1TJ.js} +130 -132
package/dist/studio/index.html +2 -2
package/dist/studio/index.js +175 -109
package/dist/studio/index.js.map +1 -1
package/package.json +1 -1
package/dist/studio/assets/index-D82tRaus.css +0 -1

package/dist/studio/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CoBzmxvz.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-D82tRaus.css">
+    <script type="module" crossorigin src="/assets/index-SzGOj1TJ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BMJ1qJAS.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>

package/dist/studio/index.js CHANGED Viewed

@@ -12613,9 +12613,10 @@ function DomEditProvider({
     copiedAgentPrompt,
     agentPromptSelectionContext,
     revisions,
+    submission,
     remove,
     clear,
-    copyBatch,
+    submitBatch,
     domEditSelectionRef,
     handleTimelineElementSelect,
     handlePreviewCanvasMouseDown,
@@ -12727,9 +12728,10 @@ function DomEditProvider({
       handleAskAgent,
       handleAgentModalSubmit,
       revisions,
+      submission,
       remove,
       clear,
-      copyBatch,
+      submitBatch,
       handleBlockedDomMove,
       handleDomManualDragStart,
       handleDomEditElementDelete,
@@ -12846,9 +12848,10 @@ function DomEditProvider({
       handleUpdateSegmentEase,
       handleSetAllKeyframeEases,
       revisions,
+      submission,
       remove,
       clear,
-      copyBatch
+      submitBatch
     ]
   );
   const selection = useMemo8(
@@ -28435,71 +28438,50 @@ function pauseStudioPreviewPlayback(iframe) {
 }
 // src/components/editor/domEditingAgentPrompt.ts
-function formatBoundingBox(bounds) {
-  return `x=${Math.round(bounds.x)}, y=${Math.round(bounds.y)}, width=${Math.round(bounds.width)}, height=${Math.round(bounds.height)}`;
-}
-function formatStyleBlock(styles) {
-  return Object.entries(styles).filter(([, value]) => value && value !== "initial").map(([key2, value]) => `${key2}: ${value}`).join("\n");
-}
-function formatTextFields(fields) {
-  return fields.map(
-    (field) => `- key=${field.key}; tag=<${field.tagName}>; source=${field.source}; text=${JSON.stringify(field.value)}`
-  ).join("\n");
+function formatRelevantState(styles) {
+  return [
+    "position",
+    "top",
+    "left",
+    "width",
+    "height",
+    "z-index",
+    "font-family",
+    "color"
+  ].map((property) => [property, styles[property]]).filter(([, value]) => value && value !== "initial").map(([property, value]) => `- ${property}: ${value}`).join("\n");
 }
 function buildElementAgentPrompt({
   selection,
-  currentTime,
-  tagSnippet,
-  selectionContext,
+  currentTime: _currentTime,
+  tagSnippet: _tagSnippet,
+  selectionContext: _selectionContext,
   userInstruction,
-  sourceFilePath
+  sourceFilePath: _sourceFilePath
 }) {
-  const displayedSourceFile = sourceFilePath?.trim() || selection.sourceFile;
+  const currentText = (selection.textContent ?? "").replace(/\s+/g, " ").trim();
   const lines = [
-    "## HyperFrames element edit request v1",
-    "Schema version: 1",
-    "",
+    "User Request:",
     userInstruction?.trim() || "Edit this selected HyperFrames element.",
     "",
-    `Composition: ${selection.compositionPath}`,
-    `Playback time: ${formatTime(currentTime)}`,
-    `Source file: ${displayedSourceFile}`,
-    `DOM id: ${selection.id ?? "(none)"}`,
-    `Selector: ${selection.selector ?? "(none)"}`,
-    `Selector index: ${selection.selectorIndex ?? 0}`,
-    `Tag: <${selection.tagName}>`,
-    `Bounds: ${formatBoundingBox(selection.boundingBox)}`
-  ];
-  if (selection.textContent) {
-    lines.push(`Text: ${selection.textContent}`);
-  }
-  const trimmedSelectionContext = selectionContext?.trim();
-  if (trimmedSelectionContext) {
-    lines.push("", "Selection context:", trimmedSelectionContext);
-  }
-  const textFieldsBlock = formatTextFields(selection.textFields);
-  if (textFieldsBlock) {
-    lines.push("", "Text fields:", textFieldsBlock);
-  }
-  const inlineStyleBlock = formatStyleBlock(selection.inlineStyles);
-  if (inlineStyleBlock) {
-    lines.push("", "Inline styles:", inlineStyleBlock);
-  }
-  const computedStyleBlock = formatStyleBlock(selection.computedStyles);
-  if (computedStyleBlock) {
-    lines.push("", "Computed styles (browser-resolved):", computedStyleBlock);
-  }
-  if (tagSnippet) {
-    lines.push("", "Target HTML:", tagSnippet);
-  }
-  lines.push(
+    "Target Element:",
+    `- HyperFrames ID: ${selection.hfId ?? "(none)"}`,
+    `- Selector: ${selection.selector ?? "(none)"}`,
+    `- Selector index: ${selection.selectorIndex ?? 0}`,
+    `- Tag: ${selection.tagName.toLowerCase()}`,
+    `- Current text: ${JSON.stringify(currentText)}`,
     "",
-    "Guardrails:",
-    "- Make a targeted change to this element only.",
+    "Relevant State:",
+    formatRelevantState(selection.computedStyles),
+    "",
+    "Constraints:",
+    "- Modify only the target element.",
+    "- Preserve all properties and behavior not explicitly requested to change.",
     "- Preserve the rest of the composition and its timing.",
-    "- Do not modify other elements' data-* attributes or positioning.",
-    "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors."
-  );
+    "- Do not modify other elements.",
+    "- Do not modify other elements' data-* attributes.",
+    "- Prefer existing CSS or inline styles for the target element.",
+    "- Do not add unrelated CSS selectors."
+  ];
   return lines.join("\n");
 }
 function buildAgentContextPreview(selection, activeCompPath) {
@@ -50863,7 +50845,7 @@ function PropertyPanelFlatFooter({
                 children: /* @__PURE__ */ jsx117("path", { d: "M8 1l1.4 4.6L14 7l-4.6 1.4L8 13l-1.4-4.6L2 7l4.6-1.4z" })
               }
             ),
-            "Ask agent about this element"
+            "Agent revisions"
           ]
         }
       ),
@@ -62365,15 +62347,20 @@ function AgentRevisionQueue({
   revisions,
   onRemove,
   onClear,
-  onCopyBatch
+  onSubmitBatch,
+  submission
 }) {
   const [open, setOpen] = useState97(false);
-  const [copyState, setCopyState] = useState97("idle");
-  if (!revisions.length) return null;
-  const copyBatch = async () => {
-    const copied = await onCopyBatch();
-    setCopyState(copied ? "copied" : "failed");
-    window.setTimeout(() => setCopyState("idle"), 2200);
+  const [submitting, setSubmitting] = useState97(false);
+  const [submitState, setSubmitState] = useState97("idle");
+  const sessionActive = submission?.status === "queued" || submission?.status === "running";
+  if (!revisions.length && !submission) return null;
+  const submitBatch = async () => {
+    setSubmitting(true);
+    const submitted = await onSubmitBatch();
+    setSubmitting(false);
+    setSubmitState(submitted ? "submitted" : "failed");
+    window.setTimeout(() => setSubmitState("idle"), 2200);
   };
   return /* @__PURE__ */ jsxs133(
     "section",
@@ -62392,23 +62379,27 @@ function AgentRevisionQueue({
               /* @__PURE__ */ jsx161("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-studio-accent/20 text-lg text-studio-accent", children: "\u2726" }),
               /* @__PURE__ */ jsxs133("span", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsx161("span", { className: "block text-sm font-semibold leading-5 text-neutral-100", children: "Agent revisions" }),
-                /* @__PURE__ */ jsxs133("span", { className: "block text-xs leading-5 text-neutral-400", children: [
-                  revisions.length,
-                  " queued \xB7 ready for bulk handoff"
-                ] })
+                /* @__PURE__ */ jsx161("span", { className: "block text-xs leading-5 text-neutral-400", children: sessionActive ? "Agent is working on your revisions" : `${revisions.length} queued \xB7 ready for submission` })
               ] }),
               /* @__PURE__ */ jsx161(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: "flex h-7 w-7 items-center justify-center rounded-md text-base text-neutral-400",
-                  children: open ? "\u2303" : "\u2304"
+                  children: /* @__PURE__ */ jsx161(
+                    ChevronRight,
+                    {
+                      size: 16,
+                      weight: "bold",
+                      className: open ? "rotate-90" : ""
+                    }
+                  )
                 }
               )
             ]
           }
         ),
-        open && /* @__PURE__ */ jsxs133(Fragment46, { children: [
+        open && revisions.length > 0 && /* @__PURE__ */ jsxs133(Fragment46, { children: [
           /* @__PURE__ */ jsx161("div", { className: "max-h-72 space-y-2.5 overflow-y-auto border-t border-neutral-800/80 px-4 py-4", children: revisions.map((revision, index) => /* @__PURE__ */ jsx161(
             RevisionRow,
             {
@@ -62432,13 +62423,20 @@ function AgentRevisionQueue({
               "button",
               {
                 type: "button",
-                onClick: () => void copyBatch(),
-                className: "rounded-lg bg-studio-accent px-4 py-2.5 text-xs font-semibold text-neutral-950 hover:bg-red-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-studio-accent/70",
-                children: copyState === "copied" ? "Batch copied" : copyState === "failed" ? "Copy failed" : "Copy batch prompt for Pi"
+                onClick: () => void submitBatch(),
+                disabled: submitting || sessionActive,
+                className: "rounded-lg bg-studio-accent px-4 py-2.5 text-xs font-semibold text-neutral-950 hover:bg-red-400 disabled:cursor-not-allowed disabled:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-studio-accent/70",
+                children: submitting ? "Submitting\u2026" : submitState === "submitted" ? "Revisions submitted" : submitState === "failed" ? "Submission failed" : sessionActive ? "Agent working\u2026" : "Submit revisions"
               }
             )
+          ] })
+        ] }),
+        open && submission && /* @__PURE__ */ jsxs133("div", { className: "border-t border-neutral-800/80 px-4 py-4 text-xs text-neutral-300", children: [
+          /* @__PURE__ */ jsxs133("div", { className: "flex items-center gap-2", children: [
+            sessionActive && /* @__PURE__ */ jsx161("span", { className: "h-3 w-3 animate-spin rounded-full border-2 border-neutral-600 border-t-studio-accent" }),
+            /* @__PURE__ */ jsx161("span", { className: "font-medium text-neutral-100", children: submission.status === "queued" ? "Revision session queued" : submission.status === "running" ? "Agent is working\u2026" : submission.status === "completed" ? "Revisions completed" : "Revision session failed" })
           ] }),
-          /* @__PURE__ */ jsx161("p", { className: "px-4 pb-4 text-[11px] leading-5 text-neutral-500", children: "Direct Pi submission will be enabled when the Pi revision endpoint is connected." })
+          (submission.message || submission.error) && /* @__PURE__ */ jsx161("p", { className: "mt-1.5 text-neutral-500", children: submission.message || submission.error })
         ] })
       ]
     }
@@ -62961,15 +62959,16 @@ function StudioOverlays({
         AgentRevisionQueue,
         {
           revisions,
+          submission: domEditSession.submission,
           onRemove: domEditSession.remove,
           onClear: domEditSession.clear,
-          onCopyBatch: async () => {
-            const copied = await domEditSession.copyBatch();
+          onSubmitBatch: async () => {
+            const submitted = await domEditSession.submitBatch();
             showToast(
-              copied ? "Batch prompt copied for Pi." : "Could not copy batch prompt.",
-              copied ? "info" : "error"
+              submitted ? "Revisions submitted to Pi." : "Could not submit revisions.",
+              submitted ? "info" : "error"
             );
-            return copied;
+            return submitted;
           }
         }
       ),
@@ -67071,9 +67070,13 @@ import { useState as useState107, useCallback as useCallback102, useEffect as us
 import { useCallback as useCallback101, useEffect as useEffect94, useRef as useRef119, useState as useState106 } from "react";
 var MAX_REVISIONS = 20;
 var STORAGE_PREFIX2 = "hyperframes-studio:agent-revisions:";
+var SUBMISSION_STORAGE_PREFIX = "hyperframes-studio:agent-revision-submission:";
 function storageKey(projectId) {
   return projectId ? `${STORAGE_PREFIX2}${projectId}` : null;
 }
+function submissionStorageKey(projectId) {
+  return projectId ? `${SUBMISSION_STORAGE_PREFIX}${projectId}` : null;
+}
 function readQueue(key2) {
   if (!key2) return [];
   try {
@@ -67098,35 +67101,32 @@ function isRevision(value) {
     revision.createdAt
   ].every((field) => typeof field === "string");
 }
-function buildAgentRevisionBatchPrompt(revisions) {
-  return [
-    "## HyperFrames revision batch v1",
-    `Revisions: ${revisions.length}`,
-    "",
-    "Apply every numbered revision to the current HyperFrames project.",
-    "Read all revisions before editing. Preserve unrelated composition content and timing.",
-    "If revisions overlap, apply the later revision as the user's latest intent.",
-    "Run HyperFrames check after all edits are complete.",
-    "",
-    ...revisions.flatMap((revision, index) => [
-      `### Revision ${index + 1}: ${revision.selectionLabel}`,
-      `Instruction: ${revision.instruction}`,
-      `Source: ${revision.sourceFile}`,
-      `Composition: ${revision.compositionPath}`,
-      "",
-      revision.prompt,
-      ""
-    ])
-  ].join("\n");
+function readSubmission(key2) {
+  if (!key2) return null;
+  try {
+    const value = JSON.parse(safeLocalStorage()?.getItem(key2) ?? "null");
+    if (typeof value.submissionId !== "string" || !["queued", "running", "completed", "failed"].includes(value.status))
+      return null;
+    return value;
+  } catch {
+    return null;
+  }
 }
 function useAgentRevisionQueue(projectId) {
   const key2 = storageKey(projectId);
+  const submissionKey = submissionStorageKey(projectId);
   const [revisions, setRevisions] = useState106(() => readQueue(key2));
+  const [submission, setSubmission] = useState106(
+    () => readSubmission(submissionKey)
+  );
   const activeKeyRef = useRef119(key2);
+  const activeSubmissionKeyRef = useRef119(submissionKey);
   useEffect94(() => {
     activeKeyRef.current = key2;
     setRevisions(readQueue(key2));
-  }, [key2]);
+    activeSubmissionKeyRef.current = submissionKey;
+    setSubmission(readSubmission(submissionKey));
+  }, [key2, submissionKey]);
   useEffect94(() => {
     if (activeKeyRef.current !== key2) return;
     const storage = safeLocalStorage();
@@ -67137,6 +67137,52 @@ function useAgentRevisionQueue(projectId) {
     } catch {
     }
   }, [key2, revisions]);
+  useEffect94(() => {
+    if (activeSubmissionKeyRef.current !== submissionKey) return;
+    const storage = safeLocalStorage();
+    if (!storage || !submissionKey) return;
+    try {
+      if (submission && (submission.status === "queued" || submission.status === "running")) {
+        storage.setItem(submissionKey, JSON.stringify(submission));
+      } else {
+        storage.removeItem(submissionKey);
+      }
+    } catch {
+    }
+  }, [submissionKey, submission]);
+  useEffect94(() => {
+    const submissionId = submission?.submissionId;
+    if (!submissionId || submission?.status === "completed" || submission?.status === "failed") {
+      return;
+    }
+    let cancelled = false;
+    const poll = async () => {
+      try {
+        const response = await fetch(`/api/agent-revisions/${encodeURIComponent(submissionId)}`);
+        if (response.status === 404) {
+          if (cancelled) return;
+          setSubmission({
+            submissionId,
+            status: "failed",
+            error: "Revision session not found."
+          });
+          return;
+        }
+        if (!response.ok) return;
+        const data = await response.json();
+        if (cancelled || typeof data.submissionId !== "string" || !["queued", "running", "completed", "failed"].includes(data.status))
+          return;
+        setSubmission(data);
+      } catch {
+      }
+    };
+    void poll();
+    const interval = window.setInterval(() => void poll(), 2e3);
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [submission?.submissionId, submission?.status]);
   const enqueue = useCallback101((revision) => {
     setRevisions(
       (current) => [
@@ -67149,11 +67195,29 @@ function useAgentRevisionQueue(projectId) {
     setRevisions((current) => current.filter((revision) => revision.id !== id));
   }, []);
   const clear = useCallback101(() => setRevisions([]), []);
-  const copyBatch = useCallback101(async () => {
-    if (!revisions.length) return false;
-    return copyTextToClipboard(buildAgentRevisionBatchPrompt(revisions));
-  }, [revisions]);
-  return { revisions, enqueue, remove, clear, copyBatch };
+  const submitBatch = useCallback101(async () => {
+    if (!projectId || !revisions.length) return false;
+    try {
+      const response = await fetch("/api/agent-revisions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          schemaVersion: 1,
+          projectName: projectId,
+          prompts: revisions.map((revision) => revision.prompt)
+        })
+      });
+      if (!response.ok) return false;
+      const data = await response.json();
+      if (typeof data.submissionId !== "string") return false;
+      setSubmission({ submissionId: data.submissionId, status: "queued" });
+      setRevisions([]);
+      return true;
+    } catch {
+      return false;
+    }
+  }, [projectId, revisions]);
+  return { revisions, enqueue, remove, clear, submitBatch, submission };
 }
 // src/hooks/useAskAgentModal.ts
@@ -73161,9 +73225,10 @@ function useDomEditSession({
     handleAskAgent,
     handleAgentModalSubmit,
     revisions,
+    submission,
     remove: removeAgentRevision,
     clear: clearAgentRevisions,
-    copyBatch: copyAgentRevisionBatch
+    submitBatch: submitAgentRevisionBatch
   } = useAskAgentModal({
     projectId,
     activeCompPath,
@@ -73470,9 +73535,10 @@ function useDomEditSession({
     copiedAgentPrompt,
     agentPromptSelectionContext,
     revisions,
+    submission,
     remove: removeAgentRevision,
     clear: clearAgentRevisions,
-    copyBatch: copyAgentRevisionBatch,
+    submitBatch: submitAgentRevisionBatch,
     // Refs
     domEditSelectionRef,
     // Callbacks