@drawnagency/primitives 0.1.20 → 0.1.22

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,2CAqkBP"}
+{"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,7 +2,9 @@ type BuildState = "idle" | "building" | "ready" | "error";
 interface BuildStatusResult {
     state: BuildState;
     deployUrl: string | null;
+    elapsedSeconds: number;
     startTracking: () => void;
+    dismiss: () => void;
 }
 export declare function useBuildStatus(): BuildStatusResult;
 export {};

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;CAC3B;AAID,wBAAgB,cAAc,IAAI,iBAAiB,CA0FlD"}
+{"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.20",
+  "version": "0.1.22",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/shell/EditorShell.tsx

@@ -47,7 +47,7 @@ import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { SettingsIcon } from "../shared/icons";
-import { ImageIcon } from "lucide-react";
+import { ImageIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 
 export { useMediaLibrary } from "./MediaLibraryContext";
@@ -585,6 +585,8 @@ export default function EditorShell({
             }}
             processingItems={mediaPipeline.processingItems}
             buildState={buildStatus.state}
+            buildElapsed={buildStatus.elapsedSeconds}
+            onBuildDismiss={buildStatus.dismiss}
           />
 
           <EditorContent
@@ -871,29 +873,71 @@ function GlobalModal() {
   );
 }
 
+function LoadingEllipsis() {
+  const [dots, setDots] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setDots((d) => (d + 1) % 4), 400);
+    return () => clearInterval(id);
+  }, []);
+  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="text-base-content/30 hover:text-base-content/60 cursor-pointer" aria-label="Dismiss">
+      <X size={12} />
+    </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...</span>;
-  }
-  if (publishAction === "publishing") {
-    return <span className="text-xs font-medium text-base-content/60">Publishing...</span>;
+    return (
+      <span className="relative text-xs font-medium text-base-content/60">
+        Saving changes<LoadingEllipsis />
+      </span>
+    );
   }
-  if (buildState === "building") {
-    return <span className="text-xs font-medium text-orange-600">Publishing...</span>;
+  if (publishAction === "publishing" || buildState === "building") {
+    return (
+      <span className="text-xs font-medium text-orange-600">
+        Publishing ({formatElapsed(buildElapsed)})
+      </span>
+    );
   }
   if (buildState === "ready") {
-    return <span className="text-xs font-medium text-green-600">Published</span>;
+    return (
+      <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="text-xs font-medium text-red-600">Publish failed</span>;
+    return (
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-red-600">
+        Publish failed
+        <DismissButton onClick={onDismiss} />
+      </span>
+    );
   }
   if (publishFeedback) {
     return (
@@ -921,6 +965,8 @@ function EditorToolbar({
   onMediaClick,
   processingItems,
   buildState,
+  buildElapsed,
+  onBuildDismiss,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -934,6 +980,8 @@ function EditorToolbar({
   onMediaClick: () => void;
   processingItems: QueueItem[];
   buildState: "idle" | "building" | "ready" | "error";
+  buildElapsed: number;
+  onBuildDismiss: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
 
@@ -981,6 +1029,8 @@ function EditorToolbar({
               publishAction={publishAction}
               publishFeedback={publishFeedback}
               buildState={buildState}
+              buildElapsed={buildElapsed}
+              onDismiss={onBuildDismiss}
             />
           </div>
           <div className="flex items-center justify-end gap-2">

package/src/hooks/useBuildStatus.ts

@@ -12,17 +12,33 @@ interface BuildStatusResponse {
 interface BuildStatusResult {
   state: BuildState;
   deployUrl: string | null;
+  elapsedSeconds: number;
   startTracking: () => void;
+  dismiss: () => void;
 }
 
 const POLL_INTERVAL = 5000;
+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);
@@ -63,6 +79,10 @@ 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);
+        }
       }
     },
     [stopPolling],
@@ -97,14 +117,25 @@ export function useBuildStatus(): BuildStatusResult {
     return () => {
       cancelled = true;
       stopPolling();
+      stopTimer();
+      if (clearRef.current) clearTimeout(clearRef.current);
     };
   }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling]);
 
   const startTracking = useCallback(() => {
+    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();
+    stopTimer();
+  }, [stopPolling, stopTimer]);
 
-  return { state, deployUrl, startTracking };
+  return { state, deployUrl, elapsedSeconds, startTracking, dismiss };
 }