@desktalk/miniapp-preference 0.1.0-alpha.1

package/dist/frontend.js

@@ -0,0 +1,4652 @@
+(() => {
+  if (typeof document === 'undefined') return;
+  const styleId = "desktalk-style-desktalk-miniapp-preference-19q4gw2";
+  if (document.getElementById(styleId)) return;
+  const style = document.createElement('style');
+  style.id = styleId;
+  style.textContent = "/* src/styles/PreferenceApp.module.css */\n.PreferenceApp_root {\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  background: var(--dt-window-body);\n  color: var(--dt-text);\n  font-family: var(--font-ui, \"Work Sans\", system-ui, -apple-system, sans-serif);\n}\n.PreferenceApp_rootCompact {\n  flex-direction: column;\n}\n.PreferenceApp_sidebar {\n  width: 180px;\n  min-width: 180px;\n  display: flex;\n  flex-direction: column;\n  align-self: stretch;\n  overflow-y: auto;\n  padding: 8px 0;\n  border-right: 1px solid var(--dt-border);\n}\n.PreferenceApp_sidebarHeader {\n  padding: 12px 16px 8px;\n  color: var(--dt-text-muted);\n  font-size: 11px;\n  font-weight: 600;\n  font-family: var(--font-display, \"Sora\", system-ui, -apple-system, sans-serif);\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\n.PreferenceApp_categoryItem {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  background: none;\n  color: var(--dt-text);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.1s;\n}\n.PreferenceApp_categoryItem:hover {\n  background: var(--dt-surface-hover);\n}\n.PreferenceApp_categoryItemActive {\n  background: var(--dt-surface);\n  border-left: 3px solid var(--dt-accent);\n  color: var(--dt-accent);\n  font-weight: 500;\n  padding-left: 13px;\n}\n.PreferenceApp_categoryIcon {\n  width: 20px;\n  font-size: 15px;\n  text-align: center;\n}\n.PreferenceApp_categoryText {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.PreferenceApp_settingsPanel {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  padding: 0;\n}\n.PreferenceApp_section {\n  padding: 20px 24px 8px;\n}\n.PreferenceApp_sectionTitle {\n  margin-bottom: 4px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--dt-border);\n  color: var(--dt-text-muted);\n  font-size: 13px;\n  font-weight: 600;\n  font-family: var(--font-display, \"Sora\", system-ui, -apple-system, sans-serif);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.PreferenceApp_row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px 0;\n  border-bottom: 1px solid var(--dt-border-subtle);\n}\n.PreferenceApp_row:last-child {\n  border-bottom: none;\n}\n.PreferenceApp_rowInfo {\n  flex: 1;\n  min-width: 0;\n}\n.PreferenceApp_rowLabel {\n  margin-bottom: 2px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: var(--font-ui, \"Work Sans\", system-ui, -apple-system, sans-serif);\n}\n.PreferenceApp_rowDescription {\n  color: var(--dt-text-muted);\n  font-size: 12px;\n  line-height: 1.4;\n}\n.PreferenceApp_rowRestartBadge {\n  display: inline-block;\n  margin-left: 6px;\n  padding: 1px 5px;\n  border-radius: 3px;\n  background: var(--dt-warning-subtle);\n  color: var(--dt-warning);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n}\n.PreferenceApp_rowControl {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 8px;\n}\n.PreferenceApp_providerGroup {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px 0 18px;\n  border-bottom: 1px solid var(--dt-border-subtle);\n}\n.PreferenceApp_providerGroupHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.PreferenceApp_providerList {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.PreferenceApp_providerCard {\n  margin: 0;\n}\n.PreferenceApp_providerCard dt-card {\n  display: block;\n  margin: 0;\n}\n.PreferenceApp_providerCardBody {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.PreferenceApp_providerCardHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.PreferenceApp_providerCardTitleRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.PreferenceApp_providerCardTitle {\n  font-size: 14px;\n  font-weight: 600;\n  font-family: var(--font-display, \"Sora\", system-ui, -apple-system, sans-serif);\n  letter-spacing: -0.01em;\n}\n.PreferenceApp_providerDefaultBadge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--dt-accent-ghost);\n  color: var(--dt-accent);\n  font-size: 11px;\n  font-weight: 600;\n}\n.PreferenceApp_providerCardActions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.PreferenceApp_providerActionButtonWrap,\n.PreferenceApp_providerButtonWrap {\n  display: inline-flex;\n}\n.PreferenceApp_providerActionButtonWrap dt-button,\n.PreferenceApp_providerButtonWrap dt-button {\n  display: inline-flex;\n}\n.PreferenceApp_providerFieldGrid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.PreferenceApp_providerField {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n}\n.PreferenceApp_providerFieldLabel {\n  color: var(--dt-text-muted);\n  font-size: 11px;\n  font-weight: 600;\n  font-family: var(--font-display, \"Sora\", system-ui, -apple-system, sans-serif);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.PreferenceApp_providerSelectWrap {\n  width: 100%;\n}\n.PreferenceApp_providerSelectWrap dt-select {\n  display: block;\n  width: 100%;\n}\n.PreferenceApp_selectWrap {\n  min-width: 120px;\n}\n.PreferenceApp_selectWrap dt-select {\n  display: block;\n  min-width: 120px;\n}\n.PreferenceApp_textInput,\n.PreferenceApp_numberInput,\n.PreferenceApp_dropdown {\n  padding: 6px 10px;\n  border: 1px solid var(--dt-border);\n  border-radius: 6px;\n  background: var(--dt-surface);\n  color: var(--dt-text);\n  font-family: var(--font-ui, \"Work Sans\", system-ui, -apple-system, sans-serif);\n  font-size: 13px;\n  outline: none;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s,\n    background 0.15s;\n}\n.PreferenceApp_textInput:focus,\n.PreferenceApp_numberInput:focus,\n.PreferenceApp_dropdown:focus {\n  border-color: var(--dt-accent);\n  box-shadow: 0 0 0 3px var(--dt-accent-ghost);\n}\n.PreferenceApp_textInput {\n  width: 220px;\n}\n.PreferenceApp_textInput::placeholder {\n  color: var(--dt-text-muted);\n}\n.PreferenceApp_textInputSensitive {\n  font-family: var(--font-mono);\n  letter-spacing: 0.05em;\n}\n.PreferenceApp_numberInput {\n  width: 100px;\n  -moz-appearance: textfield;\n}\n.PreferenceApp_numberInput::-webkit-inner-spin-button,\n.PreferenceApp_numberInput::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.PreferenceApp_dropdown {\n  min-width: 120px;\n  cursor: pointer;\n}\n.PreferenceApp_colorControl {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.PreferenceApp_colorInput {\n  width: 40px;\n  height: 36px;\n  padding: 2px;\n  border: 1px solid var(--dt-border);\n  border-radius: 8px;\n  background: var(--dt-surface);\n  cursor: pointer;\n}\n.PreferenceApp_toggle {\n  position: relative;\n  width: 42px;\n  height: 24px;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n.PreferenceApp_toggleInput {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n}\n.PreferenceApp_toggleTrack {\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--dt-border);\n  border-radius: 12px;\n  background: var(--dt-surface);\n  transition: background 0.2s, border-color 0.2s;\n}\n.PreferenceApp_toggleInput:checked + .PreferenceApp_toggleTrack {\n  border-color: var(--dt-accent);\n  background: var(--dt-accent);\n}\n.PreferenceApp_toggleKnob {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--dt-text-on-accent);\n  transition: transform 0.2s;\n  pointer-events: none;\n}\n.PreferenceApp_toggleInput:checked ~ .PreferenceApp_toggleKnob {\n  transform: translateX(18px);\n}\n.PreferenceApp_notification {\n  position: fixed;\n  bottom: 80px;\n  left: 50%;\n  z-index: 1000;\n  padding: 10px 20px;\n  border: 1px solid color-mix(in oklab, var(--dt-warning) 40%, var(--dt-border));\n  border-radius: 8px;\n  background: color-mix(in oklab, var(--dt-warning) 20%, var(--dt-surface));\n  box-shadow: 0 14px 28px var(--dt-shadow-color);\n  color: var(--dt-text);\n  font-size: 13px;\n  font-weight: 500;\n  transform: translateX(-50%);\n  animation: PreferenceApp_slideUp 0.3s ease-out;\n}\n.PreferenceApp_rootCompact .PreferenceApp_sidebar {\n  width: 100%;\n  min-width: 0;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  overflow-x: auto;\n  overflow-y: visible;\n  padding: 10px 12px;\n  border-right: none;\n  border-bottom: 1px solid var(--dt-border);\n  background: color-mix(in oklab, var(--dt-surface) 72%, transparent);\n}\n.PreferenceApp_rootCompact .PreferenceApp_sidebarHeader {\n  flex: 0 0 auto;\n  padding: 0 10px 0 0;\n  border-right: 1px solid var(--dt-border-subtle);\n  white-space: nowrap;\n}\n.PreferenceApp_rootCompact .PreferenceApp_categoryItem,\n.PreferenceApp_rootCompact .PreferenceApp_categoryItemActive {\n  position: relative;\n  width: 40px;\n  min-width: 40px;\n  height: 40px;\n  justify-content: center;\n  gap: 0;\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  flex-shrink: 0;\n}\n.PreferenceApp_rootCompact .PreferenceApp_categoryItemActive {\n  border-left: 1px solid color-mix(in oklab, var(--dt-accent) 45%, var(--dt-border));\n  background: color-mix(in oklab, var(--dt-accent) 12%, var(--dt-surface));\n  box-shadow: 0 0 0 1px var(--dt-accent-ghost) inset;\n  padding-left: 0;\n}\n.PreferenceApp_rootCompact .PreferenceApp_settingsPanel {\n  padding-bottom: 12px;\n}\n.PreferenceApp_rootCompact .PreferenceApp_section {\n  padding: 16px 16px 8px;\n}\n.PreferenceApp_rootCompact .PreferenceApp_row {\n  align-items: stretch;\n  flex-direction: column;\n  gap: 12px;\n}\n.PreferenceApp_rootCompact .PreferenceApp_rowControl {\n  width: 100%;\n  min-width: 0;\n}\n.PreferenceApp_rootCompact .PreferenceApp_providerGroupHeader,\n.PreferenceApp_rootCompact .PreferenceApp_providerCardHeader {\n  flex-direction: column;\n}\n.PreferenceApp_rootCompact .PreferenceApp_providerCardActions {\n  justify-content: flex-start;\n}\n.PreferenceApp_rootCompact .PreferenceApp_providerActionButtonWrap,\n.PreferenceApp_rootCompact .PreferenceApp_providerButtonWrap {\n  width: 100%;\n}\n.PreferenceApp_rootCompact .PreferenceApp_providerFieldGrid {\n  grid-template-columns: 1fr;\n}\n.PreferenceApp_rootCompact .PreferenceApp_textInput,\n.PreferenceApp_rootCompact .PreferenceApp_textInputSensitive,\n.PreferenceApp_rootCompact .PreferenceApp_numberInput,\n.PreferenceApp_rootCompact .PreferenceApp_dropdown,\n.PreferenceApp_rootCompact .PreferenceApp_providerActionButtonWrap dt-button,\n.PreferenceApp_rootCompact .PreferenceApp_providerButtonWrap dt-button {\n  width: 100%;\n  min-width: 0;\n}\n.PreferenceApp_rootCompact .PreferenceApp_colorControl {\n  width: 100%;\n}\n.PreferenceApp_rootCompact .PreferenceApp_colorInput {\n  flex: 0 0 44px;\n}\n@keyframes PreferenceApp_slideUp {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n/*# sourceMappingURL=frontend.css.map */\n";
+  document.head.appendChild(style);
+})();
+
+// src/frontend.tsx
+import { __dtLocalize } from "@desktalk/sdk";
+
+// desktalk-global:react
+var _mod = window.React;
+var Children = _mod.Children;
+var Component = _mod.Component;
+var Fragment = _mod.Fragment;
+var Profiler = _mod.Profiler;
+var PureComponent = _mod.PureComponent;
+var StrictMode = _mod.StrictMode;
+var Suspense = _mod.Suspense;
+var cloneElement = _mod.cloneElement;
+var createContext = _mod.createContext;
+var createElement = _mod.createElement;
+var createRef = _mod.createRef;
+var forwardRef = _mod.forwardRef;
+var isValidElement = _mod.isValidElement;
+var lazy = _mod.lazy;
+var memo = _mod.memo;
+var startTransition = _mod.startTransition;
+var useCallback = _mod.useCallback;
+var useContext = _mod.useContext;
+var useDebugValue = _mod.useDebugValue;
+var useDeferredValue = _mod.useDeferredValue;
+var useEffect = _mod.useEffect;
+var useId = _mod.useId;
+var useImperativeHandle = _mod.useImperativeHandle;
+var useInsertionEffect = _mod.useInsertionEffect;
+var useLayoutEffect = _mod.useLayoutEffect;
+var useMemo = _mod.useMemo;
+var useReducer = _mod.useReducer;
+var useRef = _mod.useRef;
+var useState = _mod.useState;
+var useSyncExternalStore = _mod.useSyncExternalStore;
+var useTransition = _mod.useTransition;
+var version = _mod.version;
+
+// desktalk-global:react-dom/client
+var _mod2 = window.ReactDOM;
+var createRoot = _mod2.createRoot;
+var hydrateRoot = _mod2.hydrateRoot;
+
+// src/frontend.tsx
+import { useCommand as useCommand2, useEvent, MiniAppIdProvider, WindowIdProvider } from "@desktalk/sdk";
+
+// src/schema.ts
+var CATEGORIES = ["General", "Server", "AI", "Voice"];
+var DEFAULT_AI_PROVIDER_ID = "openai";
+var AI_PROVIDER_DEFINITIONS = [
+  { id: "anthropic", label: "Anthropic", supportsApiKey: true, supportsBaseUrl: false },
+  {
+    id: "azure-openai-responses",
+    label: "Azure OpenAI",
+    supportsApiKey: true,
+    supportsBaseUrl: true
+  },
+  { id: DEFAULT_AI_PROVIDER_ID, label: "OpenAI", supportsApiKey: true, supportsBaseUrl: true },
+  { id: "google", label: "Google Gemini", supportsApiKey: true, supportsBaseUrl: false },
+  {
+    id: "mistral",
+    label: "Mistral",
+    supportsApiKey: true,
+    supportsBaseUrl: true
+  },
+  { id: "groq", label: "Groq", supportsApiKey: true, supportsBaseUrl: true },
+  {
+    id: "cerebras",
+    label: "Cerebras",
+    supportsApiKey: true,
+    supportsBaseUrl: true
+  },
+  { id: "xai", label: "xAI", supportsApiKey: true, supportsBaseUrl: true },
+  {
+    id: "openrouter",
+    label: "OpenRouter",
+    supportsApiKey: true,
+    supportsBaseUrl: true
+  },
+  {
+    id: "vercel-ai-gateway",
+    label: "Vercel AI Gateway",
+    supportsApiKey: true,
+    supportsBaseUrl: true
+  },
+  { id: "zai", label: "ZAI", supportsApiKey: true, supportsBaseUrl: false },
+  { id: "opencode", label: "OpenCode Zen", supportsApiKey: true, supportsBaseUrl: false },
+  { id: "opencode-go", label: "OpenCode Go", supportsApiKey: true, supportsBaseUrl: false },
+  {
+    id: "huggingface",
+    label: "Hugging Face",
+    supportsApiKey: true,
+    supportsBaseUrl: true
+  },
+  {
+    id: "kimi-coding",
+    label: "Kimi For Coding",
+    supportsApiKey: true,
+    supportsBaseUrl: false
+  },
+  { id: "minimax", label: "MiniMax", supportsApiKey: true, supportsBaseUrl: false },
+  {
+    id: "minimax-cn",
+    label: "MiniMax China",
+    supportsApiKey: true,
+    supportsBaseUrl: false
+  },
+  { id: "ollama", label: "Ollama", supportsApiKey: false, supportsBaseUrl: true }
+];
+var DEFAULT_VOICE_PROVIDER_ID = "openai-whisper";
+var VOICE_PROVIDER_DEFINITIONS = [
+  {
+    id: DEFAULT_VOICE_PROVIDER_ID,
+    label: "OpenAI Whisper",
+    supportsApiKey: true,
+    supportsBaseUrl: true,
+    supportsModel: true,
+    supportsAzureDeployment: false,
+    supportsAzureApiVersion: false
+  },
+  {
+    id: "azure-openai-whisper",
+    label: "Azure OpenAI Whisper",
+    supportsApiKey: true,
+    supportsBaseUrl: true,
+    supportsModel: false,
+    supportsAzureDeployment: true,
+    supportsAzureApiVersion: true
+  }
+];
+var AI_PROVIDER_IDS = new Set(AI_PROVIDER_DEFINITIONS.map((provider) => provider.id));
+var VOICE_PROVIDER_IDS = new Set(VOICE_PROVIDER_DEFINITIONS.map((provider) => provider.id));
+function getAiProviderDefinition(providerId) {
+  return AI_PROVIDER_DEFINITIONS.find((provider) => provider.id === providerId);
+}
+function getAiProviderConfigKeys(providerId) {
+  const definition = getAiProviderDefinition(providerId);
+  if (!definition) {
+    return [];
+  }
+  const keys = [`ai.providers.${providerId}.model`];
+  if (definition.supportsApiKey) {
+    keys.push(`ai.providers.${providerId}.apiKey`);
+  }
+  if (definition.supportsBaseUrl) {
+    keys.push(`ai.providers.${providerId}.baseUrl`);
+  }
+  return keys;
+}
+function parseAiEnabledProviders(value) {
+  if (typeof value !== "string") {
+    return [DEFAULT_AI_PROVIDER_ID];
+  }
+  const providers = value.split(",").map((item) => item.trim()).filter(
+    (item, index, items) => item && items.indexOf(item) === index && AI_PROVIDER_IDS.has(item)
+  );
+  return providers.length > 0 ? providers : [DEFAULT_AI_PROVIDER_ID];
+}
+function serializeAiEnabledProviders(providerIds) {
+  return parseAiEnabledProviders(providerIds.join(",")).join(",");
+}
+function getVoiceProviderDefinition(providerId) {
+  return VOICE_PROVIDER_DEFINITIONS.find((provider) => provider.id === providerId);
+}
+function getVoiceProviderConfigKeys(providerId) {
+  const definition = getVoiceProviderDefinition(providerId);
+  if (!definition) {
+    return [];
+  }
+  const keys = [];
+  if (definition.supportsApiKey) {
+    keys.push(`voice.providers.${providerId}.apiKey`);
+  }
+  if (definition.supportsModel) {
+    keys.push(`voice.providers.${providerId}.model`);
+  }
+  if (definition.supportsBaseUrl) {
+    keys.push(`voice.providers.${providerId}.baseUrl`);
+  }
+  if (definition.supportsAzureDeployment) {
+    keys.push(`voice.providers.${providerId}.azureDeployment`);
+  }
+  if (definition.supportsAzureApiVersion) {
+    keys.push(`voice.providers.${providerId}.azureApiVersion`);
+  }
+  return keys;
+}
+function parseVoiceEnabledProviders(value) {
+  if (typeof value !== "string") {
+    return [DEFAULT_VOICE_PROVIDER_ID];
+  }
+  const providers = value.split(",").map((item) => item.trim()).filter(
+    (item, index, items) => item && items.indexOf(item) === index && VOICE_PROVIDER_IDS.has(item)
+  );
+  return providers.length > 0 ? providers : [DEFAULT_VOICE_PROVIDER_ID];
+}
+function serializeVoiceEnabledProviders(providerIds) {
+  return parseVoiceEnabledProviders(providerIds.join(",")).join(",");
+}
+function getAiProviderPreferenceSchemas() {
+  const schemas = [
+    {
+      key: "ai.enabledProviders",
+      label: "Enabled Providers",
+      description: "Ordered list of configured AI providers.",
+      type: "string",
+      default: DEFAULT_AI_PROVIDER_ID,
+      category: "AI"
+    },
+    {
+      key: "ai.defaultProvider",
+      label: "Default Provider",
+      description: "Provider selected by default for chat and tool execution.",
+      type: "string",
+      default: DEFAULT_AI_PROVIDER_ID,
+      options: AI_PROVIDER_DEFINITIONS.map((provider) => provider.id),
+      category: "AI"
+    }
+  ];
+  for (const provider of AI_PROVIDER_DEFINITIONS) {
+    schemas.push({
+      key: `ai.providers.${provider.id}.model`,
+      label: `${provider.label} Model`,
+      description: `Model identifier to use when ${provider.label} is selected.`,
+      type: "string",
+      default: "",
+      category: "AI"
+    });
+    if (provider.supportsApiKey) {
+      schemas.push({
+        key: `ai.providers.${provider.id}.apiKey`,
+        label: `${provider.label} API Key`,
+        description: `API key for ${provider.label}.`,
+        type: "string",
+        default: "",
+        category: "AI",
+        sensitive: true
+      });
+    }
+    if (provider.supportsBaseUrl) {
+      schemas.push({
+        key: `ai.providers.${provider.id}.baseUrl`,
+        label: `${provider.label} Base URL`,
+        description: `Optional custom API base URL for ${provider.label}.`,
+        type: "string",
+        default: "",
+        category: "AI"
+      });
+    }
+  }
+  schemas.push({
+    key: "ai.maxTokens",
+    label: "Max Tokens",
+    description: "Maximum tokens per AI response.",
+    type: "number",
+    default: 4096,
+    min: 256,
+    max: 128e3,
+    category: "AI"
+  });
+  return schemas;
+}
+var AI_PREFERENCE_SCHEMAS = getAiProviderPreferenceSchemas();
+function getVoiceProviderPreferenceSchemas() {
+  const schemas = [
+    {
+      key: "voice.enabledProviders",
+      label: "Enabled Providers",
+      description: "Ordered list of configured STT providers.",
+      type: "string",
+      default: DEFAULT_VOICE_PROVIDER_ID,
+      category: "Voice"
+    },
+    {
+      key: "voice.defaultProvider",
+      label: "Default Provider",
+      description: "Provider selected by default for voice transcription.",
+      type: "string",
+      default: DEFAULT_VOICE_PROVIDER_ID,
+      options: VOICE_PROVIDER_DEFINITIONS.map((provider) => provider.id),
+      category: "Voice"
+    }
+  ];
+  for (const provider of VOICE_PROVIDER_DEFINITIONS) {
+    if (provider.supportsApiKey) {
+      schemas.push({
+        key: `voice.providers.${provider.id}.apiKey`,
+        label: `${provider.label} API Key`,
+        description: `API key for ${provider.label}.`,
+        type: "string",
+        default: "",
+        category: "Voice",
+        sensitive: true
+      });
+    }
+    if (provider.supportsModel) {
+      schemas.push({
+        key: `voice.providers.${provider.id}.model`,
+        label: `${provider.label} Model`,
+        description: `Model identifier to use when ${provider.label} is selected.`,
+        type: "string",
+        default: "whisper-1",
+        category: "Voice"
+      });
+    }
+    if (provider.supportsBaseUrl) {
+      schemas.push({
+        key: `voice.providers.${provider.id}.baseUrl`,
+        label: `${provider.label} Base URL`,
+        description: provider.id === "azure-openai-whisper" ? "Base URL for Azure OpenAI Whisper requests." : `Optional custom API base URL for ${provider.label}.`,
+        type: "string",
+        default: provider.id === DEFAULT_VOICE_PROVIDER_ID ? "https://api.openai.com/v1" : "",
+        category: "Voice"
+      });
+    }
+    if (provider.supportsAzureDeployment) {
+      schemas.push({
+        key: `voice.providers.${provider.id}.azureDeployment`,
+        label: `${provider.label} Deployment`,
+        description: "Azure OpenAI deployment name for Whisper transcription.",
+        type: "string",
+        default: "",
+        category: "Voice"
+      });
+    }
+    if (provider.supportsAzureApiVersion) {
+      schemas.push({
+        key: `voice.providers.${provider.id}.azureApiVersion`,
+        label: `${provider.label} API Version`,
+        description: "Azure OpenAI API version used for transcription requests.",
+        type: "string",
+        default: "2024-06-01",
+        category: "Voice"
+      });
+    }
+  }
+  return schemas;
+}
+var VOICE_PREFERENCE_SCHEMAS = getVoiceProviderPreferenceSchemas();
+var PREFERENCE_SCHEMAS = [
+  // ─── General ─────────────────────────────────────────────────────────────
+  {
+    key: "general.theme",
+    label: "Theme",
+    description: "UI theme: light or dark.",
+    type: "string",
+    default: "light",
+    options: ["light", "dark"],
+    category: "General"
+  },
+  {
+    key: "general.accentColor",
+    label: "Accent Color",
+    description: "Primary theme color. Accepts hex values or any CSS color string.",
+    type: "string",
+    default: "#7c6ff7",
+    category: "General"
+  },
+  {
+    key: "general.language",
+    label: "Language",
+    description: "UI language/locale.",
+    type: "string",
+    default: "en",
+    options: ["en", "zh", "ja", "ko", "es", "fr", "de"],
+    category: "General"
+  },
+  {
+    key: "general.dataDirectory",
+    label: "Data Directory",
+    description: "Override the base data directory. Leave empty for platform default (resolved via env-paths).",
+    type: "string",
+    default: "",
+    category: "General",
+    requiresRestart: true
+  },
+  // ─── Server ──────────────────────────────────────────────────────────────
+  {
+    key: "server.host",
+    label: "Host",
+    description: "Server bind address.",
+    type: "string",
+    default: "localhost",
+    category: "Server",
+    requiresRestart: true
+  },
+  {
+    key: "server.port",
+    label: "Port",
+    description: "Server listen port.",
+    type: "number",
+    default: 3e3,
+    min: 1,
+    max: 65535,
+    category: "Server",
+    requiresRestart: true
+  },
+  // ─── AI ──────────────────────────────────────────────────────────────────
+  ...AI_PREFERENCE_SCHEMAS,
+  // ─── Voice ────────────────────────────────────────────────────────────
+  ...VOICE_PREFERENCE_SCHEMAS,
+  {
+    key: "voice.silenceTimeoutMs",
+    label: "Silence Timeout",
+    description: "Silence duration (ms) before finalizing an utterance.",
+    type: "number",
+    default: 800,
+    min: 200,
+    max: 5e3,
+    category: "Voice"
+  },
+  {
+    key: "voice.energyThreshold",
+    label: "Energy Threshold",
+    description: "RMS energy threshold for voice activity detection (0\u201332767).",
+    type: "number",
+    default: 500,
+    min: 50,
+    max: 1e4,
+    category: "Voice"
+  }
+];
+function getDefaultConfig() {
+  const config = {};
+  for (const schema of PREFERENCE_SCHEMAS) {
+    config[schema.key] = schema.default;
+  }
+  return config;
+}
+function getSchema(key) {
+  return PREFERENCE_SCHEMAS.find((s) => s.key === key);
+}
+function getSchemasByCategory(category) {
+  return PREFERENCE_SCHEMAS.filter((s) => s.category === category);
+}
+
+// ../ui/dist/index.js
+var J = `.dt-tooltip-popup {
+  position: fixed;
+  z-index: 2147483647;
+  padding: 6px 10px;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  color: var(--dt-text-secondary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Tech corner accents */
+.dt-tooltip-popup::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-tooltip-popup::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 4px;
+  height: 4px;
+  border-bottom: 1px solid var(--dt-accent);
+  border-right: 1px solid var(--dt-accent);
+}
+
+/* Arrow styling - tech/minimal */
+.dt-tooltip-popup[data-actual-placement='top'] {
+  transform: translateX(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='top']::before {
+  top: auto;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-top-color: var(--dt-accent);
+  border-left: none;
+  border-right: none;
+}
+
+.dt-tooltip-popup[data-actual-placement='bottom'] {
+  transform: translateX(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='bottom']::before {
+  bottom: auto;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-bottom-color: var(--dt-accent);
+  border-left: none;
+  border-right: none;
+}
+
+.dt-tooltip-popup[data-actual-placement='left'] {
+  transform: translateY(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='left']::before {
+  left: auto;
+  top: 50%;
+  right: -4px;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-left-color: var(--dt-accent);
+  border-top: none;
+  border-bottom: none;
+}
+
+.dt-tooltip-popup[data-actual-placement='right'] {
+  transform: translateY(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='right']::before {
+  right: auto;
+  top: 50%;
+  left: -4px;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-right-color: var(--dt-accent);
+  border-top: none;
+  border-bottom: none;
+}
+`;
+var vt = "dt-tooltip-popup";
+var u = 8;
+var W = false;
+function ft() {
+  if (W) return;
+  let r = document.createElement("style");
+  r.setAttribute("data-dt-tooltip", ""), r.textContent = J, document.head.appendChild(r), W = true;
+}
+var x = class extends HTMLElement {
+  _popup = null;
+  _showTimeout = null;
+  _tooltipId = "";
+  _visible = false;
+  static get observedAttributes() {
+    return ["content", "placement", "delay", "disabled"];
+  }
+  get content() {
+    return this.getAttribute("content") ?? "";
+  }
+  set content(t) {
+    this.setAttribute("content", t);
+  }
+  get placement() {
+    let t = this.getAttribute("placement");
+    return t === "bottom" || t === "left" || t === "right" ? t : "top";
+  }
+  set placement(t) {
+    this.setAttribute("placement", t);
+  }
+  get delay() {
+    let t = Number(this.getAttribute("delay"));
+    return Number.isFinite(t) && t > 0 ? t : 0;
+  }
+  set delay(t) {
+    this.setAttribute("delay", String(t));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" });
+    t.innerHTML = "<slot></slot>", this._tooltipId = `dt-tip-${Math.random().toString(36).slice(2, 9)}`;
+  }
+  connectedCallback() {
+    ft(), this.addEventListener("mouseenter", this._onEnter), this.addEventListener("mouseleave", this._onLeave), this.addEventListener("focusin", this._onEnter), this.addEventListener("focusout", this._onLeave);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("mouseenter", this._onEnter), this.removeEventListener("mouseleave", this._onLeave), this.removeEventListener("focusin", this._onEnter), this.removeEventListener("focusout", this._onLeave), this._hide();
+  }
+  attributeChangedCallback(t, e, n) {
+    t === "disabled" && this.disabled && this._hide(), t === "content" && this._popup && (this._popup.textContent = this.content);
+  }
+  _onEnter = () => {
+    if (this.disabled || !this.content) return;
+    this._showTimeout !== null && clearTimeout(this._showTimeout);
+    let t = () => {
+      this._createPopup(), this._position(), this._visible = true;
+    };
+    this.delay > 0 ? this._showTimeout = setTimeout(t, this.delay) : t();
+  };
+  _onLeave = () => {
+    this._hide();
+  };
+  _createPopup() {
+    if (this._popup) return;
+    let t = document.createElement("div");
+    t.className = vt, t.id = this._tooltipId, t.setAttribute("role", "tooltip"), t.textContent = this.content, document.body.appendChild(t), this._popup = t;
+    let e = this._getTrigger();
+    e && e.setAttribute("aria-describedby", this._tooltipId);
+  }
+  _hide() {
+    if (this._showTimeout !== null && (clearTimeout(this._showTimeout), this._showTimeout = null), this._popup) {
+      let t = this._getTrigger();
+      t && t.removeAttribute("aria-describedby"), this._popup.remove(), this._popup = null, this._visible = false;
+    }
+  }
+  _getTrigger() {
+    let e = this.shadowRoot?.querySelector("slot")?.assignedElements();
+    return e && e.length > 0 ? e[0] : null;
+  }
+  _position() {
+    let t = this._popup;
+    if (!t) return;
+    let e = this.getBoundingClientRect(), n = t.getBoundingClientRect(), i = window.innerWidth, s = window.innerHeight, o = this.placement;
+    o === "top" && e.top - n.height - u < 0 ? o = "bottom" : o === "bottom" && e.bottom + n.height + u > s ? o = "top" : o === "left" && e.left - n.width - u < 0 ? o = "right" : o === "right" && e.right + n.width + u > i && (o = "left"), t.setAttribute("data-actual-placement", o);
+    let a, d;
+    switch (o) {
+      case "top":
+        d = e.left + e.width / 2, a = e.top - n.height - u;
+        break;
+      case "bottom":
+        d = e.left + e.width / 2, a = e.bottom + u;
+        break;
+      case "left":
+        d = e.left - n.width - u, a = e.top + e.height / 2;
+        break;
+      case "right":
+        d = e.right + u, a = e.top + e.height / 2;
+        break;
+    }
+    t.style.left = `${d}px`, t.style.top = `${a}px`;
+  }
+};
+var G = `:host {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.dt-card-inner {
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  padding: 12px;
+  color: var(--dt-text);
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  position: relative;
+  height: 100%;
+}
+
+/* Corner accents for sci-fi feel */
+.dt-card-inner::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 8px;
+  height: 8px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-card-inner::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 8px;
+  height: 8px;
+  border-bottom: 2px solid var(--dt-accent);
+  border-right: 2px solid var(--dt-accent);
+}
+
+:host([variant='outlined']) .dt-card-inner {
+  background: transparent;
+  border-style: dashed;
+}
+
+:host([variant='filled']) .dt-card-inner {
+  background: var(--dt-accent-subtle);
+  border-style: solid;
+}
+
+::slotted(h1),
+::slotted(h2),
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
+  color: var(--dt-accent);
+  margin: 0 0 6px;
+  line-height: 1.2;
+  font-family: var(--font-display, 'Sora', system-ui, sans-serif);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 0.85rem;
+}
+
+::slotted(p) {
+  color: var(--dt-text-secondary);
+  margin: 0 0 6px;
+  line-height: 1.4;
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  font-size: 0.8125rem;
+}
+
+::slotted(p:last-child) {
+  margin-bottom: 0;
+}
+`;
+var _t = "dt-card-inner";
+var w = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant"];
+  }
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "outlined" || t === "filled" ? t : "default";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = G, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = _t, n.innerHTML = "<slot></slot>", t.appendChild(n);
+  }
+};
+var j = `.dt-select-menu {
+  position: fixed;
+  z-index: 2147483646;
+  display: flex;
+  min-width: 200px;
+  max-width: min(300px, 72vw);
+  max-height: 240px;
+  flex-direction: column;
+  overflow-y: auto;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 100ms ease;
+}
+
+.dt-select-menu[data-open] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dt-select-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border: 0;
+  border-bottom: 1px solid var(--dt-border-subtle);
+  background: transparent;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  user-select: none;
+}
+
+.dt-select-option:last-child {
+  border-bottom: none;
+}
+
+.dt-select-option:hover {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-select-option.dt-select-option--active {
+  background: var(--dt-accent-subtle);
+  color: var(--dt-accent);
+}
+
+.dt-select-option span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;
+var q = `:host {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+:host([disabled]) .dt-select-trigger {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.dt-select-trigger {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  user-select: none;
+  position: relative;
+}
+
+/* Corner accents */
+.dt-select-trigger::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-select-trigger::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  height: 4px;
+  border-bottom: 1px solid var(--dt-accent);
+  border-right: 1px solid var(--dt-accent);
+}
+
+.dt-select-trigger:hover:not([disabled]) {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-select-trigger:hover:not([disabled])::before,
+.dt-select-trigger:hover:not([disabled])::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+.dt-select-trigger[aria-expanded='true'] {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-select-trigger[aria-expanded='true']::before,
+.dt-select-trigger[aria-expanded='true']::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+.dt-select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dt-select-chevron {
+  color: currentColor;
+  font-size: 10px;
+  transition: transform 140ms ease;
+  opacity: 0.7;
+}
+
+.dt-select-trigger[aria-expanded='true'] .dt-select-chevron {
+  transform: rotate(180deg);
+}
+`;
+var xt = "dt-select-trigger";
+var K = "dt-select-label";
+var wt = "dt-select-chevron";
+var yt = "dt-select-menu";
+var kt = "dt-select-option";
+var Ct = "dt-select-option--active";
+var U = false;
+function Et() {
+  if (U) return;
+  let r = document.createElement("style");
+  r.setAttribute("data-dt-select", ""), r.textContent = j, document.head.appendChild(r), U = true;
+}
+var y = class extends HTMLElement {
+  _menu = null;
+  _trigger = null;
+  _options = [];
+  _open = false;
+  _menuId = "";
+  static get observedAttributes() {
+    return ["value", "placeholder", "disabled", "align"];
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(t) {
+    this.setAttribute("value", t);
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") ?? "Select\u2026";
+  }
+  set placeholder(t) {
+    this.setAttribute("placeholder", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get align() {
+    return this.getAttribute("align") === "right" ? "right" : "left";
+  }
+  set align(t) {
+    this.setAttribute("align", t);
+  }
+  get options() {
+    return this._options;
+  }
+  set options(t) {
+    this._options = t, this._updateLabel(), this._open && this._renderMenuItems();
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = q, t.appendChild(e);
+    let n = document.createElement("button");
+    n.type = "button", n.className = xt, n.setAttribute("aria-haspopup", "listbox"), n.setAttribute("aria-expanded", "false");
+    let i = document.createElement("span");
+    i.className = K, n.appendChild(i);
+    let s = document.createElement("span");
+    s.className = wt, s.setAttribute("aria-hidden", "true"), s.textContent = "\u25BE", n.appendChild(s), t.appendChild(n), this._trigger = n, this._menuId = `dt-sel-${Math.random().toString(36).slice(2, 9)}`;
+  }
+  connectedCallback() {
+    Et(), this._trigger.addEventListener("click", this._onTriggerClick), this._updateLabel();
+  }
+  disconnectedCallback() {
+    this._trigger.removeEventListener("click", this._onTriggerClick), this._close();
+  }
+  attributeChangedCallback(t) {
+    t === "value" && (this._updateLabel(), this._open && this._renderMenuItems()), t === "placeholder" && !this.value && this._updateLabel(), t === "disabled" && this.disabled && this._close();
+  }
+  _updateLabel() {
+    let t = this._trigger.querySelector(`.${K}`), e = this._options.find((n) => n.value === this.value);
+    t.textContent = e?.label ?? this.placeholder;
+  }
+  _onTriggerClick = () => {
+    this.disabled || (this._open ? this._close() : this._openMenu());
+  };
+  _openMenu() {
+    if (this._open) return;
+    let t = document.createElement("div");
+    t.className = yt, t.id = this._menuId, t.setAttribute("role", "listbox"), document.body.appendChild(t), this._menu = t, this._renderMenuItems(), this._position(), requestAnimationFrame(() => {
+      t.setAttribute("data-open", "");
+    }), this._open = true, this._trigger.setAttribute("aria-expanded", "true"), requestAnimationFrame(() => {
+      document.addEventListener("mousedown", this._onOutsideClick), document.addEventListener("keydown", this._onKeyDown);
+    });
+  }
+  _close() {
+    if (this._open) {
+      if (document.removeEventListener("mousedown", this._onOutsideClick), document.removeEventListener("keydown", this._onKeyDown), this._menu) {
+        this._menu.removeAttribute("data-open");
+        let t = this._menu;
+        setTimeout(() => t.remove(), 140), this._menu = null;
+      }
+      this._open = false, this._trigger.setAttribute("aria-expanded", "false");
+    }
+  }
+  _onOutsideClick = (t) => {
+    let e = t.target;
+    this._menu?.contains(e) || this.contains(e) || this._close();
+  };
+  _onKeyDown = (t) => {
+    t.key === "Escape" && (this._close(), this._trigger.focus());
+  };
+  _renderMenuItems() {
+    let t = this._menu;
+    if (t) {
+      t.innerHTML = "";
+      for (let e of this._options) {
+        let n = document.createElement("button");
+        n.type = "button", n.className = kt, n.setAttribute("role", "option"), n.setAttribute("aria-selected", String(e.value === this.value)), e.value === this.value && n.classList.add(Ct);
+        let i = document.createElement("span");
+        i.textContent = e.label, n.appendChild(i), n.addEventListener("click", () => {
+          this._selectValue(e.value);
+        }), t.appendChild(n);
+      }
+    }
+  }
+  _selectValue(t) {
+    let e = this.value;
+    this.value = t, this._updateLabel(), this._close(), t !== e && this.dispatchEvent(new CustomEvent("dt-change", { detail: { value: t }, bubbles: true, composed: true }));
+  }
+  _position() {
+    let t = this._menu;
+    if (!t) return;
+    let e = this.getBoundingClientRect(), n = 10, i = Math.max(e.width, 240), s = e.bottom + n, o = t.scrollHeight || 260, a = window.innerHeight;
+    if (s + o > a && e.top - o - n > 0 && (s = e.top - o - n), t.style.minWidth = `${i}px`, this.align === "right") {
+      let d = window.innerWidth;
+      t.style.right = `${d - e.right}px`, t.style.left = "auto";
+    } else t.style.left = `${e.left}px`, t.style.right = "auto";
+    t.style.top = `${s}px`;
+  }
+};
+var Y = `:host {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.dt-grid-inner {
+  display: grid;
+  gap: var(--grid-gap, 12px);
+  grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 220px), 1fr));
+}
+
+:host([cols='1']) .dt-grid-inner {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+:host([cols='2']) .dt-grid-inner {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+:host([cols='3']) .dt-grid-inner {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+:host([cols='4']) .dt-grid-inner {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+:host([cols='5']) .dt-grid-inner {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+:host([cols='6']) .dt-grid-inner {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+@media (max-width: 480px) {
+  :host([cols='2']) .dt-grid-inner,
+  :host([cols='3']) .dt-grid-inner,
+  :host([cols='4']) .dt-grid-inner,
+  :host([cols='5']) .dt-grid-inner,
+  :host([cols='6']) .dt-grid-inner {
+    grid-template-columns: 1fr;
+  }
+}
+
+:host([gap='0']) .dt-grid-inner {
+  --grid-gap: 0;
+}
+:host([gap='4']) .dt-grid-inner {
+  --grid-gap: 4px;
+}
+:host([gap='8']) .dt-grid-inner {
+  --grid-gap: 8px;
+}
+:host([gap='12']) .dt-grid-inner {
+  --grid-gap: 12px;
+}
+:host([gap='16']) .dt-grid-inner {
+  --grid-gap: 16px;
+}
+:host([gap='20']) .dt-grid-inner {
+  --grid-gap: 20px;
+}
+:host([gap='24']) .dt-grid-inner {
+  --grid-gap: 24px;
+}
+:host([gap='32']) .dt-grid-inner {
+  --grid-gap: 32px;
+}
+
+:host([min-width='150']) .dt-grid-inner {
+  --min-width: 150px;
+}
+:host([min-width='180']) .dt-grid-inner {
+  --min-width: 180px;
+}
+:host([min-width='200']) .dt-grid-inner {
+  --min-width: 200px;
+}
+:host([min-width='220']) .dt-grid-inner {
+  --min-width: 220px;
+}
+:host([min-width='260']) .dt-grid-inner {
+  --min-width: 260px;
+}
+:host([min-width='300']) .dt-grid-inner {
+  --min-width: 300px;
+}
+
+::slotted(*) {
+  min-width: 0;
+}
+`;
+var St = "dt-grid-inner";
+var k = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["cols", "gap", "min-width"];
+  }
+  get cols() {
+    let t = this.getAttribute("cols");
+    return t === "1" || t === "2" || t === "3" || t === "4" || t === "5" || t === "6" ? t : null;
+  }
+  set cols(t) {
+    t === null ? this.removeAttribute("cols") : this.setAttribute("cols", t);
+  }
+  get gap() {
+    let t = this.getAttribute("gap");
+    return t === "0" || t === "4" || t === "8" || t === "12" || t === "20" || t === "24" || t === "32" ? t : "16";
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get minWidth() {
+    let t = this.getAttribute("min-width");
+    return t === "150" || t === "180" || t === "200" || t === "260" || t === "300" ? t : "220";
+  }
+  set minWidth(t) {
+    this.setAttribute("min-width", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = Y, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = St, n.innerHTML = "<slot></slot>", t.appendChild(n);
+  }
+};
+var Z = `:host {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.dt-stack-inner {
+  display: flex;
+  flex-direction: var(--flex-direction, column);
+  gap: var(--stack-gap, 12px);
+  align-items: var(--align-items, stretch);
+}
+
+:host([direction='column']) .dt-stack-inner {
+  --flex-direction: column;
+}
+:host([direction='row']) .dt-stack-inner {
+  --flex-direction: row;
+}
+
+:host([gap='0']) .dt-stack-inner {
+  --stack-gap: 0;
+}
+:host([gap='4']) .dt-stack-inner {
+  --stack-gap: 4px;
+}
+:host([gap='8']) .dt-stack-inner {
+  --stack-gap: 8px;
+}
+:host([gap='12']) .dt-stack-inner {
+  --stack-gap: 12px;
+}
+:host([gap='16']) .dt-stack-inner {
+  --stack-gap: 16px;
+}
+:host([gap='20']) .dt-stack-inner {
+  --stack-gap: 20px;
+}
+:host([gap='24']) .dt-stack-inner {
+  --stack-gap: 24px;
+}
+:host([gap='32']) .dt-stack-inner {
+  --stack-gap: 32px;
+}
+
+:host([align='start']) .dt-stack-inner {
+  --align-items: flex-start;
+}
+:host([align='center']) .dt-stack-inner {
+  --align-items: center;
+}
+:host([align='end']) .dt-stack-inner {
+  --align-items: flex-end;
+}
+:host([align='stretch']) .dt-stack-inner {
+  --align-items: stretch;
+}
+
+@media (max-width: 480px) {
+  :host([direction='row']) .dt-stack-inner {
+    --flex-direction: column;
+  }
+}
+
+::slotted(*) {
+  min-width: 0;
+}
+`;
+var Dt = "dt-stack-inner";
+function $(r) {
+  return r === "row" || r === "horizontal" ? "row" : "column";
+}
+var C = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["direction", "gap", "align"];
+  }
+  get direction() {
+    return $(this.getAttribute("direction"));
+  }
+  set direction(t) {
+    this.setAttribute("direction", $(t));
+  }
+  get gap() {
+    let t = this.getAttribute("gap");
+    return t === "0" || t === "4" || t === "8" || t === "12" || t === "20" || t === "24" || t === "32" ? t : "16";
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get align() {
+    let t = this.getAttribute("align");
+    return t === "start" || t === "center" || t === "end" ? t : "stretch";
+  }
+  set align(t) {
+    this.setAttribute("align", t);
+  }
+  connectedCallback() {
+    this.#t();
+  }
+  attributeChangedCallback(t) {
+    t === "direction" && this.#t();
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = Z, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = Dt, n.innerHTML = "<slot></slot>", t.appendChild(n);
+  }
+  #t() {
+    let t = this.getAttribute("direction"), e = $(t);
+    t !== null && t !== e && this.setAttribute("direction", e);
+  }
+};
+var Q = `:host {
+  display: block;
+}
+
+.dt-stat-inner {
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  padding: 12px;
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+
+/* Corner accents */
+.dt-stat-inner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-stat-inner .label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--dt-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.dt-stat-inner .value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--dt-accent);
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--font-display, 'Sora', system-ui, sans-serif);
+}
+
+.dt-stat-inner .description {
+  font-size: 0.75rem;
+  color: var(--dt-text-secondary);
+  line-height: 1.3;
+}
+
+/* Size variants */
+:host([size='sm']) .dt-stat-inner .value {
+  font-size: 1.125rem;
+}
+
+:host([size='sm']) .dt-stat-inner {
+  padding: 8px;
+}
+
+:host([size='lg']) .dt-stat-inner .value {
+  font-size: 2rem;
+}
+
+:host([size='lg']) .dt-stat-inner {
+  padding: 16px;
+}
+
+/* Variant: outlined */
+:host([variant='outlined']) .dt-stat-inner {
+  background: transparent;
+  border-style: dashed;
+}
+
+/* Variant: filled */
+:host([variant='filled']) .dt-stat-inner {
+  background: var(--dt-accent-subtle);
+  border-style: solid;
+}
+
+/* Trend indicators */
+.dt-stat-inner .trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  margin-top: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dt-stat-inner .trend.positive {
+  color: var(--dt-success);
+}
+
+.dt-stat-inner .trend.negative {
+  color: var(--dt-danger);
+}
+
+.dt-stat-inner .trend.neutral {
+  color: var(--dt-text-muted);
+}
+`;
+var At = "dt-stat-inner";
+var E = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["label", "value", "description", "size", "variant", "trend", "trend-value"];
+  }
+  _container;
+  _labelEl;
+  _valueEl;
+  _descEl;
+  _trendEl;
+  get label() {
+    return this.getAttribute("label");
+  }
+  set label(t) {
+    t === null ? this.removeAttribute("label") : this.setAttribute("label", t);
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t === null ? this.removeAttribute("value") : this.setAttribute("value", t);
+  }
+  get description() {
+    return this.getAttribute("description");
+  }
+  set description(t) {
+    t === null ? this.removeAttribute("description") : this.setAttribute("description", t);
+  }
+  get size() {
+    let t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "outlined" || t === "filled" ? t : "default";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get trend() {
+    let t = this.getAttribute("trend");
+    return t === "up" || t === "down" || t === "neutral" ? t : null;
+  }
+  set trend(t) {
+    t === null ? this.removeAttribute("trend") : this.setAttribute("trend", t);
+  }
+  get trendValue() {
+    return this.getAttribute("trend-value");
+  }
+  set trendValue(t) {
+    t === null ? this.removeAttribute("trend-value") : this.setAttribute("trend-value", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = Q, t.appendChild(e), this._container = document.createElement("div"), this._container.className = At, this._labelEl = document.createElement("div"), this._labelEl.className = "label", this._container.appendChild(this._labelEl), this._valueEl = document.createElement("div"), this._valueEl.className = "value", this._container.appendChild(this._valueEl), this._descEl = document.createElement("div"), this._descEl.className = "description", this._container.appendChild(this._descEl), this._trendEl = document.createElement("div"), this._trendEl.className = "trend", this._container.appendChild(this._trendEl), t.appendChild(this._container), this._render();
+  }
+  attributeChangedCallback(t, e, n) {
+    (t === "label" || t === "value" || t === "description" || t === "size" || t === "variant" || t === "trend" || t === "trend-value") && this._render();
+  }
+  _render() {
+    this._labelEl.textContent = this.label ?? "", this._labelEl.style.display = this.label ? "block" : "none", this._valueEl.textContent = this.value ?? "", this._valueEl.style.display = this.value ? "block" : "none", this._descEl.textContent = this.description ?? "", this._descEl.style.display = this.description ? "block" : "none";
+    let t = this.trend, e = this.trendValue;
+    if (t && e) {
+      this._trendEl.style.display = "inline-flex", this._trendEl.className = `trend ${t === "up" ? "positive" : t === "down" ? "negative" : "neutral"}`;
+      let n = "";
+      t === "up" ? n = "\u2191" : t === "down" ? n = "\u2193" : n = "\u2192", this._trendEl.textContent = `${n} ${e}`;
+    } else this._trendEl.style.display = "none";
+  }
+};
+var tt = `:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.dt-badge-inner {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border: 1px solid;
+  border-radius: 2px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  line-height: 1.2;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Variant: accent (default) */
+:host([variant='accent']) .dt-badge-inner,
+.dt-badge-inner {
+  background: var(--dt-accent-subtle);
+  border-color: var(--dt-accent);
+  color: var(--dt-accent);
+}
+
+/* Variant: success */
+:host([variant='success']) .dt-badge-inner {
+  background: var(--dt-success-subtle);
+  border-color: var(--dt-success);
+  color: var(--dt-success);
+}
+
+/* Variant: danger */
+:host([variant='danger']) .dt-badge-inner {
+  background: var(--dt-danger-subtle);
+  border-color: var(--dt-danger);
+  color: var(--dt-danger);
+}
+
+/* Variant: warning */
+:host([variant='warning']) .dt-badge-inner {
+  background: var(--dt-warning-subtle);
+  border-color: var(--dt-warning);
+  color: var(--dt-warning);
+}
+
+/* Variant: info */
+:host([variant='info']) .dt-badge-inner {
+  background: var(--dt-info-subtle);
+  border-color: var(--dt-info);
+  color: var(--dt-info);
+}
+
+/* Variant: default/neutral */
+:host([variant='default']) .dt-badge-inner,
+:host([variant='neutral']) .dt-badge-inner {
+  background: transparent;
+  border-color: var(--dt-border);
+  color: var(--dt-text-secondary);
+}
+
+/* Size variants */
+:host([size='sm']) .dt-badge-inner {
+  padding: 1px 4px;
+  font-size: 0.625rem;
+}
+
+:host([size='lg']) .dt-badge-inner {
+  padding: 3px 8px;
+  font-size: 0.75rem;
+}
+`;
+var Mt = "dt-badge-inner";
+var S = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size", "text"];
+  }
+  _container;
+  _slot;
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "success" || t === "danger" || t === "warning" || t === "info" || t === "default" || t === "neutral" ? t : "accent";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get size() {
+    let t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get text() {
+    return this.getAttribute("text");
+  }
+  set text(t) {
+    t === null ? this.removeAttribute("text") : this.setAttribute("text", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = tt, t.appendChild(e), this._container = document.createElement("span"), this._container.className = Mt;
+    let n = this.text;
+    n !== null ? this._container.textContent = n : (this._slot = document.createElement("slot"), this._container.appendChild(this._slot)), t.appendChild(this._container);
+  }
+  attributeChangedCallback(t, e, n) {
+    t === "text" && this._render();
+  }
+  _render() {
+    let t = this.text;
+    t !== null && (this._container.textContent = t);
+  }
+};
+var et = `:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.dt-button-inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  line-height: 1.2;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  background: var(--dt-surface);
+  color: var(--dt-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  position: relative;
+}
+
+/* Corner accents */
+.dt-button-inner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-button-inner::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  height: 4px;
+  border-bottom: 1px solid var(--dt-accent);
+  border-right: 1px solid var(--dt-accent);
+}
+
+.dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-button-inner:hover:not(:disabled)::before,
+.dt-button-inner:hover:not(:disabled)::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+.dt-button-inner:active:not(:disabled) {
+  background: var(--dt-accent-active);
+}
+
+.dt-button-inner:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  border-color: var(--dt-border);
+  color: var(--dt-text-muted);
+}
+
+.dt-button-inner:disabled::before,
+.dt-button-inner:disabled::after {
+  border-color: var(--dt-border);
+}
+
+/* Variant: primary - filled accent */
+:host([variant='primary']) .dt-button-inner {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+:host([variant='primary']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-accent-hover);
+}
+
+/* Variant: secondary - outlined */
+:host([variant='secondary']) .dt-button-inner {
+  background: transparent;
+  border-color: var(--dt-border);
+  color: var(--dt-text);
+}
+
+:host([variant='secondary']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-surface-hover);
+  border-color: var(--dt-accent);
+  color: var(--dt-accent);
+}
+
+/* Variant: ghost - minimal */
+:host([variant='ghost']) .dt-button-inner {
+  background: transparent;
+  border-color: transparent;
+  color: var(--dt-text-secondary);
+}
+
+:host([variant='ghost']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-surface);
+  border-color: var(--dt-border);
+  color: var(--dt-text);
+}
+
+:host([variant='ghost']) .dt-button-inner::before,
+:host([variant='ghost']) .dt-button-inner::after {
+  display: none;
+}
+
+/* Variant: danger */
+:host([variant='danger']) .dt-button-inner {
+  background: transparent;
+  border-color: var(--dt-danger);
+  color: var(--dt-danger);
+}
+
+:host([variant='danger']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-danger);
+  color: var(--dt-text-on-accent);
+}
+
+:host([variant='danger']) .dt-button-inner::before,
+:host([variant='danger']) .dt-button-inner::after {
+  border-color: var(--dt-danger);
+}
+
+:host([variant='danger']) .dt-button-inner:hover:not(:disabled)::before,
+:host([variant='danger']) .dt-button-inner:hover:not(:disabled)::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+/* Size: sm */
+:host([size='sm']) .dt-button-inner {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+
+/* Size: lg */
+:host([size='lg']) .dt-button-inner {
+  padding: 8px 16px;
+  font-size: 0.875rem;
+}
+
+:host([fullwidth]) .dt-button-inner {
+  width: 100%;
+}
+
+::slotted([slot='icon']) {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+}
+`;
+var Tt = "dt-button-inner";
+var D = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size", "disabled", "fullwidth", "type"];
+  }
+  _button;
+  _slot;
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "secondary" || t === "ghost" || t === "danger" ? t : "primary";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get size() {
+    let t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get fullwidth() {
+    return this.hasAttribute("fullwidth");
+  }
+  set fullwidth(t) {
+    t ? this.setAttribute("fullwidth", "") : this.removeAttribute("fullwidth");
+  }
+  get type() {
+    let t = this.getAttribute("type");
+    return t === "submit" || t === "reset" ? t : "button";
+  }
+  set type(t) {
+    this.setAttribute("type", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = et, t.appendChild(e), this._button = document.createElement("button"), this._button.className = Tt, this._button.type = this.type, this._button.disabled = this.disabled, this._slot = document.createElement("slot"), this._button.appendChild(this._slot), t.appendChild(this._button);
+  }
+  attributeChangedCallback(t, e, n) {
+    switch (t) {
+      case "disabled":
+        this._button.disabled = this.disabled;
+        break;
+      case "type":
+        this._button.type = this.type;
+        break;
+    }
+  }
+};
+var nt = `:host {
+  display: block;
+}
+
+.dt-divider-inner {
+  border: none;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* Horizontal (default) */
+:host([direction='horizontal']) .dt-divider-inner,
+.dt-divider-inner {
+  width: 100%;
+  height: 1px;
+  background: var(--dt-accent);
+  opacity: 0.5;
+}
+
+/* Vertical */
+:host([direction='vertical']) .dt-divider-inner {
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+  background: var(--dt-accent);
+  opacity: 0.5;
+}
+
+/* Style variants */
+:host([style-variant='subtle']) .dt-divider-inner {
+  background: var(--dt-border);
+  opacity: 1;
+}
+
+:host([style-variant='strong']) .dt-divider-inner {
+  background: var(--dt-accent);
+  opacity: 1;
+  height: 2px;
+}
+
+:host([direction='vertical'][style-variant='strong']) .dt-divider-inner {
+  width: 2px;
+  height: 100%;
+}
+
+/* Spacing */
+:host([spacing='sm']) .dt-divider-inner {
+  margin: 6px 0;
+}
+:host([spacing='md']) .dt-divider-inner {
+  margin: 12px 0;
+}
+:host([spacing='lg']) .dt-divider-inner {
+  margin: 18px 0;
+}
+
+:host([direction='vertical'][spacing='sm']) .dt-divider-inner {
+  margin: 0 6px;
+}
+:host([direction='vertical'][spacing='md']) .dt-divider-inner {
+  margin: 0 12px;
+}
+:host([direction='vertical'][spacing='lg']) .dt-divider-inner {
+  margin: 0 18px;
+}
+`;
+var zt = "dt-divider-inner";
+var A = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["direction", "style-variant", "spacing"];
+  }
+  get direction() {
+    return this.getAttribute("direction") === "vertical" ? "vertical" : "horizontal";
+  }
+  set direction(t) {
+    this.setAttribute("direction", t);
+  }
+  get styleVariant() {
+    let t = this.getAttribute("style-variant");
+    return t === "subtle" || t === "strong" ? t : "default";
+  }
+  set styleVariant(t) {
+    this.setAttribute("style-variant", t);
+  }
+  get spacing() {
+    let t = this.getAttribute("spacing");
+    return t === "sm" || t === "md" || t === "lg" ? t : null;
+  }
+  set spacing(t) {
+    t === null ? this.removeAttribute("spacing") : this.setAttribute("spacing", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = nt, t.appendChild(e);
+    let n = document.createElement("hr");
+    n.className = zt, t.appendChild(n);
+  }
+};
+var rt = `:host {
+  display: block;
+  min-height: 180px;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+}
+
+.dt-table-view {
+  display: flex;
+  flex-direction: column;
+  min-height: inherit;
+  height: 100%;
+  overflow: hidden;
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  position: relative;
+}
+
+.dt-table-view::before,
+.dt-table-view::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.dt-table-view::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-table-view::after {
+  right: -1px;
+  bottom: -1px;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-table-scroll {
+  min-height: inherit;
+  height: 100%;
+  overflow: auto;
+}
+
+.dt-table-header,
+.dt-table-row {
+  display: grid;
+  grid-template-columns: var(--dt-table-columns, minmax(0, 1fr));
+  min-width: fit-content;
+}
+
+.dt-table-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  border-bottom: 1px solid var(--dt-border);
+}
+
+.dt-table-header-cell,
+.dt-table-cell {
+  min-width: 0;
+  padding: 10px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+}
+
+.dt-table-header-cell {
+  color: var(--dt-accent);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.dt-table-header-cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.dt-table-header-cell--sortable:hover {
+  background: var(--dt-surface-hover);
+}
+
+.dt-table-header-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dt-table-sort-indicator {
+  color: var(--dt-text-secondary);
+  font-size: 0.7rem;
+}
+
+.dt-table-body {
+  position: relative;
+}
+
+.dt-table-canvas {
+  position: relative;
+}
+
+.dt-table-row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--dt-border-subtle);
+}
+
+.dt-table-row--clickable {
+  cursor: pointer;
+}
+
+.dt-table-row--clickable:hover {
+  background: var(--dt-surface-hover);
+}
+
+:host([striped]) .dt-table-row:nth-child(even) {
+  background: color-mix(in srgb, var(--dt-surface) 92%, var(--dt-accent) 8%);
+}
+
+:host([bordered]) .dt-table-header-cell,
+:host([bordered]) .dt-table-cell {
+  border-right: 1px solid var(--dt-border-subtle);
+}
+
+:host([bordered]) .dt-table-header-cell:last-child,
+:host([bordered]) .dt-table-cell:last-child {
+  border-right: 0;
+}
+
+.dt-table-cell[data-align='center'],
+.dt-table-header-cell[data-align='center'] {
+  text-align: center;
+}
+
+.dt-table-cell[data-align='right'],
+.dt-table-header-cell[data-align='right'] {
+  text-align: right;
+}
+
+.dt-table-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 140px;
+  padding: 20px;
+  color: var(--dt-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+}
+`;
+function Lt(r) {
+  return r == null || r === false ? null : r === true ? "" : String(r);
+}
+function Ht(r, t) {
+  let e = r.querySelectorAll("*");
+  for (let n of e) {
+    let i = n.getAttribute("data-field");
+    if (i) {
+      let s = t[i];
+      n.textContent = s == null ? "" : String(s);
+    }
+    for (let s of n.getAttributeNames()) {
+      if (s === "data-field" || !s.startsWith("data-field-")) continue;
+      let o = s.slice(11);
+      if (!o) continue;
+      let a = n.getAttribute(s);
+      if (!a) continue;
+      let d = Lt(t[a]);
+      d === null ? n.removeAttribute(o) : n.setAttribute(o, d);
+    }
+  }
+}
+function M(r, t) {
+  let e = r.content.cloneNode(true);
+  return Ht(e, t), e;
+}
+var m = class {
+  _count = 0;
+  _estimateSize = 56;
+  _overscan = 5;
+  _fixedSize = null;
+  _viewportHeight = 0;
+  _scrollTop = 0;
+  _sizes = /* @__PURE__ */ new Map();
+  constructor(t = {}) {
+    this._count = t.count ?? 0, this._estimateSize = t.estimateSize ?? 56, this._overscan = t.overscan ?? 5, this._fixedSize = t.fixedSize ?? null;
+  }
+  setCount(t) {
+    this._count = Math.max(0, t);
+    for (let e of this._sizes.keys()) e >= this._count && this._sizes.delete(e);
+  }
+  setViewportHeight(t) {
+    this._viewportHeight = Math.max(0, t);
+  }
+  setScrollTop(t) {
+    this._scrollTop = Math.max(0, t);
+  }
+  setEstimateSize(t) {
+    this._estimateSize = Math.max(1, t);
+  }
+  setFixedSize(t) {
+    this._fixedSize = t && t > 0 ? t : null;
+  }
+  resetMeasurements() {
+    this._sizes.clear();
+  }
+  measure(t, e) {
+    if (this._fixedSize !== null || t < 0 || t >= this._count) return 0;
+    let n = Math.max(1, Math.round(e)), i = this._sizes.get(t);
+    return i === n ? 0 : (this._sizes.set(t, n), this.getOffset(t + 1) <= this._scrollTop ? n - (i ?? this._estimateSize) : 0);
+  }
+  getOffset(t) {
+    if (t <= 0) return 0;
+    let e = Math.min(t, this._count);
+    if (this._fixedSize !== null) return e * this._fixedSize;
+    let n = 0;
+    for (let i = 0; i < e; i += 1) n += this._sizes.get(i) ?? this._estimateSize;
+    return n;
+  }
+  getTotalHeight() {
+    return this.getOffset(this._count);
+  }
+  getRange() {
+    if (this._count === 0) return { start: 0, end: 0, paddingTop: 0, paddingBottom: 0, totalHeight: 0 };
+    if (this._fixedSize !== null) {
+      let d = Math.max(1, Math.ceil(this._viewportHeight / this._fixedSize)), c = Math.max(0, Math.floor(this._scrollTop / this._fixedSize) - this._overscan), l = Math.min(this._count, c + d + this._overscan * 2), f = c * this._fixedSize, _ = this._count * this._fixedSize, h = Math.max(0, _ - f - (l - c) * this._fixedSize);
+      return { start: c, end: l, paddingTop: f, paddingBottom: h, totalHeight: _ };
+    }
+    let t = 0, e = 0;
+    for (; t < this._count; ) {
+      let d = this._sizes.get(t) ?? this._estimateSize;
+      if (e + d > this._scrollTop) break;
+      e += d, t += 1;
+    }
+    t = Math.max(0, t - this._overscan);
+    let n = this.getOffset(t), i = t, s = 0;
+    for (; i < this._count && s < this._viewportHeight; ) s += this._sizes.get(i) ?? this._estimateSize, i += 1;
+    i = Math.min(this._count, i + this._overscan);
+    let o = this.getTotalHeight(), a = Math.max(0, o - this.getOffset(i));
+    return { start: t, end: i, paddingTop: n, paddingBottom: a, totalHeight: o };
+  }
+};
+function Rt(r) {
+  return r && typeof r == "object" ? r : { value: r };
+}
+function Vt(r) {
+  return r === "center" || r === "right" ? r : "left";
+}
+var b = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["field", "header", "width", "min-width", "align"];
+  }
+  get field() {
+    return this.getAttribute("field") ?? "";
+  }
+  get header() {
+    return this.getAttribute("header") ?? this.field;
+  }
+  get width() {
+    return this.getAttribute("width") ?? "auto";
+  }
+  get minWidth() {
+    return this.getAttribute("min-width") ?? "0";
+  }
+  get align() {
+    return Vt(this.getAttribute("align"));
+  }
+  connectedCallback() {
+    this.hidden = true;
+  }
+  attributeChangedCallback() {
+    this.dispatchEvent(new CustomEvent("dt-column-change", { bubbles: true, composed: true }));
+  }
+};
+var T = class extends HTMLElement {
+  _rows = [];
+  _columns = [];
+  _virtualizer = new m({ estimateSize: 40, overscan: 5, fixedSize: 40 });
+  _root;
+  _scroll;
+  _header;
+  _body;
+  _canvas;
+  _emptyState;
+  _resizeObserver = null;
+  _mutationObserver = null;
+  _sortField = null;
+  _sortDirection = "asc";
+  static get observedAttributes() {
+    return ["row-height", "sortable", "striped", "bordered", "empty-text"];
+  }
+  get rows() {
+    return this._rows;
+  }
+  set rows(t) {
+    this._rows = Array.isArray(t) ? t : [], this._virtualizer.setCount(this._rows.length), this._render();
+  }
+  get rowHeight() {
+    let t = Number(this.getAttribute("row-height") ?? "40");
+    return Number.isFinite(t) && t > 0 ? t : 40;
+  }
+  set rowHeight(t) {
+    this.setAttribute("row-height", String(t));
+  }
+  get sortable() {
+    return this.hasAttribute("sortable");
+  }
+  get emptyText() {
+    return this.getAttribute("empty-text") ?? "No data";
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = rt, t.appendChild(e), this._root = document.createElement("div"), this._root.className = "dt-table-view", this._scroll = document.createElement("div"), this._scroll.className = "dt-table-scroll", this._scroll.addEventListener("scroll", this._onScroll, { passive: true }), this._header = document.createElement("div"), this._header.className = "dt-table-header", this._body = document.createElement("div"), this._body.className = "dt-table-body", this._canvas = document.createElement("div"), this._canvas.className = "dt-table-canvas", this._emptyState = document.createElement("div"), this._emptyState.className = "dt-table-empty", this._body.append(this._canvas, this._emptyState), this._scroll.append(this._header, this._body), this._root.appendChild(this._scroll), t.appendChild(this._root);
+  }
+  connectedCallback() {
+    this._virtualizer.setFixedSize(this.rowHeight), this._virtualizer.setEstimateSize(this.rowHeight), this._syncColumns(), this._resizeObserver = new ResizeObserver((t) => {
+      for (let e of t) if (e.target === this._scroll) {
+        let n = this._header.offsetHeight;
+        this._virtualizer.setViewportHeight(Math.max(0, e.contentRect.height - n)), this._render();
+      }
+    }), this._resizeObserver.observe(this._scroll), this._mutationObserver = new MutationObserver(() => {
+      this._syncColumns(), this._render();
+    }), this._mutationObserver.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["field", "header", "width", "min-width", "align"] }), this._virtualizer.setCount(this._rows.length), this._virtualizer.setViewportHeight(Math.max(0, this._scroll.clientHeight - this._header.offsetHeight)), this._render();
+  }
+  disconnectedCallback() {
+    this._scroll.removeEventListener("scroll", this._onScroll), this._resizeObserver?.disconnect(), this._mutationObserver?.disconnect(), this._resizeObserver = null, this._mutationObserver = null;
+  }
+  attributeChangedCallback(t) {
+    t === "row-height" && (this._virtualizer.setFixedSize(this.rowHeight), this._virtualizer.setEstimateSize(this.rowHeight)), this._render();
+  }
+  _onScroll = () => {
+    this._virtualizer.setScrollTop(Math.max(0, this._scroll.scrollTop - this._header.offsetHeight)), this._renderBody();
+  };
+  _syncColumns() {
+    this._columns = Array.from(this.children).filter((t) => t instanceof b).map((t) => ({ field: t.field, header: t.header, width: t.width, minWidth: t.minWidth, align: t.align, template: Array.from(t.children).find((e) => e instanceof HTMLTemplateElement) ?? null })).filter((t) => t.field);
+  }
+  _render() {
+    if (!this.isConnected) return;
+    this._emptyState.textContent = this.emptyText;
+    let t = this._columns.length > 0 ? this._columns.map((e) => this._toGridColumn(e)).join(" ") : "minmax(0, 1fr)";
+    this._header.style.setProperty("--dt-table-columns", t), this._canvas.style.setProperty("--dt-table-columns", t), this._renderHeader(), this._renderBody();
+  }
+  _renderHeader() {
+    let t = document.createDocumentFragment();
+    for (let e of this._columns) {
+      let n = document.createElement("div");
+      n.className = "dt-table-header-cell", n.dataset.align = e.align, this.sortable && (n.classList.add("dt-table-header-cell--sortable"), n.tabIndex = 0, n.setAttribute("role", "button"), n.setAttribute("aria-label", `Sort by ${e.header}`), n.addEventListener("click", () => this._requestSort(e.field)), n.addEventListener("keydown", (s) => {
+        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._requestSort(e.field));
+      }));
+      let i = document.createElement("span");
+      if (i.className = "dt-table-header-label", i.textContent = e.header, this.sortable) {
+        let s = document.createElement("span");
+        s.className = "dt-table-sort-indicator", this._sortField === e.field ? s.textContent = this._sortDirection === "asc" ? "\u25B2" : "\u25BC" : s.textContent = "\u2195", i.appendChild(s);
+      }
+      n.appendChild(i), t.appendChild(n);
+    }
+    this._header.replaceChildren(t);
+  }
+  _renderBody() {
+    if (this._rows.length === 0 || this._columns.length === 0) {
+      this._emptyState.hidden = false, this._canvas.replaceChildren(), this._body.style.height = "140px", this._canvas.style.height = "0px";
+      return;
+    }
+    this._emptyState.hidden = true, this._virtualizer.setCount(this._rows.length), this._virtualizer.setScrollTop(Math.max(0, this._scroll.scrollTop - this._header.offsetHeight)), this._virtualizer.setViewportHeight(Math.max(0, this._scroll.clientHeight - this._header.offsetHeight));
+    let t = this._virtualizer.getRange();
+    this._body.style.height = `${Math.max(t.totalHeight, this._scroll.clientHeight - this._header.offsetHeight)}px`, this._canvas.style.height = `${t.totalHeight}px`;
+    let e = document.createDocumentFragment();
+    for (let n = t.start; n < t.end; n += 1) e.appendChild(this._renderRow(n));
+    this._canvas.replaceChildren(e);
+  }
+  _renderRow(t) {
+    let e = this._rows[t], n = document.createElement("div");
+    n.className = "dt-table-row dt-table-row--clickable", n.style.top = `${this._virtualizer.getOffset(t)}px`, n.style.height = `${this.rowHeight}px`, n.style.setProperty("--dt-table-columns", this._header.style.getPropertyValue("--dt-table-columns")), n.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("dt-row-click", { detail: { row: e, index: t }, bubbles: true, composed: true }));
+    });
+    let i = Rt(e);
+    for (let s of this._columns) {
+      let o = document.createElement("div");
+      if (o.className = "dt-table-cell", o.dataset.align = s.align, s.template) o.appendChild(M(s.template, i));
+      else {
+        let a = i[s.field];
+        o.textContent = a == null ? "" : String(a);
+      }
+      n.appendChild(o);
+    }
+    return n;
+  }
+  _requestSort(t) {
+    this._sortField === t ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortField = t, this._sortDirection = "asc"), this._renderHeader(), this.dispatchEvent(new CustomEvent("dt-sort", { detail: { field: t, direction: this._sortDirection }, bubbles: true, composed: true }));
+  }
+  _toGridColumn(t) {
+    let e = /^\d+$/.test(t.minWidth) ? `${t.minWidth}px` : t.minWidth;
+    if (t.width === "auto") return `minmax(${e}, 1fr)`;
+    let n = /^\d+$/.test(t.width) ? `${t.width}px` : t.width;
+    return `minmax(${e}, ${n})`;
+  }
+};
+var it = `:host {
+  display: block;
+  min-height: 120px;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+}
+
+.dt-list-view {
+  position: relative;
+  display: block;
+  min-height: inherit;
+  height: 100%;
+  overflow: auto;
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+}
+
+.dt-list-view::before,
+.dt-list-view::after {
+  content: '';
+  position: sticky;
+  z-index: 2;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.dt-list-view::before {
+  top: 0;
+  left: 0;
+  display: block;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-list-view::after {
+  right: 0;
+  bottom: 0;
+  float: right;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-list-spacer {
+  position: relative;
+  min-height: 100%;
+}
+
+.dt-list-items {
+  position: relative;
+}
+
+.dt-list-item {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px;
+  color: inherit;
+}
+
+.dt-list-item--interactive {
+  cursor: pointer;
+}
+
+.dt-list-item--interactive:hover {
+  background: var(--dt-surface-hover);
+}
+
+.dt-list-item--selected {
+  background: var(--dt-accent-subtle);
+}
+
+:host([dividers]) .dt-list-item {
+  border-bottom: 1px solid var(--dt-border-subtle);
+}
+
+:host([dividers]) .dt-list-item:last-child {
+  border-bottom: 0;
+}
+
+.dt-list-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  padding: 20px;
+  color: var(--dt-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+}
+`;
+var st = 56;
+function Pt(r) {
+  return r && typeof r == "object" ? r : { value: r };
+}
+var z = class extends HTMLElement {
+  _items = [];
+  _selectedIndices = /* @__PURE__ */ new Set();
+  _renderItem = null;
+  _virtualizer = new m({ estimateSize: st, overscan: 5 });
+  _viewport;
+  _spacer;
+  _itemsLayer;
+  _emptyState;
+  _resizeObserver = null;
+  _itemResizeObserver = null;
+  static get observedAttributes() {
+    return ["item-height", "dividers", "selectable", "empty-text"];
+  }
+  get items() {
+    return this._items;
+  }
+  set items(t) {
+    this._items = Array.isArray(t) ? t : [], this._selectedIndices = new Set([...this._selectedIndices].filter((e) => e < this._items.length)), this._virtualizer.setCount(this._items.length), this._syncSizingMode(true), this._render();
+  }
+  get selectedItems() {
+    return [...this._selectedIndices].sort((t, e) => t - e).map((t) => this._items[t]);
+  }
+  get renderItem() {
+    return this._renderItem;
+  }
+  set renderItem(t) {
+    this._renderItem = typeof t == "function" ? t : null, this._render();
+  }
+  get itemHeight() {
+    let t = this.getAttribute("item-height");
+    if (!t) return null;
+    let e = Number(t);
+    return Number.isFinite(e) && e > 0 ? e : null;
+  }
+  set itemHeight(t) {
+    if (t === null || t <= 0) {
+      this.removeAttribute("item-height");
+      return;
+    }
+    this.setAttribute("item-height", String(t));
+  }
+  get selectable() {
+    let t = this.getAttribute("selectable");
+    return t === "single" || t === "multi" ? t : "none";
+  }
+  set selectable(t) {
+    this.setAttribute("selectable", t);
+  }
+  get emptyText() {
+    return this.getAttribute("empty-text") ?? "No items";
+  }
+  set emptyText(t) {
+    this.setAttribute("empty-text", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = it, t.appendChild(e), this._viewport = document.createElement("div"), this._viewport.className = "dt-list-view", this._viewport.addEventListener("scroll", this._onScroll, { passive: true }), this._spacer = document.createElement("div"), this._spacer.className = "dt-list-spacer", this._itemsLayer = document.createElement("div"), this._itemsLayer.className = "dt-list-items", this._emptyState = document.createElement("div"), this._emptyState.className = "dt-list-empty", this._spacer.append(this._itemsLayer, this._emptyState), this._viewport.appendChild(this._spacer), t.appendChild(this._viewport);
+  }
+  connectedCallback() {
+    this._resizeObserver = new ResizeObserver((t) => {
+      for (let e of t) e.target === this._viewport && (this._virtualizer.setViewportHeight(e.contentRect.height), this._render());
+    }), this._resizeObserver.observe(this._viewport), this._itemResizeObserver = new ResizeObserver((t) => {
+      let e = 0;
+      for (let n of t) {
+        let i = n.target, s = Number(i.dataset.index);
+        Number.isFinite(s) && (e += this._virtualizer.measure(s, n.contentRect.height));
+      }
+      e !== 0 && (this._viewport.scrollTop += e), t.length > 0 && this._render();
+    }), this._virtualizer.setCount(this._items.length), this._virtualizer.setViewportHeight(this._viewport.clientHeight), this._syncSizingMode(false), this._render();
+  }
+  disconnectedCallback() {
+    this._viewport.removeEventListener("scroll", this._onScroll), this._resizeObserver?.disconnect(), this._itemResizeObserver?.disconnect(), this._resizeObserver = null, this._itemResizeObserver = null;
+  }
+  attributeChangedCallback(t) {
+    t === "item-height" && this._syncSizingMode(true), t === "selectable" && this.selectable === "none" && this._selectedIndices.size > 0 && (this._selectedIndices.clear(), this._emitSelectionChange()), this._render();
+  }
+  _onScroll = () => {
+    this._virtualizer.setScrollTop(this._viewport.scrollTop), this._render();
+  };
+  _syncSizingMode(t) {
+    let e = this.itemHeight;
+    this._virtualizer.setFixedSize(e), this._virtualizer.setEstimateSize(e ?? st), t && this._virtualizer.resetMeasurements();
+  }
+  _render() {
+    if (!this.isConnected) return;
+    if (this._emptyState.textContent = this.emptyText, this._emptyState.hidden = this._items.length > 0, this._items.length === 0) {
+      this._itemsLayer.replaceChildren(), this._spacer.style.height = "100%";
+      return;
+    }
+    this._virtualizer.setScrollTop(this._viewport.scrollTop), this._virtualizer.setViewportHeight(this._viewport.clientHeight), this._virtualizer.setCount(this._items.length);
+    let t = this._virtualizer.getRange();
+    this._spacer.style.height = `${Math.max(t.totalHeight, this._viewport.clientHeight)}px`, this._itemsLayer.style.transform = `translateY(${t.paddingTop}px)`;
+    let e = document.createDocumentFragment();
+    for (let n = t.start; n < t.end; n += 1) e.appendChild(this._renderVisibleItem(n));
+    this._itemsLayer.replaceChildren(e);
+  }
+  _renderVisibleItem(t) {
+    let e = this._items[t], n = document.createElement("div");
+    if (n.className = "dt-list-item", n.dataset.index = String(t), this.selectable !== "none" && (n.classList.add("dt-list-item--interactive"), n.setAttribute("role", "option"), n.setAttribute("aria-selected", String(this._selectedIndices.has(t))), n.tabIndex = 0), this._selectedIndices.has(t) && n.classList.add("dt-list-item--selected"), this.itemHeight !== null && (n.style.minHeight = `${this.itemHeight}px`), this._renderItem) this._renderItem(e, n, t);
+    else {
+      let i = this._getTemplate();
+      i ? n.appendChild(M(i, Pt(e))) : n.textContent = String(e ?? "");
+    }
+    return n.addEventListener("click", () => this._handleItemClick(t)), n.addEventListener("keydown", (i) => {
+      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this._handleItemClick(t));
+    }), this.itemHeight === null && this._itemResizeObserver?.observe(n), n;
+  }
+  _handleItemClick(t) {
+    let e = this._items[t], n = this.selectable;
+    n === "single" ? (this._selectedIndices = /* @__PURE__ */ new Set([t]), this._emitSelectionChange(), this._render()) : n === "multi" && (this._selectedIndices.has(t) ? this._selectedIndices.delete(t) : this._selectedIndices.add(t), this._emitSelectionChange(), this._render()), this.dispatchEvent(new CustomEvent("dt-item-click", { detail: { item: e, index: t }, bubbles: true, composed: true }));
+  }
+  _emitSelectionChange() {
+    this.dispatchEvent(new CustomEvent("dt-selection-change", { detail: { selected: this.selectedItems }, bubbles: true, composed: true }));
+  }
+  _getTemplate() {
+    for (let t of Array.from(this.children)) if (t instanceof HTMLTemplateElement) return t;
+    return null;
+  }
+};
+var ot = `:host {
+  display: block;
+  min-height: 220px;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+}
+
+.dt-chart {
+  position: relative;
+  display: block;
+  min-height: inherit;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  background:
+    radial-gradient(
+      circle at top left,
+      color-mix(in srgb, var(--dt-accent) 16%, transparent),
+      transparent 42%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--dt-surface) 90%, var(--dt-accent) 10%),
+      var(--dt-surface)
+    );
+}
+
+.dt-chart::before,
+.dt-chart::after {
+  content: '';
+  position: absolute;
+  z-index: 3;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.dt-chart::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-chart::after {
+  right: -1px;
+  bottom: -1px;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-chart__canvas {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.dt-chart__status {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: var(--dt-text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-align: center;
+  text-transform: uppercase;
+  background: color-mix(in srgb, var(--dt-surface) 72%, transparent);
+}
+
+.dt-chart__status[hidden] {
+  display: none;
+}
+`;
+var L = null;
+function at() {
+  return window.__DtChart ? Promise.resolve(window.__DtChart) : L || (L = new Promise((r, t) => {
+    let e = document.createElement("script");
+    e.src = "/api/ui/chart.umd.js", e.async = true, e.dataset.dtChart = "true", e.onload = () => {
+      if (window.__DtChart) {
+        r(window.__DtChart);
+        return;
+      }
+      t(new Error("Chart runtime loaded without a __DtChart export."));
+    }, e.onerror = () => t(new Error("Failed to load the Chart.js runtime bundle.")), document.head.appendChild(e);
+  }), L);
+}
+function v(r, t, e) {
+  return Math.min(e, Math.max(t, r));
+}
+function It(r) {
+  return r ? r.split(",").map((t) => t.trim()).filter(Boolean) : [];
+}
+function X(r) {
+  let t = r.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (t) {
+    let i = t[1], s = i.length === 3 ? i.split("").map((c) => `${c}${c}`).join("") : i, o = parseInt(s.slice(0, 2), 16) / 255, a = parseInt(s.slice(2, 4), 16) / 255, d = parseInt(s.slice(4, 6), 16) / 255;
+    return dt(o, a, d);
+  }
+  let e = r.trim().match(/^rgba?\((\d+(?:\.\d+)?)[,\s]+(\d+(?:\.\d+)?)[,\s]+(\d+(?:\.\d+)?)(?:[,/\s]+[\d.]+)?\)$/i);
+  if (e) return dt(Number(e[1]) / 255, Number(e[2]) / 255, Number(e[3]) / 255);
+  let n = r.trim().match(/^hsla?\(([-\d.]+)(?:deg)?[,\s]+([\d.]+)%[,\s]+([\d.]+)%(?:[,/\s]+[\d.]+)?\)$/i);
+  return n ? { h: (Number(n[1]) % 360 + 360) % 360, s: v(Number(n[2]), 0, 100), l: v(Number(n[3]), 0, 100) } : null;
+}
+function dt(r, t, e) {
+  let n = Math.max(r, t, e), i = Math.min(r, t, e), s = n - i, o = 0, a = (n + i) / 2, d = s === 0 ? 0 : s / (1 - Math.abs(2 * a - 1));
+  if (s !== 0) switch (n) {
+    case r:
+      o = 60 * ((t - e) / s % 6);
+      break;
+    case t:
+      o = 60 * ((e - r) / s + 2);
+      break;
+    default:
+      o = 60 * ((r - t) / s + 4);
+      break;
+  }
+  return { h: (o + 360) % 360, s: Math.round(d * 100), l: Math.round(a * 100) };
+}
+function g(r, t = 1) {
+  return `hsla(${Math.round(r.h)} ${Math.round(r.s)}% ${Math.round(r.l)}% / ${t})`;
+}
+function Nt(r) {
+  let t = X(r) ?? { h: 185, s: 88, l: 56 };
+  return [0, 32, 68, 118, 164, 212, 258, 304].map((n, i) => ({ h: (t.h + n) % 360, s: v(t.s - i * 2, 55, 90), l: v(t.l + (i % 2 === 0 ? 0 : 6) - i, 38, 66) }));
+}
+function H(r) {
+  return !!r && typeof r == "object" && !Array.isArray(r);
+}
+function lt(r, t) {
+  if (!H(r) || !H(t)) return t ?? r;
+  let e = { ...r };
+  for (let [n, i] of Object.entries(t)) {
+    let s = e[n];
+    e[n] = H(s) && H(i) ? lt(s, i) : i;
+  }
+  return e;
+}
+function Ft(r) {
+  return r === "top" || r === "bottom" || r === "left" || r === "right" ? r : "none";
+}
+function Ot(r) {
+  return r === "bar" || r === "line" || r === "area" || r === "pie" || r === "doughnut" || r === "radar" || r === "scatter" || r === "bubble" ? r : "bar";
+}
+function Bt(r) {
+  return r === "bar" || r === "line" || r === "area" || r === "scatter" || r === "bubble";
+}
+function $t(r) {
+  return r.map((t) => t.trim()).filter(Boolean);
+}
+var R = class extends HTMLElement {
+  _canvas;
+  _status;
+  _runtime = null;
+  _loadPromise = null;
+  _chart = null;
+  _renderedType = null;
+  _dataInput = null;
+  _optionsOverride = null;
+  _syncFrame = 0;
+  static get observedAttributes() {
+    return ["type", "legend", "stacked", "labels"];
+  }
+  get type() {
+    return Ot(this.getAttribute("type"));
+  }
+  set type(t) {
+    this.setAttribute("type", t);
+  }
+  get legend() {
+    return Ft(this.getAttribute("legend"));
+  }
+  set legend(t) {
+    this.setAttribute("legend", t);
+  }
+  get stacked() {
+    return this.hasAttribute("stacked");
+  }
+  set stacked(t) {
+    this.toggleAttribute("stacked", t);
+  }
+  get labels() {
+    return $t(It(this.getAttribute("labels")));
+  }
+  set labels(t) {
+    this.setAttribute("labels", t.join(","));
+  }
+  get data() {
+    return this._dataInput;
+  }
+  set data(t) {
+    this._dataInput = t ? structuredClone(t) : null, this._scheduleSync();
+  }
+  get options() {
+    return this._optionsOverride;
+  }
+  set options(t) {
+    this._optionsOverride = t ? structuredClone(t) : null, this._renderChart();
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = ot, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = "dt-chart", this._canvas = document.createElement("canvas"), this._canvas.className = "dt-chart__canvas", this._status = document.createElement("div"), this._status.className = "dt-chart__status", this._status.textContent = "Loading chart", n.append(this._canvas, this._status), t.appendChild(n);
+  }
+  connectedCallback() {
+    this._canvas.addEventListener("click", this._handleCanvasClick), this._ensureRuntime().then(() => this._renderChart()), this._scheduleSync();
+  }
+  disconnectedCallback() {
+    this._canvas.removeEventListener("click", this._handleCanvasClick), this._syncFrame !== 0 && (cancelAnimationFrame(this._syncFrame), this._syncFrame = 0), this._chart?.destroy(), this._chart = null, this._renderedType = null;
+  }
+  attributeChangedCallback() {
+    this._scheduleSync();
+  }
+  _handleCanvasClick = (t) => {
+    if (!this._chart) return;
+    let n = this._chart.getElementsAtEventForMode(t, "nearest", { intersect: true }, true)[0];
+    if (!n) return;
+    let i = Array.isArray(this._chart.data.labels) ? this._chart.data.labels[n.index] ?? null : null, s = this._chart.data.datasets[n.datasetIndex], o = Array.isArray(s?.data) ? s.data[n.index] : void 0;
+    this.dispatchEvent(new CustomEvent("dt-chart-click", { bubbles: true, composed: true, detail: { label: i, datasetIndex: n.datasetIndex, index: n.index, value: o } }));
+  };
+  _scheduleSync() {
+    this._syncFrame === 0 && (this._syncFrame = requestAnimationFrame(() => {
+      this._syncFrame = 0, this._syncFromCurrentSource();
+    }));
+  }
+  _syncFromCurrentSource() {
+    this._renderChart();
+  }
+  async _ensureRuntime() {
+    return this._runtime ? this._runtime : (this._loadPromise || (this._loadPromise = at().then((t) => (this._runtime = t, t))), this._loadPromise);
+  }
+  async _renderChart() {
+    let t = this._dataInput;
+    if (!t) {
+      this._setStatus("Waiting for data");
+      return;
+    }
+    let e = await this._ensureRuntime(), n = this._buildConfig(e, t), i = n.type;
+    !this._chart || this._renderedType !== i ? (this._chart?.destroy(), this._chart = new e.Chart(this._canvas, n), this._renderedType = i) : (this._chart.data = n.data, this._chart.options = n.options, this._chart.update()), this._setStatus(t.datasets.length > 0 ? null : "Waiting for data");
+  }
+  _buildConfig(t, e) {
+    let n = getComputedStyle(this), i = n.getPropertyValue("--dt-accent").trim() || "#42d4ff", s = n.getPropertyValue("--dt-text").trim() || "#d6ebff", o = n.getPropertyValue("--dt-text-muted").trim() || "#7b93a6", a = n.getPropertyValue("--dt-border").trim() || "rgba(123, 147, 166, 0.3)", d = n.getPropertyValue("--font-mono").trim() || "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace", c = Nt(i), l = this.type === "area" ? "line" : this.type, f = { labels: e.labels ?? this.labels, datasets: e.datasets.map((h, gt) => {
+      let F = c[gt % c.length], p = h.color ?? g(F, 1), O = { label: h.label ?? "", data: h.data, backgroundColor: l === "line" || l === "radar" || l === "scatter" ? g(F, l === "scatter" ? 0.95 : 0.24) : p, borderColor: p, pointBackgroundColor: p, pointBorderColor: p, pointHoverBackgroundColor: p, pointRadius: this.type === "line" || this.type === "area" ? 3 : 4, pointHoverRadius: this.type === "line" || this.type === "area" ? 5 : 6, borderWidth: 2, tension: l === "line" || this.type === "area" ? 0.32 : void 0, fill: this.type === "area" };
+      return l === "pie" || l === "doughnut" ? { ...O, backgroundColor: Array.isArray(h.data) ? h.data.map((bt, B) => g(c[B % c.length], 0.86)) : p, borderColor: Array.isArray(h.data) ? h.data.map((bt, B) => g(c[B % c.length], 1)) : p, borderWidth: 1 } : l === "scatter" || l === "bubble" ? { ...O, showLine: false, backgroundColor: g(F, 0.78) } : O;
+    }) }, _ = { responsive: true, maintainAspectRatio: false, animation: { duration: 320 }, interaction: { mode: "nearest", intersect: true }, plugins: { legend: { display: this.legend !== "none", position: this.legend === "none" ? "top" : this.legend, labels: { color: s, boxWidth: 12, boxHeight: 12, padding: 14, font: { family: d, size: 11 } } }, tooltip: { backgroundColor: "rgba(10, 18, 24, 0.92)", borderColor: Xt(a, i, 0.35), borderWidth: 1, titleColor: s, bodyColor: s, footerColor: o, titleFont: { family: d, size: 11 }, bodyFont: { family: d, size: 11 }, padding: 10 } }, scales: Bt(this.type) ? { x: { stacked: this.stacked, grid: { display: false, color: a }, border: { color: a }, ticks: { color: o, font: { family: d, size: 11 } } }, y: { stacked: this.stacked, beginAtZero: true, grid: { display: false, color: a }, border: { color: a }, ticks: { color: o, font: { family: d, size: 11 } } } } : l === "radar" ? { r: { angleLines: { color: a }, grid: { color: a }, pointLabels: { color: o, font: { family: d, size: 11 } }, ticks: { color: o, backdropColor: "transparent", font: { family: d, size: 10 } } } } : void 0 };
+    return { type: l, data: f, options: lt(_, this._optionsOverride ?? {}) };
+  }
+  _setStatus(t) {
+    if (!t) {
+      this._status.hidden = true;
+      return;
+    }
+    this._status.hidden = false, this._status.textContent = t;
+  }
+};
+function Xt(r, t, e) {
+  let n = X(r), i = X(t);
+  if (!n || !i) return r;
+  let s = v(e, 0, 1), o = ((i.h - n.h) % 360 + 540) % 360 - 180;
+  return g({ h: (n.h + o * s + 360) % 360, s: n.s + (i.s - n.s) * s, l: n.l + (i.l - n.l) * s });
+}
+var ct = `:host {
+  display: block;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+}
+
+.dt-markdown {
+  color: inherit;
+  line-height: 1.7;
+  word-break: break-word;
+}
+
+.dt-markdown > :first-child {
+  margin-top: 0;
+}
+
+.dt-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.dt-markdown :is(h1, h2, h3, h4, h5, h6) {
+  margin: 1.2em 0 0.55em;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+  line-height: 1.2;
+}
+
+.dt-markdown h1 {
+  color: var(--dt-accent);
+  font-size: 1.6rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dt-markdown h2 {
+  font-size: 1.3rem;
+}
+
+.dt-markdown h3 {
+  font-size: 1.1rem;
+}
+
+.dt-markdown p,
+.dt-markdown ul,
+.dt-markdown ol,
+.dt-markdown blockquote,
+.dt-markdown pre,
+.dt-markdown table {
+  margin: 0.8em 0;
+}
+
+.dt-markdown ul,
+.dt-markdown ol {
+  padding-left: 1.4rem;
+}
+
+.dt-markdown li + li {
+  margin-top: 0.28em;
+}
+
+.dt-markdown strong {
+  color: var(--dt-text);
+}
+
+.dt-markdown a,
+.dt-markdown .dt-md-link {
+  color: var(--dt-accent);
+  text-decoration: none;
+}
+
+.dt-markdown a:hover,
+.dt-markdown .dt-md-link:hover {
+  text-decoration: underline;
+}
+
+.dt-markdown code {
+  padding: 0.12rem 0.35rem;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  color: var(--dt-accent);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.92em;
+}
+
+.dt-md-pre {
+  overflow-x: auto;
+  padding: 14px 16px;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-surface) 85%, var(--dt-accent) 15%);
+}
+
+.dt-md-pre code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  color: var(--dt-text);
+}
+
+.dt-md-blockquote {
+  margin: 0.9em 0;
+  padding: 0.15rem 0 0.15rem 1rem;
+  border-left: 3px solid var(--dt-accent);
+  color: var(--dt-text-muted);
+}
+
+.dt-md-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--dt-border);
+  background: var(--dt-surface);
+}
+
+.dt-md-table th,
+.dt-md-table td {
+  padding: 0.6rem 0.8rem;
+  border: 1px solid var(--dt-border-subtle, var(--dt-border));
+  text-align: left;
+  vertical-align: top;
+}
+
+.dt-md-table th {
+  color: var(--dt-accent);
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dt-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--dt-border);
+}
+
+.dt-md-image {
+  display: block;
+  max-width: 100%;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+}
+
+.dt-markdown__caret {
+  display: inline-block;
+  margin-left: 0.15rem;
+  color: var(--dt-accent);
+  animation: dt-markdown-caret 0.9s steps(1) infinite;
+}
+
+.dt-markdown__caret[hidden] {
+  display: none;
+}
+
+@keyframes dt-markdown-caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+`;
+var V = null;
+function ht() {
+  return window.__DtMarked ? Promise.resolve(window.__DtMarked) : V || (V = new Promise((r, t) => {
+    let e = document.createElement("script");
+    e.src = "/api/ui/marked.js", e.async = true, e.dataset.dtMarked = "true", e.onload = () => {
+      if (window.__DtMarked) {
+        r(window.__DtMarked);
+        return;
+      }
+      t(new Error("Marked runtime loaded without a __DtMarked export."));
+    }, e.onerror = () => t(new Error("Failed to load the marked runtime bundle.")), document.head.appendChild(e);
+  }), V);
+}
+function ut(r) {
+  return r.replaceAll(`\r
+`, `
+`);
+}
+function Jt(r) {
+  let t = ut(r).split(`
+`);
+  for (; t.length > 0 && t[0].trim() === ""; ) t.shift();
+  for (; t.length > 0 && t[t.length - 1].trim() === ""; ) t.pop();
+  let e = t.filter((i) => i.trim() !== "").map((i) => i.match(/^\s*/)?.[0].length ?? 0), n = e.length > 0 ? Math.min(...e) : 0;
+  return n === 0 ? t.join(`
+`) : t.map((i) => i.slice(n)).join(`
+`);
+}
+function Wt(r) {
+  let t = ut(r);
+  if ((t.match(/(^|\n)(```|~~~)/g) ?? []).length % 2 === 0) return t;
+  let n = t.includes("~~~") && !t.includes("```") ? "~~~" : "```";
+  return `${t}
+${n}`;
+}
+var P = class extends HTMLElement {
+  _body;
+  _caret;
+  _contentOverride = null;
+  _runtime = null;
+  _loadPromise = null;
+  _observer = null;
+  _renderFrame = 0;
+  static get observedAttributes() {
+    return ["streaming", "unsafe-html"];
+  }
+  get content() {
+    return this._contentOverride ?? this._readInlineMarkdown();
+  }
+  set content(t) {
+    this._contentOverride = String(t ?? ""), this._scheduleRender();
+  }
+  get streaming() {
+    return this.hasAttribute("streaming");
+  }
+  set streaming(t) {
+    this.toggleAttribute("streaming", t);
+  }
+  get unsafeHtml() {
+    return this.hasAttribute("unsafe-html");
+  }
+  set unsafeHtml(t) {
+    this.toggleAttribute("unsafe-html", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = ct, t.appendChild(e), this._body = document.createElement("div"), this._body.className = "dt-markdown", this._body.addEventListener("click", this._onLinkClick), this._caret = document.createElement("span"), this._caret.className = "dt-markdown__caret", this._caret.textContent = "\u258C", this._caret.hidden = true, t.append(this._body, this._caret);
+  }
+  connectedCallback() {
+    this._observer || (this._observer = new MutationObserver(() => {
+      this._contentOverride === null && this._scheduleRender();
+    }), this._observer.observe(this, { childList: true, characterData: true, subtree: true })), this._ensureRuntime(), this._scheduleRender();
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect(), this._observer = null, this._renderFrame !== 0 && (cancelAnimationFrame(this._renderFrame), this._renderFrame = 0);
+  }
+  attributeChangedCallback() {
+    this._scheduleRender();
+  }
+  _onLinkClick = (t) => {
+    let n = t.composedPath().find((i) => i instanceof HTMLAnchorElement);
+    n && (t.preventDefault(), this.dispatchEvent(new CustomEvent("dt-link-click", { bubbles: true, composed: true, detail: { href: n.getAttribute("href") ?? "#" } })));
+  };
+  _readInlineMarkdown() {
+    return Jt(this.textContent ?? "");
+  }
+  _scheduleRender() {
+    this._renderFrame === 0 && (this._renderFrame = requestAnimationFrame(() => {
+      this._renderFrame = 0, this._render();
+    }));
+  }
+  async _ensureRuntime() {
+    return this._runtime ? this._runtime : (this._loadPromise || (this._loadPromise = ht().then((t) => (this._runtime = t, t))), this._loadPromise);
+  }
+  async _render() {
+    let t = await this._ensureRuntime(), e = this.content;
+    this.streaming && (e = Wt(e)), this._body.innerHTML = t.render(e, { unsafeHtml: this.unsafeHtml }), this._caret.hidden = !this.streaming;
+  }
+};
+var pt = `:host {
+  display: block;
+  min-height: 240px;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+}
+
+.dt-markdown-editor {
+  position: relative;
+  height: 100%;
+  min-height: inherit;
+  overflow: hidden;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+}
+
+.dt-markdown-editor::before,
+.dt-markdown-editor::after {
+  content: '';
+  position: absolute;
+  z-index: 3;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.dt-markdown-editor::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-markdown-editor::after {
+  right: -1px;
+  bottom: -1px;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-markdown-editor__surface {
+  height: 100%;
+  min-height: inherit;
+}
+
+.dt-markdown-editor__content {
+  height: 100%;
+  min-height: inherit;
+}
+
+.dt-markdown-editor__status {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: color-mix(in srgb, var(--dt-surface) 84%, transparent);
+  color: var(--dt-text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dt-markdown-editor__status[hidden] {
+  display: none;
+}
+
+.milkdown {
+  --crepe-color-background: transparent;
+  --crepe-color-on-background: var(--dt-text);
+  --crepe-color-surface: var(--dt-surface);
+  --crepe-color-surface-low: color-mix(in srgb, var(--dt-surface) 94%, var(--dt-accent) 6%);
+  --crepe-color-on-surface: var(--dt-text);
+  --crepe-color-on-surface-variant: var(--dt-text-muted);
+  --crepe-color-outline: var(--dt-border);
+  --crepe-color-primary: var(--dt-accent);
+  --crepe-color-secondary: color-mix(in srgb, var(--dt-surface) 84%, var(--dt-accent) 16%);
+  --crepe-color-on-secondary: var(--dt-text);
+  --crepe-color-inverse: var(--dt-text);
+  --crepe-color-on-inverse: var(--dt-surface);
+  --crepe-color-inline-code: var(--dt-accent);
+  --crepe-color-error: var(--dt-danger, #ff6a6a);
+  --crepe-color-hover: var(--dt-surface-hover);
+  --crepe-color-selected: color-mix(in srgb, var(--dt-surface) 82%, var(--dt-accent) 18%);
+  --crepe-color-inline-area: color-mix(in srgb, var(--dt-surface) 90%, var(--dt-accent) 10%);
+  --crepe-font-title: var(--font-sans, 'Inter', sans-serif);
+  --crepe-font-default: var(--font-sans, 'Inter', sans-serif);
+  --crepe-font-code: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  --crepe-shadow-1: 0 0 0 1px color-mix(in srgb, var(--dt-surface) 82%, var(--dt-accent) 18%);
+  --crepe-shadow-2:
+    0 0 0 1px color-mix(in srgb, var(--dt-surface) 78%, var(--dt-accent) 22%),
+    0 8px 24px color-mix(in srgb, var(--dt-accent) 12%, transparent);
+
+  height: 100%;
+  background: transparent;
+  color: var(--dt-text);
+}
+
+.milkdown .editor {
+  min-height: 100%;
+  padding: 16px 18px 20px;
+  outline: none;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.milkdown .editor > :first-child {
+  margin-top: 0;
+}
+
+.milkdown .editor h1,
+.milkdown .editor h2,
+.milkdown .editor h3,
+.milkdown .editor h4,
+.milkdown .editor h5,
+.milkdown .editor h6 {
+  margin: 0.95em 0 0.45em;
+  line-height: 1.2;
+}
+
+.milkdown .editor h1 {
+  color: var(--dt-accent);
+  font-size: 1.6rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.milkdown .editor h2 {
+  font-size: 1.28rem;
+}
+
+.milkdown .editor h3 {
+  font-size: 1.08rem;
+}
+
+.milkdown .editor p {
+  margin: 0.65em 0;
+}
+
+.milkdown .editor code {
+  padding: 2px 5px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.9em;
+}
+
+.milkdown .editor pre {
+  overflow-x: auto;
+  margin: 0.9em 0;
+  padding: 12px 14px;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  background: var(--dt-surface);
+}
+
+.milkdown .editor pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.milkdown .editor blockquote {
+  margin: 0.9em 0;
+  padding-left: 12px;
+  border-left: 3px solid var(--dt-accent);
+  color: var(--dt-text-muted);
+}
+
+.milkdown .editor a {
+  color: var(--dt-accent);
+  text-decoration: none;
+}
+
+.milkdown .editor a:hover {
+  text-decoration: underline;
+}
+
+.milkdown .editor hr {
+  border: 0;
+  border-top: 1px solid var(--dt-border);
+}
+
+.milkdown .editor ul,
+.milkdown .editor ol {
+  padding-left: 1.5rem;
+}
+
+.milkdown .editor img {
+  max-width: 100%;
+  border-radius: 2px;
+}
+
+.milkdown .editor table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.milkdown .editor th,
+.milkdown .editor td {
+  border: 1px solid var(--dt-border);
+}
+`;
+var I = null;
+function mt() {
+  return window.__DtMilkdown ? Promise.resolve(window.__DtMilkdown) : I || (I = new Promise((r, t) => {
+    let e = document.createElement("script");
+    e.src = "/api/ui/milkdown.umd.js", e.async = true, e.dataset.dtMilkdown = "true", e.onload = () => {
+      if (window.__DtMilkdown) {
+        r(window.__DtMilkdown);
+        return;
+      }
+      t(new Error("Milkdown runtime loaded without a __DtMilkdown export."));
+    }, e.onerror = () => t(new Error("Failed to load the Milkdown runtime bundle.")), document.head.appendChild(e);
+  }), I);
+}
+var N = class extends HTMLElement {
+  _runtimeStyle;
+  _surface;
+  _content;
+  _status;
+  _runtime = null;
+  _loadPromise = null;
+  _editor = null;
+  _pendingValue = "";
+  _changeTimer = null;
+  _setupToken = 0;
+  _suppressNextChange = false;
+  static get observedAttributes() {
+    return ["placeholder", "readonly"];
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") ?? "";
+  }
+  set placeholder(t) {
+    this.setAttribute("placeholder", t);
+  }
+  get readonly() {
+    return this.hasAttribute("readonly");
+  }
+  set readonly(t) {
+    this.toggleAttribute("readonly", t);
+  }
+  get value() {
+    return this._editor && (this._pendingValue = this._editor.getMarkdown()), this._pendingValue;
+  }
+  set value(t) {
+    let e = String(t ?? "");
+    this._pendingValue = e, this._editor && this._runtime && this._editor.getMarkdown() !== e && (this._suppressNextChange = true, this._editor.editor.action(this._runtime.replaceAll(e)));
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = pt, t.appendChild(e), this._runtimeStyle = document.createElement("style"), t.appendChild(this._runtimeStyle), this._surface = document.createElement("div"), this._surface.className = "dt-markdown-editor", this._content = document.createElement("div"), this._content.className = "dt-markdown-editor__surface";
+    let n = document.createElement("div");
+    n.className = "dt-markdown-editor__content", this._content.appendChild(n), this._status = document.createElement("div"), this._status.className = "dt-markdown-editor__status", this._status.textContent = "Loading editor", this._surface.append(this._content, this._status), t.appendChild(this._surface);
+  }
+  connectedCallback() {
+    this._initializeEditor();
+  }
+  disconnectedCallback() {
+    this._setupToken += 1, this._clearChangeTimer(), this._destroyEditor();
+  }
+  attributeChangedCallback(t) {
+    if (t === "readonly") {
+      this._editor?.setReadonly(this.readonly);
+      return;
+    }
+    t === "placeholder" && this.isConnected && this._initializeEditor(true);
+  }
+  async _ensureRuntime() {
+    return this._runtime ? this._runtime : (this._loadPromise || (this._loadPromise = mt().then((t) => (this._runtime = t, this._runtimeStyle.textContent = t.cssText, t))), this._loadPromise);
+  }
+  async _initializeEditor(t = false) {
+    let e = ++this._setupToken;
+    if (this._setStatus("Loading editor"), t) await this._destroyEditor();
+    else if (this._editor) {
+      this._setStatus(null);
+      return;
+    }
+    try {
+      let n = await this._ensureRuntime();
+      if (!this.isConnected || e !== this._setupToken) return;
+      this._content.replaceChildren();
+      let i = document.createElement("div");
+      i.className = "dt-markdown-editor__content", this._content.appendChild(i);
+      let s = new n.Crepe({ root: i, defaultValue: this._pendingValue, features: { [n.Crepe.Feature.CodeMirror]: false, [n.Crepe.Feature.ImageBlock]: false, [n.Crepe.Feature.Latex]: false }, featureConfigs: { [n.Crepe.Feature.Placeholder]: { text: this.placeholder, mode: "doc" } } });
+      if (s.on((o) => {
+        o.markdownUpdated((a, d) => {
+          if (this._pendingValue = d, this._suppressNextChange) {
+            this._suppressNextChange = false;
+            return;
+          }
+          this._queueChange(d);
+        }), o.focus(() => {
+          this.dispatchEvent(new CustomEvent("dt-focus", { bubbles: true, composed: true }));
+        }), o.blur(() => {
+          this.dispatchEvent(new CustomEvent("dt-blur", { bubbles: true, composed: true }));
+        });
+      }), await s.create(), !this.isConnected || e !== this._setupToken) {
+        await s.destroy();
+        return;
+      }
+      this._editor = s, this._editor.setReadonly(this.readonly), this._pendingValue = this._editor.getMarkdown(), this._setStatus(null);
+    } catch {
+      e === this._setupToken && this._setStatus("Failed to load editor");
+    }
+  }
+  async _destroyEditor() {
+    let t = this._editor;
+    if (this._editor = null, !!t) try {
+      await t.destroy();
+    } catch {
+    }
+  }
+  _queueChange(t) {
+    this._clearChangeTimer(), this._changeTimer = setTimeout(() => {
+      this._changeTimer = null, this.dispatchEvent(new CustomEvent("dt-change", { bubbles: true, composed: true, detail: { value: t } }));
+    }, 300);
+  }
+  _clearChangeTimer() {
+    this._changeTimer && (clearTimeout(this._changeTimer), this._changeTimer = null);
+  }
+  _setStatus(t) {
+    if (t) {
+      this._status.hidden = false, this._status.textContent = t;
+      return;
+    }
+    this._status.hidden = true;
+  }
+};
+customElements.get("dt-tooltip") || customElements.define("dt-tooltip", x);
+customElements.get("dt-card") || customElements.define("dt-card", w);
+customElements.get("dt-select") || customElements.define("dt-select", y);
+customElements.get("dt-grid") || customElements.define("dt-grid", k);
+customElements.get("dt-stack") || customElements.define("dt-stack", C);
+customElements.get("dt-stat") || customElements.define("dt-stat", E);
+customElements.get("dt-badge") || customElements.define("dt-badge", S);
+customElements.get("dt-button") || customElements.define("dt-button", D);
+customElements.get("dt-divider") || customElements.define("dt-divider", A);
+customElements.get("dt-list-view") || customElements.define("dt-list-view", z);
+customElements.get("dt-table-view") || customElements.define("dt-table-view", T);
+customElements.get("dt-column") || customElements.define("dt-column", b);
+customElements.get("dt-chart") || customElements.define("dt-chart", R);
+customElements.get("dt-markdown") || customElements.define("dt-markdown", P);
+customElements.get("dt-markdown-editor") || customElements.define("dt-markdown-editor", N);
+
+// src/styles/PreferenceApp.module.css
+var PreferenceApp_default = {
+  root: "PreferenceApp_root",
+  rootCompact: "PreferenceApp_rootCompact",
+  sidebar: "PreferenceApp_sidebar",
+  sidebarHeader: "PreferenceApp_sidebarHeader",
+  categoryItem: "PreferenceApp_categoryItem",
+  categoryItemActive: "PreferenceApp_categoryItem PreferenceApp_categoryItemActive",
+  categoryIcon: "PreferenceApp_categoryIcon",
+  categoryText: "PreferenceApp_categoryText",
+  settingsPanel: "PreferenceApp_settingsPanel",
+  section: "PreferenceApp_section",
+  sectionTitle: "PreferenceApp_sectionTitle",
+  row: "PreferenceApp_row",
+  rowInfo: "PreferenceApp_rowInfo",
+  rowLabel: "PreferenceApp_rowLabel",
+  rowDescription: "PreferenceApp_rowDescription",
+  rowRestartBadge: "PreferenceApp_rowRestartBadge",
+  rowControl: "PreferenceApp_rowControl",
+  providerGroup: "PreferenceApp_providerGroup",
+  providerGroupHeader: "PreferenceApp_providerGroupHeader",
+  providerList: "PreferenceApp_providerList",
+  providerCard: "PreferenceApp_providerCard",
+  providerCardBody: "PreferenceApp_providerCardBody",
+  providerCardHeader: "PreferenceApp_providerCardHeader",
+  providerCardTitleRow: "PreferenceApp_providerCardTitleRow",
+  providerCardTitle: "PreferenceApp_providerCardTitle",
+  providerDefaultBadge: "PreferenceApp_providerDefaultBadge",
+  providerCardActions: "PreferenceApp_providerCardActions",
+  providerActionButtonWrap: "PreferenceApp_providerActionButtonWrap",
+  providerButtonWrap: "PreferenceApp_providerButtonWrap",
+  providerFieldGrid: "PreferenceApp_providerFieldGrid",
+  providerField: "PreferenceApp_providerField",
+  providerFieldLabel: "PreferenceApp_providerFieldLabel",
+  providerSelectWrap: "PreferenceApp_providerSelectWrap",
+  selectWrap: "PreferenceApp_selectWrap",
+  textInput: "PreferenceApp_textInput",
+  numberInput: "PreferenceApp_numberInput",
+  dropdown: "PreferenceApp_dropdown",
+  textInputSensitive: "PreferenceApp_textInput PreferenceApp_textInputSensitive",
+  colorControl: "PreferenceApp_colorControl",
+  colorInput: "PreferenceApp_colorInput",
+  toggle: "PreferenceApp_toggle",
+  toggleInput: "PreferenceApp_toggleInput",
+  toggleTrack: "PreferenceApp_toggleTrack",
+  toggleKnob: "PreferenceApp_toggleKnob",
+  notification: "PreferenceApp_notification",
+  slideUp: "PreferenceApp_slideUp"
+};
+
+// desktalk-global:react/jsx-runtime
+var _mod3 = window.__desktalk_jsx_runtime;
+var jsx = _mod3.jsx;
+var jsxs = _mod3.jsxs;
+var jsxDEV = _mod3.jsxDEV;
+var Fragment2 = _mod3.Fragment;
+
+// src/components/PreferenceCategoryList.tsx
+var CATEGORY_ICONS = {
+  General: "\u2699",
+  Server: "\u{1F310}",
+  AI: "\u{1F916}",
+  Voice: "\u{1F399}"
+};
+function PreferenceCategoryList({
+  activeCategory,
+  onSelect,
+  compact = false
+}) {
+  return /* @__PURE__ */ jsxs("nav", { className: PreferenceApp_default.sidebar, children: [
+    /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.sidebarHeader, children: "Settings" }),
+    CATEGORIES.map((category) => {
+      const button = /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: category === activeCategory ? PreferenceApp_default.categoryItemActive : PreferenceApp_default.categoryItem,
+          onClick: () => onSelect(category),
+          type: "button",
+          "aria-label": compact ? category : void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: PreferenceApp_default.categoryIcon, children: CATEGORY_ICONS[category] }),
+            !compact && /* @__PURE__ */ jsx("span", { className: PreferenceApp_default.categoryText, children: category })
+          ]
+        },
+        category
+      );
+      if (compact) {
+        return /* @__PURE__ */ jsx("dt-tooltip", { content: category, placement: "bottom", children: button }, category);
+      }
+      return button;
+    })
+  ] });
+}
+
+// src/components/AiProviderList.tsx
+function AiProviderList({ config, onChange }) {
+  const enabledProviders = useMemo(() => {
+    const providers = parseAiEnabledProviders(config["ai.enabledProviders"]);
+    const defaultProvider = typeof config["ai.defaultProvider"] === "string" && config["ai.defaultProvider"] ? String(config["ai.defaultProvider"]) : DEFAULT_AI_PROVIDER_ID;
+    if (!providers.includes(defaultProvider)) {
+      providers.unshift(defaultProvider);
+    }
+    return providers;
+  }, [config]);
+  const updateOrder = useCallback(
+    async (providerIds) => {
+      const nextProviders = providerIds.length > 0 ? providerIds : [DEFAULT_AI_PROVIDER_ID];
+      await onChange("ai.enabledProviders", serializeAiEnabledProviders(nextProviders));
+      await onChange("ai.defaultProvider", nextProviders[0]);
+    },
+    [onChange]
+  );
+  const handleAddProvider = useCallback(async () => {
+    const nextProvider = AI_PROVIDER_DEFINITIONS.find(
+      (provider) => !enabledProviders.includes(provider.id)
+    );
+    if (!nextProvider) {
+      return;
+    }
+    await updateOrder([...enabledProviders, nextProvider.id]);
+  }, [enabledProviders, updateOrder]);
+  const handleProviderChange = useCallback(
+    async (providerId, nextProviderId) => {
+      if (providerId === nextProviderId || enabledProviders.includes(nextProviderId)) {
+        return;
+      }
+      const nextProviders = enabledProviders.map(
+        (currentProviderId) => currentProviderId === providerId ? nextProviderId : currentProviderId
+      );
+      await updateOrder(nextProviders);
+    },
+    [enabledProviders, updateOrder]
+  );
+  const handleDeleteProvider = useCallback(
+    async (providerId) => {
+      if (enabledProviders.length === 1) {
+        return;
+      }
+      const nextProviders = enabledProviders.filter(
+        (currentProviderId) => currentProviderId !== providerId
+      );
+      await updateOrder(nextProviders);
+      for (const key of getAiProviderConfigKeys(providerId)) {
+        await onChange(key, "");
+      }
+    },
+    [enabledProviders, onChange, updateOrder]
+  );
+  const handleSetDefault = useCallback(
+    async (providerId) => {
+      if (enabledProviders[0] === providerId) {
+        return;
+      }
+      const nextProviders = [
+        providerId,
+        ...enabledProviders.filter((currentProviderId) => currentProviderId !== providerId)
+      ];
+      await updateOrder(nextProviders);
+    },
+    [enabledProviders, updateOrder]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerGroup, children: [
+    /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerGroupHeader, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.rowLabel, children: "Providers" }),
+        /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.rowDescription, children: "Add providers, keep your default at the top, and remove anything you no longer use." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerActionButtonWrap, children: /* @__PURE__ */ jsx(
+        ProviderButton,
+        {
+          onPress: handleAddProvider,
+          disabled: enabledProviders.length >= AI_PROVIDER_DEFINITIONS.length,
+          variant: "secondary",
+          children: "Add provider"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerList, children: enabledProviders.map((providerId, index) => {
+      const definition = getAiProviderDefinition(providerId);
+      if (!definition) {
+        return null;
+      }
+      const availableOptions = AI_PROVIDER_DEFINITIONS.filter(
+        (provider) => provider.id === providerId || !enabledProviders.includes(provider.id)
+      );
+      return /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerCard, children: /* @__PURE__ */ jsx("dt-card", { variant: "outlined", children: /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardBody, children: [
+        /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardHeader, children: [
+          /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardTitleRow, children: [
+            /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerCardTitle, children: definition.label }),
+            index === 0 && /* @__PURE__ */ jsx("span", { className: PreferenceApp_default.providerDefaultBadge, children: "Default" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardActions, children: [
+            /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerButtonWrap, children: /* @__PURE__ */ jsx(
+              ProviderButton,
+              {
+                onPress: () => handleSetDefault(providerId),
+                disabled: index === 0,
+                variant: "secondary",
+                size: "sm",
+                children: "Set as default"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerButtonWrap, children: /* @__PURE__ */ jsx(
+              ProviderButton,
+              {
+                onPress: () => handleDeleteProvider(providerId),
+                disabled: enabledProviders.length === 1,
+                variant: "danger",
+                size: "sm",
+                children: "Delete"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerFieldGrid, children: [
+          /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerField, children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                className: PreferenceApp_default.providerFieldLabel,
+                htmlFor: `ai-provider-${providerId}`,
+                children: "Provider"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ProviderSelect,
+              {
+                value: providerId,
+                options: availableOptions.map((provider) => ({
+                  value: provider.id,
+                  label: provider.label
+                })),
+                onChange: (nextValue) => handleProviderChange(providerId, nextValue)
+              }
+            )
+          ] }),
+          definition.supportsApiKey && /* @__PURE__ */ jsx(
+            ProviderTextField,
+            {
+              id: `ai-provider-key-${providerId}`,
+              label: "API Key",
+              value: String(config[`ai.providers.${providerId}.apiKey`] ?? ""),
+              sensitive: true,
+              onCommit: (value) => onChange(`ai.providers.${providerId}.apiKey`, value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProviderTextField,
+            {
+              id: `ai-provider-model-${providerId}`,
+              label: "Model",
+              value: String(config[`ai.providers.${providerId}.model`] ?? ""),
+              onCommit: (value) => onChange(`ai.providers.${providerId}.model`, value)
+            }
+          ),
+          definition.supportsBaseUrl && /* @__PURE__ */ jsx(
+            ProviderTextField,
+            {
+              id: `ai-provider-base-url-${providerId}`,
+              label: "Base URL",
+              value: String(config[`ai.providers.${providerId}.baseUrl`] ?? ""),
+              onCommit: (value) => onChange(`ai.providers.${providerId}.baseUrl`, value)
+            }
+          )
+        ] })
+      ] }) }) }, providerId);
+    }) })
+  ] });
+}
+function ProviderButton({
+  children,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  onPress
+}) {
+  const [buttonElement, setButtonElement] = useState(null);
+  useEffect(() => {
+    if (!buttonElement) {
+      return;
+    }
+    const handleClick = () => {
+      void onPress();
+    };
+    buttonElement.addEventListener("click", handleClick);
+    return () => buttonElement.removeEventListener("click", handleClick);
+  }, [buttonElement, onPress]);
+  return /* @__PURE__ */ jsx(
+    "dt-button",
+    {
+      ref: (element) => setButtonElement(element),
+      disabled,
+      variant,
+      size,
+      children
+    }
+  );
+}
+function ProviderSelect({ value, options, disabled = false, onChange }) {
+  const [selectElement, setSelectElement] = useState(null);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    selectElement.options = options;
+  }, [options, selectElement]);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    selectElement.value = value;
+  }, [selectElement, value]);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    selectElement.disabled = disabled;
+  }, [disabled, selectElement]);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    const handleChange = (event) => {
+      void onChange(event.detail.value);
+    };
+    selectElement.addEventListener("dt-change", handleChange);
+    return () => selectElement.removeEventListener("dt-change", handleChange);
+  }, [onChange, selectElement]);
+  return /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerSelectWrap, children: /* @__PURE__ */ jsx("dt-select", { ref: (element) => setSelectElement(element) }) });
+}
+function ProviderTextField({
+  id,
+  label,
+  value,
+  sensitive = false,
+  onCommit
+}) {
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const commit = useCallback(() => {
+    if (localValue !== value) {
+      void onCommit(localValue);
+    }
+  }, [localValue, onCommit, value]);
+  return /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerField, children: [
+    /* @__PURE__ */ jsx("label", { className: PreferenceApp_default.providerFieldLabel, htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: sensitive ? "password" : "text",
+        className: sensitive ? PreferenceApp_default.textInputSensitive : PreferenceApp_default.textInput,
+        value: localValue,
+        onChange: (event) => setLocalValue(event.target.value),
+        onBlur: commit,
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            commit();
+          }
+        }
+      }
+    )
+  ] });
+}
+
+// src/components/VoiceProviderList.tsx
+function VoiceProviderList({ config, onChange }) {
+  const enabledProviders = useMemo(() => {
+    const providers = parseVoiceEnabledProviders(config["voice.enabledProviders"]);
+    const defaultProvider = typeof config["voice.defaultProvider"] === "string" && config["voice.defaultProvider"] ? String(config["voice.defaultProvider"]) : DEFAULT_VOICE_PROVIDER_ID;
+    if (!providers.includes(defaultProvider)) {
+      providers.unshift(defaultProvider);
+    }
+    return providers;
+  }, [config]);
+  const updateOrder = useCallback(
+    async (providerIds) => {
+      const nextProviders = providerIds.length > 0 ? providerIds : [DEFAULT_VOICE_PROVIDER_ID];
+      await onChange("voice.enabledProviders", serializeVoiceEnabledProviders(nextProviders));
+      await onChange("voice.defaultProvider", nextProviders[0]);
+    },
+    [onChange]
+  );
+  const handleAddProvider = useCallback(async () => {
+    const nextProvider = VOICE_PROVIDER_DEFINITIONS.find(
+      (provider) => !enabledProviders.includes(provider.id)
+    );
+    if (!nextProvider) {
+      return;
+    }
+    await updateOrder([...enabledProviders, nextProvider.id]);
+  }, [enabledProviders, updateOrder]);
+  const handleProviderChange = useCallback(
+    async (providerId, nextProviderId) => {
+      if (providerId === nextProviderId || enabledProviders.includes(nextProviderId)) {
+        return;
+      }
+      const nextProviders = enabledProviders.map(
+        (currentProviderId) => currentProviderId === providerId ? nextProviderId : currentProviderId
+      );
+      await updateOrder(nextProviders);
+    },
+    [enabledProviders, updateOrder]
+  );
+  const handleDeleteProvider = useCallback(
+    async (providerId) => {
+      if (enabledProviders.length === 1) {
+        return;
+      }
+      const nextProviders = enabledProviders.filter(
+        (currentProviderId) => currentProviderId !== providerId
+      );
+      await updateOrder(nextProviders);
+      for (const key of getVoiceProviderConfigKeys(providerId)) {
+        await onChange(key, "");
+      }
+    },
+    [enabledProviders, onChange, updateOrder]
+  );
+  const handleSetDefault = useCallback(
+    async (providerId) => {
+      if (enabledProviders[0] === providerId) {
+        return;
+      }
+      const nextProviders = [
+        providerId,
+        ...enabledProviders.filter((currentProviderId) => currentProviderId !== providerId)
+      ];
+      await updateOrder(nextProviders);
+    },
+    [enabledProviders, updateOrder]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerGroup, children: [
+    /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerGroupHeader, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.rowLabel, children: "Providers" }),
+        /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.rowDescription, children: "Add STT providers, keep your default at the top, and remove unused items." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerActionButtonWrap, children: /* @__PURE__ */ jsx(
+        ProviderButton2,
+        {
+          onPress: handleAddProvider,
+          disabled: enabledProviders.length >= VOICE_PROVIDER_DEFINITIONS.length,
+          variant: "secondary",
+          children: "Add provider"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerList, children: enabledProviders.map((providerId, index) => {
+      const definition = getVoiceProviderDefinition(providerId);
+      if (!definition) {
+        return null;
+      }
+      const availableOptions = VOICE_PROVIDER_DEFINITIONS.filter(
+        (provider) => provider.id === providerId || !enabledProviders.includes(provider.id)
+      );
+      return /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerCard, children: /* @__PURE__ */ jsx("dt-card", { variant: "outlined", children: /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardBody, children: [
+        /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardHeader, children: [
+          /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardTitleRow, children: [
+            /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerCardTitle, children: definition.label }),
+            index === 0 && /* @__PURE__ */ jsx("span", { className: PreferenceApp_default.providerDefaultBadge, children: "Default" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerCardActions, children: [
+            /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerButtonWrap, children: /* @__PURE__ */ jsx(
+              ProviderButton2,
+              {
+                onPress: () => handleSetDefault(providerId),
+                disabled: index === 0,
+                variant: "secondary",
+                size: "sm",
+                children: "Set as default"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerButtonWrap, children: /* @__PURE__ */ jsx(
+              ProviderButton2,
+              {
+                onPress: () => handleDeleteProvider(providerId),
+                disabled: enabledProviders.length === 1,
+                variant: "danger",
+                size: "sm",
+                children: "Delete"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerFieldGrid, children: [
+          /* @__PURE__ */ jsx(
+            ProviderSelectField,
+            {
+              label: "Provider",
+              value: providerId,
+              options: availableOptions.map((provider) => ({
+                value: provider.id,
+                label: provider.label
+              })),
+              onChange: (nextValue) => handleProviderChange(providerId, nextValue)
+            }
+          ),
+          definition.supportsApiKey && /* @__PURE__ */ jsx(
+            ProviderTextField2,
+            {
+              id: `voice-provider-key-${providerId}`,
+              label: "API Key",
+              value: String(config[`voice.providers.${providerId}.apiKey`] ?? ""),
+              sensitive: true,
+              onCommit: (value) => onChange(`voice.providers.${providerId}.apiKey`, value)
+            }
+          ),
+          definition.supportsModel && /* @__PURE__ */ jsx(
+            ProviderTextField2,
+            {
+              id: `voice-provider-model-${providerId}`,
+              label: "Model",
+              value: String(config[`voice.providers.${providerId}.model`] ?? ""),
+              onCommit: (value) => onChange(`voice.providers.${providerId}.model`, value)
+            }
+          ),
+          definition.supportsBaseUrl && /* @__PURE__ */ jsx(
+            ProviderTextField2,
+            {
+              id: `voice-provider-base-url-${providerId}`,
+              label: "Base URL",
+              value: String(config[`voice.providers.${providerId}.baseUrl`] ?? ""),
+              onCommit: (value) => onChange(`voice.providers.${providerId}.baseUrl`, value)
+            }
+          ),
+          definition.supportsAzureDeployment && /* @__PURE__ */ jsx(
+            ProviderTextField2,
+            {
+              id: `voice-provider-deployment-${providerId}`,
+              label: "Azure Deployment",
+              value: String(
+                config[`voice.providers.${providerId}.azureDeployment`] ?? ""
+              ),
+              onCommit: (value) => onChange(`voice.providers.${providerId}.azureDeployment`, value)
+            }
+          ),
+          definition.supportsAzureApiVersion && /* @__PURE__ */ jsx(
+            ProviderTextField2,
+            {
+              id: `voice-provider-api-version-${providerId}`,
+              label: "Azure API Version",
+              value: String(
+                config[`voice.providers.${providerId}.azureApiVersion`] ?? ""
+              ),
+              onCommit: (value) => onChange(`voice.providers.${providerId}.azureApiVersion`, value)
+            }
+          )
+        ] })
+      ] }) }) }, providerId);
+    }) })
+  ] });
+}
+function ProviderButton2({
+  children,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  onPress
+}) {
+  const [buttonElement, setButtonElement] = useState(null);
+  useEffect(() => {
+    if (!buttonElement) {
+      return;
+    }
+    const handleClick = () => {
+      void onPress();
+    };
+    buttonElement.addEventListener("click", handleClick);
+    return () => buttonElement.removeEventListener("click", handleClick);
+  }, [buttonElement, onPress]);
+  return /* @__PURE__ */ jsx(
+    "dt-button",
+    {
+      ref: (element) => setButtonElement(element),
+      disabled,
+      variant,
+      size,
+      children
+    }
+  );
+}
+function ProviderSelectField({
+  label,
+  value,
+  options,
+  onChange
+}) {
+  const [selectElement, setSelectElement] = useState(null);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    selectElement.options = options;
+  }, [options, selectElement]);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    selectElement.value = value;
+  }, [selectElement, value]);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    const handleChange = (event) => {
+      void onChange(event.detail.value);
+    };
+    selectElement.addEventListener("dt-change", handleChange);
+    return () => selectElement.removeEventListener("dt-change", handleChange);
+  }, [onChange, selectElement]);
+  return /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerField, children: [
+    /* @__PURE__ */ jsx("label", { className: PreferenceApp_default.providerFieldLabel, children: label }),
+    /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.providerSelectWrap, children: /* @__PURE__ */ jsx("dt-select", { ref: (element) => setSelectElement(element) }) })
+  ] });
+}
+function ProviderTextField2({
+  id,
+  label,
+  value,
+  sensitive = false,
+  onCommit
+}) {
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const commit = useCallback(() => {
+    if (localValue !== value) {
+      void onCommit(localValue);
+    }
+  }, [localValue, onCommit, value]);
+  return /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.providerField, children: [
+    /* @__PURE__ */ jsx("label", { className: PreferenceApp_default.providerFieldLabel, htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: sensitive ? "password" : "text",
+        className: sensitive ? PreferenceApp_default.textInputSensitive : PreferenceApp_default.textInput,
+        value: localValue,
+        onChange: (event) => setLocalValue(event.target.value),
+        onBlur: commit,
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            commit();
+          }
+        }
+      }
+    )
+  ] });
+}
+
+// src/components/PreferenceSection.tsx
+function PreferenceSection({ title, children }) {
+  return /* @__PURE__ */ jsxs("section", { className: PreferenceApp_default.section, children: [
+    /* @__PURE__ */ jsx("h3", { className: PreferenceApp_default.sectionTitle, children: title }),
+    children
+  ] });
+}
+
+// src/components/PreferenceRow.tsx
+function PreferenceRow({ schema, value, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.row, children: [
+    /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.rowInfo, children: [
+      /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.rowLabel, children: [
+        schema.label,
+        schema.requiresRestart && /* @__PURE__ */ jsx("span", { className: PreferenceApp_default.rowRestartBadge, children: "restart" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.rowDescription, children: schema.description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.rowControl, children: /* @__PURE__ */ jsx(Control, { schema, value, onChange }) })
+  ] });
+}
+function Control({
+  schema,
+  value,
+  onChange
+}) {
+  if (schema.key === "general.accentColor" && schema.type === "string") {
+    return /* @__PURE__ */ jsx(ColorControl, { schema, value, onChange });
+  }
+  if (schema.type === "boolean") {
+    return /* @__PURE__ */ jsx(ToggleControl, { schema, value, onChange });
+  }
+  if (schema.type === "string" && schema.options) {
+    return /* @__PURE__ */ jsx(DropdownControl, { schema, value, onChange });
+  }
+  if (schema.type === "string") {
+    return /* @__PURE__ */ jsx(TextControl, { schema, value, onChange });
+  }
+  if (schema.type === "number") {
+    return /* @__PURE__ */ jsx(NumberControl, { schema, value, onChange });
+  }
+  return null;
+}
+function isHexColor(value) {
+  return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
+function ColorControl({
+  schema,
+  value,
+  onChange
+}) {
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const commit = useCallback(
+    (nextValue) => {
+      const resolvedValue = (nextValue ?? localValue).trim();
+      if (resolvedValue !== value) {
+        onChange(schema.key, resolvedValue);
+      }
+    },
+    [localValue, onChange, schema.key, value]
+  );
+  const handlePickerInput = useCallback((e) => {
+    setLocalValue(e.currentTarget.value);
+  }, []);
+  const handlePickerChange = useCallback(
+    (e) => {
+      const nextValue = e.target.value;
+      setLocalValue(nextValue);
+      commit(nextValue);
+    },
+    [commit]
+  );
+  const handleTextChange = useCallback((e) => {
+    setLocalValue(e.target.value);
+  }, []);
+  const handleTextKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        commit();
+      }
+    },
+    [commit]
+  );
+  const handleTextBlur = useCallback(() => {
+    commit();
+  }, [commit]);
+  const pickerValue = isHexColor(localValue) ? localValue : "#7c6ff7";
+  return /* @__PURE__ */ jsxs("div", { className: PreferenceApp_default.colorControl, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        className: PreferenceApp_default.colorInput,
+        value: pickerValue,
+        onInput: handlePickerInput,
+        onChange: handlePickerChange,
+        "aria-label": `${schema.label} picker`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: PreferenceApp_default.textInput,
+        value: localValue,
+        onChange: handleTextChange,
+        onBlur: handleTextBlur,
+        onKeyDown: handleTextKeyDown,
+        placeholder: "#7c6ff7"
+      }
+    )
+  ] });
+}
+function ToggleControl({
+  schema,
+  value,
+  onChange
+}) {
+  const handleChange = useCallback(() => {
+    onChange(schema.key, !value);
+  }, [schema.key, value, onChange]);
+  return /* @__PURE__ */ jsxs("label", { className: PreferenceApp_default.toggle, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: PreferenceApp_default.toggleInput,
+        checked: value,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: PreferenceApp_default.toggleTrack }),
+    /* @__PURE__ */ jsx("span", { className: PreferenceApp_default.toggleKnob })
+  ] });
+}
+function DropdownControl({
+  schema,
+  value,
+  onChange
+}) {
+  const handleChange = useCallback(
+    (nextValue) => {
+      onChange(schema.key, nextValue);
+    },
+    [schema.key, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    DtSelectControl,
+    {
+      value,
+      options: (schema.options ?? []).map((opt) => ({ value: opt, label: opt })),
+      onChange: handleChange
+    }
+  );
+}
+function DtSelectControl({
+  value,
+  options,
+  disabled = false,
+  onChange
+}) {
+  const [selectElement, setSelectElement] = useState(null);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    selectElement.options = options;
+  }, [options, selectElement]);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    selectElement.value = value;
+    selectElement.disabled = disabled;
+  }, [disabled, selectElement, value]);
+  useEffect(() => {
+    if (!selectElement) {
+      return;
+    }
+    const handleSelectChange = (event) => {
+      onChange(event.detail.value);
+    };
+    selectElement.addEventListener("dt-change", handleSelectChange);
+    return () => selectElement.removeEventListener("dt-change", handleSelectChange);
+  }, [onChange, selectElement]);
+  return /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.selectWrap, children: /* @__PURE__ */ jsx("dt-select", { ref: (element) => setSelectElement(element) }) });
+}
+function TextControl({
+  schema,
+  value,
+  onChange
+}) {
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const handleBlur = useCallback(() => {
+    if (localValue !== value) {
+      onChange(schema.key, localValue);
+    }
+  }, [schema.key, localValue, value, onChange]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        onChange(schema.key, localValue);
+      }
+    },
+    [schema.key, localValue, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: schema.sensitive ? "password" : "text",
+      className: schema.sensitive ? PreferenceApp_default.textInputSensitive : PreferenceApp_default.textInput,
+      value: localValue,
+      onChange: (e) => setLocalValue(e.target.value),
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      placeholder: schema.sensitive ? "Enter API key..." : void 0
+    }
+  );
+}
+function NumberControl({
+  schema,
+  value,
+  onChange
+}) {
+  const [localValue, setLocalValue] = useState(String(value));
+  useEffect(() => {
+    setLocalValue(String(value));
+  }, [value]);
+  const commit = useCallback(() => {
+    let num = Number(localValue);
+    if (Number.isNaN(num)) {
+      setLocalValue(String(value));
+      return;
+    }
+    if (schema.min !== void 0) num = Math.max(schema.min, num);
+    if (schema.max !== void 0) num = Math.min(schema.max, num);
+    setLocalValue(String(num));
+    if (num !== value) {
+      onChange(schema.key, num);
+    }
+  }, [schema.key, schema.min, schema.max, localValue, value, onChange]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") commit();
+    },
+    [commit]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      className: PreferenceApp_default.numberInput,
+      value: localValue,
+      min: schema.min,
+      max: schema.max,
+      onChange: (e) => setLocalValue(e.target.value),
+      onBlur: commit,
+      onKeyDown: handleKeyDown
+    }
+  );
+}
+
+// src/components/PreferenceActions.tsx
+import { ActionsProvider, Action, useCommand } from "@desktalk/sdk";
+function PreferenceActions({ children, onConfigChanged }) {
+  const getSetting = useCommand(
+    "preferences.get"
+  );
+  const setSetting = useCommand(
+    "preferences.set"
+  );
+  const resetSetting = useCommand("preferences.reset");
+  const resetAllSettings = useCommand("preferences.resetAll");
+  const handleGetSetting = useCallback(
+    async (params) => {
+      const key = params?.key;
+      if (!key) throw new Error("Missing required parameter: key");
+      const result = await getSetting({ key });
+      return result;
+    },
+    [getSetting]
+  );
+  const handleSetSetting = useCallback(
+    async (params) => {
+      const key = params?.key;
+      if (!key) throw new Error("Missing required parameter: key");
+      let value = params?.value;
+      if (value === void 0) throw new Error("Missing required parameter: value");
+      const schema = getSchema(key);
+      if (schema) {
+        if (schema.type === "number" && typeof value === "string") {
+          value = Number(value);
+        } else if (schema.type === "boolean" && typeof value === "string") {
+          value = value === "true";
+        }
+      }
+      await setSetting({ key, value });
+      onConfigChanged();
+      return { success: true };
+    },
+    [setSetting, onConfigChanged]
+  );
+  const handleResetSetting = useCallback(
+    async (params) => {
+      const key = params?.key;
+      if (!key) throw new Error("Missing required parameter: key");
+      await resetSetting({ key });
+      onConfigChanged();
+      return { success: true };
+    },
+    [resetSetting, onConfigChanged]
+  );
+  const handleResetAll = useCallback(async () => {
+    await resetAllSettings();
+    onConfigChanged();
+    return { success: true };
+  }, [resetAllSettings, onConfigChanged]);
+  return /* @__PURE__ */ jsxs(ActionsProvider, { children: [
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Get Setting",
+        description: "Read the current value of a setting",
+        params: {
+          key: {
+            type: "string",
+            description: "Setting key (e.g. general.theme)",
+            required: true
+          }
+        },
+        handler: handleGetSetting
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Set Setting",
+        description: "Update a setting value",
+        params: {
+          key: {
+            type: "string",
+            description: "Setting key (e.g. general.theme)",
+            required: true
+          },
+          value: {
+            type: "string",
+            description: "New value for the setting",
+            required: true
+          }
+        },
+        handler: handleSetSetting
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Reset Setting",
+        description: "Reset a setting to its default value",
+        params: {
+          key: {
+            type: "string",
+            description: "Setting key to reset",
+            required: true
+          }
+        },
+        handler: handleResetSetting
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Reset All",
+        description: "Reset all settings to their default values",
+        handler: handleResetAll
+      }
+    ),
+    children
+  ] });
+}
+
+// src/frontend.tsx
+var COMPACT_NAV_WIDTH = 720;
+function PreferenceApp() {
+  const [config, setConfig] = useState(getDefaultConfig());
+  const [activeCategory, setActiveCategory] = useState(CATEGORIES[0]);
+  const [notification, setNotification] = useState(null);
+  const [compactNav, setCompactNav] = useState(false);
+  const notificationTimer = useRef(null);
+  const rootRef = useRef(null);
+  const getAllSettings = useCommand2("preferences.getAll");
+  const setSetting = useCommand2(
+    "preferences.set"
+  );
+  const fetchConfig = useCallback(async () => {
+    try {
+      const result = await getAllSettings();
+      setConfig(result);
+    } catch (err) {
+      console.error("Failed to load preferences:", err);
+    }
+  }, [getAllSettings]);
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
+  useEffect(() => {
+    if (!rootRef.current) return;
+    const updateLayout = (width) => {
+      setCompactNav(width <= COMPACT_NAV_WIDTH);
+    };
+    updateLayout(rootRef.current.clientWidth);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      updateLayout(entry.contentRect.width);
+    });
+    observer.observe(rootRef.current);
+    return () => observer.disconnect();
+  }, []);
+  useEvent(
+    "preferences:changed",
+    (change) => {
+      setConfig((prev) => ({ ...prev, [change.key]: change.value }));
+      if (change.requiresRestart) {
+        showNotification(
+          __dtLocalize({ scope: "preference", key: "notifications.restartRequired", defaultText: "This change requires a restart to take effect." })
+        );
+      }
+    }
+  );
+  useEvent("preferences:resetAll", () => {
+    fetchConfig();
+    showNotification(__dtLocalize({ scope: "preference", key: "notifications.resetAll", defaultText: "All settings have been reset to defaults." }));
+  });
+  const showNotification = useCallback((message) => {
+    setNotification(message);
+    if (notificationTimer.current) clearTimeout(notificationTimer.current);
+    notificationTimer.current = setTimeout(() => setNotification(null), 4e3);
+  }, []);
+  const handleChange = useCallback(
+    async (key, value) => {
+      setConfig((prev) => ({ ...prev, [key]: value }));
+      try {
+        await setSetting({ key, value });
+      } catch (err) {
+        console.error(`Failed to update ${key}:`, err);
+        fetchConfig();
+      }
+    },
+    [setSetting, fetchConfig]
+  );
+  const categoriesToShow = CATEGORIES.filter((c) => c === activeCategory);
+  const getVisibleSchemas = useCallback((category) => {
+    const schemas = getSchemasByCategory(category);
+    if (category !== "AI" && category !== "Voice") {
+      return schemas;
+    }
+    return schemas.filter((schema) => {
+      if (category === "AI") {
+        return !schema.key.startsWith("ai.providers.") && schema.key !== "ai.defaultProvider" && schema.key !== "ai.enabledProviders";
+      }
+      return !schema.key.startsWith("voice.providers.") && schema.key !== "voice.defaultProvider" && schema.key !== "voice.enabledProviders";
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(PreferenceActions, { onConfigChanged: fetchConfig, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `${PreferenceApp_default.root}${compactNav ? ` ${PreferenceApp_default.rootCompact}` : ""}`, children: [
+    /* @__PURE__ */ jsx(
+      PreferenceCategoryList,
+      {
+        activeCategory,
+        onSelect: setActiveCategory,
+        compact: compactNav
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.settingsPanel, children: categoriesToShow.map((category) => {
+      const schemas = getVisibleSchemas(category);
+      return /* @__PURE__ */ jsxs(PreferenceSection, { title: category, children: [
+        category === "AI" && /* @__PURE__ */ jsx(AiProviderList, { config, onChange: handleChange }),
+        category === "Voice" && /* @__PURE__ */ jsx(VoiceProviderList, { config, onChange: handleChange }),
+        schemas.map((schema) => /* @__PURE__ */ jsx(
+          PreferenceRow,
+          {
+            schema,
+            value: config[schema.key] ?? schema.default,
+            onChange: handleChange
+          },
+          schema.key
+        ))
+      ] }, category);
+    }) }),
+    notification && /* @__PURE__ */ jsx("div", { className: PreferenceApp_default.notification, children: notification })
+  ] }) });
+}
+function activate(ctx) {
+  const root = createRoot(ctx.root);
+  root.render(
+    /* @__PURE__ */ jsx(WindowIdProvider, { windowId: ctx.windowId, children: /* @__PURE__ */ jsx(MiniAppIdProvider, { miniAppId: ctx.miniAppId, children: /* @__PURE__ */ jsx(PreferenceApp, {}) }) })
+  );
+  return {
+    deactivate() {
+      root.unmount();
+    }
+  };
+}
+export {
+  activate
+};
+//# sourceMappingURL=frontend.js.map