@lastbrain/ai-ui-react 1.0.3 → 1.0.5

package/README.md

@@ -5,6 +5,7 @@ Headless React components for LastBrain AI UI Kit.
 ## Features
 
 - Headless components (no UI library dependency)
+- Built-in CSS styles (optional)
 - React hooks for AI operations
 - Context provider for configuration
 - TypeScript support
@@ -18,12 +19,58 @@ npm install @lastbrain/ai-ui-react @lastbrain/ai-ui-core
 pnpm add @lastbrain/ai-ui-react @lastbrain/ai-ui-core
 ```
 
+## Styles
+
+The package includes optional CSS styles. Import them in your app:
+
+```tsx
+import "@lastbrain/ai-ui-react/styles.css";
+```
+
+Or if you prefer to use your own styles, you can skip this import and style the components using the provided CSS classes:
+
+- `.ai-input` - Input field
+- `.ai-textarea` - Textarea
+- `.ai-button` - Button
+- `.ai-select` - Select dropdown
+- `.ai-modal` - Modal dialog
+- `.ai-tooltip` - Tooltip
+- `.ai-chip` - Chip/Badge
+- `.ai-status-button` - Status button
+- And more...
+
+### CSS Variables
+
+Customize the theme using CSS variables:
+
+```css
+:root {
+  --ai-primary: #3b82f6;
+  --ai-primary-hover: #2563eb;
+  --ai-success: #10b981;
+  --ai-warning: #f59e0b;
+  --ai-danger: #ef4444;
+  --ai-border: #e5e7eb;
+  --ai-text: #1f2937;
+  --ai-text-secondary: #6b7280;
+  --ai-bg: #ffffff;
+  --ai-bg-hover: #f9fafb;
+  --ai-radius: 8px;
+}
+```
+
 ## Usage
 
 ### With Provider (Recommended)
 
 ```tsx
-import { AiProvider, AiInput, AiSettingsButton } from "@lastbrain/ai-ui-react";
+import {
+  AiProvider,
+  AiInput,
+  AiSettingsButton,
+  AiStatusButton,
+} from "@lastbrain/ai-ui-react";
+import "@lastbrain/ai-ui-react/styles.css";
 
 function App() {
   return (
@@ -35,6 +82,7 @@ function App() {
           onValue={(text) => console.log(text)}
           onToast={(toast) => alert(toast.message)}
         />
+        <AiStatusButton />
         <AiSettingsButton />
       </div>
     </AiProvider>
@@ -46,6 +94,7 @@ function App() {
 
 ```tsx
 import { AiInput } from "@lastbrain/ai-ui-react";
+import "@lastbrain/ai-ui-react/styles.css";
 
 function MyComponent() {
   return (

package/dist/components/AiStatusButton.d.ts

@@ -0,0 +1,8 @@
+import type { AiStatus } from "@lastbrain/ai-ui-core";
+export interface AiStatusButtonProps {
+    status: AiStatus | null;
+    loading?: boolean;
+    className?: string;
+}
+export declare function AiStatusButton({ status, loading, className, }: AiStatusButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AiStatusButton.d.ts.map

package/dist/components/AiStatusButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAsLrB"}

package/dist/components/AiStatusButton.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export function AiStatusButton({ status, loading = false, className = "", }) {
+    const [showTooltip, setShowTooltip] = useState(false);
+    if (loading) {
+        return (_jsx("button", { className: `ai-status-button ai-status-button--loading ${className}`, disabled: true, children: _jsx("svg", { className: "ai-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) }) }));
+    }
+    if (!status) {
+        return (_jsxs("button", { className: `ai-status-button ai-status-button--error ${className}`, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }), showTooltip && _jsx("div", { className: "ai-tooltip", children: "No status available" })] }));
+    }
+    return (_jsxs("div", { className: "ai-status-button-wrapper", children: [_jsx("button", { className: `ai-status-button ai-status-button--success ${className}`, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsxs("div", { className: "ai-tooltip ai-tooltip--status", children: [_jsx("div", { className: "ai-tooltip__header", children: "API Status" }), _jsxs("div", { className: "ai-tooltip__section", children: [_jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "API Key:" }), _jsx("span", { className: "ai-tooltip__value", children: status.api_key.name })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Env:" }), _jsx("span", { className: "ai-tooltip__value", children: status.api_key.env })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Rate Limit:" }), _jsxs("span", { className: "ai-tooltip__value", children: [status.api_key.rate_limit_rpm, " req/min"] })] })] }), _jsxs("div", { className: "ai-tooltip__section", children: [_jsx("div", { className: "ai-tooltip__subtitle", children: "Balance" }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Total:" }), _jsx("span", { className: "ai-tooltip__value ai-tooltip__value--bold", children: status.balance.total.toLocaleString() })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Purchased:" }), _jsx("span", { className: "ai-tooltip__value", children: status.balance.purchased.toLocaleString() })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Quota:" }), _jsx("span", { className: "ai-tooltip__value", children: status.balance.quota.toLocaleString() })] })] }), _jsxs("div", { className: "ai-tooltip__section", children: [_jsx("div", { className: "ai-tooltip__subtitle", children: "Plan" }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Type:" }), _jsx("span", { className: "ai-tooltip__value ai-tooltip__value--capitalize", children: status.quota.plan })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Remaining:" }), _jsxs("span", { className: "ai-tooltip__value", children: [status.quota.remaining_quota.toLocaleString(), " /", " ", status.quota.effective_quota.toLocaleString()] })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Status:" }), _jsx("span", { className: `ai-tooltip__value ${status.quota.is_active ? "ai-tooltip__value--success" : "ai-tooltip__value--warning"}`, children: status.quota.is_active ? "Active" : "Inactive" })] })] }), _jsxs("div", { className: "ai-tooltip__section", children: [_jsx("div", { className: "ai-tooltip__subtitle", children: "Storage" }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Database:" }), _jsxs("span", { className: "ai-tooltip__value", children: [status.storage.db_mb.toFixed(2), " MB"] })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Files:" }), _jsxs("span", { className: "ai-tooltip__value", children: [status.storage.files_mb.toFixed(2), " MB"] })] }), _jsxs("div", { className: "ai-tooltip__row", children: [_jsx("span", { className: "ai-tooltip__label", children: "Total:" }), _jsxs("span", { className: "ai-tooltip__value ai-tooltip__value--bold", children: [(status.storage.db_mb + status.storage.files_mb).toFixed(2), " MB"] })] })] }), _jsxs("div", { className: "ai-tooltip__section ai-tooltip__actions", children: [_jsx("a", { href: "https://ai.lastbrain.io/fr/auth/dashboard", target: "_blank", rel: "noopener noreferrer", className: "ai-tooltip__link", children: "Dashboard" }), _jsx("a", { href: "https://ai.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", className: "ai-tooltip__link", children: "History" }), _jsx("a", { href: "https://ai.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", className: "ai-tooltip__link", children: "Settings" })] })] }))] }));
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./types";
+import "./styles.css";
 export * from "./context/AiProvider";
 export * from "./hooks/useAiClient";
 export * from "./hooks/useAiModels";
@@ -14,4 +15,5 @@ export * from "./components/AiSelect";
 export * from "./components/AiChipLabel";
 export * from "./components/AiImageButton";
 export * from "./components/AiSettingsButton";
+export * from "./components/AiStatusButton";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AAGrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,OAAO,cAAc,CAAC;AAGtB,cAAc,sBAAsB,CAAC;AAGrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC"}

package/dist/index.js

@@ -1,5 +1,7 @@
 // Types
 export * from "./types";
+// Styles
+import "./styles.css";
 // Context
 export * from "./context/AiProvider";
 // Hooks
@@ -18,3 +20,4 @@ export * from "./components/AiSelect";
 export * from "./components/AiChipLabel";
 export * from "./components/AiImageButton";
 export * from "./components/AiSettingsButton";
+export * from "./components/AiStatusButton";

package/dist/styles.css

@@ -0,0 +1,539 @@
+/**
+ * @lastbrain/ai-ui-react - Styles CSS
+ * Framework-agnostic styles for AI UI components
+ */
+
+/* ========== Variables ========== */
+:root {
+  --ai-primary: #3b82f6;
+  --ai-primary-hover: #2563eb;
+  --ai-success: #10b981;
+  --ai-warning: #f59e0b;
+  --ai-danger: #ef4444;
+  --ai-border: #e5e7eb;
+  --ai-text: #1f2937;
+  --ai-text-secondary: #6b7280;
+  --ai-bg: #ffffff;
+  --ai-bg-hover: #f9fafb;
+  --ai-radius: 8px;
+  --ai-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --ai-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+/* ========== Status Button ========== */
+.ai-status-button-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.ai-status-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  background: var(--ai-bg);
+  color: var(--ai-text);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ai-status-button:hover {
+  background: var(--ai-bg-hover);
+  box-shadow: var(--ai-shadow);
+}
+
+.ai-status-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ai-status-button--loading {
+  cursor: wait;
+}
+
+.ai-status-button--success {
+  color: var(--ai-success);
+}
+
+.ai-status-button--error {
+  color: var(--ai-danger);
+}
+
+.ai-spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ========== Tooltip ========== */
+.ai-tooltip {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 1000;
+  min-width: 200px;
+  padding: 8px;
+  background: var(--ai-bg);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  box-shadow: var(--ai-shadow-lg);
+  font-size: 12px;
+  animation: fadeIn 0.2s;
+}
+
+.ai-tooltip--status {
+  min-width: 280px;
+}
+
+.ai-tooltip__header {
+  font-weight: 600;
+  font-size: 14px;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--ai-border);
+}
+
+.ai-tooltip__section {
+  padding: 8px 0;
+  border-top: 1px solid var(--ai-border);
+}
+
+.ai-tooltip__section:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+
+.ai-tooltip__subtitle {
+  font-weight: 500;
+  margin-bottom: 4px;
+  font-size: 11px;
+}
+
+.ai-tooltip__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.ai-tooltip__label {
+  color: var(--ai-text-secondary);
+}
+
+.ai-tooltip__value {
+  font-family: monospace;
+  font-size: 11px;
+}
+
+.ai-tooltip__value--bold {
+  font-weight: 600;
+}
+
+.ai-tooltip__value--capitalize {
+  text-transform: capitalize;
+}
+
+.ai-tooltip__value--success {
+  color: var(--ai-success);
+}
+
+.ai-tooltip__value--warning {
+  color: var(--ai-warning);
+}
+
+.ai-tooltip__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding-top: 8px;
+}
+
+.ai-tooltip__link {
+  flex: 1;
+  text-align: center;
+  padding: 4px 8px;
+  color: var(--ai-primary);
+  text-decoration: none;
+  border-radius: 4px;
+  transition: background 0.2s;
+  font-size: 11px;
+}
+
+.ai-tooltip__link:hover {
+  background: var(--ai-bg-hover);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ========== Input ========== */
+.ai-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  font-size: 14px;
+  color: var(--ai-text);
+  background: var(--ai-bg);
+  transition: all 0.2s;
+}
+
+.ai-input:hover {
+  border-color: var(--ai-primary);
+}
+
+.ai-input:focus {
+  outline: none;
+  border-color: var(--ai-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.ai-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--ai-bg-hover);
+}
+
+.ai-input--error {
+  border-color: var(--ai-danger);
+}
+
+.ai-input--error:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+/* ========== Textarea ========== */
+.ai-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 10px 12px;
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--ai-text);
+  background: var(--ai-bg);
+  resize: vertical;
+  transition: all 0.2s;
+}
+
+.ai-textarea:hover {
+  border-color: var(--ai-primary);
+}
+
+.ai-textarea:focus {
+  outline: none;
+  border-color: var(--ai-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.ai-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--ai-bg-hover);
+}
+
+/* ========== Button ========== */
+.ai-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: none;
+  border-radius: var(--ai-radius);
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  background: var(--ai-primary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ai-button:hover {
+  background: var(--ai-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--ai-shadow);
+}
+
+.ai-button:active {
+  transform: translateY(0);
+}
+
+.ai-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.ai-button--secondary {
+  background: var(--ai-bg);
+  color: var(--ai-text);
+  border: 1px solid var(--ai-border);
+}
+
+.ai-button--secondary:hover {
+  background: var(--ai-bg-hover);
+}
+
+.ai-button--danger {
+  background: var(--ai-danger);
+}
+
+.ai-button--success {
+  background: var(--ai-success);
+}
+
+.ai-button--sm {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.ai-button--lg {
+  padding: 14px 20px;
+  font-size: 16px;
+}
+
+/* ========== Select ========== */
+.ai-select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  font-size: 14px;
+  color: var(--ai-text);
+  background: var(--ai-bg);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ai-select:hover {
+  border-color: var(--ai-primary);
+}
+
+.ai-select:focus {
+  outline: none;
+  border-color: var(--ai-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.ai-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--ai-bg-hover);
+}
+
+/* ========== Modal ========== */
+.ai-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  animation: fadeIn 0.2s;
+}
+
+.ai-modal {
+  position: relative;
+  z-index: 9999;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: var(--ai-bg);
+  border-radius: var(--ai-radius);
+  box-shadow: var(--ai-shadow-lg);
+  animation: slideUp 0.3s;
+}
+
+.ai-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ai-border);
+}
+
+.ai-modal__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--ai-text);
+}
+
+.ai-modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ai-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ai-modal__close:hover {
+  background: var(--ai-bg-hover);
+  color: var(--ai-text);
+}
+
+.ai-modal__body {
+  padding: 20px;
+}
+
+.ai-modal__footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  border-top: 1px solid var(--ai-border);
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ========== Chip Label ========== */
+.ai-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--ai-bg-hover);
+  color: var(--ai-text);
+}
+
+.ai-chip--primary {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--ai-primary);
+}
+
+.ai-chip--success {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--ai-success);
+}
+
+.ai-chip--warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--ai-warning);
+}
+
+.ai-chip--danger {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--ai-danger);
+}
+
+.ai-chip__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.ai-chip__close:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* ========== Loading States ========== */
+.ai-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ai-loading__spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--ai-border);
+  border-top-color: var(--ai-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.ai-loading__text {
+  font-size: 14px;
+  color: var(--ai-text-secondary);
+}
+
+/* ========== Form Group ========== */
+.ai-form-group {
+  margin-bottom: 16px;
+}
+
+.ai-form-label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ai-text);
+}
+
+.ai-form-label--required::after {
+  content: " *";
+  color: var(--ai-danger);
+}
+
+.ai-form-hint {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ai-text-secondary);
+}
+
+.ai-form-error {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ai-danger);
+}
+
+/* ========== Dark Mode Support ========== */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ai-border: #374151;
+    --ai-text: #f9fafb;
+    --ai-text-secondary: #9ca3af;
+    --ai-bg: #1f2937;
+    --ai-bg-hover: #374151;
+  }
+}