devnonla-ui 0.1.0

package/src/form/variants/FieldSelectRemote.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Select } from "../../select/Select";
+import { useFormExtra } from "../common/context";
+import type { ISelectItemProps } from "../common/types";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  endpoint: string;
+  keyProp: string;
+  labelProp: string;
+  dataProp?: string;
+  status?: "error" | "warning";
+};
+
+export function FieldSelectRemote({ field, endpoint, keyProp, labelProp, dataProp, status }: Props) {
+  const { fetcher } = useFormExtra();
+  const [loading, setLoading] = useState(false);
+  const [choices, setChoices] = useState<ISelectItemProps[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (!endpoint || !fetcher) return;
+      setLoading(true);
+      try {
+        const rs = await fetcher(endpoint);
+        if (cancelled) return;
+        const arr = dataProp && rs && typeof rs === "object" ? (rs as Record<string, unknown>)[dataProp] : rs;
+        if (Array.isArray(arr)) {
+          setChoices(
+            arr.map((item) => {
+              const row = item as Record<string, unknown>;
+              return {
+                value: row[keyProp ?? "key"] as string | number,
+                label: String(row[labelProp ?? "label"] ?? ""),
+              };
+            }),
+          );
+        }
+      } catch (err) {
+        console.error("[nonla-ui Form] select_remote fetch failed:", err);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [endpoint, keyProp, labelProp, dataProp, fetcher]);
+
+  return (
+    <Select
+      className="w-full"
+      value={field.value == null || field.value === "" ? null : (field.value as string | number)}
+      onChange={(v) => field.onChange(v)}
+      placeholder={loading ? "Loading..." : "Select..."}
+      disabled={loading && choices.length === 0}
+      allowClear
+      showSearch
+      status={status}
+      options={choices.map((c) => ({ label: c.label, value: c.value }))}
+    />
+  );
+}

package/src/form/variants/FieldSwitch.tsx

@@ -0,0 +1,17 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Switch } from "../../switch/Switch";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+};
+
+export function FieldSwitch({ field, options }: Props) {
+  return (
+    <Switch
+      checked={Boolean(field.value)}
+      onChange={(checked) => field.onChange(checked)}
+      disabled={options?.disabled as boolean | undefined}
+    />
+  );
+}

package/src/form/variants/FieldTextarea.tsx

@@ -0,0 +1,25 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { Input } from "../../input/Input";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+  status?: "error" | "warning";
+};
+
+export function FieldTextarea({ field, options, status }: Props) {
+  const { value, onChange, onBlur, name, ref } = field;
+  return (
+    <Input.TextArea
+      className="w-full"
+      name={name}
+      ref={ref as never}
+      onBlur={onBlur}
+      value={value == null ? "" : String(value)}
+      onChange={(e) => onChange(e.target.value)}
+      status={status}
+      rows={4}
+      {...(options as object)}
+    />
+  );
+}

package/src/form/variants/FieldTime.tsx

@@ -0,0 +1,25 @@
+import type { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { TimePicker } from "../../timepicker/TimePicker";
+
+type Props = {
+  field: ControllerRenderProps<FieldValues, string>;
+  options?: Record<string, unknown>;
+  status?: "error" | "warning";
+};
+
+export function FieldTime({ field, options, status }: Props) {
+  const opts = options ?? {};
+  return (
+    <TimePicker
+      className="w-full"
+      value={(field.value as string | Date | null) ?? null}
+      onChange={(time) => field.onChange(time)}
+      placeholder={(opts.placeholder as string) ?? "Select time"}
+      status={status}
+      format={opts.format as "HH:mm" | "HH:mm:ss" | undefined}
+      use12Hours={opts.use12Hours as boolean | undefined}
+      allowClear={opts.allowClear !== false}
+      disabled={opts.disabled as boolean | undefined}
+    />
+  );
+}

package/src/form-layout/FormLayout.tsx

@@ -0,0 +1,74 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type FormLayoutProps = HTMLAttributes<HTMLDivElement> & {
+  /** antd Form layout — only vertical is used in this app. */
+  layout?: "horizontal" | "vertical" | "inline";
+  children?: ReactNode;
+};
+
+function FormRoot({ layout = "vertical", className, children, ...rest }: FormLayoutProps) {
+  return (
+    <div
+      className={cn(
+        layout === "inline" ? "flex flex-row flex-wrap items-end gap-3" : "flex flex-col gap-4",
+        className,
+      )}
+      data-layout={layout}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type FormLayoutItemProps = {
+  label?: ReactNode;
+  required?: boolean;
+  /** antd `extra` — help text under the control. */
+  extra?: ReactNode;
+  help?: ReactNode;
+  validateStatus?: "success" | "warning" | "error" | "validating";
+  layout?: "horizontal" | "vertical";
+  className?: string;
+  children?: ReactNode;
+};
+
+function FormItem({
+  label,
+  required,
+  extra,
+  help,
+  validateStatus,
+  layout = "vertical",
+  className,
+  children,
+}: FormLayoutItemProps) {
+  const error = validateStatus === "error";
+  return (
+    <div
+      className={cn(
+        layout === "horizontal" ? "flex flex-row items-start gap-3" : "flex flex-col gap-1.5",
+        className,
+      )}
+    >
+      {label != null && label !== false ? (
+        <label className={cn("text-sm text-foreground", layout === "horizontal" && "pt-1.5 shrink-0")}>
+          {label}
+          {required ? <span className="ml-1 text-destructive">*</span> : null}
+        </label>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        {children}
+        {extra != null && extra !== "" ? <div className="mt-1 pl-2.75 text-xs leading-snug text-muted-foreground">{extra}</div> : null}
+        {help != null && help !== "" ? (
+          <div className={cn("mt-1 pl-2.75 text-xs leading-snug", error ? "text-destructive" : "text-muted-foreground")}>{help}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/** Layout-only Form (antd Form / Form.Item drop-in). Schema forms use `SchemaForm`. */
+export const Form = Object.assign(FormRoot, { Item: FormItem });
+export { FormItem };

package/src/icon/FluentIcon.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { cn } from "../lib/cn";
+import { ensureFluentIcons, getFluentImgSrc } from "./fluent";
+
+export function FluentIcon({ name, size = 16, className }: { name: string; size?: number; className?: string }) {
+  const [src, setSrc] = useState<string | null>(() => getFluentImgSrc(name));
+
+  useEffect(() => {
+    const cached = getFluentImgSrc(name);
+    if (cached) {
+      setSrc(cached);
+      return;
+    }
+    let cancelled = false;
+    void ensureFluentIcons().then(() => {
+      if (!cancelled) setSrc(getFluentImgSrc(name));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [name]);
+
+  if (!src) {
+    return <span aria-hidden className={cn("inline-block shrink-0", className)} style={{ width: size, height: size }} />;
+  }
+
+  return <img src={src} alt="" width={size} height={size} draggable={false} className={cn("shrink-0 select-none pointer-events-none", className)} />;
+}

package/src/icon/fluent.ts

@@ -0,0 +1,75 @@
+export const ICON_PREFIX = "fluent-color";
+export const DEFAULT_ICON_NAME = "bot-24";
+export const DEFAULT_TOOL_ICON = `${ICON_PREFIX}:${DEFAULT_ICON_NAME}`;
+
+const SIZE_SUFFIX = /-24$/;
+
+type IconifyIcon = { body: string; width?: number; height?: number };
+type IconifyPack = {
+  icons?: Record<string, IconifyIcon>;
+  width?: number;
+  height?: number;
+};
+
+let memoryNames: string[] | null = null;
+const svgByName = new Map<string, string>();
+const imgSrcByName = new Map<string, string>();
+let inflight: Promise<string[]> | null = null;
+
+function hydrate(pack: IconifyPack): string[] {
+  const defaultW = pack.width ?? 24;
+  const defaultH = pack.height ?? 24;
+  const names: string[] = [];
+  for (const [name, icon] of Object.entries(pack.icons ?? {})) {
+    if (!SIZE_SUFFIX.test(name) || !icon?.body) continue;
+    const w = icon.width ?? defaultW;
+    const h = icon.height ?? defaultH;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 ${w} ${h}">${icon.body}</svg>`;
+    svgByName.set(name, svg);
+    names.push(name);
+  }
+  memoryNames = names;
+  return names;
+}
+
+/** Loads the vendored Fluent Color pack (code-split). No network. */
+export function ensureFluentIcons(): Promise<string[]> {
+  if (memoryNames) return Promise.resolve(memoryNames);
+  if (inflight) return inflight;
+  inflight = import("@iconify-json/fluent-color/icons.json")
+    .then((mod) => hydrate((mod.default ?? mod) as IconifyPack))
+    .finally(() => {
+      inflight = null;
+    });
+  return inflight;
+}
+
+export function getIconNames(): string[] {
+  return memoryNames ?? [];
+}
+
+export function getFluentImgSrc(name: string): string | null {
+  const hit = imgSrcByName.get(name);
+  if (hit) return hit;
+  const svg = svgByName.get(name);
+  if (!svg) return null;
+  const src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  imgSrcByName.set(name, src);
+  return src;
+}
+
+export function isSvgIcon(value?: string | null): boolean {
+  return !!value && value.trimStart().startsWith("<svg");
+}
+
+export function isFluentIcon(value?: string | null): boolean {
+  return !!value && value.startsWith(`${ICON_PREFIX}:`);
+}
+
+export function fluentIconName(value: string): string {
+  return value.slice(ICON_PREFIX.length + 1);
+}
+
+export function fluentIconRef(name: string): string {
+  return `${ICON_PREFIX}:${name}`;
+}

package/src/index.ts

@@ -0,0 +1,214 @@
+export { App, useAppConfig } from "./app/App";
+export type { AppProps, NonlaAppConfig } from "./app/App";
+
+export { Button } from "./button/Button";
+export type { ButtonProps, ButtonGroupProps, ButtonType, ButtonSize, ButtonColor, ButtonVariant } from "./button/Button";
+export { ButtonCopy } from "./button/ButtonCopy";
+export type { ButtonCopyProps } from "./button/ButtonCopy";
+
+export { Input, TextArea, InputNumber } from "./input/Input";
+export type { InputProps, TextAreaProps, InputNumberProps, InputSize, TextAreaRef, PasswordProps } from "./input/Input";
+export { SearchInput } from "./input/SearchInput";
+export type { SearchInputProps } from "./input/SearchInput";
+/** antd `InputRef` compatibility — native input element. */
+export type InputRef = HTMLInputElement;
+
+export { Select, SelectOption } from "./select/Select";
+export type { SelectProps, SelectOptionConfig, SelectValue } from "./select/Select";
+
+export { Switch } from "./switch/Switch";
+export type { SwitchProps, SwitchVariant } from "./switch/Switch";
+
+export { Checkbox } from "./checkbox/Checkbox";
+export type { CheckboxProps } from "./checkbox/Checkbox";
+
+export { ColorPicker } from "./colorpicker/ColorPicker";
+export type { ColorPickerProps } from "./colorpicker/ColorPicker";
+
+export { Tooltip } from "./tooltip/Tooltip";
+export type { TooltipProps, TooltipPlacement } from "./tooltip/Tooltip";
+
+export { Modal } from "./modal/Modal";
+export type { ModalProps, ModalConfirmProps } from "./modal/Modal";
+
+export { message } from "./message/message";
+export type { MessageType, MessageConfig } from "./message/message";
+
+export {
+  SchemaForm,
+  FormSchema,
+  FormItem,
+  EFormItemType,
+  hydrateRules,
+  fieldNameOf,
+  isRuleRequired,
+} from "./form";
+export type {
+  SchemaFormProps,
+  FormItemProps,
+  FormFetcher,
+  TForm,
+  TFormItemProps,
+  TFormRule,
+  TRuleValueMessage,
+  ISelectItemProps,
+  IFormItemHelpProps,
+} from "./form";
+
+/** Layout-only Form + Form.Item (antd drop-in for labeled fields). */
+export { Form } from "./form-layout/FormLayout";
+export type { FormLayoutProps, FormLayoutItemProps } from "./form-layout/FormLayout";
+
+export { Alert } from "./alert/Alert";
+export type { AlertProps, AlertType } from "./alert/Alert";
+
+export { Popover } from "./popover/Popover";
+export type { PopoverProps } from "./popover/Popover";
+
+export { Dropdown } from "./dropdown/Dropdown";
+export type { DropdownProps, MenuItemType, MenuProps } from "./dropdown/Dropdown";
+
+export { ContextMenu } from "./dropdown/ContextMenu";
+export type { ContextMenuProps } from "./dropdown/ContextMenu";
+
+export { Popconfirm } from "./popconfirm/Popconfirm";
+export type { PopconfirmProps } from "./popconfirm/Popconfirm";
+
+export { Drawer } from "./drawer/Drawer";
+export type { DrawerProps, DrawerPlacement } from "./drawer/Drawer";
+
+export { Table } from "./table/Table";
+export type {
+  TableProps,
+  ColumnType,
+  ColumnsType,
+  TablePaginationConfig,
+  TableRowSelection,
+  SortOrder,
+} from "./table/Table";
+
+export { Tag } from "./tag/Tag";
+export type { TagProps, TagVariant } from "./tag/Tag";
+
+export { Pagination } from "./pagination/Pagination";
+export type { PaginationProps, PaginationItemType } from "./pagination/Pagination";
+
+export { Empty } from "./empty/Empty";
+export type { EmptyProps } from "./empty/Empty";
+
+export { Spin } from "./spin/Spin";
+export type { SpinProps, SpinVariant } from "./spin/Spin";
+
+export { Skeleton } from "./skeleton/Skeleton";
+export type { SkeletonProps } from "./skeleton/Skeleton";
+
+export { Segmented } from "./segmented/Segmented";
+export type { SegmentedProps, SegmentedOption } from "./segmented/Segmented";
+
+export { DatePicker, RangePicker } from "./datepicker/DatePicker";
+export type { DatePickerProps, RangePickerProps, RangeValue } from "./datepicker/DatePicker";
+
+export { TimePicker } from "./timepicker/TimePicker";
+export type { TimePickerProps, TimeValue } from "./timepicker/TimePicker";
+
+export { Calendar } from "./calendar/Calendar";
+export type { CalendarProps } from "./calendar/Calendar";
+
+export { CodeBlock, CodeBlockCopyButton } from "./codeblock/CodeBlock";
+export type { CodeBlockProps, CodeBlockCopyButtonProps } from "./codeblock/CodeBlock";
+
+export { OverlayScroll } from "./scroll/OverlayScroll";
+export type { OverlayScrollProps, OverlayScrollVisibility } from "./scroll/OverlayScroll";
+
+export {
+  ChatThinking,
+  ChatUserMessage,
+  ChatAgentMessage,
+  ChatError,
+  ChatToolCall,
+  ChatInput,
+  ChatWelcome,
+  ChatSpinner,
+  ChatMarkdown,
+  createChatMarkdownComponents,
+  chatMarkdownComponents,
+  chatMarkdownClass,
+  chatBodyClass,
+  MermaidBlock,
+  AgentPanel,
+  useAgentStream,
+  buildAgentHistory,
+  parseSseStream,
+  formatToolName,
+  prettyJson,
+  isCallAgentToolName,
+  parseCallAgentToolTargetId,
+  parseBgTaskRef,
+  formatBgElapsed,
+  resolveToolUI,
+  CallAgentToolUI,
+  WebFetchToolUI,
+  GetCurrentTimeToolUI,
+  ReadSkillToolUI,
+  RunJsToolUI,
+  BackgroundTaskToolUI,
+  BackgroundTasksBar,
+  ToolUiTrailing,
+} from "./chat";
+export type {
+  ChatThinkingProps,
+  ChatUserMessageProps,
+  ChatAgentMessageProps,
+  ChatErrorProps,
+  ChatToolCallProps,
+  ChatInputProps,
+  ChatWelcomeProps,
+  ChatMarkdownProps,
+  ChatMarkdownStreamState,
+  MermaidBlockProps,
+  AgentPanelProps,
+  AgentMessage,
+  AgentMessageRole,
+  AgentHistoryMessage,
+  AgentStreamRequest,
+  AgentPanelEndpoint,
+  AgentToolAction,
+  ToolUIProps,
+  ChatToolMessage,
+  ChatBgTask,
+  BackgroundTasksBarProps,
+} from "./chat";
+
+export { cn } from "./lib/cn";
+export { glassSurfaceClass, glassOverlayClass, meadowSurfaceClass } from "./lib/surface";
+export { CONTROL_SIZES, normalizeSize, getSizeTokens, controlHeightVar, controlRadiusVar, controlStatusClass } from "./lib/sizes";
+export type { ControlSize, CanonicalSize, ControlSizeTokens } from "./lib/sizes";
+export { placementToRadix } from "./lib/placement";
+export type { PopperPlacement } from "./lib/placement";
+export { NONLA_THEME_KNOBS, NONLA_THEME_KEYS, applyNonlaTheme } from "./theme";
+export type { NonlaThemeKnob, NonlaThemeKnobName, NonlaThemeColorName, NonlaThemeColors, NonlaThemeConfig } from "./theme";
+
+export { FluentIcon } from "./icon/FluentIcon";
+export {
+  ICON_PREFIX,
+  DEFAULT_ICON_NAME,
+  DEFAULT_TOOL_ICON,
+  ensureFluentIcons,
+  getIconNames,
+  getFluentImgSrc,
+  isSvgIcon,
+  isFluentIcon,
+  fluentIconName,
+  fluentIconRef,
+} from "./icon/fluent";
+
+export { DesktopStage } from "./desktop/DesktopStage";
+export { MeadowWallpaper } from "./desktop/MeadowWallpaper";
+export { MeadowDesktop } from "./desktop/MeadowDesktop";
+export { MeadowShell } from "./desktop/MeadowShell";
+export { DesktopHeader, DesktopBarButton, DesktopBarItem, DesktopBarDivider } from "./desktop/DesktopHeader";
+export { DesktopIcon } from "./desktop/DesktopIcon";
+export { DesktopWindow, WindowHeader } from "./desktop/DesktopWindow";
+
+export { Menu, MenuTrigger, MenuItem, MenuAction, MenuDivider } from "./menu/Menu";
+export type { MenuRootProps, MenuTriggerProps, MenuItemProps } from "./menu/Menu";