@yoyaflow/yoya-ui 0.1.0 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yoyaflow/yoya-ui",
-  "version": "0.1.0",
-  "description": "A browser-native UI library that replaces React/Vue-style frameworks: declarative HTML authoring, component library, router, i18n and layout, with zero build steps.",
+  "version": "0.2.0",
+  "description": "A browser-native JS UI library with declarative HTML authoring: component library, router, i18n, theming and layout, works with or without a build tool, SSR-ready.",
   "type": "module",
   "private": false,
   "main": "./dist/yoya-ui.umd.js",

package/types/async.d.ts

@@ -1,4 +1,12 @@
-import type { ChildInput, ElementNode, ElementOptions, SetupCallback, SetupInput } from './core.js';
+import type {
+  ChildInput,
+  ElementFactory,
+  ElementNode,
+  ElementOptions,
+  SetupCallback,
+  SetupInput
+} from './core.js';
+import type { HtmlElementNode } from './html.js';
 
 export type DynamicLoaderStatus = 'pending' | 'loading' | 'loaded' | 'error';
 
@@ -51,8 +59,50 @@ export function preloadDynamicModule(
 /** Clears the shared module cache (all entries when cacheKey is omitted). */
 export function clearDynamicModuleCache(cacheKey?: string | null): void;
 
+export type SkeletonVariant = 'paragraph' | 'avatar' | 'block';
+
+/** Loading placeholder with paragraph / avatar / block variants. */
+export class VSkeleton extends HtmlElementNode {
+  variant(): SkeletonVariant;
+  variant(value: SkeletonVariant): VSkeleton;
+  rows(): number;
+  rows(value: number): VSkeleton;
+  barHeight(): number;
+  barHeight(value: number): VSkeleton;
+  gap(): number;
+  gap(value: number): VSkeleton;
+  avatarSize(): number;
+  avatarSize(value: number): VSkeleton;
+  active(): boolean;
+  active(value: boolean): VSkeleton;
+  motion(): string;
+  motion(value: string): VSkeleton;
+}
+
+export const vSkeleton: ElementFactory<VSkeleton>;
+
+/** Lazy image with native lazy loading and loading / loaded / error states. */
+export class VLazyImage extends HtmlElementNode {
+  src(): string | null;
+  src(value: string | null): VLazyImage;
+  alt(): string;
+  alt(value: string): VLazyImage;
+  defer(): boolean;
+  defer(value: boolean): VLazyImage;
+  state(): 'loading' | 'loaded' | 'error';
+  retry(): VLazyImage;
+}
+
+export const vLazyImage: ElementFactory<VLazyImage>;
+
 /**
  * Parent-shortcut surface merged onto HtmlElementNode. vDynamicLoader is
  * registered on ElementNode and inherited, so it is declared there.
  */
-export interface AsyncParentShortcuts {}
+export interface AsyncParentShortcuts {
+  vSkeleton(first?: SetupInput<VSkeleton> | null, callback?: SetupCallback<VSkeleton>): VSkeleton;
+  vLazyImage(
+    first?: SetupInput<VLazyImage> | null,
+    callback?: SetupCallback<VLazyImage>
+  ): VLazyImage;
+}

package/types/data-display.d.ts

@@ -461,6 +461,27 @@ export const vTimeline: ElementFactory<VTimeline>;
 export const vTimelineItem: ElementFactory<VTimelineItem>;
 export const vTrendCard: ElementFactory<VTrendCard>;
 
+/** Image lightbox with lazy large image, zoom / pan and ESC close. */
+export class VImagePreview extends HtmlElementNode {
+  src(): string | null;
+  src(value: string | null): VImagePreview;
+  thumb(): string | null;
+  thumb(value: string | null): VImagePreview;
+  alt(): string;
+  alt(value: string): VImagePreview;
+  zoom(): number;
+  zoom(value: number): VImagePreview;
+  resetZoom(): VImagePreview;
+  state(): 'open' | 'closed';
+  open(): VImagePreview;
+  close(): VImagePreview;
+  toggle(): VImagePreview;
+}
+
+export const vImagePreview: ElementFactory<VImagePreview> & {
+  (first?: SetupInput<VImagePreview> | null, callback?: SetupCallback<VImagePreview>): VImagePreview;
+};
+
 /** Parent-shortcut surface merged onto HtmlElementNode. */
 export interface DataDisplayParentShortcuts {
   vAvatar(first?: SetupInput<VAvatar> | null, callback?: SetupCallback<VAvatar>): VAvatar;
@@ -488,6 +509,10 @@ export interface DataDisplayParentShortcuts {
     callback?: SetupCallback<VDigitalBoardItem>
   ): VDigitalBoardItem;
   vGauge(first?: SetupInput<VGauge> | null, callback?: SetupCallback<VGauge>): VGauge;
+  vImagePreview(
+    first?: SetupInput<VImagePreview> | null,
+    callback?: SetupCallback<VImagePreview>
+  ): VImagePreview;
   vPagination(
     first?: SetupInput<PaginationComponent> | null,
     callback?: SetupCallback<PaginationComponent>

package/types/effects.d.ts

@@ -1,4 +1,5 @@
 import type { ElementFactory, ElementOptions, SetupCallback, SetupInput } from './core.js';
+import type { HtmlElementNode } from './html.js';
 import type { VButton } from './actions.js';
 
 export type GlowMotion = 'auto' | 'sweep' | 'pulse' | 'none' | string;
@@ -29,12 +30,35 @@ export const vGlowButton: ElementFactory<VGlowButton> & {
   (first?: SetupInput<VGlowButton> | null, callback?: SetupCallback<VGlowButton>): VGlowButton;
 };
 
+export type TransitionMotion = 'auto' | 'always';
+
+/** Generic enter / leave transition wrapper driven by CSS or Web Animations API. */
+export class VTransition extends HtmlElementNode {
+  show(): boolean;
+  show(value: boolean): VTransition;
+  enter(): VTransition;
+  leave(): VTransition;
+  toggle(): VTransition;
+  motion(): TransitionMotion;
+  motion(value: TransitionMotion): VTransition;
+  duration(): number;
+  duration(value: number): VTransition;
+}
+
+export const vTransition: ElementFactory<VTransition> & {
+  (first?: SetupInput<VTransition> | null, callback?: SetupCallback<VTransition>): VTransition;
+};
+
 /** Parent-shortcut surface merged onto HtmlElementNode. */
 export interface EffectsParentShortcuts {
   vGlowButton(
     first?: SetupInput<VGlowButton> | null,
     callback?: SetupCallback<VGlowButton>
   ): VGlowButton;
+  vTransition(
+    first?: SetupInput<VTransition> | null,
+    callback?: SetupCallback<VTransition>
+  ): VTransition;
 }
 
 export type { ElementOptions };

package/types/layout.d.ts

@@ -339,6 +339,20 @@ export const vSplitPanel: ElementFactory<VSplitPanel> & {
   (first?: SetupInput<VSplitPanel> | null, callback?: SetupCallback<VSplitPanel>): VSplitPanel;
 };
 
+/** Masonry layout built on CSS multi-columns with configurable columns and gap. */
+export class VMasonry extends HtmlElementNode {
+  columns(): number;
+  columns(value: number): VMasonry;
+  gap(): number;
+  gap(value: number): VMasonry;
+  minColumnWidth(): number | null;
+  minColumnWidth(value: number | null): VMasonry;
+}
+
+export const vMasonry: ElementFactory<VMasonry> & {
+  (first?: SetupInput<VMasonry> | null, callback?: SetupCallback<VMasonry>): VMasonry;
+};
+
 // ---------------------------------------------------------------------------
 // Theme shell
 // ---------------------------------------------------------------------------
@@ -424,6 +438,7 @@ export interface LayoutParentShortcuts {
     first?: SetupInput<VSplitPanel> | null,
     callback?: SetupCallback<VSplitPanel>
   ): VSplitPanel;
+  vMasonry(first?: SetupInput<VMasonry> | null, callback?: SetupCallback<VMasonry>): VMasonry;
 }
 
 export type { ElementOptions, SetupInput };