@nice-code/action 0.3.0 → 0.3.2

package/build/devtools/browser/index.js

@@ -2074,7 +2074,7 @@ import { useMemo, useState as useState7 } from "react";
 function getSizeValue(size) {
   switch (size) {
     case "sm" /* sm */:
-      return 0.8;
+      return 0.75;
     case "md" /* md */:
       return 1;
     case "lg" /* lg */:
@@ -3295,8 +3295,7 @@ function Chip({
   size = "md" /* md */,
   rounded = false,
   tooltip,
-  children,
-  style
+  children
 }) {
   const [anchor, setAnchor] = useState3(null);
   const hasTooltip = tooltip != null;
@@ -3320,8 +3319,7 @@ function Chip({
           borderRadius: rounded ? "0.6rem" : "3px",
           flexShrink: 0,
           whiteSpace: "nowrap",
-          cursor: hasTooltip ? "default" : undefined,
-          ...style
+          cursor: hasTooltip ? "default" : undefined
         },
         children
       }, undefined, false, undefined, this),
@@ -3336,12 +3334,7 @@ function Chip({
 // src/devtools/browser/components/Icon.tsx
 import { useState as useState4 } from "react";
 import { jsxDEV as jsxDEV8, Fragment as Fragment3 } from "react/jsx-dev-runtime";
-var ICON_SIZE_EM = {
-  ["sm" /* sm */]: 1,
-  ["md" /* md */]: 1.2,
-  ["lg" /* lg */]: 1.6
-};
-var BASE_ICON_SIDE_LENGTH_EM = 1.5;
+var BASE_ICON_SIDE_LENGTH_EM = 1.6;
 var ICON_GAP_EM = 0.3;
 function Icon({
   icon: IconComponent,
@@ -3349,7 +3342,8 @@ function Icon({
   size = "md" /* md */,
   subtle = false,
   tooltip,
-  style
+  style,
+  noBackground = false
 }) {
   const [anchor, setAnchor] = useState4(null);
   const hasTooltip = tooltip != null;
@@ -3371,7 +3365,7 @@ function Icon({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "rgba(0,0,0,0.4)",
+          background: noBackground ? "none" : "rgba(0,0,0,0.4)",
           color: resolvedColor,
           flexShrink: 0,
           cursor: hasTooltip ? "default" : undefined,
@@ -3381,7 +3375,7 @@ function Icon({
           style: { display: "flex", alignItems: "center", gap: `${ICON_GAP_EM}em` },
           children: finalIcons.map((Comp, i) => /* @__PURE__ */ jsxDEV8(Comp, {
             size: iconSideLengthEm,
-            strokeWidth: 2.3
+            strokeWidth: 2.6
           }, `${Comp.name}-${i}`, false, undefined, this))
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
@@ -4214,11 +4208,11 @@ function ActionDetailPanel({
 import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2 } from "react";
 
 // src/devtools/browser/components/action_list/ActionEntryRow.tsx
-import { Box as Box2, CircleX as CircleX3, Variable as Variable2 } from "lucide-react";
+import { CircleX as CircleX3, PackageCheck as PackageCheck2, Variable as Variable2 } from "lucide-react";
 import { Fragment as Fragment8, useState as useState8 } from "react";
 
 // src/devtools/browser/components/action_list/ActionInputAndOutputChip.tsx
-import { Box, CircleX as CircleX2, Sprout, Variable } from "lucide-react";
+import { CircleX as CircleX2, PackageCheck, Sparkle, Variable } from "lucide-react";
 
 // src/devtools/browser/components/action_list/IoTooltipContent.tsx
 import { jsxDEV as jsxDEV17, Fragment as Fragment7 } from "react/jsx-dev-runtime";
@@ -4300,7 +4294,7 @@ var ActionInputAndOutputChip = ({
   entry,
   breakReasons,
   subtle,
-  size
+  size = "md" /* md */
 }) => {
   const firstHop = entry.meta.routing[0];
   const localEnvId = firstHop != null ? firstHop.runtime.envId : null;
@@ -4311,6 +4305,22 @@ var ActionInputAndOutputChip = ({
   const isNewInput = breakReasons.includes("new_input" /* new_input */);
   const isNewOutput = breakReasons.includes("new_output" /* new_output */);
   const hasError = entry.error != null || entry.abortReason != null;
+  const sizeNum = getSizeValue(size);
+  const newIconSizeEm = `${sizeNum * 0.9}em`;
+  const label = `${(isLocal ? localEnvId : externalLabel) ?? "unknown"}`;
+  const newSparkleComp = /* @__PURE__ */ jsxDEV18("div", {
+    style: {
+      opacity: 0.9,
+      alignSelf: "start",
+      marginLeft: "-0.6em"
+    },
+    children: /* @__PURE__ */ jsxDEV18(Sparkle, {
+      strokeWidth: "0.2em",
+      color: "rgba(243, 250, 140, 1)",
+      width: newIconSizeEm,
+      height: newIconSizeEm
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
   return /* @__PURE__ */ jsxDEV18(Chip, {
     color,
     size,
@@ -4319,7 +4329,8 @@ var ActionInputAndOutputChip = ({
       style: { display: "flex", alignItems: "center", gap: "0.4em" },
       children: [
         /* @__PURE__ */ jsxDEV18(Icon, {
-          icon: isNewInput ? [Sprout, Variable] : Variable,
+          noBackground: true,
+          icon: Variable,
           color,
           subtle: subtle || entry.input === undefined,
           tooltip: {
@@ -4332,9 +4343,24 @@ var ActionInputAndOutputChip = ({
             title: isNewInput ? "New Input" : "Input"
           }
         }, undefined, false, undefined, this),
-        isLocal ? localEnvId : externalLabel,
+        isNewInput && newSparkleComp,
+        /* @__PURE__ */ jsxDEV18("span", {
+          style: { opacity: 0.6 },
+          color,
+          children: "→"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV18("span", {
+          style: { opacity: 0.8 },
+          children: label
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV18("span", {
+          style: { opacity: 0.6 },
+          color,
+          children: "→"
+        }, undefined, false, undefined, this),
         entry.status === "success" && entry.output !== undefined && /* @__PURE__ */ jsxDEV18(Icon, {
-          icon: isNewOutput ? [Sprout, Box] : Box,
+          noBackground: true,
+          icon: PackageCheck,
           color: !hasError ? color : "default" /* default */,
           tooltip: {
             content: /* @__PURE__ */ jsxDEV18(IoTooltipContent, {
@@ -4344,6 +4370,7 @@ var ActionInputAndOutputChip = ({
           }
         }, undefined, false, undefined, this),
         (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV18(Icon, {
+          noBackground: true,
           icon: CircleX2,
           color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
           tooltip: {
@@ -4354,7 +4381,8 @@ var ActionInputAndOutputChip = ({
             title: entry.status === "aborted" ? "Aborted" : "Error",
             maxWidth: 340
           }
-        }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        isNewOutput && newSparkleComp
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
@@ -4615,7 +4643,7 @@ function ActionEntryRow({
               }, undefined, false, undefined, this),
               child.status === "success" && child.output !== undefined && /* @__PURE__ */ jsxDEV19(Icon, {
                 size: "sm" /* sm */,
-                icon: Box2,
+                icon: PackageCheck2,
                 color: "io_output" /* io_output */,
                 subtle: true,
                 tooltip: {
@@ -4633,6 +4661,7 @@ function ActionEntryRow({
             children: reason
           }, reason, false, undefined, this)),
           (childEntries?.length ?? 0) > 0 && (entry.error != null || entry.abortReason != null) && /* @__PURE__ */ jsxDEV19(Icon, {
+            size: "sm" /* sm */,
             icon: CircleX3,
             color: entry.status === "aborted" ? "aborted" /* aborted */ : "error" /* error */,
             subtle: true,
@@ -4748,41 +4777,47 @@ function ActionList({
   return /* @__PURE__ */ jsxDEV20("div", {
     ref: containerRef,
     style,
-    children: flatItems.map((item) => {
-      const key = getFlatItemKey(item);
-      const { group } = item;
-      return /* @__PURE__ */ jsxDEV20("div", {
-        style: {
-          borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
-          position: "relative",
-          overflow: "hidden"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV20("div", {
-            style: {
-              position: "absolute",
-              inset: 0,
-              pointerEvents: "none",
-              background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
-              animation: "__nice-action-shine 0.65s ease-out forwards"
-            }
-          }, group.representative.cuid, false, undefined, this),
-          /* @__PURE__ */ jsxDEV20(ActionEntryRow, {
-            entry: group.representative,
-            isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
-            isLatest: item.groupIndex === 0,
-            latestTime,
-            childEntries: getGroupChildEntries(group, childEntriesMap),
-            breakReasons: item.breakReasons,
-            groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
-            selectedGroupCuid: selectedCuid,
-            onSelectGroupEntry: (cuid) => onSubClick(cuid, selectedCuid === cuid),
-            onClick: () => onGroupClick(group)
-          }, undefined, false, undefined, this)
-        ]
-      }, key, true, undefined, this);
-    })
-  }, undefined, false, undefined, this);
+    children: [
+      flatItems.map((item) => {
+        const key = getFlatItemKey(item);
+        const { group } = item;
+        return /* @__PURE__ */ jsxDEV20("div", {
+          style: {
+            borderBottom: `1px solid ${DEVTOOL_LIST_GROUP_DIVIDER}`,
+            position: "relative",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV20("div", {
+              style: {
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                background: "linear-gradient(90deg, transparent 0%, rgba(148, 210, 255, 0.13) 50%, transparent 100%)",
+                animation: "__nice-action-shine 0.65s ease-out forwards"
+              }
+            }, group.representative.cuid, false, undefined, this),
+            /* @__PURE__ */ jsxDEV20(ActionEntryRow, {
+              entry: group.representative,
+              isSelected: selectedCuid === group.representative.cuid || group.rest.some((e) => e.cuid === selectedCuid),
+              isLatest: item.groupIndex === 0,
+              latestTime,
+              childEntries: getGroupChildEntries(group, childEntriesMap),
+              breakReasons: item.breakReasons,
+              groupEntries: group.rest.length > 0 ? [group.representative, ...group.rest] : undefined,
+              selectedGroupCuid: selectedCuid,
+              onSelectGroupEntry: (cuid) => onSubClick(cuid, selectedCuid === cuid),
+              onClick: () => onGroupClick(group)
+            }, undefined, false, undefined, this)
+          ]
+        }, key, true, undefined, this);
+      }),
+      /* @__PURE__ */ jsxDEV20("div", {
+        style: { padding: "24px", textAlign: "center", color: DEVTOOL_COLOR_TEXT_MUTED },
+        children: "Start of action history"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 
 // src/devtools/browser/components/PanelChrome.tsx

package/build/types/devtools/browser/components/Chip.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { type ESemanticThing } from "../../core/devtools_colors";
 import { ESize } from "../ui_util/size";
 import { type ITooltipConfig } from "./Tooltip";
@@ -17,7 +17,6 @@ interface IChipProps {
     rounded?: boolean;
     tooltip?: ITooltipConfig;
     children: ReactNode;
-    style?: CSSProperties;
 }
-export declare function Chip({ color, subtle, size, rounded, tooltip, children, style, }: IChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ color, subtle, size, rounded, tooltip, children, }: IChipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/types/devtools/browser/components/Icon.d.ts

@@ -10,6 +10,7 @@ interface IIconProps {
     subtle?: boolean;
     tooltip?: ITooltipConfig;
     style?: CSSProperties;
+    noBackground?: boolean;
 }
-export declare function Icon({ icon: IconComponent, color, size, subtle, tooltip, style, }: IIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ icon: IconComponent, color, size, subtle, tooltip, style, noBackground, }: IIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice-code/action",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": false,
   "type": "module",
   "exports": {
@@ -44,9 +44,9 @@
     "build-types": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "@nice-code/common-errors": "0.3.0",
-    "@nice-code/error": "0.3.0",
-    "@nice-code/util": "0.3.0",
+    "@nice-code/common-errors": "0.3.2",
+    "@nice-code/error": "0.3.2",
+    "@nice-code/util": "0.3.2",
     "@standard-schema/spec": "^1.1.0",
     "@tanstack/react-virtual": "^3.13.26",
     "http-status-codes": "^2.3.0",