@skunkworksai/ui-kit 0.1.18

package/dist/tokens-source.css

@@ -0,0 +1,121 @@
+:root {
+  --background: oklch(1.0000 0 0);
+  --foreground: oklch(0.1288 0.0406 264.6952);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0.1288 0.0406 264.6952);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0.1288 0.0406 264.6952);
+  --primary: oklch(0.5461 0.2152 262.8809);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.9683 0.0069 247.8956);
+  --secondary-foreground: oklch(0.2795 0.0368 260.0310);
+  --muted: oklch(0.9683 0.0069 247.8956);
+  --muted-foreground: oklch(0.5544 0.0407 257.4166);
+  --accent: oklch(90.664% 0.04489 267.44);
+  --accent-foreground: oklch(0.2077 0.0398 265.7549);
+  --destructive: oklch(0.5771 0.2152 27.3250);
+  --destructive-foreground: oklch(1 0 0);
+  --info: oklch(0.6231 0.1880 259.8145);
+  --info-foreground: oklch(1 0 0);
+  --success: oklch(0.5271 0.1767 148.16);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.7686 0.1647 70.08);
+  --warning-foreground: oklch(0.2000 0.0400 70.00);
+  --border: oklch(0.9288 0.0126 255.5078);
+  --input: oklch(0.9288 0.0126 255.5078);
+  --ring: oklch(0.7137 0.1434 254.6240);
+  --chart-1: oklch(0.6231 0.1880 259.8145);
+  --chart-2: oklch(0.4749 0.1704 262.1397);
+  --chart-3: oklch(0.4244 0.1809 265.6377);
+  --chart-4: oklch(0.7137 0.1434 254.6240);
+  --chart-5: oklch(0.8823 0.0571 254.1284);
+  --sidebar: oklch(0.9288 0.0126 255.5078);
+  --sidebar-foreground: oklch(0.1288 0.0406 264.6952);
+  --sidebar-primary: oklch(0.5461 0.2152 262.8809);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(90.664% 0.04489 267.44);
+  --sidebar-accent-foreground: oklch(0.1288 0.0406 264.6952);
+  --sidebar-border: transparent;
+  --sidebar-ring: oklch(0.7137 0.1434 254.6240);
+  --logo-filter: invert(1);
+  --font-sans: Lato, ui-sans-serif, sans-serif, system-ui;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Geist Mono, monospace;
+  --radius: 0.5rem;
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0 0 0);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+
+.dark {
+  --background: oklch(0.2146 0.0518 271.6379);
+  --foreground: oklch(0.9842 0.0034 247.8575);
+  --card: oklch(0.1884 0.0302 265.8820);
+  --card-foreground: oklch(0.9842 0.0034 247.8575);
+  --popover: oklch(0.2077 0.0398 265.7549);
+  --popover-foreground: oklch(0.9842 0.0034 247.8575);
+  --primary: oklch(0.5461 0.2152 262.8809);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.2820 0.0910 267.9350);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.2795 0.0368 260.0310);
+  --muted-foreground: oklch(0.7107 0.0351 256.7878);
+  --accent: oklch(72.093% 0.14444 263.97);
+  --accent-foreground: oklch(0.9842 0.0034 247.8575);
+  --destructive: oklch(0.3958 0.1331 25.7230);
+  --destructive-foreground: oklch(0.9705 0.0129 17.3797);
+  --info: oklch(0.7070 0.1650 254.6240);
+  --info-foreground: oklch(1 0 0);
+  --success: oklch(0.4500 0.1500 148.16);
+  --success-foreground: oklch(0.9800 0.0200 148.00);
+  --warning: oklch(0.7686 0.1647 70.08);
+  --warning-foreground: oklch(0.9800 0.0100 70.00);
+  --border: oklch(0.2795 0.0368 260.0310);
+  --input: oklch(0.53 0.09 259.67);
+  --ring: oklch(0.8690 0.0198 252.8943);
+  --chart-1: oklch(0.6231 0.1880 259.8145);
+  --chart-2: oklch(0.7070 0.1650 254.6240);
+  --chart-3: oklch(0.4244 0.1809 265.6377);
+  --chart-4: oklch(0.7137 0.1434 254.6240);
+  --chart-5: oklch(0.8823 0.0571 254.1284);
+  --sidebar: oklch(0.1884 0.0302 265.8820);
+  --sidebar-foreground: oklch(0.9842 0.0034 247.8575);
+  --sidebar-primary: oklch(69.742% 0.1668 248.258);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(69.742% 0.1668 248.258);
+  --sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
+  --sidebar-border: transparent;
+  --sidebar-ring: oklch(0.8690 0.0198 252.8943);
+  --logo-filter: none;
+  --font-sans: Lato, ui-sans-serif, sans-serif, system-ui;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.625rem;
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0 0 0);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}

package/dist/types/assets/Service-applets-apps/index.d.ts

@@ -0,0 +1,13 @@
+export { default as AudienceMeasurementImg } from "./audience-measurement.png";
+export { default as CoatroAppImg } from "./coatro-app.png";
+export { default as ContentEffectivenessImg } from "./content-effectiveness.png";
+export { default as HopTrackingImg } from "./hop-tracking.png";
+export { default as JourneysAppImg } from "./journeys-app.png";
+export { default as PeopleCountingImg } from "./people-counting.png";
+export { default as PetraImg } from "./petra.png";
+export { default as SamGenericImg } from "./sam-generic.png";
+export { default as SamiForEnvironmentImg } from "./sami-for-environment.png";
+export { default as ShelfEngagementImg } from "./shelf-engagement.png";
+export { default as TrafficManagementImg } from "./traffic-management.png";
+export { default as VianaAppImg } from "./viana.png";
+export { default as ZoneEngagementImg } from "./zone-engagement.png";

package/dist/types/assets/icons/DashboardActiveIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function DashboardActiveIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/DashboardIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function DashboardIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/DevicesActiveIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function DevicesActiveIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/DevicesIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function DevicesIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/InstallerActiveIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function InstallerActiveIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/InstallerIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function InstallerIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/ManifestActiveIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function ManifestActiveIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/ManifestIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function ManifestIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/SensorActiveIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function SensorActiveIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/SensorIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function SensorIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/SiteActiveIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function SiteActiveIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/SiteIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function SiteIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/XrayActiveIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function XrayActiveIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/XrayIcon.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function XrayIcon({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/icons/index.d.ts

@@ -0,0 +1,14 @@
+export { DashboardIcon } from "./DashboardIcon";
+export { DashboardActiveIcon } from "./DashboardActiveIcon";
+export { SiteIcon } from "./SiteIcon";
+export { SiteActiveIcon } from "./SiteActiveIcon";
+export { DevicesIcon } from "./DevicesIcon";
+export { DevicesActiveIcon } from "./DevicesActiveIcon";
+export { SensorIcon } from "./SensorIcon";
+export { SensorActiveIcon } from "./SensorActiveIcon";
+export { XrayIcon } from "./XrayIcon";
+export { XrayActiveIcon } from "./XrayActiveIcon";
+export { ManifestIcon } from "./ManifestIcon";
+export { ManifestActiveIcon } from "./ManifestActiveIcon";
+export { InstallerIcon } from "./InstallerIcon";
+export { InstallerActiveIcon } from "./InstallerActiveIcon";

package/dist/types/assets/logos/DarkLogo.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function DarkLogo({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/logos/DarkSymbol.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function DarkSymbol({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/logos/PrimaryLogo.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function PrimaryLogo({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/logos/PrimarySymbol.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function PrimarySymbol({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/logos/WhiteLogo.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function WhiteLogo({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/logos/WhiteSymbol.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export declare function WhiteSymbol({ width, height, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/types/assets/logos/index.d.ts

@@ -0,0 +1,6 @@
+export { PrimaryLogo } from "./PrimaryLogo";
+export { DarkLogo } from "./DarkLogo";
+export { WhiteLogo } from "./WhiteLogo";
+export { PrimarySymbol } from "./PrimarySymbol";
+export { DarkSymbol } from "./DarkSymbol";
+export { WhiteSymbol } from "./WhiteSymbol";

package/dist/types/components/blocks/AppBentoMenu.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type BentoApp = {
+    id: string;
+    label: string;
+    /** PNG/SVG URL string, or an SVG React component */
+    icon: string | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    active?: boolean;
+    href?: string;
+};
+export declare const DEFAULT_BENTO_APPS: BentoApp[];
+export type AppBentoMenuItemProps = {
+    app: BentoApp;
+    className?: string;
+};
+declare function AppBentoMenuItem({ app, className }: AppBentoMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppBentoMenuItem {
+    var displayName: string;
+}
+export type AppBentoMenuProps = {
+    /** List of apps to display in the grid. Defaults to the four MeldCX apps. */
+    apps?: BentoApp[];
+    /** Number of grid columns. Default 2. */
+    cols?: number;
+    children?: React.ReactNode;
+    className?: string;
+};
+declare function AppBentoMenu({ apps, cols, children, className, }: AppBentoMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppBentoMenu {
+    var displayName: string;
+}
+export { AppBentoMenu, AppBentoMenuItem };

package/dist/types/components/blocks/AppDashboard.d.ts

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { type AppHeaderProps } from "./AppHeader";
+import { type AppPageTitleProps } from "./AppPageTitle";
+import { type AppSidebarBrandProps } from "../primitives/AppSidebar";
+/**
+ * AppDashboardContent — The main column next to the sidebar.
+ * Internal layout primitive — used by AppDashboard, not by agents.
+ */
+declare function AppDashboardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace AppDashboardContent {
+    var displayName: string;
+}
+/**
+ * AppDashboardMain — The primary content area with a rounded top-left corner.
+ * Internal layout primitive — used by AppDashboard, not by agents.
+ */
+declare function AppDashboardMain({ className, ...props }: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace AppDashboardMain {
+    var displayName: string;
+}
+export type AppDashboardNavItem = {
+    /** Label shown in the sidebar and used as the tooltip when collapsed. */
+    title: string;
+    /** Lucide icon component — pass the component itself, not `<Icon />`. */
+    icon: React.ElementType;
+    /** Marks this item as the active route. Set on exactly one item per page. */
+    isActive?: boolean;
+    /**
+     * Click handler attached to the menu button (or the anchor when `url` is set).
+     * For react-router-dom: set `url` to the path and use `onClick` to call `navigate(url)` after `e.preventDefault()`.
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * When set, renders the menu button as an `<a href>` via `asChild`.
+     * If both `url` and `onClick` are set, `onClick` fires first — call `e.preventDefault()` to suppress navigation.
+     */
+    url?: string;
+};
+export type AppDashboardNavSection = {
+    /** Optional group heading rendered above the items. */
+    label?: string;
+    items: AppDashboardNavItem[];
+};
+export type AppDashboardBackgroundTheme = 
+/** Background (sidebar/header/background) locked to dark regardless of page theme. Default. */
+"dark"
+/** Background locked to light regardless of page theme. */
+ | "light";
+export type AppDashboardAnimated = 
+/** Animation on, unless the user has prefers-reduced-motion: reduce. Default. */
+"auto"
+/** Animation always on, regardless of OS motion preference. */
+ | "on"
+/** No canvas, no rAF — static gradient only. Best for perf-sensitive contexts. */
+ | "off";
+export type AppDashboardProps = {
+    /**
+     * Sidebar navigation sections.
+     * Defaults to the built-in App nav when omitted. Pass a custom array to override entirely.
+     */
+    nav?: AppDashboardNavSection[];
+    /**
+     * Props forwarded to AppHeader. Use to customize or remove header slots:
+     * - `header={{ avatar: null }}` — hide avatar
+     * - `header={{ searchbar: null }}` — hide searchbar
+     * - `header={{ networkSelect: null }}` — hide network select
+     * - `header={{ showThemeToggle: false }}` — hide theme toggle
+     * - `header={{ actions: <custom /> }}` — replace all right-side actions
+     */
+    header?: Omit<AppHeaderProps, "className">;
+    /** Overrides the --sidebar-width CSS variable. Default: "14rem". */
+    sidebarWidth?: string;
+    /** Overrides the --header-height CSS variable. Default: "3.5rem". */
+    headerHeight?: string;
+    /** Extra classes on the main content area. Default padding is "p-6". */
+    mainClassName?: string;
+    /**
+     * Page title block rendered at the top of the main content area.
+     * - Omit or pass `{}` to auto-derive from pathname.
+     * - Pass `{ title, subtitle?, breadcrumbs?, actions? }` to customise.
+     * - Pass `false` to hide.
+     */
+    pageTitle?: AppPageTitleProps | false;
+    /**
+     * Locks the sidebar, header, and background to a fixed light/dark mode.
+     * @default "dark"
+     */
+    backgroundTheme?: AppDashboardBackgroundTheme;
+    /**
+     * Controls the canvas animation in the dashboard background.
+     * - "auto" (default): animation on, unless the user has `prefers-reduced-motion: reduce`
+     * - "on": animation always on
+     * - "off": no canvas, no rAF — gradient only. Use for perf-constrained consumers.
+     * @default "auto"
+     */
+    animated?: AppDashboardAnimated;
+    /**
+     * Background preset or custom background component.
+     * - Omit for default Wave background.
+     * - Pass `<AppDashboardBackgroundDots />` to use the dot grid preset.
+     * - Pass any ReactNode for a fully custom background — must render the gradient (sidebar/header depend on it).
+     *   Receives animated/interactive/themeClass via AppDashboardBackgroundContext.
+     * @default <AppDashboardBackgroundWave />
+     */
+    background?: React.ReactNode;
+    /**
+     * Props forwarded to AppSidebarBrand. Use to supply a custom logo:
+     * - `brand={{ logo: <MyLogo /> }}` — custom expanded logo
+     * - `brand={{ collapsedLogo: <MySymbol /> }}` — custom collapsed icon
+     * - `brand={{ dropdown: [...] }}` — brand switcher dropdown
+     * Defaults to WhiteLogo / WhiteSymbol when omitted.
+     */
+    brand?: Omit<AppSidebarBrandProps, "className">;
+    /** Page content rendered inside the main area. */
+    children: React.ReactNode;
+};
+declare function AppDashboard({ nav: navProp, header, brand, sidebarWidth, headerHeight, mainClassName, backgroundTheme, animated, background, pageTitle, children, }: AppDashboardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppDashboard {
+    var displayName: string;
+}
+export { AppDashboard, AppDashboardContent, AppDashboardMain, };

package/dist/types/components/blocks/AppHeader.d.ts

@@ -0,0 +1,198 @@
+import * as React from "react";
+import { type BentoApp } from "./AppBentoMenu";
+import { type AppNotification } from "./AppNotificationsMenu";
+import { type AppProfileUser } from "./AppProfile";
+/**
+ * AppHeaderContent — Inner layout container for AppHeader.
+ * Handles horizontal padding and gap between children.
+ * @note If a prop you need is missing, stop and inform the design team.
+ */
+declare function AppHeaderContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderContent {
+    var displayName: string;
+}
+/**
+ * AppHeaderTitle — Optional page or section label inside AppHeader.
+ * @note If a prop you need is missing, stop and inform the design team.
+ */
+declare function AppHeaderTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderTitle {
+    var displayName: string;
+}
+/**
+ * AppHeaderSearchbar — Flex-1 layout slot for search input groups.
+ * @note If a prop you need is missing, stop and inform the design team.
+ */
+declare function AppHeaderSearchbar({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderSearchbar {
+    var displayName: string;
+}
+/**
+ * AppHeaderActions — Right-side slot for header controls.
+ * @note If a prop you need is missing, stop and inform the design team.
+ */
+declare function AppHeaderActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderActions {
+    var displayName: string;
+}
+export type NetworkOption = {
+    value: string;
+    label: string;
+};
+export type AppHeaderNetworkComboboxProps = {
+    networks?: NetworkOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+/**
+ * AppHeaderNetworkCombobox — searchable network picker for AppHeader.
+ * Shows the current network first, then alphabetical. Initial list is 10 with
+ * a "See more" button for larger lists. Supports search.
+ *
+ * @note If a prop you need is missing, stop and inform the design team.
+ */
+declare function AppHeaderNetworkCombobox({ networks, value: valueProp, onValueChange, }: AppHeaderNetworkComboboxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeaderNetworkCombobox {
+    var displayName: string;
+}
+export type AppHeaderProps = React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Searchbar slot. Defaults to a standard search input group.
+     * Pass `null` to remove the searchbar entirely.
+     */
+    searchbar?: React.ReactNode;
+    /**
+     * Right-side actions slot. Pass `null` to remove all actions.
+     * When omitted, defaults to: network select + bento + theme toggle + avatar.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Avatar node inside the default actions. Pass `null` to hide.
+     * Ignored when `actions` is provided.
+     */
+    avatar?: React.ReactNode;
+    /**
+     * Network select node inside the default actions. Pass `null` to hide.
+     * Ignored when `actions` is provided.
+     */
+    networkSelect?: React.ReactNode;
+    /**
+     * List of networks for the default network combobox.
+     * Ignored when `networkSelect` or `actions` is provided.
+     */
+    networks?: NetworkOption[];
+    /**
+     * Currently selected network value. If omitted, the combobox manages its own state.
+     * Ignored when `networkSelect` or `actions` is provided.
+     */
+    currentNetwork?: string;
+    /**
+     * Called when the user selects a network.
+     * Ignored when `networkSelect` or `actions` is provided.
+     */
+    onNetworkChange?: (value: string) => void;
+    /**
+     * Whether to show the theme toggle inside default actions.
+     * Ignored when `actions` is provided.
+     * @default true
+     */
+    showThemeToggle?: boolean;
+    /**
+     * Whether to show the bento/grid icon button inside default actions.
+     * Ignored when `actions` is provided.
+     * @default true
+     */
+    showBento?: boolean;
+    /**
+     * Apps shown in the bento dropdown. Defaults to the four MeldCX apps.
+     * Ignored when `actions` is provided or `showBento` is false.
+     */
+    bentoApps?: BentoApp[];
+    /**
+     * Number of columns in the bento grid. Defaults to 2.
+     * Ignored when `actions` is provided or `showBento` is false.
+     */
+    bentoCols?: number;
+    /**
+     * Whether to show the notifications bell inside default actions.
+     * Ignored when `actions` is provided.
+     * @default true
+     */
+    showNotifications?: boolean;
+    /**
+     * Notifications list for the default bell menu.
+     * Ignored when `actions` or `notificationsMenu` is provided.
+     */
+    notifications?: AppNotification[];
+    /**
+     * Total notification count on server (for "Show More" footer label).
+     * Ignored when `actions` or `notificationsMenu` is provided.
+     */
+    notificationsTotal?: number;
+    /**
+     * Called when "Show More" is clicked in the notifications panel.
+     * Ignored when `actions` or `notificationsMenu` is provided.
+     */
+    onShowMoreNotifications?: () => void;
+    /**
+     * Called when "Mark all as read" is selected in the notifications panel.
+     * Ignored when `actions` or `notificationsMenu` is provided.
+     */
+    onMarkAllNotificationsRead?: () => void;
+    /**
+     * Custom notifications menu node. Pass `null` to hide the bell entirely.
+     * Ignored when `actions` is provided.
+     */
+    notificationsMenu?: React.ReactNode;
+    /**
+     * User data for the default profile popover (avatar + name + role + menu).
+     * When provided, replaces the plain avatar with an interactive AppProfile.
+     * Ignored when `avatar` or `actions` is provided.
+     */
+    profile?: AppProfileUser;
+    /** Called when "Settings" is clicked in the profile menu. */
+    onSettings?: () => void;
+    /** Called when "Administrator" is clicked in the profile menu. */
+    onAdministrator?: () => void;
+    /** Called when "Log Out" is clicked in the profile menu. */
+    onLogout?: () => void;
+    /**
+     * Custom profile menu node. Replaces the default AppProfile trigger.
+     * Ignored when `avatar` or `actions` is provided.
+     */
+    profileMenu?: React.ReactNode;
+};
+/**
+ * AppHeader — Top-of-page header bar with built-in defaults.
+ *
+ * Default layout: sidebar trigger → separator → searchbar → network select → bento → theme toggle → avatar.
+ *
+ * Customize via props:
+ * - `networks={[...]}` — provide network list for the built-in combobox
+ * - `currentNetwork="id"` + `onNetworkChange={fn}` — controlled network selection
+ * - `searchbar={null}` — remove searchbar
+ * - `avatar={null}` — remove avatar
+ * - `networkSelect={null}` — remove network select
+ * - `showThemeToggle={false}` — remove theme toggle
+ * - `showBento={false}` — remove bento button
+ * - `actions={<custom />}` — replace entire right-side actions
+ *
+ * @example
+ * ```tsx
+ * // With network list
+ * <AppHeader networks={myNetworks} currentNetwork={selected} onNetworkChange={setSelected} />
+ *
+ * // No avatar
+ * <AppHeader avatar={null} />
+ *
+ * // No searchbar, custom actions
+ * <AppHeader searchbar={null} actions={<AppButton>Save</AppButton>} />
+ * ```
+ *
+ * @note If a prop you need is missing, stop and inform the design team.
+ */
+declare function AppHeader({ className, searchbar, actions, avatar, networkSelect, networks, currentNetwork, onNetworkChange, showThemeToggle, showBento, bentoApps, bentoCols, showNotifications, notifications, notificationsTotal, onShowMoreNotifications, onMarkAllNotificationsRead, notificationsMenu, profile, onSettings, onAdministrator, onLogout, profileMenu, ...props }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppHeader {
+    var displayName: string;
+}
+export { AppHeader, AppHeaderNetworkCombobox, AppHeaderContent, AppHeaderTitle, AppHeaderSearchbar, AppHeaderActions, };

package/dist/types/components/blocks/AppLocationTreeFilter.d.ts

@@ -0,0 +1,44 @@
+export type TreeNode = {
+    /** Display label for this node */
+    label: string;
+    /** Badge count shown alongside the label */
+    count: number;
+    /** Child nodes — if present, renders as a collapsible branch */
+    children?: TreeNode[];
+};
+export type UnallocatedConfig = {
+    /** Row label. Defaults to "Unallocated". */
+    label?: string;
+    /** Badge count for this row */
+    count: number;
+    /**
+     * Sentinel value emitted when this row is selected.
+     * Defaults to "__unallocated__". If storing in URL params,
+     * encode/decode this value at the call site.
+     */
+    value?: string;
+};
+export type AppLocationTreeFilterProps = {
+    /** Tree data — top-level nodes, each may have nested children */
+    data: TreeNode[];
+    /** Title shown above the search input. Defaults to "Filter by Location". */
+    title?: string;
+    /** When true, renders a help icon next to the title. Defaults to false. */
+    showHelp?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Optional pinned "unallocated" row rendered above the tree. Omit to hide. */
+    unallocated?: UnallocatedConfig;
+    /**
+     * The currently selected value.
+     * - `null` — root / "show all" state (top-level branch nodes emit this)
+     * - `"__unallocated__"` (or `unallocated.value`) — unallocated row is selected
+     * - Any other string — a leaf or mid-level node label
+     */
+    selected: string | null;
+    /** Fired when the user selects a node or the unallocated row */
+    onSelect: (value: string | null) => void;
+    /** Extra classes on the root container */
+    className?: string;
+};
+export declare function AppLocationTreeFilter({ data, title, showHelp, searchPlaceholder, unallocated, selected, onSelect, className, }: AppLocationTreeFilterProps): import("react/jsx-runtime").JSX.Element;