@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

package/src/components/internal/FileBrowserListingInternal.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FileEntry, FileSelection } from '../../types/fileBrowserTypes'
+import {
+  FILE_BROWSER_ICONS as ICON,
+  formatCount,
+  formatSize,
+  entryType,
+} from '../fileBrowserPresentation'
+import EmptyState from '../EmptyState.vue'
+import BaseButton from '../BaseButton.vue'
+import IconButton from '../IconButton.vue'
+import Skeleton from '../Skeleton.vue'
+const props = defineProps<{
+  mountId: string
+  entries: FileEntry[]
+  selected: FileSelection[]
+  loading: boolean
+  error?: string | null
+  dimNonMatching: boolean
+  totalCount: number | null
+  matchCount: number | null
+  truncated: boolean
+  hasMounts: boolean
+  hasAvailableMounts: boolean
+  search: string
+}>()
+const emit = defineEmits<{ toggle: [entry: FileEntry]; open: [entry: FileEntry]; refresh: [] }>()
+const emptyTitle = computed(() =>
+  !props.hasMounts
+    ? 'No server mounts configured'
+    : !props.hasAvailableMounts
+      ? 'Server mounts are offline'
+      : props.search
+        ? 'No matching files or folders'
+        : 'This folder is empty',
+)
+const emptyDescription = computed(() =>
+  !props.hasMounts
+    ? 'Ask your administrator to configure a read-only data mount.'
+    : !props.hasAvailableMounts
+      ? 'Refresh when the data mount is available again.'
+      : props.search
+        ? 'Try a different search or clear the search field.'
+        : 'Choose another folder from the mount list or breadcrumbs.',
+)
+function isSelected(entry: FileEntry) {
+  return props.selected.some((item) => item.mount_id === props.mountId && item.path === entry.path)
+}
+function isDimmed(entry: FileEntry) {
+  return props.dimNonMatching && entry.matches_type_rules === false
+}
+function entryIcon(entry: FileEntry) {
+  return entry.kind === 'directory' ? ICON.folder : ICON.file
+}
+function handleRowClick(entry: FileEntry) {
+  if (!props.loading && !props.error && props.mountId && entry.kind === 'directory')
+    emit('open', entry)
+}
+function toggleEntry(entry: FileEntry) {
+  if (!props.loading && !props.error && props.mountId) emit('toggle', entry)
+}
+function folderNote(entry: FileEntry) {
+  if (entry.kind !== 'directory' || !isSelected(entry)) return ''
+  return entry.child_count == null
+    ? 'whole folder'
+    : `whole folder, ${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
+}
+const statusLine = computed(() => {
+  if (props.loading) return 'Loading folder…'
+  if (props.error || !props.mountId) return ''
+  const total = props.totalCount ?? props.entries.length
+  const parts = [`${formatCount(total)} item${total === 1 ? '' : 's'}`]
+  if (props.entries.length !== total) parts.push(`${formatCount(props.entries.length)} shown`)
+  if (props.matchCount !== null && props.matchCount !== total)
+    parts.push(`${formatCount(props.matchCount)} match the type rules`)
+  if (props.truncated) parts.push('listing capped')
+  return parts.join(' · ')
+})
+</script>
+<template>
+  <div class="mint-file-browser__listing" :aria-busy="loading">
+    <div class="mint-file-browser__head">
+      <span class="mint-file-browser__col-check" />
+      <span class="mint-file-browser__col-icon" />
+      <span class="mint-file-browser__col-name">Name</span>
+      <span class="mint-file-browser__col-size">Size</span>
+      <span class="mint-file-browser__col-type">Type</span>
+      <span class="mint-file-browser__col-open" />
+    </div>
+
+    <div v-if="loading" class="mint-file-browser__skeleton">
+      <div v-for="n in 6" :key="n" class="mint-file-browser__skeleton-row">
+        <Skeleton width="60%" height="14px" />
+        <Skeleton width="60px" height="10px" />
+      </div>
+    </div>
+
+    <div v-else-if="error" class="mint-file-browser__error" role="alert">
+      <span>{{ error }}</span>
+      <BaseButton
+        variant="secondary"
+        size="sm"
+        class="mint-file-browser__retry"
+        aria-label="Retry folder listing"
+        @click="emit('refresh')"
+      >
+        Try again
+      </BaseButton>
+    </div>
+
+    <EmptyState
+      v-else-if="!entries.length"
+      :title="emptyTitle"
+      :description="emptyDescription"
+      size="sm"
+    />
+
+    <div v-else class="mint-file-browser__rows">
+      <div
+        v-for="entry in entries"
+        :key="entry.path"
+        class="mint-file-browser__row"
+        :class="{
+          'mint-file-browser__row--selected': isSelected(entry),
+          'mint-file-browser__row--dimmed': isDimmed(entry),
+          'mint-file-browser__row--dir': entry.kind === 'directory',
+        }"
+        @click="handleRowClick(entry)"
+      >
+        <input
+          class="mint-file-browser__checkbox"
+          type="checkbox"
+          :checked="isSelected(entry)"
+          :title="entry.kind === 'directory' ? 'Select the whole folder' : 'Select this file'"
+          :aria-label="
+            entry.kind === 'directory'
+              ? `Select the whole ${entry.name} folder`
+              : `Select ${entry.name}`
+          "
+          @click.stop
+          @change="toggleEntry(entry)"
+        />
+        <span
+          class="mint-file-browser__row-icon"
+          :class="`mint-file-browser__row-icon--${entry.kind}`"
+        >
+          <svg
+            class="mint-file-browser__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path :d="entryIcon(entry)" />
+          </svg>
+        </span>
+        <span class="mint-file-browser__name-cell">
+          <span class="mint-file-browser__name" :title="entry.name">{{ entry.name }}</span>
+          <span v-if="folderNote(entry)" class="mint-file-browser__note-pill">Whole folder</span>
+        </span>
+        <span class="mint-file-browser__size">{{ formatSize(entry) }}</span>
+        <span class="mint-file-browser__type">{{ entryType(entry) }}</span>
+        <!-- The chevron is the keyboard route into a folder: the row
+                   itself is a div, so this button is what Tab can reach. -->
+        <IconButton
+          v-if="entry.kind === 'directory'"
+          size="sm"
+          class="mint-file-browser__open"
+          :label="`Open ${entry.name}`"
+          @click.stop="handleRowClick(entry)"
+        >
+          <svg
+            class="mint-file-browser__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9 6l6 6-6 6" />
+          </svg>
+        </IconButton>
+        <span v-else class="mint-file-browser__open" aria-hidden="true" />
+      </div>
+    </div>
+
+    <div class="mint-file-browser__status" role="status" aria-live="polite">
+      <span>{{ statusLine }}</span>
+      <div class="mint-file-browser__status-spacer" />
+      <span class="mint-file-browser__legend">Read-only · Select paths, not copies</span>
+    </div>
+  </div>
+</template>

package/src/components/internal/FileBrowserToolbarInternal.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BaseButton from '../BaseButton.vue'
+import BaseInput from '../BaseInput.vue'
+import IconButton from '../IconButton.vue'
+import type {
+  FileBrowserSortKey,
+  FilePathCrumb,
+  FileBrowserLocation,
+} from '../../types/fileBrowserTypes'
+const props = defineProps<{
+  mountId: string
+  path: string
+  parent: string | null
+  breadcrumbs: FilePathCrumb[]
+  search: string
+  sort: FileBrowserSortKey
+  typeRules: string[]
+  loading: boolean
+  error?: string | null
+}>()
+const emit = defineEmits<{
+  navigate: [location: FileBrowserLocation]
+  selectFolder: [location: FileBrowserLocation]
+  'update:search': [value: string]
+  'update:sort': [value: FileBrowserSortKey]
+  refresh: []
+}>()
+const typeRuleLabel = computed(() => props.typeRules.join(' '))
+function handleBack() {
+  if (props.parent !== null && !props.loading && !props.error)
+    emit('navigate', { mount_id: props.mountId, path: props.parent })
+}
+function handleCrumb(crumb: FilePathCrumb) {
+  emit('navigate', { mount_id: props.mountId, path: crumb.path })
+}
+function cycleSort() {
+  const order: FileBrowserSortKey[] = ['name', 'size', 'modified']
+  emit('update:sort', order[(order.indexOf(props.sort) + 1) % order.length]!)
+}
+</script>
+<template>
+  <div class="mint-file-browser__toolbar">
+    <div class="mint-file-browser__pathbar">
+      <IconButton
+        size="sm"
+        class="mint-file-browser__back"
+        label="Go to parent folder"
+        :disabled="parent === null || loading || !!error"
+        @click="handleBack"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <path d="M12 19V5m-6 6 6-6 6 6" />
+        </svg>
+      </IconButton>
+      <nav class="mint-file-browser__crumbs" aria-label="Breadcrumb">
+        <template v-for="(crumb, index) in breadcrumbs" :key="crumb.path">
+          <span v-if="index" class="mint-file-browser__crumb-sep" aria-hidden="true">/</span>
+          <BaseButton
+            variant="ghost"
+            size="sm"
+            class="mint-file-browser__crumb"
+            :class="{ 'mint-file-browser__crumb--current': index === breadcrumbs.length - 1 }"
+            :aria-current="index === breadcrumbs.length - 1 ? 'location' : undefined"
+            @click="handleCrumb(crumb)"
+            >{{ crumb.label }}</BaseButton
+          >
+        </template>
+        <span v-if="!breadcrumbs.length" class="mint-file-browser__selection-hint">{{
+          path || 'Choose a location'
+        }}</span>
+      </nav>
+      <IconButton
+        size="sm"
+        label="Refresh folder listing"
+        :disabled="loading"
+        @click="emit('refresh')"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <path d="M20 7v5h-5M4 17v-5h5M6 8a7 7 0 0 1 12-2l2 3M4 15l2 3a7 7 0 0 0 12-2" />
+        </svg>
+      </IconButton>
+    </div>
+    <div class="mint-file-browser__tools">
+      <BaseInput
+        :model-value="search"
+        type="search"
+        size="sm"
+        class="mint-file-browser__search"
+        placeholder="Search this folder…"
+        aria-label="Search this folder"
+        @update:model-value="emit('update:search', String($event ?? ''))"
+      />
+      <span v-if="typeRuleLabel" class="mint-file-browser__rules" title="Matching file types">{{
+        typeRuleLabel
+      }}</span>
+      <IconButton
+        size="sm"
+        class="mint-file-browser__sort"
+        :label="`Sorted by ${sort}. Click to change.`"
+        @click="cycleSort"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <path d="M4 6h10M4 12h16M4 18h7" />
+        </svg>
+      </IconButton>
+      <BaseButton
+        variant="secondary"
+        size="sm"
+        class="mint-file-browser__select-folder"
+        :title="`Select ${path || 'this folder'} itself as the input`"
+        :disabled="!mountId || loading || !!error"
+        @click="emit('selectFolder', { mount_id: mountId, path })"
+        >Select this folder</BaseButton
+      >
+    </div>
+  </div>
+</template>

package/src/components/internal/FilePickerPreviewInternal.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import BaseButton from '../BaseButton.vue'
+import { FILE_BROWSER_ICONS as ICON, formatBytes } from '../fileBrowserPresentation'
+import type { PickerNode, PickerExcluded, PickerSource } from '../../types/filePicker'
+import { pickerReason } from '../../composables/filePicker/validation'
+
+defineProps<{
+  totalCount?: number | null
+  node: PickerNode | null
+  source: PickerSource
+  exclusions: PickerExcluded[]
+  busy: boolean
+  error: string
+  reviewing: boolean
+}>()
+const emit = defineEmits<{ review: []; retry: [] }>()
+</script>
+<template>
+  <aside class="mint-picker__preview" aria-label="Selection preview">
+    <div class="mint-picker__preview-heading">{{ reviewing ? 'Skipped files' : 'Preview' }}</div>
+    <div v-if="reviewing" class="mint-picker__preview-content">
+      <BaseButton variant="ghost" size="sm" @click="emit('review')">Back to preview</BaseButton>
+      <div
+        v-for="item in exclusions"
+        :key="item.path"
+        class="mint-picker__exclusion"
+        :title="item.path"
+      >
+        <strong>{{ item.name }}</strong
+        ><span>{{ pickerReason(item) }}</span>
+      </div>
+    </div>
+    <div v-else-if="node" class="mint-picker__preview-content">
+      <div class="mint-picker__preview-icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          aria-hidden="true"
+        >
+          <path :d="node.kind === 'folder' ? ICON.folder : ICON.file" />
+        </svg>
+      </div>
+      <strong class="mint-picker__preview-name">{{ node.name }}</strong>
+      <dl class="mint-picker__metadata">
+        <div>
+          <dt>Location</dt>
+          <dd :title="node.parentName || node.path">{{ node.parentName || node.path }}</dd>
+        </div>
+        <div>
+          <dt>Size</dt>
+          <dd>{{ node.bytes == null ? 'Not available' : formatBytes(node.bytes) }}</dd>
+        </div>
+        <div v-if="node.kind === 'folder'">
+          <dt>Files</dt>
+          <dd>
+            {{ node.fileCount ?? 'Not counted yet'
+            }}<template v-if="totalCount != null && totalCount !== node.fileCount">
+              of {{ totalCount }}</template
+            >
+          </dd>
+        </div>
+        <div>
+          <dt>Format</dt>
+          <dd v-if="node.kind === 'file'">{{ node.format.toUpperCase() || 'Unknown' }}</dd>
+          <dd v-else>
+            <span v-for="(count, format) in node.formats" :key="format"
+              >{{ format.toUpperCase() }} ×{{ count }}<br /></span
+            ><span v-if="!node.formats">Not counted yet</span>
+          </dd>
+        </div>
+        <div>
+          <dt>Source</dt>
+          <dd>
+            {{ source === 'localFile' ? 'Local files' : 'Server' }}
+          </dd>
+        </div>
+      </dl>
+      <BaseButton
+        v-if="exclusions.length"
+        variant="ghost"
+        size="sm"
+        class="mint-picker__skipped"
+        @click="emit('review')"
+        >{{ exclusions.length }} skipped · Review</BaseButton
+      >
+      <div v-if="error" class="mint-picker__preview-error" role="alert">
+        {{ error
+        }}<BaseButton variant="secondary" size="sm" @click="emit('retry')">Try again</BaseButton>
+      </div>
+      <span v-else class="mint-picker__ready" role="status">{{
+        busy ? 'Checking selection…' : '✓ Metadata available'
+      }}</span>
+    </div>
+    <div v-else class="mint-picker__preview-empty">
+      Select a file or folder to preview its details.
+    </div>
+  </aside>
+</template>

package/src/components/internal/FilePickerTreeInternal.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+import IconButton from '../IconButton.vue'
+import BaseButton from '../BaseButton.vue'
+import Skeleton from '../Skeleton.vue'
+import { FILE_BROWSER_ICONS as ICON, formatBytes } from '../fileBrowserPresentation'
+import type { PickerNode, PickerTreeRow, PickerSelectionMode } from '../../types/filePicker'
+
+const props = defineProps<{
+  emptyTitle?: string
+  rows: PickerTreeRow[]
+  loading: boolean
+  error: string
+  query: string
+  mode: PickerSelectionMode
+  selected: (node: PickerNode) => boolean
+  reason: (node: PickerNode) => string
+  progress: (node: PickerNode) => string
+  focusPath: string
+}>()
+const emit = defineEmits<{
+  select: [node: PickerNode, event: MouseEvent | KeyboardEvent]
+  enter: [node: PickerNode]
+  expand: [node: PickerNode]
+  up: []
+  retry: []
+  parent: [node: PickerNode]
+}>()
+const list = ref<HTMLElement | null>(null)
+const focusablePath = computed(() => {
+  const available = props.rows.filter((row) => !props.reason(row.node))
+  return (
+    available.find((row) => row.node.path === props.focusPath)?.node.path ?? available[0]?.node.path
+  )
+})
+function focusRow(path: string) {
+  nextTick(() => {
+    const target = [...(list.value?.querySelectorAll<HTMLElement>('[role="treeitem"]') ?? [])].find(
+      (el) => el.dataset.path === path,
+    )
+    target?.focus()
+    target?.scrollIntoView({ block: 'nearest' })
+  })
+}
+function keydown(event: KeyboardEvent, row: PickerTreeRow) {
+  if (props.reason(row.node)) return
+  const available = props.rows.filter((item) => !props.reason(item.node))
+  const index = available.findIndex((item) => item.node.path === row.node.path)
+  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+    event.preventDefault()
+    const target =
+      event.key === 'Home'
+        ? available[0]
+        : event.key === 'End'
+          ? available[available.length - 1]
+          : available[
+              Math.max(
+                0,
+                Math.min(available.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)),
+              )
+            ]
+    if (target) {
+      emit('select', target.node, event)
+      focusRow(target.node.path)
+    }
+  } else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    if (row.node.kind === 'folder' && !row.expanded) emit('expand', row.node)
+    else if (row.expanded) {
+      const next = available[index + 1]
+      if (next && next.depth > row.depth) {
+        emit('select', next.node, event)
+        focusRow(next.node.path)
+      }
+    }
+  } else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    if (row.expanded) emit('expand', row.node)
+    else {
+      const parent = props.rows
+        .slice(0, props.rows.indexOf(row))
+        .reverse()
+        .find((item) => item.depth < row.depth)
+      if (parent) {
+        emit('select', parent.node, event)
+        focusRow(parent.node.path)
+      } else emit('up')
+    }
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    emit('enter', row.node)
+  } else if (event.key === ' ') {
+    event.preventDefault()
+    emit('select', row.node, event)
+  }
+}
+function parts(name: string) {
+  const index = props.query ? name.toLowerCase().indexOf(props.query.toLowerCase()) : -1
+  return index < 0
+    ? [name, '', '']
+    : [
+        name.slice(0, index),
+        name.slice(index, index + props.query.length),
+        name.slice(index + props.query.length),
+      ]
+}
+</script>
+
+<template>
+  <div
+    ref="list"
+    class="mint-picker__tree"
+    role="tree"
+    aria-label="Folders and files"
+    :aria-multiselectable="mode === 'multi-file' || mode === 'folder+files'"
+    :aria-busy="loading"
+  >
+    <div v-if="loading" class="mint-picker__skeleton">
+      <Skeleton v-for="n in 6" :key="n" width="100%" height="36px" />
+    </div>
+    <div v-else-if="error" role="alert" class="mint-picker__empty">
+      <span>{{ error }}</span
+      ><BaseButton variant="secondary" size="sm" @click="emit('retry')">Try again</BaseButton>
+    </div>
+    <div v-else-if="!rows.length" class="mint-picker__empty" role="status">
+      <strong>{{
+        query ? 'No matching folders or files' : emptyTitle || 'No readable files'
+      }}</strong>
+      <span>{{
+        query
+          ? 'Try a different search or include subfolders.'
+          : 'Choose a location, go up a level, or choose local files.'
+      }}</span>
+    </div>
+    <template v-else v-for="row in rows" :key="row.node.path">
+      <div
+        role="treeitem"
+        :data-path="row.node.path"
+        :aria-level="row.depth + 1"
+        :aria-selected="selected(row.node)"
+        :aria-disabled="!!reason(row.node)"
+        :aria-expanded="row.node.kind === 'folder' && !reason(row.node) ? row.expanded : undefined"
+        :tabindex="!reason(row.node) && row.node.path === focusablePath ? 0 : -1"
+        class="mint-picker__row"
+        :class="{
+          'mint-picker__row--selected': selected(row.node),
+          'mint-picker__row--unreadable': !!reason(row.node),
+          'mint-picker__row--child': row.depth > 0,
+        }"
+        :style="{ '--picker-depth': row.depth }"
+        :title="reason(row.node) || row.node.name"
+        @click="!reason(row.node) && emit('select', row.node, $event)"
+        @dblclick="!reason(row.node) && emit('enter', row.node)"
+        @keydown="keydown($event, row)"
+      >
+        <IconButton
+          v-if="row.node.kind === 'folder' && row.node.hasChildren !== false && !reason(row.node)"
+          size="sm"
+          class="mint-picker__disclosure"
+          :label="`${row.expanded ? 'Collapse' : 'Expand'} ${row.node.name}`"
+          tabindex="-1"
+          :loading="row.loading"
+          @click.stop="emit('expand', row.node)"
+          @dblclick.stop
+        >
+          <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            aria-hidden="true"
+            :class="{ 'mint-picker__chevron--open': row.expanded }"
+          >
+            <path d="m6 3 5 5-5 5z" />
+          </svg>
+        </IconButton>
+        <span v-else class="mint-picker__disclosure-spacer" />
+        <svg
+          class="mint-picker__node-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          aria-hidden="true"
+        >
+          <path :d="row.node.kind === 'folder' ? ICON.folder : ICON.file" />
+        </svg>
+        <span class="mint-picker__row-name">
+          <span class="mint-picker__name"
+            >{{ parts(row.node.name)[0]
+            }}<mark v-if="parts(row.node.name)[1]">{{ parts(row.node.name)[1] }}</mark
+            >{{ parts(row.node.name)[2] }}</span
+          >
+          <span v-if="row.node.kind === 'folder' && row.node.formats" class="mint-picker__formats">
+            <span v-for="(count, format) in row.node.formats" :key="format"
+              >{{ format.toUpperCase() }} ×{{ count }}</span
+            >
+          </span>
+          <span v-else-if="query && row.node.parentName" class="mint-picker__parent-name">{{
+            row.node.parentName
+          }}</span>
+        </span>
+        <span class="mint-picker__row-meta">
+          <span
+            v-if="row.node.kind === 'folder' && progress(row.node)"
+            :class="{
+              'mint-picker__partial':
+                selected(row.node) &&
+                progress(row.node).split(' / ')[0] !== String(row.node.fileCount),
+            }"
+            >{{ progress(row.node) }}</span
+          >
+          <span v-if="!reason(row.node) && row.node.bytes != null">{{
+            formatBytes(row.node.bytes)
+          }}</span>
+          <span v-if="reason(row.node)" aria-label="Unavailable">ⓘ</span>
+        </span>
+        <BaseButton
+          v-if="
+            query &&
+            mode === 'folder' &&
+            row.node.kind === 'file' &&
+            row.node.parentPath &&
+            !reason(row.node)
+          "
+          variant="ghost"
+          size="sm"
+          @click.stop="emit('parent', row.node)"
+          >Select its folder</BaseButton
+        >
+      </div>
+      <div v-if="row.error" class="mint-picker__branch-error" role="alert">
+        {{ row.error
+        }}<BaseButton variant="ghost" size="sm" @click="emit('expand', row.node)"
+          >Close branch</BaseButton
+        >
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/internal/FormSectionRenderer.vue

@@ -72,7 +72,3 @@ const gridStyle = computed(() => ({
     <slot :name="`section:${section.id}:after`" :form="builder.form" />
   </div>
 </template>
-
-<style>
-@import '../../styles/components/form-builder.css';
-</style>