@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/grid/Col.svelte.d.ts

@@ -1,22 +1,19 @@
 import type { Snippet } from 'svelte';
 type ColConfig = {
     span?: number;
-    offset?: number;
     order?: number;
+    offset?: number;
     push?: number;
     pull?: number;
-    flex?: string | number;
 };
 type ColResponsive = number | ColConfig;
 interface Props {
-    /** 0-24; 0 hides the column */
+    /** 0-24；0 隐藏该列 */
     span?: number;
     offset?: number;
     order?: number;
     push?: number;
     pull?: number;
-    /** when set, takes precedence over `span` (the column uses raw flex) */
-    flex?: string | number;
     xs?: ColResponsive;
     sm?: ColResponsive;
     md?: ColResponsive;
@@ -24,6 +21,7 @@ interface Props {
     xl?: ColResponsive;
     xxl?: ColResponsive;
     class?: string;
+    style?: string;
     children?: Snippet;
 }
 declare const Col: import("svelte").Component<Props, {}, "">;

package/dist/grid/Col.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Col.svelte.d.ts","sourceRoot":"","sources":["../../src/grid/Col.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF,KAAK,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;AAExC,UAAU,KAAK;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwGH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Col.svelte.d.ts","sourceRoot":"","sources":["../../src/grid/Col.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACF,KAAK,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;AAExC,UAAU,KAAK;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwFH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/grid/Row.svelte

@@ -1,103 +1,135 @@
 <!--
-  Row — 24-column flex grid container. Pairs with Col.
-  Token-driven gutter via negative-margin technique. No hardcoded colors.
-  响应式 gutter：支持按断点对象 { xs, sm, md, lg, xl, xxl }，每档值可为
-  number 或 [x, y]，按当前视口断点降级解析（mobile-first）。
+  Row — 24 栅格容器，配对 Col。严格对齐 Semi grid/row（float 机制 + type prop）：
+  - type='flex' → cd-row-flex（display:flex）+ justify/align 类；缺省 → cd-row（display:block + float 清除浮动）。
+  - gutter 用 screens 状态机做响应式（registerMediaQuery 订阅 6 档 media query，
+    getGutter 用 responsiveArray 从大到小降级取第一个命中且有值的断点）。
+  - gutter 走 Semi 真实四向负 margin：水平 marginLeft/Right、垂直 marginTop/Bottom，
+    Col 经 context 读 gutters 施加对应四向 padding 抵消。
 -->
 <script lang="ts" module>
   export const ROW_CONTEXT_KEY = Symbol('cd-row');
 
   export interface RowContext {
-    getGutterX: () => number;
+    /** [水平, 垂直] 实际 gutter（px），Col 据此施加四向 padding。 */
+    getGutters: () => [number, number];
   }
 </script>
 
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { setContext } from 'svelte';
-  import { resolveResponsiveValue, type Breakpoint } from '@chenzy-design/core';
-  import { useBreakpoint } from './use-breakpoint.svelte.js';
-
-  type RowAlign = 'top' | 'middle' | 'bottom' | 'baseline' | 'stretch';
-  type RowJustify = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-  type GutterValue = number | [number, number];
-  type ResponsiveGutter = Partial<Record<Breakpoint, GutterValue>>;
+  import {
+    registerMediaQuery,
+    defaultResponsiveMap,
+    type Breakpoint,
+    type BreakpointScreens,
+  } from '@chenzy-design/core';
+
+  type RowAlign = 'top' | 'middle' | 'bottom';
+  type RowJustify = 'start' | 'end' | 'center' | 'space-between' | 'space-around';
+  // 对齐 Semi：单轴 gutter = number | 响应式对象；整体可为 [x轴, y轴]。
+  type Gutter = number | Partial<Record<Breakpoint, number>>;
 
   interface Props {
-    gutter?: GutterValue | ResponsiveGutter;
+    /** 布局模式；'flex' 时启用 flex 布局并激活 justify/align。 */
+    type?: 'flex';
     align?: RowAlign;
     justify?: RowJustify;
-    wrap?: boolean;
+    gutter?: Gutter | [Gutter, Gutter];
     class?: string;
+    style?: string;
     children?: Snippet;
   }
 
   let {
-    gutter = 0,
-    align = 'top',
+    type,
+    align,
     justify = 'start',
-    wrap = true,
+    gutter = 0,
     class: className = '',
+    style = '',
     children,
   }: Props = $props();
 
-  const bp = useBreakpoint();
-
-  function toPair(v: GutterValue): [number, number] {
-    return Array.isArray(v) ? [v[0], v[1]] : [v, 0];
-  }
-
-  const gutters = $derived.by<[number, number]>(() => {
-    if (typeof gutter === 'number' || Array.isArray(gutter)) return toPair(gutter);
-    // responsive object: resolve by current breakpoint (mobile-first cascade).
-    const resolved = resolveResponsiveValue<GutterValue>(gutter, bp.current, 0);
-    return toPair(resolved);
+  // 从大到小的降级查找顺序，对齐 Semi responsiveArray。
+  const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+
+  // 各断点当前命中情况。仅当 gutter 为响应式对象时才需要订阅并更新。
+  // 初值全 true，对齐 Semi Row 的 state.screens 初值（未测量前视作全命中）。
+  let screens = $state<BreakpointScreens>({
+    xs: true,
+    sm: true,
+    md: true,
+    lg: true,
+    xl: true,
+    xxl: true,
   });
 
-  const gutterX = $derived(gutters[0]);
-  const gutterY = $derived(gutters[1]);
-
-  // Col reads this to apply matching horizontal padding.
-  setContext<RowContext>(ROW_CONTEXT_KEY, { getGutterX: () => gutterX });
-
-  const alignItems = $derived.by(() => {
-    switch (align) {
-      case 'middle':
-        return 'center';
-      case 'bottom':
-        return 'flex-end';
-      case 'baseline':
-        return 'baseline';
-      case 'stretch':
-        return 'stretch';
-      default:
-        return 'flex-start';
-    }
+  // 对齐 Semi：gutter 为对象（含数组或响应式对象）时才订阅 media query 更新 screens。
+  const isObjectGutter = $derived(typeof gutter === 'object');
+
+  $effect(() => {
+    if (!isObjectGutter) return;
+    const unregisters = (Object.keys(defaultResponsiveMap) as Breakpoint[]).map((screen) =>
+      registerMediaQuery(defaultResponsiveMap[screen], {
+        match: () => {
+          screens = { ...screens, [screen]: true };
+        },
+        unmatch: () => {
+          screens = { ...screens, [screen]: false };
+        },
+      }),
+    );
+    return () => unregisters.forEach((unregister) => unregister());
   });
 
-  const justifyContent = $derived.by(() => {
-    switch (justify) {
-      case 'start':
-        return 'flex-start';
-      case 'end':
-        return 'flex-end';
-      case 'center':
-        return 'center';
-      default:
-        return justify;
-    }
+  // 对齐 Semi getGutter：整体归一为 [x轴, y轴]，每轴若为响应式对象则用 responsiveArray
+  // 从大到小找第一个 screens[bp] 命中且该轴在此断点有值的 gutter；否则取数值本身。
+  const gutters = $derived.by<[number, number]>(() => {
+    const results: [number, number] = [0, 0];
+    const normalized: [Gutter, Gutter] = Array.isArray(gutter) ? [gutter[0], gutter[1]] : [gutter, 0];
+    normalized.forEach((g, index) => {
+      if (typeof g === 'object') {
+        for (let i = 0; i < responsiveArray.length; i += 1) {
+          const bp = responsiveArray[i]!;
+          if (screens[bp] && g[bp] !== undefined) {
+            results[index] = g[bp] as number;
+            break;
+          }
+        }
+      } else {
+        results[index] = g || 0;
+      }
+    });
+    return results;
   });
 
-  const cls = $derived(['cd-row', className].filter(Boolean).join(' '));
+  // Col 读此值施加匹配的四向 padding（对齐 Semi RowContext.gutters）。
+  setContext<RowContext>(ROW_CONTEXT_KEY, { getGutters: () => gutters });
+
+  // class 三段式对齐 Semi row.tsx classnames：
+  //  type !== 'flex' → cd-row（基础）；type → cd-row-{type}；type && justify/align → cd-row-{type}-{justify}/-{align}。
+  const cls = $derived(
+    [
+      type !== 'flex' && 'cd-row',
+      type && `cd-row-${type}`,
+      type && justify && `cd-row-${type}-${justify}`,
+      type && align && `cd-row-${type}-${align}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
 
+  // gutter 内联样式对齐 Semi rowStyle：x轴负左右 margin、y轴负上下 margin；用户 style 追加在后可覆盖。
   const inlineStyle = $derived(
     [
-      `--cd-grid-gutter-x:${gutterX}px`,
-      `--cd-grid-gutter-y:${gutterY}px`,
-      `align-items:${alignItems}`,
-      `justify-content:${justifyContent}`,
-      `flex-wrap:${wrap ? 'wrap' : 'nowrap'}`,
-    ].join(';'),
+      gutters[0] > 0 && `margin-left:${gutters[0] / -2}px;margin-right:${gutters[0] / -2}px`,
+      gutters[1] > 0 && `margin-top:${gutters[1] / -2}px;margin-bottom:${gutters[1] / -2}px`,
+      style,
+    ]
+      .filter(Boolean)
+      .join(';'),
   );
 </script>
 
@@ -106,11 +138,61 @@
 </div>
 
 <style>
-  .cd-row {
+  /* 严格镜像 Semi grid.scss。动态类名靠 :global 落地（Svelte 不静态收集拼接类名）。 */
+
+  /* .cd-row：display:block + make-row（position:relative;height:auto;margin:0）+ clearfix。 */
+  :global(.cd-row) {
+    display: block;
+    box-sizing: border-box;
+    position: relative;
+    height: auto;
+    margin-right: 0;
+    margin-left: 0;
+  }
+  :global(.cd-row)::before,
+  :global(.cd-row)::after {
+    display: table;
+    content: '';
+  }
+  :global(.cd-row)::after {
+    clear: both;
+  }
+
+  /* .cd-row-flex：display:flex + flex-flow:row wrap；伪元素改 display:flex。 */
+  :global(.cd-row-flex) {
     display: flex;
     flex-flow: row wrap;
-    min-width: 0;
-    margin-inline: calc(var(--cd-grid-gutter-x) / -2);
-    row-gap: var(--cd-grid-gutter-y);
+  }
+  :global(.cd-row-flex)::before,
+  :global(.cd-row-flex)::after {
+    display: flex;
+  }
+
+  /* justify（x 轴）对齐 Semi。 */
+  :global(.cd-row-flex-start) {
+    justify-content: flex-start;
+  }
+  :global(.cd-row-flex-center) {
+    justify-content: center;
+  }
+  :global(.cd-row-flex-end) {
+    justify-content: flex-end;
+  }
+  :global(.cd-row-flex-space-between) {
+    justify-content: space-between;
+  }
+  :global(.cd-row-flex-space-around) {
+    justify-content: space-around;
+  }
+
+  /* align（y 轴）对齐 Semi。 */
+  :global(.cd-row-flex-top) {
+    align-items: flex-start;
+  }
+  :global(.cd-row-flex-middle) {
+    align-items: center;
+  }
+  :global(.cd-row-flex-bottom) {
+    align-items: flex-end;
   }
 </style>

package/dist/grid/Row.svelte.d.ts

@@ -1,19 +1,21 @@
 export declare const ROW_CONTEXT_KEY: unique symbol;
 export interface RowContext {
-    getGutterX: () => number;
+    /** [水平, 垂直] 实际 gutter（px），Col 据此施加四向 padding。 */
+    getGutters: () => [number, number];
 }
 import type { Snippet } from 'svelte';
 import { type Breakpoint } from '@chenzy-design/core';
-type RowAlign = 'top' | 'middle' | 'bottom' | 'baseline' | 'stretch';
-type RowJustify = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-type GutterValue = number | [number, number];
-type ResponsiveGutter = Partial<Record<Breakpoint, GutterValue>>;
+type RowAlign = 'top' | 'middle' | 'bottom';
+type RowJustify = 'start' | 'end' | 'center' | 'space-between' | 'space-around';
+type Gutter = number | Partial<Record<Breakpoint, number>>;
 interface Props {
-    gutter?: GutterValue | ResponsiveGutter;
+    /** 布局模式；'flex' 时启用 flex 布局并激活 justify/align。 */
+    type?: 'flex';
     align?: RowAlign;
     justify?: RowJustify;
-    wrap?: boolean;
+    gutter?: Gutter | [Gutter, Gutter];
     class?: string;
+    style?: string;
     children?: Snippet;
 }
 declare const Row: import("svelte").Component<Props, {}, "">;

package/dist/grid/Row.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../../src/grid/Row.svelte.ts"],"names":[],"mappings":"AAGE,eAAO,MAAM,eAAe,eAAmB,CAAC;AAEhD,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,MAAM,CAAC;CAC1B;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAA0B,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAI5E,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AACrE,KAAK,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;AACjG,KAAK,WAAW,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC7C,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;AAEjE,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4FH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../../src/grid/Row.svelte.ts"],"names":[],"mappings":"AAGE,eAAO,MAAM,eAAe,eAAmB,CAAC;AAEhD,MAAM,WAAW,UAAU;IACzB,iDAAiD;IACjD,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAGH,KAAK,UAAU,EAEhB,MAAM,qBAAqB,CAAC;AAG7B,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC5C,KAAK,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,CAAC;AAEhF,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3D,UAAU,KAAK;IACb,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiHH,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/grid/meta.d.ts

@@ -1,89 +1,95 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
  * Aggregated metadata for the Grid family (Row + Col).
- * 24-column flex grid with responsive breakpoint props (xs/sm/md/lg/xl/xxl).
+ * 24-column float grid with responsive breakpoint props (xs/sm/md/lg/xl/xxl).
  */
 export declare const meta: {
     readonly name: "Grid";
     readonly category: "basic";
-    readonly description: "24 栅格布局：Row 容器 + Col 列，flex 实现，gutter 经 context 下发到 Col；支持 xs/sm/md/lg/xl/xxl 响应式断点（mobile-first 降级解析）。";
+    readonly description: "24 栅格布局：Row 容器 + Col 列，严格对齐 Semi。默认 Row=cd-row（display:block + clearfix），Col 用 float:left + width% 布局；Row type=\"flex\" 时切 flex 布局并激活 justify/align（cd-row-flex-{justify}/-{align}）。gutter 经 context 下发到 Col：Row 施加四向负 margin、Col 施加四向 padding 抵消，支持 [x,y] 与响应式对象（screens 状态机 + responsiveArray 从大到小降级）。Col 响应式为纯 CSS 类驱动（cd-col-{bp}-{span} 等，靠 @media 断点层叠）。";
     readonly exports: readonly ["Row", "Col"];
     readonly props: readonly [{
+        readonly owner: "Row";
+        readonly name: "type";
+        readonly type: "'flex'";
+        readonly default: "undefined";
+        readonly desc: "设为 'flex' 时用 flex 布局（cd-row-flex）并激活 justify/align；缺省为 cd-row（block + float 清除）";
+    }, {
         readonly owner: "Row";
         readonly name: "gutter";
-        readonly type: "number|[number,number]|Partial<Record<Breakpoint,number|[number,number]>>";
+        readonly type: "number|[number,number]|Partial<Record<Breakpoint,number>>";
         readonly default: "0";
-        readonly desc: "number→水平间距；[x,y]→水平+垂直；按断点对象 { xs,sm,md,... } 时按当前视口 mobile-first 降级解析";
+        readonly desc: "number→水平间距；[x,y]→水平+垂直；按断点对象 { xs,sm,md,... } 时经 screens 状态机 + responsiveArray 从大到小降级取第一个命中且有值的断点（对齐 Semi getGutter）。Row 施加四向负 margin，Col 四向 padding 抵消";
     }, {
         readonly owner: "Row";
         readonly name: "align";
-        readonly type: "'top'|'middle'|'bottom'|'baseline'|'stretch'";
-        readonly default: "'top'";
-        readonly desc: "映射 align-items";
+        readonly type: "'top'|'middle'|'bottom'";
+        readonly default: "undefined";
+        readonly desc: "type=\"flex\" 下生效：映射 align-items（cd-row-flex-top/middle/bottom）";
     }, {
         readonly owner: "Row";
         readonly name: "justify";
-        readonly type: "'start'|'end'|'center'|'space-between'|'space-around'|'space-evenly'";
+        readonly type: "'start'|'end'|'center'|'space-between'|'space-around'";
         readonly default: "'start'";
-        readonly desc: "映射 justify-content";
+        readonly desc: "type=\"flex\" 下生效：映射 justify-content（cd-row-flex-start/center/end/space-between/space-around）";
     }, {
         readonly owner: "Row";
-        readonly name: "wrap";
-        readonly type: "boolean";
-        readonly default: "true";
-        readonly desc: "false→flex-wrap:nowrap";
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "''";
     }, {
         readonly owner: "Row";
-        readonly name: "class";
+        readonly name: "style";
         readonly type: "string";
         readonly default: "''";
+        readonly desc: "内联样式，追加在 gutter margin 之后（可覆盖）";
     }, {
         readonly owner: "Col";
         readonly name: "span";
         readonly type: "number";
         readonly default: "undefined";
-        readonly desc: "0-24，0 隐藏，未设为自动列";
+        readonly desc: "0-24，生成 cd-col-{span} 类（float:left + width%）；0 → cd-col-0 隐藏，未设为自动列";
     }, {
         readonly owner: "Col";
         readonly name: "offset";
         readonly type: "number";
         readonly default: "0";
-        readonly desc: "margin-inline-start 偏移列数";
+        readonly desc: "cd-col-offset-{n} → margin-left 偏移列数";
     }, {
         readonly owner: "Col";
         readonly name: "order";
         readonly type: "number";
         readonly default: "0";
-        readonly desc: "flex order";
+        readonly desc: "cd-col-order-{n} → order（type=\"flex\" 下生效）";
     }, {
         readonly owner: "Col";
         readonly name: "push";
         readonly type: "number";
         readonly default: "0";
-        readonly desc: "inset-inline-start 相对偏移";
+        readonly desc: "cd-col-push-{n} → left 相对偏移";
     }, {
         readonly owner: "Col";
         readonly name: "pull";
         readonly type: "number";
         readonly default: "0";
-        readonly desc: "inset-inline-end 相对偏移";
-    }, {
-        readonly owner: "Col";
-        readonly name: "flex";
-        readonly type: "string|number";
-        readonly default: "undefined";
-        readonly desc: "设置后优先于 span，直接控制 flex";
+        readonly desc: "cd-col-pull-{n} → right 相对偏移";
     }, {
         readonly owner: "Col";
         readonly name: "xs|sm|md|lg|xl|xxl";
-        readonly type: "number | { span?, offset?, order?, push?, pull?, flex? }";
+        readonly type: "number | { span?, offset?, order?, push?, pull? }";
         readonly default: "undefined";
-        readonly desc: "响应式断点覆盖：值为 number(span) 或子集对象，按当前视口 mobile-first 降级解析后覆盖基础 props";
+        readonly desc: "响应式断点覆盖：值为 number(span) 或子集对象，生成 cd-col-{bp}-{span} 等 CSS 类，靠 @media (min-width) 断点层叠（纯 CSS 驱动，不读 JS 断点）";
     }, {
         readonly owner: "Col";
         readonly name: "class";
         readonly type: "string";
         readonly default: "''";
+    }, {
+        readonly owner: "Col";
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "''";
+        readonly desc: "内联样式，追加在 gutter padding 之后（可覆盖）";
     }];
     readonly events: readonly [];
     readonly slots: readonly [{
@@ -95,11 +101,14 @@ export declare const meta: {
         readonly focusable: false;
         readonly note: "纯布局容器，不引入语义角色";
     };
-    readonly tokens: readonly ["--cd-grid-columns", "--cd-grid-gutter-x", "--cd-grid-gutter-y"];
+    readonly tokens: readonly [];
     readonly responsive: true;
     readonly examples: readonly [{
         readonly title: "基础两栏";
         readonly code: "<Row gutter={16}><Col span={12}>左</Col><Col span={12}>右</Col></Row>";
+    }, {
+        readonly title: "Flex 水平排列";
+        readonly code: "<Row type=\"flex\" justify=\"center\"><Col span={4}>col</Col><Col span={4}>col</Col></Row>";
     }, {
         readonly title: "响应式断点";
         readonly code: "<Row gutter={{ xs: 8, md: 24 }}><Col xs={24} md={12}>左</Col><Col xs={24} md={12}>右</Col></Row>";

package/dist/grid/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/grid/meta.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/grid/meta.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEP,CAAC"}

package/dist/grid/meta.js

@@ -1,69 +1,75 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
  * Aggregated metadata for the Grid family (Row + Col).
- * 24-column flex grid with responsive breakpoint props (xs/sm/md/lg/xl/xxl).
+ * 24-column float grid with responsive breakpoint props (xs/sm/md/lg/xl/xxl).
  */
 export const meta = {
     name: 'Grid',
     category: 'basic',
-    description: '24 栅格布局：Row 容器 + Col 列，flex 实现，gutter 经 context 下发到 Col；支持 xs/sm/md/lg/xl/xxl 响应式断点（mobile-first 降级解析）。',
+    description: '24 栅格布局：Row 容器 + Col 列，严格对齐 Semi。默认 Row=cd-row（display:block + clearfix），Col 用 float:left + width% 布局；Row type="flex" 时切 flex 布局并激活 justify/align（cd-row-flex-{justify}/-{align}）。gutter 经 context 下发到 Col：Row 施加四向负 margin、Col 施加四向 padding 抵消，支持 [x,y] 与响应式对象（screens 状态机 + responsiveArray 从大到小降级）。Col 响应式为纯 CSS 类驱动（cd-col-{bp}-{span} 等，靠 @media 断点层叠）。',
     exports: ['Row', 'Col'],
     // flat props (Row + Col merged); each item tagged with its owner.
     props: [
+        {
+            owner: 'Row',
+            name: 'type',
+            type: "'flex'",
+            default: 'undefined',
+            desc: "设为 'flex' 时用 flex 布局（cd-row-flex）并激活 justify/align；缺省为 cd-row（block + float 清除）",
+        },
         {
             owner: 'Row',
             name: 'gutter',
-            type: 'number|[number,number]|Partial<Record<Breakpoint,number|[number,number]>>',
+            type: 'number|[number,number]|Partial<Record<Breakpoint,number>>',
             default: '0',
-            desc: 'number→水平间距；[x,y]→水平+垂直；按断点对象 { xs,sm,md,... } 时按当前视口 mobile-first 降级解析',
+            desc: 'number→水平间距；[x,y]→水平+垂直；按断点对象 { xs,sm,md,... } 时经 screens 状态机 + responsiveArray 从大到小降级取第一个命中且有值的断点（对齐 Semi getGutter）。Row 施加四向负 margin，Col 四向 padding 抵消',
         },
         {
             owner: 'Row',
             name: 'align',
-            type: "'top'|'middle'|'bottom'|'baseline'|'stretch'",
-            default: "'top'",
-            desc: '映射 align-items',
+            type: "'top'|'middle'|'bottom'",
+            default: 'undefined',
+            desc: 'type="flex" 下生效：映射 align-items（cd-row-flex-top/middle/bottom）',
         },
         {
             owner: 'Row',
             name: 'justify',
-            type: "'start'|'end'|'center'|'space-between'|'space-around'|'space-evenly'",
+            type: "'start'|'end'|'center'|'space-between'|'space-around'",
             default: "'start'",
-            desc: '映射 justify-content',
+            desc: 'type="flex" 下生效：映射 justify-content（cd-row-flex-start/center/end/space-between/space-around）',
         },
-        { owner: 'Row', name: 'wrap', type: 'boolean', default: 'true', desc: 'false→flex-wrap:nowrap' },
         { owner: 'Row', name: 'class', type: 'string', default: "''" },
-        { owner: 'Col', name: 'span', type: 'number', default: 'undefined', desc: '0-24，0 隐藏，未设为自动列' },
-        { owner: 'Col', name: 'offset', type: 'number', default: '0', desc: 'margin-inline-start 偏移列数' },
-        { owner: 'Col', name: 'order', type: 'number', default: '0', desc: 'flex order' },
-        { owner: 'Col', name: 'push', type: 'number', default: '0', desc: 'inset-inline-start 相对偏移' },
-        { owner: 'Col', name: 'pull', type: 'number', default: '0', desc: 'inset-inline-end 相对偏移' },
-        {
-            owner: 'Col',
-            name: 'flex',
-            type: 'string|number',
-            default: 'undefined',
-            desc: '设置后优先于 span，直接控制 flex',
-        },
+        { owner: 'Row', name: 'style', type: 'string', default: "''", desc: '内联样式，追加在 gutter margin 之后（可覆盖）' },
+        { owner: 'Col', name: 'span', type: 'number', default: 'undefined', desc: '0-24，生成 cd-col-{span} 类（float:left + width%）；0 → cd-col-0 隐藏，未设为自动列' },
+        { owner: 'Col', name: 'offset', type: 'number', default: '0', desc: 'cd-col-offset-{n} → margin-left 偏移列数' },
+        { owner: 'Col', name: 'order', type: 'number', default: '0', desc: 'cd-col-order-{n} → order（type="flex" 下生效）' },
+        { owner: 'Col', name: 'push', type: 'number', default: '0', desc: 'cd-col-push-{n} → left 相对偏移' },
+        { owner: 'Col', name: 'pull', type: 'number', default: '0', desc: 'cd-col-pull-{n} → right 相对偏移' },
         {
             owner: 'Col',
             name: 'xs|sm|md|lg|xl|xxl',
-            type: 'number | { span?, offset?, order?, push?, pull?, flex? }',
+            type: 'number | { span?, offset?, order?, push?, pull? }',
             default: 'undefined',
-            desc: '响应式断点覆盖：值为 number(span) 或子集对象，按当前视口 mobile-first 降级解析后覆盖基础 props',
+            desc: '响应式断点覆盖：值为 number(span) 或子集对象，生成 cd-col-{bp}-{span} 等 CSS 类，靠 @media (min-width) 断点层叠（纯 CSS 驱动，不读 JS 断点）',
         },
         { owner: 'Col', name: 'class', type: 'string', default: "''" },
+        { owner: 'Col', name: 'style', type: 'string', default: "''", desc: '内联样式，追加在 gutter padding 之后（可覆盖）' },
     ],
     events: [],
     slots: [{ name: 'children', desc: 'Row 内放 Col；Col 内放任意内容' }],
     a11y: { hasRole: false, focusable: false, note: '纯布局容器，不引入语义角色' },
-    tokens: ['--cd-grid-columns', '--cd-grid-gutter-x', '--cd-grid-gutter-y'],
+    // Grid 走 float + 内联样式，无运行时组件级 CSS 变量。
+    tokens: [],
     responsive: true,
     examples: [
         {
             title: '基础两栏',
             code: '<Row gutter={16}><Col span={12}>左</Col><Col span={12}>右</Col></Row>',
         },
+        {
+            title: 'Flex 水平排列',
+            code: '<Row type="flex" justify="center"><Col span={4}>col</Col><Col span={4}>col</Col></Row>',
+        },
         {
             title: '响应式断点',
             code: '<Row gutter={{ xs: 8, md: 24 }}><Col xs={24} md={12}>左</Col><Col xs={24} md={12}>右</Col></Row>',