mathbox-react 0.2.3-rc3 → 0.2.3-rc4

package/build/cjs/components/util.d.ts

@@ -17,7 +17,7 @@ export declare const isRootDestroyed: (selection: MathboxSelection) => boolean;
  */
 export declare const isSelectionParent: (selection: MathboxSelection, parent: MathboxSelection) => boolean;
 declare const CAN_HAVE_CHILDREN: readonly ["view", "cartesian", "cartesian4", "polar", "spherical", "stereographic", "stereographic4", "transform", "transform4", "vertex", "fragment", "layer", "mask", "group", "inherit", "root", "unit", "rtt", "clock", "now", "move", "present", "reveal", "slide"];
-export type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number];
+export type ParentNodeTypes = (typeof CAN_HAVE_CHILDREN)[number];
 export declare const canNodeHaveChildren: (type: NodeType) => boolean;
 export declare const capitalize: (s: string) => string;
 /**

package/build/cjs/stories/Area.stories.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").AreaProps & React.RefAttributes<import("mathbox").MathboxSelection<"area">> & {
+    liveProps?: {
+        expr?: ((t: number, dt: number) => import("mathbox").AreaEmitter | undefined) | undefined;
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        channels?: ((t: number, dt: number) => import("mathbox").Optional<1 | 2 | 3 | 4>) | undefined;
+        items?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        fps?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        hurry?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        limit?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        realtime?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        observe?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        aligned?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        data?: ((t: number, dt: number) => unknown) | undefined;
+        bind?: ((t: number, dt: number) => unknown) | undefined;
+        live?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        height?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        history?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        bufferWidth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        bufferHeight?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        minFilter?: ((t: number, dt: number) => unknown) | undefined;
+        magFilter?: ((t: number, dt: number) => unknown) | undefined;
+        type?: ((t: number, dt: number) => unknown) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        centeredX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        paddingX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        centeredY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        paddingY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+    } | undefined;
+}>;
+export default _default;
+export declare const DefaultCartesian: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").AreaProps & React.RefAttributes<import("mathbox").MathboxSelection<"area">> & {
+    liveProps?: {
+        expr?: ((t: number, dt: number) => import("mathbox").AreaEmitter | undefined) | undefined;
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        channels?: ((t: number, dt: number) => import("mathbox").Optional<1 | 2 | 3 | 4>) | undefined;
+        items?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        fps?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        hurry?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        limit?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        realtime?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        observe?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        aligned?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        data?: ((t: number, dt: number) => unknown) | undefined;
+        bind?: ((t: number, dt: number) => unknown) | undefined;
+        live?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        height?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        history?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        bufferWidth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        bufferHeight?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        minFilter?: ((t: number, dt: number) => unknown) | undefined;
+        magFilter?: ((t: number, dt: number) => unknown) | undefined;
+        type?: ((t: number, dt: number) => unknown) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        centeredX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        paddingX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        centeredY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        paddingY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+    } | undefined;
+}>;

package/build/cjs/stories/Area.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCartesian = void 0;
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("./utils");
+var components_1 = require("../components/components");
+exports.default = {
+    title: "Area",
+    component: components_1.Area,
+    argTypes: {
+        width: {
+            type: "number",
+            defaultValue: 18,
+        },
+        height: {
+            type: "number",
+            defaultValue: 18,
+        },
+        live: {
+            type: "boolean",
+            defaultValue: true,
+        },
+    },
+};
+var Template = function (args) { return (react_1.default.createElement(utils_1.CustomMathbox, { containerStyle: { height: 450 } },
+    react_1.default.createElement(components_1.Cartesian, { range: [
+            [-5, 5],
+            [-2, 2],
+            [-5, 5],
+        ] },
+        react_1.default.createElement(components_1.Grid, { axes: "xz" }),
+        react_1.default.createElement(components_1.Area, __assign({ axes: ["x", "z"], expr: function (emit, x, z, i, j, t) {
+                var y = Math.sin(x - t) * Math.cos(z - t);
+                emit(x, y, z);
+            } }, args)),
+        react_1.default.createElement(components_1.Surface, { color: 0x3090ff, shaded: true })))); };
+exports.DefaultCartesian = Template.bind({});
+exports.DefaultCartesian.args = {};
+//# sourceMappingURL=Area.stories.js.map

package/build/cjs/stories/Area.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Area.stories.js","sourceRoot":"","sources":["../../../src/stories/Area.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AAGzB,iCAAkD;AAClD,uDAAyE;AAEzE,kBAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,iBAAI;IACf,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,EAAE;SACjB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,IAAI;SACnB;KACF;CACmB,CAAA;AAEtB,IAAM,QAAQ,GAA6C,UAAC,IAAI,IAAK,OAAA,CACnE,8BAAC,qBAAO,IAAC,cAAc,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACtC,8BAAC,sBAAS,IACR,KAAK,EAAE;YACL,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACR;QAED,8BAAC,iBAAI,IAAC,IAAI,EAAC,IAAI,GAAG;QAClB,8BAAC,iBAAI,aACH,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAChB,IAAI,EAAE,UAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxB,IAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBAC3C,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YACf,CAAC,IACG,IAAI,EACR;QACF,8BAAC,oBAAO,IAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAG,CACzB,CACJ,CACX,EArBoE,CAqBpE,CAAA;AAEY,QAAA,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,wBAAgB,CAAC,IAAI,GAAG,EAAE,CAAA"}

package/build/cjs/stories/Cartesian.stories.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    children?: React.ReactNode | React.ReactNode[];
+} & import("mathbox").CartesianProps & React.RefAttributes<import("mathbox").MathboxSelection<"cartesian">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        range?: ((t: number, dt: number) => (number | number[] | import("three").Vector2)[] | undefined) | undefined;
+        position?: ((t: number, dt: number) => number | import("three").Vector3 | number[] | undefined) | undefined;
+        quaternion?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | import("three").Quaternion | undefined) | undefined;
+        rotation?: ((t: number, dt: number) => number | import("three").Vector3 | number[] | undefined) | undefined;
+        scale?: ((t: number, dt: number) => number | import("three").Vector3 | number[] | undefined) | undefined;
+        eulerOrder?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        pass?: ((t: number, dt: number) => unknown) | undefined;
+    } | undefined;
+}>;
+export default _default;
+export declare const DefaultCartesian: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    children?: React.ReactNode | React.ReactNode[];
+} & import("mathbox").CartesianProps & React.RefAttributes<import("mathbox").MathboxSelection<"cartesian">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        range?: ((t: number, dt: number) => (number | number[] | import("three").Vector2)[] | undefined) | undefined;
+        position?: ((t: number, dt: number) => number | import("three").Vector3 | number[] | undefined) | undefined;
+        quaternion?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | import("three").Quaternion | undefined) | undefined;
+        rotation?: ((t: number, dt: number) => number | import("three").Vector3 | number[] | undefined) | undefined;
+        scale?: ((t: number, dt: number) => number | import("three").Vector3 | number[] | undefined) | undefined;
+        eulerOrder?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        pass?: ((t: number, dt: number) => unknown) | undefined;
+    } | undefined;
+}>;

package/build/cjs/stories/Cartesian.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCartesian = void 0;
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("./utils");
+var components_1 = require("../components/components");
+exports.default = {
+    title: "Cartesian",
+    component: components_1.Cartesian,
+    argTypes: {
+        range: {
+            type: "string",
+            defaultValue: [
+                [-1, 1],
+                [-1, 1],
+                [-1, 1],
+            ],
+        },
+        scale: {
+            type: "string",
+            defaultValue: [1, 1, 1],
+        },
+    },
+};
+var Template = function (args) { return (react_1.default.createElement(utils_1.CustomMathbox, { containerStyle: { height: 450 } },
+    react_1.default.createElement(components_1.Cartesian, __assign({}, args),
+        react_1.default.createElement(components_1.Grid, { axes: "xz" }),
+        react_1.default.createElement(components_1.Axis, { width: 4, axis: "x", color: "red" }),
+        react_1.default.createElement(components_1.Axis, { width: 4, axis: "y", color: "green" }),
+        react_1.default.createElement(components_1.Axis, { width: 4, axis: "z", color: "blue" })))); };
+exports.DefaultCartesian = Template.bind({});
+exports.DefaultCartesian.args = {};
+//# sourceMappingURL=Cartesian.stories.js.map

package/build/cjs/stories/Cartesian.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cartesian.stories.js","sourceRoot":"","sources":["../../../src/stories/Cartesian.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AAGzB,iCAAkD;AAClD,uDAAgE;AAEhE,kBAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,sBAAS;IACpB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE;gBACZ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;aACR;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SACxB;KACF;CACwB,CAAA;AAE3B,IAAM,QAAQ,GAAkD,UAAC,IAAI,IAAK,OAAA,CACxE,8BAAC,qBAAO,IAAC,cAAc,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACtC,8BAAC,sBAAS,eAAK,IAAI;QACjB,8BAAC,iBAAI,IAAC,IAAI,EAAC,IAAI,GAAG;QAClB,8BAAC,iBAAI,IAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,GAAG;QACvC,8BAAC,iBAAI,IAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,OAAO,GAAG;QACzC,8BAAC,iBAAI,IAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,GAAG,CAC9B,CACJ,CACX,EATyE,CASzE,CAAA;AAEY,QAAA,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,wBAAgB,CAAC,IAAI,GAAG,EAAE,CAAA"}

package/build/cjs/stories/Grid.stories.d.ts

@@ -0,0 +1,262 @@
+import React from "react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").GridProps & React.RefAttributes<import("mathbox").MathboxSelection<"grid">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        origin?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | undefined) | undefined;
+        detailX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        detailY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeX?: ((t: number, dt: number) => unknown) | undefined;
+        startX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeY?: ((t: number, dt: number) => unknown) | undefined;
+        startY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+    } | undefined;
+}>;
+export default _default;
+export declare const DefaultGrid: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").GridProps & React.RefAttributes<import("mathbox").MathboxSelection<"grid">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        origin?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | undefined) | undefined;
+        detailX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        detailY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeX?: ((t: number, dt: number) => unknown) | undefined;
+        startX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeY?: ((t: number, dt: number) => unknown) | undefined;
+        startY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+    } | undefined;
+}>;
+export declare const GridXY: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").GridProps & React.RefAttributes<import("mathbox").MathboxSelection<"grid">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        origin?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | undefined) | undefined;
+        detailX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        detailY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeX?: ((t: number, dt: number) => unknown) | undefined;
+        startX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeY?: ((t: number, dt: number) => unknown) | undefined;
+        startY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+    } | undefined;
+}>;
+export declare const GridYZ: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").GridProps & React.RefAttributes<import("mathbox").MathboxSelection<"grid">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        origin?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | undefined) | undefined;
+        detailX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        detailY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeX?: ((t: number, dt: number) => unknown) | undefined;
+        startX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeY?: ((t: number, dt: number) => unknown) | undefined;
+        startY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+    } | undefined;
+}>;
+export declare const GridZX: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").GridProps & React.RefAttributes<import("mathbox").MathboxSelection<"grid">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        origin?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | undefined) | undefined;
+        detailX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        detailY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeX?: ((t: number, dt: number) => unknown) | undefined;
+        startX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeY?: ((t: number, dt: number) => unknown) | undefined;
+        startY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+    } | undefined;
+}>;

package/build/cjs/stories/Grid.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridZX = exports.GridYZ = exports.GridXY = exports.DefaultGrid = void 0;
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("./utils");
+var components_1 = require("../components");
+exports.default = {
+    title: "Grid",
+    component: components_1.Grid,
+    argTypes: {
+        color: {
+            type: "string",
+            defaultValue: "rgb(128, 128, 128)",
+        },
+        axes: {
+            type: "string",
+            defaultValue: "xy",
+        },
+    },
+};
+var Template = function (args) { return (react_1.default.createElement(utils_1.CustomMathbox, { containerStyle: { height: 450 } },
+    react_1.default.createElement(components_1.Grid, __assign({}, args)))); };
+exports.DefaultGrid = Template.bind({});
+exports.DefaultGrid.args = {};
+exports.GridXY = Template.bind({});
+exports.GridXY.args = { axes: "xy" };
+exports.GridYZ = Template.bind({});
+exports.GridYZ.args = { axes: "yz" };
+exports.GridZX = Template.bind({});
+exports.GridZX.args = { axes: "zx" };
+//# sourceMappingURL=Grid.stories.js.map

package/build/cjs/stories/Grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.js","sourceRoot":"","sources":["../../../src/stories/Grid.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AAGzB,iCAAkD;AAClD,4CAAoC;AAEpC,kBAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,iBAAI;IACf,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,oBAAoB;SACnC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,IAAI;SACnB;KACF;CACmB,CAAA;AAEtB,IAAM,QAAQ,GAA6C,UAAC,IAAI,IAAK,OAAA,CACnE,8BAAC,qBAAO,IAAC,cAAc,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACtC,8BAAC,iBAAI,eAAK,IAAI,EAAI,CACV,CACX,EAJoE,CAIpE,CAAA;AAEY,QAAA,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,mBAAW,CAAC,IAAI,GAAG,EAAE,CAAA;AAER,QAAA,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,cAAM,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;AAEf,QAAA,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,cAAM,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;AAEf,QAAA,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,cAAM,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}

package/build/cjs/stories/Mathbox.stories.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    children?: React.ReactNode | React.ReactNode[];
+} & {
+    containerId?: string | undefined;
+    containerClass?: string | undefined;
+    containerStyle?: React.CSSProperties | undefined;
+    options?: any;
+} & import("mathbox").RootProps & React.RefAttributes<import("mathbox").MathboxSelection<"root">>>;
+export default _default;
+export declare const HelloWorld: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+    children?: React.ReactNode | React.ReactNode[];
+} & {
+    containerId?: string | undefined;
+    containerClass?: string | undefined;
+    containerStyle?: React.CSSProperties | undefined;
+    options?: any;
+} & import("mathbox").RootProps & React.RefAttributes<import("mathbox").MathboxSelection<"root">>>;

package/build/cjs/stories/Mathbox.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelloWorld = void 0;
+var react_1 = __importDefault(require("react"));
+var components_1 = require("../components");
+exports.default = {
+    title: "Mathbox",
+    component: components_1.ContainedMathbox,
+    argTypes: {},
+};
+var Template = function () { return (react_1.default.createElement(components_1.ContainedMathbox, null)); };
+exports.HelloWorld = Template.bind({});
+//# sourceMappingURL=Mathbox.stories.js.map

package/build/cjs/stories/Mathbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mathbox.stories.js","sourceRoot":"","sources":["../../../src/stories/Mathbox.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAGzB,4CAAgD;AAEhD,kBAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,6BAAgB;IAC3B,QAAQ,EAAE,EAAE;CACoB,CAAA;AAElC,IAAM,QAAQ,GAAyD,cAAM,OAAA,CAC3E,8BAAC,6BAAgB,OAAG,CACrB,EAF4E,CAE5E,CAAA;AAEY,QAAA,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/build/cjs/stories/Play.stories.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").PlayProps & React.RefAttributes<import("mathbox").MathboxSelection<"play">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        target?: ((t: number, dt: number) => any) | undefined;
+        script?: ((t: number, dt: number) => unknown) | undefined;
+        ease?: ((t: number, dt: number) => unknown) | undefined;
+        trigger?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        delay?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        pace?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        speed?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        from?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        to?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        realtime?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        loop?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+    } | undefined;
+}>;
+export default _default;
+export declare const DefaultCartesian: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").PlayProps & React.RefAttributes<import("mathbox").MathboxSelection<"play">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        target?: ((t: number, dt: number) => any) | undefined;
+        script?: ((t: number, dt: number) => unknown) | undefined;
+        ease?: ((t: number, dt: number) => unknown) | undefined;
+        trigger?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        delay?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        pace?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        speed?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        from?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        to?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        realtime?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        loop?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+    } | undefined;
+}>;

package/build/cjs/stories/Play.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCartesian = void 0;
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("./utils");
+var components_1 = require("../components/components");
+exports.default = {
+    title: "Play",
+    component: components_1.Play,
+    argTypes: {},
+};
+var Template = function () { return (react_1.default.createElement(utils_1.CustomMathbox, { containerStyle: { height: 450 } },
+    react_1.default.createElement(components_1.Cartesian, { range: [
+            [-5, 5],
+            [-2, 2],
+            [-2, 2],
+        ] },
+        react_1.default.createElement(components_1.Grid, { axes: "xy" }),
+        react_1.default.createElement(components_1.Interval, { width: 64, channels: 2, expr: function (emit, x, i, t) {
+                var y = Math.sin(x - t);
+                emit(x, y);
+            } }),
+        react_1.default.createElement(components_1.Play, { delay: 1, speed: 1000, script: [{ props: { live: true } }, { props: { live: false } }] }),
+        react_1.default.createElement(components_1.Line, { id: "line", color: 0x3090ff, width: 4 }),
+        react_1.default.createElement(components_1.Play, { target: "#line", delay: 1, pace: 2, script: [
+                { props: { opacity: 1 } },
+                { props: { opacity: 0.25 } },
+                { props: { color: "red" } },
+            ] })))); };
+exports.DefaultCartesian = Template.bind({});
+exports.DefaultCartesian.args = {};
+//# sourceMappingURL=Play.stories.js.map

package/build/cjs/stories/Play.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Play.stories.js","sourceRoot":"","sources":["../../../src/stories/Play.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAGzB,iCAAkD;AAClD,uDAAgF;AAEhF,kBAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,iBAAI;IACf,QAAQ,EAAE,EAAE;CACQ,CAAA;AAEtB,IAAM,QAAQ,GAA6C,cAAM,OAAA,CAC/D,8BAAC,qBAAO,IAAC,cAAc,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACtC,8BAAC,sBAAS,IACR,KAAK,EAAE;YACL,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACR;QAED,8BAAC,iBAAI,IAAC,IAAI,EAAC,IAAI,GAAG;QAClB,8BAAC,qBAAQ,IACP,KAAK,EAAE,EAAE,EACT,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,UAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBAClB,IAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBACzB,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACZ,CAAC,GACD;QACF,8BAAC,iBAAI,IACH,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,GAC/D;QACF,8BAAC,iBAAI,IAAC,EAAE,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,GAAI;QAC7C,8BAAC,iBAAI,IACH,MAAM,EAAC,OAAO,EACd,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,CAAC,EACP,MAAM,EAAE;gBACN,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE;gBACzB,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;gBAC5B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;aAC5B,GACD,CACQ,CACJ,CACX,EApCgE,CAoChE,CAAA;AAEY,QAAA,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,wBAAgB,CAAC,IAAI,GAAG,EAAE,CAAA"}

package/build/cjs/stories/Point.stories.d.ts

@@ -0,0 +1,101 @@
+import React from "react";
+import { MathboxSelection } from "mathbox";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").GridProps & React.RefAttributes<MathboxSelection<"grid">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        axes?: ((t: number, dt: number) => import("mathbox").Optional<string | import("mathbox").Axes[]>) | undefined;
+        origin?: ((t: number, dt: number) => number | number[] | import("three").Vector4 | undefined) | undefined;
+        detailX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        detailY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        crossedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeX?: ((t: number, dt: number) => unknown) | undefined;
+        startX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorX?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        divideY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        unitY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        baseY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        modeY?: ((t: number, dt: number) => unknown) | undefined;
+        startY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        endY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zeroY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        factorY?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        niceY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        rangeX?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+        rangeY?: ((t: number, dt: number) => number | number[] | import("three").Vector2 | null | undefined) | undefined;
+    } | undefined;
+}>;
+export default _default;
+export declare const DefaultPoint: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").PointProps & React.RefAttributes<MathboxSelection<"point">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        size?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        sizes?: ((t: number, dt: number) => any) | undefined;
+        shape?: ((t: number, dt: number) => unknown) | undefined;
+        optical?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        fill?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        points?: ((t: number, dt: number) => any) | undefined;
+        colors?: ((t: number, dt: number) => any) | undefined;
+    } | undefined;
+}>;
+export declare const LiveProps: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").PointProps & React.RefAttributes<MathboxSelection<"point">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        size?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        sizes?: ((t: number, dt: number) => any) | undefined;
+        shape?: ((t: number, dt: number) => unknown) | undefined;
+        optical?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        fill?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        points?: ((t: number, dt: number) => any) | undefined;
+        colors?: ((t: number, dt: number) => any) | undefined;
+    } | undefined;
+}>;

package/build/cjs/stories/Point.stories.js

@@ -0,0 +1,103 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveProps = exports.DefaultPoint = void 0;
+var react_1 = __importStar(require("react"));
+var utils_1 = require("./utils");
+var components_1 = require("../components");
+exports.default = {
+    title: "Point",
+    component: components_1.Point,
+    argTypes: {
+        color: {
+            type: "string",
+            defaultValue: "rgb(128, 128, 128)",
+        },
+        opacity: {
+            type: "number",
+            defaultValue: 1,
+        },
+        points: {
+            type: "array",
+            defaultValue: [[1, 1, 1]],
+        },
+        size: {
+            type: "number",
+            defaultValue: 4,
+        },
+    },
+};
+var Template = function (args) {
+    var points = args.points, otherArgs = __rest(args, ["points"]);
+    var _a = (0, react_1.useState)(null), data = _a[0], setData = _a[1];
+    return (react_1.default.createElement(utils_1.CustomMathbox, { containerStyle: { height: 450 } },
+        react_1.default.createElement(components_1.Cartesian, { range: [
+                [-5, 5],
+                [-5, 5],
+                [-5, 5],
+            ] },
+            react_1.default.createElement(components_1.Grid, { axes: "xy" }),
+            react_1.default.createElement(components_1.Grid, { axes: "xz" }),
+            react_1.default.createElement(components_1.Array, { ref: setData, items: 1, channels: 3, data: [
+                    [1, 1, 2],
+                    [1, 1, 3],
+                ] }),
+            react_1.default.createElement(components_1.Array, { items: 1, channels: 3, data: [
+                    [1, 1, -2],
+                    [1, 1, -3],
+                ] }),
+            react_1.default.createElement(components_1.Point, __assign({ points: data }, otherArgs)))));
+};
+exports.DefaultPoint = Template.bind({});
+exports.DefaultPoint.args = {};
+exports.LiveProps = Template.bind({});
+exports.LiveProps.args = {
+    liveProps: {
+        size: function (t) { return 20 * (1 + 0.5 * Math.sin(t)); },
+    },
+};
+//# sourceMappingURL=Point.stories.js.map

package/build/cjs/stories/Point.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Point.stories.js","sourceRoot":"","sources":["../../../src/stories/Point.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AAGvC,iCAAkD;AAClD,4CAAwE;AAExE,kBAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,kBAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,oBAAoB;SACnC;QACD,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,CAAC;SAChB;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;SAC1B;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,CAAC;SAChB;KACF;CACmB,CAAA;AAEtB,IAAM,QAAQ,GAA8C,UAAC,IAAI;IACvD,IAAA,MAAM,GAAmB,IAAI,OAAvB,EAAK,SAAS,UAAK,IAAI,EAA/B,UAAwB,CAAF,CAAS;IAC/B,IAAA,KAAkB,IAAA,gBAAQ,EAAmC,IAAI,CAAC,EAAjE,IAAI,QAAA,EAAE,OAAO,QAAoD,CAAA;IACxE,OAAO,CACL,8BAAC,qBAAO,IAAC,cAAc,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;QACtC,8BAAC,sBAAS,IACR,KAAK,EAAE;gBACL,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;aACR;YAED,8BAAC,iBAAI,IAAC,IAAI,EAAC,IAAI,GAAG;YAClB,8BAAC,iBAAI,IAAC,IAAI,EAAC,IAAI,GAAG;YAClB,8BAAC,kBAAO,IACN,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE;oBACJ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;oBACT,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;iBACV,GACD;YACF,8BAAC,kBAAO,IACN,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE;oBACJ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;oBACV,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;iBACX,GACD;YACF,8BAAC,kBAAK,aAAC,MAAM,EAAE,IAAI,IAAM,SAAS,EAAI,CAC5B,CACJ,CACX,CAAA;AACH,CAAC,CAAA;AAEY,QAAA,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC7C,oBAAY,CAAC,IAAI,GAAG,EAAE,CAAA;AAET,QAAA,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,iBAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE;QACT,IAAI,EAAE,UAAC,CAAS,IAAK,OAAA,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAA5B,CAA4B;KAClD;CACF,CAAA"}

package/build/cjs/stories/Surface.stories.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").SurfaceProps & React.RefAttributes<import("mathbox").MathboxSelection<"surface">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        fill?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        shaded?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        map?: ((t: number, dt: number) => any) | undefined;
+        normals?: ((t: number, dt: number) => any) | undefined;
+        lineBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        points?: ((t: number, dt: number) => any) | undefined;
+        colors?: ((t: number, dt: number) => any) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+    } | undefined;
+}>;
+export default _default;
+export declare const DefaultCartesian: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("mathbox").SurfaceProps & React.RefAttributes<import("mathbox").MathboxSelection<"surface">> & {
+    liveProps?: {
+        id?: ((t: number, dt: number) => import("mathbox").Optional<string>) | undefined;
+        classes?: ((t: number, dt: number) => import("mathbox").Optional<string | string[]>) | undefined;
+        visible?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        opacity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        color?: ((t: number, dt: number) => string | number | import("three").Color | number[] | undefined) | undefined;
+        blending?: ((t: number, dt: number) => import("mathbox").Optional<import("mathbox").BlendingModes>) | undefined;
+        zWrite?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zTest?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        zIndex?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        zOrder?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        width?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        depth?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        join?: ((t: number, dt: number) => unknown) | undefined;
+        stroke?: ((t: number, dt: number) => unknown) | undefined;
+        proximity?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        closed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        fill?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        shaded?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        map?: ((t: number, dt: number) => any) | undefined;
+        normals?: ((t: number, dt: number) => any) | undefined;
+        lineBias?: ((t: number, dt: number) => import("mathbox").Optional<number>) | undefined;
+        points?: ((t: number, dt: number) => any) | undefined;
+        colors?: ((t: number, dt: number) => any) | undefined;
+        lineX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        lineY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        crossed?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedX?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+        closedY?: ((t: number, dt: number) => import("mathbox").Optional<boolean>) | undefined;
+    } | undefined;
+}>;

package/build/cjs/stories/Surface.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCartesian = void 0;
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("./utils");
+var components_1 = require("../components/components");
+exports.default = {
+    title: "Surface",
+    component: components_1.Surface,
+    argTypes: {
+        color: {
+            type: "string",
+            defaultValue: "rgb(48,144,255)",
+        },
+        shaded: {
+            type: "boolean",
+            defaultValue: true,
+        },
+    },
+};
+var Template = function (args) { return (react_1.default.createElement(utils_1.CustomMathbox, { containerStyle: { height: 450 } },
+    react_1.default.createElement(components_1.Cartesian, { range: [
+            [-5, 5],
+            [-2, 2],
+            [-5, 5],
+        ] },
+        react_1.default.createElement(components_1.Grid, { axes: "xz" }),
+        react_1.default.createElement(components_1.Area, { width: 64, height: 64, axes: ["x", "z"], expr: function (emit, x, z, i, j, t) {
+                var y = Math.sin(x - t) * Math.cos(z - t);
+                emit(x, y, z);
+            } }),
+        react_1.default.createElement(components_1.Surface, __assign({}, args))))); };
+exports.DefaultCartesian = Template.bind({});
+exports.DefaultCartesian.args = {};
+//# sourceMappingURL=Surface.stories.js.map

package/build/cjs/stories/Surface.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.stories.js","sourceRoot":"","sources":["../../../src/stories/Surface.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AAGzB,iCAAkD;AAClD,uDAAyE;AAEzE,kBAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,oBAAO;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,iBAAiB;SAChC;QACD,MAAM,EAAE;YACN,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,IAAI;SACnB;KACF;CACsB,CAAA;AAEzB,IAAM,QAAQ,GAAgD,UAAC,IAAI,IAAK,OAAA,CACtE,8BAAC,qBAAO,IAAC,cAAc,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACtC,8BAAC,sBAAS,IACR,KAAK,EAAE;YACL,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACP,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACR;QAED,8BAAC,iBAAI,IAAC,IAAI,EAAC,IAAI,GAAG;QAClB,8BAAC,iBAAI,IACH,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAChB,IAAI,EAAE,UAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxB,IAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBAC3C,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YACf,CAAC,GACD;QACF,8BAAC,oBAAO,eAAK,IAAI,EAAI,CACX,CACJ,CACX,EAtBuE,CAsBvE,CAAA;AAEY,QAAA,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,wBAAgB,CAAC,IAAI,GAAG,EAAE,CAAA"}

package/build/cjs/stories/utils.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ContainedMathbox } from "../components";
+type MathboxProps = React.ComponentProps<typeof ContainedMathbox>;
+export declare const CustomMathbox: (props: MathboxProps) => React.JSX.Element;
+export {};

package/build/cjs/stories/utils.js

@@ -0,0 +1,69 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomMathbox = void 0;
+var react_1 = __importStar(require("react"));
+var OrbitControls_1 = require("three/examples/jsm/controls/OrbitControls");
+var components_1 = require("../components");
+var storybookDefaultMathboxOptions = {
+    plugins: ["core", "controls", "cursor"],
+    controls: {
+        klass: OrbitControls_1.OrbitControls,
+    },
+};
+var CustomMathbox = function (props) {
+    var overrides = props.options, others = __rest(props, ["options"]);
+    var options = (0, react_1.useMemo)(function () { return (__assign(__assign({}, storybookDefaultMathboxOptions), (overrides !== null && overrides !== void 0 ? overrides : {}))); }, [overrides]);
+    var setup = (0, react_1.useCallback)(function (mathbox) {
+        if (mathbox === null)
+            return;
+        mathbox.three.camera.position.set(1, 1, 2);
+    }, []);
+    return (react_1.default.createElement(components_1.ContainedMathbox, __assign({ ref: setup, options: options }, others), props.children));
+};
+exports.CustomMathbox = CustomMathbox;
+//# sourceMappingURL=utils.js.map

package/build/cjs/stories/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/stories/utils.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmD;AAEnD,2EAAyE;AACzE,4CAAgD;AAIhD,IAAM,8BAA8B,GAAG;IACrC,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,CAAC;IACvC,QAAQ,EAAE;QACR,KAAK,EAAE,6BAAa;KACrB;CACF,CAAA;AAEM,IAAM,aAAa,GAAG,UAAC,KAAmB;IACvC,IAAS,SAAS,GAAgB,KAAK,QAArB,EAAK,MAAM,UAAK,KAAK,EAAzC,WAAiC,CAAF,CAAU;IAC/C,IAAM,OAAO,GAAG,IAAA,eAAO,EACrB,cAAM,OAAA,uBACD,8BAA8B,GAC9B,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAC,EACpB,EAHI,CAGJ,EACF,CAAC,SAAS,CAAC,CACZ,CAAA;IACD,IAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,UAAC,OAAwC;QACjE,IAAI,OAAO,KAAK,IAAI;YAAE,OAAM;QAC5B,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,8BAAC,6BAAgB,aAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAM,MAAM,GACvD,KAAK,CAAC,QAAQ,CACE,CACpB,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,aAAa,iBAkBzB"}

package/build/cjs/threestrap/Controls.js

@@ -5,7 +5,7 @@ var react_1 = require("react");
 var ThreestrapContext_1 = require("./ThreestrapContext");
 var ALLOWED_CONTROLS = ["orbit"];
 var useOrbitControls = function (threestrap, _a) {
-    var type = _a.type, enablePan = _a.enablePan, enableRotate = _a.enableRotate, enableZoom = _a.enableZoom, target = _a.target, onStart = _a.onStart, onEnd = _a.onEnd;
+    var type = _a.type, enablePan = _a.enablePan, enableRotate = _a.enableRotate, enableZoom = _a.enableZoom, onStart = _a.onStart, onEnd = _a.onEnd, target = _a.target;
     (0, react_1.useEffect)(function () {
         if (type !== "orbit")
             return;
@@ -31,7 +31,7 @@ var useOrbitControls = function (threestrap, _a) {
         if (target) {
             controls.target = target;
         }
-    }, [type, target, threestrap.controls]);
+    }, [type, threestrap.controls, target]);
     (0, react_1.useEffect)(function () {
         if (type !== "orbit")
             return function () { };

package/build/cjs/threestrap/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../../src/threestrap/Controls.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../../src/threestrap/Controls.ts"],"names":[],"mappings":"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"}

package/build/esm/components/util.d.ts

@@ -17,7 +17,7 @@ export declare const isRootDestroyed: (selection: MathboxSelection) => boolean;
  */
 export declare const isSelectionParent: (selection: MathboxSelection, parent: MathboxSelection) => boolean;
 declare const CAN_HAVE_CHILDREN: readonly ["view", "cartesian", "cartesian4", "polar", "spherical", "stereographic", "stereographic4", "transform", "transform4", "vertex", "fragment", "layer", "mask", "group", "inherit", "root", "unit", "rtt", "clock", "now", "move", "present", "reveal", "slide"];
-export type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number];
+export type ParentNodeTypes = (typeof CAN_HAVE_CHILDREN)[number];
 export declare const canNodeHaveChildren: (type: NodeType) => boolean;
 export declare const capitalize: (s: string) => string;
 /**

package/build/esm/threestrap/Controls.js

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { useThreestrap } from "./ThreestrapContext";
 var ALLOWED_CONTROLS = ["orbit"];
 var useOrbitControls = function (threestrap, _a) {
-    var type = _a.type, enablePan = _a.enablePan, enableRotate = _a.enableRotate, enableZoom = _a.enableZoom, target = _a.target, onStart = _a.onStart, onEnd = _a.onEnd;
+    var type = _a.type, enablePan = _a.enablePan, enableRotate = _a.enableRotate, enableZoom = _a.enableZoom, onStart = _a.onStart, onEnd = _a.onEnd, target = _a.target;
     useEffect(function () {
         if (type !== "orbit")
             return;
@@ -29,7 +29,7 @@ var useOrbitControls = function (threestrap, _a) {
         if (target) {
             controls.target = target;
         }
-    }, [type, target, threestrap.controls]);
+    }, [type, threestrap.controls, target]);
     useEffect(function () {
         if (type !== "orbit")
             return function () { };

package/build/esm/threestrap/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../../src/threestrap/Controls.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../../src/threestrap/Controls.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mathbox-react",
-  "version": "0.2.3-rc3",
+  "version": "0.2.3-rc4",
   "description": "React wrapper for Mathbox",
   "license": "ISC",
   "repository": {
@@ -39,12 +39,12 @@
     "@mathbox-react/eslint-config": "workspace:*",
     "@mathbox-react/tsconfig": "workspace:*",
     "@storybook/addon-actions": "7.0.18",
-    "@storybook/addon-essentials": "^7.4.2",
+    "@storybook/addon-essentials": "7.0.18",
     "@storybook/addon-interactions": "7.0.18",
     "@storybook/addon-links": "7.0.18",
-    "@storybook/builder-webpack5": "^7.4.2",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^7.4.2",
+    "@storybook/builder-webpack5": "^7.0.0",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/react": "7.0.18",
     "@storybook/testing-library": "0.1.0",
     "@testing-library/react": "14.0.0",
     "@types/jest": "27.5.2",