@frontpanel/vue 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dulan Katukurundage
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,97 @@
-# Temporary Holding Version
+# @frontpanel/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue 3 components for the Frontpanel early-2000s hardware skin: a device frame that can scale to
+fit, windows, chrome and gel buttons, molded caps, LCD lines, LEDs and a pixel icon set. Behaviour
+and ARIA come from [Reka UI](https://reka-ui.com); the look comes from
+[`@frontpanel/css`](https://www.npmjs.com/package/@frontpanel/css).
+
+The UI kit behind [WhatsTheNextChord](https://whatsthenextchord.com).
+
+**[Documentation](https://dulandev.github.io/frontpanel/)**: guides, live demos, and every
+component, class and token.
+
+> `0.x`: props may still change between minor versions. Pin the version.
+
+## Install
+
+```bash
+npm install @frontpanel/vue
+```
+
+It needs Vue 3.5 or later. `@frontpanel/css` comes with it; the components ship no CSS of their
+own, so import the stylesheet once:
+
+```ts
+import '@frontpanel/css/index.css'
+import '@frontpanel/css/fonts.css' // optional: the display and LCD fonts
+```
+
+With Tailwind 4, import `@frontpanel/css/tailwind.css` instead (see its README), and add an
+`@source` line for this package. Tailwind doesn't scan `node_modules`, so without it the classes
+the components use are never generated. Give the path from your CSS file:
+
+```css
+@source "../node_modules/@frontpanel/vue/dist";
+```
+
+## Example
+
+```vue
+<script setup lang="ts">
+import { FpButton, FpDevice, FpGelButton, FpLcd, FpLcdLine, FpLed, FpWindow } from '@frontpanel/vue'
+import { ref } from 'vue'
+
+const playing = ref(false)
+</script>
+
+<template>
+  <FpDevice fit="width" :width="600">
+    <FpWindow title="Deck">
+      <FpLcd>
+        <FpLcdLine :text="playing ? 'PLAYING' : 'STOPPED'" ghost :cells="12" redraw />
+      </FpLcd>
+      <FpLed :lit="playing" color="amber" />
+      <FpButton :pressed="playing" @click="playing = !playing">
+        Play
+      </FpButton>
+      <FpGelButton>Save</FpGelButton>
+    </FpWindow>
+  </FpDevice>
+</template>
+```
+
+## Components
+
+| Component | What it is |
+| --- | --- |
+| `FpDevice` | The device: a molded body in a liquid-chrome rim on a backdrop. `fit="width"` or `"contain"` draws it at a design `width` and scales it to the room it has; the default `fit="none"` leaves layout to your page |
+| `FpWindow` | A matte module with a chrome title bar: `title`, `level`, `closable` (emits `close`), an `actions` slot, and `sheet` for a phone bottom sheet |
+| `FpButton` | A brushed-chrome push button; `pressed` makes it a toggle |
+| `FpGelButton` | The glossy gel pill, for the panel's main action |
+| `FpCap` | A molded-plastic cap in `white`, `blue`, `amber`, `graphite` or `berry`; `pressed` holds it down with a ring |
+| `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`) |
+
+Element components take Reka's `as` and `asChild`.
+
+## Accessibility
+
+- **LEDs and icons are decorative** (`aria-hidden`) unless you give them a `label`, which makes
+  them an image with that name. Say an LED's state in text nearby, or label it; colour alone
+  never carries meaning.
+- **An icon-only button needs a name.** Put `aria-label` on the `FpButton` and leave the
+  `FpIcon` inside it decorative.
+- **`pressed` makes a toggle.** On `FpButton` and `FpCap` it sets `aria-pressed` and holds the
+  control down; leave it unset for an ordinary button, which then gets no `aria-pressed`.
+- **Closing an `FpWindow` removes the focused close button.** Move focus back to the control
+  that opened the window.
+- **`FpSilk` is a span.** Render it as a heading or `label` (`as="h3"`, `as="label"`) where it
+  names something.
+- Every control shows a focus ring, every text colour pairing passes WCAG AA in both skins, and
+  each moving part respects `prefers-reduced-motion`.
+
+## Licence
+
+MIT.

package/dist/FpButton.vue.d.ts

@@ -0,0 +1,21 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpButtonProps extends PrimitiveProps {
+    /** Holds the button down and sets `aria-pressed`, for a toggle. Leave it unset for a plain push button. */
+    pressed?: boolean;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpButtonProps> & Readonly<{}>, {
+    pressed: boolean;
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpCap.vue.d.ts

@@ -0,0 +1,25 @@
+import type { PrimitiveProps } from 'reka-ui';
+export type FpCapColor = 'white' | 'blue' | 'amber' | 'graphite' | 'berry';
+export interface FpCapProps extends PrimitiveProps {
+    /** The plastic. Each colour carries its own label colour. */
+    color?: FpCapColor;
+    /** Holds the cap down with a ring around it and sets `aria-pressed`. Leave it unset for a plain cap. */
+    pressed?: boolean;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpCapProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpCapProps> & Readonly<{}>, {
+    pressed: boolean;
+    as: import("reka-ui").AsTag | import("vue").Component;
+    color: FpCapColor;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpDevice.vue.d.ts

@@ -0,0 +1,39 @@
+import type { FpDeviceFit } from './fit';
+export interface FpDeviceProps {
+    /** Sets the device on the gridded backdrop. Turn it off when the page already provides one. */
+    backdrop?: boolean;
+    /** Rings the body in liquid chrome. Without it the body runs to the edges, as on a phone. */
+    rim?: boolean;
+    /**
+     * Scale-to-fit. `none` leaves layout to the page: the device fills its box and its modules reflow
+     * at your breakpoints. `width` draws the device at its design `width` and scales it to the width it
+     * has; `contain` scales it to fit both sides, which needs a box with a height of its own.
+     */
+    fit?: FpDeviceFit;
+    /** The design width in px, rim included, which scale-to-fit needs. */
+    width?: number;
+    /** A fixed design height in px. Without it the device is as tall as its contents. */
+    height?: number;
+    /** The largest scale to-fit may reach. 1 keeps the device from growing past its design size. */
+    maxScale?: number;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpDeviceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpDeviceProps> & Readonly<{}>, {
+    backdrop: boolean;
+    rim: boolean;
+    fit: FpDeviceFit;
+    maxScale: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpGelButton.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpGelButtonProps extends PrimitiveProps {
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpGelButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpGelButtonProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpHousing.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpHousingProps extends PrimitiveProps {
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpHousingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpHousingProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpIcon.vue.d.ts

@@ -0,0 +1,10 @@
+import type { FpIconName } from './icons';
+export interface FpIconProps {
+    /** Which glyph, one of `fpIconNames`. */
+    name: FpIconName;
+    /** Announces the icon as an image with this name, for an icon that stands alone. */
+    label?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<FpIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpLcd.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpLcdProps extends PrimitiveProps {
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpLcdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpLcdProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpLcdLine.vue.d.ts

@@ -0,0 +1,16 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpLcdLineProps extends PrimitiveProps {
+    /** The text on the glass. Readouts read best in capitals. */
+    text: string;
+    /** Shows the unlit segments behind the text, as on real glass. */
+    ghost?: boolean;
+    /** The line's width in character cells, which the ghost segments fill. Defaults to the text's length. */
+    cells?: number;
+    /** Redraws the line left to right whenever its text changes, as a display does. */
+    redraw?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<FpLcdLineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpLcdLineProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpLed.vue.d.ts

@@ -0,0 +1,16 @@
+export type FpLedColor = 'green' | 'amber' | 'red';
+export interface FpLedProps {
+    /** The colour it lights in. */
+    color?: FpLedColor;
+    /** Lights the LED, with a glow. */
+    lit?: boolean;
+    /** Blinks twice when it lights, then holds, to confirm an action. Re-key the LED to blink again. */
+    blink?: boolean;
+    /** Announces the LED as an image with this name. Without it the LED is decorative: say its state in text nearby. */
+    label?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<FpLedProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpLedProps> & Readonly<{}>, {
+    color: FpLedColor;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpScrew.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FpSilk.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpSilkProps extends PrimitiveProps {
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpSilkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpSilkProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpWell.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+export interface FpWellProps extends PrimitiveProps {
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpWellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FpWellProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/FpWindow.vue.d.ts

@@ -0,0 +1,38 @@
+export interface FpWindowProps {
+    /** The window's name, shown in the title bar; it also names the window for assistive tech. */
+    title: string;
+    /** The title's heading level. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    /**
+     * Adds a close button to the title bar, which emits `close`. Closing removes the focused button, so
+     * move focus back to the control that opened the window.
+     */
+    closable?: boolean;
+    /** The close button's accessible name. Defaults to "Close" and the title. */
+    closeLabel?: string;
+    /**
+     * Wears the phone bottom sheet (`fp-sheet-panel`, in the opt-in page extra) instead of the module.
+     * Position the sheet and choose when to use it yourself; wrap it in `<Transition name="fp-sheet">`.
+     */
+    sheet?: boolean;
+}
+type __VLS_Slots = {
+    default?: () => unknown;
+    /** Extra title-bar buttons, set before the close button. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<FpWindowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<FpWindowProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    level: 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/fit.d.ts

@@ -0,0 +1,10 @@
+export type FpDeviceFit = 'none' | 'width' | 'contain';
+export interface Size {
+    width: number;
+    height: number;
+}
+/**
+ * The scale that fits a device of its design size into the room it has: to the width, or (contain)
+ * to whichever side runs out first. Null until both sides it needs are measurable.
+ */
+export declare function fitScale(fit: Exclude<FpDeviceFit, 'none'>, room: Size, device: Size, maxScale: number): number | null;

package/dist/icons.d.ts

@@ -0,0 +1,7 @@
+export type FpIconName = 'add' | 'saved' | 'settings' | 'help' | 'home' | 'undo' | 'redo' | 'save' | 'copy' | 'trash' | 'close' | 'grip' | 'left' | 'right' | 'quick' | 'grid' | 'go' | '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. */
+export declare const fpIconNames: FpIconName[];
+/** The SVG path of each icon, on a 16 × 16 viewBox. */
+export declare const fpIconPaths: Record<FpIconName, string>;

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+export type { FpDeviceFit } from './fit';
+export { default as FpButton } from './FpButton.vue';
+export type { FpButtonProps } from './FpButton.vue';
+export { default as FpCap } from './FpCap.vue';
+export type { FpCapColor, FpCapProps } from './FpCap.vue';
+export { default as FpDevice } from './FpDevice.vue';
+export type { FpDeviceProps } from './FpDevice.vue';
+export { default as FpGelButton } from './FpGelButton.vue';
+export type { FpGelButtonProps } from './FpGelButton.vue';
+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 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 FpScrew } from './FpScrew.vue';
+export { default as FpSilk } from './FpSilk.vue';
+export type { FpSilkProps } from './FpSilk.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';

package/dist/index.js

@@ -0,0 +1,681 @@
+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";
+//#endregion
+//#region src/FpButton.vue
+var S = /* @__PURE__ */ s({
+	__name: "FpButton",
+	props: {
+		pressed: {
+			type: Boolean,
+			default: void 0
+		},
+		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,
+			class: "fp-chrome-btn",
+			type: n.as === "button" && !n.asChild ? "button" : void 0,
+			"aria-pressed": n.pressed
+		}, {
+			default: b(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"type",
+			"aria-pressed"
+		]));
+	}
+}), C = /* @__PURE__ */ s({
+	__name: "FpCap",
+	props: {
+		color: { default: "white" },
+		pressed: {
+			type: Boolean,
+			default: void 0
+		},
+		asChild: { type: Boolean },
+		as: { default: "button" }
+	},
+	setup(e) {
+		let n = 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
+		}, {
+			default: b(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"class",
+			"type",
+			"aria-pressed"
+		]));
+	}
+});
+//#endregion
+//#region src/fit.ts
+function w(e, t, n, r) {
+	if (t.width <= 0 || n.width <= 0) return null;
+	let i = t.width / n.width;
+	if (e === "contain") {
+		if (t.height <= 0 || n.height <= 0) return null;
+		i = Math.min(i, t.height / n.height);
+	}
+	return Math.min(i, r);
+}
+//#endregion
+//#region src/FpDevice.vue?vue&type=script&setup=true&lang.ts
+var T = { class: "fp-device-body" }, E = /* @__PURE__ */ s({
+	__name: "FpDevice",
+	props: {
+		backdrop: {
+			type: Boolean,
+			default: !0
+		},
+		rim: {
+			type: Boolean,
+			default: !0
+		},
+		fit: { default: "none" },
+		width: {},
+		height: {},
+		maxScale: { default: 1 }
+	},
+	setup(t) {
+		let n = t, a = _("stage"), o = _("device"), s = p({
+			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, {
+			width: n.width,
+			height: h.value
+		}, n.maxScale));
+		function b() {
+			if (!a.value || !o.value) return;
+			let e = getComputedStyle(a.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;
+		}
+		y([
+			m,
+			a,
+			o
+		], ([e, t, n], r, i) => {
+			if (!e || !t || !n || typeof ResizeObserver > "u") return;
+			let a = new ResizeObserver(b);
+			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`,
+				marginInline: "auto"
+			};
+		}), C = e(() => {
+			if (m.value) return {
+				boxSizing: "border-box",
+				width: `${n.width}px`,
+				height: n.height === void 0 ? void 0 : `${n.height}px`,
+				scale: g.value ?? void 0,
+				transformOrigin: "0 0",
+				visibility: g.value === null ? "hidden" : void 0
+			};
+		});
+		return (e, t) => (u(), r("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", {
+			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", {
+			key: 1,
+			ref_key: "device",
+			ref: o,
+			class: "fp-device-body",
+			style: l(C.value)
+		}, [d(e.$slots, "default")], 4))], 4)], 6));
+	}
+}), D = /* @__PURE__ */ s({
+	__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,
+			class: "fp-gel",
+			type: n.as === "button" && !n.asChild ? "button" : void 0
+		}, {
+			default: b(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"type"
+		]));
+	}
+}), O = /* @__PURE__ */ s({
+	__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,
+			class: "fp-housing"
+		}, {
+			default: b(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, ["as", "as-child"]));
+	}
+}), k = [
+	"................",
+	"................",
+	".....#..........",
+	"....##..........",
+	"...##########...",
+	"..###########...",
+	"...##.......##..",
+	"....#........##.",
+	".............##.",
+	".............##.",
+	"............##..",
+	"...#########....",
+	"...########.....",
+	"................",
+	"................",
+	"................"
+], A = [
+	"................",
+	"................",
+	".........##.....",
+	"........###.....",
+	".......###......",
+	"......###.......",
+	".....###........",
+	"....###.........",
+	"....###.........",
+	".....###........",
+	"......###.......",
+	".......###......",
+	"........###.....",
+	".........##.....",
+	"................",
+	"................"
+], j = (e) => e.map((e) => [...e].reverse().join("")), M = {
+	add: [
+		"................",
+		"................",
+		".......##.......",
+		".......##.......",
+		".......##.......",
+		".......##.......",
+		".......##.......",
+		"..############..",
+		"..############..",
+		".......##.......",
+		".......##.......",
+		".......##.......",
+		".......##.......",
+		".......##.......",
+		"................",
+		"................"
+	],
+	close: [
+		"................",
+		"................",
+		"..##........##..",
+		"..###......###..",
+		"...###....###...",
+		"....###..###....",
+		".....######.....",
+		"......####......",
+		"......####......",
+		".....######.....",
+		"....###..###....",
+		"...###....###...",
+		"..###......###..",
+		"..##........##..",
+		"................",
+		"................"
+	],
+	left: A,
+	right: j(A),
+	go: [
+		"................",
+		"................",
+		"................",
+		".........##.....",
+		"..........##....",
+		"...........##...",
+		"............##..",
+		"..#############.",
+		"..#############.",
+		"............##..",
+		"...........##...",
+		"..........##....",
+		".........##.....",
+		"................",
+		"................",
+		"................"
+	],
+	undo: k,
+	redo: j(k),
+	home: [
+		"................",
+		".......##.......",
+		"......####......",
+		".....##..##.....",
+		"....##....##....",
+		"...##......##...",
+		"..##........##..",
+		".##..........##.",
+		"...#........#...",
+		"...#........#...",
+		"...#..###...#...",
+		"...#..#.#...#...",
+		"...#..#.#...#...",
+		"...#..#.#...#...",
+		"...##########...",
+		"................"
+	],
+	saved: [
+		"................",
+		"................",
+		"...##########...",
+		"...#........#...",
+		"...#........#...",
+		"...#........#...",
+		"...#........#...",
+		"...#........#...",
+		"...#........#...",
+		"...#........#...",
+		"...#...##...#...",
+		"...#..#..#..#...",
+		"...#.#....#.#...",
+		"...##......##...",
+		"................",
+		"................"
+	],
+	settings: [
+		"................",
+		"................",
+		"....##..........",
+		".##############.",
+		"....##..........",
+		"................",
+		"..........##....",
+		".##############.",
+		"..........##....",
+		"................",
+		"......##........",
+		".##############.",
+		"......##........",
+		"................",
+		"................",
+		"................"
+	],
+	help: [
+		"................",
+		"................",
+		".....######.....",
+		"....##....##....",
+		"....##....##....",
+		"..........##....",
+		".........##.....",
+		"........##......",
+		".......##.......",
+		".......##.......",
+		"................",
+		".......##.......",
+		".......##.......",
+		"................",
+		"................",
+		"................"
+	],
+	save: [
+		"................",
+		"................",
+		"..############..",
+		"..#..######..#..",
+		"..#..##..##..#..",
+		"..#..######..#..",
+		"..#..........#..",
+		"..#..........#..",
+		"..#.########.#..",
+		"..#.#......#.#..",
+		"..#.#......#.#..",
+		"..#.#......#.#..",
+		"..#.#......#.#..",
+		"..############..",
+		"................",
+		"................"
+	],
+	copy: [
+		"................",
+		"................",
+		"..########......",
+		"..#......#......",
+		"..#..########...",
+		"..#..#......#...",
+		"..#..#......#...",
+		"..#..#......#...",
+		"..#..#......#...",
+		"..####......#...",
+		".....#......#...",
+		".....#......#...",
+		".....#......#...",
+		".....########...",
+		"................",
+		"................"
+	],
+	trash: [
+		"................",
+		"................",
+		"......####......",
+		"..############..",
+		"..############..",
+		"................",
+		"...##########...",
+		"...#..#..#..#...",
+		"...#..#..#..#...",
+		"...#..#..#..#...",
+		"...#..#..#..#...",
+		"...#..#..#..#...",
+		"...#........#...",
+		"...##########...",
+		"................",
+		"................"
+	],
+	grip: [
+		"................",
+		"................",
+		"................",
+		".....##..##.....",
+		".....##..##.....",
+		"................",
+		"................",
+		".....##..##.....",
+		".....##..##.....",
+		"................",
+		"................",
+		".....##..##.....",
+		".....##..##.....",
+		"................",
+		"................",
+		"................"
+	],
+	quick: [
+		"................",
+		"..........###...",
+		".........###....",
+		"........###.....",
+		".......###......",
+		"......###.......",
+		".....########...",
+		"..........###...",
+		".........###....",
+		"........###.....",
+		".......###......",
+		"......##........",
+		".....#..........",
+		"................",
+		"................",
+		"................"
+	],
+	grid: [
+		"................",
+		"................",
+		"..#####..#####..",
+		"..#...#..#...#..",
+		"..#...#..#...#..",
+		"..#...#..#...#..",
+		"..#####..#####..",
+		"................",
+		"................",
+		"..#####..#####..",
+		"..#...#..#...#..",
+		"..#...#..#...#..",
+		"..#...#..#...#..",
+		"..#####..#####..",
+		"................",
+		"................"
+	],
+	menu: [
+		"................",
+		"................",
+		"................",
+		"................",
+		"................",
+		"................",
+		"................",
+		"..##...##...##..",
+		"..##...##...##..",
+		"................",
+		"................",
+		"................",
+		"................",
+		"................",
+		"................",
+		"................"
+	]
+};
+function N(e) {
+	let t = "";
+	return e.forEach((e, n) => {
+		let r = 0;
+		for (; r < e.length;) {
+			if (e[r] !== "#") {
+				r++;
+				continue;
+			}
+			let i = r;
+			for (; e[r] === "#";) r++;
+			let a = r - i;
+			t += `M${i} ${n}h${a}v1h-${a}z`;
+		}
+	}), t;
+}
+var P = Object.keys(M), F = Object.fromEntries(P.map((e) => [e, N(M[e])])), I = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+], L = ["d"], R = /* @__PURE__ */ s({
+	__name: "FpIcon",
+	props: {
+		name: {},
+		label: {}
+	},
+	setup(t) {
+		let n = t, a = e(() => F[n.name]);
+		return (e, t) => (u(), r("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));
+	}
+}), z = /* @__PURE__ */ s({
+	__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,
+			class: "fp-lcd"
+		}, {
+			default: b(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, ["as", "as-child"]));
+	}
+}), B = {
+	key: 0,
+	class: "fp-lcd-ghost",
+	"aria-hidden": "true"
+}, V = { key: 2 }, H = /* @__PURE__ */ s({
+	__name: "FpLcdLine",
+	props: {
+		text: {},
+		ghost: { type: Boolean },
+		cells: {},
+		redraw: { type: Boolean },
+		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), {
+			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", {
+				key: a.text,
+				class: "fp-lcd-redraw"
+			}, m(a.text), 1)) : (u(), r("span", V, m(a.text), 1))]),
+			_: 1
+		}, 8, ["as", "as-child"]));
+	}
+}), U = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+], W = /* @__PURE__ */ s({
+	__name: "FpLed",
+	props: {
+		color: { default: "green" },
+		lit: { type: Boolean },
+		blink: { type: Boolean },
+		label: {}
+	},
+	setup(e) {
+		let t = e, n = {
+			green: "fp-led-green",
+			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
+			}]]),
+			role: t.label ? "img" : void 0,
+			"aria-label": t.label || void 0,
+			"aria-hidden": t.label ? void 0 : "true"
+		}, null, 10, U));
+	}
+}), G = {
+	class: "fp-screw",
+	"aria-hidden": "true"
+}, K = /* @__PURE__ */ s({
+	__name: "FpScrew",
+	setup(e) {
+		return (e, t) => (u(), r("span", G));
+	}
+}), q = /* @__PURE__ */ s({
+	__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,
+			class: "fp-silk"
+		}, {
+			default: b(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, ["as", "as-child"]));
+	}
+}), J = /* @__PURE__ */ s({
+	__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,
+			class: "fp-well"
+		}, {
+			default: b(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, ["as", "as-child"]));
+	}
+}), Y = ["aria-labelledby"], X = { class: "fp-module-title" }, Z = { class: "fp-window-body" }, Q = /* @__PURE__ */ s({
+	__name: "FpWindow",
+	props: {
+		title: {},
+		level: { default: 2 },
+		closable: { type: Boolean },
+		closeLabel: {},
+		sheet: { 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));
+	}
+});
+//#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 };

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@frontpanel/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "0.1.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",
+  "homepage": "https://dulandev.github.io/frontpanel/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DulanDev/frontpanel.git",
+    "directory": "packages/vue"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "y2k",
+    "skeuomorphic",
+    "ui-kit",
+    "design-system",
+    "reka-ui"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "reka-ui": "^2.11.0",
+    "@frontpanel/css": "^0.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/oxide": "^4.3.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.5.0",
+    "happy-dom": "^20.14.3",
+    "tailwindcss": "^4.3.3",
+    "vite": "^8.3.0",
+    "vue": "^3.5.42",
+    "vue-tsc": "^3.3.11"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
 }