@kanaries/graphic-walker 0.2.9 → 0.2.10

package/dist/index.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
 import { EditorProps } from './App';
+import './empty_sheet.css';
+export declare const ShadowDomContext: React.Context<{
+    root: ShadowRoot | null;
+}>;
 export declare const GraphicWalker: React.FC<EditorProps>;

package/dist/style.css

@@ -1 +0,0 @@
-/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-opacity: 1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-2{top:.5rem}.right-2{right:.5rem}.z-auto{z-index:auto}.col-span-1{grid-column:span 1 / span 1}.col-span-5{grid-column:span 5 / span 5}.float-right{float:right}.m-1{margin:.25rem}.m-2{margin:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-0\.5{margin-right:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.-mb-px{margin-bottom:-1px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-16{height:4rem}.h-48{height:12rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-16{width:4rem}.w-60{width:15rem}.w-full{width:100%}.min-w-96{min-width:96px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-shrink{flex-shrink:1}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.select-none{-webkit-user-select:none;user-select:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded-sm{border-radius:.125rem}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border{border-width:1px}.border-t-2{border-top-width:2px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-l{border-left-width:1px}.border-transparent{border-color:transparent}.border-gray-200{--tw-border-opacity: 1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity: 1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity: 1;border-color:rgba(156,163,175,var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity: 1;border-color:rgba(107,114,128,var(--tw-border-opacity))}.border-blue-400{--tw-border-opacity: 1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity: 1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.hover\:border-gray-600:hover{--tw-border-opacity: 1;border-color:rgba(75,85,99,var(--tw-border-opacity))}.focus\:border-gray-500:focus{--tw-border-opacity: 1;border-color:rgba(107,114,128,var(--tw-border-opacity))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgba(156,163,175,var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgba(239,68,68,var(--tw-bg-opacity))}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgba(217,119,6,var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgba(37,99,235,var(--tw-bg-opacity))}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgba(238,242,255,var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgba(243,244,246,var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.hover\:bg-red-100:hover{--tw-bg-opacity: 1;background-color:rgba(254,226,226,var(--tw-bg-opacity))}.hover\:bg-yellow-100:hover{--tw-bg-opacity: 1;background-color:rgba(254,243,199,var(--tw-bg-opacity))}.hover\:bg-yellow-500:hover{--tw-bg-opacity: 1;background-color:rgba(245,158,11,var(--tw-bg-opacity))}.hover\:bg-green-50:hover{--tw-bg-opacity: 1;background-color:rgba(236,253,245,var(--tw-bg-opacity))}.hover\:bg-blue-100:hover{--tw-bg-opacity: 1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.disabled\:bg-gray-300:disabled{--tw-bg-opacity: 1;background-color:rgba(209,213,219,var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-0\.5{padding-top:.125rem}.pr-2{padding-right:.5rem}.pr-6{padding-right:1.5rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-0\.5{padding-bottom:.125rem}.pl-2{padding-left:.5rem}.pl-6{padding-left:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.ordinal{--tw-ordinal: var(--tw-empty, );--tw-slashed-zero: var(--tw-empty, );--tw-numeric-figure: var(--tw-empty, );--tw-numeric-spacing: var(--tw-empty, );--tw-numeric-fraction: var(--tw-empty, );font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.ordinal{--tw-ordinal: ordinal}.leading-none{line-height:1}.text-black{--tw-text-opacity: 1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgba(209,213,219,var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgba(156,163,175,var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgba(107,114,128,var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity: 1;color:rgba(75,85,99,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgba(55,65,81,var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity: 1;color:rgba(31,41,55,var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgba(17,24,39,var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgba(220,38,38,var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity: 1;color:rgba(245,158,11,var(--tw-text-opacity))}.text-green-500{--tw-text-opacity: 1;color:rgba(16,185,129,var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity: 1;color:rgba(59,130,246,var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgba(55,65,81,var(--tw-text-opacity))}.hover\:text-purple-600:hover{--tw-text-opacity: 1;color:rgba(124,58,237,var(--tw-text-opacity))}.underline{text-decoration:underline}*,:before,:after{--tw-shadow: 0 0 #0000}.shadow{--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}*,:before,:after{--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(59, 130, 246, .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000}.filter{--tw-blur: var(--tw-empty, );--tw-brightness: var(--tw-empty, );--tw-contrast: var(--tw-empty, );--tw-grayscale: var(--tw-empty, );--tw-hue-rotate: var(--tw-empty, );--tw-invert: var(--tw-empty, );--tw-saturate: var(--tw-empty, );--tw-sepia: var(--tw-empty, );--tw-drop-shadow: var(--tw-empty, );filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{--tw-blur: blur(8px)}@media (min-width: 768px){.md\:col-span-2{grid-column:span 2 / span 2}.md\:col-span-3{grid-column:span 3 / span 3}.md\:col-span-7{grid-column:span 7 / span 7}.md\:grid{display:grid}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:flex-col{flex-direction:column}}@media (min-width: 1280px){.xl\:col-span-1{grid-column:span 1 / span 1}.xl\:col-span-4{grid-column:span 4 / span 4}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}

package/dist/utils/throttle.d.ts

@@ -0,0 +1,5 @@
+declare const throttle: (fn: () => void, time: number, options?: Partial<{
+    leading: boolean;
+    trailing: boolean;
+}>) => () => void;
+export default throttle;

package/dist/visualSettings/menubar.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
 export declare const MenubarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ButtonWithShortcutProps {
+    label: string;
+    shortcut: string;
+    disabled: boolean;
+    handler: () => void;
+    icon?: JSX.Element;
+}
+export declare const ButtonWithShortcut: React.FC<ButtonWithShortcutProps>;
 declare const _default: React.FunctionComponent<{}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -33,6 +33,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@heroicons/react": "^2.0.8",
+    "@kanaries/react-beautiful-dnd": "0.0.1",
     "@kanaries/web-data-loader": "0.1.5",
     "autoprefixer": "^10.3.5",
     "i18next": "^21.9.1",
@@ -41,10 +42,11 @@
     "mobx": "^6.3.3",
     "mobx-react-lite": "^3.2.1",
     "postcss": "^8.3.7",
+    "postinstall-postinstall": "^2.1.0",
     "re-resizable": "^6.9.8",
-    "react-beautiful-dnd": "^13.1.1",
     "react-i18next": "^11.18.6",
     "react-json-view": "^1.21.3",
+    "react-shadow": "^20.0.0",
     "rxjs": "^7.3.0",
     "tailwindcss": "^2.2.15",
     "uuid": "^8.3.2",

package/src/App.tsx

@@ -19,10 +19,7 @@ import { useGlobalStore } from './store';
 import { preAnalysis, destroyWorker } from './services'
 import VisNav from './segments/visNav';
 import { mergeLocaleRes, setLocaleLanguage } from './locales/i18n';
-import Menubar from './visualSettings/menubar';
 import FilterField from './fields/filterField';
-import "tailwindcss/tailwind.css"
-import './index.css'
 
 
 export interface EditorProps {
@@ -99,7 +96,6 @@ const App: React.FC<EditorProps> = props => {
 				{/* <PureTabs tabs={[{label: 'a', key: 'a'}, {label: 'b', key: 'b'}]} selectedKey='a' onSelected={() => {}} /> */}
 			</div>
 			<Container style={{ marginTop: '0em', borderTop: 'none' }}>
-				<Menubar />
 				<VisualSettings rendererHandler={rendererRef} />
 				<div className="md:grid md:grid-cols-12 xl:grid-cols-6">
 					<div className="md:col-span-3 xl:col-span-1">

package/src/components/callout.tsx

@@ -0,0 +1,58 @@
+import React, { memo, ReactNode, useContext, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { ShadowDomContext } from '..';
+
+
+export interface CalloutProps {
+    target: string;
+    children: ReactNode;
+}
+
+const Bubble = styled.div`
+    border-radius: 1px;
+    transform: translate(-50%, 0);
+    filter: drop-shadow(0 1.6px 1px rgba(0, 0, 0, 0.24)) drop-shadow(0 -1px 0.8px rgba(0, 0, 0, 0.19));
+    user-select: none;
+    display: block;
+    width: max-content;
+    height: max-content;
+    ::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 8px;
+        height: 8px;
+        transform: translate(-50%, -50%) rotate(45deg);
+        background-color: #fff;
+        border-radius: 1px;
+    }
+`;
+
+const Callout = memo<CalloutProps>(function Callout ({ target, children }) {
+    const shadowDomMeta = useContext(ShadowDomContext);
+    const { root } = shadowDomMeta;
+    const [pos, setPos] = useState<[number, number] | null>(null);
+
+    useEffect(() => {
+        const el = (
+            target.startsWith('#') ? root?.getElementById(target.slice(1)) : root?.querySelector(target)
+        ) as HTMLElement | null;
+        if (el) {
+            const rect = el.getBoundingClientRect();
+            setPos([rect.x + rect.width / 2, rect.y + rect.height]);
+        }
+    }, [target, root]);
+
+    return root && pos && createPortal(
+        <Bubble role="dialog" className="fixed bg-white z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
+            {children}
+        </Bubble>,
+        root
+    );
+});
+
+
+export default Callout;

package/src/components/sizeSetting.tsx

@@ -10,6 +10,45 @@ interface SizeSettingProps {
     height: number;
 }
 
+export const ResizeDialog: React.FC<SizeSettingProps> = props => {
+    const { onWidthChange, onHeightChange, width, height, children } = props
+    const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings.size_setting' });
+
+    return <>
+        {children}
+        <div className="mt-4 w-60">
+            <input className="w-full h-2 bg-blue-100 appearance-none"
+                style={{ cursor: 'ew-resize' }}
+                type="range"
+                name="width"
+                value={Math.sqrt(width / 1000)}
+                min="0" max="1" step="0.01"
+                onChange={(e) => {
+                    onWidthChange(Math.round(Number(e.target.value) ** 2 * 1000))
+                }}
+            />
+            <output className="text-sm ml-1" htmlFor="width">
+                {`${t('width')}: ${width}`}
+            </output>
+        </div>
+        <div className=" mt-2">
+            <input className="w-full h-2 bg-blue-100 appearance-none"
+                style={{ cursor: 'ew-resize' }}
+                type="range"
+                name="height"
+                value={Math.sqrt(height / 1000)}
+                min="0" max="1" step="0.01"
+                onChange={(e) => {
+                    onHeightChange(Math.round(Number(e.target.value) ** 2 * 1000))
+                }}
+            />
+            <output className="text-sm ml-1" htmlFor="height">
+                {`${t('height')}: ${height}`}
+            </output>
+        </div>
+    </>
+};
+
 const SizeSetting: React.FC<SizeSettingProps> = props => {
     const { onWidthChange, onHeightChange, width, height } = props
     const [show, setShow] = useState<boolean>(false);
@@ -21,10 +60,17 @@ const SizeSetting: React.FC<SizeSettingProps> = props => {
                 setShow(false);
             };
 
-            document.body.addEventListener('click', closeDialog);
+            let subscribed = false;
+            const timer = setTimeout(() => {
+                subscribed = true;
+                document.body.addEventListener('click', closeDialog);
+            }, 200);
 
             return () => {
-                document.body.removeEventListener('click', closeDialog);
+                clearTimeout(timer);
+                if (subscribed) {
+                    document.body.removeEventListener('click', closeDialog);
+                }
             };
         }
     }, [show]);
@@ -41,54 +87,20 @@ const SizeSetting: React.FC<SizeSettingProps> = props => {
             }}
             className="w-4 h-4 inline-block mr-0.5 text-gray-900"
         />
-        {
-            show && <div role="dialog" className="absolute z-auto bg-white p-4 border border-gray-200 shadow cursor-default" onClick={e => e.stopPropagation()} style={{ zIndex: 25535 }}>
-                <div>
-                    <XMarkIcon
-                        className="text-gray-900 absolute right-2 top-2 w-4 cursor-pointer hover:bg-red-100"
-                        role="button"
-                        tabIndex={0}
-                        aria-label="close"
-                        onClick={(e) => {
-                            setShow(false);
-                            e.stopPropagation();
-                        }}
-                    />
-                </div>
-                
-                <div className="mt-4 w-60">
-                    <input className="w-full h-2 bg-blue-100 appearance-none"
-                        style={{ cursor: 'ew-resize' }}
-                        type="range"
-                        name="width"
-                        value={Math.sqrt(width / 1000)}
-                        min="0" max="1" step="0.01"
-                        onChange={(e) => {
-                            onWidthChange(Math.round(Number(e.target.value) ** 2 * 1000))
-                        }}
-                    />
-                    <output className="text-sm ml-1" htmlFor="width">
-                        {`${t('width')}: ${width}`}
-                    </output>
-                </div>
-                <div className=" mt-2">
-                    <input className="w-full h-2 bg-blue-100 appearance-none"
-                        style={{ cursor: 'ew-resize' }}
-                        type="range"
-                        name="height"
-                        value={Math.sqrt(height / 1000)}
-                        min="0" max="1" step="0.01"
-                        onChange={(e) => {
-                            onHeightChange(Math.round(Number(e.target.value) ** 2 * 1000))
-                        }}
-                    />
-                    <output className="text-sm ml-1" htmlFor="height">
-                        {`${t('height')}: ${height}`}
-                    </output>
-                </div>
-                
+        {show && <ResizeDialog {...props}>
+            <div>
+                <XMarkIcon
+                    className="text-gray-900 absolute right-2 top-2 w-4 cursor-pointer hover:bg-red-100"
+                    role="button"
+                    tabIndex={0}
+                    aria-label="close"
+                    onClick={(e) => {
+                        setShow(false);
+                        e.stopPropagation();
+                    }}
+                />
             </div>
-        }
+        </ResizeDialog>}
     </div>
 }
 

package/src/components/tabs/pureTab.tsx

@@ -28,7 +28,7 @@ export default function PureTabs(props: PureTabsProps) {
     }, [tabs.length]);
     
     useEffect(() => {
-        clearEditStatus
+        clearEditStatus();
     }, [clearEditStatus]);
 
     return (
@@ -55,6 +55,12 @@ export default function PureTabs(props: PureTabsProps) {
                         onInput={(e) => {
                             onEditLabel && onEditLabel(`${e.currentTarget.textContent}`, tabIndex)
                         }}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                clearEditStatus();
+                                e.preventDefault();
+                            }
+                        }}
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey

package/src/components/toolbar/components.tsx

@@ -0,0 +1,110 @@
+import { KeyboardEvent, MouseEvent, useMemo, useRef } from "react";
+import styled from "styled-components";
+
+
+export const useHandlers = (action: () => void, disabled: boolean, triggerKeys: string[] = ['Enter'], allowPropagation = true) => {
+    const actionRef = useRef(action);
+    actionRef.current = () => {
+        if (disabled) {
+            return;
+        }
+        action();
+    };
+    const triggerKeysRef = useRef(triggerKeys);
+    triggerKeysRef.current = triggerKeys;
+
+    return useMemo(() => ({
+        onClick: (ev: MouseEvent) => {
+            if (!allowPropagation) {
+                ev.stopPropagation();
+            }
+            actionRef.current();
+        },
+        onKeyDown: (ev: KeyboardEvent) => {
+            if (!allowPropagation) {
+                ev.stopPropagation();
+            }
+            if (triggerKeysRef.current.includes(ev.key)) {
+                ev.stopPropagation();
+                ev.preventDefault();
+                actionRef.current();
+            }
+        },
+        onMouseOut: (ev: MouseEvent) => {
+            if (!allowPropagation) {
+                ev.stopPropagation();
+            }
+            (document.querySelector('*:focus') as null | HTMLElement)?.blur();
+        },
+    }), [allowPropagation]);
+};
+
+export const ToolbarContainer = styled.div`
+    --height: 36px;
+    --icon-size: 18px;
+    width: 100%;
+    height: var(--height);
+    background-color: var(--background-color);
+    color: var(--color);
+    /* box-shadow: 0px 1px 3px 1px rgba(136, 136, 136, 0.1); */
+    border-radius: 2px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    > * {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+`;
+
+export const ToolbarSplitter = styled.div`
+    display: inline-block;
+    margin: calc(var(--height) / 6) calc(var(--icon-size) / 4);
+    height: calc(var(--height) * 2 / 3);
+    width: 1px;
+    background: #bbbbbb50;
+`;
+
+export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
+    display: inline-flex;
+    flex-direction: row;
+    user-select: none;
+    outline: none;
+    width: ${({ split }) => split ? 'calc(var(--height) + 10px)' : 'var(--height)'};
+    height: var(--height);
+    overflow: hidden;
+    color: var(--color);
+    position: relative;
+    > svg {
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        margin: calc((var(--height) - var(--icon-size)) / 2);
+        margin-right: ${({ split }) => split ? 'calc((var(--height) - var(--icon-size)) / 4)' : ''};
+        transition: text-shadow 100ms;
+    }
+    --shadow-color: #0F172A55;
+    &[aria-disabled=true] {
+        cursor: default;
+        > * {
+            opacity: 0.33;
+        }
+    }
+    &[aria-disabled=false] {
+        cursor: pointer;
+        :hover, :focus, &.open {
+            background-image: linear-gradient(#FFFFFFCC, #FEFEFECC);
+            --background-color: #FEFEFE;
+            color: var(--color-hover);
+            &.split * svg {
+                pointer-events: none;
+                transform: translate(-50%, -20%);
+            }
+            & svg {
+                text-shadow: 0 0 1.5px var(--shadow-color);
+            }
+        }
+    }
+    transition: color 100ms, background-image 100ms;
+`;

package/src/components/toolbar/index.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties, memo, ReactNode, useState } from "react";
+import styled from "styled-components";
+import { ToolbarContainer, ToolbarSplitter } from "./components";
+import ToolbarItem, { ToolbarItemProps, ToolbarItemSplitter } from "./toolbar-item";
+
+
+const Root = styled.div`
+    width: 100%;
+    --background-color: #f7f7f7;
+    --color: #777;
+    --color-hover: #555;
+    --blue: #282958;
+    --blue-dark: #1d1e38;
+`;
+
+export interface ToolbarProps {
+    items: ToolbarItemProps[];
+    styles?: Partial<{
+        root: CSSProperties & Record<string, string>;
+        container: CSSProperties & Record<string, string>;
+        item: CSSProperties & Record<string, string>;
+        icon: CSSProperties & Record<string, string>;
+        splitIcon: CSSProperties & Record<string, string>;
+    }>;
+}
+
+const Toolbar = memo<ToolbarProps>(function Toolbar ({ items, styles }) {
+    const [openedKey, setOpenedKey] = useState<string | null>(null);
+    const [slot, setSlot] = useState<ReactNode>(null);
+
+    return (
+        <Root style={styles?.root}>
+            <ToolbarContainer style={styles?.container}>
+                {items.map((item, i) => {
+                    if (item === ToolbarItemSplitter) {
+                        return <ToolbarSplitter key={i} />;
+                    }
+                    return (
+                        <ToolbarItem
+                            key={item.key}
+                            item={item}
+                            styles={styles}
+                            openedKey={openedKey}
+                            setOpenedKey={setOpenedKey}
+                            renderSlot={node => setSlot(node)}
+                        />
+                    );
+                })}
+            </ToolbarContainer>
+            {slot}
+        </Root>
+    );
+});
+
+
+export default Toolbar;
+export type { ToolbarItemProps };

package/src/components/toolbar/toolbar-button.tsx

@@ -0,0 +1,28 @@
+import React, { memo } from "react";
+import { IToolbarItem, IToolbarProps, ToolbarItemContainer } from "./toolbar-item";
+import { useHandlers } from "./components";
+
+
+export interface ToolbarButtonItem extends IToolbarItem {
+    onClick?: () => void;
+}
+
+const ToolbarButton = memo<IToolbarProps<ToolbarButtonItem>>(function ToolbarButton(props) {
+    const { item, styles } = props;
+    const { icon: Icon, label, disabled, onClick } = item;
+    const handlers = useHandlers(() => onClick?.(), disabled ?? false);
+
+    return (
+        <>
+            <ToolbarItemContainer
+                props={props}
+                handlers={onClick ? handlers : null}
+            >
+                <Icon style={styles?.icon} />
+            </ToolbarItemContainer>
+        </>
+    );
+});
+
+
+export default ToolbarButton;