bosia 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bosia",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing inspired by SvelteKit. No Node.js, no Vite, no adapters.",
   "keywords": [

package/src/cli/add.ts

@@ -21,11 +21,23 @@ interface ComponentMeta {
     npmDeps: Record<string, string>;
 }
 
+interface RegistryIndex {
+    components: string[];
+    features: string[];
+}
+
 // Track already-installed components within a session to avoid re-running deps
 const installed = new Set<string>();
 
-// Resolved once in runAdd, used by addComponent
+// Resolved once in runAdd or initAddRegistry, used by addComponent
 let registryRoot: string | null = null;
+let registryIndex: RegistryIndex | null = null;
+
+/** Initialize registry context so addComponent can be called externally (e.g. from feat.ts) */
+export async function initAddRegistry(root: string | null) {
+    registryRoot = root;
+    registryIndex = await loadIndex();
+}
 
 export async function runAdd(name: string | undefined, flags: string[] = []) {
     if (!name) {
@@ -39,17 +51,47 @@ export async function runAdd(name: string | undefined, flags: string[] = []) {
         console.log(`⬡ Using local registry: ${registryRoot}\n`);
     }
 
+    // Load index once to resolve component paths
+    registryIndex = await loadIndex();
+
     ensureUtils();
     await addComponent(name, true);
 }
 
 /**
- * Resolve the destination path for a component.
- * - "button"     → "ui/button"     (default ui/ prefix)
+ * Resolve the full registry path for a component using the index.
+ * - "todo"       → "todo"          (exact match in index)
+ * - "button"     → "ui/button"     (suffix match in index)
  * - "shop/cart"  → "shop/cart"     (explicit path used as-is)
  */
 function resolveDestPath(name: string): string {
-    return name.includes("/") ? name : `ui/${name}`;
+    if (name.includes("/")) return name;
+
+    if (registryIndex) {
+        // Exact match (e.g. "todo" → "todo")
+        if (registryIndex.components.includes(name)) return name;
+        // Suffix match (e.g. "button" → "ui/button")
+        const match = registryIndex.components.find(
+            (c) => c.endsWith(`/${name}`)
+        );
+        if (match) return match;
+    }
+
+    // Fallback for backwards compatibility
+    return `ui/${name}`;
+}
+
+async function loadIndex(): Promise<RegistryIndex | null> {
+    try {
+        if (registryRoot) {
+            const path = join(registryRoot, "index.json");
+            if (existsSync(path)) return JSON.parse(readFileSync(path, "utf-8"));
+            return null;
+        }
+        return await fetchJSON<RegistryIndex>(`${REMOTE_BASE}/index.json`);
+    } catch {
+        return null;
+    }
 }
 
 export async function addComponent(name: string, root = false) {

package/src/cli/create.ts

@@ -1,4 +1,4 @@
-import { resolve, join, basename } from "path";
+import { resolve, join, basename, relative } from "path";
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
 import { spawn } from "bun";
 import * as p from "@clack/prompts";
@@ -12,6 +12,7 @@ const BOSIA_VERSION: string = BOSIA_PKG.version;
 const TEMPLATE_DESCRIPTIONS: Record<string, string> = {
     default: "Minimal starter with routing and Tailwind",
     demo: "Full-featured demo with hooks, API routes, form actions, and more",
+    drizzle: "PostgreSQL + Drizzle ORM with full CRUD todo demo",
 };
 
 export async function runCreate(name: string | undefined, args: string[] = []) {
@@ -34,6 +35,9 @@ export async function runCreate(name: string | undefined, args: string[] = []) {
         template = args[templateIdx + 1];
     }
 
+    // Parse --local flag
+    const isLocal = args.includes("--local");
+
     // If no --template flag, prompt interactively
     if (!template) {
         template = await promptTemplate();
@@ -49,7 +53,11 @@ export async function runCreate(name: string | undefined, args: string[] = []) {
 
     console.log(`\n⬡ Creating Bosia project: ${basename(targetDir)} (template: ${template})\n`);
 
-    copyDir(templateDir, targetDir, name);
+    copyDir(templateDir, targetDir, name, isLocal);
+
+    if (existsSync(join(targetDir, ".env.example"))) {
+        writeFileSync(join(targetDir, ".env"), readFileSync(join(targetDir, ".env.example"), "utf-8"));
+    }
 
     console.log(`✅ Project created at ${targetDir}\n`);
 
@@ -63,7 +71,15 @@ export async function runCreate(name: string | undefined, args: string[] = []) {
     if (exitCode !== 0) {
         console.warn("⚠️  bun install failed — run it manually.");
     } else {
-        console.log(`\n🎉 Ready!\n\n  cd ${name}\n  bun x bosia dev\n`);
+        console.log(`\n🎉 Ready!\n\ncd ${name}`);
+        
+        const instPath = join(templateDir, "instructions.txt");
+        if (existsSync(instPath)) {
+            const instructions = readFileSync(instPath, "utf-8").trimEnd();
+            if (instructions) console.log(instructions);
+        }
+
+        console.log(`bun x bosia dev\n`);
     }
 }
 
@@ -96,17 +112,29 @@ async function promptTemplate(): Promise<string> {
     return selected as string;
 }
 
-function copyDir(src: string, dest: string, projectName: string) {
+function copyDir(src: string, dest: string, projectName: string, isLocal: boolean) {
     mkdirSync(dest, { recursive: true });
     for (const entry of readdirSync(src, { withFileTypes: true })) {
         const srcPath = join(src, entry.name);
         const destPath = join(dest, entry.name);
+        
+        // Do not copy instructions.txt to the final project
+        if (entry.name === "instructions.txt") continue;
+
         if (entry.isDirectory()) {
-            copyDir(srcPath, destPath, projectName);
+            copyDir(srcPath, destPath, projectName, isLocal);
         } else {
-            const content = readFileSync(srcPath, "utf-8")
-                .replaceAll("{{PROJECT_NAME}}", projectName)
-                .replaceAll("{{BOSIA_VERSION}}", BOSIA_VERSION);
+            let content = readFileSync(srcPath, "utf-8")
+                .replaceAll("{{PROJECT_NAME}}", projectName);
+
+            if (entry.name === "package.json" && isLocal) {
+                const bosiaPath = resolve(import.meta.dir, "../../");
+                const relPath = relative(dest, bosiaPath);
+                content = content.replaceAll("\"^{{BOSIA_VERSION}}\"", `"file:${relPath}"`);
+            } else {
+                content = content.replaceAll("{{BOSIA_VERSION}}", BOSIA_VERSION);
+            }
+
             writeFileSync(destPath, content, "utf-8");
         }
     }

package/src/cli/feat.ts

@@ -1,32 +1,64 @@
 import { join, dirname } from "path";
-import { mkdirSync, writeFileSync } from "fs";
+import { mkdirSync, writeFileSync, readFileSync, existsSync } from "fs";
 import { spawn } from "bun";
-import { addComponent } from "./add.ts";
+import * as p from "@clack/prompts";
+import { addComponent, initAddRegistry } from "./add.ts";
 
-// ─── bosia feat <feature> ─────────────────────────────────
-// Fetches a feature scaffold from the GitHub registry.
-// Installs required components, copies route/lib files, installs npm deps.
+// ─── bosia feat <feature> [--local] ──────────────────────
+// Fetches a feature scaffold from the GitHub registry (or local
+// registry with --local) and copies route/lib files, installs npm deps.
+// Supports nested feature dependencies (e.g. todo → drizzle).
 
 const REGISTRY_BASE = "https://raw.githubusercontent.com/bosapi/bosia/main/registry";
 
 interface FeatureMeta {
     name: string;
     description: string;
+    features?: string[];               // other bosia features required
     components: string[];              // bosia components to install via `bosia add`
     files: string[];                   // source filenames in the registry feature dir
     targets: string[];                 // destination paths relative to project root
     npmDeps: Record<string, string>;
+    scripts?: Record<string, string>;  // package.json scripts to add
+    envVars?: Record<string, string>;  // env vars to append to .env if missing
 }
 
-export async function runFeat(name: string | undefined) {
+let registryRoot: string | null = null;
+
+// Track installed features to prevent circular dependencies
+const installedFeats = new Set<string>();
+
+export async function runFeat(name: string | undefined, flags: string[] = []) {
     if (!name) {
-        console.error("❌ Please provide a feature name.\n   Usage: bosia feat <feature>");
+        console.error("❌ Please provide a feature name.\n   Usage: bosia feat <feature> [--local]");
         process.exit(1);
     }
 
-    console.log(`⬡ Installing feature: ${name}\n`);
+    if (flags.includes("--local")) {
+        registryRoot = resolveLocalRegistry();
+        console.log(`⬡ Using local registry: ${registryRoot}\n`);
+    }
 
-    const meta = await fetchJSON<FeatureMeta>(`${REGISTRY_BASE}/features/${name}/meta.json`);
+    // Initialize add.ts registry context so addComponent resolves paths correctly
+    await initAddRegistry(registryRoot);
+
+    await installFeature(name, true);
+}
+
+async function installFeature(name: string, isRoot: boolean) {
+    if (installedFeats.has(name)) return;
+    installedFeats.add(name);
+
+    console.log(isRoot ? `⬡ Installing feature: ${name}\n` : `\n⬡ Installing dependency feature: ${name}\n`);
+
+    const meta = await readMeta(name);
+
+    // Install required feature dependencies first (recursive)
+    if (meta.features && meta.features.length > 0) {
+        for (const feat of meta.features) {
+            await installFeature(feat, false);
+        }
+    }
 
     // Install required UI components
     if (meta.components.length > 0) {
@@ -41,8 +73,20 @@ export async function runFeat(name: string | undefined) {
     for (let i = 0; i < meta.files.length; i++) {
         const file = meta.files[i]!;
         const target = meta.targets[i] ?? file;
-        const content = await fetchText(`${REGISTRY_BASE}/features/${name}/${file}`);
         const dest = join(process.cwd(), target);
+
+        // Prompt before overwriting existing files
+        if (existsSync(dest)) {
+            const replace = await p.confirm({
+                message: `File "${target}" already exists. Replace it?`,
+            });
+            if (p.isCancel(replace) || !replace) {
+                console.log(`   ⏭️  Skipped ${target}`);
+                continue;
+            }
+        }
+
+        const content = await readFile(name, file);
         mkdirSync(dirname(dest), { recursive: true });
         writeFileSync(dest, content, "utf-8");
         console.log(`   ✍️  ${target}`);
@@ -63,8 +107,88 @@ export async function runFeat(name: string | undefined) {
         }
     }
 
-    console.log(`\n✅ Feature "${name}" scaffolded!`);
-    if (meta.description) console.log(`   ${meta.description}`);
+    // Add package.json scripts
+    const scriptEntries = Object.entries(meta.scripts ?? {});
+    if (scriptEntries.length > 0) {
+        const pkgPath = join(process.cwd(), "package.json");
+        if (existsSync(pkgPath)) {
+            const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+            pkg.scripts = pkg.scripts ?? {};
+            const added: string[] = [];
+            for (const [key, val] of scriptEntries) {
+                if (!pkg.scripts[key]) {
+                    pkg.scripts[key] = val;
+                    added.push(key);
+                }
+            }
+            if (added.length > 0) {
+                writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf-8");
+                console.log(`\n📜 Added scripts: ${added.join(", ")}`);
+            }
+        }
+    }
+
+    // Append env vars to .env if missing
+    const envEntries = Object.entries(meta.envVars ?? {});
+    if (envEntries.length > 0) {
+        const envPath = join(process.cwd(), ".env");
+        const existing = existsSync(envPath) ? readFileSync(envPath, "utf-8") : "";
+        const toAdd: string[] = [];
+        for (const [key, val] of envEntries) {
+            if (!existing.includes(`${key}=`)) {
+                toAdd.push(`${key}=${val}`);
+            }
+        }
+        if (toAdd.length > 0) {
+            const nl = existing.length > 0 && !existing.endsWith("\n") ? "\n" : "";
+            writeFileSync(envPath, existing + nl + toAdd.join("\n") + "\n", "utf-8");
+            console.log(`\n🔑 Added to .env: ${toAdd.map((l) => l.split("=")[0]).join(", ")}`);
+        }
+    }
+
+    if (isRoot) {
+        console.log(`\n✅ Feature "${name}" scaffolded!`);
+        if (meta.description) console.log(`   ${meta.description}`);
+    } else {
+        console.log(`   ✅ Dependency feature "${name}" installed.`);
+    }
+}
+
+// ─── Registry resolvers ──────────────────────────────────────
+
+function resolveLocalRegistry(): string {
+    let dir = dirname(new URL(import.meta.url).pathname);
+    for (let i = 0; i < 10; i++) {
+        const candidate = join(dir, "registry");
+        if (existsSync(join(candidate, "index.json"))) return candidate;
+        const parent = dirname(dir);
+        if (parent === dir) break;
+        dir = parent;
+    }
+    console.error("❌ Could not find local registry/ directory.");
+    process.exit(1);
+}
+
+async function readMeta(name: string): Promise<FeatureMeta> {
+    if (registryRoot) {
+        const path = join(registryRoot, "features", name, "meta.json");
+        if (!existsSync(path)) {
+            throw new Error(`Feature "${name}" not found in local registry`);
+        }
+        return JSON.parse(readFileSync(path, "utf-8"));
+    }
+    return fetchJSON<FeatureMeta>(`${REGISTRY_BASE}/features/${name}/meta.json`);
+}
+
+async function readFile(name: string, file: string): Promise<string> {
+    if (registryRoot) {
+        const path = join(registryRoot, "features", name, file);
+        if (!existsSync(path)) {
+            throw new Error(`File "${file}" not found for feature "${name}" in local registry`);
+        }
+        return readFileSync(path, "utf-8");
+    }
+    return fetchText(`${REGISTRY_BASE}/features/${name}/${file}`);
 }
 
 async function fetchJSON<T>(url: string): Promise<T> {

package/src/cli/index.ts

@@ -40,7 +40,9 @@ async function main() {
         }
         case "feat": {
             const { runFeat } = await import("./feat.ts");
-            await runFeat(args[0]);
+            const featName = args.find((a) => !a.startsWith("--"));
+            const featFlags = args.filter((a) => a.startsWith("--"));
+            await runFeat(featName, featFlags);
             break;
         }
         default: {
@@ -56,7 +58,7 @@ Commands:
   build               Build for production
   start               Run the production server
   add <component>     Add a UI component from the registry
-  feat <feature>      Add a feature scaffold from the registry
+  feat <feature>      Add a feature scaffold from the registry [--local]
 
 Examples:
   bosia create my-app

package/src/core/plugin.ts

@@ -22,9 +22,11 @@ export function makeBosiaPlugin(target: "browser" | "bun" = "bun") {
     return {
         name: "bosia-resolver",
         setup(build: import("bun").PluginBuilder) {
-            // bosia:routes → .bosia/routes.ts
+            // bosia:routes → .bosia/routes.client.ts (browser) or .bosia/routes.ts (server)
+            // Client-only file excludes serverRoutes/apiRoutes to prevent the browser
+            // bundler from following server-side dynamic imports into Node builtins.
             build.onResolve({ filter: /^bosia:routes$/ }, () => ({
-                path: join(process.cwd(), ".bosia", "routes.ts"),
+                path: join(process.cwd(), ".bosia", target === "browser" ? "routes.client.ts" : "routes.ts"),
             }));
 
             // $env → .bosia/env.client.ts (browser) or .bosia/env.server.ts (bun)

package/src/core/routeFile.ts

@@ -101,11 +101,56 @@ export function generateRoutesFile(manifest: RouteManifest): void {
 
     mkdirSync(".bosia", { recursive: true });
     writeFileSync(".bosia/routes.ts", lines.join("\n"));
+
+    // Generate client-only routes file (no server imports that could pull in Node builtins)
+    generateClientRoutesFile(pages, manifest.errorPage);
+
     const pagePatterns = pages.map(p => p.pattern).join(", ") || "(none)";
     console.log(`✅ Routes generated: .bosia/routes.ts`);
     console.log(`   Found ${pages.length} page route(s): ${pagePatterns}`);
 }
 
+// ─── Client-only routes file ─────────────────────────────
+// Separate file with only clientRoutes + errorPage to prevent
+// the browser bundler from following server-side dynamic imports
+// (e.g. +page.server.ts → drizzle-orm → postgres → Node builtins).
+
+function generateClientRoutesFile(
+    pages: RouteManifest["pages"],
+    errorPage: RouteManifest["errorPage"],
+): void {
+    const lines: string[] = [
+        "// AUTO-GENERATED by bosia build — client-only routes (no server imports)\n",
+    ];
+
+    lines.push("export const clientRoutes: Array<{");
+    lines.push("  pattern: string;");
+    lines.push("  page: () => Promise<any>;");
+    lines.push("  layouts: (() => Promise<any>)[];");
+    lines.push("  hasServerData: boolean;");
+    lines.push("}> = [");
+    for (const r of pages) {
+        const layoutImports = r.layouts
+            .map(l => `() => import(${JSON.stringify(toImportPath(l))})`)
+            .join(", ");
+        const hasServerData = !!(r.pageServer || r.layoutServers.length > 0);
+        lines.push("  {");
+        lines.push(`    pattern: ${JSON.stringify(r.pattern)},`);
+        lines.push(`    page: () => import(${JSON.stringify(toImportPath(r.page))}),`);
+        lines.push(`    layouts: [${layoutImports}],`);
+        lines.push(`    hasServerData: ${hasServerData},`);
+        lines.push("  },");
+    }
+    lines.push("];\n");
+
+    const ep = errorPage;
+    lines.push(`export const errorPage: (() => Promise<any>) | null = ${
+        ep ? `() => import(${JSON.stringify(toImportPath(ep))})` : "null"
+    };\n`);
+
+    writeFileSync(".bosia/routes.client.ts", lines.join("\n"));
+}
+
 // Import path from .bosia/routes.ts to src/routes/<routePath>
 function toImportPath(routePath: string): string {
     return "../src/routes/" + routePath.replace(/\\/g, "/");

package/templates/default/src/routes/+error.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-    let { data }: { data: { status: number; message: string } } = $props();
+    let { error }: { error: { status: number; message: string } } = $props();
 </script>
 
 <svelte:head>
-    <title>{data.status} — {data.message}</title>
+    <title>{error.status} — {error.message}</title>
 </svelte:head>
 
 <main class="flex min-h-screen flex-col items-center justify-center gap-4 text-center px-4">
-    <p class="text-8xl font-bold text-gray-200">{data.status}</p>
-    <p class="text-2xl font-semibold">{data.message}</p>
+    <p class="text-8xl font-bold text-gray-200">{error.status}</p>
+    <p class="text-2xl font-semibold">{error.message}</p>
     <a
         href="/"
         class="mt-4 rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors"

package/templates/demo/src/routes/+error.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  let { data }: { data: { status: number; message: string } } = $props();
+  let { error }: { error: { status: number; message: string } } = $props();
 </script>
 
 <svelte:head>
-  <title>{data.status} — {data.message}</title>
+  <title>{error.status} — {error.message}</title>
 </svelte:head>
 
 <div class="min-h-screen flex flex-col items-center justify-center gap-4 text-center px-4">
-  <p class="text-8xl font-bold text-gray-200">{data.status}</p>
-  <p class="text-2xl font-semibold text-gray-700">{data.message}</p>
+  <p class="text-8xl font-bold text-gray-200">{error.status}</p>
+  <p class="text-2xl font-semibold text-gray-700">{error.message}</p>
   <a href="/" class="mt-4 px-5 py-2 rounded-lg bg-gray-900 text-white text-sm hover:bg-gray-700 transition-colors">
     Go home
   </a>

package/templates/drizzle/.env.example

@@ -0,0 +1,2 @@
+# Database
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/{{PROJECT_NAME}}

package/templates/drizzle/README.md

@@ -0,0 +1,69 @@
+# {{PROJECT_NAME}}
+
+A fullstack app built with [Bosia](https://github.com/bosapi/bosia) + Drizzle ORM + PostgreSQL.
+
+## Prerequisites
+
+- [Bun](https://bun.sh/) v1.1+
+- [PostgreSQL](https://www.postgresql.org/) running locally or remotely
+
+## Getting Started
+
+```bash
+# Copy env and set your DATABASE_URL
+cp .env.example .env
+
+# Push schema to database
+bun run db:push
+
+# Seed initial data
+bun run db:seed
+
+# Start dev server
+bun x bosia dev
+```
+
+Visit [http://localhost:9000](http://localhost:9000) to see the app.
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `bun x bosia dev` | Start dev server with HMR |
+| `bun x bosia build` | Production build |
+| `bun x bosia start` | Start production server |
+| `bun run db:generate` | Generate migration from schema changes |
+| `bun run db:migrate` | Apply pending migrations |
+| `bun run db:push` | Push schema directly (dev shortcut) |
+| `bun run db:studio` | Open Drizzle Studio GUI |
+| `bun run db:seed` | Run pending seed files |
+
+## Project Structure
+
+```
+src/
+├── features/
+│   ├── drizzle/          # DB infrastructure
+│   │   ├── index.ts      # Connection singleton
+│   │   ├── schemas.ts    # Schema aggregator
+│   │   ├── migrations/   # Drizzle Kit output
+│   │   └── seeds/        # Seed files + runner
+│   └── todo/             # Business feature
+│       ├── schemas/      # Table definitions
+│       ├── queries.ts    # Typed CRUD
+│       └── types.ts      # Inferred types
+├── lib/components/todo/  # UI components
+└── routes/
+    ├── todos/            # CRUD page with form actions
+    └── api/todos/        # REST API
+```
+
+## Adding Features
+
+```bash
+# Add DB support to any Bosia app
+bosia feat drizzle
+
+# Add the todo feature (requires drizzle)
+bosia feat todo
+```

package/templates/drizzle/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+    schema: "./src/features/drizzle/schemas.ts",
+    out: "./src/features/drizzle/migrations",
+    dialect: "postgresql",
+    dbCredentials: {
+        url: process.env.DATABASE_URL!,
+    },
+});

package/templates/drizzle/instructions.txt

@@ -0,0 +1,3 @@
+Update .env with your DATABASE_URL
+bun run db:generate
+bun run db:migrate

package/templates/drizzle/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bosia dev",
+    "build": "bosia build",
+    "start": "bosia start",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:seed": "bun run src/features/drizzle/seeds/runner.ts"
+  },
+  "dependencies": {
+    "bosia": "^{{BOSIA_VERSION}}",
+    "svelte": "^5.20.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0",
+    "drizzle-orm": "^0.44.0",
+    "postgres": "^3.4.5"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5",
+    "drizzle-kit": "^0.31.0"
+  }
+}

package/templates/drizzle/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>