@agent-platform/ui 0.0.11 → 0.0.12

package/dist/components/agent/agent-screen.js

@@ -2,6 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AgentContainer } from './agent-container';
 import { AgentProvider } from './provider';
+import { ensureUiStyles } from '../../styles/ensure-styles';
+ensureUiStyles();
 export function AgentScreen({ agentId, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, toolApprovalLabels, ...containerProps }) {
     return (_jsx(AgentProvider, { agentId: agentId, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, toolApprovalLabels: toolApprovalLabels, children: _jsx(AgentContainer, { ...containerProps }) }));
 }

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-import './styles/globals.css';
 export { AgentScreen } from './components/agent';
 export type { AgentScreenProps, AgentHomeCardProps } from './components/agent';

package/dist/index.js

@@ -1,2 +1,3 @@
-import './styles/globals.css';
+import { ensureUiStyles } from './styles/ensure-styles';
+ensureUiStyles();
 export { AgentScreen } from './components/agent';

package/dist/styles/ensure-styles.d.ts

@@ -0,0 +1,21 @@
+export declare const STYLE_LINK_ATTRIBUTE = "data-agent-platform-ui";
+export declare const STYLE_LINK_VALUE = "globals";
+export declare const STYLE_LINK_SELECTOR = "link[data-agent-platform-ui=\"globals\"]";
+type StylesheetLinkElement = {
+    setAttribute: (name: string, value: string) => void;
+    rel: string;
+    href: string;
+};
+type EnsureStylesDocument = {
+    createElement: (tagName: 'link') => StylesheetLinkElement;
+    querySelector: (selector: string) => unknown;
+    head: {
+        appendChild: (node: StylesheetLinkElement) => void;
+    };
+};
+type EnsureUiStylesOptions = {
+    document?: EnsureStylesDocument;
+    hrefResolver?: () => string;
+};
+export declare function ensureUiStyles(options?: EnsureUiStylesOptions): void;
+export {};

package/dist/styles/ensure-styles.js

@@ -0,0 +1,22 @@
+export const STYLE_LINK_ATTRIBUTE = 'data-agent-platform-ui';
+export const STYLE_LINK_VALUE = 'globals';
+export const STYLE_LINK_SELECTOR = `link[${STYLE_LINK_ATTRIBUTE}="${STYLE_LINK_VALUE}"]`;
+function resolveStylesheetHref() {
+    return new URL('./globals.css', import.meta.url).toString();
+}
+export function ensureUiStyles(options = {}) {
+    const documentRef = options.document ??
+        globalThis.document;
+    if (!documentRef) {
+        return;
+    }
+    const existingLink = documentRef.querySelector(STYLE_LINK_SELECTOR);
+    if (existingLink) {
+        return;
+    }
+    const stylesheetLink = documentRef.createElement('link');
+    stylesheetLink.setAttribute(STYLE_LINK_ATTRIBUTE, STYLE_LINK_VALUE);
+    stylesheetLink.rel = 'stylesheet';
+    stylesheetLink.href = options.hrefResolver?.() ?? resolveStylesheetHref();
+    documentRef.head.appendChild(stylesheetLink);
+}

package/dist/styles/globals.css

@@ -33,13 +33,19 @@
     --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --leading-relaxed: 1.625;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
   }
 }
 @layer base {
@@ -248,6 +254,9 @@
   .flex {
     display: flex;
   }
+  .inline {
+    display: inline;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -426,10 +435,10 @@
     border-radius: calc(infinity * 1px);
   }
   .rounded-lg {
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
   }
   .rounded-md {
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
   }
   .border {
     border-style: var(--tw-border-style);
@@ -447,18 +456,81 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-border {
+    border-color: var(--border);
+  }
+  .border-input {
+    border-color: var(--input);
+  }
+  .border-primary {
+    border-color: var(--primary);
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
+  .bg-background {
+    background-color: var(--background);
+  }
+  .bg-background\/50 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 50%, transparent);
+    }
+  }
+  .bg-card {
+    background-color: var(--card);
+  }
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+  .bg-destructive\/10 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+  .bg-foreground {
+    background-color: var(--foreground);
+  }
   .bg-green-50 {
     background-color: var(--color-green-50);
   }
+  .bg-muted {
+    background-color: var(--muted);
+  }
+  .bg-muted-foreground\/50 {
+    background-color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
+    }
+  }
+  .bg-muted\/50 {
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+  .bg-primary {
+    background-color: var(--primary);
+  }
+  .bg-primary-foreground {
+    background-color: var(--primary-foreground);
+  }
+  .bg-primary\/10 {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -583,12 +655,36 @@
   .text-amber-700 {
     color: var(--color-amber-700);
   }
+  .text-background {
+    color: var(--background);
+  }
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
+  .text-destructive {
+    color: var(--destructive);
+  }
+  .text-foreground {
+    color: var(--foreground);
+  }
   .text-green-600 {
     color: var(--color-green-600);
   }
+  .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+  .text-primary {
+    color: var(--primary);
+  }
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
   .text-red-600 {
     color: var(--color-red-600);
   }
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -638,6 +734,11 @@
   .\[publish\:check-auth\] {
     publish: check-auth;
   }
+  .placeholder\:text-muted-foreground {
+    &::placeholder {
+      color: var(--muted-foreground);
+    }
+  }
   .first\:mt-0 {
     &:first-child {
       margin-top: calc(var(--spacing) * 0);
@@ -648,6 +749,87 @@
       margin-bottom: calc(var(--spacing) * 0);
     }
   }
+  .hover\:border-primary\/30 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--primary) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+      }
+    }
+  }
+  .hover\:bg-destructive\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-foreground\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--foreground);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--foreground) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-secondary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--secondary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
+    }
+  }
+  .hover\:text-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
+      }
+    }
+  }
+  .hover\:text-primary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--primary) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -661,6 +843,11 @@
       border-width: 0px;
     }
   }
+  .focus-visible\:border-ring {
+    &:focus-visible {
+      border-color: var(--ring);
+    }
+  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -673,6 +860,27 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-destructive\/20 {
+    &:focus-visible {
+      --tw-ring-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+  }
+  .focus-visible\:ring-ring\/50 {
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -714,32 +922,110 @@
       padding-inline: calc(var(--spacing) * 4);
     }
   }
+  .aria-invalid\:border-destructive {
+    &[aria-invalid="true"] {
+      border-color: var(--destructive);
+    }
+  }
+  .aria-invalid\:ring-destructive\/20 {
+    &[aria-invalid="true"] {
+      --tw-ring-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      }
+    }
+  }
   .md\:text-sm {
     @media (width >= 48rem) {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
+  .dark\:border-input {
+    &:is(.dark *) {
+      border-color: var(--input);
+    }
+  }
   .dark\:bg-amber-950 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       background-color: var(--color-amber-950);
     }
   }
+  .dark\:bg-destructive\/60 {
+    &:is(.dark *) {
+      background-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+      }
+    }
+  }
   .dark\:bg-green-950 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       background-color: var(--color-green-950);
     }
   }
+  .dark\:bg-input\/30 {
+    &:is(.dark *) {
+      background-color: var(--input);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--input) 30%, transparent);
+      }
+    }
+  }
   .dark\:text-amber-300 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       color: var(--color-amber-300);
     }
   }
   .dark\:text-green-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       color: var(--color-green-400);
     }
   }
+  .dark\:hover\:bg-accent\/50 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--accent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .dark\:hover\:bg-input\/50 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--input);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--input) 50%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .dark\:focus-visible\:ring-destructive\/40 {
+    &:is(.dark *) {
+      &:focus-visible {
+        --tw-ring-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+        }
+      }
+    }
+  }
+  .dark\:aria-invalid\:ring-destructive\/40 {
+    &:is(.dark *) {
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+        }
+      }
+    }
+  }
   .\[\&_svg\]\:pointer-events-none {
     & svg {
       pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-platform/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "private": false,
   "type": "module",
   "sideEffects": [