One bar. Every product.

import { defineToolbarApp } from "@cuitty/toolbar-module-sdk";

export const myApp = defineToolbarApp({
  id: "my-module",
  name: "My Module",
  category: "custom",
  icon: { type: "lucide", name: "Box" },
  surfaces: { launcher: true, panel: true },
  entrypoint: {
    type: "iframe",
    url: "/api/my-module/toolbar-panel",
  },
  badge: {
    endpoint: "/api/my-module/toolbar-badge",
    refreshIntervalMs: 30_000,
  },
});

// GET /api/my-module/toolbar-badge
export function handler(req: Request) {
  const count = getActiveItemCount();
  return Response.json({
    severity: count > 0 ? "info" : undefined,
    count: count > 0 ? count : undefined,
    tooltip: `${count} active items`,
  });
}

import { ToolbarPanelBridge }
  from "@cuitty/toolbar-module-sdk";

const bridge = new ToolbarPanelBridge();

// Resize the panel
bridge.resize({ height: 400 });

// Navigate the host app
bridge.navigate("/dashboard/my-module");

// Proxy API through the toolbar transport
const data = await bridge.request(
  "GET", "/api/my-module/items"
);

import { requireToolbarPermission }
  from "@cuitty/toolbar-module-sdk";

// In your panel's request handler:
export function panelHandler(req: Request) {
  const envelope = getToolbarEnvelope(req);

  // Throws 403 if actor lacks permission
  requireToolbarPermission(
    envelope,
    "my-module:read"
  );

  return renderPanel(envelope);
}