@bpmn-nova/vue 0.3.4-preview → 0.3.6-preview

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, Teleport, createApp, defineComponent, h, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import { Fragment, Teleport, createApp, defineComponent, h, onBeforeUnmount, onMounted, onUpdated, reactive, readonly, ref, shallowRef, watch } from 'vue';
 import { BpmnDesigner as CoreDesigner } from '@bpmn-nova/studio/designer';
 import { BpmnViewer as CoreViewer } from '@bpmn-nova/studio/viewer';
 import { importBpmn, exportBpmn } from '@bpmn-nova/studio';
@@ -6,6 +6,15 @@ import { createEmptyProcess } from '@bpmn-nova/studio';
 import { BpmnCanvas as CoreCanvas, BpmnStudioShell as CoreStudioShell, createInteractionController, createStudioController, createTemplateRegistry } from '@bpmn-nova/studio';
 import { PalettePanel as CorePalettePanel, createDefaultPaletteRegistry as createCoreDefaultPaletteRegistry } from '@bpmn-nova/studio';
 
+export {
+  activityState,
+  createRuntimePresentation,
+  formatRuntimeInstant,
+  inspectRuntime,
+  normalizeRuntime,
+  parseRuntimeInstant,
+} from '@bpmn-nova/studio/runtime';
+
 export {
   createContextMenuRegistry,
   createDefaultContextMenuRegistry,
@@ -49,7 +58,7 @@ function resolveModel(props) {
 }
 
 export function useBpmnStudio(options = {}) {
-  const studio = options.studio || createStudioController({ model: resolveModel(options), propertiesProfile: options.propertiesProfile, allowedNodeTypes: options.allowedNodeTypes, allowedEdgeTypes: options.allowedEdgeTypes });
+  const studio = options.studio || createStudioController({ model: resolveModel(options), config: options.config, propertiesProfile: options.propertiesProfile, allowedNodeTypes: options.allowedNodeTypes, allowedEdgeTypes: options.allowedEdgeTypes });
   const state = reactive(studio.getState());
   const off = studio.subscribe((event) => Object.assign(state, event.state));
   onBeforeUnmount(() => { off(); if (!options.studio) studio.destroy(); });
@@ -126,33 +135,41 @@ export const BpmnPalettePanel = defineComponent({
 export const BpmnStudio = defineComponent({
   name: 'BpmnNovaStudio',
   props: {
-    studio: Object, model: Object, xml: String, engine: { type: String, default: 'flowable' }, propertiesProfile: String, allowedNodeTypes: Array, allowedEdgeTypes: Array,
+    studio: Object, model: Object, xml: String, engine: { type: String, default: 'flowable' }, config: Object, propertiesProfile: String, allowedNodeTypes: Array, allowedEdgeTypes: Array,
     iconRegistry: Object, paletteRegistry: Object, propertiesRegistry: Object, templateRegistry: Object, contextMenuRegistry: Object,
     nodeRenderers: Object, nodeRenderer: Function, nodeSubtitleResolver: Function, slotsConfig: Object, layout: Function, regions: Object, leftWidth: Number, rightWidth: Number,
     runtime: Object, runtimePresenter: Function, runtimeTraceProjector: Function, runtimeAssetResolver: Function, runtimeTimelineRenderer: Function, onRuntimeTraceItemClick: Function, runtimeDetailsRenderer: Function, onRuntimeDetailsOpen: Function,
     runtimeTransitionDetailsRenderer: Function, onRuntimeTransitionDetailsOpen: Function,
     timeline: Object, runtimeDetails: Object, runtimeTraceOptions: Object, onTraceClick: Function, onElementClick: Function,
-    mode: String, allowedModes: Array, projection: String, responsive: { type: Boolean, default: false }, projectionOptions: Array,
+    mode: String, allowedModes: Array, projection: String, responsive: { type: Boolean, default: undefined }, projectionOptions: Array,
     theme: [Object, String], runtimeAppearance: Object, svgExport: Object, onThemeChange: Function,
   },
-  emits: ['change', 'selection-change', 'scope-change', 'element-click', 'trace-click', 'update:mode', 'mode-change', 'validation'],
+  emits: ['change', 'selection-change', 'scope-change', 'element-click', 'trace-click', 'update:mode', 'mode-change', 'validation', 'sidebar-change'],
   setup(props, { emit, expose, attrs, slots }) {
     const host = ref(null);
     const headerTarget = ref(null);
     const headerStartTarget = ref(null);
     const headerActionsTarget = ref(null);
+    const rightTarget = shallowRef(null);
     const headerContext = ref(null);
     const headerStartContext = ref(null);
     const headerActionsContext = ref(null);
+    const rightContext = shallowRef(null);
     const owned = !props.studio;
-    const studio = props.studio || createStudioController({ model: resolveModel(props), propertiesProfile: props.propertiesProfile, allowedNodeTypes: props.allowedNodeTypes, allowedEdgeTypes: props.allowedEdgeTypes });
+    const studio = props.studio || createStudioController({ model: resolveModel(props), config: props.config, propertiesProfile: props.propertiesProfile, allowedNodeTypes: props.allowedNodeTypes, allowedEdgeTypes: props.allowedEdgeTypes });
     const state = reactive(studio.getState());
     const actualMode = ref(props.mode || props.allowedModes?.[0] || 'design');
+    const actualUi = reactive({ controlSize: 'medium', controlHeight: '32px' });
+    const readonlyUi = readonly(actualUi);
+    const panelSelection = shallowRef(Object.freeze({ selection: studio.selection, selectedElement: studio.getSelectedElement(), trace: null }));
     const nodeSubtitleResolver = (context) => props.nodeSubtitleResolver?.(context);
     let shell = null;
     let off = null;
     let offMode = null;
     let offValidation = null;
+    let offSidebar = null;
+    let offPanelSelection = null;
+    let mountedRightSlot = null;
 
     const createTeleportSlot = (target, contextRef) => (context) => {
       target.value = context.container;
@@ -162,6 +179,8 @@ export const BpmnStudio = defineComponent({
         if (contextRef.value === context) contextRef.value = null;
       };
     };
+    const nativeRightSlot = createTeleportSlot(rightTarget, rightContext);
+    const resolveRightSlot = () => slots.right ? nativeRightSlot : props.slotsConfig?.right;
 
     onMounted(() => {
       const shellSlots = { ...(props.slotsConfig || {}) };
@@ -170,14 +189,20 @@ export const BpmnStudio = defineComponent({
         if (slots['header-start']) shellSlots.headerStart = createTeleportSlot(headerStartTarget, headerStartContext);
         if (slots['header-actions']) shellSlots.headerActions = createTeleportSlot(headerActionsTarget, headerActionsContext);
       }
-      shell = new CoreStudioShell({ container: host.value, studio, iconRegistry: props.iconRegistry, paletteRegistry: props.paletteRegistry, propertiesRegistry: props.propertiesRegistry, templateRegistry: props.templateRegistry, contextMenuRegistry: props.contextMenuRegistry, rendererOptions: { nodeRenderers: props.nodeRenderers, nodeRenderer: props.nodeRenderer, nodeSubtitleResolver, runtimePresenter: props.runtimePresenter, runtimeTraceProjector: props.runtimeTraceProjector, runtimeAssetResolver: props.runtimeAssetResolver, runtimeTraceOptions: props.runtimeTraceOptions, runtimeTimelineRenderer: props.runtimeTimelineRenderer, timeline: props.timeline, runtimeDetails: props.runtimeDetails, onRuntimeTraceItemClick: (payload) => props.onRuntimeTraceItemClick?.(payload), runtimeDetailsRenderer: props.runtimeDetailsRenderer, onRuntimeDetailsOpen: (payload) => props.onRuntimeDetailsOpen?.(payload), runtimeTransitionDetailsRenderer: props.runtimeTransitionDetailsRenderer, onRuntimeTransitionDetailsOpen: (payload) => props.onRuntimeTransitionDetailsOpen?.(payload), onElementClick: (payload) => emit('element-click', payload), onTraceClick: (payload) => emit('trace-click', payload) }, slots: shellSlots, layout: props.layout, regions: props.regions, runtime: props.runtime, mode: props.mode, allowedModes: props.allowedModes, projection: props.projection, responsive: props.responsive, projectionOptions: props.projectionOptions, leftWidth: props.leftWidth, rightWidth: props.rightWidth, theme: props.theme, runtimeAppearance: props.runtimeAppearance, svgExport: props.svgExport, onThemeChange: props.onThemeChange });
+      mountedRightSlot = resolveRightSlot();
+      shellSlots.right = mountedRightSlot;
+      shell = new CoreStudioShell({ container: host.value, studio, config: props.config, iconRegistry: props.iconRegistry, paletteRegistry: props.paletteRegistry, propertiesRegistry: props.propertiesRegistry, templateRegistry: props.templateRegistry, contextMenuRegistry: props.contextMenuRegistry, rendererOptions: { nodeRenderers: props.nodeRenderers, nodeRenderer: props.nodeRenderer, nodeSubtitleResolver, runtimePresenter: props.runtimePresenter, runtimeTraceProjector: props.runtimeTraceProjector, runtimeAssetResolver: props.runtimeAssetResolver, runtimeTraceOptions: props.runtimeTraceOptions, runtimeTimelineRenderer: props.runtimeTimelineRenderer, timeline: props.timeline, runtimeDetails: props.runtimeDetails, onRuntimeTraceItemClick: (payload) => props.onRuntimeTraceItemClick?.(payload), runtimeDetailsRenderer: props.runtimeDetailsRenderer, onRuntimeDetailsOpen: (payload) => props.onRuntimeDetailsOpen?.(payload), runtimeTransitionDetailsRenderer: props.runtimeTransitionDetailsRenderer, onRuntimeTransitionDetailsOpen: (payload) => props.onRuntimeTransitionDetailsOpen?.(payload), onElementClick: (payload) => emit('element-click', payload), onTraceClick: (payload) => emit('trace-click', payload) }, slots: shellSlots, layout: props.layout, regions: props.regions, runtime: props.runtime, mode: props.mode, allowedModes: props.allowedModes, projection: props.projection, responsive: props.responsive, projectionOptions: props.projectionOptions, leftWidth: props.leftWidth, rightWidth: props.rightWidth, timeline: props.timeline, runtimeDetails: props.runtimeDetails, runtimeTraceOptions: props.runtimeTraceOptions, theme: props.theme, runtimeAppearance: props.runtimeAppearance, svgExport: props.svgExport, onThemeChange: props.onThemeChange });
       actualMode.value = shell.getMode();
+      Object.assign(actualUi, shell.ui);
       offMode = shell.subscribeMode((event) => {
         actualMode.value = event.mode;
         emit('update:mode', event.mode);
         emit('mode-change', event);
       });
       offValidation = shell.subscribeValidation((event) => emit('validation', event));
+      panelSelection.value = shell.getPanelSelection();
+      offPanelSelection = shell.subscribePanelSelection((value) => { panelSelection.value = value; });
+      offSidebar = shell.subscribeSidebarChange((event) => emit('sidebar-change', event));
       off = studio.subscribe((event) => {
         Object.assign(state, event.state);
         if (event.type === 'modelChanged') emit('change', studio.model, event.reason, studio.exportXml());
@@ -185,6 +210,14 @@ export const BpmnStudio = defineComponent({
         if (event.type === 'scopeChanged') emit('scope-change', event.activeScopeId, event.scopePath, studio.getState());
       });
     });
+    // Vue slot membership is not reactive. Reconcile it after a parent update,
+    // keeping the same Teleport mount for ordinary slot-content changes.
+    onUpdated(() => {
+      const nextSlot = resolveRightSlot();
+      if (!shell || nextSlot === mountedRightSlot) return;
+      shell._setRightSlot(nextSlot);
+      mountedRightSlot = nextSlot;
+    });
     watch(() => props.model, (value) => { if (value && value !== studio.model) studio.setModel(value); });
     watch(() => props.xml, (value) => {
       if (value && value !== studio.exportXml(props.engine)) studio.importXml(value, props.engine);
@@ -196,19 +229,47 @@ export const BpmnStudio = defineComponent({
       if (mode) shell.setMode(mode);
     }, { deep: true });
     watch(() => props.projection, (value) => { if (value) shell?.setProjection(value); });
+    watch(() => props.config, (value) => {
+      if (!shell) return;
+      shell.setConfig(value);
+      Object.assign(actualUi, shell.ui);
+    }, { deep: true });
     watch(() => props.regions, (value) => { if (value !== undefined) shell?.setRegions(value); }, { deep: true });
     watch(() => props.theme, (value) => { if (value !== undefined) shell?.setTheme(value); });
     watch(() => props.runtimeAppearance, (value) => { if (value !== undefined) shell?.setRuntimeAppearance(value); });
     watch(() => props.nodeSubtitleResolver, () => shell?.refreshPresentation());
     watch(() => [props.timeline, props.runtimeDetails, props.runtimeTraceOptions], ([timeline, runtimeDetails, runtimeTraceOptions]) => {
       if (!shell) return;
+      if (timeline === undefined && runtimeDetails === undefined && runtimeTraceOptions === undefined) return;
       shell.rendererOptions.timeline = timeline;
       shell.rendererOptions.runtimeDetails = runtimeDetails;
       shell.rendererOptions.runtimeTraceOptions = runtimeTraceOptions;
       shell.viewer?.setDisplayOptions({ timeline, runtimeDetails, runtimeTraceOptions });
     });
-    onBeforeUnmount(() => { offMode?.(); offValidation?.(); off?.(); shell?.destroy(); if (owned) studio.destroy(); });
-    expose({ getStudio: () => studio, getShell: () => shell, getActions: () => shell?.actions || null, getMode: () => shell?.getMode(), getAllowedModes: () => shell?.getAllowedModes() || [], setMode: (value) => shell?.setMode(value) || false, setAllowedModes: (value) => shell?.setAllowedModes(value) || [], refreshPresentation: () => shell?.refreshPresentation(), validate: () => shell?.validate() || [], exportXml: (engine) => studio.exportXml(engine), exportSvg: (options) => shell?.exportSvg(options), openSvgExportPreview: (options) => shell?.openSvgExportPreview(options), fitView: () => shell?.fitView(), setTheme: (value) => shell?.setTheme(value) });
+    onBeforeUnmount(() => { offMode?.(); offValidation?.(); offSidebar?.(); offPanelSelection?.(); off?.(); shell?.destroy(); if (owned) studio.destroy(); });
+    expose({
+      getStudio: () => studio,
+      getShell: () => shell,
+      getActions: () => shell?.actions || null,
+      getConfig: () => shell?.getConfig(),
+      setConfig: (value) => { const result = shell?.setConfig(value); if (shell) Object.assign(actualUi, shell.ui); return result; },
+      getMode: () => shell?.getMode(),
+      getAllowedModes: () => shell?.getAllowedModes() || [],
+      setMode: (value) => shell?.setMode(value) || false,
+      setAllowedModes: (value) => shell?.setAllowedModes(value) || [],
+      getSidebarState: () => shell?.getSidebarState(),
+      setSidebarCollapsed: (side, collapsed) => shell?.setSidebarCollapsed(side, collapsed) || false,
+      subscribeSidebarChange: (listener) => shell?.subscribeSidebarChange(listener) || (() => {}),
+      getPanelSelection: () => shell?.getPanelSelection(),
+      subscribePanelSelection: (listener) => shell?.subscribePanelSelection(listener) || (() => {}),
+      refreshPresentation: () => shell?.refreshPresentation(),
+      validate: () => shell?.validate() || [],
+      exportXml: (engine) => studio.exportXml(engine),
+      exportSvg: (options) => shell?.exportSvg(options),
+      openSvgExportPreview: (options) => shell?.openSvgExportPreview(options),
+      fitView: () => shell?.fitView(),
+      setTheme: (value) => shell?.setTheme(value),
+    });
     const renderSlot = (name, target, contextRef) => {
       if (!slots[name] || !target.value || !contextRef.value) return null;
       return h(Teleport, { to: target.value }, slots[name]({
@@ -217,6 +278,8 @@ export const BpmnStudio = defineComponent({
         actions: contextRef.value.actions,
         state,
         mode: actualMode.value,
+        ui: readonlyUi,
+        panelSelection: panelSelection.value,
       }));
     };
     return () => h(Fragment, null, [
@@ -224,6 +287,7 @@ export const BpmnStudio = defineComponent({
       renderSlot('header', headerTarget, headerContext),
       renderSlot('header-start', headerStartTarget, headerStartContext),
       renderSlot('header-actions', headerActionsTarget, headerActionsContext),
+      renderSlot('right', rightTarget, rightContext),
     ]);
   },
 });

package/dist/styles.css

@@ -536,6 +536,14 @@
 
 /* Gateways */
 .mb-node-gateway { display: grid; place-items: center; z-index: 7; }
+.mb-node .mb-node-scaled-shape {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  box-sizing: border-box;
+  transform: translate(-50%, -50%) rotate(var(--mb-node-shape-rotation, 0rad)) scale(var(--mb-node-shape-scale, 1));
+  transform-origin: center;
+}
 .mb-gateway-shape {
   width: 49px;
   height: 49px;
@@ -699,6 +707,8 @@
 .mb-port-right:hover { transform: translateY(-50%) scale(1.2); }
 .mb-port-top:hover,
 .mb-port-bottom:hover { transform: translateX(-50%) scale(1.2); }
+.mb-port.mb-port-geometry { transform: translate(-50%, -50%); }
+.mb-port.mb-port-geometry:hover { transform: translate(-50%, -50%) scale(1.2); }
 .mb-node.is-connecting-source .mb-port-right { opacity: 1; border-color: var(--mb-primary); background: var(--mb-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nova-color-primary) 12%, transparent); }
 .mb-port-target {
   width: 12px;
@@ -1140,7 +1150,7 @@ textarea.property-control { resize: vertical; }
 .property-branch-target small { color: var(--nova-color-text-muted); font-size: var(--nova-font-size-xs, 10px); line-height: 14px; }.property-branch-target strong { overflow: hidden; color: var(--nova-color-text-secondary); font-size: var(--nova-font-size-sm, 12px); line-height: 18px; font-weight: var(--nova-font-weight-semibold, 600); text-overflow: ellipsis; white-space: nowrap; }.property-branch-target > span { color: var(--nova-color-primary); font-size: var(--nova-font-size-sm, 12px); }
 
 /* @bpmn-nova/internal/studio */
-.nova-studio-shell { --nova-left-width: 244px; --nova-right-width: 360px; --nova-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; --nova-font-size-xs: 10px; --nova-font-size-sm: 12px; --nova-font-size-md: 14px; --nova-font-size-lg: 16px; --nova-font-weight-regular: 400; --nova-font-weight-medium: 500; --nova-font-weight-semibold: 600; --nova-font-weight-bold: 700; position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 520px; overflow: hidden; display: grid; grid-template-rows: 58px minmax(0, 1fr); color: var(--nova-color-text, #263148); background: var(--nova-color-canvas, #f6f7fb); font-family: var(--nova-font-family); }
+.nova-studio-shell { --nova-left-width: 244px; --nova-right-width: 360px; --nova-control-height: 32px; --nova-header-height: 58px; --nova-control-font-size: 12px; --nova-control-padding-inline: 10px; --nova-mode-control-padding-inline: 12px; --nova-control-icon-size: 14px; --nova-control-radius: 7px; --nova-mode-control-height: 36px; --nova-mode-button-height: 28px; --nova-projection-button-height: 26px; --nova-icon-button-size: 31px; --nova-split-caret-width: 27px; --nova-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; --nova-font-size-xs: 10px; --nova-font-size-sm: 12px; --nova-font-size-md: 14px; --nova-font-size-lg: 16px; --nova-font-weight-regular: 400; --nova-font-weight-medium: 500; --nova-font-weight-semibold: 600; --nova-font-weight-bold: 700; position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 520px; overflow: hidden; display: grid; grid-template-rows: var(--nova-header-height) minmax(0, 1fr); color: var(--nova-color-text, #263148); background: var(--nova-color-canvas, #f6f7fb); font-family: var(--nova-font-family); }
 .nova-studio-shell.is-header-hidden { grid-template-rows: minmax(0, 1fr); }
 .nova-studio-header[hidden], .nova-studio-left[hidden], .nova-studio-right[hidden], .nova-studio-statusbar[hidden] { display: none !important; }
 .nova-studio-header { min-width: 0; border-bottom: 1px solid var(--nova-color-divider, #e4e8f0); background: var(--nova-color-surface, #fff); display: grid; grid-template-columns: minmax(180px, auto) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 0 12px 0 14px; }
@@ -1150,20 +1160,22 @@ textarea.property-control { resize: vertical; }
 .nova-studio-brand-copy strong { color: var(--nova-tone-primary-foreground, #3443b8); font-size: var(--nova-font-size-md); line-height: 20px; font-weight: var(--nova-font-weight-bold); letter-spacing: -.01em; }
 .nova-studio-brand-copy span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nova-color-text-muted, #7c8799); font-size: var(--nova-font-size-xs); line-height: 14px; }
 .nova-studio-center-controls { min-width: 0; justify-self: center; display: flex; align-items: center; gap: 8px; }
-.nova-studio-mode-switch { height: 36px; border: 1px solid var(--nova-color-divider, #e6e8ef); border-radius: 10px; padding: 3px; display: flex; align-items: center; gap: 2px; background: var(--nova-color-surface-muted, #f4f5f8); box-shadow: inset 0 1px 2px rgba(35,43,68,.03); }
-.nova-studio-mode-switch button { height: 28px; border: 0; border-radius: 7px; padding: 0 12px; display: flex; align-items: center; gap: 5px; color: var(--nova-color-text-muted, #8a93a4); background: transparent; font-size: var(--nova-font-size-sm); line-height: 18px; white-space: nowrap; cursor: pointer; }
+.nova-studio-mode-switch { height: var(--nova-mode-control-height); border: 1px solid var(--nova-color-divider, #e6e8ef); border-radius: calc(var(--nova-control-radius) + 3px); padding: 3px; display: flex; align-items: center; gap: 2px; background: var(--nova-color-surface-muted, #f4f5f8); box-shadow: inset 0 1px 2px rgba(35,43,68,.03); }
+.nova-studio-mode-switch button { height: var(--nova-mode-button-height); border: 0; border-radius: var(--nova-control-radius); padding: 0 var(--nova-mode-control-padding-inline); display: flex; align-items: center; gap: 5px; color: var(--nova-color-text-muted, #8a93a4); background: transparent; font-size: var(--nova-control-font-size); line-height: 18px; white-space: nowrap; cursor: pointer; }
 .nova-studio-mode-switch button.is-active { color: var(--nova-tone-primary-foreground, #4f5dd1); background: var(--nova-color-surface, #fff); font-weight: var(--nova-font-weight-semibold); box-shadow: var(--nova-shadow-sm); }
-.nova-studio-projection-switch { height: 32px; border: 1px solid var(--nova-color-border, #e2e6ef); border-radius: 8px; padding: 2px; display: flex; align-items: center; gap: 2px; background: var(--nova-color-surface, #fff); }
+.nova-studio-projection-switch { height: var(--nova-control-height); border: 1px solid var(--nova-color-border, #e2e6ef); border-radius: calc(var(--nova-control-radius) + 1px); padding: 2px; display: flex; align-items: center; gap: 2px; background: var(--nova-color-surface, #fff); }
 .nova-studio-projection-switch.is-hidden { display: none; }
-.nova-studio-projection-switch button { height: 26px; border: 0; border-radius: 6px; padding: 0 9px; color: var(--nova-color-text-muted, #7c8799); background: transparent; font-size: var(--nova-font-size-sm); line-height: 18px; white-space: nowrap; cursor: pointer; }
+.nova-studio-projection-switch button { height: var(--nova-projection-button-height); border: 0; border-radius: max(0px, calc(var(--nova-control-radius) - 1px)); padding: 0 max(0px, calc(var(--nova-control-padding-inline) - 1px)); color: var(--nova-color-text-muted, #7c8799); background: transparent; font-size: var(--nova-control-font-size); line-height: 18px; white-space: nowrap; cursor: pointer; }
 .nova-studio-projection-switch button:hover { color: var(--nova-tone-primary-foreground, #4d59ca); background: var(--nova-color-primary-soft, #f4f5ff); }.nova-studio-projection-switch button.is-active { color: var(--nova-tone-primary-foreground, #4654c8); background: var(--nova-color-primary-soft, #eef0ff); font-weight: var(--nova-font-weight-semibold); }
 .nova-studio-tools { min-width: 0; overflow: visible; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
 .nova-studio-tools::-webkit-scrollbar { display: none; }
-.nova-studio-header-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
-.nova-studio-tool-divider { flex: none; width: 1px; height: 20px; margin: 0 2px; background: var(--nova-color-divider, #e4e8f0); }
-.nova-studio-tool { flex: none; min-height: 32px; border: 1px solid var(--nova-color-border, #e2e6ef); border-radius: 7px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--nova-color-text-secondary, #4c586d); background: var(--nova-color-surface, #fff); font-size: var(--nova-font-size-sm); line-height: 18px; white-space: nowrap; cursor: pointer; }
+.nova-studio-header-actions { min-width: 0; min-height: var(--nova-control-height); display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
+.nova-studio-header .nova-icon { width: var(--nova-control-icon-size); height: var(--nova-control-icon-size); }
+.nova-studio-header .nova-icon.nova-icon-xs { width: max(12px, calc(var(--nova-control-icon-size) - 2px)); height: max(12px, calc(var(--nova-control-icon-size) - 2px)); }
+.nova-studio-tool-divider { flex: none; width: 1px; height: calc(var(--nova-control-height) - 12px); margin: 0 2px; background: var(--nova-color-divider, #e4e8f0); }
+.nova-studio-tool { flex: none; height: var(--nova-control-height); min-height: var(--nova-control-height); border: 1px solid var(--nova-color-border, #e2e6ef); border-radius: var(--nova-control-radius); padding: 0 var(--nova-control-padding-inline); display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--nova-color-text-secondary, #4c586d); background: var(--nova-color-surface, #fff); font-size: var(--nova-control-font-size); line-height: 18px; white-space: nowrap; cursor: pointer; }
 .nova-studio-tool:focus { outline: none; }.nova-studio-tool:focus-visible { outline: 2px solid var(--nova-color-focus-ring, #aeb7ff); outline-offset: 1px; }
-.nova-studio-tool.is-icon { width: 31px; padding: 0; font-size: 14px; }
+.nova-studio-tool.is-icon { width: var(--nova-icon-button-size); padding: 0; font-size: calc(var(--nova-control-font-size) + 2px); }
 .nova-studio-tool:hover, .nova-studio-tool.is-active { border-color: var(--nova-tone-primary-border, #bec6ff); color: var(--nova-tone-primary-foreground, #3948c5); background: var(--nova-color-primary-soft, #f2f4ff); }
 .nova-studio-tool.is-magic { border-color: var(--nova-tone-primary-border, #d9ddff); color: var(--nova-tone-primary-foreground, #4654c8); background: var(--nova-color-primary-soft, #f4f5ff); font-weight: var(--nova-font-weight-semibold); }
 .nova-studio-tool.is-primary { border-color: var(--nova-color-primary); color: var(--nova-color-text-inverse, #fff); background: var(--nova-color-primary, #5361d6); }
@@ -1182,8 +1194,8 @@ textarea.property-control { resize: vertical; }
 .nova-studio-export-option.is-hidden { display: none; }
 .nova-studio-import-input { display: none; }
 .nova-studio-beautify-split { position: relative; flex: none; display: flex; }
-.nova-studio-beautify-split .nova-studio-beautify { border-radius: 7px 0 0 7px; }
-.nova-studio-beautify-split .nova-studio-beautify-caret { width: 27px; border-left: 0; border-radius: 0 7px 7px 0; padding: 0; }
+.nova-studio-beautify-split .nova-studio-beautify { border-radius: var(--nova-control-radius) 0 0 var(--nova-control-radius); }
+.nova-studio-beautify-split .nova-studio-beautify-caret { width: var(--nova-split-caret-width); border-left: 0; border-radius: 0 var(--nova-control-radius) var(--nova-control-radius) 0; padding: 0; }
 .nova-studio-beautify-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 224px; border: 1px solid var(--nova-color-border, #e5e7ee); border-radius: 12px; padding: 12px; color: var(--nova-color-text-secondary, #3d4659); background: var(--nova-color-surface, #fff); box-shadow: var(--nova-shadow-lg); }
 .nova-studio-beautify-menu.is-hidden, .nova-studio-canvas-floating-head.is-hidden, .is-hidden-by-mode { display: none !important; }
 .nova-studio-beautify-title { margin-bottom: 9px; font-size: 12px; font-weight: 700; line-height: 18px; }
@@ -1429,7 +1441,7 @@ textarea.property-control { resize: vertical; }
   .nova-studio-brand-copy span { display: none; }
 }
 @media (max-width: 720px) {
-  .nova-studio-shell { grid-template-rows: 54px minmax(0,1fr); }
+  .nova-studio-shell { grid-template-rows: var(--nova-header-height) minmax(0,1fr); }
   .nova-studio-shell.is-header-hidden { grid-template-rows: minmax(0, 1fr); }
   .nova-studio-header { grid-template-columns: auto minmax(0,1fr); padding-left: 9px; }
   .nova-studio-brand-copy { display: none; }
@@ -1442,3 +1454,51 @@ textarea.property-control { resize: vertical; }
   .nova-studio-body.is-timeline .nova-studio-statusbar { display: none; }
 }
 
+/* The managed Shell keeps three tracks, including zero-width collapsed tracks.
+   Legacy base layout above remains usable without the sidebar controller. */
+.nova-studio-shell .nova-studio-body.is-managed-sidebars {
+  position: relative;
+  grid-template-columns: var(--nova-sidebar-left-track, 0px) minmax(0, 1fr) var(--nova-sidebar-right-track, 0px);
+}
+.nova-studio-body.is-managed-sidebars.is-sidebar-animated {
+  transition: grid-template-columns 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+.nova-studio-shell .is-managed-sidebars > .nova-studio-left, .nova-studio-shell .is-managed-sidebars > .nova-studio-right {
+  display: block; min-width: 0; min-height: 0; overflow: hidden; border: 0;
+}
+.is-managed-sidebars > .nova-studio-left { grid-column: 1; grid-row: 1; }
+.is-managed-sidebars > .nova-studio-canvas-column { grid-column: 2; grid-row: 1; }
+.is-managed-sidebars > .nova-studio-right { grid-column: 3; grid-row: 1; }
+.nova-studio-sidebar-content {
+  box-sizing: border-box; height: 100%; min-width: 0; min-height: 0;
+  scrollbar-width: thin; scrollbar-color: var(--nova-color-border-strong, #d9dee7) transparent;
+}
+.nova-studio-left-content { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--nova-color-divider); }
+.nova-studio-right-content { border-left: 1px solid var(--nova-color-divider); }
+.nova-studio-right-content[data-layout="flex"] { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.nova-studio-right-content[data-layout="scroll"] { display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
+.nova-studio-right-content[data-layout="flex"].nova-properties > .properties-head { flex: none; position: relative; }
+.nova-studio-right-content[data-layout="flex"].nova-properties > .properties-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
+.nova-studio-right-content[data-layout="scroll"].nova-properties > .properties-head { position: relative; }
+.nova-studio-right-content[data-layout="flex"] > .nova-studio-readonly-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.nova-studio-right-content[data-layout="flex"] .nova-studio-readonly-header { flex: none; }
+.nova-studio-right-content[data-layout="flex"] .nova-studio-readonly-body { flex: 1; min-height: 0; overflow: auto; align-content: start; overscroll-behavior: contain; }
+.nova-studio-sidebar-content::-webkit-scrollbar, .nova-studio-right-content .properties-body::-webkit-scrollbar, .nova-studio-readonly-body::-webkit-scrollbar { width: 4px; height: 4px; }
+.nova-studio-sidebar-content::-webkit-scrollbar-thumb, .nova-studio-right-content .properties-body::-webkit-scrollbar-thumb, .nova-studio-readonly-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--nova-color-border-strong, #d9dee7); }
+.nova-studio-sidebar-toggle {
+  position: absolute; z-index: 8; top: 50%; transform: translateY(-50%);
+  box-sizing: border-box; width: 22px; height: 44px; padding: 0;
+  display: grid; place-items: center; border: 1px solid var(--nova-color-border);
+  border-radius: 7px; background: var(--nova-color-surface); color: var(--nova-color-text-muted);
+  box-shadow: var(--nova-shadow-sm); font: 22px/1 sans-serif; cursor: pointer;
+}
+.nova-studio-sidebar-toggle[hidden] { display: none; }
+.nova-studio-sidebar-toggle.is-left { left: max(0px, calc(var(--nova-sidebar-left-track, 0px) - 11px)); }
+.nova-studio-sidebar-toggle.is-right { right: max(0px, calc(var(--nova-sidebar-right-track, 0px) - 11px)); }
+.is-sidebar-animated > .nova-studio-sidebar-toggle { transition: left 200ms cubic-bezier(0.2, 0, 0, 1), right 200ms cubic-bezier(0.2, 0, 0, 1); }
+.nova-studio-sidebar-toggle:hover { color: var(--nova-color-primary); background: var(--nova-color-primary-soft); }
+.nova-studio-sidebar-toggle:focus-visible { outline: 2px solid var(--nova-color-focus-ring); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .nova-studio-body.is-managed-sidebars.is-sidebar-animated, .is-sidebar-animated > .nova-studio-sidebar-toggle { transition: none; }
+}
+