svelte-tweakpane-ui 1.5.19 → 1.6.0-preview.10

package/dist/control/ColorPlus.svelte

@@ -0,0 +1,69 @@
+<script context="module"></script>
+
+<script>
+	import { BROWSER } from 'esm-env'
+	import * as pluginModule from 'tweakpane-plugin-color-plus/lite'
+	import { ColorPlusModel } from 'tweakpane-plugin-color-plus/lite'
+	import ClsPad from '../internal/ClsPad.svelte'
+	import GenericInputFolding from '../internal/GenericInputFolding.svelte'
+	import { fillWith } from '../utils.js'
+	export let value
+	export let expanded = void 0
+	export let type = void 0
+	export let alpha = void 0
+	export let constrain = void 0
+	export let formatLocked = void 0
+	export let gamutLabel = void 0
+	export let gamutLines = void 0
+	export let gamuts = void 0
+	export let paletteChannels = void 0
+	export let paletteProjection = void 0
+	export let swatchFallback = void 0
+	export let textFields = void 0
+	let options
+	let ref
+	const buttonClass = 'tp-colswv_b'
+	$: options = {
+		color: {
+			alpha,
+			formatLocked,
+			type,
+		},
+		constrain,
+		gamutLabel,
+		gamutLines,
+		gamuts,
+		paletteChannels,
+		paletteProjection,
+		swatchFallback,
+		textFields,
+		view: 'color-plus',
+	}
+</script>
+
+<GenericInputFolding
+	bind:value
+	bind:expanded
+	bind:ref
+	on:change
+	{buttonClass}
+	{options}
+	plugin={pluginModule}
+	{...$$restProps}
+/>
+{#if !BROWSER && expanded && $$props.picker === 'inline'}
+	<!-- Main swatch -->
+	<ClsPad
+		keysAdd={fillWith('containerUnitSize', textFields === false ? 5 : 6)}
+		theme={$$props.theme}
+	/>
+	<ClsPad
+		keysAdd={fillWith('containerUnitSpacing', textFields === false ? 2 : 3)}
+		theme={$$props.theme}
+	/>
+	<!-- Detect alpha slider... -->
+	{#if alpha === true || ColorPlusModel.getFormat(value, alpha, type)?.alpha}
+		<ClsPad keysAdd={fillWith('containerUnitSize', 1)} theme={$$props.theme} />
+		<ClsPad extra={2} keysAdd={fillWith('containerVerticalPadding', 2)} theme={$$props.theme} />
+	{/if}
+{/if}

package/dist/control/ColorPlus.svelte.d.ts

@@ -0,0 +1,325 @@
+import { SvelteComponent } from 'svelte'
+import type { ColorPlusValue } from 'tweakpane-plugin-color-plus/lite'
+import type { ValueChangeEvent } from '../utils.js'
+export type { ColorPlusValue } from 'tweakpane-plugin-color-plus/lite'
+export type ColorPlusChangeEvent = ValueChangeEvent<ColorPlusValue>
+import type { ColorPlusInputParams as ColorPlusOptions } from 'tweakpane-plugin-color-plus/lite'
+declare const __propDef: {
+	props: Omit<
+		Omit<
+			{
+				/**
+				 * The binding's target object with values to manipulate.
+				 *
+				 * @bindable
+				 */
+				object: import('@tweakpane/core').Bindable & Record<string, ColorPlusValue>
+				/**
+				 * The key for the value in the target `object` that the control should
+				 * manipulate.
+				 */
+				key: string
+				/**
+				 * Prevent interactivity and gray out the control.
+				 *
+				 * @default `false`
+				 */
+				disabled?: boolean
+				/**
+				 * Text displayed next to control.
+				 *
+				 * @default `undefined`
+				 */
+				label?: string | undefined
+				/**
+				 * Tweakpane's internal options object.
+				 *
+				 * See
+				 * [`BindingParams`](https://tweakpane.github.io/docs/api/types/BindingParams.html).
+				 *
+				 * Valid types are contingent on the type of the value `key` points to in
+				 * `object`.
+				 *
+				 * This is intended internal use, when implementing convenience components
+				 * wrapping Binding's functionality. Options of interest are instead exposed
+				 * as top-level props in _Svelte Tweakpane UI_.
+				 *
+				 * @default `undefined`
+				 */
+				options?: ColorPlusOptions | undefined
+				/**
+				 * Custom color scheme.
+				 *
+				 * If undefined, inherits default Tweakpane theme equivalent to
+				 * `ThemeUtils.presets.standard`, or the theme set with
+				 * `setGlobalDefaultTheme()`.
+				 *
+				 * @default `undefined`
+				 */
+				theme?: import('..').Theme | undefined
+				/**
+				 * Reference to internal Tweakpane
+				 * [`BindingApi`](https://tweakpane.github.io/docs/api/classes/_internal_.BindingApi.html)
+				 * for this control.
+				 *
+				 * This property is exposed for advanced use cases only, such as when
+				 * implementing convenience components wrapping `<Binding>`'s functionality.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane
+				 * UI_ abstractions.
+				 *
+				 * @bindable
+				 * @readonly
+				 */
+				ref?: import('../internal/GenericInput.svelte').GenericInputRef | undefined
+				/**
+				 * Imported Tweakpane `TpPluginBundle` (aliased as `Plugin`) module to
+				 * automatically register in the `<Binding>`'s containing `<Pane>`.
+				 *
+				 * This property is exposed for advanced use cases only, such as when
+				 * implementing convenience components wrapping `<Binding>`'s functionality in
+				 * combination with a Tweakpane plugin.
+				 *
+				 * Direct manipulation of Tweakpane's internals can break _Svelte Tweakpane
+				 * UI_ abstractions.
+				 *
+				 * @default `undefined`
+				 */
+				plugin?: import('../utils.js').Plugin | undefined
+			},
+			'object' | 'key'
+		> & {
+			/**
+			 * A color value to control.
+			 *
+			 * Use either a color-like string (e.g. #ff00ff), a number, an object with
+			 * `r`, `b`, `g`, and optional `a` keys, or a tuple.
+			 *
+			 * @bindable
+			 */
+			value: ColorPlusValue
+		} & {
+			/**
+			 * DOM class name of the button used to expand and collapse the input's
+			 * picker.
+			 *
+			 * @default `undefined`
+			 */
+			buttonClass?: string
+			/**
+			 * Expand or collapse the input's picker.
+			 *
+			 * @default `false`
+			 * @bindable
+			 */
+			expanded?: boolean
+			/**
+			 * The style of value "picker" to use in the input.
+			 *
+			 * @default `'popup'`
+			 */
+			picker?: 'inline' | 'popup'
+			/**
+			 * Allow users to interactively expand / contract the picker.
+			 *
+			 * @default `true`
+			 */
+			userExpandable?: boolean
+		},
+		'ref' | 'options' | 'plugin' | 'buttonClass'
+	> & {
+		/**
+		 * For number values only: Whether to treat the number as carrying an alpha
+		 * component in its lowest byte (e.g. `0xff00667f`). (TODO not sure this is
+		 * a good idea to expose...)
+		 *
+		 * @default `false`
+		 */
+		alpha?: boolean
+		/**
+		 * Keep the color inside the widest gamut configured in `gamuts`.
+		 *
+		 * Picks on the palette plane snap to the in-gamut frontier, while slider
+		 * moves, typed text, and externally bound values shed chroma (at constant
+		 * lightness and hue) to fit.
+		 *
+		 * Set to `false` to allow out-of-gamut colors.
+		 *
+		 * @default `true`
+		 */
+		constrain?: boolean
+		/**
+		 * Whether a valid color entered in the picker's text field is converted
+		 * back to the bound value's original format.
+		 *
+		 * Set to `false` to let a typed value switch the binding's format to match
+		 * what was typed. _(Experimental!)_
+		 *
+		 * @default `true`
+		 */
+		formatLocked?: boolean
+		/**
+		 * Draw the name of the narrowest configured gamut that holds the current
+		 * color in the picker plane's bottom-left corner.
+		 *
+		 * The default adapts to the bound color's model: `true` when it's wide or
+		 * perceptual, `false` when it's sRGB-bound.
+		 *
+		 * @default `true` (`false` for sRGB-bound color models)
+		 */
+		gamutLabel?: boolean
+		/**
+		 * Which configured gamut boundaries are stroked over the picker plane.
+		 *
+		 * `'inner'` draws the narrower gamuts' lines, `'outer'` draws the widest
+		 * gamut's line (otherwise redundant with the drawn plane's own edge),
+		 * `'all'` draws both, and `'none'` hides every line.
+		 *
+		 * @default `'inner'`
+		 */
+		gamutLines?: 'all' | 'inner' | 'none' | 'outer'
+		/**
+		 * RGB gamuts whose boundaries the OKLCH picker draws, as an array of ids.
+		 *
+		 * Both colorjs ids and their CSS aliases are accepted: `'srgb'`, `'p3'` /
+		 * `'display-p3'`, `'a98rgb'` / `'a98-rgb'`, `'rec2020'`, and `'prophoto'` /
+		 * `'prophoto-rgb'`.
+		 *
+		 * The default adapts to the bound color's model: `['srgb', 'p3']` when it's
+		 * wide or perceptual, `['srgb']` when it's sRGB-bound.
+		 *
+		 * @default `['srgb', 'p3']` (`['srgb']` for sRGB-bound color models)
+		 */
+		gamuts?: string[]
+		/**
+		 * Which OKLCH channels map to the picker plane's axes and the slider, as
+		 * `[X][Y]_[slider]`.
+		 *
+		 * @default `'CL_H'`
+		 */
+		paletteChannels?: 'CH_L' | 'CL_H' | 'HC_L' | 'HL_C' | 'LC_H' | 'LH_C'
+		/**
+		 * How the picker plane projects the gamut volume onto its rectangle.
+		 *
+		 * `'okhsv'` uses an OKHSV saturation / value projection on lightness ×
+		 * chroma layouts (the most similar to Tweakpane's built-in palette),
+		 * falling back to `'stretch'` behavior on other layouts. `'perceptual'`
+		 * keeps absolute OKLCH spacing, so the gamut sits as an irregular region
+		 * within the plane. `'stretch'` fills the plane with the widest gamut, row
+		 * by row.
+		 *
+		 * @default `'okhsv'`
+		 */
+		paletteProjection?: 'okhsv' | 'perceptual' | 'stretch'
+		/**
+		 * How the swatch preview's fallback triangle forces an out-of-gamut color
+		 * into sRGB.
+		 *
+		 * `'clip'` clamps each channel to its range, matching what the browser
+		 * paints on screen. `'css'` applies the [CSS Color 4 gamut-mapping
+		 * algorithm](https://www.w3.org/TR/css-color-4/#gamut-mapping) (chroma
+		 * reduction at constant lightness and hue), which can disagree with
+		 * on-screen rendering.
+		 *
+		 * Only affects the swatch preview, never the color value itself.
+		 *
+		 * @default `'clip'`
+		 */
+		swatchFallback?: 'clip' | 'css'
+		/**
+		 * Show the color model drop-down and per-channel text inputs below the
+		 * picker palette.
+		 *
+		 * Set to `false` to hide them for a more compact, pointer-only picker. (The
+		 * alpha slider's text input, if present, is unaffected.)
+		 *
+		 * @default `true`
+		 */
+		textFields?: boolean
+		/**
+		 * Whether to treat values as floats from 0.0 to 1.0, or integers from 0 to
+		 * 255.
+		 *
+		 * @default `'int'`
+		 */
+		type?: 'float' | 'int'
+		/**
+		 * A color value to control.
+		 *
+		 * Use either a color-like string (e.g. #ff00ff), a number, an object with
+		 * `r`, `b`, `g`, and optional `a` keys, or a tuple.
+		 *
+		 * @bindable
+		 */
+		value: ColorPlusValue
+	}
+	slots: {}
+	events: {
+		/**
+		 * Fires when `value` changes.
+		 *
+		 * _This event is provided for advanced use cases. It's usually preferred to
+		 * bind to the `value` prop instead._
+		 *
+		 * The `event.details` payload includes a copy of the value and an `origin`
+		 * field to distinguish between user-interactive changes (`internal`) and
+		 * changes resulting from programmatic manipulation of the `value`
+		 * (`external`).
+		 *
+		 * @extends ValueChangeEvent
+		 * @event
+		 */
+		change: ColorPlusChangeEvent
+	}
+}
+export type ColorPlusProps = typeof __propDef.props
+export type ColorPlusEvents = typeof __propDef.events
+export type ColorPlusSlots = typeof __propDef.slots
+/**
+ * A color picker with support for additional color value formats.
+ *
+ * Integrates the color control from the [Color Plus
+ * plugin](https://github.com/kitschpatrol/tweakpane-plugin-color-plus).
+ *
+ * This component looks very similar to the Tweakpane-native `<Color>` control, but it adds support for all [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) color string formats, color arrays, a wider range of color objects, and a revised color picker with support for wide-gamut color spaces.
+ *
+ * The plugin on which `<ColorPlus>` is based is still under active development, but can generally be used as a drop-in replacement for the `Color` control. Please report any issues you might encountered.
+ *
+ * `<ColorPlus>` might replace the `<Color>` control entirely in the next major version of `svelte-tweakpane-ui`.
+ *
+ * Usage outside of a `<Pane>` component will implicitly wrap the color picker in `<Pane
+ * position="inline">`.
+ *
+ * @emits {ColorPlusChangeEvent} change - When `value` changes. (This event is provided for advanced use cases. Prefer binding to `value`.)
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * import { ColorPlus } from 'svelte-tweakpane-ui'
+ *
+ * let startColor = 'oklch(93.7% 0.199 105deg / 1)'
+ * let endColor = 'oklch(70.2% 0.322 328deg / 1)'
+ * </script>
+ *
+ * <ColorPlus bind:value={startColor} label="Start Color" />
+ * <ColorPlus bind:value={endColor} label="End Color" />
+ *
+ * <div class="demo" style:--a={startColor} style:--b={endColor}></div>
+ *
+ * <style>
+ * .demo {
+ *   aspect-ratio: 1;
+ *   width: 100%;
+ *   background: linear-gradient(to top, var(--a), var(--b));
+ * }
+ * </style>
+ * ```
+ *
+ * @sourceLink
+ * [ColorPlus.svelte](https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/main/src/lib/control/ColorPlus.svelte)
+ */
+export default class ColorPlus extends SvelteComponent<
+	ColorPlusProps,
+	ColorPlusEvents,
+	ColorPlusSlots
+> {}

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export type {
 	ColorValueRgbTuple,
 	ColorValueString,
 } from './control/Color.svelte'
+export { default as ColorPlus } from './control/ColorPlus.svelte'
+export type { ColorPlusChangeEvent, ColorPlusValue } from './control/ColorPlus.svelte'
 export { default as CubicBezier } from './control/CubicBezier.svelte'
 export type {
 	CubicBezierChangeEvent,

package/dist/index.js

@@ -2,6 +2,7 @@ export { default as Button } from './control/Button.svelte'
 export { default as ButtonGrid } from './control/ButtonGrid.svelte'
 export { default as Checkbox } from './control/Checkbox.svelte'
 export { default as Color } from './control/Color.svelte'
+export { default as ColorPlus } from './control/ColorPlus.svelte'
 export { default as CubicBezier } from './control/CubicBezier.svelte'
 export { default as File } from './control/File.svelte'
 export { default as Image } from './control/Image.svelte'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tweakpane-ui",
-  "version": "1.5.19",
+  "version": "1.6.0-preview.10",
   "description": "A Svelte component library wrapping UI elements from Tweakpane, plus some additional functionality for convenience and flexibility.",
   "keywords": [
     "components",
@@ -70,6 +70,10 @@
       "types": "./dist/control/Color.svelte.d.ts",
       "svelte": "./dist/control/Color.svelte"
     },
+    "./ColorPlus.svelte": {
+      "types": "./dist/control/ColorPlus.svelte.d.ts",
+      "svelte": "./dist/control/ColorPlus.svelte"
+    },
     "./CubicBezier.svelte": {
       "types": "./dist/control/CubicBezier.svelte.d.ts",
       "svelte": "./dist/control/CubicBezier.svelte"
@@ -199,7 +203,8 @@
     "fast-equals": "^6.0.0",
     "nanoid": "^6.0.0",
     "svelte-persisted-store": "0.12.0",
-    "tweakpane": "4.0.5"
+    "tweakpane": "4.0.5",
+    "tweakpane-plugin-color-plus": "0.5.0"
   },
   "devDependencies": {
     "@kitschpatrol/shared-config": "^8.1.0",
@@ -207,7 +212,7 @@
     "@playwright/test": "^1.61.1",
     "@stkb/rewrap": "^0.1.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.69.1",
+    "@sveltejs/kit": "^2.69.2",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@types/node": "^20.19.43",
@@ -250,7 +255,7 @@
     "kit-dev": "vite dev",
     "kit-preview": "vite preview",
     "lint": "ksc lint --skip repo && svelte-kit sync && svelte-check --tsconfig ./tsconfig.build.json",
-    "release": "pnpm build && bumpp --commit 'Release: %s' && NPM_AUTH_TOKEN=$(op read 'op://Personal/npm/token') pnpm publish --ignore-scripts",
+    "release": "pnpm build && bumpp --preid preview --commit 'Release: %s' && NPM_AUTH_TOKEN=$(op read 'op://Personal/npm/token') pnpm publish --tag preview --ignore-scripts",
     "rewrap": "rewrap -i --column 100 `find src \\( -name '*.svelte' -o -name '*.ts'  -o -name '*.html' \\) -type f | grep -v src/examples`",
     "test": "pnpm run --sequential /^test:/",
     "test:integration": "playwright test"

package/readme.md

@@ -33,7 +33,7 @@
 
 ## Overview
 
-🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of <!-- component-count -->33<!-- /component-count --> idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
+🎛️ **_Svelte Tweakpane UI_** wraps user-interface elements from the excellent [Tweakpane](https://tweakpane.github.io/docs/) library in a collection of <!-- component-count -->34<!-- /component-count --> idiomatic, reactive, type-safe, carefully-crafted, and obsessively-documented [Svelte](https://svelte.dev) components.
 
 The library makes it easy to quickly and declaratively add knobs and dials to your projects using components that feel like they were made for Svelte. It also augments Tweakpane with a few [extra features](https://kitschpatrol.com/svelte-tweakpane-ui/docs/features) for your convenience and enjoyment.
 
@@ -99,6 +99,8 @@ npm install svelte-tweakpane-ui
   A checkbox.
 - **[Color](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/color)**\
   A color picker.
+- **[ColorPlus](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/colorplus)**\
+  A color picker with support for additional color value formats.
 - **[CubicBezier](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/cubicbezier)**\
   A control for editing a bezier curve. Ideal for tweaking animation easing values.
 - **[File](https://kitschpatrol.com/svelte-tweakpane-ui/docs/components/file)**\