{readOnly || !onLabelChange ? ( {label} ) : ( onLabelChange(event.target.value)} /> )} {onRemove && !readOnly && ( )}

{readOnly || !onValueChange ? (

{value || valuePlaceholder || '-'}

) : multiline ? (

onValueChange(event.target.value)}
        />
      ) : (
        <input
          aria-label={`${label} value`}
          value={value}
          placeholder={valuePlaceholder}
          className={controlClassName}
          onChange={(event) => onValueChange(event.target.value)}
        />
      )}
    </div>
  )
}

export function EditableMetadataEntry({
  entryKey,
  onCommit,
  onRemove,
  value,
}: {
  entryKey: string
  onCommit: (previousKey: string, nextKey: string, value: string) => void
  onRemove: () => void
  value: string
}) {
  const [keyDraft, setKeyDraft] = useState(entryKey)
  const [valueDraft, setValueDraft] = useState(value)

const commit = () => {
    const nextKey = keyDraft.trim()
    if (!nextKey) {
      setKeyDraft(entryKey)
      return
    }
    if (nextKey === entryKey && valueDraft === value) return
    onCommit(entryKey, nextKey, valueDraft)
  }

return (
    <EditableMetadataField
      label={keyDraft}
      value={valueDraft}
      multiline
      onLabelChange={setKeyDraft}
      onRemove={onRemove}
      onValueChange={setValueDraft}
      valuePlaceholder="Value"
      onBlurCapture={(event) => {
        if (event.currentTarget.contains(event.relatedTarget as Node | null)) return
        commit()
      }}
    />
  )
}

export function MarkdownSourceEditor({
  editorRef,
  onChange,
  onKeyDown,
  placeholder,
  readOnly,
  value,
}: {
  editorRef: RefObject<HTMLTextAreaElement | null>
  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void
  onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void
  placeholder: string
  readOnly: boolean
  value: string
}) {
  const [focused, setFocused] = useState(false)
  const [selectionOffset, setSelectionOffset] = useState(0)
  const [scrollTop, setScrollTop] = useState(0)
  const lineCount = Math.max(value.split('\n').length, 48)
  const currentLine = getCurrentLine(value, selectionOffset)
  const showPlaceholder = focused && currentLine.blank

const syncSelection = (target: HTMLTextAreaElement) => {
    setSelectionOffset(target.selectionStart)
  }

return (
    <div className="relative h-full overflow-hidden bg-background-default">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-y-0 left-0 w-10 overflow-hidden bg-background-default pt-1.5 text-right font-mono text-[13px]/[22px] text-text-quaternary"
      >
        <div style={{ transform: `translateY(${-scrollTop}px)` }}>
          {Array.from({ length: lineCount }, (_, index) => (
            <div key={index} className="h-[22px] pr-2">
              {String(index + 1).padStart(2, '0')}
            </div>
          ))}
        </div>
      </div>
      <textarea
        ref={editorRef}
        readOnly={readOnly}
        value={value}
        wrap="off"
        spellCheck={false}
        className={cn(
          'h-full w-full resize-none bg-transparent py-1.5 pr-20 pl-10 text-[14px]/[22px] text-text-primary outline-hidden read-only:text-text-secondary',
          styles.sourceTextarea,
        )}
        onBlur={() => setFocused(false)}
        onChange={(event) => {
          syncSelection(event.currentTarget)
          onChange(event)
        }}
        onClick={(event) => syncSelection(event.currentTarget)}
        onFocus={(event) => {
          setFocused(true)
          syncSelection(event.currentTarget)
        }}
        onKeyDown={onKeyDown}
        onKeyUp={(event) => syncSelection(event.currentTarget)}
        onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}
        onSelect={(event) => syncSelection(event.currentTarget)}
      />
      {showPlaceholder && (
        <EditorPlaceholder
          text={placeholder}
          className="absolute left-10 text-[14px]/[22px]"
          style={{ top: 6 + currentLine.lineIndex * 22 - scrollTop }}
        />
      )}
    </div>
  )
}

export function MarkdownBodyReferencePreview({
  body,
  className,
  onOpenReference,
  placeholder,
}: {
  body: string
  className?: string
  onOpenReference?: (path: string) => void
  placeholder: string
}) {
  const customComponents = useSkillMarkdownComponents(onOpenReference)

if (!body) {
    return (
      <div className={cn('text-[15px]/7 whitespace-pre-wrap text-text-quaternary', className)}>
        {placeholder}
      </div>
    )
  }

return (
    <Markdown
      content={body}
      customComponents={customComponents}
      remarkPlugins={SKILL_REFERENCE_REMARK_PLUGINS}
      className={cn('text-[15px]/7 text-text-secondary', className)}
    />
  )
}

export function MarkdownLiveBodyEditor({
  body,
  contentRevision,
  editorRef,
  onInput,
  onKeyDown,
  onOpenReference,
  placeholder,
}: {
  body: string
  contentRevision: number
  editorRef: RefObject<HTMLDivElement | null>
  onInput: (event: FormEvent<HTMLDivElement>) => void
  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
  onOpenReference: (path: string) => void
  placeholder: string
}) {
  const renderedBodyRef = useRef<string | null>(null)
  const renderedContentRevisionRef = useRef(contentRevision)
  const pendingPreviewAnchorRef = useRef<{
    previousScrollTop: number
    scrollParent: HTMLElement
    selectionTop?: number
    sourceOffset: number
  } | null>(null)
  const previewRef = useRef<HTMLDivElement>(null)
  const [focused, setFocused] = useState(false)
  const [selectionLineBlank, setSelectionLineBlank] = useState<boolean>()
  const [placeholderPosition, setPlaceholderPosition] = useState<{
    left: number
    top: number
  }>()
  const [selectionOffset, setSelectionOffset] = useState(0)
  const [referenceTooltip, setReferenceTooltip] = useState<{
    left: number
    path: string
    top: number
  } | null>(null)
  const currentLine = getCurrentLine(body, selectionOffset)
  const showPlaceholder =
    (!focused && !body.trim()) || (focused && (selectionLineBlank ?? currentLine.blank))
  const showRenderedPreview = !focused && Boolean(body.trim())
  const customComponents = useSkillMarkdownComponents(onOpenReference)

const syncSelection = () => {
    const root = editorRef.current
    if (!root) return
    setSelectionOffset(getMarkdownLiveEditorSelectionOffset(root) ?? 0)
    setSelectionLineBlank(getSelectionLineBlank(root))
    setPlaceholderPosition(getSelectionLinePosition(root))
  }

const getReferencePath = (target: EventTarget | null) => {
    if (!(target instanceof HTMLElement)) return
    return target.closest<HTMLElement>('[data-reference-path]')?.dataset.referencePath
  }

const enterEditMode = (root: HTMLElement, selectionOffset: number, clientY?: number) => {
    const scrollParent = getScrollParent(root)
    const previousScrollTop = scrollParent?.scrollTop

setFocused(true)
    window.requestAnimationFrame(() => {
      const editor = editorRef.current
      if (!editor) return

editor.focus({ preventScroll: true })
      setMarkdownLiveEditorSelectionOffset(editor, selectionOffset)
      setSelectionOffset(selectionOffset)
      setSelectionLineBlank(getSelectionLineBlank(editor))
      setPlaceholderPosition(getSelectionLinePosition(editor))

if (!scrollParent || previousScrollTop == null) return
      if (clientY == null) {
        scrollParent.scrollTop = previousScrollTop
        return
      }

const selectionRect = getSelectionRect(editor)
      if (selectionRect) scrollParent.scrollTop += selectionRect.top - clientY
      else scrollParent.scrollTop = previousScrollTop
    })
  }

const exitEditMode = (root: HTMLElement) => {
    const scrollParent = getScrollParent(root)
    if (scrollParent) {
      pendingPreviewAnchorRef.current = {
        previousScrollTop: scrollParent.scrollTop,
        scrollParent,
        selectionTop: getSelectionRect(root)?.top,
        sourceOffset: getMarkdownLiveEditorSelectionOffset(root) ?? selectionOffset,
      }
    }

setFocused(false)
  }

useLayoutEffect(() => {
    if (focused) return

const anchor = pendingPreviewAnchorRef.current
    const preview = previewRef.current
    if (!anchor || !preview) return

const restoreAnchor = () => {
      const anchorRect = getMarkdownPreviewAnchorRect(preview, body, anchor.sourceOffset)
      if (!anchorRect || anchor.selectionTop == null) return false

anchor.scrollParent.scrollTop += anchorRect.top - anchor.selectionTop
      pendingPreviewAnchorRef.current = null
      return true
    }

if (restoreAnchor()) return

const MutationObserver = preview.ownerDocument.defaultView?.MutationObserver
    if (!MutationObserver) {
      anchor.scrollParent.scrollTop = anchor.previousScrollTop
      pendingPreviewAnchorRef.current = null
      return
    }

const observer = new MutationObserver(() => {
      if (restoreAnchor()) {
        observer.disconnect()
        return
      }

if (preview.textContent?.trim()) {
        anchor.scrollParent.scrollTop = anchor.previousScrollTop
        pendingPreviewAnchorRef.current = null
        observer.disconnect()
      }
    })
    observer.observe(preview, { childList: true, subtree: true })

return () => observer.disconnect()
  }, [body, focused])

useLayoutEffect(() => {
    const root = editorRef.current
    if (!root) return
    const revisionChanged = renderedContentRevisionRef.current !== contentRevision
    if (renderedBodyRef.current === body && root.childNodes.length > 0 && !revisionChanged) return
    if (root.ownerDocument.activeElement === root && !revisionChanged) return

renderMarkdownLiveEditorContent(root, body)
    renderedBodyRef.current = body
    renderedContentRevisionRef.current = contentRevision
  }, [body, contentRevision, editorRef, focused])

useLayoutEffect(() => {
    if (!focused) return

const root = editorRef.current
    if (!root) return

const syncSelectionState = () => {
      setSelectionOffset(getMarkdownLiveEditorSelectionOffset(root) ?? 0)
      setSelectionLineBlank(getSelectionLineBlank(root))
      setPlaceholderPosition(getSelectionLinePosition(root))
    }
    const syncPlaceholderPosition = () => setPlaceholderPosition(getSelectionLinePosition(root))
    root.ownerDocument.addEventListener('selectionchange', syncSelectionState)

const ResizeObserver = root.ownerDocument.defaultView?.ResizeObserver
    const observer = ResizeObserver ? new ResizeObserver(syncPlaceholderPosition) : null
    observer?.observe(root)

return () => {
      root.ownerDocument.removeEventListener('selectionchange', syncSelectionState)
      observer?.disconnect()
    }
  }, [editorRef, focused])

return (
    <div className="relative min-h-[360px]">
      {showRenderedPreview && (
        <div
          ref={previewRef}
          role="textbox"
          aria-label={placeholder}
          aria-multiline="true"
          tabIndex={0}
          className="relative z-[2] min-h-[360px] cursor-text outline-none focus-visible:ring-2 focus-visible:ring-state-accent-solid"
          onClickCapture={(event) => {
            if (!(event.target instanceof HTMLElement)) return
            const anchor = event.target.closest<HTMLAnchorElement>('a[href]')
            const href = anchor?.getAttribute('href')
            if (!href || href.startsWith('#') || /^[a-z][a-z\d+.-]*:/i.test(href)) return

event.preventDefault()
            onOpenReference(decodeURIComponent(href))
          }}
          onMouseDown={(event) => {
            if (
              event.target instanceof HTMLElement &&
              event.target.closest('a[href], button[data-reference-path]')
            )
              return

event.preventDefault()
            enterEditMode(
              event.currentTarget,
              getMarkdownPreviewSelectionOffset(
                event.currentTarget,
                event.target,
                body,
                event.clientX,
                event.clientY,
              ),
              event.clientY,
            )
          }}
          onFocus={(event) => {
            if (event.currentTarget !== event.target) return
            enterEditMode(event.currentTarget, 0)
          }}
        >
          <Markdown
            content={body}
            customComponents={customComponents}
            remarkPlugins={SKILL_REFERENCE_REMARK_PLUGINS}
          />
        </div>
      )}
      {!showRenderedPreview && (
        <div
          ref={editorRef}
          contentEditable
          role="textbox"
          aria-label={placeholder}
          aria-multiline="true"
          tabIndex={0}
          suppressContentEditableWarning
          className="relative z-[1] min-h-[360px] w-full bg-transparent text-[15px]/7 break-words whitespace-pre-wrap text-text-secondary caret-text-secondary outline-none"
          onBlur={(event) => exitEditMode(event.currentTarget)}
          onClick={(event: MouseEvent<HTMLDivElement>) => {
            const referencePath = getReferencePath(event.target)
            if (referencePath) {
              event.preventDefault()
              onOpenReference(referencePath)
              return
            }
            syncSelection()
          }}
          onFocus={() => {
            setFocused(true)
            syncSelection()
          }}
          onInput={(event) => {
            onInput(event)
            syncSelection()
          }}
          onKeyDown={(event) => {
            const referencePath = getReferencePath(event.target)
            if (referencePath && (event.key === 'Enter' || event.key === ' ')) {
              event.preventDefault()
              onOpenReference(referencePath)
              return
            }
            onKeyDown(event)
          }}
          onKeyUp={syncSelection}
          onMouseOut={(event) => {
            const referencePath = getReferencePath(event.target)
            if (!referencePath) return
            if (
              event.relatedTarget instanceof HTMLElement &&
              getReferencePath(event.relatedTarget) === referencePath
            ) {
              return
            }
            setReferenceTooltip(null)
          }}
          onMouseOver={(event) => {
            if (!(event.target instanceof HTMLElement)) return
            const reference = event.target.closest<HTMLElement>('[data-reference-path]')
            const path = reference?.dataset.referencePath
            if (!reference || !path) return

const rootRect = event.currentTarget.getBoundingClientRect()
            const referenceRect = reference.getBoundingClientRect()
            setReferenceTooltip({
              left: referenceRect.left - rootRect.left + referenceRect.width / 2,
              path,
              top: referenceRect.top - rootRect.top - 6,
            })
          }}
        />
      )}
      {referenceTooltip && (
        <span
          role="tooltip"
          style={{ left: referenceTooltip.left, top: referenceTooltip.top }}
          className="pointer-events-none absolute z-20 max-w-80 -translate-x-1/2 -translate-y-full rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-2 py-1.5 system-xs-medium break-all whitespace-normal text-text-secondary shadow-lg backdrop-blur-[5px]"
        >
          {referenceTooltip.path}
        </span>
      )}
      {showPlaceholder && (
        <EditorPlaceholder
          text={placeholder}
          className="absolute text-[15px]/7"
          style={{
            left: placeholderPosition?.left ?? 0,
            top: placeholderPosition?.top ?? currentLine.lineIndex * 28,
          }}
        />
      )}
    </div>
  )
}

export function CsvTablePreview({ rows }: { rows: string[][] }) {
  const columnCount = rows.reduce((count, row) => Math.max(count, row.length), 0)

if (rows.length === 0 || columnCount === 0) {
    return (
      <div className="flex h-full items-center justify-center bg-background-default">
        <span className="system-sm-regular text-text-tertiary">-</span>
      </div>
    )
  }

const [headerRow, ...bodyRows] = rows
  const headers = Array.from({ length: columnCount }, (_, index) => headerRow?.[index] ?? '')
  const columnKeys = Array.from({ length: columnCount }, (_, index) => `column-${index + 1}`)

return (
    <div className="flex h-full flex-col gap-1 overflow-hidden bg-background-default p-1">
      <div className="flex h-6 shrink-0 items-center">
        <button
          type="button"
          className="flex h-6 items-center gap-1 rounded-md px-1.5 system-xs-medium text-text-secondary outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
        >
          <span aria-hidden className="i-ri-table-line size-3.5" />
          workspace
          <span aria-hidden className="i-ri-arrow-down-s-line size-3.5" />
        </button>
      </div>
      <div className="min-h-0 flex-1 overflow-auto">
        <table className="min-w-full border-separate border-spacing-0 border-t border-l border-divider-subtle text-left">
          <thead className="sticky top-0 z-10 bg-background-section">
            <tr>
              {headers.map((header, index) => (
                <th
                  key={columnKeys[index]}
                  scope="col"
                  className="h-7 max-w-72 min-w-32 border-r border-b border-divider-subtle px-2 py-1 system-xs-medium text-text-secondary"
                >
                  <span className="block truncate" title={header || undefined}>
                    {header || `#${index + 1}`}
                  </span>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {bodyRows.map((row) => (
              <tr key={row.join('\u0000')} className="hover:bg-state-base-hover">
                {columnKeys.map((columnKey, columnIndex) => {
                  const value = row[columnIndex] ?? ''

return (
                    <td
                      key={columnKey}
                      className="h-7 max-w-72 min-w-32 border-r border-b border-divider-subtle px-2 py-1 align-top system-xs-regular text-text-secondary"
                    >
                      <span
                        className="block break-words whitespace-pre-wrap"
                        title={value || undefined}
                      >
                        {value || '-'}
                      </span>
                    </td>
                  )
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

export function VersionActionBar({
  onExit,
  onRestore,
  restoring,
  version,
}: {
  onExit: () => void
  onRestore: () => void
  restoring: boolean
  version: SkillVersionResponse
}) {
  const { t } = useTranslation('skill')
  const { formatTime } = useTimestamp()
  const publishedBy = version.published_by_name ?? version.published_by ?? '-'
  const publishedAt = formatTime(
    version.created_at,
    t(($) => $['skillManagement.dateTimeFormat']),
  )

return (
    <div className="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center px-4">
      <div className="pointer-events-auto flex h-14 w-[428px] max-w-[calc(100%-2rem)] items-center gap-4 rounded-xl border border-divider-subtle bg-background-default px-4 shadow-xl">
        <div className="min-w-0 flex-1">
          <div className="flex min-w-0 items-center gap-1.5">
            <span className="truncate system-sm-semibold text-text-primary">
              {getSkillVersionTitle(version)}
            </span>
            <span className="border-state-accent-border shrink-0 rounded-[5px] border bg-state-accent-hover px-1.5 py-0.5 system-2xs-semibold-uppercase text-text-accent">
              {t(($) => $['skillManagement.detail.viewOnly'])}
            </span>
          </div>
          <div className="mt-0.5 truncate system-xs-regular text-text-tertiary">
            {t(($) => $['skillManagement.detail.versionPublishedMeta'], {
              name: publishedBy,
              time: publishedAt,
            })}
          </div>
        </div>
        <Button variant="primary" className="h-9 px-5" loading={restoring} onClick={onRestore}>
          {t(($) => $['skillManagement.detail.restoreVersion'])}
        </Button>
        <Button variant="secondary" className="h-9 px-4" onClick={onExit}>
          <span aria-hidden className="i-ri-history-line size-4" />
          {t(($) => $['skillManagement.detail.exitVersions'])}
        </Button>
      </div>
    </div>
  )
}