Uniflow UI

Shared component and application behavior follows Universal UI rules and implementation audit.

Configure proportional sizing, dark mode and color palettes through the shared theme provider.

Launching the showcase opens Getting started at /components/docs/getting-started. Project demo routes are not exposed by the showcase.

Local blade changes follow the imported specification. See the implementation and review guide for the new Access preview and integration API. The catalog documents the shared drill blade and its current web behavior.

The source version is 0.3.9. The public npm package name is uniflow-ui. Earlier versions used a separate scoped GitHub Packages identity. The repository and internal Angular project directories keep their existing names.

Develop

Use an Angular-22-compatible Node release (Node 24 LTS recommended) and npm.

npm ci
ng serve -c dev --ssl

Open https://localhost:4200. The dev configuration imports library TypeScript and Sass directly and watches edits, without a prerequisite package build. Angular generates a local self-signed HTTPS certificate. If Angular CLI is not on PATH, use npx ng serve -c dev --ssl. For package-consumer verification, npm run build followed by npm start retains the built-package preview over HTTP. Run npm test, npm run build:showcase, and npm run pack before release. Tarballs go to artifacts/.

Install

Install from the public npm registry:

npm install uniflow-ui

No GitHub login, organization scope mapping or project .npmrc is required with npm's default registry. The proprietary license permits application use and bundling but restricts library modifications and standalone redistribution; see LICENSE. See publishing.

Configure the application

Import standalone components in the consuming component's imports array. Supply HTTP for SVG loading and animation providers for the retained Angular animation triggers. Reuse existing providers if already configured.

import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { UI_TRANSLATION } from 'uniflow-ui';
import { TranslationService as AppTranslationService } from './services/translation.service';

// ApplicationConfig.providers:
const providers = [
  provideHttpClient(),
  provideAnimations(),
  { provide: UI_TRANSLATION, useExisting: AppTranslationService },
];

The translation adapter provides translate(key, params?) and getCurrentLanguage(): Signal<string>. Without an adapter, built-in messages use English. Partial adapters fall back to built-in English/French translations for the active locale, then English; unknown application keys remain available for application fallback. The package does not load application translations or contact application APIs. Translation key usage and config fields are exposed in the source and generated references.

Copy packaged icon assets through the consumer's angular.json build assets:

{
  "glob": "**/*",
  "input": "node_modules/uniflow-ui/assets",
  "output": "assets/universe"
}

Restart a running Angular dev server after changing its asset configuration.

Alternatively provide UI_ICON_BASE_URL with your existing trusted icon path. Supply --font-family-base or load Kumbh Sans yourself; fonts are not downloaded by this package.

For a new application, include the baseline theme once in global SCSS:

@use 'uniflow-ui/styles' as ui;
@include ui.all();

all() emits the reference-based Material theme, reset, fluid tokens, interactions, and global Material overrides. It affects the whole application. During migration, use ui.tokens() and/or ui.controls() after removing overlapping rules, and keep a single Material theme owner. Never combine all() with those two mixins. Brand overrides can follow the mixin, e.g. :root { --color-accent: #345678; }. See theming.

One customizable blade shell

BladeNavComponent is the canonical shell, with new selector uni-blade and compatible selector app-blade-nav. It is the same implementation for every screen; inputs, content slots, and CSS properties configure it.

import { BladeNavComponent, BladeStackComponent } from 'uniflow-ui';
// @Component({ imports: [BladeNavComponent, BladeStackComponent], ... })

<uni-blade-stack label="Partner navigation">
  <uni-blade [showRight]="editorOpen()" height="80dvh" mainState="visible">
    <div blade-left-header>Partners</div>
    <nav blade-left-body><!-- App navigation buttons --></nav>
    <div blade-main-header><!-- Title and actions --></div>
    <div blade-main-body><!-- Any controls, table, or app content --></div>
    <div blade-right><!-- Custom editor / flyout --></div>
  </uni-blade>
</uni-blade-stack>

Use showLeft, showRight, mainState, and height, plus documented CSS properties for sizing. BladeStackComponent supplies horizontal scrolling, edge curtains, and header synchronization. The app controls stack items, navigation, selection, and editor state. Apply exported bladeStackMotion to conditional children when animated removal is wanted.

DrillBladeComponent is the extracted configurable orchestration layer using this shell, with the existing reference LevelConfig and callbacks. Its access-management conventions are still present and are documented as migration constraints. BladeComponent (app-blade) remains a legacy simple card/panel for old imports; use the canonical shell for new blade layouts.

Documentation

• Interactions: search deletion, selection, highlights, ripple, transitions, loading, focus, and feedback.
• API: every packaged component/directive input, output, model, and projection slot.
• Types: table, flyout, drill, adapter, and query configuration contracts.
• Styles: CSS variable values, responsive overrides, keyframes, and timing constants.
• Theming: global CSS ownership and application customization.
• Source inventory: file-by-file coverage and differences.
• Publishing: repository and public npm release process.

Contribution rule

Every new or changed interaction needs a documented behavior, its customization points, a preview example where practical, and a regression check where timing/state behavior can break. Keep API requests and application permissions outside generic controls. Do not silently adopt one app's differing behavior without recording the migration decision. Patch package behavior here, then adopt a new version in consumers.

Project layout and shared UI ownership: Architecture.

Releases and verification

See the changelog for versioned release notes and validation for checks and recorded limits. Follow publishing for releases and consumer integration when adopting an update.

Repository housekeeping

Release history lives in CHANGELOG.md and versioned release notes. docs/ contains maintained guides; explicitly marked source snapshots and audits are historical evidence. Generated artifacts/, dist/ and .angular/ are ignored and can be recreated. Keep temporary scripts, screenshots and consumer installs under artifacts/, not in source folders.

Ownership

Copyright (c) 2026 Bio-Stream Diagnostics Inc. See LICENSE for the proprietary terms. Product pages use Uniflow UI branding.