@magic-circle/timeline - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/Canvas.jsx

@@ -504,12 +504,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
                 drag: function (dx, dy) {
-                    if (isNumber) {
-                        // ensure we're updating the same keyframe and not the reference to the old one...
-                        var curr = _this.timeline.getKeyframeByKey(path, key);
-                        var newX = _this.position(curr.time) + dx;
-                        var newY = axis(+curr.value) + dy;
-                        var newTime = _this.invert(newX);
-                        var newValue = clamp(axisInverse(newY), range[0], range[1]);
-                        _this.timeline.changeKeyframe(path, key, newValue, newTime);
-                        _this.render();
-                    }
+                    // ensure we're updating the same keyframe and not the reference to the old one...
+                    var curr = _this.timeline.getKeyframeByKey(path, key);
+                    var newX = _this.position(curr.time) + dx;
+                    var newY = isNumber ? axis(+curr.value) + dy : axis(+curr.value);
+                    var newTime = _this.invert(newX);
+                    var newValue = clamp(axisInverse(newY), range[0], range[1]);
+                    _this.timeline.changeKeyframe(path, key, newValue, newTime);
+                    _this.render();
                 },
@@ -516,0 +514,0 @@ });

dist/Timeline.jsx

@@ -5,5 +5,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 };
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import { COLORS, Forms, Icon, SPACING, TYPO, Placement, Tooltip, } from '@magic-circle/styles';
+import { COLORS, Forms, Icon, SPACING, TYPO, BREAKPOINTS, Placement, Tooltip, } from '@magic-circle/styles';
 import { useStore } from '@magic-circle/state';
@@ -14,18 +14,20 @@ import Canvas from './Canvas';
 import { formatTime } from './utils';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  min-height: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  min-height: 0;\n"])), function (props) { return (props.show ? '40vh' : "".concat(SPACING(2), "px")); });
-var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: ", "px;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding-left: ", "px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n"], ["\n  ", "\n  position: relative;\n  height: ", "px;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding-left: ", "px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n"])), TYPO.small, SPACING(2), COLORS.shades.s300.css, COLORS.shades.s300.css, SPACING(1), COLORS.shades.s100.css, SPACING(0.5));
-var Arrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n"])), COLORS.shades.s100.css);
-var Inside = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  min-height: 0;\n"], ["\n  position: relative;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  min-height: 0;\n"])));
-var Sidebar = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"])), SPACING(22), COLORS.shades.s300.css);
-var SidebarHeader = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  width: 100%;\n  height: ", "px;\n  background: ", ";\n  color: ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  width: 100%;\n  height: ", "px;\n  background: ", ";\n  color: ", ";\n  border-bottom: 1px solid ", ";\n"])), TYPO.small, SPACING(1), SPACING(3), COLORS.shades.s600.css, COLORS.white.css, COLORS.shades.s300.css);
-var SceneSelector = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n  color: ", ";\n\n  svg:hover {\n    color: ", ";\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n  color: ", ";\n\n  svg:hover {\n    color: ", ";\n    cursor: pointer;\n  }\n"])), SPACING(0.5), COLORS.shades.s100.css, COLORS.accent.css);
-var ZoomControls = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n\n  span {\n    margin-right: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n\n  span {\n    margin-right: ", "px;\n  }\n"])), SPACING(0.25), SPACING(0.25));
-var ZoomControl = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  opacity: ", ";\n  cursor: ", ";\n"], ["\n  display: flex;\n  opacity: ", ";\n  cursor: ", ";\n"])), function (props) { return (props.active ? 1 : 0.2); }, function (props) { return (props.active ? 'pointer' : 'default'); });
-var SidebarRows = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n"])));
-var AddTrack = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin-top: ", "px;\n  padding-bottom: ", "px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"], ["\n  margin-top: ", "px;\n  padding-bottom: ", "px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"])), SPACING(2), SPACING(2));
-var CanvasContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n"], ["\n  position: relative;\n  flex: 1;\n"])));
-var ClockContainer = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  padding-right: ", "px;\n  justify-content: flex-end;\n  align-items: center;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 25%\n  );\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  padding-right: ", "px;\n  justify-content: flex-end;\n  align-items: center;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 25%\n  );\n"])), SPACING(26), SPACING(3), SPACING(0.5), COLORS.shades.s600.opacity(0), COLORS.shades.s600.css);
-var Clock = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding-right: ", "px;\n  gap: ", "px;\n\n  span {\n    font-feature-settings:\n      'kern' 1,\n      'tnum' 1;\n  }\n\n  span:nth-child(2) {\n    color: ", ";\n  }\n"], ["\n  ", "\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding-right: ", "px;\n  gap: ", "px;\n\n  span {\n    font-feature-settings:\n      'kern' 1,\n      'tnum' 1;\n  }\n\n  span:nth-child(2) {\n    color: ", ";\n  }\n"])), TYPO.regular, COLORS.shades.s700.css, COLORS.shades.s300.css, COLORS.shades.s400.css, SPACING(0.5), SPACING(0.5), COLORS.shades.s200.css);
-var Buttons = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Button = styled(Tooltip)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin-left: -1px;\n  top: -1px;\n  z-index: ", ";\n  box-sizing: border-box;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    width: calc(100% - 0px);\n    height: calc(100% - 0px);\n    transition: border 0.2s ease;\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover:after {\n    border: 1px solid ", ";\n    z-index: 1;\n  }\n\n  &:first-child:after {\n    border-radius: 5px 0 0 5px;\n  }\n\n  &:last-child:after {\n    border-radius: 0 5px 5px 0;\n  }\n"], ["\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin-left: -1px;\n  top: -1px;\n  z-index: ", ";\n  box-sizing: border-box;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    width: calc(100% - 0px);\n    height: calc(100% - 0px);\n    transition: border 0.2s ease;\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover:after {\n    border: 1px solid ", ";\n    z-index: 1;\n  }\n\n  &:first-child:after {\n    border-radius: 5px 0 0 5px;\n  }\n\n  &:last-child:after {\n    border-radius: 0 5px 5px 0;\n  }\n"])), COLORS.black.opacity(0), function (props) {
+var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  min-height: 0;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  min-height: 0;\n\n  ", "\n"])), function (props) { return (props.$show ? '40vh' : "".concat(SPACING(2), "px")); }, BREAKPOINTS.max.medium(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: none;\n  "], ["\n    display: none;\n  "]))));
+var Header = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: ", "px;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding-left: ", "px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n"], ["\n  ", "\n  position: relative;\n  height: ", "px;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n  padding-left: ", "px;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n"])), TYPO.small, SPACING(2), COLORS.shades.s300.css, COLORS.shades.s300.css, SPACING(1), COLORS.shades.s100.css, SPACING(0.5));
+var Arrow = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n"])), COLORS.shades.s100.css);
+var Inside = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  min-height: 0;\n"], ["\n  position: relative;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  min-height: 0;\n"])));
+var Sidebar = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", "px;\n  border-right: 1px solid ", ";\n"])), SPACING(22), COLORS.shades.s300.css);
+var SidebarHeader = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  width: 100%;\n  height: ", "px;\n  background: ", ";\n  color: ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 ", "px;\n  width: 100%;\n  height: ", "px;\n  background: ", ";\n  color: ", ";\n  border-bottom: 1px solid ", ";\n"])), TYPO.small, SPACING(1), SPACING(3), COLORS.shades.s600.css, COLORS.white.css, COLORS.shades.s300.css);
+var SceneSelector = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n  color: ", ";\n\n  svg:hover {\n    color: ", ";\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: ", "px;\n  color: ", ";\n\n  svg:hover {\n    color: ", ";\n    cursor: pointer;\n  }\n"])), SPACING(0.5), COLORS.shades.s100.css, COLORS.accent.css);
+var ZoomControls = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n\n  span {\n    margin-right: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n\n  span {\n    margin-right: ", "px;\n  }\n"])), SPACING(0.25), SPACING(0.25));
+var ZoomControl = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  opacity: ", ";\n  cursor: ", ";\n"], ["\n  display: flex;\n  opacity: ", ";\n  cursor: ", ";\n"])), function (props) { return (props.$active ? 1 : 0.2); }, function (props) { return (props.$active ? 'pointer' : 'default'); });
+var SidebarRows = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n"])));
+var AddTrack = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin-top: ", "px;\n  padding-bottom: ", "px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"], ["\n  margin-top: ", "px;\n  padding-bottom: ", "px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"])), SPACING(2), SPACING(2));
+var CanvasContainer = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n"], ["\n  position: relative;\n  flex: 1;\n"])));
+var ClockContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  padding-right: ", "px;\n  justify-content: flex-end;\n  align-items: center;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 25%\n  );\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  padding-right: ", "px;\n  justify-content: flex-end;\n  align-items: center;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 25%\n  );\n"])), SPACING(26), SPACING(3), SPACING(0.5), COLORS.shades.s600.opacity(0), COLORS.shades.s600.css);
+var Clock = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding-right: ", "px;\n  gap: ", "px;\n\n  span {\n    font-feature-settings:\n      'kern' 1,\n      'tnum' 1;\n  }\n\n  span:nth-child(2) {\n    color: ", ";\n  }\n"], ["\n  ", "\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  padding-right: ", "px;\n  gap: ", "px;\n\n  span {\n    font-feature-settings:\n      'kern' 1,\n      'tnum' 1;\n  }\n\n  span:nth-child(2) {\n    color: ", ";\n  }\n"])), TYPO.regular, COLORS.shades.s700.css, COLORS.shades.s300.css, COLORS.shades.s400.css, SPACING(0.5), SPACING(0.5), COLORS.shades.s200.css);
+var Buttons = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Button = styled(Tooltip).withConfig({
+    shouldForwardProp: function (prop) { return prop !== 'active'; },
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin-left: -1px;\n  top: -1px;\n  z-index: ", ";\n  box-sizing: border-box;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    width: calc(100% - 0px);\n    height: calc(100% - 0px);\n    transition: border 0.2s ease;\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover:after {\n    border: 1px solid ", ";\n    z-index: 1;\n  }\n\n  &:first-child:after {\n    border-radius: 5px 0 0 5px;\n  }\n\n  &:last-child:after {\n    border-radius: 0 5px 5px 0;\n  }\n"], ["\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin-left: -1px;\n  top: -1px;\n  z-index: ", ";\n  box-sizing: border-box;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    width: calc(100% - 0px);\n    height: calc(100% - 0px);\n    transition: border 0.2s ease;\n    border: 1px solid\n      ", ";\n  }\n\n  &:hover:after {\n    border: 1px solid ", ";\n    z-index: 1;\n  }\n\n  &:first-child:after {\n    border-radius: 5px 0 0 5px;\n  }\n\n  &:last-child:after {\n    border-radius: 0 5px 5px 0;\n  }\n"])), COLORS.black.opacity(0), function (props) {
     return props.active ? COLORS.shades.s500.css : COLORS.shades.s600.css;
@@ -50,3 +52,19 @@ }, COLORS.white.css, function (props) { return (props.active ? 2 : 'inherit'); }, function (props) { return (props.active ? COLORS.white.css : COLORS.shades.s300.css); }, COLORS.white.css);
     }, [selected, scene]);
-    return (<Container show={show ? true : undefined}>
+    useEffect(function () {
+        var toggle = function (evt) {
+            if (show && evt.code === 'Space') {
+                if (playing) {
+                    timeline.stop();
+                }
+                else {
+                    timeline.play();
+                }
+            }
+        };
+        window.addEventListener('keydown', toggle);
+        return function () {
+            window.removeEventListener('keydown', toggle);
+        };
+    }, [playing, show, timeline]);
+    return (<Container $show={show ? true : undefined}>
       <Header onClick={function () {
@@ -56,3 +74,3 @@ timeline.show.set(!show);
         <Icon name="Clock" width={SPACING(1)} height={SPACING(1)}/> Timeline
-        <Arrow show={show ? true : undefined}>
+        <Arrow $show={show}>
           <Icon name={show ? 'ChevronDown' : 'ChevronUp'} width={SPACING(2)} height={SPACING(2)}/>
@@ -71,3 +89,3 @@ </Arrow>
                   <span>{Math.round(zoom * 100)}%</span>
-                  <ZoomControl active={zoom > 0}>
+                  <ZoomControl $active={zoom > 0}>
                     <Icon name="ZoomOut" width={SPACING(1.5)} height={SPACING(1.5)} onClick={function () {
@@ -77,3 +95,3 @@ timeline.zoom.set(Math.max(0, zoom - 0.1));
                   </ZoomControl>
-                  <ZoomControl active={zoom < 1}>
+                  <ZoomControl $active={zoom < 1}>
                     <Icon name="ZoomIn" width={SPACING(1.5)} height={SPACING(1.5)} onClick={function () {
@@ -134,2 +152,2 @@ timeline.zoom.set(Math.min(1, zoom + 0.1));
 export default Timeline;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package.json

 {
   "name": "@magic-circle/timeline",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Magic Circle timeline",
@@ -36,5 +36,5 @@ "keywords": [
   "dependencies": {
-    "@magic-circle/layers": "^0.3.0",
-    "@magic-circle/state": "^0.3.0",
-    "@magic-circle/styles": "^0.3.0",
+    "@magic-circle/layers": "^0.3.1",
+    "@magic-circle/state": "^0.3.1",
+    "@magic-circle/styles": "^0.3.1",
     "file-saver": "^2.0.5",
@@ -45,3 +45,3 @@ "idb-keyval": "^6.2.0",
   "devDependencies": {
-    "@magic-circle/schema": "^0.3.0",
+    "@magic-circle/schema": "^0.3.1",
     "@types/react": "^18.0.21",
@@ -57,3 +57,3 @@ "typescript": "^4.8.4"
   },
-  "gitHead": "278cbcf3f9e3d8c061c6cef31ef4cb040010dd0c"
+  "gitHead": "8870797b570f3f4f723b521aaeecb43917646882"
 }

No alert changes

Improved metrics

Total package byte prevSize

85518

increased by0.84%

Lines of code

1638

increased by0.99%

Dependency changes

• Updated@magic-circle/layers@^0.3.1

• Updated@magic-circle/state@^0.3.1

• Updated@magic-circle/styles@^0.3.1