@gemboss/ui 0.21.0 → 0.30.2
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/CHANGELOG.md +328 -0
- package/README.md +433 -24
- package/catalog/editor.html +426 -10
- package/catalog/index.html +907 -33
- package/gemboss-ui.css +3 -3
- package/package.json +23 -3
- package/parts/components.css +5 -0
- package/parts/core.css +5 -0
- package/parts/shell.css +5 -0
- package/src/action-card.css +1 -0
- package/src/action-card.tsx +149 -0
- package/src/app-shell.css +1 -1
- package/src/assistant/chat-markdown.ts +279 -0
- package/src/assistant/chat-turns.ts +120 -0
- package/src/assistant/chat.tsx +871 -0
- package/src/assistant/engine-mark-art.ts +45 -0
- package/src/assistant/engine-mark.tsx +39 -0
- package/src/assistant/engine.tsx +697 -0
- package/src/assistant/host.tsx +3 -1
- package/src/assistant/index.ts +6 -0
- package/src/assistant-chat.css +1 -0
- package/src/assistant-engine.css +1 -0
- package/src/auth.css +1 -1
- package/src/auth.tsx +18 -2
- package/src/chat-composer.css +1 -1
- package/src/chat-plain.js +6 -0
- package/src/chat.css +1 -1
- package/src/collections.tsx +1 -0
- package/src/dialog.tsx +3 -135
- package/src/editor/controls.tsx +1 -0
- package/src/editor/frame.tsx +12 -4
- package/src/editor/index.ts +10 -1
- package/src/editor/layers.tsx +136 -0
- package/src/editor/panel.tsx +1 -0
- package/src/editor/panes.tsx +4 -3
- package/src/editor/sortable.tsx +79 -0
- package/src/editor/tree.tsx +61 -0
- package/src/editor-layers-plain.js +1 -0
- package/src/editor.css +1 -1
- package/src/engine-plain.js +1 -0
- package/src/index-table.tsx +1 -0
- package/src/index.ts +8 -3
- package/src/kit-plain.css +1 -1
- package/src/kit-plain.js +1 -1
- package/src/launcher.tsx +1 -0
- package/src/menu-layer.ts +9 -2
- package/src/minichart.css +1 -0
- package/src/minichart.tsx +165 -0
- package/src/portal.tsx +1 -0
- package/src/reactions.tsx +1 -0
- package/src/resource-list-select.tsx +1 -0
- package/src/search-dialog.tsx +146 -0
- package/src/selection.tsx +1 -0
- package/src/setup-guide.css +1 -0
- package/src/setup-guide.tsx +116 -0
- package/src/theme-script.ts +10 -0
- package/src/theme.tsx +5 -5
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
// The editor's LAYERS and its DRAWER (step 4 of 5 of the editor kit): the page's sections as rows (LayerList) and the
|
|
2
|
+
// panel that slides over the editor from a side (EditorDrawer). Moved from the admin's page editor (Layers, Page settings,
|
|
3
|
+
// Edit content) with the markup and the classes they had, so those draw and behave exactly as before; the look is
|
|
4
|
+
// editor.css (`.gemboss-layer*`, `.gemboss-settings*`, `.gemboss-picker-*`). Stateless, so no "use client".
|
|
5
|
+
//
|
|
6
|
+
// Reordering by drag and Alt+↑ / Alt+↓ is SortableLayerList (sortable.tsx, its own module): a list that does not reorder
|
|
7
|
+
// (the admin's) does not carry that code. A section's elements as an indented outline (LayerTree) is tree.tsx.
|
|
8
|
+
import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
|
|
9
|
+
import type React from "react";
|
|
10
|
+
|
|
11
|
+
// ── LayerList ───────────────────────────────────────────────────────────────────────────────────────────────────────
|
|
12
|
+
|
|
13
|
+
export interface LayerItem {
|
|
14
|
+
id: string;
|
|
15
|
+
/** The row's first line (`.gemboss-layer-type`, 13px / 600, capitalised by CSS). */
|
|
16
|
+
title: React.ReactNode;
|
|
17
|
+
/** The second line, muted and cut with an ellipsis (`.gemboss-layer-head`). Drawn only when truthy. */
|
|
18
|
+
subtitle?: React.ReactNode;
|
|
19
|
+
/** The row's name for a screen reader where the title is not plain text ("Hide <name>", "Move <name>"). */
|
|
20
|
+
name?: string;
|
|
21
|
+
/** Nesting: each level indents the row by `indent` px. 0 / omitted draws no style. */
|
|
22
|
+
depth?: number;
|
|
23
|
+
/** Hidden on the page: the row is drawn faded (`.is-hidden`) and its eye button is pressed. */
|
|
24
|
+
hidden?: boolean;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export interface LayerListProps<T extends LayerItem = LayerItem> {
|
|
28
|
+
items: ReadonlyArray<T>;
|
|
29
|
+
/** The selected row (`.is-sel`, and its button says `aria-current`). */
|
|
30
|
+
selectedId?: string | null;
|
|
31
|
+
/** A click on a row's main button. */
|
|
32
|
+
onSelect?: (item: T, index: number) => void;
|
|
33
|
+
/** The row's own buttons, after the main one (`.gemboss-layer-acts`, 26px each). */
|
|
34
|
+
actions?: (item: T, index: number) => React.ReactNode;
|
|
35
|
+
/** Shown instead of the rows when there are none (`.gemboss-picker-empty`). */
|
|
36
|
+
empty?: React.ReactNode;
|
|
37
|
+
/** Hide / show, on when given: an eye button first among the row's actions (`aria-pressed` = hidden). */
|
|
38
|
+
onToggleHidden?: (item: T, hidden: boolean) => void;
|
|
39
|
+
/** Px per `depth` level. Default 14 (the element outline's step). */
|
|
40
|
+
indent?: number;
|
|
41
|
+
/** Extra props for a row's element and its main button, and what goes before the button: how SortableLayerList adds
|
|
42
|
+
* dragging and keys without a second copy of the markup. */
|
|
43
|
+
rowProps?: (item: T, index: number) => React.HTMLAttributes<HTMLDivElement> & { "data-drop"?: string; className?: string };
|
|
44
|
+
mainProps?: (item: T, index: number) => React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
45
|
+
lead?: (item: T, index: number) => React.ReactNode;
|
|
46
|
+
/** The list element's ref. */
|
|
47
|
+
listRef?: React.Ref<HTMLDivElement>;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export const layerName = (it: LayerItem) => it.name ?? (typeof it.title === "string" ? it.title : it.id);
|
|
51
|
+
const EYE = "M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z";
|
|
52
|
+
|
|
53
|
+
/** `.gemboss-layers-list` › one `.gemboss-layer` per item: the main button (title · subtitle), then the actions. */
|
|
54
|
+
export function LayerList<T extends LayerItem>({ items, selectedId, onSelect, actions, empty, onToggleHidden, indent = 14, rowProps, mainProps, lead, listRef }: LayerListProps<T>) {
|
|
55
|
+
return (
|
|
56
|
+
<div className="gemboss-layers-list" ref={listRef}>
|
|
57
|
+
{items.length === 0 ? (empty != null ? <div className="gemboss-picker-empty">{empty}</div> : null) : items.map((it, i) => {
|
|
58
|
+
const { className: extra, ...row } = rowProps?.(it, i) ?? {};
|
|
59
|
+
const cls = `gemboss-layer${selectedId === it.id ? " is-sel" : ""}${it.hidden ? " is-hidden" : ""}${extra ? ` ${extra}` : ""}`;
|
|
60
|
+
// The eye's name stays "Hide <name>" whichever way it is set: a toggle says its state with aria-pressed, and its
|
|
61
|
+
// tooltip says the same thing.
|
|
62
|
+
const eyeName = `Hide ${layerName(it)}`;
|
|
63
|
+
return (
|
|
64
|
+
<div key={it.id} className={cls} data-id={it.id} style={it.depth ? { paddingLeft: 6 + it.depth * indent } : undefined} {...row}>
|
|
65
|
+
{lead?.(it, i)}
|
|
66
|
+
<button type="button" className="gemboss-layer-main" aria-current={selectedId === it.id ? "true" : undefined}
|
|
67
|
+
onClick={onSelect ? () => onSelect(it, i) : undefined} {...mainProps?.(it, i)}>
|
|
68
|
+
<span className="gemboss-layer-type">{it.title}</span>
|
|
69
|
+
{it.subtitle ? <span className="gemboss-layer-head">{it.subtitle}</span> : null}
|
|
70
|
+
</button>
|
|
71
|
+
{actions || onToggleHidden ? (
|
|
72
|
+
<div className="gemboss-layer-acts">
|
|
73
|
+
{onToggleHidden ? (
|
|
74
|
+
<button type="button" className="gemboss-layer-eye" aria-pressed={!!it.hidden} aria-label={eyeName}
|
|
75
|
+
title={eyeName} onClick={() => onToggleHidden(it, !it.hidden)}>
|
|
76
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden>
|
|
77
|
+
<path d={EYE} /><circle cx="8" cy="8" r="2" />{it.hidden ? <path d="M2.5 13.5 13.5 2.5" data-gb-slash="" /> : null}
|
|
78
|
+
</svg>
|
|
79
|
+
</button>
|
|
80
|
+
) : null}
|
|
81
|
+
{actions?.(it, i)}
|
|
82
|
+
</div>
|
|
83
|
+
) : null}
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
})}
|
|
87
|
+
</div>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// ── EditorDrawer ────────────────────────────────────────────────────────────────────────────────────────────────────
|
|
92
|
+
|
|
93
|
+
export interface EditorDrawerProps {
|
|
94
|
+
/**
|
|
95
|
+
* `right` (default): `aside.gemboss-settings`, min(380px, 100%) wide (Page settings, Edit content). `left`:
|
|
96
|
+
* `aside.gemboss-layers`, 300px (Layers). Both full height, over a backdrop that closes them.
|
|
97
|
+
*/
|
|
98
|
+
side?: "left" | "right";
|
|
99
|
+
/** The head's text (`.gemboss-picker-head`, 15px / 600) beside ✕. */
|
|
100
|
+
title: React.ReactNode;
|
|
101
|
+
onClose: () => void;
|
|
102
|
+
/** ✕'s accessible name. Default "Close". */
|
|
103
|
+
closeLabel?: string;
|
|
104
|
+
/** The drawer's accessible name. */
|
|
105
|
+
label?: string;
|
|
106
|
+
/** Added to the aside's class (the admin's `gemboss-page-section-content`). */
|
|
107
|
+
className?: string;
|
|
108
|
+
/** Above the head (the admin's "a newer revision exists" notice). */
|
|
109
|
+
before?: React.ReactNode;
|
|
110
|
+
/** The drawer's buttons, right-aligned at the bottom (`.gemboss-settings-foot`). */
|
|
111
|
+
footer?: React.ReactNode;
|
|
112
|
+
/** The body: a `.gemboss-settings-body` of `.gemboss-settings-field`s, a LayerList, … */
|
|
113
|
+
children?: React.ReactNode;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/**
|
|
117
|
+
* The panel that slides over the editor from a side, with a backdrop; ✕ and a click on the backdrop call `onClose`.
|
|
118
|
+
* Mount it while open (the caller holds whether it is): nothing is drawn while closed.
|
|
119
|
+
*/
|
|
120
|
+
export function EditorDrawer({ side = "right", title, onClose, closeLabel = "Close", label, className, before, footer, children }: EditorDrawerProps) {
|
|
121
|
+
const base = side === "left" ? "gemboss-layers" : "gemboss-settings";
|
|
122
|
+
return (
|
|
123
|
+
<>
|
|
124
|
+
<div className="gemboss-picker-backdrop" onClick={onClose} />
|
|
125
|
+
<aside className={className ? `${base} ${className}` : base} aria-label={label}>
|
|
126
|
+
{before}
|
|
127
|
+
<div className="gemboss-picker-head">
|
|
128
|
+
<span>{title}</span>
|
|
129
|
+
<button type="button" onClick={onClose} aria-label={closeLabel}>✕</button>
|
|
130
|
+
</div>
|
|
131
|
+
{children}
|
|
132
|
+
{footer ? <div className="gemboss-settings-foot">{footer}</div> : null}
|
|
133
|
+
</aside>
|
|
134
|
+
</>
|
|
135
|
+
);
|
|
136
|
+
}
|
package/src/editor/panel.tsx
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
// the look is editor.css (`.gemboss-ec-tabs`, `.gemboss-ei-*`), unchanged by the move. Stateless except
|
|
5
5
|
// InspectorGroup's own open/closed when the caller does not hold it. Controls (Seg, Color, Range, EdgeBox, Image) are
|
|
6
6
|
// controls.tsx: their own module, because only a screen that edits values draws them.
|
|
7
|
+
import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
|
|
7
8
|
import { useState } from "react";
|
|
8
9
|
import type React from "react";
|
|
9
10
|
|
package/src/editor/panes.tsx
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
|
|
1
2
|
import type { EditorPane } from "./frame";
|
|
2
3
|
|
|
3
4
|
// The two pane controls only an editor with a collapsible left column and a phone pane switch draws (the admin's theme
|
|
@@ -5,14 +6,14 @@ import type { EditorPane } from "./frame";
|
|
|
5
6
|
|
|
6
7
|
/** The panel icon that shows or hides the left column (EditorTopbar's `chatToggle`): the left third is filled while the
|
|
7
8
|
* column is open, hollow and pressed when it is collapsed. */
|
|
8
|
-
export function EditorChatToggle({ collapsed, onToggle }: { collapsed?: boolean; onToggle: () => void }) {
|
|
9
|
+
export function EditorChatToggle({ collapsed, onToggle, name = "chat panel" }: { collapsed?: boolean; onToggle: () => void; /** What the column is (0.24.0): "Hide <name>". */ name?: string }) {
|
|
9
10
|
return (
|
|
10
11
|
<button
|
|
11
12
|
className={`gemboss-editor-chat-toggle${collapsed ? " collapsed" : ""}`}
|
|
12
13
|
onClick={onToggle}
|
|
13
14
|
aria-pressed={collapsed}
|
|
14
|
-
title={collapsed ?
|
|
15
|
-
aria-label={collapsed ?
|
|
15
|
+
title={collapsed ? `Show ${name}` : name === "chat panel" ? "Hide chat — full-width preview" : `Hide ${name}`}
|
|
16
|
+
aria-label={collapsed ? `Show ${name}` : `Hide ${name}`}
|
|
16
17
|
>
|
|
17
18
|
{/* A real SVG panel icon (geometrically centred): the ▭/◫ box glyphs' ink sits high in the em box. */}
|
|
18
19
|
<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" aria-hidden="true">
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
// SortableLayerList (step 4 of 5 of the editor kit): LayerList whose rows reorder. Its own module, so a list that does
|
|
3
|
+
// not reorder (the admin's Layers, which move with ↑ / ↓ buttons) does not carry this code.
|
|
4
|
+
//
|
|
5
|
+
// · drag a row: a grip before it, the dragged row faded (`.is-dragging`), a 2px line where it will land (`data-drop`);
|
|
6
|
+
// · Alt+↑ / Alt+↓ on a row's button move it one place, and the focus stays on it once the move has landed (also when
|
|
7
|
+
// `onMove` answers later, after a server write: the focus waits for the row to reach its new place).
|
|
8
|
+
// The drag is kept by the row's ID, so rows that change under it (a section added by the chat) do not move the wrong one.
|
|
9
|
+
// HTML drag and drop does not start from a touch: a list that must reorder on a phone keeps ↑ / ↓ in its `actions`.
|
|
10
|
+
import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
|
|
11
|
+
import { useEffect, useRef, useState } from "react";
|
|
12
|
+
import type React from "react";
|
|
13
|
+
import { LayerList, type LayerItem, type LayerListProps } from "./layers";
|
|
14
|
+
|
|
15
|
+
export interface SortableLayerListProps<T extends LayerItem = LayerItem> extends Omit<LayerListProps<T>, "rowProps" | "mainProps" | "lead" | "listRef"> {
|
|
16
|
+
/** A row moved: `to` is its index AFTER the move. */
|
|
17
|
+
onMove: (item: T, to: number) => void;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export function SortableLayerList<T extends LayerItem>({ onMove, items, ...rest }: SortableLayerListProps<T>) {
|
|
21
|
+
const [drag, setDrag] = useState<{ id: string; over: string; place: "before" | "after" } | null>(null);
|
|
22
|
+
// A keyboard move: the row and the index it left. The focus goes back to it once it is somewhere else. Chromium keeps the
|
|
23
|
+
// focus on a node React moves (measured: the Alt+↑/↓ tests pass without this); a browser that runs the DOM's focus
|
|
24
|
+
// fixup on the re-insert would drop it to <body>, so it is put back.
|
|
25
|
+
const refocus = useRef<{ id: string; from: number } | null>(null);
|
|
26
|
+
const listRef = useRef<HTMLDivElement>(null);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
const want = refocus.current;
|
|
29
|
+
if (!want) return;
|
|
30
|
+
const at = items.findIndex((it) => it.id === want.id);
|
|
31
|
+
if (at === want.from) return; // not landed yet (onMove may answer later)
|
|
32
|
+
refocus.current = null;
|
|
33
|
+
if (at < 0) return;
|
|
34
|
+
const row = [...(listRef.current?.children ?? [])].find((r) => (r as HTMLElement).dataset.id === want.id);
|
|
35
|
+
row?.querySelector<HTMLButtonElement>(".gemboss-layer-main")?.focus();
|
|
36
|
+
}, [items]);
|
|
37
|
+
|
|
38
|
+
const indexOf = (id: string) => items.findIndex((it) => it.id === id);
|
|
39
|
+
const drop = () => {
|
|
40
|
+
if (!drag) return;
|
|
41
|
+
const from = indexOf(drag.id), over = indexOf(drag.over);
|
|
42
|
+
setDrag(null);
|
|
43
|
+
if (from < 0 || over < 0) return;
|
|
44
|
+
// The final index: landing before / after row `over`, counted once the dragged row has left its place.
|
|
45
|
+
const to = drag.place === "before" ? (over > from ? over - 1 : over) : (over >= from ? over : over + 1);
|
|
46
|
+
if (to !== from) onMove(items[from], to);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<LayerList {...rest} items={items} listRef={listRef}
|
|
51
|
+
lead={() => <span className="gemboss-layer-grip" aria-hidden>⋮⋮</span>}
|
|
52
|
+
rowProps={(it) => ({
|
|
53
|
+
className: drag?.id === it.id ? "is-dragging" : undefined,
|
|
54
|
+
"data-drop": drag && drag.over === it.id && drag.id !== it.id ? drag.place : undefined,
|
|
55
|
+
draggable: true,
|
|
56
|
+
onDragStart: (e) => { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", it.id); setDrag({ id: it.id, over: it.id, place: "before" }); },
|
|
57
|
+
onDragOver: (e) => {
|
|
58
|
+
if (!drag) return;
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
const r = e.currentTarget.getBoundingClientRect();
|
|
61
|
+
const place = e.clientY < r.top + r.height / 2 ? "before" : "after";
|
|
62
|
+
if (drag.over !== it.id || drag.place !== place) setDrag({ ...drag, over: it.id, place });
|
|
63
|
+
},
|
|
64
|
+
onDrop: (e) => { e.preventDefault(); drop(); },
|
|
65
|
+
onDragEnd: () => setDrag(null),
|
|
66
|
+
})}
|
|
67
|
+
mainProps={(it, i) => ({
|
|
68
|
+
"aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown",
|
|
69
|
+
onKeyDown: (e) => {
|
|
70
|
+
if (!e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
|
|
71
|
+
const to = e.key === "ArrowUp" ? i - 1 : i + 1;
|
|
72
|
+
if (to < 0 || to >= items.length) return;
|
|
73
|
+
e.preventDefault();
|
|
74
|
+
refocus.current = { id: it.id, from: i };
|
|
75
|
+
onMove(it, to);
|
|
76
|
+
},
|
|
77
|
+
})} />
|
|
78
|
+
);
|
|
79
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// LayerTree (step 4 of 5 of the editor kit): a section's elements as an indented outline, the element inspector's
|
|
2
|
+
// Elements tab (moved from apps/admin ElementInspector.tsx with its markup and classes, `.gemboss-ei-tree` in
|
|
3
|
+
// editor.css). Its own module: the inspector draws it, the page editor's Layers drawer (layers.tsx) does not. Stateless,
|
|
4
|
+
// so no "use client".
|
|
5
|
+
import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
|
|
6
|
+
import type React from "react";
|
|
7
|
+
|
|
8
|
+
// ── LayerTree ───────────────────────────────────────────────────────────────────────────────────────────────────────
|
|
9
|
+
|
|
10
|
+
export interface LayerTreeRow {
|
|
11
|
+
id: string;
|
|
12
|
+
/** The row's name (13px / 600). */
|
|
13
|
+
label: React.ReactNode;
|
|
14
|
+
/** A muted aside after it, cut with an ellipsis (`small`: the element's id in the admin). */
|
|
15
|
+
detail?: React.ReactNode;
|
|
16
|
+
/** 0 for the root. Each level indents by `indent` px, after 6px. */
|
|
17
|
+
depth: number;
|
|
18
|
+
/** Its place among its siblings (0-based) and how many there are: `aria-posinset` / `aria-setsize`. */
|
|
19
|
+
index: number;
|
|
20
|
+
siblings: number;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export interface LayerTreeProps<T extends LayerTreeRow = LayerTreeRow> {
|
|
24
|
+
/** Flattened, in reading order. */
|
|
25
|
+
rows: ReadonlyArray<T>;
|
|
26
|
+
selectedId?: string | null;
|
|
27
|
+
/** A click on a row's name. Toggling (a second click clears the selection) is the caller's: the admin's does. */
|
|
28
|
+
onSelect?: (row: T) => void;
|
|
29
|
+
/** Icon buttons after the name (`.gemboss-ei-tacts`: shown on hover, on the selected row and on focus). */
|
|
30
|
+
actions?: (row: T) => React.ReactNode;
|
|
31
|
+
/** Under the row, full width (`flex-basis:100%`): the admin's "Add an element…" picker. */
|
|
32
|
+
below?: (row: T) => React.ReactNode;
|
|
33
|
+
/** The tree's accessible name. */
|
|
34
|
+
label?: string;
|
|
35
|
+
/** Px per level. Default 14. */
|
|
36
|
+
indent?: number;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/** `ul.gemboss-ei-tree[role=tree]` › `li.gemboss-ei-tnode[role=treeitem]` (level, position, selection said aloud). */
|
|
40
|
+
export function LayerTree<T extends LayerTreeRow>({ rows, selectedId, onSelect, actions, below, label, indent = 14 }: LayerTreeProps<T>) {
|
|
41
|
+
return (
|
|
42
|
+
<ul className="gemboss-ei-tree" role="tree" aria-label={label}>
|
|
43
|
+
{rows.map((r) => {
|
|
44
|
+
const on = r.id === selectedId;
|
|
45
|
+
return (
|
|
46
|
+
// Flattened for layout (the indent is inline padding), so each row carries its own level and position or the
|
|
47
|
+
// outline announces as an empty tree.
|
|
48
|
+
<li key={r.id} role="treeitem" aria-level={r.depth + 1} aria-selected={on} aria-posinset={r.index + 1} aria-setsize={r.siblings}
|
|
49
|
+
className={`gemboss-ei-tnode${on ? " on" : ""}`} style={{ paddingLeft: 6 + r.depth * indent }} data-id={r.id}>
|
|
50
|
+
<button type="button" className="gemboss-ei-tname" aria-current={on ? "true" : undefined} onClick={onSelect ? () => onSelect(r) : undefined}>
|
|
51
|
+
{r.label}
|
|
52
|
+
{r.detail != null ? <small>{r.detail}</small> : null}
|
|
53
|
+
</button>
|
|
54
|
+
<span className="gemboss-ei-tacts">{actions?.(r)}</span>
|
|
55
|
+
{below?.(r)}
|
|
56
|
+
</li>
|
|
57
|
+
);
|
|
58
|
+
})}
|
|
59
|
+
</ul>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(v){"use strict";var m=v.gembossUI;if(!m){v.console&&v.console.error("@gemboss/ui editor-layers-plain.js: load kit-plain.js first (it defines gembossUI)");return}if(m.initEditorLayers)return;var d=function(r,s,t){r.dispatchEvent(new CustomEvent(s,{bubbles:!0,detail:t}))},u=function(r){return Array.prototype.filter.call(r.children,function(s){return s.classList.contains("gemboss-layer")})},f=function(r){return r.getAttribute("data-id")};function A(r){var s=r.parentNode;u(s).forEach(function(t){var o=t===r,e=t.querySelector(".gemboss-layer-main");t.classList.toggle("is-sel",o),e&&(o?e.setAttribute("aria-current","true"):e.removeAttribute("aria-current"))}),d(r,"gemboss:editor-layer",{id:f(r),index:u(s).indexOf(r)})}function L(r,s){var t=s.getAttribute("aria-pressed")!=="true";s.setAttribute("aria-pressed",String(t)),r.classList.toggle("is-hidden",t);var o=s.querySelector("svg"),e=o&&o.querySelector("[data-gb-slash]");o&&t&&!e&&(e=document.createElementNS("http://www.w3.org/2000/svg","path"),e.setAttribute("d","M2.5 13.5 13.5 2.5"),e.setAttribute("data-gb-slash",""),o.appendChild(e)),e&&!t&&e.parentNode.removeChild(e),d(r,"gemboss:editor-layer-hidden",{id:f(r),hidden:t})}function y(r,s,t){var o=r.parentNode,e=u(o),a=e.indexOf(r);if(!(s===a||s<0||s>=e.length)){var i=e.filter(function(l){return l!==r});if(o.insertBefore(r,i[s]||null),t){var n=r.querySelector(".gemboss-layer-main");n&&n.focus()}d(r,"gemboss:editor-layer-move",{id:f(r),from:a,to:s})}}function w(r){var s=r.closest(".gemboss-ei-tree"),t=r.getAttribute("aria-selected")==="true";Array.prototype.forEach.call(s.querySelectorAll(".gemboss-ei-tnode"),function(o){var e=o===r&&!t,a=o.querySelector(".gemboss-ei-tname");o.setAttribute("aria-selected",String(e)),o.classList.toggle("on",e),a&&(e?a.setAttribute("aria-current","true"):a.removeAttribute("aria-current"))}),d(r,"gemboss:editor-tree",{id:t?null:r.getAttribute("data-id")})}function h(r){var s=r.previousElementSibling;return{aside:r,backdrop:s&&s.classList.contains("gemboss-picker-backdrop")?s:null}}function g(r,s){var t=h(r);!r.hidden!==s&&(s&&Array.prototype.forEach.call(document.querySelectorAll(".gemboss-layers:not([hidden]), .gemboss-settings:not([hidden])"),function(o){o!==r&&h(o).backdrop&&g(o,!1)}),r.hidden=!s,t.backdrop&&(t.backdrop.hidden=!s),d(r,"gemboss:editor-drawer",{id:r.id||null,open:s}))}var b=typeof WeakSet=="function"?new WeakSet:null,p=function(r){return r.__gbList?!1:(r.__gbList=!0,!0)};function E(r){var s=r||document;if(b?b.has(s):s._gbList)return 0;b?b.add(s):s._gbList=!0;var t=null;s.addEventListener("click",function(e){var a=e.target,i;if(!(!a.closest||!p(e))){if(i=a.closest("[data-gb-drawer]")){var n=document.getElementById(i.getAttribute("data-gb-drawer"));n&&g(n,!0);return}if(i=a.closest(".gemboss-picker-head > button, [data-gb-drawer-close]")){var l=i.closest(".gemboss-layers, .gemboss-settings");l&&g(l,!1);return}if(i=a.closest(".gemboss-picker-backdrop")){var c=i.nextElementSibling;c&&c.matches(".gemboss-layers, .gemboss-settings")&&g(c,!1);return}if((i=a.closest(".gemboss-layer-eye"))&&!i.disabled)return L(i.closest(".gemboss-layer"),i);if(i=a.closest(".gemboss-layer-main"))return A(i.closest(".gemboss-layer"));if(i=a.closest(".gemboss-ei-tname"))return w(i.closest(".gemboss-ei-tnode"))}}),s.addEventListener("keydown",function(e){var a=e.target;if(!(!a.closest||!p(e))&&!(!e.altKey||e.key!=="ArrowUp"&&e.key!=="ArrowDown")){var i=a.classList&&a.classList.contains("gemboss-layer-main")&&a.closest('.gemboss-layer[draggable="true"]');i&&(e.preventDefault(),y(i,u(i.parentNode).indexOf(i)+(e.key==="ArrowUp"?-1:1),!0))}}),s.addEventListener("dragstart",function(e){var a=e.target.closest&&e.target.closest('.gemboss-layer[draggable="true"]');!a||!p(e)||(t={row:a,over:null,place:"before"},a.classList.add("is-dragging"),e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",f(a)||"")))}),s.addEventListener("dragover",function(e){if(t){var a=e.target.closest&&e.target.closest(".gemboss-layer");if(!a||a.parentNode!==t.row.parentNode){t.over&&(t.over.removeAttribute("data-drop"),t.over=null);return}e.preventDefault();var i=a.getBoundingClientRect(),n=e.clientY<i.top+i.height/2?"before":"after";t.over&&t.over!==a&&t.over.removeAttribute("data-drop"),t.over=a,t.place=n,a===t.row?a.removeAttribute("data-drop"):a.setAttribute("data-drop",n)}}),s.addEventListener("drop",function(e){if(t){var a=e.target.closest&&e.target.closest(".gemboss-layer");if(!t.over||!a||a.parentNode!==t.row.parentNode){o();return}e.preventDefault();var i=u(t.row.parentNode),n=i.indexOf(t.row),l=i.indexOf(t.over),c=t.place==="before"?l>n?l-1:l:l>=n?l:l+1,k=t.row;o(),y(k,c,!1)}});var o=function(){t&&(t.row.classList.remove("is-dragging"),t.over&&t.over.removeAttribute("data-drop"),t=null)};return s.addEventListener("dragend",o),1}m.initEditorLayers=E})(typeof globalThis<"u"?globalThis:this);
|
package/src/editor.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes gemboss-editor-enter{0%{opacity:0}to{opacity:1}}@keyframes gemboss-editor-toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes gemboss-pagepicker-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes gemboss-flyout-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes gemboss-statusbar-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.gemboss-platform-main:has(.gemboss-editor){box-sizing:border-box;height:100dvh;min-height:0;padding-top:0;overflow:hidden}.gemboss-editor{--gemboss-editor-inset: 5px;position:fixed;inset:0;box-sizing:border-box;display:flex;flex-direction:column;background:var(--gemboss-canvas);overflow:hidden;z-index:400;animation:gemboss-editor-enter .26s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-editor{animation:none}}.gemboss-editor--embedded{position:relative;inset:auto;height:100%;min-height:0;z-index:auto;animation:none}.gemboss-editor-toast{position:absolute;top:62px;left:50%;transform:translate(-50%);z-index:500;display:flex;align-items:center;gap:12px;max-width:min(560px,92vw);padding:12px 12px 12px 16px;background:var(--gemboss-text);color:#fff;border-radius:12px;font-size:13px;line-height:1.4;box-shadow:var(--gemboss-shadow-overlay);animation:gemboss-editor-toast-in .24s cubic-bezier(.16,1,.3,1)}.gemboss-editor-toast strong{font-weight:600}.gemboss-editor-toast button{flex:0 0 auto;border:0;background:#ffffff29;color:#fff;width:22px;height:22px;border-radius:8px;cursor:pointer;font-size:12px;line-height:1;transition:background var(--gemboss-transition-fast) ease}.gemboss-editor-toast button:hover{background:#ffffff47}.gemboss-editor-toast button:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (prefers-reduced-motion: reduce){.gemboss-editor-toast{animation:none}}.gemboss-editor-topbar{flex:0 0 auto;height:var(--gemboss-editor-topbar-h, 52px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider)}@media (min-width: 1001px){.gemboss-editor-topbar--theme,.gemboss-editor-topbar.gemboss-pageedit-top{grid-template-columns:auto auto auto;justify-content:space-between}}.gemboss-editor-tb-left{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-self:center}.gemboss-editor-topbar--theme .gemboss-editor-tb-center,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-center{min-width:0}.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pageedit-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1200px){.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-name,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-sec-type{display:none}}.gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;min-width:0;justify-self:end}.gemboss-editor-back{font-size:18px;line-height:1;color:var(--gemboss-text);text-decoration:none;cursor:pointer;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--gemboss-radius-md);transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-back:hover{background:var(--gemboss-hover)}.gemboss-editor-back:active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}.gemboss-editor-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-name{font-family:var(--gemboss-serif);font-size:15px;font-weight:600}.gemboss-editor-savestate{display:inline-flex;align-items:center;gap:6px;font-size:var(--gemboss-fs-micro);font-weight:500;line-height:1;padding:4px 8px;border-radius:var(--gemboss-radius-full);white-space:nowrap;transition:opacity .2s ease}.gemboss-editor-savestate.is-saving{color:#ffffffb8;background:#ffffff14}.gemboss-editor-savestate.is-saved{color:var(--gemboss-success-border);background:#6fd39a1f}.gemboss-editor-savestate .gemboss-narr-spin{width:10px;height:10px;border-width:1.5px;border-color:#ffffff47;border-top-color:#ffffffd9}@media (max-width: 760px){.gemboss-editor-savestate.is-saved{display:none}}.gemboss-editor-tb-ghost{font-size:13px;color:var(--gemboss-text);text-decoration:none;padding:8px 12px;border:1px solid var(--gemboss-divider);border-radius:8px;white-space:nowrap;cursor:pointer;background:var(--gemboss-surface);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-editor-tb-ghost:hover{border-color:var(--gemboss-primary)}.gemboss-editor-tb-ghost:active{background:var(--gemboss-active-bg);border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-tb-ghost:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-ghost:disabled{opacity:.5;cursor:default;border-color:var(--gemboss-divider);color:var(--gemboss-text-muted)}.gemboss-editor-tb-publish{background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;padding:8px 20px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--gemboss-transition-fast) ease,filter var(--gemboss-transition-fast) ease}.gemboss-editor-tb-publish:hover{background:var(--gemboss-primary-dark)}.gemboss-editor-tb-publish:active{background:var(--gemboss-primary-dark);filter:brightness(.94)}.gemboss-editor-tb-publish:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-publish:disabled{opacity:.5;cursor:default;filter:none}.gemboss-editor-tb-undo{font-size:15px}.gemboss-editor-publish{position:relative;display:inline-flex;align-items:stretch}.gemboss-editor-publish-main{border-radius:8px 0 0 8px}.gemboss-editor-publish-caret{border-radius:0 8px 8px 0;padding:8px 12px;font-size:12px;line-height:1;border-left:1px solid color-mix(in srgb,#fff 24%,transparent);display:inline-flex;align-items:center;justify-content:center}.gemboss-editor-publish-caret.active{filter:brightness(.94)}.gemboss-editor-menu-label{padding:6px 12px 2px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--gemboss-text-muted);white-space:nowrap}.gemboss-editor-overflow{position:relative;display:inline-flex}.gemboss-editor-overflow-trigger{font-size:18px;line-height:1}.gemboss-editor-menu{position:fixed;z-index:500;min-width:210px;padding:6px;animation:gemboss-flyout-in var(--gemboss-transition-fast) ease}@media (prefers-reduced-motion: reduce){.gemboss-editor-menu{animation:none}}.gemboss-editor-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 12px;border:0;border-radius:var(--gemboss-radius-md);background:transparent;font:inherit;font-size:13px;color:var(--gemboss-text);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-menu-item:hover{background:var(--gemboss-hover)}.gemboss-editor-menu-item:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:-2px;background:var(--gemboss-hover)}.gemboss-editor-menu-item:disabled{opacity:.45;cursor:default}.gemboss-editor-menu-item:disabled:hover{background:transparent}.gemboss-editor-menu-item.active{color:var(--gemboss-active-fg)}.gemboss-editor-menu-ext{color:var(--gemboss-text-muted)}.gemboss-editor-menu-check{color:var(--gemboss-active-fg);font-weight:600}.gemboss-editor-menu-val{font-size:11px;color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-sm);padding:1px 8px}.gemboss-editor-menu-sep{height:1px;background:var(--gemboss-divider-soft);margin:6px}.gemboss-editor-body{flex:1;min-height:0;display:flex;gap:0;padding:var(--gemboss-editor-inset);box-sizing:border-box}.gemboss-editor-body>.gemboss-ec,.gemboss-editor-body>.gemboss-editor-preview-pane{border:1px solid var(--gemboss-divider);border-radius:16px;overflow:hidden}.gemboss-editor-body>.gemboss-ec{border-right:1px solid var(--gemboss-divider)}.gemboss-ec-tabs{display:flex;gap:var(--ui-space-1);padding:var(--ui-space-2) var(--ui-space-3);border-bottom:1px solid var(--gemboss-divider);flex:none}.gemboss-ec-tabs>[role=tab]{flex:1;font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:var(--ui-space-2);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--gemboss-text-muted);box-shadow:none}.gemboss-ec-tabs>[role=tab][aria-selected=true]{border-color:var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:inset 0 -2px 0 var(--gemboss-primary)}.gemboss-pv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--gemboss-preview-canvas);overflow:hidden}.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:calc(var(--ui-btn-h) - 2px);height:calc(var(--ui-btn-h) - 2px);border:0;border-radius:0}@media (pointer: coarse),(max-width: 47.9975em){.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:44px;height:44px}}.gemboss-pv-device{border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;width:30px;height:28px;border-radius:8px;color:var(--gemboss-text-muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pv-device svg{display:block}@media (min-width: 1001px){.gemboss-editor-topbar--theme .gemboss-pv-device,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-device{width:36px;height:32px;position:relative}.gemboss-editor-topbar--theme .gemboss-pv-device:after,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-device:after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}}.gemboss-editor-topbar--theme .gemboss-pv-devices .gemboss-pv-device:after,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-devices .gemboss-pv-device:after{content:none}.gemboss-editor-tb-tools{display:flex;align-items:center;gap:16px;min-width:0}@media (max-width: 1200px){.gemboss-editor-tb-tools{display:none}}.gemboss-pv-device:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-pv-device:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pv-device.active{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg);background:var(--gemboss-active-bg)}.gemboss-pagepicker{position:relative;display:inline-flex}.gemboss-pagepicker-trigger{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 12px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;font-size:13px;font-weight:600;color:var(--gemboss-text);line-height:1;transition:border-color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pagepicker-trigger:hover{border-color:var(--gemboss-primary)}.gemboss-pagepicker-trigger[aria-expanded=true]{border-color:var(--gemboss-primary);background:var(--gemboss-active-bg, var(--gemboss-danger-soft))}.gemboss-pagepicker-trigger-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-trigger-icon svg{display:block}.gemboss-pagepicker-trigger-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-pagepicker-caret{font-size:9px;color:var(--gemboss-text-muted);margin-left:1px}.gemboss-pagepicker-menu{position:fixed;z-index:500;padding:8px;display:flex;flex-direction:column;gap:6px;animation:gemboss-pagepicker-in .14s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-pagepicker-menu{animation:none}}.gemboss-pagepicker-search{position:relative;display:flex;align-items:center}.gemboss-pagepicker-search-icon{position:absolute;left:10px;display:inline-flex;color:var(--gemboss-text-muted);pointer-events:none}input.gemboss-pagepicker-search-input{width:100%;padding-left:32px}.gemboss-pagepicker-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;max-height:320px;overflow-y:auto}.gemboss-pagepicker-item{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;cursor:pointer;text-align:left;padding:8px 12px;border-radius:var(--gemboss-radius-md);font-size:var(--gemboss-fs-body);color:var(--gemboss-text)}.gemboss-pagepicker-item:hover,.gemboss-pagepicker-item:focus-visible{background:var(--gemboss-hover, rgba(0,0,0,.05));outline:none}.gemboss-pagepicker-item.active{background:var(--gemboss-active-bg, var(--gemboss-danger-soft));color:var(--gemboss-active-fg);font-weight:600}.gemboss-pagepicker-item-icon{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-item.active .gemboss-pagepicker-item-icon{color:var(--gemboss-active-fg)}.gemboss-pagepicker-item-icon svg{display:block}.gemboss-pagepicker-item-label{flex:1;min-width:0}.gemboss-pagepicker-check{color:var(--gemboss-active-fg);font-size:13px;flex:0 0 auto}.gemboss-pagepicker-empty{padding:12px;font-size:13px;color:var(--gemboss-text-muted)}.gemboss-pagepicker-note{padding:8px 12px 12px;font-size:12px;line-height:1.5;color:var(--gemboss-text-muted);border-bottom:1px solid var(--gemboss-border, #e3e3e3)}.gemboss-pagepicker-note-link{color:var(--gemboss-primary);font-weight:600;text-decoration:none}.gemboss-pagepicker-note-link:hover{text-decoration:underline}.gemboss-pagepicker-back{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:4px 6px 8px;margin-bottom:2px;border-bottom:1px solid var(--gemboss-divider-soft, #edeff2);font-size:13px;font-weight:600;color:var(--gemboss-text)}.gemboss-pagepicker-back:hover{color:var(--gemboss-active-fg)}.gemboss-pagepicker-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pagepicker-back-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-back-icon svg{display:block}.gemboss-pagepicker-drill{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-drill svg{display:block}.gemboss-pagepicker-thumb{width:30px;height:30px;flex:0 0 auto;border-radius:8px;object-fit:cover;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg, #ffffff)}.gemboss-pagepicker-thumb--default{display:inline-flex;align-items:center;justify-content:center;color:var(--gemboss-text-muted)}.gemboss-pagepicker-thumb--default svg{width:16px;height:16px}.gemboss-pv-stage{flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center;padding:0}.gemboss-pv-frame{background:var(--gemboss-surface);overflow:hidden;height:100%;position:relative}.gemboss-pv-frame.desktop{width:100%;max-width:none}.gemboss-pv-frame.gemboss-pv-fit.desktop{position:absolute;top:0;left:0;width:var(--gemboss-pv-w, 100%);height:var(--gemboss-pv-h, 100%);transform:scale(calc(var(--gemboss-pv-scale, 1) * var(--gemboss-pv-user-zoom, 1)));transform-origin:top left}.gemboss-pv-frame.mobile{width:390px;flex:0 0 390px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:20px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-frame.tablet{width:768px;flex:0 0 768px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:16px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--gemboss-surface);transition:opacity .18s ease}.gemboss-pv-empty{margin:auto;text-align:center;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:8px}.gemboss-pv-empty-art{font-size:40px;line-height:1;opacity:.7}.gemboss-pv-empty-title{font-family:var(--gemboss-serif);font-size:18px;margin:0}.gemboss-pv-empty-sub{font-size:13px;color:var(--gemboss-text-muted);margin:0;line-height:1.5}.gemboss-pv-empty-cta{margin-top:6px;font-size:13px;font-weight:600;color:var(--gemboss-active-fg);text-decoration:none}.gemboss-pv-empty-cta:hover{text-decoration:underline}.gemboss-pv-spin{width:22px;height:22px;border:2px solid var(--gemboss-divider-soft);border-top-color:var(--gemboss-primary);border-radius:50%;animation:gemboss-spin .7s linear infinite}.gemboss-editor-resizer{flex:0 0 var(--gemboss-editor-inset);align-self:stretch}body.ui-resizing .gemboss-pv-iframe{pointer-events:none}.gemboss-editor-chat-toggle{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);border-radius:var(--gemboss-radius-md);cursor:pointer;font-size:14px;line-height:1;color:var(--gemboss-text-muted);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-chat-toggle:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-chat-toggle.collapsed{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle svg{display:block}.gemboss-editor-body .gemboss-ec{transition:flex-basis .28s cubic-bezier(.16,1,.3,1),width .28s cubic-bezier(.16,1,.3,1)}body.ui-resizing .gemboss-editor-body .gemboss-ec{transition:none;will-change:flex-basis,width}body.ui-resizing .gemboss-editor-body .gemboss-pv{will-change:flex-basis}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{border-width:0;overflow:hidden}.gemboss-editor-body.is-chat-collapsed .gemboss-editor-resizer{display:none}.gemboss-pagepicker-list{scrollbar-width:thin;scrollbar-color:rgba(31,30,29,.22) transparent}.gemboss-pagepicker-list::-webkit-scrollbar{width:9px}.gemboss-pagepicker-list::-webkit-scrollbar-track{background:transparent}.gemboss-pagepicker-list::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid transparent;background-clip:content-box}@media (max-width: 1000px){.gemboss-editor-body{flex-direction:column;gap:var(--gemboss-editor-inset)}}@media (max-width: 1000px){.gemboss-editor-resizer{display:none}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{max-height:0;min-height:0}.gemboss-editor-topbar{height:auto;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"left right" "center center";gap:8px 12px;padding:8px 12px}.gemboss-editor-tb-left{grid-area:left}.gemboss-editor-tb-right{padding-block:6px;grid-area:right;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-center{grid-area:center;justify-self:stretch;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-right::-webkit-scrollbar,.gemboss-editor-tb-center::-webkit-scrollbar{display:none}.gemboss-editor-tb-right>*{flex:0 0 auto}.gemboss-editor-tb-right>.gemboss-editor-tb-publish{position:sticky;right:0;z-index:1;box-shadow:-8px 0 8px -6px color-mix(in srgb,var(--gemboss-text) 18%,transparent)}.gemboss-editor-tb-name{display:none}.gemboss-editor-tb-ghost{padding:6px 12px;font-size:12px}.gemboss-editor-tb-publish{padding:8px 16px;font-size:13px}}@media (max-width: 640px){.gemboss-pv-frame.mobile{width:100%;max-width:390px;flex:0 1 auto;margin:8px 0}.gemboss-pv-frame.tablet{width:100%;max-width:768px;flex:0 1 auto;margin:8px 0}}.gemboss-editor-preview-pane{display:flex}.gemboss-editor-mobile-tabs{display:none}.gemboss-editor-dock{position:absolute;top:0;right:0;bottom:0;width:320px;max-width:90%;z-index:5;overflow-y:auto;background:var(--gemboss-surface);border-left:1px solid var(--gemboss-divider);box-shadow:var(--gemboss-shadow-overlay)}.gemboss-editor-preview-pane:has(>.gemboss-editor-dock){position:relative}:where(.gemboss-editor-body>.gemboss-ec){position:relative;width:var(--gemboss-chat-w, 384px);flex:0 0 var(--gemboss-chat-w, 384px);display:flex;flex-direction:column;background:var(--gemboss-panel-bg);border-right:1px solid var(--gemboss-divider);overflow:hidden}:where(.gemboss-editor-preview-pane){flex:1;min-width:0}@media (max-width: 1000px){:where(.gemboss-editor-body>.gemboss-ec){width:auto;flex:0 0 auto;max-height:48%}}@media (max-width: 760px){.gemboss-editor-resizer{display:none}.gemboss-editor-body .gemboss-ec{flex:1 1 auto;width:100%;min-width:0;max-height:none;border-right:none}.gemboss-editor-body .gemboss-editor-preview-pane{flex:1 1 auto}.gemboss-editor-body[data-mobile-pane=chat] .gemboss-editor-preview-pane,.gemboss-editor-body[data-mobile-pane=preview] .gemboss-ec{display:none}.gemboss-editor-mobile-tabs{display:flex;flex:0 0 auto;gap:6px;padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--gemboss-surface);border-top:1px solid var(--gemboss-divider)}.gemboss-editor-mobile-tab{flex:1 1 0;height:38px;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.gemboss-editor-mobile-tab.active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}}.gemboss-editor-statusbar{position:absolute;top:60px;right:14px;z-index:480;max-width:min(380px,calc(100vw - 28px));padding:8px 16px;font-size:12px;line-height:1.4;color:var(--gemboss-text-muted);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;box-shadow:var(--gemboss-shadow-raised);pointer-events:none;animation:gemboss-statusbar-in .18s cubic-bezier(.16,1,.3,1) both}.gemboss-editor-statusbar.done{background:#eaf6ef;color:#1f7a4d;border-color:var(--gemboss-success-border)}.gemboss-editor-statusbar.error{background:#fdecea;color:var(--gemboss-danger);border-color:#f3c2bb}@media (pointer: coarse){.gemboss-pv-device{width:38px;height:38px;font-size:16px}.gemboss-editor-back{width:44px;height:44px;font-size:20px}.gemboss-editor-chat-toggle{width:44px;height:44px;font-size:16px}}@media (pointer: coarse){.gemboss-editor-tb-ghost{padding:8px 16px;min-height:44px}.gemboss-editor-tb-publish{padding:12px 20px;min-height:44px}.gemboss-pagepicker-trigger{min-height:44px}}@media (pointer: coarse){.gemboss-ec-tab{min-height:44px}}@media (max-width: 760px){.gemboss-editor-chat-toggle{display:none}}.gemboss-pageedit{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--gemboss-panel-bg,#ffffff);z-index:320}.gemboss-pageedit-top{background:#fff;border-bottom:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-pageedit .gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-content:center}.gemboss-pageedit .gemboss-editor-tb-right{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-pageedit .gemboss-editor-tb-right>:first-child{margin-inline-start:auto}.gemboss-pageedit .gemboss-editor-tb-left{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-pageedit-title{font-family:var(--gemboss-serif,inherit);font-size:15px;font-weight:600;color:var(--gemboss-text,#1b1c1e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}.gemboss-pageedit-modes{flex:none;display:flex}.gemboss-pageedit-notice{display:flex;flex-wrap:wrap;align-items:center;gap:12px;flex:0 0 auto;padding:12px 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider);color:var(--gemboss-text);font-size:13px;line-height:1.5}.gemboss-pageedit-notice span{flex:1 1 240px;min-width:0}.gemboss-pageedit-notice button{min-height:44px;padding:8px 12px;flex:0 0 auto;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);color:var(--gemboss-text);cursor:pointer}@media (max-width:900px){.gemboss-pageedit-top{height:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "right" "center";gap:8px;padding:8px 12px}.gemboss-pageedit-top .gemboss-editor-tb-right{flex-wrap:wrap;overflow:visible}.gemboss-pageedit-top .gemboss-editor-tb-right button{min-height:44px}.gemboss-pageedit .gemboss-editor-tb-left{width:100%;overflow:hidden;flex-wrap:wrap}.gemboss-pageedit-modes{flex-basis:100%}.gemboss-pageedit .gemboss-editor-tb-right,.gemboss-pageedit .gemboss-editor-tb-center{justify-self:stretch;justify-content:flex-start;max-width:100%;overflow-x:auto}}.gemboss-sec-type{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:12px;background:#f1efe9;color:var(--gemboss-text-muted);text-transform:capitalize}.gemboss-sec-insert-wrap{position:relative}.gemboss-sec-insert-menu{position:absolute;top:42px;right:0;width:280px;max-height:60vh;overflow-y:auto;padding:6px;z-index:80}.gemboss-sec-insert-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font-size:13px;color:var(--gemboss-text,#1b1c1e);transition:background .12s ease,color .12s ease}.gemboss-sec-insert-item:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:focus-visible{outline:2px solid var(--gemboss-primary, #1b1c1e);outline-offset:-2px;background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:disabled{opacity:.6;cursor:default}.gemboss-sec-insert-item:disabled:hover{background:transparent}.gemboss-sec-insert-cat{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);text-transform:capitalize}.gemboss-sec-insert-empty{display:block;padding:16px;font-size:13px;color:var(--gemboss-text-muted,#686b71);text-decoration:none}.gemboss-pageedit-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:12px;background:#eef1ff;color:#2b50d6}.gemboss-pageedit-status.is-published{background:#e7f6ec;color:#1f8f4e}.gemboss-pageedit-kind{font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:12px;background:var(--gemboss-surface-2,#f1f2f5);color:var(--gemboss-text-muted,#686b71);border:1px solid var(--gemboss-divider,#e5e7ea);white-space:nowrap}.gemboss-pageedit-kind.is-template{background:#fbf1df;color:#a9691a;border-color:#efd9ac;text-transform:uppercase;letter-spacing:.04em;font-weight:700}.gemboss-pageedit-scope{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@media (max-width:1200px){.gemboss-pageedit-scope{display:none}}.gemboss-pageedit-pv{flex:1;min-width:0;background:var(--gemboss-preview-canvas);display:flex;justify-content:center;overflow:auto;position:relative}.gemboss-pageedit-pv .gemboss-pv-frame iframe{width:100%;height:100%;border:0;background:#fff;display:block}.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:var(--gemboss-active-bg);border:1px solid var(--gemboss-divider);font-size:12px;color:var(--gemboss-active-fg)}.gemboss-pageedit-chip strong{text-transform:capitalize}.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:var(--gemboss-active-fg);cursor:pointer;font-size:12px}.gemboss-pageedit-standing{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:#b07d1817;border-bottom:1px solid rgba(176,125,24,.28);font-size:13px;line-height:1.5;color:#7a5710}.gemboss-pageedit-standing code{font-size:12px;background:#b07d1824;border-radius:4px;padding:2px 4px}.gemboss-pageedit-standing button{margin-left:auto;flex:0 0 auto;border:1px solid rgba(176,125,24,.4);background:#fff;color:#7a5710;border-radius:8px;padding:4px 12px;font:inherit;font-weight:600;cursor:pointer}.gemboss-pageedit-standing button:disabled{opacity:.6;cursor:default}.gemboss-picker-backdrop{position:fixed;inset:0;background:#1f1e1d38;z-index:70}.gemboss-picker-head{flex:0 0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--gemboss-divider,#e5e7ea);font-weight:600;font-size:15px}.gemboss-picker-head button{border:0;background:transparent;font-size:15px;cursor:pointer;color:var(--gemboss-text-muted,#686b71)}.gemboss-picker-empty{padding:20px;text-align:center;color:var(--gemboss-text-muted,#686b71);font-size:13px}.gemboss-layers{position:fixed;top:0;left:0;bottom:0;width:300px;background:#fff;border-right:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-layers-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}.gemboss-layer{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:8px;padding:0 4px 0 6px}.gemboss-layer:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:var(--gemboss-active-bg)}.gemboss-layer-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:transparent;border:0;cursor:pointer;text-align:left;padding:8px 4px}.gemboss-layer-type{font-size:13px;font-weight:600;color:var(--gemboss-text,#1b1c1e);text-transform:capitalize}.gemboss-layer-head{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:195px}.gemboss-layer-acts{display:flex;gap:0;flex:0 0 auto}.gemboss-layer-acts button{width:26px;height:26px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--gemboss-text-muted,#686b71);font-size:13px;line-height:1}.gemboss-layer-acts button:hover:not(:disabled){background:var(--gemboss-hover,rgba(0,0,0,.07))}.gemboss-layer-acts button:disabled{opacity:.28;cursor:default}.gemboss-layer-del:hover:not(:disabled){color:#c0392b}.gemboss-settings{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);box-sizing:border-box;background:#fff;border-left:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:-8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-settings-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:20px}.gemboss-settings-grouphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-grouphead>span{font-size:var(--gemboss-fs-caption);font-weight:700;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-gen{border:1px solid var(--gemboss-divider,#e5e7ea);background:var(--gemboss-surface,#fff);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;color:var(--gemboss-text,#1b1c1e);cursor:pointer;white-space:nowrap}.gemboss-settings-gen:hover:not(:disabled){background:var(--gemboss-hover,#eceef2)}.gemboss-settings-gen:disabled{opacity:.55;cursor:default}.gemboss-settings-field{display:flex;flex-direction:column;gap:6px}.gemboss-settings-note{margin:0 0 4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-subdued,#6b675f);line-height:1.5}.gemboss-settings-error{margin:0 0 8px;padding:8px 12px;border-radius:8px;font-size:var(--gemboss-fs-caption);line-height:1.45;color:#8a1c1c;background:#fdecec;border:1px solid #f5c2c2}.gemboss-settings-field>span{font-size:var(--gemboss-fs-caption);font-weight:700;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-field :is(input,textarea,select):not([type=color]){width:100%}.gemboss-settings-field small{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71)}.gemboss-settings-field textarea.gemboss-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}.gemboss-settings-handle span{color:var(--gemboss-text-muted,#686b71);white-space:nowrap}.gemboss-settings-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:12px 20px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-cancel{background:transparent;border:1px solid var(--gemboss-divider,#e5e7ea);border-radius:8px;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-save{background:var(--gemboss-primary, #1b1c1e);color:#fff;border:0;border-radius:8px;font-size:13px;font-weight:700;padding:8px 20px;cursor:pointer}.gemboss-settings-save:disabled{opacity:.6;cursor:default}.gemboss-page-section-content :is(button,input,textarea){min-height:44px;min-width:44px}.gemboss-pageedit .gemboss-pv-device{width:44px;height:44px;flex-shrink:0}.gemboss-pageedit .gemboss-ec-dock-body :is(button,input,select){min-height:44px}.gemboss-bundle-look .gemboss-ei-body :is(button,input){min-height:44px}.gemboss-bundle-look .gemboss-ei-body input[type=color]{min-width:44px}.gemboss-page-draft-status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-surface,#fff);color:var(--gemboss-text,#1b1c1e);font-size:12px;line-height:1.5;box-shadow:0 1px 6px #0001}.gemboss-page-draft-status button{min-height:44px;min-width:44px;padding:8px 12px;border:1px solid var(--gemboss-border,#ccc);border-radius:6px;background:var(--gemboss-surface,#fff);cursor:pointer}.gemboss-page-draft-status button:hover{background:var(--gemboss-hover,#eceef2)}.gemboss-page-draft-status button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.gemboss-page-draft-status[data-page-preview-state=ready]{pointer-events:none}.gemboss-pageedit .gemboss-pageedit-pv{flex-direction:column;min-height:0;justify-content:flex-start}.gemboss-page-draft-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;justify-content:center}@media (max-width:1000px){.gemboss-pageedit .gemboss-editor-body>.gemboss-ec{flex:0 0 auto;height:44%;min-height:min(520px,76%);max-height:76%}}.gemboss-ei{position:absolute;top:12px;right:12px;z-index:6;width:320px;max-width:calc(100% - 24px);display:flex;flex-direction:column;max-height:calc(100% - 24px);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-xl);box-shadow:var(--gemboss-shadow-overlay);overflow:hidden}.gemboss-ei--docked{position:static;top:auto;right:auto;width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;background:transparent;flex:1;min-height:0}.gemboss-ei-head{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--gemboss-divider)}.gemboss-ei-title{font-size:var(--gemboss-fs-body);font-weight:700;line-height:1.2;min-width:0;overflow:hidden}.gemboss-ei-title small{display:block;font-weight:500;font-size:11px;color:var(--gemboss-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gemboss-ei-act,.gemboss-ei-x{margin-left:auto;width:26px;height:26px;flex:none;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);border-radius:6px;display:grid;place-items:center;font-size:14px}.gemboss-ei-x{margin-left:2px;font-size:13px}.gemboss-ei-act:hover,.gemboss-ei-x:hover{background:var(--gemboss-hover);color:var(--gemboss-text)}.gemboss-ei-act:disabled{opacity:.5;cursor:default}.gemboss-ei-tabs{display:flex;gap:2px;margin:8px 12px 0;background:var(--gemboss-panel-bg);padding:4px;border-radius:8px}.gemboss-ei-tab{flex:1;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-weight:600;font-size:12px;padding:6px 4px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px}.gemboss-ei-tab.on{background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:var(--gemboss-shadow-resting)}.gemboss-ei-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:2px 0 4px}.gemboss-ei-body::-webkit-scrollbar{width:9px}.gemboss-ei-body::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid var(--gemboss-surface);background-clip:content-box}.gemboss-ei-pane{padding:4px 16px 6px}.gemboss-ei-note{margin:0 0 8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-hover,#eceef2);border:1px solid var(--gemboss-divider,#e5e7ea);color:var(--gemboss-text-muted,#686b71);font-size:12px;line-height:1.45}.gemboss-ei-grp{border-bottom:1px solid var(--gemboss-divider-soft);padding:12px 0}.gemboss-ei-grp:last-child{border-bottom:none}.gemboss-ei-gh{font-size:var(--gemboss-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gemboss-text-muted);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:0;-webkit-appearance:none}.gemboss-ei-gh:hover{color:var(--gemboss-text)}.gemboss-ei-chev{font-size:9px;width:10px;display:inline-block;color:var(--gemboss-text-muted);transition:transform .12s ease}.gemboss-ei-gh-note{margin-left:6px;font-size:10px;font-weight:500;opacity:.55;text-transform:none;letter-spacing:0}.gemboss-ei-gh[data-open=closed]{margin-bottom:0}.gemboss-ei-gh[data-open=closed]~*{display:none}.gemboss-ei-fld{margin-bottom:12px}.gemboss-ei-fld:last-child{margin-bottom:0}.gemboss-ei-fld>label{display:block;font-size:13px;font-weight:500;color:var(--gemboss-text);margin-bottom:6px}.gemboss-ei-inp{width:100%}.gemboss-ei-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}select.gemboss-ei-inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gemboss-text-muted) 50%),linear-gradient(135deg,var(--gemboss-text-muted) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}.gemboss-ei-swatches{display:flex;gap:8px}.gemboss-ei-sw{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #1f1e1d1a}.gemboss-ei-sw.on{border-color:var(--gemboss-text);box-shadow:0 0 0 2px var(--gemboss-surface),0 0 0 3px var(--gemboss-primary)}.gemboss-ei-sw:disabled{cursor:default;opacity:.7}.gemboss-ei-apply{margin-top:2px;background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;font-size:var(--gemboss-fs-caption);font-weight:700;padding:8px 16px;cursor:pointer}.gemboss-ei-apply:hover{background:var(--gemboss-primary-dark)}.gemboss-ei-apply:disabled{opacity:.6;cursor:default}.gemboss-ei-hint{margin:8px 0 0;font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-empty{padding:24px 16px;text-align:center;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.gemboss-ei-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--gemboss-divider);font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-savedot{width:6px;height:6px;border-radius:50%;background:var(--gemboss-success);box-shadow:0 0 0 3px #2e8b572e}.gemboss-ei-savedot.busy{background:var(--gemboss-primary);box-shadow:0 0 0 3px var(--gemboss-primary-soft)}.gemboss-ei-foot.is-error{color:var(--gemboss-danger)}.gemboss-ei-foot.is-error .gemboss-ei-savedot{background:var(--gemboss-danger);box-shadow:0 0 0 3px #d72c0d29}.gemboss-ei-drag{cursor:grab;user-select:none}.gemboss-ei-drag:active{cursor:grabbing}.gemboss-ei-dragmask{position:fixed;inset:0;z-index:9998;cursor:grabbing}.gemboss-ei-block{border:1px solid var(--gemboss-divider);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-block:last-child{margin-bottom:0}.gemboss-ei-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--gemboss-text)}.gemboss-ei-block-x{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);width:22px;height:22px;border-radius:6px;font-size:11px;flex:none}.gemboss-ei-block-x:hover{background:var(--gemboss-hover);color:var(--gemboss-danger-strong)}.gemboss-ei-block-x:disabled{opacity:.5;cursor:default}.gemboss-ei-block .gemboss-ei-inp{background:var(--gemboss-surface)}.gemboss-ei-addrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.gemboss-ei-addchip{border:1px dashed var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text-muted);border-radius:999px;font-size:var(--gemboss-fs-micro);font-weight:600;padding:6px 12px;cursor:pointer}.gemboss-ei-addchip:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg);border-style:solid}.gemboss-ei-addchip:disabled{opacity:.5;cursor:default}.gemboss-ei-img{display:flex;gap:8px;align-items:flex-start}.gemboss-ei-img-thumb{flex:none;width:52px;height:52px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg) center/cover no-repeat;display:grid;place-items:center;color:var(--gemboss-text-muted);font-size:16px}.gemboss-ei-img-ctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.gemboss-ei-img-actions{display:flex;gap:6px}.gemboss-ei-img-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;padding:8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg);max-height:180px;overflow-y:auto}.gemboss-ei-img-cell{aspect-ratio:1;border:1px solid var(--gemboss-divider);border-radius:8px;cursor:pointer;padding:0;background:var(--gemboss-surface) center/cover no-repeat}.gemboss-ei-img-cell:hover{border-color:var(--gemboss-primary);box-shadow:0 0 0 2px var(--gemboss-primary-soft)}.gemboss-ei-img-cell:disabled{opacity:.5;cursor:default}.gemboss-ei-img-grid .gemboss-ei-hint{grid-column:1/-1;margin:0}.gemboss-ei-gen{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-gen .gemboss-ei-apply{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}.gemboss-ei-gen .gemboss-narr-spin{width:11px;height:11px}.gemboss-ei-oos{margin:4px 16px 12px;padding:12px;border:1px solid var(--gemboss-divider);border-left:3px solid var(--gemboss-text-muted);border-radius:8px;background:var(--gemboss-panel-bg)}.gemboss-ei-oos-h{font-size:var(--gemboss-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gemboss-text-muted);font-weight:700;margin-bottom:8px}.gemboss-ei-oos p{margin:0 0 6px;font-size:12px;color:var(--gemboss-text-muted);line-height:1.45}.gemboss-ei-oos p:last-child{margin-bottom:0}.gemboss-ei-oos b{color:var(--gemboss-text);font-weight:600}.gemboss-ei-edgebox{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.gemboss-ei-rep-item{border:1px solid var(--gemboss-border,#2a2a3a);border-radius:6px;padding:8px;margin-bottom:8px}.gemboss-ei-rep-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:12px;opacity:.8}.gemboss-ei-rep-head>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ei-rep-acts{display:flex;gap:2px;flex:0 0 auto}.gemboss-ei-rep-acts button{background:none;border:0;color:inherit;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1}.gemboss-ei-rep-acts button:hover:not(:disabled){background:var(--gemboss-border,#2a2a3a)}.gemboss-ei-rep-acts button:disabled{opacity:.3;cursor:default}.gemboss-ei-rep-add{width:100%;padding:6px;border:1px dashed var(--gemboss-border,#2a2a3a);border-radius:6px;background:none;color:inherit;cursor:pointer;font-size:12px}.gemboss-ei-rep-add:hover:not(:disabled){background:var(--gemboss-border,#2a2a3a)}.gemboss-ei-rep-add:disabled{opacity:.4;cursor:default}.gemboss-ei-edge{display:flex;flex-direction:column;align-items:center;gap:4px}.gemboss-ei-edge input{width:100%;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}.gemboss-ei-edge span{font-size:var(--gemboss-fs-micro);letter-spacing:.06em;color:var(--gemboss-text-muted);font-weight:700}.gemboss-ec-dock-body{flex:1;min-height:0;overflow-y:auto;padding:12px}.gemboss-ei-group{padding:12px 0}.gemboss-ei-group+.gemboss-ei-group{border-top:1px solid var(--gemboss-divider)}.gemboss-ei-group>.gemboss-ei-fld:last-child{margin-bottom:0}.gemboss-ei-grouphead{margin:0 0 12px;font-size:var(--gemboss-fs-micro,11px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gemboss-ei-color{display:flex;gap:8px;align-items:center}.gemboss-ei-color .gemboss-ei-inp{flex:1;min-width:0}.gemboss-ei-swatch{flex:none;width:34px;height:34px;padding:0;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);cursor:pointer}.gemboss-ei-swatch::-webkit-color-swatch-wrapper{padding:2px}.gemboss-ei-swatch::-webkit-color-swatch{border:none;border-radius:6px}.gemboss-ei-swatch:disabled{cursor:default;opacity:.7}.gemboss-ei-suffix{margin:4px 0 0;font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-fld>label>.gemboss-ei-rangeval{float:right;font-weight:700;color:var(--gemboss-text);font-variant-numeric:tabular-nums}.gemboss-ei-range{width:100%;accent-color:var(--gemboss-primary);cursor:pointer}.gemboss-ei-range:disabled{cursor:default;opacity:.7}@media (max-width:760px){.gemboss-ei{position:static;width:auto;max-width:none;max-height:none;margin:8px;box-shadow:var(--gemboss-shadow-raised)}}.gemboss-ei-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}.gemboss-ei-tnode{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border-radius:6px;padding-right:4px}.gemboss-ei-tnode:hover{background:var(--gemboss-surface)}.gemboss-ei-tnode.on{background:var(--gemboss-primary-soft,var(--gemboss-surface));box-shadow:inset 2px 0 0 var(--gemboss-primary)}.gemboss-ei-tname{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;border:0;background:transparent;cursor:pointer;text-align:left;padding:6px 2px;color:var(--gemboss-text);font-size:12px;font-weight:600}.gemboss-ei-tname small{font-weight:400;font-size:10px;color:var(--gemboss-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ei-tacts{flex:none;display:flex;gap:1px;opacity:0;transition:opacity .12s}.gemboss-ei-tnode:hover .gemboss-ei-tacts,.gemboss-ei-tnode.on .gemboss-ei-tacts,.gemboss-ei-tacts:focus-within{opacity:1}.gemboss-ei-tacts button{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-size:11px;line-height:1;padding:4px 6px;border-radius:6px}.gemboss-ei-tacts button:hover:not(:disabled){background:var(--gemboss-surface);color:var(--gemboss-text)}.gemboss-ei-tacts button:disabled{opacity:.3;cursor:default}.gemboss-ei-tadd{flex-basis:100%;padding:4px 2px 6px}.gemboss-editor-topbar--guest{grid-template-columns:1fr auto 1fr}.gemboss-guest-mark{flex:0 0 auto;display:block}.gemboss-guest-brand{font-weight:700;letter-spacing:-.02em;font-size:15px;margin-left:8px}.gemboss-guest-note{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider-soft);border-radius:999px;padding:4px 12px;white-space:nowrap}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;justify-content:flex-end}.gemboss-guest-signin{font-size:var(--gemboss-fs-body);font-weight:600;color:var(--gemboss-text-muted);text-decoration:none}.gemboss-guest-signin:hover{color:var(--gemboss-text)}.gemboss-guest-keep{border:0;border-radius:999px;background:var(--gemboss-primary);color:var(--gemboss-on-primary);cursor:pointer;font:inherit;font-size:var(--gemboss-fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 20px;white-space:nowrap}.gemboss-guest-keep:hover{background:var(--gemboss-primary-dark)}@media (max-width: 720px){.gemboss-guest-note{display:none}}@media (max-width: 1000px){.gemboss-editor-topbar--guest{grid-template-columns:auto minmax(0,1fr)}}@media (max-width: 460px){.gemboss-guest-brand{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{gap:8px}.gemboss-editor-topbar--guest .gemboss-guest-keep{padding-inline:12px}}@media (max-width: 400px){.gemboss-editor-topbar--guest{padding-inline:8px;column-gap:8px}}.gemboss-platform-main:has(.gemboss-editor){padding-bottom:0}
|
|
1
|
+
@keyframes gemboss-editor-enter{0%{opacity:0}to{opacity:1}}@keyframes gemboss-editor-toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes gemboss-pagepicker-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes gemboss-flyout-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes gemboss-statusbar-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.gemboss-platform-main:has(.gemboss-editor){box-sizing:border-box;height:100dvh;min-height:0;padding-top:0;overflow:hidden}.gemboss-editor{--gemboss-editor-inset: 5px;position:fixed;inset:0;box-sizing:border-box;display:flex;flex-direction:column;background:var(--gemboss-canvas);overflow:hidden;z-index:400;animation:gemboss-editor-enter .26s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-editor{animation:none}}.gemboss-editor--embedded{position:relative;inset:auto;height:100%;min-height:0;z-index:auto;animation:none}.gemboss-editor-toast{position:absolute;top:62px;left:50%;transform:translate(-50%);z-index:500;display:flex;align-items:center;gap:12px;max-width:min(560px,92vw);padding:12px 12px 12px 16px;background:var(--gemboss-text);color:#fff;border-radius:12px;font-size:13px;line-height:1.4;box-shadow:var(--gemboss-shadow-overlay);animation:gemboss-editor-toast-in .24s cubic-bezier(.16,1,.3,1)}.gemboss-editor-toast strong{font-weight:600}.gemboss-editor-toast button{flex:0 0 auto;border:0;background:#ffffff29;color:#fff;width:22px;height:22px;border-radius:8px;cursor:pointer;font-size:12px;line-height:1;transition:background var(--gemboss-transition-fast) ease}.gemboss-editor-toast button:hover{background:#ffffff47}.gemboss-editor-toast button:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (prefers-reduced-motion: reduce){.gemboss-editor-toast{animation:none}}.gemboss-editor-topbar{flex:0 0 auto;height:var(--gemboss-editor-topbar-h, 52px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider)}@media (min-width: 1001px){.gemboss-editor-topbar--theme,.gemboss-editor-topbar.gemboss-pageedit-top{grid-template-columns:auto auto auto;justify-content:space-between}}.gemboss-editor-tb-left{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-self:center}.gemboss-editor-topbar--theme .gemboss-editor-tb-center,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-center{min-width:0}.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pageedit-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1200px){.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-name,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-sec-type{display:none}}.gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;min-width:0;justify-self:end}.gemboss-editor-back{font-size:18px;line-height:1;color:var(--gemboss-text);text-decoration:none;cursor:pointer;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--gemboss-radius-md);transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-back:hover{background:var(--gemboss-hover)}.gemboss-editor-back:active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}.gemboss-editor-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-name{font-family:var(--gemboss-serif);font-size:15px;font-weight:600}.gemboss-editor-savestate{display:inline-flex;align-items:center;gap:6px;font-size:var(--gemboss-fs-micro);font-weight:500;line-height:1;padding:4px 8px;border-radius:var(--gemboss-radius-full);white-space:nowrap;transition:opacity .2s ease}.gemboss-editor-savestate.is-saving{color:#ffffffb8;background:#ffffff14}.gemboss-editor-savestate.is-saved{color:var(--gemboss-success-border);background:#6fd39a1f}.gemboss-editor-savestate .gemboss-narr-spin{width:10px;height:10px;border-width:1.5px;border-color:#ffffff47;border-top-color:#ffffffd9}@media (max-width: 760px){.gemboss-editor-savestate.is-saved{display:none}}.gemboss-editor-tb-ghost{font-size:13px;color:var(--gemboss-text);text-decoration:none;padding:8px 12px;border:1px solid var(--gemboss-divider);border-radius:8px;white-space:nowrap;cursor:pointer;background:var(--gemboss-surface);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-editor-tb-ghost:hover{border-color:var(--gemboss-primary)}.gemboss-editor-tb-ghost:active{background:var(--gemboss-active-bg);border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-tb-ghost:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-ghost:disabled{opacity:.5;cursor:default;border-color:var(--gemboss-divider);color:var(--gemboss-text-muted)}.gemboss-editor-tb-publish{background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;padding:8px 20px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--gemboss-transition-fast) ease,filter var(--gemboss-transition-fast) ease}.gemboss-editor-tb-publish:hover{background:var(--gemboss-primary-dark)}.gemboss-editor-tb-publish:active{background:var(--gemboss-primary-dark);filter:brightness(.94)}.gemboss-editor-tb-publish:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-publish:disabled{opacity:.5;cursor:default;filter:none}.gemboss-editor-tb-undo{font-size:15px}.gemboss-editor-publish{position:relative;display:inline-flex;align-items:stretch}.gemboss-editor-publish-main{border-radius:8px 0 0 8px}.gemboss-editor-publish-caret{border-radius:0 8px 8px 0;padding:8px 12px;font-size:12px;line-height:1;border-left:1px solid color-mix(in srgb,#fff 24%,transparent);display:inline-flex;align-items:center;justify-content:center}.gemboss-editor-publish-caret.active{filter:brightness(.94)}.gemboss-editor-menu-label{padding:6px 12px 2px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--gemboss-text-muted);white-space:nowrap}.gemboss-editor-overflow{position:relative;display:inline-flex}.gemboss-editor-overflow-trigger{font-size:18px;line-height:1}.gemboss-editor-menu{position:fixed;z-index:500;min-width:210px;padding:6px;animation:gemboss-flyout-in var(--gemboss-transition-fast) ease}@media (prefers-reduced-motion: reduce){.gemboss-editor-menu{animation:none}}.gemboss-editor-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 12px;border:0;border-radius:var(--gemboss-radius-md);background:transparent;font:inherit;font-size:13px;color:var(--gemboss-text);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-menu-item:hover{background:var(--gemboss-hover)}.gemboss-editor-menu-item:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:-2px;background:var(--gemboss-hover)}.gemboss-editor-menu-item:disabled{opacity:.45;cursor:default}.gemboss-editor-menu-item:disabled:hover{background:transparent}.gemboss-editor-menu-item.active{color:var(--gemboss-active-fg)}.gemboss-editor-menu-ext{color:var(--gemboss-text-muted)}.gemboss-editor-menu-check{color:var(--gemboss-active-fg);font-weight:600}.gemboss-editor-menu-val{font-size:11px;color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-sm);padding:1px 8px}.gemboss-editor-menu-sep{height:1px;background:var(--gemboss-divider-soft);margin:6px}.gemboss-editor-body{flex:1;min-height:0;display:flex;gap:0;padding:var(--gemboss-editor-inset);box-sizing:border-box}.gemboss-editor-body>.gemboss-ec,.gemboss-editor-body>.gemboss-editor-preview-pane{border:1px solid var(--gemboss-divider);border-radius:16px;overflow:hidden}.gemboss-editor-body>.gemboss-ec{border-right:1px solid var(--gemboss-divider)}.gemboss-ec-tabs{display:flex;gap:var(--ui-space-1);padding:var(--ui-space-2) var(--ui-space-3);border-bottom:1px solid var(--gemboss-divider);flex:none}.gemboss-ec-tabs>[role=tab]{flex:1;font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:var(--ui-space-2);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--gemboss-text-muted);box-shadow:none}.gemboss-ec-tabs>[role=tab][aria-selected=true]{border-color:var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:inset 0 -2px 0 var(--gemboss-primary)}.gemboss-pv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--gemboss-preview-canvas);overflow:hidden}.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:calc(var(--ui-btn-h) - 2px);height:calc(var(--ui-btn-h) - 2px);border:0;border-radius:0}@media (pointer: coarse),(max-width: 47.9975em){.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:44px;height:44px}}.gemboss-pv-device{border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;width:30px;height:28px;border-radius:8px;color:var(--gemboss-text-muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pv-device svg{display:block}@media (min-width: 1001px){.gemboss-editor-topbar--theme .gemboss-pv-device,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-device{width:36px;height:32px;position:relative}.gemboss-editor-topbar--theme .gemboss-pv-device:after,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-device:after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}}.gemboss-editor-topbar--theme .gemboss-pv-devices .gemboss-pv-device:after,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-devices .gemboss-pv-device:after{content:none}.gemboss-editor-tb-tools{display:flex;align-items:center;gap:16px;min-width:0}@media (max-width: 1200px){.gemboss-editor-tb-tools{display:none}}.gemboss-pv-device:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-pv-device:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pv-device.active{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg);background:var(--gemboss-active-bg)}.gemboss-pagepicker{position:relative;display:inline-flex}.gemboss-pagepicker-trigger{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 12px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;font-size:13px;font-weight:600;color:var(--gemboss-text);line-height:1;transition:border-color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pagepicker-trigger:hover{border-color:var(--gemboss-primary)}.gemboss-pagepicker-trigger[aria-expanded=true]{border-color:var(--gemboss-primary);background:var(--gemboss-active-bg, var(--gemboss-danger-soft))}.gemboss-pagepicker-trigger-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-trigger-icon svg{display:block}.gemboss-pagepicker-trigger-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-pagepicker-caret{font-size:9px;color:var(--gemboss-text-muted);margin-left:1px}.gemboss-pagepicker-menu{position:fixed;z-index:500;padding:8px;display:flex;flex-direction:column;gap:6px;animation:gemboss-pagepicker-in .14s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-pagepicker-menu{animation:none}}.gemboss-pagepicker-search{position:relative;display:flex;align-items:center}.gemboss-pagepicker-search-icon{position:absolute;left:10px;display:inline-flex;color:var(--gemboss-text-muted);pointer-events:none}input.gemboss-pagepicker-search-input{width:100%;padding-left:32px}.gemboss-pagepicker-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;max-height:320px;overflow-y:auto}.gemboss-pagepicker-item{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;cursor:pointer;text-align:left;padding:8px 12px;border-radius:var(--gemboss-radius-md);font-size:var(--gemboss-fs-body);color:var(--gemboss-text)}.gemboss-pagepicker-item:hover,.gemboss-pagepicker-item:focus-visible{background:var(--gemboss-hover, rgba(0,0,0,.05));outline:none}.gemboss-pagepicker-item.active{background:var(--gemboss-active-bg, var(--gemboss-danger-soft));color:var(--gemboss-active-fg);font-weight:600}.gemboss-pagepicker-item-icon{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-item.active .gemboss-pagepicker-item-icon{color:var(--gemboss-active-fg)}.gemboss-pagepicker-item-icon svg{display:block}.gemboss-pagepicker-item-label{flex:1;min-width:0}.gemboss-pagepicker-check{color:var(--gemboss-active-fg);font-size:13px;flex:0 0 auto}.gemboss-pagepicker-empty{padding:12px;font-size:13px;color:var(--gemboss-text-muted)}.gemboss-pagepicker-note{padding:8px 12px 12px;font-size:12px;line-height:1.5;color:var(--gemboss-text-muted);border-bottom:1px solid var(--gemboss-border, #e3e3e3)}.gemboss-pagepicker-note-link{color:var(--gemboss-primary);font-weight:600;text-decoration:none}.gemboss-pagepicker-note-link:hover{text-decoration:underline}.gemboss-pagepicker-back{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:4px 6px 8px;margin-bottom:2px;border-bottom:1px solid var(--gemboss-divider-soft, #edeff2);font-size:13px;font-weight:600;color:var(--gemboss-text)}.gemboss-pagepicker-back:hover{color:var(--gemboss-active-fg)}.gemboss-pagepicker-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pagepicker-back-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-back-icon svg{display:block}.gemboss-pagepicker-drill{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-drill svg{display:block}.gemboss-pagepicker-thumb{width:30px;height:30px;flex:0 0 auto;border-radius:8px;object-fit:cover;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg, #ffffff)}.gemboss-pagepicker-thumb--default{display:inline-flex;align-items:center;justify-content:center;color:var(--gemboss-text-muted)}.gemboss-pagepicker-thumb--default svg{width:16px;height:16px}.gemboss-pv-stage{flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center;padding:0}.gemboss-pv-frame{background:var(--gemboss-surface);overflow:hidden;height:100%;position:relative}.gemboss-pv-frame.desktop{width:100%;max-width:none}.gemboss-pv-frame.gemboss-pv-fit.desktop{position:absolute;top:0;left:0;width:var(--gemboss-pv-w, 100%);height:var(--gemboss-pv-h, 100%);transform:scale(calc(var(--gemboss-pv-scale, 1) * var(--gemboss-pv-user-zoom, 1)));transform-origin:top left}.gemboss-pv-frame.mobile{width:390px;flex:0 0 390px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:20px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-frame.tablet{width:768px;flex:0 0 768px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:16px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--gemboss-surface);transition:opacity .18s ease}.gemboss-pv-empty{margin:auto;text-align:center;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:8px}.gemboss-pv-empty-art{font-size:40px;line-height:1;opacity:.7}.gemboss-pv-empty-title{font-family:var(--gemboss-serif);font-size:18px;margin:0}.gemboss-pv-empty-sub{font-size:13px;color:var(--gemboss-text-muted);margin:0;line-height:1.5}.gemboss-pv-empty-cta{margin-top:6px;font-size:13px;font-weight:600;color:var(--gemboss-active-fg);text-decoration:none}.gemboss-pv-empty-cta:hover{text-decoration:underline}.gemboss-pv-spin{width:22px;height:22px;border:2px solid var(--gemboss-divider-soft);border-top-color:var(--gemboss-primary);border-radius:50%;animation:gemboss-spin .7s linear infinite}.gemboss-editor-resizer{flex:0 0 var(--gemboss-editor-inset);align-self:stretch}body.ui-resizing .gemboss-pv-iframe{pointer-events:none}.gemboss-editor-chat-toggle{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);border-radius:var(--gemboss-radius-md);cursor:pointer;font-size:14px;line-height:1;color:var(--gemboss-text-muted);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-chat-toggle:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-chat-toggle.collapsed{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle svg{display:block}.gemboss-editor-body .gemboss-ec{transition:flex-basis .28s cubic-bezier(.16,1,.3,1),width .28s cubic-bezier(.16,1,.3,1)}body.ui-resizing .gemboss-editor-body .gemboss-ec{transition:none;will-change:flex-basis,width}body.ui-resizing .gemboss-editor-body .gemboss-pv{will-change:flex-basis}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{border-width:0;overflow:hidden}.gemboss-editor-body.is-chat-collapsed>.gemboss-ec{visibility:hidden}.gemboss-editor-body.is-chat-collapsed .gemboss-editor-resizer{display:none}.gemboss-pagepicker-list{scrollbar-width:thin;scrollbar-color:rgba(31,30,29,.22) transparent}.gemboss-pagepicker-list::-webkit-scrollbar{width:9px}.gemboss-pagepicker-list::-webkit-scrollbar-track{background:transparent}.gemboss-pagepicker-list::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid transparent;background-clip:content-box}@media (max-width: 1000px){.gemboss-editor-body{flex-direction:column;gap:var(--gemboss-editor-inset)}}@media (max-width: 1000px){.gemboss-editor-resizer{display:none}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{max-height:0;min-height:0}.gemboss-editor-topbar{height:auto;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"left right" "center center";gap:8px 12px;padding:8px 12px}.gemboss-editor-tb-left{grid-area:left}.gemboss-editor-tb-right{padding-block:6px;grid-area:right;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-center{grid-area:center;justify-self:stretch;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-right::-webkit-scrollbar,.gemboss-editor-tb-center::-webkit-scrollbar{display:none}.gemboss-editor-tb-right>*{flex:0 0 auto}.gemboss-editor-tb-right>.gemboss-editor-tb-publish{position:sticky;right:0;z-index:1;box-shadow:-8px 0 8px -6px color-mix(in srgb,var(--gemboss-text) 18%,transparent)}.gemboss-editor-tb-name{display:none}.gemboss-editor-tb-ghost{padding:6px 12px;font-size:12px}.gemboss-editor-tb-publish{padding:8px 16px;font-size:13px}}@media (max-width: 640px){.gemboss-pv-frame.mobile{width:100%;max-width:390px;flex:0 1 auto;margin:8px 0}.gemboss-pv-frame.tablet{width:100%;max-width:768px;flex:0 1 auto;margin:8px 0}}.gemboss-editor-preview-pane{display:flex}.gemboss-editor-mobile-tabs{display:none}.gemboss-editor-dock{position:absolute;top:0;right:0;bottom:0;width:320px;max-width:90%;z-index:5;overflow-y:auto;background:var(--gemboss-surface);border-left:1px solid var(--gemboss-divider);box-shadow:var(--gemboss-shadow-overlay)}.gemboss-editor-preview-pane:has(>.gemboss-editor-dock){position:relative}:where(.gemboss-editor-body>.gemboss-ec){position:relative;width:var(--gemboss-chat-w, 384px);flex:0 0 var(--gemboss-chat-w, 384px);display:flex;flex-direction:column;background:var(--gemboss-panel-bg);border-right:1px solid var(--gemboss-divider);overflow:hidden}:where(.gemboss-editor-preview-pane){flex:1;min-width:0}@media (max-width: 1000px){:where(.gemboss-editor-body>.gemboss-ec){width:auto;flex:0 0 auto;max-height:48%}}@media (max-width: 760px){.gemboss-editor-resizer{display:none}.gemboss-editor-body .gemboss-ec{flex:1 1 auto;width:100%;min-width:0;max-height:none;border-right:none}.gemboss-editor-body .gemboss-editor-preview-pane{flex:1 1 auto}.gemboss-editor-body[data-mobile-pane=chat] .gemboss-editor-preview-pane,.gemboss-editor-body[data-mobile-pane=preview] .gemboss-ec{display:none}.gemboss-editor-mobile-tabs{display:flex;flex:0 0 auto;gap:6px;padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--gemboss-surface);border-top:1px solid var(--gemboss-divider)}.gemboss-editor-mobile-tab{flex:1 1 0;height:38px;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.gemboss-editor-mobile-tab.active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}}.gemboss-editor-statusbar{position:absolute;top:60px;right:14px;z-index:480;max-width:min(380px,calc(100vw - 28px));padding:8px 16px;font-size:12px;line-height:1.4;color:var(--gemboss-text-muted);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;box-shadow:var(--gemboss-shadow-raised);pointer-events:none;animation:gemboss-statusbar-in .18s cubic-bezier(.16,1,.3,1) both}.gemboss-editor-statusbar.done{background:#eaf6ef;color:#1f7a4d;border-color:var(--gemboss-success-border)}.gemboss-editor-statusbar.error{background:#fdecea;color:var(--gemboss-danger);border-color:#f3c2bb}@media (pointer: coarse){.gemboss-pv-device{width:38px;height:38px;font-size:16px}.gemboss-editor-back{width:44px;height:44px;font-size:20px}.gemboss-editor-chat-toggle{width:44px;height:44px;font-size:16px}}@media (pointer: coarse){.gemboss-editor-tb-ghost{padding:8px 16px;min-height:44px}.gemboss-editor-tb-publish{padding:12px 20px;min-height:44px}.gemboss-pagepicker-trigger{min-height:44px}}@media (pointer: coarse){.gemboss-ec-tab{min-height:44px}}@media (max-width: 760px){.gemboss-editor-chat-toggle{display:none}}.gemboss-pageedit{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--gemboss-panel-bg,#ffffff);z-index:320}.gemboss-pageedit-top{background:#fff;border-bottom:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-pageedit .gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-content:center}.gemboss-pageedit .gemboss-editor-tb-right{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-pageedit .gemboss-editor-tb-right>:first-child{margin-inline-start:auto}.gemboss-pageedit .gemboss-editor-tb-left{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-pageedit-title{font-family:var(--gemboss-serif,inherit);font-size:15px;font-weight:600;color:var(--gemboss-text,#1b1c1e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}.gemboss-pageedit-modes{flex:none;display:flex}.gemboss-pageedit-notice{display:flex;flex-wrap:wrap;align-items:center;gap:12px;flex:0 0 auto;padding:12px 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider);color:var(--gemboss-text);font-size:13px;line-height:1.5}.gemboss-pageedit-notice span{flex:1 1 240px;min-width:0}.gemboss-pageedit-notice button{min-height:44px;padding:8px 12px;flex:0 0 auto;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);color:var(--gemboss-text);cursor:pointer}@media (max-width:900px){.gemboss-pageedit-top{height:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "right" "center";gap:8px;padding:8px 12px}.gemboss-pageedit-top .gemboss-editor-tb-right{flex-wrap:wrap;overflow:visible}.gemboss-pageedit-top .gemboss-editor-tb-right button{min-height:44px}.gemboss-pageedit .gemboss-editor-tb-left{width:100%;overflow:hidden;flex-wrap:wrap}.gemboss-pageedit-modes{flex-basis:100%}.gemboss-pageedit .gemboss-editor-tb-right,.gemboss-pageedit .gemboss-editor-tb-center{justify-self:stretch;justify-content:flex-start;max-width:100%;overflow-x:auto}}.gemboss-sec-type{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:12px;background:#f1efe9;color:var(--gemboss-text-muted);text-transform:capitalize}.gemboss-sec-insert-wrap{position:relative}.gemboss-sec-insert-menu{position:absolute;top:42px;right:0;width:280px;max-height:60vh;overflow-y:auto;padding:6px;z-index:80}.gemboss-sec-insert-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font-size:13px;color:var(--gemboss-text,#1b1c1e);transition:background .12s ease,color .12s ease}.gemboss-sec-insert-item:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:focus-visible{outline:2px solid var(--gemboss-primary, #1b1c1e);outline-offset:-2px;background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:disabled{opacity:.6;cursor:default}.gemboss-sec-insert-item:disabled:hover{background:transparent}.gemboss-sec-insert-cat{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);text-transform:capitalize}.gemboss-sec-insert-empty{display:block;padding:16px;font-size:13px;color:var(--gemboss-text-muted,#686b71);text-decoration:none}.gemboss-pageedit-scope{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@media (max-width:1200px){.gemboss-pageedit-scope{display:none}}.gemboss-pageedit-pv{flex:1;min-width:0;background:var(--gemboss-preview-canvas);display:flex;justify-content:center;overflow:auto;position:relative}.gemboss-pageedit-pv .gemboss-pv-frame iframe{width:100%;height:100%;border:0;background:#fff;display:block}.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:var(--gemboss-active-bg);border:1px solid var(--gemboss-divider);font-size:12px;color:var(--gemboss-active-fg)}.gemboss-pageedit-chip strong{text-transform:capitalize}.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:var(--gemboss-active-fg);cursor:pointer;font-size:12px}.gemboss-pageedit-standing{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:#b07d1817;border-bottom:1px solid rgba(176,125,24,.28);font-size:13px;line-height:1.5;color:#7a5710}.gemboss-pageedit-standing code{font-size:12px;background:#b07d1824;border-radius:4px;padding:2px 4px}.gemboss-pageedit-standing button{margin-left:auto;flex:0 0 auto;border:1px solid rgba(176,125,24,.4);background:#fff;color:#7a5710;border-radius:8px;padding:4px 12px;font:inherit;font-weight:600;cursor:pointer}.gemboss-pageedit-standing button:disabled{opacity:.6;cursor:default}.gemboss-picker-backdrop{position:fixed;inset:0;background:#1f1e1d38;z-index:70}.gemboss-picker-head{flex:0 0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--gemboss-divider,#e5e7ea);font-weight:600;font-size:15px}.gemboss-picker-head button{border:0;background:transparent;font-size:15px;cursor:pointer;color:var(--gemboss-text-muted,#686b71)}.gemboss-picker-empty{padding:20px;text-align:center;color:var(--gemboss-text-muted,#686b71);font-size:13px}.gemboss-layers{position:fixed;top:0;left:0;bottom:0;width:300px;background:#fff;border-right:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-layers-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}.gemboss-layer{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:8px;padding:0 4px 0 6px}.gemboss-layer:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:var(--gemboss-active-bg)}.gemboss-layer-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:transparent;border:0;cursor:pointer;text-align:left;padding:8px 4px}.gemboss-layer-type{font-size:13px;font-weight:600;color:var(--gemboss-text,#1b1c1e);text-transform:capitalize}.gemboss-layer-head{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:195px}.gemboss-layer-acts{display:flex;gap:0;flex:0 0 auto}.gemboss-layer-acts button{width:26px;height:26px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--gemboss-text-muted,#686b71);font-size:13px;line-height:1}.gemboss-layer-acts button:hover:not(:disabled){background:var(--gemboss-hover,rgba(0,0,0,.07))}.gemboss-layer-acts button:disabled{opacity:.28;cursor:default}.gemboss-layer-del:hover:not(:disabled){color:#c0392b}@media (pointer: coarse){.gemboss-layer{flex-wrap:wrap}.gemboss-layer-acts{margin-left:auto}.gemboss-layer-acts button{width:44px;height:44px;font-size:15px}.gemboss-layer-main{flex:1 1 140px;min-height:44px;justify-content:center}.gemboss-layer-head{max-width:100%}}.gemboss-layer-grip{flex:0 0 auto;width:12px;margin-right:-2px;color:var(--gemboss-text-muted,#686b71);font-size:11px;letter-spacing:-2px;line-height:1;text-align:center;cursor:grab;user-select:none}.gemboss-layer[draggable=true]{cursor:grab}.gemboss-layer.is-dragging{opacity:.4}.gemboss-layer[data-drop=before]{box-shadow:0 -2px 0 var(--gemboss-primary, #1b1c1e)}.gemboss-layer[data-drop=after]{box-shadow:0 2px 0 var(--gemboss-primary, #1b1c1e)}.gemboss-layer.is-hidden .gemboss-layer-main{opacity:.5}.gemboss-layer-acts .gemboss-layer-eye{display:inline-grid;place-items:center}.gemboss-layer-acts .gemboss-layer-eye[aria-pressed=true]{color:var(--gemboss-text,#1b1c1e)}.gemboss-layers[hidden],.gemboss-settings[hidden],.gemboss-picker-backdrop[hidden]{display:none}.gemboss-settings{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);box-sizing:border-box;background:#fff;border-left:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:-8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-settings-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:20px}.gemboss-settings-grouphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-grouphead>span{font-size:var(--gemboss-fs-caption);font-weight:700;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-gen{border:1px solid var(--gemboss-divider,#e5e7ea);background:var(--gemboss-surface,#fff);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;color:var(--gemboss-text,#1b1c1e);cursor:pointer;white-space:nowrap}.gemboss-settings-gen:hover:not(:disabled){background:var(--gemboss-hover,#eceef2)}.gemboss-settings-gen:disabled{opacity:.55;cursor:default}.gemboss-settings-field{display:flex;flex-direction:column;gap:6px}.gemboss-settings-note{margin:0 0 4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-subdued,#6b675f);line-height:1.5}.gemboss-settings-error{margin:0 0 8px;padding:8px 12px;border-radius:8px;font-size:var(--gemboss-fs-caption);line-height:1.45;color:#8a1c1c;background:#fdecec;border:1px solid #f5c2c2}.gemboss-settings-field>span{font-size:var(--gemboss-fs-caption);font-weight:700;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-field :is(input,textarea,select):not([type=color]){width:100%}.gemboss-settings-field small{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71)}.gemboss-settings-field textarea.gemboss-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}.gemboss-settings-handle span{color:var(--gemboss-text-muted,#686b71);white-space:nowrap}.gemboss-settings-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:12px 20px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-cancel{background:transparent;border:1px solid var(--gemboss-divider,#e5e7ea);border-radius:8px;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-save{background:var(--gemboss-primary, #1b1c1e);color:#fff;border:0;border-radius:8px;font-size:13px;font-weight:700;padding:8px 20px;cursor:pointer}.gemboss-settings-save:disabled{opacity:.6;cursor:default}.gemboss-page-section-content :is(button,input,textarea){min-height:44px;min-width:44px}.gemboss-pageedit .gemboss-pv-device{width:44px;height:44px;flex-shrink:0}.gemboss-pageedit .gemboss-ec-dock-body :is(button,input,select){min-height:44px}.gemboss-bundle-look .gemboss-ei-body :is(button,input){min-height:44px}.gemboss-bundle-look .gemboss-ei-body input[type=color]{min-width:44px}.gemboss-page-draft-status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-surface,#fff);color:var(--gemboss-text,#1b1c1e);font-size:12px;line-height:1.5;box-shadow:0 1px 6px #0001}.gemboss-page-draft-status button{min-height:44px;min-width:44px;padding:8px 12px;border:1px solid var(--gemboss-border,#ccc);border-radius:6px;background:var(--gemboss-surface,#fff);cursor:pointer}.gemboss-page-draft-status button:hover{background:var(--gemboss-hover,#eceef2)}.gemboss-page-draft-status button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.gemboss-page-draft-status[data-page-preview-state=ready]{pointer-events:none}.gemboss-pageedit .gemboss-pageedit-pv{flex-direction:column;min-height:0;justify-content:flex-start}.gemboss-page-draft-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;justify-content:center}@media (max-width:1000px){.gemboss-pageedit .gemboss-editor-body>.gemboss-ec{flex:0 0 auto;height:44%;min-height:min(520px,76%);max-height:76%}}.gemboss-ei{position:absolute;top:12px;right:12px;z-index:6;width:320px;max-width:calc(100% - 24px);display:flex;flex-direction:column;max-height:calc(100% - 24px);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-xl);box-shadow:var(--gemboss-shadow-overlay);overflow:hidden}.gemboss-ei--docked{position:static;top:auto;right:auto;width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;background:transparent;flex:1;min-height:0}.gemboss-ei-head{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--gemboss-divider)}.gemboss-ei-title{font-size:var(--gemboss-fs-body);font-weight:700;line-height:1.2;min-width:0;overflow:hidden}.gemboss-ei-title small{display:block;font-weight:500;font-size:11px;color:var(--gemboss-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gemboss-ei-act,.gemboss-ei-x{margin-left:auto;width:26px;height:26px;flex:none;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);border-radius:6px;display:grid;place-items:center;font-size:14px}.gemboss-ei-x{margin-left:2px;font-size:13px}.gemboss-ei-act:hover,.gemboss-ei-x:hover{background:var(--gemboss-hover);color:var(--gemboss-text)}.gemboss-ei-act:disabled{opacity:.5;cursor:default}.gemboss-ei-tabs{display:flex;gap:2px;margin:8px 12px 0;background:var(--gemboss-panel-bg);padding:4px;border-radius:8px}.gemboss-ei-tab{flex:1;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-weight:600;font-size:12px;padding:6px 4px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px}.gemboss-ei-tab.on{background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:var(--gemboss-shadow-resting)}.gemboss-ei-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:2px 0 4px}.gemboss-ei-body::-webkit-scrollbar{width:9px}.gemboss-ei-body::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid var(--gemboss-surface);background-clip:content-box}.gemboss-ei-pane{padding:4px 16px 6px}.gemboss-ei-note{margin:0 0 8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-hover,#eceef2);border:1px solid var(--gemboss-divider,#e5e7ea);color:var(--gemboss-text-muted,#686b71);font-size:12px;line-height:1.45}.gemboss-ei-grp{border-bottom:1px solid var(--gemboss-divider-soft);padding:12px 0}.gemboss-ei-grp:last-child{border-bottom:none}.gemboss-ei-gh{font-size:var(--gemboss-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gemboss-text-muted);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:0;-webkit-appearance:none}.gemboss-ei-gh:hover{color:var(--gemboss-text)}.gemboss-ei-chev{font-size:9px;width:10px;display:inline-block;color:var(--gemboss-text-muted);transition:transform .12s ease}.gemboss-ei-gh-note{margin-left:6px;font-size:10px;font-weight:500;opacity:.55;text-transform:none;letter-spacing:0}.gemboss-ei-gh[data-open=closed]{margin-bottom:0}.gemboss-ei-gh[data-open=closed]~*{display:none}.gemboss-ei-fld{margin-bottom:12px}.gemboss-ei-fld:last-child{margin-bottom:0}.gemboss-ei-fld>label{display:block;font-size:13px;font-weight:500;color:var(--gemboss-text);margin-bottom:6px}.gemboss-ei-inp{width:100%}.gemboss-ei-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}select.gemboss-ei-inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gemboss-text-muted) 50%),linear-gradient(135deg,var(--gemboss-text-muted) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}.gemboss-ei-swatches{display:flex;gap:8px}.gemboss-ei-sw{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #1f1e1d1a}.gemboss-ei-sw.on{border-color:var(--gemboss-text);box-shadow:0 0 0 2px var(--gemboss-surface),0 0 0 3px var(--gemboss-primary)}.gemboss-ei-sw:disabled{cursor:default;opacity:.7}.gemboss-ei-apply{margin-top:2px;background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;font-size:var(--gemboss-fs-caption);font-weight:700;padding:8px 16px;cursor:pointer}.gemboss-ei-apply:hover{background:var(--gemboss-primary-dark)}.gemboss-ei-apply:disabled{opacity:.6;cursor:default}.gemboss-ei-hint{margin:8px 0 0;font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-empty{padding:24px 16px;text-align:center;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.gemboss-ei-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--gemboss-divider);font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-savedot{width:6px;height:6px;border-radius:50%;background:var(--gemboss-success);box-shadow:0 0 0 3px #2e8b572e}.gemboss-ei-savedot.busy{background:var(--gemboss-primary);box-shadow:0 0 0 3px var(--gemboss-primary-soft)}.gemboss-ei-foot.is-error{color:var(--gemboss-danger)}.gemboss-ei-foot.is-error .gemboss-ei-savedot{background:var(--gemboss-danger);box-shadow:0 0 0 3px #d72c0d29}.gemboss-ei-drag{cursor:grab;user-select:none}.gemboss-ei-drag:active{cursor:grabbing}.gemboss-ei-dragmask{position:fixed;inset:0;z-index:9998;cursor:grabbing}.gemboss-ei-block{border:1px solid var(--gemboss-divider);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-block:last-child{margin-bottom:0}.gemboss-ei-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--gemboss-text)}.gemboss-ei-block-x{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);width:22px;height:22px;border-radius:6px;font-size:11px;flex:none}.gemboss-ei-block-x:hover{background:var(--gemboss-hover);color:var(--gemboss-danger-strong)}.gemboss-ei-block-x:disabled{opacity:.5;cursor:default}.gemboss-ei-block .gemboss-ei-inp{background:var(--gemboss-surface)}.gemboss-ei-addrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.gemboss-ei-addchip{border:1px dashed var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text-muted);border-radius:999px;font-size:var(--gemboss-fs-micro);font-weight:600;padding:6px 12px;cursor:pointer}.gemboss-ei-addchip:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg);border-style:solid}.gemboss-ei-addchip:disabled{opacity:.5;cursor:default}.gemboss-ei-img{display:flex;gap:8px;align-items:flex-start}.gemboss-ei-img-thumb{flex:none;width:52px;height:52px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg) center/cover no-repeat;display:grid;place-items:center;color:var(--gemboss-text-muted);font-size:16px}.gemboss-ei-img-ctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.gemboss-ei-img-actions{display:flex;gap:6px}.gemboss-ei-img-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;padding:8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg);max-height:180px;overflow-y:auto}.gemboss-ei-img-cell{aspect-ratio:1;border:1px solid var(--gemboss-divider);border-radius:8px;cursor:pointer;padding:0;background:var(--gemboss-surface) center/cover no-repeat}.gemboss-ei-img-cell:hover{border-color:var(--gemboss-primary);box-shadow:0 0 0 2px var(--gemboss-primary-soft)}.gemboss-ei-img-cell:disabled{opacity:.5;cursor:default}.gemboss-ei-img-grid .gemboss-ei-hint{grid-column:1/-1;margin:0}.gemboss-ei-gen{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-gen .gemboss-ei-apply{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}.gemboss-ei-gen .gemboss-narr-spin{width:11px;height:11px}.gemboss-ei-oos{margin:4px 16px 12px;padding:12px;border:1px solid var(--gemboss-divider);border-left:3px solid var(--gemboss-text-muted);border-radius:8px;background:var(--gemboss-panel-bg)}.gemboss-ei-oos-h{font-size:var(--gemboss-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gemboss-text-muted);font-weight:700;margin-bottom:8px}.gemboss-ei-oos p{margin:0 0 6px;font-size:12px;color:var(--gemboss-text-muted);line-height:1.45}.gemboss-ei-oos p:last-child{margin-bottom:0}.gemboss-ei-oos b{color:var(--gemboss-text);font-weight:600}.gemboss-ei-edgebox{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.gemboss-ei-rep-item{border:1px solid var(--gemboss-border,#2a2a3a);border-radius:6px;padding:8px;margin-bottom:8px}.gemboss-ei-rep-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:12px;opacity:.8}.gemboss-ei-rep-head>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ei-rep-acts{display:flex;gap:2px;flex:0 0 auto}.gemboss-ei-rep-acts button{background:none;border:0;color:inherit;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1}.gemboss-ei-rep-acts button:hover:not(:disabled){background:var(--gemboss-border,#2a2a3a)}.gemboss-ei-rep-acts button:disabled{opacity:.3;cursor:default}.gemboss-ei-rep-add{width:100%;padding:6px;border:1px dashed var(--gemboss-border,#2a2a3a);border-radius:6px;background:none;color:inherit;cursor:pointer;font-size:12px}.gemboss-ei-rep-add:hover:not(:disabled){background:var(--gemboss-border,#2a2a3a)}.gemboss-ei-rep-add:disabled{opacity:.4;cursor:default}.gemboss-ei-edge{display:flex;flex-direction:column;align-items:center;gap:4px}.gemboss-ei-edge input{width:100%;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}.gemboss-ei-edge span{font-size:var(--gemboss-fs-micro);letter-spacing:.06em;color:var(--gemboss-text-muted);font-weight:700}.gemboss-ec-dock-body{flex:1;min-height:0;overflow-y:auto;padding:12px}.gemboss-ei-group{padding:12px 0}.gemboss-ei-group+.gemboss-ei-group{border-top:1px solid var(--gemboss-divider)}.gemboss-ei-group>.gemboss-ei-fld:last-child{margin-bottom:0}.gemboss-ei-grouphead{margin:0 0 12px;font-size:var(--gemboss-fs-micro,11px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gemboss-ei-color{display:flex;gap:8px;align-items:center}.gemboss-ei-color .gemboss-ei-inp{flex:1;min-width:0}.gemboss-ei-swatch{flex:none;width:34px;height:34px;padding:0;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);cursor:pointer}.gemboss-ei-swatch::-webkit-color-swatch-wrapper{padding:2px}.gemboss-ei-swatch::-webkit-color-swatch{border:none;border-radius:6px}.gemboss-ei-swatch:disabled{cursor:default;opacity:.7}.gemboss-ei-suffix{margin:4px 0 0;font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-fld>label>.gemboss-ei-rangeval{float:right;font-weight:700;color:var(--gemboss-text);font-variant-numeric:tabular-nums}.gemboss-ei-range{width:100%;accent-color:var(--gemboss-primary);cursor:pointer}.gemboss-ei-range:disabled{cursor:default;opacity:.7}@media (max-width:760px){.gemboss-ei{position:static;width:auto;max-width:none;max-height:none;margin:8px;box-shadow:var(--gemboss-shadow-raised)}}.gemboss-ei-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}.gemboss-ei-tnode{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border-radius:6px;padding-right:4px}.gemboss-ei-tnode:hover{background:var(--gemboss-surface)}.gemboss-ei-tnode.on{background:var(--gemboss-primary-soft,var(--gemboss-surface));box-shadow:inset 2px 0 0 var(--gemboss-primary)}.gemboss-ei-tname{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;border:0;background:transparent;cursor:pointer;text-align:left;padding:6px 2px;color:var(--gemboss-text);font-size:12px;font-weight:600}.gemboss-ei-tname small{font-weight:400;font-size:10px;color:var(--gemboss-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ei-tacts{flex:none;display:flex;gap:1px;opacity:0;transition:opacity .12s}.gemboss-ei-tnode:hover .gemboss-ei-tacts,.gemboss-ei-tnode.on .gemboss-ei-tacts,.gemboss-ei-tacts:focus-within{opacity:1}.gemboss-ei-tacts button{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-size:11px;line-height:1;padding:4px 6px;border-radius:6px}.gemboss-ei-tacts button:hover:not(:disabled){background:var(--gemboss-surface);color:var(--gemboss-text)}.gemboss-ei-tacts button:disabled{opacity:.3;cursor:default}.gemboss-ei-tadd{flex-basis:100%;padding:4px 2px 6px}.gemboss-editor-topbar--guest{grid-template-columns:1fr auto 1fr}.gemboss-guest-mark{flex:0 0 auto;display:block}.gemboss-guest-brand{font-weight:700;letter-spacing:-.02em;font-size:15px;margin-left:8px}.gemboss-guest-note{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider-soft);border-radius:999px;padding:4px 12px;white-space:nowrap}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;justify-content:flex-end}.gemboss-guest-signin{font-size:var(--gemboss-fs-body);font-weight:600;color:var(--gemboss-text-muted);text-decoration:none}.gemboss-guest-signin:hover{color:var(--gemboss-text)}.gemboss-guest-keep{border:0;border-radius:999px;background:var(--gemboss-primary);color:var(--gemboss-on-primary);cursor:pointer;font:inherit;font-size:var(--gemboss-fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 20px;white-space:nowrap}.gemboss-guest-keep:hover{background:var(--gemboss-primary-dark)}@media (max-width: 720px){.gemboss-guest-note{display:none}}@media (max-width: 1000px){.gemboss-editor-topbar--guest{grid-template-columns:auto minmax(0,1fr)}}@media (max-width: 460px){.gemboss-guest-brand{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{gap:8px}.gemboss-editor-topbar--guest .gemboss-guest-keep{padding-inline:12px}}@media (max-width: 400px){.gemboss-editor-topbar--guest{padding-inline:8px;column-gap:8px}}.gemboss-platform-main:has(.gemboss-editor){padding-bottom:0}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(L){"use strict";var N=L.gembossUI;if(!N){L.console&&L.console.error("@gemboss/ui engine-plain.js: load kit-plain.js first (it defines gembossUI)");return}if(N.enginePicker)return;var Z={chip:"Engine",dialog:"Assistant engine",tabs:"Engine, setup and status",engineTab:"Engine",setupTab:"Setup",statusTab:"Status",engine:"Engine",model:"Model",effort:"Effort",defaultChoice:"Default",copy:"Copy command",copied:"Copied",copyFailed:"Select the command and copy it",pairingCode:"Pairing code",steps:"Paste the command into Terminal, then press Enter.",bridge:"Bridge on your machine",version:"Version",latest:"Latest",startsAtSignIn:"Starts at sign-in",machine:"Machine",lastSeen:"Last seen",yes:"Yes",no:"No",unknown:"Not known",running:"Running",outdated:"Outdated",offline:"Not connected",unpaired:"Not set up",checking:"Checking",updateDue:"Update available",close:"Close"},U={running:"ok",outdated:"warn",offline:"down",unpaired:"down",checking:"idle"},q={ok:"gb-engine-dot gb-engine-dot--ok",warn:"gb-engine-dot gb-engine-dot--warn",down:"gb-engine-dot gb-engine-dot--down",idle:"gb-engine-dot gb-engine-dot--idle"},$={success:"ui-badge ui-badge--success",warning:"ui-badge ui-badge--warning",critical:"ui-badge ui-badge--critical",info:"ui-badge ui-badge--info"},ee={warn:"gb-engine-notice gb-engine-notice--warn",down:"gb-engine-notice gb-engine-notice--down"},ne=["notes","modelControl","statusActions"],V=function(i){return i&&N.engineMark?N.engineMark(i,{decorative:!0}):null},I=typeof HTMLElement<"u"&&Object.prototype.hasOwnProperty.call(HTMLElement.prototype,"popover"),D=function(i){return typeof Node<"u"&&i instanceof Node},te=0;function r(i,g,t){var u=document.createElement(i);if(g)for(var l in g){var o=g[l];o==null||o===!1||(l==="text"?u.textContent=String(o):l==="className"?u.className=o:u.setAttribute(l,o===!0?"":String(o)))}return z(u,t),u}function z(i,g){return g==null||g===!1?i:Array.isArray(g)?(g.forEach(function(t){z(i,t)}),i):(i.appendChild(D(g)?g:document.createTextNode(String(g))),i)}function x(i){return typeof DocumentFragment<"u"&&i instanceof DocumentFragment?Array.prototype.slice.call(i.childNodes):i}var ae=function(i){return D(i)||Array.isArray(i)&&i.some(D)};function j(i,g){for(var t=Array.prototype.slice.call(g.childNodes),u=0;u<t.length;u++){var l=t[u],o=i.childNodes[u];o?o.nodeType===l.nodeType&&(o.nodeType!==1||o.tagName===l.tagName&&o.getAttribute("data-gb-key")===l.getAttribute("data-gb-key"))?ie(o,l):i.replaceChild(l,o):i.appendChild(l)}for(;i.childNodes.length>t.length;)i.removeChild(i.lastChild)}function ie(i,g){if(i.nodeType!==1){i.nodeValue!==g.nodeValue&&(i.nodeValue=g.nodeValue);return}var t,u;for(t=i.attributes.length-1;t>=0;t--)u=i.attributes[t].name,u!=="style"&&!g.hasAttribute(u)&&i.removeAttribute(u);for(t=0;t<g.attributes.length;t++)u=g.attributes[t],i.getAttribute(u.name)!==u.value&&i.setAttribute(u.name,u.value);i.hasAttribute("data-gb-slot")||(j(i,g),i.tagName==="SELECT"&&i.value!==g.getAttribute("data-value")&&(i.value=g.getAttribute("data-value")||""))}function re(i){var g=function(){try{var t=document.createElement("textarea");t.value=i,t.setAttribute("readonly",""),t.style.position="fixed",t.style.opacity="0",document.body.appendChild(t),t.select();var u=document.execCommand("copy");return t.remove(),u}catch{return!1}};try{if(navigator.clipboard&&navigator.clipboard.writeText)return navigator.clipboard.writeText(i).then(function(){return!0},g)}catch{}return Promise.resolve(g())}function oe(i,g){var t={},u="gb-engine-"+ ++te,l={open:!1,tab:"engine",said:"",saidTimer:0},o=Object.assign({},Z),M={};function G(e){Object.keys(e||{}).forEach(function(n){var a=e[n];if((n==="bridge"||n==="setup")&&a&&typeof a=="object"&&t[n]&&typeof t[n]=="object"&&(a=Object.assign({},t[n],a)),n==="labels"){o=Object.assign({},o,a||{});return}ne.indexOf(n)>=0&&(a=x(a)),n==="engines"&&Array.isArray(a)&&(a=a.map(function(s){return s&&s.note?Object.assign({},s,{note:x(s.note)}):s})),n==="setup"&&a&&a.steps&&(a=Object.assign({},a,{steps:x(a.steps)})),n==="bridge"&&a&&a.detail&&(a=Object.assign({},a,{detail:x(a.detail)})),t[n]=a})}G(g);var T=document.createElement("span");T.className="gb-engine"+(t.className?" "+t.className:"");var b=r("button",{type:"button",className:"gb-engine-chip","aria-haspopup":"dialog","aria-expanded":"false","aria-controls":u+"-panel"}),d=r("div",{id:u+"-panel",className:"gb-engine-panel gemboss-popover-surface",role:"dialog","aria-label":o.dialog,hidden:!0});I&&d.setAttribute("popover","manual"),T.appendChild(b),I?T.appendChild(d):document.body.appendChild(d),i.appendChild(T);function H(){return["engine"].concat(t.setup?["setup"]:[],t.bridge?["status"]:[])}function B(){return H().indexOf(l.tab)>=0?l.tab:"engine"}function A(e,n){return ae(n)?(M[e]=Array.isArray(n)?n.filter(D):[n],r("span",{"data-gb-slot":e,"data-gb-key":"slot-"+e,style:"display:contents"})):n}function le(){d.querySelectorAll("[data-gb-slot]").forEach(function(e){var n=M[e.getAttribute("data-gb-slot")]||[],a=Array.prototype.slice.call(e.childNodes);a.length===n.length&&a.every(function(s,c){return s===n[c]})||e.replaceChildren.apply(e,n)})}function de(){var e=t.bridge&&t.showBridgeDot!==!1?U[t.bridge.state]:null,n=(t.engines||[]).filter(function(c){return c.id===t.engine})[0],a=t.model?(t.models||[]).filter(function(c){return c.id===t.model})[0]:null,s=n?V(n.mark):null;return r("span",null,[e?r("span",{className:q[e],"aria-hidden":"true"}):null,r("span",{className:"gb-engine-chiplabel"},[n?n.label:t.engine||"",a?r("span",{className:"gb-engine-chipsub",text:" \xB7 "+a.label}):null]),s?r("span",{className:"gb-engine-chipmark"},s):null])}function ue(){var e=(t.engines||[]).filter(function(s){return s.id===t.engine})[0],n=t.model?(t.models||[]).filter(function(s){return s.id===t.model})[0]:null,a=t.bridge&&t.showBridgeDot!==!1&&t.bridge.state!=="running"?". "+o.bridge+": "+o[t.bridge.state]:"";return o.chip+": "+(e?e.label:t.engine)+(n?" \xB7 "+n.label:"")+a}function K(e,n,a,s,c,p){var m=t.locked||!c||!!p,F=typeof p=="string"?p:void 0;if(a.length>6||a.some(function(f){return f.group})){var w=r("select",{className:"ui-select ui-select--slim gb-engine-select",disabled:m,title:F,"data-kind":e,"data-value":s||""}),y=null,O;return a.forEach(function(f){var X=r("option",{value:f.id,title:f.title,text:f.label,selected:(s||"")===f.id});f.group?((!y||O!==f.group)&&(y=r("optgroup",{label:f.group}),O=f.group,w.appendChild(y)),y.appendChild(X)):(y=null,O=void 0,w.appendChild(X))}),r("label",{className:"gb-engine-field","data-gb-key":e},[r("span",{className:"gb-engine-label",text:n}),w])}var W=u+"-lbl-"+e;return r("div",{className:"gb-engine-field","data-gb-key":e},[r("span",{className:"gb-engine-label",id:W,text:n}),r("div",{className:"gb-engine-opts",role:"group","aria-labelledby":W},a.map(function(f){return r("button",{type:"button",className:"gb-engine-opt","aria-pressed":String((s||"")===f.id),disabled:m,title:F||f.title,text:f.label,"data-kind":e,"data-choice":f.id})}))])}function P(e){return!(t.locked||e.disabled||!t.onEngineChange)}function ce(){var e=u+"-lbl-engine",n=t.engines||[],a=(n.filter(function(c){return c.id===t.engine&&P(c)})[0]||n.filter(P)[0]||{}).id,s=[r("div",{className:"gb-engine-field","data-gb-key":"engine"},[r("span",{className:"gb-engine-label",id:e,text:o.engine}),r("div",{className:"gb-engine-list",role:"radiogroup","aria-labelledby":e},n.map(function(c){return r("button",{type:"button",role:"radio","aria-checked":String(c.id===t.engine),"data-engine":c.id,"data-gb-key":"engine-"+c.id,tabindex:c.id===a?"0":"-1",className:"gb-engine-row",disabled:!P(c)},[r("span",{className:"gb-engine-rowhead"},[r("span",{className:"gb-engine-rowname",text:c.label}),c.badge?r("span",{className:c.badgeTone?$[c.badgeTone]:"ui-badge",text:c.badge}):null]),c.note?r("span",{className:"gb-engine-note"},A("note-"+c.id,c.note)):null])}))])];return t.modelControl?s.push(r("div",{className:"gb-engine-field","data-gb-key":"model"},[r("span",{className:"gb-engine-label",text:o.model}),A("modelControl",t.modelControl)])):t.models&&t.models.length&&s.push(K("model",o.model,t.models,t.model,t.onModelChange)),t.efforts&&t.efforts.length&&s.push(K("effort",o.effort,t.efforts,t.effort,t.onEffortChange,t.effortDisabled)),t.notes&&s.push(r("div",{className:"gb-engine-notes"},A("notes",t.notes))),s}function ge(){var e=t.setup||{},n=t.bridge,a=[];return n&&(n.state==="outdated"||n.state==="offline"||n.state==="unpaired")&&a.push(r("p",{className:"gb-engine-callout "+(n.state==="outdated"?"gb-engine-callout--warn":"gb-engine-callout--down")},[r("strong",{text:o.bridge+": "+o[n.state].toLowerCase()+"."}),n.detail?" ":null,n.detail?A("detail",n.detail):null])),(e.steps||e.command)&&a.push(r("div",{className:"gb-engine-steps"},e.steps?A("steps",e.steps):r("p",{text:o.steps}))),e.command&&(a.push(r("pre",{className:"gb-engine-cmd"},r("code",{text:e.command}))),a.push(r("div",{className:"gb-engine-actions"},[r("button",{type:"button",className:"ui-btn ui-btn--primary","data-gb-copy":"",text:l.said==="copied"?o.copied:o.copy}),r("span",{className:"gb-engine-said",role:"status",text:l.said==="failed"?o.copyFailed:l.said==="copied"?o.copied:""})]))),e.pairingCode&&a.push(r("p",{className:"gb-engine-code"},[o.pairingCode+": ",r("code",{text:e.pairingCode})])),e.note&&a.push(r("p",{className:"gb-engine-note"},e.note)),a}function fe(){var e=t.bridge,n=r("dl",{className:"gb-engine-rows"}),a=function(p,m){n.appendChild(r("dt",{text:p})),n.appendChild(r("dd",null,m))},s=function(p){return p==null?o.unknown:p?o.yes:o.no};a(o.bridge,[r("span",{className:q[U[e.state]],"aria-hidden":"true"})," "+o[e.state]]),e.version&&a(o.version,e.version+(e.latest&&e.latest!==e.version?" \xB7 "+o.latest+" "+e.latest:"")),a(o.startsAtSignIn,s(e.autostart)),e.machine&&a(o.machine,e.machine),e.lastSeen&&a(o.lastSeen,e.lastSeen);var c=[n];return e.detail&&e.state!=="running"&&c.push(r("p",{className:"gb-engine-note"},A("detail",e.detail))),t.statusActions&&c.push(r("div",{className:"gb-engine-actions"},A("statusActions",t.statusActions))),c}function be(){var e=H(),n=B(),a=document.createElement("div");return e.length>1&&a.appendChild(r("div",{className:"ui-tabs gb-engine-tabs",role:"tablist","aria-label":o.tabs,"data-gb-key":"tabs"},e.map(function(s){return r("button",{type:"button",role:"tab",id:u+"-tab-"+s,"aria-controls":u+"-pane-"+s,"aria-selected":String(n===s),tabindex:n===s?"0":"-1","data-tab":s,"data-gb-key":"tab-"+s},[{engine:o.engineTab,setup:o.setupTab,status:o.statusTab}[s],s==="setup"&&t.bridge&&t.bridge.state==="outdated"?r("span",{className:"gb-engine-dot gb-engine-dot--warn",role:"img","aria-label":o.updateDue}):null])}))),a.appendChild(r("div",{className:"gb-engine-pane",role:e.length>1?"tabpanel":null,id:u+"-pane-"+n,"aria-labelledby":e.length>1?u+"-tab-"+n:null,"data-gb-key":"pane-"+n},n==="engine"?ce():n==="setup"?ge():fe())),a}var S=null;function h(){var e=ue();b.setAttribute("aria-label",e),b.title=e,b.setAttribute("aria-expanded",l.open?"true":"false");var n=(t.engines||[]).filter(function(s){return s.id===t.engine})[0];if(b.className=n&&V(n.mark)?"gb-engine-chip has-mark":"gb-engine-chip",j(b,de()),d.setAttribute("aria-label",o.dialog),M={},!l.open){j(d,document.createElement("div"));return}j(d,be()),le();var a=d.querySelector(".gb-engine-pane");C&&a!==S&&(S&&C.unobserve(S),a&&C.observe(a),S=a)}function E(){l.open&&N.placeFloating(d,b,t.end)}function Y(e){e!==t.engine&&(t.engine=e,t.onEngineChange&&t.onEngineChange(e),h())}function _(e,n,a){var s=e==="model"?t.model:t.effort,c=e==="model"?t.onModelChange:t.onEffortChange;!c||t.locked||((s||"")!==n&&(e==="model"?t.model=n:t.effort=n,c(n)),a?Q():h())}function J(e,n){if(e!==B()&&(l.tab=e,t.onTabChange&&t.onTabChange(e),h(),E()),n){var a=d.querySelector('[role="tab"][data-tab="'+e+'"]');a&&a.focus()}}d.addEventListener("click",function(e){var n=e.target.closest?e.target:e.target.parentElement,a=n&&n.closest("button");!a||!d.contains(a)||a.disabled||(a.hasAttribute("data-tab")?J(a.getAttribute("data-tab")):a.hasAttribute("data-engine")?Y(a.getAttribute("data-engine")):a.hasAttribute("data-choice")?_(a.getAttribute("data-kind"),a.getAttribute("data-choice"),!0):a.hasAttribute("data-gb-copy")&&pe())}),d.addEventListener("change",function(e){var n=e.target;n&&n.tagName==="SELECT"&&n.hasAttribute("data-kind")&&d.contains(n)&&_(n.getAttribute("data-kind"),n.value,!1)}),d.addEventListener("keydown",function(e){var n=e.target;if(!(!n||!n.getAttribute)){if(n.getAttribute("role")==="tab"){var a=H(),s=a.indexOf(B()),c=e.key==="ArrowRight"?a[(s+1)%a.length]:e.key==="ArrowLeft"?a[(s-1+a.length)%a.length]:e.key==="Home"?a[0]:e.key==="End"?a[a.length-1]:null;if(!c)return;e.preventDefault(),J(c,!0)}else if(n.hasAttribute("data-engine")){var p=e.key==="ArrowDown"||e.key==="ArrowRight"?1:e.key==="ArrowUp"||e.key==="ArrowLeft"?-1:0,m=(t.engines||[]).filter(P);if(!p||!m.length)return;e.preventDefault();var F=m.map(function(O){return O.id}).indexOf(n.getAttribute("data-engine")),w=m[(F+p+m.length)%m.length];Y(w.id);var y=d.querySelector('[data-engine="'+(L.CSS&&CSS.escape?CSS.escape(w.id):w.id)+'"]');y&&y.focus()}}});function pe(){var e=t.setup||{};e.command&&re(e.command).then(function(n){l.said=n?"copied":"failed",h(),clearTimeout(l.saidTimer),l.saidTimer=setTimeout(function(){l.said="",h()},2e3)})}var R=-1,k=0,C=typeof ResizeObserver>"u"?null:new ResizeObserver(function(){d.scrollHeight!==R&&(R=d.scrollHeight,E())});function me(e){if(!(e.key!=="Escape"||e.defaultPrevented||!l.open)&&!(e.isComposing||e.keyCode===229)){var n=document.activeElement,a=n&&n.closest?n.closest('dialog[open], [aria-modal="true"]'):null;a&&!d.contains(a)||(e.preventDefault(),n&&(d.contains(n)||b.contains(n))?(e.stopPropagation(),Q()):v(!1))}}function he(e){var n=e.target,a=n&&n.closest?n.closest('dialog[open], [aria-modal="true"]'):null;a&&!d.contains(a)&&v(!1)}function ve(e){var n=e.target;d.contains(n)||b.contains(n)||n&&n.closest&&n.closest('dialog[open], [aria-modal="true"], .ui-overlay')||v(!1)}function ye(e){var n=e.target;!n||d.contains(n)||n!==document&&n.nodeType!==9&&!n.contains(b)||k||(k=requestAnimationFrame(function(){k=0,E()}))}function Ne(e){var n=e?"addEventListener":"removeEventListener";document[n]("keydown",me,!0),document[n]("pointerdown",ve,!0),document[n]("focusin",he,!0),document[n]("scroll",ye,!0),window[n]("resize",E),e?C&&C.observe(d):(cancelAnimationFrame(k),k=0,C&&C.disconnect(),S=null,R=-1)}function v(e){if(e!==l.open){if(l.open=e,e||(l.tab="engine"),d.hidden=!e,e?d.setAttribute("data-open",""):d.removeAttribute("data-open"),I&&(e&&!d.matches(":popover-open")&&d.showPopover(),!e&&d.matches(":popover-open")&&d.hidePopover()),Ne(e),h(),E(),e){var n=d.querySelector('[role="tab"][aria-selected="true"]')||d.querySelector("button:not([disabled])");n&&n.focus()}t.onOpenChange&&t.onOpenChange(e)}}function Q(){v(!1),b.focus()}return b.addEventListener("click",function(){v(!l.open)}),h(),{element:T,panel:d,update:function(e){G(e),h()},openTab:function(e){var n=l.open;if(e!==l.tab&&(l.tab=e,t.onTabChange&&t.onTabChange(e)),!n)v(!0);else{h(),E();var a=d.querySelector('[role="tab"][aria-selected="true"]');a&&a.focus()}},open:function(){v(!0)},close:function(){v(!1)},isOpen:function(){return l.open},destroy:function(){v(!1),clearTimeout(l.saidTimer),T.remove(),d.remove()}}}function se(i){i=i||{};var g=i.tone==="warn"?"warn":"down",t=r("p",{className:ee[g]+(i.className?" "+i.className:""),role:"status"},[r("span",{className:q[g],"aria-hidden":"true"}),r("span",{className:"gb-engine-notice-text"},x(i.node)||i.text||"")]);if(i.onOpenSetup){var u=r("button",{type:"button",className:"gb-engine-notice-link",text:i.action||"Open setup"});u.addEventListener("click",i.onOpenSetup),t.appendChild(u)}return t}N.enginePicker=oe,N.bridgeNotice=se})(typeof globalThis<"u"?globalThis:this);
|
package/src/index-table.tsx
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
* component can render it; the callbacks (`onSort`, `onSelectionChange`, bulk `onAction`) need a client parent.
|
|
19
19
|
* Its own module, "use client": nothing the admin imports pulls it in (first-load budget).
|
|
20
20
|
*/
|
|
21
|
+
import "./collections.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
|
|
21
22
|
import React, { useEffect, useRef } from "react";
|
|
22
23
|
import { ariaSort, SortHeader, CollectionSkeleton, type CollectionColumn, type CollectionSort, type SortDirection, type SortLinkProps } from "./collections";
|
|
23
24
|
import { BulkBar, useSelection, type BulkAction } from "./selection";
|