funuicss 3.8.12 → 3.8.14

package/utils/componentUtils.js

@@ -95,7 +95,53 @@ var getAsset = function (assetName, projectData) {
     return asset || null;
 };
 /**
- * Interpolate values (variables and assets) in props
+ * Check if a value is a bucket reference and extract bucket info
+ */
+var extractBucketInfo = function (value, props, projectData) {
+    if (typeof value !== 'string')
+        return null;
+    // Check if it's a bucket reference {{bucket_name}}
+    var bucketMatch = value.match(/^\{\{\s*([^}]+)\s*\}\}$/);
+    if (!bucketMatch)
+        return null;
+    var bucketReference = bucketMatch[1].trim();
+    // Try to get the actual bucket name from variables
+    var bucketName = getVariableValue(bucketReference, projectData) || bucketReference;
+    // Get bucketPage from props (with variable interpolation if needed)
+    var bucketPage = 1;
+    var bucketPageValue = props.bucketPage;
+    if (bucketPageValue !== undefined) {
+        if (typeof bucketPageValue === 'number') {
+            bucketPage = bucketPageValue;
+        }
+        else if (typeof bucketPageValue === 'string') {
+            // Check if bucketPage is also a variable reference
+            var pageVariableName = extractVariableName(bucketPageValue);
+            if (pageVariableName) {
+                var pageValue = getVariableValue(pageVariableName, projectData);
+                if (pageValue) {
+                    var parsed = parseInt(pageValue, 10);
+                    if (!isNaN(parsed) && parsed > 0) {
+                        bucketPage = parsed;
+                    }
+                }
+            }
+            else {
+                // Direct number string
+                var parsed = parseInt(bucketPageValue, 10);
+                if (!isNaN(parsed) && parsed > 0) {
+                    bucketPage = parsed;
+                }
+            }
+        }
+    }
+    return {
+        bucketName: bucketName,
+        bucketPage: Math.max(1, bucketPage)
+    };
+};
+/**
+ * Interpolate values (variables, assets, and buckets) in props
  */
 var interpolateValues = function (props, projectData) {
     if (!props || Object.keys(props).length === 0) {
@@ -133,7 +179,9 @@ var interpolateValues = function (props, projectData) {
                 result[key] = variableMap[variableName];
                 continue;
             }
-            // No interpolation needed
+            // Check for bucket reference (treated specially in components)
+            // We don't interpolate bucket references here - they stay as {{bucket_name}}
+            // for the component to handle
             result[key] = value;
         }
         // Handle arrays - process string elements only
@@ -169,6 +217,26 @@ var interpolateValues = function (props, projectData) {
     }
     return result;
 };
+/**
+ * Process props specifically for Store component to handle bucket references
+ */
+var processStoreProps = function (props, projectData) {
+    var result = __assign({}, props);
+    // Check if this is a Store component and has bucket prop
+    if (props.bucket) {
+        var bucketInfo = extractBucketInfo(props.bucket, props, projectData);
+        if (bucketInfo) {
+            // Replace bucket reference with actual bucket name
+            result.bucket = bucketInfo.bucketName;
+            // Ensure bucketPage is set (override if not provided or use extracted value)
+            if (props.bucketPage === undefined || typeof props.bucketPage === 'string') {
+                result.bucketPage = bucketInfo.bucketPage;
+            }
+            console.log("Processed bucket reference: ".concat(props.bucket, " -> ").concat(bucketInfo.bucketName, ", page: ").concat(bucketInfo.bucketPage));
+        }
+    }
+    return result;
+};
 /**
  * Universal component config getter with interpolation
  */
@@ -215,8 +283,12 @@ var getComponentConfig = function (projectData, componentName, variantName) {
     var filteredComponentProps = filterEmptyProps((variantData === null || variantData === void 0 ? void 0 : variantData.componentProps) || {});
     // Apply interpolation to component props
     var interpolatedProps = interpolateValues(filteredComponentProps, projectData);
+    // Special processing for Store component bucket references
+    var processedProps = componentName === 'Store'
+        ? processStoreProps(interpolatedProps, projectData)
+        : interpolatedProps;
     return {
-        componentProps: interpolatedProps,
+        componentProps: processedProps,
         variantExists: variantExists,
         actualVariant: targetVariant,
         availableVariants: availableVariants,
@@ -227,7 +299,7 @@ exports.getComponentConfig = getComponentConfig;
 /**
  * Smart merge utility - LOCAL PROPS OVERRIDE CONFIG PROPS
  */
-var smartMergeWithLocalOverride = function (configProps, localProps, projectData) {
+var smartMergeWithLocalOverride = function (configProps, localProps, projectData, componentName) {
     // Start with interpolated config props
     var interpolatedConfigProps = interpolateValues(configProps, projectData);
     // Simple merge: local props override config props
@@ -242,26 +314,34 @@ var smartMergeWithLocalOverride = function (configProps, localProps, projectData
         }
     }
     // Final interpolation pass to handle any variable/asset references in local props
-    return interpolateValues(result, projectData);
+    var interpolatedResult = interpolateValues(result, projectData);
+    // Special processing for Store component bucket references
+    return componentName === 'Store'
+        ? processStoreProps(interpolatedResult, projectData)
+        : interpolatedResult;
 };
 /**
  * Merge component config with local props
  */
-var mergeComponentConfig = function (config, localProps, projectData) {
+var mergeComponentConfig = function (config, localProps, projectData, componentName) {
     if (localProps === void 0) { localProps = {}; }
     // Only apply config if variant exists and has actual configuration
     var hasValidConfig = config.variantExists && Object.keys(config.componentProps).length > 0;
     if (!hasValidConfig) {
         // Still interpolate values in local props even if no config
         var interpolatedLocalProps = interpolateValues(localProps, projectData);
+        // Special processing for Store component
+        var processedLocalProps = componentName === 'Store'
+            ? processStoreProps(interpolatedLocalProps, projectData)
+            : interpolatedLocalProps;
         return {
-            props: interpolatedLocalProps,
+            props: processedLocalProps,
             variant: config.actualVariant,
             hasConfig: false
         };
     }
     return {
-        props: smartMergeWithLocalOverride(config.componentProps, localProps, projectData),
+        props: smartMergeWithLocalOverride(config.componentProps, localProps, projectData, componentName),
         variant: config.actualVariant,
         hasConfig: true
     };
@@ -291,15 +371,18 @@ var useComponentConfiguration = function (componentName, variantName) {
             if (localProps === void 0) { localProps = {}; }
             if (!isValidVariantName(variantName)) {
                 var interpolatedLocalProps = interpolateValues(localProps, projectData);
+                var processedLocalProps = componentName === 'Store'
+                    ? processStoreProps(interpolatedLocalProps, projectData)
+                    : interpolatedLocalProps;
                 return {
-                    props: interpolatedLocalProps,
+                    props: processedLocalProps,
                     variant: '',
                     hasConfig: false
                 };
             }
-            return (0, exports.mergeComponentConfig)(config, localProps, projectData);
+            return (0, exports.mergeComponentConfig)(config, localProps, projectData, componentName);
         };
-    }, [config, variantName, projectData]);
+    }, [config, variantName, projectData, componentName]);
     // Memoize getProp function
     var getProp = (0, react_1.useMemo)(function () {
         return function (propName, defaultValue) {
@@ -319,7 +402,7 @@ var useComponentProps = function (componentName, variantName, localProps) {
     var projectData = (0, theme_1.useTheme)().projectData;
     return (0, react_1.useMemo)(function () {
         var config = (0, exports.getComponentConfig)(projectData, componentName, variantName);
-        var merged = (0, exports.mergeComponentConfig)(config, localProps, projectData);
+        var merged = (0, exports.mergeComponentConfig)(config, localProps, projectData, componentName);
         return merged.props;
     }, [projectData, componentName, variantName, localProps]);
 };
@@ -547,7 +630,6 @@ exports.default = {
 };
 // import { useTheme } from "../ui/theme/theme"
 // import { useMemo } from "react"
-// // utils/componentUtils.ts
 // // Type definitions
 // export interface ComponentProps {
 //   [key: string]: any
@@ -569,6 +651,11 @@ exports.default = {
 //   availableVariants: string[]
 //   metadata: ComponentMetadata
 // }
+// // Define the Asset interface based on your actual Asset type
+// export interface Asset {
+//   name: string;
+//   url: string;
+// }
 // export interface ProjectData {
 //   components?: {
 //     [componentName: string]: {
@@ -584,6 +671,7 @@ exports.default = {
 //     updatedBy?: string;
 //     updatedAt?: number;
 //   }>
+//   assets?: Asset[] // Use the Asset interface
 // }
 // export interface MergedConfig {
 //   props: ComponentProps
@@ -597,11 +685,44 @@ exports.default = {
 //   isDefaultVariant: boolean
 // }
 // /**
+//  * Check if a variant name is valid (not empty or whitespace only)
+//  */
+// const isValidVariantName = (variantName: string | undefined): boolean => {
+//   return !!variantName && variantName.trim() !== '';
+// }
+// /**
+//  * Filter out empty string and undefined values from component props
+//  */
+// const filterEmptyProps = (props: ComponentProps): ComponentProps => {
+//   if (!props) return {};
+//   const filtered: ComponentProps = {};
+//   for (const key in props) {
+//     if (Object.prototype.hasOwnProperty.call(props, key)) {
+//       const value = props[key];
+//       // Only include props that are not undefined and not empty strings
+//       if (value !== undefined && value !== '') {
+//         filtered[key] = value;
+//       }
+//     }
+//   }
+//   return filtered;
+// }
+// /**
 //  * Extract variable name from {{variable_name}} pattern
 //  */
 // const extractVariableName = (value: string): string | null => {
 //   if (typeof value !== 'string') return null;
-//   const match = value.match(/\{\{\s*([^}]+)\s*\}\}/);
+//   // Match exact {{variable}} pattern
+//   const match = value.match(/^\{\{\s*([^}]+)\s*\}\}$/);
+//   return match ? match[1].trim() : null;
+// }
+// /**
+//  * Extract asset name from {{{asset_name}}} pattern
+//  */
+// const extractAssetName = (value: string): string | null => {
+//   if (typeof value !== 'string') return null;
+//   // Match exact {{{asset}}} pattern
+//   const match = value.match(/^\{\{\{\s*([^}]+)\s*\}\}\}$/);
 //   return match ? match[1].trim() : null;
 // }
 // /**
@@ -616,52 +737,96 @@ exports.default = {
 //   return variable?.value || null;
 // }
 // /**
-//  * SAFE Interpolate variables in props - NO RECURSION to prevent stack overflow
+//  * Get asset URL from project assets
+//  */
+// const getAssetUrl = (
+//   assetName: string,
+//   projectData: ProjectData | null | undefined
+// ): string | null => {
+//   if (!projectData?.assets || !assetName) return null;
+//   const asset = projectData.assets.find(a => a.name === assetName);
+//   return asset?.url || null;
+// }
+// /**
+//  * Get asset by name
 //  */
-// const interpolateVariables = (
+// const getAsset = (
+//   assetName: string,
+//   projectData: ProjectData | null | undefined
+// ): Asset | null => {
+//   if (!projectData?.assets || !assetName) return null;
+//   const asset = projectData.assets.find(a => a.name === assetName);
+//   return asset || null;
+// }
+// /**
+//  * Interpolate values (variables and assets) in props
+//  */
+// const interpolateValues = (
 //   props: ComponentProps,
 //   projectData: ProjectData | null | undefined
 // ): ComponentProps => {
-//   // Quick return if no variables or empty props
-//   if (!projectData?.variables || !props || Object.keys(props).length === 0) {
-//     return props;
+//   if (!props || Object.keys(props).length === 0) {
+//     return props || {};
 //   }
 //   const result: ComponentProps = {};
-//   // Create a lookup map for faster variable access
-//   const variableMap = projectData.variables.reduce((acc, variable) => {
-//     acc[variable.name] = variable.value;
-//     return acc;
-//   }, {} as Record<string, string>);
-//   // Process each property safely
+//   // Create lookup maps for faster access
+//   const variableMap: Record<string, string> = {};
+//   const assetMap: Record<string, string> = {};
+//   if (projectData?.variables) {
+//     projectData.variables.forEach(variable => {
+//       variableMap[variable.name] = variable.value;
+//     });
+//   }
+//   if (projectData?.assets) {
+//     projectData.assets.forEach(asset => {
+//       assetMap[asset.name] = asset.url;
+//     });
+//   }
 //   for (const key in props) {
 //     if (!Object.prototype.hasOwnProperty.call(props, key)) continue;
 //     const value = props[key];
-//     // Handle strings with variable interpolation
+//     // Handle strings with interpolation
 //     if (typeof value === 'string') {
+//       // Check for asset reference first ({{{asset}}})
+//       const assetName = extractAssetName(value);
+//       if (assetName && assetMap[assetName]) {
+//         result[key] = assetMap[assetName];
+//         continue;
+//       }
+//       // Check for variable reference ({{variable}})
 //       const variableName = extractVariableName(value);
 //       if (variableName && variableMap[variableName]) {
 //         result[key] = variableMap[variableName];
-//       } else {
-//         result[key] = value;
+//         continue;
 //       }
+//       // No interpolation needed
+//       result[key] = value;
 //     } 
-//     // Handle arrays - shallow process only
+//     // Handle arrays - process string elements only
 //     else if (Array.isArray(value)) {
 //       result[key] = value.map(item => {
 //         if (typeof item === 'string') {
+//           // Check for asset reference
+//           const assetName = extractAssetName(item);
+//           if (assetName && assetMap[assetName]) {
+//             return assetMap[assetName];
+//           }
+//           // Check for variable reference
 //           const variableName = extractVariableName(item);
-//           return variableName && variableMap[variableName] 
-//             ? variableMap[variableName] 
-//             : item;
+//           if (variableName && variableMap[variableName]) {
+//             return variableMap[variableName];
+//           }
 //         }
 //         return item;
 //       });
 //     }
-//     // Handle objects - ONLY shallow copy, NO deep processing
-//     else if (value && typeof value === 'object') {
-//       // Create a shallow copy to avoid modifying original
-//       const shallowCopy = Array.isArray(value) ? [...value] : { ...value };
-//       result[key] = shallowCopy;
+//     // Handle objects - create shallow copy (no deep interpolation)
+//     else if (value && typeof value === 'object' && !Array.isArray(value)) {
+//       result[key] = { ...value };
+//     }
+//     // Handle arrays that are objects - create shallow copy
+//     else if (Array.isArray(value)) {
+//       result[key] = [...value];
 //     }
 //     // All other values pass through
 //     else {
@@ -671,27 +836,7 @@ exports.default = {
 //   return result;
 // }
 // /**
-//  * Check if a variant name is valid (not empty or whitespace only)
-//  */
-// const isValidVariantName = (variantName: string | undefined): boolean => {
-//   return !!variantName && variantName.trim() !== '';
-// }
-// /**
-//  * Filter out empty string and undefined values from component props
-//  */
-// const filterEmptyProps = (props: ComponentProps): ComponentProps => {
-//   const filtered: ComponentProps = {};
-//   for (const key in props) {
-//     const value = props[key];
-//     // Only include props that are not undefined and not empty strings
-//     if (value !== undefined && value !== '') {
-//       filtered[key] = value;
-//     }
-//   }
-//   return filtered;
-// }
-// /**
-//  * Universal component config getter with variable interpolation
+//  * Universal component config getter with interpolation
 //  */
 // export const getComponentConfig = (
 //   projectData: ProjectData | null | undefined,
@@ -706,7 +851,7 @@ exports.default = {
 //       actualVariant: variantName,
 //       availableVariants: [],
 //       metadata: {}
-//     }
+//     };
 //   }
 //   const component = projectData.components[componentName];
 //   const availableVariants = Object.keys(component);
@@ -733,11 +878,11 @@ exports.default = {
 //   }
 //   const variantData = component[targetVariant];
 //   // Filter out empty string and undefined props from config
-//   let filteredComponentProps = filterEmptyProps(variantData?.componentProps || {});
-//   // Apply variable interpolation to component props
-//   filteredComponentProps = interpolateVariables(filteredComponentProps, projectData);
+//   const filteredComponentProps = filterEmptyProps(variantData?.componentProps || {});
+//   // Apply interpolation to component props
+//   const interpolatedProps = interpolateValues(filteredComponentProps, projectData);
 //   return {
-//     componentProps: filteredComponentProps,
+//     componentProps: interpolatedProps,
 //     variantExists,
 //     actualVariant: targetVariant,
 //     availableVariants,
@@ -745,7 +890,7 @@ exports.default = {
 //   };
 // }
 // /**
-//  * Smart merge utility - LOCAL PROPS OVERRIDE CONFIG PROPS with variable interpolation
+//  * Smart merge utility - LOCAL PROPS OVERRIDE CONFIG PROPS
 //  */
 // const smartMergeWithLocalOverride = (
 //   configProps: ComponentProps, 
@@ -753,16 +898,20 @@ exports.default = {
 //   projectData: ProjectData | null | undefined
 // ): ComponentProps => {
 //   // Start with interpolated config props
-//   const interpolatedConfigProps = interpolateVariables(configProps, projectData);
-//   const interpolatedLocalProps = interpolateVariables(localProps, projectData);
+//   const interpolatedConfigProps = interpolateValues(configProps, projectData);
 //   // Simple merge: local props override config props
 //   const result = { ...interpolatedConfigProps };
-//   for (const key in interpolatedLocalProps) {
-//     if (interpolatedLocalProps[key] !== undefined) {
-//       result[key] = interpolatedLocalProps[key];
+//   // Apply local props (they will be interpolated in the final pass)
+//   for (const key in localProps) {
+//     if (Object.prototype.hasOwnProperty.call(localProps, key)) {
+//       const value = localProps[key];
+//       if (value !== undefined) {
+//         result[key] = value;
+//       }
 //     }
 //   }
-//   return result;
+//   // Final interpolation pass to handle any variable/asset references in local props
+//   return interpolateValues(result, projectData);
 // }
 // /**
 //  * Merge component config with local props
@@ -775,8 +924,8 @@ exports.default = {
 //   // Only apply config if variant exists and has actual configuration
 //   const hasValidConfig = config.variantExists && Object.keys(config.componentProps).length > 0;
 //   if (!hasValidConfig) {
-//     // Still interpolate variables in local props even if no config
-//     const interpolatedLocalProps = interpolateVariables(localProps, projectData);
+//     // Still interpolate values in local props even if no config
+//     const interpolatedLocalProps = interpolateValues(localProps, projectData);
 //     return {
 //       props: interpolatedLocalProps,
 //       variant: config.actualVariant,
@@ -814,7 +963,7 @@ exports.default = {
 //   const mergeWithLocal = useMemo(() => {
 //     return (localProps: ComponentProps = {}): MergedConfig => {
 //       if (!isValidVariantName(variantName)) {
-//         const interpolatedLocalProps = interpolateVariables(localProps, projectData);
+//         const interpolatedLocalProps = interpolateValues(localProps, projectData);
 //         return {
 //           props: interpolatedLocalProps,
 //           variant: '',
@@ -826,8 +975,10 @@ exports.default = {
 //   }, [config, variantName, projectData]);
 //   // Memoize getProp function
 //   const getProp = useMemo(() => {
-//     return <T = any>(propName: string, defaultValue?: T): T => 
-//       (config.componentProps[propName] ?? defaultValue) as T;
+//     return <T = any>(propName: string, defaultValue?: T): T => {
+//       const value = config.componentProps[propName];
+//       return (value !== undefined ? value : defaultValue) as T;
+//     };
 //   }, [config.componentProps]);
 //   return {
 //     ...config,
@@ -883,279 +1034,179 @@ exports.default = {
 //   })) || [];
 // }
 // /**
-//  * Hook to get interpolated value for a specific variable or string
+//  * Get all assets from project
 //  */
-// export const useVariable = (value: string): string => {
+// export const getProjectAssets = (
+//   projectData: ProjectData | null | undefined
+// ): Asset[] => {
+//   return projectData?.assets || [];
+// }
+// /**
+//  * Hook to get interpolated value for a specific variable or asset reference
+//  */
+// export const useValue = (value: string): string => {
 //   const { projectData } = useTheme();
 //   return useMemo(() => {
 //     if (typeof value !== 'string') return value;
+//     // Check for asset reference ({{{asset}}})
+//     const assetName = extractAssetName(value);
+//     if (assetName) {
+//       const assetUrl = getAssetUrl(assetName, projectData);
+//       return assetUrl || value;
+//     }
+//     // Check for variable reference ({{variable}})
 //     const variableName = extractVariableName(value);
-//     if (!variableName) return value;
-//     const variableValue = getVariableValue(variableName, projectData);
-//     return variableValue || value;
+//     if (variableName) {
+//       const variableValue = getVariableValue(variableName, projectData);
+//       return variableValue || value;
+//     }
+//     return value;
 //   }, [value, projectData]);
 // }
-// import { useTheme } from "../ui/theme/theme"
-// import { useMemo } from "react"
-// // utils/componentUtils.ts
-// // Type definitions
-// export interface ComponentProps {
-//   [key: string]: any
-// }
-// export interface ComponentMetadata {
-//   createdAt?: Date
-//   updatedAt?: Date
-//   isCustom?: boolean
-//   baseVariant?: string
-// }
-// export interface ComponentVariant {
-//   componentProps: ComponentProps
-//   metadata?: ComponentMetadata
-// }
-// export interface ComponentConfig {
-//   componentProps: ComponentProps
-//   variantExists: boolean
-//   actualVariant: string
-//   availableVariants: string[]
-//   metadata: ComponentMetadata
-// }
-// export interface ProjectData {
-//   components?: {
-//     [componentName: string]: {
-//       [variantName: string]: ComponentVariant
-//     }
-//   }
+// /**
+//  * Hook to get a specific variable value
+//  */
+// export const useVariable = (variableName: string): string | null => {
+//   const { projectData } = useTheme();
+//   return useMemo(() => {
+//     if (!variableName || !projectData?.variables) return null;
+//     const variable = projectData.variables.find(v => v.name === variableName);
+//     return variable?.value || null;
+//   }, [variableName, projectData]);
 // }
-// export interface MergedConfig {
-//   props: ComponentProps
-//   variant: string
-//   hasConfig: boolean
+// /**
+//  * Hook to get a specific asset
+//  */
+// export const useAsset = (assetName: string): Asset | null => {
+//   const { projectData } = useTheme();
+//   return useMemo(() => {
+//     if (!assetName || !projectData?.assets) return null;
+//     return getAsset(assetName, projectData);
+//   }, [assetName, projectData]);
 // }
-// export interface UseComponentConfigReturn extends ComponentConfig {
-//   mergeWithLocal: (localProps?: ComponentProps) => MergedConfig
-//   getProp: <T = any>(propName: string, defaultValue?: T) => T
-//   hasVariant: boolean
-//   isDefaultVariant: boolean
+// /**
+//  * Hook to get a specific asset URL
+//  */
+// export const useAssetUrl = (assetName: string): string | null => {
+//   const { projectData } = useTheme();
+//   return useMemo(() => {
+//     if (!assetName || !projectData?.assets) return null;
+//     return getAssetUrl(assetName, projectData);
+//   }, [assetName, projectData]);
 // }
 // /**
-//  * Check if a variant name is valid (not empty or whitespace only)
+//  * Check if a value is a variable reference
 //  */
-// const isValidVariantName = (variantName: string | undefined): boolean => {
-//   return !!variantName && variantName.trim() !== '';
+// export const isVariableReference = (value: any): boolean => {
+//   return typeof value === 'string' && !!extractVariableName(value);
 // }
 // /**
-//  * Filter out empty string and undefined values from component props
+//  * Check if a value is an asset reference
 //  */
-// const filterEmptyProps = (props: ComponentProps): ComponentProps => {
-//   const filtered: ComponentProps = {};
-//   for (const key in props) {
-//     const value = props[key];
-//     // Only include props that are not undefined and not empty strings
-//     if (value !== undefined && value !== '') {
-//       filtered[key] = value;
-//     }
-//   }
-//   return filtered;
+// export const isAssetReference = (value: any): boolean => {
+//   return typeof value === 'string' && !!extractAssetName(value);
 // }
 // /**
-//  * Universal component config getter
-//  * 
-//  * @param projectData - The project configuration data
-//  * @param componentName - Name of the component to get config for
-//  * @param variantName - Name of the variant (defaults to 'default')
-//  * @returns Component configuration with metadata
+//  * Helper to convert variable/asset references for UI display
 //  */
-// export const getComponentConfig = (
-//   projectData: ProjectData | null | undefined,
-//   componentName: string,
-//   variantName: string = 'default'
-// ): ComponentConfig => {
-//   // Early return if no component exists
-//   if (!projectData?.components?.[componentName]) {
-//     return {
-//       componentProps: {},
-//       variantExists: false,
-//       actualVariant: variantName,
-//       availableVariants: [],
-//       metadata: {}
-//     }
+// export const formatReferenceForDisplay = (value: string): { type: 'variable' | 'asset' | 'custom', display: string } => {
+//   if (!value || typeof value !== 'string') {
+//     return { type: 'custom', display: value || '' };
 //   }
-//   const component = projectData.components[componentName]
-//   const availableVariants = Object.keys(component)
-//   // Find the best variant match with fallback chain
-//   let targetVariant = variantName
-//   let variantExists = availableVariants.includes(variantName)
-//   if (!variantExists) {
-//     // Fallback priority: default → first available → none
-//     if (availableVariants.includes('default')) {
-//       targetVariant = 'default'
-//       variantExists = true
-//     } else if (availableVariants.length > 0) {
-//       targetVariant = availableVariants[0]
-//       variantExists = true
-//     } else {
-//       return {
-//         componentProps: {},
-//         variantExists: false,
-//         actualVariant: variantName,
-//         availableVariants: [],
-//         metadata: {}
-//       }
-//     }
+//   const variableName = extractVariableName(value);
+//   if (variableName) {
+//     return { type: 'variable', display: variableName };
 //   }
-//   const variantData = component[targetVariant]
-//   // Filter out empty string and undefined props from config
-//   const filteredComponentProps = filterEmptyProps(variantData?.componentProps || {})
-//   return {
-//     componentProps: filteredComponentProps,
-//     variantExists,
-//     actualVariant: targetVariant,
-//     availableVariants,
-//     metadata: variantData?.metadata || {}
+//   const assetName = extractAssetName(value);
+//   if (assetName) {
+//     return { type: 'asset', display: assetName };
 //   }
+//   return { type: 'custom', display: value };
 // }
 // /**
-//  * Smart merge utility - LOCAL PROPS OVERRIDE CONFIG PROPS
-//  * If a prop exists in both local and config, local wins
+//  * Create a variable reference string
 //  */
-// const smartMergeWithLocalOverride = (
-//   configProps: ComponentProps, 
-//   localProps: ComponentProps
-// ): ComponentProps => {
-//   const result = { ...configProps }
-//   // Apply local props - they override config props
-//   for (const key in localProps) {
-//     if (localProps[key] !== undefined) {
-//       // For objects, do smart merge but local object properties still override
-//       if (typeof localProps[key] === 'object' && 
-//           !Array.isArray(localProps[key]) && 
-//           localProps[key] !== null &&
-//           typeof configProps[key] === 'object' &&
-//           !Array.isArray(configProps[key]) &&
-//           configProps[key] !== null) {
-//         // Merge nested objects but local properties still win
-//         result[key] = { ...configProps[key], ...localProps[key] }
-//       } else {
-//         // Primitive values or arrays - local always wins
-//         result[key] = localProps[key]
-//       }
-//     }
-//   }
-//   return result
+// export const createVariableReference = (variableName: string): string => {
+//   return `{{${variableName}}}`;
 // }
 // /**
-//  * Merge component config with local props - LOCAL PROPS OVERRIDE CONFIG
-//  * 
-//  * @param config - Component configuration from getComponentConfig
-//  * @param localProps - Props passed directly to the component (OVERRIDES CONFIG)
-//  * @returns Merged configuration with metadata
+//  * Create an asset reference string
 //  */
-// export const mergeComponentConfig = (
-//   config: ComponentConfig,
-//   localProps: ComponentProps = {}
-// ): MergedConfig => {
-//   // Only apply config if variant exists and has actual configuration
-//   const hasValidConfig = config.variantExists && Object.keys(config.componentProps).length > 0
-//   if (!hasValidConfig) {
-//     return {
-//       props: localProps,
-//       variant: config.actualVariant,
-//       hasConfig: false
-//     }
-//   }
-//   // LOCAL PROPS OVERRIDE CONFIG PROPS
-//   return {
-//     props: smartMergeWithLocalOverride(config.componentProps, localProps),
-//     variant: config.actualVariant,
-//     hasConfig: true
-//   }
+// export const createAssetReference = (assetName: string): string => {
+//   return `{{{${assetName}}}}`;
 // }
 // /**
-//  * Hook for easy component config usage with LOCAL PROP OVERRIDE
-//  * Uses useMemo to prevent unnecessary re-computation
-//  * 
-//  * @param componentName - Name of the component
-//  * @param variantName - Optional variant name
-//  * @returns Configuration object with helper methods
+//  * Check if a prop value needs interpolation
 //  */
-// export const useComponentConfiguration = (
-//   componentName: string, 
-//   variantName?: string
-// ): UseComponentConfigReturn => {
-//   const { projectData } = useTheme()
-//   // Memoize config computation - only recompute when dependencies change
-//   const config = useMemo(() => {
-//     // Check for valid variant name (not empty or whitespace only)
-//     if (!isValidVariantName(variantName)) {
-//       return {
-//         componentProps: {},
-//         variantExists: false,
-//         actualVariant: '',
-//         availableVariants: [],
-//         metadata: {}
+// export const needsInterpolation = (value: any): boolean => {
+//   if (typeof value !== 'string') return false;
+//   return isVariableReference(value) || isAssetReference(value);
+// }
+// /**
+//  * Get all references (variables and assets) used in props
+//  */
+// export const getUsedReferences = (
+//   props: ComponentProps,
+//   projectData: ProjectData | null | undefined
+// ): { variables: string[]; assets: string[] } => {
+//   const variables: string[] = [];
+//   const assets: string[] = [];
+//   if (!props || !projectData) return { variables, assets };
+//   const processValue = (value: any) => {
+//     if (typeof value === 'string') {
+//       const variableName = extractVariableName(value);
+//       if (variableName) {
+//         variables.push(variableName);
+//         return;
 //       }
-//     }
-//     return getComponentConfig(projectData, componentName, variantName!)
-//   }, [projectData, componentName, variantName])
-//   // Memoize merge function - LOCAL PROPS OVERRIDE CONFIG
-//   const mergeWithLocal = useMemo(() => {
-//     return (localProps: ComponentProps = {}): MergedConfig => {
-//       // If no valid variant name was provided, return local props as-is
-//       if (!isValidVariantName(variantName)) {
-//         return {
-//           props: localProps,
-//           variant: '',
-//           hasConfig: false
-//         }
+//       const assetName = extractAssetName(value);
+//       if (assetName) {
+//         assets.push(assetName);
 //       }
-//       return mergeComponentConfig(config, localProps)
+//     } else if (Array.isArray(value)) {
+//       value.forEach(processValue);
 //     }
-//   }, [config, variantName])
-//   // Memoize getProp function (gets from config only, not merged)
-//   const getProp = useMemo(() => {
-//     return <T = any>(propName: string, defaultValue?: T): T => 
-//       (config.componentProps[propName] ?? defaultValue) as T
-//   }, [config.componentProps])
+//   };
+//   Object.values(props).forEach(processValue);
 //   return {
-//     ...config,
-//     mergeWithLocal,
-//     getProp,
-//     hasVariant: config.variantExists,
-//     isDefaultVariant: config.actualVariant === 'default'
-//   }
-// }
-// /**
-//  * Hook that directly returns merged props with local override
-//  * Perfect for direct use in components
-//  */
-// export const useComponentProps = (
-//   componentName: string,
-//   variantName: string = 'default',
-//   localProps: ComponentProps = {}
-// ): ComponentProps => {
-//   const { projectData } = useTheme()
-//   return useMemo(() => {
-//     const config = getComponentConfig(projectData, componentName, variantName)
-//     const merged = mergeComponentConfig(config, localProps)
-//     return merged.props
-//   }, [projectData, componentName, variantName, localProps])
+//     variables: Array.from(new Set(variables)),
+//     assets: Array.from(new Set(assets))
+//   };
 // }
 // /**
-//  * Quick utility to check if a component variant exists
+//  * Get asset by name (exported version)
 //  */
-// export const hasComponentVariant = (
-//   projectData: ProjectData | null | undefined,
-//   componentName: string,
-//   variantName: string
-// ): boolean => {
-//   return !!projectData?.components?.[componentName]?.[variantName]
+// export const getAssetByName = (assetName: string, projectData: ProjectData | null | undefined): Asset | null => {
+//   return getAsset(assetName, projectData);
 // }
 // /**
-//  * Get all available variants for a component
+//  * Get variable by name (exported version)
 //  */
-// export const getAvailableVariants = (
-//   projectData: ProjectData | null | undefined,
-//   componentName: string
-// ): string[] => {
-//   return Object.keys(projectData?.components?.[componentName] || {})
+// export const getVariableByName = (variableName: string, projectData: ProjectData | null | undefined): { name: string; value: string } | null => {
+//   if (!projectData?.variables || !variableName) return null;
+//   const variable = projectData.variables.find(v => v.name === variableName);
+//   return variable ? { name: variable.name, value: variable.value } : null;
 // }
+// export default {
+//   getComponentConfig,
+//   mergeComponentConfig,
+//   useComponentConfiguration,
+//   useComponentProps,
+//   hasComponentVariant,
+//   getAvailableVariants,
+//   getProjectVariables,
+//   getProjectAssets,
+//   useValue,
+//   useVariable,
+//   useAsset,
+//   useAssetUrl,
+//   isVariableReference,
+//   isAssetReference,
+//   formatReferenceForDisplay,
+//   createVariableReference,
+//   createAssetReference,
+//   needsInterpolation,
+//   getUsedReferences,
+//   getAssetByName,
+//   getVariableByName
+// };