@treasuryspatial/viewer-ui-kit 0.1.41 → 0.1.56

package/dist/ModuleSelectorPanel.js

@@ -1,61 +1,72 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
+import { panelSystemBodyTextCss, panelSystemSectionCss, panelSystemSectionHeadingCss, panelSystemValueCss, } from './PanelSystem.js';
 const PanelRoot = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 22px;
 `;
 const Section = styled.section `
-  border-bottom: 1px solid var(--viewer-ui-color-panel-border-subtle);
-  padding-bottom: 18px;
+  ${panelSystemSectionCss}
 `;
 const SectionHeader = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 `;
 const SectionTitle = styled.div `
-  font-family: var(--viewer-ui-font-display);
-  font-size: 22px;
-  font-weight: 700;
-  text-transform: lowercase;
-  letter-spacing: 0.06em;
-  color: var(--viewer-ui-color-text-strong);
-`;
-const SectionDescription = styled.p `
-  font-size: 11px;
-  text-transform: lowercase;
-  letter-spacing: 0.04em;
-  color: var(--viewer-ui-color-text-muted);
+  ${panelSystemSectionHeadingCss}
 `;
 const StatusBanner = styled.div `
-  padding: 12px 14px;
-  border-radius: 14px;
+  ${panelSystemBodyTextCss}
+  margin-top: 14px;
+  padding: 12px 0;
+  border-radius: 0;
   border: 1px solid var(--viewer-ui-color-panel-border);
+  border-left: 0;
+  border-right: 0;
   background: var(--viewer-ui-color-surface);
-  font-size: 11px;
-  text-transform: lowercase;
   color: var(--viewer-ui-color-text-muted);
 `;
 const ModuleGrid = styled.div `
   display: grid;
   grid-template-columns: 1fr;
-  gap: 10px;
+  gap: 0;
+  margin-top: 14px;
+  max-height: clamp(320px, 48vh, 640px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding-right: 0;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background: color-mix(in srgb, var(--viewer-ui-color-panel-border) 78%, transparent);
+    background-clip: padding-box;
+  }
 `;
 const ModuleButton = styled.button `
-  border-radius: 14px;
-  border: 1px solid
-    ${(props) => (props.$active ? 'var(--viewer-ui-color-button-primary)' : 'var(--viewer-ui-color-panel-border)')};
-  background: ${(props) => props.$active ? 'var(--viewer-ui-color-button-primary)' : 'var(--viewer-ui-color-surface)'};
-  color: ${(props) => props.$active ? 'var(--viewer-ui-color-text-strong)' : 'var(--viewer-ui-color-text-muted)'};
-  padding: 12px 14px;
+  border-radius: 0;
+  border: 0;
+  border-bottom: 1px solid var(--viewer-ui-color-panel-border);
+  background: transparent;
+  color: ${(props) => props.$active ? 'var(--viewer-ui-color-button-primary)' : 'var(--viewer-ui-color-text-strong)'};
+  padding: 9px 0;
   text-align: left;
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 
   &:hover {
-    border-color: var(--viewer-ui-color-button-primary);
     color: var(--viewer-ui-color-text-strong);
   }
 
@@ -65,32 +76,19 @@ const ModuleButton = styled.button `
   }
 `;
 const ModuleTitle = styled.div `
-  font-family: var(--viewer-ui-font-display);
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: lowercase;
-`;
-const ModuleSummary = styled.div `
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--viewer-ui-color-text-muted);
-  text-transform: lowercase;
-  letter-spacing: 0.03em;
+  ${panelSystemValueCss}
 `;
-const UploadSection = styled.section `
+const SupplementarySection = styled.section `
+  ${panelSystemSectionCss}
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
 `;
-const UploadMeta = styled.div `
+const UploadSection = styled.section `
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  font-size: 10px;
-  text-transform: lowercase;
-  color: var(--viewer-ui-color-text-muted);
+  gap: 10px;
 `;
-export default function ModuleSelectorPanel({ title = 'architectural modules', description, status = 'ready', error, modules, activeModuleId, onSelectModule, emptyLabel = 'No modules available.', uploadTitle = 'upload', uploadDescription, uploadSlot, uploadMeta, }) {
-    return (_jsxs(PanelRoot, { children: [_jsxs(Section, { children: [_jsxs(SectionHeader, { children: [_jsx(SectionTitle, { children: title }), description ? _jsx(SectionDescription, { children: description }) : null] }), status !== 'ready' ? (_jsx(StatusBanner, { children: error || (status === 'loading' ? 'Loading module registry…' : 'Module registry unavailable.') })) : modules.length === 0 ? (_jsx(StatusBanner, { children: emptyLabel })) : (_jsx(ModuleGrid, { children: modules.map((module) => (_jsxs(ModuleButton, { type: "button", "$active": module.id === activeModuleId, onClick: () => onSelectModule?.(module.id), disabled: module.disabled, children: [_jsx(ModuleTitle, { children: module.label }), module.summary ? _jsx(ModuleSummary, { children: module.summary }) : null] }, module.id))) }))] }), _jsxs(UploadSection, { children: [_jsxs(SectionHeader, { children: [_jsx(SectionTitle, { children: uploadTitle }), uploadDescription ? _jsx(SectionDescription, { children: uploadDescription }) : null] }), uploadSlot, uploadMeta ? _jsx(UploadMeta, { children: uploadMeta }) : null] })] }));
+export default function ModuleSelectorPanel({ title = 'architectural modules', description: _description, status = 'ready', error, modules, activeModuleId, onSelectModule, emptyLabel = 'No modules available.', uploadTitle = 'upload', uploadDescription: _uploadDescription, uploadSlot, uploadMeta: _uploadMeta, supplementarySlot, }) {
+    return (_jsxs(PanelRoot, { children: [_jsxs(Section, { children: [_jsx(SectionHeader, { children: _jsx(SectionTitle, { children: title }) }), status !== 'ready' ? (_jsx(StatusBanner, { children: error || (status === 'loading' ? 'Loading module registry…' : 'Module registry unavailable.') })) : modules.length === 0 ? (_jsx(StatusBanner, { children: emptyLabel })) : (_jsx(ModuleGrid, { children: modules.map((module) => (_jsx(ModuleButton, { type: "button", "$active": module.id === activeModuleId, onClick: () => onSelectModule?.(module.id), disabled: module.disabled, children: _jsx(ModuleTitle, { children: module.label }) }, module.id))) }))] }), supplementarySlot ? _jsx(SupplementarySection, { children: supplementarySlot }) : null, _jsxs(UploadSection, { children: [_jsx(SectionHeader, { children: _jsx(SectionTitle, { children: uploadTitle }) }), uploadSlot] })] }));
 }

package/dist/PanelSkin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,2FA8kBrB,CAAC"}
+{"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,SAAS,2FAm1DrB,CAAC"}