jsgui3-server 0.0.144 → 0.0.145

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/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;
   }