@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/lib/layout/flex-baseline-mode.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/layout/flex-baseline-mode.ts"],
+  "sourcesContent": ["// Shared private identity preserves baseline mode through resolution and cache replay.\nexport const FLEX_BASELINE_GROUP = Symbol('pibbl.flex-baseline-group');\nexport const FLEX_LAST_BASELINE = Symbol('pibbl.flex-last-baseline');\n"],
+  "mappings": "AACO,MAAM,sBAAsB,uBAAO,2BAA2B;AAC9D,MAAM,qBAAqB,uBAAO,0BAA0B;",
+  "names": []
+}

package/dist/lib/layout/flex.d.ts

@@ -1,12 +1,18 @@
+import type { Text } from "../components/text.js";
+import { FLEX_BASELINE_GROUP, FLEX_LAST_BASELINE } from './flex-baseline-mode.js';
+import type { CachedFlexPlacement } from './flex-allocation-cache.js';
+import { LayoutRegion } from './wasm/region.js';
+import { type PreparedQuery } from '../style/responsive.js';
 import type { PibblElement } from '../element/types.js';
 import { type PibblStructuralEventProps } from '../components/structural-events.js';
-import type { BoxStyle, LayoutItemStyle } from '../style/types.js';
-import type { CanvasMeasurementService, PibblNodeInput, MeasureResult } from '../types.js';
+import type { BoxStyle, Percentage, FlexItemStyle, LayoutItemStyle, ResolvedBoxStyle } from '../style/types.js';
+import type { CanvasMeasurementService, PibblNodeInput, MeasureResult, SystemStyle } from '../types.js';
 import type { Constraints, LayoutBox } from './types.js';
-type FlexDirection = 'row' | 'column';
-type FlexWrap = 'nowrap' | 'wrap';
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 type MainAlignment = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
 type CrossAlignment = 'stretch' | 'flex-start' | 'flex-end' | 'center';
+type ItemCrossAlignment = CrossAlignment | 'first-baseline' | 'last-baseline';
 /**
  * Supported geometry and presentation properties for Flex.
  *
@@ -15,25 +21,27 @@ type CrossAlignment = 'stretch' | 'flex-start' | 'flex-end' | 'center';
  * @see {@link Flex}
  */
 export interface FlexStyle extends BoxStyle, LayoutItemStyle {
+    /** Inherited inline direction. Roots default to LTR. See {@link Flex}. */
+    layoutDirection?: 'ltr' | 'rtl';
     /** The main axis along which flex children are placed. See {@link FlexDirection}. */
     flexDirection?: FlexDirection;
     /** Whether children may wrap onto additional flex lines. See {@link FlexWrap}. */
     flexWrap?: FlexWrap;
-    /** Distribution of children along the main axis. See {@link MainAlignment}. */
-    justifyContent?: MainAlignment;
-    /** Default alignment of children on the cross or block axis. See {@link CrossAlignment}. */
-    alignItems?: CrossAlignment;
+    /** Distribution along the main axis. start/end follow layout direction independently of axis reversal. See {@link MainAlignment}. */
+    justifyContent?: MainAlignment | 'start' | 'end';
+    /** Cross alignment. start/end follow layout direction independently of wrap reversal. See {@link CrossAlignment}. */
+    alignItems?: ItemCrossAlignment | 'start' | 'end';
     /**
      * Distribution of wrapped flex lines within the available cross-axis space. See
      * {@link CrossAlignment}, {@link MainAlignment}.
      */
-    alignContent?: CrossAlignment | MainAlignment;
-    /** Spacing between adjacent items. See {@link FlexStyle}. */
-    gap?: number;
-    /** Space between adjacent rows or items on the row axis. See {@link FlexStyle}. */
-    rowGap?: number;
-    /** Space between adjacent columns or items on the column axis. See {@link FlexStyle}. */
-    columnGap?: number;
+    alignContent?: CrossAlignment | MainAlignment | 'start' | 'end';
+    /** Numeric spacing, or experimental allocated-axis percentages. See {@link Percentage}, {@link FlexStyle}. */
+    gap?: number | Percentage;
+    /** Physical row spacing; experimental percentages use content height. See {@link Percentage}, {@link FlexStyle}. */
+    rowGap?: number | Percentage;
+    /** Physical column spacing; experimental percentages use content width. See {@link Percentage}, {@link FlexStyle}. */
+    columnGap?: number | Percentage;
 }
 /**
  * Authored inputs for Flex, including the declared data and presentation options.
@@ -49,8 +57,34 @@ export interface FlexMeasurementInput {
     service: CanvasMeasurementService;
     measureElement(element: PibblElement<any>, constraints: Readonly<Constraints>): MeasureResult;
 }
+declare const FLEX_ABSOLUTE_BOX_STYLE: unique symbol;
+declare const FLEX_INHERITED_CONTAINING_BOX: unique symbol;
+interface ResolvedFlexStyle extends SystemStyle {
+    layoutDirection: 'ltr' | 'rtl';
+    box: ResolvedBoxStyle;
+    overflow: 'visible' | 'clip';
+    flexDirection: FlexDirection;
+    flexWrap: FlexWrap;
+    justifyContent: MainAlignment;
+    alignItems: CrossAlignment;
+    /** True when first/last baseline requires a horizontal measured group. */
+    [FLEX_BASELINE_GROUP]: boolean;
+    [FLEX_LAST_BASELINE]: boolean;
+    alignContent: CrossAlignment | MainAlignment;
+    rowGap: number;
+    columnGap: number;
+    /** Original container input retained for lazy absolute padding-box derivation. */
+    [FLEX_ABSOLUTE_BOX_STYLE]: Readonly<FlexStyle>;
+    [FLEX_INHERITED_CONTAINING_BOX]?: Readonly<LayoutBox>;
+}
+export interface FlexPlacement extends CachedFlexPlacement {
+    box: LayoutBox;
+    element: PibblElement<any>;
+}
 /**
  * Describes the supported Flexbox subset for JSX or createElement authoring.
+ * Text automatic heights use the final allocated width in rows and nowrap columns
+ * before dependent sibling placement. See {@link Text}.
  *
  * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
  * props and style types.
@@ -61,4 +95,5 @@ export interface FlexMeasurementInput {
  */
 export declare const Flex: import("@pibbl/core").PibblPrimitiveComponent<FlexProps, import("@pibbl/core").PrimitiveInput<FlexProps, FlexStyle>>;
 export declare function layoutFlex(container: Readonly<LayoutBox>, children: PibblNodeInput, style: Readonly<FlexStyle>, measurement: FlexMeasurementInput): LayoutBox[];
+export declare function resolveAbsoluteFlexPlacement(paddingBox: Readonly<LayoutBox>, child: PibblElement<any>, style: Readonly<BoxStyle & FlexItemStyle & LayoutItemStyle>, receiverToken: object, query: PreparedQuery | undefined, content: Readonly<LayoutBox>, options: Readonly<Pick<ResolvedFlexStyle, 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'layoutDirection'>>, measurement?: FlexMeasurementInput, region?: LayoutRegion, measurementToken?: object): FlexPlacement;
 export {};