fix(web-ui): preserve scroll appearance metadata

design-system/packages/ui/src/components/ScrollArea/ScrollArea.tsx

@@ -8,22 +8,26 @@ export type ScrollbarVisibility = "auto" | "always" | "hidden";
 export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
   orientation?: ScrollAreaOrientation;
   scrollbarVisibility?: ScrollbarVisibility;
+  "data-bf-component"?: string;
+  "data-bf-part"?: string;
 }
 
 export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
   function ScrollArea({
     className,
     orientation = "vertical",
     scrollbarVisibility = "auto",
+    "data-bf-component": dataBfComponent = "scroll-area",
+    "data-bf-part": dataBfPart = "viewport",
     ...props
   }, ref) {
     return (
       <div
         {...props}
         className={classNames(styles.root, className)}
-        data-bf-component="scroll-area"
+        data-bf-component={dataBfComponent}
         data-bf-orientation={orientation}
-        data-bf-part="viewport"
+        data-bf-part={dataBfPart}
         data-bf-scrollbar-visibility={scrollbarVisibility}
         ref={ref}
       />

design-system/packages/ui/tests/scroll-area.test.mjs

@@ -30,6 +30,23 @@ test("ScrollArea exposes orientation and scrollbar visibility contracts", () =>
   assert.match(markup, /data-bf-scrollbar-visibility="always"/);
 });
 
+test("ScrollArea preserves caller-owned appearance metadata", () => {
+  const markup = renderToStaticMarkup(
+    createElement(
+      ScrollArea,
+      {
+        "data-bf-component": "model-settings",
+        "data-bf-part": "provider-list",
+      },
+      "Content",
+    ),
+  );
+
+  assert.match(markup, /data-bf-component="model-settings"/);
+  assert.match(markup, /data-bf-part="provider-list"/);
+  assert.match(markup, /data-bf-orientation="vertical"/);
+});
+
 test("ScrollArea styling uses public scrollbar tokens and preserves native scrolling", async () => {
   const styles = await readFile(
     new URL("../src/components/ScrollArea/ScrollArea.module.css", import.meta.url),

src/web-ui/src/infrastructure/config/components/HooksConfig.test.tsx

@@ -30,6 +30,7 @@ vi.mock('@bitfun/ui', () => ({
   Button: ({ children, disabled, onClick }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
     <button type="button" disabled={disabled} onClick={onClick}>{children}</button>
   ),
+  Icon: ({ name }: { name: string }) => <span data-icon={name} />,
   ConfirmDialog: ({ confirmText, isOpen, message, onConfirm, title }: {
     confirmText?: string;
     isOpen: boolean;