@frontpanel/vue 0.1.0 → 0.2.0

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/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/index.d.ts

@@ -11,18 +11,28 @@ 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 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 } 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({
+}), M = /* @__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 ee(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 te = { class: "fp-device-body" }, ne = /* @__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 : ee(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", te, [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({
+}), re = /* @__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({
+}), N = /* @__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 = [
+}), P = [
 	"................",
 	"................",
 	".....#..........",
@@ -216,7 +216,7 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 	"................",
 	"................",
 	"................"
-], A = [
+], F = [
 	"................",
 	"................",
 	".........##.....",
@@ -233,7 +233,7 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 	".........##.....",
 	"................",
 	"................"
-], j = (e) => e.map((e) => [...e].reverse().join("")), M = {
+], I = (e) => e.map((e) => [...e].reverse().join("")), L = {
 	add: [
 		"................",
 		"................",
@@ -270,8 +270,8 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 		"................",
 		"................"
 	],
-	left: A,
-	right: j(A),
+	left: F,
+	right: I(F),
 	go: [
 		"................",
 		"................",
@@ -290,8 +290,8 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 		"................",
 		"................"
 	],
-	undo: k,
-	redo: j(k),
+	undo: P,
+	redo: I(P),
 	home: [
 		"................",
 		".......##.......",
@@ -491,7 +491,7 @@ var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
 		"................"
 	]
 };
-function N(e) {
+function ie(e) {
 	let t = "";
 	return e.forEach((e, n) => {
 		let r = 0;
@@ -507,48 +507,153 @@ function N(e) {
 		}
 	}), t;
 }
-var P = Object.keys(M), F = Object.fromEntries(P.map((e) => [e, N(M[e])])), I = [
+var R = Object.keys(L), z = Object.fromEntries(R.map((e) => [e, ie(L[e])])), B = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], L = ["d"], R = /* @__PURE__ */ s({
+], V = ["d"], H = /* @__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(() => z[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, V)], 8, B));
+	}
+}), U = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-labelledby",
+	"aria-disabled"
+], W = ["id"], G = 200, K = .1, q = 270, J = /* @__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 * q - q / 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) / G * (e.shiftKey ? K : 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, U), o.label ? (p(), i("span", {
+			key: 0,
+			id: y(h),
+			class: "fp-silk"
+		}, v(o.label), 9, W)) : r("", !0)], 16));
 	}
-}), z = /* @__PURE__ */ s({
+}), Y = /* @__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 = {
+}), ae = {
 	key: 0,
 	class: "fp-lcd-ghost",
 	"aria-hidden": "true"
-}, V = { key: 2 }, H = /* @__PURE__ */ s({
+}, oe = { key: 2 }, se = /* @__PURE__ */ c({
 	__name: "FpLcdLine",
 	props: {
 		text: {},
@@ -558,30 +663,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", ae, 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", oe, v(a.text), 1))]),
 			_: 1
 		}, 8, ["as", "as-child"]));
 	}
-}), U = [
+}), X = {
+	flat: "fp-lens-flat",
+	diffused: "fp-lens-diffused",
+	clear: "fp-lens-clear"
+}, ce = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], W = /* @__PURE__ */ s({
+], le = /* @__PURE__ */ c({
 	__name: "FpLed",
 	props: {
 		color: { default: "green" },
 		lit: { type: Boolean },
 		blink: { type: Boolean },
+		lens: {},
 		label: {}
 	},
 	setup(e) {
@@ -590,92 +700,336 @@ 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, ce));
+	}
+}), ue = [
+	"data-orientation",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-labelledby"
+], de = ["id"], fe = /* @__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, ue), n.label ? (p(), i("span", {
+			key: 0,
+			id: y(l),
+			class: "fp-silk"
+		}, v(n.label), 9, de)) : 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 pe = { class: "fp-readout-text" }, me = ["data-colon"], he = { class: "fp-readout-lit" }, ge = ["data-segment"], _e = {
+	key: 0,
+	"data-segment": "dp"
+}, ve = /* @__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", pe, 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", he, [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, ge))), 128)), t.dot ? (p(), i("span", _e)) : r("", !0)], 64))])], 8, me))), 128))], 2));
 	}
-}), G = {
+}), $ = {
 	class: "fp-screw",
 	"aria-hidden": "true"
-}, K = /* @__PURE__ */ s({
+}, ye = /* @__PURE__ */ c({
 	__name: "FpScrew",
 	setup(e) {
-		return (e, t) => (u(), r("span", G));
+		return (e, t) => (p(), i("span", $));
 	}
-}), q = /* @__PURE__ */ s({
+}), be = /* @__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({
+}), xe = ["id"], Se = /* @__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, xe)) : r("", !0)], 16));
+	}
+}), Ce = /* @__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({
+}), we = { class: "fp-module-title" }, Te = /* @__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", we, [
+				(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(H, { 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, M as FpCap, ne as FpDevice, re as FpGelButton, N as FpHousing, H as FpIcon, J as FpKnob, Y as FpLcd, se as FpLcdLine, le as FpLed, fe as FpMeter, ve as FpReadout, ye as FpScrew, be as FpSilk, Se as FpSlider, Ce as FpWell, Te as FpWindow, R 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.2.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.2.0"
   },
   "devDependencies": {
     "@tailwindcss/oxide": "^4.3.3",