@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

package/src/components/config/record-editors/RecordEditors.scss

@@ -1,335 +0,0 @@
-.config-view__record-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.config-view__record-card {
-  padding: var(--subpage-tertiary-padding);
-  border: var(--subpage-tertiary-border);
-  border-radius: var(--subpage-tertiary-radius);
-  background: var(--subpage-tertiary-bg);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  transition: border-color .2s ease, background-color .2s ease;
-}
-
-.config-view__record-card:hover {
-  border-color: var(--subpage-tertiary-hover-border);
-  background: var(--subpage-tertiary-hover-bg);
-}
-
-.config-view__record-card--highlighted {
-  border-color: color-mix(
-    in srgb,
-    var(--primary-color, #2563eb) 28%,
-    var(--border-color)
-  );
-  background: color-mix(
-    in srgb,
-    var(--primary-soft-bg, #eff6ff) 42%,
-    var(--subpage-tertiary-bg)
-  );
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--primary-color, #2563eb) 18%, transparent);
-  scroll-margin-top: 24px;
-}
-
-.config-view__record-card--readonly {
-  border-style: dashed;
-}
-
-.config-view__record-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-color);
-}
-
-.config-view__record-title-left {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.config-view__record-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.config-view__record-body {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.config-view__record-card--collapsed .config-view__record-body {
-  display: none;
-}
-
-.config-view__record-heading {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.config-view__record-heading.has-adapter-icon {
-  flex-direction: row;
-  align-items: center;
-  gap: 6px;
-}
-
-.config-view__record-heading-text {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.config-view__adapter-icon-wrap {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  min-width: 26px;
-  height: 26px;
-}
-
-.config-view__adapter-icon {
-  width: 18px;
-  height: 18px;
-  object-fit: contain;
-}
-
-.config-view__adapter-icon-fallback {
-  font-size: 18px;
-  color: var(--sub-text-color);
-}
-
-.config-view__detail-list-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.config-view__detail-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 18px;
-  padding: 0 7px;
-  border-radius: 999px;
-  background: color-mix(
-    in srgb,
-    var(--subpage-tertiary-hover-bg) 72%,
-    transparent
-  );
-  color: var(--sub-text-color);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.config-view__detail-badge--readonly {
-  background: color-mix(
-    in srgb,
-    var(--subpage-tertiary-hover-border) 30%,
-    transparent
-  );
-}
-
-.config-view__detail-badge--override {
-  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
-  color: var(--primary-color);
-}
-
-.config-view__record-subtitle {
-  font-size: 12px;
-  color: var(--sub-text-color);
-}
-
-.config-view__record-desc {
-  font-size: 12px;
-  color: var(--sub-text-color);
-}
-
-.config-view__record-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.config-view__detail-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.config-view__detail-list-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.config-view__detail-summary-controls {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.config-view__detail-list-main {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.config-view__record-card .config-view__record-actions {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-2px);
-  transition: opacity .16s ease, transform .16s ease;
-}
-
-.config-view__record-card:hover .config-view__record-actions,
-.config-view__record-card:focus-within .config-view__record-actions {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateY(0);
-}
-
-.config-view__detail-list-main:hover
-  .config-view__record-heading
-  > div:first-child {
-  color: var(--primary-color);
-}
-
-.config-view__detail-list-empty {
-  padding: 14px 16px;
-  border: var(--subpage-tertiary-border);
-  border-radius: 10px;
-  background: var(--subpage-tertiary-bg);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  transition: border-color .2s ease, background-color .2s ease;
-}
-
-.config-view__detail-list-empty:hover {
-  border-color: var(--subpage-tertiary-hover-border);
-  background: var(--subpage-tertiary-hover-bg);
-}
-
-.config-view__detail-list-empty-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-color);
-}
-
-.config-view__detail-list-empty-desc {
-  font-size: 12px;
-  color: var(--sub-text-color);
-}
-
-@media (hover: none) {
-  .config-view__record-card .config-view__record-actions {
-    opacity: 1;
-    pointer-events: auto;
-    transform: none;
-  }
-}
-
-.config-view__record-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-}
-
-.config-view__record-key {
-  font-size: 12px;
-  color: var(--sub-text-color);
-  min-width: 132px;
-  padding-top: 6px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.config-view__record-add {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.config-view__record-add-inputs {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  padding: 10px 12px;
-  border: var(--subpage-tertiary-border);
-  border-radius: 8px;
-  background: var(--subpage-tertiary-bg);
-  transition: border-color .2s ease, background-color .2s ease;
-}
-
-.config-view__record-add-inputs:hover {
-  border-color: var(--subpage-tertiary-hover-border);
-  background: var(--subpage-tertiary-hover-bg);
-}
-
-.config-view__record-add-inputs .ant-input,
-.config-view__record-add-inputs .ant-input-affix-wrapper,
-.config-view__record-add-inputs .ant-select {
-  flex: 1;
-}
-
-.config-view__record-add-inputs .ant-input,
-.config-view__record-add-inputs .ant-input-affix-wrapper,
-.config-view__record-add-inputs .ant-select-selector,
-.config-view__record-row .ant-input,
-.config-view__record-row .ant-input-affix-wrapper,
-.config-view__record-row .ant-select-selector {
-  border-radius: 6px !important;
-  min-height: 30px;
-}
-
-.config-view__icon-button {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-}
-
-.config-view__icon-button--compact {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-}
-
-.config-view__icon-button--full {
-  width: 100%;
-  min-width: 100%;
-}

package/src/components/config/record-editors/RecordJsonEditor.scss

@@ -1 +0,0 @@
-@use './RecordEditors.scss';

package/src/components/config/record-editors/RecordJsonEditor.tsx

@@ -1,140 +0,0 @@
-import './RecordJsonEditor.scss'
-
-import { Button, Input, Tooltip } from 'antd'
-import { useEffect, useMemo, useRef, useState } from 'react'
-
-import { ComplexTextEditor } from '../ConfigEditors'
-import type { TranslationFn } from '../configUtils'
-
-export const RecordJsonEditor = ({
-  value,
-  onChange,
-  highlightedKey,
-  t,
-  keyPlaceholder
-}: {
-  value: Record<string, unknown>
-  onChange: (nextValue: Record<string, unknown>) => void
-  highlightedKey?: string
-  t: TranslationFn
-  keyPlaceholder: string
-}) => {
-  const [newKey, setNewKey] = useState('')
-  const entries = useMemo(() => Object.entries(value), [value])
-  const cardRefs = useRef<Record<string, HTMLDivElement | null>>({})
-  const [collapsedKeys, setCollapsedKeys] = useState<Record<string, boolean>>(() => (
-    Object.fromEntries(entries.map(([key]) => [key, true]))
-  ))
-
-  useEffect(() => {
-    setCollapsedKeys(prev => {
-      const next: Record<string, boolean> = {}
-      for (const [key] of entries) {
-        next[key] = prev[key] ?? true
-      }
-      return next
-    })
-  }, [entries])
-
-  useEffect(() => {
-    if (highlightedKey == null || highlightedKey.trim() === '' || !Object.hasOwn(value, highlightedKey)) {
-      return
-    }
-
-    setCollapsedKeys(prev => prev[highlightedKey] === false ? prev : { ...prev, [highlightedKey]: false })
-    const frame = window.requestAnimationFrame(() => {
-      cardRefs.current[highlightedKey]?.scrollIntoView({
-        block: 'center',
-        behavior: 'smooth'
-      })
-    })
-    return () => window.cancelAnimationFrame(frame)
-  }, [highlightedKey, value])
-
-  return (
-    <div className='config-view__record-list'>
-      {entries.map(([key, itemValue]) => {
-        const isCollapsed = collapsedKeys[key] === true
-        return (
-          <div
-            key={key}
-            ref={(node) => {
-              cardRefs.current[key] = node
-            }}
-            className={[
-              'config-view__record-card',
-              isCollapsed ? 'config-view__record-card--collapsed' : '',
-              highlightedKey === key ? 'config-view__record-card--highlighted' : ''
-            ].filter(Boolean).join(' ')}
-          >
-            <div className='config-view__record-title'>
-              <div className='config-view__record-title-left'>
-                <Tooltip title={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}>
-                  <Button
-                    size='small'
-                    type='text'
-                    className='config-view__icon-button config-view__icon-button--compact'
-                    aria-label={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}
-                    icon={
-                      <span className='material-symbols-rounded'>{isCollapsed ? 'chevron_right' : 'expand_more'}</span>
-                    }
-                    onClick={() => {
-                      setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }))
-                    }}
-                  />
-                </Tooltip>
-                <span>{key}</span>
-              </div>
-              <Tooltip title={t('config.editor.remove')}>
-                <Button
-                  size='small'
-                  type='text'
-                  danger
-                  className='config-view__icon-button config-view__icon-button--compact'
-                  aria-label={t('config.editor.remove')}
-                  icon={<span className='material-symbols-rounded'>delete</span>}
-                  onClick={() => {
-                    const updated = { ...value }
-                    delete updated[key]
-                    onChange(updated)
-                  }}
-                />
-              </Tooltip>
-            </div>
-            <div className='config-view__record-body'>
-              <ComplexTextEditor
-                value={itemValue}
-                onChange={(next) => {
-                  onChange({ ...value, [key]: next })
-                }}
-              />
-            </div>
-          </div>
-        )
-      })}
-      <div className='config-view__record-add'>
-        <div className='config-view__record-add-inputs'>
-          <Input
-            value={newKey}
-            placeholder={keyPlaceholder}
-            onChange={(event) => setNewKey(event.target.value)}
-          />
-          <Tooltip title={t('common.confirm')}>
-            <Button
-              size='small'
-              type='primary'
-              className='config-view__icon-button'
-              aria-label={t('common.confirm')}
-              icon={<span className='material-symbols-rounded'>check</span>}
-              disabled={newKey.trim() === '' || Object.hasOwn(value, newKey)}
-              onClick={() => {
-                onChange({ ...value, [newKey]: {} })
-                setNewKey('')
-              }}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/config/record-editors/SchemaObjectEditor.tsx

@@ -1,183 +0,0 @@
-import { Input, InputNumber, Select, Switch } from 'antd'
-import type { ReactNode } from 'react'
-
-import type { ConfigUiField, ConfigUiFieldOption, ConfigUiObjectSchema } from '@vibe-forge/types'
-
-import { ComplexTextEditor, StringArrayEditor } from '../ConfigEditors'
-import { FieldRow } from '../ConfigFieldRow'
-import { getTypeIcon, getValueByPath, isSensitiveKey, setValueByPath } from '../configUtils'
-import type { TranslationFn } from '../configUtils'
-
-import { toLabel } from './schemaRecordUtils'
-
-const buildSelectOptions = (options: ConfigUiFieldOption[] = []) => (
-  options.map(option => ({
-    value: option.value,
-    label: option.label ?? option.value
-  }))
-)
-const configSelectSuffixIcon = (
-  <span className='material-symbols-rounded config-view__select-chevron'>expand_more</span>
-)
-
-const resolveFieldIcon = (field: ConfigUiField) => {
-  if (field.icon != null) return field.icon
-  if (field.type === 'json') return getTypeIcon('object')
-  if (field.type === 'string[]') return getTypeIcon('array')
-  if (field.type === 'select' || field.type === 'multiline') return getTypeIcon('string')
-  if (field.type === 'string' || field.type === 'number' || field.type === 'boolean') {
-    return getTypeIcon(field.type)
-  }
-  return getTypeIcon('object')
-}
-
-export const SchemaObjectEditor = ({
-  value,
-  schema,
-  onChange,
-  t,
-  hideFieldPaths,
-  visibleFieldPaths,
-  resolveFieldLabel,
-  resolveFieldDescription,
-  resolveFieldOptions
-}: {
-  value: Record<string, unknown>
-  schema: ConfigUiObjectSchema
-  onChange: (nextValue: Record<string, unknown>) => void
-  t: TranslationFn
-  hideFieldPaths?: string[][]
-  visibleFieldPaths?: string[][]
-  resolveFieldLabel?: (field: ConfigUiField, fallback: string) => string
-  resolveFieldDescription?: (field: ConfigUiField, fallback: string) => string
-  resolveFieldOptions?: (field: ConfigUiField) => ConfigUiFieldOption[] | undefined
-}) => {
-  const renderField = (field: ConfigUiField) => {
-    if (
-      visibleFieldPaths != null && !visibleFieldPaths.some(visiblePath => (
-        field.path.length === visiblePath.length &&
-        field.path.every((segment, index) => segment === visiblePath[index])
-      ))
-    ) {
-      return null
-    }
-
-    if (
-      hideFieldPaths?.some(hiddenPath => (
-        field.path.length === hiddenPath.length &&
-        field.path.every((segment, index) => segment === hiddenPath[index])
-      ))
-    ) {
-      return null
-    }
-
-    const currentValue = getValueByPath(value, field.path)
-    const valueToUse = currentValue !== undefined ? currentValue : field.defaultValue
-    const fallbackTitle = field.label ?? toLabel(field.path[field.path.length - 1] ?? '')
-    const fallbackDescription = field.description ?? ''
-    const title = resolveFieldLabel?.(field, fallbackTitle) ?? fallbackTitle
-    const description = resolveFieldDescription?.(field, fallbackDescription) ?? fallbackDescription
-    const resolvedOptions = resolveFieldOptions?.(field)
-    const nextValue = (updated: unknown) => {
-      onChange(setValueByPath(value, field.path, updated) as Record<string, unknown>)
-    }
-
-    let control: ReactNode = null
-    const stacked = field.type === 'json' || field.type === 'multiline' || field.type === 'string[]'
-
-    if (field.type === 'string' && resolvedOptions != null) {
-      control = (
-        <Select
-          allowClear
-          value={typeof valueToUse === 'string' && valueToUse !== '' ? valueToUse : undefined}
-          options={buildSelectOptions(resolvedOptions)}
-          placeholder={field.placeholder}
-          suffixIcon={configSelectSuffixIcon}
-          onChange={(selected) => nextValue(typeof selected === 'string' ? selected : undefined)}
-        />
-      )
-    } else if (field.type === 'string') {
-      const sensitive = field.sensitive === true || isSensitiveKey(field.path[field.path.length - 1] ?? '')
-      control = sensitive
-        ? (
-          <Input.Password
-            value={typeof valueToUse === 'string' ? valueToUse : ''}
-            onChange={(event) => nextValue(event.target.value)}
-            placeholder={field.placeholder ?? t('config.editor.secretPlaceholder')}
-          />
-        )
-        : (
-          <Input
-            value={typeof valueToUse === 'string' ? valueToUse : ''}
-            onChange={(event) => nextValue(event.target.value)}
-            placeholder={field.placeholder}
-          />
-        )
-    } else if (field.type === 'multiline') {
-      control = (
-        <Input.TextArea
-          value={typeof valueToUse === 'string' ? valueToUse : ''}
-          onChange={(event) => nextValue(event.target.value)}
-          autoSize={{ minRows: 2 }}
-          placeholder={field.placeholder}
-        />
-      )
-    } else if (field.type === 'number') {
-      control = (
-        <InputNumber
-          value={typeof valueToUse === 'number' ? valueToUse : undefined}
-          onChange={(input) => nextValue(typeof input === 'number' ? input : undefined)}
-        />
-      )
-    } else if (field.type === 'boolean') {
-      control = (
-        <Switch
-          checked={Boolean(valueToUse)}
-          onChange={(checked) => nextValue(checked)}
-        />
-      )
-    } else if (field.type === 'string[]') {
-      control = (
-        <StringArrayEditor
-          value={Array.isArray(valueToUse) ? valueToUse.filter(item => typeof item === 'string') : []}
-          onChange={(items) => nextValue(items)}
-          t={t}
-        />
-      )
-    } else if (field.type === 'select') {
-      control = (
-        <Select
-          value={typeof valueToUse === 'string' ? valueToUse : undefined}
-          options={buildSelectOptions(resolvedOptions ?? field.options ?? [])}
-          suffixIcon={configSelectSuffixIcon}
-          onChange={(selected) => nextValue(selected)}
-        />
-      )
-    } else {
-      control = (
-        <ComplexTextEditor
-          value={valueToUse ?? {}}
-          onChange={(updated) => nextValue(updated)}
-        />
-      )
-    }
-
-    return (
-      <FieldRow
-        key={field.path.join('.')}
-        title={title}
-        description={description}
-        icon={resolveFieldIcon(field)}
-        layout={stacked ? 'stacked' : 'inline'}
-      >
-        {control}
-      </FieldRow>
-    )
-  }
-
-  return (
-    <div className='config-view__record-fields'>
-      {schema.fields.map(renderField)}
-    </div>
-  )
-}