@anchrd/gate-ui

The customizable admin UI for gate — login and permissions as a finished product. Shipped as a Vite/React source package, not a prebuilt bundle: your theme and your languages are applied at build time, which a finished dist could not do.

• Consumed through gate build, not imported — the gate CLI turns this source into static assets.
• Served same-origin by the gate worker — the built output is Workers Static Assets on @anchrd/gate-api, so the session cookie just works: no separate UI worker, no CORS.
• Themed, branded, and translated at build time — one stylesheet, one language catalog, decided by your gate.json.

Install

npm i @anchrd/gate-ui @anchrd/gate-sdk

You install gate-ui as source and gate-sdk for its gate build command. You never import from @anchrd/gate-ui in your own code — building it is the whole interface.

How it works

npx gate build       # reads gate.json → writes .gate/ui
wrangler deploy      # the gate worker serves .gate/ui same-origin

gate build applies your gate.json to the local gate-ui source and builds it. The output directory is where it belongs to you — never inside node_modules, which the next npm ci would wipe:

| gate-ui found in | output | |---|---| | node_modules/@anchrd/gate-ui (installed) | .gate/ui in your project root | | packages/ui (this workspace) | packages/ui/dist |

Point the worker's assets.directory at that output. Routing is automatic: Cloudflare's asset router serves existing files (/, /assets/*) first, the API routes keep priority, and a browser navigation to a client route falls back to index.html so deep-links and reloads work. The full worker-side wiring is in the @anchrd/gate-api README.

Branding — gate.json

Put a gate.json next to your package.json; gate build reads it. All fields are optional:

{
  "ui": {
    "theme": "./branding/theme.css",
    "logo": "./branding/logo.svg",
    "defaultLanguage": "en",
    "languages": { "de": "./i18n/de.json" }
  }
}

| Field | | |---|---| | ui.theme | A CSS file with your design tokens (:root { --primary: … }). Imported after the UI's own stylesheet, so your tokens win — no component is touched. | | ui.logo · ui.favicon | SVG files. Without a favicon the logo is reused. | | ui.languages | Language code → catalog file. Every file is checked in full against the UI's en.json (the key source). | | ui.defaultLanguage | Which language is built in. Defaults to "en". |

Three things are deliberate, and all fail at build time, never in front of a user:

• Unknown fields are rejected, not ignored — a typo (langauges) aborts the build naming the field.
• An incomplete translation aborts the build, naming the file and the missing keys. No silent fallback.
• No gate.json is fine — you get English and the stock tokens, the same output as if the feature did not exist.

English is the built-in catalog and cannot be removed; every other language is added through ui.languages. The full CLI reference lives in the @anchrd/gate-sdk README.

What the UI does

One screen per thing gate manages, gated by the signed-in user's own permissions — the UI hides what the API would refuse anyway:

| Area | | |---|---| | Sign in | Email/password plus any active provider (Google, Microsoft, Cloudflare Access), invitation acceptance, email verification, password reset and change. | | Principals | Humans and machines in one list; invite people, create machine keys, rename either. | | Roles | Roles and their permissions as a matrix of service → interface → function. | | Services | Registered services, their interfaces, and the functions each interface offers. | | Audit | The append-only "who did what, when" log, read-only. |

The running UI loads no config: it finds exactly one stylesheet and one language catalog, and supports a light/dark toggle. Everything else was decided by gate build.

Related

• @anchrd/gate-api — gate itself (the Cloudflare Worker that serves this UI).
• @anchrd/gate-sdk — the client and the gate CLI that builds this package.
• @anchrd/gate-contract — the shared wire formats.