@povio/ui 4.0.3 → 5.0.0-rc.10

package/dist/styles/app-canvas.css

@@ -0,0 +1,740 @@
+@import "./configurator.css";
+
+.povio-app-canvas {
+  --canvas-accent: #7655d7;
+  --canvas-border: #e8e8eb;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #ececee;
+  color: #242428;
+  font:
+    12px/1.45 Inter,
+    system-ui,
+    sans-serif;
+  isolation: isolate;
+}
+.povio-app-canvas * {
+  box-sizing: border-box;
+}
+.povio-app-canvas button,
+.povio-app-canvas select,
+.povio-app-canvas input {
+  font: inherit;
+}
+.povio-app-canvas button {
+  cursor: pointer;
+  background: #fff;
+  color: #45454d;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 7px 9px;
+}
+.povio-app-canvas button:hover {
+  background: #f1f1f4;
+}
+.povio-app-canvas button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.povio-app-canvas button:focus-visible,
+.povio-app-canvas input:focus-visible,
+.povio-app-canvas select:focus-visible {
+  outline: 2px solid var(--canvas-accent);
+  outline-offset: 2px;
+}
+.povio-app-canvas button[aria-pressed="true"] {
+  background: #eee8ff;
+  color: #6540c2;
+}
+.povio-app-canvas input,
+.povio-app-canvas select {
+  border: 1px solid var(--canvas-border);
+  border-radius: 6px;
+  padding: 7px;
+  min-width: 0;
+  background: #f7f7f8;
+  color: #333;
+}
+.povio-canvas-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #fff;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--canvas-border);
+  flex-shrink: 0;
+  z-index: 5;
+  min-height: 64px;
+}
+.povio-canvas-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 212px;
+  margin-right: auto;
+}
+.povio-canvas-brand strong {
+  display: block;
+  font-size: 13px;
+  font-weight: 650;
+}
+.povio-canvas-brand small {
+  display: block;
+  color: #73737c;
+  font-size: 10px;
+  margin-top: 2px;
+}
+.povio-canvas-brand small span {
+  padding: 0 5px;
+  color: #bbb;
+}
+.povio-canvas-logo {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  background: #252329;
+  color: #fff;
+  border-radius: 9px;
+}
+.povio-canvas-breakpoint {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #77717e;
+  margin-right: 3px;
+}
+.povio-canvas-breakpoint select {
+  background: transparent;
+  border-color: transparent;
+}
+.povio-canvas-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 34px;
+}
+.povio-canvas-toolbar .povio-canvas-configure {
+  background: var(--canvas-accent);
+  color: white;
+  padding-inline: 13px;
+}
+.povio-canvas-toolbar .povio-canvas-configure:hover {
+  background: #6545c4;
+}
+.povio-canvas-ready {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #77717e;
+  font-size: 10px;
+  padding-left: 10px;
+  white-space: nowrap;
+}
+.povio-canvas-ready i,
+.povio-canvas-live-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #419273;
+}
+.povio-canvas-body {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.povio-canvas-catalog {
+  width: 232px;
+  flex: 0 0 232px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  z-index: 4;
+}
+.povio-canvas-catalog {
+  border-right: 1px solid var(--canvas-border);
+}
+
+.povio-canvas-panel-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 17px 16px;
+  border-bottom: 1px solid var(--canvas-border);
+  min-height: 52px;
+}
+.povio-canvas-panel-heading > span {
+  font-size: 10px;
+  color: #767680;
+  background: #f3f3f5;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.povio-canvas-search {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 14px 12px;
+  padding: 0 8px;
+  background: #f6f6f8;
+  color: #88838e;
+  border-radius: 6px;
+}
+.povio-canvas-search input {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  padding: 8px 0;
+  font-size: 11px;
+}
+.povio-canvas-page-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 8px 12px;
+}
+.povio-canvas-page-list > button {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 3px;
+  padding: 10px 8px;
+}
+.povio-canvas-page-list > button > svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: #8d859b;
+}
+.povio-canvas-page-label {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 2px;
+}
+.povio-canvas-page-label strong {
+  font-weight: 550;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.povio-canvas-page-label small {
+  color: #76727f;
+  font-size: 10px;
+  overflow-wrap: anywhere;
+}
+.povio-canvas-page-label small:last-child {
+  color: #76727f;
+  font-size: 9px;
+}
+.povio-canvas-catalog-footer {
+  border-top: 1px solid var(--canvas-border);
+  padding: 14px 16px;
+  color: #5a5963;
+  font-size: 11px;
+}
+.povio-canvas-catalog-footer .povio-canvas-live-dot {
+  margin-right: 6px;
+}
+.povio-canvas-catalog-footer small {
+  display: block;
+  color: #76727f;
+  font-size: 10px;
+  padding-left: 13px;
+  margin-top: 3px;
+}
+
+.povio-canvas-connections {
+  display: grid;
+  gap: 8px;
+  padding: 18px 16px;
+}
+.povio-canvas-connections label {
+  display: grid;
+  gap: 12px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.povio-canvas-connections button {
+  text-align: left;
+  background: #f6f6f8;
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.povio-canvas-connections select {
+  width: 100%;
+  font-weight: 400;
+}
+
+.povio-canvas-viewport {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  touch-action: none;
+  background-color: #eeeef0;
+  background-image: radial-gradient(#d5d3da 0.7px, transparent 0.7px);
+  background-size: 20px 20px;
+  cursor: grab;
+}
+.povio-canvas-world {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+.povio-canvas-node {
+  position: absolute;
+  box-shadow: 0 2px 8px #24202d16;
+  background: #fff;
+}
+.povio-canvas-node.is-selected {
+  outline: 3px solid var(--canvas-accent);
+  outline-offset: 2px;
+}
+.povio-canvas-node-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 48px;
+  padding: 6px 12px;
+  background: #fafafa;
+  border-bottom: 1px solid #eee;
+  cursor: move;
+  font-size: 16px;
+}
+.povio-canvas-node-header > span {
+  color: #76727f;
+  margin-left: auto;
+}
+.povio-canvas-frame {
+  display: block;
+  border: 0;
+  background: #fff;
+}
+.povio-app-canvas .povio-canvas-frame-cover,
+.povio-app-canvas .povio-canvas-frame-cover:hover {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: grab;
+  position: absolute;
+  top: 48px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.povio-canvas-edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+.povio-canvas-edges path {
+  fill: none;
+  stroke: #bdb5cc;
+  stroke-width: 2;
+}
+.povio-canvas-edges path.is-selected {
+  stroke: var(--canvas-accent);
+  stroke-width: 3;
+}
+.povio-canvas-camera,
+.povio-canvas-tool-dock {
+  position: absolute;
+  bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 5px;
+  background: #fff;
+  border: 1px solid #e3e1e8;
+  border-radius: 10px;
+  cursor: default;
+  box-shadow: 0 4px 16px #24202d12;
+  z-index: 2;
+}
+.povio-canvas-camera {
+  right: 16px;
+}
+.povio-canvas-tool-dock {
+  left: 16px;
+}
+.povio-canvas-tool-dock button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+}
+.povio-canvas-dock-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--canvas-border);
+  margin: 0 3px;
+}
+.povio-canvas-camera output {
+  min-width: 44px;
+  text-align: center;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.povio-canvas-unresolved {
+  padding: 24px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.povio-canvas-unresolved label {
+  display: grid;
+  gap: 6px;
+}
+.povio-canvas-page-note {
+  background: #fff4d6;
+  color: #6b501a;
+  padding: 10px;
+  font-size: 14px;
+}
+.povio-canvas-notice {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  background: #fff4d6;
+}
+.povio-canvas-mobile-tools,
+.povio-app-canvas .povio-canvas-panel-close {
+  display: none;
+}
+@media (max-width: 1100px) {
+  .povio-canvas-ready {
+    display: none;
+  }
+  .povio-canvas-catalog {
+    width: 200px;
+    flex-basis: 200px;
+  }
+  .povio-canvas-brand {
+    min-width: 180px;
+  }
+  .povio-canvas-tool-dock span:not(.povio-canvas-dock-divider) {
+    display: none;
+  }
+}
+@media (max-width: 900px) {
+  .povio-canvas-toolbar {
+    flex-wrap: wrap;
+    gap: 5px;
+    padding: 10px;
+  }
+  .povio-canvas-brand {
+    flex: 1;
+    min-width: 160px;
+  }
+  .povio-canvas-mobile-tools {
+    display: flex;
+  }
+  .povio-canvas-toolbar .povio-canvas-configure {
+    order: 2;
+  }
+  .povio-canvas-file-action,
+  .povio-canvas-theme-toggle {
+    order: 3;
+  }
+  .povio-canvas-catalog {
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: min(280px, 85%);
+    box-shadow: 0 8px 30px #24202d20;
+  }
+  .povio-canvas-catalog {
+    left: 0;
+  }
+
+  .povio-app-canvas[data-mobile-panel="pages"] .povio-canvas-catalog {
+    display: flex;
+  }
+  .povio-app-canvas .povio-canvas-panel-close {
+    display: inline-flex;
+    margin-left: auto;
+    padding: 3px;
+  }
+  .povio-canvas-camera {
+    right: 10px;
+    bottom: 12px;
+  }
+  .povio-canvas-tool-dock {
+    left: 10px;
+    bottom: 12px;
+  }
+}
+.povio-canvas-mobile-files {
+  display: none;
+}
+@media (max-width: 900px) {
+  .povio-canvas-toolbar .povio-canvas-file-action {
+    display: none;
+  }
+  .povio-canvas-mobile-files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 12px;
+  }
+  .povio-canvas-mobile-files button {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 10px;
+    background: #f5f5f7;
+  }
+}
+.povio-canvas-camera button {
+  white-space: nowrap;
+  touch-action: manipulation;
+}
+.povio-canvas-camera .povio-canvas-zoom-reset {
+  padding-inline: 0;
+}
+.povio-canvas-zoom-reset output {
+  display: block;
+  pointer-events: none;
+}
+
+@media (max-width: 600px) {
+  .povio-canvas-camera {
+    max-width: calc(100% - 20px);
+    gap: 1px;
+  }
+  .povio-canvas-camera .povio-canvas-breakpoint {
+    min-width: 0;
+  }
+  .povio-canvas-camera .povio-canvas-breakpoint select {
+    width: 135px;
+    padding-inline: 3px;
+    font-size: 11px;
+  }
+  .povio-canvas-camera .povio-canvas-breakpoint > svg {
+    display: none;
+  }
+  .povio-canvas-tool-dock {
+    bottom: 70px;
+  }
+}
+
+.povio-app-canvas .povio-canvas-inspector {
+  flex: 0 0 320px;
+  width: 320px;
+  border-radius: 0;
+  border: 0;
+  border-left: 1px solid var(--canvas-border);
+  z-index: 4;
+}
+.povio-canvas-inspect-hint {
+  margin: 12px;
+  color: #77717e;
+  font-size: 11px;
+  line-height: 1.6;
+}
+.povio-canvas-inspection-overlay {
+  position: absolute;
+  inset: 48px 0 0;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 2;
+}
+.povio-app-canvas[data-inspecting="true"] .povio-canvas-frame-cover {
+  cursor: crosshair;
+}
+@media (max-width: 1400px) {
+  .povio-app-canvas[data-inspecting="true"] .povio-canvas-tool-dock span:not(.povio-canvas-dock-divider) {
+    display: none;
+  }
+}
+@media (max-width: 1100px) {
+  .povio-app-canvas .povio-canvas-inspector {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 76px;
+    height: auto;
+    width: min(320px, 80%);
+    box-shadow: -6px 0 24px #24202d16;
+  }
+}
+@media (max-width: 600px) {
+  .povio-app-canvas .povio-canvas-inspector {
+    top: auto;
+    bottom: 124px;
+    max-height: 48%;
+    width: min(300px, 78%);
+    border: 1px solid var(--canvas-border);
+    border-radius: 8px;
+  }
+}
+/* A single sidebar owns navigation; workspace controls float over the canvas. */
+.povio-canvas-catalog > .povio-canvas-brand {
+  min-width: 0;
+  margin: 0;
+  padding: 17px 16px 4px;
+  gap: 8px;
+}
+.povio-canvas-page-count {
+  color: #76727f;
+  font-size: 11px;
+  background: #f1f1f4;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.povio-canvas-sidebar-actions {
+  display: flex;
+  align-items: center;
+  padding: 10px 8px;
+  gap: 2px;
+  border-top: 1px solid var(--canvas-border);
+}
+.povio-canvas-sidebar-actions button {
+  display: inline-flex;
+  padding: 7px;
+}
+.povio-canvas-sidebar-actions .povio-canvas-ready {
+  display: flex;
+  padding-left: 5px;
+  font-size: 10px;
+}
+.povio-canvas-mode-switch {
+  display: flex;
+  gap: 2px;
+}
+.povio-canvas-camera .povio-canvas-configure,
+.povio-canvas-camera .povio-canvas-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.povio-canvas-layers {
+  border-top: 1px solid var(--canvas-border);
+  margin-top: 12px;
+  padding-top: 8px;
+}
+.povio-canvas-layers > header {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 8px 12px;
+  font-size: 11px;
+}
+.povio-canvas-layers > header > span {
+  color: #77717e;
+  margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
+}
+.povio-canvas-layer-row {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 28px;
+  border-radius: 4px;
+}
+[role="treeitem"][aria-selected="true"] > .povio-canvas-layer-row {
+  background: #eee8ff;
+  color: #6540c2;
+}
+.povio-canvas-layer-row .povio-canvas-layer-toggle {
+  flex: 0 0 18px;
+  width: 18px;
+  padding: 3px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+}
+.povio-canvas-layer-spacer {
+  flex: 0 0 18px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-select {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  padding: 5px 3px;
+  background: transparent;
+  font-size: 10px;
+}
+.povio-canvas-layer-select code {
+  color: #787083;
+  flex-shrink: 0;
+  font-size: 10px;
+}
+.povio-canvas-layer-select span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.povio-canvas-layers > p {
+  padding: 8px;
+  color: #77717e;
+  font-size: 11px;
+}
+.povio-canvas-more-layers {
+  margin: 8px;
+  font-size: 11px;
+}
+@media (max-width: 900px) {
+  .povio-canvas-viewport > .povio-canvas-mobile-tools {
+    position: absolute;
+    left: 12px;
+    top: 12px;
+    z-index: 3;
+    border-radius: 8px;
+    border: 1px solid var(--canvas-border);
+    box-shadow: 0 3px 12px #24202d12;
+    background: white;
+  }
+  .povio-canvas-mobile-tools button {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+.povio-canvas-auto-spacing .studio-measure-label {
+  display: none;
+}
+.povio-canvas-spacing-value {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  border-radius: 3px;
+  background: #24202de6;
+  color: white;
+  padding: 1px 4px;
+  white-space: nowrap;
+  font:
+    10px/1.3 Inter,
+    sans-serif;
+  pointer-events: none;
+}
+
+.povio-canvas-camera .povio-canvas-theme-toggle {
+  order: 0;
+}
+.povio-app-canvas-page {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  height: 100dvh;
+  background: #eeeef0;
+}