@onetype/framework 2.0.42 → 2.0.44

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.');
+	}
+});

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

@@ -0,0 +1,56 @@
+import commands from '@onetype/framework/commands';
+import images from '#cloudflare-images/addon.js';
+
+commands.Item({
+	id: 'cloudflare:images:get',
+	exposed: true,
+	method: 'GET',
+	endpoint: '/api/images/:id',
+	in: {
+		id: ['string', null, true]
+	},
+	out: {
+		image: {
+			type: 'object',
+			config: {
+				id: ['string'],
+				team_id: ['string'],
+				site_id: ['string'],
+				cloudflare_id: ['string'],
+				filename: ['string'],
+				url: ['string'],
+				variants: ['object'],
+				alt: ['string'],
+				size: ['number'],
+				type: ['string'],
+				width: ['number'],
+				height: ['number'],
+				updated_at: ['string'],
+				created_at: ['string']
+			}
+		}
+	},
+	callback: async function(properties, resolve)
+	{
+		const user = this.http?.state?.user;
+
+		if(!user || !user.team)
+		{
+			return resolve(null, 'Not authenticated.', 401);
+		}
+
+		const item = await images.Find()
+			.filter('id', properties.id)
+			.filter('team_id', user.team.id)
+			.one();
+
+		if(!item)
+		{
+			return resolve(null, 'Image not found.', 404);
+		}
+
+		resolve({
+			image: item.Get(['id', 'team_id', 'site_id', 'cloudflare_id', 'filename', 'url', 'variants', 'alt', 'size', 'type', 'width', 'height', 'updated_at', 'created_at'])
+		});
+	}
+});

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

@@ -0,0 +1,49 @@
+import commands from '@onetype/framework/commands';
+import images from '#cloudflare-images/addon.js';
+
+commands.Item({
+	id: 'cloudflare:images:list',
+	exposed: true,
+	method: 'GET',
+	endpoint: '/api/images',
+	in: {
+		site_id: ['string', null, true],
+		page: ['number'],
+		limit: ['number']
+	},
+	out: {
+		images: ['array', null, true],
+		total: ['number']
+	},
+	callback: async function(properties, resolve)
+	{
+		const user = this.http?.state?.user;
+
+		if(!user || !user.team)
+		{
+			return resolve(null, 'Not authenticated.', 401);
+		}
+
+		const query = images.Find()
+			.filter('team_id', user.team.id)
+			.filter('site_id', properties.site_id)
+			.sort('created_at', 'desc');
+
+		if(properties.limit)
+		{
+			query.limit(properties.limit);
+		}
+
+		if(properties.page)
+		{
+			query.page(properties.page);
+		}
+
+		const result = await query.plain();
+
+		resolve({
+			images: result.items,
+			total: result.total
+		});
+	}
+});

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

@@ -0,0 +1,79 @@
+import commands from '@onetype/framework/commands';
+import images from '#cloudflare-images/addon.js';
+
+commands.Item({
+	id: 'cloudflare:images:upload',
+	exposed: true,
+	method: 'POST',
+	endpoint: '/api/images',
+	in: {
+		site_id: ['string', null, true],
+		file: ['binary', null, true],
+		filename: ['string', null, true],
+		alt: ['string']
+	},
+	out: {
+		image: {
+			type: 'object',
+			config: {
+				id: ['string'],
+				team_id: ['string'],
+				site_id: ['string'],
+				cloudflare_id: ['string'],
+				filename: ['string'],
+				url: ['string'],
+				variants: ['object'],
+				alt: ['string'],
+				size: ['number'],
+				type: ['string'],
+				width: ['number'],
+				height: ['number'],
+				updated_at: ['string'],
+				created_at: ['string']
+			}
+		}
+	},
+	callback: async function(properties, resolve)
+	{
+		const user = this.http?.state?.user;
+
+		if(!user || !user.team)
+		{
+			return resolve(null, 'Not authenticated.', 401);
+		}
+
+		const { file, filename, site_id, alt } = properties;
+		const meta = images.Fn('meta', file);
+
+		if(!meta.type)
+		{
+			return resolve(null, 'Unsupported image format.', 400);
+		}
+
+		const form = new FormData();
+
+		form.append('file', new Blob([file]), filename);
+
+		const result = await images.Fn('api', 'POST', '', form);
+
+		const item = images.Item({
+			team_id: user.team.id,
+			site_id,
+			cloudflare_id: result.id,
+			filename,
+			url: result.variants?.[0] || '',
+			variants: result.variants || [],
+			alt: alt || '',
+			size: file.length,
+			type: meta.type,
+			width: meta.width,
+			height: meta.height
+		});
+
+		await item.Create();
+
+		resolve({
+			image: item.Get(['id', 'team_id', 'site_id', 'cloudflare_id', 'filename', 'url', 'variants', 'alt', 'size', 'type', 'width', 'height', 'updated_at', 'created_at'])
+		});
+	}
+});

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

@@ -0,0 +1,21 @@
+import images from '#cloudflare-images/addon.js';
+
+/* Expose */
+import '#cloudflare-images/expose.js';
+
+/* Functions */
+import '#cloudflare-images/functions/api.js';
+import '#cloudflare-images/functions/meta.js';
+import '#cloudflare-images/functions/meta/detect.js';
+import '#cloudflare-images/functions/meta/dimensions/png.js';
+import '#cloudflare-images/functions/meta/dimensions/jpeg.js';
+import '#cloudflare-images/functions/meta/dimensions/gif.js';
+import '#cloudflare-images/functions/meta/dimensions/webp.js';
+
+/* Commands */
+import '#cloudflare-images/items/commands/upload.js';
+import '#cloudflare-images/items/commands/delete.js';
+import '#cloudflare-images/items/commands/list.js';
+import '#cloudflare-images/items/commands/get.js';
+
+export default images;

package/addons/services/cloudflare/images/front/items/elements/browse/browse.css

@@ -0,0 +1,235 @@
+/* Root */
+
+.e-15fd40b6
+{
+	display: flex;
+	width: calc(100vw - 80px);
+	height: calc(100vh - 80px);
+	max-width: 1200px;
+}
+
+/* Holder */
+
+.e-15fd40b6 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	background: var(--ot-bg-1);
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: var(--ot-radius-l);
+	overflow: hidden;
+}
+
+/* ─── Header ─── */
+
+.e-15fd40b6 .header
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px 20px;
+	border-bottom: 1px solid var(--ot-bg-2-border);
+	flex-shrink: 0;
+}
+
+.e-15fd40b6 .header > .left
+{
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.e-15fd40b6 .header > .left > .icon
+{
+	font-size: 18px;
+	color: var(--ot-text-2);
+}
+
+.e-15fd40b6 .header > .left > .title
+{
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--ot-text-1);
+}
+
+.e-15fd40b6 .header > .left > .count
+{
+	font-size: 10px;
+	font-weight: 700;
+	color: var(--ot-text-3);
+	padding: 2px 6px;
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: 100px;
+}
+
+.e-15fd40b6 .header > .right
+{
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.e-15fd40b6 .header > .right > .close
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border: none;
+	background: transparent;
+	color: var(--ot-text-3);
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	transition: color 0.12s, background 0.12s;
+}
+
+.e-15fd40b6 .header > .right > .close:hover
+{
+	color: var(--ot-text-1);
+	background: var(--ot-bg-2);
+}
+
+.e-15fd40b6 .header > .right > .close > i
+{
+	font-size: 18px;
+}
+
+/* ─── Body ─── */
+
+.e-15fd40b6 .body
+{
+	flex: 1;
+	overflow-y: auto;
+	padding: 20px;
+	transition: background 0.15s;
+}
+
+.e-15fd40b6 .body.dragging
+{
+	background: var(--ot-brand-opacity);
+	outline: 2px dashed var(--ot-brand);
+	outline-offset: -8px;
+	border-radius: var(--ot-radius-m);
+}
+
+/* ─── Empty ─── */
+
+.e-15fd40b6 .empty
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+
+/* ─── Grid ─── */
+
+.e-15fd40b6 .grid
+{
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+	gap: 12px;
+}
+
+/* ─── Card ─── */
+
+.e-15fd40b6 .card
+{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--ot-radius-m);
+	background: var(--ot-bg-2);
+	border: 1px solid transparent;
+	cursor: pointer;
+	overflow: hidden;
+	transition: border-color 0.15s;
+}
+
+.e-15fd40b6 .card:hover
+{
+	border-color: var(--ot-bg-2-border);
+}
+
+/* ─── Preview ─── */
+
+.e-15fd40b6 .preview
+{
+	width: 100%;
+	aspect-ratio: 4 / 3;
+	overflow: hidden;
+	background: var(--ot-bg-3);
+}
+
+.e-15fd40b6 .preview > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* ─── Info ─── */
+
+.e-15fd40b6 .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding: 8px 10px;
+}
+
+.e-15fd40b6 .name
+{
+	font-size: 11px;
+	font-weight: 600;
+	color: var(--ot-text-1);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-15fd40b6 .meta
+{
+	font-size: 10px;
+	color: var(--ot-text-3);
+}
+
+/* ─── Delete ─── */
+
+.e-15fd40b6 .delete
+{
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: var(--ot-bg-1);
+	color: var(--ot-text-3);
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	opacity: 0;
+	transition: color 0.12s, background 0.12s, opacity 0.12s;
+}
+
+.e-15fd40b6 .card:hover .delete
+{
+	opacity: 1;
+}
+
+.e-15fd40b6 .delete:hover
+{
+	color: var(--ot-red);
+	background: var(--ot-red-opacity);
+}
+
+.e-15fd40b6 .delete > i
+{
+	font-size: 15px;
+}