@flowdular/sdk 0.1.0

package/packages/server/src/security-headers.ts

@@ -0,0 +1,130 @@
+import type { Middleware } from '@octanejs/app-core';
+
+export interface SecurityHeadersOptions {
+	/** Only meaningful behind TLS; pairs with secure session cookies. */
+	readonly strictTransportSecurity: boolean;
+	readonly contentSecurityPolicy: string | null;
+	/** Sends the policy as Content-Security-Policy-Report-Only. */
+	readonly reportOnly: boolean;
+	/** HTML marker replaced with the request CSP nonce, when the response is HTML. */
+	readonly noncePlaceholder?: string;
+}
+
+export const CSP_NONCE_PLACEHOLDER = '__FLOWDULAR_CSP_NONCE__';
+
+function cspNonce(): string {
+	const bytes = crypto.getRandomValues(new Uint8Array(16));
+	let value = '';
+	for (const byte of bytes) value += String.fromCharCode(byte);
+	return btoa(value)
+		.replaceAll('+', '-')
+		.replaceAll('/', '_')
+		.replaceAll('=', '');
+}
+
+const SHARED_DIRECTIVES = [
+	"default-src 'self'",
+	"base-uri 'self'",
+	"form-action 'self'",
+	"frame-ancestors 'none'",
+	"object-src 'none'",
+	"style-src 'self' 'unsafe-inline'",
+	"font-src 'self' data:",
+];
+
+/* The Vite dev server injects inline module scripts, evaluates transformed
+   sources, and keeps an HMR WebSocket open. */
+export const DEVELOPMENT_CONTENT_SECURITY_POLICY = [
+	...SHARED_DIRECTIVES,
+	"script-src 'self' 'unsafe-inline' 'unsafe-eval'",
+	"img-src 'self' data: blob:",
+	"connect-src 'self' ws: wss:",
+].join('; ');
+
+export const PRODUCTION_CONTENT_SECURITY_POLICY = [
+	...SHARED_DIRECTIVES,
+	`script-src 'self' 'nonce-${CSP_NONCE_PLACEHOLDER}'`,
+	"img-src 'self' data:",
+	"connect-src 'self'",
+].join('; ');
+
+export function securityHeaders(
+	options: SecurityHeadersOptions,
+): Readonly<Record<string, string>> {
+	const headers: Record<string, string> = {
+		'x-content-type-options': 'nosniff',
+		'referrer-policy': 'strict-origin-when-cross-origin',
+		'x-frame-options': 'DENY',
+		'permissions-policy':
+			'camera=(), microphone=(), geolocation=(), payment=(), usb=()',
+	};
+	if (options.strictTransportSecurity) {
+		headers['strict-transport-security'] =
+			'max-age=31536000; includeSubDomains';
+	}
+	if (options.contentSecurityPolicy) {
+		headers[
+			options.reportOnly
+				? 'content-security-policy-report-only'
+				: 'content-security-policy'
+		] = options.contentSecurityPolicy;
+	}
+	return headers;
+}
+
+function withHeaders(
+	response: Response,
+	headers: readonly (readonly [string, string])[],
+): Response {
+	const target = (() => {
+		try {
+			response.headers.set('x-flowdular-probe', '1');
+			response.headers.delete('x-flowdular-probe');
+			return response;
+		} catch {
+			// Redirect and error responses carry immutable headers.
+			return new Response(response.body, response);
+		}
+	})();
+	for (const [name, value] of headers) {
+		if (!target.headers.has(name)) target.headers.set(name, value);
+	}
+	return target;
+}
+
+/* A route that sets its own header wins; the middleware only fills gaps. */
+export function createSecurityHeadersMiddleware(
+	options: SecurityHeadersOptions,
+): Middleware {
+	return async (_context, next) => {
+		const nonce = cspNonce();
+		const placeholder = options.noncePlaceholder ?? CSP_NONCE_PLACEHOLDER;
+		const policy =
+			options.contentSecurityPolicy?.replaceAll(placeholder, nonce) ?? null;
+		let response = await next();
+		/* The placeholder only exists in the platform shell. Avoid reading API or
+		   streamed responses, and preserve their body untouched. */
+		if (
+			policy !== null &&
+			response.headers.get('content-type')?.includes('text/html') &&
+			response.body !== null
+		) {
+			const html = await response.text();
+			const transformedHeaders = new Headers(response.headers);
+			/* The nonce changes the representation bytes. Any upstream length or
+			   validator describes the placeholder document and must not survive. */
+			transformedHeaders.delete('content-length');
+			transformedHeaders.delete('etag');
+			transformedHeaders.delete('content-md5');
+			response = new Response(html.replaceAll(placeholder, nonce), {
+				status: response.status,
+				statusText: response.statusText,
+				headers: transformedHeaders,
+			});
+		}
+		const headers = Object.entries(
+			securityHeaders({ ...options, contentSecurityPolicy: policy }),
+		);
+		return withHeaders(response, headers);
+	};
+}

package/packages/server/src/web-html.ts

@@ -0,0 +1,55 @@
+/** Insert only the module's explicit JSON DTO. Never serialize Context.state. */
+export function webHtmlResponse(
+	response: Response,
+	url: string,
+	data: unknown,
+	nonce?: string,
+): Response {
+	if (
+		!response.body ||
+		!response.headers.get('content-type')?.includes('text/html')
+	)
+		return response;
+	const json = JSON.stringify({ url, data })
+		.replace(/</g, '\\u003c')
+		.replace(/\u2028/g, '\\u2028')
+		.replace(/\u2029/g, '\\u2029');
+	const attribute =
+		nonce && /^[a-zA-Z0-9+/=_-]+$/.test(nonce) ? ` nonce="${nonce}"` : '';
+	const insert = `<script id="flowdular-web-data" type="application/json"${attribute}>${json}</script><style${attribute}>.flowdular-splash{display:none!important}html,body,#root{background:initial}</style>`;
+	let buffer = '';
+	let inserted = false;
+	const decoder = new TextDecoder();
+	const encoder = new TextEncoder();
+	const transform = new TransformStream<Uint8Array, Uint8Array>({
+		transform(chunk, controller) {
+			if (inserted) {
+				controller.enqueue(
+					encoder.encode(decoder.decode(chunk, { stream: true })),
+				);
+				return;
+			}
+			buffer += decoder.decode(chunk, { stream: true });
+			const end = buffer.indexOf('</head>');
+			if (end !== -1) {
+				controller.enqueue(
+					encoder.encode(buffer.slice(0, end) + insert + buffer.slice(end)),
+				);
+				buffer = '';
+				inserted = true;
+			} else if (buffer.length > 262144)
+				throw new Error('Web page head exceeds the supported bound.');
+		},
+		flush(controller) {
+			controller.enqueue(encoder.encode(buffer + decoder.decode()));
+		},
+	});
+	const headers = new Headers(response.headers);
+	headers.delete('content-length');
+	headers.delete('etag');
+	return new Response(response.body.pipeThrough(transform), {
+		status: response.status,
+		statusText: response.statusText,
+		headers,
+	});
+}

package/packages/server/src/web.ts

@@ -0,0 +1,361 @@
+import {
+	RenderRoute,
+	ServerRoute,
+	type Context,
+	type Middleware,
+	type Route,
+} from '@octanejs/app-core';
+import { webHtmlResponse } from './web-html.ts';
+
+import type {
+	WebMount,
+	WebIdentity,
+	WebPage,
+	WebPageContext,
+	ModuleWebSurface,
+	WebModuleComposition,
+} from '@flowdular/sdk/contracts';
+export type {
+	WebMount,
+	WebIdentity,
+	WebAccess,
+	WebJson,
+	WebPage,
+	WebPageContext,
+	ModuleWebSurface,
+	WebModuleComposition,
+} from '@flowdular/sdk/contracts';
+
+const DATA_STATE = 'flowdular.web.data';
+const DATA_ACCEPT = 'application/vnd.flowdular.page+json';
+const RESERVED = new Set([
+	'app',
+	'api',
+	'auth',
+	'sign-in',
+	'sign-up',
+	'forgot-password',
+	'reset-password',
+	'accept-invitation',
+]);
+const ID = /^[a-z][a-z0-9-]*$/;
+const MODULE_ID = /^[a-z][a-z0-9-]*(\.[a-z][a-z0-9-]*)+$/;
+
+function invalid(message: string): never {
+	throw new Error(`Invalid web configuration: ${message}`);
+}
+
+export function validateWebMounts(input: unknown): readonly WebMount[] {
+	if (!Array.isArray(input) || input.length > 256)
+		invalid('mounts must be an array of at most 256 entries.');
+	const ids = new Set<string>();
+	const paths: string[] = [];
+	return Object.freeze(
+		input.map((value: WebMount) => {
+			if (
+				!value ||
+				typeof value.id !== 'string' ||
+				typeof value.moduleId !== 'string' ||
+				typeof value.surfaceId !== 'string' ||
+				!ID.test(value.id) ||
+				!MODULE_ID.test(value.moduleId) ||
+				!ID.test(value.surfaceId) ||
+				typeof value.tenantId !== 'string' ||
+				!value.tenantId.trim() ||
+				value.tenantId !== value.tenantId.trim() ||
+				value.tenantId.length > 128 ||
+				/[\u0000-\u001f]/.test(value.tenantId) ||
+				typeof value.path !== 'string' ||
+				value.path.length > 256 ||
+				!/^\/[a-z0-9-]+(?:\/[a-z0-9-]+)*$/.test(value.path) ||
+				RESERVED.has(value.path.split('/')[1]!) ||
+				(value.enabled !== undefined && typeof value.enabled !== 'boolean')
+			)
+				invalid('invalid mount.');
+			if (ids.has(value.id)) invalid(`duplicate mount id ${value.id}.`);
+			ids.add(value.id);
+			if (
+				paths.some(
+					(path) =>
+						path === value.path ||
+						path.startsWith(value.path + '/') ||
+						value.path.startsWith(path + '/'),
+				)
+			)
+				invalid(`overlapping mount ${value.path}.`);
+			paths.push(value.path);
+			return Object.freeze({
+				id: value.id,
+				moduleId: value.moduleId,
+				surfaceId: value.surfaceId,
+				tenantId: value.tenantId,
+				path: value.path,
+				enabled: value.enabled !== false,
+			});
+		}),
+	);
+}
+
+function pageShape(path: string): string {
+	return path
+		.split('/')
+		.map((part) =>
+			part.startsWith(':') ? ':' : part.startsWith('*') ? '*' : part,
+		)
+		.join('/');
+}
+
+/** Detect equivalent patterns independently of parameter names and module order. */
+export function assertRouteConflicts(routes: readonly Route[]): void {
+	const seen = new Map<string, Set<string>>();
+	for (const route of routes) {
+		const shape = pageShape(route.path);
+		// Render routes match every method before their access guard runs.
+		const methods =
+			route.type === 'server'
+				? route.methods
+				: ['GET', 'HEAD', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'];
+		const used = seen.get(shape) ?? new Set<string>();
+		for (const method of methods) {
+			if (used.has(method.toUpperCase()))
+				invalid(`duplicate route ${method} ${route.path}.`);
+			used.add(method.toUpperCase());
+		}
+		seen.set(shape, used);
+	}
+}
+
+export function defineWebSurface(surface: ModuleWebSurface): ModuleWebSurface {
+	if (
+		!surface ||
+		typeof surface.id !== 'string' ||
+		!ID.test(surface.id) ||
+		!Array.isArray(surface.pages) ||
+		!surface.pages.length ||
+		surface.pages.length > 128
+	)
+		invalid('invalid surface.');
+	const ids = new Set<string>();
+	const patterns = new Set<string>();
+	const paths: string[] = [];
+	for (const page of surface.pages) {
+		if (
+			!page ||
+			typeof page.id !== 'string' ||
+			!ID.test(page.id) ||
+			typeof page.path !== 'string' ||
+			page.path.length > 256 ||
+			!/^(?:\/|(?:\/(?:[a-z0-9-]+|:[a-z][a-zA-Z0-9]*))+)$/.test(page.path) ||
+			!Array.isArray(page.entry) ||
+			page.entry.length !== 2 ||
+			!/^[A-Za-z_$][\w$]*$/.test(page.entry[0]) ||
+			!safeEntry(page.entry[1]) ||
+			(page.layout !== undefined && !safeEntry(page.layout)) ||
+			typeof page.load !== 'function' ||
+			!page.access ||
+			!['public', 'authenticated', 'permission'].includes(page.access.kind) ||
+			(page.access.kind === 'permission' && !page.access.permission?.trim())
+		)
+			invalid(`invalid page in ${surface.id}.`);
+		const names = page.path
+			.split('/')
+			.filter((part: string) => part.startsWith(':'));
+		if (
+			new Set(names).size !== names.length ||
+			ids.has(page.id) ||
+			patterns.has(pageShape(page.path))
+		)
+			invalid(`duplicate page or pattern in ${surface.id}.`);
+		ids.add(page.id);
+		patterns.add(pageShape(page.path));
+		const parts: string[] = page.path.split('/');
+		for (const previous of paths) {
+			const other = previous.split('/');
+			if (
+				parts.length === other.length &&
+				parts.filter((part) => part.startsWith(':')).length ===
+					other.filter((part) => part.startsWith(':')).length &&
+				parts.every(
+					(part, i) =>
+						part === other[i] ||
+						part.startsWith(':') ||
+						other[i]!.startsWith(':'),
+				)
+			)
+				invalid(`ambiguous page patterns in ${surface.id}.`);
+		}
+		paths.push(page.path);
+	}
+	return Object.freeze({
+		id: surface.id,
+		pages: Object.freeze(
+			surface.pages.map((page) =>
+				Object.freeze({
+					...page,
+					entry: Object.freeze([...page.entry]) as unknown as WebPage['entry'],
+					access: Object.freeze({ ...page.access }),
+				}),
+			),
+		),
+	});
+}
+
+function safeEntry(value: unknown): value is string {
+	return (
+		typeof value === 'string' &&
+		/^(?:@[a-z0-9-]+\/)?[a-z0-9-]+\/[a-zA-Z0-9_./-]+$/.test(value) &&
+		!value.split('/').includes('..') &&
+		!value.includes('//')
+	);
+}
+
+function failure(status: number): Response {
+	return new Response(
+		status === 404
+			? 'Not found'
+			: status === 401
+				? 'Authentication required'
+				: status === 403
+					? 'Forbidden'
+					: 'Request failed',
+		{ status, headers: { 'cache-control': 'no-store' } },
+	);
+}
+
+export function createModuleWebRoutes(options: {
+	readonly modules: readonly WebModuleComposition[];
+	readonly mounts: readonly WebMount[];
+	readonly resolveIdentity: (
+		context: Context,
+	) => WebIdentity | null | Promise<WebIdentity | null>;
+}): readonly Route[] {
+	const mounts = validateWebMounts(options.mounts);
+	const surfaces = new Map<string, ModuleWebSurface>();
+	for (const module of options.modules) {
+		for (const surface of module.web ?? []) {
+			if (!module.moduleId || !MODULE_ID.test(module.moduleId))
+				invalid('surface has no generated module owner.');
+			const validated = defineWebSurface(surface);
+			const key = `${module.moduleId}/${surface.id}`;
+			if (surfaces.has(key)) invalid(`duplicate surface ${key}.`);
+			surfaces.set(key, validated);
+		}
+	}
+	const routes: Route[] = [];
+	for (const site of mounts) {
+		const surface = surfaces.get(`${site.moduleId}/${site.surfaceId}`);
+		// A removed or disabled module must not fall through to a workspace route.
+		if (site.enabled && surface) {
+			for (const page of surface.pages) {
+				const before: Middleware = async (context, next) => {
+					if (!['GET', 'HEAD'].includes(context.request.method))
+						return failure(405);
+					try {
+						let identity: WebIdentity | null = null;
+						if (page.access.kind !== 'public') {
+							identity = await options.resolveIdentity(context);
+							if (!identity) return failure(401);
+							if (
+								identity.tenantId !== site.tenantId ||
+								(page.access.kind === 'permission' &&
+									!identity.permissions.has(page.access.permission))
+							)
+								return failure(403);
+						}
+						const result = await page.load({
+							site,
+							identity,
+							params: Object.freeze({ ...context.params }),
+							url: new URL(context.request.url),
+							signal: context.request.signal,
+						});
+						if (result instanceof Response) {
+							result.headers.set('cache-control', 'no-store');
+							return result;
+						}
+						const json = JSON.stringify(result);
+						if (
+							json === undefined ||
+							new TextEncoder().encode(json).length > 1_048_576
+						)
+							throw new Error('Invalid page data.');
+						// Parse to strip prototypes and give SSR and the browser identical DTOs.
+						context.state.set(DATA_STATE, JSON.parse(json));
+						if (context.request.headers.get('accept') === DATA_ACCEPT)
+							return new Response(
+								context.request.method === 'HEAD' ? null : json,
+								{
+									headers: {
+										'content-type': 'application/json; charset=utf-8',
+										'cache-control': 'no-store',
+										vary: 'Accept',
+									},
+								},
+							);
+						if (context.request.method === 'HEAD')
+							return new Response(null, {
+								headers: {
+									'content-type': 'text/html; charset=utf-8',
+									'cache-control': 'no-store',
+									vary: 'Accept',
+								},
+							});
+						const response = await next();
+						response.headers.set('cache-control', 'no-store');
+						response.headers.append('vary', 'Accept');
+						return webHtmlResponse(
+							response,
+							context.url.pathname + context.url.search,
+							JSON.parse(json),
+							context.state.get('octane.nonce') as string | undefined,
+						);
+					} catch {
+						console.error(
+							`[flowdular.web] page ${site.moduleId}/${surface.id}/${page.id} failed`,
+						);
+						return failure(500);
+					}
+				};
+				routes.push(
+					new RenderRoute({
+						path: site.path + (page.path === '/' ? '' : page.path),
+						entry: page.entry,
+						...(page.layout ? { layout: page.layout } : {}),
+						before: [before],
+					}),
+				);
+			}
+		}
+		const fallback = (path: string) =>
+			new ServerRoute({
+				path,
+				methods: ['GET', 'HEAD', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
+				handler: () => failure(404),
+			});
+		if (
+			!site.enabled ||
+			!surface ||
+			!surface.pages.some((page) => page.path === '/')
+		)
+			routes.push(fallback(site.path));
+		routes.push(fallback(site.path + '/*unmatched'));
+	}
+	if (!mounts.some((site) => site.path === '/sites')) {
+		routes.push(
+			new ServerRoute({
+				path: '/sites',
+				methods: ['GET', 'HEAD'],
+				handler: () => failure(404),
+			}),
+		);
+		routes.push(
+			new ServerRoute({
+				path: '/sites/*unknownSite',
+				methods: ['GET', 'HEAD'],
+				handler: () => failure(404),
+			}),
+		);
+	}
+	assertRouteConflicts(routes);
+	return routes;
+}

package/packages/ui/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "@flowdular/ui",
+	"version": "0.1.0",
+	"type": "module",
+	"exports": {
+		".": "./src/index.ts",
+		"./styles": "./src/styles/index.css"
+	},
+	"scripts": {
+		"typecheck": "tsrx-tsc --noEmit -p tsconfig.json",
+		"test": "vitest run --passWithNoTests"
+	},
+	"dependencies": {
+		"@flowdular/contracts": "workspace:*",
+		"@fontsource-variable/ibm-plex-sans": "5.3.0",
+		"@fontsource/ibm-plex-mono": "5.2.7",
+		"@octanejs/tanstack-table": "0.1.51",
+		"chart.js": "^4.5.1",
+		"octane": "0.1.51"
+	},
+	"devDependencies": {
+		"@tsrx/typescript-plugin": "0.3.120",
+		"typescript": "5.9.3",
+		"vitest": "4.1.10"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Flowdular/flowdular.git",
+		"directory": "packages/ui"
+	},
+	"files": [
+		"src",
+		"schemas",
+		"dist",
+		"bin",
+		"public",
+		"module.json",
+		"migrations",
+		"translations",
+		"spec",
+		"README.md",
+		"LICENSE"
+	],
+	"private": true
+}

package/packages/ui/src/brand/BrandMark.tsrx

@@ -0,0 +1,66 @@
+import { MARK_VIEWBOX, MARK_WARP, MARK_WEFT } from './mark.ts';
+
+export type BrandMarkTone = 'brand' | 'current' | 'inverse';
+
+export interface BrandMarkProps {
+	/** Rendered size in px. Never below 16. */
+	size?: number;
+	/** Copper weft. Reserved for large brand moments: splash, sign-in. */
+	signature?: boolean;
+	tone?: BrandMarkTone;
+}
+
+function warpFill(tone: BrandMarkTone): string {
+	if (tone === 'current') return 'currentColor';
+	if (tone === 'inverse') return '#ffffff';
+	return 'var(--brand)';
+}
+
+function weftFill(tone: BrandMarkTone, signature: boolean): string {
+	if (tone === 'current') return 'currentColor';
+	if (!signature) return warpFill(tone);
+	return tone === 'inverse' ? 'var(--copper-300)' : 'var(--brand-weft)';
+}
+
+export function BrandMark(props: BrandMarkProps) @{
+	const size = props.size ?? 24;
+	const tone = props.tone ?? 'brand';
+	const warp = warpFill(tone);
+	const weft = weftFill(tone, props.signature ?? false);
+	<svg
+		viewBox={MARK_VIEWBOX}
+		width={size}
+		height={size}
+		aria-hidden="true"
+		style="flex:0 0 auto"
+	>
+		<g fill={warp}>
+			@for (const shape of MARK_WARP; key shape.id) {
+				@if (shape.type === 'rect') {
+					<rect
+						x={shape.x}
+						y={shape.y}
+						width={shape.width}
+						height={shape.height}
+					/>
+				} @else {
+					<circle cx={shape.cx} cy={shape.cy} r={shape.r} />
+				}
+			}
+		</g>
+		<g fill={weft}>
+			@for (const shape of MARK_WEFT; key shape.id) {
+				@if (shape.type === 'rect') {
+					<rect
+						x={shape.x}
+						y={shape.y}
+						width={shape.width}
+						height={shape.height}
+					/>
+				} @else {
+					<circle cx={shape.cx} cy={shape.cy} r={shape.r} />
+				}
+			}
+		</g>
+	</svg>
+}

package/packages/ui/src/brand/mark.ts

@@ -0,0 +1,44 @@
+/* Generated by scripts/gen-mark.mjs. Do not edit by hand.
+   Plain 2x2 weave on a 24-unit grid: thread 3.4, interlace gap 1.2,
+   spacing 8.2, overshoot 6.2, round thread ends. */
+
+export const MARK_VIEWBOX = '0 0 24 24';
+
+export type MarkShape =
+	| {
+			readonly id: string;
+			readonly type: 'rect';
+			readonly x: number;
+			readonly y: number;
+			readonly width: number;
+			readonly height: number;
+	  }
+	| {
+			readonly id: string;
+			readonly type: 'circle';
+			readonly cx: number;
+			readonly cy: number;
+			readonly r: number;
+	  };
+
+export const MARK_WARP: readonly MarkShape[] = [
+	{ id: 'w0c0', type: 'circle', cx: 7.9, cy: 3.4, r: 1.7 },
+	{ id: 'w0r0', type: 'rect', x: 6.2, y: 3.4, width: 3.4, height: 1.6 },
+	{ id: 'w0r1', type: 'rect', x: 6.2, y: 10.8, width: 3.4, height: 9.8 },
+	{ id: 'w0c1', type: 'circle', cx: 7.9, cy: 20.6, r: 1.7 },
+	{ id: 'w1c0', type: 'circle', cx: 16.1, cy: 3.4, r: 1.7 },
+	{ id: 'w1r0', type: 'rect', x: 14.4, y: 3.4, width: 3.4, height: 9.8 },
+	{ id: 'w1r1', type: 'rect', x: 14.4, y: 19, width: 3.4, height: 1.6 },
+	{ id: 'w1c1', type: 'circle', cx: 16.1, cy: 20.6, r: 1.7 },
+];
+
+export const MARK_WEFT: readonly MarkShape[] = [
+	{ id: 'f0c0', type: 'circle', cx: 3.4, cy: 7.9, r: 1.7 },
+	{ id: 'f0r0', type: 'rect', x: 3.4, y: 6.2, width: 9.8, height: 3.4 },
+	{ id: 'f0r1', type: 'rect', x: 19, y: 6.2, width: 1.6, height: 3.4 },
+	{ id: 'f0c1', type: 'circle', cx: 20.6, cy: 7.9, r: 1.7 },
+	{ id: 'f1c0', type: 'circle', cx: 3.4, cy: 16.1, r: 1.7 },
+	{ id: 'f1r0', type: 'rect', x: 3.4, y: 14.4, width: 1.6, height: 3.4 },
+	{ id: 'f1r1', type: 'rect', x: 10.8, y: 14.4, width: 9.8, height: 3.4 },
+	{ id: 'f1c1', type: 'circle', cx: 20.6, cy: 16.1, r: 1.7 },
+];