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

package/dist/styles/app-canvas.css

@@ -0,0 +1,832 @@
+@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:
+    10px/16px 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: 5px;
+  padding: 4px 6px;
+}
+.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: 5px;
+  padding: 4px 6px;
+  min-width: 0;
+  background: #f7f7f8;
+  color: #333;
+}
+.povio-canvas-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #fff;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--canvas-border);
+  flex-shrink: 0;
+  z-index: 5;
+  min-height: 40px;
+}
+.povio-canvas-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 212px;
+  margin-right: auto;
+}
+.povio-canvas-brand strong {
+  display: block;
+  font-size: 10px;
+  font-weight: 600;
+}
+.povio-canvas-brand small {
+  display: block;
+  color: #73737c;
+  font-size: 10px;
+  margin-top: 0;
+}
+.povio-canvas-brand small span {
+  padding: 0 5px;
+  color: #bbb;
+}
+.povio-canvas-logo {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  background: #252329;
+  color: #fff;
+  border-radius: 6px;
+}
+.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: 4px;
+  min-height: 24px;
+}
+.povio-canvas-toolbar .povio-canvas-configure {
+  background: var(--canvas-accent);
+  color: white;
+  padding-inline: 8px;
+}
+.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: 8px;
+  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: 240px;
+  flex: 0 0 240px;
+  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: 8px 12px;
+  border-bottom: 1px solid var(--canvas-border);
+  min-height: 40px;
+}
+.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: 6px;
+  margin: 0 8px 8px;
+  padding: 0 8px;
+  background: #f6f6f8;
+  color: #88838e;
+  border-radius: 5px;
+}
+.povio-canvas-search input {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  padding: 4px 0;
+  font-size: 10px;
+}
+.povio-canvas-page-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 8px 8px;
+}
+.povio-canvas-page-list > button {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 1px;
+  padding: 4px 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: 0;
+}
+.povio-canvas-page-label strong {
+  font-weight: 500;
+  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: 10px;
+}
+.povio-canvas-catalog-footer {
+  border-top: 1px solid var(--canvas-border);
+  padding: 8px 12px;
+  color: #5a5963;
+  font-size: 10px;
+}
+.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: 12px;
+  margin-top: 0;
+}
+
+.povio-canvas-connections {
+  display: grid;
+  gap: 6px;
+  padding: 12px;
+}
+.povio-canvas-connections label {
+  display: grid;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 600;
+}
+.povio-canvas-connections button {
+  text-align: left;
+  background: #f6f6f8;
+  font-size: 10px;
+  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;
+}
+.povio-canvas-node > :is(.povio-canvas-frame, .povio-canvas-unresolved) {
+  box-shadow: 0 1px 4px #24202d16;
+  background: #fff;
+}
+.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 {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: calc(8px / var(--canvas-zoom, 1));
+  height: 48px;
+  padding: 0 0 calc(4px / var(--canvas-zoom, 1));
+  color: #77717e;
+  cursor: move;
+  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: #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;
+  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: 12px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: #fff;
+  border: 1px solid #e3e1e8;
+  border-radius: 8px;
+  cursor: default;
+  box-shadow: 0 4px 16px #24202d12;
+  z-index: 2;
+}
+.povio-canvas-camera {
+  right: 12px;
+}
+.povio-canvas-tool-dock {
+  left: 12px;
+}
+.povio-canvas-camera button,
+.povio-canvas-tool-dock button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 24px;
+  font-size: 10px;
+}
+.povio-canvas-dock-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--canvas-border);
+  margin: 0 2px;
+}
+.povio-canvas-camera output {
+  min-width: 36px;
+  text-align: center;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+.povio-canvas-unresolved {
+  padding: 12px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.povio-canvas-unresolved label {
+  display: grid;
+  gap: 4px;
+}
+.povio-canvas-page-note {
+  background: #fff4d6;
+  color: #6b501a;
+  padding: 4px 8px;
+  font-size: 10px;
+}
+.povio-canvas-notice {
+  padding: 4px 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: 10px;
+  }
+  .povio-canvas-camera .povio-canvas-breakpoint > svg {
+    display: none;
+  }
+  .povio-canvas-tool-dock {
+    bottom: 70px;
+  }
+}
+
+.povio-app-canvas .povio-canvas-inspector {
+  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: 8px 12px;
+  color: #77717e;
+  font-size: 10px;
+  line-height: 16px;
+}
+.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(272px, 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(272px, 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: 12px 12px 4px;
+  gap: 6px;
+}
+.povio-canvas-page-count {
+  color: #76727f;
+  font-size: 10px;
+  line-height: 14px;
+  background: #f1f1f4;
+  padding: 0 4px;
+  border-radius: 4px;
+}
+.povio-canvas-sidebar-actions {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  min-height: 40px;
+  gap: 2px;
+  border-top: 1px solid var(--canvas-border);
+}
+.povio-canvas-sidebar-actions button {
+  display: inline-flex;
+  padding: 5px;
+}
+.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: 8px;
+  padding-top: 4px;
+}
+.povio-canvas-layers > header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  min-height: 28px;
+  font-size: 10px;
+  font-weight: 600;
+}
+.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: 24px;
+  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 16px;
+  width: 16px;
+  padding: 2px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+}
+.povio-canvas-layer-spacer {
+  flex: 0 0 16px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-select {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  padding: 4px 2px;
+  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: 4px 8px;
+  color: #77717e;
+  font-size: 10px;
+}
+.povio-canvas-more-layers {
+  margin: 4px 8px;
+  font-size: 10px;
+}
+@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;
+}
+
+/* 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;
+}