aidos-ui 4.0.1 → 4.0.3

package/dist/vite-plugin-jss-debug.js

@@ -0,0 +1,74 @@
+import path from "path";
+/**
+ * Vite plugin that enables JSS debug tooling:
+ *
+ * 1. Injects component names into toClassnames() calls so they appear as CSS classes.
+ *    toClassnames(jss) → toClassnames(jss, "Card")
+ *
+ * 2. Configures the custom JSX dev runtime that injects <!-- ComponentName -->
+ *    HTML comments at component boundaries (same approach as the Next.js setup).
+ *
+ * Usage in vite.config.ts:
+ *   import jssDebug from "aidos-ui/vite-plugin-jss-debug";
+ *   export default defineConfig({ plugins: [jssDebug()] });
+ */
+export default function jssDebug() {
+    return [
+        {
+            name: "jss-debug-jsx",
+            config() {
+                return {
+                    esbuild: {
+                        jsx: "automatic",
+                        jsxDev: true,
+                        jsxImportSource: "aidos-ui",
+                    },
+                };
+            },
+        },
+        {
+            name: "jss-debug-classnames",
+            enforce: "pre",
+            transform(code, id) {
+                if (id.includes("node_modules"))
+                    return;
+                if (!id.match(/\.[jt]sx?$/))
+                    return;
+                if (!code.includes("toClassnames("))
+                    return;
+                const filename = path.basename(id, path.extname(id));
+                const name = JSON.stringify(filename);
+                const needle = "toClassnames(";
+                let result = "";
+                let i = 0;
+                while (i < code.length) {
+                    const idx = code.indexOf(needle, i);
+                    if (idx === -1) {
+                        result += code.slice(i);
+                        break;
+                    }
+                    // Copy everything up to and including "toClassnames("
+                    result += code.slice(i, idx + needle.length);
+                    i = idx + needle.length;
+                    // Track parens to find the matching closing )
+                    let depth = 1;
+                    let j = i;
+                    while (j < code.length && depth > 0) {
+                        const ch = code[j];
+                        if (ch === "(")
+                            depth++;
+                        else if (ch === ")")
+                            depth--;
+                        if (depth > 0)
+                            j++;
+                    }
+                    // Copy the original arguments, then inject the component name
+                    result += code.slice(i, j) + ", " + name;
+                    i = j;
+                }
+                return { code: result, map: null };
+            },
+        },
+    ];
+}
+//# sourceMappingURL=vite-plugin-jss-debug.js.map

package/dist/vite-plugin-jss-debug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin-jss-debug.js","sourceRoot":"","sources":["../src/vite-plugin-jss-debug.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,OAAO;QACL;YACE,IAAI,EAAE,eAAe;YACrB,MAAM;gBACJ,OAAO;oBACL,OAAO,EAAE;wBACP,GAAG,EAAE,WAAW;wBAChB,MAAM,EAAE,IAAI;wBACZ,eAAe,EAAE,UAAU;qBAC5B;iBACF,CAAC;YACJ,CAAC;SACF;QACD;YACE,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE,KAAc;YAEvB,SAAS,CAAC,IAAY,EAAE,EAAU;gBAChC,IAAI,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;oBAAE,OAAO;gBACxC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC;oBAAE,OAAO;gBACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC;oBAAE,OAAO;gBAE5C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;gBACrD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACtC,MAAM,MAAM,GAAG,eAAe,CAAC;gBAC/B,IAAI,MAAM,GAAG,EAAE,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEV,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;oBACvB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBACpC,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC;wBACf,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;wBACxB,MAAM;oBACR,CAAC;oBAED,sDAAsD;oBACtD,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;oBAC7C,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC;oBAExB,8CAA8C;oBAC9C,IAAI,KAAK,GAAG,CAAC,CAAC;oBACd,IAAI,CAAC,GAAG,CAAC,CAAC;oBACV,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;wBACpC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;wBACnB,IAAI,EAAE,KAAK,GAAG;4BAAE,KAAK,EAAE,CAAC;6BACnB,IAAI,EAAE,KAAK,GAAG;4BAAE,KAAK,EAAE,CAAC;wBAC7B,IAAI,KAAK,GAAG,CAAC;4BAAE,CAAC,EAAE,CAAC;oBACrB,CAAC;oBAED,8DAA8D;oBAC9D,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;oBACzC,CAAC,GAAG,CAAC,CAAC;gBACR,CAAC;gBAED,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;YACrC,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}

package/jss-debug-loader.mjs

@@ -0,0 +1,44 @@
+import path from "path";
+
+/**
+ * Webpack/Turbopack loader that injects component names into toClassnames() calls.
+ *
+ * Rewrites:
+ *   toClassnames(jss)  →  toClassnames(jss, "Card")
+ *
+ * The component name is inferred from the filename (Card.tsx → "Card").
+ */
+export default function jssDebugLoader(source) {
+  if (!source.includes("toClassnames(")) return source;
+
+  const filename = path.basename(this.resourcePath, path.extname(this.resourcePath));
+  const name = JSON.stringify(filename);
+  const needle = "toClassnames(";
+  let result = "";
+  let i = 0;
+
+  while (i < source.length) {
+    const idx = source.indexOf(needle, i);
+    if (idx === -1) {
+      result += source.slice(i);
+      break;
+    }
+
+    result += source.slice(i, idx + needle.length);
+    i = idx + needle.length;
+
+    let depth = 1;
+    let j = i;
+    while (j < source.length && depth > 0) {
+      const ch = source[j];
+      if (ch === "(") depth++;
+      else if (ch === ")") depth--;
+      if (depth > 0) j++;
+    }
+
+    result += source.slice(i, j) + ", " + name;
+    i = j;
+  }
+
+  return result;
+}

package/next.config.js

@@ -15,7 +15,18 @@ const withMDX = mdx({
 const nextConfig = {
   pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
   reactStrictMode: true,
-  turbopack: {},
+  turbopack: {
+    rules: {
+      "*.tsx": {
+        loaders: [{ loader: "./jss-debug-loader.mjs" }],
+        as: "*.tsx",
+      },
+    },
+    resolveAlias: {
+      "aidos-ui-jsx/jsx-dev-runtime": "./src/jsx-dev-runtime.ts",
+      "aidos-ui-jsx/jsx-runtime": "./src/jsx-runtime.ts",
+    },
+  },
 };
 
 // Merge MDX config with Next.js config

package/package.json

@@ -1,9 +1,27 @@
 {
   "name": "aidos-ui",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "A simple UI framework",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "default": "./dist/jsx-dev-runtime.js"
+    },
+    "./vite-plugin-jss-debug": {
+      "types": "./dist/vite-plugin-jss-debug.d.ts",
+      "default": "./dist/vite-plugin-jss-debug.js"
+    }
+  },
   "scripts": {
     "embeddings": "node ./scripts/embeddings.js",
     "dev": "next dev",

package/src/BaseButton.tsx

@@ -32,6 +32,7 @@ export const BaseButton = React.forwardRef(
   ) => {
     return (
       <button
+        type="button"
         {...otherProps}
         aria-disabled={disabled ? true : undefined}
         ref={ref}

package/src/Card.tsx

@@ -19,7 +19,7 @@ export function Card({
         {
           backgroundColor: cssVar("--overlay-background"),
           borderRadius: cssVar("--border-radius-l"),
-          boxShadow: "1px 1px 4px 1px #e0e0e0",
+          boxShadow: cssVar("--shadow-sm"),
         },
         jss,
       ]}

package/src/Dialog.tsx

@@ -11,8 +11,14 @@ import { toClassnames } from "./jss";
 const jsss = {
   dialog: {
     border: "1px solid var(--divider)",
-    borderRadius: "var(--border-radius-m)",
+    borderRadius: "var(--border-radius-l)",
     padding: 0,
+    boxShadow: "var(--shadow-lg)",
+    animation: "dialogFadeIn 0.2s ease-out",
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.4)",
+      animation: "backdropFadeIn 0.2s ease-out",
+    },
   },
   root: {
     display: "grid",

package/src/Dropdown.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useId, useRef, useState } from "react";
 
 import { BaseView } from "./BaseView";
-import { guid } from "./guid";
 import { Button } from "./Button";
 import { Column } from "./Column";
 import { useNavigation } from "./useNavigation";
@@ -25,12 +24,12 @@ const jsss: { [key: string]: JSS } = {
     left: 0,
     right: 0,
     borderRadius: "var(--border-radius-m)",
-    boxShadow: "0px 1px 2px var(--divider)",
+    boxShadow: "var(--shadow-sm)",
     zIndex: 1,
   },
 };
 export function Dropdown<T extends string | number>({
-  id = guid(),
+  id: propId,
   label,
   options,
   selection,
@@ -54,6 +53,8 @@ export function Dropdown<T extends string | number>({
   gap?: Gap;
   size?: Size;
 }) {
+  const hookId = useId();
+  const id = propId ?? hookId;
   const triggerRef = useRef(null);
   const [expanded, setExpanded] = useState(false);
   const dropdownRef = useNavigation({ autofocus: true });

package/src/JSSComment.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef } from "react";
+
+/**
+ * Injects a real HTML comment node (<!-- ComponentName -->) into the DOM.
+ *
+ * Renders nothing (null). Uses the React fiber tree to locate the sibling
+ * component's first DOM node, then inserts a comment before it.
+ * Client-only — no SSR output, no hydration mismatch.
+ */
+export function JSSComment({ name }: { name: string }) {
+  const fiberRef = useRef<any>(null);
+
+  // Capture our fiber during render
+  try {
+    const internals = (React as any)
+      .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    fiberRef.current = internals?.ReactCurrentOwner?.current;
+  } catch {}
+
+  useEffect(() => {
+    const fiber = fiberRef.current;
+    if (!fiber) return;
+
+    // Our sibling in the Fragment is the actual component
+    const sibling = fiber.sibling;
+    if (!sibling) return;
+
+    // Walk down the sibling's fiber tree to find its first DOM node
+    const hostNode = findFirstDOMNode(sibling);
+    if (!hostNode?.parentNode) return;
+
+    const comment = document.createComment(` ${name} `);
+    hostNode.parentNode.insertBefore(comment, hostNode);
+
+    return () => {
+      comment.remove();
+    };
+  }, [name]);
+
+  return null;
+}
+
+function findFirstDOMNode(fiber: any): Node | null {
+  let current = fiber;
+  while (current) {
+    if (current.stateNode instanceof Node) {
+      return current.stateNode;
+    }
+    if (current.child) {
+      current = current.child;
+      continue;
+    }
+    break;
+  }
+  return null;
+}

package/src/Popover.tsx

@@ -10,9 +10,11 @@ const jsss: { [key: string]: JSS } = {
     padding: 0,
     zIndex: 1,
     backgroundColor: "var(--primary-background)",
-    borderRadius: "var(--border-radius-m)",
+    borderRadius: "var(--border-radius-l)",
     border: "1px solid var(--divider)",
     overflow: "hidden",
+    boxShadow: "var(--shadow-lg)",
+    animation: "popoverFadeIn 0.15s ease-out",
   },
 };
 

package/src/Storage.tsx

@@ -99,9 +99,7 @@ export function createStorage<State>({
     useEffect(() => {
       return subscribe((newState) => {
         const newLocalState = selector(newState);
-        if (newLocalState != localState) {
-          setLocalState(selector(newState));
-        }
+        setLocalState((prev) => (newLocalState != prev ? newLocalState : prev));
       });
     }, []);
 

package/src/Tooltip.tsx

@@ -10,11 +10,12 @@ const jsss: { [key: string]: JSS } = {
     top: "-100%",
     transform: "translateY(50%)",
     backgroundColor: cssVar("--primary-background"),
-    padding: cssVar("--spacing-s"),
+    padding: `${cssVar("--spacing-s")} ${cssVar("--spacing-m")}`,
     borderRadius: cssVar("--border-radius-m"),
     border: `1px solid ${cssVar("--divider")}`,
-    boxShadow: `0px 1px 2px ${cssVar("--divider")}`,
+    boxShadow: cssVar("--shadow-md"),
     overflow: "hidden",
+    animation: "popoverFadeIn 0.15s ease-out",
   },
 };
 

package/src/jss.tsx

@@ -75,7 +75,7 @@ const aliases: {
   },
 };
 
-const rawHashMap = new Map<string, string>();
+const rawHashMap = new Map<string, { selector: string; key: string }>();
 
 function createStyleNode(content: string) {
   if (isServer()) {
@@ -111,6 +111,9 @@ const pixelStyles = new Set([
   "left",
   "right",
   "outline-offset",
+  "gap",
+  "row-gap",
+  "column-gap",
 ]);
 
 const toPixelValue = (key: string, value): string => {
@@ -141,20 +144,25 @@ const flattenJSS = (jss: JSS): Styles => {
   if (!jss) {
     return {};
   } else if (Array.isArray(jss)) {
-    // @ts-ignore
-    return jss.reduce((acc: Styles, jss: JSS) => {
-      return { ...acc, ...flattenJSS(jss) };
-    }, {});
+    const result: Styles = {};
+    for (const item of jss) {
+      Object.assign(result, flattenJSS(item));
+    }
+    return result;
   } else {
     return jss;
   }
 };
 
-export const toClassnames = (jss: JSS): string => {
+export const toClassnames = (jss: JSS, componentName?: string): string => {
   jss = flattenJSS(jss);
 
   const stylesStack = Object.entries(jss);
-  const classNames = [];
+  const classNames: string[] = [];
+
+  if (componentName) {
+    classNames.push(componentName);
+  }
 
   while (stylesStack.length) {
     const [key, value] = stylesStack.pop();
@@ -164,17 +172,22 @@ export const toClassnames = (jss: JSS): string => {
       continue;
     }
 
-    const rawHash = hash(key + JSON.stringify(value)).toString(32);
-    const cachedSelector = rawHashMap.get(rawHash);
-
-    if (cachedSelector != null) {
-      classNames.push(cachedSelector);
+    const inputKey = key + JSON.stringify(value);
+    const rawHash = hash(inputKey).toString(32);
+    const cached = rawHashMap.get(rawHash);
+
+    if (cached != null) {
+      if (cached.key !== inputKey) {
+        console.warn(
+          `[jss] Hash collision detected: "${inputKey}" collides with "${cached.key}"`
+        );
+      }
+      classNames.push(cached.selector);
       continue;
     }
 
-    // const selector = numberToBase(rawHashMap.size);
     const selector = `x${rawHash}`;
-    rawHashMap.set(rawHash, selector);
+    rawHashMap.set(rawHash, { selector, key: inputKey });
     classNames.push(selector);
 
     if (typeof value === "number" || typeof value === "string") {
@@ -405,6 +418,13 @@ export type Theme = {
   ["--border-radius-m"]: string;
   ["--border-radius-l"]: string;
   ["--nav-bar-height"]: string;
+  /* Shadows */
+  ["--shadow-sm"]: string;
+  ["--shadow-md"]: string;
+  ["--shadow-lg"]: string;
+  /* Transitions */
+  ["--transition-fast"]: string;
+  ["--transition-normal"]: string;
 };
 
 export const lightTheme: Theme = {
@@ -454,6 +474,13 @@ export const lightTheme: Theme = {
   ["--border-radius-m"]: "4px",
   ["--border-radius-l"]: "8px",
   ["--nav-bar-height"]: "50px",
+  /* Shadows */
+  ["--shadow-sm"]: "0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1)",
+  ["--shadow-md"]: "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)",
+  ["--shadow-lg"]: "0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)",
+  /* Transitions */
+  ["--transition-fast"]: "0.15s ease",
+  ["--transition-normal"]: "0.2s ease",
 };
 
 export const darkTheme: Theme = {
@@ -503,6 +530,13 @@ export const darkTheme: Theme = {
   ["--border-radius-m"]: "4px",
   ["--border-radius-l"]: "8px",
   ["--nav-bar-height"]: "50px",
+  /* Shadows - stronger for dark mode to be visible */
+  ["--shadow-sm"]: "0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3)",
+  ["--shadow-md"]: "0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2)",
+  ["--shadow-lg"]: "0 10px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.25)",
+  /* Transitions */
+  ["--transition-fast"]: "0.15s ease",
+  ["--transition-normal"]: "0.2s ease",
 };
 
 export const baseStyles = `
@@ -527,6 +561,37 @@ body {
   background-color: ${cssVar("--primary-background")};
 }
 
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 `;
 
 const backgroundStyles = {

package/src/jsx-dev-runtime.ts

@@ -0,0 +1,74 @@
+// Custom JSX dev runtime that injects <!-- ComponentName --> comments
+// into the DOM at component boundaries.
+//
+// Usage: in tsconfig.json, set "jsxImportSource": "aidos-ui/src"
+// (or wherever this file is importable from)
+
+export { Fragment } from "react/jsx-dev-runtime";
+import { jsxDEV as _jsxDEV, Fragment } from "react/jsx-dev-runtime";
+import { JSSComment } from "./JSSComment";
+
+const wrapCache = new WeakMap<Function, Function>();
+
+function getWrapped(type: Function): Function {
+  let wrapped = wrapCache.get(type);
+  if (wrapped) return wrapped;
+
+  const name = (type as any).displayName || type.name;
+
+  wrapped = function JSSBoundary(props: any) {
+    return _jsxDEV(
+      Fragment,
+      {
+        children: [
+          _jsxDEV(JSSComment, { name }, undefined, false, undefined, undefined),
+          _jsxDEV(type as any, props, undefined, false, undefined, undefined),
+        ],
+      },
+      undefined,
+      true,
+      undefined,
+      undefined
+    );
+  };
+
+  (wrapped as any).displayName = name;
+  wrapCache.set(type, wrapped);
+
+  return wrapped;
+}
+
+// Skip our own wrapper components by name
+const SKIP_NAMES = new Set(["JSSComment", "JSSBoundary"]);
+
+function isUserComponent(type: any, source: any): boolean {
+  if (typeof type !== "function") return false;
+  const name = type.displayName || type.name;
+  if (!name || !/^[A-Z]/.test(name)) return false;
+  if (SKIP_NAMES.has(name)) return false;
+  // Use the source fileName from the JSX transform to skip node_modules
+  if (source?.fileName?.includes("node_modules")) return false;
+  return true;
+}
+
+export function jsxDEV(
+  type: any,
+  props: any,
+  key: any,
+  isStaticChildren: boolean,
+  source: any,
+  self: any
+) {
+  if (isUserComponent(type, source)) {
+    return _jsxDEV(
+      getWrapped(type) as any,
+      props,
+      key,
+      isStaticChildren,
+      source,
+      self
+    );
+  }
+
+  return _jsxDEV(type, props, key, isStaticChildren, source, self);
+}

package/src/jsx-runtime.ts

@@ -0,0 +1,2 @@
+// Production JSX runtime — straight passthrough, no component annotations.
+export { jsx, jsxs, Fragment } from "react/jsx-runtime";

package/src/vite-plugin-jss-debug.ts

@@ -0,0 +1,75 @@
+import path from "path";
+
+/**
+ * Vite plugin that enables JSS debug tooling:
+ *
+ * 1. Injects component names into toClassnames() calls so they appear as CSS classes.
+ *    toClassnames(jss) → toClassnames(jss, "Card")
+ *
+ * 2. Configures the custom JSX dev runtime that injects <!-- ComponentName -->
+ *    HTML comments at component boundaries (same approach as the Next.js setup).
+ *
+ * Usage in vite.config.ts:
+ *   import jssDebug from "aidos-ui/vite-plugin-jss-debug";
+ *   export default defineConfig({ plugins: [jssDebug()] });
+ */
+export default function jssDebug() {
+  return [
+    {
+      name: "jss-debug-jsx",
+      config() {
+        return {
+          esbuild: {
+            jsx: "automatic",
+            jsxDev: true,
+            jsxImportSource: "aidos-ui",
+          },
+        };
+      },
+    },
+    {
+      name: "jss-debug-classnames",
+      enforce: "pre" as const,
+
+      transform(code: string, id: string) {
+        if (id.includes("node_modules")) return;
+        if (!id.match(/\.[jt]sx?$/)) return;
+        if (!code.includes("toClassnames(")) return;
+
+        const filename = path.basename(id, path.extname(id));
+        const name = JSON.stringify(filename);
+        const needle = "toClassnames(";
+        let result = "";
+        let i = 0;
+
+        while (i < code.length) {
+          const idx = code.indexOf(needle, i);
+          if (idx === -1) {
+            result += code.slice(i);
+            break;
+          }
+
+          // Copy everything up to and including "toClassnames("
+          result += code.slice(i, idx + needle.length);
+          i = idx + needle.length;
+
+          // Track parens to find the matching closing )
+          let depth = 1;
+          let j = i;
+          while (j < code.length && depth > 0) {
+            const ch = code[j];
+            if (ch === "(") depth++;
+            else if (ch === ")") depth--;
+            if (depth > 0) j++;
+          }
+
+          // Copy the original arguments, then inject the component name
+          result += code.slice(i, j) + ", " + name;
+          i = j;
+        }
+
+        return { code: result, map: null };
+      },
+    },
+  ];
+}

package/tsconfig.json

@@ -11,6 +11,12 @@
     "sourceMap": true,
     "outDir": "dist/",
     "jsx": "react-jsx",
+    "jsxImportSource": "aidos-ui-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "aidos-ui-jsx/jsx-dev-runtime": ["./src/jsx-dev-runtime"],
+      "aidos-ui-jsx/jsx-runtime": ["./src/jsx-runtime"]
+    },
     "moduleResolution": "node",
     "esModuleInterop": true,
     "declaration": true,