# asurance/openify architecture

> Architecture diagram of the GitHub repository asurance/openify, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/asurance/openify
- Repository: https://github.com/asurance/openify

## Overview

Openify is a small React utility for opening modal-like components imperatively and receiving their results as promises. A consumer wraps a component with `openify`, renders a `Slot` with an ID, then calls that slot’s `open` method; the slot mounts and opens the component, whose close or error callbacks settle the promise. Cancellation closes the mounted component. The graph focuses on the sampled runtime source; the README demonstrates the workflow with a modal, but does not establish a specific modal-library dependency.

Main entry points: [`src/Slot.tsx`](https://github.com/asurance/openify/blob/master/src/Slot.tsx) (Slot manager), [`src/openify.tsx`](https://github.com/asurance/openify/blob/master/src/openify.tsx) (Openable wrapper), [`src/index.ts`](https://github.com/asurance/openify/blob/master/src/index.ts) (Public API)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_consumer(("React consumer"))
node_public_api["Public API<br/>[index.ts]"]
node_openify["Openable wrapper<br/>[openify.tsx]"]
node_slot["Slot manager<br/>[Slot.tsx]"]
node_wrapped_component["Wrapped component"]
node_open_promise["Open promise"]

node_consumer -->|"imports"| node_public_api
node_consumer -->|"wraps component"| node_openify
node_consumer -->|"renders and opens"| node_slot
node_slot -->|"mounts and opens"| node_wrapped_component
node_openify -->|"renders"| node_wrapped_component
node_wrapped_component -->|"closes or errors"| node_slot
node_slot -->|"settles"| node_open_promise
node_consumer -->|"awaits result"| node_open_promise

click node_public_api "https://github.com/asurance/openify/blob/master/src/index.ts"
click node_openify "https://github.com/asurance/openify/blob/master/src/openify.tsx"
click node_slot "https://github.com/asurance/openify/blob/master/src/Slot.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_consumer,node_wrapped_component,node_open_promise toneIndigo
class node_public_api toneMint
class node_openify,node_slot toneTeal
```

## Components

### Other components

- **React consumer**
- [Public API](https://github.com/asurance/openify/blob/master/src/index.ts): `src/index.ts`
- [Openable wrapper](https://github.com/asurance/openify/blob/master/src/openify.tsx): `src/openify.tsx`
- [Slot manager](https://github.com/asurance/openify/blob/master/src/Slot.tsx): `src/Slot.tsx`
- **Wrapped component**
- **Open promise**

## Connections

- React consumer → Public API: imports
- React consumer → Openable wrapper: wraps component
- React consumer → Slot manager: renders and opens
- Slot manager → Wrapped component: mounts and opens
- Openable wrapper → Wrapped component: renders
- Wrapped component → Slot manager: closes or errors
- Slot manager → Open promise: settles
- React consumer → Open promise: awaits result