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

Comparing version 0.0.0-2a67cd7 to 0.0.0-4adbd70

dist/code.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 declare type CodeProps = {
@@ -2,0 +3,0 @@ prevCode: string;

dist/editor-frame.d.ts

 import React from "react";
-import "./editor-frame.css";
+import "./index.scss";
 export { EditorFrame, TerminalPanel };
@@ -10,4 +10,5 @@ declare type EditorFrameProps = {
     button?: React.ReactNode;
+    classes: Record<string, string>;
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>;
-declare function EditorFrame({ files, active, children, terminalPanel, height, style, button, ...rest }: EditorFrameProps): JSX.Element;
+declare function EditorFrame({ files, active, children, terminalPanel, height, style, button, classes, ...rest }: EditorFrameProps): JSX.Element;
 declare type TerminalPanelProps = {
@@ -14,0 +15,0 @@ height?: number;

dist/index.cjs.js

@@ -7,2 +7,3 @@ 'use strict';
 var miniFrame = require('@code-hike/mini-frame');
+var utils = require('@code-hike/utils');
 var miniTerminal = require('@code-hike/mini-terminal');
@@ -92,19 +93,20 @@ var codeDiff = require('@code-hike/code-diff');
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ".ch-editor-tab{border-right:1px solid #252526;width:120px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;flex-shrink:0;position:relative;display:flex;white-space:nowrap;cursor:pointer;height:100%;box-sizing:border-box;padding-left:15px;padding-right:15px;background-color:#2d2d2d;color:hsla(0,0%,100%,.5)}.ch-editor-tab[data-active]{background-color:#1e1e1e;color:#fff}.ch-editor-tab>div{margin-top:auto;margin-bottom:auto;font-size:12px;line-height:1.4em;text-overflow:ellipsis}.ch-editor-body{background-color:#1e1e1e;height:100%;color:#ccc;font-size:15px;padding:5px 10px;line-height:1.1rem;box-sizing:border-box}.ch-editor-body code{line-height:20px}.ch-editor-terminal{position:absolute;overflow:hidden;bottom:0;width:100%;background-color:#1e1e1e;color:#e7e7e7;border-top:1px solid hsla(0,0%,50.2%,.35);padding:0 8px;box-sizing:border-box}.ch-editor-terminal-tab{text-transform:uppercase;padding:4px 10px 3px;font-size:11px;line-height:24px;display:flex}.ch-editor-terminal-tab>span{border-bottom:1px solid #e7e7e7}.ch-editor-terminal-content{margin-top:8px;height:calc(100% - 40px);box-sizing:border-box}.ch-editor-terminal-content .ch-terminal{font-size:12px;margin:0}";
-n(css,{"singleTag":true});
-
+var c = utils.classNamesWithPrefix("ch-editor");
 var DEFAULT_HEIGHT = 200;
 function EditorFrame(_a) {
-    var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button"]);
-    return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({ titleBar: React__default['default'].createElement(TabsContainer, { files: files, active: active, button: button }), style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
-        React__default['default'].createElement("div", { className: "ch-editor-body" }, children),
+    var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, classes = _a.classes, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button", "classes"]);
+    return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({ titleBar: React__default['default'].createElement(TabsContainer, { files: files, active: active, button: button, classes: classes }), classes: classes, style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
+        React__default['default'].createElement("div", { className: c("-body", classes) }, children),
         terminalPanel));
 }
 function TabsContainer(_a) {
-    var files = _a.files, active = _a.active, button = _a.button;
+    var files = _a.files, active = _a.active, button = _a.button, classes = _a.classes;
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(miniFrame.FrameButtons, null),
-        files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: "ch-editor-tab", "data-active": fileName === active || undefined },
+        React__default['default'].createElement(miniFrame.FrameButtons, { classes: classes }),
+        files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: c([
+                "-tab",
+                fileName === active
+                    ? "-tab-active"
+                    : "-tab-inactive",
+            ], classes) },
             React__default['default'].createElement("div", null, fileName))); }),
@@ -420,3 +422,6 @@ React__default['default'].createElement("div", { style: { flex: 1 } }),
     }, [line, prevFocus, nextFocus]);
-    return (React__default['default'].createElement("div", { style: { display: "inline-block" } }, columns.map(function (_a, i) {
+    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;
@@ -519,3 +524,3 @@ return (React__default['default'].createElement("span", { className: "token " + type, key: i + 1, style: {
 function MiniEditor(props) {
-    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "minColumns", "height"]);
+    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, ogTabs = props.tabs, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "tabs", "minColumns", "height"]);
     var _d = useSteps(ogSteps, {
@@ -526,2 +531,3 @@ code: code,
         file: file,
+        tabs: ogTabs,
     }), steps = _d.steps, files = _d.files, stepsByFile = _d.stepsByFile;
@@ -570,3 +576,3 @@ var activeStepIndex = backward
 function useSteps(ogSteps, _a) {
-    var _b = _a.code, code = _b === void 0 ? "" : _b, focus = _a.focus, lang = _a.lang, file = _a.file;
+    var _b = _a.code, code = _b === void 0 ? "" : _b, focus = _a.focus, lang = _a.lang, file = _a.file, tabs = _a.tabs;
     return React__default['default'].useMemo(function () {
@@ -576,3 +582,4 @@ var steps = (ogSteps === null || ogSteps === void 0 ? void 0 : ogSteps.map(function (s) { return (__assign({ code: code,
             lang: lang,
-            file: file }, s)); })) || [{ code: code, focus: focus, lang: lang, file: file }];
+            file: file,
+            tabs: tabs }, s)); })) || [{ code: code, focus: focus, lang: lang, file: file, tabs: tabs }];
         var files = __spread(new Set(steps
@@ -591,3 +598,3 @@ .map(function (s) { return s.file; })
         return { steps: steps, files: files, stepsByFile: stepsByFile };
-    }, [ogSteps, code, focus, lang, file]);
+    }, [ogSteps, code, focus, lang, file, tabs]);
 }
@@ -633,2 +640,3 @@ var MAX_HEIGHT = 150;
         stiffness: 100,
+        decimals: 3,
     }), 1), progress = _b[0];
@@ -635,0 +643,0 @@ return [state.steps, progress];

dist/index.esm.js

 import React from 'react';
 import { MiniFrame, FrameButtons } from '@code-hike/mini-frame';
+import { classNamesWithPrefix } from '@code-hike/utils';
 import { InnerTerminal } from '@code-hike/mini-terminal';
@@ -83,19 +84,20 @@ import { codeDiff } from '@code-hike/code-diff';
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ".ch-editor-tab{border-right:1px solid #252526;width:120px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;flex-shrink:0;position:relative;display:flex;white-space:nowrap;cursor:pointer;height:100%;box-sizing:border-box;padding-left:15px;padding-right:15px;background-color:#2d2d2d;color:hsla(0,0%,100%,.5)}.ch-editor-tab[data-active]{background-color:#1e1e1e;color:#fff}.ch-editor-tab>div{margin-top:auto;margin-bottom:auto;font-size:12px;line-height:1.4em;text-overflow:ellipsis}.ch-editor-body{background-color:#1e1e1e;height:100%;color:#ccc;font-size:15px;padding:5px 10px;line-height:1.1rem;box-sizing:border-box}.ch-editor-body code{line-height:20px}.ch-editor-terminal{position:absolute;overflow:hidden;bottom:0;width:100%;background-color:#1e1e1e;color:#e7e7e7;border-top:1px solid hsla(0,0%,50.2%,.35);padding:0 8px;box-sizing:border-box}.ch-editor-terminal-tab{text-transform:uppercase;padding:4px 10px 3px;font-size:11px;line-height:24px;display:flex}.ch-editor-terminal-tab>span{border-bottom:1px solid #e7e7e7}.ch-editor-terminal-content{margin-top:8px;height:calc(100% - 40px);box-sizing:border-box}.ch-editor-terminal-content .ch-terminal{font-size:12px;margin:0}";
-n(css,{"singleTag":true});
-
+var c = classNamesWithPrefix("ch-editor");
 var DEFAULT_HEIGHT = 200;
 function EditorFrame(_a) {
-    var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button"]);
-    return (React.createElement(MiniFrame, __assign({ titleBar: React.createElement(TabsContainer, { files: files, active: active, button: button }), style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
-        React.createElement("div", { className: "ch-editor-body" }, children),
+    var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, classes = _a.classes, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button", "classes"]);
+    return (React.createElement(MiniFrame, __assign({ titleBar: React.createElement(TabsContainer, { files: files, active: active, button: button, classes: classes }), classes: classes, style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
+        React.createElement("div", { className: c("-body", classes) }, children),
         terminalPanel));
 }
 function TabsContainer(_a) {
-    var files = _a.files, active = _a.active, button = _a.button;
+    var files = _a.files, active = _a.active, button = _a.button, classes = _a.classes;
     return (React.createElement(React.Fragment, null,
-        React.createElement(FrameButtons, null),
-        files.map(function (fileName) { return (React.createElement("div", { key: fileName, className: "ch-editor-tab", "data-active": fileName === active || undefined },
+        React.createElement(FrameButtons, { classes: classes }),
+        files.map(function (fileName) { return (React.createElement("div", { key: fileName, className: c([
+                "-tab",
+                fileName === active
+                    ? "-tab-active"
+                    : "-tab-inactive",
+            ], classes) },
             React.createElement("div", null, fileName))); }),
@@ -411,3 +413,6 @@ React.createElement("div", { style: { flex: 1 } }),
     }, [line, prevFocus, nextFocus]);
-    return (React.createElement("div", { style: { display: "inline-block" } }, columns.map(function (_a, i) {
+    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;
@@ -510,3 +515,3 @@ return (React.createElement("span", { className: "token " + type, key: i + 1, style: {
 function MiniEditor(props) {
-    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "minColumns", "height"]);
+    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, ogTabs = props.tabs, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "tabs", "minColumns", "height"]);
     var _d = useSteps(ogSteps, {
@@ -517,2 +522,3 @@ code: code,
         file: file,
+        tabs: ogTabs,
     }), steps = _d.steps, files = _d.files, stepsByFile = _d.stepsByFile;
@@ -561,3 +567,3 @@ var activeStepIndex = backward
 function useSteps(ogSteps, _a) {
-    var _b = _a.code, code = _b === void 0 ? "" : _b, focus = _a.focus, lang = _a.lang, file = _a.file;
+    var _b = _a.code, code = _b === void 0 ? "" : _b, focus = _a.focus, lang = _a.lang, file = _a.file, tabs = _a.tabs;
     return React.useMemo(function () {
@@ -567,3 +573,4 @@ var steps = (ogSteps === null || ogSteps === void 0 ? void 0 : ogSteps.map(function (s) { return (__assign({ code: code,
             lang: lang,
-            file: file }, s)); })) || [{ code: code, focus: focus, lang: lang, file: file }];
+            file: file,
+            tabs: tabs }, s)); })) || [{ code: code, focus: focus, lang: lang, file: file, tabs: tabs }];
         var files = __spread(new Set(steps
@@ -582,3 +589,3 @@ .map(function (s) { return s.file; })
         return { steps: steps, files: files, stepsByFile: stepsByFile };
-    }, [ogSteps, code, focus, lang, file]);
+    }, [ogSteps, code, focus, lang, file, tabs]);
 }
@@ -624,2 +631,3 @@ var MAX_HEIGHT = 150;
         stiffness: 100,
+        decimals: 3,
     }), 1), progress = _b[0];
@@ -626,0 +634,0 @@ return [state.steps, progress];

dist/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/mini-frame'), require('@code-hike/mini-terminal'), require('@code-hike/code-diff'), require('@code-hike/smooth-lines'), require('use-spring')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/mini-frame', '@code-hike/mini-terminal', '@code-hike/code-diff', '@code-hike/smooth-lines', 'use-spring'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.foo = {}, global.React, global.miniFrame, global.miniTerminal, global.codeDiff, global.smoothLines, global.useSpring));
-}(this, (function (exports, React, miniFrame, miniTerminal, codeDiff, smoothLines, useSpring) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/mini-frame'), require('@code-hike/utils'), require('@code-hike/mini-terminal'), require('@code-hike/code-diff'), require('@code-hike/smooth-lines'), require('use-spring')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/mini-frame', '@code-hike/utils', '@code-hike/mini-terminal', '@code-hike/code-diff', '@code-hike/smooth-lines', 'use-spring'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ch = {}, global.React, global.miniFrame, global.utils, global.miniTerminal, global.codeDiff, global.smoothLines, global.useSpring));
+}(this, (function (exports, React, miniFrame, utils, miniTerminal, codeDiff, smoothLines, useSpring) { 'use strict';
 
@@ -86,19 +86,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-    var css = ".ch-editor-tab{border-right:1px solid #252526;width:120px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;flex-shrink:0;position:relative;display:flex;white-space:nowrap;cursor:pointer;height:100%;box-sizing:border-box;padding-left:15px;padding-right:15px;background-color:#2d2d2d;color:hsla(0,0%,100%,.5)}.ch-editor-tab[data-active]{background-color:#1e1e1e;color:#fff}.ch-editor-tab>div{margin-top:auto;margin-bottom:auto;font-size:12px;line-height:1.4em;text-overflow:ellipsis}.ch-editor-body{background-color:#1e1e1e;height:100%;color:#ccc;font-size:15px;padding:5px 10px;line-height:1.1rem;box-sizing:border-box}.ch-editor-body code{line-height:20px}.ch-editor-terminal{position:absolute;overflow:hidden;bottom:0;width:100%;background-color:#1e1e1e;color:#e7e7e7;border-top:1px solid hsla(0,0%,50.2%,.35);padding:0 8px;box-sizing:border-box}.ch-editor-terminal-tab{text-transform:uppercase;padding:4px 10px 3px;font-size:11px;line-height:24px;display:flex}.ch-editor-terminal-tab>span{border-bottom:1px solid #e7e7e7}.ch-editor-terminal-content{margin-top:8px;height:calc(100% - 40px);box-sizing:border-box}.ch-editor-terminal-content .ch-terminal{font-size:12px;margin:0}";
-    n(css,{"singleTag":true});
-
+    var c = utils.classNamesWithPrefix("ch-editor");
     var DEFAULT_HEIGHT = 200;
     function EditorFrame(_a) {
-        var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button"]);
-        return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({ titleBar: React__default['default'].createElement(TabsContainer, { files: files, active: active, button: button }), style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
-            React__default['default'].createElement("div", { className: "ch-editor-body" }, children),
+        var files = _a.files, active = _a.active, children = _a.children, terminalPanel = _a.terminalPanel, height = _a.height, style = _a.style, button = _a.button, classes = _a.classes, rest = __rest(_a, ["files", "active", "children", "terminalPanel", "height", "style", "button", "classes"]);
+        return (React__default['default'].createElement(miniFrame.MiniFrame, __assign({ titleBar: React__default['default'].createElement(TabsContainer, { files: files, active: active, button: button, classes: classes }), classes: classes, style: __assign({ height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT }, style) }, rest),
+            React__default['default'].createElement("div", { className: c("-body", classes) }, children),
             terminalPanel));
     }
     function TabsContainer(_a) {
-        var files = _a.files, active = _a.active, button = _a.button;
+        var files = _a.files, active = _a.active, button = _a.button, classes = _a.classes;
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(miniFrame.FrameButtons, null),
-            files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: "ch-editor-tab", "data-active": fileName === active || undefined },
+            React__default['default'].createElement(miniFrame.FrameButtons, { classes: classes }),
+            files.map(function (fileName) { return (React__default['default'].createElement("div", { key: fileName, className: c([
+                    "-tab",
+                    fileName === active
+                        ? "-tab-active"
+                        : "-tab-inactive",
+                ], classes) },
                 React__default['default'].createElement("div", null, fileName))); }),
@@ -414,3 +415,6 @@ React__default['default'].createElement("div", { style: { flex: 1 } }),
         }, [line, prevFocus, nextFocus]);
-        return (React__default['default'].createElement("div", { style: { display: "inline-block" } }, columns.map(function (_a, i) {
+        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;
@@ -513,3 +517,3 @@ return (React__default['default'].createElement("span", { className: "token " + type, key: i + 1, style: {
     function MiniEditor(props) {
-        var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "minColumns", "height"]);
+        var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, ogTabs = props.tabs, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "tabs", "minColumns", "height"]);
         var _d = useSteps(ogSteps, {
@@ -520,2 +524,3 @@ code: code,
             file: file,
+            tabs: ogTabs,
         }), steps = _d.steps, files = _d.files, stepsByFile = _d.stepsByFile;
@@ -564,3 +569,3 @@ var activeStepIndex = backward
     function useSteps(ogSteps, _a) {
-        var _b = _a.code, code = _b === void 0 ? "" : _b, focus = _a.focus, lang = _a.lang, file = _a.file;
+        var _b = _a.code, code = _b === void 0 ? "" : _b, focus = _a.focus, lang = _a.lang, file = _a.file, tabs = _a.tabs;
         return React__default['default'].useMemo(function () {
@@ -570,3 +575,4 @@ var steps = (ogSteps === null || ogSteps === void 0 ? void 0 : ogSteps.map(function (s) { return (__assign({ code: code,
                 lang: lang,
-                file: file }, s)); })) || [{ code: code, focus: focus, lang: lang, file: file }];
+                file: file,
+                tabs: tabs }, s)); })) || [{ code: code, focus: focus, lang: lang, file: file, tabs: tabs }];
             var files = __spread(new Set(steps
@@ -585,3 +591,3 @@ .map(function (s) { return s.file; })
             return { steps: steps, files: files, stepsByFile: stepsByFile };
-        }, [ogSteps, code, focus, lang, file]);
+        }, [ogSteps, code, focus, lang, file, tabs]);
     }
@@ -627,2 +633,3 @@ var MAX_HEIGHT = 150;
             stiffness: 100,
+            decimals: 3,
         }), 1), progress = _b[0];
@@ -629,0 +636,0 @@ return [state.steps, progress];

dist/mini-editor.d.ts

@@ -18,2 +18,3 @@ import React from "react";
     file?: string;
+    tabs?: string[];
     steps?: MiniEditorStep[];
@@ -23,3 +24,4 @@ height?: number;
     button?: React.ReactNode;
+    classes: Record<string, string>;
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>;
 declare function MiniEditor(props: MiniEditorProps): JSX.Element;

package.json

 {
   "name": "@code-hike/mini-editor",
-  "version": "0.0.0-2a67cd7",
+  "version": "0.0.0-4adbd70",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.esm.js",
+  "style": "dist/index.css",
   "files": [
@@ -20,6 +21,7 @@ "dist"
   "dependencies": {
-    "@code-hike/code-diff": "0.0.0-2a67cd7",
-    "@code-hike/mini-frame": "0.0.0-2a67cd7",
-    "@code-hike/mini-terminal": "0.0.0-2a67cd7",
-    "@code-hike/smooth-lines": "0.0.0-2a67cd7",
+    "@code-hike/code-diff": "0.0.0-4adbd70",
+    "@code-hike/mini-frame": "0.0.0-4adbd70",
+    "@code-hike/mini-terminal": "0.0.0-4adbd70",
+    "@code-hike/smooth-lines": "0.0.0-4adbd70",
+    "@code-hike/utils": "0.0.0-4adbd70",
     "use-spring": "^0.2.3"
@@ -35,2 +37,3 @@ },
   "repository": "code-hike/codehike",
+  "author": "Rodrigo Pombo",
   "license": "MIT",
@@ -37,0 +40,0 @@ "funding": {

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100149

increased by2.78%

Number of package files

18

increased by28.57%

Lines of code

2051

increased by3.8%

Number of low maintenance alerts

1

decreased by-50%

Number of low supply chain risk alerts

1

decreased by-75%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Added@code-hike/utils@0.0.0-4adbd70

• + Added@code-hike/code-diff@0.0.0-4adbd70(transitive)

• + Added@code-hike/mini-frame@0.0.0-4adbd70(transitive)

• + Added@code-hike/mini-terminal@0.0.0-4adbd70(transitive)

• + Added@code-hike/smooth-lines@0.0.0-4adbd70(transitive)

• + Added@code-hike/utils@0.0.0-4adbd70(transitive)

• - Removed@code-hike/code-diff@0.0.0-2a67cd7(transitive)

• - Removed@code-hike/mini-frame@0.0.0-2a67cd7(transitive)

• - Removed@code-hike/mini-terminal@0.0.0-2a67cd7(transitive)

• - Removed@code-hike/smooth-lines@0.0.0-2a67cd7(transitive)

• Updated@code-hike/code-diff@0.0.0-4adbd70

• Updated@code-hike/mini-frame@0.0.0-4adbd70

• Updated@code-hike/mini-terminal@0.0.0-4adbd70

• Updated@code-hike/smooth-lines@0.0.0-4adbd70