@povio/ui 5.0.0-rc.10 → 5.0.0-rc.12

package/dist/styles/app-canvas.css

@@ -10,7 +10,7 @@
   background: #ececee;
   color: #242428;
   font:
-    12px/1.45 Inter,
+    10px/16px Inter,
     system-ui,
     sans-serif;
   isolation: isolate;
@@ -18,41 +18,41 @@
 .povio-app-canvas * {
   box-sizing: border-box;
 }
-.povio-app-canvas button,
-.povio-app-canvas select,
-.povio-app-canvas input {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)),
+.povio-app-canvas select:not(:where(.povio-canvas-workspace-select *)),
+.povio-app-canvas input:not(:where(.povio-canvas-workspace-select *)) {
   font: inherit;
 }
-.povio-app-canvas button {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)) {
   cursor: pointer;
   background: #fff;
   color: #45454d;
   border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 7px 9px;
+  border-radius: 5px;
+  padding: 4px 6px;
 }
-.povio-app-canvas button:hover {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)):hover {
   background: #f1f1f4;
 }
-.povio-app-canvas button:disabled {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)):disabled {
   opacity: 0.45;
   cursor: default;
 }
-.povio-app-canvas button:focus-visible,
-.povio-app-canvas input:focus-visible,
-.povio-app-canvas select:focus-visible {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)):focus-visible,
+.povio-app-canvas input:not(:where(.povio-canvas-workspace-select *)):focus-visible,
+.povio-app-canvas select:not(:where(.povio-canvas-workspace-select *)):focus-visible {
   outline: 2px solid var(--canvas-accent);
   outline-offset: 2px;
 }
-.povio-app-canvas button[aria-pressed="true"] {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *))[aria-pressed="true"] {
   background: #eee8ff;
   color: #6540c2;
 }
-.povio-app-canvas input,
-.povio-app-canvas select {
+.povio-app-canvas input:not(:where(.povio-canvas-workspace-select *)),
+.povio-app-canvas select:not(:where(.povio-canvas-workspace-select *)) {
   border: 1px solid var(--canvas-border);
-  border-radius: 6px;
-  padding: 7px;
+  border-radius: 5px;
+  padding: 4px 6px;
   min-width: 0;
   background: #f7f7f8;
   color: #333;
@@ -62,11 +62,11 @@
   align-items: center;
   gap: 6px;
   background: #fff;
-  padding: 10px 16px;
+  padding: 6px 12px;
   border-bottom: 1px solid var(--canvas-border);
   flex-shrink: 0;
   z-index: 5;
-  min-height: 64px;
+  min-height: 40px;
 }
 .povio-canvas-brand {
   display: flex;
@@ -77,14 +77,14 @@
 }
 .povio-canvas-brand strong {
   display: block;
-  font-size: 13px;
-  font-weight: 650;
+  font-size: 10px;
+  font-weight: 600;
 }
 .povio-canvas-brand small {
   display: block;
   color: #73737c;
   font-size: 10px;
-  margin-top: 2px;
+  margin-top: 0;
 }
 .povio-canvas-brand small span {
   padding: 0 5px;
@@ -93,11 +93,11 @@
 .povio-canvas-logo {
   display: grid;
   place-items: center;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   background: #252329;
   color: #fff;
-  border-radius: 9px;
+  border-radius: 6px;
 }
 .povio-canvas-breakpoint {
   display: flex;
@@ -114,13 +114,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 7px;
-  min-height: 34px;
+  gap: 4px;
+  min-height: 24px;
 }
 .povio-canvas-toolbar .povio-canvas-configure {
   background: var(--canvas-accent);
   color: white;
-  padding-inline: 13px;
+  padding-inline: 8px;
 }
 .povio-canvas-toolbar .povio-canvas-configure:hover {
   background: #6545c4;
@@ -131,7 +131,7 @@
   gap: 6px;
   color: #77717e;
   font-size: 10px;
-  padding-left: 10px;
+  padding-left: 8px;
   white-space: nowrap;
 }
 .povio-canvas-ready i,
@@ -149,8 +149,8 @@
   min-height: 0;
 }
 .povio-canvas-catalog {
-  width: 232px;
-  flex: 0 0 232px;
+  width: 240px;
+  flex: 0 0 240px;
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -165,9 +165,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 17px 16px;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--canvas-border);
-  min-height: 52px;
+  min-height: 40px;
 }
 .povio-canvas-panel-heading > span {
   font-size: 10px;
@@ -179,35 +179,35 @@
 .povio-canvas-search {
   display: flex;
   align-items: center;
-  gap: 7px;
-  margin: 14px 12px;
+  gap: 6px;
+  margin: 0 8px 8px;
   padding: 0 8px;
   background: #f6f6f8;
   color: #88838e;
-  border-radius: 6px;
+  border-radius: 5px;
 }
 .povio-canvas-search input {
   width: 100%;
   background: transparent;
   border: 0;
-  padding: 8px 0;
-  font-size: 11px;
+  padding: 4px 0;
+  font-size: 10px;
 }
 .povio-canvas-page-list {
   flex: 1;
   overflow-y: auto;
-  padding: 0 8px 12px;
+  padding: 0 8px 8px;
 }
-.povio-canvas-page-list > button {
+.povio-canvas-page-entry > button {
   display: flex;
   align-items: flex-start;
-  gap: 9px;
+  gap: 6px;
   width: 100%;
   text-align: left;
-  margin-bottom: 3px;
-  padding: 10px 8px;
+  margin-bottom: 1px;
+  padding: 4px 8px;
 }
-.povio-canvas-page-list > button > svg {
+.povio-canvas-page-entry > button > svg {
   flex-shrink: 0;
   margin-top: 2px;
   color: #8d859b;
@@ -216,10 +216,10 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  gap: 2px;
+  gap: 0;
 }
 .povio-canvas-page-label strong {
-  font-weight: 550;
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -231,13 +231,13 @@
 }
 .povio-canvas-page-label small:last-child {
   color: #76727f;
-  font-size: 9px;
+  font-size: 10px;
 }
 .povio-canvas-catalog-footer {
   border-top: 1px solid var(--canvas-border);
-  padding: 14px 16px;
+  padding: 8px 12px;
   color: #5a5963;
-  font-size: 11px;
+  font-size: 10px;
 }
 .povio-canvas-catalog-footer .povio-canvas-live-dot {
   margin-right: 6px;
@@ -246,25 +246,25 @@
   display: block;
   color: #76727f;
   font-size: 10px;
-  padding-left: 13px;
-  margin-top: 3px;
+  padding-left: 12px;
+  margin-top: 0;
 }
 
 .povio-canvas-connections {
   display: grid;
-  gap: 8px;
-  padding: 18px 16px;
+  gap: 6px;
+  padding: 12px;
 }
 .povio-canvas-connections label {
   display: grid;
-  gap: 12px;
-  font-size: 11px;
+  gap: 6px;
+  font-size: 10px;
   font-weight: 600;
 }
 .povio-canvas-connections button {
   text-align: left;
   background: #f6f6f8;
-  font-size: 11px;
+  font-size: 10px;
   overflow-wrap: anywhere;
 }
 .povio-canvas-connections select {
@@ -292,29 +292,53 @@
 }
 .povio-canvas-node {
   position: absolute;
-  box-shadow: 0 2px 8px #24202d16;
+}
+.povio-canvas-node > :is(.povio-canvas-frame, .povio-canvas-unresolved) {
+  box-shadow: 0 1px 4px #24202d16;
   background: #fff;
 }
-.povio-canvas-node.is-selected {
-  outline: 3px solid var(--canvas-accent);
-  outline-offset: 2px;
+.povio-canvas-node.is-selected > :is(.povio-canvas-frame, .povio-canvas-unresolved) {
+  outline: calc(2px / var(--canvas-zoom, 1)) solid var(--canvas-accent);
+  outline-offset: 0;
 }
+/* The header keeps its 48px slot in world space; its label divides by the zoom to stay 10px on screen. */
 .povio-canvas-node-header {
+  user-select: none;
+  -webkit-user-select: none;
   position: relative;
   display: flex;
-  align-items: center;
-  gap: 16px;
+  align-items: flex-end;
+  gap: calc(8px / var(--canvas-zoom, 1));
   height: 48px;
-  padding: 6px 12px;
-  background: #fafafa;
-  border-bottom: 1px solid #eee;
+  padding: 0 0 calc(4px / var(--canvas-zoom, 1));
+  color: #77717e;
   cursor: move;
-  font-size: 16px;
+  font-size: calc(10px / var(--canvas-zoom, 1));
+  line-height: 1.2;
+  white-space: nowrap;
+}
+.povio-canvas-node-header > strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+.povio-canvas-node.is-selected .povio-canvas-node-header > strong {
+  color: var(--canvas-accent);
 }
 .povio-canvas-node-header > span {
-  color: #76727f;
+  color: #9a96a3;
   margin-left: auto;
 }
+.povio-app-canvas .povio-canvas-node-header > button {
+  padding: 0 calc(2px / var(--canvas-zoom, 1));
+  border-radius: calc(3px / var(--canvas-zoom, 1));
+  background: transparent;
+  color: inherit;
+  line-height: inherit;
+}
+.povio-app-canvas .povio-canvas-node-header > button:hover {
+  background: #e3e1e8;
+}
 .povio-canvas-frame {
   display: block;
   border: 0;
@@ -352,61 +376,63 @@
 .povio-canvas-camera,
 .povio-canvas-tool-dock {
   position: absolute;
-  bottom: 16px;
+  bottom: 12px;
   display: flex;
   align-items: center;
-  gap: 3px;
-  padding: 5px;
+  gap: 2px;
+  padding: 4px;
   background: #fff;
   border: 1px solid #e3e1e8;
-  border-radius: 10px;
+  border-radius: 8px;
   cursor: default;
   box-shadow: 0 4px 16px #24202d12;
   z-index: 2;
 }
 .povio-canvas-camera {
-  right: 16px;
+  right: 12px;
 }
 .povio-canvas-tool-dock {
-  left: 16px;
+  left: 12px;
 }
+.povio-canvas-camera button,
 .povio-canvas-tool-dock button {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 11px;
+  gap: 4px;
+  min-height: 24px;
+  font-size: 10px;
 }
 .povio-canvas-dock-divider {
   width: 1px;
-  height: 20px;
+  height: 16px;
   background: var(--canvas-border);
-  margin: 0 3px;
+  margin: 0 2px;
 }
 .povio-canvas-camera output {
-  min-width: 44px;
+  min-width: 36px;
   text-align: center;
-  font-size: 11px;
+  font-size: 10px;
   font-variant-numeric: tabular-nums;
 }
 .povio-canvas-unresolved {
-  padding: 24px;
+  padding: 12px;
   min-height: 200px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 .povio-canvas-unresolved label {
   display: grid;
-  gap: 6px;
+  gap: 4px;
 }
 .povio-canvas-page-note {
   background: #fff4d6;
   color: #6b501a;
-  padding: 10px;
-  font-size: 14px;
+  padding: 4px 8px;
+  font-size: 10px;
 }
 .povio-canvas-notice {
-  padding: 8px 12px;
+  padding: 4px 12px;
   display: flex;
   justify-content: space-between;
   background: #fff4d6;
@@ -523,7 +549,7 @@
   .povio-canvas-camera .povio-canvas-breakpoint select {
     width: 135px;
     padding-inline: 3px;
-    font-size: 11px;
+    font-size: 10px;
   }
   .povio-canvas-camera .povio-canvas-breakpoint > svg {
     display: none;
@@ -534,18 +560,18 @@
 }
 
 .povio-app-canvas .povio-canvas-inspector {
-  flex: 0 0 320px;
-  width: 320px;
+  flex: 0 0 272px;
+  width: 272px;
   border-radius: 0;
   border: 0;
   border-left: 1px solid var(--canvas-border);
   z-index: 4;
 }
 .povio-canvas-inspect-hint {
-  margin: 12px;
+  margin: 8px 12px;
   color: #77717e;
-  font-size: 11px;
-  line-height: 1.6;
+  font-size: 10px;
+  line-height: 16px;
 }
 .povio-canvas-inspection-overlay {
   position: absolute;
@@ -569,7 +595,7 @@
     top: 0;
     bottom: 76px;
     height: auto;
-    width: min(320px, 80%);
+    width: min(272px, 80%);
     box-shadow: -6px 0 24px #24202d16;
   }
 }
@@ -578,7 +604,7 @@
     top: auto;
     bottom: 124px;
     max-height: 48%;
-    width: min(300px, 78%);
+    width: min(272px, 78%);
     border: 1px solid var(--canvas-border);
     border-radius: 8px;
   }
@@ -587,26 +613,28 @@
 .povio-canvas-catalog > .povio-canvas-brand {
   min-width: 0;
   margin: 0;
-  padding: 17px 16px 4px;
-  gap: 8px;
+  padding: 12px 12px 4px;
+  gap: 6px;
 }
 .povio-canvas-page-count {
   color: #76727f;
-  font-size: 11px;
+  font-size: 10px;
+  line-height: 14px;
   background: #f1f1f4;
-  padding: 1px 6px;
+  padding: 0 4px;
   border-radius: 4px;
 }
 .povio-canvas-sidebar-actions {
   display: flex;
   align-items: center;
-  padding: 10px 8px;
+  padding: 4px 8px;
+  min-height: 40px;
   gap: 2px;
   border-top: 1px solid var(--canvas-border);
 }
 .povio-canvas-sidebar-actions button {
   display: inline-flex;
-  padding: 7px;
+  padding: 5px;
 }
 .povio-canvas-sidebar-actions .povio-canvas-ready {
   display: flex;
@@ -625,15 +653,17 @@
 }
 .povio-canvas-layers {
   border-top: 1px solid var(--canvas-border);
-  margin-top: 12px;
-  padding-top: 8px;
+  margin-top: 8px;
+  padding-top: 4px;
 }
 .povio-canvas-layers > header {
   display: flex;
   align-items: center;
-  gap: 7px;
-  padding: 6px 8px 12px;
-  font-size: 11px;
+  gap: 6px;
+  padding: 4px 8px;
+  min-height: 28px;
+  font-size: 10px;
+  font-weight: 600;
 }
 .povio-canvas-layers > header > span {
   color: #77717e;
@@ -647,7 +677,7 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  min-height: 28px;
+  min-height: 24px;
   border-radius: 4px;
 }
 [role="treeitem"][aria-selected="true"] > .povio-canvas-layer-row {
@@ -655,15 +685,15 @@
   color: #6540c2;
 }
 .povio-canvas-layer-row .povio-canvas-layer-toggle {
-  flex: 0 0 18px;
-  width: 18px;
-  padding: 3px;
+  flex: 0 0 16px;
+  width: 16px;
+  padding: 2px;
   display: grid;
   place-items: center;
   background: transparent;
 }
 .povio-canvas-layer-spacer {
-  flex: 0 0 18px;
+  flex: 0 0 16px;
 }
 .povio-canvas-layer-row .povio-canvas-layer-select {
   display: flex;
@@ -672,7 +702,7 @@
   flex: 1;
   min-width: 0;
   text-align: left;
-  padding: 5px 3px;
+  padding: 4px 2px;
   background: transparent;
   font-size: 10px;
 }
@@ -687,13 +717,13 @@
   white-space: nowrap;
 }
 .povio-canvas-layers > p {
-  padding: 8px;
+  padding: 4px 8px;
   color: #77717e;
-  font-size: 11px;
+  font-size: 10px;
 }
 .povio-canvas-more-layers {
-  margin: 8px;
-  font-size: 11px;
+  margin: 4px 8px;
+  font-size: 10px;
 }
 @media (max-width: 900px) {
   .povio-canvas-viewport > .povio-canvas-mobile-tools {
@@ -738,3 +768,476 @@
   height: 100dvh;
   background: #eeeef0;
 }
+
+/* Chrome icons follow the 10px type: 12px beside a label, 14px in icon-only controls. */
+.povio-app-canvas svg.lucide:not(.povio-canvas-world *, .studio-inspector-canvas *) {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.povio-app-canvas
+  :is(
+    .povio-canvas-file-action,
+    .povio-canvas-theme-toggle,
+    .povio-canvas-configure,
+    .povio-canvas-mode-switch > button,
+    .povio-canvas-tool-dock > button,
+    .povio-canvas-panel-close,
+    .povio-canvas-mobile-tools > button
+  )
+  > svg.lucide {
+  width: 14px;
+  height: 14px;
+}
+
+/* Pages | Components: what the canvas shows, as underlined tabs like the configurator's sub-tabs. */
+.povio-canvas-catalog > .povio-canvas-content-switch {
+  gap: 12px;
+  margin: 0 12px 8px;
+  padding: 8px 0 0;
+  border-bottom: 1px solid var(--canvas-border);
+}
+.povio-app-canvas .povio-canvas-content-switch > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: -1px;
+  padding: 4px 0 6px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: #77717e;
+  font-weight: 500;
+}
+.povio-app-canvas .povio-canvas-content-switch > button:hover {
+  background: transparent;
+  color: #242428;
+}
+.povio-app-canvas .povio-canvas-content-switch > button[aria-pressed="true"] {
+  border-bottom-color: #242428;
+  background: transparent;
+  color: #242428;
+  font-weight: 600;
+}
+.povio-canvas-content-switch .povio-canvas-page-count {
+  font-weight: 500;
+}
+/* A Components artboard's own document: one gallery section on the page background. */
+.povio-canvas-components-frame.studio-sample {
+  padding: 32px;
+  border-radius: 0;
+}
+/* The footer stays at the sidebar's bottom when the list is short. */
+.povio-canvas-catalog > .povio-canvas-sidebar-actions {
+  margin-top: auto;
+}
+
+.povio-canvas-workspaces {
+  margin: 0;
+  border: 0;
+  padding: 12px 10px;
+  border-bottom: 1px solid var(--canvas-border);
+  min-width: 0;
+}
+.povio-canvas-workspace-picker,
+.povio-canvas-workspace-actions {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.povio-canvas-workspace-select {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+}
+.povio-canvas-workspace-picker > button {
+  display: grid;
+  place-items: center;
+  padding: 6px;
+}
+.povio-canvas-workspace-actions {
+  margin-top: 8px;
+}
+.povio-canvas-workspace-actions > button:first-child {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+}
+.povio-canvas-workspace-actions span {
+  color: #77717e;
+}
+.povio-canvas-storage-status {
+  padding: 0 12px 12px;
+  font-size: 10px;
+  color: #77717e;
+  overflow-wrap: anywhere;
+}
+.povio-canvas-storage-status p {
+  color: #9a461b;
+  margin: 6px 0;
+}
+.povio-canvas-storage-status button {
+  font-size: 10px;
+  border-color: var(--canvas-border);
+}
+.povio-canvas-inline-layers {
+  position: relative;
+  margin: 4px 0 12px 12px;
+  border-left: 1px solid var(--canvas-border);
+}
+.povio-canvas-inline-layers .povio-canvas-layers {
+  margin: 0;
+  border: 0;
+  padding-top: 0;
+}
+.povio-canvas-inline-layers .povio-canvas-layers > header {
+  padding-right: 28px;
+}
+.povio-canvas-inline-layers .povio-canvas-layers-close {
+  position: absolute;
+  top: 3px;
+  right: 0;
+  padding: 3px;
+  display: grid;
+  place-items: center;
+}
+.povio-canvas-empty {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  max-width: 320px;
+  color: #77717e;
+  text-align: center;
+  font-size: 13px;
+}
+
+.povio-canvas-save-theme {
+  margin-top: 6px;
+}
+.povio-canvas-save-theme > button {
+  width: 100%;
+}
+.povio-canvas-save-theme > p {
+  margin: 6px 0 0;
+  overflow-wrap: anywhere;
+}
+
+/* Keep the workspace input aligned with the compact canvas controls. */
+.povio-canvas-workspace-select .povio-canvas-workspace-input {
+  border: 1px solid var(--canvas-border);
+  border-radius: 6px;
+  min-height: 30px;
+  height: 30px;
+  font:
+    500 11px/1.4 Inter,
+    system-ui,
+    sans-serif;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > div {
+  padding: 0 8px;
+  font: inherit;
+  min-width: 0;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input button {
+  color: inherit;
+  font: inherit;
+  background: transparent;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input[data-focused] {
+  border-color: var(--canvas-accent);
+}
+
+.povio-canvas-camera .povio-canvas-breakpoint {
+  flex: 0 1 155px;
+  width: 155px;
+  min-width: 120px;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > div {
+  gap: 6px;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > button {
+  flex: 0 0 24px;
+  width: 24px;
+  padding: 0 4px;
+  justify-content: center;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > button > span {
+  width: 16px;
+  height: 16px;
+}
+.povio-canvas-breakpoint .povio-canvas-workspace-input > div > div {
+  margin-left: 0;
+}
+.povio-canvas-camera .povio-canvas-breakpoint {
+  flex-shrink: 0;
+  width: 160px;
+}
+
+.povio-canvas-workspaces {
+  padding: 8px;
+}
+.povio-canvas-workspace-picker .povio-canvas-workspace-input {
+  height: 24px;
+  min-height: 24px;
+  font-size: 10px;
+}
+.povio-canvas-workspace-picker > button {
+  padding: 4px;
+}
+.povio-canvas-workspace-actions {
+  margin-top: 4px;
+}
+.povio-canvas-workspace-actions > button:first-child {
+  font-size: 10px;
+}
+.povio-canvas-workspaces {
+  padding: 6px 8px;
+}
+.povio-canvas-workspace-actions {
+  margin-top: 2px;
+  gap: 2px;
+}
+.povio-canvas-workspace-actions > button {
+  min-height: 20px;
+  padding: 3px 4px;
+  line-height: 1.2;
+}
+.povio-canvas-workspace-picker > button {
+  padding: 4px;
+}
+
+.povio-canvas-workspace-picker .povio-canvas-workspace-input {
+  height: 22px;
+  min-height: 22px;
+}
+
+.povio-canvas-workspace-popover {
+  width: 240px;
+  max-width: calc(100vw - 16px);
+  padding: 10px;
+  background: #fff;
+  color: #45454d;
+  border: 1px solid #e8e8eb;
+  border-radius: 8px;
+  box-shadow: 0 6px 24px #24202d20;
+  font:
+    11px/1.4 Inter,
+    system-ui,
+    sans-serif;
+  z-index: 10000;
+}
+.povio-canvas-workspace-popover [role="dialog"],
+.povio-canvas-workspace-popover [role="alertdialog"] {
+  outline: none;
+}
+.povio-canvas-workspace-popover label {
+  display: grid;
+  gap: 5px;
+}
+.povio-canvas-workspace-popover input {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 5px 7px;
+  border: 1px solid #e8e8eb;
+  border-radius: 5px;
+  background: #fafafa;
+  color: inherit;
+  font: inherit;
+}
+.povio-canvas-workspace-popover-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 8px;
+}
+.povio-canvas-workspace-popover button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid #e8e8eb;
+  border-radius: 5px;
+  padding: 4px 7px;
+  background: #fff;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.povio-canvas-workspace-popover button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.povio-canvas-workspace-popover .povio-canvas-workspace-delete {
+  margin-right: auto;
+  padding-left: 0;
+  border: 0;
+  color: #b52c39;
+}
+.povio-canvas-workspace-popover .is-primary {
+  background: #7650cc;
+  color: white;
+  border-color: #7650cc;
+}
+.povio-canvas-workspace-popover .is-danger {
+  background: #b52c39;
+  color: white;
+  border-color: #b52c39;
+}
+.povio-canvas-workspace-popover :focus-visible {
+  outline: 2px solid #7650cc;
+  outline-offset: 1px;
+}
+/* Reserve room for the 2px focus outline plus its 2px offset. */
+.povio-canvas-workspace-picker {
+  gap: 6px;
+  padding-bottom: 4px;
+}
+.povio-canvas-workspace-actions {
+  gap: 6px;
+}
+.povio-canvas-workspace-popover {
+  width: 260px;
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
+}
+.povio-canvas-workspace-popover-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.povio-canvas-workspace-popover-heading h2 {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+}
+.povio-canvas-workspace-popover-heading button {
+  padding: 2px;
+  border: 0;
+}
+.povio-canvas-popover-pages {
+  margin-top: 8px;
+}
+.povio-canvas-popover-page-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.povio-canvas-popover-page-tools > span {
+  margin-right: auto;
+  color: #77717e;
+}
+.povio-canvas-popover-page-tools button {
+  border: 0;
+  padding: 2px;
+  font-size: 10px;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.povio-canvas-popover-search svg {
+  position: absolute;
+  left: 7px;
+  color: #77717e;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-search input {
+  padding-left: 24px;
+}
+.povio-canvas-popover-page-list {
+  max-height: min(200px, 35dvh);
+  overflow: auto;
+  padding: 4px 3px;
+  margin: 3px -3px 0;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-page-list label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 2px;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-page-list input {
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin: 0;
+  flex-shrink: 0;
+  accent-color: #7650cc;
+}
+.povio-canvas-popover-page-list label span {
+  overflow-wrap: anywhere;
+}
+
+.povio-canvas-page-entry > button {
+  margin-bottom: 6px;
+}
+.povio-canvas-page-list {
+  padding: 4px 8px 8px;
+}
+.povio-canvas-search:has(input:focus-visible) {
+  outline: 2px solid var(--canvas-accent);
+  outline-offset: 2px;
+}
+.povio-app-canvas .povio-canvas-search input:focus-visible {
+  outline: none;
+}
+.povio-canvas-layer-row {
+  margin: 4px;
+}
+.povio-canvas-layer-row:has(> button:focus-visible) {
+  outline: 2px solid var(--canvas-accent);
+  outline-offset: 2px;
+}
+.povio-app-canvas .povio-canvas-layer-row > button:focus-visible {
+  outline: none;
+}
+.povio-canvas-page-list {
+  scroll-padding-block: 4px;
+}
+.povio-canvas-page-entry > button,
+.povio-canvas-layer-row > button {
+  scroll-margin-block: 4px;
+}
+.povio-canvas-layer-row {
+  min-height: 20px;
+  margin: 1px 4px;
+}
+.povio-canvas-layer-row:has(> button:focus-visible) {
+  outline-offset: -1px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-select {
+  height: 20px;
+  min-height: 0;
+  padding: 1px 2px;
+  line-height: 16px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-toggle {
+  height: 18px;
+  min-height: 0;
+  padding: 1px;
+}
+.povio-canvas-layer-row {
+  height: 22px;
+  min-height: 22px;
+  margin: 0 4px;
+  font-size: 10px;
+}
+.povio-canvas-layer-row:has(> button:focus-visible) {
+  outline-offset: -2px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-select {
+  height: 22px;
+  font-size: 10px;
+}
+.povio-canvas-layer-highlight {
+  z-index: 4;
+}
+.povio-canvas-layer-highlight .studio-hover-outline {
+  background: #7655d71a;
+}