@fntio/infra-client-plugin-ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,93 @@
+Elastic License 2.0
+
+URL: https://www.elastic.co/licensing/elastic-license
+
+## Acceptance
+
+By using the software, you agree to all of the terms and conditions below.
+
+## Copyright License
+
+The licensor grants you a non-exclusive, royalty-free, worldwide,
+non-sublicensable, non-transferable license to use, copy, distribute, make
+available, and prepare derivative works of the software, in each case subject to
+the limitations and conditions below.
+
+## Limitations
+
+You may not provide the software to third parties as a hosted or managed
+service, where the service provides users with access to any substantial set of
+the features or functionality of the software.
+
+You may not move, change, disable, or circumvent the license key functionality
+in the software, and you may not remove or obscure any functionality in the
+software that is protected by the license key.
+
+You may not alter, remove, or obscure any licensing, copyright, or other notices
+of the licensor in the software. Any use of the licensor’s trademarks is subject
+to applicable law.
+
+## Patents
+
+The licensor grants you a license, under any patent claims the licensor can
+license, or becomes able to license, to make, have made, use, sell, offer for
+sale, import and have imported the software, in each case subject to the
+limitations and conditions in this license. This license does not cover any
+patent claims that you cause to be infringed by modifications or additions to
+the software. If you or your company make any written claim that the software
+infringes or contributes to infringement of any patent, your patent license for
+the software granted under these terms ends immediately. If your company makes
+such a claim, your patent license ends immediately for work on behalf of your
+company.
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you
+also gets a copy of these terms.
+
+If you modify the software, you must include in any modified copies of the
+software prominent notices stating that you have modified the software.
+
+## No Other Rights
+
+These terms do not imply any licenses other than those expressly granted in
+these terms.
+
+## Termination
+
+If you use the software in violation of these terms, such use is not licensed,
+and your licenses will automatically terminate. If the licensor provides you
+with a notice of your violation, and you cease all violation of this license no
+later than 30 days after you receive that notice, your licenses will be
+reinstated retroactively. However, if you violate these terms after such
+reinstatement, any additional violation of these terms will cause your licenses
+to terminate automatically and permanently.
+
+## No Liability
+
+*As far as the law allows, the software comes as is, without any warranty or
+condition, and the licensor will not be liable to you for any damages arising
+out of these terms or the use or nature of the software, under any kind of
+legal claim.*
+
+## Definitions
+
+The **licensor** is the entity offering these terms, and the **software** is the
+software the licensor makes available under these terms, including any portion
+of it.
+
+**you** refers to the individual or entity agreeing to these terms.
+
+**your company** is any legal entity, sole proprietorship, or other kind of
+organization that you work for, plus all organizations that have control over,
+are under the control of, or are under common control with that
+organization. **control** means ownership of substantially all the assets of an
+entity, or the power to direct its management and policies by vote, contract, or
+otherwise. Control can be direct or indirect.
+
+**your licenses** are all the licenses granted to you for the software under
+these terms.
+
+**use** means anything you do with the software requiring one of your licenses.
+
+**trademark** means trademarks, service marks, and similar rights.

package/README.md

@@ -1,3 +1,105 @@
-# Temporary Holding Version
+# @fntio/infra-client-plugin-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Theme helpers, the portal's component styles, and an HTTP interceptor for Angular plugins.
+Private until publishing is enabled.
+
+## Theme
+
+```ts
+import { applyPluginTheme, pluginThemeCss } from "@fntio/infra-client-plugin-ui";
+```
+
+Re-exports of the SDK's browser entry for plugins that only want the tokens; the rules are
+documented there (SDK README, "Browser SDK", Theme). `connectToInfraClient` already applies
+the theme on `init` and `themeChanged`.
+
+## Components
+
+Tokens alone leave every plugin author re-inventing buttons, tables and headers, and landing somewhere
+close but visibly foreign. These classes reproduce the portal's shipped control scale, type roles and
+surface treatments, so a plugin page reads as part of the app without copying anything from it.
+
+```ts
+import { applyPluginUi } from "@fntio/infra-client-plugin-ui";
+
+applyPluginUi(document);   // once, alongside connectToInfraClient()
+```
+
+`applyPluginUi` also sets the page itself up: a see-through background (the portal's own surface shows
+behind the frame, in light and dark), no body margin, and the portal's text colour and typeface. Leave
+`html` and `body` without a background of your own; painting `var(--background)` there gives a flat
+slab that does not match the rest of the portal. Your own rules still win over these defaults.
+
+```html
+<div class="ic-card">
+  <div class="ic-card-head">
+    <h2 class="ic-card-title">3 parameters</h2>
+    <span class="ic-caption">/myapp/prod</span>
+  </div>
+  <div class="ic-table-wrap">
+    <table class="ic-table">…</table>
+  </div>
+</div>
+```
+
+| Class | For |
+| --- | --- |
+| `ic-page`, `ic-header`, `ic-actions` | page scaffolding |
+| `ic-title`, `ic-subtitle`, `ic-card-title`, `ic-caption`, `ic-muted`, `ic-mono` | the portal's type roles |
+| `ic-card`, `ic-card-head` | a panel |
+| `ic-table`, `ic-table-wrap` | a table, scrolling in its own box so the frame never scrolls the portal sideways |
+| `ic-btn` + `ic-btn-primary\|secondary\|outline\|ghost\|danger`, `ic-btn-sm\|lg` | buttons, on the 24/32/36px control scale inputs share |
+| `ic-field`, `ic-label`, `ic-input`, `ic-select` | forms |
+| `ic-badge` + `ic-badge-brand\|green\|amber\|red` | status pills; keep plain `ic-badge` for a type or a label, and colour for a state |
+| `ic-empty`, `ic-error`, `ic-skeleton` | the three states every page needs |
+
+Every value resolves from a theme token, so a customer's branding and the viewer's light or dark choice
+carry through, and a test fails if a colour literal creeps in. `pluginUiCss()` returns the stylesheet for
+a plugin that manages its own document.
+
+## Angular
+
+```ts
+import { bootstrapApplication } from "@angular/platform-browser";
+import { provideHttpClient, withInterceptors } from "@angular/common/http";
+import { InjectionToken } from "@angular/core";
+import { connectToInfraClient, PluginContext } from "@fntio/infra-client-plugin-sdk/browser";
+import { createPluginInterceptor } from "@fntio/infra-client-plugin-ui/angular";
+
+export const PLUGIN = new InjectionToken<PluginContext>("infra-client plugin");
+
+const context = await connectToInfraClient();
+await bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: PLUGIN, useValue: context },
+    provideHttpClient(withInterceptors([createPluginInterceptor(context)])),
+  ],
+});
+```
+
+`createPluginInterceptor(context)` attaches the current bearer token to requests whose URL
+starts with `context.plugin.apiBaseUrl` (build them with `context.api.url(path)`), leaves
+other URLs untouched, and after an authentication-layer 401 renews through the host and
+retries once under the SDK's shared rule (`canRetryAfterUnauthorized`): never after 403, 5xx
+or a timeout, never with a streamed body, never for an account in the request path that is no longer in
+`context.accounts()`, never with the same token again. Like `context.api`, a 403 asks the host to refresh discovery unless
+`accessRefreshOnForbidden: false`. The match is a plain prefix test, so absolute URLs are not
+tokenised: place this interceptor after any base-URL-rewriting one. It needs only
+`plugin`, `accounts`, `session` and `requestAccessRefresh` from the context
+(`PluginInterceptorContext`).
+
+The function is typed structurally against `HttpInterceptorFn`, so this entry depends on
+`rxjs` only and no Angular version is pinned by the package;
+`src/__tests__/angular-typecheck.ts` holds the shape to the real Angular type at
+`tsc --noEmit` time.
+
+## Develop
+
+```
+cd packages/infra-client-plugin-ui
+npx tsc --noEmit && npm test
+```
+
+Same arrangement as the CDK package: checks resolve the SDK from `src/`, the build from
+`dist/` (`npm run build:plugins` at the repository root). The Angular packages are dev
+dependencies for the type check only.

package/dist/angular/index.d.ts

@@ -0,0 +1,26 @@
+import { PluginContext } from "@fntio/infra-client-plugin-sdk/browser";
+import { Observable } from "rxjs";
+export interface PluginHttpRequestLike<Self> {
+    readonly url: string;
+    readonly body: unknown;
+    clone(update: {
+        setHeaders: Record<string, string>;
+    }): Self;
+}
+export type PluginHttpHandlerLike<Request, Event> = (request: Request) => Observable<Event>;
+export type PluginHttpInterceptor = <Request extends PluginHttpRequestLike<Request>, Event>(request: Request, next: PluginHttpHandlerLike<Request, Event>) => Observable<Event>;
+/** What the interceptor needs from a `PluginContext`. */
+export type PluginInterceptorContext = Pick<PluginContext, "plugin" | "accounts" | "session" | "requestAccessRefresh">;
+export interface PluginInterceptorOptions {
+    /** Requests whose URL starts here get the token; default `context.plugin.apiBaseUrl`. */
+    readonly apiBaseUrl?: string;
+    /** Ask the host to refresh discovery after a 403, as `context.api` does. Default true. */
+    readonly accessRefreshOnForbidden?: boolean;
+}
+/** Attaches the current bearer token to requests whose URL starts with the plugin's API base
+ *  (`context.api.url(path)` builds such URLs; absolute URLs are not matched, so place this after
+ *  any base-URL-rewriting interceptor) and retries once after an authentication-layer 401 under
+ *  the same shared rules as `context.api` (`shouldRefreshAfterUnauthorized`, then
+ *  `canRetryAfterUnauthorized`). Other URLs pass through — and after the host ends the session
+ *  `context.session.token()` rejects, so no request leaves on a dead token. */
+export declare function createPluginInterceptor(context: PluginInterceptorContext, options?: PluginInterceptorOptions): PluginHttpInterceptor;

package/dist/angular/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPluginInterceptor = createPluginInterceptor;
+// An Angular-shaped HTTP interceptor without an Angular import: it is typed structurally against
+// `HttpInterceptorFn`, so this entry needs only rxjs at runtime and any supported Angular version can
+// hand it to `withInterceptors`. `src/__tests__/angular-typecheck.ts` holds the shape to the real type.
+const browser_1 = require("@fntio/infra-client-plugin-sdk/browser");
+const rxjs_1 = require("rxjs");
+function statusOf(error) {
+    return typeof error === "object" && error !== null && typeof error.status === "number"
+        ? error.status
+        : undefined;
+}
+/** Attaches the current bearer token to requests whose URL starts with the plugin's API base
+ *  (`context.api.url(path)` builds such URLs; absolute URLs are not matched, so place this after
+ *  any base-URL-rewriting interceptor) and retries once after an authentication-layer 401 under
+ *  the same shared rules as `context.api` (`shouldRefreshAfterUnauthorized`, then
+ *  `canRetryAfterUnauthorized`). Other URLs pass through — and after the host ends the session
+ *  `context.session.token()` rejects, so no request leaves on a dead token. */
+function createPluginInterceptor(context, options = {}) {
+    const base = (options.apiBaseUrl ?? context.plugin.apiBaseUrl).replace(/\/+$/, "");
+    const inScope = (url) => url === base || url.startsWith(`${base}/`) || url.startsWith(`${base}?`);
+    const fail = (error) => {
+        if (statusOf(error) === 403 && options.accessRefreshOnForbidden !== false)
+            context.requestAccessRefresh("forbidden");
+        return (0, rxjs_1.throwError)(() => error);
+    };
+    return (request, next) => {
+        if (!inScope(request.url))
+            return next(request);
+        // Always against the plugin's own API root: a narrowed `apiBaseUrl` option may itself contain the account.
+        const replayable = () => ({
+            body: request.body, account: (0, browser_1.pluginRequestAccount)(context.plugin.apiBaseUrl, request.url), permitted: context.accounts(),
+        });
+        const send = (token) => next(request.clone({ setHeaders: { Authorization: `Bearer ${token}` } }));
+        return (0, rxjs_1.from)(context.session.token()).pipe((0, rxjs_1.switchMap)((token) => send(token).pipe((0, rxjs_1.catchError)((error) => {
+            if (statusOf(error) !== 401 || !(0, browser_1.shouldRefreshAfterUnauthorized)(replayable()))
+                return fail(error);
+            return (0, rxjs_1.from)(context.session.refresh("unauthorized")).pipe((0, rxjs_1.switchMap)((session) => (0, browser_1.canRetryAfterUnauthorized)({ ...replayable(), rejectedToken: token, retryToken: session.token })
+                ? send(session.token).pipe((0, rxjs_1.catchError)(fail))
+                : fail(error)));
+        }))));
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export declare const PLUGIN_UI_VERSION = "0.2.0";
+export { applyPluginUi, PLUGIN_UI_STYLE_ID, pluginUiCss } from "./styles";
+export type { PluginUiDocument, PluginUiNode, PluginUiStyleElement } from "./styles";
+export { applyPluginTheme, isPluginThemeToken, isSafeCssValue, PLUGIN_THEME_STYLE_ID, PLUGIN_THEME_TOKENS, pluginThemeCss, } from "@fntio/infra-client-plugin-sdk/browser";
+export type { PluginTheme, PluginThemeDocument, PluginThemeToken, PluginThemeTokens } from "@fntio/infra-client-plugin-sdk/browser";

package/dist/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginThemeCss = exports.PLUGIN_THEME_TOKENS = exports.PLUGIN_THEME_STYLE_ID = exports.isSafeCssValue = exports.isPluginThemeToken = exports.applyPluginTheme = exports.pluginUiCss = exports.PLUGIN_UI_STYLE_ID = exports.applyPluginUi = exports.PLUGIN_UI_VERSION = void 0;
+exports.PLUGIN_UI_VERSION = "0.2.0";
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "applyPluginUi", { enumerable: true, get: function () { return styles_1.applyPluginUi; } });
+Object.defineProperty(exports, "PLUGIN_UI_STYLE_ID", { enumerable: true, get: function () { return styles_1.PLUGIN_UI_STYLE_ID; } });
+Object.defineProperty(exports, "pluginUiCss", { enumerable: true, get: function () { return styles_1.pluginUiCss; } });
+var browser_1 = require("@fntio/infra-client-plugin-sdk/browser");
+Object.defineProperty(exports, "applyPluginTheme", { enumerable: true, get: function () { return browser_1.applyPluginTheme; } });
+Object.defineProperty(exports, "isPluginThemeToken", { enumerable: true, get: function () { return browser_1.isPluginThemeToken; } });
+Object.defineProperty(exports, "isSafeCssValue", { enumerable: true, get: function () { return browser_1.isSafeCssValue; } });
+Object.defineProperty(exports, "PLUGIN_THEME_STYLE_ID", { enumerable: true, get: function () { return browser_1.PLUGIN_THEME_STYLE_ID; } });
+Object.defineProperty(exports, "PLUGIN_THEME_TOKENS", { enumerable: true, get: function () { return browser_1.PLUGIN_THEME_TOKENS; } });
+Object.defineProperty(exports, "pluginThemeCss", { enumerable: true, get: function () { return browser_1.pluginThemeCss; } });

package/dist/styles.d.ts

@@ -0,0 +1,21 @@
+export declare const PLUGIN_UI_STYLE_ID = "infra-client-plugin-ui";
+/** The stylesheet, for a plugin that manages its own document or server-renders. */
+export declare function pluginUiCss(): string;
+export interface PluginUiNode {
+    textContent: string | null;
+}
+export interface PluginUiStyleElement extends PluginUiNode {
+    id: string;
+}
+/** The slice of `Document` this touches; a real `Document` satisfies it. `appendChild` takes the wider
+ *  node type on purpose — the DOM's own signature accepts any Node, and a narrower one would not match. */
+export interface PluginUiDocument {
+    readonly head: {
+        appendChild(node: PluginUiNode): unknown;
+    };
+    getElementById(id: string): PluginUiNode | null;
+    createElement(tagName: "style"): PluginUiStyleElement;
+}
+/** Puts the component styles in the document, once. Call it alongside the SDK's theme application:
+ *  the theme supplies the values, this supplies the shapes. */
+export declare function applyPluginUi(doc: PluginUiDocument): void;

package/dist/styles.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLUGIN_UI_STYLE_ID = void 0;
+exports.pluginUiCss = pluginUiCss;
+exports.applyPluginUi = applyPluginUi;
+/** The portal's own look, as plain CSS classes a plugin of any framework can use.
+ *
+ *  A plugin frame is handed the portal's colour and typography tokens, but tokens alone leave every
+ *  author re-inventing buttons, tables and headers — and landing somewhere close but visibly foreign.
+ *  These classes reproduce the shipped control scale (24/32/36px), type roles and surface treatments so a
+ *  plugin page reads as part of the app without copying anything.
+ *
+ *  Every value resolves from a theme token, so a customer's branding and the viewer's light/dark choice
+ *  carry through. The `ic-` prefix keeps them out of a plugin's own namespace. */
+const CSS = `
+/* The page itself: see-through so the portal's own surface shows behind the frame, in the portal's
+   text colour and type. :where() keeps these at zero specificity, so a plugin's own rules win. */
+:where(html, body) { background: transparent; }
+:where(body) { margin: 0; color: var(--surface-foreground); font-family: var(--font-sans, system-ui, sans-serif); font-size: 0.875rem; line-height: 1.5; }
+
+.ic-page { display: flex; flex-direction: column; gap: 1rem; color: var(--surface-foreground); font-family: var(--font-sans, system-ui, sans-serif); font-size: 0.875rem; line-height: 1.5; }
+.ic-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+.ic-title { margin: 0; font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; color: var(--surface-foreground); }
+.ic-card-title { margin: 0; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; color: var(--surface-foreground); }
+.ic-subtitle { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--surface-foreground); }
+.ic-muted { color: var(--muted-foreground); }
+.ic-caption { font-size: 0.75rem; color: var(--muted-foreground); }
+.ic-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-variant-numeric: tabular-nums; }
+.ic-actions { display: flex; align-items: center; gap: 0.5rem; }
+
+.ic-card { border: 1px solid var(--border); border-radius: var(--radius-lg, 0.75rem); background: var(--card-bg, transparent); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
+.ic-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+
+/* Wide content scrolls in its own box; a plugin frame must never scroll the portal sideways. */
+.ic-table-wrap { overflow-x: auto; }
+.ic-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
+.ic-table th { text-align: left; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-foreground); padding: 0 0.75rem 0.5rem; white-space: nowrap; }
+.ic-table td { padding: 0.55rem 0.75rem; border-top: 1px solid var(--border); vertical-align: middle; }
+.ic-table tbody tr:hover { background: var(--state-hover, transparent); }
+.ic-table td:last-child, .ic-table th:last-child { text-align: right; }
+
+/* Control scale shared with the portal: sm 24px, md 32px, lg 36px. */
+.ic-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; height: 2rem; padding: 0 0.75rem; border: 0; border-radius: var(--radius, 0.5rem); font: inherit; font-size: 0.875rem; cursor: pointer; transition: background-color 120ms var(--ease-standard, ease); }
+.ic-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
+.ic-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ic-btn-sm { height: 1.5rem; padding: 0 0.625rem; font-size: 0.75rem; font-weight: 500; }
+.ic-btn-lg { height: 2.25rem; padding: 0 1rem; }
+.ic-btn-primary { background: var(--brand-primary); color: var(--brand-foreground); }
+.ic-btn-primary:hover:not(:disabled) { background: var(--brand-primary-hover, var(--brand-primary)); }
+/* Alpha fills, like the portal's: they tune independently of the accent scale and survive rebranding. */
+.ic-btn-secondary { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); color: var(--brand-muted-foreground, var(--brand-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 25%, transparent); }
+.ic-btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); }
+.ic-btn-outline { background: transparent; color: var(--surface-foreground); font-weight: 500; box-shadow: inset 0 0 0 1px var(--border-strong); }
+.ic-btn-outline:hover:not(:disabled) { background: var(--muted, var(--state-hover)); }
+.ic-btn-ghost { background: transparent; color: var(--muted-foreground); }
+.ic-btn-ghost:hover:not(:disabled) { background: var(--muted, var(--state-hover)); }
+.ic-btn-danger { background: transparent; color: var(--danger); font-weight: 500; box-shadow: inset 0 0 0 1px var(--border-strong); }
+.ic-btn-danger:hover:not(:disabled) { background: var(--danger-muted, transparent); }
+
+.ic-field { display: flex; flex-direction: column; gap: 0.25rem; }
+.ic-label { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
+.ic-input, .ic-select { height: 2.25rem; padding: 0 0.5rem; font: inherit; font-size: 0.875rem; color: var(--surface-foreground); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius, 0.5rem); }
+.ic-input:focus-visible, .ic-select:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
+
+.ic-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.6875rem; white-space: nowrap; background: var(--card-bg); color: var(--muted-foreground); }
+.ic-badge-brand { background: color-mix(in srgb, var(--brand-primary) 14%, transparent); color: var(--brand-muted-foreground, var(--brand-primary)); }
+.ic-badge-green { background: var(--success-muted, transparent); color: var(--success); }
+.ic-badge-amber { background: var(--warning-muted, transparent); color: var(--warning); }
+.ic-badge-red { background: var(--danger-muted, transparent); color: var(--danger); }
+
+/* Every plugin needs these three, and a plugin that improvises them is where the look breaks down. */
+.ic-empty, .ic-error { border: 1px solid var(--border); border-radius: var(--radius-lg, 0.75rem); background: var(--card-bg, transparent); padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+.ic-empty p, .ic-error p { margin: 0; }
+.ic-error { border-left: 3px solid var(--danger); }
+.ic-error .ic-error-title { color: var(--danger); font-weight: 500; }
+
+.ic-skeleton { height: 1rem; border-radius: var(--radius, 0.5rem); background: var(--muted, var(--card-bg)); animation: ic-pulse 1.4s ease-in-out infinite; }
+.ic-skeleton + .ic-skeleton { margin-top: 0.5rem; }
+@keyframes ic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+@media (prefers-reduced-motion: reduce) { .ic-skeleton { animation: none; } }
+`;
+exports.PLUGIN_UI_STYLE_ID = "infra-client-plugin-ui";
+/** The stylesheet, for a plugin that manages its own document or server-renders. */
+function pluginUiCss() {
+    return CSS;
+}
+/** Puts the component styles in the document, once. Call it alongside the SDK's theme application:
+ *  the theme supplies the values, this supplies the shapes. */
+function applyPluginUi(doc) {
+    const existing = doc.getElementById(exports.PLUGIN_UI_STYLE_ID);
+    if (existing) {
+        existing.textContent = CSS;
+        return;
+    }
+    const element = doc.createElement("style");
+    element.id = exports.PLUGIN_UI_STYLE_ID;
+    element.textContent = CSS;
+    doc.head.appendChild(element);
+}

package/package.json

@@ -1,6 +1,95 @@
 {
   "name": "@fntio/infra-client-plugin-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Theme helpers and an Angular-compatible HTTP interceptor for infra-client plugin frontends.",
+  "license": "Elastic-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FNTIO/aws-infrastructure-client.git",
+    "directory": "packages/infra-client-plugin-ui"
+  },
+  "homepage": "https://github.com/FNTIO/aws-infrastructure-client/wiki",
+  "bugs": {
+    "url": "https://github.com/FNTIO/aws-infrastructure-client/issues"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./angular": {
+      "types": "./dist/angular/index.d.ts",
+      "default": "./dist/angular/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "angular": [
+        "dist/angular/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepack": "npm run build",
+    "test": "jest"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "testMatch": [
+      "**/*.test.ts"
+    ],
+    "transform": {
+      "^.+\\.tsx?$": [
+        "ts-jest",
+        {
+          "tsconfig": "<rootDir>/tsconfig.jest.json"
+        }
+      ]
+    },
+    "moduleNameMapper": {
+      "^@fntio/infra-client-plugin-sdk$": "<rootDir>/../infra-client-plugin-sdk/src/index.ts",
+      "^@fntio/infra-client-plugin-sdk/(.*)$": "<rootDir>/../infra-client-plugin-sdk/src/$1/index.ts"
+    },
+    "maxWorkers": "50%",
+    "workerIdleMemoryLimit": "2GB"
+  },
+  "dependencies": {
+    "@fntio/infra-client-plugin-sdk": "^0.2.0"
+  },
+  "peerDependencies": {
+    "rxjs": "^7.8.0"
+  },
+  "peerDependenciesMeta": {
+    "rxjs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/common": "^20.3.27",
+    "@angular/core": "^20.3.27",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.19.43",
+    "jest": "^29.7.0",
+    "rxjs": "^7.8.0",
+    "ts-jest": "^29.2.0",
+    "typescript": "^5.5.0"
+  }
+}