@scenography/overlay-presets 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +902 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +337 -0
- package/dist/index.d.mts +337 -0
- package/dist/index.mjs +890 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +46 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
import { Overlay, OverlayComponent, OverlayContext, Text } from "@scenography/overlay";
|
|
2
|
+
import { Artwork } from "@scenography/plugin-artwork/data";
|
|
3
|
+
|
|
4
|
+
//#region src/util.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* Button/label content: a glyph string, a DOM node (e.g. an SVG icon), or a
|
|
7
|
+
* factory returning either. A factory is handy for icons that must be a fresh
|
|
8
|
+
* node each time the content is swapped (a DOM node can only live in one place).
|
|
9
|
+
*/
|
|
10
|
+
type IconContent = string | Node | (() => string | Node);
|
|
11
|
+
//#endregion
|
|
12
|
+
//#region src/lucide.d.ts
|
|
13
|
+
/**
|
|
14
|
+
* Render a Lucide icon by name as overlay button content.
|
|
15
|
+
*
|
|
16
|
+
* Lucide is an OPTIONAL peer dependency: it's imported lazily, so the overlay
|
|
17
|
+
* works without it. When lucide isn't installed the icon renders empty — install
|
|
18
|
+
* `lucide`, pass your own `icon` to a prefab, or use `actionButton` if you don't
|
|
19
|
+
* want the dependency.
|
|
20
|
+
*/
|
|
21
|
+
declare function lucideIcon(name: string, size?: number): IconContent;
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/components/fullscreen/fullscreen.d.ts
|
|
24
|
+
interface FullscreenButtonOptions {
|
|
25
|
+
/** Icons for the enter/exit states. Default to plain glyphs ⛶ / ✕. */
|
|
26
|
+
icons?: {
|
|
27
|
+
enter: IconContent;
|
|
28
|
+
exit: IconContent;
|
|
29
|
+
};
|
|
30
|
+
/** Override the daisyUI/utility classes on the button. */
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* A fullscreen toggle. daisyUI prefab (styled with `btn`). Defaults to plain
|
|
35
|
+
* glyphs and pulls in no icon library; pass `icons` (e.g. via `lucideIcon` or
|
|
36
|
+
* your own SVGs) for richer iconography.
|
|
37
|
+
*/
|
|
38
|
+
declare function fullscreenButton(options?: FullscreenButtonOptions): OverlayComponent;
|
|
39
|
+
//#endregion
|
|
40
|
+
//#region src/components/mute/mute.d.ts
|
|
41
|
+
interface MuteButtonOptions {
|
|
42
|
+
/** Icons for the unmuted/muted states. Default to plain glyphs 🔊 / 🔇. */
|
|
43
|
+
icons?: {
|
|
44
|
+
on: IconContent;
|
|
45
|
+
off: IconContent;
|
|
46
|
+
};
|
|
47
|
+
/** Override the daisyUI/utility classes on the button. */
|
|
48
|
+
className?: string;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* A mute toggle for background audio. daisyUI prefab (styled with `btn`). Drives
|
|
52
|
+
* `ctx.media` master mute, so it silences every source while keeping their
|
|
53
|
+
* individual volumes — one click restores the mix exactly. Defaults to plain
|
|
54
|
+
* glyphs (no icon library); pass `icons` (e.g. `lucideIcon`) for richer icons.
|
|
55
|
+
*/
|
|
56
|
+
declare function muteButton(options?: MuteButtonOptions): OverlayComponent;
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region src/components/cardboard/cardboard.d.ts
|
|
59
|
+
interface CardboardButtonOptions {
|
|
60
|
+
/** Button icon. Defaults to a plain glyph 🥽. */
|
|
61
|
+
icon?: IconContent;
|
|
62
|
+
/** Aria-label. Defaults to "Cardboard mode". */
|
|
63
|
+
label?: string;
|
|
64
|
+
/** Override the daisyUI/utility classes on the button. */
|
|
65
|
+
className?: string;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* A cardboard (stereoscopic) toggle. Flips `ctx.gallery.setRender({ cardboard })`
|
|
69
|
+
* to split the view into a left/right eye pair for a phone-in-a-headset viewer,
|
|
70
|
+
* and reflects the on state with daisyUI's `btn-active`. Defaults to a plain
|
|
71
|
+
* glyph; pass `icon` (e.g. `lucideIcon("RectangleGoggles")`).
|
|
72
|
+
*/
|
|
73
|
+
declare function cardboardButton(options?: CardboardButtonOptions): OverlayComponent;
|
|
74
|
+
//#endregion
|
|
75
|
+
//#region src/components/settings/settings.d.ts
|
|
76
|
+
/** One option in a single-choice section. */
|
|
77
|
+
interface SettingsChoice {
|
|
78
|
+
value: string;
|
|
79
|
+
label: Text;
|
|
80
|
+
}
|
|
81
|
+
/** One boolean toggle in the multi-toggle section. */
|
|
82
|
+
interface SettingsToggleItem {
|
|
83
|
+
key: string;
|
|
84
|
+
label: Text;
|
|
85
|
+
value: boolean;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* One single-choice control rendered as a joined row of radio-buttons — a
|
|
89
|
+
* segmented control (e.g. antialias level, bloom strength).
|
|
90
|
+
*/
|
|
91
|
+
interface SettingsChoiceGroup {
|
|
92
|
+
key: string;
|
|
93
|
+
label: Text;
|
|
94
|
+
/** Current value (matches one option's `value`). */
|
|
95
|
+
value: string;
|
|
96
|
+
options: SettingsChoice[];
|
|
97
|
+
onChange: (value: string) => void;
|
|
98
|
+
}
|
|
99
|
+
/** One numeric slider (range) in the graphics section. */
|
|
100
|
+
interface SettingsSliderItem {
|
|
101
|
+
key: string;
|
|
102
|
+
label: Text;
|
|
103
|
+
value: number;
|
|
104
|
+
min: number;
|
|
105
|
+
max: number;
|
|
106
|
+
/** Step granularity. Defaults to `0.1`. */
|
|
107
|
+
step?: number;
|
|
108
|
+
onChange: (value: number) => void;
|
|
109
|
+
}
|
|
110
|
+
interface SettingsPanelOptions {
|
|
111
|
+
/** Modal title, also the gear button's aria-label. */
|
|
112
|
+
title: Text;
|
|
113
|
+
/** Aria-label for the ✕ close button. Defaults to "Close". */
|
|
114
|
+
closeLabel?: Text;
|
|
115
|
+
/**
|
|
116
|
+
* A single-choice section rendered as a `<select>` (e.g. language). Shown in
|
|
117
|
+
* its own tab; `tab` is the tab's title (falls back to `label`).
|
|
118
|
+
*/
|
|
119
|
+
language?: {
|
|
120
|
+
tab?: Text;
|
|
121
|
+
label: Text;
|
|
122
|
+
value: string;
|
|
123
|
+
options: SettingsChoice[];
|
|
124
|
+
onChange: (value: string) => void;
|
|
125
|
+
};
|
|
126
|
+
/** A single-choice section rendered as radios (e.g. handedness). Own tab. */
|
|
127
|
+
handedness?: {
|
|
128
|
+
tab?: Text;
|
|
129
|
+
label: Text;
|
|
130
|
+
value: string;
|
|
131
|
+
options: SettingsChoice[];
|
|
132
|
+
onChange: (value: string) => void;
|
|
133
|
+
};
|
|
134
|
+
/** A multi-toggle section (e.g. graphics: ssao / bloom / shadows). Own tab. */
|
|
135
|
+
graphics?: {
|
|
136
|
+
tab?: Text;
|
|
137
|
+
label: Text;
|
|
138
|
+
items: SettingsToggleItem[];
|
|
139
|
+
onChange: (key: string, value: boolean) => void; /** Optional segmented radio-button groups above the toggles (e.g. antialias / bloom). */
|
|
140
|
+
choiceGroups?: SettingsChoiceGroup[]; /** Optional numeric sliders shown below the toggles (e.g. eye separation). */
|
|
141
|
+
sliders?: SettingsSliderItem[];
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* A settings panel: a ⚙ button that opens a centered daisyUI modal (with an ✕
|
|
146
|
+
* close, click-outside and Esc). Each section lives in its own tab (the first
|
|
147
|
+
* present one opens by default). Sections are data — the app supplies labels,
|
|
148
|
+
* current values and callbacks — so the panel stays generic. Labels are `Text`
|
|
149
|
+
* and relocalize live via the overlay's locale source. daisyUI + Lucide prefab.
|
|
150
|
+
*/
|
|
151
|
+
declare function settingsPanel(options: SettingsPanelOptions): OverlayComponent;
|
|
152
|
+
//#endregion
|
|
153
|
+
//#region src/components/environment/environment.d.ts
|
|
154
|
+
interface EnvironmentPanelOptions {
|
|
155
|
+
/** Modal title, also the button's aria-label. */
|
|
156
|
+
title: Text;
|
|
157
|
+
/** Aria-label for the ✕ close button. Defaults to "Close". */
|
|
158
|
+
closeLabel?: Text;
|
|
159
|
+
/** Button icon. Defaults to a plain glyph ☀. */
|
|
160
|
+
icon?: IconContent;
|
|
161
|
+
/** Sliders shown in the modal (e.g. time of day, sun azimuth). */
|
|
162
|
+
sliders: SettingsSliderItem[];
|
|
163
|
+
/** Quick presets shown as buttons; each sets one or more sliders by `key`. */
|
|
164
|
+
presets?: {
|
|
165
|
+
label: Text;
|
|
166
|
+
values: Record<string, number>;
|
|
167
|
+
}[];
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
170
|
+
* An environment panel: a button (e.g. a sun/cloud icon) opening a daisyUI modal
|
|
171
|
+
* with sliders for ambient settings like time of day and sun azimuth. Optional
|
|
172
|
+
* in the default preset — galleries with a procedural sky opt in. daisyUI +
|
|
173
|
+
* Lucide prefab.
|
|
174
|
+
*/
|
|
175
|
+
declare function environmentPanel(options: EnvironmentPanelOptions): OverlayComponent;
|
|
176
|
+
//#endregion
|
|
177
|
+
//#region src/components/credits/credits.d.ts
|
|
178
|
+
/** One acknowledged asset: what it is, who made it, where it's from. */
|
|
179
|
+
interface CreditItem {
|
|
180
|
+
/** Discriminant; optional so a plain item needs no `type`. */
|
|
181
|
+
type?: "item";
|
|
182
|
+
/** Display name, e.g. "Brick Wall 006". */
|
|
183
|
+
label: string;
|
|
184
|
+
/** Author/creator. */
|
|
185
|
+
author?: string;
|
|
186
|
+
/** Source URL; turns `label` into a link. */
|
|
187
|
+
href?: string;
|
|
188
|
+
/** License, e.g. "CC0". */
|
|
189
|
+
license?: string;
|
|
190
|
+
}
|
|
191
|
+
/** A labeled separator within a flat list or a tab's children. */
|
|
192
|
+
interface CreditSection {
|
|
193
|
+
type: "section";
|
|
194
|
+
/** Section heading, e.g. "Textures". */
|
|
195
|
+
label: string;
|
|
196
|
+
}
|
|
197
|
+
/** A tab grouping a list of items/sections under a title. */
|
|
198
|
+
interface CreditTab {
|
|
199
|
+
type: "tab";
|
|
200
|
+
/** Tab title. */
|
|
201
|
+
label: string;
|
|
202
|
+
/** The grouped entries (items and sections; no nested tabs). */
|
|
203
|
+
children: Array<CreditItem | CreditSection>;
|
|
204
|
+
}
|
|
205
|
+
/** Anything that can appear at the top level of the credits. */
|
|
206
|
+
type CreditEntry = CreditItem | CreditSection | CreditTab;
|
|
207
|
+
interface CreditsPanelOptions {
|
|
208
|
+
/**
|
|
209
|
+
* The credited entries. Loose items/sections render first (above the tabs);
|
|
210
|
+
* tabs render after, as a daisyUI tab strip. A getter is re-read on locale
|
|
211
|
+
* change to relocalize.
|
|
212
|
+
*/
|
|
213
|
+
items: CreditEntry[] | (() => CreditEntry[]);
|
|
214
|
+
/** Panel heading. Defaults to "Credits". */
|
|
215
|
+
title?: Text;
|
|
216
|
+
/** Button icon. Defaults to the plain glyph ⓘ. */
|
|
217
|
+
icon?: IconContent;
|
|
218
|
+
/** Override the daisyUI/utility classes on the toggle button. */
|
|
219
|
+
className?: string;
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* A credits panel: a button opening a centered daisyUI modal (✕ close,
|
|
223
|
+
* click-outside, Esc) listing attributions. Entries are data (`items`): loose
|
|
224
|
+
* items and sections show first; `tab` entries become a daisyUI tab strip below
|
|
225
|
+
* (first tab open), so an exhibition can credit its author up top and group
|
|
226
|
+
* assets/technology/etc. into tabs with sectioned lists. Defaults to a plain
|
|
227
|
+
* glyph icon; pass `icon` (e.g. `lucideIcon`).
|
|
228
|
+
*/
|
|
229
|
+
declare function creditsPanel(options: CreditsPanelOptions): OverlayComponent;
|
|
230
|
+
//#endregion
|
|
231
|
+
//#region src/components/action-button/action-button.d.ts
|
|
232
|
+
interface ActionButtonOptions {
|
|
233
|
+
/** Click handler; receives the overlay context (gallery, surface, root). */
|
|
234
|
+
onClick: (ctx: OverlayContext) => void;
|
|
235
|
+
/** Icon content: a glyph, an SVG node, or a factory. No lucide required. */
|
|
236
|
+
icon?: IconContent;
|
|
237
|
+
/** Text label, placed after the icon. */
|
|
238
|
+
label?: string;
|
|
239
|
+
/** Accessible label (use it when there's an icon but no text). */
|
|
240
|
+
ariaLabel?: string;
|
|
241
|
+
/** Override the daisyUI/utility classes. */
|
|
242
|
+
className?: string;
|
|
243
|
+
}
|
|
244
|
+
/**
|
|
245
|
+
* A generic clickable button — the lucide-free alternative to the opinionated
|
|
246
|
+
* prefabs. Supply any `icon` (glyph, your own SVG, a Lucide icon you wired up)
|
|
247
|
+
* and an `onClick`. daisyUI prefab (styled with `btn`).
|
|
248
|
+
*/
|
|
249
|
+
declare function actionButton(options: ActionButtonOptions): OverlayComponent;
|
|
250
|
+
//#endregion
|
|
251
|
+
//#region src/components/info/info.d.ts
|
|
252
|
+
interface InfoPanelOptions {
|
|
253
|
+
/** Modal title, also the ⓘ button's aria-label. */
|
|
254
|
+
title: Text;
|
|
255
|
+
/** Body text shown in the modal (e.g. the control instructions). */
|
|
256
|
+
text: Text;
|
|
257
|
+
/** Aria-label for the ✕ close button. Defaults to "Close". */
|
|
258
|
+
closeLabel?: Text;
|
|
259
|
+
}
|
|
260
|
+
/**
|
|
261
|
+
* An info panel: an ⓘ button that opens a centered daisyUI modal with a title
|
|
262
|
+
* and a block of text (with an ✕ close, click-outside and Esc). Content is data,
|
|
263
|
+
* so the app supplies the (already localized) strings. daisyUI + Lucide prefab.
|
|
264
|
+
*/
|
|
265
|
+
declare function infoPanel(options: InfoPanelOptions): OverlayComponent;
|
|
266
|
+
//#endregion
|
|
267
|
+
//#region src/components/artwork-info/artwork-info.d.ts
|
|
268
|
+
interface ArtworkInfoOptions {
|
|
269
|
+
/** The artworks' data, looked up by `id` on select. Usually `scene.artworks`. */
|
|
270
|
+
artworks: Artwork[];
|
|
271
|
+
/** Aria-label for the panel's ✕ close button. Defaults to "Close". */
|
|
272
|
+
closeLabel?: string;
|
|
273
|
+
/**
|
|
274
|
+
* Availability wording shown in the panel. `'for-sale'` reads `forSale`; both
|
|
275
|
+
* negative states (`'sold'` / `'not-for-sale'`) read `privateCollection`, since
|
|
276
|
+
* publicly they mean the same: not available. Defaults to English.
|
|
277
|
+
*/
|
|
278
|
+
availabilityText?: {
|
|
279
|
+
forSale?: string;
|
|
280
|
+
privateCollection?: string;
|
|
281
|
+
};
|
|
282
|
+
/** Label for the link shown when an artwork has an `href`. Defaults to "View artwork". */
|
|
283
|
+
linkText?: string;
|
|
284
|
+
}
|
|
285
|
+
/**
|
|
286
|
+
* The artwork info panel. The engine emits `artwork:select { id }` when you click
|
|
287
|
+
* a piece's cartela (or the piece itself); this opens a left-hand panel (40%
|
|
288
|
+
* width, full height, black at 85% alpha) with the full caption and asks the
|
|
289
|
+
* camera to frame the piece in the free right 60%. Closing with ✕ re-centers the
|
|
290
|
+
* piece full-width; if the user walks/turns away the engine emits
|
|
291
|
+
* `artwork:released` and the panel just closes (no camera move).
|
|
292
|
+
*
|
|
293
|
+
* Content is data (`artworks`), unlocalized for now. The panel is mounted on the
|
|
294
|
+
* surface (escaping the overlay grid); the slot element is an inert placeholder.
|
|
295
|
+
*/
|
|
296
|
+
declare function artworkInfo(options: ArtworkInfoOptions): OverlayComponent;
|
|
297
|
+
//#endregion
|
|
298
|
+
//#region src/components/watermark/watermark.d.ts
|
|
299
|
+
interface WatermarkOptions {
|
|
300
|
+
/** Text shown. Defaults to "scenography". */
|
|
301
|
+
text?: string;
|
|
302
|
+
/** Replace the default styling with your own class. */
|
|
303
|
+
className?: string;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* A small, unobtrusive text watermark (a "brand stamp"). No daisyUI/Lucide — just
|
|
307
|
+
* a styled element. Defaults to the text "scenography".
|
|
308
|
+
*/
|
|
309
|
+
declare function watermark(options?: WatermarkOptions): OverlayComponent;
|
|
310
|
+
//#endregion
|
|
311
|
+
//#region src/presets/default.d.ts
|
|
312
|
+
interface DefaultPresetOptions {
|
|
313
|
+
/** Settings panel (language / handedness / graphics); when given, a ⚙ button is added top-right. */
|
|
314
|
+
settings?: SettingsPanelOptions;
|
|
315
|
+
/** Environment panel (time of day, sun azimuth); when given, a ☼ button is added top-right. Off by default. */
|
|
316
|
+
environment?: EnvironmentPanelOptions;
|
|
317
|
+
/** Info panel (e.g. control instructions); when given, an ⓘ button is added bottom-right, above credits. */
|
|
318
|
+
info?: InfoPanelOptions;
|
|
319
|
+
/** Artwork info panel; when given, clicking a piece opens its caption on the left. */
|
|
320
|
+
artworks?: ArtworkInfoOptions;
|
|
321
|
+
/** Asset attributions; when given, a credits panel is added bottom-right. */
|
|
322
|
+
credits?: CreditEntry[] | (() => CreditEntry[]);
|
|
323
|
+
/** Credits panel title. */
|
|
324
|
+
creditsTitle?: Text;
|
|
325
|
+
/** Bottom-left watermark. Defaults to "scenography"; pass `false` to hide it. */
|
|
326
|
+
watermark?: WatermarkOptions | false;
|
|
327
|
+
}
|
|
328
|
+
/**
|
|
329
|
+
* The default overlay layout: mute + fullscreen (and a settings ⚙ when given)
|
|
330
|
+
* top-right; an info ⓘ and a credits panel bottom-right when given. Wired with
|
|
331
|
+
* Lucide icons — this is the opinionated, batteries-included layer, so the
|
|
332
|
+
* coupling to daisyUI + Lucide lives here, not in `@scenography/overlay`.
|
|
333
|
+
*/
|
|
334
|
+
declare function defaultPreset(overlay: Overlay, options?: DefaultPresetOptions): void;
|
|
335
|
+
//#endregion
|
|
336
|
+
export { type ActionButtonOptions, type ArtworkInfoOptions, type CardboardButtonOptions, type CreditEntry, type CreditItem, type CreditSection, type CreditTab, type CreditsPanelOptions, type DefaultPresetOptions, type EnvironmentPanelOptions, type FullscreenButtonOptions, type IconContent, type InfoPanelOptions, type MuteButtonOptions, type SettingsChoice, type SettingsChoiceGroup, type SettingsPanelOptions, type SettingsSliderItem, type SettingsToggleItem, type WatermarkOptions, actionButton, artworkInfo, cardboardButton, creditsPanel, defaultPreset, environmentPanel, fullscreenButton, infoPanel, lucideIcon, muteButton, settingsPanel, watermark };
|
|
337
|
+
//# sourceMappingURL=index.d.mts.map
|