noreflow 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,161 @@
+/**
+ * Size value: a pixel number, a percentage string like "50%", or "auto".
+ */
+type SizeValue = number | `${number}%` | 'auto';
+/**
+ * Size value that excludes "auto" (for min/max constraints).
+ */
+type DimensionValue = number | `${number}%`;
+/**
+ * Margin value: pixels, percentage, or "auto" for auto margins.
+ */
+type MarginValue = number | `${number}%` | 'auto';
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch';
+type AlignSelf = 'auto' | AlignItems;
+type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
+type Display = 'flex' | 'grid' | 'none';
+type Position = 'static' | 'relative' | 'absolute';
+type BoxSizing = 'content-box' | 'border-box';
+/**
+ * Inset value for top/right/bottom/left: pixels, percentage, or "auto".
+ */
+type InsetValue = number | `${number}%` | 'auto';
+/**
+ * A single track size definition.
+ * - number: fixed pixels
+ * - `${number}%`: percentage of the container's content size
+ * - `${number}fr`: flexible fraction of remaining space
+ * - 'auto': sized to content (min-content to max-content)
+ */
+type TrackSize = number | `${number}%` | `${number}fr` | 'auto';
+type GridAutoFlow = 'row' | 'column';
+/**
+ * Grid item placement value: a 1-based line number or 'auto'.
+ */
+type GridLine = number | 'auto';
+type JustifyItems = 'start' | 'end' | 'center' | 'stretch';
+type JustifySelf = 'auto' | JustifyItems;
+/**
+ * Style properties for a layout node (flex or grid container, or child item).
+ * All properties are optional and default to CSS spec initial values.
+ */
+interface FlexStyle {
+    display?: Display;
+    position?: Position;
+    flexDirection?: FlexDirection;
+    flexWrap?: FlexWrap;
+    justifyContent?: JustifyContent;
+    alignItems?: AlignItems;
+    alignSelf?: AlignSelf;
+    alignContent?: AlignContent;
+    justifyItems?: JustifyItems;
+    justifySelf?: JustifySelf;
+    gridTemplateColumns?: TrackSize[];
+    gridTemplateRows?: TrackSize[];
+    gridAutoColumns?: TrackSize;
+    gridAutoRows?: TrackSize;
+    gridAutoFlow?: GridAutoFlow;
+    gridColumnStart?: GridLine;
+    gridColumnEnd?: GridLine;
+    gridRowStart?: GridLine;
+    gridRowEnd?: GridLine;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | 'auto';
+    width?: SizeValue;
+    height?: SizeValue;
+    minWidth?: DimensionValue;
+    minHeight?: DimensionValue;
+    maxWidth?: DimensionValue;
+    maxHeight?: DimensionValue;
+    top?: InsetValue;
+    right?: InsetValue;
+    bottom?: InsetValue;
+    left?: InsetValue;
+    zIndex?: number;
+    aspectRatio?: number;
+    padding?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    margin?: MarginValue;
+    marginTop?: MarginValue;
+    marginRight?: MarginValue;
+    marginBottom?: MarginValue;
+    marginLeft?: MarginValue;
+    border?: number;
+    borderTop?: number;
+    borderRight?: number;
+    borderBottom?: number;
+    borderLeft?: number;
+    gap?: number;
+    rowGap?: number;
+    columnGap?: number;
+    boxSizing?: BoxSizing;
+}
+/**
+ * Callback to measure leaf node content (e.g. text, images).
+ * Called by the layout engine when it needs to know the intrinsic
+ * size of a node that has no children.
+ *
+ * @param availableWidth - The width available for the content (may be Infinity)
+ * @param availableHeight - The height available for the content (may be Infinity)
+ * @returns The measured size of the content
+ */
+type MeasureFunction = (availableWidth: number, availableHeight: number) => {
+    width: number;
+    height: number;
+};
+/**
+ * A node in the layout tree. This is the input to computeLayout().
+ */
+interface FlexNode {
+    style?: FlexStyle;
+    children?: FlexNode[];
+    measure?: MeasureFunction;
+}
+/**
+ * The computed layout for a single node. This is the output of computeLayout().
+ * Coordinates are relative to the node's parent.
+ */
+interface LayoutResult {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    children: LayoutResult[];
+}
+
+declare function computeLayout(node: FlexNode, availableWidth?: number, availableHeight?: number): LayoutResult;
+
+/**
+ * Create a layout node with style applied directly — no `{ style: { ... } }` wrapping.
+ *
+ *   h({ width: 100, height: 50 })
+ *   h({ flexGrow: 1 }, child1, child2)
+ */
+declare function h(style: FlexStyle, ...children: FlexNode[]): FlexNode;
+/**
+ * Create a row (flex-direction: row) node.
+ *
+ *   row({ gap: 12, padding: 8 }, child1, child2)
+ */
+declare function row(style: FlexStyle, ...children: FlexNode[]): FlexNode;
+/**
+ * Create a column (flex-direction: column) node.
+ *
+ *   col({ width: 375, height: 667 }, header, content, footer)
+ */
+declare function col(style: FlexStyle, ...children: FlexNode[]): FlexNode;
+/**
+ * Create a grid container node.
+ *
+ *   grid({ gridTemplateColumns: ['1fr', '1fr'], gap: 8 }, ...items)
+ */
+declare function grid(style: FlexStyle, ...children: FlexNode[]): FlexNode;
+
+export { type AlignContent, type AlignItems, type AlignSelf, type BoxSizing, type DimensionValue, type Display, type FlexDirection, type FlexNode, type FlexStyle, type FlexWrap, type GridAutoFlow, type GridLine, type InsetValue, type JustifyContent, type JustifyItems, type JustifySelf, type LayoutResult, type MarginValue, type MeasureFunction, type Position, type SizeValue, type TrackSize, col, computeLayout, grid, h, row };