@rangka/client 0.0.1

package/src/widgets/components/AttachmentWidget.tsx

@@ -0,0 +1,111 @@
+import React, { useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+interface FileValue {
+  name: string;
+  url?: string;
+  size?: number;
+}
+
+export function AttachmentWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const accept = (props.accept as string) ?? '';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const fileValue = bind.value as FileValue | null | undefined;
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const value = { name: file.name, size: file.size };
+      bind.setValue?.(value);
+      on.change?.(value);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (disabled) return;
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      const value = { name: file.name, size: file.size };
+      bind.setValue?.(value);
+      on.change?.(value);
+    }
+  };
+
+  const handleRemove = () => {
+    bind.setValue?.(null);
+    on.remove?.();
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      {fileValue ? (
+        <div className="flex items-center gap-2 rounded-md border border-input px-3 py-2">
+          <span className="flex-1 truncate text-sm">{fileValue.name}</span>
+          {fileValue.size && (
+            <span className="text-xs text-muted-foreground">
+              {(fileValue.size / 1024).toFixed(1)} KB
+            </span>
+          )}
+          {!disabled && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRemove}
+              className="h-5 px-1"
+              aria-label="Remove file"
+            >
+              ×
+            </Button>
+          )}
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'flex flex-col items-center justify-center rounded-md border-2 border-dashed border-input p-4 text-center transition-colors',
+            !disabled && 'cursor-pointer hover:border-primary/50 hover:bg-accent/50',
+            disabled && 'opacity-50 cursor-not-allowed',
+          )}
+          onClick={() => !disabled && inputRef.current?.click()}
+          onDrop={handleDrop}
+          onDragOver={(e) => e.preventDefault()}
+          role="button"
+          aria-label="Upload file"
+        >
+          <p className="text-xs text-muted-foreground">Drop a file here or click to browse</p>
+        </div>
+      )}
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleFileChange}
+        className="hidden"
+        disabled={disabled}
+      />
+    </Field>
+  );
+}
+
+AttachmentWidget.widgetMeta = {
+  name: 'attachment',
+  label: 'Attachment',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    accept: { type: 'string' as const },
+    maxSize: { type: 'string' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'remove'],
+  container: false,
+};

package/src/widgets/components/AttachmentsWidget.tsx

@@ -0,0 +1,121 @@
+import React, { useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+interface FileValue {
+  name: string;
+  url?: string;
+  size?: number;
+}
+
+export function AttachmentsWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const accept = (props.accept as string) ?? '';
+  const maxCount = (props.maxCount as number) ?? 10;
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const files = (bind.value as FileValue[] | null) ?? [];
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newFiles = Array.from(e.target.files ?? []).map((f) => ({ name: f.name, size: f.size }));
+    const next = [...files, ...newFiles].slice(0, maxCount);
+    bind.setValue?.(next);
+    on.change?.(next);
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (disabled) return;
+    const newFiles = Array.from(e.dataTransfer.files).map((f) => ({ name: f.name, size: f.size }));
+    const next = [...files, ...newFiles].slice(0, maxCount);
+    bind.setValue?.(next);
+    on.change?.(next);
+  };
+
+  const handleRemove = (index: number) => {
+    const next = files.filter((_, i) => i !== index);
+    bind.setValue?.(next);
+    on.remove?.(index);
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      {files.length > 0 && (
+        <ul className="mb-2 space-y-1" role="list">
+          {files.map((file, i) => (
+            <li
+              key={`${file.name}-${i}`}
+              className="flex items-center gap-2 rounded-md border border-input px-3 py-1.5"
+            >
+              <span className="flex-1 truncate text-sm">{file.name}</span>
+              {file.size && (
+                <span className="text-xs text-muted-foreground">
+                  {(file.size / 1024).toFixed(1)} KB
+                </span>
+              )}
+              {!disabled && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemove(i)}
+                  className="h-5 px-1"
+                  aria-label={`Remove ${file.name}`}
+                >
+                  ×
+                </Button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+      {files.length < maxCount && (
+        <div
+          className={cn(
+            'flex flex-col items-center justify-center rounded-md border-2 border-dashed border-input p-4 text-center transition-colors',
+            !disabled && 'cursor-pointer hover:border-primary/50 hover:bg-accent/50',
+            disabled && 'opacity-50 cursor-not-allowed',
+          )}
+          onClick={() => !disabled && inputRef.current?.click()}
+          onDrop={handleDrop}
+          onDragOver={(e) => e.preventDefault()}
+          role="button"
+          aria-label="Upload files"
+        >
+          <p className="text-xs text-muted-foreground">
+            Drop files here or click to browse ({files.length}/{maxCount})
+          </p>
+        </div>
+      )}
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple
+        onChange={handleFileChange}
+        className="hidden"
+        disabled={disabled}
+      />
+    </Field>
+  );
+}
+
+AttachmentsWidget.widgetMeta = {
+  name: 'attachments',
+  label: 'Attachments',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    accept: { type: 'string' as const },
+    maxSize: { type: 'string' as const },
+    maxCount: { type: 'number' as const, default: 10 },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'remove'],
+  container: false,
+};

package/src/widgets/components/BadgeWidget.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import type { WidgetProps } from '../types.js';
+
+const variantMap: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
+  solid: 'default',
+  outline: 'outline',
+  subtle: 'secondary',
+};
+
+export function BadgeWidget({ props, bind }: WidgetProps) {
+  const label = props.label as string | undefined;
+  const value = (bind.value as string) ?? '';
+  const variant = variantMap[(props.variant as string) ?? 'subtle'] ?? 'secondary';
+
+  return <Badge variant={variant}>{label || value}</Badge>;
+}
+
+BadgeWidget.widgetMeta = {
+  name: 'badge',
+  label: 'Badge',
+  category: 'display' as const,
+  schema: {
+    variant: { type: 'enum' as const, options: ['solid', 'outline', 'subtle'], default: 'subtle' },
+    color: {
+      type: 'enum' as const,
+      options: ['default', 'success', 'warning', 'error', 'info'],
+      default: 'default',
+    },
+    colorMap: { type: 'object' as const },
+  },
+  binding: 'field' as const,
+  triggers: [],
+  container: false,
+};

package/src/widgets/components/ButtonWidget.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button as UIButton } from '@/components/ui/button';
+import type { WidgetProps } from '../types.js';
+
+export function ButtonWidget({ props, on }: WidgetProps) {
+  const variant = props.variant as string | undefined;
+  const size = props.size as string | undefined;
+
+  return (
+    <UIButton
+      variant={
+        variant === 'primary'
+          ? 'default'
+          : (variant as 'default' | 'secondary' | 'ghost' | 'destructive' | undefined)
+      }
+      size={size === 'md' ? 'default' : (size as 'sm' | 'default' | 'lg' | undefined)}
+      disabled={props.disabled as boolean | undefined}
+      onClick={on.click}
+    >
+      {props.label as string}
+    </UIButton>
+  );
+}
+
+ButtonWidget.widgetMeta = {
+  name: 'button',
+  label: 'Button',
+  category: 'action' as const,
+  schema: {
+    label: { type: 'string' as const, required: true },
+    variant: {
+      type: 'enum' as const,
+      options: ['primary', 'secondary', 'ghost', 'destructive'],
+      default: 'secondary',
+    },
+    size: { type: 'enum' as const, options: ['sm', 'md', 'lg'], default: 'md' },
+    disabled: { type: 'boolean' as const, default: false },
+    loading: { type: 'boolean' as const, default: false },
+  },
+  binding: 'none' as const,
+  triggers: ['click'],
+  container: false,
+};

package/src/widgets/components/CardWidget.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+} from '@/components/ui/card';
+import { WidgetRenderer } from '../renderer/WidgetRenderer.js';
+import { SurfaceProvider } from '../hooks/useSurfaceContext.js';
+import type { WidgetNode } from '@rangka/shared';
+import type { WidgetProps } from '../types.js';
+
+export function CardWidget({ props, children }: WidgetProps) {
+  const title = props.title as string | undefined;
+  const description = props.description as string | undefined;
+  const size = (props.size as 'default' | 'sm') ?? 'default';
+  const actions = props.actions as WidgetNode[] | undefined;
+  const footer = props.footer as WidgetNode[] | undefined;
+
+  return (
+    <Card size={size}>
+      {(title || description || actions) && (
+        <CardHeader>
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+          {actions && actions.length > 0 && (
+            <CardAction>
+              <div className="flex items-center gap-2">
+                {actions.map((node, i) => (
+                  <WidgetRenderer key={node.id ?? i} node={node} />
+                ))}
+              </div>
+            </CardAction>
+          )}
+        </CardHeader>
+      )}
+      <CardContent>
+        <SurfaceProvider value="card">{children}</SurfaceProvider>
+      </CardContent>
+      {footer && footer.length > 0 && (
+        <CardFooter>
+          {footer.map((node, i) => (
+            <WidgetRenderer key={node.id ?? i} node={node} />
+          ))}
+        </CardFooter>
+      )}
+    </Card>
+  );
+}
+
+CardWidget.widgetMeta = {
+  name: 'card',
+  label: 'Card',
+  category: 'layout' as const,
+  schema: {
+    title: { type: 'string' as const },
+    description: { type: 'string' as const },
+    size: { type: 'enum' as const, options: ['default', 'sm'], default: 'default' },
+    actions: { type: 'array' as const },
+    footer: { type: 'array' as const },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/CheckboxWidget.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import type { WidgetProps } from '../types.js';
+
+export function CheckboxWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const error = bind.error;
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-2">
+        <Checkbox
+          checked={(bind.value as boolean) ?? false}
+          onCheckedChange={(checked) => {
+            bind.setValue?.(checked);
+            on.change?.(checked);
+          }}
+          disabled={disabled}
+        />
+        {label && <span className="text-sm text-foreground">{label}</span>}
+      </div>
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+CheckboxWidget.widgetMeta = {
+  name: 'checkbox',
+  label: 'Checkbox',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change'],
+  container: false,
+};

package/src/widgets/components/CodeWidget.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { Field, FieldLabel } from '@/components/ui/field';
+import type { WidgetProps } from '../types.js';
+
+export function CodeWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const rows = (props.rows as number) ?? 6;
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Textarea
+        value={(bind.value as string) ?? ''}
+        onChange={(e) => {
+          bind.setValue?.(e.target.value);
+          on.change?.(e.target.value);
+        }}
+        onFocus={() => on.focus?.()}
+        onBlur={() => on.blur?.()}
+        rows={rows}
+        disabled={disabled}
+        className="font-mono text-xs"
+        spellCheck={false}
+      />
+    </Field>
+  );
+}
+
+CodeWidget.widgetMeta = {
+  name: 'code',
+  label: 'Code',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    language: { type: 'string' as const },
+    rows: { type: 'number' as const, default: 6 },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'focus', 'blur'],
+  container: false,
+};

package/src/widgets/components/ColumnWidget.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { WidgetProps } from '../types.js';
+
+export function ColumnWidget({ children }: WidgetProps) {
+  return <>{children}</>;
+}
+
+ColumnWidget.widgetMeta = {
+  name: 'column',
+  label: 'Column',
+  category: 'layout' as const,
+  schema: {
+    label: { type: 'string' as const, required: true },
+    width: { type: 'string' as const },
+    align: { type: 'enum' as const, options: ['left', 'center', 'right'], default: 'left' },
+    sortable: { type: 'boolean' as const },
+    filterable: { type: 'boolean' as const },
+  },
+  binding: 'none' as const,
+  triggers: [],
+  container: true,
+};

package/src/widgets/components/ComputedWidget.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Field, FieldLabel } from '@/components/ui/field';
+import type { WidgetProps } from '../types.js';
+
+export function ComputedWidget({ props, bind }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const format = (props.format as string) ?? 'text';
+  const value = bind.value;
+
+  const formatValue = (val: unknown): string => {
+    if (val == null) return '—';
+    if (format === 'number' && typeof val === 'number') {
+      return val.toLocaleString();
+    }
+    if (format === 'currency' && typeof val === 'number') {
+      return val.toFixed(2);
+    }
+    if (format === 'date' && typeof val === 'string') {
+      return new Date(val).toLocaleDateString();
+    }
+    return String(val);
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <div className="flex items-center h-7 text-sm" data-testid="computed-value">
+        {formatValue(value)}
+      </div>
+    </Field>
+  );
+}
+
+ComputedWidget.widgetMeta = {
+  name: 'computed',
+  label: 'Computed',
+  category: 'display' as const,
+  schema: {
+    label: { type: 'string' as const },
+    format: {
+      type: 'enum' as const,
+      options: ['text', 'number', 'currency', 'date'],
+      default: 'text',
+    },
+  },
+  binding: 'field' as const,
+  triggers: [],
+  container: false,
+};