@dbx-tools/ui-appkit 0.1.2

package/README.md

@@ -0,0 +1,71 @@
+# @dbx-tools/ui-appkit
+
+Shared React/Vite/Tailwind foundation for AppKit-oriented UI packages.
+
+Import this package when a React client or feature UI package needs the same
+Vite plugin setup and base stylesheet used by dbx-tools AppKit UI components.
+It centralizes React refresh, Tailwind v4, Streamdown base styles, and a shiki
+token paint shim for streamed markdown/code output.
+
+Key features:
+
+- Shared Vite plugin factory for React and Tailwind v4.
+- Stable `@dbx-tools/ui-appkit/react` re-export of AppKit's React component
+  primitives for feature packages.
+- AppKit UI stylesheet import path for host applications and feature packages.
+- Streamdown/code-block styling used by streaming chat and Markdown surfaces.
+- One place to evolve UI build assumptions for feature packages such as
+  [`@dbx-tools/ui-email`](../email) and [`@dbx-tools/ui-mastra`](../mastra).
+
+## Why Not Just AppKit UI?
+
+Use `@databricks/appkit-ui` directly in app code when you only need AppKit's
+components and hooks. This package exists for dbx-tools feature packages and
+hosts that want one stable import path for AppKit primitives, React/Tailwind Vite
+setup, Streamdown/shiki styling, and Tailwind source registration.
+
+## Configure Vite
+
+```ts
+import { appkitUiVitePlugins } from "@dbx-tools/ui-appkit/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: appkitUiVitePlugins(),
+});
+```
+
+`vite.appkitUiVitePlugins()` returns the React plugin and Tailwind v4 plugin.
+Using it keeps host applications and feature packages on the same Vite/Tailwind
+integration.
+
+## Import Styles
+
+```css
+@import "@databricks/appkit-ui/styles.css";
+@import "@dbx-tools/ui-appkit/styles.css";
+```
+
+The stylesheet imports Tailwind and Streamdown styles, then adds the shiki CSS
+variable shim used by Streamdown code-block spans. Feature UI packages should
+import this once and add their own `@source` directives for local class names.
+
+## Build Feature UI Packages
+
+Feature packages should depend on this package instead of each owning their own
+Tailwind and Streamdown base setup. That gives downstream host apps one place to
+look for:
+
+- Vite plugin defaults;
+- shared markdown/code styling;
+- AppKit UI peer assumptions;
+- future shared React utilities.
+
+## Module
+
+- `./vite` - `appkitUiVitePlugins()` for React + Tailwind v4 Vite projects.
+- `./react` - AppKit React UI kit re-export for feature packages and hosts.
+- `./styles.css` - Tailwind/Streamdown/shiki base stylesheet.
+
+App-specific React components should live in feature UI packages that import this
+foundation.

package/index.ts

@@ -0,0 +1,5 @@
+// GENERATED by projen watch - DO NOT EDIT.
+// Regenerated from the exporting modules in ./src.
+// Hand edits are overwritten on the next watch; this file is read-only.
+
+export * as vite from "./src/vite";

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@dbx-tools/ui-appkit",
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "tsx": "^4.23.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.14"
+  },
+  "dependencies": {
+    "@databricks/appkit-ui": "^0.43.1",
+    "@tailwindcss/vite": "^4.3.1",
+    "@vitejs/plugin-react": "^5.0.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "streamdown": "^2.5.0",
+    "tailwindcss": "^4.3.2",
+    "@dbx-tools/shared-core": "0.1.2"
+  },
+  "main": "index.ts",
+  "license": "UNLICENSED",
+  "version": "0.1.2",
+  "types": "index.ts",
+  "type": "module",
+  "exports": {
+    "./react": "./src/react/index.ts",
+    "./vite": "./src/vite.ts",
+    "./styles.css": "./src/styles.css",
+    "./package.json": "./package.json"
+  },
+  "dbxToolsConfig": {
+    "tags": [
+      "ui"
+    ]
+  },
+  "//": "~~ Generated by projen. To modify, edit .projenrc.js and run \"pnpm exec projen\".",
+  "scripts": {
+    "build": "projen build",
+    "compile": "projen compile",
+    "default": "projen default",
+    "package": "projen package",
+    "post-compile": "projen post-compile",
+    "pre-compile": "projen pre-compile",
+    "test": "projen test",
+    "watch": "projen watch",
+    "projen": "projen"
+  }
+}

package/src/react/index.ts

@@ -0,0 +1,6 @@
+// Re-export of AppKit's React UI kit so the `@dbx-tools/*` UI packages import
+// their primitives (Button, Input, cn, etc.) through one stable specifier -
+// `@dbx-tools/ui-appkit/react` - and resolve AppKit + React from this package's
+// dependencies rather than each consumer's.
+
+export * from "@databricks/appkit-ui/react";

package/src/styles.css

@@ -0,0 +1,19 @@
+/*
+ * @dbx-tools/ui-appkit shared stylesheet.
+ *
+ * Feature UI packages (`ui-email`, `ui-mastra`, ...) import
+ * this once and add their own `@source` for local class strings.
+ *
+ * Provides:
+ *   1. Streamdown's base stylesheet (markdown / code-block layout).
+ *   2. The shiki token-paint shim used by Streamdown renderers.
+ */
+
+@import "tailwindcss";
+@import "streamdown/styles.css";
+
+@source "./react";
+
+[data-streamdown="code-block-body"] code span {
+  color: var(--sdm-c, inherit);
+}

package/src/vite.ts

@@ -0,0 +1,13 @@
+/**
+ * Default Vite plugins for host apps building `@dbx-tools/*` UI packages.
+ * Import from `@dbx-tools/ui-appkit/vite` so Tailwind and React refresh resolve
+ * from this package's dependencies, not the host's.
+ */
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import type { PluginOption } from "vite";
+
+/** React + Tailwind v4 plugins for a standard AppKit UI Vite app. */
+export function appkitUiVitePlugins(): PluginOption[] {
+  return [react(), tailwindcss()];
+}

package/tsconfig.json

@@ -0,0 +1,43 @@
+// ~~ Generated by projen. To modify, edit .projenrc.js and run "pnpm exec projen".
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib",
+    "alwaysStrict": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "noEmitOnError": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "stripInternal": true,
+    "target": "ES2022",
+    "types": [],
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}