@frontfriend/tailwind 4.0.0 → 4.0.1

package/scripts/update-default-config-data.js

@@ -4,7 +4,11 @@ const path = require('path');
 
 const packageRoot = path.join(__dirname, '..');
 const repoRoot = path.join(packageRoot, '..', '..');
-const sourcePath = path.join(repoRoot, 'apps', 'saas', 'components', 'code-editor', 'setup', 'components-config.json');
+// Vendored snapshot of the Master Design System componentsConfig. Lives inside
+// the package so the bundled fallback can be regenerated without depending on
+// apps/saas (which no longer ships the code-editor setup config). Refresh it
+// from the canonical source with `--from-master-db`.
+const sourcePath = path.join(packageRoot, 'scripts', 'master-components-config.json');
 const outputPath = path.join(packageRoot, 'lib', 'core', 'default-config-data.js');
 const SYSTEM_WORKSPACE_SLUG = 'system-templates';
 const MASTER_DS_NAME = 'Master Design System';
@@ -256,6 +260,78 @@ const MINIMAL_V4_FALLBACKS = {
   },
 };
 
+// Class values re-authored from the shadcn/ui new-york-v4 sources
+// (clone: apps/v4/registry/new-york-v4/ui/{button,badge,input}.tsx). These are
+// deep-merged on top of the neutralized Master DS so the out-of-the-box fallback
+// renders like a stock shadcn install: token-driven radius (rounded-md), the
+// shadcn size scale (default h-9 / sm h-8 / lg h-10 / icon size-9), and shadcn
+// variant treatments. shadcn's cva variant/size buckets are mapped into the
+// FrontFriend component envelope keys (e.g. shadcn `default` -> FF `main`,
+// shadcn `outline` -> FF `tertiary`). FrontFriend-only buckets (ghostmain,
+// linkdestructive, badge success/warning/subtle, ...) are left to the
+// neutralized Master DS values and survive the merge untouched.
+const SHADCN_DEFAULTS = {
+  button: {
+    root:
+      'font-primary group inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+    variant: {
+      main: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive:
+        'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20',
+      tertiary:
+        'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      ghostmain: 'text-primary hover:bg-accent hover:text-primary/90',
+      link: 'text-primary underline-offset-4 hover:underline',
+      linkdestructive: 'text-destructive underline-offset-4 hover:underline',
+    },
+    size: {
+      xs: 'h-6 gap-1 px-2 text-xs',
+      sm: 'h-8 gap-1.5 px-3',
+      default: 'h-9 px-4 py-2',
+      lg: 'h-10 px-6',
+      icon: 'size-9',
+    },
+    icon: {
+      size: { sm: '4', default: '4', lg: '4' },
+      color: {
+        main: 'text-primary-foreground',
+        secondary: 'text-secondary-foreground',
+        tertiary: 'text-foreground group-hover:text-accent-foreground',
+        destructive: 'text-white',
+        ghost: 'text-foreground group-hover:text-accent-foreground',
+        ghostmain: 'text-primary',
+        link: 'text-primary',
+        linkdestructive: 'text-destructive',
+      },
+    },
+    iconPosition: {
+      default: {
+        small: 'w-8 px-0',
+        default: 'w-9 px-0',
+        large: 'w-10 px-0',
+      },
+    },
+  },
+  badge: {
+    root:
+      'font-primary inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3',
+    variant: {
+      main: 'bg-primary border-transparent text-primary-foreground [&>svg]:text-primary-foreground',
+      secondary:
+        'bg-secondary border-transparent text-secondary-foreground [&>svg]:text-secondary-foreground',
+      destructive:
+        'bg-destructive border-transparent text-white [&>svg]:text-white',
+      tertiary: 'bg-transparent border-border text-foreground [&>svg]:text-foreground',
+    },
+  },
+  input: {
+    root:
+      'font-primary flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base md:text-sm shadow-xs transition-[color,box-shadow] outline-none text-foreground placeholder:text-muted-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50',
+  },
+};
+
 const DIRECT_CLASS_MAP = {
   'border-transperent': 'border-transparent',
   'hover:interactive-brand-mid-hover': 'hover:text-primary/90',
@@ -315,6 +391,8 @@ const FORBIDDEN_DEFAULT_CLASS_PATTERNS = [
   /(?:^|:)fill-disabled$/,
   /(?:^|:)border-disabled$/,
   /transperent/,
+  // Fixed radius that ignores --radius; must use the rounded-md/lg/xl scale.
+  /(?:^|:)rounded(?:-(?:t|b|l|r|tl|tr|bl|br|ss|se|es|ee|s|e))?$/,
 ];
 
 function clone(value) {
@@ -415,6 +493,16 @@ function mapTextClass(base, prefix) {
   return important + withVariantTone(prefix, mapped);
 }
 
+// Tailwind v4 / shadcn theme ties rounded-{sm,md,lg,xl} to the --radius token.
+// Bare `rounded` (and bare directional variants) are fixed 0.25rem and ignore
+// --radius, so map them onto the token-driven `rounded-md` scale.
+function mapRadiusClass(base) {
+  if (base === 'rounded') return 'rounded-md';
+  const match = base.match(/^rounded-(t|b|l|r|tl|tr|bl|br|ss|se|es|ee|s|e)$/);
+  if (match) return `rounded-${match[1]}-md`;
+  return null;
+}
+
 function mapBorderClass(base, prefix) {
   const match = base.match(/^!?border-([a-z]+)(?:-[a-z]+)*(?:-(hover|active|selected|disabled))?$/);
   if (!match) return null;
@@ -438,6 +526,7 @@ function neutralizeClassToken(token) {
     || mapBgClass(base, prefix)
     || mapTextClass(base, prefix)
     || mapBorderClass(base, prefix)
+    || mapRadiusClass(base)
     || base;
 
   return `${prefix}${mappedBase}`;
@@ -506,6 +595,12 @@ function buildDefaultConfigData(rawMasterConfig) {
     generated[key] = key in generated ? deepMerge(generated[key], config) : clone(config);
   }
 
+  // Re-author shadcn-covered components from the shadcn sources. Deep-merge so
+  // shadcn leaves win (root/variant/size) while FrontFriend-only buckets persist.
+  for (const [key, override] of Object.entries(SHADCN_DEFAULTS)) {
+    generated[key] = key in generated ? deepMerge(generated[key], override) : clone(override);
+  }
+
   const forbidden = findForbiddenDefaultClasses(generated);
   if (forbidden.length > 0) {
     throw new Error(`Default config still contains FrontFriend-only classes: ${forbidden.join(', ')}`);
@@ -520,9 +615,13 @@ function generateDefaultConfigData() {
 }
 
 function formatModule(config) {
-  return `// Generated from apps/saas/components/code-editor/setup/components-config.json as the neutral bundled\n` +
-    `// Master Design System fallback for Tailwind v4 registry components.\n` +
-    `// Run \`node packages/frontfriend-tailwind/scripts/update-default-config-data.js\` after Master DS changes.\n` +
+  return `// Neutral bundled Master Design System fallback for Tailwind v4 registry components.\n` +
+    `// Structure + FrontFriend-only components are derived from\n` +
+    `// packages/frontfriend-tailwind/scripts/master-components-config.json (colors neutralized).\n` +
+    `// shadcn-covered components (button, badge, input) have their root/variant/size classes\n` +
+    `// re-authored from the shadcn new-york-v4 sources so the out-of-the-box fallback renders\n` +
+    `// like a stock shadcn install (token-driven --radius, shadcn size scale + treatments).\n` +
+    `// Run \`node packages/frontfriend-tailwind/scripts/update-default-config-data.js\` to regenerate.\n` +
     `// Do not edit this file by hand.\n\n` +
     `module.exports = ${JSON.stringify(config, null, 2)};\n`;
 }
@@ -557,6 +656,8 @@ async function readMasterComponentsConfigFromDb() {
 
 async function writeDefaultConfigDataFromMasterDb() {
   const masterConfig = await readMasterComponentsConfigFromDb();
+  // Keep the vendored snapshot in sync so the file-based generator stays reproducible.
+  fs.writeFileSync(sourcePath, `${JSON.stringify(masterConfig, null, 2)}\n`);
   const config = buildDefaultConfigData(masterConfig);
   fs.writeFileSync(outputPath, formatModule(config));
   return config;

package/src/theme.css

@@ -1,13 +1,9 @@
 /*
- * Frontfriend Tailwind v4 Theme Placeholder
+ * Frontfriend Tailwind v4 bundled source.
  *
- * `frontfriend init` generates the real CSS-first theme at:
- *   node_modules/.cache/frontfriend/theme.css
- *
- * The Frontfriend Next.js and Vite integrations alias this package entrypoint
- * to the generated cache file so apps can import a stable path:
- *   @import "@frontfriend/tailwind/theme.css";
- *
- * If this placeholder appears in your compiled CSS, run `npx frontfriend init`
- * and make sure the Frontfriend Next.js/Vite integration is enabled.
+ * `frontfriend init` aliases this package entrypoint to the generated cache
+ * theme at node_modules/.cache/frontfriend/theme.css when available. Until
+ * then, this file still points Tailwind v4 at the bundled component config so
+ * config-driven component utilities are generated out-of-the-box.
  */
+@source "../dist/lib/core/default-config-data.js";