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

package/dist/styles/app-canvas.css

@@ -18,12 +18,12 @@
 .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;
@@ -31,25 +31,25 @@
   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: 5px;
   padding: 4px 6px;
@@ -198,7 +198,7 @@
   overflow-y: auto;
   padding: 0 8px 8px;
 }
-.povio-canvas-page-list > button {
+.povio-canvas-page-entry > button {
   display: flex;
   align-items: flex-start;
   gap: 6px;
@@ -207,7 +207,7 @@
   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;
@@ -303,6 +303,8 @@
 }
 /* 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: flex-end;
@@ -830,3 +832,412 @@
 .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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "5.0.0-rc.11",
+  "version": "5.0.0-rc.12",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",