@dlh.io/bideux

Bideux dashboards in one install. This package is built from the eight @dlh.io/bideux-dashboard-* packages and re-exports all of them, so a host adds one dependency (plus react and react-dom when it uses the React entry) and has the spec, the headless core, the widget models, the plain DOM renderer, the ECharts, Tabulator and RevoGrid renderers and the React reader and builder.

The @dlh.io/bideux-dashboard-* packages are unchanged and keep publishing. Pick one form per application: this package, or the individual packages. Mixing the two in one bundle would load two copies of the same React contexts.

pnpm add @dlh.io/bideux react react-dom

Entries

| Import | What it is | React | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | @dlh.io/bideux | @dlh.io/bideux-dashboard-spec, dashboard-core, dashboard-renderers, dashboard-renderer-web: types, layout, pivot logic, widget models, the plain DOM renderer and reader shell | no | | @dlh.io/bideux/renderers | the three concrete renderers plus createDefaultRenderers() and cssVariableTheme() | no | | @dlh.io/bideux/renderers/echarts | @dlh.io/bideux-dashboard-renderer-echarts | no | | @dlh.io/bideux/renderers/tabulator | @dlh.io/bideux-dashboard-renderer-tabulator | no | | @dlh.io/bideux/renderers/revogrid | @dlh.io/bideux-dashboard-renderer-revogrid | no | | @dlh.io/bideux/react | @dlh.io/bideux-dashboard-react plus createHttpDashboardTransport() and createHttpAuthoringTransport() | yes | | @dlh.io/bideux/react/locations | EffectiveScopeBanner and scopedKeys for hosts using the bideux[scope] location plug in | yes | | @dlh.io/bideux/element | the custom elements <bideux-dashboard-list>, <bideux-dashboard>, <bideux-embed>, <bideux-widget>; React is bundled inside, the page never imports it | no | | @dlh.io/bideux/all | everything above | yes | | @dlh.io/bideux/styles.css | the react-grid-layout and Tabulator stylesheets the renderers expect on the page | | | @dlh.io/bideux/theme.css | the default theme tokens for the custom elements | | | @dlh.io/bideux/schema/*.json | the JSON schemas from dashboard-spec | |

The root entry and the renderers entries never import React, so Angular, Vue, Vite vanilla and Node hosts use them exactly as they use the individual packages today.

Any host in two elements (Tier 0)

The custom elements are the lowest barrier: one script or import, two tags, no framework code. The base-url is the Python prefix of mount_bideux.

<link rel="stylesheet" href="https://unpkg.com/@dlh.io/bideux/dist/theme.css" />
<script
  type="module"
  src="https://unpkg.com/@dlh.io/bideux/dist/element/element.js"
></script>

<bideux-dashboard-list
  id="list"
  base-url="/api/dashboards"
></bideux-dashboard-list>
<bideux-dashboard
  id="page"
  base-url="/api/dashboards"
  hidden
></bideux-dashboard>
<script type="module">
  const list = document.getElementById("list");
  const page = document.getElementById("page");
  list.addEventListener("open", (event) => {
    page.setAttribute("dashboard-id", event.detail.dashboardId);
    list.hidden = true;
    page.hidden = false;
  });
  page.addEventListener("back", () => {
    page.hidden = true;
    list.hidden = false;
  });
</script>

In a bundled app, import "@dlh.io/bideux/element"; registers the same elements. bideux init writes this page; examples/vanilla-reader (Vite) and examples/angular-reader are the same page inside a framework, and neither imports React. <bideux-embed base-url token> renders a dashboard for a token the host minted; bearer-token on any element adds an Authorization header.

React host in three imports

import "@dlh.io/bideux/styles.css";
import { createDefaultRenderers } from "@dlh.io/bideux/renderers";
import {
  DashboardReader,
  DashboardReaderProvider,
  createHttpDashboardTransport,
} from "@dlh.io/bideux/react";

const transport = createHttpDashboardTransport({
  baseUrl: "/api/custom-dashboards",
  prepare: (_url, init) => ({
    ...init,
    headers: { ...init.headers, authorization: `Bearer ${token}` },
  }),
});
const renderers = createDefaultRenderers();

<DashboardReaderProvider transport={transport} renderers={renderers}>
  <DashboardReader dashboard={dashboard} widgets={widgets} />
</DashboardReaderProvider>;

Everything stays replaceable:

• createDefaultRenderers({ theme, overrides }) takes fixed theme tokens or a function of the mount element (the default reads --primary, --border and the other shadcn style variables from the document root), and any factory in overrides replaces the default for that component name. A host that wants its own map still writes RendererFactories by hand.
• createHttpDashboardTransport and createHttpAuthoringTransport speak the route shape bideux.fastapi.build_dashboard_router serves. baseUrl, query, fetch and prepare are the host's; a host with different routes writes its own DashboardTransport and AuthoringTransport as before.
• The ui and icons props of the React providers are untouched: hand in your design system or use the built in defaults.

What is bundled and what is not

Bundled from source: the eight @dlh.io/bideux-dashboard-* packages. Consumers never see them.

Ordinary dependencies, installed with this package: echarts, tabulator-tables, @revolist/revogrid, react-grid-layout, date-fns and yaml. Keeping them as dependencies rather than inlining them means a host that already uses ECharts gets one copy, and the public types that mention them (EChartsRuntime, the Tabulator Options) resolve.

Peers: react and react-dom, only for ./react and ./all.

Version

The package version tracks the @dlh.io/bideux-dashboard-* packages it is built from; the release script refuses to publish it when they differ.