@industry-theme/file-city-panel 0.3.14 → 0.3.16

package/dist/components/TourPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TourPlayer.d.ts","sourceRoot":"","sources":["../../src/components/TourPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAgBxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,IAAI,EAAE,gBAAgB,CAAC;IAEvB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEvE,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1E,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qIAAqI;IACrI,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAE3D,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,iEAAiE;IACjE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkhChD,CAAC"}
+{"version":3,"file":"TourPlayer.d.ts","sourceRoot":"","sources":["../../src/components/TourPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAgBxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,IAAI,EAAE,gBAAgB,CAAC;IAEvB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEvE,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1E,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qIAAqI;IACrI,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAE3D,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,iEAAiE;IACjE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwhChD,CAAC"}

package/dist/panels/components/FileCardList.d.ts

@@ -18,6 +18,10 @@ interface FileCardListProps {
     onFileClick?: (filePath: string) => void;
     /** Callback when a file card is hovered */
     onFileHover?: (filePath: string | null) => void;
+    /** Callback when stage button is clicked (only shows for unstaged files) */
+    onStageFile?: (filePath: string) => void;
+    /** File status map for determining if file can be staged */
+    fileStatusMap?: Map<string, string>;
     /** Empty state message */
     emptyMessage?: string;
     /** Horizontal padding for cards */

package/dist/panels/components/FileCardList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileCardList.d.ts","sourceRoot":"","sources":["../../../src/panels/components/FileCardList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,MAAM,WAAW,YAAY;IAC3B,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,iBAAiB;IACzB,+BAA+B;IAC/B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+OpD,CAAC"}
+{"version":3,"file":"FileCardList.d.ts","sourceRoot":"","sources":["../../../src/panels/components/FileCardList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,MAAM,WAAW,YAAY;IAC3B,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,iBAAiB;IACzB,+BAA+B;IAC/B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2CAA2C;IAC3C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,4EAA4E;IAC5E,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiRpD,CAAC"}

package/dist/panels/components/GitChangesCardList.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import type { GitStatusWithFiles } from '@principal-ai/repository-abstraction';
+import type { PanelActions } from '../../types';
 /** Git status category for selection callbacks */
 export type GitChangeSelectionStatus = 'staged' | 'unstaged' | 'untracked' | 'deleted';
+/** View mode for git changes */
+export type GitChangesViewMode = 'unstaged' | 'staged';
 interface GitChangesCardListProps {
     /** Git status data with categorized file paths */
     gitStatus: GitStatusWithFiles;
@@ -11,10 +14,13 @@ interface GitChangesCardListProps {
     onFileClick?: (filePath: string, status?: GitChangeSelectionStatus) => void;
     /** Callback when a file is hovered */
     onFileHover?: (filePath: string | null) => void;
+    /** Panel actions for git operations */
+    actions?: PanelActions;
 }
 /**
  * GitChangesCardList displays git changes as a flat list of file cards.
  * Each card shows the filename with a colored status badge (A, M, D, ??).
+ * Includes a toggle to switch between staged and unstaged views.
  */
 export declare const GitChangesCardList: React.FC<GitChangesCardListProps>;
 export {};

package/dist/panels/components/GitChangesCardList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GitChangesCardList.d.ts","sourceRoot":"","sources":["../../../src/panels/components/GitChangesCardList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,kDAAkD;AAClD,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC;AAkBvF,UAAU,uBAAuB;IAC/B,kDAAkD;IAClD,SAAS,EAAE,kBAAkB,CAAC;IAC9B,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC5E,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+EhE,CAAC"}
+{"version":3,"file":"GitChangesCardList.d.ts","sourceRoot":"","sources":["../../../src/panels/components/GitChangesCardList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,kDAAkD;AAClD,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvF,gCAAgC;AAChC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAkBvD,UAAU,uBAAuB;IAC/B,kDAAkD;IAClD,SAAS,EAAE,kBAAkB,CAAC;IAC9B,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC5E,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmKhE,CAAC"}

package/dist/panels.bundle.js

@@ -48258,12 +48258,15 @@ const FileCardList = ({
   files: files2,
   onFileClick,
   onFileHover,
+  onStageFile,
+  fileStatusMap,
   emptyMessage = "No files",
   horizontalPadding = "0px",
   showIcons = true
 }) => {
   const { theme: theme2 } = useTheme();
   const [copiedPath, setCopiedPath] = React.useState(null);
+  const [hoveredStageButton, setHoveredStageButton] = React.useState(null);
   const getFileName = useCallback((path) => {
     const parts = path.split("/");
     return parts[parts.length - 1] || path;
@@ -48449,6 +48452,37 @@ const FileCardList = ({
                   children: file.badge
                 }
               ),
+              onStageFile && fileStatusMap && fileStatusMap.get(file.path) !== "staged" && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onStageFile(file.path);
+                  },
+                  onMouseEnter: () => setHoveredStageButton(file.path),
+                  onMouseLeave: () => setHoveredStageButton(null),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[0],
+                    fontWeight: 500,
+                    color: hoveredStageButton === file.path ? "#22c55e" : theme2.colors.textSecondary,
+                    backgroundColor: hoveredStageButton === file.path ? "#22c55e20" : theme2.colors.background,
+                    padding: "4px 8px",
+                    borderRadius: "4px",
+                    border: `1px solid ${hoveredStageButton === file.path ? "#22c55e" : theme2.colors.border}`,
+                    cursor: "pointer",
+                    flexShrink: 0,
+                    transition: "all 0.15s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { size: 12 }),
+                    "Stage"
+                  ]
+                }
+              ),
               copiedPath === file.path && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -48493,9 +48527,11 @@ const GitChangesCardList = ({
   gitStatus,
   horizontalPadding = "0px",
   onFileClick,
-  onFileHover
+  onFileHover,
+  actions
 }) => {
   const { theme: theme2 } = useTheme();
+  const [viewMode, setViewMode] = useState("unstaged");
   const fileStatusMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     gitStatus.stagedFiles.forEach((f) => map.set(f, "staged"));
@@ -48518,18 +48554,25 @@ const GitChangesCardList = ({
         }
       });
     };
-    addFiles(gitStatus.stagedFiles, "staged");
-    addFiles(gitStatus.modifiedFiles, "unstaged");
-    addFiles(gitStatus.untrackedFiles, "untracked");
-    addFiles(gitStatus.deletedFiles, "deleted");
+    if (viewMode === "staged") {
+      addFiles(gitStatus.stagedFiles, "staged");
+    } else {
+      addFiles(gitStatus.modifiedFiles, "unstaged");
+      addFiles(gitStatus.untrackedFiles, "untracked");
+      addFiles(gitStatus.deletedFiles, "deleted");
+    }
     return items;
-  }, [gitStatus]);
+  }, [gitStatus, viewMode]);
   const handleFileClick = useCallback((filePath) => {
     const status = fileStatusMap.get(filePath);
     onFileClick == null ? void 0 : onFileClick(filePath, status);
   }, [fileStatusMap, onFileClick]);
-  const hasChanges = files2.length > 0;
-  if (!hasChanges) {
+  const handleStageFile = useCallback((filePath) => {
+    var _a;
+    (_a = actions == null ? void 0 : actions.stageFile) == null ? void 0 : _a.call(actions, filePath);
+  }, [actions]);
+  const totalChanges = gitStatus.stagedFiles.length + gitStatus.modifiedFiles.length + gitStatus.untrackedFiles.length + gitStatus.deletedFiles.length;
+  if (totalChanges === 0) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -48545,17 +48588,104 @@ const GitChangesCardList = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
-    FileCardList,
-    {
-      files: files2,
-      onFileClick: handleFileClick,
-      onFileHover,
-      horizontalPadding,
-      emptyMessage: "No changes detected",
-      showIcons: false
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: `0 ${horizontalPadding}`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontFamily: theme2.fonts.body,
+                fontSize: theme2.fontSizes[1],
+                fontWeight: 600,
+                color: theme2.colors.text
+              },
+              children: "Git Changes"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                backgroundColor: theme2.colors.background,
+                borderRadius: "6px",
+                border: `1px solid ${theme2.colors.border}`,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setViewMode("unstaged"),
+                    style: {
+                      fontFamily: theme2.fonts.body,
+                      fontSize: theme2.fontSizes[0],
+                      fontWeight: 500,
+                      padding: "4px 12px",
+                      border: "none",
+                      backgroundColor: viewMode === "unstaged" ? theme2.colors.backgroundLight : "transparent",
+                      color: viewMode === "unstaged" ? theme2.colors.text : theme2.colors.textSecondary,
+                      cursor: "pointer",
+                      transition: "all 0.15s ease"
+                    },
+                    children: [
+                      "Unstaged (",
+                      gitStatus.modifiedFiles.length + gitStatus.untrackedFiles.length + gitStatus.deletedFiles.length,
+                      ")"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setViewMode("staged"),
+                    style: {
+                      fontFamily: theme2.fonts.body,
+                      fontSize: theme2.fontSizes[0],
+                      fontWeight: 500,
+                      padding: "4px 12px",
+                      border: "none",
+                      backgroundColor: viewMode === "staged" ? theme2.colors.backgroundLight : "transparent",
+                      color: viewMode === "staged" ? theme2.colors.text : theme2.colors.textSecondary,
+                      cursor: "pointer",
+                      transition: "all 0.15s ease"
+                    },
+                    children: [
+                      "Staged (",
+                      gitStatus.stagedFiles.length,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FileCardList,
+      {
+        files: files2,
+        onFileClick: handleFileClick,
+        onFileHover,
+        onStageFile: viewMode === "unstaged" ? handleStageFile : void 0,
+        fileStatusMap,
+        horizontalPadding,
+        emptyMessage: viewMode === "unstaged" ? "No unstaged changes" : "No staged changes",
+        showIcons: false
+      }
+    )
+  ] });
 };
 const PR_STATUS_COLORS$1 = {
   added: "#22c55e",
@@ -51378,15 +51508,6 @@ const TourPlayer = ({
       setIsAudioPaused(false);
     }
   }, [currentStepIndex, isAutoPlaying]);
-  useEffect(() => {
-    if (!autoPlayAudio || !isPlaying || !audioUrls || !isAutoPlaying) return;
-    const audioUrl = audioUrls.get(currentStep.id);
-    if (!audioUrl) return;
-    const timer2 = setTimeout(() => {
-      playAudio(audioUrl);
-    }, 100);
-    return () => clearTimeout(timer2);
-  }, [currentStep == null ? void 0 : currentStep.id, isPlaying, audioUrls, autoPlayAudio, isAutoPlaying]);
   const playAudio = useCallback((audioUrl) => {
     if (audioElementRef.current) {
       audioElementRef.current.pause();
@@ -51476,6 +51597,15 @@ const TourPlayer = ({
       }
     }
   }, [isAutoPlaying, audioUrls, currentStep.id, stopAudio, playAudio]);
+  useEffect(() => {
+    if (!isAutoPlaying || !isPlaying || !audioUrls) return;
+    const audioUrl = audioUrls.get(currentStep.id);
+    if (!audioUrl) return;
+    const timer2 = setTimeout(() => {
+      playAudio(audioUrl);
+    }, 100);
+    return () => clearTimeout(timer2);
+  }, [currentStep == null ? void 0 : currentStep.id, isPlaying, audioUrls, isAutoPlaying, playAudio]);
   const formatTime = (seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
@@ -51870,10 +52000,11 @@ const TourPlayer = ({
               }
             ),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-              canAutoPlay && currentStepHasAudio && /* @__PURE__ */ jsxs(
+              hasAudio && /* @__PURE__ */ jsxs(
                 "button",
                 {
                   onClick: toggleAutoPlay,
+                  disabled: !currentStepHasAudio,
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -51885,14 +52016,19 @@ const TourPlayer = ({
                     borderRadius: "6px",
                     fontSize: theme2.fontSizes[1],
                     fontFamily: theme2.fonts.body,
-                    cursor: "pointer",
+                    cursor: currentStepHasAudio ? "pointer" : "not-allowed",
+                    opacity: currentStepHasAudio ? 1 : 0.5,
                     transition: "all 0.2s"
                   },
                   onMouseEnter: (e) => {
-                    e.currentTarget.style.opacity = "0.8";
+                    if (currentStepHasAudio) {
+                      e.currentTarget.style.opacity = "0.8";
+                    }
                   },
                   onMouseLeave: (e) => {
-                    e.currentTarget.style.opacity = "1";
+                    if (currentStepHasAudio) {
+                      e.currentTarget.style.opacity = "1";
+                    }
                   },
                   children: [
                     isAutoPlaying ? /* @__PURE__ */ jsx(Pause, { size: 14 }) : /* @__PURE__ */ jsx(Play, { size: 14 }),