@weavy/uikit-react 11.0.0

package/src/ui/Icon.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+const MdiIcon = require('@mdi/react/Icon')
+import { prefix as wy } from "../utils/styles";
+
+type Props = {
+    name: string,
+    color?: string,
+    size?: number,
+}
+
+// Custom mapping to MDI instead of symbols
+const iconMapping: { [index: string]: string } = {
+    "attachment": "M7.5,18A5.5,5.5 0 0,1 2,12.5A5.5,5.5 0 0,1 7.5,7H18A4,4 0 0,1 22,11A4,4 0 0,1 18,15H9.5A2.5,2.5 0 0,1 7,12.5A2.5,2.5 0 0,1 9.5,10H17V11.5H9.5A1,1 0 0,0 8.5,12.5A1,1 0 0,0 9.5,13.5H18A2.5,2.5 0 0,0 20.5,11A2.5,2.5 0 0,0 18,8.5H7.5A4,4 0 0,0 3.5,12.5A4,4 0 0,0 7.5,16.5H17V18H7.5Z",
+    "back": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z",
+    "close": "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",
+    "close-circle": "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z",
+    "dots-vertical": "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z",
+    "download": "M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z",
+    "emoticon-outline": "M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+    "magnify": "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z",
+    "next": "M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z",
+    "pin": "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z",
+    "plus": "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z",
+    "plus-circle-outline": "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z",
+    "previous": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z",
+    "send": "M2,21L23,12L2,3V10L17,12L2,14V21Z",
+    "video": "M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z",
+    // Files
+    "email": "M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z",
+    "file": "M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z",
+    "file-music": "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M13,13H11V18A2,2 0 0,1 9,20A2,2 0 0,1 7,18A2,2 0 0,1 9,16C9.4,16 9.7,16.1 10,16.3V11H13V13M13,9V3.5L18.5,9H13Z",
+    "file-image": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z",
+    "file-video": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M17,19V13L14,15.2V13H7V19H14V16.8L17,19Z",
+    "file-xml": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6.12,15.5L9.86,19.24L11.28,17.83L8.95,15.5L11.28,13.17L9.86,11.76L6.12,15.5M17.28,15.5L13.54,11.76L12.12,13.17L14.45,15.5L12.12,17.83L13.54,19.24L17.28,15.5Z",
+    "file-document": "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z",
+    "file-word": "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M15.2,20H13.8L12,13.2L10.2,20H8.8L6.6,11H8.1L9.5,17.8L11.3,11H12.6L14.4,17.8L15.8,11H17.3L15.2,20M13,9V3.5L18.5,9H13Z",
+    "file-excel": "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M15.8,20H14L12,16.6L10,20H8.2L11.1,15.5L8.2,11H10L12,14.4L14,11H15.8L12.9,15.5L15.8,20M13,9V3.5L18.5,9H13Z",
+    "file-pdf": "M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z",
+    "file-powerpoint": "M12.6,12.3H10.6V15.5H12.7C13.3,15.5 13.6,15.3 13.9,15C14.2,14.7 14.3,14.4 14.3,13.9C14.3,13.4 14.2,13.1 13.9,12.8C13.6,12.5 13.2,12.3 12.6,12.3M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M15.2,16C14.6,16.5 14.1,16.7 12.8,16.7H10.6V20H9V11H12.8C14.1,11 14.7,11.3 15.2,11.8C15.8,12.4 16,13 16,13.9C16,14.8 15.8,15.5 15.2,16M13,9V3.5L18.5,9H13Z",
+    "file-document-box": "M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z",
+    "file-slide-box": "M19,16H5V8H19M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z",
+    "file-sheet-box": "M19 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.89 20.1 3 19 3M9 18H6V16H9V18M9 15H6V13H9V15M9 12H6V10H9V12M13 18H10V16H13V18M13 15H10V13H13V15M13 12H10V10H13V12Z",
+    "file-compressed": "M14,17H12V15H10V13H12V15H14M14,9H12V11H14V13H12V11H10V9H12V7H10V5H12V7H14M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z",
+    // Providers
+    "dropbox": "M3 6.2L8 9.39L13 6.2L8 3L3 6.2M13 6.2L18 9.39L23 6.2L18 3L13 6.2M3 12.55L8 15.74L13 12.55L8 9.35L3 12.55M18 9.35L13 12.55L18 15.74L23 12.55L18 9.35M8.03 16.8L13.04 20L18.04 16.8L13.04 13.61L8.03 16.8Z",
+    "ondedrive": "M18.21 10.29Q19 10.34 19.7 10.68 20.39 11 20.9 11.57 21.41 12.12 21.71 12.83 22 13.54 22 14.34 22 15.18 21.68 15.92 21.36 16.66 20.8 17.21 20.25 17.76 19.5 18.08 18.78 18.41 17.94 18.41H7Q5.97 18.41 5.06 18 4.15 17.61 3.47 16.94 2.79 16.26 2.4 15.35 2 14.44 2 13.41 2 12.59 2.26 11.83 2.5 11.08 3 10.45 3.44 9.82 4.08 9.35 4.72 8.88 5.5 8.63 5.87 8.5 6.21 8.5 6.56 8.43 6.93 8.41H6.94Q7.37 7.75 7.95 7.23 8.5 6.71 9.2 6.34 9.87 6 10.62 5.78 11.37 5.59 12.16 5.59 13.22 5.59 14.2 5.94 15.18 6.29 16 6.91 16.8 7.53 17.37 8.39 17.95 9.26 18.21 10.29M12.16 6.84Q11.05 6.84 10.06 7.3 9.06 7.75 8.36 8.6 8.73 8.7 9.07 8.85 9.4 9 9.73 9.2L13.71 11.58L16 10.62Q16.21 10.53 16.44 10.45 16.67 10.38 16.92 10.33 16.68 9.55 16.21 8.91 15.74 8.27 15.11 7.81 14.5 7.35 13.73 7.1 13 6.84 12.16 6.84M4 15.66L12.27 12.18L9.08 10.26Q8.59 9.97 8.06 9.81 7.5 9.66 6.95 9.66 6.19 9.66 5.5 9.96 4.84 10.26 4.34 10.77 3.84 11.29 3.54 11.97 3.25 12.65 3.25 13.41 3.25 14 3.45 14.59 3.64 15.19 4 15.66M17.94 17.16Q18.41 17.16 18.84 17 19.27 16.86 19.64 16.58L13.61 13L5.03 16.59Q5.47 16.86 5.97 17 6.47 17.16 7 17.16M20.45 15.61Q20.75 15 20.75 14.34 20.75 13.7 20.5 13.17 20.26 12.65 19.85 12.28 19.43 11.91 18.88 11.71 18.32 11.5 17.7 11.5 17.35 11.5 17 11.6 16.66 11.68 16.33 11.81 16 11.93 15.67 12.08 15.35 12.23 15.04 12.37Z",
+    "box": "M15.39,14.04V14.04C15.39,12.62 14.24,11.47 12.82,11.47C11.41,11.47 10.26,12.62 10.26,14.04V14.04C10.26,15.45 11.41,16.6 12.82,16.6C14.24,16.6 15.39,15.45 15.39,14.04M17.1,14.04C17.1,16.4 15.18,18.31 12.82,18.31C11.19,18.31 9.77,17.39 9.05,16.04C8.33,17.39 6.91,18.31 5.28,18.31C2.94,18.31 1.04,16.43 1,14.11V14.11H1V7H1V7C1,6.56 1.39,6.18 1.86,6.18C2.33,6.18 2.7,6.56 2.71,7V7H2.71V10.62C3.43,10.08 4.32,9.76 5.28,9.76C6.91,9.76 8.33,10.68 9.05,12.03C9.77,10.68 11.19,9.76 12.82,9.76C15.18,9.76 17.1,11.68 17.1,14.04V14.04M7.84,14.04V14.04C7.84,12.62 6.69,11.47 5.28,11.47C3.86,11.47 2.71,12.62 2.71,14.04V14.04C2.71,15.45 3.86,16.6 5.28,16.6C6.69,16.6 7.84,15.45 7.84,14.04M22.84,16.96V16.96C22.95,17.12 23,17.3 23,17.47C23,17.73 22.88,18 22.66,18.15C22.5,18.26 22.33,18.32 22.15,18.32C21.9,18.32 21.65,18.21 21.5,18L19.59,15.47L17.7,18V18C17.53,18.21 17.28,18.32 17.03,18.32C16.85,18.32 16.67,18.26 16.5,18.15C16.29,18 16.17,17.72 16.17,17.46C16.17,17.29 16.23,17.11 16.33,16.96V16.96H16.33V16.96L18.5,14.04L16.33,11.11V11.11H16.33V11.11C16.22,10.96 16.17,10.79 16.17,10.61C16.17,10.35 16.29,10.1 16.5,9.93C16.89,9.65 17.41,9.72 17.7,10.09V10.09L19.59,12.61L21.5,10.09C21.76,9.72 22.29,9.65 22.66,9.93C22.89,10.1 23,10.36 23,10.63C23,10.8 22.95,10.97 22.84,11.11V11.11H22.84V11.11L20.66,14.04L22.84,16.96V16.96H22.84Z",
+    "google-drive": "M7.71,3.5L1.15,15L4.58,21L11.13,9.5M9.73,15L6.3,21H19.42L22.85,15M22.28,14L15.42,2H8.58L8.57,2L15.43,14H22.28Z",
+    "zoom": "m12 2c-5.6 0-10 4.5-10 10 0 5.6 4.5 10 10 10 5.5 0 9.9-4.5 9.9-10 .1-5.6-4.4-10-9.9-10zm2.6 13.1c0 .2-.1.3-.3.3h-6.9c-1.1 0-1.9-.8-1.9-1.9v-4.6c0-.2.1-.3.3-.3h6.9c1 0 1.9.8 1.9 1.9zm3.8.1c0 .4-.2.4-.5.2l-2.8-2.1v-2.6l2.8-2.1c.2-.2.5-.1.5.2z",
+    "cloud": "M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z"
+}
+
+
+function getIconMapping(name: string) {
+    let [iconName] = name.split("+");
+    return iconName in iconMapping ? iconMapping[iconName] : "";
+}
+
+
+function getIconOverlay(name: string) {
+    let [, overlay] = name.split("+");
+    return overlay in iconMapping ? iconMapping[overlay] : "";
+}
+
+const Icon = ({ name, color = "", size, ...props }: Props) => {
+    let iconPath = getIconMapping(name);
+    let overlayPath = getIconOverlay(name);
+
+    return (
+        <span className={wy('icon ' + color)} style={{width: size && (size * 1.5 + "rem"), height: size && (size * 1.5 + "rem")}} { ...props }>
+            {iconPath ? <MdiIcon.Icon color={color} path={iconPath} size={size} /> : name }
+            {overlayPath && <MdiIcon.Icon color={color} path={overlayPath} className={wy('icon-overlay')} size={(size || 1) / 2} /> }
+        </span>
+    );
+}
+
+// Export as replacable UI component
+const UIIcon = { UI: Icon };
+export default UIIcon;

package/src/ui/Overlay.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import Modal, { Styles } from 'react-modal';
+import classNames from 'classnames';
+import { prefix as wy } from "../utils/styles";
+
+type OverlayProps = {
+    children: React.ReactNode,
+    className?: string,
+    isOpen: boolean,
+    style?: Styles
+}
+
+const customStyles = {
+    content: {
+      padding: 0
+    },
+  };
+  
+  
+  const OverlayImpl = ({ children, className = "", isOpen, style }: OverlayProps) => {
+    const [modalShowing, setModalShowing] = useState(false);
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            ariaHideApp={false}
+            onAfterOpen={() => { setModalShowing(true)} }
+            onRequestClose={() => { setModalShowing(false)}}
+            className={classNames(wy("panel overlay transition"), className, {[wy("open")]: modalShowing})}
+            overlayClassName={wy('overlays viewport')}
+            contentLabel="Example Modal"
+            style={style}
+        >
+          {children}
+        </Modal>
+    )
+}
+
+// Export as replacable UI component
+const UIOverlay = { UI: OverlayImpl };
+export default UIOverlay;

package/src/utils/fileUtilities.ts

@@ -0,0 +1,230 @@
+export const fileSizeAsString = (size: number) => {
+    var s = size;
+    var format = [" B", " KB", " MB", " GB", " TB", " PB", " EB", " ZB", " YB"];
+    var i = 0;
+    while (i < format.length - 1 && s >= 1024) {
+        s = (100 * s / 1024) / 100.0;
+        i++;
+    }
+    return s.toLocaleString() + format[i];
+}
+
+const isAudio = (ext: string) => {
+    switch (ext) {
+        case ".aac":
+        case ".aif":
+        case ".aiff":
+        case ".au":
+        case ".gsm":
+        case ".m4a":
+        case ".mid":
+        case ".midi":
+        case ".mka":
+        case ".mp3":
+        case ".oga":
+        case ".ogg":
+        case ".ra":
+        case ".ram":
+        case ".snd":
+        case ".spx":
+        case ".wav":
+        case ".wma":
+            return true;
+        default:
+            return false;
+    }
+}
+
+const isImage = (ext: string) => {
+    switch (ext) {
+        case ".ai":
+        case ".apng":
+        case ".bmp":
+        case ".emf":
+        case ".eps":
+        case ".gif":
+        case ".heic":
+        case ".ico":
+        case ".jpg":
+        case ".jpeg":
+        case ".png":
+        case ".psd":
+        case ".svg":
+        case ".tif":
+        case ".tiff":
+        case ".webp":
+        case ".wmf":
+            return true;
+        default:
+            return false;
+    }
+}
+
+const isVideo = (ext: string) => {
+    switch (ext) {
+        case ".3g2":
+        case ".asx":
+        case ".asf":
+        case ".avi":
+        case ".flv":
+        case ".mk3d":
+        case ".mkv":
+        case ".mov":
+        case ".mp4":
+        case ".mpeg":
+        case ".mpg":
+        case ".ogm":
+        case ".ogv":
+        case ".ogx":
+        case ".qt":
+        case ".rm":
+        case ".rv":
+        case ".smi":
+        case ".smil":
+        case ".swf":
+        case ".webm":
+        case ".wmv":
+        case ".xaml":
+            return true;
+        default:
+            return false;
+    }
+}
+
+const isMarkup = (ext: string) => {
+    switch (ext) {
+        case ".htm":
+        case ".html":
+        case ".xhtml":
+        case ".xml":
+            return true;
+        default:
+            return false;
+    }
+}
+
+const isText = (ext: string) => {
+    switch (ext) {
+        case ".as":
+            case ".as3":
+            case ".asm":
+            case ".aspx":
+            case ".bat":
+            case ".c":
+            case ".cc":
+            case ".cmake":
+            case ".coffee":
+            case ".cpp":
+            case ".cs":
+            case ".css":
+            case ".cxx":
+            case ".diff":
+            case ".erb":
+            case ".erl":
+            case ".groovy":
+            case ".gvy":
+            case ".h":
+            case ".haml":
+            case ".hh":
+            case ".hpp":
+            case ".html":
+            case ".hxx":
+            case ".java":
+            case ".js":
+            case ".json":
+            case ".jsx":
+            case ".less":
+            case ".lst":
+            case ".m":
+            case ".make":
+            case ".markdown":
+            case ".md":
+            case ".mdown":
+            case ".mkdn":
+            case ".ml":
+            case ".mm":
+            case ".out":
+            case ".patch":
+            case ".php":
+            case ".pl":
+            case ".plist":
+            case ".properties":
+            case ".py":
+            case ".rb":
+            case ".sass":
+            case ".scala":
+            case ".scm":
+            case ".script":
+            case ".scss":
+            case ".sh":
+            case ".sml":
+            case ".sql":
+            case ".txt":
+            case ".vb":
+            case ".vi":
+            case ".vim":
+            case ".xhtml":
+            case ".xml":
+            case ".xsd":
+            case ".xsl":
+            case ".yaml":
+            case ".yml":
+            return true;
+        default:
+            return false;
+    }
+}
+
+export const getIcon = (name: string, mediaType?: string): { icon: string, color?: string } => {
+    var ext = name.substring(name.lastIndexOf('.') , name.length) || name;
+
+    if (ext === "") return { icon: "file" };
+
+    if (isAudio(ext)) {
+        return { icon: "file", color: "indigo" };
+    } else if (isImage(ext)) {
+        return { icon: "file-image", color: "cyan" };
+    } else if (isVideo(ext)) {
+        return { icon: "file-image", color: "pink" };
+    } else if (isMarkup(ext)) {
+        return { icon: "file-xml", color: "purple" };
+    } else if (isText(ext)) {
+        return { icon: "file-document" };
+    } else{
+        switch (ext) {
+            case ".7z":
+            case ".zip":
+                return { icon: "file-compressed", color: "orange"};                
+            case ".doc":
+            case ".docm":
+            case ".docx":
+            case ".dotm":
+            case ".dotx":
+                return { icon: "file-word", color: "native"};                                                
+            case ".eml":
+            case ".msg":
+                return { icon: "email", color: ""};                                                
+            case ".xls":
+            case ".xlsm":
+            case ".xlsx":
+            case ".xltx":
+                return { icon: "file-excel", color: "native"};
+            case ".pdf":
+                return { icon: "file-pdf", color: "native"};                                                
+            case ".ppt":
+            case ".pptm":
+            case ".pptx":
+            case ".potx":
+                return { icon: "file-powerpoint", color: "native"};                                                                
+            case ".pages":
+                return { icon: "file", color: "orange"};                                                                                
+            case ".numbers":
+                return { icon: "file", color: "green"};                                                                
+            case ".keynote":
+                return { icon: "file", color: "blue"};                                                                
+        }
+    }
+
+    // fallback
+    return { icon: "file" };
+}

package/src/utils/infiniteScroll.js

@@ -0,0 +1,175 @@
+/**
+ * Creates a new regular scroll listener
+ * 
+ * @param {Element} observeElement 
+ * @param {Function} whenNext
+ * @returns IntersectionObserver
+ */
+ export function createScroller(observeElement, whenNext) {
+    console.log("creating regular scroller");
+    var parent = getScrollParent(observeElement);
+
+    whenNext ??= () => Promise.reject(new Error("No scroller handler function defined")); // default
+
+    const nextObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+                whenNext();
+            }
+        });
+    }, { root: parent, threshold: 0 });
+
+    nextObserver.observe(observeElement);
+
+    return nextObserver;
+}
+
+/**
+ * Creates a new reverse scroll listener
+ * 
+ * @param {Element} observeElement 
+ * @param {Function} whenNext 
+ * @returns IntersectionObserver
+ */
+export function createReverseScroller(observeElement, whenNext) {
+    // inverted infinite scroll (e.g. for messages)
+    let prevSleep = false;
+
+    //console.log("creating reverse scroller");
+    var parent = getScrollParent(observeElement);
+
+    // Disable scroll anchoring https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+    parent.style.overflowAnchor = "none";
+
+    whenNext ??= () => Promise.reject(new Error("No reverse scroller handler function defined")); // default
+
+    const prevObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(function (entry) {
+            if (entry.isIntersecting && !prevSleep) {
+                prevSleep = true;
+
+                // find first child (that is regularly positioned)
+                var nextPositionedChild = getNextPositionedChild(entry.target);
+
+                var prevScrollHeight = parent.scrollHeight;
+                var childOffsetBefore = nextPositionedChild.offsetTop;
+                
+                //console.log("intersecting", childOffsetBefore);
+                
+                let afterNext = () => {
+                    queueMicrotask(() => { // Place last in microtask queue
+                        // scroll parent so that first child remains in the same position as before
+                        // NOTE: when this is called via observer we need to requestAnimationFrame, otherwise scrolling happens to fast (before the DOM has been updated)
+                        if (prevScrollHeight !== parent.scrollHeight) {
+                            // layout already rendered
+                            let diff = nextPositionedChild.offsetTop - childOffsetBefore;
+                            //console.log("infinite scroll updated instantly", diff);
+                            parent.scrollTop += diff;
+                            requestAnimationFrame(() => prevSleep = false);
+                        } else {
+                            queueMicrotask(() => {
+                                if (prevScrollHeight !== parent.scrollHeight) {
+                                    // layout rendered after 
+                                    let diff = nextPositionedChild.offsetTop - childOffsetBefore;
+                                    //console.log("infinite scroll updated by microtask", diff);
+                                    parent.scrollTop += diff;
+                                    requestAnimationFrame(() => prevSleep = false);
+                                } else {
+                                    // layout not rendered yet
+                                    requestAnimationFrame(() => {
+                                        let diff = nextPositionedChild.offsetTop - childOffsetBefore;
+                                        //console.log("infinite scroll updated by animationframe", diff);
+                                        parent.scrollTop += diff;
+                                        requestAnimationFrame(() => prevSleep = false);
+                                    });
+                                }
+                            });
+                        }
+                    });
+                };
+
+                let whenNextResult = whenNext();
+
+                if (whenNextResult) {
+                    whenNextResult.then(afterNext);
+                } else {
+                    afterNext();
+                }
+            }
+        })
+    }, { root: parent, threshold: 0, rootMargin: "500px 0px 0px 0px" });
+
+    prevObserver.observe(observeElement);
+
+    return prevObserver;
+}
+
+/**
+ * 
+ * @param {Element} el 
+ * @returns Element
+ */
+export function getNextPositionedChild(el) {
+    while(el = el?.nextElementSibling) {
+        if(/absolute|sticky|fixed/.test(getComputedStyle(el).position) === false) {
+            return el;
+        }
+    }
+}
+
+// get the closest ancestor element that is scrollable (adapted from https://stackoverflow.com/a/42543908/891843)
+/**
+ * 
+ * @param {Element} element 
+ * @returns Element
+ */
+export function getScrollParent(element) {
+    var includeHidden = false;
+
+    if (element) {
+        var style = getComputedStyle(element);
+        var excludeStaticParent = style.position === "absolute";
+        var overflowRegex = includeHidden ? /(auto|scroll|overlay|hidden)/ : /(auto|overlay|scroll)/;
+
+        if (style.position === "fixed") {
+            return document.scrollingElement;
+        }
+
+        for (var parent = element; (parent = parent.parentElement);) {
+            style = getComputedStyle(parent);
+            
+            if (excludeStaticParent && style.position === "static") {
+                continue;
+            }
+            if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+                return parent;
+            }
+        }
+    }
+
+    return document.scrollingElement;
+}
+
+/**
+ * 
+ * @param {Element} ref 
+ * @param {boolean} smooth 
+ */
+export function scrollToBottom(ref, smooth) {
+    var parent = getScrollParent(ref);
+    //console.log("scrolling #messages", origin, el.scrollHeight, el);
+    
+    if (parent && parent.scrollTop + parent.clientHeight !== parent.scrollHeight) {
+        if (smooth) {
+            parent.scrollTo({
+                top: parent.scrollHeight,
+                left: 0,
+                behavior: 'smooth'
+            });
+        } else {
+            parent.scrollTop = parent.scrollHeight;
+        }
+    }
+
+}
+

package/src/utils/scrollToBottom.js

@@ -0,0 +1,75 @@
+/**
+ * Finds the nearest scrollable area. Defaults to document.scrollingElement.
+ * 
+ * @param {Element?} element - Reference element in the scrollable area
+ * @param {boolean} [includeHidden=false] - Treat elements with `overflow: hidden` as scrollable areas.
+ * @returns Element
+ */
+export function getScrollParent(element, includeHidden) {
+    if (element) {
+        var style = getComputedStyle(element);
+        var excludeStaticParent = style.position === "absolute";
+        var overflowRegex = includeHidden ? /(auto|scroll|overlay|hidden)/ : /(auto|overlay|scroll)/;
+
+        if (style.position === "fixed") {
+            return document.scrollingElement;
+        }
+
+        for (var parent = element; (parent = parent.parentElement);) {
+            style = getComputedStyle(parent);
+
+            if (excludeStaticParent && style.position === "static") {
+                continue;
+            }
+            if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+                return parent;
+            }
+        }
+    }
+
+    return document.scrollingElement;
+}
+
+/**
+ * Checks if a parent scroll container is scrolled to bottom
+ * @param {Element?} element 
+ * @param {number} [bottomThreshold=32] - Nearby limit for the bottom. Needs to be at least 1 to catch float calculation errors.
+ * @returns boolean
+ */
+export function isParentAtBottom(element, bottomThreshold) {
+    if (element) {
+        bottomThreshold ??= 32; // Minimum 1 to catch float errors
+
+        let area = getScrollParent(element);
+        //console.log("isParentAtBottom", area.scrollTop, area.clientHeight, area.scrollHeight, Math.abs((area.scrollTop + area.clientHeight) - area.scrollHeight) <= bottomThreshold)
+        // We need to account for scrollTop being a float
+        return Math.abs((area.scrollTop + area.clientHeight) - area.scrollHeight) <= bottomThreshold;
+    }
+    return false;
+}
+
+/**
+ * Scrolls a parent scroll container to the bottom using a reference element in the scrollable area.
+ * 
+ * @param {Element?} element - Element in the scroll area
+ * @param {boolean} [smooth] - Use smooth scrolling instead of instant scrolling
+ */
+export function scrollParentToBottom(element, smooth) {
+    if (element) {
+        let area = getScrollParent(element);
+        //console.log("scrolling to bottom", area.scrollHeight);
+
+        // Don't bother if the scroll already is correct
+        if (area.scrollTop + area.clientHeight !== area.scrollHeight) {
+            if (smooth) {
+                area.scrollTo({
+                    top: area.scrollHeight,
+                    left: 0,
+                    behavior: 'smooth'
+                });
+            } else {
+                area.scrollTop = area.scrollHeight;
+            }
+        }
+    }
+}

package/src/utils/styles.ts

@@ -0,0 +1,42 @@
+
+var themePrefix = "wy";
+
+/**
+ * Sets the prefix for CSS classes on the HTML element for usage in javascript.
+ * @param {string} prefix
+ */
+ export function setPrefix(prefix:string) {
+    if (typeof prefix === "string") {
+        themePrefix = prefix;
+    }
+  }
+  
+  
+  /**
+   * Prefixes one or more classnames (with or without dot) using the themePrefix
+   * @param {...string} strs 
+   * @returns string[]
+   */
+  export function prefixes(...strs:string[]) {
+    const _prefix = themePrefix || '';
+    if (_prefix) {
+      strs = strs.map((str) => {
+        str ??= '';
+        if (str[0] === '.') {
+          return `.${_prefix}-${str.substring(1)}`;
+        } else {
+          return `${_prefix}-${str}`;
+        }
+      })
+    }
+    return strs;
+  }
+
+  /**
+   * Prefixes one classname (with or without dot) using the themePrefix
+   * @param {string} str 
+   * @returns string
+   */
+  export function prefix(str:string) {
+    return prefixes(...(str.split(" "))).join(" ");
+  }