@drawnagency/primitives 0.1.15 → 0.1.16

package/dist/components/shell/BuildStatusIndicator.d.ts

@@ -1,9 +1,7 @@
 interface BuildStatusIndicatorProps {
     state: "idle" | "building" | "ready" | "error";
     deployUrl: string | null;
-    visible: boolean;
-    onDismiss: () => void;
 }
-export declare function BuildStatusIndicator({ state, deployUrl, visible, onDismiss, }: BuildStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BuildStatusIndicator({ state, deployUrl, }: BuildStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=BuildStatusIndicator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BuildStatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/shell/BuildStatusIndicator.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAoBD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE,yBAAyB,kDAiC3B"}
+{"version":3,"file":"BuildStatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/shell/BuildStatusIndicator.tsx"],"names":[],"mappings":"AAGA,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AA6BD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,kDAoB3B"}

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;AAmC9B,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,2CAykBP"}
+{"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;AAmC9B,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,8 +2,6 @@ type BuildState = "idle" | "building" | "ready" | "error";
 interface BuildStatusResult {
     state: BuildState;
     deployUrl: string | null;
-    visible: boolean;
-    dismiss: () => void;
     startTracking: () => void;
 }
 export declare function useBuildStatus(): BuildStatusResult;

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,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD,wBAAgB,cAAc,IAAI,iBAAiB,CAoHlD"}
+{"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"}

package/dist/hooks/useEditorPublish.d.ts

@@ -18,8 +18,9 @@ interface PublishDeps {
     onShasUpdated: (savedSha: string | null, mainSha: string | null) => void;
     onPublishComplete?: () => void;
 }
+export type PublishAction = "idle" | "saving" | "publishing";
 export declare function useEditorPublish({ flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, onPublishComplete, }: PublishDeps): {
-    isPublishing: boolean;
+    publishAction: PublishAction;
     publishFeedback: string | null;
     handleSave: () => Promise<void>;
     handlePublish: () => Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"useEditorPublish.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorPublish.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAe/D,UAAU,WAAW;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,gBAAgB,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtF,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AASD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,GAClB,EAAE,WAAW;;;;;;EAuSb"}
+{"version":3,"file":"useEditorPublish.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorPublish.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAe/D,UAAU,WAAW;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,gBAAgB,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtF,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AASD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,GAClB,EAAE,WAAW;;;;;;EAuSb"}

package/package.json

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

package/src/components/shell/BuildStatusIndicator.tsx

@@ -1,27 +1,34 @@
 import { cn } from "../../lib/cn";
-import { X } from "lucide-react";
+import { useEffect, useState } from "react";
 
 interface BuildStatusIndicatorProps {
   state: "idle" | "building" | "ready" | "error";
   deployUrl: string | null;
-  visible: boolean;
-  onDismiss: () => void;
+}
+
+function LoadingEllipsis() {
+  const [dots, setDots] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setDots((d) => (d + 1) % 4), 400);
+    return () => clearInterval(id);
+  }, []);
+  return <>{".".repeat(dots)}</>;
 }
 
 const stateConfig = {
   building: {
-    label: "Deploying...",
-    className: "border-orange-500 text-orange-600 hover:bg-orange-50",
+    label: "Publishing",
+    className: "border-orange-500 text-orange-600",
     dotClassName: "bg-orange-500 animate-pulse",
   },
   ready: {
-    label: "Live",
-    className: "border-green-600 text-green-600 hover:bg-green-50",
+    label: "Published",
+    className: "border-green-600 text-green-600",
     dotClassName: "bg-green-600",
   },
   error: {
-    label: "Deploy failed",
-    className: "border-red-600 text-red-600 hover:bg-red-50",
+    label: "Publish failed",
+    className: "border-red-600 text-red-600",
     dotClassName: "bg-red-600",
   },
 } as const;
@@ -29,39 +36,24 @@ const stateConfig = {
 export function BuildStatusIndicator({
   state,
   deployUrl,
-  visible,
-  onDismiss,
 }: BuildStatusIndicatorProps) {
-  if (!visible || state === "idle") return null;
+  if (state === "idle") return null;
 
   const config = stateConfig[state];
 
   return (
-    <span className="inline-flex items-center gap-0">
-      <a
-        href={deployUrl ?? "#"}
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label={config.label}
-        className={cn(
-          "inline-flex items-center gap-1.5 rounded-l px-3 py-1.5 text-xs font-medium border transition-colors",
-          config.className,
-        )}
-      >
-        <span className={cn("h-1.5 w-1.5 rounded-full", config.dotClassName)} />
-        {config.label}
-      </a>
-      <button
-        type="button"
-        onClick={onDismiss}
-        aria-label="Dismiss build status"
-        className={cn(
-          "inline-flex items-center rounded-r border border-l-0 px-1.5 py-1.5 transition-colors cursor-pointer",
-          config.className,
-        )}
-      >
-        <X size={12} />
-      </button>
-    </span>
+    <a
+      href={deployUrl ?? "#"}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={config.label}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-xs font-medium border transition-colors",
+        config.className,
+      )}
+    >
+      <span className={cn("h-1.5 w-1.5 rounded-full", config.dotClassName)} />
+      {config.label}{state === "building" && <LoadingEllipsis />}
+    </a>
   );
 }

package/src/components/shell/EditorShell.tsx

@@ -127,7 +127,7 @@ export default function EditorShell({
 
   const buildStatus = useBuildStatus();
 
-  const { isPublishing, publishFeedback, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
+  const { publishAction, publishFeedback, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
     flushNow: persistence.flushNow,
     cancelPendingFlush: persistence.cancelPendingFlush,
     isConfigDirty: persistence.isConfigDirty,
@@ -574,7 +574,7 @@ export default function EditorShell({
           <EditorToolbar
             buttonState={buttonState}
             localChangesExist={localChangesExist}
-            isPublishing={isPublishing}
+            publishAction={publishAction}
             publishFeedback={publishFeedback}
             onSave={handleSave}
             onPublish={handlePublish}
@@ -588,8 +588,6 @@ export default function EditorShell({
             processingItems={mediaPipeline.processingItems}
             buildState={buildStatus.state}
             buildDeployUrl={buildStatus.deployUrl}
-            buildVisible={buildStatus.visible}
-            onBuildDismiss={buildStatus.dismiss}
           />
 
           <EditorContent
@@ -597,7 +595,7 @@ export default function EditorShell({
             audiences={audiences}
             dirtySectionIds={dirtySectionIds}
             deletedSections={deletedSections}
-            isPublishing={isPublishing}
+            isPublishing={publishAction !== "idle"}
             onSectionChange={onSectionChange}
             onAddSection={onAddSection}
             onDeleteSection={onDeleteSection}
@@ -879,7 +877,7 @@ function GlobalModal() {
 function EditorToolbar({
   buttonState,
   localChangesExist,
-  isPublishing,
+  publishAction,
   publishFeedback,
   onSave,
   onPublish,
@@ -890,12 +888,10 @@ function EditorToolbar({
   processingItems,
   buildState,
   buildDeployUrl,
-  buildVisible,
-  onBuildDismiss,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
-  isPublishing: boolean;
+  publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
   onSave: () => void;
   onPublish: () => void;
@@ -906,8 +902,6 @@ function EditorToolbar({
   processingItems: QueueItem[];
   buildState: "idle" | "building" | "ready" | "error";
   buildDeployUrl: string | null;
-  buildVisible: boolean;
-  onBuildDismiss: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
 
@@ -919,7 +913,7 @@ function EditorToolbar({
             {publishFeedback && (
               <span className={cn(
                 "text-xs font-medium",
-                publishFeedback === "Published" || publishFeedback === "Saved"
+                publishFeedback === "Saved"
                   ? "text-green-600"
                   : "text-red-600",
               )}>
@@ -930,8 +924,8 @@ function EditorToolbar({
               <SplitButton
                 label="Save & Publish"
                 onClick={onSaveAndPublish}
-                isLoading={isPublishing}
-                loadingLabel="Publishing..."
+                isLoading={publishAction !== "idle"}
+                loadingLabel={publishAction === "saving" ? "Saving..." : "Publishing..."}
                 options={[{ label: "Save", onClick: onSave }]}
               />
             )}
@@ -939,7 +933,7 @@ function EditorToolbar({
               <SplitButton
                 label="Publish"
                 onClick={onPublish}
-                isLoading={isPublishing}
+                isLoading={publishAction !== "idle"}
                 loadingLabel="Publishing..."
                 options={[]}
               />
@@ -952,12 +946,11 @@ function EditorToolbar({
                 options={[]}
               />
             )}
-            {localChangesExist && !isPublishing && (
+            {localChangesExist && publishAction === "idle" && (
               <Button
                 type="button"
                 variant="destructive"
                 onClick={onDiscardClick}
-                disabled={isPublishing}
               >
                 Discard Changes
               </Button>
@@ -965,8 +958,6 @@ function EditorToolbar({
             <BuildStatusIndicator
               state={buildState}
               deployUrl={buildDeployUrl}
-              visible={buildVisible}
-              onDismiss={onBuildDismiss}
             />
           </div>
           <div className="flex items-center gap-2">

package/src/hooks/useBuildStatus.ts

@@ -12,20 +12,15 @@ interface BuildStatusResponse {
 interface BuildStatusResult {
   state: BuildState;
   deployUrl: string | null;
-  visible: boolean;
-  dismiss: () => void;
   startTracking: () => void;
 }
 
 const POLL_INTERVAL = 5000;
-const AUTO_DISMISS_DELAY = 10000;
 
 export function useBuildStatus(): BuildStatusResult {
   const [state, setState] = useState<BuildState>("idle");
   const [deployUrl, setDeployUrl] = useState<string | null>(null);
-  const [dismissed, setDismissed] = useState(false);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const dismissRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isPolling = useRef(false);
 
   const stopPolling = useCallback(() => {
@@ -65,16 +60,9 @@ export function useBuildStatus(): BuildStatusResult {
 
       setState(data.state);
       setDeployUrl(data.deployUrl);
-      setDismissed(false);
 
       if (data.state === "ready" || data.state === "error") {
         stopPolling();
-
-        if (data.state === "ready") {
-          dismissRef.current = setTimeout(() => {
-            setDismissed(true);
-          }, AUTO_DISMISS_DELAY);
-        }
       }
     },
     [stopPolling],
@@ -109,31 +97,14 @@ export function useBuildStatus(): BuildStatusResult {
     return () => {
       cancelled = true;
       stopPolling();
-      if (dismissRef.current) clearTimeout(dismissRef.current);
     };
   }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling]);
 
-  const dismiss = useCallback(() => {
-    setDismissed(true);
-    stopPolling();
-    if (dismissRef.current) {
-      clearTimeout(dismissRef.current);
-      dismissRef.current = null;
-    }
-  }, [stopPolling]);
-
   const startTracking = useCallback(() => {
     setState("building");
     setDeployUrl(null);
-    setDismissed(false);
-    if (dismissRef.current) {
-      clearTimeout(dismissRef.current);
-      dismissRef.current = null;
-    }
     startPolling();
   }, [startPolling]);
 
-  const visible = state !== "idle" && !dismissed;
-
-  return { state, deployUrl, visible, dismiss, startTracking };
+  return { state, deployUrl, startTracking };
 }

package/src/hooks/useEditorPublish.ts

@@ -41,6 +41,8 @@ interface GatheredMedia {
   hasMediaChanges: boolean;
 }
 
+export type PublishAction = "idle" | "saving" | "publishing";
+
 export function useEditorPublish({
   flushNow,
   cancelPendingFlush,
@@ -58,7 +60,7 @@ export function useEditorPublish({
   onShasUpdated,
   onPublishComplete,
 }: PublishDeps) {
-  const [isPublishing, setIsPublishing] = useState(false);
+  const [publishAction, setPublishAction] = useState<PublishAction>("idle");
   const [publishFeedback, setPublishFeedback] = useState<string | null>(null);
   const feedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -136,7 +138,7 @@ export function useEditorPublish({
   const handleSave = useCallback(async () => {
     if (!siteConfig) return;
 
-    setIsPublishing(true);
+    setPublishAction("saving");
     setPublishFeedback(null);
 
     try {
@@ -147,7 +149,7 @@ export function useEditorPublish({
       const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0;
       const hasDeletedSections = (deletedSectionIds?.length ?? 0) > 0;
       if (!hasChanges && !isConfigDirty() && !hasMediaChanges && !hasDeletedSections) {
-        setIsPublishing(false);
+        setPublishAction("idle");
         return;
       }
 
@@ -216,12 +218,12 @@ export function useEditorPublish({
       console.error("Save failed:", error);
       showFeedback("Save failed", 5000);
     } finally {
-      setIsPublishing(false);
+      setPublishAction("idle");
     }
   }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback]);
 
   const handlePublish = useCallback(async () => {
-    setIsPublishing(true);
+    setPublishAction("publishing");
     setPublishFeedback(null);
 
     try {
@@ -238,20 +240,19 @@ export function useEditorPublish({
       const { sha } = await response.json();
 
       onShasUpdated(null, sha);
-      showFeedback("Published", 3000);
       onPublishComplete?.();
     } catch (error) {
       console.error("Publish failed:", error);
       showFeedback("Publish failed", 5000);
     } finally {
-      setIsPublishing(false);
+      setPublishAction("idle");
     }
   }, [onShasUpdated, showFeedback, onPublishComplete]);
 
   const handleSaveAndPublish = useCallback(async () => {
     if (!siteConfig) return;
 
-    setIsPublishing(true);
+    setPublishAction("saving");
     setPublishFeedback(null);
 
     try {
@@ -316,6 +317,8 @@ export function useEditorPublish({
         }
       }
 
+      setPublishAction("publishing");
+
       const publishResponse = await fetch("/api/publish", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -341,15 +344,14 @@ export function useEditorPublish({
       }
 
       onShasUpdated(null, sha);
-      showFeedback("Published", 3000);
       onPublishComplete?.();
     } catch (error) {
       console.error("Publish failed:", error);
       showFeedback("Publish failed", 5000);
     } finally {
-      setIsPublishing(false);
+      setPublishAction("idle");
     }
   }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback, onPublishComplete]);
 
-  return { isPublishing, publishFeedback, handleSave, handlePublish, handleSaveAndPublish };
+  return { publishAction, publishFeedback, handleSave, handlePublish, handleSaveAndPublish };
 }