@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/data/ai/SpecRuntimeEditor/EnvironmentSection.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SecretKeySelector } from "../../../components/SecretKeySelector.js";
+import { Icon } from "../../Icon.js";
+import { envVarFromSecretValue, secretValueFromEnvVar } from "./env-model.js";
+import { ListField, SpecButton, SpecInput } from "./fields.js";
+import { withSetup } from "./update.js";
+import { IconButton } from "../../../components/IconButton.js";
+import { UiFileText } from "../../../icons/components/UiFileText.js";
+import { UiAdd } from "../../../icons/components/UiAdd.js";
+import { UiBraces } from "../../../icons/components/UiBraces.js";
+import { UiKey } from "../../../icons/components/UiKey.js";
+import { UiTrash } from "../../../icons/components/UiTrash.js";
+function EnvironmentSection({
+  value,
+  onChange,
+  secretSelector
+}) {
+  var _a;
+  return /* @__PURE__ */ jsx(
+    EnvVarRows,
+    {
+      value: (_a = value.setup) == null ? void 0 : _a.envVars,
+      onChange: (envVars) => onChange(withSetup(value, { envVars })),
+      secretSelector
+    }
+  );
+}
+function EnvironmentAdvanced({
+  value,
+  onChange
+}) {
+  var _a;
+  return /* @__PURE__ */ jsx(
+    ListField,
+    {
+      label: "Dotenv files",
+      value: (_a = value.setup) == null ? void 0 : _a.dotenv,
+      onChange: (dotenv) => onChange(withSetup(value, { dotenv })),
+      placeholder: ".env",
+      icon: UiFileText
+    }
+  );
+}
+function EnvVarRows({
+  value,
+  onChange,
+  secretSelector
+}) {
+  const rows = value && value.length > 0 ? value : [{ name: "", value: "" }];
+  const updateRow = (index, patch) => {
+    onChange(
+      rows.map(
+        (row, rowIndex) => rowIndex === index ? { ...row, ...patch } : row
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-density-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Environment variables" }),
+      /* @__PURE__ */ jsxs(
+        SpecButton,
+        {
+          onClick: () => onChange([...rows, { name: "", value: "" }]),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "size-3.5" }),
+            "Add"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(6rem,1fr)_minmax(0,1fr)_auto] gap-density-2 border-b border-border bg-muted/40 px-density-2 py-density-1 text-[10px] font-semibold uppercase text-muted-foreground md:grid-cols-[minmax(8rem,12rem)_minmax(0,1fr)_auto]", children: [
+        /* @__PURE__ */ jsx("span", { children: "Name" }),
+        /* @__PURE__ */ jsx("span", { children: "Value" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: rows.map((row, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid gap-density-2 px-density-1 py-density-1 md:grid-cols-[minmax(8rem,12rem)_minmax(0,1fr)_auto]",
+          children: [
+            /* @__PURE__ */ jsx(
+              SpecInput,
+              {
+                value: row.name,
+                onChange: (name) => updateRow(index, { name }),
+                ariaLabel: "Environment variable name",
+                icon: UiBraces,
+                mono: true
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0", children: secretSelector ? /* @__PURE__ */ jsx(
+              SecretKeySelector,
+              {
+                value: secretValueFromEnvVar(row),
+                onChange: (next) => onChange(
+                  rows.map(
+                    (current, rowIndex) => rowIndex === index ? envVarFromSecretValue(current.name ?? "", next) : current
+                  )
+                ),
+                loadResources: secretSelector.loadResources,
+                loadKeyPreview: secretSelector.loadKeyPreview,
+                ...secretSelector.allowLiteral !== void 0 ? { allowLiteral: secretSelector.allowLiteral } : {},
+                ...secretSelector.strict !== void 0 ? { strict: secretSelector.strict } : {},
+                className: "min-w-0 flex-wrap text-xs"
+              }
+            ) : /* @__PURE__ */ jsx(
+              SpecInput,
+              {
+                value: typeof row.valueFrom === "string" ? row.valueFrom : row.value,
+                onChange: (next) => updateRow(index, { value: next, valueFrom: "" }),
+                placeholder: "secret://name/key",
+                ariaLabel: "Environment variable value",
+                icon: UiKey,
+                mono: true
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: UiTrash,
+                label: "Remove",
+                onClick: () => onChange(rows.filter((_, rowIndex) => rowIndex !== index))
+              }
+            ) })
+          ]
+        },
+        index
+      )) })
+    ] })
+  ] });
+}
+export {
+  EnvironmentAdvanced,
+  EnvironmentSection
+};
+//# sourceMappingURL=EnvironmentSection.js.map

package/dist/data/ai/SpecRuntimeEditor/EnvironmentSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentSection.js","sources":["../../../../src/data/ai/SpecRuntimeEditor/EnvironmentSection.tsx"],"sourcesContent":["import { SecretKeySelector } from \"../../../components/SecretKeySelector\";\nimport { Icon } from \"../../Icon\";\nimport { UiAdd, UiBraces, UiFileText, UiKey, UiTrash } from \"../../../icons\";\nimport type {\n  AISpecRuntimeEnvVar,\n  AISpecRuntimeValue,\n} from \"../SpecRuntimeEditor.model\";\nimport { envVarFromSecretValue, secretValueFromEnvVar } from \"./env-model\";\nimport { ListField, SpecButton, SpecInput } from \"./fields\";\nimport { withSetup } from \"./update\";\nimport type { SpecRuntimeSecretSelectorConfig } from \"./types\";\nimport { IconButton } from \"../../../components\";\n\nexport function EnvironmentSection({\n  value,\n  onChange,\n  secretSelector,\n}: {\n  value: AISpecRuntimeValue;\n  onChange: (value: AISpecRuntimeValue) => void;\n  secretSelector?: SpecRuntimeSecretSelectorConfig | undefined;\n}) {\n  return (\n    <EnvVarRows\n      value={value.setup?.envVars}\n      onChange={(envVars) => onChange(withSetup(value, { envVars }))}\n      secretSelector={secretSelector}\n    />\n  );\n}\n\nexport function EnvironmentAdvanced({\n  value,\n  onChange,\n}: {\n  value: AISpecRuntimeValue;\n  onChange: (value: AISpecRuntimeValue) => void;\n}) {\n  return (\n    <ListField\n      label=\"Dotenv files\"\n      value={value.setup?.dotenv}\n      onChange={(dotenv) => onChange(withSetup(value, { dotenv }))}\n      placeholder=\".env\"\n      icon={UiFileText}\n    />\n  );\n}\n\nfunction EnvVarRows({\n  value,\n  onChange,\n  secretSelector,\n}: {\n  value?: AISpecRuntimeEnvVar[] | undefined;\n  onChange: (value: AISpecRuntimeEnvVar[]) => void;\n  secretSelector?: SpecRuntimeSecretSelectorConfig | undefined;\n}) {\n  const rows = value && value.length > 0 ? value : [{ name: \"\", value: \"\" }];\n  const updateRow = (index: number, patch: AISpecRuntimeEnvVar) => {\n    onChange(\n      rows.map((row, rowIndex) =>\n        rowIndex === index ? { ...row, ...patch } : row,\n      ),\n    );\n  };\n  return (\n    <div className=\"space-y-density-2\">\n      <div className=\"flex items-center justify-between gap-density-2\">\n        <div className=\"text-xs font-medium text-muted-foreground\">\n          Environment variables\n        </div>\n        <SpecButton\n          onClick={() => onChange([...rows, { name: \"\", value: \"\" }])}\n        >\n          <Icon icon={UiAdd} className=\"size-3.5\" />\n          Add\n        </SpecButton>\n      </div>\n      <div className=\"overflow-hidden rounded-md border border-border\">\n        <div className=\"grid grid-cols-[minmax(6rem,1fr)_minmax(0,1fr)_auto] gap-density-2 border-b border-border bg-muted/40 px-density-2 py-density-1 text-[10px] font-semibold uppercase text-muted-foreground md:grid-cols-[minmax(8rem,12rem)_minmax(0,1fr)_auto]\">\n          <span>Name</span>\n          <span>Value</span>\n          <span className=\"sr-only\">Actions</span>\n        </div>\n        <div className=\"divide-y divide-border\">\n          {rows.map((row, index) => (\n            <div\n              key={index}\n              className=\"grid gap-density-2 px-density-1 py-density-1 md:grid-cols-[minmax(8rem,12rem)_minmax(0,1fr)_auto]\"\n            >\n              <SpecInput\n                value={row.name}\n                onChange={(name) => updateRow(index, { name })}\n                ariaLabel=\"Environment variable name\"\n                icon={UiBraces}\n                mono\n              />\n              <div className=\"min-w-0\">\n                {secretSelector ? (\n                  <SecretKeySelector\n                    value={secretValueFromEnvVar(row)}\n                    onChange={(next) =>\n                      onChange(\n                        rows.map((current, rowIndex) =>\n                          rowIndex === index\n                            ? envVarFromSecretValue(current.name ?? \"\", next)\n                            : current,\n                        ),\n                      )\n                    }\n                    loadResources={secretSelector.loadResources}\n                    loadKeyPreview={secretSelector.loadKeyPreview}\n                    {...(secretSelector.allowLiteral !== undefined\n                      ? { allowLiteral: secretSelector.allowLiteral }\n                      : {})}\n                    {...(secretSelector.strict !== undefined\n                      ? { strict: secretSelector.strict }\n                      : {})}\n                    className=\"min-w-0 flex-wrap text-xs\"\n                  />\n                ) : (\n                  <SpecInput\n                    value={\n                      typeof row.valueFrom === \"string\"\n                        ? row.valueFrom\n                        : row.value\n                    }\n                    onChange={(next) =>\n                      updateRow(index, { value: next, valueFrom: \"\" })\n                    }\n                    placeholder=\"secret://name/key\"\n                    ariaLabel=\"Environment variable value\"\n                    icon={UiKey}\n                    mono\n                  />\n                )}\n              </div>\n              <div className=\"flex items-center\">\n                <IconButton\n                  icon={UiTrash}\n                  label=\"Remove\"\n                  onClick={() =>\n                    onChange(rows.filter((_, rowIndex) => rowIndex !== index))\n                  }\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ai/SpecRuntimeEditor/Footer.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const button = require("../../../components/button.cjs");
+const Icon = require("../../Icon.cjs");
+const UiCheck = require("../../../icons/components/UiCheck.cjs");
+const UiPlay = require("../../../icons/components/UiPlay.cjs");
+function Footer({
+  status,
+  saveLabel,
+  onSave,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky bottom-0 z-10 flex items-center justify-between gap-density-3 border-t border-border bg-background/90 px-density-4 py-density-2 backdrop-blur", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700 dark:text-emerald-300", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "size-4" }),
+      status
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2", children: [
+      onCancel && /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "sm", variant: "outline", onClick: onCancel, children: "Cancel" }),
+      onSave && /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { size: "sm", onClick: onSave, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiPlay.UiPlay, className: "size-4" }),
+        saveLabel
+      ] })
+    ] })
+  ] });
+}
+exports.Footer = Footer;
+//# sourceMappingURL=Footer.cjs.map

package/dist/data/ai/SpecRuntimeEditor/Footer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.cjs","sources":["../../../../src/data/ai/SpecRuntimeEditor/Footer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Button } from \"../../../components/button\";\nimport { Icon } from \"../../Icon\";\nimport { UiCheck, UiPlay } from \"../../../icons\";\n\n// Sticky action bar (design .footer). Rendered by the shell only when the\n// host wires onSave/onCancel.\nexport function Footer({\n  status,\n  saveLabel,\n  onSave,\n  onCancel,\n}: {\n  status: ReactNode;\n  saveLabel: string;\n  onSave?: (() => void) | undefined;\n  onCancel?: (() => void) | undefined;\n}) {\n  return (\n    <div className=\"sticky bottom-0 z-10 flex items-center justify-between gap-density-3 border-t border-border bg-background/90 px-density-4 py-density-2 backdrop-blur\">\n      <span className=\"inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700 dark:text-emerald-300\">\n        <Icon icon={UiCheck} className=\"size-4\" />\n        {status}\n      </span>\n      <div className=\"flex items-center gap-density-2\">\n        {onCancel && (\n          <Button size=\"sm\" variant=\"outline\" onClick={onCancel}>\n            Cancel\n          </Button>\n        )}\n        {onSave && (\n          <Button size=\"sm\" onClick={onSave}>\n            <Icon icon={UiPlay} className=\"size-4\" />\n            {saveLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","Icon","UiCheck","Button","UiPlay"],"mappings":";;;;;;;AAOO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,wJACb,UAAA;AAAA,IAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,iGACd,UAAA;AAAA,MAAAC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAMC,QAAAA,SAAS,WAAU,UAAS;AAAA,MACvC;AAAA,IAAA,GACH;AAAA,IACAH,2BAAAA,KAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,MAAA,YACCC,2BAAAA,IAACG,iBAAO,MAAK,MAAK,SAAQ,WAAU,SAAS,UAAU,UAAA,SAAA,CAEvD;AAAA,MAED,UACCJ,2BAAAA,KAACI,OAAAA,QAAA,EAAO,MAAK,MAAK,SAAS,QACzB,UAAA;AAAA,QAAAH,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAMG,OAAAA,QAAQ,WAAU,UAAS;AAAA,QACtC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/data/ai/SpecRuntimeEditor/Footer.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare function Footer({ status, saveLabel, onSave, onCancel, }: {
+    status: ReactNode;
+    saveLabel: string;
+    onSave?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

package/dist/data/ai/SpecRuntimeEditor/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/data/ai/SpecRuntimeEditor/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACrC,2CAsBA"}

package/dist/data/ai/SpecRuntimeEditor/Footer.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "../../../components/button.js";
+import { Icon } from "../../Icon.js";
+import { UiCheck } from "../../../icons/components/UiCheck.js";
+import { UiPlay } from "../../../icons/components/UiPlay.js";
+function Footer({
+  status,
+  saveLabel,
+  onSave,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-10 flex items-center justify-between gap-density-3 border-t border-border bg-background/90 px-density-4 py-density-2 backdrop-blur", children: [
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700 dark:text-emerald-300", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "size-4" }),
+      status
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-density-2", children: [
+      onCancel && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: onCancel, children: "Cancel" }),
+      onSave && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onSave, children: [
+        /* @__PURE__ */ jsx(Icon, { icon: UiPlay, className: "size-4" }),
+        saveLabel
+      ] })
+    ] })
+  ] });
+}
+export {
+  Footer
+};
+//# sourceMappingURL=Footer.js.map

package/dist/data/ai/SpecRuntimeEditor/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../../src/data/ai/SpecRuntimeEditor/Footer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Button } from \"../../../components/button\";\nimport { Icon } from \"../../Icon\";\nimport { UiCheck, UiPlay } from \"../../../icons\";\n\n// Sticky action bar (design .footer). Rendered by the shell only when the\n// host wires onSave/onCancel.\nexport function Footer({\n  status,\n  saveLabel,\n  onSave,\n  onCancel,\n}: {\n  status: ReactNode;\n  saveLabel: string;\n  onSave?: (() => void) | undefined;\n  onCancel?: (() => void) | undefined;\n}) {\n  return (\n    <div className=\"sticky bottom-0 z-10 flex items-center justify-between gap-density-3 border-t border-border bg-background/90 px-density-4 py-density-2 backdrop-blur\">\n      <span className=\"inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700 dark:text-emerald-300\">\n        <Icon icon={UiCheck} className=\"size-4\" />\n        {status}\n      </span>\n      <div className=\"flex items-center gap-density-2\">\n        {onCancel && (\n          <Button size=\"sm\" variant=\"outline\" onClick={onCancel}>\n            Cancel\n          </Button>\n        )}\n        {onSave && (\n          <Button size=\"sm\" onClick={onSave}>\n            <Icon icon={UiPlay} className=\"size-4\" />\n            {saveLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAOO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,qBAAC,OAAA,EAAI,WAAU,wJACb,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,iGACd,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAS;AAAA,MACvC;AAAA,IAAA,GACH;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,MAAA,YACC,oBAAC,UAAO,MAAK,MAAK,SAAQ,WAAU,SAAS,UAAU,UAAA,SAAA,CAEvD;AAAA,MAED,UACC,qBAAC,QAAA,EAAO,MAAK,MAAK,SAAS,QACzB,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAM,QAAQ,WAAU,UAAS;AAAA,QACtC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}