openplanr 3.0.0 → 3.0.1
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.
- package/CHANGELOG.md +10 -0
- package/dist/cli/commands/upgrade.d.ts.map +1 -1
- package/dist/cli/commands/upgrade.js +4 -2
- package/dist/cli/commands/upgrade.js.map +1 -1
- package/dist/dashboard/.vite/manifest.json +1 -1
- package/dist/dashboard/assets/{index-Csby7_ur.js → index-n08LJ6bK.js} +2 -2
- package/dist/dashboard/assets/{index-Csby7_ur.js.map → index-n08LJ6bK.js.map} +1 -1
- package/dist/dashboard/dashboard-manifest.json +8 -8
- package/dist/dashboard/index.html +1 -1
- package/dist/services/claude-plugin-service.d.ts +9 -0
- package/dist/services/claude-plugin-service.d.ts.map +1 -1
- package/dist/services/claude-plugin-service.js +12 -0
- package/dist/services/claude-plugin-service.js.map +1 -1
- package/dist/services/upgrade-report.d.ts.map +1 -1
- package/dist/services/upgrade-report.js +5 -2
- package/dist/services/upgrade-report.js.map +1 -1
- package/dist/services/upgrade-service.d.ts +14 -0
- package/dist/services/upgrade-service.d.ts.map +1 -1
- package/dist/services/upgrade-service.js +66 -10
- package/dist/services/upgrade-service.js.map +1 -1
- package/lib/host-packages/adapter-registry.json +5 -5
- package/lib/host-packages/capability-map.json +1 -1
- package/lib/host-packages/claude/.claude-plugin/marketplace.json +2 -2
- package/lib/host-packages/claude/openplanr/.claude-plugin/plugin.json +1 -1
- package/lib/host-packages/claude/openplanr/.openplanr-content.json +9 -9
- package/lib/host-packages/claude/openplanr/README.md +1 -1
- package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/artifact/lib/artifact/ui/studio-shell.css +1 -1
- package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/package.json +3 -3
- package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/16-studio-shell.js +146 -54
- package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources.json +4 -4
- package/lib/host-packages/claude/openplanr/runtime/design/scripts/runtime/packages/protocol/package.json +5 -1
- package/lib/host-packages/claude/openplanr/runtime/plan/scripts/runtime/packages/protocol/package.json +5 -1
- package/lib/host-packages/cursor/openplanr/.openplanr-content.json +8 -8
- package/lib/host-packages/cursor/openplanr/manifest.json +1 -1
- package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/artifact/lib/artifact/ui/studio-shell.css +1 -1
- package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/package.json +3 -3
- package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/16-studio-shell.js +146 -54
- package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources.json +4 -4
- package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/protocol/package.json +5 -1
- package/lib/host-packages/cursor/openplanr/runtime/plan/scripts/runtime/packages/protocol/package.json +5 -1
- package/lib/host-packages/openai/.claude-plugin/marketplace.json +2 -2
- package/lib/host-packages/openai/openplanr/.codex-plugin/plugin.json +1 -1
- package/lib/host-packages/openai/openplanr/.openplanr-content.json +8 -8
- package/lib/host-packages/openai/openplanr/runtime/design/scripts/runtime/packages/artifact/lib/artifact/ui/studio-shell.css +1 -1
- package/lib/host-packages/openai/openplanr/runtime/design/scripts/runtime/packages/design/package.json +3 -3
- package/lib/host-packages/openai/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/16-studio-shell.js +146 -54
- package/lib/host-packages/openai/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources.json +4 -4
- package/lib/host-packages/openai/openplanr/runtime/design/scripts/runtime/packages/protocol/package.json +5 -1
- package/lib/host-packages/openai/openplanr/runtime/plan/scripts/runtime/packages/protocol/package.json +5 -1
- package/package.json +3 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* generated by scripts/typescript/compile-sources.mjs from studio-shell.source.css */
|
|
2
|
-
.studio-toolbar{min-width:0;min-height:54px;gap:12px;font:400 13px / 1.4 var(--planr-font-body, "DM Sans", sans-serif);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;flex-wrap:nowrap;padding:0 16px;width:100%}.studio-toolbar .planr-brand{display:flex;align-items:center;gap:8px;min-width:0;max-width:none;flex:1}.studio-toolbar .planr-mark{display:inline-flex;flex:none;width:28px;height:28px;color:var(--planr-color-primary)}.studio-toolbar .planr-mark svg{display:block;width:100%;height:100%}.studio-toolbar .design-wordmark{font-weight:500;white-space:nowrap;font-size:13px;color:var(--planr-color-text)}.studio-toolbar .design-wordmark>span{font-weight:600;color:var(--planr-color-primary)}.studio-toolbar .planr-title-block{display:flex;align-items:center;gap:7px;min-width:0}.studio-toolbar[data-studio-react-chrome=true]{display:grid;padding-inline:16px}.studio-chrome-mount,.studio-panel-mount{display:contents}.studio-toolbar-leading,.studio-toolbar-trailing{min-width:0;display:flex;align-items:center;gap:8px}.studio-toolbar-leading{min-width:0}.studio-toolbar-trailing{justify-content:flex-end;justify-self:end;width:max-content;max-width:100%}.studio-toolbar-center{min-width:0;width:max-content;max-width:100%;justify-self:center}.studio-toolbar[data-studio-react-chrome=true] .studio-toolbar-center .planr-segment{display:inline-flex}.studio-toolbar[data-studio-center=false] .studio-toolbar-center,.studio-toolbar-center:empty,.studio-toolbar-status:empty,.studio-toolbar-actions:empty{display:none}.studio-toolbar-status,.studio-toolbar-actions{display:flex;align-items:center;min-width:0;gap:8px}.studio-toolbar-status{max-width:128px}.studio-toolbar-status>:is(output,.studio-status){display:inline-flex;align-items:center;min-width:0;max-width:none;overflow-wrap:normal}.studio-identity{min-width:0;flex:1;overflow:hidden}.studio-toolbar .planr-title-block strong{max-width:min(25vw,300px);min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-toolbar[data-studio-react-chrome=true] .studio-type-badge{display:inline-flex}.studio-subtitle,.studio-hierarchy{display:block;overflow:hidden;color:var(--planr-color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.studio-hierarchy a{color:inherit}.studio-type-badge{display:inline-flex;flex:none;align-items:center;padding:2px 5px;border:1px solid var(--planr-color-rule);border-radius:var(--planr-radius-small, 5px);color:var(--planr-color-text-muted);font:500 10px / 1.2 var(--planr-font-body);white-space:nowrap}.studio-button,.studio-menu-content,.studio-tooltip,.studio-panel-dialog,.studio-dialog{border:1px solid var(--planr-color-rule);background:var(--planr-color-panel);color:var(--planr-color-text)}.studio-button{min-height:32px;display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:var(--planr-radius-medium, 8px);padding:0 9px;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-button-ghost{background:transparent;border-color:transparent}.studio-toolbar[data-studio-react-chrome=true] :is(.studio-button,.planr-toolbar-action){height:auto;min-height:32px;padding-block:4px;white-space:nowrap}.studio-button-primary{background:var(--planr-color-primary);border-color:var(--planr-color-primary);color:var(--planr-color-background)}.studio-button:not(:disabled):hover,.studio-button[aria-pressed=true],.studio-button[aria-expanded=true]{background:var(--planr-color-raised);color:var(--planr-color-primary)}.studio-button:disabled,.studio-menu-item[data-disabled]{opacity:0.45;cursor:not-allowed}.studio-button:focus-visible,.studio-menu-item:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:2px}.studio-menu{display:inline-flex}.studio-menu-content{min-width:180px;max-width:min(320px,calc(100vw - 16px));max-height:var(--radix-dropdown-menu-content-available-height);overflow-y:auto;padding:5px;z-index:160;border-radius:var(--planr-radius-medium, 8px);box-shadow:0 12px 30px color-mix(in srgb,var(--planr-color-background) 60%,transparent)}.studio-menu-item{width:100%;min-height:34px;padding:8px 10px;display:flex;align-items:center;text-align:left;border:0;border-radius:var(--planr-radius-small, 5px);background:transparent;color:inherit;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-menu-item[data-highlighted]{background:var(--planr-color-raised);outline:none;color:var(--planr-color-primary)}.studio-menu-group-start{border-top:1px solid var(--planr-color-rule);border-radius:0}.studio-tooltip{z-index:180;padding:6px 8px;border-radius:var(--planr-radius-small, 5px);font:12px / 1.4 var(--planr-font-body)}.studio-status{min-width:0;display:inline-flex;align-items:center;gap:4px;color:var(--planr-color-text-muted);font:10px / 1.3 var(--planr-font-body)}.studio-status[data-tone=error]{color:var(--planr-color-danger)}.studio-status .studio-button{width:24px;min-height:24px;padding:0}.studio-panel-overlay{position:absolute;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-panel-dialog{position:absolute;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);z-index:180;width:min(350px,calc(100% - 32px));box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent)}.studio-panel-left{left:0}.studio-panel-right{right:0}.studio-panel-close{position:absolute;right:8px;top:8px;z-index:2;width:32px}.studio-dialog-overlay{position:fixed;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-dialog{position:fixed;z-index:180;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:var(--planr-radius-large, 12px);box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent);font:400 13px / 1.5 var(--planr-font-body)}.studio-dialog-title{margin:0 32px 12px 0;font:600 20px / 1.3 var(--planr-font-display)}.studio-dialog-description{color:var(--planr-color-text-muted)}.studio-panel-content{height:100%;min-height:0}.studio-panel-dialog .design-navigator,.studio-panel-dialog .planr-review-rail,.studio-panel-dialog .diagram-outline{position:static!important;width:100%!important;height:100%!important;max-height:100%!important;transform:none!important;overflow-y:auto;padding-top:42px;border:0}@media(max-width:680px){.studio-toolbar{gap:6px;padding-inline:8px}.studio-toolbar .planr-title-block strong{max-width:30vw}.studio-toolbar .design-wordmark{display:none}.studio-toolbar .design-button-label{display:none}.studio-toolbar .studio-status{max-width:90px}.studio-button{min-height:36px;padding-inline:8px}}.planr-shell[data-studio-framework=react]{--planr-toolbar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-shell[data-studio-framework=react] :is(.design-toolbar,.diagram-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:var(--planr-toolbar-height);height:auto;padding-block:4px;overflow:visible}.planr-shell[data-studio-framework=react] .planr-brand{display:flex;gap:8px;max-width:none;min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{max-width:100%}.planr-shell[data-studio-framework=react] .design-toolbar .design-view-picker{display:inline-flex;width:auto;height:auto;min-height:32px;margin:0;border:0}.planr-shell[data-studio-framework=react] .design-export>button{display:inline-flex;width:auto;padding:0 9px}.planr-shell[data-studio-framework=react] .studio-menu-content{position:relative}.planr-shell[data-studio-framework=react] .planr-title-block{display:flex}.planr-shell[data-studio-framework=react]>.planr-workspace{position:relative}@media(max-width:680px){.planr-shell[data-studio-framework=react] .studio-toolbar.planr-toolbar{gap:2px;padding-inline:4px}.planr-shell[data-studio-framework=react] .studio-toolbar-leading,.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:2px}.planr-shell[data-studio-framework=react] .planr-brand{overflow:hidden}.planr-shell[data-studio-framework=react] .studio-identity{display:block;overflow:hidden}.planr-shell[data-studio-framework=react] .planr-mark{width:22px;height:22px}.planr-shell[data-studio-framework=react] .design-view-picker{height:auto;min-height:44px;gap:0}.planr-shell[data-studio-framework=react] .design-view-picker button{width:44px;height:auto;padding:0}.planr-shell[data-studio-framework=react] .studio-button{min-width:44px;min-height:44px}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button span{font-size:16px}}@media(max-width:960px){.planr-shell[data-studio-framework=react] .design-wordmark{display:none}.planr-shell[data-studio-framework=react] .planr-workspace>:is(.design-navigator,.planr-review-rail){top:0;max-height:100%}}@media(max-width:1240px){.planr-shell[data-studio-framework=react] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-shell[data-studio-framework=react] .planr-title-block strong{max-width:100%;line-height:1.1}.planr-shell[data-studio-framework=react] .design-preview-state{max-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.planr-diagram-editor[data-studio-framework=react]{--de-bar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-diagram-editor[data-studio-framework=react] .de-bar{display:block;padding:0;height:auto;overflow:visible;border-bottom:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar{min-height:60px;height:auto;padding:4px 16px;border:0;border-bottom:1px solid var(--de-rule);background:var(--de-panel)}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar :is(.de-command-group,.studio-toolbar-trailing){flex:none}.planr-diagram-editor[data-studio-framework=react] .planr-brand{min-width:0;overflow:hidden}.planr-diagram-editor[data-studio-framework=react] .de-title{max-width:25vw;line-height:1.35}.planr-diagram-editor[data-studio-framework=react] .studio-subtitle .de-subtitle{line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .de-alert{grid-row:2;top:var(--de-space-3)}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .design-wordmark,.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .studio-subtitle{display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar{padding:4px 8px;gap:8px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar-trailing{gap:4px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-menu:has([data-studio-palette-menu]){display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .de-more-menu{top:calc(100% + var(--de-space-2))}[data-studio-framework=react]{position:relative}[data-studio-framework=react] .studio-toolbar .studio-type-badge{display:inline-flex}[data-studio-framework=react] .studio-identity{flex:1;min-width:0}[data-studio-framework=react] .studio-toolbar .planr-title-block strong{contain:inline-size;display:block;align-self:stretch;width:auto;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-studio-framework=react] .studio-subtitle{contain:inline-size}[data-studio-framework=react]:has(.studio-panel-dialog) [data-planr-close-feedback],[data-studio-framework=react]:has(.studio-panel-dialog) .planr-review-rail [data-planr-close-feedback]{display:none}.studio-panel-dialog .design-nav-close,.studio-panel-dialog .studio-panel-content .planr-review-rail [data-planr-close-feedback]{display:none}.studio-preserved-control{display:contents}.studio-toolbar fieldset.planr-segment{margin:0;padding:0;min-inline-size:0}.diagram-shell[data-present=true] .studio-toolbar-actions>:not([data-action=present]):not(.studio-menu){display:none}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button{color:var(--planr-color-text);background:var(--planr-color-panel)}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button:enabled:hover{background:var(--planr-color-raised)}@media(max-width:680px){.studio-panel-close{width:44px;min-height:44px}}@media(max-width:700px){.diagram-shell[data-present=true] .studio-toolbar-leading{flex:none}.diagram-shell[data-present=true] .diagram-presentation-nav{min-width:0;flex:1;gap:4px}.diagram-shell[data-present=true] .diagram-presentation-nav>div{min-width:0}}@media(min-width:681px)and (max-width:960px){.diagram-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:4px}}@media(max-width:480px){.studio-toolbar .planr-mark{display:none}}.studio-toolbar[data-studio-center=true],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-center=true]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;row-gap:4px;padding-block:4px}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-leading{grid-column:1;grid-row:1;width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-trailing{grid-column:1;grid-row:2;width:100%;flex-wrap:wrap}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-actions{justify-content:flex-end;flex-wrap:wrap;max-width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-center{grid-column:1;grid-row:3}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status{max-width:100%;width:100%;flex-basis:100%;flex-wrap:wrap;justify-content:flex-end}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status>:is(output,.studio-status,.design-preview-state){max-width:100%;white-space:normal;overflow:visible;overflow-wrap:normal}.studio-toolbar[data-studio-density=narrow]{gap:4px;padding-inline:8px}.studio-toolbar[data-studio-density=narrow] .design-wordmark,.studio-toolbar[data-studio-density=narrow] .design-button-label,.studio-toolbar[data-studio-density=narrow] .planr-mark{display:none}.studio-toolbar[data-studio-density=narrow] .studio-button,.studio-toolbar[data-studio-density=narrow] .planr-toolbar-action,.studio-toolbar[data-studio-density=narrow] .design-view-picker button{min-height:44px;min-width:44px}.studio-toolbar[data-studio-density=narrow] .design-view-picker{height:auto;gap:0}.studio-toolbar[data-studio-density=narrow] .design-view-picker button{width:44px;height:auto;padding:0}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-actions{gap:4px}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-status{font-size:10px}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button span{font-size:16px}@media(max-width:680px),(pointer:coarse){.studio-button,.studio-menu-item{min-width:44px;min-height:44px}}
|
|
2
|
+
.studio-toolbar{min-width:0;min-height:54px;gap:12px;font:400 13px / 1.4 var(--planr-font-body, "DM Sans", sans-serif);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;flex-wrap:nowrap;padding:0 16px;width:100%}.studio-toolbar .planr-brand{display:flex;align-items:center;gap:8px;min-width:0;max-width:none;flex:1}.studio-toolbar .planr-mark{display:inline-flex;flex:none;width:28px;height:28px;color:var(--planr-color-primary)}.studio-toolbar .planr-mark svg{display:block;width:100%;height:100%}.studio-toolbar .design-wordmark{font-weight:500;white-space:nowrap;font-size:13px;color:var(--planr-color-text)}.studio-toolbar .design-wordmark>span{font-weight:600;color:var(--planr-color-primary)}.studio-toolbar .planr-title-block{display:flex;align-items:center;gap:7px;min-width:0}.studio-toolbar[data-studio-react-chrome=true]{display:grid;padding-inline:16px}.studio-chrome-mount,.studio-panel-mount{display:contents}.studio-toolbar-leading,.studio-toolbar-trailing{min-width:0;display:flex;align-items:center;gap:8px}.studio-toolbar-leading{min-width:0}.studio-toolbar-trailing{justify-content:flex-end;justify-self:end;width:max-content;max-width:100%}.studio-toolbar-center{min-width:0;width:max-content;max-width:100%;justify-self:center}.studio-toolbar[data-studio-react-chrome=true] .studio-toolbar-center .planr-segment{display:inline-flex}.studio-toolbar[data-studio-center=false] .studio-toolbar-center,.studio-toolbar-center:empty,.studio-toolbar-status:empty,.studio-toolbar-actions:empty{display:none}.studio-toolbar-status,.studio-toolbar-actions{display:flex;align-items:center;min-width:0;gap:8px}.studio-toolbar-status{max-width:128px}.studio-toolbar-status>:is(output,.studio-status){display:inline-flex;align-items:center;min-width:0;max-width:none;overflow-wrap:normal}.studio-identity{min-width:0;flex:1;overflow:hidden}.studio-toolbar .planr-title-block strong{max-width:min(25vw,300px);min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-toolbar[data-studio-react-chrome=true] .studio-type-badge{display:inline-flex}.studio-subtitle,.studio-hierarchy{display:block;overflow:hidden;color:var(--planr-color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.studio-hierarchy a{color:inherit}.studio-type-badge{display:inline-flex;flex:none;align-items:center;padding:2px 5px;border:1px solid var(--planr-color-rule);border-radius:var(--planr-radius-small, 5px);color:var(--planr-color-text-muted);font:500 10px / 1.2 var(--planr-font-body);white-space:nowrap}.studio-button,.studio-menu-content,.studio-tooltip,.studio-panel-dialog,.studio-dialog{border:1px solid var(--planr-color-rule);background:var(--planr-color-panel);color:var(--planr-color-text)}.studio-button{min-height:32px;display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:var(--planr-radius-medium, 8px);padding:0 9px;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-button-ghost{background:transparent;border-color:transparent}.studio-toolbar[data-studio-react-chrome=true] :is(.studio-button,.planr-toolbar-action){height:auto;min-height:32px;padding-block:4px;white-space:nowrap}.studio-button-primary{background:var(--planr-color-primary);border-color:var(--planr-color-primary);color:var(--planr-color-background)}.studio-button:not(:disabled):hover,.studio-button[aria-pressed=true],.studio-button[aria-expanded=true]{background:var(--planr-color-raised);color:var(--planr-color-primary)}.studio-button:disabled,.studio-menu-item[data-disabled]{opacity:0.45;cursor:not-allowed}.studio-button:focus-visible,.studio-menu-item:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:2px}.studio-menu{display:inline-flex}.studio-menu-content{min-width:180px;max-width:min(320px,calc(100vw - 16px));max-height:var(--radix-dropdown-menu-content-available-height);overflow-y:auto;padding:5px;z-index:160;border-radius:var(--planr-radius-medium, 8px);box-shadow:0 12px 30px color-mix(in srgb,var(--planr-color-background) 60%,transparent)}.studio-menu-item{width:100%;min-height:34px;padding:8px 10px;display:flex;align-items:center;text-align:left;border:0;border-radius:var(--planr-radius-small, 5px);background:transparent;color:inherit;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-menu-item[data-highlighted]{background:var(--planr-color-raised);outline:none;color:var(--planr-color-primary)}.studio-menu-group-start{border-top:1px solid var(--planr-color-rule);border-radius:0}.studio-tooltip{z-index:180;padding:6px 8px;border-radius:var(--planr-radius-small, 5px);font:12px / 1.4 var(--planr-font-body)}.studio-status{min-width:0;display:inline-flex;align-items:center;gap:4px;color:var(--planr-color-text-muted);font:10px / 1.3 var(--planr-font-body)}.studio-status[data-tone=error]{color:var(--planr-color-danger)}.studio-status .studio-button{width:24px;min-height:24px;padding:0}.studio-panel-overlay{position:absolute;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-panel-dialog{position:absolute;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);z-index:180;width:min(350px,calc(100% - 32px));box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent)}.studio-panel-left{left:0}.studio-panel-right{right:0}.studio-panel-close{position:absolute;right:8px;top:8px;z-index:2;width:32px}.studio-dialog-overlay{position:fixed;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-dialog{position:fixed;z-index:180;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:var(--planr-radius-large, 12px);box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent);font:400 13px / 1.5 var(--planr-font-body)}.studio-dialog-title{margin:0 32px 12px 0;font:600 20px / 1.3 var(--planr-font-display)}.studio-dialog-description{color:var(--planr-color-text-muted)}.studio-panel-content{height:100%;min-height:0}.studio-panel-dialog .design-navigator,.studio-panel-dialog .planr-review-rail,.studio-panel-dialog .diagram-outline{position:static!important;width:100%!important;height:100%!important;max-height:100%!important;transform:none!important;overflow-y:auto;padding-top:42px;border:0}@media(max-width:680px){.studio-toolbar{gap:6px;padding-inline:8px}.studio-toolbar .planr-title-block strong{max-width:30vw}.studio-toolbar .design-wordmark{display:none}.studio-toolbar .design-button-label{display:none}.studio-toolbar .studio-status{max-width:90px}.studio-button{min-height:36px;padding-inline:8px}}.planr-shell[data-studio-framework=react]{--planr-toolbar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-shell[data-studio-framework=react] :is(.design-toolbar,.diagram-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:var(--planr-toolbar-height);height:auto;padding-block:4px;overflow:visible}.planr-shell[data-studio-framework=react] .planr-brand{display:flex;gap:8px;max-width:none;min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{max-width:100%}.planr-shell[data-studio-framework=react] .design-toolbar .design-view-picker{display:inline-flex;width:auto;height:auto;min-height:32px;margin:0;border:0}.planr-shell[data-studio-framework=react] .design-export>button{display:inline-flex;width:auto;padding:0 9px}.planr-shell[data-studio-framework=react] .studio-menu-content{position:relative}.planr-shell[data-studio-framework=react] .planr-title-block{display:flex}.planr-shell[data-studio-framework=react]>.planr-workspace{position:relative}@media(max-width:680px){.planr-shell[data-studio-framework=react] .studio-toolbar.planr-toolbar{gap:2px;padding-inline:4px}.planr-shell[data-studio-framework=react] .studio-toolbar-leading,.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:2px}.planr-shell[data-studio-framework=react] .planr-brand{overflow:hidden}.planr-shell[data-studio-framework=react] .studio-identity{display:block;overflow:hidden}.planr-shell[data-studio-framework=react] .planr-mark{width:22px;height:22px}.planr-shell[data-studio-framework=react] .design-view-picker{height:auto;min-height:44px;gap:0}.planr-shell[data-studio-framework=react] .design-view-picker button{width:44px;height:auto;padding:0}.planr-shell[data-studio-framework=react] .studio-button{min-width:44px;min-height:44px}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button span{font-size:16px}}@media(max-width:960px){.planr-shell[data-studio-framework=react] .design-wordmark{display:none}.planr-shell[data-studio-framework=react] .planr-workspace>:is(.design-navigator,.planr-review-rail){top:0;max-height:100%}}@media(max-width:1240px){.planr-shell[data-studio-framework=react] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-shell[data-studio-framework=react] .planr-title-block strong{max-width:100%;line-height:1.1}.planr-shell[data-studio-framework=react] .design-preview-state{max-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.planr-diagram-editor[data-studio-framework=react]{--de-bar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-diagram-editor[data-studio-framework=react] .de-bar{display:block;padding:0;min-height:0;height:auto;overflow:visible;border-bottom:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar{min-height:60px;height:auto;padding:4px 16px;border:0;border-bottom:1px solid var(--de-rule);background:var(--de-panel)}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar :is(.de-command-group,.studio-toolbar-trailing){flex:none}.planr-diagram-editor[data-studio-framework=react] .planr-brand{min-width:0;overflow:hidden}.planr-diagram-editor[data-studio-framework=react] .de-title{max-width:25vw;line-height:1.35}.planr-diagram-editor[data-studio-framework=react] .studio-subtitle .de-subtitle{line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .de-alert{grid-row:2;top:var(--de-space-3)}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .design-wordmark,.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .studio-subtitle{display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar{padding:4px 8px;gap:8px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar-trailing{gap:4px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-menu:has([data-studio-palette-menu]){display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .de-more-menu{top:calc(100% + var(--de-space-2))}[data-studio-framework=react]{position:relative}[data-studio-framework=react] .studio-toolbar .studio-type-badge{display:inline-flex}[data-studio-framework=react] .studio-identity{flex:1;min-width:0}[data-studio-framework=react] .studio-toolbar .planr-title-block strong{contain:inline-size;display:block;align-self:stretch;width:auto;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-studio-framework=react] .studio-subtitle{contain:inline-size}[data-studio-framework=react]:has(.studio-panel-dialog) [data-planr-close-feedback],[data-studio-framework=react]:has(.studio-panel-dialog) .planr-review-rail [data-planr-close-feedback]{display:none}.studio-panel-dialog .design-nav-close,.studio-panel-dialog .studio-panel-content .planr-review-rail [data-planr-close-feedback]{display:none}.studio-preserved-control{display:contents}.studio-toolbar fieldset.planr-segment{margin:0;padding:0;min-inline-size:0}.diagram-shell[data-present=true] .studio-toolbar-actions>:not([data-action=present]):not(.studio-menu){display:none}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button{color:var(--planr-color-text);background:var(--planr-color-panel)}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button:enabled:hover{background:var(--planr-color-raised)}@media(max-width:680px){.studio-panel-close{width:44px;min-height:44px}}@media(max-width:700px){.diagram-shell[data-present=true] .studio-toolbar-leading{flex:none}.diagram-shell[data-present=true] .diagram-presentation-nav{min-width:0;flex:1;gap:4px}.diagram-shell[data-present=true] .diagram-presentation-nav>div{min-width:0}}@media(min-width:681px)and (max-width:960px){.diagram-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:4px}}@media(max-width:480px){.studio-toolbar .planr-mark{display:none}}.studio-toolbar[data-studio-center=true],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-center=true]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;row-gap:4px;padding-block:4px}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-leading{grid-column:1;grid-row:1;width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-trailing{grid-column:1;grid-row:2;width:100%;flex-wrap:wrap}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-actions{justify-content:flex-end;flex-wrap:wrap;max-width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-center{grid-column:1;grid-row:3}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status{max-width:100%;width:100%;flex-basis:100%;flex-wrap:wrap;justify-content:flex-end}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status>:is(output,.studio-status,.design-preview-state){max-width:100%;white-space:normal;overflow:visible;overflow-wrap:normal}.studio-toolbar[data-studio-density=narrow]{gap:4px;padding-inline:8px}.studio-toolbar[data-studio-density=narrow] .design-wordmark,.studio-toolbar[data-studio-density=narrow] .design-button-label,.studio-toolbar[data-studio-density=narrow] .planr-mark{display:none}.studio-toolbar[data-studio-density=narrow] .studio-button,.studio-toolbar[data-studio-density=narrow] .planr-toolbar-action,.studio-toolbar[data-studio-density=narrow] .design-view-picker button{min-height:44px;min-width:44px}.studio-toolbar[data-studio-density=narrow] .design-view-picker{height:auto;gap:0}.studio-toolbar[data-studio-density=narrow] .design-view-picker button{width:44px;height:auto;padding:0}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-actions{gap:4px}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-status{font-size:10px}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button span{font-size:16px}@media(max-width:680px),(pointer:coarse){.studio-button,.studio-menu-item{min-width:44px;min-height:44px}}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar{grid-template-columns:minmax(0,1fr) auto auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .planr-title-block strong{max-width:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-leading{grid-column:1;grid-row:1}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-center{display:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-secondary{grid-column:3;grid-row:1;display:flex;align-items:center;gap:4px;min-width:0}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-trailing{grid-column:2;grid-row:1;width:auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-actions{flex-wrap:nowrap}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .de-icon-button{min-width:44px;min-height:44px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar button,.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar a{border-radius:8px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar button svg,.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar a svg{width:18px;height:18px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar [data-action=outline]{background:transparent;border-color:transparent}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact]{grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding-block:0}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-leading{grid-column:1;grid-row:1;width:auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-trailing{grid-column:2;grid-row:1;flex-wrap:nowrap;width:auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-secondary{grid-column:1 / -1;grid-row:2;border-top:0;padding-top:0}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .de-save-state{display:inline-block;flex:1;max-width:none;overflow:visible;white-space:normal;font-size:12px;line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .planr-brand{flex:1}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .de-title{max-width:none;font-size:14px;font-weight:600;line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-type-badge{font-size:10px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-actions{flex-wrap:nowrap}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]){position:relative;isolation:isolate;min-width:44px;min-height:44px;padding:0;border-color:transparent;background:transparent;box-shadow:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem])::before{content:"";position:absolute;z-index:-1;inset:6px;border:1px solid transparent;border-radius:8px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]):is(:hover,[aria-expanded=true],[aria-pressed=true])::before{background:var(--de-raised);border-color:var(--de-rule)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]).de-primary:not(:disabled)::before{background:var(--de-primary);border-color:var(--de-primary)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]).de-primary:hover:not(:disabled)::before{background:var(--de-primary-hover);border-color:var(--de-primary-hover)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]).de-primary:disabled::before{background:var(--de-raised);border-color:var(--de-rule)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]):focus-visible{outline:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]):focus-visible::before{outline:2px solid var(--de-primary);outline-offset:1px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] .de-save-state{font-size:11px}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openplanr/design",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.7",
|
|
4
4
|
"private": true,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Canonical OpenPlanr design helpers and design-loop engine",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"node": ">=22.13.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@openplanr/artifact": "0.6.
|
|
50
|
-
"@openplanr/protocol": "0.
|
|
49
|
+
"@openplanr/artifact": "0.6.7",
|
|
50
|
+
"@openplanr/protocol": "0.12.0"
|
|
51
51
|
},
|
|
52
52
|
"scripts": {
|
|
53
53
|
"test": "node --test --test-concurrency=2 tests/*.test.mjs",
|
|
@@ -32,6 +32,34 @@
|
|
|
32
32
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "127", y: "71", width: "18", height: "18", rx: "3", fill: "currentColor" })
|
|
33
33
|
] }) }) });
|
|
34
34
|
}
|
|
35
|
+
function inlineGap(element) {
|
|
36
|
+
const view = element?.ownerDocument.defaultView;
|
|
37
|
+
return view && element ? parseFloat(view.getComputedStyle(element).gap) || 0 : 0;
|
|
38
|
+
}
|
|
39
|
+
function measureLeadingFloor(leading) {
|
|
40
|
+
const view = leading.ownerDocument.defaultView;
|
|
41
|
+
if (!view) return 128;
|
|
42
|
+
const leadingControls = [...leading.children].filter(
|
|
43
|
+
(node) => node instanceof view.HTMLElement && !node.classList.contains("planr-brand") && node.getClientRects().length > 0
|
|
44
|
+
);
|
|
45
|
+
const branding = [
|
|
46
|
+
...leading.querySelectorAll(".planr-mark,.design-wordmark")
|
|
47
|
+
].filter((node) => node.getClientRects().length);
|
|
48
|
+
const brandGap = inlineGap(leading.querySelector(".planr-brand"));
|
|
49
|
+
const brandingWidth = branding.reduce(
|
|
50
|
+
(total, node) => total + node.getBoundingClientRect().width + brandGap,
|
|
51
|
+
0
|
|
52
|
+
);
|
|
53
|
+
const titleBlock = leading.querySelector(".planr-title-block");
|
|
54
|
+
const badge = titleBlock?.querySelector(".studio-type-badge");
|
|
55
|
+
const title = titleBlock?.querySelector("strong,.de-title");
|
|
56
|
+
const titleFloor = Math.max(36, parseFloat(view.getComputedStyle(title ?? leading).fontSize) * 3);
|
|
57
|
+
const identityFloor = Math.max(
|
|
58
|
+
128,
|
|
59
|
+
(badge?.getBoundingClientRect().width || 0) + inlineGap(titleBlock) + titleFloor
|
|
60
|
+
);
|
|
61
|
+
return identityFloor + brandingWidth + leadingControls.reduce((total, control) => total + control.getBoundingClientRect().width, 0) + leadingControls.length * inlineGap(leading);
|
|
62
|
+
}
|
|
35
63
|
function StudioToolbar({
|
|
36
64
|
title,
|
|
37
65
|
titleNode,
|
|
@@ -44,6 +72,7 @@
|
|
|
44
72
|
viewPicker,
|
|
45
73
|
status,
|
|
46
74
|
actions,
|
|
75
|
+
secondaryActions,
|
|
47
76
|
className = ""
|
|
48
77
|
}) {
|
|
49
78
|
const toolbar = (0, import_react3.useRef)(null);
|
|
@@ -54,6 +83,7 @@
|
|
|
54
83
|
const center = element.querySelector(".studio-toolbar-center");
|
|
55
84
|
const trailing = element.querySelector(".studio-toolbar-trailing");
|
|
56
85
|
const leading2 = element.querySelector(".studio-toolbar-leading");
|
|
86
|
+
const secondary = element.querySelector(".studio-toolbar-secondary");
|
|
57
87
|
if (!center || !trailing || !leading2) return;
|
|
58
88
|
const measure = () => {
|
|
59
89
|
const width = element.getBoundingClientRect().width;
|
|
@@ -61,24 +91,28 @@
|
|
|
61
91
|
element.dataset.studioDensity = width <= 680 ? "narrow" : "regular";
|
|
62
92
|
const style = window2.getComputedStyle(element);
|
|
63
93
|
const available = width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
|
|
64
|
-
const gap = parseFloat(style.columnGap) || 0;
|
|
94
|
+
const gap = Math.max(12, parseFloat(style.columnGap) || 0);
|
|
65
95
|
element.dataset.studioCenter = "true";
|
|
66
96
|
const centerWidth = center.scrollWidth;
|
|
67
97
|
element.dataset.studioCenter = String(centerWidth > 0);
|
|
68
98
|
const controlSelector = 'button,a,summary,input,select,output,[role="status"]';
|
|
69
|
-
const controls = [
|
|
99
|
+
const controls = [
|
|
100
|
+
...trailing.querySelectorAll(controlSelector),
|
|
101
|
+
...secondary?.querySelectorAll(controlSelector) ?? []
|
|
102
|
+
].filter(
|
|
70
103
|
(control) => control.getClientRects().length && !control.closest('[role="menu"],.studio-tooltip,[role="dialog"]') && (!control.closest("details") || !!control.closest("summary")) && !control.parentElement?.closest(controlSelector)
|
|
71
104
|
);
|
|
72
|
-
const actionWidth = controls.reduce((total, control) =>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
105
|
+
const actionWidth = controls.reduce((total, control) => {
|
|
106
|
+
if (secondary?.contains(control) && control.getAttribute("role") === "status") {
|
|
107
|
+
const range = element.ownerDocument.createRange();
|
|
108
|
+
range.selectNodeContents(control);
|
|
109
|
+
const textWidth = range.getBoundingClientRect().width;
|
|
110
|
+
const controlStyle = window2.getComputedStyle(control);
|
|
111
|
+
return total + textWidth + (parseFloat(controlStyle.paddingLeft) || 0) + (parseFloat(controlStyle.paddingRight) || 0);
|
|
112
|
+
}
|
|
113
|
+
return total + control.getBoundingClientRect().width;
|
|
114
|
+
}, 0) + Math.max(0, controls.length - 1) * (parseFloat(window2.getComputedStyle(trailing).gap) || 8);
|
|
115
|
+
const leadingFloor = measureLeadingFloor(leading2);
|
|
82
116
|
const outerWidth = Math.max(leadingFloor, actionWidth);
|
|
83
117
|
element.dataset.studioLayout = centerWidth > 0 ? width <= 680 || centerWidth + outerWidth * 2 + gap * 2 > available ? "compact" : "inline" : leadingFloor + actionWidth + gap > available ? "compact" : "inline";
|
|
84
118
|
};
|
|
@@ -92,7 +126,7 @@
|
|
|
92
126
|
});
|
|
93
127
|
};
|
|
94
128
|
const resize = typeof window2.ResizeObserver === "function" ? new window2.ResizeObserver(scheduleMeasure) : null;
|
|
95
|
-
for (const node of [element, center, trailing]) resize?.observe(node);
|
|
129
|
+
for (const node of [element, center, trailing, secondary]) if (node) resize?.observe(node);
|
|
96
130
|
const mutations = new window2.MutationObserver(scheduleMeasure);
|
|
97
131
|
mutations.observe(element, {
|
|
98
132
|
subtree: true,
|
|
@@ -150,7 +184,8 @@
|
|
|
150
184
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "studio-toolbar-trailing design-toolbar-trailing", children: [
|
|
151
185
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "studio-toolbar-status", children: status }),
|
|
152
186
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "studio-toolbar-actions", children: actions })
|
|
153
|
-
] })
|
|
187
|
+
] }),
|
|
188
|
+
secondaryActions && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "studio-toolbar-secondary", children: secondaryActions })
|
|
154
189
|
]
|
|
155
190
|
}
|
|
156
191
|
);
|
|
@@ -164,49 +199,106 @@
|
|
|
164
199
|
onOpenChange
|
|
165
200
|
}) {
|
|
166
201
|
const trigger = (0, import_react3.useRef)(null);
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
{
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
202
|
+
const mousePosition = (0, import_react3.useRef)(null);
|
|
203
|
+
const keyboardPosition = (0, import_react3.useRef)(null);
|
|
204
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
205
|
+
const ownerDocument = trigger.current?.ownerDocument;
|
|
206
|
+
if (!ownerDocument) return;
|
|
207
|
+
const move = (event) => {
|
|
208
|
+
if (event.pointerType !== "mouse") return;
|
|
209
|
+
const position = { x: event.clientX, y: event.clientY };
|
|
210
|
+
const previous = keyboardPosition.current;
|
|
211
|
+
if (previous && (previous.x !== position.x || previous.y !== position.y))
|
|
212
|
+
keyboardPosition.current = null;
|
|
213
|
+
mousePosition.current = position;
|
|
214
|
+
};
|
|
215
|
+
const down = (event) => {
|
|
216
|
+
keyboardPosition.current = null;
|
|
217
|
+
if (event.pointerType === "mouse")
|
|
218
|
+
mousePosition.current = { x: event.clientX, y: event.clientY };
|
|
219
|
+
};
|
|
220
|
+
ownerDocument.addEventListener("pointermove", move, true);
|
|
221
|
+
ownerDocument.addEventListener("pointerdown", down, true);
|
|
222
|
+
return () => {
|
|
223
|
+
ownerDocument.removeEventListener("pointermove", move, true);
|
|
224
|
+
ownerDocument.removeEventListener("pointerdown", down, true);
|
|
225
|
+
};
|
|
226
|
+
}, []);
|
|
227
|
+
const retainKeyboardFocus = (event) => {
|
|
228
|
+
const position = keyboardPosition.current;
|
|
229
|
+
if (event.pointerType === "mouse" && position?.x === event.clientX && position.y === event.clientY)
|
|
230
|
+
event.preventDefault();
|
|
231
|
+
};
|
|
232
|
+
const keyboardInput = () => {
|
|
233
|
+
keyboardPosition.current = mousePosition.current;
|
|
234
|
+
};
|
|
235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
236
|
+
dist_exports5.Root,
|
|
237
|
+
{
|
|
238
|
+
modal: false,
|
|
239
|
+
open,
|
|
240
|
+
onOpenChange: (value) => {
|
|
241
|
+
if (!value) keyboardPosition.current = null;
|
|
242
|
+
onOpenChange?.(value);
|
|
243
|
+
},
|
|
244
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: `studio-menu ${className}`, children: [
|
|
245
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(dist_exports5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
246
|
+
StudioButton,
|
|
190
247
|
{
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
248
|
+
"aria-label": label,
|
|
249
|
+
title: label,
|
|
250
|
+
...triggerAttributes,
|
|
251
|
+
ref: trigger,
|
|
252
|
+
onKeyDownCapture: keyboardInput,
|
|
253
|
+
children: [
|
|
254
|
+
label,
|
|
255
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "⌄" })
|
|
256
|
+
]
|
|
257
|
+
}
|
|
258
|
+
) }),
|
|
259
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
260
|
+
dist_exports5.Content,
|
|
261
|
+
{
|
|
262
|
+
className: "studio-menu-content",
|
|
263
|
+
align: "end",
|
|
264
|
+
sideOffset: 8,
|
|
265
|
+
collisionPadding: 8,
|
|
266
|
+
onKeyDownCapture: keyboardInput,
|
|
267
|
+
onCloseAutoFocus: (event) => {
|
|
268
|
+
event.preventDefault();
|
|
269
|
+
const content = event.target;
|
|
270
|
+
const ownerDocument = content?.ownerDocument;
|
|
271
|
+
const active = ownerDocument?.activeElement;
|
|
272
|
+
if (active?.isConnected && active !== ownerDocument?.body && active !== ownerDocument?.documentElement && !content?.contains(active))
|
|
273
|
+
return;
|
|
274
|
+
if (trigger.current?.isConnected) trigger.current.focus();
|
|
275
|
+
},
|
|
276
|
+
children: items.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
277
|
+
dist_exports5.Item,
|
|
196
278
|
{
|
|
197
|
-
|
|
198
|
-
className: `studio-menu-item${index2 > 0 && item.group !== items[index2 - 1].group ? " studio-menu-group-start" : ""}`,
|
|
279
|
+
asChild: true,
|
|
199
280
|
disabled: item.disabled,
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
281
|
+
onSelect: item.onSelect,
|
|
282
|
+
onPointerMove: retainKeyboardFocus,
|
|
283
|
+
onPointerLeave: retainKeyboardFocus,
|
|
284
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
285
|
+
"button",
|
|
286
|
+
{
|
|
287
|
+
type: "button",
|
|
288
|
+
className: `studio-menu-item${index2 > 0 && item.group !== items[index2 - 1].group ? " studio-menu-group-start" : ""}`,
|
|
289
|
+
disabled: item.disabled,
|
|
290
|
+
...item.attributes,
|
|
291
|
+
children: item.label
|
|
292
|
+
}
|
|
293
|
+
)
|
|
294
|
+
},
|
|
295
|
+
item.id
|
|
296
|
+
))
|
|
297
|
+
}
|
|
298
|
+
)
|
|
299
|
+
] })
|
|
300
|
+
}
|
|
301
|
+
);
|
|
210
302
|
}
|
|
211
303
|
function StudioPanelDialog({
|
|
212
304
|
open,
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
"kind": "openplanr-runtime-asset-sources",
|
|
3
3
|
"schemaVersion": "1.0.0",
|
|
4
4
|
"asset": "studio.js",
|
|
5
|
-
"bytes":
|
|
6
|
-
"sha256": "
|
|
5
|
+
"bytes": 1146075,
|
|
6
|
+
"sha256": "f649b59fe0a31ec9055d6e5bf5b68425c1fe4e996224c35603d84f91021949cf",
|
|
7
7
|
"scopes": [
|
|
8
8
|
{
|
|
9
9
|
"id": "bundle",
|
|
@@ -238,8 +238,8 @@
|
|
|
238
238
|
"packages/artifact/lib/artifact/ui/studio-shell-components.mjs",
|
|
239
239
|
"packages/artifact/lib/artifact/ui/studio-shell-mount-impl.mjs"
|
|
240
240
|
],
|
|
241
|
-
"bytes":
|
|
242
|
-
"sha256": "
|
|
241
|
+
"bytes": 27277,
|
|
242
|
+
"sha256": "81af29a6a5a15fd4f0ef41fc48e1eca63c30b3745fd1d92830ba83f7cf2ba603"
|
|
243
243
|
},
|
|
244
244
|
{
|
|
245
245
|
"path": "studio.js.sources/17-design-studio.js",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openplanr/protocol",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Canonical OpenPlanr schemas, registries, typed errors, and portable contract validation",
|
|
6
6
|
"license": "MIT",
|
|
@@ -115,6 +115,10 @@
|
|
|
115
115
|
"./sharing-security-contracts": {
|
|
116
116
|
"types": "./src/sharing-security-contracts.d.mts",
|
|
117
117
|
"import": "./src/sharing-security-contracts.mjs"
|
|
118
|
+
},
|
|
119
|
+
"./enterprise-journey-contracts": {
|
|
120
|
+
"types": "./src/enterprise-journey-contracts.d.mts",
|
|
121
|
+
"import": "./src/enterprise-journey-contracts.mjs"
|
|
118
122
|
}
|
|
119
123
|
},
|
|
120
124
|
"files": [
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openplanr/protocol",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Canonical OpenPlanr schemas, registries, typed errors, and portable contract validation",
|
|
6
6
|
"license": "MIT",
|
|
@@ -115,6 +115,10 @@
|
|
|
115
115
|
"./sharing-security-contracts": {
|
|
116
116
|
"types": "./src/sharing-security-contracts.d.mts",
|
|
117
117
|
"import": "./src/sharing-security-contracts.mjs"
|
|
118
|
+
},
|
|
119
|
+
"./enterprise-journey-contracts": {
|
|
120
|
+
"types": "./src/enterprise-journey-contracts.d.mts",
|
|
121
|
+
"import": "./src/enterprise-journey-contracts.mjs"
|
|
118
122
|
}
|
|
119
123
|
},
|
|
120
124
|
"files": [
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
"name": "OpenPlanr"
|
|
5
5
|
},
|
|
6
6
|
"metadata": {
|
|
7
|
-
"version": "3.0.
|
|
7
|
+
"version": "3.0.1",
|
|
8
8
|
"description": "Generated local OpenPlanr package."
|
|
9
9
|
},
|
|
10
10
|
"plugins": [
|
|
11
11
|
{
|
|
12
12
|
"name": "planr",
|
|
13
13
|
"source": "./openplanr",
|
|
14
|
-
"version": "3.0.
|
|
14
|
+
"version": "3.0.1",
|
|
15
15
|
"description": "Close the loop from intent to delivery. Plan, design, build, review, and operate from durable context in your repository.",
|
|
16
16
|
"strict": true
|
|
17
17
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"files": [
|
|
9
9
|
{
|
|
10
10
|
"path": ".codex-plugin/plugin.json",
|
|
11
|
-
"digest": "sha256:
|
|
11
|
+
"digest": "sha256:627d400733ee719b2d665f813f48df312fb125b9509ce231eb78eea208f73fc6"
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"path": "LICENSE",
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
114
|
"path": "runtime/design/scripts/runtime/packages/artifact/lib/artifact/ui/studio-shell.css",
|
|
115
|
-
"digest": "sha256:
|
|
115
|
+
"digest": "sha256:514295a7c32cf8359385de2cdf8369aa41ccc6b119c93daad757182099067661"
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
"path": "runtime/design/scripts/runtime/packages/artifact/templates/artifact-review-stage.js.sources.json",
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
},
|
|
153
153
|
{
|
|
154
154
|
"path": "runtime/design/scripts/runtime/packages/design/package.json",
|
|
155
|
-
"digest": "sha256:
|
|
155
|
+
"digest": "sha256:f1bd16719287e54ade15a9d4e6f889dd3385b6f1a8bf851332992533475cf3b5"
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"path": "runtime/design/scripts/runtime/packages/design/templates/studio/enhancements.css",
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
},
|
|
177
177
|
{
|
|
178
178
|
"path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources.json",
|
|
179
|
-
"digest": "sha256:
|
|
179
|
+
"digest": "sha256:fb0d23636597168f9f139c21ce9c5af63e225ad765231b1f0b7c2af2675d8cb6"
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/01-module-runtime.js",
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
},
|
|
241
241
|
{
|
|
242
242
|
"path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/16-studio-shell.js",
|
|
243
|
-
"digest": "sha256:
|
|
243
|
+
"digest": "sha256:81af29a6a5a15fd4f0ef41fc48e1eca63c30b3745fd1d92830ba83f7cf2ba603"
|
|
244
244
|
},
|
|
245
245
|
{
|
|
246
246
|
"path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/17-design-studio.js",
|
|
@@ -248,7 +248,7 @@
|
|
|
248
248
|
},
|
|
249
249
|
{
|
|
250
250
|
"path": "runtime/design/scripts/runtime/packages/protocol/package.json",
|
|
251
|
-
"digest": "sha256:
|
|
251
|
+
"digest": "sha256:ad2e601d993087146fcd4d049ddd1cf7e06f7102eb178e2c65017624a2252393"
|
|
252
252
|
},
|
|
253
253
|
{
|
|
254
254
|
"path": "runtime/design/scripts/runtime/packages/protocol/registries/artifact-theme.json",
|
|
@@ -368,7 +368,7 @@
|
|
|
368
368
|
},
|
|
369
369
|
{
|
|
370
370
|
"path": "runtime/plan/scripts/runtime/packages/protocol/package.json",
|
|
371
|
-
"digest": "sha256:
|
|
371
|
+
"digest": "sha256:ad2e601d993087146fcd4d049ddd1cf7e06f7102eb178e2c65017624a2252393"
|
|
372
372
|
},
|
|
373
373
|
{
|
|
374
374
|
"path": "runtime/plan/scripts/runtime/packages/protocol/schemas/v1.1.0/artifact-review.schema.json",
|
|
@@ -1171,5 +1171,5 @@
|
|
|
1171
1171
|
"digest": "sha256:a90f713ac4cda7fc0df0c2b40256ddba3cfa1ee8ea809705f1cf735324952022"
|
|
1172
1172
|
}
|
|
1173
1173
|
],
|
|
1174
|
-
"contentDigest": "sha256:
|
|
1174
|
+
"contentDigest": "sha256:cbc8a482b485ddbc3f62ffec1e6f6a070d4445e0633cd53c039701b73f13be8f"
|
|
1175
1175
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* generated by scripts/typescript/compile-sources.mjs from studio-shell.source.css */
|
|
2
|
-
.studio-toolbar{min-width:0;min-height:54px;gap:12px;font:400 13px / 1.4 var(--planr-font-body, "DM Sans", sans-serif);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;flex-wrap:nowrap;padding:0 16px;width:100%}.studio-toolbar .planr-brand{display:flex;align-items:center;gap:8px;min-width:0;max-width:none;flex:1}.studio-toolbar .planr-mark{display:inline-flex;flex:none;width:28px;height:28px;color:var(--planr-color-primary)}.studio-toolbar .planr-mark svg{display:block;width:100%;height:100%}.studio-toolbar .design-wordmark{font-weight:500;white-space:nowrap;font-size:13px;color:var(--planr-color-text)}.studio-toolbar .design-wordmark>span{font-weight:600;color:var(--planr-color-primary)}.studio-toolbar .planr-title-block{display:flex;align-items:center;gap:7px;min-width:0}.studio-toolbar[data-studio-react-chrome=true]{display:grid;padding-inline:16px}.studio-chrome-mount,.studio-panel-mount{display:contents}.studio-toolbar-leading,.studio-toolbar-trailing{min-width:0;display:flex;align-items:center;gap:8px}.studio-toolbar-leading{min-width:0}.studio-toolbar-trailing{justify-content:flex-end;justify-self:end;width:max-content;max-width:100%}.studio-toolbar-center{min-width:0;width:max-content;max-width:100%;justify-self:center}.studio-toolbar[data-studio-react-chrome=true] .studio-toolbar-center .planr-segment{display:inline-flex}.studio-toolbar[data-studio-center=false] .studio-toolbar-center,.studio-toolbar-center:empty,.studio-toolbar-status:empty,.studio-toolbar-actions:empty{display:none}.studio-toolbar-status,.studio-toolbar-actions{display:flex;align-items:center;min-width:0;gap:8px}.studio-toolbar-status{max-width:128px}.studio-toolbar-status>:is(output,.studio-status){display:inline-flex;align-items:center;min-width:0;max-width:none;overflow-wrap:normal}.studio-identity{min-width:0;flex:1;overflow:hidden}.studio-toolbar .planr-title-block strong{max-width:min(25vw,300px);min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-toolbar[data-studio-react-chrome=true] .studio-type-badge{display:inline-flex}.studio-subtitle,.studio-hierarchy{display:block;overflow:hidden;color:var(--planr-color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.studio-hierarchy a{color:inherit}.studio-type-badge{display:inline-flex;flex:none;align-items:center;padding:2px 5px;border:1px solid var(--planr-color-rule);border-radius:var(--planr-radius-small, 5px);color:var(--planr-color-text-muted);font:500 10px / 1.2 var(--planr-font-body);white-space:nowrap}.studio-button,.studio-menu-content,.studio-tooltip,.studio-panel-dialog,.studio-dialog{border:1px solid var(--planr-color-rule);background:var(--planr-color-panel);color:var(--planr-color-text)}.studio-button{min-height:32px;display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:var(--planr-radius-medium, 8px);padding:0 9px;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-button-ghost{background:transparent;border-color:transparent}.studio-toolbar[data-studio-react-chrome=true] :is(.studio-button,.planr-toolbar-action){height:auto;min-height:32px;padding-block:4px;white-space:nowrap}.studio-button-primary{background:var(--planr-color-primary);border-color:var(--planr-color-primary);color:var(--planr-color-background)}.studio-button:not(:disabled):hover,.studio-button[aria-pressed=true],.studio-button[aria-expanded=true]{background:var(--planr-color-raised);color:var(--planr-color-primary)}.studio-button:disabled,.studio-menu-item[data-disabled]{opacity:0.45;cursor:not-allowed}.studio-button:focus-visible,.studio-menu-item:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:2px}.studio-menu{display:inline-flex}.studio-menu-content{min-width:180px;max-width:min(320px,calc(100vw - 16px));max-height:var(--radix-dropdown-menu-content-available-height);overflow-y:auto;padding:5px;z-index:160;border-radius:var(--planr-radius-medium, 8px);box-shadow:0 12px 30px color-mix(in srgb,var(--planr-color-background) 60%,transparent)}.studio-menu-item{width:100%;min-height:34px;padding:8px 10px;display:flex;align-items:center;text-align:left;border:0;border-radius:var(--planr-radius-small, 5px);background:transparent;color:inherit;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-menu-item[data-highlighted]{background:var(--planr-color-raised);outline:none;color:var(--planr-color-primary)}.studio-menu-group-start{border-top:1px solid var(--planr-color-rule);border-radius:0}.studio-tooltip{z-index:180;padding:6px 8px;border-radius:var(--planr-radius-small, 5px);font:12px / 1.4 var(--planr-font-body)}.studio-status{min-width:0;display:inline-flex;align-items:center;gap:4px;color:var(--planr-color-text-muted);font:10px / 1.3 var(--planr-font-body)}.studio-status[data-tone=error]{color:var(--planr-color-danger)}.studio-status .studio-button{width:24px;min-height:24px;padding:0}.studio-panel-overlay{position:absolute;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-panel-dialog{position:absolute;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);z-index:180;width:min(350px,calc(100% - 32px));box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent)}.studio-panel-left{left:0}.studio-panel-right{right:0}.studio-panel-close{position:absolute;right:8px;top:8px;z-index:2;width:32px}.studio-dialog-overlay{position:fixed;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-dialog{position:fixed;z-index:180;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:var(--planr-radius-large, 12px);box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent);font:400 13px / 1.5 var(--planr-font-body)}.studio-dialog-title{margin:0 32px 12px 0;font:600 20px / 1.3 var(--planr-font-display)}.studio-dialog-description{color:var(--planr-color-text-muted)}.studio-panel-content{height:100%;min-height:0}.studio-panel-dialog .design-navigator,.studio-panel-dialog .planr-review-rail,.studio-panel-dialog .diagram-outline{position:static!important;width:100%!important;height:100%!important;max-height:100%!important;transform:none!important;overflow-y:auto;padding-top:42px;border:0}@media(max-width:680px){.studio-toolbar{gap:6px;padding-inline:8px}.studio-toolbar .planr-title-block strong{max-width:30vw}.studio-toolbar .design-wordmark{display:none}.studio-toolbar .design-button-label{display:none}.studio-toolbar .studio-status{max-width:90px}.studio-button{min-height:36px;padding-inline:8px}}.planr-shell[data-studio-framework=react]{--planr-toolbar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-shell[data-studio-framework=react] :is(.design-toolbar,.diagram-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:var(--planr-toolbar-height);height:auto;padding-block:4px;overflow:visible}.planr-shell[data-studio-framework=react] .planr-brand{display:flex;gap:8px;max-width:none;min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{max-width:100%}.planr-shell[data-studio-framework=react] .design-toolbar .design-view-picker{display:inline-flex;width:auto;height:auto;min-height:32px;margin:0;border:0}.planr-shell[data-studio-framework=react] .design-export>button{display:inline-flex;width:auto;padding:0 9px}.planr-shell[data-studio-framework=react] .studio-menu-content{position:relative}.planr-shell[data-studio-framework=react] .planr-title-block{display:flex}.planr-shell[data-studio-framework=react]>.planr-workspace{position:relative}@media(max-width:680px){.planr-shell[data-studio-framework=react] .studio-toolbar.planr-toolbar{gap:2px;padding-inline:4px}.planr-shell[data-studio-framework=react] .studio-toolbar-leading,.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:2px}.planr-shell[data-studio-framework=react] .planr-brand{overflow:hidden}.planr-shell[data-studio-framework=react] .studio-identity{display:block;overflow:hidden}.planr-shell[data-studio-framework=react] .planr-mark{width:22px;height:22px}.planr-shell[data-studio-framework=react] .design-view-picker{height:auto;min-height:44px;gap:0}.planr-shell[data-studio-framework=react] .design-view-picker button{width:44px;height:auto;padding:0}.planr-shell[data-studio-framework=react] .studio-button{min-width:44px;min-height:44px}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button span{font-size:16px}}@media(max-width:960px){.planr-shell[data-studio-framework=react] .design-wordmark{display:none}.planr-shell[data-studio-framework=react] .planr-workspace>:is(.design-navigator,.planr-review-rail){top:0;max-height:100%}}@media(max-width:1240px){.planr-shell[data-studio-framework=react] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-shell[data-studio-framework=react] .planr-title-block strong{max-width:100%;line-height:1.1}.planr-shell[data-studio-framework=react] .design-preview-state{max-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.planr-diagram-editor[data-studio-framework=react]{--de-bar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-diagram-editor[data-studio-framework=react] .de-bar{display:block;padding:0;height:auto;overflow:visible;border-bottom:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar{min-height:60px;height:auto;padding:4px 16px;border:0;border-bottom:1px solid var(--de-rule);background:var(--de-panel)}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar :is(.de-command-group,.studio-toolbar-trailing){flex:none}.planr-diagram-editor[data-studio-framework=react] .planr-brand{min-width:0;overflow:hidden}.planr-diagram-editor[data-studio-framework=react] .de-title{max-width:25vw;line-height:1.35}.planr-diagram-editor[data-studio-framework=react] .studio-subtitle .de-subtitle{line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .de-alert{grid-row:2;top:var(--de-space-3)}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .design-wordmark,.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .studio-subtitle{display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar{padding:4px 8px;gap:8px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar-trailing{gap:4px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-menu:has([data-studio-palette-menu]){display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .de-more-menu{top:calc(100% + var(--de-space-2))}[data-studio-framework=react]{position:relative}[data-studio-framework=react] .studio-toolbar .studio-type-badge{display:inline-flex}[data-studio-framework=react] .studio-identity{flex:1;min-width:0}[data-studio-framework=react] .studio-toolbar .planr-title-block strong{contain:inline-size;display:block;align-self:stretch;width:auto;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-studio-framework=react] .studio-subtitle{contain:inline-size}[data-studio-framework=react]:has(.studio-panel-dialog) [data-planr-close-feedback],[data-studio-framework=react]:has(.studio-panel-dialog) .planr-review-rail [data-planr-close-feedback]{display:none}.studio-panel-dialog .design-nav-close,.studio-panel-dialog .studio-panel-content .planr-review-rail [data-planr-close-feedback]{display:none}.studio-preserved-control{display:contents}.studio-toolbar fieldset.planr-segment{margin:0;padding:0;min-inline-size:0}.diagram-shell[data-present=true] .studio-toolbar-actions>:not([data-action=present]):not(.studio-menu){display:none}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button{color:var(--planr-color-text);background:var(--planr-color-panel)}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button:enabled:hover{background:var(--planr-color-raised)}@media(max-width:680px){.studio-panel-close{width:44px;min-height:44px}}@media(max-width:700px){.diagram-shell[data-present=true] .studio-toolbar-leading{flex:none}.diagram-shell[data-present=true] .diagram-presentation-nav{min-width:0;flex:1;gap:4px}.diagram-shell[data-present=true] .diagram-presentation-nav>div{min-width:0}}@media(min-width:681px)and (max-width:960px){.diagram-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:4px}}@media(max-width:480px){.studio-toolbar .planr-mark{display:none}}.studio-toolbar[data-studio-center=true],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-center=true]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;row-gap:4px;padding-block:4px}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-leading{grid-column:1;grid-row:1;width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-trailing{grid-column:1;grid-row:2;width:100%;flex-wrap:wrap}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-actions{justify-content:flex-end;flex-wrap:wrap;max-width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-center{grid-column:1;grid-row:3}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status{max-width:100%;width:100%;flex-basis:100%;flex-wrap:wrap;justify-content:flex-end}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status>:is(output,.studio-status,.design-preview-state){max-width:100%;white-space:normal;overflow:visible;overflow-wrap:normal}.studio-toolbar[data-studio-density=narrow]{gap:4px;padding-inline:8px}.studio-toolbar[data-studio-density=narrow] .design-wordmark,.studio-toolbar[data-studio-density=narrow] .design-button-label,.studio-toolbar[data-studio-density=narrow] .planr-mark{display:none}.studio-toolbar[data-studio-density=narrow] .studio-button,.studio-toolbar[data-studio-density=narrow] .planr-toolbar-action,.studio-toolbar[data-studio-density=narrow] .design-view-picker button{min-height:44px;min-width:44px}.studio-toolbar[data-studio-density=narrow] .design-view-picker{height:auto;gap:0}.studio-toolbar[data-studio-density=narrow] .design-view-picker button{width:44px;height:auto;padding:0}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-actions{gap:4px}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-status{font-size:10px}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button span{font-size:16px}@media(max-width:680px),(pointer:coarse){.studio-button,.studio-menu-item{min-width:44px;min-height:44px}}
|
|
2
|
+
.studio-toolbar{min-width:0;min-height:54px;gap:12px;font:400 13px / 1.4 var(--planr-font-body, "DM Sans", sans-serif);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;flex-wrap:nowrap;padding:0 16px;width:100%}.studio-toolbar .planr-brand{display:flex;align-items:center;gap:8px;min-width:0;max-width:none;flex:1}.studio-toolbar .planr-mark{display:inline-flex;flex:none;width:28px;height:28px;color:var(--planr-color-primary)}.studio-toolbar .planr-mark svg{display:block;width:100%;height:100%}.studio-toolbar .design-wordmark{font-weight:500;white-space:nowrap;font-size:13px;color:var(--planr-color-text)}.studio-toolbar .design-wordmark>span{font-weight:600;color:var(--planr-color-primary)}.studio-toolbar .planr-title-block{display:flex;align-items:center;gap:7px;min-width:0}.studio-toolbar[data-studio-react-chrome=true]{display:grid;padding-inline:16px}.studio-chrome-mount,.studio-panel-mount{display:contents}.studio-toolbar-leading,.studio-toolbar-trailing{min-width:0;display:flex;align-items:center;gap:8px}.studio-toolbar-leading{min-width:0}.studio-toolbar-trailing{justify-content:flex-end;justify-self:end;width:max-content;max-width:100%}.studio-toolbar-center{min-width:0;width:max-content;max-width:100%;justify-self:center}.studio-toolbar[data-studio-react-chrome=true] .studio-toolbar-center .planr-segment{display:inline-flex}.studio-toolbar[data-studio-center=false] .studio-toolbar-center,.studio-toolbar-center:empty,.studio-toolbar-status:empty,.studio-toolbar-actions:empty{display:none}.studio-toolbar-status,.studio-toolbar-actions{display:flex;align-items:center;min-width:0;gap:8px}.studio-toolbar-status{max-width:128px}.studio-toolbar-status>:is(output,.studio-status){display:inline-flex;align-items:center;min-width:0;max-width:none;overflow-wrap:normal}.studio-identity{min-width:0;flex:1;overflow:hidden}.studio-toolbar .planr-title-block strong{max-width:min(25vw,300px);min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-toolbar[data-studio-react-chrome=true] .studio-type-badge{display:inline-flex}.studio-subtitle,.studio-hierarchy{display:block;overflow:hidden;color:var(--planr-color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.studio-hierarchy a{color:inherit}.studio-type-badge{display:inline-flex;flex:none;align-items:center;padding:2px 5px;border:1px solid var(--planr-color-rule);border-radius:var(--planr-radius-small, 5px);color:var(--planr-color-text-muted);font:500 10px / 1.2 var(--planr-font-body);white-space:nowrap}.studio-button,.studio-menu-content,.studio-tooltip,.studio-panel-dialog,.studio-dialog{border:1px solid var(--planr-color-rule);background:var(--planr-color-panel);color:var(--planr-color-text)}.studio-button{min-height:32px;display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:var(--planr-radius-medium, 8px);padding:0 9px;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-button-ghost{background:transparent;border-color:transparent}.studio-toolbar[data-studio-react-chrome=true] :is(.studio-button,.planr-toolbar-action){height:auto;min-height:32px;padding-block:4px;white-space:nowrap}.studio-button-primary{background:var(--planr-color-primary);border-color:var(--planr-color-primary);color:var(--planr-color-background)}.studio-button:not(:disabled):hover,.studio-button[aria-pressed=true],.studio-button[aria-expanded=true]{background:var(--planr-color-raised);color:var(--planr-color-primary)}.studio-button:disabled,.studio-menu-item[data-disabled]{opacity:0.45;cursor:not-allowed}.studio-button:focus-visible,.studio-menu-item:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:2px}.studio-menu{display:inline-flex}.studio-menu-content{min-width:180px;max-width:min(320px,calc(100vw - 16px));max-height:var(--radix-dropdown-menu-content-available-height);overflow-y:auto;padding:5px;z-index:160;border-radius:var(--planr-radius-medium, 8px);box-shadow:0 12px 30px color-mix(in srgb,var(--planr-color-background) 60%,transparent)}.studio-menu-item{width:100%;min-height:34px;padding:8px 10px;display:flex;align-items:center;text-align:left;border:0;border-radius:var(--planr-radius-small, 5px);background:transparent;color:inherit;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-menu-item[data-highlighted]{background:var(--planr-color-raised);outline:none;color:var(--planr-color-primary)}.studio-menu-group-start{border-top:1px solid var(--planr-color-rule);border-radius:0}.studio-tooltip{z-index:180;padding:6px 8px;border-radius:var(--planr-radius-small, 5px);font:12px / 1.4 var(--planr-font-body)}.studio-status{min-width:0;display:inline-flex;align-items:center;gap:4px;color:var(--planr-color-text-muted);font:10px / 1.3 var(--planr-font-body)}.studio-status[data-tone=error]{color:var(--planr-color-danger)}.studio-status .studio-button{width:24px;min-height:24px;padding:0}.studio-panel-overlay{position:absolute;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-panel-dialog{position:absolute;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);z-index:180;width:min(350px,calc(100% - 32px));box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent)}.studio-panel-left{left:0}.studio-panel-right{right:0}.studio-panel-close{position:absolute;right:8px;top:8px;z-index:2;width:32px}.studio-dialog-overlay{position:fixed;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-dialog{position:fixed;z-index:180;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:var(--planr-radius-large, 12px);box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent);font:400 13px / 1.5 var(--planr-font-body)}.studio-dialog-title{margin:0 32px 12px 0;font:600 20px / 1.3 var(--planr-font-display)}.studio-dialog-description{color:var(--planr-color-text-muted)}.studio-panel-content{height:100%;min-height:0}.studio-panel-dialog .design-navigator,.studio-panel-dialog .planr-review-rail,.studio-panel-dialog .diagram-outline{position:static!important;width:100%!important;height:100%!important;max-height:100%!important;transform:none!important;overflow-y:auto;padding-top:42px;border:0}@media(max-width:680px){.studio-toolbar{gap:6px;padding-inline:8px}.studio-toolbar .planr-title-block strong{max-width:30vw}.studio-toolbar .design-wordmark{display:none}.studio-toolbar .design-button-label{display:none}.studio-toolbar .studio-status{max-width:90px}.studio-button{min-height:36px;padding-inline:8px}}.planr-shell[data-studio-framework=react]{--planr-toolbar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-shell[data-studio-framework=react] :is(.design-toolbar,.diagram-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:var(--planr-toolbar-height);height:auto;padding-block:4px;overflow:visible}.planr-shell[data-studio-framework=react] .planr-brand{display:flex;gap:8px;max-width:none;min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{max-width:100%}.planr-shell[data-studio-framework=react] .design-toolbar .design-view-picker{display:inline-flex;width:auto;height:auto;min-height:32px;margin:0;border:0}.planr-shell[data-studio-framework=react] .design-export>button{display:inline-flex;width:auto;padding:0 9px}.planr-shell[data-studio-framework=react] .studio-menu-content{position:relative}.planr-shell[data-studio-framework=react] .planr-title-block{display:flex}.planr-shell[data-studio-framework=react]>.planr-workspace{position:relative}@media(max-width:680px){.planr-shell[data-studio-framework=react] .studio-toolbar.planr-toolbar{gap:2px;padding-inline:4px}.planr-shell[data-studio-framework=react] .studio-toolbar-leading,.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:2px}.planr-shell[data-studio-framework=react] .planr-brand{overflow:hidden}.planr-shell[data-studio-framework=react] .studio-identity{display:block;overflow:hidden}.planr-shell[data-studio-framework=react] .planr-mark{width:22px;height:22px}.planr-shell[data-studio-framework=react] .design-view-picker{height:auto;min-height:44px;gap:0}.planr-shell[data-studio-framework=react] .design-view-picker button{width:44px;height:auto;padding:0}.planr-shell[data-studio-framework=react] .studio-button{min-width:44px;min-height:44px}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button span{font-size:16px}}@media(max-width:960px){.planr-shell[data-studio-framework=react] .design-wordmark{display:none}.planr-shell[data-studio-framework=react] .planr-workspace>:is(.design-navigator,.planr-review-rail){top:0;max-height:100%}}@media(max-width:1240px){.planr-shell[data-studio-framework=react] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-shell[data-studio-framework=react] .planr-title-block strong{max-width:100%;line-height:1.1}.planr-shell[data-studio-framework=react] .design-preview-state{max-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.planr-diagram-editor[data-studio-framework=react]{--de-bar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-diagram-editor[data-studio-framework=react] .de-bar{display:block;padding:0;min-height:0;height:auto;overflow:visible;border-bottom:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar{min-height:60px;height:auto;padding:4px 16px;border:0;border-bottom:1px solid var(--de-rule);background:var(--de-panel)}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar :is(.de-command-group,.studio-toolbar-trailing){flex:none}.planr-diagram-editor[data-studio-framework=react] .planr-brand{min-width:0;overflow:hidden}.planr-diagram-editor[data-studio-framework=react] .de-title{max-width:25vw;line-height:1.35}.planr-diagram-editor[data-studio-framework=react] .studio-subtitle .de-subtitle{line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .de-alert{grid-row:2;top:var(--de-space-3)}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .design-wordmark,.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .studio-subtitle{display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar{padding:4px 8px;gap:8px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar-trailing{gap:4px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-menu:has([data-studio-palette-menu]){display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .de-more-menu{top:calc(100% + var(--de-space-2))}[data-studio-framework=react]{position:relative}[data-studio-framework=react] .studio-toolbar .studio-type-badge{display:inline-flex}[data-studio-framework=react] .studio-identity{flex:1;min-width:0}[data-studio-framework=react] .studio-toolbar .planr-title-block strong{contain:inline-size;display:block;align-self:stretch;width:auto;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-studio-framework=react] .studio-subtitle{contain:inline-size}[data-studio-framework=react]:has(.studio-panel-dialog) [data-planr-close-feedback],[data-studio-framework=react]:has(.studio-panel-dialog) .planr-review-rail [data-planr-close-feedback]{display:none}.studio-panel-dialog .design-nav-close,.studio-panel-dialog .studio-panel-content .planr-review-rail [data-planr-close-feedback]{display:none}.studio-preserved-control{display:contents}.studio-toolbar fieldset.planr-segment{margin:0;padding:0;min-inline-size:0}.diagram-shell[data-present=true] .studio-toolbar-actions>:not([data-action=present]):not(.studio-menu){display:none}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button{color:var(--planr-color-text);background:var(--planr-color-panel)}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button:enabled:hover{background:var(--planr-color-raised)}@media(max-width:680px){.studio-panel-close{width:44px;min-height:44px}}@media(max-width:700px){.diagram-shell[data-present=true] .studio-toolbar-leading{flex:none}.diagram-shell[data-present=true] .diagram-presentation-nav{min-width:0;flex:1;gap:4px}.diagram-shell[data-present=true] .diagram-presentation-nav>div{min-width:0}}@media(min-width:681px)and (max-width:960px){.diagram-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:4px}}@media(max-width:480px){.studio-toolbar .planr-mark{display:none}}.studio-toolbar[data-studio-center=true],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-center=true]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;row-gap:4px;padding-block:4px}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-leading{grid-column:1;grid-row:1;width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-trailing{grid-column:1;grid-row:2;width:100%;flex-wrap:wrap}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-actions{justify-content:flex-end;flex-wrap:wrap;max-width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-center{grid-column:1;grid-row:3}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status{max-width:100%;width:100%;flex-basis:100%;flex-wrap:wrap;justify-content:flex-end}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status>:is(output,.studio-status,.design-preview-state){max-width:100%;white-space:normal;overflow:visible;overflow-wrap:normal}.studio-toolbar[data-studio-density=narrow]{gap:4px;padding-inline:8px}.studio-toolbar[data-studio-density=narrow] .design-wordmark,.studio-toolbar[data-studio-density=narrow] .design-button-label,.studio-toolbar[data-studio-density=narrow] .planr-mark{display:none}.studio-toolbar[data-studio-density=narrow] .studio-button,.studio-toolbar[data-studio-density=narrow] .planr-toolbar-action,.studio-toolbar[data-studio-density=narrow] .design-view-picker button{min-height:44px;min-width:44px}.studio-toolbar[data-studio-density=narrow] .design-view-picker{height:auto;gap:0}.studio-toolbar[data-studio-density=narrow] .design-view-picker button{width:44px;height:auto;padding:0}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-actions{gap:4px}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-status{font-size:10px}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button span{font-size:16px}@media(max-width:680px),(pointer:coarse){.studio-button,.studio-menu-item{min-width:44px;min-height:44px}}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar{grid-template-columns:minmax(0,1fr) auto auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .planr-title-block strong{max-width:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-leading{grid-column:1;grid-row:1}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-center{display:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-secondary{grid-column:3;grid-row:1;display:flex;align-items:center;gap:4px;min-width:0}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-trailing{grid-column:2;grid-row:1;width:auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .studio-toolbar-actions{flex-wrap:nowrap}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar .de-icon-button{min-width:44px;min-height:44px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar button,.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar a{border-radius:8px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar button svg,.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar a svg{width:18px;height:18px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar [data-action=outline]{background:transparent;border-color:transparent}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact]{grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding-block:0}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-leading{grid-column:1;grid-row:1;width:auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-trailing{grid-column:2;grid-row:1;flex-wrap:nowrap;width:auto}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-secondary{grid-column:1 / -1;grid-row:2;border-top:0;padding-top:0}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .de-save-state{display:inline-block;flex:1;max-width:none;overflow:visible;white-space:normal;font-size:12px;line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .planr-brand{flex:1}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .de-title{max-width:none;font-size:14px;font-weight:600;line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-type-badge{font-size:10px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact] .studio-toolbar-actions{flex-wrap:nowrap}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]){position:relative;isolation:isolate;min-width:44px;min-height:44px;padding:0;border-color:transparent;background:transparent;box-shadow:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem])::before{content:"";position:absolute;z-index:-1;inset:6px;border:1px solid transparent;border-radius:8px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]):is(:hover,[aria-expanded=true],[aria-pressed=true])::before{background:var(--de-raised);border-color:var(--de-rule)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]).de-primary:not(:disabled)::before{background:var(--de-primary);border-color:var(--de-primary)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]).de-primary:hover:not(:disabled)::before{background:var(--de-primary-hover);border-color:var(--de-primary-hover)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]).de-primary:disabled::before{background:var(--de-raised);border-color:var(--de-rule)}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]):focus-visible{outline:none}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] :is(.de-icon-button,button:has(>svg),a:has(>svg)):not([role=menuitem]):focus-visible::before{outline:2px solid var(--de-primary);outline-offset:1px}.planr-diagram-editor[data-studio-framework=react] .diagram-authoring-toolbar[data-studio-layout=compact][data-studio-density=narrow] .de-save-state{font-size:11px}
|