@treasuryspatial/viewer-ui-kit 0.1.38 → 0.1.39

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.
Files changed (9) hide show
  1. package/dist/ComposerRightRail.js +1 -1
  2. package/dist/MetricsPanelContent.d.ts.map +1 -1
  3. package/dist/MetricsPanelContent.js +37 -42
  4. package/dist/PanelSkin.d.ts.map +1 -1
  5. package/dist/PanelSkin.js +15 -13
  6. package/dist/PanelTabs.d.ts.map +1 -1
  7. package/dist/PanelTabs.js +24 -14
  8. package/dist/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +2 -2
package/dist/ComposerRightRail.js CHANGED
@@ -4,7 +4,7 @@ import { RightPanel, RightPanelCollapseToggle, RightPanelShowToggle, } from './l
4
4
  export default function ComposerRightRail({ isVisible, onToggle, activeTab, onTabChange, tabs, title = 'image system', statusLabel = 'live', }) {
5
5
  const active = tabs.find((tab) => tab.id === activeTab) ?? tabs[0] ?? null;
6
6
  const hasStatus = Boolean(statusLabel && statusLabel.trim().length > 0);
7
- return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: onToggle, "aria-label": "Hide right panel", title: "Hide right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "border-b viewer-ui-kit-border px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px] uppercase tracking-[0.14em] viewer-ui-kit-text-subtle", children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `rounded-full px-3.5 py-2.5 text-[12px] font-neusa font-black lowercase tracking-[0.06em] whitespace-nowrap transition border ${active?.id === tab.id
7
+ return (_jsxs(_Fragment, { children: [isVisible ? (_jsxs(RightPanel, { "$open": isVisible, children: [_jsx(RightPanelCollapseToggle, { type: "button", onClick: onToggle, "aria-label": "Hide right panel", title: "Hide right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "border-b viewer-ui-kit-border px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px] uppercase tracking-[0.14em] viewer-ui-kit-text-subtle", children: [_jsx("span", { children: title }), hasStatus ? _jsx("span", { "aria-hidden": "true", children: "/" }) : null, hasStatus ? _jsx("span", { children: statusLabel }) : null] }), _jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `rounded-full px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.08em] whitespace-nowrap transition border ${active?.id === tab.id
8
8
  ? 'bg-[var(--viewer-ui-color-toggle)] text-[var(--viewer-ui-color-toggle-text)] border-[var(--viewer-ui-color-toggle)]'
9
9
  : 'bg-[var(--viewer-ui-color-tab-bg)] text-[var(--viewer-ui-color-text-muted)] border-[var(--viewer-ui-color-panel-border-subtle)] hover:bg-[var(--viewer-ui-color-button-secondary)] hover:text-[var(--viewer-ui-color-text-strong)]'}`, children: tab.label }, tab.id))) })] }), _jsx("div", { className: "viewer-ui-shell-right-body flex-1 overflow-y-auto px-5 py-5", children: active?.content ?? null })] })) : null, !isVisible ? (_jsx(RightPanelShowToggle, { type: "button", onClick: onToggle, "aria-label": "Show right panel", title: "Show right panel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12.707 14.707a1 1 0 010-1.414L9.414 10l3.293-3.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414 0z", clipRule: "evenodd" }) }) })) : null] }));
10
10
  }
package/dist/MetricsPanelContent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IAChC,aAAa,EAAE;QAAE,QAAQ,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClG,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAmCD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,wBAAwB,2CAgC1B"}
1
+ {"version":3,"file":"MetricsPanelContent.d.ts","sourceRoot":"","sources":["../src/MetricsPanelContent.tsx"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IAChC,aAAa,EAAE;QAAE,QAAQ,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClG,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAKD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAY,EACZ,UAAU,GACX,EAAE,wBAAwB,2CA4D1B"}
package/dist/MetricsPanelContent.js CHANGED
@@ -1,46 +1,41 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- const placeholderSections = [
4
- {
5
- title: 'social',
6
- metrics: [
7
- { label: 'social activation index', value: '—' },
8
- { label: 'eyes-on-courtyard score', value: '—' },
9
- { label: 'dwell time potential', value: '—' },
10
- { label: 'access equity', value: '—' },
11
- { label: 'circulation clarity', value: '—' },
12
- ],
13
- },
14
- {
15
- title: 'value',
16
- metrics: [
17
- { label: 'net usable area', value: '— m²' },
18
- { label: 'efficiency ratio', value: '—' },
19
- { label: 'leasing potential', value: '—' },
20
- { label: 'operating cost proxy', value: '—' },
21
- { label: 'construction complexity', value: '—' },
22
- ],
23
- },
24
- {
25
- title: 'architectural',
26
- metrics: [
27
- { label: 'courtyard daylight factor', value: '—' },
28
- { label: 'perimeter efficiency', value: '—' },
29
- { label: 'facade porosity', value: '—' },
30
- { label: 'green coverage', value: '— %' },
31
- { label: 'acoustic buffer score', value: '—' },
32
- ],
33
- },
34
- ];
3
+ const formatMeters = (value) => `${value.toFixed(2)} m`;
4
+ const formatDegrees = (value) => `${value.toFixed(1)}°`;
35
5
  export default function MetricsPanelContent({ cameraMetrics, distanceToFloor, distanceToCeiling, distanceToNorth, distanceToSouth, distanceToEast, distanceToWest, compassAngle, pitchAngle, }) {
36
- void cameraMetrics;
37
- void distanceToFloor;
38
- void distanceToCeiling;
39
- void distanceToNorth;
40
- void distanceToSouth;
41
- void distanceToEast;
42
- void distanceToWest;
43
- void compassAngle;
44
- void pitchAngle;
45
- return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-2xl font-black text-[#EFE9DE] lowercase font-neusa", children: "courtyard metrics" }), _jsx("div", { className: "text-[10px] uppercase tracking-[0.2em] text-[#EFE9DE]/50", children: "coming soon" })] }), _jsx("div", { className: "space-y-6 text-xs font-nunito", children: placeholderSections.map((section) => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.2em] text-[#EFE9DE]/50", children: section.title }), section.metrics.map((metric) => (_jsxs("div", { className: "flex justify-between gap-4", children: [_jsxs("span", { className: "text-[#EFE9DE]/70 lowercase", children: [metric.label, ":"] }), _jsx("span", { className: "text-[#EFE9DE]/80 font-mono", children: metric.value })] }, metric.label)))] }, section.title))) })] }));
6
+ const sections = [
7
+ {
8
+ title: 'camera',
9
+ metrics: [
10
+ {
11
+ label: 'height above floor',
12
+ value: cameraMetrics ? formatMeters(cameraMetrics.heightAboveFloor) : formatMeters(distanceToFloor),
13
+ },
14
+ { label: 'compass angle', value: formatDegrees(compassAngle) },
15
+ { label: 'pitch angle', value: formatDegrees(pitchAngle) },
16
+ ],
17
+ },
18
+ {
19
+ title: 'clearances',
20
+ metrics: [
21
+ { label: 'floor', value: formatMeters(distanceToFloor) },
22
+ { label: 'ceiling', value: formatMeters(distanceToCeiling) },
23
+ { label: 'north', value: formatMeters(distanceToNorth) },
24
+ { label: 'south', value: formatMeters(distanceToSouth) },
25
+ { label: 'east', value: formatMeters(distanceToEast) },
26
+ { label: 'west', value: formatMeters(distanceToWest) },
27
+ ],
28
+ },
29
+ cameraMetrics
30
+ ? {
31
+ title: 'position',
32
+ metrics: [
33
+ { label: 'x', value: formatMeters(cameraMetrics.position.x) },
34
+ { label: 'y', value: formatMeters(cameraMetrics.position.y) },
35
+ { label: 'z', value: formatMeters(cameraMetrics.position.z) },
36
+ ],
37
+ }
38
+ : null,
39
+ ].filter(Boolean);
40
+ return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[16px] font-semibold tracking-[0.01em] viewer-ui-kit-text", children: "viewer metrics" }), _jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] viewer-ui-kit-text-subtle", children: "live scene telemetry" })] }), _jsx("div", { className: "space-y-5 text-[12px]", children: sections.map((section) => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.18em] viewer-ui-kit-text-subtle", children: section.title }), section.metrics.map((metric) => (_jsxs("div", { className: "flex justify-between gap-4 border-b viewer-ui-kit-border-subtle pb-2 last:border-b-0 last:pb-0", children: [_jsx("span", { className: "viewer-ui-kit-text-muted", children: metric.label }), _jsx("span", { className: "font-mono viewer-ui-kit-text", children: metric.value })] }, metric.label)))] }, section.title))) })] }));
46
41
  }
package/dist/PanelSkin.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,2FA4kBrB,CAAC"}
1
+ {"version":3,"file":"PanelSkin.d.ts","sourceRoot":"","sources":["../src/PanelSkin.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,2FA8kBrB,CAAC"}
package/dist/PanelSkin.js CHANGED
@@ -26,11 +26,12 @@ export const PanelSkin = createGlobalStyle `
26
26
  border: 1px solid var(--viewer-ui-color-panel-border);
27
27
  background: transparent;
28
28
  color: var(--viewer-ui-color-text-muted);
29
- font-size: 20px;
29
+ font-size: 11px;
30
30
  letter-spacing: 0.08em;
31
- text-transform: lowercase;
32
- font-family: var(--viewer-ui-font-display);
33
- padding: 6px 12px;
31
+ text-transform: uppercase;
32
+ font-family: var(--viewer-ui-font-body);
33
+ font-weight: 600;
34
+ padding: 8px 14px;
34
35
  cursor: pointer;
35
36
  }
36
37
 
@@ -71,12 +72,12 @@ export const PanelSkin = createGlobalStyle `
71
72
  }
72
73
 
73
74
  .viewer-ui-panel-renderer .panel-section-header h3 {
74
- font-size: 20px;
75
- letter-spacing: 0.04em;
76
- text-transform: lowercase;
75
+ font-size: 16px;
76
+ letter-spacing: 0.02em;
77
+ text-transform: none;
77
78
  color: var(--viewer-ui-color-text-strong);
78
- font-family: var(--viewer-ui-font-display);
79
- font-weight: 700;
79
+ font-family: var(--viewer-ui-font-body);
80
+ font-weight: 600;
80
81
  }
81
82
 
82
83
  .viewer-ui-panel-renderer--flat .panel-section-header h3 {
@@ -193,11 +194,12 @@ export const PanelSkin = createGlobalStyle `
193
194
  border: 1px solid var(--viewer-ui-color-button-primary);
194
195
  background: var(--viewer-ui-color-button-primary);
195
196
  color: var(--viewer-ui-color-text-strong);
196
- font-size: 20px;
197
+ font-size: 12px;
197
198
  letter-spacing: 0.08em;
198
- text-transform: lowercase;
199
- font-family: var(--viewer-ui-font-display);
200
- padding: 10px 16px;
199
+ text-transform: uppercase;
200
+ font-family: var(--viewer-ui-font-body);
201
+ font-weight: 600;
202
+ padding: 10px 14px;
201
203
  cursor: pointer;
202
204
  transition: all 0.15s ease;
203
205
  }
package/dist/PanelTabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../src/PanelTabs.tsx"],"names":[],"mappings":"AAiCA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAU9E"}
1
+ {"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../src/PanelTabs.tsx"],"names":[],"mappings":"AA+CA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAU9E"}
package/dist/PanelTabs.js CHANGED
@@ -3,29 +3,39 @@ import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import styled from 'styled-components';
4
4
  const TabRow = styled.div `
5
5
  display: flex;
6
- gap: 12px;
6
+ gap: 8px;
7
7
  flex-wrap: nowrap;
8
8
  overflow-x: auto;
9
- padding-bottom: 12px;
10
- border-bottom: 1px solid var(--brand-panel-border);
9
+ padding-bottom: 10px;
10
+ border-bottom: 1px solid var(--viewer-ui-color-panel-border, var(--brand-panel-border));
11
11
  margin-bottom: 6px;
12
12
  `;
13
13
  const TabButton = styled.button `
14
14
  border-radius: 999px;
15
- padding: 8px 18px;
16
- font-size: 14px;
17
- font-weight: ${(props) => (props.$active ? 500 : 400)};
18
- text-transform: capitalize;
19
- border: none;
20
- background: ${(props) => (props.$active ? 'var(--brand-primary)' : 'rgba(49, 143, 78, 0.12)')};
21
- color: ${(props) => (props.$active ? '#ffffff' : 'rgba(49, 143, 78, 0.85)')};
15
+ padding: 8px 14px;
16
+ font-size: 11px;
17
+ font-weight: ${(props) => (props.$active ? 600 : 500)};
18
+ text-transform: uppercase;
19
+ letter-spacing: 0.08em;
20
+ border: 1px solid
21
+ ${(props) => props.$active
22
+ ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
23
+ : 'var(--viewer-ui-color-panel-border-subtle, var(--brand-panel-border))'};
24
+ background: ${(props) => props.$active
25
+ ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
26
+ : 'var(--viewer-ui-color-tab-bg, transparent)'};
27
+ color: ${(props) => props.$active
28
+ ? 'var(--viewer-ui-color-text-strong, #ffffff)'
29
+ : 'var(--viewer-ui-color-text-muted, var(--brand-text-secondary))'};
22
30
  cursor: pointer;
23
- transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
31
+ transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
24
32
 
25
33
  &:hover {
26
- background: ${(props) => (props.$active ? 'var(--brand-primary)' : 'rgba(49, 143, 78, 0.2)')};
27
- color: ${(props) => (props.$active ? '#ffffff' : 'rgba(49, 143, 78, 1)')};
28
- transform: translateY(-1px);
34
+ border-color: var(--viewer-ui-color-button-secondary, var(--brand-primary));
35
+ background: ${(props) => props.$active
36
+ ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
37
+ : 'var(--viewer-ui-color-tab-bg-hover, rgba(47, 74, 60, 0.08))'};
38
+ color: var(--viewer-ui-color-text-strong, var(--brand-text-primary));
29
39
  }
30
40
  `;
31
41
  export default function PanelTabs({ tabs, activeTab, onChange }) {