@frontfriend/tailwind 4.0.8 → 4.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontfriend/tailwind",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "Design token management for Tailwind CSS",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -77,6 +77,7 @@
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0",
+    "tw-animate-css": "^1.3.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "vue": ">=3.0.0"
   },

package/scripts/migrate-component-slots-codemod.js

@@ -0,0 +1,92 @@
+/**
+ * Codemod: rewrite component-library consumption to the top-level `slots:{}`
+ * contract. Pairs with migrate-config-to-slots.js (data side).
+ *
+ * Rule (top-level only): a component's named child slots move under `slots`, so
+ * consumption gains exactly ONE `.slots.` hop at the first non-reserved key.
+ *
+ * Anchors handled:
+ *  A) `ffdc(<args>).<component>.<slot>...`  -> insert `.slots` before <slot>
+ *     (the first hop after the component selector, if it's not a reserved key).
+ *  B) component-root vars: `const V = ffdc(...).<component>;` (chain length 1)
+ *     -> rewrite `V.<prop>` / `V?.<prop>` / `V[expr]` when <prop> is not reserved.
+ *
+ * Slot-subtree alias vars (`const x = ffdc(...).<comp>.<slot>;`, chain >= 2) are
+ * NOT treated as roots: their own accesses are already inside a slot (second
+ * hop) and stay direct. Only their RHS slot hop is rewritten by anchor A.
+ *
+ * Idempotent: `.slots` is reserved, so re-running is a no-op.
+ */
+
+const fs = require('fs');
+const { RESERVED } = require('./migrate-config-to-slots');
+
+function isSlotKey(key) {
+  return !RESERVED.has(key); // RESERVED already includes 'slots'
+}
+
+function rewriteSource(src) {
+  let out = src;
+  const notes = [];
+
+  // --- Anchor A: ffdc(...).component.slot... ---
+  // Capture `ffdc(<args>).<component>` then the first `.prop`.
+  out = out.replace(
+    /(ffdc\([^)]*\)\s*\.\s*\w+)\.(\w+)/g,
+    (m, head, prop) => {
+      if (!isSlotKey(prop)) return m; // reserved or already 'slots'
+      notes.push(`A: ${head.replace(/\s+/g, '')}.${prop} -> .slots.${prop}`);
+      return `${head}.slots.${prop}`;
+    },
+  );
+
+  // --- Identify component-root vars (chain length exactly 1 after ffdc) ---
+  // Matches AFTER anchor A ran, so slot-subtree RHS now contain `.slots.` and
+  // will NOT match this single-hop pattern.
+  const roots = new Set();
+  const declRe = /\b(?:const|let|var)\s+(\w+)\s*=\s*ffdc\([^)]*\)\s*\.\s*\w+\s*;/g;
+  let mm;
+  while ((mm = declRe.exec(out)) !== null) roots.add(mm[1]);
+
+  // --- Anchor B: rewrite first-hop access on each root var ---
+  for (const V of roots) {
+    const esc = V.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // dot / optional-chaining access:  V.prop  |  V?.prop
+    out = out.replace(
+      new RegExp(`(?<![\\w$])${esc}(\\?\\.|\\.)(\\w+)`, 'g'),
+      (m, op, prop) => {
+        if (!isSlotKey(prop)) return m;
+        notes.push(`B: ${V}${op}${prop} -> ${V}${op}slots.${prop}`);
+        return `${V}${op}slots.${prop}`;
+      },
+    );
+    // computed access:  V[expr]  -> V.slots[expr]   (top-level dynamic slot)
+    out = out.replace(new RegExp(`(?<![\\w$])${esc}\\[`, 'g'), (m) => {
+      notes.push(`B: ${V}[...] -> ${V}.slots[...]`);
+      return `${V}.slots[`;
+    });
+  }
+
+  return { out, roots: [...roots], notes, changed: out !== src };
+}
+
+module.exports = { rewriteSource };
+
+// CLI: node migrate-component-slots-codemod.js [--write] <file...>
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  const write = args.includes('--write');
+  const files = args.filter((a) => a !== '--write');
+  let changedCount = 0;
+  for (const f of files) {
+    const src = fs.readFileSync(f, 'utf8');
+    const { out, notes, changed } = rewriteSource(src);
+    if (changed) {
+      changedCount++;
+      if (write) fs.writeFileSync(f, out);
+      console.log(`\n${changed ? '*' : ' '} ${f}  (${notes.length} rewrites)`);
+      for (const n of notes) console.log(`    ${n}`);
+    }
+  }
+  console.log(`\n${changedCount} file(s) ${write ? 'written' : 'would change'} of ${files.length}.`);
+}

package/scripts/migrate-config-to-slots.js

@@ -0,0 +1,38 @@
+/**
+ * Migrate a componentsConfig from the legacy "direct named slots" layout to the
+ * canonical v4 layout where a component's named child slots live under `slots:{}`.
+ *
+ * TOP-LEVEL ONLY (by design): only the component's own top-level keys are
+ * partitioned. Slot internals are left untouched, so consumption only ever
+ * gains a single `.slots.` hop (e.g. `tabs.list.line` -> `tabs.slots.list.line`,
+ * NOT `tabs.slots.list.slots.line`).
+ *
+ * Per component, top-level keys split into:
+ *   - RESERVED (typed buckets, left in place): root, variants, variant, size,
+ *     sizes, iconPosition, color, fullwidth, states, compoundVariants,
+ *     defaultVariants, props (+ existing `slots`)
+ *   - SLOTS (everything else): moved verbatim under `slots`.
+ *
+ * Pure + idempotent: re-running on already-migrated config is a no-op.
+ */
+
+// Single source of truth lives in lib/core so apps/saas can import it at
+// runtime (normalize-on-write). This script keeps the CLI wrapper.
+const { migrateConfig, migrateEnvelope, RESERVED } = require('../lib/core/components-config-slots');
+
+module.exports = { migrateConfig, migrateEnvelope, RESERVED };
+
+// CLI: node migrate-config-to-slots.js <in.json> [out.json]   (stdout if no out)
+if (require.main === module) {
+  const fs = require('fs');
+  const [, , inPath, outPath] = process.argv;
+  if (!inPath) {
+    console.error('usage: migrate-config-to-slots.js <in.json> [out.json]');
+    process.exit(1);
+  }
+  const cfg = JSON.parse(fs.readFileSync(inPath, 'utf8'));
+  const migrated = migrateConfig(cfg);
+  const json = JSON.stringify(migrated, null, 2);
+  if (outPath) fs.writeFileSync(outPath, json + '\n');
+  else process.stdout.write(json + '\n');
+}

package/scripts/resplit-buckets-codemod.js

@@ -0,0 +1,69 @@
+/**
+ * Re-split codemod: relocate the move-out keys from `.slots.X` to their bucket
+ * (`.props.X` / `.states.X` / `.variant.X`) in component consumption, matching
+ * the data re-bucketing in components-config-slots.js.
+ *
+ * Scoped to config-root vars (assigned from `ffdc(...)`) so unrelated `.slots`
+ * access is untouched. Handles dot access and bracket access (hyphenated keys
+ * like `inset-2col` are always bracket form).
+ *
+ * Idempotent: once a key is on its bucket it no longer matches `.slots.X`.
+ */
+
+const fs = require('fs');
+const { bucketFor, STATE_KEYS, PROP_KEYS, VARIANT_KEYS } = require('../lib/core/components-config-slots');
+
+// Keys to relocate out of slots (everything that isn't routed to 'slots').
+const MOVE_OUT = [...STATE_KEYS, ...PROP_KEYS, ...VARIANT_KEYS];
+
+function rewriteSource(src) {
+  let out = src;
+  const notes = [];
+
+  // Detect config-root vars: `const V = ffdc(...).<component>;` (chain length 1).
+  const roots = new Set();
+  const declRe = /\b(?:const|let|var)\s+(\w+)\s*=\s*ffdc\([^)]*\)\s*\.\s*\w+\s*;/g;
+  let m;
+  while ((m = declRe.exec(out)) !== null) roots.add(m[1]);
+  if (roots.size === 0) return { out, notes, changed: false };
+
+  for (const V of roots) {
+    const v = V.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    for (const key of MOVE_OUT) {
+      const bucket = bucketFor(key);
+      const k = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      // dot:   V.slots.key   (key must be a valid identifier)
+      if (/^[A-Za-z_$][\w$]*$/.test(key)) {
+        out = out.replace(
+          new RegExp(`(?<![\\w$])${v}\\.slots\\.${k}(?![\\w$])`, 'g'),
+          () => { notes.push(`${V}.slots.${key} -> ${V}.${bucket}.${key}`); return `${V}.${bucket}.${key}`; },
+        );
+      }
+      // bracket:  V.slots['key'] | V.slots["key"]
+      out = out.replace(
+        new RegExp(`(?<![\\w$])${v}\\.slots\\[(['"])${k}\\1\\]`, 'g'),
+        (mm, q) => { notes.push(`${V}.slots[${q}${key}${q}] -> ${V}.${bucket}[..]`); return `${V}.${bucket}[${q}${key}${q}]`; },
+      );
+    }
+  }
+  return { out, notes, changed: out !== src };
+}
+
+module.exports = { rewriteSource };
+
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  const write = args.includes('--write');
+  const files = args.filter((a) => a !== '--write');
+  let n = 0;
+  for (const f of files) {
+    const src = fs.readFileSync(f, 'utf8');
+    const { out, notes, changed } = rewriteSource(src);
+    if (changed) {
+      n++;
+      if (write) fs.writeFileSync(f, out);
+      console.log(`* ${f} (${notes.length})`);
+    }
+  }
+  console.log(`${n} file(s) ${write ? 'written' : 'would change'} of ${files.length}.`);
+}

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

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 const fs = require('fs');
 const path = require('path');
+const { migrateConfig } = require('./migrate-config-to-slots');
 
 const packageRoot = path.join(__dirname, '..');
 const repoRoot = path.join(packageRoot, '..', '..');
@@ -670,7 +671,11 @@ function buildDefaultConfigData(rawMasterConfig) {
     throw new Error(`Default config still contains FrontFriend-only classes: ${forbidden.join(', ')}`);
   }
 
-  return generated;
+  // The master source and the shadcn override maps are authored in the legacy
+  // "direct named slots" shape; the path-based neutralize/merge above relies on
+  // that. Migrate the finished config to the canonical top-level `slots:{}`
+  // layout so the bundled fallback matches the component library contract.
+  return migrateConfig(generated);
 }
 
 function generateDefaultConfigData() {