@onetype/framework 2.0.30 → 2.0.32

package/addons/render/html/items/assets/favicon.js

@@ -7,6 +7,6 @@ html.Item({
     priority: -60,
     attributes: {
         rel: 'icon',
-        href: '/favicon.png'
+        href: 'https://cdn.onetype.ai/brand/logo/icon-orange.svg'
     }
 });

package/addons/render/pages/front/styles/page.css

@@ -15,3 +15,8 @@
 	position: relative;
 	overflow: auto;
 }
+
+.ot-page-area > div
+{
+	height: 100%;
+}

package/addons/render/transforms/functions/runtime.js

@@ -0,0 +1,64 @@
+transforms.Fn('runtime', function()
+{
+    this.methods.process = (node) =>
+    {
+        const id = node.getAttribute('ot');
+
+        if(!id)
+        {
+            return;
+        }
+
+        node.removeAttribute('ot');
+        transforms.Fn('run', id, node);
+    };
+
+    this.methods.scan = () =>
+    {
+        document.querySelectorAll('[ot]').forEach(node =>
+        {
+            this.methods.process(node);
+        });
+    };
+
+    this.methods.observe = () =>
+    {
+        new MutationObserver((mutations) =>
+        {
+            for(const mutation of mutations)
+            {
+                for(const node of mutation.addedNodes)
+                {
+                    if(node.nodeType !== 1)
+                    {
+                        continue;
+                    }
+
+                    if(node.hasAttribute('ot'))
+                    {
+                        this.methods.process(node);
+                    }
+
+                    node.querySelectorAll('[ot]').forEach(child =>
+                    {
+                        this.methods.process(child);
+                    });
+                }
+            }
+        }).observe(document.body, { childList: true, subtree: true });
+    };
+
+    if(document.readyState === 'loading')
+    {
+        document.addEventListener('DOMContentLoaded', () =>
+        {
+            this.methods.scan();
+            this.methods.observe();
+        });
+    }
+    else
+    {
+        this.methods.scan();
+        this.methods.observe();
+    }
+});

package/lib/items/elements/global/code/code.css

@@ -61,6 +61,6 @@
 	line-height: 1.6;
 	background: var(--ot-bg-2);
 	overflow-x: auto;
-	white-space: pre;
+	white-space: break-spaces;
 	tab-size: 4;
 }

package/lib/items/elements/global/markdown/markdown.css

@@ -12,6 +12,14 @@
 	width: 100%;
 }
 
+.e-4696d703 > .holder[variant="bg-2"]
+{
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	padding: var(--ot-spacing-m);
+}
+
 /* Line wrapper */
 
 .e-4696d703 > .holder > .line:empty

package/lib/items/elements/global/markdown/markdown.js

@@ -217,11 +217,16 @@ onetype.AddonReady('elements', (elements) =>
 			content: {
 				type: 'string',
 				value: ''
+			},
+			variant: {
+				type: 'string',
+				value: '',
+				options: ['', 'bg-2']
 			}
 		},
 		render: function()
 		{
-			return `<div class="holder">${parse(this.content)}</div>`;
+			return `<div class="holder" :variant="variant">${parse(this.content)}</div>`;
 		}
 	});
 });

package/lib/items/elements/global/parameters/{params.css → parameters.css}

@@ -11,6 +11,14 @@
 	width: 100%;
 }
 
+.e-29179902 > .holder[variant="bg-2"]
+{
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-m);
+	padding: var(--ot-spacing-m);
+}
+
 .e-29179902 > .holder > .param
 {
 	display: flex;

package/lib/items/elements/global/parameters/{params.js → parameters.js}

@@ -11,12 +11,17 @@ onetype.AddonReady('elements', (elements) =>
 			items: {
 				type: 'array',
 				value: []
+			},
+			variant: {
+				type: 'string',
+				value: '',
+				options: ['', 'bg-2']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder">
+				<div class="holder" :variant="variant">
 					<div ot-for="item in items" class="param">
 						<div class="left">
 							<span class="name">{{ item.name }}</span>

package/lib/items/elements/navigation/navbar/navbar.css

@@ -20,9 +20,7 @@
 {
 	display: flex;
 	align-items: center;
-	gap: var(--ot-spacing-s);
 	text-decoration: none;
-	color: var(--ot-text-1);
 	flex-shrink: 0;
 }
 
@@ -31,6 +29,13 @@
 	height: 16px;
 }
 
+.e-64d8716d > .holder > .logo > .logo-arrow
+{
+	display: none;
+	font-size: 16px;
+	color: var(--ot-text-2);
+}
+
 
 /* Tabs */
 
@@ -38,8 +43,8 @@
 {
 	display: flex;
 	align-items: center;
-	gap: var(--ot-spacing-x);
-	margin-left: var(--ot-spacing-l);
+	margin-left: var(--ot-spacing-m);
+	border-left: 1px solid var(--ot-bg-2-border);
 	height: 100%;
 }
 
@@ -49,7 +54,8 @@
 	align-items: center;
 	height: 100%;
 	gap: 6px;
-	padding: 0 var(--ot-spacing-s);
+	padding: 0 var(--ot-spacing-m);
+	border-right: 1px solid var(--ot-bg-2-border);
 	text-decoration: none;
 	white-space: nowrap;
 	transition: color 0.2s ease, background 0.2s ease;
@@ -75,7 +81,7 @@
 {
 	display: flex;
 	align-items: center;
-	gap: var(--ot-spacing-s);
 	margin-left: auto;
+	border-left: 1px solid var(--ot-bg-2-border);
 	height: 100%;
 }

package/lib/items/elements/navigation/navbar/navbar.js

@@ -47,13 +47,14 @@ onetype.AddonReady('elements', (elements) =>
 			return `
 				<nav class="holder">
 					<a class="logo" href="/">
-						<img class="logo-icon" src="https://global.divhunt.com/bd8ffd2fc9cf3a7e81b3326ac63a7cfe_4406.svg" alt="OneType" />
+						<img class="logo-icon" src="https://cdn.onetype.ai/brand/logo/full-orange.svg" alt="OneType" />
+						<i class="logo-arrow">keyboard_arrow_down</i>
 					</a>
 					<div class="tabs">
-						<a ot-for="item in left" :class="'tab' + (item.active ? ' active' : '')" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
+						<a ot-for="item in left" :class="'tab' + (item.active ? ' active' : '')" :href="item.href" :target="item.target || null"><i>{{ item.icon }}</i> {{ item.label }}</a>
 					</div>
 					<div class="right">
-						<a ot-for="item in right" :class="'tab' + (item.active ? ' active' : '')" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
+						<a ot-for="item in right" :class="'tab' + (item.active ? ' active' : '')" :href="item.href" :target="item.target || null"><i>{{ item.icon }}</i> {{ item.label }}</a>
 					</div>
 				</nav>
 			`;

package/lib/items/elements/navigation/sidebar/sidebar.css

@@ -3,7 +3,7 @@
 	display: flex;
 	width: 240px;
 	flex-shrink: 0;
-	height: calc(100vh - 48px);
+	height: 100%;
 }
 
 .e-210c16c7 > .holder

package/lib/items/elements/navigation/tabs/tabs.js

@@ -15,13 +15,26 @@ onetype.AddonReady('elements', (elements) =>
 			items: {
 				type: 'array',
 				value: []
+			},
+			_change: {
+				type: 'function'
 			}
 		},
 		render: function()
 		{
+			this.select = (id) =>
+			{
+				this.active = id;
+
+				if(this._change)
+				{
+					this._change(id);
+				}
+			};
+
 			return `
 				<div class="holder">
-					<a ot-for="item in items" :class="'tab' + (active === item.id ? ' active' : '')" :href="item.href">
+					<a ot-for="item in items" :class="'tab' + (active === item.id ? ' active' : '')" :href="item.href || 'javascript:void(0)'" ot-click="select(item.id)">
 						<i ot-if="item.icon">{{ item.icon }}</i>
 						<span>{{ item.label }}</span>
 					</a>

package/lib/items/elements/status/empty/empty.css

@@ -1,7 +1,7 @@
 .e-631be738
 {
 	width: 100%;
-	min-height: calc(100vh - 48px);
+	min-height: 320px;
 	display: flex;
 	align-items: center;
 	justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onetype/framework",
-    "version": "2.0.30",
+    "version": "2.0.32",
     "description": "OneType Framework — Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
     "type": "module",
     "main": "lib/load.js",