@marvalt/dstyler 0.1.3

package/README.md

@@ -0,0 +1,34 @@
+# @marvalt/dstyler
+
+Design system package for styling WordPress content with zero-config templates.
+
+## Description
+
+`@marvalt/dstyler` is a lightweight renderer that:
+- Applies global design tokens (colors, spacing, typography)
+- Maps parsed WordPress sections → React templates
+- Ensures consistent responsive styling across the site
+- Renders blocks (text, images, buttons, forms) inside sections
+
+## Installation
+
+```bash
+npm install @marvalt/dstyler
+```
+
+## Usage
+
+```tsx
+import { ThemeProvider, StyledPage } from '@marvalt/dstyler';
+import { getThemeStyles } from '@marvalt/wadapter';
+
+<ThemeProvider wpStyles={getThemeStyles()}>
+  <StyledPage page={page} registry={registry} />
+</ThemeProvider>
+```
+
+## License
+
+GPL-3.0-or-later
+
+

package/dist/components/AutoBlock.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+import React from 'react';
+import type { WordPressBlock, ComponentRegistry } from '@marvalt/wparser';
+export interface AutoBlockProps {
+    block: WordPressBlock;
+    registry?: ComponentRegistry;
+}
+export declare const AutoBlock: React.FC<AutoBlockProps>;
+//# sourceMappingURL=AutoBlock.d.ts.map

package/dist/components/AutoBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoBlock.d.ts","sourceRoot":"","sources":["../../src/components/AutoBlock.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAO1E,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiC9C,CAAC"}

package/dist/components/AutoSection.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+import React from 'react';
+import type { Section } from '../types/section';
+import type { ComponentRegistry } from '@marvalt/wparser';
+export interface AutoSectionProps {
+    section: Section;
+    registry?: ComponentRegistry;
+}
+export declare const AutoSection: React.FC<AutoSectionProps>;
+//# sourceMappingURL=AutoSection.d.ts.map

package/dist/components/AutoSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSection.d.ts","sourceRoot":"","sources":["../../src/components/AutoSection.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOhD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqDlD,CAAC"}

package/dist/components/StyledPage.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+import React from 'react';
+import type { ComponentRegistry, WordPressBlock } from '@marvalt/wparser';
+export interface WordPressPage {
+    blocks?: WordPressBlock[];
+    [key: string]: any;
+}
+export interface StyledPageProps {
+    page: WordPressPage;
+    registry?: ComponentRegistry;
+}
+export declare const StyledPage: React.FC<StyledPageProps>;
+//# sourceMappingURL=StyledPage.d.ts.map

package/dist/components/StyledPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledPage.d.ts","sourceRoot":"","sources":["../../src/components/StyledPage.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAI1E,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6BhD,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+export * from './AutoSection';
+export * from './AutoBlock';
+export * from './StyledPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/engine/detectSections.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+import type { WordPressBlock } from '@marvalt/wparser';
+import type { Section } from '../types/section';
+/**
+ * Detect sections from WordPress blocks
+ * Sections are defined by core/group blocks (with or without alignment)
+ * Sub-sections are core/columns blocks inside groups
+ */
+export declare function detectSections(blocks: WordPressBlock[]): Section[];
+/**
+ * Determine section style based on alternating logic and custom classes
+ * Rules:
+ * - default is always first
+ * - after default follows alternate
+ * - highlight resets - next section is default
+ */
+export declare function determineSectionStyle(section: Section, previousStyle?: 'default' | 'alternate' | 'highlight'): 'default' | 'alternate' | 'highlight';
+//# sourceMappingURL=detectSections.d.ts.map

package/dist/engine/detectSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detectSections.d.ts","sourceRoot":"","sources":["../../src/engine/detectSections.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,OAAO,EAAE,CA6BlE;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,OAAO,EAChB,aAAa,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,WAAW,GACpD,SAAS,GAAG,WAAW,GAAG,WAAW,CAgCvC"}

package/dist/engine/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+export * from './detectSections';
+export * from './selectTemplate';
+export * from './renderBlock';
+//# sourceMappingURL=index.d.ts.map

package/dist/engine/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/engine/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/engine/renderBlock.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+import type { WordPressBlock } from '@marvalt/wparser';
+import type { BlockRendererProps } from '../types/block';
+import type { ComponentType } from 'react';
+export type BlockRenderer = ComponentType<BlockRendererProps>;
+/**
+ * Select block renderer based on block type
+ */
+export declare function selectBlockRenderer(block: WordPressBlock): string;
+//# sourceMappingURL=renderBlock.d.ts.map

package/dist/engine/renderBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderBlock.d.ts","sourceRoot":"","sources":["../../src/engine/renderBlock.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQ3C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAE9D;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CA8BjE"}

package/dist/engine/selectTemplate.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+import type { Section } from '../types/section';
+import type { ComponentType } from 'react';
+export type TemplateComponent = ComponentType<any>;
+/**
+ * Select template component based on section properties
+ */
+export declare function selectTemplate(section: Section): string;
+//# sourceMappingURL=selectTemplate.d.ts.map

package/dist/engine/selectTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectTemplate.d.ts","sourceRoot":"","sources":["../../src/engine/selectTemplate.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQ3C,MAAM,MAAM,iBAAiB,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAEnD;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAsBvD"}

package/dist/index.d.ts

@@ -0,0 +1,288 @@
+import React, { ComponentType } from 'react';
+import { WordPressBlock, ComponentRegistry } from '@marvalt/wparser';
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+interface DesignTokens {
+    colors: {
+        primary: string;
+        secondary: string;
+        background: string;
+        text: string;
+        default: string;
+        alternate: string;
+        highlight: string;
+    };
+    spacing: {
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    typography: {
+        body: string;
+        heading: string;
+        scale: number;
+    };
+}
+interface ThemeStyles {
+    typography?: {
+        heading_font_family?: string;
+        body_font_family?: string;
+        base_font_size?: string;
+        line_height?: string;
+    };
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        text?: string;
+        background?: string;
+    };
+    backgrounds?: {
+        image?: string;
+        repeat?: string;
+        position?: string;
+        size?: string;
+    };
+    shadows?: {
+        box_shadow?: string;
+        text_shadow?: string;
+    };
+    layout?: {
+        container_max_width?: string;
+        wide_container_max_width?: string;
+        content_padding?: string;
+    };
+}
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    wpStyles?: ThemeStyles;
+}
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface Section {
+    id: string;
+    type: 'section' | 'subsection';
+    block: WordPressBlock;
+    blocks: WordPressBlock[];
+    index: number;
+    style?: 'default' | 'alternate' | 'highlight';
+    customClass?: string;
+    customId?: string;
+}
+interface SectionStyle {
+    background: 'default' | 'alternate' | 'highlight';
+    className?: string;
+}
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface AutoSectionProps {
+    section: Section;
+    registry?: ComponentRegistry;
+}
+declare const AutoSection: React.FC<AutoSectionProps>;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface AutoBlockProps {
+    block: WordPressBlock;
+    registry?: ComponentRegistry;
+}
+declare const AutoBlock: React.FC<AutoBlockProps>;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface WordPressPage {
+    blocks?: WordPressBlock[];
+    [key: string]: any;
+}
+interface StyledPageProps {
+    page: WordPressPage;
+    registry?: ComponentRegistry;
+}
+declare const StyledPage: React.FC<StyledPageProps>;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+declare const defaultTokens: DesignTokens;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+/**
+ * Convert WordPress theme styles to design tokens
+ */
+declare function convertWordPressToTokens(wpStyles?: ThemeStyles): DesignTokens;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+/**
+ * Inject CSS variables from design tokens into the document
+ */
+declare function injectCSSVariables(tokens: DesignTokens): void;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+/**
+ * Detect sections from WordPress blocks
+ * Sections are defined by core/group blocks (with or without alignment)
+ * Sub-sections are core/columns blocks inside groups
+ */
+declare function detectSections(blocks: WordPressBlock[]): Section[];
+/**
+ * Determine section style based on alternating logic and custom classes
+ * Rules:
+ * - default is always first
+ * - after default follows alternate
+ * - highlight resets - next section is default
+ */
+declare function determineSectionStyle(section: Section, previousStyle?: 'default' | 'alternate' | 'highlight'): 'default' | 'alternate' | 'highlight';
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+type TemplateComponent = ComponentType<any>;
+/**
+ * Select template component based on section properties
+ */
+declare function selectTemplate(section: Section): string;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface BlockRendererProps {
+    block: WordPressBlock;
+    className?: string;
+}
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+type BlockRenderer = ComponentType<BlockRendererProps>;
+/**
+ * Select block renderer based on block type
+ */
+declare function selectBlockRenderer(block: WordPressBlock): string;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface SectionBaseProps {
+    section: Section;
+    children?: React.ReactNode;
+}
+declare const SectionBase: React.FC<SectionBaseProps>;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface SectionWaveProps {
+    section: Section;
+    children?: React.ReactNode;
+    waveTop?: boolean;
+    waveBottom?: boolean;
+}
+declare const SectionWave: React.FC<SectionWaveProps>;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface HeroDefaultProps {
+    section: Section;
+    children?: React.ReactNode;
+}
+declare const HeroDefault: React.FC<HeroDefaultProps>;
+
+/**
+ * @license GPL-3.0-or-later
+ *
+ * This file is part of the MarVAlt Open SDK.
+ * Copyright (c) 2025 Vibune Pty Ltd.
+ */
+
+interface FooterMinimalProps {
+    section: Section;
+    children?: React.ReactNode;
+}
+declare const FooterMinimal: React.FC<FooterMinimalProps>;
+
+export { AutoBlock, AutoSection, FooterMinimal, HeroDefault, SectionBase, SectionWave, StyledPage, ThemeProvider, convertWordPressToTokens, defaultTokens, detectSections, determineSectionStyle, injectCSSVariables, selectBlockRenderer, selectTemplate };
+export type { AutoBlockProps, AutoSectionProps, BlockRenderer, BlockRendererProps, DesignTokens, FooterMinimalProps, HeroDefaultProps, Section, SectionBaseProps, SectionStyle, SectionWaveProps, StyledPageProps, TemplateComponent, ThemeProviderProps, ThemeStyles, WordPressPage };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}