@ash-cloud/ash-ui 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -1930,6 +1930,203 @@ function TodoPanel({
     }
   );
 }
+function EnvVarsPanel({
+  envVars,
+  onChange,
+  defaultCollapsed = true,
+  className,
+  label = "Environment Variables",
+  helperText = "These environment variables will be available in the sandbox for new sessions."
+}) {
+  const [expanded, setExpanded] = react.useState(!defaultCollapsed);
+  const [newEnvKey, setNewEnvKey] = react.useState("");
+  const [newEnvValue, setNewEnvValue] = react.useState("");
+  const hasEnvVars = Object.keys(envVars).length > 0;
+  const handleAddEnvVar = react.useCallback(() => {
+    const key = newEnvKey.trim();
+    const val = newEnvValue.trim();
+    if (key) {
+      onChange({ ...envVars, [key]: val });
+      setNewEnvKey("");
+      setNewEnvValue("");
+    }
+  }, [envVars, newEnvKey, newEnvValue, onChange]);
+  const handleRemoveEnvVar = react.useCallback(
+    (key) => {
+      const newEnvVars = { ...envVars };
+      delete newEnvVars[key];
+      onChange(newEnvVars);
+    },
+    [envVars, onChange]
+  );
+  const handleEnvKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleAddEnvVar();
+      }
+    },
+    [handleAddEnvVar]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ash-env-vars-panel", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "ash-env-vars-header",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: cn("ash-env-vars-chevron", expanded && "ash-env-vars-chevron-expanded"),
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-label", children: label }),
+          hasEnvVars && !expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-badge", children: Object.keys(envVars).length })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-content", children: [
+      Object.entries(envVars).map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-key", children: key }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-value", children: val || "(empty)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveEnvVar(key),
+            className: "ash-env-vars-remove",
+            title: "Remove variable",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "w-4 h-4",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }, key)),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-env-vars-add", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvKey,
+            onChange: (e) => setNewEnvKey(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "")),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "KEY",
+            className: "ash-env-vars-input ash-env-vars-input-key"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvValue,
+            onChange: (e) => setNewEnvValue(e.target.value),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "value",
+            className: "ash-env-vars-input ash-env-vars-input-value"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleAddEnvVar,
+            disabled: !newEnvKey.trim(),
+            className: "ash-env-vars-add-button",
+            children: "Add"
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ash-env-vars-helper", children: helperText })
+    ] })
+  ] });
+}
+function DisplayModeToggle({
+  className,
+  showLabel = true,
+  labels = { inline: "Inline", compact: "Compact" }
+}) {
+  const { config, toggleMode } = useDisplayMode();
+  const isInline = config.mode === "inline";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggleMode,
+      className: cn("ash-display-mode-toggle", className),
+      title: isInline ? "Switch to compact mode" : "Switch to inline mode",
+      children: isInline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+              }
+            )
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: labels.inline })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
+              }
+            )
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: labels.compact })
+      ] })
+    }
+  );
+}
 var DEFAULT_WORDS = [
   "Thinking",
   "Reasoning",
@@ -2559,7 +2756,9 @@ exports.CompactToolStatusLine = CompactToolStatusLine;
 exports.CopyIcon = CopyIcon;
 exports.DEFAULT_DISPLAY_CONFIG = DEFAULT_DISPLAY_CONFIG;
 exports.DisplayModeProvider = DisplayModeProvider;
+exports.DisplayModeToggle = DisplayModeToggle;
 exports.EditIcon = EditIcon;
+exports.EnvVarsPanel = EnvVarsPanel;
 exports.ErrorMessage = ErrorMessage;
 exports.FileIcon = FileIcon;
 exports.FilePlusIcon = FilePlusIcon;