@aussieljk/forkbook 0.0.1-6 → 0.0.1-8

package/dist/manager/_manager-chunks/runtime-C-s1miBr.js

@@ -0,0 +1,294 @@
+import { n as __esmMin } from "./runtime-BdGkqNEt.js";
+import { Er as useRef, Kt as useStorybookApi, Pt as init_manager_api, Ut as useGlobals, Wt as useParameter, _r as useCallback, br as useEffect, mr as init__storybook_global_react, wr as useMemo } from "./runtime-Dtpc5s3G.js";
+//#region src/viewport/constants.ts
+var ADDON_ID, PARAM_KEY, RESPONSIVE_VIEWPORT_VALUE;
+function init_constants() {
+	return (init_constants = __esmMin((() => {
+		ADDON_ID = "@aussieljk/forkbook/viewport";
+		PARAM_KEY = "viewport";
+		RESPONSIVE_VIEWPORT_VALUE = "100pct-100pct";
+	})))();
+}
+//#endregion
+//#region src/viewport/defaults.ts
+var MINIMAL_VIEWPORTS;
+function init_defaults() {
+	return (init_defaults = __esmMin((() => {
+		MINIMAL_VIEWPORTS = {
+			mobile1: {
+				name: "Small mobile",
+				styles: {
+					height: "568px",
+					width: "320px"
+				},
+				type: "mobile"
+			},
+			mobile2: {
+				name: "Large mobile",
+				styles: {
+					height: "896px",
+					width: "414px"
+				},
+				type: "mobile"
+			},
+			tablet: {
+				name: "Tablet",
+				styles: {
+					height: "1112px",
+					width: "834px"
+				},
+				type: "tablet"
+			},
+			desktop: {
+				name: "Desktop",
+				styles: {
+					height: "1024px",
+					width: "1280px"
+				},
+				type: "desktop"
+			}
+		};
+	})))();
+}
+//#endregion
+//#region src/viewport/resolveViewport.ts
+var URL_VALUE_PATTERN, normalizeGlobal$1, resolveViewport;
+function init_resolveViewport() {
+	return (init_resolveViewport = __esmMin((() => {
+		init_constants();
+		URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/;
+		normalizeGlobal$1 = (value, defaultIsRotated) => typeof value === "string" ? {
+			value,
+			isRotated: defaultIsRotated
+		} : {
+			value: value?.value,
+			isRotated: value?.isRotated ?? defaultIsRotated
+		};
+		resolveViewport = ({ globals, storyGlobals, userGlobals, options, lastSelectedOption, disable = false, viewMode }) => {
+			if (viewMode !== "story") return {
+				name: "Responsive",
+				type: "desktop",
+				width: "100%",
+				height: "100%",
+				value: RESPONSIVE_VIEWPORT_VALUE,
+				option: void 0,
+				isCustom: false,
+				isDefault: true,
+				isLocked: true,
+				isRotated: false
+			};
+			const global = normalizeGlobal$1(globals?.[PARAM_KEY]);
+			const userGlobal = normalizeGlobal$1(userGlobals?.[PARAM_KEY]);
+			const storyGlobal = normalizeGlobal$1(storyGlobals?.[PARAM_KEY]);
+			const storyHasViewport = PARAM_KEY in storyGlobals;
+			const primaryGlobal = storyHasViewport ? storyGlobal : userGlobal;
+			const secondaryGlobal = storyHasViewport ? userGlobal : storyGlobal;
+			const value = primaryGlobal?.value ?? secondaryGlobal?.value ?? global?.value;
+			const isRotated = primaryGlobal?.isRotated ?? secondaryGlobal?.isRotated ?? global?.isRotated ?? false;
+			const keys = Object.keys(options);
+			const isLocked = disable || "viewport" in storyGlobals || !keys.length;
+			const [match, vx, ux, vy, uy] = value?.match(URL_VALUE_PATTERN) || [];
+			if (match) {
+				const x = ux && ux !== "px" ? vx : Math.max(Number(vx), 40);
+				const y = uy && uy !== "px" ? vy : Math.max(Number(vy), 40);
+				const width = `${x}${ux === "pct" ? "%" : ux || "px"}`;
+				const height = `${y}${uy === "pct" ? "%" : uy || "px"}`;
+				const selection = lastSelectedOption ? options[lastSelectedOption] : void 0;
+				return {
+					name: selection?.name ?? "Custom",
+					type: selection?.type ?? "other",
+					width: isRotated ? height : width,
+					height: isRotated ? width : height,
+					value: match,
+					option: void 0,
+					isCustom: true,
+					isDefault: false,
+					isLocked,
+					isRotated
+				};
+			}
+			if (value && keys.length) {
+				const { name, styles, type = "other" } = options[value] ?? options[keys[0]];
+				return {
+					name,
+					type,
+					width: isRotated ? styles.height : styles.width,
+					height: isRotated ? styles.width : styles.height,
+					value,
+					option: value,
+					isCustom: false,
+					isDefault: false,
+					isLocked,
+					isRotated
+				};
+			}
+			return {
+				name: "Responsive",
+				type: "desktop",
+				width: "100%",
+				height: "100%",
+				value: RESPONSIVE_VIEWPORT_VALUE,
+				option: void 0,
+				isCustom: false,
+				isDefault: true,
+				isLocked,
+				isRotated: false
+			};
+		};
+	})))();
+}
+//#endregion
+//#region src/viewport/useViewport.ts
+var cycle, normalizeGlobal, useViewport;
+function init_useViewport() {
+	return (init_useViewport = __esmMin((() => {
+		init__storybook_global_react();
+		init_manager_api();
+		init_constants();
+		init_defaults();
+		init_resolveViewport();
+		cycle = (viewports, current, direction = 1) => {
+			const keys = Object.keys(viewports);
+			const nextIndex = (current ? keys.indexOf(current) : -1) + direction;
+			return nextIndex < 0 ? keys[keys.length - 1] : nextIndex >= keys.length ? keys[0] : keys[nextIndex];
+		};
+		normalizeGlobal = (value, defaultIsRotated) => typeof value === "string" ? {
+			value,
+			isRotated: defaultIsRotated
+		} : {
+			value: value?.value,
+			isRotated: value?.isRotated ?? defaultIsRotated
+		};
+		useViewport = () => {
+			const api = useStorybookApi();
+			const { viewMode } = api.getUrlState();
+			const lastSelectedOption = useRef();
+			const parameter = useParameter(PARAM_KEY);
+			const [globals, updateGlobals, storyGlobals, userGlobals] = useGlobals();
+			const { options = MINIMAL_VIEWPORTS, disable = false } = parameter || {};
+			const { name, type, width, height, value, option, isCustom, isDefault, isLocked, isRotated } = resolveViewport({
+				globals,
+				storyGlobals,
+				userGlobals,
+				options,
+				lastSelectedOption: lastSelectedOption.current,
+				disable,
+				viewMode
+			});
+			const update = useCallback((input) => updateGlobals({ [PARAM_KEY]: normalizeGlobal(input, false) }), [updateGlobals]);
+			const resize = useCallback((width, height) => {
+				const w = width.replace(/px$/, "").replace(/%$/, "pct");
+				const h = height.replace(/px$/, "").replace(/%$/, "pct");
+				const value = isRotated ? `${h}-${w}` : `${w}-${h}`;
+				update({
+					value,
+					isRotated
+				});
+			}, [update, isRotated]);
+			useEffect(() => {
+				if (!parameter) return;
+				if (option) {
+					if (Object.hasOwn(options, option)) lastSelectedOption.current = option;
+					else {
+						lastSelectedOption.current = void 0;
+						if (!("viewport" in storyGlobals)) update({
+							value: void 0,
+							isRotated: false
+						});
+					}
+				}
+			}, [
+				parameter,
+				storyGlobals,
+				options,
+				option,
+				update
+			]);
+			useEffect(() => {
+				api.setAddonShortcut(ADDON_ID, {
+					label: "Next viewport",
+					defaultShortcut: ["alt", "V"],
+					actionName: "next",
+					action: () => update({
+						value: cycle(options, lastSelectedOption.current),
+						isRotated
+					})
+				});
+				api.setAddonShortcut(ADDON_ID, {
+					label: "Previous viewport",
+					defaultShortcut: [
+						"alt",
+						"shift",
+						"V"
+					],
+					actionName: "previous",
+					action: () => update({
+						value: cycle(options, lastSelectedOption.current, -1),
+						isRotated
+					})
+				});
+				api.setAddonShortcut(ADDON_ID, {
+					label: "Reset viewport",
+					defaultShortcut: [
+						"alt",
+						"control",
+						"V"
+					],
+					actionName: "reset",
+					action: () => update({
+						value: void 0,
+						isRotated: false
+					})
+				});
+			}, [
+				api,
+				update,
+				options,
+				isRotated
+			]);
+			return useMemo(() => ({
+				name,
+				type,
+				width,
+				height,
+				value,
+				option,
+				isCustom,
+				isDefault,
+				isLocked,
+				isRotated,
+				options,
+				lastSelectedOption: lastSelectedOption.current,
+				resize,
+				reset: () => update({
+					value: void 0,
+					isRotated: false
+				}),
+				rotate: () => update({
+					value,
+					isRotated: !isRotated
+				}),
+				select: (value) => update({
+					value,
+					isRotated
+				})
+			}), [
+				name,
+				type,
+				width,
+				height,
+				value,
+				option,
+				isCustom,
+				isDefault,
+				isRotated,
+				isLocked,
+				options,
+				resize,
+				update
+			]);
+		};
+	})))();
+}
+//#endregion
+export { init_constants as a, RESPONSIVE_VIEWPORT_VALUE as i, useViewport as n, init_resolveViewport as r, init_useViewport as t };

package/dist/manager/_manager-chunks/{runtime-DER98nV0.js → runtime-CHQZzIX6.js}

@@ -1,6 +1,6 @@
-import { n as __esmMin } from "./runtime-EITvVbkG.js";
-import { $a as Children, So as useState, _o as useImperativeHandle, ao as createContext, c as init__storybook_global_react_dom, co as forwardRef, d as jsxs, fo as useCallback, ho as useEffect, io as cloneElement, l as init_jsx_runtime, lo as init__storybook_global_react, mo as useDebugValue, o as createPortal, oo as createElement, po as useContext, ro as _storybook_global_react_exports, s as flushSync, so as createRef, to as Fragment, u as jsx, uo as isValidElement, vo as useLayoutEffect, wo as version, xo as useRef, yo as useMemo } from "./runtime-MAf7Wpk5.js";
-import { c as require_with_selector, l as require_shim } from "./runtime-CHI-LHF1.js";
+import { n as __esmMin } from "./runtime-BdGkqNEt.js";
+import { Cr as useLayoutEffect, Dr as useState, Er as useRef, Or as useSyncExternalStore, Sr as useImperativeHandle, _r as useCallback, br as useEffect, c as createPortal, cr as _storybook_global_react_exports, d as init_jsx_runtime, dr as createElement, f as jsx, fr as createRef, hr as isValidElement, ir as Children, kr as version, l as flushSync, lr as cloneElement, mr as init__storybook_global_react, or as Fragment, p as jsxs, pr as forwardRef, u as init__storybook_global_react_dom, ur as createContext, vr as useContext, wr as useMemo, yr as useDebugValue } from "./runtime-Dtpc5s3G.js";
+import { D as useSyncExternalStoreWithSelector, E as init_with_selector } from "./runtime-BrlctLSK.js";
 //#region ../../node_modules/@base-ui/utils/useRefWithInit.mjs
 /**
 * A React.useRef() that is initialized with a function. Note that it accepts an optional
@@ -3052,7 +3052,7 @@ function useStoreR19(store, selector, a1, a2, a3) {
 		a2,
 		a3
 	]);
-	return (0, import_shim$1.useSyncExternalStore)(store.subscribe, getSelection, getSelection);
+	return useSyncExternalStore(store.subscribe, getSelection, getSelection);
 }
 function useStoreFast(store, selector, a1, a2, a3) {
 	const instance = getInstance();
@@ -3085,14 +3085,13 @@ function useStoreFast(store, selector, a1, a2, a3) {
 	return hook.value;
 }
 function useStoreLegacy(store, selector, a1, a2, a3) {
-	return (0, import_with_selector.useSyncExternalStoreWithSelector)(store.subscribe, store.getSnapshot, store.getSnapshot, (state) => selector(state, a1, a2, a3));
+	return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, (state) => selector(state, a1, a2, a3));
 }
-var import_shim$1, import_with_selector, useStoreImplementation;
+var useStoreImplementation;
 function init_useStore() {
 	return (init_useStore = __esmMin((() => {
 		init__storybook_global_react();
-		import_shim$1 = require_shim();
-		import_with_selector = require_with_selector();
+		init_with_selector();
 		init_reactVersion();
 		init_fastHooks();
 		useStoreImplementation = isReactVersionAtLeast(19) ? useStoreFast : useStoreLegacy;
@@ -3132,7 +3131,7 @@ function init_useStore() {
 							};
 						};
 					}
-					(0, import_shim$1.useSyncExternalStore)(instance.subscribe, instance.getSnapshot, instance.getSnapshot);
+					useSyncExternalStore(instance.subscribe, instance.getSnapshot, instance.getSnapshot);
 				}
 			}
 		});
@@ -3596,13 +3595,11 @@ function usePopupHandleStore(handle) {
 	const getSnapshot = useCallback(() => {
 		return handle === void 0 ? void 0 : handle.store;
 	}, [handle]);
-	return (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot, () => handle?.serverStore);
+	return useSyncExternalStore(subscribe, getSnapshot, () => handle?.serverStore);
 }
-var import_shim;
 function init_usePopupHandleStore() {
 	return (init_usePopupHandleStore = __esmMin((() => {
 		init__storybook_global_react();
-		import_shim = require_shim();
 		init_empty();
 	})))();
 }

package/dist/manager/_manager-chunks/{runtime-D4ZOOIV0.js → runtime-DEHcqyTM.js}

@@ -1,7 +1,7 @@
-import { n as __esmMin, o as __toESM } from "./runtime-EITvVbkG.js";
-import { So as useState, bo as useReducer, eo as Component, fo as useCallback, ho as useEffect, io as cloneElement, lo as init__storybook_global_react, ro as _storybook_global_react_exports, vo as useLayoutEffect, xo as useRef, yo as useMemo } from "./runtime-MAf7Wpk5.js";
-import { h as require_prop_types, n as require_react_is } from "./runtime-CHI-LHF1.js";
-import { a as _inheritsLoose, l as _extends, o as init_inheritsLoose, t as _objectWithoutPropertiesLoose } from "./runtime-DER98nV0.js";
+import { a as __toESM, n as __esmMin } from "./runtime-BdGkqNEt.js";
+import { Cr as useLayoutEffect, Dr as useState, Er as useRef, Tr as useReducer, _r as useCallback, ar as Component, br as useEffect, cr as _storybook_global_react_exports, lr as cloneElement, mr as init__storybook_global_react, wr as useMemo } from "./runtime-Dtpc5s3G.js";
+import { n as require_react_is, p as require_prop_types } from "./runtime-DuptfEhw.js";
+import { a as _inheritsLoose, l as _extends, o as init_inheritsLoose, t as _objectWithoutPropertiesLoose } from "./runtime-CHQZzIX6.js";
 //#region ../../node_modules/es-toolkit/dist/compat/_internal/getSymbols.mjs
 function getSymbols(object) {
 	return Object.getOwnPropertySymbols(object).filter((symbol) => Object.prototype.propertyIsEnumerable.call(object, symbol));