@dsh-workbench/shared 1.1.8 → 1.1.10

package/dist/testing/fake-adapter-set.d.ts

@@ -0,0 +1,5 @@
+import type { AdapterSet } from '../host/adapters.js';
+export declare const FAKE_ADAPTER_MARKER: {
+    readonly adapterSet: "fake";
+};
+export declare function fakeAdapterSet(overrides?: Partial<AdapterSet>): AdapterSet;

package/dist/testing/fake-adapter-set.js

@@ -0,0 +1,150 @@
+import { ADAPTER_SET_API_VERSION } from '../host/adapters.js';
+import { readBundleManager } from '../host/bundle-manager.js';
+import { declarationGaps, moduleDeclarationOf, profileDirOf, profileModules, readInstalledModule, readProfilePackage, } from '../host/installed-module.js';
+import { isNewerVersion } from '../host/version.js';
+import { refusalReason } from '../host/spec.js';
+import { declarationRefusalOf, pathDeclarationOf } from '../host/local-declaration.js';
+import { createRegistryLookup } from '../host/registry-declaration.js';
+import { createPackageRouter } from '../host/package-route.js';
+import { createReleaseProbe } from '../host/release-probe.js';
+export const FAKE_ADAPTER_MARKER = { adapterSet: 'fake' };
+function result() {
+    return { ok: true, data: FAKE_ADAPTER_MARKER };
+}
+const data = {
+    async read(_request) {
+        return result();
+    },
+    async request(_recipe) {
+        return result();
+    },
+    async requestMany(_recipe, _calls) {
+        return {};
+    },
+    async submit(_recipe) {
+        return result();
+    },
+};
+const supply = {
+    resolvePluginSource: () => ({ ok: false, problem: 'not-declared' }),
+    libInstallCommand: () => '',
+    libUninstallCommand: () => '',
+    pluginInstallPlan: () => ({ ok: false, problem: 'not-declared' }),
+    latestVersion: async () => undefined,
+    missingReleaseParts: async () => [],
+    probeRelease: async () => undefined,
+    splitNpmSpec: () => undefined,
+};
+const modules = {
+    isolatedRoot: () => '/tmp/dsh-workbench-fake',
+    isolatedHome: () => '/tmp/dsh-workbench-fake/home',
+    pluginPackagePrefix: () => 'fake-plugin-',
+    pluginManifestFile: () => 'fake-plugin.json',
+    cliCatalogPath: () => '/tmp/dsh-workbench-fake/catalog.json',
+    vendorPluginsDir: () => '/tmp/dsh-workbench-fake/plugins',
+    runtimeInstallCommand: () => 'npm i -g fake-runtime',
+    afterLibInstall: () => undefined,
+    profileDirOf: (ctx) => profileDirOf(ctx),
+    profileModules,
+    readInstalledModule,
+    readProfilePackage,
+    readBundleManager,
+    createRegistryNotebook: () => ({}),
+    declarationGaps,
+    moduleDeclarationOf,
+    registryDeclarationOf: async () => undefined,
+    pathDeclarationOf,
+    declarationRefusalOf,
+    refusalReason,
+    packageRouteOf: async () => undefined,
+    isNewerVersion,
+    startSelfUpdate: () => ({}),
+};
+const profile = {
+    dirOf: () => null,
+    dshPlugins: () => () => ({ ok: true, plugins: [] }),
+    selfUpdateView: () => undefined,
+};
+const probe = {
+    probeUnits: async () => [],
+    registerPreflight: () => undefined,
+    declaredPluginCommands: () => new Map(),
+};
+const runtimePreset = (capabilities) => ({
+    packageRoot: () => '/tmp/dsh-workbench-fake',
+    capabilities: () => capabilities,
+    profile: () => ({
+        label: 'fake',
+        terms: {
+            plugin: { zh: '插件', en: 'plugin' },
+            pluginOf: { zh: '的插件', en: 'a plugin of' },
+            pluginThing: { zh: '插件', en: 'a plugin' },
+            pluginArea: { zh: '插件区', en: 'the plugin area' },
+        },
+        installHint: { zh: '无', en: 'nothing to install' },
+        diagnose: {},
+    }),
+    commandSurface: () => ({
+        name: 'fake',
+        pluginPrefix: 'fake-plugin-',
+        invoke: (site, command) => (command === undefined ? `fake ${site}` : `fake ${site} ${command}`),
+        help: (site) => `fake ${site} --help`,
+        browser: (verb) => `fake browser ${verb.join(' ')}`,
+    }),
+    commands: () => ({}),
+    runners: () => ({}),
+    health: () => ({}),
+    seed: () => undefined,
+    warnUnwritableRoot: () => undefined,
+});
+const plugins = {
+    declarationLookup: () => () => undefined,
+    createUnits: () => ({
+        refresh: async () => ({ units: [] }),
+        touch: () => undefined,
+        report: () => ({ units: [] }),
+        dispose: () => undefined,
+    }),
+};
+const actions = {
+    configSyncHandler: () => (async () => ({ ok: true })),
+    profileCreateHandler: () => (async () => ({ ok: true })),
+    configSyncAction: () => ({}),
+    profileCreateAction: () => ({}),
+};
+export function fakeAdapterSet(overrides = {}) {
+    const release = createReleaseProbe();
+    const registry = createRegistryLookup();
+    const router = createPackageRouter({ manifestFile: 'fake-plugin.json', dshLookup: registry.registryDshOf });
+    const withRelease = {
+        ...supply,
+        latestVersion: release.latestVersion,
+        missingReleaseParts: release.missingReleaseParts,
+        probeRelease: release.probeRelease,
+    };
+    return {
+        apiVersion: ADAPTER_SET_API_VERSION,
+        id: 'fake-adapter-set',
+        version: '0.0.0',
+        data,
+        supply: {
+            ...withRelease,
+            ...modules,
+            env: withRelease,
+            modules,
+            registryDeclarationOf: registry.registryDeclarationOf,
+            packageRouteOf: router.packageRouteOf,
+        },
+        modules,
+        profile,
+        probe,
+        runtime: runtimePreset({
+            console: false,
+            pluginMarket: false,
+            browserBridge: false,
+        }),
+        plugins,
+        actions,
+        ...overrides,
+    };
+}

package/dist/testing/needs.js

@@ -7,7 +7,7 @@ export const fakeNpmSource = {
 export function extensionNeedOf(name, extra = {}) {
     return {
         kind: 'extension',
-        runtime: 'opencli',
+        runtime: 'fake-runtime',
         name,
         commands: [`${name}-read`],
         purpose: '测试',

package/dist/testing.d.ts

@@ -2,3 +2,4 @@ export * from './testing/host-fakes.js';
 export * from './testing/declaration.js';
 export * from './testing/needs.js';
 export * from './testing/data.js';
+export * from './testing/fake-adapter-set.js';

package/dist/testing.js

@@ -2,3 +2,4 @@ export * from './testing/host-fakes.js';
 export * from './testing/declaration.js';
 export * from './testing/needs.js';
 export * from './testing/data.js';
+export * from './testing/fake-adapter-set.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-workbench/shared",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "工作台与模块共享的纯代码与契约类型：类型、纯逻辑、哑组件、平台解析。宿主侧的东西从 /host 进（不影响浏览器产物）。",
   "license": "MIT",
   "type": "module",

package/src/api/__tests__/blocker-table.test.ts

@@ -313,3 +313,28 @@ describe('blockerOfCapability', () => {
     expect(blocker?.actions.map((action) => action.kind)).toEqual(['retry']);
   });
 });
+
+describe('执行类失败的话术由适配器给', () => {
+  it('适配器给了 diagnose.exec 就用它，不再说默认那句', () => {
+    const blocker = blockerOfError(
+      { code: 'cli-exec-failed', message: '跑不起来' },
+      t,
+      { diagnose: { exec: '确认 MCP server 起得来：npx -y chrome-devtools-mcp@latest' } },
+    );
+    expect(blocker.hint).toBe('确认 MCP server 起得来：npx -y chrome-devtools-mcp@latest');
+  });
+
+  it('适配器没给就回词表那句（opencli 那份）', () => {
+    const blocker = blockerOfError({ code: 'cli-exec-failed', message: '跑不起来' }, t);
+    expect(blocker.hint).toBe('blocker.exec.hint');
+  });
+
+  it('错误自己带的 hint 优先级最高', () => {
+    const blocker = blockerOfError(
+      { code: 'cli-exec-failed', message: '跑不起来', hint: '端口被占了' },
+      t,
+      { diagnose: { exec: '确认 MCP server 起得来' } },
+    );
+    expect(blocker.hint).toBe('端口被占了');
+  });
+});

package/src/api/{workbench-client.test.ts → __tests__/workbench-client.test.ts}

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { API_PREFIX } from '../config/constants.js';
-import { apiGet } from './workbench-client.js';
+import { API_PREFIX } from '../../config/constants.js';
+import { apiGet } from '../workbench-client.js';
 
 interface FetchRecord {
   url: string;

package/src/api/blocker-table.ts

@@ -22,7 +22,11 @@ function copyAction(t: Translate, text: string): BlockerAction {
 export function blockerOfError(
   error: ApiError | undefined,
   t: Translate,
-  context: { path?: string | null; platform?: string } = {},
+  context: {
+    path?: string | null;
+    platform?: string;
+    diagnose?: Readonly<Partial<Record<'exec' | 'login' | 'bridge', string>>>;
+  } = {},
 ): ModuleBlocker {
   if (error === undefined) {
     return {
@@ -93,7 +97,7 @@ export function blockerOfError(
         id: 'cli-exec-failed',
         severity: 'block',
         title: error.message,
-        hint: error.hint ?? t('blocker.exec.hint'),
+        hint: error.hint ?? context.diagnose?.exec ?? t('blocker.exec.hint'),
         ...(error.detail === undefined ? {} : { detail: error.detail }),
         actions: [retryAction(t)],
       };

package/src/components/SelectField.css

@@ -70,12 +70,6 @@
   justify-content: center;
 }
 
-.wb-selectReveal {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .wb-selectIconOnly .wb-selectIcon {
   width: 100%;
   height: 100%;

package/src/components/SelectField.tsx

@@ -56,7 +56,6 @@ export interface SelectFieldProps {
   readonly selection?: 'check' | 'fill' | undefined;
   readonly variant?: 'ghost' | 'boxed' | undefined;
   readonly iconOnly?: boolean | undefined;
-  readonly revealId?: string | undefined;
   readonly ariaLabel?: string | undefined;
   readonly title?: string | undefined;
   readonly id?: string | undefined;
@@ -76,41 +75,15 @@ function triggerClassOf(variantClass: string | undefined, iconOnly: boolean): st
   return mergeClass('wb-selectTrigger', variantClass, iconOnly ? 'wb-selectIconOnly' : undefined);
 }
 
-function itemOf(option: SelectFieldOption, revealId: string | undefined): MenuItem {
-  const mark = option.value === revealId;
-  if (!mark) {
-    return {
-      id: option.value,
-      label: option.label,
-      ...(option.icon === undefined ? {} : { icon: option.icon }),
-      ...(option.disabled === true ? { disabled: true } : {}),
-    };
-  }
-  const revealed = (node: ReactNode): ReactNode => (
-    <span className="wb-selectReveal" data-wb-select-reveal="">
-      {node}
-    </span>
-  );
+function itemOf(option: SelectFieldOption): MenuItem {
   return {
     id: option.value,
-    label: option.icon === undefined ? revealed(option.label) : option.label,
-    ...(option.icon === undefined ? {} : { icon: revealed(option.icon) }),
+    label: option.label,
+    ...(option.icon === undefined ? {} : { icon: option.icon }),
     ...(option.disabled === true ? { disabled: true } : {}),
   };
 }
 
-function revealNode(): HTMLElement | null {
-  const found = document.querySelector('[data-wb-select-reveal]');
-  return found instanceof HTMLElement ? found : null;
-}
-
-function useRevealOnOpen(open: boolean, revealId: string | undefined): void {
-  useEffect(() => {
-    if (!open || revealId === undefined) return;
-    revealNode()?.scrollIntoView({ block: 'nearest' });
-  }, [open, revealId]);
-}
-
 function selectValueNode(
   current: SelectFieldOption | undefined,
   renderValue: SelectFieldProps['renderValue'],
@@ -251,11 +224,10 @@ export function stepSelectCursor(
   return (cursor + step + shown.length) % shown.length;
 }
 
-/** 把候选排成 `Menu` 要的条目表：按 `group` 插分组标题；一项都没有时退回 `emptyText` 那一行（不给就是空表）。`revealId` 是开列表时要滚进可视区的那个 value。 */
+/** 把候选排成 `Menu` 要的条目表：按 `group` 插分组标题；一项都没有时退回 `emptyText` 那一行（不给就是空表）。 */
 export function selectEntries(
   shown: readonly SelectFieldOption[],
   emptyText: string | undefined,
-  revealId?: string | undefined,
 ): readonly MenuEntry[] {
   if (shown.length === 0) {
     return emptyText === undefined ? [] : [{ type: 'label', id: EMPTY_ID, text: emptyText }];
@@ -267,7 +239,7 @@ export function selectEntries(
       out.push({ type: 'label', id: `__wb-select-group-${String(out.length)}`, text: option.group });
       group = option.group;
     }
-    out.push(itemOf(option, revealId));
+    out.push(itemOf(option));
   }
   return out;
 }
@@ -372,7 +344,6 @@ export function SelectField(props: SelectFieldProps) {
     selection = 'fill',
     variant = 'boxed',
     iconOnly = false,
-    revealId,
     ariaLabel,
     title,
     id,
@@ -383,7 +354,6 @@ export function SelectField(props: SelectFieldProps) {
   const state = useSelectState(props);
   const current = options.find((option) => option.value === value);
 
-  useRevealOnOpen(state.open, revealId);
   const variantClass = variant === 'ghost' ? 'wb-selectGhost' : undefined;
   const triggerClass = triggerClassOf(variantClass, iconOnly);
 
@@ -425,6 +395,7 @@ export function SelectField(props: SelectFieldProps) {
     value: selectValueNode(current, renderValue, placeholder),
     iconOnly,
     onOpen: () => state.setOpen(true),
+    ref: state.triggerRef,
   });
 
   const anchor =
@@ -470,7 +441,7 @@ export function SelectField(props: SelectFieldProps) {
       anchor,
       selection,
       selectedId: selectCursorValue(state.shown, state.cursor) ?? undefined,
-      items: selectEntries(state.shown, state.empty, revealId),
+      items: selectEntries(state.shown, state.empty),
       footer:
         footer === undefined
           ? undefined

package/src/components/SelectFieldNodes.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { Fragment, h } from '../lib/react.js';
 import {
   IconChevronDownOutlineRegular,
@@ -19,6 +19,7 @@ import { Spinner } from './Spinner.js';
  * @param args.value - 已渲染好的当前值节点（文本或占位）。
  * @param args.iconOnly - 只画图标（窄栏那颗切换钮），值与箭头都不画。
  * @param args.onOpen - 点它做什么，通常是把列表打开。
+ * @param args.ref - 挂到这颗 `<button>` 上，取消后回焦点、菜单开着头条滚轮要用它。
  * @returns 一颗 `<button>`。
  */
 export function selectTriggerNode(args: {
@@ -33,10 +34,12 @@ export function selectTriggerNode(args: {
   readonly value: ReactNode;
   readonly iconOnly: boolean;
   readonly onOpen: () => void;
+  readonly ref: Ref<HTMLButtonElement> | undefined;
 }): ReactNode {
   return (
     <button
       type="button"
+      ref={args.ref}
       id={args.id}
       className={args.className}
       disabled={args.disabled}

package/src/components/{Card.test.tsx → __tests__/Card.test.tsx}

@@ -1,10 +1,10 @@
 import { describe, expect, it, vi } from 'vitest';
 
-vi.mock('../lib/react.js', () => ({
+vi.mock('../../lib/react.js', () => ({
   h: (type: unknown, props: unknown, ...children: unknown[]) => ({ type, props, children }),
 }));
 
-import { Card, type CardProps } from './Card.js';
+import { Card, type CardProps } from '../Card.js';
 
 const t = (key: string): string => key;
 

package/src/components/{CardAnchor.test.tsx → __tests__/CardAnchor.test.tsx}

@@ -1,12 +1,12 @@
 import { describe, expect, it, vi } from 'vitest';
 
-vi.mock('../lib/react.js', () => ({
+vi.mock('../../lib/react.js', () => ({
   h: (type: unknown, props: unknown, ...children: unknown[]) => ({ type, props, children }),
 }));
 
-vi.mock('./CardAnchor.module.css', () => ({ default: { anchor: 'wb-anchor' } }));
+vi.mock('../CardAnchor.module.css', () => ({ default: { anchor: 'wb-anchor' } }));
 
-import { CardAnchor, cardIdOf } from './CardAnchor.js';
+import { CardAnchor, cardIdOf } from '../CardAnchor.js';
 
 interface AnyElement {
   readonly type: unknown;

package/src/components/{CardHead.test.tsx → __tests__/CardHead.test.tsx}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { CardHead } from './CardHead.js';
+import { CardHead } from '../CardHead.js';
 
 interface AnyElement {
   readonly type: unknown;

package/src/components/{ChoiceGroup.test.tsx → __tests__/ChoiceGroup.test.tsx}

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
-import { Fragment, h } from '../lib/react.js';
-import { ChoiceGroup } from './ChoiceGroup.js';
+import { Fragment, h } from '../../lib/react.js';
+import { ChoiceGroup } from '../ChoiceGroup.js';
 
 interface AnyElement {
   readonly type: unknown;

package/src/components/{ConfirmBar.test.tsx → __tests__/ConfirmBar.test.tsx}

@@ -1,9 +1,9 @@
 import { readFileSync } from 'node:fs';
 import { describe, expect, it } from 'vitest';
-import { ConfirmBar, type ConfirmRow } from './ConfirmBar.js';
-import { FormActions, type FormAction } from './FormActions.js';
-import { Note } from './Note.js';
-import { Rows } from './Rows.js';
+import { ConfirmBar, type ConfirmRow } from '../ConfirmBar.js';
+import { FormActions, type FormAction } from '../FormActions.js';
+import { Note } from '../Note.js';
+import { Rows } from '../Rows.js';
 
 interface AnyElement {
   readonly type: unknown;
@@ -84,7 +84,7 @@ describe('确认条（契约类 wb-confirmBar）', () => {
   });
 });
 
-const CSS = readFileSync(new URL('./ConfirmBar.css', import.meta.url), 'utf8');
+const CSS = readFileSync(new URL('../ConfirmBar.css', import.meta.url), 'utf8');
 
 function declarations(selector: string): string[] {
   for (const block of CSS.split('}')) {

package/src/components/{Field.test.tsx → __tests__/Field.test.tsx}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { Field } from './Field.js';
+import { Field } from '../Field.js';
 
 function texts(node: unknown): string[] {
   if (node === null || node === undefined || typeof node === 'boolean') return [];

package/src/components/{Form.test.tsx → __tests__/Form.test.tsx}

@@ -1,6 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { describe, expect, it } from 'vitest';
-import type { FormField, FormValue } from './FormTypes.js';
+import type { FormField, FormValue } from '../FormTypes.js';
 import {
   duplicateKeysOf,
   formActionsOf,
@@ -11,9 +11,9 @@ import {
   formValuesOf,
   reportDuplicateKeys,
   visibleFieldsOf,
-} from './FormNodes.js';
-import { FormRow } from './FormRows.js';
-import type { FormAction } from './FormActions.js';
+} from '../FormNodes.js';
+import { FormRow } from '../FormRows.js';
+import type { FormAction } from '../FormActions.js';
 
 function field(key: string, value: FormValue, validate?: FormField['validate']): FormField {
   return {
@@ -444,7 +444,7 @@ describe('formRowsOf', () => {
   });
 });
 
-const CSS = readFileSync(new URL('./Form.css', import.meta.url), 'utf8');
+const CSS = readFileSync(new URL('../Form.css', import.meta.url), 'utf8');
 
 function declarations(selector: string): string[] {
   for (const block of CSS.split('}')) {

package/src/components/{FormActions.test.tsx → __tests__/FormActions.test.tsx}

@@ -1,7 +1,7 @@
 import { readFileSync } from 'node:fs';
 import { describe, expect, it, vi } from 'vitest';
-import { FormActions, type FormAction, type FormActionKind } from './FormActions.js';
-import { SaveBar } from './SaveBar.js';
+import { FormActions, type FormAction, type FormActionKind } from '../FormActions.js';
+import { SaveBar } from '../SaveBar.js';
 
 function action(key: string, kind?: FormActionKind): FormAction {
   return { key, label: key, ...(kind === undefined ? {} : { kind }), onClick: () => {} };
@@ -90,7 +90,7 @@ describe('FormActions', () => {
   });
 });
 
-const CSS = readFileSync(new URL('./FormActions.css', import.meta.url), 'utf8');
+const CSS = readFileSync(new URL('../FormActions.css', import.meta.url), 'utf8');
 
 function declarations(selector: string): string[] {
   for (const block of CSS.split('}')) {

package/src/components/{FormRows.test.tsx → __tests__/FormRows.test.tsx}

@@ -1,6 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { describe, expect, it } from 'vitest';
-import { FormRow, FormRows } from './FormRows.js';
+import { FormRow, FormRows } from '../FormRows.js';
 
 function texts(node: unknown): string[] {
   if (node === null || node === undefined || typeof node === 'boolean') return [];
@@ -111,7 +111,7 @@ describe('FormRow', () => {
   });
 });
 
-const FORM_CSS = readFileSync(new URL('./FormRows.css', import.meta.url), 'utf8');
+const FORM_CSS = readFileSync(new URL('../FormRows.css', import.meta.url), 'utf8');
 
 function normalize(selector: string): string {
   return selector

package/src/components/{FormTypes.test.ts → __tests__/FormTypes.test.ts}

@@ -1,5 +1,5 @@
 import { describe, expect, expectTypeOf, it } from 'vitest';
-import type { FormFieldOf, FormProps } from './FormTypes.js';
+import type { FormFieldOf, FormProps } from '../FormTypes.js';
 
 type Draft = { readonly env: string; readonly branch?: string };
 

package/src/components/{FormWiring.test.tsx → __tests__/FormWiring.test.tsx}

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
-import type { FormField, FormProps, FormValue } from './FormTypes.js';
-import { Form } from './Form.js';
+import type { FormField, FormProps, FormValue } from '../FormTypes.js';
+import { Form } from '../Form.js';
 
 function field(key: string, value: FormValue, validate?: FormField['validate']): FormField {
   return {
@@ -13,8 +13,8 @@ function field(key: string, value: FormValue, validate?: FormField['validate']):
   };
 }
 
-vi.mock('../lib/react.js', async () => {
-  const actual = await vi.importActual<Record<string, unknown>>('../lib/react.js');
+vi.mock('../../lib/react.js', async () => {
+  const actual = await vi.importActual<Record<string, unknown>>('../../lib/react.js');
   return {
     ...actual,
     useState: (initial: unknown) => [typeof initial === 'function' ? (initial as () => unknown)() : initial, () => {}],

package/src/components/{Link.test.tsx → __tests__/Link.test.tsx}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { Link } from './Link.js';
+import { Link } from '../Link.js';
 
 interface AnyElement {
   readonly type: unknown;

package/src/components/{Rows.test.tsx → __tests__/Rows.test.tsx}

@@ -1,6 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { describe, expect, it } from 'vitest';
-import { Row, Rows } from './Rows.js';
+import { Row, Rows } from '../Rows.js';
 
 function texts(node: unknown): string[] {
   if (node === null || node === undefined || typeof node === 'boolean') return [];
@@ -35,7 +35,7 @@ describe('Row', () => {
   });
 });
 
-const ROWS_CSS = readFileSync(new URL('./Rows.css', import.meta.url), 'utf8');
+const ROWS_CSS = readFileSync(new URL('../Rows.css', import.meta.url), 'utf8');
 const FLEX_CONTAINER = `.wb-rows {
   display: flex;
   flex-direction: column;