bank20baht-cli 0.5.0 → 0.7.0

package/templates/angular/apps/shell/src/app/core/federation/manifest.ts

@@ -0,0 +1,37 @@
+/** One page a remote adds to the navigator. */
+type RemoteNav = { label: string; path: string }
+
+/** A microfrontend: where its code is, the URL prefix it owns and what it puts in the navigator. */
+type RemoteEntry = {
+  /** URL of its `remoteEntry.json`. */
+  entry: string
+  /** Group heading in the navigator. */
+  title: string
+  /** First URL segment; everything under it is routed by the remote's `./Routes`. */
+  base: string
+  nav: RemoteNav[]
+}
+
+export type Manifest = Record<string, RemoteEntry>
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value)
+
+const isNav = (value: unknown): value is RemoteNav =>
+  isRecord(value) && typeof value['label'] === 'string' && typeof value['path'] === 'string'
+
+const isEntry = (value: unknown): value is RemoteEntry =>
+  isRecord(value) &&
+  typeof value['entry'] === 'string' &&
+  typeof value['title'] === 'string' &&
+  typeof value['base'] === 'string' &&
+  /^[a-z0-9-]+$/.test(value['base']) &&
+  Array.isArray(value['nav']) &&
+  value['nav'].every(isNav)
+
+/** The manifest when every entry has the right shape, else null: a broken file must not half-load. */
+export const parseManifest = (json: unknown): Manifest | null => {
+  if (!isRecord(json)) return null
+  const entries = Object.entries(json)
+  return entries.every(([, value]) => isEntry(value)) ? (json as Manifest) : null
+}

package/templates/angular/apps/shell/src/app/core/federation/remote-loader.ts

@@ -0,0 +1,20 @@
+import { InjectionToken } from '@angular/core'
+import type { NativeFederationResult } from '@angular-architects/native-federation'
+import type { Manifest } from './manifest'
+
+export type RemoteLoader = NativeFederationResult['loadRemoteModule']
+
+/**
+ * The `loadRemoteModule` that `initFederation` resolved with in `main.ts`. Null when federation
+ * failed to start (or in unit tests); every remote route then shows the fallback page.
+ */
+export const REMOTE_LOADER = new InjectionToken<RemoteLoader | null>('REMOTE_LOADER', {
+  providedIn: 'root',
+  factory: () => null,
+})
+
+/** The remotes this host knows, as read at boot. */
+export const MANIFEST = new InjectionToken<Manifest>('MANIFEST', {
+  providedIn: 'root',
+  factory: () => ({}),
+})

package/templates/angular/apps/shell/src/app/core/federation/timeout.ts

@@ -0,0 +1,17 @@
+/** `promise`, or a rejection once `ms` pass without it settling. */
+export const withTimeout = <T>(promise: Promise<T>, ms: number): Promise<T> =>
+  new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error(`timed out after ${String(ms)} ms`))
+    }, ms)
+    promise.then(
+      (value) => {
+        clearTimeout(timer)
+        resolve(value)
+      },
+      (error: unknown) => {
+        clearTimeout(timer)
+        reject(error instanceof Error ? error : new Error(String(error)))
+      },
+    )
+  })

package/templates/angular/apps/shell/src/app/modules/home/home.component.ts.hbs

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { Router } from '@angular/router'
+import { BAHT_UI } from 'bank20baht-ui-angular'
+import { MANIFEST } from '../../core/federation/remote-loader'
+
+/** The landing page: one card per remote in the federation manifest. */
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BAHT_UI],
+  selector: 'shell-home',
+  styles: `
+    .remotes {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      gap: var(--baht-space-4);
+    }
+  `,
+  template: `
+    <div class="app-page">
+      <baht-page-header
+        heading="{{name}}"
+        description="A Native Federation host. Each card is a remote, loaded at runtime."
+      ></baht-page-header>
+      <div class="remotes">
+        @for (remote of remotes; track remote.base) {
+          <baht-card [heading]="remote.title">
+            <baht-button variant="secondary" (click)="go(remote.base)">Open</baht-button>
+          </baht-card>
+        } @empty {
+          <baht-empty-state
+            message="No remotes yet"
+            hint="Add one with bahtui g remote, then restart bun run dev."
+          ></baht-empty-state>
+        }
+      </div>
+    </div>
+  `,
+})
+export class HomeComponent {
+  private readonly router = inject(Router)
+  protected readonly remotes = Object.values(inject(MANIFEST))
+
+  protected go(base: string): void {
+    void this.router.navigateByUrl(`/${base}`)
+  }
+}

package/templates/angular/apps/shell/src/app/modules/unavailable/unavailable.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import { BAHT_UI } from 'bank20baht-ui-angular'
+
+/**
+ * Shown when a remote's routes cannot be loaded over Native Federation, and for unknown URLs.
+ * The route's `data` sets the copy; all this page can offer is another try.
+ */
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BAHT_UI],
+  selector: 'shell-unavailable',
+  styles: `
+    :host {
+      display: grid;
+      place-content: center;
+      min-height: 60dvh;
+      padding: var(--baht-space-4);
+    }
+    baht-error-state {
+      max-width: 440px;
+    }
+  `,
+  template: `
+    <baht-error-state
+      [attr.heading]="heading()"
+      [attr.message]="message()"
+      retry-label="Try again"
+      (bahtRetry)="retry()"
+    ></baht-error-state>
+  `,
+})
+export class UnavailableComponent {
+  readonly heading = input('Something is unavailable')
+  readonly message = input('This page could not be loaded. Try again in a moment.')
+
+  protected retry(): void {
+    window.location.reload()
+  }
+}

package/templates/angular/apps/shell/src/bootstrap.ts

@@ -0,0 +1,25 @@
+import type { ApplicationRef } from '@angular/core'
+import { bootstrapApplication } from '@angular/platform-browser'
+import { appConfig } from './app/app.config'
+import { App } from './app/app'
+import type { Manifest } from './app/core/federation/manifest'
+import { MANIFEST, REMOTE_LOADER, type RemoteLoader } from './app/core/federation/remote-loader'
+
+export async function bootstrap(
+  loadRemoteModule: RemoteLoader | null,
+  manifest: Manifest,
+): Promise<ApplicationRef> {
+  // Registers the <baht-*> custom elements in its own chunk; they upgrade in place once it
+  // lands. Shared with the remotes, so each tag is defined once.
+  void import('bank20baht-ui')
+
+  const config = appConfig(manifest)
+  return bootstrapApplication(App, {
+    ...config,
+    providers: [
+      ...config.providers,
+      { provide: REMOTE_LOADER, useValue: loadRemoteModule },
+      { provide: MANIFEST, useValue: manifest },
+    ],
+  })
+}

package/templates/angular/apps/shell/src/environments/environment.development.ts

@@ -0,0 +1,10 @@
+import type { Manifest } from '../app/core/federation/manifest'
+
+/** The remotes on their dev servers (`bun run dev`). `bahtui g remote` adds an entry. */
+const remotes: Manifest = {
+  // bahtui:remotes
+}
+
+export const federation: string | Manifest = remotes
+
+export const federationFallback: Manifest = remotes

package/templates/angular/apps/shell/src/environments/environment.ts

@@ -0,0 +1,10 @@
+import type { Manifest } from '../app/core/federation/manifest'
+
+/**
+ * Where the remotes load from: `public/federation.manifest.json`, read at runtime, so a remote can
+ * be added or repointed on the web server with no host build.
+ */
+export const federation: string | Manifest = '/federation.manifest.json'
+
+/** What the host boots with when that file cannot be fetched: no remotes, the home page only. */
+export const federationFallback: Manifest = {}

package/templates/angular/apps/shell/src/index.html.hbs

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{name}}</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/templates/angular/apps/shell/src/main.ts

@@ -0,0 +1,43 @@
+import { initFederation, type NativeFederationResult } from '@angular-architects/native-federation'
+import { parseManifest, type Manifest } from './app/core/federation/manifest'
+import { withTimeout } from './app/core/federation/timeout'
+import { federation, federationFallback } from './environments/environment'
+
+/** How long the shell waits for the manifest, then for the remotes, before booting without them. */
+const BOOT_TIMEOUT_MS = 8_000
+
+// Only federation starts here: shared packages (@angular/*, bank20baht-ui) resolve through the
+// import map once initFederation is done, so everything else loads from ./bootstrap. A failed or
+// slow start still boots the shell; the remotes' pages then show the fallback.
+const manifest = async (): Promise<Manifest> => {
+  if (typeof federation !== 'string') return federation
+  try {
+    const res = await fetch(federation, { signal: AbortSignal.timeout(BOOT_TIMEOUT_MS) })
+    if (!res.ok) throw new Error(`federation manifest: HTTP ${String(res.status)}`)
+    const parsed = parseManifest(await res.json())
+    if (parsed === null) throw new Error('federation manifest: an entry has the wrong shape')
+    return parsed
+  } catch (err) {
+    console.error('federation manifest failed to load, using the built-in one', err)
+    return federationFallback
+  }
+}
+
+const start = async () => {
+  const remotes = await manifest()
+  const entries = Object.fromEntries(
+    Object.entries(remotes).map(([name, remote]) => [name, remote.entry]),
+  )
+  let nf: NativeFederationResult | null = null
+  try {
+    nf = await withTimeout(initFederation(entries), BOOT_TIMEOUT_MS)
+  } catch (err) {
+    console.error(err)
+  }
+  const { bootstrap } = await import('./bootstrap')
+  await bootstrap(nf?.loadRemoteModule ?? null, remotes)
+}
+
+start().catch((err: unknown) => {
+  console.error(err)
+})

package/templates/angular/apps/shell/src/styles.css

@@ -0,0 +1,19 @@
+/* bank20baht-ui's tokens.css comes first (angular.json); this file only sets the page up. */
+html,
+body {
+  margin: 0;
+  min-height: 100dvh;
+  background: var(--baht-color-bg);
+  color: var(--baht-color-text);
+  font-family: var(--baht-font-family);
+}
+
+/* The width every routed page keeps to inside the shell. */
+.app-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--baht-space-5);
+  box-sizing: border-box;
+  max-width: 1200px;
+  padding: var(--baht-space-5);
+}

package/templates/angular/apps/shell/tsconfig.app.json

@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}

package/templates/angular/apps/shell/tsconfig.federation.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["src/**/*.d.ts"]
+}

package/templates/angular/apps/shell/tsconfig.json.hbs

@@ -0,0 +1,39 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "verbatimModuleSyntax": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "paths": {
+      "@{{name}}/kit": ["../../packages/kit/src/index.ts"]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictTemplates": true,
+    "strictInputAccessModifiers": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/templates/angular/apps/shell/tsconfig.spec.json

@@ -0,0 +1,9 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}

package/templates/angular/bahtui.json

@@ -0,0 +1,6 @@
+{
+  "apps": { "web": "apps/shell", "api": "apps/server" },
+  "libsDir": "packages",
+  "frontend": "angular",
+  "backend": "elysia"
+}

package/templates/angular/eslint.config.ts.hbs

@@ -0,0 +1,28 @@
+import { defineConfig } from 'eslint/config'
+
+import { angular, bahtui, base } from 'bank20baht-strict/eslint'
+
+/** The host, its remotes, and the kit they all compile in. `bahtui g remote` adds a line. */
+const WEB = [
+  'apps/shell/src/**',
+  'packages/kit/src/**',
+  // bahtui:remotes
+]
+
+// Every rule is an error. Add app overrides below, each with a reason:
+//   // eslint-disable-next-line <rule> -- <why>
+export default defineConfig([
+  ...base,
+  ...angular({
+    files: WEB,
+    restrictedImports: [
+      {
+        name: 'server',
+        allowTypeImports: true,
+        message:
+          'The web apps share the server only as types (the eden App type); no server runtime code in a bundle.',
+      },
+    ],
+  }),
+  ...bahtui({ files: WEB, tokenFiles: ['apps/shell/src/styles.css'] }),
+])

package/templates/angular/knip.ts

@@ -0,0 +1,27 @@
+import { knip } from 'bank20baht-strict/knip'
+
+const SRC = ['src/**/*.ts']
+
+/** A Native Federation remote: its entry is the routes module federation.config.mjs exposes. */
+const remote = (name: string) => ({ entry: [`src/app/${name}.routes.ts`], project: SRC })
+
+/** A workspace tested with `bun test`: the tests are its entries. */
+const tested = { entry: ['test/**/*.test.ts'], project: [...SRC, 'test/**/*.ts'] }
+
+export default knip({
+  ignoreDependencies: [
+    // The runtime loader behind @angular-architects/native-federation; nothing imports it directly.
+    '@softarc/native-federation-orchestrator',
+    // Reached through the kit; listed in each app so federation shares it as one singleton.
+    'ngx-eden',
+    // Angular's compiler emits tslib helpers (importHelpers).
+    'tslib',
+  ],
+  workspaces: {
+    '.': { entry: ['scripts/*.ts'], project: ['scripts/**/*.ts'] },
+    'apps/server': tested,
+    'apps/shell': { project: SRC },
+    'packages/kit': tested,
+    // bahtui:remotes
+  },
+})

package/templates/angular/package.json.hbs

@@ -0,0 +1,52 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "type": "module",
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "bun run scripts/dev.ts",
+    "build": "bun run scripts/each.ts build",
+    "typecheck": "tsc -p tsconfig.json && bun run scripts/each.ts typecheck",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "knip": "knip",
+    "madge": "madge --circular --extensions ts,tsx --exclude '(^|/)(dist|node_modules|\\.angular)/' apps packages scripts",
+    "deps": "depcruise apps packages scripts --config .dependency-cruiser.mjs",
+    "dup": "jscpd",
+    "audit": "bun audit --audit-level=high",
+    "secrets": "gitleaks git --redact --no-banner",
+    "test": "bun run scripts/each.ts test:coverage",
+    "check:fast": "bun run lint && bun run format:check && bun run typecheck && bun run madge && bun run deps",
+    "check": "bun run check:fast && bun run knip && bun run dup && bun run build && bun run test",
+    "prepare": "husky"
+  },
+  "prettier": "bank20baht-strict/prettier",
+  "packageManager": "bun@1.3.14",
+  "devDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@eslint/css": "^2.0.0",
+    "@eslint/js": "^10.0.1",
+    "@types/bun": "^1.3.0",
+    "angular-eslint": "22.5.0",
+    "bank20baht-strict": "0.0.6",
+    "dependency-cruiser": "^18.3.1",
+    "eslint": "^10.10.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-sonarjs": "^4.2.1",
+    "husky": "^9.1.7",
+    "jiti": "^2.6.1",
+    "jscpd": "^5.3.0",
+    "knip": "^6.35.1",
+    "lint-staged": "^17.5.1",
+    "madge": "^8.0.0",
+    "prettier": "^3.9.6",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.70.0"
+  }
+}

package/templates/angular/packages/kit/package.json.hbs

@@ -0,0 +1,27 @@
+{
+  "name": "{{name}}-kit",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "What the host and its remotes share: the typed API client and error text. Imported as @{{name}}/kit through a tsconfig path, so each app compiles its own copy.",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "pretypecheck": "bun run --filter server build:types",
+    "test": "bun test",
+    "test:coverage": "bun test --coverage"
+  },
+  "dependencies": {
+    "@angular/core": "^22.2.0",
+    "ngx-eden": "^0.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.0",
+    "server": "workspace:*",
+    "typescript": "~6.0.2"
+  }
+}

package/templates/angular/packages/kit/src/api.ts

@@ -0,0 +1,21 @@
+import { Injectable, InjectionToken, inject, isDevMode } from '@angular/core'
+import { createEden } from 'ngx-eden'
+import type { App } from 'server'
+
+/**
+ * Where the API lives. In dev the Angular servers run on :4200 and up and Elysia on :3000;
+ * deployed, one web server serves the apps and proxies `/api` on the same origin.
+ */
+export const API_BASE = new InjectionToken<string>('API_BASE', {
+  providedIn: 'root',
+  factory: () => (isDevMode() ? 'http://localhost:3000' : globalThis.location.origin),
+})
+
+/**
+ * The typed client of the Elysia server: `inject(Api).client.api.hello.get()`.
+ * Types come from `apps/server/dist/types` (`bun run --filter server build:types`).
+ */
+@Injectable({ providedIn: 'root' })
+export class Api {
+  readonly client = createEden<App>({ baseUrl: inject(API_BASE) })
+}

package/templates/angular/packages/kit/src/errors.ts

@@ -0,0 +1,28 @@
+const FALLBACK = 'Something went wrong. Try again.'
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null
+
+/** Where the response body sits: `value` from `unwrap()`, `error` on an `HttpErrorResponse`. */
+const bodyOf = (error: Record<string, unknown>): Record<string, unknown> => {
+  for (const key of ['value', 'error']) {
+    const body = error[key]
+    if (isRecord(body)) return body
+  }
+  return error
+}
+
+/**
+ * The sentence to show for a failed API call: the server's `{ message }` or Elysia's validator
+ * `{ summary }`, as ngx-eden's `unwrap()` or a resource's `error()` carries it.
+ */
+export const describeError = (error: unknown): string => {
+  if (!isRecord(error)) return FALLBACK
+  if (error['status'] === 0) return 'The server cannot be reached.'
+  const body = bodyOf(error)
+  for (const key of ['message', 'summary']) {
+    const text = body[key]
+    if (typeof text === 'string' && text !== '') return text
+  }
+  return FALLBACK
+}

package/templates/angular/packages/kit/src/index.ts

@@ -0,0 +1,2 @@
+export { API_BASE, Api } from './api'
+export { describeError } from './errors'

package/templates/angular/packages/kit/test/errors.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from 'bun:test'
+
+import { describeError } from '../src/errors'
+
+describe('describeError', () => {
+  test('reads the body ngx-eden wraps', () => {
+    expect(describeError({ status: 404, value: { message: 'Not found' } })).toBe('Not found')
+    expect(describeError({ status: 422, value: { summary: 'Expected string' } })).toBe(
+      'Expected string',
+    )
+  })
+
+  test('reads the body of an HttpErrorResponse', () => {
+    expect(
+      describeError({ status: 404, error: { message: 'Gone' }, message: 'Http failure' }),
+    ).toBe('Gone')
+    expect(describeError({ status: 0, message: 'Http failure response: 0 Unknown Error' })).toBe(
+      'The server cannot be reached.',
+    )
+  })
+
+  test('reads a plain Error and falls back', () => {
+    expect(describeError(new Error('boom'))).toBe('boom')
+    expect(describeError({ status: 0 })).toBe('The server cannot be reached.')
+    expect(describeError({ status: 500, value: 'oops' })).toBe('Something went wrong. Try again.')
+    expect(describeError(null)).toBe('Something went wrong. Try again.')
+  })
+})

package/templates/angular/packages/kit/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM"],
+    "types": ["bun"],
+    "experimentalDecorators": true
+  },
+  "include": ["src", "test"]
+}

package/templates/create/README.md.hbs

@@ -13,7 +13,7 @@ bun run dev        # web on :5173, api on :3001
 ## Layout (DDD taxonomy)
 
 ```
-apps/web                 React 19 + Vite
+apps/web                 React 19 + Vite on bank20baht-ui (import each <baht-*> you use in src/main.tsx)
 apps/api                 Elysia — exports `type App`, the Eden type anchor
 libs/shared/eden         treaty<App> — the ONE typed http client
 libs/domain/<d>/model    (later) entities + form JSON, framework-free

package/templates/create/_gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
+coverage/
 *.local
 *.tsbuildinfo
 .DS_Store

package/templates/create/apps/web/index.html.hbs

@@ -4,6 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{name}}</title>
+    <script>
+      // apply the saved <baht-theme-toggle> choice before paint (no flash)
+      try {
+        var t = localStorage.getItem('baht-theme');
+        if (t === 'light' || t === 'dark')
+          document.documentElement.setAttribute('data-baht-theme', t);
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/templates/create/apps/web/package.json.hbs

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@{{name}}/eden": "workspace:*",
+    "bank20baht-ui": "^0.19.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },