@vertesia/tools-admin-ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260305.083323Z

package/src/pages/ToolCollection.tsx

@@ -1,7 +1,9 @@
-import { useFetch } from '@vertesia/ui/core';
+import { Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
 import { useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
 interface ToolDef {
     name: string;
@@ -19,7 +21,7 @@ export function ToolCollection() {
     const collection = useParams('collection');
     const { baseUrl } = useAdminContext();
 
-    const { data, isLoading, error } = useFetch<ToolCollectionResponse>(
+    const { data, error } = useFetch<ToolCollectionResponse>(
         () => fetch(`${baseUrl}/tools/${collection}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
             return r.json();
@@ -27,8 +29,8 @@ export function ToolCollection() {
         [baseUrl, collection]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading collection...</div>;
-    if (error || !data) return <div className="vta-error">Failed to load tool collection &ldquo;{collection}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load tool collection &ldquo;{collection}&rdquo;.</div>;
+    if (!data) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -37,18 +39,22 @@ export function ToolCollection() {
             description={data.description || `${data.tools.length} tool${data.tools.length !== 1 ? 's' : ''} in this collection.`}
         >
             {data.tools.map(tool => (
-                <div key={tool.name} className="vta-detail-card">
-                    <div className="vta-detail-card-header">
-                        <span className="vta-card-type vta-card-type--tool">tool</span>
-                        <div className="vta-card-title">{tool.name}</div>
-                    </div>
-                    <div className="vta-card-desc">{tool.description || 'No description'}</div>
-                    {tool.input_schema && (
-                        <pre className="vta-detail-code">
-                            {JSON.stringify(tool.input_schema, null, 2)}
-                        </pre>
-                    )}
-                </div>
+                <Card key={tool.name} className="mb-4">
+                    <CardContent className="p-5">
+                        <div className="mb-2 flex items-center gap-2">
+                            <span className={`inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.tool}`}>
+                                tool
+                            </span>
+                            <span className="font-semibold text-card-foreground">{tool.name}</span>
+                        </div>
+                        <div className="text-sm text-muted-foreground">{tool.description || 'No description'}</div>
+                        {tool.input_schema && (
+                            <pre className="mt-3 whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
+                                {JSON.stringify(tool.input_schema, null, 2)}
+                            </pre>
+                        )}
+                    </CardContent>
+                </Card>
             ))}
         </DetailPage>
     );

package/src/pages/TypeCollection.tsx

@@ -1,14 +1,16 @@
-import { useFetch } from '@vertesia/ui/core';
-import { useParams, NavLink } from '@vertesia/ui/router';
 import type { InCodeTypeDefinition } from '@vertesia/common';
+import { Badge, Card, CardContent, Spinner, useFetch } from '@vertesia/ui/core';
+import { NavLink, useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
+import { TYPE_VARIANTS } from '../components/typeVariants.js';
 
 export function TypeCollection() {
     const collection = useParams('collection');
     const { baseUrl } = useAdminContext();
 
-    const { data: types, isLoading, error } = useFetch<InCodeTypeDefinition[]>(
+    const { data: types, error } = useFetch<InCodeTypeDefinition[]>(
         () => fetch(`${baseUrl}/types/${collection}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
             return r.json();
@@ -16,8 +18,8 @@ export function TypeCollection() {
         [baseUrl, collection]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading collection...</div>;
-    if (error || !types) return <div className="vta-error">Failed to load type collection &ldquo;{collection}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load type collection &ldquo;{collection}&rdquo;.</div>;
+    if (!types) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -25,32 +27,38 @@ export function TypeCollection() {
             title={collection}
             description={`${types.length} content type${types.length !== 1 ? 's' : ''} in this collection.`}
         >
-            <div className="vta-card-grid">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                 {types.map(t => {
                     const typeName = t.id?.split(':')[1] || t.name;
                     return (
                         <NavLink
                             key={t.name}
                             href={`/types/${collection}/${typeName}`}
-                            className="vta-card-link"
+                            className="no-underline"
                         >
-                            <div className="vta-card vta-card--link">
-                                <span className="vta-card-type vta-card-type--type">type</span>
-                                <div className="vta-card-title">{t.name}</div>
-                                <div className="vta-card-desc">{t.description || 'No description'}</div>
-                                {t.tags && t.tags.length > 0 && (
-                                    <div className="vta-card-tags">
-                                        {t.tags.map(tag => (
-                                            <span key={tag} className="vta-tag">{tag}</span>
-                                        ))}
-                                    </div>
-                                )}
-                                <div className="vta-card-url">
-                                    {t.is_chunkable && 'chunkable'}
-                                    {t.is_chunkable && t.strict_mode && ' · '}
-                                    {t.strict_mode && 'strict'}
-                                </div>
-                            </div>
+                            <Card className="h-full transition-all hover:-translate-y-0.5 hover:shadow-md">
+                                <CardContent className="p-5">
+                                    <span className={`mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.type}`}>
+                                        type
+                                    </span>
+                                    <div className="font-semibold text-card-foreground">{t.name}</div>
+                                    <div className="mt-1 text-sm text-muted-foreground">{t.description || 'No description'}</div>
+                                    {t.tags && t.tags.length > 0 && (
+                                        <div className="mt-3 flex flex-wrap gap-1.5">
+                                            {t.tags.map(tag => (
+                                                <Badge key={tag} variant="default">{tag}</Badge>
+                                            ))}
+                                        </div>
+                                    )}
+                                    {(t.is_chunkable || t.strict_mode) && (
+                                        <div className="mt-2 truncate font-mono text-xs text-muted-foreground">
+                                            {t.is_chunkable && 'chunkable'}
+                                            {t.is_chunkable && t.strict_mode && ' · '}
+                                            {t.strict_mode && 'strict'}
+                                        </div>
+                                    )}
+                                </CardContent>
+                            </Card>
                         </NavLink>
                     );
                 })}

package/src/pages/TypeDetail.tsx

@@ -1,6 +1,7 @@
-import { useFetch } from '@vertesia/ui/core';
-import { useParams } from '@vertesia/ui/router';
 import type { InCodeTypeDefinition } from '@vertesia/common';
+import { Badge, Spinner, useFetch } from '@vertesia/ui/core';
+import { useParams } from '@vertesia/ui/router';
+
 import { useAdminContext } from '../AdminContext.js';
 import { DetailPage } from '../components/DetailPage.js';
 
@@ -10,7 +11,7 @@ export function TypeDetail() {
     const name = params.name;
     const { baseUrl } = useAdminContext();
 
-    const { data: typeDef, isLoading, error } = useFetch<InCodeTypeDefinition>(
+    const { data: typeDef, error } = useFetch<InCodeTypeDefinition>(
         () => fetch(`${baseUrl}/types/${collection}/${name}`).then(r => {
             if (!r.ok) throw new Error(`Failed to load type: ${r.statusText}`);
             return r.json();
@@ -18,8 +19,8 @@ export function TypeDetail() {
         [baseUrl, collection, name]
     );
 
-    if (isLoading) return <div className="vta-loading">Loading type...</div>;
-    if (error || !typeDef) return <div className="vta-error">Failed to load type &ldquo;{name}&rdquo;.</div>;
+    if (error) return <div className="p-6 text-destructive">Failed to load type &ldquo;{name}&rdquo;.</div>;
+    if (!typeDef) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
 
     return (
         <DetailPage
@@ -29,31 +30,28 @@ export function TypeDetail() {
             tags={typeDef.tags}
             backHref={`/types/${collection}`}
         >
-            {/* Flags */}
             {(typeDef.is_chunkable || typeDef.strict_mode) && (
-                <div className="vta-detail-section">
-                    <div className="vta-detail-flags">
-                        {typeDef.is_chunkable && <span className="vta-detail-flag">Chunkable</span>}
-                        {typeDef.strict_mode && <span className="vta-detail-flag">Strict Mode</span>}
+                <div className="mb-8">
+                    <div className="flex flex-wrap gap-2">
+                        {typeDef.is_chunkable && <Badge variant="success">Chunkable</Badge>}
+                        {typeDef.strict_mode && <Badge variant="success">Strict Mode</Badge>}
                     </div>
                 </div>
             )}
 
-            {/* Object Schema */}
             {typeDef.object_schema && (
-                <div className="vta-detail-section">
-                    <h2>Object Schema</h2>
-                    <pre className="vta-detail-code">
+                <div className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Object Schema</h2>
+                    <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
                         {JSON.stringify(typeDef.object_schema, null, 2)}
                     </pre>
                 </div>
             )}
 
-            {/* Table Layout */}
             {typeDef.table_layout && typeDef.table_layout.length > 0 && (
-                <div className="vta-detail-section">
-                    <h2>Table Layout</h2>
-                    <pre className="vta-detail-code">
+                <div className="mb-8">
+                    <h2 className="mb-3 text-lg font-semibold text-foreground">Table Layout</h2>
+                    <pre className="whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground">
                         {JSON.stringify(typeDef.table_layout, null, 2)}
                     </pre>
                 </div>

package/src/theme.css

@@ -0,0 +1,12 @@
+/**
+ * Default theme for @vertesia/tools-admin-ui.
+ *
+ * Consumers should import this file (or provide their own equivalent)
+ * so that @vertesia/ui shadcn components resolve their CSS custom properties.
+ *
+ *   @import '@vertesia/tools-admin-ui/theme.css';
+ */
+
+@import "@vertesia/ui/styles/color.css";
+@import "@vertesia/ui/styles/theme.css";
+@import "@vertesia/ui/styles/utilities.css";