@treasuryspatial/viewer-ui-kit 0.1.40 → 0.1.42

package/dist/TopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkDvC,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAe,EACf,MAAc,EACd,KAAK,EACL,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE,WAAW,2CAUb"}
+{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../src/TopBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8DvC,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAe,EACf,MAAc,EACd,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAa,EACb,SAAS,GACV,EAAE,WAAW,2CAWb"}

package/dist/TopBar.js

@@ -13,11 +13,12 @@ const Root = styled.nav `
   color: var(--viewer-ui-color-text-strong, var(--brand-text-primary, #1f2937));
   transform: ${(props) => (props.$hidden ? 'translateY(-100%)' : 'translateY(0)')};
   transition: transform 0.22s ease;
+  overflow: visible;
 `;
 const Inner = styled.div `
   height: 100%;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: ${(props) => (props.$hasCenter ? 'minmax(0, 1fr) auto minmax(0, 1fr)' : 'minmax(0, 1fr) auto')};
   align-items: center;
   gap: 16px;
   padding: 0 16px;
@@ -32,7 +33,7 @@ const BrandSlot = styled.div `
   align-items: center;
 `;
 const CenterSlot = styled.div `
-  display: none;
+  display: flex;
   justify-content: center;
   align-items: center;
   min-width: 0;
@@ -43,6 +44,16 @@ const ActionsSlot = styled.div `
   justify-content: flex-end;
   align-items: center;
 `;
-export default function TopBar({ compact = false, hidden = false, brand, center, actions, className, }) {
-    return (_jsx(Root, { className: className, "$compact": compact, "$hidden": hidden, children: _jsxs(Inner, { children: [_jsx(BrandSlot, { children: brand }), _jsx(CenterSlot, { children: center }), _jsx(ActionsSlot, { children: actions })] }) }));
+const BottomOverlay = styled.div `
+  position: absolute;
+  left: 50%;
+  bottom: -1px;
+  transform: translate(-50%, 100%);
+  z-index: 60;
+  display: ${(props) => (props.$compact ? 'flex' : 'none')};
+  align-items: center;
+  gap: 8px;
+`;
+export default function TopBar({ compact = false, hidden = false, brand, center, actions, bottomOverlay, className, }) {
+    return (_jsxs(Root, { className: className, "$compact": compact, "$hidden": hidden, children: [_jsxs(Inner, { "$hasCenter": Boolean(center), children: [_jsx(BrandSlot, { children: brand }), center ? _jsx(CenterSlot, { children: center }) : null, _jsx(ActionsSlot, { children: actions })] }), bottomOverlay ? _jsx(BottomOverlay, { "$compact": compact, children: bottomOverlay }) : null] }));
 }

package/dist/layout.d.ts

@@ -20,6 +20,7 @@ export declare const PanelCollapseToggle: import("styled-components/dist/types")
 export declare const PanelShowToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, never>> & string;
 export declare const RightPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     $open: boolean;
+    $topOffset?: number;
 }>> & string;
 export declare const RightPanelCollapseToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, never>> & string;
 export declare const RightPanelShowToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, never>> & string;

package/dist/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,6NAKlB,CAAC;AAEF,eAAO,MAAM,WAAW;iBAAiC,MAAM;YAM9D,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,YAAY;WAAyB,OAAO;YAexD,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAK1B,CAAC;AAEF,eAAO,MAAM,UAAU,qOAItB,CAAC;AAEF,eAAO,MAAM,aAAa,yOAIzB,CAAC;AAEF,eAAO,MAAM,eAAe;YAAyB,SAAS,GAAG,OAAO,GAAG,OAAO;YA4BjF,CAAC;AAEF,eAAO,MAAM,SAAS,6NASrB,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wbAM/B,CAAC;AAEF,eAAO,MAAM,eAAe,wbAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;WAAyB,OAAO;YActD,CAAC;AAEF,eAAO,MAAM,wBAAwB,wbAMpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,wbAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,MAAM;YAO/D,CAAC;AAEF,eAAO,MAAM,aAAa,6NAYzB,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,+NAK1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yOAa7B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAGzB,CAAC;AAEF,eAAO,MAAM,YAAY,6NAKxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,eAAe,yOAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,OAAO;YAYhE,CAAC"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,6NAKlB,CAAC;AAEF,eAAO,MAAM,WAAW;iBAAiC,MAAM;YAM9D,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,YAAY;WAAyB,OAAO;YAexD,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAK1B,CAAC;AAEF,eAAO,MAAM,UAAU,qOAItB,CAAC;AAEF,eAAO,MAAM,aAAa,yOAIzB,CAAC;AAEF,eAAO,MAAM,eAAe;YAAyB,SAAS,GAAG,OAAO,GAAG,OAAO;YA4BjF,CAAC;AAEF,eAAO,MAAM,SAAS,6NASrB,CAAC;AAEF,eAAO,MAAM,WAAW,6NAOvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wbAM/B,CAAC;AAEF,eAAO,MAAM,eAAe,wbAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;WAAyB,OAAO;iBAAe,MAAM;YAc3E,CAAC;AAEF,eAAO,MAAM,wBAAwB,wbAMpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,wbAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,MAAM;YAO/D,CAAC;AAEF,eAAO,MAAM,aAAa,6NAYzB,CAAC;AAEF,eAAO,MAAM,eAAe,6NAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,+NAK1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yOAa7B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAGzB,CAAC;AAEF,eAAO,MAAM,YAAY,6NAKxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,eAAe,yOAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBAA6B,OAAO;YAYhE,CAAC"}

package/dist/layout.js

@@ -126,8 +126,8 @@ export const PanelShowToggle = styled.button.attrs({ className: 'collapse-toggle
 export const RightPanel = styled.aside `
   position: absolute;
   right: 0;
-  top: 0;
-  bottom: 0;
+  top: ${(props) => props.$topOffset ?? 0}px;
+  height: calc(100% - ${(props) => props.$topOffset ?? 0}px);
   width: var(--ui-metrics-width);
   background: var(--brand-panel);
   border-left: 1px solid var(--brand-panel-border);
@@ -135,7 +135,7 @@ export const RightPanel = styled.aside `
   display: flex;
   flex-direction: column;
   transform: translateX(${(props) => (props.$open ? '0' : '105%')});
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, top 0.3s ease, height 0.3s ease;
   z-index: 30;
 `;
 export const RightPanelCollapseToggle = styled.button.attrs({ className: 'collapse-toggle collapse-toggle--edge-left' }) `