@rytass/bpm-core-react 0.4.1 → 0.6.0

package/dist/chunks/FormBuilderView-D8DrQOXD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilderView-D8DrQOXD.js","names":[],"sources":["../../src/views/forms/builder/json-code-editor.tsx","../../src/views/forms/builder/FormBuilderView.tsx"],"sourcesContent":["'use client';\n\nimport { CSSProperties, ReactElement } from 'react';\nimport dynamic from 'next/dynamic';\nimport { json } from '@codemirror/lang-json';\nimport { EditorView } from '@codemirror/view';\nimport type { Extension, ReactCodeMirrorProps } from '@uiw/react-codemirror';\n\nconst EDITOR_FALLBACK_STYLE: CSSProperties = {\n  alignItems: 'center',\n  border: '1px solid var(--mzn-color-border-neutral)',\n  borderRadius: 4,\n  color: 'var(--mzn-color-text-neutral)',\n  display: 'flex',\n  minHeight: 160,\n  padding: 12,\n  width: '100%',\n};\n\nconst JSON_EDITOR_EXTENSIONS: readonly Extension[] = [\n  json(),\n  EditorView.lineWrapping,\n  EditorView.theme({\n    '&': {\n      border: '1px solid var(--mzn-color-border-neutral)',\n      borderRadius: '4px',\n      fontSize: '13px',\n      width: '100%',\n    },\n    '&.cm-focused': {\n      outline: '1px solid var(--mzn-color-border-primary)',\n    },\n    '.cm-content': {\n      fontFamily:\n        'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace',\n      minHeight: '100%',\n    },\n    '.cm-editor': {\n      width: '100%',\n    },\n    '.cm-gutters': {\n      borderRight: '1px solid var(--mzn-color-border-neutral)',\n    },\n    '.cm-scroller': {\n      fontFamily:\n        'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace',\n    },\n  }),\n];\n\nconst CodeMirror = dynamic<ReactCodeMirrorProps>(\n  () => import('@uiw/react-codemirror'),\n  {\n    loading: (): ReactElement => (\n      <div style={EDITOR_FALLBACK_STYLE}>載入 JSON 編輯器</div>\n    ),\n    ssr: false,\n  },\n);\n\ninterface JsonCodeEditorProps {\n  readonly disabled?: boolean;\n  readonly height: string;\n  readonly name: string;\n  readonly onChange: (value: string) => void;\n  readonly placeholder: string;\n  readonly value: string;\n}\n\nexport function JsonCodeEditor({\n  disabled = false,\n  height,\n  name,\n  onChange,\n  placeholder,\n  value,\n}: JsonCodeEditorProps): ReactElement {\n  return (\n    <CodeMirror\n      aria-label={name}\n      basicSetup={{\n        autocompletion: true,\n        bracketMatching: true,\n        closeBrackets: true,\n        defaultKeymap: true,\n        foldGutter: true,\n        highlightActiveLine: true,\n        highlightSelectionMatches: true,\n        lineNumbers: true,\n        syntaxHighlighting: true,\n      }}\n      editable={!disabled}\n      extensions={[...JSON_EDITOR_EXTENSIONS]}\n      height={height}\n      indentWithTab={false}\n      onChange={onChange}\n      placeholder={placeholder}\n      readOnly={disabled}\n      theme=\"light\"\n      value={value}\n      width=\"100%\"\n    />\n  );\n}\n","'use client';\n\nimport {\n  ChangeEvent,\n  CSSProperties,\n  Key,\n  MouseEvent,\n  ReactElement,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  DragDropContext,\n  Draggable,\n  DraggableProvided,\n  Droppable,\n  DropResult,\n} from '@hello-pangea/dnd';\nimport {\n  Accordion,\n  BaseCard,\n  Badge,\n  Button,\n  DatePicker,\n  DateTimePicker,\n  Icon,\n  Input,\n  Section,\n  SectionGroup,\n  Select,\n  Tab,\n  TabItem,\n  Table,\n  Textarea,\n  Toggle,\n  Typography,\n} from '@mezzanine-ui/react';\nimport {\n  AlignLeftIcon,\n  CalendarIcon,\n  CheckedIcon,\n  CheckedOutlineIcon,\n  CurrencyDollarIcon,\n  DotDragVerticalIcon,\n  DotGridIcon,\n  FileAttachmentIcon,\n  FileIcon,\n  ListIcon,\n  PlusIcon,\n  TrashIcon,\n} from '@mezzanine-ui/icons';\nimport type { IconDefinition } from '@mezzanine-ui/icons';\nimport type { TableActions, TableColumn } from '@mezzanine-ui/core/table';\nimport {\n  BooleanFieldDefinition,\n  DateFieldDefinition,\n  FileUploadFieldDefinition,\n  FormDefinitionSchema,\n  FormFieldDefinition,\n  FormFieldOption,\n  FormUiSchema,\n  NumberFieldDefinition,\n  SelectFieldDefinition,\n  TextFieldDefinition,\n} from '@rytass/bpm-core-shared/form';\nimport { createFieldDefinition } from '@rytass/bpm-core-client/form';\nimport {\n  buildConditionExpression,\n  buildFormRendererValues,\n  clampOptionalNumber,\n  formatDatePickerValue,\n  formatDateTimePickerValue,\n  FormRendererValues,\n  isDateFieldDefinition,\n  isNumberFieldDefinition,\n  isSelectFieldDefinition,\n  parseConditionRule,\n  parseOptionalNumberInput,\n  readConditionOperatorOption,\n  readConditionOperatorOptions,\n  readDatePickerValue,\n  readDefaultConditionOperator,\n  readDefaultConditionValue,\n  readFieldOptionAsSelectOption,\n  readSelectOption,\n} from '@rytass/bpm-core-client/form';\nimport { BPMFormField } from '../../../components/bpm-form-field';\nimport { FormRenderer } from '../renderer/FormRendererView';\nimport { JsonCodeEditor } from './json-code-editor';\n\ntype FieldType = FormFieldDefinition['type'];\ntype BuilderTabKey = 'design' | 'preview' | 'advanced';\ntype FieldOptionRow = Readonly<\n  Record<string, unknown> & {\n    index: number;\n    key: string;\n    label: string;\n    value: string;\n  }\n>;\n\ntype FieldTypeOption = Readonly<{\n  description: string;\n  icon: IconDefinition;\n  label: string;\n  type: FieldType;\n}>;\n\ntype ConditionRuleTarget = 'readonlyWhen' | 'requiredWhen' | 'visibleWhen';\n\ntype ConditionRuleConfig = Readonly<{\n  label: string;\n  name: string;\n  supportingText: string;\n  target: ConditionRuleTarget;\n}>;\n\nconst FIELD_TYPE_OPTIONS: readonly FieldTypeOption[] = [\n  {\n    description: '單行文字、姓名、編號',\n    icon: AlignLeftIcon,\n    label: '文字',\n    type: 'text',\n  },\n  {\n    description: '多行補充內容',\n    icon: FileIcon,\n    label: '長文字',\n    type: 'textarea',\n  },\n  {\n    description: '金額、數量、分數',\n    icon: CurrencyDollarIcon,\n    label: '數字',\n    type: 'number',\n  },\n  {\n    description: '金額與費用',\n    icon: CurrencyDollarIcon,\n    label: '金額',\n    type: 'money',\n  },\n  {\n    description: '日期或到期日',\n    icon: CalendarIcon,\n    label: '日期',\n    type: 'date',\n  },\n  {\n    description: '日期與時間',\n    icon: CalendarIcon,\n    label: '日期時間',\n    type: 'datetime',\n  },\n  {\n    description: '是 / 否狀態',\n    icon: CheckedIcon,\n    label: '開關',\n    type: 'boolean',\n  },\n  {\n    description: '固定選項擇一',\n    icon: ListIcon,\n    label: '下拉選單',\n    type: 'select',\n  },\n  {\n    description: '固定選項單選',\n    icon: DotGridIcon,\n    label: '單選',\n    type: 'radio',\n  },\n  {\n    description: '固定選項複選',\n    icon: CheckedOutlineIcon,\n    label: '複選',\n    type: 'checkbox',\n  },\n  {\n    description: '附件或佐證資料',\n    icon: FileAttachmentIcon,\n    label: '附件',\n    type: 'file_upload',\n  },\n];\n\nconst WORKSPACE_GRID_STYLE: CSSProperties = {\n  alignItems: 'start',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 16,\n};\n\nconst CANVAS_COLUMN_STYLE: CSSProperties = {\n  flex: '0.55 1 300px',\n  minWidth: 0,\n};\n\nconst SETTINGS_COLUMN_STYLE: CSSProperties = {\n  flex: '1.45 1 720px',\n  minWidth: 620,\n};\n\nconst STACK_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 12,\n};\n\nconst FIELD_LIBRARY_STYLE: CSSProperties = {\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 6,\n};\n\nconst FIELD_LIBRARY_BUTTON_STYLE: CSSProperties = {\n  flex: '0 0 auto',\n  whiteSpace: 'nowrap',\n};\n\nconst FIELD_LIBRARY_HEADER_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 8,\n};\n\nconst FIELD_BLOCK_ROW_STYLE: CSSProperties = {\n  alignItems: 'center',\n  cursor: 'grab',\n  display: 'flex',\n  gap: 12,\n  touchAction: 'none',\n};\n\nconst FIELD_BLOCK_TEXT_STYLE: CSSProperties = {\n  display: 'grid',\n  flex: '1 1 auto',\n  gap: 2,\n  minWidth: 0,\n};\n\nconst FIELD_BLOCK_ACTIONS_STYLE: CSSProperties = {\n  alignItems: 'center',\n  display: 'flex',\n  flex: '0 0 auto',\n  gap: 4,\n};\n\nconst FIELD_BLOCK_REQUIRED_STYLE: CSSProperties = {\n  alignItems: 'center',\n  display: 'flex',\n  gap: 6,\n};\n\nconst FIELD_BLOCK_STYLE: CSSProperties = {\n  cursor: 'pointer',\n  userSelect: 'none',\n};\n\nconst FIELD_BLOCK_DRAGGING_STYLE: CSSProperties = {\n  filter: 'drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12))',\n};\n\n// Selected field: tint the whole card with a light brand fill over the surface\n// so the active row is obvious without relying on the (removed) edit button.\nconst FIELD_BLOCK_SELECTED_CARD_STYLE: CSSProperties = {\n  backgroundColor:\n    'color-mix(in srgb, var(--mzn-color-primary) 8%, var(--mzn-color-bg-surface))',\n  boxShadow: 'inset 0 0 0 1px var(--mzn-color-border-primary)',\n};\n\nconst EMPTY_CANVAS_STYLE: CSSProperties = {\n  alignItems: 'center',\n  border: '1px dashed var(--mzn-color-border-neutral)',\n  borderRadius: 6,\n  display: 'grid',\n  gap: 12,\n  minHeight: 240,\n  padding: 32,\n  textAlign: 'center',\n};\n\nconst EMPTY_CANVAS_ACTIONS_STYLE: CSSProperties = {\n  display: 'flex',\n  gap: 8,\n  justifyContent: 'center',\n};\n\nconst FIELD_SETTINGS_FORM_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 14,\n};\n\nconst FIELD_SETTINGS_SECTION_STYLE: CSSProperties = {\n  display: 'grid',\n  columnGap: 16,\n  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',\n  rowGap: 8,\n};\n\nconst FIELD_SETTINGS_SECTION_TITLE_STYLE: CSSProperties = {\n  gridColumn: '1 / -1',\n};\n\nconst FIELD_SETTINGS_BADGE_ROW_STYLE: CSSProperties = {\n  alignItems: 'center',\n  display: 'flex',\n  gap: 8,\n  gridColumn: '1 / -1',\n  justifyContent: 'flex-end',\n};\n\nconst FIELD_SETTINGS_HINT_STYLE: CSSProperties = {\n  gridColumn: '1 / -1',\n};\n\nconst FIELD_SETTINGS_ROW_STYLE: CSSProperties = {\n  alignItems: 'start',\n  display: 'block',\n  width: '100%',\n};\n\nconst FIELD_SETTINGS_ROW_WIDE_STYLE: CSSProperties = {\n  ...FIELD_SETTINGS_ROW_STYLE,\n  gridColumn: '1 / -1',\n};\n\nconst FIELD_SETTINGS_VALUE_STYLE: CSSProperties = {\n  minWidth: 0,\n  width: '100%',\n};\n\nconst FIELD_SETTINGS_TEXTAREA_STYLE: CSSProperties = {\n  minWidth: '100%',\n  width: '100%',\n};\n\nconst ADVANCED_SCHEMA_FORM_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 14,\n};\n\nconst ADVANCED_SCHEMA_ROW_STYLE: CSSProperties = {\n  alignItems: 'start',\n  display: 'block',\n  width: '100%',\n};\n\nconst ADVANCED_SCHEMA_VALUE_STYLE: CSSProperties = {\n  minWidth: 0,\n  width: '100%',\n};\n\nconst ADVANCED_SCHEMA_MESSAGE_STYLE: CSSProperties = {\n  gridColumn: '2 / -1',\n};\n\nconst CONDITION_RULE_CONTROL_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 10,\n  width: '100%',\n};\n\nconst CONDITION_RULE_GRID_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 8,\n  gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',\n};\n\nconst DRAG_HANDLE_STYLE: CSSProperties = {\n  display: 'inline-flex',\n};\n\nconst WORKBENCH_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 16,\n};\n\nconst COMPACT_STACK_STYLE: CSSProperties = {\n  display: 'grid',\n  gap: 8,\n};\n\nconst OPTION_ACTIONS_STYLE: CSSProperties = {\n  display: 'flex',\n  justifyContent: 'flex-end',\n};\n\nconst REQUIRED_ASTERISK_STYLE: CSSProperties = {\n  color: 'var(--mzn-color-text-error)',\n  fontSize: '0.72em',\n  lineHeight: 0,\n  marginLeft: 2,\n  verticalAlign: 'super',\n};\n\nfunction applyFullWidthTextareaHost(element: HTMLDivElement | null): void {\n  if (!element) {\n    return;\n  }\n\n  element.style.width = '100%';\n}\n\nconst EMPTY_SCHEMA: FormDefinitionSchema = {\n  fields: [],\n  schemaVersion: 1,\n};\n\nconst EMPTY_UI_SCHEMA: FormUiSchema = {\n  layout: [],\n  schemaVersion: 1,\n};\n\nconst BOOLEAN_DEFAULT_OPTIONS: readonly {\n  readonly id: string;\n  readonly name: string;\n}[] = [\n  { id: 'unset', name: '不預設' },\n  { id: 'true', name: '是' },\n  { id: 'false', name: '否' },\n];\n\nconst BOOLEAN_CONDITION_VALUE_OPTIONS: readonly {\n  readonly id: string;\n  readonly name: string;\n}[] = [\n  { id: 'true', name: '是' },\n  { id: 'false', name: '否' },\n];\n\nconst CONDITION_RULE_CONFIGS: readonly ConditionRuleConfig[] = [\n  {\n    label: '顯示',\n    name: 'fieldVisibleWhen',\n    supportingText: '符合條件時才顯示這個欄位。',\n    target: 'visibleWhen',\n  },\n  {\n    label: '必填',\n    name: 'fieldRequiredWhen',\n    supportingText: '符合條件時才要求填寫這個欄位。',\n    target: 'requiredWhen',\n  },\n  {\n    label: '唯讀',\n    name: 'fieldReadonlyWhen',\n    supportingText: '符合條件時不允許修改這個欄位。',\n    target: 'readonlyWhen',\n  },\n];\n\nexport interface FormBuilderViewProps {\n  /**\n   * Initial (or controlled) schema value.\n   * If omitted, the builder starts with empty schema / uiSchema.\n   */\n  readonly value?: {\n    readonly schema: FormDefinitionSchema;\n    readonly uiSchema: FormUiSchema;\n  };\n\n  /** Called whenever the schema or uiSchema changes. */\n  readonly onChange?: (next: {\n    readonly schema: FormDefinitionSchema;\n    readonly uiSchema: FormUiSchema;\n  }) => void;\n}\n\nexport function FormBuilderView({\n  onChange,\n  value,\n}: FormBuilderViewProps): ReactElement {\n  const initialSchema = value?.schema ?? EMPTY_SCHEMA;\n  const initialUiSchema = value?.uiSchema ?? EMPTY_UI_SCHEMA;\n  const [schema, setSchema] = useState<FormDefinitionSchema>(initialSchema);\n  const [uiSchema, setUiSchema] = useState<FormUiSchema>(initialUiSchema);\n  const [schemaJsonText, setSchemaJsonText] = useState(\n    stringifyJson(initialSchema),\n  );\n  const [uiSchemaJsonText, setUiSchemaJsonText] = useState(\n    stringifyJson(initialUiSchema),\n  );\n  const [previewValues, setPreviewValues] = useState<FormRendererValues>({});\n  const [advancedSchemaMessage, setAdvancedSchemaMessage] = useState<\n    string | null\n  >(null);\n  const [activeTab, setActiveTab] = useState<BuilderTabKey>('design');\n  const [selectedFieldKey, setSelectedFieldKey] = useState<string | null>(null);\n  useEffect((): void => {\n    const hasSelectedField = schema.fields.some(\n      (field) => field.fieldKey === selectedFieldKey,\n    );\n\n    if (hasSelectedField) {\n      return;\n    }\n\n    setSelectedFieldKey(schema.fields[0]?.fieldKey ?? null);\n  }, [schema.fields, selectedFieldKey]);\n\n  useEffect((): void => {\n    setPreviewValues((currentValues) =>\n      buildFormRendererValues(schema.fields, currentValues),\n    );\n  }, [schema.fields]);\n\n  useEffect((): void => {\n    if (activeTab === 'advanced') {\n      return;\n    }\n\n    setSchemaJsonText(stringifyJson(schema));\n    setUiSchemaJsonText(stringifyJson(uiSchema));\n  }, [activeTab, schema, uiSchema]);\n\n  const selectedField = useMemo(\n    (): FormFieldDefinition | null =>\n      schema.fields.find((field) => field.fieldKey === selectedFieldKey) ??\n      schema.fields[0] ??\n      null,\n    [schema.fields, selectedFieldKey],\n  );\n  useEffect((): void => {\n    onChange?.({ schema, uiSchema });\n  }, [schema, uiSchema]);\n\n  function handleAddField(type: FieldType): void {\n    const nextIndex = schema.fields.length + 1;\n    const field = createFieldDefinition(type, nextIndex);\n\n    setSchema({\n      ...schema,\n      fields: [...schema.fields, field],\n    });\n    setUiSchema({\n      ...uiSchema,\n      layout: [\n        ...uiSchema.layout,\n        {\n          fieldKey: field.fieldKey,\n          width:\n            type === 'textarea' || type === 'file_upload' ? 'FULL' : 'HALF',\n        },\n      ],\n    });\n    setSelectedFieldKey(field.fieldKey);\n    setActiveTab('design');\n    setAdvancedSchemaMessage(null);\n  }\n\n  function handleTabChange(activeKey: Key): void {\n    const nextTab = activeKey as BuilderTabKey;\n\n    if (nextTab === 'advanced' && activeTab !== 'advanced') {\n      setSchemaJsonText(stringifyJson(schema));\n      setUiSchemaJsonText(stringifyJson(uiSchema));\n    }\n\n    setActiveTab(nextTab);\n  }\n\n  function handleRemoveField(fieldKey: string): void {\n    const remainingFields = schema.fields.filter(\n      (field) => field.fieldKey !== fieldKey,\n    );\n\n    setSchema({\n      ...schema,\n      fields: remainingFields,\n    });\n    setUiSchema({\n      ...uiSchema,\n      layout: uiSchema.layout.filter((item) => item.fieldKey !== fieldKey),\n    });\n    setSelectedFieldKey(\n      selectedFieldKey === fieldKey\n        ? (remainingFields[0]?.fieldKey ?? null)\n        : selectedFieldKey,\n    );\n    setAdvancedSchemaMessage(null);\n  }\n\n  function handleFieldDragEnd(result: DropResult): void {\n    const destination = result.destination;\n\n    if (!destination) {\n      return;\n    }\n\n    if (result.source.index === destination.index) {\n      return;\n    }\n\n    setSchema((currentSchema) => ({\n      ...currentSchema,\n      fields: moveItemByIndex(\n        currentSchema.fields,\n        result.source.index,\n        destination.index,\n      ),\n    }));\n    setUiSchema((currentUiSchema) => ({\n      ...currentUiSchema,\n      layout: moveItemByIndex(\n        currentUiSchema.layout,\n        result.source.index,\n        destination.index,\n      ),\n    }));\n    setAdvancedSchemaMessage(null);\n  }\n\n  function updateSelectedField(\n    patch: Partial<\n      Pick<\n        FormFieldDefinition,\n        | 'defaultValue'\n        | 'fieldKey'\n        | 'label'\n        | 'placeholder'\n        | 'readonlyWhen'\n        | 'required'\n        | 'requiredWhen'\n        | 'visibleWhen'\n      >\n    >,\n  ): void {\n    updateSelectedFieldWith(\n      (field) => ({ ...field, ...patch }) as FormFieldDefinition,\n    );\n  }\n\n  function updateSelectedFieldWith(\n    updater: (field: FormFieldDefinition) => FormFieldDefinition,\n  ): void {\n    if (!selectedField) {\n      return;\n    }\n\n    const previousFieldKey = selectedField.fieldKey;\n    const nextField = updater(selectedField);\n    const nextFieldKey = nextField.fieldKey;\n\n    setSchema({\n      ...schema,\n      fields: schema.fields.map(\n        (field): FormFieldDefinition =>\n          field.fieldKey === previousFieldKey ? nextField : field,\n      ),\n    });\n    setUiSchema({\n      ...uiSchema,\n      layout: uiSchema.layout.map((item) =>\n        item.fieldKey === previousFieldKey\n          ? { ...item, fieldKey: nextFieldKey }\n          : item,\n      ),\n    });\n    setSelectedFieldKey(nextFieldKey);\n    setAdvancedSchemaMessage(null);\n  }\n\n  function updateSelectedTextField(\n    patch: Partial<\n      Pick<TextFieldDefinition, 'defaultValue' | 'maxLength' | 'minLength'>\n    >,\n  ): void {\n    updateSelectedFieldWith((field) =>\n      isTextFieldDefinition(field) ? { ...field, ...patch } : field,\n    );\n  }\n\n  function updateSelectedNumberField(\n    patch: Partial<\n      Pick<NumberFieldDefinition, 'defaultValue' | 'maximum' | 'minimum'>\n    >,\n  ): void {\n    updateSelectedFieldWith((field) =>\n      isNumberFieldDefinition(field) ? { ...field, ...patch } : field,\n    );\n  }\n\n  function updateSelectedDateField(\n    patch: Partial<Pick<DateFieldDefinition, 'defaultValue'>>,\n  ): void {\n    updateSelectedFieldWith((field) =>\n      isDateFieldDefinition(field) ? { ...field, ...patch } : field,\n    );\n  }\n\n  function updateSelectedSelectField(\n    patch: Partial<Pick<SelectFieldDefinition, 'defaultValue' | 'options'>>,\n  ): void {\n    updateSelectedFieldWith((field) =>\n      isSelectFieldDefinition(field) ? { ...field, ...patch } : field,\n    );\n  }\n\n  function updateSelectedBooleanField(\n    patch: Partial<Pick<BooleanFieldDefinition, 'defaultValue'>>,\n  ): void {\n    updateSelectedFieldWith((field) =>\n      field.type === 'boolean' ? { ...field, ...patch } : field,\n    );\n  }\n\n  function updateSelectedFileUploadField(\n    patch: Partial<\n      Pick<\n        FileUploadFieldDefinition,\n        'acceptedMimeTypes' | 'defaultValue' | 'maxFiles'\n      >\n    >,\n  ): void {\n    updateSelectedFieldWith((field) =>\n      field.type === 'file_upload' ? { ...field, ...patch } : field,\n    );\n  }\n\n  function updatePreviewValues(values: FormRendererValues): void {\n    setPreviewValues(values);\n  }\n\n  function updateFieldRequired(fieldKey: string, required: boolean): void {\n    setSchema((currentSchema) => ({\n      ...currentSchema,\n      fields: currentSchema.fields.map(\n        (field): FormFieldDefinition =>\n          field.fieldKey === fieldKey\n            ? ({ ...field, required } as FormFieldDefinition)\n            : field,\n      ),\n    }));\n    setAdvancedSchemaMessage(null);\n  }\n\n  function updateSchemaJson(value: string): void {\n    setSchemaJsonText(value);\n\n    try {\n      setSchema(JSON.parse(value) as FormDefinitionSchema);\n      setAdvancedSchemaMessage(null);\n    } catch {\n      setAdvancedSchemaMessage('Form Schema JSON 格式不正確');\n    }\n  }\n\n  function updateUiSchemaJson(value: string): void {\n    setUiSchemaJsonText(value);\n\n    try {\n      setUiSchema(JSON.parse(value) as FormUiSchema);\n      setAdvancedSchemaMessage(null);\n    } catch {\n      setAdvancedSchemaMessage('UI Schema JSON 格式不正確');\n    }\n  }\n\n  return (\n    <>\n      <>\n          <SectionGroup>\n            <Section>\n              <div style={WORKBENCH_STYLE}>\n                <Tab\n                  activeKey={activeTab}\n                  onChange={handleTabChange}\n                  size=\"sub\"\n                >\n                  <TabItem key=\"design\">設計</TabItem>\n                  <TabItem key=\"preview\">預覽</TabItem>\n                  <TabItem key=\"advanced\">進階</TabItem>\n                </Tab>\n\n                {activeTab === 'design' ? renderDesignTab() : null}\n                {activeTab === 'preview' ? renderPreviewTab() : null}\n                {activeTab === 'advanced' ? renderAdvancedTab() : null}\n              </div>\n            </Section>\n          </SectionGroup>\n        </>\n\n    </>\n  );\n\n  function renderDesignTab(): ReactElement {\n    return (\n      <div style={STACK_STYLE}>\n        <div style={FIELD_LIBRARY_HEADER_STYLE}>\n          <Typography component=\"h2\" variant=\"label-primary\">\n            新增欄位\n          </Typography>\n          <div style={FIELD_LIBRARY_STYLE}>\n            {FIELD_TYPE_OPTIONS.map((option) => (\n              <Button\n                icon={option.icon}\n                iconType=\"leading\"\n                key={option.type}\n                onClick={(): void => handleAddField(option.type)}\n                size=\"sub\"\n                style={FIELD_LIBRARY_BUTTON_STYLE}\n                type=\"button\"\n                variant=\"base-secondary\"\n              >\n                {option.label}\n              </Button>\n            ))}\n          </div>\n        </div>\n\n        <div style={WORKSPACE_GRID_STYLE}>\n          <div style={{ ...STACK_STYLE, ...CANVAS_COLUMN_STYLE }}>\n            <Typography component=\"h2\" variant=\"label-primary\">\n              表單畫布\n            </Typography>\n            {schema.fields.length > 0 ? (\n              <DragDropContext onDragEnd={handleFieldDragEnd}>\n                <Droppable droppableId=\"form-builder-fields\">\n                  {(droppableProvided): ReactElement => (\n                    <div\n                      {...droppableProvided.droppableProps}\n                      ref={droppableProvided.innerRef}\n                      style={STACK_STYLE}\n                    >\n                      {schema.fields.map((field, index) => (\n                        <Draggable\n                          draggableId={field.fieldKey}\n                          index={index}\n                          key={field.fieldKey}\n                        >\n                          {(draggableProvided, snapshot): ReactElement =>\n                            renderFieldBlock(\n                              field,\n                              draggableProvided,\n                              snapshot.isDragging,\n                            )\n                          }\n                        </Draggable>\n                      ))}\n                      {droppableProvided.placeholder}\n                    </div>\n                  )}\n                </Droppable>\n              </DragDropContext>\n            ) : (\n              <div style={EMPTY_CANVAS_STYLE}>\n                <div style={STACK_STYLE}>\n                  <Typography component=\"h3\" variant=\"h3\">\n                    尚未建立欄位\n                  </Typography>\n                  <Typography color=\"text-neutral\" variant=\"body\">\n                    從上方新增第一個欄位，或直接建立常用文字欄位開始設計。\n                  </Typography>\n                </div>\n                <div style={EMPTY_CANVAS_ACTIONS_STYLE}>\n                  <Button\n                    onClick={(): void => handleAddField('text')}\n                    variant=\"base-primary\"\n                  >\n                    新增文字欄位\n                  </Button>\n                  <Button\n                    onClick={(): void => handleAddField('textarea')}\n                    variant=\"base-secondary\"\n                  >\n                    新增長文字\n                  </Button>\n                </div>\n              </div>\n            )}\n          </div>\n\n          <div style={{ ...STACK_STYLE, ...SETTINGS_COLUMN_STYLE }}>\n            <Typography component=\"h2\" variant=\"label-primary\">\n              欄位設定\n            </Typography>\n            {selectedField ? (\n              renderFieldSettings(selectedField)\n            ) : (\n              <Typography color=\"text-neutral\" variant=\"body\">\n                請先新增或選取欄位。\n              </Typography>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  function renderFieldSettings(field: FormFieldDefinition): ReactElement {\n    return (\n      <div style={FIELD_SETTINGS_FORM_STYLE}>\n        {renderMainFieldSettings(field)}\n        {renderAdvancedFieldSettings(field)}\n      </div>\n    );\n  }\n\n  function renderMainFieldSettings(field: FormFieldDefinition): ReactElement {\n    return (\n      <div style={FIELD_SETTINGS_SECTION_STYLE}>\n        <div style={FIELD_SETTINGS_BADGE_ROW_STYLE}>\n          <Badge\n            size=\"main\"\n            text={readFieldTypeLabel(field.type)}\n            variant=\"text-info\"\n          />\n        </div>\n        {renderSettingsFormRow(\n          '標題',\n          'fieldLabel',\n          <Input\n            onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n              updateSelectedField({ label: event.target.value })\n            }\n            placeholder=\"例如：申請金額\"\n            value={field.label}\n            variant=\"base\"\n          />,\n        )}\n        {renderSettingsFormRow(\n          '欄位 Key',\n          'fieldKey',\n          <Input\n            onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n              updateSelectedField({ fieldKey: event.target.value })\n            }\n            placeholder=\"例如：amount\"\n            value={field.fieldKey}\n            variant=\"base\"\n          />,\n        )}\n        {renderSettingsFormRow(\n          '提示文字',\n          'fieldPlaceholder',\n          <Input\n            onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n              updateSelectedField({\n                placeholder: event.target.value || undefined,\n              })\n            }\n            placeholder=\"例如：請輸入申請金額\"\n            value={field.placeholder ?? ''}\n            variant=\"base\"\n          />,\n        )}\n        {renderTypeSpecificSettings(field)}\n      </div>\n    );\n  }\n\n  function renderAdvancedFieldSettings(\n    field: FormFieldDefinition,\n  ): ReactElement {\n    return (\n      <Accordion\n        defaultExpanded={hasConditionRules(field)}\n        size=\"sub\"\n        title=\"進階設定\"\n      >\n        <div style={FIELD_SETTINGS_SECTION_STYLE}>\n          <Typography\n            component=\"h3\"\n            style={FIELD_SETTINGS_SECTION_TITLE_STYLE}\n            variant=\"label-primary\"\n          >\n            條件規則\n          </Typography>\n          <Typography\n            color=\"text-neutral\"\n            style={FIELD_SETTINGS_HINT_STYLE}\n            variant=\"body\"\n          >\n            只有需要根據其他欄位改變顯示、必填或唯讀狀態時才需要設定。\n          </Typography>\n          {renderConditionSettings(field)}\n        </div>\n      </Accordion>\n    );\n  }\n\n  function renderTypeSpecificSettings(\n    field: FormFieldDefinition,\n  ): ReactElement {\n    if (isTextFieldDefinition(field)) {\n      return renderTextFieldSettings(field);\n    }\n\n    if (isNumberFieldDefinition(field)) {\n      return renderNumberFieldSettings(field);\n    }\n\n    if (isDateFieldDefinition(field)) {\n      return renderDateFieldSettings(field);\n    }\n\n    if (isSelectFieldDefinition(field)) {\n      return renderSelectFieldSettings(field);\n    }\n\n    if (field.type === 'boolean') {\n      return renderBooleanFieldSettings(field);\n    }\n\n    return renderFileUploadFieldSettings(field);\n  }\n\n  function renderTextFieldSettings(field: TextFieldDefinition): ReactElement {\n    return (\n      <>\n        {renderSettingsFormRow(\n          '預設值',\n          'fieldDefaultValue',\n          field.type === 'textarea' ? (\n            renderSettingsTextarea({\n              name: 'fieldDefaultValue',\n              onChange: (value): void =>\n                updateSelectedTextField({ defaultValue: value || undefined }),\n              placeholder: '輸入此欄位的預設文字',\n              rows: 3,\n              value: readStringDefaultValue(field.defaultValue),\n            })\n          ) : (\n            <Input\n              onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n                updateSelectedTextField({\n                  defaultValue: event.target.value || undefined,\n                })\n              }\n              placeholder=\"輸入此欄位的預設文字\"\n              value={readStringDefaultValue(field.defaultValue)}\n              variant=\"base\"\n            />\n          ),\n        )}\n        {renderSettingsFormRow(\n          '最小長度',\n          'fieldMinLength',\n          renderNumberInput(\n            field.minLength,\n            (value): void => updateSelectedTextField({ minLength: value }),\n            '例如：2',\n            { min: 0 },\n          ),\n        )}\n        {renderSettingsFormRow(\n          '最大長度',\n          'fieldMaxLength',\n          renderNumberInput(\n            field.maxLength,\n            (value): void => updateSelectedTextField({ maxLength: value }),\n            '例如：100',\n            { min: 1 },\n          ),\n        )}\n      </>\n    );\n  }\n\n  function renderNumberFieldSettings(\n    field: NumberFieldDefinition,\n  ): ReactElement {\n    return (\n      <>\n        {renderSettingsFormRow(\n          '預設值',\n          'fieldDefaultValue',\n          renderNumberInput(\n            typeof field.defaultValue === 'number'\n              ? field.defaultValue\n              : undefined,\n            (value): void => updateSelectedNumberField({ defaultValue: value }),\n            field.type === 'money' ? '例如：1000' : '輸入預設數值',\n            { max: field.maximum, min: field.minimum },\n          ),\n        )}\n        {renderSettingsFormRow(\n          '最小值',\n          'fieldMinimum',\n          renderNumberInput(\n            field.minimum,\n            (value): void => updateSelectedNumberField({ minimum: value }),\n            '例如：0',\n          ),\n        )}\n        {renderSettingsFormRow(\n          '最大值',\n          'fieldMaximum',\n          renderNumberInput(\n            field.maximum,\n            (value): void => updateSelectedNumberField({ maximum: value }),\n            '例如：999999',\n          ),\n        )}\n      </>\n    );\n  }\n\n  function renderDateFieldSettings(field: DateFieldDefinition): ReactElement {\n    return renderSettingsFormRow(\n      '預設值',\n      'fieldDefaultValue',\n      renderDateValuePicker(\n        field,\n        readStringDefaultValue(field.defaultValue),\n        (value): void => updateSelectedDateField({ defaultValue: value }),\n      ),\n    );\n  }\n\n  function renderSelectFieldSettings(\n    field: SelectFieldDefinition,\n  ): ReactElement {\n    const defaultValues = Array.isArray(field.defaultValue)\n      ? field.defaultValue\n      : [];\n    const selectedValues = field.options\n      .filter((option) => defaultValues.includes(option.value))\n      .map(readFieldOptionAsSelectOption);\n\n    return (\n      <>\n        {renderSettingsFormRow(\n          '預設值',\n          'fieldDefaultValue',\n          field.type === 'checkbox' ? (\n            <Select\n              clearable\n              mode=\"multiple\"\n              onChange={(options): void =>\n                updateSelectedSelectField({\n                  defaultValue: options.length\n                    ? options.map((option) => option.id)\n                    : undefined,\n                })\n              }\n              options={field.options.map(readFieldOptionAsSelectOption)}\n              placeholder=\"選擇一或多個預設選項\"\n              value={selectedValues}\n            />\n          ) : (\n            <Select\n              clearable\n              onChange={(option): void =>\n                updateSelectedSelectField({\n                  defaultValue: option?.id || undefined,\n                })\n              }\n              options={field.options.map(readFieldOptionAsSelectOption)}\n              placeholder=\"選擇預設選項\"\n              value={\n                typeof field.defaultValue === 'string'\n                  ? readSelectOption(\n                      field.options.map(readFieldOptionAsSelectOption),\n                      field.defaultValue,\n                    )\n                  : null\n              }\n            />\n          ),\n        )}\n        {renderSettingsFormRow(\n          '選項',\n          'fieldOptions',\n          renderFieldOptionsTable(field),\n          true,\n        )}\n      </>\n    );\n  }\n\n  function renderBooleanFieldSettings(\n    field: BooleanFieldDefinition,\n  ): ReactElement {\n    const defaultValue =\n      typeof field.defaultValue === 'boolean'\n        ? String(field.defaultValue)\n        : 'unset';\n\n    return renderSettingsFormRow(\n      '預設值',\n      'fieldDefaultValue',\n      <Select\n        clearable={false}\n        onChange={(option): void =>\n          updateSelectedBooleanField({\n            defaultValue:\n              option?.id === 'true'\n                ? true\n                : option?.id === 'false'\n                  ? false\n                  : undefined,\n          })\n        }\n        options={[...BOOLEAN_DEFAULT_OPTIONS]}\n        placeholder=\"選擇預設狀態\"\n        value={readSelectOption(BOOLEAN_DEFAULT_OPTIONS, defaultValue)}\n      />,\n    );\n  }\n\n  function renderFileUploadFieldSettings(\n    field: FileUploadFieldDefinition,\n  ): ReactElement {\n    return (\n      <>\n        {renderSettingsFormRow(\n          '檔案數',\n          'fieldMaxFiles',\n          renderNumberInput(\n            field.maxFiles,\n            (value): void => updateSelectedFileUploadField({ maxFiles: value }),\n            '例如：1',\n            { min: 1 },\n          ),\n        )}\n        {renderSettingsFormRow(\n          'MIME',\n          'fieldAcceptedMimeTypes',\n          renderSettingsTextarea({\n            name: 'fieldAcceptedMimeTypes',\n            onChange: (value): void =>\n              updateSelectedFileUploadField({\n                acceptedMimeTypes: parseStringList(value),\n              }),\n            placeholder: '每行一個 MIME type，例如：application/pdf',\n            rows: 3,\n            value: readStringListInput(field.acceptedMimeTypes),\n          }),\n          false,\n        )}\n      </>\n    );\n  }\n\n  function renderConditionSettings(field: FormFieldDefinition): ReactElement {\n    const conditionFieldOptions = schema.fields.filter(\n      (schemaField) => schemaField.fieldKey !== field.fieldKey,\n    );\n\n    if (!conditionFieldOptions.length) {\n      return (\n        <Typography\n          color=\"text-neutral\"\n          style={FIELD_SETTINGS_HINT_STYLE}\n          variant=\"body\"\n        >\n          目前沒有其他欄位可作為條件來源。新增更多欄位後即可設定條件規則。\n        </Typography>\n      );\n    }\n\n    return (\n      <>\n        {CONDITION_RULE_CONFIGS.map((config) =>\n          renderConditionRule(field, config, conditionFieldOptions),\n        )}\n      </>\n    );\n  }\n\n  function renderConditionRule(\n    field: FormFieldDefinition,\n    config: ConditionRuleConfig,\n    conditionFieldOptions: readonly FormFieldDefinition[],\n  ): ReactElement {\n    const expression = field[config.target];\n    const parsedRule = expression ? parseConditionRule(expression) : null;\n    const parsedConditionField = conditionFieldOptions.find(\n      (conditionField) => conditionField.fieldKey === parsedRule?.fieldKey,\n    );\n    const selectedConditionField =\n      parsedConditionField ?? conditionFieldOptions[0];\n    const conditionFieldSelectOptions = conditionFieldOptions.map(\n      readFieldAsConditionSelectOption,\n    );\n    const conditionOperatorOptions = readConditionOperatorOptions(\n      selectedConditionField,\n    );\n    const selectedOperator =\n      parsedRule &&\n      conditionOperatorOptions.some(\n        (option) => option.id === parsedRule.operator,\n      )\n        ? parsedRule.operator\n        : readDefaultConditionOperator(selectedConditionField);\n    const selectedValue =\n      parsedRule?.value ?? readDefaultConditionValue(selectedConditionField);\n    const enabled = Boolean(expression);\n    const unsupportedRule = enabled && (!parsedRule || !parsedConditionField);\n\n    return renderSettingsFormRow(\n      config.label,\n      config.name,\n      <div style={CONDITION_RULE_CONTROL_STYLE}>\n        <Toggle\n          checked={enabled}\n          label={enabled ? '已啟用' : '不啟用'}\n          onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n            updateSelectedConditionRule(\n              config.target,\n              event.target.checked\n                ? buildConditionExpression(\n                    selectedConditionField,\n                    readDefaultConditionOperator(selectedConditionField),\n                    readDefaultConditionValue(selectedConditionField),\n                  )\n                : undefined,\n            )\n          }\n          size=\"sub\"\n          supportingText={config.supportingText}\n        />\n        {enabled ? (\n          unsupportedRule ? (\n            <Typography color=\"text-warning\" variant=\"body\">\n              這個規則不是目前 UI 支援的格式。重新選擇條件後會取代既有規則。\n            </Typography>\n          ) : (\n            <div style={CONDITION_RULE_GRID_STYLE}>\n              <Select\n                clearable={false}\n                onChange={(option): void => {\n                  const nextField =\n                    conditionFieldOptions.find(\n                      (conditionField) =>\n                        conditionField.fieldKey === option?.id,\n                    ) ?? selectedConditionField;\n\n                  updateSelectedConditionRule(\n                    config.target,\n                    buildConditionExpression(\n                      nextField,\n                      readDefaultConditionOperator(nextField),\n                      readDefaultConditionValue(nextField),\n                    ),\n                  );\n                }}\n                options={conditionFieldSelectOptions}\n                placeholder=\"選擇欄位\"\n                value={readSelectOption(\n                  conditionFieldSelectOptions,\n                  selectedConditionField.fieldKey,\n                )}\n              />\n              <Select\n                clearable={false}\n                onChange={(option): void =>\n                  updateSelectedConditionRule(\n                    config.target,\n                    buildConditionExpression(\n                      selectedConditionField,\n                      readConditionOperatorOption(option?.id) ??\n                        selectedOperator,\n                      selectedValue,\n                    ),\n                  )\n                }\n                options={[...conditionOperatorOptions]}\n                placeholder=\"判斷方式\"\n                value={readSelectOption(\n                  conditionOperatorOptions,\n                  selectedOperator,\n                )}\n              />\n              {renderConditionValueControl(\n                selectedConditionField,\n                selectedValue,\n                (nextValue): void =>\n                  updateSelectedConditionRule(\n                    config.target,\n                    buildConditionExpression(\n                      selectedConditionField,\n                      selectedOperator,\n                      nextValue,\n                    ),\n                  ),\n              )}\n            </div>\n          )\n        ) : null}\n      </div>,\n      true,\n    );\n  }\n\n  function updateSelectedConditionRule(\n    target: ConditionRuleTarget,\n    expression: string | undefined,\n  ): void {\n    updateSelectedField({ [target]: expression });\n  }\n\n  function renderConditionValueControl(\n    conditionField: FormFieldDefinition,\n    value: string,\n    onChange: (value: string) => void,\n  ): ReactElement {\n    if (conditionField.type === 'boolean') {\n      return (\n        <Select\n          clearable={false}\n          onChange={(option): void => onChange(option?.id ?? 'true')}\n          options={[...BOOLEAN_CONDITION_VALUE_OPTIONS]}\n          placeholder=\"比較值\"\n          value={readSelectOption(\n            BOOLEAN_CONDITION_VALUE_OPTIONS,\n            value === 'false' ? 'false' : 'true',\n          )}\n        />\n      );\n    }\n\n    if (isSelectFieldDefinition(conditionField)) {\n      const options = conditionField.options.map(readFieldOptionAsSelectOption);\n\n      return (\n        <Select\n          clearable={false}\n          onChange={(option): void =>\n            onChange(option?.id ?? options[0]?.id ?? '')\n          }\n          options={options}\n          placeholder=\"比較值\"\n          value={readSelectOption(options, value)}\n        />\n      );\n    }\n\n    if (isNumberFieldDefinition(conditionField)) {\n      return renderNumberInput(\n        parseOptionalNumberInput(value),\n        (nextValue): void => onChange(String(nextValue ?? 0)),\n        '比較值',\n      );\n    }\n\n    if (isDateFieldDefinition(conditionField)) {\n      return renderDateValuePicker(conditionField, value, (nextValue): void =>\n        onChange(nextValue ?? ''),\n      );\n    }\n\n    return (\n      <Input\n        onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n          onChange(event.target.value)\n        }\n        placeholder=\"比較值\"\n        value={value}\n        variant=\"base\"\n      />\n    );\n  }\n\n  function renderSettingsTextarea({\n    name,\n    onChange,\n    placeholder,\n    rows,\n    value,\n  }: {\n    readonly name: string;\n    readonly onChange: (value: string) => void;\n    readonly placeholder: string;\n    readonly rows: number;\n    readonly value: string;\n  }): ReactElement {\n    return (\n      <Textarea\n        aria-label={name}\n        onChange={(event: ChangeEvent<HTMLTextAreaElement>): void =>\n          onChange(event.target.value)\n        }\n        placeholder={placeholder}\n        ref={applyFullWidthTextareaHost}\n        resize=\"vertical\"\n        rows={rows}\n        style={FIELD_SETTINGS_TEXTAREA_STYLE}\n        value={value}\n      />\n    );\n  }\n\n  function renderNumberInput(\n    value: number | undefined,\n    onChange: (value: number | undefined) => void,\n    placeholder: string,\n    options: {\n      readonly max?: number;\n      readonly min?: number;\n      readonly step?: number;\n    } = {},\n  ): ReactElement {\n    return (\n      <Input\n        max={options.max}\n        min={options.min}\n        onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n          onChange(\n            clampOptionalNumber(\n              parseOptionalNumberInput(event.target.value),\n              options,\n            ),\n          )\n        }\n        placeholder={placeholder}\n        showSpinner\n        step={options.step ?? 1}\n        value={typeof value === 'number' ? String(value) : ''}\n        variant=\"measure\"\n      />\n    );\n  }\n\n  function renderDateValuePicker(\n    field: DateFieldDefinition,\n    value: string,\n    onChange: (value: string | undefined) => void,\n  ): ReactElement {\n    if (field.type === 'datetime') {\n      return (\n        <DateTimePicker\n          formatDate=\"YYYY-MM-DD\"\n          formatTime=\"HH:mm\"\n          hideSecond\n          onChange={(nextValue): void =>\n            onChange(formatDateTimePickerValue(nextValue))\n          }\n          placeholderLeft=\"選擇日期\"\n          placeholderRight=\"選擇時間\"\n          value={readDatePickerValue(value)}\n        />\n      );\n    }\n\n    return (\n      <DatePicker\n        format=\"YYYY-MM-DD\"\n        onChange={(nextValue): void =>\n          onChange(formatDatePickerValue(nextValue))\n        }\n        placeholder=\"選擇日期\"\n        value={readDatePickerValue(value)}\n      />\n    );\n  }\n\n  function renderFieldOptionsTable(field: SelectFieldDefinition): ReactElement {\n    const optionRows: FieldOptionRow[] = field.options.map((option, index) => ({\n      index,\n      key: `${field.fieldKey}-${index}`,\n      label: option.label,\n      value: option.value,\n    }));\n    const optionColumns: TableColumn<FieldOptionRow>[] = [\n      {\n        key: 'label',\n        render: (row): ReactElement => (\n          <Input\n            onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n              updateSelectedSelectField({\n                options: updateFieldOption(field.options, row.index, {\n                  label: event.target.value,\n                }),\n              })\n            }\n            placeholder=\"例如：主管\"\n            size=\"sub\"\n            value={row.label}\n            variant=\"base\"\n          />\n        ),\n        title: 'Label',\n      },\n      {\n        key: 'value',\n        render: (row): ReactElement => (\n          <Input\n            onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n              updateSelectedSelectField({\n                options: updateFieldOption(field.options, row.index, {\n                  value: event.target.value,\n                }),\n              })\n            }\n            placeholder=\"例如：manager\"\n            size=\"sub\"\n            value={row.value}\n            variant=\"base\"\n          />\n        ),\n        title: 'Value',\n      },\n    ];\n    const optionActions: TableActions<FieldOptionRow> = {\n      render: (row): ReturnType<TableActions<FieldOptionRow>['render']> => [\n        {\n          disabled: (): boolean => field.options.length <= 1,\n          icon: TrashIcon,\n          iconType: 'icon-only',\n          name: '移除選項',\n          onClick: (): void =>\n            updateSelectedSelectField({\n              options: field.options.filter((_, index) => index !== row.index),\n            }),\n          variant: 'destructive-ghost',\n        },\n      ],\n      width: 56,\n    };\n\n    return (\n      <div style={COMPACT_STACK_STYLE}>\n        <Table\n          actions={optionActions}\n          columns={optionColumns}\n          dataSource={optionRows}\n          showHeader\n          size=\"sub\"\n        />\n        <div style={OPTION_ACTIONS_STYLE}>\n          <Button\n            icon={PlusIcon}\n            iconType=\"leading\"\n            onClick={(): void =>\n              updateSelectedSelectField({\n                options: [\n                  ...field.options,\n                  createNextFieldOption(field.options),\n                ],\n              })\n            }\n            variant=\"base-secondary\"\n          >\n            新增選項\n          </Button>\n        </div>\n      </div>\n    );\n  }\n\n  function renderFieldBlock(\n    field: FormFieldDefinition,\n    draggableProvided: DraggableProvided,\n    isDragging: boolean,\n  ): ReactElement {\n    return (\n      <div\n        {...draggableProvided.draggableProps}\n        data-form-builder-field-key={field.fieldKey}\n        ref={draggableProvided.innerRef}\n        style={{\n          ...FIELD_BLOCK_STYLE,\n          ...(isDragging ? FIELD_BLOCK_DRAGGING_STYLE : null),\n          ...draggableProvided.draggableProps.style,\n        }}\n      >\n        <BaseCard\n          style={\n            field.fieldKey === selectedField?.fieldKey\n              ? FIELD_BLOCK_SELECTED_CARD_STYLE\n              : undefined\n          }\n        >\n          {renderFieldBlockContent(field, draggableProvided, isDragging)}\n        </BaseCard>\n      </div>\n    );\n  }\n\n  function renderSettingsFormRow(\n    label: string,\n    name: string,\n    control: ReactElement,\n    wide = false,\n  ): ReactElement {\n    return (\n      <div\n        style={wide ? FIELD_SETTINGS_ROW_WIDE_STYLE : FIELD_SETTINGS_ROW_STYLE}\n      >\n        <div style={FIELD_SETTINGS_VALUE_STYLE}>\n          <BPMFormField label={label} name={name}>\n            {control}\n          </BPMFormField>\n        </div>\n      </div>\n    );\n  }\n\n  function renderFieldBlockContent(\n    field: FormFieldDefinition,\n    draggableProvided: DraggableProvided,\n    isDragging: boolean,\n  ): ReactElement {\n    return (\n      <div\n        {...(draggableProvided.dragHandleProps ?? {})}\n        aria-label=\"選取或拖曳排序欄位\"\n        onClick={(): void => setSelectedFieldKey(field.fieldKey)}\n        style={FIELD_BLOCK_ROW_STYLE}\n        title=\"點擊選取，拖曳排序\"\n      >\n        <span\n          aria-label=\"拖曳排序\"\n          role=\"img\"\n          style={DRAG_HANDLE_STYLE}\n          title=\"拖曳排序\"\n        >\n          <Icon icon={DotDragVerticalIcon} size={20} />\n        </span>\n        <div style={FIELD_BLOCK_TEXT_STYLE}>\n          <Typography component=\"span\" ellipsis variant=\"label-primary\">\n            {field.label}\n            {field.required ? (\n              <sup aria-label=\"必填\" style={REQUIRED_ASTERISK_STYLE}>\n                *\n              </sup>\n            ) : null}\n          </Typography>\n          <Typography\n            color=\"text-neutral\"\n            component=\"span\"\n            ellipsis\n            variant=\"caption\"\n          >\n            {readFieldTypeLabel(field.type)} ·\n            {field.required ? ' 必填' : ' 選填'} ·{field.fieldKey}\n          </Typography>\n        </div>\n        <div\n          onClick={(event: MouseEvent<HTMLDivElement>): void =>\n            event.stopPropagation()\n          }\n          style={FIELD_BLOCK_ACTIONS_STYLE}\n        >\n          <div style={FIELD_BLOCK_REQUIRED_STYLE}>\n            <Toggle\n              checked={Boolean(field.required)}\n              disabled={isDragging}\n              label=\"必填\"\n              onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n                updateFieldRequired(field.fieldKey, event.target.checked)\n              }\n            />\n          </div>\n          <Button\n            disabled={isDragging}\n            icon={TrashIcon}\n            iconType=\"icon-only\"\n            onClick={(): void => handleRemoveField(field.fieldKey)}\n            variant=\"destructive-ghost\"\n          >\n            移除欄位\n          </Button>\n        </div>\n      </div>\n    );\n  }\n\n  function renderPreviewTab(): ReactElement {\n    return (\n      <div style={STACK_STYLE}>\n        <Typography component=\"h2\" variant=\"h3\">\n          填寫預覽\n        </Typography>\n        <FormRenderer\n          onChange={updatePreviewValues}\n          schema={schema}\n          uiSchema={uiSchema}\n          value={previewValues}\n        />\n      </div>\n    );\n  }\n\n  function renderAdvancedTab(): ReactElement {\n    return (\n      <div style={STACK_STYLE}>\n        <Typography component=\"h2\" variant=\"h3\">\n          Schema\n        </Typography>\n        <div style={ADVANCED_SCHEMA_FORM_STYLE}>\n          {renderAdvancedSchemaRow(\n            'Form Schema',\n            'schemaJson',\n            <JsonCodeEditor\n              height=\"360px\"\n              name=\"schemaJson\"\n              onChange={updateSchemaJson}\n              placeholder=\"輸入 Form Schema JSON\"\n              value={schemaJsonText}\n            />,\n          )}\n          {renderAdvancedSchemaRow(\n            'UI Schema',\n            'uiSchemaJson',\n            <JsonCodeEditor\n              height=\"240px\"\n              name=\"uiSchemaJson\"\n              onChange={updateUiSchemaJson}\n              placeholder=\"輸入 UI Schema JSON\"\n              value={uiSchemaJsonText}\n            />,\n          )}\n          {advancedSchemaMessage ? (\n            <Typography\n              color=\"text-error\"\n              style={ADVANCED_SCHEMA_MESSAGE_STYLE}\n              variant=\"body\"\n            >\n              {advancedSchemaMessage}\n            </Typography>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  function renderAdvancedSchemaRow(\n    label: string,\n    name: string,\n    control: ReactElement,\n  ): ReactElement {\n    return (\n      <div style={ADVANCED_SCHEMA_ROW_STYLE}>\n        <div style={ADVANCED_SCHEMA_VALUE_STYLE}>\n          <BPMFormField label={label} name={name}>\n            {control}\n          </BPMFormField>\n        </div>\n      </div>\n    );\n  }\n}\n\nfunction readFieldTypeLabel(type: FieldType): string {\n  return (\n    FIELD_TYPE_OPTIONS.find((option) => option.type === type)?.label ?? type\n  );\n}\n\nfunction hasConditionRules(field: FormFieldDefinition): boolean {\n  return Boolean(field.visibleWhen || field.requiredWhen || field.readonlyWhen);\n}\n\nfunction readFieldAsConditionSelectOption(field: FormFieldDefinition): {\n  readonly id: string;\n  readonly name: string;\n} {\n  return {\n    id: field.fieldKey,\n    name: field.label,\n  };\n}\n\nfunction isTextFieldDefinition(\n  field: FormFieldDefinition,\n): field is TextFieldDefinition {\n  return field.type === 'text' || field.type === 'textarea';\n}\n\nfunction readStringDefaultValue(\n  value: FormFieldDefinition['defaultValue'],\n): string {\n  return typeof value === 'string' ? value : '';\n}\n\nfunction parseStringList(value: string): readonly string[] | undefined {\n  const values = value\n    .split(/[\\n,]/u)\n    .map((item) => item.trim())\n    .filter(Boolean);\n\n  return values.length ? values : undefined;\n}\n\nfunction readStringListInput(value: readonly string[] | undefined): string {\n  return value?.join('\\n') ?? '';\n}\n\nfunction stringifyJson(value: unknown): string {\n  return JSON.stringify(value, null, 2);\n}\n\nfunction updateFieldOption(\n  options: readonly FormFieldOption[],\n  targetIndex: number,\n  patch: Partial<FormFieldOption>,\n): readonly FormFieldOption[] {\n  return options.map((option, index) =>\n    index === targetIndex ? { ...option, ...patch } : option,\n  );\n}\n\nfunction createNextFieldOption(\n  options: readonly FormFieldOption[],\n): FormFieldOption {\n  const nextIndex = options.length + 1;\n\n  return {\n    label: `選項 ${nextIndex}`,\n    value: readNextOptionValue(options, nextIndex),\n  };\n}\n\nfunction readNextOptionValue(\n  options: readonly FormFieldOption[],\n  index: number,\n): string {\n  const value = `option_${index}`;\n\n  return options.some((option) => option.value === value)\n    ? readNextOptionValue(options, index + 1)\n    : value;\n}\n\nfunction moveItemByIndex<TItem>(\n  items: readonly TItem[],\n  sourceIndex: number,\n  destinationIndex: number,\n): TItem[] {\n  const sourceItem = items[sourceIndex];\n\n  if (!sourceItem || sourceIndex === destinationIndex) {\n    return [...items];\n  }\n\n  const remainingItems = items.filter((_, index) => index !== sourceIndex);\n\n  return [\n    ...remainingItems.slice(0, destinationIndex),\n    sourceItem,\n    ...remainingItems.slice(destinationIndex),\n  ];\n}\n\n"],"mappings":";;;;;;;;;;;;;AAQA,IAAM,KAAuC;CAC3C,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,OAAO;CACP,SAAS;CACT,WAAW;CACX,SAAS;CACT,OAAO;AACT,GAEM,IAA+C;CACnD,GAAK;CACL,EAAW;CACX,EAAW,MAAM;EACf,KAAK;GACH,QAAQ;GACR,cAAc;GACd,UAAU;GACV,OAAO;EACT;EACA,gBAAgB,EACd,SAAS,4CACX;EACA,eAAe;GACb,YACE;GACF,WAAW;EACb;EACA,cAAc,EACZ,OAAO,OACT;EACA,eAAe,EACb,aAAa,4CACf;EACA,gBAAgB,EACd,YACE,wFACJ;CACF,CAAC;AACH,GAEM,IAAa,QACX,OAAO,0BACb;CACE,eACE,kBAAC,OAAD;EAAK,OAAO;YAAuB;CAAgB,CAAA;CAErD,KAAK;AACP,CACF;AAWA,SAAgB,GAAe,EAC7B,cAAW,IACX,WACA,SACA,aACA,gBACA,YACoC;CACpC,OACE,kBAAC,GAAD;EACE,cAAY;EACZ,YAAY;GACV,gBAAgB;GAChB,iBAAiB;GACjB,eAAe;GACf,eAAe;GACf,YAAY;GACZ,qBAAqB;GACrB,2BAA2B;GAC3B,aAAa;GACb,oBAAoB;EACtB;EACA,UAAU,CAAC;EACX,YAAY,CAAC,GAAG,CAAsB;EAC9B;EACR,eAAe;EACL;EACG;EACb,UAAU;EACV,OAAM;EACC;EACP,OAAM;CACP,CAAA;AAEL;;;ACeA,IAAM,KAAiD;CACrD;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;CACA;EACE,aAAa;EACb,MAAM;EACN,OAAO;EACP,MAAM;CACR;AACF,GAEM,KAAsC;CAC1C,YAAY;CACZ,SAAS;CACT,UAAU;CACV,KAAK;AACP,GAEM,KAAqC;CACzC,MAAM;CACN,UAAU;AACZ,GAEM,KAAuC;CAC3C,MAAM;CACN,UAAU;AACZ,GAEM,IAA6B;CACjC,SAAS;CACT,KAAK;AACP,GAEM,KAAqC;CACzC,SAAS;CACT,UAAU;CACV,KAAK;AACP,GAEM,KAA4C;CAChD,MAAM;CACN,YAAY;AACd,GAEM,KAA4C;CAChD,SAAS;CACT,KAAK;AACP,GAEM,KAAuC;CAC3C,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,KAAK;CACL,aAAa;AACf,GAEM,KAAwC;CAC5C,SAAS;CACT,MAAM;CACN,KAAK;CACL,UAAU;AACZ,GAEM,KAA2C;CAC/C,YAAY;CACZ,SAAS;CACT,MAAM;CACN,KAAK;AACP,GAEM,KAA4C;CAChD,YAAY;CACZ,SAAS;CACT,KAAK;AACP,GAEM,KAAmC;CACvC,QAAQ;CACR,YAAY;AACd,GAEM,KAA4C,EAChD,QAAQ,8CACV,GAIM,KAAiD;CACrD,iBACE;CACF,WAAW;AACb,GAEM,KAAoC;CACxC,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,SAAS;CACT,KAAK;CACL,WAAW;CACX,SAAS;CACT,WAAW;AACb,GAEM,KAA4C;CAChD,SAAS;CACT,KAAK;CACL,gBAAgB;AAClB,GAEM,KAA2C;CAC/C,SAAS;CACT,KAAK;AACP,GAEM,KAA8C;CAClD,SAAS;CACT,WAAW;CACX,qBAAqB;CACrB,QAAQ;AACV,GAEM,KAAoD,EACxD,YAAY,SACd,GAEM,KAAgD;CACpD,YAAY;CACZ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;AAClB,GAEM,KAA2C,EAC/C,YAAY,SACd,GAEM,KAA0C;CAC9C,YAAY;CACZ,SAAS;CACT,OAAO;AACT,GAEM,KAA+C;CACnD,GAAG;CACH,YAAY;AACd,GAEM,KAA4C;CAChD,UAAU;CACV,OAAO;AACT,GAEM,KAA+C;CACnD,UAAU;CACV,OAAO;AACT,GAEM,KAA4C;CAChD,SAAS;CACT,KAAK;AACP,GAEM,KAA2C;CAC/C,YAAY;CACZ,SAAS;CACT,OAAO;AACT,GAEM,KAA6C;CACjD,UAAU;CACV,OAAO;AACT,GAEM,KAA+C,EACnD,YAAY,SACd,GAEM,KAA8C;CAClD,SAAS;CACT,KAAK;CACL,OAAO;AACT,GAEM,KAA2C;CAC/C,SAAS;CACT,KAAK;CACL,qBAAqB;AACvB,GAEM,KAAmC,EACvC,SAAS,cACX,GAEM,KAAiC;CACrC,SAAS;CACT,KAAK;AACP,GAEM,KAAqC;CACzC,SAAS;CACT,KAAK;AACP,GAEM,KAAsC;CAC1C,SAAS;CACT,gBAAgB;AAClB,GAEM,KAAyC;CAC7C,OAAO;CACP,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,eAAe;AACjB;AAEA,SAAS,GAA2B,GAAsC;CACnE,MAIL,EAAQ,MAAM,QAAQ;AACxB;AAEA,IAAM,KAAqC;CACzC,QAAQ,CAAC;CACT,eAAe;AACjB,GAEM,KAAgC;CACpC,QAAQ,CAAC;CACT,eAAe;AACjB,GAEM,KAGA;CACJ;EAAE,IAAI;EAAS,MAAM;CAAM;CAC3B;EAAE,IAAI;EAAQ,MAAM;CAAI;CACxB;EAAE,IAAI;EAAS,MAAM;CAAI;AAC3B,GAEM,KAGA,CACJ;CAAE,IAAI;CAAQ,MAAM;AAAI,GACxB;CAAE,IAAI;CAAS,MAAM;AAAI,CAC3B,GAEM,KAAyD;CAC7D;EACE,OAAO;EACP,MAAM;EACN,gBAAgB;EAChB,QAAQ;CACV;CACA;EACE,OAAO;EACP,MAAM;EACN,gBAAgB;EAChB,QAAQ;CACV;CACA;EACE,OAAO;EACP,MAAM;EACN,gBAAgB;EAChB,QAAQ;CACV;AACF;AAmBA,SAAgB,EAAgB,EAC9B,cACA,YACqC;CACrC,IAAM,KAAgB,GAAO,UAAU,IACjC,IAAkB,GAAO,YAAY,IACrC,CAAC,GAAQ,KAAa,EAA+B,EAAa,GAClE,CAAC,GAAU,KAAe,EAAuB,CAAe,GAChE,CAAC,IAAgB,KAAqB,EAC1C,EAAc,EAAa,CAC7B,GACM,CAAC,IAAkB,KAAuB,EAC9C,EAAc,CAAe,CAC/B,GACM,CAAC,IAAe,KAAoB,EAA6B,CAAC,CAAC,GACnE,CAAC,GAAuB,KAA4B,EAExD,IAAI,GACA,CAAC,GAAW,MAAgB,EAAwB,QAAQ,GAC5D,CAAC,GAAkB,KAAuB,EAAwB,IAAI;CAmB5E,AAlBA,QAAsB;EACK,EAAO,OAAO,MACpC,MAAU,EAAM,aAAa,CAG5B,KAIJ,EAAoB,EAAO,OAAO,IAAI,YAAY,IAAI;CACxD,GAAG,CAAC,EAAO,QAAQ,CAAgB,CAAC,GAEpC,QAAsB;EACpB,GAAkB,MAChB,GAAwB,EAAO,QAAQ,CAAa,CACtD;CACF,GAAG,CAAC,EAAO,MAAM,CAAC,GAElB,QAAsB;EAChB,MAAc,eAIlB,EAAkB,EAAc,CAAM,CAAC,GACvC,EAAoB,EAAc,CAAQ,CAAC;CAC7C,GAAG;EAAC;EAAW;EAAQ;CAAQ,CAAC;CAEhC,IAAM,IAAgB,QAElB,EAAO,OAAO,MAAM,MAAU,EAAM,aAAa,CAAgB,KACjE,EAAO,OAAO,MACd,MACF,CAAC,EAAO,QAAQ,CAAgB,CAClC;CACA,QAAsB;EACpB,KAAW;GAAE;GAAQ;EAAS,CAAC;CACjC,GAAG,CAAC,GAAQ,CAAQ,CAAC;CAErB,SAAS,EAAe,GAAuB;EAE7C,IAAM,IAAQ,GAAsB,GADlB,EAAO,OAAO,SAAS,CACU;EAmBnD,AAjBA,EAAU;GACR,GAAG;GACH,QAAQ,CAAC,GAAG,EAAO,QAAQ,CAAK;EAClC,CAAC,GACD,EAAY;GACV,GAAG;GACH,QAAQ,CACN,GAAG,EAAS,QACZ;IACE,UAAU,EAAM;IAChB,OACE,MAAS,cAAc,MAAS,gBAAgB,SAAS;GAC7D,CACF;EACF,CAAC,GACD,EAAoB,EAAM,QAAQ,GAClC,GAAa,QAAQ,GACrB,EAAyB,IAAI;CAC/B;CAEA,SAAS,GAAgB,GAAsB;EAC7C,IAAM,IAAU;EAOhB,AALI,MAAY,cAAc,MAAc,eAC1C,EAAkB,EAAc,CAAM,CAAC,GACvC,EAAoB,EAAc,CAAQ,CAAC,IAG7C,GAAa,CAAO;CACtB;CAEA,SAAS,GAAkB,GAAwB;EACjD,IAAM,IAAkB,EAAO,OAAO,QACnC,MAAU,EAAM,aAAa,CAChC;EAeA,AAbA,EAAU;GACR,GAAG;GACH,QAAQ;EACV,CAAC,GACD,EAAY;GACV,GAAG;GACH,QAAQ,EAAS,OAAO,QAAQ,MAAS,EAAK,aAAa,CAAQ;EACrE,CAAC,GACD,EACE,MAAqB,IAChB,EAAgB,IAAI,YAAY,OACjC,CACN,GACA,EAAyB,IAAI;CAC/B;CAEA,SAAS,GAAmB,GAA0B;EACpD,IAAM,IAAc,EAAO;EAEtB,KAID,EAAO,OAAO,UAAU,EAAY,UAIxC,GAAW,OAAmB;GAC5B,GAAG;GACH,QAAQ,GACN,EAAc,QACd,EAAO,OAAO,OACd,EAAY,KACd;EACF,EAAE,GACF,GAAa,OAAqB;GAChC,GAAG;GACH,QAAQ,GACN,EAAgB,QAChB,EAAO,OAAO,OACd,EAAY,KACd;EACF,EAAE,GACF,EAAyB,IAAI;CAC/B;CAEA,SAAS,EACP,GAaM;EACN,GACG,OAAW;GAAE,GAAG;GAAO,GAAG;EAAM,EACnC;CACF;CAEA,SAAS,EACP,GACM;EACN,IAAI,CAAC,GACH;EAGF,IAAM,IAAmB,EAAc,UACjC,IAAY,EAAQ,CAAa,GACjC,IAAe,EAAU;EAkB/B,AAhBA,EAAU;GACR,GAAG;GACH,QAAQ,EAAO,OAAO,KACnB,MACC,EAAM,aAAa,IAAmB,IAAY,CACtD;EACF,CAAC,GACD,EAAY;GACV,GAAG;GACH,QAAQ,EAAS,OAAO,KAAK,MAC3B,EAAK,aAAa,IACd;IAAE,GAAG;IAAM,UAAU;GAAa,IAClC,CACN;EACF,CAAC,GACD,EAAoB,CAAY,GAChC,EAAyB,IAAI;CAC/B;CAEA,SAAS,EACP,GAGM;EACN,GAAyB,MACvB,GAAsB,CAAK,IAAI;GAAE,GAAG;GAAO,GAAG;EAAM,IAAI,CAC1D;CACF;CAEA,SAAS,EACP,GAGM;EACN,GAAyB,MACvB,EAAwB,CAAK,IAAI;GAAE,GAAG;GAAO,GAAG;EAAM,IAAI,CAC5D;CACF;CAEA,SAAS,GACP,GACM;EACN,GAAyB,MACvB,EAAsB,CAAK,IAAI;GAAE,GAAG;GAAO,GAAG;EAAM,IAAI,CAC1D;CACF;CAEA,SAAS,EACP,GACM;EACN,GAAyB,MACvB,EAAwB,CAAK,IAAI;GAAE,GAAG;GAAO,GAAG;EAAM,IAAI,CAC5D;CACF;CAEA,SAAS,GACP,GACM;EACN,GAAyB,MACvB,EAAM,SAAS,YAAY;GAAE,GAAG;GAAO,GAAG;EAAM,IAAI,CACtD;CACF;CAEA,SAAS,GACP,GAMM;EACN,GAAyB,MACvB,EAAM,SAAS,gBAAgB;GAAE,GAAG;GAAO,GAAG;EAAM,IAAI,CAC1D;CACF;CAEA,SAAS,GAAoB,GAAkC;EAC7D,EAAiB,CAAM;CACzB;CAEA,SAAS,GAAoB,GAAkB,GAAyB;EAUtE,AATA,GAAW,OAAmB;GAC5B,GAAG;GACH,QAAQ,EAAc,OAAO,KAC1B,MACC,EAAM,aAAa,IACd;IAAE,GAAG;IAAO;GAAS,IACtB,CACR;EACF,EAAE,GACF,EAAyB,IAAI;CAC/B;CAEA,SAAS,GAAiB,GAAqB;EAC7C,EAAkB,CAAK;EAEvB,IAAI;GAEF,AADA,EAAU,KAAK,MAAM,CAAK,CAAyB,GACnD,EAAyB,IAAI;EAC/B,QAAQ;GACN,EAAyB,wBAAwB;EACnD;CACF;CAEA,SAAS,GAAmB,GAAqB;EAC/C,EAAoB,CAAK;EAEzB,IAAI;GAEF,AADA,EAAY,KAAK,MAAM,CAAK,CAAiB,GAC7C,EAAyB,IAAI;EAC/B,QAAQ;GACN,EAAyB,sBAAsB;EACjD;CACF;CAEA,OACE,kBAAA,GAAA,EAAA,UACE,kBAAA,GAAA,EAAA,UACI,kBAAC,IAAD,EAAA,UACE,kBAAC,IAAD,EAAA,UACE,kBAAC,OAAD;EAAK,OAAO;YAAZ;GACE,kBAAC,IAAD;IACE,WAAW;IACX,UAAU;IACV,MAAK;cAHP;KAKE,kBAAC,GAAD,EAAA,UAAsB,KAAW,GAApB,QAAoB;KACjC,kBAAC,GAAD,EAAA,UAAuB,KAAW,GAArB,SAAqB;KAClC,kBAAC,GAAD,EAAA,UAAwB,KAAW,GAAtB,UAAsB;IAChC;;GAEJ,MAAc,WAAW,GAAgB,IAAI;GAC7C,MAAc,YAAY,GAAiB,IAAI;GAC/C,MAAc,aAAa,GAAkB,IAAI;EAC/C;IACE,CAAA,EACG,CAAA,EACd,CAAA,EAEJ,CAAA;CAGJ,SAAS,KAAgC;EACvC,OACE,kBAAC,OAAD;GAAK,OAAO;aAAZ,CACE,kBAAC,OAAD;IAAK,OAAO;cAAZ,CACE,kBAAC,GAAD;KAAY,WAAU;KAAK,SAAQ;eAAgB;IAEvC,CAAA,GACZ,kBAAC,OAAD;KAAK,OAAO;eACT,GAAmB,KAAK,MACvB,kBAAC,GAAD;MACE,MAAM,EAAO;MACb,UAAS;MAET,eAAqB,EAAe,EAAO,IAAI;MAC/C,MAAK;MACL,OAAO;MACP,MAAK;MACL,SAAQ;gBAEP,EAAO;KACF,GARD,EAAO,IAQN,CACT;IACE,CAAA,CACF;OAEL,kBAAC,OAAD;IAAK,OAAO;cAAZ,CACE,kBAAC,OAAD;KAAK,OAAO;MAAE,GAAG;MAAa,GAAG;KAAoB;eAArD,CACE,kBAAC,GAAD;MAAY,WAAU;MAAK,SAAQ;gBAAgB;KAEvC,CAAA,GACX,EAAO,OAAO,SAAS,IACtB,kBAAC,IAAD;MAAiB,WAAW;gBAC1B,kBAAC,IAAD;OAAW,aAAY;kBACnB,MACA,kBAAC,OAAD;QACE,GAAI,EAAkB;QACtB,KAAK,EAAkB;QACvB,OAAO;kBAHT,CAKG,EAAO,OAAO,KAAK,GAAO,MACzB,kBAAC,IAAD;SACE,aAAa,EAAM;SACZ;oBAGL,GAAmB,MACnB,GACE,GACA,GACA,EAAS,UACX;QAEO,GATJ,EAAM,QASF,CACZ,GACA,EAAkB,WAChB;;MAEE,CAAA;KACI,CAAA,IAEjB,kBAAC,OAAD;MAAK,OAAO;gBAAZ,CACE,kBAAC,OAAD;OAAK,OAAO;iBAAZ,CACE,kBAAC,GAAD;QAAY,WAAU;QAAK,SAAQ;kBAAK;OAE5B,CAAA,GACZ,kBAAC,GAAD;QAAY,OAAM;QAAe,SAAQ;kBAAO;OAEpC,CAAA,CACT;UACL,kBAAC,OAAD;OAAK,OAAO;iBAAZ,CACE,kBAAC,GAAD;QACE,eAAqB,EAAe,MAAM;QAC1C,SAAQ;kBACT;OAEO,CAAA,GACR,kBAAC,GAAD;QACE,eAAqB,EAAe,UAAU;QAC9C,SAAQ;kBACT;OAEO,CAAA,CACL;QACF;OAEJ;QAEL,kBAAC,OAAD;KAAK,OAAO;MAAE,GAAG;MAAa,GAAG;KAAsB;eAAvD,CACE,kBAAC,GAAD;MAAY,WAAU;MAAK,SAAQ;gBAAgB;KAEvC,CAAA,GACX,IACC,GAAoB,CAAa,IAEjC,kBAAC,GAAD;MAAY,OAAM;MAAe,SAAQ;gBAAO;KAEpC,CAAA,CAEX;MACF;KACF;;CAET;CAEA,SAAS,GAAoB,GAA0C;EACrE,OACE,kBAAC,OAAD;GAAK,OAAO;aAAZ,CACG,GAAwB,CAAK,GAC7B,GAA4B,CAAK,CAC/B;;CAET;CAEA,SAAS,GAAwB,GAA0C;EACzE,OACE,kBAAC,OAAD;GAAK,OAAO;aAAZ;IACE,kBAAC,OAAD;KAAK,OAAO;eACV,kBAAC,GAAD;MACE,MAAK;MACL,MAAM,GAAmB,EAAM,IAAI;MACnC,SAAQ;KACT,CAAA;IACE,CAAA;IACJ,EACC,MACA,cACA,kBAAC,GAAD;KACE,WAAW,MACT,EAAoB,EAAE,OAAO,EAAM,OAAO,MAAM,CAAC;KAEnD,aAAY;KACZ,OAAO,EAAM;KACb,SAAQ;IACT,CAAA,CACH;IACC,EACC,UACA,YACA,kBAAC,GAAD;KACE,WAAW,MACT,EAAoB,EAAE,UAAU,EAAM,OAAO,MAAM,CAAC;KAEtD,aAAY;KACZ,OAAO,EAAM;KACb,SAAQ;IACT,CAAA,CACH;IACC,EACC,QACA,oBACA,kBAAC,GAAD;KACE,WAAW,MACT,EAAoB,EAClB,aAAa,EAAM,OAAO,SAAS,KAAA,EACrC,CAAC;KAEH,aAAY;KACZ,OAAO,EAAM,eAAe;KAC5B,SAAQ;IACT,CAAA,CACH;IACC,GAA2B,CAAK;GAC9B;;CAET;CAEA,SAAS,GACP,GACc;EACd,OACE,kBAAC,GAAD;GACE,iBAAiB,GAAkB,CAAK;GACxC,MAAK;GACL,OAAM;aAEN,kBAAC,OAAD;IAAK,OAAO;cAAZ;KACE,kBAAC,GAAD;MACE,WAAU;MACV,OAAO;MACP,SAAQ;gBACT;KAEW,CAAA;KACZ,kBAAC,GAAD;MACE,OAAM;MACN,OAAO;MACP,SAAQ;gBACT;KAEW,CAAA;KACX,GAAwB,CAAK;IAC3B;;EACI,CAAA;CAEf;CAEA,SAAS,GACP,GACc;EAqBd,OApBI,GAAsB,CAAK,IACtB,GAAwB,CAAK,IAGlC,EAAwB,CAAK,IACxB,GAA0B,CAAK,IAGpC,EAAsB,CAAK,IACtB,GAAwB,CAAK,IAGlC,EAAwB,CAAK,IACxB,GAA0B,CAAK,IAGpC,EAAM,SAAS,YACV,GAA2B,CAAK,IAGlC,GAA8B,CAAK;CAC5C;CAEA,SAAS,GAAwB,GAA0C;EACzE,OACE,kBAAA,GAAA,EAAA,UAAA;GACG,EACC,OACA,qBACA,EAAM,SAAS,aACb,GAAuB;IACrB,MAAM;IACN,WAAW,MACT,EAAwB,EAAE,cAAc,KAAS,KAAA,EAAU,CAAC;IAC9D,aAAa;IACb,MAAM;IACN,OAAO,EAAuB,EAAM,YAAY;GAClD,CAAC,IAED,kBAAC,GAAD;IACE,WAAW,MACT,EAAwB,EACtB,cAAc,EAAM,OAAO,SAAS,KAAA,EACtC,CAAC;IAEH,aAAY;IACZ,OAAO,EAAuB,EAAM,YAAY;IAChD,SAAQ;GACT,CAAA,CAEL;GACC,EACC,QACA,kBACA,EACE,EAAM,YACL,MAAgB,EAAwB,EAAE,WAAW,EAAM,CAAC,GAC7D,QACA,EAAE,KAAK,EAAE,CACX,CACF;GACC,EACC,QACA,kBACA,EACE,EAAM,YACL,MAAgB,EAAwB,EAAE,WAAW,EAAM,CAAC,GAC7D,UACA,EAAE,KAAK,EAAE,CACX,CACF;EACA,EAAA,CAAA;CAEN;CAEA,SAAS,GACP,GACc;EACd,OACE,kBAAA,GAAA,EAAA,UAAA;GACG,EACC,OACA,qBACA,EACE,OAAO,EAAM,gBAAiB,WAC1B,EAAM,eACN,KAAA,IACH,MAAgB,EAA0B,EAAE,cAAc,EAAM,CAAC,GAClE,EAAM,SAAS,UAAU,YAAY,UACrC;IAAE,KAAK,EAAM;IAAS,KAAK,EAAM;GAAQ,CAC3C,CACF;GACC,EACC,OACA,gBACA,EACE,EAAM,UACL,MAAgB,EAA0B,EAAE,SAAS,EAAM,CAAC,GAC7D,MACF,CACF;GACC,EACC,OACA,gBACA,EACE,EAAM,UACL,MAAgB,EAA0B,EAAE,SAAS,EAAM,CAAC,GAC7D,WACF,CACF;EACA,EAAA,CAAA;CAEN;CAEA,SAAS,GAAwB,GAA0C;EACzE,OAAO,EACL,OACA,qBACA,GACE,GACA,EAAuB,EAAM,YAAY,IACxC,MAAgB,GAAwB,EAAE,cAAc,EAAM,CAAC,CAClE,CACF;CACF;CAEA,SAAS,GACP,GACc;EACd,IAAM,IAAgB,MAAM,QAAQ,EAAM,YAAY,IAClD,EAAM,eACN,CAAC,GACC,IAAiB,EAAM,QAC1B,QAAQ,MAAW,EAAc,SAAS,EAAO,KAAK,CAAC,EACvD,IAAI,CAA6B;EAEpC,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,EACC,OACA,qBACA,EAAM,SAAS,aACb,kBAAC,GAAD;GACE,WAAA;GACA,MAAK;GACL,WAAW,MACT,EAA0B,EACxB,cAAc,EAAQ,SAClB,EAAQ,KAAK,MAAW,EAAO,EAAE,IACjC,KAAA,EACN,CAAC;GAEH,SAAS,EAAM,QAAQ,IAAI,CAA6B;GACxD,aAAY;GACZ,OAAO;EACR,CAAA,IAED,kBAAC,GAAD;GACE,WAAA;GACA,WAAW,MACT,EAA0B,EACxB,cAAc,GAAQ,MAAM,KAAA,EAC9B,CAAC;GAEH,SAAS,EAAM,QAAQ,IAAI,CAA6B;GACxD,aAAY;GACZ,OACE,OAAO,EAAM,gBAAiB,WAC1B,EACE,EAAM,QAAQ,IAAI,CAA6B,GAC/C,EAAM,YACR,IACA;EAEP,CAAA,CAEL,GACC,EACC,MACA,gBACA,GAAwB,CAAK,GAC7B,EACF,CACA,EAAA,CAAA;CAEN;CAEA,SAAS,GACP,GACc;EACd,IAAM,IACJ,OAAO,EAAM,gBAAiB,YAC1B,OAAO,EAAM,YAAY,IACzB;EAEN,OAAO,EACL,OACA,qBACA,kBAAC,GAAD;GACE,WAAW;GACX,WAAW,MACT,GAA2B,EACzB,cACE,GAAQ,OAAO,SACX,KACA,GAAQ,OAAO,UACb,KACA,KAAA,EACV,CAAC;GAEH,SAAS,CAAC,GAAG,EAAuB;GACpC,aAAY;GACZ,OAAO,EAAiB,IAAyB,CAAY;EAC9D,CAAA,CACH;CACF;CAEA,SAAS,GACP,GACc;EACd,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,EACC,OACA,iBACA,EACE,EAAM,WACL,MAAgB,GAA8B,EAAE,UAAU,EAAM,CAAC,GAClE,QACA,EAAE,KAAK,EAAE,CACX,CACF,GACC,EACC,QACA,0BACA,GAAuB;GACrB,MAAM;GACN,WAAW,MACT,GAA8B,EAC5B,mBAAmB,GAAgB,CAAK,EAC1C,CAAC;GACH,aAAa;GACb,MAAM;GACN,OAAO,GAAoB,EAAM,iBAAiB;EACpD,CAAC,GACD,EACF,CACA,EAAA,CAAA;CAEN;CAEA,SAAS,GAAwB,GAA0C;EACzE,IAAM,IAAwB,EAAO,OAAO,QACzC,MAAgB,EAAY,aAAa,EAAM,QAClD;EAcA,OAZK,EAAsB,SAazB,kBAAA,GAAA,EAAA,UACG,GAAuB,KAAK,MAC3B,GAAoB,GAAO,GAAQ,CAAqB,CAC1D,EACA,CAAA,IAfA,kBAAC,GAAD;GACE,OAAM;GACN,OAAO;GACP,SAAQ;aACT;EAEW,CAAA;CAWlB;CAEA,SAAS,GACP,GACA,GACA,GACc;EACd,IAAM,IAAa,EAAM,EAAO,SAC1B,IAAa,IAAa,GAAmB,CAAU,IAAI,MAC3D,IAAuB,EAAsB,MAChD,MAAmB,EAAe,aAAa,GAAY,QAC9D,GACM,IACJ,KAAwB,EAAsB,IAC1C,IAA8B,EAAsB,IACxD,EACF,GACM,IAA2B,GAC/B,CACF,GACM,IACJ,KACA,EAAyB,MACtB,MAAW,EAAO,OAAO,EAAW,QACvC,IACI,EAAW,WACX,EAA6B,CAAsB,GACnD,IACJ,GAAY,SAAS,EAA0B,CAAsB,GACjE,IAAU,EAAQ,GAClB,IAAkB,MAAY,CAAC,KAAc,CAAC;EAEpD,OAAO,EACL,EAAO,OACP,EAAO,MACP,kBAAC,OAAD;GAAK,OAAO;aAAZ,CACE,kBAAC,IAAD;IACE,SAAS;IACT,OAAO,IAAU,QAAQ;IACzB,WAAW,MACT,EACE,EAAO,QACP,EAAM,OAAO,UACT,EACE,GACA,EAA6B,CAAsB,GACnD,EAA0B,CAAsB,CAClD,IACA,KAAA,CACN;IAEF,MAAK;IACL,gBAAgB,EAAO;GACxB,CAAA,GACA,IACC,IACE,kBAAC,GAAD;IAAY,OAAM;IAAe,SAAQ;cAAO;GAEpC,CAAA,IAEZ,kBAAC,OAAD;IAAK,OAAO;cAAZ;KACE,kBAAC,GAAD;MACE,WAAW;MACX,WAAW,MAAiB;OAC1B,IAAM,IACJ,EAAsB,MACnB,MACC,EAAe,aAAa,GAAQ,EACxC,KAAK;OAEP,EACE,EAAO,QACP,EACE,GACA,EAA6B,CAAS,GACtC,EAA0B,CAAS,CACrC,CACF;MACF;MACA,SAAS;MACT,aAAY;MACZ,OAAO,EACL,GACA,EAAuB,QACzB;KACD,CAAA;KACD,kBAAC,GAAD;MACE,WAAW;MACX,WAAW,MACT,EACE,EAAO,QACP,EACE,GACA,GAA4B,GAAQ,EAAE,KACpC,GACF,CACF,CACF;MAEF,SAAS,CAAC,GAAG,CAAwB;MACrC,aAAY;MACZ,OAAO,EACL,GACA,CACF;KACD,CAAA;KACA,GACC,GACA,IACC,MACC,EACE,EAAO,QACP,EACE,GACA,GACA,CACF,CACF,CACJ;IACG;QAEL,IACD;MACL,EACF;CACF;CAEA,SAAS,EACP,GACA,GACM;EACN,EAAoB,GAAG,IAAS,EAAW,CAAC;CAC9C;CAEA,SAAS,GACP,GACA,GACA,GACc;EACd,IAAI,EAAe,SAAS,WAC1B,OACE,kBAAC,GAAD;GACE,WAAW;GACX,WAAW,MAAiB,EAAS,GAAQ,MAAM,MAAM;GACzD,SAAS,CAAC,GAAG,EAA+B;GAC5C,aAAY;GACZ,OAAO,EACL,IACA,MAAU,UAAU,UAAU,MAChC;EACD,CAAA;EAIL,IAAI,EAAwB,CAAc,GAAG;GAC3C,IAAM,IAAU,EAAe,QAAQ,IAAI,CAA6B;GAExE,OACE,kBAAC,GAAD;IACE,WAAW;IACX,WAAW,MACT,EAAS,GAAQ,MAAM,EAAQ,IAAI,MAAM,EAAE;IAEpC;IACT,aAAY;IACZ,OAAO,EAAiB,GAAS,CAAK;GACvC,CAAA;EAEL;EAgBA,OAdI,EAAwB,CAAc,IACjC,EACL,GAAyB,CAAK,IAC7B,MAAoB,EAAS,OAAO,KAAa,CAAC,CAAC,GACpD,KACF,IAGE,EAAsB,CAAc,IAC/B,GAAsB,GAAgB,IAAQ,MACnD,EAAS,KAAa,EAAE,CAC1B,IAIA,kBAAC,GAAD;GACE,WAAW,MACT,EAAS,EAAM,OAAO,KAAK;GAE7B,aAAY;GACL;GACP,SAAQ;EACT,CAAA;CAEL;CAEA,SAAS,GAAuB,EAC9B,SACA,aACA,gBACA,SACA,YAOe;EACf,OACE,kBAAC,IAAD;GACE,cAAY;GACZ,WAAW,MACT,EAAS,EAAM,OAAO,KAAK;GAEhB;GACb,KAAK;GACL,QAAO;GACD;GACN,OAAO;GACA;EACR,CAAA;CAEL;CAEA,SAAS,EACP,GACA,GACA,GACA,IAII,CAAC,GACS;EACd,OACE,kBAAC,GAAD;GACE,KAAK,EAAQ;GACb,KAAK,EAAQ;GACb,WAAW,MACT,EACE,GACE,GAAyB,EAAM,OAAO,KAAK,GAC3C,CACF,CACF;GAEW;GACb,aAAA;GACA,MAAM,EAAQ,QAAQ;GACtB,OAAO,OAAO,KAAU,WAAW,OAAO,CAAK,IAAI;GACnD,SAAQ;EACT,CAAA;CAEL;CAEA,SAAS,GACP,GACA,GACA,GACc;EAiBd,OAhBI,EAAM,SAAS,aAEf,kBAAC,GAAD;GACE,YAAW;GACX,YAAW;GACX,YAAA;GACA,WAAW,MACT,EAAS,GAA0B,CAAS,CAAC;GAE/C,iBAAgB;GAChB,kBAAiB;GACjB,OAAO,GAAoB,CAAK;EACjC,CAAA,IAKH,kBAAC,GAAD;GACE,QAAO;GACP,WAAW,MACT,EAAS,GAAsB,CAAS,CAAC;GAE3C,aAAY;GACZ,OAAO,GAAoB,CAAK;EACjC,CAAA;CAEL;CAEA,SAAS,GAAwB,GAA4C;EAgE3E,OACE,kBAAC,OAAD;GAAK,OAAO;aAAZ,CACE,kBAAC,IAAD;IACE,SAAS;KAnBb,SAAS,MAA4D,CACnE;MACE,gBAAyB,EAAM,QAAQ,UAAU;MACjD,MAAM;MACN,UAAU;MACV,MAAM;MACN,eACE,EAA0B,EACxB,SAAS,EAAM,QAAQ,QAAQ,GAAG,MAAU,MAAU,EAAI,KAAK,EACjE,CAAC;MACH,SAAS;KACX,CACF;KACA,OAAO;IAMM;IACT,SAAS,CA5Db;KACE,KAAK;KACL,SAAS,MACP,kBAAC,GAAD;MACE,WAAW,MACT,EAA0B,EACxB,SAAS,GAAkB,EAAM,SAAS,EAAI,OAAO,EACnD,OAAO,EAAM,OAAO,MACtB,CAAC,EACH,CAAC;MAEH,aAAY;MACZ,MAAK;MACL,OAAO,EAAI;MACX,SAAQ;KACT,CAAA;KAEH,OAAO;IACT,GACA;KACE,KAAK;KACL,SAAS,MACP,kBAAC,GAAD;MACE,WAAW,MACT,EAA0B,EACxB,SAAS,GAAkB,EAAM,SAAS,EAAI,OAAO,EACnD,OAAO,EAAM,OAAO,MACtB,CAAC,EACH,CAAC;MAEH,aAAY;MACZ,MAAK;MACL,OAAO,EAAI;MACX,SAAQ;KACT,CAAA;KAEH,OAAO;IACT,CAuBa;IACT,YApE+B,EAAM,QAAQ,KAAK,GAAQ,OAAW;KACzE;KACA,KAAK,GAAG,EAAM,SAAS,GAAG;KAC1B,OAAO,EAAO;KACd,OAAO,EAAO;IAChB,EA+DkB;IACZ,YAAA;IACA,MAAK;GACN,CAAA,GACD,kBAAC,OAAD;IAAK,OAAO;cACV,kBAAC,GAAD;KACE,MAAM;KACN,UAAS;KACT,eACE,EAA0B,EACxB,SAAS,CACP,GAAG,EAAM,SACT,GAAsB,EAAM,OAAO,CACrC,EACF,CAAC;KAEH,SAAQ;eACT;IAEO,CAAA;GACL,CAAA,CACF;;CAET;CAEA,SAAS,GACP,GACA,GACA,GACc;EACd,OACE,kBAAC,OAAD;GACE,GAAI,EAAkB;GACtB,+BAA6B,EAAM;GACnC,KAAK,EAAkB;GACvB,OAAO;IACL,GAAG;IACH,GAAI,IAAa,KAA6B;IAC9C,GAAG,EAAkB,eAAe;GACtC;aAEA,kBAAC,GAAD;IACE,OACE,EAAM,aAAa,GAAe,WAC9B,KACA,KAAA;cAGL,GAAwB,GAAO,GAAmB,CAAU;GACrD,CAAA;EACP,CAAA;CAET;CAEA,SAAS,EACP,GACA,GACA,GACA,IAAO,IACO;EACd,OACE,kBAAC,OAAD;GACE,OAAO,IAAO,KAAgC;aAE9C,kBAAC,OAAD;IAAK,OAAO;cACV,kBAAC,GAAD;KAAqB;KAAa;eAC/B;IACW,CAAA;GACX,CAAA;EACF,CAAA;CAET;CAEA,SAAS,GACP,GACA,GACA,GACc;EACd,OACE,kBAAC,OAAD;GACE,GAAK,EAAkB,mBAAmB,CAAC;GAC3C,cAAW;GACX,eAAqB,EAAoB,EAAM,QAAQ;GACvD,OAAO;GACP,OAAM;aALR;IAOE,kBAAC,QAAD;KACE,cAAW;KACX,MAAK;KACL,OAAO;KACP,OAAM;eAEN,kBAAC,GAAD;MAAM,MAAM;MAAqB,MAAM;KAAK,CAAA;IACxC,CAAA;IACN,kBAAC,OAAD;KAAK,OAAO;eAAZ,CACE,kBAAC,GAAD;MAAY,WAAU;MAAO,UAAA;MAAS,SAAQ;gBAA9C,CACG,EAAM,OACN,EAAM,WACL,kBAAC,OAAD;OAAK,cAAW;OAAK,OAAO;iBAAyB;MAEhD,CAAA,IACH,IACM;SACZ,kBAAC,GAAD;MACE,OAAM;MACN,WAAU;MACV,UAAA;MACA,SAAQ;gBAJV;OAMG,GAAmB,EAAM,IAAI;OAAE;OAC/B,EAAM,WAAW,QAAQ;OAAM;OAAG,EAAM;MAC/B;OACT;;IACL,kBAAC,OAAD;KACE,UAAU,MACR,EAAM,gBAAgB;KAExB,OAAO;eAJT,CAME,kBAAC,OAAD;MAAK,OAAO;gBACV,kBAAC,IAAD;OACE,SAAS,EAAQ,EAAM;OACvB,UAAU;OACV,OAAM;OACN,WAAW,MACT,GAAoB,EAAM,UAAU,EAAM,OAAO,OAAO;MAE3D,CAAA;KACE,CAAA,GACL,kBAAC,GAAD;MACE,UAAU;MACV,MAAM;MACN,UAAS;MACT,eAAqB,GAAkB,EAAM,QAAQ;MACrD,SAAQ;gBACT;KAEO,CAAA,CACL;;GACF;;CAET;CAEA,SAAS,KAAiC;EACxC,OACE,kBAAC,OAAD;GAAK,OAAO;aAAZ,CACE,kBAAC,GAAD;IAAY,WAAU;IAAK,SAAQ;cAAK;GAE5B,CAAA,GACZ,kBAAC,GAAD;IACE,UAAU;IACF;IACE;IACV,OAAO;GACR,CAAA,CACE;;CAET;CAEA,SAAS,KAAkC;EACzC,OACE,kBAAC,OAAD;GAAK,OAAO;aAAZ,CACE,kBAAC,GAAD;IAAY,WAAU;IAAK,SAAQ;cAAK;GAE5B,CAAA,GACZ,kBAAC,OAAD;IAAK,OAAO;cAAZ;KACG,GACC,eACA,cACA,kBAAC,IAAD;MACE,QAAO;MACP,MAAK;MACL,UAAU;MACV,aAAY;MACZ,OAAO;KACR,CAAA,CACH;KACC,GACC,aACA,gBACA,kBAAC,IAAD;MACE,QAAO;MACP,MAAK;MACL,UAAU;MACV,aAAY;MACZ,OAAO;KACR,CAAA,CACH;KACC,IACC,kBAAC,GAAD;MACE,OAAM;MACN,OAAO;MACP,SAAQ;gBAEP;KACS,CAAA,IACV;IACD;KACF;;CAET;CAEA,SAAS,GACP,GACA,GACA,GACc;EACd,OACE,kBAAC,OAAD;GAAK,OAAO;aACV,kBAAC,OAAD;IAAK,OAAO;cACV,kBAAC,GAAD;KAAqB;KAAa;eAC/B;IACW,CAAA;GACX,CAAA;EACF,CAAA;CAET;AACF;AAEA,SAAS,GAAmB,GAAyB;CACnD,OACE,GAAmB,MAAM,MAAW,EAAO,SAAS,CAAI,GAAG,SAAS;AAExE;AAEA,SAAS,GAAkB,GAAqC;CAC9D,OAAO,GAAQ,EAAM,eAAe,EAAM,gBAAgB,EAAM;AAClE;AAEA,SAAS,GAAiC,GAGxC;CACA,OAAO;EACL,IAAI,EAAM;EACV,MAAM,EAAM;CACd;AACF;AAEA,SAAS,GACP,GAC8B;CAC9B,OAAO,EAAM,SAAS,UAAU,EAAM,SAAS;AACjD;AAEA,SAAS,EACP,GACQ;CACR,OAAO,OAAO,KAAU,WAAW,IAAQ;AAC7C;AAEA,SAAS,GAAgB,GAA8C;CACrE,IAAM,IAAS,EACZ,MAAM,QAAQ,EACd,KAAK,MAAS,EAAK,KAAK,CAAC,EACzB,OAAO,OAAO;CAEjB,OAAO,EAAO,SAAS,IAAS,KAAA;AAClC;AAEA,SAAS,GAAoB,GAA8C;CACzE,OAAO,GAAO,KAAK,IAAI,KAAK;AAC9B;AAEA,SAAS,EAAc,GAAwB;CAC7C,OAAO,KAAK,UAAU,GAAO,MAAM,CAAC;AACtC;AAEA,SAAS,GACP,GACA,GACA,GAC4B;CAC5B,OAAO,EAAQ,KAAK,GAAQ,MAC1B,MAAU,IAAc;EAAE,GAAG;EAAQ,GAAG;CAAM,IAAI,CACpD;AACF;AAEA,SAAS,GACP,GACiB;CACjB,IAAM,IAAY,EAAQ,SAAS;CAEnC,OAAO;EACL,OAAO,MAAM;EACb,OAAO,EAAoB,GAAS,CAAS;CAC/C;AACF;AAEA,SAAS,EACP,GACA,GACQ;CACR,IAAM,IAAQ,UAAU;CAExB,OAAO,EAAQ,MAAM,MAAW,EAAO,UAAU,CAAK,IAClD,EAAoB,GAAS,IAAQ,CAAC,IACtC;AACN;AAEA,SAAS,GACP,GACA,GACA,GACS;CACT,IAAM,IAAa,EAAM;CAEzB,IAAI,CAAC,KAAc,MAAgB,GACjC,OAAO,CAAC,GAAG,CAAK;CAGlB,IAAM,IAAiB,EAAM,QAAQ,GAAG,MAAU,MAAU,CAAW;CAEvE,OAAO;EACL,GAAG,EAAe,MAAM,GAAG,CAAgB;EAC3C;EACA,GAAG,EAAe,MAAM,CAAgB;CAC1C;AACF"}

package/dist/chunks/{approval-instance-list-page-C5ZKPHdA.cjs → approval-instance-list-page-BMUKxzcz.cjs}

@@ -1,2 +1,2 @@
-"use client";require('../approval-instance-list-page.css');const e=require("./chunk-CMqjfN_6.cjs"),t=require("./router-adapter--gYs13E8.cjs"),n=require("./format-date-time-XxBzF0F5.cjs"),r=require("./routes-config-2aKbWq2H.cjs");let i=require("react"),a=require("@mezzanine-ui/react"),o=require("@rytass/bpm-core-client"),s=require("react/jsx-runtime"),c=require("@rytass/bpm-core-client/workflow"),l=require("@mezzanine-ui/react/ContentHeader");l=e.t(l,1);let u=require("@mezzanine-ui/core/form");var d={instanceFilterArea:`bpm_instanceFilterArea_qpvJq`},f=[10,20,50],p=[{id:`ALL`,name:`全部狀態`,state:null},{id:`RUNNING`,name:`進行中`,state:`RUNNING`},{id:`APPROVED`,name:`已通過`,state:`APPROVED`},{id:`REJECTED`,name:`已拒絕`,state:`REJECTED`},{id:`RETURNED`,name:`已退回`,state:`RETURNED`},{id:`CANCELLED`,name:`已取消`,state:`CANCELLED`},{id:`EXPIRED`,name:`已逾期`,state:`EXPIRED`},{id:`DRAFT`,name:`草稿`,state:`DRAFT`}];function m({defaultState:e,description:m,emptyMessage:y,searchPlaceholder:b,title:w,view:T}){let E=t.r(),D=r.r(),[O,k]=(0,i.useState)(null),[A,j]=(0,i.useState)(new Map),[M,N]=(0,i.useState)(1),[P,F]=(0,i.useState)(10),[I,L]=(0,i.useState)(0),[R,z]=(0,i.useState)(!0),[B,V]=(0,i.useState)([]),[H,U]=(0,i.useState)(``),[W,G]=(0,i.useState)(_(e)),K=(0,i.useCallback)(async()=>{z(!0),k(null);try{let e=await(0,c.listApprovalInstancesPage)({page:M,pageSize:P,searchText:H,state:W.state,templateId:null,view:T});V(e.instances.map(h)),L(e.totalCount)}catch(e){k(C(e))}finally{z(!1)}},[M,P,H,W,T]);(0,i.useEffect)(()=>{K()},[K]),(0,i.useEffect)(()=>{let e=Array.from(new Set(B.map(e=>e.initiatorMemberId).filter(Boolean)));if(e.length===0){j(new Map);return}let t=!1;return(async()=>{try{let n=await(0,o.resolveMembers)(e);if(t)return;j(new Map(n.map(e=>[e.memberId,e])))}catch{if(t)return;j(new Map)}})(),()=>{t=!0}},[B]);let q=(0,i.useMemo)(()=>[{dataIndex:`caseTitle`,key:`caseTitle`,title:`案件`,width:300},{key:`state`,render:e=>(0,s.jsx)(a.Typography,{color:x(e.state),component:`span`,variant:`body`,children:e.stateLabel}),title:`狀態`,width:120},{key:`initiatorMemberId`,render:e=>(0,s.jsx)(a.Typography,{component:`span`,variant:`body`,children:S(e.initiatorMemberId,A)}),title:`發起人`,width:180},{key:`startedAt`,render:e=>(0,s.jsx)(a.Typography,{component:`span`,variant:`body`,children:n.t(e.startedAt)}),title:`發起時間`,width:220},{key:`completedAt`,render:e=>(0,s.jsx)(a.Typography,{component:`span`,variant:`body`,children:n.t(e.completedAt)}),title:`完成時間`,width:220}],[A]),J=(0,i.useMemo)(()=>({render:e=>[{name:`查看`,onClick:()=>E.push(D.caseDetail(e.id))}],variant:`base-secondary`,width:88}),[E]);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.PageHeader,{children:(0,s.jsx)(l.default,{description:m,title:w})}),(0,s.jsx)(a.SectionGroup,{children:(0,s.jsxs)(a.Section,{filterArea:(0,s.jsx)(a.FilterArea,{className:d.instanceFilterArea,size:`sub`,children:(0,s.jsxs)(a.FilterLine,{children:[(0,s.jsx)(a.Filter,{span:3,children:(0,s.jsx)(a.FormField,{fullWidth:!0,layout:u.FormFieldLayout.VERTICAL,name:`instanceSearchText`,children:(0,s.jsx)(a.Input,{fullWidth:!0,onChange:e=>{U(e.target.value),N(1)},placeholder:b,size:`sub`,value:H,variant:`base`})})}),(0,s.jsx)(a.Filter,{span:2,children:(0,s.jsx)(a.FormField,{fullWidth:!0,layout:u.FormFieldLayout.VERTICAL,name:`instanceState`,children:(0,s.jsx)(a.Select,{clearable:!1,fullWidth:!0,onChange:e=>{G(g(e)),N(1)},options:[...p],placeholder:`狀態`,renderValue:e=>`狀態：${v(e)}`,size:`sub`,value:W})})})]})}),children:[O?(0,s.jsx)(a.Typography,{color:`text-error`,variant:`body`,children:O}):null,!O&&!R&&B.length===0?(0,s.jsx)(a.Typography,{color:`text-neutral`,variant:`body`,children:y}):null,(0,s.jsx)(a.Table,{actions:J,columns:q,dataSource:[...B],fullWidth:!0,loading:R,pagination:{current:M,onChange:e=>{N(e)},onChangePageSize:e=>{N(1),F(e)},pageSize:P,pageSizeLabel:`每頁筆數`,pageSizeOptions:f,renderResultSummary:(e,t,n)=>`顯示 ${e}-${t} 筆，共 ${n} 筆`,showPageSizeOptions:!0,total:I}})]})})]})}function h(e){return{...e,caseTitle:(0,c.readApprovalInstanceCaseTitle)(e),key:e.id,stateLabel:b(e.state)}}function g(e){return y(e)?_(e.state):p[0]}function _(e){return p.find(t=>t.state===e)??p[0]}function v(e){return y(e)?e.name:p[0].name}function y(e){return typeof e==`object`&&!!e&&`id`in e&&`name`in e&&`state`in e}function b(e){return e===`RUNNING`?`進行中`:e===`APPROVED`?`已通過`:e===`REJECTED`?`已拒絕`:e===`RETURNED`?`已退回`:e===`CANCELLED`?`已取消`:e===`EXPIRED`?`已逾期`:`草稿`}function x(e){return e===`APPROVED`?`text-success`:e===`REJECTED`||e===`CANCELLED`||e===`EXPIRED`?`text-error`:`text-neutral`}function S(e,t){let n=(e??``).trim();return n?t.get(n)?.name??n:`未知發起人`}function C(e){return e instanceof Error?e.message:`讀取簽核案件失敗。`}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});
-//# sourceMappingURL=approval-instance-list-page-C5ZKPHdA.cjs.map
+"use client";require('../approval-instance-list-page.css');const e=require("./chunk-CMqjfN_6.cjs"),t=require("./router-adapter--gYs13E8.cjs"),n=require("./format-date-time-XxBzF0F5.cjs"),r=require("./routes-config-fDVHmvXi.cjs");let i=require("react"),a=require("@mezzanine-ui/react"),o=require("@rytass/bpm-core-client"),s=require("react/jsx-runtime"),c=require("@rytass/bpm-core-client/workflow"),l=require("@mezzanine-ui/react/ContentHeader");l=e.t(l,1);let u=require("@mezzanine-ui/core/form");var d={instanceFilterArea:`bpm_instanceFilterArea_qpvJq`},f=[10,20,50],p=[{id:`ALL`,name:`全部狀態`,state:null},{id:`RUNNING`,name:`進行中`,state:`RUNNING`},{id:`APPROVED`,name:`已通過`,state:`APPROVED`},{id:`REJECTED`,name:`已拒絕`,state:`REJECTED`},{id:`RETURNED`,name:`已退回`,state:`RETURNED`},{id:`CANCELLED`,name:`已取消`,state:`CANCELLED`},{id:`EXPIRED`,name:`已逾期`,state:`EXPIRED`},{id:`DRAFT`,name:`草稿`,state:`DRAFT`}];function m({defaultState:e,description:m,emptyMessage:y,searchPlaceholder:b,title:w,view:T}){let E=t.r(),D=r.r(),[O,k]=(0,i.useState)(null),[A,j]=(0,i.useState)(new Map),[M,N]=(0,i.useState)(1),[P,F]=(0,i.useState)(10),[I,L]=(0,i.useState)(0),[R,z]=(0,i.useState)(!0),[B,V]=(0,i.useState)([]),[H,U]=(0,i.useState)(``),[W,G]=(0,i.useState)(_(e)),K=(0,i.useCallback)(async()=>{z(!0),k(null);try{let e=await(0,c.listApprovalInstancesPage)({page:M,pageSize:P,searchText:H,state:W.state,templateId:null,view:T});V(e.instances.map(h)),L(e.totalCount)}catch(e){k(C(e))}finally{z(!1)}},[M,P,H,W,T]);(0,i.useEffect)(()=>{K()},[K]),(0,i.useEffect)(()=>{let e=Array.from(new Set(B.map(e=>e.initiatorMemberId).filter(Boolean)));if(e.length===0){j(new Map);return}let t=!1;return(async()=>{try{let n=await(0,o.resolveMembers)(e);if(t)return;j(new Map(n.map(e=>[e.memberId,e])))}catch{if(t)return;j(new Map)}})(),()=>{t=!0}},[B]);let q=(0,i.useMemo)(()=>[{dataIndex:`caseTitle`,key:`caseTitle`,title:`案件`,width:300},{key:`state`,render:e=>(0,s.jsx)(a.Typography,{color:x(e.state),component:`span`,variant:`body`,children:e.stateLabel}),title:`狀態`,width:120},{key:`initiatorMemberId`,render:e=>(0,s.jsx)(a.Typography,{component:`span`,variant:`body`,children:S(e.initiatorMemberId,A)}),title:`發起人`,width:180},{key:`startedAt`,render:e=>(0,s.jsx)(a.Typography,{component:`span`,variant:`body`,children:n.t(e.startedAt)}),title:`發起時間`,width:220},{key:`completedAt`,render:e=>(0,s.jsx)(a.Typography,{component:`span`,variant:`body`,children:n.t(e.completedAt)}),title:`完成時間`,width:220}],[A]),J=(0,i.useMemo)(()=>({render:e=>[{name:`查看`,onClick:()=>E.push(D.caseDetail(e.id))}],variant:`base-secondary`,width:88}),[E]);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.PageHeader,{children:(0,s.jsx)(l.default,{description:m,title:w})}),(0,s.jsx)(a.SectionGroup,{children:(0,s.jsxs)(a.Section,{filterArea:(0,s.jsx)(a.FilterArea,{className:d.instanceFilterArea,size:`sub`,children:(0,s.jsxs)(a.FilterLine,{children:[(0,s.jsx)(a.Filter,{span:3,children:(0,s.jsx)(a.FormField,{fullWidth:!0,layout:u.FormFieldLayout.VERTICAL,name:`instanceSearchText`,children:(0,s.jsx)(a.Input,{fullWidth:!0,onChange:e=>{U(e.target.value),N(1)},placeholder:b,size:`sub`,value:H,variant:`base`})})}),(0,s.jsx)(a.Filter,{span:2,children:(0,s.jsx)(a.FormField,{fullWidth:!0,layout:u.FormFieldLayout.VERTICAL,name:`instanceState`,children:(0,s.jsx)(a.Select,{clearable:!1,fullWidth:!0,onChange:e=>{G(g(e)),N(1)},options:[...p],placeholder:`狀態`,renderValue:e=>`狀態：${v(e)}`,size:`sub`,value:W})})})]})}),children:[O?(0,s.jsx)(a.Typography,{color:`text-error`,variant:`body`,children:O}):null,!O&&!R&&B.length===0?(0,s.jsx)(a.Typography,{color:`text-neutral`,variant:`body`,children:y}):null,(0,s.jsx)(a.Table,{actions:J,columns:q,dataSource:[...B],fullWidth:!0,loading:R,pagination:{current:M,onChange:e=>{N(e)},onChangePageSize:e=>{N(1),F(e)},pageSize:P,pageSizeLabel:`每頁筆數`,pageSizeOptions:f,renderResultSummary:(e,t,n)=>`顯示 ${e}-${t} 筆，共 ${n} 筆`,showPageSizeOptions:!0,total:I}})]})})]})}function h(e){return{...e,caseTitle:(0,c.readApprovalInstanceCaseTitle)(e),key:e.id,stateLabel:b(e.state)}}function g(e){return y(e)?_(e.state):p[0]}function _(e){return p.find(t=>t.state===e)??p[0]}function v(e){return y(e)?e.name:p[0].name}function y(e){return typeof e==`object`&&!!e&&`id`in e&&`name`in e&&`state`in e}function b(e){return e===`RUNNING`?`進行中`:e===`APPROVED`?`已通過`:e===`REJECTED`?`已拒絕`:e===`RETURNED`?`已退回`:e===`CANCELLED`?`已取消`:e===`EXPIRED`?`已逾期`:`草稿`}function x(e){return e===`APPROVED`?`text-success`:e===`REJECTED`||e===`CANCELLED`||e===`EXPIRED`?`text-error`:`text-neutral`}function S(e,t){let n=(e??``).trim();return n?t.get(n)?.name??n:`未知發起人`}function C(e){return e instanceof Error?e.message:`讀取簽核案件失敗。`}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});
+//# sourceMappingURL=approval-instance-list-page-BMUKxzcz.cjs.map

package/dist/chunks/{approval-instance-list-page-C5ZKPHdA.cjs.map → approval-instance-list-page-BMUKxzcz.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"approval-instance-list-page-C5ZKPHdA.cjs","names":[],"sources":["../../src/components/approval-instance-list-page.module.scss","../../src/components/approval-instance-list-page.tsx"],"sourcesContent":[".instanceFilterArea {\n  :global(.mzn-filter-area__actions) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__label-area) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__control-field-slot--main) {\n    width: 100%;\n    min-width: 0;\n  }\n}\n","'use client';\n\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Filter,\n  FilterArea,\n  FilterLine,\n  FormField,\n  Input,\n  PageHeader,\n  Section,\n  SectionGroup,\n  Select,\n  Table,\n  Typography,\n} from '@mezzanine-ui/react';\nimport ContentHeader from '@mezzanine-ui/react/ContentHeader';\nimport { FormFieldLayout } from '@mezzanine-ui/core/form';\nimport type { TableActions, TableColumn } from '@mezzanine-ui/core/table';\nimport { resolveMembers, type MemberProfileRecord } from '@rytass/bpm-core-client';\nimport {\n  listApprovalInstancesPage,\n  readApprovalInstanceCaseTitle,\n  type ApprovalInstanceRecord,\n  type ApprovalInstanceState,\n  type ApprovalInstanceView,\n} from '@rytass/bpm-core-client/workflow';\nimport { useRouterAdapter } from '../lib/router-adapter';\nimport { useBPMRoutes } from '../lib/routes-config';\nimport { formatDateTime } from '../lib/format-date-time';\nimport styles from './approval-instance-list-page.module.scss';\n\nexport interface ApprovalInstanceListPageProps {\n  readonly defaultState: ApprovalInstanceState | null;\n  readonly description: string;\n  readonly emptyMessage: string;\n  readonly searchPlaceholder: string;\n  readonly title: string;\n  readonly view: ApprovalInstanceView;\n}\n\ntype StateFilterOption = Readonly<{\n  id: 'ALL' | ApprovalInstanceState;\n  name: string;\n  state: ApprovalInstanceState | null;\n}>;\n\ntype ApprovalInstanceRow = Readonly<\n  Record<string, unknown> &\n    ApprovalInstanceRecord & {\n      caseTitle: string;\n      key: string;\n      stateLabel: string;\n    }\n>;\n\nconst INSTANCE_PAGE_SIZE_OPTIONS = [10, 20, 50];\nconst STATE_FILTER_OPTIONS: readonly StateFilterOption[] = [\n  { id: 'ALL', name: '全部狀態', state: null },\n  { id: 'RUNNING', name: '進行中', state: 'RUNNING' },\n  { id: 'APPROVED', name: '已通過', state: 'APPROVED' },\n  { id: 'REJECTED', name: '已拒絕', state: 'REJECTED' },\n  { id: 'RETURNED', name: '已退回', state: 'RETURNED' },\n  { id: 'CANCELLED', name: '已取消', state: 'CANCELLED' },\n  { id: 'EXPIRED', name: '已逾期', state: 'EXPIRED' },\n  { id: 'DRAFT', name: '草稿', state: 'DRAFT' },\n];\n\n/**\n * Shared list page for any approval-instance \"view\" (inbox / sent / cc /\n * delegated). Caller picks the view + default state filter; the page renders\n * the standard BPM filter bar + paginated table and navigates to\n * `/instances/:id` on row action.\n */\nexport function ApprovalInstanceListPage({\n  defaultState,\n  description,\n  emptyMessage,\n  searchPlaceholder,\n  title,\n  view,\n}: ApprovalInstanceListPageProps): ReactElement {\n  const router = useRouterAdapter();\n  const routes = useBPMRoutes();\n  const [error, setError] = useState<string | null>(null);\n  const [initiatorProfilesById, setInitiatorProfilesById] = useState<\n    ReadonlyMap<string, MemberProfileRecord>\n  >(new Map());\n  const [instancePage, setInstancePage] = useState(1);\n  const [instancePageSize, setInstancePageSize] = useState(10);\n  const [instanceTotalCount, setInstanceTotalCount] = useState(0);\n  const [loading, setLoading] = useState(true);\n  const [rows, setRows] = useState<readonly ApprovalInstanceRow[]>([]);\n  const [searchText, setSearchText] = useState('');\n  const [stateFilter, setStateFilter] = useState<StateFilterOption>(\n    readStateFilterOption(defaultState),\n  );\n\n  const refreshInstances = useCallback(async (): Promise<void> => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const result = await listApprovalInstancesPage({\n        page: instancePage,\n        pageSize: instancePageSize,\n        searchText,\n        state: stateFilter.state,\n        templateId: null,\n        view,\n      });\n\n      setRows(result.instances.map(readApprovalInstanceRow));\n      setInstanceTotalCount(result.totalCount);\n    } catch (requestError: unknown) {\n      setError(readErrorMessage(requestError));\n    } finally {\n      setLoading(false);\n    }\n  }, [instancePage, instancePageSize, searchText, stateFilter, view]);\n\n  useEffect((): void => {\n    void refreshInstances();\n  }, [refreshInstances]);\n\n  useEffect((): (() => void) | void => {\n    const initiatorMemberIds = Array.from(\n      new Set(rows.map((row) => row.initiatorMemberId).filter(Boolean)),\n    );\n\n    if (initiatorMemberIds.length === 0) {\n      setInitiatorProfilesById(new Map());\n\n      return;\n    }\n\n    let cancelled = false;\n\n    void (async (): Promise<void> => {\n      try {\n        const profiles = await resolveMembers(initiatorMemberIds);\n\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(\n          new Map(profiles.map((profile) => [profile.memberId, profile])),\n        );\n      } catch {\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(new Map());\n      }\n    })();\n\n    return (): void => {\n      cancelled = true;\n    };\n  }, [rows]);\n\n  const columns = useMemo(\n    (): TableColumn<ApprovalInstanceRow>[] => [\n      { dataIndex: 'caseTitle', key: 'caseTitle', title: '案件', width: 300 },\n      {\n        key: 'state',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography\n            color={readInstanceStateColor(record.state)}\n            component=\"span\"\n            variant=\"body\"\n          >\n            {record.stateLabel}\n          </Typography>\n        ),\n        title: '狀態',\n        width: 120,\n      },\n      {\n        key: 'initiatorMemberId',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {readInitiatorLabel(\n              record.initiatorMemberId,\n              initiatorProfilesById,\n            )}\n          </Typography>\n        ),\n        title: '發起人',\n        width: 180,\n      },\n      {\n        key: 'startedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.startedAt)}\n          </Typography>\n        ),\n        title: '發起時間',\n        width: 220,\n      },\n      {\n        key: 'completedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.completedAt)}\n          </Typography>\n        ),\n        title: '完成時間',\n        width: 220,\n      },\n    ],\n    [initiatorProfilesById],\n  );\n  const tableActions = useMemo(\n    (): TableActions<ApprovalInstanceRow> => ({\n      render: (\n        record,\n      ): ReturnType<TableActions<ApprovalInstanceRow>['render']> => [\n        {\n          name: '查看',\n          onClick: (): void => router.push(routes.caseDetail(record.id)),\n        },\n      ],\n      variant: 'base-secondary',\n      width: 88,\n    }),\n    [router],\n  );\n\n  return (\n    <>\n      <PageHeader>\n        <ContentHeader description={description} title={title} />\n      </PageHeader>\n\n      <SectionGroup>\n        <Section\n          filterArea={\n            <FilterArea className={styles.instanceFilterArea} size=\"sub\">\n              <FilterLine>\n                <Filter span={3}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceSearchText\"\n                  >\n                    <Input\n                      fullWidth\n                      onChange={(\n                        event: ChangeEvent<HTMLInputElement>,\n                      ): void => {\n                        setSearchText(event.target.value);\n                        setInstancePage(1);\n                      }}\n                      placeholder={searchPlaceholder}\n                      size=\"sub\"\n                      value={searchText}\n                      variant=\"base\"\n                    />\n                  </FormField>\n                </Filter>\n                <Filter span={2}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceState\"\n                  >\n                    <Select\n                      clearable={false}\n                      fullWidth\n                      onChange={(option): void => {\n                        setStateFilter(readSelectedStateFilterOption(option));\n                        setInstancePage(1);\n                      }}\n                      options={[...STATE_FILTER_OPTIONS]}\n                      placeholder=\"狀態\"\n                      renderValue={(value): string =>\n                        `狀態：${readStateFilterLabel(value)}`\n                      }\n                      size=\"sub\"\n                      value={stateFilter}\n                    />\n                  </FormField>\n                </Filter>\n              </FilterLine>\n            </FilterArea>\n          }\n        >\n          {error ? (\n            <Typography color=\"text-error\" variant=\"body\">\n              {error}\n            </Typography>\n          ) : null}\n          {!error && !loading && rows.length === 0 ? (\n            <Typography color=\"text-neutral\" variant=\"body\">\n              {emptyMessage}\n            </Typography>\n          ) : null}\n          <Table\n            actions={tableActions}\n            columns={columns}\n            dataSource={[...rows]}\n            fullWidth\n            loading={loading}\n            pagination={{\n              current: instancePage,\n              onChange: (page): void => {\n                setInstancePage(page);\n              },\n              onChangePageSize: (pageSize): void => {\n                setInstancePage(1);\n                setInstancePageSize(pageSize);\n              },\n              pageSize: instancePageSize,\n              pageSizeLabel: '每頁筆數',\n              pageSizeOptions: INSTANCE_PAGE_SIZE_OPTIONS,\n              renderResultSummary: (from, to, total): string =>\n                `顯示 ${from}-${to} 筆，共 ${total} 筆`,\n              showPageSizeOptions: true,\n              total: instanceTotalCount,\n            }}\n          />\n        </Section>\n      </SectionGroup>\n    </>\n  );\n}\n\nfunction readApprovalInstanceRow(\n  instance: ApprovalInstanceRecord,\n): ApprovalInstanceRow {\n  return {\n    ...instance,\n    caseTitle: readApprovalInstanceCaseTitle(instance),\n    key: instance.id,\n    stateLabel: readInstanceStateLabel(instance.state),\n  };\n}\n\nfunction readSelectedStateFilterOption(option: unknown): StateFilterOption {\n  if (!isStateFilterOption(option)) {\n    return STATE_FILTER_OPTIONS[0];\n  }\n  return readStateFilterOption(option.state);\n}\n\nfunction readStateFilterOption(\n  state: ApprovalInstanceState | null,\n): StateFilterOption {\n  return (\n    STATE_FILTER_OPTIONS.find((option) => option.state === state) ??\n    STATE_FILTER_OPTIONS[0]\n  );\n}\n\nfunction readStateFilterLabel(value: unknown): string {\n  return isStateFilterOption(value) ? value.name : STATE_FILTER_OPTIONS[0].name;\n}\n\nfunction isStateFilterOption(value: unknown): value is StateFilterOption {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'id' in value &&\n    'name' in value &&\n    'state' in value\n  );\n}\n\nfunction readInstanceStateLabel(state: ApprovalInstanceState): string {\n  if (state === 'RUNNING') return '進行中';\n  if (state === 'APPROVED') return '已通過';\n  if (state === 'REJECTED') return '已拒絕';\n  if (state === 'RETURNED') return '已退回';\n  if (state === 'CANCELLED') return '已取消';\n  if (state === 'EXPIRED') return '已逾期';\n  return '草稿';\n}\n\nfunction readInstanceStateColor(\n  state: ApprovalInstanceState,\n): 'text-error' | 'text-neutral' | 'text-success' {\n  if (state === 'APPROVED') return 'text-success';\n  if (state === 'REJECTED' || state === 'CANCELLED' || state === 'EXPIRED') {\n    return 'text-error';\n  }\n  return 'text-neutral';\n}\n\nfunction readInitiatorLabel(\n  initiatorMemberId: string | null | undefined,\n  initiatorProfilesById: ReadonlyMap<string, MemberProfileRecord>,\n): string {\n  const trimmedMemberId = (initiatorMemberId ?? '').trim();\n  if (!trimmedMemberId) return '未知發起人';\n  return initiatorProfilesById.get(trimmedMemberId)?.name ?? trimmedMemberId;\n}\n\nfunction readErrorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : '讀取簽核案件失敗。';\n}\n"],"mappings":"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"}
+{"version":3,"file":"approval-instance-list-page-BMUKxzcz.cjs","names":[],"sources":["../../src/components/approval-instance-list-page.module.scss","../../src/components/approval-instance-list-page.tsx"],"sourcesContent":[".instanceFilterArea {\n  :global(.mzn-filter-area__actions) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__label-area) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__control-field-slot--main) {\n    width: 100%;\n    min-width: 0;\n  }\n}\n","'use client';\n\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Filter,\n  FilterArea,\n  FilterLine,\n  FormField,\n  Input,\n  PageHeader,\n  Section,\n  SectionGroup,\n  Select,\n  Table,\n  Typography,\n} from '@mezzanine-ui/react';\nimport ContentHeader from '@mezzanine-ui/react/ContentHeader';\nimport { FormFieldLayout } from '@mezzanine-ui/core/form';\nimport type { TableActions, TableColumn } from '@mezzanine-ui/core/table';\nimport { resolveMembers, type MemberProfileRecord } from '@rytass/bpm-core-client';\nimport {\n  listApprovalInstancesPage,\n  readApprovalInstanceCaseTitle,\n  type ApprovalInstanceRecord,\n  type ApprovalInstanceState,\n  type ApprovalInstanceView,\n} from '@rytass/bpm-core-client/workflow';\nimport { useRouterAdapter } from '../lib/router-adapter';\nimport { useBPMRoutes } from '../lib/routes-config';\nimport { formatDateTime } from '../lib/format-date-time';\nimport styles from './approval-instance-list-page.module.scss';\n\nexport interface ApprovalInstanceListPageProps {\n  readonly defaultState: ApprovalInstanceState | null;\n  readonly description: string;\n  readonly emptyMessage: string;\n  readonly searchPlaceholder: string;\n  readonly title: string;\n  readonly view: ApprovalInstanceView;\n}\n\ntype StateFilterOption = Readonly<{\n  id: 'ALL' | ApprovalInstanceState;\n  name: string;\n  state: ApprovalInstanceState | null;\n}>;\n\ntype ApprovalInstanceRow = Readonly<\n  Record<string, unknown> &\n    ApprovalInstanceRecord & {\n      caseTitle: string;\n      key: string;\n      stateLabel: string;\n    }\n>;\n\nconst INSTANCE_PAGE_SIZE_OPTIONS = [10, 20, 50];\nconst STATE_FILTER_OPTIONS: readonly StateFilterOption[] = [\n  { id: 'ALL', name: '全部狀態', state: null },\n  { id: 'RUNNING', name: '進行中', state: 'RUNNING' },\n  { id: 'APPROVED', name: '已通過', state: 'APPROVED' },\n  { id: 'REJECTED', name: '已拒絕', state: 'REJECTED' },\n  { id: 'RETURNED', name: '已退回', state: 'RETURNED' },\n  { id: 'CANCELLED', name: '已取消', state: 'CANCELLED' },\n  { id: 'EXPIRED', name: '已逾期', state: 'EXPIRED' },\n  { id: 'DRAFT', name: '草稿', state: 'DRAFT' },\n];\n\n/**\n * Shared list page for any approval-instance \"view\" (inbox / sent / cc /\n * delegated). Caller picks the view + default state filter; the page renders\n * the standard BPM filter bar + paginated table and navigates to\n * `/instances/:id` on row action.\n */\nexport function ApprovalInstanceListPage({\n  defaultState,\n  description,\n  emptyMessage,\n  searchPlaceholder,\n  title,\n  view,\n}: ApprovalInstanceListPageProps): ReactElement {\n  const router = useRouterAdapter();\n  const routes = useBPMRoutes();\n  const [error, setError] = useState<string | null>(null);\n  const [initiatorProfilesById, setInitiatorProfilesById] = useState<\n    ReadonlyMap<string, MemberProfileRecord>\n  >(new Map());\n  const [instancePage, setInstancePage] = useState(1);\n  const [instancePageSize, setInstancePageSize] = useState(10);\n  const [instanceTotalCount, setInstanceTotalCount] = useState(0);\n  const [loading, setLoading] = useState(true);\n  const [rows, setRows] = useState<readonly ApprovalInstanceRow[]>([]);\n  const [searchText, setSearchText] = useState('');\n  const [stateFilter, setStateFilter] = useState<StateFilterOption>(\n    readStateFilterOption(defaultState),\n  );\n\n  const refreshInstances = useCallback(async (): Promise<void> => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const result = await listApprovalInstancesPage({\n        page: instancePage,\n        pageSize: instancePageSize,\n        searchText,\n        state: stateFilter.state,\n        templateId: null,\n        view,\n      });\n\n      setRows(result.instances.map(readApprovalInstanceRow));\n      setInstanceTotalCount(result.totalCount);\n    } catch (requestError: unknown) {\n      setError(readErrorMessage(requestError));\n    } finally {\n      setLoading(false);\n    }\n  }, [instancePage, instancePageSize, searchText, stateFilter, view]);\n\n  useEffect((): void => {\n    void refreshInstances();\n  }, [refreshInstances]);\n\n  useEffect((): (() => void) | void => {\n    const initiatorMemberIds = Array.from(\n      new Set(rows.map((row) => row.initiatorMemberId).filter(Boolean)),\n    );\n\n    if (initiatorMemberIds.length === 0) {\n      setInitiatorProfilesById(new Map());\n\n      return;\n    }\n\n    let cancelled = false;\n\n    void (async (): Promise<void> => {\n      try {\n        const profiles = await resolveMembers(initiatorMemberIds);\n\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(\n          new Map(profiles.map((profile) => [profile.memberId, profile])),\n        );\n      } catch {\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(new Map());\n      }\n    })();\n\n    return (): void => {\n      cancelled = true;\n    };\n  }, [rows]);\n\n  const columns = useMemo(\n    (): TableColumn<ApprovalInstanceRow>[] => [\n      { dataIndex: 'caseTitle', key: 'caseTitle', title: '案件', width: 300 },\n      {\n        key: 'state',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography\n            color={readInstanceStateColor(record.state)}\n            component=\"span\"\n            variant=\"body\"\n          >\n            {record.stateLabel}\n          </Typography>\n        ),\n        title: '狀態',\n        width: 120,\n      },\n      {\n        key: 'initiatorMemberId',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {readInitiatorLabel(\n              record.initiatorMemberId,\n              initiatorProfilesById,\n            )}\n          </Typography>\n        ),\n        title: '發起人',\n        width: 180,\n      },\n      {\n        key: 'startedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.startedAt)}\n          </Typography>\n        ),\n        title: '發起時間',\n        width: 220,\n      },\n      {\n        key: 'completedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.completedAt)}\n          </Typography>\n        ),\n        title: '完成時間',\n        width: 220,\n      },\n    ],\n    [initiatorProfilesById],\n  );\n  const tableActions = useMemo(\n    (): TableActions<ApprovalInstanceRow> => ({\n      render: (\n        record,\n      ): ReturnType<TableActions<ApprovalInstanceRow>['render']> => [\n        {\n          name: '查看',\n          onClick: (): void => router.push(routes.caseDetail(record.id)),\n        },\n      ],\n      variant: 'base-secondary',\n      width: 88,\n    }),\n    [router],\n  );\n\n  return (\n    <>\n      <PageHeader>\n        <ContentHeader description={description} title={title} />\n      </PageHeader>\n\n      <SectionGroup>\n        <Section\n          filterArea={\n            <FilterArea className={styles.instanceFilterArea} size=\"sub\">\n              <FilterLine>\n                <Filter span={3}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceSearchText\"\n                  >\n                    <Input\n                      fullWidth\n                      onChange={(\n                        event: ChangeEvent<HTMLInputElement>,\n                      ): void => {\n                        setSearchText(event.target.value);\n                        setInstancePage(1);\n                      }}\n                      placeholder={searchPlaceholder}\n                      size=\"sub\"\n                      value={searchText}\n                      variant=\"base\"\n                    />\n                  </FormField>\n                </Filter>\n                <Filter span={2}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceState\"\n                  >\n                    <Select\n                      clearable={false}\n                      fullWidth\n                      onChange={(option): void => {\n                        setStateFilter(readSelectedStateFilterOption(option));\n                        setInstancePage(1);\n                      }}\n                      options={[...STATE_FILTER_OPTIONS]}\n                      placeholder=\"狀態\"\n                      renderValue={(value): string =>\n                        `狀態：${readStateFilterLabel(value)}`\n                      }\n                      size=\"sub\"\n                      value={stateFilter}\n                    />\n                  </FormField>\n                </Filter>\n              </FilterLine>\n            </FilterArea>\n          }\n        >\n          {error ? (\n            <Typography color=\"text-error\" variant=\"body\">\n              {error}\n            </Typography>\n          ) : null}\n          {!error && !loading && rows.length === 0 ? (\n            <Typography color=\"text-neutral\" variant=\"body\">\n              {emptyMessage}\n            </Typography>\n          ) : null}\n          <Table\n            actions={tableActions}\n            columns={columns}\n            dataSource={[...rows]}\n            fullWidth\n            loading={loading}\n            pagination={{\n              current: instancePage,\n              onChange: (page): void => {\n                setInstancePage(page);\n              },\n              onChangePageSize: (pageSize): void => {\n                setInstancePage(1);\n                setInstancePageSize(pageSize);\n              },\n              pageSize: instancePageSize,\n              pageSizeLabel: '每頁筆數',\n              pageSizeOptions: INSTANCE_PAGE_SIZE_OPTIONS,\n              renderResultSummary: (from, to, total): string =>\n                `顯示 ${from}-${to} 筆，共 ${total} 筆`,\n              showPageSizeOptions: true,\n              total: instanceTotalCount,\n            }}\n          />\n        </Section>\n      </SectionGroup>\n    </>\n  );\n}\n\nfunction readApprovalInstanceRow(\n  instance: ApprovalInstanceRecord,\n): ApprovalInstanceRow {\n  return {\n    ...instance,\n    caseTitle: readApprovalInstanceCaseTitle(instance),\n    key: instance.id,\n    stateLabel: readInstanceStateLabel(instance.state),\n  };\n}\n\nfunction readSelectedStateFilterOption(option: unknown): StateFilterOption {\n  if (!isStateFilterOption(option)) {\n    return STATE_FILTER_OPTIONS[0];\n  }\n  return readStateFilterOption(option.state);\n}\n\nfunction readStateFilterOption(\n  state: ApprovalInstanceState | null,\n): StateFilterOption {\n  return (\n    STATE_FILTER_OPTIONS.find((option) => option.state === state) ??\n    STATE_FILTER_OPTIONS[0]\n  );\n}\n\nfunction readStateFilterLabel(value: unknown): string {\n  return isStateFilterOption(value) ? value.name : STATE_FILTER_OPTIONS[0].name;\n}\n\nfunction isStateFilterOption(value: unknown): value is StateFilterOption {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'id' in value &&\n    'name' in value &&\n    'state' in value\n  );\n}\n\nfunction readInstanceStateLabel(state: ApprovalInstanceState): string {\n  if (state === 'RUNNING') return '進行中';\n  if (state === 'APPROVED') return '已通過';\n  if (state === 'REJECTED') return '已拒絕';\n  if (state === 'RETURNED') return '已退回';\n  if (state === 'CANCELLED') return '已取消';\n  if (state === 'EXPIRED') return '已逾期';\n  return '草稿';\n}\n\nfunction readInstanceStateColor(\n  state: ApprovalInstanceState,\n): 'text-error' | 'text-neutral' | 'text-success' {\n  if (state === 'APPROVED') return 'text-success';\n  if (state === 'REJECTED' || state === 'CANCELLED' || state === 'EXPIRED') {\n    return 'text-error';\n  }\n  return 'text-neutral';\n}\n\nfunction readInitiatorLabel(\n  initiatorMemberId: string | null | undefined,\n  initiatorProfilesById: ReadonlyMap<string, MemberProfileRecord>,\n): string {\n  const trimmedMemberId = (initiatorMemberId ?? '').trim();\n  if (!trimmedMemberId) return '未知發起人';\n  return initiatorProfilesById.get(trimmedMemberId)?.name ?? trimmedMemberId;\n}\n\nfunction readErrorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : '讀取簽核案件失敗。';\n}\n"],"mappings":"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"}

package/dist/chunks/{approval-instance-list-page-BF2r5D2-.js → approval-instance-list-page-YZcGGDD8.js}

@@ -1,7 +1,7 @@
 "use client";
 import { r as e } from "./router-adapter-DftlFTOd.js";
 import { t } from "./format-date-time-CB-LxzqT.js";
-import { r as n } from "./routes-config-dxahImVe.js";
+import { r as n } from "./routes-config-RBYQtUd0.js";
 import { useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
 import { Filter as s, FilterArea as c, FilterLine as l, FormField as u, Input as d, PageHeader as f, Section as ee, SectionGroup as te, Select as ne, Table as p, Typography as m } from "@mezzanine-ui/react";
 import { resolveMembers as h } from "@rytass/bpm-core-client";
@@ -275,4 +275,4 @@ function M(e) {
 //#endregion
 export { E as t };
 
-//# sourceMappingURL=approval-instance-list-page-BF2r5D2-.js.map
+//# sourceMappingURL=approval-instance-list-page-YZcGGDD8.js.map

package/dist/chunks/{approval-instance-list-page-BF2r5D2-.js.map → approval-instance-list-page-YZcGGDD8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"approval-instance-list-page-BF2r5D2-.js","names":[],"sources":["../../src/components/approval-instance-list-page.module.scss","../../src/components/approval-instance-list-page.tsx"],"sourcesContent":[".instanceFilterArea {\n  :global(.mzn-filter-area__actions) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__label-area) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__control-field-slot--main) {\n    width: 100%;\n    min-width: 0;\n  }\n}\n","'use client';\n\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Filter,\n  FilterArea,\n  FilterLine,\n  FormField,\n  Input,\n  PageHeader,\n  Section,\n  SectionGroup,\n  Select,\n  Table,\n  Typography,\n} from '@mezzanine-ui/react';\nimport ContentHeader from '@mezzanine-ui/react/ContentHeader';\nimport { FormFieldLayout } from '@mezzanine-ui/core/form';\nimport type { TableActions, TableColumn } from '@mezzanine-ui/core/table';\nimport { resolveMembers, type MemberProfileRecord } from '@rytass/bpm-core-client';\nimport {\n  listApprovalInstancesPage,\n  readApprovalInstanceCaseTitle,\n  type ApprovalInstanceRecord,\n  type ApprovalInstanceState,\n  type ApprovalInstanceView,\n} from '@rytass/bpm-core-client/workflow';\nimport { useRouterAdapter } from '../lib/router-adapter';\nimport { useBPMRoutes } from '../lib/routes-config';\nimport { formatDateTime } from '../lib/format-date-time';\nimport styles from './approval-instance-list-page.module.scss';\n\nexport interface ApprovalInstanceListPageProps {\n  readonly defaultState: ApprovalInstanceState | null;\n  readonly description: string;\n  readonly emptyMessage: string;\n  readonly searchPlaceholder: string;\n  readonly title: string;\n  readonly view: ApprovalInstanceView;\n}\n\ntype StateFilterOption = Readonly<{\n  id: 'ALL' | ApprovalInstanceState;\n  name: string;\n  state: ApprovalInstanceState | null;\n}>;\n\ntype ApprovalInstanceRow = Readonly<\n  Record<string, unknown> &\n    ApprovalInstanceRecord & {\n      caseTitle: string;\n      key: string;\n      stateLabel: string;\n    }\n>;\n\nconst INSTANCE_PAGE_SIZE_OPTIONS = [10, 20, 50];\nconst STATE_FILTER_OPTIONS: readonly StateFilterOption[] = [\n  { id: 'ALL', name: '全部狀態', state: null },\n  { id: 'RUNNING', name: '進行中', state: 'RUNNING' },\n  { id: 'APPROVED', name: '已通過', state: 'APPROVED' },\n  { id: 'REJECTED', name: '已拒絕', state: 'REJECTED' },\n  { id: 'RETURNED', name: '已退回', state: 'RETURNED' },\n  { id: 'CANCELLED', name: '已取消', state: 'CANCELLED' },\n  { id: 'EXPIRED', name: '已逾期', state: 'EXPIRED' },\n  { id: 'DRAFT', name: '草稿', state: 'DRAFT' },\n];\n\n/**\n * Shared list page for any approval-instance \"view\" (inbox / sent / cc /\n * delegated). Caller picks the view + default state filter; the page renders\n * the standard BPM filter bar + paginated table and navigates to\n * `/instances/:id` on row action.\n */\nexport function ApprovalInstanceListPage({\n  defaultState,\n  description,\n  emptyMessage,\n  searchPlaceholder,\n  title,\n  view,\n}: ApprovalInstanceListPageProps): ReactElement {\n  const router = useRouterAdapter();\n  const routes = useBPMRoutes();\n  const [error, setError] = useState<string | null>(null);\n  const [initiatorProfilesById, setInitiatorProfilesById] = useState<\n    ReadonlyMap<string, MemberProfileRecord>\n  >(new Map());\n  const [instancePage, setInstancePage] = useState(1);\n  const [instancePageSize, setInstancePageSize] = useState(10);\n  const [instanceTotalCount, setInstanceTotalCount] = useState(0);\n  const [loading, setLoading] = useState(true);\n  const [rows, setRows] = useState<readonly ApprovalInstanceRow[]>([]);\n  const [searchText, setSearchText] = useState('');\n  const [stateFilter, setStateFilter] = useState<StateFilterOption>(\n    readStateFilterOption(defaultState),\n  );\n\n  const refreshInstances = useCallback(async (): Promise<void> => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const result = await listApprovalInstancesPage({\n        page: instancePage,\n        pageSize: instancePageSize,\n        searchText,\n        state: stateFilter.state,\n        templateId: null,\n        view,\n      });\n\n      setRows(result.instances.map(readApprovalInstanceRow));\n      setInstanceTotalCount(result.totalCount);\n    } catch (requestError: unknown) {\n      setError(readErrorMessage(requestError));\n    } finally {\n      setLoading(false);\n    }\n  }, [instancePage, instancePageSize, searchText, stateFilter, view]);\n\n  useEffect((): void => {\n    void refreshInstances();\n  }, [refreshInstances]);\n\n  useEffect((): (() => void) | void => {\n    const initiatorMemberIds = Array.from(\n      new Set(rows.map((row) => row.initiatorMemberId).filter(Boolean)),\n    );\n\n    if (initiatorMemberIds.length === 0) {\n      setInitiatorProfilesById(new Map());\n\n      return;\n    }\n\n    let cancelled = false;\n\n    void (async (): Promise<void> => {\n      try {\n        const profiles = await resolveMembers(initiatorMemberIds);\n\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(\n          new Map(profiles.map((profile) => [profile.memberId, profile])),\n        );\n      } catch {\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(new Map());\n      }\n    })();\n\n    return (): void => {\n      cancelled = true;\n    };\n  }, [rows]);\n\n  const columns = useMemo(\n    (): TableColumn<ApprovalInstanceRow>[] => [\n      { dataIndex: 'caseTitle', key: 'caseTitle', title: '案件', width: 300 },\n      {\n        key: 'state',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography\n            color={readInstanceStateColor(record.state)}\n            component=\"span\"\n            variant=\"body\"\n          >\n            {record.stateLabel}\n          </Typography>\n        ),\n        title: '狀態',\n        width: 120,\n      },\n      {\n        key: 'initiatorMemberId',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {readInitiatorLabel(\n              record.initiatorMemberId,\n              initiatorProfilesById,\n            )}\n          </Typography>\n        ),\n        title: '發起人',\n        width: 180,\n      },\n      {\n        key: 'startedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.startedAt)}\n          </Typography>\n        ),\n        title: '發起時間',\n        width: 220,\n      },\n      {\n        key: 'completedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.completedAt)}\n          </Typography>\n        ),\n        title: '完成時間',\n        width: 220,\n      },\n    ],\n    [initiatorProfilesById],\n  );\n  const tableActions = useMemo(\n    (): TableActions<ApprovalInstanceRow> => ({\n      render: (\n        record,\n      ): ReturnType<TableActions<ApprovalInstanceRow>['render']> => [\n        {\n          name: '查看',\n          onClick: (): void => router.push(routes.caseDetail(record.id)),\n        },\n      ],\n      variant: 'base-secondary',\n      width: 88,\n    }),\n    [router],\n  );\n\n  return (\n    <>\n      <PageHeader>\n        <ContentHeader description={description} title={title} />\n      </PageHeader>\n\n      <SectionGroup>\n        <Section\n          filterArea={\n            <FilterArea className={styles.instanceFilterArea} size=\"sub\">\n              <FilterLine>\n                <Filter span={3}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceSearchText\"\n                  >\n                    <Input\n                      fullWidth\n                      onChange={(\n                        event: ChangeEvent<HTMLInputElement>,\n                      ): void => {\n                        setSearchText(event.target.value);\n                        setInstancePage(1);\n                      }}\n                      placeholder={searchPlaceholder}\n                      size=\"sub\"\n                      value={searchText}\n                      variant=\"base\"\n                    />\n                  </FormField>\n                </Filter>\n                <Filter span={2}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceState\"\n                  >\n                    <Select\n                      clearable={false}\n                      fullWidth\n                      onChange={(option): void => {\n                        setStateFilter(readSelectedStateFilterOption(option));\n                        setInstancePage(1);\n                      }}\n                      options={[...STATE_FILTER_OPTIONS]}\n                      placeholder=\"狀態\"\n                      renderValue={(value): string =>\n                        `狀態：${readStateFilterLabel(value)}`\n                      }\n                      size=\"sub\"\n                      value={stateFilter}\n                    />\n                  </FormField>\n                </Filter>\n              </FilterLine>\n            </FilterArea>\n          }\n        >\n          {error ? (\n            <Typography color=\"text-error\" variant=\"body\">\n              {error}\n            </Typography>\n          ) : null}\n          {!error && !loading && rows.length === 0 ? (\n            <Typography color=\"text-neutral\" variant=\"body\">\n              {emptyMessage}\n            </Typography>\n          ) : null}\n          <Table\n            actions={tableActions}\n            columns={columns}\n            dataSource={[...rows]}\n            fullWidth\n            loading={loading}\n            pagination={{\n              current: instancePage,\n              onChange: (page): void => {\n                setInstancePage(page);\n              },\n              onChangePageSize: (pageSize): void => {\n                setInstancePage(1);\n                setInstancePageSize(pageSize);\n              },\n              pageSize: instancePageSize,\n              pageSizeLabel: '每頁筆數',\n              pageSizeOptions: INSTANCE_PAGE_SIZE_OPTIONS,\n              renderResultSummary: (from, to, total): string =>\n                `顯示 ${from}-${to} 筆，共 ${total} 筆`,\n              showPageSizeOptions: true,\n              total: instanceTotalCount,\n            }}\n          />\n        </Section>\n      </SectionGroup>\n    </>\n  );\n}\n\nfunction readApprovalInstanceRow(\n  instance: ApprovalInstanceRecord,\n): ApprovalInstanceRow {\n  return {\n    ...instance,\n    caseTitle: readApprovalInstanceCaseTitle(instance),\n    key: instance.id,\n    stateLabel: readInstanceStateLabel(instance.state),\n  };\n}\n\nfunction readSelectedStateFilterOption(option: unknown): StateFilterOption {\n  if (!isStateFilterOption(option)) {\n    return STATE_FILTER_OPTIONS[0];\n  }\n  return readStateFilterOption(option.state);\n}\n\nfunction readStateFilterOption(\n  state: ApprovalInstanceState | null,\n): StateFilterOption {\n  return (\n    STATE_FILTER_OPTIONS.find((option) => option.state === state) ??\n    STATE_FILTER_OPTIONS[0]\n  );\n}\n\nfunction readStateFilterLabel(value: unknown): string {\n  return isStateFilterOption(value) ? value.name : STATE_FILTER_OPTIONS[0].name;\n}\n\nfunction isStateFilterOption(value: unknown): value is StateFilterOption {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'id' in value &&\n    'name' in value &&\n    'state' in value\n  );\n}\n\nfunction readInstanceStateLabel(state: ApprovalInstanceState): string {\n  if (state === 'RUNNING') return '進行中';\n  if (state === 'APPROVED') return '已通過';\n  if (state === 'REJECTED') return '已拒絕';\n  if (state === 'RETURNED') return '已退回';\n  if (state === 'CANCELLED') return '已取消';\n  if (state === 'EXPIRED') return '已逾期';\n  return '草稿';\n}\n\nfunction readInstanceStateColor(\n  state: ApprovalInstanceState,\n): 'text-error' | 'text-neutral' | 'text-success' {\n  if (state === 'APPROVED') return 'text-success';\n  if (state === 'REJECTED' || state === 'CANCELLED' || state === 'EXPIRED') {\n    return 'text-error';\n  }\n  return 'text-neutral';\n}\n\nfunction readInitiatorLabel(\n  initiatorMemberId: string | null | undefined,\n  initiatorProfilesById: ReadonlyMap<string, MemberProfileRecord>,\n): string {\n  const trimmedMemberId = (initiatorMemberId ?? '').trim();\n  if (!trimmedMemberId) return '未知發起人';\n  return initiatorProfilesById.get(trimmedMemberId)?.name ?? trimmedMemberId;\n}\n\nfunction readErrorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : '讀取簽核案件失敗。';\n}\n"],"mappings":"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"}
+{"version":3,"file":"approval-instance-list-page-YZcGGDD8.js","names":[],"sources":["../../src/components/approval-instance-list-page.module.scss","../../src/components/approval-instance-list-page.tsx"],"sourcesContent":[".instanceFilterArea {\n  :global(.mzn-filter-area__actions) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__label-area) {\n    display: none;\n  }\n\n  :global(.mzn-form-field__control-field-slot--main) {\n    width: 100%;\n    min-width: 0;\n  }\n}\n","'use client';\n\nimport type { ChangeEvent, ReactElement } from 'react';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Filter,\n  FilterArea,\n  FilterLine,\n  FormField,\n  Input,\n  PageHeader,\n  Section,\n  SectionGroup,\n  Select,\n  Table,\n  Typography,\n} from '@mezzanine-ui/react';\nimport ContentHeader from '@mezzanine-ui/react/ContentHeader';\nimport { FormFieldLayout } from '@mezzanine-ui/core/form';\nimport type { TableActions, TableColumn } from '@mezzanine-ui/core/table';\nimport { resolveMembers, type MemberProfileRecord } from '@rytass/bpm-core-client';\nimport {\n  listApprovalInstancesPage,\n  readApprovalInstanceCaseTitle,\n  type ApprovalInstanceRecord,\n  type ApprovalInstanceState,\n  type ApprovalInstanceView,\n} from '@rytass/bpm-core-client/workflow';\nimport { useRouterAdapter } from '../lib/router-adapter';\nimport { useBPMRoutes } from '../lib/routes-config';\nimport { formatDateTime } from '../lib/format-date-time';\nimport styles from './approval-instance-list-page.module.scss';\n\nexport interface ApprovalInstanceListPageProps {\n  readonly defaultState: ApprovalInstanceState | null;\n  readonly description: string;\n  readonly emptyMessage: string;\n  readonly searchPlaceholder: string;\n  readonly title: string;\n  readonly view: ApprovalInstanceView;\n}\n\ntype StateFilterOption = Readonly<{\n  id: 'ALL' | ApprovalInstanceState;\n  name: string;\n  state: ApprovalInstanceState | null;\n}>;\n\ntype ApprovalInstanceRow = Readonly<\n  Record<string, unknown> &\n    ApprovalInstanceRecord & {\n      caseTitle: string;\n      key: string;\n      stateLabel: string;\n    }\n>;\n\nconst INSTANCE_PAGE_SIZE_OPTIONS = [10, 20, 50];\nconst STATE_FILTER_OPTIONS: readonly StateFilterOption[] = [\n  { id: 'ALL', name: '全部狀態', state: null },\n  { id: 'RUNNING', name: '進行中', state: 'RUNNING' },\n  { id: 'APPROVED', name: '已通過', state: 'APPROVED' },\n  { id: 'REJECTED', name: '已拒絕', state: 'REJECTED' },\n  { id: 'RETURNED', name: '已退回', state: 'RETURNED' },\n  { id: 'CANCELLED', name: '已取消', state: 'CANCELLED' },\n  { id: 'EXPIRED', name: '已逾期', state: 'EXPIRED' },\n  { id: 'DRAFT', name: '草稿', state: 'DRAFT' },\n];\n\n/**\n * Shared list page for any approval-instance \"view\" (inbox / sent / cc /\n * delegated). Caller picks the view + default state filter; the page renders\n * the standard BPM filter bar + paginated table and navigates to\n * `/instances/:id` on row action.\n */\nexport function ApprovalInstanceListPage({\n  defaultState,\n  description,\n  emptyMessage,\n  searchPlaceholder,\n  title,\n  view,\n}: ApprovalInstanceListPageProps): ReactElement {\n  const router = useRouterAdapter();\n  const routes = useBPMRoutes();\n  const [error, setError] = useState<string | null>(null);\n  const [initiatorProfilesById, setInitiatorProfilesById] = useState<\n    ReadonlyMap<string, MemberProfileRecord>\n  >(new Map());\n  const [instancePage, setInstancePage] = useState(1);\n  const [instancePageSize, setInstancePageSize] = useState(10);\n  const [instanceTotalCount, setInstanceTotalCount] = useState(0);\n  const [loading, setLoading] = useState(true);\n  const [rows, setRows] = useState<readonly ApprovalInstanceRow[]>([]);\n  const [searchText, setSearchText] = useState('');\n  const [stateFilter, setStateFilter] = useState<StateFilterOption>(\n    readStateFilterOption(defaultState),\n  );\n\n  const refreshInstances = useCallback(async (): Promise<void> => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const result = await listApprovalInstancesPage({\n        page: instancePage,\n        pageSize: instancePageSize,\n        searchText,\n        state: stateFilter.state,\n        templateId: null,\n        view,\n      });\n\n      setRows(result.instances.map(readApprovalInstanceRow));\n      setInstanceTotalCount(result.totalCount);\n    } catch (requestError: unknown) {\n      setError(readErrorMessage(requestError));\n    } finally {\n      setLoading(false);\n    }\n  }, [instancePage, instancePageSize, searchText, stateFilter, view]);\n\n  useEffect((): void => {\n    void refreshInstances();\n  }, [refreshInstances]);\n\n  useEffect((): (() => void) | void => {\n    const initiatorMemberIds = Array.from(\n      new Set(rows.map((row) => row.initiatorMemberId).filter(Boolean)),\n    );\n\n    if (initiatorMemberIds.length === 0) {\n      setInitiatorProfilesById(new Map());\n\n      return;\n    }\n\n    let cancelled = false;\n\n    void (async (): Promise<void> => {\n      try {\n        const profiles = await resolveMembers(initiatorMemberIds);\n\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(\n          new Map(profiles.map((profile) => [profile.memberId, profile])),\n        );\n      } catch {\n        if (cancelled) {\n          return;\n        }\n\n        setInitiatorProfilesById(new Map());\n      }\n    })();\n\n    return (): void => {\n      cancelled = true;\n    };\n  }, [rows]);\n\n  const columns = useMemo(\n    (): TableColumn<ApprovalInstanceRow>[] => [\n      { dataIndex: 'caseTitle', key: 'caseTitle', title: '案件', width: 300 },\n      {\n        key: 'state',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography\n            color={readInstanceStateColor(record.state)}\n            component=\"span\"\n            variant=\"body\"\n          >\n            {record.stateLabel}\n          </Typography>\n        ),\n        title: '狀態',\n        width: 120,\n      },\n      {\n        key: 'initiatorMemberId',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {readInitiatorLabel(\n              record.initiatorMemberId,\n              initiatorProfilesById,\n            )}\n          </Typography>\n        ),\n        title: '發起人',\n        width: 180,\n      },\n      {\n        key: 'startedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.startedAt)}\n          </Typography>\n        ),\n        title: '發起時間',\n        width: 220,\n      },\n      {\n        key: 'completedAt',\n        render: (record: ApprovalInstanceRow): ReactElement => (\n          <Typography component=\"span\" variant=\"body\">\n            {formatDateTime(record.completedAt)}\n          </Typography>\n        ),\n        title: '完成時間',\n        width: 220,\n      },\n    ],\n    [initiatorProfilesById],\n  );\n  const tableActions = useMemo(\n    (): TableActions<ApprovalInstanceRow> => ({\n      render: (\n        record,\n      ): ReturnType<TableActions<ApprovalInstanceRow>['render']> => [\n        {\n          name: '查看',\n          onClick: (): void => router.push(routes.caseDetail(record.id)),\n        },\n      ],\n      variant: 'base-secondary',\n      width: 88,\n    }),\n    [router],\n  );\n\n  return (\n    <>\n      <PageHeader>\n        <ContentHeader description={description} title={title} />\n      </PageHeader>\n\n      <SectionGroup>\n        <Section\n          filterArea={\n            <FilterArea className={styles.instanceFilterArea} size=\"sub\">\n              <FilterLine>\n                <Filter span={3}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceSearchText\"\n                  >\n                    <Input\n                      fullWidth\n                      onChange={(\n                        event: ChangeEvent<HTMLInputElement>,\n                      ): void => {\n                        setSearchText(event.target.value);\n                        setInstancePage(1);\n                      }}\n                      placeholder={searchPlaceholder}\n                      size=\"sub\"\n                      value={searchText}\n                      variant=\"base\"\n                    />\n                  </FormField>\n                </Filter>\n                <Filter span={2}>\n                  <FormField\n                    fullWidth\n                    layout={FormFieldLayout.VERTICAL}\n                    name=\"instanceState\"\n                  >\n                    <Select\n                      clearable={false}\n                      fullWidth\n                      onChange={(option): void => {\n                        setStateFilter(readSelectedStateFilterOption(option));\n                        setInstancePage(1);\n                      }}\n                      options={[...STATE_FILTER_OPTIONS]}\n                      placeholder=\"狀態\"\n                      renderValue={(value): string =>\n                        `狀態：${readStateFilterLabel(value)}`\n                      }\n                      size=\"sub\"\n                      value={stateFilter}\n                    />\n                  </FormField>\n                </Filter>\n              </FilterLine>\n            </FilterArea>\n          }\n        >\n          {error ? (\n            <Typography color=\"text-error\" variant=\"body\">\n              {error}\n            </Typography>\n          ) : null}\n          {!error && !loading && rows.length === 0 ? (\n            <Typography color=\"text-neutral\" variant=\"body\">\n              {emptyMessage}\n            </Typography>\n          ) : null}\n          <Table\n            actions={tableActions}\n            columns={columns}\n            dataSource={[...rows]}\n            fullWidth\n            loading={loading}\n            pagination={{\n              current: instancePage,\n              onChange: (page): void => {\n                setInstancePage(page);\n              },\n              onChangePageSize: (pageSize): void => {\n                setInstancePage(1);\n                setInstancePageSize(pageSize);\n              },\n              pageSize: instancePageSize,\n              pageSizeLabel: '每頁筆數',\n              pageSizeOptions: INSTANCE_PAGE_SIZE_OPTIONS,\n              renderResultSummary: (from, to, total): string =>\n                `顯示 ${from}-${to} 筆，共 ${total} 筆`,\n              showPageSizeOptions: true,\n              total: instanceTotalCount,\n            }}\n          />\n        </Section>\n      </SectionGroup>\n    </>\n  );\n}\n\nfunction readApprovalInstanceRow(\n  instance: ApprovalInstanceRecord,\n): ApprovalInstanceRow {\n  return {\n    ...instance,\n    caseTitle: readApprovalInstanceCaseTitle(instance),\n    key: instance.id,\n    stateLabel: readInstanceStateLabel(instance.state),\n  };\n}\n\nfunction readSelectedStateFilterOption(option: unknown): StateFilterOption {\n  if (!isStateFilterOption(option)) {\n    return STATE_FILTER_OPTIONS[0];\n  }\n  return readStateFilterOption(option.state);\n}\n\nfunction readStateFilterOption(\n  state: ApprovalInstanceState | null,\n): StateFilterOption {\n  return (\n    STATE_FILTER_OPTIONS.find((option) => option.state === state) ??\n    STATE_FILTER_OPTIONS[0]\n  );\n}\n\nfunction readStateFilterLabel(value: unknown): string {\n  return isStateFilterOption(value) ? value.name : STATE_FILTER_OPTIONS[0].name;\n}\n\nfunction isStateFilterOption(value: unknown): value is StateFilterOption {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'id' in value &&\n    'name' in value &&\n    'state' in value\n  );\n}\n\nfunction readInstanceStateLabel(state: ApprovalInstanceState): string {\n  if (state === 'RUNNING') return '進行中';\n  if (state === 'APPROVED') return '已通過';\n  if (state === 'REJECTED') return '已拒絕';\n  if (state === 'RETURNED') return '已退回';\n  if (state === 'CANCELLED') return '已取消';\n  if (state === 'EXPIRED') return '已逾期';\n  return '草稿';\n}\n\nfunction readInstanceStateColor(\n  state: ApprovalInstanceState,\n): 'text-error' | 'text-neutral' | 'text-success' {\n  if (state === 'APPROVED') return 'text-success';\n  if (state === 'REJECTED' || state === 'CANCELLED' || state === 'EXPIRED') {\n    return 'text-error';\n  }\n  return 'text-neutral';\n}\n\nfunction readInitiatorLabel(\n  initiatorMemberId: string | null | undefined,\n  initiatorProfilesById: ReadonlyMap<string, MemberProfileRecord>,\n): string {\n  const trimmedMemberId = (initiatorMemberId ?? '').trim();\n  if (!trimmedMemberId) return '未知發起人';\n  return initiatorProfilesById.get(trimmedMemberId)?.name ?? trimmedMemberId;\n}\n\nfunction readErrorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : '讀取簽核案件失敗。';\n}\n"],"mappings":";;;;;;;;;;;gECyDM,IAA6B;CAAC;CAAI;CAAI;AAAE,GACxC,IAAqD;CACzD;EAAE,IAAI;EAAO,MAAM;EAAQ,OAAO;CAAK;CACvC;EAAE,IAAI;EAAW,MAAM;EAAO,OAAO;CAAU;CAC/C;EAAE,IAAI;EAAY,MAAM;EAAO,OAAO;CAAW;CACjD;EAAE,IAAI;EAAY,MAAM;EAAO,OAAO;CAAW;CACjD;EAAE,IAAI;EAAY,MAAM;EAAO,OAAO;CAAW;CACjD;EAAE,IAAI;EAAa,MAAM;EAAO,OAAO;CAAY;CACnD;EAAE,IAAI;EAAW,MAAM;EAAO,OAAO;CAAU;CAC/C;EAAE,IAAI;EAAS,MAAM;EAAM,OAAO;CAAQ;AAC5C;AAQA,SAAgB,EAAyB,EACvC,iBACA,gBACA,iBACA,sBACA,UACA,WAC8C;CAC9C,IAAM,IAAS,EAAiB,GAC1B,IAAS,EAAa,GACtB,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAuB,KAA4B,kBAExD,IAAI,IAAI,CAAC,GACL,CAAC,GAAc,KAAmB,EAAS,CAAC,GAC5C,CAAC,GAAkB,KAAuB,EAAS,EAAE,GACrD,CAAC,GAAoB,KAAyB,EAAS,CAAC,GACxD,CAAC,GAAS,KAAc,EAAS,EAAI,GACrC,CAAC,GAAM,MAAW,EAAyC,CAAC,CAAC,GAC7D,CAAC,GAAY,MAAiB,EAAS,EAAE,GACzC,CAAC,GAAa,KAAkB,EACpC,EAAsB,CAAY,CACpC,GAEM,IAAmB,EAAY,YAA2B;EAE9D,AADA,EAAW,EAAI,GACf,EAAS,IAAI;EAEb,IAAI;GACF,IAAM,IAAS,MAAM,EAA0B;IAC7C,MAAM;IACN,UAAU;IACV;IACA,OAAO,EAAY;IACnB,YAAY;IACZ;GACF,CAAC;GAGD,AADA,GAAQ,EAAO,UAAU,IAAI,EAAuB,CAAC,GACrD,EAAsB,EAAO,UAAU;EACzC,SAAS,GAAuB;GAC9B,EAAS,EAAiB,CAAY,CAAC;EACzC,UAAU;GACR,EAAW,EAAK;EAClB;CACF,GAAG;EAAC;EAAc;EAAkB;EAAY;EAAa;CAAI,CAAC;CAMlE,AAJA,QAAsB;EACpB,EAAsB;CACxB,GAAG,CAAC,CAAgB,CAAC,GAErB,QAAqC;EACnC,IAAM,IAAqB,MAAM,KAC/B,IAAI,IAAI,EAAK,KAAK,MAAQ,EAAI,iBAAiB,EAAE,OAAO,OAAO,CAAC,CAClE;EAEA,IAAI,EAAmB,WAAW,GAAG;GACnC,kBAAyB,IAAI,IAAI,CAAC;GAElC;EACF;EAEA,IAAI,IAAY;EAsBhB,QApBM,YAA2B;GAC/B,IAAI;IACF,IAAM,IAAW,MAAM,EAAe,CAAkB;IAExD,IAAI,GACF;IAGF,EACE,IAAI,IAAI,EAAS,KAAK,MAAY,CAAC,EAAQ,UAAU,CAAO,CAAC,CAAC,CAChE;GACF,QAAQ;IACN,IAAI,GACF;IAGF,kBAAyB,IAAI,IAAI,CAAC;GACpC;EACF,GAAG,SAEgB;GACjB,IAAY;EACd;CACF,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,KAAU,QAC4B;EACxC;GAAE,WAAW;GAAa,KAAK;GAAa,OAAO;GAAM,OAAO;EAAI;EACpE;GACE,KAAK;GACL,SAAS,MACP,kBAAC,GAAD;IACE,OAAO,EAAuB,EAAO,KAAK;IAC1C,WAAU;IACV,SAAQ;cAEP,EAAO;GACE,CAAA;GAEd,OAAO;GACP,OAAO;EACT;EACA;GACE,KAAK;GACL,SAAS,MACP,kBAAC,GAAD;IAAY,WAAU;IAAO,SAAQ;cAClC,EACC,EAAO,mBACP,CACF;GACU,CAAA;GAEd,OAAO;GACP,OAAO;EACT;EACA;GACE,KAAK;GACL,SAAS,MACP,kBAAC,GAAD;IAAY,WAAU;IAAO,SAAQ;cAClC,EAAe,EAAO,SAAS;GACtB,CAAA;GAEd,OAAO;GACP,OAAO;EACT;EACA;GACE,KAAK;GACL,SAAS,MACP,kBAAC,GAAD;IAAY,WAAU;IAAO,SAAQ;cAClC,EAAe,EAAO,WAAW;GACxB,CAAA;GAEd,OAAO;GACP,OAAO;EACT;CACF,GACA,CAAC,CAAqB,CACxB,GACM,KAAe,SACuB;EACxC,SACE,MAC4D,CAC5D;GACE,MAAM;GACN,eAAqB,EAAO,KAAK,EAAO,WAAW,EAAO,EAAE,CAAC;EAC/D,CACF;EACA,SAAS;EACT,OAAO;CACT,IACA,CAAC,CAAM,CACT;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAA4B;EAAoB;CAAQ,CAAA,EAC9C,CAAA,GAEZ,kBAAC,IAAD,EAAA,UACE,kBAAC,IAAD;EACE,YACE,kBAAC,GAAD;GAAY,WAAW,EAAO;GAAoB,MAAK;aACrD,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAQ,MAAM;cACZ,kBAAC,GAAD;KACE,WAAA;KACA,QAAQ,EAAgB;KACxB,MAAK;eAEL,kBAAC,GAAD;MACE,WAAA;MACA,WACE,MACS;OAET,AADA,GAAc,EAAM,OAAO,KAAK,GAChC,EAAgB,CAAC;MACnB;MACA,aAAa;MACb,MAAK;MACL,OAAO;MACP,SAAQ;KACT,CAAA;IACQ,CAAA;GACL,CAAA,GACR,kBAAC,GAAD;IAAQ,MAAM;cACZ,kBAAC,GAAD;KACE,WAAA;KACA,QAAQ,EAAgB;KACxB,MAAK;eAEL,kBAAC,IAAD;MACE,WAAW;MACX,WAAA;MACA,WAAW,MAAiB;OAE1B,AADA,EAAe,GAA8B,CAAM,CAAC,GACpD,EAAgB,CAAC;MACnB;MACA,SAAS,CAAC,GAAG,CAAoB;MACjC,aAAY;MACZ,cAAc,MACZ,MAAM,GAAqB,CAAK;MAElC,MAAK;MACL,OAAO;KACR,CAAA;IACQ,CAAA;GACL,CAAA,CACE,EAAA,CAAA;EACF,CAAA;YAjDhB;GAoDG,IACC,kBAAC,GAAD;IAAY,OAAM;IAAa,SAAQ;cACpC;GACS,CAAA,IACV;GACH,CAAC,KAAS,CAAC,KAAW,EAAK,WAAW,IACrC,kBAAC,GAAD;IAAY,OAAM;IAAe,SAAQ;cACtC;GACS,CAAA,IACV;GACJ,kBAAC,GAAD;IACE,SAAS;IACA;IACT,YAAY,CAAC,GAAG,CAAI;IACpB,WAAA;IACS;IACT,YAAY;KACV,SAAS;KACT,WAAW,MAAe;MACxB,EAAgB,CAAI;KACtB;KACA,mBAAmB,MAAmB;MAEpC,AADA,EAAgB,CAAC,GACjB,EAAoB,CAAQ;KAC9B;KACA,UAAU;KACV,eAAe;KACf,iBAAiB;KACjB,sBAAsB,GAAM,GAAI,MAC9B,MAAM,EAAK,GAAG,EAAG,OAAO,EAAM;KAChC,qBAAqB;KACrB,OAAO;IACT;GACD,CAAA;EACM;IACG,CAAA,CACd,EAAA,CAAA;AAEN;AAEA,SAAS,GACP,GACqB;CACrB,OAAO;EACL,GAAG;EACH,WAAW,EAA8B,CAAQ;EACjD,KAAK,EAAS;EACd,YAAY,EAAuB,EAAS,KAAK;CACnD;AACF;AAEA,SAAS,GAA8B,GAAoC;CAIzE,OAHK,EAAoB,CAAM,IAGxB,EAAsB,EAAO,KAAK,IAFhC,EAAqB;AAGhC;AAEA,SAAS,EACP,GACmB;CACnB,OACE,EAAqB,MAAM,MAAW,EAAO,UAAU,CAAK,KAC5D,EAAqB;AAEzB;AAEA,SAAS,GAAqB,GAAwB;CACpD,OAAO,EAAoB,CAAK,IAAI,EAAM,OAAO,EAAqB,GAAG;AAC3E;AAEA,SAAS,EAAoB,GAA4C;CACvE,OACE,OAAO,KAAU,cACjB,KACA,QAAQ,KACR,UAAU,KACV,WAAW;AAEf;AAEA,SAAS,EAAuB,GAAsC;CAOpE,OANI,MAAU,YAAkB,QAC5B,MAAU,aAAmB,QAC7B,MAAU,aAAmB,QAC7B,MAAU,aAAmB,QAC7B,MAAU,cAAoB,QAC9B,MAAU,YAAkB,QACzB;AACT;AAEA,SAAS,EACP,GACgD;CAKhD,OAJI,MAAU,aAAmB,iBAC7B,MAAU,cAAc,MAAU,eAAe,MAAU,YACtD,eAEF;AACT;AAEA,SAAS,EACP,GACA,GACQ;CACR,IAAM,KAAmB,KAAqB,IAAI,KAAK;CAEvD,OADK,IACE,EAAsB,IAAI,CAAe,GAAG,QAAQ,IAD9B;AAE/B;AAEA,SAAS,EAAiB,GAAwB;CAChD,OAAO,aAAiB,QAAQ,EAAM,UAAU;AAClD"}