@grafana/scenes 0.1.0 → 0.2.0

package/dist/esm/components/layout/{SceneGridLayout.js → grid/SceneGridLayout.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactGridLayout from 'react-grid-layout';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { SceneObjectBase } from '../../core/SceneObjectBase.js';
-import { DEFAULT_PANEL_SPAN, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants.js';
+import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
+import { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT, DEFAULT_PANEL_SPAN } from './constants.js';
 import { SceneGridRow } from './SceneGridRow.js';
 
 var __defProp = Object.defineProperty;
@@ -24,11 +24,10 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-class SceneGridLayout extends SceneObjectBase {
+const _SceneGridLayout = class extends SceneObjectBase {
   constructor(state) {
     super(__spreadProps(__spreadValues({}, state), {
       isDraggable: true,
-      placement: state.placement,
       children: sortChildrenByPosition(state.children)
     }));
     this._skipOnLayoutChange = false;
@@ -45,10 +44,8 @@ class SceneGridLayout extends SceneObjectBase {
           width: item.w,
           height: item.h
         };
-        if (!isItemSizeEqual(child.state.placement, nextSize)) {
-          child.setState({
-            placement: __spreadValues(__spreadValues({}, child.state.placement), nextSize)
-          });
+        if (!isItemSizeEqual(child.state, nextSize)) {
+          child.setState(__spreadValues({}, nextSize));
         }
       }
       this.setState({ children: sortChildrenByPosition(this.state.children) });
@@ -56,10 +53,8 @@ class SceneGridLayout extends SceneObjectBase {
     this.onResizeStop = (_, o, n) => {
       const child = this.getSceneLayoutChild(n.i);
       child.setState({
-        placement: __spreadProps(__spreadValues({}, child.state.placement), {
-          width: n.w,
-          height: n.h
-        })
+        width: n.w,
+        height: n.h
       });
     };
     this.onDragStop = (gridLayout, o, updatedItem) => {
@@ -68,13 +63,11 @@ class SceneGridLayout extends SceneObjectBase {
       for (let i = 0; i < gridLayout.length; i++) {
         const gridItem = gridLayout[i];
         const child = this.getSceneLayoutChild(gridItem.i);
-        const childSize = child.state.placement;
+        const childSize = child.state;
         if ((childSize == null ? void 0 : childSize.x) !== gridItem.x || (childSize == null ? void 0 : childSize.y) !== gridItem.y) {
           child.setState({
-            placement: __spreadProps(__spreadValues({}, child.state.placement), {
-              x: gridItem.x,
-              y: gridItem.y
-            })
+            x: gridItem.x,
+            y: gridItem.y
           });
         }
       }
@@ -99,7 +92,7 @@ class SceneGridLayout extends SceneObjectBase {
     return `grid-drag-cancel`;
   }
   toggleRow(row) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b;
     const isCollapsed = row.state.isCollapsed;
     if (!isCollapsed) {
       row.setState({ isCollapsed: true });
@@ -112,27 +105,27 @@ class SceneGridLayout extends SceneObjectBase {
       this.setState({});
       return;
     }
-    const rowY = (_a = row.state.placement) == null ? void 0 : _a.y;
-    const firstPanelYPos = (_c = (_b = rowChildren[0].state.placement) == null ? void 0 : _b.y) != null ? _c : rowY;
+    const rowY = row.state.y;
+    const firstPanelYPos = (_a = rowChildren[0].state.y) != null ? _a : rowY;
     const yDiff = firstPanelYPos - (rowY + 1);
     let yMax = rowY;
     for (const panel of rowChildren) {
-      const newSize = __spreadValues({}, panel.state.placement);
-      newSize.y = (_d = newSize.y) != null ? _d : rowY;
+      const newSize = __spreadValues({}, panel.state);
+      newSize.y = (_b = newSize.y) != null ? _b : rowY;
       newSize.y -= yDiff;
-      if (newSize.y > ((_e = panel.state.placement) == null ? void 0 : _e.y)) {
-        panel.setState({ placement: newSize });
+      if (newSize.y > panel.state.y) {
+        panel.setState(newSize);
       }
       yMax = Math.max(yMax, Number(newSize.y) + Number(newSize.height));
     }
     const pushDownAmount = yMax - rowY - 1;
     for (const child of this.state.children) {
-      if (((_f = child.state.placement) == null ? void 0 : _f.y) > rowY) {
+      if (child.state.y > rowY) {
         this.pushChildDown(child, pushDownAmount);
       }
-      if (child instanceof SceneGridRow && child !== row) {
+      if (isSceneGridRow(child) && child !== row) {
         for (const rowChild of child.state.children) {
-          if (((_g = rowChild.state.placement) == null ? void 0 : _g.y) > rowY) {
+          if (rowChild.state.y > rowY) {
             this.pushChildDown(rowChild, pushDownAmount);
           }
         }
@@ -157,11 +150,8 @@ class SceneGridLayout extends SceneObjectBase {
     throw new Error("Scene layout child not found for GridItem");
   }
   pushChildDown(child, amount) {
-    var _a;
     child.setState({
-      placement: __spreadProps(__spreadValues({}, child.state.placement), {
-        y: ((_a = child.state.placement) == null ? void 0 : _a.y) + amount
-      })
+      y: child.state.y + amount
     });
   }
   findGridItemSceneParent(layout, startAt) {
@@ -193,21 +183,23 @@ class SceneGridLayout extends SceneObjectBase {
         rootChildren = [...rootChildren, newChild];
       }
     } else {
-      rootChildren = rootChildren.filter((c) => c.state.key !== child.state.key);
-      const targetRow = target.clone({ children: [...target.state.children, newChild] });
-      rootChildren = rootChildren.map((c) => c === target ? targetRow : c);
+      if (!(target instanceof _SceneGridLayout)) {
+        rootChildren = rootChildren.filter((c) => c.state.key !== child.state.key);
+        const targetRow = target.clone({ children: [...target.state.children, newChild] });
+        rootChildren = rootChildren.map((c) => c === target ? targetRow : c);
+      }
     }
     return rootChildren;
   }
   toGridCell(child) {
-    var _a, _b, _c, _d;
-    const size = child.state.placement;
+    var _a, _b;
+    const size = child.state;
     let x = (_a = size.x) != null ? _a : 0;
     let y = (_b = size.y) != null ? _b : 0;
     const w = Number.isInteger(Number(size.width)) ? Number(size.width) : DEFAULT_PANEL_SPAN;
     const h = Number.isInteger(Number(size.height)) ? Number(size.height) : DEFAULT_PANEL_SPAN;
-    let isDraggable = Boolean((_c = child.state.placement) == null ? void 0 : _c.isDraggable);
-    let isResizable = Boolean((_d = child.state.placement) == null ? void 0 : _d.isResizable);
+    let isDraggable = Boolean(child.state.isDraggable);
+    let isResizable = Boolean(child.state.isResizable);
     if (child instanceof SceneGridRow) {
       isDraggable = child.state.isCollapsed ? true : false;
       isResizable = false;
@@ -232,7 +224,8 @@ class SceneGridLayout extends SceneObjectBase {
     this._skipOnLayoutChange = false;
     return cells;
   }
-}
+};
+let SceneGridLayout = _SceneGridLayout;
 SceneGridLayout.Component = SceneGridLayoutRenderer;
 function SceneGridLayoutRenderer({ model }) {
   const { children } = model.useState();
@@ -274,9 +267,25 @@ function SceneGridLayoutRenderer({ model }) {
     })));
   });
 }
+class SceneGridItem extends SceneObjectBase {
+}
+SceneGridItem.Component = SceneGridItemRenderer;
+function SceneGridItemRenderer({ model }) {
+  const { body } = model.useState();
+  const parent = model.parent;
+  if (parent && !isSceneGridLayout(parent) && !isSceneGridRow(parent)) {
+    throw new Error("SceneGridItem must be a child of SceneGridLayout or SceneGridRow");
+  }
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(body.Component, {
+    model: body
+  });
+}
 function validateChildrenSize(children) {
   if (children.find(
-    (c) => !c.state.placement || c.state.placement.height === void 0 || c.state.placement.width === void 0 || c.state.placement.x === void 0 || c.state.placement.y === void 0
+    (c) => c.state.height === void 0 || c.state.width === void 0 || c.state.x === void 0 || c.state.y === void 0
   )) {
     throw new Error("All children must have a size specified");
   }
@@ -286,13 +295,18 @@ function isItemSizeEqual(a, b) {
 }
 function sortChildrenByPosition(children) {
   return [...children].sort((a, b) => {
-    var _a, _b, _c, _d;
-    return ((_a = a.state.placement) == null ? void 0 : _a.y) - ((_b = b.state.placement) == null ? void 0 : _b.y) || ((_c = a.state.placement) == null ? void 0 : _c.x) - ((_d = b.state.placement) == null ? void 0 : _d.x);
+    return a.state.y - b.state.y || a.state.x - b.state.x;
   });
 }
 function sortGridLayout(layout) {
   return [...layout].sort((a, b) => a.y - b.y || a.x - b.x);
 }
+function isSceneGridRow(child) {
+  return child instanceof SceneGridRow;
+}
+function isSceneGridLayout(child) {
+  return child instanceof SceneGridLayout;
+}
 
-export { SceneGridLayout };
+export { SceneGridItem, SceneGridLayout };
 //# sourceMappingURL=SceneGridLayout.js.map

package/dist/esm/components/layout/grid/SceneGridLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneGridLayout.js","sources":["../../../../../src/components/layout/grid/SceneGridLayout.tsx"],"sourcesContent":["import React from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport {\n  SceneComponentProps,\n  SceneLayout,\n  SceneLayoutItemState,\n  SceneObject,\n  SceneObjectStatePlain,\n} from '../../../core/types';\nimport { DEFAULT_PANEL_SPAN, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from './constants';\n\nimport { SceneGridRow } from './SceneGridRow';\nimport { SceneGridItemLike, SceneGridItemPlacement, SceneGridItemStateLike } from './types';\n\ninterface SceneGridLayoutState extends SceneObjectStatePlain {\n  /**\n   * Turn on or off dragging for all items. Indiviadual items can still disabled via isDraggable property\n   **/\n  isDraggable?: boolean;\n  children: SceneGridItemLike[];\n}\n\nexport class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> implements SceneLayout {\n  public static Component = SceneGridLayoutRenderer;\n\n  private _skipOnLayoutChange = false;\n\n  public constructor(state: SceneGridLayoutState) {\n    super({\n      ...state,\n      isDraggable: true,\n      children: sortChildrenByPosition(state.children),\n    });\n  }\n\n  /**\n   * SceneLayout interface. Used for example by VizPanelRenderer\n   */\n  public isDraggable(): boolean {\n    return this.state.isDraggable ?? false;\n  }\n\n  public getDragClass() {\n    return `grid-drag-handle-${this.state.key}`;\n  }\n\n  public getDragClassCancel() {\n    return `grid-drag-cancel`;\n  }\n\n  public toggleRow(row: SceneGridRow) {\n    const isCollapsed = row.state.isCollapsed;\n\n    if (!isCollapsed) {\n      row.setState({ isCollapsed: true });\n      // To force re-render\n      this.setState({});\n      return;\n    }\n\n    const rowChildren = row.state.children;\n\n    if (rowChildren.length === 0) {\n      row.setState({ isCollapsed: false });\n      this.setState({});\n      return;\n    }\n\n    // Ok we are expanding row. We need to update row children y pos (incase they are incorrect) and push items below down\n    // Code copied from DashboardModel toggleRow()\n\n    const rowY = row.state.y!;\n    const firstPanelYPos = rowChildren[0].state.y ?? rowY;\n    const yDiff = firstPanelYPos - (rowY + 1);\n\n    // y max will represent the bottom y pos after all panels have been added\n    // needed to know home much panels below should be pushed down\n    let yMax = rowY;\n\n    for (const panel of rowChildren) {\n      // set the y gridPos if it wasn't already set\n      const newSize = { ...panel.state };\n      newSize.y = newSize.y ?? rowY;\n      // make sure y is adjusted (in case row moved while collapsed)\n      newSize.y -= yDiff;\n      if (newSize.y! > panel.state.y!) {\n        panel.setState(newSize);\n      }\n      // update insert post and y max\n      yMax = Math.max(yMax, Number(newSize.y!) + Number(newSize.height!));\n    }\n\n    const pushDownAmount = yMax - rowY - 1;\n\n    // push panels below down\n    for (const child of this.state.children) {\n      if (child.state.y! > rowY) {\n        this.pushChildDown(child, pushDownAmount);\n      }\n\n      if (isSceneGridRow(child) && child !== row) {\n        for (const rowChild of child.state.children) {\n          if (rowChild.state.y! > rowY) {\n            this.pushChildDown(rowChild, pushDownAmount);\n          }\n        }\n      }\n    }\n\n    row.setState({ isCollapsed: false });\n    // Trigger re-render\n    this.setState({});\n  }\n\n  public onLayoutChange = (layout: ReactGridLayout.Layout[]) => {\n    if (this._skipOnLayoutChange) {\n      // Layout has been updated by other RTL handler already\n      this._skipOnLayoutChange = false;\n      return;\n    }\n\n    for (const item of layout) {\n      const child = this.getSceneLayoutChild(item.i);\n\n      const nextSize: SceneGridItemPlacement = {\n        x: item.x,\n        y: item.y,\n        width: item.w,\n        height: item.h,\n      };\n\n      if (!isItemSizeEqual(child.state, nextSize)) {\n        child.setState({\n          ...nextSize,\n        });\n      }\n    }\n\n    this.setState({ children: sortChildrenByPosition(this.state.children) });\n  };\n\n  /**\n   * Will also scan row children and return child of the row\n   */\n  public getSceneLayoutChild(key: string) {\n    for (const child of this.state.children) {\n      if (child.state.key === key) {\n        return child;\n      }\n\n      if (child instanceof SceneGridRow) {\n        for (const rowChild of child.state.children) {\n          if (rowChild.state.key === key) {\n            return rowChild;\n          }\n        }\n      }\n    }\n\n    throw new Error('Scene layout child not found for GridItem');\n  }\n\n  public onResizeStop: ReactGridLayout.ItemCallback = (_, o, n) => {\n    const child = this.getSceneLayoutChild(n.i);\n    child.setState({\n      width: n.w,\n      height: n.h,\n    });\n  };\n\n  private pushChildDown(child: SceneGridItemLike, amount: number) {\n    child.setState({\n      y: child.state.y! + amount,\n    });\n  }\n\n  /**\n   *  We assume the layout array is storted according to y pos, and walk upwards until we find a row.\n   *  If it is collapsed there is no row to add it to. The default is then to return the SceneGridLayout itself\n   */\n  private findGridItemSceneParent(layout: ReactGridLayout.Layout[], startAt: number): SceneGridRow | SceneGridLayout {\n    for (let i = startAt; i >= 0; i--) {\n      const gridItem = layout[i];\n      const sceneChild = this.getSceneLayoutChild(gridItem.i);\n\n      if (sceneChild instanceof SceneGridRow) {\n        // the closest row is collapsed return null\n        if (sceneChild.state.isCollapsed) {\n          return this;\n        }\n\n        return sceneChild;\n      }\n    }\n\n    return this;\n  }\n\n  /**\n   * This likely needs a slighltly different approach. Where we clone or deactivate or and re-activate the moved child\n   */\n  public moveChildTo(child: SceneGridItemLike, target: SceneGridLayout | SceneGridRow) {\n    const currentParent = child.parent!;\n    let rootChildren = this.state.children;\n\n    const newChild = child.clone({ key: child.state.key });\n\n    // Remove from current parent row\n    if (currentParent instanceof SceneGridRow) {\n      const newRow = currentParent.clone({\n        children: currentParent.state.children.filter((c) => c.state.key !== child.state.key),\n      });\n\n      // new children with new row\n      rootChildren = rootChildren.map((c) => (c === currentParent ? newRow : c));\n\n      // if target is also a row\n      if (target instanceof SceneGridRow) {\n        const targetRow = target.clone({ children: [...target.state.children, newChild] });\n        rootChildren = rootChildren.map((c) => (c === target ? targetRow : c));\n      } else {\n        // target is the main grid\n        rootChildren = [...rootChildren, newChild];\n      }\n    } else {\n      if (!(target instanceof SceneGridLayout)) {\n        // current parent is the main grid remove it from there\n        rootChildren = rootChildren.filter((c) => c.state.key !== child.state.key);\n        // Clone the target row and add the child\n        const targetRow = target.clone({ children: [...target.state.children, newChild] });\n        // Replace row with new row\n        rootChildren = rootChildren.map((c) => (c === target ? targetRow : c));\n      }\n    }\n\n    return rootChildren;\n  }\n\n  public onDragStop: ReactGridLayout.ItemCallback = (gridLayout, o, updatedItem) => {\n    const sceneChild = this.getSceneLayoutChild(updatedItem.i)!;\n\n    // Need to resort the grid layout based on new position (needed to to find the new parent)\n    gridLayout = sortGridLayout(gridLayout);\n\n    // Update children positions if they have changed\n    for (let i = 0; i < gridLayout.length; i++) {\n      const gridItem = gridLayout[i];\n      const child = this.getSceneLayoutChild(gridItem.i)!;\n      const childSize = child.state;\n\n      if (childSize?.x !== gridItem.x || childSize?.y !== gridItem.y) {\n        child.setState({\n          x: gridItem.x,\n          y: gridItem.y,\n        });\n      }\n    }\n\n    // Update the parent if the child if it has moved to a row or back to the grid\n    const indexOfUpdatedItem = gridLayout.findIndex((item) => item.i === updatedItem.i);\n    const newParent = this.findGridItemSceneParent(gridLayout, indexOfUpdatedItem - 1);\n    let newChildren = this.state.children;\n\n    if (newParent !== sceneChild.parent) {\n      newChildren = this.moveChildTo(sceneChild, newParent);\n    }\n\n    this.setState({ children: sortChildrenByPosition(newChildren) });\n    this._skipOnLayoutChange = true;\n  };\n\n  private toGridCell(child: SceneGridItemLike): ReactGridLayout.Layout {\n    const size = child.state;\n\n    let x = size.x ?? 0;\n    let y = size.y ?? 0;\n    const w = Number.isInteger(Number(size.width)) ? Number(size.width) : DEFAULT_PANEL_SPAN;\n    const h = Number.isInteger(Number(size.height)) ? Number(size.height) : DEFAULT_PANEL_SPAN;\n\n    let isDraggable = Boolean(child.state.isDraggable);\n    let isResizable = Boolean(child.state.isResizable);\n\n    if (child instanceof SceneGridRow) {\n      isDraggable = child.state.isCollapsed ? true : false;\n      isResizable = false;\n    }\n\n    return { i: child.state.key!, x, y, h, w, isResizable, isDraggable };\n  }\n\n  public buildGridLayout(width: number): ReactGridLayout.Layout[] {\n    let cells: ReactGridLayout.Layout[] = [];\n\n    for (const child of this.state.children) {\n      cells.push(this.toGridCell(child));\n\n      if (child instanceof SceneGridRow && !child.state.isCollapsed) {\n        for (const rowChild of child.state.children) {\n          cells.push(this.toGridCell(rowChild));\n        }\n      }\n    }\n\n    // Sort by position\n    cells = sortGridLayout(cells);\n\n    if (width < 768) {\n      // We should not persist the mobile layout\n      this._skipOnLayoutChange = true;\n      return cells.map((cell) => ({ ...cell, w: 24 }));\n    }\n\n    this._skipOnLayoutChange = false;\n\n    return cells;\n  }\n}\n\nfunction SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n  const { children } = model.useState();\n  validateChildrenSize(children);\n\n  return (\n    <AutoSizer disableHeight>\n      {({ width }) => {\n        if (width === 0) {\n          return null;\n        }\n\n        const layout = model.buildGridLayout(width);\n\n        return (\n          /**\n           * The children is using a width of 100% so we need to guarantee that it is wrapped\n           * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n           * has a width of 0 and will let its content overflow its div.\n           */\n          <div style={{ width: `${width}px`, height: '100%' }}>\n            <ReactGridLayout\n              width={width}\n              /*\n                  Disable draggable if mobile device, solving an issue with unintentionally\n                  moving panels. https://github.com/grafana/grafana/issues/18497\n                  theme.breakpoints.md = 769\n                */\n              isDraggable={width > 768}\n              isResizable={false}\n              containerPadding={[0, 0]}\n              useCSSTransforms={false}\n              margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n              cols={GRID_COLUMN_COUNT}\n              rowHeight={GRID_CELL_HEIGHT}\n              draggableHandle={`.grid-drag-handle-${model.state.key}`}\n              draggableCancel=\".grid-drag-cancel\"\n              // @ts-ignore: ignoring for now until we make the size type numbers-only\n              layout={layout}\n              onDragStop={model.onDragStop}\n              onResizeStop={model.onResizeStop}\n              onLayoutChange={model.onLayoutChange}\n              isBounded={false}\n            >\n              {layout.map((gridItem) => {\n                const sceneChild = model.getSceneLayoutChild(gridItem.i)!;\n                return (\n                  <div key={sceneChild.state.key} style={{ display: 'flex' }}>\n                    <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />\n                  </div>\n                );\n              })}\n            </ReactGridLayout>\n          </div>\n        );\n      }}\n    </AutoSizer>\n  );\n}\n\ninterface SceneGridItemState extends SceneGridItemStateLike, SceneLayoutItemState {}\n\nexport class SceneGridItem extends SceneObjectBase<SceneGridItemState> implements SceneGridItemLike {\n  static Component = SceneGridItemRenderer;\n}\n\nfunction SceneGridItemRenderer({ model }: SceneComponentProps<SceneGridItem>) {\n  const { body } = model.useState();\n  const parent = model.parent;\n\n  if (parent && !isSceneGridLayout(parent) && !isSceneGridRow(parent)) {\n    throw new Error('SceneGridItem must be a child of SceneGridLayout or SceneGridRow');\n  }\n\n  if (!body) {\n    return null;\n  }\n\n  return <body.Component model={body} />;\n}\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n  if (\n    children.find(\n      (c) =>\n        c.state.height === undefined ||\n        c.state.width === undefined ||\n        c.state.x === undefined ||\n        c.state.y === undefined\n    )\n  ) {\n    throw new Error('All children must have a size specified');\n  }\n}\n\nfunction isItemSizeEqual(a: SceneGridItemPlacement, b: SceneGridItemPlacement) {\n  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;\n}\n\nfunction sortChildrenByPosition(children: SceneGridItemLike[]) {\n  return [...children].sort((a, b) => {\n    return a.state.y! - b.state.y! || a.state.x! - b.state.x!;\n  });\n}\n\nfunction sortGridLayout(layout: ReactGridLayout.Layout[]) {\n  return [...layout].sort((a, b) => a.y - b.y || a.x! - b.x);\n}\n\nfunction isSceneGridRow(child: SceneObject): child is SceneGridRow {\n  return child instanceof SceneGridRow;\n}\n\nfunction isSceneGridLayout(child: SceneObject): child is SceneGridLayout {\n  return child instanceof SceneGridLayout;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,gBAAA,GAAN,cAA8B,eAA6D,CAAA;AAAA,EAKzF,YAAY,KAA6B,EAAA;AAC9C,IAAA,KAAA,CAAM,iCACD,KADC,CAAA,EAAA;AAAA,MAEJ,WAAa,EAAA,IAAA;AAAA,MACb,QAAA,EAAU,sBAAuB,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,KAChD,CAAA,CAAA,CAAA;AAPH,IAAA,IAAA,CAAQ,mBAAsB,GAAA,KAAA,CAAA;AAyF9B,IAAO,IAAA,CAAA,cAAA,GAAiB,CAAC,MAAqC,KAAA;AAC5D,MAAA,IAAI,KAAK,mBAAqB,EAAA;AAE5B,QAAA,IAAA,CAAK,mBAAsB,GAAA,KAAA,CAAA;AAC3B,QAAA,OAAA;AAAA,OACF;AAEA,MAAA,KAAA,MAAW,QAAQ,MAAQ,EAAA;AACzB,QAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,mBAAoB,CAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AAE7C,QAAA,MAAM,QAAmC,GAAA;AAAA,UACvC,GAAG,IAAK,CAAA,CAAA;AAAA,UACR,GAAG,IAAK,CAAA,CAAA;AAAA,UACR,OAAO,IAAK,CAAA,CAAA;AAAA,UACZ,QAAQ,IAAK,CAAA,CAAA;AAAA,SACf,CAAA;AAEA,QAAA,IAAI,CAAC,eAAA,CAAgB,KAAM,CAAA,KAAA,EAAO,QAAQ,CAAG,EAAA;AAC3C,UAAM,KAAA,CAAA,QAAA,CAAS,mBACV,QACJ,CAAA,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAEA,MAAK,IAAA,CAAA,QAAA,CAAS,EAAE,QAAU,EAAA,sBAAA,CAAuB,KAAK,KAAM,CAAA,QAAQ,GAAG,CAAA,CAAA;AAAA,KACzE,CAAA;AAuBA,IAAA,IAAA,CAAO,YAA6C,GAAA,CAAC,CAAG,EAAA,CAAA,EAAG,CAAM,KAAA;AAC/D,MAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,mBAAoB,CAAA,CAAA,CAAE,CAAC,CAAA,CAAA;AAC1C,MAAA,KAAA,CAAM,QAAS,CAAA;AAAA,QACb,OAAO,CAAE,CAAA,CAAA;AAAA,QACT,QAAQ,CAAE,CAAA,CAAA;AAAA,OACX,CAAA,CAAA;AAAA,KACH,CAAA;AAsEA,IAAA,IAAA,CAAO,UAA2C,GAAA,CAAC,UAAY,EAAA,CAAA,EAAG,WAAgB,KAAA;AAChF,MAAA,MAAM,UAAa,GAAA,IAAA,CAAK,mBAAoB,CAAA,WAAA,CAAY,CAAC,CAAA,CAAA;AAGzD,MAAA,UAAA,GAAa,eAAe,UAAU,CAAA,CAAA;AAGtC,MAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAK,EAAA,EAAA;AAC1C,QAAA,MAAM,WAAW,UAAW,CAAA,CAAA,CAAA,CAAA;AAC5B,QAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,mBAAoB,CAAA,QAAA,CAAS,CAAC,CAAA,CAAA;AACjD,QAAA,MAAM,YAAY,KAAM,CAAA,KAAA,CAAA;AAExB,QAAA,IAAA,CAAI,uCAAW,CAAM,MAAA,QAAA,CAAS,MAAK,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,CAAA,MAAM,SAAS,CAAG,EAAA;AAC9D,UAAA,KAAA,CAAM,QAAS,CAAA;AAAA,YACb,GAAG,QAAS,CAAA,CAAA;AAAA,YACZ,GAAG,QAAS,CAAA,CAAA;AAAA,WACb,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAGA,MAAM,MAAA,kBAAA,GAAqB,WAAW,SAAU,CAAA,CAAC,SAAS,IAAK,CAAA,CAAA,KAAM,YAAY,CAAC,CAAA,CAAA;AAClF,MAAA,MAAM,SAAY,GAAA,IAAA,CAAK,uBAAwB,CAAA,UAAA,EAAY,qBAAqB,CAAC,CAAA,CAAA;AACjF,MAAI,IAAA,WAAA,GAAc,KAAK,KAAM,CAAA,QAAA,CAAA;AAE7B,MAAI,IAAA,SAAA,KAAc,WAAW,MAAQ,EAAA;AACnC,QAAc,WAAA,GAAA,IAAA,CAAK,WAAY,CAAA,UAAA,EAAY,SAAS,CAAA,CAAA;AAAA,OACtD;AAEA,MAAA,IAAA,CAAK,SAAS,EAAE,QAAA,EAAU,sBAAuB,CAAA,WAAW,GAAG,CAAA,CAAA;AAC/D,MAAA,IAAA,CAAK,mBAAsB,GAAA,IAAA,CAAA;AAAA,KAC7B,CAAA;AAAA,GA5OA;AAAA,EAKO,WAAuB,GAAA;AAzChC,IAAA,IAAA,EAAA,CAAA;AA0CI,IAAO,OAAA,CAAA,EAAA,GAAA,IAAA,CAAK,KAAM,CAAA,WAAA,KAAX,IAA0B,GAAA,EAAA,GAAA,KAAA,CAAA;AAAA,GACnC;AAAA,EAEO,YAAe,GAAA;AACpB,IAAO,OAAA,CAAA,iBAAA,EAAoB,KAAK,KAAM,CAAA,GAAA,CAAA,CAAA,CAAA;AAAA,GACxC;AAAA,EAEO,kBAAqB,GAAA;AAC1B,IAAO,OAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,GACT;AAAA,EAEO,UAAU,GAAmB,EAAA;AArDtC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAsDI,IAAM,MAAA,WAAA,GAAc,IAAI,KAAM,CAAA,WAAA,CAAA;AAE9B,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,GAAA,CAAI,QAAS,CAAA,EAAE,WAAa,EAAA,IAAA,EAAM,CAAA,CAAA;AAElC,MAAK,IAAA,CAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAChB,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,WAAA,GAAc,IAAI,KAAM,CAAA,QAAA,CAAA;AAE9B,IAAI,IAAA,WAAA,CAAY,WAAW,CAAG,EAAA;AAC5B,MAAA,GAAA,CAAI,QAAS,CAAA,EAAE,WAAa,EAAA,KAAA,EAAO,CAAA,CAAA;AACnC,MAAK,IAAA,CAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAChB,MAAA,OAAA;AAAA,KACF;AAKA,IAAM,MAAA,IAAA,GAAO,IAAI,KAAM,CAAA,CAAA,CAAA;AACvB,IAAA,MAAM,cAAiB,GAAA,CAAA,EAAA,GAAA,WAAA,CAAY,CAAG,CAAA,CAAA,KAAA,CAAM,MAArB,IAA0B,GAAA,EAAA,GAAA,IAAA,CAAA;AACjD,IAAM,MAAA,KAAA,GAAQ,kBAAkB,IAAO,GAAA,CAAA,CAAA,CAAA;AAIvC,IAAA,IAAI,IAAO,GAAA,IAAA,CAAA;AAEX,IAAA,KAAA,MAAW,SAAS,WAAa,EAAA;AAE/B,MAAM,MAAA,OAAA,GAAU,mBAAK,KAAM,CAAA,KAAA,CAAA,CAAA;AAC3B,MAAQ,OAAA,CAAA,CAAA,GAAA,CAAI,EAAQ,GAAA,OAAA,CAAA,CAAA,KAAR,IAAa,GAAA,EAAA,GAAA,IAAA,CAAA;AAEzB,MAAA,OAAA,CAAQ,CAAK,IAAA,KAAA,CAAA;AACb,MAAA,IAAI,OAAQ,CAAA,CAAA,GAAK,KAAM,CAAA,KAAA,CAAM,CAAI,EAAA;AAC/B,QAAA,KAAA,CAAM,SAAS,OAAO,CAAA,CAAA;AAAA,OACxB;AAEA,MAAO,IAAA,GAAA,IAAA,CAAK,GAAI,CAAA,IAAA,EAAM,MAAO,CAAA,OAAA,CAAQ,CAAE,CAAI,GAAA,MAAA,CAAO,OAAQ,CAAA,MAAO,CAAC,CAAA,CAAA;AAAA,KACpE;AAEA,IAAM,MAAA,cAAA,GAAiB,OAAO,IAAO,GAAA,CAAA,CAAA;AAGrC,IAAW,KAAA,MAAA,KAAA,IAAS,IAAK,CAAA,KAAA,CAAM,QAAU,EAAA;AACvC,MAAI,IAAA,KAAA,CAAM,KAAM,CAAA,CAAA,GAAK,IAAM,EAAA;AACzB,QAAK,IAAA,CAAA,aAAA,CAAc,OAAO,cAAc,CAAA,CAAA;AAAA,OAC1C;AAEA,MAAA,IAAI,cAAe,CAAA,KAAK,CAAK,IAAA,KAAA,KAAU,GAAK,EAAA;AAC1C,QAAW,KAAA,MAAA,QAAA,IAAY,KAAM,CAAA,KAAA,CAAM,QAAU,EAAA;AAC3C,UAAI,IAAA,QAAA,CAAS,KAAM,CAAA,CAAA,GAAK,IAAM,EAAA;AAC5B,YAAK,IAAA,CAAA,aAAA,CAAc,UAAU,cAAc,CAAA,CAAA;AAAA,WAC7C;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEA,IAAA,GAAA,CAAI,QAAS,CAAA,EAAE,WAAa,EAAA,KAAA,EAAO,CAAA,CAAA;AAEnC,IAAK,IAAA,CAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAAA,GAClB;AAAA,EAgCO,oBAAoB,GAAa,EAAA;AACtC,IAAW,KAAA,MAAA,KAAA,IAAS,IAAK,CAAA,KAAA,CAAM,QAAU,EAAA;AACvC,MAAI,IAAA,KAAA,CAAM,KAAM,CAAA,GAAA,KAAQ,GAAK,EAAA;AAC3B,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAEA,MAAA,IAAI,iBAAiB,YAAc,EAAA;AACjC,QAAW,KAAA,MAAA,QAAA,IAAY,KAAM,CAAA,KAAA,CAAM,QAAU,EAAA;AAC3C,UAAI,IAAA,QAAA,CAAS,KAAM,CAAA,GAAA,KAAQ,GAAK,EAAA;AAC9B,YAAO,OAAA,QAAA,CAAA;AAAA,WACT;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEA,IAAM,MAAA,IAAI,MAAM,2CAA2C,CAAA,CAAA;AAAA,GAC7D;AAAA,EAUQ,aAAA,CAAc,OAA0B,MAAgB,EAAA;AAC9D,IAAA,KAAA,CAAM,QAAS,CAAA;AAAA,MACb,CAAA,EAAG,KAAM,CAAA,KAAA,CAAM,CAAK,GAAA,MAAA;AAAA,KACrB,CAAA,CAAA;AAAA,GACH;AAAA,EAMQ,uBAAA,CAAwB,QAAkC,OAAiD,EAAA;AACjH,IAAA,KAAA,IAAS,CAAI,GAAA,OAAA,EAAS,CAAK,IAAA,CAAA,EAAG,CAAK,EAAA,EAAA;AACjC,MAAA,MAAM,WAAW,MAAO,CAAA,CAAA,CAAA,CAAA;AACxB,MAAA,MAAM,UAAa,GAAA,IAAA,CAAK,mBAAoB,CAAA,QAAA,CAAS,CAAC,CAAA,CAAA;AAEtD,MAAA,IAAI,sBAAsB,YAAc,EAAA;AAEtC,QAAI,IAAA,UAAA,CAAW,MAAM,WAAa,EAAA;AAChC,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AAEA,QAAO,OAAA,UAAA,CAAA;AAAA,OACT;AAAA,KACF;AAEA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAKO,WAAA,CAAY,OAA0B,MAAwC,EAAA;AACnF,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA;AAC5B,IAAI,IAAA,YAAA,GAAe,KAAK,KAAM,CAAA,QAAA,CAAA;AAE9B,IAAM,MAAA,QAAA,GAAW,MAAM,KAAM,CAAA,EAAE,KAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAGrD,IAAA,IAAI,yBAAyB,YAAc,EAAA;AACzC,MAAM,MAAA,MAAA,GAAS,cAAc,KAAM,CAAA;AAAA,QACjC,QAAU,EAAA,aAAA,CAAc,KAAM,CAAA,QAAA,CAAS,MAAO,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,KAAM,CAAA,GAAA,KAAQ,KAAM,CAAA,KAAA,CAAM,GAAG,CAAA;AAAA,OACrF,CAAA,CAAA;AAGD,MAAA,YAAA,GAAe,aAAa,GAAI,CAAA,CAAC,MAAO,CAAM,KAAA,aAAA,GAAgB,SAAS,CAAE,CAAA,CAAA;AAGzE,MAAA,IAAI,kBAAkB,YAAc,EAAA;AAClC,QAAA,MAAM,SAAY,GAAA,MAAA,CAAO,KAAM,CAAA,EAAE,QAAU,EAAA,CAAC,GAAG,MAAA,CAAO,KAAM,CAAA,QAAA,EAAU,QAAQ,CAAA,EAAG,CAAA,CAAA;AACjF,QAAA,YAAA,GAAe,aAAa,GAAI,CAAA,CAAC,MAAO,CAAM,KAAA,MAAA,GAAS,YAAY,CAAE,CAAA,CAAA;AAAA,OAChE,MAAA;AAEL,QAAe,YAAA,GAAA,CAAC,GAAG,YAAA,EAAc,QAAQ,CAAA,CAAA;AAAA,OAC3C;AAAA,KACK,MAAA;AACL,MAAI,IAAA,EAAE,kBAAkB,gBAAkB,CAAA,EAAA;AAExC,QAAe,YAAA,GAAA,YAAA,CAAa,OAAO,CAAC,CAAA,KAAM,EAAE,KAAM,CAAA,GAAA,KAAQ,KAAM,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAEzE,QAAA,MAAM,SAAY,GAAA,MAAA,CAAO,KAAM,CAAA,EAAE,QAAU,EAAA,CAAC,GAAG,MAAA,CAAO,KAAM,CAAA,QAAA,EAAU,QAAQ,CAAA,EAAG,CAAA,CAAA;AAEjF,QAAA,YAAA,GAAe,aAAa,GAAI,CAAA,CAAC,MAAO,CAAM,KAAA,MAAA,GAAS,YAAY,CAAE,CAAA,CAAA;AAAA,OACvE;AAAA,KACF;AAEA,IAAO,OAAA,YAAA,CAAA;AAAA,GACT;AAAA,EAmCQ,WAAW,KAAkD,EAAA;AAlRvE,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAmRI,IAAA,MAAM,OAAO,KAAM,CAAA,KAAA,CAAA;AAEnB,IAAI,IAAA,CAAA,GAAA,CAAI,EAAK,GAAA,IAAA,CAAA,CAAA,KAAL,IAAU,GAAA,EAAA,GAAA,CAAA,CAAA;AAClB,IAAI,IAAA,CAAA,GAAA,CAAI,EAAK,GAAA,IAAA,CAAA,CAAA,KAAL,IAAU,GAAA,EAAA,GAAA,CAAA,CAAA;AAClB,IAAM,MAAA,CAAA,GAAI,MAAO,CAAA,SAAA,CAAU,MAAO,CAAA,IAAA,CAAK,KAAK,CAAC,CAAI,GAAA,MAAA,CAAO,IAAK,CAAA,KAAK,CAAI,GAAA,kBAAA,CAAA;AACtE,IAAM,MAAA,CAAA,GAAI,MAAO,CAAA,SAAA,CAAU,MAAO,CAAA,IAAA,CAAK,MAAM,CAAC,CAAI,GAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAI,GAAA,kBAAA,CAAA;AAExE,IAAA,IAAI,WAAc,GAAA,OAAA,CAAQ,KAAM,CAAA,KAAA,CAAM,WAAW,CAAA,CAAA;AACjD,IAAA,IAAI,WAAc,GAAA,OAAA,CAAQ,KAAM,CAAA,KAAA,CAAM,WAAW,CAAA,CAAA;AAEjD,IAAA,IAAI,iBAAiB,YAAc,EAAA;AACjC,MAAc,WAAA,GAAA,KAAA,CAAM,KAAM,CAAA,WAAA,GAAc,IAAO,GAAA,KAAA,CAAA;AAC/C,MAAc,WAAA,GAAA,KAAA,CAAA;AAAA,KAChB;AAEA,IAAO,OAAA,EAAE,CAAG,EAAA,KAAA,CAAM,KAAM,CAAA,GAAA,EAAM,GAAG,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,WAAA,EAAa,WAAY,EAAA,CAAA;AAAA,GACrE;AAAA,EAEO,gBAAgB,KAAyC,EAAA;AAC9D,IAAA,IAAI,QAAkC,EAAC,CAAA;AAEvC,IAAW,KAAA,MAAA,KAAA,IAAS,IAAK,CAAA,KAAA,CAAM,QAAU,EAAA;AACvC,MAAA,KAAA,CAAM,IAAK,CAAA,IAAA,CAAK,UAAW,CAAA,KAAK,CAAC,CAAA,CAAA;AAEjC,MAAA,IAAI,KAAiB,YAAA,YAAA,IAAgB,CAAC,KAAA,CAAM,MAAM,WAAa,EAAA;AAC7D,QAAW,KAAA,MAAA,QAAA,IAAY,KAAM,CAAA,KAAA,CAAM,QAAU,EAAA;AAC3C,UAAA,KAAA,CAAM,IAAK,CAAA,IAAA,CAAK,UAAW,CAAA,QAAQ,CAAC,CAAA,CAAA;AAAA,SACtC;AAAA,OACF;AAAA,KACF;AAGA,IAAA,KAAA,GAAQ,eAAe,KAAK,CAAA,CAAA;AAE5B,IAAA,IAAI,QAAQ,GAAK,EAAA;AAEf,MAAA,IAAA,CAAK,mBAAsB,GAAA,IAAA,CAAA;AAC3B,MAAO,OAAA,KAAA,CAAM,IAAI,CAAC,IAAA,KAAU,iCAAK,IAAL,CAAA,EAAA,EAAW,CAAG,EAAA,EAAA,EAAK,CAAA,CAAA,CAAA;AAAA,KACjD;AAEA,IAAA,IAAA,CAAK,mBAAsB,GAAA,KAAA,CAAA;AAE3B,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAtSO,IAAM,eAAN,GAAA,iBAAA;AAAM,eAAA,CACG,SAAY,GAAA,uBAAA,CAAA;AAuS5B,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AAChF,EAAA,MAAM,EAAE,QAAA,EAAa,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACpC,EAAA,oBAAA,CAAqB,QAAQ,CAAA,CAAA;AAE7B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAU,aAAa,EAAA,IAAA;AAAA,GACrB,EAAA,CAAC,EAAE,KAAA,EAAY,KAAA;AACd,IAAA,IAAI,UAAU,CAAG,EAAA;AACf,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,MAAA,GAAS,KAAM,CAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAE1C,IAAA,uBAMG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,KAAA,CAAA,EAAA,CAAA,EAAW,QAAQ,MAAO,EAAA;AAAA,KAAA,kBAC/C,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,KAAA;AAAA,MAMA,aAAa,KAAQ,GAAA,GAAA;AAAA,MACrB,WAAa,EAAA,KAAA;AAAA,MACb,gBAAA,EAAkB,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,MACvB,gBAAkB,EAAA,KAAA;AAAA,MAClB,MAAA,EAAQ,CAAC,iBAAA,EAAmB,iBAAiB,CAAA;AAAA,MAC7C,IAAM,EAAA,iBAAA;AAAA,MACN,SAAW,EAAA,gBAAA;AAAA,MACX,eAAA,EAAiB,CAAqB,kBAAA,EAAA,KAAA,CAAM,KAAM,CAAA,GAAA,CAAA,CAAA;AAAA,MAClD,eAAgB,EAAA,mBAAA;AAAA,MAEhB,MAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,gBAAgB,KAAM,CAAA,cAAA;AAAA,MACtB,SAAW,EAAA,KAAA;AAAA,KAEV,EAAA,MAAA,CAAO,GAAI,CAAA,CAAC,QAAa,KAAA;AACxB,MAAA,MAAM,UAAa,GAAA,KAAA,CAAM,mBAAoB,CAAA,QAAA,CAAS,CAAC,CAAA,CAAA;AACvD,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,QAAK,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,OACvD,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,SAAX,EAAA;AAAA,QAAqB,KAAO,EAAA,UAAA;AAAA,QAAY,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,OAAK,CACtE,CAAA,CAAA;AAAA,KAEH,CACH,CACF,CAAA,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ,CAAA;AAIO,MAAM,sBAAsB,eAAiE,CAAA;AAEpG,CAAA;AAFa,aAAA,CACJ,SAAY,GAAA,qBAAA,CAAA;AAGrB,SAAS,qBAAA,CAAsB,EAAE,KAAA,EAA6C,EAAA;AAC5E,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAChC,EAAA,MAAM,SAAS,KAAM,CAAA,MAAA,CAAA;AAErB,EAAI,IAAA,MAAA,IAAU,CAAC,iBAAkB,CAAA,MAAM,KAAK,CAAC,cAAA,CAAe,MAAM,CAAG,EAAA;AACnE,IAAM,MAAA,IAAI,MAAM,kEAAkE,CAAA,CAAA;AAAA,GACpF;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,qBAAqB,QAA+B,EAAA;AAC3D,EAAA,IACE,QAAS,CAAA,IAAA;AAAA,IACP,CAAC,CACC,KAAA,CAAA,CAAE,KAAM,CAAA,MAAA,KAAW,UACnB,CAAE,CAAA,KAAA,CAAM,KAAU,KAAA,KAAA,CAAA,IAClB,EAAE,KAAM,CAAA,CAAA,KAAM,KACd,CAAA,IAAA,CAAA,CAAE,MAAM,CAAM,KAAA,KAAA,CAAA;AAAA,GAElB,EAAA;AACA,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAEA,SAAS,eAAA,CAAgB,GAA2B,CAA2B,EAAA;AAC7E,EAAA,OAAO,CAAE,CAAA,CAAA,KAAM,CAAE,CAAA,CAAA,IAAK,EAAE,CAAM,KAAA,CAAA,CAAE,CAAK,IAAA,CAAA,CAAE,KAAU,KAAA,CAAA,CAAE,KAAS,IAAA,CAAA,CAAE,WAAW,CAAE,CAAA,MAAA,CAAA;AAC7E,CAAA;AAEA,SAAS,uBAAuB,QAA+B,EAAA;AAC7D,EAAA,OAAO,CAAC,GAAG,QAAQ,EAAE,IAAK,CAAA,CAAC,GAAG,CAAM,KAAA;AAClC,IAAO,OAAA,CAAA,CAAE,KAAM,CAAA,CAAA,GAAK,CAAE,CAAA,KAAA,CAAM,KAAM,CAAE,CAAA,KAAA,CAAM,CAAK,GAAA,CAAA,CAAE,KAAM,CAAA,CAAA,CAAA;AAAA,GACxD,CAAA,CAAA;AACH,CAAA;AAEA,SAAS,eAAe,MAAkC,EAAA;AACxD,EAAA,OAAO,CAAC,GAAG,MAAM,CAAA,CAAE,KAAK,CAAC,CAAA,EAAG,CAAM,KAAA,CAAA,CAAE,IAAI,CAAE,CAAA,CAAA,IAAK,CAAE,CAAA,CAAA,GAAK,EAAE,CAAC,CAAA,CAAA;AAC3D,CAAA;AAEA,SAAS,eAAe,KAA2C,EAAA;AACjE,EAAA,OAAO,KAAiB,YAAA,YAAA,CAAA;AAC1B,CAAA;AAEA,SAAS,kBAAkB,KAA8C,EAAA;AACvE,EAAA,OAAO,KAAiB,YAAA,eAAA,CAAA;AAC1B;;;;"}

package/dist/esm/components/layout/{SceneGridRow.js → grid/SceneGridRow.js}

@@ -1,9 +1,9 @@
 import { cx, css } from '@emotion/css';
 import React from 'react';
 import { useStyles2, Icon } from '@grafana/ui';
-import { SceneObjectBase } from '../../core/SceneObjectBase.js';
-import { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig.js';
-import { SceneDragHandle } from '../SceneDragHandle.js';
+import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
+import { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig.js';
+import { SceneDragHandle } from '../../SceneDragHandle.js';
 import { SceneGridLayout } from './SceneGridLayout.js';
 import { GRID_COLUMN_COUNT } from './constants.js';
 
@@ -29,16 +29,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 class SceneGridRow extends SceneObjectBase {
   constructor(state) {
     super(__spreadProps(__spreadValues({
-      isCollapsible: true
+      children: state.children || [],
+      isCollapsible: state.isCollapsible || true,
+      title: state.title || "",
+      isDraggable: state.isDraggable || true,
+      isResizable: state.isResizable || false
     }, state), {
-      placement: __spreadProps(__spreadValues({
-        isResizable: false,
-        isDraggable: true
-      }, state.placement), {
-        x: 0,
-        height: 1,
-        width: GRID_COLUMN_COUNT
-      })
+      x: 0,
+      height: 1,
+      width: GRID_COLUMN_COUNT
     }));
     this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: ["rowc"] });
     this.onCollapseToggle = () => {
@@ -68,7 +67,7 @@ class SceneGridRow extends SceneObjectBase {
 SceneGridRow.Component = SceneGridRowRenderer;
 function SceneGridRowRenderer({ model }) {
   const styles = useStyles2(getSceneGridRowStyles);
-  const { isCollapsible, isCollapsed, title, placement } = model.useState();
+  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();
   const dragHandle = /* @__PURE__ */ React.createElement(SceneDragHandle, {
     dragClass: model.getGridLayout().getDragClass()
   });
@@ -83,7 +82,7 @@ function SceneGridRowRenderer({ model }) {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React.createElement("span", {
     className: styles.rowTitle
-  }, title)), (placement == null ? void 0 : placement.isDraggable) && isCollapsed && /* @__PURE__ */ React.createElement("div", null, dragHandle)));
+  }, title)), isDraggable && isCollapsed && /* @__PURE__ */ React.createElement("div", null, dragHandle)));
 }
 const getSceneGridRowStyles = (theme) => {
   return {

package/dist/esm/components/layout/grid/SceneGridRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig';\nimport { SceneDragHandle } from '../../SceneDragHandle';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['rowc'] });\n\n  public constructor(state: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      isDraggable: state.isDraggable || true,\n      isResizable: state.isResizable || false,\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    const isCollapsed = values.rowc === '1';\n    if (isCollapsed !== this.state.isCollapsed) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();\n  const dragHandle = <SceneDragHandle dragClass={model.getGridLayout().getDragClass()} />;\n\n  return (\n    <div className={styles.row}>\n      <div className={cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)}>\n        <button onClick={model.onCollapseToggle} className={styles.rowTitleButton}>\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle}>{title}</span>\n        </button>\n        {isDraggable && isCollapsed && <div>{dragHandle}</div>}\n      </div>\n    </div>\n  );\n}\n\nconst getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '100%',\n      position: 'relative',\n      zIndex: 0,\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n    rowHeader: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '8px',\n      border: `1px solid transparent`,\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      gap: theme.spacing(1),\n    }),\n    rowHeaderCollapsed: css({\n      marginBottom: '0px',\n      background: theme.colors.background.primary,\n      border: `1px solid ${theme.colors.border.weak}`,\n      borderRadius: theme.shape.borderRadius(1),\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/layout/grid/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/components/layout/grid/constants.ts"],"sourcesContent":["export const DEFAULT_PANEL_SPAN = 4;\nexport const GRID_CELL_HEIGHT = 30;\nexport const GRID_CELL_VMARGIN = 8;\nexport const GRID_COLUMN_COUNT = 24;\n"],"names":[],"mappings":"AAAO,MAAM,kBAAqB,GAAA,EAAA;AAC3B,MAAM,gBAAmB,GAAA,GAAA;AACzB,MAAM,iBAAoB,GAAA,EAAA;AAC1B,MAAM,iBAAoB,GAAA;;;;"}

package/dist/esm/core/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/core/types.ts"],"sourcesContent":["import React from 'react';\nimport { MonoTypeOperatorFunction, Unsubscribable } from 'rxjs';\n\nimport {\n  BusEvent,\n  BusEventHandler,\n  BusEventType,\n  DataFrame,\n  DataTransformContext,\n  PanelData,\n  TimeRange,\n  TimeZone,\n} from '@grafana/data';\n\nimport { SceneVariableDependencyConfigLike, SceneVariables } from '../variables/types';\n\nexport interface SceneObjectStatePlain {\n  key?: string;\n  $timeRange?: SceneTimeRangeLike;\n  $data?: SceneDataProvider;\n  $variables?: SceneVariables;\n}\n\nexport interface SceneLayoutChildState extends SceneObjectStatePlain {\n  placement?: SceneLayoutChildOptions;\n}\n\nexport type SceneObjectState = SceneObjectStatePlain | SceneLayoutState | SceneLayoutChildState;\n\nexport interface SceneLayoutChildOptions {\n  width?: number | string;\n  height?: number | string;\n  xSizing?: 'fill' | 'content';\n  ySizing?: 'fill' | 'content';\n  x?: number;\n  y?: number;\n  minWidth?: number | string;\n  minHeight?: number | string;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n}\n\nexport interface SceneComponentProps<T> {\n  model: T;\n}\n\nexport interface SceneComponentWrapperProps {\n  model: SceneObject;\n  children: React.ReactNode;\n}\n\nexport type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React.ReactElement | null;\nexport type SceneComponentCustomWrapper = (props: SceneComponentWrapperProps) => React.ReactElement | null;\n\nexport interface SceneDataState extends SceneObjectStatePlain {\n  data?: PanelData;\n}\n\nexport interface SceneObject<TState extends SceneObjectState = SceneObjectState> {\n  /** The current state */\n  readonly state: TState;\n\n  /** True when there is a React component mounted for this Object */\n  readonly isActive: boolean;\n\n  /** SceneObject parent */\n  readonly parent?: SceneObject;\n\n  /** This abtractions declares what variables the scene object depends on and how to handle when they change value. **/\n  readonly variableDependency?: SceneVariableDependencyConfigLike;\n\n  /** This abstraction declares URL sync dependencies of a scene object. **/\n  readonly urlSync?: SceneObjectUrlSyncHandler;\n\n  /** Subscribe to state changes */\n  subscribeToState(handler: SceneStateChangedHandler<TState>): Unsubscribable;\n\n  /** Subscribe to a scene event */\n  subscribeToEvent<T extends BusEvent>(typeFilter: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable;\n\n  /** Publish an event and optionally bubble it up the scene */\n  publishEvent(event: BusEvent, bubble?: boolean): void;\n\n  /** Utility hook that wraps useObservable. Used by React components to subscribes to state changes */\n  useState(): TState;\n\n  /** How to modify state */\n  setState(state: Partial<TState>): void;\n\n  /**\n   * Called when the Component is mounted. This will also activate any $data, $variables or $timeRange scene object on this level.\n   * Don't override this in your custom SceneObjects, instead use addActivationHandler from the constructor. The activation handler can return a deactivation handler.\n   **/\n  activate(): void;\n\n  /** Called when component unmounts. This will also deactivate any $data, $variables or $timeRange scene object on this level.\n   * Don't override this in your custom SceneObjects, instead use addActivationHandler from the constructor. The activation handler can return a deactivation handler.\n   */\n  deactivate(): void;\n\n  /** Get the scene root */\n  getRoot(): SceneObject;\n\n  /** Returns a deep clone this object and all its children */\n  clone(state?: Partial<TState>): this;\n\n  /** A React component to use for rendering the object */\n  Component(props: SceneComponentProps<SceneObject<TState>>): React.ReactElement | null;\n\n  /** Force a re-render, should only be needed when variable values change */\n  forceRender(): void;\n\n  /**\n   * Allows external code to register code that is executed on activate and deactivate. This allow you\n   * to wire up scene objects that need to respond to state changes in other objects from the outside.\n   **/\n  addActivationHandler(handler: SceneActivationHandler): void;\n}\n\nexport type SceneActivationHandler = () => SceneDeactivationHandler | void;\nexport type SceneDeactivationHandler = () => void;\n\nexport type SceneLayoutChild = SceneObject<SceneLayoutChildState | SceneLayoutState>;\n\nexport interface SceneLayoutState extends SceneLayoutChildState {\n  children: SceneLayoutChild[];\n}\n\nexport interface SceneLayout<T extends SceneLayoutState = SceneLayoutState> extends SceneObject<T> {\n  isDraggable(): boolean;\n  getDragClass?(): string;\n  getDragClassCancel?(): string;\n}\n\nexport interface SceneTimeRangeState extends SceneObjectStatePlain {\n  from: string;\n  to: string;\n  timeZone: TimeZone;\n  fiscalYearStartMonth?: number;\n  value: TimeRange;\n}\n\nexport interface SceneTimeRangeLike extends SceneObject<SceneTimeRangeState> {\n  onTimeRangeChange(timeRange: TimeRange): void;\n  onRefresh(): void;\n}\n\nexport interface SceneObjectRef {\n  ref: SceneObject;\n}\n\nexport function isSceneObject(obj: any): obj is SceneObject {\n  return obj.useState !== undefined;\n}\n\nexport interface SceneObjectWithUrlSync extends SceneObject {\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport interface SceneObjectUrlSyncHandler {\n  getKeys(): string[];\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport type SceneObjectUrlValue = string | string[] | undefined | null;\nexport type SceneObjectUrlValues = Record<string, SceneObjectUrlValue>;\n\nexport type CustomTransformOperator = (context: DataTransformContext) => MonoTypeOperatorFunction<DataFrame[]>;\nexport type SceneStateChangedHandler<TState> = (newState: TState, prevState: TState) => void;\n\nexport type DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport interface SceneDataProvider extends SceneObject<SceneDataState> {\n  setContainerWidth?: (width: number) => void;\n}\n"],"names":[],"mappings":"AAuJO,SAAS,cAAc,GAA8B,EAAA;AAC1D,EAAA,OAAO,IAAI,QAAa,KAAA,KAAA,CAAA,CAAA;AAC1B;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/core/types.ts"],"sourcesContent":["import React from 'react';\nimport { MonoTypeOperatorFunction, Unsubscribable } from 'rxjs';\n\nimport {\n  BusEvent,\n  BusEventHandler,\n  BusEventType,\n  DataFrame,\n  DataTransformContext,\n  PanelData,\n  TimeRange,\n  TimeZone,\n} from '@grafana/data';\n\nimport { SceneVariableDependencyConfigLike, SceneVariables } from '../variables/types';\n\nexport interface SceneObjectStatePlain {\n  key?: string;\n  $timeRange?: SceneTimeRangeLike;\n  $data?: SceneDataProvider;\n  $variables?: SceneVariables;\n}\n\nexport interface SceneLayoutChildState extends SceneObjectStatePlain {\n  placement?: SceneLayoutChildOptions;\n}\n\nexport interface SceneLayoutItemState extends SceneObjectStatePlain {\n  body: SceneObject | undefined;\n}\n\nexport type SceneObjectState = SceneObjectStatePlain | SceneLayoutState | SceneLayoutChildState;\n\nexport interface SceneLayoutChildOptions {\n  width?: number | string;\n  height?: number | string;\n  xSizing?: 'fill' | 'content';\n  ySizing?: 'fill' | 'content';\n  x?: number;\n  y?: number;\n  minWidth?: number | string;\n  minHeight?: number | string;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n}\n\nexport interface SceneComponentProps<T> {\n  model: T;\n}\n\nexport interface SceneComponentWrapperProps {\n  model: SceneObject;\n  children: React.ReactNode;\n}\n\nexport type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React.ReactElement | null;\nexport type SceneComponentCustomWrapper = (props: SceneComponentWrapperProps) => React.ReactElement | null;\n\nexport interface SceneDataState extends SceneObjectStatePlain {\n  data?: PanelData;\n}\n\nexport interface SceneObject<TState extends SceneObjectState = SceneObjectState> {\n  /** The current state */\n  readonly state: TState;\n\n  /** True when there is a React component mounted for this Object */\n  readonly isActive: boolean;\n\n  /** SceneObject parent */\n  readonly parent?: SceneObject;\n\n  /** This abtractions declares what variables the scene object depends on and how to handle when they change value. **/\n  readonly variableDependency?: SceneVariableDependencyConfigLike;\n\n  /** This abstraction declares URL sync dependencies of a scene object. **/\n  readonly urlSync?: SceneObjectUrlSyncHandler;\n\n  /** Subscribe to state changes */\n  subscribeToState(handler: SceneStateChangedHandler<TState>): Unsubscribable;\n\n  /** Subscribe to a scene event */\n  subscribeToEvent<T extends BusEvent>(typeFilter: BusEventType<T>, handler: BusEventHandler<T>): Unsubscribable;\n\n  /** Publish an event and optionally bubble it up the scene */\n  publishEvent(event: BusEvent, bubble?: boolean): void;\n\n  /** Utility hook that wraps useObservable. Used by React components to subscribes to state changes */\n  useState(): TState;\n\n  /** How to modify state */\n  setState(state: Partial<TState>): void;\n\n  /**\n   * Called when the Component is mounted. This will also activate any $data, $variables or $timeRange scene object on this level.\n   * Don't override this in your custom SceneObjects, instead use addActivationHandler from the constructor. The activation handler can return a deactivation handler.\n   **/\n  activate(): void;\n\n  /** Called when component unmounts. This will also deactivate any $data, $variables or $timeRange scene object on this level.\n   * Don't override this in your custom SceneObjects, instead use addActivationHandler from the constructor. The activation handler can return a deactivation handler.\n   */\n  deactivate(): void;\n\n  /** Get the scene root */\n  getRoot(): SceneObject;\n\n  /** Returns a deep clone this object and all its children */\n  clone(state?: Partial<TState>): this;\n\n  /** A React component to use for rendering the object */\n  Component(props: SceneComponentProps<SceneObject<TState>>): React.ReactElement | null;\n\n  /** Force a re-render, should only be needed when variable values change */\n  forceRender(): void;\n\n  /**\n   * Allows external code to register code that is executed on activate and deactivate. This allow you\n   * to wire up scene objects that need to respond to state changes in other objects from the outside.\n   **/\n  addActivationHandler(handler: SceneActivationHandler): void;\n}\n\nexport type SceneActivationHandler = () => SceneDeactivationHandler | void;\nexport type SceneDeactivationHandler = () => void;\n\nexport type SceneLayoutChild = SceneObject<SceneLayoutChildState | SceneLayoutState>;\n\nexport interface SceneLayoutState extends SceneLayoutChildState {\n  children: SceneObject[];\n}\n\nexport interface SceneLayout<T extends SceneLayoutState = SceneLayoutState> extends SceneObject<T> {\n  isDraggable(): boolean;\n  getDragClass?(): string;\n  getDragClassCancel?(): string;\n}\n\nexport interface SceneTimeRangeState extends SceneObjectStatePlain {\n  from: string;\n  to: string;\n  timeZone: TimeZone;\n  fiscalYearStartMonth?: number;\n  value: TimeRange;\n}\n\nexport interface SceneTimeRangeLike extends SceneObject<SceneTimeRangeState> {\n  onTimeRangeChange(timeRange: TimeRange): void;\n  onRefresh(): void;\n}\n\nexport interface SceneObjectRef {\n  ref: SceneObject;\n}\n\nexport function isSceneObject(obj: any): obj is SceneObject {\n  return obj.useState !== undefined;\n}\n\nexport interface SceneObjectWithUrlSync extends SceneObject {\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport interface SceneObjectUrlSyncHandler {\n  getKeys(): string[];\n  getUrlState(): SceneObjectUrlValues;\n  updateFromUrl(values: SceneObjectUrlValues): void;\n}\n\nexport type SceneObjectUrlValue = string | string[] | undefined | null;\nexport type SceneObjectUrlValues = Record<string, SceneObjectUrlValue>;\n\nexport type CustomTransformOperator = (context: DataTransformContext) => MonoTypeOperatorFunction<DataFrame[]>;\nexport type SceneStateChangedHandler<TState> = (newState: TState, prevState: TState) => void;\n\nexport type DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport interface SceneDataProvider extends SceneObject<SceneDataState> {\n  setContainerWidth?: (width: number) => void;\n}\n"],"names":[],"mappings":"AA2JO,SAAS,cAAc,GAA8B,EAAA;AAC1D,EAAA,OAAO,IAAI,QAAa,KAAA,KAAA,CAAA,CAAA;AAC1B;;;;"}

package/dist/esm/index.js

@@ -8,7 +8,7 @@ export { SceneQueryRunner } from './querying/SceneQueryRunner.js';
 export { SceneDataTransformer } from './querying/SceneDataTransformer.js';
 export { SceneVariableValueChangedEvent, isCustomVariableValue } from './variables/types.js';
 export { VariableDependencyConfig } from './variables/VariableDependencyConfig.js';
-export { FormatRegistryID, formatRegistry } from './variables/interpolation/formatRegistry.js';
+export { formatRegistry } from './variables/interpolation/formatRegistry.js';
 export { VariableValueSelectors } from './variables/components/VariableValueSelectors.js';
 export { SceneVariableSet } from './variables/sets/SceneVariableSet.js';
 export { ConstantVariable } from './variables/variants/ConstantVariable.js';
@@ -29,9 +29,9 @@ export { SceneTimePicker } from './components/SceneTimePicker.js';
 export { SceneRefreshPicker } from './components/SceneRefreshPicker.js';
 export { SceneByFrameRepeater } from './components/SceneByFrameRepeater.js';
 export { SceneControlsSpacer } from './components/SceneControlsSpacer.js';
-export { SceneFlexLayout } from './components/layout/SceneFlexLayout.js';
-export { SceneGridLayout } from './components/layout/SceneGridLayout.js';
-export { SceneGridRow } from './components/layout/SceneGridRow.js';
+export { SceneFlexItem, SceneFlexLayout } from './components/layout/SceneFlexLayout.js';
+export { SceneGridItem, SceneGridLayout } from './components/layout/grid/SceneGridLayout.js';
+export { SceneGridRow } from './components/layout/grid/SceneGridRow.js';
 export { SceneApp } from './components/SceneApp/SceneApp.js';
 export { SceneAppPage } from './components/SceneApp/SceneAppPage.js';
 export { SceneReactObject } from './components/SceneReactObject.js';

package/dist/esm/variables/interpolation/formatRegistry.js

@@ -1,29 +1,11 @@
 import { map, isArray, replace } from 'lodash';
 import { Registry, escapeRegex, textUtil, dateTime } from '@grafana/data';
+import { VariableFormatID } from '@grafana/schema';
 
-var FormatRegistryID = /* @__PURE__ */ ((FormatRegistryID2) => {
-  FormatRegistryID2["lucene"] = "lucene";
-  FormatRegistryID2["raw"] = "raw";
-  FormatRegistryID2["regex"] = "regex";
-  FormatRegistryID2["pipe"] = "pipe";
-  FormatRegistryID2["distributed"] = "distributed";
-  FormatRegistryID2["csv"] = "csv";
-  FormatRegistryID2["html"] = "html";
-  FormatRegistryID2["json"] = "json";
-  FormatRegistryID2["percentEncode"] = "percentencode";
-  FormatRegistryID2["singleQuote"] = "singlequote";
-  FormatRegistryID2["doubleQuote"] = "doublequote";
-  FormatRegistryID2["sqlString"] = "sqlstring";
-  FormatRegistryID2["date"] = "date";
-  FormatRegistryID2["glob"] = "glob";
-  FormatRegistryID2["text"] = "text";
-  FormatRegistryID2["queryParam"] = "queryparam";
-  return FormatRegistryID2;
-})(FormatRegistryID || {});
 const formatRegistry = new Registry(() => {
   const formats = [
     {
-      id: "lucene" /* lucene */,
+      id: VariableFormatID.Lucene,
       name: "Lucene",
       description: "Values are lucene escaped and multi-valued variables generate an OR expression",
       formatter: (value) => {
@@ -44,13 +26,13 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "raw" /* raw */,
+      id: VariableFormatID.Raw,
       name: "raw",
       description: "Keep value as is",
       formatter: (value) => String(value)
     },
     {
-      id: "regex" /* regex */,
+      id: VariableFormatID.Regex,
       name: "Regex",
       description: "Values are regex escaped and multi-valued variables generate a (<value>|<value>) expression",
       formatter: (value) => {
@@ -74,7 +56,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "pipe" /* pipe */,
+      id: VariableFormatID.Pipe,
       name: "Pipe",
       description: "Values are separated by | character",
       formatter: (value) => {
@@ -88,7 +70,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "distributed" /* distributed */,
+      id: VariableFormatID.Distributed,
       name: "Distributed",
       description: "Multiple values are formatted like variable=value",
       formatter: (value, args, variable) => {
@@ -109,7 +91,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "csv" /* csv */,
+      id: VariableFormatID.CSV,
       name: "Csv",
       description: "Comma-separated values",
       formatter: (value) => {
@@ -123,7 +105,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "html" /* html */,
+      id: VariableFormatID.HTML,
       name: "HTML",
       description: "HTML escaping of values",
       formatter: (value) => {
@@ -137,7 +119,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "json" /* json */,
+      id: VariableFormatID.JSON,
       name: "JSON",
       description: "JSON stringify value",
       formatter: (value) => {
@@ -148,7 +130,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "percentencode" /* percentEncode */,
+      id: VariableFormatID.PercentEncode,
       name: "Percent encode",
       description: "Useful for URL escaping values",
       formatter: (value) => {
@@ -159,7 +141,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "singlequote" /* singleQuote */,
+      id: VariableFormatID.SingleQuote,
       name: "Single quote",
       description: "Single quoted values",
       formatter: (value) => {
@@ -172,7 +154,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "doublequote" /* doubleQuote */,
+      id: VariableFormatID.DoubleQuote,
       name: "Double quote",
       description: "Double quoted values",
       formatter: (value) => {
@@ -185,7 +167,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "sqlstring" /* sqlString */,
+      id: VariableFormatID.SQLString,
       name: "SQL string",
       description: "SQL string quoting and commas for use in IN statements and other scenarios",
       formatter: (value) => {
@@ -198,7 +180,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "date" /* date */,
+      id: VariableFormatID.Date,
       name: "Date",
       description: "Format date in different ways",
       formatter: (value, args) => {
@@ -229,7 +211,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "glob" /* glob */,
+      id: VariableFormatID.Glob,
       name: "Glob",
       description: "Format multi-valued variables using glob syntax, example {value1,value2}",
       formatter: (value) => {
@@ -240,7 +222,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "text" /* text */,
+      id: VariableFormatID.Text,
       name: "Text",
       description: "Format variables in their text representation. Example in multi-variable scenario A + B + C.",
       formatter: (value, _args, variable) => {
@@ -251,7 +233,7 @@ const formatRegistry = new Registry(() => {
       }
     },
     {
-      id: "queryparam" /* queryParam */,
+      id: VariableFormatID.QueryParam,
       name: "Query parameter",
       description: "Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.",
       formatter: (value, _args, variable) => {
@@ -282,5 +264,5 @@ function formatQueryParameter(name, value) {
   return `var-${name}=${encodeURIComponentStrict(value)}`;
 }
 
-export { FormatRegistryID, formatRegistry };
+export { formatRegistry };
 //# sourceMappingURL=formatRegistry.js.map