@ohhwells/bridge 0.1.29-next.25 → 0.1.29-next.27
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/dist/index.cjs +140 -122
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +124 -106
- package/dist/index.js.map +1 -1
- package/dist/styles.css +12 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -4759,40 +4759,10 @@ function Label({ className, ...props }) {
|
|
|
4759
4759
|
);
|
|
4760
4760
|
}
|
|
4761
4761
|
|
|
4762
|
-
// src/ui/popover.tsx
|
|
4763
|
-
var import_radix_ui6 = require("radix-ui");
|
|
4764
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
4765
|
-
function Popover({ ...props }) {
|
|
4766
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui6.Popover.Root, { "data-slot": "popover", ...props });
|
|
4767
|
-
}
|
|
4768
|
-
function PopoverTrigger({ ...props }) {
|
|
4769
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui6.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
4770
|
-
}
|
|
4771
|
-
function PopoverContent({
|
|
4772
|
-
className,
|
|
4773
|
-
align = "start",
|
|
4774
|
-
sideOffset = 6,
|
|
4775
|
-
...props
|
|
4776
|
-
}) {
|
|
4777
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui6.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4778
|
-
import_radix_ui6.Popover.Content,
|
|
4779
|
-
{
|
|
4780
|
-
"data-slot": "popover-content",
|
|
4781
|
-
align,
|
|
4782
|
-
sideOffset,
|
|
4783
|
-
className: cn(
|
|
4784
|
-
"z-[2147483647] w-[var(--radix-popover-trigger-width)] overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg outline-none",
|
|
4785
|
-
className
|
|
4786
|
-
),
|
|
4787
|
-
...props
|
|
4788
|
-
}
|
|
4789
|
-
) });
|
|
4790
|
-
}
|
|
4791
|
-
|
|
4792
4762
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
4793
|
-
var
|
|
4763
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
4794
4764
|
function FieldChevron({ onClick }) {
|
|
4795
|
-
return /* @__PURE__ */ (0,
|
|
4765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4796
4766
|
"button",
|
|
4797
4767
|
{
|
|
4798
4768
|
type: "button",
|
|
@@ -4800,7 +4770,7 @@ function FieldChevron({ onClick }) {
|
|
|
4800
4770
|
onClick,
|
|
4801
4771
|
"aria-label": "Open page list",
|
|
4802
4772
|
tabIndex: -1,
|
|
4803
|
-
children: /* @__PURE__ */ (0,
|
|
4773
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconChevronDown, {})
|
|
4804
4774
|
}
|
|
4805
4775
|
);
|
|
4806
4776
|
}
|
|
@@ -4839,12 +4809,12 @@ function UrlOrPageInput({
|
|
|
4839
4809
|
"data-ohw-link-field flex h-10 w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
|
|
4840
4810
|
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
4841
4811
|
);
|
|
4842
|
-
return /* @__PURE__ */ (0,
|
|
4843
|
-
/* @__PURE__ */ (0,
|
|
4844
|
-
/* @__PURE__ */ (0,
|
|
4845
|
-
/* @__PURE__ */ (0,
|
|
4846
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
4847
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
4812
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
4813
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
4814
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative w-full", children: [
|
|
4815
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
4816
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconFile, { className: "text-foreground", "aria-hidden": true }) }) : null,
|
|
4817
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4848
4818
|
Input,
|
|
4849
4819
|
{
|
|
4850
4820
|
ref: inputRef,
|
|
@@ -4863,7 +4833,7 @@ function UrlOrPageInput({
|
|
|
4863
4833
|
)
|
|
4864
4834
|
}
|
|
4865
4835
|
),
|
|
4866
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
4836
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4867
4837
|
"button",
|
|
4868
4838
|
{
|
|
4869
4839
|
type: "button",
|
|
@@ -4871,26 +4841,34 @@ function UrlOrPageInput({
|
|
|
4871
4841
|
onMouseDown: clearSelection,
|
|
4872
4842
|
"aria-label": "Clear selected page",
|
|
4873
4843
|
tabIndex: -1,
|
|
4874
|
-
children: /* @__PURE__ */ (0,
|
|
4844
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconX, { "aria-hidden": true })
|
|
4875
4845
|
}
|
|
4876
4846
|
) : null,
|
|
4877
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
4878
|
-
] })
|
|
4879
|
-
filteredPages.length > 0
|
|
4880
|
-
"
|
|
4847
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
4848
|
+
] }),
|
|
4849
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4850
|
+
"div",
|
|
4881
4851
|
{
|
|
4882
|
-
|
|
4883
|
-
className: "
|
|
4884
|
-
|
|
4885
|
-
children:
|
|
4886
|
-
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
4890
|
-
|
|
4891
|
-
|
|
4852
|
+
"data-ohw-link-page-dropdown": "",
|
|
4853
|
+
className: "absolute left-0 right-0 h-20 top-[calc(100%+4px)] z-10 max-h-48 overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg",
|
|
4854
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
4855
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
4856
|
+
"button",
|
|
4857
|
+
{
|
|
4858
|
+
type: "button",
|
|
4859
|
+
className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
|
|
4860
|
+
onClick: () => onPageSelect(page),
|
|
4861
|
+
children: [
|
|
4862
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconFile, { className: "shrink-0", "aria-hidden": true }),
|
|
4863
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: page.title })
|
|
4864
|
+
]
|
|
4865
|
+
},
|
|
4866
|
+
page.path
|
|
4867
|
+
))
|
|
4868
|
+
}
|
|
4869
|
+
) : null
|
|
4892
4870
|
] }),
|
|
4893
|
-
urlError ? /* @__PURE__ */ (0,
|
|
4871
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
4894
4872
|
] });
|
|
4895
4873
|
}
|
|
4896
4874
|
|
|
@@ -5058,7 +5036,7 @@ function useLinkModalState({
|
|
|
5058
5036
|
}
|
|
5059
5037
|
|
|
5060
5038
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5061
|
-
var
|
|
5039
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
5062
5040
|
function LinkEditorPanel({
|
|
5063
5041
|
open = true,
|
|
5064
5042
|
mode = "create",
|
|
@@ -5082,25 +5060,25 @@ function LinkEditorPanel({
|
|
|
5082
5060
|
onSubmit
|
|
5083
5061
|
});
|
|
5084
5062
|
const isCancel = state.secondaryLabel === "Cancel";
|
|
5085
|
-
return /* @__PURE__ */ (0,
|
|
5086
|
-
/* @__PURE__ */ (0,
|
|
5063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
5064
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5087
5065
|
"button",
|
|
5088
5066
|
{
|
|
5089
5067
|
type: "button",
|
|
5090
5068
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
5091
5069
|
"aria-label": "Close",
|
|
5092
|
-
children: /* @__PURE__ */ (0,
|
|
5070
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconX, { "aria-hidden": true })
|
|
5093
5071
|
}
|
|
5094
5072
|
) }),
|
|
5095
|
-
/* @__PURE__ */ (0,
|
|
5096
|
-
/* @__PURE__ */ (0,
|
|
5097
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5073
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
5074
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
5075
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5098
5076
|
DestinationBreadcrumb,
|
|
5099
5077
|
{
|
|
5100
5078
|
pageTitle: state.selectedPage.title,
|
|
5101
5079
|
sectionLabel: state.selectedSection.label
|
|
5102
5080
|
}
|
|
5103
|
-
) : /* @__PURE__ */ (0,
|
|
5081
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5104
5082
|
UrlOrPageInput,
|
|
5105
5083
|
{
|
|
5106
5084
|
value: state.searchValue,
|
|
@@ -5113,18 +5091,18 @@ function LinkEditorPanel({
|
|
|
5113
5091
|
urlError: state.urlError
|
|
5114
5092
|
}
|
|
5115
5093
|
),
|
|
5116
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
5117
|
-
/* @__PURE__ */ (0,
|
|
5118
|
-
/* @__PURE__ */ (0,
|
|
5119
|
-
/* @__PURE__ */ (0,
|
|
5120
|
-
/* @__PURE__ */ (0,
|
|
5094
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
5095
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { type: "button", variant: "outline", className: "w-fit cursor-pointer", size: "sm", onClick: state.handleChooseSection, children: "Choose a section" }),
|
|
5096
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
5097
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconInfo, { className: "shrink-0", "aria-hidden": true }),
|
|
5098
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
5121
5099
|
] })
|
|
5122
5100
|
] }) : null,
|
|
5123
|
-
state.showSectionPicker ? /* @__PURE__ */ (0,
|
|
5124
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5101
|
+
state.showSectionPicker ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionPickerList, { sections: state.activeSections, onSelect: state.handleSectionSelect }) : null,
|
|
5102
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
5125
5103
|
] }),
|
|
5126
|
-
/* @__PURE__ */ (0,
|
|
5127
|
-
/* @__PURE__ */ (0,
|
|
5104
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
5105
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5128
5106
|
Button,
|
|
5129
5107
|
{
|
|
5130
5108
|
type: "button",
|
|
@@ -5139,7 +5117,7 @@ function LinkEditorPanel({
|
|
|
5139
5117
|
children: state.secondaryLabel
|
|
5140
5118
|
}
|
|
5141
5119
|
),
|
|
5142
|
-
/* @__PURE__ */ (0,
|
|
5120
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
5143
5121
|
Button,
|
|
5144
5122
|
{
|
|
5145
5123
|
type: "button",
|
|
@@ -5158,7 +5136,7 @@ function LinkEditorPanel({
|
|
|
5158
5136
|
}
|
|
5159
5137
|
|
|
5160
5138
|
// src/ui/link-modal/LinkPopover.tsx
|
|
5161
|
-
var
|
|
5139
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
5162
5140
|
function LinkPopover({
|
|
5163
5141
|
open = true,
|
|
5164
5142
|
panelRef,
|
|
@@ -5166,14 +5144,14 @@ function LinkPopover({
|
|
|
5166
5144
|
onClose,
|
|
5167
5145
|
...editorProps
|
|
5168
5146
|
}) {
|
|
5169
|
-
return /* @__PURE__ */ (0,
|
|
5147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5170
5148
|
Dialog2,
|
|
5171
5149
|
{
|
|
5172
5150
|
open,
|
|
5173
5151
|
onOpenChange: (next) => {
|
|
5174
5152
|
if (!next) onClose?.();
|
|
5175
5153
|
},
|
|
5176
|
-
children: /* @__PURE__ */ (0,
|
|
5154
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5177
5155
|
DialogContent,
|
|
5178
5156
|
{
|
|
5179
5157
|
ref: panelRef,
|
|
@@ -5183,7 +5161,7 @@ function LinkPopover({
|
|
|
5183
5161
|
"data-ohw-bridge": "",
|
|
5184
5162
|
showCloseButton: false,
|
|
5185
5163
|
className: "gap-0 p-0 w-full md:w-md pointer-events-auto",
|
|
5186
|
-
children: /* @__PURE__ */ (0,
|
|
5164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LinkEditorPanel, { ...editorProps, open, onClose })
|
|
5187
5165
|
}
|
|
5188
5166
|
)
|
|
5189
5167
|
}
|
|
@@ -5249,7 +5227,7 @@ function shouldUseDevFixtures() {
|
|
|
5249
5227
|
}
|
|
5250
5228
|
|
|
5251
5229
|
// src/ui/badge.tsx
|
|
5252
|
-
var
|
|
5230
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
5253
5231
|
var badgeVariants = cva(
|
|
5254
5232
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
5255
5233
|
{
|
|
@@ -5267,11 +5245,11 @@ var badgeVariants = cva(
|
|
|
5267
5245
|
}
|
|
5268
5246
|
);
|
|
5269
5247
|
function Badge({ className, variant, ...props }) {
|
|
5270
|
-
return /* @__PURE__ */ (0,
|
|
5248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
5271
5249
|
}
|
|
5272
5250
|
|
|
5273
5251
|
// src/OhhwellsBridge.tsx
|
|
5274
|
-
var
|
|
5252
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
5275
5253
|
var PRIMARY = "#0885FE";
|
|
5276
5254
|
var IMAGE_FADE_MS = 300;
|
|
5277
5255
|
function runOpacityFade(el, onDone) {
|
|
@@ -5445,7 +5423,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
5445
5423
|
const root = (0, import_client.createRoot)(container);
|
|
5446
5424
|
(0, import_react_dom.flushSync)(() => {
|
|
5447
5425
|
root.render(
|
|
5448
|
-
/* @__PURE__ */ (0,
|
|
5426
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5449
5427
|
SchedulingWidget,
|
|
5450
5428
|
{
|
|
5451
5429
|
notifyOnConnect,
|
|
@@ -5531,7 +5509,7 @@ function applyLinkByKey(key, val) {
|
|
|
5531
5509
|
}
|
|
5532
5510
|
function isInsideLinkEditor(target) {
|
|
5533
5511
|
return Boolean(
|
|
5534
|
-
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
5512
|
+
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
5535
5513
|
);
|
|
5536
5514
|
}
|
|
5537
5515
|
function getHrefKeyFromElement(el) {
|
|
@@ -5693,7 +5671,7 @@ var TOOLBAR_GROUPS = [
|
|
|
5693
5671
|
];
|
|
5694
5672
|
function GlowFrame({ rect, elRef }) {
|
|
5695
5673
|
const GAP = 6;
|
|
5696
|
-
return /* @__PURE__ */ (0,
|
|
5674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5697
5675
|
"div",
|
|
5698
5676
|
{
|
|
5699
5677
|
ref: elRef,
|
|
@@ -5788,9 +5766,9 @@ function calcToolbarPos(rect, parentScroll, approxW = 330) {
|
|
|
5788
5766
|
const left = Math.max(GAP + APPROX_W / 2, Math.min(rawLeft, window.innerWidth - GAP - APPROX_W / 2));
|
|
5789
5767
|
return { top, left, transform };
|
|
5790
5768
|
}
|
|
5791
|
-
var EDIT_LINK_ICON = /* @__PURE__ */ (0,
|
|
5792
|
-
/* @__PURE__ */ (0,
|
|
5793
|
-
/* @__PURE__ */ (0,
|
|
5769
|
+
var EDIT_LINK_ICON = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
|
|
5770
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
5771
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
5794
5772
|
] });
|
|
5795
5773
|
function FloatingToolbar({
|
|
5796
5774
|
rect,
|
|
@@ -5805,7 +5783,7 @@ function FloatingToolbar({
|
|
|
5805
5783
|
const approxW = variant === "link-action" ? 120 : 330;
|
|
5806
5784
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, approxW);
|
|
5807
5785
|
if (variant === "link-action") {
|
|
5808
|
-
return /* @__PURE__ */ (0,
|
|
5786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
5809
5787
|
"div",
|
|
5810
5788
|
{
|
|
5811
5789
|
ref: elRef,
|
|
@@ -5830,7 +5808,7 @@ function FloatingToolbar({
|
|
|
5830
5808
|
},
|
|
5831
5809
|
onMouseDown: (e) => e.stopPropagation(),
|
|
5832
5810
|
children: [
|
|
5833
|
-
/* @__PURE__ */ (0,
|
|
5811
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5834
5812
|
"button",
|
|
5835
5813
|
{
|
|
5836
5814
|
type: "button",
|
|
@@ -5865,8 +5843,8 @@ function FloatingToolbar({
|
|
|
5865
5843
|
children: EDIT_LINK_ICON
|
|
5866
5844
|
}
|
|
5867
5845
|
),
|
|
5868
|
-
/* @__PURE__ */ (0,
|
|
5869
|
-
/* @__PURE__ */ (0,
|
|
5846
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
|
|
5847
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5870
5848
|
"button",
|
|
5871
5849
|
{
|
|
5872
5850
|
type: "button",
|
|
@@ -5885,10 +5863,10 @@ function FloatingToolbar({
|
|
|
5885
5863
|
padding: 6,
|
|
5886
5864
|
opacity: 0.6
|
|
5887
5865
|
},
|
|
5888
|
-
children: /* @__PURE__ */ (0,
|
|
5889
|
-
/* @__PURE__ */ (0,
|
|
5890
|
-
/* @__PURE__ */ (0,
|
|
5891
|
-
/* @__PURE__ */ (0,
|
|
5866
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: [
|
|
5867
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "5", cy: "12", r: "1.5" }),
|
|
5868
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "12", cy: "12", r: "1.5" }),
|
|
5869
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "19", cy: "12", r: "1.5" })
|
|
5892
5870
|
] })
|
|
5893
5871
|
}
|
|
5894
5872
|
)
|
|
@@ -5896,7 +5874,7 @@ function FloatingToolbar({
|
|
|
5896
5874
|
}
|
|
5897
5875
|
);
|
|
5898
5876
|
}
|
|
5899
|
-
return /* @__PURE__ */ (0,
|
|
5877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
5900
5878
|
"div",
|
|
5901
5879
|
{
|
|
5902
5880
|
ref: elRef,
|
|
@@ -5921,11 +5899,11 @@ function FloatingToolbar({
|
|
|
5921
5899
|
},
|
|
5922
5900
|
onMouseDown: (e) => e.stopPropagation(),
|
|
5923
5901
|
children: [
|
|
5924
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
5925
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
5902
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react5.default.Fragment, { children: [
|
|
5903
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
|
|
5926
5904
|
btns.map((btn) => {
|
|
5927
5905
|
const isActive = activeCommands.has(btn.cmd);
|
|
5928
|
-
return /* @__PURE__ */ (0,
|
|
5906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5929
5907
|
"button",
|
|
5930
5908
|
{
|
|
5931
5909
|
title: btn.title,
|
|
@@ -5951,7 +5929,7 @@ function FloatingToolbar({
|
|
|
5951
5929
|
flexShrink: 0,
|
|
5952
5930
|
padding: 6
|
|
5953
5931
|
},
|
|
5954
|
-
children: /* @__PURE__ */ (0,
|
|
5932
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5955
5933
|
"svg",
|
|
5956
5934
|
{
|
|
5957
5935
|
width: "16",
|
|
@@ -5971,7 +5949,7 @@ function FloatingToolbar({
|
|
|
5971
5949
|
);
|
|
5972
5950
|
})
|
|
5973
5951
|
] }, gi)),
|
|
5974
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
5952
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5975
5953
|
"button",
|
|
5976
5954
|
{
|
|
5977
5955
|
type: "button",
|
|
@@ -6020,7 +5998,7 @@ function StateToggle({
|
|
|
6020
5998
|
states,
|
|
6021
5999
|
onStateChange
|
|
6022
6000
|
}) {
|
|
6023
|
-
return /* @__PURE__ */ (0,
|
|
6001
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
6024
6002
|
ToggleGroup,
|
|
6025
6003
|
{
|
|
6026
6004
|
"data-ohw-state-toggle": "",
|
|
@@ -6034,7 +6012,7 @@ function StateToggle({
|
|
|
6034
6012
|
left: rect.right - 8,
|
|
6035
6013
|
transform: "translateX(-100%)"
|
|
6036
6014
|
},
|
|
6037
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
6015
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
6038
6016
|
}
|
|
6039
6017
|
);
|
|
6040
6018
|
}
|
|
@@ -6175,7 +6153,33 @@ function OhhwellsBridge() {
|
|
|
6175
6153
|
hoveredImageRef.current = null;
|
|
6176
6154
|
hoveredImageHasTextOverlapRef.current = false;
|
|
6177
6155
|
}
|
|
6156
|
+
hoveredGapRef.current = null;
|
|
6157
|
+
setSectionGap(null);
|
|
6178
6158
|
postToParent({ type: "ow:image-unhover" });
|
|
6159
|
+
postToParent({ type: "ow:link-modal-lock", locked: true });
|
|
6160
|
+
const html = document.documentElement;
|
|
6161
|
+
const body = document.body;
|
|
6162
|
+
const prevHtmlOverflow = html.style.overflow;
|
|
6163
|
+
const prevBodyOverflow = body.style.overflow;
|
|
6164
|
+
html.style.overflow = "hidden";
|
|
6165
|
+
body.style.overflow = "hidden";
|
|
6166
|
+
const preventBackgroundScroll = (e) => {
|
|
6167
|
+
const target = e.target;
|
|
6168
|
+
if (target instanceof Element && target.closest('[data-ohw-link-modal-root], [data-slot="dialog-overlay"]')) {
|
|
6169
|
+
return;
|
|
6170
|
+
}
|
|
6171
|
+
e.preventDefault();
|
|
6172
|
+
};
|
|
6173
|
+
const scrollOpts = { passive: false, capture: true };
|
|
6174
|
+
document.addEventListener("wheel", preventBackgroundScroll, scrollOpts);
|
|
6175
|
+
document.addEventListener("touchmove", preventBackgroundScroll, scrollOpts);
|
|
6176
|
+
return () => {
|
|
6177
|
+
postToParent({ type: "ow:link-modal-lock", locked: false });
|
|
6178
|
+
html.style.overflow = prevHtmlOverflow;
|
|
6179
|
+
body.style.overflow = prevBodyOverflow;
|
|
6180
|
+
document.removeEventListener("wheel", preventBackgroundScroll, scrollOpts);
|
|
6181
|
+
document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
|
|
6182
|
+
};
|
|
6179
6183
|
}, [linkPopover, postToParent]);
|
|
6180
6184
|
(0, import_react5.useEffect)(() => {
|
|
6181
6185
|
if (!isEditMode) return;
|
|
@@ -6430,6 +6434,12 @@ function OhhwellsBridge() {
|
|
|
6430
6434
|
(0, import_react5.useEffect)(() => {
|
|
6431
6435
|
postToParent({ type: "ow:navigation", path: pathname });
|
|
6432
6436
|
}, [pathname, postToParent]);
|
|
6437
|
+
(0, import_react5.useEffect)(() => {
|
|
6438
|
+
if (!isEditMode) return;
|
|
6439
|
+
setLinkPopover(null);
|
|
6440
|
+
deselectRef.current();
|
|
6441
|
+
deactivateRef.current();
|
|
6442
|
+
}, [pathname, isEditMode]);
|
|
6433
6443
|
(0, import_react5.useEffect)(() => {
|
|
6434
6444
|
if (!isEditMode) return;
|
|
6435
6445
|
const measure = () => {
|
|
@@ -6745,7 +6755,7 @@ function OhhwellsBridge() {
|
|
|
6745
6755
|
}
|
|
6746
6756
|
return;
|
|
6747
6757
|
}
|
|
6748
|
-
if (topEl?.closest("[data-ohw-link-popover-root]") || topEl?.closest("[data-ohw-link-modal-root]")) {
|
|
6758
|
+
if (topEl?.closest("[data-ohw-link-popover-root]") || topEl?.closest("[data-ohw-link-modal-root]") || topEl?.closest("[data-ohw-link-page-dropdown]")) {
|
|
6749
6759
|
if (hoveredImageRef.current) {
|
|
6750
6760
|
hoveredImageRef.current = null;
|
|
6751
6761
|
hoveredImageHasTextOverlapRef.current = false;
|
|
@@ -6873,6 +6883,13 @@ function OhhwellsBridge() {
|
|
|
6873
6883
|
}
|
|
6874
6884
|
};
|
|
6875
6885
|
const probeSectionGapAt = (clientX, clientY, fromParentViewport = false) => {
|
|
6886
|
+
if (linkPopoverOpenRef.current) {
|
|
6887
|
+
if (hoveredGapRef.current) {
|
|
6888
|
+
hoveredGapRef.current = null;
|
|
6889
|
+
setSectionGap(null);
|
|
6890
|
+
}
|
|
6891
|
+
return;
|
|
6892
|
+
}
|
|
6876
6893
|
const { y } = toProbeCoords(clientX, clientY, fromParentViewport);
|
|
6877
6894
|
const sections = Array.from(document.querySelectorAll("[data-ohw-section]")).sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
|
|
6878
6895
|
const ZONE = 20;
|
|
@@ -7484,11 +7501,11 @@ function OhhwellsBridge() {
|
|
|
7484
7501
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
7485
7502
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
7486
7503
|
return bridgeRoot ? (0, import_react_dom2.createPortal)(
|
|
7487
|
-
/* @__PURE__ */ (0,
|
|
7488
|
-
/* @__PURE__ */ (0,
|
|
7489
|
-
toolbarRect && /* @__PURE__ */ (0,
|
|
7490
|
-
/* @__PURE__ */ (0,
|
|
7491
|
-
toolbarVariant === "rich-text" && /* @__PURE__ */ (0,
|
|
7504
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
7505
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
7506
|
+
toolbarRect && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
7507
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
|
|
7508
|
+
toolbarVariant === "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
7492
7509
|
FloatingToolbar,
|
|
7493
7510
|
{
|
|
7494
7511
|
variant: "rich-text",
|
|
@@ -7501,7 +7518,7 @@ function OhhwellsBridge() {
|
|
|
7501
7518
|
onEditLink: openLinkPopoverForActive
|
|
7502
7519
|
}
|
|
7503
7520
|
),
|
|
7504
|
-
toolbarVariant === "link-action" && /* @__PURE__ */ (0,
|
|
7521
|
+
toolbarVariant === "link-action" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
7505
7522
|
FloatingToolbar,
|
|
7506
7523
|
{
|
|
7507
7524
|
variant: "link-action",
|
|
@@ -7514,7 +7531,7 @@ function OhhwellsBridge() {
|
|
|
7514
7531
|
}
|
|
7515
7532
|
)
|
|
7516
7533
|
] }),
|
|
7517
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
7534
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
7518
7535
|
"div",
|
|
7519
7536
|
{
|
|
7520
7537
|
"data-ohw-max-badge": "",
|
|
@@ -7540,7 +7557,7 @@ function OhhwellsBridge() {
|
|
|
7540
7557
|
]
|
|
7541
7558
|
}
|
|
7542
7559
|
),
|
|
7543
|
-
toggleState && /* @__PURE__ */ (0,
|
|
7560
|
+
toggleState && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
7544
7561
|
StateToggle,
|
|
7545
7562
|
{
|
|
7546
7563
|
rect: toggleState.rect,
|
|
@@ -7549,15 +7566,15 @@ function OhhwellsBridge() {
|
|
|
7549
7566
|
onStateChange: handleStateChange
|
|
7550
7567
|
}
|
|
7551
7568
|
),
|
|
7552
|
-
sectionGap && /* @__PURE__ */ (0,
|
|
7569
|
+
sectionGap && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
7553
7570
|
"div",
|
|
7554
7571
|
{
|
|
7555
7572
|
"data-ohw-section-insert-line": "",
|
|
7556
7573
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
7557
7574
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
7558
7575
|
children: [
|
|
7559
|
-
/* @__PURE__ */ (0,
|
|
7560
|
-
/* @__PURE__ */ (0,
|
|
7576
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
7577
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
7561
7578
|
Badge,
|
|
7562
7579
|
{
|
|
7563
7580
|
className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -7570,11 +7587,11 @@ function OhhwellsBridge() {
|
|
|
7570
7587
|
children: "Add Section"
|
|
7571
7588
|
}
|
|
7572
7589
|
),
|
|
7573
|
-
/* @__PURE__ */ (0,
|
|
7590
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
7574
7591
|
]
|
|
7575
7592
|
}
|
|
7576
7593
|
),
|
|
7577
|
-
linkPopover ? /* @__PURE__ */ (0,
|
|
7594
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
7578
7595
|
LinkPopover,
|
|
7579
7596
|
{
|
|
7580
7597
|
panelRef: linkPopoverPanelRef,
|
|
@@ -7587,17 +7604,18 @@ function OhhwellsBridge() {
|
|
|
7587
7604
|
initialTarget: linkPopover.target,
|
|
7588
7605
|
onClose: closeLinkPopover,
|
|
7589
7606
|
onSubmit: handleLinkPopoverSubmit
|
|
7590
|
-
}
|
|
7607
|
+
},
|
|
7608
|
+
`${linkPopover.key}-${pathname}`
|
|
7591
7609
|
) : null,
|
|
7592
|
-
sectionGap && /* @__PURE__ */ (0,
|
|
7610
|
+
sectionGap && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
7593
7611
|
"div",
|
|
7594
7612
|
{
|
|
7595
7613
|
"data-ohw-section-insert-line": "",
|
|
7596
7614
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
7597
7615
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
7598
7616
|
children: [
|
|
7599
|
-
/* @__PURE__ */ (0,
|
|
7600
|
-
/* @__PURE__ */ (0,
|
|
7617
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
7618
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
7601
7619
|
Badge,
|
|
7602
7620
|
{
|
|
7603
7621
|
className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -7610,7 +7628,7 @@ function OhhwellsBridge() {
|
|
|
7610
7628
|
children: "Add Section"
|
|
7611
7629
|
}
|
|
7612
7630
|
),
|
|
7613
|
-
/* @__PURE__ */ (0,
|
|
7631
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
7614
7632
|
]
|
|
7615
7633
|
}
|
|
7616
7634
|
)
|