An open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue
This report summarizes scanner evidence for unovue/reka-ui, a Vue project with 6,918 GitHub stars. SynthScan examined 231,912 lines of code across 2102 source files, recording 155 pattern matches distributed across 4 syntactic categories. The legacy adjusted pattern signal is 0.8 (Low pattern signal); it is not an authorship estimate.
Use the findings to ask whether maintainers can explain intent, verify dependencies, simplify unnecessary scaffolding, and focus review effort. Risk Payload v1 adds ownership, supply-chain, over-engineering, and review-effort vectors when available. These are prompts for human verification, not probabilities, security findings, or measured maintenance costs.
Use each vector to guide manual verification of the underlying findings.
Payload schema: 1.0.0 · Engine: 2.0.0 · Scoring: heuristic-density-v1 · Scan date: 2026-10-31.
Can maintainers explain intent, assumptions, and trade-offs? 75 finding(s).
Are imports declared and package/API names verified? 65 finding(s).
Are wrappers, guards, and repeated structures necessary? 75 finding(s).
Which changes need focused human review? 155 finding(s).
This chart tracks the legacy adjusted pattern score across scan runs. Changes can reflect source changes, scan coverage, or detector/scoring versions; they do not measure AI adoption or prove that a team refactored code. Compare runs only when their scoring versions are compatible. The dashed line tracks the raw pattern-hit count.
Groups findings by configured severity weight. Severity is not a confidence estimate, security rating, or proof that a package is missing. Verify imports against the project's manifests and inspect each finding in its local design context.
This horizontal bar chart shows where configured pattern scores accumulate across directories. Treat the bars as locations to inspect, not as evidence of authorship or code quality. Use the file-level findings to decide whether a directory needs a focused ownership, dependency, complexity, or review check.
The scanner identified 155 distinct pattern matches across 4 syntactic categories. Each entry below represents a discrete location in the source code where the engine recorded a detector match to inspect in context. Expand any category row to inspect the individual file paths, line numbers, code snippets, and the lexical context (CODE, COMMENT, or STRING) in which each match was detected.
Reading the findings table: The Severity column indicates the configured finding weight (CRITICAL / HIGH / MEDIUM / LOW). The Context column identifies whether the match occurred inside executable code, an inline comment, or a string literal — legacy comment-context matches receive a ×1.5 score weight. The ⚡ bolt icon marks clustered matches: three or more patterns within a 10-line window, each receiving an additional ×1.5 density multiplier under the legacy scoring model.
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | docs/content/meta/EditableRoot.md | 76 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/RangeCalendarRoot.md | 153 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/DateFieldRoot.md | 104 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/TimeFieldRoot.md | 98 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/MonthPickerRoot.md | 106 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/MonthRangePickerRoot.md | 119 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/DateRangePickerRoot.md | 171 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/YearPickerRoot.md | 106 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/TagsInputInput.md | 31 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/DateRangeFieldRoot.md | 104 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/TimeRangeFieldRoot.md | 104 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/YearRangePickerRoot.md | 119 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/DatePickerRoot.md | 145 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/ColorFieldRoot.md | 71 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/PinInputRoot.md | 67 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/SelectValue.md | 19 | 'name': 'placeholder', | CODE |
| LOW | docs/content/meta/CalendarRoot.md | 134 | 'name': 'placeholder', | CODE |
| LOW | …/components/examples/DatePickerViewSwitching/index.vue | 113 | v-model:placeholder="placeholder" | CODE |
| LOW | …/components/examples/DatePickerViewSwitching/index.vue | 202 | v-model:placeholder="placeholder" | CODE |
| LOW | …/components/examples/DatePickerViewSwitching/index.vue | 274 | v-model:placeholder="placeholder" | CODE |
| LOW | docs/components/examples/DialogGestureDriven/index.vue | 117 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | CODE |
| LOW | docs/components/examples/DialogGestureDriven/index.vue | 117 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | CODE |
| LOW | docs/components/examples/DateRangePresets/index.vue | 75 | v-model:placeholder="placeholder" | CODE |
| LOW | packages/core/src/NavigationMenu/story/_StoryFrame.vue | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus | CODE |
| LOW | packages/core/src/NavigationMenu/story/_StoryFrame.vue | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus | CODE |
| LOW | …kages/core/src/YearRangePicker/YearRangePickerRoot.vue | 196 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | …kages/core/src/YearRangePicker/YearRangePickerRoot.vue | 385 | :date="placeholder" | CODE |
| LOW | packages/core/src/TimeField/TimeFieldRoot.vue | 172 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/Calendar/CalendarRoot.vue | 201 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/Calendar/CalendarRoot.vue | 356 | :date="placeholder" | CODE |
| LOW | …ages/core/src/Calendar/story/CalendarPopover.story.vue | 29 | v-model:placeholder="placeholder" | CODE |
| LOW | …es/core/src/Calendar/story/CalendarChromatic.story.vue | 36 | :default-placeholder="placeholder" | CODE |
| LOW | …es/core/src/Calendar/story/CalendarChromatic.story.vue | 42 | v-model:placeholder="placeholder" | CODE |
| LOW | packages/core/src/TimeRangeField/TimeRangeFieldRoot.vue | 268 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/DatePicker/DatePickerRoot.vue | 132 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/DateRangeField/DateRangeFieldRoot.vue | 152 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/TagsInput/TagsInputInput.vue | 179 | :placeholder="placeholder" | CODE |
| LOW | packages/core/src/YearPicker/YearPickerRoot.vue | 163 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/YearPicker/YearPickerRoot.vue | 302 | :date="placeholder" | CODE |
| LOW | packages/core/src/ScrollArea/story/_ScrollAreaCopy.vue | 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet eros | CODE |
| LOW | packages/core/src/ScrollArea/story/_ScrollAreaCopy.vue | 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet eros | CODE |
| LOW | packages/core/src/ColorField/ColorField.test.ts | 146 | expect(input.attributes('placeholder')).toBe('Enter color') | CODE |
| LOW | packages/core/src/ColorField/story/_ColorField.vue | 29 | :placeholder="placeholder" | CODE |
| LOW | packages/core/src/RangeCalendar/RangeCalendar.test.ts | 336 | :placeholder="placeholder" | CODE |
| LOW | packages/core/src/RangeCalendar/RangeCalendarRoot.vue | 257 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/RangeCalendar/RangeCalendarRoot.vue | 483 | :date="placeholder" | CODE |
| LOW | …c/RangeCalendar/story/RangeCalendarChromatic.story.vue | 37 | :default-placeholder="placeholder" | CODE |
| LOW | …c/RangeCalendar/story/RangeCalendarChromatic.story.vue | 42 | <RangeCalendar v-model:placeholder="placeholder" /> | CODE |
| LOW | …src/RangeCalendar/story/RangeCalendarPopover.story.vue | 25 | v-model:placeholder="placeholder" | CODE |
| LOW | …ges/core/src/Popover/story/PopoverForceMount.story.vue | 47 | defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. | CODE |
| LOW | …ges/core/src/Popover/story/PopoverForceMount.story.vue | 47 | defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. | CODE |
| LOW | …kages/core/src/Popover/story/PopoverModality.story.vue | 46 | defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. | CODE |
| LOW | …kages/core/src/Popover/story/PopoverModality.story.vue | 46 | defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. | CODE |
| LOW | …kages/core/src/Popover/story/PopoverModality.story.vue | 80 | defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. | CODE |
| LOW | …kages/core/src/Popover/story/PopoverModality.story.vue | 80 | defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. | CODE |
| LOW | …kages/core/src/DateRangePicker/DateRangePickerRoot.vue | 145 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/DateField/DateFieldRoot.vue | 159 | const placeholder = useVModel(props, 'placeholder', emits, { | CODE |
| LOW | packages/core/src/Editable/EditableInput.vue | 58 | :placeholder="placeholder" | CODE |
| LOW | packages/core/src/Editable/Editable.test.ts | 170 | await userEvent.type(input, 'lorem ipsum dolor sit amet') | CODE |
| LOW | packages/core/src/Editable/Editable.test.ts | 170 | await userEvent.type(input, 'lorem ipsum dolor sit amet') | CODE |
| 5 more matches not shown… | ||||
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | docs/scripts/autogen.ts | 234 | function getEventFromComponentPath(dir: string) { | CODE |
| LOW | packages/core/scripts/postbuild.ts | 4 | function removeContentsFromSourceMaps(path = new URL('../dist/', import.meta.url)) { | CODE |
| LOW | …ages/core/src/NavigationMenu/NavigationMenuTrigger.vue | 134 | function handleVisuallyHiddenFocus(ev: FocusEvent) { | CODE |
| LOW | packages/core/src/Tree/story/TreeVirtual.story.vue | 6 | function groupCountriesByFirstLetter(countries: string[]) { | CODE |
| LOW | packages/core/src/Popper/utils.ts | 70 | export function getSideAndAlignFromPlacement(placement: Placement) { | CODE |
| LOW | packages/core/src/Drawer/utils.ts | 23 | export function createNestedSwipeProgressStore(): NestedSwipeProgressStore & { | CODE |
| LOW | packages/core/src/Drawer/utils.ts | 81 | export function computeSwipeReleaseScalar(params: { | CODE |
| LOW | packages/core/src/Drawer/utils.ts | 178 | export function registerDrawerCssProperties() { | CODE |
| LOW | packages/core/src/Drawer/DrawerContent.vue | 59 | function onInteractOutsideNonModal(e: any) { | CODE |
| LOW | packages/core/src/Drawer/DrawerContentImpl.vue | 291 | function clearOpenCompleteListener() { | CODE |
| LOW | …ore/src/Drawer/composables/useDrawerVirtualKeyboard.ts | 82 | export function resolveKeyboardInputTarget(target: EventTarget | null): HTMLElement | null { | CODE |
| LOW | …ore/src/Drawer/composables/useDrawerVirtualKeyboard.ts | 93 | function resolveKeyboardTouchTarget(target: EventTarget | null): KeyboardTouchTarget | null { | CODE |
| LOW | …ore/src/Drawer/composables/useDrawerVirtualKeyboard.ts | 108 | function resolveKeyboardTouchTargetFromPoint( | CODE |
| LOW | …ore/src/Drawer/composables/useDrawerVirtualKeyboard.ts | 165 | function overrideGeometryDuringFocus(target: HTMLElement, translateY: number): () => void { | CODE |
| LOW | …ore/src/Drawer/composables/useDrawerVirtualKeyboard.ts | 183 | function focusKeyboardInputWithoutPageScroll(target: HTMLElement) { | CODE |
| LOW | packages/core/src/PinInput/PinInputInput.vue | 236 | function removeTrailingEmptyStrings(input: PinInputContextValue<typeof context.type.value>) { | CODE |
| LOW | packages/core/src/DismissableLayer/utils.ts | 101 | function handleAndDispatchPointerDownOutsideEvent() { | CODE |
| LOW | packages/core/src/DismissableLayer/utils.ts | 101 | function handleAndDispatchPointerDownOutsideEvent() { | CODE |
| LOW | packages/core/src/Toast/utils.ts | 20 | export function handleAndDispatchCustomEvent< | CODE |
| LOW | packages/core/src/Toast/ToastViewport.vue | 184 | function getSortedTabbableCandidates({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) { | CODE |
| LOW | packages/core/src/Splitter/SplitterGroup.vue | 174 | function getPanelConstraintsInPercent(groupSizeOverride?: number | null) { | CODE |
| LOW | packages/core/src/Splitter/SplitterGroup.vue | 183 | function getPanelDataWithPercentConstraints(groupSizeOverride?: number | null) { | CODE |
| LOW | packages/core/src/Splitter/SplitterGroup.vue | 198 | function convertLayoutToNativeUnits(internalLayout: number[]): number[] { | CODE |
| LOW | packages/core/src/Splitter/SplitterGroup.vue | 591 | function reevaluatePanelConstraints(panelData: PanelData, prevConstraints: PanelConstraints) { | CODE |
| LOW | packages/core/src/Splitter/utils/dom.ts | 65 | export function getResizeHandleElementIndex( | CODE |
| LOW | packages/core/src/Splitter/utils/dom.ts | 79 | export function getResizeHandleElementsForGroup( | CODE |
| LOW | packages/core/src/Splitter/utils/storage.ts | 70 | function loadSerializedPanelGroupState( | CODE |
| LOW | packages/core/src/Splitter/utils/events.ts | 15 | export function getResizeEventCoordinates(event: ResizeEvent) { | CODE |
| LOW | packages/core/src/Splitter/utils/events.ts | 38 | export function getResizeEventCursorPosition( | CODE |
| LOW | packages/core/src/Splitter/utils/registry.ts | 168 | function recalculateIntersectingHandles({ | CODE |
| LOW | packages/core/src/Splitter/utils/registry.ts | 251 | export function reportConstraintsViolation( | CODE |
| LOW | packages/core/src/Splitter/utils/registry.ts | 345 | function updateResizeHandlerStates( | CODE |
| LOW | packages/core/src/Splitter/utils/calculate.ts | 7 | export function calculateDragOffsetPercentage( | CODE |
| LOW | packages/core/src/Splitter/utils/calculate.ts | 138 | export function calculateUnsafeDefaultLayout({ | CODE |
| LOW | packages/core/src/Splitter/utils/units.ts | 29 | export function convertPanelConstraintsToPercent({ | CODE |
| LOW | packages/core/src/Splitter/utils/units.ts | 90 | export function recalculateLayoutForPixelPanels({ | CODE |
| LOW | …plitter/utils/composables/useWindowSplitterBehavior.ts | 9 | export function useWindowSplitterResizeHandlerBehavior({ | CODE |
| LOW | …ils/composables/useWindowSplitterPanelGroupBehavior.ts | 13 | export function useWindowSplitterPanelGroupBehavior({ | CODE |
| LOW | …ckages/core/src/shared/handleAndDispatchCustomEvent.ts | 1 | export function handleAndDispatchCustomEvent< | CODE |
| LOW | packages/core/src/shared/color/gradient.ts | 121 | function getChannelGradientForArea( | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 302 | function minuteSecondIncrementation({ e, part, dateRef, prevValue }: MinuteSecondIncrementProps): number { | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 328 | function dateTimeValueIncrementation({ e, part, dateRef, prevValue }: DateTimeValueIncrementation): number { | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 672 | function handleMonthSegmentKeydown(e: KeyboardEvent) { | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 791 | function handleMinuteSegmentKeydown(e: KeyboardEvent) { | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 820 | function handleSecondSegmentKeydown(e: KeyboardEvent) { | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 848 | function handleDayPeriodSegmentKeydown(e: KeyboardEvent) { | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 968 | function handleSegmentCompositionStart(e: CompositionEvent) { | CODE |
| LOW | packages/core/src/shared/date/useDateField.ts | 973 | function handleSegmentCompositionEnd(e: CompositionEvent) { | CODE |
| LOW | packages/core/src/shared/date/segment.ts | 42 | export function getTimeFieldSegmentElements(parentElement: HTMLElement): Element[] { | CODE |
| LOW | packages/core/src/shared/date/utils.ts | 56 | export function handleCalendarInitialFocus(calendar: HTMLElement) { | CODE |
| LOW | packages/core/src/shared/date/parser.ts | 45 | export function initializeTimeSegmentValues(granularity: 'hour' | 'minute' | 'second'): SegmentValueObj { | CODE |
| LOW | packages/core/src/ScrollArea/utils.ts | 33 | export function addUnlinkedScrollListener( | CODE |
| LOW | packages/core/src/ScrollArea/utils.ts | 77 | export function getScrollPositionFromPointer( | CODE |
| LOW | packages/core/src/ScrollArea/utils.ts | 100 | export function isScrollingWithinScrollbarBounds( | CODE |
| LOW | …ges/core/src/Combobox/useComboboxContentPositioning.ts | 5 | export function useComboboxContentPositioning( | CODE |
| LOW | packages/core/src/Combobox/ComboboxContentImpl.vue | 124 | function isEventTargetWithinCombobox(target: EventTarget | null) { | CODE |
| LOW | packages/core/src/Combobox/Combobox.test.ts | 1302 | async function mountVirtualPopperCombobox() { | CODE |
| LOW | packages/core/src/Dialog/Dialog.test.ts | 38 | function renderAndClickDialogTrigger(Dialog: any) { | CODE |
| LOW | packages/core/src/DateField/DateField.test.ts | 50 | function zonedDateTimeInForeignZone() { | CODE |
| LOW | packages/core/src/Select/SelectContent.vue | 49 | function clearRenderPresenceTimeout() { | CODE |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 5 | // ───────────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 7 | // ───────────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 89 | // ───────────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 91 | // ───────────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 182 | // ───────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 184 | // ───────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 246 | // ───────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/shared/color/gradient.test.ts | 248 | // ───────────────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/ColorArea/ColorArea.test.ts | 13 | // ─── Helpers ───────────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/ColorArea/ColorArea.test.ts | 35 | // ─── Accessibility ──────────────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/ColorArea/ColorArea.test.ts | 78 | // ─── Pointer interaction ───────────────────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/ColorArea/ColorArea.test.ts | 135 | // ─── HSL Saturation(x) / Lightness(y) ──────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/ColorArea/ColorArea.test.ts | 351 | // ─── HSL Hue(x) / Saturation(y) — default channels ─────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/ColorArea/ColorArea.test.ts | 404 | // ─── HSB Saturation(x) / Brightness(y) ─────────────────────────────────────── | COMMENT |
| MEDIUM | packages/core/src/ColorArea/ColorArea.test.ts | 479 | // ─── RGB Red(x) / Green(y) ──────────────────────────────────────────────────── | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | playground/vue3/src/vite-env.d.ts | 1 | /// <reference types="vite/client" /> | COMMENT |
| LOW | docs/scripts/autogen.ts | 21 | const checkerOptions: MetaCheckerOptions = { | COMMENT |
| LOW | packages/core/src/Drawer/DrawerContentImpl.vue | 181 | const dir = rootContext.swipeDirection.value | COMMENT |
| LOW | packages/core/src/DismissableLayer/DismissableLayer.vue | 181 | // Remove this layer from the set and release its share of the body's | COMMENT |
| LOW | packages/core/src/Checkbox/CheckboxRoot.vue | 101 | COMMENT | |
| LOW | packages/core/src/Splitter/utils/layout.ts | 41 | assert(secondPivotIndex != null) | COMMENT |
| LOW | packages/core/src/Splitter/utils/registry.ts | 201 | // We listen for pointers events at the root in order to support hit area margins | COMMENT |
| LOW | packages/core/src/shared/useGraceArea.test.ts | 1 | import type { Ref } from 'vue' | COMMENT |
| LOW | packages/core/src/shared/useComposing.ts | 21 | // processed. Android soft keyboards (Gboard, Samsung Keyboard, …) keep the | COMMENT |
| LOW | packages/core/src/shared/date/useDateField.ts | 941 | if (Object.values(props.segmentValues.value).every(item => item !== null)) { | COMMENT |
| LOW | packages/core/src/Combobox/Combobox.test.ts | 321 | it('should render the icon', () => { | COMMENT |
| LOW | packages/core/src/Combobox/Combobox.test.ts | 341 | // it('should filter with the searchTerm (Bl', async () => { | COMMENT |
| LOW | packages/core/src/FocusScope/FocusScope.vue | 121 | // 2. In Google Chrome, when the focused element is removed from the DOM. | COMMENT |
| LOW | packages/core/src/FocusScope/FocusScope.vue | 161 | // is only tracked while the scope is not paused, so an open popper (which pauses | COMMENT |
| LOW | .github/workflows/claude.yml | 41 | actions: read | COMMENT |