@solidxai/core-ui 0.1.7-beta.9 → 0.1.7

package/dist/components/common/SolidSettings/LlmSettings/AiModelConfigTab.tsx

@@ -1,20 +1,32 @@
-import React from "react";
-import { SolidInput, SolidSelect, SolidSwitch, SolidTextarea } from "../../../shad-cn-ui";
+import React, { useState } from "react";
+import {
+  SolidButton,
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogFooter,
+  SolidDialogHeader,
+  SolidDialogTitle,
+  SolidInput,
+  SolidSelect,
+  SolidSwitch,
+  SolidTextarea,
+} from "../../../shad-cn-ui";
+
 
 export interface ModelBehavior {
   streaming: boolean;
   custom: string;
 }
 
-export interface ProviderConfig {
-  provider: string;
+export interface ProviderEntry {
+  type: string;
   apiKey: string;
-  model: string;
   baseUrl?: string;
 }
 
 export interface ModelEntry {
-  providerKey: string;
+  providerId: string;
+  model: string;
   behavior: ModelBehavior;
 }
 
@@ -23,125 +35,353 @@ export interface SolidAiConfig {
     default: ModelEntry;
     fast: ModelEntry;
   };
-  providers: Record<string, ProviderConfig>;
+  providers: Record<string, ProviderEntry>;
 }
 
-interface Props {
-  providerKey: string;
-  providerConfig: ProviderConfig;
-  behavior: ModelBehavior;
-  allProviders: Record<string, ProviderConfig>;
-  onProviderKeyChange: (newProviderKey: string, config: ProviderConfig) => void;
-  onProviderConfigChange: (providerKey: string, config: ProviderConfig) => void;
-  onBehaviorChange: (behavior: ModelBehavior) => void;
-}
 
-const PROVIDER_OPTIONS = [
+const PROVIDER_TYPE_OPTIONS = [
   { label: "OpenAI", value: "openai" },
   { label: "Anthropic", value: "anthropic" },
   { label: "OpenAI Compatible", value: "openai-compatible" },
   { label: "Anthropic Compatible", value: "anthropic-compatible" },
 ];
 
-const COMPATIBLE_PROVIDERS = ["openai-compatible", "anthropic-compatible"];
+const COMPATIBLE_TYPES = ["openai-compatible", "anthropic-compatible"];
 
-const DEFAULT_PROVIDER_CONFIGS: Record<string, ProviderConfig> = {
-  openai: { provider: "openai", apiKey: "", model: "" },
-  anthropic: { provider: "anthropic", apiKey: "", model: "" },
-  "openai-compatible": { provider: "openai-compatible", apiKey: "", model: "", baseUrl: "" },
-  "anthropic-compatible": { provider: "anthropic-compatible", apiKey: "", model: "", baseUrl: "" },
+const BUILT_IN_TYPES = ["openai", "anthropic"];
+
+const DEFAULT_BUILT_IN_PROVIDERS: Record<string, ProviderEntry> = {
+  openai: { type: "openai", apiKey: "" },
+  anthropic: { type: "anthropic", apiKey: "" },
 };
 
-export const AiModelConfigTab = ({
-  providerKey,
-  providerConfig,
-  behavior,
-  allProviders,
-  onProviderKeyChange,
-  onProviderConfigChange,
-  onBehaviorChange,
-}: Props) => {
-  const isCompatible = COMPATIBLE_PROVIDERS.includes(providerKey);
-
-  const handleProviderSelect = (value: string) => {
-    const existingConfig = allProviders[value];
-    const newConfig = existingConfig ?? DEFAULT_PROVIDER_CONFIGS[value] ?? { provider: value, apiKey: "", model: "" };
-    onProviderKeyChange(value, newConfig);
-  };
+export const ensureBuiltInProviders = (providers: Record<string, ProviderEntry>): Record<string, ProviderEntry> => ({
+  ...DEFAULT_BUILT_IN_PROVIDERS,
+  ...providers,
+});
+
+const cardStyle: React.CSSProperties = {
+  border: "1px solid var(--solid-border-color, #e2e8f0)",
+  borderRadius: "0.5rem",
+  padding: "1.25rem",
+  background: "var(--solid-card-bg, var(--solid-surface-bg, transparent))",
+};
+
+
+interface ProviderModalProps {
+  visible: boolean;
+  onHide: () => void;
+  providers: Record<string, ProviderEntry>;
+  onProvidersChange: (providers: Record<string, ProviderEntry>) => void;
+  editKey?: string | null; // null = add mode, string = edit mode
+}
+
+const ProviderModal = ({ visible, onHide, providers, onProvidersChange, editKey }: ProviderModalProps) => {
+  const isEdit = !!editKey;
+  const existingEntry = isEdit ? providers[editKey] : null;
+
+  const [providerType, setProviderType] = useState(existingEntry?.type ?? "");
+  const [providerName, setProviderName] = useState(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : "");
+  const [providerBaseUrl, setProviderBaseUrl] = useState(existingEntry?.baseUrl ?? "");
+  const [providerApiKey, setProviderApiKey] = useState(existingEntry?.apiKey ?? "");
+
+  const isCompatible = COMPATIBLE_TYPES.includes(providerType);
+
+  // Reset state when modal opens with new data
+  React.useEffect(() => {
+    if (visible) {
+      const entry = editKey ? providers[editKey] : null;
+      setProviderType(entry?.type ?? "");
+      setProviderName(editKey && !BUILT_IN_TYPES.includes(editKey) ? editKey : "");
+      setProviderBaseUrl(entry?.baseUrl ?? "");
+      setProviderApiKey(entry?.apiKey ?? "");
+    }
+  }, [visible, editKey]);
+
+  // In add mode, only show compatible types (built-ins are always pre-added)
+  // In edit mode, show all types but lock the value
+  const typeOptions = isEdit
+    ? PROVIDER_TYPE_OPTIONS
+    : PROVIDER_TYPE_OPTIONS.filter((opt) => COMPATIBLE_TYPES.includes(opt.value));
+
+  const handleSave = () => {
+    if (!providerType) return;
 
-  const handleConfigUpdate = (key: keyof ProviderConfig, value: string) => {
-    onProviderConfigChange(providerKey, { ...providerConfig, [key]: value });
+    let key: string;
+    const entry: ProviderEntry = { type: providerType, apiKey: providerApiKey };
+
+    if (isCompatible) {
+      if (!providerName.trim()) return;
+      key = providerName.trim();
+      entry.baseUrl = providerBaseUrl;
+    } else {
+      key = providerType;
+    }
+
+    // In add mode, don't overwrite existing
+    if (!isEdit && providers[key]) return;
+
+    const next = { ...providers };
+
+    // If editing and key changed (shouldn't happen for built-in), remove old
+    if (isEdit && editKey !== key) {
+      delete next[editKey!];
+    }
+
+    next[key] = entry;
+    onProvidersChange(next);
+    onHide();
   };
 
-  const cardStyle: React.CSSProperties = {
-    border: "1px solid var(--solid-border-color, #e2e8f0)",
-    borderRadius: "0.5rem",
-    padding: "1.25rem",
-    background: "var(--solid-card-bg, var(--solid-surface-bg, transparent))",
+  const handleRemove = () => {
+    if (!editKey) return;
+    const next = { ...providers };
+    delete next[editKey];
+    onProvidersChange(next);
+    onHide();
   };
 
+  const canSave = providerType && (isCompatible ? providerName.trim() : true);
+
   return (
-    <div className="flex flex-column gap-4">
-      <div style={cardStyle}>
-        <p className="solid-settings-subheading">Provider Config</p>
-        <div className="flex flex-column gap-3 mt-3">
-          <div className="flex flex-column gap-2">
-            <label className="form-field-label">Provider</label>
-            <SolidSelect
-              className="w-full"
-              value={providerKey}
-              options={PROVIDER_OPTIONS}
-              onChange={(e) => handleProviderSelect(e.value)}
-              placeholder="Select Provider"
-            />
-          </div>
-          {isCompatible && (
-            <div className="flex flex-column gap-2">
-              <label className="form-field-label">Base URL</label>
-              <SolidInput
-                placeholder="http://localhost:8000"
-                value={providerConfig?.baseUrl || ""}
-                onChange={(e) => handleConfigUpdate("baseUrl", e.target.value)}
+    <SolidDialog open={visible} onOpenChange={(open) => !open && onHide()} style={{ width: "500px" }}>
+      <SolidDialogHeader>
+        <SolidDialogTitle>
+          {isEdit
+            ? `Edit Provider — ${BUILT_IN_TYPES.includes(editKey!) ? PROVIDER_TYPE_OPTIONS.find((o) => o.value === editKey)?.label : editKey}`
+            : "Add Provider"}
+        </SolidDialogTitle>
+      </SolidDialogHeader>
+      <SolidDialogBody>
+        <div className="flex flex-column gap-3">
+          {!(isEdit && BUILT_IN_TYPES.includes(editKey!)) && (
+            <div>
+              <label className="form-field-label">Provider Type</label>
+              <SolidSelect
                 className="w-full"
+                value={providerType}
+                options={typeOptions}
+                onChange={(e) => {
+                  setProviderType(e.value);
+                  if (!isEdit) {
+                    setProviderName("");
+                    setProviderBaseUrl("");
+                  }
+                }}
+                placeholder="Select Provider Type"
+                disabled={isEdit}
               />
             </div>
           )}
-          <div className="flex flex-column gap-2">
+          {isCompatible && (
+            <>
+              {!isEdit && (
+                <div>
+                  <label className="form-field-label">Name (unique identifier)</label>
+                  <SolidInput
+                    placeholder="e.g. openrouter, together-ai"
+                    value={providerName}
+                    onChange={(e) => setProviderName(e.target.value)}
+                    className="w-full"
+                  />
+                </div>
+              )}
+              <div>
+                <label className="form-field-label">Base URL</label>
+                <SolidInput
+                  placeholder="https://openrouter.ai/api/v1"
+                  value={providerBaseUrl}
+                  onChange={(e) => setProviderBaseUrl(e.target.value)}
+                  className="w-full"
+                />
+              </div>
+            </>
+          )}
+          <div>
             <label className="form-field-label">API Key</label>
             <SolidInput
               type="password"
+              value={providerApiKey}
+              onChange={(e) => setProviderApiKey(e.target.value)}
+              className="w-full"
+            />
+          </div>
+        </div>
+      </SolidDialogBody>
+      <SolidDialogFooter>
+        <div className="flex justify-content-between w-full">
+          <div>
+            {isEdit && !BUILT_IN_TYPES.includes(editKey!) && (
+              <SolidButton variant="ghost" onClick={handleRemove} style={{ color: "var(--solid-danger-color, #ef4444)" }}>
+                Remove
+              </SolidButton>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <SolidButton variant="outline" onClick={onHide}>
+              Cancel
+            </SolidButton>
+            <SolidButton onClick={handleSave} disabled={!canSave}>
+              {isEdit ? "Save" : "Add"}
+            </SolidButton>
+          </div>
+        </div>
+      </SolidDialogFooter>
+    </SolidDialog>
+  );
+};
+
+// --- Providers Tab (List View) ---
+
+interface ProvidersTabProps {
+  providers: Record<string, ProviderEntry>;
+  onProvidersChange: (providers: Record<string, ProviderEntry>) => void;
+  showAddModal?: boolean;
+  onAddModalClose?: () => void;
+}
+
+export const ProvidersTab = ({ providers, onProvidersChange, showAddModal, onAddModalClose }: ProvidersTabProps) => {
+  const [editKey, setEditKey] = useState<string | null>(null);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  // Ensure built-in providers are always present
+  const allProviders = ensureBuiltInProviders(providers);
+
+  // Open modal when parent triggers add
+  React.useEffect(() => {
+    if (showAddModal) {
+      setEditKey(null);
+      setModalVisible(true);
+    }
+  }, [showAddModal]);
+
+  const providerEntries = Object.entries(allProviders);
+
+  const handleRowClick = (key: string) => {
+    setEditKey(key);
+    setModalVisible(true);
+  };
+
+  return (
+    <>
+      <div className="solid-simple-table">
+        <table style={{ width: "100%" }}>
+          <thead>
+            <tr>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>Name</th>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>Type</th>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>API Key</th>
+              <th style={{ textAlign: "left", padding: "0.75rem 1rem" }}>Base URL</th>
+            </tr>
+          </thead>
+          <tbody>
+            {providerEntries.length === 0 && (
+              <tr>
+                <td colSpan={4} style={{ textAlign: "center", padding: "2rem 1rem", opacity: 0.5 }}>
+                  No providers configured.
+                </td>
+              </tr>
+            )}
+            {providerEntries.map(([key, entry]) => {
+              const typeLabel = PROVIDER_TYPE_OPTIONS.find((o) => o.value === entry.type)?.label ?? entry.type;
+              const isBuiltIn = BUILT_IN_TYPES.includes(key);
+              const displayName = isBuiltIn ? typeLabel : key;
+              const maskedKey = entry.apiKey ? "\u2022".repeat(Math.min(entry.apiKey.length, 8)) : "-";
+
+              return (
+                <tr
+                  key={key}
+                  onClick={() => handleRowClick(key)}
+                  style={{ cursor: "pointer" }}
+                  className="solid-table-row-hover"
+                >
+                  <td style={{ padding: "0.75rem 1rem", fontWeight: 500 }}>{displayName}</td>
+                  <td style={{ padding: "0.75rem 1rem" }}>{typeLabel}</td>
+                  <td style={{ padding: "0.75rem 1rem" }}>{maskedKey}</td>
+                  <td style={{ padding: "0.75rem 1rem" }}>{entry.baseUrl || "-"}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <ProviderModal
+        visible={modalVisible}
+        onHide={() => {
+          setModalVisible(false);
+          setEditKey(null);
+          onAddModalClose?.();
+        }}
+        providers={allProviders}
+        onProvidersChange={onProvidersChange}
+        editKey={editKey}
+      />
+    </>
+  );
+};
+
+// --- Model Config Tab (used for Intelligent Model & Fast Model) ---
+
+interface ModelConfigTabProps {
+  modelEntry: ModelEntry;
+  providers: Record<string, ProviderEntry>;
+  onModelEntryChange: (entry: ModelEntry) => void;
+}
+
+export const ModelConfigTab = ({ modelEntry, providers, onModelEntryChange }: ModelConfigTabProps) => {
+  const providerOptions = Object.entries(providers).map(([key, entry]) => {
+    const typeLabel = PROVIDER_TYPE_OPTIONS.find((o) => o.value === entry.type)?.label ?? entry.type;
+    const label = BUILT_IN_TYPES.includes(key) ? typeLabel : `${key} (${typeLabel})`;
+    return { label, value: key };
+  });
+
+  return (
+    <div className="flex flex-column gap-4">
+      <div style={{ ...cardStyle, width: "50%" }}>
+        <p className="solid-settings-subheading">Model Config</p>
+        <div className="flex flex-column gap-3 mt-3">
+          <div>
+            <label className="form-field-label">Provider</label>
+            <SolidSelect
               className="w-full"
-              value={providerConfig?.apiKey || ""}
-              onChange={(e) => handleConfigUpdate("apiKey", e.target.value)}
+              value={modelEntry.providerId}
+              options={providerOptions}
+              onChange={(e) => onModelEntryChange({ ...modelEntry, providerId: e.value })}
+              placeholder="Select Provider"
             />
           </div>
-          <div className="flex flex-column gap-2">
+          <div>
             <label className="form-field-label">Model</label>
             <SolidInput
               placeholder="e.g. gpt-4o-mini"
-              value={providerConfig?.model || ""}
-              onChange={(e) => handleConfigUpdate("model", e.target.value)}
+              value={modelEntry.model || ""}
+              onChange={(e) => onModelEntryChange({ ...modelEntry, model: e.target.value })}
               className="w-full"
             />
           </div>
         </div>
       </div>
 
-      <div style={cardStyle}>
+      <div style={{ ...cardStyle, width: "50%" }}>
         <p className="solid-settings-subheading">Behavior</p>
         <div className="flex flex-column gap-3 mt-3">
           <div className="flex align-items-center gap-2">
             <SolidSwitch
-              checked={behavior.streaming}
-              onChange={(val) => onBehaviorChange({ ...behavior, streaming: val })}
+              checked={modelEntry.behavior.streaming}
+              onChange={(val) =>
+                onModelEntryChange({ ...modelEntry, behavior: { ...modelEntry.behavior, streaming: val } })
+              }
             />
             <label className="form-field-label" style={{ marginBottom: 0 }}>Streaming</label>
           </div>
-          <div className="flex flex-column gap-2">
+          <div>
             <label className="form-field-label">Custom Params (JSON)</label>
             <SolidTextarea
-              value={behavior.custom}
-              onChange={(e) => onBehaviorChange({ ...behavior, custom: e.target.value })}
+              value={modelEntry.behavior.custom}
+              onChange={(e) =>
+                onModelEntryChange({ ...modelEntry, behavior: { ...modelEntry.behavior, custom: e.target.value } })
+              }
               placeholder='{ "temperature": 0.7, "maxTokens": 1000 }'
               rows={4}
               className="w-full"
@@ -149,7 +389,6 @@ export const AiModelConfigTab = ({
           </div>
         </div>
       </div>
-
     </div>
   );
 };

package/dist/components/shad-cn-ui/SolidTabs.d.ts

@@ -13,8 +13,9 @@ type SolidTabGroupProps = {
     listClassName?: string;
     panelClassName?: string;
     tabPosition?: "left" | "center" | "right";
+    extra?: React.ReactNode;
 };
 export declare function SolidTab(_props: SolidTabProps): null;
-export declare function SolidTabGroup({ tabs, value, onValueChange, className, listClassName, panelClassName, tabPosition, }: SolidTabGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SolidTabGroup({ tabs, value, onValueChange, className, listClassName, panelClassName, tabPosition, extra, }: SolidTabGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SolidTabs.d.ts.map

package/dist/components/shad-cn-ui/SolidTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidTabs.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC3C,CAAC;AAMF,wBAAgB,QAAQ,CAAC,MAAM,EAAE,aAAa,QAE7C;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,aAAa,EACb,SAAS,EACT,aAAa,EACb,cAAc,EACd,WAAoB,GACrB,EAAE,kBAAkB,2CAiDpB"}
+{"version":3,"file":"SolidTabs.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAMF,wBAAgB,QAAQ,CAAC,MAAM,EAAE,aAAa,QAE7C;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,aAAa,EACb,SAAS,EACT,aAAa,EACb,cAAc,EACd,WAAoB,EACpB,KAAK,GACN,EAAE,kBAAkB,2CAqDpB"}

package/dist/components/shad-cn-ui/SolidTabs.js

@@ -10,11 +10,11 @@ export function SolidTab(_props) {
     return null;
 }
 export function SolidTabGroup(_a) {
-    var tabs = _a.tabs, value = _a.value, onValueChange = _a.onValueChange, className = _a.className, listClassName = _a.listClassName, panelClassName = _a.panelClassName, _b = _a.tabPosition, tabPosition = _b === void 0 ? "left" : _b;
-    return (_jsxs("div", { className: cx("solid-notebook", "solid-tabs", "solid-tabs--".concat(tabPosition), className), children: [_jsx("div", { className: cx("solid-notebook-tablist", "solid-tabs-list", listClassName), role: "tablist", children: tabs.map(function (tab) {
-                    var isActive = tab.value === value;
-                    return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-controls": "solid-tab-panel-".concat(tab.value), id: "solid-tab-".concat(tab.value), className: cx("solid-notebook-tab-trigger", "solid-tabs-trigger", tab.hasError && "error", isActive && "active", isActive && "is-active"), onClick: function () { return onValueChange(tab.value); }, children: tab.label }, tab.value));
-                }) }), tabs.map(function (tab) {
+    var tabs = _a.tabs, value = _a.value, onValueChange = _a.onValueChange, className = _a.className, listClassName = _a.listClassName, panelClassName = _a.panelClassName, _b = _a.tabPosition, tabPosition = _b === void 0 ? "left" : _b, extra = _a.extra;
+    return (_jsxs("div", { className: cx("solid-notebook", "solid-tabs", "solid-tabs--".concat(tabPosition), className), children: [_jsxs("div", { className: cx("solid-notebook-tablist", "solid-tabs-list", listClassName), role: "tablist", style: extra ? { display: "flex", alignItems: "center", justifyContent: "space-between" } : undefined, children: [_jsx("div", { style: extra ? { display: "flex" } : undefined, children: tabs.map(function (tab) {
+                            var isActive = tab.value === value;
+                            return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-controls": "solid-tab-panel-".concat(tab.value), id: "solid-tab-".concat(tab.value), className: cx("solid-notebook-tab-trigger", "solid-tabs-trigger", tab.hasError && "error", isActive && "active", isActive && "is-active"), onClick: function () { return onValueChange(tab.value); }, children: tab.label }, tab.value));
+                        }) }), extra && _jsx("div", { children: extra })] }), tabs.map(function (tab) {
                 var isActive = tab.value === value;
                 return (_jsx("div", { role: "tabpanel", id: "solid-tab-panel-".concat(tab.value), "aria-labelledby": "solid-tab-".concat(tab.value), hidden: !isActive, className: cx("solid-notebook-content", "solid-tabs-panel", panelClassName), children: isActive ? tab.content : null }, tab.value));
             })] }));

package/dist/components/shad-cn-ui/SolidTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidTabs.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTabs.tsx"],"names":[],"mappings":";AAmBA,SAAS,EAAE;IAAC,eAA2C;SAA3C,UAA2C,EAA3C,qBAA2C,EAA3C,IAA2C;QAA3C,0BAA2C;;IACrD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,MAAqB;IAC5C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAQT;QAPnB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,mBAAoB,EAApB,WAAW,mBAAG,MAAM,KAAA;IAEpB,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,sBAAe,WAAW,CAAE,EAAE,SAAS,CAAC,aACzF,cACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,iBAAiB,EAAE,aAAa,CAAC,EACzE,IAAI,EAAC,SAAS,YAEb,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG;oBACZ,IAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;oBACrC,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,QAAQ,mBACR,0BAAmB,GAAG,CAAC,KAAK,CAAE,EAC7C,EAAE,EAAE,oBAAa,GAAG,CAAC,KAAK,CAAE,EAC5B,SAAS,EAAE,EAAE,CACX,4BAA4B,EAC5B,oBAAoB,EACpB,GAAG,CAAC,QAAQ,IAAI,OAAO,EACvB,QAAQ,IAAI,QAAQ,EACpB,QAAQ,IAAI,WAAW,CACxB,EACD,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAxB,CAAwB,YAEtC,GAAG,CAAC,KAAK,IAfL,GAAG,CAAC,KAAK,CAgBP,CACV,CAAC;gBACJ,CAAC,CAAC,GACE,EAEL,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG;gBACZ,IAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;gBACrC,OAAO,CACL,cAEE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,0BAAmB,GAAG,CAAC,KAAK,CAAE,qBACjB,oBAAa,GAAG,CAAC,KAAK,CAAE,EACzC,MAAM,EAAE,CAAC,QAAQ,EACjB,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,kBAAkB,EAAE,cAAc,CAAC,YAE1E,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAPzB,GAAG,CAAC,KAAK,CAQV,CACP,CAAC;YACJ,CAAC,CAAC,IACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\ntype SolidTabProps = {\n  value: string;\n  label: React.ReactNode;\n  content: React.ReactNode;\n  hasError?: boolean;\n};\n\ntype SolidTabGroupProps = {\n  tabs: SolidTabProps[];\n  value: string;\n  onValueChange: (value: string) => void;\n  className?: string;\n  listClassName?: string;\n  panelClassName?: string;\n  tabPosition?: \"left\" | \"center\" | \"right\";\n};\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport function SolidTab(_props: SolidTabProps) {\n  return null;\n}\n\nexport function SolidTabGroup({\n  tabs,\n  value,\n  onValueChange,\n  className,\n  listClassName,\n  panelClassName,\n  tabPosition = \"left\",\n}: SolidTabGroupProps) {\n  return (\n    <div className={cx(\"solid-notebook\", \"solid-tabs\", `solid-tabs--${tabPosition}`, className)}>\n      <div\n        className={cx(\"solid-notebook-tablist\", \"solid-tabs-list\", listClassName)}\n        role=\"tablist\"\n      >\n        {tabs.map((tab) => {\n          const isActive = tab.value === value;\n          return (\n            <button\n              key={tab.value}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-controls={`solid-tab-panel-${tab.value}`}\n              id={`solid-tab-${tab.value}`}\n              className={cx(\n                \"solid-notebook-tab-trigger\",\n                \"solid-tabs-trigger\",\n                tab.hasError && \"error\",\n                isActive && \"active\",\n                isActive && \"is-active\",\n              )}\n              onClick={() => onValueChange(tab.value)}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n      </div>\n\n      {tabs.map((tab) => {\n        const isActive = tab.value === value;\n        return (\n          <div\n            key={tab.value}\n            role=\"tabpanel\"\n            id={`solid-tab-panel-${tab.value}`}\n            aria-labelledby={`solid-tab-${tab.value}`}\n            hidden={!isActive}\n            className={cx(\"solid-notebook-content\", \"solid-tabs-panel\", panelClassName)}\n          >\n            {isActive ? tab.content : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SolidTabs.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTabs.tsx"],"names":[],"mappings":";AAoBA,SAAS,EAAE;IAAC,eAA2C;SAA3C,UAA2C,EAA3C,qBAA2C,EAA3C,IAA2C;QAA3C,0BAA2C;;IACrD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,MAAqB;IAC5C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAST;QARnB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,mBAAoB,EAApB,WAAW,mBAAG,MAAM,KAAA,EACpB,KAAK,WAAA;IAEL,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,YAAY,EAAE,sBAAe,WAAW,CAAE,EAAE,SAAS,CAAC,aACzF,eACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,iBAAiB,EAAE,aAAa,CAAC,EACzE,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,SAAS,aAErG,cAAK,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,YAClD,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG;4BACZ,IAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;4BACrC,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,QAAQ,mBACR,0BAAmB,GAAG,CAAC,KAAK,CAAE,EAC7C,EAAE,EAAE,oBAAa,GAAG,CAAC,KAAK,CAAE,EAC5B,SAAS,EAAE,EAAE,CACX,4BAA4B,EAC5B,oBAAoB,EACpB,GAAG,CAAC,QAAQ,IAAI,OAAO,EACvB,QAAQ,IAAI,QAAQ,EACpB,QAAQ,IAAI,WAAW,CACxB,EACD,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAxB,CAAwB,YAEtC,GAAG,CAAC,KAAK,IAfL,GAAG,CAAC,KAAK,CAgBP,CACV,CAAC;wBACJ,CAAC,CAAC,GACI,EACL,KAAK,IAAI,wBAAM,KAAK,GAAO,IACxB,EAEL,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG;gBACZ,IAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;gBACrC,OAAO,CACL,cAEE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,0BAAmB,GAAG,CAAC,KAAK,CAAE,qBACjB,oBAAa,GAAG,CAAC,KAAK,CAAE,EACzC,MAAM,EAAE,CAAC,QAAQ,EACjB,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,kBAAkB,EAAE,cAAc,CAAC,YAE1E,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAPzB,GAAG,CAAC,KAAK,CAQV,CACP,CAAC;YACJ,CAAC,CAAC,IACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\ntype SolidTabProps = {\n  value: string;\n  label: React.ReactNode;\n  content: React.ReactNode;\n  hasError?: boolean;\n};\n\ntype SolidTabGroupProps = {\n  tabs: SolidTabProps[];\n  value: string;\n  onValueChange: (value: string) => void;\n  className?: string;\n  listClassName?: string;\n  panelClassName?: string;\n  tabPosition?: \"left\" | \"center\" | \"right\";\n  extra?: React.ReactNode;\n};\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport function SolidTab(_props: SolidTabProps) {\n  return null;\n}\n\nexport function SolidTabGroup({\n  tabs,\n  value,\n  onValueChange,\n  className,\n  listClassName,\n  panelClassName,\n  tabPosition = \"left\",\n  extra,\n}: SolidTabGroupProps) {\n  return (\n    <div className={cx(\"solid-notebook\", \"solid-tabs\", `solid-tabs--${tabPosition}`, className)}>\n      <div\n        className={cx(\"solid-notebook-tablist\", \"solid-tabs-list\", listClassName)}\n        role=\"tablist\"\n        style={extra ? { display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" } : undefined}\n      >\n        <div style={extra ? { display: \"flex\" } : undefined}>\n        {tabs.map((tab) => {\n          const isActive = tab.value === value;\n          return (\n            <button\n              key={tab.value}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-controls={`solid-tab-panel-${tab.value}`}\n              id={`solid-tab-${tab.value}`}\n              className={cx(\n                \"solid-notebook-tab-trigger\",\n                \"solid-tabs-trigger\",\n                tab.hasError && \"error\",\n                isActive && \"active\",\n                isActive && \"is-active\",\n              )}\n              onClick={() => onValueChange(tab.value)}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n        </div>\n        {extra && <div>{extra}</div>}\n      </div>\n\n      {tabs.map((tab) => {\n        const isActive = tab.value === value;\n        return (\n          <div\n            key={tab.value}\n            role=\"tabpanel\"\n            id={`solid-tab-panel-${tab.value}`}\n            aria-labelledby={`solid-tab-${tab.value}`}\n            hidden={!isActive}\n            className={cx(\"solid-notebook-content\", \"solid-tabs-panel\", panelClassName)}\n          >\n            {isActive ? tab.content : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/shad-cn-ui/SolidTabs.tsx

@@ -15,6 +15,7 @@ type SolidTabGroupProps = {
   listClassName?: string;
   panelClassName?: string;
   tabPosition?: "left" | "center" | "right";
+  extra?: React.ReactNode;
 };
 
 function cx(...parts: Array<string | false | undefined>) {
@@ -33,13 +34,16 @@ export function SolidTabGroup({
   listClassName,
   panelClassName,
   tabPosition = "left",
+  extra,
 }: SolidTabGroupProps) {
   return (
     <div className={cx("solid-notebook", "solid-tabs", `solid-tabs--${tabPosition}`, className)}>
       <div
         className={cx("solid-notebook-tablist", "solid-tabs-list", listClassName)}
         role="tablist"
+        style={extra ? { display: "flex", alignItems: "center", justifyContent: "space-between" } : undefined}
       >
+        <div style={extra ? { display: "flex" } : undefined}>
         {tabs.map((tab) => {
           const isActive = tab.value === value;
           return (
@@ -63,6 +67,8 @@ export function SolidTabGroup({
             </button>
           );
         })}
+        </div>
+        {extra && <div>{extra}</div>}
       </div>
 
       {tabs.map((tab) => {

package/dist/routes/guards/GuestGuard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GuestGuard.d.ts","sourceRoot":"","sources":["../../../src/routes/guards/GuestGuard.tsx"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,4CAmBzB"}
+{"version":3,"file":"GuestGuard.d.ts","sourceRoot":"","sources":["../../../src/routes/guards/GuestGuard.tsx"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,4CAezB"}

package/dist/routes/guards/GuestGuard.js

@@ -6,13 +6,8 @@ export function GuestGuard() {
     var status = useSession().status;
     var navigate = useNavigate();
     useEffect(function () {
-        if (status === "authenticated") {
-            if (window.history.length > 1) {
-                navigate(-1);
-            }
-            else {
-                navigate("/admin", { replace: true });
-            }
+        if (status === "authenticated" && location.pathname.startsWith("/auth")) {
+            navigate("/admin", { replace: true });
         }
     }, [status, navigate]);
     if (status === "loading" || status === "authenticated") {

package/dist/routes/guards/GuestGuard.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuestGuard.js","sourceRoot":"","sources":["../../../src/routes/guards/GuestGuard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,UAAU,UAAU;IAChB,IAAA,MAAM,GAAK,UAAU,EAAE,OAAjB,CAAkB;IAChC,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,SAAS,CAAC;QACR,IAAI,MAAM,KAAK,eAAe,EAAE;YAC9B,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;aACd;iBAAM;gBACL,QAAQ,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;aACvC;SACF;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,eAAe,EAAE;QACtD,OAAO,uCAAqB,CAAC;KAC9B;IAED,OAAO,KAAC,MAAM,KAAG,CAAC;AACpB,CAAC","sourcesContent":["import { useEffect } from \"react\";\nimport { Outlet, useNavigate } from \"react-router-dom\";\nimport { useSession } from \"../../hooks/useSession\";\n\nexport function GuestGuard() {\n  const { status } = useSession();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (status === \"authenticated\") {\n      if (window.history.length > 1) {\n        navigate(-1);\n      } else {\n        navigate(\"/admin\", { replace: true });\n      }\n    }\n  }, [status, navigate]);\n\n  if (status === \"loading\" || status === \"authenticated\") {\n    return <div>Loading...</div>;\n  }\n\n  return <Outlet />;\n}"]}
+{"version":3,"file":"GuestGuard.js","sourceRoot":"","sources":["../../../src/routes/guards/GuestGuard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,UAAU,UAAU;IAChB,IAAA,MAAM,GAAK,UAAU,EAAE,OAAjB,CAAkB;IAChC,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,SAAS,CAAC;QACR,IAAI,MAAM,KAAK,eAAe,IAAI,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YACvE,QAAQ,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,eAAe,EAAE;QACtD,OAAO,uCAAqB,CAAC;KAC9B;IAED,OAAO,KAAC,MAAM,KAAG,CAAC;AACpB,CAAC","sourcesContent":["import { useEffect } from \"react\";\nimport { Outlet, useNavigate } from \"react-router-dom\";\nimport { useSession } from \"../../hooks/useSession\";\n\nexport function GuestGuard() {\n  const { status } = useSession();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (status === \"authenticated\" && location.pathname.startsWith(\"/auth\")) {\n      navigate(\"/admin\", { replace: true });\n    }\n  }, [status, navigate]);\n\n  if (status === \"loading\" || status === \"authenticated\") {\n    return <div>Loading...</div>;\n  }\n\n  return <Outlet />;\n}"]}

package/dist/routes/guards/GuestGuard.tsx

@@ -7,12 +7,8 @@ export function GuestGuard() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (status === "authenticated") {
-      if (window.history.length > 1) {
-        navigate(-1);
-      } else {
-        navigate("/admin", { replace: true });
-      }
+    if (status === "authenticated" && location.pathname.startsWith("/auth")) {
+      navigate("/admin", { replace: true });
     }
   }, [status, navigate]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidxai/core-ui",
-  "version": "0.1.7-beta.9",
+  "version": "0.1.7",
   "scripts": {
     "prebuild": "npm run copy-resources && npm run copy-styles",
     "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",