svelte-tweakpane-ui 1.0.0

package/dist/utils.js

@@ -0,0 +1,238 @@
+// type aliases and utility functions
+// utility functions
+/**
+ * For CLS SSR calculation
+ */
+export function rowsForMonitor(buffer = undefined, rows = undefined, graph = undefined) {
+	if (graph) {
+		return Math.max(rows ?? 3, 3);
+	} else if (buffer === undefined && rows === undefined) {
+		return 1;
+	} else if (buffer === undefined && rows !== undefined) {
+		return 1;
+	} else if (buffer !== undefined && rows === undefined) {
+		return buffer > 1 ? 3 : 1;
+	} else if (buffer === 1) {
+		return 1;
+	} else {
+		// both defined
+		return rows ?? 1; // TODO
+	}
+}
+/**
+ * Fills an array of length `quantity` with a `value`
+ */
+export function fillWith(value, quantity) {
+	return [...Array(quantity).fill(value)];
+}
+/**
+ * There's no way to enforce readonly properties in Svelte components, so this is a workaround. See
+ * [general approach](https://github.com/sveltejs/svelte/issues/7712#issuecomment-1642470141) and
+ * [runtime error approach](https://github.com/sveltejs/svelte/issues/7712#issuecomment-1642817764)
+ *
+ * Generally:
+ * ```svelte
+ * <script>
+ *   export let value = "foo"
+ *   let _value;
+ *   // if you want to set init value from outside
+ *   // uncomment this line:
+ *   // _value = value;
+ *   $: value = _value;
+ *   $: enforceReadonly(_value, value, "value");
+ * </script>
+ *
+ * <input bind:value={_value} />
+ *
+ * This is not perfect and there are some edge cases it doesn't catch because we have to
+ * allow assignment to undefined in some internal cases (via the `allowAssignmentToUndefined` flag).
+ *
+ */
+export function enforceReadonly(
+	internal,
+	external,
+	componentName,
+	propName,
+	allowAssignmentToUndefined
+) {
+	allowAssignmentToUndefined ??= false;
+	if (
+		!(
+			external === internal ||
+			(allowAssignmentToUndefined && internal === undefined && external !== undefined)
+		)
+	) {
+		const componentString = componentName ? `<${componentName}> ` : '';
+		const propString = propName ? `property "${propName}" ` : '';
+		console.error(
+			`Svelte component ${componentString}property ${propString}is intended for readonly use.\nAssigning\n"${external}"\nto\n"${internal}"\nis not allowed.`
+		);
+	}
+}
+export function isRootPane(container) {
+	return container.constructor.name === 'Pane';
+}
+export function clamp(value, min, max) {
+	// prioritize min over max
+	return Math.min(Math.max(value, min), max);
+}
+export function getElementIndex(element) {
+	let index = 0;
+	let sibling = element;
+	while ((sibling = sibling.previousElementSibling) !== null) {
+		index++;
+	}
+	return index;
+}
+// doesn't create a new object, only works with string keys
+export function removeKeys(obj, ...keys) {
+	keys.forEach((key) => {
+		if (key in obj) {
+			delete obj[key];
+		}
+	});
+	return obj;
+}
+function clickBlocker(e) {
+	// only block user clicks, not programmatic ones
+	console.log(e.detail);
+	if (e.isTrusted) e.stopPropagation();
+}
+// used by folder and pane TODO rewrite to use getSwatchButton etc.
+export function updateCollapsibility(isUserExpandableEnabled, element, titleBarClass, iconClass) {
+	if (element) {
+		const titleBarElement = element.getElementsByClassName(titleBarClass)[0];
+		if (titleBarElement !== undefined) {
+			const iconElement = iconClass ? element.getElementsByClassName(iconClass)[0] : undefined;
+			if (isUserExpandableEnabled) {
+				titleBarElement.removeEventListener('click', clickBlocker, { capture: true });
+				titleBarElement.style.cursor = 'pointer';
+				if (iconElement) iconElement.style.display = 'block';
+			} else {
+				//expanded = true;
+				titleBarElement.addEventListener('click', clickBlocker, { capture: true });
+				titleBarElement.style.cursor = 'default';
+				if (iconElement) iconElement.style.display = 'none';
+			}
+		}
+	} else {
+		console.warn(`Title bar element not found with class "${titleBarClass}"`);
+	}
+}
+/**
+ * Infers grid dimensions for a given number of items, respecting optional maximums for rows and
+ * columns.
+ *
+ * If no constraints are provided, it creates the most square grid possible.
+ *
+ * If a single constraint is provided, it lets the undefined axis grow / shrink as needed.
+ *
+ * If both constraints are provided, values may be clipped.
+ */
+export function getGridDimensions(itemCount, maxColumns, maxRows) {
+	let rows, columns;
+	if (maxColumns && maxRows) {
+		// No flexing; items can exceed the available slots
+		rows = Math.min(Math.ceil(itemCount / maxColumns), maxRows);
+		columns = Math.min(maxColumns, itemCount);
+	} else if (maxColumns) {
+		// Only maxColumns defined, so rows will flex
+		rows = Math.ceil(itemCount / maxColumns);
+		columns = maxColumns;
+	} else if (maxRows) {
+		// Only maxRows defined, so columns will flex
+		columns = Math.ceil(itemCount / maxRows);
+		rows = maxRows;
+	} else {
+		// Neither maxColumns nor maxRows defined; create a square grid
+		columns = Math.ceil(Math.sqrt(itemCount));
+		rows = Math.ceil(itemCount / columns);
+	}
+	return { columns, rows };
+}
+export function tupleToObject(tuple, keys) {
+	const result = {};
+	keys.forEach((key, index) => {
+		// Assert that the assignment is safe
+		result[key] = tuple[index];
+	});
+	return result;
+}
+export function objectToTuple(obj, keys) {
+	return keys.map((key) => obj[key]);
+}
+// tweakpane  helpers
+export function pickerIsOpen(blade) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return blade.controller.valueController?.foldable_?.valMap_?.expanded?.value_;
+}
+export function getSwatchButton(blade) {
+	const swatch =
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		blade.controller?.valueController?.view?.swatchElement?.querySelector('button') ??
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		blade.controller?.valueController?.view?.buttonElement;
+	return swatch;
+}
+// utility functions
+function quaternionToCssTransform(quaternion) {
+	const [x, y, z, w] = Array.isArray(quaternion)
+		? quaternion
+		: [quaternion.x, quaternion.y, quaternion.z, quaternion.w];
+	const m11 = 1 - 2 * y * y - 2 * z * z;
+	const m12 = 2 * x * y - 2 * z * w;
+	const m13 = 2 * x * z + 2 * y * w;
+	const m21 = 2 * x * y + 2 * z * w;
+	const m22 = 1 - 2 * x * x - 2 * z * z;
+	const m23 = 2 * y * z - 2 * x * w;
+	const m31 = 2 * x * z - 2 * y * w;
+	const m32 = 2 * y * z + 2 * x * w;
+	const m33 = 1 - 2 * x * x - 2 * y * y;
+	return `matrix3d(
+  		${m11}, ${m12}, ${m13}, 0,
+  		${m21}, ${m22}, ${m23}, 0,
+  		${m31}, ${m32}, ${m33}, 0,
+  		0, 0, 0, 1
+		)`;
+}
+function eulerToCssTransform(
+	rotation,
+	units = 'rad' // rad is component default
+) {
+	const [x, y, z] = Array.isArray(rotation) ? rotation : [rotation.x, rotation.y, rotation.z];
+	// note negative z
+	return `rotateX(${x}${units}) rotateY(${y}${units}) rotateZ(${-z}${units})`;
+}
+function cubicBezierToEaseFunction(cubicBezier) {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const [x1, y1, x2, y2] = Array.isArray(cubicBezier)
+		? cubicBezier
+		: [cubicBezier.x1, cubicBezier.y1, cubicBezier.x2, cubicBezier.y2];
+	return (t) => {
+		return (1 - t) ** 3 * 0 + (1 - t) ** 2 * t * 3 * y1 + (1 - t) * t ** 2 * 3 * y2 + t ** 3 * 1;
+	};
+}
+// library exports
+export default {
+	/**
+	 * Convenience function for creating easing functions ready for Svelte's tween and animation
+	 * systems
+	 * @param cubicBezier - `CubicBezierValue`, probably from a `<CubicBezier>` component
+	 * @returns Tween function
+	 */
+	cubicBezierToEaseFunction,
+	/**
+	 * Convenience function for creating CSS-ready euler rotation transforms
+	 * @param rotation - `RotationEulerValue`, probably from a `<RotationEuler>` component
+	 * @param quaternion
+	 * @returns CSS rotateX/Y/Z string ready to be passed into a CSS transform
+	 */
+	eulerToCssTransform,
+	/**
+	 * Convenience function for creating CSS-ready quaternion rotation transforms
+	 * @param rotation - RotationQuaternionValue, probably from a <RotationQuaternionValue>
+	 * component
+	 * @returns CSS matrix3d string ready to be passed into a CSS transform
+	 */
+	quaternionToCssTransform
+};

package/package.json

@@ -0,0 +1,280 @@
+{
+  "name": "svelte-tweakpane-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kitschpatrol/svelte-tweakpane-ui"
+  },
+  "homepage": "https:///kitschpatrol.com/svelte-tweakpane-ui",
+  "bugs": {
+    "url": "https://github.com/kitschpatrol/svelte-tweakpane-ui/issues",
+    "email": "eric@ericmika.com"
+  },
+  "author": {
+    "name": "Eric Mika",
+    "email": "eric@ericmika.com",
+    "url": "https://ericmika.com"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./ButtonGrid.svelte": {
+      "types": "./dist/control/ButtonGrid.svelte.d.ts",
+      "svelte": "./dist/control/ButtonGrid.svelte"
+    },
+    "./Checkbox.svelte": {
+      "types": "./dist/control/Checkbox.svelte.d.ts",
+      "svelte": "./dist/control/Checkbox.svelte"
+    },
+    "./Color.svelte": {
+      "types": "./dist/control/Color.svelte.d.ts",
+      "svelte": "./dist/control/Color.svelte"
+    },
+    "./CubicBezier.svelte": {
+      "types": "./dist/control/CubicBezier.svelte.d.ts",
+      "svelte": "./dist/control/CubicBezier.svelte"
+    },
+    "./Image.svelte": {
+      "types": "./dist/control/Image.svelte.d.ts",
+      "svelte": "./dist/control/Image.svelte"
+    },
+    "./IntervalSlider.svelte": {
+      "types": "./dist/control/IntervalSlider.svelte.d.ts",
+      "svelte": "./dist/control/IntervalSlider.svelte"
+    },
+    "./List.svelte": {
+      "types": "./dist/control/List.svelte.d.ts",
+      "svelte": "./dist/control/List.svelte"
+    },
+    "./Point.svelte": {
+      "types": "./dist/control/Point.svelte.d.ts",
+      "svelte": "./dist/control/Point.svelte"
+    },
+    "./RadioGrid.svelte": {
+      "types": "./dist/control/RadioGrid.svelte.d.ts",
+      "svelte": "./dist/control/RadioGrid.svelte"
+    },
+    "./Ring.svelte": {
+      "types": "./dist/control/Ring.svelte.d.ts",
+      "svelte": "./dist/control/Ring.svelte"
+    },
+    "./RotationEuler.svelte": {
+      "types": "./dist/control/RotationEuler.svelte.d.ts",
+      "svelte": "./dist/control/RotationEuler.svelte"
+    },
+    "./RotationQuaternion.svelte": {
+      "types": "./dist/control/RotationQuaternion.svelte.d.ts",
+      "svelte": "./dist/control/RotationQuaternion.svelte"
+    },
+    "./Slider.svelte": {
+      "types": "./dist/control/Slider.svelte.d.ts",
+      "svelte": "./dist/control/Slider.svelte"
+    },
+    "./Text.svelte": {
+      "types": "./dist/control/Text.svelte.d.ts",
+      "svelte": "./dist/control/Text.svelte"
+    },
+    "./Textarea.svelte": {
+      "types": "./dist/control/Textarea.svelte.d.ts",
+      "svelte": "./dist/control/Textarea.svelte"
+    },
+    "./Wheel.svelte": {
+      "types": "./dist/control/Wheel.svelte.d.ts",
+      "svelte": "./dist/control/Wheel.svelte"
+    },
+    "./Binding.svelte": {
+      "types": "./dist/core/Binding.svelte.d.ts",
+      "svelte": "./dist/core/Binding.svelte"
+    },
+    "./Blade.svelte": {
+      "types": "./dist/core/Blade.svelte.d.ts",
+      "svelte": "./dist/core/Blade.svelte"
+    },
+    "./Button.svelte": {
+      "types": "./dist/core/Button.svelte.d.ts",
+      "svelte": "./dist/core/Button.svelte"
+    },
+    "./Folder.svelte": {
+      "types": "./dist/core/Folder.svelte.d.ts",
+      "svelte": "./dist/core/Folder.svelte"
+    },
+    "./Pane.svelte": {
+      "types": "./dist/core/Pane.svelte.d.ts",
+      "svelte": "./dist/core/Pane.svelte"
+    },
+    "./Separator.svelte": {
+      "types": "./dist/core/Separator.svelte.d.ts",
+      "svelte": "./dist/core/Separator.svelte"
+    },
+    "./TabGroup.svelte": {
+      "types": "./dist/core/TabGroup.svelte.d.ts",
+      "svelte": "./dist/core/TabGroup.svelte"
+    },
+    "./TabPage.svelte": {
+      "types": "./dist/core/TabPage.svelte.d.ts",
+      "svelte": "./dist/core/TabPage.svelte"
+    },
+    "./AutoObject.svelte": {
+      "types": "./dist/extra/AutoObject.svelte.d.ts",
+      "svelte": "./dist/extra/AutoObject.svelte"
+    },
+    "./AutoValue.svelte": {
+      "types": "./dist/extra/AutoValue.svelte.d.ts",
+      "svelte": "./dist/extra/AutoValue.svelte"
+    },
+    "./Element.svelte": {
+      "types": "./dist/extra/Element.svelte.d.ts",
+      "svelte": "./dist/extra/Element.svelte"
+    },
+    "./FpsGraph.svelte": {
+      "types": "./dist/monitor/FpsGraph.svelte.d.ts",
+      "svelte": "./dist/monitor/FpsGraph.svelte"
+    },
+    "./Monitor.svelte": {
+      "types": "./dist/monitor/Monitor.svelte.d.ts",
+      "svelte": "./dist/monitor/Monitor.svelte"
+    },
+    "./Profiler.svelte": {
+      "types": "./dist/monitor/Profiler.svelte.d.ts",
+      "svelte": "./dist/monitor/Profiler.svelte"
+    },
+    "./WaveformMonitor.svelte": {
+      "types": "./dist/monitor/WaveformMonitor.svelte.d.ts",
+      "svelte": "./dist/monitor/WaveformMonitor.svelte"
+    },
+    "./ThemeUtils.js": {
+      "types": "./dist/theme.d.ts",
+      "default": "./dist/theme.js"
+    },
+    "./Utils.js": {
+      "types": "./dist/utils.d.ts",
+      "default": "./dist/utils.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist"
+  ],
+  "keywords": [
+    "components",
+    "ui",
+    "tweaks",
+    "parameters",
+    "gui",
+    "component",
+    "svelte",
+    "sveltekit",
+    "tweakpane",
+    "svelte-ui",
+    "component-library",
+    "ui-components",
+    "ui-framework",
+    "components-library"
+  ],
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "dependencies": {
+    "@0b5vr/tweakpane-plugin-profiler": "^0.4.1",
+    "@0b5vr/tweakpane-plugin-rotation": "^0.2.0",
+    "@kitschpatrol/tweakpane-image-plugin": "^2.0.0",
+    "@kitschpatrol/tweakpane-textarea-plugin": "^2.0.1",
+    "@tweakpane/core": "^2.0.1",
+    "@tweakpane/plugin-camerakit": "^0.3.0",
+    "@tweakpane/plugin-essentials": "^0.2.0",
+    "esm-env": "^1.0.0",
+    "nanoid": "^5.0.3",
+    "svelte-local-storage-store": "^0.6.4",
+    "tweakpane": "^4.0.1",
+    "tweakpane-plugin-waveform": "^1.0.0"
+  },
+  "devDependencies": {
+    "@phenomnomnominal/tsquery": "^6.1.3",
+    "@stkb/rewrap": "^0.1.0",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.27.6",
+    "@sveltejs/package": "^2.2.3",
+    "@types/eslint": "^8.44.8",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.10.2",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "cspell": "^8.1.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-perfectionist": "^2.5.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.10",
+    "markdownlint": "^0.32.1",
+    "markdownlint-cli": "^0.37.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-html": "^1.5.0",
+    "prettier": "^3.1.0",
+    "prettier-plugin-astro": "^0.12.2",
+    "prettier-plugin-pkg": "^0.18.0",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.2.6",
+    "stylelint": "^15.11.0",
+    "stylelint-config-clean-order": "^5.2.0",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-standard": "^34.0.0",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "svelte-language-server": "^0.16.1",
+    "svelte2tsx": "^0.6.27",
+    "ts-morph": "^20.0.0",
+    "tslib": "^2.6.2",
+    "tsx": "^4.6.1",
+    "typescript": "^5.3.2",
+    "vite": "^4.5.0",
+    "yaml": "^2.3.4"
+  },
+  "scripts": {
+    "build": "run-s --print-label build:*",
+    "build:01-sync": "pnpm run check",
+    "build:02-exports": "tsx ./scripts/generate-exports.ts",
+    "build:03-add-source-links": "tsx ./scripts/add-source-links.ts",
+    "build:04-format": "pnpm run format",
+    "build:05-package": "svelte-package && publint",
+    "build:06-heal-dts-comments": "tsx ./scripts/heal-dts-comments.ts",
+    "build:07-strip-component-docs": "tsx ./scripts/strip-component-docs.ts",
+    "build:08-format-library": "prettier --ignore-path --plugin prettier-plugin-svelte --write ./dist",
+    "build:09-doc-data": "tsx ./scripts/generate-doc-data.ts",
+    "build:10-examples-to-kit": "tsx ./scripts/generate-kit-examples.ts",
+    "build:11-examples-to-docs": "tsx ./scripts/generate-example-components.ts",
+    "build:12-acknowledgments-data": "mkdir -p ./docs/src/content/acknowledgments && pnpm licenses list --json > ./docs/src/content/acknowledgments/acknowledgments-lib.json",
+    "build:13-build-docs": "pnpm run docs-build",
+    "check": "svelte-kit sync && svelte-check --ignore ./scratch --tsconfig ./tsconfig.json",
+    "check-watch": "svelte-kit sync && svelte-check --ignore ./scratch --tsconfig ./tsconfig.json --watch",
+    "clean": "git clean -fdX",
+    "docs-build": "pnpm -C ./docs run build",
+    "docs-dev": "pnpm -C ./docs run dev",
+    "docs-preview": "pnpm -C ./docs run preview",
+    "format": "run-s --print-label format:*",
+    "format:1-eslint": "eslint --fix ./src ./scripts ./docs/src",
+    "format:2-stylelint": "stylelint --fix './src/**/*.{css,svelte,html}'",
+    "format:3-rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
+    "format:4-prettier": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-astro --write .",
+    "format:5-embedded": "tsx ./scripts/format-embedded-code.ts",
+    "kit-build": "pnpm run kit-examples && vite build",
+    "kit-dev": " pnpm run kit-examples && vite dev",
+    "kit-examples": "tsx ./scripts/generate-kit-examples.ts",
+    "kit-preview": "vite preview",
+    "lint": "run-p --print-label lint:*",
+    "lint:eslint": "eslint ./src ./scripts ./docs/src",
+    "lint:markdown": "markdownlint **/*.{md,mdx} --ignore node_modules",
+    "lint:prettier": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-astro --check .",
+    "lint:spelling": "cspell --quiet .",
+    "lint:stylelint": "stylelint './src/**/*.{css,svelte,html}'",
+    "lint:typescript": "tsc --noEmit"
+  }
+}