@drawnagency/primitives 0.1.22 → 0.1.24

package/dist/hooks/useBuildStatus.d.ts

@@ -1,4 +1,4 @@
-type BuildState = "idle" | "building" | "ready" | "error";
+type BuildState = "idle" | "building" | "ready" | "error" | "fading";
 interface BuildStatusResult {
     state: BuildState;
     deployUrl: string | null;

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,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAKD,wBAAgB,cAAc,IAAI,iBAAiB,CAsHlD"}
+{"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,GAAG,QAAQ,CAAC;AASrE,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;AAMD,wBAAgB,cAAc,IAAI,iBAAiB,CAyHlD"}

package/package.json

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

package/src/components/shell/EditorShell.tsx

@@ -890,8 +890,8 @@ function formatElapsed(seconds: number): string {
 
 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 type="button" onClick={onClick} className="cursor-pointer" aria-label="Dismiss">
+      <X size={12} className="text-base-content/30 hover:text-base-content/60" />
     </button>
   );
 }
@@ -905,7 +905,7 @@ function StatusText({
 }: {
   publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
-  buildState: "idle" | "building" | "ready" | "error";
+  buildState: "idle" | "building" | "ready" | "error" | "fading";
   buildElapsed: number;
   onDismiss: () => void;
 }) {
@@ -923,9 +923,12 @@ function StatusText({
       </span>
     );
   }
-  if (buildState === "ready") {
+  if (buildState === "ready" || buildState === "fading") {
     return (
-      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-green-600">
+      <span className={cn(
+        "inline-flex items-center gap-1.5 text-xs font-medium text-green-600 transition-opacity duration-1000",
+        buildState === "fading" ? "opacity-0" : "opacity-100",
+      )}>
         Published in {formatElapsed(buildElapsed)}
         <DismissButton onClick={onDismiss} />
       </span>
@@ -979,7 +982,7 @@ function EditorToolbar({
   onSettingsClick: () => void;
   onMediaClick: () => void;
   processingItems: QueueItem[];
-  buildState: "idle" | "building" | "ready" | "error";
+  buildState: "idle" | "building" | "ready" | "error" | "fading";
   buildElapsed: number;
   onBuildDismiss: () => void;
 }) {

package/src/hooks/useBuildStatus.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 
-type BuildState = "idle" | "building" | "ready" | "error";
+type BuildState = "idle" | "building" | "ready" | "error" | "fading";
 
 interface BuildStatusResponse {
   state: "building" | "ready" | "error";
@@ -18,7 +18,8 @@ interface BuildStatusResult {
 }
 
 const POLL_INTERVAL = 5000;
-const AUTO_CLEAR_DELAY = 5000;
+const AUTO_CLEAR_DELAY = 10000;
+const FADE_DURATION = 1000;
 
 export function useBuildStatus(): BuildStatusResult {
   const [state, setState] = useState<BuildState>("idle");
@@ -81,7 +82,10 @@ export function useBuildStatus(): BuildStatusResult {
         stopPolling();
         stopTimer();
         if (data.state === "ready") {
-          clearRef.current = setTimeout(() => setState("idle"), AUTO_CLEAR_DELAY);
+          clearRef.current = setTimeout(() => {
+            setState("fading");
+            clearRef.current = setTimeout(() => setState("idle"), FADE_DURATION);
+          }, AUTO_CLEAR_DELAY);
         }
       }
     },