update clarity-outline js with new keybindings and update post

Author: flakstad

content/posts/keyboard-first-outlining.md

@@ -20,7 +20,21 @@ Here’s what it looks like:
 
 {{< clarity-outline-simple >}}
 
-The component is designed for keyboard-first interaction. You can fly through your tasks with arrows, use `Alt+arrow` to indent or outdent, and `Alt+Tab` to collapse or expand. Add new items with `Alt+Enter` to quickly expand your outline. Cycle through todo states with `Shift+left/right` arrows. When an item is focused, actions can be done with a single key press: **E** to edit, **S** to change status, **P** to mark priority, **A** to assign, etc. Mouse users aren’t left out: hover actions expose the same controls with shortcut hints. You won’t see rich task descriptions, comment threads or file uploads here; I think those belong on dedicated item pages. This component is the fast, structured backbone you can plug into bigger systems.
+The component is designed for keyboard-first interaction.
+- Move focus through the outline with the arrow keys, or with Emacs
+  (`Ctrl+F/B/N/P`) or Vi (`H/J/K/L`)
+  bindings.
+- Move items around in the structure using the same keys but while holding the `Alt` modifier.
+- Collapse and expand items that have sub-items with `Alt+T`.
+- Add new todos with `Alt+Enter`.
+- Cycle through item status with `Shift+←/→`.
+
+When an item is focused, actions can be done with a single key press: `E` to
+edit, `S` to change status, `P` to mark priority, `A` to assign, etc. Mouse
+users aren’t left out: hover actions expose the same controls with shortcut
+hints.
+
+You won’t see rich task descriptions, comment threads or file uploads here; I think those belong on dedicated item pages. This component is the fast, structured backbone you can plug into bigger systems.
 
 The outline takes JSON as input and emits events for every interaction. My plan is to drive it with [Datastar](https://data-star.dev/) with the server pushing live updates, but it can slot into any context.
 

layouts/shortcodes/clarity-outline-simple.html

@@ -32,6 +32,8 @@
       {"id":"8","text":"Fix the broken lamp","status":"CANCELLED"},
       {"id":"9","text":"Write blog post","status":"IN PROGRESS"}
     ]'
-    options='{"statusLabels": [{"label": "TODO", "isEndState": false}, {"label": "IN PROGRESS", "isEndState": false}, {"label": "DONE", "isEndState": true}, {"label": "CANCELLED", "isEndState": true}]}'>
+    options='{"statusLabels":[{"label": "TODO", "isEndState": false}, {"label": "IN PROGRESS", "isEndState": false}, {"label": "DONE", "isEndState": true}, {"label": "CANCELLED", "isEndState": true}],
+    "assignees": ["Alice", "Bob", "Charlie"],
+  "tags": ["urgent", "bug", "feature"]}'>
   </clarity-outline>
 </div>