@bagelink/blox 1.5.15 → 1.5.20

package/dist/setup.d.ts

@@ -1,24 +1,132 @@
+import { App } from 'vue';
+import { Router } from 'vue-router';
 import { ComponentConfig } from './config/baseComponents';
+export interface BloxInstance {
+    /**
+     * Register one or more components with the Blox library
+     * Accepts either a single component config or an array of component configs
+     */
+    registerComponents: (components: ComponentConfig | ComponentConfig[], options?: RegisterOptions) => BloxInstance;
+    /**
+     * Register routes for preview pages with your Vue Router
+     */
+    registerRoutes: (router: Router, options?: RouteOptions) => BloxInstance;
+    /**
+     * Get all registered component configurations
+     */
+    getRegisteredComponents: () => ComponentConfig[];
+    /**
+     * Get components by category
+     */
+    getComponentsByCategory: (category: string) => ComponentConfig[];
+    /**
+     * Get a list of registered component IDs
+     */
+    getComponentIds: () => string[];
+    /**
+     * Check if a component is registered
+     */
+    hasComponent: (id: string) => boolean;
+    /**
+     * Install the Blox plugin into your Vue app
+     */
+    install: (app: App) => void;
+}
+export interface RegisterOptions {
+    /**
+     * Category to assign to the components
+     */
+    category?: string;
+    /**
+     * Skip validation for component configs
+     * @default false
+     */
+    skipValidation?: boolean;
+}
+export interface RouteOptions {
+    /**
+     * Base path for the preview routes
+     * @default '/blox'
+     */
+    basePath?: string;
+    /**
+     * Path for the external preview route
+     * @default '/preview/:pageId?'
+     */
+    previewPath?: string;
+    /**
+     * Path for the render page route
+     * @default '/render/:pageId?'
+     */
+    renderPath?: string;
+    /**
+     * Additional route meta properties
+     */
+    meta?: Record<string, any>;
+}
+export interface BloxOptions {
+    /**
+     * Enable debug mode for additional logging
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Automatically register default blox (built-in components)
+     * @default false
+     */
+    useDefaultBlox?: boolean;
+}
 /**
- * Register all base components from the library
- * Call this in your project's setup to make base components available
+ * Validation error class
  */
-export declare function registerBaseComponents(): void;
+export declare class ComponentValidationError extends Error {
+    componentId?: string | undefined;
+    constructor(message: string, componentId?: string | undefined);
+}
+/**
+ * Create a new Blox instance with a fluent API
+ *
+ * @param options - Configuration options for the Blox instance
+ *
+ * @example
+ * ```ts
+ * import { createBlox, ButtonConfig, TextConfig } from '@bagelink/blox'
+ * import { MyCustomComp } from './components'
+ *
+ * const blox = createBlox({ debug: true })
+ * blox.registerComponents([ButtonConfig, TextConfig, MyCustomComp])
+ * blox.registerRoutes(router)
+ *
+ * app.use(blox)
+ * ```
+ */
+export declare function createBlox(options?: BloxOptions): BloxInstance;
 /**
- * Get all component configurations (base + custom)
+ * Helper to create a custom component configuration with better TypeScript inference
+ */
+export declare function createComponentConfig<T extends ComponentConfig>(config: T): T;
+/**
+ * Get all component configurations (base + blocks + custom)
  * This returns both the Vue components and their editor schemas
  */
 export declare function getAllComponentConfigs(customConfigs?: ComponentConfig[]): ComponentConfig[];
 /**
- * Helper to create a custom component configuration
+ * Register all base components from the library
+ * Call this in your project's setup to make base components available
+ *
+ * @deprecated Use `createBlox().registerComponents()` instead for a simpler API
  */
-export declare function createComponentConfig(config: ComponentConfig): ComponentConfig;
+export declare function registerBaseComponents(): void;
 /**
  * Register a single custom component
+ *
+ * @deprecated Use `createBlox().registerComponents()` instead for a simpler API
  */
 export declare function registerCustomComponent(config: ComponentConfig): void;
 /**
  * Register multiple custom components
+ *
+ * @deprecated Use `createBlox().registerComponents()` instead for a simpler API
  */
 export declare function registerCustomComponents(configs: ComponentConfig[]): void;
 //# sourceMappingURL=setup.d.ts.map

package/dist/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../setup.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAwB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAGpF;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,aAAa,GAAE,eAAe,EAAO,GAAG,eAAe,EAAE,CAE/F;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,eAAe,GAAG,eAAe,CAE9E;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAGrE;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAIzE"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../src/setup.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,EAAwB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAOpF,MAAM,WAAW,YAAY;IAC5B;;;OAGG;IACH,kBAAkB,EAAE,CACnB,UAAU,EAAE,eAAe,GAAG,eAAe,EAAE,EAC/C,OAAO,CAAC,EAAE,eAAe,KACrB,YAAY,CAAA;IAEjB;;OAEG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,YAAY,CAAA;IAExE;;OAEG;IACH,uBAAuB,EAAE,MAAM,eAAe,EAAE,CAAA;IAEhD;;OAEG;IACH,uBAAuB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,eAAe,EAAE,CAAA;IAEhE;;OAEG;IACH,eAAe,EAAE,MAAM,MAAM,EAAE,CAAA;IAE/B;;OAEG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IAErC;;OAEG;IACH,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,YAAY;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC1B;AAED,MAAM,WAAW,WAAW;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACxB;AAED;;GAEG;AACH,qBAAa,wBAAyB,SAAQ,KAAK;IACd,WAAW,CAAC,EAAE,MAAM;gBAA5C,OAAO,EAAE,MAAM,EAAS,WAAW,CAAC,EAAE,MAAM,YAAA;CAIxD;AAoGD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,WAAgB,GAAG,YAAY,CAqOlE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,eAAe,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAE7E;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,aAAa,GAAE,eAAe,EAAO,GAAG,eAAe,EAAE,CAE/F;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAGrE;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAIzE"}

package/dist/utils/componentPreviewGenerator.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Auto-generated SVG previews for components
+ * This file generates SVG-based previews for block components
+ */
+interface BlockPreviewConfig {
+    background: string;
+    gradient?: {
+        from: string;
+        to: string;
+        direction?: 'horizontal' | 'vertical' | 'diagonal';
+    };
+    elements: Array<{
+        type: 'rect' | 'circle' | 'text' | 'line' | 'gradient';
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+        radius?: number;
+        text?: string;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+        fontSize?: number;
+        fontWeight?: string;
+        opacity?: number;
+        shadow?: boolean;
+        rx?: number;
+        gradient?: {
+            from: string;
+            to: string;
+            direction?: 'horizontal' | 'vertical' | 'diagonal';
+        };
+    }>;
+}
+interface ComponentAnalysis {
+    id: string;
+    category?: string;
+    icon?: string;
+    label?: string;
+    hasText: boolean;
+    hasRichText?: boolean;
+    hasImage: boolean;
+    hasButton: boolean;
+    hasItems: boolean;
+    hasIcon: boolean;
+    hasVideo: boolean;
+    hasForm?: boolean;
+    isNav: boolean;
+    isFooter: boolean;
+    isHero: boolean;
+    isCard: boolean;
+    isGrid: boolean;
+    isList: boolean;
+    isModal: boolean;
+    isSlider: boolean;
+    isTabs: boolean;
+    isVideo: boolean;
+    isTestimonial: boolean;
+    isPricing: boolean;
+    isFullWidth: boolean;
+    isCentered: boolean;
+    hasColumns: boolean;
+    contentStructure?: any;
+    settingsStructure?: any;
+    defaultValues?: any;
+    propNames: string[];
+}
+/**
+ * Generate SVG preview for a component type
+ */
+export declare function generateSVGPreview(componentId: string): string;
+/**
+ * Get preview for a component (main function to use)
+ * 1. Uses registered preview config (manual) - highest priority
+ * 2. Uses enhanced analysis from component configs if available
+ * 3. Falls back to default preview
+ */
+export declare function getComponentPreview(componentId: string, label?: string): string;
+/**
+ * Get preview with auto-generation (opt-in)
+ * Use this if you want automatic preview generation from component analysis
+ */
+export declare function getComponentPreviewAuto(componentId: string, label?: string, component?: any): string;
+/**
+ * Register a custom preview configuration
+ */
+export declare function registerPreviewConfig(componentId: string, config: BlockPreviewConfig): void;
+/**
+ * Check if a component has a preview config
+ */
+export declare function hasPreviewConfig(componentId: string): boolean;
+/**
+ * Get all registered preview config IDs
+ */
+export declare function getRegisteredPreviewIds(): string[];
+/**
+ * Export types for use by consumers
+ */
+export type { BlockPreviewConfig };
+/**
+ * Development helper: Generate and log preview for testing
+ * This function is useful for debugging and testing new component previews
+ */
+export declare function debugComponentPreview(componentId: string, label?: string): void;
+/**
+ * Development helper: Get enhanced component analysis
+ */
+export declare function debugComponentAnalysis(componentId: string): ComponentAnalysis | null;
+/**
+ * Development helper: Test all component preview mappings
+ */
+export declare function debugAllPreviews(): void;
+//# sourceMappingURL=componentPreviewGenerator.d.ts.map

package/dist/utils/componentPreviewGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentPreviewGenerator.d.ts","sourceRoot":"","sources":["../../src/utils/componentPreviewGenerator.ts"],"names":[],"mappings":"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"}

package/dist/utils/normalizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalizer.d.ts","sourceRoot":"","sources":["../../utils/normalizer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwCrF;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAEtC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,GAAG,CAYvD"}
+{"version":3,"file":"normalizer.d.ts","sourceRoot":"","sources":["../../src/utils/normalizer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwCrF;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAEtC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,GAAG,CAYvD"}

package/dist/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../utils/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,QAAQ,GAAE,OAAe,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqKxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,EAAE,CAgBxE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CA8BzC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,QAAQ,GAAE,OAAe,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyKxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,EAAE,CAgBxE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CA8BzC"}

package/dist/views/ExternalPreview.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalPreview.vue.d.ts","sourceRoot":"","sources":["../../views/ExternalPreview.vue"],"names":[],"mappings":"AAAA,OA8aO,KAAK,EAAiB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAQ5D,UAAU,KAAK;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAA;CACxB;;YAHS,MAAM;sBAEI,GAAG,EAAE;;AAoXzB,wBAQG"}
+{"version":3,"file":"ExternalPreview.vue.d.ts","sourceRoot":"","sources":["../../src/views/ExternalPreview.vue"],"names":[],"mappings":"AA2oBA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAiB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAQ5D,UAAU,KAAK;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAA;CACxB;;YAHS,MAAM;sBAEI,GAAG,EAAE;;AA2ZzB,wBAQG"}

package/dist/views/RenderPage.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderPage.vue.d.ts","sourceRoot":"","sources":["../../views/RenderPage.vue"],"names":[],"mappings":"AAAA,OAwIO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAO7C,UAAU,KAAK;IACd,QAAQ,EAAE,QAAQ,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB;;sBADmB,MAAM;;AAsI1B,wBAQG"}
+{"version":3,"file":"RenderPage.vue.d.ts","sourceRoot":"","sources":["../../src/views/RenderPage.vue"],"names":[],"mappings":"AA8HA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAO7C,UAAU,KAAK;IACd,QAAQ,EAAE,QAAQ,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB;;sBADmB,MAAM;;AAmI1B,wBAQG"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/blox",
   "type": "module",
-  "version": "1.5.15",
+  "version": "1.5.20",
   "description": "Blox page builder library for drag-and-drop page building and static data management",
   "author": {
     "name": "Bagel Studio",
@@ -74,7 +74,9 @@
     "access": "public"
   },
   "peerDependencies": {
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "vue-router": "^4.0.0",
+    "@bagelink/vue": "1.5.20"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
@@ -84,6 +86,7 @@
     "vite-plugin-dts": "^4.0.0",
     "vite-tsconfig-paths": "^5.0.0",
     "vue": "^3.5.16",
+    "vue-router": "^4.6.3",
     "vue-tsc": "^2.0.0"
   },
   "scripts": {

package/components/base/Button.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-/**
- * Base Button Component
- *
- * A customizable button/link component
- */
-
-interface Props {
-	btnTxt?: string
-	btnUrl?: string
-	btnTarget?: '_self' | '_blank' | '_parent' | '_top'
-	variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
-	size?: 'sm' | 'md' | 'lg'
-	align?: 'left' | 'center' | 'right'
-	fullWidth?: boolean
-	isMobile?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	btnTxt: 'Click Me',
-	btnUrl: '#',
-	btnTarget: '_self',
-	variant: 'primary',
-	size: 'md',
-	align: 'left',
-	fullWidth: false,
-})
-
-function handleClick(e: MouseEvent) {
-	// Emit event for analytics tracking if needed
-	console.log('Button clicked:', props.btnTxt)
-}
-</script>
-
-<template>
-	<div :class="`button-wrapper align-${align}`">
-		<a
-			:href="btnUrl"
-			:target="btnTarget"
-			:rel="btnTarget === '_blank' ? 'noopener noreferrer' : undefined"
-			class="btn" :class="[
-				`btn-${variant}`,
-				`btn-${size}`,
-				{ 'btn-full-width': fullWidth },
-			]"
-			@click="handleClick"
-		>
-			{{ btnTxt }}
-		</a>
-	</div>
-</template>
-
-<style scoped>
-.button-wrapper {
-	display: flex;
-}
-
-.button-wrapper.align-left {
-	justify-content: flex-start;
-}
-
-.button-wrapper.align-center {
-	justify-content: center;
-}
-
-.button-wrapper.align-right {
-	justify-content: flex-end;
-}
-
-.btn {
-	display: inline-block;
-	padding: 0.75rem 1.5rem;
-	text-decoration: none;
-	border-radius: 6px;
-	font-weight: 500;
-	transition: all 0.2s;
-	cursor: pointer;
-	border: 2px solid transparent;
-	text-align: center;
-}
-
-.btn-full-width {
-	width: 100%;
-}
-
-/* Sizes */
-.btn-sm {
-	padding: 0.5rem 1rem;
-	font-size: 0.875rem;
-}
-
-.btn-md {
-	padding: 0.75rem 1.5rem;
-	font-size: 1rem;
-}
-
-.btn-lg {
-	padding: 1rem 2rem;
-	font-size: 1.125rem;
-}
-
-/* Variants */
-.btn-primary {
-	background: #3b82f6;
-	color: white;
-}
-
-.btn-primary:hover {
-	background: #2563eb;
-}
-
-.btn-secondary {
-	background: #6b7280;
-	color: white;
-}
-
-.btn-secondary:hover {
-	background: #4b5563;
-}
-
-.btn-outline {
-	background: transparent;
-	border-color: #3b82f6;
-	color: #3b82f6;
-}
-
-.btn-outline:hover {
-	background: #3b82f6;
-	color: white;
-}
-
-.btn-ghost {
-	background: transparent;
-	color: #3b82f6;
-}
-
-.btn-ghost:hover {
-	background: rgba(59, 130, 246, 0.1);
-}
-</style>

package/components/base/Container.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-/**
- * Base Container Component
- *
- * A wrapper component for grouping other blocks
- */
-
-interface Props {
-	maxWidth?: number | string
-	padding?: number | string
-	gap?: number // Gap between child elements in pixels
-	layout?: 'vertical' | 'horizontal' | 'grid'
-	columns?: number // For grid layout
-	isMobile?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	maxWidth: 1200,
-	padding: 20,
-	gap: 16,
-	layout: 'vertical',
-	columns: 3,
-})
-
-const containerStyle = {
-	maxWidth: typeof props.maxWidth === 'number' ? `${props.maxWidth}px` : props.maxWidth,
-	padding: typeof props.padding === 'number' ? `${props.padding}px` : props.padding,
-	gap: `${props.gap}px`,
-}
-</script>
-
-<template>
-	<div class="container" :class="[`layout-${layout}`]" :style="containerStyle">
-		<slot />
-	</div>
-</template>
-
-<style scoped>
-.container {
-	margin: 0 auto;
-}
-
-.layout-vertical {
-	display: flex;
-	flex-direction: column;
-}
-
-.layout-horizontal {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-
-.layout-grid {
-	display: grid;
-	grid-template-columns: repeat(v-bind(columns), 1fr);
-}
-
-@media (max-width: 768px) {
-	.layout-grid {
-		grid-template-columns: 1fr;
-	}
-}
-</style>

package/components/base/Image.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-/**
- * Base Image Component
- *
- * Displays an image with optional link and captions
- */
-
-interface Props {
-	src?: string
-	alt?: string
-	caption?: string
-	link?: string
-	linkTarget?: '_self' | '_blank' | '_parent' | '_top'
-	objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
-	aspectRatio?: string // e.g., '16/9', '4/3', '1/1'
-	isMobile?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	src: '',
-	alt: '',
-	caption: '',
-	link: '',
-	linkTarget: '_self',
-	objectFit: 'cover',
-	aspectRatio: 'auto',
-})
-
-const imageStyle = {
-	objectFit: props.objectFit,
-	aspectRatio: props.aspectRatio,
-}
-</script>
-
-<template>
-	<figure class="image-wrapper">
-		<a
-			v-if="link"
-			:href="link"
-			:target="linkTarget"
-			:rel="linkTarget === '_blank' ? 'noopener noreferrer' : undefined"
-			class="image-link"
-		>
-			<img :src="src" :alt="alt" :style="imageStyle" class="image">
-		</a>
-		<img v-else :src="src" :alt="alt" :style="imageStyle" class="image">
-		<figcaption v-if="caption" class="image-caption">
-			{{ caption }}
-		</figcaption>
-	</figure>
-</template>
-
-<style scoped>
-.image-wrapper {
-	margin: 0;
-	padding: 0;
-}
-
-.image-link {
-	display: block;
-}
-
-.image {
-	width: 100%;
-	height: auto;
-	display: block;
-}
-
-.image-caption {
-	margin-top: 0.5rem;
-	font-size: 0.875rem;
-	color: #6b7280;
-	text-align: center;
-}
-</style>

package/components/base/Spacer.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-/**
- * Base Spacer Component
- *
- * Creates vertical spacing between blocks
- */
-
-interface Props {
-	height?: number | string // Height in pixels or 'auto'
-	heightMobile?: number | string
-	isMobile?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	height: 40,
-	heightMobile: undefined,
-})
-
-function computedHeight() {
-	const h = props.isMobile && props.heightMobile ? props.heightMobile : props.height
-	return typeof h === 'number' ? `${h}px` : h
-}
-</script>
-
-<template>
-	<div class="spacer" :style="{ height: computedHeight() }" />
-</template>
-
-<style scoped>
-.spacer {
-	width: 100%;
-}
-</style>

package/components/base/Text.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-/**
- * Base Text Component
- *
- * A simple text/paragraph component for displaying rich content
- */
-
-interface Props {
-	content?: string
-	tag?: 'p' | 'div' | 'span' | 'article' | 'section'
-	align?: 'left' | 'center' | 'right' | 'justify'
-}
-
-const { content = '', tag = 'div', align = 'left' } = defineProps<Props>()
-</script>
-
-<template>
-	<component :is="tag" :class="`text-align-${align}`" v-html="content" />
-</template>
-
-<style scoped>
-.text-align-left {
-	text-align: left;
-}
-
-.text-align-center {
-	text-align: center;
-}
-
-.text-align-right {
-	text-align: right;
-}
-
-.text-align-justify {
-	text-align: justify;
-}
-</style>