@bfrs/agentic-components 0.1.9 → 0.2.1

package/BFRS_AGENTIC_COMPONENTS.md

@@ -44,6 +44,17 @@ import "@bfrs/agentic-components/custom-elements";
 @import "@bfrs/agentic-components/styles";
 ```
 
+If Angular does not resolve the package style export, add the built CSS file in `angular.json`:
+
+```json
+{
+  "styles": [
+    "node_modules/@bfrs/agentic-components/dist/style.css",
+    "src/styles.scss"
+  ]
+}
+```
+
 Add `CUSTOM_ELEMENTS_SCHEMA` where the tags are rendered:
 
 ```ts
@@ -64,11 +75,18 @@ export class AgenticExampleComponent {
 }
 ```
 
+Use native Angular DOM event bindings for interactions. Do not pass React-style `onClick` in Angular templates:
+
+```html
+<bfrs-button variant="primary" (click)="continue()">Continue</bfrs-button>
+<bfrs-paper (click)="openDetails()">Open details</bfrs-paper>
+```
+
 Registered tags cover the documented component surface: `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-toast-manager`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-data-table`, `bfrs-tabs`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, and `bfrs-step-progress-card`.
 
 Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`, `disabled`, `required`, `error-message`, `helper-text`, `prefix`, `suffix`. Use `[props]` or the `props` JSON attribute for structured props like `options`, `items`, `columns`, `data`, `sections`, `steps`, and `toasts`.
 
-Common Angular events: `(value-change)`, `(checked-change)`, `(open-change)`, `(close)`, `(confirm)`, `(cancel)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`.
+Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(close)`, `(confirm)`, `(cancel)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`. Payloads are available on `$event.detail`.
 
 ```html
 <bfrs-select

package/README.md

@@ -56,6 +56,17 @@ import "@bfrs/agentic-components/custom-elements";
 @import "@bfrs/agentic-components/styles";
 ```
 
+If Angular does not resolve the package style export, add the built CSS file in `angular.json`:
+
+```json
+{
+  "styles": [
+    "node_modules/@bfrs/agentic-components/dist/style.css",
+    "src/styles.scss"
+  ]
+}
+```
+
 Add `CUSTOM_ELEMENTS_SCHEMA` to the module or standalone component that renders the tags:
 
 ```ts
@@ -76,6 +87,13 @@ export class ExampleComponent {
 }
 ```
 
+Use native Angular DOM event bindings for interactions. Do not pass React-style `onClick` in Angular templates:
+
+```html
+<bfrs-button variant="primary" (click)="continue()">Continue</bfrs-button>
+<bfrs-paper (click)="openDetails()">Open details</bfrs-paper>
+```
+
 The custom-elements entrypoint registers Angular-friendly tags for the documented component surface, including layout, forms, feedback, overlays, filters, data display, navigation, and agentic pattern components.
 
 Use simple attributes for primitive values and `[props]` for structured values or callback-capable advanced props:

package/dist/components/ui/index.d.ts

@@ -51,3 +51,6 @@ export * from './patterns/ChatComposer';
 export * from './patterns/FullPageLoader';
 export * from './patterns/BusinessInfoDisplayCard';
 export * from './patterns/StepProgressCard';
+export * from './patterns/CommandMenu';
+export * from './patterns/WorkspaceHeader';
+export * from './patterns/SideNav';

package/dist/components/ui/patterns/CommandMenu/CommandMenu.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export type CommandMenuTone = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+export type CommandMenuItem = {
+    /** Stable id for the item. */
+    id: string;
+    /** Primary label, e.g. a command name. */
+    label: ReactNode;
+    /** Secondary description line. */
+    description?: ReactNode;
+    /** Leading icon node, rendered inside a tinted square. */
+    icon?: ReactNode;
+    /** Extra text used for filtering (in addition to a string `label`). */
+    keywords?: string;
+    /** Optional trailing status badge. */
+    status?: {
+        label: ReactNode;
+        tone?: CommandMenuTone;
+    };
+    disabled?: boolean;
+};
+export type CommandMenuProps = {
+    /** Items to render. */
+    items: CommandMenuItem[];
+    /** Current filter query. When set and `filter` is not false, items are filtered. */
+    query?: string;
+    /** Optional uppercase title shown above the list. */
+    title?: ReactNode;
+    /** Text shown when no items match. */
+    emptyText?: ReactNode;
+    /** Whether to internally filter `items` by `query`. Defaults to true. */
+    filter?: boolean;
+    /** Called when an item is selected. */
+    onSelect?: (item: CommandMenuItem) => void;
+    className?: string;
+};
+/**
+ * Searchable command / option palette. Renders a floating-style surface with a
+ * list of icon + label + description rows and optional status badges. Filtering
+ * is internal by default; pass `filter={false}` to control the list yourself.
+ *
+ * The component is position-agnostic — wrap it (or pass `className`) to place it
+ * as a popover above an input, in a dropdown, etc.
+ */
+export declare function CommandMenu({ items, query, title, emptyText, filter, onSelect, className }: CommandMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CommandMenu {
+    var displayName: string;
+}

package/dist/components/ui/patterns/CommandMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './CommandMenu';

package/dist/components/ui/patterns/SideNav/SideNav.d.ts

@@ -0,0 +1,52 @@
+import { CSSProperties, ReactNode } from 'react';
+export type SideNavSubItem = {
+    id: string;
+    label: ReactNode;
+    onSelect?: () => void;
+};
+export type SideNavItem = {
+    id: string;
+    label: ReactNode;
+    /** Leading icon node. */
+    icon?: ReactNode;
+    active?: boolean;
+    /** Trailing badge/slot (hidden when collapsed). */
+    badge?: ReactNode;
+    /** Hover flyout entries. When present, clicking the row does not call `onSelect`. */
+    nested?: SideNavSubItem[];
+    onSelect?: () => void;
+};
+export type SideNavSection = {
+    id?: string;
+    /** Uppercase section title (hidden when collapsed). */
+    title?: ReactNode;
+    items: SideNavItem[];
+    /** Optional action row shown under the items (e.g. "Create new"). Hidden when collapsed. */
+    action?: ReactNode;
+};
+export type SideNavProps = {
+    sections: SideNavSection[];
+    collapsed?: boolean;
+    /** Expanded width in px. Defaults to 240. */
+    width?: number;
+    /** Collapsed width in px. Defaults to 56. */
+    collapsedWidth?: number;
+    /** Top slot, above the scrollable nav (e.g. a primary CTA). */
+    header?: ReactNode;
+    /** Extra content rendered inside the scroll area after the sections (e.g. a recents list). */
+    children?: ReactNode;
+    /** Bottom slot (e.g. user + settings). */
+    footer?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Collapsible application sidebar navigation. Renders grouped sections of items
+ * with active state, optional badges, and hover flyouts for nested items, plus
+ * dedicated `header` and `footer` slots. All data (labels, icons, handlers) is
+ * passed in — the component owns layout, collapse behavior, and chrome only.
+ */
+export declare function SideNav({ sections, collapsed, width, collapsedWidth, header, children, footer, className, style }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideNav {
+    var displayName: string;
+}

package/dist/components/ui/patterns/SideNav/index.d.ts

@@ -0,0 +1 @@
+export * from './SideNav';

package/dist/components/ui/patterns/WorkspaceHeader/WorkspaceHeader.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, ReactNode } from 'react';
+export type WorkspaceHeaderProps = {
+    /** Brand block (logo + product name) rendered at the far left. */
+    brand?: ReactNode;
+    /** Fixed width (px) for the brand rail, e.g. to align with a sidebar. Auto when omitted. */
+    brandWidth?: number;
+    /** When provided, renders a sidebar-toggle button next to the brand. */
+    onToggleSidebar?: () => void;
+    /** Accessible label for the sidebar-toggle button. */
+    toggleLabel?: string;
+    /** Optional tab strip, rendered as its own bordered column after the brand. */
+    tabs?: ReactNode;
+    /** Fixed width (px) for the tabs column, e.g. to align with a secondary pane. Auto when omitted. */
+    tabsWidth?: number;
+    /** Search control, placed at the start of the trailing actions area. */
+    search?: ReactNode;
+    /** Trailing action controls (wallet, apps, avatar, …). */
+    actions?: ReactNode;
+    /** Free-form content placed in the main (flex) region before the spacer. */
+    children?: ReactNode;
+    /** Header height in px. Defaults to 52. */
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Application top bar for workspace-style layouts. Slot-based: drop in a brand
+ * block, an optional sidebar toggle, a tab strip, a search control, and trailing
+ * actions. All product-specific logic (which tabs exist, wallet balance, etc.)
+ * stays in the consuming app — this component only owns layout and chrome.
+ */
+export declare function WorkspaceHeader({ brand, brandWidth, onToggleSidebar, toggleLabel, tabs, tabsWidth, search, actions, children, height, className, style }: WorkspaceHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WorkspaceHeader {
+    var displayName: string;
+}

package/dist/components/ui/patterns/WorkspaceHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './WorkspaceHeader';

package/dist/custom-elements.d.ts

@@ -5,8 +5,11 @@ export type BfrsCustomElementRegistryOptions = {
 };
 declare abstract class ReactCustomElement extends HTMLElement {
     private root;
+    private mountNode;
     private initialText;
     private initialHtml;
+    private hasCapturedInitialContent;
+    private initialRenderQueued;
     private propertyProps;
     get props(): UnknownProps;
     set props(value: UnknownProps);
@@ -31,6 +34,9 @@ declare abstract class ReactCustomElement extends HTMLElement {
     protected objectValue<Value extends UnknownProps>(name: string, fallback: Value): Value;
     protected emit(name: string, detail?: unknown): void;
     private applyDefaultDisplay;
+    private ensureMountNode;
+    private scheduleInitialUpdate;
+    private captureInitialContent;
 }
 declare abstract class ComponentCustomElement extends ReactCustomElement {
     protected abstract component(): unknown;
@@ -352,6 +358,7 @@ export declare class BfrsFilterBarElement extends ReactCustomElement {
     static readonly tagName = "filter-bar";
     static get observedAttributes(): string[];
     private searchValue;
+    attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void;
     protected defaultDisplay(): string;
     protected renderElement(): unknown;
 }
@@ -415,6 +422,24 @@ export declare class BfrsStepProgressCardSkeletonElement extends ReactCustomElem
     static get observedAttributes(): string[];
     protected renderElement(): unknown;
 }
+export declare class BfrsCommandMenuElement extends ReactCustomElement {
+    static readonly tagName = "command-menu";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsWorkspaceHeaderElement extends ReactCustomElement {
+    static readonly tagName = "workspace-header";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
+export declare class BfrsSideNavElement extends ReactCustomElement {
+    static readonly tagName = "side-nav";
+    static get observedAttributes(): string[];
+    protected defaultDisplay(): string;
+    protected renderElement(): unknown;
+}
 export declare function defineBfrsAgenticElements(options?: BfrsCustomElementRegistryOptions): void;
 declare global {
     interface HTMLElementTagNameMap {
@@ -435,6 +460,7 @@ declare global {
         "bfrs-chat-composer": BfrsChatComposerElement;
         "bfrs-checkbox": BfrsCheckboxElement;
         "bfrs-chip": BfrsChipElement;
+        "bfrs-command-menu": BfrsCommandMenuElement;
         "bfrs-confirm-dialog": BfrsConfirmDialogElement;
         "bfrs-container": BfrsContainerElement;
         "bfrs-data-table": BfrsDataTableElement;
@@ -467,6 +493,7 @@ declare global {
         "bfrs-searchable-select": BfrsSearchableSelectElement;
         "bfrs-section-header": BfrsSectionHeaderElement;
         "bfrs-select": BfrsSelectElement;
+        "bfrs-side-nav": BfrsSideNavElement;
         "bfrs-skeleton": BfrsSkeletonElement;
         "bfrs-spinner": BfrsSpinnerElement;
         "bfrs-stack": BfrsStackElement;
@@ -479,6 +506,7 @@ declare global {
         "bfrs-textarea": BfrsTextareaElement;
         "bfrs-toast-manager": BfrsToastManagerElement;
         "bfrs-tooltip": BfrsTooltipElement;
+        "bfrs-workspace-header": BfrsWorkspaceHeaderElement;
     }
 }
 export {};