@close-by/clay 0.2.2 → 0.2.4

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@close-by/clay",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "NiceGUI-like ui.* facade for Clay apps",
   "license": "MIT",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./page-tsconfig": "./page-tsconfig.json"
   },
   "files": [
     "src",
+    "page-tsconfig.json",
     "README.md",
     "LICENSE",
     "!src/**/*.test.ts",
@@ -25,9 +27,10 @@
     "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-compiler": "0.2.4",
+    "@close-by/clay-core": "0.2.4",
+    "@close-by/clay-components": "0.2.4",
+    "@close-by/clay-server": "0.2.4",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/page-tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "types": ["bun-types"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true
+  }
+}

package/src/index.ts

@@ -22,6 +22,8 @@ import {
   progress as progressFactory,
   separator as separatorFactory,
   icon as iconFactory,
+  iconText as iconTextFactory,
+  statusDot as statusDotFactory,
   stat as statFactory,
   dataTable as dataTableFactory,
   areaChart as areaChartFactory,
@@ -52,6 +54,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 +69,7 @@ import {
   markdown as markdownFactory,
   html as htmlFactory,
   image as imageFactory,
+  iframe as iframeFactory,
   upload as uploadFactory,
   rating as ratingFactory,
   colorPicker as colorPickerFactory,
@@ -109,6 +113,10 @@ import {
   type ProgressProps,
   type SeparatorProps,
   type IconProps,
+  type IconTextProps,
+  type IconSlotProps,
+  type StatusDotProps,
+  type StatusDotColor,
   type StatItem,
   type DataTableProps,
   type DataTableAction,
@@ -175,6 +183,7 @@ import {
   type ResizablePanelProps,
   type ResizableHandleProps,
   type ScrollAreaProps,
+  type ViewportEnterProps,
   type KeybindProps,
   type KbdProps,
   type BreadcrumbItem,
@@ -200,6 +209,8 @@ import {
   type MarkdownProps,
   type HtmlProps,
   type ImageProps,
+  type IframeProps,
+  type ViewportEnterProps,
   type UploadProps,
   type UploadVariant,
   type UploadedFile,
@@ -474,6 +485,8 @@ export type {
   MarkdownProps,
   HtmlProps,
   ImageProps,
+  IframeProps,
+  ViewportEnterProps,
   UploadProps,
   UploadVariant,
   UploadedFile,
@@ -617,7 +630,10 @@ export function label(text?: string | (() => string), props?: Omit<LabelProps, '
 }
 
 /** Clickable button. Prefer `ui.button`. See {@link ButtonProps}. */
-export function button(text?: string, props?: Omit<ButtonProps, 'text'>): Element {
+export function button(
+  text?: string | (() => string),
+  props?: Omit<ButtonProps, 'text'>,
+): Element {
   return buttonFactory(text, props);
 }
 
@@ -706,8 +722,11 @@ export function externalLink(
 }
 
 /** Small status badge. Prefer `ui.badge`. See {@link BadgeProps}. */
-export function badge(text?: string, props?: Omit<BadgeProps, 'text'>): Element {
-  return badgeFactory(text, props);
+export function badge(
+  text?: string | (() => string) | BadgeProps,
+  props?: Omit<BadgeProps, 'text'>,
+): Element {
+  return badgeFactory(text as Parameters<typeof badgeFactory>[0], props);
 }
 
 /**
@@ -759,6 +778,19 @@ export function icon(name: string, props?: Omit<IconProps, 'name'>): Element {
   return iconFactory(name, props);
 }
 
+/** Inline icon + text (replaces manual `ui.row` + `ui.icon` + `ui.label`). See {@link IconTextProps}. */
+export function iconText(
+  text?: string | (() => string),
+  props?: Omit<IconTextProps, 'text'>,
+): Element {
+  return iconTextFactory(text, props);
+}
+
+/** Status dot (or icon) + label for feeds and tables. See {@link StatusDotProps}. */
+export function statusDot(props?: StatusDotProps): Element {
+  return statusDotFactory(props);
+}
+
 /** Render markdown to HTML. Prefer `ui.markdown`. See {@link MarkdownProps}. */
 export function markdown(text?: string, props?: MarkdownProps): Element {
   return markdownFactory(text, props);
@@ -774,6 +806,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 +1152,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 +1539,7 @@ export const ui = {
   markdown,
   html,
   image,
+  iframe,
   upload,
   rating,
   colorPicker,
@@ -1533,6 +1588,7 @@ export const ui = {
   command,
   resizable,
   scrollArea,
+  viewportEnter,
   keybind,
   kbd,
   breadcrumb,

package/src/pages.ts

@@ -1,10 +1,12 @@
 import { fileURLToPath, pathToFileURL } from 'url';
 import { join } from 'path';
+import { readFile } from 'fs/promises';
 import {
   clearPages,
   getRegisteredPaths,
   type PageFn,
 } from '@close-by/clay-core';
+import { warnClayPageIssues } from '@close-by/clay-compiler';
 import type { AppNavItem } from '@close-by/clay-components';
 
 /**
@@ -26,6 +28,15 @@ export async function importFresh(absPath: string): Promise<unknown> {
   return import(href);
 }
 
+async function warnPageModuleIfNeeded(absPath: string): Promise<void> {
+  try {
+    const text = await readFile(absPath, 'utf8');
+    warnClayPageIssues(text, absPath);
+  } catch {
+    // unreadable — import will surface the error
+  }
+}
+
 /**
  * Optional metadata for a registered page — used by `navFromPages` / `loadPages`.
  * Export as `pageMeta` from a page module, or pass via `attachPageMeta`.
@@ -108,6 +119,7 @@ export async function loadPages(dir: string | URL): Promise<string[]> {
   for (const relative of files) {
     const fullPath = join(absDir, relative);
     const pathsBefore = new Set(getRegisteredPaths());
+    await warnPageModuleIfNeeded(fullPath);
     const mod = (await importFresh(fullPath)) as { pageMeta?: PageMeta };
     const added = getRegisteredPaths().filter((p) => !pathsBefore.has(p));
     if (added.length === 1 && mod.pageMeta) {