@shipfox/client-secrets 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/variable-form.tsx"],"sourcesContent":["import {isSensitiveSecretName} from '@shipfox/api-secrets-dto';\nimport {Button} 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 {useEffect, useRef, useState} from 'react';\nimport {usePutVariableMutation, useVariableQuery} from '#hooks/api/variables.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 VARIABLE_FORM_ID = 'variable-form';\n\nexport function VariableForm({\n  workspaceId,\n  mode,\n  existingKey,\n  existingValue,\n  existingValueTruncated = false,\n  reservedKeys = [],\n  onSaved,\n  onCancel,\n}: {\n  workspaceId: string;\n  mode: 'create' | 'edit';\n  existingKey?: string | undefined;\n  existingValue?: string | undefined;\n  existingValueTruncated?: boolean | undefined;\n  reservedKeys?: readonly string[] | undefined;\n  onSaved: () => void;\n  onCancel: () => void;\n}) {\n  const putVariable = usePutVariableMutation();\n  const [formError, setFormError] = useState<string | undefined>();\n\n  // The list value is only a preview, so a truncated variable must load its full\n  // value before editing to avoid saving the truncated preview back.\n  const needsFullValue = mode === 'edit' && existingValueTruncated;\n  const fullValueQuery = useVariableQuery(workspaceId, needsFullValue ? existingKey : undefined);\n\n  const form = useForm({\n    defaultValues: {key: existingKey ?? '', value: existingValue ?? ''},\n    onSubmit: async ({value}) => {\n      setFormError(undefined);\n      try {\n        await putVariable.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  const populatedRef = useRef(false);\n  useEffect(() => {\n    if (needsFullValue && fullValueQuery.data && !populatedRef.current) {\n      populatedRef.current = true;\n      form.setFieldValue('value', fullValueQuery.data.value);\n    }\n  }, [needsFullValue, fullValueQuery.data, form]);\n\n  // The full value must be loaded before a save is allowed, otherwise submitting would\n  // overwrite the stored value with the truncated preview. Block until it arrives —\n  // whether the fetch is still pending or has failed.\n  const awaitingFullValue = needsFullValue && fullValueQuery.data === undefined;\n  const loadingFullValue = needsFullValue && fullValueQuery.isPending;\n\n  return (\n    <>\n      <FormBody>\n        <form\n          id={VARIABLE_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}) =>\n                validateNewStoreKey(value, {mode, reservedKeys, kind: 'variable'}),\n              onSubmit: ({value}) =>\n                validateNewStoreKey(value, {mode, reservedKeys, kind: 'variable'}),\n            }}\n          >\n            {(field) => (\n              <FormField\n                label=\"Name\"\n                id=\"variable-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=\"LOG_LEVEL\"\n                  value={field.state.value}\n                  onChange={(event) => field.handleChange(event.target.value.toUpperCase())}\n                  onBlur={field.handleBlur}\n                />\n                {isSensitiveSecretName(field.state.value) ? (\n                  <Callout role=\"alert\" type=\"warning\">\n                    <Text size=\"sm\" aria-live=\"polite\">\n                      This looks like it may be sensitive. Variables are stored in plaintext and are\n                      not redacted from logs. Use a Secret if this value contains private data.\n                    </Text>\n                  </Callout>\n                ) : null}\n              </FormField>\n            )}\n          </form.Field>\n\n          <form.Field name=\"value\">\n            {(field) => (\n              <FormField\n                label=\"Value\"\n                id=\"variable-value\"\n                error={fieldError(field)}\n                description={loadingFullValue ? 'Loading the current value…' : undefined}\n              >\n                <FormFieldTextarea\n                  className=\"font-code\"\n                  autoComplete=\"off\"\n                  spellCheck={false}\n                  rows={3}\n                  disabled={awaitingFullValue}\n                  placeholder=\"debug\"\n                  value={field.state.value}\n                  onChange={(event) => field.handleChange(event.target.value)}\n                  onBlur={field.handleBlur}\n                />\n              </FormField>\n            )}\n          </form.Field>\n        </form>\n        {awaitingFullValue && fullValueQuery.isError ? (\n          <Callout role=\"alert\" type=\"error\">\n            <Text size=\"sm\">Could not load the current value. Close and try again.</Text>\n          </Callout>\n        ) : null}\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\n          type=\"submit\"\n          form={VARIABLE_FORM_ID}\n          isLoading={putVariable.isPending}\n          disabled={awaitingFullValue}\n        >\n          {mode === 'edit' ? 'Update variable' : 'Create variable'}\n        </Button>\n      </FormFooter>\n    </>\n  );\n}\n"],"names":["isSensitiveSecretName","Button","Callout","FormField","FormFieldInput","FormFieldTextarea","fieldError","Text","useForm","useEffect","useRef","useState","usePutVariableMutation","useVariableQuery","secretsErrorToFormError","FormBody","FormFooter","STORE_KEY_HELP","validateNewStoreKey","VARIABLE_FORM_ID","VariableForm","workspaceId","mode","existingKey","existingValue","existingValueTruncated","reservedKeys","onSaved","onCancel","putVariable","formError","setFormError","needsFullValue","fullValueQuery","undefined","form","defaultValues","key","value","onSubmit","mutateAsync","body","error","mapped","kind","setFieldMeta","field","prev","errorMap","onServer","message","populatedRef","data","current","setFieldValue","awaitingFullValue","loadingFullValue","isPending","id","className","noValidate","event","preventDefault","stopPropagation","handleSubmit","Field","name","validators","onBlur","label","description","autoComplete","spellCheck","disabled","placeholder","state","onChange","handleChange","target","toUpperCase","handleBlur","role","type","size","aria-live","rows","isError","variant","onClick","isLoading"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"variable-form.stories.d.ts","sourceRoot":"","sources":["../../src/components/variable-form.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAKrD,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAmBhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAgBnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAKlC,CAAC"}

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

@@ -0,0 +1,61 @@
+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 { VariableForm } from './variable-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/VariableForm',
+    component: VariableForm,
+    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: 'LOG_LEVEL',
+        existingValue: 'debug'
+    }
+};
+export const SensitiveNameWarning = {
+    play: async ({ canvasElement })=>{
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByLabelText('Name'), 'MY_TOKEN');
+    }
+};
+
+//# sourceMappingURL=variable-form.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/variable-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 {VariableForm} from './variable-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 VariableForm> = {\n  title: 'Secrets/VariableForm',\n  component: VariableForm,\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 VariableForm>;\n\nexport const Playground: Story = {};\n\nexport const Edit: Story = {\n  args: {mode: 'edit', existingKey: 'LOG_LEVEL', existingValue: 'debug'},\n};\n\nexport const SensitiveNameWarning: Story = {\n  play: async ({canvasElement}) => {\n    const canvas = within(canvasElement);\n    await userEvent.type(canvas.getByLabelText('Name'), 'MY_TOKEN');\n  },\n};\n"],"names":["Toaster","QueryClient","QueryClientProvider","useMemo","userEvent","within","VariableForm","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","existingValue","SensitiveNameWarning","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,YAAY,QAAO,qBAAqB;AAEhD,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,OAAkC;IACtCC,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;QAAaC,eAAe;IAAO;AACvE,EAAE;AAEF,OAAO,MAAMC,uBAA8B;IACzCC,MAAM,OAAO,EAACC,aAAa,EAAC;QAC1B,MAAMC,SAAS/B,OAAO8B;QACtB,MAAM/B,UAAUiC,IAAI,CAACD,OAAOE,cAAc,CAAC,SAAS;IACtD;AACF,EAAE"}

package/dist/components/workspace-secrets-section.d.ts

@@ -0,0 +1,4 @@
+export declare function WorkspaceSecretsSection({ workspaceId }: {
+    workspaceId: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=workspace-secrets-section.d.ts.map

package/dist/components/workspace-secrets-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-secrets-section.d.ts","sourceRoot":"","sources":["../../src/components/workspace-secrets-section.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,uBAAuB,CAAC,EAAC,WAAW,EAAC,EAAE;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,+BAsI3E"}

package/dist/components/workspace-secrets-section.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryLoadError } from '@shipfox/client-ui';
+import { Button, IconButton } from '@shipfox/react-ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@shipfox/react-ui/dropdown-menu';
+import { EmptyState } from '@shipfox/react-ui/empty-state';
+import { Modal, ModalContent, ModalHeader, ModalTitle } from '@shipfox/react-ui/modal';
+import { RelativeTime, RelativeTimeProvider } from '@shipfox/react-ui/relative-time';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@shipfox/react-ui/table';
+import { toast } from '@shipfox/react-ui/toast';
+import { Code, Header, Text } from '@shipfox/react-ui/typography';
+import { useMemo, useState } from 'react';
+import { useDeleteSecretMutation, useSecretsQuery } from '#hooks/api/secrets.js';
+import { copyKeyName } from './copy-key.js';
+import { DeleteEntryDialog } from './delete-entry-dialog.js';
+import { secretsErrorToFormError } from './form-errors.js';
+import { SecretForm } from './secret-form.js';
+import { StoreRowsSkeleton, StoreSurface } from './store-section-shell.js';
+const SECRETS_DESCRIPTION = 'Encrypted, write-only values for sensitive data like API keys, tokens, and passwords.';
+const EMPTY_SECRETS_DESCRIPTION = 'Create a secret to store sensitive values like API keys, tokens, and passwords.';
+export function WorkspaceSecretsSection({ workspaceId }) {
+    const secretsQuery = useSecretsQuery(workspaceId);
+    const deleteSecret = useDeleteSecretMutation();
+    const [formState, setFormState] = useState(null);
+    const [deleteKey, setDeleteKey] = useState(null);
+    const [deleteError, setDeleteError] = useState();
+    const secrets = useMemo(()=>[
+            ...secretsQuery.data ?? []
+        ].sort((a, b)=>a.key.localeCompare(b.key)), [
+        secretsQuery.data
+    ]);
+    function closeDelete() {
+        setDeleteKey(null);
+        setDeleteError(undefined);
+    }
+    return /*#__PURE__*/ _jsxs(RelativeTimeProvider, {
+        children: [
+            /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-16",
+                "aria-label": "Secrets",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-start justify-between gap-16",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Header, {
+                                        variant: "h3",
+                                        children: "Secrets"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-muted",
+                                        children: SECRETS_DESCRIPTION
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "sm",
+                                onClick: ()=>setFormState({
+                                        mode: 'create'
+                                    }),
+                                children: "Create secret"
+                            })
+                        ]
+                    }),
+                    secretsQuery.isPending ? /*#__PURE__*/ _jsx(StoreRowsSkeleton, {
+                        label: "Loading secrets"
+                    }) : null,
+                    secretsQuery.isError && secretsQuery.data === undefined ? /*#__PURE__*/ _jsx(StoreSurface, {
+                        className: "px-16",
+                        children: /*#__PURE__*/ _jsx(QueryLoadError, {
+                            query: secretsQuery,
+                            subject: "secrets"
+                        })
+                    }) : null,
+                    secretsQuery.data !== undefined && secrets.length === 0 ? /*#__PURE__*/ _jsx(StoreSurface, {
+                        className: "px-16",
+                        children: /*#__PURE__*/ _jsx(EmptyState, {
+                            icon: "keyLine",
+                            title: "No secrets yet",
+                            description: EMPTY_SECRETS_DESCRIPTION,
+                            action: /*#__PURE__*/ _jsx(Button, {
+                                size: "sm",
+                                onClick: ()=>setFormState({
+                                        mode: 'create'
+                                    }),
+                                children: "Create secret"
+                            })
+                        })
+                    }) : null,
+                    secrets.length > 0 ? /*#__PURE__*/ _jsx(StoreSurface, {
+                        children: /*#__PURE__*/ _jsxs(Table, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableHeader, {
+                                    children: /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: "Name"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: "Value"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: "Last edited"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                className: "w-40 text-right",
+                                                children: /*#__PURE__*/ _jsx("span", {
+                                                    className: "sr-only",
+                                                    children: "Actions"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(TableBody, {
+                                    children: secrets.map((secret)=>/*#__PURE__*/ _jsx(SecretRow, {
+                                            secret: secret,
+                                            onEdit: ()=>setFormState({
+                                                    mode: 'edit',
+                                                    key: secret.key
+                                                }),
+                                            onDelete: ()=>setDeleteKey(secret.key)
+                                        }, secret.key))
+                                })
+                            ]
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Modal, {
+                open: formState !== null,
+                onOpenChange: (open)=>{
+                    if (!open) setFormState(null);
+                },
+                children: /*#__PURE__*/ _jsxs(ModalContent, {
+                    children: [
+                        /*#__PURE__*/ _jsx(ModalHeader, {
+                            children: /*#__PURE__*/ _jsx(ModalTitle, {
+                                children: formState?.mode === 'edit' ? 'Update secret' : 'Create secret'
+                            })
+                        }),
+                        formState ? /*#__PURE__*/ _jsx(SecretForm, {
+                            workspaceId: workspaceId,
+                            mode: formState.mode,
+                            existingKey: formState.mode === 'edit' ? formState.key : undefined,
+                            reservedKeys: secrets.map((secret)=>secret.key),
+                            onSaved: ()=>{
+                                const wasEdit = formState.mode === 'edit';
+                                setFormState(null);
+                                toast.success(wasEdit ? 'Secret updated' : 'Secret created');
+                            },
+                            onCancel: ()=>setFormState(null)
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(DeleteEntryDialog, {
+                open: deleteKey !== null,
+                onOpenChange: (open)=>{
+                    if (!open) closeDelete();
+                },
+                entryKey: deleteKey ?? '',
+                isLoading: deleteSecret.isPending,
+                errorMessage: deleteError,
+                onConfirm: async ()=>{
+                    if (deleteKey === null) return;
+                    setDeleteError(undefined);
+                    try {
+                        await deleteSecret.mutateAsync({
+                            workspaceId,
+                            key: deleteKey
+                        });
+                        toast.success('Secret deleted');
+                        closeDelete();
+                    } catch (error) {
+                        setDeleteError(secretsErrorToFormError(error).message);
+                    }
+                }
+            })
+        ]
+    });
+}
+function SecretRow({ secret, onEdit, onDelete }) {
+    return /*#__PURE__*/ _jsxs(TableRow, {
+        children: [
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx("button", {
+                    type: "button",
+                    className: "inline-flex min-w-0 cursor-pointer rounded-4 border-none bg-transparent p-0 text-left text-foreground-neutral-base outline-none transition-colors hover:text-foreground-highlight-interactive focus-visible:shadow-border-interactive-with-active",
+                    "aria-label": `Copy secret name ${secret.key}`,
+                    onClick: ()=>void copyKeyName(secret.key),
+                    children: /*#__PURE__*/ _jsx(Code, {
+                        as: "span",
+                        variant: "paragraph",
+                        className: "truncate",
+                        children: secret.key
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx("span", {
+                    role: "img",
+                    "aria-label": "Value hidden",
+                    className: "font-code text-foreground-neutral-muted",
+                    children: "••••••••"
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                className: "text-foreground-neutral-muted",
+                children: /*#__PURE__*/ _jsx(RelativeTime, {
+                    value: secret.updated_at
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                className: "text-right",
+                children: /*#__PURE__*/ _jsxs(DropdownMenu, {
+                    children: [
+                        /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                size: "sm",
+                                variant: "transparent",
+                                icon: "more2Line",
+                                "aria-label": `Actions for ${secret.key}`
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                            align: "end",
+                            children: [
+                                /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                    icon: "editLine",
+                                    onSelect: onEdit,
+                                    children: "Edit value"
+                                }),
+                                /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                    icon: "deleteBinLine",
+                                    onSelect: onDelete,
+                                    children: "Delete"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=workspace-secrets-section.js.map

package/dist/components/workspace-secrets-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/workspace-secrets-section.tsx"],"sourcesContent":["import type {SecretDto} from '@shipfox/api-secrets-dto';\nimport {QueryLoadError} from '@shipfox/client-ui';\nimport {Button, IconButton} from '@shipfox/react-ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@shipfox/react-ui/dropdown-menu';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {Modal, ModalContent, ModalHeader, ModalTitle} from '@shipfox/react-ui/modal';\nimport {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@shipfox/react-ui/table';\nimport {toast} from '@shipfox/react-ui/toast';\nimport {Code, Header, Text} from '@shipfox/react-ui/typography';\nimport {useMemo, useState} from 'react';\nimport {useDeleteSecretMutation, useSecretsQuery} from '#hooks/api/secrets.js';\nimport {copyKeyName} from './copy-key.js';\nimport {DeleteEntryDialog} from './delete-entry-dialog.js';\nimport {secretsErrorToFormError} from './form-errors.js';\nimport {SecretForm} from './secret-form.js';\nimport {StoreRowsSkeleton, StoreSurface} from './store-section-shell.js';\n\nconst SECRETS_DESCRIPTION =\n  'Encrypted, write-only values for sensitive data like API keys, tokens, and passwords.';\nconst EMPTY_SECRETS_DESCRIPTION =\n  'Create a secret to store sensitive values like API keys, tokens, and passwords.';\n\ntype FormState = {mode: 'create'} | {mode: 'edit'; key: string} | null;\n\nexport function WorkspaceSecretsSection({workspaceId}: {workspaceId: string}) {\n  const secretsQuery = useSecretsQuery(workspaceId);\n  const deleteSecret = useDeleteSecretMutation();\n  const [formState, setFormState] = useState<FormState>(null);\n  const [deleteKey, setDeleteKey] = useState<string | null>(null);\n  const [deleteError, setDeleteError] = useState<string | undefined>();\n\n  const secrets = useMemo(\n    () => [...(secretsQuery.data ?? [])].sort((a, b) => a.key.localeCompare(b.key)),\n    [secretsQuery.data],\n  );\n\n  function closeDelete() {\n    setDeleteKey(null);\n    setDeleteError(undefined);\n  }\n\n  return (\n    <RelativeTimeProvider>\n      <section className=\"flex flex-col gap-16\" aria-label=\"Secrets\">\n        <div className=\"flex items-start justify-between gap-16\">\n          <div className=\"flex flex-col gap-4\">\n            <Header variant=\"h3\">Secrets</Header>\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              {SECRETS_DESCRIPTION}\n            </Text>\n          </div>\n          <Button size=\"sm\" onClick={() => setFormState({mode: 'create'})}>\n            Create secret\n          </Button>\n        </div>\n\n        {secretsQuery.isPending ? <StoreRowsSkeleton label=\"Loading secrets\" /> : null}\n\n        {secretsQuery.isError && secretsQuery.data === undefined ? (\n          <StoreSurface className=\"px-16\">\n            <QueryLoadError query={secretsQuery} subject=\"secrets\" />\n          </StoreSurface>\n        ) : null}\n\n        {secretsQuery.data !== undefined && secrets.length === 0 ? (\n          <StoreSurface className=\"px-16\">\n            <EmptyState\n              icon=\"keyLine\"\n              title=\"No secrets yet\"\n              description={EMPTY_SECRETS_DESCRIPTION}\n              action={\n                <Button size=\"sm\" onClick={() => setFormState({mode: 'create'})}>\n                  Create secret\n                </Button>\n              }\n            />\n          </StoreSurface>\n        ) : null}\n\n        {secrets.length > 0 ? (\n          <StoreSurface>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Name</TableHead>\n                  <TableHead>Value</TableHead>\n                  <TableHead>Last edited</TableHead>\n                  <TableHead className=\"w-40 text-right\">\n                    <span className=\"sr-only\">Actions</span>\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {secrets.map((secret) => (\n                  <SecretRow\n                    key={secret.key}\n                    secret={secret}\n                    onEdit={() => setFormState({mode: 'edit', key: secret.key})}\n                    onDelete={() => setDeleteKey(secret.key)}\n                  />\n                ))}\n              </TableBody>\n            </Table>\n          </StoreSurface>\n        ) : null}\n      </section>\n\n      <Modal\n        open={formState !== null}\n        onOpenChange={(open) => {\n          if (!open) setFormState(null);\n        }}\n      >\n        <ModalContent>\n          <ModalHeader>\n            <ModalTitle>\n              {formState?.mode === 'edit' ? 'Update secret' : 'Create secret'}\n            </ModalTitle>\n          </ModalHeader>\n          {formState ? (\n            <SecretForm\n              workspaceId={workspaceId}\n              mode={formState.mode}\n              existingKey={formState.mode === 'edit' ? formState.key : undefined}\n              reservedKeys={secrets.map((secret) => secret.key)}\n              onSaved={() => {\n                const wasEdit = formState.mode === 'edit';\n                setFormState(null);\n                toast.success(wasEdit ? 'Secret updated' : 'Secret created');\n              }}\n              onCancel={() => setFormState(null)}\n            />\n          ) : null}\n        </ModalContent>\n      </Modal>\n\n      <DeleteEntryDialog\n        open={deleteKey !== null}\n        onOpenChange={(open) => {\n          if (!open) closeDelete();\n        }}\n        entryKey={deleteKey ?? ''}\n        isLoading={deleteSecret.isPending}\n        errorMessage={deleteError}\n        onConfirm={async () => {\n          if (deleteKey === null) return;\n          setDeleteError(undefined);\n          try {\n            await deleteSecret.mutateAsync({workspaceId, key: deleteKey});\n            toast.success('Secret deleted');\n            closeDelete();\n          } catch (error) {\n            setDeleteError(secretsErrorToFormError(error).message);\n          }\n        }}\n      />\n    </RelativeTimeProvider>\n  );\n}\n\nfunction SecretRow({\n  secret,\n  onEdit,\n  onDelete,\n}: {\n  secret: SecretDto;\n  onEdit: () => void;\n  onDelete: () => void;\n}) {\n  return (\n    <TableRow>\n      <TableCell>\n        <button\n          type=\"button\"\n          className=\"inline-flex min-w-0 cursor-pointer rounded-4 border-none bg-transparent p-0 text-left text-foreground-neutral-base outline-none transition-colors hover:text-foreground-highlight-interactive focus-visible:shadow-border-interactive-with-active\"\n          aria-label={`Copy secret name ${secret.key}`}\n          onClick={() => void copyKeyName(secret.key)}\n        >\n          <Code as=\"span\" variant=\"paragraph\" className=\"truncate\">\n            {secret.key}\n          </Code>\n        </button>\n      </TableCell>\n      <TableCell>\n        <span\n          role=\"img\"\n          aria-label=\"Value hidden\"\n          className=\"font-code text-foreground-neutral-muted\"\n        >\n          ••••••••\n        </span>\n      </TableCell>\n      <TableCell className=\"text-foreground-neutral-muted\">\n        <RelativeTime value={secret.updated_at} />\n      </TableCell>\n      <TableCell className=\"text-right\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <IconButton\n              size=\"sm\"\n              variant=\"transparent\"\n              icon=\"more2Line\"\n              aria-label={`Actions for ${secret.key}`}\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem icon=\"editLine\" onSelect={onEdit}>\n              Edit value\n            </DropdownMenuItem>\n            <DropdownMenuItem icon=\"deleteBinLine\" onSelect={onDelete}>\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </TableCell>\n    </TableRow>\n  );\n}\n"],"names":["QueryLoadError","Button","IconButton","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","EmptyState","Modal","ModalContent","ModalHeader","ModalTitle","RelativeTime","RelativeTimeProvider","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","toast","Code","Header","Text","useMemo","useState","useDeleteSecretMutation","useSecretsQuery","copyKeyName","DeleteEntryDialog","secretsErrorToFormError","SecretForm","StoreRowsSkeleton","StoreSurface","SECRETS_DESCRIPTION","EMPTY_SECRETS_DESCRIPTION","WorkspaceSecretsSection","workspaceId","secretsQuery","deleteSecret","formState","setFormState","deleteKey","setDeleteKey","deleteError","setDeleteError","secrets","data","sort","a","b","key","localeCompare","closeDelete","undefined","section","className","aria-label","div","variant","size","onClick","mode","isPending","label","isError","query","subject","length","icon","title","description","action","span","map","secret","SecretRow","onEdit","onDelete","open","onOpenChange","existingKey","reservedKeys","onSaved","wasEdit","success","onCancel","entryKey","isLoading","errorMessage","onConfirm","mutateAsync","error","message","button","type","as","role","value","updated_at","asChild","align","onSelect"],"mappings":"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"}

package/dist/components/workspace-secrets-section.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+type Scenario = 'loaded' | 'empty' | 'loading' | 'error';
+declare function SectionStory({ scenario }: {
+    scenario: Scenario;
+}): import("react").JSX.Element;
+declare const meta: Meta<typeof SectionStory>;
+export default meta;
+type Story = StoryObj<typeof SectionStory>;
+export declare const Loaded: Story;
+export declare const Empty: Story;
+export declare const Loading: Story;
+export declare const LoadError: Story;
+//# sourceMappingURL=workspace-secrets-section.stories.d.ts.map

package/dist/components/workspace-secrets-section.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-secrets-section.stories.d.ts","sourceRoot":"","sources":["../../src/components/workspace-secrets-section.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAgDhE,KAAK,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAyBzD,iBAAS,YAAY,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAC,+BAcrD;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAInC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/workspace-secrets-section.stories.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { configureApiClient } from '@shipfox/client-api';
+import { Toaster } from '@shipfox/react-ui/toast';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useEffect, useMemo } from 'react';
+import { within } from 'storybook/test';
+import { WorkspaceSecretsSection } from './workspace-secrets-section.js';
+// Freeze the clock only while a story is mounted so RelativeTime renders a stable
+// string in argos snapshots, without leaking the override to other stories.
+const FROZEN_NOW = Date.parse('2026-07-02T00:00:00.000Z');
+const realDateNow = Date.now;
+const withFrozenClock = (Story)=>{
+    Date.now = ()=>FROZEN_NOW;
+    useEffect(()=>()=>{
+            Date.now = realDateNow;
+        }, []);
+    return /*#__PURE__*/ _jsx(Story, {});
+};
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const EDITOR_ID = '22222222-2222-4222-8222-222222222222';
+const SECRETS = [
+    {
+        key: 'API_TOKEN',
+        project_id: null,
+        created_at: '2026-05-01T10:00:00.000Z',
+        updated_at: '2026-06-30T12:00:00.000Z',
+        last_edited_by: EDITOR_ID
+    },
+    {
+        key: 'DATABASE_URL',
+        project_id: null,
+        created_at: '2026-04-01T10:00:00.000Z',
+        updated_at: '2026-06-25T12:00:00.000Z',
+        last_edited_by: EDITOR_ID
+    },
+    {
+        key: 'STRIPE_SECRET_KEY',
+        project_id: null,
+        created_at: '2026-03-01T10:00:00.000Z',
+        updated_at: '2026-06-20T12:00:00.000Z',
+        last_edited_by: null
+    }
+];
+const RETRY_BUTTON = /retry/i;
+function fetchForScenario(scenario) {
+    return ()=>{
+        if (scenario === 'loading') return new Promise(()=>undefined);
+        if (scenario === 'error') {
+            return Promise.resolve(new Response(JSON.stringify({
+                code: 'server-error',
+                message: 'Something failed'
+            }), {
+                status: 500,
+                headers: {
+                    'content-type': 'application/json'
+                }
+            }));
+        }
+        const secrets = scenario === 'empty' ? [] : SECRETS;
+        return Promise.resolve(new Response(JSON.stringify({
+            secrets,
+            next_cursor: null
+        }), {
+            status: 200,
+            headers: {
+                'content-type': 'application/json'
+            }
+        }));
+    };
+}
+function SectionStory({ scenario }) {
+    configureApiClient({
+        baseUrl: 'https://api.example.test',
+        fetchImpl: fetchForScenario(scenario)
+    });
+    const queryClient = useMemo(()=>new QueryClient({
+            defaultOptions: {
+                queries: {
+                    retry: false
+                }
+            }
+        }), []);
+    return /*#__PURE__*/ _jsxs(QueryClientProvider, {
+        client: queryClient,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "w-[720px] p-24",
+                children: /*#__PURE__*/ _jsx(WorkspaceSecretsSection, {
+                    workspaceId: WORKSPACE_ID
+                })
+            }),
+            /*#__PURE__*/ _jsx(Toaster, {})
+        ]
+    });
+}
+const meta = {
+    title: 'Secrets/WorkspaceSecretsSection',
+    component: SectionStory,
+    decorators: [
+        withFrozenClock
+    ]
+};
+export default meta;
+export const Loaded = {
+    args: {
+        scenario: 'loaded'
+    },
+    play: async ({ canvasElement })=>{
+        const canvas = within(canvasElement);
+        await canvas.findByText('API_TOKEN');
+        await canvas.findByRole('button', {
+            name: 'Copy secret name API_TOKEN'
+        });
+    }
+};
+export const Empty = {
+    args: {
+        scenario: 'empty'
+    },
+    play: async ({ canvasElement })=>{
+        await within(canvasElement).findByText('No secrets yet');
+    }
+};
+export const Loading = {
+    args: {
+        scenario: 'loading'
+    }
+};
+export const LoadError = {
+    args: {
+        scenario: 'error'
+    },
+    play: async ({ canvasElement })=>{
+        await within(canvasElement).findByRole('button', {
+            name: RETRY_BUTTON
+        });
+    }
+};
+
+//# sourceMappingURL=workspace-secrets-section.stories.js.map

package/dist/components/workspace-secrets-section.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/workspace-secrets-section.stories.tsx"],"sourcesContent":["import type {SecretDto} from '@shipfox/api-secrets-dto';\nimport {configureApiClient} from '@shipfox/client-api';\nimport {Toaster} from '@shipfox/react-ui/toast';\nimport type {Decorator, Meta, StoryObj} from '@storybook/react';\nimport {QueryClient, QueryClientProvider} from '@tanstack/react-query';\nimport {useEffect, useMemo} from 'react';\nimport {within} from 'storybook/test';\nimport {WorkspaceSecretsSection} from './workspace-secrets-section.js';\n\n// Freeze the clock only while a story is mounted so RelativeTime renders a stable\n// string in argos snapshots, without leaking the override to other stories.\nconst FROZEN_NOW = Date.parse('2026-07-02T00:00:00.000Z');\nconst realDateNow = Date.now;\nconst withFrozenClock: Decorator = (Story) => {\n  Date.now = () => FROZEN_NOW;\n  useEffect(\n    () => () => {\n      Date.now = realDateNow;\n    },\n    [],\n  );\n  return <Story />;\n};\n\nconst WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';\nconst EDITOR_ID = '22222222-2222-4222-8222-222222222222';\n\nconst SECRETS: SecretDto[] = [\n  {\n    key: 'API_TOKEN',\n    project_id: null,\n    created_at: '2026-05-01T10:00:00.000Z',\n    updated_at: '2026-06-30T12:00:00.000Z',\n    last_edited_by: EDITOR_ID,\n  },\n  {\n    key: 'DATABASE_URL',\n    project_id: null,\n    created_at: '2026-04-01T10:00:00.000Z',\n    updated_at: '2026-06-25T12:00:00.000Z',\n    last_edited_by: EDITOR_ID,\n  },\n  {\n    key: 'STRIPE_SECRET_KEY',\n    project_id: null,\n    created_at: '2026-03-01T10:00:00.000Z',\n    updated_at: '2026-06-20T12:00:00.000Z',\n    last_edited_by: null,\n  },\n];\n\ntype Scenario = 'loaded' | 'empty' | 'loading' | 'error';\n\nconst RETRY_BUTTON = /retry/i;\n\nfunction fetchForScenario(scenario: Scenario): typeof fetch {\n  return (() => {\n    if (scenario === 'loading') return new Promise<Response>(() => undefined);\n    if (scenario === 'error') {\n      return Promise.resolve(\n        new Response(JSON.stringify({code: 'server-error', message: 'Something failed'}), {\n          status: 500,\n          headers: {'content-type': 'application/json'},\n        }),\n      );\n    }\n    const secrets = scenario === 'empty' ? [] : SECRETS;\n    return Promise.resolve(\n      new Response(JSON.stringify({secrets, next_cursor: null}), {\n        status: 200,\n        headers: {'content-type': 'application/json'},\n      }),\n    );\n  }) as unknown as typeof fetch;\n}\n\nfunction SectionStory({scenario}: {scenario: Scenario}) {\n  configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: fetchForScenario(scenario)});\n  const queryClient = useMemo(\n    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),\n    [],\n  );\n  return (\n    <QueryClientProvider client={queryClient}>\n      <div className=\"w-[720px] p-24\">\n        <WorkspaceSecretsSection workspaceId={WORKSPACE_ID} />\n      </div>\n      <Toaster />\n    </QueryClientProvider>\n  );\n}\n\nconst meta: Meta<typeof SectionStory> = {\n  title: 'Secrets/WorkspaceSecretsSection',\n  component: SectionStory,\n  decorators: [withFrozenClock],\n};\nexport default meta;\n\ntype Story = StoryObj<typeof SectionStory>;\n\nexport const Loaded: Story = {\n  args: {scenario: 'loaded'},\n  play: async ({canvasElement}) => {\n    const canvas = within(canvasElement);\n\n    await canvas.findByText('API_TOKEN');\n    await canvas.findByRole('button', {name: 'Copy secret name API_TOKEN'});\n  },\n};\n\nexport const Empty: Story = {\n  args: {scenario: 'empty'},\n  play: async ({canvasElement}) => {\n    await within(canvasElement).findByText('No secrets yet');\n  },\n};\n\nexport const Loading: Story = {\n  args: {scenario: 'loading'},\n};\n\nexport const LoadError: Story = {\n  args: {scenario: 'error'},\n  play: async ({canvasElement}) => {\n    await within(canvasElement).findByRole('button', {name: RETRY_BUTTON});\n  },\n};\n"],"names":["configureApiClient","Toaster","QueryClient","QueryClientProvider","useEffect","useMemo","within","WorkspaceSecretsSection","FROZEN_NOW","Date","parse","realDateNow","now","withFrozenClock","Story","WORKSPACE_ID","EDITOR_ID","SECRETS","key","project_id","created_at","updated_at","last_edited_by","RETRY_BUTTON","fetchForScenario","scenario","Promise","undefined","resolve","Response","JSON","stringify","code","message","status","headers","secrets","next_cursor","SectionStory","baseUrl","fetchImpl","queryClient","defaultOptions","queries","retry","client","div","className","workspaceId","meta","title","component","decorators","Loaded","args","play","canvasElement","canvas","findByText","findByRole","name","Empty","Loading","LoadError"],"mappings":"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"}

package/dist/components/workspace-variables-section.d.ts

@@ -0,0 +1,4 @@
+export declare function WorkspaceVariablesSection({ workspaceId }: {
+    workspaceId: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=workspace-variables-section.d.ts.map

package/dist/components/workspace-variables-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-variables-section.d.ts","sourceRoot":"","sources":["../../src/components/workspace-variables-section.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,yBAAyB,CAAC,EAAC,WAAW,EAAC,EAAE;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,+BA0I7E"}