@lobb-js/studio 0.33.0 → 0.35.0

package/dist/components/singletone.svelte

@@ -39,12 +39,12 @@
 </script>
 
 <div class="flex flex-col h-full bg-background">
-    <div class="flex justify-between items-center gap-2 p-2 border-b h-10 shrink-0">
+    <div class="flex justify-between items-center gap-2 p-2 border-b h-12 shrink-0">
         <div class="flex items-center gap-1">
             <SidebarTrigger />
         </div>
         <div>
-            <Button class="h-7 px-2 font-normal text-xs" Icon={Save} onclick={handleSave}>
+            <Button size="sm" Icon={Save} onclick={handleSave}>
                 Save
             </Button>
         </div>

package/dist/components/ui/skeleton/skeleton.svelte

@@ -15,7 +15,7 @@
 <div
 	bind:this={ref}
 	class={cn(
-		"bg-primary/10 animate-pulse rounded-md",
+		"bg-muted animate-pulse rounded-md",
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	{sideOffset}
 	class={cn(
-		"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+		"bg-popover text-popover-foreground border shadow-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
 		className
 	)}
 	{...restProps}

package/dist/components/verticalNav.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
+	import { goto } from "$app/navigation";
+	import Button from "./ui/button/button.svelte";
+	import Separator from "./ui/separator/separator.svelte";
+	import * as Tooltip from "./ui/tooltip";
+	import * as Accordion from "./ui/accordion/index.js";
+	import * as Popover from "./ui/popover";
+	import { getStudioContext } from "../context";
+	import { mediaQueries } from "../utils";
+	import { buildNavSections, isItemActive, type NavItem } from "./mainNavShared";
+
+	const { lobb, ctx } = getStudioContext();
+
+	let isSmallScreen = $derived(!mediaQueries.sm.current);
+	let isCollapsed = $state(true);
+	$effect(() => {
+		isCollapsed = isSmallScreen;
+	});
+
+	let sections: NavItem[][] = $state([[], [], []]);
+	onMount(async () => {
+		sections = await buildNavSections(lobb, ctx);
+	});
+
+	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
+</script>
+
+{#snippet section(section: NavItem[])}
+	<div class="flex flex-col {isSmallScreen ? 'gap-0' : 'gap-2'}">
+		{#each section as item}
+			{@const active = isItemActive(currentPath, item)}
+			{#if isSmallScreen}
+				{#if !item.navs}
+					<Button
+						onclick={() => {
+							if (item.onclick) item.onclick();
+							else if (item.href) goto(item.href);
+							isCollapsed = true;
+						}}
+						class="flex items-center justify-start flex-nowrap text-nowrap h-10 w-full {active
+							? 'bg-accent text-foreground'
+							: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}"
+						variant="ghost"
+						size="icon"
+						Icon={item.icon}
+					>
+						{item.label}
+					</Button>
+				{:else}
+					<Accordion.Root type="single">
+						<Accordion.Item class="border-b-0">
+							<Accordion.Trigger class="justify-between p-0 h-10">
+								<div
+									class="flex items-center gap-2 {active
+										? 'text-accent-foreground'
+										: 'text-foreground/70'}"
+								>
+									<item.icon size="18" />
+									<div class="text-nowrap">{item.label}</div>
+								</div>
+							</Accordion.Trigger>
+							<Accordion.Content class="pl-2 border-l border-border">
+								{#each item.navs as childItem}
+									{@const childActive = isItemActive(currentPath, childItem)}
+									<Button
+										onclick={() => {
+											if (childItem.onclick) childItem.onclick();
+											else if (childItem.href) goto(childItem.href);
+											isCollapsed = true;
+										}}
+										class="flex items-center justify-start flex-nowrap text-nowrap h-8 w-full {childActive
+											? 'bg-accent text-foreground'
+											: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}"
+										variant="ghost"
+										size="icon"
+										Icon={childItem.icon}
+									>
+										{childItem.label}
+									</Button>
+								{/each}
+							</Accordion.Content>
+						</Accordion.Item>
+					</Accordion.Root>
+				{/if}
+			{:else}
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#if !item.navs}
+							<Button
+								onclick={() => { if (item.onclick) item.onclick(); }}
+								href={item.href}
+								class={active
+									? 'bg-accent text-foreground'
+									: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}
+								variant="ghost"
+								size="icon"
+								Icon={item.icon}
+							></Button>
+						{:else}
+							<Popover.Root>
+								<Popover.Trigger>
+									<Button
+										class={active
+											? 'bg-accent text-foreground'
+											: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}
+										variant="ghost"
+										size="icon"
+										Icon={item.icon}
+									></Button>
+								</Popover.Trigger>
+								<Popover.Content sideOffset={17.5} side="right" class="popover_content w-60 mb-4 p-0">
+									<div class="py-1">
+										{#each item.navs as childItem}
+											{@const childActive = isItemActive(currentPath, childItem)}
+											<div class="px-1 text-xs text-muted-foreground">
+												<Button
+													variant="ghost"
+													class="flex h-7 w-full justify-start p-2 text-xs font-normal {childActive
+														? 'bg-accent text-accent-foreground'
+														: 'text-muted-foreground'}"
+													Icon={childItem.icon}
+													onclick={() => { if (childItem.onclick) childItem.onclick(); }}
+													href={childItem.href}
+												>
+													{childItem.label}
+												</Button>
+											</div>
+										{/each}
+									</div>
+								</Popover.Content>
+							</Popover.Root>
+						{/if}
+					</Tooltip.Trigger>
+					<Tooltip.Content side="right" sideOffset={15}>
+						{item.label}
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<div
+	class="
+		{isSmallScreen ? 'fixed top-0 left-0 h-full z-50' : 'relative'}
+		border-r border-border bg-card text-foreground w-screen
+		{isCollapsed
+			? 'max-w-0 p-0'
+			: `max-w-14 ${isSmallScreen ? 'px-3 pb-3' : 'p-2'}`}"
+	style="transition: max-width 150ms, padding 150ms; {isSmallScreen && !isCollapsed ? 'max-width: 100vw' : ''}"
+>
+	{#if isSmallScreen && !isCollapsed}
+		<X
+			class="absolute h-10 text-foreground/70 hover:bg-transparent cursor-pointer hover:text-foreground"
+			style="left: 0.6rem; top: 0rem;"
+			size="18"
+			onclick={() => (isCollapsed = !isCollapsed)}
+		/>
+	{/if}
+	<div class="flex h-full flex-col justify-between gap-2 w-full overflow-hidden">
+		<div class="flex flex-col gap-2 {isSmallScreen ? 'pt-8' : ''}">
+			{@render section(sections[0])}
+			<Separator class="bg-border" />
+			{@render section(sections[1])}
+		</div>
+		<div class="flex flex-col gap-2">
+			<Separator class="bg-border" />
+			{@render section(sections[2])}
+		</div>
+	</div>
+</div>

package/dist/components/verticalNav.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VerticalNav: import("svelte").Component<Record<string, never>, {}, "">;
+type VerticalNav = ReturnType<typeof VerticalNav>;
+export default VerticalNav;

package/dist/components/workflowEditor.svelte

@@ -157,7 +157,7 @@
         <div>
             {#if workflow.id}
                 <Button
-                    class="h-7 px-3 text-xs font-normal w-full"
+                    size="sm" class="w-full"
                     variant="default"
                     onclick={handleUpdateWorkflow}
                     Icon={Edit}
@@ -167,7 +167,7 @@
                 </Button>
             {:else}
                 <Button
-                    class="h-7 px-3 text-xs font-normal w-full"
+                    size="sm" class="w-full"
                     variant="default"
                     onclick={handleCreateWorkflow}
                     Icon={Plus}

package/dist/store.types.d.ts

@@ -30,14 +30,15 @@ interface Collection {
     };
 }
 type Collections = Record<string, Collection>;
-export interface StudioTheme {
+export interface UITheme {
     light?: Record<string, string>;
     dark?: Record<string, string>;
 }
 interface Meta {
     version: string;
-    studio?: {
-        theme?: StudioTheme;
+    ui?: {
+        theme?: UITheme;
+        horizontalNav?: boolean;
     };
     relations: Array<any>;
     collections: Collections;

package/dist/utils.d.ts

@@ -18,6 +18,7 @@ export declare const mediaQueries: {
     xl: MediaQuery;
     '2xl': MediaQuery;
 };
+export declare function getFieldTypeLabel(type: string | undefined | null): string;
 export declare function calculateDrawerWidth(): number;
 export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;
 export declare function parseFunction(functionString: string): any;

package/dist/utils.js

@@ -12,6 +12,18 @@ export const mediaQueries = {
     xl: new MediaQuery('min-width: 1280px'),
     '2xl': new MediaQuery('min-width: 1536px'),
 };
+// User-facing label for a field type. "string"/"text" are jargon to
+// non-technical users, so we surface "Text"/"Long text" instead. Types
+// not in the map fall through to the raw identifier — extend as needed.
+const FIELD_TYPE_LABELS = {
+    string: "Text",
+    text: "Long text",
+};
+export function getFieldTypeLabel(type) {
+    if (!type)
+        return "";
+    return FIELD_TYPE_LABELS[type] ?? type;
+}
 export function calculateDrawerWidth() {
     const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
     const drawersCount = Array.from(backgroundDrawerButtons).length;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.34.0",
+    "@lobb-js/core": "^0.35.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

package/src/app.css

@@ -7,74 +7,62 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.5rem;
+
   --background: oklch(1 0 0);
-  --foreground: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.20 0.012 138);
+
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
+  --card-foreground: oklch(0.20 0.012 138);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
-  --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
-  --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
-  --muted-soft: oklch(0.9904 0.0021 247.896);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
-  --ring: oklch(0.704 0.04 256.788);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
+  --popover-foreground: oklch(0.20 0.012 138);
+
+  /* Brand green — used for primary buttons, focus rings, active accents. */
+  --primary: oklch(0.62 0.18 138);
+  --primary-foreground: oklch(1 0 0);
+
+  --secondary: oklch(0.97 0.001 138);
+  --secondary-foreground: oklch(0.20 0.012 138);
+
+  --muted: oklch(0.97 0.001 138);
+  --muted-foreground: oklch(0.55 0.012 138);
+
+  --accent: oklch(0.95 0.001 138);
+  --accent-foreground: oklch(0.20 0.012 138);
+
+  --destructive: oklch(0.62 0.24 27);
+
+  --border: oklch(0.91 0.001 138);
+  --input: oklch(0.91 0.001 138);
+  --ring: oklch(0.62 0.18 138);
 }
 
 .dark {
-  --background: oklch(0.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --muted-soft: oklch(0.174 0.042 263.3);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --background: oklch(0.16 0.012 138);
+  --foreground: oklch(0.94 0.012 138);
+
+  --card: oklch(0.18 0.012 138);
+  --card-foreground: oklch(0.94 0.012 138);
+  --popover: oklch(0.18 0.012 138);
+  --popover-foreground: oklch(0.94 0.012 138);
+
+  --primary: oklch(0.72 0.20 138);
+  --primary-foreground: oklch(0.16 0.012 138);
+
+  --secondary: oklch(0.24 0.012 138);
+  --secondary-foreground: oklch(0.94 0.012 138);
+
+  --muted: oklch(0.24 0.012 138);
+  --muted-foreground: oklch(0.65 0.012 138);
+
+  --accent: oklch(0.27 0.012 138);
+  --accent-foreground: oklch(0.94 0.012 138);
+
+  --destructive: oklch(0.70 0.22 27);
+
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.72 0.20 138);
 }
 
 @theme inline {
@@ -94,26 +82,12 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
-  --color-muted-soft: var(--muted-soft);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {

package/src/lib/{applyStudioTheme.ts → applyUITheme.ts}

@@ -1,11 +1,11 @@
-import type { StudioTheme } from "./store.types";
+import type { UITheme } from "./store.types";
 
-// Studio theme injection. Writes the configured CSS-variable overrides
-// into a single <style> tag — light overrides under `:root`, dark under
+// UI theme injection. Writes the configured CSS-variable overrides into
+// a single <style> tag — light overrides under `:root`, dark under
 // `.dark` — so each mode picks up its own variant. Idempotent: re-runs
 // replace the previous block.
 
-const STYLE_ID = "lobb-studio-theme";
+const STYLE_ID = "lobb-ui-theme";
 
 function buildDeclarations(vars: Record<string, string> | undefined): string {
     if (!vars) return "";
@@ -17,7 +17,7 @@ function buildDeclarations(vars: Record<string, string> | undefined): string {
     return out.join(" ");
 }
 
-export function applyStudioTheme(theme: StudioTheme | undefined): void {
+export function applyUITheme(theme: UITheme | undefined): void {
     if (typeof document === "undefined") return;
 
     document.getElementById(STYLE_ID)?.remove();

package/src/lib/components/LlmButton.svelte

@@ -16,6 +16,7 @@
 		format?: any;
 		messages?: any[];
 		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
@@ -28,6 +29,7 @@
 		description,
 		placeholder = "write prompt description",
 		variant = "default",
+		size,
 		Icon = Brain,
 		onApiResponseComplete,
 		messages,
@@ -98,7 +100,7 @@
 {#if ctx.meta.extensions.llm && ctx.meta.collections.llm_chat}
 	<Popover.Root bind:open={popoverOpen}>
 		<Popover.Trigger>
-			<Button {variant} class={props.class}>
+			<Button {variant} {size} class={props.class}>
 				{#if loading}
 					<LoaderIcon class="animate-spin" />
 				{:else}
@@ -129,7 +131,7 @@
 				<Button
 					type="submit"
 					Icon={Send}
-					class="h-7 px-3 text-xs font-normal">Submit</Button
+					size="sm">Submit</Button
 				>
 			</form>
 		</Popover.Content>

package/src/lib/components/Studio.svelte

@@ -5,7 +5,7 @@
     import { createLobb } from "../store.svelte";
     import { setStudioContext } from "../context";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import MiniSidebar from "./miniSidebar.svelte";
+    import MainNav from "./mainNav.svelte";
     import * as Tooltip from "./ui/tooltip";
     import { page } from "$app/state";
     import { afterNavigate } from "$app/navigation";
@@ -17,7 +17,7 @@
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
     import { mediaQueries } from "../utils";
-    import { applyStudioTheme } from "../applyStudioTheme";
+    import { applyUITheme } from "../applyUITheme";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
     import Collections from "./routes/collections/collections.svelte";
@@ -44,6 +44,12 @@
 
     let status: "loading" | "error" | "ready" = $state("loading");
     let isSmallScreen = $derived(!mediaQueries.sm.current);
+    // Horizontal nav forces the layout to row mode (top bar instead of
+    // left rail). Falls back to vertical when small-screen mode is on,
+    // since there's no useful horizontal layout below 640px.
+    const horizontalNav = $derived(
+        (ctx.meta as any)?.ui?.horizontalNav === true && !isSmallScreen,
+    );
 
     onMount(async () => {
         // Remove the static loading screen defined in app.html — it shows instantly
@@ -51,7 +57,7 @@
         document.getElementById("app-loading")?.remove();
         try {
             ctx.meta = await lobb.getMeta();
-            applyStudioTheme(ctx.meta.studio?.theme);
+            applyUITheme(ctx.meta.ui?.theme);
             ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
             await executeExtensionsOnStartup(lobb, ctx);
             loadExtensionWorkflows(ctx as any);
@@ -104,11 +110,13 @@
 {:else}
     <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
         <main
-            class="bg-muted h-screen w-screen"
-            style="display: grid; grid-template-columns: {isSmallScreen ? '1fr' : '3.5rem 1fr'};"
+            class="bg-muted h-screen w-screen overflow-hidden"
+            style={horizontalNav
+                ? "display: grid; grid-template-rows: 3rem 1fr;"
+                : `display: grid; grid-template-columns: ${isSmallScreen ? '1fr' : '3.5rem 1fr'};`}
         >
-            <MiniSidebar />
-            <div class="min-h-0 h-screen overflow-hidden">
+            <MainNav orientation={horizontalNav ? "horizontal" : "vertical"} />
+            <div class="min-h-0 h-full overflow-hidden">
                 {#if page.url.pathname.replace(/\/$/, "") === "/studio"}
                     <Home />
                 {:else if page.url.pathname.startsWith("/studio/collections")}

package/src/lib/components/codeEditor.svelte

@@ -132,7 +132,7 @@
 	});
 </script>
 
-<div class={cn('resize-y rounded-md border bg-muted-soft h-60', className)}>
+<div class={cn('resize-y rounded-md border bg-muted h-60', className)}>
 	<div bind:this={editorContainer} class="h-full w-full pl-2" />
 </div>
 

package/src/lib/components/createManyButton.svelte

@@ -90,14 +90,14 @@
 				<Button
 					variant="outline"
 					onclick={() => hideDrawer()}
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={X}
 				>
 					Cancel
 				</Button>
 				<Button
 					variant="default"
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={Plus}
 					onclick={handleCreateMany}
 				>

package/src/lib/components/dataTable/dataTable.svelte

@@ -279,7 +279,7 @@
 
 <div
     bind:clientWidth={dataTableContainerWidth}
-    class="flex flex-col overflow-auto h-full w-full"
+    class="flex flex-col overflow-auto h-full w-full bg-card"
 >
     {#snippet rowActionsSnippet(entry: Record<string, any>)}
         <ExtensionsComponents

package/src/lib/components/dataTable/dataTableTabs.svelte

@@ -44,7 +44,7 @@
 </script>
 
 {#if tabs}
-    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-background">
+    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-card">
         {#each tabs as tab}
             {@const key = tab.id ?? tab.label}
             {@const isActive = activeTab ? activeTab === key : (tab.default ?? tabs[0] === tab)}

package/src/lib/components/dataTable/filter.svelte

@@ -71,7 +71,8 @@
         <Popover.Trigger
             class={buttonVariants({
                 variant: "ghost",
-                class: "h-7 px-2 text-xs font-normal text-muted-foreground",
+                size: "sm",
+                class: "text-muted-foreground",
             })}
         >
             <Plus />
@@ -184,7 +185,7 @@
                                     <Popover.Trigger
                                         class={buttonVariants({
                                             variant: "ghost",
-                                            class: "h-7 px-2 text-xs font-normal",
+                                            size: "sm",
                                         })}
                                     >
                                         <Plus />

package/src/lib/components/dataTable/filterButton.svelte

@@ -21,7 +21,7 @@
 	<Popover.Trigger
 		class={buttonVariants({
 			variant: "ghost",
-			class: "h-7 px-3 text-xs font-normal",
+			size: "sm",
 		})}
 	>
 		<ListFilter />

package/src/lib/components/dataTable/footer.svelte

@@ -27,7 +27,7 @@
 
 <div
     bind:clientWidth={footerWidth}
-    class="flex justify-between box-content border-t bg-background px-2 h-10"
+    class="flex justify-between box-content border-t bg-card px-2 h-10"
 >
     <div class="flex items-center gap-2">
         <Button