@skaile/forge-settings 0.0.0-stage → 1.0.1

package/package.json

@@ -1,6 +1,119 @@
 {
   "name": "@skaile/forge-settings",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.1",
+  "description": "Provider and settings operations for Skaile forge apps: provider registry layers, credential store, env layers, model discovery, the providers panel, and editor / AI SDK model adapters.",
+  "type": "module",
+  "packageManager": "bun@1.3.9",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
+  "exports": {
+    "./nuxt": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./server": {
+      "types": "./dist/runtime/server/index.d.ts",
+      "import": "./dist/runtime/server/index.js"
+    },
+    "./vue": {
+      "types": "./dist/runtime/vue/index.d.ts",
+      "import": "./dist/runtime/vue/index.js"
+    },
+    "./ai-sdk": {
+      "types": "./dist/runtime/ai-sdk/index.d.ts",
+      "import": "./dist/runtime/ai-sdk/index.js"
+    },
+    "./editor": {
+      "types": "./dist/runtime/editor/index.d.ts",
+      "import": "./dist/runtime/editor/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/runtime",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/skaile-ai/forge-settings.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "scripts": {
+    "prepare": "nuxt-module-build prepare",
+    "dev:prepare": "nuxt-module-build build --stub",
+    "build": "nuxt-module-build build",
+    "prepublishOnly": "bun run build",
+    "test": "bun x --bun vitest run",
+    "typecheck": "tsc --noEmit",
+    "check": "bun run format && bun run lint",
+    "format": "biome format --write src tests",
+    "lint": "biome lint --fix --unsafe src tests"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.0.0",
+    "@skaile/workspaces": "^6.10.0",
+    "ofetch": "^1.4.0",
+    "yaml": "^2.9.0"
+  },
+  "peerDependencies": {
+    "@ai-sdk/anthropic": "^4.0.0",
+    "@ai-sdk/openai": "^4.0.0",
+    "@ai-sdk/openai-compatible": "^3.0.0",
+    "@nuxt/ui": "^4.11.1",
+    "@skaile/forge-editor": "^6.0.0",
+    "ai": "^7.0.0",
+    "nuxt": "^4.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@ai-sdk/anthropic": {
+      "optional": true
+    },
+    "@ai-sdk/openai": {
+      "optional": true
+    },
+    "@ai-sdk/openai-compatible": {
+      "optional": true
+    },
+    "@nuxt/ui": {
+      "optional": true
+    },
+    "@skaile/forge-editor": {
+      "optional": true
+    },
+    "ai": {
+      "optional": true
+    },
+    "nuxt": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@ai-sdk/openai-compatible": "^3.0.80",
+    "@biomejs/biome": "^2.4.9",
+    "@nuxt/module-builder": "^1.0.0",
+    "@nuxt/schema": "^4.0.0",
+    "@nuxt/ui": "^4.11.1",
+    "@skaile/forge-editor": "^6.0.0",
+    "@types/bun": "^1.2.0",
+    "@types/node": "^22.0.0",
+    "ai": "^7.0.155",
+    "bun-types": "^1.3.11",
+    "nuxt": "^4.0.0",
+    "typescript": "^5.0.0",
+    "unbuild": "^3.6.0",
+    "vitest": "^3.2.0",
+    "vue": "^3.5.28",
+    "vue-tsc": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/src/runtime/ai-sdk/index.ts

@@ -0,0 +1,88 @@
+/**
+ * `@skaile/forge-settings/ai-sdk` — the AI SDK language model of a registry
+ * selector, resolved by `@skaile/workspaces/ai-sdk` and gated by the host's
+ * credential policy.
+ *
+ * Workspaces owns endpoint, header and credential wiring for every surface;
+ * this module only decides *whether* an entry may be resolved and against
+ * *which* environment. It is not a service locator: the caller passes the
+ * selector (role-to-selector mapping belongs to the host's settings document)
+ * and the environment explicitly.
+ *
+ * Provider SDKs (`@ai-sdk/anthropic`, `@ai-sdk/openai`,
+ * `@ai-sdk/openai-compatible`) are optional peers of Workspaces: install the
+ * one the selected surface needs.
+ */
+
+import { parseModelRef } from "@skaile/workspaces/core";
+import { type ResolvedLanguageModel, resolveLanguageModel } from "@skaile/workspaces/ai-sdk";
+import { loadMergedProviderRegistry } from "@skaile/workspaces/sdk/bridge";
+import type { CredentialPolicy } from "../server/credential-policy";
+import { ModelResolutionError, assertEntryAllowed } from "../model/errors";
+
+export { ModelResolutionError } from "../model/errors";
+export type { ModelResolutionCode } from "../model/errors";
+export type { ResolvedLanguageModel };
+
+/** Options for {@link resolveRegistryLanguageModel}. */
+export interface ResolveRegistryLanguageModelOptions {
+  /** Workspace whose `.skaile/providers.yml` is the workspace layer. */
+  projectDir: string;
+  /**
+   * The environment `env:` credential references are read from. Required, so a
+   * host never reads the ambient process by accident.
+   */
+  env: Record<string, string | undefined>;
+  /** Role → model-ref map `@role` selectors resolve against. */
+  roles?: Record<string, string>;
+  /**
+   * Which credential references may be resolved. The selected entry is checked
+   * before anything is read; a refused one is a `policy_refused` failure.
+   */
+  policy?: CredentialPolicy;
+}
+
+/**
+ * The AI SDK model for `selector` (`<providerId>/<modelId>`, a bare model id or
+ * `@role`), resolved by Workspaces against the registry on disk.
+ *
+ * @throws {ModelResolutionError} `registry_invalid` · `unknown_selector` ·
+ *   `policy_refused` · `unresolved` (credential, endpoint or provider SDK; the
+ *   message is fixed and never carries Workspaces' text, which stays on `cause`).
+ */
+export async function resolveRegistryLanguageModel(
+  selector: string,
+  options: ResolveRegistryLanguageModelOptions,
+): Promise<ResolvedLanguageModel> {
+  const { merged, diagnostics } = loadMergedProviderRegistry({ projectDir: options.projectDir });
+  const errors = diagnostics
+    .filter((d) => d.severity === "error")
+    .map((d) => (d.path ? `${d.path}: ${d.message}` : d.message));
+  if (errors.length > 0) {
+    throw new ModelResolutionError("registry_invalid", `providers registry: ${errors.join("; ")}`);
+  }
+
+  const ref = parseModelRef(selector, merged, options.roles);
+  if (!ref) {
+    throw new ModelResolutionError("unknown_selector", `no provider serves '${selector}'`);
+  }
+  const entry = merged.providers[ref.providerId];
+  if (entry) assertEntryAllowed(entry, ref.providerId, options.policy);
+
+  try {
+    return await resolveLanguageModel(selector, {
+      projectDir: options.projectDir,
+      env: options.env,
+      ...(options.roles ? { roles: options.roles } : {}),
+    });
+  } catch (cause) {
+    // Workspaces' message is not ours to vouch for: it can echo a resolved
+    // credential or an endpoint with a key in its query. The message is fixed;
+    // the original error stays on `cause` for a host that logs it server-side.
+    throw new ModelResolutionError(
+      "unresolved",
+      `provider '${ref.providerId}': credential, endpoint or provider SDK could not be resolved`,
+      { providerId: ref.providerId, cause },
+    );
+  }
+}

package/src/runtime/components/ForgeProvidersPanel.vue

@@ -0,0 +1,449 @@
+<template>
+  <div data-testid="providers-panel" class="space-y-4">
+    <!-- Detected in environment -->
+    <div
+      v-if="detected.length"
+      data-testid="providers-detected"
+      class="p-3 bg-primary-500/10 border border-primary-500/20 rounded-lg space-y-2"
+    >
+      <div class="flex items-center gap-2">
+        <Icon name="lucide:key-round" class="text-primary-500 shrink-0" />
+        <p class="text-xs font-medium text-foreground">Detected in environment</p>
+      </div>
+      <div v-for="preset in detected" :key="preset.id" class="flex items-center gap-2 flex-wrap text-xs">
+        <span class="font-medium text-foreground">{{ preset.label }}</span>
+        <code class="font-mono text-foreground-muted">{{ preset.credential.env }}</code>
+        <UButton
+          v-if="!props.readOnly"
+          size="xs"
+          variant="ghost"
+          class="ml-auto"
+          :loading="detectedBusy === preset.id"
+          :disabled="detectedBusy !== null"
+          :data-testid="`provider-detected-add-${preset.id}`"
+          @click="addDetected(preset)"
+        >
+          <Icon name="lucide:plus" class="mr-1.5" />Add
+        </UButton>
+      </div>
+      <p v-if="detectedError" class="text-xs text-error-500">{{ detectedError }}</p>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <p class="text-xs text-foreground-muted leading-relaxed flex-1">
+        {{ props.layer === 'workspace'
+          ? 'Entries of this workspace\'s providers.yml can be changed here; instance entries are inherited.'
+          : 'The instance registry, $FORGE_HOME/.skaile/providers.yml.' }}
+        Keys stay in the environment; an entry only references them.
+      </p>
+      <UButton
+        v-if="!props.readOnly"
+        size="sm"
+        color="primary"
+        data-testid="provider-add"
+        @click="openAdd()"
+      >
+        <Icon name="lucide:plus" class="mr-2" />Add provider
+      </UButton>
+    </div>
+
+    <p v-if="loadError" class="text-sm text-error-500">{{ loadError }}</p>
+    <div v-else-if="loading && rows.length === 0" class="text-xs text-foreground-subtle py-2 text-center">
+      Loading providers…
+    </div>
+    <div v-else-if="rows.length === 0" class="text-xs text-foreground-subtle py-2 text-center">
+      This registry has no providers yet.
+    </div>
+
+    <div v-else class="overflow-x-auto rounded-lg border border-surface-border">
+      <table class="w-full text-xs">
+        <thead class="bg-surface-ground/50 text-foreground-muted">
+          <tr class="text-left">
+            <th class="px-3 py-2 font-medium">Provider</th>
+            <th class="px-3 py-2 font-medium">Preset / surface</th>
+            <th class="px-3 py-2 font-medium">Base URL</th>
+            <th class="px-3 py-2 font-medium">Credential</th>
+            <th class="px-3 py-2 font-medium">Enabled</th>
+            <th class="px-3 py-2" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="row in rows"
+            :key="row.id"
+            :data-testid="`provider-row-${row.id}`"
+            class="border-t border-surface-border align-top"
+            :class="row.enabled ? '' : 'opacity-60'"
+          >
+            <td class="px-3 py-2">
+              <div class="flex items-center gap-1.5 flex-wrap">
+                <span class="font-medium text-foreground">{{ row.name }}</span>
+                <UBadge
+                  :data-testid="`provider-badge-${row.id}`"
+                  size="sm"
+                  variant="subtle"
+                  color="neutral"
+                >{{ row.badge }}</UBadge>
+                <Icon v-if="row.locked" name="lucide:lock" class="text-foreground-subtle shrink-0" />
+              </div>
+              <code v-if="row.name !== row.id" class="font-mono text-foreground-subtle">{{ row.id }}</code>
+              <p v-if="row.inheritedNote" class="text-foreground-subtle italic">{{ row.inheritedNote }}</p>
+            </td>
+            <td class="px-3 py-2 font-mono text-foreground-muted">{{ row.origin }}</td>
+            <td class="px-3 py-2 font-mono text-foreground-muted break-all">{{ row.baseUrl ?? '—' }}</td>
+            <td class="px-3 py-2 min-w-[15rem] space-y-1">
+              <USelect
+                v-if="row.needsCredential"
+                :model-value="row.credentialValue"
+                :items="row.credentialOptions"
+                placeholder="Choose a credential"
+                :disabled="!row.canEditCredential || rowBusy === row.id"
+                :data-testid="`provider-credential-${row.id}`"
+                class="w-full bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+                @update:model-value="onCredentialSelect(row, String($event ?? ''))"
+              />
+              <p :class="row.configured ? 'text-foreground-subtle' : 'text-amber-600 dark:text-amber-400'" class="italic">
+                {{ row.status }}
+              </p>
+
+              <!-- Inline key editor -->
+              <div
+                v-if="keyEditing === row.id"
+                :data-testid="`provider-credential-enter-key-${row.id}`"
+                class="space-y-1.5 p-2 rounded-lg border border-surface-border bg-surface-ground/50"
+              >
+                <UInput
+                  v-model="keyForm.name"
+                  placeholder="PROVIDER_API_KEY"
+                  :data-testid="`provider-key-name-${row.id}`"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+                />
+                <UInput
+                  v-model="keyForm.value"
+                  type="password"
+                  autocomplete="off"
+                  placeholder="Key"
+                  :data-testid="`provider-key-value-${row.id}`"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+                />
+                <p v-if="keyError" class="text-error-500">{{ keyError }}</p>
+                <div class="flex justify-end gap-1">
+                  <UButton size="xs" variant="ghost" :data-testid="`provider-key-cancel-${row.id}`" @click="cancelKeyEditor()">Cancel</UButton>
+                  <UButton
+                    size="xs"
+                    color="primary"
+                    :loading="rowBusy === row.id"
+                    :data-testid="`provider-key-save-${row.id}`"
+                    @click="saveKeyEditor()"
+                  >Save</UButton>
+                </div>
+              </div>
+
+              <!-- Inline reference editor -->
+              <div
+                v-if="refEditing === row.id"
+                :data-testid="`provider-credential-ref-${row.id}`"
+                class="space-y-1.5 p-2 rounded-lg border border-surface-border bg-surface-ground/50"
+              >
+                <UInput
+                  v-model="refForm.ref"
+                  placeholder="keyring:forge/name · cmd:… · platform:…"
+                  :data-testid="`provider-ref-input-${row.id}`"
+                  class="w-full bg-surface-ground border-surface-border text-foreground text-xs font-mono"
+                />
+                <p v-if="refError" class="text-error-500">{{ refError }}</p>
+                <div class="flex justify-end gap-1">
+                  <UButton size="xs" variant="ghost" :data-testid="`provider-ref-cancel-${row.id}`" @click="cancelRefEditor()">Cancel</UButton>
+                  <UButton
+                    size="xs"
+                    color="primary"
+                    :loading="rowBusy === row.id"
+                    :data-testid="`provider-ref-save-${row.id}`"
+                    @click="saveRefEditor()"
+                  >Save</UButton>
+                </div>
+              </div>
+
+              <p
+                v-for="notice in row.overrideNotices"
+                :key="notice"
+                :data-testid="`provider-override-notice-${row.id}`"
+                class="text-foreground-subtle"
+              >{{ notice }}</p>
+              <p
+                v-if="rowError?.id === row.id"
+                :data-testid="`provider-row-error-${row.id}`"
+                class="text-error-500"
+              >{{ rowError.message }}</p>
+            </td>
+            <td class="px-3 py-2">
+              <USwitch
+                :model-value="row.enabled"
+                :disabled="!row.canToggle || rowBusy === row.id"
+                :aria-label="`Enable ${row.id}`"
+                :data-testid="`provider-enabled-${row.id}`"
+                @update:model-value="setEnabled(row, Boolean($event))"
+              />
+            </td>
+            <td class="px-3 py-2">
+              <div class="flex items-center justify-end gap-1">
+                <UButton
+                  v-if="row.canReset"
+                  size="sm"
+                  variant="ghost"
+                  :loading="rowBusy === row.id"
+                  :data-testid="`provider-reset-${row.id}`"
+                  @click="resetPatch(row)"
+                >
+                  <Icon name="lucide:undo-2" class="mr-1.5 w-3.5 h-3.5" />Reset
+                </UButton>
+                <template v-if="row.editable">
+                  <UButton
+                    size="sm"
+                    variant="ghost"
+                    :aria-label="`Edit ${row.id}`"
+                    :data-testid="`provider-edit-${row.id}`"
+                    @click="openEdit(row)"
+                  >
+                    <Icon name="lucide:pencil" class="w-3.5 h-3.5" />
+                  </UButton>
+                  <UButton
+                    size="sm"
+                    variant="ghost"
+                    color="error"
+                    :aria-label="`Delete ${row.id}`"
+                    :data-testid="`provider-delete-${row.id}`"
+                    @click="requestDelete(row)"
+                  >
+                    <Icon name="lucide:trash-2" class="w-3.5 h-3.5" />
+                  </UButton>
+                </template>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Add / edit dialog -->
+    <UModal
+      :open="dialogVisible"
+      :title="dialogTitle"
+      :ui="{
+        content: 'bg-surface-card border border-surface-border sm:max-w-[460px]',
+        header: 'bg-surface-card border-b border-surface-border text-foreground',
+        body: 'bg-surface-card p-5',
+        footer: 'bg-surface-ground/50 border-t border-surface-border p-3 justify-end',
+      }"
+      @update:open="dialogVisible = $event"
+    >
+      <template #body>
+        <div data-testid="provider-dialog" class="space-y-4">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs text-foreground-muted font-medium">
+              Preset <span class="text-error-500">*</span>
+            </label>
+            <USelect
+              :model-value="form.preset"
+              :items="presetOptions"
+              placeholder="Choose a preset"
+              data-testid="provider-preset"
+              class="w-full bg-surface-ground border-surface-border text-foreground text-sm"
+              @update:model-value="selectPreset(String($event ?? ''))"
+            />
+          </div>
+
+          <div v-if="showSurface" class="flex flex-col gap-1">
+            <label class="text-xs text-foreground-muted font-medium">
+              Surface <span class="text-error-500">*</span>
+            </label>
+            <USelect
+              v-model="form.surface"
+              :items="surfaceOptions"
+              placeholder="Wire protocol"
+              data-testid="provider-surface"
+              class="w-full bg-surface-ground border-surface-border text-foreground text-sm"
+            />
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <label class="text-xs text-foreground-muted font-medium">
+              ID <span class="text-error-500">*</span>
+            </label>
+            <UInput
+              v-model="form.id"
+              :disabled="editing !== null"
+              placeholder="openrouter"
+              data-testid="provider-id"
+              class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+              :class="editing !== null ? 'opacity-60 cursor-not-allowed' : ''"
+            />
+            <p v-if="idError" class="text-xs text-error-500">{{ idError }}</p>
+            <p v-else class="text-[10px] text-foreground-subtle">The left half of a model selector: <code class="font-mono">&lt;id&gt;/&lt;model&gt;</code>.</p>
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <label class="text-xs text-foreground-muted font-medium">
+              Base URL <span v-if="isCustom" class="text-error-500">*</span>
+            </label>
+            <UInput
+              v-model="form.baseUrl"
+              :placeholder="baseUrlPlaceholder"
+              data-testid="provider-base-url"
+              class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+            />
+          </div>
+
+          <template v-if="showCredentialFields">
+            <div class="flex flex-col gap-1">
+              <label class="text-xs text-foreground-muted font-medium">Credential environment variable</label>
+              <UInput
+                v-model="form.envName"
+                placeholder="PROVIDER_API_KEY"
+                data-testid="provider-credential-env"
+                class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+              />
+              <p class="text-[10px] text-foreground-subtle">
+                Stored as <code class="font-mono">env:{{ form.envName.trim() || 'NAME' }}</code> — the key itself stays in the environment.
+              </p>
+            </div>
+
+            <div v-if="canSetValue" class="flex flex-col gap-1">
+              <label class="text-xs text-foreground-muted font-medium">Set value now</label>
+              <UInput
+                v-model="form.secret"
+                type="password"
+                autocomplete="off"
+                placeholder="Optional — written to this scope's .env"
+                data-testid="provider-set-value"
+                class="w-full bg-surface-ground border-surface-border text-foreground text-sm font-mono"
+              />
+            </div>
+          </template>
+
+          <p v-if="dialogError" data-testid="provider-dialog-error" class="text-sm text-error-500">{{ dialogError }}</p>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex gap-2 justify-end w-full">
+          <UButton size="sm" variant="ghost" @click="dialogVisible = false">Cancel</UButton>
+          <UButton
+            size="sm"
+            color="primary"
+            data-testid="provider-save"
+            :loading="saving"
+            @click="saveProvider"
+          >
+            <Icon name="lucide:check" class="mr-1.5" />{{ editing ? 'Save' : 'Add' }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Delete confirmation -->
+    <UModal
+      :open="deleteOpen"
+      title="Delete provider"
+      :ui="{
+        content: 'bg-surface-card border border-surface-border sm:max-w-[22rem]',
+        header: 'bg-surface-card border-b border-surface-border text-foreground',
+        body: 'bg-surface-card p-5',
+      }"
+      @update:open="deleteOpen = $event"
+    >
+      <template #body>
+        <p class="text-sm text-foreground-muted">
+          Delete <span class="font-medium font-mono">{{ deleteTarget?.id }}</span> from the {{ props.layer }} registry?
+          <template v-if="props.layer === 'workspace'"> An instance entry with the same id shows again.</template>
+        </p>
+        <p v-if="deleteError" class="text-sm text-error-500 mt-2">{{ deleteError }}</p>
+        <div class="flex justify-end gap-2 mt-4">
+          <UButton size="sm" variant="ghost" @click="deleteOpen = false">Cancel</UButton>
+          <UButton
+            size="sm"
+            color="error"
+            data-testid="provider-delete-confirm"
+            :loading="deleting"
+            @click="confirmDelete"
+          >
+            Delete
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ProvidersPanelLayer, useProvidersPanel } from "../vue/useProvidersPanel";
+
+const props = defineProps<{
+  /** `GET` merged view for this scope (`/api/providers` | `/api/workspaces/:id/providers`). */
+  providersUrl: string;
+  /** `PUT|DELETE ${providersWriteUrl}/:id`; `GET ${providersWriteUrl}/detected`. */
+  providersWriteUrl: string;
+  /** Catalog preset summaries. Default `/api/providers/presets`. */
+  presetsUrl?: string;
+  /** The scope's `.env` route: hand-entered keys. Omitted, key entry is hidden. */
+  environmentUrl?: string;
+  /** Edit/Delete are offered only for entries this layer defines. */
+  layer: ProvidersPanelLayer;
+  /** Disables add, edit and delete. */
+  readOnly?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /** After every successful `PUT`/`DELETE`. */
+  (event: "changed"): void;
+}>();
+
+const {
+  rows,
+  loading,
+  loadError,
+  dialogVisible,
+  dialogTitle,
+  editing,
+  form,
+  dialogError,
+  saving,
+  presetOptions,
+  surfaceOptions,
+  isCustom,
+  showSurface,
+  baseUrlPlaceholder,
+  canSetValue,
+  showCredentialFields,
+  rowBusy,
+  rowError,
+  onCredentialSelect,
+  setEnabled,
+  resetPatch,
+  keyEditing,
+  keyForm,
+  keyError,
+  cancelKeyEditor,
+  saveKeyEditor,
+  refEditing,
+  refForm,
+  refError,
+  cancelRefEditor,
+  saveRefEditor,
+  idError,
+  openAdd,
+  openEdit,
+  selectPreset,
+  saveProvider,
+  deleteTarget,
+  deleteOpen,
+  deleteError,
+  deleting,
+  requestDelete,
+  confirmDelete,
+  detected,
+  detectedBusy,
+  detectedError,
+  addDetected,
+} = useProvidersPanel(props, emit);
+</script>