@drawnagency/primitives 0.1.21 → 0.1.23

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAYjD,OAAO,sBAAsB,CAAC;AAkC9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAcxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAskBP"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAYjD,OAAO,sBAAsB,CAAC;AAkC9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAcxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAukBP"}

package/dist/hooks/useBuildStatus.d.ts

@@ -2,6 +2,7 @@ type BuildState = "idle" | "building" | "ready" | "error";
 interface BuildStatusResult {
     state: BuildState;
     deployUrl: string | null;
+    elapsedSeconds: number;
     startTracking: () => void;
     dismiss: () => void;
 }

package/dist/hooks/useBuildStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBuildStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useBuildStatus.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAS1D,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAKD,wBAAgB,cAAc,IAAI,iBAAiB,CAsGlD"}
+{"version":3,"file":"useBuildStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useBuildStatus.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAS1D,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAKD,wBAAgB,cAAc,IAAI,iBAAiB,CAsHlD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/shell/EditorShell.tsx

@@ -585,6 +585,7 @@ export default function EditorShell({
             }}
             processingItems={mediaPipeline.processingItems}
             buildState={buildStatus.state}
+            buildElapsed={buildStatus.elapsedSeconds}
             onBuildDismiss={buildStatus.dismiss}
           />
 
@@ -878,43 +879,63 @@ function LoadingEllipsis() {
     const id = setInterval(() => setDots((d) => (d + 1) % 4), 400);
     return () => clearInterval(id);
   }, []);
-  return <>{".".repeat(dots)}</>;
+  return <span className="absolute">{".".repeat(dots)}</span>;
+}
+
+function formatElapsed(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+function DismissButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button type="button" onClick={onClick} className="cursor-pointer" aria-label="Dismiss">
+      <X size={12} className="text-base-content/30 hover:text-base-content/60" />
+    </button>
+  );
 }
 
 function StatusText({
   publishAction,
   publishFeedback,
   buildState,
+  buildElapsed,
   onDismiss,
 }: {
   publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
   buildState: "idle" | "building" | "ready" | "error";
+  buildElapsed: number;
   onDismiss: () => void;
 }) {
   if (publishAction === "saving") {
-    return <span className="text-xs font-medium text-base-content/60">Saving changes<LoadingEllipsis /></span>;
+    return (
+      <span className="relative text-xs font-medium text-base-content/60">
+        Saving changes<LoadingEllipsis />
+      </span>
+    );
   }
   if (publishAction === "publishing" || buildState === "building") {
-    return <span className="text-xs font-medium text-base-content/60">Publishing<LoadingEllipsis /></span>;
+    return (
+      <span className="text-xs font-medium text-orange-600">
+        Publishing ({formatElapsed(buildElapsed)})
+      </span>
+    );
   }
   if (buildState === "ready") {
     return (
-      <span className="inline-flex items-center gap-1 text-xs font-medium text-green-600">
-        <button type="button" onClick={onDismiss} className="text-base-content/30 hover:text-base-content/60 cursor-pointer" aria-label="Dismiss">
-          <X size={12} />
-        </button>
-        Published
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-green-600">
+        Published in {formatElapsed(buildElapsed)}
+        <DismissButton onClick={onDismiss} />
       </span>
     );
   }
   if (buildState === "error") {
     return (
-      <span className="inline-flex items-center gap-1 text-xs font-medium text-red-600">
-        <button type="button" onClick={onDismiss} className="text-base-content/30 hover:text-base-content/60 cursor-pointer" aria-label="Dismiss">
-          <X size={12} />
-        </button>
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-red-600">
         Publish failed
+        <DismissButton onClick={onDismiss} />
       </span>
     );
   }
@@ -944,6 +965,7 @@ function EditorToolbar({
   onMediaClick,
   processingItems,
   buildState,
+  buildElapsed,
   onBuildDismiss,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
@@ -958,6 +980,7 @@ function EditorToolbar({
   onMediaClick: () => void;
   processingItems: QueueItem[];
   buildState: "idle" | "building" | "ready" | "error";
+  buildElapsed: number;
   onBuildDismiss: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
@@ -1006,6 +1029,7 @@ function EditorToolbar({
               publishAction={publishAction}
               publishFeedback={publishFeedback}
               buildState={buildState}
+              buildElapsed={buildElapsed}
               onDismiss={onBuildDismiss}
             />
           </div>

package/src/hooks/useBuildStatus.ts

@@ -12,6 +12,7 @@ interface BuildStatusResponse {
 interface BuildStatusResult {
   state: BuildState;
   deployUrl: string | null;
+  elapsedSeconds: number;
   startTracking: () => void;
   dismiss: () => void;
 }
@@ -22,10 +23,22 @@ const AUTO_CLEAR_DELAY = 5000;
 export function useBuildStatus(): BuildStatusResult {
   const [state, setState] = useState<BuildState>("idle");
   const [deployUrl, setDeployUrl] = useState<string | null>(null);
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const clearRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const isPolling = useRef(false);
 
+  const stopTimer = useCallback(() => {
+    if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
+  }, []);
+
+  const startTimer = useCallback(() => {
+    stopTimer();
+    setElapsedSeconds(0);
+    timerRef.current = setInterval(() => setElapsedSeconds((s) => s + 1), 1000);
+  }, [stopTimer]);
+
   const stopPolling = useCallback(() => {
     if (pollRef.current) {
       clearInterval(pollRef.current);
@@ -66,6 +79,7 @@ export function useBuildStatus(): BuildStatusResult {
 
       if (data.state === "ready" || data.state === "error") {
         stopPolling();
+        stopTimer();
         if (data.state === "ready") {
           clearRef.current = setTimeout(() => setState("idle"), AUTO_CLEAR_DELAY);
         }
@@ -103,6 +117,7 @@ export function useBuildStatus(): BuildStatusResult {
     return () => {
       cancelled = true;
       stopPolling();
+      stopTimer();
       if (clearRef.current) clearTimeout(clearRef.current);
     };
   }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling]);
@@ -111,14 +126,16 @@ export function useBuildStatus(): BuildStatusResult {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }
     setState("building");
     setDeployUrl(null);
+    startTimer();
     startPolling();
-  }, [startPolling]);
+  }, [startPolling, startTimer]);
 
   const dismiss = useCallback(() => {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }
     setState("idle");
     stopPolling();
-  }, [stopPolling]);
+    stopTimer();
+  }, [stopPolling, stopTimer]);
 
-  return { state, deployUrl, startTracking, dismiss };
+  return { state, deployUrl, elapsedSeconds, startTracking, dismiss };
 }