lecodes-sdk 0.19.0

package/dist/types/ui/UITabs.d.ts

@@ -0,0 +1,96 @@
+import { type UIPager } from "./UIPager";
+import { ScreenElement, UIScreen } from "./UIScreen";
+import { type UIRow as UIRowType } from "./UIContainer";
+import { type ImageSource } from "./UIImage";
+import type { UIChildArg } from "./UINode";
+export type UITabDef = {
+    label: string;
+    /** Tab icon — typically `assetIcon("lucide:…")`. Tinted active/inactive by the bar. */
+    icon?: ImageSource;
+    /** The tab's root screen. Tabs are fixed at construction (like UIPager's). */
+    screen: UIScreen;
+};
+/**
+ * A bottom-tab app shell: swipeable tabs (a `UIPager`) plus a themed tab bar, as one
+ * `UIScreen` — present it directly (`Router.init(tabs)`). Keys are tab ids, in tab order:
+ *
+ * ```ts
+ * const tabs = UITabs({
+ *   home:    { label: "Home",    icon: assetIcon("lucide:house"), screen: homeScreen },
+ *   profile: { label: "Profile", icon: assetIcon("lucide:user"),  screen: profileScreen },
+ * })
+ * Router.init(tabs)
+ * ```
+ *
+ * In-tab navigation stays the pager's: `UIPager.push(detail)` from any screen (bar stays);
+ * `Router.push` opens above the shell (bar covered). Restyle via `theme()` (primaryColor,
+ * mutedColor, tabbarBg, …) or the `bar` handle; for a fully custom bar build on `UIPager`.
+ */
+export interface UITabs extends UIScreen {
+    /** The active tab id. */
+    readonly tab: string;
+    /** Switch tabs (instant, the tab-bar convention; `animated: true` slides). */
+    select(id: string, animated?: boolean): this;
+    /** Fires when the active tab changes and has settled — a bar tap, swipe, or `select()`. */
+    onSelect(callback: (id: string, index: number) => void): this;
+    /** Show a badge on a tab: `true` = dot, a number/string = count pill, `false`/`null`/`0` clears. */
+    badge(id: string, value: number | string | boolean | null): this;
+    /** The pager under the bar — in-tab stacks (`push`/`pop`/`depth`). */
+    readonly pager: UIPager;
+    /** The bar row (named "tabbar") — for restyling beyond the theme variables. */
+    readonly bar: UIRowType;
+}
+export declare class TabsElement extends ScreenElement {
+    private readonly ids;
+    private readonly _pagerEl;
+    private readonly _bar;
+    private readonly _icons;
+    private readonly _labels;
+    private readonly _badges;
+    private readonly _badgeTexts;
+    private readonly _buttons;
+    private readonly _selectListeners;
+    constructor(defs: Record<string, UITabDef>);
+    private _applyActive;
+    get tab(): string;
+    get pager(): any;
+    get bar(): any;
+    select(id: string, animated?: boolean): this;
+    onSelect(callback: (id: string, index: number) => void): this;
+    badge(id: string, value: number | string | boolean | null | undefined): this;
+}
+/** Create the standard bottom-tab shell — see {@link UITabs}. Keys are tab ids in tab order;
+ *  each tab needs a `label` and its root `screen` (plus an optional `icon`). */
+export declare function UITabs(tabs: Record<string, UITabDef>): UITabs;
+/** A `defineTabs` tab: `label` + optional `icon` (an `assetIcon("lucide:…")` call — never a
+ *  hand-written source object). `UITabDef` is this plus the tab's root `screen`. */
+export type TabDef = Omit<UITabDef, "screen">;
+/** What `defineTabs` returns: the bar (mount it yourself when the screen owns its whole layout)
+ *  and the standard screen shell around it. `active` must be a declared tab id, as a literal. */
+export type TabsHandle<T extends Record<string, TabDef>> = {
+    /** Tab ids in declaration order. */
+    ids: (keyof T & string)[];
+    /** The bar alone — one button per tab, the `active` one highlighted. */
+    bar(active: keyof T & string): UIRowType;
+    /** A screen sitting ON the bar: `[ padded content column, bar ]`. */
+    screen(active: keyof T & string, ...children: UIChildArg[]): UIScreen;
+};
+/**
+ * Declare a tab bar WITHOUT screens — the design-stage twin of {@link UITabs} (same keys, same
+ * `tab-<id>` button names, same theme variables), for mockups where every screen is its own file
+ * and mounts the bar with a literal tab id:
+ *
+ * ```ts
+ * export const mainTabs = defineTabs({
+ *   home:    { label: "Home",    icon: assetIcon("lucide:house") },
+ *   profile: { label: "Profile", icon: assetIcon("lucide:user") },
+ * })
+ * // in a screen file:
+ * export default () => mainTabs.screen("home", [ ...content ])
+ * ```
+ *
+ * Restyle through the theme — `theme({ primaryColor, mutedColor, tabbarBg, screenBg })` recolors
+ * every bar at once. The built app passes the same keys (plus each tab's root screen) to `UITabs`,
+ * which renders the identical bar interactively.
+ */
+export declare function defineTabs<T extends Record<string, TabDef>>(tabs: T): TabsHandle<T>;

package/dist/types/ui/UIText.d.ts

@@ -0,0 +1,19 @@
+import { Element, type BaseStyle, type DrawableStyle, type ElementStyle, type TextStyle, type UIElementBase } from "./UINode";
+export type UITextStyle = ElementStyle & TextStyle & DrawableStyle;
+/** A text label. */
+export interface UIText extends UIElementBase<UITextStyle, DrawableStyle & BaseStyle & TextStyle> {
+    readonly type: "text";
+    /** The displayed string — writable at any time. */
+    text: string;
+}
+export declare class TextElement extends Element<"text"> {
+    private _text;
+    constructor(style: any, text: string | (() => string));
+    get text(): string;
+    set text(value: string);
+}
+/** Create a text label — a string, or `() => string` for reactive text that re-renders when a
+ *  signal it read changes. */
+export declare function UIText(text: string | (() => string)): UIText;
+/** @deprecated Style as the first argument is legacy — use chained `.style({...})`. */
+export declare function UIText(style: UITextStyle, text: string | (() => string)): UIText;

package/dist/types/ui/UIVideo.d.ts

@@ -0,0 +1,28 @@
+import type { VideoPlayer } from "../runtime/media";
+import { type PresentOptions } from "./presentable";
+import { type BaseStyle, type DrawableStyle, type ElementStyle, type UIElementBase } from "./UINode";
+export type UIVideoStyle = ElementStyle & DrawableStyle & {
+    objectFit?: "cover" | "contain" | "fill";
+};
+/** A video surface showing a `VideoPlayer`'s output — embeddable in a screen AND
+ *  fullscreen-presentable (`open()`), with seamless promotion between the two. */
+export interface UIVideo extends UIElementBase<UIVideoStyle, DrawableStyle & BaseStyle> {
+    readonly type: "video";
+    /** The player driving this surface (playback control lives on it). */
+    player: VideoPlayer;
+    /** Show fullscreen as the current destination. Promotion: if this video is mounted in a screen,
+     *  the SAME native player moves fullscreen — playback uninterrupted; a pop moves it back. */
+    open(options?: PresentOptions): void;
+    /** Dismiss if this is the visible destination. */
+    close(): void;
+    /** Became the visible destination. */
+    onOpen(callback: () => void): this;
+    /** Stopped being the visible destination. */
+    onClose(callback: () => void): this;
+    /** Hardware/system back while current. */
+    onBackPressed(callback: () => void): this;
+}
+/** Create a video node showing `player`'s output. */
+export declare function UIVideo(player: VideoPlayer): UIVideo;
+/** @deprecated Style as the first argument is legacy — use chained `.style({...})`. */
+export declare function UIVideo(style: UIVideoStyle, player: VideoPlayer): UIVideo;

package/dist/types/ui/UIVirtualizedList.d.ts

@@ -0,0 +1,97 @@
+import { Element, type Color, type DrawableStyle, type ElementStyle, type UIElementBase, type UINodeChild } from "./UINode";
+export type UIVirtualizedListStyle = DrawableStyle & ElementStyle & {
+    /** Tint of the native pull-to-refresh spinner (pairs with `onRefresh`). */
+    refreshControlColor?: Color;
+    /** Same key and semantics as UIScrollable's; `"none"` keeps a chat composer's keyboard up no
+     *  matter how the history is scrolled. */
+    keyboardDismissMode?: "interactive" | "scroll" | "none";
+};
+export interface VListConfig<T> {
+    /** Stable unique key of an item. */
+    keyOf: (item: T) => string;
+    /** Subtree factory — called when the item enters the window; the subtree lives until it
+     *  leaves. */
+    render: (item: T) => UINodeChild;
+    /** Height estimate (px) used before the first measurement — a number, or a per-item function
+     *  (chat: `msg => 40 + Math.ceil(msg.text.length / 35) * 20`). Computed once when the item is
+     *  added. */
+    estimatedHeight: number | ((item: T) => number);
+    /** Extra px around the viewport kept mounted. Default: one viewport height. */
+    overscan?: number;
+    /** Chat mode: the first layout starts scrolled to the end, and appends auto-scroll while the
+     *  list sits at the bottom. */
+    inverted?: boolean;
+}
+/** A windowed (virtualized) list: only the items near the viewport are mounted — for long feeds
+ *  and chats. Items are keyed; feed it via `setData`/`append`/`prepend`. */
+export interface UIVirtualizedList<T = unknown> extends UIElementBase<UIVirtualizedListStyle> {
+    readonly type: "vlist";
+    /** Replace the data wholesale — vanished keys are unmounted by the host's window sync. */
+    setData(items: T[]): this;
+    /** Append items to the end (auto-scrolls when `inverted` and resting at the bottom). */
+    append(...items: T[]): this;
+    /** Insert at the start WITHOUT a scroll jump (the host compensates the offset). */
+    prepend(...items: T[]): this;
+    /** Update items with the same keys: mounted ones re-render; the cached height persists until
+     *  re-measured. */
+    update(...items: T[]): this;
+    /** Remove items by key. */
+    removeByKey(...keys: string[]): this;
+    /** Number of data items (mounted or not). */
+    readonly itemCount: number;
+    /** The data item under `key`, if any. */
+    getItem(key: string): T | undefined;
+    /** Scroll to `offset` px. */
+    scrollTo(offset: number, animated?: boolean): void;
+    /** Scroll to the item with `key`. */
+    scrollToKey(key: string, animated?: boolean): void;
+    /** Scroll to the end of the content. */
+    scrollToEnd(animated?: boolean): void;
+    /** Scroll position changed (px from the start edge). */
+    onScroll(callback: (scrollPosition: number) => void): this;
+    /** Pull-to-refresh: the spinner stays until the returned promise settles. Attach BEFORE the
+     *  node mounts (hosts read it at creation). Native hosts only — no-op on web. */
+    onRefresh(callback: () => void | Promise<void>): this;
+    /** Fires within `thresholdPx` of the content's bottom edge — once, re-armed after leaving the
+     *  edge (host-side latch). Infinite-scroll loading. */
+    onEndReached(thresholdPx: number, callback: () => void): this;
+    /** Same, for the top edge — chat history loading. */
+    onStartReached(thresholdPx: number, callback: () => void): this;
+}
+export declare class VListElement<T> extends Element<"vlist"> implements UIVirtualizedList<T> {
+    _overscan: number;
+    _inverted: boolean;
+    _keys: string[];
+    _estimates: number[];
+    _endThreshold: number;
+    _startThreshold: number;
+    protected sl: ((scrollPosition: number) => void)[];
+    protected erl: (() => void)[];
+    protected strl: (() => void)[];
+    private items;
+    private mounted;
+    private keyOf;
+    private renderItem;
+    private estimate;
+    constructor(config: VListConfig<T>);
+    private get isAttached();
+    private register;
+    setData(items: T[]): this;
+    append(...items: T[]): this;
+    prepend(...items: T[]): this;
+    update(...items: T[]): this;
+    removeByKey(...keys: string[]): this;
+    get itemCount(): number;
+    getItem(key: string): T | undefined;
+    scrollTo(offset: number, animated?: boolean): void;
+    scrollToKey(key: string, animated?: boolean): void;
+    scrollToEnd(animated?: boolean): void;
+    onScroll(callback: (scrollPosition: number) => void): this;
+    _refreshCallback: any;
+    onRefresh(callback: () => void | Promise<void>): this;
+    onEndReached(thresholdPx: number, callback: () => void): this;
+    onStartReached(thresholdPx: number, callback: () => void): this;
+}
+/** Create a virtualized list from a config (`keyOf` + `render` + `estimatedHeight` required),
+ *  then feed it via `setData`/`append`/`prepend`. Give it a size (`flexGrow: 1` as a screen body). */
+export declare function UIVirtualizedList<T>(config: VListConfig<T>): UIVirtualizedList<T>;

package/dist/types/ui/UIWidget.d.ts

@@ -0,0 +1,65 @@
+import { TouchStartEvent } from "../runtime/touch";
+import { Presentable } from "./presentable";
+import { ContainerElement, type BaseStyle, type Color, type ContainerStyle, type DrawableStyle, type PaddingStyle, type PositionStyle, type UIChildArg, type UIContainerBase, type UINodeChild, type ChildrenFn } from "./UINode";
+export type UIWidgetStyle = ContainerStyle & DrawableStyle & PaddingStyle & BaseStyle & PositionStyle & {
+    /** A layer behind the widget that intercepts clicks — `"transparent"` still intercepts, `null`
+     *  removes the layer. A tap on it fires `onOverlayTap`. */
+    overlayColor?: Color | null;
+};
+/** A floating overlay — absolutely positioned in device coordinates, mounted above the page as
+ *  its own layout root (never a child of what's underneath). The base of dialogs, toasts,
+ *  mini-players and scene HUDs; `UIModal`/`UIPopover`/`UIBottomSheet` build on it. */
+export interface UIWidget extends UIContainerBase<UIWidgetStyle, DrawableStyle & BaseStyle & {
+    overlayColor?: Color | null;
+}> {
+    readonly type: "widget";
+    /**
+     * Attach this widget to a destination (a `Scene`, a `UIScreen`, …): the widget lives on that
+     * page's layer — it shows/hides with the page and rides its transition, and a screen pushed
+     * on top covers it (a scene HUD behaves like part of the scene). Sticky until `attachTo(null)`
+     * (= back to a global overlay). Set it while the widget is hidden. The widget is always its own
+     * overlay root mounted into the owner's page view — it never becomes a child of the owner, so it
+     * stays topmost and its updates never trigger the owner's relayout. Works with a `UIScreen` that
+     * is a page inside a `UIPager`: the widget mounts into that tab and rides its swipe. (Web shows
+     * and hides it with the owner but does not yet ride the transition.)
+     */
+    attachTo(owner: Presentable | null): this;
+    /** Show the widget. By default it is a global overlay above every destination — it stays
+     *  visible across navigation until `hide()` (dialogs, mini-player, global loader). If the
+     *  widget was attached via `attachTo(owner)`, it mounts on that page's layer instead and is
+     *  only visible while the owner is presented. */
+    show(): void;
+    /** Unmount the widget. */
+    hide(): void;
+    /** Mounted right now (`show()` ran, `hide()` hasn't). */
+    readonly isShow: boolean;
+    /** Touch began on the widget; `ev.track(...)` takes over the rest of the gesture. */
+    onTouchStart(callback: (ev: TouchStartEvent<UIWidget>) => void): this;
+    /** Tap on the overlay layer (requires an `overlayColor`). */
+    onOverlayTap(callback: () => void): this;
+    /** Hardware/system back while the widget is shown. */
+    onBackPressed(callback: () => void): this;
+}
+export declare class WidgetElement extends ContainerElement<"widget"> {
+    scrollable: false;
+    _owner?: Presentable;
+    constructor(type: "widget", style: UIWidgetStyle, children: UINodeChild[] | ChildrenFn);
+    attachTo(owner: Presentable | null): this;
+    show(): void;
+    hide(): void;
+    get isShow(): boolean;
+    _interactive: boolean;
+    readonly touchStartListeners: any[];
+    onTouchStart(callback: any): this;
+    _emitTouchStart(pointerId: number, clientX: number, clientY: number): any;
+    readonly otl: (() => void)[];
+    onOverlayTap(callback: () => void): this;
+    _backButtonCallback?: () => void;
+    onBackPressed(callback: any): this;
+}
+/** Create a widget (same argument forms as `UIColumn`). Position it with absolute-style props
+ *  (`top`/`left`/`bottom`/`right`), then `show()`/`hide()`. */
+export declare function UIWidget(...children: UIChildArg[]): UIWidget;
+export declare function UIWidget(children: UINodeChild[] | ChildrenFn): UIWidget;
+/** @deprecated Style as the first argument is legacy — use chained `.style({...})`. */
+export declare function UIWidget(style: UIWidgetStyle, children?: UINodeChild[] | ChildrenFn): UIWidget;

package/dist/types/ui/fonts.d.ts

@@ -0,0 +1,9 @@
+type FontOptions = {
+    weight?: number;
+    style?: "normal" | "italic";
+};
+/** Register a font face from a URL at runtime under `fontFamily`; resolves once it's ready to
+ *  use in styles. For registry/project fonts prefer the compile-time `font()` macro — this is the
+ *  dynamic escape hatch. */
+export declare function registerFont(fontFamily: string, url: string, options?: FontOptions): Promise<void>;
+export {};

package/dist/types/ui/presentable.d.ts

@@ -0,0 +1,68 @@
+/** Built-in transition catalog. `push`/`pop` are the stacked-navigation pair (slide + parallax +
+ *  dim + edge shadow); the rest are simple two-view moves. */
+export type TransitionName = "push" | "pop" | "slide-from-left" | "slide-from-right" | "slide-from-top" | "slide-from-bottom" | "zoom" | "zoom-in" | "zoom-out" | "fade" | "none";
+/** Start/end pose of one side of a custom transition. `x`/`y` are logical px, or a percentage of
+ *  the destination's size (e.g. `"100%"` = one full width to the right). */
+export type TransitionTransform = {
+    x?: number | `${number}%`;
+    y?: number | `${number}%`;
+    scale?: number;
+    opacity?: number;
+};
+/**
+ * A custom transition: declarative poses for the incoming/outgoing destination, played natively.
+ * Serializes onto each platform's existing transition machinery — there is no per-frame JS.
+ * Fields omitted keep the identity pose. Interactive back-swipe stays system-native (push/pop
+ * only); a spec applies to non-interactive transitions.
+ */
+export interface TransitionSpec {
+    /** Duration in ms (default 300). */
+    duration?: number;
+    /** cubic-bezier control points (default ease-out). */
+    easing?: [number, number, number, number];
+    /** The entering destination animates FROM this pose to identity. */
+    incoming?: {
+        from?: TransitionTransform;
+    };
+    /** The leaving destination animates from identity TO this pose. */
+    outgoing?: {
+        to?: TransitionTransform;
+    };
+    /** Scrim alpha (0..1) painted over whichever destination is underneath. */
+    dim?: number;
+    /** Which side stacks on top during the animation (default "incoming"). On Android, transitions
+     *  involving a scene always animate the screen side on top — the scene view itself never moves. */
+    onTop?: "incoming" | "outgoing";
+}
+export type Transition = TransitionName | TransitionSpec;
+export type PresentOptions = {
+    /** Transition to play while this destination replaces the current one (default "none" for a
+     *  direct open(); the Router applies its own defaults — push/pop, and the theme's
+     *  `replaceTransition` for replace). */
+    transition?: Transition;
+};
+/**
+ * Anything that can be shown as the app's current destination: a `UIScreen`, a `Scene` /
+ * `ARScene`, a `Scene2D`, a `NativeView`, or a `UIVideo`. One Presentable is visible at a time;
+ * open it directly (`p.open()` — replaces the current destination, suspending an active Router
+ * until `Router.restore()`) or navigate with `Router.push/replace/pop`.
+ *
+ * `onOpen`/`onClose` are the presentation lifecycle (fired when the destination becomes / stops
+ * being the visible one — including router pushes covering it and pops revealing it).
+ */
+export interface Presentable {
+    open(options?: PresentOptions): void | this | Promise<void>;
+    close(): void;
+    onOpen(callback: () => void): this;
+    onClose(callback: () => void): this;
+    onBackPressed(callback: () => void): this;
+}
+/** Runtime companion of the `Presentable` interface (declaration merging): the navigation
+ *  state that isn't tied to the Router. */
+export declare const Presentable: Readonly<{
+    /** The destination visible right now (a `UIScreen`, `Scene`, `Scene2D`, `NativeView` or
+     *  `UIVideo`), or `null` before the first open. Distinct from `Router.current` — that is the
+     *  top of the router stack, which stays meaningful while the router is suspended by a direct
+     *  `open()`; this is what is actually on screen. `UIWidget.show()` attaches to it. */
+    readonly current: Presentable | null;
+}>;

package/dist/types/ui/router.d.ts

@@ -0,0 +1,40 @@
+import { Presentable, type Transition } from "./presentable";
+type RouterOptions = {
+    showDefaultBackButton?: boolean;
+};
+type NavigateOptions = {
+    /** Transition to play. Defaults: `"push"` for push, `"pop"` for pop; replace follows the
+     *  theme's `replaceTransition` (`"none"` out of the box). */
+    transition?: Transition;
+};
+/** Stack navigation over `Presentable` destinations. `init` once with the home page, then
+ *  `push`/`replace`/`pop`; the back gesture/button pops natively. A direct `page.open()` suspends
+ *  the router until `restore()`. */
+type Router = {
+    /** The top of the router stack (not necessarily what's on screen — see `Presentable.current`). */
+    get current(): Presentable;
+    /** Mount the router with `homePage` as the stack root — the app's navigation entry point. */
+    init(homePage: Presentable, opts?: RouterOptions): void;
+    /** Push a destination onto the stack — a `UIScreen`, a `Scene`, a `Scene2D`, a `NativeView`,
+     *  or a `UIVideo`. The back gesture/button pops it. Destinations with async preparation
+     *  (`ARScene`: camera permission + warm render) return a Promise — the current page stays
+     *  visible until they're ready, and a rejection (permission denied / superseded) leaves the
+     *  stack untouched. */
+    push(page: Presentable, opts?: NavigateOptions): void | Promise<void>;
+    /** Swap the top of the stack for `page` — no back entry to the replaced one. */
+    replace(page: Presentable, opts?: NavigateOptions): void | Promise<void>;
+    /** Pop the top destination (the programmatic twin of the back gesture); `to` unwinds to a
+     *  stack index in one step. */
+    pop(to?: number, opts?: NavigateOptions): void;
+    /** Blank the router's page, keeping the stack — `restore()` brings it back. A destination
+     *  opened directly stays visible. */
+    hide(): void;
+    /** Re-present the stack top after `hide()` or a direct `open()` suspended the router. */
+    restore(): void;
+    /** `"change"` fires on every stack change — pushes, pops, and native back gestures — with the
+     *  new top destination. */
+    addEventListener(channel: "change", callback: (page: Presentable) => void): void;
+    removeEventListener(channel: "change", callback: (page: Presentable) => void): void;
+};
+export declare const Router: Router;
+export {};

package/dist/types/ui/theme.d.ts

@@ -0,0 +1,26 @@
+import type { Transition } from "./presentable";
+export type ThemeValues = Record<string, string | number | null>;
+export type ThemeAccessors<T> = {
+    readonly [K in keyof T]: K extends string ? `var(--${K})` : never;
+};
+/** App theme: callable to merge variables (`theme({...})` — re-calling re-styles the live UI, so
+ *  dark mode is just a second call), with the system vars as static properties
+ *  (`theme.primaryColor`, `theme["comfort-top"]`, …). */
+export declare const theme: (<T extends Record<string, string | number | Transition | null>>(values: T & { [K in Exclude<keyof T, "replaceTransition">]: string | number | null; }) => ThemeAccessors<Omit<T, "replaceTransition">>) & {
+    /** The app accent color. Kit components will read it via `var(--primaryColor, <fallback>)`. */
+    readonly primaryColor: "var(--primaryColor)";
+    /** Secondary / inactive content color for kit components. */
+    readonly mutedColor: "var(--mutedColor)";
+    /** DEFAULT text color — text without an explicit `color` follows it (hosts source their
+     *  default from the theme; unset = the host default, white on dark screens). Set it once for
+     *  a light theme instead of `color: "black"` on every label. */
+    readonly color: "var(--color)";
+    /** DEFAULT text font — text without an explicit `fontFamily` follows it. */
+    readonly fontFamily: "var(--fontFamily)";
+    /** Raw comfort knobs (logical px). The bare `comfort-top` style TOKEN applies the safe-area
+     *  formula — these accessors read the knob value itself, for manual composition. */
+    readonly "comfort-top": "var(--comfort-top)";
+    readonly "comfort-bottom": "var(--comfort-bottom)";
+    readonly "comfort-left": "var(--comfort-left)";
+    readonly "comfort-right": "var(--comfort-right)";
+};