@allbluecn/web-app 0.6.2 → 0.7.0

package/src/lib/time-format.ts

@@ -1 +1,50 @@
-export * from '@allbluecn/shared/lib/time-format'
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { formatDate } from "./datetime";
+
+function isSameDay(a: Date, b: Date, timezone: string): boolean {
+  const aDate = formatDate(a, timezone, "yyyy-MM-dd");
+  const bDate = formatDate(b, timezone, "yyyy-MM-dd");
+  return aDate === bDate;
+}
+
+export function formatSaveTime(savedAt: Date, type: "auto" | "manual", timezone: string): string {
+  const now = new Date();
+  const time = formatDate(savedAt, timezone, "HH:mm");
+  const label = type === "auto" ? "自动保存" : "手动保存";
+
+  if (isSameDay(savedAt, now, timezone)) {
+    return `${time} ${label}`;
+  }
+
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (isSameDay(savedAt, yesterday, timezone)) {
+    return `昨日 ${time} ${label}`;
+  }
+
+  const oneYearAgo = new Date(now);
+  oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
+  if (savedAt > oneYearAgo) {
+    const month = formatDate(savedAt, timezone, "MM");
+    const day = formatDate(savedAt, timezone, "dd");
+    return `${month}-${day} ${time} ${label}`;
+  }
+
+  return `1年前 ${label}`;
+}

package/src/lib/utils.ts

@@ -15,4 +15,4 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-export { cn } from '@allbluecn/ui/utils'
+export { cn } from '@/components/ui-shared/utils'

package/src/plugins/core/context.ts

@@ -0,0 +1,2 @@
+import type { PluginRouteContext } from '@allbluecn/kernel'
+export type { PluginRouteContext }

package/src/plugins/core/index.ts

@@ -0,0 +1 @@
+export const pluginsCoreVersion = '0.0.0'

package/src/plugins/core/inspiration/index.ts

@@ -0,0 +1,17 @@
+import { definePlugin, type RouteContribution } from '@allbluecn/kernel'
+import type { ComponentType } from 'react'
+
+const stub = (() => null) as unknown as ComponentType
+
+export const plugin = definePlugin({
+  id: '@allbluecn/inspiration',
+  version: '0.0.0',
+  contributes: {
+    routes: [
+      { path: '/_nav/inspiration', component: stub },
+    ],
+    uiSlots: {},
+  },
+})
+
+export default plugin

package/src/plugins/core/inspiration/pages/inspiration-page.tsx

@@ -0,0 +1,8 @@
+import { useTranslation } from 'react-i18next'
+import { PlaceholderPage } from '@/components/ui-shared/placeholder-page'
+import { Lightbulb } from 'lucide-react'
+
+export function InspirationPage() {
+  const { t } = useTranslation('common')
+  return <PlaceholderPage title={t('nav.inspiration')} icon={Lightbulb} />
+}

package/src/plugins/core/inspiration/routes.ts

@@ -0,0 +1,12 @@
+import type { RouteContribution } from '@allbluecn/kernel'
+import { InspirationPage } from './pages/inspiration-page'
+
+export const inspiration_route_0 = {
+  path: '/_nav/inspiration' as const,
+  component: InspirationPage,
+  Component: InspirationPage,
+}
+
+export const inspirationRoutes: Record<'index', RouteContribution> = {
+  index: inspiration_route_0,
+} as unknown as Record<'index', RouteContribution>

package/src/plugins/core/inspiration/ui.tsx

@@ -0,0 +1,28 @@
+import type { ComponentType } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { Lightbulb } from 'lucide-react'
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui-shared/sidebar'
+
+export function InspirationNavItem() {
+  const { t } = useTranslation('common')
+  const { state } = useSidebar()
+  const { pathname } = useLocation()
+  const isActive = pathname === '/inspiration'
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={isActive}>
+          <Link to="/inspiration">
+            <Lightbulb />
+            {!state || state !== 'collapsed' ? t('nav.inspiration') : null}
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+export const navItems: Record<string, ComponentType> = { InspirationNavItem }
+export const dashboardWidgets: Record<string, ComponentType> = {}

package/src/plugins/core/prd/components/agent-input.tsx

@@ -0,0 +1,193 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useRef, useEffect, useState, type KeyboardEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowUp, Loader2, User, Bot, ChevronDown, Cpu } from "lucide-react";
+import { Textarea } from "@/components/ui-shared/textarea";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+} from "@/components/ui-shared/dropdown-menu";
+import { cn } from "@/components/ui-shared/utils";
+
+export interface ModelOption {
+  model: string;
+  modelDisplayName: string;
+  providerId: string;
+  providerDisplayName: string;
+  isLocal: boolean;
+}
+
+interface AgentInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  placeholder?: string;
+  models: ModelOption[];
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+}
+
+export function AgentInput({
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+  loading,
+  placeholder,
+  models,
+  selectedModel,
+  onModelChange,
+}: AgentInputProps) {
+  const { t } = useTranslation("prd");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [selectedAgent, setSelectedAgent] = useState<"agent" | "assistant">("agent");
+  const effectivePlaceholder = placeholder ?? t("agentInput.placeholder");
+
+  useEffect(() => {
+    if (textareaRef.current && !value) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value]);
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(e.target.value);
+    const target = e.target;
+    target.style.height = "auto";
+    target.style.height = target.scrollHeight + "px";
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (!disabled && !loading && value.trim()) onSubmit();
+    }
+  };
+
+  const groupedModels = models.reduce<Record<string, ModelOption[]>>((acc, m) => {
+    (acc[m.providerId] ||= []).push(m);
+    return acc;
+  }, {});
+
+  const currentModel = models.find((m) => m.model === selectedModel);
+
+  return (
+    <div className="shrink-0 p-2">
+      <div className="overflow-hidden rounded-2xl border border-border bg-background">
+        <div className="grow px-3 pt-3 pb-2">
+          <Textarea
+            ref={textareaRef}
+            className="max-h-[25vh] min-h-10 w-full resize-none border-0 border-none bg-transparent! p-0 text-sm text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
+            onChange={handleInput}
+            onKeyDown={handleKeyDown}
+            placeholder={effectivePlaceholder}
+            rows={1}
+            value={value}
+            disabled={loading}
+          />
+        </div>
+        <div className="mb-2 flex items-center justify-end px-2">
+          <button
+            type="button"
+            onClick={onSubmit}
+            disabled={!value.trim() || loading || disabled}
+            className={cn(
+              "flex size-7 items-center justify-center rounded-full p-0 transition-colors",
+              value.trim() && !loading
+                ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                : "bg-muted text-muted-foreground",
+            )}
+          >
+            {loading ? (
+              <Loader2 className="size-3 animate-spin" />
+            ) : (
+              <ArrowUp className="size-3" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-0 pt-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              disabled={models.length === 0}
+              className="flex h-6 max-w-40 items-center gap-1 rounded-full border border-transparent px-2 text-xs text-muted-foreground hover:bg-accent disabled:opacity-50"
+            >
+              <Cpu className="size-3 shrink-0" />
+              <span className="truncate">
+                {currentModel?.modelDisplayName ?? (models.length === 0 ? t("agentInput.noModel") : t("agentInput.selectModel"))}
+              </span>
+              <ChevronDown className="size-3 shrink-0" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="min-w-48 rounded-2xl p-1.5">
+            {Object.entries(groupedModels).map(([providerId, providerModels]) => (
+              <DropdownMenuGroup key={providerId}>
+                <DropdownMenuLabel className="text-xs text-muted-foreground">
+                  {providerModels[0].providerDisplayName}
+                  {providerModels[0].isLocal && (
+                    <span className="ml-1 text-muted-foreground/60">{t("agentInput.local")}</span>
+                  )}
+                </DropdownMenuLabel>
+                {providerModels.map((m) => (
+                  <DropdownMenuItem
+                    key={m.model}
+                    className="rounded-[calc(1rem-6px)] text-xs"
+                    onClick={() => onModelChange(m.model)}
+                  >
+                    {m.modelDisplayName}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex h-6 items-center gap-1 rounded-full border border-transparent px-2 text-xs text-muted-foreground hover:bg-accent">
+              {selectedAgent === "agent" ? <User className="size-3" /> : <Bot className="size-3" />}
+              <span>{selectedAgent === "agent" ? t("agentInput.agent") : t("agentInput.assistant")}</span>
+              <ChevronDown className="size-3" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="min-w-32 rounded-2xl p-1.5">
+            <DropdownMenuGroup className="space-y-1">
+              <DropdownMenuItem className="rounded-[calc(1rem-6px)] text-xs" onClick={() => setSelectedAgent("agent")}>
+                <User className="opacity-60" size={16} /> {t("agentInput.agent")}
+              </DropdownMenuItem>
+              <DropdownMenuItem className="rounded-[calc(1rem-6px)] text-xs" onClick={() => setSelectedAgent("assistant")}>
+                <Bot className="opacity-60" size={16} /> {t("agentInput.assistant")}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="flex-1" />
+      </div>
+    </div>
+  );
+}

package/src/plugins/core/prd/components/component-annotation-overlay/AnnotationOverlay.tsx

@@ -0,0 +1,113 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useEffect, useState } from "react";
+
+interface Segment { sx: number; sy: number; ex: number; ey: number; }
+
+interface AnnotationOverlayProps {
+  /** overlay 容器 ref（画布+文档父容器，任务 8 会挂载并传入） */
+  containerRef: React.RefObject<HTMLElement | null>;
+  /** 选中组件 id；为 null 时不渲染 */
+  selectedComponentId: string | null;
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v));
+}
+
+export function AnnotationOverlay({ containerRef, selectedComponentId }: AnnotationOverlayProps) {
+  const [segments, setSegments] = useState<Segment[]>([]);
+
+  useEffect(() => {
+    if (!selectedComponentId) { setSegments([]); return; }
+    const container = containerRef.current;
+    if (!container) return;
+
+    let lastKey = "";
+    let raf = 0;
+
+    const recompute = () => {
+      const cRect = container.getBoundingClientRect();
+      const startEl = container.querySelector(
+        `[data-element-id="${CSS.escape(selectedComponentId)}"]`
+      ) as HTMLElement | null;
+      if (!startEl) {
+        if (lastKey !== "") { lastKey = ""; setSegments([]); }
+        raf = requestAnimationFrame(recompute);
+        return;
+      }
+      const sRect = startEl.getBoundingClientRect();
+      const sx = clamp(sRect.right - cRect.left, 0, cRect.width);
+      const sy = clamp(sRect.top + sRect.height / 2 - cRect.top, 0, cRect.height);
+
+      const endEls = Array.from(
+        container.querySelectorAll(`[data-component-id="${CSS.escape(selectedComponentId)}"]`)
+      ) as HTMLElement[];
+      const segs: Segment[] = endEls.map((el) => {
+        const r = el.getBoundingClientRect();
+        return {
+          sx, sy,
+          ex: clamp(r.left - cRect.left, 0, cRect.width),
+          ey: clamp(r.top + r.height / 2 - cRect.top, 0, cRect.height),
+        };
+      });
+      const key = `${sx},${sy}|${segs.map((s) => `${s.ex},${s.ey}`).join(";")}`;
+      if (key !== lastKey) {
+        lastKey = key;
+        setSegments(segs);
+      }
+      raf = requestAnimationFrame(recompute);
+    };
+
+    raf = requestAnimationFrame(recompute);
+
+    return () => cancelAnimationFrame(raf);
+  }, [selectedComponentId, containerRef]);
+
+  if (!selectedComponentId || segments.length === 0) return null;
+  const container = containerRef.current;
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-30"
+      width={container?.clientWidth ?? 0}
+      height={container?.clientHeight ?? 0}
+    >
+      <defs>
+        <marker id="annot-arrow" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+          <path d="M0,0 L8,4 L0,8 z" fill="var(--primary)" />
+        </marker>
+      </defs>
+      {segments.map((seg, i) => {
+        const midX = (seg.sx + seg.ex) / 2;
+        return (
+          <path
+            key={i}
+            d={`M ${seg.sx},${seg.sy} C ${midX},${seg.sy} ${midX},${seg.ey} ${seg.ex},${seg.ey}`}
+            stroke="var(--primary)"
+            strokeWidth={1.5}
+            fill="none"
+            strokeDasharray="4 3"
+            markerEnd="url(#annot-arrow)"
+            opacity={0.7}
+          />
+        );
+      })}
+    </svg>
+  );
+}

package/src/plugins/core/prd/components/component-editor/__tests__/field-utils.test.ts

@@ -0,0 +1,93 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, it, expect } from "vitest";
+import { readField, applyFieldPatch } from "../field-utils";
+import type { CanvasElement } from "@allbluecn/shared";
+
+const baseElement: CanvasElement = {
+  id: "elem_1",
+  type: "button",
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 36,
+  zIndex: 1,
+  overrides: { text: "提交" },
+  style: { color: "#fff" },
+};
+
+describe("readField", () => {
+  it("读取 overrides 中已存在的值", () => {
+    expect(readField(baseElement, "overrides", "text")).toBe("提交");
+  });
+
+  it("读取 style 中已存在的值", () => {
+    expect(readField(baseElement, "style", "color")).toBe("#fff");
+  });
+
+  it("字段不存在时返回空字符串", () => {
+    expect(readField(baseElement, "style", "fontSize")).toBe("");
+  });
+
+  it("有 fallback 时返回 fallback 值", () => {
+    expect(readField(baseElement, "style", "fontSize", "14px")).toBe("14px");
+  });
+
+  it("element 有值时优先于 fallback", () => {
+    expect(readField(baseElement, "style", "color", "#000")).toBe("#fff");
+  });
+
+  it("overrides 为 undefined 时返回空字符串", () => {
+    const noOverrides = { ...baseElement, overrides: undefined };
+    expect(readField(noOverrides, "overrides", "text")).toBe("");
+  });
+});
+
+describe("applyFieldPatch", () => {
+  it("设置 overrides 字段，返回含完整新 overrides 的 patch", () => {
+    const patch = applyFieldPatch(baseElement, "overrides", "text", "保存");
+    expect(patch.overrides).toEqual({ text: "保存" });
+  });
+
+  it("设置 overrides 新字段时保留已有字段", () => {
+    const patch = applyFieldPatch(baseElement, "overrides", "icon", "check");
+    expect(patch.overrides).toEqual({ text: "提交", icon: "check" });
+  });
+
+  it("空值时从 overrides 移除该 key", () => {
+    const patch = applyFieldPatch(baseElement, "overrides", "text", "");
+    expect(patch.overrides).toEqual({});
+    expect("text" in (patch.overrides ?? {})).toBe(false);
+  });
+
+  it("设置 style 字段，返回含完整新 style 的 patch", () => {
+    const patch = applyFieldPatch(baseElement, "style", "fontSize", "14px");
+    expect(patch.style).toEqual({ color: "#fff", fontSize: "14px" });
+  });
+
+  it("不修改原始 element（不可变）", () => {
+    applyFieldPatch(baseElement, "overrides", "text", "新值");
+    expect(baseElement.overrides).toEqual({ text: "提交" });
+  });
+
+  it("style 为空对象时仍能工作", () => {
+    const noStyle = { ...baseElement, style: {} };
+    const patch = applyFieldPatch(noStyle, "style", "color", "#000");
+    expect(patch.style).toEqual({ color: "#000" });
+  });
+});

package/src/plugins/core/prd/components/component-editor/collapsible-section.tsx

@@ -0,0 +1,44 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/components/ui-shared/utils";
+
+interface CollapsibleSectionProps {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export function CollapsibleSection({ title, defaultOpen = true, children }: CollapsibleSectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border-b">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center gap-1.5 px-3 py-2 text-xs font-semibold text-foreground/90 hover:bg-muted/40"
+      >
+        <ChevronDown className={cn("size-3 text-muted-foreground transition-transform", !open && "-rotate-90")} />
+        {title}
+      </button>
+      {open && <div className="px-3 pb-3 space-y-2.5">{children}</div>}
+    </div>
+  );
+}

package/src/plugins/core/prd/components/component-editor/content-section.tsx

@@ -0,0 +1,63 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { CanvasElement, EditablePropField } from "@allbluecn/shared";
+import { Input } from "@/components/ui-shared/input";
+import { Textarea } from "@/components/ui-shared/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui-shared/select";
+import { FieldRow } from "./style-fields";
+import { useField } from "./use-field";
+
+export function ContentSection({
+  fields,
+  element,
+  onElementChange,
+}: {
+  fields: EditablePropField[];
+  element: CanvasElement;
+  onElementChange: (id: string, patch: Partial<CanvasElement>) => void;
+}) {
+  return (
+    <>
+      {fields.map((field) => {
+        const { value, update } = useField(element, "overrides", field.key, onElementChange);
+        return (
+          <FieldRow key={field.key} label={field.label}>
+            {field.type === "textarea" ? (
+              <Textarea value={value} onChange={(e) => update(e.target.value)} placeholder={field.placeholder} className="min-h-16 text-xs" />
+            ) : field.type === "select" && field.options ? (
+              <Select value={value} onValueChange={(v) => update(v)}>
+                <SelectTrigger className="h-7 text-xs">
+                  <SelectValue placeholder={field.placeholder} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <Input value={value} onChange={(e) => update(e.target.value)} placeholder={field.placeholder} className="h-7 text-xs md:text-xs" />
+            )}
+          </FieldRow>
+        );
+      })}
+    </>
+  );
+}