@signalflare-ai/ui 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalflare-ai/ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": false,
   "description": "SignalFlare AI component library for building modern web applications",
   "keywords": [
@@ -550,64 +550,67 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@base-ui/react": "1.4.1",
-    "@json-render/core": "^0.18.0",
-    "@json-render/react": "^0.18.0",
+    "@base-ui/react": "1.5.0",
+    "@chenglou/pretext": "^0.0.7",
+    "@json-render/core": "^0.19.0",
+    "@json-render/react": "^0.19.0",
     "@tanstack/react-store": "^0.11.0",
     "@tanstack/store": "^0.11.0",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
-    "@storybook/addon-mcp": "^0.5.0",
-    "@storybook/addon-themes": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
+    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-themes": "^10.4.2",
+    "@storybook/addon-vitest": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
     "@streamdown/code": "^1.1.1",
     "@tailwindcss/cli": "catalog:",
     "@tailwindcss/vite": "catalog:",
-    "@tanstack/intent": "^0.0.34",
-    "@tanstack/react-table": "^8.21.0",
-    "@tanstack/react-virtual": "^3.13.24",
+    "@tanstack/intent": "^0.0.41",
+    "@tanstack/react-table": "9.0.0-alpha.52",
+    "@tanstack/react-virtual": "^3.14.2",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
     "@types/leaflet": "^1.9.21",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser": "^4.1.5",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "@vitest/ui": "catalog:",
-    "echarts": "^6.0.0",
+    "echarts": "^6.1.0",
     "h3-js": "^4.4.0",
     "happy-dom": "catalog:",
     "leaflet": "^1.9.4",
-    "motion": "^12.38.0",
+    "motion": "^12.40.0",
     "oxlint": "catalog:",
-    "playwright": "^1.52.0",
+    "playwright": "^1.60.0",
     "plop": "4.0.5",
     "react-day-picker": "^9.13.2",
-    "storybook": "^10.3.5",
+    "storybook": "^10.4.2",
     "streamdown": "^2.5.0",
-    "sugar-high": "^1.0.0",
+    "sugar-high": "^1.2.1",
     "tailwindcss": "catalog:",
     "ts-json-schema-generator": "2.9.0",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-plugin-dts": "catalog:",
     "vitest": "catalog:",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.10",
     "@streamdown/code": "^1.1.1",
-    "@tanstack/react-table": "^8.21.0",
-    "@tanstack/react-virtual": "^3.13.22",
+    "@tanstack/react-table": "9.0.0-alpha.52",
+    "@tanstack/react-virtual": "^3.13.26",
     "echarts": "^6.0.0",
     "motion": "^12.38.0",
-    "react": "^19.2.5",
+    "react": "^19.2.7",
     "react-day-picker": "^9.13.2",
-    "react-dom": "^19.2.5",
+    "react-dom": "^19.2.7",
     "streamdown": "^2.5.0",
     "sugar-high": "^1.0.0",
     "zod": "^3.25.67 || ^4.3.6"

package/scripts/component-registry/discovery.ts

@@ -104,7 +104,7 @@ export function detectExportsFromIndex(dirPath: string): DetectedExports {
 
     // Match named exports: export { Foo, Bar, type BazProps } from "./file"
     // Also handles: export { Foo } from "./file"
-    const exportPattern = /export\s*\{([^}]+)\}/g;
+    const exportPattern = /export\s*\{([^}]+)\}/gu;
     let match: RegExpExecArray | null;
 
     const namedExports: string[] = [];
@@ -120,13 +120,13 @@ export function detectExportsFromIndex(dirPath: string): DetectedExports {
 
       for (const item of items) {
         // Check if it's a type export: "type FooProps" or "type Foo as Bar"
-        const typeMatch = /^type\s+(\w+)(?:\s+as\s+(\w+))?/.exec(item);
+        const typeMatch = /^type\s+(\w+)(?:\s+as\s+(\w+))?/u.exec(item);
         if (typeMatch) {
           // Use aliased name if present, otherwise original name
           typeExports.push(typeMatch[2] || typeMatch[1]);
         } else {
           // Regular named export, could have "as" alias: "Foo as Bar"
-          const nameMatch = /^(\w+)(?:\s+as\s+(\w+))?/.exec(item);
+          const nameMatch = /^(\w+)(?:\s+as\s+(\w+))?/u.exec(item);
           if (nameMatch) {
             // Use aliased name if present, otherwise original name
             namedExports.push(nameMatch[2] || nameMatch[1]);
@@ -136,7 +136,7 @@ export function detectExportsFromIndex(dirPath: string): DetectedExports {
     }
 
     // Also match direct exports: export const Foo = ...
-    const directExportPattern = /export\s+(?:const|function)\s+(\w+)/g;
+    const directExportPattern = /export\s+(?:const|function)\s+(\w+)/gu;
     while ((match = directExportPattern.exec(content)) !== null) {
       namedExports.push(match[1]);
     }
@@ -196,9 +196,9 @@ export function detectPropsTypeFromFile(
 
     // Look for interface/type that ends with Props (both exported and non-exported)
     // Pattern: [export] interface FooProps or [export] type FooProps
-    const exportedPropsPattern = /export\s+(?:interface|type)\s+(\w+Props)/g;
+    const exportedPropsPattern = /export\s+(?:interface|type)\s+(\w+Props)/gu;
     const nonExportedPropsPattern =
-      /(?:^|\n)\s*(?:interface|type)\s+(\w+Props)\s*[=<{]/g;
+      /(?:^|\n)\s*(?:interface|type)\s+(\w+Props)\s*[=<{]/gu;
 
     const exportedTypes: string[] = [];
     const nonExportedTypes: string[] = [];
@@ -243,7 +243,7 @@ function extractDescriptionFromJSDoc(jsdocContent: string): string | null {
   const lines: string[] = [];
 
   for (const rawLine of jsdocContent.split("\n")) {
-    const line = rawLine.replace(/^\s*\*\s?/, "").trim();
+    const line = rawLine.replace(/^\s*\*\s?/u, "").trim();
 
     // Stop at any @tag
     if (line.startsWith("@")) {
@@ -291,7 +291,8 @@ export function extractDescription(
     // First, find the position of the component declaration
     // Handles: export function X, export const X =, function X(
     const componentDeclPattern = new RegExp(
-      `(?:export\\s+)?(?:function|const)\\s+${componentName}\\s*(?:=|\\()`
+      `(?:export\\s+)?(?:function|const)\\s+${componentName}\\s*(?:=|\\()`,
+      "u"
     );
     const componentMatch = content.match(componentDeclPattern);
 
@@ -302,7 +303,7 @@ export function extractDescription(
     const componentPos = componentMatch.index;
 
     // Find all JSDoc comments in the file
-    const jsdocPattern = /\/\*\*\s*\n([\s\S]*?)\*\//g;
+    const jsdocPattern = /\/\*\*\s*\n([\s\S]*?)\*\//gu;
     let lastJSDoc: { content: string; endPos: number } | null = null;
     let match: RegExpExecArray | null;
 
@@ -317,7 +318,7 @@ export function extractDescription(
       // Check if this JSDoc is immediately before the component
       // (only whitespace/newlines between JSDoc end and component declaration)
       const textBetween = content.slice(jsdocEndPos, componentPos);
-      if (/^\s*$/.test(textBetween)) {
+      if (/^\s*$/u.test(textBetween)) {
         lastJSDoc = { content: match[1], endPos: jsdocEndPos };
       }
     }

package/scripts/component-registry/example-cleanup.ts

@@ -21,26 +21,26 @@ export function cleanupExample(example: string): string {
   let cleaned = example;
 
   // Fix stringified functions: prop="() => {}" -> prop={() => {}}
-  cleaned = cleaned.replace(/(\w+)="(\(\)\s*=>\s*\{[^}]*\})"/g, "$1={$2}");
+  cleaned = cleaned.replace(/(\w+)="(\(\)\s*=>\s*\{[^}]*\})"/gu, "$1={$2}");
 
   // Fix stringified arrays: prop={`[...]`} -> prop={[...]}
   // Match prop={`[...multiline content...]`}
-  cleaned = cleaned.replace(/(\w+)=\{`(\[[\s\S]*?\])`\}/g, "$1={$2}");
+  cleaned = cleaned.replace(/(\w+)=\{`(\[[\s\S]*?\])`\}/gu, "$1={$2}");
 
   // Fix escaped template literals: \` -> `
-  cleaned = cleaned.replace(/\\`/g, "`");
+  cleaned = cleaned.replace(/\\`/gu, "`");
 
   // Fix double backticks that result from escaping: {``content``} -> {`content`}
   // This happens when template literals get double-escaped
-  cleaned = cleaned.replace(/\{``/g, "{`");
-  cleaned = cleaned.replace(/``\}/g, "`}");
+  cleaned = cleaned.replace(/\{``/gu, "{`");
+  cleaned = cleaned.replace(/``\}/gu, "`}");
 
   // Fix unquoted identifiers that should be strings (common in Checkbox labels)
   // label={Checked} -> label="Checked" (when it's clearly meant to be a string)
   const identifierAsStringProps = ["label"];
   for (const prop of identifierAsStringProps) {
     // Match prop={SingleWord} where SingleWord is a simple identifier (not a component or expression)
-    const pattern = new RegExp(`(${prop})=\\{([A-Z][a-z]+)\\}(?![\\w.])`, "g");
+    const pattern = new RegExp(`(${prop})=\\{([A-Z][a-z]+)\\}(?![\\w.])`, "gu");
     cleaned = cleaned.replace(pattern, '$1="$2"');
   }
 
@@ -91,7 +91,7 @@ export function shouldIncludeExample(
   }
 
   // Skip examples that are just the component with no props (not useful)
-  const emptyPattern = new RegExp(`^<${componentName}\\s*/>$`);
+  const emptyPattern = new RegExp(`^<${componentName}\\s*/>$`, "u");
   if (emptyPattern.test(example.trim())) {
     return false;
   }
@@ -122,7 +122,7 @@ const seenExampleSignatures = new Map<string, Set<string>>();
  */
 export function getExampleSignature(example: string): string {
   // Extract prop assignments like variant="primary" or size="sm"
-  const propPattern = /(\w+)=["'{]/g;
+  const propPattern = /(\w+)=["'{]/gu;
   const props: string[] = [];
   let match: RegExpExecArray | null;
   while ((match = propPattern.exec(example)) !== null) {

package/scripts/component-registry/index.ts

@@ -548,15 +548,15 @@ async function processComponent(
   const additionalProps = ADDITIONAL_COMPONENT_PROPS[config.name];
   if (additionalProps) {
     for (const [propName, propSchema] of Object.entries(additionalProps)) {
-      if (!props[propName]) {
-        props[propName] = propSchema;
-      } else {
+      if (props[propName]) {
         if (propSchema.type) {
           props[propName].type = propSchema.type;
         }
         if (propSchema.description) {
           props[propName].description = propSchema.description;
         }
+      } else {
+        props[propName] = propSchema;
       }
     }
   }
@@ -575,9 +575,7 @@ async function processComponent(
 
   // Determine examples
   let examples: readonly string[];
-  if (config.examples !== undefined) {
-    examples = config.examples;
-  } else {
+  if (config.examples === undefined) {
     const extracted = input.storyExamples.get(config.name);
     examples = extracted?.aiExamples ?? [];
     if (examples.length > 0 && CLI_FLAGS.verbose) {
@@ -585,6 +583,8 @@ async function processComponent(
         `    → Auto-extracted ${examples.length} examples from stories`
       );
     }
+  } else {
+    examples = config.examples;
   }
 
   // Detect and process sub-components

package/scripts/component-registry/schema-generator.ts

@@ -75,7 +75,7 @@ function generateComponentPropsSchema(
     const zodType = propTypeToZod(propSchema);
     // Replace newlines with spaces to keep comments on a single line
     const sanitizedDescription = propSchema.description
-      ?.replace(/\n+/g, " ")
+      ?.replace(/\n+/gu, " ")
       .trim();
     const comment = sanitizedDescription ? ` // ${sanitizedDescription}` : "";
     return `  ${propName}: ${zodType},${comment}`;

package/scripts/component-registry/sub-components.ts

@@ -30,7 +30,7 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
     // Pattern 1: Object.assign with sub-components
     // Find the start of Object.assign and then extract the balanced braces
     // Supports both simple names (Component) and dotted names (SomeBase.Root)
-    const objectAssignStart = /Object\.assign\s*\(\s*[\w.]+\s*,\s*\{/g;
+    const objectAssignStart = /Object\.assign\s*\(\s*[\w.]+\s*,\s*\{/gu;
     let startMatch: RegExpExecArray | null;
 
     while ((startMatch = objectAssignStart.exec(content)) !== null) {
@@ -42,7 +42,7 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
 
       // Extract sub-component assignments: SubName: Value or SubName: SomeBase.SubName
       // Handle multi-line with comments
-      const subPattern = /^\s*(\w+)\s*[,:]/gm;
+      const subPattern = /^\s*(\w+)\s*[,:]/gmu;
       let subMatch: RegExpExecArray | null;
 
       while ((subMatch = subPattern.exec(assignBlock)) !== null) {
@@ -59,14 +59,15 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
             "function",
             "description",
           ].includes(subName) ||
-          !/^[A-Z]/.test(subName)
+          !/^[A-Z]/u.test(subName)
         ) {
           continue;
         }
 
         // Find the value after the colon for this sub-component
         const valuePattern = new RegExp(
-          `\\b${subName}\\s*:\\s*(\\w+(?:\\.\\w+)?)`
+          `\\b${subName}\\s*:\\s*(\\w+(?:\\.\\w+)?)`,
+          "u"
         );
         const valueMatch = assignBlock.match(valuePattern);
         const value = valueMatch ? valueMatch[1] : subName;
@@ -81,7 +82,8 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
         // Look for function signature or interface for this sub-component
         // Pattern: function SubName({ ... }: SubNameProps) or function SubName(props: SubNameProps)
         const funcPropsPattern = new RegExp(
-          `function\\s+${value}\\s*(?:<[^>]*>)?\\s*\\([^)]*:\\s*(\\w+Props)`
+          `function\\s+${value}\\s*(?:<[^>]*>)?\\s*\\([^)]*:\\s*(\\w+Props)`,
+          "u"
         );
         const funcMatch = content.match(funcPropsPattern);
         if (funcMatch) {
@@ -90,7 +92,8 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
 
         // Also check for inline type in PropsWithChildren pattern
         const propsWithChildrenPattern = new RegExp(
-          `function\\s+${value}\\s*\\([^)]*:\\s*PropsWithChildren<\\{([^}]+)\\}>`
+          `function\\s+${value}\\s*\\([^)]*:\\s*PropsWithChildren<\\{([^}]+)\\}>`,
+          "u"
         );
         const pwcMatch = content.match(propsWithChildrenPattern);
         if (pwcMatch && !propsType) {
@@ -122,7 +125,7 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
 
     // Pattern 2: Direct property assignment at module level (e.g., Breadcrumb.Link = Link)
     // Must be at start of line (module level) and sub-component name must be PascalCase
-    const directAssignPattern = /^([A-Z]\w+)\.([A-Z]\w+)\s*=\s*(\w+)\s*;/gm;
+    const directAssignPattern = /^([A-Z]\w+)\.([A-Z]\w+)\s*=\s*(\w+)\s*;/gmu;
     let directMatch: RegExpExecArray | null;
 
     while ((directMatch = directAssignPattern.exec(content)) !== null) {
@@ -142,7 +145,8 @@ export function detectSubComponents(filePath: string): SubComponentConfig[] {
       // Try to find props type for this sub-component
       let propsType: string | null = null;
       const funcPropsPattern = new RegExp(
-        `function\\s+${value}\\s*(?:<[^>]*>)?\\s*\\([^)]*:\\s*(\\w+Props)`
+        `function\\s+${value}\\s*(?:<[^>]*>)?\\s*\\([^)]*:\\s*(\\w+Props)`,
+        "u"
       );
       const funcMatch = content.match(funcPropsPattern);
       if (funcMatch) {
@@ -195,11 +199,13 @@ export function extractSubComponentProps(
     const inlinePropsPatterns = [
       // function Name({ destructured }: { inline props })
       new RegExp(
-        `(?:function|const)\\s+${funcName}\\s*=?\\s*\\([^)]*:\\s*(?:PropsWithChildren<)?\\{([^}]+)\\}`
+        `(?:function|const)\\s+${funcName}\\s*=?\\s*\\([^)]*:\\s*(?:PropsWithChildren<)?\\{([^}]+)\\}`,
+        "u"
       ),
       // function Name({ destructured }: PropsWithChildren<InterfaceName>)
       new RegExp(
-        `(?:function|const)\\s+${funcName}\\s*=?\\s*\\([^)]*:\\s*PropsWithChildren<(\\w+)>`
+        `(?:function|const)\\s+${funcName}\\s*=?\\s*\\([^)]*:\\s*PropsWithChildren<(\\w+)>`,
+        "u"
       ),
     ];
 
@@ -209,7 +215,7 @@ export function extractSubComponentProps(
         const propsBlock = match[1];
 
         // Check if it's an interface name (single word) or inline props
-        if (/^\w+$/.test(propsBlock)) {
+        if (/^\w+$/u.test(propsBlock)) {
           // It's an interface name, try to find and parse it
           const interfaceProps = extractPropsFromInterface(
             content,
@@ -219,7 +225,7 @@ export function extractSubComponentProps(
           Object.assign(props, interfaceProps);
         } else {
           // Parse inline props: propName?: Type or propName: Type
-          const propPattern = /(\w+)(\?)?:\s*([^;,\n}]+)/g;
+          const propPattern = /(\w+)(\?)?:\s*([^;,\n}]+)/gu;
           let propMatch: RegExpExecArray | null;
 
           while ((propMatch = propPattern.exec(propsBlock)) !== null) {
@@ -228,7 +234,7 @@ export function extractSubComponentProps(
             let propType = propMatch[3].trim();
 
             // Clean up type
-            propType = propType.replace(/[,;]$/, "").trim();
+            propType = propType.replace(/[,;]$/u, "").trim();
 
             if (shouldSkipProp(propName, cliFlags)) continue;
 
@@ -263,9 +269,9 @@ export function extractSubComponentProps(
       // This handles multi-line destructuring patterns
       const funcDefPatterns = [
         // Arrow function: const Name = (...)
-        new RegExp(`const\\s+${funcName}\\s*=\\s*\\([\\s\\S]*?\\)\\s*=>`),
+        new RegExp(`const\\s+${funcName}\\s*=\\s*\\([\\s\\S]*?\\)\\s*=>`, "u"),
         // Regular function: function Name(...)
-        new RegExp(`function\\s+${funcName}\\s*\\([\\s\\S]*?\\)\\s*\\{`),
+        new RegExp(`function\\s+${funcName}\\s*\\([\\s\\S]*?\\)\\s*\\{`, "u"),
       ];
 
       for (const defPattern of funcDefPatterns) {
@@ -275,9 +281,9 @@ export function extractSubComponentProps(
 
           // Extract PropsWithChildren<InterfaceName> or direct interface reference
           const typePatterns = [
-            /PropsWithChildren<(\w+)>/,
-            /:\s*(\w+Props)\s*\)/,
-            /:\s*(\w+ItemProps)\s*\)/,
+            /PropsWithChildren<(\w+)>/u,
+            /:\s*(\w+Props)\s*\)/u,
+            /:\s*(\w+ItemProps)\s*\)/u,
           ];
 
           for (const typePattern of typePatterns) {
@@ -319,15 +325,21 @@ export function extractPropsFromInterface(
 ): Record<string, PropSchema> {
   const props: Record<string, PropSchema> = {};
 
-  // Match interface definition
+  // Match interface definition, or a type alias whose definition contains an
+  // inline object literal (e.g. `type FooProps = ComponentProps<X> & { ... }`).
   const interfacePattern = new RegExp(
-    `interface\\s+${interfaceName}\\s*(?:extends[^{]*)?\\{([^}]+)\\}`
+    `interface\\s+${interfaceName}\\s*(?:extends[^{]*)?\\{([^}]+)\\}`,
+    "u"
   );
-  const match = content.match(interfacePattern);
+  const typePattern = new RegExp(
+    `type\\s+${interfaceName}\\s*=[^{]*\\{([^}]+)\\}`,
+    "u"
+  );
+  const match = content.match(interfacePattern) ?? content.match(typePattern);
 
   if (match) {
     const propsBlock = match[1];
-    const propPattern = /(\w+)(\?)?:\s*([^;,\n}]+)/g;
+    const propPattern = /(\w+)(\?)?:\s*([^;,\n}]+)/gu;
     let propMatch: RegExpExecArray | null;
 
     while ((propMatch = propPattern.exec(propsBlock)) !== null) {
@@ -335,7 +347,7 @@ export function extractPropsFromInterface(
       const isOptional = propMatch[2] === "?";
       let propType = propMatch[3].trim();
 
-      propType = propType.replace(/[,;]$/, "").trim();
+      propType = propType.replace(/[,;]$/u, "").trim();
 
       if (shouldSkipProp(propName, cliFlags)) continue;
 

package/scripts/component-registry/utils.ts

@@ -31,8 +31,8 @@ export function toPascalCase(str: string): string {
  */
 export function toScreamingSnakeCase(str: string): string {
   return str
-    .replace(/([a-z])([A-Z])/g, "$1_$2")
-    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1_$2")
+    .replace(/([a-z])([A-Z])/gu, "$1_$2")
+    .replace(/([A-Z]+)([A-Z][a-z])/gu, "$1_$2")
     .toUpperCase();
 }
 
@@ -90,7 +90,7 @@ export function parseSemanticColorNames(): string[] {
   // Pattern: "--color-<name>: light-dark(" or "--text-color-<name>: light-dark("
   // This excludes raw palette colors which are defined with direct values like "oklch(...)"
   const semanticColorPattern =
-    /--(?:text-)?color-([a-zA-Z][a-zA-Z0-9-]*)\s*:\s*light-dark\(/g;
+    /--(?:text-)?color-([a-zA-Z][a-zA-Z0-9-]*)\s*:\s*light-dark\(/gu;
   let match: RegExpExecArray | null;
 
   while ((match = semanticColorPattern.exec(content)) !== null) {
@@ -129,7 +129,7 @@ export function extractSemanticColors(sourceFile: string): string[] {
         // Escape hyphens for regex and create pattern
         const pattern = new RegExp(
           `(?:[\\w\\[\\]=_-]+:)*(${prefix}-${colorName})(?![a-zA-Z0-9-])`,
-          "g"
+          "gu"
         );
         let match: RegExpExecArray | null;
         while ((match = pattern.exec(content)) !== null) {
@@ -159,19 +159,19 @@ export function extractStateClasses(
   const states: Record<string, string> = {};
 
   // Split by whitespace to process each class individually
-  const classes = classString.split(/\s+/);
+  const classes = classString.split(/\s+/u);
 
   for (const cls of classes) {
     if (!cls) continue;
 
     // Check for hover states
-    if (cls.startsWith("hover:") || /^\[&:hover[^\]]*\]:/.exec(cls)) {
+    if (cls.startsWith("hover:") || /^\[&:hover[^\]]*\]:/u.exec(cls)) {
       states.hover = states.hover ? `${states.hover} ${cls}` : cls;
     }
     // Check for focus states (focus, focus-visible, focus-within)
     else if (
-      /^(focus|focus-visible|focus-within):/.exec(cls) ||
-      /^\[&:focus(-visible|-within)?[^\]]*\]:/.exec(cls)
+      /^(focus|focus-visible|focus-within):/u.exec(cls) ||
+      /^\[&:focus(-visible|-within)?[^\]]*\]:/u.exec(cls)
     ) {
       states.focus = states.focus ? `${states.focus} ${cls}` : cls;
     }
@@ -190,7 +190,7 @@ export function extractStateClasses(
         : cls;
     }
     // Check for data-state
-    else if (/^data-\[state=[^\]]+\]:/.test(cls)) {
+    else if (/^data-\[state=[^\]]+\]:/u.test(cls)) {
       states["data-state"] = states["data-state"]
         ? `${states["data-state"]} ${cls}`
         : cls;
@@ -218,7 +218,7 @@ export function extractBlockDependencies(sourceFile: string): string[] {
     // Pattern: import { Foo, Bar } from "../../components/something"
     // Pattern: import { Foo } from "../../blocks/something"
     const importPattern =
-      /import\s+(?:type\s+)?\{([^}]+)\}\s+from\s+["']\.\.\/\.\.\/(?:components|blocks)\/[^"']+["']/g;
+      /import\s+(?:type\s+)?\{([^}]+)\}\s+from\s+["']\.\.\/\.\.\/(?:components|blocks)\/[^"']+["']/gu;
     let match: RegExpExecArray | null;
 
     while ((match = importPattern.exec(content)) !== null) {
@@ -235,7 +235,7 @@ export function extractBlockDependencies(sourceFile: string): string[] {
           continue;
         }
         // Extract name (handle "Foo as Bar" -> "Foo")
-        const nameMatch = /^(\w+)(?:\s+as\s+\w+)?/.exec(item);
+        const nameMatch = /^(\w+)(?:\s+as\s+\w+)?/u.exec(item);
         if (nameMatch) {
           dependencies.add(nameMatch[1]);
         }

package/scripts/component-registry/variant-parser.ts

@@ -36,7 +36,7 @@ export function extractBaseStylesFromFile(filePath: string): string | null {
     // Match: export const SF_*_BASE_STYLES = "..." or '...' or `...`
     // Handles multi-line strings with template literals
     const baseStylesMatch =
-      /export\s+const\s+SF_\w+_BASE_STYLES\s*=\s*["'`]([^"'`]+)["'`]/.exec(
+      /export\s+const\s+SF_\w+_BASE_STYLES\s*=\s*["'`]([^"'`]+)["'`]/u.exec(
         content
       );
 
@@ -67,7 +67,7 @@ export function parseVariantsObject(
 
   // Find top-level property names (e.g., shape, size, variant)
   // These are identifiers followed by `: {` at the first nesting level
-  const topLevelPropPattern = /^\s*(\w+)\s*:\s*\{/gm;
+  const topLevelPropPattern = /^\s*(\w+)\s*:\s*\{/gmu;
   let propMatch: RegExpExecArray | null;
 
   while ((propMatch = topLevelPropPattern.exec(objStr)) !== null) {
@@ -86,7 +86,7 @@ export function parseVariantsObject(
     // biome-ignore lint/suspicious/noExplicitAny: Variants have varying shapes
     const variants: Record<string, any> = {};
     // Match variant names including quoted keys like "secondary-destructive"
-    const variantPropPattern = /^\s*(?:"([^"]+)"|'([^']+)'|(\w+))\s*:\s*\{/gm;
+    const variantPropPattern = /^\s*(?:"([^"]+)"|'([^']+)'|(\w+))\s*:\s*\{/gmu;
     let variantMatch: RegExpExecArray | null;
 
     while ((variantMatch = variantPropPattern.exec(propBlock)) !== null) {
@@ -103,9 +103,11 @@ export function parseVariantsObject(
       if (!variantBlock) continue;
 
       // Extract description if present
-      const descMatch = /description\s*:\s*["']([^"']*)["']/.exec(variantBlock);
+      const descMatch = /description\s*:\s*["']([^"']*)["']/u.exec(
+        variantBlock
+      );
       // Extract classes if present (for Figma plugin consumption)
-      const classesMatch = /classes\s*:\s*["']([^"']*)["']/.exec(variantBlock);
+      const classesMatch = /classes\s*:\s*["']([^"']*)["']/u.exec(variantBlock);
 
       // Extract state classes from the classes string
       const stateClasses = classesMatch
@@ -134,7 +136,7 @@ export function parseDefaultsObject(objStr: string): Record<string, string> {
   const result: Record<string, string> = {};
 
   // Match properties like: variant: "primary", size: "base"
-  const propPattern = /(\w+)\s*:\s*["']([^"']*)["']/g;
+  const propPattern = /(\w+)\s*:\s*["']([^"']*)["']/gu;
   let match: RegExpExecArray | null;
 
   while ((match = propPattern.exec(objStr)) !== null) {
@@ -159,12 +161,12 @@ export function extractVariantsFromFile(
     const content = readFileSync(filePath, "utf-8");
 
     // Find SF_*_VARIANTS export start position
-    const variantsStartMatch = /export\s+const\s+SF_\w+_VARIANTS\s*=\s*/.exec(
+    const variantsStartMatch = /export\s+const\s+SF_\w+_VARIANTS\s*=\s*/u.exec(
       content
     );
     // Find SF_*_DEFAULT_VARIANTS export start position
     const defaultsStartMatch =
-      /export\s+const\s+SF_\w+_DEFAULT_VARIANTS\s*=\s*/.exec(content);
+      /export\s+const\s+SF_\w+_DEFAULT_VARIANTS\s*=\s*/u.exec(content);
 
     if (!variantsStartMatch || !defaultsStartMatch) {
       return null;
@@ -212,7 +214,7 @@ export function extractVariantsFromFile(
 function parseStylingObject(objStr: string): ComponentStyling | null {
   try {
     // Remove 'as const' suffix if present
-    const cleanedStr = objStr.replace(/\s*as\s+const\s*$/, "");
+    const cleanedStr = objStr.replace(/\s*as\s+const\s*$/u, "");
 
     // Security: Parse as JSON-like structure instead of executing code
     // This prevents RCE if a source file is compromised
@@ -234,14 +236,14 @@ function parseObjectLiteralSafely(
   const result: Record<string, unknown> = {};
 
   // Remove outer braces
-  const content = objStr.trim().replace(/^\{/, "").replace(/\}$/, "").trim();
+  const content = objStr.trim().replace(/^\{/u, "").replace(/\}$/u, "").trim();
   if (!content) return {};
 
   // Split by top-level commas (not inside nested braces)
   const properties = splitTopLevelProperties(content);
 
   for (const prop of properties) {
-    const match = /^\s*(\w+)\s*:\s*(.+)$/s.exec(prop);
+    const match = /^\s*(\w+)\s*:\s*(.+)$/su.exec(prop);
     if (!match) continue;
 
     const key = match[1];
@@ -301,20 +303,20 @@ function parseValue(valueStr: string): unknown {
   if (valueStr.startsWith("[")) {
     try {
       // Arrays are typically simple in styling configs
-      return JSON.parse(valueStr.replace(/'/g, '"'));
+      return JSON.parse(valueStr.replace(/'/gu, '"'));
     } catch {
       return null;
     }
   }
 
   // Handle strings (single or double quotes)
-  const stringMatch = /^["'](.+)["']$/s.exec(valueStr);
+  const stringMatch = /^["'](.+)["']$/su.exec(valueStr);
   if (stringMatch) {
     return stringMatch[1];
   }
 
   // Handle numbers
-  if (/^-?\d+(\.\d+)?$/.test(valueStr)) {
+  if (/^-?\d+(\.\d+)?$/u.test(valueStr)) {
     return Number(valueStr);
   }
 
@@ -343,7 +345,7 @@ export function extractStylingFromFile(
     const content = readFileSync(filePath, "utf-8");
 
     // Find SF_*_STYLING export start position
-    const stylingStartMatch = /export\s+const\s+SF_\w+_STYLING\s*=\s*/.exec(
+    const stylingStartMatch = /export\s+const\s+SF_\w+_STYLING\s*=\s*/u.exec(
       content
     );