@lightningtv/solid 3.0.13 → 3.1.1-0

package/docs/README.md

@@ -0,0 +1,35 @@
+<p>
+  <img src="https://assets.solidjs.com/banner?project=Library&type=solid-lightning" alt="SolidJS LightningJS" />
+</p>
+
+`@lightningtv/solid` is an integration for the [LightningJS 3 Renderer](https://github.com/lightning-js/renderer) built with [SolidJS](https://www.solidjs.com/) [Universal Renderer](https://github.com/solidjs/solid/releases/tag/v1.2.0). It allows you to declaratively construct lightning nodes with SolidJS reactive primitives. It includes everything you need to rapidly build the performant TV Apps.
+
+## Starter Template
+
+Clone starter template:
+
+```bash
+> npx degit lightning-tv/solid-starter-template my-app
+> cd my-app
+> npm i # or yarn or pnpm
+> npm start # or yarn or pnpm
+```
+
+## In Depth Guides
+
+Read the full [Guide on Medium](https://medium.com/@chiefcll/lightning-3-the-basics-of-solidjs-e6e21d73205e) or watch the video:
+
+[![Watch the video](https://img.youtube.com/vi/9UU7Ntf7Tww/0.jpg)](https://www.youtube.com/watch?v=9UU7Ntf7Tww)
+
+## Why Solid
+
+- [Fastest, full featured frontend framework](https://dev.to/ryansolid/introducing-the-solidjs-ui-library-4mck)
+- Established - Solid is widely used in production since 2018 with large community
+  - [Router](https://github.com/solidjs/solid-router)
+  - [Primitive Libraries](https://github.com/solidjs-community/solid-primitives)
+  - [Documentations](https://docs.solidjs.com/)
+  - [Demo App](https://lightning-tv.github.io/solid-demo-app/#/)
+  - [Playground](https://playground.solidjs.com/)
+- Familiar and easy to use JSX + React like syntax
+- Typescript
+- [Sample Lightning UI Library](https://github.com/rdkcentral/solid-ui) of components with Theming

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningtv/solid",
-  "version": "3.0.13",
+  "version": "3.1.1-0",
   "description": "Lightning Renderer for Solid Universal",
   "type": "module",
   "exports": {
@@ -65,7 +65,6 @@
   "author": "Chris Lorenzo",
   "license": "Apache-2.0",
   "dependencies": {
-    "@lightningtv/solid": "link:",
     "@solid-primitives/event-listener": "^2.3.3",
     "@solid-primitives/list": "^0.1.2",
     "@solid-primitives/mouse": "^2.0.20",
@@ -116,7 +115,8 @@
     "jsx-runtime.d.ts",
     "LICENSE",
     "NOTICE",
-    "README.md"
+    "README.md",
+    "docs/AI_CODING_GUIDELINES.md"
   ],
   "packageManager": "pnpm@10.8.0"
 }

package/src/core/elementNode.ts

@@ -23,7 +23,12 @@ import {
   NewOmit,
 } from './intrinsicTypes.js';
 import States, { type NodeStates } from './states.js';
-import calculateFlex from './flex.js';
+import calculateFlexOld from './flex.js';
+import calculateFlexNew from './flexLayout.js';
+
+const calculateFlex = (import.meta as any).env?.VITE_USE_NEW_FLEX
+  ? calculateFlexNew
+  : calculateFlexOld;
 import {
   log,
   isArray,
@@ -253,7 +258,7 @@ export interface ElementNode extends RendererNode, FocusNode {
    *
    * @see https://lightning-tv.github.io/solid/#/flow/layout?id=flex
    */
-  flexWrap?: 'nowrap' | 'wrap';
+  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
   /**
    * Determines if an element is a flex item. If set to `false`, the element will be ignored by the flexbox layout.
    * @default false
@@ -265,6 +270,17 @@ export interface ElementNode extends RendererNode, FocusNode {
    * @see https://lightning-tv.github.io/solid/#/flow/layout?id=flex
    */
   flexOrder?: number;
+  /**
+   * Defines the ability for a flex item to shrink if necessary.
+   * Defaults to 0 since existing legacy implementations did not shrink layout boxes.
+   * Only available in NEW flex layout.
+   */
+  flexShrink?: number;
+  /**
+   * Defines the default size of an element before the remaining space is distributed.
+   * Only available in NEW flex layout.
+   */
+  flexBasis?: number | string;
   /**
    * Forwards focus to a child element. It can be a numeric index of the child or a handler function.
    *
@@ -415,7 +431,7 @@ export interface ElementNode extends RendererNode, FocusNode {
    *
    * @see https://lightning-tv.github.io/solid/#/flow/layout?id=flex
    */
-  flexDirection?: 'row' | 'column';
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
   /**
    * The gap between flex items.
    *
@@ -483,11 +499,17 @@ export interface ElementNode extends RendererNode, FocusNode {
    */
   marginTop?: number;
   /**
-   * The padding on all sides of the flex element.
+   * The padding on all sides of the flex element, or an array defining [Top, Right, Bottom, Left] padding.
+   *
+   * @see https://lightning-tv.github.io/solid/#/flow/layout
+   */
+  padding?: number | [number, number, number, number];
+  /**
+   * The margin on all sides of the flex element, or an array defining [Top, Right, Bottom, Left] margins.
    *
    * @see https://lightning-tv.github.io/solid/#/flow/layout
    */
-  padding?: number;
+  margin?: number | [number, number, number, number];
   /**
    * The x-coordinate of the element's position.
    *
@@ -620,6 +642,18 @@ export interface ElementNode extends RendererNode, FocusNode {
    * @see https://lightning-tv.github.io/solid/#/flow/layout
    */
   onLayout?: (this: ElementNode, target: ElementNode) => void;
+
+  /**
+   * The individual padding on each side of an element, acting as an override to the `padding` array property.
+   * `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`.
+   * Only in the new flex engine.
+   *
+   * @see https://lightning-tv.github.io/solid/#/flow/layout?id=flex
+   */
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
 }
 
 export class ElementNode extends Object {

package/src/core/flex.ts

@@ -1,23 +1,11 @@
 import { type ElementNode } from './elementNode.js';
 import { isTextNode, isElementText } from './utils.js';
 
-interface ProcessedChild {
-  node: ElementNode;
-  mainSize: number;
-  marginStart: number;
-  marginEnd: number;
-  totalMainSizeOnAxis: number;
-  isGrowItem: boolean;
-  flexGrowValue: number;
-  flexOrder: number;
-  crossSize: number;
-  crossMarginStart: number;
-  crossMarginEnd: number;
-}
-
 export default function (node: ElementNode): boolean {
   const direction = node.flexDirection || 'row';
-  const isRow = direction === 'row';
+  const isRow = direction === 'row' || direction === 'row-reverse';
+  const isReverse =
+    direction === 'row-reverse' || direction === 'column-reverse';
   const dimension = isRow ? 'width' : 'height';
   const crossDimension = isRow ? 'height' : 'width';
   const marginOne = isRow ? 'marginLeft' : 'marginTop';
@@ -27,12 +15,19 @@ export default function (node: ElementNode): boolean {
   const minDimension = isRow ? 'minWidth' : 'minHeight';
   const crossMinDimension = isRow ? 'minHeight' : 'minWidth';
 
-  const processedChildren: ProcessedChild[] = [];
+  const children = node.children;
+  const numChildren = children.length;
+
+  if (numChildren === 0) {
+    return false;
+  }
+
+  let processableChildrenIndices: number[] = [];
   let hasOrder = false;
   let totalFlexGrow = 0;
 
-  for (let i = 0; i < node.children.length; i++) {
-    const c = node.children[i]!;
+  for (let i = 0; i < numChildren; i++) {
+    const c = children[i]!;
 
     if (isElementText(c) && c.text && !(c.width || c.height)) {
       return false;
@@ -42,54 +37,42 @@ export default function (node: ElementNode): boolean {
       continue;
     }
 
-    const flexOrder = c.flexOrder;
-    if (flexOrder !== undefined) {
+    if (c.flexOrder !== undefined) {
       hasOrder = true;
     }
 
     const flexGrow = c.flexGrow;
-    const isGrowItem = flexGrow !== undefined && flexGrow >= 0;
-    if (isGrowItem) {
-      totalFlexGrow += flexGrow!;
+    if (flexGrow !== undefined && flexGrow >= 0) {
+      totalFlexGrow += flexGrow;
     }
 
-    if (c[minDimension] && (c[dimension] || 0) < c[minDimension]) {
+    if (c[minDimension] && (c[dimension] || 0) < c[minDimension]!) {
       c[dimension] = c[minDimension]!;
     }
-    const mainSize = c[dimension] || 0;
-    const currentMarginStart = c[marginOne] || 0;
-    const currentMarginEnd = c[marginTwo] || 0;
 
     if (
       c[crossMinDimension] &&
-      (c[crossDimension] || 0) < c[crossMinDimension]
+      (c[crossDimension] || 0) < c[crossMinDimension]!
     ) {
       c[crossDimension] = c[crossMinDimension]!;
     }
-    const crossSize = c[crossDimension] || 0;
-
-    processedChildren.push({
-      node: c as ElementNode,
-      mainSize: mainSize,
-      marginStart: currentMarginStart,
-      marginEnd: currentMarginEnd,
-      totalMainSizeOnAxis: mainSize + currentMarginStart + currentMarginEnd,
-      isGrowItem: isGrowItem,
-      flexGrowValue: isGrowItem ? flexGrow! : 0,
-      flexOrder: flexOrder || 0,
-      crossSize: crossSize,
-      crossMarginStart: c[crossMarginOne] || 0,
-      crossMarginEnd: c[crossMarginTwo] || 0,
-    });
+
+    processableChildrenIndices.push(i);
   }
 
   if (hasOrder) {
-    processedChildren.sort((a, b) => a.flexOrder - b.flexOrder);
-  } else if (node.direction === 'rtl') {
-    processedChildren.reverse();
+    processableChildrenIndices.sort((aIdx, bIdx) => {
+      const a = children[aIdx] as ElementNode;
+      const b = children[bIdx] as ElementNode;
+      return (a.flexOrder || 0) - (b.flexOrder || 0);
+    });
+  }
+
+  if (isReverse || node.direction === 'rtl') {
+    processableChildrenIndices.reverse();
   }
 
-  const numProcessedChildren = processedChildren.length;
+  const numProcessedChildren = processableChildrenIndices.length;
   if (numProcessedChildren === 0) {
     return false; // No layout changes if no processable children
   }
@@ -106,23 +89,46 @@ export default function (node: ElementNode): boolean {
     node[crossMinDimension] || 0,
     0,
   );
+  const isWrapReverse = node.flexWrap === 'wrap-reverse';
   const gap = node.gap || 0;
   const justify = node.justifyContent || 'flexStart';
+  const nodePadding = (node.padding as number) || 0;
   let containerUpdated = false;
 
+  const childMainSizes = new Float32Array(numProcessedChildren);
+  const childMarginStarts = new Float32Array(numProcessedChildren);
+  const childMarginEnds = new Float32Array(numProcessedChildren);
+  const childTotalMainSizes = new Float32Array(numProcessedChildren);
+  const childCrossSizes = new Float32Array(numProcessedChildren);
+  const childMarginCrossStarts = new Float32Array(numProcessedChildren);
+  const childMarginCrossEnds = new Float32Array(numProcessedChildren);
+
+  let sumOfFlexBaseSizesWithMargins = 0;
+
+  for (let idx = 0; idx < numProcessedChildren; idx++) {
+    const c = children[processableChildrenIndices[idx]!] as ElementNode;
+
+    const baseMainSize = c[dimension] || 0;
+    const marginStart = (c[marginOne] as number) || 0;
+    const marginEnd = (c[marginTwo] as number) || 0;
+
+    childMainSizes[idx] = baseMainSize;
+    childMarginStarts[idx] = marginStart;
+    childMarginEnds[idx] = marginEnd;
+    childTotalMainSizes[idx] = baseMainSize + marginStart + marginEnd;
+
+    childCrossSizes[idx] = c[crossDimension] || 0;
+    childMarginCrossStarts[idx] = (c[crossMarginOne] as number) || 0;
+    childMarginCrossEnds[idx] = (c[crossMarginTwo] as number) || 0;
+
+    sumOfFlexBaseSizesWithMargins += childTotalMainSizes[idx]!;
+  }
+
   if (totalFlexGrow > 0 && numProcessedChildren > 1) {
     // When flex-grow is used, the container's size is considered fixed for this calculation pass,
     // unless flexBoundary is explicitly set to allow container resizing based on content.
     node.flexBoundary = node.flexBoundary || 'fixed';
 
-    // Determine the sum of the flex base sizes of all items.
-    // The flex base size is the item's mainSize before flex-grow is applied.
-    let sumOfFlexBaseSizesWithMargins = 0;
-    for (const pc of processedChildren) {
-      sumOfFlexBaseSizesWithMargins +=
-        pc.mainSize + pc.marginStart + pc.marginEnd;
-    }
-
     // Calculate the total space occupied by gaps between items.
     const totalGapSpace =
       numProcessedChildren > 0 ? gap * (numProcessedChildren - 1) : 0;
@@ -132,14 +138,16 @@ export default function (node: ElementNode): boolean {
       containerSize - sumOfFlexBaseSizesWithMargins - totalGapSpace;
 
     if (availableSpace > 0) {
-      for (const pc of processedChildren) {
-        if (pc.isGrowItem && pc.flexGrowValue > 0) {
-          const shareOfSpace =
-            (pc.flexGrowValue / totalFlexGrow) * availableSpace;
-          const newMainSize = pc.mainSize + shareOfSpace;
-          pc.node[dimension] = newMainSize;
-          pc.mainSize = newMainSize;
-          pc.totalMainSizeOnAxis = newMainSize + pc.marginStart + pc.marginEnd;
+      for (let idx = 0; idx < numProcessedChildren; idx++) {
+        const c = children[processableChildrenIndices[idx]!] as ElementNode;
+        const flexGrowValue = c.flexGrow;
+        if (flexGrowValue !== undefined && flexGrowValue > 0) {
+          const shareOfSpace = (flexGrowValue / totalFlexGrow) * availableSpace;
+          const newMainSize = childMainSizes[idx]! + shareOfSpace;
+          c[dimension] = newMainSize;
+          childMainSizes[idx] = newMainSize;
+          childTotalMainSizes[idx] =
+            newMainSize + childMarginStarts[idx]! + childMarginEnds[idx]!;
         }
       }
       // prevent infinite loops by only doing this once
@@ -162,42 +170,42 @@ export default function (node: ElementNode): boolean {
     justify === 'spaceEvenly' ||
     justify === 'spaceAround'
   ) {
-    for (const pc of processedChildren) {
-      totalItemSize += pc.totalMainSizeOnAxis;
+    for (let idx = 0; idx < numProcessedChildren; idx++) {
+      totalItemSize += childTotalMainSizes[idx]!;
     }
   }
 
   const align = node.alignItems || (node.flexWrap ? 'flexStart' : undefined);
   const doCrossAlign = containerCrossSize
-    ? (pc: ProcessedChild, crossCurrentPos: number = 0) => {
-        const alignSelf = pc.node.alignSelf || align;
+    ? (c: ElementNode, idx: number, crossCurrentPos: number = 0) => {
+        const alignSelf = c.alignSelf || align;
         if (!alignSelf) {
           return;
         }
         if (alignSelf === 'flexStart') {
-          pc.node[crossProp] = crossCurrentPos + pc.crossMarginStart;
+          c[crossProp] = crossCurrentPos + childMarginCrossStarts[idx]!;
         } else if (alignSelf === 'center') {
-          pc.node[crossProp] =
+          c[crossProp] =
             crossCurrentPos +
-            (containerCrossSize - pc.crossSize) / 2 +
-            pc.crossMarginStart;
+            (containerCrossSize - childCrossSizes[idx]!) / 2 +
+            childMarginCrossStarts[idx]!;
         } else if (alignSelf === 'flexEnd') {
-          pc.node[crossProp] =
+          c[crossProp] =
             crossCurrentPos +
             containerCrossSize -
-            pc.crossSize -
-            pc.crossMarginEnd;
+            childCrossSizes[idx]! -
+            childMarginCrossEnds[idx]!;
         }
       }
-    : (_pc: ProcessedChild, _crossCurrentPos: number = 0) => {
+    : (_c: ElementNode, _idx: number, _crossCurrentPos: number = 0) => {
         /* no-op */
       };
 
   if (isRow && node._calcHeight && !node.flexCrossBoundary) {
-    const maxHeight = processedChildren.reduce(
-      (max, pc) => Math.max(max, pc.crossSize),
-      0,
-    );
+    let maxHeight = 0;
+    for (let idx = 0; idx < numProcessedChildren; idx++) {
+      if (childCrossSizes[idx]! > maxHeight) maxHeight = childCrossSizes[idx]!;
+    }
     const newHeight = maxHeight || node.height;
     if (newHeight !== node.height) {
       containerUpdated = true;
@@ -205,42 +213,52 @@ export default function (node: ElementNode): boolean {
     }
   }
 
-  let currentPos = node.padding || 0;
+  let currentPos = nodePadding;
   if (justify === 'flexStart') {
-    if (node.flexWrap === 'wrap') {
-      let crossCurrentPos = 0;
-      // use the child size to do wrap, not the container
-      const childCrossSize =
-        processedChildren[0]?.crossSize || containerCrossSize;
+    if (node.flexWrap === 'wrap' || isWrapReverse) {
+      const childCrossSizeVar =
+        numProcessedChildren > 0 ? childCrossSizes[0]! : containerCrossSize;
+      let crossCurrentPos = isWrapReverse
+        ? containerCrossSize - childCrossSizeVar
+        : 0;
       const crossGap = isRow ? (node.columnGap ?? gap) : (node.rowGap ?? gap);
-      for (const pc of processedChildren) {
+
+      for (let idx = 0; idx < numProcessedChildren; idx++) {
+        const c = children[processableChildrenIndices[idx]!] as ElementNode;
         if (
-          currentPos + pc.totalMainSizeOnAxis > containerSize &&
-          currentPos > (node.padding || 0)
+          currentPos + childTotalMainSizes[idx]! > containerSize &&
+          currentPos > nodePadding
         ) {
-          currentPos = node.padding || 0;
-          crossCurrentPos += childCrossSize + crossGap;
+          currentPos = nodePadding;
+          crossCurrentPos += isWrapReverse
+            ? -(childCrossSizeVar + crossGap)
+            : childCrossSizeVar + crossGap;
         }
-        pc.node[prop] = currentPos + pc.marginStart;
-        currentPos += pc.totalMainSizeOnAxis + gap;
-        doCrossAlign(pc, crossCurrentPos);
+        c[prop] = currentPos + childMarginStarts[idx]!;
+        currentPos += childTotalMainSizes[idx]! + gap;
+        doCrossAlign(c, idx, crossCurrentPos);
       }
-      const finalCrossSize = crossCurrentPos + childCrossSize;
+
+      const finalCrossSize = isWrapReverse
+        ? containerCrossSize - crossCurrentPos
+        : crossCurrentPos + childCrossSizeVar;
+
       if (node[crossDimension] !== finalCrossSize) {
         node[`preFlex${crossDimension}`] = node[crossDimension];
         node[crossDimension] = finalCrossSize;
         containerUpdated = true;
       }
     } else {
-      for (const pc of processedChildren) {
-        pc.node[prop] = currentPos + pc.marginStart;
-        currentPos += pc.totalMainSizeOnAxis + gap;
-        doCrossAlign(pc);
+      for (let idx = 0; idx < numProcessedChildren; idx++) {
+        const c = children[processableChildrenIndices[idx]!] as ElementNode;
+        c[prop] = currentPos + childMarginStarts[idx]!;
+        currentPos += childTotalMainSizes[idx]! + gap;
+        doCrossAlign(c, idx);
       }
     }
     // Update container size
     if (node.flexBoundary !== 'fixed' && node.flexWrap !== 'wrap') {
-      let calculatedSize = currentPos - gap + (node.padding || 0);
+      let calculatedSize = currentPos - gap + nodePadding;
       const minSize = node[minDimension] || 0;
       if (calculatedSize < minSize) {
         calculatedSize = minSize;
@@ -253,55 +271,59 @@ export default function (node: ElementNode): boolean {
       }
     }
   } else if (justify === 'flexEnd') {
-    currentPos = containerSize - (node.padding || 0);
-    for (let i = numProcessedChildren - 1; i >= 0; i--) {
-      const pc = processedChildren[i]!;
-      pc.node[prop] = currentPos - pc.mainSize - pc.marginEnd;
-      currentPos -= pc.totalMainSizeOnAxis + gap;
-      doCrossAlign(pc);
+    currentPos = containerSize - nodePadding;
+    for (let idx = numProcessedChildren - 1; idx >= 0; idx--) {
+      const c = children[processableChildrenIndices[idx]!] as ElementNode;
+      c[prop] = currentPos - childMainSizes[idx]! - childMarginEnds[idx]!;
+      currentPos -= childTotalMainSizes[idx]! + gap;
+      doCrossAlign(c, idx);
     }
   } else if (justify === 'center') {
     currentPos =
       (containerSize - (totalItemSize + gap * (numProcessedChildren - 1))) / 2 +
-      (node.padding || 0);
-    for (const pc of processedChildren) {
-      pc.node[prop] = currentPos + pc.marginStart;
-      currentPos += pc.totalMainSizeOnAxis + gap;
-      doCrossAlign(pc);
+      nodePadding;
+    for (let idx = 0; idx < numProcessedChildren; idx++) {
+      const c = children[processableChildrenIndices[idx]!] as ElementNode;
+      c[prop] = currentPos + childMarginStarts[idx]!;
+      currentPos += childTotalMainSizes[idx]! + gap;
+      doCrossAlign(c, idx);
     }
   } else if (justify === 'spaceBetween') {
     const spaceBetween =
       numProcessedChildren > 1
-        ? (containerSize - totalItemSize - (node.padding || 0) * 2) /
+        ? (containerSize - totalItemSize - nodePadding * 2) /
           (numProcessedChildren - 1)
         : 0;
-    currentPos = node.padding || 0;
-    for (const pc of processedChildren) {
-      pc.node[prop] = currentPos + pc.marginStart;
-      currentPos += pc.totalMainSizeOnAxis + spaceBetween;
-      doCrossAlign(pc);
+    currentPos = nodePadding;
+    for (let idx = 0; idx < numProcessedChildren; idx++) {
+      const c = children[processableChildrenIndices[idx]!] as ElementNode;
+      c[prop] = currentPos + childMarginStarts[idx]!;
+      currentPos += childTotalMainSizes[idx]! + spaceBetween;
+      doCrossAlign(c, idx);
     }
   } else if (justify === 'spaceAround') {
     const spaceAround =
       numProcessedChildren > 0
-        ? (containerSize - totalItemSize - (node.padding || 0) * 2) /
+        ? (containerSize - totalItemSize - nodePadding * 2) /
           numProcessedChildren
         : 0;
-    currentPos = (node.padding || 0) + spaceAround / 2;
-    for (const pc of processedChildren) {
-      pc.node[prop] = currentPos + pc.marginStart;
-      currentPos += pc.totalMainSizeOnAxis + spaceAround;
-      doCrossAlign(pc);
+    currentPos = nodePadding + spaceAround / 2;
+    for (let idx = 0; idx < numProcessedChildren; idx++) {
+      const c = children[processableChildrenIndices[idx]!] as ElementNode;
+      c[prop] = currentPos + childMarginStarts[idx]!;
+      currentPos += childTotalMainSizes[idx]! + spaceAround;
+      doCrossAlign(c, idx);
     }
   } else if (justify === 'spaceEvenly') {
     const spaceEvenly =
-      (containerSize - totalItemSize - (node.padding || 0) * 2) /
+      (containerSize - totalItemSize - nodePadding * 2) /
       (numProcessedChildren + 1);
-    currentPos = spaceEvenly + (node.padding || 0);
-    for (const pc of processedChildren) {
-      pc.node[prop] = currentPos + pc.marginStart;
-      currentPos += pc.totalMainSizeOnAxis + spaceEvenly;
-      doCrossAlign(pc);
+    currentPos = spaceEvenly + nodePadding;
+    for (let idx = 0; idx < numProcessedChildren; idx++) {
+      const c = children[processableChildrenIndices[idx]!] as ElementNode;
+      c[prop] = currentPos + childMarginStarts[idx]!;
+      currentPos += childTotalMainSizes[idx]! + spaceEvenly;
+      doCrossAlign(c, idx);
     }
   }