@pathscale/ui 2.7.2 → 2.7.3

package/dist/components/input/Input.css

@@ -46,16 +46,23 @@
   }
 
   @media (hover: hover) {
-    .input-control:hover:not(.input-control--disabled):not(.input-control--invalid):not(:focus-within) {
+    .input-control:hover:not(.input-control--disabled):not(
+        .input-control--invalid
+      ):not(:focus-within) {
       background-color: var(--color-base-200);
-      border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
+      border-color: color-mix(
+        in oklab,
+        var(--color-base-content) 22%,
+        transparent
+      );
     }
   }
 
   .input-control:focus-within {
     border-color: var(--color-accent);
     background-color: var(--color-base-100);
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--color-accent) 24%, transparent);
   }
 
   .input-control--invalid,
@@ -66,7 +73,8 @@
 
   .input-control--invalid:focus-within,
   .input-control[data-invalid="true"]:focus-within {
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 24%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--color-error) 24%, transparent);
   }
 
   .input-control--disabled,
@@ -132,7 +140,8 @@
     pointer-events: none;
   }
 
-  .input__icon > :is(button, [role="button"], a, [tabindex]):not([tabindex="-1"]) {
+  .input__icon
+    > :is(button, [role="button"], a, [tabindex]):not([tabindex="-1"]) {
     pointer-events: auto;
   }
 

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

@@ -1,3 +1,3 @@
 import Input from "./Input.generated";
-export type { InputProps, InputSize, InputRootProps, InputFieldProps, InputLabelProps, InputHelperProps, } from "./Input.generated";
+export type { InputFieldProps, InputHelperProps, InputLabelProps, InputProps, InputRootProps, InputSize, } from "./Input.generated";
 export default Input;

package/dist/components/input-otp/InputOTP.css

@@ -40,7 +40,8 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-field, 0.75rem);
-    border: var(--border-width-field, 1px) solid var(--color-field-border, var(--color-base-300));
+    border: var(--border-width-field, 1px) solid
+      var(--color-field-border, var(--color-base-300));
     background-color: var(--color-field, var(--color-base-100));
     color: var(--color-field-foreground, var(--color-base-content));
     font-size: 0.875rem;
@@ -65,7 +66,10 @@
   @media (hover: hover) {
     .input-otp__slot:hover:not([data-disabled="true"]) {
       background-color: var(--color-field-hover, var(--color-base-200));
-      border-color: var(--color-field-border-hover, color-mix(in oklab, var(--color-base-content) 22%, transparent));
+      border-color: var(
+        --color-field-border-hover,
+        color-mix(in oklab, var(--color-base-content) 22%, transparent)
+      );
     }
   }
 
@@ -111,7 +115,10 @@
     width: 2px;
     height: 1rem;
     border-radius: 4px;
-    background-color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    background-color: var(
+      --color-field-placeholder,
+      color-mix(in oklab, var(--color-base-content) 45%, transparent)
+    );
     animation: input-otp-caret-blink 1.1s step-end infinite;
   }
 

package/dist/components/input-otp/index.d.ts

@@ -1 +1 @@
-export { default, InputOTP, InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator, REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS, type InputOTPProps, type InputOTPRootProps, type InputOTPGroupProps, type InputOTPSlotProps, type InputOTPSeparatorProps, type InputOTPVariant, } from "./InputOTP.generated";
+export { default, InputOTP, InputOTPGroup, type InputOTPGroupProps, type InputOTPProps, InputOTPRoot, type InputOTPRootProps, InputOTPSeparator, type InputOTPSeparatorProps, InputOTPSlot, type InputOTPSlotProps, type InputOTPVariant, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, } from "./InputOTP.generated";

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

@@ -1 +1 @@
-export { default, KbdRoot, KbdAbbr, KbdContent, kbdKeysMap, kbdKeysLabelMap, type KbdProps, type KbdRootProps, type KbdAbbrProps, type KbdContentProps, type KbdVariant, type KbdKey, } from "./Kbd.generated";
+export { default, KbdAbbr, type KbdAbbrProps, KbdContent, type KbdContentProps, type KbdKey, type KbdProps, KbdRoot, type KbdRootProps, type KbdVariant, kbdKeysLabelMap, kbdKeysMap, } from "./Kbd.generated";

package/dist/components/label/Label.css

@@ -7,9 +7,12 @@
   }
 
   .label--required::after,
-  [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([role="checkboxgroup"])
+  [data-required="true"]:not([role="group"]):not([role="radiogroup"]):not(
+      [role="checkboxgroup"]
+    )
     > .label::after,
-  [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"]) > .label::after {
+  [data-required="true"]:not([data-slot="radio"]):not([data-slot="checkbox"])
+    > .label::after {
     margin-inline-start: 0.125rem;
     color: var(--color-danger);
     content: "*";

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

@@ -1 +1 @@
-export { default, Label, LabelRoot, type LabelProps, type LabelRootProps, } from "./Label.generated";
+export { default, Label, type LabelProps, LabelRoot, type LabelRootProps, } from "./Label.generated";

package/dist/components/language-switcher/LanguageSwitcher.css

@@ -10,7 +10,8 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-field);
-    border: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
+    border: var(--border, 1px) solid
+      color-mix(in oklab, var(--color-base-content) 18%, transparent);
     background: var(--color-base-100);
     color: var(--color-base-content);
     padding: 0.25rem 0.5rem;
@@ -28,7 +29,8 @@
   }
 
   .language-switcher__trigger:focus-visible {
-    outline: var(--focus-ring-width, 2px) solid color-mix(in oklab, var(--color-primary) 70%, transparent);
+    outline: var(--focus-ring-width, 2px) solid
+      color-mix(in oklab, var(--color-primary) 70%, transparent);
     outline-offset: var(--focus-ring-offset, 2px);
   }
 

package/dist/components/language-switcher/createI18n.d.ts

@@ -1,5 +1,5 @@
-import { type FlowComponent } from "solid-js";
 import type { JSX } from "@solidjs/web";
+import { type FlowComponent } from "solid-js";
 export interface Language {
     code: string;
     name: string;

package/dist/components/language-switcher/index.d.ts

@@ -1,3 +1,3 @@
-export { default as LanguageSwitcher } from "./LanguageSwitcher.generated";
+export { createI18n, I18nContext, type I18nContextValue, type I18nOptions, I18nProvider, type I18nProviderProps, type I18nStore, type Language, useI18n, } from "./createI18n";
 export type { LanguageSwitcherProps } from "./LanguageSwitcher.generated";
-export { createI18n, I18nProvider, I18nContext, useI18n, type I18nStore, type I18nOptions, type I18nContextValue, type I18nProviderProps, type Language, } from "./createI18n";
+export { default as LanguageSwitcher } from "./LanguageSwitcher.generated";

package/dist/components/language-switcher/index.js

@@ -1,2 +1,2 @@
-export { default as LanguageSwitcher } from "./LanguageSwitcher.generated.js";
 export { I18nContext, I18nProvider, createI18n, useI18n } from "./createI18n.js";
+export { default as LanguageSwitcher } from "./LanguageSwitcher.generated.js";

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

@@ -1 +1 @@
-export { default, LinkRoot, LinkIcon, type LinkProps, type LinkRootProps, type LinkIconProps, type LinkVariant, type LinkUnderline, } from "./Link.generated";
+export { default, LinkIcon, type LinkIconProps, type LinkProps, LinkRoot, type LinkRootProps, type LinkUnderline, type LinkVariant, } from "./Link.generated";

package/dist/components/list-box/ListBox.css

@@ -118,14 +118,18 @@
     }
   }
 
-  .list-box-item[aria-selected="true"] [data-slot="listbox-item-indicator--checkmark"],
-  .list-box-item[data-selected="true"] [data-slot="listbox-item-indicator--checkmark"] {
+  .list-box-item[aria-selected="true"]
+    [data-slot="listbox-item-indicator--checkmark"],
+  .list-box-item[data-selected="true"]
+    [data-slot="listbox-item-indicator--checkmark"] {
     transition: stroke-dashoffset 250ms linear;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .list-box-item[aria-selected="true"] [data-slot="listbox-item-indicator--checkmark"],
-    .list-box-item[data-selected="true"] [data-slot="listbox-item-indicator--checkmark"] {
+    .list-box-item[aria-selected="true"]
+      [data-slot="listbox-item-indicator--checkmark"],
+    .list-box-item[data-selected="true"]
+      [data-slot="listbox-item-indicator--checkmark"] {
       transition: none;
     }
   }

package/dist/components/list-box/index.d.ts

@@ -1,6 +1,6 @@
 import ListBoxRoot from "./ListBox.generated";
-import ListBoxItem, { ListBoxItemIndicator, ListBoxItemRoot, type ListBoxItemIndicatorProps, type ListBoxItemProps, type ListBoxItemRenderProps, type ListBoxItemRootProps } from "./ListBoxItem.generated";
-import ListBoxSection, { ListBoxSectionRoot, type ListBoxSectionProps, type ListBoxSectionRootProps } from "./ListBoxSection.generated";
+import ListBoxItem, { ListBoxItemIndicator, type ListBoxItemIndicatorProps, type ListBoxItemProps, type ListBoxItemRenderProps, ListBoxItemRoot, type ListBoxItemRootProps } from "./ListBoxItem.generated";
+import ListBoxSection, { type ListBoxSectionProps, ListBoxSectionRoot, type ListBoxSectionRootProps } from "./ListBoxSection.generated";
 declare const ListBox: import("solid-js").Component<import("./ListBox.generated").ListBoxRootProps<unknown>> & {
     Root: import("solid-js").Component<import("./ListBox.generated").ListBoxRootProps<unknown>>;
     Item: import("solid-js").Component<ListBoxItemProps> & {
@@ -11,7 +11,7 @@ declare const ListBox: import("solid-js").Component<import("./ListBox.generated"
     Section: import("solid-js").Component<ListBoxSectionProps>;
 };
 export default ListBox;
-export { ListBox, ListBoxRoot, ListBoxItem, ListBoxItemRoot, ListBoxItemIndicator, ListBoxSection, ListBoxSectionRoot, };
-export type { ListBoxProps, ListBoxRootProps } from "./ListBox.generated";
 export type { ListBoxSelectionMode, ListBoxVariant } from "./context";
-export type { ListBoxItemProps, ListBoxItemRootProps, ListBoxItemIndicatorProps, ListBoxItemRenderProps, ListBoxSectionProps, ListBoxSectionRootProps, };
+export type { ListBoxProps, ListBoxRootProps } from "./ListBox.generated";
+export type { ListBoxItemIndicatorProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxItemRootProps, ListBoxSectionProps, ListBoxSectionRootProps, };
+export { ListBox, ListBoxItem, ListBoxItemIndicator, ListBoxItemRoot, ListBoxRoot, ListBoxSection, ListBoxSectionRoot, };

package/dist/components/live-chat/LiveChat.css

@@ -12,7 +12,8 @@
     border: 0;
     background: var(--color-primary);
     color: var(--color-primary-content);
-    box-shadow: 0 10px 20px color-mix(in oklab, var(--color-base-content) 16%, transparent);
+    box-shadow: 0 10px 20px
+      color-mix(in oklab, var(--color-base-content) 16%, transparent);
     transition:
       transform 200ms ease,
       box-shadow 200ms ease,
@@ -20,7 +21,8 @@
   }
 
   .live-chat-bubble:hover {
-    box-shadow: 0 14px 28px color-mix(in oklab, var(--color-base-content) 22%, transparent);
+    box-shadow: 0 14px 28px
+      color-mix(in oklab, var(--color-base-content) 22%, transparent);
   }
 
   .live-chat-bubble:active {
@@ -28,7 +30,8 @@
   }
 
   .live-chat-bubble:focus-visible {
-    outline: var(--focus-ring-width, 2px) solid color-mix(in oklab, var(--color-primary) 72%, transparent);
+    outline: var(--focus-ring-width, 2px) solid
+      color-mix(in oklab, var(--color-primary) 72%, transparent);
     outline-offset: var(--focus-ring-offset, 2px);
   }
 
@@ -87,7 +90,8 @@
     flex-direction: column;
     overflow: hidden;
     background: var(--color-base-100);
-    box-shadow: 0 30px 70px color-mix(in oklab, var(--color-base-content) 18%, transparent);
+    box-shadow: 0 30px 70px
+      color-mix(in oklab, var(--color-base-content) 18%, transparent);
   }
 
   .live-chat-panel__header {
@@ -127,7 +131,11 @@
   }
 
   .live-chat-panel__close-button:hover {
-    background: color-mix(in oklab, var(--color-primary-content) 10%, transparent);
+    background: color-mix(
+      in oklab,
+      var(--color-primary-content) 10%,
+      transparent
+    );
   }
 
   .live-chat-panel__messages {
@@ -251,7 +259,8 @@
     height: 1rem;
     border-radius: var(--radius-pill, 9999px);
     display: inline-block;
-    border: 2px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
+    border: 2px solid
+      color-mix(in oklab, var(--color-primary-content) 30%, transparent);
     border-top-color: var(--color-primary-content);
     animation: live-chat-spin 0.7s linear infinite;
   }

package/dist/components/live-chat/index.d.ts

@@ -1,5 +1,5 @@
-export { default as LiveChatBubble } from "./LiveChatBubble.generated";
 export type { LiveChatBubbleProps } from "./LiveChatBubble.generated";
-export { default as LiveChatPanel } from "./LiveChatPanel.generated";
+export { default as LiveChatBubble } from "./LiveChatBubble.generated";
 export type { LiveChatPanelProps } from "./LiveChatPanel.generated";
-export type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";
+export { default as LiveChatPanel } from "./LiveChatPanel.generated";
+export type { ChatMessage, SendMessagePayload, SendMessageResponse, } from "./types";

package/dist/components/menu/Menu.css

@@ -86,14 +86,18 @@
 
   .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"],
   .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"],
-  .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"] {
+  .menu-item[data-selected="true"]
+    [data-slot="menu-item-indicator--checkmark"] {
     transition: stroke-dashoffset 100ms linear;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .menu-item[aria-checked="true"] [data-slot="menu-item-indicator--checkmark"],
-    .menu-item[aria-selected="true"] [data-slot="menu-item-indicator--checkmark"],
-    .menu-item[data-selected="true"] [data-slot="menu-item-indicator--checkmark"] {
+    .menu-item[aria-checked="true"]
+      [data-slot="menu-item-indicator--checkmark"],
+    .menu-item[aria-selected="true"]
+      [data-slot="menu-item-indicator--checkmark"],
+    .menu-item[data-selected="true"]
+      [data-slot="menu-item-indicator--checkmark"] {
       transition: none;
     }
   }
@@ -122,7 +126,10 @@
     transform: translateY(-50%);
     align-items: center;
     justify-content: center;
-    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
+    color: var(
+      --color-muted,
+      color-mix(in oklab, var(--color-base-content) 55%, transparent)
+    );
     transition: all 250ms ease;
   }
 
@@ -142,12 +149,16 @@
     height: 0.625rem;
   }
 
-  .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
+  .menu-item[data-selection-mode="multiple"]
+    .menu-item__indicator
+    [data-slot="menu-item-indicator--checkmark"] {
     transition: all 300ms ease;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--checkmark"] {
+    .menu-item[data-selection-mode="multiple"]
+      .menu-item__indicator
+      [data-slot="menu-item-indicator--checkmark"] {
       transition: none;
     }
   }
@@ -159,18 +170,25 @@
     opacity: 0;
   }
 
-  .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
+  .menu-item[data-selection-mode="multiple"]
+    .menu-item__indicator
+    [data-slot="menu-item-indicator--dot"] {
     transition: all 250ms ease;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .menu-item[data-selection-mode="multiple"] .menu-item__indicator [data-slot="menu-item-indicator--dot"] {
+    .menu-item[data-selection-mode="multiple"]
+      .menu-item__indicator
+      [data-slot="menu-item-indicator--dot"] {
       transition: none;
     }
   }
 
   .menu-item__indicator--submenu {
-    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
+    color: var(
+      --color-muted,
+      color-mix(in oklab, var(--color-base-content) 55%, transparent)
+    );
   }
 
   .menu-item__indicator--submenu svg {

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

@@ -1,4 +1,4 @@
-export { default, Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, MenuSection, MenuSectionRoot, type MenuProps, type MenuRootProps, type MenuSelectionMode, } from "./Menu.generated";
+export { default, Menu, MenuItem, MenuItemIndicator, MenuItemRoot, type MenuProps, MenuRoot, type MenuRootProps, MenuSection, MenuSectionRoot, type MenuSelectionMode, } from "./Menu.generated";
+export type { MenuItemIndicatorProps, MenuItemProps, MenuItemRenderProps, MenuItemRootProps, MenuItemSubmenuIndicatorProps, MenuItemVariant, } from "./MenuItem.generated";
 export { MenuItemSubmenuIndicator } from "./MenuItem.generated";
-export type { MenuItemProps, MenuItemRootProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps, MenuItemRenderProps, MenuItemVariant, } from "./MenuItem.generated";
 export type { MenuSectionProps, MenuSectionRootProps, } from "./MenuSection.generated";

package/dist/components/metal-border/engine/color.js

@@ -1,5 +1,5 @@
 function hexToRgb(hex) {
-    let h = hex.replace('#', '');
+    let h = hex.replace("#", "");
     if (3 === h.length) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
     return [
         parseInt(h.slice(0, 2), 16) / 255,

package/dist/components/metal-border/engine/glow/geometry.d.ts

@@ -5,13 +5,13 @@
  * generation, SVG filter/mask construction, and HSV colour helpers.
  * No state — every function is a pure transform.
  */
-import { PERIM_SAMPLES } from '../perfConfig';
+import { PERIM_SAMPLES } from "../perfConfig";
 export { PERIM_SAMPLES };
 export interface GlowOptions {
     width: number;
     height: number;
     cornerRadius: number;
-    kind: 'pill' | 'circle';
+    kind: "pill" | "circle";
     /** Master multiplier for absolute SVG units (stroke widths, blur,
      *  fade-circle radius). 1 is the canonical 1× rendering. Set to 2 when
      *  the host element is rendered at a 2× layout (e.g. CSS zoom: 2) so
@@ -26,10 +26,10 @@ export interface PerimSample extends Pt {
     arc: number;
 }
 export declare function rrPerim(w: number, h: number, r: number): number;
-export declare function shapePerim(w: number, h: number, r: number, kind: 'pill' | 'circle'): number;
-export declare function sampleAtArc(s: number, w: number, h: number, r: number, inset: number, outward: number, kind: 'pill' | 'circle', out?: Pt): Pt;
+export declare function shapePerim(w: number, h: number, r: number, kind: "pill" | "circle"): number;
+export declare function sampleAtArc(s: number, w: number, h: number, r: number, inset: number, outward: number, kind: "pill" | "circle", out?: Pt): Pt;
 export declare function buildStaticBlobPath(halfLen: number, segments: number): string;
-export declare function tangentAngleAtArc(s: number, w: number, h: number, r: number, inset: number, kind: 'pill' | 'circle'): number;
+export declare function tangentAngleAtArc(s: number, w: number, h: number, r: number, inset: number, kind: "pill" | "circle"): number;
 export declare function smoothstep(a: number, b: number, x: number): number;
 export declare function buildPerimTable(opts: GlowOptions): PerimSample[];
 export declare function buildSvgMarkup(opts: GlowOptions, p: string): string;

package/dist/components/metal-border/engine/glow/geometry.js

@@ -11,7 +11,7 @@ function rrPerim(w, h, r) {
     return 2 * Math.max(0, w - 2 * rr) + 2 * Math.max(0, h - 2 * rr) + 2 * Math.PI * rr;
 }
 function shapePerim(w, h, r, kind) {
-    if ('circle' === kind) return 2 * Math.PI * Math.max(0, Math.min(r, Math.min(w, h) / 2));
+    if ("circle" === kind) return 2 * Math.PI * Math.max(0, Math.min(r, Math.min(w, h) / 2));
     return rrPerim(w, h, r);
 }
 function sampleAtArc(s, w, h, r, inset, outward, kind, out) {
@@ -20,7 +20,7 @@ function sampleAtArc(s, w, h, r, inset, outward, kind, out) {
         y: 0
     };
     const rr = Math.max(0, Math.min(r, Math.min(w, h) / 2));
-    if ('circle' === kind) {
+    if ("circle" === kind) {
         const perim = 2 * Math.PI * rr;
         if (perim <= 0.0001) {
             o.x = 0.5 * w;
@@ -92,10 +92,10 @@ function sampleAtArc(s, w, h, r, inset, outward, kind, out) {
 }
 function buildStaticBlobPath(halfLen, segments) {
     const step = 2 * halfLen / segments;
-    let d = '';
+    let d = "";
     for(let i = 0; i <= segments; i++){
         const x = -halfLen + i * step;
-        d += (0 === i ? 'M ' : 'L ') + x.toFixed(3) + ' 0 ';
+        d += (0 === i ? "M " : "L ") + x.toFixed(3) + " 0 ";
     }
     return d;
 }
@@ -136,7 +136,7 @@ function buildPerimTable(opts) {
 function buildSvgMarkup(opts, p) {
     const { width: W, height: H, cornerRadius: R } = opts;
     const s = opts.scale ?? 1;
-    const ringInset = 'circle' === opts.kind ? 2 : 1;
+    const ringInset = "circle" === opts.kind ? 2 : 1;
     const innerR = Math.max(0, R - ringInset);
     const fX = (-200 * s).toFixed(0), fY = fX;
     const fW = (540 * s).toFixed(0), fH = (440 * s).toFixed(0);
@@ -145,7 +145,7 @@ function buildSvgMarkup(opts, p) {
     const sw = (n)=>(n * s).toFixed(3);
     const sd = (n)=>(n * s).toFixed(3);
     return [
-        '<defs>',
+        "<defs>",
         `<filter id="${p}_bXl" ${fr}><feGaussianBlur stdDeviation="${sd(8.4)}"/></filter>`,
         `<filter id="${p}_bLg" ${fr}><feGaussianBlur stdDeviation="${sd(4.8)}"/></filter>`,
         `<filter id="${p}_bMd" ${fr}><feGaussianBlur stdDeviation="${sd(2.1)}"/></filter>`,
@@ -155,7 +155,7 @@ function buildSvgMarkup(opts, p) {
         `<radialGradient id="${p}_fg" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="white"/><stop offset="0.30" stop-color="white"/><stop offset="0.65" stop-color="#404040"/><stop offset="1" stop-color="black"/></radialGradient>`,
         `<mask id="${p}_fm" maskUnits="userSpaceOnUse" ${fRect}><rect ${fRect} fill="black"/><circle id="${p}_fc" cx="0" cy="0" r="${(EXTRA_FADE_R * s).toFixed(3)}" fill="url(#${p}_fg)"/></mask>`,
         `<mask id="${p}_rm" maskUnits="userSpaceOnUse" ${fRect}><rect ${fRect} fill="#808080"/><rect x="0" y="0" width="${W}" height="${H}" rx="${R}" ry="${R}" fill="white"/><rect x="${ringInset}" y="${ringInset}" width="${W - 2 * ringInset}" height="${H - 2 * ringInset}" rx="${innerR}" ry="${innerR}" fill="black"/></mask>`,
-        '</defs>',
+        "</defs>",
         `<g id="${p}_h" mask="url(#${p}_rm)" opacity="0">`,
         `<rect ${fRect} fill="none" pointer-events="none"/>`,
         `<g id="${p}_hI" stroke="white">`,
@@ -163,14 +163,14 @@ function buildSvgMarkup(opts, p) {
         `<path id="${p}_pLg" stroke-width="${sw(15.6)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.595" filter="url(#${p}_bLg)"/>`,
         `<path id="${p}_pMd" stroke-width="${sw(7.2)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${p}_bMd)"/>`,
         `<path id="${p}_pSm" stroke-width="${sw(3.0)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${p}_bSm)"/>`,
-        '</g></g>',
+        "</g></g>",
         `<g id="${p}_e" mask="url(#${p}_rm)" opacity="0">`,
         `<rect ${fRect} fill="none" pointer-events="none"/>`,
         `<g mask="url(#${p}_fm)">`,
         `<g id="${p}_eI" stroke="white">`,
         `<path id="${p}_eO" stroke-width="${sw(EXTRA_STROKE_OUTER)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.85" filter="url(#${p}_ebO)"/>`,
         `<path id="${p}_eC" stroke-width="${sw(EXTRA_STROKE_CORE)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="1.0" filter="url(#${p}_ebC)"/>`,
-        '</g></g></g>'
-    ].join('');
+        "</g></g></g>"
+    ].join("");
 }
 export { PERIM_SAMPLES, buildPerimTable, buildStaticBlobPath, buildSvgMarkup, rrPerim, sampleAtArc, shapePerim, smoothstep, tangentAngleAtArc };

package/dist/components/metal-border/engine/glow/glow.d.ts

@@ -1,7 +1,19 @@
-import type { MetalFxInstance, ShaderRGB } from '../renderer/core';
-import { type Tween } from '../tween';
-import { type GlowOptions, type PerimSample } from './geometry';
-export type { GlowOptions } from './geometry';
+/**
+ * SVG glow overlay — a luminance-driven halo that tracks the brightest point
+ * on the shader's perimeter.
+ *
+ * How it works:
+ *   1. Samples luminance at N points around the component's perimeter.
+ *   2. A state machine tracks which perimeter point is brightest, with dwell
+ *      timers and fade-in/out transitions when relocating to a new hotspot.
+ *   3. Static SVG path elements (blurred strokes at multiple radii) are
+ *      positioned at the current hotspot via CSS transform.
+ *   4. The stroke color is tinted to match the shader's color at that point.
+ */
+import type { MetalFxInstance, ShaderRGB } from "../renderer/core";
+import { type Tween } from "../tween";
+import { type GlowOptions, type PerimSample } from "./geometry";
+export type { GlowOptions } from "./geometry";
 export interface GlowHandles {
     svg: SVGSVGElement;
     haloGroup: SVGGElement;
@@ -12,7 +24,7 @@ export interface GlowHandles {
     width: number;
     height: number;
     cornerRadius: number;
-    kind: 'pill' | 'circle';
+    kind: "pill" | "circle";
     /** Master scale used at injection time so per-frame position math
      *  (INSET / EXTRA_OUTWARD) stays consistent with the strokes already
      *  baked into the SVG markup. */
@@ -34,5 +46,5 @@ export interface GlowHandles {
     lastExtraStroke: string;
 }
 export declare function injectGlow(container: HTMLElement, opts: GlowOptions): GlowHandles;
-export declare function updateGlow(h: GlowHandles, inst: MetalFxInstance, nowMs: number, strengthMul: number, theme?: 'dark' | 'light'): void;
+export declare function updateGlow(h: GlowHandles, inst: MetalFxInstance, nowMs: number, strengthMul: number, theme?: "dark" | "light"): void;
 export declare function resizeGlow(handles: GlowHandles, container: HTMLElement, opts: GlowOptions): GlowHandles;