@ohhwells/bridge 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# @ohhwells/bridge
|
|
2
|
+
|
|
3
|
+
The OhhWells canvas editor bridge — a standalone npm package that enables inline text and image editing for any site deployed on the OhhWells platform.
|
|
4
|
+
|
|
5
|
+
## What it does
|
|
6
|
+
|
|
7
|
+
When a studio owner opens their site in the OhhWells dashboard canvas editor, the bridge:
|
|
8
|
+
|
|
9
|
+
- Connects the iframe (the live site) to the parent canvas editor via `postMessage`
|
|
10
|
+
- Enables click-to-edit for text, images, and background images
|
|
11
|
+
- Handles draft saving and content hydration
|
|
12
|
+
- Provides state toggle UI for editing hidden content (hover states, form success/error views)
|
|
13
|
+
- Injects scoped styles that never leak into the host template
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @ohhwells/bridge
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Import the styles once in your template's root layout:
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import '@ohhwells/bridge/styles'
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
Add `OhhwellsBridge` to your template's root layout:
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { OhhwellsBridge } from '@ohhwells/bridge'
|
|
33
|
+
|
|
34
|
+
export default function RootLayout({ children }) {
|
|
35
|
+
return (
|
|
36
|
+
<html>
|
|
37
|
+
<body>
|
|
38
|
+
{children}
|
|
39
|
+
<OhhwellsBridge />
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
The bridge activates automatically when the page is loaded inside the OhhWells canvas editor. It has no effect in production (live site) mode.
|
|
47
|
+
|
|
48
|
+
## Template attributes
|
|
49
|
+
|
|
50
|
+
Mark elements as editable using `data-ohw-*` attributes. See [VIBECODER.md](https://github.com/TheFlowOps-Eng/rebound-template/blob/main/VIBECODER.md) for the full authoring guide.
|
|
51
|
+
|
|
52
|
+
| Attribute | Value | Description |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `data-ohw-key` | unique string | Identifier for storing/hydrating content |
|
|
55
|
+
| `data-ohw-editable` | `text` \| `plain` \| `image` \| `bg-image` | Edit mode |
|
|
56
|
+
| `data-ohw-editable-state` | `"hover,focus"` etc. | Declares available states on a container |
|
|
57
|
+
| `data-ohw-state-view` | `"default"` \| `"success"` \| `"error"` \| `"hover"` | Wraps each state's content |
|
|
58
|
+
|
|
59
|
+
## Design tokens
|
|
60
|
+
|
|
61
|
+
The package ships with the full OhhWells design token set, scoped to `[data-ohw-bridge]` so styles never leak into the host template.
|
|
62
|
+
|
|
63
|
+
### Semantic colors
|
|
64
|
+
|
|
65
|
+
All colors are defined as CSS variables on `[data-ohw-bridge-root]` and override-able per host:
|
|
66
|
+
|
|
67
|
+
| Token | Light | Dark |
|
|
68
|
+
|---|---|---|
|
|
69
|
+
| `background` | `#ffffff` | `#020617` |
|
|
70
|
+
| `foreground` | `#020617` | `#f8fafc` |
|
|
71
|
+
| `primary` | `#0f172a` | `#f8fafc` |
|
|
72
|
+
| `primary-foreground` | `#f8fafc` | `#0f172a` |
|
|
73
|
+
| `secondary` | `#f1f5f9` | `#1e293b` |
|
|
74
|
+
| `muted` | `#f1f5f9` | `#1e293b` |
|
|
75
|
+
| `muted-foreground` | `#64748b` | `#94a3b8` |
|
|
76
|
+
| `accent` | `#f1f5f9` | `#1e293b` |
|
|
77
|
+
| `border` | `#e2e8f0` | `#334155` |
|
|
78
|
+
| `destructive` | `#dc2626` | `#7f1d1d` |
|
|
79
|
+
| `success` | `#16a34a` | `#22c55e` |
|
|
80
|
+
|
|
81
|
+
### Typography
|
|
82
|
+
|
|
83
|
+
Standard Tailwind scale with Figma-specified tracking:
|
|
84
|
+
|
|
85
|
+
| Class | Size | Line height | Tracking |
|
|
86
|
+
|---|---|---|---|
|
|
87
|
+
| `text-9xl` | 128px | 1 | -0.025em |
|
|
88
|
+
| `text-8xl` | 96px | 1 | -0.025em |
|
|
89
|
+
| `text-7xl` | 72px | 1 | -0.025em |
|
|
90
|
+
| `text-6xl` | 60px | 1 | -0.025em |
|
|
91
|
+
| `text-5xl` | 48px | 1 | -0.025em |
|
|
92
|
+
| `text-4xl` | 36px | 40px | -0.025em |
|
|
93
|
+
| `text-3xl` | 30px | 36px | -0.025em |
|
|
94
|
+
| `text-2xl` | 24px | 32px | -0.025em |
|
|
95
|
+
| `text-xl` | 20px | 28px | -0.025em |
|
|
96
|
+
| `text-lg` | 18px | 28px | 0 |
|
|
97
|
+
| `text-base` | 16px | 24px | 0 |
|
|
98
|
+
| `text-sm` | 14px | 20px | 0 |
|
|
99
|
+
| `text-xs` | 12px | 16px | 0 |
|
|
100
|
+
|
|
101
|
+
### Brand palette
|
|
102
|
+
|
|
103
|
+
Re:Bound brand colors are available as named tokens: `bone`, `ivory`, `sand`, `linen`, `stone`, `clay`, `umber`, `umber-deep`, `espresso`, `clove`, `ink`, `ash`, `carbon`.
|
|
104
|
+
|
|
105
|
+
## Dark mode
|
|
106
|
+
|
|
107
|
+
Add the `dark` class to `[data-ohw-bridge-root]` to activate dark token overrides:
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<div data-ohw-bridge-root class="dark">...</div>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Development
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
# Install dependencies
|
|
117
|
+
npm install
|
|
118
|
+
|
|
119
|
+
# Build (TypeScript + CSS)
|
|
120
|
+
npm run build
|
|
121
|
+
|
|
122
|
+
# Watch mode
|
|
123
|
+
npm run dev
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Output is written to `dist/`:
|
|
127
|
+
- `dist/index.js` — CJS
|
|
128
|
+
- `dist/index.mjs` — ESM
|
|
129
|
+
- `dist/index.d.ts` — TypeScript declarations
|
|
130
|
+
- `dist/styles.css` — Scoped Tailwind CSS
|
|
131
|
+
|
|
132
|
+
## Publishing
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
npm run build
|
|
136
|
+
npm publish --access public
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## License
|
|
140
|
+
|
|
141
|
+
MIT
|