@tomako/tools-runtime 0.1.0

package/src/components/tools/registry.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import type { ComponentType } from "react";
+
+/**
+ * Legacy custom widget 表（tools 共址完成后已清空）。
+ * 保留文件以免旧 import 断裂；新登记请用 features/tools/widget-registry。
+ */
+export const toolWidgets: Record<string, ComponentType> = {};
+
+export function isKnownToolWidget(widgetId: string): boolean {
+  return widgetId in toolWidgets;
+}

package/src/components/tools/workspace/index.ts

@@ -0,0 +1,39 @@
+export { ToolWorkspaceLayout } from "./tool-workspace-layout";
+export { ToolFormShell } from "./tool-form-shell";
+export { ToolFormSection } from "./tool-form-section";
+export {
+  ToolField,
+  ToolFieldGroup,
+  toolFieldLabelClass,
+  toolInputClass,
+  toolInvalidControlClass,
+  toolRequiredMarkClass,
+  toolSelectTriggerClass,
+  toolTextareaClass,
+} from "./tool-field";
+export {
+  ToolOptionRow,
+  ToolCompactOption,
+  ToolPlatformOptionCard,
+} from "./tool-option-row";
+export {
+  ToolActionBar,
+  ToolPrimaryButton,
+  ToolSecondaryButton,
+  ToolResetButton,
+} from "./tool-action-bar";
+export { ToolStatusLine, ToolErrorBanner } from "./tool-status";
+export { ToolFileUpload } from "./tool-file-upload";
+export { ToolPreviewPanel } from "./tool-preview-panel";
+export { ToolLoadingPanel, type ToolLoadingStep } from "./tool-loading-panel";
+export { ToolErrorPanel } from "./tool-error-panel";
+export { ToolEmptyPanel } from "./tool-empty-panel";
+export { ToolResultHeader } from "./tool-result-header";
+export {
+  copyTextToClipboard,
+  downloadBlob,
+  downloadTextFile,
+} from "./tool-result-file-actions";
+export {
+  ToolResultActions,
+} from "./tool-result-actions";

package/src/components/tools/workspace/tool-action-bar.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Button } from "@tomako/ui/button";
+import { cn } from "@tomako/ui/cn";
+
+export function ToolActionBar({
+  children,
+  className,
+  attached = false,
+}: {
+  children: ReactNode;
+  className?: string;
+  attached?: boolean;
+}) {
+  return (
+    <div
+      data-tool-action-bar-attached={attached ? true : undefined}
+      className={cn(
+        "grid gap-3",
+        attached &&
+          "sticky bottom-0 z-30 -mx-5 mt-auto shrink-0 border-t border-[#E5E5E5] bg-white px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-5 shadow-[0_-12px_28px_rgba(17,17,17,0.04)] md:-mx-6 md:px-6",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ToolPrimaryButton({
+  children,
+  disabled,
+  onClick,
+  type = "button",
+}: {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+  type?: "button" | "submit";
+}) {
+  return (
+    <Button
+      className="h-12 w-full rounded-lg bg-[#111111] text-[15px] font-semibold text-white shadow-none hover:bg-[#2A2A2A]"
+      disabled={disabled}
+      type={type}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function ToolSecondaryButton({
+  children,
+  disabled,
+  onClick,
+  type = "button",
+}: {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+  type?: "button" | "submit";
+}) {
+  return (
+    <Button
+      className="h-12 w-full rounded-lg border-[#111111] text-sm font-semibold shadow-none"
+      disabled={disabled}
+      type={type}
+      variant="outline"
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function ToolResetButton({
+  children,
+  disabled,
+  onClick,
+}: {
+  children: ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <Button
+      className="h-11 w-full rounded-lg border-[#E4E9F1] text-sm font-semibold shadow-none"
+      disabled={disabled}
+      type="button"
+      variant="outline"
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}

package/src/components/tools/workspace/tool-empty-panel.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@tomako/ui/cn";
+
+export function ToolEmptyPanel({
+  icon,
+  title,
+  body,
+  className,
+}: {
+  icon?: ReactNode;
+  title: ReactNode;
+  body?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "grid min-h-[220px] place-items-center rounded-[1.25rem] border border-dashed border-[#E4E9F1] bg-[#FAFBFD] p-8 text-center",
+        className,
+      )}
+    >
+      <div>
+        {icon}
+        <h3 className="mt-4 text-lg font-semibold text-[#111111]">{title}</h3>
+        {body ? (
+          <p className="mt-2 max-w-xl text-sm leading-6 text-[#555555]">{body}</p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/tools/workspace/tool-error-panel.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { AlertTriangle } from "lucide-react";
+
+export function ToolErrorPanel({
+  title,
+  body,
+  detail,
+  taskId,
+  taskIdLabel,
+  className = "",
+}: {
+  title?: ReactNode;
+  body: ReactNode;
+  detail?: ReactNode;
+  taskId?: string;
+  taskIdLabel?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`rounded-[1.25rem] border border-[#F1C2B8] bg-[#FFF1EC] p-5 ${className}`}
+    >
+      <div className="flex items-start gap-3">
+        <AlertTriangle aria-hidden className="mt-1 size-5 shrink-0 text-[#A83A24]" />
+        <div>
+          {title ? (
+            <h3 className="text-lg font-semibold text-[#7A2818]">{title}</h3>
+          ) : null}
+          <p className="mt-2 text-sm leading-6 text-[#7A2818]">{body}</p>
+          {taskId && taskIdLabel ? (
+            <p className="mt-3 text-xs font-semibold text-[#7A2818]">{taskIdLabel}</p>
+          ) : null}
+          {detail ? (
+            <p className="mt-2 text-xs leading-5 text-[#9A4A38]">{detail}</p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/tools/workspace/tool-field.tsx

@@ -0,0 +1,124 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@tomako/ui/cn";
+
+export const toolFieldLabelClass =
+  "text-[14px] font-semibold leading-5 text-[#111111]";
+
+export const toolRequiredMarkClass = "text-xs font-bold text-[#C22114]";
+
+export const toolInputClass =
+  "h-11 w-full max-w-full rounded-lg !border-[#E4E9F1] bg-[#F8FAFC] px-3.5 text-sm text-[#111111] shadow-none placeholder:text-[#9A9A9A] focus-visible:!border-[#111111] focus-visible:bg-white focus-visible:ring-4 focus-visible:ring-[#111111]/10";
+
+export const toolTextareaClass =
+  "min-h-24 w-full max-w-full resize-none rounded-lg !border-[#E4E9F1] bg-[#F8FAFC] px-3.5 py-3 text-sm leading-6 text-[#111111] shadow-none placeholder:text-[#9A9A9A] focus-visible:!border-[#111111] focus-visible:bg-white focus-visible:ring-4 focus-visible:ring-[#111111]/10";
+
+export const toolSelectTriggerClass =
+  "h-11 w-full max-w-full rounded-lg !border-[#E4E9F1] bg-[#F8FAFC] px-3.5 text-sm text-[#111111] shadow-none focus-visible:!border-[#111111] focus-visible:bg-white focus-visible:ring-4 focus-visible:ring-[#111111]/10";
+
+export const toolInvalidControlClass =
+  "!border-[#D85435] focus-visible:!border-[#D85435] focus-visible:ring-[#D85435]/20";
+
+export function ToolField({
+  label,
+  htmlFor,
+  required,
+  hint,
+  description,
+  error,
+  errorId,
+  children,
+  className,
+}: {
+  label: ReactNode;
+  htmlFor?: string;
+  required?: boolean;
+  hint?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  errorId?: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  const labelContent = (
+    <span className="flex min-w-0 items-center gap-1.5">
+      <span className={toolFieldLabelClass}>{label}</span>
+      {required ? (
+        <span aria-hidden="true" className={toolRequiredMarkClass}>
+          *
+        </span>
+      ) : null}
+    </span>
+  );
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <div className="flex min-w-0 flex-col items-start gap-1 sm:flex-row sm:justify-between sm:gap-3">
+        {htmlFor ? <label htmlFor={htmlFor}>{labelContent}</label> : labelContent}
+        {hint ? (
+          <span className="max-w-full pt-0.5 text-[12px] leading-5 text-[#777777] sm:shrink-0">
+            {hint}
+          </span>
+        ) : null}
+      </div>
+      {children}
+      {description ? (
+        <p className="text-xs leading-5 text-[#777777]">{description}</p>
+      ) : null}
+      {error ? (
+        <p id={errorId} className="text-xs font-semibold leading-5 text-[#9B3517]">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function ToolFieldGroup({
+  label,
+  required,
+  hint,
+  description,
+  error,
+  errorId,
+  children,
+  className,
+}: {
+  label: ReactNode;
+  required?: boolean;
+  hint?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  errorId?: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <div className="flex min-w-0 flex-col items-start gap-1 sm:flex-row sm:justify-between sm:gap-3">
+        <span className="flex min-w-0 items-center gap-1.5">
+          <span className={toolFieldLabelClass}>{label}</span>
+          {required ? (
+            <span aria-hidden="true" className={toolRequiredMarkClass}>
+              *
+            </span>
+          ) : null}
+        </span>
+        {hint ? (
+          <span className="max-w-full pt-0.5 text-[12px] leading-5 text-[#777777] sm:shrink-0">
+            {hint}
+          </span>
+        ) : null}
+      </div>
+      {children}
+      {description ? (
+        <p className="text-xs leading-5 text-[#777777]">{description}</p>
+      ) : null}
+      {error ? (
+        <p id={errorId} className="text-xs font-semibold leading-5 text-[#9B3517]">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/tools/workspace/tool-file-upload.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import type { ChangeEvent, ReactNode, RefObject } from "react";
+import { Upload, X } from "lucide-react";
+
+import { Button } from "@tomako/ui/button";
+import { cn } from "@tomako/ui/cn";
+
+export function ToolFileUpload({
+  inputRef,
+  hasFile,
+  preview,
+  fileName,
+  chooseLabel,
+  hint,
+  selectedLabel,
+  selectedMeta,
+  removeLabel,
+  icon,
+  className,
+  onChoose,
+  onRemove,
+  onChange,
+  accept = "image/*",
+}: {
+  inputRef: RefObject<HTMLInputElement | null>;
+  hasFile: boolean;
+  preview?: ReactNode;
+  fileName?: string;
+  chooseLabel: string;
+  hint?: ReactNode;
+  selectedLabel: string;
+  selectedMeta?: ReactNode;
+  removeLabel?: string;
+  icon?: ReactNode;
+  className?: string;
+  onChoose: () => void;
+  onRemove: () => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  accept?: string;
+}) {
+  return (
+    <>
+      <input
+        ref={inputRef}
+        accept={accept}
+        className="hidden"
+        type="file"
+        onChange={onChange}
+      />
+      {hasFile ? (
+        <div
+          className={cn(
+            "flex min-h-[104px] w-full max-w-full items-center gap-3 rounded-lg border !border-[#E4E9F1] bg-[#F8FAFC] p-3",
+            className,
+          )}
+        >
+          <div className="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#F4F7FB]">
+            {preview}
+          </div>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-sm font-semibold text-[#111111]">
+              {fileName || selectedLabel}
+            </span>
+            {selectedMeta ? (
+              <span className="mt-1 block text-xs leading-5 text-[#666666]">
+                {selectedMeta}
+              </span>
+            ) : null}
+            <button
+              className="mt-2 block cursor-pointer text-left text-xs font-semibold text-[#111111] underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20"
+              type="button"
+              onClick={onChoose}
+            >
+              {selectedLabel}
+            </button>
+          </span>
+          <Button
+            aria-label={removeLabel}
+            className="size-9 rounded-lg border-[#D8D8D8] p-0"
+            type="button"
+            variant="outline"
+            onClick={onRemove}
+          >
+            <X aria-hidden className="size-4" />
+          </Button>
+        </div>
+      ) : (
+        <button
+          className={cn(
+            "group flex min-h-[168px] w-full max-w-full flex-col items-center justify-center rounded-lg border border-dashed !border-[#E4E9F1] bg-[#FAFBFD] p-4 text-center outline-none transition hover:!border-[#CDD6E3] hover:bg-white focus-visible:!border-[#111111] focus-visible:ring-4 focus-visible:ring-[#111111]/10",
+            className,
+          )}
+          type="button"
+          onClick={onChoose}
+        >
+          <span className="flex size-10 items-center justify-center rounded-lg bg-[#F4F7FB] text-[#111111]">
+            {icon ?? <Upload aria-hidden className="size-4" />}
+          </span>
+          <span className="mt-3 max-w-sm text-sm font-semibold leading-5 text-[#111111]">
+            {chooseLabel}
+          </span>
+          {hint ? (
+            <span className="mt-2 max-w-xs text-xs leading-5 text-[#555555]">
+              {hint}
+            </span>
+          ) : null}
+        </button>
+      )}
+    </>
+  );
+}

package/src/components/tools/workspace/tool-form-section.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+export function ToolFormSection({
+  title,
+  hint,
+  children,
+}: {
+  title: string;
+  hint?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="grid gap-5">
+      <div>
+        <h3 className="text-lg font-semibold leading-tight text-[#111111]">{title}</h3>
+        {hint ? <p className="mt-1 text-sm leading-6 text-[#666666]">{hint}</p> : null}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/components/tools/workspace/tool-form-shell.tsx

@@ -0,0 +1,36 @@
+import type { FormEventHandler, ReactNode } from "react";
+
+import { cn } from "@tomako/ui/cn";
+
+export function ToolFormShell({
+  title,
+  hint,
+  icon,
+  children,
+  className,
+  onSubmit,
+}: {
+  title: ReactNode;
+  hint?: ReactNode;
+  icon?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
+}) {
+  return (
+    <form className={cn("bg-[#FAFBFD] p-5 md:p-7", className)} onSubmit={onSubmit}>
+      <div className="mb-6">
+        <p className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white">
+          {icon}
+          {title}
+        </p>
+        {hint ? (
+          <p className="mt-3 max-w-2xl text-sm leading-6 text-[#555555]">
+            {hint}
+          </p>
+        ) : null}
+      </div>
+      {children}
+    </form>
+  );
+}