@eyeon/map 2.0.1 → 2.0.2

package/dist/editor/index.css

@@ -1,248 +1,1384 @@
-.eyeon-map-editor {
-  display: grid;
-  grid-template-columns: 220px 1fr 260px;
+.eyeon-map-viewer {
+  position: relative;
+  width: 100%;
   height: 100%;
-  min-height: 560px;
-  background: #f8fafc;
+  min-height: 320px;
+  overflow: hidden;
+  background: var(--map-bg, #FFFFFF);
+  /* Inherit the host application's font; hosts may override with the variable. */
+  font-family: var(--eyeon-map-font-family, inherit);
+  font-size: 13px;
   color: #0f172a;
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 12px;
 }
 
-.eyeon-map-rail {
+.eyeon-map-viewer button,
+.eyeon-map-viewer input,
+.eyeon-map-viewer select,
+.eyeon-map-viewer textarea {
+  font-family: inherit;
+}
+
+.eyeon-map-viewer__canvas {
+  position: absolute;
+  inset: 0;
+  cursor: grab;
+}
+
+.eyeon-map-viewer__canvas:active {
+  cursor: grabbing;
+}
+
+.eyeon-map-viewer__loading,
+.eyeon-map-viewer__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 1rem;
+}
+
+.eyeon-map-chrome {
+  position: absolute;
+  z-index: 2;
+  top: 12px;
+  left: 12px;
+  width: min(320px, calc(100% - 124px));
   display: flex;
   flex-direction: column;
-  border-right: 1px solid #e2e8f0;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.eyeon-map-chrome > * {
+  pointer-events: auto;
+}
+
+.eyeon-map-chrome__top {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.eyeon-map-chrome__search-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
   background: #fff;
-  min-width: 0;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
+  padding: 10px 12px;
+  font-size: 13px;
+  outline: none;
+}
+
+.eyeon-map-chrome__search-input:focus {
+  border-color: #0763b1;
 }
 
-.eyeon-map-rail__tabs {
+.eyeon-map-chrome__amenities {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2px;
-  padding: 6px;
-  border-bottom: 1px solid #e2e8f0;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 10px;
+  padding: 8px;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
 }
 
-.eyeon-map-rail__tabs button {
+.eyeon-map-chrome__amenity {
+  position: relative;
+  width: 40px;
+  height: 40px;
   border: 0;
-  background: transparent;
-  border-radius: 6px;
-  padding: 6px 4px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 11px;
   font-weight: 600;
-  cursor: pointer;
-  color: #64748b;
 }
 
-.eyeon-map-rail__tabs button.is-active {
-  background: #eff6ff;
-  color: #1d4ed8;
+.eyeon-map-chrome__panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
+  padding: 10px;
+  max-height: min(60vh, 480px);
+  overflow: auto;
+  animation: eyeon-map-slide 160ms ease-out;
 }
 
-.eyeon-map-rail__body {
-  overflow: auto;
-  padding: 8px;
-  flex: 1;
+@keyframes eyeon-map-slide {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.eyeon-map-rail__heading {
-  font-size: 10px;
+.eyeon-map-chrome__empty {
+  color: #64748b;
+  font-size: 12px;
+  padding: 8px 4px;
+}
+
+.eyeon-map-chrome__group-title {
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: #94a3b8;
+  color: #64748b;
   margin: 8px 0 4px;
 }
 
-.eyeon-map-rail__row {
-  display: flex;
-  justify-content: space-between;
-  gap: 6px;
+.eyeon-map-chrome__item {
+  display: block;
   width: 100%;
   text-align: left;
   border: 0;
   background: transparent;
+  padding: 6px 4px;
   border-radius: 6px;
-  padding: 6px 8px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 13px;
 }
 
-.eyeon-map-rail__row.is-active,
-.eyeon-map-rail__row:hover {
+.eyeon-map-chrome__item:hover,
+.eyeon-map-chrome__item.is-selected {
   background: #f1f5f9;
 }
 
-.eyeon-map-rail__muted {
-  color: #94a3b8;
-  font-size: 10px;
+.eyeon-map-chrome__detail {
+  border-top: 1px solid #e2e8f0;
+  margin-top: 8px;
+  padding-top: 8px;
 }
 
-.eyeon-map-rail__hint {
+.eyeon-map-chrome__detail-title {
+  font-weight: 700;
+}
+
+.eyeon-map-chrome__detail-meta {
   color: #64748b;
-  line-height: 1.4;
-  margin: 0 0 8px;
+  font-size: 12px;
 }
 
-.eyeon-map-rail__actions {
+.eyeon-map-chrome__route {
   display: grid;
   gap: 6px;
   margin-top: 10px;
+  border-top: 1px solid #e2e8f0;
+  padding-top: 8px;
 }
 
-.eyeon-map-rail__file {
-  display: grid;
-  gap: 4px;
-  font-weight: 600;
-  font-size: 11px;
-}
-
-.eyeon-map-rail__file input {
-  font-size: 11px;
-}
-
-.eyeon-map-rail__field {
+.eyeon-map-chrome__route label {
   display: grid;
   gap: 4px;
-  margin-bottom: 8px;
   font-size: 11px;
   font-weight: 600;
   color: #475569;
 }
 
-.eyeon-map-rail__field input,
-.eyeon-map-rail__field select {
+.eyeon-map-chrome__route select {
   font-size: 12px;
-  padding: 6px 8px;
-  border: 1px solid #e2e8f0;
+  padding: 6px;
   border-radius: 6px;
+  border: 1px solid #e2e8f0;
 }
 
-.eyeon-map-editor__center {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
+.eyeon-map-chrome__accessible {
+  display: flex !important;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500 !important;
 }
 
-.eyeon-map-editor__toolbar {
+.eyeon-map-controls {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.eyeon-map-controls__stack {
+  pointer-events: auto;
+  position: absolute;
+  top: 10px;
+  right: 10px;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 8px;
-  padding: 6px 8px;
-  border-bottom: 1px solid #e2e8f0;
-  background: #fff;
+  width: 94px;
 }
 
-.eyeon-map-editor__tools,
-.eyeon-map-editor__actions {
+.eyeon-map-controls__floors {
   display: flex;
-  gap: 4px;
-  align-items: center;
-  flex-wrap: wrap;
+  flex-direction: column;
 }
 
-.eyeon-map-editor__toolbar button {
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  border-radius: 6px;
-  padding: 4px 8px;
+.eyeon-map-controls__floor,
+.eyeon-map-controls__reset,
+.eyeon-map-controls__zoom-btn {
+  color: #fff;
+  background-color: #0763b1;
+  border: 0;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
+  letter-spacing: 0.02em;
   cursor: pointer;
+  transition: background-color 200ms;
 }
 
-.eyeon-map-editor__toolbar button.is-active,
-.eyeon-map-editor__publish {
-  background: #2563eb;
-  border-color: #2563eb;
-  color: #fff;
+.eyeon-map-controls__floor,
+.eyeon-map-controls__reset {
+  width: 100%;
+  min-height: 27px;
+  padding: 6px 10px;
+  text-align: center;
 }
 
-.eyeon-map-editor__angle {
+.eyeon-map-controls__floor:hover,
+.eyeon-map-controls__reset:hover,
+.eyeon-map-controls__zoom-btn:hover {
+  background-color: #054983;
+}
+
+.eyeon-map-controls__floor.is-active {
+  background-color: #054983;
+  cursor: default;
+}
+
+.eyeon-map-controls__floor:first-child {
+  border-radius: 5px 5px 0 0;
+}
+
+.eyeon-map-controls__floor:last-child {
+  border-radius: 0 0 5px 5px;
+}
+
+.eyeon-map-controls__floor:only-child {
+  border-radius: 5px;
+}
+
+.eyeon-map-controls__floor:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.eyeon-map-controls__reset {
+  border-radius: 5px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.eyeon-map-controls__zoom {
+  display: flex;
+}
+
+.eyeon-map-controls__zoom-btn {
+  flex: 1;
+  height: 27px;
   display: flex;
   align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 600;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 0;
 }
 
-.eyeon-map-editor__angle input {
-  width: 56px;
-  font-size: 11px;
-  padding: 3px 6px;
-  border: 1px solid #e2e8f0;
-  border-radius: 4px;
+.eyeon-map-controls__zoom-btn:first-child {
+  border-radius: 5px 0 0 5px;
 }
 
-.eyeon-map-editor__canvas-wrap {
-  flex: 1;
-  min-height: 0;
-  position: relative;
+.eyeon-map-controls__zoom-btn:last-child {
+  border-radius: 0 5px 5px 0;
 }
 
-.eyeon-map-canvas {
-  position: absolute;
-  inset: 0;
+.eyeon-map-editor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
-  background:
-    linear-gradient(#e2e8f0 1px, transparent 1px) 0 0 / 24px 24px,
-    linear-gradient(90deg, #e2e8f0 1px, transparent 1px) 0 0 / 24px 24px,
-    #f8fafc;
+  background: #f8fafc;
+  color: #0f172a;
+  /* Inherit the host application's font; hosts may override with the variable. */
+  font-family: var(--eyeon-map-font-family, inherit);
+  font-size: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
 }
 
-.eyeon-map-canvas__svg {
-  width: 100%;
-  height: 100%;
-  touch-action: none;
+.eyeon-map-editor button,
+.eyeon-map-editor input,
+.eyeon-map-editor select,
+.eyeon-map-editor textarea {
+  font-family: inherit;
 }
 
-.eyeon-map-canvas__empty {
-  position: absolute;
-  inset: 0;
+/* Admin / Storybook PORTAL editor — Map options (LeftRail) is in-library. */
+.eyeon-map-editor--PORTAL {
+  grid-template-columns: 300px minmax(0, 1fr);
+}
+
+.eyeon-map-rail {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 1px solid #e2e8f0;
+  background: #fff;
+}
+
+.eyeon-map-rail__header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: #94a3b8;
+  gap: 8px;
+  flex-shrink: 0;
+  min-height: 44px;
+  padding: 8px 10px;
+  border-bottom: 1px solid #e2e8f0;
 }
 
-.eyeon-map-inspector {
-  border-left: 1px solid #e2e8f0;
-  background: #fff;
-  padding: 10px;
-  overflow: auto;
+.eyeon-map-rail__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #0f172a;
+  cursor: pointer;
+  flex-shrink: 0;
 }
 
-.eyeon-map-inspector__heading {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: #94a3b8;
-  margin: 10px 0 6px;
+.eyeon-map-rail__back:hover {
+  background: #f1f5f9;
 }
 
-.eyeon-map-inspector__empty {
-  color: #94a3b8;
-  padding: 12px 4px;
+.eyeon-map-rail__header-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
 }
 
-.eyeon-map-inspector__save {
-  margin-top: 10px;
+.eyeon-map-rail__edit-map {
   width: 100%;
-  border: 0;
-  border-radius: 6px;
-  background: #2563eb;
+  margin-bottom: 8px;
+  border: 1px solid #0763b1;
+  background: #0763b1;
   color: #fff;
-  padding: 8px;
-  font-size: 12px;
-  font-weight: 600;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  font-weight: 700;
   cursor: pointer;
 }
 
-.eyeon-map-preview,
-.eyeon-map-preview__loading {
-  position: absolute;
-  inset: 0;
+.eyeon-map-rail__edit-map:hover {
+  background: #05508f;
+  border-color: #05508f;
+}
+
+.eyeon-map-rail__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.eyeon-map-rail__nav-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  color: #0f172a;
+  border-radius: 8px;
+  padding: 10px 8px;
+  cursor: pointer;
+}
+
+.eyeon-map-rail__nav-item:hover {
+  background: #f1f5f9;
+}
+
+.eyeon-map-rail__nav-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.eyeon-map-rail__nav-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.eyeon-map-rail__nav-desc {
+  font-size: 11px;
+  line-height: 1.35;
+  color: #64748b;
+}
+
+.eyeon-map-rail__nav-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #94a3b8;
+  flex-shrink: 0;
+}
+
+.eyeon-map-rail__nav-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.eyeon-map-rail__stat {
+  font-size: 12px;
+  font-weight: 600;
+  color: #334155;
+  padding: 8px 0 4px;
+}
+
+.eyeon-map-rail__body {
+  overflow: auto;
+  padding: 10px 12px 16px;
+  flex: 1;
+  min-height: 0;
+}
+
+.eyeon-map-rail__footer {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.eyeon-map-rail__heading {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #94a3b8;
+  margin: 12px 0 4px;
+}
+
+.eyeon-map-rail__heading:first-child {
+  margin-top: 0;
+}
+
+.eyeon-map-rail__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  color: #0f172a;
+  border-radius: 6px;
+  padding: 7px 8px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.eyeon-map-rail__row.is-active,
+.eyeon-map-rail__row:hover {
+  background: #f1f5f9;
+}
+
+.eyeon-map-rail__muted {
+  color: #94a3b8;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.eyeon-map-rail__hint {
+  color: #64748b;
+  line-height: 1.45;
+  margin: 0 0 10px;
+}
+
+.eyeon-map-rail__actions {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.eyeon-map-rail__actions button {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #0f172a;
+  border-radius: 6px;
+  padding: 7px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.eyeon-map-rail__file {
+  display: grid;
+  gap: 4px;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.eyeon-map-rail__file input {
+  font-size: 11px;
+}
+
+.eyeon-map-rail__field {
+  display: grid;
+  gap: 4px;
+  margin-bottom: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.eyeon-map-rail__field--color {
+  grid-template-columns: 1fr 36px;
+  align-items: center;
+}
+
+.eyeon-map-rail__field--color input[type='color'] {
+  width: 36px;
+  height: 28px;
+  padding: 2px;
+  cursor: pointer;
+}
+
+.eyeon-map-rail__field input,
+.eyeon-map-rail__field select {
+  font-size: 12px;
+  padding: 6px 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+}
+
+.eyeon-map-editor__center {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.eyeon-map-editor__toolbar {
+  position: relative;
+  z-index: 4;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 8px 10px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #fff;
+}
+
+.eyeon-map-editor__tools,
+.eyeon-map-editor__actions {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.eyeon-map-editor__tool-icons,
+.eyeon-map-rail__tool-extras {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.eyeon-map-rail__tool-extras {
+  margin-bottom: 10px;
+}
+
+.eyeon-map-editor__tool-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #0f172a;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.eyeon-map-editor__tool-icon:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.eyeon-map-editor__tool-icon.is-active {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+  color: #1d4ed8;
+}
+
+.eyeon-map-editor__tool-icon:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Immediate CSS tooltips — native title= is slow and often clipped in iframes. */
+.eyeon-map-editor [data-tooltip] {
+  position: relative;
+}
+
+.eyeon-map-editor [data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  z-index: 30;
+  left: 50%;
+  top: calc(100% + 6px);
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: #0f172a;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.eyeon-map-editor [data-tooltip]:hover::after,
+.eyeon-map-editor [data-tooltip]:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.eyeon-map-editor [data-tooltip]:hover,
+.eyeon-map-editor [data-tooltip]:focus-visible {
+  z-index: 5;
+}
+
+.eyeon-map-editor__toolbar button {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #0f172a;
+  border-radius: 6px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.eyeon-map-editor__toolbar button.eyeon-map-editor__tool-icon {
+  padding: 0;
+}
+
+.eyeon-map-editor__toolbar button.is-active {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+  color: #1d4ed8;
+}
+
+.eyeon-map-editor__unsaved {
+  color: #b45309;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.eyeon-map-editor__toolbar .eyeon-map-editor__save,
+.eyeon-map-editor__toolbar .eyeon-map-editor__publish {
+  background-color: #0763b1;
+  border-color: #0763b1;
+  color: #fff;
+}
+
+.eyeon-map-editor__toolbar .eyeon-map-editor__save:hover:not(:disabled),
+.eyeon-map-editor__toolbar .eyeon-map-editor__publish:hover:not(:disabled) {
+  background-color: #05508f;
+  border-color: #05508f;
+  color: #fff;
+}
+
+.eyeon-map-editor__toolbar button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.eyeon-map-editor__angle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.eyeon-map-editor__angle input {
+  width: 56px;
+  font-size: 11px;
+  padding: 3px 6px;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+}
+
+.eyeon-map-editor__hint {
+  flex-shrink: 0;
+  padding: 6px 12px;
+  background: #eff6ff;
+  color: #1e3a8a;
+  font-size: 11px;
+  line-height: 1.4;
+  border-bottom: 1px solid #dbeafe;
+}
+
+.eyeon-map-editor__canvas-wrap {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.eyeon-map-canvas {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background-color: #f8fafc;
+}
+
+/* Graph paper is Edit Map only. PORTAL default is MapViewer (no grid). */
+.eyeon-map-canvas--grid {
+  --eyeon-map-grid: 24px;
+  --eyeon-map-grid-diag: calc(var(--eyeon-map-grid) / 1.41421356237);
+  --eyeon-map-grid-line: #e2e8f0;
+  --eyeon-map-grid-diag-line: #e8edf2;
+  background-image:
+    linear-gradient(var(--eyeon-map-grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--eyeon-map-grid-line) 1px, transparent 1px),
+    repeating-linear-gradient(
+      45deg,
+      var(--eyeon-map-grid-diag-line) 0,
+      var(--eyeon-map-grid-diag-line) 1px,
+      transparent 1px,
+      transparent var(--eyeon-map-grid-diag)
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      var(--eyeon-map-grid-diag-line) 0,
+      var(--eyeon-map-grid-diag-line) 1px,
+      transparent 1px,
+      transparent var(--eyeon-map-grid-diag)
+    );
+  background-size:
+    var(--eyeon-map-grid) var(--eyeon-map-grid),
+    var(--eyeon-map-grid) var(--eyeon-map-grid),
+    auto,
+    auto;
+}
+
+.eyeon-map-canvas__svg {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+}
+
+.eyeon-map-canvas__empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+}
+
+.eyeon-map-inspector {
+  padding: 0 0 8px;
+}
+
+.eyeon-map-inspector__heading {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #94a3b8;
+  margin: 10px 0 6px;
+}
+
+.eyeon-map-inspector__heading:first-child {
+  margin-top: 0;
+}
+
+.eyeon-map-inspector__empty {
+  color: #64748b;
+  line-height: 1.45;
+  margin: 0 0 12px;
+}
+
+.eyeon-map-inspector__save {
+  margin: 4px 0 8px;
+  width: 100%;
+  border: 0;
+  border-radius: 6px;
+  background: #0763b1;
+  color: #fff;
+  padding: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.eyeon-map-inspector__delete {
+  margin: 0 0 8px;
+  width: 100%;
+  border: 1px solid #dc2626;
+  border-radius: 6px;
+  background: #fff;
+  color: #dc2626;
+  padding: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.eyeon-map-inspector__delete:hover {
+  background: rgba(220, 38, 38, 0.08);
+}
+
+.eyeon-map-import-review {
+  display: grid;
+  gap: 10px;
+}
+
+.eyeon-map-import-review__remap {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+}
+
+.eyeon-map-floors__block {
+  margin-bottom: 14px;
+}
+
+.eyeon-map-floors__list {
+  display: flex;
+  flex-direction: column;
+}
+
+.eyeon-map-floors__row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px;
+  padding: 0;
+  height: 32px;
+  box-sizing: border-box;
+}
+
+.eyeon-map-floors__entry {
+  display: grid;
+  margin-bottom: 2px;
+  will-change: transform;
+}
+
+.eyeon-map-floors__row:hover,
+.eyeon-map-floors__row.is-confirm {
+  background: #f1f5f9;
+}
+
+.eyeon-map-floors__row.is-active {
+  background: #eff6ff;
+}
+
+.eyeon-map-floors__row.is-placeholder {
+  background: #f8fafc;
+  outline: 1px dashed #0763b1;
+}
+
+.eyeon-map-floors__row.is-placeholder > * {
+  opacity: 0;
+}
+
+.eyeon-map-floors.is-reordering {
+  user-select: none;
+  cursor: grabbing;
+}
+
+.eyeon-map-floors__row--ghost {
+  position: fixed;
+  z-index: 40;
+  box-sizing: border-box;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
+  outline: 1px solid #e2e8f0;
+  pointer-events: none;
+}
+
+.eyeon-map-floors__row--ghost .eyeon-map-floors__icon-danger {
+  opacity: 1;
+  pointer-events: none;
+}
+
+.eyeon-map-floors__item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  height: 32px;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+  color: #0f172a;
+  text-align: left;
+  border-radius: 6px;
+  padding: 8px 0;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.eyeon-map-floors__grip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  background: transparent;
+  color: #64748b;
+  cursor: grab;
+  flex-shrink: 0;
+  touch-action: none;
+}
+
+.eyeon-map-floors__grip:active {
+  cursor: grabbing;
+}
+
+.eyeon-map-floors__icon-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  background: transparent;
+  color: #dc2626;
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.eyeon-map-floors__row:hover .eyeon-map-floors__icon-danger,
+.eyeon-map-floors__row:focus-within .eyeon-map-floors__icon-danger,
+.eyeon-map-floors__row.is-confirm .eyeon-map-floors__icon-danger {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.eyeon-map-floors__icon-danger:hover:not(:disabled) {
+  color: #b91c1c;
+  background: rgba(220, 38, 38, 0.1);
+  border-radius: 6px;
+}
+
+.eyeon-map-floors__icon-danger:disabled {
+  cursor: wait;
+}
+
+.eyeon-map-floors__add,
+.eyeon-map-floors__primary,
+.eyeon-map-floors__danger {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #0f172a;
+  border-radius: 6px;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.eyeon-map-floors__add {
+  width: 100%;
+  margin: 0 0 8px;
+  text-align: center;
+}
+
+.eyeon-map-floors__primary {
+  background: #0763b1;
+  border-color: #0763b1;
+  color: #fff;
+}
+
+.eyeon-map-floors__primary:hover:not(:disabled) {
+  background: #05508f;
+  border-color: #05508f;
+  color: #fff;
+}
+
+.eyeon-map-floors__primary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.eyeon-map-floors__edit-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.eyeon-map-floors__edit-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.eyeon-map-floors__edit-row .eyeon-map-floors__danger {
+  width: auto;
+  flex: 0 0 auto;
+}
+
+.eyeon-map-floors__edit-row .eyeon-map-floors__primary {
+  margin-left: auto;
+  width: auto;
+  flex: 0 0 auto;
+}
+
+.eyeon-map-floors__danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  background: #fff;
+  border-color: #dc2626;
+  color: #dc2626;
+}
+
+.eyeon-map-floors__danger:hover:not(:disabled) {
+  background: rgba(220, 38, 38, 0.08);
+  border-color: #b91c1c;
+  color: #b91c1c;
+}
+
+.eyeon-map-floors__danger:disabled {
+  opacity: 0.75;
+  cursor: wait;
+}
+
+.eyeon-map-floors__spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(220, 38, 38, 0.28);
+  border-top-color: #dc2626;
+  border-radius: 50%;
+  animation: eyeon-map-spin 0.6s linear infinite;
+}
+
+@keyframes eyeon-map-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.eyeon-map-floors__error {
+  color: #b91c1c;
+  font-size: 11px;
+  margin: 8px 0;
+}
+
+.eyeon-map-floors__notice {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  border: 1px solid #fcd34d;
+  border-radius: 8px;
+  background: #fffbeb;
+  color: #78350f;
+}
+
+.eyeon-map-floors__notice-title {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.eyeon-map-floors__notice-list {
+  margin: 0;
+  padding-left: 16px;
+  display: grid;
+  gap: 4px;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.eyeon-map-floors__notice-list code {
+  font-size: 10px;
+  padding: 0 3px;
+  border-radius: 3px;
+  background: rgba(120, 53, 15, 0.1);
+}
+
+.eyeon-map-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.eyeon-map-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+}
+
+.eyeon-map-modal__card {
+  position: relative;
+  width: min(380px, 100%);
+  padding: 20px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
+  text-align: center;
+}
+
+.eyeon-map-modal__title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.eyeon-map-modal__body {
+  margin: 0 0 18px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #475569;
+}
+
+.eyeon-map-modal__actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.eyeon-map-modal__actions .eyeon-map-floors__danger {
+  width: auto;
+  min-width: 120px;
+  background: #dc2626;
+  border-color: #dc2626;
+  color: #fff;
+  padding: 8px 14px;
+}
+
+.eyeon-map-modal__actions .eyeon-map-floors__danger:hover:not(:disabled) {
+  background: #b91c1c;
+  border-color: #b91c1c;
+  color: #fff;
+}
+
+.eyeon-map-modal__actions .eyeon-map-floors__danger .eyeon-map-floors__spinner {
+  border-color: rgba(255, 255, 255, 0.4);
+  border-top-color: #fff;
+}
+
+.eyeon-map-modal__cancel {
+  min-width: 100px;
+  padding: 8px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.eyeon-map-modal__cancel:hover:not(:disabled) {
+  background: #f1f5f9;
+}
+
+.eyeon-map-floors__drop {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 84px;
+  padding: 12px 10px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #334155;
+  cursor: pointer;
+  text-align: center;
+}
+
+.eyeon-map-floors__drop input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.eyeon-map-floors__drop.is-over,
+.eyeon-map-floors__drop:hover:not(.is-busy) {
+  border-color: #0763b1;
+  background: #eff6ff;
+}
+
+.eyeon-map-floors__drop.has-file {
+  border-style: solid;
+  border-color: #93c5fd;
+  background: #eff6ff;
+}
+
+.eyeon-map-floors__drop.is-busy {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.eyeon-map-floors__drop-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #0f172a;
+  word-break: break-all;
+}
+
+.eyeon-map-floors__drop-meta {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.eyeon-map-floors__preview-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 96px;
+  max-height: 180px;
+  padding: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+  overflow: hidden;
+}
+
+.eyeon-map-floors__preview-img {
+  display: block;
+  max-width: 100%;
+  max-height: 164px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.eyeon-map-floors__preview-fallback {
+  padding: 12px 8px;
+  font-size: 11px;
+  color: #64748b;
+  text-align: center;
+  word-break: break-all;
+}
+
+.eyeon-map-floors__svg-field {
+  position: relative;
+}
+
+.eyeon-map-floors__change {
+  width: 100%;
+  margin-top: 8px;
+  border: 1px solid #cbd5e1;
+  background: #fff;
+  color: #0f172a;
+  border-radius: 6px;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.eyeon-map-floors__change:hover:not(:disabled) {
+  border-color: #0763b1;
+  color: #0763b1;
+  background: #f8fafc;
+}
+
+.eyeon-map-floors__change:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.eyeon-map-floors__progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0 4px;
+}
+
+.eyeon-map-floors__progress-track {
+  flex: 1;
+  height: 8px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  overflow: hidden;
+}
+
+.eyeon-map-floors__progress-bar {
+  height: 100%;
+  background: #0763b1;
+  border-radius: 999px;
+  transition: width 0.15s ease;
+}
+
+.eyeon-map-floors__progress-label {
+  min-width: 36px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #0763b1;
+  text-align: right;
+}
+
+.eyeon-map-preview {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  position: relative;
+  background: #FFFFFF;
+}
+
+.eyeon-map-preview .eyeon-map-viewer {
+  min-height: 0;
+  height: 100%;
+}
+
+.eyeon-map-preview__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }