lexgui 8.1.2 → 8.2.1

package/changelog.md

@@ -2,7 +2,70 @@
 
 ## dev
 
-## 8.1.2 (master)
+## 8.2.1 (master)
+
+CodeEditor:
+- Fixed `options.onReady` being called before processing lines.
+
+VideoEditor:
+- Added `resizeVideo` and `resizeControls` to update area sizes. They are automatically called by resize.
+- Added `controlsComponents` object that holds all buttons and timebar that will be displayed in the ui.
+- Added a `createControls` function to create different button layouts. It creates all buttons and then calls a layout creator.
+- Added `createControlsLayout_0` and `createControlsLayout_1` with default button layouts.
+- Added `controlsLayout` option to specify which default layout to use or a custom function.
+- Added `onChangeState` and `onChangeLoop` user callbacks.
+- Added `resetCropBtn`. Only displayed in layout 1.
+
+VideoEditor TimeBar:
+- `mousemove` and `mouseup` events now attach to document instead of canvas, for a better user experience.
+- Added `unbind` function to remove document events.
+- Fixed marker grabbing when both overlapped.
+
+Expose DocMaker extension in LX.
+Minor CSS fixes.
+
+## 8.2
+
+Use Tailwind (finally) to create and compile CSS.
+Removed custom utility classes, refactored theme colors and every theme variable used in LX.
+Cleaned main CSS, move generic component styling to classes.
+Added `LX.twMerge` and `LX.mergeClass` to merge elements class names and allow overrides.
+`LX.getCSSVariable` (old `LX.getThemeColor`) now allows to get colors with applied alpha using `color/{alpha}`.
+Added new Avatar Component (see docs).
+Added support for primary color theming using `LX.setThemeColor`.
+Avatar Component in now used in Sidebar header and footer.
+Added support for `oklch` format in ColorInput, new utils `LX.oklchToHex`.
+Added Select `options.side` to force dropdown list alignment.
+Added Vector `options.skipLock` to skip the lock button.
+Fixed modal scroll bleed.
+Fixed Commandbar position when page has vertical scroll.
+Minor fixes Area Tabs' and Sidebar's CSS.
+
+NodeTree:
+- Refactored Event system to be compatible with AssetView events, using also cancellable events.
+
+AssetView:
+- Removed `options.onRefreshContent`.
+- Added new `refreshContent`, `beforeRefreshContent` events.
+- Added new `nodeDragged`, `beforeNodeDragged` events for Explorer node movements.
+- Entering a folder now selects its folder item in the Explorer.
+
+CodeEditor:
+- Fixed NextOcurrence (Ctrl+D) bug.
+- Fixed some issues with deleting using multiple cursors.
+- Fixed Cursor deleting bug when merging multiple cursors.
+- `options.callback` renamed to `options.onReady`, which is now called once the Editor is ready and visible.
+- Pair keys `(), {}, "", ...` now only pair if no next char (or space).
+- Added 3rd parameter to `setText(text, langString, _detectLanguage_)` to allow forcing language detection.
+
+Other API Changes:
+- `LX.getThemeColor` and `LX.setThemeColor` renamed to `LX.getCSSVariable` and `LX.setCSSVariable`.
+- `LX.setSystemTheme` renamed to `LX.setSystemMode`.
+- `LX.getTheme`, `LX.setTheme`, and `LX.switchTheme` renamed to `LX.getMode`, `LX.setMode`, and `LX.switchMode`.
+- ComboButtons Component `options.float` now accepts `start, center, end` instead of `left, center, right`.
+- Breadcrumb items `title` renamed to `name`.
+
+## 8.1.2
 
 Removed legacy code `CurvesTimeline` from `editor.html` example.
 
@@ -10,7 +73,7 @@ VideoEditor:
 - Forced area to have position relative so cropArea is correctly positioned.
 
 Timeline:
-- Autmatically calls `updateTheme` color on instance creation.
+- Automatically calls `updateTheme` color on instance creation.
 
 ## 8.1.1
 

package/demo.js

@@ -4,9 +4,12 @@ import { CodeEditor } from 'lexgui/extensions/CodeEditor.js';
 window.LX = LX;
 
 const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
-const starterTheme = LX.getTheme();
+const starterTheme = LX.getMode();
 const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
 const localHost = window.location.protocol !== "https:";
+const themes = [
+    'Amber', 'Blue', 'Green', 'Neutral', 'Orange', 'Purple', 'Red', 'Rose', 'Teal', 'Violet', 'Yellow'
+]
 const menubarButtons = [
     { name: "Docs", callback: () => { window.open("./docs/") } },
     { name: "Examples", callback: () => { window.open("./examples/") } },
@@ -33,10 +36,10 @@ if( mobile )
     }, {
         headerTitle: `lexgui.js`,
         headerSubtitle: `v${ LX.version }`,
-        headerImage: "./images/favicon.png",
+        headerIcon: "UserRound",
         footerTitle: "jxarco",
-            footerSubtitle: "alexroco.30@gmail.com",
-            footerImage: "https://avatars.githubusercontent.com/u/25059187?s=400&u=ad8907b748c13e4e1a7cdd3882826acb6a2928b5&v=4",
+        footerSubtitle: "alexroco.30@gmail.com",
+        footerImage: "https://avatars.githubusercontent.com/u/25059187?v=4",
         collapsed: false,
         collapsable: false,
         displaySelected: false
@@ -46,9 +49,10 @@ else
 {
     menubar = area.addMenubar( menubarButtons );
 
-    const commandButton = new LX.Button(null, `Search command...<span class="ml-auto">${ LX.makeKbd( ["Ctrl", "Space"], false, "bg-tertiary border px-1 rounded" ).innerHTML }</span>`, () => { LX.setCommandbarState( true ) }, {
-        width: "256px", className: "right", buttonClass: "p-4 fg-tertiary bg-primary" }
+    const commandButton = new LX.Button(null, `Search command...`, () => { LX.setCommandbarState( true ) }, {
+        width: "256px", className: "right", buttonClass: "p-4 border-input bg-card text-muted-foreground" }
     );
+    commandButton.root.querySelector( 'button' ).appendChild( LX.makeKbd( ["Ctrl", "Space"], false, "ml-auto" ) );
     menubar.root.appendChild( commandButton.root );
 }
 
@@ -69,7 +73,7 @@ menubar.addButtons( [
         title: "Switch Theme",
         icon: starterTheme == "dark" ? "Moon" : "Sun",
         swap: starterTheme == "dark" ? "Sun" : "Moon",
-        callback:  (value, event) => { LX.switchTheme() }
+        callback:  (value, event) => { LX.switchMode() }
     },
     {
         title: "Switch Spacing",
@@ -82,24 +86,26 @@ if( mobile )
 {
     menubar.root.querySelector( ".lexmenubuttons" ).style.marginLeft = "auto";
 
-    const commandButton = new LX.Button(null, LX.makeIcon( "Menu" ).innerHTML, () => {
+    const menuButton = new LX.Button(null, "MenuButton", () => {
         window.__currentSheet = new LX.Sheet("256px", [ sheetArea ] );
-    }, { buttonClass: "p-4 bg-none fg-tertiary" } );
-    menubar.root.prepend( commandButton.root );
+    }, { icon: "Menu", buttonClass: "p-4 bg-none" } );
+    menubar.root.prepend( menuButton.root );
 }
 
+LX._registerIconsAndColors( "./" );
+
 // Header
 {
-    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col gap-4 pt-8 pb-4 items-center", `
-        <a href="docs?p=changelog" class="flex flex-row gap-1 items-center text-sm p-1 px-4 rounded-full fg-primary decoration-none hover:bg-secondary cursor-pointer"><span class="flex bg-accent w-2 h-2 rounded-full"></span>
-            New Components: Spinner, Pagination and more${ LX.makeIcon( "ArrowRight", { svgClass: "sm" } ).innerHTML }</a>
-        <p class="fg-primary font-medium tracking-tight leading-none text-center text-balance text-5xl xs:text-4xl">Build your Application Interface</p>
-        <p class="fg-primary font-light text-xl xs:text-lg text-center text-balance leading-normal max-w-3xl">A modern-style UI kit, inspired by shadcn, built for the web. Pure JavaScript, CSS, zero dependencies. Fully Open Source.</p>
+    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col gap-4 p-8 pb-4 items-center", `
+        <a href="docs?p=changelog" class="flex flex-row gap-1 items-center text-sm p-1 px-4 rounded-full text-secondary-foreground decoration-none hover:bg-secondary cursor-pointer"><span class="flex bg-info w-2 h-2 rounded-full"></span>
+            New Components: Avatar, Spinner, Pagination and more${ LX.makeIcon( "ArrowRight", { svgClass: "sm" } ).innerHTML }</a>
+        <p class="fg text-secondary-foreground font-medium tracking-tight leading-none text-center text-balance sm:text-5xl text-4xl">Build your Application Interface</p>
+        <p class="text-secondary-foreground font-light text-xl xs:text-lg text-center text-balance leading-normal max-w-3xl">A modern-style UI kit, inspired by shadcn, built for the web. Pure HTML, JavaScript, and Tailwind CSS. Fully Open Source.</p>
     `, area );
 
     const headerButtons = LX.makeContainer( [ "auto", "auto" ], "flex flex-row mt-2", ``, header );
-    const getStartedButton = new LX.Button( null, `Get Started <span class="text-lg">${ LX.version }</span>`, () => window.open( "./docs/", "_blank" ), { buttonClass: "contrast" } );
-    const componentsButton = new LX.Button( null, "View Components", () => window.open( "./docs/?p=components", "_blank" ), { buttonClass: "tertiary" } );
+    const getStartedButton = new LX.Button( null, `Get Started <span class="text-base">${ LX.version }</span>`, () => window.open( "./docs/", "_blank" ), { buttonClass: "primary" } );
+    const componentsButton = new LX.Button( null, "View Components", () => window.open( "./docs/?p=components", "_blank" ), { buttonClass: "ghost" } );
     headerButtons.appendChild( getStartedButton.root );
     headerButtons.appendChild( componentsButton.root );
 }
@@ -113,7 +119,13 @@ if( mobile )
     {
         tabs = area.addTabs( { parentClass: "p-4", sizes: [ "auto", "auto" ], contentClass: "p-6 pt-0" } );
 
-        const editorContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
+        const tabsParent = tabs.root.parentElement;
+        tabsParent.className = LX.mergeClass( tabsParent.className, 'flex flex-row justify-between' );
+
+        const themeSelect = new LX.Select( null, themes, 'Neutral', (v) => LX.setThemeColor( v.toLowerCase() ), { overflowContainerY: null, align: "end" } );
+        tabsParent.appendChild( themeSelect.root );
+
+        const editorContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col border-color rounded-lg overflow-hidden" );
         tabs.add( "Editor", editorContainer, { selected: true } );
 
         const editorArea = new LX.Area({ className: "rounded-lg" });
@@ -209,7 +221,7 @@ if( mobile )
         left.onresize = resizeCanvas;
         left.addOverlayButtons( [
             [
-                { name: "Select", icon: "MousePointer", selectable: true },
+                { name: "Select", icon: "MousePointer", selectable: true, selected: true },
                 { name: "Move", icon: "Move", selectable: true },
                 { name: "Rotate", icon: "RotateRight", selectable: true }
             ],
@@ -285,18 +297,69 @@ if( mobile )
 
             window.tree = panel.addTree("Scene Tree", sceneData, {
                 icons: treeIcons,
-                addDefault: true,
-                onevent: (event) => {
-                    switch(event.type) {
-                        case LX.TreeEvent.NODE_CONTEXTMENU:
-                            const m = event.panel;
-                            m.add( "Components/Transform");
-                            m.add( "Components/MeshRenderer");
-                            break;
-                    }
-                }
+                addDefault: true
             });
 
+            // Tree events
+            {
+                window.tree.on( 'contextMenu', ( event ) => {
+                    return [
+                        { name: "Components/Transform" },
+                        { name: "Components/MeshRenderer" }
+                    ]
+                } );
+    
+                // Click events
+                {
+                    window.tree.on( "select", ( event, resolve ) => {
+                        console.log(`${ event.items[ 0 ].id } selected` );
+                    } );
+
+                    window.tree.on( "dblClick", ( event ) => {
+                        console.log(`${ event.items[ 0 ].id } dbl clicked` );
+                    } );
+                }
+
+                // Rename events
+                {
+                    window.tree.on( "beforeRename", ( event, resolve ) => {
+                        LX.prompt("Perform Rename Action?", "Server Message", () => {
+                            resolve();
+                        })
+                    } );
+        
+                    window.tree.on( "rename", ( event ) => {
+                        console.log(`${ event.oldName } renamed to ${ event.newName }`);
+                    } );
+                }
+
+                // Delete events
+                {
+                    window.tree.on( "beforeDelete", ( event, resolve ) => {
+                        LX.prompt("Perform Delete Action?", "Server Message", () => {
+                            resolve();
+                        })
+                    } );
+
+                    window.tree.on( "delete", ( event ) => {
+                        console.log(event.items[ 0 ].id + " deleted");
+                    } );
+                }
+
+                // Move events
+                {
+                    window.tree.on( "beforeMove", ( event, resolve ) => {
+                        LX.prompt("Perform Move Action?", "Server Message", () => {
+                            resolve();
+                        })
+                    } );
+
+                    window.tree.on( "move", ( event ) => {
+                        console.log(`${ event.items[ 0 ].id } moved to ${ event.to.id }` );
+                    } );
+                }
+            }
+
             // add components to panel branch
             panel.branch("Canvas", { icon: "Palette", filter: true });
             panel.addColor("Background", "#b7a9b1", null);
@@ -304,6 +367,7 @@ if( mobile )
             panel.addColor("Font Color", "#303b8d", null);
             panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
             panel.addSelect("Font Family", ["Arial", "GeistSans", "Inter", "Monospace", "CascadiaCode"], "GeistSans");
+            panel.addSeparator();
             panel.addRange("Threshold Range", [2, 7], (v) => console.log(v), { min: 0, max: 10, step: 1, className: "accent" });
             panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
             const opacityValues = [
@@ -318,7 +382,7 @@ if( mobile )
 
             panel.branch("Node", { icon: "Box" });
             panel.addText("Name", "node_1");
-            panel.addCheckbox("Visibility", true, null, { className: "accent" });
+            panel.addCheckbox("Visibility", true, null);
             panel.addLayers("Layers", 10, null);
 
             const map2Dpoints = [
@@ -337,7 +401,7 @@ if( mobile )
             panel.addVector3( "Position", [0.0, 0.0, 0.0] );
             panel.addVector4( "Rotation", [0.0, 0.0, 0.0, 1.0] );
             panel.addVector3( "Scale", [1.0, 1.0, 1.0] );
-            panel.addButton(null, "Export", () =>  { console.log("Exported!") }, { buttonClass: "contrast", xmustConfirm: true,
+            panel.addButton(null, "Export", () =>  { console.log("Exported!") }, { buttonClass: "primary", xmustConfirm: true,
                 // confirmSide: "left",
                 // confirmAlign: "start",
                 // confirmText: "Yeah",
@@ -363,7 +427,7 @@ if( mobile )
         }
 
         {
-            const panel = new LX.Panel( { className: "rounded-lg border p-4 flex flex-col gap-4" } );
+            const panel = new LX.Panel( { className: "rounded-lg border-color p-4 flex flex-col gap-4" } );
             panel.addColor("Background", "#b7a9b1", null);
             panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
             panel.addColor("Font Color", "#303b8d", null);
@@ -418,12 +482,12 @@ if( mobile )
     // Mail
     if( !mobile )
     {
-        const mailContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
-        tabs.add( "Mail", mailContainer, { xselected: true, badge: { content: "5", className: "sm fg-white bg-error", asChild: true } } );
+        const mailContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col border-color rounded-lg overflow-hidden" );
+        tabs.add( "Mail", mailContainer, { xselected: true, badge: { content: "5", className: "destructive px-1", asChild: true } } );
 
         const mailArea = new LX.Area();
         mailContainer.appendChild( mailArea.root );
-        const badgeClass = "ml-auto bg-none font-medium";
+        const badgeClass = "xs ml-auto bg-none font-medium";
 
         const sidebar = mailArea.addSidebar( m => {
             m.add( "Inbox", { selected: true, icon: "Inbox", content: LX.badge("128", badgeClass, { asElement: true }) } );
@@ -439,10 +503,10 @@ if( mobile )
             m.add( "Shopping ", { icon: "ShoppingCart" } );
             m.add( "Promotions", { icon: "Flag", content: LX.badge("21", badgeClass, { asElement: true }) } );
         }, {
-            className: "border-right",
+            className: "border-r-color",
             headerTitle: "jxarco",
             headerSubtitle: "alexroco.30@gmail.com",
-            headerImage: "images/favicon.png",
+            headerIcon: "UserRound",
             skipFooter: true,
             displaySelected: true,
             onHeaderPressed: (e, element) => { }
@@ -455,10 +519,10 @@ if( mobile )
 
         // Manage Inbox
         {
-            const inboxTabs = left.addTabs({ parentClass: "flex p-3 items-end border-bottom", sizes: [ "auto", "auto" ], float: "end" });
+            const inboxTabs = left.addTabs({ parentClass: "flex p-3 items-end border-b-color", sizes: [ "auto", "auto" ], float: "end" });
             const tabsRowContainer = inboxTabs.root.parentElement;
 
-            const mailSectionTitle = LX.makeContainer( [ "auto", "auto" ], "mr-auto ml-2 self-center text-xxl font-semibold", "Inbox" );
+            const mailSectionTitle = LX.makeContainer( [ "auto", "auto" ], "mr-auto ml-2 place-self-center text-2xl font-semibold", "Inbox" );
             tabsRowContainer.prepend( mailSectionTitle );
 
             window.__showMailList = ( container, unreadOnly = false ) => {
@@ -480,7 +544,7 @@ if( mobile )
 
                         const selected = ( idx == 0 );
                         const msgContent = LX.makeContainer( [ "100%", "auto" ],
-                            `flex flex-col border p-3 rounded-lg gap-2 select-none hover:bg-mix cursor-pointer ${ selected ? "bg-secondary" : "" }`, "", mailContainer );
+                            `flex flex-col border-color p-3 rounded-lg gap-2 select-none cursor-pointer ${ selected ? "bg-secondary" : "" }`, "", mailContainer );
 
                         // Name, subject, date
                         {
@@ -489,20 +553,20 @@ if( mobile )
 
                             // Name + Date
                             {
-                                const msgName = LX.makeContainer( [ "auto", "auto" ], "flex font-semibold text-md gap-2", "", msgNameDate );
+                                const msgName = LX.makeContainer( [ "auto", "auto" ], "flex font-semibold text-sm gap-2", "", msgNameDate );
                                 msgName.innerHTML = mail.name;
-                                msgName.innerHTML += ( mail.read ? "" : `<span class="rounded-full self-center bg-accent" style="width: 8px; height: 8px"></span>` );
-                                const msgDate = LX.makeContainer( [ "auto", "auto" ], "fg-tertiary text-sm ml-auto self-center", mail.date, msgNameDate );
+                                msgName.innerHTML += ( mail.read ? "" : `<span class="rounded-full place-self-center bg-accent" style="width: 8px; height: 8px"></span>` );
+                                const msgDate = LX.makeContainer( [ "auto", "auto" ], "text-muted-foreground text-xs ml-auto place-self-center", mail.date, msgNameDate );
                             }
 
-                            const msgSubject = LX.makeContainer( [ "100%", "auto" ], "font-semibold text-sm", mail.subject, msgInfo );
+                            const msgSubject = LX.makeContainer( [ "100%", "auto" ], "font-semibold text-xs", mail.subject, msgInfo );
                         }
 
-                        const msgText = LX.makeContainer( [ "100%", "auto" ], "text-sm line-clamp-2 fg-tertiary", mail.content, msgContent );
+                        const msgText = LX.makeContainer( [ "100%", "auto" ], "text-xs line-clamp-2 text-muted-foreground", mail.content, msgContent );
                         const msgTags = LX.makeContainer( [ "100%", "auto" ], "flex flex-row gap-0.5 font-semibold", "", msgContent );
                         for( const tag of mail.tags )
                         {
-                            msgTags.appendChild( LX.badge( tag, "sm", { asElement: true } ) );
+                            msgTags.appendChild( LX.badge( tag, "xs", { asElement: true } ) );
                         }
 
                         LX.listen( msgContent, "click", function() {
@@ -532,18 +596,18 @@ if( mobile )
         {
             // Buttons
             {
-                const mailPreviewHeader = LX.makeContainer( [ "100%", "43.5px" ], "flex flex-row border-bottom p-1", "", right );
+                const mailPreviewHeader = LX.makeContainer( [ "100%", "43.5px" ], "flex flex-row border-b-color p-1", "", right );
 
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Archive", tooltip: true, buttonClass: "bg-none", icon: "Archive" } ).root );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to junk", tooltip: true, buttonClass: "bg-none", icon: "ArchiveX" } ).root );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Move to trash", tooltip: true, buttonClass: "bg-none", icon: "Trash3" } ).root );
-                mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-right self-center ml-2 mr-2" ) );
+                mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-r-color place-self-center ml-2 mr-2" ) );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Snooze", tooltip: true, buttonClass: "bg-none", icon: "Clock" } ).root );
 
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply", tooltip: true, buttonClass: "bg-none", className: "ml-auto", icon: "Reply" } ).root );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Reply all", tooltip: true, buttonClass: "bg-none", icon: "ReplyAll" } ).root );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", null, { title: "Forward", tooltip: true, buttonClass: "bg-none", icon: "Forward" } ).root );
-                mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-right self-center ml-2 mr-2" ) );
+                mailPreviewHeader.appendChild( LX.makeContainer( [ "1px", "35%" ], "border-r-color place-self-center ml-2 mr-2" ) );
                 mailPreviewHeader.appendChild( new LX.Button( null, "", (value, event) => {
                     new LX.DropdownMenu( event.target, [
                         { name: "Mark as unread" },
@@ -562,20 +626,20 @@ if( mobile )
 
                     previewDataContent.innerHTML = "";
 
-                    const mailPreviewInfo = LX.makeContainer( [ "100%", "auto" ], "flex flex-row border-bottom p-4 gap-3", "", previewDataContent );
-                    const avatarContainer = LX.makeContainer( [ "40px", "40px" ], "bg-tertiary rounded-full content-center", "", mailPreviewInfo );
-
                     const mailNames = mail.name.split( ' ' );
-                    const avatarIcon = LX.makeContainer( [ "auto", "auto" ], "font-medium self-center", mailNames[ 0 ][ 0 ] + mailNames[ 1 ][ 0 ], avatarContainer );
+                    const mailPreviewInfo = LX.makeContainer( [ "100%", "auto" ], "flex flex-row border-b-color p-4 gap-3", "", previewDataContent );
+
+                    const avatar = new LX.Avatar( { imgSource: mail.avatar, fallback: mailNames[ 0 ][ 0 ] + mailNames[ 1 ][ 0 ], className: 'size-10', fallbackClass: "text-foreground" } );
+                    mailPreviewInfo.appendChild( avatar.root );
 
                     const senderData = LX.makeContainer( [ "auto", "auto" ], "flex flex-col gap-0.5", `
-                    <div class="text-md font-semibold">${ mail.name }</div>
-                    <div class="text-sm">${ mail.subject }</div>
-                    <div class="text-sm">Reply-To: ${ mail.email }</div>
+                    <div class="text-sm font-semibold">${ mail.name }</div>
+                    <div class="text-xs">${ mail.subject }</div>
+                    <div class="text-xs">Reply-To: ${ mail.email }</div>
                     `, mailPreviewInfo );
 
-                    const exactDate = LX.makeContainer( [ "auto", "auto" ], "flex flex-row text-sm fg-tertiary ml-auto", mail.exactDate, mailPreviewInfo );
-                    const mailPreviewContent = LX.makeContainer( [ "100%", "515px" ], "flex flex-row border-bottom text-md whitespace-pre-wrap p-4", mail.content, previewDataContent );
+                    const exactDate = LX.makeContainer( [ "auto", "auto" ], "flex flex-row text-xs text-muted-foreground ml-auto", mail.exactDate, mailPreviewInfo );
+                    const mailPreviewContent = LX.makeContainer( [ "100%", "515px" ], "flex flex-row border-b-color text-sm whitespace-pre-wrap p-4", mail.content, previewDataContent );
                     const previewFooter = LX.makeContainer( [ "100%", "auto" ], "flex flex-col p-2", "", previewDataContent );
 
                     const msgReplyTextArea = new LX.TextArea(null, "", null,
@@ -585,14 +649,14 @@ if( mobile )
 
                     const previewButtons = LX.makeContainer( [ "100%", "auto" ], "flex flex-row p-1", "", previewFooter );
 
-                    const muteToggle = new LX.Toggle( null, false, null, { label: "Mute this thread", className: "contrast" } );
+                    const muteToggle = new LX.Toggle( null, false, null, { label: "Mute this thread" } );
                     previewButtons.appendChild( muteToggle.root );
 
                     const sendButton = new LX.Button( null, "Send", () => {
                         LX.toast( "Message sent!", "To:" + mail.email, { timeout: 5000, action: { name: "Undo", callback: ( toast, actionName, event ) => {
                             toast.close();
                         } } } );
-                    }, { className: "ml-auto", buttonClass: "contrast" } );
+                    }, { className: "ml-auto", buttonClass: "primary" } );
                     previewButtons.appendChild( sendButton.root );
                 };
             }
@@ -602,12 +666,12 @@ if( mobile )
     // Tasks
     if( !mobile )
     {
-        const tasksContainer = LX.makeContainer( [ null, "auto" ], "col bg-background border rounded-lg p-6 overflow-hidden" );
+        const tasksContainer = LX.makeContainer( [ null, "auto" ], "col bg-background border-color rounded-lg p-6 overflow-hidden" );
         tabs.add( "Tasks", tasksContainer, { xselected: true } );
 
         const header = LX.makeContainer( [ null, "auto" ], "col p-4", `
             <h2>Welcome back!</h2>
-            <p class="fg-tertiary">Here's a list of your tasks for this month!</p>
+            <p class="text-muted-foreground text-sm">Here's a list of your tasks for this month!</p>
         `, tasksContainer );
 
         const tableComponent = new LX.Table(null, {
@@ -646,7 +710,7 @@ if( mobile )
                     { name: "Make a copy" },
                     { name: "Favourite" },
                     null,
-                    { name: "Delete", icon: "Trash2", className: "fg-error" },
+                    { name: "Delete", icon: "Trash2", className: "text-destructive" },
                 ]
             }
         });
@@ -656,7 +720,7 @@ if( mobile )
     // Code
     if( !mobile )
     {
-        const codeContainer = LX.makeContainer( [ "auto", "800px" ], "flex flex-col border rounded-lg overflow-hidden" );
+        const codeContainer = LX.makeContainer( [ "auto", "800px" ], "flex flex-col border-color rounded-lg overflow-hidden" );
         tabs.add( "Code", codeContainer );
 
         const codeArea = new LX.Area();
@@ -668,6 +732,44 @@ if( mobile )
             // disableEdition: true,
             // fileExplorer: false
         });
+
+        editor.setText(`interface Vec2 {
+    x: number;
+    y: number;
+}
+
+type Callback<T> = (value: T) => void;
+
+class Timer {
+    private startTime = 0;
+
+    start(): void {
+        this.startTime = performance.now();
+    }
+
+    elapsed(): number {
+        return performance.now() - this.startTime;
+    }
+}
+
+async function wait(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+const onTick: Callback<number> = time => {
+    console.log(\`Elapsed: \${time.toFixed(2)}ms\`);
+};
+
+async function main() {
+    const timer = new Timer();
+    timer.start();
+
+    await wait(500);
+    onTick(timer.elapsed());
+}
+
+main();
+`, undefined, true ); // Force detect language!
     }
 
     // Audio
@@ -683,7 +785,7 @@ if( mobile )
 // Footer
 {
     const footer = new LX.Footer( {
-        className: "border-top",
+        className: "border-t-color",
         parent: LX.root,
         columns: [
             {