aidos-ui 4.0.2 → 4.0.4

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") {

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,77 @@
+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(_config: unknown, { command }: { command: string }) {
+        return {
+          oxc: {
+            jsx: {
+              runtime: "automatic",
+              development: command === "serve",
+              importSource: "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,

package/.claude/settings.local.json

@@ -1,21 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm publish:*)",
-      "Bash(npm whoami:*)",
-      "Bash(npm run dev:*)",
-      "Bash(npx npm-check-updates:*)",
-      "Bash(npm install:*)",
-      "Bash(npm run build:lib:*)",
-      "Bash(npm run build:*)",
-      "Bash(npm ls:*)",
-      "Bash(npm show:*)",
-      "Bash(npm info:*)",
-      "WebFetch(domain:iconify.design)",
-      "Bash(ls:*)",
-      "Bash(xargs basename:*)",
-      "Bash(pkill:*)",
-      "Bash(npx tsc:*)"
-    ]
-  }
-}