@appsemble/lang-sdk 0.36.2-test.0 → 0.36.2-test.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsemble/lang-sdk",
-  "version": "0.36.2-test.0",
+  "version": "0.36.2-test.2",
   "description": "Language SDK for Appsemble",
   "keywords": [
     "app",

package/schemas/BlockDefinition.js

@@ -89,6 +89,10 @@ The exact meaning of the parameters depends on the block type.
             },
         },
         events: { $ref: '#/components/schemas/EventsDefinition' },
+        gridArea: {
+            type: 'string',
+            description: 'Grid area defined in the page layout definition',
+        },
     },
 };
 //# sourceMappingURL=BlockDefinition.js.map

package/schemas/DeviceGridLayoutDefinition.d.ts

@@ -0,0 +1,2 @@
+import { type OpenAPIV3 } from 'openapi-types';
+export declare const DeviceGridLayoutDefinition: OpenAPIV3.NonArraySchemaObject;

package/schemas/DeviceGridLayoutDefinition.js

@@ -0,0 +1,18 @@
+export const DeviceGridLayoutDefinition = {
+    type: 'object',
+    description: 'Grid layout definition for each device breakpoint',
+    additionalProperties: false,
+    properties: {
+        spacing: {
+            $ref: '#/components/schemas/GridSpacingDefinition',
+            description: 'Spacing configuration for the grid',
+            default: { unit: '1rem', gap: 1, padding: 1 },
+        },
+        layout: {
+            $ref: '#/components/schemas/GridLayoutDefinition',
+            description: 'Layout configuration for the grid',
+            default: { columns: 1, template: ['main'] },
+        },
+    },
+};
+//# sourceMappingURL=DeviceGridLayoutDefinition.js.map

package/schemas/GridLayoutDefinition.d.ts

@@ -0,0 +1,2 @@
+import { type OpenAPIV3 } from 'openapi-types';
+export declare const GridLayoutDefinition: OpenAPIV3.NonArraySchemaObject;

package/schemas/GridLayoutDefinition.js

@@ -0,0 +1,22 @@
+export const GridLayoutDefinition = {
+    type: 'object',
+    description: 'Grid layout configuration for columns and template areas',
+    additionalProperties: false,
+    properties: {
+        columns: {
+            type: 'number',
+            description: 'Number of columns in the grid',
+            default: 1,
+            minimum: 1,
+        },
+        template: {
+            type: 'array',
+            description: 'Grid template areas - each string represents a row',
+            items: {
+                type: 'string',
+            },
+            default: ['main'],
+        },
+    },
+};
+//# sourceMappingURL=GridLayoutDefinition.js.map

package/schemas/GridSpacingDefinition.d.ts

@@ -0,0 +1,2 @@
+import { type OpenAPIV3 } from 'openapi-types';
+export declare const GridSpacingDefinition: OpenAPIV3.NonArraySchemaObject;

package/schemas/GridSpacingDefinition.js

@@ -0,0 +1,26 @@
+export const GridSpacingDefinition = {
+    type: 'object',
+    description: 'Define the spacing for grid layout of the page',
+    additionalProperties: false,
+    properties: {
+        unit: {
+            type: 'string',
+            description: 'CSS unit for spacing calculations (e.g., "1rem", "8px")',
+            default: '1rem',
+            pattern: '^-?(\\d+\\.?\\d*|\\.\\d+)(rem|em|px|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$',
+        },
+        gap: {
+            type: 'number',
+            description: 'Gap multiplier between grid items',
+            default: 1,
+            minimum: 0,
+        },
+        padding: {
+            type: 'number',
+            description: 'Padding multiplier around the grid',
+            default: 1,
+            minimum: 0,
+        },
+    },
+};
+//# sourceMappingURL=GridSpacingDefinition.js.map

package/schemas/PageDefinition.js

@@ -21,6 +21,9 @@ the list.
         actions: {
             $ref: '#/components/schemas/PageActionsDefinition',
         },
+        layout: {
+            $ref: '#/components/schemas/PageLayoutDefinition',
+        },
     },
 });
 //# sourceMappingURL=PageDefinition.js.map

package/schemas/PageLayoutDefinition.d.ts

@@ -0,0 +1,2 @@
+import { type OpenAPIV3 } from 'openapi-types';
+export declare const PageLayoutDefinition: OpenAPIV3.NonArraySchemaObject;

package/schemas/PageLayoutDefinition.js

@@ -0,0 +1,18 @@
+export const PageLayoutDefinition = {
+    type: 'object',
+    description: 'Grid layout of the page, define as an anchor to re-use across multiple pages',
+    additionalProperties: false,
+    minProperties: 1,
+    properties: {
+        mobile: {
+            $ref: '#/components/schemas/DeviceGridLayoutDefinition',
+        },
+        tablet: {
+            $ref: '#/components/schemas/DeviceGridLayoutDefinition',
+        },
+        desktop: {
+            $ref: '#/components/schemas/DeviceGridLayoutDefinition',
+        },
+    },
+};
+//# sourceMappingURL=PageLayoutDefinition.js.map

package/schemas/SubPage.js

@@ -8,6 +8,9 @@ export const SubPage = {
             $ref: '#/components/schemas/RemapperDefinition',
             description: 'The name of the sub page.',
         },
+        layout: {
+            $ref: '#/components/schemas/PageLayoutDefinition',
+        },
         roles: {
             type: 'array',
             description: `The list of roles that are allowed to view this page.

package/schemas/index.d.ts

@@ -120,3 +120,7 @@ export * from './SecurityRoleDefinition.js';
 export * from './TabsPageDefinition.js';
 export * from './Theme.js';
 export * from './WebhookDefinition.js';
+export * from './DeviceGridLayoutDefinition.js';
+export * from './GridLayoutDefinition.js';
+export * from './GridSpacingDefinition.js';
+export * from './PageLayoutDefinition.js';

package/schemas/index.js

@@ -120,4 +120,8 @@ export * from './SecurityRoleDefinition.js';
 export * from './TabsPageDefinition.js';
 export * from './Theme.js';
 export * from './WebhookDefinition.js';
+export * from './DeviceGridLayoutDefinition.js';
+export * from './GridLayoutDefinition.js';
+export * from './GridSpacingDefinition.js';
+export * from './PageLayoutDefinition.js';
 //# sourceMappingURL=index.js.map

package/types/block.d.ts

@@ -78,4 +78,8 @@ export interface BlockDefinition extends ControllerDefinition {
      * The exact meaning of the parameters depends on the project type.
      */
     parameters?: JsonObject;
+    /**
+     * Grid area defined in the page layout definition
+     */
+    gridArea?: string;
 }

package/types/core.d.ts

@@ -9,6 +9,7 @@ import { type ResourceDefinition } from './resource.js';
 import { type ViewRole } from './roles.js';
 import { type Security } from './security.js';
 import { type Theme } from './theme.js';
+import { type PageLayoutDefinition } from './gridLayout.js';
 export type SettingName = 'email' | 'languages' | 'name' | 'password' | 'phoneNumber' | 'picture';
 export interface AppDefinition {
     /**
@@ -225,10 +226,12 @@ export interface SubPageDefinition {
     name: Remapper;
     roles?: ViewRole[];
     blocks: BlockDefinition[];
+    layout?: PageLayoutDefinition;
 }
 export interface BasicPageDefinition extends BasePageDefinition {
     type?: 'page';
     blocks: BlockDefinition[];
+    layout?: PageLayoutDefinition;
 }
 export interface ContainerPageDefinition extends BasePageDefinition {
     type: 'container';

package/types/gridLayout.d.ts

@@ -0,0 +1,19 @@
+import { type RequireAtLeastOne } from 'type-fest';
+export interface GridLayoutDefinition {
+    columns: number;
+    template: string[];
+}
+export interface GridLayoutSpacingDefinition {
+    unit: string;
+    padding: number;
+    gap: number;
+}
+export interface DeviceGridLayoutDefinition {
+    layout: GridLayoutDefinition;
+    spacing: GridLayoutSpacingDefinition;
+}
+export type PageLayoutDefinition = RequireAtLeastOne<{
+    mobile: DeviceGridLayoutDefinition;
+    tablet: DeviceGridLayoutDefinition;
+    desktop: DeviceGridLayoutDefinition;
+}>;

package/types/gridLayout.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gridLayout.js.map

package/types/index.d.ts

@@ -15,6 +15,7 @@ export * from './roles.js';
 export * from './security.js';
 export * from './theme.js';
 export * from './member.js';
+export * from './gridLayout.js';
 export interface ActionType {
     /**
      * Whether or not app creators are required to define this action.

package/types/index.js

@@ -14,4 +14,5 @@ export * from './roles.js';
 export * from './security.js';
 export * from './theme.js';
 export * from './member.js';
+export * from './gridLayout.js';
 //# sourceMappingURL=index.js.map

package/validation.js

@@ -299,6 +299,149 @@ function validateController(definition, controllerImplementations, report) {
         },
     });
 }
+function getTemplateAreas(layoutDefinition) {
+    const areas = new Set();
+    if (!layoutDefinition) {
+        return areas;
+    }
+    for (const deviceDefinition of Object.values(layoutDefinition)) {
+        if (deviceDefinition?.layout?.template) {
+            for (const row of deviceDefinition.layout.template) {
+                for (const area of row.split(' ')) {
+                    if (area && area !== '.') {
+                        areas.add(area);
+                    }
+                }
+            }
+        }
+    }
+    return areas;
+}
+function validateTemplateAreasAreRectangular(template, report, path) {
+    const grid = template.map((row) => row.split(' '));
+    function isAreaRectangular(areaName) {
+        const cells = [];
+        for (const [row, rowCells] of grid.entries()) {
+            for (const [col, cell] of rowCells.entries()) {
+                if (cell === areaName) {
+                    cells.push({ row, col });
+                }
+            }
+        }
+        if (cells.length === 0) {
+            return true;
+        }
+        let minRow = Infinity;
+        let maxRow = -Infinity;
+        let minCol = Infinity;
+        let maxCol = -Infinity;
+        for (const cell of cells) {
+            minRow = Math.min(minRow, cell.row);
+            maxRow = Math.max(maxRow, cell.row);
+            minCol = Math.min(minCol, cell.col);
+            maxCol = Math.max(maxCol, cell.col);
+        }
+        const expectedCount = (maxRow - minRow + 1) * (maxCol - minCol + 1);
+        if (cells.length !== expectedCount) {
+            return false;
+        }
+        for (let row = minRow; row <= maxRow; row += 1) {
+            for (let col = minCol; col <= maxCol; col += 1) {
+                if (grid[row][col] !== areaName) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    const areas = new Set();
+    for (const row of grid) {
+        for (const cell of row) {
+            if (cell && cell !== '.') {
+                areas.add(cell);
+            }
+        }
+    }
+    for (const area of areas) {
+        if (!isAreaRectangular(area)) {
+            report(template, `grid area '${area}' does not form a single contiguous rectangle`, path);
+        }
+    }
+}
+function validatePageLayoutDefinition(layoutDefinition, report, path) {
+    if (!layoutDefinition) {
+        return;
+    }
+    for (const [deviceName, deviceDefinition] of Object.entries(layoutDefinition)) {
+        if (!deviceDefinition?.layout?.template || !deviceDefinition?.layout?.columns) {
+            continue;
+        }
+        if (deviceDefinition.layout.template.some((row) => row.split(' ').length !== deviceDefinition.layout.columns)) {
+            report(deviceDefinition.layout.template, 'template needs to be the same length as number of columns', [...path, deviceName, 'layout', 'template']);
+        }
+        validateTemplateAreasAreRectangular(deviceDefinition.layout.template, report, [
+            ...path,
+            deviceName,
+            'layout',
+            'template',
+        ]);
+    }
+}
+function validateBlockGridAreas(blocks, layoutDefinition, report, path) {
+    const templateAreas = getTemplateAreas(layoutDefinition);
+    for (const [idx, block] of blocks.entries()) {
+        if (block.gridArea && !templateAreas.has(block.gridArea)) {
+            report(block.gridArea, `does not match any area defined in the layout template. Available areas: ${[...templateAreas].join(', ') || 'none'}`, [...path, idx, 'gridArea']);
+        }
+    }
+}
+function validateSubPageLayout(layout, blocks, report, path) {
+    validatePageLayoutDefinition(layout, report, path);
+    if (layout && blocks) {
+        validateBlockGridAreas(blocks, layout, report, [...path, 'blocks']);
+    }
+}
+function validateGridLayout(definition, report) {
+    iterApp(definition, {
+        onPage(page, path) {
+            // Basic page
+            if (page.type === 'page' || page.type === undefined) {
+                const basicPage = page;
+                validateSubPageLayout(basicPage.layout, basicPage.blocks, report, path);
+                return;
+            }
+            // Tabs page
+            if (page.type === 'tabs') {
+                const tabsPage = page;
+                if (tabsPage.tabs) {
+                    for (const [tabIdx, tab] of tabsPage.tabs.entries()) {
+                        validateSubPageLayout(tab.layout, tab.blocks, report, [...path, 'tabs', tabIdx]);
+                    }
+                }
+                else if (tabsPage.definition?.foreach) {
+                    validateSubPageLayout(tabsPage.definition.foreach.layout, tabsPage.definition.foreach.blocks, report, [...path, 'definition', 'foreach']);
+                }
+                return;
+            }
+            // Flow page
+            if (page.type === 'flow') {
+                const flowPage = page;
+                for (const [stepIdx, step] of flowPage.steps.entries()) {
+                    validateSubPageLayout(step.layout, step.blocks, report, [...path, 'steps', stepIdx]);
+                }
+                return;
+            }
+            // Loop page
+            if (page.type === 'loop') {
+                const loopPage = page;
+                validateSubPageLayout(loopPage.foreach.layout, loopPage.foreach.blocks, report, [
+                    ...path,
+                    'foreach',
+                ]);
+            }
+        },
+    });
+}
 function validateBlocks(definition, blockVersions, report) {
     iterApp(definition, {
         onBlock(block, path) {
@@ -1241,6 +1384,7 @@ export async function validateAppDefinition(definition, getBlockVersions, contro
         validateActions(definition, report);
         validateEvents(definition, blockVersionMap, report);
         validateUniquePageNames(definition, report);
+        validateGridLayout(definition, report);
     }
     catch (error) {
         report(null, `Unexpected error: ${error instanceof Error ? error.message : error}`, []);