@mkbabb/glass-ui 7.0.0 → 9.0.0

package/dist/components/{dropdown-menu → menu}/DropdownMenuSubContent.vue.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import type { DismissableContentEmits } from "../_shared/interaction";
+import type { DismissableContentEmits } from "../_shared/interaction.js";
 export interface DropdownMenuSubContentProps {
     sideOffset?: number;
     alignOffset?: number;
@@ -13,17 +13,17 @@ type __VLS_Slots = {
 };
 declare const __VLS_base: import("vue").DefineComponent<DropdownMenuSubContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
-    pointerDownOutside: (event: import("../_shared/interaction").PointerDownOutsideEvent) => any;
-    focusOutside: (event: import("../_shared/interaction").FocusOutsideEvent) => any;
-    interactOutside: (event: import("../_shared/interaction").PointerDownOutsideEvent | import("../_shared/interaction").FocusOutsideEvent) => any;
+    pointerDownOutside: (event: import("../_shared/interaction.js").PointerDownOutsideEvent) => any;
+    focusOutside: (event: import("../_shared/interaction.js").FocusOutsideEvent) => any;
+    interactOutside: (event: import("../_shared/interaction.js").PointerDownOutsideEvent | import("../_shared/interaction.js").FocusOutsideEvent) => any;
     openAutoFocus: (event: Event) => any;
     closeAutoFocus: (event: Event) => any;
     entryFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<DropdownMenuSubContentProps> & Readonly<{
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-    onPointerDownOutside?: ((event: import("../_shared/interaction").PointerDownOutsideEvent) => any) | undefined;
-    onFocusOutside?: ((event: import("../_shared/interaction").FocusOutsideEvent) => any) | undefined;
-    onInteractOutside?: ((event: import("../_shared/interaction").PointerDownOutsideEvent | import("../_shared/interaction").FocusOutsideEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import("../_shared/interaction.js").PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import("../_shared/interaction.js").FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import("../_shared/interaction.js").PointerDownOutsideEvent | import("../_shared/interaction.js").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;

package/dist/components/{dropdown-menu → menu}/DropdownMenuTrigger.vue.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import type { PrimitiveProps } from "../_shared/primitive";
+import type { PrimitiveProps } from "../_shared/primitive.js";
 export type DropdownMenuTriggerAction = "click" | "pointerdown";
 export interface DropdownMenuTriggerProps {
     /** Merge trigger behavior into one interactive child. */

package/dist/components/{dropdown-menu → menu}/index.d.ts

@@ -1,15 +1,15 @@
-export type { MenuTrigger } from "./useMenuTrigger";
-export { default as DropdownMenu, type DropdownMenuEmits, type DropdownMenuProps, } from "./DropdownMenu.vue";
-export { default as DropdownMenuTrigger, type DropdownMenuTriggerAction, type DropdownMenuTriggerProps, } from "./DropdownMenuTrigger.vue";
-export { default as DropdownMenuContent, type DropdownMenuContentEmits, type DropdownMenuContentProps, } from "./DropdownMenuContent.vue";
-export { default as DropdownMenuGroup, type DropdownMenuGroupProps, } from "./DropdownMenuGroup.vue";
-export { default as DropdownMenuRadioGroup, type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupProps, } from "./DropdownMenuRadioGroup.vue";
-export { default as DropdownMenuItem, type DropdownMenuItemEmits, type DropdownMenuItemProps, } from "./DropdownMenuItem.vue";
-export { default as DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemProps, } from "./DropdownMenuCheckboxItem.vue";
-export { default as DropdownMenuRadioItem, type DropdownMenuRadioItemEmits, type DropdownMenuRadioItemProps, } from "./DropdownMenuRadioItem.vue";
-export { default as DropdownMenuShortcut, type DropdownMenuShortcutProps, } from "./DropdownMenuShortcut.vue";
-export { default as DropdownMenuSeparator, type DropdownMenuSeparatorProps, } from "./DropdownMenuSeparator.vue";
-export { default as DropdownMenuLabel, type DropdownMenuLabelProps, } from "./DropdownMenuLabel.vue";
-export { default as DropdownMenuSub, type DropdownMenuSubEmits, type DropdownMenuSubProps, } from "./DropdownMenuSub.vue";
-export { default as DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, } from "./DropdownMenuSubTrigger.vue";
-export { default as DropdownMenuSubContent, type DropdownMenuSubContentEmits, type DropdownMenuSubContentProps, } from "./DropdownMenuSubContent.vue";
+export type { MenuTrigger } from "./context.js";
+export { default as DropdownMenu, type DropdownMenuEmits, type DropdownMenuProps, } from "./DropdownMenu.vue.js";
+export { default as DropdownMenuTrigger, type DropdownMenuTriggerAction, type DropdownMenuTriggerProps, } from "./DropdownMenuTrigger.vue.js";
+export { default as DropdownMenuContent, type DropdownMenuContentEmits, type DropdownMenuContentProps, } from "./DropdownMenuContent.vue.js";
+export { default as DropdownMenuGroup, type DropdownMenuGroupProps, } from "./DropdownMenuGroup.vue.js";
+export { default as DropdownMenuRadioGroup, type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupProps, } from "./DropdownMenuRadioGroup.vue.js";
+export { default as DropdownMenuItem, type DropdownMenuItemEmits, type DropdownMenuItemProps, } from "./DropdownMenuItem.vue.js";
+export { default as DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemProps, } from "./DropdownMenuCheckboxItem.vue.js";
+export { default as DropdownMenuRadioItem, type DropdownMenuRadioItemEmits, type DropdownMenuRadioItemProps, } from "./DropdownMenuRadioItem.vue.js";
+export { default as DropdownMenuShortcut, type DropdownMenuShortcutProps, } from "./DropdownMenuShortcut.vue.js";
+export { default as DropdownMenuSeparator, type DropdownMenuSeparatorProps, } from "./DropdownMenuSeparator.vue.js";
+export { default as DropdownMenuLabel, type DropdownMenuLabelProps, } from "./DropdownMenuLabel.vue.js";
+export { default as DropdownMenuSub, type DropdownMenuSubEmits, type DropdownMenuSubProps, } from "./DropdownMenuSub.vue.js";
+export { default as DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, } from "./DropdownMenuSubTrigger.vue.js";
+export { default as DropdownMenuSubContent, type DropdownMenuSubContentEmits, type DropdownMenuSubContentProps, } from "./DropdownMenuSubContent.vue.js";

package/dist/components/metric/Metric.vue.d.ts

@@ -1,5 +1,5 @@
-import type { MetricProps } from "./types";
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+import type { MetricProps } from "./types.js";
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
 } & {
@@ -7,12 +7,14 @@ type __VLS_Slots = {} & {
 } & {
     unit?: (props: typeof __VLS_5) => any;
 } & {
-    context?: (props: typeof __VLS_7) => any;
+    delta?: (props: typeof __VLS_7) => any;
+} & {
+    context?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MetricProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricProps> & Readonly<{}>, {
-    size: import("./types").MetricSize;
-    orientation: import("./types").MetricOrientation;
+    size: import("./types.js").MetricSize;
     loading: boolean;
+    posture: import("./types.js").MetricPosture;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/metric/MetricRow.vue.d.ts

@@ -1,17 +1,9 @@
-import type { MetricRowProps } from "./types";
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+import type { MetricRowProps } from "./types.js";
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
-} & {
-    context?: (props: typeof __VLS_3) => any;
-} & {
-    value?: (props: typeof __VLS_5) => any;
-} & {
-    unit?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<MetricRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricRowProps> & Readonly<{}>, {
-    loading: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<MetricRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricRowProps> & Readonly<{}>, {}, {}, {}, {}, 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;

package/dist/components/metric/MetricStack.vue.d.ts

@@ -1,10 +1,10 @@
-import type { MetricStackProps } from "./types";
+import type { MetricStackProps } from "./types.js";
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MetricStackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricStackProps> & Readonly<{}>, {
-    density: import("./types").MetricDensity;
+    density: import("./types.js").MetricDensity;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/metric/coalesce-metric.d.ts

@@ -1,8 +1,36 @@
-import type { MetricValue } from "./types";
+import type { MetricPolarity, MetricValue } from "./types.js";
 interface CoalescedMetric {
     display: string;
     empty: boolean;
     loading: boolean;
 }
-export declare function coalesceMetric(value: MetricValue, placeholder?: string, loading?: boolean): CoalescedMetric;
+export interface CoalesceMetricOptions {
+    placeholder?: string;
+    loading?: boolean;
+    /** `12400` → `12.4K`. `Intl.NumberFormat` compact notation, never a hand ladder. */
+    compact?: boolean;
+    locale?: string;
+}
+/**
+ * The family's ONE data-shaping seam. Every readout in the family — the atom's
+ * value, its unit-bearing reading, its delta — passes through this and nothing
+ * else, which is why "what counts as empty" has exactly one answer.
+ *
+ * Finite numbers (including `0` and `-0`) and nonblank strings are readings.
+ * Blank strings, non-finite numbers, `null` and `undefined` take the placeholder.
+ * `loading` outranks both and masks the value with a stable ellipsis.
+ *
+ * COMPACT FORMATTING LIVES HERE, not in a standalone atom (A-21). A dashboard
+ * that renders 12400 as "12400" wastes the column it was given, and every consumer
+ * that fixes that at the call site invents a different rounding. `Intl` already
+ * knows every locale's compact form; this hands it the number and returns the
+ * string. It applies to NUMBERS only — a string reading is already the author's
+ * chosen shape and is passed through untouched.
+ */
+export declare function coalesceMetric(value: MetricValue, placeholderOrOptions?: string | CoalesceMetricOptions, loading?: boolean): CoalescedMetric;
+/**
+ * The polarity a numeric delta carries on its own. A string delta has none — the
+ * author states it — and a zero delta is `flat`, not `up`.
+ */
+export declare function metricPolarity(delta: MetricValue): MetricPolarity | undefined;
 export {};

package/dist/components/metric/index.d.ts

@@ -1,5 +1,6 @@
-export { default as Metric } from "./Metric.vue";
-export { default as MetricCell } from "./MetricCell.vue";
-export { default as MetricRow } from "./MetricRow.vue";
-export { default as MetricStack } from "./MetricStack.vue";
-export type { MetricCellProps, MetricDensity, MetricOrientation, MetricProps, MetricRowProps, MetricSize, MetricStackProps, MetricValue, MetricValueProps, } from "./types";
+export { default as Metric } from "./Metric.vue.js";
+export { default as MetricRow } from "./MetricRow.vue.js";
+export { default as MetricStack } from "./MetricStack.vue.js";
+export { coalesceMetric, metricPolarity } from "./coalesce-metric.js";
+export type { CoalesceMetricOptions } from "./coalesce-metric.js";
+export type { MetricDensity, MetricPolarity, MetricPosture, MetricProps, MetricRowProps, MetricSize, MetricStackProps, MetricValue, MetricValueProps, } from "./types.js";

package/dist/components/metric/styles.css

@@ -1 +1 @@
-@layer components { :where(.metric, .metric-cell, .metric-row) { min-inline-size: 0; color: var(--foreground); } .metric { display: inline-grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 0.125rem 0.5rem; } .metric[data-orientation="stacked"] { grid-template-columns: minmax(0, 1fr); } .metric__label, .metric__context { min-inline-size: 0; overflow-wrap: anywhere; color: var(--muted-foreground); } .metric__label { font-size: var(--type-micro); font-weight: 550; letter-spacing: var(--type-tracking-wide); text-transform: uppercase; } .metric__context { grid-column: 1 / -1; font-size: var(--type-caption); line-height: 1.35; } .metric__reading { display: inline-flex; min-inline-size: 0; align-items: baseline; gap: 0.3em; } .metric__value { min-inline-size: 3ch; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--type-prose); font-weight: 650; font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--type-tracking-tight); line-height: 1; } .metric__unit { flex: none; color: var(--muted-foreground); font-family: var(--font-mono); font-size: var(--type-caption); line-height: 1; } .metric[data-size="sm"] .metric__value { font-size: var(--type-small); } .metric[data-size="lg"] .metric__value, .metric-cell .metric__value { font-size: var(--type-title); } .metric[data-size="xl"] .metric__value { font-size: var(--type-display-3); } :where(.metric, .metric-cell, .metric-row)[data-empty] .metric__value { color: var(--muted-foreground); } :where(.metric, .metric-cell, .metric-row)[data-loading] .metric__value { color: transparent; border-radius: var(--radius-sm); background: var(--surface-tint-15); } :where(.metric, .metric-cell, .metric-row)[data-loading] .metric__unit { visibility: hidden; } .metric-cell { display: grid; align-content: start; gap: 0.375rem; padding: clamp(0.75rem, 2cqi, 1rem); border: 1px solid var(--glass-border-wash); border-radius: var(--radius-card); background: var(--glass-bg-wash); -webkit-backdrop-filter: var(--glass-blur-wash); backdrop-filter: var(--glass-blur-wash); } .metric-cell__heading { display: flex; min-inline-size: 0; align-items: center; gap: 0.375rem; } .metric-cell__icon { flex: none; color: var(--muted-foreground); } .metric-stack { container: metric-stack / inline-size; display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, auto); gap: 0.75rem 1.25rem; inline-size: 100%; } .metric-stack[data-density="compact"] { gap: 0.5rem 1rem; } .metric-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding-block: 0.25rem; } .metric-row__term { display: grid; min-inline-size: 0; gap: 0.125rem; } .metric-row > .metric__reading { justify-self: end; } .metric-row .metric__context { grid-column: auto; } @container metric-stack (max-width: 24rem) { .metric-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .metric-row > .metric__reading { justify-self: start; } } }
+@layer components{.metric{display: inline-grid;grid-template-columns: minmax(0,auto) minmax(0,1fr);min-inline-size: 0;align-items: baseline;color: var(--foreground);gap: 0.125rem 0.5rem;}.metric[data-posture="stacked"],.metric[data-posture="cell"]{grid-template-columns: minmax(0,1fr);}.metric__label,.metric__context{min-inline-size: 0;overflow-wrap: anywhere;color: var(--muted-foreground);}.metric__label{font-size: var(--control-label);font-weight: 550;letter-spacing: var(--type-tracking-wide);text-transform: uppercase;}.metric__context{grid-column: 1 / -1;font-size: var(--type-caption);line-height: 1.35;}.metric__reading{display: inline-flex;min-inline-size: 0;align-items: baseline;gap: 0.3em;}.metric__value{min-inline-size: 3ch;overflow-wrap: anywhere;font-family: var(--font-mono);font-size: var(--type-prose);font-weight: 650;font-variant-numeric: tabular-nums lining-nums;letter-spacing: var(--type-tracking-tight);line-height: 1;}.metric__unit{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);line-height: 1;}.metric__delta{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);font-variant-numeric: tabular-nums lining-nums;line-height: 1;}.metric__delta[data-polarity="up"]{color: var(--success);}.metric__delta[data-polarity="down"]{color: var(--destructive);}.metric[data-size="sm"] .metric__value{font-size: var(--type-small);}.metric[data-size="lg"] .metric__value,.metric[data-posture="cell"] .metric__value{font-size: var(--type-title);}.metric[data-size="xl"] .metric__value{font-size: var(--type-display-3);}.metric[data-empty] .metric__value{color: var(--muted-foreground);}.metric[data-loading] .metric__value{color: transparent;border-radius: var(--radius-sm);background: color-mix( in oklab,var(--foreground) calc(var(--ink-seam) * 100%),transparent );}.metric[data-loading] .metric__unit,.metric[data-loading] .metric__delta{visibility: hidden;}.metric[data-posture="cell"]{display: grid;align-content: start;padding: clamp(0.75rem,2cqi,1rem);border: 1px solid oklch(from var(--foreground) l c h / var(--ink-edge));border-radius: var(--radius-card);background: var(--glass-plate-wash);gap: 0.375rem;}.metric-stack{container: metric-stack / inline-size;display: grid;grid-template-columns: minmax(7rem,1fr) minmax(0,auto);inline-size: 100%;gap: 0.75rem 1.25rem;}.metric-stack[data-density="compact"]{gap: 0.5rem 1rem;}.metric-row{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;align-items: baseline;padding-block: 0.25rem;}.metric-row > .metric[data-posture="row"]{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;}.metric[data-posture="row"] > .metric__reading{justify-self: end;}.metric[data-posture="row"] > .metric__context{grid-column: 1;}@container metric-stack (max-width: 24rem){.metric-row,.metric-row > .metric[data-posture="row"]{grid-template-columns: minmax(0,1fr);gap: 0.25rem;}.metric[data-posture="row"] > .metric__reading{justify-self: start;}}}

package/dist/components/metric/types.d.ts

@@ -1,32 +1,44 @@
-import type { Component, FunctionalComponent, HTMLAttributes } from "vue";
+import type { HTMLAttributes } from "vue";
 export type MetricValue = string | number | null | undefined;
 export type MetricSize = "sm" | "md" | "lg" | "xl";
-export type MetricOrientation = "inline" | "stacked";
 export type MetricDensity = "default" | "compact";
+/**
+ * How the atom arranges its own four parts. This axis is what `MetricCell` used to
+ * be a separate component for: a cell is a POSTURE of one readout, not a second
+ * readout. `row` is the term/reading split a `<MetricStack>` subgrid aligns on.
+ */
+export type MetricPosture = "inline" | "stacked" | "cell" | "row";
+/** Which way a delta moved. Derived from a numeric `delta` when not stated. */
+export type MetricPolarity = "up" | "down" | "flat";
 export interface MetricValueProps {
     value?: MetricValue;
     unit?: string;
     placeholder?: string;
     loading?: boolean;
+    /**
+     * Compact the reading — `12400` reads `12.4K`. Runs through the family's one
+     * data-shaping seam (`coalesceMetric`), never through a second formatter at a
+     * call site.
+     */
+    compact?: boolean;
+    /** BCP-47 locale for the compact form. Defaults to the runtime's. */
+    locale?: string;
 }
-interface MetricTextProps extends MetricValueProps {
+export interface MetricProps extends MetricValueProps {
     label?: string;
     context?: string;
     class?: HTMLAttributes["class"];
-}
-export interface MetricProps extends MetricTextProps {
     size?: MetricSize;
-    orientation?: MetricOrientation;
-}
-export interface MetricCellProps extends MetricTextProps {
-    icon?: Component | FunctionalComponent | object | null;
-    iconSize?: number;
-    iconStrokeWidth?: number;
+    posture?: MetricPosture;
+    /** The change beside the reading. A number carries its own polarity. */
+    delta?: MetricValue;
+    /** Override the derived polarity (for a string delta, or a reversed metric). */
+    polarity?: MetricPolarity;
 }
-export interface MetricRowProps extends MetricTextProps {
+export interface MetricRowProps {
+    class?: HTMLAttributes["class"];
 }
 export interface MetricStackProps {
     density?: MetricDensity;
     class?: HTMLAttributes["class"];
 }
-export {};

package/dist/components/music-staff/MusicStaff.vue.d.ts

@@ -0,0 +1,22 @@
+import { type MusicStaffNoteEvent, type StaffClef } from "./staffGeometry.js";
+export type MusicStaffMode = "score" | "loading";
+export type MusicStaffMaterial = "folio" | "bare";
+export interface MusicStaffProps {
+    label: string;
+    notes?: readonly MusicStaffNoteEvent[];
+    mode?: MusicStaffMode;
+    progress?: number;
+    clef?: StaffClef;
+    material?: MusicStaffMaterial;
+    decorative?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<MusicStaffProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MusicStaffProps> & Readonly<{}>, {
+    progress: number;
+    mode: MusicStaffMode;
+    decorative: boolean;
+    notes: readonly MusicStaffNoteEvent[];
+    clef: StaffClef;
+    material: MusicStaffMaterial;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/music-staff/glyphs.d.ts

@@ -0,0 +1,74 @@
+/** Treble clef, anchored on the G line; the spiral eye closes on that line. */
+export declare const G_CLEF = "M0.68 2.58L0.84 2.44L1 2.29L1.15 2.13L1.28 1.95L1.37 1.74L1.43 1.52L1.48 1.29L1.52 1.07L1.54 0.85L1.56 0.63L1.58 0.41L1.59 0.19L1.61 -0.03L1.62 -0.25L1.63 -0.47L1.63 -0.69L1.64 -0.91L1.64 -1.13L1.65 -1.35L1.65 -1.57L1.66 -1.79L1.66 -2.01L1.66 -2.23L1.66 -2.45L1.66 -2.67L1.65 -2.89L1.65 -3.11L1.64 -3.34L1.63 -3.56L1.6 -3.79L1.55 -4.03L1.43 -4.27L1.17 -4.39L0.91 -4.28L0.76 -4.07L0.68 -3.84L0.62 -3.62L0.59 -3.4L0.56 -3.18L0.53 -2.96L0.49 -2.74L0.45 -2.53L0.41 -2.31L0.37 -2.1L0.34 -1.88L0.3 -1.66L0.26 -1.45L0.23 -1.23L0.19 -1.02L0.15 -0.8L0.12 -0.58L0.08 -0.36L0.04 -0.14L0.02 0.08L0 0.31L0 0.55L0.02 0.78L0.07 1.03L0.17 1.27L0.32 1.48L0.53 1.64L0.76 1.74L1 1.78L1.24 1.77L1.47 1.73L1.68 1.66L1.89 1.56L2.09 1.43L2.27 1.27L2.43 1.07L2.54 0.84L2.61 0.61L2.66 0.37L2.68 0.12L2.66 -0.13L2.59 -0.37L2.48 -0.6L2.34 -0.79L2.15 -0.96L1.93 -1.06L1.71 -1.12L1.47 -1.12L1.24 -1.07L1.03 -0.96L0.86 -0.78L0.73 -0.58L0.66 -0.34L0.64 -0.09L0.69 0.16L0.81 0.38L1.01 0.53L1.27 0.58L1.51 0.47L1.67 0.2L1.54 -0.05L1.34 0.09L1.43 0.2L1.36 0.28L1.24 0.35L1.09 0.33L0.96 0.24L0.88 0.08L0.85 -0.1L0.86 -0.29L0.93 -0.47L1.03 -0.62L1.16 -0.74L1.32 -0.81L1.5 -0.85L1.67 -0.85L1.84 -0.79L1.99 -0.7L2.11 -0.58L2.2 -0.42L2.27 -0.24L2.31 -0.07L2.32 0.12L2.3 0.31L2.26 0.5L2.19 0.68L2.11 0.84L2 0.97L1.87 1.08L1.71 1.18L1.54 1.26L1.37 1.32L1.2 1.36L1.02 1.37L0.85 1.35L0.7 1.29L0.58 1.2L0.48 1.07L0.41 0.9L0.37 0.72L0.35 0.52L0.33 0.31L0.33 0.11L0.35 -0.1L0.37 -0.32L0.39 -0.54L0.42 -0.75L0.45 -0.97L0.48 -1.19L0.51 -1.4L0.54 -1.62L0.56 -1.84L0.59 -2.06L0.61 -2.28L0.63 -2.5L0.66 -2.71L0.69 -2.93L0.73 -3.15L0.76 -3.36L0.81 -3.57L0.87 -3.77L0.95 -3.95L1.05 -4.08L1.16 -4.14L1.27 -4.08L1.33 -3.94L1.37 -3.75L1.39 -3.54L1.4 -3.33L1.4 -3.11L1.4 -2.89L1.4 -2.67L1.4 -2.45L1.39 -2.24L1.39 -2.02L1.38 -1.8L1.37 -1.58L1.37 -1.36L1.36 -1.14L1.35 -0.92L1.34 -0.7L1.34 -0.48L1.33 -0.26L1.32 -0.04L1.32 0.18L1.32 0.4L1.32 0.62L1.32 0.83L1.31 1.05L1.28 1.26L1.25 1.47L1.2 1.67L1.13 1.86L1.03 2.04L0.91 2.21L0.78 2.38L0.63 2.52ZM1.33 -0.23C1.21 -0.23 1.11 -0.13 1.11 0C1.11 0.13 1.21 0.23 1.33 0.23C1.45 0.23 1.55 0.13 1.55 0C1.55 -0.13 1.45 -0.23 1.33 -0.23Z";
+/** The eye of the G-clef spiral, in glyph-local sp. */
+export declare const G_CLEF_EYE: {
+    readonly x: 1.33;
+    readonly y: 0;
+};
+/** Bass clef body, anchored on the F line; the two dots straddle it. */
+export declare const F_CLEF = "M0.12 2.54L0.21 2.51L0.31 2.49L0.4 2.48L0.5 2.47L0.6 2.45L0.69 2.42L0.79 2.39L0.88 2.35L0.97 2.32L1.07 2.28L1.16 2.25L1.26 2.21L1.35 2.17L1.44 2.13L1.53 2.08L1.61 2.03L1.7 1.97L1.78 1.92L1.86 1.86L1.95 1.8L2.03 1.75L2.11 1.69L2.19 1.62L2.27 1.55L2.35 1.47L2.42 1.39L2.48 1.29L2.54 1.19L2.59 1.09L2.63 0.98L2.67 0.88L2.7 0.77L2.72 0.66L2.73 0.55L2.74 0.44L2.74 0.33L2.73 0.23L2.71 0.11L2.69 0L2.66 -0.12L2.61 -0.25L2.54 -0.38L2.45 -0.49L2.37 -0.58L2.27 -0.65L2.18 -0.73L2.07 -0.8L1.95 -0.87L1.82 -0.93L1.65 -0.98L1.46 -1L1.25 -0.97L1.08 -0.91L0.95 -0.84L0.84 -0.77L0.75 -0.7L0.66 -0.64L0.57 -0.58L0.48 -0.52L0.4 -0.46L0.32 -0.41L0.25 -0.36L0.19 -0.31L0.98 0.51L1.06 0.44L1.13 0.36L1.19 0.28L1.24 0.21L1.3 0.14L1.35 0.08L1.4 0.02L1.45 -0.04L1.5 -0.07L1.54 -0.1L1.54 -0.11L1.52 -0.12L1.52 -0.13L1.54 -0.13L1.59 -0.13L1.64 -0.11L1.7 -0.08L1.75 -0.04L1.81 0L1.86 0.03L1.9 0.06L1.93 0.09L1.96 0.13L1.99 0.18L2.01 0.25L2.03 0.31L2.04 0.39L2.05 0.46L2.05 0.54L2.06 0.61L2.06 0.68L2.05 0.76L2.04 0.83L2.03 0.9L2.01 0.97L1.98 1.03L1.94 1.09L1.9 1.15L1.85 1.21L1.8 1.28L1.75 1.35L1.7 1.41L1.64 1.48L1.57 1.54L1.51 1.61L1.44 1.67L1.37 1.72L1.3 1.77L1.23 1.82L1.15 1.88L1.08 1.93L1.01 1.99L0.93 2.04L0.85 2.09L0.77 2.14L0.69 2.18L0.61 2.22L0.52 2.26L0.44 2.3L0.35 2.35L0.27 2.4L0.18 2.45L0.1 2.48ZM0.58 -0.45C0.26 -0.45 0 -0.2 0 0.1C0 0.41 0.26 0.65 0.58 0.65C0.91 0.65 1.17 0.41 1.17 0.1C1.17 -0.2 0.91 -0.45 0.58 -0.45Z";
+/** The pair of F-clef dots, in glyph-local sp. */
+export declare const F_CLEF_DOTS: readonly [{
+    readonly x: 3.15;
+    readonly y: -0.5;
+    readonly r: 0.24;
+}, {
+    readonly x: 3.15;
+    readonly y: 0.5;
+    readonly r: 0.24;
+}];
+/** Eighth flag for an up stem, anchored on the stem tip. */
+export declare const FLAG_UP: string;
+/** Eighth flag for a down stem — the up flag mirrored through the stem tip. */
+export declare const FLAG_DOWN: string;
+/** Declared glyph extents in sp — the extent of the PATH DATA and nothing else,
+    one meaning per row, gated against the sampled paths in tests. Detached marks
+    (the F-clef dots) are advance, not path, and live in CLEF_ADVANCE below. */
+export declare const GLYPH_EXTENT: {
+    readonly gClef: {
+        readonly x0: 0;
+        readonly x1: 2.68;
+        readonly y0: -4.39;
+        readonly y1: 2.63;
+    };
+    readonly fClef: {
+        readonly x0: 0;
+        readonly x1: 2.74;
+        readonly y0: -1.05;
+        readonly y1: 2.54;
+    };
+    readonly flag: {
+        readonly x0: 0;
+        readonly x1: 1.07;
+        readonly y0: 0;
+        readonly y1: 3.2;
+    };
+    readonly flat: {
+        readonly x0: 0;
+        readonly x1: 0.7;
+        readonly y0: -1.78;
+        readonly y1: 0.7;
+    };
+    readonly sharp: {
+        readonly x0: 0;
+        readonly x1: 1.04;
+        readonly y0: -1.4;
+        readonly y1: 1.4;
+    };
+    readonly natural: {
+        readonly x0: 0;
+        readonly x1: 0.63;
+        readonly y0: -1.35;
+        readonly y1: 1.35;
+    };
+};
+/** How far right of the clef origin the whole clef reads, dots included. */
+export declare const CLEF_ADVANCE: {
+    readonly treble: 2.68;
+    readonly bass: number;
+};
+export declare const ACCIDENTAL_GLYPHS: {
+    readonly flat: string;
+    readonly sharp: string;
+    readonly natural: string;
+};

package/dist/components/music-staff/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MusicStaff } from "./MusicStaff.vue.js";
+export type { MusicStaffMaterial, MusicStaffMode, MusicStaffProps, } from "./MusicStaff.vue.js";
+export { engraveMusicStaff, musicPitchName, type MusicStaffGeometry, type MusicStaffNoteEvent, type MusicStaffNoteGeometry, type StaffAccidental, type StaffClef, } from "./staffGeometry.js";
+export { noteEventsFromParsedMidi, type ParsedMidiDocumentLike, type ParsedMidiNoteLike, type ParsedMidiTrackLike, } from "./midiAdapter.js";

package/dist/components/music-staff/midiAdapter.d.ts

@@ -0,0 +1,22 @@
+import type { MusicStaffNoteEvent } from "./staffGeometry.js";
+export interface ParsedMidiNoteLike {
+    midi: number;
+    ticks: number;
+    durationTicks: number;
+    name?: string;
+}
+export interface ParsedMidiTrackLike {
+    notes: readonly ParsedMidiNoteLike[];
+}
+export interface ParsedMidiDocumentLike {
+    header: {
+        ppq: number;
+    };
+    tracks: readonly ParsedMidiTrackLike[];
+}
+/**
+ * Adapt a parsed Standard MIDI document without coupling glass-ui to a parser.
+ * Tone.js `Midi`, Web MIDI importers, and server-side SMF readers satisfy this
+ * structural contract. Ticks convert to beats exactly once, here.
+ */
+export declare function noteEventsFromParsedMidi(midi: ParsedMidiDocumentLike): MusicStaffNoteEvent[];

package/dist/components/music-staff/staffGeometry.d.ts

@@ -0,0 +1,216 @@
+export type StaffAccidental = "sharp" | "flat" | "natural";
+export type StaffClef = "auto" | "treble" | "bass";
+export type StaffHead = "black" | "half" | "whole";
+/**
+ * The note contract: one timing axis, quarter-note beats. A parser converts its
+ * own units once (ticks / ppq) before it reaches the staff.
+ */
+export interface MusicStaffNoteEvent {
+    id: string;
+    midi: number;
+    /** Onset, in quarter-note beats from the quotation start. */
+    beat: number;
+    /** Sounding length, in quarter-note beats. */
+    beats: number;
+    accidental?: StaffAccidental;
+}
+export declare const METRICS: {
+    readonly staffLineThickness: 0.13;
+    readonly stemThickness: 0.12;
+    readonly ledgerThickness: 0.16;
+    readonly ledgerExtension: 0.4;
+    readonly stemLength: 3.5;
+    /** The stem rides the head's side, inset by half its own width: 0.53. */
+    readonly stemAttachX: number;
+    readonly stemAttachY: 0.168;
+    readonly beamThickness: 0.5;
+    readonly beamInboard: 0.75;
+    readonly beamMinStem: 2.5;
+    /** How far a beam slab reads past the outermost stem it joins. */
+    readonly beamOverhang: number;
+    readonly barlineThin: 0.16;
+    readonly barlineThick: 0.5;
+    readonly barlineGap: 0.4;
+    readonly dotRadius: 0.2;
+    readonly dotGap: 0.5;
+    readonly headHalfWidth: 0.59;
+    readonly wholeHalfWidth: 0.844;
+    /** Notehead ellipses — solved to the Bravura bboxes, declared once. */
+    readonly headTilt: -20;
+    readonly blackHeadRx: 0.6;
+    readonly blackHeadRy: 0.485;
+    readonly halfHeadRx: 0.52;
+    readonly halfHeadRy: 0.4;
+    readonly wholeHeadRy: 0.5;
+    readonly wholeCounterRx: 0.42;
+    readonly wholeCounterRy: 0.3;
+    readonly wholeCounterTilt: 55;
+    readonly clefX: 0.8;
+    readonly clefGap: 1.6;
+    readonly tail: 1.6;
+    readonly playheadRise: 1.4;
+    readonly pad: 1;
+};
+declare const RHYTHMS: readonly [{
+    readonly beats: 4;
+    readonly dots: 0;
+    readonly flags: 0;
+    readonly head: "whole";
+    readonly name: "whole";
+}, {
+    readonly beats: 3;
+    readonly dots: 1;
+    readonly flags: 0;
+    readonly head: "half";
+    readonly name: "dotted half";
+}, {
+    readonly beats: 2;
+    readonly dots: 0;
+    readonly flags: 0;
+    readonly head: "half";
+    readonly name: "half";
+}, {
+    readonly beats: 1.5;
+    readonly dots: 1;
+    readonly flags: 0;
+    readonly head: "black";
+    readonly name: "dotted quarter";
+}, {
+    readonly beats: 1;
+    readonly dots: 0;
+    readonly flags: 0;
+    readonly head: "black";
+    readonly name: "quarter";
+}, {
+    readonly beats: 0.75;
+    readonly dots: 1;
+    readonly flags: 1;
+    readonly head: "black";
+    readonly name: "dotted eighth";
+}, {
+    readonly beats: 0.5;
+    readonly dots: 0;
+    readonly flags: 1;
+    readonly head: "black";
+    readonly name: "eighth";
+}, {
+    readonly beats: 0.25;
+    readonly dots: 0;
+    readonly flags: 2;
+    readonly head: "black";
+    readonly name: "sixteenth";
+}, {
+    readonly beats: 0.125;
+    readonly dots: 0;
+    readonly flags: 3;
+    readonly head: "black";
+    readonly name: "thirty-second";
+}];
+export type MusicStaffRhythm = (typeof RHYTHMS)[number];
+/** The largest rhythm the sounding length covers; shorter than a 32nd clamps. */
+export declare function rhythmOf(beats: number): MusicStaffRhythm;
+export interface StaffSpelling {
+    /** Diatonic step index: octave * 7 + letter index, C0 = 0. */
+    step: number;
+    letter: string;
+    alter: -1 | 0 | 1;
+    octave: number;
+}
+/**
+ * The single authority for both staff position and spoken name. A glyph can no
+ * longer contradict its own label, because both read this one result.
+ */
+export declare function spell(midi: number, accidental?: StaffAccidental): StaffSpelling;
+export declare function musicPitchName(midi: number, accidental?: StaffAccidental): string;
+/** Diatonic steps above the bottom staff line. */
+export declare function staffPos(midi: number, clef: "treble" | "bass", accidental?: StaffAccidental): number;
+/** Gould proportional spacing with compression: the space a rhythmic gap earns. */
+export declare function advanceOf(beats: number): number;
+export interface MusicStaffNoteGeometry {
+    id: string;
+    midi: number;
+    beat: number;
+    beats: number;
+    accidental?: StaffAccidental;
+    staffPos: number;
+    x: number;
+    y: number;
+    head: StaffHead;
+    dots: number;
+    dotX: number;
+    dotY: number;
+    ledgerYs: number[];
+    accidentalGlyph?: StaffAccidental;
+    accidentalX: number;
+    revealDelayMs: number;
+    strikePhase: number;
+    pitchName: string;
+    rhythmName: string;
+}
+export interface MusicStaffStem {
+    id: string;
+    x: number;
+    y1: number;
+    y2: number;
+    up: boolean;
+    delayMs: number;
+}
+export interface MusicStaffFlag {
+    id: string;
+    x: number;
+    y: number;
+    up: boolean;
+    delayMs: number;
+}
+export interface MusicStaffBeam {
+    id: string;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    up: boolean;
+    level: 1 | 2 | 3;
+    delayMs: number;
+}
+export interface MusicStaffGeometry {
+    clef: "treble" | "bass";
+    /** Absolute y of the top staff line, after the content-derived offset. */
+    staffTop: number;
+    staffLines: number[];
+    widthSp: number;
+    heightSp: number;
+    viewBox: string;
+    clefX: number;
+    clefY: number;
+    noteX0: number;
+    contentEnd: number;
+    /** Reel period, in sp; loading engravings only. */
+    period: number;
+    /** Extra `<use>` copies of the ink layer, one per period; loading only. */
+    reelCopies: number;
+    /** Parked reading line, in sp; loading engravings only. */
+    readingX: number;
+    notes: MusicStaffNoteGeometry[];
+    stems: MusicStaffStem[];
+    flags: MusicStaffFlag[];
+    beams: MusicStaffBeam[];
+    barlines: {
+        x: number;
+        width: number;
+    }[];
+}
+export interface EngraveMusicStaffOptions {
+    clef?: StaffClef;
+    /** Beats per cycle; set only for the looping loading reel. */
+    loopBeats?: number;
+}
+/** Engrave one staff. Every extent below is derived from what is drawn. */
+export declare function engraveMusicStaff(source: readonly MusicStaffNoteEvent[], options?: EngraveMusicStaffOptions): MusicStaffGeometry;
+/**
+ * One composed phrase, in-staff by construction: paired eighths, a four-16th run
+ * that earns a double beam, a dotted note, a lone flag, and quarters. It is the
+ * loading surface's whole score — deliberate, not generated.
+ */
+export declare const LOADING_MOTIF: readonly MusicStaffNoteEvent[];
+export declare const LOADING_BEATS = 8;
+export {};

package/dist/components/music-staff/styles.css

@@ -0,0 +1 @@
+@layer components{.music-staff{--_music-staff-draw-duration: calc(0.52s * var(--motion-tempo));--_music-staff-space: var(--music-staff-space,0.5rem);--_music-staff-ink: var( --music-staff-ink,color-mix(in oklab,var(--foreground) 88%,transparent) );--_music-staff-accent: var(--music-staff-accent,var(--viz-chebyshev));--_music-staff-folio: var(--music-staff-folio,oklch(0.96 0.021 86));--_music-staff-loop-duration: var( --music-staff-loop-duration,calc(8s * var(--motion-tempo)) );--_music-staff-delay: 0ms;--_music-staff-rule-index: 0;margin: 0;color: var(--_music-staff-ink);}.music-staff__window{position: relative;color: inherit;}.music-staff[data-mode="score"] .music-staff__window{overflow-x: auto;overscroll-behavior-inline: contain;scrollbar-color: color-mix(in oklab,var(--_music-staff-accent) 46%,transparent) transparent;}.music-staff[data-mode="loading"] .music-staff__window{overflow: hidden;max-inline-size: calc(var(--_music-staff-space) * var(--_music-staff-width));}.music-staff[data-material="folio"] .music-staff__window{--glass-veil-ink: oklch(from var(--_music-staff-folio) 0.34 c h);border-radius: var(--radius-panel);color: var(--_music-staff-ink);}.music-staff__window:focus-visible{outline: 2px solid var(--_music-staff-accent);outline-offset: 3px;}.music-staff svg{position: relative;z-index: 1;display: block;width: calc(var(--_music-staff-space) * var(--_music-staff-width));height: calc(var(--_music-staff-space) * var(--_music-staff-height));}.music-staff__furniture{position: absolute;inset-block: 0;inset-inline-start: 0;z-index: 0;inline-size: max(100%,calc(var(--_music-staff-space) * var(--_music-staff-width)));pointer-events: none;}.music-staff__line,.music-staff__barline,.music-staff__reading{position: absolute;top: calc(var(--_music-staff-space) * var(--_music-staff-y));height: calc(var(--_music-staff-space) * var(--_music-staff-rise));background: currentcolor;}.music-staff__line{inset-inline: 0;opacity: 0.55;}.music-staff__barline,.music-staff__reading{inset-inline-start: calc(var(--_music-staff-space) * var(--_music-staff-x));width: calc(var(--_music-staff-space) * var(--_music-staff-run));}.music-staff__barline{opacity: 0.78;}.music-staff__reading{color: var(--_music-staff-accent);opacity: 0.62;}.music-staff__ledger,.music-staff__stem,.music-staff__beam,.music-staff__dot,.music-staff__head,.music-staff__flag,.music-staff__accidental,.music-staff__clef path,.music-staff__clef circle,.music-staff__playhead rect,.music-staff__playhead circle{fill: currentcolor;}.music-staff__ledger{opacity: 0.86;}.music-staff__head--open{fill: none;stroke: currentcolor;stroke-width: 0.16;}.music-staff__layer--accent,.music-staff__playhead{color: var(--_music-staff-accent);}.music-staff__playhead rect{opacity: 0.8;}.music-staff__playhead circle{opacity: 0.8;}.music-staff__playhead,.music-staff__clip-edge{transition: transform var(--spring-dock-duration) var(--spring-dock);}.music-staff__progress-ink{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: calc(var(--_music-staff-progress) * 100%);background-image: repeating-linear-gradient( to bottom,currentcolor 0 calc(var(--_music-staff-space) * 0.13),transparent calc(var(--_music-staff-space) * 0.13) var(--_music-staff-space) );background-repeat: no-repeat;background-position: 0 calc(var(--_music-staff-space) * var(--_music-staff-staff-top));background-size: 100% calc(var(--_music-staff-space) * 4.13);color: var(--_music-staff-accent);pointer-events: none;}.music-staff__seal{position: absolute;z-index: 2;inset-block-start: calc(var(--_music-staff-space) * var(--_music-staff-staff-top));inset-inline-start: auto;inset-inline-end: calc(var(--_music-staff-space) * 0.6);height: calc(var(--_music-staff-space) * 4);width: calc(var(--_music-staff-space) * 1.06);background-image: linear-gradient( to right,currentcolor 0 calc(var(--_music-staff-space) * 0.16),transparent calc(var(--_music-staff-space) * 0.16) calc(var(--_music-staff-space) * 0.56),currentcolor calc(var(--_music-staff-space) * 0.56) 100% );pointer-events: none;}@media (prefers-reduced-motion: no-preference){.music-staff__line{animation: music-staff-rule-wipe var(--_music-staff-draw-duration) var(--ease-out-expo) calc(28ms * var(--_music-staff-rule-index) * var(--motion-tempo)) both;}.music-staff__barline{animation: music-staff-bar-wipe var(--_music-staff-draw-duration) var(--ease-out-expo) calc(120ms * var(--motion-tempo)) both;}.music-staff[data-mode="score"] .music-staff__line{animation: music-staff-rule-wipe var(--_music-staff-draw-duration) var(--ease-out-expo) calc(28ms * var(--_music-staff-rule-index) * var(--motion-tempo)) both,music-staff-breath 5.2s var(--ease-standard) calc(260ms * var(--_music-staff-rule-index)) infinite alternate;}.music-staff__clef{animation: music-staff-bar-wipe var(--_music-staff-draw-duration) var(--ease-out-expo) calc(120ms * var(--motion-tempo)) both,music-staff-clef-settle var(--spring-present-duration) var(--spring-present) calc(300ms * var(--motion-tempo)) both;transform-box: fill-box;transform-origin: center;}.music-staff[data-mode="score"] .music-staff__note{animation: music-staff-note-land var(--spring-panel-duration) var(--spring-panel) var(--_music-staff-delay) both;transform-box: fill-box;transform-origin: center;}.music-staff__head,.music-staff__accidental,.music-staff__ledger,.music-staff__dot,.music-staff__flag{animation: music-staff-ink-in calc(120ms * var(--motion-tempo)) var(--ease-standard) var(--_music-staff-delay) both;}.music-staff__stem{animation: music-staff-grow-y var(--spring-dock-duration) var(--spring-dock) var(--_music-staff-delay) both;transform-box: fill-box;transform-origin: bottom;}.music-staff__stem:not([data-up]){transform-origin: top;}.music-staff__beam{animation: music-staff-grow-x var(--spring-dock-duration) var(--spring-dock) var(--_music-staff-delay) both;transform-box: fill-box;transform-origin: left;}.music-staff__playhead circle{animation: music-staff-bead 5.2s var(--ease-standard) infinite alternate;transform-box: fill-box;transform-origin: center;}.music-staff[data-mode="loading"] .music-staff__reel{animation: music-staff-reel var(--_music-staff-loop-duration) linear infinite;}.music-staff[data-mode="loading"] .music-staff__note{animation: music-staff-strike var(--_music-staff-loop-duration) linear infinite;transform-box: fill-box;transform-origin: center;}.music-staff[data-sealed] .music-staff__reel{animation-play-state: paused;}.music-staff[data-sealed] .music-staff__note{animation: none;}.music-staff[data-sealed] .music-staff__transport{animation: music-staff-settle var(--spring-panel-duration) var(--spring-panel) both;}.music-staff[data-sealed] .music-staff__seal{animation: music-staff-seal-wipe var(--_music-staff-draw-duration) var(--ease-out-expo) both;}}@media (prefers-reduced-motion: reduce){.music-staff[data-mode="loading"] .music-staff__line{animation: music-staff-breath 5.2s var(--ease-standard) calc(260ms * var(--_music-staff-rule-index)) infinite alternate;}.music-staff__playhead{transition-duration: var(--duration-fast);}}}@keyframes music-staff-rule-wipe{from{clip-path: inset(0 100% 0 0);}to{clip-path: inset(0);}}@keyframes music-staff-bar-wipe{from{clip-path: inset(100% 0 0 0);}to{clip-path: inset(0);}}@keyframes music-staff-seal-wipe{from{clip-path: inset(100% 0 0 0);}to{clip-path: inset(0);}}@keyframes music-staff-clef-settle{from{transform: scale(0.96);}to{transform: none;}}@keyframes music-staff-note-land{from{transform: translateY(-0.9px) scale(0.86);}to{transform: none;}}@keyframes music-staff-grow-y{from{transform: scaleY(0);}to{transform: none;}}@keyframes music-staff-grow-x{from{transform: scaleX(0);}to{transform: none;}}@keyframes music-staff-ink-in{from{opacity: 0;}to{opacity: 1;}}@keyframes music-staff-breath{from{opacity: 0.49;}to{opacity: 0.61;}}@keyframes music-staff-bead{from{opacity: 0.7;transform: scale(1);}to{opacity: 0.9;transform: scale(1.06);}}@keyframes music-staff-reel{to{transform: translateX(calc(-1px * var(--_music-staff-period)));}}@keyframes music-staff-settle{from{transform: translateX(-0.5px);}to{transform: none;}}@keyframes music-staff-strike{0%{transform: scale(1);color: var(--_music-staff-ink);}1.2%{transform: scale(1.08);color: var(--_music-staff-accent);}1.88%{transform: scale(1.075);}2.56%{transform: scale(1.065);}3.92%{transform: scale(1.04);}4.6%{transform: scale(1.029);}5.96%{transform: scale(1.013);}8%{transform: scale(1);color: var(--_music-staff-ink);}100%{transform: scale(1);color: var(--_music-staff-ink);}}