@skopon-cool/form-sdk 0.1.0

package/src/styles/a2ui-preview.css

@@ -0,0 +1,345 @@
+/**
+ * A2UI v0.9 预览样式（对齐 design/ui/UI规范.md + form-block-preview）
+ * 预构建 @a2ui/react 的 CSS Modules 类名为空，用结构选择器补全外观。
+ */
+.a2ui-surface.a2ui-container {
+  --a2ui-color-border: var(--color-border);
+  --a2ui-color-border-hover: var(--color-border-strong);
+  --a2ui-color-input: var(--color-surface);
+  --a2ui-color-on-input: var(--color-text);
+  --a2ui-color-on-background: var(--color-text);
+  --a2ui-color-on-surface: var(--color-text);
+  --a2ui-color-primary: var(--color-primary);
+  --a2ui-color-primary-hover: var(--color-primary-hover);
+  --a2ui-color-on-primary: var(--color-on-primary);
+  --a2ui-color-surface: var(--color-surface);
+  --a2ui-color-secondary-hover: var(--color-bg-subtle);
+  --a2ui-border-radius: var(--radius-md);
+  --a2ui-border-width: 1px;
+  --a2ui-column-gap: var(--space-form-item);
+  --a2ui-row-gap: var(--space-3);
+  --a2ui-spacing-xs: var(--space-1);
+  --a2ui-spacing-s: var(--space-2);
+  --a2ui-spacing-m: var(--space-3);
+  --a2ui-spacing-l: var(--space-4);
+  --a2ui-font-size-xs: var(--font-size-xs);
+  --a2ui-font-size-s: var(--font-size-sm);
+  --a2ui-font-size-m: var(--font-size-base);
+  --a2ui-font-size-l: var(--font-size-lg);
+  --a2ui-font-size-xl: var(--font-size-xl);
+  --a2ui-font-size-2xl: var(--font-size-2xl);
+  --a2ui-line-height-headings: var(--line-height-tight);
+  --a2ui-line-height-body: var(--line-height-base);
+  width: 100%;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+}
+
+/* 标题 / 说明块 */
+.a2ui-surface.a2ui-container h1,
+.a2ui-surface.a2ui-container h2,
+.a2ui-surface.a2ui-container h3,
+.a2ui-surface.a2ui-container h4,
+.a2ui-surface.a2ui-container h5 {
+  margin: 0 0 var(--space-4);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+}
+
+.a2ui-surface.a2ui-container h1 {
+  font-size: var(--font-size-2xl);
+}
+
+.a2ui-surface.a2ui-container h2 {
+  font-size: var(--font-size-xl);
+}
+
+.a2ui-surface.a2ui-container h3 {
+  font-size: var(--font-size-lg);
+}
+
+.a2ui-surface.a2ui-container h4 {
+  font-size: var(--font-size-base);
+}
+
+.a2ui-surface.a2ui-container p {
+  margin: 0 0 var(--space-4);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-text-secondary);
+}
+
+/* TextField / DateTime：label 在 input 或 textarea 上方 */
+.a2ui-surface.a2ui-container label:not(:has(input)):has(
+    + input:is(
+      [type='text'],
+      [type='number'],
+      [type='email'],
+      [type='tel'],
+      [type='url'],
+      [type='password'],
+      [type='date'],
+      [type='time'],
+      [type='datetime-local']
+    )
+  ),
+.a2ui-surface.a2ui-container label:not(:has(input)):has(+ textarea) {
+  display: block;
+  margin: 0 0 var(--space-2);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+}
+
+/* ChoicePicker 分组标题 */
+.a2ui-surface.a2ui-container strong {
+  display: block;
+  margin: 0 0 var(--space-2);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+}
+
+/* CheckBox 组件：input 与 label 为兄弟节点 */
+.a2ui-surface.a2ui-container div:has(> input[type='checkbox']:first-child + label) {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.a2ui-surface.a2ui-container input[type='checkbox']:not(label input) + label,
+.a2ui-surface.a2ui-container input[type='radio']:not(label input) + label {
+  display: inline;
+  margin: 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+/* ChoicePicker 选项列表 */
+.a2ui-surface.a2ui-container div:has(> label > input[type='checkbox']),
+.a2ui-surface.a2ui-container div:has(> label > input[type='radio']) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+/* ChoicePicker 单行选项 */
+.a2ui-surface.a2ui-container label:has(> input[type='checkbox']),
+.a2ui-surface.a2ui-container label:has(> input[type='radio']) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0;
+  width: auto;
+  max-width: 100%;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.a2ui-surface.a2ui-container label:has(> input[type='checkbox']) > span,
+.a2ui-surface.a2ui-container label:has(> input[type='radio']) > span {
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+}
+
+/* 文本输入 */
+.a2ui-surface.a2ui-container input[type='text'],
+.a2ui-surface.a2ui-container input[type='number'],
+.a2ui-surface.a2ui-container input[type='email'],
+.a2ui-surface.a2ui-container input[type='tel'],
+.a2ui-surface.a2ui-container input[type='url'],
+.a2ui-surface.a2ui-container input[type='password'],
+.a2ui-surface.a2ui-container input[type='date'],
+.a2ui-surface.a2ui-container input[type='time'],
+.a2ui-surface.a2ui-container input[type='datetime-local'],
+.a2ui-surface.a2ui-container textarea {
+  display: block;
+  width: 100%;
+  min-height: var(--button-height-md);
+  box-sizing: border-box;
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  transition:
+    border-color var(--duration-fast) var(--ease-default),
+    box-shadow var(--duration-fast) var(--ease-default);
+}
+
+.a2ui-surface.a2ui-container textarea {
+  min-height: calc(var(--button-height-md) * 2);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+  resize: vertical;
+}
+
+.a2ui-surface.a2ui-container input[type='text']:hover,
+.a2ui-surface.a2ui-container input[type='number']:hover,
+.a2ui-surface.a2ui-container input[type='email']:hover,
+.a2ui-surface.a2ui-container input[type='tel']:hover,
+.a2ui-surface.a2ui-container input[type='url']:hover,
+.a2ui-surface.a2ui-container input[type='password']:hover,
+.a2ui-surface.a2ui-container input[type='date']:hover,
+.a2ui-surface.a2ui-container input[type='time']:hover,
+.a2ui-surface.a2ui-container input[type='datetime-local']:hover,
+.a2ui-surface.a2ui-container textarea:hover {
+  border-color: var(--color-border-strong);
+}
+
+.a2ui-surface.a2ui-container input[type='text']:focus,
+.a2ui-surface.a2ui-container input[type='number']:focus,
+.a2ui-surface.a2ui-container input[type='email']:focus,
+.a2ui-surface.a2ui-container input[type='tel']:focus,
+.a2ui-surface.a2ui-container input[type='url']:focus,
+.a2ui-surface.a2ui-container input[type='password']:focus,
+.a2ui-surface.a2ui-container input[type='date']:focus,
+.a2ui-surface.a2ui-container input[type='time']:focus,
+.a2ui-surface.a2ui-container input[type='datetime-local']:focus,
+.a2ui-surface.a2ui-container textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-focus);
+}
+
+.a2ui-surface.a2ui-container input[type='checkbox']:not(.ant-checkbox-input),
+.a2ui-surface.a2ui-container input[type='radio']:not(.ant-radio-input) {
+  width: 16px;
+  height: 16px;
+  min-height: 0;
+  min-width: 16px;
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  box-shadow: none;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.a2ui-surface.a2ui-container input[type='checkbox']:not(.ant-checkbox-input):not(label input),
+.a2ui-surface.a2ui-container input[type='radio']:not(.ant-radio-input):not(label input) {
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.a2ui-surface.a2ui-container input[type='radio']:not(.ant-radio-input):not(label input) {
+  border-radius: 50%;
+}
+
+.a2ui-surface.a2ui-container input[type='checkbox']:not(.ant-checkbox-input):focus,
+.a2ui-surface.a2ui-container input[type='radio']:not(.ant-radio-input):focus {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+/* 原生 A2UI 按钮/chip；勿作用于 Ant Design（Switch、Select、Picker 等） */
+.a2ui-surface.a2ui-container button:not([class*='ant-']) {
+  min-height: var(--button-height-md);
+  padding: 0 var(--button-padding-x-md);
+  font-family: var(--font-sans);
+  font-size: var(--button-font-size-md);
+  font-weight: var(--button-font-weight);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+}
+
+.a2ui-surface.a2ui-container button:not([class*='ant-']):hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+  background: var(--color-bg-subtle);
+}
+
+.a2ui-surface.a2ui-container button:not([class*='ant-']):disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.a2ui-surface.a2ui-container button.chip,
+.a2ui-surface.a2ui-container button.chip.selected,
+.a2ui-surface.a2ui-container button.selected {
+  min-height: var(--button-height-sm);
+  padding: 0 var(--button-padding-x-sm);
+  font-size: var(--button-font-size-sm);
+}
+
+.a2ui-surface.a2ui-container button.chip.selected,
+.a2ui-surface.a2ui-container button.selected {
+  color: var(--color-on-primary);
+  background-color: var(--color-primary-solid);
+  border-color: var(--color-primary-solid);
+}
+
+.a2ui-surface.a2ui-container button.chip.selected:hover,
+.a2ui-surface.a2ui-container button.selected:hover {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+.a2ui-surface.a2ui-container span[style*='color: red'],
+.a2ui-surface.a2ui-container span[style*='color:red'] {
+  display: block;
+  margin-top: var(--space-1);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-danger-text) !important;
+}
+
+.a2ui-surface.a2ui-container img:not(.form-media-item) {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+/* skopon catalog 预览块：与编辑区 form-block-preview 对齐 */
+.a2ui-surface.a2ui-container .form-block-preview {
+  width: 100%;
+}
+
+.a2ui-surface.a2ui-container .form-block-preview + .form-block-preview,
+.a2ui-surface.a2ui-container .form-block-preview-label + .form-block-preview-control,
+.a2ui-surface.a2ui-container .form-block-preview-label + .form-media-preview,
+.a2ui-surface.a2ui-container .form-block-preview-label + .form-media-list,
+.a2ui-surface.a2ui-container .form-block-preview-label + .form-file-upload-preview {
+  margin-top: var(--space-2);
+}
+
+.a2ui-surface.a2ui-container .form-block-preview .ant-upload-drag {
+  border-radius: var(--radius-md);
+}
+
+.a2ui-surface.a2ui-container .form-block-preview-control.ant-picker {
+  width: 100%;
+}
+
+.a2ui-surface.a2ui-container .form-block-preview-control.ant-switch {
+  margin-top: var(--space-1);
+}

package/src/styles/index.css

@@ -0,0 +1,190 @@
+@import './a2ui-preview.css';
+
+/* form-block-preview（与 admin form-tally 预览对齐的子集） */
+.form-block-preview {
+  padding: var(--space-1) 0 var(--space-2);
+}
+
+.form-block-preview-label {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-2);
+  color: var(--color-text);
+}
+
+.form-block-preview-control {
+  margin-top: var(--space-1);
+}
+
+.form-block-preview-help {
+  display: block;
+  margin-top: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+.form-media-preview {
+  max-width: 100%;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.form-media-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  max-width: 100%;
+}
+
+.form-media-item {
+  display: block;
+  flex-shrink: 0;
+  object-fit: cover;
+  border-radius: var(--radius-md);
+}
+
+.form-media-list.form-media-size-huge .form-media-item {
+  width: 480px;
+  height: 480px;
+}
+
+.form-media-list.form-media-size-huge .form-media-item.form-media-item--audio {
+  width: 480px;
+  height: 48px;
+}
+
+.form-media-list.form-media-size-large .form-media-item {
+  width: 320px;
+  height: 320px;
+}
+
+.form-media-list.form-media-size-large .form-media-item.form-media-item--audio {
+  width: 320px;
+  height: 48px;
+}
+
+.form-media-list.form-media-size-medium .form-media-item {
+  width: 160px;
+  height: 160px;
+}
+
+.form-media-list.form-media-size-medium .form-media-item.form-media-item--audio {
+  width: 160px;
+  height: 48px;
+}
+
+.form-media-list.form-media-size-small .form-media-item {
+  width: 80px;
+  height: 80px;
+}
+
+.form-media-list.form-media-size-small .form-media-item.form-media-item--audio {
+  width: 80px;
+  height: 48px;
+}
+
+.form-media-list.form-media-size-icon .form-media-item {
+  width: 48px;
+  height: 48px;
+}
+
+.form-media-preview--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  padding: var(--space-4);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-subtle);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.form-file-upload-preview {
+  margin-top: var(--space-1);
+}
+
+.form-file-upload-preview .ant-upload-drag {
+  border-color: var(--color-border);
+  background: var(--color-bg-subtle);
+}
+
+.form-file-upload-preview-icon {
+  margin: 0 0 var(--space-2);
+  color: var(--color-primary);
+}
+
+.form-file-upload-preview-text {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Ask User 卡片 */
+.ask-user-form-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.ask-user-form-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ask-user-curl-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  padding: var(--space-2);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.03));
+}
+
+.ask-user-curl-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.ask-user-curl-card-header-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.ask-user-curl-unpublished-tag {
+  margin: 0;
+  flex-shrink: 0;
+  color: var(--color-warning, #d48806);
+  background: rgba(212, 136, 6, 0.12);
+  border-color: transparent;
+}
+
+.ask-user-curl-incomplete-tag {
+  margin: 0;
+  flex-shrink: 0;
+  color: var(--color-primary);
+  background: var(--color-primary-subtle);
+  border-color: transparent;
+}
+
+.skopon-form-curl-json,
+.flow-artifact-generate-chat-json {
+  margin: 0;
+  padding: var(--space-2);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+}

package/src/submit/buildCurlStatement.ts

@@ -0,0 +1,13 @@
+function escapeSingleQuotes(text: string): string {
+  return text.replace(/'/g, `'\\''`)
+}
+
+export function buildCurlStatement(payload: unknown, callbackUrl?: string | null): string {
+  const url = (callbackUrl ?? '').trim() || '<callback_url>'
+  const body = JSON.stringify(payload ?? {}, null, 2)
+  return [
+    `curl -X POST '${url}' \\`,
+    `  -H 'Content-Type: application/json' \\`,
+    `  -d '${escapeSingleQuotes(body)}'`,
+  ].join('\n')
+}

package/src/submit/intersectPayloadWithForm.ts

@@ -0,0 +1,54 @@
+import type { FormBlock, FormSchema } from '../types/index'
+import { isInputBlockType } from '../types/index'
+
+/** payload 单个字段的元数据约定（见 docs/ask/ payload.json） */
+export interface AskUserPayloadField {
+  用途描述?: string
+  字段类型?: string
+  字段格式?: string
+  字段枚举?: string
+  [key: string]: unknown
+}
+
+export type AskUserPayload = Record<string, AskUserPayloadField | unknown>
+
+export interface PayloadFormIntersection {
+  matchedBlocks: FormBlock[]
+  remainderPayload: AskUserPayload
+}
+
+export function getPayloadKeys(payload: unknown): string[] {
+  if (!payload || typeof payload !== 'object' || Array.isArray(payload)) return []
+  return Object.keys(payload as Record<string, unknown>)
+}
+
+export function intersectPayloadWithForm(
+  payload: unknown,
+  formDefinition: FormSchema | undefined,
+): PayloadFormIntersection {
+  const keys = getPayloadKeys(payload)
+  const source = (payload ?? {}) as Record<string, unknown>
+
+  const blocks = formDefinition?.blocks ?? []
+  const inputBlockNames = new Set(
+    blocks
+      .filter((block) => isInputBlockType(block.type) && block.name?.trim())
+      .map((block) => block.name!.trim()),
+  )
+
+  const matchedBlocks = blocks.filter(
+    (block) =>
+      isInputBlockType(block.type) &&
+      block.name?.trim() &&
+      keys.includes(block.name.trim()),
+  )
+
+  const remainderPayload: AskUserPayload = {}
+  for (const key of keys) {
+    if (!inputBlockNames.has(key)) {
+      remainderPayload[key] = source[key]
+    }
+  }
+
+  return { matchedBlocks, remainderPayload }
+}

package/src/submit/submit.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from 'vitest'
+import { buildCurlStatement } from '../submit/buildCurlStatement'
+import { intersectPayloadWithForm } from '../submit/intersectPayloadWithForm'
+import { submitFormJson } from '../submit/submitFormJson'
+import type { FormSchema } from '../types/index'
+
+describe('buildCurlStatement', () => {
+  it('builds POST curl with escaped single quotes', () => {
+    const curl = buildCurlStatement({ name: "O'Brien" }, 'https://example.com/hook')
+    expect(curl).toContain("curl -X POST 'https://example.com/hook'")
+    expect(curl).toContain("O'\\''Brien")
+  })
+
+  it('uses placeholder when callback url missing', () => {
+    expect(buildCurlStatement({ a: 1 }, null)).toContain('<callback_url>')
+  })
+})
+
+describe('intersectPayloadWithForm', () => {
+  const formDef: FormSchema = {
+    title: 't',
+    description: '',
+    blocks: [
+      { id: '1', type: 'text', name: 'video_title', label: 'Title' },
+      { id: '2', type: 'text', name: 'other', label: 'Other' },
+    ],
+    jsonSchema: {},
+  }
+
+  it('matches payload keys to form blocks', () => {
+    const result = intersectPayloadWithForm(
+      { video_title: { type: 'text' }, extra: { type: 'text' } },
+      formDef,
+    )
+    expect(result.matchedBlocks.map((b) => b.name)).toEqual(['video_title'])
+    expect(Object.keys(result.remainderPayload)).toEqual(['extra'])
+  })
+})
+
+describe('submitFormJson', () => {
+  it('POSTs JSON payload', async () => {
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
+      headers: { get: () => 'application/json' },
+      json: async () => ({ ok: true }),
+    })) as unknown as typeof fetch
+
+    const result = await submitFormJson(
+      'https://example.com/hook',
+      { a: 1 },
+      { fetch: fetchMock },
+    )
+    expect(result.ok).toBe(true)
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://example.com/hook',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({ a: 1 }),
+      }),
+    )
+  })
+})