@povio/ui 5.0.0-rc.8 → 6.0.0-rc.1

package/dist/styles/app-canvas.css

@@ -1,733 +0,0 @@
-@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;
-}