P0: Electrobun + Angular 22 + Tailwind skeleton boots under Bun

- Electrobun 1.18 shell with branding in src/shared/branding.ts - Angular 22 zoneless UI in ui/ (workspace), Tailwind v4 shadcn-style tokens - ng-icons/mynaui icon registry - Node-version shim so Angular CLI runs under Bun without Node installed - ssh2 SFTP verified working under Bun against test box Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 13:23:15 +02:00
commit 8092cb0c08
31 changed files with 1946 additions and 0 deletions
@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideIcons, provideNgIconsConfig } from '@ng-icons/core';
+import { APP_ICONS } from './icons';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideIcons(APP_ICONS),
+    provideNgIconsConfig({ size: '1em' }),
+  ],
+};
@@ -0,0 +1,17 @@
+<div class="flex h-screen flex-col">
+  <header class="flex items-center gap-2 border-b border-border px-4 py-2">
+    <ng-icon name="mynaArrowLeftRight" class="text-muted-foreground" />
+    <h1 class="text-sm font-semibold">{{ appName }}</h1>
+  </header>
+
+  <main class="flex flex-1 items-center justify-center">
+    <div class="rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm">
+      <div class="flex items-center gap-3">
+        <ng-icon name="mynaHardDrive" size="1.5rem" class="text-primary" />
+        <ng-icon name="mynaArrowLeftRight" size="1.25rem" class="text-muted-foreground" />
+        <ng-icon name="mynaServers" size="1.5rem" class="text-primary" />
+      </div>
+      <p class="mt-3 text-sm text-muted-foreground">P0 skeleton — panels arrive in P1.</p>
+    </div>
+  </main>
+</div>
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { BRANDING } from '@shared/branding';
+
+@Component({
+  selector: 'app-root',
+  imports: [NgIcon],
+  templateUrl: './app.html',
+})
+export class App {
+  readonly appName = BRANDING.appName;
+
+  constructor() {
+    document.title = BRANDING.appName;
+  }
+}
@@ -0,0 +1,52 @@
+// Single icon registry for the whole app, registered once in app.config.ts.
+// NOTE: @ng-icons/mynaui's package root is empty — always import from /outline
+// (or /solid, where names get a `Solid` suffix).
+import {
+  mynaArrowLeftRight,
+  mynaArrowUp,
+  mynaCheck,
+  mynaCheckCircle,
+  mynaChevronDown,
+  mynaChevronRight,
+  mynaCog,
+  mynaEdit,
+  mynaFile,
+  mynaFilePlus,
+  mynaFolder,
+  mynaFolderPlus,
+  mynaHardDrive,
+  mynaLock,
+  mynaLogout,
+  mynaPlus,
+  mynaRefresh,
+  mynaServers,
+  mynaSpinner,
+  mynaTrash,
+  mynaX,
+  mynaXCircle,
+} from "@ng-icons/mynaui/outline";
+
+export const APP_ICONS = {
+  mynaArrowLeftRight,
+  mynaArrowUp,
+  mynaCheck,
+  mynaCheckCircle,
+  mynaChevronDown,
+  mynaChevronRight,
+  mynaCog,
+  mynaEdit,
+  mynaFile,
+  mynaFilePlus,
+  mynaFolder,
+  mynaFolderPlus,
+  mynaHardDrive,
+  mynaLock,
+  mynaLogout,
+  mynaPlus,
+  mynaRefresh,
+  mynaServers,
+  mynaSpinner,
+  mynaTrash,
+  mynaX,
+  mynaXCircle,
+};
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>App</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));
@@ -0,0 +1,83 @@
+@import "tailwindcss";
+
+/* shadcn-style theme tokens (zinc placeholder palette — tweak freely).
+   The app follows the OS light/dark preference automatically. */
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.627 0.17 149.2);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --radius: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.92 0.004 286.32);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --success: oklch(0.696 0.17 149.2);
+    --border: oklch(1 0 0 / 12%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.552 0.016 285.938);
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  user-select: none;
+  cursor: default;
+}