@yuneta/gobj-ui 7.23.141 → 7.23.143

package/index.js

@@ -23,6 +23,7 @@ export { register_c_yui_map } from "./src/c_yui_map.js";
 export { register_c_yui_uplot } from "./src/c_yui_uplot.js";
 export { register_c_yui_json_graph } from "./src/c_yui_json_graph.js";
 export { register_c_yui_json } from "./src/c_yui_json.js";
+export { register_c_yui_json_pad } from "./src/c_yui_json_pad.js";
 export { register_c_yui_gclass } from "./src/c_yui_gclass.js";
 export { register_c_yui_fsm_graph } from "./src/c_yui_fsm_graph.js";
 export { register_c_yui_gobj_tree_js } from "./src/c_yui_gobj_tree_js.js";
@@ -129,6 +130,7 @@ export { yui_theme_now, yui_is_dark, yui_watch_theme } from "./src/yui_theme.js"
 export { attach_clear, refresh_clear } from "./src/yui_inputs.js";
 export { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open } from "./src/yui_dev.js";
 export { setup_frontend_view } from "./src/yui_frontend_view.js";
+export { setup_json_pad } from "./src/yui_json_pad.js";
 
 /*
  *  CSS - import these in your main entry point

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.141",
+  "version": "7.23.143",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -122,6 +122,7 @@ import {
     fold_open_levels,
     fold_close_levels,
     fold_level_clamp,
+    fold_is_hierarchical,
     fold_toggle,
     fold_show_more,
     fold_reveal,
@@ -301,14 +302,14 @@ const PORT_LINE_WIDTH = 2;
 const NODE_MODES = ['expanded', 'compact', 'shape'];
 
 const PILL_SIZE = {
-    hierarchical: [200, 30],
+    entity:       [200, 30],
     extended:     [180, 28],
     child:        [160, 26],
 };
 const PORT_R_PILL = 6;
 
 const SHAPE_SIZE = {
-    hierarchical: 32,
+    entity:       32,
     extended:     28,
     child:        22,
 };
@@ -436,7 +437,7 @@ SDATA(data_type_t.DTP_STRING,   "hook_port_position",   0,  "bottom",   "Hook po
 SDATA(data_type_t.DTP_STRING,   "fkey_port_position",   0,  "top",      "Fkey port position"),
 
 /*---------------- Folding ----------------*/
-SDATA(data_type_t.DTP_INTEGER,  "expand_depth",         0,  2,      "Levels open when a treedb loads, until the reader steps (`fold_level`): 1 = the roots alone, 2 = the roots and their children. Every open hook shows its first page"),
+SDATA(data_type_t.DTP_INTEGER,  "expand_depth",         0,  1,      "Levels open when a treedb loads, until the reader steps (`fold_level`): 1 = the roots alone (the default), 2 = the roots and their children. Every open hook shows its first page"),
 SDATA(data_type_t.DTP_INTEGER,  "fold_level",           0,  0,      "The level of the MAIN tree the toolbar's stepper stands on: 1 = its roots, N = N-1 levels under them; 0 = `expand_depth`. The host persists it and sends EV_SET_FOLD_LEVEL; it is published back in EV_LEGEND_STATE (`fold`) with the levels the tree has"),
 SDATA(data_type_t.DTP_INTEGER,  "fold_page_size",       0,  24,     "Children of one hook shown per page; the `+N` chip after the page opens the next one"),
 SDATA(data_type_t.DTP_LIST,     "hidden_topics",        0,  "[]",   "Topics left out of the tree: no card, no pill counts them, no edge reaches them"),
@@ -545,7 +546,7 @@ let PRIVATE_DATA = {
     _nodes_placed:      0,          // ...of which carry a saved position
 
     /*---------------- folding ----------------*/
-    expand_depth:       2,
+    expand_depth:       1,
     fold_level:         0,
     fold_page_size:     24,
     hidden_topics:      null,
@@ -1859,7 +1860,12 @@ function configure_behaviour(gobj)
 }
 
 /************************************************************
- *  Count hooks and fkeys in topic desc, classify node type
+ *  Count hooks and fkeys in topic desc, classify node type:
+ *  `child` (no hooks), `extended` (hooks, no fkeys), `entity`
+ *  (both). It sizes the card and nothing else. It used to be
+ *  called `hierarchical`, and that word means something else now:
+ *  a topic hooked to ITSELF, the only kind a tree can hang from
+ *  (treedb_fold_model).
  ************************************************************/
 function calculate_hooks_fkeys_counter(desc)
 {
@@ -1885,7 +1891,7 @@ function calculate_hooks_fkeys_counter(desc)
     } else if(desc.fkeys_counter === 0) {
         desc.node_treedb_type = 'extended';
     } else {
-        desc.node_treedb_type = 'hierarchical';
+        desc.node_treedb_type = 'entity';
     }
 }
 
@@ -2306,7 +2312,7 @@ function card_shape_of(gobj, desc, record, geometry, pills_html)
             desc.topic_name, true, record.id, false, false, false, pills_html
         );
     } else {
-        // Hierarchical entity (ROOT / container): largest tier.
+        // Entity, hooks and fkeys (ROOT / container): largest tier.
         style.innerHTML = build_node_innerHTML(
             paint.fill, priv.theme, record.icon, label,
             desc.topic_name, false, record.id, false, false, false, pills_html
@@ -2409,7 +2415,7 @@ function pill_shape_of(gobj, desc, record, geometry)
 {
     let priv = gobj.priv;
     let tier = desc.node_treedb_type;
-    let size = PILL_SIZE[tier] || PILL_SIZE.hierarchical;
+    let size = PILL_SIZE[tier] || PILL_SIZE.entity;
     let ports = build_ports(gobj, desc);
     let paint = node_paint_of(gobj, desc, geometry);
 
@@ -2472,7 +2478,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
     let dark = (priv.theme === "dark");
     let f = flags || {};
     let tier = desc.node_treedb_type;
-    let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
+    let side = SHAPE_SIZE[tier] || SHAPE_SIZE.entity;
     let labels = gobj_read_bool_attr(gobj, "node_labels");
     let figure = node_figure_of(gobj, desc, geometry || {});
     let paint = node_paint_of(gobj, desc, geometry);
@@ -7042,7 +7048,7 @@ function show_node_detail_popover(gobj, node_id)
 }
 
 /************************************************************
- *  Re-render every HTML (hierarchical) node so its card adopts
+ *  Re-render every HTML (entity) node so its card adopts
  *  the given theme: entity cards and leaf chips (baked innerHTML,
  *  not re-themed by setTheme()) are regenerated; structural
  *  junction diamonds get their neutral fill/stroke re-themed.
@@ -7258,7 +7264,7 @@ function refresh_minimap(gobj)
 
 /************************************************************
  *  The innerHTML of ONE node, in the given theme and highlight state.
- *  The three treedb tiers (hierarchical / extended / child) each have
+ *  The three treedb tiers (entity / extended / child) each have
  *  their own card, and both the theme refresh and the highlight need the
  *  same three-way choice — it lived inline in the theme refresh and is
  *  shared now. Returns null for a node that carries no desc.
@@ -7295,7 +7301,7 @@ function node_innerHTML_of(nd, theme, highlight, selected, anchored, pills_html)
                 desc.topic_name, true, record.id, highlight, selected, anchored,
                 pills_html
             );
-        case 'hierarchical':
+        case 'entity':
             return build_node_innerHTML(
                 fill, theme, record.icon, label,
                 desc.topic_name, false, record.id, highlight, selected, anchored,
@@ -7569,7 +7575,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
 }
 
 /************************************************************
- *  Build innerHTML for hierarchical (HTML) nodes.
+ *  Build innerHTML for entity (HTML) nodes.
  *
  *  Card style modelled on the documentation schema graphs
  *  (docs gen_treedb_graphs.py): rounded card, soft tint of the
@@ -9538,12 +9544,16 @@ function publish_legend_state(gobj, visible)
             loose_shown: model.loose_shown.has(topic_name),
             hidden: model.hidden.has(topic_name),
             linked: model.linked.has(topic_name),
+            hierarchical: fold_is_hierarchical(priv.descs, topic_name),
         });
     }
 
     gobj_publish_event(gobj, "EV_LEGEND_STATE", {
         main_topic: model.main_topic,
-        main_chosen: !!gobj_read_str_attr(gobj, "main_topic"),
+        /*  CHOSEN only when the reader's pick is the one in force: a
+         *  pick the rule refuses (not hierarchical) is ignored.  */
+        main_chosen: !!model.main_topic &&
+                     gobj_read_str_attr(gobj, "main_topic") === model.main_topic,
         topics: topics,
         /*  The toolbar's stepper: the tree it walks, where it stands,
          *  and how deep it goes. `levels` 0 = nothing to step through.  */

package/src/c_yui_json_pad.js

@@ -0,0 +1,454 @@
+/***********************************************************************
+ *          c_yui_json_pad.js
+ *
+ *          C_YUI_JSON_PAD -- a pad to paste JSON from OUTSIDE and read it
+ *          with the library's own viewer.
+ *
+ *          The viewer (C_YUI_JSON: the lazy tree, the raw text and the
+ *          graph) only ever showed what an app fetched.  A JSON that came
+ *          from anywhere else -- a log line, a config file, an answer copied
+ *          from a terminal -- had to be read in whatever the operator had
+ *          at hand.  This is the blank page for it: paste, and read it the
+ *          way every other document of the app is read.
+ *
+ *          DOM (UPPER_SNAKE logical classes):
+ *
+ *              JSON_PAD            the root
+ *                JSON_PAD_BAR      the text area and its two buttons
+ *                  JSON_PAD_INPUT  where the text goes
+ *                  JSON_PAD_VIEW   read what is in the text area
+ *                  JSON_PAD_CLEAR  empty the pad
+ *                JSON_PAD_ERROR    "invalid JSON" and the parser's reason
+ *                JSON_PAD_BODY     the C_YUI_JSON child
+ *
+ *          Every way in is an event:
+ *
+ *              EV_PASTE {text}   a paste ANYWHERE in the pad replaces the
+ *                                document and shows it at once -- there
+ *                                is one document here, not a text to edit
+ *              EV_VIEW           the text area as it is (typed, or edited
+ *                                after a paste); also Ctrl+Enter
+ *              EV_CLEAR          back to the blank pad
+ *
+ *          FSM: ST_EMPTY (nothing shown) and ST_SHOWING.  EV_EXPAND_PATH,
+ *          which the viewer publishes when a `__collapsed__` sentinel is
+ *          opened, only exists in ST_SHOWING, and is answered with
+ *          EV_SUBTREE_ERROR: a pasted document has no backend to fetch the
+ *          rest from -- the source truncated it, and the pad says so.
+ *
+ *          Hosted by setup_json_pad() (yui_json_pad.js) in a C_YUI_WINDOW;
+ *          any host can mount `$container` itself.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    SDATA,
+    SDATA_END,
+    data_type_t,
+    gclass_create,
+    gclass_find_by_name,
+    log_error,
+    log_warning,
+    gobj_create_pure_child,
+    gobj_read_pointer_attr,
+    gobj_read_attr,
+    gobj_write_attr,
+    gobj_subscribe_event,
+    gobj_send_event,
+    gobj_change_state,
+    gobj_start,
+    gobj_stop,
+    gobj_is_running,
+    gobj_short_name,
+    gobj_parent,
+    createElement2,
+} from "@yuneta/gobj-js";
+
+import {register_c_yui_json} from "./c_yui_json.js";
+import {yui_toolbar_icon} from "./yui_toolbar.js";
+
+import {t} from "i18next";
+
+/***************************************************************
+ *              Constants
+ ***************************************************************/
+const GCLASS_NAME = "C_YUI_JSON_PAD";
+
+/***************************************************************
+ *              Data
+ ***************************************************************/
+const attrs_table = [
+SDATA(data_type_t.DTP_POINTER,  "subscriber",   0,  null,   "Subscriber of output events"),
+SDATA(data_type_t.DTP_POINTER,  "$container",   0,  null,   "HTMLElement root, mounted by the host"),
+SDATA_END()
+];
+
+let PRIVATE_DATA = {
+    $input:     null,   /*  the text area  */
+    $error:     null,   /*  the "invalid JSON" line  */
+    $reason:    null,   /*  ...and the parser's reason inside it  */
+    gobj_json:  null,   /*  the C_YUI_JSON child  */
+};
+
+let __gclass__ = null;
+
+
+
+
+                    /******************************
+                     *      Framework Methods
+                     ******************************/
+
+
+
+
+/***************************************************************
+ *          Framework Method: Create
+ ***************************************************************/
+function mt_create(gobj)
+{
+    let priv = gobj.priv;
+
+    /*
+     *  CHILD subscription model
+     */
+    let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
+    if(!subscriber) {
+        subscriber = gobj_parent(gobj);
+    }
+    gobj_subscribe_event(gobj, null, {}, subscriber);
+
+    build_ui(gobj);
+
+    /*
+     *  The viewer, as a pure child: it publishes EV_EXPAND_PATH to its
+     *  parent (this gobj), which declares it in ST_SHOWING.
+     */
+    priv.gobj_json = gobj_create_pure_child("json_pad_view", "C_YUI_JSON", {}, gobj);
+    let $view = gobj_read_attr(priv.gobj_json, "$container");
+    if(!$view) {
+        log_error(`${gobj_short_name(gobj)}: C_YUI_JSON without $container`);
+        return;
+    }
+    gobj_read_attr(gobj, "$container").querySelector(".JSON_PAD_BODY").appendChild($view);
+}
+
+/***************************************************************
+ *          Framework Method: Start
+ ***************************************************************/
+function mt_start(gobj)
+{
+    let priv = gobj.priv;
+
+    if(priv.gobj_json) {
+        gobj_start(priv.gobj_json);
+    }
+    /*  A blank pad is waiting for a paste: the caret goes where it lands.  */
+    if(priv.$input) {
+        priv.$input.focus();
+    }
+}
+
+/***************************************************************
+ *          Framework Method: Stop
+ ***************************************************************/
+function mt_stop(gobj)
+{
+    let priv = gobj.priv;
+
+    if(priv.gobj_json && gobj_is_running(priv.gobj_json)) {
+        gobj_stop(priv.gobj_json);
+    }
+}
+
+/***************************************************************
+ *          Framework Method: Destroy
+ ***************************************************************/
+function mt_destroy(gobj)
+{
+}
+
+
+
+
+                    /***************************
+                     *      Local Methods
+                     ***************************/
+
+
+
+
+/***************************************************************
+ *  The pad: the text area and its buttons, the error line, and
+ *  the body the viewer is mounted in.
+ ***************************************************************/
+function build_ui(gobj)
+{
+    let priv = gobj.priv;
+
+    let button = (cls, icon, key, event_name) => {
+        return ['button', {class: `${cls} button`, type: 'button',
+                           title: t(key), 'data-i18n-title': key,
+                           'aria-label': t(key), 'data-i18n-aria-label': key},
+            [
+                yui_toolbar_icon(icon),
+                ['span', {style: 'padding-left:5px;', i18n: key}, key]
+            ],
+            {
+                click: (evt) => {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, event_name, {}, gobj);
+                }
+            }
+        ];
+    };
+
+    priv.$input = createElement2(
+        ['textarea', {class: 'JSON_PAD_INPUT textarea', rows: 3, spellcheck: 'false',
+                      placeholder: t('paste json here'), 'data-i18n-placeholder': 'paste json here',
+                      title: t('paste json here'), 'data-i18n-title': 'paste json here',
+                      'aria-label': t('paste json here'), 'data-i18n-aria-label': 'paste json here',
+                      style: 'font-family:monospace; resize:vertical; min-height:4.5em;'}, '', {
+            keydown: (evt) => {
+                if((evt.ctrlKey || evt.metaKey) && evt.key === 'Enter') {
+                    evt.preventDefault();
+                    gobj_send_event(gobj, "EV_VIEW", {}, gobj);
+                }
+            }
+        }]
+    );
+
+    priv.$reason = createElement2(
+        ['span', {class: 'JSON_PAD_ERROR_REASON', style: 'margin-left:.5em; font-family:monospace;'}, '']
+    );
+    priv.$error = createElement2(
+        ['div', {class: 'JSON_PAD_ERROR is-hidden has-text-danger is-size-7', role: 'alert'}, [
+            ['span', {class: 'JSON_PAD_ERROR_LABEL', style: 'font-weight:600;', i18n: 'invalid json'},
+             'invalid json'],
+            priv.$reason
+        ]]
+    );
+
+    let $container = createElement2(
+        ['div', {class: 'C_YUI_JSON_PAD JSON_PAD',
+                 style: 'height:100%; display:flex; flex-direction:column; gap:.5rem; padding:.5rem;'}, [
+            ['div', {class: 'JSON_PAD_BAR',
+                     style: 'display:flex; gap:.5rem; align-items:flex-start;'}, [
+                ['div', {style: 'flex:1 1 auto; min-width:0;'}, [priv.$input]],
+                ['div', {style: 'flex:0 0 auto; display:flex; flex-direction:column; gap:.5rem;'}, [
+                    button('JSON_PAD_VIEW', 'yi-eye', 'view', 'EV_VIEW'),
+                    button('JSON_PAD_CLEAR', 'yi-broom', 'clear', 'EV_CLEAR'),
+                ]]
+            ]],
+            priv.$error,
+            ['div', {class: 'JSON_PAD_BODY',
+                     style: 'flex:1 1 auto; min-height:0; display:flex; flex-direction:column;'}, []]
+        ], {
+            /*  A paste anywhere in the pad is the document: it replaces
+             *  what the text area held instead of landing at the caret.  */
+            paste: (evt) => {
+                let text = evt.clipboardData? evt.clipboardData.getData("text") : "";
+                if(!text) {
+                    return;     /*  an image or nothing: the browser's business  */
+                }
+                evt.preventDefault();
+                gobj_send_event(gobj, "EV_PASTE", {text: text}, gobj);
+            }
+        }]
+    );
+
+    gobj_write_attr(gobj, "$container", $container);
+}
+
+/***************************************************************
+ *  Read `text` as JSON and show it, or say why it is not.
+ ***************************************************************/
+function show_text(gobj, text)
+{
+    let priv = gobj.priv;
+    let src = String(text || "").trim();
+
+    if(!src) {
+        clear_pad(gobj, false);
+        return 0;
+    }
+
+    let doc;
+    try {
+        doc = JSON.parse(src);
+    } catch(e) {
+        /*  The reader's text, not a fault of the app: said on the pad, and
+         *  a warning for whoever reads the console.  */
+        log_warning(`${gobj_short_name(gobj)}: the pasted text is not JSON: ${e.message}`);
+        priv.$reason.textContent = e.message;
+        priv.$error.classList.remove('is-hidden');
+        return -1;
+    }
+
+    priv.$error.classList.add('is-hidden');
+    priv.$reason.textContent = "";
+    gobj_send_event(priv.gobj_json, "EV_SET_JSON", {json: doc}, gobj);
+    gobj_change_state(gobj, "ST_SHOWING");
+    return 0;
+}
+
+/***************************************************************
+ *  Back to the blank pad; `with_text` empties the text area too.
+ ***************************************************************/
+function clear_pad(gobj, with_text)
+{
+    let priv = gobj.priv;
+
+    if(with_text) {
+        priv.$input.value = "";
+    }
+    priv.$error.classList.add('is-hidden');
+    priv.$reason.textContent = "";
+    gobj_send_event(priv.gobj_json, "EV_SET_JSON", {json: null}, gobj);
+    gobj_change_state(gobj, "ST_EMPTY");
+}
+
+
+
+
+                    /***************************
+                     *      Actions
+                     ***************************/
+
+
+
+
+/***************************************************************
+ *  A paste: it becomes the text area and the document at once.
+ ***************************************************************/
+function ac_paste(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let text = (kw && typeof kw.text === "string")? kw.text : "";
+
+    priv.$input.value = text;
+    return show_text(gobj, text);
+}
+
+/***************************************************************
+ *  The text area as it is now.
+ ***************************************************************/
+function ac_view(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    return show_text(gobj, priv.$input.value);
+}
+
+/***************************************************************
+ *  The blank pad again.
+ ***************************************************************/
+function ac_clear(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    clear_pad(gobj, true);
+    priv.$input.focus();
+    return 0;
+}
+
+/***************************************************************
+ *  The viewer asks for a `__collapsed__` subtree.  A pasted
+ *  document has no backend to ask for it: the SOURCE truncated
+ *  it, and that is the answer.
+ ***************************************************************/
+function ac_expand_path(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    gobj_send_event(priv.gobj_json, "EV_SUBTREE_ERROR", {
+        path: (kw && kw.path) || "",
+        error: t("collapsed in the source")
+    }, gobj);
+    return 0;
+}
+
+/***************************************************************
+ *              FSM
+ ***************************************************************/
+/*---------------------------------------------*
+ *          Global methods table
+ *---------------------------------------------*/
+const gmt = {
+    mt_create:  mt_create,
+    mt_start:   mt_start,
+    mt_stop:    mt_stop,
+    mt_destroy: mt_destroy
+};
+
+/***************************************************************
+ *          Create the GClass
+ ***************************************************************/
+function create_gclass(gclass_name)
+{
+    if(__gclass__) {
+        log_error(`GClass ALREADY created: ${gclass_name}`);
+        return -1;
+    }
+
+    /*---------------------------------------------*
+     *          States
+     *---------------------------------------------*/
+    const states = [
+        ["ST_EMPTY", [
+            ["EV_PASTE",            ac_paste,           null],
+            ["EV_VIEW",             ac_view,            null],
+            ["EV_CLEAR",            ac_clear,           null],
+        ]],
+        ["ST_SHOWING", [
+            ["EV_PASTE",            ac_paste,           null],
+            ["EV_VIEW",             ac_view,            null],
+            ["EV_CLEAR",            ac_clear,           null],
+            ["EV_EXPAND_PATH",      ac_expand_path,     null],
+        ]]
+    ];
+
+    /*---------------------------------------------*
+     *          Events
+     *---------------------------------------------*/
+    const event_types = [
+        ["EV_PASTE",            0],
+        ["EV_VIEW",             0],
+        ["EV_CLEAR",            0],
+        ["EV_EXPAND_PATH",      0],
+    ];
+
+    __gclass__ = gclass_create(
+        gclass_name,
+        event_types,
+        states,
+        gmt,
+        0,  // lmt,
+        attrs_table,
+        PRIVATE_DATA,
+        0,  // authz_table,
+        0,  // command_table,
+        0,  // s_user_trace_level
+        0   // gclass_flag
+    );
+
+    if(!__gclass__) {
+        return -1;
+    }
+
+    return 0;
+}
+
+/***************************************************************
+ *          Register GClass
+ ***************************************************************/
+function register_c_yui_json_pad()
+{
+    /*  the viewer it hosts, if the app did not register it  */
+    if(!gclass_find_by_name("C_YUI_JSON", false)) {
+        register_c_yui_json();
+    }
+    return create_gclass(GCLASS_NAME);
+}
+
+export { register_c_yui_json_pad };

package/src/c_yui_schema_editor.js

@@ -1061,6 +1061,13 @@ function render_topics(gobj, $body)
                     ? ["span", {class: "SCHEMA_TOPIC_SYSTEM tag ml-2",
                                 i18n: "system"}, t("system")]
                     : ["span", {}, ""],
+                /*  The schema's mark of the topic the tree hangs from: the
+                 *  same gold star the treedb graph's legend wears.  */
+                topic.main_topic
+                    ? ["span", {class: "SCHEMA_TOPIC_MAIN ml-2",
+                                style: "color:#d4a017;",
+                                title: t("main topic"), "data-i18n-title": "main topic"}, "★"]
+                    : ["span", {}, ""],
                 ambiguous
                     ? ["div", {class: "SCHEMA_TOPIC_ID is-size-7 yui-text-quiet"},
                         [["code", {}, `${topic.id}`]]]
@@ -1898,6 +1905,14 @@ function open_topic_form(gobj, treedb, topic)
                     ["span", {class: "ml-1", i18n: "system topic"}, t("system topic")]
                 ]]
             ]],
+            /*  A LABEL that wraps its control names it: no aria-label.  */
+            ["div", {class: "SCHEMA_TOPIC_FORM_MAIN field mb-3"}, [
+                ["label", {class: "checkbox"}, [
+                    ["input", el_attrs({type: "checkbox", "data-name": "main_topic",
+                               checked: record.main_topic ? "checked" : undefined})],
+                    ["span", {class: "ml-1", i18n: "main topic"}, t("main topic")]
+                ]]
+            ]],
             ["div", {class: "SCHEMA_TOPIC_FORM_ACTIONS is-flex mt-4",
                      style: "gap:.5rem; justify-content:flex-end;"}, [
                 ["button", {class: "SCHEMA_TOPIC_FORM_CANCEL button", type: "button"},
@@ -2501,6 +2516,7 @@ function topic_record(gobj, treedb, topic, values)
     record.tkey = values.tkey || "";
     record.topic_version = values.topic_version === "" ? 1 : Number(values.topic_version);
     record.system_topic = !!values.system_topic;
+    record.main_topic = !!values.main_topic;
 
     return record;
 }