@smartnet360/svelte-components 0.0.1-beta.2

package/dist/Desktop/gridLayouts.js

@@ -0,0 +1,351 @@
+/**
+ * Grid Layout Configurations
+ *
+ * Defines all available grid layout types that can be created using the existing
+ * Half and Quarter components. Each layout specifies the component structure,
+ * slots for content assignment, and metadata for the Grid Selector.
+ */
+/**
+ * All available grid layout definitions
+ * Based on the existing Half and Quarter components
+ */
+export const GRID_LAYOUTS = {
+    // Basic Half Layouts
+    'half-horizontal': {
+        id: 'half-horizontal',
+        name: 'Half Horizontal (1x1)',
+        description: 'Two equal horizontal sections (left and right)',
+        icon: '⬌',
+        category: 'basic',
+        slots: [
+            {
+                id: 'left',
+                name: 'Left Section',
+                description: 'Left half of the screen',
+                position: { x: 0, y: 0, width: 50, height: 100 }
+            },
+            {
+                id: 'right',
+                name: 'Right Section',
+                description: 'Right half of the screen',
+                position: { x: 50, y: 0, width: 50, height: 100 }
+            }
+        ],
+        componentStructure: [
+            { type: 'Half', position: 'left' },
+            { type: 'Half', position: 'right' }
+        ],
+        previewSvg: `
+      <svg viewBox="0 0 100 60" class="layout-preview">
+        <rect x="2" y="2" width="46" height="56" fill="#e3f2fd" stroke="#1976d2" stroke-width="1"/>
+        <rect x="52" y="2" width="46" height="56" fill="#f3e5f5" stroke="#7b1fa2" stroke-width="1"/>
+        <text x="25" y="33" text-anchor="middle" font-size="8" fill="#1976d2">Left</text>
+        <text x="75" y="33" text-anchor="middle" font-size="8" fill="#7b1fa2">Right</text>
+      </svg>
+    `
+    },
+    'half-vertical': {
+        id: 'half-vertical',
+        name: 'Half Vertical (1x1)',
+        description: 'Two equal vertical sections (top and bottom)',
+        icon: '⬍',
+        category: 'basic',
+        slots: [
+            {
+                id: 'top',
+                name: 'Top Section',
+                description: 'Top half of the screen',
+                position: { x: 0, y: 0, width: 100, height: 50 }
+            },
+            {
+                id: 'bottom',
+                name: 'Bottom Section',
+                description: 'Bottom half of the screen',
+                position: { x: 0, y: 50, width: 100, height: 50 }
+            }
+        ],
+        componentStructure: [
+            { type: 'Half', position: 'top' },
+            { type: 'Half', position: 'bottom' }
+        ],
+        previewSvg: `
+      <svg viewBox="0 0 100 60" class="layout-preview">
+        <rect x="2" y="2" width="96" height="26" fill="#e8f5e8" stroke="#388e3c" stroke-width="1"/>
+        <rect x="2" y="32" width="96" height="26" fill="#fff3e0" stroke="#f57c00" stroke-width="1"/>
+        <text x="50" y="17" text-anchor="middle" font-size="8" fill="#388e3c">Top</text>
+        <text x="50" y="47" text-anchor="middle" font-size="8" fill="#f57c00">Bottom</text>
+      </svg>
+    `
+    },
+    // Asymmetric Layouts (Half + Quarters)
+    'left-half-right-quarters': {
+        id: 'left-half-right-quarters',
+        name: 'Left Half + Right Quarters (1x2)',
+        description: 'Left section takes half, right side split into two quarters',
+        icon: '⬌⬍',
+        category: 'asymmetric',
+        slots: [
+            {
+                id: 'left',
+                name: 'Left Section',
+                description: 'Full left half',
+                position: { x: 0, y: 0, width: 50, height: 100 }
+            },
+            {
+                id: 'top-right',
+                name: 'Top Right',
+                description: 'Top quarter of right side',
+                position: { x: 50, y: 0, width: 50, height: 50 }
+            },
+            {
+                id: 'bottom-right',
+                name: 'Bottom Right',
+                description: 'Bottom quarter of right side',
+                position: { x: 50, y: 50, width: 50, height: 50 }
+            }
+        ],
+        componentStructure: [
+            { type: 'Half', position: 'left' },
+            { type: 'Quarter', position: 'right' }
+        ],
+        previewSvg: `
+      <svg viewBox="0 0 100 60" class="layout-preview">
+        <rect x="2" y="2" width="46" height="56" fill="#e3f2fd" stroke="#1976d2" stroke-width="1"/>
+        <rect x="52" y="2" width="46" height="26" fill="#f3e5f5" stroke="#7b1fa2" stroke-width="1"/>
+        <rect x="52" y="32" width="46" height="26" fill="#fff3e0" stroke="#f57c00" stroke-width="1"/>
+        <text x="25" y="33" text-anchor="middle" font-size="8" fill="#1976d2">Left</text>
+        <text x="75" y="17" text-anchor="middle" font-size="6" fill="#7b1fa2">Top Right</text>
+        <text x="75" y="47" text-anchor="middle" font-size="6" fill="#f57c00">Bottom Right</text>
+      </svg>
+    `
+    },
+    'right-half-left-quarters': {
+        id: 'right-half-left-quarters',
+        name: 'Right Half + Left Quarters (2x1)',
+        description: 'Right section takes half, left side split into two quarters',
+        icon: '⬍⬌',
+        category: 'asymmetric',
+        slots: [
+            {
+                id: 'top-left',
+                name: 'Top Left',
+                description: 'Top quarter of left side',
+                position: { x: 0, y: 0, width: 50, height: 50 }
+            },
+            {
+                id: 'bottom-left',
+                name: 'Bottom Left',
+                description: 'Bottom quarter of left side',
+                position: { x: 0, y: 50, width: 50, height: 50 }
+            },
+            {
+                id: 'right',
+                name: 'Right Section',
+                description: 'Full right half',
+                position: { x: 50, y: 0, width: 50, height: 100 }
+            }
+        ],
+        componentStructure: [
+            { type: 'Quarter', position: 'left' },
+            { type: 'Half', position: 'right' }
+        ],
+        previewSvg: `
+      <svg viewBox="0 0 100 60" class="layout-preview">
+        <rect x="2" y="2" width="46" height="26" fill="#e8f5e8" stroke="#388e3c" stroke-width="1"/>
+        <rect x="2" y="32" width="46" height="26" fill="#fff3e0" stroke="#f57c00" stroke-width="1"/>
+        <rect x="52" y="2" width="46" height="56" fill="#f3e5f5" stroke="#7b1fa2" stroke-width="1"/>
+        <text x="25" y="17" text-anchor="middle" font-size="6" fill="#388e3c">Top Left</text>
+        <text x="25" y="47" text-anchor="middle" font-size="6" fill="#f57c00">Bottom Left</text>
+        <text x="75" y="33" text-anchor="middle" font-size="8" fill="#7b1fa2">Right</text>
+      </svg>
+    `
+    },
+    'top-half-bottom-quarters': {
+        id: 'top-half-bottom-quarters',
+        name: 'Top Half + Bottom Quarters (1x2)',
+        description: 'Top section takes half, bottom split into two quarters',
+        icon: '⬌⬍',
+        category: 'asymmetric',
+        slots: [
+            {
+                id: 'top',
+                name: 'Top Section',
+                description: 'Full top half',
+                position: { x: 0, y: 0, width: 100, height: 50 }
+            },
+            {
+                id: 'bottom-left',
+                name: 'Bottom Left',
+                description: 'Left quarter of bottom',
+                position: { x: 0, y: 50, width: 50, height: 50 }
+            },
+            {
+                id: 'bottom-right',
+                name: 'Bottom Right',
+                description: 'Right quarter of bottom',
+                position: { x: 50, y: 50, width: 50, height: 50 }
+            }
+        ],
+        componentStructure: [
+            { type: 'Half', position: 'top' },
+            { type: 'Quarter', position: 'bottom' }
+        ],
+        previewSvg: `
+      <svg viewBox="0 0 100 60" class="layout-preview">
+        <rect x="2" y="2" width="96" height="26" fill="#e3f2fd" stroke="#1976d2" stroke-width="1"/>
+        <rect x="2" y="32" width="46" height="26" fill="#e8f5e8" stroke="#388e3c" stroke-width="1"/>
+        <rect x="52" y="32" width="46" height="26" fill="#fff3e0" stroke="#f57c00" stroke-width="1"/>
+        <text x="50" y="17" text-anchor="middle" font-size="8" fill="#1976d2">Top</text>
+        <text x="25" y="47" text-anchor="middle" font-size="6" fill="#388e3c">Bottom Left</text>
+        <text x="75" y="47" text-anchor="middle" font-size="6" fill="#f57c00">Bottom Right</text>
+      </svg>
+    `
+    },
+    'bottom-half-top-quarters': {
+        id: 'bottom-half-top-quarters',
+        name: 'Bottom Half + Top Quarters (2x1)',
+        description: 'Bottom section takes half, top split into two quarters',
+        icon: '⬍⬌',
+        category: 'asymmetric',
+        slots: [
+            {
+                id: 'top-left',
+                name: 'Top Left',
+                description: 'Left quarter of top',
+                position: { x: 0, y: 0, width: 50, height: 50 }
+            },
+            {
+                id: 'top-right',
+                name: 'Top Right',
+                description: 'Right quarter of top',
+                position: { x: 50, y: 0, width: 50, height: 50 }
+            },
+            {
+                id: 'bottom',
+                name: 'Bottom Section',
+                description: 'Full bottom half',
+                position: { x: 0, y: 50, width: 100, height: 50 }
+            }
+        ],
+        componentStructure: [
+            { type: 'Quarter', position: 'top' },
+            { type: 'Half', position: 'bottom' }
+        ],
+        previewSvg: `
+      <svg viewBox="0 0 100 60" class="layout-preview">
+        <rect x="2" y="2" width="46" height="26" fill="#e8f5e8" stroke="#388e3c" stroke-width="1"/>
+        <rect x="52" y="2" width="46" height="26" fill="#fff3e0" stroke="#f57c00" stroke-width="1"/>
+        <rect x="2" y="32" width="96" height="26" fill="#f3e5f5" stroke="#7b1fa2" stroke-width="1"/>
+        <text x="25" y="17" text-anchor="middle" font-size="6" fill="#388e3c">Top Left</text>
+        <text x="75" y="17" text-anchor="middle" font-size="6" fill="#f57c00">Top Right</text>
+        <text x="50" y="47" text-anchor="middle" font-size="8" fill="#7b1fa2">Bottom</text>
+      </svg>
+    `
+    },
+    // Full Quarters Layout (2x2)
+    'quarters': {
+        id: 'quarters',
+        name: 'Four Quarters (2x2)',
+        description: 'Four equal quadrants in a 2x2 grid',
+        icon: '⬜',
+        category: 'symmetric',
+        slots: [
+            {
+                id: 'top-left',
+                name: 'Top Left',
+                description: 'Top left quadrant',
+                position: { x: 0, y: 0, width: 50, height: 50 }
+            },
+            {
+                id: 'top-right',
+                name: 'Top Right',
+                description: 'Top right quadrant',
+                position: { x: 50, y: 0, width: 50, height: 50 }
+            },
+            {
+                id: 'bottom-left',
+                name: 'Bottom Left',
+                description: 'Bottom left quadrant',
+                position: { x: 0, y: 50, width: 50, height: 50 }
+            },
+            {
+                id: 'bottom-right',
+                name: 'Bottom Right',
+                description: 'Bottom right quadrant',
+                position: { x: 50, y: 50, width: 50, height: 50 }
+            }
+        ],
+        componentStructure: [
+            { type: 'Quarter', position: 'left' },
+            { type: 'Quarter', position: 'right' }
+        ],
+        previewSvg: `
+      <svg viewBox="0 0 100 60" class="layout-preview">
+        <rect x="2" y="2" width="46" height="26" fill="#e3f2fd" stroke="#1976d2" stroke-width="1"/>
+        <rect x="52" y="2" width="46" height="26" fill="#f3e5f5" stroke="#7b1fa2" stroke-width="1"/>
+        <rect x="2" y="32" width="46" height="26" fill="#e8f5e8" stroke="#388e3c" stroke-width="1"/>
+        <rect x="52" y="32" width="46" height="26" fill="#fff3e0" stroke="#f57c00" stroke-width="1"/>
+        <text x="25" y="17" text-anchor="middle" font-size="6" fill="#1976d2">Top Left</text>
+        <text x="75" y="17" text-anchor="middle" font-size="6" fill="#7b1fa2">Top Right</text>
+        <text x="25" y="47" text-anchor="middle" font-size="6" fill="#388e3c">Bottom Left</text>
+        <text x="75" y="47" text-anchor="middle" font-size="6" fill="#f57c00">Bottom Right</text>
+      </svg>
+    `
+    }
+};
+/**
+ * Get layout by ID
+ */
+export function getLayoutById(id) {
+    return GRID_LAYOUTS[id];
+}
+/**
+ * Get all layouts by category
+ */
+export function getLayoutsByCategory(category) {
+    return Object.values(GRID_LAYOUTS).filter(layout => layout.category === category);
+}
+/**
+ * Get all available layouts
+ */
+export function getAllLayouts() {
+    return Object.values(GRID_LAYOUTS);
+}
+/**
+ * Get layouts ordered by complexity (basic -> asymmetric -> symmetric)
+ */
+export function getLayoutsOrdered() {
+    const basic = getLayoutsByCategory('basic');
+    const asymmetric = getLayoutsByCategory('asymmetric');
+    const symmetric = getLayoutsByCategory('symmetric');
+    return [...basic, ...asymmetric, ...symmetric];
+}
+/**
+ * Validate if a component assignment is complete
+ */
+export function validateComponentAssignments(layoutId, assignments) {
+    const layout = getLayoutById(layoutId);
+    if (!layout) {
+        return { isValid: false, missingSlots: [] };
+    }
+    const assignedSlots = assignments.map(a => a.slotId);
+    const requiredSlots = layout.slots.map(s => s.id);
+    const missingSlots = requiredSlots.filter(slot => !assignedSlots.includes(slot));
+    return {
+        isValid: missingSlots.length === 0,
+        missingSlots
+    };
+}
+/**
+ * Create a new grid configuration
+ */
+export function createGridConfiguration(name, layoutId, assignments) {
+    return {
+        id: `grid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        name,
+        layoutId,
+        componentAssignments: assignments,
+        created: new Date().toISOString(),
+        modified: new Date().toISOString()
+    };
+}

package/dist/Desktop/index.d.ts

@@ -0,0 +1,7 @@
+export { Half, Quarter, ResizeHandle, resizeStore } from './Grid/index.js';
+export { default as Desktop } from './Desktop.svelte';
+export { default as GridRenderer } from './GridRenderer.svelte';
+export { default as GridViewer } from './GridViewer.svelte';
+export { GridSelector, type ComponentConfig } from './GridSelector/index.js';
+export { createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './launchHelpers.js';
+export { getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, type GridLayoutDefinition, type GridSlot, type ComponentAssignment, type GridConfiguration } from './gridLayouts.js';

package/dist/Desktop/index.js

@@ -0,0 +1,7 @@
+export { Half, Quarter, ResizeHandle, resizeStore } from './Grid/index.js';
+export { default as Desktop } from './Desktop.svelte';
+export { default as GridRenderer } from './GridRenderer.svelte';
+export { default as GridViewer } from './GridViewer.svelte';
+export { GridSelector } from './GridSelector/index.js';
+export { createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './launchHelpers.js';
+export { getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration } from './gridLayouts.js';

package/dist/Desktop/launchHelpers.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Launch Helpers
+ *
+ * Utility functions to help parent applications implement grid launching functionality.
+ * These are optional helpers - parents can implement their own launch logic.
+ */
+import type { GridConfiguration } from './gridLayouts.js';
+import type { ComponentConfig } from './GridSelector/index.js';
+/**
+ * Create a launch handler that opens grids in new windows using localStorage
+ * This recreates the previous built-in behavior as a reusable helper
+ */
+export declare function createWindowLauncher(gridViewerUrl: string, availableComponents: ComponentConfig[], windowFeatures?: string): (grid: GridConfiguration) => void;
+/**
+ * Create a launch handler that opens grids in new tabs (simpler window features)
+ */
+export declare function createTabLauncher(gridViewerUrl: string, availableComponents: ComponentConfig[]): (grid: GridConfiguration) => void;
+/**
+ * Create a launch handler that uses direct URL navigation (same tab)
+ */
+export declare function createNavigationLauncher(gridViewerUrl: string, availableComponents: ComponentConfig[]): (grid: GridConfiguration) => void;
+/**
+ * Example of a custom launch handler that could show a modal instead
+ */
+export declare function createModalLauncher(openModalCallback: (grid: GridConfiguration) => void): (grid: GridConfiguration) => void;

package/dist/Desktop/launchHelpers.js

@@ -0,0 +1,77 @@
+/**
+ * Launch Helpers
+ *
+ * Utility functions to help parent applications implement grid launching functionality.
+ * These are optional helpers - parents can implement their own launch logic.
+ */
+/**
+ * Create a launch handler that opens grids in new windows using localStorage
+ * This recreates the previous built-in behavior as a reusable helper
+ */
+export function createWindowLauncher(gridViewerUrl, availableComponents, windowFeatures = 'width=1200,height=800,scrollbars=yes,resizable=yes,menubar=no,toolbar=no,location=no,status=no') {
+    return (grid) => {
+        // Create temporary storage key
+        const key = `grid-viewer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        // Store only the grid configuration and component IDs - not the actual components
+        const data = {
+            grid,
+            // Store component configs without the actual component objects
+            componentConfigs: availableComponents.map(comp => ({
+                id: comp.id,
+                name: comp.name,
+                icon: comp.icon,
+                description: comp.description,
+                category: comp.category
+            }))
+        };
+        localStorage.setItem(key, JSON.stringify(data));
+        // Open new window with the key parameter
+        const url = `${gridViewerUrl}?key=${key}`;
+        const newWindow = window.open(url, `grid-${grid.id}`, windowFeatures);
+        // Focus the new window if it opened successfully
+        if (newWindow) {
+            newWindow.focus();
+        }
+        else {
+            // Clean up if window failed to open
+            localStorage.removeItem(key);
+            alert('Failed to open new window. Please check your browser\'s popup blocker settings.');
+        }
+    };
+}
+/**
+ * Create a launch handler that opens grids in new tabs (simpler window features)
+ */
+export function createTabLauncher(gridViewerUrl, availableComponents) {
+    return createWindowLauncher(gridViewerUrl, availableComponents, 'scrollbars=yes,resizable=yes');
+}
+/**
+ * Create a launch handler that uses direct URL navigation (same tab)
+ */
+export function createNavigationLauncher(gridViewerUrl, availableComponents) {
+    return (grid) => {
+        // Create temporary storage key
+        const key = `grid-viewer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const data = {
+            grid,
+            componentConfigs: availableComponents.map(comp => ({
+                id: comp.id,
+                name: comp.name,
+                icon: comp.icon,
+                description: comp.description,
+                category: comp.category
+            }))
+        };
+        localStorage.setItem(key, JSON.stringify(data));
+        // Navigate to the grid viewer in the same tab
+        window.location.href = `${gridViewerUrl}?key=${key}`;
+    };
+}
+/**
+ * Example of a custom launch handler that could show a modal instead
+ */
+export function createModalLauncher(openModalCallback) {
+    return (grid) => {
+        openModalCallback(grid);
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, type ComponentConfig, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, type GridLayoutDefinition, type GridSlot, type ComponentAssignment, type GridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { Half, Quarter, ResizeHandle, resizeStore, Desktop, GridSelector, GridRenderer, GridViewer, getAllLayouts, getLayoutById, getLayoutsByCategory, getLayoutsOrdered, validateComponentAssignments, createGridConfiguration, createWindowLauncher, createTabLauncher, createNavigationLauncher, createModalLauncher } from './Desktop/index.js';

package/package.json

@@ -0,0 +1,65 @@
+{
+	"name": "@smartnet360/svelte-components",
+	"version": "0.0.1-beta.2",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"release:beta": "npm version prerelease --preid=beta && npm publish --tag beta --access public",
+		"release:alpha": "npm version prerelease --preid=alpha && npm publish --tag alpha --access public",
+		"release:patch": "npm version patch && npm publish --tag latest --access public",
+		"release:minor": "npm version minor && npm publish --tag latest --access public",
+		"release:major": "npm version major && npm publish --tag latest --access public"
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"sass": "^1.92.1",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^7.0.4"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"bootstrap": "^5.2.3"
+	}
+}