@onetype/framework 2.0.41 → 2.0.43

package/addons/render/pages/front/item/catch/add.js

@@ -1,24 +1,26 @@
 pages.ItemOn('add', (item) =>
 {
-	const map = item.Get('areas');
+	const areas = item.Get('areas');
 
-	if(map)
+	if(areas)
 	{
-		Object.keys(map).forEach(name =>
+		for(const [name, value] of Object.entries(areas))
 		{
-			const id = map[name];
-
-			if(typeof id === 'function')
+			if(typeof value === 'function')
 			{
-				pages.RenderAdd(item.Get('id') + ':' + name, function(parameters)
+				pages.RenderAdd(item.Get('id') + ':' + name, function(context)
 				{
+					const parameters = context?.parameters || {};
+					const data = context?.data || {};
+
 					this.Define({
-						parameters: ['object', {}]
+						parameters: ['object', {}],
+						data: ['object', {}],
 					});
 
-					return id.call(this, parameters);
+					return value.call(this, {parameters, data});
 				});
 			}
-		});
+		}
 	}
 });

package/addons/render/pages/front/item/catch/remove.js

@@ -1,17 +1,15 @@
 pages.ItemOn('removed', (item) =>
 {
-	const map = item.Get('layouts');
+	const areas = item.Get('areas');
 
-	if(map)
+	if(areas)
 	{
-		Object.keys(map).forEach(name =>
+		for(const [name, value] of Object.entries(areas))
 		{
-			const id = map[name];
-
-			if(typeof id === 'function')
+			if(typeof value === 'function')
 			{
 				pages.RenderRemove(item.Get('id') + ':' + name);
 			}
-		});
+		}
 	}
 });

package/addons/render/pages/front/item/functions/enter.js

@@ -1,38 +1,26 @@
-pages.Fn('item.enter', async function(item, parameters = {}, preloaded = null)
+pages.Fn('item.enter', async function(item, parameters = {}, data = null)
 {
-	const onEnter = item.Get('onEnter');
-	const onBeforeEnter = item.Get('onBeforeEnter');
-
-	const data = {};
-
-	if(preloaded)
-	{
-		Object.assign(data, preloaded);
-	}
-	else if(item.Get('data'))
-	{
-		Object.assign(data, await item.Get('data').call(item, parameters));
-	}
-
-	if(onBeforeEnter && onBeforeEnter.call(item, parameters, data) === false)
+	if(item.Get('onBeforeEnter') && item.Get('onBeforeEnter').call(item, parameters, data) === false)
 	{
 		return false;
 	}
 
 	pages.StoreSet('active', item);
 
+	onetype.StateSet('page', { 
+		id: item.Get('id'), 
+		route: item.Get('route'), 
+		meta: item.Get('meta'),
+		parameters,
+		data, 
+		'404': item.Get('404') 
+	});
+
 	const title = item.Get('title');
 
 	if(title)
 	{
-		if(typeof title === 'function')
-		{
-			document.title = title.call(item, parameters, data);
-		}
-		else
-		{
-			document.title = title;
-		}
+		document.title = typeof title === 'function' ? title.call(item, parameters, data) : title;
 	}
 
 	const element = item.Fn('render', parameters, data);
@@ -40,10 +28,9 @@ pages.Fn('item.enter', async function(item, parameters = {}, preloaded = null)
 
 	document.body.appendChild(element);
 
-	if(onEnter)
-	{
-		onEnter.call(item, parameters, data);
-	}
+	item.Get('onEnter') && item.Get('onEnter').call(item, parameters, data);
+
+	onetype.Emit('@pages.enter', { page: item, parameters, data });
 
 	return true;
 });

package/addons/render/pages/front/item/functions/leave.js

@@ -1,19 +1,17 @@
 pages.Fn('item.leave', function(item)
 {
-	const onLeave = item.Get('onLeave');
-	const onBeforeLeave = item.Get('onBeforeLeave');
-
-	if(onBeforeLeave && onBeforeLeave.call(item) === false)
+	if(item.Get('onBeforeLeave') && item.Get('onBeforeLeave').call(item) === false)
 	{
 		return false;
 	}
 
 	pages.StoreSet('active', null);
 
-	if(onLeave)
-	{
-		onLeave.call(item);
-	}
+	onetype.StateSet('page', null);
+
+	item.Get('onLeave') && item.Get('onLeave').call(item);
+
+	onetype.Emit('@pages.leave', { page: item });
 
 	const element = item.Get('element');
 

package/addons/render/pages/front/items/commands/change.js

@@ -0,0 +1,60 @@
+onetype.AddonReady('commands', (commands) =>
+{
+	commands.Item({
+		id: 'pages:change',
+		method: 'POST',
+		endpoint: '/api/pages/change',
+		exposed: true,
+		description: 'Navigate to an application page by ID or path',
+		in: {
+			id: {
+				type: 'string',
+				description: 'Page ID to navigate to'
+			},
+			path: {
+				type: 'string',
+				description: 'URL path to navigate to'
+			},
+			parameters: {
+				type: 'object',
+				value: {},
+				description: 'Route parameters'
+			},
+			push: {
+				type: 'boolean',
+				value: true,
+				description: 'Push to browser history'
+			}
+		},
+		out: {
+			page: {
+				type: 'object',
+				config: {
+					id: ['string'],
+					route: ['string|array'],
+					meta: ['object'],
+					'404': ['boolean']
+				}
+			}
+		},
+		callback: async function(properties, resolve)
+		{
+			if(!properties.id && !properties.path)
+			{
+				resolve({ page: null });
+				return;
+			}
+
+			const page = await pages.Fn('change', properties.id, properties.path, properties.parameters, properties.push);
+
+			resolve({
+				page: page ? {
+					id: page.Get('id'),
+					route: page.Get('route'),
+					meta: page.Get('meta'),
+					'404': page.Get('404')
+				} : null
+			});
+		}
+	});
+});

package/addons/render/pages/front/items/commands/list.js

@@ -0,0 +1,38 @@
+onetype.AddonReady('commands', (commands) =>
+{
+	commands.Item({
+		id: 'pages:list',
+		method: 'GET',
+		endpoint: '/api/pages/list',
+		exposed: true,
+		description: 'List all application pages with their routes and metadata',
+		out: {
+			pages: {
+				type: 'array',
+				each: {
+					type: 'object',
+					config: {
+						id: ['string'],
+						route: ['string|array'],
+						meta: ['object'],
+						'404': ['boolean']
+					}
+				}
+			}
+		},
+		callback: function(properties, resolve)
+		{
+			const items = Object.values(pages.Items());
+
+			resolve({
+				pages: items.map(item =>
+				({
+					id: item.Get('id'),
+					route: item.Get('route'),
+					meta: item.Get('meta'),
+					'404': item.Get('404')
+				}))
+			});
+		}
+	});
+});

package/addons/render/pages/front/items/directives/change.js

@@ -25,7 +25,7 @@ onetype.AddonReady('directives', function()
 
 			const change = () =>
 			{
-				pages.Fn('change', route, parameters, { path: true, push });
+				pages.Fn('change', null, route, parameters, push);
 			};
 
 			if(timeout > 0)

package/addons/render/transforms/css/transforms.css

@@ -0,0 +1,4 @@
+[ot]
+{
+	opacity: 0;
+}

package/addons/render/transforms/{addon.js → js/addon.js}

@@ -7,7 +7,14 @@ const transforms = onetype.Addon('transforms', (addon) =>
     addon.Field('js', ['array', []]);
     addon.Field('css', ['array', []]);
     addon.Field('config', ['object', {}]);
+    addon.Field('metadata', ['object', {}]);
+    addon.Field('tags', ['array', []]);
     addon.Field('code', ['function']);
     addon.Field('destroy', ['function', null]);
+    addon.Field('visible', ['function', null]);
+    addon.Field('resize', ['function', null]);
+    addon.Field('scroll', ['function', null]);
+    addon.Field('hover', ['function', null]);
+    addon.Field('click', ['function', null]);
     addon.Field('structure', ['function', null]);
 });

package/addons/render/transforms/js/item/functions/run.js

@@ -0,0 +1,87 @@
+transforms.Fn('item.run', function(item, node, data = null)
+{
+	if(data === null)
+	{
+		data = transforms.Fn('data', item.Get('config'), node);
+	}
+
+	item.Fn('load').then(() =>
+	{
+		const context = {
+			scroll: { progress: 0, direction: 'down', speed: 0, top: 0, bottom: 0, visible: false },
+			hover: { active: false, x: 0, y: 0, offset: 0 },
+			click: { x: 0, y: 0 }
+		};
+
+		item.Get('code').call(context, data, node, item);
+
+		if(item.Get('visible'))
+		{
+			onetype.ObserverVisible(node, () =>
+			{
+				item.Get('visible').call(context, data, node, item);
+			});
+		}
+
+		if(item.Get('resize'))
+		{
+			onetype.ObserverResize(node, () =>
+			{
+				item.Get('resize').call(context, data, node, item);
+			});
+		}
+
+		if(item.Get('scroll'))
+		{
+			onetype.ObserverScroll(node, (scroll) =>
+			{
+				context.scroll = scroll;
+				item.Get('scroll').call(context, data, node, item);
+			});
+		}
+
+		if(item.Get('hover'))
+		{
+			onetype.ObserverHover(node, (hover) =>
+			{
+				context.hover = hover;
+				item.Get('hover').call(context, data, node, item);
+			}, context.hover.offset);
+		}
+
+		if(item.Get('click'))
+		{
+			onetype.ObserverClick(node, (click) =>
+			{
+				context.click = click;
+				item.Get('click').call(context, data, node, item);
+			});
+		}
+
+		const listener = onetype.EmitOn('@dom.remove', (removed) =>
+		{
+			if(removed !== node && document.contains(node))
+			{
+				return;
+			}
+
+			onetype.EmitOff('@dom.remove', listener);
+			onetype.ObserverUnvisible(node);
+			onetype.ObserverUnresize(node);
+			onetype.ObserverUnscroll(node);
+			onetype.ObserverUnhover(node);
+			onetype.ObserverUnclick(node);
+
+			if(item.Get('destroy'))
+			{
+				item.Get('destroy').call(context, data, node, item);
+			}
+		});
+
+		requestAnimationFrame(() =>
+		{
+			node.removeAttribute('ot');
+			node.removeAttribute('ot-init');
+		});
+	});
+});

package/addons/services/cloudflare/images/back/addon.js

@@ -0,0 +1,23 @@
+import onetype from '#framework/load.js';
+
+const images = onetype.Addon('cloudflare.images', (addon) =>
+{
+	addon.Table('cloudflare_images');
+
+	addon.Field('id', ['string']);
+	addon.Field('team_id', ['string', null, true]);
+	addon.Field('site_id', ['string', null, true]);
+	addon.Field('cloudflare_id', ['string', null, true]);
+	addon.Field('filename', ['string', null, true]);
+	addon.Field('url', ['string']);
+	addon.Field('variants', ['object', {}]);
+	addon.Field('alt', ['string']);
+	addon.Field('size', ['number']);
+	addon.Field('type', ['string']);
+	addon.Field('width', ['number']);
+	addon.Field('height', ['number']);
+	addon.Field('updated_at', ['string']);
+	addon.Field('created_at', ['string']);
+});
+
+export default images;

package/addons/services/cloudflare/images/back/expose.js

@@ -0,0 +1,22 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Expose({
+	filter: ['team_id', 'site_id', 'type'],
+	sort: ['filename', 'created_at'],
+	select: [
+		'id', 'team_id', 'site_id', 'cloudflare_id', 'filename', 'url', 'variants', 'alt', 'size', 'type', 'width', 'height', 'updated_at', 'created_at'
+	],
+	callback: function(query)
+	{
+		const user = this.http.state.user;
+
+		if(user)
+		{
+			query.filter('team_id', user.team.id);
+		}
+		else
+		{
+			query.filter('id', null, 'NULL');
+		}
+	}
+});

package/addons/services/cloudflare/images/back/functions/api.js

@@ -0,0 +1,47 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Fn('api', async function(method, path, body, headers = {})
+{
+	const url = process.env.CLOUDFLARE_API_URL;
+	const account = process.env.CLOUDFLARE_ACCOUNT_ID;
+	const token = process.env.CLOUDFLARE_API_TOKEN;
+
+	if(!url || !account || !token)
+	{
+		throw new Error('Cloudflare credentials not configured.');
+	}
+
+	const endpoint = `${url}/${account}/images/v1${path}`;
+
+	const options = {
+		method,
+		headers: {
+			'Authorization': 'Bearer ' + token,
+			...headers
+		}
+	};
+
+	if(body)
+	{
+		if(body instanceof FormData)
+		{
+			options.body = body;
+		}
+		else
+		{
+			options.headers['Content-Type'] = 'application/json';
+			options.body = JSON.stringify(body);
+		}
+	}
+
+	const response = await fetch(endpoint, options);
+	const result = await response.json();
+
+	if(!result.success)
+	{
+		const message = result.errors?.[0]?.message || 'Cloudflare API error.';
+		throw new Error(message);
+	}
+
+	return result.result;
+});

package/addons/services/cloudflare/images/back/functions/meta/detect.js

@@ -0,0 +1,28 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Fn('meta.detect', function(buffer)
+{
+	const bytes = new Uint8Array(buffer);
+
+	if(bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47)
+	{
+		return 'image/png';
+	}
+
+	if(bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF)
+	{
+		return 'image/jpeg';
+	}
+
+	if(bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38)
+	{
+		return 'image/gif';
+	}
+
+	if(bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46 && bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50)
+	{
+		return 'image/webp';
+	}
+
+	return null;
+});

package/addons/services/cloudflare/images/back/functions/meta/dimensions/gif.js

@@ -0,0 +1,11 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Fn('meta.dimensions.gif', function(buffer)
+{
+	const view = new DataView(buffer.buffer || buffer);
+
+	return {
+		width: view.getUint16(6, true),
+		height: view.getUint16(8, true)
+	};
+});

package/addons/services/cloudflare/images/back/functions/meta/dimensions/jpeg.js

@@ -0,0 +1,31 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Fn('meta.dimensions.jpeg', function(buffer)
+{
+	const bytes = new Uint8Array(buffer);
+	let offset = 2;
+
+	while(offset < bytes.length)
+	{
+		if(bytes[offset] !== 0xFF)
+		{
+			break;
+		}
+
+		const marker = bytes[offset + 1];
+
+		if(marker >= 0xC0 && marker <= 0xCF && marker !== 0xC4 && marker !== 0xC8 && marker !== 0xCC)
+		{
+			return {
+				width: (bytes[offset + 7] << 8) | bytes[offset + 8],
+				height: (bytes[offset + 5] << 8) | bytes[offset + 6]
+			};
+		}
+
+		const length = (bytes[offset + 2] << 8) | bytes[offset + 3];
+
+		offset += 2 + length;
+	}
+
+	return { width: 0, height: 0 };
+});

package/addons/services/cloudflare/images/back/functions/meta/dimensions/png.js

@@ -0,0 +1,11 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Fn('meta.dimensions.png', function(buffer)
+{
+	const view = new DataView(buffer.buffer || buffer);
+
+	return {
+		width: view.getUint32(16),
+		height: view.getUint32(20)
+	};
+});

package/addons/services/cloudflare/images/back/functions/meta/dimensions/webp.js

@@ -0,0 +1,36 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Fn('meta.dimensions.webp', function(buffer)
+{
+	const bytes = new Uint8Array(buffer);
+	const view = new DataView(buffer.buffer || buffer);
+	const chunk = String.fromCharCode(bytes[12], bytes[13], bytes[14], bytes[15]);
+
+	if(chunk === 'VP8 ')
+	{
+		return {
+			width: view.getUint16(26, true) & 0x3FFF,
+			height: view.getUint16(28, true) & 0x3FFF
+		};
+	}
+
+	if(chunk === 'VP8L')
+	{
+		const bits = view.getUint32(21, true);
+
+		return {
+			width: (bits & 0x3FFF) + 1,
+			height: ((bits >> 14) & 0x3FFF) + 1
+		};
+	}
+
+	if(chunk === 'VP8X')
+	{
+		return {
+			width: (bytes[24] | (bytes[25] << 8) | (bytes[26] << 16)) + 1,
+			height: (bytes[27] | (bytes[28] << 8) | (bytes[29] << 16)) + 1
+		};
+	}
+
+	return { width: 0, height: 0 };
+});

package/addons/services/cloudflare/images/back/functions/meta.js

@@ -0,0 +1,16 @@
+import images from '#cloudflare-images/addon.js';
+
+images.Fn('meta', function(buffer)
+{
+	const type = this.Fn('meta.detect', buffer);
+
+	if(!type)
+	{
+		return { type: null, width: 0, height: 0 };
+	}
+
+	const format = type.split('/')[1];
+	const dimensions = this.Fn('meta.dimensions.' + format, buffer);
+
+	return { type, width: dimensions.width, height: dimensions.height };
+});

package/addons/services/cloudflare/images/back/items/commands/delete.js

@@ -0,0 +1,38 @@
+import commands from '@onetype/framework/commands';
+import images from '#cloudflare-images/addon.js';
+
+commands.Item({
+	id: 'cloudflare:images:delete',
+	exposed: true,
+	method: 'DELETE',
+	endpoint: '/api/images',
+	in: {
+		id: ['string', null, true]
+	},
+	callback: async function(properties, resolve)
+	{
+		const user = this.http?.state?.user;
+
+		if(!user || !user.team)
+		{
+			return resolve(null, 'Not authenticated.', 401);
+		}
+
+		const item = images.Item(properties.id);
+
+		if(!item)
+		{
+			return resolve(null, 'Image not found.', 404);
+		}
+
+		if(item.Get('team_id') !== user.team.id)
+		{
+			return resolve(null, 'Not authorized.', 403);
+		}
+
+		await images.Fn('api', 'DELETE', '/' + item.Get('cloudflare_id'));
+		await item.Delete();
+
+		resolve(null, 'Image deleted.');
+	}
+});