taffy-js 0.2.6 → 0.2.7

package/README.md

@@ -44,18 +44,13 @@ async function main() {
   containerStyle.display = Display.Flex;
   containerStyle.flexDirection = FlexDirection.Column;
   containerStyle.alignItems = AlignItems.Center;
-  containerStyle.size = { width: { Length: 300 }, height: { Length: 200 } };
-  containerStyle.padding = {
-    left: { Length: 10 },
-    right: { Length: 10 },
-    top: { Length: 10 },
-    bottom: { Length: 10 },
-  };
+  containerStyle.size = { width: 300, height: 200 };
+  containerStyle.padding = { left: 10, right: 10, top: 10, bottom: 10 };
 
   // Create child styles
   const childStyle = new Style();
   childStyle.flexGrow = 1;
-  childStyle.size = { width: { Percent: 100 }, height: "Auto" };
+  childStyle.size = { width: "100%", height: "auto" };
 
   // Create nodes
   const child1 = tree.newLeaf(childStyle);
@@ -66,10 +61,7 @@ async function main() {
   );
 
   // Compute layout
-  tree.computeLayout(container, {
-    width: { Definite: 300 },
-    height: { Definite: 200 },
-  });
+  tree.computeLayout(container, { width: 300, height: 200 });
 
   // Read computed layouts
   const containerLayout = tree.getLayout(container);
@@ -311,10 +303,10 @@ enum BoxSizing {
 ### Types
 
 ```typescript
-// Dimension values
-type Dimension = { Length: number } | { Percent: number } | "Auto";
-type LengthPercentage = { Length: number } | { Percent: number };
-type LengthPercentageAuto = { Length: number } | { Percent: number } | "Auto";
+// Dimension values (CSS-like syntax)
+type Dimension = number | `${number}%` | "auto"; // e.g., 100, "50%", "auto"
+type LengthPercentage = number | `${number}%`; // e.g., 10, "25%"
+type LengthPercentageAuto = number | `${number}%` | "auto";
 
 // Geometry
 interface Size<T> {
@@ -333,7 +325,7 @@ interface Point<T> {
 }
 
 // Available space for layout computation
-type AvailableSpace = { Definite: number } | "MinContent" | "MaxContent";
+type AvailableSpace = number | "MinContent" | "MaxContent";
 
 // Measure function for custom content measurement
 type MeasureFunction = (
@@ -354,7 +346,7 @@ const textNode = tree.newLeafWithContext(textStyle, { text: "Hello, World!" });
 
 tree.computeLayoutWithMeasure(
   rootNode,
-  { width: { Definite: 800 }, height: "MaxContent" },
+  { width: 800, height: "MaxContent" },
   (known, available, node, context, style) => {
     if (context?.text) {
       // Your text measurement logic here
@@ -399,7 +391,7 @@ const rowStyle = new Style();
 rowStyle.display = Display.Flex;
 rowStyle.flexDirection = FlexDirection.Row;
 rowStyle.justifyContent = JustifyContent.SpaceBetween;
-rowStyle.gap = { width: { Length: 10 }, height: { Length: 0 } };
+rowStyle.gap = { width: 10, height: 0 };
 ```
 
 ### Absolute Positioning
@@ -407,13 +399,8 @@ rowStyle.gap = { width: { Length: 10 }, height: { Length: 0 } };
 ```javascript
 const absoluteStyle = new Style();
 absoluteStyle.position = Position.Absolute;
-absoluteStyle.inset = {
-  left: { Length: 10 },
-  top: { Length: 10 },
-  right: "Auto",
-  bottom: "Auto",
-};
-absoluteStyle.size = { width: { Length: 100 }, height: { Length: 50 } };
+absoluteStyle.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
+absoluteStyle.size = { width: 100, height: 50 };
 ```
 
 ### Percentage Sizing
@@ -421,8 +408,8 @@ absoluteStyle.size = { width: { Length: 100 }, height: { Length: 50 } };
 ```javascript
 const percentStyle = new Style();
 percentStyle.size = {
-  width: { Percent: 50 }, // 50% of parent
-  height: { Percent: 100 }, // 100% of parent
+  width: "50%", // 50% of parent
+  height: "100%", // 100% of parent
 };
 ```
 
@@ -430,7 +417,7 @@ percentStyle.size = {
 
 ```bash
 # Clone the repository
-git clone https://github.com/user/taffy-js.git
+git clone https://github.com/ByteLandTechnology/taffy-js.git
 cd taffy-js
 
 # Install dependencies

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taffy-js",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "WebAssembly bindings for Taffy layout library",
   "keywords": [
     "layout",

package/pkg/README.md

@@ -44,18 +44,13 @@ async function main() {
   containerStyle.display = Display.Flex;
   containerStyle.flexDirection = FlexDirection.Column;
   containerStyle.alignItems = AlignItems.Center;
-  containerStyle.size = { width: { Length: 300 }, height: { Length: 200 } };
-  containerStyle.padding = {
-    left: { Length: 10 },
-    right: { Length: 10 },
-    top: { Length: 10 },
-    bottom: { Length: 10 },
-  };
+  containerStyle.size = { width: 300, height: 200 };
+  containerStyle.padding = { left: 10, right: 10, top: 10, bottom: 10 };
 
   // Create child styles
   const childStyle = new Style();
   childStyle.flexGrow = 1;
-  childStyle.size = { width: { Percent: 100 }, height: "Auto" };
+  childStyle.size = { width: "100%", height: "auto" };
 
   // Create nodes
   const child1 = tree.newLeaf(childStyle);
@@ -66,10 +61,7 @@ async function main() {
   );
 
   // Compute layout
-  tree.computeLayout(container, {
-    width: { Definite: 300 },
-    height: { Definite: 200 },
-  });
+  tree.computeLayout(container, { width: 300, height: 200 });
 
   // Read computed layouts
   const containerLayout = tree.getLayout(container);
@@ -311,10 +303,10 @@ enum BoxSizing {
 ### Types
 
 ```typescript
-// Dimension values
-type Dimension = { Length: number } | { Percent: number } | "Auto";
-type LengthPercentage = { Length: number } | { Percent: number };
-type LengthPercentageAuto = { Length: number } | { Percent: number } | "Auto";
+// Dimension values (CSS-like syntax)
+type Dimension = number | `${number}%` | "auto"; // e.g., 100, "50%", "auto"
+type LengthPercentage = number | `${number}%`; // e.g., 10, "25%"
+type LengthPercentageAuto = number | `${number}%` | "auto";
 
 // Geometry
 interface Size<T> {
@@ -333,7 +325,7 @@ interface Point<T> {
 }
 
 // Available space for layout computation
-type AvailableSpace = { Definite: number } | "MinContent" | "MaxContent";
+type AvailableSpace = number | "MinContent" | "MaxContent";
 
 // Measure function for custom content measurement
 type MeasureFunction = (
@@ -354,7 +346,7 @@ const textNode = tree.newLeafWithContext(textStyle, { text: "Hello, World!" });
 
 tree.computeLayoutWithMeasure(
   rootNode,
-  { width: { Definite: 800 }, height: "MaxContent" },
+  { width: 800, height: "MaxContent" },
   (known, available, node, context, style) => {
     if (context?.text) {
       // Your text measurement logic here
@@ -399,7 +391,7 @@ const rowStyle = new Style();
 rowStyle.display = Display.Flex;
 rowStyle.flexDirection = FlexDirection.Row;
 rowStyle.justifyContent = JustifyContent.SpaceBetween;
-rowStyle.gap = { width: { Length: 10 }, height: { Length: 0 } };
+rowStyle.gap = { width: 10, height: 0 };
 ```
 
 ### Absolute Positioning
@@ -407,13 +399,8 @@ rowStyle.gap = { width: { Length: 10 }, height: { Length: 0 } };
 ```javascript
 const absoluteStyle = new Style();
 absoluteStyle.position = Position.Absolute;
-absoluteStyle.inset = {
-  left: { Length: 10 },
-  top: { Length: 10 },
-  right: "Auto",
-  bottom: "Auto",
-};
-absoluteStyle.size = { width: { Length: 100 }, height: { Length: 50 } };
+absoluteStyle.inset = { left: 10, top: 10, right: "auto", bottom: "auto" };
+absoluteStyle.size = { width: 100, height: 50 };
 ```
 
 ### Percentage Sizing
@@ -421,8 +408,8 @@ absoluteStyle.size = { width: { Length: 100 }, height: { Length: 50 } };
 ```javascript
 const percentStyle = new Style();
 percentStyle.size = {
-  width: { Percent: 50 }, // 50% of parent
-  height: { Percent: 100 }, // 100% of parent
+  width: "50%", // 50% of parent
+  height: "100%", // 100% of parent
 };
 ```
 
@@ -430,7 +417,7 @@ percentStyle.size = {
 
 ```bash
 # Clone the repository
-git clone https://github.com/user/taffy-js.git
+git clone https://github.com/ByteLandTechnology/taffy-js.git
 cd taffy-js
 
 # Install dependencies

package/pkg/package.json

@@ -5,7 +5,7 @@
     "ByteLandTechnology <github@byteland.app>"
   ],
   "description": "WebAssembly bindings for Taffy layout library",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,4 +21,4 @@
   "sideEffects": [
     "./snippets/*"
   ]
-}
+}

package/pkg/taffy_wasm.d.ts

@@ -56,8 +56,8 @@ export type AvailableSpace = number | "minContent" | "maxContent";
  * const pixelSize: Size<number> = { width: 200, height: 100 };
  *
  * const dimensionSize: Size<Dimension> = {
- *   width: { Length: 200 },
- *   height: { Percent: 50 }
+ *   width: 200,
+ *   height: "50%"
  * };
  *
  * const availableSize: Size<AvailableSpace> = {
@@ -405,6 +405,8 @@ export interface DetailedGridItemsInfo {
   column_end: number;
 }
 
+
+
 /**
  * Multi-line content alignment enumeration
  *
@@ -730,14 +732,14 @@ export enum JustifyContent {
 
 /**
  * Computed layout result containing position, size, and spacing values for a node.
- *
+ * 
  * This class wraps the native [`taffy::Layout`] and provides read-only access
  * to all computed layout values. All dimensions are in pixels.
- *
+ * 
  * @example
  * ```typescript
  * const layout = tree.getLayout(node);
- *
+ * 
  * console.log("Position:", layout.x, layout.y);
  * console.log("Size:", layout.width, layout.height);
  * console.log("Content:", layout.contentWidth, layout.contentHeight);
@@ -966,10 +968,10 @@ export enum Position {
 
 /**
  * CSS layout configuration for a node, including flexbox, sizing, spacing, and alignment properties.
- *
+ * 
  * This class holds all CSS layout properties for a node. Create an instance with
  * `new Style()` and configure properties before passing to `TaffyTree.newLeaf()`.
- *
+ * 
  * @defaultValue
  * When created, all properties are set to their CSS default values:
  * - `display`: `Display.Block`
@@ -979,9 +981,9 @@ export enum Position {
  * - `flexGrow`: `0`
  * - `flexShrink`: `1`
  * - All alignment properties: `undefined` (use default behavior)
- * - All dimensions: `"Auto"`
- * - All spacing: `{ Length: 0 }`
- *
+ * - All dimensions: `"auto"`
+ * - All spacing: `0`
+ * 
  */
 export class Style {
   free(): void;
@@ -1021,7 +1023,7 @@ export class Style {
    *
    * The initial size of a flex item before growing/shrinking.
    *
-   * @returns - A `Dimension` value (`{ Length: n }`, `{ Percent: n }`, or `"Auto"`)
+   * @returns - A `Dimension` value (`number`, `\"{number}%\"`, or `\"auto\"`)
    */
   flexBasis: Dimension;
   /**
@@ -1184,10 +1186,10 @@ export class Style {
 
 /**
  * Error class thrown when a Taffy operation fails, containing a human-readable error message.
- *
+ * 
  * This class wraps the native [`taffy::TaffyError`] type and exposes it to JavaScript
  * with a readable error message. It is thrown as a JavaScript exception on failure.
- *
+ * 
  * @example
  * ```typescript
  * try {
@@ -1198,7 +1200,7 @@ export class Style {
  *   }
  * }
  * ```
- *
+ * 
  * @remarks
  * The underlying Taffy errors include:
  * - `InvalidInputNode`: Node ID doesn't exist in the tree
@@ -1224,10 +1226,10 @@ export class TaffyError {
 
 /**
  * The main layout tree class for creating nodes, computing layouts, and managing a tree of styled elements.
- *
+ * 
  * TaffyTree is the entry point for the Taffy layout engine. It manages
  * a tree of nodes and computes their layouts using CSS Flexbox and Grid algorithms.
- *
+ * 
  */
 export class TaffyTree {
   free(): void;
@@ -1340,10 +1342,10 @@ export class TaffyTree {
    * @example
    * ```typescript
    * // Fixed size container
-   * { width: { Definite: 800 }, height: { Definite: 600 } }
+   * { width: 800, height: 600 }
    *
    * // Flexible width, fixed height
-   * { width: "MaxContent", height: { Definite: 600 } }
+   * { width: "MaxContent", height: 600 }
    *
    * // Minimum content size
    * { width: "MinContent", height: "MinContent" }
@@ -1353,7 +1355,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
-   * tree.computeLayout(rootId, { width: { Definite: 800 }, height: { Definite: 600 } });
+   * tree.computeLayout(rootId, { width: 800, height: 600 });
    * ```
    */
   computeLayout(node: bigint, available_space: Size<AvailableSpace>): void;
@@ -1572,11 +1574,7 @@ export class TaffyTree {
    * tree.removeChildrenRange(parentId, 1, 3);
    * ```
    */
-  removeChildrenRange(
-    parent: bigint,
-    start_index: number,
-    end_index: number,
-  ): void;
+  removeChildrenRange(parent: bigint, start_index: number, end_index: number): void;
   /**
    * Replaces a child at a specific index
    *
@@ -1611,7 +1609,7 @@ export class TaffyTree {
    * ```typescript
    * tree.computeLayoutWithMeasure(
    *   rootId,
-   *   { width: { Definite: 800 }, height: "MaxContent" },
+   *   { width: 800, height: "MaxContent" },
    *   (known, available, node, context, style) => {
    *     if (context?.text) {
    *       const measured = measureText(context.text, available.width);
@@ -1622,11 +1620,7 @@ export class TaffyTree {
    * );
    * ```
    */
-  computeLayoutWithMeasure(
-    node: bigint,
-    available_space: Size<AvailableSpace>,
-    measure_func: MeasureFunction,
-  ): void;
+  computeLayoutWithMeasure(node: bigint, available_space: Size<AvailableSpace>, measure_func: MeasureFunction): void;
   /**
    * Gets context values for multiple nodes at once
    *
@@ -1719,7 +1713,7 @@ export class TaffyTree {
    *
    * @example
    * ```typescript
-   * tree.computeLayout(rootId, { width: { Definite: 800 }, height: { Definite: 600 } });
+   * tree.computeLayout(rootId, { width: 800, height: 600 });
    * const layout: Layout = tree.getLayout(nodeId);
    * console.log(`Position: (${layout.x}, ${layout.y}), Size: ${layout.width}x${layout.height}`);
    * ```
@@ -1788,7 +1782,7 @@ export class TaffyTree {
    * @example
    * ```typescript
    * const style = new Style();
-   * style.size = { width: { Length: 100 }, height: { Length: 50 } };
+   * style.size = { width: 100, height: 50 };
    * const nodeId: bigint = tree.newLeaf(style);
    * ```
    */
@@ -1830,12 +1824,7 @@ export class TaffyTree {
   setStyle(node: bigint, style: Style): void;
 }
 
-export type InitInput =
-  | RequestInfo
-  | URL
-  | Response
-  | BufferSource
-  | WebAssembly.Module;
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
 
 export interface InitOutput {
   readonly memory: WebAssembly.Memory;
@@ -1910,131 +1899,42 @@ export interface InitOutput {
   readonly style_set_size: (a: number, b: any) => void;
   readonly style_size: (a: number) => any;
   readonly taffyerror_message: (a: number) => [number, number];
-  readonly taffytree_addChild: (
-    a: number,
-    b: bigint,
-    c: bigint,
-  ) => [number, number];
+  readonly taffytree_addChild: (a: number, b: bigint, c: bigint) => [number, number];
   readonly taffytree_childCount: (a: number, b: bigint) => number;
-  readonly taffytree_children: (
-    a: number,
-    b: bigint,
-  ) => [number, number, number, number];
+  readonly taffytree_children: (a: number, b: bigint) => [number, number, number, number];
   readonly taffytree_clear: (a: number) => void;
-  readonly taffytree_computeLayout: (
-    a: number,
-    b: bigint,
-    c: any,
-  ) => [number, number];
-  readonly taffytree_computeLayoutWithMeasure: (
-    a: number,
-    b: bigint,
-    c: any,
-    d: any,
-  ) => [number, number];
+  readonly taffytree_computeLayout: (a: number, b: bigint, c: any) => [number, number];
+  readonly taffytree_computeLayoutWithMeasure: (a: number, b: bigint, c: any, d: any) => [number, number];
   readonly taffytree_dirty: (a: number, b: bigint) => [number, number, number];
   readonly taffytree_disableRounding: (a: number) => void;
   readonly taffytree_enableRounding: (a: number) => void;
-  readonly taffytree_getChildAtIndex: (
-    a: number,
-    b: bigint,
-    c: number,
-  ) => [bigint, number, number];
-  readonly taffytree_getDisjointNodeContextMut: (
-    a: number,
-    b: number,
-    c: number,
-  ) => [number, number, number, number];
-  readonly taffytree_getLayout: (
-    a: number,
-    b: bigint,
-  ) => [number, number, number];
-  readonly taffytree_getNodeContext: (
-    a: number,
-    b: bigint,
-  ) => [number, number, number];
-  readonly taffytree_getNodeContextMut: (
-    a: number,
-    b: bigint,
-  ) => [number, number, number];
-  readonly taffytree_getStyle: (
-    a: number,
-    b: bigint,
-  ) => [number, number, number];
-  readonly taffytree_insertChildAtIndex: (
-    a: number,
-    b: bigint,
-    c: number,
-    d: bigint,
-  ) => [number, number];
+  readonly taffytree_getChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
+  readonly taffytree_getDisjointNodeContextMut: (a: number, b: number, c: number) => [number, number, number, number];
+  readonly taffytree_getLayout: (a: number, b: bigint) => [number, number, number];
+  readonly taffytree_getNodeContext: (a: number, b: bigint) => [number, number, number];
+  readonly taffytree_getNodeContextMut: (a: number, b: bigint) => [number, number, number];
+  readonly taffytree_getStyle: (a: number, b: bigint) => [number, number, number];
+  readonly taffytree_insertChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [number, number];
   readonly taffytree_markDirty: (a: number, b: bigint) => [number, number];
   readonly taffytree_new: () => number;
-  readonly taffytree_newLeaf: (
-    a: number,
-    b: number,
-  ) => [bigint, number, number];
-  readonly taffytree_newLeafWithContext: (
-    a: number,
-    b: number,
-    c: any,
-  ) => [bigint, number, number];
-  readonly taffytree_newWithChildren: (
-    a: number,
-    b: number,
-    c: number,
-    d: number,
-  ) => [bigint, number, number];
+  readonly taffytree_newLeaf: (a: number, b: number) => [bigint, number, number];
+  readonly taffytree_newLeafWithContext: (a: number, b: number, c: any) => [bigint, number, number];
+  readonly taffytree_newWithChildren: (a: number, b: number, c: number, d: number) => [bigint, number, number];
   readonly taffytree_parent: (a: number, b: bigint) => [number, bigint];
   readonly taffytree_printTree: (a: number, b: bigint) => void;
   readonly taffytree_remove: (a: number, b: bigint) => [bigint, number, number];
-  readonly taffytree_removeChild: (
-    a: number,
-    b: bigint,
-    c: bigint,
-  ) => [bigint, number, number];
-  readonly taffytree_removeChildAtIndex: (
-    a: number,
-    b: bigint,
-    c: number,
-  ) => [bigint, number, number];
-  readonly taffytree_removeChildrenRange: (
-    a: number,
-    b: bigint,
-    c: number,
-    d: number,
-  ) => [number, number];
-  readonly taffytree_replaceChildAtIndex: (
-    a: number,
-    b: bigint,
-    c: number,
-    d: bigint,
-  ) => [bigint, number, number];
-  readonly taffytree_setChildren: (
-    a: number,
-    b: bigint,
-    c: number,
-    d: number,
-  ) => [number, number];
-  readonly taffytree_setNodeContext: (
-    a: number,
-    b: bigint,
-    c: any,
-  ) => [number, number];
-  readonly taffytree_setStyle: (
-    a: number,
-    b: bigint,
-    c: number,
-  ) => [number, number];
+  readonly taffytree_removeChild: (a: number, b: bigint, c: bigint) => [bigint, number, number];
+  readonly taffytree_removeChildAtIndex: (a: number, b: bigint, c: number) => [bigint, number, number];
+  readonly taffytree_removeChildrenRange: (a: number, b: bigint, c: number, d: number) => [number, number];
+  readonly taffytree_replaceChildAtIndex: (a: number, b: bigint, c: number, d: bigint) => [bigint, number, number];
+  readonly taffytree_setChildren: (a: number, b: bigint, c: number, d: number) => [number, number];
+  readonly taffytree_setNodeContext: (a: number, b: bigint, c: any) => [number, number];
+  readonly taffytree_setStyle: (a: number, b: bigint, c: number) => [number, number];
   readonly taffytree_totalNodeCount: (a: number) => number;
   readonly taffytree_unroundedLayout: (a: number, b: bigint) => number;
   readonly taffytree_withCapacity: (a: number) => number;
   readonly __wbindgen_malloc: (a: number, b: number) => number;
-  readonly __wbindgen_realloc: (
-    a: number,
-    b: number,
-    c: number,
-    d: number,
-  ) => number;
+  readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
   readonly __wbindgen_exn_store: (a: number) => void;
   readonly __externref_table_alloc: () => number;
   readonly __wbindgen_externrefs: WebAssembly.Table;
@@ -2047,28 +1947,21 @@ export interface InitOutput {
 export type SyncInitInput = BufferSource | WebAssembly.Module;
 
 /**
- * Instantiates the given `module`, which can either be bytes or
- * a precompiled `WebAssembly.Module`.
- *
- * @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
- *
- * @returns {InitOutput}
- */
-export function initSync(
-  module: { module: SyncInitInput } | SyncInitInput,
-): InitOutput;
+* Instantiates the given `module`, which can either be bytes or
+* a precompiled `WebAssembly.Module`.
+*
+* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
+*
+* @returns {InitOutput}
+*/
+export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
 
 /**
- * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
- * for everything else, calls `WebAssembly.instantiate` directly.
- *
- * @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
- *
- * @returns {Promise<InitOutput>}
- */
-export default function __wbg_init(
-  module_or_path?:
-    | { module_or_path: InitInput | Promise<InitInput> }
-    | InitInput
-    | Promise<InitInput>,
-): Promise<InitOutput>;
+* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+* for everything else, calls `WebAssembly.instantiate` directly.
+*
+* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
+*
+* @returns {Promise<InitOutput>}
+*/
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;