@drawnagency/primitives 0.1.20 → 0.1.21

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,2CAskBP"}

package/dist/hooks/useBuildStatus.d.ts

@@ -3,6 +3,7 @@ interface BuildStatusResult {
     state: BuildState;
     deployUrl: string | null;
     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,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAKD,wBAAgB,cAAc,IAAI,iBAAiB,CAsGlD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "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,7 @@ export default function EditorShell({
             }}
             processingItems={mediaPipeline.processingItems}
             buildState={buildStatus.state}
+            onBuildDismiss={buildStatus.dismiss}
           />
 
           <EditorContent
@@ -871,29 +872,51 @@ function GlobalModal() {
   );
 }
 
+function LoadingEllipsis() {
+  const [dots, setDots] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setDots((d) => (d + 1) % 4), 400);
+    return () => clearInterval(id);
+  }, []);
+  return <>{".".repeat(dots)}</>;
+}
+
 function StatusText({
   publishAction,
   publishFeedback,
   buildState,
+  onDismiss,
 }: {
   publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
   buildState: "idle" | "building" | "ready" | "error";
+  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="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-base-content/60">Publishing<LoadingEllipsis /></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 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>
+    );
   }
   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 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>
+        Publish failed
+      </span>
+    );
   }
   if (publishFeedback) {
     return (
@@ -921,6 +944,7 @@ function EditorToolbar({
   onMediaClick,
   processingItems,
   buildState,
+  onBuildDismiss,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -934,6 +958,7 @@ function EditorToolbar({
   onMediaClick: () => void;
   processingItems: QueueItem[];
   buildState: "idle" | "building" | "ready" | "error";
+  onBuildDismiss: () => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode } = useEditorContext();
 
@@ -981,6 +1006,7 @@ function EditorToolbar({
               publishAction={publishAction}
               publishFeedback={publishFeedback}
               buildState={buildState}
+              onDismiss={onBuildDismiss}
             />
           </div>
           <div className="flex items-center justify-end gap-2">

package/src/hooks/useBuildStatus.ts

@@ -13,14 +13,17 @@ interface BuildStatusResult {
   state: BuildState;
   deployUrl: string | null;
   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 pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const clearRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isPolling = useRef(false);
 
   const stopPolling = useCallback(() => {
@@ -63,6 +66,9 @@ export function useBuildStatus(): BuildStatusResult {
 
       if (data.state === "ready" || data.state === "error") {
         stopPolling();
+        if (data.state === "ready") {
+          clearRef.current = setTimeout(() => setState("idle"), AUTO_CLEAR_DELAY);
+        }
       }
     },
     [stopPolling],
@@ -97,14 +103,22 @@ export function useBuildStatus(): BuildStatusResult {
     return () => {
       cancelled = true;
       stopPolling();
+      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);
     startPolling();
   }, [startPolling]);
 
-  return { state, deployUrl, startTracking };
+  const dismiss = useCallback(() => {
+    if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }
+    setState("idle");
+    stopPolling();
+  }, [stopPolling]);
+
+  return { state, deployUrl, startTracking, dismiss };
 }