@rangka/client 0.0.1

package/src/widgets/components/ModalWidget.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import type { WidgetProps } from '../types.js';
+import { usePageState } from '../hooks/usePageState.js';
+
+const sizeMap = {
+  sm: 'sm:max-w-sm',
+  md: 'sm:max-w-lg',
+  lg: 'sm:max-w-3xl',
+};
+
+export function ModalWidget({ props, children }: WidgetProps) {
+  const title = (props.title as string) ?? '';
+  const size = (props.size as 'sm' | 'md' | 'lg') ?? 'md';
+  const closable = (props.closable as boolean) ?? true;
+  const visibleField = props._visibleField as string | undefined;
+  const state = usePageState();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open && closable && visibleField && visibleField.startsWith('$state.')) {
+      const key = visibleField.slice(7);
+      state.set(key, false);
+    }
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={handleOpenChange}>
+      <DialogContent className={sizeMap[size]} showCloseButton={closable}>
+        {title && (
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+        )}
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+ModalWidget.widgetMeta = {
+  name: 'modal',
+  label: 'Modal',
+  category: 'layout' as const,
+  schema: {
+    size: { type: 'enum' as const, options: ['sm', 'md', 'lg'], default: 'md' },
+    title: { type: 'string' as const },
+    closable: { type: 'boolean' as const, default: true },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/MoneyWidget.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Field, FieldLabel } from '@/components/ui/field';
+import type { WidgetProps } from '../types.js';
+
+export function MoneyWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const currency = (props.currency as string) ?? '$';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const readOnly = (props.readOnly as boolean) ?? bind.meta?.readOnly ?? false;
+  const error = bind.error;
+
+  const rawValue = bind.value as number | null | undefined;
+  const [displayValue, setDisplayValue] = useState<string>(
+    rawValue != null ? rawValue.toFixed(2) : '',
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value;
+    setDisplayValue(text);
+    const num = parseFloat(text);
+    if (!isNaN(num)) {
+      bind.setValue?.(num);
+      on.change?.(num);
+    } else if (text === '') {
+      bind.setValue?.(null);
+      on.change?.(null);
+    }
+  };
+
+  const handleFocus = () => {
+    on.focus?.();
+  };
+
+  const handleBlur = () => {
+    const num = parseFloat(displayValue);
+    if (!isNaN(num)) {
+      setDisplayValue(num.toFixed(2));
+    }
+    on.blur?.();
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className="flex items-center">
+        <span className="inline-flex h-8 items-center border border-r-0 border-input bg-muted px-2 text-xs text-muted-foreground">
+          {currency}
+        </span>
+        <Input
+          type="text"
+          inputMode="decimal"
+          value={displayValue}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          readOnly={readOnly}
+          placeholder="0.00"
+        />
+      </div>
+      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+    </Field>
+  );
+}
+
+MoneyWidget.widgetMeta = {
+  name: 'money',
+  label: 'Money',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    currency: { type: 'string' as const, default: '$' },
+    disabled: { type: 'boolean' as const, default: false },
+    readOnly: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'focus', 'blur'],
+  container: false,
+};

package/src/widgets/components/RepeatWidget.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { WidgetProps } from '../types.js';
+import { useWidgetContext } from '../hooks/useWidgetContext.js';
+import { WidgetContextProvider } from '../hooks/useWidgetContext.js';
+import { buildRowContext } from '../context/builder.js';
+
+export function RepeatWidget({ props, bind: bindProp, children }: WidgetProps) {
+  const ctx = useWidgetContext();
+
+  const layout = (props.layout as string) ?? 'list';
+  const columns = (props.columns as number) ?? 3;
+  const gap = (props.gap as string) ?? 'md';
+
+  // Determine source records:
+  // 1. If bind.value is an array (from bind.field on parent record), use that
+  // 2. Otherwise, read records from parent context (data widget in collection mode)
+  let records: Record<string, unknown>[] = [];
+
+  if (Array.isArray(bindProp.value)) {
+    records = bindProp.value as Record<string, unknown>[];
+  } else if (ctx.records) {
+    records = ctx.records;
+  }
+
+  const gapMap: Record<string, string> = { sm: '8px', md: '16px', lg: '24px' };
+
+  const containerStyle: React.CSSProperties =
+    layout === 'grid'
+      ? {
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+          gap: gapMap[gap] ?? gapMap.md,
+        }
+      : {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: gapMap[gap] ?? gapMap.md,
+        };
+
+  return (
+    <div style={containerStyle} data-widget="repeat" data-layout={layout}>
+      {records.map((record, index) => {
+        const rowCtx = buildRowContext(record, index, ctx);
+        return (
+          <WidgetContextProvider key={(record.id as string) ?? index} value={rowCtx}>
+            <div data-repeat-index={index}>{children}</div>
+          </WidgetContextProvider>
+        );
+      })}
+    </div>
+  );
+}
+
+RepeatWidget.widgetMeta = {
+  name: 'repeat',
+  label: 'Repeat',
+  category: 'data' as const,
+  schema: {
+    layout: { type: 'enum' as const, options: ['list', 'grid'], default: 'list' },
+    columns: { type: 'number' as const, default: 3 },
+    gap: { type: 'enum' as const, options: ['sm', 'md', 'lg'], default: 'md' },
+  },
+  binding: 'field' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/ScrollAreaWidget.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { WidgetProps } from '../types.js';
+
+export function ScrollAreaWidget({ props, children }: WidgetProps) {
+  const direction = (props.direction as 'vertical' | 'horizontal' | 'both') ?? 'vertical';
+  const height = props.height as string | undefined;
+  const maxHeight = props.maxHeight as string | undefined;
+
+  return (
+    <ScrollArea
+      className={cn(
+        direction === 'horizontal' && 'overflow-x-auto',
+        height && (height === '100%' ? 'h-full' : `h-[${height}]`),
+        maxHeight && `max-h-[${maxHeight}]`,
+      )}
+    >
+      {children}
+    </ScrollArea>
+  );
+}
+
+ScrollAreaWidget.widgetMeta = {
+  name: 'scroll-area',
+  label: 'Scroll Area',
+  category: 'layout' as const,
+  schema: {
+    direction: {
+      type: 'enum' as const,
+      options: ['vertical', 'horizontal', 'both'],
+      default: 'vertical',
+    },
+    height: { type: 'string' as const },
+    maxHeight: { type: 'string' as const },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/SectionWidget.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { ChevronRight } from 'lucide-react';
+import type { SpacingToken } from '@rangka/shared';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import type { WidgetProps } from '../types.js';
+
+const paddingMap: Record<SpacingToken, string> = {
+  none: 'p-0',
+  xs: 'p-1',
+  sm: 'p-2',
+  md: 'p-4',
+  lg: 'p-6',
+  xl: 'p-8',
+  '2xl': 'p-12',
+};
+
+export function SectionWidget({ props, children }: WidgetProps) {
+  const label = (props.label as string) ?? '';
+  const collapsible = (props.collapsible as boolean) ?? false;
+  const defaultCollapsed = (props.defaultCollapsed as boolean) ?? false;
+  const padding = (props.padding as SpacingToken) ?? 'md';
+  const icon = props.icon as string | undefined;
+
+  const [open, setOpen] = useState(!defaultCollapsed);
+
+  if (!collapsible) {
+    return (
+      <div className="flex flex-col">
+        <div className="flex items-center gap-2 border-b border-border pb-2 mb-3">
+          {icon && <span className="text-muted-foreground">{icon}</span>}
+          <h3 className="text-sm font-medium">{label}</h3>
+        </div>
+        <div className={cn(paddingMap[padding])}>{children}</div>
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col">
+        <CollapsibleTrigger className="flex items-center gap-2 border-b border-border pb-2 mb-3 cursor-pointer hover:text-foreground/80">
+          <ChevronRight
+            className={cn(
+              'h-4 w-4 text-muted-foreground transition-transform duration-150',
+              open && 'rotate-90',
+            )}
+          />
+          {icon && <span className="text-muted-foreground">{icon}</span>}
+          <h3 className="text-sm font-medium">{label}</h3>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className={cn(paddingMap[padding])}>{children}</div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+SectionWidget.widgetMeta = {
+  name: 'section',
+  label: 'Section',
+  category: 'layout' as const,
+  schema: {
+    label: { type: 'string' as const, required: true },
+    collapsible: { type: 'boolean' as const, default: false },
+    defaultCollapsed: { type: 'boolean' as const, default: false },
+    padding: {
+      type: 'enum' as const,
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      default: 'md',
+    },
+    icon: { type: 'string' as const },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/SelectWidget.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '@/components/ui/select';
+import { Field, FieldLabel } from '@/components/ui/field';
+import type { WidgetProps } from '../types.js';
+
+export function SelectWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const placeholder = (props.placeholder as string) ?? '';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const error = bind.error;
+
+  const rawOptions = (bind.meta?.options ?? []) as (string | { label: string; value: string })[];
+  const options = rawOptions.map((opt) =>
+    typeof opt === 'string' ? { label: opt, value: opt } : opt,
+  );
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Select
+        value={(bind.value as string) ?? ''}
+        onValueChange={(val) => {
+          bind.setValue?.(val);
+          on.change?.(val);
+        }}
+        disabled={disabled}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((opt) => (
+            <SelectItem key={opt.value} value={opt.value}>
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+    </Field>
+  );
+}
+
+SelectWidget.widgetMeta = {
+  name: 'select',
+  label: 'Select',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    placeholder: { type: 'string' as const },
+    searchable: { type: 'boolean' as const, default: false },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change'],
+  container: false,
+};

package/src/widgets/components/SequenceWidget.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Field, FieldLabel } from '@/components/ui/field';
+import type { WidgetProps } from '../types.js';
+
+export function SequenceWidget({ props, bind }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const value = bind.value as string | null | undefined;
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className="flex items-center h-7">
+        <Badge variant="secondary" className="font-mono text-xs">
+          {value || 'Auto'}
+        </Badge>
+      </div>
+    </Field>
+  );
+}
+
+SequenceWidget.widgetMeta = {
+  name: 'sequence',
+  label: 'Sequence',
+  category: 'display' as const,
+  schema: {
+    label: { type: 'string' as const },
+  },
+  binding: 'field' as const,
+  triggers: [],
+  container: false,
+};

package/src/widgets/components/SpacerWidget.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+const sizeMap: Record<string, string> = {
+  xs: 'h-1',
+  sm: 'h-2',
+  md: 'h-4',
+  lg: 'h-6',
+  xl: 'h-8',
+};
+
+export function SpacerWidget({ props }: WidgetProps) {
+  const size = (props.size as string) ?? 'md';
+
+  return <div className={cn(sizeMap[size] ?? 'h-4')} aria-hidden="true" />;
+}
+
+SpacerWidget.widgetMeta = {
+  name: 'spacer',
+  label: 'Spacer',
+  category: 'layout' as const,
+  schema: {
+    size: { type: 'enum' as const, options: ['xs', 'sm', 'md', 'lg', 'xl'], default: 'md' },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: false,
+};

package/src/widgets/components/SplitWidget.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { SpacingToken } from '@rangka/shared';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
+import { WidgetRenderer } from '../renderer/WidgetRenderer.js';
+import type { WidgetProps } from '../types.js';
+
+const paddingMap: Record<SpacingToken, string> = {
+  none: 'p-0',
+  xs: 'p-1',
+  sm: 'p-2',
+  md: 'p-4',
+  lg: 'p-6',
+  xl: 'p-8',
+  '2xl': 'p-12',
+};
+
+export function SplitWidget({ props, childNodes }: WidgetProps) {
+  const sizes = props.sizes as number[] | undefined;
+  const direction = (props.direction as 'horizontal' | 'vertical') ?? 'horizontal';
+  const minSize = (props.minSize as number) ?? 10;
+  const padding = props.padding as SpacingToken | undefined;
+
+  const nodes = childNodes ?? [];
+
+  return (
+    <ResizablePanelGroup
+      orientation={direction}
+      className={cn('h-full w-full', padding && paddingMap[padding])}
+    >
+      {nodes.map((node, i) => (
+        <React.Fragment key={node.id ?? i}>
+          {i > 0 && <ResizableHandle withHandle />}
+          <ResizablePanel defaultSize={sizes?.[i] ?? 100 / nodes.length} minSize={minSize}>
+            <WidgetRenderer node={node} />
+          </ResizablePanel>
+        </React.Fragment>
+      ))}
+    </ResizablePanelGroup>
+  );
+}
+
+SplitWidget.widgetMeta = {
+  name: 'split',
+  label: 'Split',
+  category: 'layout' as const,
+  schema: {
+    sizes: { type: 'array' as const },
+    direction: {
+      type: 'enum' as const,
+      options: ['horizontal', 'vertical'],
+      default: 'horizontal',
+    },
+    minSize: { type: 'number' as const, default: 10 },
+    padding: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/StackWidget.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { SpacingToken } from '@rangka/shared';
+import type { WidgetProps } from '../types.js';
+
+const paddingMap: Record<SpacingToken, string> = {
+  none: 'p-0',
+  xs: 'p-1',
+  sm: 'p-2',
+  md: 'p-4',
+  lg: 'p-6',
+  xl: 'p-8',
+  '2xl': 'p-12',
+};
+
+export function StackWidget({ props, children }: WidgetProps) {
+  const height = (props.height as string) ?? 'auto';
+  const padding = props.padding as SpacingToken | undefined;
+
+  return (
+    <div
+      className={cn(
+        'relative',
+        height === 'auto' ? 'h-auto' : height === '100%' ? 'h-full' : `h-[${height}]`,
+        padding && paddingMap[padding],
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+StackWidget.widgetMeta = {
+  name: 'stack',
+  label: 'Stack',
+  category: 'layout' as const,
+  schema: {
+    height: { type: 'string' as const, default: 'auto' },
+    padding: { type: 'enum' as const, options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};