@plures/design-dojo 0.5.2 → 0.7.1

package/dist/app/SettingsPanel.svelte

@@ -0,0 +1,330 @@
+<!--
+  SettingsPanel — Agent settings form: model config and channel setup.
+
+  Features:
+  - Provider URL, API key (masked), model name inputs
+  - Channel type selector with token + channel ID inputs
+  - Save / Reset buttons
+  - onsave callback emits AgentSettings
+-->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { AgentSettings, ChannelType, ModelConfig, ChannelConfig } from "./SettingsPanel.types.js";
+
+  interface Props {
+    /** Initial settings to populate the form. */
+    settings?: AgentSettings;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when the user saves. */
+    onsave?: (settings: AgentSettings) => void;
+  }
+
+  const DEFAULT_MODEL: ModelConfig = { providerUrl: "", apiKey: "", modelName: "" };
+  const DEFAULT_CHANNEL: ChannelConfig = { type: "none", token: "", channelId: "" };
+
+  let { settings, class: className = "", onsave }: Props = $props();
+
+  // untrack() tells Svelte these are intentional one-time captures of the
+  // initial prop value — this is a form that manages its own local state.
+  let providerUrl = $state(untrack(() => settings?.model.providerUrl ?? ""));
+  let apiKey      = $state(untrack(() => settings?.model.apiKey ?? ""));
+  let modelName   = $state(untrack(() => settings?.model.modelName ?? ""));
+
+  let channelType  = $state<ChannelType>(untrack(() => settings?.channel.type ?? "none"));
+  let channelToken = $state(untrack(() => settings?.channel.token ?? ""));
+  let channelId    = $state(untrack(() => settings?.channel.channelId ?? ""));
+
+  let showApiKey = $state(false);
+
+  const CHANNEL_OPTIONS: { value: ChannelType; label: string }[] = [
+    { value: "none",     label: "None" },
+    { value: "discord",  label: "Discord" },
+    { value: "telegram", label: "Telegram" },
+    { value: "slack",    label: "Slack" },
+    { value: "matrix",   label: "Matrix" },
+  ];
+
+  const channelNeedsId = $derived(
+    channelType === "discord" || channelType === "slack" || channelType === "matrix",
+  );
+
+  function handleSave() {
+    onsave?.({
+      model: { providerUrl, apiKey, modelName },
+      channel: { type: channelType, token: channelToken, channelId },
+    });
+  }
+
+  function handleReset() {
+    const r = settings ?? { model: DEFAULT_MODEL, channel: DEFAULT_CHANNEL };
+    providerUrl  = r.model.providerUrl;
+    apiKey       = r.model.apiKey;
+    modelName    = r.model.modelName;
+    channelType  = r.channel.type;
+    channelToken = r.channel.token;
+    channelId    = r.channel.channelId;
+  }
+</script>
+
+<section class="settings-panel {className}" aria-label="Agent settings">
+  <!-- ── Model Config ── -->
+  <div class="settings-panel__section">
+    <h3 class="settings-panel__section-title">Model</h3>
+
+    <label class="settings-panel__field">
+      <span class="settings-panel__label">Provider URL</span>
+      <input
+        class="settings-panel__input"
+        type="url"
+        placeholder="http://localhost:11434"
+        bind:value={providerUrl}
+        autocomplete="off"
+        spellcheck="false"
+      />
+    </label>
+
+    <label class="settings-panel__field">
+      <span class="settings-panel__label">API Key</span>
+      <div class="settings-panel__input-row">
+        <input
+          class="settings-panel__input"
+          type={showApiKey ? "text" : "password"}
+          placeholder="sk-…"
+          bind:value={apiKey}
+          autocomplete="off"
+        />
+        <button
+          class="settings-panel__toggle-btn"
+          type="button"
+          onclick={() => (showApiKey = !showApiKey)}
+          aria-label={showApiKey ? "Hide API key" : "Show API key"}
+        >{showApiKey ? "🙈" : "👁"}</button>
+      </div>
+    </label>
+
+    <label class="settings-panel__field">
+      <span class="settings-panel__label">Model Name</span>
+      <input
+        class="settings-panel__input"
+        type="text"
+        placeholder="llama3.2"
+        bind:value={modelName}
+        autocomplete="off"
+        spellcheck="false"
+      />
+    </label>
+  </div>
+
+  <!-- ── Channel Setup ── -->
+  <div class="settings-panel__section">
+    <h3 class="settings-panel__section-title">Channel</h3>
+
+    <label class="settings-panel__field">
+      <span class="settings-panel__label">Type</span>
+      <select class="settings-panel__select" bind:value={channelType}>
+        {#each CHANNEL_OPTIONS as opt}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </select>
+    </label>
+
+    {#if channelType !== "none"}
+      <label class="settings-panel__field">
+        <span class="settings-panel__label">Bot Token</span>
+        <input
+          class="settings-panel__input"
+          type="password"
+          placeholder="Token…"
+          bind:value={channelToken}
+          autocomplete="off"
+        />
+      </label>
+
+      {#if channelNeedsId}
+        <label class="settings-panel__field">
+          <span class="settings-panel__label">Channel ID</span>
+          <input
+            class="settings-panel__input"
+            type="text"
+            placeholder="Channel / room ID"
+            bind:value={channelId}
+            autocomplete="off"
+            spellcheck="false"
+          />
+        </label>
+      {/if}
+    {/if}
+  </div>
+
+  <!-- ── Actions ── -->
+  <div class="settings-panel__actions">
+    <button class="settings-panel__btn settings-panel__btn--ghost" type="button" onclick={handleReset}>
+      Reset
+    </button>
+    <button class="settings-panel__btn settings-panel__btn--solid" type="button" onclick={handleSave}>
+      Save Settings
+    </button>
+  </div>
+</section>
+
+<style>
+  .settings-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6, 24px);
+    padding: var(--space-6, 24px);
+    background: var(--surface-1, #141414);
+    color: var(--color-text, #e8e8e8);
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
+
+  /* ── Section ── */
+  .settings-panel__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3, 12px);
+  }
+
+  .settings-panel__section-title {
+    margin: 0;
+    font-size: var(--text-xs, 12px);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--color-text-muted, #888);
+    padding-bottom: var(--space-2, 8px);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  /* ── Field ── */
+  .settings-panel__field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1, 4px);
+  }
+
+  .settings-panel__label {
+    font-size: var(--text-sm, 14px);
+    color: var(--color-text-muted, #888);
+    font-weight: 500;
+  }
+
+  .settings-panel__input-row {
+    display: flex;
+    gap: var(--space-2, 8px);
+    align-items: center;
+  }
+
+  /* ── Inputs ── */
+  .settings-panel__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    background: var(--surface-2, #1e1e1e);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-sm, 14px);
+    outline: none;
+    transition: border-color 0.15s;
+  }
+
+  .settings-panel__input:focus {
+    border-color: var(--color-accent, #6366f1);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #6366f1) 15%, transparent);
+  }
+
+  .settings-panel__input::placeholder {
+    color: var(--color-text-subtle, #555);
+  }
+
+  /* ── Select ── */
+  .settings-panel__select {
+    width: 100%;
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    background: var(--surface-2, #1e1e1e);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-sm, 14px);
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--space-3, 12px) center;
+    padding-right: 36px;
+    transition: border-color 0.15s;
+  }
+
+  .settings-panel__select:focus {
+    border-color: var(--color-accent, #6366f1);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #6366f1) 15%, transparent);
+  }
+
+  .settings-panel__select option {
+    background: var(--surface-2, #1e1e1e);
+    color: var(--color-text, #e8e8e8);
+  }
+
+  /* ── Toggle show/hide key ── */
+  .settings-panel__toggle-btn {
+    background: none;
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    padding: var(--space-2, 8px) var(--space-2, 8px);
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    color: var(--color-text-muted, #888);
+    transition: border-color 0.15s;
+    flex-shrink: 0;
+  }
+
+  .settings-panel__toggle-btn:hover {
+    border-color: var(--color-accent, #6366f1);
+  }
+
+  /* ── Actions ── */
+  .settings-panel__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-3, 12px);
+    padding-top: var(--space-2, 8px);
+    border-top: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  .settings-panel__btn {
+    padding: var(--space-2, 8px) var(--space-4, 16px);
+    border-radius: var(--radius-md, 10px);
+    font-family: inherit;
+    font-size: var(--text-sm, 14px);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s, opacity 0.15s;
+    border: none;
+  }
+
+  .settings-panel__btn--solid {
+    background: var(--color-accent, #6366f1);
+    color: white;
+  }
+
+  .settings-panel__btn--solid:hover { background: var(--color-accent-hover, #818cf8); }
+
+  .settings-panel__btn--ghost {
+    background: transparent;
+    color: var(--color-text-muted, #888);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+  }
+
+  .settings-panel__btn--ghost:hover {
+    background: var(--alpha-10, rgba(255,255,255,0.1));
+    color: var(--color-text, #e8e8e8);
+  }
+</style>

package/dist/app/SettingsPanel.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AgentSettings } from "./SettingsPanel.types.js";
+interface Props {
+    /** Initial settings to populate the form. */
+    settings?: AgentSettings;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when the user saves. */
+    onsave?: (settings: AgentSettings) => void;
+}
+declare const SettingsPanel: import("svelte").Component<Props, {}, "">;
+type SettingsPanel = ReturnType<typeof SettingsPanel>;
+export default SettingsPanel;

package/dist/app/SettingsPanel.types.js

@@ -0,0 +1 @@
+export {};