@databricks/appkit-ui 0.1.2 → 0.1.4

package/dist/react/ui/sidebar.d.ts

@@ -3,7 +3,7 @@ import { Separator } from "./separator.js";
 import { Input } from "./input.js";
 import { TooltipContent } from "./tooltip.js";
 import * as React from "react";
-import * as react_jsx_runtime229 from "react/jsx-runtime";
+import * as react_jsx_runtime225 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types10 from "class-variance-authority/types";
 
@@ -30,7 +30,7 @@ declare function SidebarProvider({
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-}): react_jsx_runtime229.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 declare function Sidebar({
   side,
   variant,
@@ -42,70 +42,70 @@ declare function Sidebar({
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
-}): react_jsx_runtime229.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 declare function SidebarTrigger({
   className,
   onClick,
   ...props
-}: React.ComponentProps<typeof Button>): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<typeof Button>): react_jsx_runtime225.JSX.Element;
 declare function SidebarRail({
   className,
   ...props
-}: React.ComponentProps<"button">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"button">): react_jsx_runtime225.JSX.Element;
 declare function SidebarInset({
   className,
   ...props
-}: React.ComponentProps<"main">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"main">): react_jsx_runtime225.JSX.Element;
 declare function SidebarInput({
   className,
   ...props
-}: React.ComponentProps<typeof Input>): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<typeof Input>): react_jsx_runtime225.JSX.Element;
 declare function SidebarHeader({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 declare function SidebarFooter({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 declare function SidebarSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Separator>): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<typeof Separator>): react_jsx_runtime225.JSX.Element;
 declare function SidebarContent({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 declare function SidebarGroup({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 declare function SidebarGroupLabel({
   className,
   asChild,
   ...props
 }: React.ComponentProps<"div"> & {
   asChild?: boolean;
-}): react_jsx_runtime229.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 declare function SidebarGroupAction({
   className,
   asChild,
   ...props
 }: React.ComponentProps<"button"> & {
   asChild?: boolean;
-}): react_jsx_runtime229.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 declare function SidebarGroupContent({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenu({
   className,
   ...props
-}: React.ComponentProps<"ul">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"ul">): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenuItem({
   className,
   ...props
-}: React.ComponentProps<"li">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"li">): react_jsx_runtime225.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "default" | "sm" | "lg" | null | undefined;
@@ -122,7 +122,7 @@ declare function SidebarMenuButton({
   asChild?: boolean;
   isActive?: boolean;
   tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime229.JSX.Element;
+} & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenuAction({
   className,
   asChild,
@@ -131,26 +131,26 @@ declare function SidebarMenuAction({
 }: React.ComponentProps<"button"> & {
   asChild?: boolean;
   showOnHover?: boolean;
-}): react_jsx_runtime229.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenuBadge({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenuSkeleton({
   className,
   showIcon,
   ...props
 }: React.ComponentProps<"div"> & {
   showIcon?: boolean;
-}): react_jsx_runtime229.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenuSub({
   className,
   ...props
-}: React.ComponentProps<"ul">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"ul">): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenuSubItem({
   className,
   ...props
-}: React.ComponentProps<"li">): react_jsx_runtime229.JSX.Element;
+}: React.ComponentProps<"li">): react_jsx_runtime225.JSX.Element;
 declare function SidebarMenuSubButton({
   asChild,
   size,
@@ -161,7 +161,7 @@ declare function SidebarMenuSubButton({
   asChild?: boolean;
   size?: "sm" | "md";
   isActive?: boolean;
-}): react_jsx_runtime229.JSX.Element;
+}): react_jsx_runtime225.JSX.Element;
 //#endregion
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/react/ui/skeleton.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime252 from "react/jsx-runtime";
+import * as react_jsx_runtime248 from "react/jsx-runtime";
 
 //#region src/react/ui/skeleton.d.ts
 declare function Skeleton({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime252.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime248.JSX.Element;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/react/ui/slider.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime253 from "react/jsx-runtime";
+import * as react_jsx_runtime249 from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
 //#region src/react/ui/slider.d.ts
@@ -10,7 +10,7 @@ declare function Slider({
   min,
   max,
   ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime253.JSX.Element;
+}: React.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime249.JSX.Element;
 //#endregion
 export { Slider };
 //# sourceMappingURL=slider.d.ts.map

package/dist/react/ui/sonner.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime254 from "react/jsx-runtime";
+import * as react_jsx_runtime250 from "react/jsx-runtime";
 import { ToasterProps } from "sonner";
 
 //#region src/react/ui/sonner.d.ts
 declare const Toaster$1: ({
   ...props
-}: ToasterProps) => react_jsx_runtime254.JSX.Element;
+}: ToasterProps) => react_jsx_runtime250.JSX.Element;
 //#endregion
 export { Toaster$1 as Toaster };
 //# sourceMappingURL=sonner.d.ts.map

package/dist/react/ui/spinner.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime255 from "react/jsx-runtime";
+import * as react_jsx_runtime251 from "react/jsx-runtime";
 
 //#region src/react/ui/spinner.d.ts
 declare function Spinner({
   className,
   ...props
-}: React.ComponentProps<"svg">): react_jsx_runtime255.JSX.Element;
+}: React.ComponentProps<"svg">): react_jsx_runtime251.JSX.Element;
 //#endregion
 export { Spinner };
 //# sourceMappingURL=spinner.d.ts.map

package/dist/react/ui/switch.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
-import * as react_jsx_runtime256 from "react/jsx-runtime";
+import * as react_jsx_runtime252 from "react/jsx-runtime";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 
 //#region src/react/ui/switch.d.ts
 declare function Switch({
   className,
   ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime256.JSX.Element;
+}: React.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime252.JSX.Element;
 //#endregion
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/react/ui/table.d.ts

@@ -1,39 +1,39 @@
 import * as React from "react";
-import * as react_jsx_runtime257 from "react/jsx-runtime";
+import * as react_jsx_runtime253 from "react/jsx-runtime";
 
 //#region src/react/ui/table.d.ts
 declare function Table({
   className,
   ...props
-}: React.ComponentProps<"table">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"table">): react_jsx_runtime253.JSX.Element;
 declare function TableHeader({
   className,
   ...props
-}: React.ComponentProps<"thead">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"thead">): react_jsx_runtime253.JSX.Element;
 declare function TableBody({
   className,
   ...props
-}: React.ComponentProps<"tbody">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"tbody">): react_jsx_runtime253.JSX.Element;
 declare function TableFooter({
   className,
   ...props
-}: React.ComponentProps<"tfoot">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"tfoot">): react_jsx_runtime253.JSX.Element;
 declare function TableRow({
   className,
   ...props
-}: React.ComponentProps<"tr">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"tr">): react_jsx_runtime253.JSX.Element;
 declare function TableHead({
   className,
   ...props
-}: React.ComponentProps<"th">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"th">): react_jsx_runtime253.JSX.Element;
 declare function TableCell({
   className,
   ...props
-}: React.ComponentProps<"td">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"td">): react_jsx_runtime253.JSX.Element;
 declare function TableCaption({
   className,
   ...props
-}: React.ComponentProps<"caption">): react_jsx_runtime257.JSX.Element;
+}: React.ComponentProps<"caption">): react_jsx_runtime253.JSX.Element;
 //#endregion
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 //# sourceMappingURL=table.d.ts.map

package/dist/react/ui/tabs.d.ts

@@ -1,24 +1,24 @@
 import * as React from "react";
-import * as react_jsx_runtime265 from "react/jsx-runtime";
+import * as react_jsx_runtime261 from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 //#region src/react/ui/tabs.d.ts
 declare function Tabs({
   className,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime265.JSX.Element;
+}: React.ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime261.JSX.Element;
 declare function TabsList({
   className,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>): react_jsx_runtime265.JSX.Element;
+}: React.ComponentProps<typeof TabsPrimitive.List>): react_jsx_runtime261.JSX.Element;
 declare function TabsTrigger({
   className,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime265.JSX.Element;
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime261.JSX.Element;
 declare function TabsContent({
   className,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime265.JSX.Element;
+}: React.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime261.JSX.Element;
 //#endregion
 export { Tabs, TabsContent, TabsList, TabsTrigger };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/react/ui/textarea.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
-import * as react_jsx_runtime269 from "react/jsx-runtime";
+import * as react_jsx_runtime265 from "react/jsx-runtime";
 
 //#region src/react/ui/textarea.d.ts
 declare function Textarea({
   className,
   ...props
-}: React.ComponentProps<"textarea">): react_jsx_runtime269.JSX.Element;
+}: React.ComponentProps<"textarea">): react_jsx_runtime265.JSX.Element;
 //#endregion
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

package/dist/react/ui/toggle-group.d.ts

@@ -1,6 +1,6 @@
 import { toggleVariants } from "./toggle.js";
 import * as React from "react";
-import * as react_jsx_runtime271 from "react/jsx-runtime";
+import * as react_jsx_runtime267 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 
@@ -14,14 +14,14 @@ declare function ToggleGroup({
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
   spacing?: number;
-}): react_jsx_runtime271.JSX.Element;
+}): react_jsx_runtime267.JSX.Element;
 declare function ToggleGroupItem({
   className,
   children,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime271.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime267.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/react/ui/toggle.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime270 from "react/jsx-runtime";
+import * as react_jsx_runtime266 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import * as class_variance_authority_types11 from "class-variance-authority/types";
@@ -14,7 +14,7 @@ declare function Toggle({
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime270.JSX.Element;
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime266.JSX.Element;
 //#endregion
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.ts.map

package/dist/react/ui/tooltip.d.ts

@@ -1,24 +1,24 @@
 import * as React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime269 from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 //#region src/react/ui/tooltip.d.ts
 declare function TooltipProvider({
   delayDuration,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime269.JSX.Element;
 declare function Tooltip({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime269.JSX.Element;
 declare function TooltipTrigger({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime269.JSX.Element;
 declare function TooltipContent({
   className,
   sideOffset,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime269.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/react/ui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../../src/react/ui/tooltip.tsx"],"sourcesContent":[],"mappings":";;;;;iBAOS,eAAA;;;GAGN,KAAA,CAAM,sBAAsB,gBAAA,CAAiB,YAAS,kBAAA,CAAA,GAAA,CAAA;iBAUhD,OAAA;;GAEN,KAAA,CAAM,sBAAsB,gBAAA,CAAiB,QAAK,kBAAA,CAAA,GAAA,CAAA;iBAQ5C,cAAA;;GAEN,KAAA,CAAM,sBAAsB,gBAAA,CAAiB,WAAQ,kBAAA,CAAA,GAAA,CAAA;AA7BI,iBAiCnD,cAAA,CA7Be;EAAA,SAAA;EAAA,UAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAkCrB,KAAA,CAAM,cAlCe,CAAA,OAkCO,gBAAA,CAAiB,OAlCxB,CAAA,CAAA,EAkCgC,kBAAA,CAAA,GAAA,CAAA,OAlChC"}
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../../src/react/ui/tooltip.tsx"],"sourcesContent":[],"mappings":";;;;;iBAOS,eAAA;;;GAGN,KAAA,CAAM,sBAAsB,gBAAA,CAAiB,YAAS,oBAAA,CAAA,GAAA,CAAA;iBAUhD,OAAA;;GAEN,KAAA,CAAM,sBAAsB,gBAAA,CAAiB,QAAK,oBAAA,CAAA,GAAA,CAAA;iBAQ5C,cAAA;;GAEN,KAAA,CAAM,sBAAsB,gBAAA,CAAiB,WAAQ,oBAAA,CAAA,GAAA,CAAA;AA7BI,iBAiCnD,cAAA,CA7Be;EAAA,SAAA;EAAA,UAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAkCrB,KAAA,CAAM,cAlCe,CAAA,OAkCO,gBAAA,CAAiB,OAlCxB,CAAA,CAAA,EAkCgC,oBAAA,CAAA,GAAA,CAAA,OAlChC"}

package/llms.txt

@@ -75,46 +75,24 @@ Why this layout:
     "dev": "NODE_ENV=development tsx watch server/index.ts",
     "build": "npm run build:server && npm run build:client",
     "build:server": "tsdown --out-dir build server/index.ts",
-    "build:client": "cd client && npm run build",
+    "build:client": "tsc -b && vite build --config client/vite.config.ts",
     "start": "node build/index.mjs"
   },
   "dependencies": {
-    "@databricks/appkit": "^0.0.2"
+    "@databricks/appkit": "^0.1.2"
+    "@databricks/appkit-ui": "^0.1.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "tsdown": "^0.15.7",
     "tsx": "^4.19.0",
-    "typescript": "~5.6.0"
-  }
-}
-```
-
-### `client/package.json`
-
-```json
-{
-  "name": "client",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@databricks/appkit-ui": "^0.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "recharts": "^3.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^5.0.0",
     "typescript": "~5.6.0",
-    "vite": "^6.0.0"
+    "vite": "^7.2.4"
   }
 }
 ```
@@ -208,7 +186,6 @@ await createApp({
 ```bash
 # Install dependencies
 npm install
-cd client && npm install && cd ..
 
 # Development (starts backend + Vite dev server)
 npm run dev
@@ -225,19 +202,14 @@ If you already have a React/Vite app and want to add AppKit:
 ### 1. Install dependencies
 
 ```bash
-npm install @databricks/appkit
-npm install -D tsx tsdown
+npm install @databricks/appkit @databricks/appkit-ui react react-dom
+npm install -D tsx tsdown vite @vitejs/plugin-react typescript
 
 # If you don't already have a client/ folder, create one and move your Vite app into it:
 # - move index.html -> client/index.html
 # - move vite.config.ts -> client/vite.config.ts
 # - move src/ -> client/src/
 #
-# Then install client deps:
-cd client
-npm install @databricks/appkit-ui react react-dom recharts
-npm install -D vite @vitejs/plugin-react typescript
-cd ..
 ```
 
 ### 2. Create `server/index.ts` (new file)
@@ -258,7 +230,7 @@ await createApp({
     "dev": "NODE_ENV=development tsx watch server/index.ts",
     "build": "npm run build:server && npm run build:client",
     "build:server": "tsdown --out-dir build server/index.ts",
-    "build:client": "cd client && npm run build",
+    "build:client": "tsc -b && vite build --config client/vite.config.ts",
     "start": "node build/index.mjs"
   }
 }
@@ -276,7 +248,7 @@ await createApp({
 import { createApp, server, analytics } from "@databricks/appkit";
 
 await createApp({
-  plugins: [server(), analytics({})],
+  plugins: [server(), analytics()],
 });
 ```
 
@@ -312,13 +284,17 @@ These are typically **provided by Databricks Apps runtime** (exact set can vary
 
 For local development, you need to authenticate with Databricks. Options:
 
-**Option 1: Databricks CLI profile (recommended)**
+**Option 1: Databricks CLI Auth (recommended)**
 
 ```bash
 # Configure once
-databricks configure --profile my-profile
+databricks auth login --host [host] --profile [profile-name]
+
+# If you used `DEFAULT` as the profile name then you can just run
 
-# Then run with profile
+`npm run dev`
+
+# To run with a specific profile
 DATABRICKS_CONFIG_PROFILE=my-profile npm run dev
 # If your Databricks SDK expects a different variable name, try:
 # DATABRICKS_PROFILE=my-profile npm run dev
@@ -462,7 +438,7 @@ HTTP endpoints exposed (mounted under `/api/analytics`):
 Formats:
 
 - `format: "JSON"` (default) returns JSON rows
-- `format: "ARROW"` returns an Arrow “external links” payload over SSE, then the client fetches binary Arrow from `/api/analytics/arrow-result/:jobId`
+- `format: "ARROW"` returns an Arrow “statement_id” payload over SSE, then the client fetches binary Arrow from `/api/analytics/arrow-result/:jobId`
 
 ### Request context (`getRequestContext()`)
 
@@ -980,6 +956,108 @@ function LoadingCard() {
 }
 ```
 
+## Stylesheet
+
+In the main css file import the following
+
+```css
+@import "@databricks/appkit-ui/styles.css";
+```
+
+That will provide a default theme for the app using css variables.
+
+### Customizing theme (light/dark mode)
+
+- Full list of variables to customize the theme.
+
+```css
+@import "@databricks/appkit-ui/styles.css";
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.603 0.135 166.892);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.795 0.157 78.748);
+  --warning-foreground: oklch(0.199 0.027 238.732);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --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.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.92 0.004 286.32);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --success: oklch(0.67 0.12 167);
+    --success-foreground: oklch(1 0 0);
+    --warning: oklch(0.83 0.165 85);
+    --warning-foreground: oklch(0.199 0.027 238.732);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.552 0.016 285.938);
+    --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.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.552 0.016 285.938);
+  }
+}
+
+```
+
+- If any variable is changed, it must be changed for both light and dark mode.
+
 ## Type generation (QueryRegistry + IntelliSense)
 
 Goal: generate `client/src/appKitTypes.d.ts` so query keys, params, and result rows are type-safe.
@@ -1054,7 +1132,6 @@ env:
   - `tsx` is in devDependencies for dev server
   - `dev` script uses `NODE_ENV=development tsx watch server/index.ts`
   - `client/index.html` exists with `<div id="root"></div>` and script pointing to `client/src/main.tsx`
-  - `client/package.json` exists and includes `@databricks/appkit-ui`
 
 - **Backend**
   - `await createApp({ plugins: [...] })` is used (or `void createApp` with intent)