@powerhousedao/design-system 5.1.0-dev.2 → 5.1.0-dev.21

package/dist/src/connect/components/remotes-inspector/remotes-inspector.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "@powerhousedao/design-system";
+import {} from "@powerhousedao/reactor";
+import { useCallback, useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { ChannelInspector } from "./components/channel-inspector.js";
+import { SortIcon } from "./components/sort-icon.js";
+import { truncateId, } from "./utils.js";
+const COLUMNS = [
+    { key: "id", label: "ID", width: "120px" },
+    { key: "name", label: "Name", width: "150px" },
+    { key: "collectionId", label: "Collection ID", width: "200px" },
+    { key: "filter", label: "Filter", width: "200px" },
+    { key: "channel", label: "Channel", width: "100px" },
+];
+function formatFilter(filter) {
+    const parts = [];
+    if (filter.branch) {
+        parts.push(`branch:${filter.branch}`);
+    }
+    if (filter.documentId.length > 0) {
+        parts.push(`${filter.documentId.length} doc(s)`);
+    }
+    if (filter.scope.length > 0) {
+        parts.push(`${filter.scope.length} scope(s)`);
+    }
+    return parts.length > 0 ? parts.join(", ") : "-";
+}
+function sortRemotes(remotes, sort) {
+    if (!sort)
+        return remotes;
+    return [...remotes].sort((a, b) => {
+        let aValue;
+        let bValue;
+        switch (sort.column) {
+            case "id":
+                aValue = a.id;
+                bValue = b.id;
+                break;
+            case "name":
+                aValue = a.name;
+                bValue = b.name;
+                break;
+            case "collectionId":
+                aValue = a.collectionId;
+                bValue = b.collectionId;
+                break;
+            case "filter":
+                aValue = formatFilter(a.filter);
+                bValue = formatFilter(b.filter);
+                break;
+            default:
+                return 0;
+        }
+        const comparison = aValue.localeCompare(bValue);
+        return sort.direction === "asc" ? comparison : -comparison;
+    });
+}
+export function RemotesInspector({ getRemotes }) {
+    const [remotes, setRemotes] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [sort, setSort] = useState();
+    const [selectedRemote, setSelectedRemote] = useState();
+    const loadRemotes = useCallback(async () => {
+        setLoading(true);
+        const data = await getRemotes();
+        setRemotes(data);
+        setLoading(false);
+    }, [getRemotes]);
+    useEffect(() => {
+        void loadRemotes();
+    }, [loadRemotes]);
+    const handleRefresh = useCallback(async () => {
+        await loadRemotes();
+        if (selectedRemote) {
+            const updated = remotes.find((r) => r.id === selectedRemote.id);
+            setSelectedRemote(updated);
+        }
+    }, [loadRemotes, selectedRemote, remotes]);
+    const handleSort = (columnKey) => {
+        if (columnKey === "channel")
+            return;
+        const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
+        setSort({ column: columnKey, direction: newDirection });
+    };
+    const handleViewChannel = (remote) => {
+        setSelectedRemote(remote);
+    };
+    const handleBack = () => {
+        setSelectedRemote(undefined);
+    };
+    if (selectedRemote) {
+        return (_jsx(ChannelInspector, { channel: selectedRemote.channel, onBack: handleBack, onRefresh: () => void handleRefresh(), remoteName: selectedRemote.name }));
+    }
+    const sortedRemotes = sortRemotes(remotes, sort);
+    return (_jsxs("div", { className: "flex h-full flex-col gap-2 p-4", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Remotes Inspector" }), _jsxs("button", { className: "flex items-center gap-1 rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 disabled:opacity-50", disabled: loading, onClick: () => void handleRefresh(), type: "button", children: [_jsx(Icon, { name: "Reload", size: 14 }), "Refresh"] })] }), _jsx("div", { className: "max-h-full overflow-auto rounded-lg border border-gray-300", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { className: "sticky top-0 bg-gray-100", children: _jsx("tr", { children: COLUMNS.map((column, index) => {
+                                    const isActive = sort?.column === column.key;
+                                    const sortDirection = isActive ? sort.direction : "asc";
+                                    const isSortable = column.key !== "channel";
+                                    return (_jsx("th", { className: twMerge("group px-3 py-2 text-left text-xs font-medium text-gray-600", index > 0 && "border-l border-gray-300", isSortable &&
+                                            "cursor-pointer hover:bg-gray-200 hover:text-gray-900"), onClick: () => isSortable && handleSort(column.key), style: { width: column.width }, children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "truncate", children: column.label }), isSortable && (_jsx(SortIcon, { active: isActive, direction: sortDirection }))] }) }, column.key));
+                                }) }) }), _jsx("tbody", { children: loading && sortedRemotes.length === 0 ? (_jsx("tr", { children: _jsx("td", { className: "px-3 py-8 text-center text-sm text-gray-500", colSpan: COLUMNS.length, children: "Loading..." }) })) : sortedRemotes.length === 0 ? (_jsx("tr", { children: _jsx("td", { className: "px-3 py-8 text-center text-sm text-gray-500", colSpan: COLUMNS.length, children: "No remotes configured" }) })) : (sortedRemotes.map((remote) => (_jsxs("tr", { className: "odd:bg-white even:bg-gray-50 hover:bg-blue-50", children: [_jsx("td", { className: "px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: remote.id, children: truncateId(remote.id) }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: remote.name, children: remote.name }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: remote.collectionId, children: remote.collectionId }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2 text-xs text-gray-900", children: _jsx("span", { className: "block truncate", title: formatFilter(remote.filter), children: formatFilter(remote.filter) }) }), _jsx("td", { className: "border-l border-gray-300 px-3 py-2", children: _jsxs("button", { className: "flex items-center gap-1 rounded bg-blue-50 px-2 py-1 text-xs text-blue-700 hover:bg-blue-100", onClick: () => handleViewChannel(remote), type: "button", children: ["View", _jsx(Icon, { name: "CaretRight", size: 12 })] }) })] }, remote.id)))) })] }) }), _jsxs("div", { className: "shrink-0 text-sm text-gray-600", children: ["Showing ", sortedRemotes.length, " remote(s)"] })] }));
+}
+//# sourceMappingURL=remotes-inspector.js.map

package/dist/src/connect/components/remotes-inspector/remotes-inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remotes-inspector.js","sourceRoot":"","sources":["../../../../../src/connect/components/remotes-inspector/remotes-inspector.tsx"],"names":[],"mappings":"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"}

package/dist/src/connect/components/remotes-inspector/remotes-inspector.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RemotesInspector } from "./remotes-inspector.js";
+declare const meta: Meta<typeof RemotesInspector>;
+export default meta;
+type Story = StoryObj<typeof RemotesInspector>;
+export declare const Default: Story;
+export declare const EmptyRemotes: Story;
+export declare const SingleRemote: Story;
+export declare const ManyRemotes: Story;
+//# sourceMappingURL=remotes-inspector.stories.d.ts.map

package/dist/src/connect/components/remotes-inspector/remotes-inspector.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remotes-inspector.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/remotes-inspector/remotes-inspector.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAavC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAiJ/C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AA8CF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC"}

package/dist/src/connect/components/remotes-inspector/remotes-inspector.stories.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SyncOperationStatus, } from "@powerhousedao/reactor";
+import { RemotesInspector } from "./remotes-inspector.js";
+const meta = {
+    title: "Connect/Components/RemotesInspector/RemotesInspector",
+    component: RemotesInspector,
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "h-[600px] w-full", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+function createMockMailbox(items) {
+    return {
+        get items() {
+            return items;
+        },
+    };
+}
+function createMockSyncOperation(id, documentId, branch, status, opsCount, errorMessage) {
+    return {
+        id,
+        remoteName: "mock-remote",
+        documentId,
+        scopes: ["global"],
+        branch,
+        operations: Array(opsCount).fill({ type: "mock" }),
+        status,
+        error: errorMessage
+            ? { source: "channel", error: new Error(errorMessage) }
+            : undefined,
+    };
+}
+function createMockChannel(inboxOps, outboxOps, deadLetterOps) {
+    return {
+        inbox: createMockMailbox(inboxOps),
+        outbox: createMockMailbox(outboxOps),
+        deadLetter: createMockMailbox(deadLetterOps),
+    };
+}
+const mockRemotes = [
+    {
+        id: "abc-123-def-456",
+        name: "remote-main",
+        collectionId: "drive:main/documents",
+        filter: {
+            documentId: [],
+            scope: [],
+            branch: "main",
+        },
+        options: {},
+        channel: createMockChannel([
+            createMockSyncOperation("op-001", "doc-abc", "main", SyncOperationStatus.TransportPending, 5),
+            createMockSyncOperation("op-002", "doc-def", "main", SyncOperationStatus.ExecutionPending, 3),
+            createMockSyncOperation("op-003", "doc-ghi", "dev", SyncOperationStatus.Applied, 2),
+        ], [
+            createMockSyncOperation("op-101", "doc-xyz", "main", SyncOperationStatus.TransportPending, 7),
+            createMockSyncOperation("op-102", "doc-uvw", "feat", SyncOperationStatus.TransportPending, 1),
+        ], [
+            createMockSyncOperation("op-050", "doc-err", "main", SyncOperationStatus.Error, 4, "SIGNATURE_INVALID"),
+        ]),
+    },
+    {
+        id: "ghi-789-jkl-012",
+        name: "remote-dev",
+        collectionId: "drive:dev/experiments",
+        filter: {
+            documentId: ["doc-1", "doc-2"],
+            scope: ["scope-a"],
+            branch: "dev",
+        },
+        options: {},
+        channel: createMockChannel([
+            createMockSyncOperation("op-201", "doc-test", "dev", SyncOperationStatus.Applied, 10),
+        ], [], []),
+    },
+    {
+        id: "mno-345-pqr-678",
+        name: "remote-feature",
+        collectionId: "drive:feature/new-ui",
+        filter: {
+            documentId: [],
+            scope: ["ui", "components"],
+            branch: "feature/new-ui",
+        },
+        options: {},
+        channel: createMockChannel([], [], []),
+    },
+];
+export const Default = {
+    args: {
+        getRemotes: () => Promise.resolve(mockRemotes),
+    },
+};
+export const EmptyRemotes = {
+    args: {
+        getRemotes: () => Promise.resolve([]),
+    },
+};
+export const SingleRemote = {
+    args: {
+        getRemotes: () => Promise.resolve([mockRemotes[0]]),
+    },
+};
+const manyRemotes = Array.from({ length: 20 }, (_, i) => ({
+    id: `remote-id-${i + 1}-${Math.random().toString(36).slice(2, 8)}`,
+    name: `remote-${i + 1}`,
+    collectionId: `drive:collection-${i + 1}/path`,
+    filter: {
+        documentId: i % 3 === 0 ? [`doc-${i}`] : [],
+        scope: i % 2 === 0 ? ["scope-a"] : [],
+        branch: i % 4 === 0 ? "main" : i % 4 === 1 ? "dev" : `feature-${i}`,
+    },
+    options: {},
+    channel: createMockChannel(Array.from({ length: i % 5 }, (_, j) => createMockSyncOperation(`op-${i}-${j}`, `doc-${i}-${j}`, "main", SyncOperationStatus.TransportPending, j + 1)), Array.from({ length: (i + 1) % 3 }, (_, j) => createMockSyncOperation(`op-out-${i}-${j}`, `doc-out-${i}-${j}`, "main", SyncOperationStatus.ExecutionPending, j + 2)), i % 7 === 0
+        ? [
+            createMockSyncOperation(`op-dead-${i}`, `doc-dead-${i}`, "main", SyncOperationStatus.Error, 1, "HASH_MISMATCH"),
+        ]
+        : []),
+}));
+export const ManyRemotes = {
+    args: {
+        getRemotes: () => Promise.resolve(manyRemotes),
+    },
+};
+//# sourceMappingURL=remotes-inspector.stories.js.map

package/dist/src/connect/components/remotes-inspector/remotes-inspector.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remotes-inspector.stories.js","sourceRoot":"","sources":["../../../../../src/connect/components/remotes-inspector/remotes-inspector.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/connect/components/remotes-inspector/utils.d.ts

@@ -0,0 +1,12 @@
+export type SortDirection = "asc" | "desc";
+export type SortOptions = {
+    readonly column: string;
+    readonly direction: SortDirection;
+};
+export type ColumnDef = {
+    readonly key: string;
+    readonly label: string;
+    readonly width?: string;
+};
+export declare function truncateId(id: string, maxLength?: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/connect/components/remotes-inspector/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/remotes-inspector/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,GAAE,MAAW,GAAG,MAAM,CAGrE"}

package/dist/src/connect/components/remotes-inspector/utils.js

@@ -0,0 +1,6 @@
+export function truncateId(id, maxLength = 12) {
+    if (id.length <= maxLength)
+        return id;
+    return id.slice(0, maxLength) + "...";
+}
+//# sourceMappingURL=utils.js.map

package/dist/src/connect/components/remotes-inspector/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/connect/components/remotes-inspector/utils.ts"],"names":[],"mappings":"AAaA,MAAM,UAAU,UAAU,CAAC,EAAU,EAAE,YAAoB,EAAE;IAC3D,IAAI,EAAE,CAAC,MAAM,IAAI,SAAS;QAAE,OAAO,EAAE,CAAC;IACtC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;AACxC,CAAC"}

package/dist/src/connect/components/sidebar/sidebar-footer.d.ts

@@ -3,6 +3,7 @@ import type { ComponentProps } from "react";
 export interface ConnectSidebarFooterProps extends ComponentProps<typeof SidebarFooter> {
     address: `0x${string}` | undefined;
     onClickSettings: (() => void) | undefined;
+    onInspectorClick?: () => void;
     onLogin: (() => void) | undefined;
     etherscanUrl?: string;
     onDisconnect: (() => void) | undefined;

package/dist/src/connect/components/sidebar/sidebar-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-footer.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,yBACf,SAAQ,cAAc,CAAC,OAAO,aAAa,CAAC;IAC5C,OAAO,EAAE,KAAK,MAAM,EAAE,GAAG,SAAS,CAAC;IACnC,eAAe,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1C,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACxC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA4CpE,CAAC"}
+{"version":3,"file":"sidebar-footer.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,yBACf,SAAQ,cAAc,CAAC,OAAO,aAAa,CAAC;IAC5C,OAAO,EAAE,KAAK,MAAM,EAAE,GAAG,SAAS,CAAC;IACnC,eAAe,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACxC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAuDpE,CAAC"}

package/dist/src/connect/components/sidebar/sidebar-footer.js

@@ -3,7 +3,7 @@ import { Icon, SidebarFooter } from "@powerhousedao/design-system";
 import { twMerge } from "tailwind-merge";
 import { SidebarLogin } from "./sidebar-login.js";
 import { SidebarUser } from "./sidebar-user.js";
-export const ConnectSidebarFooter = ({ address, className, onLogin, onClickSettings, onDisconnect, etherscanUrl = "", ...props }) => {
-    return (_jsxs(SidebarFooter, { ...props, className: twMerge("flex flex-col gap-2 border-t border-gray-300 px-2 py-4", className), children: [_jsx("div", { children: address ? (_jsx(SidebarUser, { address: address, onDisconnect: onDisconnect, etherscanUrl: etherscanUrl })) : (_jsx(SidebarLogin, { onLogin: onLogin })) }), _jsxs("button", { "aria-label": "Settings", type: "button", className: twMerge("mt-3 flex w-full items-center justify-center outline-none", onClickSettings ? "cursor-pointer" : "cursor-wait"), onClick: onClickSettings, children: [_jsx(Icon, { className: "text-gray-600", name: "Settings" }), _jsx("span", { className: "hidden text-sm font-semibold leading-6 text-gray-800", children: "Settings" })] })] }));
+export const ConnectSidebarFooter = ({ address, className, onLogin, onClickSettings, onInspectorClick, onDisconnect, etherscanUrl = "", ...props }) => {
+    return (_jsxs(SidebarFooter, { ...props, className: twMerge("flex flex-col gap-2 border-t border-gray-300 px-2 py-4", className), children: [_jsx("div", { children: address ? (_jsx(SidebarUser, { address: address, onDisconnect: onDisconnect, etherscanUrl: etherscanUrl })) : (_jsx(SidebarLogin, { onLogin: onLogin })) }), onInspectorClick && (_jsx("button", { "aria-label": "Inspector", type: "button", className: "mt-3 flex w-full cursor-pointer items-center justify-center outline-none", onClick: onInspectorClick, children: _jsx(Icon, { className: "text-gray-600", name: "CircleInfo" }) })), _jsxs("button", { "aria-label": "Settings", type: "button", className: twMerge("mt-3 flex w-full items-center justify-center outline-none", onClickSettings ? "cursor-pointer" : "cursor-wait"), onClick: onClickSettings, children: [_jsx(Icon, { className: "text-gray-600", name: "Settings" }), _jsx("span", { className: "hidden text-sm font-semibold leading-6 text-gray-800", children: "Settings" })] })] }));
 };
 //# sourceMappingURL=sidebar-footer.js.map

package/dist/src/connect/components/sidebar/sidebar-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-footer.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWhD,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,OAAO,EACP,SAAS,EACT,OAAO,EACP,eAAe,EACf,YAAY,EACZ,YAAY,GAAG,EAAE,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,aAAa,OACR,KAAK,EACT,SAAS,EAAE,OAAO,CAChB,wDAAwD,EACxD,SAAS,CACV,aAED,wBACG,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,CACnC,GACG,EACN,gCACa,UAAU,EACrB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,CAChB,2DAA2D,EAC3D,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CACnD,EACD,OAAO,EAAE,eAAe,aAExB,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,UAAU,GAAG,EAClD,eAAM,SAAS,EAAC,sDAAsD,yBAE/D,IACA,IACK,CACjB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"sidebar-footer.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAYhD,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,OAAO,EACP,SAAS,EACT,OAAO,EACP,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,YAAY,GAAG,EAAE,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,aAAa,OACR,KAAK,EACT,SAAS,EAAE,OAAO,CAChB,wDAAwD,EACxD,SAAS,CACV,aAED,wBACG,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,CACnC,GACG,EACL,gBAAgB,IAAI,CACnB,+BACa,WAAW,EACtB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0EAA0E,EACpF,OAAO,EAAE,gBAAgB,YAEzB,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,YAAY,GAAG,GAC7C,CACV,EACD,gCACa,UAAU,EACrB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,CAChB,2DAA2D,EAC3D,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CACnD,EACD,OAAO,EAAE,eAAe,aAExB,KAAC,IAAI,IAAC,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,UAAU,GAAG,EAClD,eAAM,SAAS,EAAC,sDAAsD,yBAE/D,IACA,IACK,CACjB,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/connect/components/sidebar/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAGrE,MAAM,WAAW,mBACf,SAAQ,cAAc,CAAC,WAAW,CAAC,EACjC,yBAAyB,EACzB,yBAAyB;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,YAAY,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6BxD,CAAC"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAGrE,MAAM,WAAW,mBACf,SAAQ,cAAc,CAAC,WAAW,CAAC,EACjC,yBAAyB,EACzB,yBAAyB;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,YAAY,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+BxD,CAAC"}

package/dist/src/connect/components/sidebar/sidebar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sidebar, SidebarPanel } from "@powerhousedao/design-system";
 import { ConnectSidebarFooter } from "./sidebar-footer.js";
 import { ConnectSidebarHeader } from "./sidebar-header.js";
-export const ConnectSidebar = ({ onClick, address, headerContent, onClickSettings, maxWidth = "304px", minWidth = "58px", onLogin, onDisconnect, etherscanUrl, ...props }) => {
-    return (_jsxs(Sidebar, { ...props, maxWidth: maxWidth, minWidth: minWidth, children: [_jsxs(SidebarPanel, { children: [_jsx(ConnectSidebarHeader, { onClick: onClick, children: headerContent }), _jsx("div", { className: "flex flex-col", children: props.children })] }), _jsx(ConnectSidebarFooter, { address: address, onClickSettings: onClickSettings, onLogin: onLogin, onDisconnect: onDisconnect, etherscanUrl: etherscanUrl })] }));
+export const ConnectSidebar = ({ onClick, address, headerContent, onClickSettings, onInspectorClick, maxWidth = "304px", minWidth = "58px", onLogin, onDisconnect, etherscanUrl, ...props }) => {
+    return (_jsxs(Sidebar, { ...props, maxWidth: maxWidth, minWidth: minWidth, children: [_jsxs(SidebarPanel, { children: [_jsx(ConnectSidebarHeader, { onClick: onClick, children: headerContent }), _jsx("div", { className: "flex flex-col", children: props.children })] }), _jsx(ConnectSidebarFooter, { address: address, onClickSettings: onClickSettings, onInspectorClick: onInspectorClick, onLogin: onLogin, onDisconnect: onDisconnect, etherscanUrl: etherscanUrl })] }));
 };
 //# sourceMappingURL=sidebar.js.map

package/dist/src/connect/components/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAgB3D,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,OAAO,EACP,OAAO,EACP,aAAa,EACb,eAAe,EACf,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,MAAM,EACjB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,aACxD,MAAC,YAAY,eACX,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,YACnC,aAAa,GACO,EACvB,cAAK,SAAS,EAAC,eAAe,YAAE,KAAK,CAAC,QAAQ,GAAO,IACxC,EACf,KAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,GAC1B,IACM,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../../src/connect/components/sidebar/sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAgB3D,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,OAAO,EACP,OAAO,EACP,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,MAAM,EACjB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,aACxD,MAAC,YAAY,eACX,KAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,YACnC,aAAa,GACO,EACvB,cAAK,SAAS,EAAC,eAAe,YAAE,KAAK,CAAC,QAAQ,GAAO,IACxC,EACf,KAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,GAC1B,IACM,CACX,CAAC;AACJ,CAAC,CAAC"}

package/dist/style.css

@@ -707,12 +707,14 @@
     --color-green-700: hsl(136 52% 55%);
     --color-green-800: hsl(136 53% 49%);
     --color-green-900: hsl(136 53% 43%);
+    --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: hsl(209 100% 90%);
     --color-blue-200: hsl(209 97% 85%);
     --color-blue-300: hsl(209 100% 80%);
     --color-blue-400: hsl(209 100% 75%);
     --color-blue-500: hsl(209 100% 70%);
     --color-blue-600: hsl(209 100% 65%);
+    --color-blue-700: hsl(209 100% 60%);
     --color-blue-800: hsl(209 100% 55%);
     --color-blue-900: hsl(209 100% 50%);
     --color-purple-900: hsl(263 78% 63%);
@@ -1429,6 +1431,15 @@
   .h-\[420px\] {
     height: 420px;
   }
+  .h-\[480px\] {
+    height: 480px;
+  }
+  .h-\[600px\] {
+    height: 600px;
+  }
+  .h-\[700px\] {
+    height: 700px;
+  }
   .h-auto {
     height: auto;
   }
@@ -1453,6 +1464,9 @@
   .max-h-6 {
     max-height: calc(var(--spacing) * 6);
   }
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
   .max-h-\[245px\] {
     max-height: 245px;
   }
@@ -1465,6 +1479,9 @@
   .max-h-\[404px\] {
     max-height: 404px;
   }
+  .max-h-full {
+    max-height: 100%;
+  }
   .max-h-screen {
     max-height: 100vh;
   }
@@ -1579,6 +1596,9 @@
   .w-\[500px\] {
     width: 500px;
   }
+  .w-\[900px\] {
+    width: 900px;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -1657,6 +1677,9 @@
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .border-separate {
     border-collapse: separate;
   }
@@ -1780,6 +1803,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .gap-32 {
     gap: calc(var(--spacing) * 32);
   }
@@ -1951,6 +1977,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1974,6 +2004,9 @@
   .border-black {
     border-color: var(--color-black);
   }
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
   .border-blue-600 {
     border-color: var(--color-blue-600);
   }
@@ -2037,6 +2070,9 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -2139,6 +2175,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -2184,6 +2223,9 @@
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -2202,6 +2244,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-28 {
     padding-block: calc(var(--spacing) * 28);
   }
@@ -2217,6 +2262,9 @@
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -2386,6 +2434,9 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
+  .text-blue-700 {
+    color: var(--color-blue-700);
+  }
   .text-blue-900 {
     color: var(--color-blue-900);
   }
@@ -2446,6 +2497,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-red-700 {
     color: var(--color-red-700);
   }
@@ -2500,6 +2554,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -2720,6 +2777,13 @@
       }
     }
   }
+  .group-hover\:opacity-50 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 50%;
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3099,6 +3163,20 @@
       }
     }
   }
+  .hover\:bg-blue-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-50);
+      }
+    }
+  }
+  .hover\:bg-blue-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-100);
+      }
+    }
+  }
   .hover\:bg-blue-300 {
     &:hover {
       @media (hover: hover) {
@@ -3141,6 +3219,13 @@
       }
     }
   }
+  .hover\:bg-red-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-800);
+      }
+    }
+  }
   .hover\:bg-slate-50 {
     &:hover {
       @media (hover: hover) {
@@ -3454,6 +3539,11 @@
       color: var(--color-slate-100);
     }
   }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
   .disabled\:opacity-100 {
     &:disabled {
       opacity: 100%;