Fix rendering of TOC when headers contain a numbered list item

libraries/Library/Std/APIs/DOM.md

@@ -10,8 +10,10 @@ dom.span {
   -- tag attributes can be set like this:
   class = "my-class",
   id = "my-id",
-  -- Plain text body elements can be added like this
+  -- Plain text body elements can be added like this (rendered as markdown)
   "Span content",
+  -- Use __rawText to add plain text without markdown processing
+  __rawText = "1. This won't become a list",
   -- And elements can be nested
   dom.strong { "I am strong" },
   -- Widgets can also be embedded
@@ -46,7 +48,9 @@ dom =  setmetatable({}, {
       for key, val in pairs(spec) do
         if type(key) == "string" then
           -- This is an attribute
-          if key:startsWith("on") then
+          if key == "__rawText" then
+            node.appendChild(js.window.document.createTextNode(val))
+          elseif key:startsWith("on") then
             node.addEventListener(key:sub(3), val)
           else
             node.setAttribute(key, val)

libraries/Library/Std/Widgets/Widgets.md

@@ -86,7 +86,7 @@ end
   font-weight: bold;
   user-select: none;
   padding: 15px 10px;
-  margin: -10px;
+  margin: -10px -10px 0 -10px;
   background-color: var(--editor-widget-background-color);
 }
 .sb-toc-content {
@@ -175,21 +175,44 @@ function widgets.toc(options)
     minLevel = math.min(minLevel, header.level)
   end
 
-  -- Build TOC entries as DOM elements
-  local tocItems = {}
-  for _, header in ipairs(headersToDisplay) do
-    local indent = (header.level - minLevel) * 1.5
-    table.insert(tocItems, dom.div {
-      class = "sb-toc-item",
-      style = "margin-left: " .. indent .. "rem;",
-      dom.a {
-        onclick = function()
-          editor.navigate({ page = pageName, pos = header.pos })
-        end,
-        class = "sb-toc-link",
-        "- " .. header.name
+  -- Build a nested ul/li structure based on heading levels
+  local function buildTocList(headers)
+    local root = dom.ul {  }
+    local stack = { { node = root, level = minLevel - 1, lastLi = nil } }
+
+    for _, header in ipairs(headers) do
+      -- Pop back up when heading is at same or higher level
+      while #stack > 1 and stack[#stack].level >= header.level do
+        table.remove(stack)
+      end
+
+      -- Open nested <ul>s for deeper headings
+      while stack[#stack].level < header.level - 1 do
+        local newUl = dom.ul {}
+        -- Attach nested list to the last <li> in the current level, or create one if needed
+        local parent = stack[#stack].lastLi or dom.li {}
+        if not stack[#stack].lastLi then
+          stack[#stack].node.appendChild(parent)
+        end
+        parent.appendChild(newUl)
+        table.insert(stack, { node = newUl, level = stack[#stack].level + 1, lastLi = nil })
+      end
+
+      -- Create the <li> with link
+      local li = dom.li {
+        dom.a {
+          onclick = function()
+            editor.navigate({ page = pageName, pos = header.pos })
+          end,
+          class = "sb-toc-link",
+          __rawText = header.name
+        }
       }
-    })
+      stack[#stack].node.appendChild(li)
+      stack[#stack].lastLi = li
+    end
+
+    return root
   end
 
   -- Wrap in a <details> element for native show/hide toggle
@@ -200,10 +223,7 @@ function widgets.toc(options)
         class = "sb-toc-summary",
         options.header
       },
-      dom.div {
-        class = "sb-toc-content",
-        table.unpack(tocItems)
-      }
+      buildTocList(headersToDisplay)
     },
     display = "block"
   }

website/Guide/Journaling.md

@@ -55,14 +55,14 @@ The real power comes from linking journal entries to topic pages. Instead of pla
 
 Each `[[link]]` connects that journal entry (and its sub-items) to the referenced page.
 
-# 4. Watch topic pages come alive
+# 3. Watch topic pages come alive
 Navigate to Alice’s page. In the [[Linked Mention]] section at the bottom, you’ll see your journal entries that mention her — complete with the surrounding context and sub-items. Tomorrow’s journal entry mentioning Alice will appear there too.
 
 Over time, each topic page accumulates a reverse-chronological log of every journal entry that references it. You don’t maintain this log — it builds itself from your daily writing.
 
 This works for any kind of page: people, projects, concepts, books. Your journal becomes the connective tissue between all your topics.
 
-# 5. Query your journal
+# 4. Query your journal
 Use [[Space Lua/Lua Integrated Query]] to pull insights from your journal pages. For example, show recent journal entries on your [[Index Page]]:
 
 ```lua