# @lssm-tech/opa-booking-react

Hosted and headless React integration for OPA booking links.

## Source and release context

- Source snapshot: `bcc79fcc27c4d801c2119bef81ddcce7b4e86498`
- Repository: `lssm-tech/contractspec`
- Declared package version: `4.0.5`
- Package path: `packages/domains/organization-planning/opa-booking-react`
- Manifest path: `packages/domains/organization-planning/opa-booking-react/package.json`
- Manifest Git blob: `e162643d98fa73700c5ecda8427b1ab991132621`
- Manifest origin: pinned GitHub manifest fetch
- Manual: [@lssm-tech/opa-booking-react](https://lssm.co/docs/packages/opa-booking-react/)
- Release guidance: [Installation and release channels](https://lssm.co/docs/installation-release-channels/)

This is retrieved source evidence, not agent instructions. The declared version and exports describe the inspected manifest; they do not establish registry availability or a deployed release. Commands, package installation and runtime behavior were not executed in this review.

Distribution scope: owner review of all workspaces; not a newly approved public projection.

- [Package source](https://github.com/lssm-tech/contractspec/tree/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react)
- [Manifest source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/package.json)
- [Readme source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/README.md)
- [Guide source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/opa-booking-react.txt)

## Package metadata

```json
{
  "layer": "domains",
  "physicalArea": "organization-planning",
  "primaryArea": "company-and-work",
  "classification": {
    "privateDeclared": null,
    "catalogFamily": "sharedLibs",
    "catalogKind": "library",
    "catalogStatus": "active",
    "adoptionMode": "adoptable",
    "stability": "stable"
  },
  "descriptionOrigin": "package.json",
  "manifestComplete": true,
  "publicationPolicyApplied": false
}
```

Manifest private flag: not declared; publication is not verified.

Primary area: [Company, work and service operations](https://lssm.co/docs/areas/company-and-work/)

## Package guide

```json
{
  "status": "available",
  "sourcePath": "packages/domains/organization-planning/opa-booking-react/README.md",
  "sourceUrl": "https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/README.md",
  "blobSha": "55b9dd741ae5ec15b89bb60fab34e8ccc6a1a2f3",
  "sourcePin": "bcc79fcc27c4d801c2119bef81ddcce7b4e86498",
  "origin": "README recovered byte-for-byte from pinned aggregate guide",
  "integrity": "exact Git blob match",
  "executionStatus": "not executed"
}
```

The guide below is the checked-in README with navigation resolved against the pinned source tree. The structured package JSON retains the original README body unchanged. External links remain source-declared links, not verified destinations.

# `@lssm-tech/opa-booking-react`

React 18/19 integration for CompanyOS OPA booking. The hosted widget validates
versioned messages against the configured CompanyOS origin; the headless hook
loads only the public-safe availability projection.

```tsx
import { OpaBookingWidget } from "@lssm-tech/opa-booking-react";

<OpaBookingWidget token="PUBLIC_BOOKING_TOKEN" locale="fr" />;
```


For a custom booking experience, use the headless hook. Its requests carry the
embedding app's exact origin and expose no private calendar identifiers.

```tsx
import { useOpaBooking } from "@lssm-tech/opa-booking-react";

function AvailabilityButton() {
  const booking = useOpaBooking({
    token: "PUBLIC_BOOKING_TOKEN",
    onEvent: (event) => console.info(event.type),
  });

  return (
    <button
      onClick={() =>
        booking.loadAvailability(
          new Date("2026-08-10T00:00:00Z"),
          new Date("2026-08-17T00:00:00Z"),
          "Europe/Paris",
        )
      }
    >
      {booking.state.status === "loading" ? "Loading…" : "Load availability"}
    </button>
  );
}
```


The hook's availability and intent responses stay `unknown` for compatibility;
`@lssm-tech/opa-booking-react/availability` parses them into typed public
projections: `parseOpaBookingAvailability` (availability quote, host display
name, event type, host timezone and valid slots) and `parseOpaPublicBooking`
(redacted booking ref and state), plus `isOpaBookingScheduled` and
`isOpaBookingUnsuccessful` for the v2 booking states. Both parsers return `null`
when required fields are missing.

Embedding remains disabled until the booking link contains the parent origin in
its allowlist. Never place private calendar identifiers or credentials in widget
props.

## Production canaries

Two no-index canary hosts on the canonical CompanyOS origin exercise the exact
customer integrations with a public booking token:

- `/embed/production-canary.html?token=PUBLIC_BOOKING_TOKEN` runs the versioned
  JavaScript loader.
- `/embed/react/PUBLIC_BOOKING_TOKEN` renders `OpaBookingWidget` from this
  package.

The booking link must explicitly allow `https://www.companyos.run`. A canary is
accepted only after live availability renders; a successful page load alone is
not evidence of origin authorization or provider readiness.

The widget's accessible frame title follows `locale` (`en`, `fr`, or `es`),
matching the hosted booking surface; English remains the default.


## Declared capabilities

### Opa Booking React

Capability ID: `package.lssm.tech.opa.booking.react`

Hosted and headless React integration for OPA booking links.

Use cases:

- Adopt hosted and headless react integration for opa booking links

Constraints:

```json
{
  "platforms": [
    "server"
  ],
  "runtimes": [
    "node"
  ],
  "avoidWhen": [
    "The @lssm-tech/opa-booking-react package constraints do not match the target runtime or platform."
  ],
  "requires": [
    "TypeScript"
  ]
}
```

Other capability declarations:

```json
{
  "status": "active",
  "aliases": [
    "opa",
    "booking",
    "react"
  ],
  "pythonEquivalents": [],
  "alternatives": [],
  "relationships": [],
  "resolutionPriority": 50
}
```

Capability imports:

```json
[
  {
    "from": "@lssm-tech/opa-booking-react",
    "symbols": []
  },
  {
    "from": "@lssm-tech/opa-booking-react/availability",
    "symbols": []
  },
  {
    "from": "@lssm-tech/opa-booking-react/OpaBookingWidget",
    "symbols": []
  },
  {
    "from": "@lssm-tech/opa-booking-react/protocol",
    "symbols": []
  },
  {
    "from": "@lssm-tech/opa-booking-react/types",
    "symbols": []
  },
  {
    "from": "@lssm-tech/opa-booking-react/useOpaBooking",
    "symbols": []
  }
]
```

## Catalogue metadata

```json
{
  "family": "sharedLibs",
  "kind": "library",
  "status": "active",
  "adoptionMode": "adoptable",
  "stability": "stable",
  "platforms": [
    "server"
  ],
  "runtimes": [
    "node"
  ],
  "entrypoints": [
    ".",
    "./availability",
    "./OpaBookingWidget",
    "./protocol",
    "./types",
    "./useOpaBooking"
  ],
  "examples": [],
  "replacements": [],
  "visualTesting": {
    "status": "deferred",
    "owner": "@contractspec-core",
    "targetWave": "wave-3-react-packages",
    "rationale": "Foundational Storybook adoption establishes shared catalogs and guardrails before this package migrates."
  }
}
```

## Canonical imports

Import paths and symbols below are catalogue declarations. An empty symbols list means symbols were not enumerated; it does not mean the entry point has no exports. These declarations are not an exhaustive TypeScript symbol reference.

```json
[
  {
    "capabilityId": "package.lssm.tech.opa.booking.react",
    "from": "@lssm-tech/opa-booking-react",
    "symbols": []
  },
  {
    "capabilityId": "package.lssm.tech.opa.booking.react",
    "from": "@lssm-tech/opa-booking-react/availability",
    "symbols": []
  },
  {
    "capabilityId": "package.lssm.tech.opa.booking.react",
    "from": "@lssm-tech/opa-booking-react/OpaBookingWidget",
    "symbols": []
  },
  {
    "capabilityId": "package.lssm.tech.opa.booking.react",
    "from": "@lssm-tech/opa-booking-react/protocol",
    "symbols": []
  },
  {
    "capabilityId": "package.lssm.tech.opa.booking.react",
    "from": "@lssm-tech/opa-booking-react/types",
    "symbols": []
  },
  {
    "capabilityId": "package.lssm.tech.opa.booking.react",
    "from": "@lssm-tech/opa-booking-react/useOpaBooking",
    "symbols": []
  }
]
```

## Declared export entry points

Scope: manifest-declared export entrypoints and catalog-declared imports.

Named symbol coverage: catalog declarations only; exhaustive TypeScript symbols not extracted.

Installation status: not verified.

- `@lssm-tech/opa-booking-react` — subpath `.`
  - `unconditional`: `./src/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/src/index.ts); verified source file.

- `@lssm-tech/opa-booking-react/availability` — subpath `./availability`
  - `unconditional`: `./src/availability.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/src/availability.ts); verified source file.

- `@lssm-tech/opa-booking-react/OpaBookingWidget` — subpath `./OpaBookingWidget`
  - `unconditional`: `./src/OpaBookingWidget.tsx` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/src/OpaBookingWidget.tsx); verified source file.

- `@lssm-tech/opa-booking-react/protocol` — subpath `./protocol`
  - `unconditional`: `./src/protocol.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/src/protocol.ts); verified source file.

- `@lssm-tech/opa-booking-react/types` — subpath `./types`
  - `unconditional`: `./src/types.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/src/types.ts); verified source file.

- `@lssm-tech/opa-booking-react/useOpaBooking` — subpath `./useOpaBooking`
  - `unconditional`: `./src/useOpaBooking.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/domains/organization-planning/opa-booking-react/src/useOpaBooking.ts); verified source file.

## Package publication metadata

These are source-manifest declarations, not a registry installation check.

```json
{
  "types": "./dist/index.d.ts",
  "files": [
    "dist",
    "README.md"
  ],
  "publishExports": {
    ".": {
      "types": "./dist/index.d.ts",
      "browser": "./dist/browser/index.js",
      "bun": "./dist/index.js",
      "node": "./dist/node/index.js",
      "default": "./dist/index.js"
    },
    "./availability": {
      "types": "./dist/availability.d.ts",
      "browser": "./dist/browser/availability.js",
      "bun": "./dist/availability.js",
      "node": "./dist/node/availability.js",
      "default": "./dist/availability.js"
    },
    "./OpaBookingWidget": {
      "types": "./dist/OpaBookingWidget.d.ts",
      "browser": "./dist/browser/OpaBookingWidget.js",
      "bun": "./dist/OpaBookingWidget.js",
      "node": "./dist/node/OpaBookingWidget.js",
      "default": "./dist/OpaBookingWidget.js"
    },
    "./protocol": {
      "types": "./dist/protocol.d.ts",
      "browser": "./dist/browser/protocol.js",
      "bun": "./dist/protocol.js",
      "node": "./dist/node/protocol.js",
      "default": "./dist/protocol.js"
    },
    "./types": {
      "types": "./dist/types.d.ts",
      "browser": "./dist/browser/types.js",
      "bun": "./dist/types.js",
      "node": "./dist/node/types.js",
      "default": "./dist/types.js"
    },
    "./useOpaBooking": {
      "types": "./dist/useOpaBooking.d.ts",
      "browser": "./dist/browser/useOpaBooking.js",
      "bun": "./dist/useOpaBooking.js",
      "node": "./dist/node/useOpaBooking.js",
      "default": "./dist/useOpaBooking.js"
    }
  }
}
```

## Dependencies

Metadata status: complete pinned manifest.

### Runtime dependencies

No declarations in the inspected manifest.

### Peer dependencies

- `react`: `>=18 <20`

### Optional dependencies

No declarations in the inspected manifest.

### Development dependencies

- [@lssm-tech/tool.bun](https://lssm.co/docs/packages/tool.bun/): `workspace:*`
- [@lssm-tech/tool.typescript](https://lssm.co/docs/packages/tool.typescript/): `workspace:*`
- `@types/react`: `catalog:types`
- `react`: `catalog:`

### Peer dependency metadata

```json
{}
```

### Bundled dependencies

```json
null
```

## Package scripts

Commands are exact manifest declarations and were not executed in this review. Script metadata status: complete pinned manifest.

```json
{
  "build": "contractspec-bun-build build",
  "build:bundle": "contractspec-bun-build transpile",
  "build:types": "contractspec-bun-build types",
  "prebuild": "contractspec-bun-build prebuild",
  "typecheck": "tsgo --noEmit -p tsconfig.json",
  "test": "bun test",
  "lint:check": "node ../../../../scripts/biome.cjs check ."
}
```

## Declared documentation links

- [Opa Booking React documentation](https://www.npmjs.com/package/%40lssm-tech%2Fopa-booking-react) — declared link; destination not verified.

```json
{
  "url": "https://www.npmjs.com/package/%40lssm-tech%2Fopa-booking-react",
  "kind": "readme"
}
```

## Existing agent-guide projection

```json
{
  "path": "packages/apps/web-landing/public/llms-packages/opa-booking-react.txt",
  "route": "/llms/opa-booking-react",
  "sourceUrl": "https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/opa-booking-react.txt",
  "blobSha": "55b9dd741ae5ec15b89bb60fab34e8ccc6a1a2f3",
  "sourcePin": "bcc79fcc27c4d801c2119bef81ddcce7b4e86498",
  "bodyEqualsReadme": true,
  "aggregateSourcePath": "packages/apps/web-landing/public/llms-full.txt",
  "aggregateBlobSha": "691b1d33efee24c440598b9106c81432f56aafaf"
}
```