Bloxwap / HIG0.1.1
GuidelinesMigration

Five SDK documentation pilots (#34)

Owner: Joe Blau (accepted in #57), with each SDK repository retaining implementation ownership. Preserve each interactive SDK demo and its host APIs; HIG replaces shared presentation only. As of 2026-10-27, all five docs sites install published HIG 0.1.0: hyperliquid#217, chart#78, font#39, sfx#80 and haptic#49. The earlier candidate refreshes removed the legacy peer installs, nested Radix trees, font bridges and generated role workaround. Exact source, validation, historical measurements and residual exceptions remain in the owning PRs and planning/adoption.json.

RepositoryShared presentationDistinctive feature to preserveRemaining owner validation
hyperliquidFont/tokens, shell/nav/search, code/install/copy/callout/forms/statesMarket playground and live SDK request handlingProduction/static export, query/deep links, market demo errors/loading, copy/search/mobile keyboard
chartSame shell/controls plus HIG chart themeChart preview, drawings/controls, pan/zoom/crosshair and WASM/worker pathsCanvas/text summary, gesture responsiveness, base assets, chart-specific demos remain optional
fontType roles, common controls/geometry and code windowsType tester, glyph coverage, variable axes and locale companionsFont licensing/provenance, subsets/bytes, scripts/RTL/large text and tester functionality
sfxControls/presets/settings/docs statesSound board and recipe editor/exportTrusted audio unlock, mute/volume, edited recipes, native WAV command docs and cleanup
hapticCommon controls and explicit capability labelsPhysical-target/platform demo and certification referencesPhysical iOS/Android/VoiceOver evidence remains upstream haptic#9; no API-call-as-tactile-proof claims

Docs sites that render Markdown tables or plain form controls relied on the page-wide rules that @bloxwap/hig/react/css set before #95. On a candidate that contains #95, add @import '@bloxwap/hig/react/css/base'; before @import '@bloxwap/hig/react/css'; to keep the same look, as the HIG docs site does. See installation.

Per-repo checklist:

  • Pin source commit, HIG version and staged tarballs; capture before pages and duplicate CSS/primitive/font/audio/dependency/bundle baseline.
  • Inventory each existing apps/docs shell, static base path, metadata, search/index adapter, CSS/Next font loader and copy/install control.
  • Preview import mapping; preserve API props, router/search and SDK-specific business/demo logic. Plain HTML surfaces can use tokens/CSS alone.
  • Migrate one shared shell/control page behind a rollback flag; preserve Fumadocs conventions or host equivalent and existing deep-link/base URLs.
  • Execute that repo's production/static build and distinctive demo. Verify asset paths, keyboard/search/copy/mobile nav, loading/error/offline states, large text/RTL, and muted feedback.
  • Compare equivalent screenshots and measured CSS/font/runtime bytes. Remove old files only after references are gone and tests pass.
  • Update five separate adoption rows with owning PR URL, validated version, current gaps and rollback commit. Do not combine them into an unsupported “all migrated” claim.

Rollback: restore previous package lock/imports and shell flag per repo. Retain SDK demos and deep links. New shared HIG adoption must not change published SDK API examples.

Compact source comparison

The October 14 review of the five local checkout revisions found the following presentation baseline. These are source line counts, including product-specific styles, comments and formatting; they are not an estimate of removable CSS.

Site revisionGlobal CSS linesMigration difference
Hyperliquid 53159f11,034Semantic color aliases and 160 ms interaction timing.
Chart 8c71c71440Nunito/Maple Mono remain; preserve chart previews.
Font b406391703Hex neutrals, specimen typography and wrapping buttons.
SFX 217eacb509Preserve sound-board and playback behavior.
Haptic b546223416Preserve platform capability and feedback demos.

Hyperliquid, Chart and SFX have byte-identical 172-line token snapshots; Haptic's declarations match with a different provenance comment. Chart, SFX and Haptic also repeat the same button and search recipes. Use the existing HIG token/component packages for shared behavior, and keep the written guide compact with rule → token or recipe → exception rather than duplicating the five implementations.

OG card fonts: switch to @bloxwap/hig/og-fonts (#99)

Since #64, chart, sfx, agent-cli and tapsiren vendor the whole @bloxwap/hig/native-fonts tarball (4,420,375 B, 15 faces) as a build-time dev dependency, but their Satori/next/og cards read only two to four TTFs. Switch each repository at its next HIG candidate refresh:

RepositoryOG card fileFaces it readsChange
chartapps/docs/lib/og-card.tsxSans 700, 900Replace the node_modules/@bloxwap/hig/native-fonts/fonts path with loadOgFonts(ogFonts.filter(f => f.weight >= 700))
sfxapps/docs/lib/og-card.tsxSans 700, 900Replace both hig.resolve('@bloxwap/hig/native-fonts/fonts/…') reads with the same loadOgFonts call
agent-cliapps/docs/lib/og-card.tsxSans 700, 900Same as sfx
tapsirenworkers/tapsiren/scripts/copy-og-fonts.mjsSans 400, 500, 700; Mono 500Keep the build-time copy (the card runs on Workers). Resolve @bloxwap/hig/og-fonts/manifest and @bloxwap/hig/og-fonts/fonts/<face> instead of the native package; the SHA-256 values do not change

In each repository:

  1. Vendor bloxwap-hig-og-fonts-<candidate>.tgz from artifacts/release-candidate/ (about 0.84 MB packed; the exact size is in packedSizes.ogFonts of that candidate's release report). Record its SHA-256 next to the other tarballs in vendor/bloxwap-hig/.
  2. Replace the @bloxwap/hig/native-fonts dev dependency with @bloxwap/hig/og-fonts, regenerate the lockfile, and delete the native fonts tarball unless the repository also ships a React Native app.
  3. Import the fonts from @bloxwap/hig/og-fonts/node (loadOgFonts, readOgFont). These check every SHA-256 against the package manifest. They work with the default Turbopack next build and with next build --webpack. If the docs app uses webpack with output: 'standalone' and the build moves, add serverExternalPackages: ['@bloxwap/hig']. Vendor a candidate that includes the per-face asset URL fix. Under Turbopack, an earlier 0.1.0 tarball returns 500 with SHA-256 … does not match the manifest. An edge host checks fontManifest.outputs itself, as tapsiren does. Font names ('Bloxwap Sans', 'Bloxwap Mono') and weights stay the same.
  4. Rebuild the OG cards and compare them with the previous images. The faces are byte-identical copies, so the cards should not change. Record the vendored-byte delta in the repository's adoption evidence and update its row in planning/adoption.json.

See Open Graph card fonts for the full API and the edge-runtime path.

Chart adapter: @bloxwap/hig/chart (#96)

@bloxwap/hig/react no longer has a ./chart entry or an optional @bloxwap/chart peer. PriceChart and chartTheme moved unchanged to @bloxwap/hig/chart, which requires @bloxwap/chart ^0.3.0 as a peer. The optional peer made npm drop chart's packages/chart workspace when package-lock.json was regenerated from scratch without legacy-peer-deps. This reproduces on npm 10.9.9, 11.6.1, 11.21.1 and 12.2.0. A required peer does not trigger it.

RepositoryUses @bloxwap/hig/react/chart?Change at the next HIG refresh
chartNo. The docs theme comes from @bloxwap/hig/tokens (apps/docs/scripts/hig-tokens.mjs)Vendor the new hig-react tarball. Remove the legacy-peer-deps regeneration note from vendor/bloxwap-hig/README.md. A from-scratch npm install then keeps @bloxwap/chart -> ./packages/chart. Vendor @bloxwap/hig/chart only if the docs adopt PriceChart
sfx, haptic, hyperliquid, fontNoNone beyond the usual tarball refresh

A host that does import the entry changes one specifier and adds the package:

-import {PriceChart} from '@bloxwap/hig/react/chart';
+import {PriceChart} from '@bloxwap/hig/chart';

The candidate was never published, and a GitHub code search on 2026-10-16 found no consumer outside this repository, so no deprecated shim is kept (see charts). npm run smoke:packed-chart-workspace reproduces chart's layout: an npm workspace whose packages/chart provides @bloxwap/chart, and an app that depends on the packed hig-react and hig-chart. It deletes the lockfile, reinstalls with strict peers and fails if the workspace link is lost.

On this page