@code-hike/mini-editor - npm Package Compare versions

Comparing version 0.3.0-next.10 to 0.3.0-next.11

dist/index.cjs.js

@@ -8,4 +8,3 @@ 'use strict';
 var classer = require('@code-hike/classer');
-var codeDiff = require('@code-hike/code-diff');
-var smoothLines = require('@code-hike/smooth-lines');
+var smoothCode = require('@code-hike/smooth-code');
 var miniTerminal = require('@code-hike/mini-terminal');
@@ -32,17 +31,3 @@ var useSpring = require('use-spring');
 ***************************************************************************** */
-/* global Reflect, Promise */
 
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
 var __assign = function() {
@@ -155,3 +140,3 @@ __assign = Object.assign || function __assign(t) {
             northStyle: {
-                height: tween$1(prev.northHeight, next.northHeight, t),
+                height: tween(prev.northHeight, next.northHeight, t),
             },
@@ -177,4 +162,4 @@ southStyle: {
                 position: "relative",
-                height: tween$1(prev.southHeight, next.northHeight + next.titleBarHeight, t),
-                transform: "translateY(" + tween$1(0, -(prev.northHeight + prev.titleBarHeight), t) + "px)",
+                height: tween(prev.southHeight, next.northHeight + next.titleBarHeight, t),
+                transform: "translateY(" + tween(0, -(prev.northHeight + prev.titleBarHeight), t) + "px)",
             },
@@ -193,3 +178,3 @@ };
             northStyle: {
-                height: tween$1(prev.northHeight, next.northHeight, t),
+                height: tween(prev.northHeight, next.northHeight, t),
             },
@@ -216,4 +201,4 @@ southStyle: {
                 position: "relative",
-                height: tween$1(prev.northHeight + prev.titleBarHeight, next.southHeight, t),
-                transform: "translateY(" + tween$1(-(next.northHeight + next.titleBarHeight), 0, t) + "px)",
+                height: tween(prev.northHeight + prev.titleBarHeight, next.southHeight, t),
+                transform: "translateY(" + tween(-(next.northHeight + next.titleBarHeight), 0, t) + "px)",
             },
@@ -229,373 +214,13 @@ };
         northStyle: {
-            height: tween$1(prev.northHeight, next.northHeight, t),
+            height: tween(prev.northHeight, next.northHeight, t),
         },
         southStyle: {
-            height: tween$1(prev.southHeight, next.southHeight, t),
+            height: tween(prev.southHeight, next.southHeight, t),
         },
     };
 }
-function tween$1(a, b, t) {
+function tween(a, b, t) {
     return a + (b - a) * t;
 }
 
-var useLayoutEffect$1 = typeof window !== "undefined"
-    ? React__default['default'].useLayoutEffect
-    : React__default['default'].useEffect;
-var DEFAULT_WIDTH = 200;
-function useDimensions(deps) {
-    var ref = React__default['default'].useRef(null);
-    var _a = __read(React__default['default'].useState(null), 2), dimensions = _a[0], setDimensions = _a[1];
-    var windowWidth = useWindowWidth();
-    var fullDeps = __spread(deps, [windowWidth]);
-    useLayoutEffect$1(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (ref.current) {
-            var pll = ref.current.querySelector(".prev-longest-line");
-            var nll = ref.current.querySelector(".next-longest-line");
-            // TODO is it clientWidth or clientRect?
-            var plw = (_a = pll === null || pll === void 0 ? void 0 : pll.firstElementChild) === null || _a === void 0 ? void 0 : _a.clientWidth;
-            var nlw = (_b = nll === null || nll === void 0 ? void 0 : nll.firstElementChild) === null || _b === void 0 ? void 0 : _b.clientWidth;
-            var plh = (_d = (_c = pll === null || pll === void 0 ? void 0 : pll.firstElementChild) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 20;
-            var nlh = (_f = (_e = nll === null || nll === void 0 ? void 0 : nll.firstElementChild) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 20;
-            var colWidth = pll
-                ? plw / (((_g = pll.textContent) === null || _g === void 0 ? void 0 : _g.length) || 1)
-                : nlw / (((_h = nll.textContent) === null || _h === void 0 ? void 0 : _h.length) || 1);
-            setDimensions({
-                width: getWidthWithoutPadding(ref.current),
-                height: getHeightWithoutPadding(ref.current),
-                lineWidths: [
-                    plw || nlw || DEFAULT_WIDTH,
-                    nlw || plw || DEFAULT_WIDTH,
-                ],
-                lineHeight: Math.max(plh, nlh),
-                colWidth: colWidth,
-                deps: fullDeps,
-            });
-        }
-    }, fullDeps);
-    if (!dimensions ||
-        depsChanged(dimensions.deps, fullDeps)) {
-        return [ref, null];
-    }
-    else {
-        return [ref, dimensions];
-    }
-}
-function getWidthWithoutPadding(element) {
-    var computedStyle = getComputedStyle(element);
-    return (element.clientWidth -
-        parseFloat(computedStyle.paddingLeft) -
-        parseFloat(computedStyle.paddingRight));
-}
-function getHeightWithoutPadding(element) {
-    var computedStyle = getComputedStyle(element);
-    return (parseFloat(computedStyle.height) -
-        parseFloat(computedStyle.paddingTop) -
-        parseFloat(computedStyle.paddingBottom));
-}
-function depsChanged(oldDeps, newDeps) {
-    for (var i = 0; i < oldDeps.length; i++) {
-        if (oldDeps[i] !== newDeps[i])
-            return true;
-    }
-    return false;
-}
-function useWindowWidth() {
-    var _a = __read(React__default['default'].useState(undefined), 2), width = _a[0], setWidth = _a[1];
-    React__default['default'].useEffect(function () {
-        function handleResize() {
-            setWidth(window.innerWidth);
-        }
-        window.addEventListener("resize", handleResize);
-        return function () {
-            return window.removeEventListener("resize", handleResize);
-        };
-    }, []);
-    return width;
-}
-
-function getFocusIndexes(focus, lines) {
-    if (!focus) {
-        return __spread(lines.keys());
-    }
-    else {
-        var parsed = parseFocus(focus);
-        var focusedIndexes = Object.keys(parsed).map(function (i) {
-            return parseInt(i, 10);
-        });
-        return focusedIndexes;
-    }
-}
-function getFocusByKey(focus, keys) {
-    if (!focus) {
-        // focus all lines
-        return fromEntries(keys.map(function (key) { return [key, true]; }));
-    }
-    else {
-        var parsed_1 = parseFocus(focus);
-        var byKey_1 = {};
-        Object.keys(parsed_1).forEach(function (i) {
-            var key = keys[parseInt(i, 10)];
-            byKey_1[key] = parsed_1[parseInt(i, 10)];
-        });
-        return byKey_1;
-    }
-}
-function parseFocus(focus) {
-    if (!focus) {
-        throw new Error("Focus cannot be empty");
-    }
-    try {
-        var parts = focus
-            .split(/,(?![^\[]*\])/g)
-            .map(parsePart);
-        return fromEntries(parts.flat());
-    }
-    catch (error) {
-        // TODO enhance error
-        throw error;
-    }
-}
-function parsePart(part) {
-    // a part could be
-    // - a line number: "2"
-    // - a line range: "5:9"
-    // - a line number with a column selector: "2[1,3:5,9]"
-    var columnsMatch = part.match(/(\d+)\[(.+)\]/);
-    if (columnsMatch) {
-        var _a = __read(columnsMatch, 3), line = _a[1], columns = _a[2];
-        var columnsList = columns.split(",").map(expandString);
-        var lineIndex = Number(line) - 1;
-        var columnIndexes = columnsList.flat().map(function (c) { return c - 1; });
-        return [[lineIndex, columnIndexes]];
-    }
-    else {
-        return expandString(part).map(function (lineNumber) { return [
-            lineNumber - 1,
-            true,
-        ]; });
-    }
-}
-function expandString(part) {
-    // Transforms something like
-    // - "1:3" to [1,2,3]
-    // - "4" to [4]
-    var _a = __read(part.split(":"), 2), start = _a[0], end = _a[1];
-    if (!isNaturalNumber(start)) {
-        throw new FocusNumberError(start);
-    }
-    var startNumber = Number(start);
-    if (startNumber < 1) {
-        throw new LineOrColumnNumberError();
-    }
-    if (!end) {
-        return [startNumber];
-    }
-    else {
-        if (!isNaturalNumber(end)) {
-            throw new FocusNumberError(end);
-        }
-        var list = [];
-        for (var i = startNumber; i <= +end; i++) {
-            list.push(i);
-        }
-        return list;
-    }
-}
-function isNaturalNumber(n) {
-    n = n.toString(); // force the value in case it is not
-    var n1 = Math.abs(n), n2 = parseInt(n, 10);
-    return !isNaN(n1) && n2 === n1 && n1.toString() === n;
-}
-var LineOrColumnNumberError = /** @class */ (function (_super) {
-    __extends(LineOrColumnNumberError, _super);
-    function LineOrColumnNumberError() {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Invalid line or column number in focus string") || this;
-        Object.setPrototypeOf(_this, _newTarget.prototype);
-        return _this;
-    }
-    return LineOrColumnNumberError;
-}(Error));
-var FocusNumberError = /** @class */ (function (_super) {
-    __extends(FocusNumberError, _super);
-    function FocusNumberError(number) {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Invalid number \"" + number + "\" in focus string") || this;
-        _this.number = number;
-        Object.setPrototypeOf(_this, _newTarget.prototype);
-        return _this;
-    }
-    return FocusNumberError;
-}(Error));
-function fromEntries(pairs) {
-    var result = {};
-    var index = -1, length = pairs == null ? 0 : pairs.length;
-    while (++index < length) {
-        var pair = pairs[index];
-        result[pair[0]] = pair[1];
-    }
-    return result;
-}
-
-function Code(_a) {
-    var prevCode = _a.prevCode, prevFocus = _a.prevFocus, nextCode = _a.nextCode, nextFocus = _a.nextFocus, progress = _a.progress, language = _a.language, parentHeight = _a.parentHeight, _b = _a.minColumns, minColumns = _b === void 0 ? 40 : _b, _c = _a.minZoom, minZoom = _c === void 0 ? 0.5 : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? 1.5 : _d, _e = _a.horizontalCenter, horizontalCenter = _e === void 0 ? false : _e;
-    var _f = useLineProps(prevCode, nextCode, language, prevFocus, nextFocus), prevLines = _f.prevLines, nextLines = _f.nextLines, prevFocusIndexes = _f.prevFocusIndexes, nextFocusIndexes = _f.nextFocusIndexes, prevLongestLine = _f.prevLongestLine, nextLongestLine = _f.nextLongestLine;
-    var _g = __read(useDimensions([
-        parentHeight,
-        prevLongestLine,
-        nextLongestLine,
-    ]), 2), ref = _g[0], dimensions = _g[1];
-    return (React__default['default'].createElement("pre", { ref: ref, className: "language-" + language, style: {
-            opacity: dimensions ? 1 : 0,
-            overflow: dimensions ? undefined : "hidden",
-        } },
-        React__default['default'].createElement("code", null, dimensions ? (React__default['default'].createElement(smoothLines.SmoothLines, { progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
-                return Math.max(lw, dimensions.colWidth * minColumns);
-            }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, minZoom: minZoom, maxZoom: maxZoom, center: horizontalCenter })) : (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement("div", { className: "prev-longest-line" }, prevLongestLine),
-            React__default['default'].createElement("div", { className: "next-longest-line" }, nextLongestLine))))));
-}
-function useLineProps(prevCode, nextCode, language, prevFocus, nextFocus) {
-    return React__default['default'].useMemo(function () {
-        var _a, _b;
-        var _c = codeDiff.codeDiff({
-            prevCode: prevCode,
-            nextCode: nextCode,
-            lang: language,
-        }), prevKeys = _c.prevKeys, nextKeys = _c.nextKeys, codeMap = _c.codeMap;
-        var prevFocusByKey = getFocusByKey(prevFocus, prevKeys);
-        var prevFocusIndexes = getFocusIndexes(prevFocus, prevKeys);
-        var prevLongestLineIndex = longestLineIndex(prevCode, prevFocusIndexes);
-        var nextFocusByKey = getFocusByKey(nextFocus, nextKeys);
-        var nextFocusIndexes = getFocusIndexes(nextFocus, nextKeys);
-        var nextLongestLineIndex = longestLineIndex(nextCode, nextFocusIndexes);
-        var prevLines = prevKeys.map(function (key) {
-            var prevFocus = prevFocusByKey[key];
-            var nextFocus = nextFocusByKey[key];
-            var focusPerColumn = Array.isArray(prevFocus) || Array.isArray(nextFocus);
-            if (!focusPerColumn) {
-                return {
-                    key: key,
-                    element: React__default['default'].createElement(Line, { line: codeMap[key] }),
-                };
-            }
-            else {
-                return {
-                    key: key,
-                    element: React__default['default'].createElement(Line, { line: codeMap[key] }),
-                    elementWithProgress: function (progress) { return (React__default['default'].createElement(ColumnedLine, { line: codeMap[key], progress: progress, prevFocus: prevFocus, nextFocus: nextFocus })); },
-                };
-            }
-        });
-        var prevLongestLine = prevLongestLineIndex == null
-            ? null
-            : (_a = prevLines[prevLongestLineIndex]) === null || _a === void 0 ? void 0 : _a.element;
-        var nextLines = nextKeys.map(function (key) {
-            var prevFocus = prevFocusByKey[key];
-            var nextFocus = nextFocusByKey[key];
-            var focusPerColumn = Array.isArray(prevFocus) || Array.isArray(nextFocus);
-            if (!focusPerColumn) {
-                return {
-                    key: key,
-                    element: React__default['default'].createElement(Line, { line: codeMap[key] }),
-                };
-            }
-            else {
-                return {
-                    key: key,
-                    element: React__default['default'].createElement(Line, { line: codeMap[key] }),
-                    elementWithProgress: function (progress) { return (React__default['default'].createElement(ColumnedLine, { line: codeMap[key], progress: progress, prevFocus: prevFocus, nextFocus: nextFocus })); },
-                };
-            }
-        });
-        var nextLongestLine = nextLongestLineIndex == null
-            ? null
-            : (_b = nextLines[nextLongestLineIndex]) === null || _b === void 0 ? void 0 : _b.element;
-        return {
-            prevLines: prevLines,
-            nextLines: nextLines,
-            prevFocusIndexes: prevFocusIndexes,
-            nextFocusIndexes: nextFocusIndexes,
-            prevLongestLine: prevLongestLine,
-            nextLongestLine: nextLongestLine,
-        };
-    }, [prevCode, nextCode, language, prevFocus, nextFocus]);
-}
-function Line(_a) {
-    var line = _a.line;
-    return (React__default['default'].createElement("div", { style: {
-            display: "inline-block",
-        } },
-        line.map(function (_a, i) {
-            var _b = __read(_a, 2), token = _b[0], type = _b[1];
-            return (React__default['default'].createElement("span", { className: "token " + type, key: i + 1 }, token));
-        }),
-        React__default['default'].createElement("br", null)));
-}
-var OFF_OPACITY = 0.33;
-function ColumnedLine(_a) {
-    var line = _a.line, progress = _a.progress, prevFocus = _a.prevFocus, nextFocus = _a.nextFocus;
-    var columns = React__default['default'].useMemo(function () {
-        var chars = flatMap(line, function (_a) {
-            var _b = __read(_a, 2), token = _b[0], type = _b[1];
-            return token.split("").map(function (char) { return [char, type]; });
-        });
-        return chars.map(function (_a, i) {
-            var _b = __read(_a, 2), char = _b[0], type = _b[1];
-            return ({
-                char: char,
-                type: type,
-                fromOpacity: !prevFocus
-                    ? 0.99 // because the line is already transparent
-                    : prevFocus === true || prevFocus.includes(i)
-                        ? 0.99
-                        : OFF_OPACITY,
-                toOpacity: !nextFocus
-                    ? 0.99 // because the line is already transparent
-                    : nextFocus === true || nextFocus.includes(i)
-                        ? 0.99
-                        : OFF_OPACITY,
-            });
-        });
-    }, [line, prevFocus, nextFocus]);
-    return (React__default['default'].createElement("div", { style: {
-            display: "inline-block",
-            width: "100%",
-        } },
-        columns.map(function (_a, i) {
-            var char = _a.char, type = _a.type, fromOpacity = _a.fromOpacity, toOpacity = _a.toOpacity;
-            return (React__default['default'].createElement("span", { className: "token " + type, key: i + 1, style: {
-                    opacity: tween(fromOpacity, toOpacity, progress),
-                } }, char));
-        }),
-        React__default['default'].createElement("br", null)));
-}
-function tween(p, n, t) {
-    return (n - p) * t + p;
-}
-var newlineRe = /\r\n|\r|\n/;
-function longestLineIndex(code, focusIndexes) {
-    var first = Math.min.apply(Math, __spread(focusIndexes));
-    var last = Math.max.apply(Math, __spread(focusIndexes));
-    var focusedLines = code == null
-        ? []
-        : code.split(newlineRe).slice(first, last + 1);
-    if (!focusedLines.length) {
-        return null;
-    }
-    var longestIndex = 0;
-    for (var i = 1; i < focusedLines.length; i++) {
-        if (focusedLines[i].length >
-            focusedLines[longestIndex].length) {
-            longestIndex = i;
-        }
-    }
-    return first + longestIndex;
-}
-function flatMap(array, callbackfn) {
-    var _a;
-    return (_a = Array.prototype).concat.apply(_a, __spread(array.map(callbackfn)));
-}
-
 var useLayoutEffect = typeof window !== "undefined"
@@ -932,3 +557,3 @@ ? React__default['default'].useLayoutEffect
     var prevFile = _a.prevFile, nextFile = _a.nextFile, t = _a.t, codeProps = _a.codeProps;
-    return (React__default['default'].createElement(Code, __assign({}, codeProps, { prevCode: prevFile.code, nextCode: nextFile.code, progress: t, language: prevFile.lang, prevFocus: prevFile.focus || null, nextFocus: nextFile.focus || null, parentHeight: t })));
+    return (React__default['default'].createElement(smoothCode.Code, __assign({}, codeProps, { prevCode: prevFile.code, nextCode: nextFile.code, progress: t, language: prevFile.lang, prevFocus: prevFile.focus || null, nextFocus: nextFile.focus || null, parentHeight: t })));
 }
@@ -1015,2 +640,8 @@ /**
 
+var defaultSpring = {
+    stiffness: 120,
+    damping: 24,
+    mass: 0.2,
+    decimals: 3,
+};
 function MiniEditor(props) {
@@ -1028,3 +659,3 @@ if ("northPanel" in props) {
 function SingleFileEditor(_a) {
-    var _b = _a.code, code = _b === void 0 ? "" : _b, _c = _a.lang, lang = _c === void 0 ? "js" : _c, focus = _a.focus, _d = _a.filename, filename = _d === void 0 ? "" : _d, terminal = _a.terminal, frameProps = _a.frameProps, codeProps = _a.codeProps;
+    var _b = _a.code, code = _b === void 0 ? "" : _b, _c = _a.lang, lang = _c === void 0 ? "js" : _c, focus = _a.focus, _d = _a.filename, filename = _d === void 0 ? "" : _d, terminal = _a.terminal, springConfig = _a.springConfig, props = __rest(_a, ["code", "lang", "focus", "filename", "terminal", "springConfig"]);
     var step = React__default['default'].useMemo(function () {
@@ -1042,7 +673,7 @@ var step = {
     }, [code, lang, focus, filename, terminal]);
-    var _e = useStepSpring(step), prev = _e.prev, next = _e.next, t = _e.t;
-    return (React__default['default'].createElement(MiniEditorTween, { frameProps: frameProps, t: t, backward: false, prev: prev, next: next, codeProps: codeProps }));
+    var _e = useStepSpring(step, springConfig), prev = _e.prev, next = _e.next, t = _e.t;
+    return (React__default['default'].createElement(MiniEditorTween, __assign({ t: t, backward: false, prev: prev, next: next }, props)));
 }
 function SinglePanelEditor(_a) {
-    var files = _a.files, active = _a.active, terminal = _a.terminal, frameProps = _a.frameProps, codeProps = _a.codeProps;
+    var files = _a.files, active = _a.active, terminal = _a.terminal, springConfig = _a.springConfig, props = __rest(_a, ["files", "active", "terminal", "springConfig"]);
     var step = React__default['default'].useMemo(function () {
@@ -1061,7 +692,7 @@ var tabs = files.map(function (file) { return file.name; });
     }, [files, active, terminal]);
-    var _b = useStepSpring(step), prev = _b.prev, next = _b.next, t = _b.t;
-    return (React__default['default'].createElement(MiniEditorTween, { frameProps: frameProps, t: t, backward: false, prev: prev, next: next, codeProps: codeProps }));
+    var _b = useStepSpring(step, springConfig), prev = _b.prev, next = _b.next, t = _b.t;
+    return (React__default['default'].createElement(MiniEditorTween, __assign({ t: t, backward: false, prev: prev, next: next }, props)));
 }
 function TwoPanelEditor(_a) {
-    var frameProps = _a.frameProps, codeProps = _a.codeProps, northPanel = _a.northPanel, southPanel = _a.southPanel, files = _a.files, terminal = _a.terminal;
+    var northPanel = _a.northPanel, southPanel = _a.southPanel, files = _a.files, terminal = _a.terminal, springConfig = _a.springConfig, props = __rest(_a, ["northPanel", "southPanel", "files", "terminal", "springConfig"]);
     var step = React__default['default'].useMemo(function () {
@@ -1075,6 +706,7 @@ return {
     }, [northPanel, southPanel, files, terminal]);
-    var _b = useStepSpring(step), prev = _b.prev, next = _b.next, t = _b.t;
-    return (React__default['default'].createElement(MiniEditorTween, { frameProps: frameProps, t: t, backward: false, prev: prev, next: next, codeProps: codeProps }));
+    var _b = useStepSpring(step, springConfig), prev = _b.prev, next = _b.next, t = _b.t;
+    return (React__default['default'].createElement(MiniEditorTween, __assign({ t: t, backward: false, prev: prev, next: next }, props)));
 }
-function useStepSpring(step) {
+function useStepSpring(step, springConfig) {
+    if (springConfig === void 0) { springConfig = defaultSpring; }
     var _a = __read(React__default['default'].useState({
@@ -1094,8 +726,3 @@ target: 0,
     }, [step]);
-    var _c = __read(useSpring.useSpring(target, {
-        stiffness: 256,
-        damping: 24,
-        mass: 0.2,
-        decimals: 3,
-    }), 1), progress = _c[0];
+    var _c = __read(useSpring.useSpring(target, springConfig), 1), progress = _c[0];
     var t = progress % 1;
@@ -1102,0 +729,0 @@ return { prev: prev, next: next, t: t || 1 };

dist/index.esm.js

 import React from 'react';
 import { MiniFrame, FrameButtons } from '@code-hike/mini-frame';
 import { useClasser } from '@code-hike/classer';
-import { codeDiff } from '@code-hike/code-diff';
-import { SmoothLines } from '@code-hike/smooth-lines';
+import { Code } from '@code-hike/smooth-code';
 import { InnerTerminal } from '@code-hike/mini-terminal';
@@ -23,17 +22,3 @@ import { useSpring } from 'use-spring';
 ***************************************************************************** */
-/* global Reflect, Promise */
 
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
 var __assign = function() {
@@ -146,3 +131,3 @@ __assign = Object.assign || function __assign(t) {
             northStyle: {
-                height: tween$1(prev.northHeight, next.northHeight, t),
+                height: tween(prev.northHeight, next.northHeight, t),
             },
@@ -168,4 +153,4 @@ southStyle: {
                 position: "relative",
-                height: tween$1(prev.southHeight, next.northHeight + next.titleBarHeight, t),
-                transform: "translateY(" + tween$1(0, -(prev.northHeight + prev.titleBarHeight), t) + "px)",
+                height: tween(prev.southHeight, next.northHeight + next.titleBarHeight, t),
+                transform: "translateY(" + tween(0, -(prev.northHeight + prev.titleBarHeight), t) + "px)",
             },
@@ -184,3 +169,3 @@ };
             northStyle: {
-                height: tween$1(prev.northHeight, next.northHeight, t),
+                height: tween(prev.northHeight, next.northHeight, t),
             },
@@ -207,4 +192,4 @@ southStyle: {
                 position: "relative",
-                height: tween$1(prev.northHeight + prev.titleBarHeight, next.southHeight, t),
-                transform: "translateY(" + tween$1(-(next.northHeight + next.titleBarHeight), 0, t) + "px)",
+                height: tween(prev.northHeight + prev.titleBarHeight, next.southHeight, t),
+                transform: "translateY(" + tween(-(next.northHeight + next.titleBarHeight), 0, t) + "px)",
             },
@@ -220,373 +205,13 @@ };
         northStyle: {
-            height: tween$1(prev.northHeight, next.northHeight, t),
+            height: tween(prev.northHeight, next.northHeight, t),
         },
         southStyle: {
-            height: tween$1(prev.southHeight, next.southHeight, t),
+            height: tween(prev.southHeight, next.southHeight, t),
         },
     };
 }
-function tween$1(a, b, t) {
+function tween(a, b, t) {
     return a + (b - a) * t;
 }
 
-var useLayoutEffect$1 = typeof window !== "undefined"
-    ? React.useLayoutEffect
-    : React.useEffect;
-var DEFAULT_WIDTH = 200;
-function useDimensions(deps) {
-    var ref = React.useRef(null);
-    var _a = __read(React.useState(null), 2), dimensions = _a[0], setDimensions = _a[1];
-    var windowWidth = useWindowWidth();
-    var fullDeps = __spread(deps, [windowWidth]);
-    useLayoutEffect$1(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (ref.current) {
-            var pll = ref.current.querySelector(".prev-longest-line");
-            var nll = ref.current.querySelector(".next-longest-line");
-            // TODO is it clientWidth or clientRect?
-            var plw = (_a = pll === null || pll === void 0 ? void 0 : pll.firstElementChild) === null || _a === void 0 ? void 0 : _a.clientWidth;
-            var nlw = (_b = nll === null || nll === void 0 ? void 0 : nll.firstElementChild) === null || _b === void 0 ? void 0 : _b.clientWidth;
-            var plh = (_d = (_c = pll === null || pll === void 0 ? void 0 : pll.firstElementChild) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 20;
-            var nlh = (_f = (_e = nll === null || nll === void 0 ? void 0 : nll.firstElementChild) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 20;
-            var colWidth = pll
-                ? plw / (((_g = pll.textContent) === null || _g === void 0 ? void 0 : _g.length) || 1)
-                : nlw / (((_h = nll.textContent) === null || _h === void 0 ? void 0 : _h.length) || 1);
-            setDimensions({
-                width: getWidthWithoutPadding(ref.current),
-                height: getHeightWithoutPadding(ref.current),
-                lineWidths: [
-                    plw || nlw || DEFAULT_WIDTH,
-                    nlw || plw || DEFAULT_WIDTH,
-                ],
-                lineHeight: Math.max(plh, nlh),
-                colWidth: colWidth,
-                deps: fullDeps,
-            });
-        }
-    }, fullDeps);
-    if (!dimensions ||
-        depsChanged(dimensions.deps, fullDeps)) {
-        return [ref, null];
-    }
-    else {
-        return [ref, dimensions];
-    }
-}
-function getWidthWithoutPadding(element) {
-    var computedStyle = getComputedStyle(element);
-    return (element.clientWidth -
-        parseFloat(computedStyle.paddingLeft) -
-        parseFloat(computedStyle.paddingRight));
-}
-function getHeightWithoutPadding(element) {
-    var computedStyle = getComputedStyle(element);
-    return (parseFloat(computedStyle.height) -
-        parseFloat(computedStyle.paddingTop) -
-        parseFloat(computedStyle.paddingBottom));
-}
-function depsChanged(oldDeps, newDeps) {
-    for (var i = 0; i < oldDeps.length; i++) {
-        if (oldDeps[i] !== newDeps[i])
-            return true;
-    }
-    return false;
-}
-function useWindowWidth() {
-    var _a = __read(React.useState(undefined), 2), width = _a[0], setWidth = _a[1];
-    React.useEffect(function () {
-        function handleResize() {
-            setWidth(window.innerWidth);
-        }
-        window.addEventListener("resize", handleResize);
-        return function () {
-            return window.removeEventListener("resize", handleResize);
-        };
-    }, []);
-    return width;
-}
-
-function getFocusIndexes(focus, lines) {
-    if (!focus) {
-        return __spread(lines.keys());
-    }
-    else {
-        var parsed = parseFocus(focus);
-        var focusedIndexes = Object.keys(parsed).map(function (i) {
-            return parseInt(i, 10);
-        });
-        return focusedIndexes;
-    }
-}
-function getFocusByKey(focus, keys) {
-    if (!focus) {
-        // focus all lines
-        return fromEntries(keys.map(function (key) { return [key, true]; }));
-    }
-    else {
-        var parsed_1 = parseFocus(focus);
-        var byKey_1 = {};
-        Object.keys(parsed_1).forEach(function (i) {
-            var key = keys[parseInt(i, 10)];
-            byKey_1[key] = parsed_1[parseInt(i, 10)];
-        });
-        return byKey_1;
-    }
-}
-function parseFocus(focus) {
-    if (!focus) {
-        throw new Error("Focus cannot be empty");
-    }
-    try {
-        var parts = focus
-            .split(/,(?![^\[]*\])/g)
-            .map(parsePart);
-        return fromEntries(parts.flat());
-    }
-    catch (error) {
-        // TODO enhance error
-        throw error;
-    }
-}
-function parsePart(part) {
-    // a part could be
-    // - a line number: "2"
-    // - a line range: "5:9"
-    // - a line number with a column selector: "2[1,3:5,9]"
-    var columnsMatch = part.match(/(\d+)\[(.+)\]/);
-    if (columnsMatch) {
-        var _a = __read(columnsMatch, 3), line = _a[1], columns = _a[2];
-        var columnsList = columns.split(",").map(expandString);
-        var lineIndex = Number(line) - 1;
-        var columnIndexes = columnsList.flat().map(function (c) { return c - 1; });
-        return [[lineIndex, columnIndexes]];
-    }
-    else {
-        return expandString(part).map(function (lineNumber) { return [
-            lineNumber - 1,
-            true,
-        ]; });
-    }
-}
-function expandString(part) {
-    // Transforms something like
-    // - "1:3" to [1,2,3]
-    // - "4" to [4]
-    var _a = __read(part.split(":"), 2), start = _a[0], end = _a[1];
-    if (!isNaturalNumber(start)) {
-        throw new FocusNumberError(start);
-    }
-    var startNumber = Number(start);
-    if (startNumber < 1) {
-        throw new LineOrColumnNumberError();
-    }
-    if (!end) {
-        return [startNumber];
-    }
-    else {
-        if (!isNaturalNumber(end)) {
-            throw new FocusNumberError(end);
-        }
-        var list = [];
-        for (var i = startNumber; i <= +end; i++) {
-            list.push(i);
-        }
-        return list;
-    }
-}
-function isNaturalNumber(n) {
-    n = n.toString(); // force the value in case it is not
-    var n1 = Math.abs(n), n2 = parseInt(n, 10);
-    return !isNaN(n1) && n2 === n1 && n1.toString() === n;
-}
-var LineOrColumnNumberError = /** @class */ (function (_super) {
-    __extends(LineOrColumnNumberError, _super);
-    function LineOrColumnNumberError() {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Invalid line or column number in focus string") || this;
-        Object.setPrototypeOf(_this, _newTarget.prototype);
-        return _this;
-    }
-    return LineOrColumnNumberError;
-}(Error));
-var FocusNumberError = /** @class */ (function (_super) {
-    __extends(FocusNumberError, _super);
-    function FocusNumberError(number) {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Invalid number \"" + number + "\" in focus string") || this;
-        _this.number = number;
-        Object.setPrototypeOf(_this, _newTarget.prototype);
-        return _this;
-    }
-    return FocusNumberError;
-}(Error));
-function fromEntries(pairs) {
-    var result = {};
-    var index = -1, length = pairs == null ? 0 : pairs.length;
-    while (++index < length) {
-        var pair = pairs[index];
-        result[pair[0]] = pair[1];
-    }
-    return result;
-}
-
-function Code(_a) {
-    var prevCode = _a.prevCode, prevFocus = _a.prevFocus, nextCode = _a.nextCode, nextFocus = _a.nextFocus, progress = _a.progress, language = _a.language, parentHeight = _a.parentHeight, _b = _a.minColumns, minColumns = _b === void 0 ? 40 : _b, _c = _a.minZoom, minZoom = _c === void 0 ? 0.5 : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? 1.5 : _d, _e = _a.horizontalCenter, horizontalCenter = _e === void 0 ? false : _e;
-    var _f = useLineProps(prevCode, nextCode, language, prevFocus, nextFocus), prevLines = _f.prevLines, nextLines = _f.nextLines, prevFocusIndexes = _f.prevFocusIndexes, nextFocusIndexes = _f.nextFocusIndexes, prevLongestLine = _f.prevLongestLine, nextLongestLine = _f.nextLongestLine;
-    var _g = __read(useDimensions([
-        parentHeight,
-        prevLongestLine,
-        nextLongestLine,
-    ]), 2), ref = _g[0], dimensions = _g[1];
-    return (React.createElement("pre", { ref: ref, className: "language-" + language, style: {
-            opacity: dimensions ? 1 : 0,
-            overflow: dimensions ? undefined : "hidden",
-        } },
-        React.createElement("code", null, dimensions ? (React.createElement(SmoothLines, { progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
-                return Math.max(lw, dimensions.colWidth * minColumns);
-            }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, minZoom: minZoom, maxZoom: maxZoom, center: horizontalCenter })) : (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "prev-longest-line" }, prevLongestLine),
-            React.createElement("div", { className: "next-longest-line" }, nextLongestLine))))));
-}
-function useLineProps(prevCode, nextCode, language, prevFocus, nextFocus) {
-    return React.useMemo(function () {
-        var _a, _b;
-        var _c = codeDiff({
-            prevCode: prevCode,
-            nextCode: nextCode,
-            lang: language,
-        }), prevKeys = _c.prevKeys, nextKeys = _c.nextKeys, codeMap = _c.codeMap;
-        var prevFocusByKey = getFocusByKey(prevFocus, prevKeys);
-        var prevFocusIndexes = getFocusIndexes(prevFocus, prevKeys);
-        var prevLongestLineIndex = longestLineIndex(prevCode, prevFocusIndexes);
-        var nextFocusByKey = getFocusByKey(nextFocus, nextKeys);
-        var nextFocusIndexes = getFocusIndexes(nextFocus, nextKeys);
-        var nextLongestLineIndex = longestLineIndex(nextCode, nextFocusIndexes);
-        var prevLines = prevKeys.map(function (key) {
-            var prevFocus = prevFocusByKey[key];
-            var nextFocus = nextFocusByKey[key];
-            var focusPerColumn = Array.isArray(prevFocus) || Array.isArray(nextFocus);
-            if (!focusPerColumn) {
-                return {
-                    key: key,
-                    element: React.createElement(Line, { line: codeMap[key] }),
-                };
-            }
-            else {
-                return {
-                    key: key,
-                    element: React.createElement(Line, { line: codeMap[key] }),
-                    elementWithProgress: function (progress) { return (React.createElement(ColumnedLine, { line: codeMap[key], progress: progress, prevFocus: prevFocus, nextFocus: nextFocus })); },
-                };
-            }
-        });
-        var prevLongestLine = prevLongestLineIndex == null
-            ? null
-            : (_a = prevLines[prevLongestLineIndex]) === null || _a === void 0 ? void 0 : _a.element;
-        var nextLines = nextKeys.map(function (key) {
-            var prevFocus = prevFocusByKey[key];
-            var nextFocus = nextFocusByKey[key];
-            var focusPerColumn = Array.isArray(prevFocus) || Array.isArray(nextFocus);
-            if (!focusPerColumn) {
-                return {
-                    key: key,
-                    element: React.createElement(Line, { line: codeMap[key] }),
-                };
-            }
-            else {
-                return {
-                    key: key,
-                    element: React.createElement(Line, { line: codeMap[key] }),
-                    elementWithProgress: function (progress) { return (React.createElement(ColumnedLine, { line: codeMap[key], progress: progress, prevFocus: prevFocus, nextFocus: nextFocus })); },
-                };
-            }
-        });
-        var nextLongestLine = nextLongestLineIndex == null
-            ? null
-            : (_b = nextLines[nextLongestLineIndex]) === null || _b === void 0 ? void 0 : _b.element;
-        return {
-            prevLines: prevLines,
-            nextLines: nextLines,
-            prevFocusIndexes: prevFocusIndexes,
-            nextFocusIndexes: nextFocusIndexes,
-            prevLongestLine: prevLongestLine,
-            nextLongestLine: nextLongestLine,
-        };
-    }, [prevCode, nextCode, language, prevFocus, nextFocus]);
-}
-function Line(_a) {
-    var line = _a.line;
-    return (React.createElement("div", { style: {
-            display: "inline-block",
-        } },
-        line.map(function (_a, i) {
-            var _b = __read(_a, 2), token = _b[0], type = _b[1];
-            return (React.createElement("span", { className: "token " + type, key: i + 1 }, token));
-        }),
-        React.createElement("br", null)));
-}
-var OFF_OPACITY = 0.33;
-function ColumnedLine(_a) {
-    var line = _a.line, progress = _a.progress, prevFocus = _a.prevFocus, nextFocus = _a.nextFocus;
-    var columns = React.useMemo(function () {
-        var chars = flatMap(line, function (_a) {
-            var _b = __read(_a, 2), token = _b[0], type = _b[1];
-            return token.split("").map(function (char) { return [char, type]; });
-        });
-        return chars.map(function (_a, i) {
-            var _b = __read(_a, 2), char = _b[0], type = _b[1];
-            return ({
-                char: char,
-                type: type,
-                fromOpacity: !prevFocus
-                    ? 0.99 // because the line is already transparent
-                    : prevFocus === true || prevFocus.includes(i)
-                        ? 0.99
-                        : OFF_OPACITY,
-                toOpacity: !nextFocus
-                    ? 0.99 // because the line is already transparent
-                    : nextFocus === true || nextFocus.includes(i)
-                        ? 0.99
-                        : OFF_OPACITY,
-            });
-        });
-    }, [line, prevFocus, nextFocus]);
-    return (React.createElement("div", { style: {
-            display: "inline-block",
-            width: "100%",
-        } },
-        columns.map(function (_a, i) {
-            var char = _a.char, type = _a.type, fromOpacity = _a.fromOpacity, toOpacity = _a.toOpacity;
-            return (React.createElement("span", { className: "token " + type, key: i + 1, style: {
-                    opacity: tween(fromOpacity, toOpacity, progress),
-                } }, char));
-        }),
-        React.createElement("br", null)));
-}
-function tween(p, n, t) {
-    return (n - p) * t + p;
-}
-var newlineRe = /\r\n|\r|\n/;
-function longestLineIndex(code, focusIndexes) {
-    var first = Math.min.apply(Math, __spread(focusIndexes));
-    var last = Math.max.apply(Math, __spread(focusIndexes));
-    var focusedLines = code == null
-        ? []
-        : code.split(newlineRe).slice(first, last + 1);
-    if (!focusedLines.length) {
-        return null;
-    }
-    var longestIndex = 0;
-    for (var i = 1; i < focusedLines.length; i++) {
-        if (focusedLines[i].length >
-            focusedLines[longestIndex].length) {
-            longestIndex = i;
-        }
-    }
-    return first + longestIndex;
-}
-function flatMap(array, callbackfn) {
-    var _a;
-    return (_a = Array.prototype).concat.apply(_a, __spread(array.map(callbackfn)));
-}
-
 var useLayoutEffect = typeof window !== "undefined"
@@ -1005,2 +630,8 @@ ? React.useLayoutEffect
 
+var defaultSpring = {
+    stiffness: 120,
+    damping: 24,
+    mass: 0.2,
+    decimals: 3,
+};
 function MiniEditor(props) {
@@ -1018,3 +649,3 @@ if ("northPanel" in props) {
 function SingleFileEditor(_a) {
-    var _b = _a.code, code = _b === void 0 ? "" : _b, _c = _a.lang, lang = _c === void 0 ? "js" : _c, focus = _a.focus, _d = _a.filename, filename = _d === void 0 ? "" : _d, terminal = _a.terminal, frameProps = _a.frameProps, codeProps = _a.codeProps;
+    var _b = _a.code, code = _b === void 0 ? "" : _b, _c = _a.lang, lang = _c === void 0 ? "js" : _c, focus = _a.focus, _d = _a.filename, filename = _d === void 0 ? "" : _d, terminal = _a.terminal, springConfig = _a.springConfig, props = __rest(_a, ["code", "lang", "focus", "filename", "terminal", "springConfig"]);
     var step = React.useMemo(function () {
@@ -1032,7 +663,7 @@ var step = {
     }, [code, lang, focus, filename, terminal]);
-    var _e = useStepSpring(step), prev = _e.prev, next = _e.next, t = _e.t;
-    return (React.createElement(MiniEditorTween, { frameProps: frameProps, t: t, backward: false, prev: prev, next: next, codeProps: codeProps }));
+    var _e = useStepSpring(step, springConfig), prev = _e.prev, next = _e.next, t = _e.t;
+    return (React.createElement(MiniEditorTween, __assign({ t: t, backward: false, prev: prev, next: next }, props)));
 }
 function SinglePanelEditor(_a) {
-    var files = _a.files, active = _a.active, terminal = _a.terminal, frameProps = _a.frameProps, codeProps = _a.codeProps;
+    var files = _a.files, active = _a.active, terminal = _a.terminal, springConfig = _a.springConfig, props = __rest(_a, ["files", "active", "terminal", "springConfig"]);
     var step = React.useMemo(function () {
@@ -1051,7 +682,7 @@ var tabs = files.map(function (file) { return file.name; });
     }, [files, active, terminal]);
-    var _b = useStepSpring(step), prev = _b.prev, next = _b.next, t = _b.t;
-    return (React.createElement(MiniEditorTween, { frameProps: frameProps, t: t, backward: false, prev: prev, next: next, codeProps: codeProps }));
+    var _b = useStepSpring(step, springConfig), prev = _b.prev, next = _b.next, t = _b.t;
+    return (React.createElement(MiniEditorTween, __assign({ t: t, backward: false, prev: prev, next: next }, props)));
 }
 function TwoPanelEditor(_a) {
-    var frameProps = _a.frameProps, codeProps = _a.codeProps, northPanel = _a.northPanel, southPanel = _a.southPanel, files = _a.files, terminal = _a.terminal;
+    var northPanel = _a.northPanel, southPanel = _a.southPanel, files = _a.files, terminal = _a.terminal, springConfig = _a.springConfig, props = __rest(_a, ["northPanel", "southPanel", "files", "terminal", "springConfig"]);
     var step = React.useMemo(function () {
@@ -1065,6 +696,7 @@ return {
     }, [northPanel, southPanel, files, terminal]);
-    var _b = useStepSpring(step), prev = _b.prev, next = _b.next, t = _b.t;
-    return (React.createElement(MiniEditorTween, { frameProps: frameProps, t: t, backward: false, prev: prev, next: next, codeProps: codeProps }));
+    var _b = useStepSpring(step, springConfig), prev = _b.prev, next = _b.next, t = _b.t;
+    return (React.createElement(MiniEditorTween, __assign({ t: t, backward: false, prev: prev, next: next }, props)));
 }
-function useStepSpring(step) {
+function useStepSpring(step, springConfig) {
+    if (springConfig === void 0) { springConfig = defaultSpring; }
     var _a = __read(React.useState({
@@ -1084,8 +716,3 @@ target: 0,
     }, [step]);
-    var _c = __read(useSpring(target, {
-        stiffness: 256,
-        damping: 24,
-        mass: 0.2,
-        decimals: 3,
-    }), 1), progress = _c[0];
+    var _c = __read(useSpring(target, springConfig), 1), progress = _c[0];
     var t = progress % 1;
@@ -1092,0 +719,0 @@ return { prev: prev, next: next, t: t || 1 };

dist/mini-editor-hike.d.ts

 /// <reference types="react" />
 import { EditorStep } from "./use-snapshots";
-import { CodeProps } from "./code";
+import { CodeProps } from "@code-hike/smooth-code";
 import { EditorFrameProps } from "./editor-frame";
@@ -5,0 +5,0 @@ export { MiniEditorHike, MiniEditorHikeProps, EditorStep };

dist/mini-editor-spring.d.ts

 /// <reference types="react" />
+import { useSpring } from "use-spring";
 import { EditorStep, StepFile } from "./use-snapshots";
-import { CodeProps } from "./code";
+import { CodeProps } from "@code-hike/smooth-code";
 import { EditorFrameProps } from "./editor-frame";
 export { MiniEditor, MiniEditorProps };
+declare type SpringConfig = Parameters<typeof useSpring>[1];
 declare type SingleFileEditorProps = {
@@ -14,2 +16,3 @@ code: string;
     codeProps?: Partial<CodeProps>;
+    springConfig?: SpringConfig;
 };
@@ -22,2 +25,3 @@ declare type SinglePanelEditorProps = {
     codeProps?: Partial<CodeProps>;
+    springConfig?: SpringConfig;
 };
@@ -27,4 +31,5 @@ declare type TwoPanelEditorProps = EditorStep & {
     codeProps?: Partial<CodeProps>;
+    springConfig?: SpringConfig;
 };
 declare type MiniEditorProps = SingleFileEditorProps | SinglePanelEditorProps | TwoPanelEditorProps;
 declare function MiniEditor(props: MiniEditorProps): JSX.Element;

dist/mini-editor-tween.d.ts

 /// <reference types="react" />
 import { EditorFrameProps } from "./editor-frame";
-import { CodeProps } from "./code";
+import { CodeProps } from "@code-hike/smooth-code";
 import { EditorStep } from "./use-snapshots";
@@ -5,0 +5,0 @@ export { EditorTransition, EditorTransitionProps, MiniEditorTween, MiniEditorTweenProps, };

package.json

 {
   "name": "@code-hike/mini-editor",
-  "version": "0.3.0-next.10",
+  "version": "0.3.0-next.11",
   "main": "dist/index.cjs.js",
@@ -15,3 +15,3 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@code-hike/script": "0.3.0-next.10",
+    "@code-hike/script": "0.3.0-next.11",
     "@types/react": "^16.9.38",
@@ -21,7 +21,6 @@ "react": "^16.13.1"
   "dependencies": {
-    "@code-hike/classer": "0.3.0-next.10",
-    "@code-hike/code-diff": "0.3.0-next.10",
-    "@code-hike/mini-frame": "0.3.0-next.10",
-    "@code-hike/mini-terminal": "0.3.0-next.10",
-    "@code-hike/smooth-lines": "0.3.0-next.10",
+    "@code-hike/classer": "0.3.0-next.11",
+    "@code-hike/mini-frame": "0.3.0-next.11",
+    "@code-hike/mini-terminal": "0.3.0-next.11",
+    "@code-hike/smooth-code": "0.3.0-next.11",
     "use-spring": "^0.2.3"
@@ -37,2 +36,5 @@ },
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "Rodrigo Pombo",
@@ -44,3 +46,3 @@ "license": "MIT",
   },
-  "gitHead": "3ce6287460eef6e00f5d3717eb2dc60d90c99522"
+  "gitHead": "0af981663c74dd5d89f486839bddf1740bafe4c2"
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-14.29%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

92368

decreased by-27.51%

Number of package files

17

decreased by-19.05%

Lines of code

1813

decreased by-31.25%

Dependency changes

• + Added@code-hike/smooth-code@0.3.0-next.11

• + Added@code-hike/classer@0.3.0-next.11(transitive)

• + Added@code-hike/code-diff@0.3.0-next.11(transitive)

• + Added@code-hike/mini-frame@0.3.0-next.11(transitive)

• + Added@code-hike/mini-terminal@0.3.0-next.11(transitive)

• + Added@code-hike/smooth-code@0.3.0-next.11(transitive)

• + Added@code-hike/smooth-lines@0.3.0-next.11(transitive)

• - Removed@code-hike/code-diff@0.3.0-next.10

• - Removed@code-hike/smooth-lines@0.3.0-next.10

• - Removed@code-hike/classer@0.3.0-next.10(transitive)

• - Removed@code-hike/code-diff@0.3.0-next.10(transitive)

• - Removed@code-hike/mini-frame@0.3.0-next.10(transitive)

• - Removed@code-hike/mini-terminal@0.3.0-next.10(transitive)

• - Removed@code-hike/smooth-lines@0.3.0-next.10(transitive)

• Updated@code-hike/classer@0.3.0-next.11

• Updated@code-hike/mini-frame@0.3.0-next.11

• Updated@code-hike/mini-terminal@0.3.0-next.11