@elevasis/ui 2.72.0 → 2.74.0

package/dist/features/content/index.js

@@ -1,18 +1,18 @@
+import { useCloudStorageTemporaryLinks, useStorageSignedUrls, storageObjectRefKey } from '../../chunk-3QHX4ZKV.js';
 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, resolveContentWorkspaceRoute, useContentDistribution, useContentPipelineSummary, deriveContentBoard, useExecutions } from '../../chunk-KIDZXZM5.js';
-export { CONTENT_ITEMS, ContentSidebar, ContentSidebarMiddle, DEFAULT_CONTENT_VOCABULARY, MyReviewQueuePanel, contentManifest, deriveContentBoard, getContentItemIdentity, resolveContentStepResource, resolveContentVocabulary, useContentConfig } from '../../chunk-KIDZXZM5.js';
+import { CustomModal, useContentItemSourceAssetDetails, useContentSourceAssets, useAddContentItemSourceAsset, useRemoveContentItemSourceAsset, useReorderContentItemSourceAssets, useUpdateContentItemSourceAsset, useContentItemAttempts, useExecuteAsync, useUpdateContentItem, useExecution, contentKeys, useContentItems, useContentDistributions, useContentConfig, isAwaitingReview, SubshellContentContainer, PageTitleCaption, CenteredErrorState, EmptyState, StatCard, getContentItemIdentity, usePaginationState, resolveCurrentContentStep, useContentItem, useReviewContentItem, resolveReviewTarget, useContentDistribution, useContentDistributionMetrics, useContentPipelineSummary, deriveContentBoard, resolveContentWorkspaceRoute, useExecutions } from '../../chunk-6JN2TLV2.js';
+export { CONTENT_ITEMS, ContentSidebar, ContentSidebarMiddle, DEFAULT_CONTENT_VOCABULARY, MyReviewQueuePanel, contentManifest, deriveContentBoard, getContentItemIdentity, resolveContentStepResource, resolveContentVocabulary, useContentConfig } from '../../chunk-6JN2TLV2.js';
 import '../../chunk-R6NMRXNO.js';
 import '../../chunk-RBGVNPA6.js';
-import '../../chunk-MKH2KOAO.js';
-import '../../chunk-Z2W5VNN3.js';
+import '../../chunk-O32UQ26A.js';
 import '../../chunk-L7BZZ4SI.js';
-import { showSuccessNotification } from '../../chunk-XZIOCB5D.js';
+import { showSuccessNotification } from '../../chunk-HYQOGRWG.js';
 import '../../chunk-MISHPEJX.js';
 import { CardHeader } from '../../chunk-62GVNH5U.js';
 import '../../chunk-P45GQ3ZW.js';
-import '../../chunk-M7WWRZ5Z.js';
+import '../../chunk-2GIJBHZT.js';
 import '../../chunk-3KMDHCAR.js';
 import '../../chunk-2IFYDILW.js';
 import '../../chunk-BLXJEIQS.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-Q3O3WY7Q.js';
+import { formatTimeAgo, formatRelativeTime } from '../../chunk-R5UGIFYU.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, Image, ActionIcon, UnstyledButton, ScrollArea } from '@mantine/core';
-import { IconAlertTriangle, IconShieldCheck, IconShieldX, IconArticle, IconArrowRight, IconClock, IconSend, IconSearch, IconFileText, IconExternalLink, IconListDetails, IconAlertCircle, IconLayoutGrid, IconShare, IconPlayerPlay, IconCircleCheck, IconCircleDashed, IconMaximize, IconCopy, IconDownload, 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, Stepper, Grid, 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 === "") {
@@ -536,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 = {
@@ -555,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 });
@@ -569,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(
@@ -711,10 +1719,9 @@ function ContentItemsPage({ headerActions } = {}) {
   const pagination = usePaginationState(PAGE_SIZE, [searchQuery, statusFilter, pillarFilter, reviewFilterActive]);
   const openItem = (item) => {
     const pipeline = contentConfig.pipelines.find((candidate) => candidate.id === item.pipelineId);
-    const openGate = getOpenContentReviewGates(item.processingState ?? {}, pipeline?.steps ?? [])[0];
-    const workspaceRoute = openGate ? resolveContentWorkspaceRoute(pipeline, openGate.step) : void 0;
-    if (workspaceRoute) {
-      void navigate({ to: workspaceRoute });
+    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 } });
@@ -727,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" },
@@ -945,18 +1956,18 @@ 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]);
-  const workspaceRoute = resolveContentWorkspaceRoute(pipeline, earliestOpenGate?.step);
+  }, [reviewTarget, item?.pipelineId, pipeline]);
   const reviewActions = useMemo(
     () => workspaceRoute ? [] : buildReviewActions(isTerminalPipeline, earliestOpenGate, reviewDisabledReason),
     [workspaceRoute, isTerminalPipeline, earliestOpenGate, reviewDisabledReason]
@@ -983,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;
@@ -1128,7 +2139,7 @@ function ContentItemReviewPage({ itemId, headerActions }) {
           children: /* @__PURE__ */ jsx(Text, { size: "sm", children: reviewDisabledReason })
         }
       ),
-      workspaceRoute && earliestOpenGate && /* @__PURE__ */ jsx(
+      workspaceRoute && /* @__PURE__ */ jsx(
         Alert,
         {
           icon: /* @__PURE__ */ jsx(IconExternalLink, { size: 16 }),
@@ -1174,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: [
@@ -1300,17 +2314,18 @@ function ContentPipelinesPage({ headerActions } = {}) {
   ] }) }) });
 }
 var ACTOR_LEAD = {
-  vendor: "An outside service",
-  workflow: "An automated workflow",
-  agent: "An AI agent"
+  vendor: "An outside service handles",
+  workflow: "An automated workflow handles",
+  agent: "An AI agent handles",
+  human: "You do"
 };
-var REVIEW_MODE_TAIL = {
-  live: "and you review it live, in the moment",
-  queued: "then it waits for your review",
-  none: "and moves on without 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: "with no review after it"
 };
 function describeStep(step) {
-  return `${ACTOR_LEAD[step.actor]} handles "${step.label}," ${REVIEW_MODE_TAIL[step.reviewMode]}.`;
+  return `${ACTOR_LEAD[step.actor]} "${step.label}," ${REVIEW_VENUE_TAIL[step.reviewVenue]}.`;
 }
 function StepRow({ step, resourceId }) {
   return /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
@@ -1726,6 +2741,13 @@ var QUERY_LIMIT = 100;
 function formatDate(value) {
   return value ? new Date(value).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "\u2014";
 }
+function summarizeMetrics2(metrics) {
+  if (!metrics || typeof metrics !== "object" || Array.isArray(metrics)) return "\u2014";
+  const entries = Object.entries(metrics);
+  if (entries.length === 0) return "\u2014";
+  const shown = entries.slice(0, 2).map(([key, value]) => `${key} ${String(value)}`).join(" \xB7 ");
+  return entries.length > 2 ? `${shown} +${entries.length - 2}` : shown;
+}
 function ContentDistributionsPage({ headerActions } = {}) {
   const navigate = useNavigate();
   const contentConfig = useContentConfig();
@@ -1821,7 +2843,10 @@ function ContentDistributionsPage({ headerActions } = {}) {
           /* @__PURE__ */ jsx(Table.Th, { children: "Platform" }),
           /* @__PURE__ */ jsx(Table.Th, { children: "Format" }),
           /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
-          /* @__PURE__ */ jsx(Table.Th, { children: "Publish Method" }),
+          /* @__PURE__ */ jsx(Table.Th, { style: { whiteSpace: "nowrap" }, children: "Publish Method" }),
+          /* @__PURE__ */ jsx(Table.Th, { style: { whiteSpace: "nowrap" }, children: "Platform post ID" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Metrics" }),
+          /* @__PURE__ */ jsx(Table.Th, { style: { whiteSpace: "nowrap" }, children: "Metrics updated" }),
           /* @__PURE__ */ jsx(Table.Th, { children: "Published" }),
           /* @__PURE__ */ jsx(Table.Th, {})
         ] }) }),
@@ -1852,6 +2877,9 @@ function ContentDistributionsPage({ headerActions } = {}) {
                 /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: distribution.format }) }),
                 /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", children: distribution.status }) }),
                 /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: distribution.publishMethod ?? "\u2014" }) }),
+                /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "xs", ff: "monospace", c: "dimmed", children: distribution.platformPostId ?? "\u2014" }) }),
+                /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: summarizeMetrics2(distribution.metrics) }) }),
+                /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDate(distribution.metricsUpdatedAt) }) }),
                 /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDate(distribution.publishedAt) }) }),
                 /* @__PURE__ */ jsx(Table.Td, { children: distribution.platformUrl && /* @__PURE__ */ jsx(
                   Anchor,
@@ -1948,6 +2976,22 @@ function MetricsDisplay({ metrics }) {
     /* @__PURE__ */ jsx(Text, { size: "sm", children: String(value) })
   ] }, key)) });
 }
+var METRIC_HISTORY_COLUMNS = [
+  { key: "views", label: "Views" },
+  { key: "reach", label: "Reach" },
+  { key: "likes", label: "Likes" },
+  { key: "comments", label: "Comments" },
+  { key: "shares", label: "Shares" },
+  { key: "saves", label: "Saves" },
+  { key: "engagements", label: "Engagements" },
+  { key: "profile_visits", label: "Profile Visits" },
+  { key: "profile_activity", label: "Profile Activity" },
+  { key: "follows", label: "Follows" },
+  { key: "clicks", label: "Clicks" }
+];
+function formatMetricValue(value) {
+  return value === void 0 ? "\u2014" : value.toLocaleString();
+}
 function ContentDistributionDetailPage({
   distributionId,
   headerActions
@@ -1957,8 +3001,16 @@ function ContentDistributionDetailPage({
   const distributionQuery = useContentDistribution(distributionId);
   const dist = distributionQuery.data;
   const itemQuery = useContentItem(dist?.contentItemId);
+  const metricsHistoryQuery = useContentDistributionMetrics(distributionId);
+  const metricsHistory = metricsHistoryQuery.data?.data ?? [];
   const [mediaOpened, { open: openMedia, close: closeMedia }] = useDisclosure(false);
   const [previewUrl, setPreviewUrl] = useState(null);
+  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,
     {
@@ -1985,7 +3037,9 @@ 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;
@@ -2103,6 +3157,23 @@ function ContentDistributionDetailPage({
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsx(MetricsDisplay, { metrics: dist.metrics })
       ] }) }),
+      /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Metrics History" }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        metricsHistoryQuery.isLoading ? /* @__PURE__ */ jsx(Center, { p: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : metricsHistoryQuery.isError ? /* @__PURE__ */ jsx(CenteredErrorState, { error: metricsHistoryQuery.error, title: "Failed to load metrics history" }) : metricsHistory.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No metrics readings captured yet." }) : /* @__PURE__ */ jsx(Table.ScrollContainer, { minWidth: 900, children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+            /* @__PURE__ */ jsx(Table.Th, { children: "Captured" }),
+            /* @__PURE__ */ jsx(Table.Th, { children: "Source" }),
+            METRIC_HISTORY_COLUMNS.map((column) => /* @__PURE__ */ jsx(Table.Th, { children: column.label }, column.key))
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Tbody, { children: metricsHistory.map((reading) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDateTime3(reading.capturedAt) }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: reading.source }) }),
+            METRIC_HISTORY_COLUMNS.map((column) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatMetricValue(reading.metrics[column.key]) }) }, column.key))
+          ] }, reading.id)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "An em dash means this platform does not report that metric -- it is never the same as zero." })
+      ] }) }),
       checklist.length > 0 ? /* @__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: "Checklist" }),
@@ -2161,24 +3232,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();
               }
             }
@@ -2189,21 +3260,244 @@ 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: "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",
+                size: "sm",
+                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 })
+  ] });
+}
+function ContentWorkspaceShell({
+  pipelineId,
+  panels,
+  initialDraft,
+  title,
+  caption,
+  headerRight,
+  renderStart,
+  renderPersistent,
+  renderAside,
+  canOpenStep,
+  testId
+}) {
+  const { pipelines, defaultPipelineId } = useContentConfig();
+  const resolvedPipelineId = pipelineId ?? defaultPipelineId;
+  const pipeline = useMemo(
+    () => pipelines.find((entry) => entry.id === resolvedPipelineId),
+    [pipelines, resolvedPipelineId]
+  );
+  const steps = useMemo(() => pipeline?.steps ?? [], [pipeline]);
+  const [isStarted, setIsStarted] = useState(renderStart === void 0);
+  const [activeStepKey, setActiveStepKey] = useState(null);
+  const [furthestIndex, setFurthestIndex] = useState(0);
+  const [adoptedItem, setAdoptedItem] = useState(null);
+  const [bodyDraft, setBodyDraft] = useState(null);
+  const [draft, setDraftState] = useState(initialDraft);
+  const leaveGuardRef = useRef(null);
+  const itemId = adoptedItem?.id;
+  const liveItem = useContentItem(itemId);
+  const distributions = useContentDistributions({ contentItemId: itemId });
+  const item = useMemo(() => {
+    const live = liveItem.data;
+    return live !== void 0 && live.id === itemId ? live : adoptedItem;
+  }, [liveItem.data, itemId, adoptedItem]);
+  const distribution = useMemo(() => {
+    if (itemId === void 0) return null;
+    return distributions.data?.data.find((row) => row.contentItemId === itemId) ?? null;
+  }, [distributions.data, itemId]);
+  const stepIndex = useMemo(() => {
+    const index = steps.findIndex((step2) => step2.key === activeStepKey);
+    return index === -1 ? 0 : index;
+  }, [steps, activeStepKey]);
+  const step = steps[stepIndex];
+  const setDraft = useCallback((update) => {
+    setDraftState(
+      (current) => typeof update === "function" ? update(current) : { ...current, ...update }
+    );
+  }, []);
+  const setItem = useCallback((next) => {
+    setAdoptedItem(next);
+    setBodyDraft(null);
+  }, []);
+  const refetchDistributionsQuery = distributions.refetch;
+  const refetchDistributions = useCallback(() => void refetchDistributionsQuery(), [refetchDistributionsQuery]);
+  const registerLeaveGuard = useCallback((guard) => {
+    leaveGuardRef.current = guard;
+  }, []);
+  const goToStep = useCallback(
+    (stepKey) => {
+      const nextIndex = steps.findIndex((entry) => entry.key === stepKey);
+      const next = steps[nextIndex];
+      if (next === void 0) return;
+      const guard = leaveGuardRef.current;
+      void (async () => {
+        if (guard !== null && nextIndex > stepIndex) await guard(next);
+        setActiveStepKey(next.key);
+        setFurthestIndex((current) => Math.max(current, nextIndex));
+      })();
+    },
+    [steps, stepIndex]
+  );
+  const goToNextStep = useCallback(() => {
+    const next = steps[stepIndex + 1];
+    if (next !== void 0) goToStep(next.key);
+  }, [steps, stepIndex, goToStep]);
+  const goToPreviousStep = useCallback(() => {
+    const previous = steps[stepIndex - 1];
+    if (previous !== void 0) goToStep(previous.key);
+  }, [steps, stepIndex, goToStep]);
+  const restart = useCallback(() => {
+    setAdoptedItem(null);
+    setBodyDraft(null);
+    setDraftState(initialDraft);
+    setActiveStepKey(null);
+    setFurthestIndex(0);
+    leaveGuardRef.current = null;
+    setIsStarted(renderStart === void 0);
+  }, [initialDraft, renderStart]);
+  const state = useMemo(() => {
+    if (pipeline === void 0 || step === void 0) return null;
+    const base = {
+      pipeline,
+      steps,
+      step,
+      stepIndex,
+      item,
+      setItem,
+      body: bodyDraft ?? item?.body ?? "",
+      bodyDraft,
+      setBodyDraft,
+      distribution,
+      refetchDistributions,
+      draft,
+      setDraft,
+      goToStep,
+      goToNextStep,
+      goToPreviousStep,
+      registerLeaveGuard,
+      restart
+    };
+    const resolved = {
+      ...base,
+      canOpenStep: (candidate) => canOpenStep === void 0 ? steps.indexOf(candidate) <= furthestIndex : canOpenStep(candidate, resolved)
+    };
+    return resolved;
+  }, [
+    pipeline,
+    steps,
+    step,
+    stepIndex,
+    item,
+    setItem,
+    bodyDraft,
+    distribution,
+    refetchDistributions,
+    draft,
+    setDraft,
+    goToStep,
+    goToNextStep,
+    goToPreviousStep,
+    registerLeaveGuard,
+    restart,
+    canOpenStep,
+    furthestIndex
+  ]);
+  const startControls = useMemo(
+    () => ({
+      onStartNew: () => setIsStarted(true),
+      onResume: (resumed, resumeAtStepKey) => {
+        setItem(resumed);
+        setDraftState(initialDraft);
+        setFurthestIndex(steps.length === 0 ? 0 : steps.length - 1);
+        setActiveStepKey(resumeAtStepKey ?? steps[0]?.key ?? null);
+        setIsStarted(true);
+      }
+    }),
+    [setItem, initialDraft, steps]
+  );
+  const body = (() => {
+    if (pipeline === void 0) {
+      return /* @__PURE__ */ jsx(Alert, { color: "yellow", icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }), children: resolvedPipelineId === void 0 ? "The deployed Organization Model declares no content pipelines, so there is nothing to walk through here." : `The deployed Organization Model does not declare a "${resolvedPipelineId}" pipeline.` });
+    }
+    if (steps.length === 0 || state === null || step === void 0) {
+      return /* @__PURE__ */ jsxs(Alert, { color: "yellow", icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }), children: [
+        "The ",
+        /* @__PURE__ */ jsx("strong", { children: pipeline.label }),
+        " pipeline declares no steps, so there is nothing to render."
+      ] });
+    }
+    const Panel = panels[step.key];
+    const panelNode = Panel === void 0 ? /* @__PURE__ */ jsxs(Alert, { color: "yellow", icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }), children: [
+      "No panel is registered for the ",
+      /* @__PURE__ */ jsx("strong", { children: step.label }),
+      " step (",
+      /* @__PURE__ */ jsx("code", { children: step.key }),
+      "). Add one to the workspace's panel map."
+    ] }) : /* @__PURE__ */ jsx(Panel, { ...state });
+    const aside = renderAside?.(state) ?? null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Stepper, { active: stepIndex, onStepClick: (next) => goToStep(steps[next]?.key ?? step.key), size: "sm", children: steps.map((entry) => /* @__PURE__ */ jsx(Stepper.Step, { label: entry.label, allowStepSelect: state.canOpenStep(entry) }, entry.key)) }),
+      step.description === void 0 || step.description === "" ? null : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: step.description }),
+      renderPersistent?.(state),
+      aside === null ? panelNode : /* @__PURE__ */ jsxs(Grid, { gutter: "md", align: "flex-start", children: [
+        /* @__PURE__ */ jsx(Grid.Col, { span: { base: 12, lg: 7 }, children: panelNode }),
+        /* @__PURE__ */ jsx(Grid.Col, { span: { base: 12, lg: 5 }, children: /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "md", children: aside }) })
+      ] })
+    ] });
+  })();
+  return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(PageContainer, { children: /* @__PURE__ */ jsxs(Stack, { "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(PageTitleCaption, { title, caption, rightSection: headerRight }),
+    !isStarted && renderStart !== void 0 ? renderStart(startControls) : body
+  ] }) }) });
+}
+function ContentAnalysisStepPanel(state) {
+  const { item, stepIndex, steps, goToNextStep, goToPreviousStep } = state;
+  if (item === null) {
+    return /* @__PURE__ */ jsx(Alert, { color: "yellow", icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }), children: "Nothing has been created yet, so there is nothing to analyse. Go back and finish the earlier steps first." });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(SlideAnalysisPanel, { itemId: item.id }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      stepIndex > 0 ? /* @__PURE__ */ jsxs(Button, { variant: "default", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: goToPreviousStep, children: [
+        "Back to ",
+        steps[stepIndex - 1]?.label
+      ] }) : /* @__PURE__ */ jsx("span", {}),
+      stepIndex < steps.length - 1 && /* @__PURE__ */ jsx(Button, { rightSection: /* @__PURE__ */ jsx(IconArrowRight, { size: 16 }), onClick: goToNextStep, children: steps[stepIndex + 1]?.label })
+    ] })
   ] });
 }
 
-export { AlternatesPanel, ContentDistributionDetailPage, ContentDistributionsPage, ContentItemReviewPage, ContentItemsPage, ContentOverviewPage, ContentPipelineBoardPage, ContentPipelineBoardPage as 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, ContentAnalysisStepPanel, ContentDistributionDetailPage, ContentDistributionsPage, ContentItemReviewPage, ContentItemsPage, ContentOverviewPage, ContentPipelineBoardPage, ContentPipelineBoardPage as ContentPipelineWorkspacePage, ContentPipelinesPage, ContentReviewCard, ContentWorkspaceShell, 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 };