yingzios-platform-frontend-devtools 1.0.1

package/dist/components/DevUserMenu/styles.js

@@ -0,0 +1,225 @@
+export const devUserMenuStyles = {
+    container: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+    },
+    switchOrgButton: {
+        height: 32,
+        padding: '0 14px',
+        border: '1px solid #d8e0eb',
+        borderRadius: 16,
+        background: '#ffffff',
+        color: '#10233d',
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: 'pointer',
+        transition: 'border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease',
+    },
+    avatar: {
+        width: 32,
+        height: 32,
+        borderRadius: '50%',
+        background: '#1890ff',
+        color: '#fff',
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 14,
+        fontWeight: 500,
+        transition: 'opacity 0.2s',
+    },
+    avatarImage: {
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        objectFit: 'cover',
+    },
+    loginButton: {
+        padding: '6px 16px',
+        background: '#1890ff',
+        color: '#fff',
+        border: 'none',
+        borderRadius: 4,
+        cursor: 'pointer',
+        fontSize: 14,
+        transition: 'background 0.2s',
+    },
+    dropdown: {
+        position: 'absolute',
+        top: '100%',
+        right: 0,
+        marginTop: 8,
+        minWidth: 180,
+        background: '#fff',
+        borderRadius: 6,
+        boxShadow: '0 3px 12px rgba(0, 0, 0, 0.15)',
+        zIndex: 1000,
+        overflow: 'hidden',
+    },
+    dropdownHeader: {
+        padding: '12px 16px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+    },
+    dropdownNickname: {
+        fontSize: 14,
+        fontWeight: 500,
+        color: '#333',
+    },
+    dropdownPhone: {
+        fontSize: 12,
+        color: '#999',
+    },
+    dropdownDivider: {
+        height: 1,
+        background: '#f0f0f0',
+        margin: '0 8px',
+    },
+    dropdownItem: {
+        display: 'block',
+        width: '100%',
+        padding: '10px 16px',
+        textAlign: 'left',
+        background: 'none',
+        border: 'none',
+        fontSize: 14,
+        color: '#333',
+        cursor: 'pointer',
+        transition: 'background 0.2s',
+    },
+};
+export const modalStyles = {
+    overlay: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0, 0, 0, 0.45)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10000,
+    },
+    modal: {
+        width: 360,
+        background: '#fff',
+        borderRadius: 8,
+        boxShadow: '0 6px 24px rgba(0, 0, 0, 0.2)',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '16px 20px',
+        borderBottom: '1px solid #f0f0f0',
+    },
+    title: {
+        margin: 0,
+        fontSize: 16,
+        fontWeight: 500,
+        color: '#333',
+    },
+    closeButton: {
+        width: 24,
+        height: 24,
+        background: 'none',
+        border: 'none',
+        fontSize: 20,
+        color: '#999',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 4,
+        transition: 'background 0.2s',
+    },
+    form: {
+        padding: 20,
+    },
+    tip: {
+        margin: '12px 0',
+        padding: '8px 12px',
+        background: '#fffbe6',
+        border: '1px solid #ffe58f',
+        borderRadius: 4,
+        fontSize: 12,
+        color: '#8c6d1f',
+    },
+    tipCode: {
+        padding: '2px 6px',
+        background: 'rgba(0, 0, 0, 0.06)',
+        borderRadius: 3,
+        fontFamily: 'monospace',
+    },
+    submitButton: {
+        width: '100%',
+        padding: 10,
+        background: '#1890ff',
+        color: '#fff',
+        border: 'none',
+        borderRadius: 4,
+        fontSize: 14,
+        cursor: 'pointer',
+        transition: 'background 0.2s',
+    },
+    submitButtonDisabled: {
+        opacity: 0.65,
+        cursor: 'not-allowed',
+    },
+    error: {
+        marginBottom: 12,
+        padding: '8px 12px',
+        background: '#fff2f0',
+        border: '1px solid #ffccc7',
+        borderRadius: 4,
+        fontSize: 13,
+        color: '#cf1322',
+    },
+};
+export const formGroupStyles = {
+    group: {
+        marginBottom: 16,
+    },
+    label: {
+        display: 'block',
+        marginBottom: 6,
+        fontSize: 14,
+        color: '#333',
+    },
+    input: {
+        width: '100%',
+        padding: '8px 12px',
+        border: '1px solid #d9d9d9',
+        borderRadius: 4,
+        fontSize: 14,
+        outline: 'none',
+        transition: 'border-color 0.2s',
+        boxSizing: 'border-box',
+    },
+    inputRow: {
+        display: 'flex',
+        gap: 8,
+    },
+    sendButton: {
+        flexShrink: 0,
+        padding: '8px 12px',
+        background: '#fff',
+        border: '1px solid #d9d9d9',
+        borderRadius: 4,
+        fontSize: 14,
+        color: '#333',
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
+        transition: 'border-color 0.2s, color 0.2s',
+    },
+    sendButtonDisabled: {
+        color: '#bfbfbf',
+        cursor: 'not-allowed',
+    },
+};

package/dist/components/StandaloneAppLayout/index.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { FrontendNavIconKey } from 'yz-frontend-core';
+export type IconRenderer = (iconKey: FrontendNavIconKey) => React.ReactNode;
+export interface StandaloneAppLayoutProps {
+    /**
+     * manifest 文件路径，默认 'app-manifest.json'（相对路径，受 <base> 标签影响）
+     */
+    manifestUrl?: string;
+    /**
+     * 子内容
+     */
+    children: React.ReactNode;
+    /**
+     * 自定义 Logo 组件
+     */
+    logo?: React.ReactNode;
+    /**
+     * 自定义顶部右侧内容
+     * 如果为 false，则不显示默认的登录组件
+     */
+    headerRight?: React.ReactNode | false;
+    /**
+     * 自定义图标渲染函数
+     * 传入 iconKey，返回 React 节点
+     */
+    renderIcon?: IconRenderer;
+    /**
+     * API 基础路径，用于登录接口
+     * 默认 '/portal/api'
+     */
+    apiBasePath?: string;
+    /**
+     * 组织切换页面路径
+     * 默认 '/org-select'
+     */
+    orgSwitchPath?: string;
+}
+/**
+ * 独立运行模式下的应用布局
+ *
+ * 自动从 app-manifest.json 加载配置并生成导航菜单。
+ * 用于微应用本地独立开发时提供统一的导航体验。
+ *
+ * @example
+ * ```tsx
+ * import { StandaloneAppLayout } from 'yz-frontend-devtools';
+ *
+ * function StandaloneApp() {
+ *   return (
+ *     <StandaloneAppLayout>
+ *       <AppRoutes />
+ *     </StandaloneAppLayout>
+ *   );
+ * }
+ * ```
+ */
+export declare function StandaloneAppLayout({ manifestUrl, children, logo, headerRight, renderIcon, apiBasePath, orgSwitchPath, }: StandaloneAppLayoutProps): React.JSX.Element;
+export declare namespace StandaloneAppLayout {
+    var displayName: string;
+}
+declare const _default: React.MemoExoticComponent<typeof StandaloneAppLayout>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/StandaloneAppLayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StandaloneAppLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAW3D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;AA+B5E,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;IACtC;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAiC,EACjC,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,UAAU,EACV,WAA2B,EAC3B,aAA6B,GAC9B,EAAE,wBAAwB,qBA4G1B;yBApHe,mBAAmB;;;;AAwOnC,wBAAyC"}

package/dist/components/StandaloneAppLayout/index.js

@@ -0,0 +1,161 @@
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { loadAppManifest, buildMenuGroupsFromManifest, } from '../../manifest-loader';
+import { DevUserMenu } from '../DevUserMenu';
+import { layoutStyles, leftNavStyles, groupNavStyles } from './styles';
+function isPathActive(currentPath, candidatePath, end) {
+    if (candidatePath === currentPath) {
+        return true;
+    }
+    return end === false && currentPath.startsWith(candidatePath + '/');
+}
+function isStandaloneMenuItemActive(currentPath, item) {
+    if (isPathActive(currentPath, item.path, item.end)) {
+        return true;
+    }
+    return item.matchPaths.some((matchPath) => isPathActive(currentPath, matchPath, item.end));
+}
+/**
+ * 独立运行模式下的应用布局
+ *
+ * 自动从 app-manifest.json 加载配置并生成导航菜单。
+ * 用于微应用本地独立开发时提供统一的导航体验。
+ *
+ * @example
+ * ```tsx
+ * import { StandaloneAppLayout } from 'yz-frontend-devtools';
+ *
+ * function StandaloneApp() {
+ *   return (
+ *     <StandaloneAppLayout>
+ *       <AppRoutes />
+ *     </StandaloneAppLayout>
+ *   );
+ * }
+ * ```
+ */
+export function StandaloneAppLayout({ manifestUrl = 'app-manifest.json', children, logo, headerRight, renderIcon, apiBasePath = '/portal/api', orgSwitchPath = '/org-select', }) {
+    const [menuGroups, setMenuGroups] = useState([]);
+    const [appName, setAppName] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const location = useLocation();
+    useEffect(() => {
+        loadAppManifest(manifestUrl)
+            .then((manifest) => {
+            const groups = buildMenuGroupsFromManifest(manifest);
+            setMenuGroups(groups);
+            setAppName(manifest.displayName);
+            setLoading(false);
+        })
+            .catch((err) => {
+            console.error('[StandaloneAppLayout] Failed to load manifest:', err);
+            setError(err.message);
+            setLoading(false);
+        });
+    }, [manifestUrl]);
+    const isMenuItemActive = (item) => isStandaloneMenuItemActive(location.pathname, item);
+    const primaryNavItems = useMemo(() => menuGroups.flatMap((group) => {
+        const firstItem = group.items[0];
+        if (!firstItem) {
+            return [];
+        }
+        return [{
+                key: `group-${group.groupLabel}`,
+                label: group.groupLabel,
+                path: firstItem.path,
+                iconKey: firstItem.iconKey,
+                items: group.items,
+            }];
+    }), [menuGroups]);
+    const activePrimaryNav = useMemo(() => primaryNavItems.find((item) => item.items.some((child) => isMenuItemActive(child))) || primaryNavItems[0], [location.pathname, primaryNavItems]);
+    const activeSidebarItems = activePrimaryNav?.items ?? [];
+    // 渲染右上角内容
+    const renderHeaderRight = () => {
+        // 如果显式传入 false，则不渲染
+        if (headerRight === false) {
+            return null;
+        }
+        // 如果传入了自定义内容，则渲染自定义内容
+        if (headerRight) {
+            return headerRight;
+        }
+        // 默认渲染登录组件
+        return React.createElement(DevUserMenu, { apiBasePath: apiBasePath, orgSwitchPath: orgSwitchPath });
+    };
+    if (loading) {
+        return (React.createElement("div", { style: layoutStyles.layout },
+            React.createElement("div", { style: layoutStyles.loading }, "\u52A0\u8F7D\u4E2D...")));
+    }
+    if (error) {
+        return (React.createElement("div", { style: layoutStyles.layout },
+            React.createElement("div", { style: layoutStyles.error },
+                React.createElement("span", null,
+                    "\u52A0\u8F7D\u5931\u8D25: ",
+                    error))));
+    }
+    return (React.createElement("div", { style: layoutStyles.layout },
+        React.createElement("header", { style: layoutStyles.header },
+            React.createElement("div", { style: layoutStyles.headerLeft },
+                logo ?? (React.createElement("span", { style: layoutStyles.logo }, appName || 'App')),
+                React.createElement("span", { style: layoutStyles.devBadge }, "DEV")),
+            React.createElement("div", { style: layoutStyles.headerRight }, renderHeaderRight())),
+        React.createElement("div", { style: layoutStyles.shell },
+            React.createElement("aside", { style: layoutStyles.sidebar },
+                React.createElement(LeftNav, { items: activeSidebarItems, currentPath: location.pathname, renderIcon: renderIcon })),
+            React.createElement("main", { style: layoutStyles.main },
+                React.createElement(GroupNav, { items: primaryNavItems, currentPath: location.pathname }),
+                React.createElement("div", { style: layoutStyles.content }, children)))));
+}
+function LeftNav({ items, currentPath, renderIcon }) {
+    const [hoveredKey, setHoveredKey] = useState(null);
+    const isActive = (item) => isStandaloneMenuItemActive(currentPath, item);
+    const getIcon = (iconKey, active) => {
+        if (!iconKey) {
+            return React.createElement("span", { style: leftNavStyles.itemIconPlaceholder });
+        }
+        if (renderIcon) {
+            return renderIcon(iconKey);
+        }
+        // 默认：显示一个简单的圆点
+        return React.createElement("span", { style: leftNavStyles.itemIconDot });
+    };
+    const getItemStyle = (item) => {
+        const active = isActive(item);
+        const hovered = hoveredKey === item.key;
+        return {
+            ...leftNavStyles.item,
+            ...(hovered && !active ? leftNavStyles.itemHover : {}),
+            ...(active ? leftNavStyles.itemActive : {}),
+        };
+    };
+    const getIconStyle = (item) => {
+        const active = isActive(item);
+        return {
+            ...leftNavStyles.itemIcon,
+            ...(active ? leftNavStyles.itemIconActive : {}),
+        };
+    };
+    return (React.createElement("nav", { "aria-label": "\u5F00\u53D1\u6A21\u5F0F\u4E3B\u5BFC\u822A", style: leftNavStyles.nav },
+        React.createElement("div", { style: leftNavStyles.scrollArea },
+            React.createElement("section", { style: leftNavStyles.group }, items.map((item) => (React.createElement(Link, { "aria-current": isActive(item) ? 'page' : undefined, key: item.key, to: item.path, title: item.label, style: getItemStyle(item), onMouseEnter: () => setHoveredKey(item.key), onMouseLeave: () => setHoveredKey(null) },
+                React.createElement("span", { style: getIconStyle(item) }, getIcon(item.iconKey, isActive(item))),
+                React.createElement("span", { style: leftNavStyles.itemLabel }, item.label))))))));
+}
+function GroupNav({ items, currentPath }) {
+    const [hoveredKey, setHoveredKey] = useState(null);
+    const isActive = (item) => item.items.some((child) => isStandaloneMenuItemActive(currentPath, child));
+    const getItemStyle = (item) => {
+        const active = isActive(item);
+        const hovered = hoveredKey === item.key;
+        return {
+            ...groupNavStyles.item,
+            ...(hovered && !active ? groupNavStyles.itemHover : {}),
+            ...(active ? groupNavStyles.itemActive : {}),
+        };
+    };
+    return (React.createElement("div", { style: groupNavStyles.nav },
+        React.createElement("div", { style: groupNavStyles.scroll }, items.map((item) => (React.createElement(Link, { "aria-current": isActive(item) ? 'page' : undefined, key: item.key, to: item.path, style: getItemStyle(item), onMouseEnter: () => setHoveredKey(item.key), onMouseLeave: () => setHoveredKey(null) }, item.label))))));
+}
+StandaloneAppLayout.displayName = 'StandaloneAppLayout';
+export default memo(StandaloneAppLayout);

package/dist/components/StandaloneAppLayout/styles.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from 'react';
+export declare const layoutStyles: Record<string, CSSProperties>;
+export declare const leftNavStyles: Record<string, CSSProperties>;
+export declare const groupNavStyles: Record<string, CSSProperties>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/StandaloneAppLayout/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/StandaloneAppLayout/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAgGtD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAsFvD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CA4CxD,CAAC"}

package/dist/components/StandaloneAppLayout/styles.js

@@ -0,0 +1,230 @@
+// CSS-in-JS 样式定义，避免 scss 构建问题
+export const layoutStyles = {
+    layout: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100vh',
+        minHeight: 0,
+        width: '100%',
+        overflow: 'hidden',
+        background: '#ffffff',
+    },
+    loading: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        color: '#666',
+        fontSize: 14,
+    },
+    error: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        color: '#ff4d4f',
+        fontSize: 14,
+    },
+    header: {
+        position: 'sticky',
+        top: 0,
+        zIndex: 20,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 56,
+        padding: '0 16px',
+        background: '#ffffff',
+        borderBottom: '1px solid rgba(226, 232, 240, 0.9)',
+        flexShrink: 0,
+    },
+    headerLeft: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+    },
+    headerRight: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+    },
+    logo: {
+        fontSize: 18,
+        fontWeight: 600,
+        color: '#0f172a',
+    },
+    devBadge: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '2px 8px',
+        fontSize: 11,
+        fontWeight: 600,
+        color: '#0f172a',
+        background: '#f1f5f9',
+        border: '1px solid #e2e8f0',
+        borderRadius: 999,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    shell: {
+        display: 'flex',
+        flex: 1,
+        overflow: 'hidden',
+        minHeight: 0,
+        background: 'linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%)',
+    },
+    sidebar: {
+        width: 256,
+        display: 'flex',
+        flexShrink: 0,
+        minHeight: 0,
+        overflow: 'hidden',
+    },
+    main: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 0,
+        minHeight: 0,
+    },
+    content: {
+        flex: 1,
+        overflowY: 'auto',
+        minHeight: 0,
+        position: 'relative',
+        padding: '24px 28px 28px',
+        background: 'transparent',
+    },
+};
+export const leftNavStyles = {
+    nav: {
+        width: 256,
+        flex: 1,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        height: '100%',
+        borderRight: '1px solid rgba(226, 232, 240, 0.9)',
+        background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%)',
+        padding: 0,
+        overflow: 'hidden',
+    },
+    scrollArea: {
+        flex: 1,
+        overflowY: 'auto',
+        padding: '18px 16px 12px',
+    },
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+    },
+    item: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: 12,
+        minHeight: 44,
+        padding: '10px 12px',
+        color: '#475569',
+        textDecoration: 'none',
+        border: '1px solid transparent',
+        borderRadius: 8,
+        background: 'transparent',
+        transition: 'background 0.15s, color 0.15s',
+        cursor: 'pointer',
+    },
+    itemHover: {
+        background: '#f8fafc',
+        color: '#0f172a',
+    },
+    itemActive: {
+        background: '#030213',
+        color: '#ffffff',
+        fontWeight: 500,
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1)',
+    },
+    itemIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 32,
+        minWidth: 32,
+        height: 32,
+        borderRadius: 8,
+        background: 'linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%)',
+        color: '#64748b',
+        boxShadow: 'inset 0 0 0 1px rgba(226, 232, 240, 0.85)',
+    },
+    itemIconActive: {
+        background: 'rgba(255, 255, 255, 0.15)',
+        color: '#ffffff',
+        boxShadow: 'none',
+    },
+    itemIconPlaceholder: {
+        width: 6,
+        height: 6,
+        borderRadius: '50%',
+        background: '#94a3b8',
+    },
+    itemIconDot: {
+        width: 6,
+        height: 6,
+        borderRadius: '50%',
+        background: 'currentColor',
+        opacity: 0.5,
+    },
+    itemLabel: {
+        fontSize: 14,
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+};
+export const groupNavStyles = {
+    nav: {
+        display: 'flex',
+        alignItems: 'center',
+        height: 56,
+        padding: '0 28px',
+        borderBottom: '1px solid rgba(226, 232, 240, 0.9)',
+        background: 'rgba(255, 255, 255, 0.7)',
+        backdropFilter: 'blur(8px)',
+        flexShrink: 0,
+    },
+    scroll: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        overflowX: 'auto',
+    },
+    item: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 32,
+        padding: '0 14px',
+        fontSize: 13,
+        fontWeight: 500,
+        color: '#64748b',
+        textDecoration: 'none',
+        border: '1px solid transparent',
+        borderRadius: 8,
+        background: 'transparent',
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        transition: 'all 0.15s',
+    },
+    itemHover: {
+        color: '#0f172a',
+        background: '#f1f5f9',
+    },
+    itemActive: {
+        color: '#0f172a',
+        background: '#ffffff',
+        borderColor: '#e2e8f0',
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+    },
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './base-path';
+export * from './components/StandaloneAppLayout';
+export * from './components/DevUserMenu';
+export * from './manifest-loader';
+//# sourceMappingURL=index.d.ts.map