mates-devtools 0.1.0-beta.1

package/dist/types/Mates-DevTools/src/styles.d.ts

@@ -0,0 +1,833 @@
+export declare const componentItemSelected = "selected";
+export declare const instanceItemSelected = "selected";
+export declare const flashAnimation: string;
+export declare const styles: import("mates").Cl<{
+    fab: {
+        position: "fixed";
+        bottom: "50px";
+        right: "50px";
+        width: "44px";
+        height: "44px";
+        borderRadius: "50%";
+        background: "var(--dt-bg)";
+        border: "2px solid var(--dt-border)";
+        color: "var(--dt-text-bright)";
+        fontSize: "20px";
+        lineHeight: "1";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        cursor: "grab";
+        zIndex: "100000";
+        boxShadow: "0 2px 10px rgba(0,0,0,0.4)";
+        userSelect: "none";
+        transition: "box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease";
+        "-webkit-tap-highlight-color": "transparent";
+        "&:hover": {
+            borderColor: "var(--dt-accent)";
+            boxShadow: "0 4px 16px rgba(0,119,230,0.3)";
+        };
+        "&:active": {
+            cursor: "grabbing";
+            transform: "scale(0.95)";
+        };
+    };
+    fabDragging: {
+        cursor: "grabbing";
+        transform: "scale(0.95)";
+    };
+    panel: {
+        position: "fixed";
+        bottom: "0";
+        left: "0";
+        right: "0";
+        width: "100%";
+        height: "320px";
+        background: "var(--dt-bg)";
+        borderTop: "1px solid var(--dt-border)";
+        boxShadow: "0 -2px 12px rgba(0,0,0,0.4)";
+        zIndex: "99999";
+        display: "flex";
+        flexDirection: "column";
+        fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace";
+        fontSize: "13px";
+        color: "var(--dt-text)";
+        opacity: "0";
+        transform: "translateY(12px)";
+        transition: "opacity 0.2s ease, transform 0.2s ease";
+        pointerEvents: "none";
+    };
+    panelVisible: {
+        opacity: "1";
+        transform: "translateY(0)";
+        pointerEvents: "all";
+    };
+    minimized: {
+        display: "none";
+    };
+    resizeHandle: {
+        position: "absolute";
+        top: "0";
+        left: "0";
+        right: "0";
+        height: "4px";
+        cursor: "ns-resize";
+        zIndex: "1";
+        "&:hover": {
+            background: "rgba(0,119,230,0.4)";
+        };
+    };
+    header: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: "0 10px";
+        height: "38px";
+        borderBottom: "1px solid var(--dt-border-2)";
+        flexShrink: "0";
+        gap: "16px";
+    };
+    headerLeft: {
+        display: "flex";
+        alignItems: "center";
+        gap: "16px";
+        minWidth: "0";
+    };
+    title: {
+        fontWeight: "700";
+        fontSize: "12px";
+        color: "var(--dt-text-bright)";
+        letterSpacing: "0.06em";
+        textTransform: "uppercase";
+        whiteSpace: "nowrap";
+        flexShrink: "0";
+    };
+    controls: {
+        display: "flex";
+        alignItems: "center";
+        gap: "4px";
+        flexShrink: "0";
+    };
+    button: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-text-muted)";
+        cursor: "pointer";
+        padding: "4px 6px";
+        borderRadius: "4px";
+        fontSize: "13px";
+        lineHeight: "1";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        transition: "background 0.1s, color 0.1s";
+        "&:hover": {
+            background: "var(--dt-bg-3)";
+            color: "var(--dt-text-bright)";
+        };
+    };
+    tabBar: {
+        display: "flex";
+        alignItems: "center";
+        gap: "4px";
+    };
+    tabBtn: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-text-muted)";
+        cursor: "pointer";
+        padding: "4px 12px";
+        borderRadius: "4px";
+        fontSize: "12px";
+        fontFamily: "inherit";
+        fontWeight: "500";
+        letterSpacing: "0.03em";
+        transition: "background 0.1s, color 0.1s";
+        position: "relative";
+        "&:hover": {
+            background: "var(--dt-bg-3)";
+            color: "var(--dt-text)";
+        };
+        "&.active": {
+            color: "var(--dt-text-selected)";
+            background: "var(--dt-bg-selected)";
+        };
+    };
+    tabBadge: {
+        display: "inline-flex";
+        alignItems: "center";
+        justifyContent: "center";
+        background: "var(--dt-accent)";
+        color: "#fff";
+        borderRadius: "8px";
+        fontSize: "10px";
+        fontWeight: "700";
+        minWidth: "16px";
+        height: "16px";
+        padding: "0 4px";
+        marginLeft: "5px";
+        lineHeight: "1";
+    };
+    body: {
+        display: "flex";
+        flex: "1";
+        minHeight: "0";
+        overflow: "hidden";
+    };
+    leftColumn: {
+        width: "260px";
+        minWidth: "160px";
+        borderRight: "1px solid var(--dt-border-2)";
+        display: "flex";
+        flexDirection: "column";
+        flexShrink: "0";
+    };
+    leftTabs: {
+        display: "flex";
+        gap: "4px";
+        padding: "5px 8px";
+        borderBottom: "1px solid var(--dt-border-2)";
+        flexShrink: "0";
+    };
+    leftTabBtn: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-text-dim)";
+        cursor: "pointer";
+        padding: "3px 6px";
+        borderRadius: "3px";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        transition: "background 0.1s, color 0.1s";
+        "&:hover": {
+            background: "var(--dt-bg-3)";
+            color: "var(--dt-text)";
+        };
+        "&.active": {
+            background: "var(--dt-bg-selected)";
+            color: "var(--dt-text-selected)";
+        };
+    };
+    content: {
+        "&::-webkit-scrollbar": {
+            readonly width: "6px";
+        };
+        "&::-webkit-scrollbar-track": {
+            readonly background: "transparent";
+        };
+        "&::-webkit-scrollbar-thumb": {
+            readonly background: "var(--dt-scrollbar)";
+            readonly borderRadius: "3px";
+        };
+        "&::-webkit-scrollbar-thumb:hover": {
+            readonly background: "var(--dt-scrollbar-hover)";
+        };
+        flex: "1";
+        overflowY: "auto";
+    };
+    componentSearch: {
+        width: "100%";
+        boxSizing: "border-box";
+        background: "var(--dt-bg-input)";
+        border: "none";
+        borderBottom: "1px solid var(--dt-border-2)";
+        color: "var(--dt-text)";
+        fontFamily: "inherit";
+        fontSize: "12px";
+        padding: "6px 10px";
+        outline: "none";
+        flexShrink: "0";
+        "&::placeholder": {
+            color: "var(--dt-text-dimmer)";
+        };
+        "&:focus": {
+            borderBottomColor: "var(--dt-accent)";
+        };
+    };
+    componentList: {
+        listStyle: "none";
+        margin: "0";
+        padding: "4px 0";
+    };
+    componentItem: {
+        display: "flex";
+        alignItems: "center";
+        gap: "6px";
+        justifyContent: "space-between";
+        padding: "5px 8px";
+        cursor: "pointer";
+        borderRadius: "3px";
+        margin: "1px 4px";
+        transition: "background 0.1s";
+        "&:hover": {
+            background: "var(--dt-bg-hover)";
+        };
+        "&.selected": {
+            background: "var(--dt-bg-selected)";
+            color: "var(--dt-text-selected)";
+        };
+    };
+    componentName: {
+        flex: "1";
+        minWidth: "0";
+        overflow: "hidden";
+        textOverflow: "ellipsis";
+        whiteSpace: "nowrap";
+        fontSize: "12px";
+        color: "var(--dt-text)";
+    };
+    componentBadge: {
+        display: "flex";
+        alignItems: "center";
+        gap: "6px";
+        flexShrink: "0";
+    };
+    componentBadgeSelected: {
+        display: "flex";
+        alignItems: "center";
+        gap: "6px";
+        flexShrink: "0";
+        color: "var(--dt-accent)";
+    };
+    componentCount: {
+        fontSize: "11px";
+        color: "var(--dt-text-dim)";
+        background: "var(--dt-bg-3)";
+        borderRadius: "8px";
+        padding: "1px 6px";
+        minWidth: "18px";
+        textAlign: "center";
+    };
+    componentCountSelected: {
+        fontSize: "11px";
+        color: "var(--dt-accent)";
+        background: "var(--dt-bg-3)";
+        borderRadius: "8px";
+        padding: "1px 6px";
+        minWidth: "18px";
+        textAlign: "center";
+    };
+    componentHighlightBtn: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-text-dim)";
+        cursor: "pointer";
+        padding: "2px 4px";
+        borderRadius: "3px";
+        fontSize: "11px";
+        lineHeight: "1";
+        display: "flex";
+        alignItems: "center";
+        opacity: "1";
+        transition: "color 0.1s";
+        "&:hover": {
+            color: "var(--dt-accent)";
+        };
+    };
+    componentHighlightBtnSelected: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-accent)";
+        cursor: "pointer";
+        padding: "2px 4px";
+        borderRadius: "3px";
+        fontSize: "11px";
+        lineHeight: "1";
+        display: "flex";
+        alignItems: "center";
+        opacity: "1";
+        transition: "color 0.1s";
+        "&:hover": {
+            color: "var(--dt-accent)";
+        };
+    };
+    empty: {
+        padding: "16px 12px";
+        color: "var(--dt-text-dimmer)";
+        fontSize: "12px";
+        textAlign: "center";
+    };
+    treeToggle: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-text-dim)";
+        cursor: "pointer";
+        padding: "0 3px";
+        fontSize: "11px";
+        lineHeight: "1";
+        flexShrink: "0";
+        width: "16px";
+        textAlign: "center";
+        "&:hover": {
+            color: "var(--dt-text)";
+        };
+    };
+    treeLeaf: {
+        display: "inline-block";
+        width: "16px";
+        flexShrink: "0";
+        textAlign: "center";
+        color: "var(--dt-text-dim)";
+    };
+    inspector: {
+        "&::-webkit-scrollbar": {
+            readonly width: "6px";
+        };
+        "&::-webkit-scrollbar-track": {
+            readonly background: "transparent";
+        };
+        "&::-webkit-scrollbar-thumb": {
+            readonly background: "var(--dt-scrollbar)";
+            readonly borderRadius: "3px";
+        };
+        "&::-webkit-scrollbar-thumb:hover": {
+            readonly background: "var(--dt-scrollbar-hover)";
+        };
+        flex: "1";
+        minWidth: "0";
+        overflowY: "auto";
+        padding: "10px";
+    };
+    inspectorBreadcrumb: {
+        display: "flex";
+        alignItems: "center";
+        gap: "4px";
+        marginBottom: "10px";
+        flexWrap: "wrap";
+    };
+    breadcrumbSegment: {
+        color: "var(--dt-text-dim)";
+        cursor: "pointer";
+        fontSize: "11px";
+        "&:hover": {
+            color: "var(--dt-text-selected)";
+        };
+    };
+    breadcrumbSeparator: {
+        color: "var(--dt-border)";
+        fontSize: "11px";
+    };
+    breadcrumbCurrent: {
+        color: "var(--dt-text-selected)";
+        fontSize: "11px";
+    };
+    inspectorTitle: {
+        fontWeight: "600";
+        fontSize: "13px";
+        color: "var(--dt-text-bright)";
+        marginBottom: "8px";
+    };
+    instanceCount: {
+        fontSize: "11px";
+        color: "var(--dt-text-dim)";
+        marginBottom: "8px";
+    };
+    instanceList: {
+        listStyle: "none";
+        margin: "0 0 8px 0";
+        padding: "0";
+        display: "flex";
+        flexDirection: "column";
+        gap: "4px";
+    };
+    instanceGroup: {
+        border: "1px solid var(--dt-border-2)";
+        borderRadius: "4px";
+        overflow: "hidden";
+    };
+    instanceItem: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        gap: "6px";
+        padding: "5px 10px";
+        cursor: "pointer";
+        transition: "background 0.1s";
+        "&:hover": {
+            background: "var(--dt-bg-hover)";
+        };
+        "&.selected": {
+            background: "var(--dt-bg-selected)";
+        };
+    };
+    instanceToggle: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-text-dim)";
+        cursor: "pointer";
+        padding: "0 3px";
+        fontSize: "11px";
+        flexShrink: "0";
+        "&:hover": {
+            color: "var(--dt-text)";
+        };
+    };
+    instanceToggleSelected: {
+        background: "none";
+        border: "none";
+        color: "var(--dt-accent)";
+        cursor: "pointer";
+        padding: "0 3px";
+        fontSize: "11px";
+        flexShrink: "0";
+        "&:hover": {
+            color: "var(--dt-accent)";
+        };
+    };
+    instanceId: {
+        fontSize: "11px";
+        color: "var(--dt-text-dim)";
+        flexShrink: "0";
+        marginRight: "2px";
+    };
+    instanceDetails: {
+        margin: "0 0 6px 0";
+        padding: "8px 12px";
+        borderLeft: "2px solid var(--dt-instance-border)";
+        background: "var(--dt-instance-bg)";
+        borderRadius: "0 4px 4px 0";
+    };
+    highlightBtn: {
+        background: "none";
+        border: "1px solid var(--dt-border)";
+        color: "var(--dt-text-muted)";
+        cursor: "pointer";
+        padding: "2px 7px";
+        borderRadius: "3px";
+        fontSize: "11px";
+        fontFamily: "inherit";
+        transition: "border-color 0.1s, color 0.1s";
+        "&:hover": {
+            borderColor: "var(--dt-accent)";
+            color: "var(--dt-accent)";
+        };
+    };
+    domHighlight: {
+        position: "absolute";
+        zIndex: "100001";
+        pointerEvents: "none";
+        border: "2px solid #e53e3e";
+        background: "rgba(229,62,62,0.18)";
+        borderRadius: "3px";
+        transition: "opacity 0.6s ease";
+    };
+    hooksSummary: {
+        display: "flex";
+        flexWrap: "wrap";
+        gap: "5px";
+        marginBottom: "10px";
+    };
+    hookPill: {
+        display: "inline-flex";
+        alignItems: "center";
+        gap: "4px";
+        background: "var(--dt-bg-2)";
+        border: "1px solid var(--dt-border)";
+        borderRadius: "10px";
+        padding: "2px 8px";
+        fontSize: "11px";
+    };
+    hookPillLabel: {
+        color: "var(--dt-text-muted)";
+    };
+    hookPillCount: {
+        color: "var(--dt-hook-count)";
+        fontWeight: "600";
+    };
+    sectionHeader: {
+        fontSize: "10px";
+        fontWeight: "700";
+        textTransform: "uppercase";
+        letterSpacing: "0.08em";
+        color: "var(--dt-text-dim)";
+        marginBottom: "4px";
+        marginTop: "12px";
+        "&:first-child": {
+            marginTop: "0";
+        };
+    };
+    propItem: {
+        display: "flex";
+        alignItems: "baseline";
+        gap: "8px";
+        padding: "3px 0";
+        fontSize: "12px";
+        borderBottom: "1px solid var(--dt-border-3)";
+    };
+    propKey: {
+        color: "var(--dt-prop-key)";
+        flexShrink: "0";
+        minWidth: "80px";
+    };
+    propValue: {
+        color: "var(--dt-prop-val)";
+        wordBreak: "break-all";
+    };
+    scopeItem: {
+        padding: "3px 0";
+        fontSize: "12px";
+        borderBottom: "1px solid var(--dt-border-3)";
+    };
+    scopeName: {
+        color: "var(--dt-scope-name)";
+    };
+    atomItem: {
+        display: "flex";
+        alignItems: "baseline";
+        gap: "8px";
+        padding: "3px 0";
+        fontSize: "12px";
+        borderBottom: "1px solid var(--dt-border-3)";
+    };
+    atomName: {
+        color: "var(--dt-prop-key)";
+        flexShrink: "0";
+        minWidth: "80px";
+    };
+    atomValue: {
+        color: "var(--dt-prop-val)";
+        wordBreak: "break-all";
+    };
+    highlight: {
+        display: "inline-block";
+        padding: "1px 5px";
+        borderRadius: "8px";
+        fontSize: "11px";
+        color: "var(--dt-text-muted)";
+        background: "transparent";
+        transition: "background 0.1s, color 0.1s";
+    };
+    highlightFlash: {
+        animation: `${string} 0.6s ease forwards`;
+    };
+    logsPanel: {
+        flex: "1";
+        display: "flex";
+        flexDirection: "column";
+        minHeight: "0";
+        overflow: "hidden";
+    };
+    logsToolbar: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: "5px 10px";
+        borderBottom: "1px solid var(--dt-border-2)";
+        flexShrink: "0";
+        gap: "10px";
+    };
+    logsFilterRow: {
+        display: "flex";
+        gap: "4px";
+    };
+    logsFilterBtn: {
+        background: "none";
+        border: "1px solid var(--dt-border)";
+        color: "var(--dt-text-muted)";
+        cursor: "pointer";
+        padding: "2px 9px";
+        borderRadius: "3px";
+        fontSize: "11px";
+        fontFamily: "inherit";
+        transition: "border-color 0.1s, color 0.1s, background 0.1s";
+        "&:hover": {
+            borderColor: "var(--dt-text-dim)";
+            color: "var(--dt-text)";
+        };
+        "&.active": {
+            borderColor: "var(--dt-border-selected)";
+            color: "var(--dt-text-selected)";
+            background: "var(--dt-bg-active)";
+        };
+    };
+    logsActions: {
+        display: "flex";
+        gap: "6px";
+        alignItems: "center";
+    };
+    logsCount: {
+        fontSize: "11px";
+        color: "var(--dt-text-dimmer)";
+    };
+    logsContainer: {
+        "&::-webkit-scrollbar": {
+            readonly width: "6px";
+        };
+        "&::-webkit-scrollbar-track": {
+            readonly background: "transparent";
+        };
+        "&::-webkit-scrollbar-thumb": {
+            readonly background: "var(--dt-scrollbar)";
+            readonly borderRadius: "3px";
+        };
+        "&::-webkit-scrollbar-thumb:hover": {
+            readonly background: "var(--dt-scrollbar-hover)";
+        };
+        flex: "1";
+        overflowY: "auto";
+        padding: "4px 0";
+    };
+    logEntry: {
+        display: "flex";
+        alignItems: "baseline";
+        gap: "8px";
+        padding: "3px 10px";
+        fontSize: "12px";
+        borderBottom: "1px solid var(--dt-border-3)";
+        "&:hover": {
+            background: "var(--dt-bg-hover)";
+        };
+    };
+    logTs: {
+        color: "var(--dt-text-dimmer)";
+        flexShrink: "0";
+        fontSize: "11px";
+        minWidth: "56px";
+    };
+    logBadge: {
+        flexShrink: "0";
+        padding: "1px 5px";
+        borderRadius: "3px";
+        fontSize: "10px";
+        fontWeight: "700";
+        textTransform: "uppercase";
+        letterSpacing: "0.05em";
+    };
+    logLabel: {
+        color: "var(--dt-text)";
+        flexShrink: "0";
+    };
+    logDetail: {
+        color: "var(--dt-text-muted)";
+        wordBreak: "break-all";
+        flex: "1";
+        minWidth: "0";
+    };
+    perfPanel: {
+        flex: "1";
+        display: "flex";
+        flexDirection: "column";
+        minHeight: "0";
+        overflow: "hidden";
+    };
+    perfToolbar: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: "5px 10px";
+        borderBottom: "1px solid var(--dt-border-2)";
+        flexShrink: "0";
+        gap: "10px";
+    };
+    perfTabs: {
+        display: "flex";
+        gap: "4px";
+    };
+    perfTabBtn: {
+        background: "none";
+        border: "1px solid var(--dt-border)";
+        color: "var(--dt-text-muted)";
+        cursor: "pointer";
+        padding: "2px 9px";
+        borderRadius: "3px";
+        fontSize: "11px";
+        fontFamily: "inherit";
+        transition: "border-color 0.1s, color 0.1s, background 0.1s";
+        "&:hover": {
+            borderColor: "var(--dt-text-dim)";
+            color: "var(--dt-text)";
+        };
+        "&.active": {
+            borderColor: "var(--dt-border-selected)";
+            color: "var(--dt-text-selected)";
+            background: "var(--dt-bg-active)";
+        };
+    };
+    perfActions: {
+        display: "flex";
+        gap: "6px";
+        alignItems: "center";
+    };
+    perfContent: {
+        "&::-webkit-scrollbar": {
+            readonly width: "6px";
+        };
+        "&::-webkit-scrollbar-track": {
+            readonly background: "transparent";
+        };
+        "&::-webkit-scrollbar-thumb": {
+            readonly background: "var(--dt-scrollbar)";
+            readonly borderRadius: "3px";
+        };
+        "&::-webkit-scrollbar-thumb:hover": {
+            readonly background: "var(--dt-scrollbar-hover)";
+        };
+        flex: "1";
+        overflowY: "auto";
+    };
+    perfTable: {
+        width: "100%";
+        borderCollapse: "collapse";
+        fontSize: "12px";
+    };
+    perfTh: {
+        padding: "5px 10px";
+        textAlign: "left";
+        color: "var(--dt-text-dim)";
+        fontWeight: "600";
+        fontSize: "10px";
+        textTransform: "uppercase";
+        letterSpacing: "0.06em";
+        borderBottom: "1px solid var(--dt-border-2)";
+        position: "sticky";
+        top: "0";
+        background: "var(--dt-bg)";
+    };
+    perfThRight: {
+        textAlign: "right";
+    };
+    perfRow: {
+        borderBottom: "1px solid var(--dt-border-3)";
+        "&:hover": {
+            background: "var(--dt-bg-hover)";
+        };
+    };
+    perfRowClickable: {
+        cursor: "pointer";
+    };
+    perfCell: {
+        padding: "4px 10px";
+        verticalAlign: "middle";
+    };
+    perfName: {
+        color: "var(--dt-text)";
+        fontWeight: "500";
+    };
+    perfNum: {
+        textAlign: "right";
+        color: "var(--dt-text-muted)";
+        fontVariantNumeric: "tabular-nums";
+    };
+    perfBarWrap: {
+        width: "80px";
+        height: "6px";
+        background: "var(--dt-bg-3)";
+        borderRadius: "3px";
+        overflow: "hidden";
+        display: "inline-block";
+        verticalAlign: "middle";
+    };
+    perfBar: {
+        height: "100%";
+        background: "var(--dt-accent)";
+        borderRadius: "3px";
+        transition: "width 0.2s ease";
+    };
+    perfBarLabel: {
+        fontSize: "11px";
+        color: "var(--dt-text-dim)";
+        marginLeft: "5px";
+    };
+}>;
+//# sourceMappingURL=styles.d.ts.map