Build with thesame patternsacross the platform.

import { TopNav, type TopNavTab } from '@ambientintel/ui';

const TABS: TopNavTab[] = [
  { href: '/',         label: 'Overview' },
  { href: '/eng',      label: 'Engineering Center' },
  { href: '/onboarding/engineering', label: 'Onboarding' },
];

<TopNav
  tabs={TABS}
  activeHref="/eng"
  rightSlot={<SignInButton />}
/>

import { Footer } from '@ambientintel/ui';

const LABS_COLUMN = {
  heading: 'Labs',
  links: [
    { href: '/algorithm',  label: 'Algorithm Lab' },
    { href: '/code',       label: 'Code Lab' },
  ],
};

<Footer extraColumn={LABS_COLUMN} />

import { COLORS } from '@ambientintel/tokens';

<div style={{
  background: COLORS.cream,
  color: COLORS.text,
  border: `1px solid ${COLORS.line}`,
}}>
  ...
</div>

import { FONTS } from '@ambientintel/tokens';

<h1 style={{ fontFamily: FONTS.serif }}>
  Headline
</h1>

<p style={{ fontFamily: FONTS.sans, fontWeight: 300 }}>
  Body copy in Die Grotesk A Light.
</p>

<span style={{ fontFamily: FONTS.mono }}>
  STATUS · LIVE
</span>

import { CONTAINER_WIDTH } from '@ambientintel/tokens';

<section style={{
  margin: '0 auto',
  maxWidth: CONTAINER_WIDTH,   // 1274
  padding: '48px 24px',
}}>
  ...
</section>

import { STATUS_BADGE, type StatusKey } from '@ambientintel/tokens';

const s = STATUS_BADGE.live;  // or 'soon', 'rnd', 'migrating'

<span style={{
  fontFamily: 'var(--font-jetbrains-mono), monospace',
  fontSize: 9.5,
  padding: '3px 9px',
  borderRadius: 999,
  background: s.bg,
  color: s.color,
  border: `1px solid ${s.border}`,
  textTransform: 'uppercase',
  letterSpacing: '0.04em',
}}>
  {s.label}
</span>

<TopNav tabs={TABS} activeHref="/" />

<section style={{ margin: '0 auto', maxWidth: 1274, padding: '48px 24px 28px' }}>
  <div style={{ fontFamily: 'var(--font-jetbrains-mono), monospace',
       fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
       color: '#9CA3AF', marginBottom: 10 }}>
    Subdomain · Page
  </div>
  <h1 style={{ fontFamily: 'var(--font-tiempos-fine), Georgia, serif',
       fontWeight: 400, fontSize: 'clamp(48px, 6vw, 80px)',
       lineHeight: 1.0, letterSpacing: '-0.02em' }}>
    <span style={{ display: 'block' }}>Word</span>
    <span style={{ display: 'block', fontStyle: 'italic' }}>Italic</span>
    <span style={{ display: 'block' }}>Word.</span>
  </h1>
  <p style={{ /* italic Tiempos, 22px, max-width 680 */ }}>
    One-sentence scope statement.
  </p>
</section>

<Footer />

feat(ambient-lab): add Code Lab card to Labs hub
fix(ambient-device): firmware sidebar engineering link
chore(deps): bump next from 16.2.6 to 16.3.0
refactor(ui): extract status badge to shared component
docs(adr): add ADR-0004 on canvas pattern strategy

// Yes
"Cybersecurity. Cloud, device, and data security for Ambient Intelligence."

// No
"Cybersecurity — cloud, device, and data security for Ambient Intelligence."

// Decision rubric:
//
// 1. Duplication within ONE app?
//    → apps/<name>/src/lib/<thing>.ts (no package)
//
// 2. Duplication across TWO+ apps with drift observed?
//    → packages/<domain>/  +  @ambientintel/<domain>
//
// 3. "This looks reusable" but only one app uses it?
//    → Leave it. Reuse later is one PR; un-extraction is painful.
//
// Three extracted in practice so far:
//   - Footer       (cross-app component)    @ambientintel/ui
//   - TopNav       (cross-app component)    @ambientintel/ui
//   - eng-domains  (cross-app data registry) @ambientintel/eng-domains

// 1. Open https://lab.ambienthealthgroup.com/tokens
// 2. Tweak any value with the color picker or numeric input
// 3. Watch the live preview update; check the diff panel
// 4. Optional: write a PR description
// 5. Click "Submit PR" → branch is created, PR opens
// 6. Review the diff on GitHub, merge when ready
//
// All consuming apps rebuild on their next push.