@shipfox/client-secrets 0.2.0

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

@@ -0,0 +1,255 @@
+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 { useDeleteVariableMutation, useVariablesQuery } from '#hooks/api/variables.js';
+import { copyKeyName } from './copy-key.js';
+import { DeleteEntryDialog } from './delete-entry-dialog.js';
+import { secretsErrorToFormError } from './form-errors.js';
+import { StoreRowsSkeleton, StoreSurface } from './store-section-shell.js';
+import { VariableForm } from './variable-form.js';
+const VARIABLES_DESCRIPTION = 'Plaintext configuration values for non-sensitive data like regions, flags, and log levels.';
+const EMPTY_VARIABLES_DESCRIPTION = 'Create a variable to store non-sensitive configuration like regions, flags, and log levels.';
+export function WorkspaceVariablesSection({ workspaceId }) {
+    const variablesQuery = useVariablesQuery(workspaceId);
+    const deleteVariable = useDeleteVariableMutation();
+    const [formState, setFormState] = useState(null);
+    const [deleteKey, setDeleteKey] = useState(null);
+    const [deleteError, setDeleteError] = useState();
+    const variables = useMemo(()=>[
+            ...variablesQuery.data ?? []
+        ].sort((a, b)=>a.key.localeCompare(b.key)), [
+        variablesQuery.data
+    ]);
+    function closeDelete() {
+        setDeleteKey(null);
+        setDeleteError(undefined);
+    }
+    return /*#__PURE__*/ _jsxs(RelativeTimeProvider, {
+        children: [
+            /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-16",
+                "aria-label": "Variables",
+                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: "Variables"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        size: "sm",
+                                        className: "text-foreground-neutral-muted",
+                                        children: VARIABLES_DESCRIPTION
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "sm",
+                                onClick: ()=>setFormState({
+                                        mode: 'create'
+                                    }),
+                                children: "Create variable"
+                            })
+                        ]
+                    }),
+                    variablesQuery.isPending ? /*#__PURE__*/ _jsx(StoreRowsSkeleton, {
+                        label: "Loading variables"
+                    }) : null,
+                    variablesQuery.isError && variablesQuery.data === undefined ? /*#__PURE__*/ _jsx(StoreSurface, {
+                        className: "px-16",
+                        children: /*#__PURE__*/ _jsx(QueryLoadError, {
+                            query: variablesQuery,
+                            subject: "variables"
+                        })
+                    }) : null,
+                    variablesQuery.data !== undefined && variables.length === 0 ? /*#__PURE__*/ _jsx(StoreSurface, {
+                        className: "px-16",
+                        children: /*#__PURE__*/ _jsx(EmptyState, {
+                            icon: "bracesLine",
+                            title: "No variables yet",
+                            description: EMPTY_VARIABLES_DESCRIPTION,
+                            action: /*#__PURE__*/ _jsx(Button, {
+                                size: "sm",
+                                onClick: ()=>setFormState({
+                                        mode: 'create'
+                                    }),
+                                children: "Create variable"
+                            })
+                        })
+                    }) : null,
+                    variables.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: variables.map((variable)=>/*#__PURE__*/ _jsx(VariableRow, {
+                                            variable: variable,
+                                            onEdit: ()=>setFormState({
+                                                    mode: 'edit',
+                                                    variable
+                                                }),
+                                            onDelete: ()=>setDeleteKey(variable.key)
+                                        }, variable.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 variable' : 'Create variable'
+                            })
+                        }),
+                        formState ? /*#__PURE__*/ _jsx(VariableForm, {
+                            workspaceId: workspaceId,
+                            mode: formState.mode,
+                            existingKey: formState.mode === 'edit' ? formState.variable.key : undefined,
+                            existingValue: formState.mode === 'edit' ? formState.variable.value : undefined,
+                            existingValueTruncated: formState.mode === 'edit' ? formState.variable.value_truncated : undefined,
+                            reservedKeys: variables.map((variable)=>variable.key),
+                            onSaved: ()=>{
+                                const wasEdit = formState.mode === 'edit';
+                                setFormState(null);
+                                toast.success(wasEdit ? 'Variable updated' : 'Variable created');
+                            },
+                            onCancel: ()=>setFormState(null)
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(DeleteEntryDialog, {
+                open: deleteKey !== null,
+                onOpenChange: (open)=>{
+                    if (!open) closeDelete();
+                },
+                entryKey: deleteKey ?? '',
+                isLoading: deleteVariable.isPending,
+                errorMessage: deleteError,
+                onConfirm: async ()=>{
+                    if (deleteKey === null) return;
+                    setDeleteError(undefined);
+                    try {
+                        await deleteVariable.mutateAsync({
+                            workspaceId,
+                            key: deleteKey
+                        });
+                        toast.success('Variable deleted');
+                        closeDelete();
+                    } catch (error) {
+                        setDeleteError(secretsErrorToFormError(error).message);
+                    }
+                }
+            })
+        ]
+    });
+}
+function VariableRow({ variable, 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 variable name ${variable.key}`,
+                    onClick: ()=>void copyKeyName(variable.key),
+                    children: /*#__PURE__*/ _jsx(Code, {
+                        as: "span",
+                        variant: "paragraph",
+                        className: "truncate",
+                        children: variable.key
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                children: /*#__PURE__*/ _jsx("span", {
+                    title: variable.value,
+                    className: "block max-w-[280px] truncate font-code text-foreground-neutral-base",
+                    children: variable.value === '' ? /*#__PURE__*/ _jsx("span", {
+                        className: "text-foreground-neutral-muted",
+                        children: "(empty)"
+                    }) : variable.value
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                className: "text-foreground-neutral-muted",
+                children: /*#__PURE__*/ _jsx(RelativeTime, {
+                    value: variable.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 ${variable.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-variables-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/workspace-variables-section.tsx"],"sourcesContent":["import type {VariableListItemDto} 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 {useDeleteVariableMutation, useVariablesQuery} from '#hooks/api/variables.js';\nimport {copyKeyName} from './copy-key.js';\nimport {DeleteEntryDialog} from './delete-entry-dialog.js';\nimport {secretsErrorToFormError} from './form-errors.js';\nimport {StoreRowsSkeleton, StoreSurface} from './store-section-shell.js';\nimport {VariableForm} from './variable-form.js';\n\nconst VARIABLES_DESCRIPTION =\n  'Plaintext configuration values for non-sensitive data like regions, flags, and log levels.';\nconst EMPTY_VARIABLES_DESCRIPTION =\n  'Create a variable to store non-sensitive configuration like regions, flags, and log levels.';\n\ntype FormState = {mode: 'create'} | {mode: 'edit'; variable: VariableListItemDto} | null;\n\nexport function WorkspaceVariablesSection({workspaceId}: {workspaceId: string}) {\n  const variablesQuery = useVariablesQuery(workspaceId);\n  const deleteVariable = useDeleteVariableMutation();\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 variables = useMemo(\n    () => [...(variablesQuery.data ?? [])].sort((a, b) => a.key.localeCompare(b.key)),\n    [variablesQuery.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=\"Variables\">\n        <div className=\"flex items-start justify-between gap-16\">\n          <div className=\"flex flex-col gap-4\">\n            <Header variant=\"h3\">Variables</Header>\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              {VARIABLES_DESCRIPTION}\n            </Text>\n          </div>\n          <Button size=\"sm\" onClick={() => setFormState({mode: 'create'})}>\n            Create variable\n          </Button>\n        </div>\n\n        {variablesQuery.isPending ? <StoreRowsSkeleton label=\"Loading variables\" /> : null}\n\n        {variablesQuery.isError && variablesQuery.data === undefined ? (\n          <StoreSurface className=\"px-16\">\n            <QueryLoadError query={variablesQuery} subject=\"variables\" />\n          </StoreSurface>\n        ) : null}\n\n        {variablesQuery.data !== undefined && variables.length === 0 ? (\n          <StoreSurface className=\"px-16\">\n            <EmptyState\n              icon=\"bracesLine\"\n              title=\"No variables yet\"\n              description={EMPTY_VARIABLES_DESCRIPTION}\n              action={\n                <Button size=\"sm\" onClick={() => setFormState({mode: 'create'})}>\n                  Create variable\n                </Button>\n              }\n            />\n          </StoreSurface>\n        ) : null}\n\n        {variables.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                {variables.map((variable) => (\n                  <VariableRow\n                    key={variable.key}\n                    variable={variable}\n                    onEdit={() => setFormState({mode: 'edit', variable})}\n                    onDelete={() => setDeleteKey(variable.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 variable' : 'Create variable'}\n            </ModalTitle>\n          </ModalHeader>\n          {formState ? (\n            <VariableForm\n              workspaceId={workspaceId}\n              mode={formState.mode}\n              existingKey={formState.mode === 'edit' ? formState.variable.key : undefined}\n              existingValue={formState.mode === 'edit' ? formState.variable.value : undefined}\n              existingValueTruncated={\n                formState.mode === 'edit' ? formState.variable.value_truncated : undefined\n              }\n              reservedKeys={variables.map((variable) => variable.key)}\n              onSaved={() => {\n                const wasEdit = formState.mode === 'edit';\n                setFormState(null);\n                toast.success(wasEdit ? 'Variable updated' : 'Variable 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={deleteVariable.isPending}\n        errorMessage={deleteError}\n        onConfirm={async () => {\n          if (deleteKey === null) return;\n          setDeleteError(undefined);\n          try {\n            await deleteVariable.mutateAsync({workspaceId, key: deleteKey});\n            toast.success('Variable deleted');\n            closeDelete();\n          } catch (error) {\n            setDeleteError(secretsErrorToFormError(error).message);\n          }\n        }}\n      />\n    </RelativeTimeProvider>\n  );\n}\n\nfunction VariableRow({\n  variable,\n  onEdit,\n  onDelete,\n}: {\n  variable: VariableListItemDto;\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 variable name ${variable.key}`}\n          onClick={() => void copyKeyName(variable.key)}\n        >\n          <Code as=\"span\" variant=\"paragraph\" className=\"truncate\">\n            {variable.key}\n          </Code>\n        </button>\n      </TableCell>\n      <TableCell>\n        <span\n          title={variable.value}\n          className=\"block max-w-[280px] truncate font-code text-foreground-neutral-base\"\n        >\n          {variable.value === '' ? (\n            <span className=\"text-foreground-neutral-muted\">(empty)</span>\n          ) : (\n            variable.value\n          )}\n        </span>\n      </TableCell>\n      <TableCell className=\"text-foreground-neutral-muted\">\n        <RelativeTime value={variable.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 ${variable.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","useDeleteVariableMutation","useVariablesQuery","copyKeyName","DeleteEntryDialog","secretsErrorToFormError","StoreRowsSkeleton","StoreSurface","VariableForm","VARIABLES_DESCRIPTION","EMPTY_VARIABLES_DESCRIPTION","WorkspaceVariablesSection","workspaceId","variablesQuery","deleteVariable","formState","setFormState","deleteKey","setDeleteKey","deleteError","setDeleteError","variables","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","variable","VariableRow","onEdit","onDelete","open","onOpenChange","existingKey","existingValue","value","existingValueTruncated","value_truncated","reservedKeys","onSaved","wasEdit","success","onCancel","entryKey","isLoading","errorMessage","onConfirm","mutateAsync","error","message","button","type","as","updated_at","asChild","align","onSelect"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+type Scenario = 'loaded' | 'empty';
+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;
+//# sourceMappingURL=workspace-variables-section.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-variables-section.stories.d.ts","sourceRoot":"","sources":["../../src/components/workspace-variables-section.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AA+DhE,KAAK,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAcnC,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"}

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

@@ -0,0 +1,127 @@
+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 { WorkspaceVariablesSection } from './workspace-variables-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 VARIABLES = [
+    {
+        key: 'LOG_LEVEL',
+        value: 'debug',
+        value_truncated: false,
+        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: 'FEATURE_FLAG',
+        value: '',
+        value_truncated: false,
+        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: 'TLS_CERT',
+        value: '-----BEGIN CERTIFICATE-----',
+        value_truncated: true,
+        project_id: null,
+        created_at: '2026-03-15T10:00:00.000Z',
+        updated_at: '2026-06-22T12:00:00.000Z',
+        last_edited_by: EDITOR_ID
+    },
+    {
+        key: 'REGION',
+        value: 'eu-west-1',
+        value_truncated: false,
+        project_id: null,
+        created_at: '2026-03-01T10:00:00.000Z',
+        updated_at: '2026-06-20T12:00:00.000Z',
+        last_edited_by: null
+    }
+];
+function fetchForScenario(scenario) {
+    return ()=>{
+        const variables = scenario === 'empty' ? [] : VARIABLES;
+        return Promise.resolve(new Response(JSON.stringify({
+            variables,
+            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(WorkspaceVariablesSection, {
+                    workspaceId: WORKSPACE_ID
+                })
+            }),
+            /*#__PURE__*/ _jsx(Toaster, {})
+        ]
+    });
+}
+const meta = {
+    title: 'Secrets/WorkspaceVariablesSection',
+    component: SectionStory,
+    decorators: [
+        withFrozenClock
+    ]
+};
+export default meta;
+export const Loaded = {
+    args: {
+        scenario: 'loaded'
+    },
+    play: async ({ canvasElement })=>{
+        const canvas = within(canvasElement);
+        await canvas.findByText('LOG_LEVEL');
+        await canvas.findByRole('button', {
+            name: 'Copy variable name LOG_LEVEL'
+        });
+    }
+};
+export const Empty = {
+    args: {
+        scenario: 'empty'
+    },
+    play: async ({ canvasElement })=>{
+        await within(canvasElement).findByText('No variables yet');
+    }
+};
+
+//# sourceMappingURL=workspace-variables-section.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/workspace-variables-section.stories.tsx"],"sourcesContent":["import type {VariableListItemDto} 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 {WorkspaceVariablesSection} from './workspace-variables-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 VARIABLES: VariableListItemDto[] = [\n  {\n    key: 'LOG_LEVEL',\n    value: 'debug',\n    value_truncated: false,\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: 'FEATURE_FLAG',\n    value: '',\n    value_truncated: false,\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: 'TLS_CERT',\n    value: '-----BEGIN CERTIFICATE-----',\n    value_truncated: true,\n    project_id: null,\n    created_at: '2026-03-15T10:00:00.000Z',\n    updated_at: '2026-06-22T12:00:00.000Z',\n    last_edited_by: EDITOR_ID,\n  },\n  {\n    key: 'REGION',\n    value: 'eu-west-1',\n    value_truncated: false,\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';\n\nfunction fetchForScenario(scenario: Scenario): typeof fetch {\n  return (() => {\n    const variables = scenario === 'empty' ? [] : VARIABLES;\n    return Promise.resolve(\n      new Response(JSON.stringify({variables, 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        <WorkspaceVariablesSection workspaceId={WORKSPACE_ID} />\n      </div>\n      <Toaster />\n    </QueryClientProvider>\n  );\n}\n\nconst meta: Meta<typeof SectionStory> = {\n  title: 'Secrets/WorkspaceVariablesSection',\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('LOG_LEVEL');\n    await canvas.findByRole('button', {name: 'Copy variable name LOG_LEVEL'});\n  },\n};\n\nexport const Empty: Story = {\n  args: {scenario: 'empty'},\n  play: async ({canvasElement}) => {\n    await within(canvasElement).findByText('No variables yet');\n  },\n};\n"],"names":["configureApiClient","Toaster","QueryClient","QueryClientProvider","useEffect","useMemo","within","WorkspaceVariablesSection","FROZEN_NOW","Date","parse","realDateNow","now","withFrozenClock","Story","WORKSPACE_ID","EDITOR_ID","VARIABLES","key","value","value_truncated","project_id","created_at","updated_at","last_edited_by","fetchForScenario","scenario","variables","Promise","resolve","Response","JSON","stringify","next_cursor","status","headers","SectionStory","baseUrl","fetchImpl","queryClient","defaultOptions","queries","retry","client","div","className","workspaceId","meta","title","component","decorators","Loaded","args","play","canvasElement","canvas","findByText","findByRole","name","Empty"],"mappings":";AACA,SAAQA,kBAAkB,QAAO,sBAAsB;AACvD,SAAQC,OAAO,QAAO,0BAA0B;AAEhD,SAAQC,WAAW,EAAEC,mBAAmB,QAAO,wBAAwB;AACvE,SAAQC,SAAS,EAAEC,OAAO,QAAO,QAAQ;AACzC,SAAQC,MAAM,QAAO,iBAAiB;AACtC,SAAQC,yBAAyB,QAAO,mCAAmC;AAE3E,kFAAkF;AAClF,4EAA4E;AAC5E,MAAMC,aAAaC,KAAKC,KAAK,CAAC;AAC9B,MAAMC,cAAcF,KAAKG,GAAG;AAC5B,MAAMC,kBAA6B,CAACC;IAClCL,KAAKG,GAAG,GAAG,IAAMJ;IACjBJ,UACE,IAAM;YACJK,KAAKG,GAAG,GAAGD;QACb,GACA,EAAE;IAEJ,qBAAO,KAACG;AACV;AAEA,MAAMC,eAAe;AACrB,MAAMC,YAAY;AAElB,MAAMC,YAAmC;IACvC;QACEC,KAAK;QACLC,OAAO;QACPC,iBAAiB;QACjBC,YAAY;QACZC,YAAY;QACZC,YAAY;QACZC,gBAAgBR;IAClB;IACA;QACEE,KAAK;QACLC,OAAO;QACPC,iBAAiB;QACjBC,YAAY;QACZC,YAAY;QACZC,YAAY;QACZC,gBAAgBR;IAClB;IACA;QACEE,KAAK;QACLC,OAAO;QACPC,iBAAiB;QACjBC,YAAY;QACZC,YAAY;QACZC,YAAY;QACZC,gBAAgBR;IAClB;IACA;QACEE,KAAK;QACLC,OAAO;QACPC,iBAAiB;QACjBC,YAAY;QACZC,YAAY;QACZC,YAAY;QACZC,gBAAgB;IAClB;CACD;AAID,SAASC,iBAAiBC,QAAkB;IAC1C,OAAQ;QACN,MAAMC,YAAYD,aAAa,UAAU,EAAE,GAAGT;QAC9C,OAAOW,QAAQC,OAAO,CACpB,IAAIC,SAASC,KAAKC,SAAS,CAAC;YAACL;YAAWM,aAAa;QAAI,IAAI;YAC3DC,QAAQ;YACRC,SAAS;gBAAC,gBAAgB;YAAkB;QAC9C;IAEJ;AACF;AAEA,SAASC,aAAa,EAACV,QAAQ,EAAuB;IACpD1B,mBAAmB;QAACqC,SAAS;QAA4BC,WAAWb,iBAAiBC;IAAS;IAC9F,MAAMa,cAAclC,QAClB,IAAM,IAAIH,YAAY;YAACsC,gBAAgB;gBAACC,SAAS;oBAACC,OAAO;gBAAK;YAAC;QAAC,IAChE,EAAE;IAEJ,qBACE,MAACvC;QAAoBwC,QAAQJ;;0BAC3B,KAACK;gBAAIC,WAAU;0BACb,cAAA,KAACtC;oBAA0BuC,aAAa/B;;;0BAE1C,KAACd;;;AAGP;AAEA,MAAM8C,OAAkC;IACtCC,OAAO;IACPC,WAAWb;IACXc,YAAY;QAACrC;KAAgB;AAC/B;AACA,eAAekC,KAAK;AAIpB,OAAO,MAAMI,SAAgB;IAC3BC,MAAM;QAAC1B,UAAU;IAAQ;IACzB2B,MAAM,OAAO,EAACC,aAAa,EAAC;QAC1B,MAAMC,SAASjD,OAAOgD;QAEtB,MAAMC,OAAOC,UAAU,CAAC;QACxB,MAAMD,OAAOE,UAAU,CAAC,UAAU;YAACC,MAAM;QAA8B;IACzE;AACF,EAAE;AAEF,OAAO,MAAMC,QAAe;IAC1BP,MAAM;QAAC1B,UAAU;IAAO;IACxB2B,MAAM,OAAO,EAACC,aAAa,EAAC;QAC1B,MAAMhD,OAAOgD,eAAeE,UAAU,CAAC;IACzC;AACF,EAAE"}

package/dist/hooks/api/create-store-api.d.ts

@@ -0,0 +1,56 @@
+import { type SecretWriteWarningDto } from '@shipfox/api-secrets-dto';
+/**
+ * Secrets and variables share an identical management surface (list / put /
+ * delete under `/workspaces/:id/{resource}`); only the response envelope keys
+ * and DTO types differ. This factory builds the typed transport functions,
+ * query keys, and React Query hooks for one resource so `secrets.ts` and
+ * `variables.ts` stay thin instantiations. The forms and sections diverge
+ * (write-only vs readable) and are kept separate on purpose.
+ */
+export interface CreateStoreApiConfig<TItem, TListResponse, TPutResponse> {
+    /** URL segment and query-key namespace, e.g. `'secrets'` or `'variables'`. */
+    resource: string;
+    /** Pulls the item array out of a list response. */
+    listItems: (response: TListResponse) => TItem[];
+    /** Pulls the single item out of a put response. */
+    putItem: (response: TPutResponse) => TItem;
+}
+export interface PutResult<TItem> {
+    item: TItem;
+    warnings: SecretWriteWarningDto[];
+}
+export declare function createStoreApi<TItem, TListResponse, TPutBody, TPutResponse extends {
+    warnings: SecretWriteWarningDto[];
+}>(config: CreateStoreApiConfig<TItem, TListResponse, TPutResponse>): {
+    queryKeys: {
+        all: readonly [string];
+        list: (workspaceId: string) => readonly [string, "list", string];
+    };
+    listAll: (params: {
+        workspaceId: string;
+        projectId?: string | undefined;
+        signal?: AbortSignal | undefined;
+    }) => Promise<TItem[]>;
+    put: (params: {
+        workspaceId: string;
+        key: string;
+        body: TPutBody;
+    }) => Promise<PutResult<TItem>>;
+    remove: (params: {
+        workspaceId: string;
+        key: string;
+        projectId?: string | undefined;
+    }) => Promise<void>;
+    useListQuery: (workspaceId: string | undefined) => import("@tanstack/react-query").UseQueryResult<NoInfer<TItem[]>, Error>;
+    usePutMutation: () => import("@tanstack/react-query").UseMutationResult<PutResult<TItem>, Error, {
+        workspaceId: string;
+        key: string;
+        body: TPutBody;
+    }, unknown>;
+    useDeleteMutation: () => import("@tanstack/react-query").UseMutationResult<void, Error, {
+        workspaceId: string;
+        key: string;
+        projectId?: string | undefined;
+    }, unknown>;
+};
+//# sourceMappingURL=create-store-api.d.ts.map

package/dist/hooks/api/create-store-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-store-api.d.ts","sourceRoot":"","sources":["../../../src/hooks/api/create-store-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,qBAAqB,EAAC,MAAM,0BAA0B,CAAC;AAI5F;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY;IACtE,8EAA8E;IAC9E,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,SAAS,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,KAAK,EAAE,CAAC;IAChD,mDAAmD;IACnD,OAAO,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,KAAK,CAAC;CAC5C;AAED,MAAM,WAAW,SAAS,CAAC,KAAK;IAC9B,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,qBAAqB,EAAE,CAAC;CACnC;AAED,wBAAgB,cAAc,CAC5B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,YAAY,SAAS;IAAC,QAAQ,EAAE,qBAAqB,EAAE,CAAA;CAAC,EACxD,MAAM,EAAE,oBAAoB,CAAC,KAAK,EAAE,aAAa,EAAE,YAAY,CAAC;;;4BAK1C,MAAM;;sBAMG;QAC7B,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;KAClC,KAAG,OAAO,CAAC,KAAK,EAAE,CAAC;kBAUO;QACzB,WAAW,EAAE,MAAM,CAAC;QACpB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,QAAQ,CAAC;KAChB,KAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;qBAQC;QAC5B,WAAW,EAAE,MAAM,CAAC;QACpB,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAChC,KAAG,OAAO,CAAC,IAAI,CAAC;gCAUkB,MAAM,GAAG,SAAS;;qBAzBtC,MAAM;aACd,MAAM;cACL,QAAQ;;;qBAUD,MAAM;aACd,MAAM;oBACC,MAAM,GAAG,SAAS;;EA0CjC"}

package/dist/hooks/api/create-store-api.js

@@ -0,0 +1,95 @@
+import { SECRETS_MAX_LIST_LIMIT } from '@shipfox/api-secrets-dto';
+import { apiRequest } from '@shipfox/client-api';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+export function createStoreApi(config) {
+    const { resource, listItems, putItem } = config;
+    const queryKeys = {
+        all: [
+            resource
+        ],
+        list: (workspaceId)=>[
+                resource,
+                'list',
+                workspaceId
+            ]
+    };
+    // The store is a bounded set (per-workspace cap), so the UI fetches every key
+    // in one call rather than paginating: request the max limit and ignore the
+    // cursor. See SECRETS_MAX_LIST_LIMIT / the S1a list route.
+    async function listAll(params) {
+        const search = new URLSearchParams({
+            limit: String(SECRETS_MAX_LIST_LIMIT)
+        });
+        if (params.projectId) search.set('project_id', params.projectId);
+        const response = await apiRequest(`/workspaces/${params.workspaceId}/${resource}?${search.toString()}`, {
+            signal: params.signal
+        });
+        return listItems(response);
+    }
+    async function put(params) {
+        const response = await apiRequest(`/workspaces/${params.workspaceId}/${resource}/${encodeURIComponent(params.key)}`, {
+            method: 'PUT',
+            body: params.body
+        });
+        return {
+            item: putItem(response),
+            warnings: response.warnings
+        };
+    }
+    async function remove(params) {
+        const search = params.projectId ? `?${new URLSearchParams({
+            project_id: params.projectId
+        }).toString()}` : '';
+        await apiRequest(`/workspaces/${params.workspaceId}/${resource}/${encodeURIComponent(params.key)}${search}`, {
+            method: 'DELETE'
+        });
+    }
+    function useListQuery(workspaceId) {
+        return useQuery({
+            queryKey: workspaceId ? queryKeys.list(workspaceId) : [
+                resource,
+                'list'
+            ],
+            enabled: Boolean(workspaceId),
+            queryFn: ({ signal })=>listAll({
+                    workspaceId: workspaceId ?? '',
+                    signal
+                })
+        });
+    }
+    function usePutMutation() {
+        const queryClient = useQueryClient();
+        return useMutation({
+            mutationFn: put,
+            // Invalidate the whole resource namespace so the per-item detail cache
+            // (full variable values) is refreshed too, not just the list.
+            onSuccess: async ()=>{
+                await queryClient.invalidateQueries({
+                    queryKey: queryKeys.all
+                });
+            }
+        });
+    }
+    function useDeleteMutation() {
+        const queryClient = useQueryClient();
+        return useMutation({
+            mutationFn: remove,
+            onSuccess: async ()=>{
+                await queryClient.invalidateQueries({
+                    queryKey: queryKeys.all
+                });
+            }
+        });
+    }
+    return {
+        queryKeys,
+        listAll,
+        put,
+        remove,
+        useListQuery,
+        usePutMutation,
+        useDeleteMutation
+    };
+}
+
+//# sourceMappingURL=create-store-api.js.map

package/dist/hooks/api/create-store-api.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/api/create-store-api.ts"],"sourcesContent":["import {SECRETS_MAX_LIST_LIMIT, type SecretWriteWarningDto} from '@shipfox/api-secrets-dto';\nimport {apiRequest} from '@shipfox/client-api';\nimport {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';\n\n/**\n * Secrets and variables share an identical management surface (list / put /\n * delete under `/workspaces/:id/{resource}`); only the response envelope keys\n * and DTO types differ. This factory builds the typed transport functions,\n * query keys, and React Query hooks for one resource so `secrets.ts` and\n * `variables.ts` stay thin instantiations. The forms and sections diverge\n * (write-only vs readable) and are kept separate on purpose.\n */\nexport interface CreateStoreApiConfig<TItem, TListResponse, TPutResponse> {\n  /** URL segment and query-key namespace, e.g. `'secrets'` or `'variables'`. */\n  resource: string;\n  /** Pulls the item array out of a list response. */\n  listItems: (response: TListResponse) => TItem[];\n  /** Pulls the single item out of a put response. */\n  putItem: (response: TPutResponse) => TItem;\n}\n\nexport interface PutResult<TItem> {\n  item: TItem;\n  warnings: SecretWriteWarningDto[];\n}\n\nexport function createStoreApi<\n  TItem,\n  TListResponse,\n  TPutBody,\n  TPutResponse extends {warnings: SecretWriteWarningDto[]},\n>(config: CreateStoreApiConfig<TItem, TListResponse, TPutResponse>) {\n  const {resource, listItems, putItem} = config;\n\n  const queryKeys = {\n    all: [resource] as const,\n    list: (workspaceId: string) => [resource, 'list', workspaceId] as const,\n  };\n\n  // The store is a bounded set (per-workspace cap), so the UI fetches every key\n  // in one call rather than paginating: request the max limit and ignore the\n  // cursor. See SECRETS_MAX_LIST_LIMIT / the S1a list route.\n  async function listAll(params: {\n    workspaceId: string;\n    projectId?: string | undefined;\n    signal?: AbortSignal | undefined;\n  }): Promise<TItem[]> {\n    const search = new URLSearchParams({limit: String(SECRETS_MAX_LIST_LIMIT)});\n    if (params.projectId) search.set('project_id', params.projectId);\n    const response = await apiRequest<TListResponse>(\n      `/workspaces/${params.workspaceId}/${resource}?${search.toString()}`,\n      {signal: params.signal},\n    );\n    return listItems(response);\n  }\n\n  async function put(params: {\n    workspaceId: string;\n    key: string;\n    body: TPutBody;\n  }): Promise<PutResult<TItem>> {\n    const response = await apiRequest<TPutResponse>(\n      `/workspaces/${params.workspaceId}/${resource}/${encodeURIComponent(params.key)}`,\n      {method: 'PUT', body: params.body},\n    );\n    return {item: putItem(response), warnings: response.warnings};\n  }\n\n  async function remove(params: {\n    workspaceId: string;\n    key: string;\n    projectId?: string | undefined;\n  }): Promise<void> {\n    const search = params.projectId\n      ? `?${new URLSearchParams({project_id: params.projectId}).toString()}`\n      : '';\n    await apiRequest<void>(\n      `/workspaces/${params.workspaceId}/${resource}/${encodeURIComponent(params.key)}${search}`,\n      {method: 'DELETE'},\n    );\n  }\n\n  function useListQuery(workspaceId: string | undefined) {\n    return useQuery({\n      queryKey: workspaceId ? queryKeys.list(workspaceId) : [resource, 'list'],\n      enabled: Boolean(workspaceId),\n      queryFn: ({signal}) => listAll({workspaceId: workspaceId ?? '', signal}),\n    });\n  }\n\n  function usePutMutation() {\n    const queryClient = useQueryClient();\n    return useMutation({\n      mutationFn: put,\n      // Invalidate the whole resource namespace so the per-item detail cache\n      // (full variable values) is refreshed too, not just the list.\n      onSuccess: async () => {\n        await queryClient.invalidateQueries({queryKey: queryKeys.all});\n      },\n    });\n  }\n\n  function useDeleteMutation() {\n    const queryClient = useQueryClient();\n    return useMutation({\n      mutationFn: remove,\n      onSuccess: async () => {\n        await queryClient.invalidateQueries({queryKey: queryKeys.all});\n      },\n    });\n  }\n\n  return {queryKeys, listAll, put, remove, useListQuery, usePutMutation, useDeleteMutation};\n}\n"],"names":["SECRETS_MAX_LIST_LIMIT","apiRequest","useMutation","useQuery","useQueryClient","createStoreApi","config","resource","listItems","putItem","queryKeys","all","list","workspaceId","listAll","params","search","URLSearchParams","limit","String","projectId","set","response","toString","signal","put","encodeURIComponent","key","method","body","item","warnings","remove","project_id","useListQuery","queryKey","enabled","Boolean","queryFn","usePutMutation","queryClient","mutationFn","onSuccess","invalidateQueries","useDeleteMutation"],"mappings":"AAAA,SAAQA,sBAAsB,QAAmC,2BAA2B;AAC5F,SAAQC,UAAU,QAAO,sBAAsB;AAC/C,SAAQC,WAAW,EAAEC,QAAQ,EAAEC,cAAc,QAAO,wBAAwB;AAwB5E,OAAO,SAASC,eAKdC,MAAgE;IAChE,MAAM,EAACC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAC,GAAGH;IAEvC,MAAMI,YAAY;QAChBC,KAAK;YAACJ;SAAS;QACfK,MAAM,CAACC,cAAwB;gBAACN;gBAAU;gBAAQM;aAAY;IAChE;IAEA,8EAA8E;IAC9E,2EAA2E;IAC3E,2DAA2D;IAC3D,eAAeC,QAAQC,MAItB;QACC,MAAMC,SAAS,IAAIC,gBAAgB;YAACC,OAAOC,OAAOnB;QAAuB;QACzE,IAAIe,OAAOK,SAAS,EAAEJ,OAAOK,GAAG,CAAC,cAAcN,OAAOK,SAAS;QAC/D,MAAME,WAAW,MAAMrB,WACrB,CAAC,YAAY,EAAEc,OAAOF,WAAW,CAAC,CAAC,EAAEN,SAAS,CAAC,EAAES,OAAOO,QAAQ,IAAI,EACpE;YAACC,QAAQT,OAAOS,MAAM;QAAA;QAExB,OAAOhB,UAAUc;IACnB;IAEA,eAAeG,IAAIV,MAIlB;QACC,MAAMO,WAAW,MAAMrB,WACrB,CAAC,YAAY,EAAEc,OAAOF,WAAW,CAAC,CAAC,EAAEN,SAAS,CAAC,EAAEmB,mBAAmBX,OAAOY,GAAG,GAAG,EACjF;YAACC,QAAQ;YAAOC,MAAMd,OAAOc,IAAI;QAAA;QAEnC,OAAO;YAACC,MAAMrB,QAAQa;YAAWS,UAAUT,SAASS,QAAQ;QAAA;IAC9D;IAEA,eAAeC,OAAOjB,MAIrB;QACC,MAAMC,SAASD,OAAOK,SAAS,GAC3B,CAAC,CAAC,EAAE,IAAIH,gBAAgB;YAACgB,YAAYlB,OAAOK,SAAS;QAAA,GAAGG,QAAQ,IAAI,GACpE;QACJ,MAAMtB,WACJ,CAAC,YAAY,EAAEc,OAAOF,WAAW,CAAC,CAAC,EAAEN,SAAS,CAAC,EAAEmB,mBAAmBX,OAAOY,GAAG,IAAIX,QAAQ,EAC1F;YAACY,QAAQ;QAAQ;IAErB;IAEA,SAASM,aAAarB,WAA+B;QACnD,OAAOV,SAAS;YACdgC,UAAUtB,cAAcH,UAAUE,IAAI,CAACC,eAAe;gBAACN;gBAAU;aAAO;YACxE6B,SAASC,QAAQxB;YACjByB,SAAS,CAAC,EAACd,MAAM,EAAC,GAAKV,QAAQ;oBAACD,aAAaA,eAAe;oBAAIW;gBAAM;QACxE;IACF;IAEA,SAASe;QACP,MAAMC,cAAcpC;QACpB,OAAOF,YAAY;YACjBuC,YAAYhB;YACZ,uEAAuE;YACvE,8DAA8D;YAC9DiB,WAAW;gBACT,MAAMF,YAAYG,iBAAiB,CAAC;oBAACR,UAAUzB,UAAUC,GAAG;gBAAA;YAC9D;QACF;IACF;IAEA,SAASiC;QACP,MAAMJ,cAAcpC;QACpB,OAAOF,YAAY;YACjBuC,YAAYT;YACZU,WAAW;gBACT,MAAMF,YAAYG,iBAAiB,CAAC;oBAACR,UAAUzB,UAAUC,GAAG;gBAAA;YAC9D;QACF;IACF;IAEA,OAAO;QAACD;QAAWI;QAASW;QAAKO;QAAQE;QAAcK;QAAgBK;IAAiB;AAC1F"}