jsgui3-server 0.0.143 → 0.0.145

package/docs/comprehensive-documentation.md

@@ -284,11 +284,30 @@ body {
 }
 `;
 
-controls.MyControl = MyControl;
-module.exports = jsgui;
-```
-
-2. Create server:
+controls.MyControl = MyControl;
+module.exports = jsgui;
+```
+
+    SCSS/SASS: You can also set `MyControl.scss` or `MyControl.sass` using template literals. These are compiled to CSS during bundling and removed from the JS output, just like `.css`. CSS and SCSS blocks can be mixed in a control; the bundler preserves their order during compilation. If you mix indented `.sass` with `.scss`/`.css`, each block is compiled independently to preserve order. Inline CSS sourcemaps are emitted only when a single compilation pass is used; mixed syntax skips inline maps to keep them accurate.
+
+    To enable inline CSS sourcemaps for Sass/SCSS outputs, pass a `style` configuration:
+
+    ```javascript
+    Server.serve({
+        ctrl: MyControl,
+        src_path_client_js: require.resolve('./client.js'),
+        debug: true,
+        style: {
+            sourcemaps: {
+                enabled: true,
+                inline: true,
+                include_sources: true
+            }
+        }
+    });
+    ```
+
+2. Create server:
 
 ```javascript
 // server.js
@@ -1400,4 +1419,4 @@ MIT License - see LICENSE file for details.
 ---
 
 This documentation provides a comprehensive overview of JSGUI3 Server. For more detailed information about specific components, see the individual files in the `docs/` directory and the examples in `examples/`.</content>
-<parameter name="filePath">c:\\Users\\james\\Documents\\repos\\jsgui3-server\\docs\\comprehensive-documentation.md
+<parameter name="filePath">c:\\Users\\james\\Documents\\repos\\jsgui3-server\\docs\\comprehensive-documentation.md

package/docs/configuration-reference.md

@@ -198,16 +198,51 @@ Configuration values are resolved in this order (later sources override earlier
   });
   ```
 
-#### `config`
-- **Type:** `string`
-- **Description:** Path to configuration file
-- **Default:** `'jsgui.config.js'` (if exists)
-- **Example:**
-  ```javascript
-  Server.serve({
-      config: './my-config.js'
-  });
-  ```
+#### `config`
+- **Type:** `string`
+- **Description:** Path to configuration file
+- **Default:** `'jsgui.config.js'` (if exists)
+- **Example:**
+  ```javascript
+  Server.serve({
+      config: './my-config.js'
+  });
+  ```
+
+#### `style`
+- **Type:** `object`
+- **Description:** Style pipeline options for CSS/SCSS/Sass extraction and compilation.
+- **Default:** `{}` (inherits debug behavior for sourcemaps)
+- **Example:**
+  ```javascript
+  Server.serve({
+      ctrl: MyControl,
+      debug: true,
+      style: {
+          sourcemaps: {
+              enabled: true,
+              inline: true,
+              include_sources: true
+          },
+          load_paths: ['styles', 'controls'],
+          output_style: 'expanded',
+          quiet_dependencies: true,
+          compile_css_with_sass: true
+      }
+  });
+  ```
+
+**Style options:**
+- `sourcemaps.enabled` (`boolean`): Enable CSS sourcemaps. Defaults to `true` when `debug` is enabled.
+- `sourcemaps.inline` (`boolean`): Inline sourcemaps into compiled CSS (default `true`).
+- `sourcemaps.include_sources` (`boolean`): Embed sources content in the sourcemap (default `true`).
+- `load_paths` (`string[]`): Sass load paths for `@use`/`@import`.
+- `output_style` (`string`): Sass output style (e.g., `expanded`, `compressed`).
+- `quiet_dependencies` (`boolean`): Suppress dependency warnings during Sass compilation.
+- `compile_css_with_sass` (`boolean`): Compile `.css` blocks through Sass when mixing with SCSS (default `true`).
+- `scss_sources` / `sass_sources` (`string[]`): Extra Sass/SCSS sources appended during compilation.
+
+Inline CSS sourcemaps are emitted only when a single compilation pass is possible. Mixed `.sass` plus `.scss`/`.css` inputs skip inline maps to avoid inaccurate mappings.
 
 ## Environment Variables
 
@@ -805,4 +840,4 @@ Solution: port: 3000 instead of port: "3000"
 
 ---
 
-This configuration reference provides comprehensive coverage of all JSGUI3 Server configuration options. Remember that most options have sensible defaults, so you only need to specify what differs from the defaults for your use case.
+This configuration reference provides comprehensive coverage of all JSGUI3 Server configuration options. Remember that most options have sensible defaults, so you only need to specify what differs from the defaults for your use case.

package/docs/controls-development.md

@@ -74,23 +74,44 @@ class My_Custom_Control extends Active_HTML_Document {
 }
 
 // Static CSS definition
-My_Custom_Control.css = `
-* { margin: 0; padding: 0; }
-body {
-    overflow-x: hidden;
+My_Custom_Control.css = `
+* { margin: 0; padding: 0; }
+body {
+    overflow-x: hidden;
     overflow-y: hidden;
     background-color: #E0E0E0;
 }
 .my-custom-control {
     padding: 20px;
     background: #f0f0f0;
-}
-`;
-
-// Register control globally
-controls.My_Custom_Control = My_Custom_Control;
-module.exports = jsgui;
-```
+}
+`;
+
+// Register control globally
+controls.My_Custom_Control = My_Custom_Control;
+module.exports = jsgui;
+```
+
+Note: You can also define `My_Custom_Control.scss` or `My_Custom_Control.sass` using template literals. These are compiled to CSS during bundling and removed from the JS output, just like `.css`. CSS and SCSS blocks can be mixed in a control; the bundler preserves their order during compilation. If you mix indented `.sass` with `.scss`/`.css`, each block is compiled independently to preserve order. Inline CSS sourcemaps are emitted only when a single compilation pass is used; mixed syntax skips inline maps to keep them accurate.
+
+To enable inline CSS sourcemaps for Sass/SCSS outputs, pass a `style` configuration when serving:
+
+```javascript
+Server.serve({
+    ctrl: My_Custom_Control,
+    src_path_client_js: require.resolve('./client.js'),
+    debug: true,
+    style: {
+        sourcemaps: {
+            enabled: true,
+            inline: true,
+            include_sources: true
+        }
+    }
+});
+```
+
+E2E coverage for Sass/CSS controls (including sourcemaps) lives in `tests/sass-controls.e2e.test.js`.
 
 #### Control (Base)
 
@@ -114,20 +135,27 @@ module.exports = jsgui;
 - Child control containment
 - Positioning and sizing
 
-```javascript
-const window = new controls.Window({
-    context,
-    title: 'My Window',
-    pos: [100, 100],  // [x, y] position
-    size: [400, 300]  // [width, height]
-});
-
-// Add content to window
-window.inner.add(childControl);
-this.body.add(window);
-```
-
-#### Panel
+```javascript
+const window = new controls.Window({
+    context,
+    title: 'My Window',
+    pos: [100, 100],  // [x, y] position
+    size: [400, 300]  // [width, height]
+});
+
+// Add content to window
+window.inner.add(childControl);
+this.body.add(window);
+```
+
+Lab results (from `lab/results/window_examples_dom_audit.md`, generated 2025-12-19):
+
+- Window example renders one window, a title bar, and three control buttons.
+- Tabbed panel example renders two tabs with a default checked input.
+- Checkbox example renders one checkbox input with the expected label.
+- Date picker example renders a native date input on the server.
+
+#### Panel
 
 **Purpose:** Basic container for grouping controls.
 
@@ -983,4 +1011,4 @@ Use browser developer tools to:
 
 ---
 
-This guide provides the foundation for developing controls in JSGUI3. For specific control implementations, refer to the examples in the `examples/` directory and the base classes in `controls/`.
+This guide provides the foundation for developing controls in JSGUI3. For specific control implementations, refer to the examples in the `examples/` directory and the base classes in `controls/`.

package/docs/jsgui3-html-improvement-ideas.md

@@ -0,0 +1,162 @@
+# JSGUI3-HTML Improvement Ideas
+
+This document outlines improvement opportunities for `jsgui3-html` controls based on inspecting the current control catalog under `node_modules/jsgui3-html/controls`.
+
+## Control Inventory Snapshot (Observed)
+
+Source: `node_modules/jsgui3-html/controls/controls.js` and `controls/organised/*`.
+
+### Core (0-core)
+
+- 0-basic / 0-native-compositional
+  - button, checkbox, date-picker, dropdown-list, file-upload, icon, radio-button, Select_Options, Text_Input
+- 0-basic / 1-compositional
+  - calendar, combo-box, context-menu, color-grid, color-palette, grid, list, scroll-view, scrollbar
+  - item, item-selector, menu-node, month-view, text-item, Text_Field
+  - toggle-button, plus-minus-toggle-button, radio-button-group, timespan-selector
+  - status indicators: Indicator, Status_Indicator, Validation_Status_Indicator
+- 0-core / 1-advanced
+  - Canvas, login, popup-menu-button, string-span
+
+### Standard (1-standard)
+
+- 0-viewer
+  - array, object, object-kvp, number, string
+- 1-editor
+  - form_field / FormField, PropertyEditor / property_editor, Rich_Text_Editor
+  - array/object/number/string editors
+- 2-misc
+  - left-right-arrows-selector, up-down-arrow-buttons
+- 3-page
+  - standard-web-page, message-web-page
+- 4-data
+  - data-item, data-row, data-filter
+- 5-ui
+  - tree, tree-node, file-tree, file-tree-node
+  - toolbar, toolbox, horizontal-menu, horizontal-slider
+  - line-chart, search-bar, audio-volume, media-scrubber
+- 6-layout
+  - panel, titled-panel, title-bar, window, modal
+  - tabbed-panel, tile-slide, vertical-expander, single-line
+  - app/multi-layout-mode
+
+### Showcase (2-showcase)
+
+- icon-library
+
+### Notes / Legacy
+
+- `controls/connected/data-grid.js` exists but is commented out in `controls.js`.
+- `controls/old/*` contains historical controls (item, item-view).
+- `controls/swaps/notes.md` references progressive enhancement and swapping native controls.
+- Naming duplication: `FormField.js` vs `form_field.js`, `PropertyEditor.js` vs `property_editor.js`.
+
+## Improvement Themes
+
+### 1) Add Missing Core Controls
+
+These should be small, reliable building blocks with strong HTML parity and predictable activation.
+
+- Textarea
+- Password, email, url, tel inputs
+- Number input with stepper (native + stylized)
+- Range slider (native) + stepped slider
+- Progress bar, meter
+- Switch/toggle (native checkbox + styled)
+- Chip/tag input
+- Inline validation message control
+- Breadcrumbs, pagination
+- Tooltip/popover
+- Notification/toast, alert banner
+- Badge/pill
+
+### 2) Data & Collection Controls
+
+The existing data controls are minimal; add richer, reusable data views.
+
+- Data table with sorting, filtering, pagination
+- Virtualized list/grid for large datasets
+- Tree-table hybrid (folders with columns)
+- List reordering (drag-and-drop)
+- Master/detail split view
+- Data grid should reconnect to `controls/connected/data-grid.js` with a modern API
+
+### 3) Layout + Navigation Expansion
+
+The layout set is strong but missing higher-level patterns.
+
+- Split pane / resizable panes
+- Accordion / collapsible sections
+- Sidebar + responsive drawer
+- Tab variants (vertical, icon tabs, overflow)
+- Stepper / wizard layout
+- Layout primitives: stack, cluster, center, grid-with-gap
+
+### 4) Form & Editor Features
+
+Existing editors need feature depth, validation, and accessibility.
+
+- Form container with built-in validation routing
+- Field-level error display + status badges
+- Input masking (date, currency, phone)
+- Autosize text field / textarea
+- Rich text editor improvements: toolbar, markdown, paste sanitization
+- Object editor: expand/collapse, add/remove key-values, schema-driven rendering
+
+### 5) Feature Depth for Existing Controls
+
+Concrete enhancements based on a quick control scan:
+
+- Checkbox: fix `el_radio` typo in change handler, add `checked` sync, keyboard focus state
+- Date picker: add min/max, locale formatting, keyboard navigation, week start configuration
+- Dropdown/list/combobox: async options, filtering, typeahead, ARIA roles
+- Window/panel: snap, dock, maximize, z-index management, resize handles
+- Tree/file tree: lazy loading, multi-select, drag reparent, keyboard navigation
+- Scrollbar/scroll-view: horizontal + vertical sync, scroll inertia
+
+### 6) Accessibility + Semantics
+
+- Standardize ARIA roles, labels, and keyboard handling
+- Focus ring consistency and tab order control
+- High contrast mode + reduced motion theme
+- Screen reader text for icon-only buttons
+
+### 7) Theming + Styling System
+
+- Token-driven theme layer (color, spacing, radius, typography)
+- Control style overrides via theme context
+- Light/dark/system themes with CSS variables
+- CSS layering: base, component, utility
+- Improve `swaps` approach for progressive enhancement of native elements
+
+### 8) Consistency + Packaging
+
+- Normalize naming and case conventions in control filenames
+- Reduce duplicate editor components (FormField vs form_field)
+- Clarify which controls are core vs showcase
+- Provide explicit exports for stable public API
+
+## Suggested Roadmap
+
+### Phase 1: Core and Reliability
+
+- Add missing native inputs (textarea, number, range)
+- Fix known control bugs (checkbox `el_radio` reference)
+- Normalize control naming duplication
+- Basic accessibility pass across core controls
+
+### Phase 2: Data + Forms
+
+- Data table + virtualized list
+- Form container + validation hooks
+- Object editor improvements
+
+### Phase 3: Layout + UX Features
+
+- Split panes, accordion, responsive drawer
+- Enhanced window management
+- Theme system and style tokens
+
+## Visual Summary
+
+See `docs/jsgui3-html-improvement-ideas.svg` for an Industrial Luxury Obsidian themed diagram of these ideas.

package/docs/jsgui3-html-improvement-ideas.svg

@@ -0,0 +1,151 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000" role="img" aria-label="JSGUI3-HTML improvement ideas diagram">
+  <defs>
+    <linearGradient id="bg_grad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0a0b0e" />
+      <stop offset="45%" stop-color="#101419" />
+      <stop offset="100%" stop-color="#141a20" />
+    </linearGradient>
+    <radialGradient id="highlight_grad" cx="70%" cy="20%" r="60%">
+      <stop offset="0%" stop-color="#2a2f36" stop-opacity="0.7" />
+      <stop offset="70%" stop-color="#0a0b0e" stop-opacity="0" />
+    </radialGradient>
+    <linearGradient id="gold_grad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#8f7a3c" />
+      <stop offset="50%" stop-color="#d2b86a" />
+      <stop offset="100%" stop-color="#8f7a3c" />
+    </linearGradient>
+    <linearGradient id="steel_grad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1b2127" />
+      <stop offset="100%" stop-color="#11151a" />
+    </linearGradient>
+    <pattern id="grid_pattern" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1a2026" stroke-width="1" />
+    </pattern>
+    <filter id="soft_glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#c9b26b" flood-opacity="0.4" />
+    </filter>
+    <filter id="panel_shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#000000" flood-opacity="0.6" />
+    </filter>
+  </defs>
+
+  <rect width="1600" height="1000" fill="url(#bg_grad)" />
+  <rect width="1600" height="1000" fill="url(#grid_pattern)" opacity="0.35" />
+  <rect width="1600" height="1000" fill="url(#highlight_grad)" />
+
+  <!-- Obsidian shards -->
+  <polygon points="120,80 360,40 420,140 180,210" fill="#0e1217" opacity="0.9" />
+  <polygon points="1320,90 1540,60 1580,200 1360,240" fill="#0e1217" opacity="0.85" />
+  <polygon points="420,820 640,760 720,900 480,950" fill="#0d1116" opacity="0.9" />
+  <polygon points="1080,760 1360,700 1460,860 1160,930" fill="#0d1116" opacity="0.85" />
+
+  <!-- Decorative gold rails -->
+  <path d="M 80 120 L 1520 120" stroke="url(#gold_grad)" stroke-width="2" opacity="0.7" />
+  <path d="M 80 900 L 1520 900" stroke="url(#gold_grad)" stroke-width="2" opacity="0.6" />
+  <path d="M 140 150 L 140 870" stroke="#3a3220" stroke-width="1" opacity="0.5" />
+  <path d="M 1460 150 L 1460 870" stroke="#3a3220" stroke-width="1" opacity="0.5" />
+
+  <!-- Title -->
+  <text x="120" y="95" fill="#e5d6a2" font-size="36" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="2">
+    JSGUI3-HTML IMPROVEMENT MAP
+  </text>
+  <text x="120" y="125" fill="#9aa1a8" font-size="16" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="1">
+    Industrial Luxury Obsidian theme | Control Expansion + Feature Depth
+  </text>
+
+  <!-- Central crest -->
+  <circle cx="800" cy="500" r="120" fill="url(#steel_grad)" stroke="url(#gold_grad)" stroke-width="3" filter="url(#soft_glow)" />
+  <circle cx="800" cy="500" r="90" fill="#0f141a" stroke="#2c3138" stroke-width="2" />
+  <text x="800" y="485" fill="#e5d6a2" font-size="22" font-family="Trebuchet MS, Arial, sans-serif" text-anchor="middle">
+    CONTROL SYSTEMS
+  </text>
+  <text x="800" y="515" fill="#9aa1a8" font-size="14" font-family="Trebuchet MS, Arial, sans-serif" text-anchor="middle">
+    themes | behavior | data
+  </text>
+
+  <!-- Panels -->
+  <g filter="url(#panel_shadow)">
+    <rect x="120" y="180" width="560" height="220" rx="18" fill="#11161c" stroke="#2c333b" stroke-width="2" />
+    <rect x="920" y="180" width="560" height="220" rx="18" fill="#11161c" stroke="#2c333b" stroke-width="2" />
+    <rect x="120" y="430" width="560" height="220" rx="18" fill="#11161c" stroke="#2c333b" stroke-width="2" />
+    <rect x="920" y="430" width="560" height="220" rx="18" fill="#11161c" stroke="#2c333b" stroke-width="2" />
+    <rect x="120" y="680" width="560" height="200" rx="18" fill="#11161c" stroke="#2c333b" stroke-width="2" />
+    <rect x="920" y="680" width="560" height="200" rx="18" fill="#11161c" stroke="#2c333b" stroke-width="2" />
+  </g>
+
+  <!-- Panel headings -->
+  <text x="160" y="220" fill="#e5d6a2" font-size="20" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="1">
+    CORE CONTROL EXPANSION
+  </text>
+  <text x="960" y="220" fill="#e5d6a2" font-size="20" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="1">
+    FORM AND EDITOR DEPTH
+  </text>
+  <text x="160" y="470" fill="#e5d6a2" font-size="20" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="1">
+    DATA AND COLLECTION
+  </text>
+  <text x="960" y="470" fill="#e5d6a2" font-size="20" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="1">
+    LAYOUT AND NAVIGATION
+  </text>
+  <text x="160" y="720" fill="#e5d6a2" font-size="20" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="1">
+    ACCESSIBILITY AND THEME
+  </text>
+  <text x="960" y="720" fill="#e5d6a2" font-size="20" font-family="Trebuchet MS, Arial, sans-serif" letter-spacing="1">
+    INFRA AND DX
+  </text>
+
+  <!-- Panel bullets -->
+  <g fill="#c3c8ce" font-size="14" font-family="Trebuchet MS, Arial, sans-serif">
+    <text x="160" y="252">- textarea, number, range, progress, meter</text>
+    <text x="160" y="274">- switch, badge, tooltip, toast, breadcrumb</text>
+    <text x="160" y="296">- chip input, pagination, notification banner</text>
+    <text x="160" y="318">- standard icon buttons and input masks</text>
+
+    <text x="960" y="252">- form container + validation hooks</text>
+    <text x="960" y="274">- field error display and status badges</text>
+    <text x="960" y="296">- object editor schema rendering</text>
+    <text x="960" y="318">- rich text toolbar + paste sanitization</text>
+
+    <text x="160" y="502">- data table with sort, filter, paginate</text>
+    <text x="160" y="524">- virtual list/grid for large data</text>
+    <text x="160" y="546">- tree-table hybrid + lazy load</text>
+    <text x="160" y="568">- reconnect modern data grid module</text>
+
+    <text x="960" y="502">- split panes + resizable layout</text>
+    <text x="960" y="524">- accordion, drawer, wizard stepper</text>
+    <text x="960" y="546">- tab variants + overflow handling</text>
+    <text x="960" y="568">- window snap, dock, z-order</text>
+
+    <text x="160" y="752">- ARIA roles and focus management</text>
+    <text x="160" y="774">- keyboard navigation standards</text>
+    <text x="160" y="796">- theming tokens + CSS variables</text>
+    <text x="160" y="818">- high contrast + reduced motion</text>
+
+    <text x="960" y="752">- normalize duplicate control names</text>
+    <text x="960" y="774">- stable public API surface</text>
+    <text x="960" y="796">- test harnesses + visual regressions</text>
+    <text x="960" y="818">- structured docs and sample gallery</text>
+  </g>
+
+  <!-- Connectors -->
+  <g stroke="#3b3f46" stroke-width="1" opacity="0.7">
+    <line x1="680" y1="290" x2="720" y2="410" />
+    <line x1="920" y1="290" x2="880" y2="410" />
+    <line x1="680" y1="540" x2="720" y2="540" />
+    <line x1="920" y1="540" x2="880" y2="540" />
+    <line x1="680" y1="790" x2="720" y2="600" />
+    <line x1="920" y1="790" x2="880" y2="600" />
+  </g>
+
+  <!-- Gold accents -->
+  <g stroke="url(#gold_grad)" stroke-width="2" opacity="0.8">
+    <line x1="120" y1="410" x2="680" y2="410" />
+    <line x1="920" y1="410" x2="1480" y2="410" />
+    <line x1="120" y1="660" x2="680" y2="660" />
+    <line x1="920" y1="660" x2="1480" y2="660" />
+  </g>
+
+  <!-- Footer note -->
+  <text x="120" y="950" fill="#7f8790" font-size="13" font-family="Trebuchet MS, Arial, sans-serif">
+    Diagram companion to docs/jsgui3-html-improvement-ideas.md
+  </text>
+</svg>

package/docs/troubleshooting.md

@@ -197,13 +197,14 @@ input.js:1:0: ERROR: Expected identifier but found "}"
 
 2. **Verify CSS definition:**
    ```javascript
-   MyControl.css = `
-   .my-control {
-       padding: 20px;
-       background: #f0f0f0;
-   }
-   `;
-   ```
+   MyControl.css = `
+   .my-control {
+       padding: 20px;
+       background: #f0f0f0;
+   }
+   `;
+   ```
+   You can also use `MyControl.scss` or `MyControl.sass` with template literals; these compile to CSS during bundling (ensure the `sass` dependency is installed). To see inline CSS sourcemaps in devtools, enable `style.sourcemaps` (or run with `debug: true`).
 
 3. **Check activation:**
    ```javascript
@@ -746,4 +747,4 @@ This minimal setup helps isolate whether the issue is with your specific code or
 
 ---
 
-Remember: Most issues can be resolved by carefully checking the console output, verifying file paths, and ensuring proper control lifecycle management. Start with the basics and work systematically through the possible causes.
+Remember: Most issues can be resolved by carefully checking the console output, verifying file paths, and ensuring proper control lifecycle management. Start with the basics and work systematically through the possible causes.

package/examples/controls/14d) window, canvas globe/EarthGlobeRenderer.js

@@ -149,19 +149,24 @@ class EarthGlobeRenderer {
   enablePipeline() { this.pipelineEnabled = true; }
   disablePipeline() { this.pipelineEnabled = false; }
   setSunDirection(vec3) { this.sun = this._normVec(vec3); this.render(false); }
-  setSunFromSpherical(lonDeg, latDeg) {
-    // convenience API used by existing client code
-    const λ = lonDeg * Math.PI/180;
-    const φ = latDeg * Math.PI/180;
-    const cφ = Math.cos(φ);
-    this.setSunDirection([
-      cφ * Math.sin(λ),
-      Math.sin(φ),
-      cφ * Math.cos(λ)
-    ]);
-  }
-
-  _buildContinents() {
+  setSunFromSpherical(lonDeg, latDeg) {
+    // convenience API used by existing client code
+    const λ = lonDeg * Math.PI/180;
+    const φ = latDeg * Math.PI/180;
+    const cφ = Math.cos(φ);
+    this.setSunDirection([
+      cφ * Math.sin(λ),
+      Math.sin(φ),
+      cφ * Math.cos(λ)
+    ]);
+  }
+
+  _update_rot() {
+    this.R = mat3FromQuat(this.q);
+    this.Rt = mat3Transpose(this.R);
+  }
+
+  _buildContinents() {
     const arr = [];
     for (const name of Object.keys(CONTINENT_OUTLINES)) {
       const def = CONTINENT_OUTLINES[name];
@@ -356,4 +361,4 @@ class EarthGlobeRenderer {
   }
 }
 
-module.exports = EarthGlobeRenderer;
+module.exports = EarthGlobeRenderer;

package/examples/controls/14d) window, canvas globe/pipeline/TransformStage.js

@@ -2,9 +2,9 @@ const BaseStage = require('./BaseStage');
 
 class TransformStage extends BaseStage {
   /** @param {RenderState} rs */
-  execute(rs) {
-    const r = this.r;
-    r._updateRot();
+  execute(rs) {
+    const r = this.r;
+    r._update_rot();
 
     const rect = r.canvas.getBoundingClientRect();
     const width = rect.width || r.canvas.width / r.opts.dpr;
@@ -13,8 +13,8 @@ class TransformStage extends BaseStage {
     rs.height = height;
 
     const pad = r.opts.padding;
-    const minSide = Math.min(width, height);
-    rs.radius = Math.max(1, minSide / 2 - pad);
+    const min_side = Math.min(width, height);
+    rs.radius = Math.max(1, min_side / 2 - pad);
   rs.cx = width * 0.5;
   rs.cy = height * 0.5;
   }