Consumer Setup

Install packages

Install the packages you need from the npm registry. Server-rendered UI and transport helpers need hono. Every package expects TypeScript-aware tooling, and Bun apps should install Bun's public type package.

npm install @macavitymadcap/hyper-dank-ui @macavitymadcap/hyper-dank-data @macavitymadcap/hyper-dank-transport @macavitymadcap/hyper-dank-automation hono
npm install --save-dev typescript bun-types

bun add @macavitymadcap/hyper-dank-ui @macavitymadcap/hyper-dank-data @macavitymadcap/hyper-dank-transport @macavitymadcap/hyper-dank-automation hono
bun add --dev typescript bun-types

yarn add @macavitymadcap/hyper-dank-ui @macavitymadcap/hyper-dank-data @macavitymadcap/hyper-dank-transport @macavitymadcap/hyper-dank-automation hono
yarn add --dev typescript bun-types

pnpm add @macavitymadcap/hyper-dank-ui @macavitymadcap/hyper-dank-data @macavitymadcap/hyper-dank-transport @macavitymadcap/hyper-dank-automation hono
pnpm add --save-dev typescript bun-types

Install the optional Playwright peer only when your app uses browser screenshots, E2E checks, or Playwright-backed automation helpers.

npm install --save-dev @playwright/test

TypeScript and JSX

Hyper-Dank UI components use Hono JSX. Set the JSX runtime in the consuming app's tsconfig.json.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "module": "Preserve",
    "moduleResolution": "bundler",
    "target": "ESNext",
    "types": ["bun-types"]
  }
}

The packages publish source for Bun and declaration files in dist/. Bun consumers can import the package names directly. Other build systems should use TypeScript-aware bundler resolution.

CSS import

Import the UI CSS from a browser bundle or another static asset pipeline. Importing a component in server code does not load browser styles on its own.

import "@macavitymadcap/hyper-dank-ui/styles.css";

Layer product CSS after the package CSS when your app needs its own layout, density, or brand styling.

Minimal smoke

This small script checks the package exports, the CSS subpath, server-rendered JSX, data helpers, transport helpers, and static-content automation.

import { renderMarkdown } from "@macavitymadcap/hyper-dank-automation/content";
import { createProviderRegistry, runPendingMigrations } from "@macavitymadcap/hyper-dank-data";
import { FormValues, HttpResponder, isHtmxRequest } from "@macavitymadcap/hyper-dank-transport";
import { Button, Panel } from "@macavitymadcap/hyper-dank-ui";

import "@macavitymadcap/hyper-dank-ui/styles.css";

const cssUrl = import.meta.resolve("@macavitymadcap/hyper-dank-ui/styles.css");
const cssResponse = await fetch(cssUrl);

if (!cssResponse.ok) {
  throw new Error("Expected the UI CSS export to resolve.");
}

const html = String(
  <Panel labelledBy="package-smoke-heading">
    <h1 id="package-smoke-heading">Package smoke</h1>
    <Button type="button" variant="ghost">
      Save
    </Button>
  </Panel>,
);

const applied: string[] = [];
await runPendingMigrations(
  {
    hasMigration: (id) => applied.includes(id),
    recordMigration: (id) => {
      applied.push(id);
    },
    runMigration: () => {},
  },
  [{ id: "001", sql: "select 1" }],
);

const providers = createProviderRegistry({
  memory: () => ({
    close: () => {},
    createRepositories: () => ({}),
    kind: "memory" as const,
    migrate: () => {},
  }),
});

const provider = await providers.create("memory", {});
const form = new FormValues({ enabled: "on" });

if (
  !html.includes("Package smoke") ||
  applied[0] !== "001" ||
  provider.kind !== "memory" ||
  form.boolean("enabled") !== true ||
  !isHtmxRequest({ "HX-Request": "true" }) ||
  !(new HttpResponder() instanceof HttpResponder) ||
  !renderMarkdown("# Package smoke").includes("<h1")
) {
  throw new Error("Expected public package imports to work.");
}

Package pages