@parhelia/core 0.3.12816 → 0.3.12818

package/dist/editor/media-selector/mediaItemDrag.js

@@ -1,11 +1,13 @@
 import { setContentTreeItemDragImage, setMultiDragImage, } from "../ui/DragPreview";
 /**
- * Payload marker so a media drag can be told apart from a file drag. The real
- * payload travels through `editContext.dragObject` (same as the content tree);
- * the data transfer entry only exists because Firefox refuses to start a drag
- * without one.
+ * Payload marker so a media drag can be told apart from a file drag. The
+ * application mirrors the descriptor in DataTransfer as well as React state:
+ * native drag/drop can outlive or outrun the render that carries dragObject.
  */
 export const MEDIA_ITEM_DRAG_MIME = "application/x-parhelia-media-items";
+const POINTER_DRAG_THRESHOLD_PX = 6;
+let pendingPointerDrag;
+let pointerDragCleanup;
 export function toMediaItemDescriptor(item, fallbackLanguage) {
     return {
         id: item.id,
@@ -14,6 +16,68 @@ export function toMediaItemDescriptor(item, fallbackLanguage) {
         name: item.name,
     };
 }
+function createMediaItemDragObject(items, language) {
+    if (items.length === 0)
+        return undefined;
+    return {
+        type: "items",
+        typeId: items[0]?.templateId ?? "",
+        items: items.map((item) => toMediaItemDescriptor(item, language)),
+    };
+}
+/**
+ * Arms a pointer-based fallback before the browser decides whether to begin a
+ * native HTML drag. Native drag is still the primary path. If the browser
+ * never emits dragstart (seen with loaded Chromium processes, touch, and pen),
+ * ContentTree can consume this gesture on pointerup and perform the same move.
+ */
+export function beginMediaItemPointerDrag({ event, items, language, }) {
+    if (event.button !== 0 || event.isPrimary === false)
+        return;
+    cancelMediaItemPointerDrag();
+    const dragObject = createMediaItemDragObject(items, language);
+    if (!dragObject || typeof window === "undefined")
+        return;
+    pendingPointerDrag = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        dragObject,
+    };
+    const clearAfterPointerUp = (pointerEvent) => {
+        if (pointerEvent.pointerId !== pendingPointerDrag?.pointerId)
+            return;
+        // React handles the tree's pointerup while the event bubbles. Clear on the
+        // next task so ContentTree gets the first chance to consume the gesture.
+        window.setTimeout(() => cancelMediaItemPointerDrag(), 0);
+    };
+    const clearOnPointerCancel = (pointerEvent) => {
+        if (pointerEvent.pointerId === pendingPointerDrag?.pointerId) {
+            cancelMediaItemPointerDrag();
+        }
+    };
+    window.addEventListener("pointerup", clearAfterPointerUp);
+    window.addEventListener("pointercancel", clearOnPointerCancel);
+    pointerDragCleanup = () => {
+        window.removeEventListener("pointerup", clearAfterPointerUp);
+        window.removeEventListener("pointercancel", clearOnPointerCancel);
+    };
+}
+export function cancelMediaItemPointerDrag() {
+    pointerDragCleanup?.();
+    pointerDragCleanup = undefined;
+    pendingPointerDrag = undefined;
+}
+export function consumeMediaItemPointerDrag(event) {
+    const pending = pendingPointerDrag;
+    if (!pending || pending.pointerId !== event.pointerId)
+        return undefined;
+    const distance = Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY);
+    if (distance < POINTER_DRAG_THRESHOLD_PX)
+        return undefined;
+    cancelMediaItemPointerDrag();
+    return pending.dragObject;
+}
 /**
  * Starts dragging media items out of a thumbnail grid. Mirrors the content
  * tree's drag start so the tree's existing drop zones light up and can move the
@@ -22,9 +86,15 @@ export function toMediaItemDescriptor(item, fallbackLanguage) {
 export function startMediaItemDrag({ event, editContext, items, language, }) {
     if (!editContext || items.length === 0)
         return;
+    // Once native dragstart fires it owns the gesture; disarm the pointer
+    // fallback so a later pointerup cannot execute the move twice.
+    cancelMediaItemPointerDrag();
+    const dragObject = createMediaItemDragObject(items, language);
+    if (!dragObject)
+        return;
     try {
         event.dataTransfer.effectAllowed = "move";
-        event.dataTransfer.setData(MEDIA_ITEM_DRAG_MIME, items.map((item) => item.id).join(","));
+        event.dataTransfer.setData(MEDIA_ITEM_DRAG_MIME, JSON.stringify(dragObject));
     }
     catch { }
     if (items.length > 1) {
@@ -33,10 +103,38 @@ export function startMediaItemDrag({ event, editContext, items, language, }) {
     else {
         setContentTreeItemDragImage(event, items[0].name);
     }
-    editContext.dragStart({
-        type: "items",
-        typeId: items[0]?.templateId ?? "",
-        items: items.map((item) => toMediaItemDescriptor(item, language)),
-    });
+    editContext.dragStart(dragObject);
+}
+/**
+ * Recovers a media item drag from the browser-owned payload when the React
+ * drag state has not committed yet or was cleared by an intervening render.
+ */
+export function readMediaItemDrag(dataTransfer) {
+    if (!dataTransfer)
+        return undefined;
+    try {
+        const raw = dataTransfer.getData(MEDIA_ITEM_DRAG_MIME);
+        if (!raw)
+            return undefined;
+        const parsed = JSON.parse(raw);
+        if (parsed.type !== "items" || !Array.isArray(parsed.items)) {
+            return undefined;
+        }
+        const items = parsed.items.filter((item) => !!item &&
+            typeof item.id === "string" &&
+            item.id.trim().length > 0 &&
+            typeof item.language === "string" &&
+            Number.isFinite(item.version));
+        if (items.length === 0)
+            return undefined;
+        return {
+            type: "items",
+            typeId: typeof parsed.typeId === "string" ? parsed.typeId : "",
+            items,
+        };
+    }
+    catch {
+        return undefined;
+    }
 }
 //# sourceMappingURL=mediaItemDrag.js.map

package/dist/editor/media-selector/mediaItemDrag.js.map

@@ -1 +1 @@
-{"version":3,"file":"mediaItemDrag.js","sourceRoot":"","sources":["../../../src/editor/media-selector/mediaItemDrag.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,2BAA2B,EAC3B,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,oCAAoC,CAAC;AAIzE,MAAM,UAAU,qBAAqB,CACnC,IAAsB,EACtB,gBAAwB;IAExB,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,gBAAgB;QAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC;QAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,GAMT;IACC,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;IAE/C,IAAI,CAAC;QACH,KAAK,CAAC,YAAY,CAAC,aAAa,GAAG,MAAM,CAAC;QAC1C,KAAK,CAAC,YAAY,CAAC,OAAO,CACxB,oBAAoB,EACpB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACvC,CAAC;IACJ,CAAC;IAAC,MAAM,CAAC,CAAA,CAAC;IAEV,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACrB,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACxD,CAAC;SAAM,CAAC;QACN,2BAA2B,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAE,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;IAED,WAAW,CAAC,SAAS,CAAC;QACpB,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,IAAI,EAAE;QAClC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KAClE,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"mediaItemDrag.js","sourceRoot":"","sources":["../../../src/editor/media-selector/mediaItemDrag.ts"],"names":[],"mappings":"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"}

package/dist/editor/settings/panels/ProjectTemplatesPanel.js

@@ -16,6 +16,7 @@ import { Switch } from "../../../components/ui/switch";
 import { Textarea } from "../../../components/ui/textarea";
 import { cn } from "../../../lib/utils";
 import { TaskAssigneePicker } from "../../../task-board/components/TaskAssigneePicker";
+import { parseGoalDisplaySpec } from "../../../task-board/components/goalDisplaySpec";
 import { deleteProjectTemplate, getProjectTemplateAgent, getProjectTemplates, resetProjectTemplateAgent, upsertProjectTemplate, } from "../../../task-board/services/taskService";
 const DependencyGraphView = lazy(() => import("../../../task-board/views/DependencyGraphView").then((module) => ({
     default: module.DependencyGraphView,
@@ -236,6 +237,7 @@ function createEmptyGoalDefinition(goalCount, title) {
         sortOrder: goalCount * 100,
         defaultScopeJson: null,
         dataShape: null,
+        displaySpec: null,
     };
 }
 function sortTemplates(templates) {
@@ -297,9 +299,19 @@ export function buildUpsertTemplateRequest(template) {
             sortOrder: goal.sortOrder || index * 100,
             defaultScopeJson: goal.defaultScopeJson?.trim() || null,
             dataShape: goal.dataShape?.trim() || null,
+            displaySpec: goal.displaySpec?.trim() || null,
         })),
     };
 }
+function getGoalDisplaySpecError(goals) {
+    for (const goal of goals ?? []) {
+        const result = parseGoalDisplaySpec(goal.displaySpec);
+        if ("error" in result) {
+            return `${goal.title || "Untitled goal"}: ${result.error}`;
+        }
+    }
+    return null;
+}
 export function mergeTemplateResponseWithRequest(serverTemplate, request) {
     const requestedTaskById = new Map((request.taskTemplates ?? []).map((task) => [task.id, task]));
     const requestedGoalById = new Map((request.goalTemplates ?? []).map((goal) => [goal.id, goal]));
@@ -314,6 +326,9 @@ export function mergeTemplateResponseWithRequest(serverTemplate, request) {
             return {
                 ...goal,
                 description: requested?.description ?? goal.description,
+                displaySpec: requested
+                    ? (requested.displaySpec ?? null)
+                    : goal.displaySpec,
             };
         }),
         ...(request.goalTemplates ?? []).filter((goal) => !serverGoalIds.has(goal.id)),
@@ -370,6 +385,8 @@ function getActiveDescriptionDraftField(selectedTaskId, selectedGoalId) {
             return { kind: "task", id: selectedTaskId };
         case "project-template-goal-description-input":
             return { kind: "goal", id: selectedGoalId };
+        case "project-template-goal-display-spec-input":
+            return { kind: "goalDisplaySpec", id: selectedGoalId };
         default:
             return null;
     }
@@ -408,6 +425,17 @@ function preserveActiveDescriptionDraft(template, draft, activeField) {
                 : goal),
         };
     }
+    if (activeField.kind === "goalDisplaySpec" && activeField.id) {
+        const draftGoal = (draft.goalTemplates ?? []).find((goal) => goal.id === activeField.id);
+        if (!draftGoal)
+            return template;
+        return {
+            ...template,
+            goalTemplates: (template.goalTemplates ?? []).map((goal) => goal.id === activeField.id
+                ? { ...goal, displaySpec: draftGoal.displaySpec }
+                : goal),
+        };
+    }
     return template;
 }
 function isValidGuid(value) {
@@ -518,6 +546,7 @@ function buildProjectTemplateAgentContext(template, selectedTaskTemplateId, sele
         sortOrder: goal.sortOrder ?? 0,
         defaultScopeJson: goal.defaultScopeJson?.trim() || null,
         dataShape: goal.dataShape?.trim() || null,
+        displaySpec: goal.displaySpec?.trim() || null,
     }));
     const selectedGoal = selectedGoalTemplateId
         ? (goalDefinitions.find((goal) => goal.id === selectedGoalTemplateId) ??
@@ -1349,6 +1378,14 @@ export function ProjectTemplatesPanel() {
         latestDraftSignatureRef.current = currentSaveSignature;
     }, [currentSaveSignature]);
     const persistTemplate = useCallback(async (request, signature, options) => {
+        const displaySpecError = getGoalDisplaySpecError(request.goalTemplates);
+        if (displaySpecError) {
+            const message = `Invalid goal Display Spec — ${displaySpecError}`;
+            setSaveError(message);
+            if (options?.showErrorToast)
+                toast.error(message);
+            return false;
+        }
         const runId = ++saveRunIdRef.current;
         setSaving(true);
         setSaveError(null);
@@ -2502,7 +2539,14 @@ export function ProjectTemplatesPanel() {
                                                 })), placeholder: '{"rootItemId":"...","pagesOnly":true}' })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-goal-data-shape-input", children: "Data shape hint (optional)" }), _jsx(Input, { id: "project-template-goal-data-shape-input", className: "text-xs md:text-xs", value: selectedGoal.dataShape ?? "", onChange: (event) => updateSelectedGoal((goal) => ({
                                                     ...goal,
                                                     dataShape: event.target.value,
-                                                })), placeholder: "e.g. { recommendations: string[] }" })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-neutral-grey-100 text-xs font-medium", children: "Disabled" }), _jsx("div", { className: "text-neutral-grey-50 mt-0.5 text-xs", children: "Keeps the definition but hides it from the runtime goal catalog." })] }), _jsx(Switch, { checked: selectedGoal.disabled === true, onCheckedChange: (checked) => updateSelectedGoal((goal) => ({
+                                                })), placeholder: "e.g. { recommendations: string[] }" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-goal-display-spec-input", children: "Display Spec (JSON, optional)" }), _jsx(Textarea, { id: "project-template-goal-display-spec-input", "data-testid": "project-template-goal-display-spec-input", className: "font-mono text-xs", rows: 5, value: selectedGoal.displaySpec ?? "", onChange: (event) => updateSelectedGoal((goal) => ({
+                                                    ...goal,
+                                                    displaySpec: event.target.value,
+                                                })), placeholder: '{"version":1,"sections":[{"widget":"summary"}]}', "aria-invalid": "error" in
+                                                    parseGoalDisplaySpec(selectedGoal.displaySpec) }), (() => {
+                                                const result = parseGoalDisplaySpec(selectedGoal.displaySpec);
+                                                return "error" in result ? (_jsx("div", { className: "text-feedback-red text-xs", "data-testid": "project-template-goal-display-spec-error", children: result.error })) : null;
+                                            })()] }), _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-neutral-grey-100 text-xs font-medium", children: "Disabled" }), _jsx("div", { className: "text-neutral-grey-50 mt-0.5 text-xs", children: "Keeps the definition but hides it from the runtime goal catalog." })] }), _jsx(Switch, { checked: selectedGoal.disabled === true, onCheckedChange: (checked) => updateSelectedGoal((goal) => ({
                                                     ...goal,
                                                     disabled: checked,
                                                 })), "aria-label": "Disable this goal definition", "data-testid": "project-template-goal-disabled-switch" })] })] })) : (_jsx("div", { className: "border-border-default text-neutral-grey-50 flex items-center justify-center rounded-md border border-dashed p-6 text-center text-xs", children: "Select a goal to edit its details." }))] })) }));