@frontfriend/tailwind 3.0.4 → 4.0.1

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

@@ -0,0 +1,690 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const packageRoot = path.join(__dirname, '..');
+const repoRoot = path.join(packageRoot, '..', '..');
+// 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';
+
+const REGISTRY_ALIASES = {
+  alertDialog: ['alertdialog'],
+  avatarGroup: ['avatargroup'],
+  checkboxField: ['checkboxfield'],
+  datePicker: ['datepicker'],
+  dateInput: ['dateinput'],
+  dropdown: ['dropdownmenu'],
+  fileuploader: ['fileupload'],
+  multiSelect: ['multiselect'],
+  pdfViewer: ['pdfviewer'],
+  radiogroupeField: ['radiogroupfield'],
+  timePicker: ['timepicker'],
+  inputOTP: ['inputotp'],
+};
+
+const DERIVED_FROM_MASTER = {
+  phoneInput: 'input',
+  phoneinput: 'input',
+  inputNumber: 'input',
+  inputnumber: 'input',
+  dateSlider: 'calendar',
+  dateslider: 'calendar',
+  tabBar: 'actionbar',
+  tabbar: 'actionbar',
+};
+
+const SUPPLEMENTAL_CONFIG = {
+  multiSelect: {
+    createNew: 'flex flex-col gap-2 items-center',
+    createNewButton: 'w-fit',
+    error: 'px-3 py-1.5 text-destructive text-xs',
+    empty: 'px-2 py-1.5 text-xs text-muted-foreground',
+  },
+  multiselect: {
+    createNew: 'flex flex-col gap-2 items-center',
+    createNewButton: 'w-fit',
+    error: 'px-3 py-1.5 text-destructive text-xs',
+    empty: 'px-2 py-1.5 text-xs text-muted-foreground',
+  },
+  phoneInput: {
+    wrapper: 'flex gap-4',
+    selectorWrapper: 'flex items-center',
+    nativeSelect: 'base-select',
+    trigger: { layout: 'flex items-center' },
+    dialCode: 'ml-2',
+    triggerIcon: 'ml-2 h-4 w-4',
+    flagIcon: '-mr-2 h-5 w-5',
+    content: 'w-[300px] p-0',
+    item: 'gap-2',
+    itemLabel: 'flex-1 text-sm',
+    input: 'w-full',
+    flag: 'bg-muted flex h-4 w-6 overflow-hidden rounded-sm',
+  },
+  phoneinput: {
+    wrapper: 'flex gap-4',
+    selectorWrapper: 'flex items-center',
+    nativeSelect: 'base-select',
+    trigger: { layout: 'flex items-center' },
+    dialCode: 'ml-2',
+    triggerIcon: 'ml-2 h-4 w-4',
+    flagIcon: '-mr-2 h-5 w-5',
+    content: 'w-[300px] p-0',
+    item: 'gap-2',
+    itemLabel: 'flex-1 text-sm',
+    input: 'w-full',
+    flag: 'bg-muted flex h-4 w-6 overflow-hidden rounded-sm',
+  },
+  spinner: {
+    root: 'animate-spin',
+    track: 'opacity-20',
+  },
+  tabs: {
+    list: { solidRoot: 'relative' },
+  },
+  table: {
+    container: 'w-full',
+  },
+  sheet: {
+    srOnly: 'sr-only',
+  },
+  themepicker: {
+    icon: {
+      light: 'h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90',
+      dark: 'absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0',
+    },
+    srOnly: 'sr-only',
+  },
+  themeprovider: {
+    themePicker: { srOnly: 'sr-only' },
+  },
+  toast: {
+    toaster: 'toaster group',
+  },
+  textarea: {
+    noResize: 'resize-none',
+  },
+  input: {
+    textCenter: 'text-center',
+  },
+  inputNumber: {
+    textCenter: 'text-center',
+  },
+  inputnumber: {
+    textCenter: 'text-center',
+  },
+  datePicker: {
+    selectContent: 'z-50',
+    fullWidth: 'w-full',
+  },
+  datepicker: {
+    selectContent: 'z-50',
+    fullWidth: 'w-full',
+  },
+  fileuploader: {
+    cursor: 'cursor-pointer',
+    borderless: 'border-0',
+  },
+  fileupload: {
+    cursor: 'cursor-pointer',
+    borderless: 'border-0',
+  },
+  sidebar: {
+    srOnly: 'sr-only',
+    root: { foreground: 'text-sidebar-foreground' },
+  },
+  segmented: {
+    trigger: 'tab-trigger',
+    activeTrigger: 'tab-trigger-active',
+    disabled: 'pointer-events-none opacity-50',
+  },
+  calendar: {
+    customRoot: 'p-3 rounded-md font-primary',
+    header: 'flex justify-center pt-1 relative items-center',
+    content: 'grid grid-cols-3 gap-2',
+    options: 'cursor-pointer',
+    selectGroup: 'flex items-center gap-2',
+    nativeSelect: 'h-8 rounded-md border border-input bg-background px-2 text-sm',
+    range: {
+      root: 'p-3 rounded-md font-primary',
+      container: 'flex flex-col gap-4 sm:flex-row',
+      row: 'flex w-full mt-2',
+      navSpacer: 'h-7 w-7',
+    },
+  },
+  dateSlider: {
+    customRootSlider: 'w-full',
+    header: 'flex justify-center pt-1 relative items-center',
+    cell: 'text-center text-sm p-0 relative',
+    selectContent: 'z-50',
+    buttons: { props: { variant: 'ghost' } },
+    dialog: {
+      false: 'hidden',
+      content: 'grid gap-4',
+      body: 'grid gap-4',
+      range: 'grid gap-4',
+    },
+  },
+  dateslider: {
+    customRootSlider: 'w-full',
+    header: 'flex justify-center pt-1 relative items-center',
+    cell: 'text-center text-sm p-0 relative',
+    selectContent: 'z-50',
+    buttons: { props: { variant: 'ghost' } },
+    dialog: {
+      false: 'hidden',
+      content: 'grid gap-4',
+      body: 'grid gap-4',
+      range: 'grid gap-4',
+    },
+  },
+};
+
+const MINIMAL_V4_FALLBACKS = {
+  avatarGroup: {
+    root: 'flex flex-row relative h-10 w-full font-primary',
+    avatar: 'relative -ml-2 first:ml-0',
+  },
+  avatargroup: {
+    root: 'flex flex-row relative h-10 w-full font-primary',
+    avatar: 'relative -ml-2 first:ml-0',
+  },
+  timePicker: {
+    trigger: 'w-full',
+    input: 'w-full',
+    wrapper: 'grid gap-4',
+    popover: {
+      content: 'w-auto p-4',
+    },
+    select: {
+      root: 'grid gap-2',
+      label: 'text-sm font-medium text-foreground',
+      container: 'flex flex-col gap-2',
+      content: 'max-h-48 overflow-y-auto',
+    },
+  },
+  timepicker: {
+    trigger: 'w-full',
+    input: 'w-full',
+    wrapper: 'grid gap-4',
+    popover: {
+      content: 'w-auto p-4',
+    },
+    select: {
+      root: 'grid gap-2',
+      label: 'text-sm font-medium text-foreground',
+      container: 'flex flex-col gap-2',
+      content: 'max-h-48 overflow-y-auto',
+    },
+  },
+  collapsible: {
+    root: 'w-full',
+    trigger: 'inline-flex items-center justify-between gap-2',
+    content: 'overflow-hidden',
+  },
+  icon: { root: 'shrink-0' },
+  resizable: {
+    root: 'flex',
+    panel: 'relative',
+    handle: 'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center',
+  },
+  stepper: {
+    root: 'flex gap-2',
+    item: 'flex items-center gap-2',
+    trigger: 'inline-flex items-center gap-2',
+    indicator: 'flex size-8 items-center justify-center rounded-full border border-border',
+    separator: 'bg-border h-px flex-1',
+    title: 'font-medium text-foreground',
+    description: 'text-muted-foreground text-sm',
+  },
+  themeprovider: { root: 'contents' },
+  themepicker: {
+    root: 'inline-flex items-center gap-2 rounded-md border border-border bg-background p-1',
+  },
+  toggle: {
+    root: 'inline-flex items-center justify-center rounded-md text-sm font-medium hover:bg-accent hover:text-accent-foreground',
+    variant: {
+      default: 'bg-transparent',
+      outline: 'border border-input bg-transparent',
+    },
+    size: {
+      default: 'h-9 px-3',
+      sm: 'h-8 px-2',
+      lg: 'h-10 px-4',
+    },
+  },
+};
+
+// 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',
+
+  'bg-white/10': 'bg-background',
+  'bg-transparent': 'bg-transparent',
+  'border-transparent': 'border-transparent',
+
+  'bg-overlay': 'bg-black/80',
+  'bg-overlay-mid': 'bg-black/80',
+  'bg-overlay-strong': 'bg-black/80',
+
+  'bg-layer-control': 'bg-background',
+  'bg-layer-below': 'bg-background',
+  'bg-layer-raised': 'bg-card',
+  'bg-layer-surface': 'bg-card',
+  'bg-layer-dialog': 'bg-background',
+  'bg-layer-popover': 'bg-popover',
+
+  'bg-disabled': 'opacity-50',
+  'text-disabled': 'opacity-50',
+  'fill-disabled': 'opacity-50',
+  'border-disabled': 'opacity-50',
+};
+
+const COLOR_FAMILIES = new Set([
+  'brand',
+  'interactive',
+  'neutral',
+  'negative',
+  'positive',
+  'warning',
+  'info',
+  'highlight',
+  'inverse',
+]);
+
+const ON_COLOR_FAMILIES = new Set([
+  'onbrand',
+  'oninteractive',
+  'onnegative',
+  'onpositive',
+  'onwarning',
+  'oninfo',
+  'onhighlight',
+]);
+
+const FORBIDDEN_DEFAULT_CLASS_PATTERNS = [
+  /(?:^|:)bg-brand(?:-|$)/,
+  /(?:^|:)text-brand(?:-|$)/,
+  /(?:^|:)text-onbrand(?:-|$)/,
+  /(?:^|:)(?:text|fill)-icon-(?:brand|onbrand)(?:-|$)/,
+  /(?:^|:)border-brand(?:-|$)/,
+  /(?:^|:)bg-layer(?:-|$)/,
+  /(?:^|:)bg-disabled$/,
+  /(?:^|:)text-disabled$/,
+  /(?:^|:)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) {
+  return JSON.parse(JSON.stringify(value));
+}
+
+function isPlainObject(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function deepMerge(base, override) {
+  if (!isPlainObject(base) || !isPlainObject(override)) {
+    return clone(override);
+  }
+
+  const merged = clone(base);
+  for (const [key, value] of Object.entries(override)) {
+    merged[key] = key in merged ? deepMerge(merged[key], value) : clone(value);
+  }
+  return merged;
+}
+
+function splitVariants(token) {
+  let depth = 0;
+  let lastColon = -1;
+  for (let index = 0; index < token.length; index += 1) {
+    const char = token[index];
+    if (char === '[') depth += 1;
+    if (char === ']') depth = Math.max(0, depth - 1);
+    if (char === ':' && depth === 0) lastColon = index;
+  }
+
+  if (lastColon === -1) {
+    return { prefix: '', base: token };
+  }
+  return {
+    prefix: token.slice(0, lastColon + 1),
+    base: token.slice(lastColon + 1),
+  };
+}
+
+function withVariantTone(prefix, baseClass) {
+  const variants = prefix.split(':').filter(Boolean);
+  const isActiveLike = variants.some((variant) =>
+    variant === 'hover' ||
+    variant === 'active' ||
+    variant.includes('hover') ||
+    variant.includes('active') ||
+    variant.includes('selected') ||
+    variant.includes('checked') ||
+    variant.includes('highlighted') ||
+    variant.includes('expanded')
+  );
+  const isDisabled = variants.some((variant) => variant.includes('disabled'));
+
+  if (isDisabled) return baseClass;
+  if (!isActiveLike) return baseClass;
+  if (baseClass === 'bg-primary') return 'bg-primary/90';
+  if (baseClass === 'bg-secondary') return 'bg-secondary/80';
+  if (baseClass === 'bg-muted') return 'bg-muted/80';
+  if (baseClass === 'bg-accent') return 'bg-accent/80';
+  if (baseClass === 'bg-destructive') return 'bg-destructive/90';
+  if (baseClass === 'text-primary') return 'text-primary/90';
+  if (baseClass === 'border-primary') return 'border-primary/80';
+  return baseClass;
+}
+
+function mapBgClass(base, prefix) {
+  const match = base.match(/^!?bg-([a-z]+)(?:-[a-z]+)*(?:-(hover|active|selected|disabled))?$/);
+  if (!match) return null;
+  const important = base.startsWith('!') ? '!' : '';
+  const family = match[1];
+  if (!COLOR_FAMILIES.has(family)) return null;
+
+  let mapped;
+  if (family === 'brand' || family === 'interactive') mapped = 'bg-primary';
+  else if (family === 'neutral') mapped = base.includes('-low') || base.includes('-subtle') ? 'bg-muted' : 'bg-accent';
+  else if (family === 'negative') mapped = 'bg-destructive';
+  else mapped = 'bg-primary';
+
+  return important + withVariantTone(prefix, mapped);
+}
+
+function mapTextClass(base, prefix) {
+  const match = base.match(/^!?(?:text|fill)-(?:(icon)-)?([a-z]+)(?:-[a-z]+)*(?:-(hover|active|selected|disabled))?$/);
+  if (!match) return null;
+  const important = base.startsWith('!') ? '!' : '';
+  const family = match[2];
+  if (!COLOR_FAMILIES.has(family) && !ON_COLOR_FAMILIES.has(family)) return null;
+
+  let mapped;
+  if (family === 'brand' || family === 'interactive') mapped = 'text-primary';
+  else if (family === 'neutral' || family === 'inverse') mapped = base.includes('-mid') || base.includes('-strong') ? 'text-foreground' : 'text-muted-foreground';
+  else if (family === 'negative') mapped = 'text-destructive';
+  else if (ON_COLOR_FAMILIES.has(family)) mapped = family === 'onnegative' ? 'text-destructive-foreground' : 'text-primary-foreground';
+  else mapped = 'text-primary';
+
+  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;
+  const important = base.startsWith('!') ? '!' : '';
+  const family = match[1];
+  if (!COLOR_FAMILIES.has(family)) return null;
+
+  let mapped;
+  if (family === 'brand' || family === 'interactive') mapped = 'border-primary';
+  else if (family === 'negative') mapped = 'border-destructive';
+  else mapped = 'border-border';
+  return important + withVariantTone(prefix, mapped);
+}
+
+function neutralizeClassToken(token) {
+  if (!token) return token;
+  if (DIRECT_CLASS_MAP[token]) return DIRECT_CLASS_MAP[token];
+
+  const { prefix, base } = splitVariants(token);
+  const mappedBase = DIRECT_CLASS_MAP[base]
+    || mapBgClass(base, prefix)
+    || mapTextClass(base, prefix)
+    || mapBorderClass(base, prefix)
+    || mapRadiusClass(base)
+    || base;
+
+  return `${prefix}${mappedBase}`;
+}
+
+function neutralizeClassString(value) {
+  return value
+    .split(/\s+/)
+    .filter(Boolean)
+    .map(neutralizeClassToken)
+    .join(' ');
+}
+
+function neutralizeComponentsConfig(value) {
+  if (typeof value === 'string') return neutralizeClassString(value);
+  if (Array.isArray(value)) return value.map(neutralizeComponentsConfig);
+  if (isPlainObject(value)) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, nested]) => [key, neutralizeComponentsConfig(nested)])
+    );
+  }
+  return value;
+}
+
+function collectClassTokens(value, tokens = []) {
+  if (typeof value === 'string') {
+    tokens.push(...value.split(/\s+/).filter(Boolean));
+  } else if (Array.isArray(value)) {
+    value.forEach((item) => collectClassTokens(item, tokens));
+  } else if (isPlainObject(value)) {
+    Object.values(value).forEach((item) => collectClassTokens(item, tokens));
+  }
+  return tokens;
+}
+
+function findForbiddenDefaultClasses(config) {
+  return [...new Set(
+    collectClassTokens(config).filter((token) =>
+      FORBIDDEN_DEFAULT_CLASS_PATTERNS.some((pattern) => pattern.test(token))
+    )
+  )].sort();
+}
+
+function buildDefaultConfigData(rawMasterConfig) {
+  const masterConfig = neutralizeComponentsConfig(rawMasterConfig);
+  const generated = clone(masterConfig);
+
+  for (const [sourceKey, aliases] of Object.entries(REGISTRY_ALIASES)) {
+    if (!masterConfig[sourceKey]) continue;
+    for (const alias of aliases) {
+      generated[alias] = clone(masterConfig[sourceKey]);
+    }
+  }
+
+  for (const [targetKey, sourceKey] of Object.entries(DERIVED_FROM_MASTER)) {
+    if (masterConfig[sourceKey]) {
+      generated[targetKey] = clone(masterConfig[sourceKey]);
+    }
+  }
+
+  for (const [key, config] of Object.entries(MINIMAL_V4_FALLBACKS)) {
+    generated[key] = clone(config);
+  }
+
+  for (const [key, config] of Object.entries(SUPPLEMENTAL_CONFIG)) {
+    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(', ')}`);
+  }
+
+  return generated;
+}
+
+function generateDefaultConfigData() {
+  const masterConfig = JSON.parse(fs.readFileSync(sourcePath, 'utf8'));
+  return buildDefaultConfigData(masterConfig);
+}
+
+function formatModule(config) {
+  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`;
+}
+
+function writeDefaultConfigData() {
+  const config = generateDefaultConfigData();
+  fs.writeFileSync(outputPath, formatModule(config));
+  return config;
+}
+
+async function readMasterComponentsConfigFromDb() {
+  const { PrismaClient } = require('@prisma/client');
+  const prisma = new PrismaClient();
+  try {
+    const master = await prisma.designSystem.findFirst({
+      where: {
+        name: MASTER_DS_NAME,
+        workspace: { slug: SYSTEM_WORKSPACE_SLUG },
+      },
+      include: { latestVersion: true },
+    });
+
+    const componentsConfig = master?.latestVersion?.componentsConfig || master?.componentsConfig;
+    if (!componentsConfig) {
+      throw new Error('Master Design System componentsConfig not found. Run apps/saas/scripts/init-master-design-system.js first.');
+    }
+    return componentsConfig;
+  } finally {
+    await prisma.$disconnect();
+  }
+}
+
+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;
+}
+
+if (require.main === module) {
+  (async () => {
+    const fromMasterDb = process.argv.includes('--from-master-db');
+    const config = fromMasterDb ? await writeDefaultConfigDataFromMasterDb() : writeDefaultConfigData();
+    const source = fromMasterDb ? 'Master Design System DB' : path.relative(repoRoot, sourcePath);
+    console.log(`Wrote ${path.relative(repoRoot, outputPath)} (${Object.keys(config).length} component keys) from ${source}`);
+  })().catch((error) => {
+    console.error(error.message);
+    process.exit(1);
+  });
+}
+
+module.exports = {
+  FORBIDDEN_DEFAULT_CLASS_PATTERNS,
+  buildDefaultConfigData,
+  collectClassTokens,
+  findForbiddenDefaultClasses,
+  generateDefaultConfigData,
+  readMasterComponentsConfigFromDb,
+  neutralizeClassString,
+  neutralizeClassToken,
+  neutralizeComponentsConfig,
+  writeDefaultConfigData,
+  writeDefaultConfigDataFromMasterDb,
+};

package/src/theme.css

@@ -0,0 +1,9 @@
+/*
+ * Frontfriend Tailwind v4 bundled source.
+ *
+ * `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";