ranui 0.1.10-alpha.7 → 0.2.0-alpha.0

package/dist/test/unit/player-fullscreen.test.d.ts

@@ -0,0 +1 @@
+import '@/components/player';

package/dist/test/unit/player-interactions.test.d.ts

@@ -0,0 +1 @@
+import '@/components/player';

package/dist/test/unit/player-levels.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/player-media.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/player-playback.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/player.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/player';

package/dist/test/unit/popover-accessibility.test.d.ts

@@ -0,0 +1 @@
+import '@/components/popover';

package/dist/test/unit/popover.contract.test.d.ts

@@ -0,0 +1,2 @@
+import '@/components/popover/index';
+import '@/components/popover/content/index';

package/dist/test/unit/progress.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/progress';

package/dist/test/unit/radar.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/radar';

package/dist/test/unit/route.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/route';

package/dist/test/unit/router.contract.test.d.ts

@@ -0,0 +1,2 @@
+import '@/components/router';
+import '@/components/route';

package/dist/test/unit/scratch.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/scratch';

package/dist/test/unit/select-accessibility.test.d.ts

@@ -0,0 +1 @@
+import '@/components/select';

package/dist/test/unit/select-option.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/select';

package/dist/test/unit/select.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/select/index';

package/dist/test/unit/skeleton.contract.test.d.ts

@@ -0,0 +1 @@
+import '@/components/skeleton';

package/dist/test/unit/ssr.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/tab.contract.test.d.ts

@@ -0,0 +1,2 @@
+import '@/components/tab';
+import '@/components/tabpane';

package/dist/test/unit/theme.semantic-tokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/theme.skin-tokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.dom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.error.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.i18n.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.image.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.math.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.router.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.signal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.ssr-stream.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.style.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.theme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/unit/utils.tween.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tsconfig.json

@@ -1,14 +1,15 @@
 {
-  "include": ["components", "plugins", "utils", "test", "shadowless", "**/*.ts"],
+  "include": ["components", "plugins", "utils", "test", "shadowless", "**/*.ts", "typing.d.ts"],
   "exclude": ["node_modules/**", "dist/**", "assets", "public"],
   "compilerOptions": {
     "module": "ESNext",
     "moduleResolution": "bundler",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "target": "ESNext",
     "declaration": true,
     "outDir": "dist",
-    "types": ["vite/client", "./typings.d.ts"],
+    "types": ["./typings.d.ts"],
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "isolatedModules": false,
@@ -17,15 +18,14 @@
     "noImplicitAny": true,
     "useUnknownInCatchVariables": false,
     "inlineSourceMap": true,
-    "baseUrl": ".",
     "experimentalDecorators": true,
     "paths": {
-      "@/assets/*": ["assets/*"],
-      "@/public/*": ["public/*"],
-      "@/components/*": ["components/*"],
-      "@/shadowless/*": ["shadowless/*"],
-      "@/plugins/*": ["plugins/*"],
-      "@/utils/*": ["utils/*"]
+      "@/assets/*": ["./assets/*"],
+      "@/public/*": ["./public/*"],
+      "@/components/*": ["./components/*"],
+      "@/shadowless/*": ["./shadowless/*"],
+      "@/plugins/*": ["./plugins/*"],
+      "@/utils/*": ["./utils/*"]
     }
   }
 }

package/dist/typings.d.ts

@@ -1,9 +1,9 @@
+/// <reference types="vite/client" />
 declare module '*.less';
 declare module '*.less?inline';
 declare module '*.ts';
 declare module '*.svg';
-declare module 'docx-preview';
-declare module 'exceljs/*';
+declare module '*.svg?raw';
 declare module '@/assets/*';
 declare module '@/public/*';
 declare module '@/components/*';
@@ -14,8 +14,12 @@ declare namespace Ran {
     content: string;
     duration?: number;
     close?: () => void;
+    top?: number | string;
+    zIndex?: number | string;
+    getContainer?: () => HTMLElement | null;
   }
-  type Hint = (options: Prompt | string) => void;
+
+  type Hint = (options: Prompt | string | undefined | null) => void;
 
   interface Message {
     info: Hint;
@@ -91,123 +95,166 @@ interface MathJax {
   tex2chtmlPromise: (x: string, y: object) => Promise<Element>;
 }
 
-declare interface Window {
-  ranui: Partial<Ranui>;
-  message: Partial<Ran.Message>;
-  MathJax: MathJax;
-  katex: {
-    render: (x: string, y: HTMLElement, z: object) => void;
-  };
-  pdfjsLib: {
-    GlobalWorkerOptions: {
-      workerSrc: string;
+declare global {
+  interface Window {
+    ranui: Partial<Ranui>;
+    message: Partial<Ran.Message>;
+    MathJax: MathJax;
+    katex: {
+      render: (x: string, y: HTMLElement, z: object) => void;
     };
-    getDocument: (x: string | ArrayBuffer) => {
-      promise: Promise<PDFDocumentProxy>;
+    pdfjsLib: {
+      GlobalWorkerOptions: {
+        workerSrc: string;
+      };
+      getDocument: (x: string | ArrayBuffer) => {
+        promise: Promise<PDFDocumentProxy>;
+      };
     };
-  };
-  Hls: HLS;
+  }
 }
 
-
-
+enum ICON_NAME_AMP {
+  DOUBLE_BOUNCE = 'double-bounce',
+  ROTATE = 'rotate',
+  STRETCH = 'stretch',
+  CUBE = 'cube',
+  DOT = 'dot',
+  TRIPLE_BOUNCE = 'triple-bounce',
+  SCALE_OUT = 'scale-out',
+  CIRCLE = 'circle',
+  CIRCLE_LINE = 'circle-line',
+  SQUARE = 'square',
+  PULSE = 'pulse',
+  SOLAR = 'solar',
+  CUBE_FOLD = 'cube-fold',
+  CIRCLE_FOLD = 'circle-fold',
+  CUBE_GRID = 'cube-grid',
+  CIRCLE_TURN = 'circle-turn',
+  CIRCLE_ROTATE = 'circle-rotate',
+  CIRCLE_SPIN = 'circle-spin',
+  DOT_BAR = 'dot-bar',
+  DOT_CIRCLE = 'dot-circle',
+  LINE = 'line',
+  DOT_PULSE = 'dot-pulse',
+  LINE_SCALE = 'line-scale',
+  TEXT = 'text',
+  CUBE_DIM = 'cube-dim',
+  DOT_LINE = 'dot-line',
+  ARC = 'arc',
+  DROP = 'drop',
+  PACMAN = 'pacman',
+}
+interface BaseIntrinsicElements {
+  'r-loading': any & {
+    name: ICON_NAME_AMP;
+  };
+  'r-math': any & {
+    latex: string;
+  };
+  'r-button': any & {
+    sheet: string;
+    disabled: boolean | string;
+    iconSize: string;
+    icon: string;
+    effect: boolean | string;
+  };
+  'r-checkbox': any & {
+    disabled: boolean | string;
+    checked: boolean | string;
+  };
+  'r-img': any & {
+    fallback: string;
+    src: string;
+  };
+  'r-input': any & {
+    value: string;
+    placeholder: string;
+    label: string;
+    status: string;
+    name: string;
+    icon: string;
+    prefix: string;
+    suffix: string;
+    type: string;
+    required: boolean | string;
+    disabled: boolean | string;
+    min: number | string;
+    max: number | string;
+    step: number | string;
+  };
+  'r-player': any & {
+    src: string;
+    debug: boolean | string;
+    volume: number | string;
+    currentTime: number | string;
+    playbackRate: number | string;
+  };
+  'r-popover': any & {
+    placement: string;
+    trigger: string;
+    getPopupContainerId: string;
+    arrow: boolean | string;
+    closePopover: () => void;
+  };
+  'r-content': any;
+  'r-preview': any & {
+    src: string;
+    closeable: boolean | string;
+  };
+  'r-progress': any & {
+    percent: number | string;
+    total: number | string;
+    type: string;
+    animation: string;
+    dot: boolean | string;
+  };
+  'r-radar': any & {
+    abilitys: string;
+    colorPolygon?: string;
+    colorLine?: string;
+    fillColor?: string;
+    strokeColor?: string;
+  };
+  'r-select': any & {
+    value: string;
+    defaultValue?: string;
+    showSearch?: boolean | string;
+    type?: string;
+    placement?: string;
+    sheet?: string;
+    getPopupContainerId?: string;
+    dropdownclass?: string;
+    trigger?: string;
+    disabled?: boolean | string;
+  };
+  'r-skeleton': any;
+  'r-tab': any & {
+    label: string;
+    icon: string;
+    iconSize: string;
+    key: string;
+    disabled: boolean | string;
+    effect: boolean | string;
+  };
+  'r-tabs': any & {
+    align: string;
+    type: string;
+    active: string;
+    effect: string;
+  };
+  'r-icon': any & {
+    name?: string;
+    size?: string;
+    color?: string;
+  };
+}
 namespace JSX {
-  interface IntrinsicElements {
-    'r-loading': any & {
-      name: NAME_AMP;
-    };
-    'r-math': any & {
-      latex: string;
-    };
-    'r-button': any & {
-      sheet: string;
-      disabled: boolean | string;
-      iconSize: string;
-      icon: string;
-      effect: boolean | string;
-    };
-    'r-checkbox': any & {
-      disabled: boolean | string;
-      checked: boolean | string;
-    };
-    'r-img': any & {
-      fallback: string;
-      src: string;
-    };
-    'r-input': any & {
-      value: string;
-      placeholder: string;
-      label: string;
-      status: string;
-      name: string;
-      icon: string;
-      prefix: string;
-      suffix: string;
-      type: string;
-      required: boolean | string;
-      disabled: boolean | string;
-      min: number | string;
-      max: number | string;
-      step: number | string;
-    };
-    'r-player': any & {
-      src: string;
-      debug: boolean | string;
-      volume: number | string;
-      currentTime: number | string;
-      playbackRate: number | string;
-    };
-    'r-popover': any & {
-      placement: string;
-      trigger: string;
-      getPopupContainerId: string;
-      arrow: boolean | string;
-    };
-    'r-preview': any & {
-      src: string;
-      closeable: boolean | string;
-    };
-    'r-progress': any & {
-      percent: number | string;
-      total: number | string;
-      type: string;
-      animation: string;
-      dot: boolean | string;
-    };
-    'r-radar': any & {
-      abilitys: string;
-      colorPolygon?: string;
-      colorLine?: string;
-      fillColor?: string;
-      strokeColor?: string;
-    };
-    'r-select': any & {
-      value: string;
-      defaultValue?: string;
-      showSearch?: boolean | string;
-      type?: string;
-      placement?: string;
-      sheet?: string;
-      getPopupContainerId?: string;
-      dropdownclass?: string;
-      trigger?: string;
-      trigger?: string;
-      disabled?: boolean | string;
-    };
-    'r-skeleton': any;
-    'r-tab': any & {
-      label: string;
-      icon: string;
-      iconSize: string;
-      key: string;
-      disabled: boolean | string;
-      effect: boolean | string;
-    };
-    'r-tabs': any & {
-      align: string;
-      type: string;
-      active: string;
-      effect: string;
-    };
+  interface IntrinsicElements extends BaseIntrinsicElements {}
+}
+
+namespace React {
+  namespace JSX {
+    interface IntrinsicElements extends BaseIntrinsicElements {}
   }
 }

package/dist/utils/builder/core.d.ts

@@ -0,0 +1,70 @@
+import type { EventManager } from './events';
+export interface Ref<T extends HTMLElement = HTMLElement> {
+    current: T | null;
+}
+export declare const createRef: <T extends HTMLElement = HTMLElement>() => Ref<T>;
+export declare class ElementBuilder<T extends HTMLElement = HTMLElement> {
+    private el;
+    constructor(tag: string);
+    id(value: string): this;
+    class(name: string): this;
+    addClass(...names: string[]): this;
+    removeClass(...names: string[]): this;
+    attr(name: string, value: string): this;
+    attrs(values: Record<string, string | number | boolean | null | undefined>): this;
+    boolAttr(name: string, value: boolean, enabledValue?: string): this;
+    part(value: string): this;
+    data(key: string, value: string): this;
+    style(keyOrMap: string | Record<string, string>, value?: string): this;
+    cssVar(name: string, value: string): this;
+    aria(key: string, value: string): this;
+    role(value: string): this;
+    tabIndex(value: number): this;
+    label(value: string): this;
+    labelledBy(id: string): this;
+    describedBy(id: string): this;
+    ariaHidden(hidden?: boolean): this;
+    /**
+     * Permanent build-time listener — tied to the element's lifetime.
+     * Use for internal shadow DOM elements created in the constructor.
+     */
+    on<K extends keyof HTMLElementEventMap>(type: K, listener: (this: T, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): this;
+    /**
+     * Lifecycle-managed listener — registered into an EventManager.
+     * Use in connectedCallback when building elements that need cleanup on disconnect.
+     * Call manager.abort() in disconnectedCallback to remove all listeners at once.
+     */
+    listen<K extends keyof HTMLElementEventMap>(manager: EventManager, type: K, handler: (this: T, ev: HTMLElementEventMap[K]) => any, options?: Omit<AddEventListenerOptions, 'signal'>): this;
+    /**
+     * Delegated listener — the built element acts as the parent container.
+     * Fires handler only when the event originates from a descendant matching selector.
+     * Registered into an EventManager so it is cleaned up with manager.abort().
+     *
+     *   Div().class('list')
+     *     .children(...)
+     *     .delegate(scope, '.item', 'click', (ev, item) => handleItem(item))
+     *     .build();
+     */
+    delegate<K extends keyof HTMLElementEventMap>(manager: EventManager, selector: string, type: K, handler: (ev: HTMLElementEventMap[K], target: Element) => void, options?: Omit<AddEventListenerOptions, 'signal'>): this;
+    children(...items: (HTMLElement | string | ElementBuilder<any> | undefined | null | (HTMLElement | string | ElementBuilder<any> | undefined | null)[])[]): this;
+    replaceChildren(...items: (HTMLElement | string | ElementBuilder<any> | undefined | null | (HTMLElement | string | ElementBuilder<any> | undefined | null)[])[]): this;
+    text(value: string): this;
+    ref(holder: Ref<T>): this;
+    shadow(options?: ShadowRootInit): ShadowBuilder<T>;
+    build(): T;
+    serialize(): string;
+}
+export declare class ShadowBuilder<T extends HTMLElement = HTMLElement> {
+    private root;
+    private hostEl;
+    private options;
+    constructor(host: T, root: ShadowRoot, options: ShadowRootInit);
+    children(...items: (HTMLElement | string | ElementBuilder<any> | undefined | null | (HTMLElement | string | ElementBuilder<any> | undefined | null)[])[]): this;
+    adoptSheet(...sheets: CSSStyleSheet[]): this;
+    css(cssText: string): this;
+    done(): {
+        host: T;
+        shadow: ShadowRoot;
+    };
+    serialize(): string;
+}

package/dist/utils/builder/env.d.ts

@@ -0,0 +1 @@
+export declare const isSSR: boolean;

package/dist/utils/builder/escape.d.ts

@@ -0,0 +1,2 @@
+export declare function escapeHtml(unsafe: string): string;
+export declare function escapeHtmlAttribute(unsafe: string): string;

package/dist/utils/builder/events.d.ts

@@ -0,0 +1,55 @@
+/**
+ * EventManager — lifecycle-scoped event registry backed by AbortController.
+ *
+ * Web Component usage:
+ *
+ *   private _events = new EventManager();
+ *
+ *   connectedCallback() {
+ *     this._events
+ *       .on(this._input, 'input', this.handleInput)
+ *       .on(this, 'click', this.handleClick, { capture: true });
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this._events.abort(); // removes all listeners, resets for next connect
+ *   }
+ *
+ * Page development usage:
+ *
+ *   function initSection(container: HTMLElement) {
+ *     const scope = new EventManager();
+ *
+ *     scope
+ *       .on(input, 'input', handleSearch)
+ *       .delegate(container, '[data-action]', 'click', (ev, target) => {
+ *         handleAction(target.getAttribute('data-action'));
+ *       });
+ *
+ *     return () => scope.abort(); // call on section teardown
+ *   }
+ */
+export declare class EventManager {
+    private ac;
+    constructor();
+    /** The underlying AbortSignal — pass to addEventListener options directly if needed. */
+    get signal(): AbortSignal;
+    on<K extends keyof HTMLElementEventMap>(target: HTMLElement, type: K, handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: Omit<AddEventListenerOptions, 'signal'>): this;
+    on(target: EventTarget, type: string, handler: EventListener, options?: Omit<AddEventListenerOptions, 'signal'>): this;
+    /**
+     * Event delegation — attach one listener to `parent`, fire `handler` only when
+     * the event originates from a descendant matching `selector`.
+     *
+     * The handler receives the original event and the matched element as arguments.
+     *
+     *   scope.delegate(list, '.item', 'click', (ev, item) => {
+     *     console.log(item.dataset.id);
+     *   });
+     */
+    delegate<K extends keyof HTMLElementEventMap>(parent: HTMLElement, selector: string, type: K, handler: (ev: HTMLElementEventMap[K], target: Element) => void, options?: Omit<AddEventListenerOptions, 'signal'>): this;
+    /**
+     * Remove all registered listeners and reset internal AbortController.
+     * Safe to call multiple times; next on() / delegate() calls start fresh.
+     */
+    abort(): void;
+}

package/dist/utils/builder/factory.d.ts

@@ -0,0 +1,18 @@
+import { ElementBuilder } from './core';
+export declare const View: <T extends HTMLElement = HTMLElement>(tag: string) => ElementBuilder<T>;
+export declare const Div: () => ElementBuilder<HTMLDivElement>;
+export declare const Span: () => ElementBuilder<HTMLSpanElement>;
+export declare const Slot: () => ElementBuilder<HTMLSlotElement>;
+export declare const ButtonBuilder: () => ElementBuilder<HTMLButtonElement>;
+export declare const InputBuilder: () => ElementBuilder<HTMLInputElement>;
+export declare const Style: () => ElementBuilder<HTMLStyleElement>;
+export declare const Label: () => ElementBuilder<HTMLLabelElement>;
+export declare const Ul: () => ElementBuilder<HTMLUListElement>;
+export declare const Li: () => ElementBuilder<HTMLLIElement>;
+export declare const Section: () => ElementBuilder<HTMLElement>;
+export declare const Article: () => ElementBuilder<HTMLElement>;
+export declare const Nav: () => ElementBuilder<HTMLElement>;
+export declare const Header: () => ElementBuilder<HTMLElement>;
+export declare const Footer: () => ElementBuilder<HTMLElement>;
+export declare const Main: () => ElementBuilder<HTMLElement>;
+export declare const DeclarativeShadow: (mode?: "open" | "closed", delegatesFocus?: boolean) => ElementBuilder<HTMLTemplateElement>;

package/dist/utils/builder/index.d.ts

@@ -0,0 +1,9 @@
+export { isSSR } from './env';
+export { EventManager } from './events';
+export { signal, createEffect, computed, batch } from './signal';
+export type { Getter, Setter, SignalOptions } from './signal';
+export { escapeHtml, escapeHtmlAttribute } from './escape';
+export { type MockNode, matchSelector, collectMatches } from './selectors';
+export { DocumentFragmentMock, HTMLElementMock, ShadowRootMock } from './mocks';
+export { type Ref, createRef, ElementBuilder, ShadowBuilder } from './core';
+export { View, Div, Span, Slot, ButtonBuilder, InputBuilder, Style, Label, Ul, Li, Section, Article, Nav, Header, Footer, Main, DeclarativeShadow, } from './factory';