@docentjs/dom 0.6.0 → 0.7.0

package/dist/index.d.cts

@@ -190,6 +190,7 @@ export declare class DomRenderer implements Renderer {
    * `scrollend` finishes early where supported; a cap keeps it bounded.
    */
   private afterScroll;
+  /** The tour's template: one the app registered, or a built-in look. */
   private template;
   private buildDefault;
   private buildHeadless;
@@ -251,6 +252,10 @@ export declare function createDocent(options?: CreateDocentOptions): Docent;
 //#region src/environment.d.ts
 export declare function createDomEnvironment(doc?: Document): DocentEnvironment;
 //#endregion
+//#region src/looks.d.ts
+type LookName = 'spotlight' | 'hint' | 'announcement';
+export declare const BUILT_IN_LOOKS: Record<LookName, PopoverTemplate>;
+//#endregion
 //#region src/position.d.ts
 interface Rect {
   x: number;
@@ -396,5 +401,5 @@ export declare function resolveTarget(target: Target, root?: QueryRoot): Element
  */
 export declare function waitForTarget(target: Target, timeoutMs: number, signal?: AbortSignal, root?: QueryRoot): Promise<Element | null>;
 //#endregion
-export { type ConnectorStyle, type CreateDocentOptions, type CreateTourOptions, type DomRendererOptions, type HeadlessPopover, type Occluder, type PopoverSlots, type PopoverTemplate, type PositionInput, type PositionResult, type QueryRoot, type Rect, type Size, type SlotContent, type SlotName, type SlotRenderer, defineTour };
+export { type ConnectorStyle, type CreateDocentOptions, type CreateTourOptions, type DomRendererOptions, type HeadlessPopover, type LookName, type Occluder, type PopoverSlots, type PopoverTemplate, type PositionInput, type PositionResult, type QueryRoot, type Rect, type Size, type SlotContent, type SlotName, type SlotRenderer, defineTour };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -190,6 +190,7 @@ export declare class DomRenderer implements Renderer {
    * `scrollend` finishes early where supported; a cap keeps it bounded.
    */
   private afterScroll;
+  /** The tour's template: one the app registered, or a built-in look. */
   private template;
   private buildDefault;
   private buildHeadless;
@@ -251,6 +252,10 @@ export declare function createDocent(options?: CreateDocentOptions): Docent;
 //#region src/environment.d.ts
 export declare function createDomEnvironment(doc?: Document): DocentEnvironment;
 //#endregion
+//#region src/looks.d.ts
+type LookName = 'spotlight' | 'hint' | 'announcement';
+export declare const BUILT_IN_LOOKS: Record<LookName, PopoverTemplate>;
+//#endregion
 //#region src/position.d.ts
 interface Rect {
   x: number;
@@ -396,5 +401,5 @@ export declare function resolveTarget(target: Target, root?: QueryRoot): Element
  */
 export declare function waitForTarget(target: Target, timeoutMs: number, signal?: AbortSignal, root?: QueryRoot): Promise<Element | null>;
 //#endregion
-export { type ConnectorStyle, type CreateDocentOptions, type CreateTourOptions, type DomRendererOptions, type HeadlessPopover, type Occluder, type PopoverSlots, type PopoverTemplate, type PositionInput, type PositionResult, type QueryRoot, type Rect, type Size, type SlotContent, type SlotName, type SlotRenderer, defineTour };
+export { type ConnectorStyle, type CreateDocentOptions, type CreateTourOptions, type DomRendererOptions, type HeadlessPopover, type LookName, type Occluder, type PopoverSlots, type PopoverTemplate, type PositionInput, type PositionResult, type QueryRoot, type Rect, type Size, type SlotContent, type SlotName, type SlotRenderer, defineTour };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -117,6 +117,41 @@ function warnIfInvalid(tour) {
 	}).catch(() => {});
 }
 //#endregion
+//#region src/looks.ts
+const BUILT_IN_LOOKS = {
+	/** The default: a dimmed page, a soft cutout, a small caret. */
+	spotlight: {},
+	/**
+	* A light touch for tips beside a feature: the page stays usable and
+	* clickable, with a glowing ring and a drawn curve instead of a scrim.
+	*/
+	hint: {
+		overlay: { style: "none" },
+		spotlight: {
+			ring: "glow",
+			padding: 6
+		},
+		arrow: "curve",
+		theme: { width: 300 }
+	},
+	/**
+	* For something to read rather than something to do: the page blurs away,
+	* nothing points anywhere, and the card is wider.
+	*/
+	announcement: {
+		overlay: {
+			style: "blur",
+			blur: 6
+		},
+		spotlight: {
+			ring: "none",
+			padding: 10
+		},
+		arrow: "none",
+		theme: { width: 420 }
+	}
+};
+//#endregion
 //#region src/occlusion.ts
 function isPinned(el) {
 	const view = el.ownerDocument.defaultView;
@@ -1253,9 +1288,11 @@ var DomRenderer = class {
 		win.addEventListener("scrollend", finish, { once: true });
 		this.cleanups.push(stop);
 	}
+	/** The tour's template: one the app registered, or a built-in look. */
 	template(ctx) {
 		const name = ctx.tour.options?.template ?? this.options.template;
-		return name === void 0 ? void 0 : this.options.templates?.[name];
+		if (name === void 0) return void 0;
+		return this.options.templates?.[name] ?? BUILT_IN_LOOKS[name];
 	}
 	buildDefault(ctx, host, template) {
 		const slots = {
@@ -1649,6 +1686,6 @@ function createDocent(options = {}) {
 	return docent;
 }
 //#endregion
-export { CONNECTOR_STYLES, DEFAULT_LABELS, DomRenderer, DomTourController, NAME_ATTRIBUTE, Overlay, THEME_VARS, applyTheme, arrowGap, availableSpace, buildHeadlessShell, buildPopover, candidateSelectors, centerPosition, computePosition, createDocent, createDomEnvironment, createLocalStorage, createTour, defineTour, findOccluder, formatProgress, holePath, inflate, isConnector, isSafeUrl, mergeThemeSpecs, mergeThemes, parsePlacement, queryAllDeep, renderBody, renderMedia, resolveSlots, resolveTarget, themeOption, toSpec, uncover, waitForTarget };
+export { BUILT_IN_LOOKS, CONNECTOR_STYLES, DEFAULT_LABELS, DomRenderer, DomTourController, NAME_ATTRIBUTE, Overlay, THEME_VARS, applyTheme, arrowGap, availableSpace, buildHeadlessShell, buildPopover, candidateSelectors, centerPosition, computePosition, createDocent, createDomEnvironment, createLocalStorage, createTour, defineTour, findOccluder, formatProgress, holePath, inflate, isConnector, isSafeUrl, mergeThemeSpecs, mergeThemes, parsePlacement, queryAllDeep, renderBody, renderMedia, resolveSlots, resolveTarget, themeOption, toSpec, uncover, waitForTarget };
 
 //# sourceMappingURL=index.js.map