@frontpanel/vue 0.1.0 → 0.3.0

package/README.md

@@ -72,7 +72,7 @@ const playing = ref(false)
 | `FpLcd`, `FpLcdLine` | LCD glass, and a line of text on it with optional unlit segments (`ghost`, `cells`) and a left-to-right `redraw` |
 | `FpLed` | A `green`, `amber` or `red` LED; `lit`, and `blink` to confirm an action |
 | `FpHousing`, `FpWell`, `FpSilk`, `FpScrew` | A dark housing for LEDs, a recessed well, a silkscreened label, a screw head |
-| `FpIcon` | An 18-glyph 16 px pixel icon set (`fpIconNames`) |
+| `FpIcon` | A 19-glyph 16 px pixel icon set (`fpIconNames`) |
 
 Element components take Reka's `as` and `asChild`.
 

package/dist/FpKnob.vue.d.ts

@@ -0,0 +1,31 @@
+export interface FpKnobProps {
+    /** The lowest value, at the knob's 7 o'clock stop. */
+    min?: number;
+    /** The highest value, at its 5 o'clock stop. */
+    max?: number;
+    /** The step values snap to. PageUp and PageDown move ten steps. */
+    step?: number;
+    /** A silkscreen label under the knob, which also names it. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Turns the value into the words a screen reader says, such as `v => `${v} dB``. */
+    valueText?: (value: number) => string;
+    disabled?: boolean;
+}
+type __VLS_Props = FpKnobProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    valueCommit: (value: number) => any;
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onValueCommit?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    min: number;
+    max: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpLed.vue.d.ts

@@ -1,3 +1,4 @@
+import type { FpLens } from './lens';
 export type FpLedColor = 'green' | 'amber' | 'red';
 export interface FpLedProps {
     /** The colour it lights in. */
@@ -6,6 +7,8 @@ export interface FpLedProps {
     lit?: boolean;
     /** Blinks twice when it lights, then holds, to confirm an action. Re-key the LED to blink again. */
     blink?: boolean;
+    /** How its light spreads. Unset, it takes the lens set around it (`fp-lens-*`), else diffused. */
+    lens?: FpLens;
     /** Announces the LED as an image with this name. Without it the LED is decorative: say its state in text nearby. */
     label?: string;
 }

package/dist/FpMeter.vue.d.ts

@@ -0,0 +1,32 @@
+import type { FpLens } from './lens';
+export interface FpMeterProps {
+    /** The level to show. Values past the ends light all or none of it. */
+    value?: number;
+    /** The level at the bottom (or the start, lying on its side). */
+    min?: number;
+    /** The level at the top (or the end). */
+    max?: number;
+    /** How many LED segments it has. A segment lights once the value reaches it. */
+    segments?: number;
+    /** Where amber begins, in the value's units. Defaults to 70 percent of the range. */
+    amberAt?: number;
+    /** Where red begins, in the value's units. Defaults to 90 percent of the range. */
+    redAt?: number;
+    /** Stands up, like a channel's level, or lies on its side. */
+    orientation?: 'vertical' | 'horizontal';
+    /** How its segments light. Unset, it takes the lens set around it (`fp-lens-*`), else diffused. */
+    lens?: FpLens;
+    /** A silkscreen label under the meter, which also names it. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Turns the value into the words a screen reader says, such as `v => `${v} dB``. */
+    valueText?: (value: number) => string;
+}
+declare const __VLS_export: import("vue").DefineComponent<FpMeterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpMeterProps> & Readonly<{}>, {
+    value: number;
+    min: number;
+    max: number;
+    segments: number;
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpReadout.vue.d.ts

@@ -0,0 +1,22 @@
+import type { FpLedColor } from './FpLed.vue';
+import type { FpLens } from './lens';
+export interface FpReadoutProps {
+    /**
+     * What it shows. Digits, a minus, a space and the letters a seven-segment display can draw; a `.`
+     * lights the decimal point of the digit before it, and a `:` adds a colon.
+     */
+    value: string | number;
+    /** How many digit cells it has, padded with dark cells on the left. Colons do not count. */
+    digits?: number;
+    /** The colour its segments light in. */
+    color?: FpLedColor;
+    /** How its segments light. Unset, it takes the lens set around it (`fp-lens-*`), else diffused. */
+    lens?: FpLens;
+    /** Turns the value into the words a screen reader says, such as `v => `${v} dB``. */
+    valueText?: (value: string) => string;
+}
+declare const __VLS_export: import("vue").DefineComponent<FpReadoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpReadoutProps> & Readonly<{}>, {
+    color: FpLedColor;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpSlider.vue.d.ts

@@ -0,0 +1,34 @@
+export interface FpSliderProps {
+    /** The lowest value, at the bottom (or the start, lying on its side). */
+    min?: number;
+    /** The highest value, at the top (or the end). */
+    max?: number;
+    /** The step values snap to. PageUp, PageDown and Shift with an arrow move ten steps. */
+    step?: number;
+    /** Stands up, like a mixer channel, or lies on its side. */
+    orientation?: 'vertical' | 'horizontal';
+    /** A silkscreen label under the fader, which also names it. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Turns the value into the words a screen reader says, such as `v => `${v} dB``. */
+    valueText?: (value: number) => string;
+    disabled?: boolean;
+}
+type __VLS_Props = FpSliderProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    valueCommit: (value: number) => any;
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onValueCommit?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    min: number;
+    max: number;
+    step: number;
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpSwitch.vue.d.ts

@@ -0,0 +1,28 @@
+import type { FpLedColor } from './FpLed.vue';
+export interface FpSwitchProps {
+    /** A silkscreen label, which also names the switch. Without one, give it an `aria-label`. */
+    label?: string;
+    /** Where the label sits: under the switch, or level with it and before it in the line. */
+    labelPlacement?: 'below' | 'start';
+    /** Standing up, I at the top; or on its side, I on the right. */
+    orientation?: 'vertical' | 'horizontal';
+    /** The colour its lamp lights in. */
+    color?: FpLedColor;
+    disabled?: boolean;
+}
+type __VLS_Props = FpSwitchProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: FpLedColor;
+    orientation: "vertical" | "horizontal";
+    labelPlacement: "start" | "below";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpWindow.vue.d.ts

@@ -1,4 +1,10 @@
+import type { PrimitiveProps } from 'reka-ui';
 export interface FpWindowProps {
+    /**
+     * The window's element. A `section` or `aside` is a landmark named by the title; a `div` is not a
+     * landmark.
+     */
+    as?: PrimitiveProps['as'];
     /** The window's name, shown in the title bar; it also names the window for assistive tech. */
     title: string;
     /** The title's heading level. */
@@ -15,6 +21,8 @@ export interface FpWindowProps {
      * Position the sheet and choose when to use it yourself; wrap it in `<Transition name="fp-sheet">`.
      */
     sheet?: boolean;
+    /** Leaves the body unpadded, for contents that run edge to edge, like a list or a rack of rows. */
+    flush?: boolean;
 }
 type __VLS_Slots = {
     default?: () => unknown;
@@ -26,6 +34,7 @@ declare const __VLS_base: import("vue").DefineComponent<FpWindowProps, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<FpWindowProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
     level: 2 | 3 | 4 | 5 | 6;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/icons.d.ts

@@ -1,4 +1,4 @@
-export type FpIconName = 'add' | 'saved' | 'settings' | 'help' | 'home' | 'undo' | 'redo' | 'save' | 'copy' | 'trash' | 'close' | 'grip' | 'left' | 'right' | 'quick' | 'grid' | 'go' | 'menu';
+export type FpIconName = 'add' | 'saved' | 'settings' | 'help' | 'home' | 'undo' | 'redo' | 'save' | 'copy' | 'trash' | 'close' | 'grip' | 'left' | 'right' | 'quick' | 'grid' | 'go' | 'play' | 'menu';
 /** One path per glyph: every horizontal run of lit pixels becomes a 1 px tall rectangle. */
 export declare function toPath(rows: readonly string[]): string;
 /** Every icon name, in the order the set lists them. */

package/dist/index.d.ts

@@ -11,18 +11,30 @@ export { default as FpHousing } from './FpHousing.vue';
 export type { FpHousingProps } from './FpHousing.vue';
 export { default as FpIcon } from './FpIcon.vue';
 export type { FpIconProps } from './FpIcon.vue';
+export { default as FpKnob } from './FpKnob.vue';
+export type { FpKnobProps } from './FpKnob.vue';
 export { default as FpLcd } from './FpLcd.vue';
 export type { FpLcdProps } from './FpLcd.vue';
 export { default as FpLcdLine } from './FpLcdLine.vue';
 export type { FpLcdLineProps } from './FpLcdLine.vue';
 export { default as FpLed } from './FpLed.vue';
 export type { FpLedColor, FpLedProps } from './FpLed.vue';
+export { default as FpMeter } from './FpMeter.vue';
+export type { FpMeterProps } from './FpMeter.vue';
+export { default as FpReadout } from './FpReadout.vue';
+export type { FpReadoutProps } from './FpReadout.vue';
 export { default as FpScrew } from './FpScrew.vue';
 export { default as FpSilk } from './FpSilk.vue';
 export type { FpSilkProps } from './FpSilk.vue';
+export { default as FpSlider } from './FpSlider.vue';
+export type { FpSliderProps } from './FpSlider.vue';
+export { default as FpSwitch } from './FpSwitch.vue';
+export type { FpSwitchProps } from './FpSwitch.vue';
 export { default as FpWell } from './FpWell.vue';
 export type { FpWellProps } from './FpWell.vue';
 export { default as FpWindow } from './FpWindow.vue';
 export type { FpWindowProps } from './FpWindow.vue';
 export { fpIconNames } from './icons';
 export type { FpIconName } from './icons';
+export type { FpLens } from './lens';
+export { fpReadoutGlyph } from './readout';

package/dist/index.js

@@ -1,8 +1,8 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, shallowRef as p, toDisplayString as m, unref as h, useId as g, useTemplateRef as _, warn as v, watch as y, withCtx as b } from "vue";
-import { Primitive as x } from "reka-ui";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, shallowRef as _, toDisplayString as v, unref as y, useAttrs as b, useId as x, useModel as S, useTemplateRef as C, warn as w, watch as T, withCtx as E } from "vue";
+import { Primitive as D, SliderRoot as O, SliderThumb as k, SliderTrack as A, SwitchRoot as ee, SwitchThumb as te } from "reka-ui";
 //#endregion
 //#region src/FpButton.vue
-var S = /* @__PURE__ */ s({
+var j = /* @__PURE__ */ c({
 	__name: "FpButton",
 	props: {
 		pressed: {
@@ -13,15 +13,15 @@ var S = /* @__PURE__ */ s({
 		as: { default: "button" }
 	},
 	setup(e) {
-		let n = e;
-		return (e, r) => (u(), t(h(x), {
-			as: n.as,
-			"as-child": n.asChild,
+		let t = e;
+		return (e, r) => (p(), n(y(D), {
+			as: t.as,
+			"as-child": t.asChild,
 			class: "fp-chrome-btn",
-			type: n.as === "button" && !n.asChild ? "button" : void 0,
-			"aria-pressed": n.pressed
+			type: t.as === "button" && !t.asChild ? "button" : void 0,
+			"aria-pressed": t.pressed
 		}, {
-			default: b(() => [d(e.$slots, "default")]),
+			default: E(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -30,7 +30,7 @@ var S = /* @__PURE__ */ s({
 			"aria-pressed"
 		]));
 	}
-}), C = /* @__PURE__ */ s({
+}), ne = /* @__PURE__ */ c({
 	__name: "FpCap",
 	props: {
 		color: { default: "white" },
@@ -42,21 +42,21 @@ var S = /* @__PURE__ */ s({
 		as: { default: "button" }
 	},
 	setup(e) {
-		let n = e, r = {
+		let t = e, r = {
 			white: void 0,
 			blue: "fp-cap-blue",
 			amber: "fp-cap-amber",
 			graphite: "fp-cap-graphite",
 			berry: "fp-cap-berry"
 		};
-		return (e, i) => (u(), t(h(x), {
-			as: n.as,
-			"as-child": n.asChild,
-			class: c(["fp-cap", r[n.color]]),
-			type: n.as === "button" && !n.asChild ? "button" : void 0,
-			"aria-pressed": n.pressed
+		return (e, i) => (p(), n(y(D), {
+			as: t.as,
+			"as-child": t.asChild,
+			class: d(["fp-cap", r[t.color]]),
+			type: t.as === "button" && !t.asChild ? "button" : void 0,
+			"aria-pressed": t.pressed
 		}, {
-			default: b(() => [d(e.$slots, "default")]),
+			default: E(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -69,7 +69,7 @@ var S = /* @__PURE__ */ s({
 });
 //#endregion
 //#region src/fit.ts
-function w(e, t, n, r) {
+function re(e, t, n, r) {
 	if (t.width <= 0 || n.width <= 0) return null;
 	let i = t.width / n.width;
 	if (e === "contain") {
@@ -80,7 +80,7 @@ function w(e, t, n, r) {
 }
 //#endregion
 //#region src/FpDevice.vue?vue&type=script&setup=true&lang.ts
-var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
+var M = { class: "fp-device-body" }, N = /* @__PURE__ */ c({
 	__name: "FpDevice",
 	props: {
 		backdrop: {
@@ -96,85 +96,85 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 		height: {},
 		maxScale: { default: 1 }
 	},
-	setup(t) {
-		let n = t, a = _("stage"), o = _("device"), s = p({
+	setup(e) {
+		let n = e, r = C("stage"), o = C("device"), s = _({
 			width: 0,
 			height: 0
-		}), f = p(0), m = e(() => n.fit === "none" ? !1 : n.width !== void 0 || (v(`FpDevice: fit="${n.fit}" needs a design width; the device is not scaled.`), !1)), h = e(() => n.height ?? f.value), g = e(() => !m.value || n.fit === "none" ? null : w(n.fit, s.value, {
+		}), c = _(0), l = t(() => n.fit === "none" ? !1 : n.width !== void 0 || (w(`FpDevice: fit="${n.fit}" needs a design width; the device is not scaled.`), !1)), u = t(() => n.height ?? c.value), m = t(() => !l.value || n.fit === "none" ? null : re(n.fit, s.value, {
 			width: n.width,
-			height: h.value
+			height: u.value
 		}, n.maxScale));
-		function b() {
-			if (!a.value || !o.value) return;
-			let e = getComputedStyle(a.value), t = (e) => Number.parseFloat(e) || 0;
+		function g() {
+			if (!r.value || !o.value) return;
+			let e = getComputedStyle(r.value), t = (e) => Number.parseFloat(e) || 0;
 			s.value = {
-				width: a.value.clientWidth - t(e.paddingLeft) - t(e.paddingRight),
-				height: a.value.clientHeight - t(e.paddingTop) - t(e.paddingBottom)
-			}, f.value = o.value.offsetHeight;
+				width: r.value.clientWidth - t(e.paddingLeft) - t(e.paddingRight),
+				height: r.value.clientHeight - t(e.paddingTop) - t(e.paddingBottom)
+			}, c.value = o.value.offsetHeight;
 		}
-		y([
-			m,
-			a,
+		T([
+			l,
+			r,
 			o
 		], ([e, t, n], r, i) => {
 			if (!e || !t || !n || typeof ResizeObserver > "u") return;
-			let a = new ResizeObserver(b);
+			let a = new ResizeObserver(g);
 			a.observe(t), a.observe(n), i(() => a.disconnect());
 		}, {
 			flush: "post",
 			immediate: !0
 		});
-		let x = e(() => m.value ? { contain: "inline-size" } : void 0), S = e(() => {
-			if (!m.value) return { display: "contents" };
-			if (g.value !== null) return {
-				width: `${n.width * g.value}px`,
-				height: `${h.value * g.value}px`,
+		let v = t(() => l.value ? { contain: "inline-size" } : void 0), y = t(() => {
+			if (!l.value) return { display: "contents" };
+			if (m.value !== null) return {
+				width: `${n.width * m.value}px`,
+				height: `${u.value * m.value}px`,
 				marginInline: "auto"
 			};
-		}), C = e(() => {
-			if (m.value) return {
+		}), b = t(() => {
+			if (l.value) return {
 				boxSizing: "border-box",
 				width: `${n.width}px`,
 				height: n.height === void 0 ? void 0 : `${n.height}px`,
-				scale: g.value ?? void 0,
+				scale: m.value ?? void 0,
 				transformOrigin: "0 0",
-				visibility: g.value === null ? "hidden" : void 0
+				visibility: m.value === null ? "hidden" : void 0
 			};
 		});
-		return (e, t) => (u(), r("div", {
+		return (e, t) => (p(), i("div", {
 			ref_key: "stage",
-			ref: a,
-			class: c({ "fp-device-backdrop": n.backdrop }),
-			style: l(x.value)
-		}, [i("div", { style: l(S.value) }, [n.rim ? (u(), r("div", {
+			ref: r,
+			class: d({ "fp-device-backdrop": n.backdrop }),
+			style: f(v.value)
+		}, [a("div", { style: f(y.value) }, [n.rim ? (p(), i("div", {
 			key: 0,
 			ref_key: "device",
 			ref: o,
 			class: "fp-device-rim",
-			style: l(C.value)
-		}, [i("div", T, [d(e.$slots, "default")])], 4)) : (u(), r("div", {
+			style: f(b.value)
+		}, [a("div", M, [h(e.$slots, "default")])], 4)) : (p(), i("div", {
 			key: 1,
 			ref_key: "device",
 			ref: o,
 			class: "fp-device-body",
-			style: l(C.value)
-		}, [d(e.$slots, "default")], 4))], 4)], 6));
+			style: f(b.value)
+		}, [h(e.$slots, "default")], 4))], 4)], 6));
 	}
-}), D = /* @__PURE__ */ s({
+}), P = /* @__PURE__ */ c({
 	__name: "FpGelButton",
 	props: {
 		asChild: { type: Boolean },
 		as: { default: "button" }
 	},
 	setup(e) {
-		let n = e;
-		return (e, r) => (u(), t(h(x), {
-			as: n.as,
-			"as-child": n.asChild,
+		let t = e;
+		return (e, r) => (p(), n(y(D), {
+			as: t.as,
+			"as-child": t.asChild,
 			class: "fp-gel",
-			type: n.as === "button" && !n.asChild ? "button" : void 0
+			type: t.as === "button" && !t.asChild ? "button" : void 0
 		}, {
-			default: b(() => [d(e.$slots, "default")]),
+			default: E(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"as",
@@ -182,24 +182,24 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 			"type"
 		]));
 	}
-}), O = /* @__PURE__ */ s({
+}), ie = /* @__PURE__ */ c({
 	__name: "FpHousing",
 	props: {
 		asChild: { type: Boolean },
 		as: { default: "span" }
 	},
 	setup(e) {
-		let n = e;
-		return (e, r) => (u(), t(h(x), {
-			as: n.as,
-			"as-child": n.asChild,
+		let t = e;
+		return (e, r) => (p(), n(y(D), {
+			as: t.as,
+			"as-child": t.asChild,
 			class: "fp-housing"
 		}, {
-			default: b(() => [d(e.$slots, "default")]),
+			default: E(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), k = [
+}), F = [
 	"................",
 	"................",
 	".....#..........",
@@ -216,7 +216,7 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 	"................",
 	"................",
 	"................"
-], A = [
+], I = [
 	"................",
 	"................",
 	".........##.....",
@@ -233,7 +233,7 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 	".........##.....",
 	"................",
 	"................"
-], j = (e) => e.map((e) => [...e].reverse().join("")), M = {
+], L = (e) => e.map((e) => [...e].reverse().join("")), R = {
 	add: [
 		"................",
 		"................",
@@ -270,8 +270,8 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 		"................",
 		"................"
 	],
-	left: A,
-	right: j(A),
+	left: I,
+	right: L(I),
 	go: [
 		"................",
 		"................",
@@ -290,8 +290,26 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 		"................",
 		"................"
 	],
-	undo: k,
-	redo: j(k),
+	play: [
+		"................",
+		"................",
+		"....#...........",
+		"....###.........",
+		"....####........",
+		"....######......",
+		"....#######.....",
+		"....#########...",
+		"....#########...",
+		"....#######.....",
+		"....######......",
+		"....####........",
+		"....###.........",
+		"....#...........",
+		"................",
+		"................"
+	],
+	undo: F,
+	redo: L(F),
 	home: [
 		"................",
 		".......##.......",
@@ -491,7 +509,7 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 		"................"
 	]
 };
-function N(e) {
+function z(e) {
 	let t = "";
 	return e.forEach((e, n) => {
 		let r = 0;
@@ -507,48 +525,153 @@ function N(e) {
 		}
 	}), t;
 }
-var P = Object.keys(M), F = Object.fromEntries(P.map((e) => [e, N(M[e])])), I = [
+var B = Object.keys(R), V = Object.fromEntries(B.map((e) => [e, z(R[e])])), H = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], L = ["d"], R = /* @__PURE__ */ s({
+], U = ["d"], W = /* @__PURE__ */ c({
 	__name: "FpIcon",
 	props: {
 		name: {},
 		label: {}
 	},
-	setup(t) {
-		let n = t, a = e(() => F[n.name]);
-		return (e, t) => (u(), r("svg", {
+	setup(e) {
+		let n = e, r = t(() => V[n.name]);
+		return (e, t) => (p(), i("svg", {
 			viewBox: "0 0 16 16",
 			class: "fp-icon",
 			role: n.label ? "img" : void 0,
 			"aria-label": n.label || void 0,
 			"aria-hidden": n.label ? void 0 : "true"
-		}, [i("path", { d: a.value }, null, 8, L)], 8, I));
+		}, [a("path", { d: r.value }, null, 8, U)], 8, H));
+	}
+}), G = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-labelledby",
+	"aria-disabled"
+], K = ["id"], q = 200, J = .1, Y = 270, ae = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpKnob",
+	props: /*@__PURE__*/ l({
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		label: {},
+		valueText: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["valueCommit"], ["update:modelValue"]),
+	setup(e, { emit: n }) {
+		let o = e, s = n, c = S(e, "modelValue"), l = b(), d = t(() => ({
+			class: l.class,
+			style: l.style
+		})), m = t(() => {
+			let { class: e, style: t, ...n } = l;
+			return n;
+		}), h = x(), g = t(() => (String(o.step).split(".")[1] ?? "").length);
+		function _(e) {
+			let t = Math.round((e - o.min) / o.step) * o.step + o.min, n = Math.min(o.max, Math.max(o.min, t));
+			return Number(n.toFixed(g.value));
+		}
+		let C = t(() => _(c.value)), w = t(() => {
+			let e = o.max - o.min, t = e > 0 ? (C.value - o.min) / e : 0;
+			return Math.round(t * Y - Y / 2);
+		});
+		function T(e) {
+			let t = _(e);
+			return t !== C.value && (c.value = t, !0);
+		}
+		function E(e) {
+			if (o.disabled) return;
+			let t = o.step * 10, n = {
+				ArrowUp: C.value + o.step,
+				ArrowRight: C.value + o.step,
+				ArrowDown: C.value - o.step,
+				ArrowLeft: C.value - o.step,
+				PageUp: C.value + t,
+				PageDown: C.value - t,
+				Home: o.min,
+				End: o.max
+			}[e.key];
+			n !== void 0 && (e.preventDefault(), T(n) && s("valueCommit", _(n)));
+		}
+		let D;
+		function O(e) {
+			if (o.disabled || e.button !== 0) return;
+			let t = e.currentTarget;
+			t.setPointerCapture?.(e.pointerId), t.focus({
+				preventScroll: !0,
+				focusVisible: !1
+			}), D = {
+				pointerId: e.pointerId,
+				y: e.clientY,
+				raw: C.value,
+				start: C.value
+			};
+		}
+		function k(e) {
+			if (!D || e.pointerId !== D.pointerId) return;
+			let t = (o.max - o.min) / q * (e.shiftKey ? J : 1);
+			D.raw = Math.min(o.max, Math.max(o.min, D.raw + (D.y - e.clientY) * t)), D.y = e.clientY, T(D.raw);
+		}
+		function A(e) {
+			if (!D || e.pointerId !== D.pointerId) return;
+			let t = _(D.raw), n = t !== D.start;
+			D = void 0, n && s("valueCommit", t);
+		}
+		return (e, t) => (p(), i("div", u({ class: "fp-unit" }, d.value), [a("div", u(m.value, {
+			class: "fp-knob",
+			role: "slider",
+			tabindex: o.disabled ? void 0 : 0,
+			"aria-valuemin": o.min,
+			"aria-valuemax": o.max,
+			"aria-valuenow": C.value,
+			"aria-valuetext": o.valueText?.(C.value),
+			"aria-labelledby": o.label ? y(h) : void 0,
+			"aria-disabled": o.disabled || void 0,
+			onKeydown: E,
+			onPointerdown: O,
+			onPointermove: k,
+			onPointerup: A,
+			onPointercancel: A
+		}), [a("span", {
+			class: "fp-knob-mark",
+			style: f({ rotate: `${w.value}deg` })
+		}, null, 4)], 16, G), o.label ? (p(), i("span", {
+			key: 0,
+			id: y(h),
+			class: "fp-silk"
+		}, v(o.label), 9, K)) : r("", !0)], 16));
 	}
-}), z = /* @__PURE__ */ s({
+}), oe = /* @__PURE__ */ c({
 	__name: "FpLcd",
 	props: {
 		asChild: { type: Boolean },
 		as: { default: "div" }
 	},
 	setup(e) {
-		let n = e;
-		return (e, r) => (u(), t(h(x), {
-			as: n.as,
-			"as-child": n.asChild,
+		let t = e;
+		return (e, r) => (p(), n(y(D), {
+			as: t.as,
+			"as-child": t.asChild,
 			class: "fp-lcd"
 		}, {
-			default: b(() => [d(e.$slots, "default")]),
+			default: E(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), B = {
+}), se = {
 	key: 0,
 	class: "fp-lcd-ghost",
 	"aria-hidden": "true"
-}, V = { key: 2 }, H = /* @__PURE__ */ s({
+}, ce = { key: 2 }, le = /* @__PURE__ */ c({
 	__name: "FpLcdLine",
 	props: {
 		text: {},
@@ -558,30 +681,35 @@ var P = Object.keys(M), F = Object.fromEntries(P.map((e) => [e, N(M[e])])), I =
 		asChild: { type: Boolean },
 		as: { default: "p" }
 	},
-	setup(i) {
-		let a = i, o = e(() => "8".repeat(a.cells ?? a.text.length));
-		return (e, i) => (u(), t(h(x), {
+	setup(e) {
+		let a = e, o = t(() => "8".repeat(a.cells ?? a.text.length));
+		return (e, t) => (p(), n(y(D), {
 			as: a.as,
 			"as-child": a.asChild,
 			class: "fp-lcd-line"
 		}, {
-			default: b(() => [a.ghost ? (u(), r("span", B, m(o.value), 1)) : n("", !0), a.redraw ? (u(), r("span", {
+			default: E(() => [a.ghost ? (p(), i("span", se, v(o.value), 1)) : r("", !0), a.redraw ? (p(), i("span", {
 				key: a.text,
 				class: "fp-lcd-redraw"
-			}, m(a.text), 1)) : (u(), r("span", V, m(a.text), 1))]),
+			}, v(a.text), 1)) : (p(), i("span", ce, v(a.text), 1))]),
 			_: 1
 		}, 8, ["as", "as-child"]));
 	}
-}), U = [
+}), X = {
+	flat: "fp-lens-flat",
+	diffused: "fp-lens-diffused",
+	clear: "fp-lens-clear"
+}, ue = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], W = /* @__PURE__ */ s({
+], de = /* @__PURE__ */ c({
 	__name: "FpLed",
 	props: {
 		color: { default: "green" },
 		lit: { type: Boolean },
 		blink: { type: Boolean },
+		lens: {},
 		label: {}
 	},
 	setup(e) {
@@ -590,92 +718,393 @@ var P = Object.keys(M), F = Object.fromEntries(P.map((e) => [e, N(M[e])])), I =
 			amber: "fp-led-amber",
 			red: "fp-led-red"
 		};
-		return (e, i) => (u(), r("span", {
-			class: c(["fp-led", [n[t.color], {
-				"fp-led-lit": t.lit,
-				"fp-blink-twice": t.lit && t.blink
-			}]]),
+		return (e, r) => (p(), i("span", {
+			class: d(["fp-led", [
+				n[t.color],
+				t.lens && y(X)[t.lens],
+				{
+					"fp-led-lit": t.lit,
+					"fp-blink-twice": t.lit && t.blink
+				}
+			]]),
 			role: t.label ? "img" : void 0,
 			"aria-label": t.label || void 0,
 			"aria-hidden": t.label ? void 0 : "true"
-		}, null, 10, U));
+		}, null, 10, ue));
+	}
+}), fe = [
+	"data-orientation",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-labelledby"
+], pe = ["id"], me = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpMeter",
+	props: {
+		value: { default: 0 },
+		min: { default: 0 },
+		max: { default: 100 },
+		segments: { default: 12 },
+		amberAt: {},
+		redAt: {},
+		orientation: { default: "vertical" },
+		lens: {},
+		label: {},
+		valueText: {}
+	},
+	setup(e) {
+		let n = e, o = b(), s = t(() => ({
+			class: o.class,
+			style: o.style
+		})), c = t(() => {
+			let { class: e, style: t, ...n } = o;
+			return n;
+		}), l = x(), d = t(() => Math.min(n.max, Math.max(n.min, n.value)));
+		function f(e) {
+			let t = n.max - n.min;
+			return t > 0 ? Math.min(1, Math.max(0, (e - n.min) / t)) : 0;
+		}
+		function m(e, t) {
+			return t(f(e) * n.segments + 1e-9) / n.segments;
+		}
+		let h = t(() => {
+			let e = n.max - n.min;
+			return {
+				"--fp-meter-level": String(m(d.value, Math.floor)),
+				"--fp-meter-segments": String(n.segments),
+				"--fp-meter-amber": String(m(n.amberAt ?? n.min + e * .7, Math.round)),
+				"--fp-meter-red": String(m(n.redAt ?? n.min + e * .9, Math.round))
+			};
+		});
+		return (e, t) => (p(), i("div", u({ class: "fp-unit" }, s.value), [a("div", u(c.value, {
+			class: ["fp-meter", n.lens && y(X)[n.lens]],
+			role: "meter",
+			"data-orientation": n.orientation,
+			"aria-valuemin": n.min,
+			"aria-valuemax": n.max,
+			"aria-valuenow": d.value,
+			"aria-valuetext": n.valueText?.(d.value),
+			"aria-labelledby": n.label ? y(l) : void 0,
+			style: h.value
+		}), null, 16, fe), n.label ? (p(), i("span", {
+			key: 0,
+			id: y(l),
+			class: "fp-silk"
+		}, v(n.label), 9, pe)) : r("", !0)], 16));
+	}
+}), Z = {
+	0: "abcdef",
+	1: "bc",
+	2: "abdeg",
+	3: "abcdg",
+	4: "bcfg",
+	5: "acdfg",
+	6: "acdefg",
+	7: "abc",
+	8: "abcdefg",
+	9: "abcdfg",
+	"-": "g",
+	_: "d",
+	"°": "abfg",
+	" ": "",
+	A: "abcefg",
+	B: "cdefg",
+	C: "adef",
+	c: "deg",
+	D: "bcdeg",
+	E: "adefg",
+	F: "aefg",
+	G: "acdef",
+	H: "bcefg",
+	h: "cefg",
+	I: "ef",
+	J: "bcde",
+	L: "def",
+	N: "ceg",
+	O: "abcdef",
+	o: "cdeg",
+	P: "abefg",
+	R: "eg",
+	S: "acdfg",
+	T: "defg",
+	U: "bcdef",
+	u: "cde",
+	Y: "bcdfg"
+};
+function Q(e) {
+	return Z[e] ?? Z[e.toUpperCase()] ?? "";
+}
+//#endregion
+//#region src/FpReadout.vue?vue&type=script&setup=true&lang.ts
+var he = { class: "fp-readout-text" }, ge = ["data-colon"], _e = { class: "fp-readout-lit" }, ve = ["data-segment"], ye = {
+	key: 0,
+	"data-segment": "dp"
+}, be = /* @__PURE__ */ c({
+	__name: "FpReadout",
+	props: {
+		value: {},
+		digits: {},
+		color: { default: "green" },
+		lens: {},
+		valueText: {}
+	},
+	setup(n) {
+		let o = n, s = {
+			green: "fp-led-green",
+			amber: "fp-led-amber",
+			red: "fp-led-red"
+		}, c = t(() => String(o.value)), l = t(() => {
+			let e = [];
+			for (let t of c.value) {
+				let n = e.at(-1);
+				t === ":" ? e.push({ colon: !0 }) : t === "." && n && !n.colon && !n.dot ? n.dot = !0 : t === "." ? e.push({
+					colon: !1,
+					lit: "",
+					dot: !0
+				}) : e.push({
+					colon: !1,
+					lit: Q(t),
+					dot: !1
+				});
+			}
+			let t = e.filter((e) => !e.colon).length;
+			return [...Array.from({ length: Math.max(0, (o.digits ?? 0) - t) }, () => ({
+				colon: !1,
+				lit: "",
+				dot: !1
+			})), ...e];
+		});
+		return (t, n) => (p(), i("span", { class: d(["fp-readout", [s[o.color], o.lens && y(X)[o.lens]]]) }, [a("span", he, v(o.valueText ? o.valueText(c.value) : c.value), 1), (p(!0), i(e, null, m(l.value, (t, o) => (p(), i("span", {
+			key: o,
+			class: "fp-readout-cell",
+			"data-colon": t.colon ? "" : void 0,
+			"aria-hidden": "true"
+		}, [a("span", _e, [t.colon ? (p(), i(e, { key: 0 }, [n[0] ||= a("span", { "data-segment": "colon-upper" }, null, -1), n[1] ||= a("span", { "data-segment": "colon-lower" }, null, -1)], 64)) : (p(), i(e, { key: 1 }, [(p(!0), i(e, null, m(t.lit, (e) => (p(), i("span", {
+			key: e,
+			"data-segment": e
+		}, null, 8, ve))), 128)), t.dot ? (p(), i("span", ye)) : r("", !0)], 64))])], 8, ge))), 128))], 2));
 	}
-}), G = {
+}), $ = {
 	class: "fp-screw",
 	"aria-hidden": "true"
-}, K = /* @__PURE__ */ s({
+}, xe = /* @__PURE__ */ c({
 	__name: "FpScrew",
 	setup(e) {
-		return (e, t) => (u(), r("span", G));
+		return (e, t) => (p(), i("span", $));
 	}
-}), q = /* @__PURE__ */ s({
+}), Se = /* @__PURE__ */ c({
 	__name: "FpSilk",
 	props: {
 		asChild: { type: Boolean },
 		as: { default: "span" }
 	},
 	setup(e) {
-		let n = e;
-		return (e, r) => (u(), t(h(x), {
-			as: n.as,
-			"as-child": n.asChild,
+		let t = e;
+		return (e, r) => (p(), n(y(D), {
+			as: t.as,
+			"as-child": t.asChild,
 			class: "fp-silk"
 		}, {
-			default: b(() => [d(e.$slots, "default")]),
+			default: E(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), J = /* @__PURE__ */ s({
+}), Ce = ["id"], we = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpSlider",
+	props: /*@__PURE__*/ l({
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		orientation: { default: "vertical" },
+		label: {},
+		valueText: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["valueCommit"], ["update:modelValue"]),
+	setup(e, { emit: n }) {
+		let a = e, o = n, c = S(e, "modelValue"), l = b(), d = t(() => ({
+			class: l.class,
+			style: l.style
+		})), f = t(() => {
+			let { class: e, style: t, ...n } = l;
+			return n;
+		}), m = x(), h = t(() => [c.value]);
+		function g(e) {
+			e?.[0] !== void 0 && (c.value = e[0]);
+		}
+		let _ = C("unit");
+		function w(e) {
+			a.disabled || e.button !== 0 || _.value?.querySelector("[role=\"slider\"]")?.focus({
+				preventScroll: !0,
+				focusVisible: !1
+			});
+		}
+		function T(e) {
+			e[0] !== void 0 && o("valueCommit", e[0]);
+		}
+		return (e, t) => (p(), i("div", u({
+			ref_key: "unit",
+			ref: _,
+			class: "fp-unit"
+		}, d.value, { onPointerdownCapture: w }), [s(y(O), {
+			class: "fp-fader",
+			"model-value": h.value,
+			min: a.min,
+			max: a.max,
+			step: a.step,
+			orientation: a.orientation,
+			disabled: a.disabled,
+			"onUpdate:modelValue": g,
+			onValueCommit: T
+		}, {
+			default: E(() => [s(y(A), { class: "fp-fader-slot" }), s(y(k), u(f.value, {
+				class: "fp-fader-cap",
+				"aria-valuetext": a.valueText?.(c.value),
+				"aria-labelledby": a.label ? y(m) : void 0,
+				"aria-disabled": a.disabled || void 0
+			}), null, 16, [
+				"aria-valuetext",
+				"aria-labelledby",
+				"aria-disabled"
+			])]),
+			_: 1
+		}, 8, [
+			"model-value",
+			"min",
+			"max",
+			"step",
+			"orientation",
+			"disabled"
+		]), a.label ? (p(), i("span", {
+			key: 0,
+			id: y(m),
+			class: "fp-silk"
+		}, v(a.label), 9, Ce)) : r("", !0)], 16));
+	}
+}), Te = ["data-label-placement"], Ee = ["id"], De = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "FpSwitch",
+	props: /*@__PURE__*/ l({
+		label: {},
+		labelPlacement: { default: "below" },
+		orientation: { default: "vertical" },
+		color: { default: "red" },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let n = e, o = {
+			green: "fp-led-green",
+			amber: "fp-led-amber",
+			red: "fp-led-red"
+		}, c = S(e, "modelValue"), l = x(), d = b(), f = t(() => ({
+			class: d.class,
+			style: d.style
+		})), m = t(() => {
+			let { class: e, style: t, ...n } = d;
+			return n;
+		});
+		return (e, t) => (p(), i("div", u({
+			class: "fp-unit",
+			"data-label-placement": n.labelPlacement
+		}, f.value), [s(y(ee), u(m.value, {
+			modelValue: c.value,
+			"onUpdate:modelValue": t[0] ||= (e) => c.value = e,
+			class: ["fp-switch", o[n.color]],
+			"data-orientation": n.orientation,
+			disabled: n.disabled,
+			"aria-labelledby": n.label ? y(l) : void 0
+		}), {
+			default: E(() => [s(y(te), { class: "fp-switch-rocker" }, {
+				default: E(() => [...t[1] ||= [a("span", { class: "fp-switch-lamp" }, null, -1), a("span", { class: "fp-switch-face" }, null, -1)]]),
+				_: 1
+			})]),
+			_: 1
+		}, 16, [
+			"modelValue",
+			"class",
+			"data-orientation",
+			"disabled",
+			"aria-labelledby"
+		]), n.label ? (p(), i("span", {
+			key: 0,
+			id: y(l),
+			class: "fp-silk"
+		}, v(n.label), 9, Ee)) : r("", !0)], 16, Te));
+	}
+}), Oe = /* @__PURE__ */ c({
 	__name: "FpWell",
 	props: {
 		asChild: { type: Boolean },
 		as: { default: "div" }
 	},
 	setup(e) {
-		let n = e;
-		return (e, r) => (u(), t(h(x), {
-			as: n.as,
-			"as-child": n.asChild,
+		let t = e;
+		return (e, r) => (p(), n(y(D), {
+			as: t.as,
+			"as-child": t.asChild,
 			class: "fp-well"
 		}, {
-			default: b(() => [d(e.$slots, "default")]),
+			default: E(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, ["as", "as-child"]));
 	}
-}), Y = ["aria-labelledby"], X = { class: "fp-module-title" }, Z = { class: "fp-window-body" }, Q = /* @__PURE__ */ s({
+}), ke = { class: "fp-module-title" }, Ae = /* @__PURE__ */ c({
 	__name: "FpWindow",
 	props: {
+		as: { default: "section" },
 		title: {},
 		level: { default: 2 },
 		closable: { type: Boolean },
 		closeLabel: {},
-		sheet: { type: Boolean }
+		sheet: { type: Boolean },
+		flush: { type: Boolean }
 	},
 	emits: ["close"],
-	setup(e, { emit: s }) {
-		let l = e, p = s, _ = g();
-		return (e, s) => (u(), r("section", {
-			class: c(["fp-window", [l.sheet ? "fp-sheet-panel" : "fp-module"]]),
-			"aria-labelledby": h(_)
-		}, [i("div", X, [
-			(u(), t(f(`h${l.level}`), {
-				id: h(_),
-				class: "fp-silk fp-window-title"
-			}, {
-				default: b(() => [a(m(l.title), 1)]),
-				_: 1
-			}, 8, ["id"])),
-			d(e.$slots, "actions"),
-			l.closable ? (u(), t(S, {
-				key: 0,
-				"aria-label": l.closeLabel ?? `Close ${l.title}`,
-				onClick: s[0] ||= (e) => p("close")
-			}, {
-				default: b(() => [o(R, { name: "close" })]),
-				_: 1
-			}, 8, ["aria-label"])) : n("", !0)
-		]), i("div", Z, [d(e.$slots, "default")])], 10, Y));
+	setup(e, { emit: t }) {
+		let i = e, c = t, l = x();
+		return (e, t) => (p(), n(y(D), {
+			as: i.as,
+			class: d(["fp-window", [i.sheet ? "fp-sheet-panel" : "fp-module"]]),
+			"aria-labelledby": y(l)
+		}, {
+			default: E(() => [a("div", ke, [
+				(p(), n(g(`h${i.level}`), {
+					id: y(l),
+					class: "fp-silk fp-window-title"
+				}, {
+					default: E(() => [o(v(i.title), 1)]),
+					_: 1
+				}, 8, ["id"])),
+				h(e.$slots, "actions"),
+				i.closable ? (p(), n(j, {
+					key: 0,
+					"aria-label": i.closeLabel ?? `Close ${i.title}`,
+					onClick: t[0] ||= (e) => c("close")
+				}, {
+					default: E(() => [s(W, { name: "close" })]),
+					_: 1
+				}, 8, ["aria-label"])) : r("", !0)
+			]), a("div", { class: d(i.flush ? void 0 : "fp-window-body") }, [h(e.$slots, "default")], 2)]),
+			_: 3
+		}, 8, [
+			"as",
+			"class",
+			"aria-labelledby"
+		]));
 	}
 });
 //#endregion
-export { S as FpButton, C as FpCap, E as FpDevice, D as FpGelButton, O as FpHousing, R as FpIcon, z as FpLcd, H as FpLcdLine, W as FpLed, K as FpScrew, q as FpSilk, J as FpWell, Q as FpWindow, P as fpIconNames };
+export { j as FpButton, ne as FpCap, N as FpDevice, P as FpGelButton, ie as FpHousing, W as FpIcon, ae as FpKnob, oe as FpLcd, le as FpLcdLine, de as FpLed, me as FpMeter, be as FpReadout, xe as FpScrew, Se as FpSilk, we as FpSlider, De as FpSwitch, Oe as FpWell, Ae as FpWindow, B as fpIconNames, Q as fpReadoutGlyph };

package/dist/lens.d.ts

@@ -0,0 +1,3 @@
+/** How an LED's light spreads: an even fill, a soft hot spot over its chip, or a bright one. */
+export type FpLens = 'flat' | 'diffused' | 'clear';
+export declare const lensClass: Record<FpLens, string>;

package/dist/readout.d.ts

@@ -0,0 +1,2 @@
+/** The segments a character lights, as letters a to g; none for a character it cannot draw. */
+export declare function fpReadoutGlyph(character: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontpanel/vue",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Vue 3 components for the Frontpanel early-2000s hardware skin: a scale-to-fit device frame, windows, chrome and gel buttons, caps, LCDs and LEDs, built on Reka UI.",
   "author": "Dulan Katukurundage",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "reka-ui": "^2.11.0",
-    "@frontpanel/css": "^0.1.0"
+    "@frontpanel/css": "^0.3.0"
   },
   "devDependencies": {
     "@tailwindcss/oxide": "^4.3.3",