@close-by/clay 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@close-by/clay",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "NiceGUI-like ui.* facade for Clay apps",
   "license": "MIT",
   "type": "module",
@@ -25,9 +25,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@close-by/clay-core": "0.2.2",
-    "@close-by/clay-components": "0.2.2",
-    "@close-by/clay-server": "0.2.2",
+    "@close-by/clay-core": "0.2.3",
+    "@close-by/clay-components": "0.2.3",
+    "@close-by/clay-server": "0.2.3",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/src/index.ts

@@ -52,6 +52,7 @@ import {
   command as commandFactory,
   resizable as resizableFactory,
   scrollArea as scrollAreaFactory,
+  viewportEnter as viewportEnterFactory,
   keybind as keybindFactory,
   kbd as kbdFactory,
   sheet as sheetFactory,
@@ -66,6 +67,7 @@ import {
   markdown as markdownFactory,
   html as htmlFactory,
   image as imageFactory,
+  iframe as iframeFactory,
   upload as uploadFactory,
   rating as ratingFactory,
   colorPicker as colorPickerFactory,
@@ -175,6 +177,7 @@ import {
   type ResizablePanelProps,
   type ResizableHandleProps,
   type ScrollAreaProps,
+  type ViewportEnterProps,
   type KeybindProps,
   type KbdProps,
   type BreadcrumbItem,
@@ -200,6 +203,8 @@ import {
   type MarkdownProps,
   type HtmlProps,
   type ImageProps,
+  type IframeProps,
+  type ViewportEnterProps,
   type UploadProps,
   type UploadVariant,
   type UploadedFile,
@@ -474,6 +479,8 @@ export type {
   MarkdownProps,
   HtmlProps,
   ImageProps,
+  IframeProps,
+  ViewportEnterProps,
   UploadProps,
   UploadVariant,
   UploadedFile,
@@ -774,6 +781,11 @@ export function image(src: string, props?: ImageProps): Element {
   return imageFactory(src, props);
 }
 
+/** Iframe embed. Prefer `ui.iframe`. See {@link IframeProps}. */
+export function iframe(src: string, props?: IframeProps): Element {
+  return iframeFactory(src, props);
+}
+
 /** File upload control (`POST /upload`). Prefer `ui.upload`. See {@link UploadProps}. */
 export function upload(props?: UploadProps): Element {
   return uploadFactory(props);
@@ -1115,6 +1127,23 @@ export function scrollArea(a: any, b?: any): Element {
   return scrollAreaFactory(a, b);
 }
 
+/**
+ * Observe when children enter the viewport (IntersectionObserver).
+ * Prefer `ui.viewportEnter`. See {@link ViewportEnterProps}.
+ *
+ * @example
+ * ```ts
+ * ui.viewportEnter({ onEnter: () => void loadMore(), once: true }, () => {
+ *   ui.label('Lazy section');
+ * });
+ * ```
+ */
+export function viewportEnter(fn: () => void, props?: ViewportEnterProps): Element;
+export function viewportEnter(props: ViewportEnterProps, fn: () => void): Element;
+export function viewportEnter(a: any, b?: any): Element {
+  return viewportEnterFactory(a, b);
+}
+
 /**
  * Headless keyboard chord listener. Prefer `ui.keybind`. See {@link KeybindProps}.
  *
@@ -1485,6 +1514,7 @@ export const ui = {
   markdown,
   html,
   image,
+  iframe,
   upload,
   rating,
   colorPicker,
@@ -1533,6 +1563,7 @@ export const ui = {
   command,
   resizable,
   scrollArea,
+  viewportEnter,
   keybind,
   kbd,
   breadcrumb,