@xeonr/console-shell 0.3.3 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ConsoleShell.d.ts +19 -1
- package/dist/ConsoleShell.d.ts.map +1 -1
- package/dist/ConsoleShell.js +29 -8
- package/dist/ConsoleShell.js.map +1 -1
- package/dist/TopBar.d.ts.map +1 -1
- package/dist/TopBar.js +21 -5
- package/dist/TopBar.js.map +1 -1
- package/package.json +3 -3
package/dist/ConsoleShell.d.ts
CHANGED
|
@@ -14,10 +14,28 @@ export interface ConsoleShellProps {
|
|
|
14
14
|
authOrigin?: string | undefined;
|
|
15
15
|
docsHref?: string | undefined;
|
|
16
16
|
wide?: boolean | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* This screen fills the viewport and scrolls its own panes, instead of being
|
|
19
|
+
* a document the frame scrolls.
|
|
20
|
+
*
|
|
21
|
+
* It is per-screen, not per-console: the shell is mounted once at the root
|
|
22
|
+
* layout, so a console with both kinds of screen (an observability
|
|
23
|
+
* workspace beside an ordinary settings page) passes this from its layout
|
|
24
|
+
* based on the route. A `fill` page gets no padding and no max width — the
|
|
25
|
+
* screen draws to the edges, which is what a timeline ruler and a
|
|
26
|
+
* full-bleed table need.
|
|
27
|
+
*
|
|
28
|
+
* Reach for it only when a screen genuinely cannot be a document: a
|
|
29
|
+
* virtualised list, independently scrolling panes, a canvas sized to the
|
|
30
|
+
* window. A tall page is not a reason — that is what the frame's scroll is
|
|
31
|
+
* for, and a `fill` screen gives up the browser's find-in-page over
|
|
32
|
+
* everything below the fold.
|
|
33
|
+
*/
|
|
34
|
+
fill?: boolean | undefined;
|
|
17
35
|
onEnableProduct?: ((p: Product) => void) | undefined;
|
|
18
36
|
/** what the host contributes to the account menu (other signed-in accounts, sign-out target) */
|
|
19
37
|
account?: AccountMenuConfig | undefined;
|
|
20
38
|
children: ReactNode;
|
|
21
39
|
}
|
|
22
|
-
export declare function ConsoleShell({ productLabel, base, sections, crumbs, searchPlaceholder, authOrigin, docsHref, wide, onEnableProduct, account: accountConfig, children, }: ConsoleShellProps): import("react").JSX.Element;
|
|
40
|
+
export declare function ConsoleShell({ productLabel, base, sections, crumbs, searchPlaceholder, authOrigin, docsHref, wide, fill, onEnableProduct, account: accountConfig, children, }: ConsoleShellProps): import("react").JSX.Element;
|
|
23
41
|
//# sourceMappingURL=ConsoleShell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConsoleShell.d.ts","sourceRoot":"","sources":["../src/ConsoleShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,cAAc,CAAC;AAGlD,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ConsoleShell.d.ts","sourceRoot":"","sources":["../src/ConsoleShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,cAAc,CAAC;AAGlD,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA6E1C,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,6FAA6F;IAC7F,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrD,gGAAgG;IAChG,OAAO,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,iBAAiB,EACjB,UAAoC,EACpC,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,eAAe,EACf,OAAO,EAAE,aAAa,EACtB,QAAQ,GACT,EAAE,iBAAiB,+BA0EnB"}
|
package/dist/ConsoleShell.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useEffect, useState } from "react";
|
|
3
|
-
import styled from "styled-components";
|
|
3
|
+
import styled, { css } from "styled-components";
|
|
4
4
|
import { Skeleton, v } from "@xeonr/platform-ui";
|
|
5
5
|
import { useConsoleMaybe } from "./ConsoleProvider.js";
|
|
6
6
|
import { ScopeRail } from "./ScopeRail.js";
|
|
@@ -35,13 +35,34 @@ const Main = styled.div `
|
|
|
35
35
|
min-width: 0;
|
|
36
36
|
display: flex;
|
|
37
37
|
flex-direction: column;
|
|
38
|
-
|
|
38
|
+
/* Normally the page scrolls and the screen is as tall as its content. A
|
|
39
|
+
fill screen scrolls its own panes instead, so the frame must not. */
|
|
40
|
+
overflow-y: ${(p) => (p.$fill ? "hidden" : "auto")};
|
|
39
41
|
`;
|
|
40
42
|
const Page = styled.main `
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
${(p) => p.$fill
|
|
44
|
+
? css `
|
|
45
|
+
/* A definite-height, unpadded flex column: the screen owns the
|
|
46
|
+
viewport below the top bar. Needed by a workspace whose panes
|
|
47
|
+
scroll independently (a facet rail beside a virtualised table
|
|
48
|
+
beside a detail panel) and by any virtualised list at all —
|
|
49
|
+
a row windower resolves its viewport against this box, and
|
|
50
|
+
against an auto-height parent it measures zero and renders
|
|
51
|
+
nothing. The screen supplies its own padding, because a
|
|
52
|
+
full-bleed table and a ruler aligned to the viewport edge are
|
|
53
|
+
the point. */
|
|
54
|
+
flex: 1 1 auto;
|
|
55
|
+
min-height: 0;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
width: 100%;
|
|
59
|
+
`
|
|
60
|
+
: css `
|
|
61
|
+
padding: 20px 24px 40px;
|
|
62
|
+
max-width: ${p.$wide ? "none" : "1240px"};
|
|
63
|
+
width: 100%;
|
|
64
|
+
margin: 0 auto;
|
|
65
|
+
`}
|
|
45
66
|
`;
|
|
46
67
|
const MobileScrim = styled.div `
|
|
47
68
|
position: fixed; inset: 0;
|
|
@@ -55,7 +76,7 @@ const SkeletonFrame = styled.div `
|
|
|
55
76
|
> div:nth-child(2) { width: 224px; border-right: 1px solid ${v.line}; background: ${v.sidebar}; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
|
|
56
77
|
> div:last-child { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
|
|
57
78
|
`;
|
|
58
|
-
export function ConsoleShell({ productLabel, base, sections, crumbs, searchPlaceholder, authOrigin = "https://auth.xeonr.io", docsHref, wide, onEnableProduct, account: accountConfig, children, }) {
|
|
79
|
+
export function ConsoleShell({ productLabel, base, sections, crumbs, searchPlaceholder, authOrigin = "https://auth.xeonr.io", docsHref, wide, fill, onEnableProduct, account: accountConfig, children, }) {
|
|
59
80
|
const c = useConsoleMaybe();
|
|
60
81
|
const [side, setSide] = useState(false);
|
|
61
82
|
const [palette, setPalette] = useState(false);
|
|
@@ -79,7 +100,7 @@ export function ConsoleShell({ productLabel, base, sections, crumbs, searchPlace
|
|
|
79
100
|
const layoutCrumbs = [...teamCrumb, { label: productLabel, href: base }, ...(crumbs ?? [])];
|
|
80
101
|
return (_jsx(CrumbProvider, { children: (published) => {
|
|
81
102
|
const allCrumbs = [...layoutCrumbs, ...published];
|
|
82
|
-
return (_jsxs(_Fragment, { children: [_jsx(Stripe, {}), _jsxs(Frame, { children: [_jsx(ScopeRail, { onOpenLauncher: () => setLauncher(true), onOpenAccount: () => setAccount((a) => !a) }), _jsx(SectionSidebar, { open: side, base: base, groups: sections, productLabel: productLabel, authOrigin: authOrigin, docsHref: docsHref, onNavigate: () => setSide(false) }), side ? _jsx(MobileScrim, { onClick: () => setSide(false) }) : null, _jsxs(Main, { children: [_jsx(TopBar, { crumbs: allCrumbs, searchPlaceholder: searchPlaceholder ?? `Search ${productLabel.toLowerCase()}, teams, products…`, onBurger: () => setSide((s) => !s), onSearch: () => setPalette(true), notifications: c.invitations.length, onNotifications: () => setAccount(true) }), _jsx(Page, { "$wide": wide, children: children })] })] }), palette ? _jsx(CommandPalette, { onClose: () => setPalette(false), base: base, groups: sections, productLabel: productLabel }) : null, launcher ? _jsx(Launcher, { onClose: () => setLauncher(false), authOrigin: authOrigin, onEnable: onEnableProduct }) : null, account ? _jsx(AccountMenu, { onClose: closeAccount, authOrigin: authOrigin, config: accountConfig }) : null] }));
|
|
103
|
+
return (_jsxs(_Fragment, { children: [_jsx(Stripe, {}), _jsxs(Frame, { children: [_jsx(ScopeRail, { onOpenLauncher: () => setLauncher(true), onOpenAccount: () => setAccount((a) => !a) }), _jsx(SectionSidebar, { open: side, base: base, groups: sections, productLabel: productLabel, authOrigin: authOrigin, docsHref: docsHref, onNavigate: () => setSide(false) }), side ? _jsx(MobileScrim, { onClick: () => setSide(false) }) : null, _jsxs(Main, { "$fill": fill, children: [_jsx(TopBar, { crumbs: allCrumbs, searchPlaceholder: searchPlaceholder ?? `Search ${productLabel.toLowerCase()}, teams, products…`, onBurger: () => setSide((s) => !s), onSearch: () => setPalette(true), notifications: c.invitations.length, onNotifications: () => setAccount(true) }), _jsx(Page, { "$wide": wide, "$fill": fill, children: children })] })] }), palette ? _jsx(CommandPalette, { onClose: () => setPalette(false), base: base, groups: sections, productLabel: productLabel }) : null, launcher ? _jsx(Launcher, { onClose: () => setLauncher(false), authOrigin: authOrigin, onEnable: onEnableProduct }) : null, account ? _jsx(AccountMenu, { onClose: closeAccount, authOrigin: authOrigin, config: accountConfig }) : null] }));
|
|
83
104
|
} }));
|
|
84
105
|
}
|
|
85
106
|
//# sourceMappingURL=ConsoleShell.js.map
|
package/dist/ConsoleShell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConsoleShell.js","sourceRoot":"","sources":["../src/ConsoleShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ConsoleShell.js","sourceRoot":"","sources":["../src/ConsoleShell.tsx"],"names":[],"mappings":"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"}
|
package/dist/TopBar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":"AAuEA,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,aAAiB,EACjB,eAAe,GAChB,EAAE;IACD,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5C,+BA8BA"}
|
package/dist/TopBar.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled from "styled-components";
|
|
2
|
+
import styled, { css } from "styled-components";
|
|
3
3
|
import { Icon, IconButton, v } from "@xeonr/platform-ui";
|
|
4
|
+
import { ShellLink } from "./links.js";
|
|
4
5
|
// Breadcrumb whose first crumb is always the team, then the product, then
|
|
5
6
|
// whatever the screen adds; ⌘K trigger; notifications.
|
|
6
7
|
const Bar = styled.header `
|
|
@@ -15,14 +16,29 @@ const Bar = styled.header `
|
|
|
15
16
|
position: sticky; top: 0;
|
|
16
17
|
z-index: calc(${v.zNav} - 2);
|
|
17
18
|
`;
|
|
18
|
-
const
|
|
19
|
+
const crumbText = css `
|
|
19
20
|
font-size: 13px;
|
|
20
|
-
color: ${(p) => (p.$last ? v.text : v.muted)};
|
|
21
|
-
font-weight: ${(p) => (p.$last ? 600 : 500)};
|
|
22
21
|
white-space: nowrap;
|
|
23
22
|
overflow: hidden; text-overflow: ellipsis;
|
|
24
23
|
max-width: 260px;
|
|
25
24
|
`;
|
|
25
|
+
const Crumb = styled.span `
|
|
26
|
+
${crumbText}
|
|
27
|
+
color: ${(p) => (p.$last ? v.text : v.muted)};
|
|
28
|
+
font-weight: ${(p) => (p.$last ? 600 : 500)};
|
|
29
|
+
`;
|
|
30
|
+
// A crumb with somewhere to go. It was a bare <a>, so every crumb click was a
|
|
31
|
+
// document load: the whole console reloaded, the shell fell back to its
|
|
32
|
+
// skeleton and re-read identity, teams, context and products before the page
|
|
33
|
+
// came back. ShellLink makes it a router link on this origin — exactly what
|
|
34
|
+
// the sidebar's links already are — and an <a> only when it leaves.
|
|
35
|
+
const CrumbLink = styled(ShellLink) `
|
|
36
|
+
${crumbText}
|
|
37
|
+
color: ${v.muted};
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
&:hover { color: ${v.text}; }
|
|
41
|
+
`;
|
|
26
42
|
const Sep = styled.span `color: ${v.faint}; display: grid; svg { font-size: 11px; }`;
|
|
27
43
|
const Search = styled.button `
|
|
28
44
|
height: 34px;
|
|
@@ -45,6 +61,6 @@ const Burger = styled(IconButton) `
|
|
|
45
61
|
@media (min-width: 901px) { display: none; }
|
|
46
62
|
`;
|
|
47
63
|
export function TopBar({ crumbs, searchPlaceholder, onBurger, onSearch, notifications = 0, onNotifications, }) {
|
|
48
|
-
return (_jsxs(Bar, { children: [_jsx(Burger, { type: "button", "aria-label": "Menu", onClick: onBurger, children: _jsx(Icon, { name: "menu" }) }), crumbs.map((c, i) => (_jsxs("span", { style: { display: "contents" }, children: [i > 0 ? _jsx(Sep, { children: _jsx(Icon, { name: "chevron-right" }) }) : null, c.href && i < crumbs.length - 1 ? (_jsx(
|
|
64
|
+
return (_jsxs(Bar, { children: [_jsx(Burger, { type: "button", "aria-label": "Menu", onClick: onBurger, children: _jsx(Icon, { name: "menu" }) }), crumbs.map((c, i) => (_jsxs("span", { style: { display: "contents" }, children: [i > 0 ? _jsx(Sep, { children: _jsx(Icon, { name: "chevron-right" }) }) : null, c.href && i < crumbs.length - 1 ? (_jsx(CrumbLink, { href: c.href, children: c.label })) : (_jsx(Crumb, { "$last": i === crumbs.length - 1, children: c.label }))] }, `${c.label}-${i}`))), _jsx(Spacer, {}), _jsxs(Search, { type: "button", onClick: onSearch, "aria-label": "Search and commands", children: [_jsx(Icon, { name: "search" }), _jsx("span", { children: searchPlaceholder }), _jsx("kbd", { children: "\u2318K" })] }), onNotifications ? (_jsxs(IconButton, { type: "button", "$size": 34, "aria-label": notifications ? `${notifications} notifications` : "Notifications", onClick: onNotifications, style: { position: "relative" }, children: [_jsx(Icon, { name: "bell" }), notifications > 0 ? (_jsx("span", { style: { position: "absolute", top: 6, right: 7, width: 8, height: 8, borderRadius: 999, background: v.danger } })) : null] })) : null] }));
|
|
49
65
|
}
|
|
50
66
|
//# sourceMappingURL=TopBar.js.map
|
package/dist/TopBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xeonr/console-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "The Xeonr Cloud Console chrome: product rail, team switcher, section sidebar, top bar, ⌘K and the All-products launcher, plus the console context hooks every product console mounts.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"react-dom": "^19.0.0",
|
|
24
24
|
"react-router-dom": "^7.0.0",
|
|
25
25
|
"styled-components": "^6.0.0",
|
|
26
|
-
"@xeonr/platform-ui": "^0.
|
|
26
|
+
"@xeonr/platform-ui": "^0.4.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "^19.1.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"react-router-dom": "^7.8.0",
|
|
34
34
|
"styled-components": "^6.1.19",
|
|
35
35
|
"typescript": "^5.9.2",
|
|
36
|
-
"@xeonr/platform-ui": "0.
|
|
36
|
+
"@xeonr/platform-ui": "0.4.0"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@bufbuild/protobuf": "^2.10.2",
|