funuicss 3.7.14 → 3.7.16

package/ui/vista/Vista.js

@@ -186,23 +186,19 @@ var Vista = function (localProps) {
                     position: 'relative',
                     width: '100%',
                     maxWidth: mediaSize || '100%',
-                    aspectRatio: '16/9',
                     margin: '0 auto',
+                    height: 'fit-content',
                 } },
-                react_1.default.createElement("div", { style: {
-                        position: 'relative',
+                react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.mediaCss || ''), style: {
                         width: '100%',
-                        height: '100%',
+                        height: 'auto',
+                        aspectRatio: '16/9',
+                        border: 'none',
+                        display: 'block', // Crucial for 'height: auto' to work reliably
                         filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
                         mixBlendMode: final.mediaBlendMode,
-                    } },
-                    react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.mediaCss || ''), style: {
-                            width: '100%',
-                            height: '100%',
-                            border: 'none',
-                            display: 'block',
-                        }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
-                    final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
+                    }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
+                final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
             mediaType === 'image' && (final.media || final.mediaUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
                 final.media ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.media)) : (react_1.default.createElement("img", { src: final.mediaUrl, alt: final.mediaAlt || 'Vista media', className: final.mediaCss || '', style: mediaStyle, loading: "lazy" })),
                 final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))));

package/utils/componentUtils.d.ts

@@ -18,12 +18,26 @@ export interface ComponentConfig {
     availableVariants: string[];
     metadata: ComponentMetadata;
 }
+export interface Asset {
+    name: string;
+    url: string;
+}
 export interface ProjectData {
     components?: {
         [componentName: string]: {
             [variantName: string]: ComponentVariant;
         };
     };
+    variables?: Array<{
+        name: string;
+        value: string;
+        category?: string;
+        createdBy?: string;
+        createdAt?: number;
+        updatedBy?: string;
+        updatedAt?: number;
+    }>;
+    assets?: Asset[];
 }
 export interface MergedConfig {
     props: ComponentProps;
@@ -37,34 +51,19 @@ export interface UseComponentConfigReturn extends ComponentConfig {
     isDefaultVariant: boolean;
 }
 /**
- * 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
+ * Universal component config getter with interpolation
  */
 export declare const getComponentConfig: (projectData: ProjectData | null | undefined, componentName: string, variantName?: string) => ComponentConfig;
 /**
- * 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
+ * Merge component config with local props
  */
-export declare const mergeComponentConfig: (config: ComponentConfig, localProps?: ComponentProps) => MergedConfig;
+export declare const mergeComponentConfig: (config: ComponentConfig, localProps: ComponentProps | undefined, projectData: ProjectData | null | undefined) => MergedConfig;
 /**
- * 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
+ * Hook for easy component config usage
  */
 export declare const useComponentConfiguration: (componentName: string, variantName?: string) => UseComponentConfigReturn;
 /**
  * Hook that directly returns merged props with local override
- * Perfect for direct use in components
  */
 export declare const useComponentProps: (componentName: string, variantName?: string, localProps?: ComponentProps) => ComponentProps;
 /**
@@ -75,3 +74,111 @@ export declare const hasComponentVariant: (projectData: ProjectData | null | und
  * Get all available variants for a component
  */
 export declare const getAvailableVariants: (projectData: ProjectData | null | undefined, componentName: string) => string[];
+/**
+ * Get all variables from project
+ */
+export declare const getProjectVariables: (projectData: ProjectData | null | undefined) => Array<{
+    name: string;
+    value: string;
+}>;
+/**
+ * Get all assets from project
+ */
+export declare const getProjectAssets: (projectData: ProjectData | null | undefined) => Asset[];
+/**
+ * Hook to get interpolated value for a specific variable or asset reference
+ */
+export declare const useValue: (value: string) => string;
+/**
+ * Hook to get a specific variable value
+ */
+export declare const useVariable: (variableName: string) => string | null;
+/**
+ * Hook to get a specific asset
+ */
+export declare const useAsset: (assetName: string) => Asset | null;
+/**
+ * Hook to get a specific asset URL
+ */
+export declare const useAssetUrl: (assetName: string) => string | null;
+/**
+ * Check if a value is a variable reference
+ */
+export declare const isVariableReference: (value: any) => boolean;
+/**
+ * Check if a value is an asset reference
+ */
+export declare const isAssetReference: (value: any) => boolean;
+/**
+ * Helper to convert variable/asset references for UI display
+ */
+export declare const formatReferenceForDisplay: (value: string) => {
+    type: "variable" | "asset" | "custom";
+    display: string;
+};
+/**
+ * Create a variable reference string
+ */
+export declare const createVariableReference: (variableName: string) => string;
+/**
+ * Create an asset reference string
+ */
+export declare const createAssetReference: (assetName: string) => string;
+/**
+ * Check if a prop value needs interpolation
+ */
+export declare const needsInterpolation: (value: any) => boolean;
+/**
+ * Get all references (variables and assets) used in props
+ */
+export declare const getUsedReferences: (props: ComponentProps, projectData: ProjectData | null | undefined) => {
+    variables: string[];
+    assets: string[];
+};
+/**
+ * Get asset by name (exported version)
+ */
+export declare const getAssetByName: (assetName: string, projectData: ProjectData | null | undefined) => Asset | null;
+/**
+ * Get variable by name (exported version)
+ */
+export declare const getVariableByName: (variableName: string, projectData: ProjectData | null | undefined) => {
+    name: string;
+    value: string;
+} | null;
+declare const _default: {
+    getComponentConfig: (projectData: ProjectData | null | undefined, componentName: string, variantName?: string) => ComponentConfig;
+    mergeComponentConfig: (config: ComponentConfig, localProps: ComponentProps | undefined, projectData: ProjectData | null | undefined) => MergedConfig;
+    useComponentConfiguration: (componentName: string, variantName?: string) => UseComponentConfigReturn;
+    useComponentProps: (componentName: string, variantName?: string, localProps?: ComponentProps) => ComponentProps;
+    hasComponentVariant: (projectData: ProjectData | null | undefined, componentName: string, variantName: string) => boolean;
+    getAvailableVariants: (projectData: ProjectData | null | undefined, componentName: string) => string[];
+    getProjectVariables: (projectData: ProjectData | null | undefined) => Array<{
+        name: string;
+        value: string;
+    }>;
+    getProjectAssets: (projectData: ProjectData | null | undefined) => Asset[];
+    useValue: (value: string) => string;
+    useVariable: (variableName: string) => string | null;
+    useAsset: (assetName: string) => Asset | null;
+    useAssetUrl: (assetName: string) => string | null;
+    isVariableReference: (value: any) => boolean;
+    isAssetReference: (value: any) => boolean;
+    formatReferenceForDisplay: (value: string) => {
+        type: "variable" | "asset" | "custom";
+        display: string;
+    };
+    createVariableReference: (variableName: string) => string;
+    createAssetReference: (assetName: string) => string;
+    needsInterpolation: (value: any) => boolean;
+    getUsedReferences: (props: ComponentProps, projectData: ProjectData | null | undefined) => {
+        variables: string[];
+        assets: string[];
+    };
+    getAssetByName: (assetName: string, projectData: ProjectData | null | undefined) => Asset | null;
+    getVariableByName: (variableName: string, projectData: ProjectData | null | undefined) => {
+        name: string;
+        value: string;
+    } | null;
+};
+export default _default;