@shoppexio/builder-runtime 0.1.0

package/dist/attributes.d.ts

@@ -0,0 +1,8 @@
+import type { StyleSlotId } from '@shoppex/builder-contracts';
+export type BuilderAttributeMap = Record<string, string>;
+export declare function builderContent(path: string): BuilderAttributeMap;
+export declare function builderSlot(slotId: StyleSlotId, input?: {
+    blockId?: string;
+}): BuilderAttributeMap;
+export declare function builderBlock(blockId: string, blockType: string): BuilderAttributeMap;
+//# sourceMappingURL=attributes.d.ts.map

package/dist/attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../src/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEzD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAIhE;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,mBAAmB,CAKtG;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,CAKpF"}

package/dist/attributes.js

@@ -0,0 +1,17 @@
+export function builderContent(path) {
+    return {
+        'data-builder-content': path,
+    };
+}
+export function builderSlot(slotId, input = {}) {
+    return {
+        'data-builder-slot': slotId,
+        ...(input.blockId ? { 'data-builder-block': input.blockId } : {}),
+    };
+}
+export function builderBlock(blockId, blockType) {
+    return {
+        'data-builder-block': blockId,
+        'data-builder-block-type': blockType,
+    };
+}

package/dist/builder-runtime.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=builder-runtime.test.d.ts.map

package/dist/builder-runtime.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder-runtime.test.d.ts","sourceRoot":"","sources":["../src/builder-runtime.test.ts"],"names":[],"mappings":""}

package/dist/builder-runtime.test.js

@@ -0,0 +1,115 @@
+import { describe, expect, test } from 'bun:test';
+import { createBlockInstance, createEmptyBuilderSettings } from '@shoppex/builder-contracts';
+import { builderBlock, builderContent, builderSlot, canAddBlock, createBuilderCss, getBuilderContentList, getBuilderContentString, getPageBlocks, resolveBlockSettings, resolveStyleSlotValue, } from './index.js';
+function createSettings() {
+    return {
+        ...createEmptyBuilderSettings(1),
+        theme: {
+            content: {
+                'hero.title': 'Launch sale',
+                faq: {
+                    items: [{ question: 'Can I edit sections?', answer: 'Yes' }],
+                },
+            },
+            layout: {
+                home: {
+                    blocks: [
+                        createBlockInstance({
+                            id: 'hero-1',
+                            type: 'hero',
+                            settings: { title: 'Hero block' },
+                            style_overrides: {
+                                'button.radius': { base: 14 },
+                            },
+                        }),
+                    ],
+                },
+            },
+            style_slots: {
+                'button.radius': { base: 8, md: 12 },
+                'color.primary': '#ff5500',
+            },
+            pages: [],
+            terms: {},
+        },
+    };
+}
+const manifest = {
+    id: 'default',
+    name: 'Default',
+    version: '2.0.0',
+    pages: {
+        home: {
+            label: 'Home',
+            allowedBlocks: ['hero'],
+            defaultBlocks: [],
+        },
+    },
+    blocks: {
+        hero: {
+            label: 'Hero',
+            variants: [],
+            settings: {
+                title: { type: 'text', label: 'Headline', defaultValue: 'Default hero' },
+            },
+            exposedStyleSlots: ['button.radius'],
+            presets: [],
+        },
+    },
+    styleSlots: {},
+    presets: {},
+};
+describe('@shoppex/builder-runtime', () => {
+    test('reads direct and nested content values', () => {
+        const settings = createSettings();
+        expect(getBuilderContentString(settings, 'hero.title')).toBe('Launch sale');
+        expect(getBuilderContentList(settings, 'faq.items')).toEqual([{ question: 'Can I edit sections?', answer: 'Yes' }]);
+    });
+    test('preserves intentionally empty content strings', () => {
+        const settings = createSettings();
+        settings.theme.content['hero.subtitle'] = '';
+        expect(getBuilderContentString(settings, 'hero.subtitle', 'Default subtitle')).toBe('');
+    });
+    test('resolves page blocks', () => {
+        const settings = createSettings();
+        expect(getPageBlocks(settings, 'home')).toHaveLength(1);
+        expect(getPageBlocks(settings, 'missing')).toEqual([]);
+    });
+    test('resolves style slots with breakpoint fallback and block override', () => {
+        const settings = createSettings();
+        const block = settings.theme.layout.home.blocks[0];
+        expect(resolveStyleSlotValue(settings, 'button.radius', { breakpoint: 'lg' })).toBe(12);
+        expect(resolveStyleSlotValue(settings, 'button.radius', { block, breakpoint: 'md' })).toBe(14);
+    });
+    test('emits CSS variables with responsive media blocks', () => {
+        const css = createBuilderCss(createSettings());
+        expect(css).toContain('--builder-button-radius: 8px;');
+        expect(css).toContain('--builder-color-primary: #ff5500;');
+        expect(css).toContain('@media (min-width: 768px)');
+        expect(css).toContain('--builder-button-radius: 12px;');
+    });
+    test('checks block limits against the manifest', () => {
+        const settings = createSettings();
+        expect(canAddBlock(settings, manifest, 'home', 'hero')).toBe(true);
+        expect(canAddBlock(settings, manifest, 'home', 'faq')).toBe(false);
+    });
+    test('merges block defaults from the manifest', () => {
+        const block = createBlockInstance({
+            id: 'hero-2',
+            type: 'hero',
+            settings: {},
+        });
+        expect(resolveBlockSettings(block, manifest)).toEqual({ title: 'Default hero' });
+    });
+    test('creates the three supported builder attributes', () => {
+        expect(builderContent('hero.title')).toEqual({ 'data-builder-content': 'hero.title' });
+        expect(builderSlot('button.radius', { blockId: 'hero-1' })).toEqual({
+            'data-builder-slot': 'button.radius',
+            'data-builder-block': 'hero-1',
+        });
+        expect(builderBlock('hero-1', 'hero')).toEqual({
+            'data-builder-block': 'hero-1',
+            'data-builder-block-type': 'hero',
+        });
+    });
+});

package/dist/content.d.ts

@@ -0,0 +1,13 @@
+import type { BuilderSettings } from '@shoppex/builder-contracts';
+export type JsonRecord = Record<string, unknown>;
+export declare function getBuilderContentValue(settings: BuilderSettings, path: string): unknown;
+export declare function getBuilderContentString(settings: BuilderSettings, path: string, fallback?: string): string | undefined;
+export declare function getBuilderContentList<T = unknown>(settings: BuilderSettings, path: string, fallback?: T[]): T[];
+export declare function getBuilderContentRecord(settings: BuilderSettings): JsonRecord;
+export declare function getBlockSettingValue<T = unknown>(settings: BuilderSettings, input: {
+    pageId: string;
+    blockId: string;
+    path: string;
+    fallback: T;
+}): T;
+//# sourceMappingURL=content.d.ts.map

package/dist/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../src/content.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEjD,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAQvF;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAGtH;AAED,wBAAgB,qBAAqB,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,CAAC,EAAO,GAAG,CAAC,EAAE,CAGnH;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,eAAe,GAAG,UAAU,CAE7E;AAED,wBAAgB,oBAAoB,CAAC,CAAC,GAAG,OAAO,EAC9C,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,CAAA;CAAE,GACpE,CAAC,CAYH"}

package/dist/content.js

@@ -0,0 +1,39 @@
+export function getBuilderContentValue(settings, path) {
+    const content = settings.theme.content;
+    if (Object.prototype.hasOwnProperty.call(content, path)) {
+        return content[path];
+    }
+    return getByDottedPath(content, path);
+}
+export function getBuilderContentString(settings, path, fallback) {
+    const value = getBuilderContentValue(settings, path);
+    return typeof value === 'string' ? value : fallback;
+}
+export function getBuilderContentList(settings, path, fallback = []) {
+    const value = getBuilderContentValue(settings, path);
+    return Array.isArray(value) ? value : fallback;
+}
+export function getBuilderContentRecord(settings) {
+    return settings.theme.content;
+}
+export function getBlockSettingValue(settings, input) {
+    const block = settings.theme.layout[input.pageId]?.blocks.find((candidate) => candidate.id === input.blockId);
+    if (!block) {
+        return input.fallback;
+    }
+    if (Object.prototype.hasOwnProperty.call(block.settings, input.path)) {
+        return block.settings[input.path];
+    }
+    const nested = getByDottedPath(block.settings, input.path);
+    return nested === undefined ? input.fallback : nested;
+}
+function getByDottedPath(record, path) {
+    let current = record;
+    for (const segment of path.split('.')) {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[segment];
+    }
+    return current;
+}

package/dist/css-vars.d.ts

@@ -0,0 +1,6 @@
+import type { BuilderSettings, StyleSlotId, StyleSlots } from '@shoppex/builder-contracts';
+export declare function getStyleSlotCssVariable(slotId: StyleSlotId): string;
+export declare function createStyleSlotCssVariables(slots: StyleSlots): Record<string, string>;
+export declare function createBuilderCss(settings: BuilderSettings, selector?: string): string;
+export declare function createStyleSlotsCss(slots: StyleSlots, selector?: string): string;
+//# sourceMappingURL=css-vars.d.ts.map

package/dist/css-vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["../src/css-vars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAc,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAsCvG,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAEnE;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAarF;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,QAAQ,SAAU,GAAG,MAAM,CAEtF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,SAAU,GAAG,MAAM,CAoDjF"}

package/dist/css-vars.js

@@ -0,0 +1,97 @@
+import { CORE_STYLE_SLOT_IDS } from '@shoppex/builder-contracts';
+import { isResponsiveRecord } from './style-slots.js';
+const BREAKPOINT_MEDIA = {
+    sm: '(min-width: 640px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 1024px)',
+    xl: '(min-width: 1280px)',
+};
+const STYLE_SLOT_CSS_VARIABLES = {
+    'button.radius': { name: '--builder-button-radius', unit: 'px' },
+    'button.background': { name: '--builder-button-background' },
+    'button.foreground': { name: '--builder-button-foreground' },
+    'button.border': { name: '--builder-button-border' },
+    'button.font.weight': { name: '--builder-button-font-weight' },
+    'input.radius': { name: '--builder-input-radius', unit: 'px' },
+    'input.height': { name: '--builder-input-height', unit: 'px' },
+    'input.border': { name: '--builder-input-border' },
+    'input.background': { name: '--builder-input-background' },
+    'input.foreground': { name: '--builder-input-foreground' },
+    'card.radius': { name: '--builder-card-radius', unit: 'px' },
+    'card.background': { name: '--builder-card-background' },
+    'card.border': { name: '--builder-card-border' },
+    'section.padding.y': { name: '--builder-section-padding-y', unit: 'px' },
+    'section.padding.x': { name: '--builder-section-padding-x', unit: 'px' },
+    'container.width': { name: '--builder-container-width', unit: 'px' },
+    'color.primary': { name: '--builder-color-primary' },
+    'color.accent': { name: '--builder-color-accent' },
+    'color.background': { name: '--builder-color-background' },
+    'color.foreground': { name: '--builder-color-foreground' },
+    'color.muted': { name: '--builder-color-muted' },
+    'link.color': { name: '--builder-link-color' },
+    'typography.heading.weight': { name: '--builder-typography-heading-weight' },
+    'typography.body.size': { name: '--builder-typography-body-size', unit: 'px' },
+};
+export function getStyleSlotCssVariable(slotId) {
+    return STYLE_SLOT_CSS_VARIABLES[slotId].name;
+}
+export function createStyleSlotCssVariables(slots) {
+    const variables = {};
+    for (const slotId of CORE_STYLE_SLOT_IDS) {
+        const value = slots[slotId];
+        if (value === undefined || isResponsiveRecord(value)) {
+            continue;
+        }
+        variables[STYLE_SLOT_CSS_VARIABLES[slotId].name] = formatStyleSlotValue(slotId, value);
+    }
+    return variables;
+}
+export function createBuilderCss(settings, selector = ':root') {
+    return createStyleSlotsCss(settings.theme.style_slots, selector);
+}
+export function createStyleSlotsCss(slots, selector = ':root') {
+    const baseDeclarations = [];
+    const responsiveDeclarations = {
+        sm: [],
+        md: [],
+        lg: [],
+        xl: [],
+    };
+    for (const slotId of CORE_STYLE_SLOT_IDS) {
+        const value = slots[slotId];
+        if (value === undefined) {
+            continue;
+        }
+        const cssVariable = STYLE_SLOT_CSS_VARIABLES[slotId].name;
+        if (!isResponsiveRecord(value)) {
+            baseDeclarations.push(`${cssVariable}: ${formatStyleSlotValue(slotId, value)};`);
+            continue;
+        }
+        if (value.base !== undefined) {
+            baseDeclarations.push(`${cssVariable}: ${formatStyleSlotValue(slotId, value.base)};`);
+        }
+        for (const breakpoint of ['sm', 'md', 'lg', 'xl']) {
+            if (value[breakpoint] !== undefined) {
+                responsiveDeclarations[breakpoint].push(`${cssVariable}: ${formatStyleSlotValue(slotId, value[breakpoint])};`);
+            }
+        }
+    }
+    const chunks = [];
+    if (baseDeclarations.length > 0) {
+        chunks.push(`${selector} {\n  ${baseDeclarations.join('\n  ')}\n}`);
+    }
+    for (const breakpoint of ['sm', 'md', 'lg', 'xl']) {
+        if (responsiveDeclarations[breakpoint].length === 0) {
+            continue;
+        }
+        chunks.push(`@media ${BREAKPOINT_MEDIA[breakpoint]} {\n  ${selector} {\n    ${responsiveDeclarations[breakpoint].join('\n    ')}\n  }\n}`);
+    }
+    return chunks.join('\n\n');
+}
+function formatStyleSlotValue(slotId, value) {
+    const unit = STYLE_SLOT_CSS_VARIABLES[slotId].unit;
+    if (typeof value === 'number') {
+        return unit ? `${value}${unit}` : `${value}`;
+    }
+    return String(value);
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './attributes.js';
+export * from './content.js';
+export * from './css-vars.js';
+export * from './layout.js';
+export * from './react.js';
+export * from './style-slots.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from './attributes.js';
+export * from './content.js';
+export * from './css-vars.js';
+export * from './layout.js';
+export * from './react.js';
+export * from './style-slots.js';

package/dist/layout.d.ts

@@ -0,0 +1,9 @@
+import type { BlockInstance, BuilderSettings, PageLayout, ThemeManifest } from '@shoppex/builder-contracts';
+export declare function getPageLayout(settings: BuilderSettings, pageId: string): PageLayout;
+export declare function getPageBlocks(settings: BuilderSettings, pageId: string): BlockInstance[];
+export declare function getVisiblePageBlocks(settings: BuilderSettings, pageId: string): BlockInstance[];
+export declare function getBlockById(settings: BuilderSettings, pageId: string, blockId: string): BlockInstance | null;
+export declare function getAllowedBlockTypes(manifest: ThemeManifest, pageId: string): string[];
+export declare function canAddBlock(settings: BuilderSettings, manifest: ThemeManifest, pageId: string, blockType: string): boolean;
+export declare function resolveBlockSettings(block: BlockInstance, manifest: ThemeManifest): Record<string, unknown>;
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE5G,wBAAgB,aAAa,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAG,UAAU,CAEnF;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,EAAE,CAExF;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,EAAE,CAE/F;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAE7G;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAEtF;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAc1H;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAgB3G"}

package/dist/layout.js

@@ -0,0 +1,40 @@
+export function getPageLayout(settings, pageId) {
+    return settings.theme.layout[pageId] ?? { blocks: [] };
+}
+export function getPageBlocks(settings, pageId) {
+    return getPageLayout(settings, pageId).blocks;
+}
+export function getVisiblePageBlocks(settings, pageId) {
+    return getPageBlocks(settings, pageId).filter((block) => block.visible);
+}
+export function getBlockById(settings, pageId, blockId) {
+    return getPageBlocks(settings, pageId).find((block) => block.id === blockId) ?? null;
+}
+export function getAllowedBlockTypes(manifest, pageId) {
+    return manifest.pages[pageId]?.allowedBlocks ?? [];
+}
+export function canAddBlock(settings, manifest, pageId, blockType) {
+    const page = manifest.pages[pageId];
+    const blockDefinition = manifest.blocks[blockType];
+    if (!page || !blockDefinition || !page.allowedBlocks.includes(blockType)) {
+        return false;
+    }
+    if (!blockDefinition.maxInstances) {
+        return true;
+    }
+    const currentCount = getPageBlocks(settings, pageId).filter((block) => block.type === blockType).length;
+    return currentCount < blockDefinition.maxInstances;
+}
+export function resolveBlockSettings(block, manifest) {
+    const blockDefinition = manifest.blocks[block.type];
+    if (!blockDefinition) {
+        return block.settings;
+    }
+    const defaults = Object.fromEntries(Object.entries(blockDefinition.settings)
+        .filter(([, field]) => Object.prototype.hasOwnProperty.call(field, 'defaultValue'))
+        .map(([key, field]) => [key, field.defaultValue]));
+    return {
+        ...defaults,
+        ...block.settings,
+    };
+}

package/dist/react-runtime.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=react-runtime.test.d.ts.map

package/dist/react-runtime.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-runtime.test.d.ts","sourceRoot":"","sources":["../src/react-runtime.test.tsx"],"names":[],"mappings":""}