@yuneta/gobj-ui 6.3.1 → 7.0.0

package/README.md

@@ -13,8 +13,13 @@ Published as `@yuneta/gobj-ui`. Built on top of [`@yuneta/gobj-js`](https://gith
 > routing contract (URL = source of truth, push/replace history, the
 > position/preference/transient litmus).
 >
+> **BREAKING (7.0.0):** a **dependency-only major** — no component API moved.
+> The `maplibre-gl` peer floor rises to `^6.4.1`, which is where `DOM.sanitize`
+> stops leaving dangerous attributes behind when several sit next to each other.
+> Raise the range in every consumer that declares maplibre.
+>
 > **BREAKING (5.0.0):** a **dependency-only major** — no component API moved.
-> The peer floors are now `maplibre-gl` `^6.0.0`, `@yuneta/gobj-js` `^7.8.7`,
+> The peer floors moved to `maplibre-gl` `^6.0.0` (see 7.0.0 above), `@yuneta/gobj-js` `^7.8.7`,
 > `i18next` `^26.3.6`, `tom-select` `^2.6.2`, `vanilla-jsoneditor` `^3.13.0`.
 > maplibre v6 is ESM-only with no default export, so a consumer imports it as
 > `import * as maplibregl`; bundling the map with Vite 8 also means emitting
@@ -529,9 +534,13 @@ Two implementation notes worth keeping:
 
 A landing view that draws a treedb the way its schema literal draws it in ASCII
 (`treedb_schema_*.c`, `treedb_system_schema.c`): **one card per topic**,
-listing its fields in schema order, and **one edge per hook**, leaving the row
-that declares the hook and landing on the fkey row of the child it names. Built
-from the schema `descs` **alone**: no data, no backend calls. It is the "every
+listing its fields in schema order, and **one edge per hook**, between the row
+that declares the hook and the fkey row of the child it names. The **arrowhead
+is on the hook**, the way the `.c` draws it and the way the `↖` of the fkey
+mark reads: the reference is held by the child and points at its parent. The
+edge itself is declared parent → child, which is what ranks the parent to the
+left, first, as the literal lists it. Built from the schema `descs` **alone**:
+no data, no backend calls. It is the "every
 treedb is a graph" rule applied to the schema itself, and an alternate landing
 to the topic cards. A node click opens that topic's table through a real hash
 navigation, so the graph is a navigation surface rather than a picture.

package/dist/gobj-ui.cjs.js

@@ -19796,9 +19796,11 @@ function register_c_yui_treedb_graph() {
 *      Schema-graph landing: the treedb drawn the way its `.c` literal
 *      draws it in ASCII (treedb_schema_*.c, treedb_system_schema.c) —
 *      one CARD per topic listing its fields in schema order, one edge
-*      per hook, from the row that declares the hook to the fkey row of
-*      the child it names. Built from the schema `descs` alone: no data,
-*      no backend calls.
+*      per hook, between the row that declares the hook and the fkey row
+*      of the child it names — arrowhead on the HOOK, as the `.c` draws
+*      it and as the `↖` of the fkey mark says: the reference is the
+*      child's and it points at its parent. Built from the schema
+*      `descs` alone: no data, no backend calls.
 *
 *      WHY THE CARD AND NOT A DOT. A topic is its fields; a schema is
 *      read to find out what a topic holds and what links to what. A
@@ -20058,14 +20060,17 @@ ${rows_html}    </div>
 *   Derive {nodes, edges} from the schema.
 *
 *   Node = a topic, drawn as the card the `.c` literal draws in
-*   ASCII: its name and its fields. Edge = a hook, from the row
-*   that declares it to the fkey row of the child it names —
-*   `'hook': {'users': 'departments'}` says both ends, so the
-*   arrow can land where the `.c` drawing lands it. An fkey
-*   whose parent declares no hook still gets its edge, or a
+*   ASCII: its name and its fields. Edge = a hook, between the
+*   row that declares it and the fkey row of the child it names
+*   — `'hook': {'users': 'departments'}` says both ends, so the
+*   edge can land on the rows the `.c` drawing lands it on. An
+*   fkey whose parent declares no hook still gets its edge, or a
 *   half-declared schema would draw as disconnected.
 *
-*   Left-to-right dagre follows the parent -> child data flow.
+*   An edge is declared parent -> child so left-to-right dagre
+*   ranks the parent first, the order the `.c` literal lists
+*   them in. The ARROWHEAD is the other way (see edge_style):
+*   the fkey points at the hook, never the hook at the fkey.
 ************************************************************/
 function schema_to_graph(gobj) {
 	let descs = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "descs");
@@ -20165,12 +20170,20 @@ function schema_to_graph(gobj) {
 *   the graph is built and re-applied on a theme switch
 *   (ac_theme), which restyles the LIVE graph — rebuilding it
 *   would drop the user's zoom/pan and any dragged node.
+*
+*   The arrowhead is at the START of the edge, on the parent's
+*   hook — the direction the `.c` literals draw and the `↖` of
+*   the fkey mark names: the reference is held by the CHILD and
+*   points at its parent. The edge is still declared parent ->
+*   child, which is what ranks the parent to the left; only the
+*   marker says who points at whom.
 ************************************************************/
 function edge_style(dark) {
 	return {
 		stroke: dark ? "#7a8593" : "#9aa4b2",
 		lineWidth: 1.2,
-		endArrow: true
+		startArrow: true,
+		endArrow: false
 	};
 }
 /************************************************************

package/dist/gobj-ui.es.js

@@ -19783,9 +19783,11 @@ function register_c_yui_treedb_graph() {
 *      Schema-graph landing: the treedb drawn the way its `.c` literal
 *      draws it in ASCII (treedb_schema_*.c, treedb_system_schema.c) —
 *      one CARD per topic listing its fields in schema order, one edge
-*      per hook, from the row that declares the hook to the fkey row of
-*      the child it names. Built from the schema `descs` alone: no data,
-*      no backend calls.
+*      per hook, between the row that declares the hook and the fkey row
+*      of the child it names — arrowhead on the HOOK, as the `.c` draws
+*      it and as the `↖` of the fkey mark says: the reference is the
+*      child's and it points at its parent. Built from the schema
+*      `descs` alone: no data, no backend calls.
 *
 *      WHY THE CARD AND NOT A DOT. A topic is its fields; a schema is
 *      read to find out what a topic holds and what links to what. A
@@ -20045,14 +20047,17 @@ ${rows_html}    </div>
 *   Derive {nodes, edges} from the schema.
 *
 *   Node = a topic, drawn as the card the `.c` literal draws in
-*   ASCII: its name and its fields. Edge = a hook, from the row
-*   that declares it to the fkey row of the child it names —
-*   `'hook': {'users': 'departments'}` says both ends, so the
-*   arrow can land where the `.c` drawing lands it. An fkey
-*   whose parent declares no hook still gets its edge, or a
+*   ASCII: its name and its fields. Edge = a hook, between the
+*   row that declares it and the fkey row of the child it names
+*   — `'hook': {'users': 'departments'}` says both ends, so the
+*   edge can land on the rows the `.c` drawing lands it on. An
+*   fkey whose parent declares no hook still gets its edge, or a
 *   half-declared schema would draw as disconnected.
 *
-*   Left-to-right dagre follows the parent -> child data flow.
+*   An edge is declared parent -> child so left-to-right dagre
+*   ranks the parent first, the order the `.c` literal lists
+*   them in. The ARROWHEAD is the other way (see edge_style):
+*   the fkey points at the hook, never the hook at the fkey.
 ************************************************************/
 function schema_to_graph(gobj) {
 	let descs = gobj_read_attr(gobj, "descs");
@@ -20152,12 +20157,20 @@ function schema_to_graph(gobj) {
 *   the graph is built and re-applied on a theme switch
 *   (ac_theme), which restyles the LIVE graph — rebuilding it
 *   would drop the user's zoom/pan and any dragged node.
+*
+*   The arrowhead is at the START of the edge, on the parent's
+*   hook — the direction the `.c` literals draw and the `↖` of
+*   the fkey mark names: the reference is held by the CHILD and
+*   points at its parent. The edge is still declared parent ->
+*   child, which is what ranks the parent to the left; only the
+*   marker says who points at whom.
 ************************************************************/
 function edge_style(dark) {
 	return {
 		stroke: dark ? "#7a8593" : "#9aa4b2",
 		lineWidth: 1.2,
-		endArrow: true
+		startArrow: true,
+		endArrow: false
 	};
 }
 /************************************************************

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "6.3.1",
+  "version": "7.0.0",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -38,7 +38,7 @@
     "@yuneta/gobj-js": "^7.13.2",
     "bulma": "^1.0.4",
     "i18next": "^26.3.6",
-    "maplibre-gl": "^6.1.0",
+    "maplibre-gl": "^6.4.1",
     "tabulator-tables": "^6.5.2",
     "tom-select": "^2.6.2",
     "uplot": "^1.6.32",

package/src/c_yui_treedb_schema.js

@@ -4,9 +4,11 @@
  *      Schema-graph landing: the treedb drawn the way its `.c` literal
  *      draws it in ASCII (treedb_schema_*.c, treedb_system_schema.c) —
  *      one CARD per topic listing its fields in schema order, one edge
- *      per hook, from the row that declares the hook to the fkey row of
- *      the child it names. Built from the schema `descs` alone: no data,
- *      no backend calls.
+ *      per hook, between the row that declares the hook and the fkey row
+ *      of the child it names — arrowhead on the HOOK, as the `.c` draws
+ *      it and as the `↖` of the fkey mark says: the reference is the
+ *      child's and it points at its parent. Built from the schema
+ *      `descs` alone: no data, no backend calls.
  *
  *      WHY THE CARD AND NOT A DOT. A topic is its fields; a schema is
  *      read to find out what a topic holds and what links to what. A
@@ -380,14 +382,17 @@ ${rows_html}    </div>
  *   Derive {nodes, edges} from the schema.
  *
  *   Node = a topic, drawn as the card the `.c` literal draws in
- *   ASCII: its name and its fields. Edge = a hook, from the row
- *   that declares it to the fkey row of the child it names —
- *   `'hook': {'users': 'departments'}` says both ends, so the
- *   arrow can land where the `.c` drawing lands it. An fkey
- *   whose parent declares no hook still gets its edge, or a
+ *   ASCII: its name and its fields. Edge = a hook, between the
+ *   row that declares it and the fkey row of the child it names
+ *   — `'hook': {'users': 'departments'}` says both ends, so the
+ *   edge can land on the rows the `.c` drawing lands it on. An
+ *   fkey whose parent declares no hook still gets its edge, or a
  *   half-declared schema would draw as disconnected.
  *
- *   Left-to-right dagre follows the parent -> child data flow.
+ *   An edge is declared parent -> child so left-to-right dagre
+ *   ranks the parent first, the order the `.c` literal lists
+ *   them in. The ARROWHEAD is the other way (see edge_style):
+ *   the fkey points at the hook, never the hook at the fkey.
  ************************************************************/
 function schema_to_graph(gobj)
 {
@@ -509,13 +514,21 @@ function schema_to_graph(gobj)
  *   the graph is built and re-applied on a theme switch
  *   (ac_theme), which restyles the LIVE graph — rebuilding it
  *   would drop the user's zoom/pan and any dragged node.
+ *
+ *   The arrowhead is at the START of the edge, on the parent's
+ *   hook — the direction the `.c` literals draw and the `↖` of
+ *   the fkey mark names: the reference is held by the CHILD and
+ *   points at its parent. The edge is still declared parent ->
+ *   child, which is what ranks the parent to the left; only the
+ *   marker says who points at whom.
  ************************************************************/
 function edge_style(dark)
 {
     return {
         stroke:   dark ? "#7a8593" : "#9aa4b2",
         lineWidth: 1.2,
-        endArrow: true,
+        startArrow: true,
+        endArrow:   false,
     };
 }