@softwarity/geojson-editor 1.0.14 → 1.0.16

package/src/geojson-editor.css

@@ -11,6 +11,10 @@
 }
 
 :host {
+  --line-height: 19.5px;
+  --gutter-width: 50px;
+  --editor-padding-y: 8px;
+  --editor-padding-x: 12px;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -42,7 +46,7 @@
 
 /* ========== Gutter ========== */
 .gutter {
-  width: 50px;
+  width: var(--gutter-width);
   background: var(--gutter-bg, #f0f0f0);
   border-right: 1px solid var(--gutter-border, #e0e0e0);
   overflow: hidden;
@@ -71,7 +75,7 @@
 }
 
 .gutter-line {
-  height: 19.5px; /* line-height * font-size = 1.5 * 13px */
+  height: var(--line-height);
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -95,50 +99,13 @@
 }
 
 /* ========== Gutter Controls ========== */
-.color-indicator, .collapse-button, .boolean-checkbox {
+.collapse-button {
   width: 12px;
   height: 12px;
   border-radius: 2px;
   cursor: pointer;
   transition: transform 0.1s;
   flex-shrink: 0;
-}
-
-.color-indicator {
-  border: 1px solid #555;
-}
-.color-indicator:hover {
-  transform: scale(1.2);
-  border-color: #fff;
-}
-
-.boolean-checkbox {
-  appearance: none;
-  -webkit-appearance: none;
-  background: transparent;
-  border: 1.5px solid var(--control-border, #c0c0c0);
-  border-radius: 2px;
-  margin: 0;
-  position: relative;
-}
-.boolean-checkbox:checked {
-  border-color: var(--control-color, #000080);
-}
-.boolean-checkbox:checked::after {
-  content: '✔';
-  color: var(--control-color, #000080);
-  font-size: 11px;
-  font-weight: bold;
-  position: absolute;
-  top: -3px;
-  right: -1px;
-}
-.boolean-checkbox:hover {
-  transform: scale(1.2);
-  border-color: var(--control-color, #000080);
-}
-
-.collapse-button {
   background: transparent;
   border: none;
   color: var(--json-punct, #a9b7c6);
@@ -167,25 +134,6 @@
   }
 }
 
-.visibility-button {
-  width: 14px;
-  height: 14px;
-  background: transparent;
-  color: var(--control-color, #000080);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.1s;
-  flex-shrink: 0;
-  opacity: 0.7;
-  padding: 0;
-  font-size: 11px;
-}
-.visibility-button:hover { opacity: 1; transform: scale(1.15); }
-.visibility-button.hidden { opacity: 0.35; }
-
 /* ========== Editor Content ========== */
 .editor-content {
   position: relative;
@@ -217,7 +165,7 @@
   position: absolute;
   inset: 0;
   overflow: auto;
-  padding: 8px 12px;
+  padding: var(--editor-padding-y) var(--editor-padding-x);
   overscroll-behavior: contain; /* Prevent scroll chaining to parent */
 }
 
@@ -238,7 +186,7 @@
 
 /* Single line */
 .line {
-  height: 19.5px; /* line-height * font-size */
+  height: var(--line-height);
   white-space: pre;
   display: block;
   position: relative;
@@ -270,20 +218,16 @@
   z-index: 0;
 }
 
-.line-hidden > span { 
-  opacity: 0.35; 
-  filter: grayscale(50%); 
-}
-
-.line-collapsed {
-  display: none;
+.line-hidden > span {
+  opacity: 0.35;
+  filter: grayscale(50%);
 }
 
 /* Placeholder */
 .placeholder-layer {
   position: absolute;
-  top: 8px;
-  left: 12px;
+  top: var(--editor-padding-y);
+  left: var(--editor-padding-x);
   color: #6a6a6a;
   pointer-events: none;
   z-index: 0;
@@ -303,9 +247,6 @@
 .geojson-type { color: var(--geojson-type, #008000); font-weight: 600; }
 .geojson-type-invalid { color: var(--geojson-type-invalid, #f00); font-weight: 600; }
 
-/* Hidden marker - invisible but present for data */
-.d-none { display: none; }
-
 /* Collapsed node styling */
 .collapsed-bracket-array,
 .collapsed-bracket-object {
@@ -316,7 +257,6 @@
   content: '…';
   color: var(--json-punct, #888);
 }
-.collapsed-content { display: none; }
 
 /* ========== Prefix/Suffix ========== */
 .prefix-wrapper, .suffix-wrapper {
@@ -326,7 +266,7 @@
 }
 
 .prefix-gutter, .suffix-gutter {
-  width: 50px;
+  width: var(--gutter-width);
   background: var(--gutter-bg, #f0f0f0);
   border-right: 1px solid var(--gutter-border, #e0e0e0);
   flex-shrink: 0;
@@ -399,11 +339,6 @@
 .viewport::-webkit-scrollbar-thumb:hover { background: var(--control-color, #000080); }
 .viewport { scrollbar-width: thin; scrollbar-color: var(--control-border, #c0c0c0) var(--control-bg, #e8e8e8); }
 
-/* ========== Selection highlight ========== */
-.line .selected {
-  background: rgba(51, 153, 255, 0.3);
-}
-
 /* ========== Inline Controls (using ::before pseudo-elements) ========== */
 
 /* Shared styles for inline control pseudo-elements */
@@ -453,9 +388,6 @@
 }
 
 /* Feature visibility using ::before on the line (placed in indentation space) */
-.line.has-visibility {
-  position: relative;
-}
 .line.has-visibility::before {
   content: '👁';
   position: absolute;

package/src/{geojson-editor.template.js → geojson-editor.template.ts}

@@ -1,9 +1,7 @@
 /**
  * HTML Template for GeoJSON Editor
- * @param {string} placeholder - Placeholder text
- * @returns {string} HTML template string
  */
-export function getTemplate(placeholder = '', version = '') {
+export function getTemplate(placeholder: string = '', version: string = ''): string {
   return `
     <div class="prefix-wrapper">
       <div class="prefix-gutter"></div>
@@ -46,10 +44,8 @@ export function getTemplate(placeholder = '', version = '') {
 
 /**
  * Escape HTML special characters
- * @param {string} text - Text to escape
- * @returns {string} Escaped text
  */
-function escapeHtml(text) {
+function escapeHtml(text: string): string {
   if (!text) return '';
   return text
     .replace(/&/g, '&amp;')