@mkbabb/glass-ui 7.0.0 → 8.0.0

package/dist/components/labeled-field/index.d.ts

@@ -1,6 +1,5 @@
-export { default as LabeledField } from "./LabeledField.vue";
-export { default as LabeledInput } from "./LabeledInput.vue";
-export { default as LabeledSelect } from "./LabeledSelect.vue";
-export { default as LabeledSlider } from "./LabeledSlider.vue";
-export { default as LabeledSwitch } from "./LabeledSwitch.vue";
-export type { LabeledFieldCommonProps, LabeledFieldErrorLive, LabeledFieldLayout, LabeledFieldProps, LabeledFieldSlotProps, LabeledInputProps, LabeledSelectProps, LabeledSliderProps, LabeledSwitchProps, } from "./types";
+export { default as LabeledField } from "./LabeledField.vue.js";
+export { default as LabeledInput } from "./LabeledInput.vue.js";
+export { default as LabeledSlider } from "./LabeledSlider.vue.js";
+export { default as LabeledSwitch } from "./LabeledSwitch.vue.js";
+export type { LabeledFieldCommonProps, LabeledFieldErrorLive, LabeledFieldLayout, LabeledFieldProps, LabeledFieldSlotProps, LabeledInputProps, LabeledSliderProps, LabeledSwitchProps, } from "./types.js";

package/dist/components/labeled-field/types.d.ts

@@ -1,7 +1,7 @@
-import type { InputProps } from "../input";
-import type { LabelRequirement } from "../label";
-import type { SliderProps } from "../slider";
-import type { SwitchProps } from "../switch";
+import type { InputNativeAttrs, InputProps } from "../input/index.js";
+import type { LabelRequirement } from "../label/index.js";
+import type { SliderProps } from "../slider/index.js";
+import type { SwitchProps } from "../switch/index.js";
 export type LabeledFieldLayout = "default" | "horizontal";
 export type LabeledFieldErrorLive = "off" | "polite" | "assertive";
 export interface LabeledFieldCommonProps {
@@ -32,16 +32,7 @@ export interface LabeledFieldSlotProps {
     disabled: boolean;
     required: boolean;
 }
-export type LabeledInputProps = Omit<InputProps, "class"> & LabeledFieldCommonProps;
-export interface LabeledSelectProps extends LabeledFieldCommonProps {
-    modelValue: string;
-    items: readonly string[];
-    open?: boolean;
-    placeholder?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-}
+export type LabeledInputProps = Omit<InputProps, "class"> & InputNativeAttrs & LabeledFieldCommonProps;
 export type LabeledSliderProps = Omit<SliderProps, "class" | "modelValue"> & LabeledFieldCommonProps & {
     modelValue: number;
 };

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

@@ -1,5 +1,5 @@
-import type { Direction } from "../_shared/primitive";
-import type { MenuTrigger } from "./useMenuTrigger";
+import type { Direction } from "../_shared/primitive.js";
+import type { MenuTrigger } from "./context.js";
 interface DropdownMenuBaseProps {
     /** Logical reading direction for roving focus and submenu keys. */
     dir?: Direction;

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import type { CheckedState } from "../_shared/selection";
+import type { CheckedState } from "../_shared/selection.js";
 export interface DropdownMenuCheckboxItemProps {
     modelValue?: CheckedState;
     disabled?: boolean;
@@ -20,8 +20,8 @@ declare const __VLS_base: import("vue").DefineComponent<DropdownMenuCheckboxItem
     onSelect?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    disabled: boolean;
     modelValue: CheckedState;
+    disabled: boolean;
 }, {}, {}, {}, 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/{dropdown-menu → menu}/DropdownMenuContent.vue.d.ts

@@ -1,10 +1,8 @@
 import { type HTMLAttributes } from "vue";
-import type { Surface } from "../_shared/axes";
-import type { FloatingPlacementProps } from "../_shared/floating";
-import type { FocusOutsideEvent, PointerDownOutsideEvent } from "../_shared/interaction";
+import type { FocusOutsideEvent, PointerDownOutsideEvent } from "../_shared/interaction.js";
+import { type FloatingPlacementProps } from "../_shared/overlay/index.js";
 export interface DropdownMenuContentProps extends FloatingPlacementProps {
     class?: HTMLAttributes["class"];
-    surface?: Surface;
 }
 export interface DropdownMenuContentEmits {
     escapeKeyDown: [event: KeyboardEvent];
@@ -29,11 +27,10 @@ declare const __VLS_base: import("vue").DefineComponent<DropdownMenuContentProps
     onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
-    side: import("../_shared/floating").FloatingSide;
+    align: import("../_shared/overlay/index.js").FloatingAlign;
+    side: import("../_shared/overlay/index.js").FloatingSide;
     sideOffset: number;
-    align: import("../_shared/floating").FloatingAlign;
     alignOffset: number;
-    surface: Surface;
 }, {}, {}, {}, 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/{dropdown-menu → menu}/DropdownMenuRadioGroup.vue.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import type { SelectionValue } from "../_shared/selection";
+import type { SelectionValue } from "../_shared/selection.js";
 export interface DropdownMenuRadioGroupProps {
     modelValue?: SelectionValue;
     class?: HTMLAttributes["class"];

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import type { SelectionValue } from "../_shared/selection";
+import type { SelectionValue } from "../_shared/selection.js";
 export interface DropdownMenuRadioItemProps {
     value: SelectionValue;
     disabled?: boolean;

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[];