@canlooks/can-ui 0.0.102 → 0.0.104

package/dist/esm/components/card/card.style.js

@@ -37,16 +37,20 @@ export const style = defineCss(({ spacing, mode, background, divider, boxShadow,
                 @layer reset {
                     padding: ${spacing[8]}px;
 
+                    &[data-bordered=true] {
+                        border: 1px solid ${divider};
+                    }
+
                     &[data-elevation="0"] {
-                        background-color: ${gray(.1)};
+                        background-color: ${gray(.14)};
                     }
 
                     &[data-elevation="1"] {
-                        background-color: ${gray(.14)};
+                        background-color: ${gray(.18)};
                     }
 
                     &[data-elevation="2"] {
-                        background-color: ${gray(.2)};
+                        background-color: ${gray(.22)};
                     }
 
                     &[data-elevation="3"] {
@@ -54,11 +58,11 @@ export const style = defineCss(({ spacing, mode, background, divider, boxShadow,
                     }
 
                     &[data-elevation="4"] {
-                        background-color: ${gray(.34)};
+                        background-color: ${gray(.30)};
                     }
 
                     &[data-elevation="5"] {
-                        background-color: ${gray(.45)};
+                        background-color: ${gray(.34)};
                     }
                 }
         `

package/dist/esm/components/curd/curd.d.ts

@@ -26,6 +26,9 @@ export type LoadRowsReturn<R extends RowType = RowType> = {
 };
 type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
+    reload(): Promise<void>;
+    setPage(page: number): void;
+    setPageSize(size: number): void;
     openCreateDialog(defaultValue?: F): Promise<F> | undefined;
     selectSingle(): Promise<R> | undefined;
     selectMultiple(selected?: Id[]): Promise<Id[]> | undefined;

package/dist/esm/components/curd/curd.js

@@ -27,6 +27,15 @@ export const Curd = memo((props) => {
      * ref
      */
     useImperativeHandle(ref, () => ({
+        reload() {
+            return innerLoadRows();
+        },
+        setPage(page) {
+            setInnerPage(page);
+        },
+        setPageSize(size) {
+            setInnerPageSize(size);
+        },
         openCreateDialog(defaultValue) {
             return curdDialogRef.current?.open(void 0, defaultValue);
         },

package/dist/esm/components/dataGrid/dataGrid.d.ts

@@ -27,7 +27,21 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
     /**
      * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProps.onFilterClick}实现筛选逻辑
      * @enum FilterOptionsProps 传递至`OptionsBase`组件
+     * @example FilterOptionsProps
+     * {
+     *     filter: {
+     *         options: [
+     *             {value: '1', label: '选项1‘}
+     *         ]
+     *     }
+     * }
      * @enum FilterControlProps 自定义渲染气泡内容
+     * @example FilterControlProps
+     * {
+     *     filter: {
+     *         control: <Input/>
+     *     }
+     * }
      */
     filter?: boolean | FilterOptionsProps | FilterControlProps;
     /** @private 内部使用，在{@link useDataGridColumns}内赋值 */

package/dist/esm/components/dataGrid/dataGrid.style.js

@@ -59,12 +59,12 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
             -webkit-tap-highlight-color: transparent;
 
             &:hover {
-                background-color: ${gray(mode === 'light' ? .05 : .26)};
+                background-color: ${gray(mode === 'light' ? .05 : .2)};
             }
 
             &:active {
                 transition: background-color 0s;
-                background-color: ${gray(mode === 'light' ? .01 : .22)};
+                background-color: ${gray(mode === 'light' ? .09 : .24)};
             }
 
             &[data-ordering=true] {

package/dist/esm/components/dataGrid/dataGridHead.js

@@ -13,6 +13,8 @@ import { Button } from '../button';
 import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
 import { Bubble } from '../bubble';
 import { FilterBubbleContent } from './filterBubbleContent';
+import { useFormValueContext } from '../form';
+import { isUnset } from '../../utils';
 export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = useSelectionContext();
     const allSelectionStatus = useMemo(() => {
@@ -30,6 +32,7 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
             ? setValue(rows?.flatMap(r => r[primaryKey] ?? []) || [])
             : setValue([]);
     };
+    const { formValue } = useFormValueContext();
     const renderedHead = useRenderHead(Column => {
         const columnDefinitions = columnResizable ? flattedColumns : completedColumns;
         if (!columnDefinitions) {
@@ -80,7 +83,8 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
                 const sortable = sorter && !children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';
-                const filterButton = (_jsx(Button, { className: classes.filterButton, variant: "plain", color: "text.placeholder", onClick: e => {
+                const isFilteredColumn = !isUnset(formValue?.[_key]);
+                const filterButton = (_jsx(Button, { className: classes.filterButton, variant: "plain", color: isFilteredColumn ? 'primary' : 'text.placeholder', onClick: e => {
                         e.stopPropagation();
                         onFilterClick?.(_key, e);
                     }, children: _jsx(Icon, { icon: faFilter }) }));

package/dist/esm/components/dataGrid/filterBubbleContent.d.ts

@@ -2,7 +2,7 @@ import { MenuOptionType, OptionsBaseProps } from '../optionsBase';
 import { Id } from '../../types';
 import { FormItemChildren } from '../form';
 type FilterSharedProps = {
-    /** 是否显示`重置`与`确定`按钮，默认为`true` */
+    /** 是否显示`重置`按钮，默认为`true` */
     showButton?: boolean;
 };
 export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {

package/dist/esm/components/dataGrid/filterBubbleContent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { OptionsBase } from '../optionsBase';
 import { useFlatSelection } from '../selectionContext';
 import { Flex } from '../flex';
@@ -19,10 +19,10 @@ export const FilterBubbleContent = memo(({ columnKey, columnFilterProps }) => {
     return (_jsxs(_Fragment, { children: [_jsx(FormItem, { field: columnKey, children: 'control' in columnFilterProps
                     ? columnFilterProps.control
                     : _jsx(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false
-                ? _jsxs(Flex, { gap: 6, justifyContent: "flex-end", marginTop: 6, children: [_jsx(Button, { variant: "text", onClick: () => {
-                                formRef.current.setFieldValue(columnKey, null);
-                                setOpen(false);
-                            }, children: "\u91CD\u7F6E" }), _jsx(Button, { onClick: () => setOpen(false), children: "\u786E\u5B9A" })] })
+                ? _jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
+                            formRef.current.setFieldValue(columnKey, null);
+                            setOpen(false);
+                        }, children: "\u91CD\u7F6E" }) })
                 : _jsx(TriggerFilterOnChange, {})] }));
 });
 const FilterOptions = memo(({ multiple = true, showButton = true, value, onChange, ...props }) => {

package/dist/esm/components/inputBase/inputBase.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactElement, ReactNode, Ref } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 export interface InputBaseRef extends HTMLDivElement {
-    select?: HTMLInputElement['select'];
-    setSelectionRange?: HTMLInputElement['setSelectionRange'];
+    select: HTMLInputElement['select'];
+    setSelectionRange: HTMLInputElement['setSelectionRange'];
 }
 export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DivProps, 'ref' | 'prefix' | 'onChange' | 'children'> {
     ref?: Ref<InputBaseRef>;

package/dist/esm/components/pagination/jumper.d.ts

@@ -1,8 +1,9 @@
 import { Ref } from 'react';
 import { DivProps } from '../../types';
 import { InputProps } from '../input';
+import { InputBaseRef } from '../inputBase';
 export interface PaginationJumperProps extends DivProps {
     InputProps?: InputProps;
-    InputRef?: Ref<HTMLDivElement>;
+    InputRef?: Ref<InputBaseRef>;
 }
 export declare const PaginationJumper: import("react").MemoExoticComponent<({ InputProps, InputRef, ...props }: PaginationJumperProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/serialInput/serialInput.js

@@ -33,14 +33,28 @@ export const SerialInput = memo(({ separator, count = 1, defaultValue, value, on
                                 onFinish?.(newValue);
                             }
                         }
-                        else if (0 < index && prevLength === 1 && curr.length === 0) {
-                            // 聚焦前一个输入框
-                            inputRefs.current[index - 1].focus();
-                        }
                     },
-                    onKeyDown: ({ key }) => {
-                        if (key === 'Backspace' && innerValue.current[index].length === 0 && 0 < index) {
-                            inputRefs.current[index - 1].focus();
+                    onKeyDown: (e) => {
+                        switch (e.key) {
+                            case 'Backspace':
+                                if (innerValue.current[index].length === 0 && index > 0) {
+                                    const prevInput = inputRefs.current[index - 1];
+                                    prevInput.focus();
+                                    const selectionIndex = innerValue.current[index - 1].length;
+                                    prevInput.setSelectionRange(selectionIndex, selectionIndex);
+                                }
+                                break;
+                            case 'ArrowRight':
+                                if (index < count - 1) {
+                                    e.preventDefault();
+                                    inputRefs.current[index + 1].focus();
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                if (index > 0) {
+                                    e.preventDefault();
+                                    inputRefs.current[index - 1].focus();
+                                }
                         }
                     }
                 });

package/dist/esm/components/table/table.style.js

@@ -6,8 +6,8 @@ export const classes = defineInnerClasses('table', [
     'cell'
 ]);
 export const style = defineCss(({ mode, spacing, gray, divider, background, easing, colors }) => {
-    const headerBg = gray(mode === 'light' ? .03 : .22);
-    const stripedBg = gray(mode === 'light' ? .02 : .21);
+    const headerBg = gray(mode === 'light' ? .03 : .18);
+    const stripedBg = gray(mode === 'light' ? .02 : .16);
     const selectedBg = Color(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return css `
         @layer reset {

package/dist/esm/components/theme/index.d.ts

@@ -1,3 +1,5 @@
 export * from './themeContext';
+export * from './themeMethods';
+export * from './themeRegistry';
 export * from './themeTypes';
 export * from './themeVariables';

package/dist/esm/components/theme/index.js

@@ -1,3 +1,5 @@
 export * from './themeContext';
+export * from './themeMethods';
+export * from './themeRegistry';
 export * from './themeTypes';
 export * from './themeVariables';

package/dist/esm/components/theme/themeContext.js

@@ -1,25 +1,31 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
-import { defaultDarkTheme, defaultLightTheme, defineTheme, restoreThemeDefinition } from './themeVariables';
+import { defaultDarkTheme, defaultLightTheme } from './themeVariables';
 import { mergeDeep, useDerivedState } from '../../utils';
+import { defineTheme, restoreThemeDefinition } from './themeMethods';
+import { getTheme } from './themeRegistry';
 export const ThemeContext = createContext(defineTheme(defaultLightTheme));
 export function useTheme() {
     return useContext(ThemeContext);
 }
 export function ThemeProvider({ theme, children }) {
     const parentTheme = useTheme();
-    const [currentTheme, setCurrentTheme] = useDerivedState(theme);
+    const resolvedThemeDefinition = useMemo(() => {
+        return theme?.name
+            ? mergeDeep({}, getTheme(theme.name), theme)
+            : theme;
+    }, [theme]);
+    const [currentTheme, setCurrentTheme] = useDerivedState(resolvedThemeDefinition);
     const mergedThemeDefinition = useMemo(() => {
         return mergeDeep({}, restoreThemeDefinition(parentTheme), parentTheme.mode === 'light' && currentTheme.current?.mode === 'dark' ? defaultDarkTheme : void 0, parentTheme.mode === 'dark' && currentTheme.current?.mode === 'light' ? defaultLightTheme : void 0, currentTheme.current);
     }, [currentTheme.current, parentTheme]);
     const themeContextValue = useMemo(() => {
         const value = defineTheme(mergedThemeDefinition);
-        value._sub = true;
         value.update = theme => {
-            const newThemeDefinition = typeof theme === 'function' ? theme(value) : theme;
-            setCurrentTheme(prev => {
-                return mergeDeep({ ...prev }, newThemeDefinition);
-            });
+            setCurrentTheme(typeof theme === 'function' ? theme(value) : theme);
+        };
+        value.set = name => {
+            value.update(getTheme(name));
         };
         return value;
     }, [mergedThemeDefinition]);

package/dist/esm/components/theme/themeMethods.d.ts

@@ -0,0 +1,11 @@
+import { PartialTheme, ThemeDefinition } from './themeTypes';
+/**
+ * 将主题定义对象转换成使用对象
+ * @param themeDefinition
+ */
+export declare function defineTheme(themeDefinition: ThemeDefinition): PartialTheme;
+/**
+ * 将主题使用对象还原成定义对象
+ * @param theme
+ */
+export declare function restoreThemeDefinition(theme: PartialTheme): ThemeDefinition;

package/dist/esm/components/theme/themeMethods.js

@@ -0,0 +1,65 @@
+import Color from 'color';
+/**
+ * ---------------------------------------------------------------------
+ * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
+ */
+function defineColorMembers(color) {
+    const member = Array();
+    member.toString = () => color;
+    const colorObj = Color(color);
+    for (let i = 0; i <= 4; i++) {
+        Object.defineProperty(member, i, {
+            get: () => colorObj.lighten(1 - (i + 1) / 6).hex()
+        });
+    }
+    member[5] = color;
+    for (let i = 6; i <= 10; i++) {
+        Object.defineProperty(member, i, {
+            get: () => colorObj.darken((i - 5) / 6).hex()
+        });
+    }
+    member.main = member[5];
+    Object.defineProperties(member, {
+        light: {
+            get: () => member[3]
+        },
+        dark: {
+            get: () => member[7]
+        }
+    });
+    return member;
+}
+/**
+ * 将主题定义对象转换成使用对象
+ * @param themeDefinition
+ */
+export function defineTheme(themeDefinition) {
+    if (!themeDefinition.colors) {
+        return themeDefinition;
+    }
+    const colors = {};
+    for (const k in themeDefinition.colors) {
+        const color = themeDefinition.colors[k];
+        if (color) {
+            colors[k] = defineColorMembers(color);
+        }
+    }
+    return { ...themeDefinition, colors };
+}
+/**
+ * 将主题使用对象还原成定义对象
+ * @param theme
+ */
+export function restoreThemeDefinition(theme) {
+    if (!theme.colors) {
+        return theme;
+    }
+    const colors = {};
+    for (const k in theme.colors) {
+        const colorMembers = theme.colors[k];
+        if (colorMembers) {
+            colors[k] = colorMembers.main;
+        }
+    }
+    return { ...theme, colors };
+}

package/dist/esm/components/theme/themeRegistry.d.ts

@@ -0,0 +1,5 @@
+import { NamedThemeDefinition, ThemeDefinition } from './themeTypes';
+export declare const themeMap: Map<string, NamedThemeDefinition>;
+export declare function getTheme(name: string): NamedThemeDefinition;
+export declare function registerTheme(name: string, theme: ThemeDefinition): void;
+export declare function registerTheme(theme: NamedThemeDefinition): void;

package/dist/esm/components/theme/themeRegistry.js

@@ -0,0 +1,15 @@
+import { defaultDarkTheme, defaultLightTheme } from './themeVariables';
+export const themeMap = new Map();
+export function getTheme(name) {
+    const registeredTheme = themeMap.get(name);
+    if (!registeredTheme) {
+        throw Error(`Cannot find theme "${name}", call "registerTheme()" first.`);
+    }
+    return registeredTheme;
+}
+export function registerTheme(a, b) {
+    const theme = b ? { ...b, name: a } : { ...a };
+    themeMap.set(theme.name, theme);
+}
+registerTheme(defaultLightTheme);
+registerTheme(defaultDarkTheme);

package/dist/esm/components/theme/themeTypes.d.ts

@@ -21,6 +21,7 @@ export type ThemeEasing = {
 };
 /** 主题的使用对象 */
 export type Theme = {
+    name: string;
     mode: ThemeMode;
     fontSize: number;
     fontFamily: string;
@@ -42,10 +43,9 @@ export type Theme = {
     breakpoints: ResponsiveValue;
     zoom: number;
     update: (themeDefinition: ThemeDefinition | ((currentTheme: Theme) => ThemeDefinition)) => void;
-    /** @private */
-    _sub?: boolean;
+    set: (name: string) => void;
 };
-export interface PartialTheme extends Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing' | 'breakpoints' | 'update'>> {
+export interface PartialTheme extends Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing' | 'breakpoints' | 'update' | 'set'>> {
     colors?: Partial<ThemeColors>;
     text?: Partial<ThemeTextColors>;
     background?: Partial<ThemeBackgroundColor>;
@@ -58,3 +58,6 @@ export interface ThemeDefinition extends Omit<PartialTheme, 'colors'> {
         [P in ColorPresets]?: string;
     };
 }
+export type NamedThemeDefinition = Omit<ThemeDefinition, 'name'> & {
+    name: string;
+};

package/dist/esm/components/theme/themeVariables.d.ts

@@ -1,15 +1,5 @@
 import { ResponsiveValue } from '../../types';
-import { PartialTheme, ThemeDefinition } from './themeTypes';
-/**
- * 将主题定义对象转换成使用对象
- * @param themeDefinition
- */
-export declare function defineTheme(themeDefinition: ThemeDefinition): PartialTheme;
-/**
- * 将主题使用对象还原成定义对象
- * @param theme
- */
-export declare function restoreThemeDefinition(theme: PartialTheme): ThemeDefinition;
+import { NamedThemeDefinition } from './themeTypes';
 /**
  * ---------------------------------------------------------------------
  * 统一全局zIndex
@@ -30,9 +20,11 @@ export declare const defaultMonospaceFontFamily = "'Consolas', 'SF Mono', 'Casca
  * ---------------------------------------------------------------------
  * 默认的明亮主题配置
  */
-export declare const defaultLightTheme: ThemeDefinition;
+export declare const DEFAULT_LIGHT: "default-light";
+export declare const defaultLightTheme: NamedThemeDefinition;
 /**
  * ---------------------------------------------------------------------
  * 默认的黑暗主题配置
  */
-export declare const defaultDarkTheme: ThemeDefinition;
+export declare const DEFAULT_DARK: "default-dark";
+export declare const defaultDarkTheme: NamedThemeDefinition;

package/dist/esm/components/theme/themeVariables.js

@@ -22,70 +22,6 @@ function generateSpacing() {
     }
     return spacing;
 }
-/**
- * ---------------------------------------------------------------------
- * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
- */
-function defineColorMembers(color) {
-    const member = Array();
-    member.toString = () => color;
-    const colorObj = Color(color);
-    for (let i = 0; i <= 4; i++) {
-        Object.defineProperty(member, i, {
-            get: () => colorObj.lighten(1 - (i + 1) / 6).hex()
-        });
-    }
-    member[5] = color;
-    for (let i = 6; i <= 10; i++) {
-        Object.defineProperty(member, i, {
-            get: () => colorObj.darken((i - 5) / 6).hex()
-        });
-    }
-    member.main = member[5];
-    Object.defineProperties(member, {
-        light: {
-            get: () => member[3]
-        },
-        dark: {
-            get: () => member[7]
-        }
-    });
-    return member;
-}
-/**
- * 将主题定义对象转换成使用对象
- * @param themeDefinition
- */
-export function defineTheme(themeDefinition) {
-    if (!themeDefinition.colors) {
-        return themeDefinition;
-    }
-    const colors = {};
-    for (const k in themeDefinition.colors) {
-        const color = themeDefinition.colors[k];
-        if (color) {
-            colors[k] = defineColorMembers(color);
-        }
-    }
-    return { ...themeDefinition, colors };
-}
-/**
- * 将主题使用对象还原成定义对象
- * @param theme
- */
-export function restoreThemeDefinition(theme) {
-    if (!theme.colors) {
-        return theme;
-    }
-    const colors = {};
-    for (const k in theme.colors) {
-        const colorMembers = theme.colors[k];
-        if (colorMembers) {
-            colors[k] = colorMembers.main;
-        }
-    }
-    return { ...theme, colors };
-}
 /**
  * ---------------------------------------------------------------------
  * 统一全局zIndex
@@ -115,7 +51,9 @@ export const defaultMonospaceFontFamily = `'Consolas', 'SF Mono', 'Cascadia Code
  * ---------------------------------------------------------------------
  * 默认的明亮主题配置
  */
+export const DEFAULT_LIGHT = 'default-light';
 export const defaultLightTheme = {
+    name: DEFAULT_LIGHT,
     mode: 'light',
     fontSize: 14,
     fontFamily: defaultFontFamily,
@@ -179,7 +117,9 @@ export const defaultLightTheme = {
  * ---------------------------------------------------------------------
  * 默认的黑暗主题配置
  */
+export const DEFAULT_DARK = 'default-dark';
 export const defaultDarkTheme = {
+    name: DEFAULT_DARK,
     mode: 'dark',
     background: {
         /* content: rGray(.14), */

package/dist/esm/components/tree/tree.style.js

@@ -18,8 +18,8 @@ export function useStyle({ indent }) {
     return [
         useCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
             const c = Color(colors.primary.main);
-            const hover = gray(mode === 'light' ? .05 : .2);
-            const active = gray(mode === 'light' ? .1 : .12);
+            const hover = gray(mode === 'light' ? .05 : .18);
+            const active = gray(mode === 'light' ? .1 : .22);
             const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
             const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
             const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
@@ -93,7 +93,6 @@ export function useStyle({ indent }) {
                     }
 
                     &:not(:has([data-dragging=true])) {
-                    {
                         .${classes.node} {
                             &[data-selected=true] {
                                 background-color: ${selectedBg};
@@ -118,7 +117,6 @@ export function useStyle({ indent }) {
                             }
                         }
                     }
-                    }
 
                     &[data-show-line=true] {
                         .${classes.indent}::after {

package/dist/esm/components/tree/treeDnd.style.js

@@ -31,7 +31,7 @@ export function useStyle({ indent }) {
                 width: 20px;
                 margin-right: ${spacing[3]}px;
                 text-align: center;
-                color: ${gray(.12)};
+                color: ${mode === 'light' ? gray(.16) : gray(.32)};
                 cursor: grab;
             }
 

package/documentation/bootstrap.mjs

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import { preview } from 'vite';
+import inlineConfig from './vite.config.mjs';
+(async () => {
+    const server = await preview(inlineConfig);
+    server.printUrls();
+    server.bindCLIShortcuts({ print: true });
+})();