@elevasis/ui 2.71.0 → 2.73.0

package/dist/features/content/index.js

@@ -1,14 +1,14 @@
 import { PageContainer } from '../../chunk-BZZCNLT6.js';
 import '../../chunk-TUMSNGTX.js';
 import { FilterBar } from '../../chunk-PDHTXPSF.js';
-import { CustomModal, useContentItems, useContentDistributions, useContentConfig, SubshellContentContainer, PageTitleCaption, CenteredErrorState, EmptyState, StatCard, getContentItemIdentity, usePaginationState, useContentItem, useContentItemAttempts, useUpdateContentItem, useReviewContentItem, getOpenContentReviewGates, useContentDistribution, useUpdateContentDistribution, useContentPipelineSummary, deriveContentBoard, useExecutions } from '../../chunk-UZ7MSORW.js';
-export { CONTENT_ITEMS, ContentSidebar, ContentSidebarMiddle, DEFAULT_CONTENT_VOCABULARY, MyReviewQueuePanel, contentManifest, deriveContentBoard, getContentItemIdentity, resolveContentStepResource, resolveContentVocabulary, useContentConfig } from '../../chunk-UZ7MSORW.js';
+import { CustomModal, useContentItemSourceAssetDetails, useContentSourceAssets, useAddContentItemSourceAsset, useRemoveContentItemSourceAsset, useReorderContentItemSourceAssets, useUpdateContentItemSourceAsset, useCloudStorageTemporaryLinks, useContentItemAttempts, useExecuteAsync, useUpdateContentItem, useExecution, contentKeys, useContentItems, useContentDistributions, useContentConfig, isAwaitingReview, SubshellContentContainer, PageTitleCaption, CenteredErrorState, EmptyState, StatCard, getContentItemIdentity, usePaginationState, resolveCurrentContentStep, useContentItem, useReviewContentItem, resolveReviewTarget, useContentDistribution, useStorageSignedUrls, storageObjectRefKey, useContentPipelineSummary, deriveContentBoard, resolveContentWorkspaceRoute, useExecutions } from '../../chunk-OCVSPAKM.js';
+export { CONTENT_ITEMS, ContentSidebar, ContentSidebarMiddle, DEFAULT_CONTENT_VOCABULARY, MyReviewQueuePanel, contentManifest, deriveContentBoard, getContentItemIdentity, resolveContentStepResource, resolveContentVocabulary, useContentConfig } from '../../chunk-OCVSPAKM.js';
 import '../../chunk-R6NMRXNO.js';
 import '../../chunk-RBGVNPA6.js';
 import '../../chunk-MKH2KOAO.js';
-import '../../chunk-VDX6DL7Z.js';
+import '../../chunk-NHNTX6ZL.js';
 import '../../chunk-L7BZZ4SI.js';
-import { showSuccessNotification } from '../../chunk-C75XWBYZ.js';
+import { showSuccessNotification } from '../../chunk-U2H3TIHD.js';
 import '../../chunk-MISHPEJX.js';
 import { CardHeader } from '../../chunk-62GVNH5U.js';
 import '../../chunk-P45GQ3ZW.js';
@@ -20,7 +20,7 @@ import '../../chunk-UD657ICS.js';
 import '../../chunk-DD3CCMCZ.js';
 import '../../chunk-RNP5R5I3.js';
 import '../../chunk-RT4KRGZT.js';
-import { formatTimeAgo, formatRelativeTime } from '../../chunk-NM4A63KJ.js';
+import { formatTimeAgo, formatRelativeTime } from '../../chunk-IBCEAVB2.js';
 import '../../chunk-Y6I3IC45.js';
 import '../../chunk-6SSQGWK7.js';
 import '../../chunk-BI5VDO2K.js';
@@ -29,12 +29,13 @@ import '../../chunk-TVTSASST.js';
 import '../../chunk-BRJ3QZ4E.js';
 import '../../chunk-Q7DJKLEN.js';
 import '../../chunk-I2KLQ2HA.js';
-import { Stack, Group, Text, Badge, Button, Textarea, Box, Loader, Accordion, Tooltip, Card, Alert, List, Paper, Center, SimpleGrid, Table, TextInput, Select, Pagination, Title, Tabs, Anchor, Divider, Progress, Checkbox, TagsInput, Image, ActionIcon, UnstyledButton, ScrollArea } from '@mantine/core';
-import { IconAlertTriangle, IconShieldCheck, IconShieldX, IconArticle, IconArrowRight, IconClock, IconSend, IconSearch, IconFileText, IconListDetails, IconAlertCircle, IconLayoutGrid, IconShare, IconPlayerPlay, IconExternalLink, IconMaximize, IconCopy, IconDownload, IconTrash, IconArrowLeft, IconArrowsExchange, IconCheck, IconX, IconChecklist, IconRoute, IconInfoCircle, IconClockHour4 } from '@tabler/icons-react';
+import { Stack, Group, Text, Badge, Button, Textarea, Box, Loader, Accordion, Tooltip, Card, Alert, List, Paper, SegmentedControl, Slider, Title, Table, TextInput, Select, Modal, ActionIcon, Center, SimpleGrid, Pagination, Tabs, Anchor, Divider, Progress, Image as Image$1, UnstyledButton, ScrollArea } from '@mantine/core';
+import { IconAlertTriangle, IconShieldCheck, IconShieldX, IconPhoto, IconGripVertical, IconCrop, IconArrowUp, IconArrowDown, IconUnlink, IconLink, IconPhotoOff, IconChevronLeft, IconChevronRight, IconCheck, IconSparkles, IconEye, IconArticle, IconArrowRight, IconClock, IconSend, IconSearch, IconFileText, IconExternalLink, IconListDetails, IconAlertCircle, IconLayoutGrid, IconShare, IconPlayerPlay, IconCircleCheck, IconCircleDashed, IconMaximize, IconCopy, IconDownload, IconArrowLeft, IconArrowsExchange, IconX, IconChecklist, IconRoute, IconInfoCircle, IconClockHour4 } from '@tabler/icons-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useMemo, Fragment as Fragment$1, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useMemo, useEffect, Fragment as Fragment$1 } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useNavigate, useSearch } from '@tanstack/react-router';
-import { useDisclosure } from '@mantine/hooks';
 
 function renderFieldValue(value, kind) {
   if (value === void 0 || value === null || value === "") {
@@ -425,7 +426,8 @@ function ContentReviewCard({
   processingSteps = [],
   actions,
   onAction,
-  actionsPending = false
+  actionsPending = false,
+  readOnly = false
 }) {
   return /* @__PURE__ */ jsx(Card, { withBorder: true, radius: "md", padding: "xl", "data-testid": "content-review-card", children: /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
     title || processingSteps.length > 0 ? /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
@@ -466,10 +468,10 @@ function ContentReviewCard({
         onReset,
         payload,
         payloadFields,
-        disabled: actionsPending
+        disabled: actionsPending || readOnly
       }
     ),
-    /* @__PURE__ */ jsx(
+    readOnly ? null : /* @__PURE__ */ jsx(
       AlternatesPanel,
       {
         body,
@@ -535,6 +537,1007 @@ function ContentReviewCard({
     /* @__PURE__ */ jsx(ReviewActionBar, { actions, onAction, pending: actionsPending })
   ] }) });
 }
+function moveItem(items, fromIndex, toIndex) {
+  const next = items.slice();
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+function SelectedAssetStrip({ assets, onReorder }) {
+  const [dragOverIndex, setDragOverIndex] = useState(null);
+  const draggingIndexRef = useRef(null);
+  const handleDragStart = useCallback((e, index) => {
+    draggingIndexRef.current = index;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(index));
+  }, []);
+  const handleDragOver = useCallback((e, index) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDragOverIndex(index);
+  }, []);
+  const handleDragLeave = useCallback(() => {
+    setDragOverIndex(null);
+  }, []);
+  const handleDrop = useCallback(
+    (e, targetIndex) => {
+      e.preventDefault();
+      setDragOverIndex(null);
+      const sourceIndex = draggingIndexRef.current;
+      draggingIndexRef.current = null;
+      if (sourceIndex === null || sourceIndex === targetIndex) return;
+      onReorder(moveItem(assets, sourceIndex, targetIndex));
+    },
+    [assets, onReorder]
+  );
+  const handleDragEnd = useCallback(() => {
+    draggingIndexRef.current = null;
+    setDragOverIndex(null);
+  }, []);
+  if (assets.length === 0) {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        withBorder: true,
+        p: "md",
+        "data-testid": "selected-asset-strip-empty",
+        style: { borderStyle: "dashed", borderColor: "var(--color-border)" },
+        children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ta: "center", children: "No assets selected yet." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Group, { gap: "sm", wrap: "wrap", "data-testid": "selected-asset-strip", role: "list", children: assets.map((asset, index) => {
+    const isCover = index === 0;
+    const isDragTarget = dragOverIndex === index;
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        withBorder: true,
+        role: "listitem",
+        "data-testid": `selected-asset-strip-item-${asset.id}`,
+        draggable: assets.length > 1,
+        onDragStart: (e) => handleDragStart(e, index),
+        onDragOver: (e) => handleDragOver(e, index),
+        onDragLeave: handleDragLeave,
+        onDrop: (e) => handleDrop(e, index),
+        onDragEnd: handleDragEnd,
+        style: {
+          width: 120,
+          overflow: "hidden",
+          cursor: assets.length > 1 ? "grab" : "default",
+          userSelect: "none",
+          borderColor: isDragTarget ? "var(--color-primary)" : "var(--color-border)",
+          transition: `border-color var(--duration-fast) var(--easing)`
+        },
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 4, p: 6, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              style: {
+                position: "relative",
+                width: "100%",
+                aspectRatio: "1 / 1",
+                borderRadius: 4,
+                overflow: "hidden",
+                backgroundColor: "var(--color-surface)"
+              },
+              children: [
+                asset.thumbnailUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: asset.thumbnailUrl,
+                    alt: asset.name,
+                    style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+                  }
+                ) : /* @__PURE__ */ jsx(Group, { justify: "center", align: "center", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(IconPhoto, { size: 24, color: "var(--color-textDimmed)" }) }),
+                isCover && /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    size: "xs",
+                    variant: "filled",
+                    "data-testid": `selected-asset-strip-cover-${asset.id}`,
+                    style: { position: "absolute", top: 4, left: 4 },
+                    children: "Cover"
+                  }
+                ),
+                assets.length > 1 && /* @__PURE__ */ jsx(Box, { style: { position: "absolute", top: 4, right: 4, color: "var(--color-textDimmed)" }, children: /* @__PURE__ */ jsx(IconGripVertical, { size: 16 }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "xs", lineClamp: 1, title: asset.name, children: asset.name })
+        ] })
+      },
+      asset.id
+    );
+  }) });
+}
+var CROP_ASPECT_OPTIONS = [
+  { value: "original", label: "Original", ratio: null },
+  { value: "portrait", label: "4:5", ratio: 4 / 5 },
+  { value: "square", label: "1:1", ratio: 1 },
+  { value: "landscape", label: "1.91:1", ratio: 1.91 }
+];
+var MIN_CROP_SCALE = 0.2;
+function fitBox(pixelRatio, naturalWidth, naturalHeight) {
+  if (pixelRatio === null || naturalWidth === 0 || naturalHeight === 0) return { width: 1, height: 1 };
+  const normalizedRatio = pixelRatio * naturalHeight / naturalWidth;
+  return normalizedRatio >= 1 ? { width: 1, height: 1 / normalizedRatio } : { width: normalizedRatio, height: 1 };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function round(value) {
+  return Math.round(value * 1e4) / 1e4;
+}
+function AssetCropEditor({
+  imageUrl,
+  value,
+  onChange,
+  defaultAspect = "original",
+  aspect,
+  disabled = false,
+  label
+}) {
+  const [internalAspect, setInternalAspect] = useState(defaultAspect);
+  const activeAspect = aspect ?? internalAspect;
+  const [natural, setNatural] = useState(null);
+  const frameRef = useRef(null);
+  const dragOffsetRef = useRef(null);
+  const ratio = useMemo(
+    () => CROP_ASPECT_OPTIONS.find((option) => option.value === activeAspect)?.ratio ?? null,
+    [activeAspect]
+  );
+  const maxBox = useMemo(
+    () => fitBox(ratio, natural?.width ?? 0, natural?.height ?? 0),
+    [ratio, natural?.width, natural?.height]
+  );
+  const crop = value ?? { x: 0, y: 0, width: 1, height: 1 };
+  const scale = maxBox.width === 0 ? 1 : clamp(crop.width / maxBox.width, MIN_CROP_SCALE, 1);
+  const emit = useCallback(
+    (next) => {
+      const width = clamp(next.width, 0.01, 1);
+      const height = clamp(next.height, 0.01, 1);
+      onChange({
+        x: round(clamp(next.x, 0, 1 - width)),
+        y: round(clamp(next.y, 0, 1 - height)),
+        width: round(width),
+        height: round(height)
+      });
+    },
+    [onChange]
+  );
+  const refit = useCallback(
+    (nextScale) => {
+      const width = maxBox.width * nextScale;
+      const height = maxBox.height * nextScale;
+      emit({ x: (1 - width) / 2, y: (1 - height) / 2, width, height });
+    },
+    [emit, maxBox.height, maxBox.width]
+  );
+  const fittedRatioRef = useRef(void 0);
+  useEffect(() => {
+    if (natural === null || disabled) return;
+    const isFirstMeasurement = fittedRatioRef.current === void 0;
+    fittedRatioRef.current = ratio;
+    if (isFirstMeasurement && value !== null) return;
+    if (ratio === null && value === null) return;
+    refit(scale);
+  }, [ratio, natural?.width, natural?.height]);
+  const handlePointerDown = (event) => {
+    if (disabled || frameRef.current === null) return;
+    const frame = frameRef.current.getBoundingClientRect();
+    dragOffsetRef.current = {
+      x: (event.clientX - frame.left) / frame.width - crop.x,
+      y: (event.clientY - frame.top) / frame.height - crop.y
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const handlePointerMove = (event) => {
+    const offset = dragOffsetRef.current;
+    if (offset === null || frameRef.current === null) return;
+    const frame = frameRef.current.getBoundingClientRect();
+    emit({
+      x: (event.clientX - frame.left) / frame.width - offset.x,
+      y: (event.clientY - frame.top) / frame.height - offset.y,
+      width: crop.width,
+      height: crop.height
+    });
+  };
+  const endDrag = (event) => {
+    dragOffsetRef.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    const step = 0.01;
+    const nudge = {
+      ArrowLeft: [-step, 0],
+      ArrowRight: [step, 0],
+      ArrowUp: [0, -step],
+      ArrowDown: [0, step]
+    };
+    const delta = nudge[event.key];
+    if (delta === void 0) return;
+    event.preventDefault();
+    emit({ x: crop.x + delta[0], y: crop.y + delta[1], width: crop.width, height: crop.height });
+  };
+  const croppedPixels = natural === null ? null : `${Math.round(crop.width * natural.width)}x${Math.round(crop.height * natural.height)}`;
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", "data-testid": "asset-crop-editor", children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "xs", children: [
+      label !== void 0 && /* @__PURE__ */ jsx(Text, { fw: 500, children: label }),
+      croppedPixels !== null && /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", children: croppedPixels })
+    ] }),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, p: 0, style: { overflow: "hidden", position: "relative" }, children: /* @__PURE__ */ jsxs("div", { ref: frameRef, style: { position: "relative", lineHeight: 0 }, children: [
+      imageUrl === null ? /* @__PURE__ */ jsx(Group, { justify: "center", p: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: "",
+          style: { width: "100%", display: "block" },
+          onLoad: (event) => setNatural({
+            width: event.currentTarget.naturalWidth,
+            height: event.currentTarget.naturalHeight
+          })
+        }
+      ),
+      imageUrl !== null && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "slider",
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": `Crop area${label === void 0 ? "" : ` for ${label}`}`,
+          "aria-valuetext": `x ${Math.round(crop.x * 100)}%, y ${Math.round(crop.y * 100)}%, ${Math.round(
+            crop.width * 100
+          )}% wide`,
+          "data-testid": "asset-crop-box",
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: endDrag,
+          onPointerCancel: endDrag,
+          onKeyDown: handleKeyDown,
+          style: {
+            position: "absolute",
+            left: `${crop.x * 100}%`,
+            top: `${crop.y * 100}%`,
+            width: `${crop.width * 100}%`,
+            height: `${crop.height * 100}%`,
+            border: "2px solid var(--mantine-color-blue-5)",
+            boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.45)",
+            cursor: disabled ? "default" : "move",
+            touchAction: "none"
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "center", wrap: "wrap", children: [
+      aspect === void 0 && /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          size: "xs",
+          disabled,
+          value: activeAspect,
+          onChange: setInternalAspect,
+          data: CROP_ASPECT_OPTIONS.map((option) => ({ value: option.value, label: option.label }))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          "aria-label": "Crop size",
+          style: { flex: 1, minWidth: 140 },
+          disabled: disabled || imageUrl === null,
+          min: MIN_CROP_SCALE,
+          max: 1,
+          step: 0.01,
+          value: scale,
+          label: (current) => `${Math.round(current * 100)}%`,
+          onChange: refit
+        }
+      )
+    ] })
+  ] });
+}
+var ASSET_PICKER_FETCH_LIMIT = 100;
+function describeAsset(membership, asset) {
+  return asset?.title ?? membership.sourceAssetId;
+}
+function readStorageReference(asset) {
+  const metadata = asset?.metadata;
+  if (typeof metadata !== "object" || metadata === null) return null;
+  const { credentialName, cloudStorageId } = metadata;
+  if (typeof credentialName !== "string" || typeof cloudStorageId !== "string") return null;
+  return { credentialName, cloudStorageId };
+}
+function SourceAssetsPanel({ itemId }) {
+  const { memberships, isMembershipLoaded } = useContentItemSourceAssetDetails(itemId);
+  const assetsQuery = useContentSourceAssets({ limit: ASSET_PICKER_FETCH_LIMIT });
+  const addMembership = useAddContentItemSourceAsset();
+  const removeMembership = useRemoveContentItemSourceAsset();
+  const reorderMemberships = useReorderContentItemSourceAssets();
+  const updateMembership = useUpdateContentItemSourceAsset();
+  const [assetToLink, setAssetToLink] = useState(null);
+  const [altDrafts, setAltDrafts] = useState({});
+  const [croppingAssetId, setCroppingAssetId] = useState(null);
+  const [cropDraft, setCropDraft] = useState(null);
+  const croppingDetail = memberships.find((detail) => detail.membership.sourceAssetId === croppingAssetId);
+  const croppingReference = readStorageReference(croppingDetail?.asset);
+  const { links } = useCloudStorageTemporaryLinks(
+    croppingReference?.credentialName ?? "",
+    croppingReference === null ? [] : [croppingReference.cloudStorageId]
+  );
+  const linkedIds = useMemo(() => new Set(memberships.map((detail) => detail.membership.sourceAssetId)), [memberships]);
+  const linkableOptions = useMemo(
+    () => (assetsQuery.data?.data ?? []).filter((asset) => !linkedIds.has(asset.id)).map((asset) => ({ value: asset.id, label: `${asset.title} (${asset.kind})` })),
+    [assetsQuery.data, linkedIds]
+  );
+  const orderedIds = memberships.map((detail) => detail.membership.sourceAssetId);
+  const handleLink = () => {
+    if (!assetToLink) return;
+    const highestPosition = memberships.reduce((highest, detail) => Math.max(highest, detail.membership.position), -1);
+    addMembership.mutate(
+      { itemId, membership: { sourceAssetId: assetToLink, position: highestPosition + 1 } },
+      { onSuccess: () => setAssetToLink(null) }
+    );
+  };
+  const stripAssets = useMemo(
+    () => memberships.map((detail) => ({
+      id: detail.membership.sourceAssetId,
+      name: describeAsset(detail.membership, detail.asset),
+      kind: "file"
+    })),
+    [memberships]
+  );
+  const handleMove = (fromIndex, toIndex) => {
+    if (toIndex < 0 || toIndex >= orderedIds.length) return;
+    const next = orderedIds.slice();
+    const [moved] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, moved);
+    reorderMemberships.mutate({ itemId, orderedAssetIds: next });
+  };
+  const handleSaveAltText = (sourceAssetId) => {
+    const draft = altDrafts[sourceAssetId];
+    if (draft === void 0) return;
+    const trimmed = draft.trim();
+    updateMembership.mutate(
+      // `altText` is `.min(1)` when present, so clearing the field is `null` rather
+      // than an empty string -- an empty string is a validation error, not a clear.
+      { itemId, sourceAssetId, updates: { altText: trimmed === "" ? null : trimmed } },
+      {
+        onSuccess: () => setAltDrafts((drafts) => {
+          const { [sourceAssetId]: _cleared, ...rest } = drafts;
+          return rest;
+        })
+      }
+    );
+  };
+  const isMutating = addMembership.isPending || removeMembership.isPending || reorderMemberships.isPending || updateMembership.isPending;
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, p: "md", "data-testid": "source-assets-panel", children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Title, { order: 4, children: "Source Assets" }),
+        isMembershipLoaded && /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
+          memberships.length,
+          " linked"
+        ] })
+      ] }),
+      !isMembershipLoaded ? /* @__PURE__ */ jsx(Group, { justify: "center", py: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : memberships.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No source assets linked to this item." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SelectedAssetStrip,
+          {
+            assets: stripAssets,
+            onReorder: (reordered) => reorderMemberships.mutate({ itemId, orderedAssetIds: reordered.map((asset) => asset.id) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+            /* @__PURE__ */ jsx(Table.Th, { children: "Position" }),
+            /* @__PURE__ */ jsx(Table.Th, { children: "Asset" }),
+            /* @__PURE__ */ jsx(Table.Th, { children: "Kind" }),
+            /* @__PURE__ */ jsx(Table.Th, { children: "Alt text" }),
+            /* @__PURE__ */ jsx(Table.Th, { children: "Crop" }),
+            /* @__PURE__ */ jsx(Table.Th, {})
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Tbody, { children: memberships.map((detail, index) => {
+            const { membership, asset } = detail;
+            const draft = altDrafts[membership.sourceAssetId];
+            const storedAltText = membership.altText ?? "";
+            return /* @__PURE__ */ jsxs(
+              Table.Tr,
+              {
+                "data-testid": `source-asset-row-${membership.sourceAssetId}`,
+                children: [
+                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", children: membership.position }),
+                    index === 0 && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "filled", children: "Cover" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: describeAsset(membership, asset) }) }),
+                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: asset?.kind ?? "\u2014" }) }),
+                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        size: "xs",
+                        placeholder: "Describe this slide",
+                        value: draft ?? storedAltText,
+                        onChange: (event) => setAltDrafts((drafts) => ({
+                          ...drafts,
+                          [membership.sourceAssetId]: event.currentTarget.value
+                        }))
+                      }
+                    ),
+                    draft !== void 0 && draft !== storedAltText && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        variant: "light",
+                        disabled: isMutating,
+                        onClick: () => handleSaveAltText(membership.sourceAssetId),
+                        children: "Save"
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: membership.crop ? "set" : "\u2014" }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        variant: "subtle",
+                        leftSection: /* @__PURE__ */ jsx(IconCrop, { size: 14 }),
+                        disabled: isMutating || readStorageReference(asset) === null,
+                        onClick: () => {
+                          setCropDraft(membership.crop);
+                          setCroppingAssetId(membership.sourceAssetId);
+                        },
+                        children: "Crop"
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: 4, justify: "flex-end", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        variant: "subtle",
+                        "aria-label": "Move up",
+                        disabled: index === 0 || isMutating,
+                        onClick: () => handleMove(index, index - 1),
+                        children: /* @__PURE__ */ jsx(IconArrowUp, { size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        variant: "subtle",
+                        "aria-label": "Move down",
+                        disabled: index === memberships.length - 1 || isMutating,
+                        onClick: () => handleMove(index, index + 1),
+                        children: /* @__PURE__ */ jsx(IconArrowDown, { size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        variant: "subtle",
+                        color: "red",
+                        leftSection: /* @__PURE__ */ jsx(IconUnlink, { size: 14 }),
+                        disabled: isMutating,
+                        onClick: () => removeMembership.mutate({ itemId, sourceAssetId: membership.sourceAssetId }),
+                        children: "Unlink"
+                      }
+                    )
+                  ] }) })
+                ]
+              },
+              membership.sourceAssetId
+            );
+          }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-end", children: [
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "xs",
+            searchable: true,
+            clearable: true,
+            label: "Link an existing source asset",
+            placeholder: linkableOptions.length === 0 ? "Nothing left to link" : "Choose an asset",
+            data: linkableOptions,
+            value: assetToLink,
+            onChange: setAssetToLink,
+            disabled: linkableOptions.length === 0 || isMutating,
+            style: { minWidth: 320 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "compact-sm",
+            variant: "light",
+            leftSection: /* @__PURE__ */ jsx(IconLink, { size: 14 }),
+            disabled: !assetToLink || isMutating,
+            onClick: handleLink,
+            children: "Link"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Position 0 is the cover. Unlinking leaves the remaining positions untouched, so a gap is normal \u2014 use move up / move down to renumber the whole set. Unlinking never deletes the source asset itself." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        opened: croppingAssetId !== null,
+        onClose: () => setCroppingAssetId(null),
+        title: croppingDetail === void 0 ? "Crop" : `Crop ${describeAsset(croppingDetail.membership, croppingDetail.asset)}`,
+        size: "lg",
+        children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+          /* @__PURE__ */ jsx(
+            AssetCropEditor,
+            {
+              imageUrl: croppingReference === null ? null : links[croppingReference.cloudStorageId] ?? null,
+              value: cropDraft,
+              onChange: setCropDraft,
+              disabled: isMutating
+            }
+          ),
+          /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "subtle",
+                color: "red",
+                disabled: isMutating || cropDraft === null,
+                onClick: () => setCropDraft(null),
+                children: "Clear crop"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "default", onClick: () => setCroppingAssetId(null), children: "Cancel" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  disabled: isMutating || croppingAssetId === null,
+                  onClick: () => {
+                    if (croppingAssetId === null) return;
+                    updateMembership.mutate(
+                      { itemId, sourceAssetId: croppingAssetId, updates: { crop: cropDraft } },
+                      { onSuccess: () => setCroppingAssetId(null) }
+                    );
+                  },
+                  children: "Save crop"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+var PREVIEW_MAX_WIDTH = 380;
+function PostPreview({ slides, caption, hashtags = [], aspectRatio = 4 / 5, title }) {
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    if (index > slides.length - 1) setIndex(Math.max(0, slides.length - 1));
+  }, [slides.length, index]);
+  const slide = slides[index];
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", style: { maxWidth: PREVIEW_MAX_WIDTH }, "data-testid": "post-preview", children: [
+    title !== void 0 && /* @__PURE__ */ jsx(Text, { fw: 500, lineClamp: 1, children: title }),
+    /* @__PURE__ */ jsx(Paper, { withBorder: true, p: 0, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          position: "relative",
+          width: "100%",
+          aspectRatio: `${aspectRatio}`,
+          overflow: "hidden",
+          background: "var(--mantine-color-gray-1)"
+        },
+        "data-testid": "post-preview-frame",
+        children: [
+          slide === void 0 || slide.imageUrl === null ? /* @__PURE__ */ jsx(Group, { justify: "center", align: "center", h: "100%", children: /* @__PURE__ */ jsx(IconPhotoOff, { size: 20, color: "var(--mantine-color-dimmed)" }) }) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: slide.imageUrl,
+              alt: slide.altText ?? "",
+              "data-testid": "post-preview-image",
+              style: cropStyle(slide.crop ?? null)
+            }
+          ),
+          index > 0 && /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "default",
+              radius: "xl",
+              size: "lg",
+              "aria-label": "Previous slide",
+              onClick: () => setIndex((current) => Math.max(0, current - 1)),
+              style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)" },
+              children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 18 })
+            }
+          ),
+          index < slides.length - 1 && /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "default",
+              radius: "xl",
+              size: "lg",
+              "aria-label": "Next slide",
+              onClick: () => setIndex((current) => Math.min(slides.length - 1, current + 1)),
+              style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)" },
+              children: /* @__PURE__ */ jsx(IconChevronRight, { size: 18 })
+            }
+          )
+        ]
+      }
+    ) }),
+    slides.length > 1 && /* @__PURE__ */ jsx(Group, { justify: "center", gap: 6, "data-testid": "post-preview-dots", children: slides.map((each, dotIndex) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          background: dotIndex === index ? "var(--mantine-color-blue-5)" : "var(--mantine-color-gray-4)"
+        }
+      },
+      each.id
+    )) }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap" }, "data-testid": "post-preview-caption", children: caption === null || caption === void 0 || caption.length === 0 ? /* @__PURE__ */ jsx(Text, { component: "span", size: "sm", c: "dimmed", children: "No caption yet" }) : caption }),
+    hashtags.length > 0 && /* @__PURE__ */ jsx(Text, { size: "sm", c: "blue", "data-testid": "post-preview-hashtags", children: hashtags.map((tag) => `#${tag.replace(/^#/, "")}`).join(" ") })
+  ] });
+}
+function cropStyle(crop) {
+  if (crop === null) {
+    return { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" };
+  }
+  return {
+    position: "absolute",
+    left: `${-crop.x / crop.width * 100}%`,
+    top: `${-crop.y / crop.height * 100}%`,
+    width: `${1 / crop.width * 100}%`,
+    height: `${1 / crop.height * 100}%`,
+    objectFit: "cover"
+  };
+}
+
+// src/features/content/renderCrop.ts
+var CONTENT_DERIVATIVES_BUCKET = "content-derivatives";
+var DERIVATIVE_MAX_WIDTH = 1080;
+var DERIVATIVE_JPEG_QUALITY = 0.9;
+function derivativeObjectKey(contentItemId, sourceAssetId) {
+  return `${contentItemId}/${sourceAssetId}.jpg`;
+}
+function isDerivativeStale(crop, derivativeCrop, derivativePath) {
+  if (crop === null || derivativePath === null) return false;
+  if (derivativeCrop === null) return true;
+  return crop.x !== derivativeCrop.x || crop.y !== derivativeCrop.y || crop.width !== derivativeCrop.width || crop.height !== derivativeCrop.height;
+}
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error(`Could not load the image to crop: ${url}`));
+    image.src = url;
+  });
+}
+function canvasToJpegBlob(canvas, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob === null) {
+          reject(new Error("The browser produced no image data for the crop"));
+          return;
+        }
+        resolve(blob);
+      },
+      "image/jpeg",
+      quality
+    );
+  });
+}
+async function renderCropToJpeg(imageUrl, crop, options = {}) {
+  const maxWidth = options.maxWidth ?? DERIVATIVE_MAX_WIDTH;
+  const quality = options.quality ?? DERIVATIVE_JPEG_QUALITY;
+  const image = await loadImage(imageUrl);
+  const box = crop ?? { x: 0, y: 0, width: 1, height: 1 };
+  const sourceX = box.x * image.naturalWidth;
+  const sourceY = box.y * image.naturalHeight;
+  const sourceWidth = box.width * image.naturalWidth;
+  const sourceHeight = box.height * image.naturalHeight;
+  if (sourceWidth < 1 || sourceHeight < 1) {
+    throw new Error("The crop resolves to less than one pixel of the source");
+  }
+  const width = Math.max(1, Math.round(Math.min(maxWidth, sourceWidth)));
+  const height = Math.max(1, Math.round(width * sourceHeight / sourceWidth));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (context === null) throw new Error("The browser would not provide a 2D canvas context");
+  context.fillStyle = "#ffffff";
+  context.fillRect(0, 0, width, height);
+  context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, width, height);
+  return canvasToJpegBlob(canvas, quality);
+}
+var CAPTION_STEP_KEY = "caption-generation";
+var CAPTION_WORKFLOW_ID = "cnt-caption-generation-workflow";
+var AUTOSAVE_DELAY_MS = 800;
+function readCaptionAttempt(attempt) {
+  if (attempt.stepKey !== CAPTION_STEP_KEY) return null;
+  const payload = attempt.payload;
+  const caption = payload?.caption;
+  if (typeof caption !== "string" || caption.length === 0) return null;
+  return {
+    attempt,
+    caption,
+    hashtags: Array.isArray(payload?.hashtags) ? payload.hashtags.filter((tag) => typeof tag === "string") : [],
+    instructions: typeof payload?.instructions === "string" ? payload.instructions : ""
+  };
+}
+function CaptionPanel({ itemId, body, onDraftChange }) {
+  const queryClient = useQueryClient();
+  const savedBody = body ?? "";
+  const [instructions, setInstructions] = useState("");
+  const [executionId, setExecutionId] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const [draft, setDraft] = useState(savedBody);
+  const attemptsQuery = useContentItemAttempts(itemId);
+  const executeAsync = useExecuteAsync();
+  const updateItem = useUpdateContentItem();
+  const execution = useExecution(CAPTION_WORKFLOW_ID, executionId ?? "");
+  const captions = useMemo(() => {
+    const rows = (attemptsQuery.data?.data ?? []).map(readCaptionAttempt).filter((row) => row !== null);
+    rows.sort((left, right) => right.attempt.attemptNumber - left.attempt.attemptNumber);
+    return rows.map((row, index) => ({ ...row, displayNumber: rows.length - index }));
+  }, [attemptsQuery.data]);
+  const status = execution.data?.status;
+  const isRunning = executeAsync.isPending || executionId !== null && (status === void 0 || status === "running");
+  const lastSyncedRef = useRef(savedBody);
+  const [debouncedDraft] = useDebouncedValue(draft, AUTOSAVE_DELAY_MS);
+  useEffect(() => {
+    if (savedBody === lastSyncedRef.current) return;
+    lastSyncedRef.current = savedBody;
+    setDraft(savedBody);
+  }, [savedBody]);
+  useEffect(() => {
+    if (debouncedDraft === lastSyncedRef.current) return;
+    lastSyncedRef.current = debouncedDraft;
+    updateItem.mutate({ itemId, updates: { body: debouncedDraft } });
+  }, [debouncedDraft, itemId, updateItem]);
+  useEffect(() => {
+    onDraftChange?.(draft);
+  }, [draft, onDraftChange]);
+  const isDirty = draft !== lastSyncedRef.current;
+  useEffect(() => {
+    if (executionId === null || status === void 0 || status === "running") return;
+    if (status === "failed") {
+      setFailure(execution.data?.error ?? "The caption workflow failed. Check the execution log for details.");
+    }
+    void queryClient.invalidateQueries({ queryKey: contentKeys.items() });
+    setExecutionId(null);
+  }, [status, executionId, execution.data?.error, queryClient]);
+  const handleGenerate = async () => {
+    setFailure(null);
+    try {
+      const result = await executeAsync.mutateAsync({
+        resourceId: CAPTION_WORKFLOW_ID,
+        resourceType: "workflow",
+        input: {
+          contentItemId: itemId,
+          ...instructions.trim().length > 0 ? { instructions: instructions.trim() } : {}
+        }
+      });
+      setExecutionId(result.executionId);
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Could not start the caption workflow.");
+    }
+  };
+  const handleUse = (candidate) => {
+    setDraft(
+      candidate.hashtags.length === 0 ? candidate.caption : `${candidate.caption}
+
+${candidate.hashtags.map((tag) => `#${tag.replace(/^#/, "")}`).join(" ")}`
+    );
+  };
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", "data-testid": "caption-panel", children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsx(Title, { order: 5, children: "Caption" }),
+      /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
+        captions.length,
+        " generated"
+      ] })
+    ] }),
+    failure !== null && /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }), "data-testid": "caption-panel-error", children: failure }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "The caption",
+        description: "Edit it freely. Changes save on their own.",
+        placeholder: "Write it yourself, or generate one below and edit from there.",
+        autosize: true,
+        minRows: 4,
+        maxRows: 16,
+        value: draft,
+        onChange: (event) => setDraft(event.currentTarget.value),
+        "data-testid": "caption-panel-body"
+      }
+    ),
+    /* @__PURE__ */ jsx(Group, { justify: "flex-end", gap: "xs", mt: -6, children: updateItem.isPending ? /* @__PURE__ */ jsxs(Group, { gap: 6, children: [
+      /* @__PURE__ */ jsx(Loader, { size: 12 }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Saving" })
+    ] }) : isDirty ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", "data-testid": "caption-panel-save-state", children: "Unsaved" }) : /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+      /* @__PURE__ */ jsx(IconCheck, { size: 12, color: "var(--mantine-color-dimmed)" }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", "data-testid": "caption-panel-save-state", children: "Saved" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "Direction (optional)",
+        description: "The angle, the occasion, who is in frame -- anything the photos cannot show on their own.",
+        placeholder: "e.g. this is the second shop opening, keep it short and warm",
+        autosize: true,
+        minRows: 2,
+        maxRows: 5,
+        value: instructions,
+        disabled: isRunning,
+        onChange: (event) => setInstructions(event.currentTarget.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftSection: isRunning ? /* @__PURE__ */ jsx(Loader, { size: 14 }) : /* @__PURE__ */ jsx(IconSparkles, { size: 16 }),
+          disabled: isRunning,
+          onClick: () => void handleGenerate(),
+          "data-testid": "caption-panel-generate",
+          children: captions.length === 0 ? "Generate caption" : "Regenerate"
+        }
+      ),
+      isRunning && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Reading the slides and writing a caption. This does not overwrite the previous one." })
+    ] }),
+    attemptsQuery.isLoading ? /* @__PURE__ */ jsx(Group, { justify: "center", p: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : captions.map((candidate) => {
+      const isLive = draft.startsWith(candidate.caption);
+      return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", "data-testid": "caption-panel-attempt", children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+              "Attempt ",
+              candidate.displayNumber
+            ] }),
+            isLive && /* @__PURE__ */ jsx(Badge, { size: "xs", color: "green", variant: "light", leftSection: /* @__PURE__ */ jsx(IconCheck, { size: 10 }), children: "In use" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "compact-xs",
+              variant: "light",
+              disabled: isLive || updateItem.isPending,
+              onClick: () => handleUse(candidate),
+              children: "Use this caption"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap" }, children: candidate.caption }),
+        candidate.hashtags.length > 0 && /* @__PURE__ */ jsx(Text, { size: "sm", c: "blue", children: candidate.hashtags.map((tag) => `#${tag.replace(/^#/, "")}`).join(" ") }),
+        candidate.instructions.length > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+          "Asked for: ",
+          candidate.instructions
+        ] })
+      ] }) }, candidate.attempt.id);
+    }),
+    !attemptsQuery.isLoading && captions.length === 0 && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Nothing generated yet. Analysed slides make for a caption that describes what is actually in them -- or just write the caption above yourself." })
+  ] }) });
+}
+var IMAGE_ANALYSIS_WORKFLOW_ID = "cnt-image-analysis-workflow";
+function readStoredAnalysis(asset) {
+  const metadata = asset?.metadata;
+  if (typeof metadata !== "object" || metadata === null) return null;
+  const analysis = metadata.analysis;
+  if (typeof analysis !== "object" || analysis === null) return null;
+  const raw = analysis;
+  const asString = (key) => typeof raw[key] === "string" ? raw[key] : void 0;
+  return {
+    description: asString("description"),
+    subjects: Array.isArray(raw.subjects) ? raw.subjects.filter((one) => typeof one === "string") : void 0,
+    setting: asString("setting"),
+    mood: asString("mood"),
+    textInImage: asString("textInImage"),
+    altText: asString("altText"),
+    model: asString("model"),
+    generatedAt: asString("generatedAt")
+  };
+}
+function SlideAnalysisPanel({ itemId }) {
+  const queryClient = useQueryClient();
+  const [executionId, setExecutionId] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const { memberships, isMembershipLoaded } = useContentItemSourceAssetDetails(itemId);
+  const executeAsync = useExecuteAsync();
+  const execution = useExecution(IMAGE_ANALYSIS_WORKFLOW_ID, executionId ?? "");
+  const status = execution.data?.status;
+  const isRunning = executeAsync.isPending || executionId !== null && (status === void 0 || status === "running");
+  const analyzedCount = useMemo(
+    () => memberships.filter((detail) => readStoredAnalysis(detail.asset) !== null).length,
+    [memberships]
+  );
+  useEffect(() => {
+    if (executionId === null || status === void 0 || status === "running") return;
+    if (status === "failed") {
+      setFailure(execution.data?.error ?? "The analysis workflow failed. Check the execution log for details.");
+    }
+    void queryClient.invalidateQueries({ queryKey: contentKeys.sourceAssets() });
+    setExecutionId(null);
+  }, [status, executionId, execution.data?.error, queryClient]);
+  const handleAnalyze = async () => {
+    setFailure(null);
+    try {
+      const result = await executeAsync.mutateAsync({
+        resourceId: IMAGE_ANALYSIS_WORKFLOW_ID,
+        resourceType: "workflow",
+        input: { contentItemId: itemId }
+      });
+      setExecutionId(result.executionId);
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Could not start the analysis workflow.");
+    }
+  };
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", "data-testid": "slide-analysis-panel", children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsx(Title, { order: 5, children: "Slide analysis" }),
+      /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
+        analyzedCount,
+        " of ",
+        memberships.length,
+        " analysed"
+      ] })
+    ] }),
+    failure !== null && /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }), "data-testid": "slide-analysis-error", children: failure }),
+    /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftSection: isRunning ? /* @__PURE__ */ jsx(Loader, { size: 14 }) : /* @__PURE__ */ jsx(IconEye, { size: 16 }),
+          disabled: isRunning || memberships.length === 0,
+          onClick: () => void handleAnalyze(),
+          "data-testid": "slide-analysis-run",
+          children: analyzedCount === 0 ? "Analyse slides" : "Re-analyse slides"
+        }
+      ),
+      isRunning && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Reading each slide with a vision model." })
+    ] }),
+    !isMembershipLoaded ? /* @__PURE__ */ jsx(Group, { justify: "center", p: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : memberships.map((detail) => {
+      const analysis = readStoredAnalysis(detail.asset);
+      const label = detail.asset?.title ?? detail.membership.sourceAssetId;
+      return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", "data-testid": "slide-analysis-row", children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Badge, { size: "xs", variant: "light", children: [
+            "Slide ",
+            detail.membership.position + 1
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, lineClamp: 1, children: label })
+        ] }),
+        analysis === null ? /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Not analysed yet." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          analysis.description !== void 0 && /* @__PURE__ */ jsx(Text, { size: "sm", children: analysis.description }),
+          analysis.subjects !== void 0 && analysis.subjects.length > 0 && /* @__PURE__ */ jsx(Group, { gap: 4, children: analysis.subjects.map((subject) => /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "outline", children: subject }, subject)) }),
+          (analysis.setting !== void 0 || analysis.mood !== void 0) && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: [analysis.setting, analysis.mood].filter(Boolean).join(" - ") }),
+          analysis.textInImage !== void 0 && analysis.textInImage.length > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            "Text in image: ",
+            analysis.textInImage
+          ] })
+        ] })
+      ] }) }, detail.membership.id);
+    }),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Analysis is stored on the photo itself, so every post that reuses it reads the same description and a re-crop does not invalidate it." })
+  ] }) });
+}
 
 // src/lib/content/stage-colors.ts
 var FALLBACK_CONTENT_STAGE_COLORS = {
@@ -554,6 +1557,10 @@ function getContentStageColor(entry) {
 }
 var OVERVIEW_ITEMS_LIMIT = 100;
 var RECENT_ITEMS_LIMIT = 8;
+function resolveItemCurrentStep(item, pipelines) {
+  const pipeline = pipelines.find((candidate) => candidate.id === item.pipelineId);
+  return resolveCurrentContentStep(item, pipeline?.steps ?? []);
+}
 function ContentOverviewPage({ headerActions, footer } = {}) {
   const navigate = useNavigate();
   const itemsQuery = useContentItems({ limit: OVERVIEW_ITEMS_LIMIT });
@@ -568,7 +1575,9 @@ function ContentOverviewPage({ headerActions, footer } = {}) {
     }
     return counts;
   }, [items]);
-  const pendingReviewCount = items.filter((item) => item.reviewedAt === null).length;
+  const pendingReviewCount = items.filter(
+    (item) => isAwaitingReview(item, resolveItemCurrentStep(item, contentConfig.pipelines))
+  ).length;
   const totalItems = itemsQuery.data?.total ?? items.length;
   const totalDistributions = distributionsQuery.data?.data.length ?? 0;
   const recentItems = useMemo(
@@ -708,6 +1717,15 @@ function ContentItemsPage({ headerActions } = {}) {
   const [statusFilter, setStatusFilter] = useState("");
   const [pillarFilter, setPillarFilter] = useState("");
   const pagination = usePaginationState(PAGE_SIZE, [searchQuery, statusFilter, pillarFilter, reviewFilterActive]);
+  const openItem = (item) => {
+    const pipeline = contentConfig.pipelines.find((candidate) => candidate.id === item.pipelineId);
+    const target = resolveReviewTarget(item, pipeline, pipeline?.steps ?? []);
+    if (target.kind === "workspace") {
+      void navigate({ to: target.route });
+      return;
+    }
+    void navigate({ to: "/content/items/$itemId", params: { itemId: item.id } });
+  };
   const itemsQuery = useContentItems({
     search: searchQuery.trim() || void 0,
     status: statusFilter || void 0,
@@ -716,7 +1734,11 @@ function ContentItemsPage({ headerActions } = {}) {
     offset: pagination.offset
   });
   const fetchedItems = itemsQuery.data?.data ?? [];
-  const items = reviewFilterActive ? fetchedItems.filter((item) => item.reviewedAt === null) : fetchedItems;
+  const items = reviewFilterActive ? fetchedItems.filter((item) => {
+    const pipeline = contentConfig.pipelines.find((candidate) => candidate.id === item.pipelineId);
+    const step = resolveCurrentContentStep(item, pipeline?.steps ?? []);
+    return isAwaitingReview(item, step);
+  }) : fetchedItems;
   const total = itemsQuery.data?.total ?? 0;
   const statusOptions = [
     { value: "", label: "All statuses" },
@@ -789,31 +1811,23 @@ function ContentItemsPage({ headerActions } = {}) {
           const statusEntry = contentConfig.stageCatalog[item.status];
           const pillarEntry = item.pillar ? contentConfig.stageCatalog[item.pillar] : void 0;
           const statusColors = getContentStageColor(statusEntry);
-          return /* @__PURE__ */ jsxs(
-            Table.Tr,
-            {
-              style: { cursor: "pointer" },
-              onClick: () => navigate({ to: "/content/items/$itemId", params: { itemId: item.id } }),
-              children: [
-                /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: getContentItemIdentity(item) }) }),
-                /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    size: "sm",
-                    variant: "light",
-                    styles: {
-                      root: { color: statusColors.accent, backgroundColor: statusColors.background }
-                    },
-                    children: statusEntry?.label ?? item.status
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: pillarEntry?.label ?? item.pillar ?? "\u2014" }) }),
-                /* @__PURE__ */ jsx(Table.Td, { children: item.reviewedAt ? /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: "var(--color-success)", children: "Reviewed" }) : /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: "var(--color-warning)", children: "Pending" }) }),
-                /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatRelativeTime(item.updatedAt) }) })
-              ]
-            },
-            item.id
-          );
+          return /* @__PURE__ */ jsxs(Table.Tr, { style: { cursor: "pointer" }, onClick: () => openItem(item), children: [
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: getContentItemIdentity(item) }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
+              Badge,
+              {
+                size: "sm",
+                variant: "light",
+                styles: {
+                  root: { color: statusColors.accent, backgroundColor: statusColors.background }
+                },
+                children: statusEntry?.label ?? item.status
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: pillarEntry?.label ?? item.pillar ?? "\u2014" }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: item.reviewedAt ? /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: "var(--color-success)", children: "Reviewed" }) : /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", color: "var(--color-warning)", children: "Pending" }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatRelativeTime(item.updatedAt) }) })
+          ] }, item.id);
         }) })
       ] }),
       total > PAGE_SIZE && /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(
@@ -942,20 +1956,21 @@ function ContentItemReviewPage({ itemId, headerActions }) {
   const pipeline = item ? contentConfig.pipelines.find((candidate) => candidate.id === item.pipelineId) : void 0;
   const pipelineSteps = useMemo(() => pipeline?.steps ?? [], [pipeline]);
   const isTerminalPipeline = pipelineSteps.length <= 1;
-  const openGates = useMemo(
-    () => getOpenContentReviewGates(item?.processingState ?? {}, pipelineSteps),
-    [item?.processingState, pipelineSteps]
+  const reviewTarget = useMemo(
+    () => item ? resolveReviewTarget(item, pipeline, pipelineSteps) : { kind: "none" },
+    [item, pipeline, pipelineSteps]
   );
-  const earliestOpenGate = openGates[0];
+  const earliestOpenGate = reviewTarget.kind === "queued" ? reviewTarget.gate : void 0;
+  const workspaceRoute = reviewTarget.kind === "workspace" ? reviewTarget.route : void 0;
   const reviewDisabledReason = useMemo(() => {
-    if (earliestOpenGate) return void 0;
+    if (reviewTarget.kind !== "none") return void 0;
     if (!item?.pipelineId) return "This item has no pipeline, so there is no review gate to clear.";
     if (!pipeline) return `Unknown pipeline "${item.pipelineId}" -- there is no review gate to clear.`;
     return "No open review gate on this item. Every queued step has already been reviewed, or the current step is still running.";
-  }, [earliestOpenGate, item?.pipelineId, pipeline]);
+  }, [reviewTarget, item?.pipelineId, pipeline]);
   const reviewActions = useMemo(
-    () => buildReviewActions(isTerminalPipeline, earliestOpenGate, reviewDisabledReason),
-    [isTerminalPipeline, earliestOpenGate, reviewDisabledReason]
+    () => workspaceRoute ? [] : buildReviewActions(isTerminalPipeline, earliestOpenGate, reviewDisabledReason),
+    [workspaceRoute, isTerminalPipeline, earliestOpenGate, reviewDisabledReason]
   );
   const pipelinePayloadFields = useMemo(() => getPipelinePayloadFields(pipelineSteps), [pipelineSteps]);
   const primaryTextField = useMemo(() => getPrimaryPayloadTextField(pipelinePayloadFields), [pipelinePayloadFields]);
@@ -979,8 +1994,8 @@ function ContentItemReviewPage({ itemId, headerActions }) {
   });
   const reviewQueue = useMemo(() => {
     if (!item?.pipelineId) return [];
-    return (pipelineItemsQuery.data?.data ?? []).filter((candidate) => candidate.reviewedAt === null).sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
-  }, [pipelineItemsQuery.data, item?.pipelineId]);
+    return (pipelineItemsQuery.data?.data ?? []).filter((candidate) => isAwaitingReview(candidate, resolveCurrentContentStep(candidate, pipelineSteps))).sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+  }, [pipelineItemsQuery.data, item?.pipelineId, pipelineSteps]);
   const queueIndex = item ? reviewQueue.findIndex((candidate) => candidate.id === item.id) : -1;
   const queuePosition = queueIndex === -1 ? void 0 : queueIndex + 1;
   const nextQueueItemId = queueIndex === -1 ? void 0 : reviewQueue[queueIndex + 1]?.id;
@@ -1099,7 +2114,7 @@ function ContentItemReviewPage({ itemId, headerActions }) {
           ] })
         ] }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(
+          workspaceRoute ? null : /* @__PURE__ */ jsx(
             Button,
             {
               size: "xs",
@@ -1124,6 +2139,27 @@ function ContentItemReviewPage({ itemId, headerActions }) {
           children: /* @__PURE__ */ jsx(Text, { size: "sm", children: reviewDisabledReason })
         }
       ),
+      workspaceRoute && /* @__PURE__ */ jsx(
+        Alert,
+        {
+          icon: /* @__PURE__ */ jsx(IconExternalLink, { size: 16 }),
+          variant: "light",
+          title: "Reviewed in your workspace",
+          "data-testid": "content-review-workspace-pointer",
+          children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", align: "flex-start", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", children: "This pipeline clears its gates on your own screen. Everything below is the piece as it stands." }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "xs",
+                rightSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
+                onClick: () => void navigate({ to: workspaceRoute }),
+                children: "Open workspace"
+              }
+            )
+          ] })
+        }
+      ),
       /* @__PURE__ */ jsx(
         ContentReviewCard,
         {
@@ -1137,7 +2173,8 @@ function ContentItemReviewPage({ itemId, headerActions }) {
           processingSteps: visibleProcessingSteps,
           actions: reviewActions,
           onAction: handleAction,
-          actionsPending: isSaving
+          actionsPending: isSaving,
+          readOnly: workspaceRoute !== void 0
         }
       ),
       item.reviewerFeedback && /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
@@ -1148,6 +2185,9 @@ function ContentItemReviewPage({ itemId, headerActions }) {
         /* @__PURE__ */ jsx(Text, { size: "xs", c: "var(--color-error)", fw: 600, children: "Reject reason" }),
         /* @__PURE__ */ jsx(Text, { size: "sm", children: item.rejectReason })
       ] }) }),
+      /* @__PURE__ */ jsx(SourceAssetsPanel, { itemId }),
+      /* @__PURE__ */ jsx(SlideAnalysisPanel, { itemId }),
+      /* @__PURE__ */ jsx(CaptionPanel, { itemId, body: item.body }),
       /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
         /* @__PURE__ */ jsx(Title, { order: 4, children: "Attempt History" }),
         attempts.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No recorded attempts." }) : /* @__PURE__ */ jsxs(Table, { children: [
@@ -1278,13 +2318,13 @@ var ACTOR_LEAD = {
   workflow: "An automated workflow",
   agent: "An AI agent"
 };
-var REVIEW_MODE_TAIL = {
-  live: "and you review it live, in the moment",
-  queued: "then it waits for your review",
+var REVIEW_VENUE_TAIL = {
+  workspace: "and you review it on your own screen, in the moment",
+  queue: "then it waits for your review",
   none: "and moves on without review"
 };
 function describeStep(step) {
-  return `${ACTOR_LEAD[step.actor]} handles "${step.label}," ${REVIEW_MODE_TAIL[step.reviewMode]}.`;
+  return `${ACTOR_LEAD[step.actor]} handles "${step.label}," ${REVIEW_VENUE_TAIL[step.reviewVenue]}.`;
 }
 function StepRow({ step, resourceId }) {
   return /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
@@ -1318,7 +2358,7 @@ function formatAge(ms) {
   return `${Math.floor(hours / 24)}d`;
 }
 function BoardItemCard({ card, onOpen }) {
-  return /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "xs", onClick: () => onOpen(card.item.id), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, padding: "xs", onClick: () => onOpen(card), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
     /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, lineClamp: 2, children: getContentItemIdentity(card.item) }),
     /* @__PURE__ */ jsxs(Group, { gap: 6, justify: "space-between", wrap: "nowrap", children: [
       /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
@@ -1398,7 +2438,15 @@ function BoardTab({ pipeline }) {
   const itemsQuery = useContentItems({ pipelineId: pipeline.id, limit: BOARD_FETCH_LIMIT });
   const items = useMemo(() => itemsQuery.data?.data ?? [], [itemsQuery.data]);
   const board = useMemo(() => deriveContentBoard(items, pipeline, Date.now()), [items, pipeline]);
-  const openItem = (itemId) => navigate({ to: "/content/items/$itemId", params: { itemId } });
+  const openItem = (card) => {
+    const heldAtStep = pipeline.steps.find((step) => step.key === card.stepKey);
+    const workspaceRoute = card.awaitingReview ? resolveContentWorkspaceRoute(pipeline, heldAtStep) : void 0;
+    if (workspaceRoute) {
+      void navigate({ to: workspaceRoute });
+      return;
+    }
+    void navigate({ to: "/content/items/$itemId", params: { itemId: card.item.id } });
+  };
   if (itemsQuery.isLoading) {
     return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) });
   }
@@ -1613,21 +2661,21 @@ function RunsTab({ pipeline }) {
   const contentConfig = useContentConfig();
   return /* @__PURE__ */ jsx(Stack, { gap: "md", children: pipeline.steps.map((step) => /* @__PURE__ */ jsx(StepRunsSection, { step, resourceId: contentConfig.resolveStepResource(step)?.resourceId }, step.key)) });
 }
-var PIPELINE_WORKSPACE_TABS = ["board", "distributions", "runs"];
-function isPipelineWorkspaceTab(value) {
-  return typeof value === "string" && PIPELINE_WORKSPACE_TABS.includes(value);
+var PIPELINE_BOARD_TABS = ["board", "distributions", "runs"];
+function isPipelineBoardTab(value) {
+  return typeof value === "string" && PIPELINE_BOARD_TABS.includes(value);
 }
-function ContentPipelineWorkspacePage({
+function ContentPipelineBoardPage({
   pipelineId,
   headerActions
 }) {
   const navigate = useNavigate();
   const contentConfig = useContentConfig();
   const rawSearch = useSearch({ strict: false });
-  const activeTab = isPipelineWorkspaceTab(rawSearch.tab) ? rawSearch.tab : "board";
+  const activeTab = isPipelineBoardTab(rawSearch.tab) ? rawSearch.tab : "board";
   const handleTabChange = useCallback(
     (value) => {
-      if (!isPipelineWorkspaceTab(value) || value === activeTab) return;
+      if (!isPipelineBoardTab(value) || value === activeTab) return;
       void navigate({
         to: ".",
         search: ((current) => ({ ...current, tab: value })),
@@ -1848,6 +2896,33 @@ function ContentDistributionsPage({ headerActions } = {}) {
     ] }) })
   ] }) }) });
 }
+var COMMON_PLATFORM_FIELDS = [
+  { key: "title", label: "Title" },
+  { key: "description", label: "Description" },
+  { key: "tags", label: "Tags" }
+];
+var PLATFORM_SPECIFIC_FIELDS = {
+  youtube: [
+    { key: "timestamps", label: "Timestamps" },
+    { key: "endScreenVideoId", label: "End Screen Video ID" },
+    { key: "pinnedComment", label: "Pinned Comment" }
+  ],
+  linkedin: [
+    { key: "hook", label: "Hook" },
+    { key: "hashtags", label: "Hashtags" },
+    { key: "firstComment", label: "First Comment" }
+  ],
+  instagram: [
+    { key: "altText", label: "Alt Text" },
+    { key: "hashtags", label: "Hashtags" },
+    { key: "storyLink", label: "Story Link" }
+  ],
+  x: [
+    { key: "hookTweet", label: "Hook Tweet" },
+    { key: "threadTweets", label: "Thread Tweets" },
+    { key: "replyThread", label: "Reply Thread" }
+  ]
+};
 function formatDateTime3(value) {
   return value ? new Date(value).toLocaleString() : "\u2014";
 }
@@ -1862,6 +2937,17 @@ function getChecklistProgress(checklist) {
   const done = checklist.filter((item) => item.done).length;
   return { done, total: checklist.length, pct: Math.round(done / checklist.length * 100) };
 }
+function hasPlatformFieldValue(value) {
+  if (Array.isArray(value)) return value.length > 0;
+  return typeof value === "string" && value.trim() !== "";
+}
+function PlatformContentField({ label, value }) {
+  if (!hasPlatformFieldValue(value)) return null;
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: label }),
+    Array.isArray(value) ? /* @__PURE__ */ jsx(Group, { gap: 4, children: value.map((entry, index) => /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", children: String(entry) }, `${String(entry)}-${index}`)) }) : /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap" }, children: String(value) })
+  ] });
+}
 function MetricsDisplay({ metrics }) {
   if (!metrics || typeof metrics !== "object" || Object.keys(metrics).length === 0) {
     return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No metrics recorded yet." });
@@ -1885,17 +2971,14 @@ function ContentDistributionDetailPage({
   const distributionQuery = useContentDistribution(distributionId);
   const dist = distributionQuery.data;
   const itemQuery = useContentItem(dist?.contentItemId);
-  const updateDistribution = useUpdateContentDistribution();
-  const [platformContent, setPlatformContent] = useState({});
-  const [platformUrl, setPlatformUrl] = useState("");
-  const [status, setStatus] = useState("");
   const [mediaOpened, { open: openMedia, close: closeMedia }] = useDisclosure(false);
   const [previewUrl, setPreviewUrl] = useState(null);
-  useEffect(() => {
-    setPlatformUrl(dist?.platformUrl ?? "");
-    setStatus(dist?.status ?? "");
-    setPlatformContent(dist?.platformContent ?? {});
-  }, [dist?.id]);
+  const mediaEntries = useMemo(() => dist?.mediaUrls ?? [], [dist]);
+  const mediaRefs = useMemo(
+    () => mediaEntries.filter((entry) => entry.kind === "storage").map(({ bucket, path }) => ({ bucket, path })),
+    [mediaEntries]
+  );
+  const { urls: signedMediaUrls } = useStorageSignedUrls(mediaRefs);
   const backButton = /* @__PURE__ */ jsx(
     Button,
     {
@@ -1922,24 +3005,15 @@ function ContentDistributionDetailPage({
   const contentTitle = contentItem?.title ?? dist.contentItemId;
   const checklist = toChecklist(dist.checklist);
   const checklistProgress = getChecklistProgress(checklist);
-  const mediaUrls = dist.mediaUrls ?? [];
+  const mediaItems = mediaEntries.map(
+    (entry) => entry.kind === "storage" ? { key: storageObjectRefKey(entry), url: signedMediaUrls[storageObjectRefKey(entry)] ?? null } : { key: entry.url, url: entry.url }
+  );
   const platformEntry = contentConfig.stageCatalog[dist.platform];
   const platformColors = getContentStageColor(platformEntry);
   const pillarEntry = contentItem?.pillar ? contentConfig.stageCatalog[contentItem.pillar] : void 0;
-  const isPlatformContentDirty = JSON.stringify(platformContent) !== JSON.stringify(dist.platformContent ?? {});
-  const patch = (updates) => {
-    updateDistribution.mutate({ distributionId, updates });
-  };
-  const updatePlatformField = (field, value) => {
-    setPlatformContent((prev) => ({ ...prev, [field]: value }));
-  };
-  const toggleChecklistItem = (key) => {
-    const nextChecklist = checklist.map((item) => item.key === key ? { ...item, done: !item.done } : item);
-    patch({ checklist: nextChecklist });
-  };
-  const deleteMedia = (url) => {
-    patch({ mediaUrls: mediaUrls.filter((existing) => existing !== url) });
-  };
+  const platformContent = dist.platformContent ?? {};
+  const platformFields = [...COMMON_PLATFORM_FIELDS, ...PLATFORM_SPECIFIC_FIELDS[dist.platform] ?? []];
+  const hasPlatformContent = platformFields.some((field) => hasPlatformFieldValue(platformContent[field.key]));
   return /* @__PURE__ */ jsxs(SubshellContentContainer, { children: [
     /* @__PURE__ */ jsxs(PageContainer, { children: [
       /* @__PURE__ */ jsxs(Stack, { children: [
@@ -1997,30 +3071,9 @@ function ContentDistributionDetailPage({
             /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 140, children: "Format" }),
             /* @__PURE__ */ jsx(Text, { size: "sm", children: dist.format })
           ] }),
-          /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
+          /* @__PURE__ */ jsxs(Group, { children: [
             /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 140, children: "Status" }),
-            /* @__PURE__ */ jsx(
-              TextInput,
-              {
-                size: "xs",
-                value: status,
-                onChange: (event) => setStatus(event.currentTarget.value),
-                style: { flex: 1 },
-                onBlur: () => {
-                  const value = status.trim();
-                  if (value && value !== dist.status) {
-                    const updates = { status: value };
-                    if (value === "published" && !dist.publishedAt) {
-                      updates.publishedAt = (/* @__PURE__ */ new Date()).toISOString();
-                    }
-                    patch(updates);
-                  }
-                },
-                onKeyDown: (event) => {
-                  if (event.key === "Enter") event.currentTarget.blur();
-                }
-              }
-            )
+            /* @__PURE__ */ jsx(Text, { size: "sm", children: dist.status })
           ] }),
           /* @__PURE__ */ jsxs(Group, { children: [
             /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 140, children: "Publish Method" }),
@@ -2044,26 +3097,20 @@ function ContentDistributionDetailPage({
           ] }),
           /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
             /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 140, children: "URL" }),
-            /* @__PURE__ */ jsx(
-              TextInput,
+            dist.platformUrl ? /* @__PURE__ */ jsx(
+              Anchor,
               {
-                size: "xs",
-                placeholder: "https://...",
-                value: platformUrl,
-                onChange: (event) => setPlatformUrl(event.currentTarget.value),
-                style: { flex: 1 },
-                onBlur: () => {
-                  const value = platformUrl.trim();
-                  if (value !== (dist.platformUrl ?? "")) {
-                    patch({ platformUrl: value || null });
-                  }
-                },
-                onKeyDown: (event) => {
-                  if (event.key === "Enter") event.currentTarget.blur();
-                },
-                rightSection: dist.platformUrl ? /* @__PURE__ */ jsx(Anchor, { href: dist.platformUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }) }) : void 0
+                href: dist.platformUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                size: "sm",
+                style: { overflowWrap: "anywhere" },
+                children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+                  dist.platformUrl,
+                  /* @__PURE__ */ jsx(IconExternalLink, { size: 14 })
+                ] })
               }
-            )
+            ) : /* @__PURE__ */ jsx(Text, { size: "sm", children: "\u2014" })
           ] })
         ] })
       ] }) }),
@@ -2094,174 +3141,15 @@ function ContentDistributionDetailPage({
           ] })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", verticalSpacing: "sm", children: checklist.map((item) => /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            label: item.label,
-            checked: item.done,
-            onChange: () => toggleChecklistItem(item.key),
-            disabled: updateDistribution.isPending,
-            size: "sm"
-          },
-          item.key
-        )) })
+        /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", verticalSpacing: "sm", children: checklist.map((item) => /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "flex-start", children: [
+          item.done ? /* @__PURE__ */ jsx(IconCircleCheck, { size: 16, color: "var(--color-success)" }) : /* @__PURE__ */ jsx(IconCircleDashed, { size: 16, color: "var(--mantine-color-dimmed)" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", c: item.done ? "dimmed" : void 0, children: item.label })
+        ] }, item.key)) })
       ] }) }) : null,
       /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-        /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-          /* @__PURE__ */ jsx(Title, { order: 3, children: "Platform Content" }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "xs",
-              disabled: !isPlatformContentDirty,
-              loading: updateDistribution.isPending,
-              onClick: () => patch({ platformContent }),
-              children: "Save"
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Platform Content" }),
         /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            label: "Title",
-            value: platformContent.title ?? "",
-            onChange: (event) => updatePlatformField("title", event.currentTarget.value)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Textarea,
-          {
-            label: "Description",
-            autosize: true,
-            minRows: 2,
-            value: platformContent.description ?? "",
-            onChange: (event) => updatePlatformField("description", event.currentTarget.value)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TagsInput,
-          {
-            label: "Tags",
-            value: platformContent.tags ?? [],
-            onChange: (value) => updatePlatformField("tags", value)
-          }
-        ),
-        dist.platform === "youtube" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            TagsInput,
-            {
-              label: "Timestamps",
-              placeholder: "0:00 Intro",
-              value: platformContent.timestamps ?? [],
-              onChange: (value) => updatePlatformField("timestamps", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              label: "End Screen Video ID",
-              value: platformContent.endScreenVideoId ?? "",
-              onChange: (event) => updatePlatformField("endScreenVideoId", event.currentTarget.value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              label: "Pinned Comment",
-              autosize: true,
-              minRows: 2,
-              value: platformContent.pinnedComment ?? "",
-              onChange: (event) => updatePlatformField("pinnedComment", event.currentTarget.value)
-            }
-          )
-        ] }),
-        dist.platform === "linkedin" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              label: "Hook",
-              autosize: true,
-              minRows: 2,
-              value: platformContent.hook ?? "",
-              onChange: (event) => updatePlatformField("hook", event.currentTarget.value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TagsInput,
-            {
-              label: "Hashtags",
-              value: platformContent.hashtags ?? [],
-              onChange: (value) => updatePlatformField("hashtags", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              label: "First Comment",
-              autosize: true,
-              minRows: 2,
-              value: platformContent.firstComment ?? "",
-              onChange: (event) => updatePlatformField("firstComment", event.currentTarget.value)
-            }
-          )
-        ] }),
-        dist.platform === "instagram" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              label: "Alt Text",
-              autosize: true,
-              minRows: 2,
-              value: platformContent.altText ?? "",
-              onChange: (event) => updatePlatformField("altText", event.currentTarget.value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TagsInput,
-            {
-              label: "Hashtags",
-              value: platformContent.hashtags ?? [],
-              onChange: (value) => updatePlatformField("hashtags", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              label: "Story Link",
-              value: platformContent.storyLink ?? "",
-              onChange: (event) => updatePlatformField("storyLink", event.currentTarget.value)
-            }
-          )
-        ] }),
-        dist.platform === "x" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Textarea,
-            {
-              label: "Hook Tweet",
-              autosize: true,
-              minRows: 2,
-              value: platformContent.hookTweet ?? "",
-              onChange: (event) => updatePlatformField("hookTweet", event.currentTarget.value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TagsInput,
-            {
-              label: "Thread Tweets",
-              value: platformContent.threadTweets ?? [],
-              onChange: (value) => updatePlatformField("threadTweets", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              label: "Reply Thread",
-              value: platformContent.replyThread ?? "",
-              onChange: (event) => updatePlatformField("replyThread", event.currentTarget.value)
-            }
-          )
-        ] })
+        hasPlatformContent ? platformFields.map((field) => /* @__PURE__ */ jsx(PlatformContentField, { label: field.label, value: platformContent[field.key] }, field.key)) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No platform content recorded yet." })
       ] }) }),
       dist.adaptedBody ? /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
         /* @__PURE__ */ jsx(Title, { order: 3, children: "Adapted Content" }),
@@ -2295,24 +3183,24 @@ function ContentDistributionDetailPage({
       /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
         /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
           /* @__PURE__ */ jsx(Title, { order: 3, children: "Media" }),
-          mediaUrls.length > 0 ? /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
-            mediaUrls.length,
+          mediaItems.length > 0 ? /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+            mediaItems.length,
             " image",
-            mediaUrls.length !== 1 ? "s" : ""
+            mediaItems.length !== 1 ? "s" : ""
           ] }) : null
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
-        mediaUrls.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No media yet." }) : /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, xs: 2, sm: 3 }, spacing: "sm", children: mediaUrls.map((url, index) => /* @__PURE__ */ jsxs(Card, { withBorder: true, radius: "md", style: { overflow: "hidden" }, children: [
-          /* @__PURE__ */ jsx(
-            Image,
+        mediaItems.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No media yet." }) : /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, xs: 2, sm: 3 }, spacing: "sm", children: mediaItems.map((item, index) => /* @__PURE__ */ jsxs(Card, { withBorder: true, radius: "md", style: { overflow: "hidden" }, children: [
+          item.url === null ? /* @__PURE__ */ jsx(Center, { h: 120, children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : /* @__PURE__ */ jsx(
+            Image$1,
             {
-              src: url,
+              src: item.url,
               alt: `Media variant ${index + 1}`,
               w: "100%",
               radius: "sm",
               style: { cursor: "pointer" },
               onClick: () => {
-                setPreviewUrl(url);
+                setPreviewUrl(item.url);
                 openMedia();
               }
             }
@@ -2323,32 +3211,45 @@ function ContentDistributionDetailPage({
               {
                 variant: "subtle",
                 size: "sm",
+                disabled: item.url === null,
                 onClick: () => {
-                  setPreviewUrl(url);
+                  setPreviewUrl(item.url);
                   openMedia();
                 },
                 children: /* @__PURE__ */ jsx(IconMaximize, { size: 16 })
               }
             ) }),
-            /* @__PURE__ */ jsx(Tooltip, { label: "Copy URL", children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: () => navigator.clipboard.writeText(url), children: /* @__PURE__ */ jsx(IconCopy, { size: 16 }) }) }),
-            /* @__PURE__ */ jsx(Tooltip, { label: "Download", children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", component: "a", href: url, download: true, target: "_blank", children: /* @__PURE__ */ jsx(IconDownload, { size: 16 }) }) }),
-            /* @__PURE__ */ jsx(Tooltip, { label: "Delete", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Tooltip, { label: "Copy URL", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "sm",
+                disabled: item.url === null,
+                onClick: () => {
+                  if (item.url !== null) void navigator.clipboard.writeText(item.url);
+                },
+                children: /* @__PURE__ */ jsx(IconCopy, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tooltip, { label: "Download", children: /* @__PURE__ */ jsx(
               ActionIcon,
               {
                 variant: "subtle",
-                color: "var(--color-error)",
                 size: "sm",
-                loading: updateDistribution.isPending,
-                onClick: () => deleteMedia(url),
-                children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+                disabled: item.url === null,
+                component: "a",
+                href: item.url ?? void 0,
+                download: true,
+                target: "_blank",
+                children: /* @__PURE__ */ jsx(IconDownload, { size: 16 })
               }
             ) })
           ] })
-        ] }, url)) })
+        ] }, item.key)) })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx(CustomModal, { opened: mediaOpened, onClose: closeMedia, size: "xl", children: previewUrl ? /* @__PURE__ */ jsx(Image, { src: previewUrl, alt: "Media preview", fit: "contain" }) : null })
+    /* @__PURE__ */ jsx(CustomModal, { opened: mediaOpened, onClose: closeMedia, size: "xl", children: previewUrl ? /* @__PURE__ */ jsx(Image$1, { src: previewUrl, alt: "Media preview", fit: "contain" }) : null })
   ] });
 }
 
-export { AlternatesPanel, ContentDistributionDetailPage, ContentDistributionsPage, ContentItemReviewPage, ContentItemsPage, ContentOverviewPage, ContentPipelineWorkspacePage, ContentPipelinesPage, ContentReviewCard, PayloadBody, ProcessingStateStrip, ReviewActionBar, firstLine, formatElapsed, lastLine, swapFirstLine, swapLastLine };
+export { AlternatesPanel, AssetCropEditor, CAPTION_STEP_KEY, CAPTION_WORKFLOW_ID, CONTENT_DERIVATIVES_BUCKET, CROP_ASPECT_OPTIONS, CaptionPanel, ContentDistributionDetailPage, ContentDistributionsPage, ContentItemReviewPage, ContentItemsPage, ContentOverviewPage, ContentPipelineBoardPage, ContentPipelineBoardPage as ContentPipelineWorkspacePage, ContentPipelinesPage, ContentReviewCard, DERIVATIVE_JPEG_QUALITY, DERIVATIVE_MAX_WIDTH, IMAGE_ANALYSIS_WORKFLOW_ID, PayloadBody, PostPreview, ProcessingStateStrip, ReviewActionBar, SelectedAssetStrip, SlideAnalysisPanel, SourceAssetsPanel, cropStyle, derivativeObjectKey, firstLine, formatElapsed, isDerivativeStale, lastLine, readStoredAnalysis, renderCropToJpeg, swapFirstLine, swapLastLine };