@skopon-cool/form-sdk 0.6.3 → 0.6.5

package/src/catalog/a2uiCustomCatalog.tsx

@@ -8,10 +8,12 @@ import {
 } from '@a2ui/react/v0_9'
 import {
   Checkbox,
+  Button,
   DatePicker,
   Input,
   InputNumber,
   Image,
+  Modal,
   Radio,
   Select,
   Switch,
@@ -30,17 +32,16 @@ import {
 } from '../adapter/formFileAccept'
 import { buildMediaListClassName, normalizeMediaSize } from '../adapter/formMedia'
 import { normalizeFormOptions } from '../adapter/formOptions'
+import { normalizeAssetOptions } from '../adapter/formAssetOptions'
 import {
   getRegisteredCatalogComponentNames,
   getRegisteredCatalogComponents,
 } from '../blocks/registry'
 import FilePlaceholderIcon from '../icons/FilePlaceholderIcon'
-import {
-  isUploadCancelledError,
-  uploadFileToCdn,
-} from '../client/uploadClient'
+import { isUploadCancelledError } from '../client/uploadClient'
 import { useA2uiPreviewMode } from './a2uiPreviewContext'
 import { useFileUploadStatus } from './fileUploadStatusContext'
+import { useMaterialUpload } from './materialUploadContext'
 import {
   asOptionalString,
   asStringArray,
@@ -57,6 +58,7 @@ export const SKOPON_CATALOG_ID = 'skopon-form-v0_9'
 const SKOPON_COMPONENT_NAMES = new Set([
   'SkoponMedia',
   'SkoponSelect',
+  'SkoponModulePanel',
   'Image',
   'Video',
   'AudioPlayer',
@@ -280,6 +282,58 @@ const SkoponSelectImpl = createBinderlessComponentImplementation(
   SkoponSelectPreview,
 )
 
+const SkoponModulePanelImpl = createBinderlessComponentImplementation(
+  {
+    name: 'SkoponModulePanel',
+    schema: z.object({
+      children: z.array(z.string()).optional(),
+      description: z.any().optional(),
+      reviewCriteria: z.any().optional(),
+      exampleUrls: z.any().optional(),
+    }).passthrough(),
+  },
+  ({ context, buildChild }) => {
+    const props = context.componentModel.properties as Record<string, unknown>
+    const children = Array.isArray(props.children) ? props.children.map(String) : []
+    const description = readString(props.description).trim()
+    const requirementsTitle = readString(props.requirementsTitle).trim() || '本类素材要求'
+    const reviewCriteria = readString(props.reviewCriteria).trim()
+    const exampleUrls = Array.isArray(props.exampleUrls)
+      ? props.exampleUrls.map(String).map((url) => url.trim()).filter(Boolean)
+      : []
+    return (
+      <section className="skopon-module-panel">
+        {description ? <Typography.Paragraph type="secondary" className="skopon-module-panel__description">{description}</Typography.Paragraph> : null}
+        <div className="skopon-module-panel__grid">
+          {children.map((id) => <div className="skopon-module-panel__field" key={id}>{buildChild(id)}</div>)}
+        </div>
+        {reviewCriteria || exampleUrls.length > 0 ? (
+          <aside className="skopon-module-panel__guide">
+            {reviewCriteria ? (
+              <div className="skopon-module-panel__requirements">
+                <Typography.Text strong>{requirementsTitle}</Typography.Text>
+                <Typography.Paragraph type="secondary">{reviewCriteria}</Typography.Paragraph>
+              </div>
+            ) : null}
+            {exampleUrls.length > 0 ? (
+              <div className="skopon-module-panel__examples">
+                <Typography.Text strong>参考示例</Typography.Text>
+                <div className="skopon-module-panel__example-list">
+                  <Image.PreviewGroup>
+                    {exampleUrls.map((url, index) => (
+                      <Image key={`${url}-${index}`} src={url} alt={`参考示例 ${index + 1}`} width={88} height={88} style={{ objectFit: 'cover' }} />
+                    ))}
+                  </Image.PreviewGroup>
+                </div>
+              </div>
+            ) : null}
+          </aside>
+        ) : null}
+      </section>
+    )
+  },
+)
+
 function ChoicePickerPreview({ context }: { context: ComponentContext }) {
   const { interactive } = useA2uiPreviewMode()
   const { value, setValue, setValueSilent, fieldName } = useSkoponBoundField(context, 'value', {
@@ -517,11 +571,34 @@ interface FileUploadListItem {
   name: string
   status: 'uploading' | 'done' | 'error'
   url?: string
+  assetId?: string
+  source?: 'upload' | 'library_select'
   error?: string
 }
 
-function normalizeFileUrls(value: unknown): string[] {
-  return asStringArray(value).map((url) => url.trim()).filter(Boolean)
+interface FileValueRef {
+  assetId?: string
+  source?: 'upload' | 'library_select'
+  url?: string
+}
+
+function normalizeFileValues(value: unknown): FileValueRef[] {
+  const values = Array.isArray(value) ? value : value == null || value === '' ? [] : [value]
+  return values.reduce<FileValueRef[]>((result, entry) => {
+    if (typeof entry === 'string' && entry.trim()) {
+      result.push({ url: entry.trim() })
+      return result
+    }
+    if (!entry || typeof entry !== 'object' || Array.isArray(entry)) return result
+    const obj = entry as Record<string, unknown>
+    const assetId = String(obj.asset_id ?? obj.assetId ?? '').trim()
+    if (!assetId) return result
+    result.push({
+      assetId,
+      source: obj.source === 'library_select' ? 'library_select' as const : 'upload' as const,
+    })
+    return result
+  }, [])
 }
 
 function fileNameFromUrl(url: string): string {
@@ -541,15 +618,25 @@ function fileItemFromUrl(url: string, uid: string): FileUploadListItem {
 function FileUploadPreview({ context }: { context: ComponentContext }) {
   const { interactive } = useA2uiPreviewMode()
   const { beginUpload } = useFileUploadStatus()
+  const uploadMaterial = useMaterialUpload()
   const { value, setValue, setValueSilent, fieldName } = useSkoponBoundField(context, 'value', {
     component: 'FileUpload',
     changeAction: 'change',
   })
   const props = context.componentModel.properties as Record<string, unknown>
+  const sourceMode = props.fileSourceMode === 'asset_only' || props.fileSourceMode === 'upload_or_asset' ? props.fileSourceMode : 'upload_required'
+  const assetOptions = normalizeAssetOptions(props.fileAssetOptions)
+  const [assetPickerOpen, setAssetPickerOpen] = useState(false)
   const label = readString(props.label)
   const accept = readString(props.accept)
   const help = readString(props.help)
   const reviewCriteria = readString(props.fileReviewCriteria)
+  const reviewStatus = props.fileReviewStatus === 'passed' || props.fileReviewStatus === 'failed'
+    ? props.fileReviewStatus
+    : undefined
+  const reviewMessage = readString(props.fileReviewMessage)
+  const rejectedUrls = asStringArray(props.fileRejectedUrls)
+    .filter((url) => /^https?:\/\//i.test(url))
   const exampleUrls = asStringArray(props.fileExampleUrls)
     .filter((url) => /^https?:\/\//i.test(url))
   const fileAcceptTypes = Array.isArray(props.fileAcceptTypes)
@@ -566,34 +653,58 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
     )
       ? (props.filePlaceholderIcon as FormFilePlaceholderIcon)
       : 'document'
+  const compact = props.compact === true
   const minCount = typeof props.minCount === 'number' ? Math.max(0, props.minCount) : 0
   const maxCount = typeof props.maxCount === 'number' ? props.maxCount : 1
   const hasMaxLimit = maxCount > 0
-  const initialUrls = normalizeFileUrls(value)
+  const sourceLabel = sourceMode === 'asset_only'
+    ? '素材 · 仅选择'
+    : sourceMode === 'upload_or_asset'
+      ? '物料或素材'
+      : '物料 · 仅上传'
+  const initialValues = normalizeFileValues(value)
   const externalUidRef = useRef(0)
   const mountedRef = useRef(true)
   const controllersRef = useRef(new Map<string, AbortController>())
   const setValueRef = useRef(setValue)
   setValueRef.current = setValue
-  const [items, setItems] = useState<FileUploadListItem[]>(() =>
-    initialUrls.map((url) => fileItemFromUrl(url, `external-${externalUidRef.current++}`)),
-  )
+  const [items, setItems] = useState<FileUploadListItem[]>(() => [
+    ...initialValues.map((entry) => {
+      if (entry.url) return fileItemFromUrl(entry.url, `external-${externalUidRef.current++}`)
+      const option = assetOptions.find((item) => item.assetId === entry.assetId)
+      return {
+        uid: `asset-${entry.assetId}-${externalUidRef.current++}`,
+        name: option?.label || `素材 ${entry.assetId}`,
+        status: 'done' as const,
+        url: option?.previewUrl || option?.url,
+        assetId: entry.assetId,
+        source: entry.source,
+      }
+    }),
+    ...rejectedUrls.map((url) => ({
+      ...fileItemFromUrl(url, `rejected-${externalUidRef.current++}`),
+      status: 'error' as const,
+      error: reviewMessage || '审核不合格，请重新上传',
+    })),
+  ])
   const itemsRef = useRef(items)
   itemsRef.current = items
 
   const commitItems = useCallback(
     (
       updater: (current: FileUploadListItem[]) => FileUploadListItem[],
-      writeUrls: boolean,
+      writeValues: boolean,
     ) => {
       const next = updater(itemsRef.current)
       itemsRef.current = next
       if (mountedRef.current) setItems(next)
-      if (writeUrls) {
+      if (writeValues) {
         setValueRef.current(
           next
-            .filter((item) => item.status === 'done' && item.url)
-            .map((item) => item.url as string),
+            .filter((item) => item.status === 'done' && (item.assetId || item.url))
+            .map((item) => item.assetId
+              ? { asset_id: item.assetId, source: item.source || 'upload' }
+              : item.url as string),
         )
       }
       return next
@@ -611,27 +722,34 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
   }, [])
 
   useEffect(() => {
-    const urls = normalizeFileUrls(value)
-    const rawIsNormalizedArray =
-      Array.isArray(value) &&
-      value.length === urls.length &&
-      value.every((entry, index) => typeof entry === 'string' && entry === urls[index])
-    if (!rawIsNormalizedArray) setValueSilent(urls)
-
-    const consumed = new Set<number>()
+    const normalized = normalizeFileValues(value)
+    if (!Array.isArray(value)) {
+      setValueSilent(normalized.map((entry) => entry.assetId
+        ? { asset_id: entry.assetId, source: entry.source || 'upload' }
+        : entry.url))
+    }
+    const expected = new Set(normalized.map((entry) => entry.assetId ? `asset:${entry.assetId}` : `url:${entry.url}`))
     commitItems(
       (current) => {
-        const next = current.filter((item) => {
-          if (item.status !== 'done' || !item.url) return true
-          const index = urls.findIndex((url, i) => !consumed.has(i) && url === item.url)
-          if (index < 0) return false
-          consumed.add(index)
-          return true
-        })
-        urls.forEach((url, index) => {
-          if (!consumed.has(index)) {
-            next.push(fileItemFromUrl(url, `external-${externalUidRef.current++}`))
+        const next = current.filter((item) =>
+          item.status !== 'done' || expected.has(item.assetId ? `asset:${item.assetId}` : `url:${item.url}`))
+        const present = new Set(next.map((item) => item.assetId ? `asset:${item.assetId}` : `url:${item.url}`))
+        normalized.forEach((entry) => {
+          const key = entry.assetId ? `asset:${entry.assetId}` : `url:${entry.url}`
+          if (present.has(key)) return
+          if (entry.url) {
+            next.push(fileItemFromUrl(entry.url, `external-${externalUidRef.current++}`))
+            return
           }
+          const option = assetOptions.find((item) => item.assetId === entry.assetId)
+          next.push({
+            uid: `asset-${entry.assetId}-${externalUidRef.current++}`,
+            name: option?.label || `素材 ${entry.assetId}`,
+            status: 'done',
+            url: option?.previewUrl || option?.url,
+            assetId: entry.assetId,
+            source: entry.source,
+          })
         })
         return next
       },
@@ -641,26 +759,44 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
 
   const startUpload = useCallback(
     (file: File & { uid?: string }) => {
-      if (!interactive) return
-      if (hasMaxLimit && itemsRef.current.length >= maxCount) return
+      if (!interactive || sourceMode === 'asset_only') return
+      const activeCount = itemsRef.current.filter((item) => item.status !== 'error').length
+      if (hasMaxLimit && activeCount >= maxCount) return
 
       const uid = `${file.uid ?? 'file'}-${externalUidRef.current++}`
       const controller = new AbortController()
       controllersRef.current.set(uid, controller)
       commitItems(
-        (current) => [...current, { uid, name: file.name, status: 'uploading' }],
+        (current) => [...current.filter((item) => item.status !== 'error'), { uid, name: file.name, status: 'uploading' }],
         false,
       )
       const endUpload = beginUpload()
 
-      void uploadFileToCdn(file, { signal: controller.signal })
+      const upload = uploadMaterial
+        ? uploadMaterial(file, {
+            fieldName,
+            moduleId: readString(props.moduleId) || undefined,
+            positionKey: fieldName || undefined,
+            assetSlotKey: readString(props.assetSlotKey) || undefined,
+            assetType: readString(props.assetType) || undefined,
+          }, { signal: controller.signal })
+        : Promise.reject(new Error('当前宿主未配置私有物料上传，请联系管理员'))
+      void upload
         .then((result) => {
           if (!mountedRef.current || controller.signal.aborted) return
           commitItems(
             (current) =>
               current.map((item) =>
                 item.uid === uid
-                  ? { ...item, status: 'done', url: result.url, error: undefined }
+                  ? {
+                      ...item,
+                      status: 'done',
+                      name: result.name || item.name,
+                      url: result.previewUrl,
+                      assetId: result.assetId || undefined,
+                      source: result.assetId ? 'upload' : undefined,
+                      error: undefined,
+                    }
                   : item,
               ),
             true,
@@ -682,7 +818,7 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
           endUpload()
         })
     },
-    [beginUpload, commitItems, hasMaxLimit, interactive, maxCount],
+    [beginUpload, commitItems, fieldName, hasMaxLimit, interactive, maxCount, props, sourceMode, uploadMaterial],
   )
 
   const handleRemove = useCallback(
@@ -695,7 +831,7 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
   )
 
   const uploadedCount = items.filter((item) => item.status === 'done').length
-  const atMaxLimit = hasMaxLimit && items.length >= maxCount
+  const atMaxLimit = hasMaxLimit && items.filter((item) => item.status !== 'error').length >= maxCount
   const belowMinCount = uploadedCount < minCount
   const latestError = [...items].reverse().find((item) => item.error)?.error
   const fileList: UploadFile[] = items.map((item) => ({
@@ -705,12 +841,117 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
     url: item.url,
     response: item.error,
   }))
+  const assetPicker = <Modal title={`选择推荐素材 · ${label || '素材位置'}`} open={assetPickerOpen} footer={null} width={860} onCancel={() => setAssetPickerOpen(false)}>
+    {assetOptions.length ? <div className="skopon-asset-picker">
+      {assetOptions.map((asset) => {
+        const isImage = asset.assetType === 'image' || Boolean(asset.previewUrl && asset.previewUrl !== asset.url)
+        const chooseAsset = () => {
+          if (!interactive || reviewStatus === 'passed') return
+          if (hasMaxLimit && maxCount > 1 && atMaxLimit) return
+          if (maxCount === 1) {
+            for (const controller of controllersRef.current.values()) controller.abort()
+            controllersRef.current.clear()
+          }
+          commitItems((current) => {
+            const retained = maxCount === 1 ? [] : current.filter((item) => item.status !== 'error' && item.url !== asset.url)
+            return [...retained, {
+              uid: `asset-${asset.assetId}-${externalUidRef.current++}`,
+              name: asset.label,
+              status: 'done',
+              url: asset.previewUrl || asset.url,
+              assetId: asset.assetId,
+              source: 'library_select',
+            }]
+          }, true)
+          setAssetPickerOpen(false)
+        }
+        return <article key={asset.assetId} className="skopon-asset-picker__card">
+          <div className="skopon-asset-picker__media">
+            {isImage
+              ? <Image src={asset.previewUrl || asset.url} alt={asset.label} preview={{ mask: '放大预览' }} />
+              : <div className="skopon-asset-picker__placeholder"><FilePlaceholderIcon type={asset.assetType === 'video' ? 'video' : asset.assetType === 'audio' ? 'audio' : 'document'} size={36} /></div>}
+          </div>
+          <Typography.Text className="skopon-asset-picker__name" title={asset.label}>{asset.label}</Typography.Text>
+          <Button type="primary" size="small" block aria-label={`选择素材 ${asset.label}`} disabled={!interactive || reviewStatus === 'passed' || (hasMaxLimit && maxCount > 1 && atMaxLimit)} onClick={chooseAsset}>使用此素材</Button>
+        </article>
+      })}
+    </div> : <Typography.Paragraph type="secondary">此位置暂无可选素材，请先在素材库为该位置打标。</Typography.Paragraph>}
+  </Modal>
+
+  if (compact) {
+    const displayItem = items.find((item) => item.status === 'error') ?? items[0]
+    const displayUrl = displayItem?.url
+    const isImage = fileAcceptTypes?.includes('image/*') ?? placeholderIcon === 'image'
+    const state = reviewStatus === 'passed'
+      ? 'passed'
+      : reviewStatus === 'failed'
+        ? 'failed'
+        : displayItem?.status === 'uploading'
+          ? 'uploading'
+          : displayItem?.status === 'done'
+            ? 'pending'
+            : 'empty'
+    const stateText = state === 'passed'
+      ? '审核通过'
+      : state === 'failed'
+        ? (reviewMessage || '审核不合格，请替换')
+        : state === 'uploading'
+          ? '正在上传…'
+          : state === 'pending'
+            ? '等待审核'
+          : `${acceptSummary ?? '文件'}${maxCount > 1 ? `，最多 ${maxCount} 个` : ''}`
+    const canChoose = interactive && state !== 'passed' && state !== 'uploading'
+
+    return (
+      <><article className={`skopon-compact-upload skopon-compact-upload--${state}`} data-skopon-field={fieldName || undefined}>
+        <div className="skopon-compact-upload__thumb">
+          {displayUrl && isImage ? (
+            <img src={displayUrl} alt={label || '已上传素材'} />
+          ) : (
+            <FilePlaceholderIcon type={placeholderIcon} size={30} />
+          )}
+          {state !== 'empty' ? <span className="skopon-compact-upload__state-mark" aria-hidden>
+            {state === 'passed' ? '✓' : state === 'failed' ? '!' : state === 'uploading' ? '…' : '•'}
+          </span> : null}
+        </div>
+        <div className="skopon-compact-upload__meta">
+          <strong>{label || '上传素材'}</strong>
+          <span className={`skopon-compact-upload__source skopon-compact-upload__source--${sourceMode}`}>{sourceLabel}</span>
+          <span className="skopon-compact-upload__status">{stateText}</span>
+          <div className="skopon-file-source-actions">
+          {canChoose && sourceMode !== 'asset_only' ? (
+            <Upload
+              accept={buildFileAcceptAttribute(fileAcceptTypes, fileAcceptExtensions)}
+              multiple={!hasMaxLimit || maxCount > 1}
+              showUploadList={false}
+              beforeUpload={(file) => {
+                if (displayItem?.status === 'done') handleRemove(displayItem.uid)
+                startUpload(file)
+                return Upload.LIST_IGNORE
+              }}
+            >
+              <Button size="small">上传</Button>
+            </Upload>
+          ) : null}
+          {canChoose && sourceMode !== 'upload_required' ? <Button size="small" onClick={() => setAssetPickerOpen(true)}>选择素材</Button> : null}
+          </div>
+          {latestError && state !== 'failed' ? <span className="skopon-compact-upload__error">{latestError}</span> : null}
+        </div>
+      </article>{assetPicker}</>
+    )
+  }
 
   return (
     <div className="form-block-preview" data-skopon-field={fieldName || undefined}>
       {label ? <div className="form-block-preview-label">{label}</div> : null}
-      {help ? <Typography.Paragraph type="secondary">{help}</Typography.Paragraph> : null}
-      {reviewCriteria ? <Typography.Paragraph type="secondary">素材要求：{reviewCriteria}</Typography.Paragraph> : null}
+      {reviewStatus === 'passed' ? (
+        <Typography.Paragraph style={{ color: '#389e0d', marginBottom: 8 }}>✅ 审核通过，已保留，无需重新上传</Typography.Paragraph>
+      ) : null}
+      {reviewStatus === 'failed' ? (
+        <Typography.Paragraph type="danger" style={{ marginBottom: 8 }}>❌ 审核不合格：{reviewMessage || '请重新上传'}</Typography.Paragraph>
+      ) : null}
+      {help ? <Typography.Paragraph type="secondary" style={{ whiteSpace: 'pre-line' }}>{help}</Typography.Paragraph> : null}
+      {reviewCriteria ? <Typography.Paragraph type="secondary" style={{ whiteSpace: 'pre-line' }}>素材要求：{reviewCriteria}</Typography.Paragraph> : null}
       {exampleUrls.length ? (
         <div className="form-file-examples">
           <Typography.Text type="secondary">参考示例（不作为上传素材提交）</Typography.Text>
@@ -723,13 +964,15 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
           </div>
         </div>
       ) : null}
+      {sourceMode !== 'upload_required' ? <div className="skopon-file-source-actions"><Button disabled={!interactive || reviewStatus === 'passed'} onClick={() => setAssetPickerOpen(true)}>选择素材</Button></div> : null}
+      {sourceMode !== 'asset_only' ?
       <Upload.Dragger
-        disabled={!interactive}
-        openFileDialogOnClick={!atMaxLimit}
+        disabled={!interactive || reviewStatus === 'passed'}
+        openFileDialogOnClick={reviewStatus !== 'passed' && !atMaxLimit}
         accept={buildFileAcceptAttribute(fileAcceptTypes, fileAcceptExtensions)}
         className="form-file-upload-preview"
         multiple={!hasMaxLimit || maxCount > 1}
-        showUploadList={interactive && items.length > 0}
+        showUploadList={interactive && items.length > 0 ? { showRemoveIcon: reviewStatus !== 'passed' } : false}
         fileList={interactive ? fileList : []}
         beforeUpload={(file) => {
           if (!interactive) return Upload.LIST_IGNORE
@@ -737,6 +980,7 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
           return Upload.LIST_IGNORE
         }}
         onRemove={(file) => {
+          if (reviewStatus === 'passed') return false
           handleRemove(file.uid)
           return true
         }}
@@ -746,11 +990,15 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
         </p>
         <p className="form-file-upload-preview-text">点击或拖拽文件到此处上传</p>
       </Upload.Dragger>
+      : <div className="skopon-selected-assets">{items.map((item) => <div key={item.uid} className="skopon-selected-assets__row">
+        {item.url ? <a href={item.url} target="_blank" rel="noreferrer">{item.name}</a> : <span>{item.name}</span>}
+        {interactive && reviewStatus !== 'passed' ? <Button size="small" type="text" onClick={() => handleRemove(item.uid)}>移除</Button> : null}
+      </div>)}</div>}
       <Typography.Text type="secondary" className="form-block-preview-help">
         允许：{acceptSummary ?? '全部类型'}
         {minCount > 0 ? `；至少 ${minCount} 个文件` : ''}
-        {hasMaxLimit ? `；最多 ${maxCount} 个文件` : ''}
-        ；选择后自动上传至 CDN
+        {maxCount > 1 ? `；最多 ${maxCount} 个文件` : ''}
+        {sourceMode === 'asset_only' ? '；从推荐素材中选择' : '；选择文件后自动上传至 CDN'}
         {belowMinCount && interactive ? `（当前 ${uploadedCount} 个，未达下限）` : ''}
       </Typography.Text>
       {latestError ? (
@@ -758,6 +1006,7 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
           {latestError}
         </Typography.Text>
       ) : null}
+      {assetPicker}
     </div>
   )
 }
@@ -925,6 +1174,7 @@ export function buildSkoponCatalog(): Catalog<ReactComponentImplementation> {
     ...baseComponents,
     SkoponMediaImpl,
     SkoponSelectImpl,
+    SkoponModulePanelImpl,
     ImageImpl,
     VideoImpl,
     AudioPlayerImpl,