@shipfox/client-secrets 0.2.0

package/dist/components/secret-form.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isShortSecretValue } from '@shipfox/api-secrets-dto';
+import { Button, IconButton } from '@shipfox/react-ui/button';
+import { Callout } from '@shipfox/react-ui/callout';
+import { FormField, FormFieldInput, FormFieldTextarea, fieldError } from '@shipfox/react-ui/form-field';
+import { Text } from '@shipfox/react-ui/typography';
+import { useForm } from '@tanstack/react-form';
+import { useState } from 'react';
+import { usePutSecretMutation } from '#hooks/api/secrets.js';
+import { secretsErrorToFormError } from './form-errors.js';
+import { FormBody, FormFooter } from './form-shell.js';
+import { STORE_KEY_HELP, validateNewStoreKey } from './store-key.js';
+export const SECRET_FORM_ID = 'secret-form';
+// Client-side mirror of the server default SECRETS_SHORT_VALUE_WARN_LENGTH. The
+// advisory is best-effort UX, so drift from a self-hosted override is cosmetic.
+const SHORT_VALUE_THRESHOLD = 12;
+export function SecretForm({ workspaceId, mode, existingKey, reservedKeys = [], onSaved, onCancel }) {
+    const putSecret = usePutSecretMutation();
+    const [formError, setFormError] = useState();
+    const [showValue, setShowValue] = useState(false);
+    const form = useForm({
+        defaultValues: {
+            key: existingKey ?? '',
+            value: ''
+        },
+        onSubmit: async ({ value })=>{
+            setFormError(undefined);
+            try {
+                await putSecret.mutateAsync({
+                    workspaceId,
+                    key: value.key,
+                    body: {
+                        value: value.value
+                    }
+                });
+                onSaved();
+            } catch (error) {
+                const mapped = secretsErrorToFormError(error);
+                if (mapped.kind === 'field') {
+                    form.setFieldMeta(mapped.field, (prev)=>({
+                            ...prev,
+                            errorMap: {
+                                ...prev.errorMap,
+                                onServer: mapped.message
+                            }
+                        }));
+                } else {
+                    setFormError(mapped.message);
+                }
+            }
+        }
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(FormBody, {
+                children: [
+                    /*#__PURE__*/ _jsxs("form", {
+                        id: SECRET_FORM_ID,
+                        className: "flex w-full flex-col gap-16",
+                        noValidate: true,
+                        onSubmit: (event)=>{
+                            event.preventDefault();
+                            event.stopPropagation();
+                            void form.handleSubmit();
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(form.Field, {
+                                name: "key",
+                                validators: {
+                                    onBlur: ({ value })=>validateNewStoreKey(value, {
+                                            mode,
+                                            reservedKeys,
+                                            kind: 'secret'
+                                        }),
+                                    onSubmit: ({ value })=>validateNewStoreKey(value, {
+                                            mode,
+                                            reservedKeys,
+                                            kind: 'secret'
+                                        })
+                                },
+                                children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                        label: "Name",
+                                        id: "secret-key",
+                                        description: STORE_KEY_HELP,
+                                        error: fieldError(field),
+                                        children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                            className: "font-code",
+                                            autoComplete: "off",
+                                            spellCheck: false,
+                                            disabled: mode === 'edit',
+                                            placeholder: "MY_TOKEN",
+                                            value: field.state.value,
+                                            onChange: (event)=>field.handleChange(event.target.value.toUpperCase()),
+                                            onBlur: field.handleBlur
+                                        })
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(form.Field, {
+                                name: "value",
+                                validators: {
+                                    onBlur: ({ value })=>value.length > 0 ? undefined : 'A value is required.',
+                                    onSubmit: ({ value })=>value.length > 0 ? undefined : 'A value is required.'
+                                },
+                                children: (field)=>/*#__PURE__*/ _jsxs(FormField, {
+                                        label: "Value",
+                                        id: "secret-value",
+                                        error: fieldError(field),
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "relative",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(FormFieldTextarea, {
+                                                        className: showValue ? 'pr-32 font-code' : 'pr-32 font-code [-webkit-text-security:disc]',
+                                                        autoComplete: "off",
+                                                        spellCheck: false,
+                                                        rows: 3,
+                                                        placeholder: mode === 'edit' ? 'Enter a new value to replace the current one' : 'Paste the secret value',
+                                                        value: field.state.value,
+                                                        onChange: (event)=>field.handleChange(event.target.value),
+                                                        onBlur: field.handleBlur
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                        type: "button",
+                                                        variant: "transparent",
+                                                        size: "xs",
+                                                        className: "absolute top-6 right-6",
+                                                        icon: showValue ? 'eyeOffLine' : 'eyeLine',
+                                                        "aria-label": showValue ? 'Hide value' : 'Show value',
+                                                        onClick: ()=>setShowValue((prev)=>!prev)
+                                                    })
+                                                ]
+                                            }),
+                                            isShortSecretValue(field.state.value, SHORT_VALUE_THRESHOLD) ? /*#__PURE__*/ _jsx(Callout, {
+                                                role: "alert",
+                                                type: "warning",
+                                                children: /*#__PURE__*/ _jsx(Text, {
+                                                    size: "sm",
+                                                    children: "Very short secrets can match ordinary log text and redact unrelated output. If this value is not sensitive, store it as a Variable instead."
+                                                })
+                                            }) : null
+                                        ]
+                                    })
+                            })
+                        ]
+                    }),
+                    formError ? /*#__PURE__*/ _jsx(Callout, {
+                        role: "alert",
+                        type: "error",
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            size: "sm",
+                            children: formError
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(FormFooter, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "secondary",
+                        type: "button",
+                        onClick: onCancel,
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        form: SECRET_FORM_ID,
+                        isLoading: putSecret.isPending,
+                        children: mode === 'edit' ? 'Update secret' : 'Create secret'
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=secret-form.js.map

package/dist/components/secret-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/secret-form.tsx"],"sourcesContent":["import {isShortSecretValue} from '@shipfox/api-secrets-dto';\nimport {Button, IconButton} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {\n  FormField,\n  FormFieldInput,\n  FormFieldTextarea,\n  fieldError,\n} from '@shipfox/react-ui/form-field';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {useForm} from '@tanstack/react-form';\nimport {useState} from 'react';\nimport {usePutSecretMutation} from '#hooks/api/secrets.js';\nimport {secretsErrorToFormError} from './form-errors.js';\nimport {FormBody, FormFooter} from './form-shell.js';\nimport {STORE_KEY_HELP, validateNewStoreKey} from './store-key.js';\n\nexport const SECRET_FORM_ID = 'secret-form';\n\n// Client-side mirror of the server default SECRETS_SHORT_VALUE_WARN_LENGTH. The\n// advisory is best-effort UX, so drift from a self-hosted override is cosmetic.\nconst SHORT_VALUE_THRESHOLD = 12;\n\nexport function SecretForm({\n  workspaceId,\n  mode,\n  existingKey,\n  reservedKeys = [],\n  onSaved,\n  onCancel,\n}: {\n  workspaceId: string;\n  mode: 'create' | 'edit';\n  existingKey?: string | undefined;\n  reservedKeys?: readonly string[] | undefined;\n  onSaved: () => void;\n  onCancel: () => void;\n}) {\n  const putSecret = usePutSecretMutation();\n  const [formError, setFormError] = useState<string | undefined>();\n  const [showValue, setShowValue] = useState(false);\n\n  const form = useForm({\n    defaultValues: {key: existingKey ?? '', value: ''},\n    onSubmit: async ({value}) => {\n      setFormError(undefined);\n      try {\n        await putSecret.mutateAsync({workspaceId, key: value.key, body: {value: value.value}});\n        onSaved();\n      } catch (error) {\n        const mapped = secretsErrorToFormError(error);\n        if (mapped.kind === 'field') {\n          form.setFieldMeta(mapped.field, (prev) => ({\n            ...prev,\n            errorMap: {...prev.errorMap, onServer: mapped.message},\n          }));\n        } else {\n          setFormError(mapped.message);\n        }\n      }\n    },\n  });\n\n  return (\n    <>\n      <FormBody>\n        <form\n          id={SECRET_FORM_ID}\n          className=\"flex w-full flex-col gap-16\"\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            void form.handleSubmit();\n          }}\n        >\n          <form.Field\n            name=\"key\"\n            validators={{\n              onBlur: ({value}) => validateNewStoreKey(value, {mode, reservedKeys, kind: 'secret'}),\n              onSubmit: ({value}) =>\n                validateNewStoreKey(value, {mode, reservedKeys, kind: 'secret'}),\n            }}\n          >\n            {(field) => (\n              <FormField\n                label=\"Name\"\n                id=\"secret-key\"\n                description={STORE_KEY_HELP}\n                error={fieldError(field)}\n              >\n                <FormFieldInput\n                  className=\"font-code\"\n                  autoComplete=\"off\"\n                  spellCheck={false}\n                  disabled={mode === 'edit'}\n                  placeholder=\"MY_TOKEN\"\n                  value={field.state.value}\n                  onChange={(event) => field.handleChange(event.target.value.toUpperCase())}\n                  onBlur={field.handleBlur}\n                />\n              </FormField>\n            )}\n          </form.Field>\n\n          <form.Field\n            name=\"value\"\n            validators={{\n              onBlur: ({value}) => (value.length > 0 ? undefined : 'A value is required.'),\n              onSubmit: ({value}) => (value.length > 0 ? undefined : 'A value is required.'),\n            }}\n          >\n            {(field) => (\n              <FormField label=\"Value\" id=\"secret-value\" error={fieldError(field)}>\n                <div className=\"relative\">\n                  <FormFieldTextarea\n                    className={\n                      showValue ? 'pr-32 font-code' : 'pr-32 font-code [-webkit-text-security:disc]'\n                    }\n                    autoComplete=\"off\"\n                    spellCheck={false}\n                    rows={3}\n                    placeholder={\n                      mode === 'edit'\n                        ? 'Enter a new value to replace the current one'\n                        : 'Paste the secret value'\n                    }\n                    value={field.state.value}\n                    onChange={(event) => field.handleChange(event.target.value)}\n                    onBlur={field.handleBlur}\n                  />\n                  <IconButton\n                    type=\"button\"\n                    variant=\"transparent\"\n                    size=\"xs\"\n                    className=\"absolute top-6 right-6\"\n                    icon={showValue ? 'eyeOffLine' : 'eyeLine'}\n                    aria-label={showValue ? 'Hide value' : 'Show value'}\n                    onClick={() => setShowValue((prev) => !prev)}\n                  />\n                </div>\n                {isShortSecretValue(field.state.value, SHORT_VALUE_THRESHOLD) ? (\n                  <Callout role=\"alert\" type=\"warning\">\n                    <Text size=\"sm\">\n                      Very short secrets can match ordinary log text and redact unrelated output. If\n                      this value is not sensitive, store it as a Variable instead.\n                    </Text>\n                  </Callout>\n                ) : null}\n              </FormField>\n            )}\n          </form.Field>\n        </form>\n        {formError ? (\n          <Callout role=\"alert\" type=\"error\">\n            <Text size=\"sm\">{formError}</Text>\n          </Callout>\n        ) : null}\n      </FormBody>\n      <FormFooter>\n        <Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button type=\"submit\" form={SECRET_FORM_ID} isLoading={putSecret.isPending}>\n          {mode === 'edit' ? 'Update secret' : 'Create secret'}\n        </Button>\n      </FormFooter>\n    </>\n  );\n}\n"],"names":["isShortSecretValue","Button","IconButton","Callout","FormField","FormFieldInput","FormFieldTextarea","fieldError","Text","useForm","useState","usePutSecretMutation","secretsErrorToFormError","FormBody","FormFooter","STORE_KEY_HELP","validateNewStoreKey","SECRET_FORM_ID","SHORT_VALUE_THRESHOLD","SecretForm","workspaceId","mode","existingKey","reservedKeys","onSaved","onCancel","putSecret","formError","setFormError","showValue","setShowValue","form","defaultValues","key","value","onSubmit","undefined","mutateAsync","body","error","mapped","kind","setFieldMeta","field","prev","errorMap","onServer","message","id","className","noValidate","event","preventDefault","stopPropagation","handleSubmit","Field","name","validators","onBlur","label","description","autoComplete","spellCheck","disabled","placeholder","state","onChange","handleChange","target","toUpperCase","handleBlur","length","div","rows","type","variant","size","icon","aria-label","onClick","role","isLoading","isPending"],"mappings":"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"}

package/dist/components/secret-form.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SecretForm } from './secret-form.js';
+declare const meta: Meta<typeof SecretForm>;
+export default meta;
+type Story = StoryObj<typeof SecretForm>;
+export declare const Playground: Story;
+export declare const Edit: Story;
+export declare const ShortValueWarning: Story;
+//# sourceMappingURL=secret-form.stories.d.ts.map

package/dist/components/secret-form.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secret-form.stories.d.ts","sourceRoot":"","sources":["../../src/components/secret-form.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAKrD,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAmB5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgBjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC"}

package/dist/components/secret-form.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toaster } from '@shipfox/react-ui/toast';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { userEvent, within } from 'storybook/test';
+import { SecretForm } from './secret-form.js';
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+function Wrapper({ children }) {
+    const queryClient = useMemo(()=>new QueryClient({
+            defaultOptions: {
+                queries: {
+                    retry: false
+                },
+                mutations: {
+                    retry: false
+                }
+            }
+        }), []);
+    return /*#__PURE__*/ _jsxs(QueryClientProvider, {
+        client: queryClient,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "w-[520px] overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base",
+                children: children
+            }),
+            /*#__PURE__*/ _jsx(Toaster, {})
+        ]
+    });
+}
+const meta = {
+    title: 'Secrets/SecretForm',
+    component: SecretForm,
+    args: {
+        workspaceId: WORKSPACE_ID,
+        mode: 'create',
+        onSaved: ()=>undefined,
+        onCancel: ()=>undefined
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ _jsx(Wrapper, {
+                children: /*#__PURE__*/ _jsx(Story, {})
+            })
+    ]
+};
+export default meta;
+export const Playground = {};
+export const Edit = {
+    args: {
+        mode: 'edit',
+        existingKey: 'API_TOKEN'
+    }
+};
+export const ShortValueWarning = {
+    play: async ({ canvasElement })=>{
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByLabelText('Value'), 'abc');
+    }
+};
+
+//# sourceMappingURL=secret-form.stories.js.map

package/dist/components/secret-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/secret-form.stories.tsx"],"sourcesContent":["import {Toaster} from '@shipfox/react-ui/toast';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {QueryClient, QueryClientProvider} from '@tanstack/react-query';\nimport type {ReactNode} from 'react';\nimport {useMemo} from 'react';\nimport {userEvent, within} from 'storybook/test';\nimport {SecretForm} from './secret-form.js';\n\nconst WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';\n\nfunction Wrapper({children}: {children: ReactNode}) {\n  const queryClient = useMemo(\n    () => new QueryClient({defaultOptions: {queries: {retry: false}, mutations: {retry: false}}}),\n    [],\n  );\n  return (\n    <QueryClientProvider client={queryClient}>\n      <div className=\"w-[520px] overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base\">\n        {children}\n      </div>\n      <Toaster />\n    </QueryClientProvider>\n  );\n}\n\nconst meta: Meta<typeof SecretForm> = {\n  title: 'Secrets/SecretForm',\n  component: SecretForm,\n  args: {\n    workspaceId: WORKSPACE_ID,\n    mode: 'create',\n    onSaved: () => undefined,\n    onCancel: () => undefined,\n  },\n  decorators: [\n    (Story) => (\n      <Wrapper>\n        <Story />\n      </Wrapper>\n    ),\n  ],\n};\nexport default meta;\n\ntype Story = StoryObj<typeof SecretForm>;\n\nexport const Playground: Story = {};\n\nexport const Edit: Story = {\n  args: {mode: 'edit', existingKey: 'API_TOKEN'},\n};\n\nexport const ShortValueWarning: Story = {\n  play: async ({canvasElement}) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByLabelText('Value'), 'abc');\n  },\n};\n"],"names":["Toaster","QueryClient","QueryClientProvider","useMemo","userEvent","within","SecretForm","WORKSPACE_ID","Wrapper","children","queryClient","defaultOptions","queries","retry","mutations","client","div","className","meta","title","component","args","workspaceId","mode","onSaved","undefined","onCancel","decorators","Story","Playground","Edit","existingKey","ShortValueWarning","play","canvasElement","canvas","type","getByLabelText"],"mappings":";AAAA,SAAQA,OAAO,QAAO,0BAA0B;AAEhD,SAAQC,WAAW,EAAEC,mBAAmB,QAAO,wBAAwB;AAEvE,SAAQC,OAAO,QAAO,QAAQ;AAC9B,SAAQC,SAAS,EAAEC,MAAM,QAAO,iBAAiB;AACjD,SAAQC,UAAU,QAAO,mBAAmB;AAE5C,MAAMC,eAAe;AAErB,SAASC,QAAQ,EAACC,QAAQ,EAAwB;IAChD,MAAMC,cAAcP,QAClB,IAAM,IAAIF,YAAY;YAACU,gBAAgB;gBAACC,SAAS;oBAACC,OAAO;gBAAK;gBAAGC,WAAW;oBAACD,OAAO;gBAAK;YAAC;QAAC,IAC3F,EAAE;IAEJ,qBACE,MAACX;QAAoBa,QAAQL;;0BAC3B,KAACM;gBAAIC,WAAU;0BACZR;;0BAEH,KAACT;;;AAGP;AAEA,MAAMkB,OAAgC;IACpCC,OAAO;IACPC,WAAWd;IACXe,MAAM;QACJC,aAAaf;QACbgB,MAAM;QACNC,SAAS,IAAMC;QACfC,UAAU,IAAMD;IAClB;IACAE,YAAY;QACV,CAACC,sBACC,KAACpB;0BACC,cAAA,KAACoB;;KAGN;AACH;AACA,eAAeV,KAAK;AAIpB,OAAO,MAAMW,aAAoB,CAAC,EAAE;AAEpC,OAAO,MAAMC,OAAc;IACzBT,MAAM;QAACE,MAAM;QAAQQ,aAAa;IAAW;AAC/C,EAAE;AAEF,OAAO,MAAMC,oBAA2B;IACtCC,MAAM,OAAO,EAACC,aAAa,EAAC;QAC1B,MAAMC,SAAS9B,OAAO6B;QACtB,MAAM9B,UAAUgC,IAAI,CAACD,OAAOE,cAAc,CAAC,UAAU;IACvD;AACF,EAAE"}

package/dist/components/store-key.d.ts

@@ -0,0 +1,20 @@
+export declare const STORE_KEY_HELP = "Uppercase letters, digits and underscores; must start with a letter or underscore.";
+/**
+ * Validates a store key against the shared `secretKeySchema` and returns a
+ * human-readable message (not Zod's default) when it fails. The name input is
+ * also auto-uppercased at the call site, so the common case never trips this.
+ */
+export declare function validateStoreKey(value: string): string | undefined;
+/**
+ * Format validation plus a create-mode collision guard. `PUT /:key` is an
+ * upsert and single writes never return a duplicate-key error, so without this
+ * a create with an existing name would silently overwrite the current value —
+ * unrecoverable for write-only secrets. Edit mode locks the key, so it skips
+ * the collision check.
+ */
+export declare function validateNewStoreKey(value: string, { mode, reservedKeys, kind, }: {
+    mode: 'create' | 'edit';
+    reservedKeys: readonly string[];
+    kind: 'secret' | 'variable';
+}): string | undefined;
+//# sourceMappingURL=store-key.d.ts.map

package/dist/components/store-key.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store-key.d.ts","sourceRoot":"","sources":["../../src/components/store-key.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,uFAC2D,CAAC;AAEvF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAElE;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,EACE,IAAI,EACJ,YAAY,EACZ,IAAI,GACL,EAAE;IAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IAAC,YAAY,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAA;CAAC,GACzF,MAAM,GAAG,SAAS,CAOpB"}

package/dist/components/store-key.js

@@ -0,0 +1,25 @@
+import { secretKeySchema } from '@shipfox/api-secrets-dto';
+export const STORE_KEY_HELP = 'Uppercase letters, digits and underscores; must start with a letter or underscore.';
+/**
+ * Validates a store key against the shared `secretKeySchema` and returns a
+ * human-readable message (not Zod's default) when it fails. The name input is
+ * also auto-uppercased at the call site, so the common case never trips this.
+ */ export function validateStoreKey(value) {
+    return secretKeySchema.safeParse(value).success ? undefined : STORE_KEY_HELP;
+}
+/**
+ * Format validation plus a create-mode collision guard. `PUT /:key` is an
+ * upsert and single writes never return a duplicate-key error, so without this
+ * a create with an existing name would silently overwrite the current value —
+ * unrecoverable for write-only secrets. Edit mode locks the key, so it skips
+ * the collision check.
+ */ export function validateNewStoreKey(value, { mode, reservedKeys, kind }) {
+    const formatError = validateStoreKey(value);
+    if (formatError) return formatError;
+    if (mode === 'create' && reservedKeys.includes(value)) {
+        return `A ${kind} with this name already exists. Edit it instead.`;
+    }
+    return undefined;
+}
+
+//# sourceMappingURL=store-key.js.map

package/dist/components/store-key.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/store-key.ts"],"sourcesContent":["import {secretKeySchema} from '@shipfox/api-secrets-dto';\n\nexport const STORE_KEY_HELP =\n  'Uppercase letters, digits and underscores; must start with a letter or underscore.';\n\n/**\n * Validates a store key against the shared `secretKeySchema` and returns a\n * human-readable message (not Zod's default) when it fails. The name input is\n * also auto-uppercased at the call site, so the common case never trips this.\n */\nexport function validateStoreKey(value: string): string | undefined {\n  return secretKeySchema.safeParse(value).success ? undefined : STORE_KEY_HELP;\n}\n\n/**\n * Format validation plus a create-mode collision guard. `PUT /:key` is an\n * upsert and single writes never return a duplicate-key error, so without this\n * a create with an existing name would silently overwrite the current value —\n * unrecoverable for write-only secrets. Edit mode locks the key, so it skips\n * the collision check.\n */\nexport function validateNewStoreKey(\n  value: string,\n  {\n    mode,\n    reservedKeys,\n    kind,\n  }: {mode: 'create' | 'edit'; reservedKeys: readonly string[]; kind: 'secret' | 'variable'},\n): string | undefined {\n  const formatError = validateStoreKey(value);\n  if (formatError) return formatError;\n  if (mode === 'create' && reservedKeys.includes(value)) {\n    return `A ${kind} with this name already exists. Edit it instead.`;\n  }\n  return undefined;\n}\n"],"names":["secretKeySchema","STORE_KEY_HELP","validateStoreKey","value","safeParse","success","undefined","validateNewStoreKey","mode","reservedKeys","kind","formatError","includes"],"mappings":"AAAA,SAAQA,eAAe,QAAO,2BAA2B;AAEzD,OAAO,MAAMC,iBACX,qFAAqF;AAEvF;;;;CAIC,GACD,OAAO,SAASC,iBAAiBC,KAAa;IAC5C,OAAOH,gBAAgBI,SAAS,CAACD,OAAOE,OAAO,GAAGC,YAAYL;AAChE;AAEA;;;;;;CAMC,GACD,OAAO,SAASM,oBACdJ,KAAa,EACb,EACEK,IAAI,EACJC,YAAY,EACZC,IAAI,EACoF;IAE1F,MAAMC,cAAcT,iBAAiBC;IACrC,IAAIQ,aAAa,OAAOA;IACxB,IAAIH,SAAS,YAAYC,aAAaG,QAAQ,CAACT,QAAQ;QACrD,OAAO,CAAC,EAAE,EAAEO,KAAK,gDAAgD,CAAC;IACpE;IACA,OAAOJ;AACT"}

package/dist/components/store-section-shell.d.ts

@@ -0,0 +1,10 @@
+export declare const STORE_SURFACE_CLASS = "overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base";
+/** Placeholder rows shown while the store list loads. */
+export declare function StoreRowsSkeleton({ label }: {
+    label: string;
+}): import("react").JSX.Element;
+export declare function StoreSurface({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=store-section-shell.d.ts.map

package/dist/components/store-section-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store-section-shell.d.ts","sourceRoot":"","sources":["../../src/components/store-section-shell.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAE3F,yDAAyD;AACzD,wBAAgB,iBAAiB,CAAC,EAAC,KAAK,EAAC,EAAE;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,+BAczD;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,+BAEA"}

package/dist/components/store-section-shell.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@shipfox/react-ui/skeleton';
+import { cn } from '@shipfox/react-ui/utils';
+export const STORE_SURFACE_CLASS = 'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
+/** Placeholder rows shown while the store list loads. */ export function StoreRowsSkeleton({ label }) {
+    return /*#__PURE__*/ _jsx("div", {
+        role: "status",
+        "aria-label": label,
+        className: STORE_SURFACE_CLASS,
+        children: /*#__PURE__*/ _jsx("ul", {
+            className: "divide-y divide-border-neutral-base",
+            children: [
+                0,
+                1,
+                2
+            ].map((row)=>/*#__PURE__*/ _jsxs("li", {
+                    className: "flex items-center gap-12 px-16 py-12",
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-16 w-140"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-16 w-96"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "ml-auto h-14 w-80 shrink-0"
+                        })
+                    ]
+                }, row))
+        })
+    });
+}
+export function StoreSurface({ className, children }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn(STORE_SURFACE_CLASS, className),
+        children: children
+    });
+}
+
+//# sourceMappingURL=store-section-shell.js.map

package/dist/components/store-section-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/store-section-shell.tsx"],"sourcesContent":["import {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {cn} from '@shipfox/react-ui/utils';\n\nexport const STORE_SURFACE_CLASS =\n  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';\n\n/** Placeholder rows shown while the store list loads. */\nexport function StoreRowsSkeleton({label}: {label: string}) {\n  return (\n    <div role=\"status\" aria-label={label} className={STORE_SURFACE_CLASS}>\n      <ul className=\"divide-y divide-border-neutral-base\">\n        {[0, 1, 2].map((row) => (\n          <li key={row} className=\"flex items-center gap-12 px-16 py-12\">\n            <Skeleton className=\"h-16 w-140\" />\n            <Skeleton className=\"h-16 w-96\" />\n            <Skeleton className=\"ml-auto h-14 w-80 shrink-0\" />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport function StoreSurface({\n  className,\n  children,\n}: {\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return <div className={cn(STORE_SURFACE_CLASS, className)}>{children}</div>;\n}\n"],"names":["Skeleton","cn","STORE_SURFACE_CLASS","StoreRowsSkeleton","label","div","role","aria-label","className","ul","map","row","li","StoreSurface","children"],"mappings":";AAAA,SAAQA,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,EAAE,QAAO,0BAA0B;AAE3C,OAAO,MAAMC,sBACX,yFAAyF;AAE3F,uDAAuD,GACvD,OAAO,SAASC,kBAAkB,EAACC,KAAK,EAAkB;IACxD,qBACE,KAACC;QAAIC,MAAK;QAASC,cAAYH;QAAOI,WAAWN;kBAC/C,cAAA,KAACO;YAAGD,WAAU;sBACX;gBAAC;gBAAG;gBAAG;aAAE,CAACE,GAAG,CAAC,CAACC,oBACd,MAACC;oBAAaJ,WAAU;;sCACtB,KAACR;4BAASQ,WAAU;;sCACpB,KAACR;4BAASQ,WAAU;;sCACpB,KAACR;4BAASQ,WAAU;;;mBAHbG;;;AASnB;AAEA,OAAO,SAASE,aAAa,EAC3BL,SAAS,EACTM,QAAQ,EAIT;IACC,qBAAO,KAACT;QAAIG,WAAWP,GAAGC,qBAAqBM;kBAAaM;;AAC9D"}

package/dist/components/variable-form.d.ts

@@ -0,0 +1,12 @@
+export declare const VARIABLE_FORM_ID = "variable-form";
+export declare function VariableForm({ workspaceId, mode, existingKey, existingValue, existingValueTruncated, reservedKeys, onSaved, onCancel, }: {
+    workspaceId: string;
+    mode: 'create' | 'edit';
+    existingKey?: string | undefined;
+    existingValue?: string | undefined;
+    existingValueTruncated?: boolean | undefined;
+    reservedKeys?: readonly string[] | undefined;
+    onSaved: () => void;
+    onCancel: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=variable-form.d.ts.map

package/dist/components/variable-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-form.d.ts","sourceRoot":"","sources":["../../src/components/variable-form.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,gBAAgB,kBAAkB,CAAC;AAEhD,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,IAAI,EACJ,WAAW,EACX,aAAa,EACb,sBAA8B,EAC9B,YAAiB,EACjB,OAAO,EACP,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,sBAAsB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7C,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,+BAgJA"}

package/dist/components/variable-form.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isSensitiveSecretName } from '@shipfox/api-secrets-dto';
+import { Button } from '@shipfox/react-ui/button';
+import { Callout } from '@shipfox/react-ui/callout';
+import { FormField, FormFieldInput, FormFieldTextarea, fieldError } from '@shipfox/react-ui/form-field';
+import { Text } from '@shipfox/react-ui/typography';
+import { useForm } from '@tanstack/react-form';
+import { useEffect, useRef, useState } from 'react';
+import { usePutVariableMutation, useVariableQuery } from '#hooks/api/variables.js';
+import { secretsErrorToFormError } from './form-errors.js';
+import { FormBody, FormFooter } from './form-shell.js';
+import { STORE_KEY_HELP, validateNewStoreKey } from './store-key.js';
+export const VARIABLE_FORM_ID = 'variable-form';
+export function VariableForm({ workspaceId, mode, existingKey, existingValue, existingValueTruncated = false, reservedKeys = [], onSaved, onCancel }) {
+    const putVariable = usePutVariableMutation();
+    const [formError, setFormError] = useState();
+    // The list value is only a preview, so a truncated variable must load its full
+    // value before editing to avoid saving the truncated preview back.
+    const needsFullValue = mode === 'edit' && existingValueTruncated;
+    const fullValueQuery = useVariableQuery(workspaceId, needsFullValue ? existingKey : undefined);
+    const form = useForm({
+        defaultValues: {
+            key: existingKey ?? '',
+            value: existingValue ?? ''
+        },
+        onSubmit: async ({ value })=>{
+            setFormError(undefined);
+            try {
+                await putVariable.mutateAsync({
+                    workspaceId,
+                    key: value.key,
+                    body: {
+                        value: value.value
+                    }
+                });
+                onSaved();
+            } catch (error) {
+                const mapped = secretsErrorToFormError(error);
+                if (mapped.kind === 'field') {
+                    form.setFieldMeta(mapped.field, (prev)=>({
+                            ...prev,
+                            errorMap: {
+                                ...prev.errorMap,
+                                onServer: mapped.message
+                            }
+                        }));
+                } else {
+                    setFormError(mapped.message);
+                }
+            }
+        }
+    });
+    const populatedRef = useRef(false);
+    useEffect(()=>{
+        if (needsFullValue && fullValueQuery.data && !populatedRef.current) {
+            populatedRef.current = true;
+            form.setFieldValue('value', fullValueQuery.data.value);
+        }
+    }, [
+        needsFullValue,
+        fullValueQuery.data,
+        form
+    ]);
+    // The full value must be loaded before a save is allowed, otherwise submitting would
+    // overwrite the stored value with the truncated preview. Block until it arrives —
+    // whether the fetch is still pending or has failed.
+    const awaitingFullValue = needsFullValue && fullValueQuery.data === undefined;
+    const loadingFullValue = needsFullValue && fullValueQuery.isPending;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(FormBody, {
+                children: [
+                    /*#__PURE__*/ _jsxs("form", {
+                        id: VARIABLE_FORM_ID,
+                        className: "flex w-full flex-col gap-16",
+                        noValidate: true,
+                        onSubmit: (event)=>{
+                            event.preventDefault();
+                            event.stopPropagation();
+                            void form.handleSubmit();
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(form.Field, {
+                                name: "key",
+                                validators: {
+                                    onBlur: ({ value })=>validateNewStoreKey(value, {
+                                            mode,
+                                            reservedKeys,
+                                            kind: 'variable'
+                                        }),
+                                    onSubmit: ({ value })=>validateNewStoreKey(value, {
+                                            mode,
+                                            reservedKeys,
+                                            kind: 'variable'
+                                        })
+                                },
+                                children: (field)=>/*#__PURE__*/ _jsxs(FormField, {
+                                        label: "Name",
+                                        id: "variable-key",
+                                        description: STORE_KEY_HELP,
+                                        error: fieldError(field),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(FormFieldInput, {
+                                                className: "font-code",
+                                                autoComplete: "off",
+                                                spellCheck: false,
+                                                disabled: mode === 'edit',
+                                                placeholder: "LOG_LEVEL",
+                                                value: field.state.value,
+                                                onChange: (event)=>field.handleChange(event.target.value.toUpperCase()),
+                                                onBlur: field.handleBlur
+                                            }),
+                                            isSensitiveSecretName(field.state.value) ? /*#__PURE__*/ _jsx(Callout, {
+                                                role: "alert",
+                                                type: "warning",
+                                                children: /*#__PURE__*/ _jsx(Text, {
+                                                    size: "sm",
+                                                    "aria-live": "polite",
+                                                    children: "This looks like it may be sensitive. Variables are stored in plaintext and are not redacted from logs. Use a Secret if this value contains private data."
+                                                })
+                                            }) : null
+                                        ]
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(form.Field, {
+                                name: "value",
+                                children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                        label: "Value",
+                                        id: "variable-value",
+                                        error: fieldError(field),
+                                        description: loadingFullValue ? 'Loading the current value…' : undefined,
+                                        children: /*#__PURE__*/ _jsx(FormFieldTextarea, {
+                                            className: "font-code",
+                                            autoComplete: "off",
+                                            spellCheck: false,
+                                            rows: 3,
+                                            disabled: awaitingFullValue,
+                                            placeholder: "debug",
+                                            value: field.state.value,
+                                            onChange: (event)=>field.handleChange(event.target.value),
+                                            onBlur: field.handleBlur
+                                        })
+                                    })
+                            })
+                        ]
+                    }),
+                    awaitingFullValue && fullValueQuery.isError ? /*#__PURE__*/ _jsx(Callout, {
+                        role: "alert",
+                        type: "error",
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            size: "sm",
+                            children: "Could not load the current value. Close and try again."
+                        })
+                    }) : null,
+                    formError ? /*#__PURE__*/ _jsx(Callout, {
+                        role: "alert",
+                        type: "error",
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            size: "sm",
+                            children: formError
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(FormFooter, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "secondary",
+                        type: "button",
+                        onClick: onCancel,
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "submit",
+                        form: VARIABLE_FORM_ID,
+                        isLoading: putVariable.isPending,
+                        disabled: awaitingFullValue,
+                        children: mode === 'edit' ? 'Update variable' : 'Create variable'
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=variable-form.js.map