@toototech/webbuilder-plugins 0.1.0

package/dist/cms/cmsFactory.d.ts

@@ -0,0 +1,164 @@
+export interface CmsFactoryDataProvider {
+    getEffectiveTenantId?: () => string | number | null | undefined;
+    getRuntimeEndpoints?: () => Partial<CmsRuntimeEndpoints> | null | undefined;
+    getRuntimeRequestConfig?: () => CmsRuntimeRequestConfig | null | undefined;
+}
+export interface CmsRuntimeEndpoints {
+    postPage: string;
+    mediaPage: string;
+    productPage: string;
+    postTagList: string;
+    postTagListAll: string;
+    search: string;
+}
+export interface CmsRuntimeRequestConfig {
+    headerName?: string | null;
+    headerValue?: string | number | null;
+}
+export declare const setCmsFactoryDataProvider: (provider: CmsFactoryDataProvider) => (() => void);
+/**
+ * 非交互子组件的共享选项（编辑器中不可选中/拖动/复制）。
+ * 用于 CMS 组件内部的静态预览元素，防止用户在编辑器中误操作。
+ */
+export declare const STATIC_CHILD: {
+    selectable: boolean;
+    draggable: boolean;
+    droppable: boolean;
+    hoverable: boolean;
+    layerable: boolean;
+    copyable: boolean;
+    removable: boolean;
+    badgable: boolean;
+    highlightable: boolean;
+};
+/** 创建非交互的编辑器预览 header 区块 */
+export declare function makePreviewHeader(headerClass: string, content: string): any;
+/** 创建带 data-cms-repeat 属性的非交互网格容器 */
+export declare function makePreviewGrid(repeatEntity: string, gridClass: string, cards: any[]): any;
+/** 为列表型 CMS 组件创建分页导航 */
+export declare function makePaginationNav(paginationClass: string, pageBtnClass: string, options?: {
+    interactiveInEditor?: boolean;
+}): any;
+/** 列表型 CMS 组件的共享分页 traits */
+export declare const PAGINATION_TRAITS: ({
+    type: string;
+    label: string;
+    name: string;
+    changeProp: boolean;
+    min: number;
+    max: number;
+    options?: undefined;
+} | {
+    type: string;
+    label: string;
+    name: string;
+    changeProp: boolean;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    min?: undefined;
+    max?: undefined;
+})[];
+/** 列表型 CMS 组件的共享分页 model 默认值 */
+export declare const PAGINATION_PROPS: {
+    cmsPageSize: number;
+    cmsPagination: string;
+    cmsMaxPages: number;
+};
+/** 列表型 CMS 组件的共享分页默认 attributes */
+export declare const PAGINATION_ATTRS: {
+    'data-page-size': string;
+    'data-pagination': string;
+    'data-max-pages': string;
+};
+/** 从 model 提取分页相关的 data attributes */
+export declare function syncPaginationAttrs(model: any): Record<string, string>;
+interface CmsRegistryEntry {
+    /** 发布模板 HTML（不含编辑器 header，repeat 容器只含模板卡片） */
+    publishTemplate: string;
+    /** data-cms-component 值，如 'post-list' */
+    dataCmsComponent: string;
+    /** data-wb-component 值，如 'cms-post-list'（GrapesJS 内部用，发布时移除） */
+    dataWbComponent: string;
+    /** 动态发布模式：getInnerHTML 从实时组件树生成，fixCmsComponentsHtml 不替换 innerHTML */
+    dynamicPublish?: boolean;
+}
+/**
+ * 手动注册 CMS 组件到 cmsTypeRegistry（供不走 registerCmsComponent 的组件使用）。
+ * 注册后 fixCmsComponentsHtml() 可以正确同步模型属性到发布 HTML。
+ */
+export declare function registerCmsTypeEntry(entry: CmsRegistryEntry): void;
+/**
+ * 返回 editor.getHtml({ attributes }) 回调函数。
+ * 对 CMS 组件：移除 data-wb-component，确保 data-cms-component 存在。
+ */
+export declare function getCmsAttributesCallback(): (component: any, attrs: Record<string, string>) => Record<string, string>;
+/**
+ * 后处理 editor.getHtml() 的输出，确保 CMS 组件的 HTML 包含所有
+ * data-cms-* 模板属性供后端渲染引擎使用。
+ *
+ * 策略：
+ *  1. 从编辑器模型树收集所有 CMS 组件的模型属性（_syncAttrs 维护的最新值）
+ *  2. 用 DOMParser 解析 HTML
+ *  3. 对每个 CMS 组件：设置正确的模型属性 + 替换 innerHTML 为静态发布模板
+ *  4. 移除 data-wb-component（GrapesJS 内部用，后端不需要）
+ *  5. 清理 live preview 痕迹
+ */
+export declare function fixCmsComponentsHtml(htmlStr: string, editor: any): string;
+export interface CmsComponentConfig {
+    /** GrapesJS 组件类型标识，如 'wb-cms-post-list' */
+    type: string;
+    /** data-wb-component 属性值，如 'cms-post-list' */
+    dataWbComponent: string;
+    /** data-cms-component 属性值（供后端渲染引擎识别） */
+    dataCmsComponent: string;
+    /** 编辑器中显示的组件名称 */
+    name: string;
+    /** injectStyleOnce 的去重 key（styles 非空时必填） */
+    styleKey?: string;
+    /** 要注入的组件 CSS（可选，仅用于 hover 等伪类效果；视觉样式应通过组件 style 属性设置） */
+    styles?: string;
+    /** 根元素的额外默认 HTML attributes */
+    defaultAttributes?: Record<string, string>;
+    /** 根元素的默认 style（GrapesJS style 对象，覆盖默认的 display:block;width:100%） */
+    defaultStyle?: Record<string, string>;
+    /** 额外的 model props（trait 驱动的属性）及默认值 */
+    defaultProps?: Record<string, any>;
+    /** Trait 定义列表 */
+    traits: any[];
+    /** 编辑器预览子组件定义 */
+    components: any[];
+    /** 根据 model 返回需要同步到 HTML attributes 的键值对 */
+    syncAttrs: (model: any) => Record<string, string>;
+    /** 需要监听 change 事件的 model prop 名称列表 */
+    watchProps: string[];
+    /** 发布模板从 components 的哪个索引开始（默认 1，跳过编辑器 header） */
+    publishStartIndex?: number;
+    /** 组件 model 初始化后的扩展逻辑 */
+    onModelInit?: (model: any, editor: any) => void;
+    /** 是否允许向组件根节点拖入子组件 */
+    droppable?: boolean;
+    /** 组件脚本（运行于画布 iframe / 发布页面） */
+    script?: any;
+    /** 导出脚本（默认等于 script） */
+    scriptExport?: any;
+    /** 传递给组件脚本的 props 列表 */
+    scriptProps?: string[];
+    /** 自定义发布模板 HTML（若提供则跳过自动生成，用于需要与编辑器组件结构不同的场景） */
+    publishTemplate?: string;
+    /**
+     * 启用动态发布模式。适用于子组件含用户可配置属性的组件（如产品详情的 pm-*-block）。
+     * 开启后：
+     * - toJSON 保留 components（用户修改的子组件状态可持久化）
+     * - getInnerHTML 从实时组件树生成（输出反映用户配置）
+     * - fixCmsComponentsHtml 不替换 innerHTML（保留动态输出）
+     */
+    dynamicPublish?: boolean;
+}
+/**
+ * 向 GrapesJS 注册一个 CMS 组件类型。
+ * 统一处理：样式注入、isComponent 识别、init/_syncAttrs 事件绑定、toHTML 导出。
+ */
+export declare function registerCmsComponent(editor: any, config: CmsComponentConfig): void;
+export {};

package/dist/cms/dynamicRenderPipeline.d.ts

@@ -0,0 +1,12 @@
+export type DynamicRenderData = Record<string, any>;
+export interface BindDynamicRenderOptions {
+    doc?: Document;
+    removeBindingAttrs?: boolean;
+    normalizeDynamicElements?: boolean;
+    imageStrategy?: 'preview-background' | 'seo-img';
+}
+export declare function normalizeSiteHref(rawValue: any): string;
+export declare function composeDynamicUrl(value: unknown, template?: string | null): string;
+export declare function composePlaceholderUrl(field: string, template?: string | null): string;
+export declare function removeDynamicRenderCloneIds(root: Element): void;
+export declare function bindDynamicRenderData(root: Element, data: DynamicRenderData, options?: BindDynamicRenderOptions): Element;

package/dist/cms/index.d.ts

@@ -0,0 +1,31 @@
+export * from './plugin.js';
+export { createCmsComponentsPlugin as componentsCms } from './plugin.js';
+export * from './cmsFactory.js';
+export * from './dynamicRenderPipeline.js';
+export * from './registries/dynamic/cms/post/styles.js';
+export * from './registries/dynamic/cms/product/styles.js';
+export * from './registries/dynamic/cms/product/detail.styles.js';
+export * from './registries/dynamic/cms/product/detailV2.styles.js';
+export * from './registries/dynamic/cms/product/previewProductTrait.js';
+export * from './registries/dynamic/cms/media/previewMediaTrait.js';
+export * from './registries/dynamic/cms/constants.js';
+export * from './registries/dynamic/cms/menu/siteMenuAttrs.js';
+export * from './registries/dynamic/cms/menuTree/menuTreeAttrs.js';
+export * from './registries/dynamic/cms/dynamicField/constants.js';
+export * from './registries/dynamic/cms/dynamicField/styles.js';
+export * from './registries/dynamic/cms/dynamicField/bindings.js';
+export * from './registries/dynamic/cms/dynamicField/helpers.js';
+export * from './registries/dynamic/cms/dynamicField/registerBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/breadcrumbBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/conditionalBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/datetimeBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/htmlBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/imageBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/linkBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/seoBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/textBlock.js';
+export * from './registries/dynamic/cms/dynamicField/blocks/tocBlock.js';
+export * from './registries/dynamic/dataProvider.js';
+export * from './registries/dynamic/loopGrid/paginationStyles.js';
+export * from './registries/dynamic/loopGrid/types.js';
+export * from './registries/dynamic/loopGrid/preview.js';

package/dist/cms/plugin.d.ts

@@ -0,0 +1,12 @@
+import { type WebBuilderBlockPackProvider, type WebBuilderFeaturePlugin, type WebBuilderPluginCleanup, type WebBuilderPluginContext } from '@toototech/webbuilder/core';
+export declare const CMS_COMPONENTS_PLUGIN_ID = "cms-components";
+export declare const CMS_COMPONENTS_CAPABILITY = "webbuilder:cms-components";
+export declare const CMS_COMPONENT_LOAD_TYPES: readonly ["wb-cms-post-list", "wb-cms-post-card", "wb-cms-cases-list", "wb-cms-cases-card", "wb-cms-post-category-filter", "wb-cms-post-latest", "wb-cms-post-detail", "wb-cms-media-list", "wb-cms-technical-service-list", "wb-cms-technical-service-card", "wb-cms-technical-download-list", "wb-cms-technical-download-item", "wb-cms-technical-support-detail", "wb-cms-media-latest", "wb-cms-media-detail", "wb-cms-product-list", "wb-cms-product-card", "wb-cms-product-datasheet-list", "wb-cms-product-latest", "wb-cms-product-featured", "wb-cms-product-related", "wb-cms-product-detail", "wb-cms-product-detail-v2", "wb-cms-faq-section", "wb-cms-product-category-faq", "wb-cms-search", "wb-cms-site-menu", "wb-cms-menu-tree", "wb-cms-dynamic-text", "wb-cms-dynamic-html", "wb-cms-dynamic-image", "wb-cms-dynamic-link", "wb-cms-dynamic-datetime", "wb-cms-dynamic-if", "wb-cms-dynamic-repeat", "wb-cms-dynamic-repeat-item", "wb-cms-dynamic-seo", "wb-cms-dynamic-toc", "wb-cms-dynamic-breadcrumb", "wb-loop-grid", "wb-ssg-field"];
+export declare const CMS_COMPONENT_REQUIRED_HOST_SERVICES: readonly ["post", "media", "product", "menu", "faq", "inquiry"];
+export interface CmsComponentsRuntime {
+    activateEditor?: (context: WebBuilderPluginContext) => void | WebBuilderPluginCleanup;
+    activateCmsPreview?: (context: WebBuilderPluginContext) => void | WebBuilderPluginCleanup;
+    activateTemplatePreview?: (context: WebBuilderPluginContext) => void | WebBuilderPluginCleanup;
+    blockPacks?: WebBuilderBlockPackProvider;
+}
+export declare const createCmsComponentsPlugin: (runtime?: CmsComponentsRuntime) => WebBuilderFeaturePlugin;

package/dist/cms/publisher.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from 'grapesjs';
+export interface CmsPublisherRegistryExecutor {
+    id: string;
+    register: (editor: Editor) => void;
+}
+export declare const CMS_PUBLISHER_REGISTRIES: CmsPublisherRegistryExecutor[];
+export declare function registerCmsPublisherComponents(editor: Editor): void;

package/dist/cms/registries/dynamic/cms/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const WB_CMS_POST_LATEST_TYPE = "wb-cms-post-latest";
+export declare const WB_CMS_POST_DETAIL_TYPE = "wb-cms-post-detail";
+export declare const WB_CMS_MEDIA_LIST_TYPE = "wb-cms-media-list";
+export declare const WB_CMS_TECHNICAL_SERVICE_LIST_TYPE = "wb-cms-technical-service-list";
+export declare const WB_CMS_TECHNICAL_DOWNLOAD_LIST_TYPE = "wb-cms-technical-download-list";
+export declare const WB_CMS_TECHNICAL_SUPPORT_DETAIL_TYPE = "wb-cms-technical-support-detail";
+export declare const WB_CMS_MEDIA_LATEST_TYPE = "wb-cms-media-latest";
+export declare const WB_CMS_MEDIA_DETAIL_TYPE = "wb-cms-media-detail";
+export declare const WB_CMS_PRODUCT_LATEST_TYPE = "wb-cms-product-latest";
+export declare const WB_CMS_PRODUCT_FEATURED_TYPE = "wb-cms-product-featured";
+export declare const WB_CMS_PRODUCT_RELATED_TYPE = "wb-cms-product-related";
+export declare const WB_CMS_FAQ_SECTION_TYPE = "wb-cms-faq-section";
+export declare const WB_CMS_PRODUCT_CATEGORY_FAQ_TYPE = "wb-cms-product-category-faq";
+export declare const WB_CMS_SEARCH_TYPE = "wb-cms-search";
+export declare const WB_CMS_SITE_MENU_TYPE = "wb-cms-site-menu";
+export declare const WB_CMS_MENU_TREE_TYPE = "wb-cms-menu-tree";

package/dist/cms/registries/dynamic/cms/dynamicField/bindings.d.ts

@@ -0,0 +1,78 @@
+/**
+ * 动态字段 / 动态循环的元数据配置。
+ *
+ * 目的：所有 `wb-cms-dynamic-*` 原子组件的 trait 下拉项全部来自这张表，
+ * 不再让用户手写 `data-cms-bind="post.name"` 等属性。
+ *
+ * 如果要新增一个字段或新增一种模板上下文（例如媒体详情、产品详情），
+ * 只需在这里补充一行即可，组件注册逻辑无需改动。
+ */
+/**
+ * 动态字段作用的"页面模板上下文"。
+ * 与 `config/templateSharedResources.ts` 的 TempTemplateResourceType 一一对应，
+ * 但这里使用更短的 kebab-case 形式，方便在 custom 属性 / trait 内共用。
+ */
+export type DynamicContext = 'post-detail' | 'media-detail' | 'product-detail' | 'post-loop-item' | 'media-loop-item' | 'product-loop-item' | 'post-category-item' | 'media-category-item' | 'product-category-item' | 'product-category-faq-loop-item';
+/** 资源类型 → 动态字段上下文 */
+export declare const RESOURCE_TYPE_TO_DYNAMIC_CONTEXT: Record<string, DynamicContext>;
+export declare const resolveDynamicContext: (resourceType?: string | null, extJson?: string | null) => DynamicContext | null;
+/** 字段数据类型，用于过滤不同 block 可选字段（如图片 block 只能选 image） */
+export type DynamicFieldKind = 'text' | 'html' | 'datetime' | 'image' | 'url' | 'number' | 'bool'
+/**
+ * 对象数组字段（如 `relatedPosts = [{id, name}]`）。
+ * 动态文本 block 可通过 `dynListFormat` 下拉（bracket / comma / space / pipe / hashtag）
+ * 决定如何把数组条目的 `name` 拼接成一段文字。
+ */
+ | 'list';
+export interface DynamicFieldMeta {
+    /** `data-cms-bind*` 使用的 key，例如 'post.name' */
+    value: string;
+    /** 下拉显示文案 */
+    label: string;
+    kind: DynamicFieldKind;
+    /** 是否从新增绑定的下拉中隐藏；保留元数据用于兼容历史模板 */
+    hidden?: boolean;
+    /** datetime 字段的默认格式 */
+    defaultFormat?: string;
+    /** 所属分组（下拉里的 optgroup 显示） */
+    group?: string;
+}
+export interface DynamicRepeatSource {
+    /** 完整 `data-cms-repeat` 值，例如 'relatedPost@relatedPosts' */
+    value: string;
+    /** 下拉显示文案 */
+    label: string;
+    /** 父循环数据源；为空表示页面级循环 */
+    parentSource?: string;
+    /** 条目别名（`xx@list` 中的 xx），子组件字段都以此为前缀 */
+    itemAlias: string;
+    /** 循环作用域内可用的字段集合 */
+    itemFields: DynamicFieldMeta[];
+    /** 用于 SSG / 预览的集合字段名（`@` 右侧部分） */
+    collection: string;
+}
+/** 根据 data-cms-component / 运行环境的 detail key 归一，后续预览可按需扩展 */
+export declare const CONTEXT_DETAIL_CMS_COMPONENT: Record<DynamicContext, string>;
+export declare const DYNAMIC_FIELD_MAP: Record<DynamicContext, DynamicFieldMeta[]>;
+export declare const DYNAMIC_REPEAT_MAP: Record<DynamicContext, DynamicRepeatSource[]>;
+/**
+ * 在注册组件时，默认以 post-detail 为"展示字段"，
+ * 后续用户打开其他模板（媒体/产品）时可通过 `wbTemplateContext` 识别切换。
+ */
+export declare const DEFAULT_DYNAMIC_CONTEXT: DynamicContext;
+export declare const findFieldMeta: (fieldValue: string | undefined | null) => DynamicFieldMeta | null;
+export declare const findRepeatSource: (context: DynamicContext, sourceValue: string | undefined | null) => DynamicRepeatSource | null;
+/** 拿到当前上下文"页面作用域"的字段（不含 repeat 内的 item 字段） */
+export declare const getPageLevelFields: (context: DynamicContext) => DynamicFieldMeta[];
+/** 拿到当前上下文所有 repeat item 字段（合集，不区分来源） */
+export declare const getAllRepeatItemFields: (context: DynamicContext) => DynamicFieldMeta[];
+/** 构建 GrapesJS select trait 的 options（`{ value, label }`），按 group 分组前缀 */
+export declare const buildFieldSelectOptions: (fields: DynamicFieldMeta[], options?: {
+    includeEmpty?: boolean;
+    emptyLabel?: string;
+    emptyValue?: string;
+}) => Array<{
+    value: string;
+    label: string;
+}>;
+export declare const filterFieldsByKind: (fields: DynamicFieldMeta[], kinds: DynamicFieldKind[]) => DynamicFieldMeta[];

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/breadcrumbBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicBreadcrumbBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/conditionalBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicConditionalBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/datetimeBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicDatetimeBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/htmlBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicHtmlBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/imageBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicImageBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/linkBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicLinkBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/seoBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicSeoBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/textBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicTextBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/blocks/tocBlock.d.ts

@@ -0,0 +1 @@
+export declare const registerDynamicTocBlock: (editor: any) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/constants.d.ts

@@ -0,0 +1,19 @@
+/** 动态字段 / 循环 block 的 GrapesJS 组件类型常量 */
+export declare const WB_CMS_DYN_TEXT_TYPE = "wb-cms-dynamic-text";
+export declare const WB_CMS_DYN_HTML_TYPE = "wb-cms-dynamic-html";
+export declare const WB_CMS_DYN_IMAGE_TYPE = "wb-cms-dynamic-image";
+export declare const WB_CMS_DYN_LINK_TYPE = "wb-cms-dynamic-link";
+export declare const WB_CMS_DYN_DATETIME_TYPE = "wb-cms-dynamic-datetime";
+export declare const WB_CMS_DYN_IF_TYPE = "wb-cms-dynamic-if";
+export declare const WB_CMS_DYN_REPEAT_TYPE = "wb-cms-dynamic-repeat";
+export declare const WB_CMS_DYN_REPEAT_ITEM_TYPE = "wb-cms-dynamic-repeat-item";
+export declare const WB_CMS_DYN_SEO_TYPE = "wb-cms-dynamic-seo";
+export declare const WB_CMS_DYN_TOC_TYPE = "wb-cms-dynamic-toc";
+export declare const WB_CMS_DYN_BREADCRUMB_TYPE = "wb-cms-dynamic-breadcrumb";
+/** 所有动态字段组件类型的集合，供外部识别 */
+export declare const WB_CMS_DYNAMIC_FIELD_TYPES: readonly ["wb-cms-dynamic-text", "wb-cms-dynamic-html", "wb-cms-dynamic-image", "wb-cms-dynamic-link", "wb-cms-dynamic-datetime", "wb-cms-dynamic-if", "wb-cms-dynamic-repeat", "wb-cms-dynamic-seo", "wb-cms-dynamic-toc", "wb-cms-dynamic-breadcrumb"];
+export type WbCmsDynamicFieldType = (typeof WB_CMS_DYNAMIC_FIELD_TYPES)[number];
+/** 组件共享的 data-wb-dynamic 标记，便于预览/发布识别 */
+export declare const WB_DYN_MARK_ATTR = "data-wb-dynamic";
+/** 页面 custom 下存储"当前页动态字段上下文"的 key */
+export declare const WB_TEMPLATE_CONTEXT_KEY = "wbTemplateContext";

package/dist/cms/registries/dynamic/cms/dynamicField/helpers.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 动态字段 block 的共享工具与上下文解析。
+ */
+import { type DynamicContext, type DynamicFieldKind, type DynamicFieldMeta } from './bindings.js';
+/**
+ * 从组件所属页面的 `custom` 字段读取 `wbTemplateContext`。
+ * 如果没有，根据全局页面 resourceType 尝试解析；都没有就回退到默认。
+ */
+export declare const getDynamicContextFromComponent: (component: any, editor?: any) => DynamicContext;
+/**
+ * 从组件向上查找最近的 `wb-cms-dynamic-repeat` 父级。
+ * 这个父级决定了当前可以 bind 的 item 字段集合。
+ */
+export declare const findAncestorRepeat: (component: any) => any | null;
+export declare const findAncestorRepeats: (component: any) => any[];
+/**
+ * 根据当前组件所在位置（是否在某个 repeat 内），返回可供 trait 下拉使用的字段列表。
+ *
+ * - 不在 repeat 内：返回页面级字段（post.*）；
+ * - 在 repeat 内：返回该 repeat source 的 itemFields；
+ *   若为空（例如 source 还没选），返回当前上下文所有 repeat 的 itemFields 合集做兜底。
+ */
+export declare const resolveAvailableFields: (component: any, options?: {
+    kinds?: DynamicFieldKind[];
+    includeContextFields?: boolean;
+    editor?: any;
+}) => {
+    context: DynamicContext;
+    inRepeat: boolean;
+    fields: DynamicFieldMeta[];
+};
+export interface DynamicTraitOption {
+    id: string;
+    value: string;
+    label: string;
+}
+/** 构造 select trait 的 options（GrapesJS 要求 `{ id?, value, label }`） */
+export declare const buildTraitOptions: (fields: DynamicFieldMeta[], options?: {
+    includeEmpty?: boolean;
+    emptyLabel?: string;
+    emptyValue?: string;
+}) => DynamicTraitOption[];
+/** 拿到当前上下文下所有可选 repeat 源（供 wb-cms-dynamic-repeat 使用） */
+export declare const getRepeatSourceOptions: (component: any, editor?: any) => DynamicTraitOption[];
+/** 刷新某个 trait 的 options（编辑器内需要手动触发渲染） */
+export declare const refreshTraitOptions: (component: any, traitName: string, options: DynamicTraitOption[]) => void;
+export declare const clearTraitValueIfUnavailable: (component: any, propName: string, fields: DynamicFieldMeta[]) => void;
+/** 把 model 某个 prop 映射成对应 DOM attribute（空值则移除） */
+export declare const applyBindAttribute: (model: any, attrName: string, value: string | undefined | null) => void;
+/** 供 syncAttrs 使用的"只保留非空 data-cms-*"生成器 */
+export declare const buildSparseAttrs: (entries: Array<[string, string | undefined | null]>) => Record<string, string>;
+export { DYNAMIC_FIELD_MAP, DYNAMIC_REPEAT_MAP } from './bindings.js';

package/dist/cms/registries/dynamic/cms/dynamicField/registerBlock.d.ts

@@ -0,0 +1,57 @@
+export interface DynamicBlockRefreshHook {
+    /** 选中或属性变化时，用于刷新 traits 下拉（字段/源 选项） */
+    (model: any, editor: any): void;
+}
+export interface DynamicBlockDefaults {
+    tagName: string;
+    /** 组件在画布上显示的名字 */
+    name: string;
+    /** 初始内部内容（可为空字符串） */
+    content?: string;
+    /** 初始子组件定义 */
+    components?: any[];
+    /** 初始 DOM 属性（class、data-*、src 等） */
+    attributes?: Record<string, string>;
+    /** trait 默认值（初始 prop 值） */
+    defaultProps?: Record<string, any>;
+    /** 是否可拖进来（默认 true） */
+    draggable?: boolean | string;
+    /** 是否可放置子元素（默认 false） */
+    droppable?: boolean | string;
+    /** 是否可编辑内联文字（默认 false，字段值由 traits 控制） */
+    editable?: boolean;
+    /** 是否允许删除（默认 true） */
+    removable?: boolean;
+    /** 是否允许复制（默认 true） */
+    copyable?: boolean;
+    /** 是否在 style manager 可定制（默认 true） */
+    stylable?: boolean;
+    /** 组件类型相关 CSS，必须能随 schema 在发布器中恢复 */
+    styles?: string;
+}
+export interface DynamicBlockRegistration {
+    /** GrapesJS 组件类型，例如 `wb-cms-dynamic-text` */
+    type: string;
+    /** `data-wb-dynamic` 属性值，用于 isComponent 识别 */
+    dynamicKey: string;
+    /** model defaults（结构化版本） */
+    defaults: DynamicBlockDefaults;
+    /** 需要监听 change 事件的 prop 名单；变更后会触发 `syncAttrs` */
+    watchProps: string[];
+    /** 根据当前 model 生成要写回的 `data-*` 属性；空字符串会被自动移除 */
+    syncAttrs: (model: any) => Record<string, string>;
+    /** traits 定义（允许函数形式以便在注册时动态获取 editor） */
+    traits: any[] | ((editor: any) => any[]);
+    /**
+     * 每次选中 / 挂载 / 结构变化时调用，用于刷新 trait 下拉 options。
+     * 实现里通常会：① 根据是否在 repeat 内切换字段集；② 根据当前模板上下文切换字段集。
+     */
+    refreshTraits?: DynamicBlockRefreshHook;
+    /** 从已保存的 data-cms-* attributes 回填 changeProp props，保证保存后再次打开能显示选中值 */
+    hydrateProps?: (model: any, editor: any) => void;
+    /** 首次拖入画布后执行（仅运行一次），用于设置合理默认字段值 */
+    onFirstAdd?: (model: any, editor: any) => void;
+    /** init 最后一步额外挂钩（可选） */
+    onModelInit?: (model: any, editor: any) => void;
+}
+export declare const registerDynamicFieldBlock: (editor: any, registration: DynamicBlockRegistration) => void;

package/dist/cms/registries/dynamic/cms/dynamicField/styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 动态字段组件在编辑器画布中的占位样式。
+ * 这些样式只在"字段未绑定"或"预览数据缺失"时显示，给设计师一个可感知的提示外观，
+ * 发布时会被 SSG 渲染器用真实数据替换或清理掉。
+ */
+export declare const DYNAMIC_FIELD_STYLES = "\n  [data-wb-dynamic] {\n    position: relative;\n  }\n  [data-wb-dynamic][data-wb-dyn-empty=\"true\"] {\n    outline: 1px dashed #cbd5e1;\n    outline-offset: 2px;\n    min-height: 18px;\n    background: rgba(148, 163, 184, 0.08);\n  }\n  [data-wb-dynamic=\"image\"] {\n    display: inline-block;\n  }\n  [data-wb-dynamic=\"text\"] {\n    white-space: pre-line;\n  }\n  img[data-wb-dynamic=\"image\"][data-wb-dyn-empty=\"true\"] {\n    min-width: 120px;\n    min-height: 80px;\n  }\n  [data-wb-dynamic=\"if\"] {\n    display: block;\n    padding: 4px;\n    border: 1px dashed #fca5a5;\n    background: rgba(252, 165, 165, 0.08);\n    border-radius: 4px;\n  }\n  [data-wb-dynamic=\"if\"]::before {\n    content: \"\";\n    position: absolute;\n    top: -10px;\n    left: 8px;\n    font-size: 10px;\n    color: #b91c1c;\n    background: #fff;\n    padding: 0 4px;\n    line-height: 1;\n  }\n  [data-wb-dynamic=\"seo-meta\"] {\n    display: none;\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u9762\u5305\u5C51\u5BFC\u822A \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .wb-cms-dynamic-breadcrumb {\n    display: block;\n    box-sizing: border-box;\n    color: var(--wb-breadcrumb-color, #202020);\n    font-size: var(--wb-breadcrumb-font-size, 12px);\n    font-weight: var(--wb-breadcrumb-font-weight, 400);\n    line-height: var(--wb-breadcrumb-line-height, 1.4);\n    letter-spacing: var(--wb-breadcrumb-letter-spacing, 0);\n  }\n  .wb-cms-dynamic-breadcrumb__list {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .wb-cms-dynamic-breadcrumb__item {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n  }\n  .wb-cms-dynamic-breadcrumb__link {\n    color: inherit;\n    text-decoration: none;\n    max-width: 28ch;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .wb-cms-dynamic-breadcrumb__link:hover {\n    color: var(--wb-breadcrumb-hover-color, #111111);\n  }\n  .wb-cms-dynamic-breadcrumb__separator {\n    color: var(--wb-breadcrumb-separator-color, #777777);\n    margin: 0 var(--wb-breadcrumb-separator-space, 14px);\n  }\n  .wb-cms-dynamic-breadcrumb__item:last-child .wb-cms-dynamic-breadcrumb__link {\n    color: var(--wb-breadcrumb-current-color, #202020);\n    pointer-events: none;\n  }\n  .wb-cms-dynamic-breadcrumb__item.is-current .wb-cms-dynamic-breadcrumb__link {\n    color: var(--wb-breadcrumb-current-color, #202020);\n    pointer-events: none;\n  }\n  .wb-cms-dynamic-breadcrumb__item:last-child .wb-cms-dynamic-breadcrumb__separator {\n    display: none;\n  }\n  .wb-cms-dynamic-breadcrumb__item.is-current .wb-cms-dynamic-breadcrumb__separator {\n    display: none;\n  }\n  @media (max-width: 640px) {\n    .wb-cms-dynamic-breadcrumb {\n      font-size: var(--wb-breadcrumb-mobile-font-size, 12px);\n    }\n    .wb-cms-dynamic-breadcrumb__separator {\n      margin: 0 var(--wb-breadcrumb-mobile-separator-space, 8px);\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u52A8\u6001 HTML\uFF1A\u4FDD\u7559\u540E\u53F0\u5BCC\u6587\u672C\u539F\u751F\u6837\u5F0F \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   * \u5BCC\u6587\u672C\u91CC\u7684 h1\u2013h6 / p / ul / ol / blockquote \u7B49\u5143\u7D20\u9ED8\u8BA4\u4F1A\u88AB\u5916\u5C42\u6A21\u677F\n   * \uFF08\u5982 .wb-cms-detail-content h2 {...} / \u5168\u5C40 reset\uFF09\u8986\u76D6\uFF0C\u5BFC\u81F4\u5B57\u53F7\u3001\n   * \u7C97\u7EC6\u3001\u5217\u8868\u7F29\u8FDB\u3001\u6BB5\u843D margin \u7B49\u4E22\u5931\u3002\u8FD9\u91CC\u628A\u8FD9\u4E9B\u6807\u7B7E `all: revert`\n   * \u5230\u6D4F\u89C8\u5668 UA \u9ED8\u8BA4\u503C\uFF0C\u7B49\u6548\u4E8E\"\u4EC0\u4E48\u90FD\u4E0D\u52A0\u6837\u5F0F\"\uFF0C\u4ECE\u800C\u5C55\u793A\u540E\u53F0\u5BCC\u6587\u672C\n   * \u81EA\u5DF1\u5E26\u7684 inline style / \u539F\u751F\u89C2\u611F\uFF1B\u7528\u6237\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF08\u66F4\u9AD8\u6743\u91CD\u6216\n   * inline style\uFF09\u4ECD\u53EF\u8986\u76D6\u3002\n   */\n  [data-wb-dynamic=\"html\"] {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n  }\n  [data-wb-dynamic=\"html\"] h1,\n  [data-wb-dynamic=\"html\"] h2,\n  [data-wb-dynamic=\"html\"] h3,\n  [data-wb-dynamic=\"html\"] h4,\n  [data-wb-dynamic=\"html\"] h5,\n  [data-wb-dynamic=\"html\"] h6,\n  [data-wb-dynamic=\"html\"] p,\n  [data-wb-dynamic=\"html\"] ul,\n  [data-wb-dynamic=\"html\"] ol,\n  [data-wb-dynamic=\"html\"] li,\n  [data-wb-dynamic=\"html\"] dl,\n  [data-wb-dynamic=\"html\"] dt,\n  [data-wb-dynamic=\"html\"] dd,\n  [data-wb-dynamic=\"html\"] blockquote,\n  [data-wb-dynamic=\"html\"] pre,\n  [data-wb-dynamic=\"html\"] code,\n  [data-wb-dynamic=\"html\"] hr,\n  [data-wb-dynamic=\"html\"] table,\n  [data-wb-dynamic=\"html\"] thead,\n  [data-wb-dynamic=\"html\"] tbody,\n  [data-wb-dynamic=\"html\"] tr,\n  [data-wb-dynamic=\"html\"] th,\n  [data-wb-dynamic=\"html\"] td,\n  [data-wb-dynamic=\"html\"] figure,\n  [data-wb-dynamic=\"html\"] figcaption,\n  [data-wb-dynamic=\"html\"] strong,\n  [data-wb-dynamic=\"html\"] b,\n  [data-wb-dynamic=\"html\"] em,\n  [data-wb-dynamic=\"html\"] i,\n  [data-wb-dynamic=\"html\"] small,\n  [data-wb-dynamic=\"html\"] sub,\n  [data-wb-dynamic=\"html\"] sup,\n  [data-wb-dynamic=\"html\"] mark,\n  [data-wb-dynamic=\"html\"] a {\n    all: revert;\n  }\n  /* \u5A92\u4F53\u5143\u7D20\u989D\u5916\u4FDD\u8BC1\u54CD\u5E94\u5F0F\uFF0C\u4E0D\u7834\u574F\u6392\u7248 */\n  [data-wb-dynamic=\"html\"] img,\n  [data-wb-dynamic=\"html\"] video,\n  [data-wb-dynamic=\"html\"] iframe {\n    max-width: 100%;\n    height: auto;\n  }\n  /* \u4EE3\u7801\u5757\u4FDD\u7559\u6362\u884C + \u6A2A\u5411\u6EDA\u52A8\uFF0C\u907F\u514D\u6491\u5F00\u5BB9\u5668 */\n  [data-wb-dynamic=\"html\"] pre {\n    white-space: pre-wrap;\n    overflow-x: auto;\n  }\n  /* \u8868\u683C\u5360\u6EE1\u5BB9\u5668\u5BBD\u5EA6\uFF0C\u4FDD\u6301\u5BCC\u6587\u672C\u5185\u8868\u683C\u53EF\u8BFB */\n  [data-wb-dynamic=\"html\"] table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u6587\u7AE0\u76EE\u5F55\uFF08TOC\uFF09 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .wb-cms-dynamic-toc {\n    display: block;\n    box-sizing: border-box;\n    color: #111827;\n  }\n  .wb-cms-dynamic-toc__list {\n    display: block;\n    margin: 0;\n    padding-left: 1.2em;\n    list-style: disc;\n  }\n  .wb-cms-dynamic-toc__item {\n    margin: 0;\n  }\n  .wb-cms-dynamic-toc__link {\n    color: inherit;\n    font-size: 14px;\n    line-height: 2em;\n    text-decoration: none;\n    transition: color 0.15s;\n    word-break: break-word;\n  }\n  .wb-cms-dynamic-toc__link:hover {\n    color: #3C53E8;\n  }\n  .wb-cms-dynamic-toc__item[aria-current=\"true\"] .wb-cms-dynamic-toc__link,\n  .wb-cms-dynamic-toc__item.is-active .wb-cms-dynamic-toc__link {\n    color: #3C53E8;\n    font-weight: 500;\n  }\n";
+export declare const DYNAMIC_FIELD_STYLE_KEY = "data-wb-dynamic";

package/dist/cms/registries/dynamic/cms/media/previewMediaTrait.d.ts

@@ -0,0 +1,7 @@
+interface InitPreviewMediaTraitOptions {
+    traitName?: string;
+    emptyLabel?: string;
+    categoryId?: string;
+}
+export declare function initPreviewMediaTrait(model: any, options?: InitPreviewMediaTraitOptions): Promise<void>;
+export {};

package/dist/cms/registries/dynamic/cms/menu/siteMenuAttrs.d.ts

@@ -0,0 +1,11 @@
+export declare const DEFAULT_SITE_MENU_CODE = "main-menu";
+export declare function resolveSiteMenuAttrs(model: any): {
+    class: string;
+    'data-menu-code': string;
+    'data-layout': string;
+    'data-submenu-trigger': string;
+    'data-menu-bind-key': string;
+    'data-cms-html': string;
+    'data-wb-i18n-skip': string;
+    translate: string;
+};

package/dist/cms/registries/dynamic/cms/menuTree/menuTreeAttrs.d.ts

@@ -0,0 +1,8 @@
+export declare const DEFAULT_MENU_TREE_CODE = "main-menu";
+export declare function resolveMenuTreeAttrs(model: any): {
+    class: string;
+    'data-menu-code': string;
+    'data-menu-data-key': string;
+    'data-wb-i18n-skip': string;
+    translate: string;
+};

package/dist/cms/registries/dynamic/cms/post/styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 卡片子元素的 class 样式。
+ * - 编辑器中：通过 GrapesJS model defaults.styles 注入（组件创建时自动添加到 CssComposer）
+ * - 发布时：由 cmsFactory / ssgRenderer 注入到输出 <head>
+ */
+export declare const POST_CARD_CSS = "\n  .wb-post-card { position: relative; overflow: hidden; }\n  .wb-post-card-img-wrap { overflow: hidden; aspect-ratio: 4 / 3; }\n  .wb-post-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }\n  .wb-post-card:hover .wb-post-card-img { transform: scale(1.1); }\n  .wb-post-card-body { transition: all 0.3s; padding-top: 16px; padding-bottom: 16px; }\n  .wb-post-card-date { font-size: 14px; margin-bottom: 12px; display: block; color: #264FAA; }\n  .wb-post-card-title { font-size: 20px; color: #041038; font-weight: 500; line-height: 1.18; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8px; }\n  .wb-post-card-excerpt { color: #193143; line-height: 1.6; height: 3.2em; font-weight: 300; margin-bottom: 16px; font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }\n  .wb-post-card-link { color: #041038; cursor: pointer; line-height: 1.5; text-decoration: none; font-size: 14px; }\n  .wb-post-card:hover .wb-post-card-date,\n  .wb-post-card:hover .wb-post-card-title,\n  .wb-post-card:hover .wb-post-card-excerpt,\n  .wb-post-card:hover .wb-post-card-link { color: #1B43ED; }\n  .wb-post-card-link::after { content:''; position:absolute; inset:0; }\n  @media (max-width: 1023px) {\n    .wb-post-card-body { padding-top: 14px; padding-bottom: 14px; }\n    .wb-post-card-title { font-size: 18px; }\n  }\n  @media (max-width: 767px) {\n    .wb-post-card-body { padding-top: 12px; padding-bottom: 12px; }\n    .wb-post-card-date { font-size: 13px; margin-bottom: 10px; }\n    .wb-post-card-title {\n      font-size: 16px;\n      white-space: normal;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    .wb-post-card-excerpt { font-size: 13px; margin-bottom: 12px; }\n  }\n";

package/dist/cms/registries/dynamic/cms/product/detail.styles.d.ts

@@ -0,0 +1 @@
+export declare const PRODUCT_DETAIL_STYLES = "\n  .wb-product-detail {\n    display:block;\n    width:100%;\n    background:#fff;\n  }\n\n  .wb-product-detail__header {\n    display:flex;\n    align-items:center;\n    gap:8px;\n    padding:6px 10px;\n    background:#fef3c7;\n    border-bottom:1px solid #fde68a;\n    border-radius:4px 4px 0 0;\n    font-size:11px;\n    color:#78350f;\n    pointer-events:none;\n    user-select:none;\n    font-weight:500;\n  }\n\n  .wb-product-detail__container { max-width:1200px; margin:0 auto; padding:0 40px; }\n  .wb-product-detail__breadcrumb { display:flex; align-items:center; gap:16px; padding:20px 0; font-size:13px; color:#888; }\n  .wb-product-detail__breadcrumb-back {\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    gap:6px;\n    flex:0 0 auto;\n    padding:0;\n    border:none;\n    background:none;\n    color:#333;\n    text-decoration:none;\n    font-size:12px;\n    line-height:1.3;\n    cursor:pointer;\n    border-right: 1px solid #979797;\n    padding-right: 12px;\n  }\n  .wb-product-detail__breadcrumb-back-icon {\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    width:1em;\n    height:1em;\n    flex:0 0 auto;\n    font-size:inherit;\n    line-height:1;\n  }\n  .wb-product-detail__breadcrumb-back-icon svg {\n    display:block;\n    width:1em;\n    height:1em;\n  }\n  .wb-product-detail__breadcrumb-back-label { white-space:nowrap; }\n  .wb-product-detail__breadcrumb-name {\n    min-width:0;\n    color:#000;\n    font-size: 12px;\n    line-height:1.3;\n  }\n\n  .wb-product-detail__hero {\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:48px;\n    padding:8px 0 48px;\n    align-items:start;\n    border-bottom: 1px solid #D8D8D8;\n  }\n\n  .wb-product-gallery { margin-bottom:0; }\n  .wb-product-gallery__stage {\n    position:relative;\n    overflow:hidden;\n    border-radius:8px;\n    background:#ECEFF3;\n    aspect-ratio:1/1;\n    margin-bottom:16px;\n    cursor:zoom-in;\n  }\n  .wb-product-gallery__stage.is-zooming { cursor:crosshair; }\n  .wb-product-gallery__main-img {\n    width:100%;\n    height:100%;\n    display:block;\n    object-fit:contain;\n    transition:transform .18s ease;\n    transform-origin:center center;\n    background:#fff;\n  }\n  .wb-product-gallery__thumbs-wrap {\n    display:grid;\n    grid-template-columns:36px 1fr 36px;\n    align-items:center;\n    gap:12px;\n  }\n  .wb-product-gallery__thumbs-viewport {\n    overflow-x:auto;\n    scrollbar-width:none;\n  }\n  .wb-product-gallery__thumbs-viewport::-webkit-scrollbar { display:none; }\n  .wb-product-gallery__thumbs {\n    display:flex;\n    gap:10px;\n    align-items:center;\n  }\n  .wb-product-gallery__thumb {\n    width:72px;\n    height:72px;\n    border:none;\n    background:#fff;\n    border-radius:8px;\n    cursor:pointer;\n    padding:6px;\n    flex:0 0 auto;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    box-shadow:0 0 0 1px #e5e5e5 inset;\n    transition:all .2s ease;\n  }\n  .wb-product-gallery__thumb:hover,\n  .wb-product-gallery__thumb.is-active {\n    box-shadow:0 0 0 1px #111 inset;\n  }\n  .wb-product-gallery__thumb-img {\n    width:100%;\n    height:100%;\n    display:block;\n    object-fit:contain;\n  }\n  .wb-product-gallery__nav {\n    width:36px;\n    height:36px;\n    border:none;\n    background:#fff;\n    border-radius:9999px;\n    cursor:pointer;\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    font-size:22px;\n    line-height:1;\n    color:#333;\n  }\n\n  .wb-product-detail__info { display:flex; flex-direction:column; }\n  .wb-product-detail__name {\n    font-size: 48px;\n    font-weight:600;\n    color:#111;\n    line-height:1.25;\n    margin:0 0 16px;\n    letter-spacing:-0.01em;\n  }\n  .wb-product-detail__desc {\n    font-size:16px;\n    margin:0 0 24px;\n    color: rgba(0,0,0,0.6);\n    line-height:1.5;\n  }\n\n  .wb-product-detail__accordion { border-top:1px solid #e8e8e8; }\n  .wb-product-detail__accordion-item { border-bottom:1px solid #e8e8e8; }\n  .wb-product-detail__accordion-summary {\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n    padding:14px 0;\n    font-size:16px;\n    font-weight:500;\n    color:#000;\n    cursor:pointer;\n    list-style:none;\n  }\n  .wb-product-detail__accordion-summary::-webkit-details-marker { display:none; }\n  .wb-product-detail__accordion-summary::marker { display:none; content:''; }\n  .wb-product-detail__accordion-icon {\n    font-size:18px;\n    color:#999;\n    font-weight:300;\n    transition:transform .2s;\n  }\n  .wb-product-detail__accordion-item[open] .wb-product-detail__accordion-icon {\n    transform:rotate(45deg);\n  }\n  .wb-product-detail__accordion-body {\n    padding:0 0 16px;\n    font-size:16px;\n    color: rgba(0,0,0,0.8);\n    line-height:1.5;\n    white-space: pre-wrap;\n  }\n  .wb-product-detail__accordion-body ul { margin:0; padding:0 0 0 18px; list-style:disc; }\n  .wb-product-detail__accordion-body li { margin-bottom:4px; text-transform:capitalize; }\n\n  .wb-product-detail__download {\n    display:inline-flex;\n    align-items:center;\n    gap:10px;\n    padding:10px 16px;\n    margin:0;\n    background:#f5f7fa;\n    border-radius:8px;\n    font-size:13px;\n    color:#333;\n  }\n  .wb-product-detail__download-icon { color:#2563eb; font-size:14px; }\n\n  .wb-product-detail__cta {\n    display:block;\n    width:100%;\n    padding:12px;\n    margin-top:32px;\n    background:#0057CE;\n    color:#fff;\n    border:none;\n    font-weight:500;\n    cursor:pointer;\n    text-align:center;\n    transition:background .2s;\n  }\n  .wb-product-detail__cta:hover { background:#1d4ed8; }\n\n  .wb-product-detail__sections { display:flex; flex-direction:column; }\n  .wb-product-detail__section { padding:48px 0; }\n  .wb-product-detail__section-header {\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:48px;\n    margin-bottom:32px;\n    align-items:start;\n  }\n  .wb-product-detail__section-title {\n    font-size:36px;\n    font-weight:700;\n    color:#111;\n    line-height:1.15;\n    margin:0;\n    letter-spacing:-0.01em;\n  }\n  .wb-product-detail__section-desc {\n    font-size:14px;\n    color:#666;\n    line-height:1.75;\n    margin:0;\n    padding-top:8px;\n  }\n  .wb-product-detail__section-content { font-size:14px; line-height:1.75; color:#444; }\n  .wb-product-detail__section-img { width:100%; border-radius:8px; display:block; }\n\n  .wb-product-detail__table { width:100%; border-collapse:collapse; font-size:13px; }\n  .wb-product-detail__table th {\n    background:#9e9e9e;\n    color:#fff;\n    padding:10px 16px;\n    font-weight:500;\n    text-align:center;\n  }\n  .wb-product-detail__table td {\n    padding:10px 16px;\n    border-bottom:1px solid #e8e8e8;\n    text-align:center;\n    color:#333;\n  }\n\n  .wb-product-detail__nav {\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n    padding:28px 0;\n    border-top:1px solid #e8e8e8;\n    margin-top:16px;\n  }\n  .wb-product-detail__nav-item {\n    display:flex;\n    align-items:center;\n    gap:6px;\n    color:#333;\n    font-size:14px;\n    text-decoration:none;\n  }\n  .wb-product-detail__nav-arrow { font-size:16px; color:#666; }\n\n  .pm-doc-block__link {\n    color:#000;\n    text-decoration:none;\n    display:flex;\n    font-size:14px;\n    line-height:20px;\n    align-items:center;\n    border:1px #e9ebf0 solid;\n    padding:12px 16px;\n    gap:8px;\n    width:max-content;\n  }\n  .pm-gallery-block{\n    padding: 80px 0;\n  }\n  .pm-gallery-block__wrap {\n    display:grid;\n    grid-template-columns:repeat(2, 1fr);\n  }\n  .pm-gallery-block__title {\n    font-size:48px;\n    line-height:1.15;\n    font-weight:600;\n    color:#000;\n    margin:0;\n    max-width: 380px;\n  }\n  .pm-gallery-block__desc { margin:0; color:rgba(0,0,0,0.6); line-height:1.5; }\n  .pm-gallery-block__carousel {\n    position:relative;\n    margin-top:56px;\n    overflow:hidden;\n    width:100%;\n    grid-column:1 / -1;\n    aspect-ratio:2 / 1;\n    --swiper-theme-color:#6d28d9;\n    --swiper-navigation-size:18px;\n  }\n  .pm-gallery-block__slide { display:flex; align-items:stretch; height:auto; }\n  .pm-gallery-block__image {\n    width:100%;\n    display:block;\n    aspect-ratio:4 / 3;\n    object-fit:cover;\n    border-radius:12px;\n    background:#f3e8ff;\n  }\n  .pm-gallery-block__pagination { position:relative; margin-top:14px; }\n  .pm-gallery-block__pagination .swiper-pagination-bullet {\n    width:8px;\n    height:8px;\n    background:rgba(109,40,217,.28);\n    opacity:1;\n  }\n  .pm-gallery-block__pagination .swiper-pagination-bullet-active {\n    width:22px;\n    border-radius:999px;\n    background:#6d28d9;\n  }\n  .pm-gallery-block__nav {\n    width:38px;\n    height:38px;\n    border-radius:999px;\n    background:rgba(255,255,255,.96);\n    box-shadow:0 8px 22px rgba(91,82,115,.16);\n    color:#4c1d95;\n  }\n  .pm-gallery-block__nav::after { font-size:14px; font-weight:700; }\n  .pm-gallery-block__nav.swiper-button-disabled { opacity:.35; }\n\n  .pm-image-block__wrap {\n    display:grid;\n    grid-template-columns:repeat(2, 1fr);\n  }\n  .pm-image-block__title {\n    font-size:48px;\n    font-weight:600;\n    line-height:1.15;\n    color:#000;\n    margin:0;\n    max-width: 380px;\n  }\n  .pm-image-block__desc { margin:0; color:rgba(0,0,0,0.6); line-height:1.5; }\n  .pm-image-block__image {\n    grid-column:1 / -1;\n    margin-top:56px;\n    width:100%;\n  }\n\n  .pm-video-block {\n    padding:16px 20px;\n    margin-bottom:12px;\n    background:#fef2f2;\n    border:1px dashed #fca5a5;\n    border-radius:8px;\n  }\n  .pm-video-block h3 {\n    font-size:48px;\n    font-weight:600;\n    line-height:1.15;\n    color:#000;\n    margin:0;\n  }\n\n  @media (max-width: 1023px) {\n    .wb-product-detail__container { padding:0 20px; }\n    .wb-product-detail__breadcrumb { flex-wrap:wrap; padding:16px 0; }\n    .wb-product-detail__hero { grid-template-columns:1fr; gap:24px; }\n    .wb-product-detail__name { font-size:28px; }\n    .wb-product-detail__desc { margin-bottom:20px; }\n    .wb-product-gallery__stage { margin-bottom:12px; }\n    .wb-product-gallery__thumbs-wrap { grid-template-columns:32px 1fr 32px; gap:10px; }\n    .wb-product-gallery__thumb { width:64px; height:64px; }\n    .wb-product-gallery__nav { width:32px; height:32px; font-size:18px; }\n    .wb-product-detail__section { padding:36px 0; }\n    .wb-product-detail__section-header { grid-template-columns:1fr; gap:12px; }\n    .wb-product-detail__section-title { font-size:28px; }\n    .pm-gallery-block__wrap,\n    .pm-image-block__wrap { grid-template-columns:1fr; gap:16px; }\n    .pm-gallery-block__title,\n    .pm-image-block__title,\n    .pm-video-block h3 { font-size:36px; }\n    .pm-gallery-block__carousel,\n    .pm-image-block__image { margin-top:32px; }\n  }\n\n  @media (max-width: 767px) {\n    .wb-product-detail__container { padding:0; }\n    .wb-product-detail__breadcrumb { font-size:12px; gap: 12px; }\n    .wb-product-detail__name { font-size:24px; }\n    .wb-product-detail__desc { font-size:13px; }\n    .wb-product-gallery__thumb { width:56px; height:56px; }\n    .wb-product-detail__accordion-summary { padding:12px 0; font-size:13px; }\n    .wb-product-detail__cta { font-size:14px; padding:13px; }\n    .wb-product-detail__section { padding:28px 0; }\n    .wb-product-detail__section-title { font-size:24px; }\n    .wb-product-detail__section-desc,\n    .wb-product-detail__section-content { font-size:13px; }\n    .wb-product-detail__table { display:block; overflow-x:auto; white-space:nowrap; }\n    .pm-gallery-block { padding: 50px 0; }\n    .pm-video-block { padding:14px 16px; }\n    .pm-gallery-block__title,\n    .pm-image-block__title,\n    .pm-video-block h3 { font-size:28px; }\n    .pm-gallery-block__carousel,\n    .pm-image-block__image { margin-top:24px; }\n    .pm-gallery-block__nav { width:32px; height:32px; }\n    .wb-product-detail__accordion-body{font-size: 13px;}\n    .pm-image-block__desc,\n    .pm-gallery-block__desc{font-size: 13px;}\n  }\n";

package/dist/cms/registries/dynamic/cms/product/detailV2.styles.d.ts

@@ -0,0 +1 @@
+export declare const PRODUCT_DETAIL_V2_STYLES = "\n  .wb-product-detail-v2 {\n    display:block;\n    width:100%;\n    background:#fff;\n    color:#1e3f5a;\n    font-family:\"Poppins\",\"Nunito Sans\",\"PingFang SC\",\"Helvetica Neue\",Arial,sans-serif;\n  }\n\n  .wb-product-detail-v2__header {\n    display:flex;\n    align-items:center;\n    gap:8px;\n    padding:6px 10px;\n    background:#fef3c7;\n    border-bottom:1px solid #fde68a;\n    border-radius:4px 4px 0 0;\n    font-size:11px;\n    color:#78350f;\n    pointer-events:none;\n    user-select:none;\n    font-weight:500;\n  }\n\n  .wb-product-detail-v2__container {\n    max-width:1160px;\n    margin:0 auto;\n    padding: 72px 20px 0;\n  }\n\n  .wb-product-detail-v2__breadcrumb {\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:16px 0 18px;\n    font-size:11px;\n    line-height:1.4;\n    color:#6f8090;\n  }\n\n  .wb-product-detail-v2__breadcrumb-back {\n    display:inline-flex;\n    align-items:center;\n    gap:5px;\n    padding:0;\n    border:none;\n    background:none;\n    color:#415c72;\n    cursor:pointer;\n    font-size:11px;\n    line-height:1.4;\n  }\n\n  .wb-product-detail-v2__breadcrumb-name {\n    min-width:0;\n    color:#6f8090;\n  }\n\n  .wb-product-detail-v2__hero {\n    display:grid;\n    grid-template-columns:minmax(430px, 0.92fr) minmax(470px, 1fr);\n    gap:42px;\n    align-items:start;\n    padding-bottom: 80px;\n  }\n\n  @media (min-width: 768px){\n    .wb-product-gallery{\n      position: sticky;\n      top: 72px;\n     }\n  }\n  \n  .wb-product-gallery { margin-bottom:0; }\n  .wb-product-gallery__stage {\n    position:relative;\n    overflow:hidden;\n    background:#f4f5f7;\n    aspect-ratio:1/1;\n    margin-bottom:12px;\n    cursor:zoom-in;\n    border:1px solid #e4e8ee;\n  }\n  .wb-product-gallery__stage.is-zooming { cursor:crosshair; }\n  .wb-product-gallery__main-img {\n    width:100%;\n    height:100%;\n    display:block;\n    object-fit:cover;\n    background:#fff;\n    transition:transform .18s ease;\n    transform-origin:center center;\n  }\n  .wb-product-gallery__thumbs-wrap {\n    display:block;\n  }\n  .wb-product-gallery__thumbs-viewport {\n    overflow:visible;\n    scrollbar-width:none;\n  }\n  .wb-product-gallery__thumbs-viewport::-webkit-scrollbar { display:none; }\n  .wb-product-gallery__thumbs {\n    display:grid;\n    grid-template-columns:repeat(4, minmax(0, 1fr));\n    gap:10px;\n    align-items:stretch;\n  }\n  .wb-product-gallery__thumb {\n    width:100%;\n    height:auto;\n    aspect-ratio:1/1;\n    border:1px solid #d8dee6;\n    background:#fff;\n    cursor:pointer;\n    padding:0;\n    overflow:hidden;\n    transition:border-color .2s ease, box-shadow .2s ease;\n  }\n  .wb-product-gallery__thumb.is-active {\n    border-color:#7c90a4;\n    box-shadow:0 0 0 1px #7c90a4 inset;\n  }\n  .wb-product-gallery__thumb-img {\n    width:100%;\n    height:100%;\n    display:block;\n    object-fit:cover;\n  }\n  .wb-product-gallery__nav {\n    display:none;\n  }\n  .wb-product-gallery__nav svg {\n    width:16px;\n    height:16px;\n    display:block;\n  }\n\n  .wb-product-detail-v2__info {\n    display:flex;\n    flex-direction:column;\n    gap:8px;\n    padding-top:10px;\n  }\n\n  .wb-product-detail-v2__brand {\n    margin:0;\n    font-size:14px;\n    line-height:1.6;\n    color:#1E2C32;\n  }\n\n  .wb-product-detail-v2__name {\n    margin:0;\n    font-size:30px;\n    line-height:1.25;\n    font-weight:600;\n    color:#000A11;\n    max-width:600px;\n  }\n\n  .wb-product-detail-v2__docs {\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px;\n    margin-block: 24px;\n  }\n  .wb-product-detail-v2__docs:empty{\n    margin-block: 10px;\n  }\n\n  .wb-product-detail-v2__doc-link {\n    display:inline-flex;\n    align-items:center;\n    gap:7px;\n    color:#183b56;\n    font-size:14px;\n    line-height:1.7;\n    font-weight:500;\n    text-decoration:none;\n  }\n  .wb-product-detail-v2__doc-link svg {\n    width:14px;\n    height:14px;\n    display:block;\n  }\n\n  .wb-product-detail-v2__tabs {\n    display:grid;\n    grid-template-columns: repeat(4, 1fr);\n    scroll-behavior:smooth;\n  }\n\n  .wb-product-detail-v2__tab {\n    border:none;\n    background:#F0F0F0;\n    color:#000A11;\n    font-size:16px;\n    line-height:1.4;\n    font-weight:500;\n    cursor:pointer;\n    min-height: 48px;\n    position: relative;\n  }\n  .wb-product-detail-v2__tab::before{\n    content: '';\n    position: absolute;\n    inset: 0;\n    background:#9aa8b5;\n    opacity:0;\n    z-index:1;\n  }\n  .wb-product-detail-v2__tab-text{\n    position: relative;\n    z-index:2;\n  }\n   .wb-product-detail-v2__tab:not(:last-of-type)::after{\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 60%;\n    border-left: 1px solid #d8d8d8;\n    top: 50%;\n    transform: translateY(-50%) scaleX(0.5);\n    right: 0;\n   }\n\n  .wb-product-detail-v2__tab.is-active {\n    /* background:#9aa8b5; */\n    color:#fff;\n  }\n  .wb-product-detail-v2__tab.is-active::before{\n    opacity: 1;\n  }\n\n  .wb-product-detail-v2__panel {\n    display:none;\n    padding:16px;\n  }\n\n  .wb-product-detail-v2__panel.is-active {\n    display:block;\n  }\n\n  .wb-product-detail-v2__intro,\n  .wb-product-detail-v2__feature-desc,\n  .wb-product-detail-v2__faq-answer {\n    font-size:14px;\n    line-height:1.78;\n    color:#5f7284;\n  }\n  .wb-product-detail-v2__intro p,\n  .wb-product-detail-v2__feature-desc p,\n  .wb-product-detail-v2__faq-answer p,\n  .wb-product-detail-v2__spec-value p {\n    margin:0 0 8px;\n  }\n  .wb-product-detail-v2__intro p:last-child,\n  .wb-product-detail-v2__feature-desc p:last-child,\n  .wb-product-detail-v2__faq-answer p:last-child,\n  .wb-product-detail-v2__spec-value p:last-child {\n    margin-bottom:0;\n  }\n\n  .wb-product-detail-v2__feature-list,\n  .wb-product-detail-v2__spec-groups,\n  .wb-product-detail-v2__spec-list,\n  .wb-product-detail-v2__faq-list {\n    display:flex;\n    flex-direction:column;\n    gap:0;\n  }\n\n  .wb-product-detail-v2__spec-groups {\n    gap:28px;\n  }\n\n  .wb-product-detail-v2__spec-group {\n    min-width:0;\n  }\n\n  .wb-product-detail-v2__spec-group-title {\n    margin:0 0 10px;\n    font-size:18px;\n    line-height:1.35;\n    font-weight:600;\n    color:#000A11;\n  }\n\n  .wb-product-detail-v2__spec-row,\n  .wb-product-detail-v2__faq-item {\n    border-bottom:1px solid #d7dde3;\n    padding:16px 0;\n  }\n\n  .wb-product-detail-v2__spec-key {\n    font-size:14px;\n    font-weight:500;\n    color:#000A11;\n    text-transform:uppercase;\n    margin:0 0 6px;\n  }\n\n  .wb-product-detail-v2__spec-row {\n    display:grid;\n    grid-template-columns:minmax(145px, 0.7fr) minmax(0, 1.3fr);\n    gap:18px;\n    align-items:start;\n  }\n\n  .wb-product-detail-v2__spec-value {\n    font-size:14px;\n    line-height:1.78;\n    color:#5f7284;\n  }\n\n  .wb-product-detail-v2__feature-list {\n    margin:0;\n    padding-left:20px;\n    display:block;\n  }\n\n  .wb-product-detail-v2__feature-item {\n    color:#5f7284;\n    font-size:14px;\n    line-height:1.78;\n    margin:0 0 6px;\n    padding:0;\n  }\n\n  .wb-product-detail-v2__feature-item:last-child {\n    margin-bottom:0;\n  }\n\n  .wb-product-detail-v2__feature-text {\n    display:inline;\n  }\n\n  .wb-product-detail-v2__faq-item {\n    padding:0;\n  }\n\n  .wb-product-detail-v2__faq-summary {\n    list-style:none;\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    gap:16px;\n    cursor:pointer;\n    padding:16px 0;\n    color:#183b56;\n    font-weight:600;\n    font-size:14px;\n    line-height:1.5;\n  }\n\n  .wb-product-detail-v2__faq-summary::-webkit-details-marker { display:none; }\n  .wb-product-detail-v2__faq-summary::marker { display:none; content:''; }\n\n  .wb-product-detail-v2__faq-icon {\n    color:#90a0ae;\n    font-size:16px;\n    transition:transform .2s ease;\n  }\n\n  .wb-product-detail-v2__faq-item[open] .wb-product-detail-v2__faq-icon {\n    transform:rotate(180deg);\n  }\n\n  .wb-product-detail-v2__faq-answer {\n    padding:0 0 16px;\n  }\n\n  .wb-product-detail-v2__options {\n    display:flex;\n    flex-direction:column;\n    gap:32px;\n    padding-top:8px;\n  }\n\n  .wb-product-detail-v2__option-group {\n    padding-top:0;\n  }\n.wb-product-detail-v2__actions--tips{\n  font-size: 16px;\n  line-height: 1;\n  color: #344850;\n  margin-top: 16px;\n}\n  .wb-product-detail-v2__option-label {\n    margin:0 0 16px;\n    font-size:16px;\n    line-height:1;\n    color:#1B2149;\n    font-weight: 400;\n  }\n\n  .wb-product-detail-v2__option-values {\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px;\n  }\n\n  .wb-product-detail-v2__option-value {\n    display:inline-flex;\n    align-items:center;\n    justify-content:flex-start;\n    gap:8px;\n    min-height:48px;\n    padding: 4px;\n    border:1px solid #EDEDED;\n    background:#fff;\n    color:#44576a;\n    font-size:12px;\n    line-height:1.3;\n    border-radius: 2px;\n    box-sizing:border-box;\n    white-space:nowrap;\n    cursor:pointer;\n    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;\n    appearance:none;\n    outline:none;\n  }\n  .wb-product-detail-v2__option-value:hover{\n    border-color:#29375C;\n   }\n  .wb-product-detail-v2__option-value.is-active {\n    border-color:#29375C;\n  }\n  .wb-product-detail-v2__option-value.is-text-only {\n    justify-content:center;\n    padding-inline: 16px;\n  }\n\n  .wb-product-detail-v2__option-swatch {\n    width:40px;\n    height:40px;\n    display:inline-block;\n    flex:0 0 auto;\n  }\n\n  .wb-product-detail-v2__option-image {\n    width:40px;\n    height:40px;\n    object-fit:cover;\n    flex:0 0 auto;\n  }\n\n  .wb-product-detail-v2__option-text {\n    display:inline-block;\n    max-width:100%;\n  }\n\n  .wb-product-detail-v2__actions {\n    display:flex;\n    flex-wrap:wrap;\n    gap:10px;\n    margin-top: 64px;\n  }\n\n  .wb-product-detail-v2__action {\n    flex:1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width:112px;\n    min-height: 50px;\n    padding:10px 20px;\n    border:1px solid #183b56;\n    background:#fff;\n    color:#183b56;\n    text-decoration:none;\n    text-align:center;\n    font-weight:500;\n    font-size:16px;\n    line-height:1.2;\n    box-sizing:border-box;\n    cursor: pointer;\n  }\n\n  .wb-product-detail-v2__action--primary {\n    background:#ffd30a;\n    border-color:#ffd30a;\n    color:#183b56;\n  }\n\n  .wb-product-detail-v2__related {\n    width:100vw;\n    margin-left:calc(50% - 50vw);\n    margin-right:calc(50% - 50vw);\n    margin-top:0;\n    padding:100px 0;\n    background-color: #ECEEF0;\n    overflow:hidden;\n    box-sizing:border-box;\n  }\n  .wb-product-detail-v2__related,\n  .wb-product-detail-v2__related *,\n  .wb-product-detail-v2__related *::before,\n  .wb-product-detail-v2__related *::after {\n    box-sizing:border-box;\n  }\n  .wb-product-detail-v2__related a {\n    color:currentColor;\n    text-decoration:none;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__container {\n    width:100%;\n    max-width: 1160px;\n    margin:0 auto;\n    padding:0 20px;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__header {\n    display:flex;\n    align-items:flex-start;\n    gap:24px;\n    margin-bottom:48px;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__title {\n    margin:0;\n    color:#000a11;\n    font-size:48px;\n    font-weight:600;\n    line-height:1.15;\n    letter-spacing:0;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__nav {\n    margin-left:auto;\n    display:flex;\n    align-items:center;\n    gap:16px;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__nav-btn {\n    width:64px;\n    height:64px;\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    padding:0;\n    border:0;\n    border-radius:0;\n    color:#000a11;\n    background:transparent;\n    cursor:pointer;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__nav-icon {\n    width:48px;\n    height:48px;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__carousel-wrap {\n    margin:0 -20px;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__track {\n    display:grid;\n    grid-auto-flow:column;\n    grid-auto-columns:calc((100% - 48px) / 3);\n    gap:24px;\n    padding:0 20px;\n    overflow-x:auto;\n    scroll-snap-type:x mandatory;\n    scroll-behavior:smooth;\n    scroll-padding-inline:20px;\n    -webkit-overflow-scrolling:touch;\n    scrollbar-width:none;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__track::-webkit-scrollbar {\n    display:none;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__item {\n    position:relative;\n    display:flex;\n    min-width:0;\n    flex-direction:column;\n    gap:16px;\n    scroll-snap-align:center;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__item:first-child {\n    scroll-snap-align:start;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__item:last-child {\n    scroll-snap-align:end;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__media {\n    display:block;\n    width:100%;\n    aspect-ratio:42 / 46;\n    overflow:hidden;\n    background:#d5dbe1;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__img {\n    display:block;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    transition:transform 260ms ease;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__item:hover .wb-content-carousel__img {\n    transform:scale(1.04);\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__item-title {\n    margin:0;\n    color:#000a11;\n    font-size:20px;\n    font-weight:500;\n    line-height:1.4;\n    letter-spacing:0;\n    overflow-wrap:anywhere;\n  }\n  .wb-product-detail-v2__related .wb-content-carousel__link::after {\n    content:\"\";\n    position:absolute;\n    inset:0;\n  }\n\n  @media (max-width: 1024px) {\n    .wb-product-detail-v2__container {\n      padding:0 24px 56px;\n    }\n\n    .wb-product-detail-v2__hero {\n      grid-template-columns:1fr;\n      gap:32px;\n    }\n\n    .wb-product-detail-v2__name {\n      font-size:34px;\n    }\n\n  }\n\n  @media (max-width: 767px) {\n  .wb-product-detail-v2__breadcrumb{\n    display: none;\n  }\n  .wb-product-gallery{\n    width: 100vw;\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n  }\n    .wb-product-detail-v2__container {\n    \n    }\n    .wb-product-gallery__stage{\n      margin-bottom: \n    }\n\n    .wb-product-detail-v2__name {\n      font-size:20px;\n    }\n\n    .wb-product-gallery__thumb {\n      width:100%;\n      height:auto;\n    }\n\n    .wb-product-gallery__thumbs {\n      grid-template-columns:repeat(4, minmax(0, 1fr));\n      gap:8px;\n    }\n\n    .wb-product-detail-v2__tabs {\n      display:flex;\n      grid-template-columns:none;\n      overflow-x:auto;\n      overflow-y:hidden;\n      scroll-snap-type:x mandatory;\n      scroll-padding-inline:20px;\n      -webkit-overflow-scrolling:touch;\n      scrollbar-width:none;\n      margin-inline:-24px;\n      padding-inline:24px;\n      width:100vw;\n    }\n    .wb-product-detail-v2__tabs::-webkit-scrollbar { display:none; }\n\n    .wb-product-detail-v2__tab {\n      flex:0 0 auto;\n      min-width:150px;\n      padding:10px 16px;\n      scroll-snap-align:center;\n    }\n    .wb-product-detail-v2__tab-text{\n      font-size: 13px;\n    }\n    .wb-product-detail-v2__spec-row {\n      grid-template-columns:1fr;\n    }\n\n    .wb-product-detail-v2__actions {\n      flex-direction:column;\n    }\n\n    .wb-product-detail-v2__action {\n      width:100%;\n    }\n\n    .wb-product-detail-v2__related {\n      padding:40px 0;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__header {\n      margin-bottom:24px;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__title {\n      font-size:24px;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__nav {\n      gap:8px;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__nav-btn {\n      width:32px;\n      height:32px;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__nav-icon {\n      width:24px;\n      height:24px;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__track {\n      grid-auto-columns:calc((100% - 12px) / 1.5);\n      gap:12px;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__item {\n      gap:8px;\n    }\n    .wb-product-detail-v2__related .wb-content-carousel__item-title {\n      font-size:13px;\n    }\n  }\n";