bosia 0.6.20 → 0.6.22

package/src/core/plugins/inspector/bun-plugin.ts

@@ -160,10 +160,7 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 				// line numbers differ. The resolver translates browser-side stack
 				// frames (delivered via SSE), which run client code.
 				if (dev && generate === "client" && result.js.map) {
-					const m =
-						typeof result.js.map === "string"
-							? JSON.parse(result.js.map)
-							: result.js.map;
+					const m = typeof result.js.map === "string" ? JSON.parse(result.js.map) : result.js.map;
 					svelteMapCache.set(args.path, m);
 				}
 

package/src/core/plugins/inspector/index.ts

@@ -174,9 +174,7 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 		name: "inspector",
 
 		build: {
-			bunPlugins: (target) => [
-				createInspectorBunPlugin({ cwd: process.cwd(), target, dev: true }),
-			],
+			bunPlugins: (target) => [createInspectorBunPlugin({ cwd: process.cwd(), target, dev: true })],
 		},
 
 		backend: {
@@ -195,13 +193,10 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 					const line = Number.isFinite(data.line) ? Number(data.line) : null;
 					const col = Number.isFinite(data.col) ? Number(data.col) : 1;
 					if (!file || line === null) {
-						return new Response(
-							JSON.stringify({ ok: false, error: "missing file/line" }),
-							{
-								status: 400,
-								headers: { "content-type": "application/json" },
-							},
-						);
+						return new Response(JSON.stringify({ ok: false, error: "missing file/line" }), {
+							status: 400,
+							headers: { "content-type": "application/json" },
+						});
 					}
 
 					const comment = typeof data.comment === "string" ? data.comment.trim() : "";
@@ -245,13 +240,10 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 							return { ok: true, mode: "ai" as const };
 						} catch (err) {
 							console.error("[inspector] aiEndpoint POST failed:", err);
-							return new Response(
-								JSON.stringify({ ok: false, error: "ai endpoint failed" }),
-								{
-									status: 502,
-									headers: { "content-type": "application/json" },
-								},
-							);
+							return new Response(JSON.stringify({ ok: false, error: "ai endpoint failed" }), {
+								status: 502,
+								headers: { "content-type": "application/json" },
+							});
 						}
 					}
 
@@ -266,13 +258,10 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 						});
 					} catch (err) {
 						console.error(`[inspector] failed to launch "${editor}":`, err);
-						return new Response(
-							JSON.stringify({ ok: false, error: "editor launch failed" }),
-							{
-								status: 500,
-								headers: { "content-type": "application/json" },
-							},
-						);
+						return new Response(JSON.stringify({ ok: false, error: "editor launch failed" }), {
+							status: 500,
+							headers: { "content-type": "application/json" },
+						});
 					}
 					return { ok: true, mode: "editor" as const };
 				});
@@ -297,46 +286,43 @@ export function inspector(options: InspectorOptions = {}): BosiaPlugin | false {
 					// Live SSE stream. New clients also get a flush of the bounded
 					// replay buffer so errors that fired during a failing render
 					// (before the 500 page's overlay could subscribe) are visible.
-					chained = chained.get(
-						"/__bosia/errors",
-						({ request }: { request: Request }) => {
-							const stream = new ReadableStream<Uint8Array>({
-								start(ctrl) {
-									sseClients.add(ctrl);
+					chained = chained.get("/__bosia/errors", ({ request }: { request: Request }) => {
+						const stream = new ReadableStream<Uint8Array>({
+							start(ctrl) {
+								sseClients.add(ctrl);
+								try {
+									ctrl.enqueue(encode(":ok\n\n"));
+								} catch {
+									sseClients.delete(ctrl);
+									return;
+								}
+								flushReplay(ctrl);
+								const ping = setInterval(() => {
 									try {
-										ctrl.enqueue(encode(":ok\n\n"));
+										ctrl.enqueue(encode(":ping\n\n"));
 									} catch {
+										clearInterval(ping);
 										sseClients.delete(ctrl);
-										return;
 									}
-									flushReplay(ctrl);
-									const ping = setInterval(() => {
-										try {
-											ctrl.enqueue(encode(":ping\n\n"));
-										} catch {
-											clearInterval(ping);
-											sseClients.delete(ctrl);
-										}
-									}, 25_000);
+								}, 25_000);
 
-									request.signal.addEventListener("abort", () => {
-										clearInterval(ping);
-										sseClients.delete(ctrl);
-										try {
-											ctrl.close();
-										} catch {}
-									});
-								},
-							});
-							return new Response(stream, {
-								headers: {
-									"Content-Type": "text/event-stream; charset=utf-8",
-									"Cache-Control": "no-cache",
-									Connection: "keep-alive",
-								},
-							});
-						},
-					) as unknown as Elysia;
+								request.signal.addEventListener("abort", () => {
+									clearInterval(ping);
+									sseClients.delete(ctrl);
+									try {
+										ctrl.close();
+									} catch {}
+								});
+							},
+						});
+						return new Response(stream, {
+							headers: {
+								"Content-Type": "text/event-stream; charset=utf-8",
+								"Cache-Control": "no-cache",
+								Connection: "keep-alive",
+							},
+						});
+					}) as unknown as Elysia;
 				}
 
 				return chained;

package/src/core/renderer.ts

@@ -148,8 +148,7 @@ function makeFetch(req: Request, url: URL) {
 
 		const headers = new Headers(init?.headers);
 		const trusted =
-			targetOrigin !== null &&
-			(targetOrigin === sameOrigin || INTERNAL_HOSTS.has(targetOrigin));
+			targetOrigin !== null && (targetOrigin === sameOrigin || INTERNAL_HOSTS.has(targetOrigin));
 		if (cookie && trusted && !headers.has("cookie")) headers.set("cookie", cookie);
 
 		return globalThis.fetch(resolved, { ...init, headers });
@@ -927,9 +926,7 @@ export async function renderErrorPage(
 				const K = picked.depth;
 				const [errorMod, layoutMods] = await Promise.all([
 					picked.loader(),
-					Promise.all(
-						route.layoutModules.slice(0, K).map((l: () => Promise<any>) => l()),
-					),
+					Promise.all(route.layoutModules.slice(0, K).map((l: () => Promise<any>) => l())),
 				]);
 				const layoutData: Record<string, any>[] = [];
 				for (let i = 0; i < K; i++) layoutData.push(partialLayoutData?.[i] ?? {});
@@ -962,11 +959,7 @@ export async function renderErrorPage(
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
 				if (isDev) console.error("Nested error page render failed:", err);
-				else
-					console.error(
-						"Nested error page render failed:",
-						(err as Error).message ?? err,
-					);
+				else console.error("Nested error page render failed:", (err as Error).message ?? err);
 				if (isDev) reportDevErrorFromCatch(err);
 				// fall through to global / text fallback
 			}

package/src/core/routeTypes.ts

@@ -78,9 +78,7 @@ export function generateRouteTypes(manifest: RouteManifest): void {
 			params.length === 0 ? `{}` : `{ ${params.map((p) => `${p}: string`).join("; ")} }`;
 
 		const lines: string[] = ["// AUTO-GENERATED by bosia — do not edit\n"];
-		lines.push(
-			`import type { LoadEvent, MetadataEvent, RequestEvent, Metadata } from 'bosia';`,
-		);
+		lines.push(`import type { LoadEvent, MetadataEvent, RequestEvent, Metadata } from 'bosia';`);
 		lines.push(``);
 		lines.push(`export type Params = ${paramsType};`);
 		lines.push(``);
@@ -126,9 +124,7 @@ export function generateRouteTypes(manifest: RouteManifest): void {
 			lines.push(
 				`type _ActionReturn<T> = T extends (...args: any[]) => infer R ? Awaited<R> : never;`,
 			);
-			lines.push(
-				`type _UnwrapFailure<T> = T extends { status: number; data: infer D } ? D : T;`,
-			);
+			lines.push(`type _UnwrapFailure<T> = T extends { status: number; data: infer D } ? D : T;`);
 			lines.push(
 				`export type ActionData = _actions extends Record<string, (...args: any[]) => any>`,
 			);
@@ -140,9 +136,7 @@ export function generateRouteTypes(manifest: RouteManifest): void {
 			lines.push(`\nimport type { load as _layoutLoad } from '${srcBase}+layout.server.ts';`);
 			lines.push(`export type LayoutServerLoad = (event: _LoadEvent) => any;`);
 			lines.push(`export type LayoutData = Awaited<ReturnType<typeof _layoutLoad>>;`);
-			lines.push(
-				`export type LayoutProps = { data: LayoutData; params: Params; children: any };`,
-			);
+			lines.push(`export type LayoutProps = { data: LayoutData; params: Params; children: any };`);
 		}
 
 		const outDir = join(process.cwd(), ".bosia", "types", "src", "routes", ...segments);

package/src/core/scanner.ts

@@ -93,9 +93,7 @@ export function scanRoutes(): RouteManifest {
 				? join(dir, "+page.server.ts")
 				: null;
 
-			const pageTs = pageServerFile
-				? readTrailingSlash(join(ROUTES_DIR, pageServerFile))
-				: null;
+			const pageTs = pageServerFile ? readTrailingSlash(join(ROUTES_DIR, pageServerFile)) : null;
 			const effectiveTs: TrailingSlash = pageTs ?? currentTrailingSlash;
 
 			pages.push({

package/src/core/server.ts

@@ -234,21 +234,11 @@ async function resolve(event: RequestEvent): Promise<Response> {
 			const mask = invalidatedBits
 				? buildMaskFromBits(
 						invalidatedBits,
-						pageMatch?.route
-							? ((pageMatch.route as any).layoutModules?.length ?? 0)
-							: 0,
+						pageMatch?.route ? ((pageMatch.route as any).layoutModules?.length ?? 0) : 0,
 					)
 				: undefined;
 			const runLoad = async () => {
-				const data = await loadRouteData(
-					routeUrl,
-					locals,
-					request,
-					cookies,
-					null,
-					pageMatch,
-					mask,
-				);
+				const data = await loadRouteData(routeUrl, locals, request, cookies, null, pageMatch, mask);
 
 				let metadata = null;
 				if (pageMatch) {
@@ -278,14 +268,10 @@ async function resolve(event: RequestEvent): Promise<Response> {
 				? `${dedupKey(routeUrl)}|m=${invalidatedBits}`
 				: dedupKey(routeUrl);
 			const result =
-				pageMatch?.route.scope === "private"
-					? await runLoad()
-					: await dedup(dedupK, runLoad);
+				pageMatch?.route.scope === "private" ? await runLoad() : await dedup(dedupK, runLoad);
 
 			const cookiesWereAccessed = (cookies as CookieJar).accessed || result.cookiesAccessed;
-			const cc = cookiesWereAccessed
-				? "private, no-cache"
-				: "public, max-age=0, must-revalidate";
+			const cc = cookiesWereAccessed ? "private, no-cache" : "public, max-age=0, must-revalidate";
 
 			if (!result.data) {
 				return compress(
@@ -461,9 +447,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 			if (hit) {
 				return new Response(
 					Bun.file(hit.absPath),
-					hit.cacheControl
-						? { headers: { "Cache-Control": hit.cacheControl } }
-						: undefined,
+					hit.cacheControl ? { headers: { "Cache-Control": hit.cacheControl } } : undefined,
 				);
 			}
 			return new Response("Not Found", { status: 404 });
@@ -510,9 +494,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 	if (!isDev) {
 		// Try both `<path>/index.html` (always/ignore mode) and `<path>.html` (never mode)
 		const prerenderCandidates =
-			path === "/"
-				? ["index.html"]
-				: [`${path}/index.html`, `${path.replace(/\/$/, "")}.html`];
+			path === "/" ? ["index.html"] : [`${path}/index.html`, `${path.replace(/\/$/, "")}.html`];
 		for (const candidate of prerenderCandidates) {
 			const prerenderPath = safePath(`${OUT_DIR}/prerendered`, candidate);
 			if (!prerenderPath) continue;
@@ -533,10 +515,7 @@ async function resolve(event: RequestEvent): Promise<Response> {
 
 	// Trailing-slash canonicalization — 308 preserves method (form POSTs included)
 	if (pageMatch) {
-		const canonical = canonicalPathname(
-			path,
-			(pageMatch.route as any).trailingSlash ?? "never",
-		);
+		const canonical = canonicalPathname(path, (pageMatch.route as any).trailingSlash ?? "never");
 		if (canonical !== null) {
 			return new Response(null, {
 				status: 308,
@@ -854,15 +833,11 @@ async function handleRequest(request: Request, url: URL): Promise<Response> {
 function parseCorsMaxAge(value?: string): number | undefined {
 	if (!value) return undefined;
 	if (!/^\d+$/.test(value)) {
-		throw new Error(
-			`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`,
-		);
+		throw new Error(`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`);
 	}
 	const n = parseInt(value, 10);
 	if (!Number.isFinite(n) || n > Number.MAX_SAFE_INTEGER) {
-		throw new Error(
-			`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`,
-		);
+		throw new Error(`Invalid CORS_MAX_AGE: "${value}" — must be a non-negative integer (seconds)`);
 	}
 	return n;
 }

package/src/core/staticManifest.ts

@@ -50,9 +50,7 @@ export function buildStaticManifest(outDir: string): StaticManifest {
 	const clientRoot = join(outAbs, "client");
 	if (existsSync(clientRoot)) {
 		for (const { abs, rel } of walk(clientRoot)) {
-			const cacheControl = HASHED_BASENAME.test(basename(rel))
-				? IMMUTABLE_CACHE
-				: DEFAULT_CACHE;
+			const cacheControl = HASHED_BASENAME.test(basename(rel)) ? IMMUTABLE_CACHE : DEFAULT_CACHE;
 			addOnce(manifest, `/dist/client/${rel}`, { absPath: abs, cacheControl });
 		}
 	}

package/src/core/svelteAudit.ts

@@ -121,9 +121,7 @@ function extractBindings(ast: AnyNode): Binding[] {
 				case "ImportDeclaration": {
 					const sourceNode = stmt.source as AnyNode | undefined;
 					const source =
-						sourceNode && typeof sourceNode.value === "string"
-							? (sourceNode.value as string)
-							: "";
+						sourceNode && typeof sourceNode.value === "string" ? (sourceNode.value as string) : "";
 					const specs = stmt.specifiers as AnyNode[] | undefined;
 					if (!Array.isArray(specs)) break;
 					for (const spec of specs) {
@@ -344,8 +342,7 @@ function collectTemplateRefs(source: string, fragment: AnyNode): TemplateRef[] {
 			// name into the surrounding scope so `<MySnippet/>` doesn't false-
 			// positive. The expression's name is the snippet's identifier.
 			const expr = n.expression as AnyNode | undefined;
-			const snippetName =
-				expr && typeof expr.name === "string" ? (expr.name as string) : null;
+			const snippetName = expr && typeof expr.name === "string" ? (expr.name as string) : null;
 			if (snippetName && scopeStack.length > 0) {
 				scopeStack[scopeStack.length - 1].add(snippetName);
 			} else if (snippetName) {

package/src/core/svelteCompiler.ts

@@ -113,10 +113,7 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 				// Server (Bun) compile output has different line numbers and would
 				// clobber the client entry under the same cache key.
 				if (dev && target === "browser" && result.js.map) {
-					const m =
-						typeof result.js.map === "string"
-							? JSON.parse(result.js.map)
-							: result.js.map;
+					const m = typeof result.js.map === "string" ? JSON.parse(result.js.map) : result.js.map;
 					svelteMapCache.set(args.path, m);
 				}
 				const contents = dev ? fixBindShadow(result.js.code) : result.js.code;
@@ -134,10 +131,7 @@ export function makeBosiaSvelteCompiler(target: "browser" | "bun"): BunPlugin {
 					filename: args.path,
 				});
 				if (dev && target === "browser" && result.js.map) {
-					const m =
-						typeof result.js.map === "string"
-							? JSON.parse(result.js.map)
-							: result.js.map;
+					const m = typeof result.js.map === "string" ? JSON.parse(result.js.map) : result.js.map;
 					svelteMapCache.set(args.path, m);
 				}
 				return { contents: result.js.code, loader: "js" };

package/src/lib/client.ts

@@ -18,3 +18,4 @@ export {
 	invalidateAll,
 } from "../core/client/navigation.ts";
 export type { GotoOptions, Navigation, NavigationTarget } from "../core/client/navigation.ts";
+export { page } from "../core/client/page.svelte.ts";

package/templates/default/.prettierignore

@@ -4,3 +4,4 @@ build
 .bosia
 bun.lock
 public/bosia-tw.css
+bosia.json

package/templates/demo/.prettierignore

@@ -4,3 +4,4 @@ build
 .bosia
 bun.lock
 public/bosia-tw.css
+bosia.json

package/templates/shop/.env.example

@@ -0,0 +1,12 @@
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/shop
+
+SESSION_SECRET=change-me-in-production
+
+STORAGE_DRIVER=s3
+S3_BUCKET=
+S3_REGION=auto
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+S3_ENDPOINT=
+
+PUBLIC_BASE_URL=

package/templates/shop/.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+build
+.bosia
+bun.lock
+public/bosia-tw.css
+bosia.json

package/templates/shop/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"tabWidth": 2,
+	"singleQuote": false,
+	"trailingComma": "all",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package/templates/shop/README.md

@@ -0,0 +1,62 @@
+# {{PROJECT_NAME}}
+
+An online-store starter built with [Bosia](https://github.com/bosapi/bosia) — auth, RBAC, S3-backed uploads, and the shop domain (products / orders / cart).
+
+## Prerequisites
+
+- [Bun](https://bun.sh/) v1.1+
+- PostgreSQL running locally or remotely
+- An S3-compatible bucket (AWS S3, Cloudflare R2, MinIO, ...)
+
+## Getting Started
+
+```bash
+cp .env.example .env
+# fill DATABASE_URL, SESSION_SECRET, and S3_* in .env
+
+bun run db:generate
+bun run db:migrate
+bun run db:seed
+
+bun x bosia dev
+```
+
+Visit [http://localhost:9000](http://localhost:9000). The **first account you register becomes the admin** (gets `('*','*')` via the RBAC bootstrap seed).
+
+## What ships
+
+| Feature       | Path                                                                   |
+| ------------- | ---------------------------------------------------------------------- |
+| `auth`        | `src/features/auth/`, `(public)/login`, `(public)/register`, `/logout` |
+| `rbac`        | `src/features/rbac/`, `locals.can(r,a,scope?)`                         |
+| `file-upload` | `src/features/file-upload/`, `POST /api/files` (S3 via `Bun.s3`)       |
+| `shop`        | `src/features/shop/` (products / orders / cart services)               |
+
+## Routes
+
+- `/` — public landing
+- `/login`, `/register`, `POST /logout`
+- `/dashboard` — gated; redirects to `/login` if unauthenticated
+
+## Scripts
+
+| Command               | Description                                   |
+| --------------------- | --------------------------------------------- |
+| `bun x bosia dev`     | Dev server with HMR                           |
+| `bun x bosia build`   | Production build                              |
+| `bun run db:generate` | Generate migration from schema changes        |
+| `bun run db:migrate`  | Apply pending migrations                      |
+| `bun run db:seed`     | Run pending seed files (incl. RBAC bootstrap) |
+
+## S3 storage
+
+Uses native `Bun.s3` (no `@aws-sdk/*` dependency). Set the standard env vars:
+
+```
+STORAGE_DRIVER=s3
+S3_BUCKET=...
+S3_REGION=...
+S3_ACCESS_KEY_ID=...
+S3_SECRET_ACCESS_KEY=...
+S3_ENDPOINT=          # optional, for R2/MinIO
+```

package/templates/shop/_gitignore

@@ -0,0 +1,12 @@
+node_modules/
+dist/
+.bosia/
+.DS_Store
+*.log
+
+# Generated Tailwind output
+public/bosia-tw.css
+
+# Local env overrides — never commit secrets
+.env*.local
+.env

package/templates/shop/bosia.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "bosia";
+import { inspector } from "bosia/plugins/inspector";
+
+export default defineConfig({
+	plugins: [
+		// Dev-only: Alt+click any element on the page to open its source in your editor.
+		// Change `editor` to "cursor" or "zed" if you don't use VS Code.
+		inspector({ editor: "code" }),
+	],
+});

package/templates/shop/instructions.txt

@@ -0,0 +1,8 @@
+Update .env with your DATABASE_URL (PostgreSQL) and S3_* credentials.
+Pick a strong SESSION_SECRET.
+
+bun run db:generate
+bun run db:migrate
+bun run db:seed
+
+The first account you register becomes the admin.

package/templates/shop/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "{{PROJECT_NAME}}",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "bosia dev",
+		"build": "bosia build",
+		"start": "bosia start",
+		"check": "tsc --noEmit && prettier --check .",
+		"format": "prettier --write .",
+		"format:check": "prettier --check ."
+	},
+	"dependencies": {
+		"bosia": "^{{BOSIA_VERSION}}",
+		"svelte": "^5.20.0",
+		"tailwind-merge": "^3.5.0",
+		"drizzle-orm": "^0.44.0",
+		"postgres": "^3.4.0"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"prettier": "^3.3.0",
+		"prettier-plugin-svelte": "^3.2.0",
+		"typescript": "^5",
+		"drizzle-kit": "^0.31.0"
+	}
+}

package/templates/shop/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="currentColor" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="currentColor" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="currentColor" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>

package/templates/shop/public/logo-dark.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="#f0f0f0" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="#f0f0f0" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="#f0f0f0" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="#f0f0f0" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="#f0f0f0" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>

package/templates/shop/public/logo-light.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="#1a1a1a" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="#1a1a1a" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="#1a1a1a" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="#1a1a1a" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="#1a1a1a" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>