@ubuilder-ai/workspace 0.0.1

package/dist/spatial-workspace-mode.js

@@ -0,0 +1,29 @@
+export function isBuildingSpatialWorkspace(workspaceKind) {
+    return workspaceKind === 'building';
+}
+export function resolveSpatialWorkspaceViewPlan(requestedMode, workspaceKind, siteTopViewActive) {
+    if (isBuildingSpatialWorkspace(workspaceKind)) {
+        return {
+            cameraAction: null,
+            disabled: false,
+            nextSiteTopViewActive: false,
+            viewMode: requestedMode,
+        };
+    }
+    if (requestedMode === 'split') {
+        return {
+            cameraAction: null,
+            disabled: true,
+            nextSiteTopViewActive: siteTopViewActive,
+            viewMode: '3d',
+        };
+    }
+    return {
+        // Site plan presentation stays on the GIS canvas, so each request carries
+        // an idempotent camera target rather than toggling the current state.
+        cameraAction: 'set-top-view',
+        disabled: false,
+        nextSiteTopViewActive: requestedMode === '2d',
+        viewMode: '3d',
+    };
+}

package/dist/spatial-workspace-styles.d.ts

@@ -0,0 +1,3 @@
+export declare const SPATIAL_WORKSPACE_STYLE_TEXT = "\n:where(\n  [data-pascal-spatial-workspace-view-mode-control],\n  [data-pascal-spatial-workspace-level-selector],\n  [data-pascal-spatial-workspace-display-control],\n  [data-pascal-spatial-workspace-camera-action-control],\n  [data-pascal-spatial-workspace-gis-control]\n) {\n  --pascal-workspace-accent: #2563eb;\n  --pascal-workspace-accent-contrast: #ffffff;\n  --pascal-workspace-border: color-mix(in srgb, currentColor 22%, transparent);\n  --pascal-workspace-focus: color-mix(in srgb, var(--pascal-workspace-accent) 72%, white);\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n:where(\n  [data-pascal-spatial-workspace-view-mode-control],\n  [data-pascal-spatial-workspace-level-selector],\n  [data-pascal-spatial-workspace-display-control],\n  [data-pascal-spatial-workspace-camera-action-control],\n  [data-pascal-spatial-workspace-gis-control]\n) > button,\n:where(\n  [data-pascal-spatial-workspace-level-mode-control],\n  [data-pascal-spatial-workspace-wall-mode-control]\n) {\n  border-color: var(--pascal-workspace-border, currentColor);\n  border-radius: 0.5rem;\n  font: inherit;\n}\n\n:where(\n  [data-pascal-spatial-workspace-view-mode-control],\n  [data-pascal-spatial-workspace-level-selector],\n  [data-pascal-spatial-workspace-display-control],\n  [data-pascal-spatial-workspace-camera-action-control],\n  [data-pascal-spatial-workspace-gis-control]\n) > button[aria-pressed='true'],\n:where([data-pascal-spatial-workspace-level-selector]) > button[aria-selected='true'] {\n  box-shadow: inset 0 0 0 1px var(--pascal-workspace-accent, #2563eb);\n}\n\n:where(\n  [data-pascal-spatial-workspace-view-mode-control],\n  [data-pascal-spatial-workspace-level-selector],\n  [data-pascal-spatial-workspace-display-control],\n  [data-pascal-spatial-workspace-camera-action-control],\n  [data-pascal-spatial-workspace-gis-control]\n) > button:focus-visible,\n:where(\n  [data-pascal-spatial-workspace-level-mode-control],\n  [data-pascal-spatial-workspace-wall-mode-control]\n):focus-visible {\n  outline: 2px solid var(--pascal-workspace-focus, #60a5fa);\n  outline-offset: 2px;\n}\n\n:where([data-pascal-spatial-workspace]) {\n  isolation: isolate;\n}\n\n:where([data-pascal-workspace-divider]) {\n  touch-action: none;\n}\n";
+export declare function SpatialWorkspaceStyles(): import("react").JSX.Element;
+//# sourceMappingURL=spatial-workspace-styles.d.ts.map

package/dist/spatial-workspace-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-workspace-styles.d.ts","sourceRoot":"","sources":["../src/spatial-workspace-styles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B,stEAkExC,CAAA;AAED,wBAAgB,sBAAsB,gCAErC"}

package/dist/spatial-workspace-styles.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SPATIAL_WORKSPACE_STYLE_TEXT = `
+:where(
+  [data-pascal-spatial-workspace-view-mode-control],
+  [data-pascal-spatial-workspace-level-selector],
+  [data-pascal-spatial-workspace-display-control],
+  [data-pascal-spatial-workspace-camera-action-control],
+  [data-pascal-spatial-workspace-gis-control]
+) {
+  --pascal-workspace-accent: #2563eb;
+  --pascal-workspace-accent-contrast: #ffffff;
+  --pascal-workspace-border: color-mix(in srgb, currentColor 22%, transparent);
+  --pascal-workspace-focus: color-mix(in srgb, var(--pascal-workspace-accent) 72%, white);
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+:where(
+  [data-pascal-spatial-workspace-view-mode-control],
+  [data-pascal-spatial-workspace-level-selector],
+  [data-pascal-spatial-workspace-display-control],
+  [data-pascal-spatial-workspace-camera-action-control],
+  [data-pascal-spatial-workspace-gis-control]
+) > button,
+:where(
+  [data-pascal-spatial-workspace-level-mode-control],
+  [data-pascal-spatial-workspace-wall-mode-control]
+) {
+  border-color: var(--pascal-workspace-border, currentColor);
+  border-radius: 0.5rem;
+  font: inherit;
+}
+
+:where(
+  [data-pascal-spatial-workspace-view-mode-control],
+  [data-pascal-spatial-workspace-level-selector],
+  [data-pascal-spatial-workspace-display-control],
+  [data-pascal-spatial-workspace-camera-action-control],
+  [data-pascal-spatial-workspace-gis-control]
+) > button[aria-pressed='true'],
+:where([data-pascal-spatial-workspace-level-selector]) > button[aria-selected='true'] {
+  box-shadow: inset 0 0 0 1px var(--pascal-workspace-accent, #2563eb);
+}
+
+:where(
+  [data-pascal-spatial-workspace-view-mode-control],
+  [data-pascal-spatial-workspace-level-selector],
+  [data-pascal-spatial-workspace-display-control],
+  [data-pascal-spatial-workspace-camera-action-control],
+  [data-pascal-spatial-workspace-gis-control]
+) > button:focus-visible,
+:where(
+  [data-pascal-spatial-workspace-level-mode-control],
+  [data-pascal-spatial-workspace-wall-mode-control]
+):focus-visible {
+  outline: 2px solid var(--pascal-workspace-focus, #60a5fa);
+  outline-offset: 2px;
+}
+
+:where([data-pascal-spatial-workspace]) {
+  isolation: isolate;
+}
+
+:where([data-pascal-workspace-divider]) {
+  touch-action: none;
+}
+`;
+export function SpatialWorkspaceStyles() {
+    return _jsx("style", { "data-pascal-spatial-workspace-styles": "", children: SPATIAL_WORKSPACE_STYLE_TEXT });
+}

package/dist/spatial-workspace-view-mode-control.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import type { SpatialWorkspaceViewMode } from './spatial-workspace-viewport';
+export type SpatialWorkspaceViewModeButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'aria-disabled' | 'aria-pressed' | 'children' | 'disabled' | 'onClick' | 'type'> & {
+    'data-pascal-spatial-workspace-view-mode'?: never;
+};
+export type SpatialWorkspaceViewModeControlItem = {
+    buttonProps?: SpatialWorkspaceViewModeButtonProps;
+    content: ReactNode;
+    disabled?: boolean;
+    mode: SpatialWorkspaceViewMode;
+    renderButton?: (button: ReactElement, item: SpatialWorkspaceViewModeControlItem) => ReactNode;
+};
+export interface SpatialWorkspaceViewModeControlProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'role'> {
+    activeMode: SpatialWorkspaceViewMode;
+    items: readonly SpatialWorkspaceViewModeControlItem[];
+    onModeRequest: (mode: SpatialWorkspaceViewMode, event: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare function SpatialWorkspaceViewModeControl({ activeMode, items, onModeRequest, ...rootProps }: SpatialWorkspaceViewModeControlProps): import("react").JSX.Element;
+//# sourceMappingURL=spatial-workspace-view-mode-control.d.ts.map

package/dist/spatial-workspace-view-mode-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-workspace-view-mode-control.d.ts","sourceRoot":"","sources":["../src/spatial-workspace-view-mode-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAA;AAE5E,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,wBAAwB,CAAC,QAAQ,CAAC,EAClC,eAAe,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAChF,GAAG;IACF,yCAAyC,CAAC,EAAE,KAAK,CAAA;CAClD,CAAA;AAED,MAAM,MAAM,mCAAmC,GAAG;IAChD,WAAW,CAAC,EAAE,mCAAmC,CAAA;IACjD,OAAO,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,wBAAwB,CAAA;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,mCAAmC,KAAK,SAAS,CAAA;CAC9F,CAAA;AAED,MAAM,WAAW,oCACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAClE,UAAU,EAAE,wBAAwB,CAAA;IACpC,KAAK,EAAE,SAAS,mCAAmC,EAAE,CAAA;IACrD,aAAa,EAAE,CAAC,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9F;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,UAAU,EACV,KAAK,EACL,aAAa,EACb,GAAG,SAAS,EACb,EAAE,oCAAoC,+BA6BtC"}

package/dist/spatial-workspace-view-mode-control.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Fragment, } from 'react';
+export function SpatialWorkspaceViewModeControl({ activeMode, items, onModeRequest, ...rootProps }) {
+    return (_jsx("div", { ...rootProps, "data-pascal-spatial-workspace-view-mode-control": "", role: "group", children: items.map((item) => {
+            const button = (_createElement("button", { ...item.buttonProps, "aria-disabled": item.disabled ?? false, "aria-pressed": activeMode === item.mode, "data-pascal-spatial-workspace-view-mode": item.mode, key: item.mode, onClick: (event) => {
+                    if (item.disabled)
+                        return;
+                    onModeRequest(item.mode, event);
+                }, type: "button" }, item.content));
+            return item.renderButton ? (_jsx(Fragment, { children: item.renderButton(button, item) }, item.mode)) : (button);
+        }) }));
+}

package/dist/spatial-workspace-viewport.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef, type ReactNode, type RefObject } from 'react';
+export type SpatialWorkspaceViewMode = '3d' | '2d' | 'split';
+export type SpatialWorkspaceRenderContext = {
+    show2d: boolean;
+    show3d: boolean;
+    viewerPaneRef: RefObject<HTMLDivElement | null>;
+    workspaceElement: HTMLDivElement | null;
+};
+type SpatialWorkspaceSurface = ReactNode | ((context: SpatialWorkspaceRenderContext) => ReactNode);
+export interface SpatialWorkspaceViewportProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children?: ReactNode;
+    floorplan: SpatialWorkspaceSurface;
+    floorplanPaneRatio: number;
+    onFloorplanPaneRatioChange: (ratio: number) => void;
+    viewMode: SpatialWorkspaceViewMode;
+    viewer: SpatialWorkspaceSurface;
+}
+export declare function clampSpatialWorkspacePaneRatio(ratio: number): number;
+export declare function resolveSpatialWorkspacePaneVisibility(viewMode: SpatialWorkspaceViewMode): {
+    show2d: boolean;
+    show3d: boolean;
+};
+export declare function SpatialWorkspaceViewport({ children, className, floorplan, floorplanPaneRatio, onFloorplanPaneRatioChange, viewMode, viewer, style, ...rootProps }: SpatialWorkspaceViewportProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=spatial-workspace-viewport.d.ts.map

package/dist/spatial-workspace-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-workspace-viewport.d.ts","sourceRoot":"","sources":["../src/spatial-workspace-viewport.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,wBAAwB,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAA;AAE5D,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;IACf,aAAa,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,uBAAuB,GAAG,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,6BAA6B,KAAK,SAAS,CAAC,CAAA;AAElG,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,EAAE,uBAAuB,CAAA;IAClC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,QAAQ,EAAE,wBAAwB,CAAA;IAClC,MAAM,EAAE,uBAAuB,CAAA;CAChC;AAKD,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED,wBAAgB,qCAAqC,CAAC,QAAQ,EAAE,wBAAwB;;;EAKvF;AASD,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,0BAA0B,EAC1B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,GAAG,SAAS,EACb,EAAE,6BAA6B,+BAyI/B"}

package/dist/spatial-workspace-viewport.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { acquireSpatialWorkspaceInstance } from './spatial-workspace-instance';
+import { SpatialWorkspaceStyles } from './spatial-workspace-styles';
+const MIN_FLOORPLAN_PANE_RATIO = 0.15;
+const MAX_FLOORPLAN_PANE_RATIO = 0.85;
+export function clampSpatialWorkspacePaneRatio(ratio) {
+    return Math.max(MIN_FLOORPLAN_PANE_RATIO, Math.min(MAX_FLOORPLAN_PANE_RATIO, ratio));
+}
+export function resolveSpatialWorkspacePaneVisibility(viewMode) {
+    return {
+        show2d: viewMode === '2d' || viewMode === 'split',
+        show3d: viewMode === '3d' || viewMode === 'split',
+    };
+}
+function renderSurface(surface, context) {
+    return typeof surface === 'function' ? surface(context) : surface;
+}
+export function SpatialWorkspaceViewport({ children, className, floorplan, floorplanPaneRatio, onFloorplanPaneRatioChange, viewMode, viewer, style, ...rootProps }) {
+    const workspaceRef = useRef(null);
+    const viewerPaneRef = useRef(null);
+    const [workspaceElement, setWorkspaceElement] = useState(null);
+    const isResizingFloorplan = useRef(false);
+    const setWorkspaceNode = useCallback((element) => {
+        workspaceRef.current = element;
+        setWorkspaceElement(element);
+    }, []);
+    const stopFloorplanResize = useCallback(() => {
+        isResizingFloorplan.current = false;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, []);
+    const handleFloorplanDividerDown = useCallback((event) => {
+        event.preventDefault();
+        isResizingFloorplan.current = true;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }, []);
+    useEffect(() => acquireSpatialWorkspaceInstance(), []);
+    useEffect(() => {
+        const handlePointerMove = (event) => {
+            if (!isResizingFloorplan.current)
+                return;
+            const workspace = workspaceRef.current;
+            if (!workspace)
+                return;
+            const rect = workspace.getBoundingClientRect();
+            if (rect.width <= 0)
+                return;
+            const ratio = (event.clientX - rect.left) / rect.width;
+            onFloorplanPaneRatioChange(clampSpatialWorkspacePaneRatio(ratio));
+        };
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', stopFloorplanResize);
+        return () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', stopFloorplanResize);
+            stopFloorplanResize();
+        };
+    }, [onFloorplanPaneRatioChange, stopFloorplanResize]);
+    const { show2d, show3d } = resolveSpatialWorkspacePaneVisibility(viewMode);
+    const renderContext = { show2d, show3d, viewerPaneRef, workspaceElement };
+    return (_jsxs("div", { ...rootProps, style: {
+            position: 'relative',
+            display: 'flex',
+            width: '100%',
+            height: '100%',
+            minWidth: 0,
+            minHeight: 0,
+            overflow: 'hidden',
+            ...style,
+        }, className: `relative flex h-full${className ? ` ${className}` : ''}`, "data-pascal-spatial-workspace": "", ref: setWorkspaceNode, children: [_jsx(SpatialWorkspaceStyles, {}), children, _jsxs("div", { className: "relative h-full flex-shrink-0", "data-pascal-workspace-pane": "2d", style: {
+                    position: 'relative',
+                    flexShrink: 0,
+                    height: '100%',
+                    minHeight: 0,
+                    width: viewMode === '2d' ? '100%' : `${floorplanPaneRatio * 100}%`,
+                    display: show2d ? undefined : 'none',
+                }, children: [_jsx("div", { className: "h-full w-full overflow-hidden", style: { height: '100%', width: '100%', overflow: 'hidden' }, children: renderSurface(floorplan, renderContext) }), viewMode === 'split' ? (_jsx("div", { className: "absolute inset-y-0 -right-3 z-10 flex w-6 cursor-col-resize items-center justify-center", "data-pascal-workspace-divider": "", style: {
+                            position: 'absolute',
+                            top: 0,
+                            bottom: 0,
+                            right: -12,
+                            zIndex: 10,
+                            width: 24,
+                            display: 'flex',
+                            cursor: 'col-resize',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, onPointerDown: handleFloorplanDividerDown, children: _jsx("div", { className: "h-8 w-1 rounded-full bg-neutral-400", style: { width: 4, height: 32, borderRadius: 4, background: '#a3a3a3' } }) })) : null] }), _jsx("div", { "aria-hidden": !show3d || undefined, className: "relative min-w-0 flex-1 overflow-hidden", "data-pascal-workspace-pane": "3d", "data-viewer-3d-pane": "", ref: viewerPaneRef, style: {
+                    position: 'relative',
+                    flex: 1,
+                    minWidth: 0,
+                    height: '100%',
+                    overflow: 'hidden',
+                    ...(!show3d
+                        ? {
+                            inset: 0,
+                            pointerEvents: 'none',
+                            position: 'absolute',
+                            visibility: 'hidden',
+                        }
+                        : {}),
+                }, children: renderSurface(viewer, renderContext) })] }));
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ubuilder-ai/workspace",
+  "version": "0.0.1",
+  "description": "Shared read-only spatial workbench for uBuilder-AI Building and Site experiences",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc --build",
+    "check-types": "tsgo --noEmit",
+    "test": "bun test",
+    "prepublishOnly": "bun run build && bun test"
+  },
+  "peerDependencies": {
+    "@ubuilder-ai/core": "0.0.1",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@ubuilder-ai/floorplan-contract": "0.0.1"
+  },
+  "devDependencies": {
+    "@ubuilder-ai/core": "0.0.1",
+    "@ubuilder-ai/typescript-config": "*",
+    "@types/bun": "^1.3.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "typescript": "6.0.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JimmyZheng-ZJU/uBuilder-AI.git",
+    "directory": "packages/workspace"
+  },
+  "license": "MIT"
+}